/* Roster Dashboard — public landing page.
   Rebuild from the 2026-08-10 design handoff (handoff_rosterdashboard_site).
   The hierarchy the brief asks for: the iPhone/iPad app is the primary way the
   family reads the roster, with the e-ink panel, the subscribable calendar and
   any spare screen as the other places it lives.

   Palette and type are the iOS app's, so every surface we ship reads as one
   product. Tokens are mirrored in static/web.css (account area) — change both.
   Fonts are self-hosted from static/fonts (see fonts.css); we never send a
   visitor to a third-party font CDN. */

:root{
  --ink:#211e18;        /* headings, dark surfaces, primary buttons */
  --muted:#6d675b;      /* body copy */
  --faint:#a49d8d;      /* meta, disabled list items, mono numerals */
  --line:#e6e0d4;       /* hairlines, card borders */
  --paper:#f4f1ea;      /* page background */
  --surface:#fbf9f4;    /* cards */
  --soft:#efebe1;       /* alternating section background */
  --accent:#a86a4e;     /* terracotta: kickers, links, logo mark */
  --accent-deep:#8d5539; /* link hover */
  --sage:#6f8a72;       /* ticks, live dot */
  --max:1320px;

  --serif:'Newsreader',Iowan Old Style,Palatino,Georgia,serif;
  --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block;max-width:100%}
ul{list-style:none}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-deep)}
button{font:inherit;color:inherit}

/* Every interactive control keeps a visible focus ring (handoff §10). */
a:focus-visible,button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}

.shell{max-width:var(--max);margin:0 auto;padding:0 40px}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.kicker{
  font-family:var(--mono);
  font-size:12.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);
}

/* Display type. h1/h2 are Newsreader; the italic run inside them is the one
   place the terracotta carries a whole phrase. */
h1,h2,h3{font-weight:400;letter-spacing:-.028em;line-height:1.08}
h1,h2{font-family:var(--serif)}
/* The display size lives on the element, not on a wrapper class: a heading
   dropped in without .sec-head must not silently fall back to the browser's
   default h2 size. Sections that want their own scale override below. */
h2{font-size:clamp(32px,3.6vw,50px)}
h1 em,h2 em{font-style:italic;color:var(--accent)}

/* The header is sticky and 76px tall, so an anchor jump would otherwise park
   the section's kicker underneath it. */
section[id]{scroll-margin-top:92px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;white-space:nowrap;text-align:center;
  padding:16px 28px;border-radius:11px;
  font-size:15px;font-weight:600;cursor:pointer;
  border:1.5px solid transparent;
}
.btn-ink{background:var(--ink);color:#fbf9f4;border-color:var(--ink);
  box-shadow:0 14px 30px -14px rgba(24,18,8,.7)}
.btn-ink:hover{color:#fbf9f4;background:#2c281f}
.btn-quiet{background:var(--surface);color:var(--ink);border-color:#ddd7c9}
.btn-quiet:hover{color:var(--ink);border-color:var(--faint)}
.btn-accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-accent:hover{background:var(--accent-deep);color:#fff}
.btn-ghost{background:transparent;color:#f8f5ee;border-color:rgba(248,245,238,.28)}
.btn-ghost:hover{color:#fff;border-color:rgba(248,245,238,.5)}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:40;
  background:rgba(244,241,234,.86);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.hdr{height:76px;display:flex;align-items:center;gap:40px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{color:var(--ink)}
.brand-mark{
  width:34px;height:34px;border-radius:10px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;flex:none;
}
.brand-word{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.19em}
.nav{margin-left:auto;display:flex;align-items:center;gap:34px;font-size:14.5px}
.nav a{color:#5a5347}
.nav a:hover{color:var(--ink)}
.hdr .btn{padding:13px 22px;border-radius:10px;font-size:14px}
.menu-toggle{display:none;border:0;background:transparent;padding:8px;cursor:pointer}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#f7f5ef 0%,var(--paper) 58%,var(--soft) 100%);
  border-bottom:1px solid var(--line);
}
.hero .shell{
  padding-top:76px;padding-bottom:0;
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero h1{
  margin-top:18px;
  font-size:clamp(40px,5.6vw,82px);line-height:1.06;
  color:#191712;max-width:16ch;
}
.hero-sub{
  margin-top:24px;max-width:60ch;
  font-size:21px;line-height:1.55;color:#5f594d;text-wrap:pretty;
}
.hero-sub b{font-weight:600;color:var(--ink)}
.hero-ctas{margin-top:32px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.hero-note{margin-top:16px;font-size:14px;color:#8b8474}

/* ---- 4a. the split-flap relation plate ----
   A departure-board flap in the flow of the h1. Four stacked faces: the
   resting word underneath, and three clipped halves that do the flip. The
   whole plate is aria-hidden — the h1 carries a plain-language label. */
.flap{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:calc(10.4ch + .3em);height:1.16em;
  margin:0 .12em;
  border-radius:.13em;overflow:hidden;
  background:var(--ink);color:#f6f2e8;
  font-family:var(--mono);font-weight:700;font-size:.66em;
  letter-spacing:.01em;line-height:1;
  box-shadow:0 10px 24px -12px rgba(24,18,8,.5);
  perspective:700px;
}
.flap-face{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--ink);backface-visibility:hidden;
}
/* the seam the two halves fold about */
.flap-hair{
  position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;
  background:rgba(0,0,0,.6);z-index:5;
}
.flap-bottom-old{z-index:2;clip-path:inset(50% 0 0 0);animation:flapHold .62s linear forwards}
.flap-bottom-new{z-index:3;clip-path:inset(50% 0 0 0);transform-origin:center top;
  animation:flapUp .3s cubic-bezier(.2,.7,.3,1) .31s both}
.flap-top-old{z-index:4;clip-path:inset(0 0 50% 0);transform-origin:center bottom;
  animation:flapDown .3s cubic-bezier(.5,0,1,.6) forwards}
@keyframes flapDown{0%{transform:rotateX(0)}100%{transform:rotateX(-90deg)}}
@keyframes flapUp{0%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
@keyframes flapHold{0%,97%{opacity:1}100%{opacity:0}}

/* ---- 4b. the phone carousel: a fixed bezel, screens sliding behind it ---- */
.stage-wrap{
  position:relative;width:100%;
  height:calc(var(--slide-h) + 20px);
  margin-top:52px;
}
.stage{position:absolute;left:0;right:0;top:0;height:var(--slide-h)}
/* The window clips the strip and dissolves the neighbouring screens toward
   the edges, so the strip reads as endless rather than as a finite filmstrip. */
.stage-win{
  position:absolute;inset:0;overflow:hidden;
  --edge:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.16) 12%,rgba(0,0,0,.4) 26%,
    #000 36%,#000 64%,rgba(0,0,0,.4) 74%,rgba(0,0,0,.16) 88%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:var(--edge);mask-image:var(--edge);
}
.strip{position:absolute;inset:0}
.slide{
  position:absolute;top:0;
  width:var(--slide-w);height:var(--slide-h);
  border-radius:36px;overflow:hidden;background:#0b0b0a;
}
.slide img{width:100%;height:100%;object-fit:cover;object-position:top center}
.bezel{
  position:absolute;left:50%;top:-11px;transform:translateX(-50%);
  width:calc(var(--slide-w) + 22px);height:calc(var(--slide-h) + 22px);
  border:11px solid #0b0b0a;border-radius:47px;
  box-shadow:0 34px 64px -20px rgba(24,18,8,.45);
  pointer-events:none;z-index:5;
}

/* ---------- feature band ---------- */
.band{border-bottom:1px solid var(--line);background:var(--paper)}
.band .shell{padding-top:64px;padding-bottom:68px}
/* The 2px gap over a --line background IS the rule between cells. */
.band-grid{
  margin-top:34px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:2px;background:var(--line);border:1px solid var(--line);
}
.band-cell{background:var(--paper);padding:30px 30px 34px}
.band-num{font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:.14em;color:var(--faint)}
.band-cell h3{margin-top:12px;font-family:var(--sans);font-size:22px;
  font-weight:600;line-height:1.2;letter-spacing:normal}
.band-cell p{margin-top:8px;font-size:15.5px;line-height:1.5;color:var(--muted)}

/* ---------- globe break ---------- */
.globe{position:relative;height:520px;background:var(--ink);overflow:hidden}
.globe-img{
  position:absolute;right:-4%;top:50%;transform:translateY(-50%);
  width:62%;min-width:640px;object-fit:contain;opacity:.9;
  --fade:radial-gradient(62% 62% at 52% 48%,#000 42%,rgba(0,0,0,.55) 68%,rgba(0,0,0,0) 100%);
  -webkit-mask-image:var(--fade);mask-image:var(--fade);
}
/* Scrim so the copy keeps its contrast over the image's left edge. */
.globe-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0%,rgba(33,30,24,.9) 34%,
    rgba(33,30,24,.4) 58%,rgba(33,30,24,0) 80%);
}
.globe-copy{
  position:relative;height:100%;
  display:flex;flex-direction:column;justify-content:center;
  pointer-events:none;
}
.globe-copy h2{font-size:clamp(34px,4.2vw,60px);color:#f8f5ee;max-width:14ch}
.globe-copy p{margin-top:20px;font-size:19px;line-height:1.55;
  color:rgba(248,245,238,.82);max-width:46ch}

/* ---------- shared section head ---------- */
.section{padding:104px 0;border-bottom:1px solid var(--line)}
.section.soft{background:var(--soft)}
.sec-head{max-width:46ch}
.sec-head h2{margin-top:14px;font-size:clamp(32px,3.6vw,50px)}
.sec-head p{margin-top:18px;font-size:18px;line-height:1.55;color:var(--muted)}

/* ---------- how it works ---------- */
.trio{margin-top:52px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.step{background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:32px}
.step-kicker{font-family:var(--mono);font-size:12.5px;font-weight:700;
  letter-spacing:.13em;color:var(--faint)}
.step h3{margin-top:14px;font-family:var(--sans);font-size:23px;
  font-weight:600;line-height:1.25;letter-spacing:normal}
.step p{margin-top:10px;font-size:16px;line-height:1.55;color:var(--muted)}
/* The middle step is the product itself, so it is the one inverted card. */
.step.invert{background:var(--ink);border-color:var(--ink);color:#f8f5ee}
.step.invert .step-kicker{color:#c99678}
.step.invert p{color:rgba(248,245,238,.74)}

/* ---------- where it lives ---------- */
.lives{margin-top:52px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}
.live{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  overflow:hidden;display:flex;flex-direction:column}
.live-shot{height:220px;border-bottom:1px solid var(--line);overflow:hidden}
.live-shot img{width:100%;height:100%;object-fit:cover}
/* Card 1 hangs the phone from the top of its window so it bleeds off the
   bottom edge only — do not centre it, the crop is the point. */
.live-shot.phone{
  background:#efece4;display:flex;align-items:flex-start;justify-content:center;
}
.live-phone{
  margin-top:58px;padding:8px;background:#0b0b0a;border-radius:34px;
  box-shadow:0 20px 44px -18px rgba(24,18,8,.5);
}
.live-phone img{width:176px;height:auto;border-radius:27px}
.live-body{padding:26px 28px 30px}
.live-body h3{font-family:var(--sans);font-size:20px;font-weight:600;letter-spacing:normal}
.live-body p{margin-top:9px;font-size:15.5px;line-height:1.55;color:var(--muted)}
.live-body a{font-weight:600}

/* ---------- pricing ---------- */
/* _tiers.html brings its own card styles (it is shared with /pricing); all
   this page owes it is the same 52px gap the other section grids use. */
.tiers-wrap{margin-top:52px}
.pricing-note{margin-top:26px;text-align:center;font-size:13px;color:var(--faint)}
.pricing-note a{color:var(--faint);text-decoration:underline}
.pricing-note a:hover{color:var(--muted)}

/* ---------- faq ---------- */
.faq .shell{max-width:860px}
.faq-list{margin-top:40px;display:flex;flex-direction:column}
.faq-row{border-top:1px solid #ddd7c9}
.faq-list>.faq-row:last-of-type{border-bottom:1px solid #ddd7c9}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:24px 0;background:transparent;border:0;cursor:pointer;text-align:left;
  font-size:18.5px;font-weight:600;color:var(--ink);
}
.faq-q h3{font:inherit;letter-spacing:normal}
.faq-sign{flex:none;font-family:var(--mono);font-size:22px;font-weight:500;color:var(--accent)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.2,.7,.3,1)}
.faq-a p{padding:0 60px 26px 0;font-size:16.5px;line-height:1.6;color:var(--muted)}

/* ---------- closing cta ---------- */
.cta{padding:104px 0}
.cta-panel{
  background:var(--ink);border-radius:24px;padding:64px;color:#f8f5ee;
  display:flex;flex-wrap:wrap;align-items:center;gap:40px;
}
.cta-panel h2{font-size:clamp(30px,3.2vw,46px)}
.cta-copy{flex:1 1 420px}
.cta-copy p{margin-top:16px;font-size:17.5px;line-height:1.55;
  color:rgba(248,245,238,.75);max-width:52ch}
.cta-actions{flex:0 1 300px;display:flex;flex-direction:column;gap:12px}
.cta-note{margin-top:4px;font-size:13.5px;line-height:1.5;color:rgba(248,245,238,.55)}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);background:var(--paper)}
.site-footer .shell{
  padding-top:34px;padding-bottom:34px;
  display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between;
  font-size:14px;color:var(--muted);
}
.footer-links{display:flex;flex-wrap:wrap;gap:26px}
.footer-links a{color:var(--muted)}
.footer-links a:hover{color:var(--ink)}

/* ---------- scroll reveals (§5) ----------
   The hidden state is applied by JS, never in CSS: with JS off or broken the
   page must still be fully readable rather than a column of invisible blocks. */
[data-reveal]{will-change:opacity,transform}

/* ---------- responsive (§9) ---------- */
@media (max-width:1099px){
  .section{padding:84px 0}
  .cta{padding:84px 0}
  .cta-panel{padding:48px}
  .globe{height:auto}
  /* Stack the copy above the image rather than letting the globe crowd it. */
  .globe-img{position:static;transform:none;width:100%;min-width:0;
    max-height:340px;margin:0 auto}
  .globe-scrim{display:none}
  .globe-copy{padding-top:56px;padding-bottom:44px}
  .globe-copy h2,.globe-copy p{max-width:none}
}
@media (max-width:860px){
  .nav{
    display:none;position:absolute;left:16px;right:16px;top:70px;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:10px 20px;box-shadow:0 18px 44px rgba(24,18,8,.14);
  }
  .site-header.open .nav{display:flex}
  .nav a{padding:13px 0}
  .menu-toggle{display:block;margin-left:auto}
  .hdr>.btn{display:none}
}
@media (max-width:700px){
  .shell{padding:0 24px}
  .hero .shell{padding-top:48px}
  .hero-sub{font-size:18px}
  /* One-tap targets beat a row of three half-width buttons on a phone. */
  .hero-ctas{flex-direction:column;align-self:stretch}
  .hero-ctas .btn{width:100%}
  .section{padding:68px 0}
  .cta{padding:68px 0}
  .cta-panel{padding:34px 26px}
  .cta-actions{flex:1 1 100%}
  .faq-a p{padding-right:0}
}

/* ---------- reduced motion (§10) ----------
   The flap and the carousel are decoration. Under reduce they hold a single
   still frame; the page loses nothing it needed to say. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .flap-face{animation:none!important}
  .flap-bottom-old,.flap-bottom-new,.flap-top-old{display:none}
  .faq-a{transition:none}
}