/* MERINO MERLIN micro-site v6 — style.css Tokens, base styles, components, nav, and the non-responsive CSS of every section and page fragment, in source order. Generated by src/build.py — edit the sources. */ /* ═══ base.html — tokens, base, components, nav ═══ */ /* ═══ F00 foundation · MERINO MERLIN micro-site v6 ═══════════════════════════════════════ Order: @font-face · tokens (§3.2) · base (§3.3) · shared classes (§3.4) · component kit (§3.5) · nav + menu (§3.8) · reduced motion. Section CSS is appended at the marker at the end. */ /* ── fonts (inlined at build) ───────────────────────────────────────────────────────── */ @font-face{font-family:"Proxima Nova";font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/ProximaNova-Light.woff2") format("woff2")} @font-face{font-family:"Proxima Nova";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/ProximaNova-Regular.woff2") format("woff2")} @font-face{font-family:"Proxima Nova";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/ProximaNova-Semibold.woff2") format("woff2")} @font-face{font-family:"Proxima Nova";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/ProximaNova-Bold.woff2") format("woff2")} @font-face{font-family:"Proxima Nova";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/ProximaNova-Extrabold.woff2") format("woff2")} @font-face{font-family:"Raleway";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/Raleway-latin-var.woff2") format("woff2")} /* ── tokens (§3.2 — copied exactly; sections must not add colours) ─────────────────── */ :root{ /* brand colour */ --navy:#032E59; --navy-2:#162A43; --ink:#0E1B2E; --graphite:#1C2A3A; --slate:#5D6E80; --merino-blue:#0757B3; --merino-blue-hover:#064A99; --link:#2366B2; --beyond:#6A2CEC; --beyond-2:#8A5CF0; /* beyond-2: ERP lines/marks on navy only */ --cyan:#2FB7CF; --cyan-ink:#0B6F80; /* cyan-ink: AA ticks/text-level cyan on light */ --green:#91A70E; --white:#FFFFFF; --cloud:#F5F8FA; /* derived tints & lines (mixes of the tokens above — no new hues) */ --tint-blue:#E1EDF9; --tint-cyan:#E0F7FA; --tint-beyond:#EEE8FD; --hair:#E3E9EF; --hair-2:#D5DEE7; --quiet:#EEF2F6; --bar:#E6ECF2; --hair-navy:#B9C8D7; --on-navy:#FFFFFF; --on-navy-2:#D6DFE8; --on-navy-3:#B9C8D7; --on-navy-4:#8FA3B8; --line-on-navy:rgba(185,200,215,.18); --line-on-navy-2:rgba(185,200,215,.32); /* families */ --f-sans:"Proxima Nova", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --f-label:"Raleway", "Proxima Nova", system-ui, sans-serif; --f-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* type scale (390 → 1440 values in comments) */ --fs-display:clamp(46px, calc(4.4vw + 30px), 98px); /* 47 → 93 */ --fs-h2:clamp(36px, calc(3.4vw + 23px), 72px); /* 36 → 72 */ --fs-h2-compact:clamp(30px, calc(1.6vw + 18px), 46px); /* 30 → 41 */ --fs-h3:clamp(21px, calc(.6vw + 18.5px), 28px); /* 21 → 27 */ --fs-statement:clamp(25px, calc(2vw + 17px), 46px); /* 25 → 46 */ --fs-lead:clamp(17.5px, calc(.25vw + 16.5px), 20px); /* 17.5 → 20 */ --fs-body:clamp(16px, calc(.1vw + 15.6px), 17px); --fs-small:15px; --fs-meta:14px; --fs-micro:13px; --fs-eyebrow:12px; --fs-label:11px; --fs-mono:12.5px; --fs-num-xl:clamp(48px, calc(3vw + 36px), 80px); --fs-num-l:44px; --lh-display:.95; --lh-h2:1.02; --lh-h3:1.2; --lh-statement:1.24; --lh-body:1.6; --tr-display:-.04em; --tr-h2:-.032em; --tr-h3:-.012em; --tr-eyebrow:.2em; --tr-label:.13em; /* spacing (4-pt) */ --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:40px; --s-8:48px; --s-9:64px; --s-10:80px; --s-11:96px; --s-12:128px; --s-13:160px; --sec-y:clamp(80px, calc(6.5vw + 55px), 160px); /* section padding top & bottom: 80 → 149 */ --head-gap:clamp(40px, calc(3vw + 28px), 72px); /* section head → content */ /* layout */ --maxw:1240px; --gutter:clamp(20px, 5vw, 64px); --measure:36em; --nav-h:60px; /* radii */ --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-2xl:28px; --r-pill:999px; /* shadows — neutral only */ --sh-1:0 1px 2px rgba(14,27,46,.06), 0 1px 1px rgba(14,27,46,.04); --sh-2:0 1px 2px rgba(14,27,46,.06), 0 12px 32px -12px rgba(14,27,46,.20); --sh-3:0 2px 4px rgba(14,27,46,.08), 0 28px 60px -18px rgba(14,27,46,.30); --sh-paper:0 22px 44px -16px rgba(0,0,0,.55), 0 6px 14px -6px rgba(0,0,0,.35); /* paper on navy */ --sh-float:0 2px 4px rgba(0,0,0,.18), 0 36px 70px -24px rgba(0,0,0,.65); /* answer card on navy */ /* motion */ --ease-arrive:cubic-bezier(.16,1,.3,1); --ease-settle:cubic-bezier(.2,.7,.2,1); --ease-draw:cubic-bezier(.65,0,.35,1); --ease-exit:cubic-bezier(.5,0,.75,0); --ease-snap:cubic-bezier(.34,1.56,.64,1); /* citation chips + "Cited" markers ONLY */ --d-micro:160ms; --d-ui:280ms; --d-settle:600ms; --d-reveal:800ms; --d-arrive:1100ms; --d-draw:800ms; --d-snap:440ms; --d-stagger:70ms; --d-word:60ms; /* layers */ --z-raised:1; --z-sticky:10; --z-threads:20; --z-nav:100; --z-menu:110; --z-skip:200; } /* ── base (§3.3) ────────────────────────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)} /* section-level landings (a link to a [data-surface] root): the section's top edge slides under the nav, past the surface probe at navH/2, so the nav takes the target's colour and no strip of the previous section shows. Net landing: section top = navH/2 − 2 px (34 at ≥ 1100, 28 below). In-section targets (#request, #case-n, …) keep html's nav + 16 px; MM.scrollTo computes its own offset and is unaffected. */ [data-surface]{scroll-margin-top:calc(-16px - var(--nav-h) / 2 - 2px)} body{margin:0;background:var(--white);color:var(--graphite);font-family:var(--f-sans);font-size:var(--fs-body); line-height:var(--lh-body);font-weight:400;font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1; -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip} h1,h2,h3,h4{margin:0;font-weight:800;color:var(--navy);text-wrap:balance} p{margin:0;text-wrap:pretty} ul,ol{margin:0;padding:0} figure{margin:0} a{color:inherit} img,svg{display:block;max-width:100%} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} :focus-visible{outline:2px solid var(--merino-blue);outline-offset:3px;border-radius:6px} [data-surface="navy"] :focus-visible,[data-surface="ink"] :focus-visible,.on-navy :focus-visible{outline-color:var(--cyan)} ::selection{background:var(--tint-blue);color:var(--navy)} svg.i{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .no-js [data-js-only]{display:none!important} .js [data-nojs-only]{display:none!important} /* landing targets focused by MM.scrollTo / the skip link carry no ring (they are not controls) */ :is(main,section,article,footer,div,h2,h3)[tabindex="-1"]:focus{outline:none} html.mm-lock{overflow:hidden} /* ── shared classes (§3.4) ──────────────────────────────────────────────────────────── */ .sprite{position:absolute;width:0;height:0;overflow:hidden} .wrap{width:100%;max-width:calc(var(--maxw) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)} .sec{position:relative;padding-block:var(--sec-y)} .sec--white{background:var(--white)} .sec--cloud{background:var(--cloud)} .sec--navy{background:var(--navy);color:var(--on-navy-2)} .sec--ink{background:var(--ink);color:var(--on-navy-2)} .on-navy{color:var(--on-navy-2)} .stack>*+*{margin-top:var(--flow,1em)} .sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important; overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important} .nowrap{white-space:nowrap} .skip-link{position:fixed;left:12px;top:-60px;z-index:var(--z-skip);display:inline-flex;align-items:center;min-height:44px; padding:0 18px;border-radius:8px;background:var(--white);color:var(--navy);font-weight:600;font-size:15px; text-decoration:none} .skip-link:focus{top:12px;box-shadow:var(--sh-2)} /* type */ .on-navy :where(h1,h2,h3,h4),[data-surface="ink"] :where(h1,h2,h3,h4){color:var(--white)} .eyebrow{margin:0 0 20px;font-family:var(--f-label);font-weight:700;font-size:var(--fs-eyebrow);line-height:1.4; letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--link)} .eyebrow__quiet{color:var(--slate)} .h-display{font-weight:800;font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--tr-display);color:var(--navy)} .h-section{font-weight:800;font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--tr-h2);color:var(--navy);max-width:16em} .h-section--compact{font-size:var(--fs-h2-compact)} .h-sub{font-weight:700;font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--tr-h3);color:var(--navy)} .statement{font-weight:300;font-size:var(--fs-statement);line-height:var(--lh-statement);letter-spacing:-.012em;color:var(--navy);max-width:24em} .statement :is(b,strong){font-weight:600} .lede{font-size:var(--fs-lead);line-height:1.55;color:var(--graphite);max-width:34em} .body{font-size:inherit} .meta{font-size:var(--fs-meta);color:var(--slate)} .label{font-family:var(--f-label);font-weight:700;font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--slate)} .num{font-family:var(--f-label);font-weight:800;font-variant-numeric:lining-nums tabular-nums} .mono{font-family:var(--f-mono);font-size:var(--fs-mono)} .illus{font-family:var(--f-label);font-weight:600;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)} :is(.on-navy,[data-surface="ink"]) .eyebrow{color:var(--cyan)} :is(.on-navy,[data-surface="ink"]) .eyebrow__quiet{color:var(--on-navy-3)} :is(.on-navy,[data-surface="ink"]) :is(.h-display,.h-section,.h-sub,.statement){color:var(--white)} :is(.on-navy,[data-surface="ink"]) .lede{color:var(--on-navy-2)} :is(.on-navy,[data-surface="ink"]) :is(.meta,.label){color:var(--on-navy-3)} :is(.on-navy,[data-surface="ink"]) .illus{color:var(--on-navy-4)} /* light islands inside navy (cards, paper) return to light-surface colours */ :is(.on-navy,[data-surface="ink"]) :is(.card,.answer-card,.refusal-card,.sheet,.rec) :is(h1,h2,h3,h4,.h-sub,.h-section,.statement){color:var(--navy)} :is(.on-navy,[data-surface="ink"]) :is(.card,.answer-card,.refusal-card,.sheet,.rec) .eyebrow{color:var(--link)} :is(.on-navy,[data-surface="ink"]) :is(.card,.answer-card,.refusal-card,.sheet,.rec) :is(.meta,.label,.illus,.eyebrow__quiet){color:var(--slate)} :is(.on-navy,[data-surface="ink"]) :is(.card,.answer-card,.refusal-card,.sheet,.rec) .lede{color:var(--graphite)} :is(.on-navy,[data-surface="ink"]) :is(.card,.answer-card,.refusal-card,.sheet,.rec) :focus-visible{outline-color:var(--merino-blue)} /* buttons + links (hover = state, ≤ 160 ms; box-shadow changes are instant) */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0; border-radius:var(--r-md);font-weight:600;font-size:16px;line-height:1.2;text-align:center;text-decoration:none; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:background-color var(--d-micro) var(--ease-settle),color var(--d-micro) var(--ease-settle)} .btn svg.i{width:18px;height:18px;transition:transform 250ms var(--ease-arrive)} .btn:hover svg.i{transform:translateX(3px)} .btn-primary{background:var(--merino-blue);color:var(--white)} .btn-primary:hover{background:var(--merino-blue-hover)} .btn-light{background:var(--white);color:var(--navy)} .btn-light:hover{background:var(--tint-blue)} .btn-ghost{background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--hair-2)} .btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--navy)} .btn-ghost-navy{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px rgba(185,200,215,.5)} .btn-ghost-navy:hover{box-shadow:inset 0 0 0 1.5px var(--white)} .btn-sm{min-height:44px;padding:0 18px;font-size:15px;border-radius:10px} .btn-block{display:flex;width:100%} .cta-row{display:flex;flex-wrap:wrap;gap:12px} .link-arrow{display:inline-flex;gap:6px;align-items:center;font-weight:600;font-size:15px;color:var(--link);text-decoration:none; text-underline-offset:4px;text-decoration-thickness:1px} .link-arrow svg.i{width:16px;height:16px;transition:transform 250ms var(--ease-arrive)} .link-arrow:hover{text-decoration-line:underline} .link-arrow:hover svg.i{transform:translateX(3px)} :is(.on-navy,[data-surface="ink"]) .link-arrow{color:var(--white)} /* chips (Raleway 800 11 px, never a cyan fill) */ :is(.chip,.chip-kb,.chip-erp,.chip-scope,.chip-illus,.chip-neutral){display:inline-flex;align-items:center;gap:6px;height:24px; padding:0 9px;border-radius:6px;font-family:var(--f-label);font-weight:800;font-size:11px;line-height:1;letter-spacing:.12em; text-transform:uppercase;white-space:nowrap;vertical-align:middle} .chip-kb{background:var(--tint-blue);color:var(--merino-blue)} .chip-erp{background:var(--tint-beyond);color:var(--beyond)} .chip-scope{background:var(--white);border:1px solid var(--hair);color:var(--graphite)} .chip-scope svg.i{width:13px;height:13px;color:var(--merino-blue)} .chip-illus{background:transparent;border:1px solid var(--hair-2);color:var(--slate)} .chip-neutral{background:var(--cloud);color:var(--graphite)} :is(.on-navy,[data-surface="ink"]) .chip-scope{background:var(--navy-2);border-color:var(--line-on-navy-2);color:var(--white)} :is(.on-navy,[data-surface="ink"]) .chip-scope svg.i{color:var(--cyan)} :is(.on-navy,[data-surface="ink"]) .chip-illus{border-color:var(--line-on-navy-2);color:var(--on-navy-3)} :is(.on-navy,[data-surface="ink"]) .chip-neutral{background:rgba(255,255,255,.08);color:var(--white)} /* cards */ .card{background:var(--white);border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-2);color:var(--graphite)} .card--raised{box-shadow:var(--sh-3)} /* reveals (§3.4) — hidden states exist only with JS AND motion allowed */ .mm-w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .06em .1em;margin:0 -.06em -.1em} .mm-wi{display:inline-block} /* ── product component kit (§3.5) ─────────────────────────────────────────────────── */ /* sheet — paper document, sized in em off --sheet-fs. Spec offsets are in SHEET em; children that set their own font-size carry the converted value (e.g. __foot at .5em: left 1.1 sheet-em = 2.2em). Same rule for .rec. */ .sheet{font-size:var(--sheet-fs,16px);position:relative;width:13.2em;min-height:17.4em;padding:1em 1.1em .9em;background:var(--white); border-radius:4px;color:var(--graphite);line-height:1.3;text-align:left;overflow:hidden;box-shadow:var(--sh-paper); transition:opacity 200ms var(--ease-settle)} .sheet--on-light{box-shadow:var(--sh-2),0 0 0 1px var(--hair)} .sheet--stack{overflow:visible;box-shadow:5px 5px 0 -1px var(--white),5px 5px 0 0 var(--hair-2),10px 10px 0 -1px var(--white),10px 10px 0 0 var(--hair-2),var(--sh-2),0 0 0 1px var(--hair)} .sheet__top{display:flex;justify-content:space-between;align-items:center;gap:.6em;font-family:var(--f-label);font-weight:700;font-size:.44em;white-space:nowrap; line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)} .sheet__top>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis} .sheet__rev{flex:none;padding:.15em .4em;border-radius:3px;background:var(--cloud);color:var(--graphite)} .sheet__title{margin-top:.55em;font-weight:700;font-size:.84em;line-height:1.2;letter-spacing:-.01em;color:var(--graphite)} .sheet__rule{height:1px;margin:.6em 0;background:var(--hair)} .sheet__h{margin:1.1em 0 .8em;font-weight:700;font-size:.6em;line-height:1.25;color:var(--graphite)} .sheet__ln{display:block;width:var(--w,100%);height:.25em;margin:0 0 .38em;border-radius:2px;background:var(--bar)} .sheet__psg{position:relative;isolation:isolate;margin:.18em -.36em .72em;padding:.27em .36em .27em .54em;font-size:.69em;line-height:1.35; font-weight:600;color:var(--graphite)} .sheet__psg>span{position:relative;z-index:1} .sheet__psg::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tint-cyan);border-left:2px solid var(--cyan);border-radius:2px; transform:scaleX(0);transform-origin:0 50%;transition:transform 700ms var(--ease-arrive)} .sheet.is-hl .sheet__psg::before{transform:none} .sheet.is-weak .sheet__psg::before{transform:none;background:var(--quiet);border-left-color:var(--slate)} .sheet__foot{position:absolute;left:2.2em;right:2.2em;bottom:1.2em;display:flex;justify-content:space-between;gap:1em; font-family:var(--f-mono);font-size:.5em;line-height:1.3;color:var(--slate)} .sheet__mark,.rec__mark{position:absolute;z-index:2;padding:.2em .4em;border:1px solid var(--cyan);border-radius:4px;background:var(--white); font-family:var(--f-label);font-weight:800;font-size:.53em;line-height:1.2;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap; color:var(--cyan-ink);opacity:0;transform:scale(.6);transition:transform var(--d-snap) var(--ease-snap),opacity 180ms var(--ease-settle)} .sheet__mark{right:1.13em;bottom:.85em;transform-origin:100% 100%} .sheet.is-cited .sheet__mark,.rec.is-cited .rec__mark{opacity:1;transform:none} .sheet.is-dim,.rec.is-dim{opacity:.45} /* excerpt variant: three real lines, flow layout */ .sheet--excerpt{width:auto;min-height:0} .sheet--excerpt .sheet__foot{position:static;margin-top:1.2em} .sheet__lines{display:grid;gap:.45em;margin:.7em 0 0;padding:0;list-style:none} .sheet__lines li{font-size:.72em;line-height:1.4;font-weight:400;color:var(--graphite)} .sheet__lines li.sheet__psg{margin:0 -.35em;font-weight:600} .sheet--excerpt .sheet__mark{bottom:1.4em} /* centred on the in-flow footer line, so it covers the locator it cites */ /* rec — Infor LN record, sized in em off --rec-fs */ .rec{font-size:var(--rec-fs,16px);position:relative;width:16em;background:var(--white);border-radius:6px;color:var(--graphite);line-height:1.3; text-align:left;overflow:hidden;box-shadow:var(--sh-paper);transition:opacity 200ms var(--ease-settle)} .rec--on-light{box-shadow:var(--sh-2),0 0 0 1px var(--hair)} .rec__band{display:flex;justify-content:space-between;align-items:center;height:1.4em;padding:0 .65em;background:var(--beyond);color:var(--white)} .rec__band>span{font-family:var(--f-label);font-weight:800;font-size:.47em;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap} .rec__live{display:inline-flex;align-items:center;gap:.6em} .rec__live::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--white)} .rec__body{padding:.6em .65em .3em} .rec__title{font-weight:700;font-size:.72em;line-height:1.25;color:var(--graphite)} .rec__call{margin:.25em 0 .55em;font-family:var(--f-mono);font-size:.56em;line-height:1.3;color:var(--beyond); white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rec__row{position:relative;display:grid;grid-template-columns:var(--cols,1.25fr 1fr .5fr .9fr);gap:4px;align-items:center;height:1.2em; padding:0 .3em;border-top:1px solid var(--hair);color:var(--graphite)} .rec__row>span{position:relative;z-index:1;min-width:0;font-family:var(--f-mono);font-size:.53em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rec__row--head{height:.95em;border-top:0} .rec__row--head>span{font-family:var(--f-label);font-weight:700;font-size:.41em;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)} .rec__row.is-key::before{content:"";position:absolute;inset:1px 0 0;background:var(--tint-beyond);border-left:2px solid var(--beyond); transform:scaleX(0);transform-origin:0 50%;transition:transform 700ms var(--ease-arrive)} .rec.is-hl .rec__row.is-key::before{transform:none} .rec__foot{padding:.35em 1.2em .9em;font-family:var(--f-mono);font-size:.53em;line-height:1.3;color:var(--slate)} .rec__mark{top:3.6em;right:1.13em;transform-origin:100% 0} /* answer card */ .answer-card{position:relative;padding:18px 20px;background:var(--white);border-radius:var(--r-lg);color:var(--graphite);text-align:left; box-shadow:var(--sh-3),0 0 0 1px var(--hair)} :is(.on-navy,[data-surface="ink"]) .answer-card{box-shadow:var(--sh-float)} .answer-card__head{display:flex;align-items:center;gap:10px;margin:0 0 12px} .answer-card__who{font-weight:800;font-size:12px;line-height:1.2;letter-spacing:.02em;color:var(--graphite);white-space:nowrap} .answer-card__head>:is(.chip,.chip-kb,.chip-erp){margin-left:auto} .answer-card__text{font-size:16px;line-height:1.48;color:var(--graphite)} .answer-card__text .wd{transition:opacity 280ms var(--ease-settle);transition-delay:calc(var(--i,0)*24ms)} .answer-card:not(.is-on) .wd{opacity:0} .answer-card__src{margin-top:14px;padding-top:12px;border-top:1px solid var(--hair)} .answer-card__lbl{margin:0 0 8px;font-family:var(--f-label);font-weight:700;font-size:var(--fs-label);letter-spacing:var(--tr-label); text-transform:uppercase;color:var(--slate)} .answer-card__note{margin-top:9px;font-size:13px;line-height:1.45;color:var(--slate)} .answer-card--sm{padding:14px 16px} .answer-card--sm .answer-card__text{font-size:14.5px} .answer-card--sm .answer-card__who{font-size:11px} .answer-card--turn .answer-card__text+*{margin-top:10px} .cites{display:grid;gap:6px;margin:0;padding:0;list-style:none} .q-bubble{width:fit-content;max-width:34ch;margin-left:auto;padding:10px 14px;border-radius:14px 14px 4px 14px;background:var(--navy); color:var(--white);font-size:14.5px;line-height:1.35;font-weight:600} :is(.on-navy,[data-surface="ink"]) .q-bubble{background:var(--navy-2);box-shadow:inset 0 0 0 1px var(--line-on-navy-2)} /* cite */ .cite{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:8px 10px 8px 9px;list-style:none;background:var(--cloud); border:1px solid var(--hair);border-left:2px solid var(--cyan);border-radius:8px;color:var(--graphite);transform-origin:0 50%; transition:transform var(--d-snap) var(--ease-snap),opacity 180ms var(--ease-settle);transition-delay:calc(var(--i,0)*120ms)} .cite>svg.i{width:14px;height:14px;color:var(--slate)} .cite__t{font-family:var(--f-sans);font-weight:600;font-size:13.5px;line-height:1.3;color:var(--graphite)} .cite__l{font-family:var(--f-mono);font-size:12px;line-height:1.3;color:var(--slate)} .cite--erp{border-left-color:var(--beyond)} .cite__q{display:block;flex-basis:100%;margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--graphite)} .cite__q mark{padding:0 2px;border-radius:2px;background:var(--tint-cyan);color:inherit} .answer-card:not(.is-cited) .cite{opacity:0;transform:scale(.72)} /* refusal card — deliberately the quietest object on the page */ .refusal-card{padding:16px 18px;background:var(--quiet);border:1px solid var(--hair-2);border-radius:var(--r-md);color:var(--graphite);text-align:left} .refusal-card__t{margin:0 0 4px;font-size:16px;font-weight:700;line-height:1.35;color:var(--graphite)} .refusal-card__n{font-size:14px;line-height:1.45;color:var(--slate)} /* ask bar */ .ask-bar{display:flex;align-items:center;gap:12px;height:58px;padding:0 10px 0 18px;background:var(--ink);border:1px solid var(--line-on-navy-2); border-radius:14px;color:var(--white);font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap} .ask-bar>svg.i{width:20px;height:20px;color:var(--hair-navy)} .ask-bar__q{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;contain:inline-size} .ask-bar__typed{min-width:0;overflow:hidden;white-space:nowrap} .ask-bar>:is(.chip-scope,.chip){flex:none;margin-left:auto} .ask-bar--light{background:var(--white);border-color:var(--hair);box-shadow:var(--sh-1);color:var(--graphite)} .ask-bar--light>svg.i{color:var(--slate)} .caret{display:inline-block;flex:none;width:2px;height:1.15em;margin-left:2px;vertical-align:-.2em;background:var(--cyan); animation:mm-blink 1.05s steps(1) infinite} @keyframes mm-blink{50%{opacity:0}} .is-paused .caret,.is-paused .drift{animation-play-state:paused} /* gate — evidence threshold (markup ships drawn: .is-on) */ .gate{position:relative} .gate__line{display:block;height:1.5px;background:var(--merino-blue);transform-origin:0 50%;transition:transform 600ms var(--ease-draw)} .gate--v .gate__line{width:1.5px;height:100%;transform-origin:50% 0} .gate__lbl{display:inline-block;padding:3px 8px;border-radius:5px;background:var(--merino-blue);color:var(--white);font-family:var(--f-label); font-weight:800;font-size:11px;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;transition:opacity 300ms var(--ease-settle)} .gate:not(.is-on) .gate__line{transform:scaleX(0)} .gate--v:not(.is-on) .gate__line{transform:scaleY(0)} .gate:not(.is-on) .gate__lbl{opacity:0} /* threads overlay (MM.threads / MM.connector) */ .mm-threads{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:var(--z-threads);--t-w:1.5;--t-bg:var(--white)} :is(.on-navy,[data-surface="ink"]) .mm-threads{--t-w:1.25;--t-bg:var(--navy)} .mm-t{--t-c:var(--cyan);transition:opacity 200ms var(--ease-settle)} .mm-t--kb{--t-c:var(--cyan)} .mm-t--erp{--t-c:var(--beyond)} :is(.on-navy,[data-surface="ink"]) .mm-t--erp{--t-c:var(--beyond-2)} .mm-t--muted{--t-c:var(--slate)} .mm-t--scope{--t-c:var(--merino-blue)} .mm-t path{fill:none;stroke:var(--t-c);stroke-width:var(--t-w,1.25);stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1 1;stroke-dashoffset:1} .mm-t__start{fill:var(--t-c);opacity:0} .mm-t__end{fill:var(--t-bg,#fff);stroke:var(--t-c);stroke-width:1.5;opacity:0} .mm-t__tick{stroke:var(--t-c);stroke-width:1.5;stroke-linecap:round;opacity:0} .mm-t.is-dim{opacity:.25} /* avatar (star) */ .avatar{display:inline-grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:var(--merino-blue)} .avatar svg{width:15px;height:15px} .avatar--sm{width:22px;height:22px;border-radius:7px} .avatar--sm svg{width:13px;height:13px} /* drift (hero) */ .drift{animation:mm-drift var(--dur,9s) ease-in-out var(--dl,0s) infinite alternate} @keyframes mm-drift{from{transform:translate3d(0,-4px,0) rotate(-.3deg)}to{transform:translate3d(0,4px,0) rotate(.3deg)}} /* ── header, nav, mobile menu (§3.8) ─────────────────────────────────────────────── */ .nav{position:fixed;inset:0 0 auto;height:var(--nav-h);z-index:var(--z-nav);color:var(--graphite)} .nav::before,.nav::after{content:"";position:absolute;inset:0;pointer-events:none} .nav::before{background:var(--white)} .nav.is-scrolled::before{box-shadow:inset 0 -1px 0 var(--hair)} .nav::after{background:var(--navy);box-shadow:inset 0 -1px 0 var(--line-on-navy);opacity:0;transition:opacity 240ms var(--ease-settle)} .nav[data-on="navy"]::after{opacity:1} .nav[data-tone="ink"]::after{background:var(--ink)} .nav__in{position:relative;z-index:1;display:flex;align-items:center;gap:8px;height:100%} .nav__brand{position:relative;display:block;flex:none;height:40px;border-radius:4px} .nav__logo{display:block;width:auto;height:40px;max-width:none;transition:opacity 240ms var(--ease-settle)} .nav__logo--navy{position:absolute;left:0;top:0;opacity:0} .nav[data-on="navy"] .nav__logo--light{opacity:0} .nav[data-on="navy"] .nav__logo--navy{opacity:1} .nav__links{display:none;margin-left:auto} .nav__links ul{display:flex;gap:2px;list-style:none} .nav__links a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;font-weight:600;font-size:15px; color:var(--graphite);text-decoration:none;transition:color var(--d-micro) var(--ease-settle)} .nav__links a::after{content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:1px;background:var(--merino-blue); transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d-ui) var(--ease-arrive)} .nav__links a:hover{color:var(--navy)} .nav__links a:hover::after,.nav__links a[aria-current]::after{transform:none} .nav__cta{display:none;margin-left:12px} .nav__menu{display:inline-grid;place-items:center;width:44px;height:44px;margin:0 -10px 0 auto;padding:0;border:0;border-radius:10px; background:transparent;color:var(--navy)} .nav__menu svg.i{width:24px;height:24px} .nav__menu .nav__ico-close{display:none} .nav__menu[aria-expanded="true"] .nav__ico-open{display:none} .nav__menu[aria-expanded="true"] .nav__ico-close{display:block} .nav[data-on="navy"] .nav__links a{color:var(--white)} .nav[data-on="navy"] .nav__links a::after{background:var(--cyan)} .nav[data-on="navy"] .nav__cta{background:var(--white);color:var(--navy)} .nav[data-on="navy"] .nav__cta:hover{background:var(--tint-blue)} .nav[data-on="navy"] .nav__menu{color:var(--white)} .nav[data-on="navy"] :focus-visible{outline-color:var(--cyan)} .menu{position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;z-index:var(--z-menu);padding:16px var(--gutter) 32px;overflow-y:auto; overscroll-behavior:contain;background:var(--white);border-top:1px solid var(--hair);visibility:hidden;opacity:0;transform:translate3d(0,-8px,0); transition:opacity var(--d-ui) var(--ease-settle),transform var(--d-ui) var(--ease-arrive),visibility 0s linear var(--d-ui)} .nav.is-open .menu{visibility:visible;opacity:1;transform:none; transition:opacity var(--d-ui) var(--ease-settle),transform var(--d-ui) var(--ease-arrive),visibility 0s} .menu>*{max-width:640px} .menu ul{list-style:none} .menu li a{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:56px;border-bottom:1px solid var(--hair); font-weight:600;font-size:20px;line-height:1.2;color:var(--navy);text-decoration:none} .menu li a svg.i{width:20px;height:20px;color:var(--slate)} .menu li a[aria-current]{color:var(--merino-blue)} .menu li a[aria-current] svg.i{color:var(--merino-blue)} .menu>.btn{margin-top:16px} .menu>nav+.btn{margin-top:28px} .no-js .nav__menu{display:none} .no-js .nav__cta{display:inline-flex;margin-left:auto} /* ═══ S01 top — 01-hero.html ═══ */ #top{--top-pl:0px;--top-pt:10px;--top-gap:48px;--top-fx0:16px;position:relative;padding:calc(var(--nav-h) + 24px) 0 32px;overflow-x:clip} #top .top__grid{display:grid;grid-template-columns:minmax(0,1fr)} #top .top__copy{position:relative;z-index:2;min-width:0} /* the endorsement never splits: the line breaks after the separator, or (phones) the endorsement takes its own line */ #top .top__eb-by{white-space:nowrap} #top .top__h1{font-size:min(var(--fs-display),11.5vh)} #top .top__lead{margin-top:28px;max-width:30em} #top .top__ctas{margin-top:32px} #top .top__proof{display:flex;flex-wrap:wrap;align-items:center;column-gap:22px;margin-top:36px;padding-top:8px;border-top:1px solid var(--hair); font-family:var(--f-label);font-weight:700;font-size:13px;line-height:1.3;letter-spacing:.16em;text-transform:uppercase;color:var(--navy)} #top .top__proof a{display:inline-flex;align-items:center;gap:9px;min-height:44px;color:inherit;text-decoration:none} #top .top__proof a>span{text-decoration-line:none;text-decoration-color:var(--merino-blue);text-decoration-thickness:1px;text-underline-offset:5px} #top .top__proof a:hover>span{text-decoration-line:underline} #top .top__proof svg.i{width:16px;height:16px;color:var(--cyan-ink)} #top .top__copy [data-reveal].is-in{transition-delay:var(--top-d,0ms)} /* ── the stage panel ─────────────────────────────────────────────────────────────── */ #top .stage{position:relative;margin-top:40px;border-radius:var(--r-xl);background:var(--navy);color:var(--on-navy-2)} #top .stage.is-in{transition:opacity 900ms var(--ease-settle) 200ms,transform 900ms var(--ease-arrive) 200ms} #top .stage__clip{position:relative;overflow:hidden;height:560px;border-radius:var(--r-xl) var(--r-xl) 0 0} #top .stage__box{position:absolute;left:0;top:var(--top-pt);width:720px;height:640px;transform-origin:0 0} #top .stage.is-m .stage__box{width:370px;height:720px} #top .stage__box .ask-bar{position:absolute;left:24px;right:24px;top:22px;z-index:6;box-shadow:var(--sh-2)} /* a submitted question has no caret (as in S02): the markup ships .is-sent, so reduced-motion and resize final states show none; the script clears it while a question types (and on the empty bar at boot) and restores it on submit */ #top .ask-bar.is-sent .caret{visibility:hidden;animation:none} #top .top-scope{transition:opacity 400ms var(--ease-settle),transform 500ms var(--ease-arrive)} #top .top-scope:not(.is-on){opacity:0;transform:translate3d(8px,0,0)} /* the status sits in the scaled box but is counter-scaled (--top-k = k, set by the script) so it never renders below 11 px */ #top .stage__status{position:absolute;left:24px;top:92px;z-index:6;display:flex;align-items:flex-start;gap:max(9px,calc(9px / var(--top-k,1)));margin:0; font-family:var(--f-label);font-weight:700;font-size:max(11px,calc(11px / var(--top-k,1)));line-height:1.4;letter-spacing:.16em;text-transform:uppercase;color:var(--on-navy-3); transition:opacity 350ms var(--ease-settle)} #top .stage__status:not(.is-on){opacity:0} #top .stage__dot{flex:none;width:max(6px,calc(6px / var(--top-k,1)));height:max(6px,calc(6px / var(--top-k,1)));margin-top:.42em;border-radius:50%;background:var(--cyan)} #top .stage__sts{display:grid;min-width:0} #top .stage__st{grid-area:1/1;white-space:nowrap;transition:opacity 350ms var(--ease-settle)} #top .stage__st:not(.is-cur){opacity:0} #top .stage__vp{position:absolute;inset:0;perspective:1300px;perspective-origin:50% 45%} #top .stage__world{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(5deg) rotateY(-8deg)} #top .top-src{position:absolute;left:0;top:0;width:0;height:0;backface-visibility:hidden;will-change:transform,opacity; transition:transform 1150ms var(--ease-arrive),opacity 800ms var(--ease-settle)} #top .top-src__in{position:absolute;left:0;top:0;transform:translate(-50%,-50%)} #top .top-card{position:absolute;left:0;top:0;width:318px;margin-left:-159px;will-change:transform,opacity; transition:transform 900ms var(--ease-arrive),opacity 600ms var(--ease-settle)} #top .top-card.is-exit{transition:transform 380ms var(--ease-exit),opacity 380ms var(--ease-exit)} #top .top-card--ref{transition:opacity 600ms var(--ease-settle)} #top .top-card--ref .refusal-card{transition:transform 600ms var(--ease-settle)} #top .top-card--ref:not(.is-on) .refusal-card{transform:translate3d(0,12px,0)} #top .top-card .answer-card__text{text-wrap:pretty} #top .answer-card__note{text-wrap:balance} /* the record's call is the filter that makes the answer true: it wraps inside the record, never ellipsed */ #top .stage__world .rec__call{white-space:normal;overflow:visible;text-overflow:clip;text-wrap:balance} /* the evidence threshold: positioned in clip space by the script, above the thread layer */ #top .top-gate{position:absolute;left:0;top:0;z-index:21;width:0;height:0;pointer-events:none} #top .top-gate .gate__line{height:2px} /* the line un-draws inside the 420 ms exit (the draw-in keeps the kit's 600 ms), so no stub is left over the returning sheets */ #top .top-gate:not(.is-on) .gate__line{transition-duration:350ms} #top .top-gate.gate--v .gate__line{width:2px;height:100%;margin-left:-1px} #top .top-gate .gate__lbl{position:absolute;left:-1px;bottom:calc(100% + 8px);border-radius:5px 5px 5px 0} /* horizontal (phone) gate: the label is centred on the line, between the two refusal threads' drop points */ #top .top-gate:not(.gate--v) .gate__lbl{left:50%;right:auto;bottom:auto;top:1px;border-radius:5px;transform:translate(-50%,-50%)} /* muted (refusal) threads: slate is too dim on navy, so they take the quiet on-navy grey */ #top .mm-t--muted{--t-c:var(--on-navy-4)} /* instant state switches (tabs under reduced motion, resize) */ #top .stage.is-instant :is(.top-src,.top-card,.refusal-card,.sheet,.rec,.cite,.wd,.sheet__mark,.rec__mark,.top-scope,.stage__status,.stage__st,.gate__line,.gate__lbl), #top .stage.is-instant :is(.sheet__psg,.rec__row)::before{transition:none} /* mobile composition (370 × 720 design box) */ #top .stage.is-m .ask-bar{left:14px;right:14px;top:12px;height:76px;padding:0 16px 0 14px;white-space:normal} #top .stage.is-m .ask-bar__q{display:block;font-size:15.5px;line-height:1.32} #top .stage.is-m .ask-bar__typed{display:inline;white-space:normal;overflow:visible} #top .stage.is-m .caret{height:1.05em;vertical-align:-.16em} /* phones: no room for the chip in a two-line ask bar; the department is carried by the status line instead */ #top .stage.is-m .top-scope{display:none} #top .stage.is-m .stage__status{left:14px;right:14px;top:96px;line-height:1.3;letter-spacing:.1em} #top .stage.is-m .stage__st{white-space:normal;text-wrap:balance} #top .stage.is-m .answer-card{padding:15px 17px} #top .stage.is-m .answer-card__text{font-size:15px} /* ── the foot: tabs, pause, label ─────────────────────────────────────────────────── */ /* the foot shares the ask bar's edges: the script publishes the bar's left/right insets (--top-fx / --top-fxr) and the tabs' inner padding (--top-tp), so tab labels, bars, the pause icon and the label line up with the bar at every width */ #top .stage__foot{position:relative;z-index:7;display:flex;flex-wrap:wrap;align-items:center;column-gap:6px; padding:6px calc(var(--top-fxr,var(--top-fx0)) - var(--top-tp,10px)) 14px calc(var(--top-fx,var(--top-fx0)) - var(--top-tp,10px)); border-top:1px solid var(--line-on-navy);container-type:inline-size} #top .stage__tabs{display:flex;flex:1 1 0;min-width:0;gap:4px} #top .stage__tab{position:relative;display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0;min-height:52px;padding:0 10px 4px;border:0;border-radius:10px; background:transparent;color:var(--on-navy-3);font-weight:600;font-size:14px;line-height:1.2;text-align:left; transition:color var(--d-micro) var(--ease-settle)} #top .stage__tab:hover,#top .stage__tab[aria-selected="true"]{color:var(--white)} #top .stage__n{flex:none;font-family:var(--f-label);font-weight:800;font-size:11px;letter-spacing:.12em;font-variant-numeric:lining-nums tabular-nums} #top .stage__lbl{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #top .stage__l-short{display:none} #top .stage__bar{position:absolute;left:10px;right:10px;bottom:6px;height:2px;border-radius:1px;background:var(--line-on-navy-2);overflow:hidden} #top .stage__bar i{position:absolute;inset:0;background:var(--cyan);transform:scaleX(0);transform-origin:0 50%} #top .stage__tab[aria-selected="true"] .stage__bar i{transform:none} /* the pause icon (18 px centred in 44) ends on the ask bar's right edge */ #top .stage__pause{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-right:calc(var(--top-tp,10px) - 13px);padding:0;border:0;border-radius:10px; background:transparent;color:var(--on-navy-3);transition:color var(--d-micro) var(--ease-settle)} #top .stage__pause:hover{color:var(--white)} #top .stage__pause svg.i{width:18px;height:18px} #top .stage__pause[hidden]{display:none} #top .stage__ico-play{display:none} #top .stage__pause[aria-pressed="true"] .stage__ico-play{display:block} #top .stage__pause[aria-pressed="true"] .stage__ico-pause{display:none} #top .stage__illus{flex:1 0 100%;margin:4px 0 0;padding:0 var(--top-tp,10px)} /* ── no-JS: a flat final-state composition ────────────────────────────────────────── */ #top .stage__static{padding:18px 16px 20px} #top .stage__static .ask-bar{height:auto;min-height:58px;padding-block:10px;white-space:normal} #top .stage__static .ask-bar__typed{white-space:normal} #top .stage__static-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:28px 32px;margin-top:28px} #top .stage__static .sheet{flex:none;transform:rotate(-2deg)} #top .stage__static .answer-card{flex:1 1 260px;max-width:340px} /* ═══ S02 why — 02-why.html ═══ */ #why{padding-block:0} #why .why__band{position:relative;padding-block:var(--sec-y)} #why .why__band--intro{background:var(--cloud)} #why .why__band--why{background:var(--white)} /* ── Band A · intro ───────────────────────────────────────────────────────────────── */ #why .why__stmt{max-width:24em} #why .why__src{position:relative;white-space:nowrap} #why .why__src::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:2px;border-radius:1px;background:var(--hair-2); transform-origin:0 50%;transition:transform 500ms var(--ease-draw);transition-delay:calc(var(--i,0)*90ms)} #why .why__stmt.is-armed:not(.is-drawn) .why__src::after{transform:scaleX(0)} #why .why__rule{height:1px;margin-top:56px;background:var(--hair)} #why .why__introGrid{display:grid;gap:40px;margin-top:48px} #why .why__d5{font-size:19px;line-height:1.6;max-width:36em} #why .why__d5 strong{font-weight:600;color:var(--navy)} #why .why__keys{list-style:none} #why .why__key{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:16px;padding:20px 0} #why .why__key+.why__key{border-top:1px solid var(--hair)} #why .why__key:first-child{padding-top:0} #why .why__key:last-child{padding-bottom:0} #why .why__key>svg.i{width:24px;height:24px;margin-top:-1px;color:var(--merino-blue)} #why .why__kt{font-weight:700;font-size:17px;line-height:1.3;letter-spacing:-.005em;color:var(--navy)} #why .why__kd{margin-top:6px;font-size:15px;line-height:1.55;color:var(--slate)} #why .why__key .link-arrow{min-height:44px;margin:2px 0 -8px} /* 44 px target, same visual rhythm */ /* ── Band B · why ─────────────────────────────────────────────────────────────────── */ #why .why__h{max-width:9em} #why .why__d8{margin-top:32px;max-width:17em;font-size:clamp(24px, calc(1.1vw + 17px), 34px);line-height:1.26} #why .why__d9{margin-top:28px;max-width:30em} #why .why__d10{margin-top:24px;max-width:34em;font-size:var(--fs-body);line-height:1.6;color:var(--graphite)} #why .why__side{position:relative;margin-top:32px} #why .why__illus{margin-top:14px} /* figure — static final state (no-JS / reduced): ask bar (440) + cited answer (380) centred in flow; windows not rendered */ #why .why__fig{position:relative} #why .why__box{position:relative} #why .why__win{display:none} #why .why__final{display:grid;gap:16px;width:100%;max-width:440px;margin-inline:auto} #why .why__ask{width:100%} #why .why__ans{width:100%;max-width:380px;justify-self:center} /* the caption sits on the ask bar's left edge (static: same 440 column; animated: the script sets the inset) */ #why .why__illus{max-width:440px;margin-inline:auto} /* animated: the caption is anchored 14 px under the answer card (--why-cap-y, final state). While the five windows are out, the script lowers it (translateY) to just under them, and it rides up with the answer (render) */ #why .why__fig.is-anim+.why__illus{position:absolute;left:0;right:0;top:var(--why-cap-y,0px);max-width:none;margin:0; padding-left:var(--why-cap-x,0px);will-change:transform} /* the ask bar in this figure can wrap to two lines (narrow screens); one line from 500 px */ #why .ask-bar{height:auto;min-height:58px;padding-block:9px;font-size:15px;white-space:normal} #why .ask-bar__q{display:block} #why .ask-bar__typed{display:inline;white-space:normal} #why .ask-bar .caret{vertical-align:-.22em} /* a submitted question has no caret: it goes once the answer is cited (the markup ships .is-sent: static, reduced and no-JS states show no caret and run no blink; the script clears it before .78 and restores it on the Snap) */ #why .why__final.is-sent .caret{visibility:hidden;animation:none} #why .caret:where(.no-js *){display:none} #why .why__ans.is-instant .cite{transition:none} /* figure — animated design box (the script adds .is-anim + data-box and scales the box by k) */ #why .why__fig.is-anim{overflow:visible} /* t and m boxes: the final state sits near the top (24–32) and the windows are packed just tall enough to show every key line, so the box ends about where the caption under the card does (no dead band once the play has run) */ #why .is-anim .why__box{position:absolute;left:0;top:0;width:560px;height:500px;transform-origin:0 0} #why .is-anim[data-box="t"] .why__box{height:308px} #why .is-anim[data-box="m"] .why__box{width:360px;height:310px} #why .is-anim .why__final{position:absolute;z-index:10;left:60px;top:181px;width:440px;max-width:none;margin:0;gap:17px} #why .is-anim[data-box="t"] .why__final{top:32px} #why .is-anim[data-box="m"] .why__final{left:5px;top:24px;width:350px;gap:16px} /* overflow:hidden keeps the counter-scaled question inside the bar while it grows (no page overflow at scaleX .4) */ #why .is-anim .why__ask{position:relative;z-index:2;overflow:hidden;transform-origin:50% 50%;will-change:transform,opacity} /* while the bar grows (scaleX), its icon and question are counter-scaled so they never squash */ #why .is-anim .why__ask>svg.i{transform-origin:50% 50%} #why .is-anim .why__ask .ask-bar__q{transform-origin:0 50%} #why .is-anim .why__ans{position:relative;z-index:1;width:380px;will-change:transform,opacity} #why .is-anim[data-box="m"] .why__ans{width:100%;max-width:none} #why .is-anim .answer-card__text .wd{transition:none} /* the five app windows (flat, illustrative, no names) */ #why .is-anim .why__win{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;width:220px;height:150px;margin:-75px 0 0 -110px; overflow:hidden;border-radius:10px;box-shadow:var(--sh-2);will-change:transform,opacity;transform-origin:50% 50%} /* t and m windows use compact vertical metrics (t 220×140, m 200×132; Messages shorter): every key line still clears the window below */ #why .is-anim[data-box="t"] .why__win{height:140px;margin-top:-70px} #why .is-anim[data-box="m"] .why__win{width:200px;height:132px;margin:-66px 0 0 -100px} /* Messages holds one bubble: a shorter window, so the start state ends where the final one does */ #why .is-anim[data-box="t"] .why__win--msg{height:104px;margin-top:-52px} #why .is-anim[data-box="m"] .why__win--msg{height:100px;margin-top:-50px} #why :is([data-box="t"],[data-box="m"]) .why__bar{height:28px} #why :is([data-box="t"],[data-box="m"]) .why__body{padding-block:8px} #why [data-box="m"] .why__body{padding-inline:11px} #why :is([data-box="t"],[data-box="m"]) .why__search{height:22px} #why :is([data-box="t"],[data-box="m"]) .why__files{gap:2px;margin-top:6px} #why :is([data-box="t"],[data-box="m"]) .why__files li{height:17px} #why :is([data-box="t"],[data-box="m"]) .why__rows li{height:20px} #why :is([data-box="t"],[data-box="m"]) .why__ln{margin-top:8px} #why :is([data-box="t"],[data-box="m"]) .why__fl{margin-top:8px} /* the path must fit its window whole ("Archive" is the cue): 11 px / −.02em in 196 px; the m window gives 180 px */ #why [data-box="m"] .why__win--drive .why__body{padding-inline:10px} #why [data-box="m"] .why__path{font-size:10.5px;letter-spacing:-.03em} #why .why__win:nth-of-type(1){z-index:1} #why .why__win:nth-of-type(2){z-index:2} #why .why__win:nth-of-type(3){z-index:3} #why .why__win:nth-of-type(4){z-index:4} #why .why__win:nth-of-type(5){z-index:5} #why .why__bar{display:flex;align-items:center;gap:7px;flex:none;height:30px;padding:0 11px;border-bottom:1px solid var(--hair);background:var(--cloud)} #why .why__bar svg.i{width:14px;height:14px;color:var(--slate)} #why .why__win--erp .why__bar svg.i{color:var(--beyond)} #why .why__bar span{font-family:var(--f-label);font-weight:700;font-size:11px;line-height:1;letter-spacing:.12em;text-transform:uppercase; color:var(--slate);white-space:nowrap} #why .why__body{flex:1;min-height:0;padding:10px 12px;font-size:13px;line-height:1.35;color:var(--graphite)} #why .why__search{display:flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--hair-2);border-radius:6px; font-size:12px;color:var(--graphite);white-space:nowrap} #why .why__search svg.i{width:12px;height:12px;color:var(--slate)} #why .why__files{display:grid;gap:3px;margin-top:8px;list-style:none} #why .why__files li{display:flex;align-items:center;gap:6px;height:19px;font-family:var(--f-mono);font-size:11.5px;color:var(--graphite);white-space:nowrap} #why .why__files svg.i{width:12px;height:12px;color:var(--slate)} #why .why__rows{display:grid;list-style:none} #why .why__rows li{display:grid;grid-template-columns:1.2fr 1fr .9fr;align-items:center;height:22px;border-top:1px solid var(--hair); font-family:var(--f-mono);font-size:11.5px;color:var(--graphite);white-space:nowrap} #why .why__rows li.why__rhead{height:18px;border-top:0;font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.08em; text-transform:uppercase;color:var(--slate)} #why .why__subj{font-weight:600;font-size:13px;line-height:1.35;color:var(--graphite)} #why .why__path{font-family:var(--f-mono);font-size:11px;letter-spacing:-.02em;color:var(--slate);white-space:nowrap} /* decorative stage: exempt from the 11.5 px mono minimum */ #why .why__ln{display:block;height:6px;margin-top:9px;border-radius:2px;background:var(--bar);width:var(--w,100%)} #why .why__fl{display:flex;align-items:center;gap:7px;margin-top:9px} #why .why__fl svg.i{width:12px;height:12px;color:var(--slate)} #why .why__fl .why__ln{flex:1;margin:0} #why .why__msg{display:flex;align-items:flex-end;gap:8px;margin-top:4px} #why .why__dot{flex:none;width:22px;height:22px;border-radius:50%;background:var(--bar)} #why .why__bubble{max-width:15em;padding:8px 11px;border-radius:12px 12px 12px 4px;background:var(--quiet);font-size:13px;line-height:1.35;color:var(--graphite)} /* ── comparison ledger ────────────────────────────────────────────────────────────── */ #why .why__compare{margin-top:48px} #why .why__cmp{width:100%;border-collapse:collapse;table-layout:fixed} #why .why__cap{margin-bottom:20px;caption-side:top;text-align:left} #why .why__cmp th{padding:0 0 12px;border-bottom:1px solid var(--hair-2);text-align:left;font-family:var(--f-label);font-weight:700; font-size:var(--fs-label);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--slate)} #why .why__cmp th+th{color:var(--navy)} #why .why__cmp th:first-child{width:44%} #why .why__cmp td{height:56px;padding:0 16px 0 0;border-bottom:1px solid var(--hair);vertical-align:middle} /* line-height:1 makes the box the glyph box, so the strike's 55 % crosses the x-height centre (the 56 px td sets the row) */ #why .why__gen{position:relative;display:inline-block;font-size:16px;line-height:1;color:var(--slate);white-space:nowrap} #why .why__gen::after{content:"";position:absolute;left:0;right:0;top:55%;height:1px;background:var(--slate);transform-origin:0 50%; transition:transform 500ms var(--ease-draw);transition-delay:calc(var(--i,0)*90ms)} #why .why__mm{display:flex;align-items:center;gap:10px;font-weight:600;font-size:17px;line-height:1.35;color:var(--graphite); transition:opacity 400ms var(--ease-settle),transform 600ms var(--ease-arrive);transition-delay:calc(var(--i,0)*90ms + 300ms)} #why .why__mm svg.i{width:18px;height:18px;color:var(--cyan-ink)} #why .why__cmp.is-armed:not(.is-drawn) .why__gen::after{transform:scaleX(0)} #why .why__cmp.is-armed:not(.is-drawn) .why__mm{opacity:0;transform:translate3d(-6px,0,0)} #why .why__pfx{display:none} /* ═══ S03 platform — 03-platform.html ═══ */ /* ── S03 · One Platform ─────────────────────────────────────────────────────────────── */ #platform{--plat-well-h:280px} #platform .plat__head{margin-bottom:var(--head-gap)} #platform .plat__h{max-width:14em} #platform .plat__cards{display:grid;gap:24px} #platform .plat__card{position:relative;display:flex;flex-direction:column;padding:20px;border:1px solid var(--line-on-navy); border-radius:var(--r-xl)} #platform .plat__chip{margin-top:24px;line-height:1} #platform .plat__card h3{margin-top:14px;color:var(--white)} #platform .plat__txt{margin-top:10px;font-size:16px;line-height:1.55;color:var(--on-navy-2);max-width:32em} #platform .plat__illus{margin-top:22px} /* specimen well: decorative, aria-hidden; everything inside is sized off the well's inline size (cqi) */ #platform .plat__well{position:relative;display:grid;place-items:center;height:var(--plat-well-h);overflow:hidden; border-radius:14px;background:var(--navy-2);box-shadow:inset 0 0 0 1px var(--line-on-navy);container-type:inline-size} #platform .plat__well.is-instant *,#platform .plat__well.is-instant *::before{transition:none} /* 1 · document: excerpt sheet at -2°, cite overlapping its lower-right edge (level, not tilted) */ #platform .plat__doc{--sheet-fs:clamp(14px, 5.3cqi, 18px);position:relative;font-size:var(--sheet-fs);padding:0 1.25em 1.6em 0; transform:translate3d(.35em,.15em,0)} #platform .plat__tilt{transform:rotate(-2deg)} #platform .plat__doc .sheet{width:15.5em} #platform .plat__doc .sheet__lines li:first-child,#platform .plat__doc .sheet__lines li:last-child{color:var(--slate)} #platform .plat__cites{position:absolute;right:0;bottom:0;z-index:3;width:max-content;font-size:16px} #platform .plat__cites .cite{--i:0;flex-wrap:nowrap;box-shadow:var(--sh-2);transform-origin:100% 50%} #platform .plat__doc:not(.is-cited) .cite{opacity:0;transform:scale(.72)} /* 2 · ERP: Infor LN record + typed call + write steps */ #platform .plat__erp{display:flex;flex-direction:column;align-items:center;gap:16px} #platform .plat__erp .rec{--rec-fs:clamp(13px, 5.2cqi, 17px);width:17.65em} #platform .plat__erp .rec__row{--cols:1.1fr 1fr 1fr;transition:opacity 280ms var(--ease-settle),transform 520ms var(--ease-arrive); transition-delay:calc(var(--i,0)*60ms)} #platform .plat__erp .rec__row>span{font-size:.6em} #platform .plat__erp .rec__row--head>span{font-size:.44em} #platform .plat__erp .rec__row>span:last-child{text-align:right;font-variant-numeric:lining-nums tabular-nums} #platform .plat__erp .rec__call{font-size:.6em} #platform .plat__erp .rec__foot{padding:.4em 1.12em .95em;font-size:.58em;line-height:1.35;text-wrap:balance} #platform .plat__erp .rec__call{display:flex;align-items:center;min-height:1.3em;margin:.22em 0 .5em} /* holds its line while empty (no shift when typing starts) */ #platform .plat__call{min-width:0;overflow:hidden;white-space:nowrap} #platform .plat__caret{display:none;height:1.2em;margin-left:1px} #platform .plat__erp.is-typing .plat__caret{display:inline-block} #platform .plat__erp:not(.is-rows) .rec__row:not(.rec__row--head){opacity:0;transform:translate3d(0,8px,0)} #platform .plat__erp .rec__foot{transition:opacity 280ms var(--ease-settle) 300ms} /* the row count lands with the rows */ #platform .plat__erp:not(.is-rows) .rec__foot{opacity:0;transition-delay:0s} #platform .plat__writes{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:0 .55em;margin:0; font-family:var(--f-mono);font-size:clamp(11.5px, 3.9cqi, 12.5px);line-height:1.5;color:var(--on-navy-3);white-space:nowrap} #platform .plat__wl{color:var(--on-navy-4)} #platform .plat__arr{color:var(--on-navy-4)} #platform .plat__step{transition:opacity 280ms var(--ease-settle);transition-delay:calc(var(--i,0)*180ms)} #platform .plat__erp:not(.is-lit) .plat__step{opacity:.4} /* 3 · approved template: four slots cross-fade to values, then the DRAFT watermark */ #platform .plat__tpl{--sheet-fs:clamp(13px, 5.2cqi, 17px);font-size:var(--sheet-fs)} #platform .plat__tpl .sheet{width:16.2em;min-height:0;padding-bottom:1.95em} #platform .plat__slots{display:grid;gap:.3em;margin:.75em 0 .85em} #platform .plat__slot{display:grid;grid-template-columns:5.6em minmax(0,1fr);align-items:center;column-gap:.4em;min-height:1.2em} #platform .plat__slot dt{font-size:.6em;line-height:1.3;color:var(--slate)} #platform .plat__slot dd{display:grid;margin:0;min-width:0} #platform .plat__ph,#platform .plat__val{grid-area:1/1;justify-self:start;align-self:center;white-space:nowrap; transition:opacity 320ms var(--ease-settle);transition-delay:calc(var(--i,0)*120ms)} #platform .plat__ph{padding:.12em .45em;border:1px dashed var(--hair-2);border-radius:3px;font-family:var(--f-mono);font-size:.56em; line-height:1.3;color:var(--slate)} #platform .plat__val{font-weight:600;font-size:.72em;line-height:1.3;color:var(--graphite)} #platform .plat__tpl.is-filled .plat__ph{opacity:0} #platform .plat__tpl:not(.is-filled) .plat__val{opacity:0} #platform .plat__tpl .sheet__rule{margin:.5em 0} #platform .plat__tpl .sheet__ln{height:.22em;margin-bottom:.4em} /* Centred across the sheet; its vertical centre sits at 69 % so the diagonal runs over the body lines and the white space right of the short values. At 50–64 % the middle word lands on the bold values and reads "RE…IRED" (§6 S03). */ #platform .plat__wm{position:absolute;left:50%;top:69%;z-index:3;font-family:var(--f-label);font-weight:800;font-size:.9em;line-height:1; letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;color:var(--slate);opacity:.14;pointer-events:none; transform:translate(-50%,-50%) rotate(-24deg);transition:opacity 400ms var(--ease-settle)} #platform .plat__tpl:not(.is-draft) .plat__wm{opacity:0} /* INTEGRATION DEVIATION from §6 S03 (lead ruling, integration round 1): §6 sets margin-top and padding-top to --sec-y, which made the pillars → capabilities gap (~280–320 px at 1280–1920) as tall as a seam between two different surfaces. Shortened to read as a sub-chapter: 96 + 80 = 176 px at every width ≥ 631 px, with the rule nearer the heading it introduces. min() keeps narrow screens from growing past the §6 value (--sec-y is 80 px at 390, where the literal 96 + 80 would be taller than a mobile section seam). */ #capabilities{margin-top:min(var(--s-11), var(--sec-y))} #capabilities>.wrap{position:relative;padding-top:min(var(--s-10), var(--sec-y))} #capabilities .caps__rule{position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;background:var(--line-on-navy)} #capabilities .caps__head{margin-bottom:var(--head-gap)} #capabilities .caps__sheet{position:relative} #capabilities .caps__grid{display:grid;margin:0;padding:0;list-style:none} #capabilities .caps__cell{position:relative;display:flex;flex-direction:column;padding:26px 0 28px;border-top:1px solid var(--line-on-navy); transition:opacity var(--d-settle) var(--ease-settle),transform var(--d-reveal) var(--ease-arrive); transition-delay:calc(160ms + var(--i,0)*60ms)} #capabilities .caps__top{display:flex;align-items:center;gap:14px} #capabilities .caps__num{font-family:var(--f-label);font-weight:800;font-size:13px;line-height:1;letter-spacing:.08em; font-variant-numeric:lining-nums tabular-nums;color:var(--on-navy-3)} #capabilities .caps__ico{width:26px;height:26px;color:var(--on-navy-3);transition:color var(--d-micro) var(--ease-settle)} #capabilities .caps__item{margin-top:14px;font-weight:600;font-size:18px;line-height:1.3;letter-spacing:-.005em;color:var(--white);text-wrap:balance} #capabilities .caps__tag{display:flex;align-items:baseline;gap:10px;margin-top:auto;padding-top:12px;font-family:var(--f-mono);font-size:var(--fs-mono); line-height:1.4;color:var(--on-navy-3);transition:color var(--d-micro) var(--ease-settle)} #capabilities .caps__tag::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--cyan);transform:translateY(-1px)} #capabilities .caps__lines{display:none} #capabilities .caps__illus{margin-top:24px} /* §2.1: the evidence tags quote §5 sample data */ #capabilities .caps__sheet.is-instant *{transition:none} #capabilities .caps__sheet:not(.is-drawn) .caps__cell{opacity:0;transform:translate3d(0,12px,0)} /* ═══ S04 how — 04-how.html ═══ */ #how{--how-cg:clamp(28px, 4.6vw, 72px);--how-ind:44px;--how-rx:10px;--how-fg:48px} #how .how__head{margin-bottom:var(--head-gap)} #how .how__legend{margin:0 0 20px} /* ── stacked list (static layout) ── */ #how .how__steps{position:relative;margin:0;padding:0;list-style:none} #how .how__item{position:relative;padding-bottom:clamp(56px, 6.4vw, 112px)} #how .how__item:last-child{padding-bottom:0} #how .how__rail{position:absolute;left:var(--how-rx);top:31px;bottom:-4px;width:1px;background:var(--hair-2);transform-origin:50% 0} #how .how__txt{position:relative;padding-left:var(--how-ind)} #how .how__n{position:absolute;left:0;top:2px;width:21px;padding:3px 0 4px;background:var(--cloud);font-family:var(--f-label);font-weight:800; font-size:13px;line-height:18px;letter-spacing:.04em;text-align:center;color:var(--link);font-variant-numeric:lining-nums tabular-nums} #how .how__t{font-weight:700;font-size:22px;line-height:1.2;letter-spacing:-.012em;color:var(--navy)} #how .how__d{margin-top:10px;max-width:26em;font-size:17px;line-height:1.6;color:var(--graphite)} #how .how__fig{position:relative;z-index:1;margin-top:24px;padding:20px;container:how-fig / inline-size} /* ── shared figure parts ── */ #how .how__mini{position:relative} #how .how__cap{font-size:14px;line-height:1.45;color:var(--slate)} #how .how__note{font-size:14px;line-height:1.45;color:var(--slate)} #how .how__note b{font-weight:700;color:var(--graphite)} #how .how__count{font-family:var(--f-label);font-weight:800;font-size:11px;line-height:1.35;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);white-space:nowrap} #how .how__count--in{color:var(--merino-blue)} /* request card */ #how .how__rq{position:relative;padding:14px 16px 15px;background:var(--white);border:1px solid var(--hair);border-radius:var(--r-md);box-shadow:var(--sh-1);color:var(--graphite)} #how .how__rq-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 9px} #how .how__rq-lbl{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-label);font-weight:800;font-size:11px;line-height:1;letter-spacing:.14em; text-transform:uppercase;color:var(--slate)} #how .how__rq-lbl svg.i{width:14px;height:14px} #how .how__who{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--graphite);white-space:nowrap} #how .how__av{display:grid;place-items:center;flex:none;width:22px;height:22px;border-radius:50%;background:var(--tint-blue);color:var(--merino-blue)} #how .how__av svg.i{width:14px;height:14px} #how .how__rq-q{font-size:16px;line-height:1.38;font-weight:700;letter-spacing:-.005em;color:var(--navy)} /* identity rows */ #how .how__idl{margin:0;padding:0;list-style:none} #how .how__idl li{display:flex;align-items:center;gap:11px;min-height:38px;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.3;color:var(--graphite)} #how .how__idl li:last-child{border-bottom:0} #how .how__idl b{font-weight:700} #how .how__ck{position:relative;display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hair-2)} #how .how__ck-f{position:absolute;inset:0;border-radius:50%;background:var(--cyan-ink)} #how .how__ck svg.i{position:relative;width:12px;height:12px;color:var(--white);stroke-width:2.6} /* document tiles */ #how .how__tile{position:relative;display:block;width:var(--tw,40px);height:var(--th,46px);padding:10px 7px 0;background:var(--white);border:1px solid var(--hair-2); border-radius:4px;box-shadow:var(--sh-1)} #how .how__tile i{display:block;height:3px;margin:0 0 4px;border-radius:2px;background:var(--bar)} #how .how__tile i:nth-child(2){width:72%} #how .how__tile i:nth-child(3){width:86%} #how .how__tile i:nth-child(4){width:58%} #how .how__tile-b{position:absolute;left:-1px;right:-1px;top:-1px;height:3px;border-radius:4px 4px 0 0;background:var(--merino-blue)} /* scope boundary */ #how .how__bnd{position:relative;display:grid;grid-template-columns:repeat(4, var(--tw,40px));gap:12px 16px;width:max-content;padding:28px 20px 20px; border:1.25px solid var(--merino-blue);border-radius:14px} #how .how__tag{position:absolute;left:12px;top:0;display:inline-flex;align-items:center;gap:6px;padding:0 7px;background:var(--white);transform:translateY(-50%); font-family:var(--f-label);font-weight:800;font-size:11px;line-height:1.5;letter-spacing:.14em;text-transform:uppercase;color:var(--merino-blue);white-space:nowrap} #how .how__tag svg.i{width:14px;height:14px} /* scored passages */ #how .how__psgs{display:grid;gap:6px;margin:0;padding:0;list-style:none} #how .how__psg{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:14px;align-items:center;min-height:48px;padding:7px 12px 7px 14px; background:var(--white);border:1px solid var(--hair);border-radius:9px;box-shadow:var(--sh-1);color:var(--graphite)} #how .how__psg-r{grid-column:1;min-width:0;font-family:var(--f-mono);font-size:11.5px;line-height:1.35;color:var(--slate);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #how .how__psg-x{grid-column:1;min-width:0;font-size:14px;font-weight:600;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #how .how__psg-s{grid-column:2;grid-row:1 / span 2;display:grid;grid-template-columns:auto 16px;align-items:center;column-gap:7px;font-size:15px;line-height:1;color:var(--graphite)} #how .how__psg-s .num{grid-area:1 / 1;text-align:right} #how .how__psg-s svg.i{grid-column:2;width:16px;height:16px;color:var(--cyan-ink)} #how .how__psg.is-pass::before{content:"";position:absolute;left:-1px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--cyan);transform-origin:50% 0} #how .how__psg.is-weak{background:var(--quiet);border-color:transparent;box-shadow:none} #how .how__psg.is-weak :is(.how__psg-x,.how__psg-s){color:var(--slate)} /* threshold row (static figure 03) */ #how .how__gaterow{display:flex;align-items:center;gap:12px;padding:9px 0} #how .how__thv{flex:none;font-size:13px;color:var(--merino-blue)} #how .how__gaterow .gate{flex:1;height:22px} #how .how__gaterow .gate__line{position:absolute;left:0;right:0;top:50%;margin-top:-.75px} #how .how__gaterow .gate__lbl{position:absolute;right:0;top:50%;transform:translateY(-50%)} /* per-figure layouts (container queries on the figure card) */ #how .how__mini--id{display:grid;gap:20px} #how .how__idw{display:grid;gap:10px} #how .how__mini--scope{display:grid;gap:18px} #how .how__scope-t{display:grid;gap:8px;align-content:center} #how .how__mini--ev .how__cap{margin-top:12px} #how .how__mini--ans,#how .how__mini--ref{display:grid;row-gap:40px} #how .how__srcs{display:grid;gap:8px} #how .how__mini--ans .how__cap,#how .how__mini--ref .how__cap{margin-top:-26px} /* figure 04 keeps the key passage whole: it may wrap to a second line, never ellipsize */ #how .how__mini--ans .how__psg-x{white-space:normal;overflow:visible;text-overflow:clip} /* no-JS: the connectors MM draws in figures 04 and 05, as static hairlines (JS draws the real threads) */ #how:where(.no-js *) :is(.how__srcs,.how__mini--ref .how__rq){position:relative} #how:where(.no-js *) :is(.how__srcs,.how__mini--ref .how__rq)::after{content:"";position:absolute;left:50%;top:100%;width:1.5px;height:40px;margin-left:-.75px;background:var(--cyan)} #how:where(.no-js *) .how__mini--ref .how__rq::after{background:var(--slate)} /* ── pinned mode (JS adds .is-pinned at ≥ 1100 × ≥ 640 with motion allowed) ── */ #how .how__vp,#how .how__kick,#how .how__cv-illus{display:none} /* the steps nav exists only for the pinned canvas: after a resize/zoom out of pinned mode it must not duplicate the stacked list (its buttons scroll a 400vh track that no longer exists) */ #how:not(.is-pinned) .how__nav{display:none} #how .how__kick{margin:0 0 max(8px, calc(44px * var(--how-k, 1) - 18px));font-family:var(--f-label);font-weight:800;font-size:11.5px;line-height:18px; letter-spacing:.18em;text-transform:uppercase;color:var(--slate);white-space:nowrap} /* steps column */ #how .how__nav{margin:0;padding:0;list-style:none} #how .how__ni{position:relative;padding-left:22px;transition:transform 460ms var(--ease-arrive)} #how .how__ni-rule{position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--hair-2);overflow:hidden} #how .how__ni-rule i{position:absolute;inset:0;background:var(--cyan);transform:scaleY(var(--lp,0));transform-origin:50% 0} #how .how__ni-h{margin:0;font-size:inherit} /* the button bleeds 10 px each side, so its focus ring clears the numeral and title instead of hugging them */ #how .how__step{display:block;width:calc(100% + 20px);min-height:44px;margin-inline:-10px;padding:9px 10px;border:0;background:none;text-align:left;border-radius:6px} #how .how__ni-n{display:block;font-family:var(--f-label);font-weight:800;font-size:12px;line-height:1.3;letter-spacing:.16em;color:var(--slate); font-variant-numeric:lining-nums tabular-nums} #how .how__ni-t{display:block;margin-top:3px;font-weight:700;font-size:19px;line-height:1.25;letter-spacing:-.01em;color:var(--slate)} #how .how__step:hover .how__ni-t{color:var(--graphite)} #how .how__ni.is-on .how__ni-n{color:var(--link)} #how .how__ni.is-on .how__ni-t{color:var(--navy)} #how .how__ni-d{margin:5px 0 12px;max-width:none;font-size:16px;line-height:1.55;color:var(--graphite)} #how .how__ni:not(.is-on) .how__ni-d{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} #how .how__ni.is-on .how__ni-d{animation:how-rise 520ms var(--ease-arrive) both} @keyframes how-rise{from{opacity:0;transform:translate3d(0,8px,0)}to{opacity:1;transform:none}} /* canvas (900 × 680 design box, scaled by k) */ #how .how__cv{position:absolute;left:0;top:0;width:900px;height:680px;transform-origin:0 0} #how .how__cv .how__c{position:absolute;left:0;top:0;margin:0} #how .how__lines{position:absolute;left:0;top:0;width:900px;height:680px;max-width:none;overflow:visible} #how .how__zh{fill:none;stroke:var(--hair-2);stroke-width:1} #how .how__flow{fill:none;stroke:var(--hair-2);stroke-width:1.25;stroke-linecap:round;stroke-dasharray:1 1} #how .how__frame{fill:none;stroke:var(--merino-blue);stroke-width:1.25;stroke-dasharray:1 1} #how .how__axis{stroke:var(--hair-2);stroke-width:1;stroke-dasharray:1 1} #how .how__thr{stroke:var(--merino-blue);stroke-width:1.5;stroke-dasharray:1 1} #how .how__node{fill:var(--cloud);stroke:var(--merino-blue);stroke-width:1.5} #how .how__slot{fill:none;stroke:var(--hair-2);stroke-width:1;stroke-dasharray:1 1} #how .how__zl{position:absolute;top:0;margin:0;font-family:var(--f-label);font-weight:800;font-size:11.5px;line-height:18px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate);white-space:nowrap} #how .how__zl b{margin-right:7px;font-weight:800;color:var(--link)} #how .how__axl{position:absolute;margin:0;font-family:var(--f-label);font-weight:700;font-size:11px;line-height:14px;letter-spacing:.14em;text-transform:uppercase; color:var(--slate);white-space:nowrap;transform:translate(-100%,-50%)} #how .how__cv .how__axl--c{transform:translate(-50%,-50%)} #how .how__cv .how__axv{font-weight:800;font-size:12px;letter-spacing:.04em;color:var(--merino-blue)} #how .how__cv .how__rq-q{position:relative;height:44px} #how .how__cv .how__rq-q>span{position:absolute;left:0;top:0;right:0} #how .how__cv .how__tag{background:var(--cloud)} #how .how__cv .how__tile{position:absolute;left:0;top:0;--tw:38px;--th:44px;padding:9px 6px 0;will-change:transform,opacity} #how .how__cv .how__tile-b{opacity:0} #how .how__cv .how__psg,#how .how__cv .how__psg.is-weak{position:absolute;left:0;top:0;width:276px;height:46px;min-height:0;padding:0 12px 0 14px; background:none;border:0;box-shadow:none;transform-origin:0 0;align-content:center} #how .how__cv .how__psg>:is(.how__psg-r,.how__psg-x,.how__psg-s){position:relative;z-index:1} #how .how__cv .how__psg-r{font-size:11px} #how .how__cv .how__psg-x{font-size:13px} #how .how__psg-face,#how .how__psg-q{position:absolute;inset:0;border-radius:9px} #how .how__psg-face{background:var(--white);box-shadow:var(--sh-1),0 0 0 1px var(--hair)} #how .how__psg-q{background:var(--quiet);opacity:0} #how .how__psg-rule{position:absolute;z-index:2;left:0;top:9px;bottom:9px;width:2px;border-radius:2px;background:var(--cyan);opacity:0} #how .how__cv .how__sb{opacity:0} #how .how__cv .gate__lbl{position:absolute;margin:0;transform:translate(-100%,-50%);transition:none} #how .how__lines--top,#how .how__cv .gate__lbl,#how .how__cv .how__axv{z-index:6} #how .how__cv .answer-card{width:262px} /* the 262 px card cannot hold title + locator on one line: the locator takes its own line, aligned under the title */ #how .how__cv .cite__l{flex-basis:100%;padding-left:22px} #how .how__cv .wd{transition:none} #how .how-still .cite{transition:none} #how .how__cv .mm-threads{width:900px;height:680px;max-width:none} /* ═══ S05 security — 05-security.html ═══ */ #security{--sg-gap:clamp(56px, calc(2vw + 36px), 64px);--sg-rh:40px;--sg-rows:5} /* ── row 1 ─────────────────────────────────────────────────────────────── */ #security .sg-top{display:grid;row-gap:clamp(56px, 7vw, 72px)} #security .sg-intro .lede{margin-top:24px;max-width:30em} #security .sg-items{margin-top:clamp(32px, 3vw, 44px);list-style:none;border-bottom:1px solid var(--hair)} #security .sg-item{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:18px;padding:20px 0;border-top:1px solid var(--hair)} #security .sg-item__ic{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--cloud);color:var(--merino-blue)} #security .sg-item__ic svg.i{width:20px;height:20px} #security .sg-item__t{padding-top:1px;font-weight:700;font-size:18px;line-height:1.3;letter-spacing:-.008em;color:var(--navy)} #security .sg-item__d{margin-top:6px;font-size:var(--fs-small);line-height:1.55;color:var(--slate);max-width:33em} #security .sg-askas__p{margin-top:12px;font-size:var(--fs-body);line-height:1.55;color:var(--graphite);max-width:33em} /* the ask-as card */ #security .sg-card{position:relative;margin-top:28px;border-radius:var(--r-xl)} #security .sg-card__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:14px 20px 15px; background:var(--cloud);border-bottom:1px solid var(--hair);border-radius:calc(var(--r-xl) - 1px) calc(var(--r-xl) - 1px) 0 0} #security .sg-card__q{flex-basis:100%;font-weight:600;font-size:clamp(17px, calc(.3vw + 15.5px), 20px);line-height:1.3;letter-spacing:-.01em;color:var(--navy)} #security .sg-ids{padding:13px 20px 16px;border-bottom:1px solid var(--hair)} #security .sg-ids__lbl{margin-bottom:9px} #security .sg-ids__g{display:grid;gap:10px} #security .sg-id{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:3px; align-content:center;align-items:center;width:100%;min-height:64px;margin:0;padding:10px 40px 10px 12px;border:0;border-radius:12px; background:var(--cloud);box-shadow:inset 0 0 0 1px var(--hair);color:var(--graphite);text-align:left; transition:background-color var(--d-micro) var(--ease-settle)} #security .sg-id:hover{box-shadow:inset 0 0 0 1px var(--hair-2),var(--sh-1);background:var(--white)} #security .sg-id:focus-visible{border-radius:12px} #security .sg-id__ic{grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--white); box-shadow:inset 0 0 0 1px var(--hair);color:var(--slate)} #security .sg-id__ic svg.i{width:19px;height:19px} #security .sg-id__d{align-self:end;font-weight:700;font-size:15px;line-height:1.2;color:var(--navy);white-space:nowrap} #security .sg-id__r{align-self:start;line-height:1.2} #security .sg-id::before,#security .sg-id::after{content:"";position:absolute;top:50%;border-radius:50%} #security .sg-id::before{right:14px;width:16px;height:16px;margin-top:-8px;box-shadow:inset 0 0 0 1.5px var(--hair-2);background:var(--white)} #security .sg-id::after{right:18px;width:8px;height:8px;margin-top:-4px;background:var(--merino-blue);opacity:0;transform:scale(.4); transition:opacity 200ms var(--ease-settle),transform 280ms var(--ease-arrive)} #security .sg-id[aria-checked="true"]{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--merino-blue),var(--sh-1)} #security .sg-id[aria-checked="true"] .sg-id__ic{background:var(--merino-blue);box-shadow:none;color:var(--white)} #security .sg-id[aria-checked="true"] .sg-id__r{color:var(--merino-blue)} #security .sg-id[aria-checked="true"]::before{box-shadow:inset 0 0 0 1.5px var(--merino-blue)} #security .sg-id[aria-checked="true"]::after{opacity:1;transform:none} /* no-JS: switching needs the script, so the identity is a plain status line, not a control (FINAL-SPEC §6 S05) */ #security .sg-ids__lbl:where(.no-js *){display:none} #security .sg-signed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px} #security .sg-signed__who{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;line-height:1.3;color:var(--navy)} #security .sg-signed__who svg.i{width:18px;height:18px;color:var(--merino-blue)} /* body: scope well | answer */ #security .sg-body{position:relative;display:grid} #security .sg-scope{min-width:0;padding:16px 20px 18px;background:var(--cloud)} #security .sg-scope__head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px} #security .sg-scope__meta{margin-top:6px} /* the parts that cross-fade on a switch; the labels ("What this identity can search", "Asked as") stay put */ #security :is(.sg-scope__meta,.sg-asked,.sg-slot,.sg-meta){transition:opacity 300ms var(--ease-settle)} #security .sg-count{font-size:13px;line-height:1.3;color:var(--slate);white-space:nowrap} #security .sg-count .num{font-size:15px;color:var(--navy)} #security .sg-scope__line{font-size:13px;line-height:1.4;color:var(--slate)} #security .sg-tiles{position:relative;display:grid;gap:8px;margin-top:16px;list-style:none} /* positioned: old tiles leave pinned */ #security .sg-tile{position:relative;display:grid;grid-template-columns:16px minmax(0,1fr);column-gap:10px;row-gap:3px;align-content:start; padding:9px 12px 10px 11px;background:var(--white);border:1px solid var(--hair);border-radius:10px;box-shadow:var(--sh-1)} #security .sg-tile>svg.i{grid-row:1 / span 2;width:16px;height:16px;margin-top:1px;color:var(--merino-blue)} #security .sg-tile__t{font-weight:600;font-size:14px;line-height:1.3;color:var(--graphite)} #security .sg-tile__m{font-family:var(--f-mono);font-size:11.5px;line-height:1.3;color:var(--slate)} #security .sg-tile--erp>svg.i,#security .sg-tile--erp .sg-tile__m{color:var(--beyond)} #security .sg-tile::after{content:"";position:absolute;inset:-1px;border:1px solid var(--cyan);border-left-width:2px;border-radius:10px; opacity:0;pointer-events:none;transition:opacity 240ms var(--ease-settle)} #security .sg-tile--erp::after{border-color:var(--beyond)} #security .sg-tile.is-hl::after{opacity:1} #security .sg-tile--more{display:flex;align-items:center;padding:9px 12px 9px 37px;background:transparent;border-color:var(--hair-2);box-shadow:none; font-weight:600;font-size:13.5px;line-height:1.3;color:var(--slate)} #security .sg-more-m{display:none} #security .sg-mark{position:absolute;z-index:2;top:-8px;right:10px;padding:1px 6px;border:1px solid var(--cyan);border-radius:4px;background:var(--white); font-family:var(--f-label);font-weight:800;font-size:11px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap; color:var(--cyan-ink);opacity:0;transform:scale(.6);transform-origin:100% 50%; transition:transform var(--d-snap) var(--ease-snap),opacity 180ms var(--ease-settle)} #security .sg-tile--erp .sg-mark{border-color:var(--beyond);color:var(--beyond)} #security .sg-tile.is-cited .sg-mark{opacity:1;transform:none} #security .sg-ans{display:flex;flex-direction:column;min-width:0;padding:16px 20px 18px;container:sg-ans / inline-size} #security .sg-ans__in{display:flex;flex:1 0 auto;flex-direction:column} #security .sg-ans__lbl{margin-bottom:9px} #security .sg-asked{color:var(--graphite)} #security .sg-slot .answer-card{box-shadow:var(--sh-2),0 0 0 1px var(--hair)} #security .sg-slot .answer-card__src{margin-top:12px;padding-top:10px} #security .sg-slot .answer-card__lbl{margin-bottom:7px} #security .sg-slot .cite{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:start;padding:9px 12px 10px 10px} #security .sg-slot .cite>:not(.sg-inv){grid-column:2} /* the invoice table spans under the icon too */ #security .sg-slot .cite>svg.i{grid-column:1;grid-row:1;margin-top:2px} #security .sg-slot .cite__q{margin-top:5px} #security .sg-slot .cite--erp>svg.i{color:var(--beyond)} #security .sg-inv{grid-column:1 / -1;width:100%;margin-top:6px;border-collapse:collapse;font-family:var(--f-mono);font-size:12px;line-height:1.3; font-variant-numeric:lining-nums tabular-nums;color:var(--graphite)} #security .sg-inv th{padding:4px 6px 5px 0;font-family:var(--f-label);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase; color:var(--slate);text-align:left} #security .sg-inv td{padding:5px 6px 5px 0;border-top:1px solid var(--hair-2);white-space:nowrap} #security .sg-inv :is(th,td):last-child{padding-right:0;text-align:right} #security .sg-meta{display:flex;gap:9px;margin-top:13px;font-size:14px;line-height:1.45;color:var(--slate)} #security .sg-meta svg.i{width:16px;height:16px;margin-top:2px;color:var(--merino-blue)} #security .sg-card__foot{display:grid;gap:8px 28px;padding:12px 20px 14px;border-top:1px solid var(--hair)} #security .sg-card__foot p{display:flex;gap:9px;font-size:14px;line-height:1.45;color:var(--slate)} #security .sg-card__foot svg.i{width:16px;height:16px;margin-top:2px;color:var(--merino-blue)} /* ── row 2: audit strip ─────────────────────────────────────────────────── */ #security .sg-audit{margin-top:var(--sg-gap);border-radius:var(--r-lg)} #security .sg-audit__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 12px 12px 20px} #security .sg-audit__tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;min-width:0} #security .sg-audit__lbl{display:inline-flex;align-items:center;gap:8px;color:var(--navy)} #security .sg-audit__lbl svg.i{width:16px;height:16px;color:var(--merino-blue)} #security .sg-audit__illus{margin-left:auto} #security .sg-pause{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:10px;background:var(--white); box-shadow:inset 0 0 0 1.5px var(--hair-2);color:var(--navy)} #security .sg-pause[hidden]{display:none} /* reduced motion: static strip, no pause control (§6 S05); beats the inline-grid above */ #security .sg-pause:hover{box-shadow:inset 0 0 0 1.5px var(--navy)} #security .sg-pause:focus-visible{border-radius:10px} #security .sg-pause svg.i{width:18px;height:18px} #security .sg-pause .sg-pause__g{display:none} #security .sg-audit.is-paused .sg-pause__p{display:none} #security .sg-audit.is-paused .sg-pause__g{display:block} #security .sg-log{position:relative} #security .sg-log__list{list-style:none} #security .sg-row{position:relative;display:grid;grid-template-columns:84px 112px minmax(0,1fr);column-gap:16px;align-items:center;height:var(--sg-rh); padding:0 20px;border-top:1px solid var(--hair);font-family:var(--f-mono);font-size:13px;line-height:1.2;white-space:nowrap} #security .sg-row>span{min-width:0;overflow:hidden;text-overflow:ellipsis} #security .sg-row__time{font-size:11.5px;color:var(--slate);font-variant-numeric:tabular-nums} #security .sg-row__ev{font-weight:600;color:var(--graphite)} #security .sg-row--erp .sg-row__ev{color:var(--beyond)} #security .sg-row__d{color:var(--slate)} #security .sg-row::before{content:"";position:absolute;left:9px;top:12px;bottom:12px;width:2px;border-radius:1px;background:var(--merino-blue);opacity:0; transition:opacity 600ms var(--ease-settle)} #security .sg-row.is-new::before{opacity:1} #security .sg-audit.is-live .sg-log{height:calc(var(--sg-rows) * var(--sg-rh));overflow:hidden;border-radius:0 0 var(--r-lg) var(--r-lg)} /* ── row 3: frameworks ─────────────────────────────────────────────────── */ #security .sg-fw{margin-top:var(--sg-gap)} #security .sg-fw__p{padding:24px 0;border-block:1px solid var(--hair);font-size:17px;line-height:1.6;color:var(--graphite)} #security .sg-fw__p b{font-weight:700;color:var(--navy);white-space:nowrap} #security .sg-fw__n{margin-top:14px;font-size:var(--fs-meta);line-height:1.5;color:var(--slate);max-width:60em} /* ── row 4: mid-page CTA ───────────────────────────────────────────────── */ #security .sg-cta{display:grid;gap:24px;margin-top:clamp(40px, 3vw + 24px, 56px);padding:28px 24px;border-radius:var(--r-xl);background:var(--cloud)} #security .sg-cta__p{margin-top:8px;font-size:var(--fs-body);line-height:1.5;color:var(--graphite)} /* ═══ S06 merino — 06-merino.html ═══ */ #merino{--mg-step:14px;--mg-slab:64px;--mg-fig-h:360px;--mg-x:74%;--mg-sep:14px} #merino .mg__grid{display:grid;row-gap:64px} #merino .mg__main,#merino .mg__aside{min-width:0} /* heading: "Built by Merino," and "Proven by" are .nowrap units in the markup, so below 389 px (where the second phrase no longer fits one line) it sets "Built by Merino, / Proven by / Experience." — the same stair as 1100–1239 — instead of splitting the first phrase; text-wrap:balance alone would pick "Proven / by Experience." */ #merino .mg__h{max-width:11.5em} #merino .mg__lede{margin-top:28px;max-width:32em} #merino .mg__intro{margin-top:40px;font-size:17px;line-height:1.5;font-weight:600;color:var(--navy)} /* discipline index */ #merino .mg__index{margin:18px 0 0;padding:0;list-style:none;border-bottom:1px solid var(--hair-2)} #merino .mg__row{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr);align-content:center;min-height:76px; padding:17px 0 18px;border-top:1px solid var(--hair-2)} #merino .mg__n{font-family:var(--f-label);font-weight:800;font-size:13px;line-height:25px;letter-spacing:.06em;color:var(--merino-blue); font-variant-numeric:lining-nums tabular-nums} #merino .mg__t{font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.012em;color:var(--navy)} #merino .mg__d{margin-top:5px;font-size:15px;line-height:1.5;color:var(--slate);max-width:34em} /* pull line */ #merino .mg__pull{position:relative;margin-top:40px;padding-left:20px;max-width:24em;font-weight:300;font-size:24px;line-height:1.38; letter-spacing:-.012em;color:var(--navy)} #merino .mg__pull::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:2px;border-radius:1px;background:var(--merino-blue); transform-origin:50% 0;transition:transform 900ms var(--ease-draw) 180ms} /* layered-stack figure: a key to the index (numerals on the layers; 02 spans them all) */ #merino .mg__fig{position:relative;padding-left:46px} #merino .mg__stack{position:relative;display:flex;flex-direction:column;height:var(--mg-fig-h)} #merino .mg__slab{position:relative;display:flex;align-items:center;gap:14px;flex:none;min-height:var(--mg-slab); width:calc(100% - 3*var(--mg-step));margin-left:calc(var(--n,0)*var(--mg-step));padding:10px 18px; background:var(--white);border:1px solid var(--hair-2);border-radius:12px; box-shadow:0 5px 0 -1px var(--white),0 5px 0 0 var(--hair-2),var(--sh-1); transition:opacity 500ms var(--ease-settle),transform 500ms var(--ease-arrive);transition-delay:calc(var(--i,0)*120ms)} #merino .mg__slab--top{border-color:var(--merino-blue);box-shadow:0 5px 0 -1px var(--white),0 5px 0 0 var(--hair-2),var(--sh-2)} #merino .mg__txt{display:grid;gap:7px;min-width:0} #merino .mg__lbl{font-family:var(--f-label);font-weight:700;font-size:11px;line-height:1.2;letter-spacing:var(--tr-label); text-transform:uppercase;white-space:nowrap;color:var(--slate)} /* codes: a dot sits before every code; the list is pulled left by one separator and clipped, so a wrapped line never starts (or ends) on a dot. Two groups of four, so a wrap always splits the list evenly. */ #merino .mg__codes{display:block;overflow:hidden;min-width:0} #merino .mg__codes-in{display:flex;flex-wrap:wrap;row-gap:3px;margin-left:calc(-1 * var(--mg-sep)); font-family:var(--f-mono);font-size:12px;line-height:16px;color:var(--graphite)} #merino .mg__grp{display:flex;white-space:nowrap} #merino .mg__grp>span{position:relative;padding-left:var(--mg-sep)} #merino .mg__grp>span::before{content:"";position:absolute;left:calc(var(--mg-sep)/2 - 1.5px);top:50%;width:3px;height:3px;margin-top:-1.5px; border-radius:50%;background:var(--slate);opacity:.55} #merino .mg__name{font-weight:800;font-size:15px;line-height:16px;letter-spacing:.01em;color:var(--navy);white-space:nowrap} #merino .mg__slab--top .avatar{width:32px;height:32px;border-radius:9px} #merino .mg__slab--top .avatar svg{width:18px;height:18px} #merino .mg__key{flex:none;margin-left:auto;font-family:var(--f-label);font-weight:800;font-size:12px;line-height:1;letter-spacing:.06em; color:var(--merino-blue);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap} #merino .mg__key i{font-style:normal;color:var(--slate);padding:0 .25em} /* integrations: linked nodes */ #merino .mg__nodes{position:relative;display:flex;align-items:center;justify-content:space-between;width:150px;height:16px} #merino .mg__nodes::before{content:"";position:absolute;left:5px;right:5px;top:50%;height:1px;margin-top:-.5px;background:var(--slate);opacity:.45} #merino .mg__nodes>i{position:relative;width:10px;height:10px;border:1.5px solid var(--slate);border-radius:3px;background:var(--white)} /* data & analytics: quiet bars */ #merino .mg__bars{display:flex;align-items:flex-end;gap:3px;height:16px} #merino .mg__bars>i{display:block;width:5px;height:calc(var(--h)*16px);border-radius:1px;background:var(--slate);opacity:.38} /* 02 · Digital Transformation spans every layer: a dimension bracket at the left */ #merino .mg__span{position:absolute;left:0;top:0;bottom:-5px;width:30px} #merino .mg__span::before{content:"";position:absolute;left:14px;top:0;bottom:0;width:10px;border:1px solid var(--slate);border-right:0; border-radius:2px 0 0 2px} #merino .mg__span-n{position:absolute;left:0;top:50%;width:30px;margin-top:-10px;padding:4px 0;background:var(--cloud);text-align:center; font-family:var(--f-label);font-weight:800;font-size:12px;line-height:12px;letter-spacing:.06em;color:var(--merino-blue); font-variant-numeric:lining-nums tabular-nums} /* hover mapping (fine pointer, state only — instant) */ #merino .mg__slab.is-hot{border-color:var(--merino-blue); box-shadow:0 0 0 1px var(--merino-blue),0 5px 0 -1px var(--white),0 5px 0 0 var(--hair-2),var(--sh-2)} #merino .mg__slab.is-hot .mg__lbl{color:var(--merino-blue)} #merino .mg__slab.is-hot .mg__nodes>i{border-color:var(--merino-blue)} #merino .mg__slab.is-hot .mg__nodes::before,#merino .mg__slab.is-hot .mg__bars>i{background:var(--merino-blue);opacity:1} #merino .mg__fig.is-span .mg__span::before{border-color:var(--merino-blue)} /* thread spacers: static threads without JS; connector anchors with JS (.mg-live) */ #merino .mg__link{position:relative;display:block;flex:1 1 0;min-height:20px;align-self:flex-start;width:1.5px;margin-top:5px; margin-left:calc(var(--mg-x) - .75px);background:var(--merino-blue)} #merino .mg__link::before,#merino .mg__link::after{content:"";position:absolute;left:50%;border-radius:50%} #merino .mg__link::before{bottom:0;width:5.2px;height:5.2px;margin:0 0 -2.6px -2.6px;background:var(--merino-blue)} #merino .mg__link::after{top:0;width:6.8px;height:6.8px;margin:-3.4px 0 0 -3.4px;background:var(--white);border:1.5px solid var(--merino-blue)} #merino.mg-live .mg__link{background:none} #merino.mg-live .mg__link::before,#merino.mg-live .mg__link::after{display:none} /* armed (desktop, motion allowed): the script removes .is-built, then adds it back to play */ #merino .mg__fig.is-arming .mg__slab,#merino .mg__fig.is-arming .mg__span::before,#merino .mg__fig.is-arming .mg__span-n{transition:none} #merino .mg__fig:not(.is-built) .mg__slab{opacity:0;transform:translate3d(0,16px,0)} /* 02 spans the stack: its bracket draws bottom → top once the layers have landed, then the numeral settles */ #merino .mg__span::before{transform-origin:50% 100%;transition:transform 700ms var(--ease-draw) 620ms} #merino .mg__span-n{transition:opacity 400ms var(--ease-settle) 1180ms} #merino .mg__fig:not(.is-built) .mg__span::before{transform:scaleY(0)} #merino .mg__fig:not(.is-built) .mg__span-n{opacity:0} /* endorsement + note */ #merino .mg__endorse{display:flex;align-items:center;gap:18px;margin-top:32px} #merino .mg__endorse img{display:block;width:auto;height:48px;flex:none} #merino .mg__endorse-rule{flex:none;width:1px;height:32px;background:var(--hair-2)} #merino .mg__endorse .label{margin:0} #merino .mg__note{margin-top:24px;padding:24px} #merino .mg__note .label{margin:0;color:var(--link)} #merino .mg__note-h{margin-top:12px;font-size:22px;line-height:1.25;text-wrap:pretty} #merino .mg__note-p{margin-top:12px;font-size:15px;line-height:1.6;color:var(--graphite)} #merino .mg__chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0;padding:0;list-style:none} #merino .mg__chips .chip-neutral{background:var(--quiet)} /* ═══ S07 use-cases — 07-use-cases.html ═══ */ #use-cases{--cf-h:540px;--cf-step:52px;--cf-gap:40px;--cf-tab:52px; /* the source column never drops below 258 px: at 244 px the Infor LN records fit their register figures (₹, dates) but their columns sit ~6 px apart, less than one mono character, and each row reads as one run-on string. The thread gap pays for the extra 14 px, so the turn column and the compact card heights stay where they were */ --cf-left:clamp(290px, calc(30vw - 40px), 380px); --cf-srcw:clamp(258px, calc(6vw + 170px), 262px); --cf-link:clamp(30px, calc(8vw - 60px), 64px)} /* ── section head ─────────────────────────────────────────── */ #use-cases .uc__head{display:grid;row-gap:22px;margin-bottom:var(--head-gap)} #use-cases .uc__head .eyebrow{margin-bottom:18px} #use-cases .uc__deck{max-width:30em;color:var(--slate)} /* ── department chips (mobile carousel only) ─────────────── */ #use-cases .cf-chips{display:none} #use-cases .cf-chip{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--hair-2); border-radius:var(--r-pill);background:var(--white);color:var(--graphite);font-weight:600;font-size:15px;line-height:1.2;white-space:nowrap; transition:background-color var(--d-micro) var(--ease-settle),color var(--d-micro) var(--ease-settle),border-color var(--d-micro) var(--ease-settle)} #use-cases .cf-chip[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:var(--white)} /* ── the case file ────────────────────────────────────────── */ #use-cases .cf-list{position:relative} #use-cases .cf{position:relative;margin:0 0 32px} /* hash landings: html's scroll-padding already clears the nav */ #use-cases .cf:last-of-type{margin-bottom:0} #use-cases .cf-spacer{display:none} #use-cases .cf__card{position:relative;overflow:hidden;background:var(--white);border:1px solid var(--hair);border-radius:var(--r-xl); box-shadow:var(--sh-2);transform-origin:50% 0} #use-cases .cf__veil{display:none} /* tab strip */ #use-cases .cf__tab{position:relative;z-index:3;display:flex;align-items:center;gap:18px;min-height:var(--cf-tab);padding:0 32px; background:var(--white);border-bottom:1px solid var(--hair);color:inherit;text-decoration:none} #use-cases .cf__tab:focus-visible{outline-offset:-5px;border-radius:var(--r-xl) var(--r-xl) 0 0} #use-cases .cf__no{font-family:var(--f-label);font-weight:800;font-size:12px;line-height:1;letter-spacing:.14em;text-transform:uppercase; color:var(--slate);white-space:nowrap;font-variant-numeric:lining-nums tabular-nums} #use-cases .cf__no b{font-weight:800;color:var(--navy)} #use-cases .cf__dept{font-weight:800;font-size:19px;line-height:1.2;letter-spacing:-.015em;color:var(--navy);white-space:nowrap; transition:color var(--d-micro) var(--ease-settle)} #use-cases .cf__tab:hover .cf__dept{color:var(--merino-blue)} #use-cases .cf__tag{padding-left:18px;border-left:1px solid var(--hair-2);font-size:15px;line-height:1.3;color:var(--slate);white-space:nowrap} #use-cases .cf__tab .chip-illus{margin-left:auto} /* body */ #use-cases .cf__body{position:relative;z-index:1;display:grid;gap:32px;padding:22px 32px 26px} #use-cases .cf__text{display:flex;flex-direction:column;min-width:0} #use-cases .cf__num{margin:0 0 14px;font-family:var(--f-label);font-weight:800;font-size:var(--fs-num-xl);line-height:.8;letter-spacing:-.035em; color:var(--navy);font-variant-numeric:lining-nums tabular-nums} #use-cases .cf__num i{font-style:normal;color:var(--hair-2)} #use-cases .cf__lead{font-weight:700;font-size:22px;line-height:1.22;letter-spacing:-.018em;color:var(--navy)} #use-cases .cf__k{display:block;margin-bottom:8px;font-family:var(--f-label);font-weight:800;font-size:12px;line-height:1.3;letter-spacing:.16em; text-transform:uppercase;color:var(--merino-blue)} #use-cases .cf__brief{display:flex;flex-direction:column;flex:1 1 auto;margin-top:18px;min-height:0} #use-cases .cf__q{margin-top:8px;font-size:16px;line-height:1.45;color:var(--graphite)} #use-cases .cf__more{margin-top:20px} #use-cases .cf__more>summary{display:none;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 2px; border-top:1px solid var(--hair);list-style:none;cursor:pointer;font-family:var(--f-label);font-weight:700;font-size:11px; letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--link)} #use-cases .cf__more>summary::-webkit-details-marker{display:none} #use-cases .cf__more>summary svg.i{width:18px;height:18px;transition:transform 300ms var(--ease-arrive)} #use-cases .cf__more[open]>summary svg.i{transform:rotate(45deg)} #use-cases .cf__meta{display:grid;gap:10px} #use-cases .cf__meta>div{padding-top:10px;border-top:1px solid var(--hair)} #use-cases .cf__meta p+p{margin-top:5px;font-size:14px;line-height:1.45;color:var(--slate)} /* evidence area: turn rows = [source] [link gap] [question + answer] */ #use-cases .cf__ev{position:relative;display:grid;gap:16px;align-content:center;min-width:0} #use-cases .cf__row{display:grid;grid-template-columns:var(--cf-srcw) minmax(0,1fr);column-gap:var(--cf-link);align-items:center} #use-cases .cf__srcs{display:grid;gap:18px;min-width:0} #use-cases .cf__srcs .sheet{--sheet-fs:17px;width:calc(100% - 10px);padding-top:.9em} #use-cases .cf__srcs .sheet__lines{margin-top:.55em;gap:.36em} #use-cases .cf__srcs .sheet__lines li{text-wrap:pretty} /* §2.4 minimums inside the evidence (not exempt: only the hero's 3D stage is): labels ≥ 11 px, mono ≥ 11.5 px */ /* 11.05 px. At this size "Engineering specification" (§5) may not fit beside its rev chip in a 258 px sheet: the label wraps to a second line instead of ending in an ellipsis (never shorten a register value) */ #use-cases .cf__srcs .sheet__top{align-items:flex-start;font-size:.65em;letter-spacing:.08em} #use-cases .cf__srcs .sheet__top>span:first-child{white-space:normal;overflow:visible;padding-top:.15em} #use-cases .cf__srcs .sheet__foot{font-size:.68em} /* 11.56 px mono */ #use-cases .cf__srcs .sheet__mark{font-size:.65em;letter-spacing:.1em;right:1.4em;bottom:1.1em} /* 11.05 px, centred on the foot line */ #use-cases .cf__srcs .rec{--rec-fs:19px;width:100%} #use-cases .cf__srcs .rec__band>span{font-size:.58em;letter-spacing:.14em} /* 11.02 px */ #use-cases .cf__srcs .rec__title{font-size:.76em} #use-cases .cf__srcs .rec__call{margin:.2em 0 .5em;font-size:.6em;white-space:normal} #use-cases .cf__srcs .rec__row>span{font-size:.6em} #use-cases .cf__srcs .rec__row--head{height:1.05em} #use-cases .cf__srcs .rec__row--head>span{font-size:.58em;letter-spacing:.08em} /* 11.02 px */ #use-cases .cf__srcs .rec__foot{font-size:.61em;padding:.35em .82em .75em} /* 11.59 px mono; inline = the body's .5em */ /* the widest §5 row (INV-30418 · 02 Oct 2026 · ₹4,12,800 at 11.4 px mono) keeps ~11 px between its columns in a 258 px record with the body's inline padding at .5em — never shorten the register values; band and foot keep the same edge. Amounts align right, as a ledger does. */ #use-cases .cf__srcs .rec__band{padding-inline:.5em} #use-cases .cf__srcs .rec__body{padding-inline:.5em} #use-cases .cf__srcs [data-link="c2b"] .rec__row>span:last-child{text-align:right} /* a call breaks only after a "·": each clause and its separator is one .nowrap unit in the markup */ #use-cases .cf__turn{display:grid;gap:8px;min-width:0} #use-cases .cf__turn .q-bubble{max-width:100%;margin-left:auto;padding:9px 14px} #use-cases .cf__turn .answer-card--sm{padding:12px 16px 14px} #use-cases .cf__turn .answer-card__head{margin-bottom:8px} #use-cases .cf__turn .answer-card__text+*{margin-top:9px} #use-cases .cf__turn .answer-card__note{margin-top:7px} /* pre-play states exist only once the script arms a card (never in the shipped markup) */ #use-cases .cf__turn .q-bubble,#use-cases .cf__turn .answer-card,#use-cases .cf__scope{ transition:opacity 500ms var(--ease-settle),transform 700ms var(--ease-arrive)} #use-cases .cf__turn.is-wait .q-bubble{opacity:0;transform:translate3d(0,10px,0)} #use-cases .cf__turn.is-wait-a .answer-card{opacity:0;transform:translate3d(0,12px,0)} #use-cases .cf__scope.is-wait{opacity:0;transform:translate3d(0,-6px,0)} /* Legal: the access-scope strip — resolved server-side after the question, then latched onto the answer */ #use-cases .cf__scope{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 0;margin-bottom:10px;padding:9px 14px 10px; background:var(--white);border:1px solid var(--hair);border-radius:var(--r-md);box-shadow:var(--sh-1)} #use-cases .cf__scope>span{display:inline-flex;align-items:center;gap:8px;min-width:0;line-height:1.3;white-space:nowrap} #use-cases .cf__scope-k{grid-area:1/1;padding-right:14px;font-family:var(--f-label);font-weight:800;font-size:11px;letter-spacing:var(--tr-label); text-transform:uppercase;color:var(--merino-blue)} #use-cases .cf__scope-k svg.i{width:16px;height:16px} /* one text run (not flex): "server-side" is a .nowrap unit inside it and must wrap as a word, not as a flex item */ #use-cases .cf__scope-m{grid-area:1/2;justify-self:end;font-family:var(--f-mono);font-size:12px;color:var(--slate);text-wrap:pretty} #use-cases .cf__scope>.cf__scope-m{display:block} #use-cases .cf__scope-v{grid-area:2/1;padding-right:14px;font-weight:700;font-size:14.5px;color:var(--navy)} #use-cases .cf__scope-f{grid-area:2/2;padding-left:14px;border-left:1px solid var(--hair);font-size:14px;color:var(--graphite); font-variant-numeric:lining-nums tabular-nums} /* the strip answers to its own column, not the viewport: the turn column is ~300 px at 1100 and on phones */ #use-cases .cf__turn{container-type:inline-size} /* a long citation title never leaves one word on its last line ("Master Supply Agreement — / Apex Fasteners") */ #use-cases .cite__t{text-wrap:pretty} /* ── closing mini-CTA ─────────────────────────────────────── */ #use-cases .uc__end{margin-top:clamp(56px, 6vw, 88px)} #use-cases .uc__rule{height:1px;background:var(--hair)} #use-cases .uc__end-in{display:grid;gap:24px;padding-top:clamp(32px, 3vw, 44px)} #use-cases .uc__end-copy .lede{margin-top:10px;color:var(--slate);text-wrap:balance} /* cabinet (JS: .is-stack) */ #use-cases.is-stack .cf{position:sticky;top:calc(var(--nav-h) + 16px + var(--k) * var(--cf-step));margin-bottom:var(--cf-gap)} #use-cases.is-stack .cf:last-of-type{margin-bottom:0} #use-cases.is-stack .cf__card{display:flex;flex-direction:column;height:var(--cf-h);will-change:transform; box-shadow:0 -10px 28px -18px rgba(14,27,46,.22),var(--sh-2)} #use-cases.is-stack .cf__tab{flex:none} #use-cases.is-stack .cf__body{flex:1 1 auto;min-height:0;grid-template-rows:minmax(0,1fr)} #use-cases.is-stack .cf__veil{display:block;position:absolute;inset:0;z-index:2;background:var(--cloud);opacity:0;pointer-events:none} /* a covered file's tab label rides up to stay centred in the sliver the next file leaves (JS: --ty); the repeated "Illustrative example" chip leaves first (--co) and a hairline-thin edge carries no label at all (--to) */ #use-cases.is-stack .cf__tab>*{transform:translate3d(0,var(--ty,0px),0);opacity:var(--to,1)} #use-cases.is-stack .cf__tab>.chip-illus{opacity:calc(var(--to,1) * var(--co,1))} #use-cases.is-stack .cf-spacer{display:block;height:28vh} #use-cases.is-compact{--cf-left:clamp(260px, calc(10vw + 150px), 300px)} #use-cases.is-compact .cf__num{display:none} #use-cases.is-compact .cf__body{padding:18px 28px 20px} /* the §2.4 label minimums cost ~20 px of evidence height: the compact Legal file wins it back here so 1280×720 stays a cabinet */ #use-cases.is-compact .cf__scope{margin-bottom:6px;padding-block:8px 9px} /* an opened brief may outgrow the column: it scrolls, and the wheel chains back to the page at either end (no overscroll containment). 6 px of inline/bottom room keeps the summary's 3 px-offset focus ring unclipped. */ #use-cases.is-compact .cf__text{overflow-y:auto;scrollbar-width:thin;padding:0 6px 6px;margin:0 -6px -6px} #use-cases.is-compact .cf__more>summary{display:flex} #use-cases.is-compact .cf__ev{gap:12px} #use-cases.is-compact .cf__turn{gap:8px} #use-cases.is-compact .cf__srcs{gap:12px} /* Legal's two stacked sheets set the compact card height */ /* ═══ S08 poc — 08-poc.html ═══ */ #poc{--poc-gap:64px;--gs-cols:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr)} #poc .poc__grid{display:flex;flex-direction:column} #poc .poc__head{min-width:0} #poc .poc__h2{margin-bottom:28px} #poc .poc__stmt{max-width:18em} #poc .poc__uses-w{margin-top:48px;display:grid;gap:14px} #poc .poc__uses-lbl{font-weight:600;font-size:17px;line-height:1.4;color:var(--navy)} #poc .poc__uses{list-style:none;border-top:1px solid var(--hair-2)} #poc .poc__uses li{display:grid;grid-template-columns:44px minmax(0,1fr) 22px;align-items:center;column-gap:8px;min-height:52px; padding:8px 0;border-bottom:1px solid var(--hair-2)} #poc .poc__n{font-size:13px;letter-spacing:.08em;color:var(--merino-blue)} #poc .poc__ut{font-weight:600;font-size:17px;line-height:1.35;color:var(--graphite)} #poc .poc__tick{width:20px;height:20px;color:var(--cyan-ink);stroke-width:1.75;stroke-dasharray:21 21;stroke-dashoffset:0} #poc .poc__uses.is-armed .poc__tick{stroke-dashoffset:21} #poc .poc__uses.is-armed.is-drawn .poc__tick{stroke-dashoffset:0;transition:stroke-dashoffset 480ms var(--ease-draw); transition-delay:calc(var(--i,0)*90ms)} #poc .poc__eval{margin-top:32px;max-width:32em} /* ── form card ─────────────────────────────────────────────────────────── */ #poc .poc__form{margin-top:48px;padding:28px 20px 24px;container-type:inline-size;container-name:poc-form} /* #request is a jump target: a first-visit jump aligns the card while the reveal still lifts it 16 px, so it would settle flush on the nav (60) instead of nav + 16 (76). Keep the fade, drop the lift (1,3,0 beats the base reveal rule). */ #poc .poc__form[data-reveal]:not(.is-in){transform:none} #poc .poc__form[data-mode="poc"] [data-when="demo"],#poc .poc__form[data-mode="demo"] [data-when="poc"]{display:none} /* no-JS: data-mode never changes, so the checked radio drives the copy (with JS the script keeps both in step) */ #poc .poc__form[data-mode="poc"]:has(#poc-intent-demo:checked) [data-when="poc"]{display:none} #poc .poc__form[data-mode="poc"]:has(#poc-intent-demo:checked) [data-when="demo"]{display:inline} #poc .poc__title{font-size:clamp(22px, calc(.3vw + 20px), 25px);line-height:1.15;letter-spacing:-.014em} #poc .poc__sub{margin-top:10px;font-size:var(--fs-small);line-height:1.5;color:var(--slate)} #poc .poc__f{display:grid;gap:20px;margin-top:24px} #poc .poc__f[hidden],#poc .poc__body[hidden],#poc .poc__done[hidden]{display:none} #poc .field{display:grid;gap:8px;min-width:0} #poc .field__lbl{display:block;padding:0;font-weight:600;font-size:14px;line-height:1.3;color:var(--graphite);text-wrap:balance} #poc .field__in{display:block;width:100%;min-width:0;height:48px;margin:0;padding:0 14px;border:1px solid var(--hair-2);border-radius:var(--r-sm); background:var(--white);font-size:16px;line-height:1.4;color:var(--graphite); transition:border-color var(--d-micro) var(--ease-settle)} #poc .field__in:hover{border-color:var(--slate)} #poc .field__in:focus-visible{border-radius:var(--r-sm);border-color:var(--merino-blue)} #poc textarea.field__in{height:auto;min-height:120px;padding:11px 14px;line-height:1.5;resize:vertical} #poc .field__sel{position:relative} #poc .field__sel::after{content:"";position:absolute;right:17px;top:50%;width:7px;height:7px;margin-top:-6px;pointer-events:none; border-right:1.5px solid var(--slate);border-bottom:1.5px solid var(--slate);transform:rotate(45deg)} #poc select.field__in{padding-right:44px;appearance:none;-webkit-appearance:none;cursor:pointer} #poc select.field__in:invalid{color:var(--slate)} #poc select.field__in option{color:var(--graphite)} #poc .field__in[aria-invalid="true"]{border-color:var(--graphite);box-shadow:inset 0 0 0 1px var(--graphite)} #poc .field__err{display:flex;align-items:flex-start;gap:7px;font-size:14px;line-height:1.4;color:var(--graphite)} #poc .field__err[hidden]{display:none} #poc .field__err svg.i{width:17px;height:17px;margin-top:1px} /* request type — native radios as a segmented control */ #poc .seg{min-width:0;margin:0;padding:0;border:0} #poc .seg>legend{float:left;width:100%;margin:0 0 8px} #poc .seg__track{clear:both;position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:11px;background:var(--cloud); box-shadow:inset 0 0 0 1px var(--hair)} #poc .seg__thumb{display:none} #poc .seg__opt{position:relative;display:grid} #poc .seg__opt input{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer} #poc .seg__opt label{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 10px;border-radius:8px; font-weight:600;font-size:15px;line-height:1.2;text-align:center;color:var(--slate); transition:color var(--d-micro) var(--ease-settle),background-color var(--d-micro) var(--ease-settle)} #poc .seg__opt input:checked+label{background:var(--white);color:var(--navy);box-shadow:var(--sh-1),0 0 0 1px var(--hair)} #poc .seg__opt input:hover:not(:checked)+label{color:var(--graphite)} #poc .seg__opt input:focus-visible+label{outline:2px solid var(--merino-blue);outline-offset:2px} @supports selector(:has(*)){ #poc .seg__thumb{display:block;position:absolute;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:8px;background:var(--white); box-shadow:var(--sh-1),0 0 0 1px var(--hair);transition:transform var(--d-ui) var(--ease-arrive)} #poc .seg__track:has(input[value="demo"]:checked) .seg__thumb{transform:translate3d(100%,0,0)} #poc .seg__opt input:checked+label{background:transparent;box-shadow:none} } #poc .poc__submit{margin-top:4px;padding:0 16px} #poc .poc__submit>span{text-wrap:balance} #poc .poc__submit[aria-disabled="true"]{cursor:progress} #poc .poc__priv{margin-top:-4px;font-size:13px;line-height:1.5;color:var(--slate)} #poc .poc__priv-link{position:relative;display:inline;margin:0;padding:0;border:0;background:none;font-weight:600;font-size:inherit;line-height:inherit; color:var(--link);white-space:nowrap;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer} /* 44 × 44 hit area (§2.6) without changing the line: the ~20 px inline target grows 13 px up and down, 8 px sideways */ #poc .poc__priv-link::after{content:"";position:absolute;inset:-13px -8px} /* the no-JS