/* B21 Stage Time subsite overrides.
   Loaded after the shared system.css. The accent is the app's own amber
   (Theme.swift Brand.amber): #F0A93B in dark, deepened to #C6851A in light so
   it still passes contrast on a white page. British English throughout. */
:root {
  --accent: #C6851A;          /* Stage amber, light mode */
  --accent-hover: #A96E10;
  --brand-2: #1f6feb;         /* the transport blue from the app's controls */
}
@media (prefers-color-scheme: dark) {
  :root { --accent: #F0A93B; --accent-hover: #F6BC5E; --brand-2: #4f96ff; }
}
:root[data-theme="dark"]  { --accent: #F0A93B; --accent-hover: #F6BC5E; --brand-2: #4f96ff; }
:root[data-theme="light"] { --accent: #C6851A; --accent-hover: #A96E10; --brand-2: #1f6feb; }

/* Hero app icon. The source icon is a full-bleed square, so the squircle and
   its transparent corners are baked into the PNG here; the shadow is drawn
   with drop-shadow so it hugs the curve rather than boxing it. Capped at
   512px, the intrinsic width, so it never upscales. */
.hero-shot { display: flex; justify-content: center; align-items: center; }
.hero-shot img {
  width: min(440px, 100%);
  height: auto;
  align-self: center;
  filter: drop-shadow(0 26px 50px rgba(40, 28, 6, 0.30));
}
@media (max-width: 860px) {
  .hero-shot img { width: min(240px, 58%); }
}
@media (prefers-color-scheme: dark) {
  .hero-shot img { filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.65)); }
}
:root[data-theme="dark"]  .hero-shot img { filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.65)); }
:root[data-theme="light"] .hero-shot img { filter: drop-shadow(0 26px 50px rgba(40, 28, 6, 0.30)); }

/* Feature cards with tinted icon chips, same shape as the other app subsites */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 16px; margin-top: 34px; }
.features .f {
  padding: 22px 22px 24px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px rgba(40,28,6,0.05);
  transition: transform .18s ease, box-shadow .18s ease;
}
.features .f:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 18px 44px rgba(40,28,6,0.10); }
.features .f .ic {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 13px;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 15%, transparent);
}
.features .f .ic svg { width: 18px; height: 18px; display: block; }
.features .f h4 { font-size: 16.5px; letter-spacing: -0.01em; margin: 0 0 6px; }
.features .f p { margin: 0; font-size: 14.5px; opacity: 0.78; line-height: 1.55; }
@media (prefers-color-scheme: dark) {
  .features .f { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); box-shadow: none; }
  .features .f:hover { box-shadow: 0 18px 44px rgba(0,0,0,0.4); }
}
:root[data-theme="dark"]  .features .f { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); box-shadow: none; }
:root[data-theme="light"] .features .f { background: #fff; border-color: rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px rgba(40,28,6,0.05); }

/* The three feature pillars use the shared .pillars/.pillar/.ptag pattern from
   system.css (a 150px mono tag column beside the content), so only the list
   inside needs styling here. Do NOT restyle .pillar itself: it is a
   design-system class and overriding its grid here would fork the look. */
.pillar-list {
  margin: 0; padding-left: 0; list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 8px 32px;
}
.pillar-list li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.pillar-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.85;
}

/* Pricing plans. Two cards, the paid one raised slightly with an amber hairline
   so it reads as the recommendation without shouting. The card is deliberately
   NOT a link target as a whole: the only tappable thing is the App Store
   button, because that is the only honest destination for a purchase. */
.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-top: 34px;
  align-items: start;
}
.plan {
  position: relative;
  padding: 26px 24px 28px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px rgba(40,28,6,0.05);
}
.plan-pro {
  border-color: color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 44px rgba(40,28,6,0.10);
}
.plan h3 { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.plan .price { margin: 0 0 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan .price .amount { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.plan .price .per { font-size: 14.5px; opacity: 0.66; }
.plan-note { margin: 0 0 16px; font-size: 14.5px; line-height: 1.55; opacity: 0.78; }
.plan-flag {
  position: absolute; top: 18px; right: 18px;
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  padding: 6px 10px; border-radius: 999px;
}
.plan-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 8px; }
.plan-list li { position: relative; padding-left: 20px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.plan-list li::before {
  content: ""; position: absolute; left: 2px; top: 0.58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.85;
}
.plan .btn { margin-top: 20px; }
@media (prefers-color-scheme: dark) {
  .plan { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); box-shadow: none; }
  .plan-pro { border-color: color-mix(in srgb, var(--accent) 46%, transparent); }
}
:root[data-theme="dark"] .plan { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); box-shadow: none; }
:root[data-theme="dark"] .plan-pro { border-color: color-mix(in srgb, var(--accent) 46%, transparent); }
:root[data-theme="light"] .plan { background: #fff; border-color: rgba(0,0,0,0.07); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px rgba(40,28,6,0.05); }
:root[data-theme="light"] .plan-pro { border-color: color-mix(in srgb, var(--accent) 42%, transparent); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 18px 44px rgba(40,28,6,0.10); }

/* The at-a-glance facts table */
.facts { width: 100%; border-collapse: collapse; margin-top: 26px; font-size: 15px; }
.facts th, .facts td { text-align: left; padding: 13px 0; border-top: 1px solid var(--hairline, rgba(128,128,128,0.2)); vertical-align: top; }
.facts th { font-weight: 600; width: 34%; padding-right: 18px; }
.facts td { opacity: 0.82; }
@media (max-width: 560px) {
  .facts th, .facts td { display: block; width: auto; padding: 0; border: none; }
  .facts th { padding-top: 14px; border-top: 1px solid var(--hairline, rgba(128,128,128,0.2)); }
  .facts td { padding-bottom: 14px; }
}

/* Apple's naming rule: "Tap to Pay on iPhone" is never shortened and never
   broken across lines. See the DriveDiary subsite's apple/README.md for the
   full rule set that governs any mention of the capability. */
.nowrap { white-space: nowrap; }
.legal-note { margin: 26px 0 0; font-size: 12.5px; line-height: 1.62; opacity: 0.58; max-width: 78ch; }