/* ============================================================================
   MARLUNE — the shared shell.

   ONE SOURCE OF TRUTH for the chrome and the component language: tokens, the
   floating nav, the aurora, the reveal system, buttons, cards, the FAQ
   accordion, the footer, and the section typography. Every page loads this, so
   changing the brand here changes it everywhere rather than in seven places.

   It is loaded AFTER assets/site.css on the older pages, deliberately, so its
   tokens and chrome win. site.css still supplies those pages' interior layout
   utilities, which this file does not attempt to replace.

   Page specific layout (the landing hero, its scatter figure, the sticky
   showcase) stays inline in the page that owns it. Nothing here should be
   about one page.

   TWO TYPEFACES, TWO JOBS. Fraunces is the editorial serif the APP uses for
   every heading, so the site reads as the same object as the product. Plus
   Jakarta Sans carries anything you have to actually read.
   ========================================================================= */



:root{
  /* Lifted directly from src/theme/tokens.ts. The site and the app are one
     brand, so these are the same numbers rather than an approximation. */
  --canvas:#FBF6EF; --surface:#FFFFFF; --surface-2:#F5ECE2;
  --ink:#2C2320; --muted:#6E625A; --faint:#8A7D74; --line:#EAE0D5;

  --ember:#D9722E; --ember-deep:#9E4C14; --ember-soft:#F7E6D6;
  --plum:#6E3F5F; --plum-soft:#F1E4EE;
  --sage:#5C8A6A; --sage-deep:#3F6B4E; --sage-soft:#E1EDE3;
  --water-soft:#E3EDF2; --water-deep:#3F6273;

  --cta:#2C2320; --cta-ink:#F7EFE7;

  --shadow:0 1px 2px rgba(44,35,32,.04), 0 10px 34px rgba(44,35,32,.06);
  --shadow-lg:0 24px 70px rgba(44,35,32,.12);
  --shadow-phone:0 40px 90px rgba(44,35,32,.20);
  --glass:rgba(255,255,255,.72);
  --bezel:#2C2320;

  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
a{color:var(--ember-deep);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
h1,h2,h3{font-family:"Fraunces",Georgia,"Times New Roman",serif;font-weight:700;text-wrap:balance}
:focus-visible{outline:2px solid var(--ember-deep);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:-9999px;top:0;background:var(--surface);padding:12px 18px;
  border-radius:0 0 12px 0;z-index:100;font-weight:700}
.skip:focus{left:0}

/* ---------- aurora ---------------------------------------------------------
   Three blurred blobs on a fixed layer, drifting slower than the page. Ember,
   plum and sage, which are the app's own three accents rather than a generic
   gradient mesh.                                                            */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(74px);will-change:transform}
.b1{width:62vw;height:62vw;max-width:840px;max-height:840px;left:-16vw;top:-20vw;
    background:radial-gradient(circle,var(--ember),transparent 66%);opacity:.32}
.b2{width:54vw;height:54vw;max-width:720px;max-height:720px;right:-14vw;top:-8vw;
    background:radial-gradient(circle,var(--plum),transparent 66%);opacity:.20}
.b3{width:58vw;height:58vw;max-width:780px;max-height:780px;left:26vw;top:28vw;
    background:radial-gradient(circle,var(--sage),transparent 68%);opacity:.18}
.aurora .fade{position:absolute;inset:auto 0 0;height:54vh;
    background:linear-gradient(to bottom,transparent,var(--canvas) 82%)}

/* ---------- reveal ---------------------------------------------------------
   Gated behind .js so that with JavaScript off every word is simply present.
   A landing page that needs a script to show its own text is a broken page. */
.rv{transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.js .rv{opacity:0;transform:translateY(20px)}
.js .rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none}
  html{scroll-behavior:auto}
  .blob{transform:none!important}
  .store-pill .dot{animation:none}
}

/* ---------- nav ---------- */
header{position:fixed;top:14px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 16px}
.navbar{display:flex;align-items:center;gap:18px;width:100%;max-width:880px;background:var(--glass);
  backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);
  border:1px solid var(--line);border-radius:999px;padding:9px 9px 9px 20px;
  box-shadow:var(--shadow);transition:box-shadow .3s}
header.scrolled .navbar{box-shadow:var(--shadow-lg)}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto;color:var(--ink);
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:700;font-size:19px;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand .mark{width:26px;height:26px;flex:none}
.navlinks{display:flex;gap:2px}
.navlinks a{color:var(--muted);font-weight:600;font-size:14px;padding:8px 13px;border-radius:999px;
  transition:color .2s,background .2s}
.navlinks a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
@media (max-width:820px){.navlinks{display:none}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:700;font-size:15px;
  border-radius:999px;padding:13px 24px;cursor:pointer;border:1px solid transparent;
  transition:transform .18s var(--ease),box-shadow .18s,background .2s}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--cta);color:var(--cta-ink);box-shadow:var(--shadow)}
.btn-primary:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-sm{padding:9px 17px;font-size:13.5px}

/* Launch status pill above the home hero. Marlune has been on the App Store
   since 8 October 2026; the download itself is the primary button below. */
.store-pill{display:inline-flex;align-items:center;gap:9px;background:var(--ember-soft);color:var(--ember-deep);
  border:1px solid #EDD3BC;border-radius:999px;padding:11px 20px;font-weight:700;font-size:14.5px}
.store-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--ember);flex:none;
  animation:pulse 2.8s var(--ease) infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(217,114,46,.5)}
  70%{box-shadow:0 0 0 9px rgba(217,114,46,0)}
  100%{box-shadow:0 0 0 0 rgba(217,114,46,0)}
}

/* ---------- sections ---------- */
section.block{padding:clamp(60px,8vw,100px) 0;position:relative}
.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:800;
  color:var(--ember-deep);font-family:"Plus Jakarta Sans",sans-serif;margin:0}
h2.sec{font-size:clamp(28px,4.2vw,44px);line-height:1.14;letter-spacing:-.02em;margin:14px 0 0}
.lead{color:var(--muted);font-size:17.5px;margin:14px 0 0;max-width:56ch}
.center{text-align:center}.center .lead{margin-inline:auto}

/* ---------- tiles ----------
   The landing page's icon and text ROWS. Named .tile, not .card, on purpose.

   This block used to be .card, and site.css ALSO defines .card: the stacked icon, title, body
   component on Features, Support, Privacy, Pricing and FAQ. This file loads after site.css, so
   its flex row won on every page. Every one of those cards laid out sideways, title beside body
   beside link, so body copy wrapped one word per line and the support email was clipped at the
   card edge. `.card span` also hit the stacked card's icon, which is a span, and squeezed it
   into a thin coloured bar.

   The header of this file promises that site.css keeps supplying the older pages' interior
   layout. A same-named component is exactly how that promise gets broken silently, so these are
   a different name, not a more specific selector. */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:34px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
.tile{display:flex;align-items:flex-start;gap:14px;background:var(--surface);border:1px solid var(--line);
  border-radius:22px;padding:22px 24px;box-shadow:var(--shadow);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tile .ic{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;flex:none}
.tile .ic svg{width:18px;height:18px}
.ic.e{background:var(--ember-soft);color:var(--ember-deep)}
.ic.p{background:var(--plum-soft);color:var(--plum)}
.ic.s{background:var(--sage-soft);color:var(--sage-deep)}
.ic.w{background:var(--water-soft);color:var(--water-deep)}
.tile b{display:block;font-size:16px;font-weight:700;letter-spacing:-.01em}
.tile span{display:block;margin-top:5px;font-size:14.5px;line-height:1.55;color:var(--muted)}

/* ---------- honesty panel ---------- */
.honest{background:var(--surface);border:1px solid var(--line);border-radius:30px;
  padding:clamp(30px,5vw,58px);box-shadow:var(--shadow);
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,52px);align-items:center}
@media (max-width:860px){.honest{grid-template-columns:1fr}}
.quote{background:var(--surface-2);border-radius:24px;padding:26px}
.quote .line{display:flex;align-items:flex-start;gap:12px;margin-bottom:16px}
.quote .line:last-child{margin-bottom:0}
.quote .tick{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none}
.quote .tick svg{width:15px;height:15px}
.quote b{display:block;font-size:14.5px;font-weight:700}
.quote span{display:block;font-size:13.5px;color:var(--muted);line-height:1.5}

/* ---------- price ---------- */
.pricecard{background:linear-gradient(152deg,var(--plum),#4E2B44);color:#fff;border-radius:30px;
  padding:clamp(32px,5vw,56px);text-align:center;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.pricecard::after{content:"";position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 68%);top:-180px;right:-120px}
.pricecard>*{position:relative}
.pricecard .eyebrow{color:#F0D9E8}
.pricecard h2{color:#fff;font-size:clamp(28px,4.2vw,44px);line-height:1.14;letter-spacing:-.02em;margin:14px 0 0}
.pricecard p{color:rgba(255,255,255,.9);margin:14px auto 0;max-width:54ch;font-size:16.5px}
.plist{display:flex;gap:12px 26px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.plist span{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.plist svg{width:16px;height:16px;flex:none}
.pricecard .note{margin-top:24px;font-size:13px;color:rgba(255,255,255,.92)}
.after-price{margin:26px auto 0;text-align:center;color:var(--muted);font-size:16px}

/* ---------- faq ---------- */
.faq{display:flex;flex-direction:column;gap:14px;margin:42px auto 0;max-width:760px;text-align:left}
details.q{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:2px 22px;
  box-shadow:var(--shadow);transition:box-shadow .25s}
details.q[open]{box-shadow:var(--shadow-lg)}
details.q summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;font-size:15.5px;
  display:flex;justify-content:space-between;align-items:center;gap:12px}
details.q summary::-webkit-details-marker{display:none}
details.q summary .pm{flex:none;width:24px;height:24px;border-radius:8px;background:var(--ember-soft);
  color:var(--ember-deep);display:grid;place-items:center;font-weight:800;font-size:15px;line-height:1;
  transition:transform .28s var(--ease)}
details.q[open] summary .pm{transform:rotate(45deg)}
details.q .ans{overflow:hidden}
details.q p{margin:0 0 18px;color:var(--muted);font-size:15px;line-height:1.62}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);margin-top:40px;padding:44px 0 56px;background:rgba(255,255,255,.5)}
.foot-top{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.foot-brand{display:flex;align-items:center;gap:10px;font-family:"Fraunces",Georgia,serif;
  font-style:italic;font-weight:700;font-size:18px;color:var(--ink)}
.foot-brand:hover{text-decoration:none}
.foot-links{display:flex;gap:8px 22px;flex-wrap:wrap}
.foot-links a{color:var(--muted);font-weight:600;font-size:14.5px}
.foot-links a:hover{color:var(--ink)}
.foot-note{margin-top:26px;color:var(--faint);font-size:13px;line-height:1.62;max-width:72ch}
.foot-note strong{color:var(--muted);font-weight:700}

/* ---------- inner page clearance ------------------------------------------
   The nav is FIXED, so it sits over whatever is at the top of the document.
   The landing page's .hero carries its own generous top padding; every other
   page needs the same clearance or its first heading is printed underneath the
   navbar. Marked with a body class rather than inferred from the markup, so
   adding a page is one attribute and not a guess.                          */
.inner main{padding-top:clamp(104px,12vw,132px)}

/* Those pages were built on site.css and set their own page background. The
   aurora needs to show through, so the shell's canvas wins. */
.inner{background:var(--canvas)}

/* ---------- one background system ----------------------------------------
   site.css paints large tinted panels behind sections (.canvas-soft, -warm,
   -cool, -sunken, -contrast, each via a ::before radial wash). The landing
   page has none of that: it separates sections with space and card surfaces
   over a single cream canvas and one drifting aurora.

   Running both at once is what "inconsistent" actually looked like here. The
   panels are switched off rather than deleted from site.css, so the older
   pages keep their layout and spacing (the padding those classes carry is
   load bearing) and only their competing paint goes away.

   All of them are LIGHT tints over cream with dark ink on top, except
   .canvas-contrast: a dark band with reversed type, used once, for the
   pricing page's closing section. Its type is put back on ink just below. */
.inner [class*="canvas-"]::before{display:none}
.inner .canvas-gradient,
.inner .canvas-soft,
.inner .canvas-warm,
.inner .canvas-cool,
.inner .canvas-sunken,
.inner .canvas-contrast{background:transparent}

/* With its dark wash gone, .canvas-contrast's near white type sat cream on
   cream, so the pricing page closed on an invisible heading. Same ink as every
   other section, and dark grain specks rather than light ones. */
.inner .canvas-contrast,
.inner .canvas-contrast h1,.inner .canvas-contrast h2,.inner .canvas-contrast h3,
.inner .canvas-contrast h4,.inner .canvas-contrast .h4{color:var(--ink)}
.inner .canvas-contrast .lead,.inner .canvas-contrast .secondary{color:var(--muted)}
.inner .canvas-contrast .muted,.inner .canvas-contrast .btn-note{color:var(--muted)}
.inner .canvas-contrast .eyebrow,.inner .canvas-contrast .accent{color:var(--ember-deep)}
.inner .canvas-contrast{--line:#EAE0D5;--line-strong:rgba(44,35,32,.24)}
.inner .canvas-contrast.grain::after{background-image:var(--grain)}

/* ---------- legacy components, mapped onto the shell -----------------------
   The inner pages were built on site.css and carry its component classes. They
   were already on the right palette, so what was left was small and visible:
   a slightly different dark on the primary button, a translucent secondary,
   and an FAQ that read as a divider list while the landing page's read as
   cards. Mapped rather than rewritten, so the pages' markup stays untouched.  */

/* Same dark as the shell's .btn-primary. site.css used #241C19, the shell
   #2C2320, which is close enough to look like a mistake rather than a choice. */
.inner .btn--primary{background:var(--cta);color:var(--cta-ink)}
.inner .btn--secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}

/* The FAQ, as cards. Padding goes on the ITEM: the trigger and panel already
   carry their own vertical padding, so adding it there would double up. */
.inner .accordion__item{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:2px 22px;
  margin-bottom:14px;
  transition:box-shadow .25s var(--ease);
}
.inner .accordion__item:last-child{margin-bottom:0}
.inner .accordion__item:has(.accordion__trigger[aria-expanded="true"]){box-shadow:var(--shadow-lg)}

/* The rounded-square ember mark the shell uses, rather than a circle outline. */
.inner .accordion__icon{
  border-radius:8px;
  background:var(--ember-soft);
  border-color:transparent;
  color:var(--ember-deep);
}

/* ---------- anchor targets clear the fixed nav ----------------------------
   The navbar is FIXED, so a jump to an in-page anchor scrolls the target to
   y=0, which is underneath it. The FAQ's "Jump to" list and the landing page's
   own nav links both do this, and the result is a heading hidden behind the
   chrome with no way to tell that you arrived anywhere.

   scroll-margin-top is the property that exists for exactly this, and it costs
   nothing when the anchor is not used. Applied to anything with an id rather
   than a hand kept list, so a new section cannot be added without it.        */
[id]{scroll-margin-top:clamp(96px,12vw,124px)}