/* The fonts the rest of this file has always asked for and never loaded. Without these,
   `font-family:Manrope,Arial` silently resolves to Arial for every visitor who does not
   happen to have Manrope installed — which is nearly all of them, and is why the live site
   did not look like the design. Self-hosted rather than linked from Google: see
   static/site/fonts/README.md.

   font-display:swap paints in the fallback immediately and swaps when the file lands, so a
   slow font delays no text. The metric overrides on the fallback keep that swap from moving
   the layout — without them the same words occupy a different width in Arial and the page
   jumps as the real face arrives. */
@font-face{font-family:Manrope;src:url("../fonts/manrope-400-800.101877a7a906.woff2") format('woff2');font-weight:400 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url("../fonts/dm-mono-400.b4ddae058212.woff2") format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'DM Mono';src:url("../fonts/dm-mono-500.ecb3fd43cbea.woff2") format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Arial standing in for Manrope, adjusted so the swap does not reflow the page. */
@font-face{font-family:'Manrope fallback';src:local('Arial');size-adjust:104%;ascent-override:99%;descent-override:27%;line-gap-override:0%}
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#101828;--navy:#0a0f1c;--blue:#1f4fd1;--cyan:#57c9ff;--pale:#f5f7fa;--muted:#4f5b6e;--line:#e4e7ec}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Manrope,'Manrope fallback',Arial,sans-serif;font-size:16px;line-height:1.55}.wrap{width:min(1150px,calc(100% - 40px));margin:auto}.nav{height:76px;display:flex;align-items:center;justify-content:space-between}.logo{width:161px;height:auto}.navlinks{display:flex;gap:26px;align-items:center}.navlinks a{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:13px 19px;font:700 14px Manrope;text-decoration:none;cursor:pointer}.button:hover{background:#174ec8}.button.ghost{background:transparent;border:1px solid #bccbe3;color:var(--ink)}.button.white{background:#fff;color:var(--blue)}.eyebrow{display:block;color:var(--blue);font:500 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;margin-bottom:17px}.hero{padding:96px 0 62px;background:linear-gradient(135deg,#fff 0%,#f3f8ff 60%,#e9f4ff 100%);overflow:hidden}.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:53px;align-items:center}.hero h1,.page-head h1{font-size:clamp(38px,5vw,66px);line-height:1.06;letter-spacing:-.055em;margin:0 0 22px;max-width:700px}.hero p{font-size:18px;color:var(--muted);max-width:550px;margin:0 0 31px}.actions{display:flex;gap:12px;flex-wrap:wrap}.trust{font-size:12px;color:#6d7890;margin-top:20px}.product-shot{width:100%;height:auto;filter:drop-shadow(0 25px 20px #172a5b24);border-radius:13px;border:1px solid #cad8eb}.ticker{background:var(--navy);color:#dce8ff;padding:17px 0;font:500 12px 'DM Mono',monospace;letter-spacing:.07em;text-align:center}.section{padding:100px 0}.section.pale{background:var(--pale)}.section-title{max-width:650px;margin-bottom:46px}.section-title h2{font-size:clamp(30px,3.5vw,46px);letter-spacing:-.045em;line-height:1.12;margin:0}.section-title p{color:var(--muted);margin:16px 0 0}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{border:1px solid var(--line);border-radius:14px;padding:27px;background:#fff}.icon{color:var(--blue);font-size:24px;margin-bottom:15px}.card h3{font-size:17px;margin:0 0 9px}.card p{font-size:14px;color:var(--muted);margin:0}.feature{display:grid;grid-template-columns:1fr 1.08fr;gap:80px;align-items:center}.feature.reverse>*:first-child{order:2}.feature h2{font-size:clamp(31px,3.8vw,48px);line-height:1.12;letter-spacing:-.05em;margin:0 0 18px}.feature p{color:var(--muted);max-width:480px}.feature ul{list-style:none;padding:0;margin:25px 0}.feature li{margin:12px 0;font-size:14px}.feature li:before{content:'✓';font-weight:800;color:var(--blue);margin-right:10px}.screen{max-width:100%;height:auto;border:1px solid #cbd8e9;border-radius:12px;box-shadow:0 28px 42px #172a5b20}.cta{background:var(--navy);color:#fff;padding:74px 0}.cta .inner{display:flex;justify-content:space-between;gap:30px;align-items:center}.cta h2{font-size:clamp(30px,4vw,46px);line-height:1.1;letter-spacing:-.045em;margin:0}.footer{background:#050b1c;color:#aebbd5;padding:51px 0 25px}.footer-top{display:flex;justify-content:space-between;gap:45px}.footer .logo{filter:brightness(0) invert(1);margin-bottom:15px}.footer p{font-size:13px;max-width:300px;margin:0}.footer-nav{display:flex;gap:60px}.footer-nav a{display:block;color:#aebbd5;font-size:13px;text-decoration:none;margin:7px 0}.socials{display:flex;gap:10px;margin-top:18px}.social{display:grid;place-items:center;width:31px;height:31px;border:1px solid #47536d;border-radius:50%;color:#fff;font-size:11px}.copyright{border-top:1px solid #273149;margin-top:35px;padding-top:21px;font-size:11px}.page-head{padding:76px 0 64px;background:var(--pale)}.page-head p{max-width:570px;color:var(--muted);font-size:17px}.pricing{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}.price-card{padding:35px;border:1px solid var(--line);border-radius:15px}.price-card.featured{background:var(--navy);color:#fff;border-color:var(--navy)}.price-card .price{font-size:42px;font-weight:800;letter-spacing:-.05em;margin:17px 0}.price-card p{color:var(--muted);font-size:14px}.featured p,.featured li{color:#dbe6fa}.price-card ul{list-style:none;padding:0;margin:28px 0}.price-card li{padding:7px 0;font-size:14px}.price-card li:before{content:'✓';color:var(--cyan);margin-right:9px}.download-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.download-card{border:1px solid var(--line);border-radius:13px;padding:27px}.download-card h2{margin:0;font-size:21px}.download-card p{font-size:13px;color:var(--muted);min-height:39px}.download-card small{display:block;color:#77839a;margin:14px 0;font:11px 'DM Mono',monospace}.help-grid{display:grid;grid-template-columns:280px 1fr;gap:55px}.help-nav{position:sticky;top:20px;height:max-content;border-left:2px solid var(--line);padding-left:18px}.help-nav a{display:block;padding:7px 0;color:var(--muted);text-decoration:none;font-size:14px}.help-item{padding:24px 0;border-bottom:1px solid var(--line)}.help-item h2{font-size:22px;margin:0 0 8px}.help-item p{color:var(--muted);margin:0}.contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px}.contact-item{margin:26px 0}.contact-item strong{display:block;font-size:13px;color:var(--blue);text-transform:uppercase;letter-spacing:.08em}.field{width:100%;border:1px solid #becbe0;background:#fff;border-radius:7px;padding:12px;margin:6px 0 16px;font:15px Manrope}.field:focus{outline:2px solid #9bc5ff;border-color:var(--blue)}label{font-size:13px;font-weight:700}.message{padding:13px 18px;background:#eaf7ef;color:#156337;border-radius:8px;font-size:14px;margin-bottom:18px}.legal{max-width:none}.legal>*{max-width:750px}.legal h2{font-size:22px;margin:39px 0 8px}.legal p{color:var(--muted)}
@media(max-width:800px){.navlinks{display:none}.hero{padding:60px 0 50px}.hero-grid,.feature,.contact-grid,.help-grid{grid-template-columns:1fr;gap:35px}.feature.reverse>*:first-child{order:0}.cards,.download-grid{grid-template-columns:1fr}.pricing{grid-template-columns:1fr}.section{padding:66px 0}.cta{padding:55px 0}.cta .inner,.footer-top{display:block}.footer-nav{margin-top:28px;gap:38px}.help-nav{display:none}.product-shot{margin-top:7px}.page-head{padding:55px 0}.hero p{font-size:16px}}.error{color:#b42318;font-size:12px;margin:-9px 0 12px}
.pill{display:inline-flex;align-items:center;gap:9px;margin-top:22px;border:1px solid #a7dfc6;background:#effaf4;color:#0a7a4b;border-radius:999px;padding:7px 15px;font:500 12px 'DM Mono',monospace;letter-spacing:.03em}.pill .dot{width:7px;height:7px;border-radius:50%;background:#0a7a4b}.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.proof-item{border-top:2px solid var(--blue);padding-top:20px}.proof-item h3{font-size:18px;margin:0 0 10px;letter-spacing:-.02em}.proof-item p{color:var(--muted);font-size:14px;margin:0}.proof-item code{font:12px 'DM Mono',monospace;background:var(--pale);border-radius:4px;padding:1px 5px}.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.tool{background:#fff;border:1px solid var(--line);border-radius:14px;padding:24px}.tool .icon{color:var(--blue);font-size:21px;margin-bottom:13px}.tool h3{font-size:16px;margin:0 0 8px;letter-spacing:-.01em}.tool p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.55}.tools-more{margin-top:30px}.ticks{list-style:none;padding:0;margin:18px 0 0}.ticks li{position:relative;padding-left:24px;margin:10px 0;font-size:14.5px;color:var(--muted)}.ticks li:before{content:'✓';position:absolute;left:0;font-weight:800;color:var(--blue)}.screen.wide{display:block;width:100%;height:auto;margin-top:24px}.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:16px 44px}.faq-item h3{font-size:16.5px;margin:0 0 8px;letter-spacing:-.015em}.faq-item p{color:var(--muted);font-size:14px;margin:0 0 14px}.price-card .per{font-size:16px;letter-spacing:0;font-weight:500;color:var(--muted)}.featured .per{color:#9db4d8}.fineprint{display:block;margin-top:16px;font-size:12px;color:#77839a}.fineprint.light{color:#9db4d8}.help-item .screen{margin-bottom:4px}
@media(max-width:1000px){.tools{grid-template-columns:repeat(2,1fr)}}
@media(max-width:800px){.proof,.tools,.faq{grid-template-columns:1fr;gap:26px}.proof-item{padding-top:16px}}
.download-card{display:flex;flex-direction:column}.download-card .button{align-self:flex-start}.download-card.pending{background:#fbfcfe;border-style:dashed}.download-card.pending h2,.download-card.pending p{color:#8792a8}.button.disabled{pointer-events:none;opacity:.5}.download-card .hash{margin-top:16px;border-top:1px solid var(--line);padding-top:12px}.download-card .hash span{display:block;font:500 10px 'DM Mono',monospace;letter-spacing:.1em;color:#9aa5ba;text-transform:uppercase;margin-bottom:5px}.download-card .hash code{font:11px/1.5 'DM Mono',monospace;color:#59657d;word-break:break-all}.download-card .hash .hash-note{margin:0;font:11px/1.5 'DM Mono',monospace;color:#9aa5ba}.dl-note{color:var(--muted);font-size:13px;margin-top:30px}.dl-aside{background:var(--pale);border:1px solid #d5e4f8;border-radius:15px;padding:32px}.dl-aside h3{margin:0;font-size:19px;letter-spacing:-.02em}.dl-aside .ticks{margin-bottom:26px}
.consent{position:fixed;left:20px;bottom:20px;z-index:50;width:min(400px,calc(100% - 40px));background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;box-shadow:0 18px 40px #0a143426}.consent[hidden]{display:none}.consent p{margin:0 0 16px;font-size:13.5px;line-height:1.6;color:var(--muted)}.consent p strong{color:var(--ink)}.consent-actions{display:flex;gap:9px}.consent-actions .button{padding:10px 16px;font-size:13px}
@media(max-width:800px){.consent{left:12px;right:12px;bottom:12px;width:auto}}
.feedback-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:70px;align-items:start}.feedback-aside{position:sticky;top:28px}.feedback-aside .card h3{margin:0;font-size:19px;letter-spacing:-.02em}.feedback-aside .ticks li{font-size:13.5px}.feedback-aside .fineprint{margin-top:20px}.qgroup{border:0;padding:0;margin:0 0 42px;min-width:0}.qgroup legend{display:block;width:100%;padding:0 0 6px;border-bottom:2px solid var(--blue);margin-bottom:22px;font:700 12px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}.qgroup-note{margin:-12px 0 22px;font-size:13.5px;line-height:1.6;color:var(--muted)}.q{margin-bottom:22px}.q>label{display:block;line-height:1.5}.optional{margin-left:7px;font:500 11px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:#9aa5ba}.qhelp{margin:5px 0 0;font-size:13px;line-height:1.55;color:var(--muted)}.qerror{margin:6px 0 0;font-size:13px;font-weight:600;color:#b42318}.q .field{margin-top:8px}.choices{display:flex;flex-direction:column;gap:8px;margin:9px 0 0}.choice{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1px solid #becbe0;border-radius:7px;background:#fff;font:500 14.5px Manrope;color:var(--ink);cursor:pointer}.choice:hover{border-color:var(--blue);background:var(--pale)}.choice:has(input:checked){border-color:var(--blue);background:var(--pale);box-shadow:inset 0 0 0 1px var(--blue)}.choice input{accent-color:var(--blue);margin:0;flex:none}.choices.scale{flex-direction:row;flex-wrap:wrap;gap:7px}.choices.scale .choice{flex:1 1 0;flex-direction:column;gap:6px;min-width:44px;padding:10px 6px;justify-content:center;text-align:center}.scale-ends{display:flex;justify-content:space-between;gap:16px;margin:8px 0 0;font-size:12px;color:#9aa5ba}.message.error{background:#fdecea;color:#b42318}.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
@media(max-width:1000px){.feedback-grid{grid-template-columns:1fr;gap:36px}.feedback-aside{position:static}}
@media(max-width:800px){.choices.scale .choice{min-width:38px;font-size:13px}.scale-ends{font-size:11px}}

/* ── Depth layer ─────────────────────────────────────────────────────────────
   Appended rather than woven in, so the original flat system above still reads
   as one piece and this can be lifted out whole. Everything here is additive:
   elevation, gradient fills, hover motion and focus states. No layout changes,
   because the grids above are already correct at every width. */
:root{--sh-1:0 1px 2px #0a14340f,0 2px 6px #0a14340a;--sh-2:0 2px 4px #0a14340d,0 14px 30px -10px #0a143424;--sh-3:0 4px 10px #0a14340f,0 30px 60px -14px #12224a33;--ring:0 0 0 4px #2563eb26;--grad:linear-gradient(135deg,#2563eb,#57c9ff)}
body{overflow-x:clip;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:#2563eb24}
[id]{scroll-margin-top:96px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}

/* Sticky translucent header. The bar is a full-bleed pseudo-element because the
   header element is itself the .wrap, so its own background would stop at 1150px. */
.nav{position:sticky;top:0;z-index:40}
.nav:before{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;z-index:-1;background:#ffffffd9;backdrop-filter:blur(14px) saturate(1.7);-webkit-backdrop-filter:blur(14px) saturate(1.7);border-bottom:1px solid #e6edf8}
/* Scoped off .button: .navlinks a beats .button on specificity, so an unscoped
   rule here silently strips the call-to-action's padding and colour. */
.navlinks a:not(.button){position:relative;padding:6px 0;transition:color .16s}
.navlinks a:not(.button):after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;border-radius:2px;background:var(--grad);transition:right .22s ease}
.navlinks a:not(.button):hover{color:var(--blue)}
.navlinks a:not(.button):hover:after{right:0}
.navlinks a.button{color:#fff}
.help-nav{top:104px}
.feedback-aside{top:104px}

/* Buttons: a real surface rather than a flat rectangle. */
.button{background:linear-gradient(180deg,#3d86f7,#2563eb);box-shadow:0 1px 2px #0a143429,0 8px 18px -8px #2563eb94;transition:transform .18s,box-shadow .18s,filter .18s}
.button:hover{background:linear-gradient(180deg,#3d86f7,#2563eb);filter:saturate(1.06) brightness(1.04);transform:translateY(-1px);box-shadow:0 2px 5px #0a14342e,0 16px 30px -10px #2563ebad}
.button:active{transform:translateY(0);box-shadow:0 1px 2px #0a14342e}
.button:focus-visible{outline:0;box-shadow:var(--ring),0 8px 18px -8px #2563eb94}
.button.ghost{background:#fff;border:1px solid #cfdcef;box-shadow:var(--sh-1)}
.button.ghost:hover{filter:none;background:#fff;border-color:var(--blue);color:var(--blue);box-shadow:var(--sh-2)}
.button.white{background:#fff;box-shadow:0 2px 6px #0000002e,0 14px 30px -12px #00000059}
.button.white:hover{background:#fff;filter:brightness(1)}

/* Eyebrows get a rule, so a section opens with a mark rather than just small text. */
.eyebrow{display:inline-flex;align-items:center;gap:11px}
.eyebrow:before{content:'';width:24px;height:1px;background:currentColor;opacity:.45}

/* Hero: layered light instead of one flat wash, with a faint grid that fades out. */
.hero{position:relative;background:radial-gradient(1100px 520px at 8% -15%,#dceafe 0%,#dceafe00 62%),radial-gradient(900px 460px at 102% -5%,#dff1ff 0%,#dff1ff00 58%),linear-gradient(180deg,#fff 0%,#f5faff 100%)}
.hero:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#2563eb0f 1px,transparent 1px),linear-gradient(90deg,#2563eb0f 1px,transparent 1px);background-size:68px 68px;-webkit-mask-image:radial-gradient(78% 62% at 46% 0%,#000 0%,transparent 72%);mask-image:radial-gradient(78% 62% at 46% 0%,#000 0%,transparent 72%);pointer-events:none}
.hero>.wrap{position:relative;z-index:1}
.hero h1{font-size:clamp(40px,5.3vw,70px)}
.product-shot{border-color:#d3e2f7;box-shadow:0 2px 6px #12224a14,0 40px 70px -22px #12224a4d;filter:none}
.pill{background:linear-gradient(180deg,#f2fdf7,#e7f8ef);box-shadow:0 1px 2px #0a7a4b14}
.pill .dot{box-shadow:0 0 0 3px #0a7a4b1f}

.ticker{background:linear-gradient(90deg,#060d22 0%,#12275a 50%,#060d22 100%)}

/* Section rhythm: the tinted bands get a gradient and hairlines so the page has
   edges to read rather than two flat colours meeting. */
.section.pale{background:linear-gradient(180deg,#f8fbff 0%,#e9f3ff 100%);border-top:1px solid #e3edfa;border-bottom:1px solid #e3edfa}
.section-title h2,.feature h2,.cta h2{letter-spacing:-.045em}

/* Cards lift on hover and sit on a surface rather than a hairline outline. */
.card,.tool,.price-card,.download-card,.dl-aside{box-shadow:var(--sh-1);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.card:hover,.tool:hover,.download-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#c8daf4}
.download-card.pending:hover{transform:none;box-shadow:var(--sh-1);border-color:var(--line)}
/* The glyph becomes a chip — the single biggest change to how the tool grid reads. */
.tool .icon,.card .icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(140deg,#f0f6ff,#d9e8ff);border:1px solid #cddffa;box-shadow:inset 0 1px 0 #fff,0 1px 2px #12224a0f;font-size:20px;line-height:1}
.proof-item{border-top:0;position:relative;padding-top:26px}
.proof-item:before{content:'';position:absolute;top:0;left:0;width:48px;height:3px;border-radius:3px;background:var(--grad)}
.faq-item{padding-left:18px;border-left:2px solid #dbe7f9}
.faq-item h3{letter-spacing:-.02em}
.screen{box-shadow:0 2px 6px #12224a14,0 34px 60px -20px #12224a45;border-color:#d3e2f7}

/* The featured price card earns its emphasis with light, not just a dark fill. */
.price-card.featured{position:relative;overflow:hidden;background:linear-gradient(155deg,#12224f 0%,#07102a 62%);box-shadow:var(--sh-3)}
.price-card.featured:before{content:'';position:absolute;top:-45%;right:-28%;width:78%;height:86%;background:radial-gradient(circle,#2f6bf133 0%,transparent 68%);pointer-events:none}
.price-card.featured>*{position:relative}

.cta{position:relative;overflow:hidden;background:linear-gradient(150deg,#0d1c44 0%,#07102a 58%)}
.cta:before{content:'';position:absolute;top:-60%;left:58%;width:60%;height:200%;background:radial-gradient(circle,#2f6bf12e 0%,transparent 62%);pointer-events:none}
.cta .inner{position:relative}

.footer{background:linear-gradient(180deg,#08102a 0%,#050b1c 40%)}
.footer-nav a{transition:color .16s}
.footer-nav a:hover{color:#fff}
.social{text-decoration:none;transition:border-color .18s,background .18s,color .18s}
.social svg{width:15px;height:15px;fill:currentColor}
/* Instagram is drawn as strokes, not a filled path: the solid glyph's lens and corner dot
   merge into the frame at this size and the mark stops being recognisable. */
.social svg.line{fill:none;stroke:currentColor;stroke-width:1.9}
.social svg.line .dot{fill:currentColor;stroke:none}
.social:hover{border-color:#7aa8ff;background:#ffffff12;color:#9fd8ff}
.social:focus-visible{outline:0;border-color:#7aa8ff;box-shadow:0 0 0 3px #2563eb4d}

/* Forms: a focus ring you can see, and inputs that respond to the pointer. */
.field{transition:border-color .16s,box-shadow .16s,background .16s}
.field:hover{border-color:#a9bdd8}
.field:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
.choice{transition:border-color .16s,background .16s,box-shadow .16s,transform .12s}
.choice:hover{box-shadow:var(--sh-1)}
.choice:has(input:checked){box-shadow:inset 0 0 0 1px var(--blue),0 2px 8px -2px #2563eb45}
.choice:has(input:focus-visible){box-shadow:var(--ring)}
.qgroup legend{border-bottom:0;position:relative;padding-bottom:9px}
.qgroup legend:after{content:'';position:absolute;left:0;bottom:0;width:100%;height:2px;background:linear-gradient(90deg,var(--blue) 0%,#57c9ff 22%,#dbe7f9 22%)}
.message{border:1px solid #bfe6ce;box-shadow:var(--sh-1)}
.message.error{border-color:#f5c6c2}
.feedback-aside .card{box-shadow:var(--sh-2)}
.dl-aside{background:linear-gradient(180deg,#f4f9ff,#e8f2ff)}
.page-head{background:radial-gradient(900px 420px at 6% -30%,#dceafe 0%,#dceafe00 60%),linear-gradient(180deg,#f7fbff,#eaf3ff);border-bottom:1px solid #e3edfa}

/* The purchase page: numbered steps, and the licences already issued. Appended as its own
   layer rather than woven into the rules above, so it can be lifted out whole. */
.steps{max-width:820px;display:flex;flex-direction:column;gap:8px}
.step{display:grid;grid-template-columns:52px 1fr;gap:22px;padding:30px 0;border-top:1px solid var(--line)}
.step:first-child{border-top:0;padding-top:0}
.step-n{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font:800 16px Manrope;box-shadow:var(--sh-1)}
.step h2{font-size:23px;letter-spacing:-.03em;margin:2px 0 10px}
.step p{color:var(--muted);margin:0 0 14px;max-width:560px}
.step-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px}
.settings-row{background:var(--navy);color:#dce8ff;border-radius:9px;padding:15px 18px;margin:0 0 14px;overflow-x:auto;font:500 13px 'DM Mono',monospace;letter-spacing:.02em}
.seat-list{display:flex;flex-direction:column;gap:12px;max-width:820px}
.seat{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px 24px}
.seat-new{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.seat h3{margin:0 0 5px;font:700 16px 'DM Mono',monospace;letter-spacing:.03em}
.seat p{margin:0;font-size:14px;color:var(--muted)}
.seat code{font:500 13px 'DM Mono',monospace;color:var(--ink)}
@media(max-width:800px){.step{grid-template-columns:1fr;gap:14px}.seat{align-items:flex-start}}
.next-step{display:flex;align-items:center;justify-content:space-between;gap:26px;flex-wrap:wrap;margin:34px 0 18px;padding:28px 32px;border:1px solid #cfe0f6;border-radius:15px;background:linear-gradient(180deg,#f4f9ff,#e8f2ff)}
.next-step h2{margin:0 0 7px;font-size:21px;letter-spacing:-.03em}
.next-step p{margin:0;max-width:560px;font-size:14px;color:var(--muted)}

/* Download cards: the platform mark and its name, above the build's own detail. Appended as
   its own layer, like the depth rules above, so it lifts out whole. */
.os-head{display:flex;align-items:center;gap:11px;margin-bottom:15px}
.os-mark{width:32px;height:32px;flex:none;color:var(--ink);fill:currentColor}
.os-name{font:700 12px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
/* One weight for all three. The page cannot know which machine the reader is on, so a mark
   that is tinted differently from its neighbours reads as the recommended download and sends
   somebody to the wrong build. Blue is the hover state, and applies to whichever card the
   reader is actually considering. */
.os-windows .os-mark,.os-macos .os-mark,.os-linux .os-mark{color:var(--ink)}
.download-card:hover .os-mark{color:var(--blue)}
.download-card.pending .os-mark,.download-card.pending .os-name{color:#a7b2c6}
/* Tux keeps the shape of the real mark but drops its orange: the brief is monochrome
   or blue, and the cyan already in the palette separates beak and feet from a navy
   body without introducing a colour the site uses nowhere else. */
.os-mark .tux-light{fill:#fff}
.os-mark .tux-accent{fill:var(--cyan)}
.download-card.pending .os-mark .tux-light{fill:#fbfcfe}
.download-card.pending .os-mark .tux-accent{fill:#c4d0e2}
@media(prefers-reduced-motion:reduce){.download-card,.dl-aside{transition:none}.download-card:hover{transform:none}}
.seat-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.seat-actions .resend{margin:0}
/* A button that reads as a link: resending is the quiet recovery path beside Download, not a
   second thing of equal weight. It has to be a form — it sends mail, so it cannot be a GET. */
.linkish{background:0;border:0;padding:0;font:600 13.5px Manrope;color:var(--blue);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.linkish:hover{color:#174ec8}
/* Screenshots inside a step. Bordered and inset rather than bled to the edge, so a picture
   of the site does not read as part of the page it is sitting on. */
.shot{margin:0 0 20px;max-width:640px}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:11px;background:#fff;box-shadow:var(--sh-1)}
.shot figcaption{margin-top:9px;font-size:12.5px;line-height:1.55;color:#77839a}
.step .settings-row{max-width:560px}
/* A cropped row from the app is wider than it is tall; letting it sit at the narrower
   .shot width would shrink the text in it to nothing. */
.shot.wide{max-width:100%}

/* The jurisdiction tables on /global. A table rather than cards because the whole point of
   that page is the comparison down a column: what travels, what does not. On a phone the
   grid collapses to a scroller instead of wrapping — three words per line in a cell about
   retention statutes is worse than a horizontal swipe. */
.matrix{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
.matrix table{width:100%;min-width:640px;border-collapse:collapse;font-size:14px}
.matrix th{text-align:left;padding:15px 20px;background:var(--pale);border-bottom:1px solid var(--line);font:700 11px 'DM Mono',monospace;letter-spacing:.11em;text-transform:uppercase;color:var(--blue)}
.matrix td{padding:17px 20px;border-bottom:1px solid var(--line);color:var(--muted);vertical-align:top;line-height:1.6}
.matrix tr:last-child td{border-bottom:0}
.matrix td strong{color:var(--ink);font-size:14.5px}
.matrix .sub{display:block;margin-top:5px;font-size:12.5px;line-height:1.5;color:#8792a8}
.matrix td .sub{display:inline}
/* The verdict reads before the sentence explaining it, so it is a chip on its own line. */
.matrix .tag{display:block;width:max-content;margin-bottom:7px;border-radius:999px;padding:3px 11px;font:700 11px 'DM Mono',monospace;letter-spacing:.05em;text-transform:uppercase}
.matrix .tag.ok{background:#effaf4;color:#0a7a4b;border:1px solid #a7dfc6}
.matrix .tag.part{background:#fff7e8;color:#8a5a08;border:1px solid #f0d9a8}
/* A card used as the second column of a .feature row, where the first column is prose. */
.card.quiet{background:#fff;padding:30px}
.card.quiet h3{font-size:19px;letter-spacing:-.02em;margin:0 0 12px}
.card.quiet p{font-size:14px;color:var(--muted);margin:0}
.card.quiet .ticks li{font-size:13.5px}
.cards .card .ticks{margin-top:14px}
.cards .card p+p{margin-top:12px}
/* Below the site's breakpoint the tables stop being tables. A horizontal scroller is only
   discoverable if you already suspect it is there, and the first column is a label anyway —
   so each row becomes a labelled block. The third column of the standards table loses its
   header along with the rest, which is what its data-label is for. */
@media(max-width:800px){
  .matrix{overflow-x:visible}
  .matrix table{min-width:0}
  .matrix thead{display:none}
  .matrix tr{display:block;border-bottom:1px solid var(--line);padding:6px 0}
  .matrix tr:last-child{border-bottom:0}
  .matrix td{display:block;border-bottom:0;padding:8px 18px}
  .matrix td:first-child{padding-bottom:2px}
  .matrix td[data-label]:before{content:attr(data-label);display:block;margin-bottom:3px;font:700 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#9aa5ba}
  .matrix .tag{margin-bottom:5px}
}

/* The currency toggle, and the three-tier pricing grid it sits above. */
.head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap}
.ccy{display:inline-flex;border:1px solid #bccbe3;background:#fff;border-radius:9px;padding:3px;margin-top:6px}
.ccy-opt{padding:8px 15px;border-radius:7px;font:700 13px 'DM Mono',monospace;letter-spacing:.04em;color:var(--muted);text-decoration:none}
.ccy-opt.on{background:var(--blue);color:#fff}
.ccy-opt:not(.on):hover{background:var(--pale);color:var(--ink)}
/* Three tiers rather than two. The .pricing rule above is a 2-column grid and stays that
   way for anything still using it. */
.pricing.three{grid-template-columns:repeat(3,1fr)}
.price-card .seatline{margin:-8px 0 14px;font:500 12.5px 'DM Mono',monospace;letter-spacing:.02em;color:#77839a}
.featured .seatline{color:#9db4d8}
/* The GST block on the checkout form: one question, and three fields that appear with it. */
.taxgroup{margin:28px 0 22px;padding:20px;border:1px solid var(--line);border-radius:12px;background:#fbfcfe}
.taxgroup legend{margin-bottom:16px}
.taxgroup .choice{margin-bottom:0}
.taxfields{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.taxfields[hidden]{display:none}
@media(max-width:1000px){.pricing.three{grid-template-columns:1fr}}

/* height:auto is not optional on any of the rules above that set a width.
   Giving an <img> real width and height attributes is what reserves its space and stops the
   page shifting as it loads — but the attributes also become the rendered size. With CSS
   forcing width to 100% and nothing overriding height, the browser keeps the attribute's
   pixel height and the picture is squashed vertically on every screen narrower than the
   file. `.shot img` had height:auto all along, which is why the guide screenshots on /start/
   were the only ones that looked right when the attributes were added. */

/* Breadcrumb on a feature page. The pages sit one level down from /features/ and a reader
   arriving from a search result has no other way to tell where they are. */
.crumbs{margin:0 0 18px;font:500 12px 'DM Mono',monospace;letter-spacing:.05em;color:#8792a8}
.crumbs a{color:var(--blue);text-decoration:none}
.crumbs a:hover{text-decoration:underline}
.crumbs span{margin:0 6px}
.cards .card .eyebrow{margin-bottom:10px}
/* .card.quiet p{margin:0} is declared after .fineprint, so it won out and consecutive
   paragraphs inside a quiet card collided. Restore the gap without touching either rule. */
.card.quiet p + p,
.card.quiet p + .fineprint{margin-top:12px}

/* Long-form reading column for a white paper. Narrower than .wrap: 1150px of 10pt prose is
   unreadable, and a paper is the one thing on this site somebody reads end to end. */
/* .wrap centres a 1150px box, so capping the box narrows *and* re-centres it: the h1 in
   the page head stayed at the wrap's left edge while the prose under it moved 200px in.
   Cap the children instead, and the reading column starts where the heading starts. */
.paper{max-width:none}
.paper>*{max-width:720px}
.paper .lede{font-size:17.5px;line-height:1.62;color:var(--ink);margin:0 0 16px}
.paper h2{font-size:25px;line-height:1.2;letter-spacing:-.03em;margin:46px 0 14px}
.paper h3{font-size:15.5px;letter-spacing:-.01em;margin:28px 0 8px;color:var(--blue)}
.paper p{color:var(--muted);font-size:16px;line-height:1.7;margin:0 0 15px}
.paper .ticks{margin:6px 0 20px}
.paper .ticks li{font-size:15.5px;line-height:1.62}
.paper .matrix{margin:8px 0 24px}
.paper code{font:13px 'DM Mono',monospace;background:var(--pale);border-radius:4px;padding:1px 5px}
/* A caveat has to read as one, not as another paragraph the eye slides over. */
.paper .paper-note{border-left:3px solid var(--blue);background:var(--pale);border-radius:0 10px 10px 0;
  padding:15px 20px;margin:20px 0 24px;font-size:15px;line-height:1.62;color:var(--ink)}

/* The footer, grouped. It had reached fourteen links in two unlabelled columns, added in
   the order the pages were built, which is an index rather than navigation. */
.footer-nav{gap:46px;flex-wrap:wrap}
.footer-nav>div{min-width:126px}
.footer-nav h4{margin:0 0 12px;font:700 10.5px 'DM Mono',monospace;letter-spacing:.12em;
  text-transform:uppercase;color:#71809d}
.footer-nav a{margin:6px 0}
@media(max-width:800px){
  /* Two groups per row rather than four cramped ones, and enough vertical gap that the
     headings still read as headings. */
  .footer-nav{gap:26px 44px}
  .footer-nav>div{min-width:140px}
}
/* "and 79 more" under a capped list on a security-pack page. Set apart from the list so it
   reads as an editorial note about the page rather than as a final item. */
.more-note{margin:-8px 0 22px;padding-left:24px;font-size:13.5px;color:#8792a8}
/* Long-form documents use a neutral bullet, not the tick .ticks draws. A tick reads as
   approval, which is wrong on a list of banned regex patterns, wrong on a list of IPC
   channel names, and actively misleading on "what this feature will not do". */
.doclist{list-style:none;padding:0;margin:6px 0 20px}
.doclist li{position:relative;padding-left:20px;margin:9px 0;font-size:15.5px;line-height:1.62;color:var(--muted)}
.doclist li:before{content:'';position:absolute;left:2px;top:10px;width:5px;height:5px;
  border-radius:50%;background:#b9c6db}
.paper .doclist li{font-size:15.5px}

/* Release notes. The artefact rows are a list rather than a table: at 500px a six-column
   table either scrolls sideways or sets a 64-character hash in 8px type, and the hash is the
   one thing on the page somebody actually copies. */
.release-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-bottom:34px}
.release-facts>div{background:#fff;padding:18px 20px}
.release-facts strong{display:block;font:500 10.5px 'DM Mono',monospace;letter-spacing:.11em;
  text-transform:uppercase;color:#9aa5ba;margin-bottom:7px}
.release-facts span{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.release-facts code{font:600 14px 'DM Mono',monospace;color:var(--blue)}
.release-lede{font-size:17px;line-height:1.62;color:var(--muted);max-width:70ch;margin:0 0 16px}
.release-changes{max-width:70ch;margin-top:24px}
.release-table{display:flex;flex-direction:column;gap:14px}
.release-row{display:grid;grid-template-columns:1.15fr 1.35fr;gap:10px 34px;background:#fff;
  border:1px solid var(--line);border-radius:14px;padding:22px 24px;box-shadow:var(--sh-1)}
.release-row h3{margin:0;font-size:17px;letter-spacing:-.02em}
.release-row .filename{margin:7px 0 0}
.release-row .filename code{font:12.5px 'DM Mono',monospace;color:var(--muted);word-break:break-all}
.release-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 26px;align-content:start}
.release-meta strong,.release-hash strong{display:block;font:500 10.5px 'DM Mono',monospace;
  letter-spacing:.11em;text-transform:uppercase;color:#9aa5ba}
.release-meta span{font-size:13.5px;color:var(--ink)}
.release-hash{grid-column:1/-1;border-top:1px solid var(--line);padding-top:13px;margin-top:4px}
.release-hash code{display:block;margin-top:5px;font:12px/1.6 'DM Mono',monospace;
  color:var(--muted);word-break:break-all}
.release-history{display:flex;flex-direction:column;gap:16px;max-width:800px}
.release-past{display:grid;grid-template-columns:96px 1fr;gap:24px;padding-top:20px;
  border-top:1px solid var(--line)}
.release-past .version{font:800 21px 'DM Mono',monospace;letter-spacing:-.02em;color:var(--blue)}
.release-past h3{margin:0 0 8px;font-size:17px;letter-spacing:-.02em}
.release-past p{margin:0 0 8px;color:var(--muted);font-size:14.5px}
.release-past small{color:#9aa5ba;font:11px 'DM Mono',monospace;letter-spacing:.06em}
@media (max-width:800px){
  .release-facts{grid-template-columns:repeat(2,1fr)}
  .release-row{grid-template-columns:1fr;gap:14px}
  .release-past{grid-template-columns:1fr;gap:8px}
}

/* The white paper index. The cover is the point: what is being offered is a document that
   gets forwarded, so the card shows the object rather than an illustration of the topic. */
.paper-list{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.paper-card{display:grid;grid-template-columns:152px 1fr;gap:26px;align-items:start;
  border:1px solid var(--line);border-radius:15px;padding:22px;background:#fff;
  box-shadow:var(--sh-1);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.paper-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#c8daf4}
.paper-cover{display:flex;flex-direction:column;aspect-ratio:1/1.414;padding:16px 15px;
  border-radius:9px;background:linear-gradient(158deg,#12224f 0%,#07102a 68%);
  color:#fff;text-decoration:none;box-shadow:var(--sh-2);overflow:hidden}
.paper-cover img{width:24px;height:24px;filter:brightness(0) invert(1);opacity:.92}
.paper-cover .no{margin-top:14px;font:500 8.5px 'DM Mono',monospace;letter-spacing:.16em;
  text-transform:uppercase;color:#8fb4ff}
.paper-cover .cover-title{margin-top:7px;font-size:11.5px;line-height:1.28;font-weight:800;
  letter-spacing:-.015em;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden}
.paper-cover .cover-foot{margin-top:auto;padding-top:9px;border-top:1px solid #ffffff26;
  font:500 8.5px 'DM Mono',monospace;letter-spacing:.14em;color:#9db4d8}
.paper-body{display:flex;flex-direction:column;height:100%}
.paper-body h3{margin:9px 0 8px;font-size:19px;line-height:1.25;letter-spacing:-.03em}
.paper-body h3 a{color:var(--ink);text-decoration:none}
.paper-body h3 a:hover{color:var(--blue)}
.paper-body p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
.paper-body .fineprint{display:block;margin-top:12px}
.paper-actions{display:flex;align-items:center;gap:14px;
  margin:auto 0 0!important;padding-top:16px}
.paper-actions .read{font-size:14px;font-weight:700;color:var(--blue);text-decoration:none}
.paper-actions .read span{transition:transform .2s ease;display:inline-block}
.paper-card:hover .paper-actions .read span{transform:translateX(3px)}
.paper-actions .pdf{font:500 10.5px 'DM Mono',monospace;letter-spacing:.11em;color:var(--muted);
  text-decoration:none;border:1px solid var(--line);border-radius:5px;padding:4px 8px}
.paper-actions .pdf:hover{border-color:var(--blue);color:var(--blue)}
@media (max-width:1000px){.paper-list{grid-template-columns:1fr}}
@media (max-width:560px){
  /* The cover becomes a series band. It carries the number rather than the title, because
     stacked it sits directly above the heading and was saying the same thing twice. */
  .paper-card{grid-template-columns:1fr;gap:16px}
  .paper-cover{aspect-ratio:auto;flex-direction:row;align-items:center;gap:12px;
    padding:11px 14px;border-radius:8px}
  .paper-cover .no{margin-top:0}
  .paper-cover .cover-foot{margin:0 0 0 auto;padding:0;border:0}
  .paper-cover .cover-title{display:none}
  .paper-cover img{width:19px;height:19px}
  .paper-body h3{margin-top:6px}
}

/* A flow block. The same two tones the forms use for a failure and a pass, because the point
   of the colour is which box is the bad one — not that the figure has colour in it. */
.paper .flow{margin:22px 0 26px;max-width:720px}
/* One row, always: a sequence that wraps stops reading as a sequence, and the wrapped item
   inherits an arrow pointing at it from the end of the line above. grid-auto-flow keeps the
   steps in a single track whatever the count, and the vertical stack takes over on narrow. */
.paper .flow ol{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:20px;
  list-style:none;margin:0;padding:0}
.paper .flow li{position:relative;padding:12px 13px;border:1px solid var(--line);
  border-radius:11px;background:var(--pale)}
.paper .flow li+li:before{content:'→';position:absolute;left:-16px;top:50%;
  transform:translateY(-50%);color:#9aa5ba;font-size:12px;line-height:1}
.paper .flow li b{display:block;font-size:13.5px;line-height:1.3;letter-spacing:-.015em;
  color:var(--ink)}
.paper .flow li span{display:block;margin-top:5px;font-size:12px;line-height:1.45;
  color:var(--muted)}
.paper .flow li.risk{background:#fdecea;border-color:#f0c2bc}
.paper .flow li.risk b{color:#8f1d13}
.paper .flow li.ok{background:#eaf7ef;border-color:#b6e0c6}
.paper .flow li.ok b{color:#11532f}
.paper .flow figcaption{margin-top:13px;font-size:13px;line-height:1.6;color:var(--muted)}
@media (max-width:700px){
  .paper .flow ol{grid-auto-flow:row;gap:22px}
  .paper .flow li+li:before{left:50%;top:-17px;transform:translateX(-50%) rotate(90deg)}
}

/* Product Hunt, in the footer. Sized to sit under the social row without competing with it,
   and in their coral rather than ours so it reads as somewhere else's mark. */
.ph-badge{display:inline-flex;align-items:center;gap:9px;margin-top:16px;padding:8px 14px;
  border:1px solid #47536d;border-radius:999px;color:#dbe6fa;text-decoration:none;
  font-size:12.5px;line-height:1;transition:border-color .2s ease,color .2s ease}
.ph-badge strong{font-weight:700;color:#fff}
.ph-dot{width:8px;height:8px;border-radius:50%;background:#ff6154;flex:none;
  box-shadow:0 0 0 3px #ff615426}
.ph-badge:hover{border-color:#ff6154;color:#fff}
.ph-badge:focus-visible{outline:0;border-color:#ff6154;box-shadow:0 0 0 3px #ff615440}
/* The pale-ground variant, for the hero and the two page heads. */
.ph-badge.light{border-color:#cfdcef;background:#fff;color:var(--muted);box-shadow:var(--sh-1)}
.ph-badge.light strong{color:var(--ink)}
.ph-badge.light:hover{border-color:#ff6154;color:var(--ink)}
.hero .ph-badge,.page-head .ph-badge{margin-top:18px}
/* The hero column outgrew the product shot beside it when the Product Hunt badge landed,
   which pushed the ticker off the first screen. The h1 gives up eight points here only —
   the page heads share that rule and are fine at 66 — and the pill and the badge share a
   row, since both are chips saying something small. */
.hero h1{font-size:clamp(36px,4.4vw,58px)}
.hero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:11px 12px;margin-top:22px}
.hero-meta .pill,.hero .hero-meta .ph-badge{margin-top:0}

/* ── Trust layer ─────────────────────────────────────────────────────────────
   The pass aimed at the reader who holds other people's records: an audit partner, a
   practice's IT lead, a finance controller. Appended whole like the layers above. What it
   changes: line icons in place of Unicode glyphs, a menu on phones (there was none), the
   audience and supplier-review sections on the home page, and headings set less tightly —
   at -.055em Manrope's words began to touch, which reads as a consumer landing page. */
a:focus-visible,summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:5px}
.hero h1,.page-head h1{letter-spacing:-.04em}
.section-title h2,.feature h2,.cta h2,.review h2{letter-spacing:-.035em}
.section-title h2{max-width:760px}

/* Icons. The chip rule above set a font-size for a glyph; the SVG takes its size here. */
.ico{display:block;width:22px;height:22px;flex:none}
.tool .icon .ico,.card .icon .ico,.aud .icon .ico{width:22px;height:22px}
.tool .icon,.card .icon,.aud .icon{color:var(--blue)}

/* Hero: the product shot gets the larger column, since it is the evidence the product is
   real, and a status chip sits on its corner the way the app's own status bar reads. */
.hero-grid{grid-template-columns:.92fr 1.08fr;gap:56px}
.hero-visual{position:relative}
.hero-badge{position:absolute;left:-18px;bottom:-16px;display:inline-flex;align-items:center;gap:9px;
  padding:10px 15px;border-radius:999px;background:#fff;border:1px solid #cfe6da;
  font:500 12px 'DM Mono',monospace;letter-spacing:.02em;color:#0a7a4b;
  box-shadow:0 2px 6px #12224a14,0 18px 34px -14px #12224a40}
.hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#0a7a4b;box-shadow:0 0 0 3px #0a7a4b1f}
.hero-proof{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:26px 0 0;padding:0}
.hero-proof li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--ink)}
.hero-proof .ico{width:18px;height:18px;color:var(--blue)}
.hero .hero-meta{margin-top:20px}
.hero .trust{margin:0}

/* Who it is for. Four columns of equal weight: none of these readers is the main one. */
.audience{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.aud{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;box-shadow:var(--sh-1);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.aud:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:#c8daf4}
.aud .icon{width:46px;height:46px;display:grid;place-items:center;border-radius:13px;margin-bottom:16px;
  background:linear-gradient(140deg,#f0f6ff,#d9e8ff);border:1px solid #cddffa;box-shadow:inset 0 1px 0 #fff}
.aud h3{font-size:17px;letter-spacing:-.02em;margin:0 0 9px}
.aud p{font-size:14px;color:var(--muted);margin:0 0 18px}
.aud a{margin-top:auto;font-size:14px;font-weight:700;color:var(--blue);text-decoration:none}
.aud a span{display:inline-block;transition:transform .2s ease}
.aud:hover a span{transform:translateX(3px)}

/* The supplier-review band: dark, so it reads as a different audience being addressed. */
.review{position:relative;overflow:hidden;padding:96px 0;color:#fff;
  background:linear-gradient(150deg,#0d1c44 0%,#07102a 62%)}
.review:before{content:'';position:absolute;top:-40%;right:-10%;width:60%;height:160%;
  background:radial-gradient(circle,#2f6bf126 0%,transparent 62%);pointer-events:none}
.review-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.review .eyebrow{color:#78d6ff}
.review h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12;margin:0 0 18px}
.review p{color:#b9c8e6;max-width:500px;margin:0 0 28px}
.review-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.review-list a{display:flex;gap:14px;align-items:flex-start;height:100%;padding:18px;border-radius:12px;
  background:#ffffff0a;border:1px solid #ffffff1f;color:#fff;text-decoration:none;
  transition:background .18s,border-color .18s}
.review-list a:hover{background:#ffffff14;border-color:#7aa8ff80}
.review-list .ico{width:20px;height:20px;color:#78d6ff;margin-top:2px}
.review-list strong{display:block;font-size:14.5px;letter-spacing:-.01em}
.review-list small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:#9db4d8}
.button.outline-light{background:transparent;border:1px solid #ffffff4d;color:#fff;box-shadow:none}
.button.outline-light:hover{background:#ffffff14;border-color:#ffffffb3;filter:none}

/* The closing call. Its button used to wrap to two lines, squeezed by a long heading. */
.cta .inner>div:first-child{flex:1;min-width:0}
.cta-actions{display:flex;flex-direction:column;gap:10px;flex:none}
.cta .button{white-space:nowrap}

/* The phone menu. Hidden on desktop, where .navlinks does the job. */
.menu{display:none;position:relative}
.menu summary{list-style:none;display:grid;place-content:center;gap:4px;width:44px;height:44px;
  border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;box-shadow:var(--sh-1)}
.menu summary::-webkit-details-marker{display:none}
.menu summary span{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.menu[open] summary span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu[open] summary span:nth-child(2){opacity:0}
.menu[open] summary span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.menu-panel{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,calc(100vw - 32px));
  display:flex;flex-direction:column;padding:10px;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--sh-3)}
.menu-panel a{padding:12px 12px;border-radius:8px;font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.menu-panel a:not(.button):hover{background:var(--pale);color:var(--blue)}
.menu-panel .button{margin-top:8px;color:#fff}

@media(max-width:1000px){
  .audience{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr;gap:40px}
}
@media(max-width:800px){
  .menu{display:block}
  .hero-grid{grid-template-columns:1fr}
  .hero-badge{left:12px;bottom:-14px;font-size:11px}
  .review{padding:66px 0}
  .cta-actions{margin-top:26px}
}
@media(max-width:560px){
  .audience,.review-list{grid-template-columns:1fr}
  .cta .button{white-space:normal}
}
@media(prefers-reduced-motion:reduce){.aud:hover{transform:none}}

/* ── Restraint layer ─────────────────────────────────────────────────────────
   A taste-skill audit of the trust layer. The blue-to-cyan gradient on buttons, rules and
   the nav underline is the commonest tell of a generated page, and to an audit partner it
   reads as decoration on a product whose pitch is that it does nothing it does not have to.
   One flat accent instead. Also: headings that stop leaving one word on the last line, a
   current-page mark in the nav, a skip link, and the eyebrow colour the dark bands set inline. */
:root{--grad:var(--blue)}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
.price-card .price,.release-facts code,.seat code{font-variant-numeric:tabular-nums}

.button{background:var(--blue);box-shadow:0 1px 2px #0a143429}
.button:hover{background:#1d4fd0;filter:none;transform:translateY(-1px);box-shadow:0 1px 2px #0a14342e,0 10px 20px -10px #1d4fd099}
.button:active{transform:translateY(1px) scale(.99);box-shadow:0 1px 1px #0a14342e}
.button.ghost{background:#fff}
.button.white,.button.white:hover{background:#fff}
.button.outline-light,.button.outline-light:hover{box-shadow:none}
.button.outline-light{background:transparent}
.button.outline-light:hover{background:#ffffff14}

.cta .eyebrow,.review .eyebrow,.price-card.featured .eyebrow{color:#78d6ff}

.navlinks a[aria-current="page"]{color:var(--blue)}
.navlinks a[aria-current="page"]:after{right:0}
.skip{position:absolute;left:16px;top:-60px;z-index:60;padding:10px 16px;border-radius:8px;
  background:var(--ink);color:#fff;font-weight:700;font-size:14px;text-decoration:none;transition:top .15s}
.skip:focus{top:12px}

/* The proof section: claim left, its three enforcements numbered on the right. */
.proof-split{display:grid;grid-template-columns:.95fr 1.05fr;gap:72px;align-items:start}
.proof-split .section-title{margin-bottom:0;position:sticky;top:116px}
.proof-list{list-style:none;margin:0;padding:0;counter-reset:proof}
.proof-list li{counter-increment:proof;position:relative;padding:26px 0 26px 64px;border-top:1px solid var(--line)}
.proof-list li:first-child{border-top:0;padding-top:4px}
.proof-list li:before{content:counter(proof,decimal-leading-zero);position:absolute;left:0;top:26px;
  font:500 13px 'DM Mono',monospace;letter-spacing:.06em;color:var(--blue);
  width:40px;height:40px;display:grid;place-items:center;border:1px solid #cddffa;border-radius:10px;background:var(--pale)}
.proof-list li:first-child:before{top:4px}
.proof-list h3{font-size:18px;letter-spacing:-.02em;margin:6px 0 8px}
.proof-list p{color:var(--muted);font-size:15px;margin:0;max-width:56ch}
.proof-list code{font:12.5px 'DM Mono',monospace;background:var(--pale);border-radius:4px;padding:1px 5px}

/* A quiet card beside long prose sat vertically centred, leaving a white field above and
   below it. Top-aligned and sticky, it stays beside the text the reader is on. */
.feature:has(>.card.quiet){align-items:start}
.feature>.card.quiet{position:sticky;top:116px}

@media(max-width:800px){
  .proof-split{grid-template-columns:1fr;gap:30px}
  .proof-split .section-title,.feature>.card.quiet{position:static}
  .proof-list li{padding-left:56px}
}

/* ── Finish layer ────────────────────────────────────────────────────────────
   From a finish-gate review. Links inside prose had no rule at all and rendered in the
   browser's own #0000ee. Five greys failed WCAG AA (2.5–4.4:1); they share one that passes
   (#5f6b82, 5.4:1 on white). The price ticks were the page's only cyan, at 1.9:1. Tick lists
   now hang, so a wrapped line no longer runs back under its tick. The radial glows were
   clipped into visible rectangles at the box edge — the dark bands go flat instead. */
:where(p,li,td,figcaption) a:where(:not(.button)){color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
:where(p,li,td,figcaption) a:where(:not(.button)):hover{color:#1d4fd0}
.review p a,.cta p a{color:#9fd8ff}

.matrix .sub,.fineprint,.shot figcaption,.price-card .seatline,.hero .trust,.optional,
.release-meta strong,.release-hash strong,.download-card .hash span,.download-card .hash .hash-note,
.scale-ends,.more-note,.crumbs,.release-past small,.release-facts strong{color:#5f6b82}
.featured .seatline,.fineprint.light{color:#a9bddf}

.price-card li:before{color:var(--blue);font-weight:800}
.featured li:before{color:#78d6ff}
.feature li,.price-card li{position:relative;padding-left:24px}
.feature li:before,.price-card li:before{position:absolute;left:0;margin:0}

.price-card.featured:before,.cta:before,.review:before{display:none}
.price-card.featured,.cta,.review{background:var(--navy)}

.price-card{display:flex;flex-direction:column}
.price-card ul{flex:1}
.price-card .button{align-self:flex-start}

.ticker{text-transform:uppercase}
.ticker span{white-space:nowrap}
.ticker{padding-left:16px;padding-right:16px}
@media(max-width:560px){.ticker{font-size:11px;line-height:1.9}}
/* The maker's line under the hero, and the trial terms in the closing band. */
.hero .hero-meta{flex-direction:column;align-items:flex-start;gap:4px}
.hero .hero-meta .trust{margin:0;font-size:12.5px}
.hero .hero-meta .maker{font-weight:600;color:var(--ink)}
.cta-note{margin:16px 0 0;max-width:620px;color:#b9c8e6;font-size:15px}
.page-head .fineprint{margin-top:14px}
.page-head p.fineprint{font-size:13px;line-height:1.55}
/* The hero, thinned to heading, standfirst, buttons and one line of terms. */
.hero h1{margin-bottom:24px}
.hero-grid>div:first-child>p:not(.hero-fine){max-width:520px;margin-bottom:34px}
.hero .hero-fine{margin:24px 0 0;max-width:none;font-size:13px;line-height:1.8;color:#5f6b82}
.hero .hero-fine span{color:var(--ink);font-weight:600}

/* ── Enterprise layer ────────────────────────────────────────────────────────
   From a five-reviewer pass (UI, UX architecture, brand, buyer walkthrough, accessibility)
   aimed at the international buyer: an IT lead at a UK firm, a partner in New York or Dubai.
   What read as "small vendor" was not any one thing but the sum — Tailwind's stock blue, a
   pale-blue wash on every band, a lifted card for every idea, the same eyebrow over every
   heading, and weight 800 everywhere so nothing outranked anything. This layer: neutral
   surfaces with blue kept for action, one radius scale, borders doing the structural work
   instead of shadows, a dark hero showing the product at a size you can read, ruled grids in
   place of card walls, and focus rings that are actually visible (the old ring was 1.2:1).
   The tokens at the top of the file were repointed in the same pass. */
:root{--ink-950:#0a0f1c;--ink-700:#344054;--subtle:#5f6b82;--surface-2:#f5f7fa;--line-strong:#c4cad4;
  --blue-700:#1a41ae;--blue-50:#eef3fd;--blue-dark:#8fb0ff;--on-dark:#c3cbd9;--on-dark-2:#98a2b3;
  --r-sm:6px;--r-md:10px;--r-lg:14px;
  --sh-1:0 1px 2px #1018280d;--sh-2:0 1px 3px #10182814,0 6px 16px -4px #10182814;--sh-3:0 16px 40px -12px #10182833;
  --sh-frame:0 0 0 1px #10182812,0 24px 48px -16px #10182833;--ring:0 0 0 3px #1f4fd133;
  --tick:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
::selection{background:#1f4fd12e}

/* Type. Manrope is variable, so 650 is a real weight: heavy enough to lead, light enough that
   a heading stops shouting. One scale, so a section h2 is visibly below the page's h1. */
body{line-height:1.6}
h1,h2,h3,h4{font-weight:650}
h3{font-weight:600}
.hero h1,.page-head h1{font-weight:650;letter-spacing:-.035em}
.page-head h1{font-size:clamp(34px,4.2vw,52px);line-height:1.08}
.section-title h2,.feature h2,.cta h2,.review h2{font-size:clamp(28px,3vw,38px);line-height:1.15;letter-spacing:-.028em;font-weight:650}
.section-title p{font-size:17px;line-height:1.65}
.feature p{font-size:16.5px;line-height:1.7}
.eyebrow{color:var(--subtle);font:500 12px/1.4 'DM Mono',monospace;letter-spacing:.08em;margin-bottom:16px}
.eyebrow:before{display:none}
.cta .eyebrow,.review .eyebrow,.price-card.featured .eyebrow,.hero .eyebrow{color:#9fb0cc}

/* Focus: one visible ring everywhere, light and dark variants. */
a:focus-visible,summary:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;box-shadow:var(--sh-1)}
.hero a:focus-visible,.review a:focus-visible,.cta a:focus-visible,.footer a:focus-visible,.price-card.featured a:focus-visible,
.social:focus-visible,.ph-badge:focus-visible{outline:2px solid var(--blue-dark);outline-offset:2px;box-shadow:none}

/* Header. A white bar and a hairline; the animated underline goes, and the current page is
   marked by colour and a fixed rule. */
.nav{height:68px}
.nav:before{background:#ffffffeb;border-bottom:1px solid var(--line)}
.navlinks{gap:28px}
.navlinks a{font-weight:600;color:var(--ink-700)}
.navlinks a:not(.button):after{display:none}
.navlinks a:not(.button):hover{color:var(--ink)}
.navlinks a[aria-current="page"]{color:var(--ink)}
.navlinks a[aria-current="page"]:not(.button):after{display:block;right:0;bottom:-4px;background:var(--ink)}
.navlinks a.button{padding:9px 16px;min-height:0}
.menu summary{border-color:var(--line-strong);border-radius:8px;box-shadow:none}

/* Buttons: flat, a 6px radius, colour change on hover and no movement. */
.button{min-height:44px;padding:11px 18px;border-radius:var(--r-sm);font:600 14.5px/1.2 Manrope,'Manrope fallback',Arial,sans-serif;
  background:var(--blue);box-shadow:var(--sh-1);transition:background .15s,border-color .15s,color .15s}
.button:hover{background:var(--blue-700);transform:none;box-shadow:var(--sh-1)}
.button:active{transform:none;box-shadow:none}
.button.ghost{background:#fff;border:1px solid var(--line-strong);color:var(--ink)}
.button.ghost:hover{background:var(--surface-2);border-color:#98a2b3;color:var(--ink);box-shadow:var(--sh-1)}
.button.white,.button.white:hover{color:var(--ink-950)}
.button.white:hover{background:#e6eaf2}
.button.outline-light{border:1px solid #ffffff40;color:#fff}
.button.outline-light:hover{background:#ffffff12;border-color:#ffffff80}

/* Hero. Dark, the headline and the offer side by side, and the product underneath at the full
   width of the page — framed like a device and overhanging into the band below, so it reads
   as the thing itself rather than an illustration of it. */
.hero{display:flow-root;background:var(--ink-950);color:#fff;padding:88px 0 0;overflow:visible;border-bottom:0}
.hero:before{display:none}
.hero-head{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end}
.hero h1{font-size:clamp(40px,4.8vw,62px);line-height:1.04;letter-spacing:-.038em;margin:0;color:#fff;max-width:none}
.hero-side p{color:var(--on-dark);font-size:17px;line-height:1.65;margin:0 0 28px;max-width:none}
.hero .hero-fine{margin:22px 0 0;font-size:13px;line-height:1.6;color:var(--on-dark-2)}
.hero-stage{position:relative;z-index:2;margin-top:64px}
.frame{margin:0 0 -150px;padding:8px 8px 0;border-radius:16px;background:#161e2e;border:1px solid #ffffff1f;
  box-shadow:0 48px 96px -24px #0a0f1c73,0 0 0 1px #0a0f1c}
.frame .product-shot{display:block;width:100%;height:auto;border:0;border-radius:9px;box-shadow:none;filter:none}
.frame-cap{display:flex;align-items:center;gap:9px;padding:11px 6px 12px;font:500 12px 'DM Mono',monospace;
  letter-spacing:.03em;color:#9fb0cc}
.frame-cap .dot{width:7px;height:7px;border-radius:50%;background:#3ccf8e;box-shadow:0 0 0 3px #3ccf8e2e}

/* The verification strip that replaced the ticker: four checkable facts, hairline-ruled. */
.verify{padding:198px 0 64px;background:#fff;border-bottom:1px solid var(--line)}
.verify-grid{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.verify-grid>div{padding:20px 24px 0 0;border-top:1px solid var(--line-strong)}
.verify-grid>div+div{padding-left:24px;border-left:1px solid var(--line)}
.verify dt{font:500 11.5px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--subtle);margin-bottom:7px}
.verify dd{margin:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink)}
.verify code{font:500 13px 'DM Mono',monospace;background:var(--surface-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}

/* Sections: white or a neutral grey with hairlines. No washes, no texture. */
.section{padding:96px 0}
.section.pale{background:var(--surface-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-head{background:var(--surface-2);border-bottom:1px solid var(--line);padding:72px 0 60px}
.section-title{margin-bottom:44px}

/* Surfaces. A border does the structural work; nothing that cannot be clicked moves. */
.card,.tool,.aud,.price-card,.download-card,.dl-aside,.paper-card,.release-row,.seat,.matrix,.next-step{border-radius:var(--r-md);box-shadow:none}
.card,.tool,.aud,.price-card,.download-card,.paper-card,.release-row,.seat,.matrix{border-color:var(--line)}
.card:hover,.tool:hover,.aud:hover{transform:none;box-shadow:none;border-color:var(--line)}
.download-card:hover,.paper-card:hover{transform:none;box-shadow:var(--sh-2);border-color:var(--line-strong)}
.dl-aside,.next-step{background:var(--surface-2);border-color:var(--line)}
.tool .icon,.card .icon,.aud .icon{width:36px;height:36px;border-radius:8px;background:var(--blue-50);border:1px solid #d6e1f8;box-shadow:none;margin-bottom:16px}
.tool .icon .ico,.card .icon .ico,.aud .icon .ico{width:19px;height:19px}
.card h3,.tool h3,.aud h3{letter-spacing:-.015em}

/* The twelve tools: one ruled grid instead of twelve floating cards. */
.tools{gap:0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.tool{border:0;border-radius:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 24px}
.tools .tool:nth-child(4n){border-right:0}
.tools .tool:nth-last-child(-n+4){border-bottom:0}

/* Who it is for: four columns under a rule, not four boxes. */
.audience{gap:32px}
.aud{background:transparent;border:0;border-top:2px solid var(--ink);border-radius:0;padding:24px 0 0}
.aud p{font-size:14.5px}

.proof-list li:before{border-color:var(--line-strong);background:#fff;color:var(--ink-700)}
.proof-list p{font-size:15.5px}

/* The supplier-review band: a list of documents read down a rule, like an index. */
.review,.cta{background:var(--ink-950)}
.review p,.cta-note{color:var(--on-dark)}
.review-list{grid-template-columns:1fr;gap:0;border-top:1px solid #ffffff1f}
.review-list a{align-items:center;padding:16px 6px;border:0;border-bottom:1px solid #ffffff1f;border-radius:0;background:transparent}
.review-list a:after{content:'→';margin-left:auto;padding-left:16px;color:var(--blue-dark);transition:transform .15s}
.review-list a:hover{background:#ffffff08;border-color:#ffffff1f}
.review-list a:hover:after{transform:translateX(3px)}
.review-list .ico{margin-top:0;color:var(--blue-dark)}
.review-list small{color:var(--on-dark-2)}

/* Rolling it out: a spec sheet, three across, the last cell an invitation rather than a fact. */
.spec-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:#fff}
.spec{padding:30px 28px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec-grid .spec:nth-child(3n){border-right:0}
.spec-grid .spec:nth-last-child(-n+3){border-bottom:0}
.spec>.ico{width:22px;height:22px;color:var(--blue);margin-bottom:18px}
.spec h3{font-size:17px;margin:0 0 8px;letter-spacing:-.015em}
.spec p{font-size:14.5px;color:var(--muted);margin:0}
.spec-cta{background:var(--surface-2)}
.spec-cta .button{margin-top:20px}

/* Ticks: a drawn check in place of the "✓" glyph, which rendered at a different weight in
   every fallback font. */
.feature li:before,.price-card li:before,.ticks li:before{content:'';position:absolute;left:0;top:.3em;width:15px;height:15px;margin:0;
  background:var(--blue);-webkit-mask:var(--tick) center/contain no-repeat;mask:var(--tick) center/contain no-repeat}
.featured li:before{background:var(--blue-dark)}
.feature li{font-size:15px;color:var(--ink-700);margin:11px 0}
.ticks li{padding-left:25px}

/* Product screenshots in the feature rows sit in a light bezel, like the hero's. */
.screen{padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-frame)}

/* Prices. */
.price-card{padding:32px}
.price-card.featured{background:var(--ink-950);border-color:var(--ink-950)}
.price-card .price{font-weight:700;letter-spacing:-.035em}

.faq-item{padding:18px 0 0;border-left:0;border-top:1px solid var(--line)}
.matrix th{color:var(--ink-700);background:var(--surface-2)}
.cta{padding:88px 0;border-top:1px solid #ffffff14}

/* Footer: the company stated plainly, the badges quieter. */
.footer{background:var(--ink-950);border-top:1px solid #ffffff14;padding:64px 0 28px}
.footer p{color:var(--on-dark-2)}
.footer-nav a{color:var(--on-dark);font-size:13.5px}
.footer-nav h4{color:#8792a6}
.social{width:32px;height:32px;border-radius:8px;border-color:#ffffff29}
.ph-badge:not(.light){border-color:#ffffff29;color:var(--on-dark-2);font-size:12px;padding:7px 12px}
.copyright{display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 24px;border-top-color:#ffffff14;color:#8792a6;font-size:12px}

/* Contrast and non-text contrast, from the accessibility audit. Input borders were 1.6:1. */
.field,.choice{border-color:#7d8799}
.field:focus{outline:2px solid var(--blue);outline-offset:1px;box-shadow:none}
.choice:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.download-card small,.matrix td[data-label]:before{color:var(--subtle)}
.download-card.pending h2,.download-card.pending p{color:#646f82}
.download-card.pending .os-mark,.download-card.pending .os-name{color:#7d8799}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
.contact-form .optional{margin-left:6px}

@media(max-width:1000px){
  .tools .tool:nth-child(4n){border-right:1px solid var(--line)}
  .tools .tool:nth-child(2n){border-right:0}
  .tools .tool:nth-last-child(-n+4){border-bottom:1px solid var(--line)}
  .tools .tool:nth-last-child(-n+2){border-bottom:0}
  .spec-grid{grid-template-columns:repeat(2,1fr)}
  .spec-grid .spec:nth-child(3n){border-right:1px solid var(--line)}
  .spec-grid .spec:nth-child(2n){border-right:0}
  .spec-grid .spec:nth-last-child(-n+3){border-bottom:1px solid var(--line)}
  .spec-grid .spec:nth-last-child(-n+2){border-bottom:0}
  .verify-grid{grid-template-columns:repeat(2,1fr);gap:24px 0}
  .verify-grid>div:nth-child(3){padding-left:0;border-left:0}
}
@media(max-width:800px){
  .hero{padding:56px 0 0}
  .hero-head{grid-template-columns:1fr;gap:24px}
  .hero-stage{margin-top:40px}
  .frame{margin-bottom:-64px;padding:5px 5px 0;border-radius:12px}
  .frame-cap{font-size:11px}
  .verify{padding:100px 0 48px}
  .section{padding:64px 0}
  .page-head{padding:52px 0 44px}
  .tool{border-right:0!important}
  .tools .tool:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .tools .tool:last-child{border-bottom:0}
  .spec-grid{grid-template-columns:1fr}
  .spec{border-right:0!important}
  .spec-grid .spec:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .spec-grid .spec:last-child{border-bottom:0}
  .cta{padding:60px 0}
}
@media(max-width:560px){
  .verify-grid{grid-template-columns:1fr;gap:18px}
  .verify-grid>div+div{padding-left:0;border-left:0}
  .copyright{flex-direction:column}
}
/* Contact details: the address link rendered in the browser's own blue, and the labels were
   a second, louder eyebrow style. */
.contact-item a{color:var(--blue);text-underline-offset:3px}
.contact-item strong{font:500 12px 'DM Mono',monospace;letter-spacing:.08em;color:var(--subtle);margin-bottom:6px}
.next-step .button{flex:none}

/* ── Finish-gate fixes for the enterprise layer ──────────────────────────────
   Links outside a paragraph — a card title, a fineprint line — were not reached by the
   finish layer's :where() and rendered in the browser's own #0000ee. The last of the cyan
   gradient rules go. Ticks on price cards sit inside a padded <li>, so they offset by it.
   Shadows come off the two surfaces that cannot be clicked, and icons lose their tinted
   chip so home has one icon treatment, not two. Feature rows give the screenshot the wider
   column: at 560px nothing in a 1600px shot of the app could be read. */
:where(small,.fineprint,.dl-note) a:where(:not(.button)){color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px}
.card h3 a,.paper-body h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover,.paper-body h3 a:hover{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.qgroup legend:after{height:1px;background:var(--line-strong)}
.proof-item:before{height:2px;background:var(--ink)}
.price-card li:before{top:calc(7px + .3em)}
.feedback-aside .card,.price-card.featured{box-shadow:none}
.download-card:hover{box-shadow:none}
.tool .icon,.card .icon,.aud .icon{width:22px;height:22px;display:block;background:none;border:0;border-radius:0;margin-bottom:18px}
.tool .icon .ico,.card .icon .ico,.aud .icon .ico{width:22px;height:22px}
.feature{grid-template-columns:.82fr 1.18fr;gap:64px}
.feature.reverse{grid-template-columns:1.18fr .82fr}
@media(max-width:800px){.feature,.feature.reverse{grid-template-columns:1fr;gap:35px}}

/* Self-serve conversion: the Founding Firms band on /pricing/, the offer line under a price,
   and the optional trial-reminder box on the page a download starts from. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.offer-band{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:0 0 28px;padding:24px 28px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--surface-2)}
.offer-band h2{margin:0 0 6px;font-size:21px;letter-spacing:-.02em;line-height:1.3}
.offer-band p{margin:0;font-size:14.5px;color:var(--muted)}
.offer-band .eyebrow{margin-bottom:10px}
.offer-count{flex:none;text-align:center;min-width:120px}
.offer-count strong{display:block;font-size:36px;font-weight:700;letter-spacing:-.03em;color:var(--blue);font-variant-numeric:tabular-nums}
.offer-count span{font-size:13px;color:var(--subtle)}
.offer-price{margin:-6px 0 14px;font-size:13.5px;font-weight:600;color:var(--blue)}
.featured .offer-price{color:var(--blue-dark)}
.remind{display:grid;grid-template-columns:1fr 1.1fr;gap:12px 40px;align-items:center;max-width:820px;margin:0 0 36px;padding:24px 28px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface-2)}
.remind h2{margin:0 0 6px;font-size:19px;letter-spacing:-.02em}
.remind p{margin:0;font-size:14px;color:var(--muted)}
.remind-row{display:flex;gap:10px}
.remind-row .field{margin:0;flex:1;min-width:0}
.remind .fineprint{grid-column:1/-1;margin:0}
@media(max-width:800px){.offer-band,.remind{display:block}.offer-count{text-align:left;margin-top:16px}.remind-row{margin-top:16px;flex-direction:column}}

/* The free redaction checker (/tools/redaction-check/). */
.rc{max-width:860px}
.rc-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:200px;padding:32px;text-align:center;border:2px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.rc-drop:hover,.rc-drop.over{border-color:var(--blue);background:var(--blue-50)}
.rc-drop strong{font-size:18px;letter-spacing:-.01em}
.rc-drop span{font-size:14px;color:var(--muted)}
.rc-drop input{margin-top:10px;font:14px Manrope,'Manrope fallback',Arial,sans-serif}
.rc-password{margin-top:20px;padding:20px 24px;border:1px solid var(--line);border-radius:var(--r-md)}
.rc-password label{display:block;margin-bottom:10px}
.rc-result{margin-top:28px}
.rc-verdict{padding:22px 26px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface-2)}
.rc-verdict h2{margin:0 0 6px;font-size:21px;letter-spacing:-.02em}
.rc-verdict p{margin:0;color:var(--ink-700)}
.rc-verdict .rc-file{margin-top:10px;font:500 12px 'DM Mono',monospace;color:var(--subtle)}
.rc-verdict.bad{border-color:#f0c2bc;background:#fdecea}
.rc-verdict.bad h2{color:#8f1d13}
.rc-verdict.ok{border-color:#b6e0c6;background:#eaf7ef}
.rc-verdict.ok h2{color:#11532f}
.rc-section{margin-top:24px}
.rc-section h3{margin:0 0 10px;font-size:16px}
.rc-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:var(--r-md)}
.rc-list li{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:10px 14px;border-top:1px solid var(--line)}
.rc-list li:first-child{border-top:0}
.rc-list code{font:500 13.5px 'DM Mono',monospace;color:var(--ink);word-break:break-all}
.rc-page,.rc-kind{font:500 11.5px 'DM Mono',monospace;color:var(--subtle);text-transform:uppercase;letter-spacing:.05em}
.rc-note{font-size:14px;color:var(--muted);margin:8px 0 0}
.rc-meta{display:grid;grid-template-columns:120px 1fr;gap:6px 16px;margin:0}
.rc-meta dt{font:500 12px 'DM Mono',monospace;color:var(--subtle);text-transform:uppercase}
.rc-meta dd{margin:0;word-break:break-word}
.rc-explain{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:960px;margin-top:56px}
.rc-explain h2{font-size:19px;margin:0 0 10px;letter-spacing:-.02em}
.rc-explain p{color:var(--muted);font-size:15px}
@media(max-width:800px){.rc-explain{grid-template-columns:1fr;gap:28px}.rc-meta{grid-template-columns:1fr}}