/* ab-fix · the consistency pass for case-studies-v2, pricing-v2, resources-v2, about, demo-v2 (28 Sep 2026).
   Loaded after each page's own CSS and before ab-chrome. Every value is web.md §1's (revised 28 Sep),
   i.e. milo-v2 as measured. This is a stopgap for the per-page builds: each page's source should take
   these values when it is next rebuilt, and this file then shrinks to nothing. */

/* ── 1 · tokens: no monospace, radii 12/16, (pricing scopes its tokens on .ab-pricing) ── */
:root,.ab-pricing{
  --mono:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --r-plate:16px; --r-chip:12px;
  --abx-glass-bg:linear-gradient(180deg,rgba(255,255,255,.97) 0%,rgba(255,255,255,.92) 100%);
  --abx-glass-fx:blur(30px) saturate(1.35);
  --abx-glass-sh:inset 0 1px 0 rgba(255,255,255,.98),inset 0 -1px 0 rgba(35,27,16,.05),0 14px 40px rgba(35,27,16,.12);
}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif}   /* pricing inherited the host's Archivo */

/* ── 2 · labels: Inter, tracked for Inter (+.08em), not for a monospace (+.12em) ── */
.cap,.eb,.eyebrow,.lbl:where(.ab-pricing *),.hero-backed,.hero-trust,.snum,.tier-flag,.swap-head,.cred-head,
.ab-pricing .tbl thead th,.ab-pricing .tbl tr.grp th,.card-kind,.card-date,.card-cta,.bk-open,.bk-n:where(.tools *),.bk-k,
.bar .count,.art-chip,.art-meta,.bk-imp,.bk-f{letter-spacing:.08em}
.ab-pricing .cap,.ab-pricing .tier-flag,.ab-pricing .swap-head,.ab-pricing .cred-head,.ab-pricing .lbl{letter-spacing:.08em;font-size:13px}
.eyebrow,.cap{font-size:13px}
.snum{font-weight:500}

/* ── 3 · headings: every heading Doppio 500; one hero size; one h2 size ── */
h1,h2,.h1,.h2{font-weight:500}
body h1{font-size:clamp(38px,4.45vw,64px);line-height:1.12;letter-spacing:-.022em}
body h2{letter-spacing:-.024em}
.ab-pricing h1{font:500 clamp(38px,4.45vw,64px)/1.12 var(--dop);letter-spacing:-.022em}
.head h1.h1,.head h1{font-size:clamp(38px,4.45vw,64px);line-height:1.12;max-width:18ch}
main > section h2:not(.shelf-claim):not(.form-title):not(.hero-mission):not(.build-card h2):not(.close-card h2),.sec h2,.h2:not(.feat h2){font-size:clamp(34px,3.62vw,52px);line-height:1.08}
.close-card h2,.close h2{font-weight:500}
.hero-mission{font-weight:500}
.summary,.ab-pricing .faq summary{font-weight:500}
@media (max-width:767px){body h1,.ab-pricing h1,.head h1{font-size:38px;line-height:1.12}}

/* ── 4 · voice registers: ledes and statements in Inter, never Doppio 300 ── */
.ab-pricing .lede,.letter-lede,.hero-lede,.why-p,.art-lede{font:400 19px/1.5 'Inter',-apple-system,sans-serif;letter-spacing:0;color:rgba(35,27,16,.74)}
.hero-lede{color:#231B10}
.quote-lead p{font:400 clamp(21px,2vw,29px)/1.52 'Inter',sans-serif;letter-spacing:-.011em}
@media (max-width:767px){.ab-pricing .lede,.letter-lede,.hero-lede,.why-p,.art-lede{font-size:17px}}

/* ── 5 · the proof band: orange Doppio 400 at 58, every page (about ran blue) ── */
.figures .fig,.proof b,.proof .fig{font:400 clamp(40px,4vw,58px)/1 var(--dop);letter-spacing:-.02em;color:#FC401F;font-variant-numeric:tabular-nums}
.ab-pricing .credits .fig{font:400 clamp(40px,4vw,58px)/1 var(--dop)}   /* credit amounts keep blue: a different role */
/* metric labels: Inter at full ink, sentence case (about set them as uppercase mono captions) */
.figures .lbl,.proof span:not(.src):not(.fig){font:400 16.5px/1.35 'Inter',sans-serif;letter-spacing:0;text-transform:none;color:#231B10;max-width:14ch}
/* card numerals: ink Doppio 400 44 */
.mnum,.bk-n b{font:400 44px/1 var(--dop);letter-spacing:-.025em;color:#231B10}
.bk-n span{font:400 15px/1.35 'Inter',sans-serif;letter-spacing:0;color:#231B10}

/* ── 6 · buttons: milo-v2's box (Inter 500 14, 42 tall, 0 22) ── */
.btn{height:42px;padding:0 22px;font-size:14px;line-height:1;font-weight:500}
@media (max-width:767px){.btn{height:48px;font-size:15px}}

/* ── 7 · chips: milo-v2's (Inter 13, radius 12, hairline; selected = ink) ── */
.chip{border-radius:12px;font:400 13px/1 'Inter',sans-serif;letter-spacing:0;text-transform:none;height:36px;padding:0 14px;border:1px solid rgba(35,27,16,.14);color:#231B10;background:rgba(252,251,249,.97)}
.chip b,.chip .n{font:400 13px/1 'Inter',sans-serif;letter-spacing:0}
.chip[aria-pressed="true"]{background:#231B10;border-color:#231B10;color:#FAF8F5;box-shadow:none}
.chip[aria-pressed="true"] b,.chip[aria-pressed="true"] .n{color:rgba(250,248,245,.7);opacity:1}

/* ── 8 · the one glass (milo-v2's composer body with cofounder's rim) ── */
.glass,.ab-pricing .close-panel{background:var(--abx-glass-bg);-webkit-backdrop-filter:var(--abx-glass-fx);backdrop-filter:var(--abx-glass-fx);border:1px solid rgba(255,255,255,.6);box-shadow:var(--abx-glass-sh)}
.hero-card.glass,.close-card.glass,.form.glass{border-radius:16px}

/* ── 9 · surfaces: no 40 radius, no black shadows, no white grounds ── */
.build-plate,.ab-pricing .close-card{border-radius:16px}
section.hero{border-radius:0}
.ab-pricing .credits{background:#F0EBE2}
.bk-in{background:#FCFBF9;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(35,27,16,.10),0 10px 30px rgba(35,27,16,.10)}
.bk-face{background:#FCFBF9}
.wall-i{background:#FCFBF9}
.bk-gb{-webkit-backdrop-filter:none;backdrop-filter:none}          /* the tray blurred the book's own footer into a smear */
.bk-in,.bk-read i{transition-timing-function:cubic-bezier(.16,1,.3,1)}
.bk-read i{font:500 15px/1.4 'Inter',sans-serif;letter-spacing:0}
.form input{border-radius:12px}
.form label .cap,.form .cap{font:500 14px/1.3 'Inter',sans-serif;letter-spacing:0;text-transform:none;color:#231B10}

/* ── 10 · imagery: graded into the milo-v2 key (luma ≥ 190, colourfulness ≤ 25, measured) until the
        Higgsfield replacements land (fix/HIGGSFIELD-PROMPTS.md) ── */
/* heroes and closes: milo-v2's method — a cream veil over the sky, the meadow left alive — not a
   blanket desaturation, which read grey and faded */
.hero-plate:has(img)::after,section.hero[data-plate]::after,section.close[data-plate]::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(250,248,245,.74) 0%,rgba(250,248,245,.62) 36%,rgba(250,248,245,.30) 58%,rgba(250,248,245,.06) 76%,rgba(250,248,245,0) 90%)}
section.hero[data-plate]::after,section.close[data-plate]::after{z-index:0}
section.close[data-plate]::after{background:linear-gradient(180deg,rgba(250,248,245,.66) 0%,rgba(250,248,245,.48) 40%,rgba(250,248,245,.30) 70%,rgba(250,248,245,.22) 100%)}




/* ── 11 · rhythm: /demo's 48px section bottoms made the tightest junctions on the site ── */
.sec{padding-bottom:96px}
@media (max-width:767px){.sec{padding-bottom:64px}}
.ab-pricing .fold{padding-top:120px}
@media (max-width:767px){.ab-pricing .fold{padding-top:96px}}

/* ── 12 · about: one primary action (the page had two outlines and none) ── */
/* scoped to /about's close (.close-in): unscoped, it also promoted /pricing's Starter button — found 28 Sep */
.close .close-in > a.btn-secondary[href*="apps.shopify.com"]{background:#0033A0;border-color:#0033A0;color:#fff}
.close .close-in > a.btn-secondary[href*="apps.shopify.com"]:hover{background:#062265;border-color:#062265}

/* ── 13 · case studies: named spines (fix.js adds .wall-name), the placeholder bars go ── */
.wall-i.is-named::before,.wall-i.is-named::after{display:none}
.wall-name{position:absolute;left:50%;top:14px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;
  font:500 12px/1 var(--dop);letter-spacing:.01em;color:rgba(35,27,16,.74);white-space:nowrap;max-height:calc(100% - 28px);overflow:hidden;pointer-events:none}
@media (max-width:767px){.wall-name{display:none}.wall-i.is-named::before,.wall-i.is-named::after{display:block}}
.bk:hover 

/* ── 14 · resources: the folder card, finished — a sliver of photo at rest, pulled (not lifted) on
        hover, milo-v2's image reward. Desktop only; phone keeps its inline thumbnail. ── */
@media (min-width:768px){
  .card-peek{aspect-ratio:2.2;transform:translateX(-50%) translateY(-16px);transition:transform .32s cubic-bezier(.16,1,.3,1),box-shadow .32s cubic-bezier(.16,1,.3,1)}
  .card-peek img{filter:saturate(.62) contrast(.99) brightness(1.02);transition:filter .45s cubic-bezier(.16,1,.3,1)}
  .card:hover .card-peek,.card:focus-visible .card-peek{transform:translateX(-50%) translateY(calc(-100% + 22px)) rotate(-1.5deg);box-shadow:0 20px 56px rgba(35,27,16,.13)}
  .card:hover .card-peek img{filter:none}
}
@media (prefers-reduced-motion:reduce){.card-peek,.bk-in{transition:none}}

/* ── 15 · second pass (found on the render) ── */
.ab-pricing .btn{height:42px;padding:0 22px;font-size:14px;line-height:1}
@media (max-width:767px){.ab-pricing .btn{height:48px;font-size:15px}}
.ab-pricing .figures .fig{color:#0033A0}                    /* credit amounts, not the proof band */
.story dt,.sheet-stats dt{font-weight:400;color:#231B10}     /* card numerals are ink */

/* ══ round 2 · Vishal's review, 28 Sep ═════════════════════════════════════════════════ */

/* pricing · "How credits work" on white (his call); the three tiers one height; one primary —
   the recommended tier's. The other two tiers take the secondary box. */
.ab-pricing .credits{background:#FFFFFF}
.ab-pricing .tier-grid{align-items:stretch}
.ab-pricing .tier:not(.tier-rec) .btn-primary{background:rgba(250,248,245,.6);color:#231B10;box-shadow:inset 0 0 0 1px rgba(35,27,16,.16)}
.ab-pricing .tier:not(.tier-rec) .btn-primary:hover{background:#F0EBE2}

/* case studies · the first fold carries ONE action (the nav already holds Book a demo · Try Milo) */
.hero .hero-cta .btn-secondary{display:none}
.hero .hero-cta .btn-primary{background:rgba(252,251,249,.9);color:#231B10;box-shadow:inset 0 0 0 1px rgba(35,27,16,.16)}
.hero .hero-cta .btn-primary:hover{background:#FFFFFF}

/* case studies · the shelf is the section; each category is a sub-shelf inside it: a quiet label,
   a claim one register down (Doppio 500 21), a hairline, and 64 between shelves instead of 96 */
.lib .shelf{margin-top:64px;padding-top:40px;border-top:1px solid rgba(35,27,16,.09)}
.lib .shelf-h .eyebrow{color:rgba(35,27,16,.69);font-size:12px}
.lib .shelf-h .eyebrow:first-child{color:#231B10}
.lib .shelf-claim{font:500 21px/1.3 var(--dop);letter-spacing:-.012em;margin-top:8px}
@media (max-width:767px){.lib .shelf{margin-top:40px;padding-top:32px}.lib .shelf-claim{font-size:19px}}

/* case studies · the spine wall runs as one continuous shelf (the cluster gaps read as missing books) */
.wall-i.first{margin-left:0}

/* case studies · books, not boxes: a hinged spine, a page block at the fore-edge and tail, a cover
   with a faint sheen, and the book's own cast shadow. White stays white. */
.bk-in{border-radius:3px 10px 10px 3px;
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(35,27,16,.09),
    2px 2px 0 -1px #F7F4EE,2px 2px 0 0 rgba(35,27,16,.10),
    4px 4px 0 -1px #F2EEE6,4px 4px 0 0 rgba(35,27,16,.09),
    6px 6px 0 -1px #EDE8DF,6px 6px 0 0 rgba(35,27,16,.08),
    12px 18px 30px rgba(35,27,16,.14)}
.bk-spine{width:20px;flex:0 0 20px;background:linear-gradient(90deg,#E9E4DA 0%,#F7F4EE 22%,#FFFFFF 44%,#E2DCD0 60%,#F4F1EA 68%,#FBFAF7 100%);box-shadow:inset -1px 0 0 rgba(35,27,16,.07)}
.bk-face{background:linear-gradient(100deg,#FFFFFF 0%,#FCFBF9 55%,#F7F5F0 100%)}
.bk:hover .bk-in{box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(35,27,16,.09),
    2px 2px 0 -1px #F7F4EE,2px 2px 0 0 rgba(35,27,16,.10),4px 4px 0 -1px #F2EEE6,4px 4px 0 0 rgba(35,27,16,.09),
    6px 6px 0 -1px #EDE8DF,6px 6px 0 0 rgba(35,27,16,.08),16px 30px 48px rgba(35,27,16,.18)}
.bk-in{transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1)}
.wall-i{border-radius:2px 3px 3px 2px;background:linear-gradient(90deg,#EFEBE3 0%,#FFFFFF 30%,#FCFBF9 70%,#F1EDE5 100%)}

/* about · the first fold fits the screen: the plate is exactly one viewport, and the mission card
   sits inside it at the foot of the fold instead of scrolling past its own image */
section.hero:has(.hero-title){aspect-ratio:auto;height:100svh;min-height:640px;max-height:1000px}
section.hero:has(.hero-title) .hero-card{position:relative;top:auto;margin-top:auto}
@media (max-width:767px){section.hero:has(.hero-title){height:auto;min-height:100svh}}

/* demo · the close is an inset plate, the same card-with-margins as /about's "Come build" and
   /pricing's close — not a full-bleed band */
section.close[data-plate]{width:calc(100% - 80px);max-width:1200px;margin:0 auto 112px;border-radius:16px}
@media (max-width:767px){section.close[data-plate]{width:calc(100% - 48px);margin-bottom:64px}}

/* resources · Ask Milo: milo-v2's action (no ↑ disc — that glyph came from web.md's C4 spec, not
   from milo-v2), the prompt set in Doppio and typed, prompt chips under it, no "One prompt" label */
.ask-go{padding:0 22px}
.ask-go .disc{display:none}
.close .sec-head > .cap.mute{display:none}
.ask-prompt{font:400 clamp(22px,2.2vw,27px)/1.3 var(--dop);letter-spacing:-.012em;color:#231B10;min-height:2.6em}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 28px 20px}
.ask-chip{height:36px;padding:0 14px;border-radius:12px;border:1px solid rgba(35,27,16,.14);background:rgba(252,251,249,.97);
  font:400 13px/1 'Inter',sans-serif;color:#231B10;cursor:pointer;transition:border-color .2s cubic-bezier(.16,1,.3,1),background .2s}
.ask-chip:hover{border-color:#231B10}
.ask-chip[aria-pressed="true"]{background:#231B10;border-color:#231B10;color:#FAF8F5}
.close .sec-head{align-items:flex-end}
.close .sec-head .ab-milo{width:112px;margin:0 0 0 auto}
@media (max-width:767px){.ask-chips{padding:0 20px 16px}.close .sec-head .ab-milo{width:80px}}

/* resources · Ask Milo fills the column instead of stopping at 860 */
.close .ask{max-width:none}
.close .sec-head .ab-milo{width:120px}

/* the five replaced plates: the old files never paint (fix.js swaps the src before first paint).
   visibility, not opacity, so /about's own day/night opacity switch stays in charge. */
img[src*="about-hero-meadow"],img[src*="about-build-meadow"],img[src*="demo-hero-sky"],img[src*="demo-close-field"],img[src*="pr3-close-field"],img[src*="pr2-T"],img[src*="cs2-"]{visibility:hidden}

/* case-study covers (new, bright): milo-v2's card treatment — muted at rest, full colour on hover */
.bk-img img{filter:saturate(.62) contrast(.99) brightness(1.02);transition:filter .45s cubic-bezier(.16,1,.3,1)}
.bk:hover .bk-img img{filter:none}

/* round 3 · pricing: the plan grid and the FAQ below it sit on white too (Vishal, 28 Sep) */
.ab-pricing .grid-block,.ab-pricing .faq-block{background:#FFFFFF}
/* round 3 · demo close: the new plate is already graded — no veil over it */
section.close[data-plate]::after{display:none}
/* live Milo inside plates keeps the static image's box */
.feat-milo.ab-milo-in,.build-milo.ab-milo-in{height:auto;display:block}