/* capacix.eu, built from the Claude Design file "Capacix Homepage.dc.html".
   Cool paper with midnight blue, cobalt for capacity and links, sulfur
   yellow for the person and the demand. Hairlines, mono labels, radius 2px
   on buttons and 4px on cards, no shadows but the toast. The design's
   inline styles, gathered into classes so the page can also be narrow. */
/* The fonts come from this server, so nothing on the page talks to a third party. */
@font-face { font-family: "Instrument Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/InstrumentSans-400.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/InstrumentSans-500.ttf") format("truetype"); }
@font-face { font-family: "Instrument Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/InstrumentSans-600.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-400.ttf") format("truetype"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fonts/IBMPlexMono-500.ttf") format("truetype"); }
@font-face { font-family: "Archivo"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/Archivo-700.ttf") format("truetype"); }

:root {
  --paper: #F3F4F7; --raised: #FAFBFD; --tint: #EAEDF3; --hair: #DDE0E7; --hair-soft: #E6E9EF; --hair-deep: #D5DAE4;
  --midnight: #0F1F3D; --ink-soft: #4B5263; --ink-mute: #6B7280; --ink-faint: #8C95A8; --ink-label: #5C6577;
  --cobalt: #2F5DBF; --cobalt-light: #5B8FD6; --yellow: #F2C43D; --amber: #C48A12; --amber-text: #8A5F0A;
  --night: #16294D; --night-line: #26395F; --night-line-2: #3A4F78; --night-text: #B8C0D2; --night-mute: #9AA3B8; --night-faint: #6C7A99;
  --sans: "Instrument Sans", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --wordmark: "Archivo", "Instrument Sans", sans-serif;
  --container: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { color-scheme: light; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--midnight); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--cobalt); text-decoration: none; }
a:hover { color: var(--midnight); }
h1, h2, h3 { margin: 0; font-weight: 600; }
p { margin: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }
.wrap { max-width: var(--container); margin: 0 auto; padding: 0 40px; }

/* --- type roles from the blueprint --- */
.eyebrow { font: 600 12px/1 var(--wordmark); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; }
.eyebrow-dark { color: var(--night-mute); }
.mono-label { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-label); }
h2.title { font: 600 clamp(30px, 3.2vw, 42px)/1.06 var(--sans); letter-spacing: -.028em; color: var(--midnight); text-wrap: balance; }
.intro { font: 400 16px/1.6 var(--sans); color: var(--ink-soft); text-wrap: pretty; }
.card-title { font: 600 20px/1.2 var(--sans); letter-spacing: -.02em; margin: 0 0 10px; }
.card-text { font: 400 15px/1.55 var(--sans); color: var(--ink-label); text-wrap: pretty; }

/* --- buttons --- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 500 15px/1 var(--sans); padding: 15px 22px; border-radius: 2px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.btn-solid { background: var(--midnight); color: var(--paper); border-color: var(--midnight); }
.btn-solid:hover { background: var(--cobalt); border-color: var(--cobalt); color: var(--paper); }
.btn-solid[disabled] { opacity: .6; cursor: default; }
.btn-line { border-color: var(--midnight); color: var(--midnight); background: transparent; }
.btn-line:hover { background: var(--midnight); color: var(--paper); }
.btn-soft { border-color: #C0C7D4; color: var(--midnight); background: transparent; }
.btn-soft:hover { border-color: var(--midnight); color: var(--midnight); }
.btn-paper { background: var(--paper); color: var(--midnight); border-color: var(--paper); }
.btn-paper:hover { background: var(--yellow); border-color: var(--yellow); color: var(--midnight); }
.btn-night { border-color: var(--night-line-2); color: var(--night-text); background: none; }
.btn-night:hover { color: var(--paper); border-color: var(--night-mute); }
.btn-sm { font-size: 14px; padding: 11px 18px; }
.btn .hint { font: 400 12px/1 var(--mono); color: #9EA6B8; }

/* --- header --- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(243, 244, 247, .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--hair); }
.top .wrap { height: 68px; display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; gap: 9px; color: var(--midnight); }
.brand svg { flex: none; }
.wordmark { font: 700 21px/1 var(--wordmark); letter-spacing: -.04em; }
.nav { display: flex; gap: 26px; align-items: center; margin-left: 8px; }
.nav a { font: 500 14px/1 var(--sans); color: var(--midnight); }
.nav a:hover { color: var(--cobalt); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.btn-login { border: 1px solid var(--hair); background: var(--raised); color: var(--midnight); font: 500 14px/1 var(--sans); padding: 10px 15px; border-radius: 2px; }
.btn-login:hover { border-color: var(--midnight); background: #fff; color: var(--midnight); }
.btn-top { background: var(--midnight); color: var(--paper); font: 500 14px/1 var(--sans); padding: 11px 18px; border-radius: 2px; }
.btn-top:hover { background: var(--cobalt); color: var(--paper); }
.menu-toggle { display: none; }
.lang { display: flex; align-items: center; gap: 6px; font: 500 12px/1 var(--mono); letter-spacing: .06em; }
.lang span { color: var(--midnight); }
.lang i { font-style: normal; color: #C0C7D4; }
.lang a { color: var(--ink-mute); }
.lang a:hover { color: var(--midnight); }
.foot .lang span { color: var(--paper); }
.foot .lang i { color: var(--night-line-2); }
.foot .lang a { color: var(--night-mute); }
.foot .lang a:hover { color: var(--paper); }

/* --- hero --- */
.hero { display: grid; grid-template-columns: 1.02fr .98fr; gap: 64px; align-items: center; padding: 88px 0 72px; }
.pill { display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--hair); background: var(--raised); padding: 7px 12px; border-radius: 100px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-label); margin-bottom: 26px; }
.pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.hero h1 { font: 600 clamp(42px, 5.2vw, 68px)/1.02 var(--sans); letter-spacing: -.035em; margin: 0 0 22px; text-wrap: balance; }
.hero .lead { font: 400 19px/1.55 var(--sans); color: var(--ink-soft); margin: 0 0 34px; max-width: 50ch; text-wrap: pretty; }
.hero .actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.proof { display: flex; gap: 28px; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--hair); flex-wrap: wrap; }
.proof b { display: block; font: 500 26px/1 var(--mono); letter-spacing: -.02em; }
.proof span { display: block; font: 400 13px/1.4 var(--sans); color: var(--ink-mute); margin-top: 6px; }

.figure { margin: 0; background: var(--raised); border: 1px solid var(--hair); border-radius: 4px; padding: 24px 24px 18px; }
.figure figcaption { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; gap: 12px; }
.figure .meta { font: 400 11px/1 var(--mono); color: var(--ink-faint); }
.figure svg { width: 100%; height: auto; display: block; }
.legend { display: flex; gap: 22px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hair-soft); flex-wrap: wrap; }
.legend span { display: flex; align-items: center; gap: 8px; font: 400 12px/1 var(--mono); color: var(--ink-label); }
.legend i { width: 14px; height: 2px; display: inline-block; }
.legend .gap { margin-left: auto; color: var(--ink-faint); }
@keyframes cx-draw { from { stroke-dashoffset: 2400; } to { stroke-dashoffset: 0; } }
@keyframes cx-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.draw { stroke-dasharray: 2400; animation: cx-draw 1.9s cubic-bezier(.6, 0, .2, 1) both; }
.draw-2 { animation-duration: 2.2s; animation-delay: .25s; }
.fade { animation: cx-fade .5s both; }
.fade-1 { animation-delay: 1.5s; }
.fade-2 { animation-delay: 1.75s; }

/* --- the strip: one claim, the sectors as examples --- */
.strip { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); background: var(--raised); }
.strip .wrap { padding: 30px 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; align-items: center; }
.strip-claim { font: 600 clamp(20px, 2vw, 25px)/1.25 var(--sans); letter-spacing: -.025em; color: var(--midnight); text-wrap: balance; max-width: 22ch; margin: 0; }
.strip-sectors { display: flex; flex-direction: column; gap: 12px; }
.strip-sectors .mono-label { color: var(--ink-faint); }
.strip-sectors ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.strip-sectors li { font: 500 14px/1 var(--sans); color: var(--midnight); border: 1px solid var(--hair); background: var(--paper); border-radius: 100px; padding: 9px 14px; }

/* --- sections --- */
.section { padding: 82px 0 0; }
.split { display: grid; grid-template-columns: 340px 1fr; gap: 64px; align-items: start; }
.split .sticky { position: sticky; top: 100px; }
.grid-cells { display: grid; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; }
.grid-cells > * { background: var(--paper); padding: 28px; }
.cols-2 { grid-template-columns: 1fr 1fr; }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.num { font: 500 12px/1 var(--mono); color: var(--amber-text); margin-bottom: 14px; }
.cell h3 { font: 600 19px/1.25 var(--sans); letter-spacing: -.015em; margin: 0 0 10px; }

.services-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 36px; flex-wrap: wrap; }
.services-head .intro { max-width: 38ch; }
.service { background: var(--raised) !important; padding: 30px !important; color: var(--midnight); display: block; }
.service:hover { background: #fff !important; }
.glyph { height: 56px; display: flex; align-items: flex-end; gap: 4px; margin-bottom: 22px; }
.glyph.center { align-items: center; }
.glyph .bar { display: block; width: 7px; background: var(--yellow); }
.glyph .bar-b { display: block; width: 5px; background: var(--cobalt); }
.glyph .box { width: 26px; height: 26px; border: 2px solid var(--cobalt); border-radius: 2px; }
.glyph .box.fill { background: var(--cobalt); opacity: .12; }
.glyph .box.dash { border: 2px dashed #C0C7D4; }
.glyph .round { width: 34px; height: 34px; border-radius: 50%; }
.glyph .round.fill { background: var(--amber); opacity: .9; }
.glyph .round.dash { border: 2px dashed #C0C7D4; }
.roster { height: 56px; display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; width: 120px; margin-bottom: 22px; }
.roster span { border-radius: 1px; background: var(--hair); }
.roster .on { background: var(--cobalt); opacity: .75; }
.roster .half { background: var(--cobalt); opacity: .35; }

.aside-note { border-left: 2px solid var(--yellow); padding-left: 16px; font: 400 15px/1.6 var(--sans); color: var(--midnight); }
.steps { display: flex; flex-direction: column; gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.step { background: var(--paper); padding: 30px 0; display: grid; grid-template-columns: 80px 1fr 200px; gap: 24px; align-items: start; }
.step .big { font: 500 34px/1 var(--mono); color: #CBD1DD; letter-spacing: -.03em; }
.step h3 { font: 600 21px/1.2 var(--sans); letter-spacing: -.02em; margin: 0 0 8px; }
.step .deliver { font: 400 13px/1.5 var(--mono); color: var(--ink-mute); }

/* --- the scan, on midnight --- */
.scan { background: var(--midnight); margin-top: 82px; color: var(--paper); }
.scan .wrap { padding: 76px 40px; }
.scan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.scan h2.title { color: var(--paper); letter-spacing: -.03em; }
.scan .intro { color: var(--night-text); font-size: 17px; max-width: 46ch; margin-bottom: 28px; }
.axes { display: flex; flex-direction: column; gap: 22px; }
.axis { border-top: 1px solid var(--night-line); padding-top: 18px; }
.axis-head { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 14px; }
.axis-head .key { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--night-mute); }
.axis-head .counter { font: 400 12px/1 var(--mono); color: var(--night-faint); }
.axis p { font: 500 17px/1.4 var(--sans); color: var(--paper); margin: 0 0 14px; text-wrap: pretty; }
.options { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { border: 1px solid var(--night-line-2); background: transparent; color: var(--night-text); font: 500 13px/1 var(--sans); padding: 10px 14px; border-radius: 2px; cursor: pointer; transition: all .15s ease; }
.opt:hover { border-color: var(--night-mute); color: var(--paper); }
.opt[aria-pressed="true"] { border-color: var(--paper); background: var(--paper); color: var(--midnight); }
.scan-more { margin-top: 22px; border: 0; background: none; color: var(--night-mute); font: 500 13px/1 var(--mono); letter-spacing: .06em; cursor: pointer; padding: 0; }
.scan-more:hover { color: var(--paper); }
.result { background: var(--night); border: 1px solid var(--night-line); border-radius: 4px; padding: 32px; position: sticky; top: 100px; }
.result-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.result-head .mono-label { color: var(--night-mute); }
.result-head .count { font: 400 12px/1 var(--mono); color: var(--night-faint); }
.level { display: flex; align-items: baseline; gap: 14px; margin-bottom: 6px; }
.level b { font: 500 clamp(40px, 5vw, 60px)/1 var(--mono); letter-spacing: -.04em; color: var(--paper); }
.level span { font: 600 26px/1.1 var(--sans); letter-spacing: -.025em; color: var(--paper); }
.result .blurb { font: 400 15px/1.6 var(--sans); color: var(--night-text); margin: 0 0 26px; min-height: 66px; text-wrap: pretty; }
.bars { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.bar-row .labels { display: flex; justify-content: space-between; font: 400 12px/1 var(--mono); color: var(--night-mute); margin-bottom: 6px; }
.bar-row .track { height: 6px; background: #1E3358; border-radius: 100px; overflow: hidden; }
.bar-row .fill { height: 100%; width: 0; background: var(--cobalt-light); transition: width .3s cubic-bezier(.4, 0, .2, 1); }
.bar-row .fill.low { background: var(--yellow); }
.advice { border-top: 1px solid var(--night-line); padding-top: 22px; }
.advice .mono-label { color: var(--night-mute); display: block; margin-bottom: 10px; }
.advice p { font: 400 15px/1.6 var(--sans); color: var(--paper); margin: 0 0 22px; text-wrap: pretty; }
.advice .actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* --- the calculator --- */
.calc { border: 1px solid var(--hair); border-radius: 4px; background: var(--raised); overflow: hidden; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calc-in { padding: 30px; border-right: 1px solid var(--hair); display: flex; flex-direction: column; gap: 26px; }
.calc-in label { font: 500 13px/1 var(--sans); color: var(--midnight); }
.calc-in .row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.calc-in .val { font: 500 15px/1 var(--mono); color: var(--midnight); }
.calc-in .val.amber { color: var(--amber-text); }
.calc-in input[type=range] { width: 100%; accent-color: var(--cobalt); margin: 0; }
.calc-in .scale { display: flex; justify-content: space-between; gap: 12px; font: 400 11px/1 var(--mono); color: var(--ink-faint); margin-top: 8px; white-space: nowrap; }
.calc-out { padding: 30px; background: var(--tint); display: flex; flex-direction: column; justify-content: center; gap: 22px; }
.calc-out .mono-label { color: var(--ink-mute); display: block; margin-bottom: 10px; letter-spacing: .12em; }
.calc-out .loss { font: 500 clamp(26px, 3.2vw, 44px)/1.05 var(--mono); letter-spacing: -.04em; white-space: nowrap; }
.calc-out .gain { font: 500 clamp(26px, 2.8vw, 34px)/1 var(--mono); letter-spacing: -.03em; color: var(--cobalt); }
.calc-out .sub { font: 400 13px/1.5 var(--sans); color: var(--ink-label); margin-top: 10px; }
.calc-out .part { border-top: 1px solid var(--hair-deep); padding-top: 20px; }
.fine { font: 400 13px/1.55 var(--mono); color: var(--ink-faint); }

/* --- about --- */
.about { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.about .intro { font-size: 17px; margin-bottom: 18px; }
.yes-no { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; margin-top: 10px; }
.yes-no > div { background: var(--raised); padding: 20px; }
.yes-no .mono-label { display: block; margin-bottom: 8px; color: var(--ink-mute); letter-spacing: .12em; }
.yes-no p { font: 400 15px/1.5 var(--sans); color: var(--midnight); }
.portrait { width: 100%; height: auto; display: block; border: 1px solid var(--hair); border-radius: 4px; background: var(--tint); }
.founder { display: flex; gap: 14px; margin-top: 14px; align-items: baseline; flex-wrap: wrap; }
.founder b { font: 500 15px/1.4 var(--sans); }
.founder span { font: 400 14px/1.4 var(--mono); color: var(--ink-mute); }

/* --- objections --- */
.qa { display: flex; flex-direction: column; }
.qa > div { border-top: 1px solid var(--hair); padding: 24px 0; display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; }
.qa > div:last-child { border-bottom: 1px solid var(--hair); }
.qa h3 { font: 600 18px/1.35 var(--sans); letter-spacing: -.015em; }
.qa p { font: 400 15px/1.6 var(--sans); color: var(--ink-label); text-wrap: pretty; }

/* --- contact --- */
.contact { margin-top: 82px; border-top: 1px solid var(--hair); background: var(--raised); }
.contact .wrap { padding: 76px 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.contact h2.title { font-size: clamp(32px, 3.6vw, 48px); letter-spacing: -.03em; margin-bottom: 20px; }
.contact .intro { font-size: 17px; max-width: 44ch; margin-bottom: 30px; }
.ways { display: flex; flex-direction: column; gap: 14px; }
.ways > div { display: flex; gap: 12px; align-items: baseline; }
.ways .k { font: 500 12px/1.5 var(--mono); color: var(--amber-text); width: 80px; flex: none; }
.ways a, .ways span.v { font: 500 16px/1.4 var(--sans); }
.ways span.v { font-weight: 400; color: var(--ink-soft); }
.form-card { background: var(--paper); border: 1px solid var(--hair); border-radius: 4px; padding: 32px; }
.form { display: flex; flex-direction: column; gap: 18px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field label, .field .lbl { display: block; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px; }
.field input, .field textarea { width: 100%; border: 1px solid var(--hair); background: var(--raised); border-radius: 2px; padding: 12px; font: 400 15px/1.3 var(--sans); color: var(--midnight); }
.field textarea { line-height: 1.5; resize: vertical; min-height: 96px; }
.field input:focus, .field textarea:focus { border-color: var(--cobalt); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field select { width: 100%; appearance: none; -webkit-appearance: none; border: 1px solid var(--hair); background: var(--raised); border-radius: 2px; padding: 12px 36px 12px 12px; font: 400 15px/1.3 var(--sans); color: var(--midnight); cursor: pointer; }
.field select:focus { border-color: var(--cobalt); outline: none; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { border: 1px solid var(--hair); background: var(--raised); color: var(--ink-soft); font: 500 13px/1 var(--sans); padding: 9px 13px; border-radius: 100px; cursor: pointer; transition: all .15s ease; }
.chip:hover { border-color: var(--midnight); }
.chip[aria-pressed="true"] { border-color: var(--midnight); background: var(--midnight); color: var(--paper); }
.form .btn { width: 100%; }
.form .small { font: 400 12px/1.5 var(--mono); color: var(--ink-faint); }
.form-error { background: #F6E4E0; color: #8E2E20; padding: 12px 14px; border-radius: 2px; font: 400 14px/1.5 var(--sans); }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
altcha-widget {
  --altcha-border-width: 1px; --altcha-border-radius: 2px; --altcha-color-base: var(--raised);
  --altcha-color-border: var(--hair); --altcha-color-border-focus: var(--cobalt); --altcha-color-text: var(--midnight);
  --altcha-color-error-text: #8E2E20; --altcha-color-footer-bg: var(--raised); --altcha-max-width: 100%;
  display: block; font: 400 14px/1.3 var(--sans);
}
.done { min-height: 300px; display: flex; flex-direction: column; justify-content: center; gap: 14px; animation: cx-fade .3s both; }
.done .tick { width: 34px; height: 34px; border-radius: 50%; background: var(--cobalt); display: flex; align-items: center; justify-content: center; color: var(--paper); font: 500 16px/1 var(--mono); }
.done h3 { font: 600 22px/1.2 var(--sans); letter-spacing: -.02em; }
.done p { font: 400 15px/1.6 var(--sans); color: var(--ink-label); }

/* --- portal --- */
.portal { padding: 76px 0; }
.portal-card { border: 1px solid var(--hair); border-radius: 4px; background: var(--raised); padding: 36px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
.portal-card h2.title { font-size: clamp(26px, 2.8vw, 36px); margin-bottom: 14px; }
.portal-card .intro { max-width: 52ch; }
.portal-actions { display: flex; flex-direction: column; gap: 12px; }
.portal-actions .fine { margin-top: 4px; font-size: 12px; line-height: 1.6; }

/* --- footer: four columns on one grid, one heading, one list --- */
.foot { background: var(--midnight); color: var(--night-text); }
.foot .cols { padding: 60px 40px 36px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; align-items: start; }
.foot .brand { color: var(--paper); display: flex; height: 26px; align-items: center; }
.foot .about-line { font: 400 15px/1.6 var(--sans); color: var(--night-mute); margin: 18px 0 0; max-width: 32ch; }
.foot h4 { margin: 0 0 14px; height: 26px; display: flex; align-items: center; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--night-faint); }
.foot .links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font: 400 14px/1.3 var(--sans); color: var(--night-text); }
.foot .links a { color: var(--night-text); }
.foot .links a:hover { color: var(--paper); }
.foot .bottom { padding: 22px 40px 40px; border-top: 1px solid var(--night-line); display: grid; grid-template-columns: 1fr auto; gap: 12px 24px; align-items: center; font: 400 12px/1 var(--mono); color: var(--night-faint); }
.foot .bottom a { color: var(--night-faint); }
.foot .bottom a:hover { color: var(--night-text); }
.foot .bottom-links { display: flex; gap: 22px; justify-self: end; align-items: center; }
.foot .privacy-line { grid-column: 1 / -1; font: 400 12px/1.6 var(--sans); color: var(--night-mute); }
.legal { max-width: 720px; margin: 0 auto; padding: 72px 40px 96px; }
.legal h1 { font: 600 clamp(30px, 3.4vw, 42px)/1.06 var(--sans); letter-spacing: -.03em; margin: 8px 0 14px; }
.legal h2 { font: 600 19px/1.3 var(--sans); letter-spacing: -.015em; margin: 32px 0 8px; }
.legal p, .legal li { font: 400 16px/1.6 var(--sans); color: var(--ink-soft); }
.legal ul { padding-left: 20px; margin: 0; }
.legal .updated { font: 400 12px/1 var(--mono); color: var(--ink-faint); margin-top: 28px; }

/* --- toast --- */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 99; background: var(--midnight); color: var(--paper); padding: 14px 20px; border-radius: 3px; font: 400 14px/1.4 var(--sans); display: flex; gap: 16px; align-items: center; box-shadow: 0 12px 40px rgba(15, 31, 61, .22); animation: cx-fade .25s ease both; }
.toast button { border: 0; background: none; color: var(--ink-mute); cursor: pointer; font: 500 12px/1 var(--mono); }

/* --- single pages --- */
.single { min-height: 70vh; display: grid; place-items: center; padding: 64px 40px; }
.single .form-card { max-width: 520px; }
.single h1 { font: 600 30px/1.1 var(--sans); letter-spacing: -.03em; margin: 12px 0 0; }
.single p { margin-top: 12px; color: var(--ink-soft); }
.single .actions { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; }

/* --- narrow --- */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 40px; padding: 56px 0 48px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split .sticky { position: static; }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .scan-grid { grid-template-columns: 1fr; }
  .result { position: static; }
  .about { grid-template-columns: 1fr; gap: 32px; }
  .portal-card { grid-template-columns: 1fr; gap: 24px; }
  .contact .wrap { grid-template-columns: 1fr; gap: 36px; }
  .foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .wrap, .strip .wrap, .scan .wrap, .contact .wrap { padding-left: 20px; padding-right: 20px; }
  .top .wrap { gap: 16px; height: 62px; }
  .nav { display: none; }
  .top[data-open="true"] .nav { display: flex; position: absolute; top: 62px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; margin: 0; background: var(--raised); border-bottom: 1px solid var(--hair); }
  .top[data-open="true"] .nav a { padding: 14px 20px; border-top: 1px solid var(--hair); }
  .btn-login { display: none; }
  .menu-toggle { display: inline-flex; align-items: center; border: 1px solid var(--hair); background: var(--raised); border-radius: 2px; padding: 9px 12px; font: 500 13px/1 var(--mono); cursor: pointer; color: var(--midnight); }
  .hero h1 { font-size: 38px; }
  .hero .lead { font-size: 17px; }
  .proof { gap: 20px; }
  .section { padding-top: 56px; }
  .cols-2, .cols-3 { grid-template-columns: 1fr; }
  .step { grid-template-columns: 56px 1fr; }
  .step .deliver { grid-column: 2; }
  .scan { margin-top: 56px; }
  .scan .wrap { padding-top: 56px; padding-bottom: 56px; }
  .calc { grid-template-columns: 1fr; }
  .calc-in { border-right: 0; border-bottom: 1px solid var(--hair); }
  .yes-no, .qa > div, .two { grid-template-columns: 1fr; }
  .qa > div { gap: 10px; }
  .contact { margin-top: 56px; }
  .contact .wrap { padding-top: 56px; padding-bottom: 56px; }
  .form-card { padding: 22px; }
  .portal { padding: 56px 0; }
  .portal-card { padding: 24px; }
  .foot .cols { grid-template-columns: 1fr; gap: 28px; padding: 44px 20px 24px; }
  .foot .bottom { padding: 18px 20px 32px; grid-template-columns: 1fr; }
  .foot .bottom-links { justify-self: start; }
  .strip .wrap { grid-template-columns: 1fr; gap: 18px; padding: 24px 20px; }
  .strip-claim { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .draw, .fade, .done, .toast { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}