/* ---------------- palette ---------------- Dark is the default and the brand. Light is opt-in: app.js sets data-theme="light" on and an inline script in the head restores the choice before first paint, so nothing flashes. */ :root{ color-scheme:dark; --ink:#0C1A28; --ink-2:#0A1622; --panel:#102132; --grid:#12293D; --orange:#F0691E; --orange-dim:#C4551A; --accent-text:#F0691E; --on-orange:#0C1A28; --hair:#5D7C99; --hair-dim:#2C4A66; --rule:#1E3A52; --chalk:#E8EEF4; --chalk-2:#8FA6BB; --chalk-3:#5D7C99; --pass:#3E9E7A; --warn:#E0A33E; --nav-bg:rgba(12,26,40,.88); --nav-bg-stuck:rgba(12,26,40,.96); --scrim:rgba(6,14,22,.82); --key-hover:#132639; --shadow:0 30px 80px -30px rgba(0,0,0,.9); --measure:65ch; --navh:66px; --draw:cubic-bezier(.25,.7,.25,1); } /* The same drawing on paper, not an inversion. Orange is deepened here because #F0691E on a light ground is 3.9:1 — fine for a heading, under AA for the small mono labels, which get --accent-text instead. */ :root[data-theme="light"]{ color-scheme:light; --ink:#EEF2F6; --ink-2:#E3E9EF; --panel:#FFFFFF; --grid:#DCE4EC; --orange:#C24E14; --orange-dim:#A34110; --accent-text:#9E3D0E; --on-orange:#FFFFFF; --hair:#4C6C8A; --hair-dim:#AFC2D2; --rule:#C6D3DE; --chalk:#0C1A28; --chalk-2:#41566A; --chalk-3:#6A8098; --pass:#2C7D5D; --warn:#8A5E12; --nav-bg:rgba(238,242,246,.88); --nav-bg-stuck:rgba(238,242,246,.96); --scrim:rgba(12,26,40,.55); --key-hover:#F1F5F9; --shadow:0 24px 60px -28px rgba(12,26,40,.35); } *{box-sizing:border-box} html{scroll-behavior:smooth} /* Anchor targets must clear the sticky bar, or the heading you clicked for lands underneath it. */ [id]{scroll-margin-top:calc(var(--navh) + 24px)} body{ margin:0; background:var(--ink); color:var(--chalk); font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.62; -webkit-font-smoothing:antialiased; background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:38px 38px; background-position:center top; transition:background-color .25s ease, color .25s ease; } body.locked{overflow:hidden} .wrap{max-width:1160px; margin:0 auto; padding:0 30px} a{color:var(--chalk)} :focus-visible{outline:2px solid var(--orange); outline-offset:3px} /* ---- SVG colour mapping ---- The hero diagram and the logo marks set their colours as presentation attributes. Those sit below every CSS rule in the cascade, so matching each literal to its token themes the artwork without editing the markup — and if this stylesheet never loads, the drawing is still correct. */ .dgm [stroke="#5D7C99"], .logo [stroke="#5D7C99"]{stroke:var(--hair)} .dgm [stroke="#2C4A66"]{stroke:var(--hair-dim)} .dgm [stroke="#E8EEF4"], .logo [stroke="#E8EEF4"]{stroke:var(--chalk)} .dgm [stroke="#F0691E"]{stroke:var(--orange)} .dgm [fill="#5D7C99"]{fill:var(--hair)} .dgm [fill="#E8EEF4"]{fill:var(--chalk)} .dgm [fill="#8FA6BB"]{fill:var(--chalk-2)} .dgm [fill="#102132"]{fill:var(--panel)} .dgm [fill="#F0691E"]{fill:var(--accent-text)} .logo [fill="#F0691E"]{fill:var(--orange)} /* ---- scroll reveal ---- Gated on html.js so the page is fully visible without JavaScript. */ html.js .reveal > *{opacity:0; transform:translateY(14px)} html.js .reveal.in > *{ opacity:1; transform:none; transition:opacity .95s ease, transform .95s var(--draw); } html.js .reveal.in > *:nth-child(2){transition-delay:.13s} html.js .reveal.in > *:nth-child(3){transition-delay:.26s} html.js .reveal.in > *:nth-child(4){transition-delay:.39s} html.js .reveal.in > *:nth-child(5){transition-delay:.52s} /* icons draw themselves in, like the hero diagram */ html.js .icon .stroke-in{stroke-dashoffset:1; stroke-dasharray:1} html.js .in .icon .stroke-in{ stroke-dashoffset:0; transition:stroke-dashoffset 1.35s var(--draw) .25s; } /* ---- section rules trace left to right ---- The real border only goes transparent under html.js, so with scripting off every rule is simply present. */ html.js .pick, html.js .g3, html.js .doors, html.js .arc, html.js .measure, html.js .people{position:relative; border-top-color:transparent} html.js .pick::before, html.js .g3::before, html.js .doors::before, html.js .arc::before, html.js .measure::before, html.js .people::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:1px; background:var(--rule); transform:scaleX(0); transform-origin:left center; } html.js .pick.in::before, html.js .g3.in::before, html.js .doors.in::before, html.js .arc.in::before, html.js .measure.in::before, html.js .people.in::before{ transform:scaleX(1); transition:transform 1.3s var(--draw); } html.js .pick{border-bottom-color:transparent} html.js .pick::after{ content:""; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:var(--rule); transform:scaleX(0); transform-origin:left center; } html.js .pick.in::after{transform:scaleX(1); transition:transform 1.3s var(--draw) .18s} .icon{width:24px; height:24px; display:block; color:var(--hair); margin:0 0 16px; flex:none} .door .icon{margin-bottom:14px} .eyebrow{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--chalk-3); margin:0 0 16px} .h1{font-family:Archivo,sans-serif; font-weight:700; font-size:clamp(34px,5.6vw,62px); line-height:1.03; letter-spacing:-.042em; margin:0; text-wrap:balance} .h2{font-family:Archivo,sans-serif; font-weight:600; font-size:clamp(24px,3.2vw,34px); line-height:1.1; letter-spacing:-.034em; margin:0; text-wrap:balance} .h3{font-family:Archivo,sans-serif; font-weight:600; font-size:18px; line-height:1.25; letter-spacing:-.028em; margin:0} .hi{color:var(--orange)} .lede{font-size:18px; line-height:1.6; color:var(--chalk-2); max-width:48ch; margin:20px 0 0} .body{font-size:15.5px; line-height:1.62; color:var(--chalk-2); max-width:var(--measure)} .mono{font-family:"IBM Plex Mono",monospace} .logo{display:inline-flex; align-items:center; gap:11px; text-decoration:none} .wm{font-family:Archivo,sans-serif; font-weight:700; font-size:21px; letter-spacing:-.045em; color:var(--chalk); white-space:nowrap} .wm .lc{font-weight:500; letter-spacing:-.03em} .wm .dot{color:var(--orange); font-weight:500} .nav{position:sticky; top:0; z-index:50; background:var(--nav-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--rule); transition:border-color .3s, background .3s} .nav.stuck{background:var(--nav-bg-stuck); border-bottom-color:var(--hair-dim)} .nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:var(--navh)} .navlinks{display:flex; gap:24px; align-items:center} @media(max-width:1020px){ .navlinks{display:none} } .navlinks a, .navlinks .navbtn{ font-size:13.5px; color:var(--chalk-2); text-decoration:none; letter-spacing:-.005em; padding:0 0 3px; margin:0; white-space:nowrap; border:0; border-bottom:1px solid transparent; background:none; font-family:inherit; cursor:pointer; transition:color .2s, border-color .2s; } .navlinks a:hover, .navlinks .navbtn:hover{color:var(--chalk)} .navlinks a.active{color:var(--chalk); border-bottom-color:var(--hair)} .navright{display:flex; align-items:center; gap:12px; flex:none} .iconbtn{ width:34px; height:34px; flex:none; border:1px solid var(--hair-dim); border-radius:2px; background:none; color:var(--chalk-2); cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; transition:color .2s, border-color .2s; } .iconbtn:hover{color:var(--chalk); border-color:var(--hair)} .iconbtn svg{width:17px; height:17px} /* Show the theme you would switch TO, which is the one you are not in. */ .i-moon{display:none} :root[data-theme="light"] .i-sun{display:none} :root[data-theme="light"] .i-moon{display:block} .btn{ display:inline-block; background:var(--orange); color:var(--on-orange); padding:11px 20px; font-family:Archivo,sans-serif; font-weight:600; font-size:13.5px; letter-spacing:-.015em; text-decoration:none; border-radius:2px; border:1px solid var(--orange); cursor:pointer; white-space:nowrap; } .btn:hover{background:var(--orange-dim); border-color:var(--orange-dim); color:var(--on-orange)} .btn.ghost{background:transparent; color:var(--chalk-2); border-color:var(--hair-dim)} .btn.ghost:hover{background:transparent; color:var(--chalk); border-color:var(--hair)} .btn.sm{padding:9px 16px; font-size:12.5px} .btn[disabled]{opacity:.45; cursor:not-allowed} .linkbtn{ background:none; border:0; padding:0; margin:0; font:inherit; font-size:13.5px; color:var(--chalk-2); cursor:pointer; text-align:left; } .linkbtn:hover{color:var(--chalk)} .sec{padding:76px 0} .hero{padding:84px 0 8px} .hero-grid{display:grid; grid-template-columns:1fr; gap:52px; align-items:center} @media(min-width:960px){ .hero-grid{grid-template-columns:1.05fr .95fr; gap:56px} } .hero-cta{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:32px} .hero-note{font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--chalk-3); margin-top:22px; letter-spacing:.02em} .reg{position:relative; padding:22px} .reg::before,.reg::after{content:""; position:absolute; width:15px; height:15px; border:1px solid var(--hair-dim)} .reg::before{top:0; left:0; border-right:0; border-bottom:0} .reg::after{bottom:0; right:0; border-left:0; border-top:0} .reg i.tr,.reg i.bl{position:absolute; width:15px; height:15px; border:1px solid var(--hair-dim)} .reg i.tr{top:0; right:0; border-left:0; border-bottom:0} .reg i.bl{bottom:0; left:0; border-right:0; border-top:0} .dgm{width:100%; height:auto; display:block} .dgm .draw{stroke-dasharray:var(--len,300); stroke-dashoffset:var(--len,300); animation:draw 1.2s ease-out forwards} .dgm .fade{opacity:0; animation:fade .6s ease-out forwards} @keyframes draw{ to{stroke-dashoffset:0} } @keyframes fade{ to{opacity:1} } /* Hover replays the draw. Only offered where it can actually happen: app.js sets html.js, and the replay is skipped under reduced motion. */ html.js .dgm{cursor:crosshair} .dgm-hint{ font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--chalk-3); text-align:right; margin:12px 0 0; opacity:0; transition:opacity .35s ease; } html.js .reg:hover .dgm-hint{opacity:1} .dgm-hint .k{color:var(--accent-text)} /* industries */ .pick{display:flex; flex-wrap:wrap; gap:0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); margin-top:56px} .pick > div, .pick > button{ flex:1 1 190px; padding:22px; color:var(--chalk); text-align:left; border-right:1px solid var(--rule); display:flex; flex-direction:column; gap:7px; font-family:inherit; font-size:inherit; background:transparent; border-top:0; border-bottom:0; border-left:0; } .pick > div:last-child, .pick > button:last-child{border-right:0} @media(max-width:820px){ .pick > div, .pick > button{flex-basis:46%; border-bottom:1px solid var(--rule)} } .pick > button{cursor:pointer; transition:background .15s} .pick > button:hover{background:var(--panel)} .pick .icon{margin-bottom:10px} .pick .pn{font-family:Archivo,sans-serif; font-weight:600; font-size:15px; letter-spacing:-.025em} .pick .ps{font-size:13.5px; color:var(--chalk-2); line-height:1.5} .pick > button .ps{color:var(--accent-text)} .pick > button .icon{color:var(--orange)} .g3{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0; border-top:1px solid var(--rule)} .g3 > div{padding:28px 26px 30px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)} .g3 > div:last-child{border-right:0} @media(max-width:820px){ .g3 > div{border-right:0} } .g3 p{margin:10px 0 0; font-size:14.5px; color:var(--chalk-2); line-height:1.58} .doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:0; border-top:1px solid var(--rule); margin-top:36px} .door{padding:30px 26px 32px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:10px; transition:background .2s} .door:last-child{border-right:0} @media(max-width:1080px){ .door{border-right:0} } .door:hover{background:var(--panel)} .door .shape{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.13em; text-transform:uppercase; color:var(--chalk-3); border:1px solid var(--hair-dim); padding:3px 8px; border-radius:2px; align-self:flex-start} .door p{margin:2px 0 0; font-size:14.5px; color:var(--chalk-2); line-height:1.58} .door .more{margin-top:auto; padding-top:16px; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--chalk-3); border-bottom:1px dashed var(--hair-dim); align-self:flex-start} .door.key{background:var(--panel)} .door.key:hover{background:var(--key-hover)} .door.key .shape{border-color:var(--orange); color:var(--accent-text)} .door.key .icon{color:var(--orange)} .bench{background:var(--panel); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:70px 0} .bench-grid{display:grid; grid-template-columns:1fr; gap:46px; align-items:center} @media(min-width:960px){ .bench-grid{grid-template-columns:.9fr 1.1fr; gap:56px} } .benchrow{padding:20px 22px; border-bottom:1px solid var(--rule); display:grid; grid-template-columns:26px 1fr; gap:16px} .benchrow .n{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent-text)} .benchrow h3{font-size:15px} .benchrow p{margin:6px 0 0; font-size:14px; color:var(--chalk-2)} .arc{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0; border-top:1px solid var(--rule); margin-top:36px} .arc > div{padding:28px 26px 32px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)} .arc > div:last-child{border-right:0} @media(max-width:820px){ .arc > div{border-right:0} } .arc .days{font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.13em; color:var(--accent-text); display:block; margin-bottom:12px} .arc p{margin:10px 0 0; font-size:14.5px; color:var(--chalk-2); line-height:1.58} .arc-note{margin-top:26px; font-family:Archivo,sans-serif; font-weight:500; font-size:17px; letter-spacing:-.025em; color:var(--chalk); max-width:60ch} .measure{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:0; border-top:1px solid var(--rule); margin-top:36px} .measure > div{padding:30px 26px 32px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)} .measure > div:last-child{border-right:0} @media(max-width:820px){ .measure > div{border-right:0} } .measure .unit{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); display:block; margin-bottom:14px} .measure p{margin:10px 0 0; font-size:14.5px; color:var(--chalk-2); line-height:1.58} .people{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:0; border-top:1px solid var(--rule); margin-top:36px} .person{padding:30px 26px 32px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule); display:flex; flex-direction:column; gap:14px; transition:background .2s} .person:last-child{border-right:0} @media(max-width:920px){ .person{border-right:0} } .person:hover{background:var(--panel)} .avatar{width:62px; height:62px; border:1px solid var(--hair-dim); display:flex; align-items:center; justify-content:center; font-family:Archivo,sans-serif; font-weight:600; font-size:19px; letter-spacing:-.02em; color:var(--hair); border-radius:2px; position:relative; transition:border-color .2s, color .2s} .avatar::after{content:""; position:absolute; inset:5px; border:1px dashed var(--rule)} .person:hover .avatar{border-color:var(--hair); color:var(--chalk-2)} .person .nm{font-family:Archivo,sans-serif; font-weight:600; font-size:18px; letter-spacing:-.028em} .person .tt{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent-text); margin-top:3px} .person p{margin:0; font-size:14.5px; color:var(--chalk-2); line-height:1.58} .person .more{margin-top:auto; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--chalk-3); border-bottom:1px dashed var(--hair-dim); align-self:flex-start} .close{padding:80px 0; text-align:left} .close-grid{display:flex; justify-content:space-between; align-items:flex-end; gap:36px; flex-wrap:wrap} .foot{border-top:1px solid var(--rule); padding:48px 0 60px; background:var(--ink-2)} .foot-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:32px} .foot h4{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-3); margin:0 0 14px; font-weight:400} .foot ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} .foot a{font-size:13.5px; color:var(--chalk-2); text-decoration:none} .foot a:hover{color:var(--chalk)} .foot-base{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:44px; padding-top:24px; border-top:1px solid var(--rule); font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--chalk-3); letter-spacing:.05em} .disc{font-size:12px; color:var(--chalk-3); max-width:60ch; margin:16px 0 0; line-height:1.55} /* ---------------- modals ---------------- */ .modal{ position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; padding:28px 20px 40px; background:var(--scrim); backdrop-filter:blur(6px); overflow-y:auto; } .modal.open{display:flex} .sheet{ width:100%; max-width:620px; background:var(--ink); border:1px solid var(--rule); border-radius:3px; position:relative; box-shadow:var(--shadow); background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px); background-size:38px 38px; } .sheet-head{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:26px 28px 20px; border-bottom:1px solid var(--rule)} .sheet-title{display:flex; align-items:center; gap:12px} .sheet-title .badge{ width:38px; height:38px; border:1px solid var(--hair-dim); border-radius:2px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--orange); } .sheet-title .badge svg{width:19px; height:19px} .sheet-head h2{font-family:Archivo,sans-serif; font-weight:600; font-size:22px; letter-spacing:-.03em; margin:0} .sheet-head p{margin:10px 0 0; font-size:13.5px; color:var(--chalk-2); max-width:44ch; line-height:1.55} .x{background:none; border:1px solid var(--hair-dim); color:var(--chalk-2); width:32px; height:32px; border-radius:2px; cursor:pointer; font-size:16px; line-height:1; flex:none} .x:hover{color:var(--chalk); border-color:var(--hair)} .sheet-body{padding:24px 28px 8px} .sheet-foot{padding:18px 28px 26px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:20px} .flabel{ display:flex; align-items:center; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--chalk-3); margin:0 0 10px; } .flabel svg{width:14px; height:14px; flex:none; color:var(--hair)} .fgroup{margin-bottom:22px} .frow{display:grid; grid-template-columns:1fr 1fr; gap:14px} @media(max-width:560px){ .frow{grid-template-columns:1fr} } .seg{display:flex; gap:0; border:1px solid var(--hair-dim); border-radius:2px; overflow:hidden} .seg button{ flex:1; background:transparent; border:0; border-right:1px solid var(--hair-dim); color:var(--chalk-2); padding:11px 8px; cursor:pointer; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; gap:7px; } .seg button svg{width:14px; height:14px; flex:none} .seg button:last-child{border-right:0} .seg button:hover{color:var(--chalk); background:var(--panel)} .seg button[aria-pressed="true"]{background:var(--orange); color:var(--on-orange); font-weight:500} .days{display:flex; gap:8px; overflow-x:auto; padding-bottom:6px} .days button{ flex:none; min-width:74px; background:var(--panel); border:1px solid var(--hair-dim); border-radius:2px; padding:10px 6px; cursor:pointer; color:var(--chalk-2); display:flex; flex-direction:column; gap:3px; align-items:center; } .days button:hover{border-color:var(--hair); color:var(--chalk)} .days button[aria-pressed="true"]{border-color:var(--orange); background:rgba(240,105,30,.12); color:var(--chalk)} .days .dow{font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--chalk-3)} .days .dnum{font-family:Archivo,sans-serif; font-weight:600; font-size:17px; letter-spacing:-.02em} .days .dmon{font-family:"IBM Plex Mono",monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--chalk-3)} .slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px} .slots button{ background:var(--panel); border:1px solid var(--hair-dim); border-radius:2px; padding:10px 4px; cursor:pointer; color:var(--chalk-2); font-family:"IBM Plex Mono",monospace; font-size:12px; font-variant-numeric:tabular-nums; } .slots button:hover{border-color:var(--hair); color:var(--chalk)} .slots button[aria-pressed="true"]{border-color:var(--orange); background:rgba(240,105,30,.12); color:var(--chalk)} .inp, .ta{ width:100%; background:var(--panel); border:1px solid var(--hair-dim); border-radius:2px; color:var(--chalk); padding:11px 13px; font-family:inherit; font-size:14.5px; } .inp:focus, .ta:focus{outline:none; border-color:var(--orange)} .inp::placeholder, .ta::placeholder{color:var(--chalk-3); opacity:.7} .ta{min-height:82px; resize:vertical; line-height:1.55} .hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0} .tzline{font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--chalk-3); margin:12px 0 0; letter-spacing:.04em} .msg{font-size:13.5px; line-height:1.5; margin:0; flex:1 1 220px} .msg.err{color:var(--accent-text)} .msg.ok{color:var(--pass)} .msg.hint{color:var(--chalk-3); font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.04em} .done{padding:44px 28px 48px; text-align:center} .done .tick{ width:52px; height:52px; margin:0 auto 20px; border:1px solid var(--pass); border-radius:2px; display:flex; align-items:center; justify-content:center; color:var(--pass); } .done .tick svg{width:26px; height:26px} .done h3{font-family:Archivo,sans-serif; font-weight:600; font-size:21px; letter-spacing:-.03em; margin:0 0 12px} .done p{font-size:14.5px; color:var(--chalk-2); margin:0 auto; max-width:40ch; line-height:1.6} .done .detail{font-family:"IBM Plex Mono",monospace; font-size:12.5px; color:var(--chalk); margin-top:18px; letter-spacing:.04em} /* ---------------- reduced motion ---------------- Must come last, and must force revealed state visible. The blanket transition kill would otherwise strand .reveal children at opacity 0 and every traced rule at scaleX(0) — hiding the page from the people who asked for less movement. */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{animation:none !important; transition:none !important} html.js .reveal > *{opacity:1 !important; transform:none !important} html.js .icon .stroke-in{stroke-dashoffset:0 !important; stroke-dasharray:none !important} html.js .pick::before, html.js .g3::before, html.js .doors::before, html.js .arc::before, html.js .measure::before, html.js .people::before, html.js .pick::after{transform:scaleX(1) !important} .dgm .draw{stroke-dashoffset:0 !important} .dgm .fade{opacity:1 !important} html.js .dgm{cursor:default} .dgm-hint{display:none !important} }