/* ============================================================ AI VISIBILITY TOOLKIT — design tokens THREE SIGNALS, THREE MEANINGS. Do not mix them. --cite #FFB84D amber ACTION + CITATION: buttons, highlighter, source cards --live #50D5FF cyan MACHINE: crawler chips, live dots, score dials --brand #2563EB blue body-copy links only Diagnostic states are separate and scoped to the checker UI, where they are computed from a real score: --good green, --warn amber, --crit red. They never appear as brand colour, which is why an amber button does not read as a warning. Ratio, roughly: 90% navy and off-white, 8% amber, 2% cyan. The cyan is deliberately scarce — it stops reading as "machine" the moment it is common. Surfaces: navy #0F172A for "inside the AI answer", off-white #F8FAFC for "the open web". Type is Manrope, with IBM Plex Mono for code and data. ============================================================ */ :root{ /* Light base. Dark is reserved for "islands" where technical matters: the demo panel, the crawler monitor, score previews, code, the footer. */ --ink:#F8FAFC; /* page surface */ --ink-2:#FFFFFF; /* cards */ --ink-3:#EEF4FF; /* feature bands */ --mineral:#1F2937; /* body text */ --mineral-2:#E2E8F0; /* borders */ --mineral-3:#FFFFFF; /* card fills */ --navy:#234775; --brand:#234775; --brand-lift:#6AB4FF; --brand-soft:#EAF3FF; --blue:#6AB4FF; --blue-deep:#1A5FB4; --blue-soft:#EAF3FF; --cite:#F6B534; --cite-deep:#234775; --cite-soft:#FEF6E6; --lav:#E2D6FF; --lav-deep:#6941C6; --lav-soft:#F6F2FF; --mint:#C7F1DD; --mint-deep:#0B7A52; --mint-soft:#EDFBF4; --charcoal:#1F2937; --live:#6AB4FF; --live-dim:#1A5FB4; --green:#C7F1DD; --green-deep:#0B7A52; --green-soft:#EDFBF4; --sky:#6AB4FF; --sky-deep:#1A5FB4; --sky-soft:#EAF3FF; --good:#0B7A52; --warn:#234775; --crit:#D92D20; --accent:#1E3A8A; --haze:#4B5768; --slate:#4B5768; --moss:#64748B; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --serif:"Manrope",system-ui,-apple-system,sans-serif; --pad:clamp(20px,5vw,72px); --maxw:1240px; --readw:720px; } /* ---- DARK ISLANDS ---------------------------------------------------- Anything in this list gets the dark token set, and its children inherit. Add a component here rather than writing per-element overrides. */ section.dark, .ticker, .code, pre.code{ --ink:#0B1B33; --ink-2:#10233F; --ink-3:#1A3255; --mineral:#F8FAFC; --mineral-2:rgba(168,179,197,.22); --mineral-3:#14294A; --haze:#A8B3C5; --slate:#A8B3C5; --accent:#50D5FF; --good:#2ED47A; --warn:#FFB84D; --crit:#FF5C6C; } section.dark{background:var(--ink);color:var(--mineral)} section.dark .h2,section.dark .lt,section.dark .dir-n,section.dark .pil-t{color:#fff} section.dark .lede,section.dark .dir-x,section.dark .eyebrow,section.dark .pil-d{color:var(--haze)} /* feature bands — the pale blue that separates without going dark */ section.feature{background:var(--ink-3)} /* ============================================================ BASE — reset, layout, type, buttons, navigation. ============================================================ */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--ink);color:var(--mineral); font-family:var(--serif);font-size:18px;line-height:1.65;letter-spacing:-.005em; -webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit} img{max-width:100%;height:auto} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)} .read{max-width:var(--readw)} .skip{position:absolute;left:-9999px} .skip:focus{left:var(--pad);top:10px;z-index:99;background:var(--cite);color:#08111F; padding:10px 16px;font-family:var(--mono);font-size:12px;border-radius:6px} /* ---- type ---- */ .eyebrow{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--slate);display:flex;align-items:center;gap:10px;margin:0 0 22px} .eyebrow::before{content:"";width:26px;height:1px;background:var(--cite-deep);flex:none} .h1{font-family:var(--serif);font-weight:800;font-size:clamp(38px,6.4vw,72px); line-height:1.02;letter-spacing:-.04em;margin:0 0 22px;color:var(--mineral)} .h2{font-family:var(--serif);font-weight:800;font-size:clamp(28px,4vw,44px); line-height:1.08;letter-spacing:-.035em;margin:0 0 18px;color:var(--mineral)} .lede{font-size:clamp(18px,1.5vw,21px);line-height:1.6;color:var(--slate);max-width:56ch;margin:0 0 32px} .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase} /* ---- buttons ---- */ .btn{font-family:var(--serif);font-size:14px;font-weight:700;letter-spacing:-.01em; display:inline-flex;align-items:center;gap:9px;padding:15px 26px;text-decoration:none; border:1px solid transparent;cursor:pointer} .btn:hover{transform:translateY(-2px)} .btn-cite{background:var(--cite);color:#08111F;border-color:var(--cite)} .btn-cite:hover{background:#FFC96B;color:#08111F} .btn-ghost{border-color:var(--line,#E6EBF1);color:var(--mineral);background:#fff} .btn:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{ outline:2px solid var(--brand);outline-offset:3px} /* ---- navigation ---- */ header.nav{position:sticky;top:0;z-index:60;background:rgba(248,250,252,.88); backdrop-filter:blur(14px);border-bottom:1px solid var(--line,#E6EBF1)} .nav-in{display:flex;align-items:center;gap:30px;height:72px} .brand{display:flex;align-items:center;gap:11px;text-decoration:none;font-family:var(--serif); font-weight:800;font-size:14px;letter-spacing:-.02em;color:var(--mineral);white-space:nowrap} .brand .mk{width:26px;height:26px;border:1px solid var(--cite-deep);border-radius:7px; display:grid;place-items:center;color:var(--cite-deep);font-size:12px;line-height:1;flex:none} .nav-links{display:flex;gap:24px;margin-left:auto;font-family:var(--serif); font-size:14px;font-weight:600;letter-spacing:-.01em} .nav-links a{text-decoration:none;color:var(--slate);padding-block:6px;border-bottom:1px solid transparent} .nav-links a:hover,.nav-links a[aria-current]{color:var(--mineral);border-color:var(--live-dim)} .nav .btn{padding:11px 18px;font-size:13px} @media(max-width:960px){.nav-links{display:none}.nav .btn-cite{display:none}} /* ---- breadcrumb + page header ---- */ .crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--slate);padding-top:30px} .crumb a{text-decoration:none} .crumb a:hover{color:var(--live-dim)} .crumb span{opacity:.5;margin:0 8px} .phead{padding:clamp(26px,4vw,44px) 0 clamp(34px,5vw,58px)} .phead .lede{margin-bottom:0} .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--slate); margin-top:22px;display:flex;gap:18px;flex-wrap:wrap} /* ---- section frames ---- */ section{padding:clamp(56px,7.5vw,104px) 0} section.tight{padding-block:clamp(40px,5vw,64px)} /* section.light is retained as an alias for the pale feature band, so existing markup keeps working. New sections should use .feature or .dark. */ section.light{background:var(--ink-3)} .sec-head{max-width:760px;margin-bottom:clamp(34px,4.5vw,56px)} /* ---- prose ---- */ .prose{max-width:var(--readw);font-size:19px;line-height:1.72} .prose h2{font-family:var(--serif);font-weight:800;font-size:clamp(21px,2.6vw,27px);letter-spacing:-.04em;line-height:1.2;margin:52px 0 16px;color:var(--mineral)} .prose h3{font-family:var(--serif);font-weight:600;font-size:17px;letter-spacing:-.03em;margin:36px 0 12px;color:var(--mineral)} .prose p{margin:0 0 20px;color:var(--mineral);opacity:.94} .prose ul,.prose ol{margin:0 0 22px;padding-left:0;list-style:none} .prose ol{counter-reset:n} .prose li{position:relative;padding-left:28px;margin-bottom:11px} .prose ul li::before{content:"—";position:absolute;left:0;color:var(--accent);font-family:var(--mono);font-size:12px;top:2px} .prose ol li{counter-increment:n} .prose ol li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;color:var(--accent);font-family:var(--mono);font-size:11px;font-weight:600;top:4px} .prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(240,231,91,.35)} .prose a:hover{border-color:var(--accent)} .prose strong{font-weight:600;color:var(--mineral)} .prose code{font-family:var(--mono);font-size:.78em;background:var(--ink-2);padding:2px 6px;border-radius:2px;color:var(--accent)} .prose blockquote{margin:28px 0;padding:18px 22px;border-left:2px solid var(--accent);background:rgba(240,231,91,.05);font-size:18px} .prose blockquote p:last-child{margin:0} .prose hr{border:0;border-top:1px solid rgba(168,176,214,.2);margin:44px 0} .prose table{width:100%;border-collapse:collapse;margin:0 0 26px;font-size:16px} .prose th{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--haze);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid rgba(168,176,214,.28);font-weight:600} .prose td{padding:12px 12px 12px 0;border-bottom:1px solid rgba(168,176,214,.14);vertical-align:top} /* ---- code ---- */ .code,pre.code{font-family:var(--mono);font-size:11.5px;line-height:1.9;background:var(--ink-2);border:1px solid rgba(168,176,214,.18);padding:18px 20px;overflow-x:auto;color:var(--haze);border-radius:2px;margin:0 0 26px;white-space:pre} .code .k{color:var(--accent)} .copywrap{position:relative;margin-bottom:26px} .copywrap .code{margin:0} .copybtn{position:absolute;top:9px;right:9px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;background:var(--ink-3);border:1px solid rgba(168,176,214,.28);color:var(--haze);padding:6px 10px;border-radius:2px;cursor:pointer} .copybtn:hover{border-color:var(--accent);color:var(--accent)} /* ---- callout ---- */ .callout{border:1px solid rgba(240,231,91,.35);background:rgba(240,231,91,.05);padding:18px 22px;margin:0 0 26px;border-radius:2px;font-size:17.5px} .callout b{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px;font-weight:600} .callout p:last-child{margin:0} /* ---- verdict box (tool pages) ---- */ .verdict{border:1px solid rgba(168,176,214,.25);background:var(--ink-2);padding:clamp(20px,2.6vw,28px);margin:0 0 34px;border-radius:2px;max-width:var(--readw)} .verdict dl{display:grid;grid-template-columns:auto 1fr;gap:10px 22px;margin:0;font-size:16.5px} .verdict dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--haze);padding-top:5px} .verdict dd{margin:0} /* ---- crawler monitor strip: the signature "operational" element ---- */ .ticker{border-block:1px solid rgba(168,179,197,.14);padding:16px 0;overflow:hidden;white-space:nowrap; position:relative;background:linear-gradient(180deg,rgba(80,213,255,.035),transparent)} .ticker::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,var(--ink) 0%,transparent 10%,transparent 90%,var(--ink) 100%)} .ticker-hd{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase; color:var(--haze);opacity:.65;padding-inline:var(--pad);margin:0 0 12px} .ticker-row{display:inline-flex;gap:12px;animation:slide 52s linear infinite} .botchip{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 11px; border:1px solid rgba(80,213,255,.28);border-radius:999px;background:rgba(80,213,255,.06); font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--mineral)} .botchip .dot{width:7px;height:7px;border-radius:50%;background:var(--live);flex:none; box-shadow:0 0 0 0 rgba(80,213,255,.6);animation:ping 2.4s cubic-bezier(.4,0,.6,1) infinite} .botchip .st{color:var(--live);font-weight:500;letter-spacing:.12em;font-size:9px} .botchip:nth-child(3n) .dot{animation-delay:.5s} .botchip:nth-child(3n+1) .dot{animation-delay:1.1s} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(80,213,255,.55)}70%{box-shadow:0 0 0 7px rgba(80,213,255,0)}100%{box-shadow:0 0 0 0 rgba(80,213,255,0)}} @keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker-row{animation:none}.botchip .dot{animation:none}} /* ---- hero + demo panel ---- */ .hero{position:relative;padding:clamp(44px,6.5vw,82px) 0 clamp(38px,5.5vw,62px);overflow:hidden} .hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 440px at 78% 4%,rgba(255,184,77,.10),transparent 64%),radial-gradient(560px 400px at 6% 88%,rgba(80,213,255,.09),transparent 66%)} .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr 1.18fr;gap:clamp(30px,4.5vw,68px);align-items:center} @media(max-width:1000px){.hero-grid{grid-template-columns:1fr;gap:38px}} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .hero-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--haze);margin-top:20px;opacity:.8} .panel{background:var(--ink-2);border:1px solid rgba(168,179,197,.18);border-radius:5px;box-shadow:0 40px 100px -40px rgba(0,0,0,.9),0 0 0 1px rgba(80,213,255,.05)} .panel-bar{display:flex;align-items:center;gap:9px;padding:12px 16px;border-bottom:1px solid rgba(168,176,214,.15)} .panel-bar .dot{width:7px;height:7px;border-radius:50%;background:rgba(168,176,214,.3)} .panel-bar .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);margin-left:6px} .panel-bar .live{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--accent);display:flex;align-items:center;gap:6px} .panel-bar .live i{width:6px;height:6px;border-radius:50%;background:var(--cite);animation:pulse 1.8s infinite;font-style:normal} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}} .panel-body{padding:22px clamp(18px,2.4vw,30px) 26px;min-height:404px} @media(max-width:520px){.panel-body{min-height:452px}} .ask{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;opacity:0;transform:translateY(8px);transition:all .5s ease} .ask.on{opacity:1;transform:none} .ask .who,.ans .who{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--haze);padding-top:5px;flex:none;width:52px} .ask .txt{background:var(--ink-3);border-radius:3px;padding:10px 15px;font-size:17px;color:#fff} .ans{display:flex;gap:12px;align-items:flex-start} .ans .who{color:var(--accent)} .ans .txt{font-size:17.5px;line-height:1.62} .caret{display:inline-block;width:8px;height:18px;background:var(--cite);vertical-align:-3px;margin-left:2px;animation:blink .9s step-end infinite} @keyframes blink{50%{opacity:0}} .mark{padding:1px 2px;border-radius:1px;color:#fff;font-weight:500;background-image:linear-gradient(var(--cite),var(--cite));background-repeat:no-repeat;background-position:0 92%;background-size:0% 44%;transition:background-size .55s cubic-bezier(.2,.75,.2,1),color .35s ease .18s} .mark.on{background-size:100% 44%;color:var(--ink)} .srccard{margin-top:20px;border:1px solid var(--accent);border-radius:3px;background:rgba(240,231,91,.06);padding:14px 16px;opacity:0;transform:translateY(14px);transition:all .55s cubic-bezier(.2,.75,.2,1)} .srccard.on{opacity:1;transform:none} .srccard .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .srccard .url{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--accent)} .srccard .ttl{font-size:15px;opacity:.9} .srccard .why{margin-top:11px;padding-top:11px;border-top:1px dashed rgba(240,231,91,.3);display:flex;flex-wrap:wrap;gap:7px;align-items:center} .srccard .why b{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--haze);font-weight:600;margin-right:3px} .chip{font-family:var(--mono);font-size:10px;padding:4px 9px;border:1px solid rgba(240,231,91,.4);border-radius:2px;color:var(--accent);opacity:0;transform:translateY(5px);transition:all .4s ease} .chip.on{opacity:1;transform:none} .replay{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} .replay button{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;background:none;border:1px solid rgba(168,176,214,.35);color:var(--haze);padding:9px 14px;border-radius:2px;cursor:pointer} .replay button:hover{border-color:var(--accent);color:var(--accent)} .replay .cap{font-family:var(--mono);font-size:10px;color:var(--haze);opacity:.75} /* ---- pillars ---- */ .pil-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--mineral-2);border:1px solid var(--mineral-2)} @media(max-width:900px){.pil-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.pil-grid{grid-template-columns:1fr}} .pil{background:var(--mineral-3);padding:26px 22px 24px;transition:background .25s} .pil:hover{background:#1B3A6B} .pil-n{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--haze)} .pil-t{font-family:var(--serif);font-weight:800;font-size:16px;letter-spacing:-.03em;margin:12px 0 8px} .pil-d{font-size:16px;line-height:1.55;color:var(--haze);margin:0 0 16px} .pil-list{list-style:none;margin:0;padding:0;font-family:var(--mono);font-size:10.5px;color:var(--haze);line-height:2} .pil-list li::before{content:"✓ ";color:var(--live)} .pil-bar{height:3px;background:var(--mineral-2);margin-top:18px;overflow:hidden} .pil-bar i{display:block;height:100%;width:0;background:var(--live-dim);transition:width 1.1s cubic-bezier(.2,.8,.2,1)} /* ---- dial + proof ---- */ .proof{display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,5vw,66px);align-items:center} @media(max-width:800px){.proof{grid-template-columns:1fr}} .dial{position:relative;width:210px;height:210px;flex:none} .dial svg{transform:rotate(-90deg)} .dial .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center} .dial .num{font-family:var(--serif);font-weight:800;font-size:52px;letter-spacing:-.06em;color:var(--mineral);line-height:1} .dial .out{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--haze);margin-top:6px} .grade{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);padding:7px 13px;border-radius:2px;margin-bottom:22px} .fixlist{list-style:none;padding:0;margin:26px 0 0;border-top:1px solid rgba(168,176,214,.2)} .fixlist li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid rgba(168,176,214,.14);font-size:17px} .fixlist .p{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--accent);flex:none;width:64px} .fixlist .p.med{color:var(--haze)} .fixlist .p.low{color:var(--haze);opacity:.6} .fixlist a{color:var(--haze);text-decoration:none;border-bottom:1px solid rgba(168,176,214,.3);margin-left:auto;font-family:var(--mono);font-size:10.5px;white-space:nowrap;padding-left:16px} .fixlist a:hover{color:var(--accent);border-color:var(--accent)} /* ---- tiers ---- */ .tier-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(18px,2.5vw,30px)} @media(max-width:860px){.tier-grid{grid-template-columns:1fr}} .tier{border:1px solid var(--mineral-2);background:var(--mineral-3);border-radius:3px;padding:clamp(26px,3.2vw,38px);display:flex;flex-direction:column} .tier.pro{background:var(--ink);color:var(--mineral);border-color:rgba(255,184,77,.35)} .tier-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--haze)} .tier.pro .tier-k{color:var(--accent)} .tier-p{font-family:var(--serif);font-weight:800;font-size:clamp(28px,3.4vw,38px);letter-spacing:-.05em;margin:14px 0 4px} .tier-p small{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:0;opacity:.6} .tier-s{font-size:17px;color:var(--haze);margin:0 0 22px} .tier.pro .tier-s{color:var(--haze)} .tier ul{list-style:none;padding:0;margin:0 0 28px;font-size:16.5px;line-height:1.5} .tier li{padding:9px 0 9px 26px;position:relative;border-bottom:1px dashed var(--mineral-2)} .tier.pro li{border-color:rgba(168,176,214,.18)} .tier li::before{content:"→";position:absolute;left:0;font-family:var(--mono);font-size:11px;color:var(--live-dim);top:11px} .tier.pro li::before{color:var(--accent)} .tier .btn{margin-top:auto;align-self:flex-start} /* ---- tabs ---- */ .plat-pane{display:none;border:1px solid var(--mineral-2);padding:clamp(22px,3vw,34px);background:var(--ink-2);border-radius:4px} .plat-pane.on{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,52px)} @media(max-width:820px){.plat-pane.on{grid-template-columns:1fr}} .plat-pane h3{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.03em;margin:0 0 12px;color:var(--mineral)} .plat-pane p{margin:0 0 16px;color:var(--haze);font-size:17px} /* ---- card grids ---- */ .dir-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--mineral-2);border:1px solid var(--mineral-2)} @media(max-width:900px){.dir-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:600px){.dir-grid{grid-template-columns:1fr}} .dir{background:var(--mineral-3);padding:22px;text-decoration:none;color:inherit;display:block;transition:background .2s;border-radius:2px} .dir:hover{background:#1B3A6B} .dir:hover .dir-n{color:var(--live)} .dir-n{font-family:var(--serif);font-weight:800;font-size:14.5px;letter-spacing:-.02em;margin-bottom:7px;display:flex;justify-content:space-between;align-items:center;gap:10px;transition:color .2s} .dir-n em{font-family:var(--mono);font-size:9px;font-style:normal;letter-spacing:.1em;padding:3px 7px;border:1px solid var(--mineral-2);color:var(--haze);white-space:nowrap} .dir-x{font-size:15.5px;line-height:1.5;color:var(--haze);margin:0} /* ---- link list ---- */ .learn-list{border-top:1px solid rgba(168,176,214,.2)} .learn-item{display:flex;gap:clamp(14px,3vw,38px);align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(168,176,214,.16);text-decoration:none;transition:padding-left .25s ease} .learn-item:hover{padding-left:12px} .learn-item:hover .lt{color:var(--accent)} .learn-k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--haze);flex:none;width:118px;opacity:.75} .lt{font-family:var(--serif);font-weight:700;font-size:clamp(15px,1.9vw,19px);letter-spacing:-.035em;color:var(--mineral);transition:color .2s} .lx{color:var(--haze);font-size:16.5px;margin-left:auto;text-align:right;max-width:32ch} @media(max-width:760px){.learn-item{flex-wrap:wrap;gap:6px}.learn-k{width:100%}.lx{margin-left:0;text-align:left;max-width:none}} /* ---- next / related ---- */ .nextbar{border-top:1px solid rgba(168,176,214,.2);margin-top:56px;padding-top:28px;display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;max-width:var(--readw)} .nextbar .k{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--haze);display:block;margin-bottom:6px} .nextbar a{font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:-.03em;color:var(--mineral);text-decoration:none} .nextbar a:hover{color:var(--accent)} /* ---- final cta ---- */ .final{text-align:center;padding-block:clamp(64px,9vw,128px)} .final .h2{margin-inline:auto;max-width:22ch} .final .lede{margin-inline:auto;text-align:center} .final .hero-cta{justify-content:center} .final .eyebrow{justify-content:center} /* ---- checker ---- */ .chk-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3.5vw,44px);align-items:start} @media(max-width:940px){.chk-grid{grid-template-columns:1fr}} .field{margin-bottom:24px} .field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:9px} .field .hint{font-size:16px;color:var(--haze);margin:0 0 12px} textarea.src{width:100%;min-height:230px;background:var(--ink-2);border:1px solid rgba(168,176,214,.28);color:var(--mineral);font-family:var(--mono);font-size:11.5px;line-height:1.7;padding:16px;border-radius:2px;resize:vertical} input.url{width:100%;background:var(--ink-2);border:1px solid rgba(168,176,214,.28);color:var(--mineral);font-family:var(--mono);font-size:12px;padding:14px 16px;border-radius:2px} .qs{list-style:none;padding:0;margin:0 0 26px;border-top:1px solid rgba(168,176,214,.18)} .qs li{display:flex;gap:14px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(168,176,214,.14);font-size:17px} .qs .qt{flex:1} .qs .qt small{display:block;font-family:var(--mono);font-size:10px;color:var(--haze);opacity:.7;margin-top:3px;letter-spacing:.03em} .yn{display:flex;gap:6px;flex:none} .yn button{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:7px 12px;border:1px solid rgba(168,176,214,.3);background:none;color:var(--haze);cursor:pointer;border-radius:2px} .yn button[aria-pressed="true"]{background:var(--cite);border-color:var(--accent);color:var(--ink);font-weight:600} .results{display:none} .results.on{display:block} .score-head{display:flex;gap:clamp(22px,3vw,40px);align-items:center;flex-wrap:wrap;margin-bottom:34px} .bars{margin:0 0 34px} .bar-row{margin-bottom:16px} .bar-lab{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--haze);margin-bottom:7px} .bar-lab b{color:#fff;font-weight:600} .bar{height:6px;background:rgba(168,176,214,.16);overflow:hidden;border-radius:1px} .bar i{display:block;height:100%;width:0;background:var(--brand);transition:width 1s cubic-bezier(.2,.8,.2,1)} .empty{border:1px dashed rgba(168,176,214,.3);padding:36px 26px;text-align:center;color:var(--haze);font-size:17px;border-radius:2px} /* ---- footer ---- */ footer{background:var(--ink-2);border-top:1px solid rgba(168,179,197,.14);padding:clamp(46px,6vw,74px) 0 40px} .foot-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:30px 24px} @media(max-width:940px){.foot-grid{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.foot-grid{grid-template-columns:repeat(2,1fr)}} .foot-h{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 14px} .foot-col ul{list-style:none;padding:0;margin:0} .foot-col li{margin-bottom:8px} .foot-col a{font-family:var(--mono);font-size:11px;color:var(--haze);text-decoration:none;line-height:1.5;display:inline-block} .foot-col a:hover{color:#fff} .foot-base{margin-top:48px;padding-top:22px;border-top:1px solid rgba(168,176,214,.14);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--haze);opacity:.7} .foot-base a{color:var(--accent)} /* ---- reveal ---- */ .rise{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .rise.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ *{animation-duration:.001s!important;transition-duration:.001s!important} .rise{opacity:1;transform:none} } /* ============================================================ PAPER THEME — Used by virtualplanet.ai. Same tokens, inverted surfaces, so the company site reads as a sibling of the product site rather than a clone. ============================================================ */ body.paper{ --ink:#F8FAFC; --ink-2:#FFFFFF; --ink-3:#E2E8F0; --mineral:#0F172A; --mineral-2:#E2E8F0; --mineral-3:#FFFFFF; --haze:#64748B; --accent:#2563EB; background:#F8FAFC; color:#334155; } body.paper header.nav{background:rgba(248,250,252,.88);border-bottom-color:#E2E8F0} body.paper .brand{color:#0F172A} body.paper .nav-links a{color:#64748B} body.paper .nav-links a:hover,body.paper .nav-links a[aria-current]{color:#0F172A;border-color:var(--brand)} body.paper .h1,body.paper .h2,body.paper .prose h2,body.paper .prose h3,body.paper .lt,body.paper .buy-hd{color:#0F172A} body.paper .lede,body.paper .prose p{color:#334155} body.paper .prose strong{color:#0F172A} body.paper .eyebrow,body.paper .meta,body.paper .crumb,body.paper .learn-k,body.paper .lx{color:#64748B} body.paper section.light{background:#0F172A;color:#F8FAFC;--accent:#60A5FA;--haze:#94A3B8} body.paper section.light .h2,body.paper section.light .lt,body.paper section.light .dir-n{color:#fff} body.paper section.light .lede,body.paper section.light .dir-x,body.paper section.light .eyebrow{color:#94A3B8} body.paper section.light .dir{background:#1E293B;color:#F8FAFC} body.paper section.light .dir:hover{background:#334155} body.paper section.light .dir-grid{background:rgba(148,163,184,.25);border-color:rgba(148,163,184,.25)} body.paper section.light .dir-n em{border-color:rgba(148,163,184,.35);color:#94A3B8} body.paper section.light .btn-ghost{border-color:rgba(148,163,184,.45);color:#F8FAFC} body.paper section.light .btn-ghost:hover{border-color:var(--brand-lift);background:transparent;color:var(--brand-lift)} body.paper .btn-ghost{border-color:#CBD5E1;color:#0F172A} body.paper .btn-ghost:hover{border-color:#0F172A;background:#0F172A;color:#F8FAFC} body.paper .code,body.paper pre.code{background:#0F172A;border-color:#1E293B;color:#94A3B8} body.paper .copybtn{background:#1E293B;border-color:rgba(148,163,184,.35);color:#94A3B8} body.paper .callout{background:rgba(37,99,235,.05);border-color:rgba(37,99,235,.25)} body.paper .learn-list,body.paper .fixlist,body.paper .nextbar{border-color:#E2E8F0} body.paper .learn-item,body.paper .fixlist li{border-color:#E2E8F0} body.paper .nextbar a{color:#0F172A} body.paper .prose code{background:#E2E8F0;color:#334155} body.paper .prose table th{color:#64748B;border-color:#CBD5E1} body.paper .prose td{border-color:#E2E8F0} body.paper .verdict{background:#FFFFFF;border-color:#E2E8F0} body.paper .verdict dd{color:#334155} body.paper footer{background:#0F172A;border-top-color:#1E293B;color:#F8FAFC} body.paper .foot-col a{color:#94A3B8} body.paper .foot-col a:hover{color:#fff} body.paper .foot-base{color:#94A3B8;border-color:#1E293B} body.paper .hero::before{background: radial-gradient(680px 420px at 78% 6%, rgba(37,99,235,.07), transparent 65%), radial-gradient(520px 380px at 6% 86%, rgba(20,184,166,.06), transparent 68%)} /* ---- buy block ---- */ .buy{border:1px solid var(--accent);background:rgba(240,231,91,.05);border-radius:3px;padding:clamp(22px,3vw,30px);margin:0 0 34px;max-width:var(--readw)} .buy-top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px} .buy-p{font-family:var(--serif);font-weight:800;font-size:clamp(28px,3.4vw,36px);letter-spacing:-.05em;color:#fff} body.paper .buy-p{color:var(--ink)} .buy-p small{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:0;opacity:.65} .buy-note{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--haze);margin:0 0 22px} .buy label{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:8px} .buy input{width:100%;background:var(--ink-2);border:1px solid rgba(168,176,214,.3);color:var(--mineral);font-family:var(--mono);font-size:12.5px;padding:14px 16px;border-radius:2px;margin-bottom:16px} .buy input::placeholder{color:var(--haze);opacity:.5} .codetoggle{background:none;border:0;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--haze);cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px;margin-bottom:16px} .codetoggle:hover{color:var(--accent)} .codewrap{display:none} .codewrap.on{display:block} .buy-err{font-family:var(--mono);font-size:10.5px;color:var(--accent);margin:0 0 14px;min-height:14px} .buy .btn{width:100%;justify-content:center} .buy-fine{font-family:var(--mono);font-size:10px;line-height:1.8;color:var(--haze);opacity:.75;margin:18px 0 0} /* ---- two-up fields inside the buy block ---- */ .buy-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} @media(max-width:560px){.buy-row{grid-template-columns:1fr}} .buy-hd{font-family:var(--serif);font-weight:800;font-size:clamp(18px,2.2vw,22px);letter-spacing:-.04em;color:#fff;margin:0 0 8px} body.paper .buy-hd{color:var(--ink)} .buy-sub{font-size:17px;color:var(--haze);margin:0 0 22px} /* ---- before / after dial pair ---- */ .ba{display:flex;align-items:center;justify-content:center;gap:clamp(16px,3vw,40px);flex-wrap:wrap;margin:0 0 10px} .ba-item{text-align:center} .dial.sm{width:132px;height:132px} .dial.sm .num{font-size:32px} .dial.sm .out{font-size:9px;margin-top:4px} .ba-lab{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--haze);margin-top:10px} .ba-arrow{font-family:var(--mono);font-size:22px;color:var(--accent);line-height:1;padding-bottom:24px} @media(max-width:520px){.ba-arrow{transform:rotate(90deg);padding:0}} .ba-cap{font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--haze);text-align:center;opacity:.8;margin:14px 0 0} .ba-cap a{color:var(--accent)} .agency-line{border-top:1px solid var(--mineral-2);margin-top:30px;padding-top:24px;display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;justify-content:space-between} .agency-line p{margin:0;font-size:17px;color:var(--haze);max-width:60ch} .agency-line b{font-family:var(--serif);font-weight:800;font-size:14px;letter-spacing:-.02em;color:#fff;display:block;margin-bottom:5px} /* ---- dials sitting on a light surface ---- */ section.light .dial .num{color:var(--ink)} section.light .dial .out,section.light .ba-lab,section.light .ba-cap{color:var(--slate);opacity:.85} section.light .dial svg circle:first-of-type{stroke:var(--mineral-2)} section.light .ba-arrow{color:var(--moss)} /* ============================================================ SIGNAL ROLES Amber is action and citation. Cyan is machine. Blue is body links only. If you are adding a new element, pick the meaning first. ============================================================ */ /* --- amber: the citation signal --- */ .mark{background-image:linear-gradient(var(--cite),var(--cite))} .mark.on{color:#08111F} .srccard{border-color:var(--cite);background:rgba(255,184,77,.09)} .srccard .url{color:var(--cite)} .srccard .why{border-top-color:rgba(255,184,77,.35)} .chip{border-color:rgba(255,184,77,.5);color:var(--cite)} .grade{border-color:var(--cite);color:var(--cite)} .ans .who{color:var(--cite)} .brand .mk{border-color:var(--cite);color:var(--cite)} .foot-h{color:var(--cite)} .fixlist .p{color:var(--cite)} .buy{border-color:rgba(255,184,77,.45);background:rgba(255,184,77,.07)} #baAfter{stroke:var(--cite)} section.light .ba-arrow{color:var(--cite)} /* --- cyan: the machine signal. Used sparingly, on purpose. --- */ .ticker-row i{color:var(--live)} .panel-bar .live{color:var(--live)} .panel-bar .live i{background:var(--live);box-shadow:0 0 8px rgba(53,198,255,.7)} .pil-list li::before{color:var(--live)} .tier li::before{color:var(--live-dim)} .tier.pro li::before{color:var(--live)} .bar i{background:var(--live)} #arc,#chkArc,#baBefore{stroke:var(--live)} section.light .pil-list li::before,section.light .tier li::before{color:var(--live-dim)} section.light .dial svg circle:first-of-type{stroke:var(--mineral-2)} /* ============================================================ MOBILE SLIDE-OUT MENU ============================================================ */ .navtoggle{display:none;margin-left:auto;width:42px;height:42px;background:none;border:1px solid rgba(148,163,184,.35); border-radius:3px;cursor:pointer;padding:0;position:relative;flex:none} .navtoggle span{position:absolute;left:11px;width:18px;height:2px;background:var(--mineral);border-radius:2px; transition:transform .28s cubic-bezier(.2,.8,.2,1),opacity .18s ease} .navtoggle span:nth-child(1){top:14px} .navtoggle span:nth-child(2){top:20px} .navtoggle span:nth-child(3){top:26px} body.paper .navtoggle span{background:#0F172A} body.paper .navtoggle{border-color:#CBD5E1} .navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0} .navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .navscrim{position:fixed;inset:0;background:rgba(8,17,31,.62);backdrop-filter:blur(2px);z-index:80; opacity:0;pointer-events:none;transition:opacity .3s ease} .navscrim.on{opacity:1;pointer-events:auto} .mobilenav{position:fixed;top:0;right:0;bottom:0;width:min(340px,86vw);z-index:90;background:var(--ink-2); border-left:1px solid rgba(168,179,197,.18);transform:translateX(100%);transition:transform .34s cubic-bezier(.2,.8,.2,1); display:flex;flex-direction:column;padding:22px 24px 30px;overflow-y:auto;overscroll-behavior:contain} body.paper .mobilenav{background:#FFFFFF;border-left-color:#E2E8F0} .mobilenav.on{transform:none} .mobilenav-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px} .mobilenav-hd .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--haze)} .navclose{background:none;border:0;color:var(--haze);font-size:26px;line-height:1;cursor:pointer;padding:4px 6px} .navclose:hover{color:var(--cite)} .mobilenav ul{list-style:none;margin:0 0 26px;padding:0} .mobilenav li{border-bottom:1px solid rgba(148,163,184,.16)} body.paper .mobilenav li{border-bottom-color:#E2E8F0} .mobilenav li a{display:block;padding:15px 0;text-decoration:none;font-weight:700;font-size:17px; letter-spacing:-.02em;color:var(--mineral)} body.paper .mobilenav li a{color:#0F172A} .mobilenav li a:hover{color:var(--brand-lift)} body.paper .mobilenav li a:hover{color:var(--brand)} .mobilenav .btn{justify-content:center;margin-bottom:12px} .mobilenav .mn-foot{margin-top:auto;padding-top:22px;border-top:1px solid rgba(148,163,184,.16); font-family:var(--mono);font-size:10px;letter-spacing:.04em;color:var(--haze);line-height:1.8} .mobilenav .mn-foot a{color:var(--cite);text-decoration:none} body.no-scroll{overflow:hidden} @media(max-width:960px){ .navtoggle{display:block} .nav-in .btn-cite{display:none} } @media(min-width:961px){ .mobilenav,.navscrim{display:none} } /* ---- hero emphasis: the word the whole product is about ---- */ .h1 .under{position:relative;display:inline-block;white-space:nowrap} .h1 .under::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:.13em; background:var(--cite);border-radius:2px;transform:scaleX(0);transform-origin:left; animation:underdraw .8s cubic-bezier(.2,.8,.2,1) .5s forwards} @keyframes underdraw{to{transform:scaleX(1)}} @media(prefers-reduced-motion:reduce){.h1 .under::after{animation:none;transform:scaleX(1)}} /* ============================================================ DIAGNOSTIC STATES — checker UI only. Computed from a real score, never used as brand colour. ============================================================ */ .results .bar i.s-good{background:var(--good)} .results .bar i.s-warn{background:var(--warn)} .results .bar i.s-crit{background:var(--crit)} .bar-lab .pct{font-weight:600} .bar-lab .pct.s-good{color:var(--good)} .bar-lab .pct.s-warn{color:var(--warn)} .bar-lab .pct.s-crit{color:var(--crit)} .grade.s-good{border-color:var(--good);color:var(--good)} .grade.s-warn{border-color:var(--warn);color:var(--warn)} .grade.s-crit{border-color:var(--crit);color:var(--crit)} .fixlist .p{border-radius:2px;padding:3px 0;text-align:left} .fixlist .p.crit{color:var(--crit)} .fixlist .p.warn{color:var(--warn)} .fixlist .p.low{color:var(--haze);opacity:.8} .fixlist li.pass .p{color:var(--good)} .fixlist li.pass{opacity:.62} .legend{display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:9.5px; letter-spacing:.1em;text-transform:uppercase;color:var(--haze);margin:0 0 18px} .legend span{display:inline-flex;align-items:center;gap:6px} .legend i{width:8px;height:8px;border-radius:2px;display:inline-block} /* ---- hero: one destination, made unmissable ---- */ .lede-tight{font-size:clamp(19px,1.7vw,23px);max-width:26ch;margin-bottom:30px;color:var(--slate);opacity:1} .btn-lg{font-size:14px;padding:20px 34px;letter-spacing:.04em; box-shadow:0 0 0 1px rgba(255,184,77,.35), 0 12px 40px -12px rgba(255,184,77,.55)} .btn-lg:hover{box-shadow:0 0 0 1px rgba(79,209,255,.5), 0 16px 46px -12px rgba(255,184,77,.7)} .btn-lg .arw{transition:transform .22s cubic-bezier(.2,.8,.2,1);display:inline-block} .btn-lg:hover .arw{transform:translateX(4px)} .hero-note b{color:var(--mineral);font-weight:700} .hero-note a{color:var(--haze);text-decoration:underline;text-underline-offset:3px;transition:color .2s} .hero-note a:hover{color:var(--live)} /* ---- cyan on hover: the one place the machine colour is felt constantly ---- */ .nav-links a:hover{color:var(--live);border-color:var(--live)} .dir:hover{background:#1B3A6B;box-shadow:inset 0 0 0 1px rgba(79,209,255,.35)} .dir:hover .dir-n{color:var(--live)} .learn-item:hover .lt{color:var(--live)} .learn-item:hover{box-shadow:inset 2px 0 0 var(--live)} .foot-col a:hover{color:var(--live)} .fixlist a:hover{color:var(--live);border-color:var(--live)} .prose a:hover{color:var(--live);border-color:var(--live)} .btn-ghost:hover{border-color:var(--live);color:var(--live)} .mobilenav li a:hover{color:var(--live)} .replay button:hover{border-color:var(--live);color:var(--live)} .codetoggle:hover,.copybtn:hover{color:var(--live);border-color:var(--live)} .nextbar a:hover{color:var(--live)} .crumb a:hover{color:var(--live)} .navclose:hover{color:var(--live)} .replay .cap a{color:var(--haze);text-decoration:underline;text-underline-offset:3px;transition:color .2s} .replay .cap a:hover{color:var(--live)} /* ============================================================ LIGHT-BASE CORRECTIONS Written after the dark-island block so these win where they overlap. ============================================================ */ .hero::before{background: radial-gradient(760px 460px at 80% 0%, rgba(29,78,216,.07), transparent 62%), radial-gradient(560px 400px at 2% 92%, rgba(255,184,77,.10), transparent 64%)} .eyebrow{color:var(--slate)} .eyebrow::before{background:var(--cite-deep)} .pil-grid{background:var(--mineral-2);border-color:var(--mineral-2)} .pil{background:var(--mineral-3)} .pil:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(29,78,216,.25)} .pil-t{color:var(--mineral)} .pil-n,.pil-d,.pil-list{color:var(--slate)} .pil-list li::before{color:var(--live-dim)} .pil-bar{background:var(--mineral-2)} .pil-bar i{background:var(--brand)} .dir-grid{background:var(--mineral-2);border-color:var(--mineral-2)} .dir{background:var(--mineral-3)} .dir:hover{background:#fff;box-shadow:inset 0 0 0 1px rgba(29,78,216,.28)} .dir-n{color:var(--mineral)} .dir:hover .dir-n{color:var(--brand)} .dir-x{color:var(--slate)} .dir-n em{border-color:var(--mineral-2);color:var(--slate)} .learn-list{border-top-color:var(--mineral-2)} .learn-item{border-bottom-color:var(--mineral-2)} .learn-item:hover .lt{color:var(--brand)} .learn-item:hover{box-shadow:inset 2px 0 0 var(--brand)} .learn-k,.lx{color:var(--slate)} .tier{background:var(--mineral-3);border-color:var(--mineral-2)} .tier-s{color:var(--slate)} .tier li{border-bottom-color:var(--mineral-2)} .tier li::before{color:var(--live-dim)} .tier-k{color:var(--slate)} .tier.pro{background:var(--ink);color:var(--mineral);border-color:var(--ink)} .tier.pro .tier-p,.tier.pro li{color:var(--mineral)} .tier.pro .tier-k{color:var(--cite)} .tier.pro li::before{color:var(--live)} .fixlist{border-top-color:var(--mineral-2)} .fixlist li{border-bottom-color:var(--mineral-2)} .fixlist a{color:var(--slate);border-bottom-color:var(--mineral-2)} .fixlist .p{color:var(--cite-deep)} .nextbar{border-top-color:var(--mineral-2)} .prose a{color:var(--brand);border-bottom-color:rgba(29,78,216,.3)} .prose a:hover{color:var(--live-dim);border-color:var(--live-dim)} .prose code{background:var(--ink-3);color:var(--cite-deep)} .prose blockquote{border-left-color:var(--cite-deep);background:rgba(255,184,77,.10)} .prose hr{border-top-color:var(--mineral-2)} .prose th{color:var(--slate);border-bottom-color:var(--mineral-2)} .prose td{border-bottom-color:var(--mineral-2)} .callout{border-color:rgba(29,78,216,.25);background:rgba(29,78,216,.05)} .callout b{color:var(--brand)} .verdict{background:var(--mineral-3);border-color:var(--mineral-2)} .verdict dt{color:var(--slate)} .grade{border-color:var(--cite-deep);color:var(--cite-deep)} .buy{border-color:rgba(255,184,77,.55);background:rgba(255,184,77,.10)} .buy label{color:var(--cite-deep)} .buy input,textarea.src,input.url{background:#fff;border-color:var(--mineral-2);color:var(--mineral)} .buy-p,.buy-hd{color:var(--mineral)} .buy-note,.buy-fine,.codetoggle{color:var(--slate)} .field label{color:var(--brand)} .qs{border-top-color:var(--mineral-2)} .qs li{border-bottom-color:var(--mineral-2)} .qs .qt small{color:var(--slate)} .yn button{border-color:var(--mineral-2);color:var(--slate)} .yn button[aria-pressed="true"]{background:var(--brand);border-color:var(--brand);color:#fff} .bar{background:var(--mineral-2)} .bar-lab{color:var(--slate)} .bar-lab b{color:var(--mineral)} .empty{border-color:var(--mineral-2);color:var(--slate)} .meta,.crumb{color:var(--slate)} .dial svg circle:first-of-type{stroke:var(--mineral-2)} .dial .out,.ba-lab,.ba-cap{color:var(--slate)} .agency-line{border-top-color:var(--mineral-2)} .agency-line b{color:var(--mineral)} .agency-line p{color:var(--slate)} .navtoggle{border-color:var(--mineral-2)} .navtoggle span{background:var(--mineral)} .hero-note{color:var(--slate)} .hero-note a{color:var(--slate)} .hero-note a:hover{color:var(--brand)} .replay .cap,.replay .cap a{color:var(--haze)} .btn-ghost{border-color:var(--mineral-2);color:var(--mineral)} .btn-ghost:hover{border-color:var(--brand);color:var(--brand);background:rgba(29,78,216,.05)} .btn-lg{box-shadow:0 0 0 1px rgba(255,184,77,.5), 0 14px 40px -14px rgba(255,184,77,.85)} .btn-lg:hover{box-shadow:0 0 0 1px rgba(29,78,216,.4), 0 18px 46px -14px rgba(255,184,77,.95)} .legend{color:var(--slate)} /* dark islands keep their own treatment where the generic rule would break them */ section.dark .pil,section.dark .dir,section.dark .tier{background:var(--mineral-3)} section.dark .pil-t,section.dark .dir-n,section.dark .lt{color:#fff} section.dark .fixlist a,section.dark .learn-k,section.dark .lx{color:var(--haze)} section.dark .grade{border-color:var(--cite);color:var(--cite)} section.dark .dial .num{color:#fff} section.dark .dial .out,section.dark .ba-cap,section.dark .ba-lab{color:var(--haze)} section.dark .btn-ghost{border-color:rgba(168,179,197,.4);color:var(--mineral)} section.dark .btn-ghost:hover{border-color:var(--live);color:var(--live);background:transparent} .panel .ans .txt,.panel .ask .txt{color:var(--mineral)} .tier.pro .tier-s{color:var(--haze)} footer .foot-base{color:var(--haze)} .dir-grid.four{grid-template-columns:repeat(2,1fr)} @media(max-width:760px){.dir-grid.four{grid-template-columns:1fr}} .dir-x b{color:var(--mineral);font-weight:700} section.dark .dir-x b{color:#fff} /* ============================================================ SURFACE REFINEMENT Softer radii, layered shadows, lighter hairlines, more air. Borders recede; elevation does the separating. ============================================================ */ :root{ --line:#E6EBF1; --r-sm:8px; --r-md:12px; --r-lg:16px; --sh-1:0 1px 2px rgba(15,23,42,.04), 0 1px 1px rgba(15,23,42,.03); --sh-2:0 4px 12px -2px rgba(15,23,42,.07), 0 2px 6px -2px rgba(15,23,42,.05); --sh-3:0 18px 40px -12px rgba(15,23,42,.16), 0 6px 16px -6px rgba(15,23,42,.08); --sh-4:0 40px 80px -24px rgba(15,23,42,.24), 0 12px 28px -12px rgba(15,23,42,.10); } body{--mineral-2:var(--line)} section{padding:clamp(64px,9vw,124px) 0} .sec-head{margin-bottom:clamp(40px,5vw,64px)} /* buttons: rounded, lifted, calm */ .btn{border-radius:var(--r-sm);box-shadow:var(--sh-1);transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease} .btn:hover{box-shadow:var(--sh-2)} .btn-cite{box-shadow:0 1px 2px rgba(15,23,42,.06),0 6px 18px -6px rgba(255,184,77,.7)} .btn-cite:hover{box-shadow:0 2px 4px rgba(15,23,42,.08),0 10px 26px -8px rgba(255,184,77,.9)} .btn-lg{border-radius:10px;padding:19px 32px} .btn-ghost{background:#fff;box-shadow:var(--sh-1)} .btn-ghost:hover{background:#fff;box-shadow:var(--sh-2)} /* card grids: white cards, real gaps, elevation on hover */ .dir-grid,.pil-grid{background:transparent;border:0;gap:14px} .dir,.pil{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease} .dir:hover,.pil:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:#CBD8EA;background:#fff} .pil{padding:28px 24px 26px} .dir{padding:26px 24px} .tier{border-radius:var(--r-lg);box-shadow:var(--sh-2);border-color:var(--line)} .tier.pro{box-shadow:var(--sh-4);border-radius:var(--r-lg)} .verdict,.callout,.buy{border-radius:var(--r-md)} .callout{box-shadow:var(--sh-1)} .buy{box-shadow:var(--sh-2)} .plat-pane{border-radius:var(--r-lg);box-shadow:var(--sh-2);border-color:var(--line)} .code,pre.code{border-radius:var(--r-md);border-color:transparent;box-shadow:var(--sh-2)} .buy input,textarea.src,input.url{border-radius:var(--r-sm);border-color:var(--line);box-shadow:inset 0 1px 2px rgba(15,23,42,.04)} .buy input:focus,textarea.src:focus,input.url:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(29,78,216,.12)} /* hero: a quiet wash rather than a dark slab */ .hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,7vw,88px)} .hero::before{background: radial-gradient(900px 520px at 88% -10%, rgba(29,78,216,.10), transparent 60%), radial-gradient(620px 460px at 4% 96%, rgba(255,184,77,.13), transparent 62%), radial-gradient(520px 380px at 52% 8%, rgba(80,213,255,.07), transparent 66%)} /* ============================================================ THE DEMO, AS A PRODUCT WINDOW Light card, real chrome, elevation. The amber highlighter reads as a highlighter because the paper is white. ============================================================ */ .panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-4);overflow:hidden} .panel-bar{padding:14px 18px;border-bottom:1px solid var(--line);background:#FBFCFE} .panel-bar .dot{background:#DCE3ED} .panel-bar .lbl{color:var(--slate)} .panel-bar .live{color:var(--live-dim)} .panel-bar .live i{background:var(--live-dim);box-shadow:0 0 6px rgba(14,127,168,.5)} .panel-body{padding:26px clamp(20px,2.6vw,32px) 28px} .ask .who,.ans .who{color:var(--slate)} .ans .who{color:var(--brand)} .ask .txt{background:#F1F5F9;color:var(--mineral);border-radius:12px 12px 12px 4px} .ans .txt{color:var(--mineral)} .caret{background:var(--brand)} .mark.on{color:var(--mineral)} .srccard{background:#FFFCF5;border-color:rgba(255,184,77,.65);border-radius:var(--r-md);box-shadow:var(--sh-1)} .srccard .url{color:var(--cite-deep)} .srccard .ttl{color:var(--slate)} .srccard .why{border-top-color:rgba(255,184,77,.5)} .srccard .why b{color:var(--slate)} .chip{background:#fff;border-color:rgba(255,184,77,.7);color:var(--cite-deep);border-radius:999px} .replay{border-top:1px solid var(--line);margin-top:22px;padding-top:18px} .replay button{border-radius:999px;background:#fff;border-color:var(--line);color:var(--slate);box-shadow:var(--sh-1)} .replay .cap,.replay .cap a{color:var(--slate)} /* mobile menu on the light base */ .mobilenav{background:#fff;border-left:1px solid var(--line);box-shadow:var(--sh-4)} .mobilenav li{border-bottom-color:var(--line)} .mobilenav li a{color:var(--mineral)} .mobilenav li a:hover{color:var(--brand)} .mobilenav-hd .k{color:var(--slate)} .navclose{color:var(--slate)} .mobilenav .mn-foot{border-top-color:var(--line);color:var(--slate)} .mobilenav .mn-foot a{color:var(--brand)} .navtoggle{border-radius:var(--r-sm);background:#fff;box-shadow:var(--sh-1)} /* the dark islands keep their edges soft too */ .ticker{border-radius:0} section.dark{border-radius:0} .dial svg circle:first-of-type{stroke:#E6EBF1} section.dark .dial svg circle:first-of-type{stroke:rgba(168,179,197,.25)} .pil-bar{background:var(--line);border-radius:2px} .pil-bar i{border-radius:2px} .bar{background:var(--line);border-radius:3px} .bar i{border-radius:3px} .learn-item{border-bottom-color:var(--line)} .learn-list{border-top-color:var(--line)} .fixlist,.fixlist li,.nextbar,.qs,.qs li,.agency-line{border-color:var(--line)} header.nav{border-bottom-color:var(--line)} .crumb{padding-top:30px} .grade{border-radius:999px} .legend i{border-radius:3px} .empty{border-radius:var(--r-md)} .dir-n em{border-radius:999px;border-color:var(--line)} .srccard .why b{letter-spacing:.13em} .tier li{border-bottom-color:var(--line)} .prose blockquote{border-radius:0 var(--r-sm) var(--r-sm) 0} .copywrap .copybtn{border-radius:6px} /* ============================================================ HOMEPAGE — hero Stripe scale: fewer things, much larger, much more air. ============================================================ */ .hero{padding:clamp(64px,11vw,150px) 0 clamp(56px,8vw,110px)} .hero-grid{grid-template-columns:1fr 1.15fr;gap:clamp(36px,6vw,90px);align-items:center} .hero .eyebrow{margin-bottom:30px} .h1{font-size:clamp(42px,7.2vw,88px);line-height:.99;letter-spacing:-.045em;margin:0 0 30px} .lede-tight{font-size:clamp(20px,1.9vw,26px);line-height:1.45;max-width:20ch; margin-bottom:40px;color:var(--slate);font-weight:400} .hero-cta{margin-bottom:22px} .btn-lg{font-size:16px;padding:21px 38px;border-radius:11px} .hero-note{font-size:13.5px;font-family:var(--serif);letter-spacing:-.005em;line-height:1.7} @media(max-width:1000px){.hero-grid{grid-template-columns:1fr}.lede-tight{max-width:30ch}} /* ============================================================ HOMEPAGE — live crawler monitor ============================================================ */ .monitor{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-2);overflow:hidden;max-width:760px} .monitor-hd{display:flex;align-items:center;gap:12px;padding:16px 22px; border-bottom:1px solid var(--line);background:#FBFCFE} .monitor-hd .t{font-family:var(--serif);font-weight:700;font-size:14.5px;letter-spacing:-.02em} .monitor-hd .live{margin-left:auto;display:flex;align-items:center;gap:7px; font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--sky-deep)} .monitor-hd .live i{width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 0 0 rgba(52,211,153,.6);animation:ping 2.6s cubic-bezier(.4,0,.6,1) infinite} @keyframes ping{0%{box-shadow:0 0 0 0 rgba(52,211,153,.55)}70%{box-shadow:0 0 0 8px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}} .monitor-grid{display:grid;grid-template-columns:repeat(3,1fr)} @media(max-width:720px){.monitor-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.monitor-grid{grid-template-columns:1fr}} .mrow{display:flex;align-items:center;gap:10px;padding:15px 22px; border-bottom:1px solid var(--line);border-right:1px solid var(--line);font-size:14px} .mrow .d{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none; box-shadow:0 0 0 3px rgba(52,211,153,.16)} .mrow .n{font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em;color:var(--mineral)} .mrow .s{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.12em; color:var(--green-deep);background:var(--green-soft);padding:4px 8px;border-radius:999px} .monitor-ft{padding:14px 22px;font-size:13.5px;color:var(--slate);background:#FBFCFE} /* ============================================================ HOMEPAGE — four futures, as coloured feature cards ============================================================ */ .futures{display:grid;grid-template-columns:repeat(2,1fr);gap:18px} @media(max-width:820px){.futures{grid-template-columns:1fr}} .fut{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); padding:30px 28px 28px;text-decoration:none;color:inherit;overflow:hidden; box-shadow:var(--sh-1);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease} .fut::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c)} .fut::after{content:"";position:absolute;right:-70px;top:-70px;width:190px;height:190px; border-radius:50%;background:var(--c-soft);opacity:.9;transition:transform .3s ease} .fut:hover{transform:translateY(-4px);box-shadow:var(--sh-3)} .fut:hover::after{transform:scale(1.16)} .fut > *{position:relative;z-index:1} .fut-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px; border-radius:10px;background:var(--c-soft);color:var(--c-deep); font-family:var(--mono);font-size:13px;font-weight:600;margin-bottom:18px} .fut-verb{font-family:var(--serif);font-weight:800;font-size:23px;letter-spacing:-.035em; margin:0 0 4px;color:var(--mineral)} .fut-name{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--c-deep);margin:0 0 14px} .fut-x{font-size:16px;line-height:1.55;color:var(--slate);margin:0 0 18px} .fut-go{font-family:var(--serif);font-weight:700;font-size:14.5px;color:var(--c-deep); display:inline-flex;align-items:center;gap:7px} .fut:hover .fut-go .a{transform:translateX(4px)} .fut-go .a{transition:transform .2s ease;display:inline-block} .fut.c1{--c:var(--brand);--c-soft:var(--brand-soft);--c-deep:var(--brand)} .fut.c2{--c:var(--cite);--c-soft:var(--cite-soft);--c-deep:var(--cite-deep)} .fut.c3{--c:var(--green);--c-soft:var(--green-soft);--c-deep:var(--green-deep)} .fut.c4{--c:var(--lav);--c-soft:var(--lav-soft);--c-deep:var(--lav-deep)} /* ============================================================ HOMEPAGE — the score report, as software ============================================================ */ .report{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg); box-shadow:var(--sh-3);overflow:hidden} .report-hd{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:16px 24px; border-bottom:1px solid var(--line);background:#FBFCFE} .report-hd .u{font-family:var(--mono);font-size:12px;color:var(--mineral)} .report-hd .dt{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--slate)} .report-hd .pill{margin-left:auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em; padding:5px 11px;border-radius:999px;background:var(--cite-soft);color:var(--cite-deep)} .report-body{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,48px); padding:clamp(24px,3.2vw,36px);align-items:center} @media(max-width:760px){.report-body{grid-template-columns:1fr}} .report .dial{width:168px;height:168px} .report .dial .num{font-size:46px} .rbars{display:grid;gap:15px} .rbar .l{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:7px} .rbar .l b{font-weight:700;color:var(--mineral)} .rbar .l span{font-family:var(--mono);font-size:11px;color:var(--slate)} .rbar .t{height:7px;background:var(--line);border-radius:4px;overflow:hidden} .rbar .t i{display:block;height:100%;width:0;border-radius:4px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)} .report-fix{border-top:1px solid var(--line)} .rfix{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid var(--line);font-size:15.5px} .rfix:last-child{border-bottom:0} .rfix .sev{font-family:var(--mono);font-size:8.5px;letter-spacing:.12em;padding:4px 9px; border-radius:999px;flex:none;min-width:64px;text-align:center} .rfix .sev.hi{background:#FEECEC;color:#B42318} .rfix .sev.md{background:var(--cite-soft);color:var(--cite-deep)} .rfix .sev.ok{background:var(--green-soft);color:var(--green-deep)} .rfix a{margin-left:auto;font-size:13.5px;color:var(--brand);text-decoration:none;white-space:nowrap} .rfix a:hover{text-decoration:underline} .report-ft{padding:16px 24px;background:#FBFCFE;border-top:1px solid var(--line); font-size:13.5px;color:var(--slate);display:flex;gap:14px;flex-wrap:wrap;align-items:center} /* ============================================================ THE CENTREPIECE — four machines, as an escalation Read you -> Answer as you -> Call you -> Transact with you ============================================================ */ .esc{position:relative} .esc-rail{position:absolute;top:56px;left:12%;right:12%;height:2px; background:linear-gradient(90deg,var(--brand) 0%,var(--cite) 34%,var(--green) 67%,var(--lav-deep) 100%); opacity:.30;border-radius:2px;z-index:0} @media(max-width:1100px){.esc-rail{display:none}} .futures{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative;z-index:1} @media(max-width:1100px){.futures{grid-template-columns:repeat(2,1fr);gap:18px}} @media(max-width:640px){.futures{grid-template-columns:1fr}} .fut{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px; padding:26px 24px 24px;text-decoration:none;color:inherit;overflow:hidden; box-shadow:var(--sh-1); transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,border-color .26s ease} .fut::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--c)} .fut::after{content:"";position:absolute;right:-80px;top:-80px;width:210px;height:210px; border-radius:50%;background:var(--c-soft);transition:transform .35s ease} .fut:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--c)} .fut:hover::after{transform:scale(1.2)} .fut > *{position:relative;z-index:1} .fut-ico{width:64px;height:64px;border-radius:16px;background:var(--c-soft); display:grid;place-items:center;margin-bottom:20px; box-shadow:inset 0 0 0 1px rgba(15,23,42,.04);transition:transform .3s cubic-bezier(.2,.8,.2,1)} .fut:hover .fut-ico{transform:translateY(-2px) rotate(-3deg)} .fut-ico svg{width:34px;height:34px;display:block} .fut-ico .st{stroke:var(--c-deep);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none} .fut-ico .fl{fill:var(--c-deep)} .fut-ico .fs{fill:var(--c);opacity:.55} .fut-step{position:absolute;top:22px;right:22px;font-family:var(--mono);font-size:10px; letter-spacing:.14em;color:var(--c-deep);opacity:.5} .fut-verb{font-family:var(--serif);font-weight:800;font-size:clamp(19px,1.6vw,22px); letter-spacing:-.035em;line-height:1.15;margin:0 0 5px;color:var(--mineral)} .fut-name{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase; color:var(--c-deep);margin:0 0 14px} .fut-x{font-size:15px;line-height:1.55;color:var(--slate);margin:0 0 18px} .fut-go{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--c-deep); display:inline-flex;align-items:center;gap:7px} .fut-go .a{transition:transform .2s ease;display:inline-block} .fut:hover .fut-go .a{transform:translateX(5px)} .fut.c1{--c:#1E3A8A;--c-soft:#EEF3FF;--c-deep:#1E3A8A} .fut.c2{--c:#F4B942;--c-soft:#FEF6E7;--c-deep:#234775} .fut.c3{--c:#34D399;--c-soft:#EAFBF4;--c-deep:#0F7A55} .fut.c4{--c:#DCCBFF;--c-soft:#F5F0FF;--c-deep:#6D48C4} /* the escalation, spelled out once, large */ .esc-line{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.6vw,20px); flex-wrap:wrap;margin:0 0 clamp(34px,4.5vw,52px)} .esc-line b{font-family:var(--serif);font-weight:800;font-size:clamp(15px,2.1vw,26px); letter-spacing:-.035em;color:var(--mineral);white-space:nowrap} .esc-line b:nth-of-type(1){color:#1E3A8A} .esc-line b:nth-of-type(2){color:#234775} .esc-line b:nth-of-type(3){color:#0F7A55} .esc-line b:nth-of-type(4){color:#6D48C4} .esc-line i{font-style:normal;color:var(--slate);opacity:.45;font-size:clamp(14px,1.8vw,22px)} /* ============================================================ HERO — Stripe-grade backdrop ============================================================ */ .hero{position:relative;isolation:isolate} .hero::before{content:"";position:absolute;inset:-20% -10% 0 -10%;z-index:-2;pointer-events:none; background: radial-gradient(46% 40% at 84% 6%, rgba(30,58,138,.20) 0%, transparent 62%), radial-gradient(38% 36% at 96% 34%, rgba(110,207,246,.30) 0%, transparent 64%), radial-gradient(40% 38% at 4% 84%, rgba(244,185,66,.26) 0%, transparent 62%), radial-gradient(34% 32% at 26% 4%, rgba(220,203,255,.34) 0%, transparent 62%); filter:blur(46px);opacity:.9} .hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:radial-gradient(rgba(15,23,42,.055) 1px, transparent 1px); background-size:26px 26px; -webkit-mask-image:radial-gradient(72% 62% at 50% 34%,#000 0%,transparent 74%); mask-image:radial-gradient(72% 62% at 50% 34%,#000 0%,transparent 74%)} .hero-grid{position:relative} /* ============================================================ CRAWLER MONITOR — signature component ============================================================ */ .monitor{max-width:none;border-radius:18px;box-shadow:var(--sh-3)} .monitor-hd{padding:18px 24px;gap:14px} .monitor-hd .t{font-size:15.5px} .monitor-hd .c{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--slate); background:var(--ink);padding:5px 10px;border-radius:999px} .monitor-grid{grid-template-columns:repeat(3,1fr)} .mrow{padding:16px 24px;position:relative;overflow:hidden} .mrow:nth-child(3n){border-right:0} .mrow .d{position:relative} .mrow .d::after{content:"";position:absolute;inset:-4px;border-radius:50%; border:1px solid var(--green);opacity:0;animation:mping 3s ease-out infinite} @keyframes mping{0%{opacity:.7;transform:scale(.6)}70%{opacity:0;transform:scale(1.8)}100%{opacity:0}} .mrow .n{font-size:12.5px} .monitor-ft{padding:16px 24px;font-size:14px} @media(prefers-reduced-motion:reduce){.mrow .d::after,.monitor-hd .live i{animation:none}} /* ============================================================ COMPOSITION — break the rectangle Angled bands, offset cards, a demo that floats off its column. ============================================================ */ /* the hero panel floats: lifted, tilted, overlapping the section below */ @media(min-width:1001px){ .hero-grid > div:last-child{transform:translateY(14px)} .panel{transform:rotate(-1.15deg) translateX(14px); transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease} .panel:hover{transform:rotate(0deg) translateX(14px) translateY(-4px);box-shadow:var(--sh-4)} .hero{padding-bottom:clamp(70px,9vw,130px)} } .h1{font-size:clamp(44px,8.4vw,104px);line-height:.95;letter-spacing:-.05em} .h1 .under::after{height:.11em;bottom:.04em} /* the centrepiece sits on an angled band that runs full bleed */ .band{position:relative;padding:clamp(84px,10vw,150px) 0 clamp(72px,9vw,130px); background:linear-gradient(168deg,#EAF2FF 0%,#F5F0FF 42%,#FBFCFE 100%); clip-path:polygon(0 clamp(40px,5vw,80px),100% 0,100% 100%,0 calc(100% - clamp(24px,3vw,48px))); margin-block:clamp(-20px,-2vw,-10px)} .band::before{content:"";position:absolute;right:-6%;top:12%;width:34vw;height:34vw;max-width:460px;max-height:460px; border-radius:50%;background:radial-gradient(circle at 34% 30%,rgba(93,169,255,.28),transparent 66%); filter:blur(20px);pointer-events:none} .band::after{content:"";position:absolute;left:-8%;bottom:6%;width:28vw;height:28vw;max-width:380px;max-height:380px; border-radius:50%;background:radial-gradient(circle at 60% 40%,rgba(246,181,52,.24),transparent 64%); filter:blur(22px);pointer-events:none} .band > *{position:relative;z-index:1} /* the escalation, at brand scale */ .esc-line{display:flex;align-items:center;justify-content:flex-start;gap:clamp(8px,1.4vw,18px); flex-wrap:wrap;margin:0 0 clamp(44px,5.5vw,72px)} .esc-line b{font-family:var(--serif);font-weight:800; font-size:clamp(24px,4.4vw,56px);line-height:1;letter-spacing:-.045em;white-space:nowrap} .esc-line b:nth-of-type(1){color:var(--navy)} .esc-line b:nth-of-type(2){color:var(--cite-deep)} .esc-line b:nth-of-type(3){color:var(--mint-deep)} .esc-line b:nth-of-type(4){color:var(--lav-deep)} .esc-line i{font-style:normal;opacity:.32;font-size:clamp(18px,3vw,40px);line-height:1} .esc-rail{display:none} /* offset cards — the row refuses to sit flat */ @media(min-width:1101px){ .futures .fut:nth-child(2){margin-top:34px} .futures .fut:nth-child(3){margin-top:14px} .futures .fut:nth-child(4){margin-top:48px} } .fut{background:rgba(255,255,255,.86);backdrop-filter:blur(6px);border-radius:20px;padding:0 0 26px} .fut-scene{display:block;width:100%;height:auto;border-radius:20px 20px 0 0;background:var(--c-soft)} .fut-body{padding:22px 24px 0} .fut-step{top:16px;right:18px;background:rgba(255,255,255,.7);padding:3px 8px;border-radius:999px} .fut-ico{display:none} .fut-verb{font-size:clamp(19px,1.5vw,23px)} /* illustration ink */ .il-st{stroke:var(--c-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;fill:none} .il-w{fill:#fff;stroke:var(--c-deep);stroke-width:1.6;stroke-linejoin:round} .il-s{fill:var(--c);opacity:.30} .il-a{fill:var(--c-deep)} .il-hl{fill:#F6B534} .il-mint{fill:#B8F2D6} .il-lav{fill:#DCCBFF} .il-dot{fill:var(--c-deep);opacity:.35} .fut.c1{--c:#5DA9FF;--c-soft:#EAF2FF;--c-deep:#193A6A} .fut.c2{--c:#F6B534;--c-soft:#FEF6E6;--c-deep:#234775} .fut.c3{--c:#B8F2D6;--c-soft:#ECFCF4;--c-deep:#0B7A52} .fut.c4{--c:#DCCBFF;--c-soft:#F5F0FF;--c-deep:#6941C6} /* ============================================================ FOOTER Its own colour block: deep blue ground, amber headings, sky-blue for the closing line. Both accents present, neither loud. ============================================================ */ footer{ --foot-bg:#1F3B5B; --foot-accent:#F4B942; --foot-accent-2:#73C7F7; --foot-text:#FFFFFF; --foot-muted:#C5D1DF; background:var(--foot-bg);color:var(--foot-text); border-top:0;position:relative; padding:clamp(56px,7vw,88px) 0 40px} footer::before{content:"";position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--foot-accent) 0%,var(--foot-accent-2) 58%,transparent 100%); opacity:.85} footer::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 62% at 88% 0%,rgba(115,199,247,.13),transparent 62%);} footer .wrap{position:relative;z-index:1} .foot-grid{gap:34px 26px} .foot-h{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--foot-accent);margin:0 0 15px} .foot-col a{font-family:var(--serif);font-size:13.5px;font-weight:500;letter-spacing:-.01em; color:var(--foot-muted);text-decoration:none;line-height:1.5;display:inline-block; transition:color .18s ease} .foot-col a:hover{color:var(--foot-accent)} .foot-col li{margin-bottom:9px} .foot-base{margin-top:52px;padding-top:24px;border-top:1px solid rgba(197,209,223,.22); display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center; font-family:var(--serif);font-size:13px;letter-spacing:-.005em;color:var(--foot-muted);opacity:1} .foot-base a{color:var(--foot-accent-2);text-decoration:none;border-bottom:1px solid rgba(115,199,247,.4)} .foot-base a:hover{color:var(--foot-accent);border-color:var(--foot-accent)} /* ============================================================ SPACING — the premium lever. Everything breathes. ============================================================ */ section{padding:clamp(80px,12vw,190px) 0} section.tight{padding-block:clamp(56px,7vw,104px)} .sec-head{margin-bottom:clamp(48px,6.5vw,90px)} .final{padding-block:clamp(96px,14vw,220px)} .hero{padding:clamp(76px,13vw,180px) 0 clamp(80px,11vw,160px)} .band{padding:clamp(104px,13vw,200px) 0 clamp(96px,12vw,180px)} /* ============================================================ IDENTITY — the mark is the model. Four squares, four colours, four machines. Used everywhere. ============================================================ */ .brand .mk{width:30px;height:30px;border:0;border-radius:9px;padding:5px; background:var(--ink-2);box-shadow:inset 0 0 0 1px rgba(35,71,117,.12); display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2.5px} .brand .mk i{display:block;border-radius:2.5px;font-style:normal} .brand .mk i:nth-child(1){background:#234775} .brand .mk i:nth-child(2){background:#F6B534} .brand .mk i:nth-child(3){background:#C7F1DD} .brand .mk i:nth-child(4){background:#E2D6FF} footer .brand .mk{background:rgba(255,255,255,.1);box-shadow:none} /* the four-colour rule — the recurring section device */ .eyebrow::before{width:34px;height:3px;border-radius:2px; background:linear-gradient(90deg,#234775 0 25%,#F6B534 25% 50%,#C7F1DD 50% 75%,#E2D6FF 75% 100%)} /* ============================================================ THE FOUR MACHINES — full-page centrepiece ============================================================ */ .esc-line{margin-bottom:clamp(60px,8vw,110px)} .esc-line b{font-size:clamp(26px,5vw,64px)} .steps{position:relative;display:grid;gap:clamp(56px,8vw,128px)} .steps::before{content:"";position:absolute;left:50%;top:60px;bottom:60px;width:2px; transform:translateX(-50%);border-radius:2px; background:linear-gradient(180deg,#234775 0%,#F6B534 34%,#0B7A52 67%,#6941C6 100%);opacity:.20} @media(max-width:900px){.steps::before{left:26px}} .step{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,80px); align-items:center;text-decoration:none;color:inherit} .step:nth-child(even) .step-txt{order:2} .step:nth-child(even) .step-art{order:1} @media(max-width:900px){ .step{grid-template-columns:1fr;gap:26px;padding-left:64px} .step:nth-child(even) .step-txt,.step:nth-child(even) .step-art{order:initial} } .step-n{position:absolute;left:50%;top:-8px;transform:translateX(-50%); width:52px;height:52px;border-radius:16px;display:grid;place-items:center; background:#fff;box-shadow:0 0 0 6px var(--ink), var(--sh-2); font-family:var(--mono);font-size:15px;font-weight:600;color:var(--c-deep);z-index:2} @media(max-width:900px){.step-n{left:0;transform:none;top:0;width:52px}} .step-txt{max-width:46ch} .step-verb{font-family:var(--serif);font-weight:800;line-height:.98;letter-spacing:-.045em; font-size:clamp(34px,5.6vw,68px);margin:0 0 10px;color:var(--c-deep)} .step-name{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate);margin:0 0 22px} .step-x{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--slate);margin:0 0 26px} .step-go{font-family:var(--serif);font-weight:700;font-size:16px;color:var(--c-deep); display:inline-flex;align-items:center;gap:8px} .step-go .a{transition:transform .22s ease;display:inline-block} .step:hover .step-go .a{transform:translateX(6px)} .step-art{border-radius:26px;background:var(--c-soft);padding:clamp(20px,2.6vw,34px); box-shadow:var(--sh-2);transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease} .step:hover .step-art{transform:translateY(-6px) rotate(-.8deg);box-shadow:var(--sh-3)} .step-art svg{display:block;width:100%;height:auto} .step.c1{--c:#6AB4FF;--c-soft:#EAF3FF;--c-deep:#234775} .step.c2{--c:#F6B534;--c-soft:#FEF6E6;--c-deep:#234775} .step.c3{--c:#C7F1DD;--c-soft:#EDFBF4;--c-deep:#0B7A52} .step.c4{--c:#E2D6FF;--c-soft:#F6F2FF;--c-deep:#6941C6} .futures{display:none} /* ============================================================ THE FOUR-MACHINE COLOUR LANGUAGE One token trio per pillar, used identically everywhere on the site. 1 Read you blue #60A5FA discovery, crawlers, visibility 2 Answer as you purple #C084FC identity, voice, conversation 3 Call you green #34D399 connected systems, availability 4 Transact rose #FB7185 action, momentum, completion deep berry #9F1239 for ink — a COOL dark, which is why it never drifts toward the mud a dark orange would. All four are the same tonal step, which is why they sit together. Amber is no longer a pillar colour: it belongs entirely to the implementation pack. Tinted grounds, never saturated blocks. -deep values are text-safe on their own tint (all clear WCAG AA, 5.5–6.2). ============================================================ */ :root{ --p1:#60A5FA; --p1-soft:#EFF6FF; --p1-deep:#1E40AF; --p2:#C084FC; --p2-soft:#F5F0FF; --p2-deep:#7E22CE; --p3:#34D399; --p3-soft:#ECFDF5; --p3-deep:#047857; --p4:#FB7185; --p4-soft:#FFF1F2; --p4-deep:#9F1239; } .step.c1,.fut.c1,.p1{--c:var(--p1);--c-soft:var(--p1-soft);--c-deep:var(--p1-deep)} .step.c2,.fut.c2,.p2{--c:var(--p2);--c-soft:var(--p2-soft);--c-deep:var(--p2-deep)} .step.c3,.fut.c3,.p3{--c:var(--p3);--c-soft:var(--p3-soft);--c-deep:var(--p3-deep)} .step.c4,.fut.c4,.p4{--c:var(--p4);--c-soft:var(--p4-soft);--c-deep:var(--p4-deep)} .step-art{background:var(--c-soft);box-shadow:inset 0 0 0 1px var(--c), var(--sh-2)} .brand .mk i:nth-child(1){background:var(--p1)} .brand .mk i:nth-child(2){background:var(--p2)} .brand .mk i:nth-child(3){background:var(--p3)} .brand .mk i:nth-child(4){background:var(--p4)} .eyebrow::before{background:linear-gradient(90deg, var(--p1) 0 25%,var(--p2) 25% 50%,var(--p3) 50% 75%,var(--p4) 75% 100%)} .esc-line b:nth-of-type(1){color:var(--p1-deep)} .esc-line b:nth-of-type(2){color:var(--p2-deep)} .esc-line b:nth-of-type(3){color:var(--p3-deep)} .esc-line b:nth-of-type(4){color:var(--p4-deep)} .steps::before{background:linear-gradient(180deg, var(--p1) 0%,var(--p2) 34%,var(--p3) 67%,var(--p4) 100%);opacity:.28} .band{background:linear-gradient(166deg,#EFF6FF 0%,#F5F0FF 38%,#ECFDF5 70%,#FFF1F2 100%)} .band::before{background:radial-gradient(circle at 34% 30%,rgba(192,132,252,.26),transparent 66%)} .band::after{background:radial-gradient(circle at 60% 40%,rgba(251,113,133,.26),transparent 64%)} .hero::before{background: radial-gradient(46% 40% at 84% 6%, rgba(96,165,250,.26) 0%, transparent 62%), radial-gradient(38% 36% at 96% 34%, rgba(192,132,252,.26) 0%, transparent 64%), radial-gradient(40% 38% at 4% 84%, rgba(251,113,133,.26) 0%, transparent 62%), radial-gradient(34% 32% at 26% 4%, rgba(52,211,153,.22) 0%, transparent 62%)} /* ---- the framework, as a page-level device ---- */ .pillstrip{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(28px,3.5vw,44px)} .ps{display:inline-flex;align-items:center;gap:9px;padding:9px 15px 9px 12px; border-radius:999px;border:1px solid var(--line);background:#fff;text-decoration:none; font-family:var(--serif);font-size:13.5px;font-weight:600;letter-spacing:-.01em; color:var(--slate);transition:all .2s ease;box-shadow:var(--sh-1)} .ps i{width:9px;height:9px;border-radius:3px;background:var(--c);flex:none;font-style:normal} .ps .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;opacity:.55} .ps:hover{border-color:var(--c);color:var(--c-deep)} .ps.on{background:var(--c-soft);border-color:var(--c);color:var(--c-deep);font-weight:700} .ps.on i{box-shadow:0 0 0 3px color-mix(in srgb,var(--c) 30%,transparent)} @media(max-width:640px){.ps .lbl{display:none}.ps{padding:9px 13px}} /* a page inherits its pillar colour for accents */ body.p1,body.p2,body.p3,body.p4{--accent:var(--c-deep)} body.p1 .phead .eyebrow::before,body.p2 .phead .eyebrow::before, body.p3 .phead .eyebrow::before,body.p4 .phead .eyebrow::before{background:var(--c)} body.p1 .prose a,body.p2 .prose a,body.p3 .prose a,body.p4 .prose a{color:var(--c-deep);border-bottom-color:color-mix(in srgb,var(--c) 45%,transparent)} body.p1 .prose a:hover,body.p2 .prose a:hover,body.p3 .prose a:hover,body.p4 .prose a:hover{border-color:var(--c-deep)} body.p1 .callout,body.p2 .callout,body.p3 .callout,body.p4 .callout{background:var(--c-soft);border-color:var(--c)} body.p1 .callout b,body.p2 .callout b,body.p3 .callout b,body.p4 .callout b{color:var(--c-deep)} body.p1 .prose blockquote,body.p2 .prose blockquote,body.p3 .prose blockquote,body.p4 .prose blockquote{ border-left-color:var(--c);background:var(--c-soft)} body.p1 .nextbar,body.p2 .nextbar,body.p3 .nextbar,body.p4 .nextbar{border-top-color:var(--c)} body.p1 .prose code,body.p2 .prose code,body.p3 .prose code,body.p4 .prose code{background:var(--c-soft);color:var(--c-deep)} /* ============================================================ THE IMPLEMENTATION PACK — warm cream The free checker is software: white, cool, technical. The pack is people doing work: cream, warm, considered. The two cards should not look like the same kind of thing. ============================================================ */ .tier.pro{ --c:#F6B534; --c-soft:#FFF8EC; --c-deep:#234775; background:linear-gradient(135deg,#FFF8EC 0%,#FFFDF8 100%); border:1px solid #F2D7A6; color:var(--mineral); box-shadow:0 24px 60px -20px rgba(143,94,12,.22), 0 6px 18px -8px rgba(143,94,12,.10); position:relative;overflow:hidden} .tier.pro::before{content:"";position:absolute;inset:0 0 auto 0;height:3px; background:linear-gradient(90deg,#F6B534,#F2D7A6)} .tier.pro::after{content:"";position:absolute;right:-90px;top:-90px;width:240px;height:240px; border-radius:50%;background:radial-gradient(circle at 40% 40%,rgba(246,181,52,.16),transparent 68%); pointer-events:none} .tier.pro > *{position:relative;z-index:1} .tier.pro .tier-k{color:#234775} .tier.pro .tier-p{color:var(--mineral)} .tier.pro .tier-s{color:#4B5768} .tier.pro li{color:var(--mineral);border-bottom:1px dashed rgba(242,215,166,.9)} .tier.pro li::before{color:#234775} .tier.pro .btn-cite{background:#F6B534;color:#3F2D05;border-color:#E0A426; box-shadow:0 2px 4px rgba(143,94,12,.14),0 10px 26px -10px rgba(246,181,52,.9)} .tier.pro .btn-cite:hover{background:#FFC64F;color:#3F2D05} /* the same warmth on the pack page itself */ body.pack .buy{ background:linear-gradient(135deg,#FFF8EC 0%,#FFFDF8 100%); border:1px solid #F2D7A6; box-shadow:0 24px 60px -20px rgba(143,94,12,.20), 0 6px 18px -8px rgba(143,94,12,.09)} body.pack .buy label{color:#234775} body.pack .buy-note,body.pack .buy-fine,body.pack .codetoggle{color:#4B5768} body.pack .buy input{background:#fff;border-color:#EBD9B8} body.pack .buy input:focus{border-color:#F6B534;box-shadow:0 0 0 3px rgba(246,181,52,.22)} body.pack .buy .btn-cite{background:#F6B534;color:#3F2D05;border-color:#E0A426} body.pack .phead{position:relative} body.pack .verdict{background:#FFFCF5;border-color:#F2D7A6} body.pack .prose a{color:#234775;border-bottom-color:rgba(246,181,52,.5)} body.pack .prose a:hover{border-color:#234775} body.pack .callout{background:#FFF8EC;border-color:#F2D7A6} body.pack .callout b{color:#234775} body.pack .nextbar{border-top-color:#F2D7A6} body.pack .prose code{background:#FFF3DF;color:#3F4756} body.pack .eyebrow::before{background:linear-gradient(90deg,#F6B534,#F2D7A6)} /* ============================================================ BUTTON HIERARCHY One filled button on the whole site: Run the free check. Everything else is a border button. Colour is earned, not sprayed. .btn-cite filled — the single conversion action .btn-ghost line — explore more (default secondary) .btn-outline line — the pack. 2px navy. Border as confidence. ============================================================ */ /* secondary: white pill, restrained, editorial */ .btn-ghost{ background:#fff;border:1px solid #D8E2F0;border-radius:999px; color:#234775;font-weight:600;font-size:14px;padding:13px 24px; box-shadow:0 1px 2px rgba(35,71,117,.05); transition:border-color .2s ease,background .2s ease,transform .2s ease,box-shadow .2s ease} .btn-ghost:hover{border-color:#6AB4FF;background:#F8FBFF;color:#234775; box-shadow:0 2px 8px rgba(35,71,117,.08)} section.dark .btn-ghost{background:transparent;border-color:rgba(197,209,223,.42);color:#fff} section.dark .btn-ghost:hover{border-color:#6AB4FF;background:rgba(106,180,255,.08);color:#fff} /* the pack: outlined navy. The border is the signal. */ .btn-outline{ background:transparent;border:2px solid #234775;border-radius:999px; color:#234775;font-family:var(--serif);font-weight:700;font-size:15px; letter-spacing:-.01em;padding:15px 30px;display:inline-flex;align-items:center;gap:9px; text-decoration:none;cursor:pointer;box-shadow:none; transition:background .2s ease,color .2s ease,transform .2s ease} .btn-outline:hover{background:#234775;color:#FFF8EC;transform:translateY(-2px)} .tier.pro .btn-outline,body.pack .buy .btn-outline{width:auto} body.pack .buy .btn-outline{width:100%;justify-content:center} /* the inline card links become pills too */ .step-go,.fut-go{ background:#fff;border:1px solid #D8E2F0;border-radius:999px; padding:11px 20px;font-size:14px;font-weight:600;color:#234775; box-shadow:0 1px 2px rgba(35,71,117,.05); transition:border-color .2s ease,background .2s ease,box-shadow .2s ease} .step:hover .step-go,.fut:hover .fut-go{border-color:var(--c);background:var(--c-soft);color:var(--c-deep)} /* one shape language: everything is a pill, hierarchy comes from fill weight */ .btn{border-radius:999px} .btn-lg{border-radius:999px;padding:20px 36px} /* ============================================================ RESPONSIVE SIZING — stop the step cards ballooning The illustrations are drawn at 300x168. Left at width:100% they scale ~2x in a wide column and the cards grow with them. ============================================================ */ .step-art{display:grid;place-items:center;padding:clamp(18px,2.2vw,30px);border-radius:22px} .step-art svg{width:100%;max-width:400px;height:auto} .step{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} .step-txt{max-width:44ch} /* mid-desktop: the two-up gets cramped before it gets roomy again */ @media(min-width:901px) and (max-width:1180px){ .step{gap:clamp(24px,3.4vw,44px)} .step-verb{font-size:clamp(30px,3.8vw,46px)} .step-x{font-size:17px} .step-art{padding:20px} .step-art svg{max-width:340px} .steps{gap:clamp(48px,6vw,86px)} } /* very wide: cap the illustration rather than letting the row stretch */ @media(min-width:1400px){ .step-art svg{max-width:430px} } /* the monitor and report should not sprawl either */ .monitor,.report{max-width:1000px} .esc-line{max-width:none} /* ============================================================ FOOTER — Stripe treatment Light ground, dark navy headings, slate links, hairline rules. The separation comes from a border and a shift in tone, not a slab of colour. ============================================================ */ footer{ --foot-bg:#FFFFFF; --foot-head:#234775; --foot-link:#4B5768; --foot-hover:#1A5FB4; --foot-muted:#64748B; --foot-line:#E6EBF1; background:var(--foot-bg);color:var(--mineral); border-top:1px solid var(--foot-line); padding:clamp(64px,8vw,104px) 0 44px;position:relative} footer::before{content:"";position:absolute;top:-1px;left:0;width:180px;height:2px; background:linear-gradient(90deg, var(--p1) 0 25%,var(--p2) 25% 50%,var(--p3) 50% 75%,var(--p4) 75% 100%); border-radius:0 2px 2px 0} footer::after{content:none} footer .wrap{position:relative;z-index:1} .foot-grid{gap:40px 28px} .foot-h{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:-.01em; text-transform:none;color:var(--foot-head);margin:0 0 16px} .foot-col a{font-family:var(--serif);font-size:13.5px;font-weight:400;letter-spacing:-.005em; color:var(--foot-link);text-decoration:none;line-height:1.5;display:inline-block; transition:color .16s ease} .foot-col a:hover{color:var(--foot-hover)} .foot-col li{margin-bottom:10px} .foot-base{margin-top:56px;padding-top:26px;border-top:1px solid var(--foot-line); display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center; font-family:var(--serif);font-size:13px;letter-spacing:-.005em;color:var(--foot-muted);opacity:1} .foot-base a{color:var(--foot-link);text-decoration:none;border-bottom:1px solid var(--foot-line)} .foot-base a:hover{color:var(--foot-hover);border-color:var(--foot-hover)} footer .brand .mk{background:#fff;box-shadow:inset 0 0 0 1px rgba(35,71,117,.12)} /* ============================================================ 2 · CRAWLER STATUS BADGE ============================================================ */ .monitor-hd{align-items:center} .mstat{margin-left:auto;display:flex;align-items:center;gap:10px} .mbadge{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 10px; border-radius:999px;background:#ECFDF5;border:1px solid #A7F3D0; font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#047857;font-weight:500} .mbadge i{width:7px;height:7px;border-radius:50%;background:#34D399;flex:none; box-shadow:0 0 0 0 rgba(52,211,153,.65);animation:ping 2.4s cubic-bezier(.4,0,.6,1) infinite} .mcount{font-family:var(--serif);font-size:13px;font-weight:600;color:var(--slate); padding:6px 12px;border-radius:999px;background:var(--ink);border:1px solid var(--line)} .monitor-hd .c,.monitor-hd .live{display:none} /* ============================================================ 3 · HERO — more confidence ============================================================ */ .h1{font-size:clamp(48px,9.4vw,120px);line-height:.94;letter-spacing:-.052em} .lede-tight{font-size:clamp(20px,2vw,27px);max-width:19ch} /* ============================================================ 4 · THE PACK — lighter, calmer, not a pillar colour ============================================================ */ .tier.pro{ background:linear-gradient(140deg,#FFFDF7 0%,#FFFFFF 100%); border:1px solid #EBD8B0; box-shadow:0 22px 54px -22px rgba(120,90,30,.16), 0 4px 14px -6px rgba(120,90,30,.07)} .tier.pro::before{background:linear-gradient(90deg,#EBD8B0,#F7E9C8)} .tier.pro::after{background:radial-gradient(circle at 40% 40%,rgba(235,216,176,.30),transparent 68%)} .tier.pro li{border-bottom:1px dashed #F0E3C6} .tier.pro li::before{color:#B08A3E} .tier.pro .tier-k{color:#234775} .tier.pro .tier-s{color:#4B5768} body.pack .buy{ background:linear-gradient(140deg,#FFFDF7 0%,#FFFFFF 100%); border:1px solid #EBD8B0; box-shadow:0 22px 54px -22px rgba(120,90,30,.15), 0 4px 14px -6px rgba(120,90,30,.06)} body.pack .buy label{color:#234775} body.pack .buy input{border-color:#EFE2C6} body.pack .buy input:focus{border-color:#D9BE7E;box-shadow:0 0 0 3px rgba(217,190,126,.28)} body.pack .verdict{background:#FFFDF7;border-color:#EBD8B0} body.pack .callout{background:#FFFDF7;border-color:#EBD8B0} body.pack .callout b{color:#234775} body.pack .nextbar{border-top-color:#EBD8B0} body.pack .prose code{background:#FBF6E9;color:#3F4756} body.pack .eyebrow::before{background:linear-gradient(90deg,#EBD8B0,#F7E9C8)} body.pack .prose a{color:#234775;border-bottom-color:rgba(184,150,70,.45)} body.pack .prose a:hover{border-color:#234775} /* ============================================================ 5 · THE THESIS — the bridge between framework, checker and pack ============================================================ */ .thesis{position:relative;max-width:900px;margin:clamp(56px,7vw,96px) auto 0; padding:clamp(30px,4vw,46px) clamp(28px,4vw,52px); background:#fff;border:1px solid var(--line);border-radius:22px; box-shadow:var(--sh-2);text-align:center} .thesis::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;border-radius:22px 22px 0 0; background:linear-gradient(90deg, var(--p1) 0 25%,var(--p2) 25% 50%,var(--p3) 50% 75%,var(--p4) 75% 100%)} .thesis-dots{display:flex;justify-content:center;gap:7px;margin:0 0 20px} .thesis-dots i{width:10px;height:10px;border-radius:3px;display:block} .thesis-dots i:nth-child(1){background:var(--p1)} .thesis-dots i:nth-child(2){background:var(--p2)} .thesis-dots i:nth-child(3){background:var(--p3)} .thesis-dots i:nth-child(4){background:var(--p4)} .thesis p{margin:0;font-family:var(--serif);font-weight:700; font-size:clamp(20px,2.5vw,30px);line-height:1.35;letter-spacing:-.03em;color:var(--mineral)} .thesis p em{font-style:normal;color:var(--slate);font-weight:400; display:block;font-size:clamp(15px,1.4vw,18px);line-height:1.6;margin-top:16px;letter-spacing:-.01em} /* ============================================================ NO BROWN. EVER. The rule that keeps it out: warm hues are SURFACES and HAIRLINES only. Never text, never a marker, never an icon. Any amber dark enough to be legible as text has become brown by definition — so text is always navy or slate, and the warmth is carried by the ground it sits on. ============================================================ */ /* --- the pack: cream ground, sand border, navy ink --- */ .tier.pro .tier-k{color:var(--slate)} .tier.pro .tier-p,.tier.pro li{color:var(--mineral)} .tier.pro .tier-s{color:var(--slate)} .tier.pro li::before{color:#234775} .tier.pro li strong{color:var(--mineral)} body.pack .buy label{color:#234775} body.pack .buy-note,body.pack .buy-fine,body.pack .codetoggle{color:var(--slate)} body.pack .callout b{color:#234775} body.pack .prose a{color:#1D4ED8;border-bottom-color:rgba(29,78,216,.32)} body.pack .prose a:hover{color:#234775;border-color:#234775} body.pack .prose code{background:#F6F1E4;color:#3F4756} body.pack .verdict dt{color:var(--slate)} body.pack .buy input:focus{border-color:#6AB4FF;box-shadow:0 0 0 3px rgba(96,165,250,.25)} /* --- the demo source card: amber is the highlight, navy is the writing --- */ .srccard .url{color:#1D4ED8} .srccard .ttl,.srccard .why b{color:var(--slate)} .chip{color:#234775;border-color:#E2D6BD;background:#fff} /* --- checker chrome --- */ .grade{border-color:var(--line);color:var(--slate)} .fixlist .p{color:var(--slate)} .fixlist .p.crit{color:#B42318} .fixlist .p.warn{color:#B54708} .report-hd .pill{background:var(--ink);color:var(--slate);border:1px solid var(--line)} /* --- the one place a warm fill stays: the filled CTA --- */ .btn-cite{background:#F6B534;color:#3F2D05;border-color:#F6B534} .btn-cite:hover{background:#FFC64F;color:#3F2D05} .tier.pro .btn-outline{border-color:#234775;color:#234775} .tier.pro .btn-outline:hover{background:#234775;color:#FFFDF7} /* ============================================================ PRICING → SERVICE CARDS Lead with what happens, not with the number. ============================================================ */ .tier-lead{font-family:var(--serif);font-weight:800;font-size:clamp(21px,2.1vw,26px); letter-spacing:-.035em;line-height:1.2;margin:12px 0 10px;color:var(--mineral)} .tier-p{font-family:var(--serif);font-weight:700;font-size:22px;letter-spacing:-.02em; margin:0 0 18px;color:var(--slate);display:flex;align-items:baseline;gap:9px;flex-wrap:wrap} .tier-p small{font-family:var(--serif);font-size:13.5px;font-weight:400;color:var(--slate);opacity:.8} .tier.pro{border-color:#E7D7B0} .tier.pro::before{background:linear-gradient(90deg,#E7D7B0,#F5EAD2)} .tier.pro .tier-p{color:var(--mineral)} /* ============================================================ FOOTER — deep trustworthy blue ============================================================ */ footer{ --foot-bg:#234775; --foot-line:rgba(185,203,226,.22); background:var(--foot-bg);color:#fff;border-top:0; padding:clamp(64px,8vw,104px) 0 44px} footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg, var(--p1) 0 25%,var(--p2) 25% 50%,var(--p3) 50% 75%,var(--p4) 75% 100%);border-radius:0} footer::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(62% 66% at 86% 0%,rgba(96,165,250,.16),transparent 64%)} .foot-h{font-family:var(--serif);font-size:13px;font-weight:700;letter-spacing:-.01em; text-transform:none;color:#FFFFFF;margin:0 0 16px} .foot-col a{font-family:var(--serif);font-size:13.5px;font-weight:400;letter-spacing:-.005em; color:#B9CBE2;text-decoration:none;line-height:1.5;display:inline-block;transition:color .16s ease} .foot-col a:hover{color:#FFFFFF} .foot-col li{margin-bottom:10px} .foot-base{margin-top:56px;padding-top:26px;border-top:1px solid var(--foot-line); color:#B9CBE2;font-size:13px} .foot-base a{color:#FBC7CF;border-bottom:1px solid rgba(251,199,207,.38)} .foot-base a:hover{color:#fff;border-color:#fff} footer .brand .mk{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)} /* ============================================================ THE FRAMEWORK IS A TIMELINE Today -> Near-term -> Emerging -> Future. Colour presence climbs with the horizon: step one is a whisper, step four is the loudest thing in the section, because it is the future. ============================================================ */ .step-when{display:inline-flex;align-items:center;gap:7px;margin:0 0 16px; padding:6px 13px 6px 11px;border-radius:999px; font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase; background:#fff;border:1px solid var(--line);color:var(--slate)} .step-when i{width:7px;height:7px;border-radius:50%;background:var(--c);flex:none;font-style:normal} /* intensity ramp */ .step.c1 .step-art{background:var(--c-soft);box-shadow:inset 0 0 0 1px rgba(96,165,250,.30), var(--sh-1)} .step.c2 .step-art{background:linear-gradient(150deg,#F5F0FF 0%,#FBF8FF 100%); box-shadow:inset 0 0 0 1px rgba(192,132,252,.38), var(--sh-2)} .step.c3 .step-art{background:linear-gradient(150deg,#E9FBF3 0%,#F4FEF9 100%); box-shadow:inset 0 0 0 1px rgba(52,211,153,.45), var(--sh-2)} .step.c4 .step-art{background:linear-gradient(145deg,#FFE4E6 0%,#FFF1F2 55%,#FFF8F9 100%); box-shadow:inset 0 0 0 1.5px rgba(251,113,133,.62), 0 26px 60px -22px rgba(251,113,133,.42), var(--sh-2)} /* the future gets the only filled step marker. Coral at full brightness cannot carry white text (2.6:1), so the fill deepens just enough to clear AA while the glow around it stays the bright coral. */ .step.c4 .step-n{background:#9F1239;color:#fff; box-shadow:0 0 0 6px var(--ink), 0 0 0 8px rgba(251,113,133,.32), 0 10px 26px -6px rgba(251,113,133,.7)} .step.c4 .step-when{background:#FFF1F2;border-color:rgba(251,113,133,.55);color:#9F1239;font-weight:500} .step.c4 .step-when i{box-shadow:0 0 0 3px rgba(251,113,133,.28)} .step.c4 .step-go{border-color:rgba(251,113,133,.58);background:#FFF8F9;color:#9F1239} .step.c4:hover .step-go{background:#FFF1F2;border-color:var(--p4)} .step.c4 .step-verb{text-shadow:0 1px 0 rgba(255,255,255,.6)} /* the last word of the escalation carries the most weight */ .esc-line b:nth-of-type(4){position:relative} .esc-line b:nth-of-type(4)::after{content:"";position:absolute;left:0;right:0;bottom:-.14em; height:.09em;border-radius:3px;background:var(--p4);opacity:.55} /* ============================================================ DIALS — the SVG must follow its container The markup carries width="210" height="210". Any container smaller than that (the 132px before/after pair, the 168px report dial) let the circle overflow while .val kept centring on the box — so the number sat up and left of the ring, and the labels below landed inside it. ============================================================ */ .dial{display:block} .dial svg{width:100%;height:100%;display:block;overflow:visible} .dial .val{position:absolute;inset:0;display:grid;place-items:center;text-align:center; pointer-events:none} .dial .val .num{line-height:1} /* the before/after pair: give the labels and caption real clearance */ .ba{align-items:flex-start;gap:clamp(20px,4vw,56px);margin-bottom:0} .ba-item{display:flex;flex-direction:column;align-items:center} .dial.sm{width:clamp(116px,13vw,150px);height:clamp(116px,13vw,150px)} .dial.sm .num{font-size:clamp(26px,3vw,34px)} .ba-lab{margin-top:16px} .ba-arrow{align-self:center;padding:0;margin-top:clamp(48px,6vw,62px)} @media(max-width:520px){.ba-arrow{margin-top:0;transform:rotate(90deg)}} .ba-cap{margin-top:clamp(24px,3vw,34px);max-width:62ch;margin-inline:auto} /* ============================================================ PILL SAFETY A 999px radius only reads as a pill while the content is one line. Wrap it and you get a stadium. So: buttons do not wrap, and if the viewport ever forces it, the radius drops to a rounded rectangle. ============================================================ */ .btn,.step-go,.fut-go,.plat-tab,.ps,.mbadge,.mcount,.chip{white-space:nowrap} .btn,.step-go,.fut-go{max-width:100%} .step-go,.fut-go{align-self:flex-start} @media(max-width:520px){ .btn,.step-go,.fut-go, .btn-lg{border-radius:16px} .ps{white-space:normal;border-radius:14px} } /* very long labels shrink rather than break */ @media(max-width:1180px) and (min-width:901px){ .step-go{font-size:13.5px;padding:10px 17px} } /* ============================================================ AURORA — the signature hero gradient Four drifting fields, one per pillar, heavily blurred so they read as light rather than as shapes. Slow enough to notice only on a second look. ============================================================ */ .aurora{position:absolute;inset:-15% -10% -5% -10%;z-index:-3;pointer-events:none;overflow:hidden} .aurora i{position:absolute;display:block;border-radius:50%;filter:blur(64px);opacity:.55} .aurora i:nth-child(1){width:46vw;height:38vw;max-width:660px;max-height:540px;top:-6%;right:-4%; background:radial-gradient(circle at 40% 40%,#60A5FA,transparent 68%);animation:drift1 26s ease-in-out infinite} .aurora i:nth-child(2){width:38vw;height:34vw;max-width:540px;max-height:480px;top:14%;right:22%; background:radial-gradient(circle at 50% 50%,#C084FC,transparent 66%);animation:drift2 32s ease-in-out infinite} .aurora i:nth-child(3){width:34vw;height:30vw;max-width:470px;max-height:420px;bottom:-8%;left:-6%; background:radial-gradient(circle at 55% 45%,#FB7185,transparent 66%);animation:drift3 29s ease-in-out infinite} .aurora i:nth-child(4){width:28vw;height:26vw;max-width:380px;max-height:350px;bottom:6%;left:26%; background:radial-gradient(circle at 45% 55%,#34D399,transparent 68%);opacity:.34; animation:drift2 36s ease-in-out infinite reverse} @keyframes drift1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-4%,4%,0) scale(1.08)}} @keyframes drift2{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(5%,-3%,0) scale(1.06)}} @keyframes drift3{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,-5%,0) scale(1.1)}} @media(prefers-reduced-motion:reduce){.aurora i{animation:none}} @media(max-width:700px){.aurora i{filter:blur(48px);opacity:.42}} .hero::before{opacity:.35} /* ============================================================ CARD DEPTH A hairline of white along the top edge is what makes a card read as a physical surface catching light, rather than a rectangle with a shadow. ============================================================ */ .dir,.pil,.tier,.monitor,.report,.panel,.thesis,.verdict,.plat-pane,.buy,.step-art{ box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 1px 2px rgba(31,41,55,.04), 0 8px 24px -8px rgba(31,41,55,.10), 0 24px 56px -24px rgba(31,41,55,.14)} .dir:hover,.pil:hover{box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 4px rgba(31,41,55,.05), 0 14px 36px -10px rgba(31,41,55,.14), 0 34px 72px -28px rgba(31,41,55,.20)} .panel{box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(31,41,55,.05), 0 24px 60px -18px rgba(31,41,55,.20), 0 48px 110px -40px rgba(31,41,55,.26)} .tier.pro{box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 6px rgba(120,90,30,.05), 0 22px 54px -22px rgba(120,90,30,.18), 0 44px 96px -40px rgba(120,90,30,.16)} .step.c4 .step-art{box-shadow: inset 0 0 0 1.5px rgba(251,113,133,.62), inset 0 1px 0 rgba(255,255,255,.7), 0 26px 60px -22px rgba(251,113,133,.45), 0 48px 100px -40px rgba(251,113,133,.30)} /* ============================================================ THE REPORT BREAKS THE SEAM It sits on its own gradient field and lifts above the section edge, so the page stops reading as a stack of equal rectangles. ============================================================ */ .reportwrap{position:relative; background:linear-gradient(180deg,#F8FAFC 0%,#EFF6FF 34%,#F5F0FF 68%,#FFF1F2 100%); padding-block:clamp(96px,12vw,170px) clamp(80px,10vw,140px)} .reportwrap::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(31,41,55,.05) 1px,transparent 1px);background-size:28px 28px; -webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 76%); mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent 76%)} .reportwrap > *{position:relative;z-index:1} .reportwrap .report{margin-top:clamp(-40px,-3vw,-20px)} /* the hero needs a stacking context so the aurora sits behind, not outside */ .hero{isolation:isolate;position:relative} .hero .wrap{position:relative;z-index:1} .panel{z-index:2} /* the band and the report field should meet, not butt */ .band{margin-bottom:0} .reportwrap{margin-top:clamp(-48px,-4vw,-24px); clip-path:polygon(0 clamp(28px,3.4vw,56px),100% 0,100% 100%,0 100%)} /* ============================================================ CARD DESIGN — subtle wins Correction: the previous four-layer shadow stack was too heavy. One soft shadow, a hairline border, a generous radius. That is all. ============================================================ */ :root{--line:#E8EDF5; --r-card:24px; --sh-card:0 8px 24px rgba(31,41,55,.04); --sh-card-hi:0 14px 36px rgba(31,41,55,.07)} .dir,.pil,.tier,.monitor,.report,.thesis,.verdict,.plat-pane,.buy,.step-art,.panel{ border-radius:var(--r-card);border:1px solid var(--line); box-shadow:var(--sh-card)} .dir:hover,.pil:hover{box-shadow:var(--sh-card-hi);transform:translateY(-3px)} .panel{box-shadow:0 12px 40px rgba(31,41,55,.07)} .tier.pro{box-shadow:var(--sh-card);border-color:#E7D7B0} .step.c4 .step-art{box-shadow:0 12px 34px rgba(251,113,133,.14)} .step-art{box-shadow:none;border:0} .btn{box-shadow:none} .btn-cite{box-shadow:0 6px 18px -6px rgba(246,181,52,.55)} .btn-cite:hover{box-shadow:0 10px 24px -8px rgba(246,181,52,.7)} .btn-lg{box-shadow:0 8px 26px -8px rgba(246,181,52,.6)} .btn-ghost,.step-go,.fut-go,.plat-tab,.ps{box-shadow:none} /* ============================================================ THE FOUR FUTURES — four large gradient cards ============================================================ */ .step{background:var(--c-grad);border:1px solid var(--c-edge);border-radius:28px; padding:clamp(30px,4vw,52px);gap:clamp(28px,4vw,64px); box-shadow:var(--sh-card);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease} .step:hover{transform:translateY(-4px);box-shadow:var(--sh-card-hi)} .step.c1{--c-grad:linear-gradient(135deg,#EFF6FF 0%,#F8FBFF 100%);--c-edge:#DBE9FF} .step.c2{--c-grad:linear-gradient(135deg,#F6F0FF 0%,#FCFAFF 100%);--c-edge:#EADCFF} .step.c3{--c-grad:linear-gradient(135deg,#ECFDF5 0%,#F7FFFB 100%);--c-edge:#CDF3E3} .step.c4{--c-grad:linear-gradient(135deg,#FFF1F2 0%,#FFF8F8 100%);--c-edge:#FFDDE1} .step-n{background:#fff;box-shadow:0 4px 12px rgba(31,41,55,.08)} .step.c4 .step-n{background:#9F1239;color:#fff;box-shadow:0 6px 18px -4px rgba(159,18,57,.45)} .steps::before{opacity:.16} .step-art{background:transparent;padding:0} .step.c1 .step-art,.step.c2 .step-art,.step.c3 .step-art,.step.c4 .step-art{background:transparent} /* 7 · hierarchy — the horizon whispers, the verb shouts */ .step-when{background:none;border:0;padding:0;margin:0 0 10px; font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--c-deep);opacity:.62;font-weight:500;gap:0} .step-when i{display:none} .step-verb{font-size:clamp(38px,6.4vw,80px);line-height:.94;letter-spacing:-.05em; margin:0 0 12px;color:var(--c-deep)} .step-name{font-size:10.5px;letter-spacing:.2em;margin:0 0 8px;color:var(--slate);opacity:.85} .step-q{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.8vw,22px); letter-spacing:-.025em;line-height:1.3;color:var(--mineral);margin:0 0 18px} .step-x{font-size:16.5px;margin:0 0 24px} .step-go{background:#fff;border:1px solid var(--c-edge)} /* ============================================================ HERO — overlapping cards, nothing on the grid ============================================================ */ .hero-stack{position:relative} .scorecard{position:absolute;left:-6%;bottom:-9%;z-index:3; background:#fff;border:1px solid var(--line);border-radius:20px; box-shadow:0 14px 40px rgba(31,41,55,.10); padding:16px 20px;display:flex;align-items:center;gap:14px; transform:rotate(1.6deg);transition:transform .45s cubic-bezier(.2,.8,.2,1)} .hero-stack:hover .scorecard{transform:rotate(0deg) translateY(-3px)} .scorecard .n{font-family:var(--serif);font-weight:800;font-size:34px;letter-spacing:-.05em; line-height:1;color:var(--mineral)} .scorecard .n span{font-size:15px;font-weight:600;color:var(--slate);letter-spacing:-.01em} .scorecard .m{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase; color:var(--slate);display:block;margin-top:5px} .scorecard .bar{width:74px;height:5px;border-radius:3px;background:var(--line);overflow:hidden} .scorecard .bar i{display:block;height:100%;width:75%;border-radius:3px; background:linear-gradient(90deg,#60A5FA,#C084FC)} @media(max-width:1000px){.scorecard{left:auto;right:4%;bottom:-8%}} @media(max-width:560px){.scorecard{position:static;transform:none;margin-top:18px}} /* 6 · more air */ section{padding:clamp(88px,13vw,210px) 0} .band{padding:clamp(112px,14vw,220px) 0 clamp(104px,13vw,200px)} .steps{gap:clamp(28px,4vw,56px)} /* ============================================================ THE FOUR STEPS — stack first, two-up only when there is room Previous rules assumed the old spine layout. Rebuilt from scratch: single column by default, side-by-side only above 1100px where two columns are genuinely comfortable rather than merely possible. ============================================================ */ .steps::before{display:none} .steps{gap:clamp(20px,3vw,36px)} .step{ display:grid;grid-template-columns:1fr; gap:clamp(24px,3vw,36px);align-items:start; padding:clamp(26px,4vw,54px); position:relative} .step-txt{max-width:none;padding-left:0} .step-art{width:100%;display:grid;place-items:center} .step-art svg{width:100%;max-width:460px;height:auto} /* the number now sits in the flow — no absolute positioning to break */ .step-n{position:static;transform:none;left:auto;top:auto; width:46px;height:46px;border-radius:14px;margin:0 0 18px; display:inline-grid;place-items:center; font-family:var(--mono);font-size:14px;font-weight:600; background:#fff;color:var(--c-deep);box-shadow:0 3px 10px rgba(31,41,55,.08)} .step.c4 .step-n{background:#9F1239;color:#fff;box-shadow:0 5px 16px -4px rgba(159,18,57,.45)} @media(min-width:1100px){ .step{grid-template-columns:1.04fr .96fr;gap:clamp(40px,4.5vw,76px);align-items:center} .step:nth-child(even) .step-txt{order:2} .step:nth-child(even) .step-art{order:1} .step-txt{max-width:46ch} } @media(max-width:1099px){ .step:nth-child(even) .step-txt,.step:nth-child(even) .step-art{order:initial} .step-verb{font-size:clamp(34px,7vw,54px)} .step-art svg{max-width:400px} } @media(max-width:600px){ .step{padding:24px 20px 26px;border-radius:20px} .step-verb{font-size:clamp(30px,8.4vw,42px)} .step-q{font-size:17px} .step-x{font-size:16px} .step-n{width:40px;height:40px;font-size:13px;margin-bottom:14px} .step-art svg{max-width:320px} } /* ============================================================ HEADLINE MARKER A pseudo-element paints above its parent's text unless told otherwise, so the amber bar was cutting through the descender of the "q". It belongs behind the glyphs, like a marker stroke on paper. ============================================================ */ .h1 .under{position:relative;z-index:0;display:inline-block;white-space:nowrap} .h1 .under::after{ content:"";position:absolute;z-index:-1; left:-.03em;right:-.03em;bottom:.05em;height:.14em; background:var(--cite);border-radius:3px; transform:scaleX(0);transform-origin:left; animation:underdraw .85s cubic-bezier(.2,.8,.2,1) .55s forwards} @media(prefers-reduced-motion:reduce){ .h1 .under::after{animation:none;transform:scaleX(1)}} /* ============================================================ FOOTER LAYOUT Was eight columns with 14 links in one and a single link in three. Now: a brand band, six balanced columns of 4-8, then the legal line. ============================================================ */ footer{padding:clamp(56px,7vw,88px) 0 40px} .foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px; flex-wrap:wrap;padding-bottom:clamp(32px,4vw,48px);margin-bottom:clamp(36px,4.5vw,54px); border-bottom:1px solid rgba(185,203,226,.22)} .foot-brand{max-width:44ch} .foot-brand .brand{color:#fff;font-size:15px;margin-bottom:14px} .foot-brand p{margin:0;font-size:14.5px;line-height:1.6;color:#B9CBE2} .foot-top .btn-cite{flex:none} .foot-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:34px 26px} @media(max-width:1180px){.foot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:640px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px}} .foot-col{min-width:0} .foot-h{font-size:12.5px;font-weight:700;color:#fff;margin:0 0 14px;letter-spacing:-.005em} .foot-col a{font-size:13px;line-height:1.45;white-space:normal} .foot-col li{margin-bottom:9px} /* the four machines carry their colours, even down here */ .foot-machines li{position:relative;padding-left:16px} .foot-machines li::before{content:"";position:absolute;left:0;top:.52em; width:8px;height:8px;border-radius:3px} .foot-machines li:nth-child(1)::before{background:var(--p1)} .foot-machines li:nth-child(2)::before{background:var(--p2)} .foot-machines li:nth-child(3)::before{background:var(--p3)} .foot-machines li:nth-child(4)::before{background:var(--p4)} .foot-base{margin-top:clamp(40px,5vw,60px);padding-top:24px; border-top:1px solid rgba(185,203,226,.22); display:flex;flex-wrap:wrap;gap:10px 30px;align-items:center; font-size:12.5px;color:#AFC2D7} .foot-base span:last-child{margin-left:auto} @media(max-width:820px){.foot-base span:last-child{margin-left:0}} /* ============================================================ THE MARK — four nodes, one per machine, connected Blue reads you, purple answers as you, green calls you, berry transacts with you. The links between them are the point. ============================================================ */ .brand .mk{width:26px;height:26px;flex:none;display:block;overflow:visible; background:none;box-shadow:none;padding:0;border:0;border-radius:0} .mk-l{stroke:currentColor;stroke-width:1.6;stroke-linecap:round;fill:none;opacity:.26} .mk-d1{fill:var(--p1)} .mk-d2{fill:var(--p2)} .mk-d3{fill:var(--p3)} .mk-d4{fill:var(--p4)} .brand:hover .mk-l{opacity:.5;transition:opacity .25s ease} .brand .mk circle{transition:transform .3s cubic-bezier(.2,.8,.2,1);transform-origin:center} .brand:hover .mk circle{transform:scale(1.14)} footer .brand .mk{background:none;box-shadow:none} footer .mk-l{opacity:.4} .mobilenav .brand .mk{width:24px;height:24px} /* ============================================================ THE FOUR MACHINES — impossible to miss Bigger, bolder, and the only four-card grid on the page. ============================================================ */ .step{padding:0;overflow:hidden;border-radius:30px; grid-template-columns:1fr;gap:0;align-items:stretch} .step-band{grid-column:1/-1;display:block; background:var(--c-deep);color:#fff; padding:15px clamp(26px,4vw,54px); font-family:var(--mono);font-size:11px;font-weight:500; letter-spacing:.26em;text-transform:uppercase} .step-txt{padding:clamp(30px,4vw,58px) clamp(26px,4vw,54px) clamp(30px,4vw,54px); max-width:none;display:flex;flex-direction:column;justify-content:center} .step-art{padding:clamp(24px,3.4vw,44px) clamp(26px,4vw,54px) clamp(34px,4vw,56px); background:var(--c-art);display:grid;place-items:center} .step-art svg{max-width:520px;width:100%} .step-n{width:52px;height:52px;border-radius:16px;font-size:15px;margin:0 0 22px; background:var(--c-deep);color:#fff;box-shadow:0 6px 18px -6px rgba(31,41,55,.35)} .step-verb{font-size:clamp(40px,7vw,88px);line-height:.92;letter-spacing:-.052em;margin:0 0 14px} .step-name{font-size:11px;letter-spacing:.22em;margin:0 0 14px;color:var(--c-deep);opacity:.75} .step-q{font-size:clamp(19px,2vw,25px);margin:0 0 16px} .step-x{font-size:17px;margin:0 0 26px} .step-go{background:#fff;border-color:var(--c-edge);font-size:15px;padding:13px 24px} .step.c1{--c-art:linear-gradient(150deg,#DCEBFF 0%,#F2F8FF 100%)} .step.c2{--c-art:linear-gradient(150deg,#EEE1FF 0%,#F9F5FF 100%)} .step.c3{--c-art:linear-gradient(150deg,#D4F7E8 0%,#F1FDF8 100%)} .step.c4{--c-art:linear-gradient(150deg,#FFDDE2 0%,#FFF4F5 100%)} @media(min-width:1100px){ .step{grid-template-columns:1.02fr .98fr} .step:nth-child(even) .step-txt{order:2} .step:nth-child(even) .step-art{order:3} .step:nth-child(even) .step-band{order:1} } @media(max-width:1099px){ .step-verb{font-size:clamp(36px,7.4vw,58px)} .step-art svg{max-width:420px} } @media(max-width:600px){ .step{border-radius:22px} .step-band{padding:13px 20px;font-size:10px;letter-spacing:.2em} .step-txt{padding:26px 20px 24px} .step-art{padding:22px 20px 28px} .step-verb{font-size:clamp(32px,9vw,44px)} .step-n{width:44px;height:44px;margin-bottom:16px} } /* ============================================================ THE CHECK PILLARS — demoted so they stop competing They were a second four-card grid. Now a quiet list. ============================================================ */ .pil-grid.checks{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 40px; background:transparent;border:0} @media(max-width:720px){.pil-grid.checks{grid-template-columns:1fr}} .pil-grid.checks .pil{background:transparent;border:0;box-shadow:none;border-radius:0; padding:22px 0;border-bottom:1px solid var(--line);transform:none} .pil-grid.checks .pil:hover{background:transparent;box-shadow:none;transform:none} .pil-grid.checks .pil-n{font-size:9.5px;letter-spacing:.18em;color:var(--slate);opacity:.7} .pil-grid.checks .pil-t{font-size:18px;margin:8px 0 6px} .pil-grid.checks .pil-d{font-size:15.5px;margin-bottom:12px} .pil-grid.checks .pil-list{font-size:10px;line-height:1.9} .pil-grid.checks .pil-bar{display:none} /* ============================================================ THE SIGNATURE DIAGRAM One site, four machine behaviours. Built in HTML rather than as an image so the labels are real text — readable by the things this site is about, and reflowing to vertical on a phone. ============================================================ */ .flow{max-width:1080px;margin:clamp(64px,8vw,110px) auto 0; background:#fff;border:1px solid var(--line);border-radius:28px; box-shadow:var(--sh-card);padding:clamp(30px,4.4vw,58px) clamp(24px,4vw,56px)} .flow-head{text-align:center;max-width:56ch;margin:0 auto clamp(34px,4.5vw,54px)} .flow-head h3{font-family:var(--serif);font-weight:800; font-size:clamp(24px,3.2vw,38px);letter-spacing:-.04em;line-height:1.12; margin:0 0 12px;color:var(--mineral)} .flow-head p{margin:0;font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;color:var(--slate)} .flow-map{position:relative;display:grid;grid-template-columns:auto 1fr; gap:clamp(20px,3vw,44px);align-items:center} .flow-src{display:flex;flex-direction:column;gap:5px;padding:20px 24px; border-radius:18px;background:var(--ink);border:1px solid var(--line);text-align:center} .fs-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--slate)} .fs-t{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--mineral)} .flow-nodes{list-style:none;margin:0;padding:0;position:relative; display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .flow-nodes::before{content:"";position:absolute;left:6%;right:6%;top:11px;height:3px; border-radius:3px;background:linear-gradient(90deg, var(--p1) 0%,var(--p2) 34%,var(--p3) 67%,var(--p4) 100%);opacity:.30} .fn{position:relative;display:flex;flex-direction:column;align-items:center; text-align:center;padding-top:0} .fn-dot{width:24px;height:24px;border-radius:50%;background:#fff; box-shadow:0 0 0 4px #fff, inset 0 0 0 5px var(--c);margin-bottom:14px;z-index:1} .fn-when{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase; color:var(--c-deep);opacity:.7;margin-bottom:5px} .fn-name{font-family:var(--serif);font-weight:800;font-size:clamp(14px,1.35vw,18px); letter-spacing:-.03em;line-height:1.2;color:var(--c-deep)} .fn.c1{--c:var(--p1);--c-deep:var(--p1-deep)} .fn.c2{--c:var(--p2);--c-deep:var(--p2-deep)} .fn.c3{--c:var(--p3);--c-deep:var(--p3-deep)} .fn.c4{--c:var(--p4);--c-deep:var(--p4-deep)} @media(max-width:820px){ .flow-map{grid-template-columns:1fr;gap:26px} .flow-nodes{grid-template-columns:1fr;gap:0} .flow-nodes::before{left:11px;right:auto;top:8%;bottom:8%;width:3px;height:auto; background:linear-gradient(180deg,var(--p1) 0%,var(--p2) 34%,var(--p3) 67%,var(--p4) 100%)} .fn{flex-direction:row;align-items:center;gap:14px;text-align:left;padding:13px 0} .fn-dot{margin:0;width:22px;height:22px;flex:none} .fn-when{margin:0 0 0 auto;order:3} .fn-name{font-size:17px} } /* ============================================================ THE SCORE — one of the three things to remember ============================================================ */ .scorecard{padding:18px 22px;gap:16px;border-radius:22px; box-shadow:0 18px 46px rgba(31,41,55,.13)} .sc-ring{position:relative;width:52px;height:52px;flex:none;border-radius:50%; background:conic-gradient(var(--p1) 0turn .75turn, var(--line) .75turn 1turn)} .sc-ring i{position:absolute;inset:6px;border-radius:50%;background:#fff} .sc-body{display:flex;flex-direction:column;gap:3px} .scorecard .n{font-size:30px} .scorecard .n span{font-size:14px} .scorecard .m{margin:0} .scorecard .bar{margin-top:6px} /* ============================================================ THE TREE — one source, four branches Trunk down, distributor bar across, drops to four coloured nodes. Pure CSS so every label stays real text. ============================================================ */ .tree{display:flex;flex-direction:column;align-items:center;padding-top:6px} .tree-src{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative; padding-bottom:52px} .ts-dot{width:18px;height:18px;border-radius:50%;background:#fff; box-shadow:0 0 0 5px #fff, inset 0 0 0 4px var(--navy), 0 0 0 9px rgba(35,71,117,.10); margin-bottom:14px} .ts-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;text-transform:uppercase; color:var(--slate)} .ts-t{font-family:var(--serif);font-weight:800;font-size:clamp(17px,1.8vw,21px); letter-spacing:-.03em;color:var(--mineral)} /* the trunk */ .tree-src::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:34px; transform:translateX(-1px);border-radius:2px; background:linear-gradient(180deg,rgba(35,71,117,.30),rgba(35,71,117,.16))} .tree-nodes{list-style:none;margin:0;padding:44px 0 0;width:100%;position:relative; display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} /* the distributor bar, spanning centre-of-first to centre-of-last */ .tree-nodes::before{content:"";position:absolute;top:0;left:12.5%;right:12.5%;height:2px; border-radius:2px;background:linear-gradient(90deg, var(--p1) 0%,var(--p2) 33%,var(--p3) 66%,var(--p4) 100%);opacity:.45} .tn{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center} /* the drop from the bar to each node */ .tn::before{content:"";position:absolute;top:-44px;left:50%;width:2px;height:30px; transform:translateX(-1px);border-radius:2px;background:var(--c);opacity:.5} .tn-dot{width:22px;height:22px;border-radius:50%;background:#fff; box-shadow:inset 0 0 0 5px var(--c), 0 0 0 6px var(--c-halo); margin-bottom:16px} .tn-when{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase; color:var(--c-deep);opacity:.7;margin-bottom:5px} .tn-name{font-family:var(--serif);font-weight:800;font-size:clamp(14px,1.4vw,19px); letter-spacing:-.03em;line-height:1.2;color:var(--c-deep)} .tn.c1{--c:var(--p1);--c-deep:var(--p1-deep);--c-halo:rgba(96,165,250,.16)} .tn.c2{--c:var(--p2);--c-deep:var(--p2-deep);--c-halo:rgba(192,132,252,.18)} .tn.c3{--c:var(--p3);--c-deep:var(--p3-deep);--c-halo:rgba(52,211,153,.20)} .tn.c4{--c:var(--p4);--c-deep:var(--p4-deep);--c-halo:rgba(251,113,133,.20)} @media(max-width:760px){ .tree{align-items:stretch} .tree-src{align-items:flex-start;padding-left:11px;padding-bottom:34px} .tree-src::after{left:11px;height:24px} .tree-nodes{grid-template-columns:1fr;gap:0;padding:0 0 0 0} .tree-nodes::before{left:11px;right:auto;top:12px;bottom:26px;width:2px;height:auto; background:linear-gradient(180deg,var(--p1) 0%,var(--p2) 33%,var(--p3) 66%,var(--p4) 100%)} .tn{flex-direction:row;align-items:center;gap:14px;text-align:left;padding:12px 0} .tn::before{display:none} .tn-dot{margin:0;flex:none;width:20px;height:20px} .tn-when{order:3;margin:0 0 0 auto} .tn-name{font-size:17px} } /* 2 · the money headline, larger still */ .h1{font-size:clamp(50px,10.2vw,132px);line-height:.92;letter-spacing:-.055em} .lede-tight{font-size:clamp(20px,2.05vw,28px);max-width:18ch} /* ============================================================ THE LADDER — four rungs, honestly labelled ============================================================ */ .ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch} @media(max-width:1180px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.ladder{grid-template-columns:1fr}} .rung{position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--line);border-radius:24px; padding:28px 26px 30px;box-shadow:var(--sh-card)} .rung.r-pack{background:linear-gradient(140deg,#FFFDF7 0%,#FFFFFF 100%);border-color:#E7D7B0} .rung.r-lab{background:linear-gradient(140deg,#FBFCFE 0%,#FFFFFF 100%);border-style:dashed; border-color:#CBD8EA;box-shadow:none} .rung-state{align-self:flex-start;font-family:var(--mono);font-size:9px;letter-spacing:.16em; text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:20px} .rung-state.live{background:#ECFDF5;color:#047857;border:1px solid #A7F3D0} .rung-state.soon{background:var(--ink);color:var(--slate);border:1px dashed #CBD8EA} .rung-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate);margin:0 0 10px} .rung-p{font-family:var(--serif);font-weight:800;font-size:clamp(28px,3vw,36px); letter-spacing:-.045em;line-height:1;margin:0 0 6px;color:var(--mineral); display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .rung-p small{font-family:var(--serif);font-size:12.5px;font-weight:400;letter-spacing:-.005em; color:var(--slate);opacity:.85} .rung-s{font-family:var(--serif);font-weight:700;font-size:16.5px;letter-spacing:-.02em; color:var(--mineral);margin:0 0 20px} .rung ul{list-style:none;margin:0 0 26px;padding:0;font-size:14.5px;line-height:1.5} .rung li{position:relative;padding:9px 0 9px 22px;border-bottom:1px dashed var(--line);color:var(--slate)} .rung li:last-child{border-bottom:0} .rung li::before{content:"";position:absolute;left:0;top:1.05em;width:7px;height:7px; border-radius:2px;background:var(--p1)} .rung.r-pack li::before{background:#E0BE79} .rung.r-agency li::before{background:var(--p3)} .rung.r-lab li::before{background:#CBD8EA} .rung .btn{margin-top:auto;align-self:stretch;justify-content:center} .ladder-note{max-width:70ch;margin:clamp(34px,4vw,52px) auto 0;padding:22px 26px; background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-card)} .ladder-note p{margin:0;font-size:16px;line-height:1.6;color:var(--slate)} .ladder-note strong{color:var(--mineral)} /* ============================================================ THE DIAGRAM — SVG on desktop, real list on mobile Text stays selectable and machine-readable in both. ============================================================ */ .treesvg{display:block;width:100%;height:auto;max-width:980px;margin:0 auto} .tsvg-k{font-family:var(--mono);font-size:11px;letter-spacing:2.4px;fill:#4B5768} .tsvg-t{font-family:var(--serif);font-size:19px;font-weight:800;letter-spacing:-.5px;fill:#1F2937} .tsvg-w{font-family:var(--mono);font-size:10.5px;letter-spacing:2.4px;text-anchor:middle;opacity:.75} .tsvg-n{font-family:var(--serif);font-size:21px;font-weight:800;letter-spacing:-.7px;text-anchor:middle} .tsvg-branch{transition:transform .3s cubic-bezier(.2,.8,.2,1);transform-origin:center} .tsvg-branch:hover{transform:translateY(-4px)} .tree-fallback{display:none} @media(max-width:800px){ .treesvg{display:none} .tree-fallback{display:block;list-style:none;margin:0;padding:0;position:relative} .tree-fallback::before{content:"";position:absolute;left:11px;top:14px;bottom:20px;width:2px; border-radius:2px;background:linear-gradient(180deg,#60A5FA 0%,#C084FC 33%,#34D399 66%,#FB7185 100%)} .tree-fallback .tn{flex-direction:row;align-items:center;gap:15px;text-align:left;padding:14px 0} .tree-fallback .tn::before{display:none} .tree-fallback .tn-dot{margin:0;flex:none;width:22px;height:22px} .tree-fallback .tn-when{order:3;margin:0 0 0 auto} .tree-fallback .tn-name{font-size:17px} } /* ============================================================ GRADIENT REFINEMENT — light, never colour blocks ============================================================ */ .flow{background:linear-gradient(168deg,#FFFFFF 0%,#FBFCFE 58%,#F7FAFF 100%)} .monitor{background:linear-gradient(168deg,#FFFFFF 0%,#FBFCFE 100%)} .report{background:linear-gradient(170deg,#FFFFFF 0%,#FCFDFF 100%)} .thesis{background:linear-gradient(168deg,#FFFFFF 0%,#FBFCFE 100%)} .reportwrap{background:linear-gradient(180deg,#F8FAFC 0%,#EFF6FF 28%,#F5F0FF 58%,#FFF1F2 100%)} .final.feature{background:linear-gradient(170deg,#F7FAFF 0%,#F5F0FF 52%,#FFF6F7 100%)} section.feature{background:linear-gradient(170deg,#F6F9FF 0%,#FAFBFE 100%)} .pil-grid.checks .pil{background:transparent} /* ============================================================ ICONS — one per pillar, drawn on the same 24px grid ============================================================ */ .ico{width:22px;height:22px;flex:none;display:block} .ico path,.ico circle,.ico rect{fill:none;stroke:currentColor;stroke-width:1.7; stroke-linecap:round;stroke-linejoin:round} .ico .f{fill:currentColor;stroke:none} /* ============================================================ MINIMUM LEGIBLE SIZE Mono at 9-10px works as a decorative label but not as content. Anything a reader is expected to actually read moves to 12px+, and content lists move out of mono into the body face. ============================================================ */ /* the check list — this is content, not chrome */ .pil-grid.checks .pil-list{font-family:var(--serif);font-size:15px;line-height:1.75; color:var(--slate);letter-spacing:-.005em} .pil-grid.checks .pil-list li{position:relative;padding-left:22px;margin-bottom:2px} .pil-grid.checks .pil-list li::before{content:"";position:absolute;left:0;top:.62em; width:7px;height:7px;border-radius:2px;background:var(--p3);opacity:.8} .pil-grid.checks .pil-n{font-size:11px;letter-spacing:.16em;opacity:.8} .pil-grid.checks .pil-t{font-size:19px} .pil-grid.checks .pil-d{font-size:16px;line-height:1.6} .pil-grid.checks .pil{padding:26px 0} /* the same list on the four pillar cards elsewhere */ .pil-list{font-family:var(--serif);font-size:14.5px;line-height:1.75;color:var(--slate)} .pil-list li::before{content:"\2713\00a0";color:var(--p3)} /* readable minimums across the rest of the chrome */ .eyebrow{font-size:11.5px} .tier li,.rung li{font-size:15px} .dir-x,.fut-x{font-size:15.5px} .hero-note{font-size:14px} .meta,.crumb{font-size:12px;letter-spacing:.06em} .foot-col a{font-size:13.5px} .foot-base{font-size:13px} .buy-note,.buy-fine,.ba-cap,.replay .cap{font-size:13px;line-height:1.65} .qs .qt small{font-size:12.5px;letter-spacing:0;font-family:var(--serif)} .field label,.buy label{font-size:11.5px} .bar-lab{font-size:12.5px} .legend{font-size:11px} .fixlist .p{font-size:11px} .rung-k{font-size:11px} .rung-state{font-size:10px} .mrow .n{font-size:13px} .mrow .s{font-size:10px} .monitor-ft{font-size:14.5px} .step-name{font-size:11.5px} .step-band{font-size:11.5px} .tn-when,.fn-when{font-size:10px} .dial .out{font-size:11px;letter-spacing:.1em} .scorecard .m{font-size:11px} .report-hd .u{font-size:12.5px} .report-hd .dt,.report-hd .pill{font-size:10.5px} .rfix{font-size:15.5px} .rfix .sev{font-size:9.5px} .rfix a{font-size:14px} .ps{font-size:14px} .ps .k{font-size:10.5px} .dir-n em{font-size:10px} .verdict dt{font-size:10.5px} .verdict dd{font-size:16px} .prose{font-size:18.5px} .code,pre.code{font-size:12.5px;line-height:1.85} .copybtn{font-size:10.5px} /* the last of the sub-10px labels — decorative, but still worth reading */ .rfix .sev{font-size:10px} .dir-n em{font-size:10px} .dial.sm .out{font-size:10px} .mrow .s{font-size:10px} .scorecard .m{font-size:11px} .fn-when,.tn-when{font-size:10.5px;letter-spacing:.16em} .rung-state{font-size:10px} .tsvg-w{font-size:11.5px} .tsvg-k{font-size:11.5px} /* ============================================================ TYPE FLOOR — nothing below 10.5px anywhere Placed last so it wins regardless of what came before. ============================================================ */ .ticker-hd,.botchip .st,.panel-bar .live,.ask .who,.ans .who,.srccard .why b, .ba-lab,.mobilenav-hd .k,.monitor-hd .live,.fut-name,.report-hd .pill,.mbadge, .step-when,.fs-k,.ts-k,.fn-when,.tn-when,.rfix .sev,.dir-n em,.dial.sm .out, .mrow .s,.rung-state,.legend,.mcount{font-size:10.5px} .mrow .n{font-size:13px} .panel-bar .lbl{font-size:11px} .srccard .url{font-size:12.5px} .chip{font-size:11px} /* ============================================================ CONTENT vs LABELS — the distinction the floor rule blurred The 10.5px floor is for LABELS. Anything a reader reads as content is set in the body face at 15px+, and wins here. ============================================================ */ .pil-list,.pil-grid.checks .pil-list{ font-family:var(--serif);font-size:15px;line-height:1.8; color:var(--slate);letter-spacing:-.005em} .pil-list li{position:relative;padding-left:22px;margin-bottom:3px} .pil-list li::before{content:"";position:absolute;left:0;top:.66em; width:7px;height:7px;border-radius:2px;background:var(--p3);opacity:.85} .pil-grid.checks .pil-t{font-size:19px} .pil-grid.checks .pil-d{font-size:16px;line-height:1.6} /* the remaining sub-10.5 labels */ .prose th,.callout b,.ticker-hd,.pil-n,.learn-k,.nextbar .k, .yn button,.mobilenav .mn-foot,.fut-step,.monitor-hd .c{font-size:10.5px} .tsvg-f{font-family:var(--serif);font-size:16px;font-style:italic;fill:#4B5768; text-anchor:middle;opacity:.85} .tsvg-branch{transition:transform .34s cubic-bezier(.2,.8,.2,1)} .tsvg-branch:hover{transform:translateY(-6px)} .treesvg{max-width:1000px} /* ============================================================ HERO SCORE PANEL — the total, then four pillar dials Values are the real breakdown from the sample report further down the page, so the hero and the proof section agree. ============================================================ */ .scorepanel{position:absolute;left:-7%;bottom:-11%;z-index:3; background:#fff;border:1px solid var(--line);border-radius:22px; box-shadow:0 18px 48px rgba(31,41,55,.14); padding:16px 20px 18px;transform:rotate(1.4deg); transition:transform .45s cubic-bezier(.2,.8,.2,1)} .hero-stack:hover .scorepanel{transform:rotate(0) translateY(-3px)} .sp-head{display:flex;align-items:baseline;gap:10px;margin-bottom:14px; padding-bottom:12px;border-bottom:1px solid var(--line)} .sp-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--slate);margin-left:auto} @keyframes spdraw{from{stroke-dashoffset:113.1}} @media(max-width:1000px){.scorepanel{left:auto;right:3%;bottom:-9%}} @media(max-width:620px){.scorepanel{position:static;transform:none;margin-top:20px}} .sp-head{justify-content:flex-start;margin-bottom:12px;padding-bottom:11px} .sp-k{margin-left:0} /* ============================================================ SCORE PANEL POSITION It was overlapping the replay button and caption inside the demo. Now it sits below the panel edge with only its top corner overlapping, and the demo reserves room for it so nothing is ever covered. ============================================================ */ @media(min-width:1001px){ .hero-stack{padding-bottom:96px} .scorepanel{left:-4%;bottom:0;transform:rotate(1.2deg)} .hero-stack:hover .scorepanel{transform:rotate(0) translateY(-3px)} .panel-body{padding-bottom:34px} } @media(min-width:621px) and (max-width:1000px){ .hero-stack{padding-bottom:88px} .scorepanel{left:auto;right:2%;bottom:0} } @media(max-width:620px){ .hero-stack{padding-bottom:0} .scorepanel{position:static;transform:none;margin-top:18px;width:100%} } /* ============================================================ HERO GEOMETRY — measured against a 1440+ render 1. The score panel overlapped the replay row. The demo now reserves real clearance at its foot, so the overlap lands on padding. 2. vw-driven padding ballooned on wide screens. Capped tighter. ============================================================ */ .hero{padding:clamp(56px,7vw,104px) 0 clamp(56px,7vw,96px)} section{padding:clamp(72px,9vw,150px) 0} .band{padding:clamp(88px,10vw,160px) 0 clamp(80px,9vw,150px)} .final{padding-block:clamp(80px,10vw,160px)} @media(min-width:1001px){ /* clearance for the overlapping panel */ .panel-body{padding-bottom:78px} .replay{margin-top:20px;padding-top:16px} .hero-stack{padding-bottom:74px} .scorepanel{left:-9%;bottom:0;padding:14px 18px 16px} } /* the caption should never sit under the panel */ .replay{flex-direction:column;align-items:flex-start;gap:10px} .replay .cap{max-width:34ch;line-height:1.5} /* ============================================================ LARGE MONITORS Content was capped at 1240px, so a 2560px screen showed ~660px of empty margin each side. The container grows in steps; prose does NOT, because line length past ~90 characters gets harder to read, not easier. ============================================================ */ @media(min-width:1600px){ :root{--maxw:1440px; --pad:80px} .h1{font-size:clamp(60px,7vw,124px)} .lede-tight{font-size:29px;max-width:17ch} .h2{font-size:clamp(34px,2.9vw,48px)} .lede{font-size:21px} .hero{padding:120px 0 110px} section{padding:160px 0} .band{padding:180px 0 165px} .prose{font-size:19px} .step-verb{font-size:clamp(56px,4.4vw,86px)} .step-x{font-size:17.5px} .step-art svg{max-width:480px} .monitor,.report{max-width:1180px} .flow{max-width:1240px} .treesvg{max-width:1120px} .dir,.pil{padding:30px 28px} } @media(min-width:1920px){ :root{--maxw:1600px; --pad:96px} .h1{font-size:132px} .lede-tight{font-size:31px} .h2{font-size:52px} .lede{font-size:22px} .hero{padding:140px 0 124px} section{padding:180px 0} .band{padding:200px 0 180px} .prose{font-size:19.5px;max-width:780px} .step-verb{font-size:92px} .step-x{font-size:18px} .step-art svg{max-width:540px} .monitor,.report{max-width:1300px} .flow{max-width:1360px} .treesvg{max-width:1200px} .dir-x,.fut-x{font-size:16.5px} .rung li,.tier li{font-size:16px} .foot-col a{font-size:14px} } /* Past 2400px, stop growing the container and let the margins carry the extra width. A 2000px-wide text column is worse, not better. */ @media(min-width:2400px){ :root{--maxw:1700px} .hero{padding:150px 0 130px} section{padding:190px 0} } /* prose stays readable no matter how wide the screen gets */ .prose{max-width:min(var(--readw),82ch)} @media(min-width:1920px){.prose{max-width:min(780px,84ch)}} /* ============================================================ SCORE PANEL — starts half way across the demo Hanging off the left edge made it look detached and forced the caption into an awkward wrap. Now its left edge sits at the demo's midpoint and it overhangs to the right, where there is no content to cover, so the demo needs far less bottom clearance. ============================================================ */ @media(min-width:1001px){ .scorepanel{left:47%;right:auto;bottom:-14px;transform:rotate(1.1deg)} .hero-stack{padding-bottom:96px} .panel-body{padding-bottom:30px} .replay{flex-direction:row;align-items:center;gap:14px;margin-top:22px;padding-top:16px} .replay .cap{max-width:30ch} } @media(min-width:1600px){ .scorepanel{left:50%} } /* the comma must never strand on its own line — it travels with the word */ .h1 .nb{white-space:nowrap;display:inline-block} /* ============================================================ THE SIGNAL BURST One source, radiating in the four machine colours. Sits behind the hero content and above the aurora. Never intercepts a click. ============================================================ */ #burst{position:absolute;inset:0;width:100%;height:100%;z-index:-1; pointer-events:none;display:block; -webkit-mask-image:radial-gradient(120% 96% at 50% 100%,#000 24%,transparent 78%); mask-image:radial-gradient(120% 96% at 50% 100%,#000 24%,transparent 78%)} .hero::after{opacity:.55} @media(max-width:700px){#burst{opacity:.7}} /* the burst now radiates from the centre, so the mask is centred too */ #burst{ -webkit-mask-image:radial-gradient(58% 58% at 50% 50%,#000 0%,rgba(0,0,0,.55) 52%,transparent 84%); mask-image:radial-gradient(58% 58% at 50% 50%,#000 0%,rgba(0,0,0,.55) 52%,transparent 84%)} /* ============================================================ GOLD SPARKLE A short bright head with a soft gold glow behind it travels each branch from the website to its card. pathLength="100" normalises the curves so one keyframe drives all five. Staggered into a sequence. ============================================================ */ .spark,.sparkglow{stroke-dasharray:4 96;stroke-dashoffset:100;opacity:0; animation:spark-run 4.6s cubic-bezier(.42,0,.58,1) infinite} .sparkglow{stroke-dasharray:7 93} @keyframes spark-run{ 0% {stroke-dashoffset:100;opacity:0} 6% {opacity:1} 58% {opacity:1} 70% {stroke-dashoffset:0;opacity:0} 100% {stroke-dashoffset:0;opacity:0} } .spark.trunk,.sparkglow.trunk{animation-delay:0s} .spark.b1,.sparkglow.b1{animation-delay:.44s} .spark.b2,.sparkglow.b2{animation-delay:.60s} .spark.b3,.sparkglow.b3{animation-delay:.76s} .spark.b4,.sparkglow.b4{animation-delay:.92s} .sparkglow{animation-name:sparkglow-run} @keyframes sparkglow-run{ 0% {stroke-dashoffset:100;opacity:0} 6% {opacity:.75} 58% {opacity:.75} 70% {stroke-dashoffset:0;opacity:0} 100% {stroke-dashoffset:0;opacity:0} } @media(prefers-reduced-motion:reduce){.spark,.sparkglow{display:none}} /* ============================================================ WINDOW DOTS — the four machines, lighting up left to right Written after every earlier .dot rule so nothing overrides it. Each dot rests grey, then fills with its own colour in sequence, holds, and releases together. Loops. ============================================================ */ .panel-bar{gap:8px} .panel-bar .lbl{margin-left:10px} .panel-bar .dot{ width:9px;height:9px;border-radius:50%;flex:none; background:#DCE3ED;position:relative;opacity:1} .panel-bar .dot::after{ content:"";position:absolute;inset:0;border-radius:50%; background:var(--c);opacity:0;transform:scale(.55); animation:dotfill 4.6s cubic-bezier(.3,0,.4,1) infinite} @keyframes dotfill{ 0% {opacity:0;transform:scale(.55);box-shadow:0 0 0 0 transparent} 7% {opacity:1;transform:scale(1);box-shadow:0 0 0 3px var(--halo)} 16% {opacity:1;transform:scale(1);box-shadow:0 0 0 0 transparent} 62% {opacity:1;transform:scale(1)} 74% {opacity:0;transform:scale(.55)} 100% {opacity:0;transform:scale(.55)} } .panel-bar .dot.d1{--c:var(--p1);--halo:rgba(96,165,250,.30);} .panel-bar .dot.d2{--c:var(--p2);--halo:rgba(192,132,252,.30)} .panel-bar .dot.d3{--c:var(--p3);--halo:rgba(52,211,153,.32)} .panel-bar .dot.d4{--c:var(--p4);--halo:rgba(251,113,133,.32)} .panel-bar .dot.d1::after{animation-delay:0s} .panel-bar .dot.d2::after{animation-delay:.20s} .panel-bar .dot.d3::after{animation-delay:.40s} .panel-bar .dot.d4::after{animation-delay:.60s} @media(prefers-reduced-motion:reduce){ .panel-bar .dot::after{animation:none;opacity:1;transform:none} } /* ============================================================ SCORE PANEL — larger, with the question each metric answers ============================================================ */ @media(min-width:1001px){ .scorepanel{padding:18px 22px 20px;left:44%;bottom:-24px;max-width:none} .hero-stack{padding-bottom:150px} } .sp-head{margin-bottom:14px;padding-bottom:12px} @media(max-width:620px){ } /* ============================================================ SCORE PANEL ROWS Ring, label, question. Two columns per row: a fixed ring column and a text column, so text can never sit on the ring. This is the only place .spd and its children are defined. ============================================================ */ .spd{ display:grid;grid-template-columns:48px minmax(0,1fr); column-gap:13px;row-gap:4px;align-items:center; position:static;max-width:none;padding:0; text-decoration:none;color:inherit;transition:opacity .18s ease} .spd:hover{opacity:.7} .spd-ring{grid-column:1;grid-row:1 / span 2; position:relative;width:48px;height:48px;display:block;align-self:center} .spd-ring svg{width:48px;height:48px;transform:rotate(-90deg);display:block} .spd-ring circle{fill:none;stroke-width:5;stroke-linecap:round} .spd-track{stroke:#EDF1F7} .spd-val{stroke:var(--c);stroke-dasharray:125.7; stroke-dashoffset:calc(125.7 - (125.7 * var(--pct) / 100)); animation:spdraw 1.15s cubic-bezier(.2,.8,.2,1) .45s backwards} @keyframes spdraw{from{stroke-dashoffset:125.7}} .spd-n{position:absolute;inset:0;display:grid;place-items:center; font-family:var(--serif);font-weight:800;font-size:15px;letter-spacing:-.03em; color:var(--c-deep);line-height:1} .spd-l{grid-column:2;grid-row:1;align-self:end; font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-.025em; text-transform:none;color:var(--mineral);line-height:1.2;margin:0; text-align:left;white-space:nowrap;position:static} .spd-q{grid-column:2;grid-row:2;align-self:start; font-family:var(--serif);font-size:13px;line-height:1.4;letter-spacing:-.01em; color:var(--slate);margin:0;padding:0;max-width:26ch;text-align:left; position:static;display:block} .spd.d1{--c:#60A5FA;--c-deep:#1E40AF} .spd.d2{--c:#C084FC;--c-deep:#7E22CE} .spd.d3{--c:#34D399;--c-deep:#047857} .spd.d4{--c:#FB7185;--c-deep:#9F1239} @media(prefers-reduced-motion:reduce){.spd-val{animation:none}} @media(min-width:1001px){ .scorepanel{padding:18px 24px 20px;left:42%;bottom:-18px} .hero-stack{padding-bottom:132px} } @media(max-width:620px){ .spd-q{max-width:none} } /* one column at every breakpoint, with a hairline between rows */ .sp-dials{display:grid;grid-template-columns:1fr;gap:0} .spd{padding:11px 0;border-bottom:1px solid var(--line);column-gap:14px} .spd:last-child{border-bottom:0} .spd-q{max-width:34ch} @media(min-width:1001px){ .scorepanel{left:40%;bottom:-30px;padding:18px 26px 16px} .hero-stack{padding-bottom:210px} } @media(max-width:1000px){ .scorepanel{max-width:420px} } /* ============================================================ SCENE ANIMATION The illustrations come alive when their card scrolls in. Everything is scoped to .step.in, so nothing animates off-screen, and it is driven by classes already in the artwork rather than new markup. ============================================================ */ /* the dotted connectors flow from source to destination, always */ .step.in .step-art path[stroke-dasharray]{ animation:il-flow 1.4s linear infinite} @keyframes il-flow{to{stroke-dashoffset:-18}} /* highlighter bars sweep in from the left, once, as the card arrives */ .step-art .il-hl{transform-origin:left center;transform:scaleX(0)} .step.in .step-art .il-hl{ animation:il-sweep .62s cubic-bezier(.2,.8,.2,1) forwards} .step.in .step-art .il-hl:nth-of-type(2){animation-delay:.34s} @keyframes il-sweep{to{transform:scaleX(1)}} /* arrow heads pulse as the signal lands */ .step-art .il-a{transform-origin:center} .step.in .step-art .il-a{ animation:il-tick 1.4s cubic-bezier(.4,0,.5,1) infinite} @keyframes il-tick{ 0%,64%,100%{opacity:.75;transform:translateX(0)} 76%{opacity:1;transform:translateX(2.5px)} } /* the filled panels — mint, lavender, tinted blocks — fade up on arrival */ .step-art .il-mint,.step-art .il-lav{opacity:0} .step.in .step-art .il-mint,.step.in .step-art .il-lav{ animation:il-rise .55s ease .5s forwards} @keyframes il-rise{to{opacity:1}} /* window dots in the artwork blink through, staggered */ .step.in .step-art .il-dot{animation:il-blink 2.8s ease-in-out infinite} .step.in .step-art .il-dot:nth-of-type(2){animation-delay:.35s} @keyframes il-blink{ 0%,70%,100%{opacity:.35} 80%{opacity:.9} } /* the whole scene lifts very slightly as it arrives */ .step-art svg{opacity:0;transform:translateY(10px)} .step.in .step-art svg{ animation:il-in .7s cubic-bezier(.2,.8,.2,1) forwards} @keyframes il-in{to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){ .step-art svg,.step-art .il-hl,.step-art .il-mint,.step-art .il-lav{ opacity:1!important;transform:none!important;animation:none!important} .step.in .step-art path[stroke-dasharray], .step.in .step-art .il-a,.step.in .step-art .il-dot{animation:none!important} } .tsvg-k{letter-spacing:2px} /* the four-machine scorecard, wherever a report shows one */ .scorecard-inline{background:#fff;border:1px solid var(--line);border-radius:18px; padding:6px 20px;box-shadow:var(--sh-card)} .scorecard-inline .spd{padding:13px 0} /* ============================================================ PLATFORM CARDS — plain steps, not code The homepage version is for someone who runs a shop, not a repo. Code lives on the guide pages. ============================================================ */ .plats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} @media(max-width:1100px){.plats{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.plats{grid-template-columns:1fr}} .plat{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:20px;padding:24px 24px 22px;text-decoration:none;color:inherit; box-shadow:var(--sh-card); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease} .plat:hover{transform:translateY(-4px);box-shadow:var(--sh-card-hi);border-color:#CBD8EA} .plat-hd{display:flex;align-items:baseline;gap:12px;margin-bottom:16px; padding-bottom:14px;border-bottom:1px solid var(--line)} .plat-name{font-family:var(--serif);font-weight:800;font-size:20px;letter-spacing:-.035em; color:var(--mineral)} .plat-time{margin-left:auto;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; color:var(--slate);background:var(--ink);border:1px solid var(--line); padding:4px 9px;border-radius:999px;white-space:nowrap} .plat-steps{list-style:none;counter-reset:p;margin:0 0 20px;padding:0} .plat-steps li{counter-increment:p;position:relative;padding:0 0 14px 30px; font-size:15px;line-height:1.5;color:var(--slate)} .plat-steps li:last-child{padding-bottom:0} .plat-steps li::before{content:counter(p);position:absolute;left:0;top:1px; width:20px;height:20px;border-radius:6px;display:grid;place-items:center; background:var(--p1-soft);color:var(--p1-deep); font-family:var(--mono);font-size:10.5px;font-weight:600} .plat-steps b{font-weight:700;color:var(--mineral)} .plat-steps .u{border-bottom:1px solid var(--line)} .plat-go{margin-top:auto;font-family:var(--serif);font-weight:700;font-size:14.5px; color:var(--p1-deep);display:inline-flex;align-items:center;gap:7px} .plat-go .a{transition:transform .2s ease;display:inline-block} .plat:hover .plat-go .a{transform:translateX(5px)} .plat-more{margin:clamp(26px,3vw,36px) 0 0;font-size:16px;color:var(--slate);max-width:78ch} .plat-more a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} /* ============================================================ SAMPLE REPORTS — one card, cycling through five views ============================================================ */ .rp-tabs{display:flex;gap:6px;flex-wrap:wrap;padding:14px 24px; border-bottom:1px solid var(--line);background:#FBFCFE} .rp-tab{font-family:var(--serif);font-size:13.5px;font-weight:600;letter-spacing:-.01em; padding:8px 15px;border-radius:999px;border:1px solid transparent;background:transparent; color:var(--slate);cursor:pointer;white-space:nowrap;box-shadow:none; transition:background .2s ease,color .2s ease,border-color .2s ease} .rp-tab:hover{color:var(--mineral);border-color:var(--line);background:#fff} .rp-tab.on{background:#fff;border-color:#CBD8EA;color:var(--mineral);font-weight:700; box-shadow:0 1px 3px rgba(31,41,55,.07)} .rp-stage{position:relative;min-height:330px} .rp{position:absolute;inset:0;opacity:0;visibility:hidden; transform:translateY(8px);transition:opacity .42s ease,transform .42s cubic-bezier(.2,.8,.2,1)} .rp.on{opacity:1;visibility:visible;transform:none;position:relative} .rp-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;width:100%} @media(max-width:760px){.rp-sum{grid-template-columns:repeat(2,minmax(0,1fr))}} .rp-sum .spd{grid-template-columns:48px minmax(0,1fr);row-gap:0} .rp-sum .spd-l{grid-row:1;font-size:14px;white-space:normal;line-height:1.25} .rp-one{display:block} .rp-focus{display:flex;align-items:center;gap:16px} .rp-focus .spd-ring{position:relative;width:56px;height:56px;flex:none} .rp-focus .spd-ring svg{width:56px;height:56px;transform:rotate(-90deg)} .rp-focus .spd-ring circle{fill:none;stroke-width:5;stroke-linecap:round} .rp-focus .spd-track{stroke:#EDF1F7} .rp-focus .spd-val{stroke:var(--c);stroke-dasharray:125.7; stroke-dashoffset:calc(125.7 - (125.7 * var(--pct) / 100))} .rp-focus .spd-n{position:absolute;inset:0;display:grid;place-items:center; font-family:var(--serif);font-weight:800;font-size:17px;color:var(--c-deep)} .rp-name{font-family:var(--serif);font-weight:800;font-size:clamp(22px,2.4vw,30px); letter-spacing:-.04em;margin:0 0 3px;color:var(--c-deep)} .rp-q{margin:0;font-size:16px;color:var(--slate)} .rp-focus.d1{--c:#60A5FA;--c-deep:#1E40AF} .rp-focus.d2{--c:#C084FC;--c-deep:#7E22CE} .rp-focus.d3{--c:#34D399;--c-deep:#047857} .rp-focus.d4{--c:#FB7185;--c-deep:#9F1239} @media(prefers-reduced-motion:reduce){.rp{transition:none}} /* ============================================================ WORKS WITH — a quiet scrolling strip of platforms ============================================================ */ .workswith{border-block:1px solid var(--line);background:#FBFCFE; padding:20px 0 18px;overflow:hidden;position:relative} .wl-head{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; color:var(--slate);text-align:center;margin-bottom:14px;opacity:.8} .wl-track{overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)} .wl-item{font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.7vw,22px); letter-spacing:-.03em;color:var(--mineral);opacity:.42; transition:opacity .25s ease,color .25s ease} .wl-item:hover{opacity:1;color:var(--p1-deep)} .wl-note{text-align:center;margin:16px 0 0;font-size:13.5px;color:var(--slate)} .wl-note a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} .workswith:hover .wl-run{animation-play-state:paused} @media(prefers-reduced-motion:reduce){ .wl-run{animation:none} .wl-track{overflow-x:auto} } /* the directory strip — same device, running the other way */ .tools-strip{background:transparent;border-block-color:rgba(31,41,55,.09); margin-block:clamp(28px,3.5vw,44px)} .wl-item{text-decoration:none} .strip-cta{display:flex;gap:12px;flex-wrap:wrap;margin:0} /* ============================================================ LOGO STRIPS Each item holds a logo and a text wordmark. If the SVG is missing the onerror handler adds .no-logo and the text shows instead, so the strip never breaks while files are being collected. ============================================================ */ .wl-item{display:inline-flex;align-items:center;justify-content:center; height:34px;text-decoration:none} .wl-logo{height:100%;width:auto;max-width:150px;display:block;object-fit:contain; filter:grayscale(1);opacity:.5;transition:filter .25s ease,opacity .25s ease} .wl-item:hover .wl-logo{filter:grayscale(0);opacity:1} .wl-text{display:none;font-family:var(--serif);font-weight:700; font-size:clamp(17px,1.7vw,22px);letter-spacing:-.03em;color:var(--mineral); opacity:.42;transition:opacity .25s ease,color .25s ease} .wl-item:hover .wl-text{opacity:1;color:var(--p1-deep)} .wl-item.no-logo .wl-logo{display:none} .wl-item.no-logo .wl-text{display:inline} .wl-run{align-items:center} /* ============================================================ ARRIVAL TICKS A gold tick draws itself in each node as its sparkle lands, left to right. The sparkle reaches the end of its branch at 70% of the 4.6s cycle, so the ticks share that clock and those delays exactly. ============================================================ */ .tick{stroke-dasharray:100;stroke-dashoffset:100;opacity:0; animation:tick-draw 4.6s cubic-bezier(.3,0,.4,1) infinite} @keyframes tick-draw{ 0%,66% {stroke-dashoffset:100;opacity:0} 70% {opacity:1} 80% {stroke-dashoffset:0;opacity:1} 93% {stroke-dashoffset:0;opacity:1} 99%,100%{stroke-dashoffset:0;opacity:0} } .tick.t1{animation-delay:.44s} .tick.t2{animation-delay:.60s} .tick.t3{animation-delay:.76s} .tick.t4{animation-delay:.92s} @media(prefers-reduced-motion:reduce){ .tick{animation:none;stroke-dashoffset:0;opacity:1} } /* strip wordmarks were at 42% opacity — 2.5:1, below readable. 70% gives 5.5:1 and still reads as a quiet supporting row. */ .wl-text{opacity:.72;color:var(--mineral)} .wl-item:hover .wl-text{opacity:1;color:var(--p1-deep)} .wl-logo{opacity:.66} .wl-item:hover .wl-logo{opacity:1} .wl-head{opacity:1;color:var(--slate)} /* ============================================================ WHAT THE FREE CHECK COVERS — four machines, no mechanics ============================================================ */ .checkgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} @media(max-width:900px){.checkgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:520px){.checkgrid{grid-template-columns:1fr}} .cg{display:block;background:#fff;border:1px solid var(--line);border-radius:18px; padding:22px 22px 20px;text-decoration:none;color:inherit;box-shadow:var(--sh-card); border-top:3px solid var(--c); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease} .cg:hover{transform:translateY(-3px);box-shadow:var(--sh-card-hi)} .cg-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px; background:var(--c-soft);color:var(--c-deep); font-family:var(--mono);font-size:11px;font-weight:600;margin-bottom:16px} .cg-name{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:-.035em; margin:0 0 6px;color:var(--c-deep)} .cg-q{margin:0;font-size:15px;line-height:1.45;color:var(--slate)} .cg.c1{--c:#60A5FA;--c-soft:#EFF6FF;--c-deep:#1E40AF} .cg.c2{--c:#C084FC;--c-soft:#F5F0FF;--c-deep:#7E22CE} .cg.c3{--c:#34D399;--c-soft:#ECFDF5;--c-deep:#047857} .cg.c4{--c:#FB7185;--c-soft:#FFF1F2;--c-deep:#9F1239} /* ============================================================ MARQUEE — exact loop, GPU compositing flex `gap` puts a gap BETWEEN items, so two duplicated sets are not exactly twice one set — translating -50% lands half a gap off and the loop visibly jumps. Using margin-right on every item makes each set exactly half the track, so -50% is seamless. ============================================================ */ .wl-run{ display:flex;gap:0;padding-left:0;align-items:center; will-change:transform; transform:translate3d(0,0,0); backface-visibility:hidden; animation-timing-function:linear} .wl-item{margin-right:clamp(28px,4vw,58px);flex:none} /* hover recolouring repaints mid-scroll; keep it to opacity only */ .wl-item .wl-text,.wl-item .wl-logo{will-change:opacity} .wl-track{transform:translateZ(0)} /* slower and steadier — 44s across a dozen items was brisk enough to read as jitter */ /* ============================================================ SAMPLE REPORT TABS — read as tabs, not as pills in a row A bottom border shared with the panel, an active tab that connects to the content below it, and a coloured underline per pillar. ============================================================ */ .rp-tabs{display:flex;gap:2px;flex-wrap:wrap;padding:0 clamp(14px,2vw,24px); border-bottom:1px solid var(--line);background:#FBFCFE;position:relative} .rp-tab{position:relative;top:1px; font-family:var(--serif);font-size:14px;font-weight:600;letter-spacing:-.01em; padding:15px 18px 14px;border:1px solid transparent;border-bottom:0; border-radius:12px 12px 0 0;background:transparent;color:var(--slate); cursor:pointer;white-space:nowrap;box-shadow:none; transition:background .18s ease,color .18s ease} .rp-tab::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px; border-radius:3px 3px 0 0;background:transparent;transition:background .2s ease} .rp-tab:hover{color:var(--mineral);background:rgba(255,255,255,.7)} .rp-tab.on{background:#fff;border-color:var(--line);color:var(--mineral);font-weight:700; box-shadow:0 -1px 3px rgba(31,41,55,.04)} .rp-tab.on::after{background:var(--tc,var(--brand))} .rp-tab:nth-child(1){--tc:#234775} .rp-tab:nth-child(2){--tc:#60A5FA} .rp-tab:nth-child(3){--tc:#C084FC} .rp-tab:nth-child(4){--tc:#34D399} .rp-tab:nth-child(5){--tc:#FB7185} .rp-tab.on{--tc:var(--tc)} @media(max-width:620px){ .rp-tabs{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-ms-overflow-style:none} .rp-tabs::-webkit-scrollbar{display:none} .rp-tab{padding:13px 14px 12px;font-size:13.5px} } /* ============================================================ MARQUEE — four copies, quarter translate Two copies left a gap at the wrap on anything wider than ~1800px, because one set was narrower than the viewport. Four copies means one set always exceeds even an ultrawide screen, and translating exactly -25% lands on an identical frame every time. ============================================================ */ .wl-run{ display:flex;gap:0;padding-left:0;align-items:center;white-space:nowrap; will-change:transform;backface-visibility:hidden; animation:wl-quarter 68s linear infinite} .wl-run.rev{animation-direction:reverse;animation-duration:78s} @keyframes wl-quarter{ from{transform:translate3d(0,0,0)} to {transform:translate3d(-25%,0,0)} } @media(prefers-reduced-motion:reduce){ .wl-run{animation:none} .wl-track{overflow-x:auto} } /* two hero CTAs — filled leads, outline supports, wraps cleanly on small screens */ .hero-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center} .hero-cta .btn-outline.btn-lg{padding:19px 30px;font-size:15px;border-width:2px} .hero-cta .btn-outline .arw{transition:transform .22s ease;display:inline-block} .hero-cta .btn-outline:hover .arw{transform:translateX(4px)} @media(max-width:520px){ .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{justify-content:center;width:100%} } /* ============================================================ SAMPLE REPORTS — vertical tab column Five horizontal tabs crowded the card and clipped on narrow widths. A left-hand column reads as a list of reports you can page through. ============================================================ */ .rp-split{display:grid;grid-template-columns:190px minmax(0,1fr);align-items:stretch} .rp-tabs{display:flex;flex-direction:column;gap:0;padding:12px 0 12px 12px; border-bottom:0;border-right:1px solid var(--line);background:#FBFCFE} .rp-tab{position:static;top:auto;text-align:left;white-space:normal; padding:12px 14px;border:1px solid transparent;border-right:0; border-radius:10px 0 0 10px;font-size:14px;line-height:1.3} .rp-tab::after{left:auto;right:-1px;top:9px;bottom:9px;width:3px;height:auto; border-radius:3px 0 0 3px} .rp-tab.on{background:#fff;border-color:var(--line);box-shadow:-1px 0 3px rgba(31,41,55,.04)} .rp-tab.on::after{right:-2px} .rp-stage{min-height:300px;padding:0} .rp-split .report-body{padding:clamp(22px,2.6vw,30px)} .rp-split .report-fix{border-top:1px solid var(--line)} @media(max-width:820px){ .rp-split{grid-template-columns:1fr} .rp-tabs{flex-direction:row;overflow-x:auto;padding:0 12px; border-right:0;border-bottom:1px solid var(--line); scrollbar-width:none;-ms-overflow-style:none} .rp-tabs::-webkit-scrollbar{display:none} .rp-tab{white-space:nowrap;border-radius:10px 10px 0 0;border-right:1px solid transparent; border-bottom:0;position:relative;top:1px;padding:13px 15px} .rp-tab.on{border-color:var(--line);border-bottom:0} .rp-tab::after{left:12px;right:12px;top:auto;bottom:-1px;width:auto;height:3px; border-radius:3px 3px 0 0} } /* ============================================================ SLIDE-OUT DRAWERS Enter from the left on every size. Full width on a phone, a panel on desktop. The trigger links keep their href, so without JavaScript they simply navigate to the page instead. ============================================================ */ .scrim{position:fixed;inset:0;z-index:70;background:rgba(15,23,42,.42); opacity:0;transition:opacity .3s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)} .scrim.on{opacity:1} .scrim[hidden]{display:none} .drawer{position:fixed;top:0;left:0;bottom:0;z-index:71; width:min(440px,100vw);max-width:100vw; background:#fff;border-right:1px solid var(--line); box-shadow:24px 0 60px -20px rgba(15,23,42,.28); display:flex;flex-direction:column; transform:translateX(-102%); transition:transform .38s cubic-bezier(.2,.85,.25,1); overflow-y:auto;overscroll-behavior:contain} .drawer.on{transform:translateX(0)} .drawer[hidden]{display:none} .drawer-hd{display:flex;align-items:flex-start;gap:16px; padding:26px clamp(22px,4vw,30px) 20px;border-bottom:1px solid var(--line)} .drawer-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--slate);margin:0 0 8px} .drawer-t{font-family:var(--serif);font-weight:800;font-size:26px;letter-spacing:-.04em; margin:0;color:var(--mineral)} .drawer-x{margin-left:auto;flex:none;width:38px;height:38px;border-radius:11px; border:1px solid var(--line);background:#fff;color:var(--slate); font-size:22px;line-height:1;cursor:pointer;box-shadow:none; transition:background .18s ease,color .18s ease} .drawer-x:hover{background:var(--ink);color:var(--mineral)} .drawer-body{padding:24px clamp(22px,4vw,30px) 34px;display:flex;flex-direction:column;gap:18px} .drawer-steps{list-style:none;counter-reset:d;margin:0;padding:0} .drawer-steps li{counter-increment:d;position:relative;padding:0 0 14px 34px; font-size:15.5px;line-height:1.5;color:var(--slate)} .drawer-steps li:last-child{padding-bottom:0} .drawer-steps li::before{content:counter(d);position:absolute;left:0;top:0; width:24px;height:24px;border-radius:8px;display:grid;place-items:center; background:var(--p1-soft);color:var(--p1-deep); font-family:var(--mono);font-size:11px;font-weight:600} .drawer-list{list-style:none;margin:0;padding:0} .drawer-list li{position:relative;padding:0 0 12px 26px;font-size:15.5px;line-height:1.5; color:var(--slate)} .drawer-list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px; border-radius:2px;background:var(--p3)} .drawer-note{margin:0;font-size:14.5px;line-height:1.55;color:var(--slate); background:var(--ink);border:1px solid var(--line);border-radius:14px;padding:14px 16px} .drawer-go{align-self:stretch;justify-content:center} .drawer-fine{margin:0;font-size:13px;line-height:1.5;color:var(--slate);opacity:.9} body.drawer-open{overflow:hidden} @media(max-width:520px){ .drawer{width:100vw;border-right:0} .drawer-t{font-size:23px} } @media(prefers-reduced-motion:reduce){ .drawer{transition:none} .scrim{transition:none} } /* ============================================================ SAMPLE REPORT TABS — horizontal on desktop, stacked on mobile ============================================================ */ .rp-split{display:block} .rp-tabs{flex-direction:row;gap:2px;padding:0 clamp(14px,2vw,24px); border-right:0;border-bottom:1px solid var(--line);background:#FBFCFE} .rp-tab{position:relative;top:1px;text-align:center;white-space:nowrap; padding:15px 18px 14px;border:1px solid transparent;border-bottom:0;border-right:1px solid transparent; border-radius:12px 12px 0 0} .rp-tab::after{left:14px;right:14px;top:auto;bottom:-1px;width:auto;height:3px; border-radius:3px 3px 0 0} .rp-tab.on{background:#fff;border-color:var(--line);border-bottom:0; box-shadow:0 -1px 3px rgba(31,41,55,.04)} /* ---- mobile: stack the tabs, and give the fix rows room ---- */ @media(max-width:760px){ .rp-tabs{flex-direction:column;gap:0;padding:8px; border-bottom:1px solid var(--line);overflow:visible} .rp-tab{top:auto;text-align:left;white-space:normal; padding:13px 14px;border:1px solid transparent;border-radius:10px; display:flex;align-items:center;gap:10px} .rp-tab::after{position:static;width:8px;height:8px;flex:none; border-radius:3px;background:var(--tc);opacity:.35;order:-1;content:""} .rp-tab.on{background:#fff;border-color:var(--line);box-shadow:var(--sh-card)} .rp-tab.on::after{opacity:1} .report-hd{flex-wrap:wrap;gap:8px 12px;padding:16px 16px 14px} .report-hd .u{width:100%;word-break:break-all;font-size:11.5px} .rp-split .report-body{padding:20px 16px} .rp-focus{gap:13px} .rp-name{font-size:22px} .rp-q{font-size:15px} .rfix{display:grid;grid-template-columns:1fr;gap:7px; padding:15px 16px;align-items:start} .rfix .sev{justify-self:start} .rfix span:not(.sev){font-size:15px;line-height:1.45} .rfix a{justify-self:start;font-size:14px} .rp-sum{grid-template-columns:1fr;gap:4px} } /* ============================================================ HERO CARD — the scorecard is the hero now The chat demo explains why the score matters; it moved to its own section. What sits beside the headline is the product. ============================================================ */ .herocard{background:#fff;border:1px solid var(--line);border-radius:24px; box-shadow:0 24px 60px -24px rgba(31,41,55,.20), 0 3px 10px rgba(31,41,55,.05); overflow:hidden;position:relative;z-index:2} @media(min-width:1001px){ .herocard{transform:rotate(-.8deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)} .herocard:hover{transform:rotate(0) translateY(-4px)} } .hc-hd{display:flex;align-items:flex-start;gap:14px; padding:20px clamp(20px,2.6vw,26px) 16px;border-bottom:1px solid var(--line); background:linear-gradient(160deg,#FBFCFE 0%,#FFFFFF 100%)} .hc-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--slate);margin:0 0 7px} .hc-t{font-family:var(--mono);font-size:14px;letter-spacing:-.01em;color:var(--mineral);margin:0} .hc-badge{margin-left:auto;flex:none;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--slate);background:var(--ink); border:1px solid var(--line);border-radius:999px;padding:5px 11px} .herocard .sp-dials{padding:6px clamp(20px,2.6vw,26px)} .herocard .spd{padding:15px 0} .herocard .spd-l{font-size:16px} .herocard .spd-q{font-size:13.5px} .hc-ft{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap; padding:15px clamp(20px,2.6vw,26px) 17px;border-top:1px solid var(--line); background:#FBFCFE;font-size:13px;line-height:1.5;color:var(--slate)} .hc-ft a{margin-left:auto;color:var(--brand);font-weight:600;white-space:nowrap} /* the demo, now a section of its own */ .demowrap{max-width:840px;margin-inline:auto} .demowrap .panel{transform:none;margin:0} @media(min-width:1001px){ .demowrap .panel{transform:rotate(-.7deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)} .demowrap .panel:hover{transform:rotate(0) translateY(-3px)} } /* the parent .wl-item still carried opacity:.42, which multiplied with the text's own — effective 0.30, about 2:1. Opacity lives on the child only. */ .wl-item{opacity:1} .wl-item:hover{opacity:1} .wl-text{opacity:1;color:#454E5C} .wl-item:hover .wl-text{opacity:1;color:var(--p1-deep)} .wl-logo{opacity:.62;filter:grayscale(1)} .wl-item:hover .wl-logo{opacity:1;filter:grayscale(0)} .wl-head{color:#4B5768;opacity:1} /* ============================================================ LEVEL-UP CARDS + AFFILIATE DISCLOSURE ============================================================ */ .nextup{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} @media(max-width:940px){.nextup{grid-template-columns:1fr}} .nx{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line); border-radius:20px;padding:24px 24px 22px;text-decoration:none;color:inherit; box-shadow:var(--sh-card); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,border-color .22s ease} .nx:hover{transform:translateY(-4px);box-shadow:var(--sh-card-hi);border-color:#CBD8EA} .nx-n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px; background:var(--p1-soft);color:var(--p1-deep); font-family:var(--mono);font-size:11px;font-weight:600;margin-bottom:16px} .nx-t{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.035em; margin:0 0 9px;color:var(--mineral)} .nx-x{margin:0 0 20px;font-size:15.5px;line-height:1.5;color:var(--slate)} .nx-go{margin-top:auto;font-family:var(--serif);font-weight:700;font-size:14.5px; color:var(--p1-deep);display:inline-flex;align-items:center;gap:7px} .nx-go .a{transition:transform .2s ease;display:inline-block} .nx:hover .nx-go .a{transform:translateX(5px)} .afd{margin:clamp(26px,3vw,36px) 0 0;padding:18px 22px;border-radius:16px; background:#fff;border:1px solid var(--line); font-size:14.5px;line-height:1.6;color:var(--slate);max-width:80ch} .afd b{color:var(--mineral)} .afd a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} .policy{max-width:74ch;margin:clamp(40px,5vw,64px) auto 0;padding:26px clamp(22px,3vw,32px); background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-card)} .policy h2{font-family:var(--serif);font-weight:800;font-size:clamp(21px,2.2vw,27px); letter-spacing:-.035em;margin:0 0 16px;color:var(--mineral)} .policy p{margin:0 0 14px;font-size:16px;line-height:1.6;color:var(--slate)} .policy p:last-child{margin-bottom:0} .policy b{color:var(--mineral)} .policy code{font-family:var(--mono);font-size:13px;background:var(--ink); border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--slate)} .policy a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} /* the report sits directly under the hero now, so it needs less top run-up and a slightly heavier card — it is the product, not an illustration */ .reportwrap{padding-block:clamp(56px,7vw,96px) clamp(72px,9vw,130px);margin-top:0;clip-path:none} .reportwrap .report{margin-top:0; box-shadow:0 30px 70px -28px rgba(31,41,55,.22), 0 3px 10px rgba(31,41,55,.05)} /* strip wordmarks in full ink */ .wl-text{color:var(--mineral);opacity:1} .wl-item:hover .wl-text{color:var(--p1-deep)} /* ============================================================ DIRECTORY STRIP — static, one pass, no repeats The marquee stays on the platforms strip. Here the same fourteen names cycling past read as padding, so they simply sit still. ============================================================ */ .wl-static{display:block} .wl-set{display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(16px,2.4vw,34px) clamp(22px,3.4vw,46px); max-width:1000px;margin-inline:auto;padding:2px 0} .tools-strip .wl-item{margin-right:0;height:auto} .tools-strip .wl-text{font-size:clamp(15px,1.35vw,18px)} /* ============================================================ HERO CARD — the numbers are the asset Bigger numerals, colour doing the work, no question text, more air. ============================================================ */ .herocard .sp-dials{padding:10px clamp(20px,2.6vw,28px) 6px} .herocard .spd{grid-template-columns:66px minmax(0,1fr);column-gap:18px; padding:20px 0;align-items:center} .herocard .spd-ring{width:66px;height:66px;grid-row:1} .herocard .spd-ring svg{width:66px;height:66px} .herocard .spd-ring circle{stroke-width:6} .herocard .spd-val{stroke-dasharray:125.7} .herocard .spd-n{font-size:24px;font-weight:800;letter-spacing:-.05em;color:var(--c-deep)} .herocard .spd-l{grid-row:1;align-self:center; font-size:clamp(19px,1.9vw,23px);font-weight:800;letter-spacing:-.04em; color:var(--c-deep)} .herocard .spd-q{display:none} .herocard .spd{border-bottom:1px solid var(--line)} .herocard .spd:last-child{border-bottom:0} @media(max-width:520px){ .herocard .spd{grid-template-columns:56px minmax(0,1fr);column-gap:14px;padding:16px 0} .herocard .spd-ring,.herocard .spd-ring svg{width:56px;height:56px} .herocard .spd-n{font-size:21px} .herocard .spd-l{font-size:18px} } /* ============================================================ HOW TO COPY PAGE SOURCE — per device, including the honest one ============================================================ */ .howto-toggle{font:inherit;font-size:inherit;background:none;border:0;padding:0; color:var(--brand);text-decoration:underline;text-underline-offset:3px;cursor:pointer; box-shadow:none} .howto-toggle:hover{color:var(--mineral)} .howto-box{margin:12px 0 4px;padding:6px 18px;background:#fff; border:1px solid var(--line);border-radius:14px} .howto-box[hidden]{display:none} /* ============================================================ PURCHASE FORM — three numbered fields, then what happens next ============================================================ */ .buy-hint{margin:-8px 0 18px;font-size:13px;color:var(--slate);opacity:.9} .buy-what{margin:22px 0 18px;padding:16px 18px;border-radius:14px; background:#FFFDF7;border:1px solid #EBD8B0} .buy-what p{margin:0 0 11px;font-size:14.5px;line-height:1.55;color:var(--slate)} .buy-what p:last-child{margin-bottom:0} .buy-what b{color:var(--mineral)} .buy label{display:block} .buy-hint.ok{color:#047857;opacity:1;font-weight:600} /* the hero card keeps the big numerals AND says what each one means — name and question stack in the right-hand column beside the ring */ .herocard .spd{grid-template-columns:66px minmax(0,1fr);row-gap:4px;align-items:center} .herocard .spd-ring{grid-row:1 / span 2;align-self:center} .herocard .spd-l{grid-row:1;align-self:end; font-size:clamp(18px,1.75vw,21px);font-weight:800;letter-spacing:-.04em;line-height:1.15} .herocard .spd-q{display:block;grid-column:2;grid-row:2;align-self:start; font-size:14px;line-height:1.4;letter-spacing:-.01em;color:var(--slate); margin:0;max-width:32ch} @media(max-width:520px){ .herocard .spd-l{font-size:17px} .herocard .spd-q{font-size:13.5px} } /* ============================================================ DEVICE PICKER — pick your device, get one set of instructions Five stacked blocks made the reader do the filtering. Now the page guesses, and the other three are one tap away. ============================================================ */ .devpick{margin:6px 0 2px} .dp-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px} .dp-tab{display:flex;flex-direction:column;align-items:center;gap:8px; padding:14px 8px 12px;border-radius:14px;border:1px solid var(--line);background:#fff; cursor:pointer;box-shadow:none; font-family:var(--serif);font-size:12.5px;font-weight:600;line-height:1.25; letter-spacing:-.01em;color:var(--slate);text-align:center; transition:border-color .18s ease,background .18s ease,color .18s ease} .dp-tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;opacity:.8} .dp-tab:hover{border-color:#CBD8EA;color:var(--mineral)} .dp-tab[aria-selected="true"]{background:var(--p1-soft);border-color:var(--p1); color:var(--p1-deep);font-weight:700} .dp-tab[aria-selected="true"] svg{opacity:1} .dp-panel{padding:16px 18px;border-radius:14px;background:#fff;border:1px solid var(--line)} .dp-panel[hidden]{display:none} .dp-panel p{margin:0 0 11px;font-size:15px;line-height:1.6;color:var(--slate)} .dp-panel p:last-child{margin-bottom:0} .dp-panel b{color:var(--mineral)} .dp-panel i{font-style:normal;color:var(--mineral);font-weight:600} .dp-panel a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} .dp-panel kbd{font-family:var(--mono);font-size:12px;background:var(--ink); border:1px solid var(--line);border-bottom-width:2px;border-radius:6px; padding:2px 7px;color:var(--mineral);white-space:nowrap} .dp-panel code{font-family:var(--mono);font-size:13px;background:var(--ink); border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--slate)} .dp-panel.dp-no{background:#FFF1F2;border-color:#FFDDE1} .dp-panel.dp-no b{color:#9F1239} @media(max-width:520px){ .dp-tabs{grid-template-columns:repeat(2,minmax(0,1fr))} .dp-tab{flex-direction:row;justify-content:flex-start;text-align:left;padding:12px 13px} .dp-tab br{display:none} .dp-tab svg{width:20px;height:20px;flex:none} } /* the pack drawer is a form, not a summary */ .drawer-buy{background:transparent;border:0;box-shadow:none;padding:0;margin:0} .drawer-buy label{display:block;margin:16px 0 7px;font-size:11.5px} .drawer-buy label:first-child{margin-top:0} .drawer-buy input{width:100%} .drawer-buy .btn{width:100%;justify-content:center;margin-top:18px} .drawer-buy .buy-hint{margin:7px 0 0} .drawer-buy .codetoggle{margin-top:16px} .drawer .drawer-list{margin-top:4px;padding-top:18px;border-top:1px solid var(--line)} .drawer .drawer-list li{font-size:14.5px;padding-bottom:10px} /* ============================================================ HERO URL START The page opens by asking about your website, not by offering buttons. ============================================================ */ .urlstart{margin-top:clamp(26px,3.2vw,38px);max-width:560px} .u-lab{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em; text-transform:uppercase;color:var(--slate);margin-bottom:10px} .u-row{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap} .u-in{flex:1 1 240px;min-width:0; font-family:var(--serif);font-size:17px;letter-spacing:-.01em;color:var(--mineral); padding:17px 20px;border-radius:999px;border:1px solid var(--line);background:#fff; box-shadow:0 1px 2px rgba(31,41,55,.05); transition:border-color .2s ease,box-shadow .2s ease} .u-in::placeholder{color:#94A0B0} .u-in:focus{outline:none;border-color:var(--p1); box-shadow:0 0 0 4px rgba(96,165,250,.18)} .u-go{flex:0 0 auto;padding:17px 26px;font-size:15.5px;white-space:nowrap} .u-note{margin:14px 0 0;font-size:15px;line-height:1.55;color:var(--slate);max-width:44ch} .u-note.err{color:#B42318} .u-alt{margin:16px 0 0} .u-alt a{font-size:14.5px;color:var(--slate);text-decoration:underline; text-underline-offset:4px;text-decoration-color:var(--line)} .u-alt a:hover{color:var(--p1-deep);text-decoration-color:currentColor} @media(max-width:600px){ .u-row{flex-direction:column} .u-go{width:100%;justify-content:center} } /* directory strip: bigger, roomier wordmarks */ .tools-strip .wl-text{font-size:clamp(19px,1.85vw,25px);letter-spacing:-.035em} .tools-strip .wl-set{gap:clamp(20px,2.8vw,40px) clamp(28px,4vw,58px);max-width:1120px} .tools-strip .wl-head{margin-bottom:20px} .tools-strip{padding:26px 0 24px} /* pull the directory strip up under its heading */ #tools .sec-head{margin-bottom:clamp(18px,2vw,26px)} .tools-strip{margin-block:clamp(4px,1vw,12px) clamp(22px,2.6vw,32px);padding:22px 0 24px} .tools-strip .wl-head{margin-bottom:18px} /* the band now sits straight after the hero — soften the run-up */ .band{padding:clamp(72px,9vw,140px) 0 clamp(72px,9vw,140px)} /* and the CTA got longer */ .u-go{font-size:15px;padding:17px 24px} @media(min-width:601px) and (max-width:1100px){ .u-row{flex-direction:column} .u-go{width:100%;justify-content:center} } /* the demo caption was set in mono and wrapping to five short lines */ .replay .cap{font-family:var(--serif);font-size:14px;line-height:1.5; letter-spacing:-.01em;color:var(--slate);max-width:56ch} .replay{gap:18px;align-items:center} @media(max-width:700px){.replay{flex-direction:column;align-items:flex-start;gap:12px}} /* ============================================================ 1 · THE FOUR SCORES, PREMIUM Bigger rings, tabular numerals, a tinted row on hover, and enough air that each score reads as a measurement rather than a list item. ============================================================ */ .herocard{border-radius:26px; box-shadow:0 1px 2px rgba(31,41,55,.04), 0 28px 64px -28px rgba(31,41,55,.22), 0 60px 120px -60px rgba(31,41,55,.16)} .herocard .sp-dials{padding:8px clamp(18px,2.4vw,26px) 10px} .herocard .spd{ grid-template-columns:76px minmax(0,1fr);column-gap:20px;row-gap:5px; padding:20px 14px;margin:0 -14px;border-radius:16px;border-bottom:0; position:relative;transition:background .22s ease} .herocard .spd::after{content:"";position:absolute;left:14px;right:14px;bottom:0; height:1px;background:var(--line)} .herocard .spd:last-child::after{display:none} .herocard .spd:hover{background:var(--c-soft)} .herocard .spd.d1{--c-soft:#EFF6FF} .herocard .spd.d2{--c-soft:#F5F0FF} .herocard .spd.d3{--c-soft:#ECFDF5} .herocard .spd.d4{--c-soft:#FFF1F2} .herocard .spd-ring,.herocard .spd-ring svg{width:76px;height:76px} .herocard .spd-ring circle{stroke-width:6.5} .herocard .spd-track{stroke:#EEF2F7} .herocard .spd-n{font-size:27px;font-weight:800;letter-spacing:-.055em; font-variant-numeric:tabular-nums} .herocard .spd-l{font-size:clamp(19px,1.85vw,22px);letter-spacing:-.042em;line-height:1.1} .herocard .spd-q{font-size:14.5px;line-height:1.45;max-width:34ch} .hc-hd{padding:22px clamp(18px,2.4vw,26px) 18px} .hc-t{font-size:15px;letter-spacing:-.01em} .hc-ft{padding:16px clamp(18px,2.4vw,26px) 18px;font-size:13.5px} /* ============================================================ 2 · CARD PROPORTIONS The four cards were bottom-heavy — text column too narrow against a large art panel. Rebalanced, with the colour band tightened. ============================================================ */ .step-band{padding:13px clamp(24px,3.4vw,46px);font-size:11px;letter-spacing:.22em} .step-txt{padding:clamp(26px,3.4vw,48px) clamp(24px,3.4vw,46px) clamp(28px,3.4vw,46px)} .step-art{padding:clamp(20px,2.6vw,34px) clamp(24px,3.4vw,44px) clamp(28px,3.4vw,44px)} .step-art svg{max-width:440px} @media(min-width:1100px){ .step{grid-template-columns:1.12fr .88fr} } .step-verb{font-size:clamp(38px,6.2vw,74px);line-height:.94;margin:0 0 12px} .step-q{font-size:clamp(18px,1.85vw,23px);margin:0 0 14px;max-width:30ch} .step-x{font-size:16.5px;line-height:1.6;max-width:44ch;margin:0 0 24px} .step-n{width:46px;height:46px;border-radius:14px;font-size:14px;margin:0 0 20px} /* ============================================================ 4 · THE REPORT, ELEVATED It is the product, so it gets the strongest frame on the page. ============================================================ */ .reportwrap .report{ border-radius:26px;border:1px solid #E1E8F2; box-shadow:0 1px 2px rgba(31,41,55,.04), 0 34px 76px -30px rgba(31,41,55,.24), 0 80px 140px -70px rgba(31,41,55,.20)} .report-hd{padding:20px clamp(18px,2.4vw,28px); background:linear-gradient(160deg,#FBFCFE 0%,#FFFFFF 100%); border-bottom:1px solid var(--line)} .report-hd .u{font-size:13.5px;color:var(--slate)} .report-hd .pill{font-family:var(--serif);font-weight:800;font-size:15px;letter-spacing:-.03em; padding:7px 15px;background:#fff;border:1px solid var(--line);color:var(--mineral); box-shadow:0 1px 2px rgba(31,41,55,.05)} .rp-tabs{background:#FBFCFE} .report-fix{background:#fff} .rfix{padding:17px clamp(18px,2.4vw,28px)} .report-ft{padding:16px clamp(18px,2.4vw,28px);background:#FBFCFE; border-top:1px solid var(--line);font-size:14px} /* ============================================================ 5 · THE DIAGRAM, ELEVATED Its own field, more room, and a heading that carries weight. ============================================================ */ .flow{padding:clamp(34px,4.6vw,64px) clamp(26px,4vw,60px);border-radius:30px; background:linear-gradient(168deg,#FFFFFF 0%,#FBFCFE 46%,#F6FAFF 100%); border:1px solid #E4EBF5; box-shadow:0 1px 2px rgba(31,41,55,.04), 0 30px 70px -30px rgba(31,41,55,.20)} .flow-head h3{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.045em;margin-bottom:14px} .flow-head p{font-size:clamp(16px,1.55vw,19px);max-width:52ch;margin-inline:auto} .flow-head{margin-bottom:clamp(30px,4vw,50px)} .treesvg{max-width:1040px} .tsvg-n{font-size:22px;font-weight:800;letter-spacing:-.7px} .tsvg-w{font-size:11px;letter-spacing:2.6px} .tsvg-t{font-size:20px} .tsvg-f{font-size:17px} /* ============================================================ 3 · THE SCENES No raster illustrations available, so the SVG line art gets the treatment instead: a floating card, softer strokes, depth. ============================================================ */ .step-art svg{overflow:visible;filter:drop-shadow(0 18px 34px rgba(31,41,55,.10))} .step-art .il-w{fill:#fff;stroke:rgba(31,41,55,.10);stroke-width:1.2} .step-art .il-s{fill:rgba(31,41,55,.05);stroke:none} .step-art .il-st{stroke:rgba(31,41,55,.22);stroke-width:2.2;stroke-linecap:round;fill:none} .step-art .il-dot{fill:rgba(31,41,55,.20)} .step-art .il-a{fill:var(--c-deep)} .step-art .il-hl{fill:var(--c);opacity:.34;rx:3} .step.c1 .il-hl{fill:#F6B534;opacity:.55} .step-art .il-mint{fill:#C7F1DD} .step-art .il-lav{fill:#E2D6FF} /* the panel behind them reads as a lit surface, not a tinted block */ .step-art{position:relative} .step-art::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(72% 62% at 50% 24%,rgba(255,255,255,.85),transparent 70%)} .step-art > *{position:relative;z-index:1} /* the closing CTA centres its URL field */ .urlstart-end{margin-inline:auto;max-width:640px;text-align:center;margin-top:clamp(28px,3.4vw,40px)} .urlstart-end .u-lab{text-align:center} .urlstart-end .u-note{margin-inline:auto;max-width:48ch} .urlstart-end .u-row{justify-content:center} @media(min-width:1101px){ .urlstart-end .u-in{flex:1 1 260px;max-width:300px} } /* bigger brand names in the directory strip */ .tools-strip .wl-text{font-size:clamp(23px,2.3vw,32px);letter-spacing:-.04em;font-weight:800} .tools-strip .wl-set{gap:clamp(22px,3vw,44px) clamp(32px,4.4vw,68px);max-width:1220px} .tools-strip .wl-item{height:auto} .tools-strip{padding:30px 0 30px} .tools-strip .wl-head{margin-bottom:22px} /* ============================================================ NAVIGATION — grouped menus with a rotating chevron Opens on hover with a small delay, on click, and on keyboard focus. ============================================================ */ .nav-links{display:flex;align-items:center;gap:2px} .nav-links > a,.navtrig{ font-family:var(--serif);font-size:14.5px;font-weight:600;letter-spacing:-.015em; color:var(--slate);padding:9px 14px;border-radius:10px;background:transparent; border:0;cursor:pointer;box-shadow:none; display:inline-flex;align-items:center;gap:7px; transition:color .16s ease,background .16s ease} .nav-links > a:hover,.navtrig:hover{color:var(--mineral);background:rgba(31,41,55,.045)} .nav-links > a[aria-current],.navtrig.on{color:var(--mineral)} .chev{width:11px;height:8px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;opacity:.55; transition:transform .22s cubic-bezier(.2,.8,.2,1),opacity .16s ease} .navtrig:hover .chev{opacity:.9} .navitem.open .chev{transform:rotate(180deg);opacity:1} .navitem{position:relative} .navdrop{position:absolute;top:calc(100% + 10px);left:0;z-index:60; min-width:340px;padding:8px;border-radius:18px;background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(31,41,55,.05), 0 22px 48px -18px rgba(31,41,55,.22), 0 48px 90px -50px rgba(31,41,55,.18); opacity:0;visibility:hidden;transform:translateY(-6px) scale(.985); transform-origin:top left;pointer-events:none; transition:opacity .2s ease,transform .22s cubic-bezier(.2,.8,.2,1),visibility .2s} .navitem.open .navdrop{opacity:1;visibility:visible;transform:none;pointer-events:auto} /* a hover bridge so the pointer can travel to the panel */ .navdrop::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px} .nm-row{display:block;padding:11px 13px;border-radius:12px;text-decoration:none; position:relative;transition:background .16s ease} .nm-row:hover{background:var(--ink)} .nm-t{display:block;font-family:var(--serif);font-weight:700;font-size:15px; letter-spacing:-.025em;color:var(--mineral);margin-bottom:2px} .nm-x{display:block;font-size:13.5px;line-height:1.4;color:var(--slate)} /* the four pillars carry their colours into the menu */ .nm-row.p1,.nm-row.p2,.nm-row.p3,.nm-row.p4{padding-left:28px} .nm-row.p1::before,.nm-row.p2::before,.nm-row.p3::before,.nm-row.p4::before{ content:"";position:absolute;left:13px;top:17px;width:8px;height:8px;border-radius:3px} .nm-row.p1::before{background:var(--p1)} .nm-row.p2::before{background:var(--p2)} .nm-row.p3::before{background:var(--p3)} .nm-row.p4::before{background:var(--p4)} .nm-row.p1:hover .nm-t{color:var(--p1-deep)} .nm-row.p2:hover .nm-t{color:var(--p2-deep)} .nm-row.p3:hover .nm-t{color:var(--p3-deep)} .nm-row.p4:hover .nm-t{color:var(--p4-deep)} @media(prefers-reduced-motion:reduce){ .navdrop,.chev{transition:none} } @media(max-width:960px){.nav-links{display:none}} /* ============================================================ FOUR WAYS — showcase cards with real UI inside Three across, then one full width for the fourth. Each card is a small working interface rather than an illustration of one. ============================================================ */ .ways{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} @media(max-width:1020px){.ways{grid-template-columns:1fr}} .way{display:flex;flex-direction:column;position:relative;overflow:hidden; background:#fff;border:1px solid var(--line);border-radius:26px; padding:28px 28px 24px;text-decoration:none;color:inherit; box-shadow:0 1px 2px rgba(31,41,55,.04),0 24px 54px -26px rgba(31,41,55,.18); transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease} .way:hover{transform:translateY(-5px);border-color:var(--c-edge); box-shadow:0 1px 2px rgba(31,41,55,.05),0 34px 72px -28px rgba(31,41,55,.24)} .way::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--c)} .way::after{content:"";position:absolute;right:-90px;top:-70px;width:280px;height:280px; border-radius:50%;background:var(--c-glow);pointer-events:none} .way > *{position:relative;z-index:1} .way.wide{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,3.4vw,52px);align-items:center;padding:clamp(30px,3.4vw,46px)} @media(max-width:1020px){.way.wide{grid-template-columns:1fr}} .way-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--c-deep);opacity:.85;margin-bottom:10px} .way-hd h3{font-family:var(--serif);font-weight:800;font-size:clamp(20px,2vw,25px); letter-spacing:-.038em;line-height:1.15;margin:0 0 18px;color:var(--mineral)} .way.wide .way-hd h3{font-size:clamp(26px,2.8vw,36px);margin-bottom:14px} .way-x{margin:0 0 18px;font-size:16.5px;line-height:1.6;color:var(--slate);max-width:44ch} .way-art{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px;margin-bottom:20px} .way.wide .way-art{margin-bottom:0} .way-go{margin-top:auto;font-family:var(--serif);font-weight:700;font-size:15px; color:var(--c-deep);display:inline-flex;align-items:center;gap:8px} .way-go .a{transition:transform .22s ease;display:inline-block} .way:hover .way-go .a{transform:translateX(5px)} .way.wide .way-go{grid-column:1;margin-top:6px} .way.w1{--c:#60A5FA;--c-deep:#1E40AF;--c-edge:#BFD8FF;--c-glow:radial-gradient(circle,rgba(96,165,250,.14),transparent 68%)} .way.w2{--c:#C084FC;--c-deep:#7E22CE;--c-edge:#E2CBFF;--c-glow:radial-gradient(circle,rgba(192,132,252,.14),transparent 68%)} .way.w3{--c:#34D399;--c-deep:#047857;--c-edge:#A7EFD0;--c-glow:radial-gradient(circle,rgba(52,211,153,.15),transparent 68%)} .way.w4{--c:#FB7185;--c-deep:#9F1239;--c-edge:#FFC9D1;--c-glow:radial-gradient(circle,rgba(251,113,133,.15),transparent 68%)} /* ---- the little interfaces ---- */ .mk-chat,.mk-bot,.mk-slots,.mk-order,.mk-table{ background:#fff;border:1px solid var(--line);border-radius:16px; box-shadow:0 10px 26px -14px rgba(31,41,55,.20);font-size:13.5px;line-height:1.5} .mk-chat{padding:14px} .mk-q{background:var(--ink);border-radius:12px;padding:10px 12px;color:var(--slate); margin-bottom:10px;font-size:13px} .mk-a{color:var(--mineral);margin-bottom:12px} .mk-a b{background:#FFE9AE;border-radius:3px;padding:0 3px} .mk-cite{display:flex;align-items:center;gap:8px;padding-top:10px; border-top:1px dashed var(--line);font-family:var(--mono);font-size:11.5px;color:var(--p1-deep)} .mk-dot{width:7px;height:7px;border-radius:50%;background:var(--p1);flex:none} .mk-tag{margin-left:auto;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase; background:#EFF6FF;border:1px solid #DBE9FF;border-radius:999px;padding:3px 8px;color:var(--p1-deep)} .mk-bot{overflow:hidden} .mk-bar{display:flex;align-items:center;gap:9px;padding:11px 13px;background:#FBFCFE; border-bottom:1px solid var(--line);font-family:var(--mono);font-size:11px; letter-spacing:.06em;color:var(--slate)} .mk-av{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;flex:none; background:var(--p2);color:#fff;font-family:var(--serif);font-weight:800;font-size:11px} .mk-av.o{background:var(--p4);width:34px;height:34px;border-radius:11px;font-size:15px} .mk-msg{margin:11px 13px;padding:10px 12px;border-radius:12px;font-size:13px} .mk-msg.you{background:var(--ink);color:var(--slate)} .mk-msg.bot{background:#F5F0FF;color:var(--mineral)} .mk-src{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;color:var(--p2-deep);opacity:.8} .mk-slots{padding:14px} .mk-slot-hd{display:flex;align-items:center;font-family:var(--mono);font-size:11px; letter-spacing:.1em;color:var(--slate);margin-bottom:12px} .mk-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px; font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#047857; background:#ECFDF5;border:1px solid #A7F3D0;border-radius:999px;padding:3px 9px} .mk-live i{width:6px;height:6px;border-radius:50%;background:#34D399; animation:ping 2.4s cubic-bezier(.4,0,.6,1) infinite} .mk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .mk-grid span{font-family:var(--mono);font-size:11px;text-align:center;padding:8px 4px; border-radius:9px;background:var(--ink);border:1px solid var(--line);color:var(--slate)} .mk-grid span.on{background:#ECFDF5;border-color:#A7EFD0;color:#047857;font-weight:600} .mk-foot{margin-top:11px;font-size:11.5px;color:var(--slate);opacity:.85} .mk-order{padding:16px} .mk-o-hd{display:flex;align-items:center;gap:11px;padding-bottom:13px; border-bottom:1px solid var(--line);margin-bottom:4px} .mk-o-hd b{display:block;font-family:var(--serif);font-size:14.5px;letter-spacing:-.02em; color:var(--mineral)} .mk-o-hd span{font-size:12px;color:var(--slate)} .mk-ok{margin-left:auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center; background:#ECFDF5;color:#047857;border:1px solid #A7F3D0;font-size:13px} .mk-rows{margin:0} .mk-rows > div{display:flex;justify-content:space-between;padding:9px 0; border-bottom:1px solid var(--line);font-size:13px} .mk-rows > div:last-child{border-bottom:0} .mk-rows dt{color:var(--slate);margin:0} .mk-rows dd{margin:0;color:var(--mineral);font-family:var(--mono);font-size:12.5px} .mk-rows .tot dt,.mk-rows .tot dd{font-family:var(--serif);font-weight:800;font-size:16px; letter-spacing:-.03em;color:var(--mineral)} .mk-table{overflow:hidden} .mk-t-hd,.mk-t-row{display:grid;grid-template-columns:1.6fr .9fr .5fr;gap:10px; padding:11px 14px;align-items:center;font-size:13px} .mk-t-hd{background:#FBFCFE;border-bottom:1px solid var(--line); font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase; color:var(--slate)} .mk-t-row{border-bottom:1px solid var(--line);color:var(--mineral)} .mk-t-row:last-child{border-bottom:0} .mk-t-row span:first-child{display:flex;align-items:center;gap:9px} .mk-t-row .sw{width:9px;height:9px;border-radius:3px;flex:none} .sw.a{background:var(--p1)} .sw.b{background:var(--p2)} .sw.c{background:var(--p3)} .sw.d{background:var(--p4)} .mk-t-row .ok{color:#047857} .mk-t-row .wait{color:#B54708} .mk-t-row span:last-child{font-family:var(--mono);font-size:12.5px;text-align:right} @media(max-width:520px){ .way{padding:22px 20px 20px;border-radius:22px} .mk-t-hd,.mk-t-row{grid-template-columns:1.4fr .8fr .5fr;padding:10px;font-size:12px} } /* a card lights up briefly when you land on it from the hero */ .way:target{animation:way-land 2.2s ease} @keyframes way-land{ 0%{box-shadow:0 0 0 0 var(--c-edge),0 24px 54px -26px rgba(31,41,55,.18)} 18%{box-shadow:0 0 0 5px var(--c-edge),0 30px 66px -26px rgba(31,41,55,.22)} 100%{box-shadow:0 0 0 0 rgba(0,0,0,0),0 24px 54px -26px rgba(31,41,55,.18)} } @media(prefers-reduced-motion:reduce){.way:target{animation:none}} /* the hero rows are internal jumps now, so make that legible on hover */ .herocard .spd:hover .spd-l{text-decoration:underline;text-underline-offset:4px; text-decoration-thickness:2px;text-decoration-color:var(--c)} /* the sticky nav would otherwise sit over the top of any anchored element */ [id]{scroll-margin-top:104px} .way[id]{scroll-margin-top:120px} /* ============================================================ THE FOUR SCORES — the product dashboard ============================================================ */ .herocard{border-radius:28px;overflow:hidden; background:linear-gradient(172deg,#FFFFFF 0%,#FDFEFF 60%,#F9FBFF 100%); box-shadow:0 1px 2px rgba(31,41,55,.04), 0 34px 76px -30px rgba(31,41,55,.26), 0 74px 140px -70px rgba(31,41,55,.20)} .hc-hd{padding:24px clamp(20px,2.6vw,28px) 20px; background:linear-gradient(160deg,#FBFCFE,#FFFFFF)} .hc-k{font-size:10px;letter-spacing:.2em;margin-bottom:9px} .hc-t{font-size:16px;font-weight:600;color:var(--mineral)} .hc-badge{font-size:9.5px;letter-spacing:.16em;padding:6px 12px; background:#fff;border-color:#E1E8F2;box-shadow:0 1px 2px rgba(31,41,55,.05)} .herocard .sp-dials{padding:10px clamp(16px,2.2vw,22px) 12px} .herocard .spd{ grid-template-columns:84px minmax(0,1fr);column-gap:22px;row-gap:6px; padding:22px 16px;margin:0 -16px;border-radius:18px} .herocard .spd::after{left:16px;right:16px;background:#EDF1F7} .herocard .spd:hover{background:var(--c-soft)} .herocard .spd-ring,.herocard .spd-ring svg{width:84px;height:84px} .herocard .spd-ring circle{stroke-width:7} .herocard .spd-n{font-size:30px;letter-spacing:-.06em;font-variant-numeric:tabular-nums} .herocard .spd-l{font-size:clamp(20px,1.95vw,24px);letter-spacing:-.045em} .herocard .spd-q{font-size:15px;line-height:1.45;color:var(--slate)} .hc-ft{background:#FBFCFE;padding:17px clamp(20px,2.6vw,28px) 19px} /* ============================================================ FOUR WAYS — larger cards, richer colour, stronger hierarchy ============================================================ */ #ways{padding-block:clamp(80px,10vw,150px)} .ways{gap:22px} .way{padding:32px 30px 28px;border-radius:30px; background:linear-gradient(172deg,#FFFFFF 0%,var(--c-wash) 100%)} .way::before{height:5px} .way::after{width:340px;height:340px;right:-110px;top:-90px} .way.w1{--c-wash:#F7FAFF} .way.w2{--c-wash:#FBF8FF} .way.w3{--c-wash:#F6FDFA} .way.w4{--c-wash:#FFF9FA} .way-k{font-size:11px;letter-spacing:.2em;margin-bottom:12px; display:inline-flex;align-items:center;gap:8px} .way-k::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--c)} .way-hd h3{font-size:clamp(22px,2.2vw,28px);margin-bottom:22px;letter-spacing:-.042em} .way.wide .way-hd h3{font-size:clamp(28px,3.2vw,42px)} .way-art{gap:16px;margin-bottom:24px} .way-go{font-size:15.5px;padding-top:4px} /* the mocks get a touch more presence at the larger card size */ .mk-chat,.mk-bot,.mk-slots,.mk-order,.mk-table{ border-radius:18px;font-size:14px; box-shadow:0 1px 2px rgba(31,41,55,.04),0 16px 36px -18px rgba(31,41,55,.24)} .mk-chat{padding:16px} .mk-slots{padding:16px} .mk-order{padding:18px} /* ============================================================ BRAND LOCKUP — bigger mark, bigger wordmark ============================================================ */ .nav .brand{gap:13px;font-size:19px;font-weight:800;letter-spacing:-.035em; color:var(--mineral)} .nav .brand .mk{width:34px;height:34px} .mk-l{stroke-width:1.5;opacity:.24} .nav .brand:hover .mk-l{opacity:.46} .mobilenav .brand{font-size:18px;font-weight:800;letter-spacing:-.035em;gap:12px} .mobilenav .brand .mk{width:30px;height:30px} footer .brand{font-size:18px;font-weight:800;letter-spacing:-.035em;gap:12px; margin-bottom:16px} footer .brand .mk{width:32px;height:32px} @media(max-width:520px){ .nav .brand{font-size:17px;gap:11px} .nav .brand .mk{width:30px;height:30px} } /* ============================================================ URL FIELD — the most important input on the site ============================================================ */ .u-in{font-size:19px;padding:21px 26px; box-shadow:0 1px 2px rgba(31,41,55,.05),0 10px 26px -16px rgba(31,41,55,.22)} .u-in::placeholder{font-size:18px;color:#98A3B3} .u-in:focus{box-shadow:0 0 0 4px rgba(96,165,250,.20), 0 10px 30px -14px rgba(96,165,250,.5)} .u-go{padding:21px 28px;font-size:15.5px} .u-lab{font-size:11px;letter-spacing:.18em} /* in the closing CTA the field is centred and needs real width */ .urlstart-end{max-width:760px} @media(min-width:1101px){ .urlstart-end .u-in{flex:1 1 340px;max-width:none} } @media(max-width:1100px){ .urlstart-end .u-in{width:100%;flex:1 1 100%} } /* the hero field sits in a narrower column, so give it the full width there */ .urlstart{max-width:620px} @media(max-width:600px){ .u-in{font-size:18px;padding:19px 22px} } /* the arcs carry their own weight — no filter, which was painting a box */ .herocard .spd-val{filter:none} .herocard .spd-ring{background:none} .herocard .spd-ring svg{overflow:visible;background:none} /* ============================================================ THE PILLAR SYSTEM One canonical treatment, used everywhere the four appear. The repetition is the point — same order, same colour, same marker, same number. It stops being duplication and starts being identity. 01 Read you #60A5FA deep #1E40AF 02 Answer as you #C084FC deep #7E22CE 03 Call you #34D399 deep #047857 04 Transact with you #FB7185 deep #9F1239 ============================================================ */ .pl1{--c:#60A5FA;--c-soft:#EFF6FF;--c-edge:#DBE9FF;--c-deep:#1E40AF} .pl2{--c:#C084FC;--c-soft:#F5F0FF;--c-edge:#EADCFF;--c-deep:#7E22CE} .pl3{--c:#34D399;--c-soft:#ECFDF5;--c-edge:#CDF3E3;--c-deep:#047857} .pl4{--c:#FB7185;--c-soft:#FFF1F2;--c-edge:#FFDDE1;--c-deep:#9F1239} /* the shared number chip — identical in every context */ .plnum{display:inline-grid;place-items:center;flex:none; width:30px;height:30px;border-radius:9px; background:var(--c-soft);color:var(--c-deep);border:1px solid var(--c-edge); font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em} /* the shared square marker, for compact lists */ .plmark{display:inline-block;width:9px;height:9px;border-radius:3px; background:var(--c);flex:none} /* the shared name treatment */ .plname{font-family:var(--serif);font-weight:800;letter-spacing:-.035em;color:var(--c-deep)} /* --- make every existing appearance use the same values --- */ .way.w1,.step.c1,.cg.c1,.spd.d1,.fn.c1,.tn.c1,.rp-focus.d1,.herocard .spd.d1{ --c:#60A5FA;--c-soft:#EFF6FF;--c-edge:#DBE9FF;--c-deep:#1E40AF} .way.w2,.step.c2,.cg.c2,.spd.d2,.fn.c2,.tn.c2,.rp-focus.d2,.herocard .spd.d2{ --c:#C084FC;--c-soft:#F5F0FF;--c-edge:#EADCFF;--c-deep:#7E22CE} .way.w3,.step.c3,.cg.c3,.spd.d3,.fn.c3,.tn.c3,.rp-focus.d3,.herocard .spd.d3{ --c:#34D399;--c-soft:#ECFDF5;--c-edge:#CDF3E3;--c-deep:#047857} .way.w4,.step.c4,.cg.c4,.spd.d4,.fn.c4,.tn.c4,.rp-focus.d4,.herocard .spd.d4{ --c:#FB7185;--c-soft:#FFF1F2;--c-edge:#FFDDE1;--c-deep:#9F1239} /* the number chip replaces four slightly different treatments */ .cg-n,.step-n,.way-k::before,.nx-n{transition:none} .cg-n{width:30px;height:30px;border-radius:9px;background:var(--c-soft); color:var(--c-deep);border:1px solid var(--c-edge);font-size:11px} .step-n{width:44px;height:44px;border-radius:13px;background:var(--c-soft); color:var(--c-deep);border:1px solid var(--c-edge);box-shadow:none;font-size:13px} .step.c4 .step-n{background:var(--c-soft);color:var(--c-deep);border-color:var(--c-edge); box-shadow:none} /* names always in the pillar's deep colour, always the same weight */ .cg-name,.step-verb,.way-hd h3,.rp-name{color:var(--c-deep)} .way-hd h3{color:var(--mineral)} /* an urgency line that states a fact rather than a statistic */ .urgent{display:flex;gap:11px;align-items:flex-start; margin:clamp(22px,2.6vw,30px) 0 0;max-width:52ch; font-size:15px;line-height:1.55;color:var(--slate)} .urgent-dot{width:8px;height:8px;border-radius:50%;background:var(--p3);flex:none; margin-top:8px;box-shadow:0 0 0 0 rgba(52,211,153,.6); animation:ping 2.6s cubic-bezier(.4,0,.6,1) infinite} @media(prefers-reduced-motion:reduce){.urgent-dot{animation:none}} /* ============================================================ REPORT DETAIL LEVEL — plain English or technical The same findings, written for whoever is reading. A business owner gets the consequence; a developer gets the selector. ============================================================ */ .rmode{display:inline-flex;gap:2px;padding:3px;border-radius:999px; background:var(--ink);border:1px solid var(--line);margin-left:12px} .rm{font-family:var(--serif);font-size:12.5px;font-weight:600;letter-spacing:-.01em; padding:7px 14px;border-radius:999px;border:0;background:transparent; color:var(--slate);cursor:pointer;box-shadow:none;white-space:nowrap; transition:background .18s ease,color .18s ease} .rm:hover{color:var(--mineral)} .rm.on{background:#fff;color:var(--mineral);font-weight:700; box-shadow:0 1px 3px rgba(31,41,55,.10)} .rf-tech{display:none} .report.tech .rf-plain{display:none} .report.tech .rf-tech{display:inline} .report.tech .rf-tech{font-family:var(--mono);font-size:12.5px;letter-spacing:-.01em} @media(max-width:760px){ .report-hd{align-items:flex-start} .rmode{margin-left:0;margin-top:4px} .rm{padding:6px 11px;font-size:12px} } /* the scoring explanation needs room to be read, not skimmed */ .hc-ft{display:block;font-size:13.5px;line-height:1.55} .hc-ft b{color:var(--mineral)} .hc-ft span{display:block;margin-bottom:9px} .hc-ft a{margin-left:0;display:inline-block} .report-ft{line-height:1.6;font-size:14px} .report-ft b{color:var(--mineral)} /* ============================================================ PROVENANCE — quiet, factual, not a testimonial ============================================================ */ .prov{display:flex;align-items:flex-start;gap:12px; margin:0;padding:15px clamp(18px,2.4vw,28px) 18px; border-top:1px solid var(--line);background:#FBFCFE; font-size:13.5px;line-height:1.55;color:var(--slate)} .prov a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} .prov-mk{display:grid;grid-template-columns:repeat(2,7px);gap:2px;flex:none;margin-top:4px} .prov-mk i{width:7px;height:7px;border-radius:2px;display:block} .prov-mk i:nth-child(1){background:var(--p1)} .prov-mk i:nth-child(2){background:var(--p2)} .prov-mk i:nth-child(3){background:var(--p3)} .prov-mk i:nth-child(4){background:var(--p4)} .foot-prov{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:#B9CBE2;opacity:.9} .foot-prov a{color:#fff;text-decoration:underline;text-underline-offset:3px} /* the hero says the consequence first, then the offer */ .lede-tight{font-size:clamp(21px,2.15vw,29px);max-width:20ch; font-weight:700;letter-spacing:-.035em;line-height:1.22;color:var(--mineral); margin-bottom:14px} .lede-sub{font-size:clamp(16px,1.5vw,18.5px);line-height:1.55;letter-spacing:-.01em; color:var(--slate);max-width:44ch;margin:0} @media(max-width:600px){ .lede-tight{max-width:none} .lede-sub{max-width:none} } /* ============================================================ BEFORE AND AFTER The same report, run twice. Toggling swaps the numbers, the arcs and the closing note — it does not hide the first run. ============================================================ */ .rstage{margin-left:8px} .n-after,.report.after .n-before{display:none} .report.after .n-after{display:inline} .rf-after,.report.after .rf-before{display:none} .report.after .rf-after{display:block} /* the arc animates between the two values */ .report.after .spd-val{ stroke-dashoffset:calc(125.7 - (125.7 * var(--pct2) / 100)); transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)} .report .spd-val{transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.2,1)} /* after the fix, a passing state reads green rather than red */ .report.after .rfix .sev.hi{background:#ECFDF5;color:#047857;border-color:#A7F3D0} .report.after .rfix .sev.md{background:#ECFDF5;color:#047857;border-color:#A7F3D0} .report.after .rfix .sev::after{content:" \2713"} .report.after .rfix a{opacity:.45;pointer-events:none} .report.after .pill{background:#ECFDF5;border-color:#A7F3D0;color:#047857} @media(max-width:760px){ .rstage{margin-left:0} .report-hd{gap:8px 10px} } @media(prefers-reduced-motion:reduce){.report .spd-val{transition:none}} .rcap{margin:0;padding:14px clamp(18px,2.4vw,28px);background:#FBFCFE; border-top:1px solid var(--line);font-size:13px;line-height:1.55;color:var(--slate)} /* ============================================================ HEADLINE — four verbs, four pillars discovers · understands · uses · buys from Each verb carries its pillar's colour, so the framework is stated before the framework is explained. ============================================================ */ .h1-long{font-size:clamp(34px,5.4vw,68px);line-height:1.04;letter-spacing:-.042em; max-width:15ch} .h1-long .v1{color:var(--p1-deep)} .h1-long .v2{color:var(--p2-deep)} .h1-long .v3{color:var(--p3-deep)} .h1-long .under{color:var(--p4-deep)} .h1-long .under::after{background:#FFD9DF;height:.16em;bottom:.02em} @media(max-width:600px){.h1-long{max-width:none;font-size:clamp(31px,8.4vw,44px)}} /* ============================================================ THREE TIERS — free, audit, audit + pack ============================================================ */ .tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start} @media(max-width:1020px){.tiers{grid-template-columns:1fr}} .tier{display:flex;flex-direction:column;position:relative; background:#fff;border:1px solid var(--line);border-radius:24px; padding:30px 28px 26px;box-shadow:var(--sh-card)} .tier.pro{background:linear-gradient(140deg,#FFFDF7 0%,#FFFFFF 100%);border-color:#E7D7B0; box-shadow:0 1px 2px rgba(120,90,30,.05),0 28px 60px -26px rgba(120,90,30,.22)} .tier-flag{position:absolute;top:-11px;left:28px; font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase; background:#F6B534;color:#3F2D05;border-radius:999px;padding:5px 12px; box-shadow:0 4px 12px -4px rgba(246,181,52,.7)} .tier ul{list-style:none;margin:0 0 24px;padding:0;font-size:15px;line-height:1.5} .tier li{position:relative;padding:9px 0 9px 24px;border-bottom:1px dashed var(--line); color:var(--slate)} .tier li:last-child{border-bottom:0} .tier li::before{content:"";position:absolute;left:0;top:1.05em;width:7px;height:7px; border-radius:2px;background:var(--p3)} .tier.pro li::before{background:#E0BE79} .tier li b{color:var(--mineral);font-weight:700} .tier .btn{margin-top:auto;align-self:stretch;justify-content:center} .tiers-note{max-width:74ch;margin:clamp(28px,3.4vw,40px) auto 0;padding:20px 24px; background:#fff;border:1px solid var(--line);border-radius:18px; font-size:16px;line-height:1.6;color:var(--slate);box-shadow:var(--sh-card)} .tiers-note b{color:var(--mineral)} /* the objection-killer sits directly above the buy button */ .tier-nd{margin:0 0 20px;padding:14px 16px;border-radius:14px; background:#ECFDF5;border:1px solid #A7EFD0; font-size:14.5px;line-height:1.55;color:#0B5F44} .tier-nd b{color:#047857} /* ============================================================ THE RECOMMENDED TIER Ascending price order left to right, but the third card is the one the eye lands on: lifted, wider, warmer, with the largest price. ============================================================ */ .tiers{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.18fr); gap:16px;align-items:stretch} @media(max-width:1020px){.tiers{grid-template-columns:1fr}} .tier{transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease} .tier.t-free,.tier.t-audit{background:linear-gradient(172deg,#FFFFFF 0%,#FBFCFE 100%)} .tier.t-free .tier-p,.tier.t-audit .tier-p{color:var(--slate)} .tier.t-free .btn,.tier.t-audit .btn{border-color:var(--line)} .tier.pro{ border:2px solid #E0BE79;border-radius:28px;padding:36px 32px 30px; background:linear-gradient(168deg,#FFFDF6 0%,#FFFFFF 62%,#FFFCF3 100%); box-shadow:0 2px 4px rgba(120,90,30,.06), 0 34px 74px -28px rgba(120,90,30,.30), 0 76px 130px -70px rgba(120,90,30,.24); z-index:2;position:relative} @media(min-width:1021px){ .tier.pro{margin-top:-16px;margin-bottom:-16px} .tier.pro:hover{transform:translateY(-6px)} } .tier.pro::after{content:"";position:absolute;right:-70px;top:-60px;width:260px;height:260px; border-radius:50%;background:radial-gradient(circle,rgba(246,181,52,.16),transparent 68%); pointer-events:none} .tier.pro > *{position:relative;z-index:1} .tier-flag{top:-13px;left:32px;font-size:10px;letter-spacing:.16em;padding:6px 14px; background:#F6B534;color:#3F2D05;font-weight:700; box-shadow:0 6px 16px -5px rgba(246,181,52,.85)} .tier.pro .tier-k{color:#8A6A22;font-weight:600} .tier.pro .tier-lead{font-size:clamp(22px,2.2vw,27px)} .tier.pro .tier-p{font-size:clamp(32px,3.2vw,42px);color:var(--mineral)} .tier.pro .tier-p small{font-size:14px} .tier.pro li{font-size:15.5px;padding:10px 0 10px 24px} .tier.pro .btn-cite{padding:18px 26px;font-size:16px} #pricing .lede b{color:var(--mineral);font-weight:700} /* the Implementation Guide list shows what is shared and what is added */ .tier.pro li.same{color:var(--slate);opacity:.72} .tier.pro li.same::before{background:#CBD5E1} .tier.pro li.plus{color:var(--mineral);font-weight:600} .tier.pro li.plus::before{background:#F6B534} .tier-s{font-size:16px;line-height:1.55;color:var(--slate);margin:0 0 20px} .tier.pro .tier-s{color:var(--mineral)} /* the scope boundary — stated where money changes hands */ .tier-warn{margin:0 0 20px;padding:13px 16px;border-radius:14px; background:#FFF4ED;border:1px solid #FFD9C7; font-size:14px;line-height:1.55;color:#7A3E12} .tier-warn b{color:#9A3412} /* ============================================================ EXECUTIVE SUMMARY The view you forward to whoever signs things off. One verdict, four bars, three actions with time and impact. No jargon. ============================================================ */ .report-body.exec{padding:clamp(26px,3vw,38px) clamp(20px,2.6vw,34px)} .ex-top{display:flex;gap:clamp(20px,3vw,44px);align-items:flex-start; padding-bottom:24px;border-bottom:1px solid var(--line);margin-bottom:24px} .ex-say{flex:1;min-width:0} .ex-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate);margin:0 0 12px} .ex-verdict{font-family:var(--serif);font-weight:800; font-size:clamp(23px,2.6vw,33px);letter-spacing:-.04em;line-height:1.15; margin:0 0 12px;color:var(--mineral)} .ex-line{margin:0;font-size:16.5px;line-height:1.6;color:var(--slate);max-width:56ch} .ex-score{flex:none;text-align:center;padding:14px 20px;border-radius:18px; background:var(--ink);border:1px solid var(--line);min-width:118px} .ex-n{display:block;font-family:var(--serif);font-weight:800; font-size:clamp(40px,4.6vw,58px);letter-spacing:-.06em;line-height:1; color:var(--mineral);font-variant-numeric:tabular-nums} .ex-of{display:block;margin-top:6px;font-family:var(--mono);font-size:10px; letter-spacing:.14em;text-transform:uppercase;color:var(--slate)} .report.after .ex-score{background:#ECFDF5;border-color:#A7F3D0} .report.after .ex-n{color:#047857} .ex-bars{display:grid;gap:14px;margin-bottom:26px} .exb{display:grid;grid-template-columns:minmax(120px,168px) 1fr 44px; gap:14px;align-items:center} .exb-l{font-family:var(--serif);font-weight:700;font-size:15.5px;letter-spacing:-.03em; color:var(--c-deep)} .exb-t{position:relative;height:10px;border-radius:999px;background:#EEF2F7;overflow:hidden} .exb-t i{position:absolute;inset:0 auto 0 0;border-radius:999px;background:var(--c); width:var(--w);transition:width .9s cubic-bezier(.2,.8,.2,1)} .report.after .exb-t i{width:var(--w2)} .exb-n{font-family:var(--serif);font-weight:800;font-size:17px;letter-spacing:-.04em; text-align:right;color:var(--c-deep);font-variant-numeric:tabular-nums} .ex-acts{padding:20px 22px;border-radius:18px;background:#FBFCFE;border:1px solid var(--line)} .ex-h{font-family:var(--serif);font-weight:800;font-size:17px;letter-spacing:-.03em; margin:0 0 14px;color:var(--mineral)} .ex-acts ol{margin:0 0 14px;padding-left:22px;font-size:15.5px;line-height:1.55;color:var(--slate)} .ex-acts li{margin-bottom:11px} .ex-acts li:last-child{margin-bottom:0} .ex-acts b{color:var(--mineral)} .ex-tag{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:10.5px; letter-spacing:.06em;background:#fff;border:1px solid var(--line);border-radius:999px; padding:3px 9px;color:var(--slate);white-space:nowrap} .ex-foot{margin:0;font-size:14px;line-height:1.55;color:var(--slate); padding-top:13px;border-top:1px solid var(--line)} .ex-a,.report.after .ex-b{display:none} .report.after .ex-a{display:block} @media(max-width:760px){ .ex-top{flex-direction:column;gap:18px} .ex-score{align-self:flex-start;min-width:0;padding:12px 18px} .exb{grid-template-columns:1fr 44px;row-gap:6px} .exb-l{grid-column:1 / -1} .ex-tag{margin-left:0;margin-top:5px} } @media(prefers-reduced-motion:reduce){.exb-t i{transition:none}} /* ============================================================ WHAT DO I GET Five lines, no jargon, straight after the hero. For the reader who will not get as far as the framework. ============================================================ */ .plain{padding-block:clamp(50px,6vw,86px)} .plain-in{max-width:760px;margin-inline:auto;text-align:center; padding:clamp(30px,4vw,52px) clamp(24px,3.4vw,48px); background:#fff;border:1px solid var(--line);border-radius:28px; box-shadow:0 1px 2px rgba(31,41,55,.04),0 26px 58px -26px rgba(31,41,55,.20)} .plain-q{font-family:var(--serif);font-weight:800;letter-spacing:-.045em; font-size:clamp(28px,3.4vw,44px);margin:0 0 clamp(22px,2.6vw,32px);color:var(--mineral)} .plain-l{list-style:none;margin:0 0 22px;padding:0;display:inline-grid;gap:2px;text-align:left} .plain-l li{position:relative;padding:12px 0 12px 40px; font-family:var(--serif);font-weight:600;font-size:clamp(17px,1.75vw,21px); letter-spacing:-.025em;color:var(--mineral);border-bottom:1px solid var(--line)} .plain-l li:last-child{border-bottom:0} .plain-l li::before{content:"";position:absolute;left:4px;top:50%;margin-top:-9px; width:19px;height:19px;border-radius:50%;background:#ECFDF5;border:1px solid #A7EFD0} .plain-l li::after{content:"";position:absolute;left:10px;top:50%;margin-top:-4px; width:5px;height:9px;border:solid #047857;border-width:0 2px 2px 0; transform:rotate(42deg)} .plain-n{margin:0 0 26px;font-size:15px;color:var(--slate)} .plain-in .btn{padding:18px 30px;font-size:16.5px} /* ============================================================ PRICING — the Implementation Guide is the product, the others are options ============================================================ */ .hero-tier{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(28px,4vw,60px);align-items:start; padding:clamp(34px,4vw,56px);border-radius:32px; background:linear-gradient(168deg,#FFFDF6 0%,#FFFFFF 58%,#FFFBF2 100%); border:2px solid #E0BE79; box-shadow:0 2px 4px rgba(120,90,30,.06), 0 40px 84px -30px rgba(120,90,30,.30), 0 90px 150px -80px rgba(120,90,30,.24)} @media(max-width:1020px){.hero-tier{grid-template-columns:1fr;padding:30px 24px}} .hero-tier .tier-flag{top:-13px;left:clamp(30px,4vw,52px)} .hero-tier .tier-k{color:#8A6A22;font-weight:600;margin-bottom:10px} .ht-lead{font-family:var(--serif);font-weight:800;letter-spacing:-.045em; font-size:clamp(34px,4.4vw,60px);line-height:1.02;margin:0 0 16px;color:var(--mineral)} .ht-s{font-size:17px;line-height:1.6;color:var(--slate);margin:0 0 24px;max-width:46ch} .ht-p{font-family:var(--serif);font-weight:800;letter-spacing:-.05em; font-size:clamp(36px,3.8vw,50px);color:var(--mineral);margin-bottom:20px} .ht-p small{font-family:var(--serif);font-size:14.5px;font-weight:600;letter-spacing:-.01em; color:var(--slate);margin-left:10px} .hero-tier .btn-lg{padding:19px 30px;font-size:16.5px} .ht-nd{margin:20px 0 0;padding:15px 17px;border-radius:14px; background:#ECFDF5;border:1px solid #A7EFD0; font-size:14.5px;line-height:1.55;color:#0B5F44;max-width:48ch} .ht-nd b{color:#047857} .ht-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate);margin:0 0 14px} .ht-list{list-style:none;margin:0 0 16px;padding:0} .ht-list li{position:relative;padding:11px 0 11px 28px;font-size:15.5px;line-height:1.45; border-bottom:1px dashed #EADFC6;color:var(--mineral)} .ht-list li:last-child{border-bottom:0} .ht-list li::before{content:"";position:absolute;left:0;top:1.15em;width:8px;height:8px; border-radius:2px} .ht-list li.a{color:var(--slate)} .ht-list li.a::before{background:#D7DEE8} .ht-list li.b::before{background:#F6B534} .ht-d{margin:0;font-size:14px;color:var(--slate)} .tiers-alt{margin:clamp(34px,4vw,52px) 0 16px;font-family:var(--mono); font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate)} .tiers{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:760px){.tiers{grid-template-columns:1fr}} .tiers .tier{padding:26px 24px 22px;border-radius:20px;box-shadow:var(--sh-card)} .tiers .tier-lead{font-size:clamp(19px,1.9vw,23px)} .tiers .tier-p{font-size:clamp(24px,2.4vw,30px)} /* the report sits high on the page now, so it needs less run-up */ .reportwrap{padding-block:clamp(46px,5.6vw,84px) clamp(60px,7vw,110px)} /* ============================================================ URL FIELD — flex-basis means height once the row becomes a column `flex:1 1 340px` in a column container was setting a 340px height. Reset the basis and pin the height wherever the row stacks. ============================================================ */ .u-row{align-items:center} .u-in{flex:1 1 auto;height:auto;min-height:0} @media(min-width:1101px){ .u-row{flex-direction:row} .u-in{flex:1 1 340px} } @media(max-width:1100px){ .u-row{flex-direction:column;align-items:stretch} .u-in,.u-go{flex:0 0 auto;width:100%} } .urlstart-end .u-in,.urlstart .u-in{max-width:none} @media(min-width:1101px){ .urlstart-end .u-row{flex-direction:row} .urlstart-end .u-in{flex:1 1 340px} } /* ============================================================ PROVENANCE — display:flex made every text run its own column, so the sentence broke apart around the inline link. Block layout with an absolutely positioned mark instead. ============================================================ */ .prov{display:block;position:relative;padding-left:clamp(40px,4vw,50px)} .prov-mk{position:absolute;left:clamp(18px,2.4vw,28px);top:18px;margin-top:0} @media(max-width:600px){ .prov{padding:15px 18px 16px 40px} .prov-mk{left:18px;top:17px} } /* the urgency line has the same shape, so give it the same treatment */ .urgent{display:block;position:relative;padding-left:20px} .urgent-dot{position:absolute;left:0;top:9px;margin-top:0} /* same flex-splits-the-sentence bug in these two */ .hc-ft{display:block} .report-ft{display:block} .report-ft a{white-space:nowrap} .hc-ft a{white-space:nowrap} /* ============================================================ CRAWLER MONITOR — a later repeat(3,1fr) was overriding the responsive columns, so it stayed three-across on a phone and the ACTIVE tags were cut off. ============================================================ */ @media(max-width:900px){ .monitor-grid{grid-template-columns:repeat(2,1fr)} .mrow:nth-child(3n){border-right:1px solid var(--line)} .mrow:nth-child(2n){border-right:0} } @media(max-width:560px){ .monitor-grid{grid-template-columns:1fr} .mrow:nth-child(3n),.mrow:nth-child(2n){border-right:0} .mrow{border-right:0;padding:14px 18px;gap:12px} } /* the name and tag must never collide */ .mrow{flex-wrap:nowrap;min-width:0} .mrow .n{min-width:0;overflow-wrap:anywhere} .mrow .s{flex:none;margin-left:auto;white-space:nowrap} .monitor-hd{flex-wrap:wrap;gap:10px 14px} .monitor-hd .t{min-width:0} /* a way out of each strip */ .wl-all{display:inline-flex;align-items:center;gap:7px;margin-left:10px; font-family:var(--serif);font-weight:700;font-size:14.5px;letter-spacing:-.02em; color:var(--p1-deep);text-decoration:none; padding:7px 15px;border-radius:999px;background:#fff;border:1px solid var(--line); box-shadow:0 1px 2px rgba(31,41,55,.05); transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease} .wl-all:hover{border-color:#BFD8FF;transform:translateY(-1px); box-shadow:0 6px 16px -8px rgba(31,41,55,.24)} .wl-all .a{transition:transform .2s ease} .wl-all:hover .a{transform:translateX(4px)} .tools-strip .wl-note{margin-top:20px;text-align:center} .tools-strip .wl-all{margin-left:0} @media(max-width:600px){ .wl-note{display:flex;flex-direction:column;align-items:center;gap:12px} .wl-all{margin-left:0} } /* ============================================================ HELP WIDGET — bottom right, no backend Answers are written into the page, so it is instant, works offline, never invents anything, and needs no API key on a static host. ============================================================ */ .hb{position:fixed;right:clamp(16px,2.4vw,26px);bottom:clamp(16px,2.4vw,26px);z-index:70; display:inline-flex;align-items:center;gap:11px; padding:13px 20px 13px 15px;border-radius:999px;border:1px solid var(--line); background:#fff;cursor:pointer; font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:-.02em; color:var(--mineral); box-shadow:0 2px 6px rgba(31,41,55,.08),0 18px 40px -16px rgba(31,41,55,.30); transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease} .hb:hover{transform:translateY(-3px); box-shadow:0 2px 6px rgba(31,41,55,.10),0 26px 54px -18px rgba(31,41,55,.36)} .hb-mk i:nth-child(1){background:var(--p1)} .hb-mk i:nth-child(3){background:var(--p3)} body .hp{position:fixed;right:clamp(16px,2.4vw,26px);bottom:clamp(16px,2.4vw,26px);z-index:71; width:min(392px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 40px)); display:flex;flex-direction:column;overflow:hidden; background:#fff;border:1px solid var(--line);border-radius:22px; box-shadow:0 2px 8px rgba(31,41,55,.08),0 30px 70px -20px rgba(31,41,55,.38); opacity:0;transform:translateY(10px) scale(.98);transform-origin:bottom right; transition:opacity .22s ease,transform .26s cubic-bezier(.2,.8,.2,1)} .hp[hidden]{display:none} .hp.on{opacity:1;transform:none} .hp-hd{display:flex;align-items:flex-start;gap:12px;flex:none; padding:18px 20px 16px;border-bottom:1px solid var(--line); background:linear-gradient(160deg,#FBFCFE,#FFFFFF)} .hp-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate);margin:0 0 6px} .hp-t{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:-.035em; margin:0;color:var(--mineral)} .hp-x{margin-left:auto;flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line); background:#fff;color:var(--slate);font-size:19px;line-height:1;cursor:pointer;box-shadow:none} .hp-x:hover{color:var(--mineral);border-color:#CBD8EA} .hp-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 8px; display:flex;flex-direction:column;gap:12px} .hp-ft{flex:none;display:flex;align-items:center;gap:12px;flex-wrap:wrap; padding:13px 18px;border-top:1px solid var(--line);background:#FBFCFE; font-size:13px;color:var(--slate)} .hp-ft a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} @media(max-width:520px){ .hp{right:10px;left:10px;bottom:10px;width:auto;max-height:calc(100vh - 20px)} .hb{right:14px;bottom:14px;padding:12px 17px 12px 13px;font-size:14px} } @media(prefers-reduced-motion:reduce){ .hb,.hp,} @media print{.hb,.hp{display:none}} /* ============================================================ FAQ — the awkward questions, answered ============================================================ */ .faqs{max-width:820px;margin-inline:auto;display:grid;gap:10px} .faq{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden; transition:border-color .2s ease,box-shadow .2s ease} .faq[open]{border-color:#CBD8EA;box-shadow:var(--sh-card)} .faq summary{list-style:none;cursor:pointer;position:relative; padding:19px 54px 19px 22px; font-family:var(--serif);font-weight:700;font-size:clamp(16px,1.65vw,19px); letter-spacing:-.03em;color:var(--mineral)} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--p1-deep)} .faq summary::after{content:"";position:absolute;right:22px;top:50%;margin-top:-5px; width:10px;height:10px;border-right:2px solid var(--slate);border-bottom:2px solid var(--slate); transform:rotate(45deg);transition:transform .24s cubic-bezier(.2,.8,.2,1)} .faq[open] summary::after{transform:rotate(-135deg);margin-top:-1px} .faq-a{padding:0 22px 20px;font-size:16px;line-height:1.65;color:var(--slate)} .faq-a p{margin:0 0 12px} .faq-a p:last-child{margin:0} .faq-a b{color:var(--mineral)} .faq-a i{font-style:italic} .faq-a a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} @media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}} /* ============================================================ SITE SEARCH — launcher and panel ============================================================ */ .hb-i{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;flex:none;color:var(--p1-deep)} .hp-hd{align-items:center;padding:12px 12px 12px 16px;gap:8px} .hp-field{display:flex;align-items:center;gap:10px;flex:1;min-width:0; padding:10px 14px;border-radius:12px;background:var(--ink);border:1px solid var(--line)} .hp-field:focus-within{border-color:var(--p1);background:#fff; box-shadow:0 0 0 3px rgba(96,165,250,.16)} .hp-i{width:16px;height:16px;fill:none;stroke:var(--slate);stroke-width:2; stroke-linecap:round;flex:none} .hp-field input{flex:1;min-width:0;border:0;background:none;outline:none;padding:0; font-family:var(--serif);font-size:15px;letter-spacing:-.015em;color:var(--mineral)} .hp-field input::placeholder{color:#9AA6B6} .hp-field input::-webkit-search-cancel-button{display:none} .hp-body{padding:14px 12px 10px;gap:8px} .hp-t{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate);margin:0 0 4px;padding:0 6px} .hp-res{display:flex;flex-direction:column;gap:3px} .hp-r{display:block;padding:11px 12px;border-radius:12px;text-decoration:none; border:1px solid transparent;transition:background .14s ease,border-color .14s ease} .hp-r:hover,.hp-r.sel{background:#FBFDFF;border-color:#DCE7F5} .hp-rt{display:block;font-family:var(--serif);font-weight:700;font-size:14.5px; letter-spacing:-.025em;color:var(--mineral);margin-bottom:3px} .hp-rd{display:block;font-size:13px;line-height:1.45;color:var(--slate);margin-bottom:4px} .hp-ru{display:block;font-family:var(--mono);font-size:10.5px;color:var(--p1-deep);opacity:.75} .hp-r mark{background:#FFE9AE;color:inherit;border-radius:3px;padding:0 2px} .hp-none{margin:6px 8px;font-size:14px;color:var(--slate)} .hp-none a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} .hp-ft kbd{font-family:var(--mono);font-size:10px;background:#fff;border:1px solid var(--line); border-bottom-width:2px;border-radius:5px;padding:1px 5px;margin-right:3px;color:var(--slate)} /* ============================================================ STICKY CTA Appears once the hero has gone, hides over the pricing section so it never covers the thing it is pointing at, and can be dismissed. ============================================================ */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:66; background:rgba(255,255,255,.92);backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid var(--line); box-shadow:0 -8px 30px -14px rgba(31,41,55,.22); transform:translateY(100%);transition:transform .32s cubic-bezier(.2,.8,.2,1)} .sticky[hidden]{display:none} .sticky.on{transform:none} .sticky-in{display:flex;align-items:center;gap:clamp(14px,2.4vw,32px); padding-block:12px} .sticky-say{display:flex;align-items:center;gap:13px;min-width:0;flex:1} .sticky-mk{display:grid;grid-template-columns:repeat(2,8px);gap:3px;flex:none} .sticky-mk i{width:8px;height:8px;border-radius:2px;display:block} .sticky-mk i:nth-child(1){background:var(--p1)} .sticky-mk i:nth-child(2){background:var(--p2)} .sticky-mk i:nth-child(3){background:var(--p3)} .sticky-mk i:nth-child(4){background:var(--p4)} .sticky-t{min-width:0;font-size:14.5px;line-height:1.35;color:var(--slate)} .sticky-t b{display:block;font-family:var(--serif);font-weight:700;font-size:15.5px; letter-spacing:-.028em;color:var(--mineral)} .sticky-x{display:block;font-size:13.5px} .sticky-do{display:flex;align-items:center;gap:14px;flex:none} .sticky-free{font-family:var(--serif);font-weight:600;font-size:14.5px;color:var(--slate); text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line); white-space:nowrap} .sticky-free:hover{color:var(--p1-deep);text-decoration-color:currentColor} .sticky-do .btn{padding:13px 22px;font-size:15px;white-space:nowrap} .sticky-x-btn{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line); background:#fff;color:var(--slate);font-size:18px;line-height:1;cursor:pointer;box-shadow:none} .sticky-x-btn:hover{color:var(--mineral);border-color:#CBD8EA} /* the search launcher lifts above the bar so they never overlap */ body.sticky-on .hb{bottom:calc(clamp(16px,2.4vw,26px) + 74px)} body.sticky-on .hp{bottom:calc(clamp(16px,2.4vw,26px) + 74px)} @media(max-width:860px){ .sticky-x,.sticky-mk{display:none} .sticky-t b{font-size:14.5px} .sticky-free{display:none} .sticky-in{padding-block:10px;gap:12px} .sticky-do .btn{padding:12px 18px;font-size:14px} } @media(max-width:520px){ .sticky-say{display:none} .sticky-do{flex:1} .sticky-do .btn{width:100%;justify-content:center} body.sticky-on .hb{bottom:calc(14px + 66px)} } @media(prefers-reduced-motion:reduce){.sticky{transition:none}} @media print{.sticky{display:none}} /* the free route sits under the paid button, quieter */ .sub-cta{margin:14px 0 0;font-size:14.5px} .sub-cta a{color:var(--slate);text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--line)} .sub-cta a:hover{color:var(--p1-deep);text-decoration-color:currentColor} .plain-in .sub-cta{margin-top:16px} footer .sub-cta a{color:#B9CBE2} footer .sub-cta a:hover{color:#fff} /* ============================================================ STICKY CTA — the URL field itself, always on screen ============================================================ */ .sticky-in{align-items:center;gap:clamp(12px,2vw,26px);padding-block:11px;flex-wrap:nowrap} .sticky-say{flex:0 1 auto;min-width:0} .sticky-t b{font-size:15px} .sticky-x{font-size:13px} .sticky-form{display:flex;align-items:center;gap:9px;flex:1 1 420px;min-width:0} .sticky-in-f{flex:1 1 auto;min-width:0; font-family:var(--serif);font-size:15.5px;letter-spacing:-.01em;color:var(--mineral); padding:13px 18px;border-radius:999px;border:1px solid var(--line);background:#fff; box-shadow:0 1px 2px rgba(31,41,55,.05); transition:border-color .2s ease,box-shadow .2s ease} .sticky-in-f::placeholder{color:#9AA6B6} .sticky-in-f:focus{outline:none;border-color:var(--p1); box-shadow:0 0 0 3px rgba(96,165,250,.18)} .sticky-form .btn{flex:0 0 auto;padding:13px 22px;font-size:14.5px;white-space:nowrap} .sticky-note{margin:0;flex:0 0 auto;font-size:13px;white-space:nowrap} .sticky-note a{color:var(--slate);text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--line)} .sticky-note a:hover{color:var(--p1-deep);text-decoration-color:currentColor} .sticky-note.err{color:#B42318;white-space:normal} .sticky-note.ok{color:#047857;font-weight:600} .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0 0 0 0);white-space:nowrap;border:0} @media(max-width:1180px){ .sticky-say{display:none} } @media(max-width:820px){ .sticky-note{display:none} .sticky-form{flex:1} } @media(max-width:560px){ .sticky-in{padding-block:9px;gap:8px} .sticky-form{flex-direction:column;gap:7px;width:100%} .sticky-in-f{width:100%;flex:0 0 auto;padding:12px 16px;font-size:15px} .sticky-form .btn{width:100%;justify-content:center;padding:12px 16px;font-size:14.5px} .sticky-x-btn{align-self:flex-start} body.sticky-on .hb{bottom:calc(14px + 116px)} } /* ============================================================ BEFORE / AFTER TOGGLE — the state reads before you read the label Rose and mint from the pillar palette, not new colours. ============================================================ */ .rstage .rm[data-stage="before"].on{ background:#FFF1F2;color:#9F1239;border:1px solid #FFC9D1; box-shadow:0 1px 3px rgba(159,18,57,.12)} .rstage .rm[data-stage="after"].on{ background:#ECFDF5;color:#047857;border:1px solid #A7EFD0; box-shadow:0 1px 3px rgba(4,120,87,.14)} .rstage .rm[data-stage="before"]:hover{color:#9F1239} .rstage .rm[data-stage="after"]:hover{color:#047857} .rstage{background:#FBFCFE} /* formal score name, plain-English name beneath */ .exb-l{display:block} .exb-p{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.12em; text-transform:uppercase;font-weight:400;color:var(--slate);margin-top:3px} .ex-of{line-height:1.35;max-width:14ch;margin-inline:auto} /* the closing statement carries more weight than a heading */ .final-h{max-width:22ch;margin-inline:auto;font-size:clamp(28px,3.8vw,52px); line-height:1.14;letter-spacing:-.042em;color:var(--slate);font-weight:700} .final-em{color:var(--mineral);font-weight:800} .final-l{font-size:clamp(18px,1.9vw,23px);color:var(--mineral);font-weight:600; max-width:34ch;margin:18px auto 0} /* the maturity level sits under the number */ .ex-lvl{display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--line); font-family:var(--serif);font-weight:800;font-size:14px;letter-spacing:-.025em; color:var(--p1-deep)} .report.after .ex-lvl{color:#047857;border-top-color:#A7F3D0} .ex-tag{background:#EFF6FF;border-color:#DBE9FF;color:var(--p1-deep);font-weight:600} /* ============================================================ THRESHOLDS — the reference points that make a score mean something These are our published bands, not averages we do not have. ============================================================ */ .exb-t{overflow:visible} .exb-t i{z-index:1} .thr{position:absolute;top:-4px;bottom:-4px;width:2px;border-radius:2px;z-index:2; display:block} .thr.t61{left:61%;background:rgba(31,41,55,.26)} .thr.t81{left:81%;background:rgba(4,120,87,.42)} .ex-key{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px; margin:-8px 0 22px;padding-left:2px; font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--slate)} .ex-key span{display:inline-flex;align-items:center;gap:7px} .ex-key i{width:2px;height:12px;border-radius:2px;display:block} .ex-key .k61{background:rgba(31,41,55,.34)} .ex-key .k81{background:rgba(4,120,87,.55)} .ex-key a{margin-left:auto;font-family:var(--serif);font-size:13px;letter-spacing:-.01em; color:var(--brand);text-decoration:underline;text-underline-offset:3px} @media(max-width:600px){.ex-key a{margin-left:0;flex-basis:100%}} /* the hero card carries the index name above the pillar name */ .herocard .spd{grid-template-rows:auto auto auto;row-gap:2px} .herocard .spd-ring{grid-row:1 / span 3} .herocard .spd-d{grid-column:2;grid-row:1;align-self:end; font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--c-deep);opacity:.72;margin-bottom:3px} .herocard .spd-l{grid-row:2;align-self:center} .herocard .spd-q{grid-row:3;align-self:start} @media(max-width:520px){.herocard .spd-d{font-size:9.5px;letter-spacing:.14em}} .cg-d{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--c-deep);opacity:.72;margin:0 0 5px} /* ============================================================ H / A BADGES Who the outcome is for. The first two pillars end with a person reading an answer; the last two end with software acting. ============================================================ */ .aud{display:inline-grid;place-items:center;vertical-align:middle; width:17px;height:17px;border-radius:5px;flex:none; margin-left:7px;position:relative;top:-1px; font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:0; border:1px solid transparent;cursor:help} .aud.h{background:#EFF6FF;color:#1E40AF;border-color:#DBE9FF} .aud.a{background:#F5F0FF;color:#7E22CE;border-color:#EADCFF} .rp-tab .aud{width:15px;height:15px;font-size:9px;margin-left:6px} .exb-p .aud{width:14px;height:14px;font-size:8.5px;margin-left:5px;top:0} .herocard .spd-l .aud{width:18px;height:18px;font-size:10px;top:-2px} /* legend, so the letters are never a guess */ .aud-key{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center; margin:16px 0 0;font-size:13px;color:var(--slate)} .aud-key span{display:inline-flex;align-items:center;gap:8px} .aud-key .aud{margin-left:0} /* ============================================================ VIDEO — click-to-load facade Nothing loads from Google until the visitor presses play, so the page stays fast and no third-party cookie is set on arrival. ============================================================ */ .vid{margin:clamp(26px,3.4vw,40px) 0;padding:0;position:relative} .vid-play{display:block;width:100%;padding:0;border:1px solid var(--line); border-radius:20px;overflow:hidden;background:var(--ink);cursor:pointer; position:relative;line-height:0;box-shadow:var(--sh-card); transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease} .vid-play:hover{transform:translateY(-3px);box-shadow:var(--sh-card-hi)} .vid-thumb{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block; filter:saturate(.94)} .vid-play::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(15,23,42,.05),rgba(15,23,42,.34))} .vid-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:clamp(56px,7vw,74px);height:clamp(56px,7vw,74px);border-radius:50%; background:#fff;display:grid;place-items:center; box-shadow:0 10px 30px -8px rgba(15,23,42,.5); transition:transform .26s cubic-bezier(.2,.8,.2,1)} .vid-play:hover .vid-btn{transform:translate(-50%,-50%) scale(1.07)} .vid-btn svg{width:46%;height:46%;fill:var(--p1-deep)} .vid-k{position:absolute;left:16px;bottom:14px;z-index:2; font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:#fff;background:rgba(15,23,42,.55);border-radius:999px;padding:6px 13px; backdrop-filter:blur(6px)} .vid iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:20px;display:block; box-shadow:var(--sh-card)} .vid figcaption{margin-top:12px;font-size:14.5px;line-height:1.55;color:var(--slate)} @media(prefers-reduced-motion:reduce){.vid-play,.vid-btn{transition:none}} /* ============================================================ BLOG — hub, cards, and the animated scenes ============================================================ */ .bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} @media(max-width:820px){.bgrid{grid-template-columns:1fr}} .bcard{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit; background:#fff;border:1px solid var(--line);border-radius:24px; box-shadow:0 1px 2px rgba(31,41,55,.04),0 20px 46px -24px rgba(31,41,55,.18); transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,border-color .28s ease} .bcard:hover{transform:translateY(-5px);border-color:#CBD8EA; box-shadow:0 1px 2px rgba(31,41,55,.05),0 30px 64px -26px rgba(31,41,55,.24)} .bcard-art{display:block;height:132px;position:relative;overflow:hidden} .bcard-art::before{content:"";position:absolute;inset:0} .bcard.a1 .bcard-art{background:linear-gradient(130deg,#EFF6FF,#F5F0FF)} .bcard.a2 .bcard-art{background:linear-gradient(130deg,#F5F0FF,#FFF1F2)} .bcard.a3 .bcard-art{background:linear-gradient(130deg,#FFF1F2,#FFF7ED)} .bcard.a4 .bcard-art{background:linear-gradient(130deg,#ECFDF5,#EFF6FF)} .bcard-art::after{content:"";position:absolute;left:-30%;top:-60%;width:70%;height:220%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent); transform:skewX(-16deg);animation:bsheen 6.5s ease-in-out infinite} .bcard:nth-child(2n) .bcard-art::after{animation-delay:1.6s} .bcard:nth-child(3n) .bcard-art::after{animation-delay:3.2s} @keyframes bsheen{0%{left:-40%}55%{left:120%}100%{left:120%}} .bcard-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 20px} .bcard-d{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--slate);margin-bottom:11px} .bcard-t{font-family:var(--serif);font-weight:800;font-size:clamp(19px,1.95vw,23px); letter-spacing:-.038em;line-height:1.2;color:var(--mineral);margin-bottom:10px} .bcard-x{font-size:15.5px;line-height:1.55;color:var(--slate);margin-bottom:18px} .bcard-go{margin-top:auto;font-family:var(--serif);font-weight:700;font-size:14.5px; color:var(--p1-deep);display:inline-flex;align-items:center;gap:7px} .bcard-go .a{transition:transform .2s ease;display:inline-block} .bcard:hover .bcard-go .a{transform:translateX(5px)} .bnote{max-width:74ch;margin:clamp(30px,3.6vw,44px) auto 0;padding:20px 24px; background:#fff;border:1px solid var(--line);border-radius:18px; font-size:16px;line-height:1.6;color:var(--slate);box-shadow:var(--sh-card)} .bnote b{color:var(--mineral)} /* ---- the post header and scene ---- */ .post-head{max-width:840px} .meta-by{color:var(--p1-deep);font-weight:600} .bart-wrap{max-width:1000px;margin:0 auto clamp(30px,4vw,52px); border-radius:24px;overflow:hidden;box-shadow:var(--sh-card)} .bart{display:block;width:100%;height:auto} /* ---- shared scene parts ---- */ .ba-card{fill:#fff;stroke:rgba(31,41,55,.12);stroke-width:1.4} .ba-t{font-family:var(--mono);font-size:13px;letter-spacing:.14em;fill:var(--mineral); text-anchor:middle;text-transform:uppercase} .ba-s{font-family:var(--serif);font-size:13px;fill:#6B7B90;text-anchor:middle} .ba-n{font-family:var(--serif);font-size:14px;font-weight:700;fill:var(--mineral)} .ba-l{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.5; stroke-dasharray:7 9;animation:badash 3.4s linear infinite} .ba-l.p1{stroke:#60A5FA} .ba-l.p2{stroke:#C084FC} .ba-l.p3{stroke:#34D399} .ba-l.p4{stroke:#FB7185} @keyframes badash{to{stroke-dashoffset:-32}} .ba-node circle{fill:#fff;stroke-width:3} .ba-node.p1 circle{stroke:#60A5FA} .ba-node.p2 circle{stroke:#C084FC} .ba-node.p3 circle{stroke:#34D399} .ba-node.p4 circle{stroke:#FB7185} .ba-dot.p1{fill:#60A5FA} .ba-dot.p2{fill:#C084FC} .ba-dot.p3{fill:#34D399} .ba-dot.p4{fill:#FB7185} /* file scene */ .ba-line{fill:#CBD5E1} .ba-line.l1{animation:bafade 3.6s ease-in-out infinite} .ba-line.l2{animation:bafade 3.6s ease-in-out .3s infinite} .ba-line.l3{animation:bafade 3.6s ease-in-out .6s infinite} .ba-line.l4{animation:bafade 3.6s ease-in-out .9s infinite} .ba-line.l5{animation:bafade 3.6s ease-in-out 1.2s infinite} .ba-line.l6{animation:bafade 3.6s ease-in-out 1.5s infinite} @keyframes bafade{0%,100%{fill:#CBD5E1}45%{fill:#C084FC}} .ba-scan rect{fill:#C084FC;opacity:.55;animation:bascan 3.6s ease-in-out infinite} @keyframes bascan{0%{transform:translateY(0)}50%{transform:translateY(198px)}100%{transform:translateY(0)}} .ba-orb{fill:#C084FC;opacity:.28;animation:bafloat 5s ease-in-out infinite} .ba-orb.o2{animation-delay:.8s} .ba-orb.o3{animation-delay:1.6s} .ba-orb.o4{animation-delay:2.4s} @keyframes bafloat{0%,100%{transform:translateY(0);opacity:.22}50%{transform:translateY(-14px);opacity:.5}} /* doc scene */ .ba-blur{fill:#FB7185;opacity:.3;animation:bablur 3.2s ease-in-out infinite} .ba-blur.b2{animation-delay:.2s} .ba-blur.b3{animation-delay:.4s} .ba-blur.b4{animation-delay:.6s} @keyframes bablur{0%,100%{opacity:.18}50%{opacity:.42}} .ba-txt{fill:#34D399;opacity:.75;animation:batxt 3.2s ease-in-out infinite} .ba-txt.t2{animation-delay:.2s} .ba-txt.t3{animation-delay:.4s} .ba-txt.t4{animation-delay:.6s} @keyframes batxt{0%,100%{opacity:.55}50%{opacity:1}} .ba-no circle{fill:#FFF1F2;stroke:#FB7185;stroke-width:2} .ba-no path{stroke:#9F1239;stroke-width:2.2;stroke-linecap:round;fill:none} .ba-yes circle{fill:#ECFDF5;stroke:#34D399;stroke-width:2} .ba-yes path{stroke:#047857;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none} .ba-arrow{stroke:#94A3B8;stroke-width:2.4;stroke-linecap:round;fill:none; stroke-dasharray:6 8;animation:badash 2.6s linear infinite} /* grid scene */ .ba-bot circle{fill:#fff;stroke:#34D399;stroke-width:2.6; animation:bapulse 3s ease-in-out infinite;animation-delay:var(--d,0s)} .ba-bot .ba-n{text-anchor:middle;font-size:12px;fill:#475569} @keyframes bapulse{0%,100%{r:15}50%{r:17}} @media(prefers-reduced-motion:reduce){ .bart *,.bcard-art::after{animation:none !important} } /* external references open in a new tab and say so */ .prose a.ext{white-space:normal} .ext-i{display:inline-block;margin-left:3px;font-size:.82em;vertical-align:baseline; opacity:.62;transition:transform .18s ease,opacity .18s ease} a.ext:hover .ext-i{opacity:1;transform:translate(1px,-1px)} /* three across on the homepage, two on the blog hub */ .bgrid.home{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:1020px){.bgrid.home{grid-template-columns:1fr}} .bgrid.home .bcard-art{height:112px} .bgrid.home .bcard-body{padding:20px 22px 18px} .bgrid.home .bcard-t{font-size:clamp(18px,1.8vw,21px)} .bgrid.home .bcard-x{font-size:15px} #reading{padding-block:clamp(60px,7vw,110px)} /* ============================================================ TAKE THIS TO YOUR ASSISTANT A page about being machine-readable should be one click from a machine. ============================================================ */ .tta{margin:clamp(34px,4vw,52px) 0 0;padding:24px clamp(20px,2.6vw,28px); border-radius:22px;border:1px solid var(--line); background:linear-gradient(160deg,#FFFFFF,#FBFCFE)} .tta-hd{display:flex;align-items:flex-start;gap:14px;margin-bottom:18px} .tta-mk{display:grid;grid-template-columns:repeat(2,9px);gap:3px;flex:none;margin-top:4px} .tta-mk i{width:9px;height:9px;border-radius:3px;display:block} .tta-mk i:nth-child(1){background:var(--p1)} .tta-mk i:nth-child(2){background:var(--p2)} .tta-mk i:nth-child(3){background:var(--p3)} .tta-mk i:nth-child(4){background:var(--p4)} .tta-k{margin:0 0 5px;font-family:var(--serif);font-weight:800;font-size:17px; letter-spacing:-.03em;color:var(--mineral)} .tta-t{margin:0;font-size:15px;line-height:1.55;color:var(--slate)} .tta-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px 14px} .tta-b{font-family:var(--serif);font-weight:700;font-size:14px;letter-spacing:-.015em; padding:11px 18px;border-radius:999px;border:1px solid var(--line);background:#fff; color:var(--mineral);cursor:pointer;box-shadow:0 1px 2px rgba(31,41,55,.05); transition:border-color .18s ease,transform .18s ease} .tta-b:hover{border-color:#BFD8FF;transform:translateY(-1px)} .tta-b.go{background:var(--cite);border-color:var(--cite);color:#3F2D05} .tta-b.done{background:#ECFDF5;border-color:#A7EFD0;color:#047857} .tta-l{font-size:13.5px;color:var(--slate);text-decoration:underline; text-underline-offset:4px;text-decoration-color:var(--line);white-space:nowrap} .tta-l:hover{color:var(--p1-deep);text-decoration-color:currentColor} .tta-note{margin:14px 0 0;font-size:13px;color:var(--slate);opacity:.9} /* ============================================================ ROLE SELECTOR — the four pillars matter differently by business type ============================================================ */ .roles{max-width:900px;margin-inline:auto;background:#fff;border:1px solid var(--line); border-radius:26px;overflow:hidden;box-shadow:var(--sh-card)} .role-tabs{display:flex;flex-wrap:wrap;gap:2px;padding:8px;background:#FBFCFE; border-bottom:1px solid var(--line)} .role-t{flex:1 1 auto;font-family:var(--serif);font-weight:600;font-size:14.5px; letter-spacing:-.02em;padding:12px 16px;border-radius:12px;border:1px solid transparent; background:transparent;color:var(--slate);cursor:pointer;box-shadow:none;white-space:nowrap; transition:background .16s ease,color .16s ease} .role-t:hover{color:var(--mineral)} .role-t.on{background:#fff;border-color:var(--line);color:var(--mineral);font-weight:700; box-shadow:0 1px 3px rgba(31,41,55,.09)} .role-p{display:none;padding:clamp(24px,3vw,34px)} .role-p.on{display:block} .role-lead{margin:0 0 14px;font-family:var(--serif);font-weight:700; font-size:clamp(18px,1.9vw,22px);letter-spacing:-.03em;line-height:1.35;color:var(--mineral)} .role-focus{margin:0 0 22px;padding:13px 16px;border-radius:13px;background:var(--ink); border:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--slate)} .role-focus b{color:var(--mineral)} .role-focus span{font-weight:700;color:var(--c-deep)} .role-steps{margin:0;padding-left:22px;font-size:16px;line-height:1.6;color:var(--slate)} .role-steps li{margin-bottom:11px} .role-steps li:last-child{margin-bottom:0} .role-steps a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} @media(max-width:700px){ .role-t{flex:1 1 100%;text-align:left} } /* ============================================================ ASSISTANTS TABLE ============================================================ */ .atable{background:#fff;border:1px solid var(--line);border-radius:22px;overflow:hidden; box-shadow:var(--sh-card)} .at-hd,.at-row{display:grid;grid-template-columns:1.1fr .9fr .7fr 1.6fr;gap:16px; padding:16px clamp(18px,2.4vw,26px);align-items:center} .at-hd{background:#FBFCFE;border-bottom:1px solid var(--line); font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--slate)} .at-row{border-bottom:1px solid var(--line);text-decoration:none;color:var(--slate); font-size:15px;line-height:1.45;transition:background .16s ease} .at-row:last-child{border-bottom:0} .at-row:hover{background:#FBFDFF} .at-n{font-family:var(--serif);font-weight:800;font-size:16.5px;letter-spacing:-.03em; color:var(--mineral)} .at-row code{font-family:var(--mono);font-size:12.5px;background:var(--ink); border:1px solid var(--line);border-radius:6px;padding:3px 8px;color:var(--p1-deep)} @media(max-width:820px){ .at-hd{display:none} .at-row{grid-template-columns:1fr;gap:7px;padding:18px} .at-row span:nth-child(3)::before{content:"Grounded in ";color:#9AA6B6} .at-row span:nth-child(4)::before{content:"Lever: ";color:#9AA6B6} } .anote{max-width:74ch;margin:clamp(30px,3.6vw,44px) auto 0;padding:24px 26px; background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-card)} .anote h2{font-family:var(--serif);font-weight:800;font-size:clamp(20px,2.1vw,25px); letter-spacing:-.035em;margin:0 0 14px;color:var(--mineral)} .anote p{margin:0 0 13px;font-size:16px;line-height:1.6;color:var(--slate)} .anote p:last-child{margin:0} .anote b{color:var(--mineral)} .anote a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} /* ============================================================ EXECUTIVE PANE — tighten the vertical rhythm The stage carried a 300px floor and the pane had generous gaps at every level, which stacked into a lot of dead space on wide screens. ============================================================ */ .rp-stage{min-height:0} .report-body.exec{padding:clamp(22px,2.4vw,30px) clamp(18px,2.4vw,30px)} .ex-top{padding-bottom:18px;margin-bottom:18px;gap:clamp(18px,2.4vw,34px)} .ex-verdict{font-size:clamp(21px,2.3vw,29px);margin-bottom:9px} .ex-line{font-size:16px;line-height:1.5;max-width:54ch} .ex-score{padding:12px 18px;min-width:104px} .ex-n{font-size:clamp(36px,4vw,50px)} .ex-bars{gap:11px;margin-bottom:16px} .exb{grid-template-columns:minmax(112px,158px) 1fr 40px;gap:12px} .exb-l{font-size:15px} .exb-p{font-size:9.5px;margin-top:2px} .ex-key{margin:0 0 18px;padding-left:2px} .ex-acts{padding:17px 19px} .ex-h{font-size:16px;margin-bottom:11px} .ex-acts ol{font-size:15px;line-height:1.5;margin-bottom:11px} .ex-acts li{margin-bottom:9px} .ex-foot{padding-top:11px;font-size:13.5px} @media(max-width:760px){ .report-body.exec{padding:20px 16px} .ex-top{margin-bottom:16px;padding-bottom:16px} } /* ============================================================ PAGE ART — animated SVG scenes Vector, weightless, and the labels are real text, so the graphics are readable by the same machines the site is about. ============================================================ */ .part-wrap{max-width:900px;margin:0 auto clamp(28px,3.4vw,44px); padding-inline:var(--pad);} .part{display:block;width:100%;height:auto;overflow:visible; border-radius:22px;box-shadow:0 1px 2px rgba(31,41,55,.04), 0 22px 50px -26px rgba(31,41,55,.22)} .pa-bg{fill:var(--c-soft,#F4F8FF)} .pa-card{fill:#fff;stroke:rgba(31,41,55,.10);stroke-width:1.3} .pa-k{font-family:var(--mono);font-size:11px;letter-spacing:.16em; fill:var(--c-deep,#1E40AF);text-anchor:middle} .pa-s{font-family:var(--serif);font-size:12.5px;fill:#6B7B90;text-anchor:middle} .pa-n{font-family:var(--serif);font-size:13px;font-weight:700;fill:var(--mineral); text-anchor:middle} .pa-tx{fill:#D7DEE8} .pa-tx.ok{fill:#A7EFD0} .pa-p{font-family:var(--mono);font-size:11.5px;fill:var(--c-deep,#1E40AF)} .pa-v{font-family:var(--mono);font-size:11.5px;fill:#5A6675} .pa-kv{opacity:0;animation:pafade 4s ease-in-out infinite} .pa-kv:nth-of-type(2){animation-delay:.35s} .pa-kv:nth-of-type(3){animation-delay:.7s} .pa-kv:nth-of-type(4){animation-delay:1.05s} @keyframes pafade{0%,72%,100%{opacity:.25}18%,60%{opacity:1}} .pa-arrow{stroke:#9AA6B6;stroke-width:2.4;stroke-linecap:round;fill:none; stroke-dasharray:7 9;animation:padash 2.8s linear infinite} @keyframes padash{to{stroke-dashoffset:-32}} .pa-l{fill:none;stroke:var(--c,#60A5FA);stroke-width:2.2;stroke-linecap:round; opacity:.45;stroke-dasharray:7 9;animation:padash 3.4s linear infinite} .pa-dot{fill:var(--c,#60A5FA)} .pa-dest circle,.pa-src circle{fill:#fff;stroke:var(--c,#60A5FA);stroke-width:3} .pa-bot circle{fill:#fff;stroke:var(--c,#60A5FA);stroke-width:2.6; animation:papulse 3s ease-in-out infinite;animation-delay:var(--d,0s)} @keyframes papulse{0%,100%{r:17}50%{r:19}} .pa-tick{fill:#ECFDF5;stroke:#34D399;stroke-width:2} .pa-tickm{stroke:#047857;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none} .pa-bub.q{fill:#fff;stroke:rgba(31,41,55,.10);stroke-width:1.3} .pa-q{font-family:var(--serif);font-size:15px;fill:var(--mineral)} .pa-hl{fill:#FFE9AE} .pa-name{font-family:var(--serif);font-size:12px;font-weight:700;fill:#3F2D05} .pa-cite circle{fill:var(--c,#60A5FA)} .pa-blur{fill:#FB7185;opacity:.28;animation:pablur 3.2s ease-in-out infinite} .pa-blur:nth-of-type(3){animation-delay:.2s} .pa-blur:nth-of-type(4){animation-delay:.4s} @keyframes pablur{0%,100%{opacity:.18}50%{opacity:.4}} .pa-no circle{fill:#FFF1F2;stroke:#FB7185;stroke-width:2} .pa-no path{stroke:#9F1239;stroke-width:2.2;stroke-linecap:round;fill:none} .pa-yes circle{fill:#ECFDF5;stroke:#34D399;stroke-width:2} .pa-yes path{stroke:#047857;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none} .pa-layer rect{fill:#fff;stroke:rgba(31,41,55,.10);stroke-width:1.3; animation:parise 4.4s ease-in-out infinite;animation-delay:calc(var(--i)*.28s)} .pa-layer.top rect{fill:var(--c-soft,#EFF6FF);stroke:var(--c,#60A5FA);stroke-width:2} @keyframes parise{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .pa-thr{stroke:rgba(31,41,55,.22);stroke-width:2;stroke-dasharray:5 6} .pa-thr.low{stroke:rgba(31,41,55,.16)} .pa-bar rect{fill:var(--c,#60A5FA);opacity:.85; transform-origin:center bottom;animation:pagrow 4s ease-in-out infinite} .pa-bar.b1 rect{fill:#60A5FA} .pa-bar.b2 rect{fill:#C084FC} .pa-bar.b3 rect{fill:#34D399} .pa-bar.b4 rect{fill:#FB7185} .pa-bar.b2 rect{animation-delay:.3s} .pa-bar.b3 rect{animation-delay:.6s} .pa-bar.b4 rect{animation-delay:.9s} @keyframes pagrow{0%,100%{transform:scaleY(.86)}50%{transform:scaleY(1)}} .pa-ring circle{fill:none;stroke:var(--c,#60A5FA);stroke-width:1.6;opacity:.18; animation:paring 5s ease-in-out infinite} .pa-ring.d2 circle{animation-delay:1.2s} @keyframes paring{0%,100%{opacity:.1}50%{opacity:.28}} @media(prefers-reduced-motion:reduce){.part *{animation:none !important}} @media(max-width:600px){.part-wrap{padding-inline:16px}} /* ============================================================ SHARE — plain links, no third-party scripts A share widget that loads a network's SDK is that network's tracker on every page of your site. These are ordinary hrefs. ============================================================ */ .share{display:flex;align-items:center;gap:9px;flex-wrap:wrap; margin:clamp(30px,3.6vw,44px) 0 0;padding-top:22px;border-top:1px solid var(--line)} .sh-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate);margin-right:5px} .sh-b{display:inline-grid;place-items:center;width:40px;height:40px;flex:none; border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer; color:var(--slate);box-shadow:0 1px 2px rgba(31,41,55,.05);padding:0; transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .18s ease,color .18s ease} .sh-b:hover{transform:translateY(-2px);border-color:#BFD8FF;color:var(--p1-deep)} .sh-b svg{width:18px;height:18px;fill:currentColor} .sh-b.copy svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round} .sh-b.done{background:#ECFDF5;border-color:#A7EFD0;color:#047857} @media(max-width:520px){.sh-b{width:38px;height:38px}} /* ============================================================ NOT SURE — a third answer on the self-reported questions Scores as a fail, because you cannot claim a pass you have not checked. Reported separately, because "no" means fix it and "not sure" means go and look. ============================================================ */ .yn{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .yn button.unsure{font-size:10px;letter-spacing:.1em;padding:9px 12px; color:var(--slate);border-color:var(--line)} .yn button.unsure[aria-pressed="true"]{background:#FFF7ED;border-color:#FFD9A8; color:#9A3412} #results .p.unsure{background:#FFF7ED;border:1px solid #FFD9A8;color:#9A3412} #results li em{opacity:.72;font-style:normal;font-size:13px} @media(max-width:620px){ #questions li{flex-wrap:wrap;gap:10px} .yn{width:100%;justify-content:flex-start} } /* ============================================================ FOOTER BASE — it was 12.5px at 5.2:1 on navy, which reads as grey mush at small sizes even though it technically passes. ============================================================ */ .foot-base{font-size:14px;line-height:1.6;color:#D6E3F2; border-top:1px solid rgba(214,227,242,.28);gap:12px 30px} .foot-base a{color:#FFFFFF;text-decoration:underline; text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.42); border-bottom:0} .foot-base a:hover{text-decoration-color:#fff} @media(max-width:700px){ .foot-base{font-size:13.5px;gap:10px 20px} .foot-base span:last-child{margin-left:0} } /* ============================================================ FRESHNESS — this is a snapshot, and here is where the truth lives ============================================================ */ .fresh{max-width:76ch;margin:0 0 clamp(24px,3vw,34px);padding:15px 18px; border-radius:14px;background:#FFFBF2;border:1px solid #F0DFB8; font-size:14.5px;line-height:1.6;color:#7A5A15} .fresh b{color:#5C4310} .fresh a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} .phead .meta{margin-top:18px} /* ============================================================ BLOG CARD ART — a scene per post, not a gradient Roughly equal weight with the text, particle fields in the pillar colours, and small independent movements so nothing reads as a loop. ============================================================ */ .bcard-art{position:relative;display:block;overflow:hidden; height:clamp(210px,26vw,268px);isolation:isolate} .bgrid.home .bcard-art{height:clamp(190px,22vw,232px)} .bcard.a1 .bcard-art{background:radial-gradient(120% 100% at 30% 15%,#FFF1F2,#FFF7ED 55%,#FFFFFF)} .bcard.a2 .bcard-art{background:radial-gradient(120% 100% at 70% 12%,#F5F0FF,#EFF6FF 58%,#FFFFFF)} .bcard.a3 .bcard-art{background:radial-gradient(120% 100% at 40% 18%,#FFF1F2,#FFFBEB 55%,#FFFFFF)} .bcard.a4 .bcard-art{background:radial-gradient(120% 100% at 60% 15%,#ECFDF5,#EFF6FF 58%,#FFFFFF)} .cart{position:absolute;inset:0;width:100%;height:100%;display:block} /* the particle field — each dot drifts on its own delay */ .cp circle{animation:cdrift 7s ease-in-out infinite;animation-delay:var(--d,0s); transform-box:fill-box;transform-origin:center} @keyframes cdrift{ 0%,100%{transform:translate(0,0);opacity:.5} 50%{transform:translate(0,-9px);opacity:1} } /* the cards inside the scene float independently */ .cfloat{animation:cbob 6.5s ease-in-out infinite} .cfloat.d1{animation-delay:1.4s} .cfloat.d2{animation-delay:2.8s} @keyframes cbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} .cc{fill:#fff;stroke:rgba(31,41,55,.09);stroke-width:1.2; filter:drop-shadow(0 8px 18px rgba(31,41,55,.13))} .cfile{font-family:var(--mono);font-size:12px;letter-spacing:.12em; fill:var(--p2-deep);text-anchor:middle} .cfile.rose{fill:#9F1239} .cfile.mint{fill:#047857} .cprice{font-family:var(--serif);font-size:17px;font-weight:800;letter-spacing:-.04em; fill:var(--mineral)} .cbuy{fill:#F6B534;filter:drop-shadow(0 8px 18px rgba(246,181,52,.45))} .cbuyt{font-family:var(--serif);font-size:13px;font-weight:700;fill:#3F2D05;text-anchor:middle} .cscan{fill:var(--p2);opacity:.5;animation:cscan 4.2s ease-in-out infinite} @keyframes cscan{0%{transform:translateY(0)}50%{transform:translateY(162px)}100%{transform:translateY(0)}} .cnode{fill:#fff;stroke-width:3} .cnode.lav{stroke:var(--p2)} .cnode.blue{stroke:var(--p1)} .cblur{fill:#FB7185;opacity:.3;animation:cblur 3.4s ease-in-out infinite} @keyframes cblur{0%,100%{opacity:.2}50%{opacity:.45}} .cok{fill:#34D399;opacity:.8;animation:cok 3.4s ease-in-out infinite} @keyframes cok{0%,100%{opacity:.6}50%{opacity:1}} .cx{fill:#FFF1F2;stroke:#FB7185;stroke-width:2} .ctick{fill:#ECFDF5;stroke:#34D399;stroke-width:2} .cring{fill:none;stroke:var(--p3);stroke-width:1.4;opacity:.3; stroke-dasharray:5 8;animation:cspin 26s linear infinite;transform-origin:200px 130px} .corbit.slow .cring{animation-duration:40s;animation-direction:reverse;stroke:var(--p1)} @keyframes cspin{to{transform:rotate(360deg)}} .cbot circle{fill:#fff;stroke:var(--p3);stroke-width:2.6; animation:cpulse 3.4s ease-in-out infinite;animation-delay:var(--d,0s)} @keyframes cpulse{0%,100%{opacity:.6}50%{opacity:1}} /* the sheen sweeps over the top of the scene */ .bcard-art::after{content:"";position:absolute;left:-40%;top:-60%;width:60%;height:220%; z-index:2;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-16deg);animation:bsheen 7.5s ease-in-out infinite} .bcard:hover .cfloat{animation-duration:3.4s} @media(prefers-reduced-motion:reduce){ .cart *,.bcard-art::after{animation:none !important} } /* 150 dots a card is fine on a desktop and too much for a phone — thin the field rather than dropping the effect */ @media(max-width:820px){ .cp circle:nth-child(2n){display:none} } @media(max-width:520px){ .cp circle:nth-child(2n),.cp circle:nth-child(3n){display:none} .bcard-art{height:clamp(170px,44vw,210px)} } /* ============================================================ PAGE HERO BANNER The same generosity as the blog cards, composed differently — wide rather than tall, with the scene centred and the field behind it. ============================================================ */ .part-wrap{max-width:1080px;margin:0 auto clamp(30px,3.6vw,48px)} .part{border-radius:26px;overflow:hidden; box-shadow:0 1px 2px rgba(31,41,55,.04), 0 26px 60px -28px rgba(31,41,55,.24)} .part .pa-bg{fill:#FCFDFF} /* the field drifts behind everything */ .hp circle{animation:hdrift 8s ease-in-out infinite;animation-delay:var(--d,0s); transform-box:fill-box;transform-origin:center;opacity:.55} @keyframes hdrift{ 0%,100%{transform:translate(0,0);opacity:.4} 50%{transform:translate(0,-11px);opacity:.9} } /* the original composition, centred in the wider banner and breathing */ .hstage{transform:translate(120px,40px);animation:hbob 9s ease-in-out infinite} @keyframes hbob{0%,100%{transform:translate(120px,40px)}50%{transform:translate(120px,32px)}} /* a soft wash of the page colour behind the scene */ .part-wrap{position:relative} .part-wrap::after{content:"";position:absolute;inset:0;pointer-events:none; border-radius:26px;z-index:2; background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.42) 46%,transparent 62%); background-size:260% 100%;animation:hsheen 9s ease-in-out infinite} @keyframes hsheen{0%{background-position:140% 0}55%{background-position:-40% 0}100%{background-position:-40% 0}} @media(max-width:820px){ .hstage{transform:translate(120px,40px) scale(.92);transform-origin:center} .hp circle:nth-child(2n){display:none} } @media(max-width:520px){ .hp circle:nth-child(2n),.hp circle:nth-child(3n){display:none} .part-wrap{margin-bottom:26px} } @media(prefers-reduced-motion:reduce){ .part *,.part-wrap::after{animation:none !important} } /* ============================================================ PLATFORM DETECTION — every fix lives somewhere different ============================================================ */ .platform{display:flex;align-items:center;gap:12px;flex-wrap:wrap; margin:0 0 20px;padding:14px 18px;border-radius:14px; background:var(--p1-soft);border:1px solid #DBE9FF} .platform[hidden]{display:none} .pf-k{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate)} .pf-n{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:-.035em; color:var(--p1-deep)} .pf-n.muted{color:var(--slate);font-weight:700} .pf-l{margin-left:auto;font-family:var(--serif);font-weight:700;font-size:14.5px; color:var(--brand);text-decoration:underline;text-underline-offset:3px} .pf-x{flex:1 1 100%;font-size:14px;line-height:1.55;color:var(--slate)} .pf-x a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} @media(max-width:620px){.pf-l{margin-left:0;flex:1 1 100%}} /* ============================================================ HERO — one headline, one sentence, one action Fewer elements, more space between them. The eye should land on the question, the sentence, then the field, and nowhere else. ============================================================ */ .hero{padding-block:clamp(56px,8vw,124px) clamp(64px,9vw,136px)} .hero-grid{gap:clamp(36px,5.4vw,88px);align-items:center} .hero .eyebrow{margin-bottom:22px} .h1-long{margin-bottom:26px;max-width:14ch} .hero .lede-tight{max-width:34ch;margin-bottom:clamp(28px,3.4vw,40px); font-size:clamp(19px,1.95vw,25px);font-weight:600;line-height:1.38; letter-spacing:-.028em;color:var(--slate)} .hero .urlstart{max-width:560px} .hero .u-lab{margin-bottom:12px} .hero .u-note{margin-top:14px;font-size:14.5px} .hero .u-alt{margin-top:9px} .hero .u-alt a{font-size:14.5px;color:var(--slate); text-decoration:underline;text-underline-offset:4px; text-decoration-color:var(--line)} .hero .u-alt a:hover{color:var(--p1-deep);text-decoration-color:currentColor} /* the urgency line now sits with the live monitor, where it is evidence rather than an assertion */ #monitor .urgent{margin:18px 0 0;max-width:62ch} @media(max-width:1000px){ .hero .lede-tight{max-width:40ch} .h1-long{max-width:16ch} } /* ============================================================ TREE HERO The input is the source node. Everything the site measures flows out of the one thing the visitor has to give us. ============================================================ */ .hero-tree{padding-block:clamp(48px,6.5vw,96px) clamp(52px,7vw,104px);text-align:center} .hero-tree .wrap{position:relative;z-index:2} .ht-eyebrow{margin-bottom:20px} .h1-tree{font-size:clamp(31px,4.6vw,60px);line-height:1.06;letter-spacing:-.042em; max-width:18ch;margin:0 auto 22px} .ht-lede{max-width:52ch;margin:0 auto clamp(32px,4vw,48px); font-size:clamp(17px,1.7vw,21px);line-height:1.5;color:var(--slate)} .htree{max-width:1140px;margin-inline:auto} /* the source node */ .htree-src{max-width:640px;margin-inline:auto;padding:22px 24px 18px; background:#fff;border:1px solid var(--line);border-radius:22px; box-shadow:0 2px 6px rgba(31,41,55,.05),0 26px 56px -28px rgba(31,41,55,.3); position:relative;z-index:3} .hts-k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate);margin-bottom:12px;text-align:left} .hts-row{display:flex;gap:10px;align-items:center} .hts-in{flex:1 1 auto;min-width:0;font-family:var(--serif);font-size:18px; padding:16px 20px;border-radius:999px;border:1px solid var(--mineral-2); background:var(--ink);color:var(--mineral);transition:border-color .18s ease,background .18s ease} .hts-in:focus{outline:0;border-color:var(--p1);background:#fff; box-shadow:0 0 0 4px rgba(96,165,250,.16)} .hts-go{flex:none;padding:16px 24px;font-size:15px} .hts-note{margin:12px 0 0;font-size:13.5px;color:var(--slate);text-align:left} @media(max-width:600px){ .hts-row{flex-direction:column;align-items:stretch} .hts-go{justify-content:center} } /* the wires */ .htree-wire{display:block;width:100%;height:clamp(72px,9vw,128px);margin-top:-6px; overflow:visible} .htw{fill:none;stroke-width:2;stroke-linecap:round;opacity:.55; vector-effect:non-scaling-stroke} .htw.stem{stroke:#94A3B8} .htw.w1{stroke:var(--p1)} .htw.w2{stroke:var(--p2)} .htw.w3{stroke:var(--p3)} .htw.w4{stroke:var(--p4)} .htw-hub{fill:#475569} .htw-spark.w1{fill:var(--p1)} .htw-spark.w2{fill:var(--p2)} .htw-spark.w3{fill:var(--p3)} .htw-spark.w4{fill:var(--p4)} /* the four destinations */ .htree-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(12px,1.4vw,20px)} .htc{display:flex;flex-direction:column;align-items:center;text-align:center; padding:24px 18px 22px;border-radius:20px;text-decoration:none; background:var(--c-soft);border:1px solid var(--line); transition:transform .26s cubic-bezier(.2,.8,.2,1),box-shadow .26s ease,border-color .26s ease} .htc:hover{transform:translateY(-5px);border-color:var(--c); box-shadow:0 20px 44px -22px rgba(31,41,55,.34)} .htc-ring{width:38px;height:38px;border-radius:50%;flex:none;margin-bottom:14px; border:4px solid var(--c);background:transparent; transition:transform .26s cubic-bezier(.2,.8,.2,1)} .htc:hover .htc-ring{transform:scale(1.12)} .htc-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase; color:var(--c-deep);opacity:.85;margin-bottom:7px} .htc-n{font-family:var(--serif);font-weight:800;font-size:clamp(17px,1.75vw,21px); letter-spacing:-.035em;color:var(--c-deep);margin-bottom:8px} .htc-q{font-size:13.5px;line-height:1.45;color:var(--slate)} .htree-alt{margin:clamp(24px,3vw,34px) 0 0} .htree-alt a{font-size:15px;color:var(--slate);text-decoration:underline; text-underline-offset:4px;text-decoration-color:var(--line)} .htree-alt a:hover{color:var(--p1-deep);text-decoration-color:currentColor} @media(max-width:900px){ .htree-row{grid-template-columns:repeat(2,minmax(0,1fr))} .htree-wire{display:none} .htree-row{margin-top:clamp(24px,4vw,34px)} } @media(max-width:520px){ .htree-row{grid-template-columns:1fr} .htc{flex-direction:row;align-items:center;text-align:left;gap:14px;padding:16px 18px} .htc-ring{width:30px;height:30px;border-width:3px;margin-bottom:0} .htc-q{display:none} } @media(prefers-reduced-motion:reduce){.htree-wire *{animation:none !important}} /* the works strip regained its section wrapper */ .works{padding-block:clamp(30px,3.6vw,46px);border-top:1px solid var(--line); background:#fff} .wl-k{text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate);margin:0 0 20px} /* ============================================================ CONTENTS RAIL — sticky on long articles Only rendered when a page has four or more sections, so short pages are not given furniture they do not need. ============================================================ */ .withtoc{display:grid;grid-template-columns:minmax(0,1fr) 236px; gap:clamp(28px,4vw,60px);align-items:start;max-width:1080px;margin-inline:auto} .withtoc > .prose{max-width:var(--readw);margin:0} .toc{order:2;position:sticky;top:104px;align-self:start} .toc nav{padding:18px 18px 16px;border-radius:18px;background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(31,41,55,.04),0 18px 40px -24px rgba(31,41,55,.24)} .toc-k{margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate)} .toc a{display:block;padding:7px 0 7px 13px;margin-left:-1px; border-left:2px solid var(--line); font-size:14px;line-height:1.4;color:var(--slate);text-decoration:none; transition:color .18s ease,border-color .18s ease} .toc a:hover{color:var(--mineral);border-left-color:#C3D4E8} .toc a.on{color:var(--p1-deep);border-left-color:var(--p1);font-weight:700} /* the rail is a desktop affordance — below this it would just push the article down the page */ @media(max-width:1080px){ .withtoc{grid-template-columns:1fr} .toc{display:none} } /* the free option sits under the buy button, quietly */ .buy-alt{margin:14px 0 0;text-align:center} .buy-alt a{font-size:14.5px;color:var(--slate);text-decoration:underline; text-underline-offset:4px;text-decoration-color:var(--line)} .buy-alt a:hover{color:var(--p1-deep);text-decoration-color:currentColor} /* the eyebrow is a flex row (dash + label), so text-align does not centre it */ .hero-tree .eyebrow,.ht-eyebrow{justify-content:center;margin-bottom:20px} /* ============================================================ AND WHAT WE ARE NOT Sits under the "what do I get" card. Naming the tools that do the thing we do not is what makes the rest of the page believable. ============================================================ */ .notus{max-width:820px;margin:clamp(26px,3.2vw,40px) auto 0;padding:clamp(26px,3vw,36px); border-radius:24px;background:var(--ink);border:1px dashed #C7D4E4;text-align:center} .notus-q{margin:0 0 12px;font-family:var(--serif);font-weight:800; font-size:clamp(21px,2.4vw,29px);letter-spacing:-.04em;color:var(--mineral)} .notus-l{max-width:62ch;margin:0 auto clamp(22px,2.6vw,30px); font-size:16.5px;line-height:1.6;color:var(--slate)} .notus-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; text-align:left} @media(max-width:820px){.notus-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:480px){.notus-grid{grid-template-columns:1fr}} .nu{display:flex;flex-direction:column;gap:5px;padding:15px 16px;border-radius:14px; background:#fff;border:1px solid var(--line);text-decoration:none; transition:transform .22s cubic-bezier(.2,.8,.2,1),border-color .22s ease} .nu:hover{transform:translateY(-3px);border-color:#BFD8FF} .nu b{font-family:var(--serif);font-weight:800;font-size:15px;letter-spacing:-.03em; color:var(--mineral)} .nu span{font-size:13px;line-height:1.4;color:var(--slate)} .notus-x{max-width:70ch;margin:clamp(22px,2.6vw,30px) auto 0; font-size:15px;line-height:1.6;color:var(--slate)} .notus-x b{color:var(--mineral)} .notus-x a{display:inline-block;margin-left:6px;color:var(--brand); text-decoration:underline;text-underline-offset:3px;white-space:nowrap} /* ============================================================ PAGE ART, INLINE The illustration now sits in the reading column beside the idea it illustrates, rather than banner-width above the article. That means it aligns with the prose rather than fighting it, and the reader meets it with some context already. ============================================================ */ .prose .part-wrap{max-width:100%;margin:clamp(26px,3.2vw,38px) 0;padding-inline:0} .prose .part{border-radius:18px; box-shadow:0 1px 2px rgba(31,41,55,.04),0 16px 38px -24px rgba(31,41,55,.2)} /* the composition was drawn for a wide banner — pull it in a little now that the column is narrower */ .prose .hstage{transform:translate(100px,44px) scale(.96); animation:hbob-in 9s ease-in-out infinite} @keyframes hbob-in{ 0%,100%{transform:translate(100px,44px) scale(.96)} 50%{transform:translate(100px,36px) scale(.96)} } .prose .hp circle:nth-child(3n){display:none} /* hubs: content width, left aligned with everything else */ .wrap > .part-wrap{max-width:100%;padding-inline:0; margin-bottom:clamp(26px,3.2vw,40px)} @media(max-width:600px){ .prose .hstage{transform:translate(100px,44px) scale(.88)} } /* ============================================================ PROMO BANNER Above the nav, not sticky — it does its job once and gets out of the way. The free check is the right thing to put here: it is the cheapest promise on the site and the one most likely to be taken up. ============================================================ */ .promo{position:relative;background:linear-gradient(100deg,#EFF6FF,#F5F0FF 34%,#ECFDF5 68%,#FFF1F2); border-bottom:1px solid rgba(31,41,55,.08)} .promo[hidden]{display:none} .promo::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px; background:linear-gradient(90deg,var(--p1),var(--p2) 34%,var(--p3) 67%,var(--p4))} .promo-in{display:flex;align-items:center;justify-content:center;gap:14px; min-height:44px;padding-block:9px;flex-wrap:wrap;text-align:center} .promo-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:#0B5F44;background:#D8F7E9;border:1px solid #A7EFD0;border-radius:999px; padding:4px 10px;flex:none} .promo-t{font-size:14.5px;line-height:1.4;color:var(--slate)} .promo-t b{color:var(--mineral);font-weight:700} .promo-x{color:var(--slate);opacity:.9} .promo-a{font-family:var(--serif);font-weight:700;font-size:14px;color:var(--brand); text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px; border-bottom:1px solid rgba(35,71,117,.32);padding-bottom:1px} .promo-a:hover{border-bottom-color:currentColor} .promo-a .arw{transition:transform .2s ease} .promo-a:hover .arw{transform:translateX(3px)} .promo-close{position:absolute;right:10px;top:50%;transform:translateY(-50%); width:28px;height:28px;border-radius:8px;border:0;background:transparent;cursor:pointer; font-size:19px;line-height:1;color:var(--slate);opacity:.6} .promo-close:hover{opacity:1;background:rgba(31,41,55,.06)} @media(max-width:820px){ .promo-x{display:none} .promo-in{gap:10px;padding-inline:34px} } @media(max-width:520px){ .promo-k{display:none} .promo-t{font-size:13.5px} .promo-a{font-size:13.5px} } /* ============================================================ THE OFFER — free beside paid, stated once The price appeared in seven places on the homepage and the offer was never stated in one. This is that one place. ============================================================ */ .offer{max-width:940px;margin-inline:auto;text-align:center} .offer-q{font-family:var(--serif);font-weight:800;font-size:clamp(26px,3.4vw,42px); letter-spacing:-.042em;margin:0 0 10px;color:var(--mineral)} .offer-l{font-size:clamp(16px,1.7vw,19px);color:var(--slate);margin:0 0 clamp(28px,3.4vw,40px)} .offer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;text-align:left} @media(max-width:780px){.offer-grid{grid-template-columns:1fr}} .oc{display:flex;flex-direction:column;padding:clamp(24px,2.8vw,32px);border-radius:24px; background:#fff;border:1px solid var(--line);box-shadow:var(--sh-card)} .oc-paid{border-color:#F0D69A;background:linear-gradient(170deg,#FFFDF8,#FFFFFF); box-shadow:0 2px 6px rgba(31,41,55,.05),0 26px 56px -30px rgba(246,181,52,.5)} .oc-k{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--slate);margin:0 0 12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap} .oc-flag{background:var(--cite);color:#3F2D05;border-radius:99px;padding:3px 9px; font-size:9px;letter-spacing:.14em} .oc-p{font-family:var(--serif);font-weight:800;font-size:clamp(30px,3.6vw,40px); letter-spacing:-.045em;margin:0 0 20px;color:var(--mineral)} .oc-p span{display:block;font-size:13.5px;font-weight:500;letter-spacing:-.01em; color:var(--slate);margin-top:5px} .oc-l{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:11px;flex:1} .oc-l li{position:relative;padding-left:27px;font-size:15.5px;line-height:1.5;color:var(--slate)} .oc-l li b{color:var(--mineral)} .oc-l li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px; border-radius:50%;background:var(--p3-soft);border:1px solid #A7EFD0} .oc-l li::after{content:"";position:absolute;left:5px;top:10px;width:4px;height:7px; border:solid var(--p3-deep);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)} .oc-b{width:100%;justify-content:center} .oc-n{margin:13px 0 0;font-size:13px;line-height:1.5;color:var(--slate)} /* the hero button now carries the price, so it needs a little more room before the input starts to suffer */ .hts-go{padding:16px 20px;font-size:14.5px;letter-spacing:-.02em} .hts-in{min-width:0} @media(max-width:900px){ .hts-row{flex-direction:column;align-items:stretch} .hts-go{justify-content:center} } /* the sticky bar is tighter still — drop the price there below 1180px, the supporting line already carries it */ @media(max-width:1180px){ #stickyGo .price{display:none} } /* ============================================================ EXECUTIVE PANE — one column, not two .report-body is a two-column grid built for the pillar tabs, where a dial sits beside a list. The executive summary has no dial, so the left track collapsed to the width of the verdict and left a large dead column beneath it. ============================================================ */ .report-body.exec{display:block} .exec .ex-top{display:flex;gap:clamp(20px,3vw,40px);align-items:flex-start; justify-content:space-between} .exec .ex-top > div:first-child{flex:1 1 auto;min-width:0} .exec .ex-score{flex:none} .exec .ex-bars{max-width:100%} .exec .ex-acts{margin-top:4px} @media(max-width:760px){ .exec .ex-top{flex-direction:column;gap:18px} .exec .ex-score{align-self:flex-start} } /* the address we are actually going to crawl, confirmed as they type */ .u-note.ok,.hts-note.ok,.sticky-note.ok{color:var(--p3-deep)} .u-note.err,.hts-note.err,.sticky-note.err{color:var(--p4-deep)} /* one-off, said where the money is */ .hts-oneoff{margin:8px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--p3-deep);text-align:left} .buy-oneoff{margin:12px 0 0;padding:11px 14px;border-radius:12px; background:var(--p3-soft);border:1px solid #CDF3E3; font-size:13.5px;line-height:1.5;color:#0B5F44;text-align:center} /* ============================================================ BULK REDEMPTION — one website per line, validated as they type An agency with 50 sites will paste a list, and some of those lines will be wrong. Catching a typo here costs nothing; catching it after the crawl costs a credit and an apology. ============================================================ */ .bulk{background:#fff;border:1px solid var(--line);border-radius:22px; padding:clamp(22px,2.6vw,30px);margin:clamp(26px,3vw,36px) 0;box-shadow:var(--sh-card)} .bulk-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:18px; margin-bottom:20px;flex-wrap:wrap} .bulk-k{margin:0 0 4px;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate)} .bulk-t{margin:0;font-family:var(--serif);font-weight:800;font-size:20px;letter-spacing:-.035em} .bulk-count{text-align:right;flex:none} .bc-n{display:block;font-family:var(--serif);font-weight:800;font-size:34px; letter-spacing:-.045em;line-height:1;color:var(--p3-deep)} .bc-n.over{color:var(--p4-deep)} .bc-l{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--slate)} .bulk-lab{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--slate);margin:0 0 8px} .bulk-sel{width:100%;max-width:220px;margin-bottom:20px;font-family:var(--serif); font-size:15px;padding:11px 14px;border-radius:12px;border:1px solid var(--mineral-2); background:var(--ink);color:var(--mineral)} .bulk-in{width:100%;font-family:var(--mono);font-size:14px;line-height:1.7; padding:14px 16px;border-radius:14px;border:1px solid var(--mineral-2); background:var(--ink);color:var(--mineral);resize:vertical} .bulk-in:focus,.bulk-sel:focus{outline:0;border-color:var(--p1);background:#fff; box-shadow:0 0 0 4px rgba(96,165,250,.15)} .bulk-out{margin-top:16px;display:grid;gap:5px} .bulk-out[hidden]{display:none} .br{display:grid;grid-template-columns:26px minmax(0,1fr) minmax(0,1.15fr);gap:10px; align-items:baseline;padding:8px 12px;border-radius:10px;font-size:13.5px;line-height:1.45} .br-i{font-family:var(--mono);font-size:11px;color:var(--slate);opacity:.7} .br-t{font-family:var(--mono);font-size:13px;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .br-m{font-size:12.5px} .br.ok{background:var(--p3-soft)} .br.ok .br-t{color:#0B5F44} .br.ok .br-m{color:#0B5F44;opacity:.8} .br.bad{background:var(--p4-soft)} .br.bad .br-t{color:var(--p4-deep)} .br.bad .br-m{color:var(--p4-deep)} .br.dupe{background:#FFFBF2} .br.dupe .br-t{color:#7A5A15} .br.dupe .br-m{color:#7A5A15} .br.over{background:#FFF7ED} .br.over .br-t{color:#9A3412} .br.over .br-m{color:#9A3412} .bulk-note{margin:16px 0 0;font-size:13.5px;line-height:1.55;color:var(--slate)} @media(max-width:640px){ .br{grid-template-columns:22px 1fr;gap:4px 8px} .br-m{grid-column:2} } /* redemption fields, and the honest note about what they do */ .bulk-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:20px} @media(max-width:620px){.bulk-row{grid-template-columns:1fr}} .bulk-code{width:100%;font-family:var(--mono);font-size:14px;padding:11px 14px; border-radius:12px;border:1px solid var(--mineral-2);background:var(--ink);color:var(--mineral)} .bulk-code:focus{outline:0;border-color:var(--p1);background:#fff; box-shadow:0 0 0 4px rgba(96,165,250,.15)} .bulk-hint{margin:7px 0 0;font-size:12.5px;line-height:1.45;color:var(--slate)} .bulk-hint.err{color:var(--p4-deep)} .bulk-hint.ok{color:var(--p3-deep)} .honest{margin:clamp(22px,2.6vw,30px) 0;padding:20px 22px;border-radius:18px; background:#FFFBF2;border:1px solid #F0DFB8} .honest-k{margin:0 0 10px;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:#7A5A15} .honest p{margin:0 0 11px;font-size:15px;line-height:1.6;color:#7A5A15} .honest p:last-child{margin:0} .honest b{color:#5C4310} /* the nav buy button carries the full product name on wide screens and drops the tail where the nav would otherwise wrap */ .nav-buy{white-space:nowrap;font-size:14.5px;padding:12px 20px;letter-spacing:-.02em} @media(max-width:1280px){.nav-buy .nb-x{display:none}} @media(max-width:1080px){.nav-buy{font-size:13.5px;padding:11px 16px}} /* the counter now shows what is left, not just what fits */ .bulk-sub{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--slate);max-width:42ch} .bc-rem{display:block;margin-top:5px;font-family:var(--mono);font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:var(--slate)} .bc-rem.over{color:var(--p4-deep)} /* ============================================================ THE VERIFICATION BADGE Issued only on a real scan and linked back to the report it came from. A badge nobody can check is a sticker. ============================================================ */ .vb{display:block;width:300px;max-width:100%;height:auto} .vb-sm{width:132px} .vb-bg{fill:#fff;stroke:#E2E8F0;stroke-width:1.4} .vb-n{font-family:var(--serif);font-weight:800;font-size:38px;letter-spacing:-.05em; fill:var(--mineral)} .vb-sm .vb-n{font-size:44px;text-anchor:middle} .vb-of{font-family:var(--serif);font-weight:600;font-size:17px;fill:#94A3B8; letter-spacing:-.02em} .vb-rule{stroke:#E2E8F0;stroke-width:1.4} .vb-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;fill:#8A96A6} .vb-sm .vb-k{text-anchor:middle;font-size:8.5px} .vb-l{font-family:var(--serif);font-weight:800;font-size:15px;letter-spacing:-.03em; fill:var(--p1-deep)} .vb-sm .vb-l{text-anchor:middle;font-size:12px} .badge-row{display:flex;gap:22px;align-items:center;flex-wrap:wrap; padding:26px;border-radius:22px;background:#fff;border:1px solid var(--line); box-shadow:var(--sh-card);margin:24px 0} .badge-code{background:#0F1B2D;color:#D6E3F2;border-radius:14px;padding:16px 18px; font-family:var(--mono);font-size:12.5px;line-height:1.7;overflow:auto;margin:18px 0} /* three columns now: free, standard, large */ .offer{max-width:1120px} .offer-grid{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:980px){.offer-grid{grid-template-columns:1fr}} .oc-large{border-color:#CBD8EA;background:linear-gradient(170deg,#FBFCFE,#FFFFFF)} .oc-large .oc-p{color:var(--brand)} /* three tiers, not two — free, standard, large site */ .offer-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .offer{max-width:1120px} @media(max-width:980px){ .offer-grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto} } .oc-large{border-color:#DBE9FF;background:linear-gradient(170deg,#FAFCFF,#FFFFFF)} .oc-large .oc-p{color:var(--p1-deep)} /* the benchmark opt-in — off by default, and absent entirely until there is somewhere to send a score */ .contrib{margin:16px 0 0;padding:14px 16px;border-radius:14px; background:var(--p2-soft);border:1px solid #EADCFF} .contrib-l{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start; cursor:pointer;font-size:14px;line-height:1.55;color:var(--slate)} .contrib-l b{color:var(--mineral)} .contrib-l input{appearance:none;width:20px;height:20px;margin:1px 0 0; border:2px solid #C7B7E8;border-radius:6px;background:#fff;cursor:pointer;position:relative} .contrib-l input:checked{background:var(--p2);border-color:var(--p2)} .contrib-l input:checked::after{content:"";position:absolute;left:5px;top:1px; width:5px;height:10px;border:solid #fff;border-width:0 2.4px 2.4px 0;transform:rotate(42deg)} .contrib-l a{color:var(--p2-deep);text-decoration:underline;text-underline-offset:3px} /* the route for anyone bigger than the packs */ .offer-more{max-width:70ch;margin:clamp(22px,2.6vw,30px) auto 0;padding:15px 20px; border-radius:16px;background:var(--ink);border:1px solid var(--line); font-size:15px;line-height:1.6;color:var(--slate);text-align:center} .offer-more a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} /* ============================================================ THE MARK — circles, not squares Four solid squares in a 2x2 grid is Microsoft's registered mark. Our mark is four connected nodes, and every place it appears should look like that rather than like theirs — particularly on a site that discusses Copilot and reviews Bing Webmaster Tools, where proximity makes confusion more plausible rather than less. ============================================================ */ .tta-mk{grid-template-columns:repeat(2,9px);gap:5px;position:relative} .tta-mk i{border-radius:50%} .tta-mk::before{content:"";position:absolute;inset:4px;border:1.4px solid var(--line); border-radius:2px;pointer-events:none} /* the same correction everywhere the mark is drawn small */ .prov-mk i,.sticky-mk i{border-radius:50%} .prov-mk{gap:4px} .sticky-mk{gap:4px} /* ============================================================ RUN IT IN YOUR OWN AZURE Sits directly under the hero, styled apart from it so it reads as a second door rather than a competing offer. ============================================================ */ .tenant{max-width:var(--maxw);margin:clamp(30px,4vw,56px) auto 0; padding-inline:var(--pad)} .tenant-in{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(24px,3.4vw,48px);align-items:center; background:linear-gradient(140deg,#F4F9FF,#FFFFFF 60%); border:1px solid #DBE9FF;border-radius:26px; padding:clamp(26px,3.2vw,40px); box-shadow:0 1px 2px rgba(31,41,55,.04),0 24px 54px -30px rgba(30,64,175,.3)} @media(max-width:880px){.tenant-in{grid-template-columns:1fr}} .tenant-k{display:flex;align-items:center;gap:9px;margin:0 0 12px; font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase; color:var(--p1-deep)} .az{width:17px;height:17px;flex:none;fill:#0078D4} .tenant-t{margin:0 0 12px;font-family:var(--serif);font-weight:800; font-size:clamp(21px,2.5vw,30px);letter-spacing:-.04em;line-height:1.2;color:var(--mineral)} .tenant-x{margin:0 0 16px;font-size:16px;line-height:1.6;color:var(--slate);max-width:52ch} .tenant-who{margin:0;padding:14px 16px;border-radius:14px;background:#fff; border:1px solid var(--line);font-size:14.5px;line-height:1.55;color:var(--slate)} .tenant-who b{color:var(--mineral)} .tenant-card{background:#fff;border:1px solid var(--line);border-radius:20px; padding:22px 24px;box-shadow:var(--sh-card)} .tc-k{margin:0 0 14px;font-family:var(--mono);font-size:10px;letter-spacing:.16em; text-transform:uppercase;color:var(--slate)} .tc-l{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px} .tc-l li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45; color:var(--slate)} .tc-l li::before{content:"";position:absolute;left:0;top:6px;width:12px;height:12px; border-radius:3px;background:var(--p1-soft);border:1px solid #BFD8FF} .tc-b{width:100%;justify-content:center} .tc-n{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--slate)} .tenant-honest{max-width:76ch;margin:clamp(18px,2.2vw,26px) auto 0; padding:15px 18px;border-radius:16px;background:#FFFBF2;border:1px solid #F0DFB8; font-size:14.5px;line-height:1.6;color:#7A5A15} .tenant-honest b{color:#5C4310} /* ============================================================ OFFERING VISIBILITY — the primary result The overall number is a roll-up of four different situations. These rows are the thing someone can act on, so they come first. ============================================================ */ .offr{margin:0 0 22px;padding:20px 22px;border-radius:18px;background:#fff; border:1px solid var(--line);box-shadow:var(--sh-card)} .offr-k{margin:0 0 16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--mineral);display:flex;gap:10px;align-items:baseline; flex-wrap:wrap} .offr-k span{color:var(--slate);letter-spacing:.1em} .offr-list{display:grid;gap:8px} .offr-row{display:grid;grid-template-columns:minmax(120px,1.4fr) minmax(90px,2fr) 34px 96px; gap:12px;align-items:center;text-decoration:none;padding:7px 10px;border-radius:11px; transition:background .18s ease} .offr-row:hover{background:var(--ink)} .or-n{font-family:var(--serif);font-weight:700;font-size:14.5px;letter-spacing:-.02em; color:var(--mineral);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .or-b{height:9px;border-radius:5px;background:#EEF2F7;position:relative;overflow:hidden} .or-b i{position:absolute;left:0;top:0;bottom:0;width:var(--w);border-radius:5px;display:block} .or-s{text-align:right;font-family:var(--serif);font-weight:800;font-size:16px; letter-spacing:-.03em} .or-l{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase} .lv-good .or-b i{background:var(--p3)} .lv-good .or-s,.lv-good .or-l{color:var(--p3-deep)} .lv-ok .or-b i{background:var(--p1)} .lv-ok .or-s,.lv-ok .or-l{color:var(--p1-deep)} .lv-warn .or-b i{background:#F6B534} .lv-warn .or-s,.lv-warn .or-l{color:#9A3412} .lv-bad .or-b i{background:var(--p4)} .lv-bad .or-s,.lv-bad .or-l{color:var(--p4-deep)} .offr-f{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line); font-size:14.5px;line-height:1.55;color:var(--slate)} .offr-f b{color:var(--mineral)} @media(max-width:640px){ .offr-row{grid-template-columns:1fr 40px;gap:4px 10px} .or-b{grid-column:1 / -1;order:3} .or-l{grid-column:1 / -1;order:4} } .ex-rollup{margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate)} /* ============================================================ THE LADDER — audit, then optionally upward ============================================================ */ .ladder{max-width:880px;margin:clamp(26px,3.2vw,40px) auto 0;padding:clamp(22px,2.6vw,30px); border-radius:22px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-card)} .ladder-k{margin:0 0 16px;font-family:var(--mono);font-size:10px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate);text-align:center} .ladder-row{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap; margin-bottom:clamp(22px,2.6vw,30px)} .lr{display:flex;flex-direction:column;padding:11px 15px;border-radius:14px; background:var(--ink);border:1px solid var(--line);text-align:center;min-width:104px} .lr b{font-family:var(--serif);font-weight:800;font-size:14px;letter-spacing:-.025em; color:var(--mineral)} .lr i{font-style:normal;font-size:11.5px;color:var(--slate);margin-top:2px} .lr.on{background:var(--p3-soft);border-color:#A7EFD0} .lr.on b{color:var(--p3-deep)} .lr-a{color:#B6C2D2;font-size:15px;flex:none} @media(max-width:700px){.lr-a{display:none}.lr{flex:1 1 45%}} .ladder-t{width:100%;border-collapse:collapse;font-size:14.5px} .ladder-t th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--slate);padding:9px 12px;border-bottom:1px solid var(--line)} .ladder-t td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--slate)} .ladder-t td b{color:var(--mineral)} .ladder-t tr:last-child td{border-bottom:0} .ladder-t tr.hi td{background:#FFFBF2} .ladder-t td:last-child{text-align:right;white-space:nowrap;font-family:var(--mono); font-size:12.5px;color:var(--mineral)} .ladder-n{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--line); font-size:14.5px;line-height:1.6;color:var(--slate)} .ladder-n b{color:var(--mineral)} .wl-logo{display:none} .wl-item .wl-text{display:inline !important;opacity:1 !important} .wl-item{padding:10px 18px} /* ============================================================ REVISED PACKAGES — audit, fix pack, both ============================================================ */ .oc-d{margin:-8px 0 18px;font-size:15px;line-height:1.55;color:var(--slate)} .oc-paid .oc-d{color:var(--mineral)} .offer-free{margin:clamp(20px,2.4vw,28px) 0 0;font-size:15px;color:var(--slate)} .offer-free a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} @media(min-width:981px){.oc-paid{transform:translateY(-10px)}} .pkg-lab{margin:0 0 8px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:#234775} .pkg{display:grid;gap:8px;margin-bottom:6px} .drawer-buy .pkg-o{display:flex;align-items:center;gap:12px;margin:0;padding:12px 14px; border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer; text-transform:none;letter-spacing:0;font-family:var(--serif); transition:border-color .18s ease,background .18s ease} .drawer-buy .pkg-o input{width:18px;height:18px;margin:0;flex:none;accent-color:#234775} .pkg-o span{display:flex;flex-direction:column;gap:2px} .pkg-o b{font-size:15px;letter-spacing:-.02em;color:var(--mineral)} .pkg-o i{font-style:normal;font-size:13px;color:var(--slate)} .pkg-o:has(input:checked){border-color:#E0BE79;background:#FFFBF2} .drawer-list[hidden]{display:none} .ind-who{margin:0 0 18px;font-family:var(--serif);font-weight:700; font-size:clamp(17px,1.8vw,20px);letter-spacing:-.03em;line-height:1.4;color:var(--mineral)} .ind-k{margin:0 0 10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em; text-transform:uppercase;color:var(--slate)} .ind-l{list-style:none;margin:0 0 22px;padding:0;display:grid; grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 18px} @media(max-width:760px){.ind-l{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:460px){.ind-l{grid-template-columns:1fr}} .ind-l li{position:relative;padding-left:24px;font-size:15px;line-height:1.45;color:var(--slate)} .ind-l li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px; border-radius:50%;background:var(--p3-soft);border:1px solid #A7EFD0} .ind-l li::after{content:"";position:absolute;left:5px;top:6px;width:4px;height:7px; border:solid var(--p3-deep);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)} .ind-q{margin:0;padding:16px 18px;border-radius:14px;background:var(--p1-soft); border:1px solid #DBE9FF;font-family:var(--serif);font-weight:700; font-size:clamp(16px,1.7vw,19px);letter-spacing:-.025em;line-height:1.4;color:var(--p1-deep)} .ind-q span{display:block;margin-bottom:5px;font-family:var(--mono);font-weight:500; font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate)} .ladder{display:block} .oc-l{align-content:start} .oc-large .oc-p{color:var(--mineral)} /* why trust us */ .trust{padding-block:clamp(48px,6vw,84px)} .trust-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(26px,4vw,60px); align-items:center;padding:clamp(26px,3.4vw,44px);border-radius:26px;background:#fff; border:1px solid var(--line);box-shadow:var(--sh-card)} @media(max-width:880px){.trust-in{grid-template-columns:1fr}} .trust-h{font-size:clamp(24px,3vw,36px);margin-bottom:14px} .trust-x{margin:0 0 14px;font-size:16.5px;line-height:1.65;color:var(--slate)} .trust-x a,.trust-more a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} .trust-more{margin:0;font-size:14.5px;color:var(--slate)} .trust-l2{list-style:none;margin:0;padding:0;display:grid;gap:12px} .trust-l2 li{position:relative;padding:14px 16px 14px 44px;border-radius:14px;background:var(--ink); border:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--slate)} .trust-l2 li b{color:var(--mineral)} .trust-l2 li::before{content:"";position:absolute;left:16px;top:17px;width:16px;height:16px;border-radius:50%; background:var(--p3-soft);border:1px solid #A7EFD0} .trust-l2 li::after{content:"";position:absolute;left:21.5px;top:20.5px;width:4px;height:7px; border:solid var(--p3-deep);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)} /* platform strip is a static list now */ .works .wl-set{max-width:1100px} .works .wl-item{margin-right:0} .nav-links > a,.navtrig{white-space:nowrap} @media(max-width:1280px){.nav-in{gap:18px}.nav-links > a,.navtrig{padding:9px 10px;font-size:14px}} @media(max-width:1120px){.nav .brand{font-size:16px}.nav-links > a,.navtrig{padding:8px 8px;font-size:13.5px}.nav-links{gap:0}} @media(max-width:1180px) and (min-width:961px){.nav-buy .nb-ai{display:none}} @media(max-width:1040px) and (min-width:961px){.nav-in{gap:10px}.nav-links > a,.navtrig{padding:8px 7px}} .oc-s{margin:-6px 0 20px;font-size:13.5px;line-height:1.55;color:var(--slate)} .oc-s b{color:var(--mineral)} .pkg-ent{margin:4px 0 14px;font-size:13.5px;color:var(--slate)} .pkg-ent a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} /* the .phead padding shorthand was cancelling the .wrap gutter on every inner page */ .wrap.phead{padding-inline:var(--pad)} /* credibility strip, inside the hero's website box */ .hts-cred{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:center; margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);text-align:left} .hts-cred .mk{width:26px;height:26px;grid-row:1 / span 2;overflow:visible} .hc-who{margin:0;font-size:14px;line-height:1.4;color:var(--slate)} .hc-who b{display:block;font-weight:700;color:var(--mineral);letter-spacing:-.01em} .hc-who a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line)} .hc-who a:hover{color:var(--p1-deep);text-decoration-color:currentColor} .hc-who span{display:block} .hc-no{grid-column:2;margin:2px 0 0;font-size:13.5px;font-weight:600;color:var(--p3-deep)} .hts-oneoff{font-weight:500} /* who this is for */ .whofor .sec-head{margin-bottom:clamp(22px,2.6vw,32px)} .wf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px} .wf{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;background:#fff; border:1px solid var(--line);box-shadow:var(--sh-card);text-decoration:none; font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:-.02em;color:var(--mineral); transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease} .wf:hover{transform:translateY(-2px);border-color:#A7EFD0} .wf-t{position:relative;flex:none;width:22px;height:22px;border-radius:50%;background:var(--p3-soft);border:1px solid #A7EFD0} .wf-t::after{content:"";position:absolute;left:7px;top:4px;width:5px;height:9px;border:solid var(--p3-deep); border-width:0 2px 2px 0;transform:rotate(42deg)} .wf-note{margin:18px 0 0;font-size:15px;color:var(--slate)} .wf-note a{color:var(--brand);text-decoration:underline;text-underline-offset:3px} @media(max-width:520px){.wf-grid{grid-template-columns:1fr 1fr}.wf{padding:13px 14px;font-size:14.5px;gap:9px}} /* ===== 30 Sep design pass ===== */ /* 3. stronger gold call to action, site-wide */ .btn-cite{background:#EDA21F;border-color:#D48F12;color:#2E1F02; box-shadow:0 2px 4px rgba(143,94,12,.2),0 14px 30px -10px rgba(214,143,18,.75)} .btn-cite:hover{background:#E39814;border-color:#C98710; box-shadow:0 3px 6px rgba(143,94,12,.24),0 18px 36px -10px rgba(214,143,18,.85)} /* 9. logo, header only, ~13% larger */ header.nav .brand{font-size:20.5px;gap:13px} header.nav .brand .mk{width:34px;height:34px} /* 2. hero ~15% tighter */ .hero-tree{padding-block:clamp(40px,5.5vw,80px) clamp(44px,6vw,88px)} .hero-tree .eyebrow{margin-bottom:16px} .hero-tree .h1{margin-bottom:16px} .hero-tree .ht-lede{margin-bottom:clamp(24px,3vw,36px)} /* 5. background ~15% stronger */ .hero::before{opacity:.40} /* 1 + 6. the form is the centrepiece, with depth behind it */ .hts-wrap{position:relative;max-width:800px;margin-inline:auto;isolation:isolate} .hts-glow{position:absolute;z-index:0;inset:-70px -110px -50px;pointer-events:none;border-radius:50%; background: radial-gradient(42% 55% at 18% 45%, rgba(96,165,250,.30), transparent 70%), radial-gradient(40% 55% at 82% 40%, rgba(192,132,252,.28), transparent 70%), radial-gradient(35% 45% at 50% 95%, rgba(52,211,153,.16), transparent 70%); filter:blur(26px)} .hts-glow::after{content:"";position:absolute;inset:40px 70px;border-radius:50%; background-image:radial-gradient(rgba(35,71,117,.22) 1px, transparent 1.4px);background-size:16px 16px; -webkit-mask-image:radial-gradient(closest-side, #000 30%, transparent 100%);mask-image:radial-gradient(closest-side, #000 30%, transparent 100%)} .hts-wrap .htree-src{position:relative;z-index:1;max-width:none;padding:28px 30px 22px;border-radius:26px; box-shadow:0 2px 6px rgba(31,41,55,.06),0 34px 70px -30px rgba(31,41,55,.38)} .hts-wrap .hts-k{font-size:12px} .hts-wrap .hts-row{gap:12px} .hts-wrap .hts-in{font-size:20px;padding:21px 26px} .hts-wrap .hts-go{padding:21px 30px;font-size:17px;letter-spacing:-.02em} .hts-wrap .hts-note{font-size:15.5px} @media(max-width:640px){ .hts-glow{inset:-40px -30px -30px} .hts-wrap .htree-src{padding:22px 20px 18px} .hts-wrap .hts-in{font-size:18px;padding:18px 20px} .hts-wrap .hts-go{padding:19px 20px;font-size:16px} } /* 7. pillar icons */ .htc-ic{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:14px; background:#fff;border:2px solid var(--c);box-shadow:0 6px 16px -8px var(--c); transition:transform .26s cubic-bezier(.2,.8,.2,1)} .htc-ic svg{width:23px;height:23px;fill:none;stroke:var(--c-deep,#334155);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .htc:hover .htc-ic{transform:translateY(-2px) rotate(-4deg)} .htc.pl1{--c-deep:var(--p1-deep)} .htc.pl2{--c-deep:var(--p2-deep)} .htc.pl3{--c-deep:var(--p3-deep)} .htc.pl4{--c-deep:var(--p4-deep)} @media(min-width:1101px){.htc{flex-direction:column;text-align:center}} /* 8. routing lines between sections */ .route{max-width:1140px;margin:0 auto;padding-inline:var(--pad);height:44px} .route svg{display:block;width:100%;height:100%;overflow:visible} .route .htw{opacity:.5} @media (prefers-reduced-motion: reduce){.route .htw-spark{display:none}} /* 4. platform tiles (logo when the file exists, name until then) */ .wl-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:980px;margin:0 auto} .wl-tile{display:flex;align-items:center;justify-content:center;min-width:150px;height:64px;padding:0 22px; border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-card);text-decoration:none; transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s ease} .wl-tile:hover{transform:translateY(-2px);border-color:#C7D2FE} .wl-img{display:block;height:30px;width:auto;max-width:130px;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s} .wl-tile:hover .wl-img{filter:none;opacity:1} .wl-tile:has(.wl-img) .wl-name{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .wl-name{font-family:var(--serif);font-weight:800;font-size:18px;letter-spacing:-.03em;color:#334155} .wl-more .wl-name{font-size:15px;font-weight:700;color:var(--brand)} @media(max-width:520px){.wl-tile{min-width:0;flex:1 1 40%;height:56px}} .wl-tiles{max-width:1140px} @media(min-width:900px){.wl-tiles{flex-wrap:nowrap}.wl-tile{flex:1 1 0;min-width:0;padding:0 14px}} /* ===== hero v2 (30 Sep) ===== */ .hero-v2{padding-block:clamp(28px,4vw,56px) clamp(24px,3vw,40px)} .hv{max-width:1360px;display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:clamp(8px,2vw,28px);align-items:start} .hv-main{text-align:center;min-width:0;padding-top:clamp(6px,1.4vw,18px)} .hv-main .eyebrow{justify-content:center;margin-bottom:14px} .hero-v2 .h1{font-size:clamp(38px,4.6vw,64px);line-height:1.02;letter-spacing:-.045em;margin:0 auto 18px;max-width:17ch} .hv-lead{margin:0 auto 6px;max-width:48ch;font-family:var(--serif);font-weight:700;font-size:clamp(17px,1.5vw,20px);letter-spacing:-.02em;color:var(--mineral)} .hv-sub{margin:0 auto clamp(20px,2.4vw,28px);max-width:46ch;font-size:clamp(16px,1.35vw,18.5px);line-height:1.5;color:var(--slate)} .hero-v2 .hts-wrap{max-width:720px} .hv-card{text-align:left} .hv-in{position:relative;flex:1 1 auto;min-width:0;display:flex} .hv-in svg{position:absolute;left:20px;top:50%;width:21px;height:21px;margin-top:-10.5px;fill:none;stroke:#64748B;stroke-width:1.6;pointer-events:none} .hts-wrap .hv-in .hts-in{width:100%;padding-left:52px} .hv-msg:empty{display:none} .hv-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 16px;margin:16px 0 2px;font-size:14.5px;color:#334155} .hv-trust span{display:inline-flex;align-items:center;gap:7px} .hv-trust svg{width:17px;height:17px;fill:none;stroke:#334155;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round} .hv-trust .hv-sep{width:1px;height:18px;background:var(--line)} .hv-cred{margin:18px auto 0;font-size:14.5px;line-height:1.5;color:var(--slate)} .hv-cred p{margin:0} .hv-cred a{font-weight:700;color:var(--mineral);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px} .hv-cred a:hover{text-decoration-color:currentColor} .hv-cred-2{color:#334155} .hv-cred-3{margin-top:4px!important;font-size:12.5px;color:#64748B} .hv-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px clamp(18px,2.6vw,36px);margin:clamp(20px,2.4vw,28px) auto 0} .hv-logo{display:flex;align-items:center;height:34px;text-decoration:none} .hv-logo img{display:block;height:28px;width:auto;max-width:150px} .hv-logo span{font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.035em;color:#334155} .hv-logo:has(img) span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .hv-more{font-size:15px;color:var(--slate);text-decoration:none} .hv-more:hover{color:var(--brand);text-decoration:underline} /* assistant cards + routing lines */ .hv-side{position:relative;width:440px;height:520px;margin-top:clamp(20px,3vw,40px)} .hv-lines{position:absolute;left:-40px;top:0;width:440px;height:520px;overflow:visible} .hvl{fill:none;stroke-width:2.2;stroke-linecap:round;opacity:.85} .hvl.l1{stroke:var(--p1)} .hvl.l2{stroke:var(--p2)} .hvl.l3{stroke:var(--p3)} .hvn{stroke:#fff;stroke-width:2.2} .hvn.n1,.hvs.n1{fill:var(--p1)} .hvn.n2,.hvs.n2{fill:var(--p2)} .hvn.n3,.hvs.n3{fill:var(--p3)} .hv-ai{position:absolute;width:292px;display:flex;gap:14px;align-items:flex-start;padding:18px 18px 16px; background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 2px 6px rgba(31,41,55,.05),0 22px 44px -26px rgba(31,41,55,.35)} .hv-ai.a1{left:44px;top:20px} .hv-ai.a2{left:92px;top:150px} .hv-ai.a3{left:100px;top:282px} .hv-ai-ic{position:relative;flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;overflow:hidden} .hv-ai-ic img{position:relative;z-index:1;width:36px;height:36px} .hv-ai-ic b{font-family:var(--serif);font-size:14px;font-weight:800;color:#fff;letter-spacing:-.02em} .hv-ai-ic:has(img) b{display:none} .hv-ai.a1 .hv-ai-ic{background:#10A37F} .hv-ai.a2 .hv-ai-ic{background:linear-gradient(135deg,#2563EB,#C026D3)} .hv-ai.a3 .hv-ai-ic{background:linear-gradient(135deg,#4285F4,#34A853)} .hv-ai-ic:has(img){background:#fff!important} .hv-ai-t{display:flex;flex-direction:column;min-width:0;flex:1} .hv-ai-t b{font-family:var(--serif);font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--mineral)} .hv-ai-t i{font-style:normal;font-size:13px;line-height:1.4;color:#475569;margin:3px 0 9px} .hv-ai-t em{display:block;height:7px;border-radius:4px;background:#E7ECF3;margin-top:6px} .hv-ai-t em + em{width:62%} .hv-note{position:absolute;left:160px;top:420px;margin:0;font-family:'Caveat',cursive;font-size:25px;line-height:1.05;color:#334155;transform:rotate(-8deg)} .hv-note svg{position:absolute;left:190px;top:-44px;width:46px;height:56px;fill:none;stroke:#334155;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} @media (prefers-reduced-motion: reduce){.hvs{display:none}} @media(max-width:1180px){.hv{grid-template-columns:1fr}.hv-side{display:none}.hero-v2 .h1{max-width:18ch}} @media(max-width:640px){.hv-trust{flex-direction:column;gap:6px}.hv-trust .hv-sep{display:none}.hero-v2 .h1{font-size:clamp(32px,9vw,40px)}} /* four pillars row */ .route-hero{position:relative} .route-hero .rn{position:absolute;top:26px;width:9px;height:9px;border-radius:50%} .route-hero .r1{left:18%;background:var(--p1)} .route-hero .r4{right:18%;background:var(--p4)} .p4s{padding-top:clamp(18px,2.4vw,30px)} .p4s .sec-head{margin-bottom:clamp(20px,2.4vw,30px)} .p4-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px} .p4{display:flex;gap:16px;align-items:flex-start;padding:22px 20px;border-radius:18px;text-decoration:none; background:var(--c-soft);border:1px solid color-mix(in srgb,var(--c) 30%,transparent); transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease} .p4:hover{transform:translateY(-3px);box-shadow:0 18px 36px -24px var(--c)} .p4.pl1{--c:var(--p1);--c-soft:var(--p1-soft);--c-deep:var(--p1-deep)} .p4.pl2{--c:var(--p2);--c-soft:var(--p2-soft);--c-deep:var(--p2-deep)} .p4.pl3{--c:var(--p3);--c-soft:var(--p3-soft);--c-deep:var(--p3-deep)} .p4.pl4{--c:var(--p4);--c-soft:var(--p4-soft);--c-deep:var(--p4-deep)} .p4-ic svg{width:40px;height:40px;fill:none;stroke:var(--c-deep);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .p4-t b{display:block;font-family:var(--serif);font-weight:800;font-size:19px;letter-spacing:-.03em;color:var(--c-deep);margin-bottom:5px} .p4-t span{font-size:14.5px;line-height:1.45;color:#475569} .p4-foot{margin:22px 0 0;text-align:center;font-size:15px;color:var(--slate)} .p4-foot a{color:var(--brand);font-weight:600;text-decoration:none;margin-left:6px} .p4-foot a:hover{text-decoration:underline} @media(max-width:1000px){.p4-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.p4-grid{grid-template-columns:1fr}} /* nav a touch lighter, as in the mockup */ .nav-links > a,.navtrig{font-weight:500} /* footer bottom line in white */ footer .foot-base,footer .foot-base span,footer .foot-base a{color:#fff !important;opacity:1 !important} footer .foot-base a{text-decoration-color:rgba(255,255,255,.5)} footer .foot-base a:hover{text-decoration-color:#fff} /* hero v2 spacing fixes */ .hero-v2 .h1{font-size:clamp(36px,4.1vw,58px);max-width:21ch} .hv-side{height:640px} .hv-lines{left:-40px;width:480px;height:640px} .hv-ai{padding:16px 18px 14px} .hv-ai.a1{left:44px;top:0} .hv-ai.a2{left:92px;top:158px} .hv-ai.a3{left:100px;top:316px} .hv-ai-g{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round} .hv-ai-ic:has(img) .hv-ai-g{display:none} .hv-note{left:170px;top:500px} .hv-note svg{left:176px;top:-58px} /* routing lines: bigger glowing hub, lighter lines, headings overlap slightly */ .route{position:relative;z-index:0;margin-bottom:-12px} .route + section{position:relative;z-index:1} .route .htw{opacity:.42} .route .htw-hub{display:none} .route .htw-spark{filter:drop-shadow(0 0 4px currentColor)} .route .htw-spark.w1{color:var(--p1)} .route .htw-spark.w3{color:var(--p3)} .route-hub{position:absolute;left:50%;top:50%;width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%; background:#334155;box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 5px rgba(51,65,85,.12),0 0 18px 4px rgba(96,165,250,.35); animation:hubGlow 3.2s ease-in-out infinite} .route-hub.hub-top{top:8px;margin-top:-6.5px} @keyframes hubGlow{0%,100%{box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 5px rgba(51,65,85,.12),0 0 16px 3px rgba(96,165,250,.28)} 50%{box-shadow:0 0 0 4px rgba(255,255,255,.9),0 0 0 5px rgba(51,65,85,.12),0 0 24px 7px rgba(192,132,252,.38)}} .route .rn{box-shadow:0 0 10px 2px currentColor} .route .r1{color:var(--p1)} .route .r4{color:var(--p4)} .hvn{filter:drop-shadow(0 0 3px rgba(96,165,250,.55))} @media (prefers-reduced-motion: reduce){.route-hub{animation:none}} /* phone: let the headline wrap */ @media(max-width:640px){.hero-v2 .h1{font-size:clamp(28px,8.2vw,38px);max-width:none}.hero-v2 .h1 .nb{white-space:normal}} /* fade the hero colour out instead of a hard edge */ .hero-v2 .aurora,.hero-v2::before{-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);mask-image:linear-gradient(to bottom,#000 55%,transparent 100%)} .p4-t span{display:block;line-height:1.45} .p4-t b{line-height:1.2} @media(max-width:640px){.hero-v2 .h1{font-size:clamp(26px,7.3vw,36px)}} /* supplied logos: balance their optical sizes */ .hv-logo img{height:26px} .hv-logo[href*="shopify"] img,.hv-logo[href*="wordpress"] img{height:29px} .hv-logo[href*="squarespace"] img{height:21px} .hv-logo[href*="wix"] img{height:23px} .hv-logo[href*="webflow"] img{height:23px} .hv-ai-ic img{width:44px;height:44px} .hv-ai.a2 .hv-ai-ic img,.hv-ai.a3 .hv-ai-ic img{width:36px;height:36px} .hv-ai-ic:has(img){background:none!important} @media(min-width:900px){.hv-logos{flex-wrap:nowrap;gap:12px clamp(14px,1.9vw,28px)}} .hv-more{white-space:nowrap} /* book a call */ .book-call{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;background:#fff; border:1px solid var(--line);box-shadow:var(--sh-card);font-family:var(--serif);font-weight:700;font-size:15px; letter-spacing:-.01em;color:var(--brand);text-decoration:none;transition:border-color .2s,transform .2s} .book-call:hover{border-color:var(--p1);transform:translateY(-1px)} .book-call svg,.book-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} .talk-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;margin:18px auto 0;font-size:15px;color:var(--slate)} .faq-talk{margin-top:28px} .talk-inline{margin:14px 0} .buy-talk{margin:10px 0 0;text-align:center;font-size:14px;color:var(--slate)} .book-link{display:inline-flex;align-items:center;gap:6px;color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px} .book-fallback{font-size:15px} .book-self{display:none}.has-booking .book-self{display:block} /* ===== depth pass: warm-to-cool page, cards that lift off it ===== */ html{background:#F5F8FC} body{background:linear-gradient(180deg,#FCFBF8 0%,#F5F8FC 100%) !important;background-color:#F5F8FC} :root{--sh-card:0 1px 2px rgba(15,23,42,.04),0 20px 60px rgba(15,23,42,.08)} /* white cards that set their own lighter shadow */ .oc,.trust-in,.wf,.wl-tile,.hv-ai,.panel,.faq,.dir,.p4,.book-call{box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 60px rgba(15,23,42,.08)} .oc-paid{box-shadow:0 1px 2px rgba(15,23,42,.05),0 24px 70px rgba(214,143,18,.16)} .hts-wrap .htree-src{box-shadow:0 2px 6px rgba(15,23,42,.06),0 30px 80px rgba(15,23,42,.12)} .faq{background:#fff} /* bridge line */ .bridge{padding-block:clamp(10px,2vw,24px)} .bridge-line{max-width:900px;margin:0 auto;padding:22px 28px;border-radius:20px;text-align:center; font-family:var(--serif);font-size:clamp(18px,1.8vw,23px);line-height:1.45;letter-spacing:-.02em;color:#334155; background:linear-gradient(90deg,rgba(96,165,250,.10),rgba(192,132,252,.10) 50%,rgba(52,211,153,.10)); border:1px solid rgba(148,163,184,.25)} .bridge-line b{color:var(--mineral)} /* we do the work */ .dw-2{margin-top:-8px} .dw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px} .dw{padding:24px 24px 22px;border-radius:20px;background:#fff;border:1px solid var(--line); box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 60px rgba(15,23,42,.08)} .dw.pl1{--c:var(--p1);--c-deep:var(--p1-deep)} .dw.pl2{--c:var(--p2);--c-deep:var(--p2-deep)} .dw.pl3{--c:var(--p3);--c-deep:var(--p3-deep)} .dw-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:color-mix(in srgb,var(--c) 16%,#fff);border:1px solid color-mix(in srgb,var(--c) 45%,#fff)} .dw-ic svg,.rc-ic svg{width:18px;height:18px;fill:none;stroke:var(--c-deep,#047857);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .dw h3{margin:14px 0 6px;font-family:var(--serif);font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--c-deep)} .dw p{margin:0;font-size:15.5px;line-height:1.55;color:#475569} @media(max-width:860px){.dw-grid{grid-template-columns:1fr}} /* timeline */ .tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;position:relative} .tl::before{content:"";position:absolute;left:24px;right:24px;top:22px;height:3px;border-radius:2px; background:linear-gradient(90deg,var(--p1),var(--p3) 50%,var(--p2));opacity:.55} .tl-s{position:relative;padding:58px 22px 22px;border-radius:20px;background:#fff;border:1px solid var(--line); box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 60px rgba(15,23,42,.08)} .tl-s.pl1{--c:var(--p1);--c-deep:var(--p1-deep)} .tl-s.pl2{--c:var(--p2);--c-deep:var(--p2-deep)} .tl-s.pl3{--c:var(--p3);--c-deep:var(--p3-deep)} .tl-s::before{content:"";position:absolute;left:22px;top:14px;width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 5px #fff,0 0 14px 3px var(--c)} .tl-when{position:absolute;left:52px;top:12px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--c-deep)} .tl-s h3{margin:0 0 10px;font-family:var(--serif);font-size:21px;font-weight:800;letter-spacing:-.03em;color:var(--mineral)} .tl-s ul{margin:0;padding-left:18px;font-size:15.5px;line-height:1.7;color:#475569} .tl-who{margin:12px 0 0;font-size:13.5px;color:var(--slate)} .tl-note{max-width:760px;margin:22px auto 0;text-align:center;font-size:15.5px;line-height:1.6;color:var(--slate)} @media(max-width:860px){.tl{grid-template-columns:1fr}.tl::before{display:none}} /* what you receive */ .rc-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(24px,4vw,56px);align-items:center; padding:clamp(26px,3.4vw,44px);border-radius:26px;background:#fff;border:1px solid var(--line); box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 60px rgba(15,23,42,.08)} .rc-hd .h2{font-size:clamp(26px,3vw,38px)} .rc-list{list-style:none;margin:0;padding:0;display:grid;gap:10px} .rc-list li{display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:12px;padding:12px 16px;border-radius:14px;background:var(--ink);border:1px solid var(--line)} .rc-ic{--c-deep:var(--p3-deep);display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--p3-soft);border:1px solid #A7EFD0} .rc-list b{font-size:15.5px;color:var(--mineral)} .rc-list i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--slate);white-space:nowrap} @media(max-width:880px){.rc-card{grid-template-columns:1fr}} @media(max-width:480px){.rc-list li{grid-template-columns:26px 1fr}.rc-list i{grid-column:2}} .impl-note{max-width:760px;margin:16px auto 0;text-align:center;font-size:15px;color:#334155} /* trademark mark */ sup.tm{font-size:.42em;font-weight:600;vertical-align:super;line-height:0;margin-left:.08em;letter-spacing:0;position:relative;top:-.15em} .brand sup.tm{font-size:.5em;top:-.35em;opacity:.85} .brand-t{white-space:nowrap} /* order confirmation */ .buy-done{padding:22px 22px 18px;border-radius:18px;background:#ECFDF5;border:1px solid #A7EFD0;color:#064E3B} .buy-done .bd-k{margin:0 0 6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#047857} .buy-done h3{margin:0 0 10px;font-family:var(--serif);font-size:21px;font-weight:800;letter-spacing:-.03em;color:#064E3B} .buy-done p{margin:0 0 10px;font-size:15px;line-height:1.55} .buy-done .bd-fine{font-size:13.5px;margin:0} .buy-done a{color:#047857;text-decoration:underline} [data-buy][disabled]{opacity:.75;cursor:progress} /* country select, matches the text inputs */ [data-checkout-form] select[data-field="country"]{width:100%;font:inherit;font-size:16px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--mineral);appearance:auto} [data-checkout-form] select[data-field="country"]:focus{outline:2px solid var(--p1);outline-offset:1px} /* ask a question */ .qform{max-width:640px;margin:18px 0 8px;padding:24px;border-radius:20px;background:#fff;border:1px solid var(--line); box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 60px rgba(15,23,42,.08)} .qform label{display:block;margin:14px 0 6px;font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#234775} .qform .opt{text-transform:none;letter-spacing:0;color:var(--slate)} .qform input[type=text],.qform input[type=email],.qform input[type=url],.qform select,.qform textarea{width:100%;font:inherit;font-size:16px;padding:13px 15px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--mineral)} .qform textarea{resize:vertical;min-height:120px} .qform-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} .qform-row label{margin-top:0} @media(max-width:560px){.qform-row{grid-template-columns:1fr}.qform-row div+div label{margin-top:14px}} .qform .qform-call{display:flex;align-items:center;gap:10px;margin:16px 0 4px;font-family:var(--serif);font-size:15px;letter-spacing:0;text-transform:none;color:var(--mineral)} .qform .qform-call input{width:18px;height:18px;accent-color:#234775} .qform .btn{margin-top:12px} .book-call svg,.book-link svg{stroke-width:1.7} /* hero urgency + proof strip */ .hv-lead{max-width:56ch} .hv-proof{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px;margin:clamp(18px,2.2vw,26px) auto 0;padding:0;max-width:760px} .hv-proof li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line); box-shadow:0 1px 2px rgba(15,23,42,.04);font-size:14px;font-weight:600;color:#1E293B} .hv-proof svg{width:16px;height:16px;flex:none;fill:none;stroke:#0F766E;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} @media(max-width:560px){.hv-proof li{font-size:13px;padding:7px 12px}} .hv-lead{font-weight:650;line-height:1.45} @media(max-width:560px){.hv-proof{display:grid;grid-template-columns:1fr 1fr;gap:8px} .hv-proof li{align-items:flex-start;border-radius:14px;padding:9px 10px;font-size:12.5px;line-height:1.35;text-align:left} .hv-proof svg{margin-top:1px}} /* coverage: order form extras */ .more-sites{margin:-6px 0 16px} .more-sites summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--brand);list-style:none} .more-sites summary::-webkit-details-marker{display:none} .more-sites summary::before{content:"+";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:1.5px solid currentColor;font-size:13px;line-height:1} .more-sites[open] summary::before{content:"\2212"} .more-sites textarea{display:block;width:100%;margin:10px 0 14px;padding:12px 14px;font:inherit;font-size:15px;border:1px solid var(--line);border-radius:var(--r-sm,12px);background:#fff;color:var(--mineral);resize:vertical;min-height:62px} .more-sites textarea:focus{border-color:var(--brand);outline:none;box-shadow:0 0 0 3px rgba(29,78,216,.12)} .more-sites .buy-hint{margin:-6px 0 4px} [data-checkout-form] select[data-field="offerings"]{width:100%;font:inherit;font-size:16px;padding:14px 16px;border-radius:14px;border:1px solid var(--line);background:#fff;color:var(--mineral);appearance:auto;margin-bottom:16px} [data-checkout-form] select[data-field="offerings"]:focus{outline:2px solid var(--p1);outline-offset:1px} .more-sites textarea{border-radius:14px;font-size:16px} /* coverage: package cards */ .oc-l li.oc-scope{font-weight:700;color:var(--mineral)} /* coverage: pricing table */ .cover{max-width:880px;margin:clamp(40px,5vw,64px) auto 0;text-align:center} .cover-q{font-family:var(--serif);font-weight:800;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.03em;line-height:1.15;margin:8px 0 10px;color:var(--mineral)} .cover-l{max-width:62ch;margin:0 auto 22px;color:var(--slate);font-size:16.5px;line-height:1.6} .cover-t-wrap{overflow-x:auto;border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04),0 20px 60px rgba(15,23,42,.08)} .cover-t{width:100%;border-collapse:collapse;font-size:15.5px;text-align:left} .cover-t th,.cover-t td{padding:14px 18px;border-bottom:1px solid var(--line)} .cover-t th{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#234775;background:#F8FAFC} .cover-t td:not(:first-child),.cover-t th:not(:first-child){text-align:center;white-space:nowrap;font-weight:700;color:var(--mineral)} .cover-t tr:last-child td{border-bottom:0} .cover-t tr.x td{background:#FBFCFE} .cover-t tr.e td{background:#F5F8FC} .cover-t tr.e td:last-child{white-space:normal} .cover-n{margin:12px 0 0;font-size:14px;color:var(--slate)} .cover-g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;text-align:left} .cover-g p{margin:0;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--slate)} .cover-g b{display:block;margin-bottom:6px;color:var(--mineral)} @media(max-width:820px){.cover-g{grid-template-columns:1fr}} @media(max-width:560px){.cover-t{font-size:14px}.cover-t th,.cover-t td{padding:11px 10px}} .pr-faqs{margin-top:clamp(40px,5vw,64px)} .pr-faqs .cover-q{text-align:center;margin-bottom:12px} /* cookie consent */ .cc{position:fixed;left:clamp(12px,2.4vw,26px);bottom:clamp(12px,2.4vw,26px);z-index:69;width:min(400px,calc(100vw - 24px)); background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px 18px 16px; box-shadow:0 1px 2px rgba(15,23,42,.06),0 24px 60px rgba(15,23,42,.18);animation:ccIn .35s ease both} @keyframes ccIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .cc-t{margin:0 0 4px;font-family:var(--serif);font-weight:800;font-size:16px;letter-spacing:-.02em;color:var(--mineral)} .cc-d{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--slate)} .cc-d a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:3px} .cc-b{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cc-b button{font:inherit;font-family:var(--serif);font-weight:700;font-size:15px;padding:11px 14px;border-radius:12px;cursor:pointer; border:1px solid var(--line);background:#fff;color:var(--mineral);transition:border-color .2s,background .2s} .cc-b .cc-yes{background:#234775;border-color:#234775;color:#fff} .cc-b button:hover{border-color:#234775} .cc-b .cc-yes:hover{background:#1A355A} .cc-b button:focus-visible{outline:3px solid rgba(35,71,117,.35);outline-offset:2px} .cc-b .cc-cur{box-shadow:0 0 0 3px rgba(246,181,52,.55)} @media(max-width:640px){ .cc{left:0;right:0;bottom:0;width:auto;border-radius:18px 18px 0 0;border-bottom:0} body.cc-open .sticky,body.cc-open .hb{display:none!important} } @media print{.cc{display:none!important}} /* hero lines start behind the website card */ .hv-main{position:relative;z-index:2} .hv-side{z-index:1}