/* ---------------------------------------------------------------------------
   Memora site styles — every public page except the homepage.

   The homepage carries its own inline stylesheet and must not be touched. The
   tokens, header geometry, button shapes, and footer treatment below are copied
   from it so the two read as one site; nothing here is loaded by the homepage,
   so editing this file cannot regress it.

   Structure: tokens, header, mobile sheet, hero, sections, CTA band, footer,
   reduced motion.
--------------------------------------------------------------------------- */

:root{
  --bg:#08090b;
  --fg:#f7f8fa;
  --fg2:#9ca3aa;
  --line:rgba(255,255,255,.14);
  --edge:rgb(115,181,215);
  --mid:rgb(198,227,241);
  --hi:rgb(252,253,255);
  --paper:#f2f0ea;
  --ink:#14151a;
  --ink2:#575450;
  --ink3:#7d786f;
  --paper-line:rgba(0,0,0,.1);
  --ease:cubic-bezier(.22,.61,.36,1);
  --nav-h:64px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
[id]{scroll-margin-top:calc(var(--nav-h) + 14px);}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  background:var(--paper);color:var(--ink);
  font-family:Onest,ui-sans-serif,system-ui,sans-serif;
  font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;}
img{max-width:100%;height:auto;}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}

/* Focus is never removed, only replaced. Every interactive element on the site
   has to be reachable and visible by keyboard alone. */
:focus-visible{outline:2px solid var(--edge);outline-offset:3px;border-radius:4px;}

.skip{position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--hi);color:#0b0c0f;padding:.7rem 1.1rem;border-radius:0 0 10px 0;
  font-size:.9rem;}
.skip:focus{left:0;}

/* ---------- header ------------------------------------------------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--nav-h);
  background:transparent;border-bottom:1px solid transparent;
  transition:background .35s var(--ease),border-color .35s var(--ease);}
.nav-in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.nav .wrap{max-width:1324px;}
.logo{display:flex;align-items:center;gap:.55rem;font-size:1.02rem;font-weight:500;
  letter-spacing:-.01em;color:var(--fg);}
.mk{flex:0 0 auto;display:grid;place-items:center;
  background:rgb(138,195,222);color:#fff;border-radius:5px;
  font-weight:700;line-height:1;letter-spacing:-.02em;
  width:24px;height:24px;font-size:15px;}

/* Dark by default: the header floats over a dark hero, exactly as on the
   homepage. On a paper hero it is inverted from the first paint instead of on
   scroll, because dark-on-dark text over warm paper is unreadable. */
.nav.solid{background:rgba(10,11,14,.82);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom-color:rgba(255,255,255,.07);}
body.paper-top .nav{background:rgba(242,240,234,.9);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom-color:var(--paper-line);}
body.paper-top .logo{color:var(--ink);}
body.paper-top .nav-top{color:#5f5b56;}
body.paper-top .nav-top:hover,body.paper-top .nav-top[aria-expanded="true"]{color:var(--ink);}
body.paper-top .try{background:var(--ink);color:var(--paper);}
body.paper-top .menu-btn{border-color:rgba(0,0,0,.2);background:rgba(0,0,0,.04);}
body.paper-top .menu-btn span,
body.paper-top .menu-btn span::before,
body.paper-top .menu-btn span::after{background:var(--ink);}

.nav-mid{display:flex;}
/* Menu styles live in static/nav.css, shared with the homepage. */

.try{background:var(--hi);color:#0b0c0f;border-radius:999px;padding:.5rem 1.05rem;
  font-size:.86rem;font-weight:500;white-space:nowrap;
  transition:transform .22s var(--ease),opacity .22s var(--ease);}
.try:hover{transform:translateY(-1px);opacity:.92;}

/* The question carried over from the homepage's ask bar, shown above the
   waitlist form so being asked for an email reads as a queue rather than a
   dodge. Quiet: it is context, not a headline. */
.asked-note{color:var(--ink2);font-size:.95rem;line-height:1.5;
  border-left:2px solid var(--edge);padding-left:.9rem;margin-bottom:1.1rem;}


/* ---------- mobile sheet -------------------------------------------------- */
.menu-btn{display:none;width:40px;height:40px;border-radius:999px;
  border:1px solid rgba(255,255,255,.22);align-items:center;justify-content:center;
  background:rgba(255,255,255,.06);}
.menu-btn span{display:block;width:15px;height:1.5px;background:var(--fg);
  position:relative;transition:background .2s var(--ease);}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0;
  width:15px;height:1.5px;background:var(--fg);transition:transform .28s var(--ease);}
.menu-btn span::before{top:-5px;} .menu-btn span::after{top:5px;}
.nav.open .menu-btn span{background:transparent;}
.nav.open .menu-btn span::before{transform:translateY(5px) rotate(45deg);}
.nav.open .menu-btn span::after{transform:translateY(-5px) rotate(-45deg);}

.sheet{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:59;
  background:rgba(10,11,14,.97);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  display:none;overflow-y:auto;overscroll-behavior:contain;}
.sheet.on{display:block;}
.sheet-in{padding:8px 0 40px;}
.acc{border-bottom:1px solid rgba(255,255,255,.07);}
.acc-btn{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;font-size:1.02rem;color:var(--fg);text-align:left;}
.acc-btn .chev{width:13px;height:13px;color:#8b9199;transition:transform .25s var(--ease);}
.acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg);}
.acc-panel{padding:0 28px 14px;}
.acc-panel[hidden]{display:none;}
.acc-panel a{display:block;padding:10px 0;font-size:.96rem;color:#aeb5bd;}
.acc-panel a[aria-current="page"]{color:var(--mid);}
.sheet-try{display:inline-block;margin:22px 28px 0;background:var(--hi);color:#0b0c0f;}
body.nav-open{overflow:hidden;}

@media(max-width:1000px){
  .nav-mid{display:none;}
  .nav>.wrap>.try{display:none;}
  .menu-btn{display:flex;}
  .nav{background:rgba(10,11,14,.86);
    backdrop-filter:saturate(150%) blur(14px);
    -webkit-backdrop-filter:saturate(150%) blur(14px);
    border-bottom-color:rgba(255,255,255,.07);}
  body.paper-top .nav{background:rgba(242,240,234,.94);
    border-bottom-color:var(--paper-line);}
}
@media(min-width:1001px){.sheet{display:none!important;}}

/* ---------- breadcrumbs --------------------------------------------------- */
.crumbs{padding-top:calc(var(--nav-h) + 22px);font-size:.82rem;}
.crumbs.on-dark{background:var(--bg);color:#7e858d;}
.crumbs.on-paper{background:var(--paper);color:var(--ink3);}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;}
.crumbs li+li::before{content:"/";margin-right:.4rem;opacity:.5;}
.crumbs a:hover{text-decoration:underline;}

/* ---------- hero ---------------------------------------------------------- */
.hero{position:relative;isolation:isolate;}
.hero .wrap{position:relative;z-index:2;}
.hero-dark{background:var(--bg);color:var(--fg);
  padding:calc(var(--nav-h) + 96px) 0 108px;}
body.has-crumbs .hero-dark,body.has-crumbs .hero-paper{padding-top:56px;}
/* A quiet scene rather than a photograph: two soft pools of light and the same
   grain the homepage uses, so the page has depth without a second hero image
   that would need to be shot. */
.hero-dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(64% 78% at 78% 6%,rgba(115,181,215,.13),transparent 62%),
    radial-gradient(48% 62% at 12% 96%,rgba(198,227,241,.07),transparent 66%);}
.hero-dark::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.14;mix-blend-mode:soft-light;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23g)' opacity='.45'/></svg>");}
.hero-paper{background:var(--paper);color:var(--ink);
  padding:calc(var(--nav-h) + 78px) 0 62px;
  border-bottom:1px solid var(--paper-line);}

.eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;
  color:#8fa3b2;margin-bottom:18px;}
.hero-paper .eyebrow{color:var(--ink3);}
.hero h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1.03;letter-spacing:-.01em;
  max-width:19ch;text-wrap:balance;}
.hero-lede{margin-top:22px;max-width:56ch;font-size:1.06rem;color:var(--fg2);}
.hero-paper .hero-lede{color:var(--ink2);}
.hero-meta{margin-top:16px;font-size:.85rem;color:var(--ink3);}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;}

.btn{display:inline-block;border-radius:999px;padding:.68rem 1.25rem;
  font-size:.9rem;font-weight:500;background:var(--hi);color:#0b0c0f;
  transition:transform .2s var(--ease),opacity .2s var(--ease);}
.btn:hover{transform:translateY(-1px);opacity:.93;}
.btn.dark{background:var(--ink);color:var(--paper);}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid rgba(255,255,255,.26);}
.btn.ghost:hover{border-color:rgba(255,255,255,.5);}
.hero-paper .btn.ghost{color:var(--ink);border-color:rgba(0,0,0,.22);}
.hero-paper .btn:not(.ghost){background:var(--ink);color:var(--paper);}

/* ---------- body sections ------------------------------------------------- */
/* Content lives on paper: it is the editorial half of the brand, and long copy
   is simply easier to read there. */
.body{background:var(--paper);color:var(--ink);}
.sec{padding:64px 0;border-top:1px solid var(--paper-line);}
.sec:first-child{border-top:none;padding-top:76px;}
.sec h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.12;letter-spacing:-.01em;
  color:var(--ink);max-width:22ch;text-wrap:balance;}
.sec h3{font-size:1.02rem;font-weight:500;color:var(--ink);}
.sec>.wrap>p,.prose p{max-width:62ch;color:var(--ink2);margin-top:16px;font-size:1rem;}
.sec-link{display:inline-block;margin-top:22px;font-size:.92rem;color:var(--ink);
  border-bottom:1px solid rgba(0,0,0,.28);padding-bottom:2px;}
.sec-link:hover{border-bottom-color:var(--ink);}
.sec-intro{margin-top:16px;max-width:62ch;color:var(--ink2);}

.grid{display:grid;gap:16px;margin-top:34px;}
.grid.c2{grid-template-columns:repeat(2,1fr);}
.grid.c3{grid-template-columns:repeat(3,1fr);}
.cell{background:rgba(255,255,255,.55);border:1px solid var(--paper-line);
  border-radius:16px;padding:22px 22px 24px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),
             box-shadow .25s var(--ease);}
a.cell:hover{transform:translateY(-2px);border-color:rgba(0,0,0,.2);
  box-shadow:0 18px 40px -28px rgba(0,0,0,.5);}
.cell h3{margin-bottom:8px;}
.cell p{color:var(--ink2);font-size:.95rem;}
.cell .go{display:inline-block;margin-top:14px;font-size:.85rem;color:#4a4744;}
a.cell:hover .go{color:var(--ink);}

/* Catalog cells are not links, so they must not offer a link's affordances. */
.cell-static{cursor:default;}
.cell-static p{margin-top:8px;font-size:.9rem;line-height:1.55;}
.cell-static strong{color:var(--ink);font-weight:500;}
/* The distinction the component exists to make: what you can connect today
   reads at full strength, what is planned is visibly quieter. */
.cat-live{color:var(--ink2);}
.cat-soon{color:#8b857c;}
.body-dark .cat-soon{color:rgba(255,255,255,.5);}
.sec-lead{max-width:62ch;margin:10px 0 26px;color:var(--ink2);line-height:1.65;}

.steps{list-style:none;counter-reset:s;margin-top:32px;display:grid;gap:2px;}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;
  gap:16px;padding:18px 0;border-top:1px solid var(--paper-line);}
.steps li::before{content:counter(s);font-family:'Instrument Serif',Georgia,serif;
  font-size:1.5rem;color:#a8a29a;line-height:1.1;}
.steps p{color:var(--ink2);font-size:.95rem;margin-top:4px;max-width:60ch;}

.qlist{list-style:none;margin-top:30px;display:grid;gap:10px;}
.qlist li{font-family:'Instrument Serif',Georgia,serif;font-size:1.2rem;
  color:#2f2c28;background:rgba(0,0,0,.035);border-radius:12px;
  padding:14px 20px;border-left:2px solid rgba(115,181,215,.7);}

.flow{list-style:none;margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;
  gap:10px 12px;}
.flow li{background:rgba(0,0,0,.04);border:1px solid var(--paper-line);
  border-radius:999px;padding:.5rem 1rem;font-size:.9rem;color:#3b3833;}
.flow li:not(:last-child)::after{content:"→";margin-left:.75rem;color:#a8a29a;}

.callout{margin-top:30px;padding:22px 26px;border-left:2px solid #c08a42;
  background:rgba(0,0,0,.035);border-radius:0 12px 12px 0;max-width:62ch;}
.callout .kicker{font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;
  color:var(--ink3);margin-bottom:10px;}
.callout p{font-family:'Instrument Serif',Georgia,serif;font-size:1.16rem;
  line-height:1.42;color:#2f2c28;}

.faq{margin-top:28px;max-width:74ch;}
.faq-item{border-top:1px solid var(--paper-line);}
.faq-item:last-child{border-bottom:1px solid var(--paper-line);}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:18px 0;text-align:left;font-size:1rem;color:var(--ink);}
.faq-q .plus{flex:0 0 auto;width:14px;height:14px;position:relative;}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:#6b6762;
  transition:transform .25s var(--ease);}
.faq-q .plus::before{left:0;right:0;top:6px;height:1.5px;}
.faq-q .plus::after{top:0;bottom:0;left:6px;width:1.5px;}
.faq-q[aria-expanded="true"] .plus::after{transform:scaleY(0);}
.faq-a{padding:0 0 20px;color:var(--ink2);font-size:.96rem;max-width:62ch;}
.faq-a[hidden]{display:none;}

.deflist{margin-top:26px;display:grid;gap:22px;}
.deflist h3{margin-bottom:8px;}
.deflist ul{list-style:none;display:grid;gap:8px;}
.deflist li{position:relative;padding-left:18px;color:var(--ink2);font-size:.95rem;
  max-width:62ch;}
.deflist li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:rgba(115,181,215,.85);}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
.tag{font-size:.8rem;color:#4a4744;background:rgba(0,0,0,.045);
  border:1px solid var(--paper-line);border-radius:999px;padding:.3rem .8rem;}
.tag.blue{border-color:rgba(115,181,215,.4);background:rgba(115,181,215,.1);}

/* A CONFIRM marker must be visible, not silently shipped as prose. */
.confirm{display:inline-block;font-size:.72rem;letter-spacing:.08em;
  text-transform:uppercase;color:#8a5a1a;background:rgba(192,138,66,.14);
  border:1px solid rgba(192,138,66,.4);border-radius:5px;
  padding:.1rem .4rem;margin-right:.45rem;vertical-align:1px;}

.empty{margin-top:28px;padding:34px;border:1px dashed rgba(0,0,0,.18);
  border-radius:16px;text-align:center;color:var(--ink2);max-width:62ch;}
.empty strong{display:block;color:var(--ink);font-weight:500;margin-bottom:6px;}

.statusbox{margin-top:26px;display:flex;align-items:center;gap:14px;
  border:1px solid var(--paper-line);background:rgba(255,255,255,.6);
  border-radius:16px;padding:22px 24px;max-width:62ch;}
.dot{width:10px;height:10px;border-radius:50%;background:#a8a29a;flex:0 0 auto;}
.statusbox strong{font-weight:500;}
.statusbox p{margin-top:4px;color:var(--ink2);font-size:.92rem;}

/* waitlist form, reusing the homepage's shapes and endpoint */
.wl{margin-top:26px;max-width:460px;}
.wl-row{display:flex;gap:8px;}
.wl label{display:block;font-size:.85rem;color:var(--ink2);margin-bottom:8px;}
.wl input{flex:1;min-width:0;border:1px solid rgba(0,0,0,.2);background:#fff;
  border-radius:999px;padding:.82rem 1.15rem;font-size:.96rem;outline:none;
  font-family:inherit;color:var(--ink);transition:border-color .2s var(--ease);}
.wl input:focus{border-color:var(--ink);}
.wl button{background:var(--ink);color:var(--paper);border-radius:999px;
  padding:.82rem 1.45rem;font-weight:500;font-family:inherit;white-space:nowrap;}
.wl button[disabled]{opacity:.6;cursor:default;}
.wl .fine{margin-top:12px;font-size:.85rem;color:#6b6762;min-height:1.2em;}
@media(max-width:480px){.wl-row{flex-direction:column;}}

/* ---------- CTA band ------------------------------------------------------ */
.cta-band{background:var(--paper);border-top:1px solid var(--paper-line);
  padding:84px 0 92px;text-align:center;}
.cta-band h2{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(1.9rem,4vw,3rem);line-height:1.1;color:var(--ink);
  max-width:20ch;margin:0 auto;text-wrap:balance;}
.cta-band p{margin:16px auto 0;max-width:52ch;color:var(--ink2);}
.cta-band .btn{margin-top:26px;}

/* ---------- footer -------------------------------------------------------- */
.foot{background:var(--paper);color:var(--ink);border-top:1px solid rgba(0,0,0,.08);}
.foot .wrap{padding-top:54px;padding-bottom:46px;}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:30px;}
.fcol h2{font-size:.8rem;font-weight:500;margin-bottom:14px;color:var(--ink);
  font-family:Onest,ui-sans-serif,system-ui,sans-serif;}
.fcol a{display:block;font-size:.87rem;color:#5f5b56;margin-bottom:9px;
  transition:color .2s var(--ease);}
.fcol a:hover{color:var(--ink);}
.fmark{display:flex;flex-direction:column;gap:16px;}
.fmark .mk{width:40px;height:40px;font-size:25px;border-radius:8px;}
.fnote{font-size:.82rem;color:#6b6762;max-width:22ch;}
.fbase{margin-top:40px;padding-top:20px;border-top:1px solid rgba(0,0,0,.08);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:.83rem;color:#5f5b56;}

/* ---------- 404 ----------------------------------------------------------- */
.nf{min-height:76vh;display:flex;align-items:center;background:var(--bg);
  color:var(--fg);padding:calc(var(--nav-h) + 60px) 0 80px;}
.nf h1{font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:clamp(2.4rem,6vw,4.2rem);line-height:1.04;}
.nf p{margin-top:20px;max-width:52ch;color:var(--fg2);}
.nf .links{margin-top:34px;display:flex;flex-wrap:wrap;gap:10px;}
.nf .links a{font-size:.88rem;color:#c3cad3;border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:.45rem 1rem;}
.nf .links a:hover{border-color:rgba(255,255,255,.4);color:#fff;}

/* ---------- responsive ---------------------------------------------------- */
@media(max-width:1000px){
  .fgrid{grid-template-columns:1fr 1fr 1fr;}
}
@media(max-width:820px){
  .grid.c3{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:680px){
  .wrap{padding:0 20px;}
  .grid.c2,.grid.c3{grid-template-columns:1fr;}
  .fgrid{grid-template-columns:1fr 1fr;}
  .hero-dark{padding:calc(var(--nav-h) + 64px) 0 76px;}
  .hero-paper{padding:calc(var(--nav-h) + 54px) 0 48px;}
  .sec{padding:52px 0;}
  .flow{display:grid;justify-items:start;}
  .flow li:not(:last-child)::after{content:"↓";display:block;margin:6px 0 0 .2rem;}
}
@media(max-width:420px){
  .fgrid{grid-template-columns:1fr;}
}

/* ---------- reduced motion ------------------------------------------------ */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important;}
  a.cell:hover,.btn:hover,.try:hover{transform:none;}
}


/* ─── dark body surface ──────────────────────────────────────────────────────
   Opt-in per page via `dark_body` in site_content.py. Used by /pricing, where
   the plan cards read better as lit panels on the brand's dark surface than as
   paper cards. Everything here is an override of the paper defaults above, so
   a page that does not set the flag is untouched. */
.body-dark{background:var(--bg);color:var(--fg);}
.body-dark .sec{border-top-color:rgba(255,255,255,.08);}
.body-dark .sec h2{color:var(--fg);}
.body-dark .sec h3{color:var(--fg);}
.body-dark .sec-intro,
.body-dark .prose p{color:var(--fg2);}
.body-dark .cell{background:rgba(255,255,255,.045);border-color:var(--line);}
.body-dark .cell p{color:var(--fg2);}
.body-dark .callout{background:rgba(255,255,255,.035);color:var(--fg2);}
.body-dark .callout .kicker{color:var(--fg);}
.body-dark .faq-item{border-color:rgba(255,255,255,.1);}
.body-dark .faq-item h3,
.body-dark .faq-q{color:var(--fg);}
.body-dark .faq-a,
.body-dark .faq-a p{color:var(--fg2);}
.body-dark .btn{background:var(--hi);color:#101114;border-color:transparent;}
.body-dark .btn.ghost{background:transparent;color:var(--fg);
  border:1px solid rgba(255,255,255,.28);}
.body-dark .btn.ghost:hover{border-color:rgba(255,255,255,.5);}

/* plan cards on the dark surface */

/* FAQ rows at the reference's scale: full measure rather than 74ch, larger
   question, more air. The collapse-on-load behavior is already in site.js,
   with the expanded markup as the no-JS fallback. */
.faq{max-width:none;}
.faq-q{padding:22px 0;font-size:1.08rem;}
.faq-a{font-size:1rem;max-width:74ch;padding-bottom:24px;}
@media(max-width:640px){.faq-q{font-size:1rem;padding:18px 0;}}

/* ─── pricing plans ──────────────────────────────────────────────────────────
   Card anatomy follows the reference exactly: glyph, serif plan name, one-line
   tagline, the amount, the billing small print, a full-width outlined button,
   then a ruled list under an "Everything in X, plus:" lead. Emphasis on the
   paid card is a lit border, not a badge. Built for the dark surface, which is
   what /pricing now uses. */
.seg{display:inline-flex;gap:2px;padding:3px;margin:0 auto 30px;
  border-radius:999px;background:rgba(255,255,255,.07);}
.seg-opt{border:0;cursor:pointer;font:inherit;font-size:.85rem;
  color:var(--fg2);background:transparent;padding:.42rem 1.05rem;
  border-radius:999px;transition:background .18s ease,color .18s ease;}
.seg-opt:hover{color:var(--fg);}
.seg-opt.is-on{background:rgba(255,255,255,.14);color:var(--fg);}
.seg-opt:focus-visible{outline:2px solid var(--hi);outline-offset:2px;}
.sec:has(.seg){text-align:center;}
.sec:has(.seg) .plans{text-align:left;}

.plans{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;max-width:1120px;margin:0 auto;}
.plan{border:1px solid rgba(255,255,255,.11);border-radius:16px;
  padding:26px 24px 28px;background:rgba(255,255,255,.035);
  display:flex;flex-direction:column;height:100%;}
.plan-featured{border-color:rgba(140,190,220,.55);
  background:rgba(255,255,255,.055);}
.plan-name{margin-top:0;font-family:'Instrument Serif',Georgia,serif;font-weight:400;
  font-size:1.62rem;line-height:1;color:var(--fg);margin:0 0 5px;}
.plan-tagline{margin:0 0 22px;font-size:.9rem;color:var(--fg2);}
/* The amount is the thing being compared, so it carries the weight; the unit
   sits beside it at body size rather than under it, which keeps the three
   cards aligned on one line regardless of how long the price is. */
.plan-price{margin:0 0 4px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.plan-amount{font-size:2.3rem;font-weight:600;color:var(--fg);letter-spacing:-.02em;line-height:1.05;}
.plan-unit{font-size:.82rem;color:var(--fg2);line-height:1.35;}
.plan-fine{margin:0;font-size:.8rem;line-height:1.5;color:var(--fg2);min-height:2.4em;}
.plan-cta{display:block;width:100%;text-align:center;margin:22px 0 0;}
.plan-list{margin-top:24px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);}
.plan-lead{margin:0 0 13px;font-size:.9rem;font-weight:500;color:var(--fg);}
.plan-features{list-style:none;margin:0;padding:0;display:grid;gap:10px;}
.plan-features li{display:flex;gap:9px;align-items:flex-start;
  font-size:.89rem;line-height:1.5;color:var(--fg2);}
.pf-check{width:14px;height:14px;flex:0 0 auto;margin-top:3px;color:rgb(150,200,225);}
.plans-foot{max-width:1120px;margin:26px auto 0;text-align:center;
  font-size:.78rem;line-height:1.6;color:var(--fg2);opacity:.75;}

.plan-note{margin:18px 0 0;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem;line-height:1.5;color:var(--fg2);}

@media(max-width:1000px){
  .plans{grid-template-columns:1fr;max-width:430px;}
  .plan-fine{min-height:0;}
}

/* The mobile sheet must not live inside .nav: once the header gains .solid it
   applies a backdrop-filter, which makes it the containing block for fixed
   descendants and clips the sheet to the 64px header. It is now a sibling of
   the header in both templates; this guards the stacking order. */
.sheet{z-index:59;}
body.nav-open .nav{background:rgba(10,11,14,.97);backdrop-filter:none;-webkit-backdrop-filter:none;}

/* Footer columns hold stacked groups, so related sets sit under one another
   rather than forcing another column. */
.fgroup + .fgroup{margin-top:26px;}
.fcol h2{font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:#8b8781;font-weight:500;margin-bottom:12px;}
.fcol a{margin-bottom:8px;}

/* Sheet entries that are a plain link rather than an accordion. */
.acc-link{display:block;padding:15px 28px;font-size:1.02rem;color:var(--fg);
  border-bottom:1px solid rgba(255,255,255,.07);}
.acc-link:hover{color:#fff;}

@media(max-width:900px){
  .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
}
@media(max-width:520px){
  .fgrid{grid-template-columns:1fr;}
}