/* PIB layout layer for the redesigned templates (T1 to T10).
   Visual tokens, type and components come ONLY from /brand/brand.css (Brand Designer).
   This file holds layout (grids, spacing, section order helpers) owned by UI/UX, and
   never declares :root, colors, font families or font files. Classes start with "l-". */

/* shared chrome sits on brand.css base: keep nav/footer images inline as before */
#nav-slot img,.pibf img{display:inline-block}
.l-main{overflow-x:clip}
.l-main :target{scroll-margin-top:96px}

/* grids */
.l-grid{display:grid;gap:var(--s-5)}
.l-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.l-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.l-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.l-grid--2,.l-grid--3{grid-template-columns:1fr}}

/* hero (T2: copy left, proof right; price under H1 above the button on mobile) */
.l-hero{position:relative;padding:136px 0 var(--s-8);isolation:isolate}
.l-hero::before{content:"";position:absolute;inset:-10% -10% auto auto;width:720px;height:720px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--amber-rgb),.14),transparent 70%);z-index:-1;pointer-events:none}
.l-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--s-8);align-items:center}
.l-hero .h1{margin-top:var(--s-5)}
.l-hero .lead{margin-top:var(--s-5)}
.l-hero .price{margin-top:var(--s-5);flex-wrap:wrap}
.l-hero .price__note{font-size:15px;color:var(--t2);font-family:var(--sans)}
.l-hero .btn-row{margin-top:var(--s-6)}
@media (max-width:980px){.l-hero{padding:112px 0 var(--s-7)}.l-hero__grid{grid-template-columns:minmax(0,1fr);gap:var(--s-7)}.l-hero::before{width:420px;height:420px}}
@media (max-width:480px){.l-hero .btn-row .btn{width:100%}}

/* stat panel in the hero */
.l-statpanel{display:grid;gap:var(--s-6);padding:var(--s-6)}
.l-statpanel .stat+.stat{padding-top:var(--s-6);border-top:1px solid var(--line)}
.l-statpanel .stat__num{font-size:var(--fs-stat-sm)}

/* breadcrumbs */
/* B1 (r3): 13px, muted, one line, ellipsis when it runs out of room, and at least 24px clear of the eyebrow or H1.
   width:0 + min-width:100% keeps the nowrap line from widening a grid or flex parent at 390. */
.l-crumbs{display:block;width:0;min-width:100%;margin:0 0 24px;font-size:13px;line-height:1.5;color:var(--t3)}
.l-crumbs ol{list-style:none;margin:0;padding:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-crumbs li{display:inline}
.l-crumbs li+li::before{content:"/";margin:0 8px;color:var(--t4)}
.l-crumbs a{color:inherit;text-decoration:none}.l-crumbs a:hover{color:var(--t1)}

/* answer line + pillars */
.l-answer{font-family:var(--display);font-weight:700;font-size:clamp(21px,2.2vw,30px);line-height:1.28;letter-spacing:-.02em;color:var(--t1);max-width:920px;margin:var(--s-4) 0 0;text-wrap:pretty}
.l-answer em{font-style:normal;color:var(--amber)}
.l-pillars{margin-top:var(--s-7)}
.l-pillars .card .step__n{display:block;margin-bottom:var(--s-3)}

/* fit / route */
.l-route{margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);display:grid;gap:var(--s-3)}
.l-route a{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px;align-items:baseline;text-decoration:none;font-weight:600}
.l-route a span{color:var(--t3);font-weight:400;font-size:14px}
.l-route a:hover{color:var(--amber)}
.check-list--x li::before{width:12px;height:12px;border:0;transform:none;top:.45em;background:linear-gradient(45deg,transparent 44%,var(--t4) 44% 56%,transparent 56%),linear-gradient(-45deg,transparent 44%,var(--t4) 44% 56%,transparent 56%)}
.card .check-list{margin-top:var(--s-4)}

/* two-column check list */
.l-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6)}
@media (max-width:820px){.l-cols-2{grid-template-columns:1fr}}

/* steps as cards */
.l-steps{list-style:none;margin:0;padding:0}
.l-note{margin-top:var(--s-5);padding:var(--s-4) var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);color:var(--t2);font-size:15px}
.l-note b{color:var(--t1)}

/* case cards: HTML bars with values */
.l-case{display:flex;flex-direction:column}
.l-case .card__body+.card__body{margin-top:0}
.l-case .bars{height:150px;gap:12px}
.l-case .bars>span{position:relative;min-height:4px}
.l-case .bars>span b{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);margin-bottom:6px;font-family:var(--display);font-size:15px;font-weight:800;letter-spacing:-.02em;color:var(--t1);white-space:nowrap}
.l-case .bars>span.is-proj{background:repeating-linear-gradient(135deg,rgba(var(--amber-rgb),.9) 0 7px,rgba(var(--amber-rgb),.5) 7px 14px)}
.l-case .case-card__chart{padding-top:40px}
.l-barl{display:flex;gap:12px;margin-top:10px;font-family:var(--sans);font-size:13px;line-height:1.3;color:var(--t3);text-align:center}
.l-barl span{flex:1}
.l-case .card__foot{display:block;margin-top:auto}
.l-case .card__foot b{color:var(--amber)}

/* logo row */
.l-logos{list-style:none;margin:0;padding-inline:0}
.l-logos li{display:flex}
.l-logos .lgm{max-width:150px}

/* pricing */
.l-price .h3{margin-top:var(--s-6)}
.l-price .check-list{margin:var(--s-4) 0 var(--s-6)}
.l-price .btn{margin-top:auto}
.l-price{display:flex;flex-direction:column}
.l-also{margin-top:auto;padding-top:var(--s-5);font-size:14px;color:var(--t3)}
.l-also a{color:var(--t1);text-decoration:underline;text-decoration-color:var(--amber);text-underline-offset:3px}

/* FAQ width */
.l-narrow{max-width:900px}
.faq{border-top:1px solid var(--line)}

/* cta band spacing */
.cta-band .lead{margin-inline:auto}
@media (max-width:720px){.cta-band{padding:var(--s-7) var(--s-5)}}

/* reveal (content visible with JS off) */
.b-js .l-rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.b-js .l-rv.is-in{opacity:1;transform:none}

/* ==========================================================================
   Redesign v2 graphic components G1 to G10 (SPEC.md section 1). Additive only.
   Colors come from brand.css tokens. Icons: inline SVG, viewBox 0 0 24 24,
   stroke-width 1.75, round caps, stroke="currentColor". Markup for each block is
   in the comment above it. React wrappers: src/components/brand/Sections.tsx.
   ========================================================================== */
.l-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* G1 step diagram
   <ol class="l-flow" style="--n:3"><li><span class="l-flow__node">01</span>
     <div class="l-flow__body"><h3 class="h4">Title</h3><p class="small">One line</p></div></li>...</ol>
   Node can hold a number or an icon svg. .l-flow--v is always vertical. */
.l-flow{--node:44px;--gap:var(--s-6);list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:var(--gap)}
.l-flow>li{position:relative;display:grid;align-content:start;gap:var(--s-4)}
.l-flow__node{width:var(--node);height:var(--node);border-radius:50%;border:1.5px solid var(--amber);display:grid;place-items:center;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:0;color:var(--amber);background:var(--cocoa);position:relative;z-index:1}
.surface-rise .l-flow__node{background:var(--cocoa-rise)}
.l-flow__node svg{width:20px;height:20px}
.l-flow>li:last-child .l-flow__node{background:var(--amber);color:var(--on-amber)}
.l-flow__body{display:grid;gap:6px}
.l-flow__body .small{margin:0}
.l-flow>li:not(:last-child)::after{content:"";position:absolute;top:calc(var(--node)/2);left:calc(var(--node) + 10px);right:calc(-1 * var(--gap) + 10px);height:1px;background:var(--rule)}
.l-flow>li:not(:last-child)::before{content:"";position:absolute;top:calc(var(--node)/2 - 4px);right:calc(-1 * var(--gap) + 10px);border:4px solid transparent;border-left:6px solid var(--rule);border-right:0}
@media (max-width:720px){.l-flow:not(.l-flow--h){grid-template-columns:1fr}}
@media (max-width:720px){
  .l-flow:not(.l-flow--h)>li{grid-template-columns:var(--node) minmax(0,1fr);column-gap:var(--s-4)}
  .l-flow:not(.l-flow--h)>li:not(:last-child)::after{top:calc(var(--node) + 8px);bottom:calc(-1 * var(--gap) + 8px);left:calc(var(--node)/2);right:auto;width:1px;height:auto}
  .l-flow:not(.l-flow--h)>li:not(:last-child)::before{top:auto;bottom:calc(-1 * var(--gap) + 8px);right:auto;left:calc(var(--node)/2 - 4px);border:4px solid transparent;border-top:6px solid var(--rule);border-bottom:0}
}
.l-flow--v{grid-template-columns:1fr}
.l-flow--v>li{grid-template-columns:var(--node) minmax(0,1fr);column-gap:var(--s-4)}
.l-flow--v>li:not(:last-child)::after{top:calc(var(--node) + 8px);bottom:calc(-1 * var(--gap) + 8px);left:calc(var(--node)/2);right:auto;width:1px;height:auto}
.l-flow--v>li:not(:last-child)::before{top:auto;bottom:calc(-1 * var(--gap) + 8px);right:auto;left:calc(var(--node)/2 - 4px);border:4px solid transparent;border-top:6px solid var(--rule);border-bottom:0}

/* G2 platform icon row
   <ul class="l-icons"><li><span class="l-icons__tile l-icons__tile--fb"><svg .../></span>
     <span class="l-icons__label">Facebook</span></li>...</ul>
   Tile modifiers --fb --gd --syn tint the glyph only; default glyph is amber. */
.l-icons{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-6)}
.l-icons>li{display:grid;justify-items:center;gap:10px;min-width:72px}
.l-icons__tile{--c:var(--amber);width:56px;height:56px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--cocoa-soft);border:1px solid var(--line);color:var(--c)}
.l-icons__tile svg{width:26px;height:26px}
.l-icons__tile--fb{--c:var(--ch-fb)}.l-icons__tile--gd{--c:var(--ch-gd)}.l-icons__tile--syn{--c:var(--ch-syn)}
.l-icons__label{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--t3);text-align:center}

/* G3 icon card
   <div class="card l-icard"><span class="l-icard__icon"><svg .../></span><span class="l-icard__n">01</span>
     <h3 class="h4">Title</h3><p class="card__body">One line.</p><p class="small">Longer detail.</p></div> */
.l-icard{position:relative;display:flex;flex-direction:column;gap:var(--s-3)}
.l-icard__icon{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--cocoa-soft);color:var(--amber);margin-bottom:var(--s-2)}
.l-icard__icon svg{width:24px;height:24px}
/* Kicker numbers and tags inside cards are hidden by default (designer rule: the icon and title carry the card) */
.l-icard__n{display:none}
.l-icard .card__body,.l-icard .small{margin:0}

/* G4 stat band (once per page)
   <div class="stat-row stat-row--ruled l-statband"><div class="stat"><span class="stat__num">300M<span class="u">+</span></span>
     <span class="stat__label">Label</span></div>...</div> */
.l-statband{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--s-6);align-items:start}
.l-statband .stat__num{font-size:var(--fs-stat-sm)}
@media (max-width:720px){.l-statband{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}.l-statband.stat-row--ruled>.stat{padding-left:var(--s-4)}}

/* G5 comparison table (columns become cards under 720px)
   <div class="l-compare" style="--cols:3;--rows:6">
     <div class="l-compare__col l-compare__col--labels" aria-hidden="true"><div class="l-compare__head"></div>
       <div class="l-compare__cell">Row label</div>...</div>
     <div class="l-compare__col l-compare__col--feat"><div class="l-compare__head"><span class="chip chip--outline">Most chosen</span>
       <b>Name</b><span>$4,000</span></div>
       <div class="l-compare__cell"><span class="l-compare__l">Row label</span><span class="l-yes" role="img" aria-label="Included"></span></div>
       (or <span class="l-no" role="img" aria-label="Not included"></span>, or <span class="l-compare__v">1 hour</span>)</div>...</div> */
.l-compare{display:grid;grid-template-columns:minmax(0,1.25fr) repeat(var(--cols,3),minmax(0,1fr));grid-template-rows:auto repeat(var(--rows,5),auto);border:1px solid var(--line);border-radius:var(--r-card);background:var(--cocoa);padding:0 var(--s-3) var(--s-4)}
.l-compare__col{display:grid;grid-row:1 / span calc(var(--rows,5) + 1);grid-template-rows:subgrid;position:relative}
.l-compare__head{display:grid;align-content:end;justify-items:center;gap:4px;padding:var(--s-6) var(--s-3) var(--s-4);text-align:center}
.l-compare__head b{font-family:var(--display);font-size:17px;font-weight:800;letter-spacing:-.01em;line-height:1.2;color:var(--t1)}
.l-compare__head>span:not(.chip){font-family:var(--display);font-size:22px;font-weight:900;letter-spacing:-.03em;color:var(--t1)}
.l-compare__head .chip{height:28px;font-size:13px;padding:0 12px;margin-bottom:6px}
.l-compare__cell{display:flex;align-items:center;justify-content:center;gap:var(--s-3);padding:14px var(--s-3);border-top:1px solid var(--line);text-align:center;font-size:15px;color:var(--t2)}
.l-compare__col--labels .l-compare__cell{justify-content:flex-start;text-align:left;font-weight:600;color:var(--t1)}
/* Featured column closes at the bottom instead of running into the table edge (cut-off look, Oren r1). */
.l-compare__col--feat{background:rgba(var(--amber-rgb),.05);border-inline:1px solid var(--amber);border-bottom:1px solid var(--amber);border-radius:0 0 12px 12px}
.l-compare__col--feat::before{content:"";position:absolute;inset:0 -1px auto;height:3px;background:var(--amber);border-radius:2px 2px 0 0}
.l-compare__l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.l-compare__v{font-weight:700;color:var(--t1)}
.l-yes{width:20px;height:20px;flex:none;background:var(--amber);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat}
.l-no{width:14px;height:2px;flex:none;border-radius:2px;background:var(--t4)}
@media (max-width:720px){
  .l-compare{grid-template-columns:1fr;grid-template-rows:none;gap:var(--s-4);border:0;background:none;padding:0}
  .l-compare__col{grid-row:auto;grid-template-rows:none;background:var(--cocoa-rise);border:1px solid var(--line);border-radius:var(--r-card);padding:0 var(--s-5) var(--s-3)}
  .l-compare__col--labels{display:none}
  .l-compare__col--feat{border-color:var(--amber);background:var(--cocoa-rise)}
  .l-compare__col--feat::before{inset:-1px 18px auto}
  .l-compare__head{justify-items:start;text-align:left;padding:var(--s-5) 0 var(--s-3)}
  .l-compare__cell{justify-content:space-between;text-align:right;padding:12px 0}
  .l-compare__l{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;text-align:left;color:var(--t2)}
}

/* G6 timeline with a scale bar
   <div class="l-timeline" style="--n:4"><ol class="l-timeline__nodes"><li><span class="l-timeline__dot"></span>
     <span class="l-timeline__when">Day 1</span><h3 class="h4">Title</h3><p class="small">One line</p></li>...</ol>
     <div class="l-timeline__scale"><span style="--w:1">Week 1</span><span style="--w:3">Weeks 2 to 4</span></div></div>
   The scale is optional; --w sets each segment's share. Vertical under 720px (scale hidden). */
.l-timeline{position:relative}
.l-timeline__nodes{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--s-5);position:relative}
.l-timeline__nodes::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:linear-gradient(90deg,var(--amber),var(--rule))}
.l-timeline__nodes>li{position:relative;display:grid;align-content:start;gap:8px;padding-top:var(--s-6)}
.l-timeline__dot{position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:var(--cocoa);border:1.5px solid var(--amber)}
.surface-rise .l-timeline__dot{background:var(--cocoa-rise)}
.l-timeline__nodes>li:last-child .l-timeline__dot{background:var(--amber)}
.l-timeline__when{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--amber)}
.l-timeline__nodes .small,.l-timeline__nodes .h4{margin:0}
.l-timeline__scale{display:flex;gap:3px;margin-top:var(--s-6)}
.l-timeline__scale span{flex:var(--w,1) 1 0;min-width:0;padding-top:10px;border-top:4px solid rgba(var(--amber-rgb),.35);font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.l-timeline__scale span:last-child{border-top-color:var(--amber)}
@media (max-width:720px){
  .l-timeline__nodes{grid-template-columns:1fr;gap:var(--s-5)}
  .l-timeline__nodes::before{left:7px;right:auto;top:8px;bottom:8px;width:1px;height:auto;background:linear-gradient(180deg,var(--amber),var(--rule))}
  .l-timeline__nodes>li{padding:0 0 0 var(--s-6)}
  .l-timeline__dot{top:2px}
  .l-timeline__scale{display:none}
}

/* G7 pull-quote (existing copy only, no person names)
   <figure class="l-quote"><blockquote><p>Quote.</p></blockquote><figcaption>Source line</figcaption></figure> */
.l-quote{margin:0;padding-left:var(--s-6);border-left:3px solid var(--amber)}
.l-quote blockquote{margin:0}
.l-quote p{margin:0;font-family:var(--display);font-weight:700;font-size:clamp(24px,2.6vw,36px);line-height:1.18;letter-spacing:-.025em;color:var(--t1);text-wrap:balance}
.l-quote figcaption{margin-top:var(--s-4);font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--t3)}
@media (max-width:720px){.l-quote{padding-left:var(--s-5)}}

/* G8 50/50 split bar
   <div class="l-split" role="img" aria-label="50/50 revenue share"><div class="l-split__bar">
     <span class="l-split__a" style="--v:50%"></span><span class="l-split__b"></span></div>
     <div class="l-split__labels"><span><b>You</b> 50</span><span><b>PIB</b> 50</span></div></div> */
.l-split{display:grid;gap:10px}
.l-split__bar{display:flex;height:14px;gap:3px;border-radius:var(--r-pill);overflow:hidden}
.l-split__a{flex:0 0 var(--v,50%);background:var(--chart-hi)}
.l-split__b{flex:1;background:var(--rule)}
.l-split__labels{display:flex;justify-content:space-between;font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--t3)}
.l-split__labels b{color:var(--t1);font-weight:600;margin-right:6px}

/* G9 segmented score bar (bands or weights across 0 to 100)
   <div class="l-score"><div class="l-score__bar" role="img" aria-label="...">
     <span style="--w:25;--o:1"></span><span style="--w:20;--o:.8"></span>...</div>
     <div class="l-score__axis"><span>0</span><span>100</span></div>
     <ol class="l-score__key"><li style="--o:1"><b>25</b> Label</li>...</ol></div> */
.l-score{display:grid;gap:10px}
.l-score__bar{display:flex;gap:3px;height:18px;border-radius:var(--r-pill);overflow:hidden}
.l-score__bar span{flex:var(--w) 1 0;background:rgba(var(--amber-rgb),var(--o,1))}
.l-score__axis{display:flex;justify-content:space-between;font-family:var(--sans);font-size:13px;letter-spacing:0;color:var(--t3)}
.l-score__key{list-style:none;margin:var(--s-3) 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px var(--s-6)}
.l-score__key li{display:flex;align-items:baseline;gap:10px;font-size:14px;color:var(--t2)}
.l-score__key li::before{content:"";width:10px;height:10px;border-radius:3px;flex:none;background:rgba(var(--amber-rgb),var(--o,1));transform:translateY(1px)}
.l-score__key b{font-family:var(--display);font-weight:800;color:var(--t1);min-width:2ch}

/* G10 CSS-only UI mock: document, chat or dashboard frame (illustrative, no invented numbers)
   <div class="l-mock" aria-hidden="true"><div class="l-mock__bar"><i></i><i></i><i></i><span>Title</span></div>
     <div class="l-mock__body">
       doc:  <div class="l-mock__cover"><small>Eyebrow</small><b>Document title</b></div>
             <ol class="l-mock__tabs"><li><b>01</b>Section label</li>...</ol>
       chat: <p class="l-mock__msg">Text</p><p class="l-mock__msg l-mock__msg--me">Text</p>
       any:  <i class="l-mock__line" style="--w:70%"></i>
     </div></div> */
.l-mock{background:var(--cocoa-rise);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.l-mock__bar{display:flex;align-items:center;gap:6px;padding:12px var(--s-4);border-bottom:1px solid var(--line);background:var(--cocoa)}
.l-mock__bar i{width:8px;height:8px;border-radius:50%;background:var(--cocoa-soft)}
.l-mock__bar span{margin-left:auto;font-family:var(--sans);font-size:13px;letter-spacing:0;text-transform:none;color:var(--t3)}
.l-mock__body{display:grid;gap:var(--s-4);padding:var(--s-5)}
.l-mock__cover{display:grid;gap:6px;padding:var(--s-5);border-radius:var(--r-md);background:linear-gradient(140deg,rgba(var(--amber-rgb),.22),rgba(var(--amber-rgb),.04) 60%),var(--cocoa);border:1px solid rgba(var(--amber-rgb),.3)}
.l-mock__cover small{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--amber)}
.l-mock__cover b{font-family:var(--display);font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--t1)}
.l-mock__tabs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.l-mock__tabs li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-sm);background:var(--cocoa);border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--t1)}
.l-mock__tabs li b{font-family:var(--sans);font-size:13px;font-weight:700;color:var(--amber);letter-spacing:0}
.l-mock__tabs li::after{content:"";margin-left:auto;width:min(28%,80px);height:5px;border-radius:3px;background:var(--cocoa-soft)}
.l-mock__line{display:block;height:6px;border-radius:3px;background:var(--cocoa-soft);width:var(--w,80%)}
.l-mock__msg{margin:0;max-width:85%;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--cocoa-soft);font-size:14px;line-height:1.45;color:var(--t1)}
.l-mock__msg--me{justify-self:end;border-radius:14px 14px 4px 14px;background:rgba(var(--amber-rgb),.16)}

/* Hero stat panel modifiers (opt-in, additive). Markup:
   <div class="card l-statpanel l-statpanel--plain l-statpanel--row"><div class="stat"><span class="stat__num">$0</span>
     <span class="stat__label">One-line label</span><span class="stat__short" aria-hidden="true">Short</span></div>...</div>
   --plain: labels in body sans 14px at t2 (4.5:1+), mono stays for eyebrows only.
   --row: under 720px the panel collapses to one row of 3 stats with the short labels; extra children span the row. */
.stat__short{display:none}
.l-statpanel--plain .stat__label{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.45;color:var(--t2)}
@media (max-width:720px){
  .l-statpanel--row{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-5) 0;padding:var(--s-5) var(--s-2)}
  .l-statpanel--row .stat{align-items:center;text-align:center;gap:6px;padding:0 var(--s-2)}
  .l-statpanel--row .stat+.stat{padding-top:0;border-top:0;border-left:1px solid var(--line)}
  .l-statpanel--row .stat__num{font-size:32px}
  .l-statpanel--row .stat__label{display:none}
  .l-statpanel--row .stat__short{display:block;font-family:var(--sans);font-size:13px;font-weight:500;line-height:1.3;color:var(--t2)}
  .l-statpanel--row>:not(.stat){grid-column:1 / -1;margin-inline:var(--s-3)}
}

/* ---------- Shared label defaults (designer rule 3) ----------
   On every page that loads this file: labels are body sans, 13px minimum, no uppercase, t3 (4.5:1+ on cocoa
   and cocoa-rise; t4 fails). True section eyebrows are the one exception: 12px minimum, mono uppercase allowed. */
.eyebrow{font-size:max(12px,var(--fs-eyebrow))}
.case-card__source{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--t3)}
.price__from,.step__n{font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none}
.stat__label{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;line-height:1.4}
main .chip{font-family:var(--sans);font-size:13px}

/* Pages whose first section sits under the fixed nav without an l-hero (post-purchase onboarding forms). Put on <main>. */
.pib-fixed-nav-offset>section{padding-top:clamp(112px,12vw,152px)}