/* ============================================================
   Keepwright — house visual system
   Brand Guidelines 1.0 §3 + founder ratifications 2026-05-28:
   - House accent: Indigo (Brand Options §2)
   - Logo: Direction B keystone, SOLID indigo tile + white mark (founder 2026-05-28)
   - Body font: Inter · Title font: Montserrat
   - §6 — quiet but present
   - Sthira Style Guide §1: cards use FULL 4-side coloured borders
   - DR-014 "family but distinct": per-page accents on app-specific surfaces
     (Mileage Tracker = warm amber). House surfaces stay indigo.
   ============================================================ */

:root{
  /* Neutrals */
  --ink:#1c2530;
  --muted:#5b6b7b;
  --line:#e3e8ee;
  --bg:#ffffff;
  --band:#f6f8fa;
  --band-2:#eef2f7;

  /* HOUSE ACCENT — indigo */
  --indigo:#3b4a7a;
  --indigo-ink:#2a3656;
  --indigo-soft:#eceff5;
  --indigo-tint:#f4f6fa;
  --indigo-ring:rgba(59,74,122,0.22);

  /* PER-APP ACCENTS — DR-014 "family but distinct" */
  --amber:#c2691c;
  --amber-ink:#8d4a13;
  --amber-soft:#fbf0e3;
  --amber-tint:#fef8f1;
  --amber-ring:rgba(194,105,28,0.22);

  --teal:#0f766e;
  --teal-soft:#e6f3f1;

  /* Page-level accent (overridden per-page via body class) */
  --accent:var(--indigo);
  --accent-ink:var(--indigo-ink);
  --accent-soft:var(--indigo-soft);
  --accent-tint:var(--indigo-tint);
  --accent-ring:var(--indigo-ring);

  /* Type stacks */
  --sans:"Inter","Inter Fallback",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Montserrat","Montserrat Fallback","Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --maxw:920px;
  --radius:14px;
  --radius-card:12px;
}

/* Per-app accent overrides */
body.page-mileage-tracker{
  --accent:var(--amber);
  --accent-ink:var(--amber-ink);
  --accent-soft:var(--amber-soft);
  --accent-tint:var(--amber-tint);
  --accent-ring:var(--amber-ring);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  margin:0;
  font:17px/1.7 var(--sans);
  color:var(--ink);
  background:var(--bg);
  font-feature-settings:"cv11","ss01","ss03";
  overflow-x:hidden;
  max-width:100vw;
}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--accent-ink)}
strong{color:var(--ink);font-weight:600}

/* HEADER */
header.site{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.4rem;
  max-width:var(--maxw);margin:0 auto;
  padding:1.3rem 1.4rem;
  flex-wrap:wrap;
  background:#fff;
}
.brand{
  display:inline-flex;align-items:center;
  gap:1.05rem;
  font-family:var(--display);
  font-weight:700;font-size:1.5rem;letter-spacing:-.02em;
  color:var(--ink);text-decoration:none;
}
.brand:hover{color:var(--ink)}
.brand img{
  width:52px;height:52px;display:block;
  flex:0 0 52px;
  border-radius:11px;
}
header.site nav{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem}
header.site nav a{
  color:var(--muted);text-decoration:none;font-size:.95rem;
  padding:.3rem 0;
  border-bottom:2px solid transparent;
  transition:color .15s, border-color .15s;
}
header.site nav a:hover{color:var(--ink);border-bottom-color:var(--accent-ring)}

/* LAYOUT + HERO */
main{max-width:var(--maxw);margin:0 auto;padding:0 1.4rem 4rem}
.hero{padding:4.5rem 0 3rem;position:relative}
.hero h1{
  font-family:var(--display);font-weight:700;
  font-size:3.5rem;line-height:1.06;letter-spacing:-.028em;
  margin:0 0 .9rem;color:var(--ink);
  max-width:18ch;
}
.hero .lede{font-size:1.32rem;color:#3b4756;max-width:48ch;margin:0 0 1.1rem;line-height:1.55}
.hero p{margin:.7rem 0;max-width:54ch}
.hero p strong{color:var(--ink)}

.hero.accent-bg{
  background:linear-gradient(180deg,var(--accent-tint) 0%,#fff 100%);
  margin:0 -100vw;
  padding-left:calc(100vw - var(--maxw) / 2);
  padding-right:calc(100vw - var(--maxw) / 2);
}
.hero.accent-bg > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}

/* APP HERO — prominent app mark + tinted bg, used on Mileage Tracker pages */
.hero-app{
  background:linear-gradient(180deg,var(--accent-tint) 0%,#fff 100%);
  margin:0 -100vw;
  padding:3rem 100vw 3.4rem;
  position:relative;overflow:hidden;
}
.hero-app > *{
  max-width:var(--maxw);
  margin-left:auto;margin-right:auto;
  position:relative;z-index:1;
}
.hero-app .app-mark{
  display:block;
  width:96px;height:96px;
  border-radius:20px;
  margin-bottom:1.4rem;
  box-shadow:0 6px 20px var(--accent-ring);
}
/* Soft icon watermark — positioned relative to the section, decorative only */
.hero-app::after{
  content:"";
  position:absolute;
  right:calc(50% - 480px);top:-30px;
  width:340px;height:340px;
  background:url("mileage-tracker-icon.svg") center/contain no-repeat;
  opacity:.07;
  pointer-events:none;
  z-index:0;
}

/* HOUSE HERO — subtle motif backdrop for the indigo pages */
.hero-house{
  background:linear-gradient(180deg,var(--indigo-tint) 0%,#fff 100%);
  margin:0 -100vw;
  padding:3.2rem 100vw 3.4rem;
  position:relative;overflow:hidden;
}
.hero-house > *{
  max-width:var(--maxw);
  margin-left:auto;margin-right:auto;
  position:relative;z-index:1;
}
.hero-house::after{
  content:"";
  position:absolute;
  right:calc(50% - 520px);top:-50px;
  width:380px;height:380px;
  background:url("keepwright-logo.svg") center/contain no-repeat;
  opacity:.06;
  pointer-events:none;
  z-index:0;
}
@media(max-width:1100px){
  .hero-app::after, .hero-house::after{display:none}
}

.trust-line{
  display:inline-block;
  font-size:.76rem;color:var(--accent-ink);
  margin-bottom:1.1rem;
  text-transform:uppercase;letter-spacing:.16em;font-weight:700;
  font-family:var(--sans);
  padding:.4rem .85rem;
  background:var(--accent-soft);
  border-radius:999px;
}

/* SECTION BANDS */
.band{padding:3.2rem 0;border-top:1px solid var(--line);position:relative}
.band > h2{margin-top:0}
.band.alt{
  background:var(--band);
  margin:0 -100vw;
  padding-left:100vw;padding-right:100vw;
}
.band.alt > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}

/* TINTED band — soft accent-tinted background, between white + accent in weight */
.band.tinted{
  background:var(--accent-tint);
  margin:0 -100vw;
  padding-left:100vw;padding-right:100vw;
  border-top:1px solid var(--accent-ring);
}
.band.tinted > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}

/* ACCENT band — saturated accent-soft background */
.band.accent{
  background:var(--accent-soft);
  margin:0 -100vw;
  padding-left:100vw;padding-right:100vw;
  padding-top:3.4rem;padding-bottom:3.4rem;
  border-top:1px solid var(--accent-ring);
  border-bottom:1px solid var(--accent-ring);
}
.band.accent > *{max-width:var(--maxw);margin-left:auto;margin-right:auto}
.band.accent h2{color:var(--accent-ink)}

/* Accent stripe — thin coloured edge on top of a band, adds visual rhythm without weight */
.band.striped{border-top:none}
.band.striped::before{
  content:"";display:block;
  height:5px;width:60px;
  background:var(--accent);
  margin:0 0 1.4rem;
  border-radius:3px;
}

/* HEADINGS */
h2{
  font-family:var(--display);font-weight:700;
  font-size:1.95rem;line-height:1.18;letter-spacing:-.02em;
  margin:0 0 1.1rem;color:var(--ink);
  max-width:24ch;
}
h3{
  font-family:var(--display);font-weight:600;
  font-size:1.3rem;letter-spacing:-.01em;margin:1.8rem 0 .5rem;color:var(--accent-ink);
}
h4{
  font:600 .82rem/1.4 var(--sans);text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);margin:1.4rem 0 .4rem;
}

/* GRID CARDS — FULL 4-SIDE BORDERS */
.grid{
  list-style:none;padding:0;margin:1.4rem 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
}
.grid li{
  background:#fff;
  border:2px solid var(--accent);
  border-radius:var(--radius-card);
  padding:1.2rem 1.3rem;
  transition:transform .15s, box-shadow .15s, border-color .15s;
}
.grid li strong{
  display:block;
  color:var(--accent-ink);
  font-weight:700;font-size:1.05rem;
  margin-bottom:.5rem;
  font-family:var(--display);letter-spacing:-.005em;
}
.grid li:hover{
  border-color:var(--accent-ink);
  box-shadow:0 4px 16px var(--accent-ring);
}
.grid--soft li{
  border-color:var(--accent-ring);
  background:var(--accent-soft);
}
.grid--soft li:hover{border-color:var(--accent)}
@media (min-width:920px){
  .grid{grid-template-columns:repeat(3,1fr)}
  .grid > :last-child:nth-child(3n+1){grid-column:2}
}

/* CALLOUTS */
.callout{
  background:var(--accent-soft);
  border:2px solid var(--accent);
  border-radius:var(--radius);
  padding:1.1rem 1.3rem;
  margin:1.4rem 0;
  font-size:1.02rem;
}
.callout strong{color:var(--accent-ink)}
.pullquote{
  border-left:4px solid var(--accent);
  background:var(--accent-tint);
  padding:1.4rem 1.6rem;
  margin:1.6rem 0;
  font-family:var(--display);
  font-size:1.4rem;line-height:1.4;letter-spacing:-.015em;
  color:var(--ink);
  border-radius:0 var(--radius) var(--radius) 0;
}

/* STAT BLOCKS — for highlighting key numbers (e.g. "55p" / "10" / "0 subs") */
.stat-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1rem;
  margin:1.6rem 0;
  list-style:none;padding:0;
}
@media(max-width:780px){
  .stat-row{grid-template-columns:repeat(2,1fr);gap:.7rem}
  .stat{padding:.85rem 1rem}
  .stat .num{font-size:1.85rem}
}
@media(max-width:480px){
  .stat-row{gap:.55rem}
  .stat{padding:.7rem .85rem;border-width:1.5px}
  .stat .num{font-size:1.55rem;letter-spacing:-.01em}
  .stat .lbl{font-size:.78rem;line-height:1.35}
}
.stat{
  background:#fff;
  border:2px solid var(--accent);
  border-radius:var(--radius-card);
  padding:1.1rem 1.3rem;
  text-align:left;
}
.stat .num{
  font-family:var(--display);font-weight:700;
  font-size:2.2rem;line-height:1.05;letter-spacing:-.02em;
  color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
  display:block;margin-bottom:.3rem;
}
.stat .lbl{
  display:block;
  font-size:.86rem;color:var(--muted);line-height:1.4;
}
.stat.filled{
  background:var(--accent-soft);
  border-color:var(--accent-ring);
}
.stat.filled .num{color:var(--accent-ink)}

/* FEATURE ROW — alternating-side text+visual blocks, more visual variety than .grid */
.feature{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;align-items:center;
  margin:2.4rem 0;
  padding:0;
}
.feature .text > :first-child{margin-top:0}
.feature .visual{
  background:var(--accent-tint);
  border:2px solid var(--accent-ring);
  border-radius:var(--radius);
  padding:2rem;
  display:flex;align-items:center;justify-content:center;
  min-height:200px;
}
.feature .visual img{display:block;max-width:160px;height:auto}
.feature.reverse{grid-template-areas:"v t"}
.feature.reverse .visual{grid-area:v}
.feature.reverse .text{grid-area:t}
@media(max-width:780px){
  .feature{grid-template-columns:1fr}
  .feature.reverse{grid-template-areas:"t" "v"}
  .feature .visual{min-height:140px}
}

/* NUMBERED ANCHOR (legacy — kept for backwards compatibility if any page still uses) */
.anchor{
  display:inline-block;
  font-family:var(--display);font-weight:700;
  font-size:.85rem;
  color:var(--accent);
  width:34px;height:34px;line-height:30px;text-align:center;
  border:2px solid var(--accent);
  border-radius:50%;
  margin-right:.7rem;
  vertical-align:.05em;
}

/* SECTION ICON — flat geometric SVG, themed per H2, replaces the old number circle */
.section-icon{
  display:inline-block;
  width:34px;height:34px;
  margin-right:.8rem;
  vertical-align:-.45em;
  color:var(--accent);
  flex-shrink:0;
  border:2px solid var(--accent);
  border-radius:50%;
  padding:5px;
}
.section-icon svg{display:block;width:100%;height:100%}
h2 .section-icon{vertical-align:-.5em}
@media(max-width:560px){
  .section-icon{width:30px;height:30px;padding:4px;margin-right:.6rem;vertical-align:-.4em}
}

/* PRIMARY CTA BUTTON — for the page's main next-action */
.cta{
  display:inline-block;
  font-family:var(--display);font-weight:600;
  font-size:1.02rem;letter-spacing:-.005em;
  padding:.9rem 1.5rem;
  background:var(--accent);
  color:#fff !important;
  text-decoration:none;
  border-radius:var(--radius);
  border:2px solid var(--accent);
  transition:background .15s, border-color .15s, transform .12s;
  margin:.4rem .6rem .4rem 0;
}
.cta:hover{
  background:var(--accent-ink);
  border-color:var(--accent-ink);
  color:#fff !important;
  transform:translateY(-1px);
}
.cta.secondary{
  background:transparent;
  color:var(--accent) !important;
}
.cta.secondary:hover{
  background:var(--accent);
  color:#fff !important;
}
.cta-row{margin:1.4rem 0 .4rem;display:flex;flex-wrap:wrap;gap:0;align-items:center}

/* MISC */
address{font-style:normal;line-height:1.7}
em{font-style:italic;color:#3b4756}
hr{border:none;border-top:1px solid var(--line);margin:2.2rem 0}
code{
  font:.92em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--band);padding:.15rem .4rem;border-radius:5px;
  color:var(--accent-ink);
}

/* FOOTER — minimal per §70 (no PII, no address, no email) */
footer.site{
  max-width:var(--maxw);margin:3.5rem auto 2rem;
  padding:1.8rem 1.4rem 0;
  border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;
  line-height:1.65;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 1.6rem;
}
footer.site a{color:var(--muted)}
footer.site a:hover{color:var(--ink)}
footer.site p{margin:0}
.footer-mark{
  font-family:var(--display);font-weight:700;font-size:1.05rem;letter-spacing:-.015em;
  color:var(--ink);
}
.footer-links{display:flex;flex-wrap:wrap;gap:0 .85rem}
.footer-links a{display:inline-block}

/* CALCULATOR — moved from inline to canonical CSS (DRY, single source) */
.calc{display:grid;grid-template-columns:1.1fr 1fr;gap:1.6rem;margin:1rem 0 0;align-items:start}
.calc .inputs label{display:block;margin:.95rem 0 .35rem;font-weight:600;font-size:.95rem;color:var(--ink);font-family:var(--display);letter-spacing:-.005em}
.calc .inputs input[type=number], .calc .inputs select{
  width:100%;padding:.65rem .75rem;font:inherit;font-family:var(--sans);
  border:2px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);
  transition:border-color .15s;
}
.calc .inputs input:focus, .calc .inputs select:focus{outline:0;border-color:var(--accent)}
.calc .inputs .help{display:block;margin-top:.3rem;color:var(--muted);font-size:.86rem;font-weight:400;line-height:1.5;font-family:var(--sans)}
.calc .inputs .check{display:flex;gap:.6rem;align-items:flex-start;margin:1rem 0 .3rem;font-weight:600;font-size:.95rem;font-family:var(--display)}
.calc .inputs .check input{width:auto;margin-top:.18rem;flex:0 0 auto;accent-color:var(--accent)}
.calc .inputs .check .help{margin-top:.2rem;font-weight:400}
.calc .inputs .group{
  border:2px solid var(--accent);
  background:var(--accent-soft);
  padding:1rem 1.2rem;
  border-radius:var(--radius-card);
  margin:.9rem 0;
}
.calc .inputs .group h4{
  margin:0 0 .5rem;font-size:.95rem;color:var(--accent-ink);font-weight:700;
  text-transform:none;letter-spacing:-.005em;font-family:var(--display);
}
.calc .inputs .group label{margin-top:.5rem}
.calc .results{
  background:#fff;
  border:2px solid var(--accent);
  border-radius:var(--radius);
  padding:1.4rem 1.5rem;
  align-self:start;
  position:sticky;top:1rem;
}
.calc .results h3{
  margin:0 0 .2rem;font-size:.85rem;color:var(--accent);
  text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-family:var(--sans);
}
.calc .results .big{
  font-size:2.6rem;font-weight:700;line-height:1.05;color:var(--ink);
  margin:.3rem 0 .5rem;letter-spacing:-.024em;font-variant-numeric:tabular-nums;
  font-family:var(--display);
}
.calc .results .sub{color:var(--muted);font-size:.92rem;margin:0 0 1rem;font-family:var(--sans)}
.calc .results .row{display:flex;justify-content:space-between;margin:.4rem 0;font-size:.94rem;color:var(--ink)}
.calc .results .row span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.calc .results .divider{border-top:1px solid var(--line);margin:1rem 0 .5rem}
.calc .results .vat-block{
  margin-top:.8rem;padding:1rem 1.1rem;
  background:var(--accent-tint);
  border:1px solid var(--accent-ring);
  border-radius:var(--radius-card);
}
.calc .results .vat-block h4{margin:0 0 .3rem;font-size:.8rem;color:var(--accent);text-transform:uppercase;letter-spacing:.08em;font-family:var(--sans)}
.calc .results .vat-block .big{font-size:1.7rem;color:var(--accent-ink)}
.calc .results .note{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line);color:var(--muted);font-size:.85rem;line-height:1.5}
.calc .results .warn{
  margin-top:.7rem;padding:.7rem .95rem;
  background:#fff7ed;border:1px solid #f3d9b8;border-radius:8px;
  font-size:.88rem;color:#8a5a1f;
}
@media(max-width:780px){.calc{grid-template-columns:1fr}.calc .results{position:static}}

/* RESPONSIVE */
@media(max-width:560px){
  .hero{padding-top:3rem}
  .hero h1{font-size:2.2rem;max-width:14ch}
  .hero .lede{font-size:1.08rem}
  header.site{padding:1rem 1.1rem;gap:.9rem}
  header.site nav{gap:.7rem}
  header.site nav a{font-size:.9rem}
  .brand{font-size:1.25rem;gap:.75rem}
  .brand img{width:44px;height:44px;flex-basis:44px}
  .band{padding:2.2rem 0}
  h2{font-size:1.55rem}
  .pullquote{font-size:1.15rem;padding:1rem 1.2rem}
  .cta{font-size:.96rem;padding:.78rem 1.15rem}
  .feature{grid-template-columns:1fr;gap:1.2rem}
}
@media(max-width:420px){
  .hero h1{font-size:1.95rem;max-width:none}
  .hero .lede{font-size:1rem}
  .cta-row{flex-direction:column;align-items:stretch}
  .cta-row .cta{width:100%;text-align:center;margin-right:0}
  .hero-app, .hero-house{padding-top:2.4rem;padding-bottom:2.6rem}
}

@media print{
  header.site nav, footer.site a{display:none}
  body{font-size:11pt;line-height:1.45;color:#000;font-family:Georgia,serif}
  .band.alt, .band.accent{background:none;margin:0;padding:1rem 0}
  .grid li{border:1px solid #000;break-inside:avoid}
  .callout{border:1px solid #000;background:none}
}