/* Exit Signs: the shared system for altdoc.loans pages beyond the homepage.
   Same tokens and components as public/index.html (see DESIGN.md).
   Sign code: green = routes and programs, yellow = what it takes and the one
   place to start, white = rules and compliance, blue = Ken and contact. */
@font-face{font-family:"Overpass";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/overpass-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Overpass";font-style:normal;font-weight:400 900;font-display:swap;src:url(/fonts/overpass-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --guide:#00704a; --guide-deep:#005b3c; --guide-ink:#e9f5ef;
  --warn:#ffc72c; --warn-deep:#e6ac00;
  --service:#1f4e9c; --service-deep:#183e7c;
  --white:#ffffff; --ink:#16181b; --ink-2:#43484e;
  --asphalt:#2a2d31; --asphalt-deep:#1d1f22; --lane:#f2f2ef; --asphalt-text:#d9dde1;
  --steel:#9aa1a9; --steel-dark:#6c737b;
  --concrete:#e6e8e6; --concrete-2:#d7dad7;
  --font:"Overpass",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gutter:clamp(1rem,.4rem + 3vw,3.5rem);
  --radius-sign:clamp(.6rem,.4rem + .5vw,.9rem);
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--steel-dark) var(--concrete-2)}
body{margin:0;background:var(--concrete);color:var(--ink);font:400 1.125rem/1.55 var(--font);caret-color:var(--guide)}
::selection{background:var(--warn);color:var(--ink)}
img,video,svg{max-width:100%;display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
:is(.nav,.hero,footer,.service) :focus-visible{outline-color:var(--warn)}
:is(.hero,.service) .panel :focus-visible{outline-color:var(--ink)}
footer .reg :focus-visible{outline-color:var(--ink)}
h1,h2,h3{margin:0;text-wrap:balance;line-height:1}
p{margin:0}
[hidden]{display:none!important}
.wrap{width:min(78rem,100% - 2*var(--gutter));margin-inline:auto}
.wrap.narrow{width:min(52rem,100% - 2*var(--gutter))}
.skip{position:absolute;left:-999px;top:0;background:var(--warn);color:var(--ink);padding:.75rem 1rem;font-weight:800;z-index:200}
.skip:focus{left:1rem;top:1rem}
.arrow{width:1em;height:1em;fill:currentColor;flex:none}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}
.sep{display:inline-block;width:.24em;height:.24em;border-radius:50%;background:currentColor;vertical-align:.22em;margin:0 .08em 0 .36em;overflow:hidden;text-indent:1em;white-space:nowrap}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:var(--asphalt-deep);color:var(--white);border-bottom:1px solid #34383d}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;min-height:4.25rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-weight:900;letter-spacing:.06em;font-size:1.15rem}
.brand img{width:2.25rem;height:2.25rem;border-radius:.4rem;object-fit:contain;background:#00030b}
.navlinks{display:flex;align-items:center;gap:clamp(1rem,2vw,2rem);font-weight:800;font-size:.875rem;letter-spacing:.08em;text-transform:uppercase}
.navlinks a{text-decoration:none;color:var(--asphalt-text);padding:.5rem 0}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--white)}
.navlinks .text-ken{color:var(--white);background:transparent;box-shadow:inset 0 0 0 2px var(--white);padding:.6rem .9rem;border-radius:.4rem}
.navlinks .text-ken:hover{background:var(--warn);color:var(--ink);box-shadow:inset 0 0 0 2px var(--warn)}
@media (max-width:56rem){.navlinks a:not(.text-ken){display:none}}

/* hero on asphalt */
.hero{background:var(--asphalt);color:var(--white);padding-block:clamp(2.25rem,5vw,4rem) clamp(2.5rem,5vw,4.5rem)}
.hero h1{font-size:clamp(2.2rem,1.2rem + 3.4vw,4.2rem);font-weight:900;letter-spacing:-.02em;line-height:1.02;max-width:20ch}
.hero h1 span{color:var(--warn)}
.hero .lead{margin-top:1.1rem;font-size:clamp(1.05rem,.95rem + .45vw,1.35rem);line-height:1.45;color:var(--asphalt-text);max-width:52ch;font-weight:600}
.hero .lead b{color:var(--white);font-weight:800}
.plates{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.5rem;padding:0;list-style:none}
.plates li{background:var(--guide);color:var(--white);font-weight:800;font-size:.95rem;letter-spacing:.02em;border-radius:.4rem;padding:.4rem .7rem .25rem;box-shadow:inset 0 0 0 2px var(--white),0 0 0 2px var(--guide)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}

/* buttons */
.btn{appearance:none;font:inherit;font-weight:900;letter-spacing:.06em;text-transform:uppercase;border:0;border-radius:.45rem;padding:.95rem 1.2rem .8rem;min-height:3.1rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;line-height:1;white-space:nowrap}
.btn .arrow{width:1.1rem;height:1.1rem}
.btn-go{background:var(--warn);color:var(--ink)}
.btn-go:hover{background:var(--warn-deep)}
.btn-line{background:transparent;color:var(--white);box-shadow:inset 0 0 0 2.5px var(--white)}
.btn-line:hover{background:rgb(255 255 255 / .1)}
.btn-ink{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink)}
.btn-ink:hover{background:#f1f5f2}
.btn-white{background:var(--white);color:var(--service)}
.btn-white:hover{background:var(--warn);color:var(--ink)}

/* guide sign */
.sign{position:relative;display:flex;flex-direction:column;gap:.55rem;background:var(--guide);color:var(--white);text-decoration:none;border-radius:var(--radius-sign);padding:clamp(1.1rem,2vw,1.6rem);box-shadow:inset 0 0 0 .3rem var(--guide),inset 0 0 0 .5rem var(--white)}
.hero .sign{box-shadow:inset 0 0 0 .3rem var(--guide),inset 0 0 0 .5rem var(--white),0 10px 24px rgb(0 0 0 / .35)}
.panel .sign{box-shadow:inset 0 0 0 .3rem var(--guide),inset 0 0 0 .5rem var(--white)}
a.sign:hover{background:var(--guide-deep)}
.sign .exit{align-self:flex-start;font-weight:900;font-size:clamp(.72rem,.6rem + .3vw,.95rem);letter-spacing:.08em;padding:.25rem .55rem .15rem;border:2px solid var(--white);border-radius:.35rem}
.sign h2,.sign h3{font-size:clamp(1.35rem,1rem + 1.1vw,2rem);font-weight:800;letter-spacing:-.015em;line-height:1.05}
.sign p{font-weight:600;line-height:1.45;color:var(--guide-ink)}
.sign .arrow.corner{position:absolute;top:clamp(1.1rem,2vw,1.6rem);right:clamp(1.1rem,2vw,1.6rem);width:clamp(1.5rem,1.1rem + 1vw,2.3rem);height:clamp(1.5rem,1.1rem + 1vw,2.3rem);transform:rotate(var(--rot,0deg))}

/* yellow "what it takes" plaque */
.takes{background:var(--warn);color:var(--ink);border-radius:.55rem;padding:1.1rem 1.2rem 1.2rem;box-shadow:inset 0 0 0 .22rem var(--warn),inset 0 0 0 .38rem var(--ink)}
.takes h2,.takes h3{margin:0 0 .6rem;font-size:1rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;line-height:1.3}
.takes ul{margin:0;padding-left:1.15rem;display:grid;gap:.4rem;font-weight:600;font-size:1.02rem;line-height:1.4}

/* white working panel (calculators, forms) */
.panel{background:var(--white);color:var(--ink);border-radius:var(--radius-sign);padding:clamp(1.1rem,2vw,1.6rem);box-shadow:0 12px 30px rgb(0 0 0 / .3)}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.25rem}
.field{display:grid;gap:.35rem;align-content:start}
.field label{font-weight:800;font-size:.98rem;line-height:1.3}
.field input,.field select{font:inherit;font-weight:600;font-size:1.1rem;border:2.5px solid var(--ink);border-radius:.45rem;padding:.7rem .8rem .55rem;min-height:3.1rem;background:var(--white);color:var(--ink);width:100%}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 1.15rem) 55%,calc(100% - .8rem) 55%;background-size:.35rem .35rem;background-repeat:no-repeat;padding-right:2.2rem}
.field input::placeholder{color:#6b7076}
.field input:focus,.field select:focus{outline:3px solid var(--ink);outline-offset:2px}
.field small{font-size:.88rem;line-height:1.4;color:var(--ink-2);font-weight:600}

/* result sign under a calculator */
.result{margin-top:1.25rem}
.result .value{font-size:clamp(2.6rem,1.8rem + 3vw,4.2rem);font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.result .of{font-weight:700;color:var(--guide-ink);font-size:1.05rem}
.result .verdict{font-weight:700;color:var(--white);font-size:1.1rem;line-height:1.4}
.result .verdict:empty{display:none}
.result .steps{display:grid;gap:.25rem;font-weight:600;color:var(--guide-ink);font-variant-numeric:tabular-nums}
.result .steps:empty{display:none}
.fine{margin-top:.9rem;font-size:.88rem;line-height:1.45;color:var(--ink-2)}

/* concrete sections */
.band{padding-block:clamp(3rem,7vw,5.5rem)}
.band + .band{padding-top:0}
h2.title{font-size:clamp(1.9rem,1.2rem + 2.4vw,3.2rem);font-weight:900;letter-spacing:-.02em;line-height:1.02;max-width:22ch}
.section-head{max-width:46rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.section-head p{margin-top:.9rem;font-size:1.15rem;color:var(--ink-2);max-width:60ch}
.prose{display:grid;gap:1rem;max-width:62ch}
.prose h2{font-size:clamp(1.5rem,1.15rem + 1vw,2rem);font-weight:900;letter-spacing:-.015em;line-height:1.1;margin-top:1.25rem}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--ink-2)}

/* FAQ as a list of regulatory panels */
.faq{display:grid;gap:.6rem;max-width:52rem}
.faq details{background:var(--white);border-radius:.5rem;box-shadow:inset 0 0 0 1.5px var(--concrete-2)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.1rem .85rem;font-weight:800;font-size:1.08rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:1.1rem;height:1.1rem;flex:none;transition:transform .25s var(--ease)}
.faq details[open] summary svg{transform:rotate(90deg)}
.faq details p{padding:0 1.1rem 1.1rem;color:var(--ink-2);max-width:62ch}

/* mile markers for a real sequence */
.route-steps{list-style:none;margin:0;padding:0;position:relative;display:grid;gap:clamp(1.5rem,3vw,2.25rem);max-width:52rem}
.route-steps::before{content:"";position:absolute;left:1.6rem;top:.5rem;bottom:.5rem;width:.35rem;background:var(--ink);border-radius:2px}
.route-steps li{position:relative;display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:1.25rem;align-items:start}
.marker{position:relative;z-index:1;width:3.6rem;background:var(--guide);color:var(--white);border-radius:.4rem;text-align:center;padding:.35rem 0 .45rem;box-shadow:inset 0 0 0 2px var(--white),0 0 0 2px var(--guide)}
.marker small{display:block;font-size:.62rem;font-weight:800;letter-spacing:.12em}
.marker b{display:block;font-size:1.7rem;font-weight:900;line-height:1}
.route-steps h3{font-size:clamp(1.25rem,1.05rem + .6vw,1.6rem);font-weight:800;margin:.35rem 0 .45rem;line-height:1.15}
.route-steps p{color:var(--ink-2);max-width:60ch}

/* service blue: Ken, the relationship promise, contact */
.service{background:var(--service);color:var(--white);border-radius:var(--radius-sign);box-shadow:inset 0 0 0 .35rem var(--service),inset 0 0 0 .58rem var(--white);padding:clamp(1.5rem,3.5vw,3rem)}
.service h2{font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);font-weight:900;letter-spacing:-.015em;line-height:1.05}
.service p{margin-top:.9rem;max-width:58ch;color:#e3eaf7;font-size:1.15rem}
.service .actions{margin-top:1.5rem}
.record{margin-top:1.25rem;display:inline-flex;flex-wrap:wrap;gap:.35rem 1rem;background:var(--white);color:var(--ink);border-radius:.4rem;padding:.55rem .9rem .4rem;font-weight:900;letter-spacing:.05em;text-transform:uppercase;font-size:.95rem}
.record span{white-space:nowrap}

/* grids of signs */
.sign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));gap:clamp(.75rem,1.6vw,1.25rem)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.5vw,2rem);align-items:start}

/* footer: white regulatory panel */
footer{background:var(--asphalt-deep);color:var(--asphalt-text);padding-block:clamp(2.5rem,5vw,3.5rem) calc(clamp(2.5rem,5vw,3.5rem) + env(safe-area-inset-bottom,0px))}
.reg{background:var(--white);color:var(--ink);border-radius:.5rem;box-shadow:inset 0 0 0 .3rem var(--white),inset 0 0 0 .45rem var(--ink);padding:clamp(1.25rem,2.5vw,1.75rem)}
.reg .line{font-weight:900;letter-spacing:.04em;text-transform:uppercase;font-size:clamp(.9rem,.8rem + .35vw,1.1rem);line-height:1.4;color:var(--ink)}
.reg p{margin-top:.75rem;font-size:.95rem;line-height:1.5;color:var(--ink-2);max-width:80ch}
.reg p.line{margin-top:0;max-width:none}
.foot-links{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem 1.75rem;font-weight:700;font-size:.95rem}
.foot-links a{color:var(--asphalt-text)}
.foot-links a:hover{color:var(--white)}
.ehl{display:inline}
.ehl svg{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.22em;margin-right:.35em}

@media (max-width:52rem){
  .fields,.two{grid-template-columns:1fr}
  .actions .btn{flex:1 1 100%}
}
@media (max-width:40rem){
  .reg .line .sep{display:none}
  .reg .line>.nw,.reg .line>.ehl{display:flex;align-items:center}
  .service .actions .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.faq summary svg{transition:none}}