/* ScheduleSafe marketing site — shared styles.
   Layout: a look-ahead schedule as the page's spine — hero Gantt, then sections read like a plan sheet. */
:root{
  --navy:#0D2B52; --orange:#F47B20;
  --bg:#F3F5F8; --surface:#FFFFFF; --sunk:#E8ECF2;
  --fg:#0B1B33; --muted:#51607A; --line:#D3DAE4;
  --accent:#F47B20; --accent-ink:#A9480A; --accent-soft:#FDEBDD;
  --hero-bg:#0D2B52; --hero-fg:#EEF2F8; --hero-muted:#A9B8CF; --hero-line:#26446E; --hero-surface:#12355F;
  --bar:#3E7BD6; --bar-dim:#2A5392; --ok:#1E7A4F; --ok-soft:#DDF1E6;
  --f-display:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  --f-body:"IBM Plex Sans",Arial,Helvetica,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --radius:6px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#08131F; --surface:#0F2036; --sunk:#0B1A2C;
  --fg:#E6ECF4; --muted:#9AA9BF; --line:#22364F;
  --accent:#FF8A33; --accent-ink:#FFA05A; --accent-soft:#3A2412;
  --hero-bg:#061426; --hero-fg:#EEF2F8; --hero-muted:#9AAECB; --hero-line:#1E3656; --hero-surface:#0C2240;
  --bar:#4A88E0; --bar-dim:#2A4F86; --ok:#5BC08D; --ok-soft:#10301F;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#08131F; --surface:#0F2036; --sunk:#0B1A2C;
  --fg:#E6ECF4; --muted:#9AA9BF; --line:#22364F;
  --accent:#FF8A33; --accent-ink:#FFA05A; --accent-soft:#3A2412;
  --hero-bg:#061426; --hero-fg:#EEF2F8; --hero-muted:#9AAECB; --hero-line:#1E3656; --hero-surface:#0C2240;
  --bar:#4A88E0; --bar-dim:#2A4F86; --ok:#5BC08D; --ok-soft:#10301F;
  color-scheme:dark}

*{box-sizing:border-box}
html{scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{max-width:1140px;margin:0 auto;padding-inline:24px}
@media (max-width:520px){.wrap{padding-inline:16px}}
h1,h2,h3{font-family:var(--f-display);font-weight:700;line-height:1.02;letter-spacing:.005em;text-wrap:balance;margin:0}
h2{font-size:clamp(2.1rem,4.6vw,3.2rem)}
h3{font-size:1.45rem;font-weight:600;line-height:1.15}
p{margin:0}
.eyebrow{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.lede{font-size:1.12rem;color:var(--muted);max-width:62ch}
.mono{font-family:var(--f-mono)}

/* status chips */
.chip{display:inline-flex;align-items:center;gap:.4em;font-family:var(--f-mono);font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;padding:.2em .6em;border-radius:3px;white-space:nowrap;border:1px solid transparent}
.chip::before{content:"";width:.5em;height:.5em;border-radius:50%;background:currentColor}
.chip.beta{color:var(--ok);background:var(--ok-soft)}
.chip.road{color:var(--muted);border-color:var(--line);background:transparent}
.chip.road::before{background:transparent;border:1px solid currentColor}

.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-body);font-weight:600;font-size:1rem;padding:.8em 1.3em;border-radius:var(--radius);text-decoration:none;border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--orange);color:#1A0E03}
.btn-primary:hover{background:#FF8D3A}
.btn-ghost{border-color:currentColor;color:inherit;background:transparent}

/* nav */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:var(--hero-bg);color:var(--hero-fg);border-bottom:1px solid var(--hero-line)}
.nav .wrap{display:flex;align-items:center;gap:24px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.45rem;letter-spacing:.01em}
.brand img{width:38px;height:38px}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0;font-size:.93rem;color:var(--hero-muted)}
.nav ul a{text-decoration:none}.nav ul a:hover{color:var(--hero-fg)}
.nav .btn{padding:.55em 1em;font-size:.9rem}
@media (max-width:860px){.nav ul{display:none}.nav .btn{margin-left:auto}}

/* hero */
.hero{background:var(--hero-bg);color:var(--hero-fg);padding-block:72px 88px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
@media (max-width:960px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:44px}}
.hero .eyebrow{color:var(--orange)}
.hero h1{font-size:clamp(2.9rem,6.6vw,5rem);margin-top:16px}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .lede{color:var(--hero-muted);margin-top:22px}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.hero-note{margin-top:18px;font-size:.85rem;color:var(--hero-muted)}

/* gantt */
.sched{background:var(--hero-surface);border:1px solid var(--hero-line);border-radius:8px;font-size:.82rem;min-width:0}
.sched-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--hero-line);font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--hero-muted)}
.sched-scroll{overflow-x:auto}
.gantt{display:grid;grid-template-columns:150px repeat(5,minmax(62px,1fr));min-width:520px}
.gantt > div{border-bottom:1px solid var(--hero-line);padding:9px 8px;min-height:40px;position:relative}
.gh{font-family:var(--f-mono);font-size:.7rem;color:var(--hero-muted);text-align:center;letter-spacing:.05em}
.gh.tom{color:var(--orange);font-weight:500}
.act{font-size:.78rem;line-height:1.25;color:var(--hero-fg)}
.act .id{display:block;font-family:var(--f-mono);font-size:.66rem;color:var(--hero-muted)}
.cell.tom{background:rgba(244,123,32,.08);border-left:1px dashed rgba(244,123,32,.55);border-right:1px dashed rgba(244,123,32,.55)}
.bar{position:absolute;top:50%;transform:translateY(-50%);height:12px;border-radius:2px;background:var(--bar-dim);left:0;right:0;margin-inline:2px}
.bar.hot{background:var(--bar)}
.flag{position:absolute;right:4px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--orange);color:#1A0E03;font:600 .68rem/18px var(--f-mono);text-align:center;box-shadow:0 0 0 3px var(--hero-surface)}
.hz{display:grid;gap:0;border-top:1px solid var(--hero-line)}
.hz-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 16px;border-bottom:1px solid var(--hero-line)}
.hz-row:last-child{border-bottom:0}
.hz-n{width:18px;height:18px;border-radius:50%;background:var(--orange);color:#1A0E03;font:600 .68rem/18px var(--f-mono);text-align:center;margin-top:2px}
.hz-row b{font-weight:600;color:var(--hero-fg)}
.hz-row span{color:var(--hero-muted)}
.cite{font-family:var(--f-mono);font-size:.7rem;color:var(--hero-muted);white-space:nowrap;padding-top:3px}
@media (max-width:520px){.hz-row{grid-template-columns:22px minmax(0,1fr)}.cite{grid-column:2}}

/* sections */
section.band{padding-block:88px}
section.band + section.band{border-top:1px solid var(--line)}
.sec-head{display:grid;gap:14px;margin-bottom:44px;max-width:760px}

/* problem */
.contrast{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.contrast > div{background:var(--surface);padding:28px;display:grid;gap:10px;align-content:start}
.contrast .k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contrast .win{background:var(--accent-soft)}
.contrast .win .k{color:var(--accent-ink)}
@media (max-width:860px){.contrast{grid-template-columns:minmax(0,1fr)}}
.pull{margin-top:48px;font-family:var(--f-display);font-weight:600;font-size:clamp(1.6rem,3.2vw,2.3rem);line-height:1.12;max-width:30ch;text-wrap:balance}
.pull em{font-style:normal;color:var(--accent-ink)}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:26px 0;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--f-display);font-weight:700;font-size:2.3rem;color:var(--accent);line-height:1}
.steps h3{margin-bottom:6px}
.steps p{color:var(--muted);max-width:62ch}
@media (max-width:640px){.steps li{grid-template-columns:48px minmax(0,1fr)}.steps li .chip{grid-column:2;justify-self:start}.steps li::before{font-size:1.8rem}}

/* sample briefing */
.brief-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:960px){.brief-grid{grid-template-columns:minmax(0,1fr)}}
.sheet{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:0 18px 40px -24px rgba(11,27,51,.35);font-size:.9rem;overflow:hidden}
.sheet-top{background:var(--navy);color:#EEF2F8;padding:18px 22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:flex-end}
.sheet-top h3{font-size:1.5rem}
.sheet-top .mono{font-size:.72rem;color:#A9B8CF;letter-spacing:.05em}
.sample-tag{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;background:var(--orange);color:#1A0E03;padding:.2em .55em;border-radius:2px}
.meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line)}
.meta > div{padding:10px 22px;border-right:1px solid var(--line)}
.meta > div:last-child{border-right:0}
.meta .k{display:block;font-family:var(--f-mono);font-size:.64rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
@media (max-width:520px){.meta{grid-template-columns:minmax(0,1fr)}.meta > div{border-right:0;border-bottom:1px solid var(--line)}}
.haz{padding:16px 22px;border-bottom:1px solid var(--line);display:grid;gap:6px}
.haz-h{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.haz-h b{font-family:var(--f-display);font-size:1.2rem;font-weight:600}
.haz-h .mono{font-size:.72rem;color:var(--muted)}
.haz ul{margin:0;padding-left:1.1em;color:var(--fg)}
.haz li{margin:2px 0}
.signin{padding:14px 22px;display:grid;gap:8px}
.signin .k{font-family:var(--f-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.lines{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px}
.lines span{border-bottom:1px solid var(--line);height:22px}
.sheet-foot{padding:10px 22px;font-size:.72rem;color:var(--muted);background:var(--sunk)}
.formats{display:grid;gap:0;margin-top:28px}
.fmt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}
.fmt:last-child{border-bottom:1px solid var(--line)}
.fmt b{display:block;font-weight:600}
.fmt span{color:var(--muted);font-size:.92rem}

/* audience */
.aud{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
@media (max-width:860px){.aud{grid-template-columns:minmax(0,1fr)}}
.aud > div{padding:32px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);display:grid;gap:14px;align-content:start}
.aud ul{margin:0;padding-left:1.1em;color:var(--muted)}
.aud li{margin:4px 0}

/* not */
.not{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
@media (max-width:860px){.not{grid-template-columns:minmax(0,1fr)}}
.not-list{display:grid;gap:0}
.not-list div{padding:18px 0;border-top:1px solid var(--line);display:grid;gap:4px}
.not-list div:last-child{border-bottom:1px solid var(--line)}
.not-list b{font-weight:600}
.not-list span{color:var(--muted)}

/* roadmap */
.road{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:860px){.road{grid-template-columns:minmax(0,1fr)}}
.road > div{display:grid;gap:8px;align-content:start;padding-top:16px;border-top:2px solid var(--line)}
.road p{color:var(--muted);font-size:.95rem}

/* beta */
.beta{background:var(--hero-bg);color:var(--hero-fg)}
.beta .eyebrow{color:var(--orange)}
.beta .lede{color:var(--hero-muted)}
.beta-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:900px){.beta-grid{grid-template-columns:minmax(0,1fr)}}
.perks{list-style:none;padding:0;margin:28px 0 0;display:grid;gap:14px}
.perks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px}
.perks li::before{content:"";width:10px;height:10px;margin-top:8px;background:var(--orange);transform:rotate(45deg)}
.perks span{color:var(--hero-muted)}
form{background:var(--hero-surface);border:1px solid var(--hero-line);border-radius:8px;padding:28px;display:grid;gap:16px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:520px){.row2{grid-template-columns:minmax(0,1fr)}form{padding:20px}}
label{display:grid;gap:6px;font-size:.85rem;color:var(--hero-muted)}
input,select{font:inherit;font-size:1rem;color:var(--hero-fg);background:var(--hero-bg);border:1px solid var(--hero-line);border-radius:4px;padding:.65em .75em;width:100%;color-scheme:dark}
input:focus,select:focus{outline:2px solid var(--orange);outline-offset:0;border-color:transparent}
.fine{font-size:.78rem;color:var(--hero-muted)}
.done{padding:18px;border:1px solid var(--orange);border-radius:6px;background:rgba(244,123,32,.1)}
.err{color:#FFB38A;font-size:.85rem}

footer{background:var(--hero-bg);color:var(--hero-muted);border-top:1px solid var(--hero-line);padding-block:28px;font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

@media (prefers-reduced-motion:no-preference){
  .bar.hot{animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
  .flag{animation:pop .4s ease-out .8s both}
  @keyframes grow{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
}
img{max-width:100%;height:auto}
[hidden]:not([hidden=until-found i]){display:none!important}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--orange);color:#1A0E03;padding:.6em 1em;border-radius:var(--radius);font-weight:600}
.skip:focus{left:16px}
footer a{color:var(--hero-fg)}