/* ============================================================
   Delphy BT — landing styles
   Dark, restrained, diagnostic. Single amber accent.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#020617; --surface:#0B1220; --surface-2:#0F172A; --border:#1E293B;
  /* text */
  --text:#F8FAFC; --muted:#94A3B8; --faint:#64748B;
  /* accent (single) */
  --accent:#F59E0B; --accent-hover:#FBBF24; --accent-ink:#0B1220;
  /* semantic (tiny use only) */
  --ok:#22C55E; --warn:#F59E0B; --danger:#EF4444;
  /* type scale (fluid) */
  --t-hero:clamp(2.25rem,5vw,3.5rem); --t-h2:clamp(1.5rem,3vw,2rem);
  --t-h3:1.25rem; --t-body:1.0625rem; --t-small:0.875rem; --t-mono:0.8125rem;
  --lh-body:1.6; --lh-tight:1.15; --measure:65ch;
  /* spacing (8px base) */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s6:3rem; --s8:4rem; --s12:6rem;
  --maxw:1140px; --radius:10px; --radius-sm:6px;
  /* motion */
  --dur:200ms; --ease:cubic-bezier(.2,.6,.2,1);
}

/* ---------- reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  font-size:var(--t-body);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3{line-height:var(--lh-tight);letter-spacing:-0.02em;margin:0}
p{margin:0}
a{color:inherit}
img,svg{display:block;max-width:100%}
ul,ol{margin:0;padding:0;list-style:none}
.mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.measure{max-width:var(--measure)}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--s3)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--accent);color:var(--accent-ink);
  padding:var(--s1) var(--s2);border-radius:0 0 var(--radius-sm) 0;font-weight:600;
}
.skip-link:focus{left:0}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:60px}
.brand{display:inline-flex;align-items:center;gap:var(--s1);text-decoration:none;font-weight:700}
.brand-mark{width:14px;height:14px;border-radius:3px;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)}
.brand-name{letter-spacing:-0.02em}
.brand-bt{color:var(--accent);margin-left:2px}
.header-cta{font-size:var(--t-small)}

/* ---------- buttons ---------- */
.btn{
  --pad-y:.7rem;--pad-x:1.1rem;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font:inherit;font-weight:600;line-height:1;cursor:pointer;
  padding:var(--pad-y) var(--pad-x);
  border-radius:var(--radius-sm);border:1px solid transparent;
  text-decoration:none;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),opacity var(--dur) var(--ease);
}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{background:transparent;color:var(--text);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--faint);background:var(--surface)}
.btn-text{background:transparent;color:var(--muted);border:0;font-weight:500;font-size:var(--t-small)}
.btn-text:hover{color:var(--text)}
.btn-block{width:100%}
.btn-lg{--pad-y:.9rem;--pad-x:1.6rem;font-size:1.05rem}
.btn:disabled{opacity:.6;cursor:not-allowed}

/* ---------- hero ---------- */
.hero{padding-top:var(--s8);padding-bottom:var(--s8);border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1fr;gap:var(--s6);align-items:start}
@media(min-width:920px){
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:var(--s8)}
  .hero{padding-top:var(--s12);padding-bottom:var(--s12)}
}
.eyebrow{
  color:var(--accent);font-size:var(--t-small);font-weight:600;
  letter-spacing:.02em;margin-bottom:var(--s2);
}
.hero-title{font-size:var(--t-hero);font-weight:700;margin-bottom:var(--s3)}
.hero-sub{color:var(--muted);max-width:54ch;margin-bottom:var(--s4)}
.hero-meta{display:flex;flex-wrap:wrap;gap:var(--s1)}
.hero-meta li{
  font-size:var(--t-mono);color:var(--faint);
  border:1px solid var(--border);border-radius:99px;
  padding:.25rem .6rem;background:var(--surface);
}
.hero-meta .mono{color:var(--muted)}

/* ---------- form card ---------- */
.form-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--s4);
  box-shadow:0 1px 0 rgba(255,255,255,.02) inset;
}
@media(min-width:920px){.form-card{position:sticky;top:84px}}
.form-title{font-size:var(--t-h3);margin-bottom:var(--s1)}
.form-note{color:var(--muted);font-size:var(--t-small);margin-bottom:var(--s3)}
.field{margin-bottom:var(--s3)}
.field label{display:block;font-size:var(--t-small);font-weight:500;margin-bottom:.4rem;color:var(--text)}
.field input[type=email],
.field select{
  width:100%;font:inherit;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:.7rem .8rem;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.field input::placeholder{color:var(--faint)}
.field select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.field input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 25%,transparent)}
.field-error{color:var(--danger);font-size:var(--t-small);margin-top:.4rem}

.field-consent .checkbox{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--t-small);color:var(--muted);cursor:pointer}
.checkbox input{margin-top:.2rem;width:16px;height:16px;accent-color:var(--accent);flex:none;cursor:pointer}
.checkbox a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}

/* honeypot: removed from layout + a11y tree, not display:none (some bots skip those) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* success */
.step-success{text-align:center;padding-block:var(--s2)}
.success-mark{
  width:48px;height:48px;border-radius:99px;margin:0 auto var(--s2);
  display:grid;place-items:center;color:var(--ok);
  background:color-mix(in srgb,var(--ok) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
}

/* spinner */
.spinner{width:15px;height:15px;border-radius:99px;border:2px solid color-mix(in srgb,var(--accent-ink) 35%,transparent);border-top-color:var(--accent-ink);animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.btn[aria-busy="true"] .btn-label{opacity:.7}

/* ---------- sections ---------- */
.section{padding-block:var(--s8)}
.section-alt{background:var(--surface);border-block:1px solid var(--border)}
.kicker{color:var(--faint);font-size:var(--t-mono);letter-spacing:.04em;text-transform:uppercase;margin-bottom:var(--s2)}
.section-title{font-size:var(--t-h2);font-weight:600;margin-bottom:var(--s3)}
.section-body{color:var(--muted);font-size:var(--t-body)}

/* checks list */
.checks{display:grid;grid-template-columns:1fr;gap:var(--s1)}
@media(min-width:680px){.checks{grid-template-columns:1fr 1fr}}
.checks li{
  display:flex;align-items:baseline;gap:var(--s2);
  padding:var(--s2) var(--s3);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);
}
.section-alt .checks li{background:var(--surface-2)}
.check-k{color:var(--accent);font-size:var(--t-mono);min-width:74px;flex:none}
.check-v{color:var(--text)}

/* callout */
.callout{
  display:flex;flex-direction:column;gap:var(--s4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:var(--s6);
}
@media(min-width:780px){.callout{flex-direction:row;align-items:center;justify-content:space-between}}
.callout .btn{flex:none}
.callout .kicker{margin-top:0}

/* steps list */
.steps-list{display:grid;gap:var(--s2);counter-reset:none}
.steps-list li{display:flex;gap:var(--s3);align-items:baseline;color:var(--text);max-width:72ch}
.step-n{
  flex:none;width:30px;height:30px;border-radius:99px;display:grid;place-items:center;
  color:var(--accent);border:1px solid var(--border);background:var(--surface);
  font-size:var(--t-small);transform:translateY(.2rem)
}

/* disclaimer */
.disclaimer{
  border-left:2px solid var(--accent);
  padding:var(--s1) 0 var(--s1) var(--s3);
  color:var(--muted);font-size:var(--t-small);
}

/* final cta */
.section-final{text-align:center;border-top:1px solid var(--border)}
.final-cta .section-title{margin-bottom:var(--s2)}
.final-cta .section-body{margin-bottom:var(--s4)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--border);background:var(--surface);padding-block:var(--s6)}
.footer-inner{display:flex;flex-direction:column;gap:var(--s3)}
.footer-legal{color:var(--faint);font-size:var(--t-small)}
.footer-links{display:flex;align-items:center;gap:var(--s2);font-size:var(--t-small);color:var(--muted)}
.footer-links a{color:var(--muted);text-decoration:none}
.footer-links a:hover{color:var(--text)}
.footer-links .mono{color:var(--faint)}

/* ---------- focus visibility (keyboard) ---------- */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.btn:focus-visible{outline-offset:3px}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}