/* ONTech Prospects. Palette, type and surface rules are locked in DESIGN.md
   and enforced in test/run.mjs. Light is the base; dark is redefined twice so
   an explicit choice wins over the system preference in both directions. */

:root{
  --ground:#eef0ef;
  --stage:#e2e5e4;
  --text:#12171a;
  --muted:#5c676d;
  --rule:rgba(20,30,35,.16);
  --accent:#4a7610;
  --notice:#e3e7e5;
  --display:"Familjen Grotesk",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --figure:"Martian Mono",ui-monospace,monospace;
  --gutter:32px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0b0e10;
    --stage:#080a0b;
    --text:#e6ebed;
    --muted:#98a3a9;
    --rule:rgba(160,180,190,.17);
    --accent:#a8d24a;
    --notice:#15181a;
  }
}
:root[data-theme="dark"]{
  --ground:#0b0e10;
  --stage:#080a0b;
  --text:#e6ebed;
  --muted:#98a3a9;
  --rule:rgba(160,180,190,.17);
  --accent:#a8d24a;
  --notice:#15181a;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
html,body{margin:0}
body{
  background:var(--ground);
  color:var(--text);
  font:17px/1.6 var(--body);
  -webkit-font-smoothing:antialiased;
}
.shell{max-width:1180px;margin:0 auto;padding:0 var(--gutter)}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;padding:10px 0;color:var(--accent)}

/* ---- top bar ---- */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 0;flex-wrap:wrap}
.wordmark{font:600 16px/1 var(--display);letter-spacing:.14em;text-decoration:none}
.topnav a{color:var(--muted);text-decoration:none;margin-left:28px;font-size:16px}
.topnav a:hover,.topnav a[aria-current="page"]{color:var(--text)}
.theme{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--muted)}
.theme button{
  background:none;border:0;padding:2px 0;font:14px var(--body);color:var(--muted);
  cursor:pointer;border-bottom:1px solid transparent;
}
.theme button:hover{color:var(--text)}
.theme button[aria-pressed="true"]{color:var(--accent);border-bottom-color:currentColor}

/* ---- hero ---- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;border-top:1px solid var(--rule)}
.hero-copy{padding:76px 56px 76px 0;display:flex;flex-direction:column;justify-content:center}
.hero h1{font:700 clamp(32px,3.7vw,50px)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 18px;max-width:18ch;text-wrap:balance}
.hero p{margin:0 0 30px;color:var(--muted);font-size:19px;max-width:44ch}
.stage{position:relative;min-height:470px;background:var(--stage);border-left:1px solid var(--rule)}
.seam,.band,.crown{position:relative;background:var(--stage);overflow:hidden}
.seam{height:78px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.crown{height:150px;border-bottom:1px solid var(--rule)}
.band{height:190px;border-top:1px solid var(--rule)}
.seam canvas,.band canvas,.crown canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* full bleed, so a seam runs edge to edge while the text stays in the shell */
.bleed{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);width:100vw}
@media (max-width:860px){.seam{height:56px}.crown{height:110px}.band{height:140px}}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.act{color:var(--accent);font-weight:500;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:4px}
.creds{margin:34px 0 0;color:var(--muted);font-size:15px;max-width:46ch}
.act:hover{border-bottom-width:2px}

/* ---- sections ---- */
section{padding:78px 0;border-top:1px solid var(--rule)}
section.lead{border-top:0}
h1.page{font:700 clamp(30px,4vw,46px)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 14px;max-width:20ch}
h2{font:600 30px/1.15 var(--display);letter-spacing:-.02em;margin:0 0 10px}
h3{font:600 20px/1.3 var(--display);margin:0 0 8px}
.lede{color:var(--muted);margin:0 0 34px;max-width:62ch}
p{max-width:68ch}

/* ---- price rows ---- */
.row{display:grid;grid-template-columns:1fr auto;gap:5px 40px;padding:20px 0;border-top:1px solid var(--rule)}
.row:last-of-type{border-bottom:1px solid var(--rule)}
.row .name{grid-column:1;grid-row:1;font-weight:500;font-size:18px}
.row .note{grid-column:1;grid-row:2;color:var(--muted);font-size:16px;max-width:56ch}
.row .amt{grid-column:2;grid-row:1/span 2;align-self:start;font-family:var(--figure);font-size:17px;letter-spacing:-.02em;white-space:nowrap}
.row .amt em{font-style:normal;color:var(--muted);font-size:13px}
/* the list keeps a readable measure instead of stretching to the window, so a
   price sits where its description ends rather than a canyon away */
#prices .row,#prices .sub,#prices .fine{max-width:860px}
.fine{margin:22px 0 0;color:var(--muted);font-size:16px;max-width:66ch}
.fine li{margin-bottom:8px}
ul.plain{list-style:none;padding:0;margin:22px 0 0}
ul.plain li{padding-left:22px;position:relative;margin-bottom:10px;max-width:66ch}
ul.plain li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:var(--muted)}

/* ---- numbered steps ---- */
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0}
ol.steps li{counter-increment:s;display:flex;gap:22px;padding:20px 0;border-top:1px solid var(--rule)}
ol.steps li:last-child{border-bottom:1px solid var(--rule)}
ol.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--figure);font-size:14px;color:var(--accent);flex:0 0 44px;padding-top:3px}
ol.steps p{margin:0;max-width:56ch}

/* ---- facts ---- */
.facts{display:flex;flex-wrap:wrap;gap:36px 64px;color:var(--muted);font-size:16px}
.facts.wide{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:34px 48px}
.facts.wide div{max-width:38ch}
h3.sub{margin:44px 0 6px;font-size:18px;color:var(--text)}
.qa-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:34px 56px}
.qa h3{margin:0 0 6px;font-size:18px}
.qa p{margin:0;color:var(--muted);font-size:16px;max-width:52ch}
.facts div{max-width:34ch}
.facts b{display:block;color:var(--text);font-weight:500;margin-bottom:4px}

/* ---- form ---- */
form{max-width:none}
.field{margin-bottom:30px}
.field label{display:block;font-weight:500;margin-bottom:4px}
.field .hint{display:block;color:var(--muted);font-size:15px;margin-bottom:4px}
input[type=text],input[type=email],input[type=tel],select,textarea{
  width:100%;background:none;color:var(--text);font:17px/1.5 var(--body);
  border:0;border-bottom:2px solid var(--muted);padding:3px 0 8px;
}
select{font-family:var(--body)}
textarea{min-height:92px;resize:vertical}
input:focus,select:focus,textarea:focus{border-bottom-color:var(--accent);outline:none}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:22px}
.check input{margin-top:4px;width:18px;height:18px;flex:0 0 18px;accent-color:var(--accent)}
.check label{max-width:60ch}
.hp{position:absolute;left:-9999px}
button.submit{
  background:none;border:0;padding:12px 0;margin:8px 0 0;
  color:var(--accent);font:500 18px var(--body);cursor:pointer;
  border-bottom:1px solid currentColor;
}
button.submit:hover{border-bottom-width:2px}
button.submit[disabled]{color:var(--muted);cursor:default;border-bottom-color:var(--rule)}
.err{color:var(--accent);font-size:15px;margin-top:8px}
.result{border-top:1px solid var(--rule);padding-top:26px;margin-top:8px}
.ref{font-family:var(--figure);font-size:22px;letter-spacing:-.02em;display:block;margin:10px 0 18px}

/* ---- notice bar ---- */
.notice{background:var(--notice);color:var(--muted);font-size:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.notice b{color:var(--accent);font-weight:500}

footer{padding:44px 0 70px;border-top:1px solid var(--rule);color:var(--muted);font-size:15px}
footer a{color:var(--muted)}
footer a:hover{color:var(--text)}
footer .cols{display:flex;flex-wrap:wrap;gap:14px 40px;margin-bottom:18px}

@media (max-width:860px){
  :root{--gutter:22px}
  .hero{grid-template-columns:1fr}
  .stage{min-height:200px;order:-1;border-left:0;border-bottom:1px solid var(--rule)}
  .hero-copy{padding:44px 0}
  .topnav{order:3;width:100%;margin-top:4px}
  .topnav a{margin:0 26px 0 0}
  section{padding:56px 0}
}

/* ---- booking layout ---- */
.booking{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:0 72px;align-items:start}
.summary{position:sticky;top:28px;border-top:1px solid var(--rule);padding-top:22px}
.summary h2{font-size:20px;margin:0 0 14px}
.summary dl{margin:0 0 22px;display:grid;grid-template-columns:1fr auto;gap:10px 20px}
.summary dt{color:var(--muted);font-size:16px;margin:0}
.summary dd{margin:0;font-family:var(--figure);font-size:16px;text-align:right}
.summary .terms{color:var(--muted);font-size:15px;margin:0 0 12px;max-width:42ch}
@media (max-width:960px){.booking{grid-template-columns:1fr;gap:48px 0}.summary{position:static}}

/* ---- closing call to action ---- */
.closer{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:16px 40px}
.closer h2{margin:0}

/* ---- terms and long prose ---- */
.prose h3{margin:34px 0 6px}
.prose p{margin:0 0 14px;max-width:70ch}
.prose .note{color:var(--muted);font-size:16px}

/* ---- footer contact ---- */
/* the footer is the only element on every page, and it had no way to reach us
   on it. Anything the site already says once is not repeated here. */
.reachrow{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 14px}
.reachrow:empty{display:none}
.reach{color:var(--text);font-size:16px}
a.reach{text-decoration:underline;text-underline-offset:3px}
a.reach:hover{text-decoration-thickness:2px}