/* Layout: a hiring manager's desk. Cool office paper, navy ink, one green "yes" stamp colour used only where you act. */
@font-face{font-family:"Lora";src:url("fonts/lora-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --paper:#F3F5F8;      /* office paper, a touch of blue */
  --sheet:#FFFFFF;      /* a resume on the desk */
  --ink:#16243A;        /* body text */
  --navy:#1F3A5F;       /* brand navy, headings */
  --muted:#5A6678;      /* quiet text */
  --rule:#D6DCE5;       /* thin lines */
  --stamp:#23774B;      /* the yes stamp: buttons and YES only */
  --stamp-ink:#FFFFFF;
  --strike:#A3485A;     /* crossed-out "before" lines */
  --logo-light:block; --logo-dark:none;
  --f-display:"Lora",Georgia,"Times New Roman",serif;
  --f-body:"Lora",Georgia,"Times New Roman",serif;
  --f-label:"Montserrat","Segoe UI",Arial,sans-serif;
  /* the hero band is night-desk navy in both themes */
  --hero-bg:#0E1D31; --hero-glow:#1F3A5F; --hero-ink:#F2F5F9; --hero-muted:#B4C1D3; --hero-green:#5CC88B; --hero-line:rgba(242,245,249,.28);
  --step--1:clamp(.82rem,.8rem + .1vw,.88rem);
  --step-0:clamp(1.02rem,.98rem + .2vw,1.12rem);
  --step-1:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --step-2:clamp(1.6rem,1.35rem + 1.2vw,2.2rem);
  --step-3:clamp(2.2rem,1.7rem + 2.6vw,3.6rem);
  --radius:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#0F1520;--sheet:#172131;--ink:#E3E8F0;--navy:#C8D6EC;--muted:#9AA7B9;--rule:#2B394D;
  --stamp:#3FA36C;--stamp-ink:#06120B;--strike:#E08A9B;--logo-light:none;--logo-dark:block;color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0F1520;--sheet:#172131;--ink:#E3E8F0;--navy:#C8D6EC;--muted:#9AA7B9;--rule:#2B394D;
  --stamp:#3FA36C;--stamp-ink:#06120B;--strike:#E08A9B;--logo-light:none;--logo-dark:block;color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--navy);text-underline-offset:3px}
a:focus-visible,button:focus-visible{outline:3px solid var(--stamp);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--f-display);color:var(--navy);line-height:1.15;text-wrap:balance;margin:0}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.label{font-family:var(--f-label);font-weight:700;font-size:var(--step--1);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.logo-light{display:var(--logo-light)} .logo-dark{display:var(--logo-dark)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-label);font-weight:700;font-size:.95rem;letter-spacing:.04em;text-decoration:none;border-radius:var(--radius);padding:.85em 1.4em;border:2px solid transparent;cursor:pointer;transition:transform .15s ease}
.btn-yes{background:var(--stamp);color:var(--stamp-ink)}
.btn-yes:hover{transform:translateY(-1px)}
.btn-quiet{border-color:var(--rule);color:var(--navy);background:transparent}
@media (prefers-reduced-motion: reduce){.btn{transition:none}.btn-yes:hover{transform:none}}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:10px}
.top .brand img{height:48px;width:auto}
.top .btn{padding:.6em 1.1em;font-size:.85rem}
.nav{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto;margin-right:clamp(8px,2vw,24px)}
.nav a{font-family:var(--f-label);font-weight:600;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--navy);padding-block:6px;border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--stamp)}

/* hero */
.hero{padding-block:clamp(44px,7vw,96px) clamp(40px,6vw,80px);background:radial-gradient(60% 80% at 80% 45%,var(--hero-glow) 0%,transparent 70%),var(--hero-bg);color:var(--hero-ink)}
.hero .label{color:var(--hero-green)}
.hero .btn-yes{background:var(--hero-green);color:#06140C}
.hero .btn-quiet{border-color:var(--hero-line);color:var(--hero-ink)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center}
.hero h1{font-size:var(--step-3);font-style:italic;font-weight:400;margin-block:14px 18px;color:var(--hero-ink)}
.hero h1 em{font-style:normal;font-weight:600;color:var(--hero-green)}
.hero .lede{max-width:34em;color:var(--hero-muted)}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;padding:0;list-style:none;font-family:var(--f-label);font-weight:600;font-size:var(--step--1);color:var(--hero-muted)}
.facts li::before{content:"✓";color:var(--hero-green);margin-right:.45em}
.stamp{justify-self:center;width:min(360px,100%);transform:rotate(-8deg);animation:thunk .75s cubic-bezier(.2,.9,.25,1.15) .3s both}
.stamp img{width:100%;height:auto;opacity:.95}
@keyframes thunk{0%{transform:rotate(-15deg) scale(1.3);opacity:.4}65%{transform:rotate(-7deg) scale(.97);opacity:1}100%{transform:rotate(-8deg) scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){.stamp{animation:none}}

section{padding-block:clamp(44px,7vw,80px);scroll-margin-top:80px}
.section-head{max-width:40em;display:grid;gap:10px;margin-bottom:28px}
.section-head h2{font-size:var(--step-2)}
.section-head p{color:var(--muted)}
.band{background:var(--sheet);border-block:1px solid var(--rule)}

/* the 10-second test */
.test{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;margin:0;list-style:none}
.test li{display:grid;gap:8px;align-content:start}
.test .when{font-family:var(--f-label);font-weight:700;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--stamp)}
.test h3{font-size:var(--step-1)}
.test p{color:var(--muted)}

/* prices */
.prices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.price{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--radius);padding:22px 20px;display:flex;flex-direction:column;gap:14px}
.price.founding{border:2px solid var(--stamp)}
.price .tag{font-family:var(--f-label);font-weight:700;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--stamp);min-height:1.2em}
.price h3{font-size:1.15rem}
.price .amount{font-family:var(--f-display);font-size:2.3rem;font-weight:600;color:var(--navy);line-height:1;font-variant-numeric:tabular-nums}
.price .amount small{font-family:var(--f-label);font-size:.8rem;font-weight:600;color:var(--muted);margin-left:4px}
.price ul{margin:0;padding-left:1.1em;color:var(--ink);font-size:.95rem;display:grid;gap:4px;flex:1}
.price .btn{width:100%}
.price-note{margin-top:18px;color:var(--muted);font-size:var(--step--1);font-family:var(--f-label);font-weight:600}

/* before / after */
.ba{display:grid;gap:14px;max-width:820px}
.ba-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:0;border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--sheet)}
.ba-row > div{padding:16px 18px;display:grid;gap:6px;min-width:0}
.ba-row .before{background:var(--paper);border-right:1px solid var(--rule)}
.ba-row .before p{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--strike);text-decoration-thickness:2px}
.ba-row .after p{color:var(--ink)}
.ba-row .why{font-size:var(--step--1);color:var(--muted);font-style:italic}
.ba-caption{margin-top:14px;font-size:var(--step--1);color:var(--muted)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding:0;margin:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;border-top:2px solid var(--navy);padding-top:16px;display:grid;gap:8px;align-content:start}
.steps li::before{content:"Step " counter(s);font-family:var(--f-label);font-weight:700;font-size:var(--step--1);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.steps h3{font-size:var(--step-1)}
.steps p{color:var(--muted)}

/* about + gov */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,56px)}
.prose{display:grid;gap:14px;max-width:36em}
.prose h2{font-size:var(--step-2)}
.start{justify-self:start}
.about-photo{width:min(200px,55%);aspect-ratio:1;object-fit:cover;border-radius:var(--radius);border:1px solid var(--rule);margin-bottom:4px}
.signoff{font-family:var(--f-display);font-style:italic;font-size:var(--step-1);color:var(--navy)}

/* faq */
.faq{display:grid;gap:0;max-width:820px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding-block:16px}
.faq summary{cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:1.12rem;color:var(--navy);list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-label);color:var(--muted)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin-top:10px;max-width:40em}

/* closing */
.closing{text-align:left}
.closing .wrap{display:grid;gap:18px;justify-items:start}
.closing h2{font-size:var(--step-3);font-style:italic;font-weight:400}
.closing h2 em{font-style:normal;font-weight:600;color:var(--stamp)}

footer{border-top:1px solid var(--rule);padding-block:28px calc(28px + 64px)}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;font-family:var(--f-label);font-weight:600;font-size:var(--step--1);color:var(--muted)}
footer a{color:var(--muted)}
footer .links{display:flex;gap:18px;flex-wrap:wrap}

/* phone: sticky order bar */
.mobile-bar{display:none}
@media (max-width:860px){
  .nav{display:none}
  .hero .wrap{grid-template-columns:minmax(0,1fr)}
  .stamp{width:min(180px,50%);justify-self:start}
  .prices{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two{grid-template-columns:minmax(0,1fr)}
  .test,.steps{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .top .btn{display:none}
  .prices{grid-template-columns:minmax(0,1fr)}
  .ba-row{grid-template-columns:minmax(0,1fr)}
  .ba-row .before{border-right:0;border-bottom:1px solid var(--rule)}
  .mobile-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--sheet);border-top:1px solid var(--rule)}
  .mobile-bar .btn{flex:1}
  .mobile-bar .btn-quiet{flex:0 0 auto}
}

.legal{padding-block:12px 24px}.legal h1{font-size:var(--step-2)}.legal h2{font-size:var(--step-1);margin-top:12px}