/* ---------------------------------------------------------------------------
   Self-hosted faces for the standalone marketing pages.

   These documents are served straight off disk by ShuubhWeb.MarketingController
   and never load app.css, so they cannot inherit the app's own @font-face
   declarations. The built pages originally pulled
   `Inter:opsz,wght@14..32,400..800` + `Mukta:wght@500;700` from
   fonts.googleapis.com; CLAUDE.md forbids CDN fonts (privacy + performance), so
   the same families are declared here against the woff2 files already in
   priv/static/fonts.

   inter-400.woff2 is the full Inter VARIABLE font, so one face with a
   `font-weight: 100 900` range covers the 400-800 the pages ask for.

   Fraunces 600 is declared here too (the marketing pages never load app.css,
   which is where the app's own Fraunces faces live): it is now the display
   face for every page H1/H2/H3, per the approved pass-F mockup at
   .planning/frontpage/mockup-anchor-emerald-full.html.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}

@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/mukta-500.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/mukta-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/mukta-deva-500.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: "Mukta";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/mukta-deva-700.woff2") format("woff2");
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0,
    U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/fraunces-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Shuubh marketing site, shared styles. Ported from the operator-approved mockup at .planning/frontpage/mockup-anchor-emerald-full.html, pass F (2026-09-10), anchored in DESIGN.md's Traditional theme; asset urls remapped for pages/. Page-only additions live at the end under PAGES. */
html{scroll-behavior:smooth}
body{margin:0;background:#FFFDF8;color:#2A211C;font-family:Inter,system-ui,sans-serif}
.vp{
  container-type:inline-size;
  --cream:#FBF3E4; --surface:#FFFDF8; --ink:#2A211C; --ink-2:#5A4E44; --ink-3:#8A7B6E;
  --emerald:#1F5C4F; --emerald-dk:#0F2E27; --marigold:#E0A800; --marigold-lt:#FACC15; --maroon:#5C1020;
  --gold:#C8A24A;
  --hair:rgba(42,33,28,.12); --hair-2:rgba(42,33,28,.07);
  --r:16px; --r-in:12px;
  --shadow:0 0 0 1px rgba(42,33,28,.06),0 2px 4px rgba(42,33,28,.04),0 14px 36px rgba(31,92,79,.08);
  --shadow-lift:0 0 0 1px rgba(42,33,28,.09),0 6px 12px rgba(42,33,28,.06),0 28px 56px rgba(31,92,79,.14);
  --sec:56px; --z-nav:40; --z-qr:50;
  background:var(--surface);color:var(--ink);
  font-size:1.2rem;line-height:1.5;letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;font-variation-settings:"opsz" 20;
}
.vp *{box-sizing:border-box}
.vp p{margin:0;text-wrap:pretty}
.vp h1,.vp h2,.vp h3{margin:0;text-wrap:balance;font-family:Fraunces,Georgia,serif;font-weight:600}
.accent{color:var(--marigold-lt)}
.emerald-text{color:var(--emerald)}
.vp h1{font-size:clamp(2.7rem,4.7vw,4.5rem);letter-spacing:-.02em;line-height:1.04}
.vp h2{font-size:clamp(1.9rem,3vw,2.6rem);letter-spacing:-.015em;line-height:1.12;color:var(--ink)}
.vp h3{font-size:1.2rem;letter-spacing:-.01em;line-height:1.25}
.sub{font-family:Inter,system-ui,sans-serif;font-size:clamp(1.1rem,1.35vw,1.3rem);font-weight:500;letter-spacing:-.01em;line-height:1.45;color:var(--ink-2);max-width:29em}
.sub b{color:var(--ink);font-weight:600}
.lead{font-size:1.15rem;line-height:1.55;color:var(--ink-2);max-width:42em}
.deva{font-family:Mukta,sans-serif;letter-spacing:.06em}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 20px}
@container (min-width:64em){ .wrap{padding:0 32px} }
section{padding:clamp(48px,7vw,96px) 0}
.vp a:focus-visible,.vp button:focus-visible,.vp input:focus-visible{outline:3px solid var(--marigold);outline-offset:3px;border-radius:6px}
.num{color:var(--emerald);font-weight:700;font-variant-numeric:tabular-nums}

/* jaali 5%, masked, behind the fold only */
.jaali{position:absolute;inset:0;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%231F5C4F' stroke-width='1.6'%3E%3Cpath d='M36 0 C54 18 54 18 36 36 C18 18 18 18 36 0Z M36 36 C54 54 54 54 36 72 C18 54 18 54 36 36Z M0 36 C18 18 18 18 36 36 C18 54 18 54 0 36Z M36 36 C54 18 54 18 72 36 C54 54 54 54 36 36Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size:72px 72px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font:inherit;
  font-size:1rem;font-weight:700;letter-spacing:.01em;text-transform:none;line-height:1;
  height:56px;padding:0 28px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.8,.2,1),filter .22s,box-shadow .22s}
.btn-primary{background:var(--marigold-lt);color:#241B00;box-shadow:0 8px 24px rgba(224,168,0,.35)}
.btn-primary:hover{filter:brightness(1.04);transform:translateY(-2px);box-shadow:0 14px 34px rgba(224,168,0,.42)}
.btn-primary:active{transform:translateY(1px) scale(.99)}
.btn-quiet{background:rgba(42,33,28,.06);color:var(--ink);box-shadow:none}
.btn-quiet:hover{background:rgba(42,33,28,.10)}
.btn-sm{height:44px;font-size:.875rem;padding:0 20px}
a.tl{color:var(--emerald);font-weight:600;text-decoration:none;border-bottom:2px solid rgba(31,92,79,.25);padding-bottom:1px;transition:border-color .2s}
a.tl:hover{border-color:var(--emerald)}
.more{font-size:.9rem;font-weight:700;color:var(--emerald);text-decoration:none;display:inline-flex;align-items:center;gap:.4em}
.more .arrow{display:inline-block;transition:transform .22s}
.more:hover .arrow{transform:translateX(4px)}

/* inline signup */
.signup{display:flex;flex-direction:column;gap:12px;width:100%;max-width:560px}
.signup .row{display:flex;flex-direction:column;gap:10px}
.signup input{font:inherit;font-size:1.0625rem;height:56px;padding:0 22px;border-radius:999px;border:0;
  box-shadow:0 0 0 1px rgba(42,33,28,.18);background:#fff;color:var(--ink);width:100%;letter-spacing:-.005em;transition:box-shadow .2s}
.signup input::placeholder{color:var(--ink-3)}
.signup input:hover{box-shadow:0 0 0 1px rgba(42,33,28,.34)}
.signup input:focus{outline:0;box-shadow:0 0 0 2px var(--emerald)}
.signup .btn{flex-shrink:0}
.signup small{font-size:.9rem;color:var(--ink-3);line-height:1.45}
.signup small a{color:var(--ink-2)}
@container (min-width:40em){ .signup .row{flex-direction:row} .hero-copy .signup input{flex:1 1 220px;min-width:0} }
.signup.on-video input,.closing .signup input{box-shadow:0 0 0 1.5px rgba(255,255,255,.45) inset;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(6px)}
.signup.on-video input::placeholder,.closing .signup input::placeholder{color:rgba(255,255,255,.75)}
.signup.on-video small,.closing .signup small{color:rgba(255,255,255,.8)}
.signup.on-video small a,.closing .signup small a{color:#fff}

/* nav */
.navwrap{position:sticky;top:0;z-index:var(--z-nav);background:rgba(255,253,248,.92);
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hair)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;flex-shrink:0}
.mark img{height:28px;width:auto;display:block}
.mark .deva{font-size:1rem;color:var(--ink);text-align:center;padding-left:12px;border-left:1px solid var(--hair);line-height:1}
.navlinks{display:none;gap:30px;font-size:1.0625rem;font-weight:500;align-items:center}
.navlinks a{color:var(--ink-2);text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.navlinks a:hover{color:var(--emerald);border-bottom-color:var(--emerald)}
.navend{display:flex;align-items:center;gap:8px}
.navend .login{display:none}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:999px;background:rgba(42,33,28,.06);border:0;cursor:pointer;color:var(--ink)}
.burger svg{width:22px;height:22px}
.mnav{display:none;border-top:1px solid var(--hair);background:var(--surface);padding:8px 20px 20px}
.mnav a{display:block;padding:14px 0;font-size:1.125rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--hair-2)}
.mnav a:last-child{border:0}
.mnav.open{display:block}
@container (min-width:64em){ .navlinks{display:flex} .navend .login{display:inline-flex} .burger,.mnav{display:none!important} }

/* Nav variant floating transparently over a hero video, kept in sync with
   marketing.css even though none of the 17 static pages render an on-video
   hero today (only `/` does). */
.navwrap.on-video{position:absolute;top:0;left:0;right:0;z-index:3;background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none}
.navwrap.on-video .mark img{filter:brightness(0) invert(1)}
.navwrap.on-video .mark .deva{color:var(--marigold-lt);border-left-color:rgba(255,255,255,.3)}
.navwrap.on-video .navlinks a{color:rgba(255,255,255,.85)}
.navwrap.on-video .navlinks a:hover{color:#fff;border-bottom-color:var(--marigold-lt)}
.navwrap.on-video .btn-quiet{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35)}
.navwrap.on-video .burger{background:rgba(255,255,255,.16);color:#fff}
.navwrap.on-video .mnav{background:var(--emerald-dk);border-top-color:rgba(255,255,255,.15)}
.navwrap.on-video .mnav a{color:#fff;border-bottom-color:rgba(255,255,255,.10)}

/* Full-bleed hero video shell, kept in sync with marketing.css (only `/`
   renders a `.hero` with a `.hero-media` video today). */
.hero{position:relative;min-height:94vh;display:flex;flex-direction:column;overflow:hidden;background:var(--emerald-dk)}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 32%;z-index:0;filter:saturate(1.15) contrast(1.06) hue-rotate(-6deg)}
.hero-grade{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  radial-gradient(130% 100% at 10% 15%, rgba(15,46,39,.05), rgba(9,28,24,.32) 75%),
  linear-gradient(108deg, rgba(11,36,30,.72) 0%, rgba(11,36,30,.48) 26%, rgba(11,36,30,.14) 50%, rgba(11,36,30,0) 66%),
  linear-gradient(0deg, rgba(6,20,17,.35) 0%, rgba(6,20,17,0) 20%)}
.hero-inner{position:relative;z-index:2;flex:1;display:flex;align-items:center;width:100%;padding:116px 0 80px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:32px;align-items:end;width:100%}
@container (min-width:64em){ .hero-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)} }
.hero-copy{display:flex;flex-direction:column;gap:22px;align-items:flex-start;max-width:32em}
.hero-copy h1{color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.45)}
.hero-copy .sub{color:rgba(255,255,255,.88);text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero-copy .signup{max-width:500px}

/* below-fold bands: cream/warm-white ground alternation */
.band{background:var(--cream)}
.band.alt{background:var(--surface)}

/* bento: mixed widths, media edge to edge, bodies aligned */
.bento-head{display:flex;flex-direction:column;gap:16px;margin-bottom:48px;max-width:44em}
.bento{display:grid;gap:20px;grid-template-columns:1fr}
@container (min-width:64em){ .bento{grid-template-columns:repeat(12,1fr);gap:24px} .c7{grid-column:span 7} .c5{grid-column:span 5} }
.card{position:relative;display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);overflow:hidden;box-shadow:none;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift)}
.card .media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--cream);border-bottom:1px solid var(--hair)}
.card .media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.card .body{padding:24px 26px 26px;display:flex;flex-direction:column;gap:10px;flex:1}
.card .body p{font-size:1rem;color:var(--ink-2);line-height:1.5}
.card .body .more{margin-top:auto;padding-top:12px}
.card.phone .media{aspect-ratio:auto;flex:1;min-height:340px;background:linear-gradient(180deg,var(--cream),var(--surface));display:flex;justify-content:center;align-items:flex-end;border-bottom:0;padding-top:28px}
.phone-frame{width:250px;border-radius:38px;background:var(--ink);padding:10px;box-shadow:0 30px 60px rgba(42,33,28,.28);transform:translateY(38px) rotate(-3deg);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.card.phone:hover .phone-frame{transform:translateY(26px) rotate(-1.5deg)}
.phone-frame img{display:block;width:100%;height:auto;border-radius:29px;aspect-ratio:390/700;object-fit:cover;object-position:top}
.card.phone .qr-inline{display:flex;align-items:center;gap:14px;margin-top:6px}
.card.phone .qr-inline img{width:64px;height:64px;display:block}
.card.phone .qr-inline span{font-size:.9375rem;color:var(--ink-2);line-height:1.4}

/* reveal: opacity + transform only, staggered, off when reduced motion */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.2,.8,.2,1),transform .6s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} .vp *{animation:none!important;transition:none!important} }

/* questions as a plain list, founder note offset */
.two{display:grid;gap:40px;grid-template-columns:1fr}
@container (min-width:64em){ .two{grid-template-columns:7fr 5fr;gap:72px;align-items:start} .note{margin-top:64px} }
.faq h2{margin-bottom:28px}
.qa{display:grid;gap:22px 28px;grid-template-columns:1fr}
@container (min-width:40em){ .qa{grid-template-columns:1fr 1fr} }
.qa div{padding-top:18px;border-top:1px solid var(--hair)}
.qa h3{font-size:1.05rem;margin-bottom:8px}
.qa p{font-size:1rem;color:var(--ink-2);line-height:1.55}
.note{background:var(--surface);border:1px solid var(--hair);border-radius:var(--r);box-shadow:none;padding:36px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.note p{font-size:1.0625rem;color:var(--ink-2);line-height:1.5}
.note p b{color:var(--ink)}
.note .sig{margin-top:6px;font-size:.9375rem;color:var(--ink-3);line-height:1.4}
.note .sig b{display:block;color:var(--emerald);font-weight:700}
.note .sig a.tl{color:var(--emerald)}
.trust{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.trust span{font-size:.8125rem;font-weight:600;color:var(--emerald);background:var(--cream);border:1px solid var(--hair);border-radius:999px;padding:6px 14px}
.trust span a{color:inherit;border:0}

/* closing: deep emerald band */
.closing{background:var(--emerald-dk);color:#fff;text-align:center;padding:clamp(64px,8vw,96px) 0}
.closing .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;gap:18px}
.closing h2{color:#fff;font-size:clamp(2rem,3.4vw,2.8rem);max-width:22em}
.closing .signup{align-items:center;max-width:520px}

/* footer with the marigold toran hanging from the top */
.foot{position:relative;background:var(--surface);border-top:1px solid var(--hair);padding:132px 0 36px;font-size:.9375rem;overflow:hidden}
.garland{position:absolute;left:0;right:0;top:0;height:104px;background:url("/images/marketing/garland.png") center top / auto 104px repeat-x;pointer-events:none}
.fgrid{position:relative;display:grid;gap:24px 24px;grid-template-columns:repeat(2,1fr)}
@container (min-width:40em){ .fgrid{grid-template-columns:repeat(3,1fr)} }
@container (min-width:64em){ .fgrid{grid-template-columns:2fr repeat(5,1fr);gap:24px} }
.fbrand{grid-column:1/-1;display:flex;flex-direction:column;gap:12px}
@container (min-width:64em){ .fbrand{grid-column:auto} }
.fbrand p{color:var(--ink-2);max-width:22em;line-height:1.45}
.fcol h4{margin:0 0 12px;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3)}
.fcol a{display:block;color:var(--ink-2);text-decoration:none;padding:3px 0;line-height:1.35;transition:color .2s}
.fcol a:hover{color:var(--emerald)}
.fcol a.soon::after{content:"soon";margin-left:8px;font-size:.6875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);vertical-align:1px}
.legal{margin-top:28px;padding-top:16px;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;color:var(--ink-3);font-size:.875rem}
.legal nav{display:flex;flex-wrap:wrap;gap:20px}
.legal a{color:var(--ink-3);text-decoration:none}
.legal a:hover{color:var(--emerald)}

/* floating QR, desktop only, arch-framed */
.qr{position:fixed;right:24px;bottom:24px;z-index:var(--z-qr);display:none;align-items:center;gap:14px;padding:12px 16px 12px 12px;background:var(--surface);border-radius:var(--r);box-shadow:var(--shadow-lift);max-width:320px}
@container (min-width:64em){ .qr{display:flex} }
.qr.hide{display:none!important}
.qr .frame{position:relative;width:84px;height:98px;flex-shrink:0}
.qr .frame svg.arch{position:absolute;inset:0;width:100%;height:100%}
.qr .frame img{position:absolute;left:12px;top:23px;width:60px;height:60px;display:block}
.qr .txt{display:flex;flex-direction:column;gap:2px}
.qr .txt b{font-size:.9375rem;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.qr .txt span{font-size:.8125rem;color:var(--ink-2);line-height:1.35}
.qr .x{position:absolute;top:-10px;right:-10px;width:28px;height:28px;border-radius:50%;border:0;background:var(--surface);box-shadow:var(--shadow);cursor:pointer;color:var(--ink-2);font-size:14px;line-height:1;display:grid;place-items:center}
.qr .x:hover{color:var(--emerald)}

/* ===== PAGES (product and utility pages; shell above is verbatim from the front page) ===== */
.ph{position:relative;padding:48px 0 0;overflow:hidden;background:radial-gradient(90% 70% at 50% 0%, var(--cream), transparent 72%)}
@container (min-width:64em){ .ph{padding-top:64px} }
.ph .wrap{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.ph h1{max-width:16em;color:var(--ink)}
.ph-sub{font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:500;letter-spacing:-.018em;line-height:1.35;color:var(--ink-2);max-width:30em}
.ph-shot{width:100%;max-width:1136px;margin-top:20px;display:flex;justify-content:center}
.ph-shot:empty{display:none;margin:0}
.ph-shot .cap{width:100%;max-height:520px}
.ph-shot .cap.tight{width:auto}
.cta-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px}

.cap{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);max-height:420px;width:100%}
.cap img,.cap video{display:block;width:100%;height:auto}
.cap.clip::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(180deg,rgba(255,253,248,0),var(--surface));pointer-events:none;opacity:.9}
.cap.tight{display:inline-block;width:auto;max-width:100%;max-height:none}
.cap.tight img{max-width:100%;height:auto}
.cap.tall{max-height:520px;width:min(100%,520px);margin:0 auto}
.cap.vid{max-height:none}

.sec{padding:56px 0 0}
.sec-grid{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
@container (min-width:64em){ .sec{padding-top:64px} .sec-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px}
  .sec.flip .sec-grid{grid-template-columns:minmax(0,8fr) minmax(0,4fr)} .sec.flip .sec-text{order:2} .sec.flip .sec-media{order:1} }
.sec-text{display:flex;flex-direction:column;gap:12px}
.sec-text h2{font-size:clamp(1.55rem,2.1vw,2rem);letter-spacing:-.025em;line-height:1.12}
.sec-text p{font-size:1.0625rem;color:var(--ink-2);line-height:1.5;max-width:34em}
.sec-text .more{margin-top:4px}
.sec-text.wide{max-width:44em;margin-bottom:24px}
.sec-media{min-width:0;display:flex;justify-content:center}
.sec-media .cap.tight{max-width:100%}
.xlinks{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:1rem}

.phones{display:flex;gap:20px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.pf{width:240px;max-width:100%;height:420px;overflow:hidden;border-radius:36px;background:var(--ink);padding:9px;box-shadow:0 24px 48px rgba(42,33,28,.22);position:relative}
.pf img{display:block;width:100%;height:auto;border-radius:28px}
.pf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:90px;background:linear-gradient(180deg,rgba(255,253,248,0),var(--surface));pointer-events:none}
.ph-shot .phones{gap:28px}

.faq-sec{padding:56px 0 0}
@container (min-width:64em){ .faq-sec{padding-top:64px} }
.faq-sec h2{margin-bottom:24px}
.faq-sec .qa{grid-template-columns:1fr}
@container (min-width:64em){ .faq-sec .qa{grid-template-columns:repeat(3,1fr)} }

.closing{padding-top:56px}
@container (min-width:64em){ .closing{padding-top:72px} }

.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}
.tile{margin:0;display:flex;flex-direction:column;gap:6px}
.tile .art{position:relative;aspect-ratio:5/7;border-radius:8px;overflow:hidden;background:var(--cream);box-shadow:0 0 0 1px var(--hair)}
.tile .art img{display:block;width:100%;height:100%;object-fit:cover}
.tile .prem{position:absolute;top:6px;left:6px;font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;background:var(--marigold);color:#241B00;padding:3px 6px;border-radius:999px}
.tile figcaption{display:flex;flex-direction:column;font-size:.8125rem;line-height:1.3}
.tile figcaption b{font-weight:600;color:var(--ink)}
.tile figcaption span{color:var(--ink-3);font-size:.75rem}

.qrbig{position:relative;width:260px;height:300px;display:flex;align-items:center;justify-content:center}
.qrbig svg{position:absolute;inset:0;width:100%;height:100%}
.qrbig img{position:relative;width:180px;height:180px;margin-top:40px}

.note.founder{max-width:44em;margin:0 auto}

.prose-sec{padding:32px 0 0}
.prose{max-width:42em;margin:0 auto;font-size:1.0625rem;color:var(--ink-2);line-height:1.6}
.prose h2{font-size:1.375rem;margin:28px 0 8px;color:var(--ink)}
.prose p{margin:0 0 12px}
.prose p b{color:var(--ink)}
.prose .meta{font-size:.9375rem;color:var(--ink-3)}
.prose h3{font-size:1.125rem;margin:20px 0 6px;color:var(--ink)}
.prose ul,.prose ol{margin:0 0 12px;padding-left:1.25em}
.prose li{margin:0 0 6px}
.prose h2[id],.prose h3[id]{scroll-margin-top:88px}
.prose .toc{padding:16px 20px;border:1px solid rgba(31,92,79,.25);border-radius:12px;margin:0 0 28px}
.prose .toc p{margin:0 0 8px;font-size:.9375rem;font-weight:700;color:var(--ink)}
.prose .toc ol{margin:0;padding-left:1.5em;font-size:.9375rem}
.prose .toc li{margin:0 0 4px;break-inside:avoid}
.prose .toc ol ol{margin:4px 0 0;padding-left:1.25em}
@media (min-width:640px){.prose .toc>ol{columns:2;column-gap:24px}}