/* Driving School Diary subsite overrides.
   Loaded after the shared system.css. Accent matches the app's own "Bluebell
   and Mint" palette: indigo primary, mint secondary. British English. */
:root {
  --accent: #6b7be0;          /* Bluebell indigo */
  --accent-hover: #5766d6;
  --brand-2: #5fb99c;         /* Mint secondary */
}
@media (prefers-color-scheme: dark) {
  :root { --accent: #8e9cff; --accent-hover: #a1adff; --brand-2: #79d4b4; }
}
:root[data-theme="dark"]  { --accent: #8e9cff; --accent-hover: #a1adff; --brand-2: #79d4b4; }
:root[data-theme="light"] { --accent: #6b7be0; --accent-hover: #5766d6; --brand-2: #5fb99c; }

/* Hero app icon. The PNG already carries transparent rounded corners, so the
   soft shadow is drawn with drop-shadow to hug the squircle, not a square box.
   Unlike pfAdmin, whose hero is a tall phone screenshot, this one is a square
   icon, so it fills the hero column edge to edge instead of floating small in
   the middle of it. Capped at 460px, the intrinsic width, so it never upscales. */
.hero-shot { display: flex; justify-content: center; align-items: center; }
.hero-shot img {
  width: min(460px, 100%);
  height: auto;
  align-self: center;
  filter: drop-shadow(0 26px 50px rgba(20, 32, 68, 0.28));
}
/* Stacked hero on narrow screens: a full-bleed icon would dwarf the copy. */
@media (max-width: 860px) {
  .hero-shot img { width: min(260px, 62%); }
}
@media (prefers-color-scheme: dark) {
  .hero-shot img { filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.6)); }
}
:root[data-theme="dark"]  .hero-shot img { filter: drop-shadow(0 26px 55px rgba(0, 0, 0, 0.6)); }
:root[data-theme="light"] .hero-shot img { filter: drop-shadow(0 26px 50px rgba(20, 32, 68, 0.28)); }

/* Alternating copy + illustration rows */
.feature-split {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 320px);
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin: 54px 0;
}
.feature-split.flip { grid-template-columns: minmax(240px, 320px) 1fr; }
.feature-split.flip .mockcard { order: -1; }
.fs-copy h3 { font-size: 22px; letter-spacing: -0.01em; margin: 0 0 10px; }
.fs-copy p { margin: 0; max-width: 46ch; }
@media (max-width: 760px) {
  .feature-split, .feature-split.flip { grid-template-columns: 1fr; gap: 22px; margin: 44px 0; }
  .feature-split.flip .mockcard { order: 2; }
  .fs-copy { order: 1; }
}

/* A stylised diary card used as an illustration (not a screenshot) */
.mockcard {
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  border-radius: 22px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.12);
  text-align: left;
  font-size: 14px;
}
.mockcard.center { margin: 40px auto 6px; }
@media (prefers-color-scheme: dark) {
  .mockcard { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); box-shadow: 0 22px 55px rgba(0,0,0,0.5); }
}
:root[data-theme="dark"]  .mockcard { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.12); box-shadow: 0 22px 55px rgba(0,0,0,0.5); }
:root[data-theme="light"] .mockcard { background: #fff; border-color: rgba(0,0,0,0.10); box-shadow: 0 22px 55px rgba(0,0,0,0.12); }
.mockcard .mc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.mockcard .mc-day { font-weight: 640; letter-spacing: -0.01em; }
.mockcard .mc-badge {
  font: 600 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #fff; background: var(--brand-2); padding: 5px 9px; border-radius: 999px;
}
.mockcard .mc-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(128,128,128,0.18); }
.mockcard .mc-time { font: 600 13px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); min-width: 62px; }
.mockcard .mc-name { font-weight: 560; }
.mockcard .mc-sub { opacity: 0.62; font-size: 12.5px; }
.mockcard .mc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e8973a; margin-left: 6px; vertical-align: middle; }
.mc-caption { margin-top: 14px; font-size: 13px; opacity: 0.55; text-align: center; }

/* Feature cards with tinted icon chips (a product, not a CLI) */
.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(20,32,68,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(20,32,68,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) 13%, 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(20,32,68,0.05); }

/* ===========================================================================
   Tap to Pay on iPhone
   Apple's Marketing Guide (August 2025) governs everything in this block:
   the capability name is never shortened and never breaks across lines, the
   product visuals are Apple's own and are only ever scaled proportionally
   (never cropped, tinted, shadowed or overlaid), and every page that uses the
   copy carries the legal disclaimers. See apple/README.md.
   =========================================================================== */

.nowrap { white-space: nowrap; }

/* Hero: copy left, Apple product animation right */
.ttp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  column-gap: clamp(28px, 4.5vw, 56px);
  row-gap: 0;
  align-items: start;
}
/* The capability name is never broken across lines (Apple naming rule), so the
   heading is sized to fit it on one line at every width rather than wrapped. */
/* The headline and subheadline span the full width so the capability name
   always sits on one line at its full size (Apple naming rule: no line break). */
.ttp-hero h1 {
  grid-column: 1 / -1;
  font-size: clamp(28px, 5.4vw, 58px);
  line-height: 1.05; letter-spacing: -0.03em; margin: 0;
  white-space: nowrap;
}
.ttp-hero > .ttp-sub { grid-column: 1 / -1; margin: 10px 0 22px; }
.ttp-sub { font-size: clamp(18px, 2.2vw, 25px); font-weight: 600; letter-spacing: -0.015em; margin: 0 0 16px; }
.ttp-hero .lede { max-width: 48ch; }
.ttp-terms { margin: 18px 0 0; font-size: 13px; opacity: 0.62; }
@media (max-width: 900px) {
  .ttp-hero { grid-template-columns: 1fr; row-gap: 22px; }
}

/* Apple product visuals sit in a plain light frame in both themes, because the
   assets themselves are supplied on a light background and must not be altered. */
.ttp-visual, .ttp-film, .ttp-figure { margin: 0; }
.ttp-visual video, .ttp-film video, .ttp-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  background: #f2f2f4;
}
.ttp-visual video { box-shadow: 0 24px 60px rgba(20, 32, 68, 0.14); }
.ttp-film { max-width: 860px; margin: 46px auto 0; }
.ttp-figure { max-width: 900px; margin: 34px auto 0; }
.ttp-film figcaption, .ttp-figure figcaption {
  margin-top: 12px; font-size: 13px; opacity: 0.55; text-align: center;
}
@media (prefers-color-scheme: dark) {
  .ttp-visual video { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
}
:root[data-theme="dark"]  .ttp-visual video { box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); }
:root[data-theme="light"] .ttp-visual video { box-shadow: 0 24px 60px rgba(20, 32, 68, 0.14); }

/* Benefit tiles */
.ttp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-top: 34px; }
.ttp-tile {
  padding: 24px 24px 26px;
  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(20,32,68,0.05);
}
.ttp-tile h3 { font-size: 17px; letter-spacing: -0.01em; margin: 0 0 8px; }
.ttp-tile p { margin: 0; font-size: 14.5px; opacity: 0.78; line-height: 1.55; }
@media (prefers-color-scheme: dark) {
  .ttp-tile { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); box-shadow: none; }
}
:root[data-theme="dark"]  .ttp-tile { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.09); box-shadow: none; }
:root[data-theme="light"] .ttp-tile { 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(20,32,68,0.05); }

/* Numbered steps */
.ttp-steps { list-style: none; counter-reset: ttp; margin: 34px 0 0; padding: 0; display: grid; gap: 4px; }
.ttp-steps li {
  counter-increment: ttp;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  padding: 22px 0;
  border-top: 1px solid var(--hairline, rgba(128,128,128,0.2));
}
.ttp-steps li::before {
  content: counter(ttp);
  font: 600 14px/40px ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 40px; height: 40px; text-align: center;
  border-radius: 50%;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, transparent);
}
.ttp-steps h3 { font-size: 18px; letter-spacing: -0.01em; margin: 8px 0 6px; }
.ttp-steps p { margin: 0; max-width: 62ch; opacity: 0.82; }
@media (max-width: 620px) {
  .ttp-steps li { grid-template-columns: 34px 1fr; gap: 14px; }
  .ttp-steps li::before { width: 32px; height: 32px; line-height: 32px; font-size: 13px; }
}

/* The PSP statement and the legal block */
.ttp-note {
  margin: 34px 0 0; padding: 18px 20px;
  border-radius: 14px;
  border: 1px solid var(--hairline, rgba(128,128,128,0.2));
  font-size: 14px; line-height: 1.6; opacity: 0.85;
}
.ttp-legal { max-width: 78ch; }
.ttp-legal p { font-size: 12.5px; line-height: 1.62; opacity: 0.6; margin: 0 0 14px; }

/* The band that carries Tap to Pay on iPhone on the app's home page */
.ttp-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  gap: clamp(26px, 4.5vw, 56px);
  align-items: center;
}
.ttp-band h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.06; letter-spacing: -0.028em; margin: 0 0 10px; white-space: nowrap; }
.ttp-band .ttp-sub { font-size: clamp(17px, 2vw, 21px); }
@media (max-width: 900px) { .ttp-band { grid-template-columns: 1fr; } }

/* The nav carries "Tap to Pay on iPhone", which Apple's naming rules say must
   never be shortened. That makes this subsite's nav wider than the shared one,
   so it would wrap to two rows between the shared 700px collapse point and
   about 1050px. Collapse to the dropdown earlier instead, and keep the brand
   wordmark on one line. */
@media (max-width: 1050px) {
  .nav-links { display: none; }
  .navdd { display: block; }
  .nav .nav-inner { flex-wrap: nowrap; padding-top: 0; padding-bottom: 0; }
}
.nav .brand { white-space: nowrap; }