/* CineDrive - cinedrive.grcsac.com
   System fonts only, one stylesheet, no external anything. The app makes no
   network requests at all, so the site that describes it does not either.
   Dark is the primary reading: the product lives on a car screen at night.
   Both themes are designed, and every pair holds WCAG AA. */

:root{
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --serif:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;

  /* light: cool paper, picked to sit with the icon's chrome rather than fight it */
  --bg:#F5F7FA;
  --bg-alt:#E9EEF4;
  --card:#FFFFFF;
  --ink:#0E1620;
  --ink-soft:#4B5A6B;
  --line:#DBE2EA;
  --accent:#0B5FD0;          /* the play-triangle blue, darkened to hold AA on paper */
  --accent-ink:#FFFFFF;
  --glow:none;
  --shadow:0 1px 2px rgba(13,26,43,.06),0 10px 30px rgba(13,26,43,.07);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#070C14;            /* near-black with the icon's blue cast */
    --bg-alt:#0D1A2B;        /* the dashboard ground */
    --card:#0C1421;
    --ink:#EAF1FA;
    --ink-soft:#97A6BA;
    --line:#1B2A3D;
    --accent:#4FA8FF;        /* the glow, lifted to hold AA on near-black */
    --accent-ink:#04101F;
    --glow:0 0 40px rgba(1,141,252,.18);
    --shadow:none;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.wrap{width:100%;max-width:720px;margin:0 auto;padding:0 20px}
a{color:var(--accent)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
img{max-width:100%;height:auto}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--card);padding:10px 14px;border-radius:8px}

/* header ---------------------------------------------------------------- */
.nav{border-bottom:1px solid var(--line);background:var(--bg)}
.nav .wrap{display:flex;align-items:center;gap:14px;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:600}
.brand img{width:28px;height:28px;border-radius:7px}
.nav nav{margin-left:auto;display:flex;gap:18px;font-size:15px}
.nav nav a{color:var(--ink-soft);text-decoration:none}
.nav nav a:hover{color:var(--ink);text-decoration:underline}

/* hero ------------------------------------------------------------------ */
.hero{padding:56px 0 8px;text-align:center}
.hero img.appicon{width:112px;height:112px;border-radius:26px;box-shadow:var(--shadow),var(--glow)}
.hero h1{
  font-family:var(--serif);font-weight:400;letter-spacing:-.01em;
  font-size:clamp(30px,5.4vw,44px);line-height:1.18;margin:26px 0 14px;
  text-wrap:balance;
}
.hero .lede{font-size:clamp(17px,2.2vw,19.5px);color:var(--ink-soft);margin:0 auto;max-width:34em}
.platforms{margin-top:18px;font-size:14px;color:var(--ink-soft)}

/* status pill ----------------------------------------------------------- */
.pill{
  display:inline-block;margin-top:24px;padding:.5rem 1rem;border-radius:999px;
  border:1px dashed var(--line);color:var(--ink-soft);
  font-size:14px;font-weight:600;
}

/* sections -------------------------------------------------------------- */
section{padding:40px 0}
section + section{border-top:1px solid var(--line)}
h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(23px,3.2vw,30px);
  margin:0 0 6px;letter-spacing:-.005em;text-wrap:balance;
}
h2 + .sub{color:var(--ink-soft);margin:0 0 22px;font-size:16px}
h3{font-size:17px;margin:0 0 4px;font-weight:650}
p{margin:0 0 15px}
p:last-child{margin-bottom:0}
.muted{color:var(--ink-soft)}
.small{font-size:14.5px}

/* the two states, side by side ------------------------------------------ */
.states{display:grid;gap:14px}
@media (min-width:640px){.states{grid-template-columns:1fr 1fr;gap:18px}}
.state{
  background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px;
}
.state .when{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--accent);font-weight:700;display:block;margin-bottom:8px;
}
.state h3{margin-bottom:6px}

/* feature grid ---------------------------------------------------------- */
.grid{display:grid;gap:22px}
@media (min-width:640px){.grid{grid-template-columns:1fr 1fr;gap:26px}}

/* promise list ---------------------------------------------------------- */
.promise{list-style:none;padding:0;margin:0;display:grid;gap:11px}
.promise li{padding-left:26px;position:relative}
.promise li::before{
  content:"";position:absolute;left:4px;top:.62em;
  width:9px;height:9px;border-radius:2px;background:var(--accent);
}

/* honesty callout ------------------------------------------------------- */
.note-box{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;
}
.note-box .lbl{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:8px;font-weight:700;
}

/* documents ------------------------------------------------------------- */
.doc{padding:34px 0 8px}
.doc h1{font-family:var(--serif);font-weight:400;font-size:clamp(27px,4.4vw,36px);margin:0 0 6px}
.doc .dated{color:var(--ink-soft);font-size:14.5px;margin:0 0 24px}
.summary{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;
  padding:16px 18px;margin:0 0 28px;
}
.summary p{margin:0}
.summary .lbl{
  font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:7px;font-weight:700;
}
.doc h2{font-size:clamp(20px,2.7vw,24px);margin:32px 0 8px}
.doc h3{margin:22px 0 4px}
.doc ul{margin:0 0 15px;padding-left:22px}
.doc li{margin-bottom:7px}
.tablewrap{overflow-x:auto;margin:18px 0}
.doc table{width:100%;border-collapse:collapse;font-size:15.5px}
.doc th,.doc td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{font-weight:650}
.doc pre{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;overflow-x:auto;font-size:13.5px;line-height:1.6;
}

/* faq ------------------------------------------------------------------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:15px 0;font-weight:600;font-size:16.5px;
  list-style:none;display:flex;gap:12px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--ink-soft);font-weight:400;font-size:20px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq .a{padding:0 0 16px;color:var(--ink-soft)}
.faq .a p{margin-bottom:11px}

/* footer ---------------------------------------------------------------- */
footer{border-top:1px solid var(--line);margin-top:20px;padding:26px 0 40px;background:var(--bg-alt)}
footer .wrap{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:14.5px;color:var(--ink-soft)}
footer a{color:var(--ink-soft)}
footer .sp{margin-left:auto}

.mid{text-align:center;padding:80px 0}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}