/* ─────────────────────────────────────────────────────────────────────────
   Edit Bay Tools — site stylesheet
   Ink + Signal Blue. Marketing runs on the light surface set, with dark
   full-bleed hero and CTA bands lifted from the app (which is dark only).
   ───────────────────────────────────────────────────────────────────────── */
:root{
  /* Ink — the logo navy, extended into a neutral ramp */
  --ink-950:#05090F; --ink-900:#0A1220; --ink-850:#0D1524; --ink-800:#111B2C;
  --ink-700:#1A2639; --ink-600:#2B3B54; --ink-500:#4A5C79; --ink-400:#6B7C99;
  --ink-300:#94A3B8; --ink-200:#C3CDDB; --ink-150:#D6DEE9; --ink-100:#E1E7EF;
  --ink-050:#F2F5F9; --ink-025:#F8FAFC; --white:#FFFFFF;

  /* Signal Blue — sampled from the logo, the only accent hue */
  --blue-700:#0A3FB0; --blue-600:#0E4FD6; --blue-500:#1060F8;
  --blue-400:#4C86FA; --blue-200:#BDD1FD; --blue-050:#EFF4FF;

  /* Status — borrowed from rack hardware and tally lights */
  --tally-500:#F0384A; --amber-500:#F5A524; --green-500:#17B26A; --cyan-500:#06B6D4;

  --bg-surface:var(--white); --bg-well:var(--ink-050);
  --border-subtle:var(--ink-100); --border-default:var(--ink-150);
  --text-heading:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-400);
  --accent:var(--blue-500); --accent-hover:var(--blue-600); --on-accent:var(--white);

  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:14px;
  --shadow-sm:0 1px 2px rgba(5,9,15,.06);
  --shadow-md:0 2px 6px rgba(5,9,15,.08), 0 1px 2px rgba(5,9,15,.05);
  --shadow-panel:0 24px 64px rgba(5,9,15,.28);
  --ring-focus:0 0 0 3px rgba(16,96,248,.32);

  --font-display:'Archivo',system-ui,sans-serif;
  --font:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --track-eyebrow:.14em; --track-display:-.02em;

  --page-max:1200px; --gutter:24px;
  --ease:cubic-bezier(.2,.6,.2,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font);font-size:16px;line-height:1.5;color:var(--text-body);background:var(--bg-surface);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-heading);line-height:1.08;letter-spacing:var(--track-display);font-weight:700}
a{color:var(--accent);text-decoration:none;transition:color 120ms var(--ease)}
a:hover{color:var(--accent-hover);text-decoration:underline;text-underline-offset:2px}
:focus-visible{outline:none;box-shadow:var(--ring-focus);border-radius:var(--radius-sm)}
img{max-width:100%;display:block}

.wrap{max-width:var(--page-max);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.eyebrow{font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--text-muted)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:12px;z-index:99;background:#fff;padding:8px 14px;border-radius:var(--radius-sm)}

/* ── Header ── */
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--border-subtle)}
.hdr{display:flex;align-items:center;gap:28px;height:80px}
.hdr .logo{height:38px;width:auto}
header nav{display:flex;gap:22px;flex:1}
header nav a{font-size:14px;font-weight:500;color:var(--text-body);padding:4px 0;border-bottom:2px solid transparent}
header nav a:hover{color:var(--text-heading);text-decoration:none;border-bottom-color:var(--accent)}
header nav a[aria-current="page"]{color:var(--text-heading);font-weight:600;border-bottom-color:var(--accent)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;font-weight:500;letter-spacing:.02em;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:background-color 120ms var(--ease),border-color 120ms var(--ease),color 120ms var(--ease)}
.btn-primary{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn-primary:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;text-decoration:none}
.btn-secondary{background:var(--bg-surface);color:var(--text-heading);border-color:var(--border-default)}
.btn-secondary:hover{background:var(--bg-well);border-color:var(--ink-300);text-decoration:none}
.btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.22)}
.btn-ghost-dark:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
.btn-lg{height:48px;padding:0 24px;font-size:15px}

/* ── Dark bands ── */
.band-dark{background:var(--ink-950);color:#fff}
.band-dark h1,.band-dark h2,.band-dark h3,.band-dark h4{color:#fff}
.band-dark .eyebrow{color:var(--blue-400)}
.band-dark p{color:var(--ink-300)}

/* ── Sections ── */
section{padding:76px 0;scroll-margin-top:96px}
.sec-head{max-width:70ch}
.sec-head h2{font-size:clamp(28px,3.4vw,36px);margin-top:14px}
.sec-head p{margin-top:16px;font-size:17px;line-height:1.6}

/* ── Page head (inner pages) ── */
.page-head{padding:64px 0 60px}
.page-head h1{font-size:clamp(32px,4.4vw,48px);margin-top:16px;max-width:20ch}
.page-head p{margin-top:18px;font-size:18px;line-height:1.55;max-width:62ch;color:var(--ink-200)}

/* ── Home hero ── */
.hero{padding:80px 0 84px}
.hero-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:52px;align-items:center}
.hero h1{font-size:clamp(36px,4.8vw,56px);max-width:15ch;margin-top:20px}
.hero .lead{margin-top:20px;font-size:17px;line-height:1.6;max-width:54ch;color:var(--ink-200)}
.hero .cta{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap}
.hero .facts{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;font-family:var(--mono);font-size:12px;color:var(--ink-500)}
.hero .facts span:not(:last-child)::after{content:' ·';margin-left:14px}

/* App screenshot — a real capture, framed like a window */
.shot{border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-panel);background:var(--ink-900)}
.shot img{width:100%;height:auto;display:block}
.shot-cap{margin-top:12px;font-family:var(--mono);font-size:11px;color:var(--ink-500);text-align:center}

/* ── Cards ── */
.grid{display:grid;gap:16px;margin-top:40px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm);transition:border-color 120ms var(--ease),box-shadow 180ms var(--ease)}
.card:hover{border-color:var(--border-default);box-shadow:var(--shadow-md)}
.card h3{font-size:17px;margin-bottom:9px}
.card p{font-size:14px;line-height:1.55;color:var(--text-body)}
.card .ico{width:34px;height:34px;border-radius:var(--radius-md);margin-bottom:13px;background:var(--blue-050);color:var(--accent);display:flex;align-items:center;justify-content:center}
.ico svg,.feat svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card .ico svg{width:18px;height:18px}

/* ── Tool detail rows ── */
.tool-row{display:grid;grid-template-columns:44px 1fr;gap:18px;padding:26px 0;border-bottom:1px solid var(--border-subtle)}
.tool-row:last-child{border-bottom:none}
.tool-row .ico{width:44px;height:44px;border-radius:var(--radius-md);background:var(--blue-050);color:var(--accent);display:flex;align-items:center;justify-content:center}
.tool-row .ico svg{width:22px;height:22px}
.tool-row h3{font-size:19px}
.tool-row p{margin-top:9px;font-size:15px;line-height:1.6;max-width:70ch}
.tool-row ul{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;list-style:none}
.tool-row li{font-family:var(--mono);font-size:12px;color:var(--text-muted);background:var(--bg-well);border:1px solid var(--border-subtle);border-radius:999px;padding:4px 11px}

/* ── Feature blocks ── */
.feat svg{width:20px;height:20px;stroke:var(--accent)}
.feat h3{font-size:19px;margin-top:14px}
.feat p{margin-top:10px;font-size:15px;line-height:1.6}

/* ── Split ── */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}

/* ── Spec table ── */
.spec{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:26px;background:var(--bg-well)}
.kv{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--border-subtle);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--text-muted)}
.kv .v{font-family:var(--mono);font-size:13px;color:var(--text-heading);text-align:right}

/* ── Stats ── */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
.stat{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:20px;background:var(--bg-well)}
.stat .v{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--text-heading);letter-spacing:var(--track-display)}
.stat .l{margin-top:6px;font-size:13px;color:var(--text-muted)}

/* ── Steps ── */
.steps{counter-reset:step;display:grid;gap:14px;margin-top:32px}
.step{display:grid;grid-template-columns:32px 1fr;gap:16px;align-items:start}
.step .n{counter-increment:step;width:32px;height:32px;border-radius:999px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:13px}
.step .n::before{content:counter(step)}
.step h3{font-size:16px}
.step p{margin-top:6px;font-size:15px;line-height:1.6}

/* ── Pill ── */
.pill{display:inline-flex;align-items:center;gap:8px;height:26px;padding:0 11px;border-radius:999px;font-family:var(--mono);font-size:12px;background:rgba(16,96,248,.14);color:var(--blue-400);border:1px solid rgba(16,96,248,.38)}
.pill .dot{width:6px;height:6px;border-radius:999px;background:var(--blue-400)}

/* ── Contact ── */
.contact-card{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:26px;background:var(--bg-surface)}
.contact-card .addr{font-family:var(--mono);font-size:15px;margin-top:6px}

/* ── Footer ── */
footer{background:var(--ink-900);color:var(--ink-300);padding:56px 0 30px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px}
footer .logo{height:30px;width:auto}
footer p{margin-top:16px;font-size:14px;line-height:1.6;color:var(--ink-400);max-width:32ch}
footer .eyebrow{color:var(--ink-500);margin-bottom:14px}
footer nav{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
footer nav a{font-size:14px;color:var(--ink-300)}
footer nav a:hover{color:#fff}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.08);display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:12px;color:var(--ink-500)}
.legal .sp{flex:1}

/* ── Responsive ── */
@media (max-width:1000px){
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .split,.hero-grid{grid-template-columns:1fr;gap:34px}
}
@media (max-width:720px){
  .hdr{height:auto;padding:14px 0;flex-wrap:wrap;gap:14px}
  header nav{order:3;width:100%;flex-wrap:wrap;gap:16px}
  .g4,.g3,.g2,.stats,footer .cols{grid-template-columns:1fr}
  section{padding:56px 0}
  .hero{padding:56px 0 60px}
  .tool-row{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important}
}

/* ── Account & form pages ───────────────────────────────────────────────── */
.auth-wrap{max-width:460px;margin:0 auto;padding:56px 24px 80px}
.auth-wrap.wide{max-width:920px}
.auth-card{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow-sm)}
.auth-card h1{font-size:24px;margin-bottom:6px}
.auth-card .sub{color:var(--text-muted);font-size:14px;margin-bottom:22px;line-height:1.5}

.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:500;color:var(--text-heading);margin-bottom:6px}
.field .hint{font-size:12px;color:var(--text-muted);margin-top:5px;line-height:1.45}
input[type=text],input[type=email],input[type=tel],input[type=password],select{
  width:100%;height:42px;padding:0 12px;font-family:var(--font);font-size:15px;color:var(--text-heading);
  background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-sm) inset}
input:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:var(--ring-focus)}
input[readonly]{background:var(--bg-well);color:var(--text-muted)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.5;margin-bottom:18px}
.check input{width:16px;height:16px;margin-top:2px;flex:none;accent-color:var(--accent)}

.msg{padding:11px 14px;border-radius:var(--radius-sm);font-size:13.5px;margin-bottom:16px;line-height:1.5}
.msg.err{background:#FFF5F6;border:1px solid rgba(240,56,74,.3);color:#B3202F}
.msg.ok{background:#F4FCF8;border:1px solid rgba(23,178,106,.3);color:#0E8A52}
.msg.info{background:var(--blue-050);border:1px solid rgba(16,96,248,.25);color:var(--blue-700)}
.msg.demo{background:#FFFBF3;border:1px solid rgba(245,165,36,.4);color:#8A5A02}
.hide{display:none !important}
.center{text-align:center}
.muted{color:var(--text-muted);font-size:13px}
.mt{margin-top:18px}

.code-input{font-family:var(--mono);font-size:24px;letter-spacing:.36em;text-align:center;height:56px}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:36px}
.plan{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:24px;display:flex;flex-direction:column}
.plan.featured{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.plan .badge{display:inline-block;font-family:var(--font-display);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);background:var(--blue-050);
  padding:3px 8px;border-radius:var(--radius-xs);margin-bottom:10px;align-self:flex-start}
.plan h3{font-size:16px;margin-bottom:10px}
.plan .price{font-family:var(--font-display);font-size:34px;font-weight:700;color:var(--text-heading);
  letter-spacing:var(--track-display)}
.plan .per{font-family:var(--mono);font-size:12px;color:var(--text-muted);margin-left:4px}
.plan ul{list-style:none;margin:16px 0 0;padding:0;flex:1}
.plan li{display:flex;gap:8px;font-size:14px;padding:5px 0;color:var(--text-body)}
.plan li::before{content:'✓';color:var(--green-500);font-weight:700;flex:none}
.plan .cta{margin-top:20px}

/* account */
.acct-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:start}
.panel{background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
.panel-h{padding:16px 20px;border-bottom:1px solid var(--border-subtle);display:flex;align-items:center;gap:10px}
.panel-h h2{font-size:15px;flex:1}
.panel-b{padding:20px}
.kvr{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--border-subtle);font-size:14px}
.kvr:last-child{border-bottom:none}
.kvr .k{color:var(--text-muted)}
.kvr .v{text-align:right;font-weight:500;color:var(--text-heading)}
.tag{display:inline-block;font-family:var(--font-display);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--radius-xs)}
.tag.ok{background:#DAF5E7;color:#0E8A52}
.tag.warn{background:#FEF0D8;color:#B87503}
.tag.mute{background:var(--bg-well);color:var(--text-muted)}
.tag.info{background:var(--blue-050);color:var(--blue-700)}
.sess{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--border-subtle);font-size:13.5px;align-items:center}
.sess:last-child{border-bottom:none}
.btn-ghost-dark-sm{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.22);height:40px;
  padding:0 16px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;font-size:14px}
.btn-ghost-dark-sm:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}

/* fake card */
.card-mock{background:linear-gradient(135deg,var(--ink-800),var(--ink-900));border-radius:var(--radius-lg);
  padding:22px;color:#fff;margin-bottom:20px;position:relative;overflow:hidden}
.card-mock .chip{width:34px;height:26px;border-radius:4px;background:linear-gradient(135deg,#D6C07A,#B8993F);margin-bottom:22px}
.card-mock .num{font-family:var(--mono);font-size:17px;letter-spacing:.14em}
.card-mock .foot{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--mono);
  font-size:11px;color:var(--ink-300);text-transform:uppercase;letter-spacing:.08em}
.card-mock .stamp{position:absolute;top:14px;right:-30px;transform:rotate(35deg);background:var(--amber-500);
  color:#3A2A00;font-family:var(--font-display);font-size:10px;font-weight:700;letter-spacing:.12em;padding:4px 36px}

@media (max-width:820px){ .acct-grid{grid-template-columns:1fr} .row2{grid-template-columns:1fr} }

/* ── Legal documents ────────────────────────────────────────────────────── */
.doc-grid{display:grid;grid-template-columns:220px 1fr;gap:48px;align-items:start;
  max-width:1000px;margin:0 auto;padding:48px 24px 90px}
.doc-nav{position:sticky;top:104px}
.doc-nav .eyebrow{margin-bottom:12px;display:block}
.doc-nav a{display:block;font-size:13.5px;color:var(--text-body);padding:5px 0;line-height:1.4}
.doc-nav a:hover{color:var(--accent);text-decoration:none}
.doc-nav .other{margin-top:22px;padding-top:16px;border-top:1px solid var(--border-subtle)}
.doc{max-width:74ch}
.doc h1{font-size:34px;margin-bottom:10px}
.doc .stamp-line{font-family:var(--mono);font-size:12px;color:var(--text-muted);
  padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--border-subtle)}
.doc h2{font-size:20px;margin:38px 0 12px;scroll-margin-top:104px}
.doc h3{font-size:15.5px;margin:22px 0 8px}
.doc p{margin-bottom:14px;line-height:1.68;font-size:15.5px}
.doc ul,.doc ol{margin:0 0 16px 22px}
.doc li{margin-bottom:8px;line-height:1.62;font-size:15.5px}
.doc strong{color:var(--text-heading);font-weight:600}
.doc .callout{background:var(--bg-well);border-left:3px solid var(--accent);
  padding:16px 18px;border-radius:0 var(--radius-sm) var(--radius-sm) 0;margin:20px 0}
.doc .callout p:last-child{margin-bottom:0}
.doc .callout.warn{border-left-color:var(--amber-500);background:#FFFBF3}
.doc address{font-style:normal;font-family:var(--mono);font-size:13.5px;line-height:1.7;
  background:var(--bg-well);padding:14px 16px;border-radius:var(--radius-sm);display:inline-block}
@media (max-width:860px){ .doc-grid{grid-template-columns:1fr;gap:24px} .doc-nav{position:static} }