/* Hopqo marketing site — shared styles. Tokens mirror the Hopqo brand system (tokens.json). */
:root {
  --hop-red:#E0262F; --accent:#1D1D1F; --accent-hover:#3A3A3C; --on-accent:#FFFFFF; --tint:#F5F5F7;
  --ink:#1D1D1F; --ink-muted:#6E6E73; --surface:#FFFFFF; --surface-sunk:#F5F5F7; --surface-raised:#FFFFFF;
  --night:#F5F5F7; --night-2:#EDEDF0; --night-ink:#1D1D1F; --night-muted:#6E6E73; --night-line:#E5E5EA;
  --line:#E5E5EA; --line-strong:#AEAEB2; --landed:#0B7F72; --caution:#9A5B00; --focus:#1D1D1F;
  --code-bg:#F5F5F7; --code-ink:#1D1D1F; --code-c:#8E8E93; --code-s:#0B6B60; --code-k:#5B3FA8; --code-f:#7A4B00;
  --font-display:"Schibsted Grotesk","Helvetica Neue",Arial,sans-serif;
  --font-sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-sm:6px; --r-md:10px; --r-lg:16px;
  --nav-h:64px;
  color-scheme:light;
}

* { box-sizing:border-box }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior:auto } *,*::before,*::after { animation:none!important; transition:none!important } }
body { margin:0; background:var(--surface); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:26px; -webkit-font-smoothing:antialiased }
img, svg { max-width:100% }
a { color:var(--accent); text-decoration:none }
a:hover { text-decoration:underline }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:4px }
h1,h2,h3,h4 { font-family:var(--font-display); margin:0; text-wrap:balance; color:var(--ink) }
h1 { font-size:clamp(40px,6vw,68px); line-height:1; font-weight:800; letter-spacing:-.035em }
h2 { font-size:clamp(28px,3.8vw,44px); line-height:1.08; font-weight:800; letter-spacing:-.025em }
h3 { font-size:20px; line-height:28px; font-weight:700; letter-spacing:-.01em }
h4 { font-size:16px; line-height:24px; font-weight:700 }
p { margin:0 }
code, kbd, .mono { font-family:var(--font-mono) }
.wrap { max-width:1200px; margin:0 auto; padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px)) }
@media (min-width:720px) { .wrap { padding-left:max(32px,env(safe-area-inset-left,0px)); padding-right:max(32px,env(safe-area-inset-right,0px)) } }
section { padding-block:clamp(56px,9vw,104px) }
.eyebrow { font-size:12px; line-height:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted) }
.lead { font-size:19px; line-height:30px; color:var(--ink-muted); max-width:62ch }
.muted { color:var(--ink-muted) }
.sec-head { display:grid; gap:14px; margin-bottom:48px; max-width:780px }
.sec-head.center { margin-inline:auto; text-align:center; justify-items:center }
.band-sunk { background:var(--surface-sunk) }
.night { background:var(--night); color:var(--night-ink) }
.night h1, .night h2, .night h3, .night h4 { color:var(--night-ink) }
.night .lead, .night .muted { color:var(--night-muted) }
.night .eyebrow { color:var(--ink-muted) }

/* buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 15px/20px var(--font-sans); padding:12px 22px; border-radius:999px; border:1px solid transparent; cursor:pointer; text-decoration:none!important; white-space:nowrap; transition:background .15s, border-color .15s }
.btn-primary { background:var(--accent); color:var(--on-accent) }
.btn-primary:hover { background:var(--accent-hover) }
.btn-ghost { border-color:var(--line-strong); color:var(--ink); background:transparent }
.btn-ghost:hover { background:var(--surface-sunk) }
.night .btn-ghost { border-color:#6E5F61; color:var(--night-ink) }
.night .btn-ghost:hover { background:var(--night-2) }
.btn-lg { padding:14px 22px; font-size:16px }
.ctas { display:flex; flex-wrap:wrap; gap:12px }
.arrow-link { font-weight:600; display:inline-flex; gap:6px; align-items:center }
.arrow-link::after { content:"→"; transition:transform .15s }
.arrow-link:hover { text-decoration:none } .arrow-link:hover::after { transform:translateX(3px) }

/* header */
body::before { content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:30; background:var(--surface) }
.site-nav { position:sticky; top:env(safe-area-inset-top,0px); z-index:20; background:var(--surface); border-bottom:1px solid var(--line) }
.site-nav .wrap { display:flex; align-items:center; gap:24px; height:var(--nav-h) }
.logo { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none!important; flex:none }
.logo .tile { width:32px; height:32px; flex:none }
.logo .word { height:22px; width:auto; aspect-ratio:5986/1890; fill:var(--ink) }
.menu { display:flex; gap:4px; margin-left:8px; list-style:none; padding:0; margin-block:0 }
.menu > li { position:relative }
.menu > li > a, .menu > li > button { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border-radius:var(--r-sm); color:var(--ink-muted); font:500 15px/20px var(--font-sans); background:none; border:0; cursor:pointer; text-decoration:none }
.menu > li > a:hover, .menu > li > button:hover, .menu > li > a[aria-current="page"] { color:var(--ink); background:var(--surface-sunk) }
.menu > li > button::after { content:""; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px) }
.mega { position:absolute; top:calc(100% + 8px); left:-12px; width:560px; background:var(--surface-raised); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px; display:grid; grid-template-columns:1fr 1fr; gap:4px; box-shadow:0 24px 48px -20px rgba(28,18,20,.28); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .15s, transform .15s, visibility .15s }
.menu > li:hover .mega, .menu > li:focus-within .mega, .menu > li.open .mega { opacity:1; visibility:visible; transform:none }
.mega a { display:grid; grid-template-columns:36px 1fr; gap:2px 12px; padding:12px; border-radius:var(--r-md); color:var(--ink); text-decoration:none }
.mega a:hover { background:var(--surface-sunk) }
.mega .ic { grid-row:1/3; width:36px; height:36px; border-radius:var(--r-md); background:var(--tint); display:grid; place-items:center }
.mega .ic svg { width:20px; height:20px; stroke:var(--accent); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
.mega b { font-weight:600; font-size:15px; line-height:20px }
.mega span { font-size:13px; line-height:18px; color:var(--ink-muted) }
.nav-right { margin-left:auto; display:flex; gap:8px; align-items:center }
.nav-right .signin { color:var(--ink); font-weight:500; font-size:15px; padding:8px 12px }
.burger { display:none; width:40px; height:40px; border:1px solid var(--line); border-radius:var(--r-md); background:none; cursor:pointer; color:var(--ink) }
.burger svg { width:20px; height:20px; stroke:currentColor; stroke-width:2; stroke-linecap:round }
.mobile-menu { display:none }
@media (max-width:980px) {
  .menu, .nav-right .signin { display:none }
  .burger { display:inline-grid; place-items:center }
  .nav-right .btn { padding:9px 14px }
  .mobile-menu[data-open="true"] { display:block; border-top:1px solid var(--line); background:var(--surface); max-height:calc(100dvh - var(--nav-h)); overflow:auto }
  .mobile-menu .wrap { display:grid; gap:4px; padding-block:12px 24px }
  .mobile-menu h4 { font:600 12px/16px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); margin:14px 0 4px }
  .mobile-menu a { color:var(--ink); padding:10px 0; font-weight:500; border-bottom:1px solid var(--line) }
}

/* announcement */
.announce { background:var(--night); color:var(--night-ink); font-size:14px; line-height:20px }
.announce .wrap { display:flex; gap:10px; justify-content:center; align-items:center; padding-block:10px; flex-wrap:wrap; text-align:center }
.announce a { color:#FF8A8F; font-weight:600 }

/* page header (inner pages) */
.page-hero { padding-block:clamp(56px,8vw,96px) clamp(40px,6vw,64px); border-bottom:1px solid var(--line) }
.page-hero .wrap { display:grid; gap:18px; max-width:1200px }
.page-hero h1 { font-size:clamp(38px,5.4vw,60px); max-width:18ch }
.crumbs { font-size:13px; color:var(--ink-muted); display:flex; gap:8px }
.crumbs a { color:var(--ink-muted) }

/* chips, pills */
.pill { display:inline-flex; align-items:center; gap:6px; font:600 12px/16px var(--font-sans); padding:4px 10px; border-radius:999px; max-width:100%; justify-self:start; width:fit-content }
.pill::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; background:currentColor }
.pill.ok { color:var(--landed); background:color-mix(in srgb,var(--landed) 13%,transparent) }
.pill.prob { color:var(--caution); background:color-mix(in srgb,var(--caution) 15%,transparent) }
.pill.red { color:var(--accent); background:var(--tint) }
.tag { display:inline-block; font:500 12px/18px var(--font-mono); padding:2px 8px; border-radius:var(--r-sm); background:var(--surface-sunk); border:1px solid var(--line); color:var(--ink-muted) }
.inline-code, p code, li code, td code { font-size:.86em; background:var(--surface-sunk); border:1px solid var(--line); padding:1px 6px; border-radius:var(--r-sm); color:var(--ink); overflow-wrap:anywhere }
.night p code { background:var(--night-2); border-color:var(--night-line); color:var(--night-ink) }

/* generic grids */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:24px }
@media (max-width:980px) { .grid-4 { grid-template-columns:1fr 1fr } .grid-3 { grid-template-columns:1fr 1fr } }
@media (max-width:640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns:minmax(0,1fr) } }
.grid-2 > *, .grid-3 > *, .grid-4 > * { min-width:0 }
.split { display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center }
.split.wide-r { grid-template-columns:.85fr 1.15fr }
.split.wide-l { grid-template-columns:1.15fr .85fr }
@media (max-width:920px) { .split, .split.wide-r, .split.wide-l { grid-template-columns:1fr; gap:40px } }
.split > * { min-width:0 }

/* cards */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; display:grid; gap:12px; align-content:start }
.band-sunk .card { background:var(--surface) }
.card p { color:var(--ink-muted); font-size:15px; line-height:24px }
.icon { width:44px; height:44px; border-radius:var(--r-md); background:var(--tint); display:grid; place-items:center }
.icon svg, svg.i { width:22px; height:22px; stroke:var(--accent); fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round }
.ticks { list-style:none; padding:0; margin:0; display:grid; gap:12px }
.ticks li { display:grid; grid-template-columns:20px 1fr; gap:12px; color:var(--ink-muted) }
.ticks li b { color:var(--ink); font-weight:600 }
.ticks svg { width:18px; height:18px; margin-top:4px; stroke:var(--landed); fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round }
.night .ticks li { color:var(--night-muted) } .night .ticks li b { color:var(--night-ink) }

/* features grid (hairline) */
.features { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden }
@media (max-width:900px) { .features { grid-template-columns:1fr 1fr } }
@media (max-width:600px) { .features { grid-template-columns:1fr } }
.feat { background:var(--surface); padding:28px; display:grid; gap:10px; align-content:start; min-width:0 }
.feat p { color:var(--ink-muted); font-size:15px; line-height:24px }

/* code window */
.term { background:var(--code-bg); border:1px solid var(--night-line); border-radius:var(--r-lg); overflow:hidden; min-width:0; color:var(--code-ink) }
.term.glow { box-shadow:0 30px 70px -30px rgba(224,38,47,.45) }
.term-bar { display:flex; align-items:center; gap:4px; padding:8px; border-bottom:1px solid var(--night-line); overflow-x:auto }
.term-bar .dots { display:flex; gap:6px; padding:0 8px 0 6px }
.term-bar .dots i { width:10px; height:10px; border-radius:50%; background:#3A2E30 }
.tab { font:500 13px var(--font-mono); color:var(--night-muted); background:none; border:0; padding:7px 12px; border-radius:var(--r-sm); cursor:pointer; white-space:nowrap }
.tab[aria-selected="true"] { color:var(--night-ink); background:#2A2022 }
.term-file { margin-left:auto; font:400 12px var(--font-mono); color:var(--code-c); padding-right:8px; white-space:nowrap }
pre { margin:0; padding:20px 22px; overflow-x:auto; font:400 13.5px/22px var(--font-mono); color:var(--code-ink); tab-size:2 }
pre .c { color:var(--code-c) } pre .s { color:var(--code-s) } pre .k { color:var(--code-k) } pre .f { color:var(--code-f) } pre .n { color:#C9B8FF }
.copy { font:500 12px var(--font-sans); color:var(--night-muted); background:#2A2022; border:1px solid var(--night-line); border-radius:var(--r-sm); padding:5px 10px; cursor:pointer; margin-left:auto }
.copy:hover { color:var(--night-ink) }

/* stat strip */
.stats { display:grid; grid-template-columns:repeat(4,1fr); border-block:1px solid var(--line) }
@media (max-width:760px) { .stats { grid-template-columns:1fr 1fr } }
.stat { padding:28px 24px; display:grid; gap:4px; border-left:1px solid var(--line) }
.stat:first-child { border-left:0 }
@media (max-width:760px) { .stat:nth-child(3) { border-left:0 } .stat:nth-child(n+3) { border-top:1px solid var(--line) } }
.stat b { font:800 32px/1.1 var(--font-display); letter-spacing:-.02em }
.stat span { font-size:14px; color:var(--ink-muted) }

/* table */
.tbl-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg) }
table { width:100%; border-collapse:collapse; font-size:14px; line-height:20px }
th, td { padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); vertical-align:top }
thead th { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted); font-weight:600; background:var(--surface-sunk) }
tbody tr:last-child td { border-bottom:0 }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums }

/* details / faq */
.faq { display:grid; grid-template-columns:1fr 1fr; gap:0 48px }
@media (max-width:760px) { .faq { grid-template-columns:1fr } }
details { border-bottom:1px solid var(--line); padding:18px 0 }
summary { cursor:pointer; font-weight:600; list-style:none; display:flex; justify-content:space-between; gap:16px }
summary::-webkit-details-marker { display:none }
summary::after { content:"+"; font:500 20px/1 var(--font-mono); color:var(--accent); flex:none }
details[open] summary::after { content:"–" }
details > div, details > p { margin-top:10px; color:var(--ink-muted); font-size:15px; max-width:64ch }

/* callout */
.callout { display:grid; grid-template-columns:auto 1fr; gap:14px; padding:16px 18px; border-radius:var(--r-md); background:var(--tint); color:var(--ink); font-size:15px; line-height:24px }
.callout.note { background:var(--surface-sunk); border:1px solid var(--line) }
.callout svg { width:20px; height:20px; margin-top:2px; stroke:var(--accent); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }

/* final CTA band */
.final-cta { position:relative; overflow:hidden }
.final-cta .wrap { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:end; position:relative }
@media (max-width:760px) { .final-cta .wrap { grid-template-columns:1fr } }
.final-cta h2 { font-size:clamp(34px,5.4vw,60px); line-height:1; max-width:15ch }
.final-cta .art { position:absolute; right:-40px; top:-30px; width:380px; opacity:.08; pointer-events:none }

/* footer */
.site-footer { padding-block:64px calc(40px + env(safe-area-inset-bottom,0px)) }
.foot-grid { display:grid; grid-template-columns:1.6fr repeat(4,1fr); gap:32px }
@media (max-width:900px) { .foot-grid { grid-template-columns:1fr 1fr 1fr } .foot-about { grid-column:1/-1 } }
@media (max-width:520px) { .foot-grid { grid-template-columns:1fr 1fr } }
.site-footer .logo .word { fill:var(--night-ink) }
.site-footer h4 { margin:0 0 12px; font:600 12px/16px var(--font-sans); letter-spacing:.08em; text-transform:uppercase; color:var(--night-muted) }
.site-footer ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px }
.site-footer a { color:var(--night-ink) }
.foot-about p { margin-top:14px; color:var(--night-muted); font-size:14px; max-width:36ch }
.status-dot { display:inline-flex; gap:8px; align-items:center; margin-top:18px; font-size:13px; color:var(--night-muted) }
.status-dot::before { content:""; width:8px; height:8px; border-radius:50%; background:#2EC4B1 }
.legal { margin-top:48px; padding-top:20px; border-top:1px solid var(--night-line); font-size:13px; color:var(--night-muted); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px }

/* reveal arc animation */
@keyframes draw { from { stroke-dashoffset:var(--len,400) } to { stroke-dashoffset:0 } }
.draw { stroke-dasharray:var(--len,400); animation:draw 1.1s cubic-bezier(.2,.7,.2,1) .2s both }
@keyframes pop { 0% { transform:scale(.4); opacity:0 } 70% { transform:scale(1.15); opacity:1 } 100% { transform:scale(1) } }
.pop { transform-box:fill-box; transform-origin:center; animation:pop .45s ease-out 1.15s both }

/* Minimal pass: one light theme, red only as accent */
.night .eyebrow { color:var(--accent) }
.night .btn-ghost { border-color:var(--line-strong); color:var(--ink) }
.night .btn-ghost:hover { background:var(--surface) }
.term { border-color:var(--line) }
.term.glow { box-shadow:none }
.term-bar { border-bottom-color:var(--line); background:#F5F1F1 }
.term-bar .dots i { background:#E2D8D9 }
.tab { color:var(--ink-muted) }
.tab[aria-selected="true"] { color:var(--ink); background:var(--surface); box-shadow:0 0 0 1px var(--line) }
.copy { color:var(--ink-muted); background:var(--surface); border-color:var(--line) }
.copy:hover { color:var(--ink) }
pre .n { color:#5B3FB0 }
.announce { display:none }
.mega { box-shadow:0 12px 32px -16px rgba(28,18,20,.18) }
.final-cta .art { display:none }
.site-footer { border-top:1px solid var(--line) }
.status-dot::before { background:var(--landed) }
section.band-sunk, .band-sunk { background:var(--surface-sunk) }
.icon { background:transparent; border:1px solid var(--line) }
h1 { letter-spacing:-.03em }

/* Monochrome accents: red is reserved for the logo and dots. Inline links are underlined so they read as links in black. */
p a:not(.btn):not(.arrow-link), td a { text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px }
p a:not(.btn):not(.arrow-link):hover, td a:hover { text-decoration-color:currentColor }
.red-dot { color:var(--hop-red) }

/* Fresh layout: quiet nav with no CTA button, current page marked with a red dot, single-row footer */
.site-nav { background:color-mix(in srgb,var(--surface) 86%,transparent); -webkit-backdrop-filter:saturate(180%) blur(16px); backdrop-filter:saturate(180%) blur(16px); border-bottom:1px solid transparent }
.site-nav .wrap { display:grid; grid-template-columns:1fr auto 1fr; height:56px }
.site-nav .logo { justify-self:start }
nav.menu { display:flex; gap:28px; margin:0 }
nav.menu a { position:relative; color:var(--ink-muted); font:500 14px/20px var(--font-sans); padding:6px 0; text-decoration:none }
nav.menu a:hover { color:var(--ink); text-decoration:none }
nav.menu a[aria-current="page"] { color:var(--ink) }
nav.menu a[aria-current="page"]::after { content:""; position:absolute; left:50%; bottom:-6px; width:5px; height:5px; margin-left:-2.5px; border-radius:50%; background:var(--hop-red) }
.nav-right { justify-self:end; margin:0 }
.nav-right .signin { font-size:14px; padding:6px 0; color:var(--ink) }
.burger { border:0; width:36px; height:36px }
@media (max-width:980px) {
  .site-nav .wrap { grid-template-columns:1fr auto }
  nav.menu { display:none }
  .nav-right .signin { display:none }
  .mobile-menu .wrap { padding-block:8px 20px }
  .mobile-menu a { font-size:20px; padding:12px 0 }
}
.site-footer { padding-block:40px calc(32px + env(safe-area-inset-bottom,0px)) }
.foot-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:20px 32px }
.foot-links { display:flex; flex-wrap:wrap; gap:10px 24px; font-size:14px }
.site-footer .foot-links a { color:var(--ink-muted) }
.site-footer .foot-links a:hover { color:var(--ink) }
.site-footer .logo .word { fill:var(--ink) }
.site-footer .legal { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); justify-content:flex-start; gap:8px 20px; color:var(--ink-muted) }
.site-footer .legal a { color:var(--ink-muted) }
.site-footer .legal .tm { margin-left:auto }
@media (max-width:720px) { .site-footer .legal .tm { margin-left:0; flex-basis:100% } }
.hero-links { display:flex; flex-wrap:wrap; gap:12px 28px; margin-top:12px; font-size:16px }
.hero-links a { color:var(--ink) }
.coda { border-top:1px solid var(--line); padding-block:40px }
.coda .wrap { display:flex; flex-wrap:wrap; gap:12px 32px; justify-content:space-between; align-items:center; font-size:16px }
.coda .wrap > span:first-child { color:var(--ink-muted) }
.coda-links { display:flex; flex-wrap:wrap; gap:12px 28px }
.coda a { color:var(--ink) }
.page-hero h1 { font-size:clamp(40px,6.4vw,80px); line-height:.98; letter-spacing:-.04em }