/* Handstand Finance: the brand system for every public surface (teaser, website, documents).
   Consolidated 27 Oct 2026 from the prototype the client approved (prototype/assets/site.css, three passes)
   and the platform's ported copy (platform/app/styles/site.css). One name per value; drift resolved in
   brand/system/index.html under "Consolidation". The app (portal, admin) keeps its own neutral ramp in
   platform/app/styles/app.css but takes its brand colours and type from the tokens here. */

:root {
  /* brand colour */
  --hs-navy: #0B1230;          /* dark ground, brand ink */
  --hs-cobalt: #2B4BFF;        /* primary */
  --hs-cobalt-deep: #1A2FBF;   /* primary pressed, links on tint */
  --hs-cobalt-tint: #E7EBFF;   /* light ground */
  --hs-cobalt-line: #C9D2FF;   /* tint borders, cobalt on navy text */
  --hs-tangerine: #FF6B2C;     /* the one warm signal: primary action, highlights */
  --hs-tangerine-hover: #FF8148;
  --hs-tangerine-deep: #E5531A;

  /* neutrals */
  --hs-ink: #0A0E1A;
  --hs-ink-2: #3D4357;         /* body on light */
  --hs-ink-3: #5E657A;         /* captions, hints */
  --hs-paper: #F5F4F0;         /* page ground */
  --hs-white: #FFFFFF;         /* cards, fields */
  --hs-line: rgba(10,14,26,.12);
  --hs-line-strong: rgba(10,14,26,.28);
  --hs-line-dark: rgba(255,255,255,.14);
  --hs-on-dark: #F2F4FB;
  --hs-on-dark-2: rgba(236,239,250,.78);
  --hs-on-dark-3: rgba(236,239,250,.6);
  --hs-danger: #D1341B;

  /* type */
  --hs-disp: 'Archivo', 'Geist', system-ui, sans-serif;   /* always at wdth 112 */
  --hs-body: 'Geist', system-ui, -apple-system, sans-serif;
  --hs-mono: 'Geist Mono', ui-monospace, monospace;        /* numerals, rands, days, tags */

  /* radius: six steps, replacing fifteen */
  --hs-r-xs: 4px;    /* inline highlights */
  --hs-r-sm: 8px;    /* segmented buttons, stamps */
  --hs-r-md: 12px;   /* fields, chips with icons, small tiles */
  --hs-r-lg: 18px;   /* cards, tiles, calculator, list panels */
  --hs-r-xl: 24px;   /* product cards, photos, result panels, sheets */
  --hs-r-pill: 999px;

  /* space */
  --hs-wrap: 1280px;
  --hs-gx: clamp(20px, 5vw, 64px);
  --hs-sec: clamp(72px, 10vw, 136px);
  --hs-sec-s: clamp(56px, 7vw, 96px);

  /* elevation: paper on paper */
  --hs-raise: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 1px rgba(10,14,26,.16);
  --hs-lift: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(10,14,26,.14);
  --hs-well: inset 0 0 0 1.5px var(--hs-line);
  --hs-edge: inset 0 0 0 1px var(--hs-line);
  --hs-float: 0 16px 56px rgba(0,0,0,.3);   /* modals only */
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body { background: var(--hs-paper); color: var(--hs-ink); font: 400 17.5px/1.6 var(--hs-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
.wrap { max-width: var(--hs-wrap); margin: 0 auto; padding: 0 var(--hs-gx); }
.num { font-family: var(--hs-mono); font-feature-settings: 'tnum'; letter-spacing: -.02em; }
.ic { display: inline-block; vertical-align: middle; flex: none; }

/* type scale: four display sizes, one lede, one body, two small */
.d1, .d2, .d3, .d4 { font-family: var(--hs-disp); font-variation-settings: 'wdth' 112; margin: 0; }
.d1 { font-weight: 800; font-size: clamp(44px, 5.4vw, 80px); line-height: .98; letter-spacing: -.04em; }
.d2 { font-weight: 800; font-size: clamp(36px, 4.4vw, 62px); line-height: 1.02; letter-spacing: -.035em; }
.d3 { font-weight: 700; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.d4 { font-weight: 700; font-size: 21px; line-height: 1.2; letter-spacing: -.01em; }
.d1 em, .d2 em { font-style: normal; color: var(--hs-tangerine); }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--hs-ink-2); max-width: 36em; margin: 0; }
.small { font-size: 14.5px; color: var(--hs-ink-3); }
.caption { font-size: 12.5px; line-height: 1.45; color: var(--hs-ink-3); }
.kicker { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; font-weight: 700; font-size: 15px; color: var(--hs-cobalt); }

/* on dark grounds */
.on-dark { color: var(--hs-on-dark); }
.on-dark .lede { color: var(--hs-on-dark-2); }
.on-dark .kicker, .on-dark .tlink { color: var(--hs-tangerine); }
.on-dark .small, .on-dark .caption { color: var(--hs-on-dark-3); }

/* sections */
section { position: relative; }
.sec { padding: var(--hs-sec) 0; }
.sec-s { padding: var(--hs-sec-s) 0; }
.bg-paper { background: var(--hs-paper); }
.bg-white { background: var(--hs-white); }
.bg-navy { background: var(--hs-navy); }
.bg-tint { background: var(--hs-cobalt-tint); }
.bg-cobalt { background: var(--hs-cobalt); color: #fff; }
.bg-ink { background: var(--hs-ink); }
.sec-head { max-width: 40em; }
.sec-head .lede { margin-top: 20px; }

/* logo. In bars and headers the mark and wordmark sit side by side at their own sizes, because in the
   stacked lockup the wordmark is a quarter of the height and too small to read at bar height. */
.hs-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.hs-logo .m { height: 52px; width: auto; }
.hs-logo .w { height: 26px; width: auto; }
.hs-logo .lk { height: 84px; width: auto; }   /* the v2 lockup, Oto 27 Oct */
/* Round 3 horizontal lockup (Oto, 30 Oct). Live type until it is set to outlines; sizes in em of a 17em-tall lockup,
   FINANCE tracked so it ends exactly where the d ends (measured in logo/options-r3). */
.hs-logo .lk3 { display: inline-flex; align-items: center; gap: 1.2em; height: 17em; font-size: calc(62px / 17); color: var(--navy, #0B1230); }
.hs-logo .lk3 .mk { display: block; height: 100%; width: auto; flex: none; }
.hs-logo .lk3 .words { display: flex; flex-direction: column; align-items: flex-start; gap: .8em; }
.hs-logo .lk3 .w1, .hs-logo .lk3 .w2 { font-family: Archivo, sans-serif; font-variation-settings: 'wdth' 112; line-height: .86; white-space: nowrap; }
.hs-logo .lk3 .w1 { font-weight: 800; font-size: 7.6em; letter-spacing: -.035em; }
.hs-logo .lk3 .w2 { font-weight: 700; font-size: 5.43em; letter-spacing: .45em; margin-right: -.45em; }
.site-f .hs-logo .lk3 { color: #fff; }
.hs-lockup { height: 120px; width: auto; }

/* header */
.site-h { position: sticky; top: 0; z-index: 30; background: rgba(245,244,240,.9); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--hs-line); }
.site-h.dark { background: rgba(11,18,48,.92); border-bottom-color: var(--hs-line-dark); }
.site-h .wrap { display: flex; align-items: center; gap: 28px; height: 96px; }
.site-h .h-end { margin-left: auto; display: flex; gap: 12px; align-items: center; }

/* buttons: three kinds, two sizes */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border-radius: var(--hs-r-pill); font: 700 16px/1 var(--hs-body); text-decoration: none; border: 0; cursor: pointer; white-space: nowrap; box-shadow: var(--hs-raise); }
.btn.sm { height: 42px; padding: 0 18px; font-size: 15px; }
.btn.primary { background: var(--hs-tangerine); color: var(--hs-ink); }
.btn.primary:hover { background: var(--hs-tangerine-hover); }
.btn.navy { background: var(--hs-navy); color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 1px 1px rgba(10,14,26,.3); }
.btn.navy:hover { background: var(--hs-cobalt); }
.btn.line { background: transparent; color: var(--hs-ink); box-shadow: inset 0 0 0 1.5px var(--hs-line-strong); }
.btn.line:hover { box-shadow: inset 0 0 0 1.5px var(--hs-ink); }
.on-dark .btn.line, .hero .btn.line, .site-h.dark .btn.line, .bg-cobalt .btn.line { color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.45); }
.bg-cobalt .btn.navy { background: #fff; color: var(--hs-ink); }
.btn[disabled] { opacity: .6; cursor: default; }
.tlink { font-weight: 700; color: var(--hs-cobalt); text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.tlink:hover { text-decoration: underline; text-underline-offset: 4px; }

/* tags: mono pills */
.tag { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px/1 var(--hs-mono); padding: 8px 12px; border-radius: var(--hs-r-pill); background: rgba(10,14,26,.07); color: var(--hs-ink-2); }
.tag.hot { background: var(--hs-tangerine); color: var(--hs-ink); }
.tag.soft { background: rgba(255,255,255,.7); color: var(--hs-ink); }

/* hero: photo leads, copy left */
.hero { background: var(--hs-navy); color: var(--hs-on-dark); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: 1fr 1.08fr; gap: clamp(32px, 5vw, 80px); align-items: center; padding-top: 64px; padding-bottom: 96px; position: relative; z-index: 1; }
.hero .lede { margin-top: 28px; color: var(--hs-on-dark-2); }
.hero .kicker { color: var(--hs-tangerine); }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 40px; }
.hero-note { margin-top: 22px; font-size: 14.5px; color: var(--hs-on-dark-3); display: flex; gap: 8px; align-items: center; }
.hero-grid { position: absolute; inset: 0; pointer-events: none; opacity: .5; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); }
.hero-visual { position: relative; align-self: stretch; min-height: 620px; }
.photo { border-radius: var(--hs-r-xl); overflow: hidden; position: relative; background: #1A2350; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.hero-visual .photo { position: absolute; inset: 0; }
.hero-visual .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(11,18,48,0) 45%, rgba(11,18,48,.55) 100%); }

/* floating chip over a photo */
.chip { position: absolute; z-index: 2; background: rgba(255,255,255,.94); color: var(--hs-ink); border-radius: 14px; padding: 12px 14px; font-size: 13.5px; font-weight: 600; display: flex; gap: 10px; align-items: center; box-shadow: var(--hs-lift); }
.chip .dot { width: 34px; height: 34px; border-radius: 10px; background: var(--hs-cobalt); color: #fff; display: grid; place-items: center; }
.chip .dot.hot { background: var(--hs-tangerine); color: var(--hs-ink); }
.chip small { display: block; font: 500 12px/1.3 var(--hs-mono); color: var(--hs-ink-3); }

/* product cards: one feature card on navy, two on white */
.prods { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; margin-top: 56px; }
.prod { border-radius: var(--hs-r-xl); padding: 34px; display: flex; flex-direction: column; text-decoration: none; position: relative; overflow: hidden; min-height: 250px; background: var(--hs-white); box-shadow: var(--hs-edge); }
.prod.feature { grid-row: span 2; background: var(--hs-navy); color: #fff; padding: 0; box-shadow: none; }
.prod.feature .prod-img { height: 260px; position: relative; }
.prod.feature .prod-img img { width: 100%; height: 100%; object-fit: cover; }
.prod.feature .prod-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,48,0) 40%, var(--hs-navy) 100%); }
.prod.feature .prod-body { padding: 0 42px 42px; display: flex; flex-direction: column; flex: 1; }
.prod .tag { align-self: flex-start; }
.prod h3 { font: 800 30px/1 var(--hs-disp); font-variation-settings: 'wdth' 112; letter-spacing: -.03em; margin: 22px 0 12px; }
.prod.feature h3 { font-size: clamp(30px, 3.2vw, 44px); }
.prod p { margin: 0; opacity: .85; max-width: 30em; }
.prod .go { margin-top: auto; padding-top: 28px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.prod.feature .go { color: var(--hs-tangerine); }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 64px; border-top: 2px solid var(--hs-ink); }
.steps.three { grid-template-columns: repeat(3, 1fr); }
.step { padding: 26px 26px 0 0; }
.step + .step { padding-left: 26px; border-left: 1px solid rgba(10,14,26,.14); }
.step .n { font: 600 56px/1 var(--hs-mono); letter-spacing: -.05em; color: var(--hs-cobalt); }
.step h4 { font: 700 21px/1.2 var(--hs-disp); font-variation-settings: 'wdth' 112; margin: 22px 0 10px; letter-spacing: -.01em; }
.step p { margin: 0; font-size: 15.5px; color: var(--hs-ink-2); }
.step .tag { margin-top: 16px; }

/* split: photo beside copy */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.split .photo { min-height: 520px; }
.split .photo img, .hero-visual .photo img { position: absolute; inset: 0; }
.split .photo .tag { position: absolute; left: 20px; top: 20px; z-index: 1; }

/* lists with icons */
.list { list-style: none; padding: 0; margin: 28px 0 0; }
.list li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--hs-line); font-weight: 500; }
.list li .ic { margin-top: 3px; color: var(--hs-cobalt); }
.list li small { display: block; color: var(--hs-ink-3); font-weight: 500; font-size: 14.5px; margin-top: 2px; }
.on-dark .list li { border-bottom-color: var(--hs-line-dark); }
.on-dark .list li .ic { color: var(--hs-tangerine); }
.on-dark .list li small { color: var(--hs-on-dark-3); }

/* tiles on navy */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.tile { background: rgba(255,255,255,.06); border: 1px solid var(--hs-line-dark); border-radius: var(--hs-r-lg); padding: 28px; }
.tile .ic { color: var(--hs-tangerine); }
.tile h4 { font: 700 20px/1.2 var(--hs-disp); font-variation-settings: 'wdth' 112; margin: 22px 0 8px; color: #fff; }
.tile p { margin: 0; font-size: 15.5px; color: rgba(236,239,250,.75); }
.tile.wide { grid-column: span 2; display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; background: var(--hs-tangerine); border: 0; color: var(--hs-ink); }
.tile.wide h4 { color: var(--hs-ink); margin-top: 0; }
.tile.wide p { color: rgba(10,14,26,.78); }
.tile.wide .ic { color: var(--hs-ink); }

/* figures: mono numerals */
.figs { display: flex; gap: 40px; flex-wrap: wrap; }
.figs b { display: block; font: 600 40px/1 var(--hs-mono); letter-spacing: -.04em; color: var(--hs-tangerine); }
.figs span { font-size: 14px; opacity: .8; }

/* faq */
.faq { margin-top: 40px; border-top: 2px solid var(--hs-ink); }
.faq details { border-bottom: 1px solid var(--hs-line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 24px 0; font: 700 20px/1.3 var(--hs-disp); font-variation-settings: 'wdth' 112; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { transition: transform .2s; margin-top: 3px; }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { margin: -6px 0 24px; color: var(--hs-ink-2); max-width: 44em; }

/* cta band */
.cta-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; }
.cta-band .d2 { max-width: 13em; }
.cta-band .acts { display: flex; gap: 12px; flex-wrap: wrap; }

/* forms */
.panel { background: var(--hs-white); border-radius: var(--hs-r-xl); padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--hs-edge); }
.fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
.fgrid .full { grid-column: span 2; }
.fl { display: flex; flex-direction: column; gap: 7px; }
.fl label, .fl .lbl { font-weight: 600; font-size: 14.5px; color: var(--hs-ink); }
.fl input, .fl select, .fl textarea { height: 52px; padding: 0 16px; border-radius: var(--hs-r-md); border: 0; background: var(--hs-white); box-shadow: var(--hs-well); font: 500 16px/1.4 var(--hs-body); color: var(--hs-ink); outline: none; width: 100%; }
.fl textarea { height: auto; min-height: 110px; padding: 14px 16px; resize: vertical; }
.fl input:focus, .fl select:focus, .fl textarea:focus { box-shadow: inset 0 0 0 2px var(--hs-cobalt); }
.fl .hint { font-size: 13px; color: var(--hs-ink-3); }
.fl .err { color: var(--hs-danger); font-size: 13px; font-weight: 600; }
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt { position: relative; }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt span { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: var(--hs-r-md); background: var(--hs-white); box-shadow: var(--hs-well); font-weight: 600; font-size: 15px; cursor: pointer; }
.opt input:checked + span { background: var(--hs-cobalt-tint); box-shadow: inset 0 0 0 2px var(--hs-cobalt); color: var(--hs-cobalt-deep); }
.opt input:focus-visible + span { box-shadow: inset 0 0 0 2px var(--hs-cobalt); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--hs-ink-2); }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--hs-cobalt); flex: none; }
.form-msg { margin: 0; font-weight: 600; min-height: 1.5em; }
.form-msg.ok { color: #17734F; }
.form-msg.err { color: var(--hs-danger); }

/* footer */
.site-f { background: var(--hs-ink); color: var(--hs-on-dark-2); padding: 72px 0 40px; font-size: 15px; }
.site-f .f-top { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; align-items: flex-start; }
.site-f .f-legal { margin-top: 56px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.12); font-size: 13.5px; color: var(--hs-on-dark-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* responsive */
@media (max-width: 1020px) {
  .hero .wrap, .split, .cta-band .wrap, .prods { grid-template-columns: 1fr; }
  .hero-visual { min-height: 0; }
  .hero-visual .photo { position: relative; height: 440px; }
  .prod.feature { grid-row: auto; }
  .steps { grid-template-columns: 1fr 1fr; }
  .steps.three { grid-template-columns: 1fr; }
  .steps.three .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid rgba(10,14,26,.14); }
  .step:nth-child(3) { padding-left: 0; border-left: 0; }
  .step { padding-bottom: 28px; }
  .tiles { grid-template-columns: 1fr; }
  .tile.wide { grid-column: auto; grid-template-columns: 1fr; }
  .split .photo { min-height: 380px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .site-h .wrap { height: 72px; }
  .hs-logo .m { height: 40px; } .hs-logo .w { height: 20px; } .hs-logo .lk { height: 60px; } .hs-logo .lk3 { font-size: calc(48px / 17); }
  .site-h .h-end .btn { display: none; }
  .steps { grid-template-columns: 1fr; }
  .step + .step { padding-left: 0; border-left: 0; border-top: 1px solid rgba(10,14,26,.14); }
  .fgrid { grid-template-columns: 1fr; }
  .fgrid .full { grid-column: auto; }
  .hero-visual .photo { height: 360px; }
  .chip { display: none; }
}