/* masa — PRODUCT PAGE styles (a standalone plan page: hero, live mock, what-you-get cards,
   the four-step flow, the price card, promise, FAQ, final CTA, sticky CTA).
   ⚑ Extracted Sep 22 2026 from audience.html's inline <style> (byte-for-byte, comments kept) so
   audience, booking and referrals share ONE copy (global rule: CSS in files, never mega-inlined).
   Tokens come from azul-tokens.css; the .device phone frame from mock.css. */
  *{box-sizing:border-box;}
  /* iPhone width fix (Jul 17 late, mirrors azul.css): clip horizontal overflow at the
     root — .ambient's -15% inset was widening the scroll width on iPhone. clip, not
     hidden: no scroll container, so the sticky bar keeps working. */
  html,body{overflow-x:clip;}
  body{margin:0;background:var(--g);color:var(--ink);
    font-family:var(--f-body);font-size:17px;line-height:1.6;
    -webkit-font-smoothing:antialiased;transition:background-color .3s var(--ease-out),color .3s var(--ease-out);}
  .shell{max-width:820px;margin:0 auto;padding:0 24px;}
  /* in-text body links: white + underlined (flask's approach, Jul 17 late) —
     nav/bar/button links carry their own text-decoration:none and are exempt */
  a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px;}
  :focus-visible{outline:3px solid var(--indigo);outline-offset:3px;border-radius:4px;}
  .disp{font-family:var(--f-disp);font-weight:600;letter-spacing:-.02em;text-transform:lowercase;line-height:1;text-wrap:balance;}
  .hand{font-family:"MasaHand","Snell Roundhand","Brush Script MT",cursive;color:var(--coral);}
  /* flask buttons (Jul 17 late — the Clay flat-mango-chip rule is SUPERSEDED for the flask
     skin; canonical copy in azul.css / azul-tokens.css header) */
  .btn{display:inline-flex;align-items:center;gap:10px;
    background:linear-gradient(to top,#cfdef6 20%,#fafafa 80%);color:#191919;
    font-family:var(--f-body);font-weight:500; /* body font on buttons (Jul 17 closeout, mirrors azul.css) */
    font-size:15px;text-decoration:none;height:44px;padding:8px 20px;justify-content:center;white-space:nowrap;
    border:.5px solid transparent;border-radius:var(--r-pill); /* study metrics (Jul 17 late) */
    box-shadow:inset 0 1px #ffffffd9,inset 0 -1px #09090b0f,0 0 0 .5px #09090b8c,0 1px 2px #00000059,0 4px 12px #00000038;
    transition:transform var(--t-micro) var(--ease-out),filter var(--t-micro) var(--ease-out),box-shadow .2s;}
  .btn:hover{transform:translateY(-1px);filter:brightness(1.03);
    box-shadow:inset 0 1px #ffffffd9,inset 0 -1px #09090b0f,0 0 0 .5px #09090b8c,0 2px 4px #00000059,0 6px 16px #00000047;}
  .btn:active{transform:translateY(0) scale(.98);filter:none;}

  /* ⚑ 2-STATE GLASS BAR — ported from azul.css (skin pass Jul 17 2026): transparent at the
     top on html.js, a dark glass pill past 8px scroll. ONE backdrop-filter, desktop-only;
     fail-open so a page with JS off keeps a readable glass bar. */
  .bar{display:flex;align-items:center;justify-content:space-between;padding:24px 0 4px;}
  @media(min-width:768px){
    .bar{position:sticky;top:4px;z-index:30;margin:0 -16px;padding:10px 18px;
      border:1px solid transparent;border-radius:var(--r-pill);
      background:var(--glass);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
      transition:background-color .3s var(--ease-out),border-color .3s var(--ease-out);}
    html.js .bar:not(.scrolled){background:transparent;border-color:transparent;
      -webkit-backdrop-filter:none;backdrop-filter:none;}
    .bar.scrolled{background:color-mix(in srgb, var(--g) 70%, transparent);
      border-color:rgba(255,255,255,.05);}
    :root[data-theme="light"] .bar.scrolled{border-color:var(--line);}
  }
  .brand{display:flex;align-items:center;gap:9px;font-family:var(--f-disp);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--peri-ink);}
  .brand .m{width:15px;height:15px;background:currentColor;border-radius:var(--r-dough);}
  .bar .r{display:flex;align-items:center;gap:14px;font-size:12.5px;color:var(--soft);}
  .bar .place{font-family:var(--f-body);letter-spacing:.04em;}
  .bar .lang a{color:var(--soft);text-decoration:none;}
  .bar .lang a.on{color:var(--indigo);font-weight:700;}
  .bar .lang .sep{opacity:.5;margin:0 3px;}

  /* ⚑ r23 — CENTERED hero to match the homepage flask hero (left was the old look). */
  .hero{padding:56px 0 40px;position:relative;text-align:center;}
  .hero>:not(.ambient){position:relative;z-index:1;}
  .hero .lede{margin-inline:auto;}
  .hero .cta-row{justify-content:center;}
  .hero>:not(.ambient){position:relative;z-index:1;}
  /* ⚑ SPOTLIGHT (study r19 / visual-collection verdict Jul 17 2026): gradient-only ambient
     glow — a faint white lift + one mango breath, zero blur, zero iOS cost. */
  /* contained (iPhone width fix): never extends past the viewport edge */
  .ambient{position:absolute;top:70px;height:520px;
    left:max(-15%,calc((100% - 100vw)/2));right:max(-15%,calc((100% - 100vw)/2));
    z-index:0;pointer-events:none;
    background:radial-gradient(ellipse 55% 45% at 50% 8%,rgba(250,250,250,.035),transparent 70%),
               radial-gradient(ellipse 45% 40% at 50% 22%,rgba(146,220,229,.09),transparent 72%);}
  .eyebrow{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin:0 0 20px;}
  .hero h1{font-size:clamp(34px,5.4vw,56px);margin:0 0 22px;}
  .hero h1 em{font-style:normal;color:var(--indigo);}
  .lede{font-size:17.5px;line-height:1.55;color:var(--soft);max-width:56ch;margin:0 0 26px;}
  .cta-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
  .cta-row .hand{font-size:20px;}
  /* ⚑ CENTERED (Juan, Jul 17 s5 — "the email-reaches copy should be centered"): the hero
     centers its text, but this block's max-width:64ch was left-anchored (no auto margins), so
     the box sat left of centre. margin-inline:auto centers the box; text-align:center matches. */
  .statline{margin-top:22px;max-width:64ch;margin-inline:auto;text-align:center;font-size:14.5px;line-height:1.5;}
  .statline b{color:var(--ink);}.statline span{color:var(--soft);}

  /* newsletter mock — product shown, not told (flat: tint only, no shadow) */
  .nl{max-width:480px;background:var(--panel);border:0;border-radius:var(--r-card);padding:20px 22px;}
  .nl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;}
  .nl-from{display:flex;align-items:center;gap:9px;font-family:var(--f-disp);font-weight:600;font-size:15px;letter-spacing:-.01em;color:var(--ink);}
  .nl-from .av{width:26px;height:26px;border-radius:var(--r-dough);background:var(--dough);flex-shrink:0;} /* the mascot dough, not the retired indigo (Jul 17 late) */
  .nl-time{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--soft);white-space:nowrap;}
  .nl-subj{font-weight:700;font-size:16px;line-height:1.35;margin:0 0 8px;color:var(--ink);}
  .nl-prev{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--soft);}
  /* ⚑ NOT var(--chip). This is a mock of the CLIENT'S OWN newsletter — not a masa
     control — so masa's CTA hue here was arbitrary AND it clashed: the page's real
     "start your project →" depends on owning mango alone, and a mango-looking button
     inside a mockup is exactly what stops a hero's primary button reading as primary
     (the mistake Intercom ships: a black Close pill against a black Start free trial).
     Nothing here is being depicted accurately by borrowing masa's colour — a real
     client's newsletter would wear the CLIENT'S brand anyway. Indigo: reads as a button,
     competes with nothing.
     (This note used to contrast itself with threads.html's approve, "which is mango
     because the PRODUCT genuinely is and must stay faithful". That is no longer true:
     Juan ruled Jul 15 2026 that every mock's approve button is INDIGO, so both pages now
     agree. The product's real .pkg-ok is still mango; the mocks deliberately aren't.) */
  /* Jul 17 late: the indigo fill above is superseded with the old kernel — the client's
     mock button is the flask dark element (the approve button alone gets the gradient). */
  .nl-open{display:inline-flex;align-items:center;gap:8px;background:var(--element);color:#ececee;font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:var(--r-pill);}
  /* ⚑ r118 — THE GATE, AS ITS OWN BEAT. This flow read `you send ↓ your list gets`, which
     said the quiet part wrong: that a voice note becomes an email to your whole list with
     nothing in between. That is the ONE thing masa promises never happens, and every other
     surface now shows it (the hero's card, threads.html's card, and .fp-chain in the
     product itself as of r118: "nothing sends until you say ok"). A three-beat flow costs
     one row and makes the page stop contradicting the product.
     Same component as the other mocks' buttons — <span>s inside an aria-hidden block. */
  .io-gate{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 4px;}
  .io-act{font-size:12.5px;font-weight:700;padding:7px 14px;border-radius:var(--r-pill);
    border:1px solid var(--line);color:var(--soft);white-space:nowrap;}
  .io-act.io-ok{background:linear-gradient(to top,#cfdef6 20%,#fafafa 80%);
    border-color:transparent;color:#191919;box-shadow:0 0 0 .5px #09090b8c,0 1px 2px #00000059;} /* flask light-gradient approve (Jul 17 late) */
  .mockcap{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--soft);max-width:52ch;}
  /* drop-off (what you send) — pairs with the newsletter (what they get) */
  .io-k{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin:0 0 10px;}
  .io-arrow{color:var(--soft);font-weight:800;font-size:20px;line-height:1;margin:14px 0;max-width:480px;text-align:center;}
  .drop{max-width:480px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;}
  .drop .b{max-width:88%;padding:10px 14px;font-size:14px;line-height:1.4;border-radius:16px;background:var(--element);color:#ececee;border-bottom-left-radius:6px;} /* flask element bubble (Jul 17 late) */
  .vn{display:inline-flex;align-items:center;gap:9px;}
  .vn .pl{width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;flex-shrink:0;}
  .vn .wave{display:flex;align-items:center;gap:2px;height:15px;}
  .vn .wave i{width:2px;height:60%;background:rgba(255,255,255,.55);border-radius:2px;}
  .vn .wave i:nth-child(3n){height:100%;}.vn .wave i:nth-child(4n){height:40%;}
  .vn .dur{font-family:ui-monospace,Menlo,monospace;font-size:10.5px;opacity:.85;}

  section{padding:32px 0;}
  .lbl{font-family:ui-monospace,Menlo,monospace;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);margin:0 0 12px;}
  h2.disp{font-size:clamp(24px,3.6vw,34px);margin:0 0 24px;}
  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
  @media(max-width:720px){.grid3{grid-template-columns:1fr;}}
  .card{background:var(--panel);border:0;border-radius:var(--r-card);padding:22px 20px;}
  .card .k{font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--gold);margin:0 0 10px;}
  .card h3{font-family:var(--f-disp);font-weight:600;font-size:17px;letter-spacing:-.02em;text-transform:lowercase;margin:0 0 7px;}
  .card p{margin:0;font-size:14px;line-height:1.5;color:var(--soft);}

  .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:10px;}
  @media(max-width:720px){.flow{grid-template-columns:1fr;}.flow .arrow{display:none;}}
  .fstep{background:var(--panel);border:3px solid transparent;border-radius:var(--r-card);padding:20px 18px;}
  /* ⚑ MANGO BORDER RETIRED (Juan asked "what's uniform — keep or remove?", Jul 17 s5). Removed,
     for uniformity: the four steps now read as one even set. This matches the plans-grid ruling
     (the mango-select highlight border was already retired there) and the single-accent rule —
     mango is the CTA/action colour alone, never a passive highlight. The .mid class stays inert
     in the markup (harmless); the flow still reads you→masa→you→yours via the .fk labels. */
  .fstep .fk{display:block;font-family:ui-monospace,Menlo,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--indigo);margin-bottom:8px;}
  .fstep p{margin:0;font-size:14px;line-height:1.5;color:var(--soft);}
  .arrow{color:var(--soft);font-weight:800;text-align:center;}

  .price{background:var(--panel);border:0;border-radius:var(--r-card);padding:28px 26px;max-width:560px;}
  .price .amt{font-family:var(--f-disp);font-weight:600;font-size:clamp(26px,4vw,34px);letter-spacing:-.025em;text-transform:lowercase;margin:0;color:var(--indigo);}
  .price .amt small{font-weight:700;font-size:15px;color:var(--soft);}
  .price ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
  .price li{position:relative;padding-left:26px;font-size:15px;line-height:1.45;}
  .price li::before{content:"\2713";position:absolute;left:0;top:0;color:var(--teal-d);font-weight:800;}
  .price .founding{margin-top:18px;background:var(--sunk);border:0;border-left:4px solid var(--indigo);border-radius:var(--r-sm);padding:12px 15px;font-size:13.5px;color:var(--soft);}
  .price .cta-row{margin-top:22px;}
  .price .note{margin:12px 0 0;font-size:13.5px;color:var(--soft);}

  .grid3 .pill b{display:block;font-family:var(--f-disp);font-weight:600;font-size:16px;text-transform:lowercase;margin-bottom:6px;}
  .grid3 .pill p{margin:0;font-size:14px;color:var(--soft);line-height:1.5;}

  .faq{display:flex;flex-direction:column;gap:12px;max-width:660px;}
  .faq .qa{background:var(--panel);border:0;border-radius:var(--r-sm);padding:18px 20px;}
  .faq .qa b{display:block;font-family:var(--f-disp);font-weight:600;font-size:15.5px;text-transform:lowercase;margin-bottom:6px;}
  .faq .qa p{margin:0;font-size:14px;color:var(--soft);line-height:1.5;}

  .final{text-align:center;padding:44px 0 30px;}
  .final .lbl{text-align:center;}
  .final .sub{color:var(--soft);max-width:46ch;margin:0 auto 24px;font-size:15px;}
  .final .footer{margin-top:26px;font-size:12.5px;color:var(--soft);}
  footer.legal{border-top:1px solid var(--line);margin-top:20px;padding:22px 0 60px;text-align:center;font-size:13px;color:var(--soft);}
  footer.legal a{color:var(--soft);text-decoration:underline;margin:0 9px;}

  /* hidden = visibility:hidden too, so the off-screen CTA link leaves the tab order
     (visibility flips after the slide-out finishes, instantly on show) */
  .stickycta{position:fixed;left:0;right:0;bottom:0;background:var(--panel);border-top:1px solid var(--line);
    transform:translateY(110%);visibility:hidden;
    transition:transform .3s var(--ease-out),visibility 0s .3s;z-index:20;}
  .stickycta.show{transform:none;visibility:visible;transition:transform .3s var(--ease-out),visibility 0s 0s;}
  /* bottom offset = max(base, safe-area) — clears the iPhone home indicator (design-language rule) */
  .stickycta-in{max-width:820px;margin:0 auto;padding:12px 24px max(12px, env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .stickycta-tx{font-weight:700;font-size:14px;}
  @media(prefers-reduced-motion:reduce){body,.btn,.stickycta{transition:none;}}
  /* ⚑ s5 — KICKERS OFF MONO → OUTFIT (Juan: "the eyebrow copy reads too technical"). Editorial
     labels get the warm proportional face; the uppercase + tracking stay so they still read as
     kickers. True data-mono (.nl-time timestamp, .place) is deliberately left alone. */
  .eyebrow,.lbl,.card .k,.io-k,.fstep .fk{font-family:var(--f-body);font-weight:500;letter-spacing:.12em;}

/* ── booking examples (booking.html "see it live") ─────────────────────────
   ⚑ Sep 22 2026: four short threads in a grid. The client's texts are the flask element
   bubble on the left (.drop .b, above); the assistant's replies sit on the right in the
   chip colour, the way a phone shows the other side of a thread. */
.examples{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;}
@media(max-width:720px){.examples{grid-template-columns:1fr;}}
.ex{background:var(--panel);border-radius:var(--r-card);padding:18px 16px;display:flex;flex-direction:column;gap:12px;min-width:0;}
.ex .drop{max-width:none;}
.ex-k{margin:0;font-family:var(--f-body);font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);}
.ex-key{margin:0 0 14px;font-size:13.5px;color:var(--soft);}
.drop .b.reply{align-self:flex-end;background:var(--chip);color:var(--onchip);border-bottom-left-radius:16px;border-bottom-right-radius:6px;}
.drop .b .lnk{text-decoration:underline;text-underline-offset:2px;}
.ex-owner{margin:4px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink);}
.ex-owner span{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);margin-bottom:2px;}