/* The home page's social feel, section by section (approved by the owner, 13 October 2026), after "Four systems" in
   sections4.css. These sections write their styles in style attributes, which is why rules here are marked important.
   No word is changed by this file. */

/* Four systems ends close to the section after it. */
.s4-sys{padding-bottom:28px!important}

/* ---- "A real report. Free.": Inbox with Chat + Glow (the owner, 18 October 2026, after four looks and their left sides). ----
   Left: the kicker as a pill with a live dot, "A real report." on one line and "Free." below in an orange gradient, the line
   under it as our message bubble with our mark, and the button with a soft pulsing ring, "No card needed" quiet beneath it.
   Right: the report arrives as a message card from us, the picture of Kidz Vogue's report in its current look (without the
   dashboard preview), and the four points as white bubbles, each with its own icon. On phones the button comes after the card.
   The section writes no inline styles, so few rules need marking important. Drafts: docs/web-app/mockups/2026-10-18/. */
section#report-peek{background:var(--paper);color:var(--mbc-navy);padding:110px 2vw}
#report-peek .rp-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px 5vw;align-items:center;max-width:1360px;margin:0 auto;box-sizing:border-box;padding:0 3vw}
#report-peek .chip{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:1.5px solid var(--border-subtle);border-radius:999px;padding:7px 14px 7px 10px;font-size:13px;font-weight:700;color:var(--mbc-navy);margin-bottom:20px}
#report-peek .chip i{width:8px;height:8px;border-radius:50%;background:var(--mbc-orange);box-shadow:0 0 0 4px rgba(255,165,0,.18)}
#report-peek h2{font-size:clamp(40px,4.6vw,72px);line-height:.98;letter-spacing:-.045em;margin:0 0 20px;color:var(--mbc-navy)}
#report-peek h2 .l{display:block;white-space:nowrap;font-weight:300}
#report-peek h2 .b{display:inline-block;font-weight:800;background:linear-gradient(100deg,var(--mbc-orange),#FF7A00);-webkit-background-clip:text;background-clip:text;color:transparent}
#report-peek .lb{display:flex;align-items:flex-end;gap:10px;margin:0 0 26px;max-width:500px}
#report-peek .lb p{margin:0;background:var(--white);border:1.5px solid var(--border-subtle);border-radius:24px 24px 24px 8px;padding:14px 18px;font-size:16.5px;line-height:1.55;color:var(--navy-700);box-shadow:0 8px 22px rgba(41,57,81,.08)}
:is(#report-peek,.rp-peek) .av{flex:none;width:34px;height:34px;border-radius:50%;background:var(--white);border:1.5px solid var(--border-subtle);display:flex;align-items:center;justify-content:center}
:is(#report-peek,.rp-peek) .av img{display:block;width:auto;height:17px}
#report-peek .rp-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
#report-peek .rp-cta .note{padding-left:4px;font-size:13px;font-weight:500;color:var(--navy-400)}
#report-peek .ring{position:relative;display:inline-flex;border-radius:999px}
#report-peek .ring::after{content:'';position:absolute;inset:-6px;border-radius:999px;border:2px solid rgba(255,165,0,.45);animation:rp-pulse 2.4s var(--ease-out) infinite;pointer-events:none}
@keyframes rp-pulse{0%{transform:scale(.96);opacity:1}100%{transform:scale(1.12);opacity:0}}
@media (prefers-reduced-motion:reduce){#report-peek .ring::after{animation:none}}
:is(#report-peek,.rp-peek) .rp-inbox{background:var(--white);border:1.5px solid var(--border-subtle);border-radius:32px;padding:16px;box-shadow:0 24px 60px rgba(41,57,81,.14)}
:is(#report-peek,.rp-peek) .msg-head{display:flex;align-items:center;gap:12px;padding:4px 6px 14px}
:is(#report-peek,.rp-peek) .msg-head b{display:block;font-size:15px}:is(#report-peek,.rp-peek) .msg-head span{font-size:13px;color:var(--navy-500)}
:is(#report-peek,.rp-peek) .msg-head time{margin-left:auto;font-size:12px;color:var(--navy-400)}
:is(#report-peek,.rp-peek) .msg-img{border-radius:20px;overflow:hidden;background:#0B1220}
:is(#report-peek,.rp-peek) .msg-img img{display:block;width:100%;height:auto}
:is(#report-peek,.rp-peek) .msg-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:14px 2px 2px}
:is(#report-peek,.rp-peek) .bub{display:flex;align-items:center;gap:8px;box-sizing:border-box;background:var(--white);border:1.5px solid var(--border-subtle);border-radius:18px 18px 18px 6px;padding:8px 14px 8px 8px;font-size:14px;font-weight:600;line-height:1.35;color:var(--mbc-navy)}
:is(#report-peek,.rp-peek) .bub .ic{flex:none;width:28px;height:28px;border-radius:50%;background:var(--mbc-navy);color:var(--mbc-orange);display:grid;place-items:center}
@media (max-width:900px){#report-peek .rp-wrap{grid-template-columns:1fr}}
@media (max-width:700px){
  /* The page's own phone rule gives every section 72px above and below; this is named more exactly so it wins. */
  section#report-peek:not(#top){padding:64px 10px!important}
  /* The words' block is opened up so the report card sits between the message bubble and the button. */
  #report-peek .rp-wrap{display:flex;flex-direction:column;gap:0;padding:0 8px}
  #report-peek .rp-words{display:contents}
  #report-peek .rp-words>*{order:1;align-self:stretch;text-align:left}
  #report-peek .chip{align-self:flex-start;font-size:12px}
  #report-peek h2{font-size:clamp(34px,11vw,44px)}
  #report-peek .lb{max-width:none}
  :is(#report-peek,.rp-peek) .rp-inbox{order:2;margin:2px 0 28px}
  #report-peek .rp-words>.rp-cta{order:3;align-self:center;align-items:center}
  #report-peek .rp-cta .note{padding:0}
  /* One point per line. */
  :is(#report-peek,.rp-peek) .msg-list{grid-template-columns:1fr}
}

/* ---- "Four moves. Zero guesswork." on phones: the cards swipe sideways one at a time, the next one peeking in, with story
   bars beneath (the owner, 18 October 2026, from draft C). The laptop keeps its fanned deck. ---- */
.mbc-deck-bars{display:none}
@media (max-width:700px){
  #process .mbc-deck{display:flex!important;justify-content:flex-start!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:24px -5vw 0;padding:6px 5vw 14px;scroll-padding:0 5vw;scrollbar-width:none;align-items:stretch}
  #process .mbc-deck::-webkit-scrollbar{display:none}
  #process .mbc-deck>div{flex:0 0 84%;scroll-snap-align:start;box-sizing:border-box;min-height:0!important;gap:20px;padding:22px!important;box-shadow:0 18px 40px rgba(0,0,0,.3)!important}
  #process .mbc-deck>div>div:first-child>span:first-child{font-size:64px!important}
  #process .mbc-deck>div>div:nth-child(2)>div:first-child{font-size:30px!important}
  #process .mbc-deck-bars{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
  #process .mbc-deck-bars i{height:4px;border-radius:99px;background:rgba(255,255,255,.22);transition:background .3s}
  #process .mbc-deck-bars i.on{background:var(--mbc-orange)}
}

/* ---- "Four moves. Zero guesswork.": full width with straight edges on a laptop (the owner, 18 October 2026; the curved
   corners of 13 October are gone, and so is the overlap that tucked the next section under them). Phones keep their curve. ---- */
@media (min-width:701px){
  #process{border-radius:0}
}

/* ---- "Already in.": the Stories look (the owner, 18 October 2026, from four looks). ---- */
/* The three logos, round profile pictures from assets/already-in/, each in an orange story ring, centred on the cream, with
   the name, the tag and the line beneath. Drafts: docs/web-app/mockups/2026-10-18/ (already). */
section#work.ai{background:var(--paper);color:var(--mbc-navy);padding:110px 2vw}
#work .ai-wrap{max-width:1360px;margin:0 auto;padding:0 3vw;box-sizing:border-box}
#work .ai-head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px;margin-bottom:44px}
#work .ai-head h2{font-size:clamp(48px,6vw,92px);font-weight:800;letter-spacing:-.045em;line-height:.95;margin:0}
#work .ai-head p{max-width:420px;font-size:17px;line-height:1.6;margin:0;color:var(--navy-600)}
#work .ai-stories{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;max-width:1000px;margin:0 auto}
#work .ai-story{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px}
#work .ring{display:block;padding:7px;border-radius:50%;background:conic-gradient(from 210deg,var(--mbc-orange),#FF7A00,#FFC864,var(--mbc-orange));transition:transform .35s var(--ease-bounce)}
#work .ring:hover{transform:scale(1.05)}
#work .ring .av{display:block;width:132px;height:132px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 4px var(--paper)}
#work h3{font-size:24px;font-weight:800;letter-spacing:-.03em;margin:4px 0 0}
#work .tag{font-size:12.5px;font-weight:700;color:var(--mbc-navy);background:var(--orange-50,#FFF8EB);border:1.5px solid var(--orange-100);border-radius:999px;padding:4px 11px}
#work p{max-width:280px;font-size:15px;line-height:1.5;color:var(--navy-600);margin:0}
@media (max-width:900px){#work .ai-stories{grid-template-columns:1fr;gap:28px}}
@media (max-width:700px){
  /* The page's own phone rule gives every section 72px above and below; this is named more exactly so it wins. */
  section#work.ai:not(#top){padding:64px 10px}
  #work .ai-wrap{padding:0 8px}
  #work .ai-head{margin-bottom:28px}
  #work .ai-head h2{font-size:48px}
  #work .ring .av{width:104px;height:104px}
}

/* ---- "Your result picks your plan.": the A + C look (the owner, 18 October 2026, from four looks and a mix). ---- */
/* A navy sheet with Four systems' glow. The three tiers are glass cards stepping up along an orange curve; each "If…" line
   is a white message bubble, as if the visitor sent it, and the card under it is our reply. Orange is kept for the prices
   and the button. It replaces the orange heading band on phones of 14 October 2026. Drafts: docs/web-app/mockups/2026-10-18/. */
#after.ad{padding:120px 2vw;background:var(--paper)}
#after .ad-wrap{max-width:1360px;margin:0 auto;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px 5vw;align-items:center;border-radius:56px;padding:80px 4.5vw;color:var(--white);
  background:radial-gradient(60% 55% at 92% 0%,rgba(255,165,0,.30),transparent 70%),radial-gradient(55% 60% at 0% 100%,rgba(74,91,118,.95),transparent 70%),var(--mbc-navy)}
#after .ad-kick{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mbc-orange);margin-bottom:20px}
#after h2{font-size:clamp(40px,4.6vw,68px);line-height:.98;letter-spacing:-.045em;margin:0 0 20px}
#after h2 .l{font-weight:300;color:var(--white)}#after h2 .b{font-weight:800;color:var(--mbc-orange)}
#after .ad-intro p{font-size:17px;line-height:1.6;margin:0 0 28px;max-width:480px;color:var(--navy-100)}
#after .ad-cta{text-decoration:none;display:inline-block}
/* "See pricing" is a white outline, not solid orange (the owner, 18 October 2026): it only scrolls down, and solid orange
   on this page means "act" (14 October 2026), as with "What if … breaks?". The prices keep the orange. It still lifts on hover.
   The button writes its colours in style attributes, which is why these are marked important. */
#after .ad-cta>button{background:transparent!important;color:var(--white)!important;border:1.5px solid rgba(255,255,255,.45)!important}
#after .ad-cta>button:hover{border-color:rgba(255,255,255,.8)!important}
#after .ad-climb{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:end;min-height:440px;padding-top:40px}
#after .ad-curve{position:absolute;left:0;right:0;bottom:4%;width:100%;height:66%;pointer-events:none}
#after .ad-curve path{fill:none;stroke:var(--mbc-orange);stroke-width:4;stroke-linecap:round;opacity:.55}
#after .ad-step{position:relative;border-radius:28px;padding:0 18px 22px;background:rgba(255,255,255,.07);border:1.5px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 24px 60px rgba(8,12,18,.35);display:flex;flex-direction:column;gap:8px;transition:transform .3s var(--ease-bounce),border-color .2s}
#after .ad-step:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.45)}
#after .s2{margin-bottom:90px}#after .s3{margin-bottom:180px}
/* Each bubble reaches over the next card's edge, so each card sits above the one after it. */
#after .s1{z-index:3}#after .s2{z-index:2}#after .s3{z-index:1}
#after .ad-step .if{align-self:flex-end;width:calc(100% + 6px);box-sizing:border-box;margin:-26px -22px 6px 0;background:var(--white);color:var(--mbc-navy);border-radius:20px 20px 6px 20px;padding:10px 14px;font-size:13.5px;font-weight:600;line-height:1.35;box-shadow:0 10px 24px rgba(8,12,18,.3)}
#after .ad-step .av{width:26px;height:26px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;margin-top:4px}
#after .ad-step .nm{margin-top:-4px;font-size:30px;font-weight:800;letter-spacing:-.02em;color:var(--white)}
#after .ad-step .ln{font-size:15px;line-height:1.4;color:var(--navy-100)}
#after .ad-step .pr{margin-top:6px;align-self:flex-start;border-radius:999px;padding:6px 12px;background:var(--mbc-orange);color:var(--mbc-navy);font-size:14px;font-weight:800}
@media (max-width:900px){#after .ad-wrap{grid-template-columns:1fr}}
@media (max-width:700px){
  /* The page's own phone rule gives every section 72px above and below; this is named more exactly so it wins. */
  section#after.ad:not(#top){padding:64px 10px}
  #after .ad-wrap{border-radius:34px;padding:44px 18px 22px;gap:32px}
  #after .ad-climb{grid-template-columns:1fr;min-height:0;gap:34px;padding-top:22px}
  #after .ad-curve{display:none}
  #after .s1{margin:0 28px 0 0}#after .s2{margin:0 14px}#after .s3{margin:0 0 0 28px}
  #after .ad-step .if{width:auto;max-width:92%;margin-right:-6px}
  /* A short orange line from each card to the next, so the stack still reads as a climb. */
  #after .ad-step+.ad-step::before{content:'';position:absolute;top:-34px;left:22px;width:3px;height:34px;border-radius:3px;background:var(--mbc-orange);opacity:.7}
}

/* ---- Pricing, "Pick how much we do for you.": the B + C look (the owner, 18 October 2026, from four looks). ---- */
/* Each card is laid out like a post: our mark and the plan's name on top, the price as its picture, the rest as its caption.
   The highlighted card is navy with Four systems' glow; a recommended one adds an orange ring, never an offset shadow. On
   phones the cards swipe sideways one at a time, the next one peeking in, with story bars above them. No word changed.
   Drafts: docs/web-app/mockups/2026-10-18/. */
#pricing.pr{background:var(--paper);color:var(--mbc-navy);padding:120px 2vw}
#pricing .pr-wrap{max-width:1360px;margin:0 auto;padding:0 3vw;box-sizing:border-box}
#pricing .pr-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 32px;flex-wrap:wrap;margin-bottom:44px}
#pricing .pr-kick{font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-accent);margin-bottom:20px}
#pricing h2{font-size:clamp(44px,5.4vw,84px);line-height:.95;letter-spacing:-.045em;margin:0}
#pricing h2 .l{font-weight:300}#pricing h2 .b{font-weight:800}
#pricing .bill{display:flex;gap:2px;padding:4px;border-radius:999px;background:var(--navy-100)}
#pricing .bill button{display:flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:600;background:transparent;color:var(--navy-500)}
#pricing .bill button[aria-pressed=true]{background:var(--white);color:var(--mbc-navy);font-weight:800;box-shadow:0 2px 8px rgba(41,57,81,.16)}
#pricing .bill .save{font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--mbc-orange);color:var(--mbc-navy)}
#pricing .pips{display:none}
#pricing .pr-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
#pricing .pc{position:relative;display:flex;flex-direction:column;gap:12px;padding:16px 16px 20px;border-radius:30px;background:var(--white);border:1.5px solid var(--border-subtle);color:var(--mbc-navy);transition:transform .3s var(--ease-bounce),box-shadow .3s}
#pricing .pc .hd{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:2px 4px}
#pricing .pc .av{display:flex;width:30px;height:30px;border-radius:50%;background:var(--white);border:1.5px solid var(--border-subtle);align-items:center;justify-content:center}
#pricing .pc .nm{font-size:20px;font-weight:800;letter-spacing:-.02em}
#pricing .pc .badge{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;padding:6px 10px;border-radius:999px;background:var(--mbc-orange);color:var(--mbc-navy)}
#pricing .pc .pp{margin:0 0 4px;border-radius:22px;padding:26px 20px 20px;min-height:132px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(160deg,var(--navy-50,#EEF1F5),var(--navy-100))}
#pricing .pc .num{display:flex;align-items:baseline;gap:0 6px;white-space:nowrap}
#pricing .pc .big{font-size:clamp(40px,3.4vw,52px);font-weight:800;letter-spacing:-.04em;line-height:1}
#pricing .pc .per{font-size:15px;font-weight:600;color:var(--text-muted)}
#pricing .pc .sub{font-size:13.5px;color:var(--text-muted);margin-top:8px;min-height:19px}
#pricing .pc .bl,#pricing .pc .do,#pricing .pc .it,#pricing .pc .tm,#pricing .pc .go{padding-left:4px;padding-right:4px}
#pricing .pc .bl{font-size:16px;font-weight:700;line-height:1.35;color:var(--navy-600)}
#pricing .pc .do{font-size:14px;line-height:1.45;color:var(--text-muted);margin-top:-8px}
#pricing .pc .it{list-style:none;margin:0;padding-top:16px;padding-bottom:0;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:11px;flex:1}
#pricing .pc .it li{display:flex;gap:10px;font-size:14.5px;line-height:1.45;color:var(--navy-700)}
#pricing .pc .it li.all{font-weight:700}
#pricing .pc .ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--mbc-navy);color:var(--white);display:flex;align-items:center;justify-content:center;margin-top:1px}
#pricing .pc .tm{font-size:12.5px;line-height:1.5;color:var(--text-muted)}
#pricing .pc .note{font-size:13px;font-weight:600;color:var(--text-muted);margin-bottom:10px}
#pricing .pr-foot{font-size:14px;color:var(--text-muted);margin:28px 0 0;max-width:720px}
/* Free: the way in, quieter than the paid cards. */
#pricing .pc.free{background:transparent;border:1.5px dashed var(--border-subtle)}
#pricing .pc.free .pp{background:transparent;border:1.5px dashed var(--border-subtle)}
#pricing .pc.free .ck{background:var(--navy-100);color:var(--navy-500)}
#pricing .pc.dark{background:var(--mbc-navy);border-color:var(--mbc-navy);color:var(--white);box-shadow:0 24px 50px rgba(20,29,42,.28)}
#pricing .pc.dark .pp{background:radial-gradient(90% 80% at 100% 0%,rgba(255,165,0,.45),transparent 70%),radial-gradient(80% 80% at 0% 100%,rgba(74,91,118,1),transparent 70%),#1F2C40}
#pricing .pc.dark .bl{color:var(--white)}#pricing .pc.dark .do,#pricing .pc.dark .per,#pricing .pc.dark .sub,#pricing .pc.dark .tm,#pricing .pc.dark .note{color:var(--navy-200)}
#pricing .pc.dark .it{border-color:rgba(255,255,255,.14)}#pricing .pc.dark .it li{color:var(--navy-50)}
#pricing .pc.dark .ck{background:var(--mbc-orange);color:var(--mbc-navy)}
#pricing .pc.rec{outline:3px solid var(--mbc-orange);outline-offset:3px}
@media (hover:hover){#pricing .pc:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(41,57,81,.16)}#pricing .pc.dark:hover{box-shadow:0 28px 56px rgba(20,29,42,.36)}}
/* Everything lines up side by side (the owner, 18 October 2026): the tag sits in the price panel's top corner, not above it,
   and each card's seven parts (name, price, title, what we do, list, note, button) share the grid's rows, so a row is as tall
   as its tallest card and the prices, first ticks and buttons sit level. Phones show one card at a time and skip this. */
#pricing .pc .pp{position:relative}
#pricing .pc .pp .badge{position:absolute;top:14px;right:14px;margin:0}
/* The panels are a little taller, so the tag has room above the price. */
#pricing .pc .pp{min-height:156px}
#pricing .pc .tm:empty{display:block}
/* "/month" takes no extra height, so every price sits on the same line. */
#pricing .pc .per{line-height:1}
/* The line under the price is one height whether or not it has words. The free card's dashed panel border is matched by
   1.5px more padding on the others, so their prices sit level without a border that would show at the edge. */
#pricing .pc .sub{line-height:20px;min-height:20px}
#pricing .pc .pp{border:0;padding:27.5px 21.5px 21.5px}
#pricing .pc.free .pp{border:1.5px dashed var(--border-subtle);padding:26px 20px 20px}
/* Each card is one column no wider than itself, and the price is sized to fit it, so "$3,000/month" never pushes the panel
   past the card's padding. */
@media (min-width:701px){#pricing .pc{grid-template-columns:minmax(0,1fr)}}
#pricing .pc .big{font-size:clamp(36px,2.9vw,52px)}
@media (min-width:701px){
  #pricing .pr-grid{row-gap:16px}
  #pricing .pc{display:grid;grid-row:span 7;grid-template-rows:subgrid;row-gap:12px;align-content:start}
  #pricing .pc .it{align-self:start}
  #pricing .pc .go{align-self:end}
}
@media (max-width:1100px){#pricing .pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  /* The page's own phone rule gives every section 72px above and below; this is named more exactly so it wins. */
  section#pricing.pr:not(#top){padding:64px 10px}
  #pricing .pr-wrap{padding:0 8px}
  #pricing .pr-top{margin-bottom:28px}
  #pricing .pips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0 0 14px}
  #pricing .pips i{height:4px;border-radius:99px;background:var(--navy-100);transition:background .3s}
  #pricing .pips i.on{background:var(--mbc-orange)}
  #pricing .pr-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -18px;padding:6px 18px 12px;scroll-padding:0 18px;scrollbar-width:none}
  #pricing .pr-grid::-webkit-scrollbar{display:none}
  #pricing .pc{flex:0 0 84%;scroll-snap-align:start;padding:12px 12px 18px;border-radius:26px}
  #pricing .pc:hover{transform:none}
}

/* ---- "Questions, answered.": the Gold card look (the owner, 18 October 2026, after the A + B mix and the gold looks). ---- */
/* The page stays cream. The heading sits on a solid gold card, both lines in navy. Beside it, each question is a white message
   bubble from the visitor; the open one turns navy, and the answer appears under it as our reply in a deeper gold, with our
   mark. No word changed. Drafts: docs/web-app/mockups/2026-10-18/ (faq-yellow). */
#faq.fq{background:var(--paper);color:var(--mbc-navy);padding:120px 2vw}
#faq .fq-wrap{max-width:1360px;margin:0 auto;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px 5vw;align-items:stretch;padding:0 3vw}
#faq .fq-head{display:flex;align-items:flex-end;min-height:360px;border-radius:44px;padding:56px 44px;background:radial-gradient(70% 60% at 100% 0%,rgba(255,236,190,.8),transparent 70%),var(--mbc-orange)}
#faq h2{font-size:clamp(48px,6vw,96px);line-height:.95;letter-spacing:-.045em;margin:0;color:var(--mbc-navy)}
#faq h2 .l{font-weight:300}#faq h2 .b{font-weight:800}
#faq .fq-list{align-self:center;display:flex;flex-direction:column;gap:14px}
#faq .fq-item{display:flex;flex-direction:column;align-items:flex-end}
#faq .fq-item button{display:flex;align-items:center;gap:20px;max-width:88%;background:var(--white);border:1.5px solid var(--border-subtle);border-radius:26px 26px 8px 26px;padding:16px 16px 16px 22px;color:var(--mbc-navy);cursor:pointer;font:inherit;text-align:left;transition:transform .3s var(--ease-bounce),background .3s,border-color .3s,color .3s,box-shadow .3s}
#faq .fq-item.on button{background:var(--mbc-navy);border-color:var(--mbc-navy);color:var(--white);box-shadow:0 8px 22px rgba(20,29,42,.18)}
#faq .fq-item .q{flex:1;font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
/* The plus sign sits in a thin navy ring with no fill (the owner, 18 October 2026), so gold stays on the card and our replies. */
#faq .fq-item .pl{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:transparent;box-shadow:inset 0 0 0 1.5px var(--mbc-navy);color:var(--mbc-navy);transition:transform .35s var(--ease-bounce),background .3s}
#faq .fq-item.on .pl{transform:rotate(45deg);background:var(--white);box-shadow:none}
#faq .fq-ans{align-self:stretch;display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease-out)}
#faq .fq-item.on .fq-ans{grid-template-rows:1fr}
#faq .fq-ans>div{overflow:hidden;padding:0 24px 30px;margin:0 -24px -30px}
/* A closed answer keeps none of that room, so no part of its bubble shows between the questions. */
#faq .fq-item:not(.on) .fq-ans>div{padding-bottom:0;margin-bottom:0;visibility:hidden}
/* Room around and under the reply, so its shadow is not cut off while it opens. */
#faq .fq-ans .a{display:flex;gap:10px;align-items:flex-end;padding-top:10px;max-width:86%}
#faq .fq-ans .av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--white);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(92,55,0,.18)}
#faq .fq-ans p{margin:0;font-size:16.5px;line-height:1.6;font-weight:400;background:var(--orange-200);border-radius:24px 24px 24px 8px;padding:14px 18px;color:var(--navy-900);box-shadow:0 8px 22px rgba(92,55,0,.12)}
@media (max-width:900px){#faq .fq-wrap{grid-template-columns:1fr}#faq .fq-head{min-height:0}}
@media (max-width:700px){
  /* The page's own phone rule gives every section 72px above and below; this is named more exactly so it wins. */
  section#faq.fq:not(#top){padding:64px 10px}
  #faq .fq-wrap{padding:0 6px;gap:28px}
  #faq .fq-head{padding:36px 26px;border-radius:30px}
  #faq h2{font-size:48px}
  #faq .fq-item button{max-width:94%;padding:14px 12px 14px 18px;gap:14px}
  #faq .fq-item .q{font-size:17px}
  #faq .fq-ans .a{max-width:94%}
  /* Less room at the sides on a phone, so the reply's shadow room stays inside the screen. */
  #faq .fq-ans>div{padding-left:12px;padding-right:12px;margin-left:-12px;margin-right:-12px}
}
/* Nothing in the FAQ may make the page scroll sideways. */
#faq.fq{overflow-x:hidden;overflow-x:clip}

/* ---- The footer: the Gold call look (the owner, 18 October 2026, from four looks). ---- */
/* The call to action sits on a gold card on the cream, like the FAQ's card above it, with a navy button; the links, the
   wordmark and the closing line sit below on navy, rising with curved top corners. No word changed.
   Drafts: docs/web-app/mockups/2026-10-18/ (footer). */
footer.ft{background:var(--paper);color:var(--navy-200)}
footer.ft .ft-cta{margin:0 2vw;border-radius:56px;padding:110px 5vw 70px;display:flex;flex-direction:column;align-items:center;text-align:center;background:radial-gradient(60% 60% at 100% 0%,rgba(255,236,190,.85),transparent 70%),var(--mbc-orange)}
footer.ft h2{color:var(--mbc-navy);font-size:clamp(56px,8vw,140px);line-height:.92;letter-spacing:-.05em;margin:0}
footer.ft h2 .l{font-weight:300}footer.ft h2 .b{font-weight:800}
footer.ft .ft-mag{padding:40px;margin-top:24px}
footer.ft .ft-mag button{width:200px;height:200px;border-radius:50%;border:none;background:var(--mbc-navy);color:var(--white);font:inherit;font-size:20px;font-weight:800;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;transition:transform .25s var(--ease-out),box-shadow .3s;box-shadow:0 0 0 14px rgba(41,57,81,.14)}
footer.ft .ft-mag button:hover{box-shadow:0 0 0 22px rgba(41,57,81,.18)}
footer.ft .ft-base{margin-top:48px;background:var(--navy-900);border-radius:56px 56px 0 0}
footer.ft .ft-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding:80px 5vw 64px;font-size:15px}
footer.ft .ft-col .h{color:var(--white);font-weight:800;margin-bottom:14px}
footer.ft .ft-col a{color:inherit;text-decoration:none;display:block;width:fit-content;margin-bottom:8px;transition:color .2s,text-shadow .2s}
/* The email and the section links glow orange under the pointer, as the account icons' rings do (the owner, 18 October 2026). */
footer.ft .ft-col a:not(.ic):hover,footer.ft .ft-col a:not(.ic):focus-visible{color:var(--mbc-orange);text-shadow:0 0 14px rgba(255,165,0,.55)}
/* Six account icons, two rows of three. Named more exactly than the column's links, so their own shape wins. */
footer.ft .soc{display:grid;grid-template-columns:repeat(3,44px);gap:8px}
footer.ft .ft-col a.ic{width:44px;height:44px;margin:0;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--navy-600);display:grid;place-items:center;color:var(--white);text-decoration:none;transition:border-color .2s,transform .3s var(--ease-bounce)}
footer.ft .ft-col a.ic:hover{border-color:var(--mbc-orange);transform:translateY(-3px)}
footer.ft .ft-wordwrap{position:relative;overflow:hidden;padding:20px 0 0;cursor:crosshair}
footer.ft .ft-word{font-size:14.2vw;line-height:1;padding-bottom:1vw;letter-spacing:-.06em;white-space:nowrap;text-align:center}
footer.ft .ft-word .l{font-weight:300}footer.ft .ft-word .b{font-weight:800}
footer.ft .ft-spot{position:absolute;inset:20px 0 0;transition:opacity .3s}
footer.ft .ft-bar{display:flex;justify-content:space-between;gap:12px;padding:24px 5vw;font-size:13px;border-top:1px solid var(--navy-800)}
@media (max-width:700px){
  footer.ft .ft-cta{margin:0 10px;border-radius:34px;padding:64px 6vw 40px}
  footer.ft .ft-mag{padding:24px;margin-top:12px}
  footer.ft .ft-mag button{width:168px;height:168px;font-size:18px}
  footer.ft .ft-base{margin-top:32px;border-radius:34px 34px 0 0}
  footer.ft .ft-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px;padding:56px 6vw 48px}
  /* The email address gets its own row, so it never runs into the column beside it. */
  footer.ft .ft-links>.ft-col:first-child{grid-column:1 / -1}
  footer.ft .ft-bar{flex-direction:column;align-items:center;text-align:center;gap:6px}
}

/* ---- Hover movement for the buttons and the FAQ. ---- */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .s4-panel .cta,#report-peek button,#after a>button,#pricing [id^="tier-"] button{transition:transform .3s var(--ease-bounce),background var(--dur-fast) var(--ease-out)!important}
  .s4-panel .cta:hover,#report-peek button:hover,#after a>button:hover,#pricing [id^="tier-"] button:hover{transform:translateY(-3px)!important}
  .s4-panel .cta:active,#report-peek button:active,#after a>button:active,#pricing [id^="tier-"] button:active{transform:scale(.97)!important}
  #report-peek button svg,#after a>button svg,#pricing [id^="tier-"] button svg{transition:transform .3s var(--ease-bounce)}
  #report-peek button:hover svg,#pricing [id^="tier-"] button:hover svg{transform:translateX(5px)}
  #after a>button:hover svg{transform:translateY(4px)}

  /* The FAQ: a closed question lifts under the pointer. */
  #faq .fq-item:not(.on) button:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(41,57,81,.14)}
}

/* Paid (the owner, 20 October 2026): the report and the dashboard in one card, switching on their own, with "A, filled": a
   pill under the picture whose chosen side fills navy like a loading bar (systems.jsx, PeekSwitch). */
/* The rounded corners clip the live dashboard as they clip the picture: some browsers let a scaled page inside an iframe
   paint past a parent's rounded overflow, so the corners are cut by a clip-path on the box and on each slide. */
:is(#report-peek,.rp-peek) .rp-slides{position:relative;isolation:isolate;-webkit-clip-path:inset(0 round 20px);clip-path:inset(0 round 20px)}
:is(#report-peek,.rp-peek) .rp-slides>*{border-radius:20px}
:is(#report-peek,.rp-peek) .rp-slides>img,:is(#report-peek,.rp-peek) .rp-slides>.rp-dash{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease-out)}
:is(#report-peek,.rp-peek) .rp-slides>img{height:100%;object-fit:cover}
:is(#report-peek,.rp-peek) .rp-slides>.on{opacity:1}
:is(#report-peek,.rp-peek) .rp-dash{overflow:hidden;background:#141D2A;pointer-events:none}
:is(#report-peek,.rp-peek) .rp-dash iframe{border:0;display:block;transform-origin:0 0}
:is(#report-peek,.rp-peek) .rp-seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:12px 2px 2px;padding:4px;border-radius:999px;background:var(--paper);border:1.5px solid var(--border-subtle)}
:is(#report-peek,.rp-peek) .rp-seg button{position:relative;overflow:hidden;font:inherit;cursor:pointer;border:0;border-radius:999px;padding:11px 10px;background:transparent;color:var(--navy-500);font-size:13.5px;font-weight:700;display:flex;justify-content:center;white-space:nowrap;min-width:0}
:is(#report-peek,.rp-peek) .rp-seg button.on{background:var(--white);color:var(--mbc-navy);box-shadow:inset 0 0 0 1.5px var(--mbc-navy)}
:is(#report-peek,.rp-peek) .rp-seg button:focus-visible{outline:2px solid var(--mbc-orange);outline-offset:2px}
:is(#report-peek,.rp-peek) .rp-seg .t{display:inline-flex;align-items:center;gap:7px}
:is(#report-peek,.rp-peek) .rp-seg .pf{position:absolute;left:0;top:0;bottom:0;width:0;overflow:hidden;border-radius:999px;background:var(--mbc-navy);pointer-events:none}
:is(#report-peek,.rp-peek) .rp-seg .pf .pw{position:absolute;left:0;top:0;bottom:0;width:var(--bw,100%);display:flex;align-items:center;justify-content:center;color:#FFFFFF;white-space:nowrap}
:is(#report-peek,.rp-peek) .rp-seg .pf svg{color:var(--mbc-orange)}
:is(#report-peek,.rp-peek) .rp-seg button:not(.on) .pf{display:none}
:is(#report-peek,.rp-peek) .rp-seg .pf.run{animation:rp-grow linear both}
@keyframes rp-grow{from{width:0}to{width:100%}}
@media (max-width:420px){:is(#report-peek,.rp-peek) .rp-seg button{font-size:12.5px;padding-left:6px;padding-right:6px}:is(#report-peek,.rp-peek) .rp-seg .t{gap:5px}}
@media (prefers-reduced-motion:reduce){:is(#report-peek,.rp-peek) .rp-slides>img,:is(#report-peek,.rp-peek) .rp-slides>.rp-dash{transition:none}:is(#report-peek,.rp-peek) .rp-seg .pf.run{animation:none;width:100%}}

/* The same card on the sales link (?go=pay; draft for the owner, 20 October 2026), on the flow's navy: its heading in white
   and orange, the card as on the home page (paid.jsx, PayAhead). */
.rp-peek{margin:40px 0 4px;max-width:640px}
.rp-peek .rp-sh{font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.04em;margin:0 0 18px;color:#FFFFFF}
.rp-peek .rp-sh .l{font-weight:300}
.rp-peek .rp-sh .b{font-weight:800;background:linear-gradient(100deg,var(--mbc-orange),#FF7A00);-webkit-background-clip:text;background-clip:text;color:transparent}
/* The flow darkens the page's colours; the card keeps the home page's own. */
.rp-peek .rp-inbox{--white:#FFFFFF;--paper:#FAF9F6;--border-subtle:#E4E8EF;--navy-500:#4A5B76;--navy-400:#6B7B95;--mbc-navy:#293951;--text-strong:#293951;--text-muted:#6B7B95;color:#293951;box-shadow:0 24px 60px rgba(0,0,0,.35)}
@media (max-width:700px){.rp-peek .rp-inbox{border-radius:26px;padding:12px}.rp-peek .msg-list{grid-template-columns:1fr}}

/* The dashboard slide sits in the card as the report picture does (the owner, 21 October 2026: "it is as if it is just layered
   on top; it doesn't follow the curviness of the report"): one thin edge drawn over both slides at the same rounding; the
   moving dashboard's foot fades into the card's dark ground instead of being cut mid-card; its "Example figures" label
   sits inside the frame, centred on that fade. The control fits however narrow the card (the checkout's is). */
:is(#report-peek,.rp-peek) .rp-switch{container-type:inline-size}
:is(#report-peek,.rp-peek) .rp-slides::after{content:"";position:absolute;inset:0;z-index:3;border-radius:20px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.10)}
:is(#report-peek,.rp-peek) .rp-dash::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;pointer-events:none;background:linear-gradient(180deg,rgba(20,29,42,0) 0%,rgba(20,29,42,.75) 55%,#141D2A 100%)}
:is(#report-peek,.rp-peek) .rp-dash::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:20px;background:radial-gradient(70% 55% at 100% 0%,rgba(255,165,0,.14),transparent 70%)}
:is(#report-peek,.rp-peek) .rp-demo{position:absolute;left:50%;bottom:6%;z-index:2;transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;background:rgba(20,29,42,.88);border:1px solid rgba(255,255,255,.16);color:#FFFFFF;font-size:11px;font-weight:700;white-space:nowrap}
:is(#report-peek,.rp-peek) .rp-demo svg{color:#FFA500}
@container (max-width:340px){:is(#report-peek,.rp-peek) .rp-seg button{font-size:11.5px;padding:9px 4px}:is(#report-peek,.rp-peek) .rp-seg .t{gap:4px}:is(#report-peek,.rp-peek) .rp-seg .t svg{width:13px;height:13px}:is(#report-peek,.rp-peek) .rp-demo{font-size:9.5px;padding:4px 9px}}