@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:#0a1434;--navy:#07102a;--blue:#2563eb;--cyan:#57c9ff;--pale:#edf5ff;--muted:#59657d;--line:#dce5f2}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#fff;color:var(--ink);font-family:Manrope,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%;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%;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: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%;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%}