/* ============================================================
   SCT Unlimited · rebuild v4 · site chrome

   Shared by every page under /rebuild/v4/: the fixed nav, the
   footer, and the shell for the inner pages (apply, terms,
   privacy, risk). The landing page keeps its own styles inline
   and takes only the nav and footer from here.

   Tokens match index.html exactly; if one changes, change both.
   ============================================================ */
:root{
  --blue-mid:#143f96; --blue:#0d3078; --blue-deep:#081f54;
  --day-c:#eef3fc; --day-m:#dde7f7; --day-e:#c9d7ef;
  --day-ink:#0e1b33; --day-mute:rgba(14,27,51,.55); --day-mute2:rgba(14,27,51,.42);
  --paper:#f4f3f0; --ink:#111114; --ink-soft:#5f5f5b; --rule:#e0dfda;
  --grot:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --nav-h:72px;
}

/* ============================================================
   NAV
   Fixed. Over the hero it is transparent and white; once the
   paper climbs past it, it takes the paper and a hairline. The
   inner pages are paper from the top, so they start solid.
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);
  color:#fff;background:transparent;
  transition:background .3s ease,color .3s ease,box-shadow .3s ease}
/* 1fr auto 1fr, not auto 1fr auto: the links sit in the middle column and
   the two outer columns are equal, so the links are centred on the page
   rather than on whatever is left after a 38px logo and a 260px pair of
   buttons — which put them a hundred pixels left of centre (Koray, 22 Sept). */
.nav .nav-in{max-width:1120px;margin:0 auto;height:100%;padding:0 30px;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.nav .brand{justify-self:start}
.nav .cta{justify-self:end}
/* Five links and two buttons do not fit between 861 and 1100px: "Client
   login" wrapped onto two lines and squeezed the Apply pill (26 Sept, after
   Technologies came back). Nothing in the bar wraps, and in that band the
   login link steps out. It stays in the footer; below 861px it was already
   hidden, and the phone menu does not carry it — a gap to decide on. */
.nav .links a,.nav .cta a{white-space:nowrap}
@media (min-width:861px) and (max-width:1100px){
  .nav .cta .login{display:none}
  .nav .links{gap:clamp(14px,1.8vw,22px)}}
.nav .brand{display:inline-flex;align-items:center;line-height:0;border-radius:3px;transition:opacity .2s ease}
.nav .brand img{height:38px;width:38px;display:block;filter:brightness(0) invert(1);transition:filter .3s ease}
.nav .brand:hover{opacity:.72}
.nav .links{display:flex;justify-content:center;gap:clamp(18px,2.6vw,34px);margin:0;padding:0;list-style:none}
.nav .links a{color:rgba(255,255,255,.72);text-decoration:none;font-size:13.5px;font-weight:500;
  letter-spacing:-.005em;padding:6px 0;position:relative;transition:color .2s ease}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav .links a:hover,.nav .links a.on{color:#fff}
.nav .links a.on::after{transform:scaleX(1)}
.nav .cta{display:inline-flex;align-items:center;gap:18px}
.nav .cta .login{color:rgba(255,255,255,.78);text-decoration:none;font-size:13.5px;font-weight:500;transition:color .2s ease}
.nav .cta .login:hover{color:#fff}
.nav .cta .apply{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:999px;
  background:#fff;color:var(--blue);text-decoration:none;font-size:13.5px;font-weight:600;
  transition:transform .2s ease,opacity .2s ease,background .3s ease,color .3s ease}
.nav .cta .apply:hover{opacity:.9;transform:translateY(-1px)}
.nav a:focus-visible{outline:1px solid currentColor;outline-offset:4px}

/* solid: on paper */
.nav.solid{color:var(--ink);background:rgba(244,243,240,.9);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 var(--rule)}
.nav.solid .brand img{filter:none}
.nav.solid .links a{color:var(--ink-soft)}
.nav.solid .links a:hover,.nav.solid .links a.on{color:var(--ink)}
.nav.solid .cta .login{color:var(--ink-soft)}
.nav.solid .cta .login:hover{color:var(--ink)}
.nav.solid .cta .apply{background:var(--ink);color:#fff}

/* a light ground: the bar goes ink with no ground of its own */
body.day .nav:not(.solid){color:var(--day-ink)}
body.day .nav:not(.solid) .brand img{filter:none}
body.day .nav:not(.solid) .links a{color:var(--day-mute)}
body.day .nav:not(.solid) .links a:hover,body.day .nav:not(.solid) .links a.on{color:var(--day-ink)}
body.day .nav:not(.solid) .cta .login{color:var(--day-mute)}
body.day .nav:not(.solid) .cta .login:hover{color:var(--day-ink)}
body.day .nav:not(.solid) .cta .apply{background:var(--day-ink);color:var(--paper)}

/* over footage the bar is always light, even when the ground is a light one */
body.hero-film.day .nav:not(.solid){color:#fff}
body.hero-film.day .nav:not(.solid) .brand img{filter:brightness(0) invert(1)}
body.hero-film.day .nav:not(.solid) .links a{color:rgba(255,255,255,.72)}
body.hero-film.day .nav:not(.solid) .links a:hover,body.hero-film.day .nav:not(.solid) .links a.on{color:#fff}
body.hero-film.day .nav:not(.solid) .cta .login{color:rgba(255,255,255,.78)}
body.hero-film.day .nav:not(.solid) .cta .apply{background:#fff;color:#17161a}

/* the menu button, phones only */
.nav .burger{display:none;background:none;border:0;padding:8px;margin:-8px;cursor:pointer;color:inherit;line-height:0}
.nav .burger span{display:block;width:20px;height:1.5px;background:currentColor;margin:5px 0;transition:transform .25s ease,opacity .2s ease}
.nav.open .burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width:860px){
  .nav .nav-in{grid-template-columns:auto 1fr auto;padding:0 20px;gap:14px}
  .nav .brand,.nav .cta{justify-self:auto}
  .nav .links{display:none}
  .nav .cta .login{display:none}
  .nav .cta .apply{height:34px;padding:0 14px;font-size:13px}
  .nav .burger{display:block;justify-self:end}
  .nav .cta{justify-self:end}
  /* the drawer */
  .nav .links.drawer{display:none;position:absolute;left:0;right:0;top:var(--nav-h);
    flex-direction:column;gap:0;padding:8px 20px 18px;background:var(--paper);color:var(--ink);
    box-shadow:0 1px 0 var(--rule),0 18px 40px rgba(0,0,0,.08)}
  .nav.open .links.drawer{display:flex}
  .nav .links.drawer a{color:var(--ink);font-size:17px;padding:12px 0;border-top:1px solid var(--rule)}
  .nav .links.drawer a::after{display:none}
  .nav .links.drawer li:first-child a{border-top:0}
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--paper);border-top:1px solid var(--rule);padding:56px 0 34px;color:var(--ink-soft);
  position:relative;z-index:1}
.site-foot .wrap{max-width:1120px;margin:0 auto;padding:0 30px}
.sf-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.sf-brand img{display:block;width:34px;height:34px;margin-bottom:16px}
.sf-tag{margin:0 0 14px;font-weight:700;letter-spacing:-.02em;font-size:17px;line-height:1.2;color:var(--ink)}
.sf-tag em{font-style:normal;color:var(--ink-soft);font-weight:500}
.sf-desc{margin:0;font-size:12.5px;line-height:1.7;color:#8d8d87;max-width:38ch}
.sf-col h4{margin:0 0 14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;color:#9b9b95}
.sf-col ul{list-style:none;margin:0;padding:0}
.sf-col li{margin:0 0 9px}
.sf-col a{color:var(--ink);text-decoration:none;font-size:14px;transition:opacity .2s ease}
.sf-col a:hover{opacity:.62}
.sf-base{margin-top:48px;padding-top:22px;border-top:1px solid var(--rule);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:#8d8d87}
.sf-copy{max-width:72ch;line-height:1.6}
.sf-legal{display:flex;gap:22px}
.sf-legal a{color:var(--ink-soft);text-decoration:none}
.sf-legal a:hover{color:var(--ink)}
@media (max-width:860px){
  .sf-grid{grid-template-columns:1fr 1fr;gap:32px 24px}
  .sf-brand{grid-column:1 / -1}
  .sf-base{flex-direction:column;align-items:flex-start}}

/* ============================================================
   INNER PAGES
   Paper from the top. The nav is solid from the first pixel, so
   the page starts below it.
   ============================================================ */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.inner{margin:0;background:var(--paper);color:var(--ink);font-family:var(--grot);-webkit-font-smoothing:antialiased}
body.inner .page{padding-top:calc(var(--nav-h) + clamp(48px,8vh,96px));padding-bottom:clamp(70px,10vh,120px)}
body.inner .wrap{max-width:1120px;margin:0 auto;padding:0 30px}
body.inner .narrow{max-width:760px;margin:0 auto;padding:0 30px}

.page-head{margin-bottom:clamp(34px,5vh,56px)}
.page-head .kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#9b9b95;margin:0 0 18px}
.page-head h1{margin:0;font-weight:700;letter-spacing:-.032em;font-size:clamp(34px,5.2vw,68px);line-height:1.02;text-wrap:balance}
.page-head .lede{font-size:clamp(16px,1.7vw,20px);line-height:1.55;color:var(--ink-soft);margin:22px 0 0;max-width:56ch;font-weight:400}
.page-head .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#9b9b95;margin:26px 0 0}

/* the legal article */
.legal-doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.toc{position:sticky;top:calc(var(--nav-h) + 28px)}
.toc h4{margin:0 0 12px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#9b9b95;font-weight:500}
.toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--rule)}
.toc li a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:1px solid transparent;
  color:var(--ink-soft);text-decoration:none;font-size:12.5px;line-height:1.4;transition:color .2s ease,border-color .2s ease}
.toc li a:hover{color:var(--ink)}
.toc li a.on{color:var(--ink);border-left-color:var(--ink)}
.prose{max-width:70ch;font-size:16px;line-height:1.72;color:var(--ink)}
.prose h2{margin:56px 0 16px;font-weight:700;letter-spacing:-.024em;font-size:clamp(22px,2.4vw,30px);line-height:1.15;scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose h2:first-child{margin-top:0}
.prose h3{margin:32px 0 10px;font-weight:600;letter-spacing:-.015em;font-size:18px;line-height:1.3;scroll-margin-top:calc(var(--nav-h) + 24px)}
.prose p{margin:0 0 16px;color:var(--ink-soft)}
.prose p.lede{font-size:18px;color:var(--ink)}
.prose strong{color:var(--ink);font-weight:600}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px;color:var(--ink-soft)}
.prose li{margin:0 0 8px}
.prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(17,17,20,.3)}
.prose a:hover{text-decoration-color:currentColor}
.prose table{border-collapse:collapse;width:100%;margin:8px 0 22px;font-size:14.5px}
.prose th,.prose td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#9b9b95;font-weight:500}
.prose blockquote{margin:0 0 18px;padding:14px 18px;border-left:2px solid var(--ink);color:var(--ink);background:#fff}
.prose .callout{margin:0 0 22px;padding:18px 20px;border:1px solid var(--rule);border-radius:6px;background:#fff;color:var(--ink)}
.prose .callout p:last-child{margin-bottom:0}
@media (max-width:860px){
  .legal-doc{grid-template-columns:1fr;gap:28px}
  .toc{position:static}
  .toc ol{display:flex;flex-wrap:wrap;gap:4px 14px;border:0}
  .toc li a{padding:4px 0;border:0;margin:0}
  .toc li a.on{border:0}
}

/* ============================================================
   FORMS · the apply page
   ============================================================ */
.apply-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,6vw,96px);align-items:start}
.apply-side{position:sticky;top:calc(var(--nav-h) + 28px)}
.apply-side .step{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:18px 0;border-top:1px solid var(--rule)}
.apply-side .step:last-child{border-bottom:1px solid var(--rule)}
.apply-side .step .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#9b9b95;padding-top:4px}
.apply-side .step b{display:block;font-weight:600;letter-spacing:-.01em;font-size:16px;margin-bottom:6px}
.apply-side .step p{margin:0;font-size:14px;line-height:1.65;color:var(--ink-soft)}
.apply-side .note{margin:22px 0 0;font-size:12.5px;line-height:1.7;color:#8d8d87}

.form{background:#fff;border:1px solid var(--rule);border-radius:8px;padding:clamp(22px,3vw,36px)}
.form fieldset{border:0;margin:0 0 26px;padding:0;min-width:0}
.form fieldset:last-of-type{margin-bottom:0}
.form legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#9b9b95;
  padding:0;margin:0 0 16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .field{margin:0 0 14px;min-width:0}
.form label{display:block;font-size:13px;font-weight:500;color:var(--ink);margin:0 0 7px;letter-spacing:-.005em}
.form label .opt{color:#9b9b95;font-weight:400}
.form input[type=text],.form input[type=email],.form input[type=tel],.form input[type=url],.form select,.form textarea{
  width:100%;font:inherit;font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:5px;padding:12px 13px;outline:none;
  transition:border-color .2s ease,box-shadow .2s ease;-webkit-appearance:none;appearance:none}
.form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%23111114' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;padding-right:36px}
.form textarea{min-height:120px;resize:vertical;line-height:1.55}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(17,17,20,.08)}
.form input::placeholder,.form textarea::placeholder{color:#a8a8a2}
.form .field.bad input,.form .field.bad select,.form .field.bad textarea{border-color:#b3261e}
.form .err{display:none;font-size:12px;color:#b3261e;margin:6px 0 0}
.form .field.bad .err{display:block}
.form .choices{display:grid;gap:8px}
.form .choice{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;padding:12px 13px;
  border:1px solid var(--rule);border-radius:5px;background:var(--paper);cursor:pointer;font-size:14.5px;line-height:1.45;
  transition:border-color .2s ease,background .2s ease}
.form .choice:hover{border-color:#c9c9c3}
.form .choice input{margin:2px 0 0;accent-color:var(--ink)}
.form .choice:has(input:checked){border-color:var(--ink);background:#fff}
.form .choice small{display:block;color:var(--ink-soft);font-size:13px;margin-top:3px}
.form .consent{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start;font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0 0 12px}
.form .consent input{margin:3px 0 0;accent-color:var(--ink)}
.form .consent a{color:var(--ink)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .actions{margin-top:22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.form .btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:15px;
  padding:15px 30px;border:0;border-radius:3px;cursor:pointer;letter-spacing:-.005em;transition:opacity .2s ease,transform .2s ease}
.form .btn:hover{opacity:.88;transform:translateY(-1px)}
.form .btn[disabled]{opacity:.5;cursor:default;transform:none}
.form .status{font-size:13.5px;color:var(--ink-soft)}
.form .status.bad{color:#b3261e}
.form .fine{font-size:12px;line-height:1.7;color:#8d8d87;margin:20px 0 0}
.form-done{display:none;text-align:center;padding:clamp(30px,5vw,60px) clamp(22px,3vw,36px)}
.form-done h2{margin:0 0 14px;font-weight:700;letter-spacing:-.025em;font-size:clamp(26px,3vw,38px);line-height:1.1}
.form-done p{margin:0 auto;max-width:44ch;font-size:16px;line-height:1.65;color:var(--ink-soft)}
.form.sent .form-body{display:none}
.form.sent .form-done{display:block}
@media (max-width:860px){
  .apply-grid{grid-template-columns:1fr;gap:34px}
  .apply-side{position:static}
  .form .row{grid-template-columns:1fr}
}

/* the risk strip under the form, and generic CTA */
.strip{margin-top:clamp(48px,7vh,80px);padding-top:34px;border-top:1px solid var(--rule);font-size:11.5px;line-height:1.75;color:#8d8d87;max-width:78ch}

/* callouts as the legal fragments mark them */
.prose .notice{margin:0 0 26px;padding:20px 22px;border:1px solid var(--rule);border-radius:6px;background:#fff}
.prose .notice p{color:var(--ink)}
.prose .notice p:last-child{margin-bottom:0}
.prose .eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#9b9b95;margin:0 0 10px}
.prose blockquote p{color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}