/* Colours come from the app icon (its navy gradient and the bagel's gold) and from the app itself (its accent blue
   and the system green, orange and red of the timeline).
   Layout: a navy "passport cover" hero like the app icon, then the booklet's pages: one 1120px column on a cool
   paper ground, sections separated by space rather than boxes. Dates and day counts are set in mono, as on a stamp. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque-400-800-latin.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/BricolageGrotesque-400-800-latin-ext.woff2") format("woff2");
  font-weight: 400 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/assets/fonts/IBMPlexMono-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --paper: #F3F5FA;
  --card: #FFFFFF;
  --ink: #0B1640;
  --muted: #535D7C;
  --line: #D9DFED;
  --accent: #2563EB;
  --gold: #A96A12;
  --green: #34C759;
  /* Chrome draws a black track under a pale accent-color, so the slider gets a deeper green in light mode. */
  --green-control: #1B9A45;
  --orange: #FF8D28;
  --red: #FF383C;
  --window: rgba(37, 99, 235, 0.1);
  /* Sampled from the app's timeline: a trip's gradient, and the part of it from its first day over. */
  --trip-top: #60DB7F;
  --trip-bottom: #34C559;
  --over-top: #FF6165;
  --over-bottom: #FB373B;
  --shadow: 0 1px 2px rgba(11, 22, 64, 0.06), 0 8px 24px rgba(11, 22, 64, 0.08);
  /* The cover is navy in both themes: the icon's background gradient, top to bottom. */
  --navy: #0B1640;
  --navy-2: #1F3F95;
  --cover-ink: #FFFFFF;
  --cover-muted: rgba(255, 255, 255, 0.76);
  --gold-bright: #F7CD72;
  --bezel: #0E0F13;

  --font-display: "Bricolage Grotesque", ui-rounded, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: 0.875rem;
  --step-0: 1.0625rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.3rem + 2.4vw, 2.8rem);
  --step-4: clamp(2.5rem, 1.4rem + 4.6vw, 4.4rem);
  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0A1030; --card: #121A42; --ink: #EAEEF9; --muted: #A5AECB; --line: #27315E;
    --accent: #5B8DEF; --gold: #F2BE5C; --green: #30D158; --green-control: #30D158; --orange: #FF9230; --red: #FF4245; --window: rgba(91, 141, 239, 0.16);
    --trip-top: #5CE27E; --trip-bottom: #30CF58; --over-top: #FF696C; --over-bottom: #FA4144;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0A1030; --card: #121A42; --ink: #EAEEF9; --muted: #A5AECB; --line: #27315E;
  --accent: #5B8DEF; --gold: #F2BE5C; --green: #30D158; --green-control: #30D158; --orange: #FF9230; --red: #FF4245; --window: rgba(91, 141, 239, 0.16);
    --trip-top: #5CE27E; --trip-bottom: #30CF58; --over-top: #FF696C; --over-bottom: #FA4144;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--step-0)/1.6 var(--font-body); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: 0.18em; }
a:focus-visible, summary:focus-visible, input:focus-visible, .gallery:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0; }
.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 820px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--card); color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 10; }
.skip:focus { left: 8px; }
.eyebrow { font: 500 var(--step--1)/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.gold { color: var(--gold-bright); }

/* Header: part of the cover. */
.top { background: var(--navy); color: var(--cover-ink); position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font: 800 1.05rem/1 var(--font-display); letter-spacing: -0.01em; }
.brand img { border-radius: 22%; }
.nav { display: flex; gap: clamp(12px, 2.4vw, 28px); flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--cover-muted); text-decoration: none; font-size: var(--step--1); font-weight: 600; }
.nav a:hover { color: var(--cover-ink); }
@media (max-width: 620px) { .nav a:not(:last-child) { display: none; } }

/* The cover. */
.hero { background: linear-gradient(180deg, var(--navy-2), var(--navy)); color: var(--cover-ink); overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(32px, 6vw, 72px); align-items: center; padding-block: clamp(40px, 7vw, 88px) 0; }
.hero .eyebrow { color: var(--gold-bright); }
.hero h1 { font-size: var(--step-4); font-weight: 800; margin-top: 14px; }
.lede { margin-top: 22px; font-size: var(--step-1); line-height: 1.5; color: var(--cover-muted); max-width: 34em; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.badge img { height: 52px; width: auto; }
.badge .on-light { display: none; }
.soon { display: inline-block; padding: 12px 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); font-weight: 600; }
.facts { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 var(--step--1)/1.3 var(--font-mono); color: var(--cover-muted); }
.facts li::before { content: "✓ "; color: var(--gold-bright); }
.hero-copy { padding-bottom: clamp(40px, 7vw, 88px); }
.phone { margin: 0; justify-self: center; width: min(360px, 100%); padding: 12px; background: var(--bezel); border-radius: 56px 56px 0 0; border-bottom: 0;
         box-shadow: 0 0 0 3px #2A2D36, 0 40px 90px rgba(0, 0, 0, 0.45); align-self: end; max-height: 640px; overflow: hidden; }
.phone img { border-radius: 44px 44px 0 0; }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 0; }
  .phone { width: min(320px, 86%); max-height: 460px; }
}

/* Sections. */
.section { padding-block: clamp(56px, 9vw, 112px); }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; max-width: 44rem; }
.section-head p:not(.eyebrow) { color: var(--muted); font-size: var(--step-1); line-height: 1.55; }

/* The rolling-window demo. */
.demo { margin-top: 40px; background: var(--card); border-radius: 24px; padding: clamp(18px, 3vw, 32px); box-shadow: var(--shadow); display: grid; gap: 22px; }
.demo-readout { display: flex; align-items: center; gap: 20px; }
.ring { --used: 64; flex: none; width: 88px; height: 88px; border-radius: 50%; display: grid; place-content: center; text-align: center;
        background: radial-gradient(closest-side, var(--card) 76%, transparent 77% 100%), conic-gradient(var(--ring-color, var(--accent)) calc(var(--used) / 90 * 100%), var(--line) 0); }
.ring-num { font: 500 1.9rem/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.ring-of { font: 500 0.8rem/1 var(--font-mono); color: var(--muted); }
.demo-date { font: 500 var(--step--1)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.demo-line { font: 700 var(--step-2)/1.15 var(--font-display); margin-top: 4px; }
.demo-line.over { color: var(--red); }
.demo-warn { color: var(--red); font-weight: 600; margin-top: 4px; }
.demo-sub { color: var(--muted); font-size: var(--step--1); margin-top: 4px; font-variant-numeric: tabular-nums; }
.strip { overflow-x: auto; }
.strip-months { position: relative; height: 22px; min-width: 560px; font: 500 0.72rem/1 var(--font-mono); color: var(--muted); text-transform: uppercase; }
.strip-months span { position: absolute; top: 0; padding-left: 4px; border-left: 1px solid var(--line); height: 22px; }
.strip-lane { position: relative; height: 96px; min-width: 560px; background: color-mix(in srgb, var(--paper) 70%, var(--card)); border-radius: 12px; overflow: hidden; }
.window { position: absolute; top: 0; bottom: 0; background: var(--window); border-inline: 1px dashed var(--accent); }
/* Trips as the app draws them (TripBlock): a vertical gradient, a hairline white edge and a soft shadow. A trip that
   goes over the limit stays green until its first day over, then turns red with white hatching, which reads without
   colour too. */
.trip { position: absolute; top: 22px; bottom: 22px; border-radius: 10px; background: linear-gradient(180deg, var(--trip-top), var(--trip-bottom)); color: #fff;
        font: 600 0.72rem/1.1 var(--font-body); display: grid; place-content: center; text-align: center; overflow: hidden; white-space: nowrap;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.trip::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); pointer-events: none; }
.trip span { position: relative; }
.trip-over { position: absolute; top: 0; bottom: 0; right: 0;
             background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px 4.95px), linear-gradient(180deg, var(--over-top), var(--over-bottom)); }
.check { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--green); }
.check::after { content: ""; position: absolute; left: -5px; top: -2px; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.demo-slider { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; font: 500 var(--step--1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.demo-slider input { width: 100%; accent-color: var(--green-control); }
.demo-note { color: var(--muted); font-size: var(--step--1); }
.ees { margin-top: 28px; max-width: 44rem; color: var(--muted); }

/* Features. */
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: min(260px, 64vw); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
           margin-top: 40px; padding-bottom: 14px; }
.gallery img { scroll-snap-align: start; border-radius: 22px; box-shadow: var(--shadow); }
.feature-list { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; }
.feature-list p { color: var(--muted); margin-top: 8px; }
@media (max-width: 860px) { .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .feature-list { grid-template-columns: 1fr; } }

/* iPad. */
.ipad-grid { display: grid; gap: 40px; }
.tablet { margin: 0; padding: clamp(8px, 1.4vw, 16px); background: var(--bezel); border-radius: clamp(20px, 3vw, 40px); box-shadow: 0 0 0 3px #2A2D36, var(--shadow); }
.tablet img { border-radius: clamp(12px, 2vw, 26px); }

/* Plans. */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.plan { background: var(--card); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 3vw, 36px); display: grid; align-content: start; gap: 12px; }
.plan-pro { border: 2px solid var(--gold); }
.price { font: 500 var(--step-3)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.price span { font-size: var(--step-0); color: var(--muted); }
.plan ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 10px; color: var(--muted); }
.plan strong { color: var(--ink); }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

/* Privacy: a copy of the App Store label. */
.privacy-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.label-card { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 28px; box-shadow: var(--shadow); text-align: center; }
.label-kicker { font: 500 var(--step--1)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.label-title { font: 800 var(--step-2)/1.1 var(--font-display); margin-top: 14px; }
.label-title::before { content: "✓"; display: block; margin: 0 auto 12px; width: 56px; height: 56px; line-height: 56px; border-radius: 50%; background: var(--accent); color: var(--card); font-size: 1.6rem; }
.label-body { color: var(--muted); margin-top: 8px; font-size: var(--step--1); }
@media (max-width: 760px) { .privacy-grid { grid-template-columns: 1fr; } }

/* FAQ. */
.faq details { border-bottom: 1px solid var(--line); padding-block: 18px; }
.faq details:first-of-type { margin-top: 28px; border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; font: 700 var(--step-1)/1.3 var(--font-display); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--gold); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin-top: 10px; color: var(--muted); max-width: 65ch; }

/* Documents: privacy, support, press. */
.doc-head { background: var(--navy); color: var(--cover-ink); padding-block: clamp(36px, 6vw, 64px); }
.doc-head h1 { font-size: var(--step-4); font-weight: 800; }
.doc-head p { color: var(--cover-muted); margin-top: 12px; font-family: var(--font-mono); font-size: var(--step--1); }
.doc { padding-block: clamp(36px, 6vw, 72px); max-width: 760px; }
.doc h2 { font-size: var(--step-2); margin-top: 44px; }
.doc h3 { margin-top: 28px; }
.doc p, .doc ul, .doc table { margin-top: 14px; }
.doc ul { padding-left: 1.2em; display: grid; gap: 6px; }
.doc table { width: 100%; border-collapse: collapse; font-size: var(--step--1); }
.doc th, .doc td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { font-weight: 600; width: 34%; }
.table-scroll { overflow-x: auto; }
.contact { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.contact code { font: 500 var(--step-1)/1.2 var(--font-mono); user-select: all; }
.contact button { font: 600 var(--step--1)/1 var(--font-body); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; }
.downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 18px; }
.downloads a { display: grid; gap: 8px; padding: 18px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; text-decoration: none; color: var(--ink); font-weight: 600; }
.downloads a span { color: var(--muted); font-weight: 400; font-size: var(--step--1); }

/* Footer. */
.foot { border-top: 1px solid var(--line); padding-block: 48px 36px; color: var(--muted); font-size: var(--step--1); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; }
.foot .brand { color: var(--ink); }
.foot-about p { margin-top: 14px; max-width: 46ch; }
.foot-links { display: grid; gap: 10px; justify-content: end; align-content: start; }
.foot-links a { color: var(--ink); text-decoration: none; font-weight: 600; }
.mrz { margin-top: 36px; font: 400 clamp(0.6rem, 1.4vw, 0.85rem)/1.6 var(--font-mono); letter-spacing: 0.12em; color: var(--muted); opacity: 0.7; overflow: hidden; white-space: nowrap; display: grid; }
.fine { margin-top: 18px; font-size: 0.78rem; opacity: 0.8; }
@media (max-width: 620px) { .foot-grid { grid-template-columns: 1fr; } .foot-links { justify-content: start; } }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }