/* ═══════════════════════════════════════════════════════════════
   components.css — Wedding Planner landing page components
   facts strip · feature cards · screenshot frames ·
   couple-page split · money card · pricing · FAQ · CTA
═══════════════════════════════════════════════════════════════ */

.nav-cta {
    display:inline-flex; align-items:center; padding:9px 18px;
    border-radius:999px; background:var(--accent); color:var(--cream);
    font-size:var(--fs-meta); font-weight:500; text-decoration:none;
    transition:background .22s, transform .28s var(--ease);
}
.nav-cta:hover { background:var(--accent-deep); transform:translateY(-1px); }

/* ── feature cards ────────────────────────────────────────────── */
.feat-grid {
    display:grid; grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));
    gap:clamp(16px,2vw,24px);
}
/* Exactly four cards: auto-fit would give three and leave an orphan
   on a row of its own, which reads as a card that failed to load. */
.feat-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
/* Six and nine both divide by three, so the columns are stated rather
   than left to auto-fit — no row of one, at any width this grid is used. */
.feat-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.feat {
    background:var(--paper); border:1px solid var(--line-soft);
    border-radius:var(--radius); padding:28px 26px 30px;
    box-shadow:var(--shadow-card);
    transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
    position:relative; overflow:hidden;
}
.feat::before {   /* a gold hairline that draws itself on hover */
    content:''; position:absolute; left:0; top:0; height:2px; width:0;
    background:linear-gradient(90deg,var(--gold),transparent);
    transition:width .45s var(--ease);
}
.feat:hover { transform:translateY(-4px); border-color:var(--line); box-shadow:0 24px 52px -34px rgba(10,39,35,.32); }
.feat:hover::before { width:64%; }

.feat-ico {
    width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
    background:var(--sand); color:var(--accent); margin-bottom:18px;
}
.feat-ico svg { width:22px; height:22px; }

.feat h3 {
    font-family:'Fraunces',Georgia,serif; font-weight:500;
    font-size:1.17rem; line-height:1.25; letter-spacing:-.01em; color:var(--ink);
}
.feat h3 .hu {
    display:block; font-family:'Hanken Grotesk',sans-serif; font-weight:500;
    font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase;
    color:var(--gold-deep); margin-bottom:7px;
}
.feat p { font-size:var(--fs-sub); color:var(--ink-500); margin-top:11px; }

/* ── the nine supporting capabilities ─────────────────────────
   The same card, quieter: the icon sits on the title line instead of
   above it, and the shadow is gone — fifteen shadowed cards in a row
   read as a wall of floating tiles rather than as one list with a
   lead group in front of it. */
.feat--compact {
    padding:19px 20px 21px; box-shadow:none; background:transparent;
    border-color:var(--line);
    display:grid; grid-template-columns:auto 1fr; gap:0 13px; align-items:center;
}
.feat--compact .feat-ico {
    width:34px; height:34px; border-radius:10px; margin:0; grid-row:span 2;
    align-self:start;
}
.feat--compact .feat-ico svg { width:18px; height:18px; }
.feat--compact h3 { font-size:1.04rem; }
.feat--compact p { margin-top:5px; font-size:var(--fs-meta); grid-column:2; }
.feat--compact:hover { transform:none; box-shadow:none; background:var(--paper); }
.feat--compact:hover::before { width:0; }

.feat-more { margin-top:clamp(26px,3vw,38px); }
.feat-more-lead {
    font-size:var(--fs-meta); color:var(--ink-500); text-align:center;
    margin-bottom:clamp(18px,2vw,26px);
}

/* The disclosure that folds the nine away on a phone. Hidden until the
   `.js` guard says JavaScript is running AND the viewport is narrow
   (responsive.css) — on a desktop, and without JS anywhere, the nine
   are simply on the page and this button does not exist. */
.feat-toggle-wrap { display:none; justify-content:center; margin-top:30px; }
.feat-toggle {
    display:inline-flex; align-items:center; gap:9px;
    padding:13px 24px; border-radius:999px;
    border:1px solid var(--line); background:var(--paper);
    font-size:var(--fs-sub); font-weight:500; color:var(--ink);
    cursor:pointer; min-height:48px;
}
.feat-toggle svg { width:16px; height:16px; color:var(--gold-deep); transition:transform .3s var(--ease); }
.feat-toggle[aria-expanded="true"] svg { transform:rotate(180deg); }
.feat-toggle[aria-expanded="false"] .feat-toggle-less,
.feat-toggle[aria-expanded="true"]  .feat-toggle-more { display:none; }

/* ── screenshot frames ────────────────────────────────────────── */
.shots { display:grid; gap:clamp(22px,3vw,38px); }
.shots--two { grid-template-columns:1fr 1fr; }

.shot {
    border-radius:var(--radius); overflow:hidden; background:var(--paper);
    border:1px solid var(--line); box-shadow:var(--shadow-shot);
    position:relative;
}
.shot img { width:100%; height:auto; display:block; }
/* Tall pages are cropped by the frame, not retouched in the file — and
   the cap is a MAX, never a fixed height. Forced to 520px, a landscape
   1600×1000 capture is scaled up until it overflows and gets cropped
   left and right, losing the left edge of the app it is showing.
   As a max: a landscape shot fits whole, a tall one crops from the top. */
.shot--tall { max-height:520px; }
.shot--tall img { max-height:520px; object-fit:cover; object-position:top center; }

/* the couple page is the product's own differentiator — its frame is
   allowed to be taller than the gallery's */
.shot--couple, .shot--couple img { max-height:600px; }

/* the zoom affordance, added by main.js only when <dialog> can carry
   the lightbox. The badge is a child element rather than a pseudo, so
   the button itself stays a plain, full-frame hit area. */
.shot-zoom {
    position:absolute; inset:0; z-index:2; padding:0; border:0;
    background:transparent; cursor:zoom-in;
    display:grid; align-items:end; justify-items:end;
}
.shot-zoom span {
    margin:12px; width:40px; height:40px; border-radius:999px;
    background:rgba(255,253,249,.92); border:1px solid var(--line);
    display:grid; place-items:center; color:var(--accent);
    box-shadow:0 10px 24px -14px rgba(10,39,35,.6);
    opacity:0; transform:translateY(6px);
    transition:opacity .26s var(--ease), transform .26s var(--ease);
}
.shot-zoom svg { width:19px; height:19px; }
.shot:hover .shot-zoom span,
.shot-zoom:focus-visible span { opacity:1; transform:none; }

.shot-cap {
    display:flex; gap:12px; align-items:baseline;
    margin-top:16px; font-size:var(--fs-meta); color:var(--ink-500);
}
.shot-cap b {
    font-family:'Hanken Grotesk',sans-serif; font-weight:600;
    font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase;
    color:var(--gold-deep); flex:none;
}

/* ── the screenshot lightbox ──────────────────────────────────
   A native <dialog>: ::backdrop, Escape and the focus trap come from
   the browser. Only the look is ours, and it is the page's own — ivory
   frame, gold label, teal ink — not a black photo viewer. */
.lb {
    border:0; padding:0; background:transparent; max-width:none; max-height:none;
    width:100%; height:100%; inset:0; overflow:hidden;
    display:none; place-items:center;
}
.lb[open] { display:grid; }
.lb::backdrop { background:rgba(10,39,35,.90); backdrop-filter:blur(3px); }

.lb-figure {
    display:flex; flex-direction:column; gap:14px;
    max-width:min(1240px,92vw); max-height:88vh; margin:auto;
}
.lb-img {
    display:block; width:auto; height:auto;
    max-width:min(1240px,92vw); max-height:calc(88vh - 62px);
    border-radius:var(--radius); border:1px solid var(--line-dark);
    background:var(--paper); object-fit:contain;
    box-shadow:0 50px 110px -50px rgba(0,0,0,.75);
}
.lb-cap {
    display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
    font-size:var(--fs-meta); color:var(--cream-dim);
}
.lb-cap-label {
    font-family:'Hanken Grotesk',sans-serif; font-weight:600;
    font-size:var(--fs-label); letter-spacing:.13em; text-transform:uppercase;
    color:var(--gold); flex:none;
}
.lb-count { margin-left:auto; color:var(--cream-faint); font-variant-numeric:tabular-nums; }

.lb-btn {
    position:fixed; z-index:2; width:46px; height:46px; padding:0;
    border-radius:999px; border:1px solid var(--line-dark);
    background:rgba(246,239,227,.10); color:var(--cream);
    display:grid; place-items:center; cursor:pointer;
    transition:background .2s, border-color .2s;
}
.lb-btn:hover { background:rgba(246,239,227,.20); border-color:var(--gold); }
.lb-btn svg { width:20px; height:20px; }
.lb-close { top:20px; right:20px; }
.lb-prev  { left:20px;  top:50%; transform:translateY(-50%) rotate(90deg); }
.lb-next  { right:20px; top:50%; transform:translateY(-50%) rotate(-90deg); }

/* ── split: text beside a picture ─────────────────────────────── */
.split {
    display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,66px);
    align-items:center;
}
.split--wide-media { grid-template-columns:.88fr 1.12fr; }

/* The couple section is three grid children, not two, so the picture is
   placeable on its own: beside the text on a desktop, and between the
   lede and the bullets on a phone (responsive.css). The picture also
   takes the larger column here — it is the thing being sold. */
.split--couple {
    grid-template-columns:1.06fr .94fr;
    grid-template-areas:"media text" "media ticks";
    align-items:center; row-gap:20px;
}
.split--couple .split-text  { grid-area:text; align-self:end; }
.split--couple .split-media { grid-area:media; align-self:stretch; }
.split--couple .split-ticks { grid-area:ticks; align-self:start; margin-top:0; }
/* The frame spans both text rows, so it takes its height from the column
   beside it rather than from the picture's 1.6 aspect ratio — which is
   what left it floating in the middle of the band at half the size of
   the thing it is selling. The capture is a tall page anyway: cropping
   it from the top shows more of the couple's page, not less. */
.split--couple .shot--couple { height:100%; max-height:660px; }
.split--couple .shot--couple img { height:100%; max-height:660px; object-fit:cover; object-position:top center; }

.ticks { list-style:none; margin-top:26px; display:flex; flex-direction:column; gap:13px; }
.ticks li { display:flex; gap:12px; font-size:var(--fs-sub); color:var(--ink-500); }
.ticks li b { color:var(--ink); font-weight:600; }
.ticks svg { width:18px; height:18px; flex:none; color:var(--gold-deep); margin-top:3px; }
.band--dark .ticks li, .band--photo .ticks li { color:var(--cream-dim); }
.band--dark .ticks li b, .band--photo .ticks li b { color:var(--cream); }
.band--dark .ticks svg, .band--photo .ticks svg { color:var(--gold); }

/* ── the money card ───────────────────────────────────────────── */
.money {
    background:var(--paper); border:1px solid var(--line);
    border-radius:var(--radius); box-shadow:var(--shadow-card);
    overflow:hidden; font-size:var(--fs-sub);
}
.money-row {
    display:grid; grid-template-columns:1fr auto auto; gap:16px;
    padding:13px 22px; border-bottom:1px solid var(--line-soft);
    align-items:center;
}
.money-row span:nth-child(2) { color:var(--ink-500); font-size:var(--fs-meta); }
.money-row span:nth-child(3) { font-variant-numeric:tabular-nums; font-weight:500; }
.money-head {
    background:var(--sand); font-size:var(--fs-label); letter-spacing:.12em;
    text-transform:uppercase; color:var(--gold-deep); font-weight:600;
}
.money-sum {
    background:var(--sea-deep); color:var(--cream); border-bottom:0;
    padding-top:17px; padding-bottom:17px;
}
.money-sum span:nth-child(2) { color:var(--cream-faint); }
.money-sum span:nth-child(3) { font-family:'Fraunces',Georgia,serif; font-size:1.35rem; }
.money-huf { color:var(--gold); font-size:var(--fs-meta) !important; }
.money-note {
    padding:14px 22px; background:var(--shell); color:var(--ink-500);
    font-size:var(--fs-meta); border-top:1px solid var(--line-soft);
}

/* ── pricing ──────────────────────────────────────────────────── */
/* `start`, not `stretch`: the yearly card has three lines fewer than the
   one-off card, and stretched to match it the difference became a hole
   of empty paper that read as a card missing its content. */
.price-grid {
    display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(20px,3vw,30px);
    align-items:start; max-width:900px; margin:0 auto;
}
.price {
    border-radius:var(--radius-lg); padding:clamp(30px,3.4vw,42px);
    display:flex; flex-direction:column;
}
.price--main {
    background:var(--paper); border:1px solid var(--gold);
    box-shadow:0 30px 68px -36px rgba(10,39,35,.4);
    position:relative;
}
.price--main::after {   /* keystone diamond, top centre */
    content:''; position:absolute; top:-6px; left:50%; width:11px; height:11px;
    background:var(--gold); transform:translateX(-50%) rotate(45deg);
}
.price--side {
    background:var(--shell); border:1px solid var(--line-soft);
    padding:clamp(26px,2.8vw,34px);
}

.price-kind {
    font-size:var(--fs-label); letter-spacing:.15em; text-transform:uppercase;
    font-weight:600; color:var(--gold-deep);
}
.price-fig {
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:clamp(2.7rem,5vw,3.7rem); line-height:1;
    letter-spacing:-.03em; margin:16px 0 4px; color:var(--ink);
}
.price-fig small { font-size:.42em; letter-spacing:0; color:var(--ink-500); }
.price-sub { font-size:var(--fs-meta); color:var(--ink-500); }
.price ul {
    list-style:none; margin:24px 0 0; display:flex; flex-direction:column; gap:12px;
    font-size:var(--fs-sub); color:var(--ink-500);
}
.price ul li { display:flex; gap:11px; }
.price ul svg { width:17px; height:17px; flex:none; color:var(--gold-deep); margin-top:3px; }
.price .btn { margin-top:28px; align-self:flex-start; }
.price-fine {
    margin-top:auto; padding-top:22px; font-size:13px; color:var(--ink-500);
}
/* „Not compulsory" is the sentence that removes the lock-in fear, and
   it was set as fine print. It gets the gold hairline instead. */
.price-fine--note {
    margin-top:24px; padding:14px 0 0 15px; border-top:0;
    border-left:2px solid var(--gold); font-size:var(--fs-meta);
    padding-top:2px; padding-bottom:2px;
}
.price-fine--note b { color:var(--ink); font-weight:600; }

/* ── FAQ ──────────────────────────────────────────────────────
   On a LIGHT band, deliberately. It used to sit on the dark one,
   directly above the dark closing band — which cost the page its one
   organic edge: the closing band's shallow arch is its own box pulled
   up and clipped, so its corners reveal the band behind, and dark
   revealed through dark is a straight line. A light band here draws
   the curve and stops the page ending in two dark sections. */
.faq { max-width:820px; margin:0 auto; }
.faq details { border-bottom:1px solid var(--line); }
.faq details:first-child { border-top:1px solid var(--line); }
.faq summary {
    cursor:pointer; list-style:none; padding:22px 44px 22px 0;
    font-family:'Fraunces',Georgia,serif; font-size:1.1rem; color:var(--ink);
    position:relative; transition:color .2s;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
    content:''; position:absolute; right:8px; top:50%; width:11px; height:11px;
    border-right:1.5px solid var(--gold-deep); border-bottom:1.5px solid var(--gold-deep);
    transform:translateY(-70%) rotate(45deg); transition:transform .32s var(--ease);
}
.faq details[open] summary::after { transform:translateY(-30%) rotate(-135deg); }
.faq summary:hover { color:var(--accent); }
.faq-a { padding:0 44px 24px 0; font-size:var(--fs-sub); color:var(--ink-500); }

/* ── closing CTA ──────────────────────────────────────────────── */
.cta { text-align:center; }
.cta .btn { margin-top:8px; }
.cta-mail {
    margin-top:22px; font-size:var(--fs-meta); color:var(--cream-faint);
}
.cta-mail a { color:var(--gold); text-decoration:none; border-bottom:1px solid transparent; }
.cta-mail a:hover { border-bottom-color:var(--gold); }

/* ── placeholder art (until the real files land) ───────────────
   Every <img> on the page points at a real file, so nothing here
   depends on JavaScript or on the picture being replaced first.
   The placeholders are SVGs of the exact final dimensions, so
   swapping in the photographs cannot reflow the page. */
.ph { background:var(--sand); }

/* ═══════════════════════════════════════════════════════════════
   Sales redesign — the sections the brief added. Everything below
   reuses the tokens in main.css; no new colour enters the page.
═══════════════════════════════════════════════════════════════ */

/* ── the problem ──────────────────────────────────────────────── */
.pain-grid {
    display:grid; grid-template-columns:repeat(2,1fr);
    gap:clamp(26px,4vw,56px); align-items:start;
}
.pain-h {
    font-family:'Hanken Grotesk',system-ui,sans-serif;
    font-size:var(--fs-label); font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-500); margin-bottom:18px;
}
.chips { list-style:none; display:flex; flex-wrap:wrap; gap:9px; }
.chips li {
    padding:8px 15px; border:1px solid var(--line); border-radius:999px;
    background:var(--paper); color:var(--ink-500); font-size:var(--fs-meta);
}
/* The tools are scattered; the questions they produce are a stack.
   Dashed leader, not a bullet: these are overheard, not itemised. */
.pain-qs { list-style:none; display:flex; flex-direction:column; gap:12px; }
.pain-qs li {
    padding-left:20px; position:relative;
    font-size:var(--fs-sub); color:var(--ink-500); font-style:italic;
}
.pain-qs li::before {
    content:''; position:absolute; left:0; top:.72em;
    width:11px; height:1px; background:var(--gold);
}
.pain-answer {
    margin-top:clamp(40px,5vw,64px); text-align:center;
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:clamp(1.35rem,2.6vw,2rem); line-height:1.3; color:var(--ink);
}
.pain-answer em { font-style:italic; font-weight:300; color:var(--gold-deep); }

/* ── wide overview screenshot ─────────────────────────────────── */
.shot--wide {
    max-width:1000px; margin:0 auto; border-radius:var(--radius-lg);
    overflow:hidden; box-shadow:var(--shadow-shot);
    border:1px solid var(--line-soft); background:var(--paper);
}
.shot--wide img { display:block; width:100%; height:auto; }

/* ── how it works ─────────────────────────────────────────────── */
.steps {
    list-style:none; counter-reset:step;
    display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,34px);
}
.step { position:relative; padding-top:22px; }
.step::before {   /* the rail the numbers sit on */
    content:''; position:absolute; top:0; left:0; right:0; height:1px;
    background:var(--line);
}
.step:first-child::before { background:linear-gradient(90deg,var(--gold),var(--line)); }
.step-n {
    display:block; font-family:'Fraunces',Georgia,serif; font-size:1.6rem;
    font-weight:300; color:var(--gold-deep); line-height:1; margin-bottom:12px;
}
.step h3 { font-size:1.02rem; font-weight:600; margin-bottom:8px; }
.step p { font-size:var(--fs-sub); color:var(--ink-500); }

/* ── white-label ──────────────────────────────────────────────── */
.urlbar { max-width:560px; margin:0 auto clamp(44px,5vw,64px); text-align:center; }
.urlbar-label {
    font-size:var(--fs-meta); color:var(--ink-500); margin-bottom:14px;
}
.urlbar-frame {
    display:flex; align-items:center; gap:14px;
    padding:12px 18px; border-radius:var(--radius);
    background:var(--paper); border:1px solid var(--line);
    box-shadow:var(--shadow-card);
}
.urlbar-dots { display:flex; gap:6px; flex:none; }
.urlbar-dots i { width:9px; height:9px; border-radius:50%; background:var(--line); }
.urlbar-url {
    display:flex; align-items:center; gap:9px; flex:1;
    padding:7px 14px; border-radius:999px; background:var(--shell);
    font-size:var(--fs-sub); color:var(--ink-500);
}
.urlbar-url svg { width:14px; height:14px; flex:none; color:var(--sage); }
.urlbar-url b { color:var(--ink); font-weight:600; }
.wl-grid { margin-top:0; }
.wl-micro {
    margin-top:clamp(36px,4vw,54px); text-align:center;
    font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:300;
    font-size:clamp(1.15rem,2vw,1.5rem); color:var(--gold-deep);
}

/* ── Excel comparison ─────────────────────────────────────────── */
.cmp-wrap { max-width:880px; margin:0 auto; overflow-x:auto; }
.cmp { width:100%; border-collapse:collapse; min-width:520px; }
.cmp th {
    text-align:left; padding:14px 20px; font-size:var(--fs-label);
    font-weight:600; letter-spacing:.12em; text-transform:uppercase;
}
.cmp thead th:first-child { color:var(--ink-500); }
.cmp thead th:last-child  { color:var(--ink); }
.cmp td {
    padding:15px 20px; border-top:1px solid var(--line);
    font-size:var(--fs-sub); vertical-align:top;
}
.cmp td:first-child { color:var(--ink-500); width:50%; }
.cmp td:last-child  { color:var(--ink); font-weight:500; background:var(--paper); }
.cmp tbody tr:last-child td { border-bottom:1px solid var(--line); }

/* ── product tour CTA ─────────────────────────────────────────── */
.sc-cta { margin-top:clamp(36px,4vw,52px); text-align:center; }

/* ── founder offer ────────────────────────────────────────────── */
.founder { max-width:720px; position:relative; }
.founder-badge, .price-badge {
    display:inline-block; margin-bottom:16px; padding:6px 14px;
    border-radius:999px; font-size:var(--fs-label); font-weight:600;
    letter-spacing:.12em; text-transform:uppercase;
}
.founder-badge { background:rgba(210,162,78,.16); color:var(--gold); }
.price-badge   { background:rgba(210,162,78,.18); color:var(--gold-deep); }
.founder .btn { margin-top:30px; }

/* ── pricing additions ────────────────────────────────────────── */
.price-name {
    font-family:'Fraunces',Georgia,serif; font-size:1.25rem;
    margin-bottom:14px; color:var(--ink);
}
/* "No monthly fee" is the single strongest line in the section, so it
   gets its own rule below the cards rather than a bullet inside one. */
.nomonthly {
    margin:clamp(34px,4vw,50px) auto 0; max-width:780px; text-align:center;
    padding:22px 28px; border-radius:var(--radius);
    background:var(--shell); border:1px solid var(--line-soft);
}
.nomonthly strong {
    display:block; font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:clamp(1.3rem,2.2vw,1.7rem); color:var(--ink); margin-bottom:7px;
}
.nomonthly span { font-size:var(--fs-sub); color:var(--ink-500); }

/* ── who is it for ────────────────────────────────────────────── */
.who-grid {
    display:grid; grid-template-columns:1.25fr 1fr;
    gap:clamp(26px,4vw,56px); align-items:start;
}
.who-col--yes { list-style:none; display:flex; flex-direction:column; gap:14px; }
.who-col--yes li { display:flex; gap:12px; font-size:1.02rem; }
.who-col--yes svg { width:18px; height:18px; flex:none; color:var(--gold-deep); margin-top:5px; }
.who-col--no {
    padding:26px 28px; border-radius:var(--radius);
    background:var(--paper); border:1px solid var(--line-soft);
}
.who-col--no h3 {
    font-size:var(--fs-label); font-weight:600; letter-spacing:.14em;
    text-transform:uppercase; color:var(--ink-500); margin-bottom:16px;
}
.who-col--no ul { list-style:none; display:flex; flex-direction:column; gap:11px; }
.who-col--no li {
    padding-left:20px; position:relative;
    font-size:var(--fs-sub); color:var(--ink-500);
}
.who-col--no li::before {
    content:''; position:absolute; left:0; top:.72em;
    width:11px; height:1px; background:var(--line);
}

/* ── partners slot ────────────────────────────────────────────── */
.partners { max-width:720px; margin:0 auto; text-align:center; }
.partners .btn { margin-top:28px; }

/* ── closing CTA + lead form ──────────────────────────────────── */
.cta { text-align:left; }
.cta-grid {
    display:grid; grid-template-columns:1fr 1fr;
    gap:clamp(30px,4.5vw,64px); align-items:start;
}
.cta-grid .title--center { text-align:left; margin-left:0; }
.cta-price {
    display:flex; align-items:flex-start; gap:10px; margin-top:26px;
    font-size:var(--fs-sub); color:var(--cream);
}
.cta-price svg { width:17px; height:17px; flex:none; color:var(--gold); margin-top:3px; }
.cta-mail { margin-top:16px; font-size:var(--fs-meta); color:var(--cream-faint); }
.cta-mail a { color:var(--gold); }

.lead {
    padding:clamp(24px,3vw,34px); border-radius:var(--radius-lg);
    background:rgba(255,255,255,.07); border:1px solid var(--line-dark);
    backdrop-filter:blur(8px);
}
.lead-h {
    font-family:'Fraunces',Georgia,serif; font-weight:400;
    font-size:clamp(1.2rem,2vw,1.5rem); color:var(--cream);
}
.lead-lede { margin:8px 0 22px; font-size:var(--fs-meta); color:var(--cream-faint); }
.field { display:block; margin-bottom:15px; }
.field-l {
    display:flex; align-items:baseline; gap:8px; margin-bottom:6px;
    font-size:var(--fs-meta); color:var(--cream-dim);
}
.field-opt { font-style:normal; font-size:var(--fs-label); color:var(--cream-faint); }
.field input, .field select, .field textarea {
    width:100%; padding:11px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--line-dark); background:rgba(10,39,35,.32);
    color:var(--cream); font:inherit; font-size:var(--fs-sub);
}
.field textarea { resize:vertical; min-height:74px; }
.field select { appearance:none; cursor:pointer; }
.field select option { background:var(--sea-deep); color:var(--cream); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible {
    outline:2px solid var(--gold); outline-offset:1px; border-color:transparent;
}
.field input::placeholder, .field textarea::placeholder { color:var(--cream-faint); }

/* ── themed dropdown (assets/js/dropdown.js) ──────────────────
   The trigger is drawn to match .field input exactly, so the form
   reads as one column of identical controls; only the panel is new.
   Without JavaScript no .dd wrapper is built, the native <select>
   is never hidden, and the field works as it always did. */
.dd { position:relative; display:flex; width:100%; }
.dd .dd-native {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    border:0; clip-path:inset(50%); overflow:hidden; white-space:nowrap;
    pointer-events:none;
}
.dd-trigger {
    flex:1 1 auto; display:inline-flex; align-items:center;
    justify-content:space-between; gap:14px; width:100%;
    padding:11px 14px; border-radius:var(--radius-sm);
    border:1px solid var(--line-dark); background:rgba(10,39,35,.32);
    color:var(--cream); font:inherit; font-size:var(--fs-sub);
    text-align:left; cursor:pointer;
    transition:border-color .2s var(--ease), background .2s var(--ease);
}
.dd-trigger:hover { border-color:rgba(210,162,78,.45); }
.dd-trigger:focus-visible { outline:2px solid var(--gold); outline-offset:1px; border-color:transparent; }
.dd.is-open .dd-trigger { border-color:var(--gold); background:rgba(10,39,35,.48); }
.dd-label {
    flex:1 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dd-label.is-placeholder { color:var(--cream-faint); }
.dd-caret {
    flex:none; display:inline-flex; align-items:center; color:var(--gold);
    transition:transform .25s var(--ease);
}
.dd.is-open .dd-caret { transform:rotate(180deg); }

/* The panel is appended to <body> and fixed-positioned by the JS, so
   it escapes the form's backdrop-filter and any overflow clipping. */
.dd-panel {
    z-index:300;   /* over the fixed header (200); under the skip link (400) */
    min-width:180px;
    max-width:min(340px, calc(100vw - 16px));
    max-height:min(320px, calc(100vh - 32px));
    display:flex; flex-direction:column;
    background:var(--sea-deep); color:var(--cream);
    border:1px solid rgba(210,162,78,.30); border-radius:var(--radius);
    box-shadow:0 30px 60px -28px rgba(10,39,35,.85);
    opacity:0; transform:translateY(-6px) scale(.985);
    transition:opacity .16s var(--ease), transform .22s var(--ease);
    overflow:hidden;
}
.dd-panel.is-open { opacity:1; transform:none; }
.dd-list { flex:1 1 auto; overflow-y:auto; list-style:none; padding:6px; margin:0; }
.dd-item {
    padding:10px 14px; border-radius:8px; cursor:pointer;
    font-size:var(--fs-sub); line-height:1.3; color:var(--cream-dim);
    transition:background .16s var(--ease), color .16s var(--ease);
}
.dd-item--empty { color:var(--cream-faint); }
.dd-item.is-active { background:rgba(246,239,227,.09); color:var(--cream); }
.dd-item.is-selected { background:rgba(210,162,78,.18); color:var(--cream); }
.dd-item.is-selected::after {
    content:''; float:right; width:6px; height:6px; margin-top:7px;
    border-radius:50%; background:var(--gold);
}
@media (prefers-reduced-motion:reduce) {
    .dd-panel { transition:none; }
    .dd-caret { transition:none; }
}
.lead-err {
    margin-bottom:12px; padding:10px 14px; border-radius:var(--radius-sm);
    background:rgba(210,162,78,.14); color:var(--gold);
    font-size:var(--fs-meta);
}
.lead-submit { width:100%; justify-content:center; margin-top:4px; }
.lead-fine { margin-top:14px; font-size:var(--fs-label); color:var(--cream-faint); line-height:1.55; }

/* ── sticky mobile CTA ────────────────────────────────────────── */
/* Phone only; main.js unhides it once the hero is off screen. The
   pricing section is a long scroll away on a phone, so the price
   travels with the button. */
.sticky-cta { display:none; }

/* ── prose block ──────────────────────────────────────────────── */
/* The one run of continuous text on the page (§8 of the SEO brief).
   A measure of ~68ch is what keeps it readable — the rest of the page
   is cards and lists, which carry their own width. The h3s are set
   smaller than a section .title on purpose: they are signposts inside
   one argument, not new sections. */
.prose {
    max-width:68ch;
    margin:0 auto;
    color:var(--ink-700);
    font-size:1.03rem;
    line-height:1.72;
}
.prose p { margin:0 0 1.15em; }
.prose p:last-child { margin-bottom:0; }
.prose h3 {
    font-family:'Fraunces',Georgia,serif;
    font-weight:400;
    font-size:1.24rem;
    line-height:1.3;
    color:var(--ink);
    margin:1.9em 0 .55em;
}
.prose h3::after {
    content:''; display:block; width:34px; height:1px;
    margin-top:.5em; background:var(--gold);
}

/* ── comparison → knowledge base ──────────────────────────────── */
/* One contextual link out of the section where a reader is still
   comparing tools. Centred under the table, quiet on purpose. */
.cmp-more { margin:26px 0 0; text-align:center; font-size:var(--fs-sub); }
.cmp-more a {
    color:var(--accent); text-decoration:none;
    border-bottom:1px solid rgba(14,79,71,.30);
}
.cmp-more a:hover { border-bottom-color:var(--accent); }

/* Mid-prose, under the paragraph it follows rather than centred
   under a table — the reader is still inside a sentence's worth of
   argument, so the link reads as a footnote, not as a section break. */
.cmp-more--inline { text-align:left; margin:20px 0 34px; }

/* On band--photo the ground is --sea-deep with a 30%-opacity picture
   over it, so the teal the base rule paints would all but vanish.
   Gold on that ground measures 6.2:1; check-contrast.py holds it. */
.cmp-more--light a { color:var(--gold); border-bottom-color:rgba(210,162,78,.35); }
.cmp-more--light a:hover { border-bottom-color:var(--gold); }