:root{
  --orange:#e98428; --orange-light:#F2B277; --orange-dark:#BF6B20;
  --cream:#f7ead5; --charcoal:#2b2627; --charcoal-dark:#1F1A1B;
  --blue:#607C9A; --blue-dark:#2D455C; --green:#7B9974;
  --n50:#fbf7f2; --n100:#efe8e1; --n200:#d7ccc1; --n300:#c0b0a4;
  --n400:#a89689; --n500:#8f7c71; --n600:#76645b; --n700:#5c4d46;
  --n800:#433834; --n900:#2b2422; --n950:#1f1a19;
  --error:#B5463A;

  --bg:var(--cream); --bg-2:var(--n100); --text:var(--charcoal);
  --text-2:var(--n600); --border:var(--n200); --card:#fffaf3;
  --code-bg:var(--charcoal-dark); --code-fg:var(--cream);

  --display:'Tratex','Graphik','National Park','Red Hat Display','Arial Black',sans-serif;
  --body:'Red Hat Display','Open Sans',Roboto,Arial,sans-serif;
  --mono:'Space Mono','Fira Code','IBM Plex Mono',Monaco,Consolas,monospace;

  --maxw:68rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--n900); --bg-2:var(--n800); --text:var(--cream);
    --text-2:var(--n300); --border:#4a3f3a; --card:#332b28;
    --code-bg:#1a1615;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--body); font-size:1.0625rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.5rem}
.narrow{max-width:48rem}

/* Base link style. Defined globally so a link in a container nobody thought
   about can never fall back to browser-default blue. nav/.logo/.btn opt out
   below with text-decoration:none. */
a{
  color:inherit;text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .15s ease,text-decoration-color .15s ease;
}
a:hover{text-decoration-color:currentColor}
a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

/* ---------- nav ---------- */
nav{padding:1.75rem 0;border-bottom:1px solid var(--border)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{font-family:var(--mono);font-weight:700;font-size:1.0625rem;letter-spacing:-.02em;color:var(--text);text-decoration:none}
.logo span{color:var(--orange-dark)}
@media (prefers-color-scheme:dark){.logo span{color:var(--orange)}}
.nav-links{display:flex;align-items:center;gap:1.5rem}
.nav-links a{font-size:.9375rem;font-weight:700;color:var(--text);text-decoration:none;padding-bottom:2px;border-bottom:2px solid transparent}
.nav-links a:hover{border-bottom-color:var(--border)}
.nav-links a.cta,.nav-links a[aria-current="page"]{border-bottom-color:var(--orange)}

/* ---------- hero ---------- */
header{padding:6rem 0 5rem}
header.compact{padding:4rem 0 2.5rem}
.eyebrow{
  font-family:var(--mono);font-size:.75rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);
  margin-bottom:1.5rem;display:block;line-height:1.7;
}
.eyebrow a{
  color:inherit;text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.eyebrow a:hover{color:var(--text);text-decoration-color:var(--text)}
.eyebrow a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

h1{
  font-family:var(--display);font-weight:900;
  font-size:clamp(2.75rem,9vw,5.75rem);
  line-height:.98;letter-spacing:-.035em;margin-bottom:1.75rem;
}
h1.doc{font-size:clamp(2.25rem,6vw,3.75rem);margin-bottom:1.25rem}
.lede{font-size:clamp(1.125rem,2.4vw,1.375rem);line-height:1.5;color:var(--text-2);max-width:44ch;margin-bottom:2.5rem}
.lede.wide{max-width:56ch}
.lede strong{color:var(--text);font-weight:700}
.lede a{
  color:inherit;text-decoration:underline;
  text-decoration-color:var(--orange);
  text-decoration-thickness:1px;text-underline-offset:3px;
  transition:color .15s ease,text-decoration-color .15s ease;
}
.lede a:hover{color:var(--text);text-decoration-color:var(--text)}
.lede a:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

.btn{
  display:inline-block;background:var(--orange);color:var(--charcoal-dark);
  font-family:var(--body);font-weight:700;font-size:1.0625rem;
  padding:.9375rem 2rem;border-radius:2px;text-decoration:none;
  border:2px solid var(--orange);cursor:pointer;
  transition:background .15s ease,border-color .15s ease,transform .1s ease;
}
.btn:hover{background:var(--orange-light);border-color:var(--orange-light)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--blue-dark);outline-offset:3px}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn.small{font-size:.875rem;padding:.5rem 1rem}

.rule{height:1px;background:var(--border);border:0}

/* ---------- sections ---------- */
section{padding:5rem 0}
section.tight{padding:3rem 0}
h2{
  font-family:var(--display);font-weight:900;
  font-size:clamp(1.875rem,4.5vw,2.75rem);
  line-height:1.05;letter-spacing:-.025em;margin-bottom:1.25rem;
}
h2.doc{font-size:clamp(1.5rem,3.5vw,2rem);margin-bottom:1rem}
h3.doc{
  font-family:var(--body);font-weight:700;font-size:1.125rem;
  margin:2rem 0 .625rem;letter-spacing:-.01em;
}
.section-lede{color:var(--text-2);max-width:52ch;margin-bottom:3rem;font-size:1.0625rem}

.grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(15.5rem,1fr))}
.card{
  background:var(--card);border:1px solid var(--border);
  border-radius:3px;padding:1.75rem;
}
.card h3{
  font-family:var(--body);font-weight:700;font-size:1.0625rem;
  margin-bottom:.625rem;letter-spacing:-.01em;
}
.card p{color:var(--text-2);font-size:.9375rem;line-height:1.55}
.card .tag{
  font-family:var(--mono);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--n700);display:block;margin-bottom:.875rem;
}
@media (prefers-color-scheme:dark){.card .tag{color:var(--orange-light)}}

/* ---------- steps ---------- */
.steps{list-style:none;counter-reset:s;display:grid;gap:0;max-width:46rem}
.steps li{
  counter-increment:s;display:grid;
  grid-template-columns:3.25rem 1fr;gap:1.25rem;
  padding:1.5rem 0;border-top:1px solid var(--border);
}
.steps li:last-child{border-bottom:1px solid var(--border)}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--mono);font-size:.875rem;font-weight:700;
  color:var(--n700);padding-top:.2rem;
}
@media (prefers-color-scheme:dark){.steps li::before{color:var(--orange-light)}}
.steps h3{font-family:var(--body);font-weight:700;font-size:1.0625rem;margin-bottom:.375rem}
.steps p{color:var(--text-2);font-size:.9375rem}

/* ---------- prose / docs ---------- */
.prose p{margin-bottom:1.125rem;color:var(--text)}
.prose p.muted{color:var(--text-2)}
.prose ul,.prose ol{margin:0 0 1.25rem 1.25rem}
.prose li{margin-bottom:.5rem}
.prose li::marker{color:var(--text-2)}
.prose strong{font-weight:700}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:var(--orange);text-underline-offset:2px}
.prose a:hover{text-decoration-color:currentColor}

.prose code{
  font-family:var(--mono);font-size:.8125em;
  background:var(--bg-2);border:1px solid var(--border);
  border-radius:2px;padding:.1em .35em;
}
.prose pre{
  background:var(--code-bg);color:var(--code-fg);
  border-radius:3px;padding:1.25rem;overflow-x:auto;
  margin-bottom:1.5rem;font-size:.8125rem;line-height:1.6;
}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;color:inherit}

.tbl-scroll{overflow-x:auto;margin-bottom:1.5rem;border:1px solid var(--border);border-radius:3px}
table{border-collapse:collapse;width:100%;font-size:.9375rem}
th,td{text-align:left;padding:.75rem 1rem;border-bottom:1px solid var(--border);vertical-align:top}
th{
  font-family:var(--mono);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
  background:var(--bg-2);
}
tr:last-child td{border-bottom:0}
td code{white-space:nowrap}

.callout{
  border-left:3px solid var(--orange);background:var(--bg-2);
  padding:1rem 1.25rem;margin-bottom:1.5rem;border-radius:0 3px 3px 0;
}
.callout p:last-child{margin-bottom:0}
.callout .label{
  font-family:var(--mono);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--n700);
  display:block;margin-bottom:.375rem;
}
@media (prefers-color-scheme:dark){.callout .label{color:var(--orange-light)}}

/* ---------- copyable prompt block ---------- */
.promptbox{border:1px solid var(--border);border-radius:3px;overflow:hidden;margin-bottom:1.5rem}
.promptbox-bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.625rem .875rem;background:var(--bg-2);border-bottom:1px solid var(--border);
}
.promptbox-bar .name{
  font-family:var(--mono);font-size:.6875rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);
}
.promptbox pre{margin:0;border-radius:0;max-height:32rem;overflow:auto}

/* ---------- form ---------- */
#apply{background:var(--bg-2);border-top:1px solid var(--border)}
.form-shell{max-width:38rem}
form{display:grid;gap:1.25rem;margin-top:2.5rem}
.field{display:grid;gap:.4375rem}
label{font-weight:700;font-size:.875rem;letter-spacing:-.005em}
label .opt{font-weight:400;color:var(--text-2)}
input,textarea{
  font-family:var(--body);font-size:1rem;color:var(--text);
  background:var(--bg);border:1px solid var(--border);
  border-radius:2px;padding:.75rem .875rem;width:100%;
  transition:border-color .15s ease,box-shadow .15s ease;
}
textarea{resize:vertical;min-height:6.5rem;line-height:1.55}
input:focus,textarea:focus{
  outline:none;border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(233,132,40,.22);
}
input::placeholder,textarea::placeholder{color:var(--n400)}
.hint{font-size:.8125rem;color:var(--text-2)}

.msg{padding:.875rem 1rem;border-radius:2px;font-size:.9375rem;border:1px solid;display:none}
.msg.show{display:block}
.msg.err{color:var(--error);border-color:var(--error);background:rgba(181,70,58,.07)}
.msg.ok{border-color:var(--green);background:rgba(123,153,116,.1)}
.msg strong{display:block;margin-bottom:.1875rem}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- footer ---------- */
footer{padding:3rem 0;border-top:1px solid var(--border);font-size:.875rem;color:var(--text-2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center}
footer a{color:var(--text-2)}

@media (max-width:36rem){
  header{padding:4rem 0 3.5rem}
  section{padding:3.5rem 0}
  .steps li{grid-template-columns:2.5rem 1fr;gap:.875rem}
  .nav-links{gap:1rem}
  .nav-links a{font-size:.875rem}
}