/* Solution example pages (frontend/public/examples/*.html), linked from the homepage's
   "View this example" buttons. Colours and fonts match home.html, including dark mode. */
:root{
  color-scheme:light;
  --bg:#FFFFFF;
  --bg-soft:#F9F8F4;
  --surface:#FFFFFF;
  --surface-2:#F2F3EF;
  --ink:#162646;
  --ink-2:#4A5A7C;
  --green-text:#4B7520;
  --lime:#A0CC68;
  --lime-wash:#EEF5E4;
  --line:rgba(22,38,70,.14);
  --focus:#162646;
  --band:#162646;           /* navy title band */
  --band-ink:#FFFFFF;
  --band-ink-2:#D5DCEA;     /* 10:1 on the band */
  --band-accent:#A0CC68;    /* 8.1:1 on the band */
  --shadow:0 1px 2px rgba(22,38,70,.06),0 18px 50px rgba(22,38,70,.12);
  /* Same font lists as the app (frontend/src/theme.ts) and home.html */
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Avenir Next",Avenir,"Helvetica Neue",Helvetica,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A1328;--bg-soft:#0E1A33;--surface:#14233F;--surface-2:#1B2D4F;
  --ink:#EEF2F9;--ink-2:#B8C3DB;--green-text:#A9D26F;--lime-wash:rgba(160,204,104,.13);
  --line:rgba(255,255,255,.12);--focus:#FFFFFF;--band:#0E1A33;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 50px rgba(0,0,0,.35);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A1328;--bg-soft:#0E1A33;--surface:#14233F;--surface-2:#1B2D4F;
  --ink:#EEF2F9;--ink-2:#B8C3DB;--green-text:#A9D26F;--lime-wash:rgba(160,204,104,.13);
  --line:rgba(255,255,255,.12);--focus:#FFFFFF;--band:#0E1A33;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 18px 50px rgba(0,0,0,.35);color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;color:var(--ink);text-wrap:balance}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.2em}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.wrap{max-width:1180px;margin:0 auto;padding-left:max(32px,env(safe-area-inset-left,0px));padding-right:max(32px,env(safe-area-inset-right,0px))}
.ico{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Title band */
.band{--focus:var(--band-accent);background:var(--band);color:var(--band-ink);padding:calc(28px + env(safe-area-inset-top,0px)) 0 200px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px;border:1.5px solid rgba(255,255,255,.55);border-radius:10px;color:var(--band-ink);font-size:.9375rem;font-weight:600;text-decoration:none}
.back:hover{background:rgba(255,255,255,.1)}
.intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-top:40px}
.kicker{font-size:.8125rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--band-accent)}
h1{margin:12px 0 14px;font-size:clamp(2.25rem,4.4vw,3.25rem);line-height:1.08;color:var(--band-ink)}
.place{display:flex;align-items:center;gap:8px;color:var(--band-accent);font-size:.9375rem;font-weight:700}
.summary{color:var(--band-ink-2);font-size:1.0625rem}

/* Main figure, overlapping the band */
.figure{margin:-170px auto 0;max-width:840px;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow)}
.figure.wide{max-width:none}
.figure a{display:block;cursor:zoom-in}
.figure img{width:100%;height:auto;background:#FFFFFF}
.figure figcaption{padding:14px 20px;border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem}

/* Sections */
.section{padding:60px 0}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.h-label{display:inline-block;margin-bottom:18px;padding-bottom:8px;border-bottom:2px solid var(--lime);font-family:var(--sans);font-size:.8125rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.challenge{color:var(--ink-2)}
.question{padding:18px 20px;border-radius:12px;background:var(--surface-2);font-size:1rem}
.big{margin-bottom:26px;font-size:2rem}
.caveat{margin-top:22px;color:var(--ink-2);font-size:.9375rem;font-style:italic}

/* Approach: numbered steps joined by a green line */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px;margin:8px 0 0;padding:0;list-style:none}
.steps li{position:relative}
.steps li:not(:last-child)::before{content:"";position:absolute;top:15px;left:40px;right:-14px;height:2px;background:var(--lime)}
.num{position:relative;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--bg);font-size:.875rem;font-weight:700}
.steps h3{margin:12px 0 4px;font-family:var(--sans);font-size:1rem;font-weight:700}
.steps p{color:var(--ink-2);font-size:.9375rem}

/* Results band, business value */
.results{padding:56px 0;border-block:1px solid var(--line);background:var(--bg-soft)}
.stats,.values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0;list-style:none}
.stats li,.values li{padding:4px 0 4px 18px;border-left:3px solid var(--lime)}
.stat{font-family:var(--serif);font-size:2.25rem;font-weight:600;line-height:1.1}
.stat-label,.value-label{margin-top:8px;font-size:.8125rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.value-label{margin-top:0;font-family:var(--sans);color:var(--ink)}
.stat-note,.values p{margin-top:4px;color:var(--ink-2);font-size:.9375rem}

/* How we verified the results */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.checks li{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--lime-wash);color:var(--green-text);font-size:.8125rem;font-weight:800}
.pill{padding-left:4px}
.pill:not(:has(.ico)){padding-left:10px}
.pill .ico{width:18px;height:18px;padding:3px;border-radius:50%;background:var(--lime);color:#162646;stroke-width:3.2}
.checks h3{margin:12px 0 6px;font-family:var(--sans);font-size:1rem;font-weight:700}
.checks p{color:var(--ink-2);font-size:.9375rem}

.foot{padding:28px 0 calc(28px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);color:var(--ink-2);font-size:.9375rem}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
.foot a{font-weight:700;color:var(--ink)}

@media(max-width:900px){
  .intro,.two{grid-template-columns:minmax(0,1fr)}
  .intro{gap:16px}
  .two{gap:36px}
  .stats,.values,.checks{grid-template-columns:minmax(0,1fr)}
  /* Steps stack, with the green line running down between the numbers */
  .steps{grid-template-columns:minmax(0,1fr);gap:18px}
  .steps li{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px}
  .steps li>:not(.num){grid-column:2}
  .steps .num{grid-row:1/span 2}
  .steps h3{margin-top:3px}
  .steps li:not(:last-child)::before{top:36px;bottom:-14px;left:14px;right:auto;width:2px;height:auto}
}
@media(max-width:640px){
  body{font-size:1rem}
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .band{padding-bottom:110px}
  .intro{margin-top:28px}
  .figure{margin-top:-80px}
  .section,.results{padding:44px 0}
  .big{font-size:1.75rem}
  .stat{font-size:2rem}
}
@media(forced-colors:active){
  .figure,.question,.checks li,.stats li,.values li{border:1px solid CanvasText}
  .num{border:1px solid CanvasText}
}