/* Korvyn Labs — page styles shared by every page (index.html, apphelp.html, products.html).
   Colours, type and spacing come from styles.css, which is generated from the brand system's
   tokens and is not edited here. This file is served with a one-year cache like everything under
   /assets/, so a change means a new name (site.v2.css) and new <link>s in all three pages. */

*{box-sizing:border-box}
html,body{margin:0}
/* "hidden" always wins, even over a class that sets display (the form's review box and its
   confirmation are shown and hidden this way). */
[hidden]{display:none !important}
body{background:var(--surface-page);font:var(--type-body);color:var(--text-primary);-webkit-font-smoothing:antialiased}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover)}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--space-8)}
.eyebrow{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--korvyn-teal)}
h1,h2,h3{margin:0;font-family:var(--font-display);letter-spacing:var(--tracking-display);line-height:var(--leading-tight);color:var(--text-primary)}
h1{font-size:var(--size-display-l);font-weight:var(--weight-bold)}
h2{font-size:var(--size-display-m);font-weight:var(--weight-bold)}
h3{font-size:var(--size-heading);font-weight:var(--weight-bold)}
p{margin:0;text-wrap:pretty}
.lead{font-size:var(--size-body-l);line-height:var(--leading-relaxed);color:var(--text-secondary)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:13px 26px;font:var(--type-ui);font-size:var(--size-body-l);border-radius:var(--radius-md);border:1px solid transparent;cursor:pointer;transition:var(--transition-interactive)}
.btn-primary{background:var(--korvyn-teal);color:var(--ink-000)}
.btn-primary:hover{background:var(--korvyn-teal-dark);color:var(--ink-000)}
.btn-secondary{background:var(--surface-card);color:var(--korvyn-teal);border-color:var(--border-default)}
.btn-secondary:hover{background:var(--korvyn-teal-wash);border-color:var(--korvyn-teal)}
.btn[disabled]{opacity:.6;cursor:not-allowed}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);border-bottom:1px solid var(--border-subtle);backdrop-filter:saturate(1.1) blur(6px)}
.site-header__in{height:76px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-8)}
.brand{display:flex;align-items:center;gap:var(--space-4)}
.brand img{height:40px;display:block}
.wordmark{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:1.0625rem;letter-spacing:var(--tracking-wordmark);color:var(--korvyn-navy)}
.nav{display:flex;align-items:center;gap:var(--space-8)}
.nav a{font:var(--type-ui);color:var(--text-secondary)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--korvyn-teal)}

/* Sections */
.section{padding:var(--space-15) 0}
.section--paper{background:var(--surface-paper);border-block:1px solid var(--border-subtle)}
.section--rule{border-top:1px solid var(--border-subtle)}
.center{text-align:center}
.stack{display:flex;flex-direction:column;gap:var(--space-5)}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10);align-items:start}
.narrow{max-width:784px;margin-inline:auto}

/* Hero */
.hero{position:relative;overflow:hidden;padding:var(--space-16) 0 var(--space-15)}
.hero .wrap{position:relative;max-width:784px;text-align:center}
.hero .lead{margin-top:var(--space-6);font-size:1.125rem}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-5);margin-top:var(--space-9)}
.ring{position:absolute;border-radius:50%;opacity:.45;pointer-events:none}
/* Wide viewports anchor the rings to the centred copy; below 1100px they become corner arcs. */
.r1{width:520px;height:520px;top:-268px;left:calc(50% + 422px);border:2px solid var(--korvyn-blue)}
.r2{width:430px;height:430px;bottom:-286px;right:calc(50% + 422px);border:2px solid var(--korvyn-teal)}
@media (max-width:1100px){
  .r1{width:300px;height:300px;top:-176px;left:auto;right:-130px}
  .r2{width:260px;height:260px;bottom:-152px;right:auto;left:-110px}
}

/* Why Korvyn */
.points{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:var(--space-4)}
.points li{padding:20px 24px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-lg);font-size:var(--size-body-l);line-height:1.6;color:var(--text-secondary)}
.points strong{color:var(--text-primary)}

/* Proof */
.proof-quote{margin:0;padding:var(--space-9) var(--space-10);background:var(--surface-card);border:1px solid var(--border-default);border-left:4px solid var(--korvyn-teal);border-radius:var(--radius-xl)}
.proof-quote p{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:1.375rem;line-height:var(--leading-snug);color:var(--text-primary)}
.proof-quote footer{margin-top:var(--space-6);font:var(--type-body-s);color:var(--text-secondary)}
.proof-quote footer strong{color:var(--text-primary)}

/* Brand story (dark) */
#story{background:var(--korvyn-navy)}
#story .eyebrow{color:var(--korvyn-gold)}
#story h2{max-width:24ch}
.story-quote{margin:var(--space-6) 0 0;padding:var(--space-7) var(--space-8);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-2xl)}
.story-quote p{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:1.25rem;line-height:var(--leading-snug);color:var(--text-primary)}
.story-logo{width:100%;max-width:300px;height:auto;display:block;margin-inline:auto}

/* Cards (products) */
.card{display:flex;flex-direction:column;background:var(--surface-paper);border:1px solid var(--border-default);border-radius:var(--radius-xl);padding:var(--space-9);position:relative;overflow:hidden}
.card .bar{position:absolute;top:0;left:0;right:0;height:3px;background:var(--korvyn-teal)}
.card .status{margin-top:var(--space-8);padding-top:var(--space-6);border-top:1px solid var(--border-default);display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.card-title{display:flex;align-items:center;gap:var(--space-4)}
.status-label{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--korvyn-teal)}

/* Seven steps */
.pills{display:grid;grid-template-columns:repeat(7,1fr);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-xl);margin-top:var(--space-10);overflow:hidden}
.pill-col{display:grid;justify-items:center;align-content:start;gap:var(--space-5);padding:var(--space-6) var(--space-3)}
.pill-col+.pill-col{border-left:1px solid var(--border-subtle)}
.pill-lbl{font:var(--type-eyebrow);text-transform:uppercase;letter-spacing:var(--tracking-eyebrow);color:var(--text-primary);text-align:center}

/* Footer (dark) */
.foot{background:var(--korvyn-navy);padding:var(--space-13) 0 var(--space-9);font:var(--type-body-s);color:var(--ink-on-dark-200)}
.foot a{color:var(--ink-on-dark-200)}
.foot a:hover{color:var(--ink-000)}
.foot__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-9)}
.foot__cols>div{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.foot__logo{width:140px;height:auto;margin-bottom:var(--space-3)}
.foot__head{color:var(--ink-on-dark-400)}
.foot__note{font:var(--type-caption);color:var(--ink-on-dark-400)}
.foot__base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-10);padding-top:var(--space-6);border-top:1px solid rgba(255,255,255,.14);font:var(--type-caption);color:var(--ink-on-dark-400)}
.foot__base span:first-child{text-transform:uppercase;letter-spacing:var(--tracking-eyebrow)}

/* The /apphelp form */
.form-page{padding:var(--space-13) 0 var(--space-15)}
.form-page .narrow{max-width:760px;display:flex;flex-direction:column;gap:var(--space-9)}
.form{display:flex;flex-direction:column;gap:var(--space-9)}
.form fieldset{margin:0;padding:0;border:none;min-width:0}
.form-section{display:flex;flex-direction:column;gap:20px}
.form-section h2{font-size:18px;letter-spacing:-0.01em;padding-bottom:var(--space-3);border-bottom:1px solid var(--border-default)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.field{display:flex;flex-direction:column;gap:6px}
.field label,.legend{display:flex;align-items:baseline;gap:8px;padding:0;font:var(--type-ui);font-size:var(--size-body);color:var(--text-primary)}
.legend{font-size:var(--size-body-l);margin-bottom:var(--space-4)}
.req{font:var(--type-eyebrow);letter-spacing:0.06em;text-transform:uppercase;color:var(--korvyn-teal)}
.hint{font:var(--type-body-s);color:var(--ink-500)}
.input{width:100%;min-height:46px;padding:0 14px;font:inherit;font-size:16px;color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-sm)}
textarea.input{padding:12px 14px;min-height:112px;resize:vertical}
select.input{padding:0 12px}
.input:focus{outline:none;border-color:var(--korvyn-teal);box-shadow:var(--focus-ring)}
.input[aria-invalid="true"]{border-color:var(--status-danger)}
.error{font:var(--type-body-s);font-weight:var(--weight-semibold);color:var(--status-danger)}
.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-4)}
.choice{display:flex;align-items:flex-start;gap:12px;padding:16px;min-height:44px;border:2px solid var(--border-default);border-radius:var(--radius-md);background:var(--surface-card);cursor:pointer;font:var(--type-ui);font-size:var(--size-body);color:var(--text-primary)}
.choice:has(input:checked){border-color:var(--korvyn-teal);background:var(--korvyn-teal-wash)}
.choice input,.inline-choice input{margin:4px 0 0;width:18px;height:18px;accent-color:var(--korvyn-teal)}
.inline-choices{display:flex;gap:var(--space-6)}
.inline-choice{display:flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.review-box{margin-top:var(--space-4);padding:var(--space-6);border-radius:var(--radius-lg);background:var(--surface-paper);border:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:20px}
.review-box h2{font-size:18px;letter-spacing:-0.01em}
.send{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-5)}
.banner{padding:var(--space-5) var(--space-6);border-radius:var(--radius-md);background:var(--status-danger-wash);border:1px solid var(--status-danger);color:var(--text-primary);font:var(--type-body-s);font-weight:var(--weight-semibold)}
.small{font:var(--type-body-s);color:var(--text-secondary)}
/* The hidden box only a script fills in. Off-screen rather than display:none, which some bots skip. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.done{display:flex;flex-direction:column;gap:var(--space-5);padding:var(--space-10) 0}
.done-mark{width:48px;height:48px;border-radius:50%;background:var(--korvyn-teal-wash);display:flex;align-items:center;justify-content:center}
.done h1:focus{outline:none}

@media (max-width:900px){
  h1{font-size:2rem}h2{font-size:1.625rem}
  .cols2,.foot__cols{grid-template-columns:1fr}
  .pills{grid-template-columns:repeat(2,1fr)}
  .pill-col+.pill-col{border-left:none}
}
@media (max-width:720px){
  .wrap{padding:0 var(--space-5)}
  .nav{gap:var(--space-5)}
}
/* A phone holds the wordmark and both menu links on one line each. */
.wordmark,.nav a{white-space:nowrap}
@media (max-width:480px){
  .brand{gap:var(--space-3)}
  .brand img{height:32px}
  .wordmark{font-size:.875rem;letter-spacing:.18em}
  .nav{gap:var(--space-4)}
}