/* Homepage only: shared pricing and legal page styles remain independent. */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/assets/fonts/geist-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-latin.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/instrument-serif-italic-latin.woff2") format("woff2"); }
.home { --sans: "Geist", sans-serif; }
.home a { color: inherit; }
.home h1 em, .home h2 em { font-family: "Instrument Serif", serif; font-weight: 400; color: var(--accent); }
.home h2 { font-size: clamp(32px, 4vw, 49px); line-height: 1.1; }
.home h3 { font-size: 23px; line-height: 1.25; }
.home p { line-height: 1.7; }
.home :focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.skip-link { position: absolute; top: -80px; left: 20px; padding: 12px; background: var(--paper); z-index: 10; }
.skip-link:focus { top: 12px; }
.home-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.home-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 25px; font-weight: 600; letter-spacing: -1px; text-decoration: none; white-space: nowrap; }
.home-brand img { border-radius: 7px; }
.home-brand span { color: var(--accent); margin-left: -7px; }
.home-nav nav, .nav-actions { display: flex; align-items: center; gap: 26px; font-size: 13px; }
.home-nav nav a, .login { text-decoration: none; }
.home-nav nav a:hover, .home-footer a:hover { color: var(--accent); }
.home .button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 16px 22px; border-radius: 7px; background: var(--ink); color: var(--paper); font-weight: 500; font-size: 14px; text-decoration: none; transition: background .15s; }
.home .button:hover { background: var(--accent); }
.home .button.small { padding: 11px 16px; gap: 18px; font-size: 13px; }
.home .button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule-2); }
.home .button.ghost:hover { background: transparent; border-color: var(--accent); color: var(--accent); }
.closing-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; margin-top: 30px; }
.closing-actions .button { margin-top: 0; }
.home-hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; padding-top: 68px; padding-bottom: 76px; }
.kicker { font-size: 10px; font-weight: 600; letter-spacing: .15em; color: var(--ink-3); margin-bottom: 23px; }
.status-dot { display: inline-block; width: 6px; height: 6px; background: var(--accent); border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.home h1 { font-size: clamp(44px, 5vw, 65px); line-height: 1.04; letter-spacing: -.045em; }
.home h1 em { display: inline-block; margin-top: 6px; }
.intro-text { margin-top: 26px; max-width: 440px; font-size: 17px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; margin-top: 28px; }
.text-link { font-size: 13px; font-weight: 500; text-underline-offset: 5px; }
.text-link span { display: inline-block; margin-left: 7px; }
.home .small-note { font-size: 11px; color: var(--ink-3); margin-top: 16px; }
.writing-preview { display: flex; flex-direction: column; background: #eae1d3; border: 1px solid #d8cbbb; border-radius: 12px; padding: 20px; box-shadow: 0 18px 50px -30px #6a5e5160; transform: rotate(1deg); overflow: hidden; }
.preview-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 17px; }
.mini-brand { display: flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 600; }
.mini-brand img { border-radius: 4px; }
.example-label { font-size: 8px; color: var(--ink-3); letter-spacing: .1em; }
.idea-note { background: #f6eedf; padding: 17px 20px; border-left: 2px solid var(--accent); }
.card-label { display: block; font-size: 9px; color: var(--ink-3); font-weight: 600; letter-spacing: .1em; margin-bottom: 9px; }
.idea-note p { font-size: 13px; line-height: 1.6; }
.draft-bridge { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 10px; color: var(--ink-3); padding: 12px 0; }
.draft-bridge > span { font-size: 18px; color: var(--accent); }
.post-sheet { background: var(--paper); border-radius: 7px; padding: 22px; box-shadow: 0 3px 8px #39271608; }
.post-person { display: flex; gap: 9px; align-items: center; margin-bottom: 19px; }
.avatar { display: grid; place-items: center; width: 33px; height: 33px; flex-shrink: 0; border-radius: 50%; font-size: 13px; background: #dce1d0; color: #46533d; }
.post-person strong { display: block; font-size: 11px; }
.post-person div > span { display: block; font-size: 9px; color: var(--ink-3); margin-top: 2px; }
.linkedin-mark { margin-left: auto; font-weight: 700; font-size: 17px; color: #70675c; }
/* p, not h2: this is the opening line of a mocked-up LinkedIn post — sample content
   inside an "ILLUSTRATIVE EXAMPLE" card, not a real page section (independent review,
   agy — an h2 here landed in the page's heading outline next to actual section headings
   like "How it works"). Font weight below comes from .post-sheet's own bold default. */
.home .post-sheet .post-lead { font-size: 15px; line-height: 1.45; letter-spacing: -.02em; margin-bottom: 12px; font-weight: 600; color: var(--ink); }
.post-sheet p { font-size: 12px; line-height: 1.65; margin-bottom: 10px; }
.post-sheet-footer { display: flex; gap: 8px; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 17px; font-size: 10px; color: var(--ink-3); }
.edit-mark { color: var(--accent); }
.preview-bottom { display: flex; align-items: center; justify-content: space-between; font-size: 10px; color: var(--ink-3); padding-top: 12px; }
.preview-bottom > span:last-child { color: var(--accent); font-size: 18px; }
.hero-belief { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--rule); max-width: 440px; }
/* #9a5031, not var(--accent): at 19px/400 this is real sentence-length copy meant to be
   read, not a decorative label — var(--accent) on --bg is 3.85:1, below WCAG AA's 4.5:1
   for normal text (independent review, Codex). This is a 15%-darker shade of the same
   accent, computed to 5.06:1 — scoped to this one rule, not a change to --accent itself,
   which is used at small/decorative sizes elsewhere throughout the shared design system. */
.hero-belief p { font-family: "Instrument Serif", serif; font-style: italic; font-weight: 400; font-size: 19px; color: #9a5031; margin-bottom: 8px; }
.hero-belief span { font-size: 12px; color: var(--ink-3); }
.home-section { padding-top: 90px; padding-bottom: 90px; }
.start-section { padding-top: 90px; padding-bottom: 90px; }
.section-heading { max-width: 620px; margin-bottom: 42px; }
.section-heading > p:last-child { margin-top: 20px; font-size: 15px; max-width: 530px; }
.workflow-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; }
.workflow-grid article { border-top: 1px solid var(--rule-2); padding-top: 24px; display: flex; flex-direction: column; }
.step-number { font-family: "Instrument Serif", serif; color: var(--accent); font-size: 33px; margin-bottom: 18px; }
.workflow-grid h3 { margin-bottom: 14px; }
.workflow-grid article > p { font-size: 14px; margin-bottom: 24px; }
.step-example { background: var(--bg-soft); border-radius: 6px; padding: 17px; font-size: 12px; line-height: 1.6; margin-top: auto; min-height: 98px; }
.compare-block { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.compare-card { border-radius: 10px; padding: 22px; }
.compare-card.bad { background: var(--bg-soft); border: 1px solid var(--rule-2); }
.compare-card.good { background: #fcf4e7; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.compare-lbl { display: block; font-size: 11px; font-weight: 600; letter-spacing: .04em; margin-bottom: 14px; color: var(--ink-3); }
.compare-card.good .compare-lbl { color: #9a5031; }
.compare-snippet { font-family: var(--mono); font-size: 12px; line-height: 1.85; white-space: pre-wrap; color: var(--ink-2); margin: 0; }
.section-link { display: inline-block; margin-top: 28px; }
.outreach-section { background: #e8e5d9; border-block: 1px solid var(--rule); padding: 80px 0; }
.trust-badge { margin-top: 48px; padding: 30px 34px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 10px; max-width: 760px; }
.trust-tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #4c6743; background: rgba(90,122,79,.1); border: 1px solid rgba(90,122,79,.25); margin-bottom: 14px; }
.home .trust-badge h3 { font-size: clamp(19px, 2vw, 22px); margin-bottom: 10px; }
.trust-badge p { font-size: 13.5px; line-height: 1.65; max-width: 640px; }
.persona-block, .pipeline-block { margin-top: 72px; padding-top: 56px; border-top: 1px solid var(--rule); }
.persona-heading, .pipeline-heading { max-width: 620px; margin-bottom: 30px; }
.pipeline-heading p { margin-top: 14px; font-size: 14px; max-width: 520px; }
.home .persona-heading h3, .home .pipeline-heading h3 { font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; }
.persona-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.persona-tab { background: transparent; color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: 40px; padding: 8px 18px; font-size: 13px; font-family: inherit; cursor: pointer; transition: all .15s ease; }
.persona-tab:hover { border-color: var(--ink-3); }
.persona-tab.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.usecase-grid.hidden { display: none; }
.usecase { background: var(--paper); border: 1px solid var(--rule-2); border-radius: 8px; padding: 22px; }
.usecase-num { font-family: "Instrument Serif", serif; color: #9a5031; font-size: 24px; }
.home .usecase h4 { font-size: 17px; font-weight: 600; letter-spacing: -.02em; margin: 10px 0 10px; }
.usecase p { font-size: 13px; line-height: 1.6; }
.usecase-goal { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.usecase-goal .arrow { color: #9a5031; }
.pipeline-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pipeline-col-head { display: flex; flex-direction: column; gap: 3px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--rule-2); }
.gh-lbl { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }
.gh-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.gh-meta { font-size: 11px; color: var(--ink-3); }
.pipeline-card { display: flex; align-items: center; gap: 10px; background: var(--paper); border: 1px solid var(--rule-2); border-radius: 7px; padding: 10px 12px; margin-bottom: 8px; }
.av-sm { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; font-size: 10px; background: #dce1d0; color: #46533d; }
.pipeline-who { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.pipeline-who strong { font-size: 12px; font-weight: 600; }
.pipeline-who span { font-size: 10px; color: var(--ink-3); }
.auto-tag { font-size: 9px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #9a5031; background: rgba(182,95,58,.1); padding: 3px 7px; border-radius: 20px; white-space: nowrap; }
.pipeline-foot { display: flex; align-items: center; gap: 8px; margin-top: 20px; font-size: 11px; color: var(--ink-3); }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #5a7a4f; }
.outreach-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 65px; align-items: center; }
.outreach-copy > p:not(.kicker) { font-size: 14px; margin-top: 22px; }
.benefit-list { list-style: none; padding: 0; margin: 22px 0 28px; font-size: 12px; color: var(--ink-2); }
.benefit-list li { padding: 8px 0 8px 21px; position: relative; }
.benefit-list li::before { content: "↗"; position: absolute; left: 0; color: var(--accent); }
.conversation-preview { padding: 24px; border: 1px solid #d3d0c0; border-radius: 10px; background: var(--paper); }
.conversation-preview .preview-top { border-bottom: 1px solid var(--rule); }
.context-row { display: flex; gap: 11px; align-items: center; padding: 22px 0; }
.clay { background: #eddbcc; color: #8f5233; }
.context-row strong, .context-row div > span { display: block; font-size: 12px; }
.context-row div > span { font-size: 10px; color: var(--ink-3); margin-top: 4px; }
.history-note { padding: 15px; background: #eeeee4; border-radius: 5px; }
.history-note p, .message-draft p { font-size: 13px; }
.message-draft { padding: 22px 0 0; }
.message-draft p + p { margin-top: 12px; }
.conversation-footnote { font-size: 10px; color: var(--ink-3); border-top: 1px solid var(--rule); padding-top: 16px; margin-top: 22px; }
.examples-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.examples-grid article { background: var(--paper); border: 1px solid var(--rule-2); padding: 27px; border-radius: 8px; }
.example-index { display: block; font-size: 9px; letter-spacing: .08em; color: #9a5031; margin-bottom: 28px; font-weight: 600; }
.examples-grid h3 { font-size: 22px; margin-bottom: 20px; }
.examples-grid p { font-family: "Instrument Serif", serif; font-size: 23px; line-height: 1.35; }
.example-caption { display: block; border-top: 1px solid var(--rule); padding-top: 17px; margin-top: 24px; font-size: 11px; color: var(--ink-3); }
.home .example-disclaimer { margin-top: 14px; }
.free-card { border: 1px solid var(--rule-2); border-radius: 10px; padding: 45px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px; background: var(--paper); }
.free-card p:not(.kicker):not(.small-note) { margin-top: 20px; font-size: 14px; max-width: 460px; }
.free-allowance { display: flex; align-items: center; justify-content: center; flex-direction: column; border-left: 1px solid var(--rule); }
.allowance-number { font-family: "Instrument Serif", serif; font-size: 110px; line-height: 1; color: var(--accent); }
.free-allowance > span:not(.allowance-number) { font-size: 12px; color: var(--ink-3); margin-top: 9px; }
.allowance-rule { width: 42px; height: 1px; background: var(--rule-2); margin: 24px 0; }
.free-allowance strong { font-size: 15px; font-weight: 500; }
.referral-note { display: flex; align-items: center; gap: 18px; padding: 24px 7px; }
.referral-symbol { color: var(--accent); font-size: 26px; }
.referral-note p { font-size: 11px; flex: 1; }
.referral-note strong { font-weight: 600; }
.referral-note a { white-space: nowrap; font-size: 11px; }
.faq-section { display: grid; grid-template-columns: 1fr 1.6fr; gap: 80px; }
/* Explicit 2-column split (fixed HTML grouping), not column-count: a CSS multi-column's
   balance recalculates on any height change, so opening one question could visibly
   relocate OTHER, unrelated questions to the other column (independent review, Codex —
   reproduced live: opening item 1 pushed items 5 and 6 from the left column to the right). */
.home-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; border-top: 1px solid var(--rule-2); }
.home-faq details { border-bottom: 1px solid var(--rule-2); }
.home-faq summary { cursor: pointer; padding: 21px 25px 21px 0; position: relative; list-style: none; font-size: 14px; font-weight: 500; }
.home-faq summary::-webkit-details-marker { display: none; }
.home-faq summary::after { content: "+"; position: absolute; right: 0; color: var(--accent); font-size: 20px; top: 16px; }
.home-faq details[open] summary::after { content: "−"; }
.home-faq details p { padding-bottom: 22px; font-size: 13px; }
.closing-section { text-align: center; background: var(--bg-soft); border-block: 1px solid var(--rule); padding: 65px 0; }
.home-footer { display: flex; justify-content: space-between; gap: 35px; padding-top: 38px; padding-bottom: 38px; }
.home-footer p { font-size: 11px; margin: 14px 0 5px; }
.home-footer nav { display: flex; flex-wrap: wrap; align-content: center; gap: 20px; max-width: 440px; }
.home-footer nav a { font-size: 11px; text-decoration: none; }
@media (max-width: 1000px) {
  .home-nav nav { gap: 16px; }
  .home-hero { gap: 30px; }
  .outreach-grid { gap: 35px; }
  .writing-preview { transform: none; padding: 15px; }
  .home h1 { font-size: 53px; }
  .workflow-grid { gap: 22px; }
  .examples-grid article { padding: 20px; }
  .faq-section { gap: 40px; }
}
@media (max-width: 760px) {
  .home-nav { flex-wrap: wrap; gap: 18px; padding-top: 18px; padding-bottom: 15px; }
  .home-nav nav { order: 3; width: 100%; justify-content: space-between; font-size: 12px; }
  .nav-actions { gap: 18px; margin-left: auto; }
  .home-hero { grid-template-columns: 1fr; padding-top: 46px; padding-bottom: 45px; gap: 38px; }
  .home h1 { font-size: clamp(44px, 8vw, 60px); }
  .intro-text { max-width: 520px; font-size: 16px; }
  .hero-intro .kicker { font-size: 9px; }
  .writing-preview { max-width: 510px; width: 100%; justify-self: center; }
  .home-section, .start-section { padding-top: 55px; padding-bottom: 55px; }
  .section-heading { margin-bottom: 30px; }
  .workflow-grid, .outreach-grid, .examples-grid, .faq-section, .compare-block, .usecase-grid, .pipeline-board { grid-template-columns: 1fr; }
  .workflow-grid { gap: 30px; }
  .step-number { margin-bottom: 10px; }
  .step-example { min-height: auto; }
  .outreach-section { padding: 50px 0; }
  .examples-grid article { padding: 25px; }
  .persona-block, .pipeline-block { margin-top: 50px; padding-top: 40px; }
  .persona-tabs { gap: 6px; }
  .persona-tab { padding: 7px 14px; font-size: 12px; }
  .example-index { margin-bottom: 18px; }
  .free-card { grid-template-columns: 1fr; padding: 28px; gap: 35px; }
  .free-allowance { border-left: 0; border-top: 1px solid var(--rule); padding-top: 26px; }
  .allowance-number { font-size: 80px; }
  .referral-note { align-items: flex-start; flex-wrap: wrap; gap: 12px; }
  .referral-note p { flex-basis: calc(100% - 40px); }
  .referral-note a { margin-left: 30px; }
  .faq-section { gap: 0; }
  .home-faq { grid-template-columns: 1fr; }
  .home-footer { flex-direction: column; gap: 25px; }
  .actions { gap: 20px; }
}
/* Fanned deck: the back cards pivot around the front card's bottom-left corner, so
   every peeking edge grows outwards from one shared point instead of crossing zero
   mid-edge (which read as a misprint rather than a stack). The padding on the track
   reserves the space the fan swings into, so nothing is clipped by .writing-preview. */
/* .hero-controls now sits before .hero-slides in the DOM (independent review, Codex —
   Pause is reachable before the 3 slide selectors for keyboard/screen-reader users)
   — order restores the original visual stacking (controls stay at the bottom). */
.hero-slides { display: grid; padding: 0 34px 32px 0; order: 1; }
.hero-slide { position: relative; grid-area: 1 / 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; background: var(--paper); border: 1px solid #ded2c2; border-radius: 10px; padding: 15px 16px; overflow: hidden; transform-origin: 0% 100%; transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .5s ease, box-shadow .55s ease; pointer-events: none; }
/* Blank paper veil over the cards behind: the fan exposes a sliver of a back card,
   which without this shows a slice of its headline instead of a card edge. */
.hero-slide::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: 0; transition: opacity .45s ease; pointer-events: none; }
.hero-slide[data-pos="0"] { transform: rotate(0deg) scale(1); opacity: 1; z-index: 3; pointer-events: auto; box-shadow: 0 12px 28px -20px #6a5e5180; }
.hero-slide[data-pos="1"] { transform: rotate(2deg) scale(0.988); opacity: .94; z-index: 2; box-shadow: 0 8px 18px -16px #6a5e5170; }
.hero-slide[data-pos="2"] { transform: rotate(4deg) scale(0.976); opacity: .84; z-index: 1; box-shadow: 0 6px 14px -14px #6a5e5160; }
.hero-slide[data-pos="1"]::after, .hero-slide[data-pos="2"]::after { opacity: 1; }
/* Tighter than a default control row on purpose — the fan already reserves real
   space below the front card, so this row doesn't need its own generous margin
   on top of that or the whole card reads oversized/loose (independent review). */
.hero-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid var(--rule-2); padding-top: 9px; margin-top: 8px; order: 2; }
.hero-controls[hidden], .rotation-control[hidden] { display: none; }
.hero-selectors { display: flex; gap: 5px; order: 1; }
.hero-controls button { font: inherit; font-size: 11px; cursor: pointer; border: 0; border-radius: 5px; background: transparent; color: var(--ink-3); min-height: 33px; padding: 7px 12px; }
.hero-controls button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }
.hero-controls button:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
.hero-controls .rotation-control { padding-inline: 8px; font-size: 10px; order: 2; }
.slide-heading { padding: 6px 0 18px; }
.home .slide-heading h2 { font-size: 25px; line-height: 1.15; margin-bottom: 9px; }
.slide-heading p { font-size: 12px; }
.inbox-item { background: var(--paper); border: 1px solid var(--rule); border-radius: 7px; padding: 17px; margin-bottom: 12px; }
.source-label { display: block; color: #9a5031; font-size: 9px; font-weight: 600; letter-spacing: .07em; margin-bottom: 10px; }
.home .inbox-item h3 { font-size: 14px; line-height: 1.4; letter-spacing: -.015em; margin-bottom: 8px; }
.inbox-item p { font-size: 12px; line-height: 1.6; }
.idea-tag { display: inline-block; margin-top: 12px; padding: 4px 7px; border-radius: 4px; background: #eeeee4; font-size: 9px; color: #566048; }
.inspiration-note { border-left: 2px solid #b5bea5; padding-left: 10px; }
.inspiration-note strong { font-weight: 500; }
.inbox-item.compact { background: transparent; border-style: dashed; }
.home .slide-caption { font-size: 10px; color: var(--ink-3); padding: 3px 0; }
.draft-option { padding: 16px; border: 1px solid var(--rule-2); background: var(--paper); border-radius: 6px; margin-top: 12px; }
.draft-option p { font-size: 13px; line-height: 1.6; }
.draft-option.chosen { border-color: var(--accent); background: #fcf4e7; }
.draft-option .source-label { display: flex; justify-content: space-between; gap: 10px; }
#hero-drafts .slide-caption { padding-top: 12px; }
.refine-request { background: #f6eedf; border-left: 2px solid var(--accent); padding: 17px 20px; }
.refine-request p { font-size: 13px; }
/* These two blocks MUST stay below the base .hero-slide rules — the earlier
   @media (max-width: 1000px) block sits above them in the file, so anything it
   declared for .hero-slide lost the cascade on equal specificity and never applied. */
@media (max-width: 1000px) {
  /* Two-column hero at a narrow viewport makes the card tall and thin, and the
     fan's throw scales with card HEIGHT (H·sinθ), so the angle has to come down
     here or the back cards run past the frame and get clipped. */
  .hero-slides { padding: 0 26px 20px 0; }
  .hero-slide[data-pos="1"] { transform: rotate(1.3deg) scale(0.988); }
  .hero-slide[data-pos="2"] { transform: rotate(2.6deg) scale(0.976); }
}
@media (max-width: 760px) {
  .hero-controls button { min-height: 44px; padding-inline: 18px; }
  .hero-selectors { width: 100%; }
  .hero-selectors button { flex: 1; }
  .hero-slides { padding: 0 26px 18px 0; }
  .hero-slide { padding: 13px 14px; }
  .hero-slide[data-pos="1"] { transform: rotate(1.2deg) scale(0.988); }
  .hero-slide[data-pos="2"] { transform: rotate(2.5deg) scale(0.976); }
}
@media (prefers-reduced-motion: reduce) {
  .home *, .home *::before, .home *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}