/* iRegist.id Registration Suite: house design system. Tokens and component language originate in truevindo.com (assets/tokens.css, assets/styles.css) and are carried forward as the iRegist.id palette. Tokens and component language lifted from the live site (assets/tokens.css + assets/styles.css): near-black ground, bright tosca as the signal colour, full-bleed tosca and cream feature bands between dark sections, 900 weights throughout, pill buttons, the 17.5vw column grid over the hero. Product framing on top of it (proof band, feature grid, capability table, pricing-shaped tiers) because this page sells a system, not a portfolio. */ :root{ --brand-tosca:#3f919d; --brand-orange:#e5821f; --brand-maroon:#8e2420; --brand-teal-deep:#2e6f7d; --brand-ink:#1c2326; --brand-slate:#5e6b6f; --black:#040004; --black-soft:#120d12; --black-panel:#181317; --signal:#22cdbe; --signal-bright:#54eedc; --on-signal:#040004; --warm:#e5821f; --paper:#f7f2e8; --paper-ink:#040004; --feature-bg:#22cdbe; --feature-ink:#040004; --text:#f8faf9; --muted:#aeb5b4; --line:rgba(248,250,249,.14); --line-dark:rgba(4,0,4,.18); /* Inter and Plus Jakarta Sans are close enough at body size that the pairing did nothing. Sora is geometric and wide where Jakarta Sans is humanist and narrow. The difference is visible in a glance, which is the whole point of pairing two faces. Sora tops out at 800, so display weight is 800 not 900. */ --font-display:"Sora","Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --font-body:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif; /* Monospace carries the metadata layer: labels, counts, codes, tags. It is what makes a product page read as technical; heavy display weights only make it read as loud. */ --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --font-sans:var(--font-display); --max:1440px; --pad:72px; --radius:8px; } @media(max-width:920px){:root{--pad:28px}} *{box-sizing:border-box} /* overflow-x:clip on the root, never overflow-x:hidden on : hidden on one axis forces the other to `auto`, which makes a scroll container. The document then stops scrolling at the root, window.scrollY never moves, and every scroll-driven effect on the page silently does nothing. */ html{scroll-behavior:smooth;scroll-padding-top:88px;overflow-x:clip} body{margin:0;background:var(--black);color:var(--text);font-family:var(--font-body); font-size:16px;line-height:1.6;letter-spacing:0;-webkit-font-smoothing:antialiased; text-rendering:geometricPrecision; transition:background 220ms ease,color 220ms ease} img{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;cursor:pointer} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;letter-spacing:-.03em} /* Body sits at 400, so the browser default of 700 for emphasis is a three-step jump that reads as shouting. One step is enough to register. */ strong,b{font-weight:600} /* Anything that is a label, a number or a control keeps the display face: those are set tight and read as UI, not as prose. */ /* Display face: the things that are voice. */ .btn,.site-nav,.score__name,.need,.mailrow .s,.step-col h3,.score__val b, .proof__number,.board__stats b{font-family:var(--font-display)} /* Mono: the things that are data: labels, counts, codes, tags, urls. */ .site-header__logo span,.board__tags li,.tag,.filters a,.step-col .sub, .step-col li:before,.flow__label,.flow__num,.cell .n,.piece__cap .k,.frame__url, .field label,.hintbox b,.ticker__track span,.every,.grp__n,.grp__score, .proof__item span:last-child,.measures span,.board__stats div,.score__badge, .score__of,.spec__ask-label,.spec__toolbar,.foot-meta,.hero__manifest, .board__badge,.board__new,.tv-credit-by span{ font-family:var(--font-mono);font-weight:500;letter-spacing:.04em} .num,[data-count]{font-family:var(--font-display);font-variant-numeric:tabular-nums} :focus-visible{outline:2px solid var(--signal-bright);outline-offset:4px} ::selection{background:var(--signal);color:var(--on-signal)} .wrap{max-width:var(--max);margin:0 auto} /* ── header ────────────────────────────────────────────────────────────────── A logo left / links right strip is what every product site ships. This reads as an instrument panel instead: a live status line above, and a nav divided into full-height cells by hairlines rather than floated in whitespace. */ .site-header{position:sticky;top:0;z-index:120;background:var(--black); border-bottom:1px solid var(--line)} .site-header__status{display:flex;align-items:center;gap:0;height:30px;overflow:hidden; min-width:0; padding:0 var(--pad);border-bottom:1px solid var(--line); font-family:var(--font-mono);font-size:.62rem;font-weight:400;letter-spacing:.1em; text-transform:uppercase;color:var(--fg-mute,var(--muted)); transition:height 260ms cubic-bezier(.16,1,.3,1),opacity 200ms ease} .site-header.is-scrolled .site-header__status{height:0;opacity:0;border-bottom-color:transparent} .site-header__status .stat{display:inline-flex;align-items:center;gap:7px; padding:0 16px;border-right:1px solid var(--line);white-space:nowrap;line-height:1} .site-header__status .stat:first-child{padding-left:0} .site-header__status .stat b{color:var(--text);font-weight:500} .stat--live{color:var(--signal)} .stat--live i{width:6px;height:6px;border-radius:999px;background:var(--signal); display:block;animation:hdr-pulse 2.4s ease-in-out infinite} @keyframes hdr-pulse{0%,100%{opacity:1}50%{opacity:.2}} .stat--clock{margin-left:auto;border-right:0;padding-right:0;color:var(--muted)} /* The status line sheds detail before it can push the clock off the edge. */ @media(max-width:1080px){.stat--demo{display:none}} @media(max-width:860px){.site-header__status .stat:nth-child(4){display:none}} @media(max-width:680px){.site-header__status .stat:nth-child(3){display:none}} @media(max-width:520px){.site-header__status .stat:nth-child(2){display:none}} @media(max-width:400px){.stat--clock{display:none}} .site-header__bar{display:flex;align-items:stretch;height:60px;padding-left:var(--pad); min-width:0;transition:height 260ms cubic-bezier(.16,1,.3,1)} .site-header__logo{min-width:0;flex:0 1 auto} .site-nav{min-width:0} .site-header.is-scrolled .site-header__bar{height:54px} .site-header__logo{display:flex;align-items:center;gap:12px;padding-right:26px} .site-header__logo span{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);padding-left:12px;border-left:1px solid var(--line)} /* Nav as cells, not floating links: each one is a bay in the panel. */ .site-nav{margin-left:auto;display:flex;align-items:stretch} .site-nav a{display:inline-flex;align-items:center;gap:9px;padding:0 20px; border-left:1px solid var(--line);font-family:var(--font-mono);font-size:.68rem; font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--muted); position:relative;transition:color 160ms ease,background 160ms ease} .site-nav a .idx{font-size:.56rem;color:var(--line-2,var(--signal));opacity:.5; transition:opacity 160ms ease} .site-nav a:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--signal);transform:scaleX(0);transform-origin:50% 50%; transition:transform 220ms cubic-bezier(.16,1,.3,1)} .site-nav a:hover,.site-nav a.on{color:var(--text); background:color-mix(in srgb,var(--signal) 8%,transparent)} .site-nav a:hover .idx,.site-nav a.on .idx{opacity:1;color:var(--signal)} .site-nav a:hover:after,.site-nav a.on:after{transform:scaleX(1)} .theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:56px; border:0;border-left:1px solid var(--line);background:transparent;color:var(--muted); font-size:.9rem;transition:color 160ms ease,background 160ms ease} .theme-toggle:hover{color:var(--signal); background:color-mix(in srgb,var(--signal) 8%,transparent)} /* And the nav sheds bays in order of how well they are covered elsewhere: Capabilities lives inside the home page, Systems is one scroll away, Showcase is linked from the hero. Outbox, Staff and the CTA are the last to go. */ @media(max-width:1100px){.site-nav a{padding:0 15px}} @media(max-width:980px){.site-nav a .idx{display:none};.site-nav a{padding:0 13px}} @media(max-width:900px){.site-nav a:nth-child(3){display:none}} @media(max-width:760px){.site-nav a:nth-child(1){display:none}} @media(max-width:620px){.site-nav a:nth-child(2){display:none}} @media(max-width:460px){.site-header__logo span{display:none} .site-header__logo{padding-right:14px}} /* ── shared type ─────────────────────────────────────────────────────────── */ .eyebrow,.mini-label{margin:0;color:var(--signal);font-family:var(--font-mono); font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase} .section-pad{padding:112px var(--pad)} .section-intro{max-width:var(--max);margin:0 auto 64px} .section-intro h2{max-width:980px;margin:16px 0 0;font-size:clamp(2.4rem,5.4vw,4.6rem); line-height:1.02;font-weight:600} .section-intro--split{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:end} @media(max-width:920px){.section-intro--split{grid-template-columns:1fr;gap:22px}} .section-intro__note{max-width:430px;margin:0;color:var(--muted);font-weight:400; font-size:1.02rem;line-height:1.65} .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px; padding:0 22px;border-radius:999px;border:1px solid transparent;font-size:.84rem; font-weight:500;letter-spacing:.015em;transition:transform 180ms ease,background 180ms ease, border-color 180ms ease,color 180ms ease} .btn:hover{transform:translateY(-2px)} .btn--light{background:var(--signal);color:var(--on-signal)} .btn--light:hover{background:var(--signal-bright)} .btn--ghost{border-color:color-mix(in srgb,var(--text) 36%,transparent);color:var(--text)} .btn--ghost:hover{border-color:var(--signal);color:var(--signal)} .btn--dark{background:var(--feature-ink);color:var(--feature-bg)} .btn--outline-dark{border-color:var(--feature-ink);color:var(--feature-ink)} .btn--outline-dark:hover{background:var(--feature-ink);color:var(--feature-bg)} .btn--warm{background:var(--warm);color:#150800} .btn--sm{min-height:36px;padding:0 16px;font-size:.82rem} /* ── hero ────────────────────────────────────────────────────────────────── */ .hero{position:relative;min-height:82svh;overflow:hidden;display:flex;align-items:center; padding:104px var(--pad) 84px;background:var(--black);color:var(--text)} .hero__grid{position:absolute;inset:0;opacity:.38;pointer-events:none; background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:17.5vw 100%} .hero__content{position:relative;z-index:2;max-width:var(--max);width:100%;margin:0 auto} .hero__title{max-width:16ch;margin:20px 0 0;color:var(--signal); font-size:clamp(3.1rem,8.6vw,6.8rem);line-height:.9;font-weight:600; letter-spacing:-.038em} .hero__title em{font-style:normal;color:var(--text)} .hero__lower{display:grid;max-width:600px;gap:24px;margin-top:36px} .hero__lower p{margin:0;color:var(--text);font-weight:400;font-size:1.05rem;line-height:1.65} .hero__cta{display:flex;flex-wrap:wrap;gap:12px} .hero__manifest{display:grid;grid-template-columns:repeat(3,max-content);gap:28px; margin-top:48px;color:var(--signal);font-size:.72rem;letter-spacing:.12em; text-transform:uppercase} @media(max-width:720px){.hero__manifest{grid-template-columns:1fr;gap:10px}} .hero__ticker{position:absolute;left:var(--pad);right:var(--pad);bottom:22px;z-index:2; display:flex;justify-content:space-between;gap:18px;color:var(--signal);font-size:.86rem; font-weight:500;flex-wrap:wrap} /* ── proof band ──────────────────────────────────────────────────────────── */ .proof{background:var(--black);padding:0 var(--pad) 0} .proof__grid{max-width:var(--max);margin:0 auto;display:grid; grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line); border-left:1px solid var(--line)} @media(max-width:920px){.proof__grid{grid-template-columns:repeat(2,1fr)}} .proof__item{min-height:220px;padding:28px;border-right:1px solid var(--line); border-bottom:1px solid var(--line);display:flex;flex-direction:column; justify-content:space-between;position:relative;overflow:hidden} /* A rule that draws itself across the cell as the band reveals. The only motion in an otherwise static row of numbers. */ .proof__item:before{content:"";position:absolute;left:0;top:0;height:2px;width:100%; background:linear-gradient(90deg,var(--signal),transparent); transform:scaleX(0);transform-origin:0 50%; transition:transform 900ms cubic-bezier(.16,1,.3,1)} [data-stagger].in .proof__item:before{transform:scaleX(1)} .proof__item:nth-child(2):before{transition-delay:110ms} .proof__item:nth-child(3):before{transition-delay:220ms} .proof__item:nth-child(4):before{transition-delay:330ms} .proof__item .ghost{position:absolute;right:-6px;bottom:-28px;font-family:var(--font-mono); font-size:6rem;font-weight:500;line-height:1;color:var(--text);opacity:.035; pointer-events:none;user-select:none} .proof__number{color:var(--signal);font-size:clamp(2.8rem,5.4vw,5rem);line-height:.86; font-weight:500;letter-spacing:-.035em;font-variant-numeric:tabular-nums} .proof__item span:last-child{color:var(--muted);font-size:.72rem; letter-spacing:.14em;text-transform:uppercase} /* ── feature band (full tosca) ───────────────────────────────────────────── */ .feature{background:var(--feature-bg);color:var(--feature-ink);padding:88px var(--pad); position:relative;overflow:hidden;isolation:isolate; background-image:linear-gradient(118deg,#2ee0d0 0%,#22cdbe 46%,#0ca093 100%)} /* A flat fill this large reads as a placeholder. The dot lattice gives it a surface, and the soft light in one corner gives it a direction. */ .feature:before,.closer:before{content:"";position:absolute;inset:0;z-index:-1; background-image:radial-gradient(rgba(4,0,4,.14) 1px,transparent 1px); background-size:22px 22px; mask-image:linear-gradient(120deg,#000 0%,transparent 62%); -webkit-mask-image:linear-gradient(120deg,#000 0%,transparent 62%)} .feature:after,.closer:after{content:"";position:absolute;z-index:-1; width:52vw;height:52vw;right:-14vw;top:-26vw;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.4),transparent 62%); pointer-events:none} .feature__inner{max-width:var(--max);margin:0 auto;display:grid; grid-template-columns:1.15fr .85fr;gap:52px;align-items:end} @media(max-width:920px){.feature__inner{grid-template-columns:1fr;gap:26px}} .feature h2{font-size:clamp(2.1rem,4.8vw,3.9rem);line-height:.95} .feature p{margin:0;font-weight:500;font-size:1.02rem; color:color-mix(in srgb,var(--feature-ink) 74%,transparent)} .feature__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} /* ── system boards ───────────────────────────────────────────────────────── */ .boards{background:var(--black-soft)} .board-grid{max-width:var(--max);margin:0 auto;display:grid; grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:980px){.board-grid{grid-template-columns:1fr}} .board{background:var(--black-panel);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column; transition:border-color 200ms ease,transform 200ms ease} .board:hover{border-color:var(--signal);transform:translateY(-3px)} .board__media{position:relative;height:196px;overflow:hidden;background:var(--black)} .board__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.08); opacity:.72;transition:filter 260ms ease,opacity 260ms ease} .board:hover .board__media img{filter:grayscale(0) contrast(1);opacity:1} .board__media .flat{position:absolute;inset:0;background: linear-gradient(135deg,var(--brand-teal-deep),var(--black-panel))} .board__badge{position:absolute;left:16px;top:16px;background:var(--signal); color:var(--on-signal);font-size:.68rem;font-weight:500;padding:5px 11px; border-radius:999px} .board__new{position:absolute;right:16px;top:16px;background:var(--warm);color:#150800; font-size:.68rem;font-weight:500;padding:5px 11px;border-radius:999px} .board__body{padding:24px;display:flex;flex-direction:column;gap:14px;flex:1} .board__body h3{font-size:1.5rem;line-height:1.04} .board__body p{margin:0;color:var(--muted);font-size:.94rem;font-weight:400;line-height:1.65} .board__tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0} .board__tags li{font-size:.72rem;font-weight:500;color:var(--muted); border:1px solid var(--line);border-radius:999px;padding:4px 10px} .board__stats{display:flex;gap:24px;padding-top:16px;border-top:1px solid var(--line); margin-top:auto} .board__stats div{font-size:.64rem;color:var(--muted);letter-spacing:.12em; text-transform:uppercase} .board__stats b{display:block;color:var(--signal);font-size:1.4rem;font-weight:500; line-height:1;font-variant-numeric:tabular-nums;margin-bottom:4px} .board__links{display:flex;flex-wrap:wrap;gap:8px;padding:0 24px 24px} /* ── steps ───────────────────────────────────────────────────────────────── */ .steps-grid{max-width:var(--max);margin:0 auto;display:grid; grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:980px){.steps-grid{grid-template-columns:1fr}} .step-col{border-top:2px solid var(--signal);padding-top:22px} .step-col ol{position:relative} /* The rail ties the numbered beats together and draws in with the column. */ .step-col ol:before{content:"";position:absolute;left:6px;top:6px;bottom:14px;width:1px; background:linear-gradient(var(--signal),transparent); transform:scaleY(0);transform-origin:50% 0; transition:transform 1100ms cubic-bezier(.16,1,.3,1) 200ms} [data-stagger].in .step-col ol:before{transform:scaleY(1)} .step-col li:after{content:"";position:absolute;left:3px;top:5px;width:7px;height:7px; border-radius:999px;background:var(--black-soft);border:1.5px solid var(--signal)} .step-col h3{font-size:1.3rem} .step-col .sub{color:var(--signal);font-size:.68rem;letter-spacing:.16em; text-transform:uppercase;margin:9px 0 24px} .step-col ol{list-style:none;margin:0;padding:0;counter-reset:s} .step-col li{counter-increment:s;position:relative;padding:0 0 22px 42px;color:var(--muted); font-size:.94rem;font-weight:400;line-height:1.65} .step-col li:last-child{padding-bottom:0} .step-col li:before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:0; color:var(--signal);font-size:.86rem;font-weight:500;font-variant-numeric:tabular-nums} .step-col li b{display:block;color:var(--text);font-size:.96rem;font-weight:600; margin-bottom:3px} /* ── capability table (cream) ────────────────────────────────────────────── */ .paper{background:var(--paper);color:var(--paper-ink);position:relative;overflow:hidden; background-image:radial-gradient(120% 80% at 88% 0%, color-mix(in srgb,var(--brand-teal-deep) 9%,transparent),transparent 58%)} .paper:before{content:"";position:absolute;right:-4%;top:-8%;width:34vw;height:34vw; pointer-events:none;opacity:.14; background-image:radial-gradient(currentColor 1.2px,transparent 1.2px); background-size:20px 20px;color:var(--brand-teal-deep); mask-image:radial-gradient(circle,#000,transparent 68%); -webkit-mask-image:radial-gradient(circle,#000,transparent 68%)} .paper .eyebrow{color:var(--brand-maroon)} .paper .section-intro__note{color:color-mix(in srgb,var(--paper-ink) 62%,transparent)} .matrix-wrap{max-width:var(--max);margin:0 auto;overflow-x:auto} table.matrix{width:100%;border-collapse:collapse;min-width:680px;font-size:.95rem} table.matrix th,table.matrix td{padding:15px 18px 15px 0;text-align:left; border-bottom:1px solid var(--line-dark)} table.matrix thead th{font-size:.8rem;font-weight:500; color:color-mix(in srgb,var(--paper-ink) 60%,transparent); border-bottom:2px solid var(--paper-ink)} table.matrix td{font-weight:400} table.matrix td.c,table.matrix th.c{text-align:center;width:170px;padding-right:0} table.matrix tbody tr:hover{background:color-mix(in srgb,var(--paper-ink) 4%,transparent)} .yes{color:var(--brand-teal-deep);font-size:1.1rem;font-weight:500} .no{color:color-mix(in srgb,var(--paper-ink) 22%,transparent);font-size:1.1rem} /* ── product pieces (showcase page) ──────────────────────────────────────── */ .pieces{max-width:var(--max);margin:0 auto;display:grid; grid-template-columns:repeat(3,1fr);gap:24px} @media(max-width:980px){.pieces{grid-template-columns:1fr}} .piece{display:flex;flex-direction:column;gap:16px} .piece__cap .k{color:var(--signal);font-size:.78rem;font-weight:500} .piece__cap h4{font-size:1.16rem;margin:7px 0 6px} .piece__cap p{margin:0;color:var(--muted);font-size:.92rem;font-weight:400;line-height:1.6} .frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--black-panel)} .frame__bar{display:flex;align-items:center;gap:7px;padding:10px 13px; border-bottom:1px solid var(--line)} .frame__bar i{width:8px;height:8px;border-radius:999px;background:var(--line);display:block} .frame__url{margin-left:6px;font-size:.68rem;font-weight:500;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .shot{position:relative;height:300px;overflow:hidden;background:#fff} .shot iframe{position:absolute;top:0;left:0;width:1280px;height:1160px;border:0; transform:scale(.3);transform-origin:0 0;pointer-events:none} .shot .open{position:absolute;right:12px;bottom:12px;z-index:2} .phone{width:292px;margin:0 auto;border:1px solid var(--line);border-radius:26px;padding:11px; background:var(--black-panel)} .phone .screen{height:500px;overflow:hidden;background:#fff;position:relative; border-radius:16px} .phone iframe{position:absolute;top:0;left:0;width:420px;height:730px;border:0; transform:scale(.638);transform-origin:0 0} .mailframe{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--black-panel)} .mailframe__head{padding:13px 15px;border-bottom:1px solid var(--line)} .mailframe__head .sub{font-size:.86rem;font-weight:500} .mailframe__head .to{font-size:.72rem;color:var(--muted);margin-top:3px;font-weight:400} .mailframe__body{height:400px;overflow:hidden;position:relative} .mailframe iframe{position:absolute;top:0;left:0;width:700px;height:1000px;border:0; transform:scale(.72);transform-origin:0 0} .certframe{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:#fff} .note-card{border:1px solid var(--line);border-radius:var(--radius);padding:26px; background:var(--black-panel);align-self:center} .note-card h4{font-size:1.16rem;margin-bottom:10px} .note-card p{margin:0 0 20px;color:var(--muted);font-size:.92rem;font-weight:400;line-height:1.65} .tag{display:inline-block;font-size:.68rem;font-weight:500;padding:3px 9px; border-radius:999px;border:1px solid var(--line);color:var(--muted)} .tag.ok{color:var(--signal);border-color:var(--signal)} /* ── included / on-the-day grids ─────────────────────────────────────────── */ .cellgrid{max-width:var(--max);margin:0 auto;display:grid; grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line); border-left:1px solid var(--line)} @media(max-width:1000px){.cellgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:620px){.cellgrid{grid-template-columns:1fr}} .cellgrid--3{grid-template-columns:repeat(3,1fr)} @media(max-width:920px){.cellgrid--3{grid-template-columns:1fr}} .cell{padding:28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line); min-height:190px} .cell .n{color:var(--signal);font-size:.82rem;font-weight:500; font-variant-numeric:tabular-nums} .cell h4{font-size:1.06rem;margin:12px 0 8px;font-weight:600} .cell p{margin:0;color:var(--muted);font-size:.92rem;font-weight:400;line-height:1.65} .paper .cell{border-color:var(--line-dark)} .paper .cell .n{color:var(--brand-maroon)} .paper .cell p{color:color-mix(in srgb,var(--paper-ink) 62%,transparent)} /* ── closing CTA ─────────────────────────────────────────────────────────── */ .closer{background:var(--feature-bg);color:var(--feature-ink);padding:96px var(--pad); position:relative;overflow:hidden;isolation:isolate; background-image:linear-gradient(118deg,#0ca093 0%,#22cdbe 52%,#2ee0d0 100%)} .closer__inner{max-width:var(--max);margin:0 auto;display:grid; grid-template-columns:1.2fr .8fr;gap:48px;align-items:end} @media(max-width:920px){.closer__inner{grid-template-columns:1fr;gap:24px}} .closer h2{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:.92} .closer p{margin:0;font-weight:500; color:color-mix(in srgb,var(--feature-ink) 74%,transparent)} .closer__cta{display:flex;flex-wrap:wrap;gap:12px} /* ── outbox ──────────────────────────────────────────────────────────────── */ .filters{max-width:var(--max);margin:0 auto 26px;display:flex;flex-wrap:wrap;gap:9px} .filters a{font-size:.82rem;font-weight:500;padding:9px 16px;border-radius:999px; border:1px solid var(--line);color:var(--muted)} .filters a:hover{border-color:var(--signal);color:var(--signal)} .filters a.on{background:var(--signal);border-color:var(--signal);color:var(--on-signal)} .mailbox{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:350px 1fr; gap:24px;align-items:start} @media(max-width:940px){.mailbox{grid-template-columns:1fr}} .maillist{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--black-panel);max-height:74vh;overflow-y:auto} .mailrow{display:block;padding:14px 16px;border-bottom:1px solid var(--line)} .mailrow:hover{background:var(--black-soft)} .mailrow.on{background:color-mix(in srgb,var(--signal) 14%,transparent); border-left:3px solid var(--signal);padding-left:13px} .mailrow .s{font-size:.88rem;font-weight:600} .mailrow .m{font-size:.76rem;color:var(--muted);margin-top:3px;font-weight:400} .mailview{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; background:var(--black-panel)} .mailview header{padding:16px 20px;border-bottom:1px solid var(--line)} .mailview iframe{width:100%;height:66vh;border:0;background:#fff} /* ── auth ────────────────────────────────────────────────────────────────── */ .auth{max-width:460px;margin:9vh auto;border:1px solid var(--line);border-radius:var(--radius); padding:38px 34px;background:var(--black-panel)} .auth h1{font-size:2.1rem;margin:14px 0 8px} .auth p{color:var(--muted);font-size:.95rem;margin:0 0 26px;font-weight:600} .field{margin-bottom:16px} .field label{display:block;font-size:.76rem;font-weight:500;color:var(--muted); margin-bottom:8px} .field input{width:100%;min-height:46px;padding:0 16px;border-radius:999px; border:1px solid var(--line);background:var(--black);color:var(--text);font-size:.95rem; font-weight:500} .field input:focus{outline:none;border-color:var(--signal)} .hintbox{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.86rem; color:var(--muted);font-weight:500} .hintbox b{display:block;color:var(--signal);font-size:.76rem;margin-bottom:8px} /* ── colophon ────────────────────────────────────────────────────────────── */ .foot{background:var(--black);border-top:1px solid var(--line);padding:0} .foot-meta{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center; font-size:.8rem;color:var(--muted);font-weight:400;padding:0 var(--pad) 40px; text-align:center} .foot-meta .sig{color:var(--signal)} .notice{max-width:var(--max);margin:34px auto 0;display:flex;gap:16px;align-items:flex-start; border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px; font-size:.92rem;color:var(--muted);font-weight:600} .notice .n{color:var(--warm);font-size:.78rem;font-weight:500;flex:none;padding-top:2px} /* ── motion primitives ───────────────────────────────────────────────────── */ [data-reveal],.reveal{opacity:0;transform:translateY(34px); transition:opacity 720ms cubic-bezier(.16,1,.3,1),transform 720ms cubic-bezier(.16,1,.3,1)} [data-reveal="right"]{transform:translateY(20px)} [data-reveal].in,.reveal.in{opacity:1;transform:none} [data-stagger] > *{opacity:0;transform:translateY(28px); transition:opacity 720ms cubic-bezier(.16,1,.3,1),transform 720ms cubic-bezier(.16,1,.3,1)} [data-stagger].in > *{opacity:1;transform:none} .site-header.is-scrolled{border-bottom-color:color-mix(in srgb,var(--signal) 38%,transparent)} @keyframes tv-marquee{to{transform:translateX(-50%)}} @keyframes tv-pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.25)}} @keyframes tv-blink{0%,100%{opacity:1}50%{opacity:.25}} /* ── hero canvas ─────────────────────────────────────────────────────────── */ .hero__canvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block; opacity:0;transition:opacity 900ms ease} .hero.is-live .hero__canvas{opacity:1} .hero.is-fallback .hero__canvas{display:none} .hero.is-fallback:after{content:"";position:absolute;right:-8vw;top:-20%;width:52vw;height:120%; background:radial-gradient(circle at 60% 40%,color-mix(in srgb,var(--signal) 22%,transparent), transparent 62%);pointer-events:none} /* ── ticker marquee ──────────────────────────────────────────────────────── */ .ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--black); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .ticker__track{display:flex;width:max-content;animation:tv-marquee 38s linear infinite} .ticker:hover .ticker__track{animation-play-state:paused} .ticker__track span{display:inline-flex;align-items:center;gap:12px;padding:15px 0; margin-right:44px;color:var(--signal);font-size:.72rem;letter-spacing:.12em; text-transform:uppercase;white-space:nowrap} .ticker__track span:before{content:"";width:7px;height:7px;border-radius:999px; background:var(--warm);flex:none} /* ── scroll-driven process pipeline ──────────────────────────────────────── */ .flow{background:var(--black-soft);position:relative} .flow__track{position:relative} .flow__pin{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column; justify-content:center;padding:64px var(--pad) 52px} .flow__inner{max-width:var(--max);margin:0 auto;width:100%} .flow__meter{height:2px;background:var(--signal);transform:scaleX(0);transform-origin:0 50%; transition:transform 120ms linear;margin-bottom:34px} .flow__head{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:end; margin-bottom:34px} @media(max-width:920px){.flow__head{grid-template-columns:1fr;gap:20px}} .flow__head h2{font-size:clamp(2rem,4.6vw,3.6rem);line-height:.95} .flow__head p{margin:0;color:var(--muted);font-weight:400;line-height:1.65} .flow__map{position:relative;margin-bottom:30px} .flow__map > svg{display:block;width:100%;height:118px;overflow:visible} .flow__line-bg{fill:none;stroke:var(--line);stroke-width:2} .flow__line{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round} .flow__nodes{position:absolute;inset:0;display:grid; grid-template-columns:repeat(6,1fr);align-items:start} .flow__node{display:flex;flex-direction:column;align-items:center;gap:12px;padding-top:34px} .flow__dot{width:16px;height:16px;border-radius:999px;background:var(--black-soft); border:2px solid var(--line);display:grid;place-items:center; transition:border-color 320ms ease,background 320ms ease,transform 320ms ease} .flow__dot:after{content:"";width:6px;height:6px;border-radius:999px;background:transparent; transition:background 320ms ease} .flow__node.is-on .flow__dot{border-color:var(--signal)} .flow__node.is-on .flow__dot:after{background:var(--signal)} .flow__node.is-current .flow__dot{transform:scale(1.5);border-color:var(--warm)} .flow__node.is-current .flow__dot:after{background:var(--warm);animation:tv-pulse 1.6s ease-in-out infinite} .flow__label{font-size:.78rem;font-weight:500;color:var(--muted);text-align:center; transition:color 320ms ease} .flow__node.is-on .flow__label{color:var(--text)} .flow__node.is-current .flow__label{color:var(--warm)} .flow__num{font-size:.68rem;font-weight:500;color:var(--line); font-variant-numeric:tabular-nums;transition:color 320ms ease} .flow__node.is-on .flow__num{color:var(--signal)} @media(max-width:860px){ .flow__map > svg{height:70px} .flow__nodes{grid-template-columns:repeat(6,1fr)} .flow__label{font-size:.68rem} } /* Six words across a phone leaves about 55px each, which is how the labels ended up at 9.6px: legible only in the sense that pixels were lit. Below this the rail keeps the numbers and dots, which carry position perfectly well, and the counter underneath names the stage at a readable size. */ @media(max-width:620px){ .flow__label{display:none} .flow__map > svg{height:52px} } .flow__panels{position:relative;min-height:190px} .flow__panel{position:absolute;inset:0;opacity:0;transform:translateY(18px); pointer-events:none;transition:opacity 480ms cubic-bezier(.16,1,.3,1), transform 480ms cubic-bezier(.16,1,.3,1); display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start} .flow__panel.is-on{opacity:1;transform:none;pointer-events:auto} @media(max-width:920px){.flow__panel{grid-template-columns:1fr;gap:18px}} .flow__panel h3{font-size:clamp(1.5rem,3vw,2.3rem);line-height:1;margin-bottom:14px} .flow__panel p{margin:0;color:var(--muted);font-weight:600;font-size:1rem;max-width:52ch} .flow__who{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .flow__who span{font-size:.72rem;font-weight:500;padding:5px 12px;border-radius:999px; border:1px solid var(--line);color:var(--muted)} .flow__who span.on{border-color:var(--signal);color:var(--signal)} .flow__detail{border-left:2px solid var(--signal);padding-left:22px} .flow__detail dt{font-size:.72rem;font-weight:500;color:var(--signal);margin-bottom:5px} .flow__detail dd{margin:0 0 18px;color:var(--muted);font-size:.92rem;font-weight:600} .flow__detail dd:last-child{margin-bottom:0} /* board media parallax needs a little overscan so the shift never shows an edge */ .board__media img[data-parallax]{will-change:transform} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition-duration:.001ms!important; scroll-behavior:auto!important} [data-reveal],[data-stagger] > *,.reveal{opacity:1!important;transform:none!important} .flow__pin{position:static;min-height:0} .flow__panel{position:static;opacity:1;transform:none;margin-bottom:34px} .flow__panels{min-height:0} } /* ── capability matrix as a spec builder ─────────────────────────────────── */ .spec{max-width:var(--max);margin:0 auto} .spec__ask{margin-bottom:30px} .spec__ask-label{margin:0 0 14px;font-size:.82rem;font-weight:500;color:var(--brand-maroon)} .paper .spec__ask-label{color:var(--brand-maroon)} .spec__needs{display:flex;flex-wrap:wrap;gap:9px} .need{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:0 18px 0 12px; border-radius:999px;border:1px solid var(--line-dark);background:transparent; color:var(--paper-ink);font-size:.88rem;font-weight:500; transition:border-color 180ms ease,background 180ms ease,color 180ms ease} .need:hover{border-color:var(--brand-teal-deep)} .need__box{width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line-dark); display:grid;place-items:center;font-size:.72rem;color:transparent; transition:background 180ms ease,border-color 180ms ease,color 180ms ease} .need.is-on{background:var(--brand-teal-deep);border-color:var(--brand-teal-deep);color:#fff} .need.is-on .need__box{background:#fff;border-color:#fff;color:var(--brand-teal-deep)} .need--clear{border-style:dashed;padding:0 18px;font-weight:400; color:color-mix(in srgb,var(--paper-ink) 60%,transparent)} .need--clear .need__box{display:none} .spec__scores{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:26px} @media(max-width:820px){.spec__scores{grid-template-columns:1fr}} .score{border:1px solid var(--line-dark);border-radius:var(--radius);padding:18px 20px; transition:border-color 260ms ease,transform 260ms cubic-bezier(.16,1,.3,1), background 260ms ease} .score.is-best{border-color:var(--brand-teal-deep);border-width:2px;padding:17px 19px; transform:translateY(-3px)} .score.is-dim{opacity:.5} .score__top{display:flex;align-items:center;gap:10px;min-height:24px} .score__name{font-size:.94rem;font-weight:600} .score__badge{margin-left:auto;font-size:.66rem;font-weight:500;padding:4px 10px; border-radius:999px;background:var(--brand-teal-deep);color:#fff} .score__val{display:flex;align-items:baseline;gap:6px;margin:10px 0 12px} .score__val b{font-size:2.2rem;font-weight:500;line-height:1;letter-spacing:-.04em; font-variant-numeric:tabular-nums;color:var(--brand-teal-deep)} .score__val span{font-size:.8rem;font-weight:400; color:color-mix(in srgb,var(--paper-ink) 55%,transparent)} .score__bar{height:4px;background:color-mix(in srgb,var(--paper-ink) 12%,transparent); overflow:hidden;border-radius:999px} .score__bar i{display:block;height:100%;background:var(--brand-teal-deep); transform-origin:0 50%;transition:transform 620ms cubic-bezier(.16,1,.3,1)} .score__go{display:inline-block;margin-top:14px;font-size:.82rem;font-weight:500; color:var(--brand-teal-deep)} .spec__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:18px; padding-bottom:12px;font-size:.84rem;font-weight:500; color:color-mix(in srgb,var(--paper-ink) 60%,transparent)} .spec__expand{margin-left:auto;background:none;border:0;font:inherit;font-weight:500; font-size:.82rem;color:var(--brand-teal-deep);cursor:pointer;padding:4px 0; border-bottom:1px solid currentColor} /* grouped rows */ table.matrix tr.grp > td{border-bottom:1px solid var(--line-dark)} table.matrix tr.grp.is-hit td:first-child{box-shadow:inset 3px 0 0 var(--brand-teal-deep)} .grp__btn{display:inline-flex;align-items:center;gap:11px;background:none;border:0; font:inherit;font-family:var(--font-display);font-weight:500;font-size:.98rem; color:inherit;cursor:pointer;padding:2px 0;text-align:left} .grp__chev{font-size:.7rem;color:var(--brand-teal-deep);transition:transform 200ms ease} tr.grp.is-open .grp__chev{transform:rotate(90deg)} .grp__n{font-size:.68rem;font-weight:500;padding:2px 8px;border-radius:999px; border:1px solid var(--line-dark); color:color-mix(in srgb,var(--paper-ink) 55%,transparent)} .grp--base .grp__btn{color:color-mix(in srgb,var(--paper-ink) 66%,transparent)} .grp__score{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 8px; border-radius:999px;font-family:var(--font-display);font-size:.82rem;font-weight:500; background:color-mix(in srgb,var(--paper-ink) 7%,transparent); color:color-mix(in srgb,var(--paper-ink) 60%,transparent)} .grp__score.is-full{background:color-mix(in srgb,var(--brand-teal-deep) 16%,transparent); color:var(--brand-teal-deep)} .grp__score.is-none{opacity:.45} table.matrix tr.sub > td{border-bottom:1px solid color-mix(in srgb,var(--paper-ink) 8%,transparent);padding-top:11px;padding-bottom:11px} .sub__label{padding-left:35px!important;font-size:.9rem; color:color-mix(in srgb,var(--paper-ink) 74%,transparent)} table.matrix tbody tr.sub:hover{background:color-mix(in srgb,var(--paper-ink) 4%,transparent)} table.matrix td:first-child{padding-left:14px} table.matrix thead th:first-child{padding-left:14px} .every{display:inline-block;margin-left:10px;font-size:.62rem;font-weight:500; padding:3px 8px;border-radius:999px;border:1px solid var(--line-dark); color:color-mix(in srgb,var(--paper-ink) 52%,transparent);vertical-align:2px} .yes--link{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px; transition:background 180ms ease,transform 180ms ease} .yes--link:hover{background:color-mix(in srgb,var(--brand-teal-deep) 14%,transparent); transform:scale(1.1)} table.matrix th.c.is-best{color:var(--brand-teal-deep)} .spec__empty{margin:24px 0 0;font-weight:400; color:color-mix(in srgb,var(--paper-ink) 60%,transparent)} /* ── line-art icons ──────────────────────────────────────────────────────── */ .icon-sprite{position:absolute;width:0;height:0;overflow:hidden} .ico{width:26px;height:26px;display:block;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;color:var(--signal)} .ico--lg{width:34px;height:34px;stroke-width:1.4} .paper .ico{color:var(--brand-teal-deep)} /* Draw the stroke in as the grid reveals. The dash length is generous enough to cover the longest path in the set; anything shorter simply finishes early. */ [data-stagger] .ico > *,[data-reveal] .ico > *{stroke-dasharray:120;stroke-dashoffset:120} [data-stagger].in .ico > *,[data-reveal].in .ico > *{stroke-dashoffset:0; transition:stroke-dashoffset 900ms cubic-bezier(.16,1,.3,1) 160ms} @media (prefers-reduced-motion:reduce){ .ico > *{stroke-dashoffset:0!important} } /* ── per-system schematic ───────────────────────────────────────────────── */ .board__schema{padding:0 24px;margin-top:-4px;position:relative} .board__schema svg{width:100%;height:84px;display:block;overflow:visible} .board__schema .s-line{fill:none;stroke:var(--line);stroke-width:1.5; vector-effect:non-scaling-stroke} .board__schema .s-flow{fill:none;stroke:var(--signal);stroke-width:1.5; stroke-dasharray:4 5;animation:s-dash 1.6s linear infinite; vector-effect:non-scaling-stroke} @keyframes s-dash{to{stroke-dashoffset:-18}} @media (prefers-reduced-motion:reduce){.board__schema .s-flow{animation:none}} /* Nodes and labels live in HTML over the stretched SVG so neither is distorted. */ .board__schema-nodes,.board__schema-labels{position:absolute;inset:0 24px; pointer-events:none} .s-dot{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:999px; background:var(--black-panel);border:1.5px solid var(--signal);box-sizing:border-box} .s-dot:after{content:"";position:absolute;inset:1.5px;border-radius:999px; background:var(--signal)} .s-dot--warm{border-color:var(--warm)} .s-dot--warm:after{background:var(--warm)} .s-label{position:absolute;top:64%;transform:translateX(-50%);white-space:nowrap; font-family:var(--font-mono);font-size:.56rem;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} .s-label--start{transform:none;margin-left:-4px} .s-label--end{transform:translateX(-100%);margin-left:4px} .s-label--branch{top:8%;transform:none} /* ── board data readout ──────────────────────────────────────────────────── */ .board__meter{padding:0 24px 4px} .board__meter-row{display:flex;align-items:baseline;justify-content:space-between; font-size:.7rem;font-weight:500;color:var(--muted);margin-bottom:7px; font-family:var(--font-display)} .board__meter-track{height:5px;background:var(--line);display:flex;overflow:hidden} .board__meter-track i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0); transition:transform 900ms cubic-bezier(.16,1,.3,1) 200ms} .board.in .board__meter-track i,[data-stagger].in .board__meter-track i{transform:scaleX(1)} .board__meter-track i.seg--used{background:var(--signal)} .board__meter-track i.seg--wait{background:var(--warm)} .board__legend{display:flex;gap:14px;margin-top:9px;font-size:.66rem;font-weight:500; color:var(--muted);font-family:var(--font-display)} .board__legend span{display:inline-flex;align-items:center;gap:6px} .board__legend i{width:8px;height:8px;display:block} .cell .ico{margin-bottom:14px} .cell .n{display:block} .flow__ico{width:22px;height:22px;margin-top:2px;color:var(--muted); transition:color 320ms ease} .flow__node.is-on .flow__ico{color:var(--signal)} .flow__node.is-current .flow__ico{color:var(--warm)} @media(max-width:860px){.flow__ico{display:none}} /* ── iRegist.id lockup ───────────────────────────────────────────────────── */ .wordmark{display:inline-flex;align-items:center;gap:9px;line-height:1; font-family:var(--font-display);color:var(--text)} .wordmark__mark{width:22px;height:22px;flex:none;color:var(--signal)} .wordmark__text{font-size:1.2rem;font-weight:600;letter-spacing:-.04em} .wordmark__text em{font-style:normal;color:var(--signal)} .wordmark--sm .wordmark__mark{width:18px;height:18px} .wordmark--sm .wordmark__text{font-size:1rem} /* the header lockup sits next to the product label */ .site-header__logo .wordmark__text{font-size:1.12rem} .tv-credit-main .wordmark__text{font-size:1.6rem} .tv-credit-main .wordmark__mark{width:28px;height:28px} .tv-credit.on-light .wordmark{color:var(--paper-ink,#1c2326)} .tv-credit.on-light .wordmark__mark,.tv-credit.on-light .wordmark__text em{color:#2e6f7d} /* ── section seams ───────────────────────────────────────────────────────── */ .seam{height:1px;border:0;margin:0; background:linear-gradient(90deg,transparent,var(--signal),transparent);opacity:.42} /* ── primary action ──────────────────────────────────────────────────────── */ .cta-wa{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono); font-size:.68rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase; transition:background 160ms ease,color 160ms ease,transform 160ms ease} .cta-wa__ico{flex:none} /* in the header bar: a filled bay at the end of the instrument row */ .cta-wa--bar{padding:0 20px;border-left:1px solid var(--line); background:color-mix(in srgb,var(--signal) 14%,transparent);color:var(--signal)} .cta-wa--bar:hover{background:var(--signal);color:var(--on-signal)} /* on the tosca closer: solid ink so it reads as the one thing to press */ .cta-wa--solid{min-height:44px;padding:0 22px;border-radius:999px; background:var(--feature-ink);color:var(--feature-bg);font-size:.78rem} .cta-wa--solid:hover{transform:translateY(-2px)} .closer__num{margin:14px 0 0;font-family:var(--font-mono);font-size:.72rem; letter-spacing:.08em;color:color-mix(in srgb,var(--feature-ink) 62%,transparent)} .foot-wa{color:var(--signal);border-bottom:1px solid color-mix(in srgb,var(--signal) 45%,transparent)} .foot-wa:hover{border-bottom-color:var(--signal)} /* The CTA is the last thing that should go, but it cannot be allowed to push the nav off the edge, so the label drops to an icon well before that happens. */ @media(max-width:1100px){.cta-wa--bar span{display:none}.cta-wa--bar{padding:0 16px}} /* ── full-bleed photo band ─────────────────────────────────────────────────── A breather between the pipeline and the capability table, both of which are dense. Like the tosca feature bands, this one is a fixed surface rather than a themed one: the photograph is dark, so the band keeps its own ink ground and light type in BOTH themes. Using --black here would invert it on paper, because the light theme resolves that token to near-white. */ .band{position:relative;min-height:62svh;display:flex;align-items:flex-end; padding:0 var(--pad) 72px;overflow:hidden;isolation:isolate; background:#040004;color:#f8faf9} .band__img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;z-index:-2; filter:grayscale(.35) contrast(1.05);opacity:.82} .band__scrim{position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(90deg,#040004 2%,rgba(4,0,4,.46) 42%,rgba(4,0,4,0) 78%), linear-gradient(0deg,#040004 2%,rgba(4,0,4,0) 44%)} .band__copy{max-width:var(--max);width:100%;margin:0 auto;position:relative} .band .eyebrow{color:#22cdbe} .band__copy h2{font-size:clamp(1.7rem,4.6vw,3.5rem);line-height:1.06;margin:16px 0 0; max-width:20ch;color:#f8faf9} /* The headline is broken by hand for the desktop measure. Spans rather than
because the mobile rule below turns the breaks off, and hiding a
welds the words on either side of it together ("roomshould"). The whitespace between the spans is what survives to become the word space. */ .band__copy h2 span{display:block} .band__note{margin:18px 0 0;color:rgba(248,250,249,.7);max-width:46ch;font-size:1.02rem; line-height:1.65} /* Below ~720px the band stops being a fixed slab. A viewport-height minimum plus a headline that has wrapped to six lines is how copy gets squeezed on a short phone, so the height comes from padding instead: the top padding is the photo's window, and the band can never be shorter than the words inside it. The hard line breaks are authored for the desktop measure, and at this width they land mid-phrase, so they are dropped and the text wraps on its own. */ /* On a phone the band stops being a photo with text on top of it. A cover crop into a near-square box has no vertical slack, so the only part of this picture on screen is the dark ceiling above the audience, and scrimming it for legibility blacks out what little was left. Stack instead: a real photo window with its own crop, then the copy on solid ink underneath. Nothing to scrim, nothing to squeeze, and the photograph is actually visible. The transform override matters: parallax writes an inline translate meant for an absolutely-positioned image, which would drag this one out of the flow. */ @media(max-width:720px){ .band{display:block;min-height:0;padding:0} .band__img{position:relative;inset:auto;width:100%;height:210px;opacity:.95; object-position:50% 62%;transform:none!important} .band__scrim{height:210px;bottom:auto; background:linear-gradient(0deg,rgba(4,0,4,.8),rgba(4,0,4,0) 58%)} .band__copy{padding:24px var(--pad) 46px} .band__copy h2{max-width:none} .band__copy h2 span{display:inline}} @media(max-width:420px){.band__img{height:180px}.band__scrim{height:180px}} /* ── persona photo on the guided-tour columns ──────────────────────────────── The signal rule that used to sit on .step-col moves down to the heading so the photo reads as the top of the column, not a caption under a line. */ .step-col--shot{border-top:0;padding-top:0} .step-col__img{margin:0 0 20px;height:170px;overflow:hidden;border-radius:var(--radius); border:1px solid var(--line)} .step-col__img img{width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.05);opacity:.62; transition:filter 420ms ease,opacity 420ms ease,transform 620ms cubic-bezier(.16,1,.3,1)} .step-col--shot:hover .step-col__img img{filter:grayscale(0) contrast(1);opacity:1; transform:scale(1.03)} .step-col--shot h3{border-top:2px solid var(--signal);padding-top:18px} /* Once the columns stack the figure is as wide as the text column, and a flat 170px turns it into a 5:1 sliver at 980px. Scale the height with the viewport instead, capped, so the photo keeps a sane ratio AND stays flush with the text. (aspect-ratio + max-height was the obvious move and is wrong: once the cap bites, the ratio holds the width back and the photo floats short of the column edge.) */ @media(max-width:980px){ .step-col__img{height:clamp(140px,26vw,210px)}} /* On paper the greyed-down treatment reads as a printing fault, not a choice. */ body.suite[data-mode="light"] .step-col__img img{filter:grayscale(.4) contrast(1.02); opacity:.92} /* ── touch ergonomics ──────────────────────────────────────────────────────── Below the tablet breakpoint the controls stop being pointer targets and start being thumb targets. These are the ones that measured under WCAG 2.5.8's 24x24 floor on a 375px screen, given room to be hit without magnifying the type: the padding grows, not the font. Keyed on pointer as well as width, because a 760px tablet in portrait is a thumb and a width-only query hands it the desktop hit areas. */ @media(max-width:900px),(pointer:coarse){ .score__go{padding:10px 0;min-height:44px;display:inline-flex;align-items:center} .spec__expand{padding:11px 0;min-height:44px} .grp__btn{padding:11px 0;min-height:44px} /* The contact line under the call to action is the one piece of mono type a reader has to act on rather than skim, so it does not stay at label size. */ .closer__num{font-size:.82rem} /* Footer actions: the WhatsApp line is a primary contact, and the vendor logo is an image link. Neither is an inline link in running prose, so neither gets that exemption from the 24px floor. Pad the hit area, not the mark. */ .foot-wa{display:inline-flex;align-items:center;min-height:44px} .tv-credit-by a{display:inline-flex;align-items:center;min-height:40px} } /* ── the capability table on a phone ───────────────────────────────────────── The table has a 680px minimum and the wrapper scrolls it, which works but gives no sign that it scrolls, so the right-hand systems simply look missing. A masked edge shows there is more, and the hint says so outright; both are removed once the table fits on its own. */ .matrix-wrap{position:relative} .matrix-hint{display:none;align-items:center;gap:8px;margin:0 0 12px; font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em; text-transform:uppercase;color:color-mix(in srgb,var(--paper-ink) 55%,transparent)} /* Driven by measurement, not a breakpoint: whether the table overflows depends on the page padding and the rendered font as much as the viewport, and every width I guessed was wrong at its own edge. A hint promising hidden columns over 1px of scroll is worse than no hint. motion.js sets these when the wrapper reports that it is actually cut off. */ .matrix-hint.is-on{display:flex} .matrix-wrap.is-cut{-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15)); mask-image:linear-gradient(90deg,#000 84%,rgba(0,0,0,.15))} .matrix-hint svg{flex:none} @media (prefers-reduced-motion:no-preference){ .matrix-hint svg{animation:mhint 2.4s ease-in-out infinite} } @keyframes mhint{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}} /* ── photograph inside a tosca band ────────────────────────────────────────── The band is a flat gradient, so a photograph dropped straight onto it floats. An ink mat under the image gives it an edge to sit against and ties it to the near-black the rest of the page is built on. The grid is align-items:end, so a fixed ratio keeps the picture's baseline level with the last line of type beside it rather than drifting with the copy length. */ .band-shot{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--black); aspect-ratio:4/3;box-shadow:0 18px 44px rgba(4,0,4,.22)} .band-shot img{width:100%;height:100%;object-fit:cover;display:block; filter:saturate(.92) contrast(1.03); transition:transform 900ms cubic-bezier(.16,1,.3,1)} .band-shot:hover img{transform:scale(1.04)} /* The closing grid has two tracks and both are spoken for, so a third child drops into row two under the headline and leaves a hole beside it. Span the full width instead: the last thing on the page becomes a room, edge to edge. */ .band-shot--closer{grid-column:1/-1;aspect-ratio:auto; height:clamp(170px,20vw,280px);margin-top:36px} .band-shot--closer img{object-position:50% 56%} @media(max-width:920px){ /* Stacked, a 4:3 block is most of a phone screen for something decorative. */ .band-shot{aspect-ratio:16/9} /* --closer carries .band-shot too, so it picks up that ratio unless it is cleared here; with an explicit height the ratio wins and sets the width, which pulls the photo in off the column edge. */ .band-shot--closer{aspect-ratio:auto;height:clamp(150px,42vw,220px);margin-top:26px} } /* ── photographic rule above the capability table ──────────────────────────── The table is the densest thing on the page and it follows an intro made of more prose. This is the pause between them: wide, short, and captioned, so it reads as a divider rather than an illustration hunting for a caption. */ .strip{position:relative;margin:0 auto 40px;max-width:var(--max);border-radius:var(--radius); overflow:hidden;background:#040004;isolation:isolate; height:clamp(150px,22vw,270px)} /* Ground is a fixed ink rather than var(--black): the light theme resolves that token to near-white, which would leave the caption white on white. Full opacity because the picture is already dim and has no headroom to dim further. */ /* Oversized and absolutely placed, because it is parallaxed. The scroll handler writes a translate meant for an image with vertical slack; give it an element sized exactly to the box and the translate walks the picture straight out of frame, leaving the ground showing. The height here is the travel budget. */ .strip img{position:absolute;inset:-14% 0;width:100%;height:128%;object-fit:cover;display:block; object-position:50% 48%;filter:grayscale(.2) contrast(1.02) brightness(1.06)} .strip figcaption{position:absolute;left:0;right:0;bottom:0;padding:38px 26px 18px; font-family:var(--font-mono);font-size:.74rem;letter-spacing:.05em; text-transform:uppercase;color:#f8faf9; background:linear-gradient(0deg,rgba(4,0,4,.86),rgba(4,0,4,0))} @media(max-width:620px){ .strip figcaption{font-size:.66rem;padding:30px 18px 14px;letter-spacing:.03em} } /* ── sticky call to action (touch only) ────────────────────────────────────── On a phone the header CTA is an icon with no label and the real ask sits at the very bottom of a long page. This carries it with the reader. Kept off pointer:fine screens: on a desktop the header CTA is always in view with its label, so a second permanent bar would just be a nag. It hides with visibility rather than opacity so it leaves the tab order when it is down, and it keeps its own ink surface in both themes, like the photo band. */ .stickycta{position:fixed;left:0;right:0;bottom:0;z-index:1300;display:none; align-items:center;gap:14px; padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)); background:rgba(4,0,4,.94);color:#f8faf9; border-top:1px solid rgba(248,250,249,.13); box-shadow:0 -10px 30px rgba(4,0,4,.32); transform:translateY(115%);visibility:hidden; transition:transform 420ms cubic-bezier(.16,1,.3,1),visibility 0s linear 420ms} @supports (backdrop-filter:blur(1px)){ .stickycta{background:rgba(4,0,4,.82);backdrop-filter:blur(14px)}} .stickycta.is-up{transform:none;visibility:visible;transition-delay:0s,0s} .stickycta__lede{min-width:0;line-height:1.25} .stickycta__lede b{display:block;font-family:var(--font-display);font-weight:500; font-size:.86rem;letter-spacing:-.01em; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .stickycta__lede span{display:block;font-family:var(--font-mono);font-size:.7rem; letter-spacing:.04em;color:rgba(248,250,249,.6)} .stickycta__btn{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:8px; min-height:44px;padding:0 18px;border-radius:999px; background:var(--signal-bright,#3f919d);color:#040004; font-family:var(--font-display);font-weight:600;font-size:.9rem;text-decoration:none; transition:transform 180ms ease} .stickycta__btn:active{transform:scale(.97)} @media(max-width:720px) and (pointer:coarse){ .stickycta{display:flex} /* Reserve the bar's height so it can never cover the last line of the footer. */ body.suite{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))} } /* A narrow window on a desktop is still a mouse, but it is also the only way to see this without a phone, so allow it when the viewport is genuinely phone sized and there is no fine pointer claim to the contrary. */ @media(max-width:560px){ .stickycta{display:flex} body.suite{padding-bottom:calc(74px + env(safe-area-inset-bottom,0px))} } @media(max-width:360px){ .stickycta__lede span{display:none} .stickycta__btn{padding:0 14px} } @media (prefers-reduced-motion:reduce){.stickycta{transition:none}} @media print{.stickycta{display:none!important}} /* ── the guided run ────────────────────────────────────────────────────────── This section used to describe the demo in prose and offer nothing to click, while fourteen unordered links into the same demos sat above it. It is now the page's one obvious path: three numbered acts, in order, every instruction that goes somewhere being the link that takes you there. */ .run{list-style:none;margin:0;padding:0;max-width:var(--max);margin-inline:auto; display:grid;grid-template-columns:repeat(3,1fr);gap:34px;counter-reset:none} @media(max-width:980px){.run{grid-template-columns:1fr;gap:40px}} .run__act{min-width:0} .run__img{position:relative;margin:0 0 18px;height:170px;overflow:hidden; border-radius:var(--radius);border:1px solid var(--line)} @media(max-width:980px){.run__img{height:clamp(140px,26vw,210px)}} .run__img img{width:100%;height:100%;object-fit:cover; filter:grayscale(1) contrast(1.05);opacity:.62; transition:filter 420ms ease,opacity 420ms ease,transform 620ms cubic-bezier(.16,1,.3,1)} .run__act:hover .run__img img{filter:grayscale(0) contrast(1);opacity:1;transform:scale(1.03)} body.suite[data-mode="light"] .run__img img{filter:grayscale(.4) contrast(1.02);opacity:.92} /* The number is the ordering cue the old three-column layout never had. */ .run__no{position:absolute;left:0;bottom:0;z-index:2; display:grid;place-items:center;width:44px;height:44px; background:var(--signal);color:var(--on-signal,#040004); font-family:var(--font-display);font-weight:600;font-size:1.1rem; border-radius:0 var(--radius) 0 0} .run__act h3{margin:0;border-top:2px solid var(--signal);padding-top:18px; font-size:1.18rem;font-weight:600;letter-spacing:-.01em} .run__meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px; margin:8px 0 18px;font-family:var(--font-mono);font-size:.72rem; letter-spacing:.05em;text-transform:uppercase;color:var(--muted)} .run__steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:s} .run__steps > li{position:relative;padding-left:26px;counter-increment:s; font-size:.94rem;line-height:1.6;color:var(--muted)} .run__steps > li:before{content:counter(s);position:absolute;left:0;top:1px; width:17px;height:17px;border-radius:50%;display:grid;place-items:center; border:1px solid var(--line-dark);font-family:var(--font-mono);font-size:.6rem; color:var(--muted)} .run__steps > li > span{display:block;margin-top:3px} /* A step that goes somewhere is a link; a step you perform where you already are is not. Making them look different is the whole point. */ .run__go{display:inline-flex;align-items:center;gap:7px;min-height:26px; font-family:var(--font-display);font-weight:600;font-size:.98rem; color:var(--text);text-decoration:none; border-bottom:1px solid var(--signal);padding-bottom:1px; transition:color 180ms ease,border-color 180ms ease} .run__go:after{content:"→";color:var(--signal);transition:transform 220ms ease} .run__go:hover{color:var(--signal)} .run__go:hover:after{transform:translateX(3px)} .run__here{display:block;font-family:var(--font-display);font-weight:600; font-size:.98rem;color:var(--text)} /* ── staff login chip ──────────────────────────────────────────────────────── Public on purpose. It sits beside every control that asks for it, so nobody meets a login form with nothing to type. */ .creds{display:inline-flex;align-items:center;gap:5px; padding:3px 8px;border-radius:999px;cursor:pointer; border:1px solid var(--line-dark);background:none; font-family:var(--font-mono);font-size:.68rem;letter-spacing:.02em; color:var(--muted);text-transform:none; transition:border-color 180ms ease,color 180ms ease} .creds:hover{border-color:var(--signal);color:var(--text)} .creds code{font:inherit;color:var(--text)} .creds i{font-style:normal;opacity:.45} .creds__act{opacity:.62;padding-left:3px} .creds.is-copied{border-color:var(--signal);color:var(--signal)} .creds.is-copied code{color:var(--signal)} .hero__hint{margin:14px 0 0;font-family:var(--font-mono);font-size:.72rem; letter-spacing:.04em;color:var(--muted)} /* ── which stage am I on ───────────────────────────────────────────────────── The pinned pipeline shows one panel of six and hides the rest, so without this the reader has no idea how many stages there are or how far in they got. aria-live on the element means it is announced rather than silently swapped. */ .flow__count{display:flex;align-items:baseline;gap:12px;margin:0 0 18px; padding-top:16px;border-top:1px solid var(--line)} .flow__count-n{font-family:var(--font-mono);font-size:.8rem;letter-spacing:.06em; color:var(--muted)} .flow__count-n b{color:var(--signal);font-weight:500;font-size:1.15rem} .flow__count-n i{font-style:normal;opacity:.5;padding:0 3px} .flow__count-name{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.12em; text-transform:uppercase;color:var(--text)} @media(max-width:620px){ .flow__count{gap:10px;margin-bottom:14px} .flow__count-n b{font-size:1.3rem} .flow__count-name{font-size:.8rem} }