/* ============================================================================ Smartclass360 — the public site. Concept: THE STUDIO CANVAS. The product is a presentation studio, so the site looks like you are standing inside it — a light canvas with faint guides, a real slide on white paper with the editor's own selection handles, and content that arrives with build-in animations the way an entrance animation arrives on a projector. Everything is on the application's own light surfaces. There is exactly one dark element on the entire site — the "blank the screen" demo — because a blanked screen is dark, and that is the point of it. ============================================================================ */ :root{ /* straight out of the application */ --paper: #FBFBFD; --surface: #FFFFFF; --surface-2:#F4F6F8; --wash: #EAF9F3; --wash-2: #F3FBF7; --ink: #0E0F13; --ink-2: #2E3440; --muted: #6E7683; --line: rgba(16,17,20,.09); --line-2: rgba(16,17,20,.17); --acc: #10B981; --acc-d: #047857; --acc-l: #34D399; --acc-xl: #A7F3D0; --laser: #EF4444; --shadow-s: 0 1px 2px rgba(16,17,20,.05), 0 6px 18px -14px rgba(16,17,20,.22); --shadow: 0 2px 6px -3px rgba(16,17,20,.08), 0 22px 44px -30px rgba(16,17,20,.28); --shadow-l: 0 6px 16px -10px rgba(16,17,20,.14), 0 44px 80px -46px rgba(4,120,87,.34); --r-s: 10px; --r: 16px; --r-l: 22px; --r-xl: 28px; --wrap: 1200px; --f-disp: 'Heebo', 'Assistant', system-ui, sans-serif; --f-body: 'Assistant', system-ui, -apple-system, sans-serif; --f-mono: 'IBM Plex Mono', ui-monospace, monospace; --ease: cubic-bezier(.22,.68,.28,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth} body.site{ margin:0; color:var(--ink); background:var(--paper); font-family:var(--f-body); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; /* MUST be clip, not hidden: overflow-x:hidden forces overflow-y to compute to auto, which turns into a scroll container — and then IntersectionObserver, whose root is the viewport, never sees anything scroll, so every build-in below the first screen stays invisible for ever. clip leaves the other axis visible. */ overflow-x:clip; } img,svg{max-width:100%} a{color:inherit} :focus-visible{outline:3px solid var(--acc); outline-offset:3px; border-radius:8px} .wrap{width:min(var(--wrap), calc(100% - 44px)); margin-inline:auto} .skip{position:absolute; inset-inline-start:-9999px; top:0; background:var(--acc); color:#04241B; padding:12px 20px; font-weight:800; border-radius:0 0 12px 12px; z-index:300} .skip:focus{inset-inline-start:16px} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none !important; transition-duration:.001ms !important} .bd{opacity:1 !important; transform:none !important; clip-path:none !important} } /* ---------------------- the canvas the whole site sits on ------------------ */ /* the studio's blueprint: a faint square grid with two emerald guides across it */ body.site::before{ content:''; position:fixed; inset:0; z-index:-2; pointer-events:none; background: radial-gradient(54% 42% at 84% -6%, rgba(16,185,129,.13), transparent 64%), radial-gradient(46% 36% at 2% 8%, rgba(52,211,153,.10), transparent 62%), var(--paper); } /* the guide grid belongs to the first screen only — below it the page is clean paper */ body.site::after{ content:''; position:absolute; inset:0 0 auto; height:96vh; z-index:-1; pointer-events:none; background: linear-gradient(rgba(16,17,20,.032) 1px, transparent 1px) 0 0/34px 34px, linear-gradient(90deg, rgba(16,17,20,.032) 1px, transparent 1px) 0 0/34px 34px; mask-image:linear-gradient(180deg, #000 30%, transparent 92%); } /* ---------------------------------- type ---------------------------------- */ h1,h2,h3,h4{font-family:var(--f-disp); font-weight:800; line-height:1.08; margin:0; text-wrap:balance; letter-spacing:-.025em} h1{font-size:clamp(2.6rem, 5.6vw, 4.4rem); font-weight:900} h2{font-size:clamp(1.9rem, 3.5vw, 2.9rem)} h3{font-size:1.18rem; letter-spacing:-.012em} p{margin:0} .lead{font-size:clamp(1.04rem,1.5vw,1.2rem); color:var(--muted); max-width:60ch; line-height:1.7} .kick{font-family:var(--f-mono); font-size:.73rem; font-weight:600; letter-spacing:.17em; text-transform:uppercase; color:var(--acc-d); display:inline-flex; align-items:center; gap:10px} .kick::before{content:''; width:20px; height:2px; background:var(--acc); border-radius:2px} /* --------------------------------- header --------------------------------- */ .hdr{position:sticky; top:0; z-index:200; background:rgba(251,251,253,.82); backdrop-filter:blur(16px) saturate(1.5); border-bottom:1px solid transparent; transition:.3s var(--ease)} .hdr.stuck{border-bottom-color:var(--line); box-shadow:var(--shadow-s)} .hdr-in{display:flex; align-items:center; gap:18px; height:72px} .logo{display:flex; align-items:center; gap:11px; text-decoration:none; font-family:var(--f-disp); font-weight:900; font-size:1.28rem; letter-spacing:-.035em; flex:none} .logo b{color:var(--acc-d)} .logo .mark{width:34px; height:34px; flex:none; border-radius:11px; background:linear-gradient(140deg,var(--acc-l),var(--acc-d)); display:grid; place-items:center; color:#fff; box-shadow:0 8px 18px -10px rgba(4,120,87,.9)} .logo .mark svg{width:20px; height:20px} .nav{display:flex; align-items:center; gap:2px; margin-inline-start:auto} .nav a{text-decoration:none; font-size:.95rem; font-weight:600; color:var(--muted); padding:9px 14px; border-radius:10px; transition:.2s var(--ease)} .nav a:hover{color:var(--ink); background:rgba(16,17,20,.05)} .nav a.lang{font-weight:700; color:var(--acc-d)} .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; font-family:var(--f-body); font-weight:800; font-size:1rem; padding:14px 26px; border-radius:13px; border:1px solid transparent; cursor:pointer; position:relative; transition:transform .18s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s} .btn:active{transform:translateY(1px) scale(.995)} .btn-acc{background:linear-gradient(140deg,var(--acc-l),var(--acc-d)); color:#fff; box-shadow:0 12px 26px -12px rgba(4,120,87,.75)} .btn-acc:hover{box-shadow:0 18px 34px -12px rgba(4,120,87,.85)} .btn-line{background:var(--surface); color:var(--ink); border-color:var(--line-2); box-shadow:var(--shadow-s)} .btn-line:hover{border-color:var(--acc); color:var(--acc-d)} .btn-sm{padding:9px 18px; font-size:.92rem; border-radius:11px} /* a nav link is more specific than a button class, so say it once and plainly */ .nav a.btn-acc,.nav a.btn-acc:hover{color:#fff; background:linear-gradient(140deg,var(--acc-l),var(--acc-d))} .burger{display:none; margin-inline-start:auto; background:none; border:0; color:var(--ink); padding:8px; cursor:pointer} @media (max-width:940px){ .burger{display:block} .nav{position:fixed; inset:72px 0 auto; margin:0; flex-direction:column; align-items:stretch; gap:2px; background:var(--surface); padding:14px 22px 24px; border-bottom:1px solid var(--line); box-shadow:var(--shadow); transform:translateY(-10px); opacity:0; pointer-events:none; transition:.25s var(--ease)} .nav.open{transform:none; opacity:1; pointer-events:auto} .nav a{padding:14px 8px; font-size:1.02rem} .nav .btn-sm{margin-top:10px; padding:15px} } /* ------------------------------ the sorter rail --------------------------- */ .rail{position:fixed; inset-inline-start:20px; top:50%; transform:translateY(-50%); z-index:150; display:flex; flex-direction:column; gap:8px; padding:13px 10px; border-radius:99px; background:rgba(255,255,255,.8); backdrop-filter:blur(12px); border:1px solid var(--line); box-shadow:var(--shadow-s)} @media (max-width:1240px){ .rail{display:none} } .rail a{position:relative; width:11px; height:11px; border-radius:4px; background:var(--line-2); transition:.35s var(--ease); text-decoration:none} .rail a::after{content:attr(data-n); position:absolute; inset-inline-start:22px; top:50%; transform:translateY(-50%) translateX(-6px); font-family:var(--f-mono); font-size:.65rem; font-weight:600; color:var(--muted); white-space:nowrap; opacity:0; transition:.25s var(--ease); pointer-events:none} .rail a:hover::after{opacity:1; transform:translateY(-50%)} .rail a:hover{background:var(--acc-l)} .rail a.on{background:var(--acc); height:24px; box-shadow:0 0 0 4px rgba(16,185,129,.15)} /* ------------------------------ slide sections ---------------------------- */ /* Rhythm: plain canvas, then a wash band, alternating — so the page has structure instead of a run of identical white boxes floating on white. */ .slide-sec{position:relative; padding:clamp(54px,7vw,92px) 0} .slide-sec.band{background:linear-gradient(180deg, var(--wash-2), var(--wash) 40%, var(--wash-2))} .slide-sec.band::before,.slide-sec.band::after{content:''; position:absolute; inset-inline:0; height:1px; background:rgba(4,120,87,.14)} .slide-sec.band::before{top:0} .slide-sec.band::after{bottom:0} .card{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow); padding:clamp(26px,4.2vw,58px)} .card > .num{position:absolute; top:16px; inset-inline-end:24px; font-family:var(--f-mono); font-size:.72rem; font-weight:600; color:var(--muted); letter-spacing:.1em} .card > .num b{color:var(--acc-d)} .card.keyed::before{content:''; position:absolute; inset-block:clamp(26px,4.2vw,58px); inset-inline-start:0; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--acc-l),var(--acc-d))} [dir=ltr] .card.keyed::before{border-radius:4px 0 0 4px} .sec-head{max-width:64ch; margin-bottom:clamp(24px,3.4vw,42px)} .sec-head h2{margin:14px 0 0} .sec-head .lead{margin-top:16px} /* ------------------------------ builds ------------------------------------ */ .bd{opacity:0; will-change:transform,opacity} .bd.in{opacity:1; transition:opacity .7s var(--ease), transform .7s var(--ease), clip-path .8s var(--ease)} .bd[data-b="up"] {transform:translateY(24px)} .bd[data-b="side"] {transform:translateX(30px)} [dir=ltr] .bd[data-b="side"]{transform:translateX(-30px)} .bd[data-b="zoom"] {transform:scale(.94)} /* the clip goes on the CHILDREN — never on the element the observer is watching */ .bd[data-b="wipe"] > *{clip-path:inset(0 0 100% 0); transition:clip-path .8s var(--ease)} .bd.in[data-b="wipe"] > *{clip-path:inset(0 0 0 0)} .bd[data-b="float"]{transform:translateY(34px) rotate(-1.2deg)} .bd.in[data-b]{transform:none} /* ---------------------------------- hero ---------------------------------- */ .hero{position:relative; padding:clamp(34px,5vw,66px) 0 clamp(54px,7vw,88px)} .hero-in{display:grid; grid-template-columns:.92fr 1.14fr; gap:clamp(28px,4vw,54px); align-items:center} @media (max-width:1020px){ .hero-in{grid-template-columns:1fr; gap:44px} } h1 .ln{display:block} h1 .hl{position:relative; color:var(--acc-d); white-space:nowrap} h1 .hl::after{content:''; position:absolute; inset-inline-start:-.05em; bottom:.04em; height:.3em; width:calc(100% + .1em); background:linear-gradient(90deg,var(--acc-xl),rgba(167,243,208,.4)); border-radius:.16em; z-index:-1; transform:scaleX(0); transform-origin:var(--o,right); animation:mark .95s .8s var(--ease) forwards} [dir=ltr] h1 .hl::after{--o:left} @keyframes mark{to{transform:scaleX(1)}} .hero .lead{margin-top:22px} .hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px} .hero-note{margin-top:18px; font-size:.86rem; color:var(--muted); font-family:var(--f-mono)} .chips{margin-top:30px; display:flex; gap:8px; flex-wrap:wrap} .chip{font-size:.82rem; font-weight:700; color:var(--acc-d); background:var(--wash); border:1px solid rgba(4,120,87,.2); padding:6px 13px; border-radius:99px; white-space:nowrap} .stage-wrap{ display:grid; grid-template-columns:1fr clamp(168px,21vw,202px); grid-template-areas:"screen phone" "class phone" "steps steps" "cap cap"; column-gap:clamp(12px,1.8vw,20px); row-gap:16px; align-items:start; padding-top:30px; } @media (max-width:1020px){ .stage-wrap{grid-template-columns:1fr clamp(158px,34vw,186px)} } @media (max-width:560px){ .stage-wrap{grid-template-columns:1fr; grid-template-areas:"screen" "phone" "class" "steps" "cap"} .dev{justify-self:center} } /* ------------------------------- the screen ------------------------------- */ .screen-unit{grid-area:screen; position:relative} /* The projector hangs centred above the screen, with the lens on its underside — so the lamp and the cone always start from the same place whichever way the page reads. Everything here is physical (left / 50%), never logical, because the clip-path below is physical too and the two must not disagree. */ .proj{position:absolute; top:-32px; left:50%; transform:translateX(-50%); width:58px; height:21px; z-index:4; border-radius:5px; background:linear-gradient(180deg,#4A525F,#2A313A); box-shadow:0 7px 13px -8px rgba(16,17,20,.55)} .proj::before{content:''; position:absolute; top:-15px; left:50%; transform:translateX(-50%); width:5px; height:15px; background:#4A525F; border-radius:2px} .proj::after{content:''; position:absolute; top:-18px; left:50%; transform:translateX(-50%); width:22px; height:4px; background:#39414D; border-radius:2px} .proj .lens{position:absolute; left:50%; transform:translateX(-50%); bottom:-6px; width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 50% 35%,#F2FEF9,#34D399 58%,#0B4A38); box-shadow:0 0 13px 5px rgba(52,211,153,.7)} /* the cone of light, its apex exactly under the lens */ .beam{position:absolute; z-index:3; pointer-events:none; top:-14px; left:50%; transform:translateX(-50%); width:100%; height:78%; background:linear-gradient(180deg, rgba(52,211,153,.22), rgba(52,211,153,0) 66%); clip-path:polygon(47.5% 0, 52.5% 0, 95% 100%, 5% 100%); } .casing{height:15px; border-radius:8px; margin:0 3%; position:relative; z-index:5; background:linear-gradient(180deg,#3C4551,#232A33); box-shadow:0 4px 10px -5px rgba(16,17,20,.5)} .casing::before,.casing::after{content:''; position:absolute; top:-10px; width:5px; height:10px; border-radius:2px 2px 0 0; background:#3C4551} .casing::before{inset-inline-start:15%} .casing::after{inset-inline-end:15%} .screen{position:relative; z-index:2; aspect-ratio:16/10; overflow:hidden; background:var(--surface); border:1px solid var(--line-2); border-top:0; box-shadow:0 20px 36px -26px rgba(16,17,20,.35)} .weight{height:10px; border-radius:0 0 5px 5px; margin:0 1.5%; position:relative; z-index:5; background:linear-gradient(180deg,#3C4551,#1F252D)} .screen-cap{margin-top:9px; text-align:center; font-family:var(--f-mono); font-size:.63rem; letter-spacing:.1em; color:var(--muted)} /* ---- the slide on the screen ---- */ .sl{position:absolute; inset:0; padding:clamp(17px,2.3vw,28px); display:flex; flex-direction:column; gap:clamp(8px,1.15vw,13px); opacity:0} .sl h4{font-family:var(--f-disp); font-weight:800; color:var(--ink); margin:0; font-size:clamp(1rem,1.8vw,1.45rem); line-height:1.2} .sl .rule{width:50px; height:4px; border-radius:3px; background:var(--acc); flex:none} .sl ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:clamp(6px,.95vw,11px)} .sl li{display:flex; align-items:flex-start; gap:9px; color:var(--ink-2); font-size:clamp(.72rem,1.02vw,.92rem); line-height:1.45} .sl li::before{content:''; flex:none; width:17px; height:17px; border-radius:6px; margin-top:1px; background:var(--wash) no-repeat center/10px 10px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047857' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.2 5.2L20 7'/%3E%3C/svg%3E")} .sl1{animation:mk1 16s infinite} .sl2{animation:mk2 16s infinite} @keyframes mk1{0%,32%{opacity:1;transform:none}38%,100%{opacity:0;transform:translateX(-30px)}} @keyframes mk2{0%,32%{opacity:0;transform:translateX(30px)}38%,100%{opacity:1;transform:none}} /* ---- the question, over the slide ---- */ .qpop{position:absolute; inset-inline-start:6%; bottom:8%; width:min(70%,286px); background:var(--surface); border:1px solid rgba(4,120,87,.4); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow); opacity:0; animation:mkq 16s infinite; z-index:4} @keyframes mkq{0%,62%{opacity:0;transform:translateY(12px) scale(.96)} 68%,94%{opacity:1;transform:none}100%{opacity:0;transform:translateY(12px) scale(.96)}} .qpop .k{font-family:var(--f-mono); font-size:.59rem; letter-spacing:.12em; color:var(--acc-d)} .qpop .t{font-weight:800; color:var(--ink); font-size:.87rem; margin:5px 0 8px; line-height:1.35} .qo{display:flex; align-items:center; gap:8px; font-size:.78rem; color:var(--muted); padding:6px 9px; border-radius:8px; background:var(--surface-2); margin-bottom:5px; position:relative; overflow:hidden} .qo i{width:6px; height:6px; border-radius:50%; background:currentColor; flex:none} .qo.hit{color:var(--ink); font-weight:700} .qo.hit::before{content:''; position:absolute; inset:0 auto 0 0; width:0; background:rgba(16,185,129,.26); animation:mkfill 16s infinite} @keyframes mkfill{0%,72%{width:0}84%,94%{width:76%}100%{width:0}} /* ------------------------- the instructor's phone ------------------------- */ /* the side keys stick 2px out of the bezel on purpose; the padding keeps that detail from counting as layout overflow */ .dev{grid-area:phone; align-self:start; position:relative; padding-inline:3px} .dev-lbl{display:block; text-align:center; font-size:.73rem; font-weight:800; color:var(--acc-d); margin-bottom:8px; line-height:1.25} /* a phone is about one wide to two tall — without that it reads as a toy */ .phone-body{position:relative; aspect-ratio:9/19; display:flex; flex-direction:column; border-radius:26px; padding:8px 6px 10px; background:linear-gradient(160deg,#3A424E,#1C222A); box-shadow:0 2px 0 rgba(255,255,255,.15) inset, 0 24px 40px -22px rgba(16,17,20,.6)} .phone-body::before{content:''; position:absolute; top:52px; inset-inline-start:-2px; width:2px; height:30px; border-radius:2px 0 0 2px; background:#2A313A} .phone-body::after{content:''; position:absolute; top:92px; inset-inline-start:-2px; width:2px; height:30px; border-radius:2px 0 0 2px; background:#2A313A} .phone-side{position:absolute; top:62px; inset-inline-end:-2px; width:2px; height:42px; border-radius:0 2px 2px 0; background:#2A313A} .notch{position:absolute; top:3px; left:50%; transform:translateX(-50%); width:44px; height:8px; border-radius:99px; background:#0E1319; z-index:3} .phone-scr{position:relative; flex:1; min-height:0; border-radius:20px; background:var(--surface); overflow:hidden; padding:16px 11px 11px; display:flex; flex-direction:column; gap:9px} .home-bar{display:block; width:42%; height:3px; border-radius:2px; background:#454D58; margin:8px auto 0} /* the remote, with only what matters — every line sized to be read */ .rm-top{display:flex; align-items:center; gap:5px; font-size:.6rem; font-weight:800; color:var(--acc-d)} .rm-top i{width:6px; height:6px; border-radius:50%; background:var(--acc); flex:none; animation:pulse 2.2s infinite} .rm-deck{font-size:.84rem; font-weight:800; color:var(--ink); line-height:1.2} .rm-pos{font-family:var(--f-mono); font-size:.66rem; color:var(--muted); margin-top:2px} .rm-note{flex:1; min-height:0; overflow:hidden; font-size:.72rem; line-height:1.55; color:var(--ink-2); border-top:1px solid var(--line); padding-top:9px} .rm-note em{display:block; font-family:var(--f-mono); font-size:.58rem; letter-spacing:.09em; color:var(--acc-d); font-style:normal; margin-bottom:4px} .rm-keys{display:flex; flex-direction:column; gap:6px; margin-top:auto} .rm-key{display:flex; align-items:center; justify-content:center; gap:5px; border-radius:11px; font-size:.8rem; font-weight:800; padding:11px 6px; background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-2)} .rm-key.go{background:linear-gradient(140deg,var(--acc-l),var(--acc-d)); color:#fff; border-color:transparent; animation:mkpress 16s infinite} @keyframes mkpress{0%,26%{transform:none; box-shadow:0 0 0 0 rgba(16,185,129,0)} 30%{transform:scale(.93); box-shadow:0 0 0 9px rgba(16,185,129,.24)} 34%,100%{transform:none; box-shadow:0 0 0 0 rgba(16,185,129,0)}} .rm-row{display:flex; gap:6px} .rm-row .rm-key{flex:1; font-size:.7rem; padding:9px 4px} .rm-sent{font-size:.66rem; font-weight:800; color:var(--acc-d); text-align:center; opacity:0; animation:mksent 16s infinite} @keyframes mksent{0%,66%{opacity:0}72%,94%{opacity:1}100%{opacity:0}} /* the tap, so the press is unmistakable */ .tapdot{position:absolute; inset-inline:0; top:calc(100% - 104px); z-index:6; display:grid; place-items:center; pointer-events:none} .tapdot i{width:28px; height:28px; border-radius:50%; border:2px solid var(--acc); opacity:0; animation:mktap 16s infinite} @keyframes mktap{0%,27%{opacity:0; transform:scale(.4)}31%{opacity:.9; transform:scale(1)} 38%,100%{opacity:0; transform:scale(2)}} /* the control link, drawn at the moment of the press */ .linkline{grid-area:screen; align-self:end; justify-self:end; position:relative; width:100%; height:0; z-index:6; overflow:visible; pointer-events:none} .linkline svg{position:absolute; inset-inline-end:-14px; bottom:64px; width:clamp(20px,3vw,34px); height:10px; overflow:visible} @media (max-width:560px){ .linkline{display:none} } .linkline path{fill:none; stroke:var(--acc); stroke-width:2; stroke-linecap:round; stroke-dasharray:5 5; opacity:0; animation:mkline 16s infinite} @keyframes mkline{0%,27%{opacity:0}31%,38%{opacity:.9}44%,100%{opacity:0}} /* ------------------------------- the class -------------------------------- */ .class{grid-area:class; opacity:0; animation:mkclass 16s infinite} @keyframes mkclass{0%,64%{opacity:0; transform:translateY(8px)}70%,94%{opacity:1; transform:none} 100%{opacity:0; transform:translateY(8px)}} .class-box{display:flex; align-items:center; gap:13px; padding:11px 14px; border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-s)} .class-row{display:flex; align-items:flex-end; gap:7px; flex:none} .mini{background:var(--surface); border:1px solid var(--line-2); position:relative} .mini.ph{width:22px; height:38px; border-radius:5px; padding:4px 3px} .mini.lap{width:44px; height:29px; border-radius:4px 4px 0 0; padding:4px} .mini.lap::after{content:''; position:absolute; inset-inline:-6px; bottom:-4px; height:4px; border-radius:0 0 4px 4px; background:var(--line-2)} .mini b{display:block; height:3px; border-radius:2px; background:var(--line-2); margin-bottom:3px} .mini b.on{background:var(--acc)} .mini.ph b:nth-of-type(1){width:80%} .mini.ph b:nth-of-type(2){width:60%} .mini.lap b:nth-of-type(1){width:70%} .mini.lap b:nth-of-type(2){width:88%} .mini .tick{position:absolute; inset-inline-end:2px; bottom:2px; width:10px; height:10px; border-radius:50%; background:var(--acc); transform:scale(0); animation:mktick 16s infinite; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.6 4.6L19 7.5'/%3E%3C/svg%3E"); background-size:7px 7px; background-repeat:no-repeat; background-position:center} .mini:nth-child(2) .tick{animation-delay:.35s} .mini:nth-child(3) .tick{animation-delay:.7s} @keyframes mktick{0%,68%{transform:scale(0)}74%,94%{transform:scale(1)}100%{transform:scale(0)}} .class-cap{font-size:.76rem; font-weight:700; color:var(--ink-2); line-height:1.35; min-width:0} .class-cap span{display:block; font-family:var(--f-mono); font-size:.66rem; color:var(--acc-d); margin-top:3px} /* --------------------------- the caption strip ---------------------------- */ .steps3{grid-area:steps; display:flex; gap:7px; flex-wrap:wrap} .st3{flex:1 1 0; min-width:0; display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:11px; background:var(--surface); border:1px solid var(--line); font-size:.72rem; font-weight:700; color:var(--muted); line-height:1.25} .st3 i{flex:none; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; background:var(--surface-2); color:var(--muted); font-family:var(--f-mono); font-size:.55rem; font-weight:600} .st3.a1{animation:mkst1 16s infinite} .st3.a1 i{animation:mkdot1 16s infinite} .st3.a2{animation:mkst2 16s infinite} .st3.a2 i{animation:mkdot2 16s infinite} .st3.a3{animation:mkst3 16s infinite} .st3.a3 i{animation:mkdot3 16s infinite} @keyframes mkst1{0%,24%{background:var(--wash);border-color:rgba(4,120,87,.35);color:var(--acc-d)} 32%,100%{background:var(--surface);border-color:var(--line);color:var(--muted)}} @keyframes mkst2{0%,30%{background:var(--surface);border-color:var(--line);color:var(--muted)} 36%,60%{background:var(--wash);border-color:rgba(4,120,87,.35);color:var(--acc-d)} 66%,100%{background:var(--surface);border-color:var(--line);color:var(--muted)}} @keyframes mkst3{0%,64%{background:var(--surface);border-color:var(--line);color:var(--muted)} 70%,94%{background:var(--wash);border-color:rgba(4,120,87,.35);color:var(--acc-d)} 100%{background:var(--surface);border-color:var(--line);color:var(--muted)}} @keyframes mkdot1{0%,24%{background:var(--acc);color:#fff}32%,100%{background:var(--surface-2);color:var(--muted)}} @keyframes mkdot2{0%,30%{background:var(--surface-2);color:var(--muted)}36%,60%{background:var(--acc);color:#fff}66%,100%{background:var(--surface-2);color:var(--muted)}} @keyframes mkdot3{0%,64%{background:var(--surface-2);color:var(--muted)}70%,94%{background:var(--acc);color:#fff}100%{background:var(--surface-2);color:var(--muted)}} .mock-cap{grid-area:cap; margin:0; font-size:.82rem; color:var(--muted); text-align:center} /* ------------------------------- the "today" ------------------------------ */ .pains{display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden} @media (max-width:760px){ .pains{grid-template-columns:1fr} } .pain{background:var(--surface); padding:26px 26px 24px; transition:.3s var(--ease)} .pain:hover{background:var(--surface-2)} .pain .x{width:30px; height:30px; border-radius:9px; background:rgba(239,68,68,.1); color:#D33F3A; display:grid; place-items:center; font-weight:900; margin-bottom:12px} .pain h3{margin-bottom:7px} .pain p{color:var(--muted); font-size:.96rem} /* -------------------------------- the turn -------------------------------- */ .turn{text-align:center} .turn h2{max-width:19ch; margin-inline:auto} .turn .lead{margin:22px auto 0; text-align:center} .arc{display:block; margin:24px auto 0; width:min(340px,70%); height:auto; overflow:visible} .arc path{fill:none; stroke:var(--acc); stroke-width:3; stroke-linecap:round; stroke-dasharray:420; stroke-dashoffset:420} .arc.in path{animation:draw 1.4s .2s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}} /* ---------------------------- feature gallery ----------------------------- */ .grp{margin-top:clamp(28px,3.6vw,48px)} .grp-h{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:18px} .grp-h h3{font-size:1.3rem} .grp-h .n{font-family:var(--f-mono); font-size:.68rem; font-weight:600; letter-spacing:.1em; color:var(--acc-d); background:var(--wash); border:1px solid rgba(4,120,87,.2); border-radius:99px; padding:3px 10px} .grp-h .r{flex:1; height:1px; background:var(--line); min-width:30px} .grp-h span.s{font-size:.86rem; color:var(--muted)} .fgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:15px} @media (max-width:1000px){ .fgrid{grid-template-columns:repeat(2,1fr)} } @media (max-width:660px){ .fgrid{grid-template-columns:1fr} } .f{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease)} .f:hover{transform:translateY(-4px); border-color:rgba(4,120,87,.38); box-shadow:var(--shadow)} .f h4{font-family:var(--f-body); font-weight:800; font-size:1.02rem; letter-spacing:0} .f p{color:var(--muted); font-size:.92rem; line-height:1.58} .f .save{margin-top:auto; padding-top:11px; border-top:1px dashed var(--line); font-size:.87rem; font-weight:700; color:var(--acc-d)} .f .save small{display:block; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.13em; color:var(--muted); font-weight:600; margin-bottom:3px} .demo{height:74px; border-radius:11px; background:var(--surface-2); border:1px solid var(--line); position:relative; overflow:hidden; flex:none} .f:hover .demo{border-color:rgba(4,120,87,.28)} /* — bars that grow (charts) */ .d-bars{display:flex; align-items:flex-end; gap:7px; height:100%; padding:11px 13px} .d-bars i{flex:1; height:100%; border-radius:4px 4px 0 0; background:var(--acc); transform-origin:bottom; transform:scaleY(.3); animation:bars 3.4s var(--ease) infinite} .d-bars i:nth-child(2){background:var(--acc-l); animation-delay:.14s} .d-bars i:nth-child(3){background:var(--acc-d); animation-delay:.28s} .d-bars i:nth-child(4){background:var(--acc-l); animation-delay:.42s} @keyframes bars{0%{transform:scaleY(.3)}35%,70%{transform:scaleY(1)}100%{transform:scaleY(.3)}} /* — a slide advancing (engine / transitions) */ .d-slides{position:absolute; inset:10px; border-radius:8px; background:var(--surface); border:1px solid var(--line); overflow:hidden} .d-slides i{position:absolute; inset:0; padding:10px; display:block; opacity:0} .d-slides i::before{content:''; display:block; width:46%; height:6px; border-radius:3px; background:var(--acc); margin-bottom:7px} .d-slides i::after{content:''; display:block; width:74%; height:5px; border-radius:3px; background:var(--line-2)} .d-slides i:nth-child(1){animation:dsA 3.6s infinite} .d-slides i:nth-child(2){animation:dsB 3.6s infinite} @keyframes dsA{0%,42%{opacity:1;transform:none}52%,100%{opacity:0;transform:translateX(-22px)}} @keyframes dsB{0%,46%{opacity:0;transform:translateX(22px)}56%,96%{opacity:1;transform:none}100%{opacity:0}} /* — a cursor editing (studio) */ .d-edit{position:absolute; inset:11px; border-radius:8px; border:1.5px dashed rgba(4,120,87,.5); background:var(--surface)} .d-edit b{position:absolute; width:9px; height:9px; border-radius:2px; background:var(--acc); border:1.5px solid #fff} .d-edit b:nth-child(1){top:-5px; inset-inline-start:-5px} .d-edit b:nth-child(2){top:-5px; inset-inline-end:-5px} .d-edit b:nth-child(3){bottom:-5px; inset-inline-start:-5px} .d-edit b:nth-child(4){bottom:-5px; inset-inline-end:-5px} .d-edit i{position:absolute; bottom:16%; inset-inline-end:18%; width:13px; height:17px; background:var(--ink-2); clip-path:polygon(0 0,0 100%,28% 76%,48% 100%,64% 90%,44% 66%,78% 60%); animation:cur 3.2s var(--ease) infinite} @keyframes cur{0%,100%{transform:translate(0,0)}35%{transform:translate(16px,-14px)}70%{transform:translate(-9px,5px)}} /* — a phone tapping (remote / trainee) */ .d-phone{position:absolute; inset:7px auto 7px 50%; transform:translateX(-50%); width:36px; border-radius:9px; background:var(--surface); border:1px solid var(--line-2)} .d-phone i{position:absolute; inset-inline:5px; height:5px; border-radius:3px; background:var(--line-2)} .d-phone i:nth-child(1){top:8px} .d-phone i:nth-child(2){top:17px; width:58%} .d-phone i:nth-child(3){bottom:9px; background:var(--acc); animation:tapp 2.6s infinite} @keyframes tapp{0%,60%{opacity:.5}70%,84%{opacity:1}100%{opacity:.5}} .d-ring{position:absolute; inset:0; margin:auto; width:26px; height:26px; border-radius:50%; border:2px solid var(--acc); opacity:0; animation:ring 2.6s infinite} @keyframes ring{0%,62%{opacity:0;transform:scale(.4)}72%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}} /* — rows syncing (timetable) */ .d-rows{padding:11px 13px; display:flex; flex-direction:column; gap:7px; height:100%; justify-content:center} .d-rows i{height:8px; border-radius:4px; background:var(--line-2); transform-origin:right} [dir=ltr] .d-rows i{transform-origin:left} .d-rows i:nth-child(1){animation:row 3s infinite} .d-rows i:nth-child(2){animation:row 3s .18s infinite} .d-rows i:nth-child(3){animation:row 3s .36s infinite} @keyframes row{0%{background:var(--line-2);transform:scaleX(.55)}40%,80%{background:var(--acc);transform:scaleX(1)}100%{background:var(--line-2);transform:scaleX(.55)}} /* — the screen going dark. The ONE dark thing on the site, and deliberately so. */ .d-black{position:absolute; inset:10px; border-radius:8px; background:var(--surface); border:1px solid var(--line); overflow:hidden} .d-black i{position:absolute; inset:9px; display:block} .d-black i::before{content:''; display:block; width:52%; height:6px; border-radius:3px; background:var(--acc)} .d-black i::after{content:''; display:block; width:76%; height:5px; border-radius:3px; background:var(--line-2); margin-top:7px} .d-black::after{content:''; position:absolute; inset:0; background:#12161C; transform:translateY(-101%); animation:blk 3.4s var(--ease) infinite} @keyframes blk{0%,25%{transform:translateY(-101%)}40%,72%{transform:none}90%,100%{transform:translateY(-101%)}} /* — ink strokes (annotation) */ .d-ink{position:absolute; inset:0} .d-ink path{fill:none; stroke:var(--laser); stroke-width:3; stroke-linecap:round; stroke-dasharray:200; stroke-dashoffset:200; animation:inked 3.6s var(--ease) infinite} @keyframes inked{0%{stroke-dashoffset:200}45%,75%{stroke-dashoffset:0}100%{stroke-dashoffset:200}} /* — a shield ticking (security) */ .d-shield{position:absolute; inset:0; display:grid; place-items:center} .d-shield svg{width:38px; height:38px; overflow:visible} .d-shield .bg{fill:var(--wash); stroke:var(--acc); stroke-width:1.6} .d-shield .tk{fill:none; stroke:var(--acc-d); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:26; stroke-dashoffset:26; animation:tick 3s var(--ease) infinite} @keyframes tick{0%{stroke-dashoffset:26}40%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:26}} /* — people joining */ .d-people{display:flex; align-items:center; justify-content:center; gap:8px; height:100%} .d-people i{width:16px; height:16px; border-radius:50%; background:var(--wash); border:2px solid var(--acc); transform:scale(0); animation:join 3.2s var(--ease) infinite} .d-people i:nth-child(2){animation-delay:.2s} .d-people i:nth-child(3){animation-delay:.4s} .d-people i:nth-child(4){animation-delay:.6s} .d-people i:nth-child(5){animation-delay:.8s} @keyframes join{0%{transform:scale(0)}30%,78%{transform:scale(1)}100%{transform:scale(0)}} /* — pages printing */ .d-print{position:absolute; inset:0; display:grid; place-items:center} .d-print i{position:absolute; width:32px; height:42px; border-radius:5px; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-s); animation:page 3.4s var(--ease) infinite} .d-print i:nth-child(2){animation-delay:.35s} .d-print i:nth-child(3){animation-delay:.7s} @keyframes page{0%{transform:translateY(15px) rotate(0);opacity:0} 30%,60%{transform:translateY(-2px) rotate(-4deg);opacity:1}100%{transform:translateY(-17px) rotate(-9deg);opacity:0}} /* — a share link */ .d-link{position:absolute; inset:0; display:grid; place-items:center} .d-link .pill{font-family:var(--f-mono); font-size:.6rem; color:var(--acc-d); background:var(--wash); border:1px solid rgba(4,120,87,.25); border-radius:99px; padding:5px 11px; animation:pillp 3s var(--ease) infinite} @keyframes pillp{0%,100%{transform:scale(.94);opacity:.6}45%,70%{transform:scale(1);opacity:1}} /* — a beam crossing (speed) */ .d-bolt{position:absolute; inset:0; overflow:hidden; display:grid; place-items:center} .d-bolt::before{content:''; position:absolute; inset:0; background:linear-gradient(105deg,transparent 30%,rgba(16,185,129,.32) 48%,transparent 66%); animation:beam 2.6s var(--ease) infinite} @keyframes beam{0%{transform:translateX(-110%)}55%,100%{transform:translateX(110%)}} .d-bolt i{width:24px; height:24px; background:var(--acc); clip-path:polygon(52% 0,18% 56%,45% 56%,38% 100%,80% 42%,52% 42%)} /* — a video playing */ .d-play{position:absolute; inset:10px; border-radius:8px; background:var(--surface); border:1px solid var(--line); display:grid; place-items:center} .d-play i{width:0; height:0; border-inline-start:15px solid var(--acc); border-block:9px solid transparent; margin-inline-start:4px; animation:beat 2.4s var(--ease) infinite} [dir=ltr] .d-play i{border-inline-start:0; border-inline-end:15px solid var(--acc)} @keyframes beat{0%,100%{transform:scale(.88);opacity:.7}50%{transform:scale(1.08);opacity:1}} .d-play b{position:absolute; inset-inline:11px; bottom:10px; height:4px; border-radius:3px; background:var(--line-2); overflow:hidden} .d-play b::after{content:''; position:absolute; inset:0 auto 0 0; width:0; background:var(--acc); animation:prog 2.4s linear infinite} @keyframes prog{to{width:100%}} /* — a glow blooming (effects) */ .d-glow{position:absolute; inset:0; display:grid; place-items:center} .d-glow i{width:32px; height:32px; border-radius:10px; background:var(--acc); animation:bloom 2.8s var(--ease) infinite} @keyframes bloom{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}50%{box-shadow:0 0 20px 6px rgba(16,185,129,.45)}} /* — a slide sorter grid */ .d-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:1fr; gap:5px; padding:11px 13px; height:100%} .d-grid i{border-radius:4px; background:var(--surface); border:1px solid var(--line-2); animation:cell 3.2s var(--ease) infinite} .d-grid i:nth-child(2){animation-delay:.1s} .d-grid i:nth-child(3){animation-delay:.2s} .d-grid i:nth-child(4){animation-delay:.3s} .d-grid i:nth-child(5){animation-delay:.4s} .d-grid i:nth-child(6){animation-delay:.5s} .d-grid i:nth-child(7){animation-delay:.6s} .d-grid i:nth-child(8){animation-delay:.7s} @keyframes cell{0%,100%{background:var(--surface);border-color:var(--line-2)} 40%,70%{background:var(--wash);border-color:var(--acc)}} /* — a bell ringing */ .d-bell{position:absolute; inset:0; display:grid; place-items:center} .d-bell i{width:21px; height:21px; border-radius:10px 10px 4px 4px; background:var(--acc); position:relative; transform-origin:top; animation:ring2 2.8s var(--ease) infinite} .d-bell i::after{content:''; position:absolute; inset-inline:-5px; bottom:-4px; height:3px; border-radius:2px; background:var(--acc-d)} @keyframes ring2{0%,60%,100%{transform:rotate(0)}66%{transform:rotate(13deg)}72%{transform:rotate(-11deg)} 78%{transform:rotate(8deg)}84%{transform:rotate(-5deg)}} .d-bell b{position:absolute; top:26%; inset-inline-end:34%; width:9px; height:9px; border-radius:50%; background:var(--laser); transform:scale(0); animation:badge 2.8s var(--ease) infinite} @keyframes badge{0%,58%{transform:scale(0)}68%,92%{transform:scale(1)}100%{transform:scale(0)}} /* --------------------------------- numbers -------------------------------- */ .nums{display:grid; grid-template-columns:repeat(4,1fr); gap:14px} @media (max-width:780px){ .nums{grid-template-columns:repeat(2,1fr)} } .nm{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 18px; text-align:center} .nm .v{font-family:var(--f-disp); font-weight:900; font-size:clamp(1.6rem,2.8vw,2.3rem); color:var(--acc-d); font-variant-numeric:tabular-nums; letter-spacing:-.035em} .nm .l{font-size:.87rem; color:var(--muted); margin-top:5px; line-height:1.45} /* ---------------------------------- steps --------------------------------- */ .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(14px,2.4vw,24px); counter-reset:s} @media (max-width:820px){ .steps{grid-template-columns:1fr} } .step{counter-increment:s; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 22px; position:relative} .step::before{content:counter(s,decimal-leading-zero); font-family:var(--f-mono); font-size:.75rem; font-weight:600; color:var(--acc-d); letter-spacing:.12em; display:block; margin-bottom:10px} .step h3{margin-bottom:7px; font-size:1.06rem} .step p{color:var(--muted); font-size:.94rem} /* --------------------------------- closing -------------------------------- */ .close{text-align:center; background:linear-gradient(160deg,var(--wash),var(--surface) 65%); border-color:rgba(4,120,87,.25)} .close h2{max-width:21ch; margin-inline:auto} .close .lead{margin:20px auto 30px; text-align:center} /* --------------------------------- footer --------------------------------- */ .ftr{margin-top:clamp(36px,5vw,72px); padding:54px 0 28px; border-top:1px solid var(--line); background:var(--surface)} .ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px} @media (max-width:820px){ .ftr-grid{grid-template-columns:1fr 1fr} } @media (max-width:520px){ .ftr-grid{grid-template-columns:1fr} } .ftr h4{font-family:var(--f-mono); font-size:.68rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin:0 0 14px; font-weight:600} .ftr ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px} .ftr a{text-decoration:none; font-size:.93rem; color:var(--ink-2); transition:.2s} .ftr a:hover{color:var(--acc-d)} .ftr .tag{font-size:.93rem; color:var(--muted); max-width:34ch; margin-top:14px} .ftr-btm{margin-top:38px; padding-top:20px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:.84rem; color:var(--muted)} /* ------------------------------- inner pages ------------------------------ */ .page-head{padding:clamp(38px,5.5vw,68px) 0 clamp(10px,1.6vw,18px)} .page-head h1{font-size:clamp(2.1rem,4.2vw,3.2rem)} .prose{max-width:74ch; font-size:1.02rem} .prose h2{font-size:clamp(1.32rem,2.2vw,1.7rem); margin:34px 0 12px} .prose h3{margin:22px 0 8px; font-size:1.08rem} .prose p{margin:0 0 15px; color:var(--ink-2)} .prose ul,.prose ol{margin:0 0 15px; padding-inline-start:22px; color:var(--ink-2)} .prose li{margin-bottom:7px} .prose strong{color:var(--ink)} .prose a{color:var(--acc-d); font-weight:700} .note{background:var(--wash); border-inline-start:3px solid var(--acc); border-radius:0 12px 12px 0; padding:14px 18px; margin:0 0 26px; font-size:.94rem; color:var(--ink-2)} [dir=ltr] .note{border-radius:12px 0 0 12px} .upd{font-family:var(--f-mono); font-size:.79rem; color:var(--muted); margin-bottom:24px} /* ---------------------------------- forms --------------------------------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3.6vw,46px); align-items:start} @media (max-width:920px){ .split{grid-template-columns:1fr} } .form-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(22px,3.4vw,36px); box-shadow:var(--shadow)} .form-grid{display:grid; grid-template-columns:1fr 1fr; gap:15px} @media (max-width:620px){ .form-grid{grid-template-columns:1fr} } .field{display:flex; flex-direction:column; gap:6px} .field.full{grid-column:1/-1} .field label{font-weight:700; font-size:.9rem} .field .req{color:var(--acc-d)} .field input,.field select,.field textarea{font-family:inherit; font-size:1rem; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:12px; padding:13px 15px; width:100%; transition:border-color .18s, box-shadow .18s} .field textarea{min-height:140px; resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 4px rgba(16,185,129,.14)} .field .err{color:#B4302B; font-size:.85rem; font-weight:600} .field [aria-invalid="true"]{border-color:#B4302B} .form-note{margin-top:18px; font-size:.8rem; line-height:1.55; color:var(--muted)} /* the Turnstile widget renders itself into here; it needs room, not styling */ .guard{margin-top:16px; display:flex; flex-direction:column; gap:8px; min-height:65px} .form-note a{color:var(--acc-d); font-weight:700} .hp{position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden} .ok-msg{background:var(--wash); border:1px solid rgba(4,120,87,.4); color:#065F46; border-radius:13px; padding:15px 19px; font-weight:700; margin-bottom:22px} .err-msg{background:rgba(180,48,43,.06); border:1px solid rgba(180,48,43,.28); color:#96221E; border-radius:13px; padding:14px 18px; font-weight:700; margin-bottom:20px} .ticks{list-style:none; margin:22px 0 0; padding:0; display:flex; flex-direction:column; gap:12px} .ticks li{display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--ink-2)} .ticks li::before{content:'✓'; flex:none; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--wash); color:var(--acc-d); font-weight:900; font-size:.8rem} .contact-lines{list-style:none; margin:20px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; font-weight:700} .contact-lines a{text-decoration:none; color:var(--acc-d)}