/* ==========================================================================
   Commuted, commuted.app
   Shared stylesheet for index, privacy, and support.

   Type roles mirror the app itself:
     Fraunces      wordmark only
     IBM Plex Mono display figures, eyebrows, data
     Inter         everything else

   The palette is Commuted's own, asphalt to signal. Unlike the other apps
   in the portfolio these five stops carry no state: they are brand identity
   and nothing else, so nothing on this page should imply they mean anything.
   ========================================================================== */

:root{
  --cream:#F8F5F0;
  --cream-deep:#EFEAE2;
  --ink:#2A2622;
  --ink-soft:#6B655D;
  --ink-dim:#B9B2A8;

  /* Asphalt to signal */
  --asphalt:#0E1620;
  --slate:#1E3040;
  --steel:#33546B;
  --channel:#3E829B;
  --signal:#5FBFCF;

  /* Action color, drawn from the middle of the arc */
  --accent-top:#1E3040;
  --accent-bot:#33546B;

  --display:"IBM Plex Mono", ui-monospace, monospace;
  --word:"Fraunces", Georgia, serif;
  --body:"Inter", -apple-system, BlinkMacSystemFont, sans-serif;

  --gutter:clamp(20px, 5vw, 64px);
  --measure:1120px;
  --measure-prose:760px;
  --measure-support:800px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

body{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--channel);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.wrap-prose{max-width:var(--measure-prose);margin:0 auto;padding-inline:var(--gutter)}
.wrap-support{max-width:var(--measure-support);margin:0 auto;padding-inline:var(--gutter)}

/* --------------------------------------------------------------- masthead */
.masthead{display:flex;align-items:center;gap:14px;padding:38px 0 0;
  text-decoration:none;color:inherit}
.masthead img{width:42px;height:42px;border-radius:10px}
.masthead .name{font-family:var(--word);font-size:27px;letter-spacing:.01em}

/* ------------------------------------------------------------------- hero */
.hero{padding:70px 0 10px}
.hero h1{
  font-family:var(--body);font-weight:600;
  font-size:clamp(34px,6.2vw,62px);line-height:1.08;
  letter-spacing:-.022em;margin:0 0 22px;max-width:15ch;
}
.hero p.lede{
  font-size:clamp(17px,2.2vw,20px);color:var(--ink-soft);
  max-width:52ch;margin:0 0 38px;
}

/* --------------------------------------------- specimen, the signature */
.specimen{
  border-radius:22px;padding:clamp(28px,5vw,46px);color:#fff;
  background:linear-gradient(135deg,var(--asphalt),var(--slate) 25%,
    var(--steel) 50%,var(--channel) 75%,var(--signal));
  min-height:230px;display:flex;flex-direction:column;justify-content:center;
}
.specimen .task{
  font-family:var(--body);font-weight:500;font-size:15px;
  opacity:.82;margin-bottom:12px;
}
.specimen .verdict{
  font-family:var(--word);font-weight:400;
  font-size:clamp(34px,6.4vw,58px);line-height:1.05;letter-spacing:-.01em;
  margin-bottom:18px;
}
.specimen .figures{font-family:var(--display);font-size:clamp(13px,1.7vw,16px);opacity:.85}
.specimen .figures span{white-space:nowrap}
.specimen .figures i{font-style:normal;opacity:.55;padding:0 10px}

.hint{font-size:13px;color:var(--ink-soft);margin:14px 0 0;font-family:var(--display)}

/* -------------------------------------------------------------------- buy */
.buy{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin:46px 0 0}
.cta{
  display:inline-block;text-decoration:none;
  font-family:var(--body);font-weight:600;font-size:16.5px;letter-spacing:-.005em;
  color:#fff;background:var(--accent-top);
  padding:15px 30px;border-radius:13px;
  transition:background 200ms ease;
}
.cta:hover{background:var(--accent-bot)}
.price{font-family:var(--display);font-size:16px;color:var(--ink-soft)}

/* --------------------------------------------------------------- sections */
section{padding:clamp(70px,10vw,120px) 0 0}

.eyebrow{
  font-family:var(--display);font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 0 18px;
}
h2{
  font-family:var(--body);font-weight:600;
  font-size:clamp(26px,4vw,40px);line-height:1.14;letter-spacing:-.018em;
  margin:0 0 20px;max-width:20ch;
}
.section-lede{color:var(--ink-soft);max-width:58ch;margin:0 0 42px;font-size:18px}

/* --------------------------------------------------------- three moments */
.moments{display:grid;gap:26px;grid-template-columns:repeat(3,1fr)}
.moment{background:#fff;border-radius:18px;padding:30px 28px;border:1px solid var(--cream-deep)}
.moment .when{
  font-family:var(--display);font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--steel);margin-bottom:14px;
}
.moment h3{font-size:19px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em}
.moment p{margin:0;color:var(--ink-soft);font-size:15.5px}

/* ------------------------------------------------------------ the split
   Commuted's equivalent of Reckonry's arc block. Two proportional parts
   rather than five stages, because the point is a ratio: fuel against
   everything else the car costs. Widths are 1:4, which is the claim. */
.split{display:grid;gap:12px;grid-template-columns:1fr 4fr}
.part{
  border-radius:16px;padding:26px 22px 22px;color:#fff;min-height:190px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.part .band{font-family:var(--display);font-size:13px;opacity:.85}
.part .label{font-family:var(--word);font-size:23px;margin-top:6px}
.p-fuel{background:linear-gradient(135deg,var(--channel),var(--signal))}
.p-rest{background:linear-gradient(135deg,var(--asphalt),var(--steel))}
.split-note{color:var(--ink-soft);font-size:15.5px;max-width:62ch;margin:26px 0 0}

/* ------------------------------------------------------------------ shots
   Captures go in whole, at their native 1320x2868, and are cropped here
   rather than in an image editor. Every tile then shares one aspect ratio,
   so the row lines up even though the Mileage Rate screen has far less
   content on it than the other three. Change the ratio to reframe. */
.shots{display:grid;gap:20px;grid-template-columns:repeat(4,1fr)}
.shots img{
  width:100%;aspect-ratio:1320/1980;
  object-fit:cover;object-position:top;
  border-radius:14px;display:block;
}

/* --------------------------------------------------------------- refusals */
.refusals{background:var(--ink);color:var(--cream);border-radius:24px;
  padding:clamp(34px,6vw,64px)}
.refusals h2{color:var(--cream)}
.refusals .eyebrow{color:var(--ink-dim)}
.refusals .section-lede{color:var(--ink-dim)}
.refusal-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;
  grid-template-columns:repeat(2,1fr)}
.refusal-list li{
  font-family:var(--display);font-size:15.5px;padding:15px 0;
  border-top:1px solid rgba(248,245,240,.14);
}
.refusals .close{margin:34px 0 0;color:var(--ink-dim);max-width:56ch}

/* ---------------------------------------------------------------- privacy */
.privacy p{max-width:58ch;color:var(--ink-soft);font-size:18px}

/* ------------------------------------------------- interior pages, shared */
.page-head{padding:64px 0 0}
.page-head h1{
  font-family:var(--body);font-weight:600;font-size:clamp(30px,5vw,46px);
  line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;
}
.page-head .lede{color:var(--ink-soft);font-size:19px;max-width:56ch;margin:0 0 44px}
.updated{font-family:var(--display);font-size:13px;color:var(--ink-soft);margin:0 0 46px}

.page-body a{color:var(--steel)}
.page-body h2{
  font-family:var(--body);font-weight:600;font-size:22px;
  letter-spacing:-.012em;margin:44px 0 12px;max-width:none;
}
.page-body p{margin:0 0 18px}
.page-body ul{margin:0 0 18px;padding-left:22px}
.page-body li{margin-bottom:8px}

/* Gradient statement card, used on both interior pages */
.card-accent{
  border-radius:20px;padding:clamp(26px,4vw,38px);color:#fff;margin-bottom:54px;
  background:linear-gradient(135deg,var(--asphalt),var(--steel));
}
.card-accent p{margin:0;font-family:var(--display);
  font-size:clamp(17px,2.4vw,22px);line-height:1.45}

/* ------------------------------------------------------- support contact */
.contact-card{
  border-radius:20px;padding:clamp(26px,4vw,36px);color:#fff;margin-bottom:56px;
  background:linear-gradient(135deg,var(--asphalt),var(--steel));
}
.contact-card .label{
  font-family:var(--display);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;opacity:.8;margin-bottom:12px;
}
.contact-card a{color:#fff;font-family:var(--display);
  font-size:clamp(17px,2.6vw,24px);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.45)}
.contact-card p{margin:16px 0 0;opacity:.88;font-size:15.5px;max-width:52ch}

/* ------------------------------------------------------------ support q&a */
.qa{border-top:1px solid var(--cream-deep);padding:26px 0}
.qa h2{font-family:var(--body);font-weight:600;font-size:19px;
  letter-spacing:-.01em;margin:0 0 10px;max-width:none}
.qa p{margin:0 0 14px;color:var(--ink-soft)}
.qa p:last-child{margin-bottom:0}
.qa ol{margin:0 0 14px;padding-left:22px;color:var(--ink-soft)}
.qa li{margin-bottom:7px}

/* ----------------------------------------------------------------- footer */
footer{margin-top:clamp(80px,11vw,130px);padding:44px 0 60px;
  border-top:1px solid var(--cream-deep)}
.foot-grid{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;
  align-items:flex-start}
.foot-grid a{color:var(--ink-soft);text-decoration:none;font-size:15px;
  display:block;padding:3px 0}
.foot-grid a:hover{color:var(--ink)}
.foot-title{font-family:var(--display);font-size:12px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:10px}
.colophon{margin-top:38px;font-size:14px;color:var(--ink-soft)}

.foot-simple{margin-top:80px;padding:38px 0 60px;border-top:1px solid var(--cream-deep);
  font-size:15px;color:var(--ink-soft)}
.foot-simple a{color:var(--ink-soft)}
.foot-simple p{margin:0 0 8px}

/* ------------------------------------------------------------ responsive */
@media (max-width:900px){
  .moments{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .part{min-height:150px}
  .shots{grid-template-columns:repeat(2,1fr)}
  .refusal-list{grid-template-columns:1fr}
}
@media (max-width:520px){
  .shots{grid-template-columns:1fr}
}