@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url("../fonts/instrument-serif-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url("../fonts/plex-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/plex-mono.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --fog:#E8ECF0;--paper:#F7F9FA;--ink:#0E1A1F;--mute:#5A6A72;--line:#C5CED4;
  --sea:#0F6B75;--sea-deep:#0A4A52;--signal:#1AA6B3;
  --serif:"Instrument Serif",Georgia,serif;
  --sans:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(18px,4.5vw,64px);
  --ease:cubic-bezier(.22,.75,.25,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--fog);color:var(--ink);font:400 clamp(.98rem,.94rem + .2vw,1.0625rem)/1.55 var(--sans);text-rendering:optimizeLegibility}
a{color:var(--sea-deep)}
a:hover{color:var(--sea)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.skip{position:absolute;left:var(--gutter);top:-48px;z-index:40;background:var(--ink);color:var(--paper);padding:10px 14px}
.skip:focus{top:12px}
code{font-family:var(--mono);font-size:.9em}

.bar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  min-height:60px;padding:0 var(--gutter);
  background:color-mix(in srgb,var(--fog) 86%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent);
}
.mark{font-family:var(--serif);font-size:1.45rem;letter-spacing:.04em;text-decoration:none;color:var(--ink)}
.bar nav{display:flex;gap:clamp(14px,2.5vw,28px);font-size:.875rem;font-weight:500}
.bar nav a{text-decoration:none;color:var(--mute)}
.bar nav a:hover{color:var(--ink)}

/* Hero: brand + search box as the composition */
.hero{
  position:relative;isolation:isolate;
  padding:clamp(48px,10vw,120px) var(--gutter) clamp(56px,9vw,100px);
  min-height:min(100dvh,880px);
  display:grid;align-content:center;gap:0;
}
.hero-bg{
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(90% 70% at 80% -10%, color-mix(in srgb,var(--signal) 22%,transparent), transparent 55%),
    radial-gradient(70% 55% at 10% 100%, color-mix(in srgb,var(--sea) 14%,transparent), transparent 50%),
    linear-gradient(180deg, #DDE5EA 0%, var(--fog) 45%, var(--fog) 100%);
}
.hero-bg::after{
  content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.brand{
  margin:0 0 .15em;
  font-family:var(--serif);
  font-size:clamp(4rem,14vw,9rem);
  line-height:.88;letter-spacing:-.03em;
}
.hero h1{
  margin:0;max-width:12ch;
  font-family:var(--serif);font-weight:400;
  font-size:clamp(1.65rem,3.2vw,2.6rem);line-height:1.12;
  text-wrap:balance;
}
.deck{margin:1rem 0 0;max-width:38ch;color:var(--mute);text-wrap:pretty}

.box{
  margin-top:clamp(28px,5vw,48px);
  width:min(640px,100%);
  padding:18px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  box-shadow:0 24px 50px rgba(14,26,31,.08);
}
.box-row{display:flex;gap:10px;flex-wrap:wrap}
.box input{
  flex:1 1 200px;min-height:52px;padding:0 16px;
  border:1px solid var(--ink);border-radius:3px;background:#fff;
  font:400 1.05rem/1.3 var(--sans);color:var(--ink);
}
.box input:focus{outline:2px solid var(--signal);outline-offset:2px;border-color:var(--sea)}
.box button[type="submit"]{
  min-height:52px;padding:0 22px;border:0;border-radius:3px;
  background:var(--sea);color:#fff;font:500 .95rem/1 var(--sans);cursor:pointer;
}
.box button[type="submit"]:hover{background:var(--sea-deep)}
.box-out{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:14px 0 0;color:var(--mute);min-height:1.5em;
}
.pill{
  display:inline-flex;align-items:center;min-height:28px;padding:0 10px;
  border-radius:999px;font:500 .75rem/1 var(--sans);letter-spacing:.04em;
  text-transform:uppercase;background:color-mix(in srgb,var(--signal) 18%,var(--paper));color:var(--sea-deep);
  transition:background .25s var(--ease),color .25s var(--ease),transform .25s var(--ease);
}
.box-out[data-route="ask"] .pill{background:color-mix(in srgb,#5B8DEF 22%,var(--paper));color:#1E3A6E}
.box-out[data-route="define"] .pill{background:color-mix(in srgb,#222 12%,var(--paper));color:#222}
.box-out[data-route="find"] .pill{background:color-mix(in srgb,var(--sea) 16%,var(--paper));color:var(--sea-deep)}
.box-out.is-flash .pill{transform:scale(1.06)}
.examples{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.examples button{
  border:1px solid var(--line);background:transparent;color:var(--mute);
  font:400 .78rem/1.2 var(--mono);padding:8px 10px;border-radius:3px;cursor:pointer;
}
.examples button:hover,.examples button.is-on{border-color:var(--ink);color:var(--ink)}

.routes,.why,.get{padding:clamp(56px,9vw,110px) var(--gutter);border-top:1px solid var(--line)}
.sec-h{max-width:36rem;margin-bottom:clamp(28px,5vw,44px)}
.sec-h h2,.why h2,.get h2{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.85rem,3.2vw,2.7rem);line-height:1.1;
}
.sec-h p{margin:.6rem 0 0;color:var(--mute)}

.route-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.route-list li{
  display:grid;grid-template-columns:4rem 1fr;gap:16px 24px;
  padding:clamp(22px,3vw,32px) 0;border-bottom:1px solid var(--line);
  transition:background .25s var(--ease);
}
.route-list li.is-on{background:color-mix(in srgb,var(--paper) 70%,transparent);margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter)}
.route-list .n{font-family:var(--mono);font-size:.85rem;color:var(--mute);padding-top:.35rem}
.route-list h3{margin:0;font-family:var(--serif);font-weight:400;font-size:clamp(1.35rem,2vw,1.7rem)}
.route-list p{margin:.55rem 0 0;color:var(--mute);max-width:48ch}
.route-list .ex{margin-top:.7rem}
.route-list .ex code{display:inline-block;padding:6px 10px;background:var(--paper);border:1px solid var(--line);border-radius:3px}

.why{background:var(--paper)}
.lead{margin:1rem 0 0;max-width:42ch;font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--mute);text-wrap:pretty}
.points{list-style:none;margin:clamp(28px,5vw,48px) 0 0;padding:clamp(24px,4vw,36px) 0 0;border-top:1px solid var(--line);display:grid;gap:28px}
@media(min-width:800px){.points{grid-template-columns:repeat(3,1fr)}}
.points h3{margin:0 0 .45rem;font-family:var(--serif);font-weight:400;font-size:1.3rem}
.points p{margin:0;color:var(--mute);max-width:30ch}

.get{
  display:grid;gap:24px;background:var(--ink);color:#E8ECF0;
}
@media(min-width:860px){.get{grid-template-columns:.85fr 1.15fr;align-items:center}}
.get p{margin:.7rem 0 1.2rem;color:color-mix(in srgb,#E8ECF0 68%,transparent);max-width:36ch}
.btn{
  display:inline-flex;align-items:center;min-height:48px;padding:0 20px;
  background:var(--signal);color:var(--ink);text-decoration:none;font:500 .95rem/1 var(--sans);border-radius:3px;
}
.btn:hover{background:#5ec4ce;color:var(--ink)}
.code{
  margin:0;padding:20px;overflow:auto;border-radius:4px;
  background:#070D10;color:#C9D4DA;font:400 .82rem/1.55 var(--mono);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:22px var(--gutter) 40px;border-top:1px solid var(--line);
  color:var(--mute);font-size:.9rem;
}
.foot a{color:var(--mute);text-decoration:none}
.foot a:hover{color:var(--ink)}