/* ===================================================================== Stride pre-launch site. One stylesheet, mobile first. Breakpoints: 480, 768, 1024, 1280 px (min-width). Colours, type and motion come from the Stride product (stride.css). ===================================================================== */ /* ---------- 1. Tokens ---------- */ :root{ color-scheme:light; --canvas:#f5f5f7; --surface:#ffffff; --soft:#f0f1f4; --sunken:#e9ebef; --text:#1d1d1f; --secondary:#515462; --muted:#6e7180; --faint:#9a9daa; --line:rgba(17,24,39,.08); --line-strong:rgba(17,24,39,.14); --accent:#3a5ccc; --accent-hover:#2f4fb8; --accent-text:#2f4fb8; --accent-soft:rgba(58,92,204,.09); --on-accent:#ffffff; --green:#1f8a4c; --amber:#a96a0b; --red:#c93a3a; --violet:#7652c4; --green-soft:rgba(31,138,76,.10); --amber-soft:rgba(214,140,20,.13); --red-soft:rgba(201,58,58,.09); --violet-soft:rgba(118,82,196,.10); --green-ink:#17723e; --amber-ink:#8a5608; --red-ink:#b13333; --violet-ink:#6a48b6; --hero-a:#e8edfb; --hero-b:#f3effb; --chart-secondary:#dfe3ea; --age-1:#3a5ccc; --age-2:#7d9bff; --age-3:#e0b25a; --age-4:#e08a4a; --age-5:#c93a3a; --brand-gradient:linear-gradient(140deg,#5b7cf0,#3a5ccc 55%,#6b4fd0); --brand-glow:0 4px 12px rgba(58,92,204,.3); --material:rgba(255,255,255,.72); --ink:#0f1530; --aurora-blue:#3a5ccc; --aurora-violet:#7a4fd6; --on-ink:#ffffff; --on-ink-2:rgba(255,255,255,.86); --on-ink-3:rgba(255,255,255,.72); --on-ink-4:rgba(255,255,255,.60); --ink-line:rgba(255,255,255,.08); --ink-line-strong:rgba(255,255,255,.14); --ink-glass:rgba(255,255,255,.12); --ink-outline:rgba(255,255,255,.45); --paper:rgba(233,235,239,.06); --material-night:rgba(15,21,48,.62); --stop-night:#5b7cf0; --focus-night:#8da3f2; --shoe-upper:#fbfcff; --shoe-sole:#dfe5f3; --shoe-outline:#8d9bb8; --shoe-detail:#a3b1cb; --shoe-accent:#b5c4ee; --shoe-seam:#cbd5e8; --shadow-sm:0 1px 2px rgba(16,24,40,.04),0 1px 1px rgba(16,24,40,.03); --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.05); --shadow-lg:0 2px 6px rgba(16,24,40,.06),0 30px 80px rgba(16,24,40,.18); --font:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI",system-ui,"Nirmala UI","Iskoola Pota","Latha","Sinhala Sangam MN","Tamil Sangam MN","Noto Sans Sinhala","Noto Sans Tamil",sans-serif; --font-display:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",system-ui,"Nirmala UI","Iskoola Pota","Latha","Sinhala Sangam MN","Tamil Sangam MN","Noto Sans Sinhala","Noto Sans Tamil",sans-serif; --font-mono:ui-monospace,"Cascadia Mono","SF Mono",Consolas,Menlo,monospace; --spring:cubic-bezier(.2,.8,.2,1); --ease-out:cubic-bezier(.16,1,.3,1); --hdr:56px; --gutter:16px; /* zone text tiers (day by default) */ --fg:var(--text); --fg2:var(--secondary); --fg3:var(--secondary); --stop-c:var(--accent); --focus:var(--accent); } @supports (transition-timing-function:linear(0,1)){ /* Critically damped spring: no overshoot. */ :root{--spring:linear(0,.09 6.25%,.264 12.5%,.442 18.75%,.594 25%,.713 31.25%,.801 37.5%,.908 50%,.96 62.5%,.983 75%,1)} } @media (min-width:480px){:root{--gutter:20px}} @media (min-width:768px){:root{--gutter:32px}} @media (min-width:1024px){:root{--gutter:48px;--hdr:64px}} /* ---------- 2. Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-padding-top:72px;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;interpolate-size:allow-keywords} /* no scroll anchoring: in every demo, what a tap adds appears where the finger is and pushes what is below it down (as Safari always does). With anchoring on, Chrome would instead scroll the page so the button stays put and push the answer (a refusal, the over-limit banner and its two buttons) up under the sticky header */ html{overflow-anchor:none} html.chap-on{scroll-padding-top:120px} /* a jump into a chapter lands clear of the chapter row too, even when it starts from outside the chapters (the row only appears once the jump has landed): 72 + 56 = 128 px, and 120 + 8 = 128 px while the row shows */ [data-chapter],[data-chapter] [id]{scroll-margin-top:56px} html.chap-on [data-chapter],html.chap-on [data-chapter] [id]{scroll-margin-top:8px} @media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} body{margin:0;overflow-x:clip;background:var(--canvas);color:var(--text);font:400 18px/1.55 var(--font); font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility} @media (min-width:1024px){body{font-size:19px}} h1,h2,h3,h4,p,ul,ol,dl,dd,figure,fieldset{margin:0} ul,ol{padding:0;list-style:none} fieldset{border:0;padding:0;min-width:0} legend{padding:0} img,svg{display:block} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0;padding:0;margin:0} button,a,input,label{-webkit-tap-highlight-color:transparent} button,a{touch-action:manipulation} strong,b{font-weight:600} s{text-decoration-thickness:1.5px} h1,h2,h3,h4{text-wrap:balance} p,li,dd,figcaption{text-wrap:pretty} :lang(si),:lang(ta){letter-spacing:0;line-height:1.7} :focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px} main:focus{outline:none} .sprite{position:absolute;width:0;height:0;overflow:hidden} .ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round} .sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:0} .num,.tab{font-variant-numeric:tabular-nums} .wrap{width:100%;max-width:calc(1200px + var(--gutter)*2);margin-inline:auto;padding-inline:var(--gutter)} .skip{position:fixed;left:16px;top:-80px;z-index:200;background:#fff;color:var(--text);padding:12px 16px;border-radius:10px;box-shadow:var(--shadow-lg);font-weight:600;text-decoration:none} .skip:focus{top:12px} /* a section the menu jumps to takes focus (site.js) so the next Tab continues there; it needs no ring of its own */ main>section[tabindex="-1"]:focus{outline:none} /* ---------- 3. Zones ---------- */ .night{background:var(--ink);color:#fff;color-scheme:dark; --fg:#fff; --fg2:var(--on-ink-2); --fg3:var(--on-ink-3); --stop-c:var(--stop-night); --focus:var(--focus-night); --shoe-upper:#f6f8ff; --shoe-sole:#c9d4f5; --shoe-outline:#ffffff; --shoe-detail:#aebcf0; --shoe-accent:#8da3f2; --shoe-seam:#d9e1fb} .day{background:var(--canvas);color:var(--text)} /* product cards keep day colours wherever they sit */ .hcard,.after,.mock,.win,.phone,.pr-card,.pr-sale,.sheet,.fin-done,.stmt,.label-card,.lt-win{--fg:var(--text);--fg2:var(--secondary);--fg3:var(--secondary);--stop-c:var(--accent);--focus:var(--accent);color-scheme:light} /* ---------- 4. Type ---------- */ .display-l{font:750 clamp(40px,calc(3.6vw + 22px),74px)/1.02 var(--font-display);letter-spacing:-.035em} .display-xl{font:750 clamp(56px,11vw,136px)/.98 var(--font-display);letter-spacing:-.035em} .h2{font:700 clamp(32px,calc(2.6vw + 22px),58px)/1.06 var(--font-display);letter-spacing:-.03em} .h3{font:650 clamp(24px,calc(1vw + 20px),32px)/1.15 var(--font-display);letter-spacing:-.02em} .hook{font:700 clamp(26px,calc(2vw + 18px),44px)/1.12 var(--font-display);letter-spacing:-.025em;max-width:24ch} .lead{font-size:19px;line-height:1.5} .eyebrow{font:600 13px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase} @media (min-width:600px){.display-l{letter-spacing:-.04em}.display-xl{letter-spacing:-.045em}} @media (min-width:1024px){.lead{font-size:21px}} .stop{color:var(--stop-c)} /* phrase-aware breaks: a multi-sentence headline breaks between its sentences first ("Get paid. / Promise stock."), and a phrase that is wider than the line still wraps inside itself, so nothing can overflow at 320 px */ .ph{display:inline-block} /* no inline padding: a marker at a line's end could push its own end padding onto an empty extra line */ .fn{position:relative;color:inherit;text-decoration:none;font-size:max(12px,.62em);font-weight:600;vertical-align:super;line-height:0;margin-left:2px} /* the marker is small, but its tap target is 44 x 44 px (the text around it is not interactive) */ .fn::after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px} .fn:hover{text-decoration:underline} .sec-sub{color:var(--fg2);margin-top:16px;max-width:40ch} .eyebrow{color:var(--fg2)} .night .eyebrow{color:var(--on-ink-3)} /* ---------- 5. Components ---------- */ /* brand mark */ .mark{position:relative;isolation:isolate;display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:9px;padding-right:2px; font:750 20px/1 var(--font-display);letter-spacing:-.08em;color:#fff;background:rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px rgba(58,92,204,.3)} .mark::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--brand-gradient);transition:opacity .3s var(--ease-out)} .mark.sm{width:18px;height:18px;border-radius:6px;font-size:12px;padding-right:1px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)} .mark.xs{width:24px;height:24px;border-radius:7px;font-size:16px} .brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:700 21px/1 var(--font-display);letter-spacing:-.04em} /* buttons */ .btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:10px; font:600 15px/1 var(--font);text-decoration:none;white-space:nowrap;border:1px solid transparent; transition:background-color .15s,border-color .15s,color .15s,box-shadow .2s,transform .12s var(--ease-out)} .btn .ico{width:16px;height:16px} .btn:active{transform:scale(.97)} .btn-l{min-height:52px;padding:0 24px;border-radius:12px;font-size:17px} .btn-l .ico{width:18px;height:18px} .btn-s{min-height:44px;padding:0 14px;font-size:14px} .btn-solid{background:var(--accent);color:#fff;isolation:isolate;overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(16,24,40,.12)} .btn-solid:hover{background:var(--accent-hover)} .btn-solid::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .2s; background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.22),transparent 70%)} @media (hover:hover) and (pointer:fine){.btn-solid:hover::after{opacity:1}} .night .btn-solid{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px rgba(91,124,240,.35)} .btn-tonal{background:var(--accent-soft);color:var(--accent-text)} .btn-tonal:hover{background:rgba(58,92,204,.14)} .btn-n{background:#fff;color:var(--text);border-color:var(--line-strong);box-shadow:var(--shadow-sm)} .btn-n:hover{background:var(--soft)} .btn[aria-disabled="true"]{cursor:not-allowed;color:var(--secondary);background:var(--soft);box-shadow:none} .btn[aria-disabled="true"]:active{transform:none} .nudge{display:inline-block;transition:transform .2s var(--ease-out)} a:hover .nudge,button:hover .nudge{transform:translateX(2px)} .tlink{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--accent-text);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .tlink:hover{text-decoration-thickness:2px} .night .tlink{color:var(--on-ink-2)} .icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;color:inherit;transition:background-color .15s} .icon-btn:hover{background:var(--soft)} .icon-btn .ico{width:22px;height:22px} .replay{position:relative;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;color:var(--secondary); border:1px solid var(--line-strong);box-shadow:var(--shadow);transition:opacity .3s,transform .3s var(--spring),background-color .15s} .replay::before{content:"";position:absolute;inset:-6px} .replay .ico{width:16px;height:16px} .replay:hover{background:var(--soft);color:var(--text)} /* pills and chips */ .pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font:600 13px/1 var(--font);white-space:nowrap; background:var(--soft);color:var(--secondary)} .pill .dot{width:6px;height:6px;border-radius:50%;background:var(--faint);flex:none} .pill .ico{width:14px;height:14px;stroke-width:2;margin-left:-2px} .pill.green{background:var(--green-soft);color:var(--green-ink)} .pill.green .dot{background:var(--green)} .pill.amber{background:var(--amber-soft);color:var(--amber-ink)} .pill.amber .dot{background:var(--amber)} .pill.red{background:var(--red-soft);color:var(--red-ink)} .pill.red .dot{background:var(--red)} .pill.violet{background:var(--violet-soft);color:var(--violet-ink)} .pill.violet .dot{background:var(--violet)} .pill.neutral .dot{background:var(--faint)} /* a next step that is the visitor's to take (the finale's "Ready to send"): the accent tint, never green */ .pill.accent{background:var(--accent-soft);color:var(--accent-text)} .pill.accent .dot{background:var(--accent)} .chip{display:inline-block;min-height:30px;padding:5px 12px;border-radius:15px;font:550 14px/20px var(--font);background:var(--soft);color:var(--secondary)} .chip .ico{display:inline-block;width:15px;height:15px;stroke-width:2;vertical-align:-3px;margin-right:5px} .chip.accent{background:var(--accent-soft);color:var(--accent-text);font-weight:600} .chip.violet{background:var(--violet-soft);color:var(--violet-ink);font-weight:600} .chip.neutral{background:var(--soft);color:var(--secondary)} /* outcome line (hero and finale): quiet labels, not pills, so nothing next to the one solid button looks like a second button. A small check in the full-stop blue of its zone, then the outcome in the zone's second text tone. */ .chips{display:flex;flex-wrap:wrap;gap:6px 22px} .chips li{display:inline-flex;align-items:center;gap:7px;min-height:26px;font:600 16px/1.3 var(--font);color:var(--fg2);white-space:nowrap} .chips li .ico{width:16px;height:16px;stroke-width:2.4;color:var(--stop-c)} .night .chips li{color:var(--on-ink-2)} .callout{border-radius:12px;padding:12px 14px;font:500 15px/1.45 var(--font)} .callout.amber{background:var(--amber-soft);color:var(--amber-ink)} .avatar{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;font:600 15px/1 var(--font)} .avatar.sm{width:32px;height:32px;font-size:13px} .avatar.amber{background:var(--amber-soft);color:var(--amber-ink)} .avatar.violet{background:var(--violet-soft);color:var(--violet-ink)} .avatar.blue{background:var(--accent-soft);color:var(--accent-text)} .avatar.green{background:var(--green-soft);color:var(--green-ink)} .sw{display:inline-block;width:10px;height:10px;border-radius:3px;flex:none} /* date chip: big day over a small month */ .dchip{display:inline-grid;place-content:center;justify-items:center;flex:none;width:44px;height:44px;border-radius:10px;background:var(--soft);line-height:1} .dchip b{font:650 17px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--text)} /* the month under the day number: 12 px capitals, the one label in the renders below 13 px (research.md, rello-2016) */ .dchip i{font:600 12px/1 var(--font);font-style:normal;letter-spacing:.06em;text-transform:uppercase;color:var(--secondary);margin-top:3px} .dchip b.rel,.dchip.sm b.rel{font-size:10px;font-weight:700;letter-spacing:.02em;text-transform:uppercase} /* without JavaScript the date chips hold words that are always true: "Today", "+2 / days", and "Earlier" for the cheque already at the bank, which needs a hair less tracking to sit inside the 44 px chip */ .dchip b.rel.rel-w{letter-spacing:0;font-size:9.5px} .dchip.sm{width:38px;height:38px} .dchip.sm b{font-size:15px} /* mock-up language (redesigned UI) */ .mock{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:20px;color:var(--text)} @media (min-width:768px){.mock{padding:24px}} .m-label{font:550 13px/1.3 var(--font);color:var(--muted)} .m-eyebrow{font:600 13px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .m-amt{font:650 34px/1.12 var(--font-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap} .rs{font-size:max(13px,.41em);font-weight:500;letter-spacing:0;color:var(--muted);margin-right:.08em} .num{font:600 15px/1.2 var(--font);font-variant-numeric:tabular-nums;color:var(--text);white-space:nowrap} .note{font:400 13px/1.35 var(--font);color:var(--muted)} .mbtn{display:inline-flex;align-items:center;min-height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line-strong);background:#fff;font:600 14px/1 var(--font);color:var(--text);box-shadow:var(--shadow-sm)} .credit .track{height:8px;border-radius:999px;background:var(--sunken);overflow:hidden} .credit .fill{display:block;height:100%;border-radius:inherit;background:var(--accent);transform-origin:left;transform:scaleX(var(--v,.6))} .credit-cap{font:400 13px/1.35 var(--font);color:var(--muted);margin-top:8px} .chq-rows{display:block} .chq{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;column-gap:12px;min-height:60px;padding:8px 0;border-top:1px solid var(--line)} .chq:first-child{border-top:0} .chq-mid{display:grid;gap:2px;min-width:0} .chq-mid .mono{font-size:14px;color:var(--text)} .chq-end{display:grid;justify-items:end;gap:5px} /* cross-fades and number rolls: both versions ship in the markup, CSS picks one */ .xf,.roll{display:inline-grid;vertical-align:top} .xf>*,.roll>*{grid-area:1/1} .xf>.a,.roll>.a{opacity:0;visibility:hidden} .roll>.a{transform:translateY(6px)} .xf>*{transition:opacity .24s var(--ease-out),visibility 0s linear .24s} .roll>*{transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility 0s linear .4s} .ba-roll .arr{display:none} .chq-end .xf{justify-items:end} /* placards */ .placard{display:grid;gap:2px;margin-top:14px;font:400 15px/1.45 var(--font);color:var(--secondary);max-width:62ch} .placard strong{font-weight:600;color:var(--text)} .night .placard{color:var(--on-ink-3)} .night .placard strong{color:#fff} .placard .ba{display:none;margin-top:4px} html:not(.js) .placard .ba{display:block} .nojs-only{display:none} html:not(.js) .nojs-only{display:block} /* labels that only make sense once the script has filled them in (the footer's WhatsApp and email) */ html:not(.js) .js-only{display:none} /* segmented control (native radios) */ .seg{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:10px;background:var(--soft);max-width:100%} .seg label{position:relative;z-index:1;display:block;cursor:pointer} /* segments are drawn 40 px tall (brief 10.5), but each one's tap target takes the track's padding too: 44 px */ .seg label::before{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px} .seg input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer} .seg label span{display:flex;align-items:center;justify-content:center;min-height:40px;padding:0 14px;border-radius:8px;font:550 14px/1.2 var(--font);color:var(--secondary);white-space:nowrap;transition:color .15s} @media (pointer:coarse){.seg label span{min-height:44px}} .seg input:checked+span{color:var(--text)} .seg input:focus-visible+span{outline:2px solid var(--accent);outline-offset:1px} .seg label:hover span{color:var(--text)} /* the white selected segment carries a #6e7180 hairline, so the choice stands out from the #f0f1f4 track by 4.3:1 (WCAG 1.4.11 asks 3:1; white on the track alone is 1.1:1) */ .seg .glide{position:absolute;z-index:0;left:0;top:0;border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.1),0 0 0 1px var(--muted);pointer-events:none; transform-origin:0 0;transition:transform .42s var(--spring),width 0s,height 0s;opacity:0} .seg.has-glide .glide{opacity:1} html:not(.js) .seg input:checked+span,.seg:not(.has-glide) input:checked+span{background:#fff;box-shadow:0 1px 3px rgba(16,24,40,.1),0 0 0 1px var(--muted)} /* try-it bar under demos */ /* the try-it bar is attached to the foot of its render, so a demo reads as one object: the screen, then its controls */ .tryit{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 16px;border-radius:0 0 18px 18px; background:linear-gradient(#f7f8fa,#fbfbfc);border:1px solid var(--line);border-top:0;box-shadow:var(--shadow)} .js .demo>.mock,.js .demo>.win{border-bottom-left-radius:0;border-bottom-right-radius:0} .demo>.win+.tryit{box-shadow:0 20px 40px -24px rgba(16,24,40,.22)} .tryit-label{color:var(--secondary)} .tryit-btns{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} /* a long demo label ("Try selling these pairs to someone else") wraps inside its button on a 320 px screen instead of running off it */ .tryit-btns>.btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:6px} .reset{font-size:15px} html:not(.js) .tryit,html:not(.js) .replay{display:none!important} /* demo state machine: [data-s] shows at the listed steps, [data-from] from a step on. No JS shows the end state. */ .js .demo:not([data-step]) [data-s]:not([data-s~="0"]), .demo[data-step="1"] [data-s]:not([data-s~="1"]), .demo[data-step="2"] [data-s]:not([data-s~="2"]), .demo[data-step="3"] [data-s]:not([data-s~="3"]), .demo[data-step="4"] [data-s]:not([data-s~="4"]), .demo[data-step="5"] [data-s]:not([data-s~="5"]), .demo[data-step="held"] [data-s]:not([data-s~="held"]), .demo[data-step="approve"] [data-s]:not([data-s~="approve"]), .demo[data-step="approved"] [data-s]:not([data-s~="approved"]), .demo[data-step="reduced"] [data-s]:not([data-s~="reduced"]), html:not(.js) .demo [data-s]:not([data-s~="end"]), .js .demo:not([data-step]) [data-from], .demo[data-step="1"] [data-from]:not([data-from="1"]), .demo[data-step="2"] [data-from="3"],.demo[data-step="2"] [data-from="4"],.demo[data-step="2"] [data-from="5"], .demo[data-step="3"] [data-from="4"],.demo[data-step="3"] [data-from="5"], .demo[data-step="4"] [data-from="5"]{display:none!important} .appear{animation:appear .45s var(--spring) both} @keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}} @keyframes fadein{from{opacity:0}to{opacity:1}} /* ===================================================================== 0. Sticky header ===================================================================== */ .hdr{position:sticky;top:0;z-index:50;color:#fff;transition:color .3s var(--ease-out)} .hdr::before,.hdr::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:opacity .3s var(--ease-out),box-shadow .3s} .hdr::before{background:var(--material-night);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)} .hdr::after{background:var(--material);opacity:0;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)} .hdr[data-zone="day"]{color:var(--text)} .hdr[data-zone="day"]::before{opacity:0} .hdr[data-zone="day"]::after{opacity:1} .hdr.scrolled::before{box-shadow:inset 0 -1px 0 var(--ink-line),0 8px 24px -18px rgba(16,24,40,.25)} .hdr.scrolled::after{box-shadow:inset 0 -1px 0 var(--line),0 8px 24px -18px rgba(16,24,40,.25)} .hdr-bar{display:flex;align-items:center;gap:12px;height:var(--hdr)} .hdr .brand{color:inherit;margin-right:auto;min-height:44px;border-radius:10px} .hdr .wordmark{transition:color .3s} .hdr[data-zone="night"] .mark::before{opacity:0} .hdr[data-zone="night"] .mark{box-shadow:inset 0 1px 0 rgba(255,255,255,.35);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .hdr-nav{display:none;position:relative} .hdr-nav ul{display:flex;gap:4px} .hdr-nav a{position:relative;z-index:1;display:flex;align-items:center;min-height:44px;padding:8px 12px;border-radius:9px;font:550 15px/1 var(--font);text-decoration:none;color:inherit;transition:background-color .15s} .hdr[data-zone="night"] .hdr-nav a:hover{background:rgba(255,255,255,.08)} .hdr[data-zone="day"] .hdr-nav a:hover{background:var(--soft)} .hdr-nav .glide{position:absolute;left:0;top:50%;height:36px;margin-top:-18px;border-radius:9px;opacity:0;background:rgba(255,255,255,.12); transform-origin:0 50%;transition:transform .42s var(--spring),opacity .2s,background-color .3s;pointer-events:none} .hdr[data-zone="day"] .hdr-nav .glide{background:var(--accent-soft)} .hdr-nav.has-current .glide{opacity:1} /* the pill alone is 1.2:1 against the bar, so the current link is also underlined: white at night (over 7:1), accent by day (5:1), WCAG 1.4.11. It glides with the pill. */ .hdr-nav .glide::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:1px;background:currentColor} .hdr[data-zone="day"] .hdr-nav .glide::after{background:var(--accent)} .hdr-actions{display:flex;align-items:center;gap:6px} /* night outline fill: on the navy bar it looks the same as the brief's white 12 % glass, but it keeps the white label at 6.9:1 even while the white hero card scrolls under the frosted bar (the 12 % glass dropped to 4.0:1 there) */ .hdr-cta{min-height:40px;height:40px;padding:0 16px;border-radius:10px;font-size:15px;background:rgba(68,72,94,.55);border-color:var(--ink-outline);color:#fff; transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s} /* drawn 40 px tall (brief 6.0), but its tap target is 44 px: an invisible strip above and below, inside the bar */ .hdr-cta::before{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px} .hdr[data-zone="day"] .hdr-cta{background:#fff;color:var(--text);border-color:var(--line-strong)} .hdr.solid .hdr-cta{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .hdr.solid .hdr-cta:hover{background:var(--accent-hover)} .hdr[data-zone="night"] .hdr-cta:hover{background:rgba(88,93,118,.6)} .hdr[data-zone="day"]:not(.solid) .hdr-cta:hover{background:var(--soft)} .hdr[data-zone="night"]{--focus:var(--focus-night)} .menu-btn{color:inherit} .hdr[data-zone="night"] .menu-btn:hover{background:rgba(255,255,255,.08)} @media (min-width:1024px){ .hdr-nav{display:block} .menu-btn{display:none} .hdr .brand{margin-right:0} .hdr-bar{gap:24px} .hdr-nav{margin-inline:auto} } /* chapter row */ .chapters{position:absolute;left:0;right:0;top:100%;padding:6px 0;opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility 0s linear .2s;color:var(--text)} .chapters::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--material);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%); box-shadow:inset 0 -1px 0 var(--line),0 8px 24px -18px rgba(16,24,40,.25)} .hdr.chap .chapters{opacity:1;visibility:visible;transform:none;transition-delay:0s} .hdr.chap::before,.hdr.chap::after{box-shadow:none} .chap-track{position:relative;display:flex;gap:2px;padding:3px;border-radius:10px;background:var(--soft);overflow-x:auto;scrollbar-width:none;max-width:max-content} .chap-track::-webkit-scrollbar{display:none} .chap-track a{position:relative;z-index:1;display:flex;align-items:center;min-height:38px;padding:0 14px;border-radius:8px;font:550 14px/1 var(--font);white-space:nowrap;color:var(--secondary);text-decoration:none} /* each segment's tap target is the full 44 px height of the track (its 3 px padding above and below included) */ .chap-track a::before{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px} .chap-track a[aria-current="true"]{color:var(--text)} .chap-track .glide{position:absolute;left:0;top:3px;bottom:3px;border-radius:8px;background:#fff;box-shadow:var(--shadow-sm),0 0 0 1px var(--muted);opacity:0; transform-origin:0 50%;transition:transform .42s var(--spring),opacity .2s;pointer-events:none} .chap-track.has-current .glide{opacity:1} @media (min-width:1024px){.chapters .wrap{display:flex;justify-content:center}} /* phones: the row is the 44 px track itself (brief 6.0), docked 8 px under the header button, so the two sticky bars take 100 px of the screen instead of 112; the three segments fit a 360 px screen without scrolling */ @media (max-width:767px){ .chapters{padding:0} .chap-track a{padding:0 12px} } /* solid fallbacks */ @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .hdr::before{background:rgba(15,21,48,.97)} .hdr::after{background:rgba(255,255,255,.97)} .chapters::before{background:rgba(255,255,255,.97)} } .lite .hdr::before,.lite .hdr::after,.lite .chapters::before,.lite .hdr .mark{-webkit-backdrop-filter:none;backdrop-filter:none} .lite .hdr::before{background:rgba(15,21,48,.97)} .lite .hdr::after,.lite .chapters::before{background:rgba(255,255,255,.97)} /* ===================================================================== 1. Hero (night) ===================================================================== */ .hero{position:relative;overflow:clip;display:flex;align-items:center;min-height:min(calc(88svh - var(--hdr)),900px); margin-top:calc(var(--hdr) * -1);padding:calc(var(--hdr) + 20px) 0 40px; background:linear-gradient(rgba(15,21,48,0) 78%,#0f1530), radial-gradient(60% 55% at 12% 8%,rgba(58,92,204,.38),transparent 70%),radial-gradient(55% 50% at 92% 88%,rgba(122,79,214,.30),transparent 70%),#0f1530} /* the aurora fades into the night before the hero ends, so the leak section continues it without a seam */ /* source order is the brief's text block: text, outcomes, button row, reassurance, then the card. From 768 px it shows in that order (from 1024 px the card takes the right-hand columns), so the outcomes and the reasons to trust Stride sit beside the one button. Phones keep the lit card straight under the button row (brief 6.1: its header and "Owes you" must reach a 375 x 700 first screen), then the reassurance and the outcomes. None of the moved items can take focus, so the tab order is the same at every width. */ .hero-grid{display:grid;grid-template-columns:minmax(0,1fr);align-items:start} .hero-a{order:1}.hero-c{order:2}.hero-d{order:3}.hero-e{order:4}.hero-chips{order:5} .hero-eyebrow{color:var(--on-ink-3)} .hero h1{margin-top:12px;color:#fff} .hero h1>span{display:block} .hero h1 .q{margin-left:-.06em} /* narrow phones: each sentence of the headline keeps to one line ("You sold the goods." measures about 8.9 em), so the lit card reaches the first screen; 40 px from 390 px up */ @media (max-width:399px){.hero h1{font-size:clamp(32px,calc((100vw - 32px) / 9),40px)}} .hero-sub{margin-top:16px;color:var(--on-ink-2);max-width:36ch} /* the button row paints above the decorative layers that follow it, so nothing can sit over the link */ .hero-c{position:relative;z-index:1;display:flex;flex-direction:column;align-items:stretch;gap:0;margin-top:20px} .hero-c .btn-solid{width:100%} /* the walkthrough link is the quieter second choice: smaller and lighter than the button's label */ .hero-walk{align-self:flex-start;font-size:17px;font-weight:500} /* phones: under the card's placard, so it is set larger and brighter than the placard, as its own statement */ .hero-reassure{margin-top:32px;font-size:17px;line-height:1.5;color:var(--on-ink-2);max-width:36ch} /* the line breaks between its two sentences where it can; on phones it simply wraps */ .hero-reassure .ph{display:inline} @media (min-width:480px){.hero-reassure{max-width:44ch}.hero-reassure .ph{display:inline-block}} .hero-chips{margin-top:16px} /* short and narrow phones (WhatsApp's in-app browser on a 360 x 640 Android): a slightly tighter top and an 18 px lead (the body size), so the card's header and its "Owes you" figure still reach the first screen */ @media (max-width:399px) and (max-height:700px){ .hero{padding-top:calc(var(--hdr) + 12px)} .hero-sub{font-size:18px;line-height:1.5;margin-top:14px} .hero-c{margin-top:18px} } /* the sneaker stands on the card's top-right corner: its whole side outline shows, heel to toe, and only the heel of the sole tucks under the card. --sw width, --sr tilt, --tuck how far the heel goes under. */ .hero-fig{--sw:clamp(96px,calc(100vw - 254px),136px);--sr:-6deg;--tuck:8px;margin-top:16px} @media (max-width:359px){.hero-fig{margin-top:22px}.hero-eyebrow{letter-spacing:.05em}} @media (min-width:480px){ .hero-c .btn-solid{width:auto}.hero-c{flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px 20px}.hero-walk{align-self:auto} .hero-fig{--sw:168px;--sr:-8deg;--tuck:10px;margin-top:84px} } @media (min-width:768px){ .hero{padding:calc(var(--hdr) + 48px) 0 56px} .hero-a,.hero-chips,.hero-c,.hero-e{max-width:680px} .hero-a,.hero-chips,.hero-c,.hero-d,.hero-e{order:0} .hero h1{margin-top:16px} .hero-sub{margin-top:24px} .hero-chips{margin-top:24px} .hero-c{margin-top:24px} .hero-reassure{margin-top:16px;font-size:16px;line-height:1.45;color:var(--on-ink-3);max-width:46ch} .hero-fig{--sw:200px;--sr:-10deg;--tuck:12px;margin-top:100px} } /* from 1024 px: side by side. Text in the left columns, top-aligned about 48 px under the header, so the button ends near y 560 on any laptop; the card (and the sneaker on its corner) in the right columns. */ @media (min-width:1024px){ .hero{padding:calc(var(--hdr) + 12px) 0 16px} .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;grid-template-rows:auto auto auto auto 1fr} .hero-a,.hero-c,.hero-e,.hero-chips{grid-column:1/7;max-width:none} .hero-a{grid-row:1;padding-top:36px}.hero-chips{grid-row:2}.hero-c{grid-row:3}.hero-e{grid-row:4} .hero-d{grid-column:7/13;grid-row:1/6} .hero-fig{--sw:196px;margin-top:0} .hero-fig .hero-visual{margin-top:84px} /* the headline keeps one sentence per line in the narrower text column */ .hero h1{font-size:min(5vw,74px)} /* the lead at its 40ch measure (brief 9), so the button still ends near y 560 on 1280 x 625 and 1366 x 657 windows */ .hero-sub{max-width:40ch} /* a slightly tighter card, so the first line of the next section still shows at 1440 x 900 (reduced motion too) */ .hcard .chq{min-height:52px;padding:4px 0} } /* laptops (768-860 px tall): a compact card and a smaller sneaker, so the whole card, its placard and the peek line "About 4,750 cheques come back every day." all show on a 1366 x 768 or 1280 x 800 first screen */ @media (min-width:1024px) and (max-height:860px){ .hero{padding-bottom:0} .hero-a{padding-top:28px} .hero-fig{--sw:150px} .hero-fig .hero-visual{margin-top:56px} .hero .hcard{padding:20px} .hcard .hc-bal{margin-top:12px} .hcard .credit{margin-top:10px} .hcard .m-eyebrow{margin-top:12px} .hcard .hc-back{margin-top:6px;padding-top:10px} .hcard .chq{min-height:48px;padding:1px 0} .hcard .chq-end{gap:2px} } @media (min-width:1280px){ .hero-a,.hero-c,.hero-e,.hero-chips{grid-column:1/8} .hero-d{grid-column:8/13} .hero h1{font-size:clamp(40px,calc(3.6vw + 22px),74px)} } .hero-visual{position:relative;max-width:520px;margin-inline:auto;isolation:isolate} /* the only lit thing in the night: a static pool of light behind the card (a gradient, no blur, no motion) */ .hero-visual::before{content:"";position:absolute;z-index:-2;left:-30%;right:-30%;top:-14%;bottom:-22%;pointer-events:none; background:radial-gradient(closest-side,rgba(141,163,242,.42),rgba(120,146,240,.30) 52%,rgba(91,124,240,.14) 72%,rgba(91,124,240,.05) 88%,transparent)} html[data-hero="day"] .hero-visual::before{opacity:.45} /* decorative: it never takes a tap */ .hero-shoe{position:absolute;z-index:-1;pointer-events:none;right:-6px;bottom:calc(100% - var(--tuck));width:var(--sw);height:auto;aspect-ratio:260/113; transform-origin:3% 96%;transform:rotate(var(--sr));filter:drop-shadow(0 18px 16px rgba(0,0,0,.32))} @media (max-width:359px){.hero-shoe{right:-12px}} @media (min-width:768px){.hero-shoe{right:-18px}} /* the ghost reads as a second card behind the first: a cool, translucent white with a hairline edge, showing 14 px */ .ghost-card{position:absolute;inset:0;z-index:-1;border-radius:24px;background:linear-gradient(rgba(232,237,251,.30),rgba(232,237,251,.22)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.30),0 14px 30px -12px rgba(0,0,0,.35);transform-origin:50% 100%;transform:translateY(14px) scale(.94)} .ghost-card i{position:absolute;left:24px;height:8px;border-radius:999px;background:var(--soft);bottom:24px;width:40%} .ghost-card i+i{bottom:40px;width:62%} .hcard{position:relative;background:#fff;border:1px solid rgba(17,24,39,.08);border-radius:24px;padding:18px;color:var(--text); box-shadow:0 2px 6px rgba(16,24,40,.06),0 30px 80px rgba(0,0,0,.35),0 8px 40px rgba(58,92,204,.30)} @media (min-width:480px){.hcard{padding:24px}} .hc-head{display:flex;align-items:center;gap:12px} .hc-name{font:650 19px/1.2 var(--font-display);letter-spacing:-.01em} .hc-meta{font:400 14px/1.35 var(--font);color:var(--muted);margin-top:2px} .hc-bal{margin-top:18px} .hc-bal .m-amt{margin-top:2px} .hc-sub{font:400 14px/1.35 var(--font);color:var(--secondary);margin-top:4px} .hcard .credit{margin-top:14px} .hcard .m-eyebrow{margin-top:18px;margin-bottom:2px} .hcard .hc-back{margin-top:10px;padding-top:12px;border-top:1px solid var(--line)} /* Replay sits just under the card's bottom-right corner, level with the placard title, so it never straddles the card and the ghost; the placard keeps its right edge clear for it */ .hero-replay{position:absolute;right:0;top:calc(100% + 26px);z-index:2;opacity:0;visibility:hidden;transform:scale(.9)} .hero-replay.show{opacity:1;visibility:visible;transform:none} /* the placard starts 16 px below the ghost card's edge */ .hero-fig .placard{margin:30px auto 0;max-width:520px} .js .hero-fig .placard{padding-right:48px} .hero-fig .placard .ba{display:none} html:not(.js) .hero-fig .placard .ba{display:block} /* the one live beat: final values show when .on (or under reduced motion) */ .hcard.on .xf>.b,.hcard.on .roll>.b{opacity:0;visibility:hidden;transition-delay:0s,.24s} .hcard.on .roll>.b{transform:translateY(-6px);transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),visibility 0s linear .4s} .hcard.on .xf>.a,.hcard.on .roll>.a{opacity:1;visibility:visible;transform:none;transition-delay:0s} .hcard .credit .fill{transform:scaleX(.81);transition:transform .6s var(--spring)} .hcard.on .credit .fill{transform:scaleX(.6)} .hcard.instant *,.hcard.instant .credit .fill{transition:none!important} /* ===================================================================== 2. The leak (night) ===================================================================== */ .leak{padding:28px 0 clamp(72px,9vw,152px)} /* side-by-side hero: the peek line sits close under it, so it shows at the foot of a 1440 x 900 first screen */ @media (min-width:1024px){.leak{padding-top:16px}} @media (min-width:1024px) and (max-height:860px){.leak{padding-top:10px}} /* one line on laptops (it peeks at the foot of the first screen); balanced over two lines on phones, never an orphaned "day." */ .peek{font:600 20px/1.35 var(--font);color:var(--on-ink-2);max-width:52ch;text-wrap:balance} .leak-eyebrow{margin-top:48px} .leak-h2{margin-top:16px;font-weight:inherit} .leak-big{display:block;font:750 clamp(56px,11vw,160px)/.95 var(--font-display);letter-spacing:-.045em;color:#fff;font-variant-numeric:tabular-nums} .leak-big .rs{display:block;font-size:.32em;font-weight:500;letter-spacing:-.01em;color:var(--on-ink-4);margin:0 0 .12em .05em} @media (min-width:768px){ .leak-big{display:flex;align-items:flex-start;gap:.06em} .leak-big .rs{margin:.2em 0 0} .leak-big .giant{white-space:nowrap} } .leak-rest{display:block;margin-top:16px;font:650 clamp(24px,calc(1.4vw + 18px),36px)/1.2 var(--font-display);letter-spacing:-.02em;color:#fff;max-width:26ch} .leak-row{display:grid;gap:40px;margin-top:64px} .leak-statement .h3{color:#fff;max-width:18ch} .trend{margin-top:20px;font-size:17px;line-height:1.55;color:var(--on-ink-3);max-width:54ch} .cg-wrap{display:flex;justify-content:center} .cgrid{display:grid;grid-template-columns:repeat(5,48px);gap:10px;padding-top:34px} .cgrid span{position:relative;width:48px;height:22px;border-radius:4px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22)} .cgrid span::before{content:"";position:absolute;left:8px;top:50%;width:40%;height:1.5px;margin-top:-1px;background:rgba(255,255,255,.14);border-radius:2px} .cgrid span::after{content:"";position:absolute;right:7px;top:50%;width:3px;height:3px;margin-top:-1.5px;border-radius:50%;background:rgba(255,255,255,.22)} .cgrid .ret{transform:translateY(-4px);background:#c93a3a;box-shadow:inset 0 0 0 1.5px #c93a3a,0 6px 16px rgba(201,58,58,.35); transition:background-color .4s var(--ease-out),box-shadow .4s,transform .6s var(--spring)} .cgrid .ret::before{background:rgba(255,255,255,.55)} .cgrid .ret::after{background:#fff} .cgrid .ret em{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);font:600 13px/1 var(--font);font-style:normal;color:#fff;background:#c93a3a; padding:5px 8px;border-radius:999px;white-space:nowrap;transition:opacity .3s var(--ease-out) .25s,transform .4s var(--spring) .25s; box-shadow:0 0 0 3px var(--ink)} /* a small tail ties the label to the cheque under it, not to the one it covers */ .cgrid .ret em::after{content:"";position:absolute;left:50%;top:100%;margin-left:-5px;border:5px solid transparent;border-top-color:#c93a3a;border-bottom:0} @media (min-width:768px){ .cgrid{grid-template-columns:repeat(7,56px)} .cgrid span{width:56px;height:26px} } /* wide screens: the 35 cheques fill their half of the row, so the one red cheque carries the section */ @media (min-width:1280px){ .cgrid{grid-template-columns:repeat(7,64px);gap:12px} .cgrid span{width:64px;height:30px;border-radius:5px} .cgrid span::before{left:10px} .cgrid span::after{right:9px} } @media (min-width:1024px){ .leak-row{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center} .leak-statement{grid-column:1/7} .cg-wrap{grid-column:7/13;justify-content:flex-end} } .figs{display:grid;margin-top:64px;border-top:1px solid var(--ink-line-strong)} .fig{padding:20px 0;border-bottom:1px solid var(--ink-line-strong)} .fig-v{font:700 clamp(32px,calc(2vw + 22px),48px)/1.1 var(--font-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:#fff} .fig-c{margin-top:6px;font-size:15px;line-height:1.4;color:var(--on-ink-3)} @media (min-width:768px){ .figs{grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--ink-line-strong)} .fig{border-bottom:0;padding:24px 20px 24px 0} .fig+.fig{border-left:1px solid var(--ink-line-strong);padding-left:20px} } /* tablets: the three values sized to their thirds, so each keeps to one line where it can */ @media (min-width:768px) and (max-width:1023px){.fig-v{font-size:calc(2.6vw + 8px);text-wrap:balance}} @media (min-width:1024px){ .fig{padding:28px 28px 28px 0} .fig+.fig{padding-left:28px} } .drawer{max-width:640px;margin-top:64px;padding:24px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)} .drawer-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap} .drawer-title{font:650 22px/1.2 var(--font-display);letter-spacing:-.015em;color:#fff} .drawer-val{font:650 24px/1.2 var(--font-display);font-variant-numeric:tabular-nums;color:#fff} .drawer-label{display:block;margin-top:12px;font-size:17px;line-height:1.45;color:var(--on-ink-2)} .drawer-ctl{display:flex;align-items:center;gap:10px;margin-top:12px} .step-btn{display:grid;place-items:center;flex:none;width:44px;height:44px;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);color:#fff;transition:background-color .15s} .step-btn:hover{background:rgba(255,255,255,.14)} .step-btn:active{transform:scale(.96)} .range{flex:1;min-width:0;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;--p:8.16%} .range::-webkit-slider-runnable-track{height:6px;border-radius:999px;background:linear-gradient(to right,#5b7cf0 var(--p),rgba(255,255,255,.40) var(--p))} .range::-moz-range-track{height:6px;border-radius:999px;background:rgba(255,255,255,.40)} .range::-moz-range-progress{height:6px;border-radius:999px;background:#5b7cf0} .range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 6px rgba(0,0,0,.4)} .range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:0;box-shadow:0 2px 6px rgba(0,0,0,.4)} .range:focus-visible{outline:none} .range:focus-visible::-webkit-slider-thumb{outline:2px solid #8da3f2;outline-offset:3px} .range:focus-visible::-moz-range-thumb{outline:2px solid #8da3f2;outline-offset:3px} .drawer-out{margin-top:16px;font:500 20px/1.4 var(--font);color:#fff;min-height:2.8em} .drawer-avg{margin-top:12px;font-size:15px;line-height:1.45;color:var(--on-ink-3)} .drawer-note{margin-top:6px;font-size:15px;line-height:1.45;color:var(--on-ink-3);max-width:56ch} html:not(.js) .drawer-ctl{display:none} .leak-hook{margin-top:clamp(72px,8vw,120px);color:#fff} .leak-end{display:grid} @media (min-width:1024px){ .leak-end{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center;margin-top:64px} .leak-end .drawer{grid-column:1/7;margin-top:0} .leak-end .leak-hook{grid-column:8/13;margin-top:0} } /* ===================================================================== 3. Four quiet leaks (night) ===================================================================== */ .leaks{padding:clamp(56px,6vw,96px) 0 clamp(72px,9vw,152px)} .leaks .h2{margin-top:12px;color:#fff} .leak-cards{display:grid;gap:20px;margin-top:48px} .paper{position:relative;border-radius:18px;padding:28px;background-color:var(--paper);border:1px solid rgba(255,255,255,.10); background-image:repeating-linear-gradient(to bottom,transparent 0 31px,rgba(255,255,255,.05) 31px 32px)} .leak-card{rotate:.5deg} .leak-card:nth-child(even){rotate:-.5deg} /* notebook paper: every line of text sits on a ruled line (32 px rhythm, rules aligned to the baselines) */ .leak-card{padding:20px 28px 16px;background-position:0 -10px} .leak-card h3{font:650 22px/32px var(--font-display);letter-spacing:-.01em;color:#fff} .scene{margin-top:0;font-size:18px;line-height:32px;color:var(--on-ink-2)} .ledger-line{margin-top:32px;font:400 15px/32px var(--font-mono);color:var(--on-ink-3);overflow-wrap:anywhere} .ledger-line s{text-decoration-thickness:1.5px} .loss{margin-top:0;padding-left:12px;border-left:3px solid var(--red);font:600 17px/32px var(--font);color:#fff} .leak-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:28px;font-size:15px;color:var(--on-ink-2);text-decoration:underline;text-underline-offset:3px} .leak-link:hover{color:#fff} .leaks-after{margin-top:40px;font-size:19px;line-height:1.5;color:var(--on-ink-3)} @media (min-width:768px){ .leak-cards{grid-template-columns:1fr 1fr;gap:24px} .leak-card:nth-child(1){rotate:-1.2deg}.leak-card:nth-child(2){rotate:.8deg}.leak-card:nth-child(3){rotate:.6deg}.leak-card:nth-child(4){rotate:-.9deg} } /* phones: the night zone is the main device's longest stretch of loss before the answer, so it is set tighter (nothing is cut): shorter gaps between the blocks, slimmer figure rows and slider card, and the notebook cards on a 28 px ruled rhythm (the rules still sit under each line) with the link closer to the loss line */ @media (max-width:767px){ .leak-row,.figs,.drawer{margin-top:48px} .fig{padding:14px 0} .drawer{padding:20px} .leak-hook{margin-top:56px} .leak-cards{margin-top:32px} .leak-card{padding:20px 22px 12px;background-position:0 -6px; background-image:repeating-linear-gradient(to bottom,transparent 0 27px,rgba(255,255,255,.05) 27px 28px)} .leak-card h3{line-height:28px} .scene,.loss{line-height:28px} .ledger-line{margin-top:28px;line-height:28px} .leak-link{margin-top:10px} .leaks-after{margin-top:32px} } /* ===================================================================== 4. The turn. Version B (one-shot) is the base; version A (scroll-linked) is layered on below. ===================================================================== */ .turn{position:relative;isolation:isolate;overflow:clip;background:var(--ink);color:#fff;padding:clamp(72px,9vw,152px) 0 clamp(48px,6vw,96px)} .turn-bg,.turn-rail,.frags,.zm-a{display:none} .zm{display:block;width:1px;height:1px} .turn-head{text-align:center} .turn-h2{display:grid;justify-items:center} .turn-h2>span{grid-area:1/1} .turn-h2 .td{display:none} /* the night half of the headline takes the night full stop (#5b7cf0); the day half keeps the accent */ .turn-h2 .tn{--stop-c:var(--stop-night)} .turn-cap{margin-top:14px;font:650 clamp(22px,calc(1vw + 18px),30px)/1.25 var(--font-display);letter-spacing:-.015em;color:var(--on-ink-2)} .turn-cap .cap-a{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .turn-fig{margin-top:40px} .ledger{max-width:560px;margin-inline:auto;rotate:-1deg;padding:28px 28px 32px;font:400 15px/32px var(--font-mono);color:var(--on-ink-2);letter-spacing:0} @media (min-width:480px){.ledger{font-size:17px}} .ledger .l{white-space:nowrap;overflow:hidden;text-overflow:clip} .ledger .l:nth-child(odd){rotate:.5deg} .ledger .l:nth-child(even){rotate:-.5deg} .ledger .l1{color:#fff;font-weight:600} .ledger .fs{position:relative} .l-note{display:inline-block;margin-top:14px;margin-left:30%;padding:2px 12px;border:1.5px solid var(--red);border-radius:999px;rotate:-4deg;color:#fff;font-size:.95em;line-height:1.6} @media (max-width:420px){.ledger{padding:22px 18px 26px}.ledger .l{white-space:normal;line-height:1.5;padding:4px 0}.l-note{margin-left:12%}} .turn-link{display:flex;flex-direction:column;align-items:center;padding-top:36px;color:#fff} /* night to day without the action blue: navy lifts through a muted, low-saturation indigo into the day mist (#e8edfb) and the canvas, so there is no bright blue stripe between the two halves */ .turn-link::before{content:"";position:absolute;z-index:-1;left:0;right:0;height:3600px; background:linear-gradient(#0f1530 0,#1c2660 56px,#4d5a98 112px,#b9c2e6 160px,#e8edfb 200px,#f5f5f7 420px,#f5f5f7)} .tl-line{display:block;width:1px;height:72px;background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,.9) 60%,rgba(81,84,98,.5))} .tl-arrow{margin-top:4px;font-size:18px;line-height:1;color:rgba(255,255,255,.92)} .tl-cap{margin-top:28px;font:650 clamp(22px,calc(1vw + 18px),30px)/1.25 var(--font-display);letter-spacing:-.015em;color:var(--text)} .turn .placard{margin-inline:auto;text-align:center;justify-items:center;color:var(--secondary)} .turn .placard strong{color:var(--text)} .after{position:relative;max-width:840px;margin:28px auto 0;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow-lg); padding:1.25em;color:var(--text);font-size:16px;text-align:left} @media (min-width:480px){.after{padding:1.75em}} .af-head{display:flex;align-items:center;gap:.75em;flex-wrap:wrap} .af-head .avatar{width:3em;height:3em;font-size:1em} .af-who{flex:1;min-width:10em} .af-name{font:650 1.5em/1.15 var(--font-display);letter-spacing:-.02em} .af-meta{font-size:.875em;line-height:1.35;color:var(--muted);margin-top:.15em} .after .mbtn{font-size:.875em;min-height:2.25em;padding:0 .9em} .af-cols{display:grid;gap:1.5em;margin-top:1.5em} .after .m-label{font-size:.8125em} .after .m-amt{font-size:2.125em} .after .credit{margin-top:.9em} .after .credit .fill{--v:.6} .after .credit-cap{font-size:.8125em} .after .m-eyebrow{font-size:.8125em;margin-top:1.4em} .age-bar{display:flex;gap:3px;height:12px;margin-top:.6em;border-radius:999px;overflow:hidden} .age-bar i{flex:var(--g) 1 0;min-width:0} .ag1{background:var(--age-1)}.ag2{background:var(--age-2)}.ag3{background:var(--age-3)}.ag4{background:var(--age-4)}.ag5{background:var(--age-5)} .age-legend{display:flex;flex-wrap:wrap;gap:.35em 1em;margin-top:.7em;font-size:.8125em;line-height:1.3;color:var(--muted)} .age-legend li{display:inline-flex;align-items:center;gap:.45em} .age-legend .sw{width:.7em;height:.7em;border-radius:2px} .af-right .m-eyebrow{margin-top:0;margin-bottom:.2em} .after .chq{grid-template-columns:2.75em minmax(0,1fr) auto;column-gap:.75em;min-height:3.75em;padding:.45em 0} .after .dchip{width:2.75em;height:2.75em;border-radius:.625em} .after .dchip b{font-size:1.0625em} .after .dchip b.rel{font-size:.625em} .after .dchip i{font-size:.75em} .after .chq-mid .mono{font-size:.875em} .after .note{font-size:.8125em} .after .num{font-size:.9375em} .after .pill{height:1.625em;padding:0 .625em;font-size:.8125em;gap:.4em} .after .pill .dot{width:.375em;height:.375em} .after .pill .ico{width:.875em;height:.875em} .af-foot{display:flex;flex-wrap:wrap;gap:.5em;margin-top:1.25em;padding-top:1.1em;border-top:1px solid var(--line)} .after .chip{font-size:.875em;min-height:1.9em;padding:.25em .8em} @media (min-width:1024px){.af-cols{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:2.25em}} .turn-hook{padding:clamp(56px,7vw,112px) 0 clamp(72px,9vw,152px);text-align:center;background:var(--canvas)} .turn-hook .hook{margin-inline:auto;color:var(--text)} /* version B one-shot onset: the card rises, its pills pop in one after another */ @media screen and (prefers-reduced-motion:no-preference){ .js .after:not(.on){opacity:0;translate:0 16px} .js .after:not(.on) .pp{opacity:0;scale:.9} .js .after{transition:opacity .6s var(--spring),translate .6s var(--spring)} .js .after .pp{transition:opacity .3s var(--ease-out),scale .38s var(--spring);transition-delay:calc(var(--pi) * 80ms + 250ms)} } /* light hero variant for the flash test (brief section 17): */ html[data-hero="day"] .hero{color:var(--text);color-scheme:light; background:radial-gradient(120% 140% at 0 0,#e8edfb,transparent 60%),radial-gradient(90% 120% at 100% 100%,#f3effb,transparent 60%),#ffffff; --fg:var(--text);--fg2:var(--secondary);--fg3:var(--secondary);--stop-c:var(--accent);--focus:var(--accent); --shoe-upper:#fbfcff;--shoe-sole:#dfe5f3;--shoe-outline:#8d9bb8;--shoe-detail:#a3b1cb;--shoe-accent:#b5c4ee;--shoe-seam:#cbd5e8} html[data-hero="day"] .hero h1{color:var(--text)} html[data-hero="day"] .hero-eyebrow,html[data-hero="day"] .hero-sub,html[data-hero="day"] .hero-reassure{color:var(--secondary)} html[data-hero="day"] .hero .chips li{color:var(--secondary)} html[data-hero="day"] .hero .tlink{color:var(--accent-text)} html[data-hero="day"] .hero .placard{color:var(--secondary)} html[data-hero="day"] .hero .placard strong{color:var(--text)} html[data-hero="day"] .hero .btn-solid{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 24px rgba(58,92,204,.25)} html[data-hero="day"] .hcard{box-shadow:var(--shadow-lg)} html[data-hero="day"] .ghost-card{background:#fff;opacity:.8;box-shadow:var(--shadow)} html[data-hero="day"] .hero-shoe{filter:drop-shadow(0 30px 24px rgba(16,24,40,.16))} /* ---------- 4A. The turn, scroll-linked (from 1080 x 720, with scroll-driven animation) ---------- The stage is fitted to the sticky panel's width and height and shaped like the card, so the card's text is never under 16 px (smaller windows get version B). Positions are fixed in stage units (cqw / cqh): nothing is measured at runtime. Timeline (% of the section's scroll): 0-16 the notebook page rests ("You are guessing") 16-26 its scribbles fade; the six facts stay lit on the paper 26-31 the paper hands over to a dark card frame drawn at the paper's size; 31-40 the frame opens to the card's shape 30-45 the six facts travel across the frame to their places (10 % each, 1 % apart) 44-52 day comes up (half at 48); 47-49 headline, caption, rail and header (.zm-a) turn to day together 46-50 the white card fills in around the facts and the handwriting turns to type; 50-51.5 hand-over in place 52-58 placard The stage always holds the paper, the frame or the card, so it is never empty, and no two different texts are ever drawn over each other. If the card or its placard does not fit the panel (for example with larger text spacing), site.js adds .turn-b to and the stacked version B is used instead. */ @supports (animation-timeline:view()){ @media screen and (min-width:1080px) and (min-height:720px) and (prefers-reduced-motion:no-preference){ html.js:not(.lite):not(.turn-b) .turn{height:220vh;padding:0;overflow:visible;background:linear-gradient(#0f1530 0 50%,#f5f5f7 50%);view-timeline:--turn block;view-timeline-inset:0px} html.js:not(.lite):not(.turn-b) .ledger .fs{display:inline-block} html.js:not(.lite):not(.turn-b) .zm-a{display:block;position:absolute;left:0;top:calc(57.6vh + 64px)} html.js:not(.lite):not(.turn-b) .zm-b,html.js:not(.lite):not(.turn-b) .turn-link{display:none} html.js:not(.lite):not(.turn-b) .turn-sticky{position:sticky;top:0;height:100vh;padding-top:64px;overflow:hidden} html.js:not(.lite):not(.turn-b) .turn-bg{display:block;position:absolute;inset:0;z-index:-1} html.js:not(.lite):not(.turn-b) .turn-bg i{position:absolute;inset:0} html.js:not(.lite):not(.turn-b) .tb-night{background:#0f1530} /* dawn: a faint lift of the navy towards the product's deep indigo (at most 45 %), never a field of blue, so the night full stop and the paper stay legible */ html.js:not(.lite):not(.turn-b) .tb-dawn{background:radial-gradient(85% 75% at 50% 60%,#26398f 0%,#1f2d6e 45%,#141c45 80%,#0f1530 100%);opacity:0;animation:tA-dawn linear both;animation-timeline:--turn;animation-range:contain 14% contain 34%} html.js:not(.lite):not(.turn-b) .tb-day{background:linear-gradient(rgba(245,245,247,0) 62%,#f5f5f7 96%),radial-gradient(120% 140% at 0 0,#e8edfb,transparent 60%),radial-gradient(90% 120% at 100% 100%,#f3effb,transparent 60%),#f5f5f7; opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 44% contain 52%} html.js:not(.lite):not(.turn-b) .turn-wrap{height:100%;display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:24px;padding-top:20px;padding-bottom:16px} html.js:not(.lite):not(.turn-b) .turn-rail{display:flex;grid-column:1;grid-row:1/3;flex-direction:column;align-items:center;gap:12px;padding:8px 0 56px} html.js:not(.lite):not(.turn-b) .tr-label{position:relative;display:grid;font:600 13px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;text-align:center} html.js:not(.lite):not(.turn-b) .tr-label::before,html.js:not(.lite):not(.turn-b) .tr-label::after{content:attr(data-t);grid-area:1/1} html.js:not(.lite):not(.turn-b) .tr-label::before{color:var(--on-ink-3);animation:tA-out linear both;animation-timeline:--turn;animation-range:contain 47% contain 49%} html.js:not(.lite):not(.turn-b) .tr-label::after{color:var(--secondary);opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 47% contain 49%} html.js:not(.lite):not(.turn-b) .tr-line{position:relative;flex:1;width:1px;background:linear-gradient(rgba(255,255,255,.3),rgba(81,84,98,.35))} html.js:not(.lite):not(.turn-b) .tr-dot{position:absolute;inset:0;animation:tA-dot linear both;animation-timeline:--turn;animation-range:contain 16% contain 52%} html.js:not(.lite):not(.turn-b) .tr-dot::before{content:"";position:absolute;left:50%;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.14)} html.js:not(.lite):not(.turn-b) .tr-dot::after{content:"";position:absolute;left:50%;top:0;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft); opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 47% contain 49%} html.js:not(.lite):not(.turn-b) .turn-head{grid-column:2;text-align:center} /* headline and caption change colour in one short window, while the day layer passes half: white on the dark half, ink on the light half, never mid-grey on mid-grey for long */ html.js:not(.lite):not(.turn-b) .turn-h2 .td{display:inline;color:var(--text);--stop-c:var(--accent);opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 47% contain 49%} html.js:not(.lite):not(.turn-b) .turn-h2 .tn{animation:tA-out linear both;animation-timeline:--turn;animation-range:contain 47% contain 49%} html.js:not(.lite):not(.turn-b) .turn-cap{display:grid;justify-items:center;margin-top:10px} html.js:not(.lite):not(.turn-b) .turn-cap>span{grid-area:1/1} /* the caption rolls like a changing number: the old line lifts away as the new one settles, in the same short window, so one of them is always at least half visible */ html.js:not(.lite):not(.turn-b) .turn-cap .cap-b{animation:tA-cap-out linear both;animation-timeline:--turn;animation-range:contain 47% contain 49%} html.js:not(.lite):not(.turn-b) .turn-cap .cap-a{position:static;width:auto;height:auto;overflow:visible;clip-path:none;color:var(--text);opacity:0;animation:tA-cap-in linear both;animation-timeline:--turn;animation-range:contain 47% contain 49%} /* the figure is a size container, so the stage fits its width and height (80 px kept for the placard) */ html.js:not(.lite):not(.turn-b) .turn-fig{grid-column:2;margin-top:16px;display:flex;flex-direction:column;align-items:center;min-height:0;container-type:size} html.js:not(.lite):not(.turn-b) .turn-stage{--ar:2.08;position:relative;flex:none;container-type:size;aspect-ratio:var(--ar);width:min(100cqw,1000px,(100cqh - 80px) * var(--ar))} html.js:not(.lite):not(.turn-b) .turn .placard{margin-top:10px;opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 52% contain 58%} /* the notebook page, centred in the stage: its scribbles fade first (the six facts stay lit), then the paper itself hands over to the card frame drawn at exactly its size */ html.js:not(.lite):not(.turn-b) .ledger{position:absolute;left:21cqw;top:8.7cqh;width:58cqw;max-width:none;margin:0;padding:3.4cqw 3.8cqw 3.8cqw;font-size:1.9cqw;line-height:3.75cqw; animation:tA-out linear both;animation-timeline:--turn;animation-range:contain 26% contain 31%} html.js:not(.lite):not(.turn-b) .ledger>*{animation:tA-out linear both;animation-timeline:--turn;animation-range:contain 16% contain 26%} html.js:not(.lite):not(.turn-b) .ledger .l{white-space:nowrap} html.js:not(.lite):not(.turn-b) .ledger .fs{visibility:hidden} html.js:not(.lite):not(.turn-b) .l-note{margin-top:1.4cqw} /* the Stride card fills the stage: 54 em wide, so its type is the stage width / 54 (16 px at the gate, never less). The follow-up chips sit under the ageing bar, so the card is wide and short enough to fit a laptop screen. Its surface is two layers under its content: a dark frame (::before) that starts as the notebook paper and opens to the card's shape, and the white card (::after) that fades in over it with the day. */ html.js:not(.lite):not(.turn-b) .after{position:absolute;left:0;top:0;width:100cqw;max-width:none;margin:0;font-size:calc(100cqw / 54);padding:1.6em 1.75em 1.75em; display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);grid-template-rows:auto auto 1fr;column-gap:2.25em; background:transparent;border-color:transparent;box-shadow:none;isolation:isolate;opacity:1;translate:none} html.js:not(.lite):not(.turn-b) .after::before,html.js:not(.lite):not(.turn-b) .after::after{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:24px;pointer-events:none} html.js:not(.lite):not(.turn-b) .after::before{background:rgba(233,235,239,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 24px 60px -20px rgba(0,0,0,.45); transform-origin:50% 50%;opacity:0;animation:tA-frame linear both;animation-timeline:--turn;animation-range:contain 26% contain 40%} html.js:not(.lite):not(.turn-b) .after::after{background:#fff;box-shadow:inset 0 0 0 1px var(--line),var(--shadow-lg);opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 46% contain 50%} html.js:not(.lite):not(.turn-b) .after>.af-head,html.js:not(.lite):not(.turn-b) .after .af-left,html.js:not(.lite):not(.turn-b) .after .af-right,html.js:not(.lite):not(.turn-b) .after>.af-foot{ opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 46.5% contain 50%} html.js:not(.lite):not(.turn-b) .after .af-head{grid-column:1/-1} html.js:not(.lite):not(.turn-b) .after .af-cols{display:contents} html.js:not(.lite):not(.turn-b) .after .af-left{grid-column:1;grid-row:2;margin-top:1.5em} html.js:not(.lite):not(.turn-b) .after .af-right{grid-column:2;grid-row:2/4;margin-top:1.5em} html.js:not(.lite):not(.turn-b) .after .af-foot{grid-column:1;grid-row:3;align-self:start;align-items:flex-start} html.js:not(.lite):not(.turn-b) .after .pp{opacity:1;scale:1} /* every size in em, so the fixed positions hold at any stage size */ html.js:not(.lite):not(.turn-b) .after .credit .track{height:.5em} html.js:not(.lite):not(.turn-b) .after .credit-cap{margin-top:.615em} html.js:not(.lite):not(.turn-b) .after .age-bar{height:.75em;gap:.1875em} /* a slot stays empty until its fact lands, then takes over from it in place */ html.js:not(.lite):not(.turn-b) .after .slot{opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 50% contain 51.5%} /* six facts travel from their notebook line to their slot on the card */ html.js:not(.lite):not(.turn-b) .frags{display:block;position:absolute;inset:0;pointer-events:none;font-size:calc(100cqw / 54)} html.js:not(.lite):not(.turn-b) .frag{position:absolute;left:0;top:0;display:grid;transform-origin:0 0;white-space:nowrap; animation:tA-move linear both,tA-out linear both;animation-timeline:--turn,--turn} html.js:not(.lite):not(.turn-b) .frag>span{grid-area:1/1;justify-self:start;align-self:start} html.js:not(.lite):not(.turn-b) .frag .hw{font:400 1.9cqw/3.75cqw var(--font-mono);color:#fff;text-shadow:0 1px 10px rgba(15,21,48,.45);animation:tA-out linear both;animation-timeline:--turn;animation-range:contain 46% contain 48.5%} html.js:not(.lite):not(.turn-b) .frag .ty{opacity:0;animation:tA-in linear both;animation-timeline:--turn;animation-range:contain 47% contain 49.5%} html.js:not(.lite):not(.turn-b) .frag .ty.m-amt{font-size:2.125em} html.js:not(.lite):not(.turn-b) .frag .ty.num{font-size:.9375em} html.js:not(.lite):not(.turn-b) .frag .ty.pill{height:1.625em;padding:0 .625em;font-size:.8125em;gap:.4em} html.js:not(.lite):not(.turn-b) .frag .ty.pill .dot{width:.375em;height:.375em} html.js:not(.lite):not(.turn-b) .frag .ty.credit-cap{font-size:.8125em;margin:0} html.js:not(.lite):not(.turn-b) .frag .ty.chip{font-size:.875em;min-height:1.9em;padding:.25em .8em} /* start = the notebook line, end = the card slot, in the stage's own units (cqw, cqh), measured once at build time */ html.js:not(.lite):not(.turn-b) .fr1{--x0:24.68;--y0:25.15;--r0:-1.5deg;--x1:3.34;--y1:27.9;animation-range:contain 30% contain 40%,contain 50% contain 51.5%} html.js:not(.lite):not(.turn-b) .fr2{--x0:24.77;--y0:32.04;--r0:-.5deg;--x1:96.67;--y1:30.52;animation-range:contain 31% contain 41%,contain 50% contain 51.5%} html.js:not(.lite):not(.turn-b) .fr3{--x0:24.81;--y0:40.75;--r0:-1.5deg;--x1:96.67;--y1:45.07;animation-range:contain 32% contain 42%,contain 50% contain 51.5%} html.js:not(.lite):not(.turn-b) .fr4{--x0:38.26;--y0:47.39;--r0:-.5deg;--x1:96.67;--y1:79.33;animation-range:contain 33% contain 43%,contain 50% contain 51.5%} /* the right-hand slots are right-aligned on the card, so these three facts land by their right edge (the card's content edge): the handwriting never runs past the card, and the typed value meets its slot in any font */ html.js:not(.lite):not(.turn-b) .fr2,html.js:not(.lite):not(.turn-b) .fr3,html.js:not(.lite):not(.turn-b) .fr4{animation-name:tA-move-r,tA-out} html.js:not(.lite):not(.turn-b) .fr2 .ty,html.js:not(.lite):not(.turn-b) .fr3 .ty,html.js:not(.lite):not(.turn-b) .fr4 .ty{justify-self:end} html.js:not(.lite):not(.turn-b) .fr5{--x0:24.94;--y0:56.34;--r0:-1.5deg;--x1:3.34;--y1:44.39;animation-range:contain 34% contain 44%,contain 50% contain 51.5%} html.js:not(.lite):not(.turn-b) .fr6{--x0:25.03;--y0:63.23;--r0:-.5deg;--x1:3.34;--y1:77.77;animation-range:contain 35% contain 45%,contain 50% contain 51.5%} }} @keyframes tA-in{from{opacity:0}to{opacity:1}} @keyframes tA-out{from{opacity:1}to{opacity:0}} @keyframes tA-dawn{from{opacity:0}to{opacity:.45}} @keyframes tA-dot{from{transform:translateY(0)}to{transform:translateY(100%)}} @keyframes tA-cap-out{from{opacity:1;translate:0 0}to{opacity:0;translate:0 -12px}} @keyframes tA-cap-in{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}} /* the frame appears exactly over the notebook paper (58 % of the card's width and 81 % of its height, tilted -1 deg, centred 0.84 % higher), then opens out to the card */ @keyframes tA-frame{ 0%{opacity:0;transform:translateY(-.84cqh) rotate(-1deg) scale(.58,.8075)} 36%{opacity:1;transform:translateY(-.84cqh) rotate(-1deg) scale(.58,.8075)} 100%{opacity:1;transform:translateY(0) rotate(0deg) scale(1,1)} } @keyframes tA-move{ from{transform:translate(calc(var(--x0) * 1cqw),calc(var(--y0) * 1cqh)) rotate(var(--r0))} to{transform:translate(calc(var(--x1) * 1cqw),calc(var(--y1) * 1cqh)) rotate(0deg)} } @keyframes tA-move-r{ from{transform:translate(calc(var(--x0) * 1cqw),calc(var(--y0) * 1cqh)) rotate(var(--r0));translate:0 0} to{transform:translate(calc(var(--x1) * 1cqw),calc(var(--y1) * 1cqh)) rotate(0deg);translate:-100% 0} } /* sections 5 to 11 skip layout for the first paint (brief 14), so it lays out the first four sections only; each reserves about its real height (measured at 320-1920 px). Right after, site.js lays them out in idle time, a beat or a tile at a time (.cv-k, which site.js gives its reserved height), and at once if an in-page link is used first, so a jump and the scroll back up never meet a reserved height: the page keeps scroll anchoring off for its demos, so a height that changed above the screen would move the page. Without JavaScript nothing is skipped. */ .js .cv{content-visibility:auto;contain-intrinsic-size:auto var(--cis,2400px)} .js .cv-k{content-visibility:auto;overflow-clip-margin:24px} #promises{--cis:1450px}#get-paid{--cis:4900px}#promise-stock{--cis:3250px}#trust-books{--cis:3850px}#how-you-work{--cis:2700px}#switch{--cis:3000px}#questions{--cis:830px} @media (min-width:768px){#promises{--cis:1340px}#get-paid{--cis:4370px}#promise-stock{--cis:2840px}#trust-books{--cis:3330px}#how-you-work{--cis:2280px}#switch{--cis:2360px}#questions{--cis:750px}} @media (min-width:1024px){#promises{--cis:860px}#get-paid{--cis:3350px}#promise-stock{--cis:2380px}#trust-books{--cis:2690px}#how-you-work{--cis:2150px}#switch{--cis:1970px}#questions{--cis:860px}} /* ===================================================================== 5. Three promises (day) ===================================================================== */ .promises{padding:clamp(72px,9vw,152px) 0} .promises .h2{margin-top:12px;max-width:22ch} .pcards{display:grid;gap:20px;margin-top:48px} @media (min-width:1024px){.pcards{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}} .pcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:28px; transition:transform .3s var(--spring),box-shadow .3s var(--spring)} @media (hover:hover) and (pointer:fine){.pcard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}} .motif{position:relative;display:grid;place-items:center;height:96px;border-radius:14px;background:var(--canvas);margin-bottom:24px} .pc-title{font:650 26px/1.15 var(--font-display);letter-spacing:-.02em} .pcard p{margin-top:10px;font-size:18px;line-height:1.5;color:var(--secondary)} .pcard .tlink{margin-top:auto;padding-top:12px;font-size:16px;align-self:flex-start;text-decoration:none} .pcard .tlink:hover{text-decoration:underline} .mrow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 10px;max-width:100%;padding:8px 10px 8px 14px;background:#fff;border-radius:12px;box-shadow:var(--shadow-sm),0 0 0 1px var(--line)} .mrow .mono{font-size:14px} .mrow .num{font-size:14px} .mrow .xf{justify-items:start} .mgrid{display:grid;grid-template-columns:auto repeat(3,44px);gap:4px 6px;align-items:center} .mh{font:600 13px/1 var(--font);color:var(--secondary);text-align:center} .mrowh{text-align:right;padding-right:4px} .mc{position:relative;display:grid;place-items:center;height:30px;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line);font:650 15px/1 var(--font);font-variant-numeric:tabular-nums} .mc.sel{background:#fff} .mc-ol{position:absolute;inset:-2px;width:calc(100% + 4px);height:calc(100% + 4px);overflow:visible} .mc-ol rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset .3s var(--ease-out) .12s;vector-effect:non-scaling-stroke} .motif-2{grid-template-columns:auto auto;justify-content:center;align-items:center;gap:16px} .pcard{min-width:0} @media (max-width:399px){.motif-2{grid-template-columns:auto;justify-items:center;gap:8px;height:auto;padding:14px 0}} .mres{display:inline-flex;align-items:center;gap:6px;font:600 13px/1 var(--font);color:var(--accent-text);white-space:nowrap} .mres i{width:12px;height:12px;border-radius:4px;box-shadow:inset 0 0 0 2px var(--accent)} .motif-3{gap:8px;align-content:center} .mbal{font-size:14px;color:var(--text);padding:6px 10px;background:#fff;border-radius:10px;box-shadow:0 0 0 1px var(--line)} .mpop{transition:opacity .3s var(--ease-out) .24s,transform .38s var(--spring) .24s} /* ===================================================================== 6–8. Chapters and beats ===================================================================== */ /* each chapter opens on its own full-width white band, edged with hairlines, with a large chapter numeral in a pale tint of the accent (decorative, aria-hidden; the eyebrow still says "01 · Get paid"). Three distinct places on the page; the beats below stay on the canvas. */ .chapter{padding:0 0 clamp(72px,9vw,152px)} .ch-band{background:var(--surface);border-block:1px solid var(--line);overflow:clip} .ch-head{position:relative;isolation:isolate;padding-block:clamp(40px,6vw,96px)} .ch-head>:not(.ch-num){position:relative;max-width:820px} /* phones and tablets: the numeral fills the empty corner beside the short eyebrow, clear of the headline; from 1024 px it grows and stands at the right of the band, level with the headline */ .ch-num{position:absolute;z-index:-1;right:var(--gutter);top:14px;font:750 clamp(72px,11vw,104px)/.78 var(--font-display);letter-spacing:-.06em; color:rgba(58,92,204,.12);font-variant-numeric:tabular-nums;pointer-events:none;-webkit-user-select:none;user-select:none} @media (min-width:1024px){.ch-num{top:auto;bottom:clamp(18px,2.6vw,36px);font-size:clamp(150px,14.5vw,208px)}} .ch-eyebrow{color:var(--accent-text)} .ch-head .h2{margin-top:12px} .ch-body{padding-top:clamp(48px,7vw,112px)} .beat{display:grid;gap:28px} .beat+.beat{margin-top:72px} .beat-text{max-width:56ch} .beat-text .h3{margin-bottom:14px} .beat-text p{color:var(--secondary)} .beat-text p+p{margin-top:14px} .beat-text .h3+p{margin-top:0} .small-line,.stat-line{font-size:16px;line-height:1.5;color:var(--secondary)} .support{font-size:17px;line-height:1.5} .beat-fig{min-width:0} @media (min-width:1024px){ .beat{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:start} .beat+.beat{margin-top:96px} .beat>.beat-text{grid-column:1/6;position:sticky;top:148px} .beat>.beat-fig{grid-column:6/13} .beat-wide>.beat-text{grid-column:1/-1;position:static;max-width:54ch} .beat-wide>.beat-text-2{max-width:none} .beat-wide>.beat-fig{grid-column:1/-1} .beat-text-2{display:grid;grid-template-columns:1fr 1fr;gap:48px} .beat-text-2>div{max-width:52ch} .beat-hold{grid-template-rows:auto 1fr} .beat-hold>.beat-text{grid-row:1;position:static} .beat-hold>.beat-fig{grid-row:1/3} .beat-hold>.signs{grid-column:1/6;grid-row:2;align-self:start} } .beat-text-2>div+div{margin-top:28px} @media (min-width:1024px){.beat-text-2>div+div{margin-top:0}} /* morning beat on desktop: the supporting lines follow the stat line in the sticky text column */ .beat-split .beat-text>.bt-more .support:first-child{margin-top:14px} /* phones and tablets: one message and one picture per screen (brief 4.1). A beat's second message (.bt-more) moves under its render, so the headline, its paragraph and the picture share a screen. Nothing in .bt-more can take focus, so the tab order is unchanged. */ @media (max-width:1023px){ .beat-split>.beat-text{display:contents} .beat-split .bt-main,.beat-split .bt-more{max-width:56ch} .beat-split .bt-main{order:1} .beat-split>.beat-fig{order:2} .beat-split .bt-more{order:3;margin-top:0} .beat-split .beat-text>.bt-more .support:first-child{margin-top:0} } /* ---- Beat: the cheque diary ---- */ .diary{display:grid;gap:22px} .dy-main{min-width:0} .demo-date{display:flex;align-items:center;gap:8px;min-height:38px;margin-bottom:12px} .today-tag{font:600 13px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary)} .js .demo:not([data-step]) .demo-date,.demo[data-step="1"] .demo-date{visibility:hidden} /* its space is kept from the start, so the leaf and the buttons don't move when "Demo: jump" shows it */ #diary-fig .demo-date{display:flex!important} /* without JavaScript the diary shows its finished story, where a "Demo date" chip has no meaning */ html:not(.js) #diary-fig .demo-date{display:none!important} .leaf{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:10px;aspect-ratio:2/1;max-width:480px;padding:14px 16px 12px;border-radius:8px;border:1px solid var(--line-strong); background:linear-gradient(135deg,rgba(58,92,204,.035),rgba(122,79,214,.035)),repeating-linear-gradient(45deg,rgba(17,24,39,.022) 0 1px,transparent 1px 7px),#fff} .leaf-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px} .leaf-pay{font-size:13px;line-height:1.3;color:var(--secondary)} .leaf-date{font-size:14px;padding:4px 8px;border:1px solid var(--line-strong);border-radius:6px;background:#fff;letter-spacing:.04em} .leaf-mid{display:flex;align-items:center;justify-content:space-between;gap:12px} .leaf-amt{font:650 22px/1 var(--font-display);font-variant-numeric:tabular-nums;letter-spacing:-.02em;padding:8px 12px;border:1px solid var(--line-strong);border-radius:6px;background:#fff} /* the signature gives way first on a narrow screen, so the leaf never runs past its card (320 px) */ .leaf-sig{width:96px;height:auto;flex:0 1 96px;min-width:48px} .leaf-bot{display:flex;align-items:center;gap:12px} .leaf-no{font-size:13px;color:var(--text)} .micr{flex:1;height:6px;background:repeating-linear-gradient(90deg,#9a9daa 0 3px,transparent 3px 6px,#9a9daa 6px 7px,transparent 7px 11px);opacity:.7;border-radius:1px} .leaf-who{margin-top:12px;font-size:14px;color:var(--secondary)} .dy-status{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px} .dy-status .stack{display:inline-grid} .dy-status .stack>*{grid-area:1/1} .reason{display:inline-flex;align-items:center;gap:8px} .reason-l{font-size:13px;color:var(--muted)} .chip.sel{background:#fff;color:var(--text);box-shadow:0 0 0 1px var(--line-strong)} .chip.sel .ico{color:var(--green)} .dy-callout{margin-top:14px} .dy-callout.appear{animation:appear .38s var(--spring) both} .rail{position:relative;display:grid;grid-template-columns:1fr;gap:0} .rail .st{position:relative;display:flex;align-items:center;gap:12px;min-height:36px;font-size:13px;color:var(--secondary)} .rail .st i{position:relative;z-index:1;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-strong);flex:none;transition:background-color .2s,box-shadow .2s} .rail .st+.st::before{content:"";position:absolute;left:5.5px;bottom:calc(50% + 6px);height:24px;width:1px;background:var(--line-strong)} .rail .st.reached i,html:not(.js) .rail .st i{box-shadow:none} .st-amber.reached i,html:not(.js) .st-amber i{background:var(--amber)} .st-green.reached i,html:not(.js) .st-green i{background:var(--green)} .st-red.reached i,html:not(.js) .st-red i{background:var(--red)} .st-grey.reached i,html:not(.js) .st-grey i{background:var(--secondary)} .rail .st.current span,html:not(.js) .rail .st:last-child span{font-weight:600;color:var(--text)} .rail .st.current i,html:not(.js) .rail .st:last-child i{animation:stopIn .38s var(--spring) both} .rail .st.current i::after,html:not(.js) .rail .st:last-child i::after{content:"";position:absolute;inset:-5px;border-radius:50%;box-shadow:0 0 0 1.5px currentColor;opacity:.25} .st-amber{--c:var(--amber)} .st-green{--c:var(--green)} .st-red{--c:var(--red)} .st-grey{--c:var(--secondary)} .rail .st i::after{color:var(--c)} @keyframes stopIn{from{transform:scale(.6)}to{transform:none}} /* first paint under JS: received and post-dated reached, post-dated current */ .js .demo:not([data-step]) .rail .st:nth-child(-n+2) i{box-shadow:none} .js .demo:not([data-step]) .rail .st:nth-child(1) i,.js .demo:not([data-step]) .rail .st:nth-child(2) i{background:var(--amber)} .js .demo:not([data-step]) .rail .st:nth-child(2) span{font-weight:600;color:var(--text)} .dy-hist{min-width:0} .hist{margin-top:8px} .hist li{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-top:1px solid var(--line)} .hist li:first-child{border-top:0} .hdot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none} .hdot.amber{background:var(--amber)}.hdot.green{background:var(--green)}.hdot.red{background:var(--red)}.hdot.grey{background:var(--secondary)} .hist li>span{display:grid;gap:1px} .h-l{font-size:15px;line-height:1.4;color:var(--text)} .h-m{font-size:13px;line-height:1.35;color:var(--muted)} .hist li.appear{animation:appear .45s var(--spring) both} /* the TRY IT bar is inside the diary card (it keeps its own rounded corners) */ .js .demo>.mock.diary{border-radius:18px} @media (min-width:768px){ .rail{grid-template-columns:repeat(5,minmax(0,1fr));padding-top:4px} .rail .st{flex-direction:column;align-items:center;gap:8px;min-height:0;text-align:center} .rail .st+.st::before{left:auto;right:calc(50% + 6px);bottom:auto;top:5.5px;height:1px;width:calc(100% - 12px)} /* from 768 px the bar is the card's foot, as on the other demos */ .diary>.tryit{margin:2px -24px -24px;border:0;border-top:1px solid var(--line);border-radius:0 0 17px 17px;box-shadow:none} } @media (min-width:1024px){ .diary{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"main hist" "rail rail" "try try";column-gap:28px;row-gap:24px} .dy-main{grid-area:main}.dy-hist{grid-area:hist;padding-left:24px;border-left:1px solid var(--line)}.rail{grid-area:rail;padding-top:18px;border-top:1px solid var(--line)} .diary>.tryit{grid-area:try} } /* phones: leaf, status pill, a compact rail, then the TRY IT buttons in one fixed slot. What a tap changes shows either above the finger (status pill, rail) or right under it, in the place the refusal used: the demo date replaces "Not before …" there, and new history rows follow. Nothing above the button ever changes height, so the button never moves. */ @media (max-width:767px){ .diary{gap:0;grid-template-columns:minmax(0,1fr)} .dy-main{display:contents} .diary .leaf{order:2} .diary .leaf-who{order:3} .diary .dy-status{display:contents} .diary .dy-status>.stack{order:4;justify-self:start;margin-top:10px} .diary>.rail{order:5;margin-top:10px;grid-template-columns:repeat(5,minmax(0,1fr));padding:24px 0} .diary>.tryit{order:6;display:grid;gap:8px;margin-top:6px;padding:10px 12px 12px;border:1px solid var(--line);border-radius:12px;box-shadow:none} .diary .demo-date{order:7;margin:12px 0 0} .diary .dy-callout,.diary .dy-status>.reason{order:8} .diary .dy-status>.reason{justify-self:start;flex-wrap:wrap;margin-top:12px} .diary>.dy-hist{order:9;margin-top:18px} /* the demo date takes no room until "Demo: jump" shows it */ .js #diary-fig:not([data-step]) .demo-date,#diary-fig[data-step="1"] .demo-date{display:none!important} .diary .tryit-btns{display:grid;grid-template-columns:minmax(0,1fr);justify-items:start;gap:4px} .diary .tryit-btns>.btn{grid-row:1;grid-column:1} .diary .tryit-btns>.reset{grid-row:2} #diary-fig[data-step="5"] .tryit-btns>.reset{grid-row:1} #diary-fig[data-step="1"] [data-act="refuse"]{display:none!important} /* the rail: five dots in a row, every stop labelled at 13 px, the labels alternating under and over the line so each has room (Received, Cleared and Waived under; Post-dated and Returned over); the current one is bold */ .rail .st{flex-direction:column;align-items:center;min-height:0} .rail .st+.st::before{left:auto;right:calc(50% + 6px);bottom:auto;top:5.5px;height:1px;width:calc(100% - 12px)} .rail .st span{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;line-height:16px} .rail .st:nth-child(odd) span{top:20px} .rail .st:nth-child(even) span{bottom:20px} .rail .st:first-child span{left:0;transform:none} .rail .st:last-child span{left:auto;right:0;transform:none} } /* ---- Beat: the credit hold ---- */ .sale-head{font:600 15px/1.35 var(--font);color:var(--secondary)} .sale-line{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:16px;font-size:16px;line-height:1.4} .sale-total{margin-top:10px;font:650 26px/1.1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .sale-total .rs{font-size:.5em} .hb{margin-top:20px} .hb-track{position:relative;height:12px;border-radius:999px;background:var(--sunken);--L:90.909%} .hb-track i{position:absolute;top:0;bottom:0;display:block} .hb-fill{left:0;width:72.727%;background:var(--accent);border-radius:999px 0 0 999px} .hb-new,.hb-cut{left:72.727%;transform-origin:left; background:repeating-linear-gradient(45deg,rgba(58,92,204,.55) 0 2px,transparent 2px 6px),rgba(58,92,204,.16)} .hb-new{width:18.182%} .hb-cut{width:17.964%;transform:scaleX(0)} .hb-over{left:var(--L);width:7.727%;border-radius:0 999px 999px 0; background:repeating-linear-gradient(45deg,rgba(201,58,58,.75) 0 2px,transparent 2px 6px),rgba(201,58,58,.14)} .hb-limit{left:calc(var(--L) - 1px);top:-4px!important;bottom:-4px!important;width:2px;background:var(--text);border-radius:1px} .hb-labels{display:flex;justify-content:space-between;gap:12px;margin-top:10px;font-size:13px;line-height:1.35} .hb-cap{color:var(--muted)} .hb-limit-lbl{font-size:13px;color:var(--secondary);text-align:right;white-space:nowrap} .hb-labels{position:relative} /* bar states */ .js .demo:not([data-step]) .hb-new,.js .demo:not([data-step]) .hb-over{transform:scaleX(0);opacity:0} .demo[data-step="reduced"] .hb-new,.demo[data-step="reduced"] .hb-over{opacity:0} .demo[data-step="reduced"] .hb-cut{transform:none} .hb-new{transition:transform .6s var(--spring)} .hb-over{transition:opacity .2s var(--ease-out) .6s,transform 0s} .hb-cut{transition:transform .6s var(--spring)} .demo[data-step="reduced"] .sale-line .xf>.b,.demo[data-step="reduced"] .sale-total .xf>.b{opacity:0;visibility:hidden} .demo[data-step="reduced"] .sale-line .xf>.a,.demo[data-step="reduced"] .sale-total .xf>.a{opacity:1;visibility:visible;transition-delay:0s} .banner{margin-top:18px;padding:16px;border-radius:14px;background:var(--red-soft);transform-origin:var(--ox,50%) var(--oy,0)} .banner.grow{animation:bannerIn .38s var(--spring) both .6s} @keyframes bannerIn{from{opacity:0;transform:scale(.94);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} .banner-msg{font:600 16px/1.4 var(--font);color:var(--red-ink)} .banner-act,.reasons{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .chip-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--line-strong);font:550 15px/1 var(--font);color:var(--text);box-shadow:var(--shadow-sm);transition:background-color .15s} .chip-btn:hover{background:var(--soft)} .approved{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px;font-size:15px;color:var(--text)} .within{margin-top:16px} .signs{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--shadow-sm)} .signs-title{font:650 19px/1.3 var(--font-display);letter-spacing:-.01em} .signs-list{margin-top:10px} .signs-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4} .signs-list li:first-child{border-top:0} .signs-end{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px;padding-top:14px;border-top:1px solid var(--line)} .signs-note{font-size:13px;color:var(--secondary)} /* ---- Beat: one cheque, six invoices ---- */ .al-chq{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:6px 16px;padding:14px 16px;border-radius:14px;background:var(--soft)} .al-who{font-size:15px;color:var(--secondary)} .al-who .mono{color:var(--text)} .al-amt{font:650 28px/1.1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .al-amt .rs{color:var(--secondary)} .al-mode{margin-top:16px} .inv-list{margin-top:10px} .inv{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"id num pill" "bar bar bar";align-items:center;column-gap:12px;row-gap:8px;min-height:56px;padding:10px 0;border-top:1px solid var(--line)} .inv:first-child{border-top:0} .inv-tick{display:none;grid-area:tick;place-items:center;width:44px;height:44px;margin:-6px 0 -6px -8px;cursor:pointer} .inv-tick input{width:20px;height:20px;margin:0;accent-color:var(--accent);cursor:pointer} .inv-id{grid-area:id;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;min-width:0} .inv-id .mono{font-size:14px} .inv-age{font-size:13px;color:var(--muted)} .inv .num{grid-area:num} .inv-pill{grid-area:pill;justify-items:end;min-width:72px} .inv-bar{grid-area:bar;height:6px;border-radius:999px;background:var(--chart-secondary);overflow:hidden} .inv-bar i{display:block;height:100%;background:var(--accent);border-radius:inherit;transform-origin:left;transform:scaleX(1)} @media (min-width:600px){ .inv{grid-template-columns:minmax(120px,auto) minmax(40px,1fr) auto auto;grid-template-areas:"id bar num pill";row-gap:0} } .alloc[data-mode="hand"] .inv{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"tick id num pill" "tick bar bar bar"} @media (min-width:600px){.alloc[data-mode="hand"] .inv{grid-template-columns:44px minmax(120px,auto) minmax(40px,1fr) auto auto;grid-template-areas:"tick id bar num pill"}} .alloc[data-mode="hand"] .inv-tick{display:grid} /* an invoice number never breaks at its hyphen ("INV-" / "1024") */ .inv-id .mono{white-space:nowrap} /* narrow phones: every row has the same shape, with the age always under the number. With the tick column ("Choose by hand") the amount sits over its pill, so the number keeps its width */ @media (max-width:399px){ .inv-id{flex-direction:column;align-items:flex-start;gap:1px} .alloc[data-mode="hand"] .inv{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"tick id num" "tick id pill" "tick bar bar";row-gap:4px} .alloc[data-mode="hand"] .inv .num{align-self:end;justify-self:end} .alloc[data-mode="hand"] .inv-pill{align-self:start} .alloc[data-mode="hand"] .inv-bar{margin-top:4px} } .inv .xf>.b{opacity:0;visibility:hidden} .inv .xf>.a{opacity:1;visibility:visible} .inv.unpaid .inv-bar i{transform:scaleX(0)} .inv.unpaid .xf>.b{opacity:1;visibility:visible;transition-delay:0s} .inv.unpaid .xf>.a{opacity:0;visibility:hidden} .inv-bar i{transition:transform .26s var(--ease-out)} .al-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;min-height:44px} .al-left{transition:opacity .3s,transform .45s var(--spring)} .al-replay{flex:none;opacity:0;visibility:hidden} .al-replay.show{opacity:1;visibility:visible} /* ---- Beat: your morning (phone) ---- */ .phones{display:flex;flex-wrap:wrap;justify-content:center;gap:24px} .phone{position:relative;width:min(100%,340px);aspect-ratio:390/844;padding:10px;border-radius:44px;background:#1d1d1f;flex:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 2px 6px rgba(16,24,40,.10),0 28px 56px -18px rgba(16,24,40,.32)} .ph-screen{position:relative;height:100%;border-radius:34px;background:var(--canvas);overflow:hidden;isolation:isolate} .ph-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--canvas)} .ph-status{padding:12px 24px 0;font:600 14px/1 var(--font);color:var(--text);font-variant-numeric:tabular-nums;background:#fbfbfc} .ph-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 16px 10px;background:#fbfbfc;border-bottom:1px solid var(--line)} .ph-title{font:650 22px/1.1 var(--font-display);letter-spacing:-.02em} .ph-title.sm{font-size:17px} .ph-body{padding:6px 12px 12px;overflow:hidden} /* the Today list sits in the flow, so the phone keeps its 390:844 shape when the list fits and grows taller when it doesn't (320 px screens, 400 % zoom): the "Send statement" row is never cut off. The chat view still covers it. */ #phone{display:flex;flex-direction:column} #phone>.ph-screen{display:flex;flex-direction:column;flex:1 0 auto;height:auto} #phone .ph-today{position:relative;inset:auto;flex:1 0 auto} #phone .ph-today>.ph-body{overflow:visible} .ph-group{margin-top:12px} .ph-gt{padding:0 6px 6px;font:600 13px/1.3 var(--font);color:var(--secondary)} .ph-group ul{background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line);padding:0 12px} /* rows: the name keeps one line; the status pill sits under it instead of squeezing it */ .ph-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:6px;min-height:54px;padding:10px 0;border-top:1px solid var(--line)} .ph-row:first-child{border-top:0} .ph-row>.avatar{grid-row:1/3;align-self:start;margin-top:1px} .ph-row>.pill{grid-column:2;justify-self:start;height:24px} .ph-row.nb{grid-template-columns:minmax(0,1fr) auto;row-gap:2px} .ph-row.nb>.ph-mid{display:contents} .ph-row.nb .ph-name{grid-column:1/-1} .ph-row.nb .ph-meta{grid-column:1;align-self:center} .ph-row.nb>.pill{grid-column:2;grid-row:2} .ph-mid{display:grid;gap:1px;min-width:0} .ph-name{font:600 14px/1.3 var(--font);color:var(--text)} .ph-name .mono{font-size:13px} .ph-meta{font-size:13px;line-height:1.3;color:var(--muted)} .ph-send{grid-template-columns:minmax(0,1fr);row-gap:10px;padding-bottom:12px} .ph-send-btn{position:relative;justify-self:start;min-height:44px;padding:0 12px;font-size:14px} .ph-send-btn::after{content:"";position:absolute;inset:-2px;border-radius:12px;box-shadow:0 0 0 2px var(--accent);opacity:0;pointer-events:none} .ph-send-btn.pulse::after{animation:pulse .9s var(--ease-out) 1} @keyframes pulse{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}} .ph-chat{transform:translateX(100%);visibility:hidden;transition:transform .38s var(--spring),visibility 0s linear .38s;z-index:2} .phone.chat .ph-chat{transform:none;visibility:visible;transition-delay:0s} .phone.chat .ph-today{visibility:hidden;transition:visibility 0s linear .38s} .chat-body{display:flex;flex-direction:column;align-items:flex-end;padding:20px 14px;gap:8px;flex:1} .bubble{display:flex;gap:10px;max-width:92%;padding:12px;background:#fff;border:1px solid var(--line-strong);border-radius:16px 4px 16px 16px;box-shadow:var(--shadow-sm)} .phone.chat .bubble{animation:bubbleIn .45s var(--spring) both .2s} @keyframes bubbleIn{from{opacity:0;transform:translateY(16px) scale(.96)}to{opacity:1;transform:none}} .doc-ico{display:grid;place-items:center;width:40px;height:48px;border-radius:8px;background:var(--accent-soft);color:var(--accent-text);flex:none} .doc-txt{display:grid;gap:2px;min-width:0} .doc-t{font:600 15px/1.3 var(--font)} .doc-m{font-size:13px;line-height:1.35;color:var(--muted)} .sent{font-size:13px;color:var(--secondary)} .ph-back{align-self:center;margin-bottom:18px;font-size:15px} /* the placard sits under the phone it describes, on the phone's left edge */ @media (prefers-reduced-motion:no-preference){html.js #morning .placard{max-width:340px;margin-inline:auto}} .phone-2{display:none} html:not(.js) .phone-2{display:block} html:not(.js) .phone:not(.phone-2) .ph-chat{display:none} .phone-2 .ph-chat{transform:none;visibility:visible} @media (max-width:767px){ /* phones: the phone is taller than the screen left under the header, and the tap happens near its foot. The chat sits at the bottom of its screen, as in a real chat app, so the statement appears right above "Back to Today", where the finger already is */ #phone .chat-body{justify-content:flex-end} /* the stacked chat phone (reduced motion, no JavaScript) is cropped to its message: the top of the same phone, fading out below "Sent on WhatsApp", instead of a full screen that is mostly empty */ .phone-2{aspect-ratio:auto;padding-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0; -webkit-mask-image:linear-gradient(#000 calc(100% - 56px),transparent);mask-image:linear-gradient(#000 calc(100% - 56px),transparent)} .phone-2 .ph-screen{height:auto;border-bottom-left-radius:0;border-bottom-right-radius:0} .phone-2 .ph-view{position:relative;inset:auto} .phone-2 .chat-body{flex:none;padding-bottom:64px} } /* ===================================================================== 7. Promise stock renders ===================================================================== */ .win{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-lg);overflow:hidden;color:var(--text)} .win-bar{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;background:rgba(250,250,252,.92);border-bottom:1px solid var(--line)} .win-title{font:600 14px/1 var(--font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .win-search{margin-left:auto;display:none;align-items:center;height:26px;padding:0 12px;border-radius:8px;background:var(--soft);font-size:13px;color:var(--secondary);white-space:nowrap} @media (min-width:768px){.win-search{display:inline-flex}} .sz-body{padding:20px} @media (min-width:768px){.sz-body{padding:28px}} .sz-prod{display:flex;align-items:center;gap:16px} .sz-shoe{width:120px;height:auto;flex:none;transform:rotate(-8deg);margin:-8px 0 -4px -6px} .sz-shoe .laces{stroke-dasharray:1;stroke-dashoffset:0} .sz-name{font:650 22px/1.15 var(--font-display);letter-spacing:-.02em} .sz-meta{font-size:14px;color:var(--muted);margin-top:2px} .sz-area{position:relative;display:grid;gap:20px;margin-top:20px} .sz-main{min-width:0} .sz-scroll{overflow-x:auto;overscroll-behavior-x:contain;border-radius:12px;-webkit-overflow-scrolling:touch;scrollbar-width:thin} .sz-scroll:focus-visible{outline-offset:4px} .sz-tablewrap{position:relative;width:max-content;--cell:56px;--gap:6px;--colw:76px;--hh:24px} .sz-table{border-collapse:separate;border-spacing:var(--gap);table-layout:fixed;margin:calc(var(--gap) * -1)} .sz-table col{width:var(--cw,var(--cell))} .sz-table col.c-col{width:var(--colw)} .sz-table col.c-tot{width:60px} .sz-table th,.sz-table td{padding:0;box-sizing:border-box} .sz-table thead th,.sz-table thead td{height:var(--hh);font:600 13px/1 var(--font);color:var(--secondary);text-align:center;white-space:nowrap} .sz-table thead th:last-child{text-align:center} .sz-table tbody th{position:sticky;left:0;z-index:2;background:#fff;text-align:left;font:600 14px/1.2 var(--font);white-space:nowrap;box-shadow:-6px 0 0 #fff,2px 0 0 #fff} .sz-table tbody th i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;vertical-align:-1px} .sw-blk{background:#2a2b31}.sw-tan{background:#c49a6c} .sz-table td{position:relative;height:var(--cell);border-radius:10px;border:1px solid var(--line-strong);background:#fff;text-align:center;vertical-align:middle} .sz-table td.tot{border-color:transparent;background:var(--soft)} /* the empty corner cell stays put with the colour column and is opaque, so a swiped size label ("EU 40") slides under it instead of floating over the colour names */ .sz-table thead td{position:sticky;left:0;z-index:2;border:0;background:#fff;box-shadow:-6px 0 0 #fff,2px 0 0 #fff;height:var(--hh)} .sz-table thead td::after{display:none} .sz-table td::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:var(--accent-soft);opacity:0;pointer-events:none} .cq{display:grid;font:650 20px/1 var(--font);font-variant-numeric:tabular-nums;color:var(--text)} /* the empty cell's dash is the grid's visible quantity until the order is filled, so it is text, not decoration: #6e7180 on white (4.8:1) and #515462 on the grey total cells (6.7:1) */ .cq>.b{color:var(--muted)} .sz-table td.tot .cq>.b{color:var(--secondary)} .cf{display:block;margin-top:3px;font:400 13px/1.15 var(--font);color:var(--muted)} .cf.xf{display:grid} td.short .cf>.a{color:var(--amber-ink);font-weight:600;white-space:normal} .sz-table td.short.filled-bg{background:var(--amber-soft)} .sz-ol{position:absolute;pointer-events:none;overflow:visible;z-index:1; left:calc(var(--colw) + var(--gap) - 4px);top:calc(var(--hh) + var(--gap) - 4px);width:calc(var(--cw,var(--cell)) * 8 + var(--gap) * 7 + 8px);height:calc(var(--cell) * 2 + var(--gap) + 8px)} .sz-ol rect{width:calc(100% - 2px);height:calc(100% - 2px);fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:0} .demo[data-step="2"] .sz-ol rect,.demo[data-step="3"] .sz-ol rect{animation:draw .3s var(--ease-out) both} html:not(.js) .sz-ol{display:none} @keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .swipe{margin-top:10px;font-size:13px;color:var(--secondary)} .sz-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .sz-chips .chip{font-variant-numeric:tabular-nums} .sz-side{align-self:start;padding:16px;border-radius:14px;background:var(--soft)} .sz-side-t{font:600 15px/1.3 var(--font)} .sz-stats{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 24px;margin-top:10px} .sz-stats div{display:grid;gap:2px} .sz-stats dt{font-size:13px;color:var(--secondary)} .sz-stats dd{font:650 20px/1.1 var(--font);font-variant-numeric:tabular-nums} .sz-callout{margin-top:18px} /* phones: a slimmer colour column ("● Black" needs about 58 px), so more of the sizes show beside it */ @media (max-width:479px){.sz-tablewrap{--colw:64px}} @media (min-width:768px){.sz-tablewrap{--cell:56px;--colw:84px;--hh:28px}.swipe{display:none}} /* desktop: wider cells, so the grid fills the window instead of hugging its left edge */ @media (min-width:1024px){.sz-tablewrap{--cw:72px;--cell:60px;--gap:7px;--colw:92px}.sz-table col.c-tot{width:68px}.cq{font-size:22px}.cf{font-size:13px;margin-top:4px}} @media (min-width:1280px){.sz-area{grid-template-columns:minmax(0,1fr) 248px;column-gap:28px;align-items:start}.sz-stats{grid-template-columns:1fr;gap:12px}.sz-side{padding:20px}} /* grid state: filled from step 1 (and without JS) */ .sz-table .cq>.a,.sz-table .cf>.a{opacity:0;visibility:hidden} html:not(.js) .sz-table .cq>.b,html:not(.js) .sz-table .cf>.b, .demo[data-step="1"] .sz-table .cq>.b,.demo[data-step="2"] .sz-table .cq>.b,.demo[data-step="3"] .sz-table .cq>.b, .demo[data-step="1"] .sz-table .cf>.b,.demo[data-step="2"] .sz-table .cf>.b,.demo[data-step="3"] .sz-table .cf>.b{opacity:0;visibility:hidden} html:not(.js) .sz-table .cq>.a,html:not(.js) .sz-table .cf>.a, .demo[data-step="1"] .sz-table .cq>.a,.demo[data-step="2"] .sz-table .cq>.a,.demo[data-step="3"] .sz-table .cq>.a, .demo[data-step="1"] .sz-table .cf>.a,.demo[data-step="2"] .sz-table .cf>.a,.demo[data-step="3"] .sz-table .cf>.a{opacity:1;visibility:visible;transform:none;transition-delay:0s} html:not(.js) .sz-table td.short,.demo[data-step="1"] .sz-table td.short,.demo[data-step="2"] .sz-table td.short,.demo[data-step="3"] .sz-table td.short{background:var(--amber-soft);border-color:rgba(169,106,11,.28)} .demo[data-step="1"] .sz-table td[style]{animation:cellIn .4s var(--spring) both;animation-delay:calc(var(--w) * 30ms)} .demo[data-step="1"] .sz-table td[style]::after{animation:flash .5s var(--ease-out) both;animation-delay:calc(var(--w) * 30ms)} @keyframes cellIn{from{transform:scale(.92)}to{transform:none}} @keyframes flash{0%{opacity:0}30%{opacity:1}100%{opacity:0}} .sz-chips .roll>.a,.sz-side .roll>.a{opacity:0;visibility:hidden} html:not(.js) .sz-chips .roll>.b,.demo[data-step="1"] .sz-chips .roll>.b,.demo[data-step="2"] .sz-chips .roll>.b,.demo[data-step="3"] .sz-chips .roll>.b, html:not(.js) .sz-side .roll>.b,.demo[data-step="2"] .sz-side .roll>.b,.demo[data-step="3"] .sz-side .roll>.b{opacity:0;visibility:hidden;transform:translateY(-6px)} html:not(.js) .sz-chips .roll>.a,.demo[data-step="1"] .sz-chips .roll>.a,.demo[data-step="2"] .sz-chips .roll>.a,.demo[data-step="3"] .sz-chips .roll>.a, html:not(.js) .sz-side .roll>.a,.demo[data-step="2"] .sz-side .roll>.a,.demo[data-step="3"] .sz-side .roll>.a{opacity:1;visibility:visible;transform:none;transition-delay:0s} /* reserving this order takes its pairs out of what is left to promise, so every filled cell agrees with the side card (EU 42 Black: "100 left" becomes "90 left", as "Free to sell 100" becomes 90) */ html:not(.js) .sz-table .cf .roll>.b,.demo[data-step="2"] .sz-table .cf .roll>.b,.demo[data-step="3"] .sz-table .cf .roll>.b{opacity:0;visibility:hidden;transform:translateY(-6px)} html:not(.js) .sz-table .cf .roll>.a,.demo[data-step="2"] .sz-table .cf .roll>.a,.demo[data-step="3"] .sz-table .cf .roll>.a{opacity:1;visibility:visible;transform:none;transition-delay:0s} .sz-ghost{position:absolute;inset:0 0 auto 0;z-index:3;display:none;grid-template-columns:1fr;gap:4px;padding:2px 0;background:#fff;transform-origin:top; transition:transform .6s var(--spring),opacity .5s var(--ease-out),visibility 0s linear .6s} .gr{display:flex;align-items:center;gap:8px;height:18px;font:400 13px/1 var(--font-mono);color:var(--faint);white-space:nowrap} .gr i{display:inline-block;width:28px;height:14px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--line-strong)} .gr i:first-of-type{margin-left:auto} @media (min-width:768px){.sz-ghost{grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(8,auto);column-gap:32px}.gr{height:20px}} /* ---- Beat: part deliveries ---- */ .dv-head{font:600 16px/1.4 var(--font)} .dv-bar{display:flex;height:10px;margin-top:18px;border-radius:999px;background:var(--sunken);overflow:hidden} .dv-done{width:60%;height:100%;background:var(--green);border-radius:999px 0 0 999px;transform-origin:left;transition:transform .6s var(--spring)} .dv-labels{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 16px;margin-top:12px;font-size:14px} .dv-labels>span{display:inline-flex;align-items:center;gap:8px} .sw.green{background:var(--green);border-radius:50%;width:8px;height:8px}.sw.grey{background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-strong);border-radius:50%;width:8px;height:8px} .mono-chip{font-family:var(--font-mono);font-size:13px;min-height:26px;padding:2px 8px;background:var(--soft);color:var(--text)} .dv-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} /* ---- Beat: dead stock chart ---- */ .chart-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px} .legend{display:flex;gap:16px;font-size:13px;color:var(--muted)} .legend li{display:inline-flex;align-items:center;gap:6px} .sw.bought{background:var(--chart-secondary)}.sw.sold{background:var(--accent)} .chart-flag{white-space:normal;height:auto;min-height:26px;padding:4px 10px;line-height:1.25} .chart{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:8px;margin-top:18px} .ch-y{display:flex;flex-direction:column;justify-content:space-between;height:220px;margin-top:-7px;margin-bottom:21px;font-size:13px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums} .ch-plot{position:relative;height:242px} .ch-grid{position:absolute;inset:0 0 22px;display:flex;flex-direction:column;justify-content:space-between} .ch-grid i{display:block;height:1px;background:repeating-linear-gradient(90deg,rgba(17,24,39,.12) 0 2px,transparent 2px 8px)} .ch-grid i:last-child{background:var(--line-strong)} .ch-bars{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px} .ch-g{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding-bottom:22px;transition:opacity .2s} .ch-g i{display:block;width:min(28px,42%);height:calc(var(--h) * 220px);border-radius:4px 4px 1px 1px;transform-origin:bottom;transition:transform .7s var(--spring)} .ch-g .bb{background:var(--chart-secondary)} .ch-g .bs{background:var(--accent);transition-delay:40ms} .ch-g span{position:absolute;bottom:0;left:0;right:0;text-align:center;font-size:13px;line-height:18px;color:var(--muted)} @media (min-width:768px){.ch-g{gap:4px}} @media (hover:hover) and (pointer:fine){.ch-bars:hover .ch-g:not(:hover){opacity:.55}} .ch-x{grid-column:2;margin-top:6px;font-size:13px;color:var(--muted);text-align:center} .reorder{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .ro-text{font:600 15px/1.4 var(--font)} .ro-act{display:inline-grid} .ro-act>*{grid-area:1/1;justify-self:end} .po-chip{opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .24s var(--ease-out),transform .38s var(--spring),visibility 0s linear .24s;min-height:44px} .ro-act.done .po-chip{opacity:1;visibility:visible;transform:none;transition-delay:0s} .ro-act.done #po-btn{opacity:0;visibility:hidden} .label-strip{display:flex;align-items:center;gap:14px;margin-top:14px} .label-card{display:grid;justify-items:center;gap:6px;padding:10px 14px 8px;background:#fff;border-radius:8px;border:1px solid var(--line-strong);box-shadow:var(--shadow-sm)} .barcode{width:150px;height:34px;fill:var(--text)} .label-code{font-size:13px;letter-spacing:.06em} .label-meta{font-size:14px;color:var(--secondary)} .short .cf{position:relative;display:block} .short .cf>.a{position:absolute;left:0;right:0;top:0;font-size:13px;line-height:1.15} html:not(.js) .sz-table td.short .cf>.a,.demo[data-step="1"] .sz-table td.short .cf>.a,.demo[data-step="2"] .sz-table td.short .cf>.a,.demo[data-step="3"] .sz-table td.short .cf>.a{position:static} html:not(.js) .sz-table td.short .cf>.b,.demo[data-step="1"] .sz-table td.short .cf>.b,.demo[data-step="2"] .sz-table td.short .cf>.b,.demo[data-step="3"] .sz-table td.short .cf>.b{position:absolute;left:0;right:0;top:0} /* ===================================================================== 8. Trust the books renders ===================================================================== */ /* ---- One press ---- */ .press{display:grid;gap:16px} .pr-card,.pr-sale{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:20px;color:var(--text)} .pr-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 0 4px var(--accent-soft),0 0 0 1px rgba(58,92,204,.35);opacity:0;pointer-events:none} .press.pressed .pr-card::before{animation:ring .7s var(--ease-out) both} @keyframes ring{0%{opacity:0}25%{opacity:1}100%{opacity:0}} .pr-sale{border-radius:24px;box-shadow:var(--shadow-lg);padding:24px} .pr-t{margin-top:6px;font:600 15px/1.4 var(--font)} .pr-v{margin-top:8px;font:650 28px/1.1 var(--font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums} .pr-v2{margin-top:8px;font:650 22px/1.2 var(--font-display);letter-spacing:-.015em;font-variant-numeric:tabular-nums} .js .pr-v2 .nw{white-space:nowrap} .pr-k{font:500 .68em/1 var(--font);letter-spacing:0;color:var(--secondary)} .pr-v2 .rs{font-size:max(13px,.5em)} .pr-bar{height:4px;margin-top:12px;border-radius:999px;background:var(--sunken);overflow:hidden} .pr-bar i{display:block;height:100%;width:100%;background:var(--green);border-radius:inherit;transform-origin:left;transition:transform .3s var(--ease-out)} .press.pressed .pr-bar i{transform:scaleX(.8)} .pr-n{margin-top:8px;font-size:13px;line-height:1.4;color:var(--muted)} .pr-doc{font-size:15px;color:var(--secondary)} .pr-doc .mono{color:var(--text)} .pr-line{margin-top:4px;font-size:16px;line-height:1.4} .pr-doc+.pr-line{margin-top:10px} .pr-total{margin-top:10px;font:650 34px/1.1 var(--font-display);letter-spacing:-.025em;font-variant-numeric:tabular-nums} .pr-sale .tryit-label{margin-top:18px;color:var(--secondary)} .pr-act{position:relative;margin-top:8px} .pr-btn{position:relative;width:100%;display:grid} /* the label that isn't showing is also hidden from screen readers, so the button is named "Confirm sale" before the press and "Confirmed" after it, never both */ .pr-btn>span{grid-area:1/1;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:opacity .2s,visibility 0s linear .2s} .pr-btn .pb-a{opacity:0;visibility:hidden} .press.pressed .pr-btn .pb-b{opacity:0;visibility:hidden} .press.pressed .pr-btn .pb-a{opacity:1;visibility:visible;transition-delay:0s} .press.pressed .pr-btn{background:var(--green-soft);color:var(--green-ink);cursor:default} .press.pressed .pr-btn:active{transform:none} .pr-btn::after{content:"";position:absolute;inset:-2px;border-radius:14px;box-shadow:0 0 0 2px var(--accent);opacity:0;pointer-events:none} .pr-btn.pulse::after{animation:pulse .9s var(--ease-out) 1} /* "Try another sale" sits on the TRY IT line, right-aligned, so no empty space is reserved under the button; its hit area still reaches 44 px */ .pr-reset{position:absolute;right:0;bottom:calc(100% + 1px);min-height:28px;font-size:15px;visibility:hidden;opacity:0;transition:opacity .2s} .pr-reset::before{content:"";position:absolute;left:-6px;right:-6px;top:-8px;bottom:-8px} .press.pressed .pr-reset{visibility:visible;opacity:1} .press .roll>.a{opacity:0;visibility:hidden;transform:translateY(6px)} .press.pressed .roll>.b{opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility 0s linear .3s} .press.pressed .roll>.a{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out),visibility 0s} .press.instant *{transition:none!important} .journal{position:relative;display:grid;margin-top:10px;font:400 14px/1.4 var(--font-mono);font-variant-numeric:tabular-nums} .jr{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-top:1px solid var(--line);opacity:0;visibility:hidden;transition:opacity .3s var(--ease-out),visibility 0s linear .3s} .jr:first-child{border-top:0} .press.pressed .jr{opacity:1;visibility:visible;transition-delay:0s} /* before the press: the journal page shows its four accounts in pale ghost ink, amounts not yet posted, so the card reads as waiting for its entry rather than empty. The words are real text to read, so the ink is #6e7180 on the white card (4.8:1), not the decorative #9a9daa (2.7:1); the dashes and the darker posted rows keep it a ghost */ .j-ghost{position:absolute;inset:0;display:grid;grid-template-rows:repeat(4,1fr);color:var(--muted);transition:opacity .2s} .j-ghost>span{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:1px solid var(--line)} .j-ghost>span:first-child{border-top:0} .j-ghost b{font-weight:400;white-space:nowrap} .press.pressed .j-ghost{opacity:0} /* the Balanced pill sits on the BOOKS line, so the card is no taller than its journal */ .pr-books{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-content:start} .pr-books>.m-eyebrow{grid-column:1;grid-row:1;align-self:center} .pr-books>.journal{grid-column:1/-1;grid-row:2} .j-foot{grid-column:2;grid-row:1;min-height:26px;margin:-2px 0} /* hidden from screen readers too until the press, so "Balanced" is never read beside an empty journal */ .j-foot .pill{opacity:0;visibility:hidden;transform:scale(.9);transition:opacity .3s var(--ease-out),transform .38s var(--spring),visibility 0s linear .3s} .press.pressed .j-foot .pill{opacity:1;visibility:visible;transform:none;transition-delay:0s} html:not(.js) .ba-roll{display:inline} html:not(.js) .ba-roll>*{opacity:1!important;visibility:visible!important;transform:none!important} html:not(.js) .ba-roll .arr{display:inline} html:not(.js) .jr,html:not(.js) .j-foot .pill{opacity:1;visibility:visible;transform:none} html:not(.js) .j-ghost,html:not(.js) .pr-reset{display:none} html:not(.js) .pr-btn,html:not(.js) .pr-sale .tryit-label{display:none} .fan{display:none} /* phone and tablet: one trunk line that branches to each card */ .pr-stock,.pr-cust,.pr-books{margin-left:28px} .pr-stock::after,.pr-cust::after,.pr-books::after{content:"";position:absolute;left:-17px;top:-17px;height:calc(100% + 17px);width:1px;background:var(--line-strong)} .pr-books::after{height:47px} .pr-card>.m-eyebrow::before{content:"";position:absolute;left:-17px;top:30px;width:16px;height:1px;background:var(--line-strong)} /* phones: the three results are short rows right under the button (the sale card above already names the product and the customer), so the press and everything it changes fit on one screen together */ @media (max-width:767px){ .press{gap:12px} .pr-sale{padding:20px 20px 18px} .pr-card{padding:12px 16px} .pr-card>.pr-t{display:none} .pr-stock,.pr-cust{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:center} .pr-stock>.m-eyebrow,.pr-cust>.m-eyebrow{grid-column:1;grid-row:1} .pr-stock>.pr-v{grid-column:2;grid-row:1;justify-self:end;margin:0;font-size:22px} .pr-stock>.pr-bar,.pr-stock>.pr-n{grid-column:1/-1} .pr-stock>.pr-bar{margin-top:8px} .pr-stock>.pr-n{margin-top:6px} .pr-cust>.pr-n{grid-column:2;grid-row:1;justify-self:end;margin:0;text-align:right} .pr-cust>.pr-v2{grid-column:1/-1;margin-top:4px;font-size:20px} .pr-books .journal{margin-top:6px;font-size:13px;line-height:1.35} .pr-books .jr{padding:3px 0} .pr-stock::after,.pr-cust::after,.pr-books::after{top:-13px;height:calc(100% + 13px)} .pr-books::after{height:36px} .pr-card>.m-eyebrow::before{top:23px} .pr-books .jr>span:last-child{white-space:nowrap} } @media (max-width:359px){.pr-card{padding:12px 14px}.pr-books .jr{gap:8px}} /* desktop: one sale at the top fans out to its three results, stock | books | customer, in one row */ @media (min-width:1024px){ .press{--cg:32px;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 72px auto; grid-template-areas:"sale sale sale" "fan fan fan" "stock books cust";column-gap:var(--cg);row-gap:0} .pr-sale{grid-area:sale;justify-self:center;width:min(100%,500px);padding:28px} .pr-stock{grid-area:stock}.pr-cust{grid-area:cust}.pr-books{grid-area:books} .pr-stock,.pr-cust,.pr-books{margin-left:0;padding:24px} .pr-v{font-size:34px}.pr-v2{font-size:24px} .pr-stock::after,.pr-cust::after,.pr-books::after,.pr-card>.m-eyebrow::before{display:none} .fan{display:block;grid-area:fan;position:relative;pointer-events:none;--c1:calc((100% - var(--cg) * 2) / 6)} .fan i{position:absolute;background:var(--line-strong)} .fan i::after{content:"";position:absolute;inset:0;background:var(--accent);opacity:0} .f-trunk{left:50%;top:0;height:50%;width:1px} .f-bar{top:50%;height:1px;left:var(--c1);right:var(--c1)} .f-d{top:50%;bottom:0;width:1px} .f-d1{left:var(--c1)}.f-d2{left:50%}.f-d3{right:var(--c1)} .f-trunk::before,.f-d::before{content:"";position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line-strong)} .f-trunk::before{top:-3px} .f-d::before{bottom:-4px} .press.pressed .fan i::after{animation:wire .6s var(--ease-out) both} .press.pressed .fan .f-bar::after{animation-delay:.06s} .press.pressed .fan .f-d::after{animation-delay:.12s} } @keyframes wire{0%{opacity:0}40%{opacity:1}100%{opacity:0}} .press-after{margin-top:22px;font-size:17px;line-height:1.5;color:var(--secondary);max-width:56ch} @media (min-width:1024px){.beat-wide>.press-after{grid-column:1/-1;margin-top:0}} /* ---- Corrections ---- */ .corr-rows{display:block} .cr{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:52px;padding:10px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4} .cr:first-child{border-top:0} .cr-main{min-width:0} .cr .mono{font-size:14px} .cr1 .cr-main{color:var(--secondary)} .cr1 .cr-main{position:relative;text-decoration:line-through;text-decoration-thickness:1.5px} .strike{display:none;position:absolute;left:0;right:0;top:52%;height:1.5px;background:var(--secondary);transform-origin:left;pointer-events:none;transition:transform .3s var(--ease-out)} @media (min-width:768px){.cr1 .cr-main{text-decoration:none;white-space:nowrap}.strike{display:block}} .cr1 .cr-main{transition:color .15s} .cr-rev{transition:opacity .3s var(--ease-out) .2s} .cr2,.cr3{transition:opacity .6s var(--spring),transform .6s var(--spring)} .cr3{transition-delay:.12s} .cr2{transition-delay:0s} .agree{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;padding-top:16px;border-top:1px solid var(--line)} .ck .ico{color:var(--green);transition:opacity .2s var(--ease-out),transform .3s var(--spring);transition-delay:calc(var(--c) * 100ms + .7s)} .agree-t{font-size:15px;font-weight:600;color:var(--text);margin-left:4px} /* ---- Records ---- */ .crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:12px 14px;border-radius:10px;background:var(--soft);font-size:15px;line-height:1.4;color:var(--text)} .cb-sep{color:var(--secondary)} .cb,.cb-sep{transition:opacity .3s var(--ease-out);transition-delay:calc(var(--c,0) * 80ms)} .cb-doc{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:8px;background:#fff;box-shadow:var(--shadow-sm),0 0 0 1px var(--line);font-size:14px; transition:opacity .3s var(--ease-out) .45s,transform .45s var(--spring) .45s} .cb-doc .ico{width:16px;height:16px;color:var(--accent-text)} .backups{margin-top:18px} .bk-dots{display:flex;flex-wrap:wrap;align-items:center;gap:6px} .bk-dots i{display:block;width:10px;height:10px;border-radius:50%;background:var(--sunken);box-shadow:inset 0 0 0 1.5px var(--green)} .bk-dots .bk-new{display:grid;place-items:center;width:18px;height:18px;background:var(--green);box-shadow:none;color:#fff;transition:transform .38s var(--spring) .8s,background-color .3s .8s} .bk-new .ico{width:12px;height:12px;stroke-width:2.5} .bk-cap{margin-top:10px;font-size:14px;line-height:1.4;color:var(--secondary)} /* ---- Staff and margins ---- */ .acct{margin-top:22px;color:var(--text)!important} .acct-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} .acct-chips .chip{background:#fff;color:var(--text);border:1px solid var(--line-strong);box-shadow:var(--shadow-sm)} .staff-seg{margin-bottom:16px} .st-label{font:600 13px/1.3 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--secondary);margin-bottom:8px} .js .st-label,.js .st-static{display:none} html:not(.js) .staff-seg{display:none} .st-static{margin-top:20px} .st-scroll{overflow-x:auto;scrollbar-width:thin} .st-table{display:grid;min-width:560px} .st-row{display:grid;grid-template-columns:minmax(150px,1.7fr) repeat(5,minmax(72px,1fr));align-items:center;column-gap:12px;min-height:48px;padding:0 12px;border-top:1px solid var(--line);font-size:15px;font-variant-numeric:tabular-nums} .st-head{min-height:40px;border-top:0;border-radius:10px;background:var(--soft);font:600 13px/1.2 var(--font);color:var(--secondary)} .st-row .mono{font-size:14px} .st-lock{display:none;justify-self:end;min-height:26px;padding:2px 10px;font-size:13px;background:#fff} .oc{transition:opacity .2s var(--ease-out)} .staff.fading .oc{opacity:0} .staff[data-view="staff"] .oc{display:none} .staff[data-view="staff"] .st-row{grid-template-columns:minmax(150px,1.7fr) repeat(2,minmax(72px,1fr)) minmax(0,1.3fr)} .staff[data-view="staff"] .st-lock{display:inline-flex;animation:fadein .2s var(--ease-out) both} .st-staff{min-width:0} .st-staff .st-row{grid-template-columns:minmax(150px,1.7fr) repeat(2,minmax(72px,1fr)) minmax(0,1.3fr)} .st-staff .st-lock{display:inline-flex} .staff[data-view="staff"] .st-table{min-width:0} /* ===================================================================== 9. Made for how you work ===================================================================== */ /* on white, between chapter 03 and Why switch on the canvas */ .hyw{padding:clamp(72px,9vw,152px) 0;background:var(--surface);border-block:1px solid var(--line)} .hyw .h2{max-width:20ch} .devices{margin-top:48px} /* phones: the stage runs to the left screen edge, so the laptop's shadow ends at the glass, not in mid-air; on the right the laptop is cut under the phone */ .dev-stage{--pw:200px;position:relative;min-height:calc(var(--pw) * 2.164 + 24px);overflow:hidden;overflow:clip;overflow-y:visible;padding:12px 0 0 var(--gutter);margin-left:calc(var(--gutter) * -1)} .laptop{position:relative;width:560px} .lt-main{display:flex;height:calc(100% - 40px)} .lt-side{display:none;flex:none;width:168px;padding:14px 10px;background:#fafafb;border-right:1px solid var(--line)} .lt-side span{display:block;padding:8px 10px;border-radius:8px;font:550 13px/1.2 var(--font);color:var(--secondary)} .lt-side .on{background:#fff;color:var(--text);box-shadow:var(--shadow-sm),0 0 0 .5px var(--line)} .lt-body{flex:1;min-width:0} .lt-eb{margin-top:16px} .lt-foot{margin-top:16px;padding-top:14px} .lt-foot .chip{font-size:13px} .lt-win{position:relative;aspect-ratio:16/10;background:#fff;border:1px solid var(--line-strong);border-bottom:0;border-radius:14px 14px 0 0;box-shadow:var(--shadow-lg);overflow:hidden} .lt-body{padding:22px 24px} .lt-body .af-head .avatar{width:44px;height:44px} .lt-body .af-name{font:650 20px/1.15 var(--font-display);letter-spacing:-.02em} .lt-body .af-meta{font-size:13px;color:var(--muted)} .lt-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:24px;margin-top:20px} .lt-cols .m-amt{font-size:30px} .lt-cols .credit{margin-top:12px} .lt-rows .chq{min-height:52px} .lt-bezel{height:16px;margin:0 -14px;border-radius:0 0 16px 16px;background:linear-gradient(#3a3c44,#1d1d1f 60%);box-shadow:0 12px 24px -12px rgba(16,24,40,.4)} .dev-phone{position:absolute;right:0;bottom:0;width:var(--pw);padding:8px;border-radius:34px} .dev-phone .ph-screen{border-radius:27px} .dev-phone .ph-view{background:#fff} .dev-body{padding:12px} @media (min-width:768px){.dev-body{padding:14px}} .dev-who{display:flex;align-items:center;gap:8px;margin-bottom:14px} .dev-who .ph-name{white-space:normal;font-size:14px} .dev-amt{font-size:24px;margin:2px 0 10px} .dev-sync{display:inline-grid} /* both pills share one cell (so nothing moves when it syncs), but each draws at its own width */ .dev-sync .pill{justify-self:start;align-self:start;white-space:normal;height:auto;min-height:26px;padding:4px 10px;line-height:1.2} .dev-phone .credit{margin-top:14px} .dev-eb{margin-top:18px} .dev-rows{margin-top:4px} .dev-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"no pill" "amt pill";align-items:center;column-gap:8px;row-gap:1px;padding:8px 0;border-top:1px solid var(--line)} .dev-rows li:first-child{border-top:0} .dev-rows .mono{grid-area:no;font-size:13px;color:var(--text)} .dev-rows .num{grid-area:amt;font-size:13px;font-weight:550;color:var(--secondary)} .dev-rows .pill{grid-area:pill;height:24px;padding:0 7px;gap:5px;font-size:13px} .lt-legend{font-size:13px;margin-top:10px} @media (min-width:768px){ .dev-stage{--pw:240px;overflow:visible;padding-left:0;margin-left:0} .dev-rows .pill{padding:0 9px} .laptop{width:min(860px,86%)} .lt-side{display:block} .dev-phone{right:0;padding:10px;border-radius:40px} .dev-phone .ph-screen{border-radius:31px} } @media (min-width:1024px){.dev-stage{--pw:270px}.laptop{width:min(880px,80%)}.dev-phone{right:3%}} /* below 1024 px the phone never covers the laptop's text: the laptop crop shows one column (name, balance, credit), the cheques live on the phone. Tablets: the laptop ends where the phone begins, so the phone covers only the window's right padding. Phones: the laptop runs the full width and the phone stands in front of its bezel. */ @media (max-width:1023px){ .lt-side,.lt-rows,.lt-win .mbtn,.lt-win .win-search{display:none!important} .lt-cols{grid-template-columns:minmax(0,1fr)} .lt-win{aspect-ratio:auto} .lt-main{height:auto} } @media (min-width:768px) and (max-width:1023px){ .laptop{width:calc(100% - var(--pw) + 24px)} } @media (max-width:767px){ .dev-stage{display:flex;flex-direction:column;align-items:flex-end;min-height:0;padding:12px 0 0;margin-left:0;overflow:visible} .laptop{width:100%} .lt-body{padding:18px 18px 24px} .lt-cols{margin-top:16px} .lt-eb,.lt-body .age-bar,.lt-legend,.lt-foot{display:none} .lt-bezel{margin:0 -8px} .dev-phone{position:relative;right:auto;bottom:auto;margin:-28px 6px 0 0} } .tiles{display:grid;margin-top:64px;border-top:1px solid var(--line)} .tile{display:grid;grid-template-columns:30px minmax(0,1fr);gap:16px;padding:28px 0;border-bottom:1px solid var(--line)} .itile{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent-soft);color:var(--accent-text)} .itile .ico{width:18px;height:18px} .tile-t{font:650 20px/1.25 var(--font-display);letter-spacing:-.01em} .tile-t+p{margin-top:6px;font-size:17px;line-height:1.5;color:var(--secondary);max-width:52ch} @media (min-width:1024px){ .tiles{grid-template-columns:1fr 1fr;column-gap:48px} .tile-5{grid-column:1/-1} } .tile5-in{display:grid;gap:24px} /* desktop: the figure starts on the same line as the text of the right-hand tiles above it (half the tile row plus the 48 px gap, less the icon column this tile already spent) */ @media (min-width:1024px){.tile5-in{grid-template-columns:calc(50% - 1px) minmax(0,1fr);column-gap:48px;align-items:start}} /* one settings bar above the document: language on the left, the tax switch on the right */ .stmt-bar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-bottom:22px} /* the language switch and the tax switch form one settings bar directly above the statement, as one group */ .stmt-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:20px 28px} .stmt{width:min(100%,360px);padding:24px 26px 22px;background:#fff;border:1px solid var(--line-strong);border-radius:6px;rotate:1deg; box-shadow:0 1px 2px rgba(16,24,40,.05),0 18px 40px -16px rgba(16,24,40,.22)} .stmt-brand{display:flex;align-items:center;gap:8px;font:600 14px/1 var(--font);color:var(--secondary)} .stmt-h{display:grid;margin-top:18px;font:650 20px/1.3 var(--font-display);letter-spacing:-.01em} .stmt-h>.lg,.stmt-lbl>.lg{grid-area:1/1;transition:opacity .15s var(--ease-out)} .stmt-lbl{display:grid} .stmt .lg{opacity:0;visibility:hidden} .stmt[data-lang="en"] [data-l="en"],.stmt[data-lang="si"] [data-l="si"],.stmt[data-lang="ta"] [data-l="ta"]{opacity:1;visibility:visible} .stmt.swap .lg{opacity:0!important} .stmt-h :lang(si),.stmt-h :lang(ta){letter-spacing:0;line-height:1.7;font-size:.92em} .stmt-who{margin-top:4px;font-size:14px;color:var(--muted)} .stmt-lbl{margin-top:18px} .stmt-amt{font-size:28px;margin-top:2px} .stmt-chq{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} .stmt-chq .mono{font-family:var(--font);font-size:13px;color:var(--text)} .tax-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 14px;border-radius:12px;background:#fff;border:1px solid var(--line);font-size:15px;color:var(--text);box-shadow:var(--shadow-sm)} .tgl{position:relative;width:36px;height:22px;border-radius:999px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--line-strong);flex:none} .tgl i{position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.25)} .stmt-also{margin-top:14px;font-size:16px;color:var(--secondary)} html:not(.js) .lang-seg{display:none} .hyw-close{margin-top:40px;font-size:16px;line-height:1.5;color:var(--secondary);max-width:58ch} /* ===================================================================== 10. Why switch ===================================================================== */ section.switch{padding:clamp(72px,9vw,152px) 0} section.switch .h2{margin-top:12px;max-width:22ch} .sw-prompt{margin-top:28px;font:600 17px/1.4 var(--font);color:var(--text)} .sw-opts{margin-top:12px;display:flex;flex-wrap:wrap} /* below 1024 px the options wrap on the grey track; the chosen one is the same white raised segment as everywhere else */ .sw-opts{padding:4px;border-radius:14px;background:var(--soft);gap:4px} .sw-opts label span{min-height:44px;padding:0 14px;border-radius:10px;background:none;box-shadow:none;font-size:15px} .sw-opts input:checked+span{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.12),0 0 0 1px var(--muted)} .sw-opts .glide{display:none} @media (min-width:1024px){ .sw-opts{display:inline-flex;flex-wrap:nowrap;gap:2px;padding:3px;border-radius:12px;background:var(--soft)} .sw-opts label span{background:none;box-shadow:none;border-radius:9px;min-height:42px} .sw-opts input:checked+span{background:none;color:var(--text)} .sw-opts .glide{display:block;border-radius:9px} html:not(.js) .sw-opts input:checked+span,.sw-opts:not(.has-glide) input:checked+span{background:#fff;color:var(--text);box-shadow:0 1px 3px rgba(16,24,40,.1),0 0 0 1px var(--muted)} } .sw-panels{margin-top:24px} .sw-panel{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:22px} .sw-panel+.sw-panel{margin-top:16px} .js .sw-panel{display:none} .js .sw-panels:not(.picked) .sw-panel[data-opt="notebook"]{display:block} .js .sw-panel.on{display:block;animation:fadein .2s var(--ease-out) both} .js .sw-panel+.sw-panel{margin-top:0} .sw-name{font:650 20px/1.2 var(--font-display);margin-bottom:12px} .js .sw-name{display:none} .sw-k{color:var(--secondary)} .sw-cost{margin-top:6px;font:650 22px/1.3 var(--font-display);letter-spacing:-.01em;max-width:36ch} .cmp{width:100%;margin-top:18px;border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.4} .cmp th,.cmp td{text-align:left;vertical-align:top;padding:12px 14px} .cmp thead th{font:600 14px/1.2 var(--font);color:var(--secondary);background:var(--soft)} .cmp thead th.ws{color:var(--accent-text);background:var(--accent-soft)} .cmp thead td{background:none} .cmp tbody td{background:var(--soft);color:var(--secondary);border-top:2px solid #fff} .cmp tbody td.ws{background:var(--accent-soft);color:var(--text);padding-left:30px;position:relative} .cmp tbody td.ws::before{content:"";position:absolute;left:14px;top:20px;width:6px;height:6px;border-radius:50%;background:var(--accent)} .cmp thead th:first-of-type{border-top-left-radius:12px} .cmp thead th:last-child{border-top-right-radius:12px} .cmp tbody tr:last-child td:first-of-type{border-bottom-left-radius:12px} .cmp tbody tr:last-child td:last-child{border-bottom-right-radius:12px} .cmp tbody th{font:600 13px/1.3 var(--font);color:var(--secondary);padding-left:0;width:170px} .cmp td,.cmp th{width:auto} @media (max-width:767px){ .cmp.has-rows thead td{display:none} .cmp.has-rows thead tr,.cmp.has-rows tbody tr{display:grid;grid-template-columns:1fr 1fr} .cmp.has-rows tbody th{grid-column:1/-1;padding:14px 0 6px;width:auto} .cmp.has-rows tbody td{border-top:0} .cmp.has-rows tbody tr td:first-of-type{border-radius:10px 0 0 10px} .cmp.has-rows tbody tr td:last-child{border-radius:0 10px 10px 0} .cmp.has-rows thead th:first-of-type{border-radius:10px 0 0 10px} .cmp.has-rows thead th:last-child{border-radius:0 10px 10px 0} .cmp{font-size:15px} .cmp th,.cmp td{padding:10px 12px} .cmp tbody td.ws{padding-left:26px} .cmp tbody td.ws::before{left:12px;top:18px} } .sw-already{margin-top:22px;font-size:17px;line-height:1.5;color:var(--secondary);max-width:56ch} /* minmax(0,1fr) at every width: the column never grows past the screen, even with larger text spacing */ .sw-bottom{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;margin-top:72px} @media (min-width:1024px){.sw-bottom{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:64px;align-items:start}} .sw-bottom>*{min-width:0} /* the flagged rows' pills may wrap onto two lines rather than run past the card */ .imp-rows .pill{white-space:normal;height:auto;min-height:26px;padding:4px 10px;line-height:1.25} .imp-rows .mono{overflow-wrap:anywhere} .import>p{margin-top:14px;color:var(--secondary);max-width:56ch} .imp-fig{margin-top:24px} .imp-head{font:600 15px/1.4 var(--font)} .imp-rows{margin-top:10px} .imp-rows li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;min-height:44px;padding:8px 10px;border-top:1px solid var(--line);font-size:14px} .imp-rows li:first-child{border-top:0} .imp-rows .flag{background:var(--amber-soft);border-radius:10px;border-top-color:transparent;margin-top:4px} .imp-rows .flag+.flag{margin-top:6px} .imp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:16px} .imp-note{font-size:14px;color:var(--secondary)} .stepper{margin-top:24px} .stepper li{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);gap:16px;padding-bottom:28px} .stepper li:not(:last-child)::before{content:"";position:absolute;left:17.5px;top:42px;bottom:4px;border-left:1px dotted var(--secondary)} .sn{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-text);font:600 16px/1 var(--font)} .st-t{font:650 19px/1.3 var(--font-display);margin-top:5px} .stepper p:not(.st-t){margin-top:4px;font-size:17px;line-height:1.5;color:var(--secondary)} .sw-end{display:grid;justify-items:center;text-align:center;margin-top:88px} .sw-end .hook{margin-inline:auto} .sw-end .btn{margin-top:32px} /* ===================================================================== 11. Plain answers ===================================================================== */ .faq{padding:clamp(72px,9vw,152px) 0} .faq-wrap{max-width:calc(760px + var(--gutter)*2)} .faq-list{margin-top:40px;border-top:1px solid var(--line-strong)} .faq details{border-bottom:1px solid var(--line-strong)} .faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:16px 0;cursor:pointer;list-style:none;font:600 20px/1.35 var(--font);color:var(--text);border-radius:8px} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--accent-text)} .pm{position:relative;width:20px;height:20px;flex:none;color:var(--secondary)} .pm::before,.pm::after{content:"";position:absolute;left:3px;right:3px;top:50%;height:1.5px;margin-top:-.75px;background:currentColor;border-radius:1px;transition:transform .2s var(--ease-out)} .pm::after{transform:rotate(90deg)} .faq details[open] .pm::after{transform:rotate(0deg)} .ans{padding:0 40px 22px 0} /* answers keep the body measure (about 65 characters a line) inside the wider question column */ .ans p{font-size:18px;line-height:1.55;color:var(--secondary);max-width:54ch} @supports (interpolate-size:allow-keywords){ .faq details::details-content{block-size:0;overflow:clip;transition:block-size .3s var(--spring),content-visibility .3s allow-discrete} .faq details[open]::details-content{block-size:auto} } /* ===================================================================== 12. Finale ===================================================================== */ /* the finale's mist starts from the canvas colour of the section above, so there is no line where the day brightens */ .finale{position:relative;overflow:clip;padding:clamp(88px,10vw,168px) 0; background:linear-gradient(#f5f5f7,rgba(245,245,247,0) 220px), radial-gradient(120% 140% at 0 0,#e8edfb,transparent 60%),radial-gradient(90% 120% at 100% 100%,#f3effb,transparent 60%),#ffffff} .finale::before{content:"";position:absolute;width:520px;height:520px;right:-170px;top:40px;border-radius:50%;background:radial-gradient(circle,rgba(58,92,204,.16),transparent 70%);pointer-events:none} .fin-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center} .fin-text{display:grid;justify-items:center;min-width:0;max-width:100%} .finale .eyebrow{color:var(--accent-text)} /* the giant tagline may break inside a word only if it can't fit at all (very large text spacing on a 320 px screen) */ .fin-tag{margin-top:16px;color:var(--text);overflow-wrap:anywhere} .fin-tag>span{display:block} .stop.grad{color:#3a5ccc;display:inline-block} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .stop.grad{background:var(--brand-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.02em} } /* after the tap the full stop takes one small step forward and settles back beside "step", so the remembered end reads "Wholesale, in step." intact, never as a stray dot. Reduced motion: no movement. */ .finale.sent .stop.grad{animation:stopStep .6s var(--ease-out) both} @keyframes stopStep{0%{transform:none}38%{transform:translateX(.14em) scale(1.12)}100%{transform:none}} .fin-sub{margin-top:24px;color:var(--secondary);max-width:38ch} .fin-chips{justify-content:center;margin-top:24px} .fin-cta{display:grid;margin-top:32px;justify-items:center;width:100%;max-width:420px} .fin-cta>*{grid-area:1/1} /* the button row hides only after it has faded, but shows at once when "Send another message" brings it back, so that link can hand keyboard focus straight to the button */ .fin-ask{display:grid;justify-items:center;align-self:start;transition:opacity .38s var(--spring),transform .38s var(--spring),visibility 0s} .fin-btn{transition:transform .12s var(--ease-out),background-color .15s} .fin-btn.press{transform:scale(.97)} /* the long label stays inside the column: one line from 320 px, two lines only if the text itself grows */ .fin-ask{max-width:100%} .fin-btn{max-width:100%;white-space:normal;text-align:center;line-height:1.2;padding-block:8px} @media (max-width:359px){.fin-btn{padding-inline:14px;font-size:16px}} .fin-done{width:100%;padding:18px 20px 14px;text-align:left;background:#fff;border:1px solid var(--line-strong);border-radius:18px;box-shadow:var(--shadow-lg); opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .38s var(--spring),transform .38s var(--spring),visibility 0s linear .38s} .fin-done:focus{outline:none} .fin-done:focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* the card reads top to bottom at every width: the mark and its pill, the step left, then the one link. It takes its own height at the top of the shared cell (the cell still keeps the button's room, so nothing below moves) */ .fin-done{align-self:start} .fd-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .fd-top .mark{width:24px;height:24px;font-size:16px;border-radius:7px} .fd-pill{justify-items:start} .fd-text{margin-top:10px;font-size:16px;line-height:1.45;color:var(--text)} .fd-again{font-size:15px;margin-top:2px} .fin-done .micr{display:block;margin-top:6px;height:5px} .fin-cta.done .fin-ask{opacity:0;visibility:hidden;transform:scale(.96);transition-delay:0s,0s,.38s} .fin-cta.done .fin-done{opacity:1;visibility:visible;transform:none;transition-delay:0s} .fin-done.ready .xf>.b{opacity:0;visibility:hidden;transition-delay:0s,.24s} .fin-done.ready .xf>.a{opacity:1;visibility:visible;transition-delay:0s} .fin-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 24px;margin-top:14px} .fin-links .tlink{font-size:16px} .micro{margin-top:10px;font-size:15px;line-height:1.45;color:var(--secondary)} .fin-art{display:none} @media (min-width:1024px){ .fin-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;text-align:left;justify-items:start;align-items:center} .fin-text{grid-column:1/9;justify-items:start} .fin-chips{justify-content:flex-start} .fin-cta{justify-items:start} .fin-ask{justify-items:start} .fin-links{justify-content:flex-start} /* the sneaker rests in a pool of daylight, with a soft floor shadow under it: the step the tagline promises */ .fin-art{position:relative;display:grid;place-items:center;grid-column:9/13;justify-self:stretch;align-self:center;aspect-ratio:1/1;isolation:isolate} .fin-art::before{content:"";position:absolute;inset:-6%;z-index:-2;border-radius:50%; background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(232,237,251,.8) 40%,rgba(141,163,242,.12) 68%,rgba(141,163,242,.04) 84%,transparent)} .fin-art::after{content:"";position:absolute;z-index:-1;left:16%;right:12%;top:63%;height:30px;border-radius:50%; background:radial-gradient(closest-side,rgba(29,37,76,.22),rgba(29,37,76,.08) 55%,transparent)} .fin-shoe{display:block;width:min(100%,320px);height:auto;aspect-ratio:320/170;transform:rotate(-8deg) translateY(-6%)} } /* ===================================================================== 13. Footer ===================================================================== */ .foot{background:var(--canvas);border-top:1px solid var(--line);padding:64px 0;font-size:15px;line-height:1.5;color:var(--secondary)} .foot-grid{display:grid;gap:40px} @media (min-width:1024px){.foot-grid{grid-template-columns:1fr 1fr 1.6fr;gap:48px}} .foot-mark{color:var(--text)} .foot-brand p:not(.foot-mark){margin-top:12px} .foot-h{font:600 15px/1.4 var(--font);color:var(--text);margin-bottom:10px} .foot a{color:var(--text);text-underline-offset:3px} .foot-contact li+li{margin-top:6px} .foot-contact a{display:inline-flex;align-items:center;min-height:44px} .foot-sources li{display:flex;gap:6px} .foot-sources li+li{margin-top:12px} .fn-n{flex:none;font-weight:600;color:var(--text)} .noscript{margin-top:10px;color:var(--text)} .foot-bottom{display:grid;gap:6px;margin-top:48px;padding-top:24px;border-top:1px solid var(--line)} /* the small print keeps a short measure too: the disclaimer breaks between its two sentences */ .foot-bottom p{max-width:48ch} @media (min-width:1024px){.foot-bottom{grid-template-columns:auto auto 1fr;gap:28px}.foot-bottom p:last-child{text-align:right;max-width:none}} /* ===================================================================== Sheets (CTA dialog and menu) ===================================================================== */ .sheet{width:min(calc(100% - 32px),420px);max-height:calc(100dvh - 32px);margin:auto;padding:28px;border:0;border-radius:24px;background:#fff;color:var(--text);box-shadow:var(--shadow-lg);overflow:auto;overscroll-behavior:contain} .sheet::backdrop{background:rgba(18,20,28,.32);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .sheet[open]{animation:sheetIn .38s var(--spring) both;transform-origin:var(--ox,50%) var(--oy,50%)} @keyframes sheetIn{from{opacity:0;transform:scale(.94);filter:blur(6px)}to{opacity:1;transform:none;filter:none}} .sheet-x{position:absolute;right:12px;top:12px;color:var(--secondary)} .sheet-title{font:700 28px/1.15 var(--font-display);letter-spacing:-.025em;padding-right:44px} .sheet-text{margin-top:10px;font-size:17px;line-height:1.5;color:var(--secondary)} .cta-sheet .m-walk{display:none} .cta-sheet[data-mode="walk"] .m-walk{display:block} .cta-sheet[data-mode="walk"] .sheet-title .m-walk{display:inline} .cta-sheet[data-mode="walk"] .m-early{display:none} /* the sheet holds only a title, one line, the two ways to reach us and the micro line, so the WhatsApp button shows without scrolling even on a 320 x 568 phone */ .c-actions{display:grid;gap:10px;margin-top:22px} .c-actions .btn{width:100%} .cta-sheet .micro{margin-top:14px} @media (max-width:399px){.sheet{padding:24px 20px}.sheet-title{font-size:26px}} .cta-done{display:grid;gap:14px;justify-items:start} .cta-done[hidden]{display:none} .cta-done-t{font:600 20px/1.4 var(--font);color:var(--text)} .cta-done-t:focus{outline:none} .menu-sheet{margin:calc(var(--hdr) + 8px) 16px auto auto;width:min(calc(100% - 32px),360px)} .menu-list{display:grid;margin-top:8px} .menu-list a{display:flex;align-items:center;min-height:48px;padding:0 4px;font:600 18px/1.2 var(--font);text-decoration:none;color:var(--text);border-bottom:1px solid var(--line)} .menu-list .sub a{padding-left:20px;font-weight:500;font-size:17px;color:var(--secondary)} .menu-cta{width:100%;margin-top:20px} /* placeholder bar (only on file:, localhost and 127.0.0.1) */ .ph-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:60;display:flex;align-items:center;gap:10px;padding:4px 6px 4px 14px;border-radius:12px; background:#1d1d1f;color:#fff;font-size:13px;line-height:1.3;box-shadow:var(--shadow-lg);transition:opacity .3s,transform .3s var(--spring),visibility 0s} @media (min-width:768px){.ph-bar{right:auto;max-width:560px;left:16px;bottom:16px}} .ph-bar[hidden]{display:none} /* faded out, its Hide button is also out of the tab order */ .ph-bar.away{opacity:0;visibility:hidden;transform:translateY(12px);pointer-events:none;transition-delay:0s,0s,.3s} .ph-bar .tlink{color:#fff;min-height:44px;padding:0 8px;font-size:14px} .ph-bar .tlink:focus-visible{outline-color:#8da3f2} /* while the bar shows, a focused control is never hidden behind it (WCAG 2.4.11) */ html.ph-on{scroll-padding-bottom:96px} /* product list on narrow phones: one block per product, values labelled */ @media (max-width:599px){ .st-table,.staff[data-view="staff"] .st-table{min-width:0} .st-row,.staff[data-view="staff"] .st-row,.st-staff .st-row{display:flex;flex-wrap:wrap;gap:2px 16px;padding:10px 4px;min-height:0;font-size:15px} .st-row>[role=cell]:first-child{flex-basis:100%;font-weight:600} .st-row [data-l]::before{content:attr(data-l) " ";font:400 13px var(--font);color:var(--muted)} .st-head{padding:6px 8px;min-height:44px;align-items:center} .st-head>[role=columnheader]:not(.st-lock){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* a visual caption only: the empty alternative keeps it out of the table's header row for screen readers */ .st-head::before{content:"Products";content:"Products" / "";font:600 13px/1.2 var(--font);color:var(--secondary);margin-right:auto} .st-lock{justify-self:auto} } /* ===================================================================== Motion: one onset per section, then rest. Final states are the default (no JS, reduced motion, print); start states apply only under .js on screens that allow motion, until the onset adds .on / .in. ===================================================================== */ /* final states that differ from the .xf default */ .motif-1 .xf>.b,.dev-sync>.b{opacity:0;visibility:hidden} .motif-1 .xf>.a,.dev-sync>.a{opacity:1;visibility:visible;transition-delay:0s} @media screen and (prefers-reduced-motion:no-preference){ /* group rises */ .js [data-rise]>*{transition:opacity .6s var(--spring),translate .6s var(--spring);transition-delay:calc(var(--i,0) * 45ms)} .js [data-rise]:not(.in)>*{opacity:0;translate:0 16px} /* the returned cheque */ .js .cgrid:not(.on) .ret{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);transform:none} .js .cgrid:not(.on) .ret::before{background:rgba(255,255,255,.14)} .js .cgrid:not(.on) .ret::after{background:rgba(255,255,255,.22)} .js .cgrid:not(.on) .ret em{opacity:0;transform:translate(-50%,4px)} /* three promises: one micro-onset per motif, 120 ms apart */ .js .pcards:not(.on) .motif-1 .xf>.b{opacity:1;visibility:visible} .js .pcards:not(.on) .motif-1 .xf>.a{opacity:0;visibility:hidden} .js .pcards:not(.on) .mc-ol rect{stroke-dashoffset:1} .js .pcards:not(.on) .mres{opacity:0} .js .pcards:not(.on) .mpop{opacity:0;transform:scale(.9)} .js .pcards .mres{transition:opacity .3s var(--ease-out) .3s} .js .pcards .mpop{transition-delay:.24s} /* one cheque, six invoices: bars fill oldest first, pills flip as each bar completes, the credit chip rises last */ .js .alloc:not(.on) .inv .inv-bar i{transform:scaleX(0)} .js .alloc:not(.on) .inv .xf>.b{opacity:1;visibility:visible} .js .alloc:not(.on) .inv .xf>.a{opacity:0;visibility:hidden} .js .alloc:not(.on) .al-left{opacity:0;transform:translateY(8px)} .js .alloc.on.run .inv .inv-bar i{transition-delay:calc(var(--k) * 80ms)} .js .alloc.on.run .inv .xf>*{transition-delay:calc(var(--k) * 80ms + 260ms)} .js .alloc.on.run .al-left{transition-delay:.86s} /* size grid: the sixteen lines fold away, the empty grid rises in, the laces draw on */ .js .sizes .sz-ghost{display:grid} .js .sizes.on .sz-ghost{transform:scaleY(0);opacity:0;visibility:hidden} .js .sizes:not(.on) .sz-main,.js .sizes:not(.on) .sz-side{opacity:0;transform:translateY(12px)} .js .sizes .sz-main,.js .sizes .sz-side{transition:opacity .5s var(--ease-out) .15s,transform .6s var(--spring) .15s} .js .sizes:not(.on) .laces{stroke-dashoffset:1} .js .sizes .laces{transition:stroke-dashoffset .6s var(--ease-out) .2s} /* part delivery, sell-through chart */ .js .deliv:not(.on) .dv-done{transform:scaleX(0)} .js .chart:not(.on) .ch-g i{transform:scaleY(0)} .js .chart .ch-g:nth-child(even) i{transition-delay:40ms} .js .chart .ch-g:nth-child(even) .bs{transition-delay:80ms} /* corrections in ink */ .js .corr:not(.on) .strike{transform:scaleX(0)} .js .corr:not(.on) .cr1 .cr-main{color:var(--text);text-decoration-color:transparent} .js .corr:not(.on) .cr-rev{opacity:0} .js .corr:not(.on) .cr2,.js .corr:not(.on) .cr3{opacity:0;transform:translateY(10px)} .js .corr .cr2{transition-delay:.35s} .js .corr .cr3{transition-delay:.47s} .js .corr:not(.on) .ck .ico{opacity:0;transform:scale(.6)} /* records */ .js .recs:not(.on) .cb,.js .recs:not(.on) .cb-sep{opacity:0} .js .recs:not(.on) .cb-doc{opacity:0;transform:translateY(-12px)} .js .recs:not(.on) .bk-new{background:var(--sunken);box-shadow:inset 0 0 0 1.5px var(--green);transform:scale(.6);color:transparent} /* devices: offline, then synced */ .js .dev-stage:not(.on) .dev-sync>.b{opacity:1;visibility:visible} .js .dev-stage:not(.on) .dev-sync>.a{opacity:0;visibility:hidden} .js .dev-stage .dev-sync>*{transition:opacity .3s var(--ease-out),visibility 0s linear .3s} .js .dev-stage.on .dev-sync>.a{transition-delay:.35s,0s} .js .dev-stage.on .dev-sync>.b{transition-delay:.35s,.65s} /* the hero replay button fades in after the beat */ .hero-replay{transition:opacity .3s var(--ease-out),transform .3s var(--spring),visibility 0s linear .3s} .hero-replay.show{transition-delay:0s} } /* will-change only on what moves in each onset, only while it runs (brief 11.4), never on every descendant */ .wc[data-rise]>*,.wc.after,.wc .pp, .hcard.wc .xf>*,.hcard.wc .roll>*,.hcard.wc .credit .fill, .wc .ret,.wc .ret em, .pcards.wc .motif-1 .xf>*,.wc .mres,.wc .mpop, .wc .sz-ghost,.wc .sz-main,.wc .sz-side, .wc .dv-done,.wc .ch-g i, .wc .strike,.wc .cr2,.wc .cr3,.wc .cr-rev,.wc .ck .ico, .wc .cb,.wc .cb-sep,.wc .cb-doc,.wc .bk-new, .wc .dev-sync>*, .wc .inv-bar i,.alloc.wc .inv .xf>*,.wc .al-left, .press.wc .roll>*,.wc .pr-bar i,.wc .jr,.wc .j-ghost,.wc .j-foot .pill,.wc .fan i{will-change:transform,opacity} /* phone mock: without JS or with reduced motion, the Today screen and the chat view sit side by side */ @media (prefers-reduced-motion:reduce){ .phone-2{display:block} .phone:not(.phone-2) .ph-chat{display:none} .ph-send-btn::after{display:none} .stmt-also{display:block} .placard .ba:not(.nojs-only){display:block} .hcard .xf>.b,.hcard .roll>.b{opacity:0!important;visibility:hidden!important} .hcard .xf>.a,.hcard .roll>.a{opacity:1!important;visibility:visible!important;transform:none!important} .hcard .credit .fill{transform:scaleX(.6)!important} .hero-replay{display:none!important} .al-replay{display:none!important} } /* ===================================================================== Reduced motion, reduced transparency, more contrast, forced colours ===================================================================== */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.12s!important; transition-property:opacity,color,background-color,border-color!important;scroll-behavior:auto!important} .btn:active,.pcard:hover,.step-btn:active{transform:none!important} } @media (prefers-reduced-transparency:reduce){ .hdr::before,.hdr::after,.chapters::before,.hdr .mark,.sheet::backdrop{-webkit-backdrop-filter:none!important;backdrop-filter:none!important} .hdr::before{background:rgba(15,21,48,.97)} .hdr::after,.chapters::before{background:rgba(255,255,255,.97)} .sheet::backdrop{background:rgba(18,20,28,.6)} .sheet[open],.banner.grow{animation-name:fadein} } @media (prefers-contrast:more){ :root{--line:rgba(17,24,39,.28);--line-strong:rgba(17,24,39,.45);--muted:#474a55} .pill,.chip{border:1px solid currentColor} } @media (forced-colors:active){ .pill,.chip,.mock,.win,.pr-card,.pr-sale,.hcard,.after,.paper,.sw-panel,.pcard,.sheet,.fin-done,.drawer,.tryit{border:1px solid CanvasText} :focus-visible{outline-color:Highlight} .btn{border:1px solid ButtonText} .hero,.leak,.leaks,.turn,.finale{background:Canvas} .stop.grad{-webkit-text-fill-color:currentColor;background:none;color:CanvasText} .credit .fill,.inv-bar i,.hb-fill,.dv-done,.ch-g .bs,.age-bar i{background:Highlight} .cgrid .ret{background:Highlight} .ch-num{display:none} /* the 35 cheques are drawn with a box-shadow, which forced colours drop: give each one a real border */ .cgrid span{border:1px solid CanvasText} /* the slider: a visible track (filled part in Highlight) and a thumb with an edge */ .range{forced-color-adjust:none} .range::-webkit-slider-runnable-track{background:linear-gradient(to right,Highlight var(--p),GrayText var(--p))} .range::-webkit-slider-thumb{background:Canvas;border:2px solid CanvasText;box-shadow:none} .range::-moz-range-track{background:GrayText} .range::-moz-range-progress{background:Highlight} .range::-moz-range-thumb{background:Canvas;border:2px solid CanvasText;box-shadow:none} .range:focus-visible::-webkit-slider-thumb{outline-color:Highlight} .range:focus-visible::-moz-range-thumb{outline-color:Highlight} /* segmented controls: every option has an edge, the chosen one is filled with Highlight */ .seg label span{border:1px solid ButtonText} .seg input:checked+span{forced-color-adjust:none;background:Highlight!important;color:HighlightText!important;border-color:Highlight} .seg input:focus-visible+span{outline:2px solid CanvasText;outline-offset:2px} .seg .glide{display:none} /* the current header link and chapter are underlined (their pill backgrounds are dropped) */ .hdr-nav a[aria-current="true"],.chap-track a[aria-current="true"]{text-decoration:underline;text-underline-offset:4px} /* data graphics: forced colours drop plain backgrounds and shadows, so every track gets an edge and every series, marker and dot a system colour (chart bars, the credit limit, the cheque rail, the backup dots) */ .credit .track,.hb-track,.dv-bar,.pr-bar,.inv-bar,.age-bar{border:1px solid CanvasText} .pr-bar i,.sw.sold,.sw.green{background:Highlight} .ch-g .bb,.sw.bought,.hb-new,.hb-cut,.ch-grid i{background:GrayText} .ch-grid i:last-child,.hb-limit,.hb-over{background:CanvasText} .sw,.rail .st i,.bk-dots i,.tgl,.dchip,.avatar,.phone,.ph-group ul{border:1px solid CanvasText} .rail .st.reached i,html:not(.js) .rail .st i,.js .demo:not([data-step]) .rail .st:nth-child(-n+2) i,.bk-dots .bk-new{background:Highlight} .bk-dots .bk-new{color:HighlightText} /* the ageing bar keeps one system colour per age band, matched by its legend (90+ stays an open box) */ .age-bar .ag1,.age-legend .ag1{background:Highlight} .age-bar .ag2,.age-legend .ag2{background:LinkText} .age-bar .ag3,.age-legend .ag3{background:GrayText} .age-bar .ag4,.age-legend .ag4{background:CanvasText} .rail .st+.st::before,.hdot,.pill .dot,.cmp tbody td.ws::before,.fan i,.tl-line,.tr-line, .pr-stock::after,.pr-cust::after,.pr-books::after,.pr-card>.m-eyebrow::before{background:CanvasText} } /* ===================================================================== Print and no-JS: every section reads completely ===================================================================== */ @media print{ @page{margin:16mm} html,body{background:#fff!important} body{font-size:11pt} .hdr,.skip,.sheet,.ph-bar,.tryit,.replay,.hero-replay,.turn-rail,.frags,.j-ghost,.sz-ghost,.pr-reset,.staff-seg,.lang-seg,.drawer-ctl,.fan,.fin-art,.hero-shoe,.ghost-card,.sw-opts,.fin-done,.sw-end .btn,.fin-cta,.hero-c,.ch-num{display:none!important} .cv,.cv-k{content-visibility:visible} .hero-visual::before{display:none} .js .demo>.mock,.js .demo>.win{border-radius:18px} .night,.hero,.turn,.finale,.turn-hook{background:#fff!important;color:#1d1d1f!important;--fg:#1d1d1f;--fg2:#515462;--fg3:#515462;--stop-c:#3a5ccc} .night *{color:inherit} .hero h1,.leak-big,.leak-rest,.leaks .h2,.leak-card h3,.loss,.leak-statement .h3,.fig-v,.drawer-title,.drawer-val,.drawer-out,.leak-hook,.turn-link,.hero-eyebrow,.hero-sub,.hero-reassure,.peek,.scene,.ledger-line,.trend,.fig-c,.drawer-label,.drawer-avg,.drawer-note,.leaks-after,.leak-link,.ledger,.l-note,.night .eyebrow,.night .placard,.night .placard strong,.turn-cap{color:#1d1d1f!important} .leak-big .rs{color:#515462!important} .paper,.drawer{background:#fff!important;border-color:#bbb!important} .cgrid span{box-shadow:inset 0 0 0 1.5px #999} .cgrid span::before,.cgrid span::after{background:#bbb} .night .chips li{color:#1d1d1f} .hcard,.after,.mock,.win,.pr-card,.pr-sale,.phone,.sw-panel,.pcard{box-shadow:none!important;break-inside:avoid} figure,.beat,.tile,.faq details,.sw-panel{break-inside:avoid} .turn-link::before{display:none} .tl-line{background:#999} .hero{min-height:0;margin-top:0;padding:0 0 24px} section{padding-block:28px!important} .js .sw-panel{display:block!important} .js .sw-name{display:block!important} .sw-panel+.sw-panel{margin-top:12px!important} .faq details>.ans{display:block} .faq details::details-content{block-size:auto!important;content-visibility:visible!important} .foot-sources a::after{content:" (" attr(href) ")";word-break:break-all;color:#515462} .phone-2{display:block} .phone:not(.phone-2) .ph-chat{display:none} .js .st-static,.js .st-label{display:block} .stmt-also{display:block} .placard .ba:not(.nojs-only){display:block} .ph-screen,.ph-view{background:#fff} a{text-decoration:underline} *{-webkit-print-color-adjust:exact;print-color-adjust:exact} }