/* ==========================================================================
   Time Penny — timepenny.app
   ==========================================================================

   QUIET PRECISION — the app's Oct 2026 look (app 1.1.0). Navy + royal blue,
   Manrope, copper only for pennies and Premium. Replaces Warm Graphite +
   copper (16 Aug).

   The ground is the app's own Night palette (src/theme/tokens.ts: base
   #0B1220, surface #162033), so a visitor moving from this page into the app
   at night sees the same colours underneath them.

   BLUE (#2563EB) IS THE ACTION COLOUR, exactly as in the app: buttons are
   blue with white text, links are the light link blue. COPPER is the money
   mark — the penny in the jar and the Premium tag — and nothing else. The
   free column is the app's soft blue tint, as on the paywall.

   ONE LOUD THING PER SECTION. Blue appears on the primary actions and the
   highlighted price. Everywhere else recedes.

   No external requests: Manrope is subset and self-hosted below, there is no
   CDN, no analytics, no tracking, and every page works with JS disabled.
   ========================================================================== */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Manrope-400Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Manrope-500Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Manrope-600SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Manrope-700Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Manrope-800ExtraBold.woff2') format('woff2');
}

:root {
  /* Quiet Precision — the app's Night palette, src/theme/tokens.ts */
  --ground: #0B1220;
  --surface: #162033;
  --raised: #1E293B;
  --edge: #334155;
  --hairline: #22304A;

  --ink: #F8FAFC;
  --ink-muted: #CBD5E1;
  --ink-faint: #94A3B8;

  /* Blue: the action colour. Buttons use --accent with white text (5.2:1);
     links on navy use --link (9.6:1). */
  --accent: #2563EB;
  --accent-deep: #1D4ED8;
  --link: #93C5FD;
  --accent-tint: #172B4D;
  --accent-edge: #263E62;

  /* Copper: pennies and Premium, never an action. */
  --copper: #D9774B;
  --copper-text: #E0895F;
  --copper-tint: #2D2A36;

  /* Light cards — the app's Day surfaces, for panels that must read bright. */
  --card: #FFFFFF;
  --card-dim: #F5F9FF;
  --card-ink: #0F172A;
  --card-muted: #475569;
  --card-accent: #1D4ED8;
  --card-edge: #DBEAFE;

  --measure: 65ch;
  --page: 74rem;
  --gutter: 1.5rem;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 20px;
  --r-xl: 28px;

  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media (min-width: 48rem) { body { font-size: 1.125rem; } }

h1, h2, h3, h4 { margin: 0; line-height: 1.08; letter-spacing: -0.028em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--ink); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--ink); padding: .75rem 1rem; z-index: 40; }
.skip-link:focus { left: 1rem; top: 1rem; }

.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--gutter); }

/* ----------------------------------------------------------------- header */

.site-header { position: relative; z-index: 20; }
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 4.75rem;
}
.wordmark {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); text-decoration: none;
  /* Two words, one line, always — it wrapped at 375px and squeezed the nav
     into the remaining third of the bar. */
  white-space: nowrap; flex: none;
}
.wordmark:hover { color: var(--ink); }

/* THE REAL LOGO. The jar-and-pennies mark, cropped out of the full lockup by
   reframing its viewBox so the file's own alpha compositing survives.

   It is drawn in fine cream lines, so it needs HEIGHT to stay legible — 2.25rem
   against a 1.0625rem wordmark, which is why the header bar is generous. Any
   smaller and the jar reads as a smudge on navy. */
.wordmark .mark { height: 2.25rem; width: auto; flex: none; }

/* The footer takes the FULL lockup, which already carries the wordmark and the
   "small change adds up" line — so the text beside it is dropped rather than
   printed twice. */
/* SIZED SO THE WORDMARK AND THE ™ ARE ACTUALLY LEGIBLE. At 104px — where this
   started — "TIME PENNY" was mush and both the ™ and the tagline had
   disappeared entirely, which makes showing the lockup pointless: its whole
   value over the bare mark IS the wordmark and the line beneath it. Rendered
   at successive sizes and checked; ~11rem is where all three read. */
.lockup { display: inline-flex; text-decoration: none; }
.lockup img { height: 9rem; width: auto; }
@media (min-width: 40rem) { .lockup img { height: 11rem; } }

/* The penny, a small inline mark (the Premium tag): a copper ring on the
   ground, the app's 18px penny icon in CSS. Never a flat dot. */
.penny {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none;
  border: 1.6px solid var(--copper); background: transparent;
}
.penny.lg { width: 1.6rem; height: 1.6rem; }

/* Four links stopped fitting at 375px when the Health data notice was added
   -- Washington requires it reachable, so the nav wraps rather than clipping.
   Nothing wraps at desktop widths, so this is invisible above ~30rem. */
.header-nav {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  column-gap: 1.5rem; row-gap: .3rem; font-size: .9375rem;
}
.header-nav a { color: var(--ink-muted); text-decoration: none; }
.header-nav a:hover { color: var(--ink); }
@media (max-width: 30rem) { .header-nav { column-gap: .85rem; font-size: .8125rem; } }

/* ---------------------------------------------------------------- section */

section { padding-block: clamp(3.5rem, 9vw, 7rem); position: relative; }

.eyebrow {
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin: 0 0 1.1rem;
}
.section-head { max-width: 34ch; }
.section-head h2 { font-size: clamp(1.9rem, 5vw, 3rem); font-weight: 700; }
.section-lede { max-width: var(--measure); color: var(--ink-muted); margin-top: 1.15rem; }

/* Subtle blue glow behind key sections, so the navy has depth rather than
   reading as flat. Purely decorative and never carries meaning. */
.glow::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(60% 55% at 70% 18%, rgba(37,99,235,.14), transparent 70%);
}
.glow > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------------- hero */

.hero { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(4rem, 10vw, 7rem); }
.hero-grid { display: grid; gap: clamp(3rem, 7vw, 4.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 64rem) { .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 3.5rem; } }

.hero h1 {
  font-size: clamp(2.6rem, 7.4vw, 4.6rem);
  font-weight: 800; letter-spacing: -0.04em; max-width: 15ch;
}
.hero-sub {
  margin-top: 1.6rem; max-width: 44ch;
  font-size: clamp(1.0625rem, 2.2vw, 1.3125rem);
  line-height: 1.55; color: var(--ink-muted);
}

.status {
  display: inline-flex; align-items: center; gap: .6rem;
  margin-bottom: 1.75rem; padding: .5rem 1.05rem;
  border-radius: 999px;
  background: var(--accent-tint); border: 1px solid var(--accent-edge);
  color: var(--link); font-size: .875rem; font-weight: 600;
}
.status .pip { width: .45rem; height: .45rem; border-radius: 50%; background: var(--link); flex: none; }

.cta { margin-top: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.btn {
  display: inline-flex; align-items: center; gap: .7rem;
  padding: 1rem 1.7rem; border-radius: 999px;
  background: var(--accent);
  color: #FFFFFF;                 /* white on #2563EB — 5.2:1, as in the app */
  font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  box-shadow: 0 10px 26px -12px rgba(37,99,235,.6);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover {
  color: #FFFFFF; background: var(--accent-deep); transform: translateY(-2px);
  box-shadow: 0 16px 32px -14px rgba(37,99,235,.75);
}
.cta-note { font-size: .9375rem; color: var(--ink-faint); max-width: 26ch; }

/* -------------------------------------------------------- the iPhone frame */

/*  THE DEVICE IS THE ARTWORK, NOT CSS. These are rendered iPhone mockups with
    the owner's own screenshots composited inside — real bezels, real titanium
    (silver, black and green), real perspective. An earlier version drew the
    frame in CSS, and the honest verdict was that it read as an illustration.

    Each file carries its own transparency and its own angle, so the page adds
    only a drop shadow to ground it. Nothing here imitates app UI: every pixel
    inside the glass is a photograph of the real thing. */

.stage { display: flex; justify-content: center; }
@media (min-width: 64rem) { .stage.right { justify-content: flex-end; } }

.iphone {
  width: min(300px, 74vw); flex: none;
  /* The shadow follows the artwork's alpha rather than a box, which is what
     keeps an angled device from wearing a rectangular shadow. */
  filter: drop-shadow(0 40px 55px rgba(0,0,0,.75)) drop-shadow(0 12px 22px rgba(0,0,0,.5));
}
.iphone img { width: 100%; height: auto; }

@media (min-width: 64rem) { .iphone { width: min(330px, 30vw); } }

.caption { margin-top: 2rem; font-size: .875rem; color: var(--ink-faint); text-align: center; max-width: 32ch; margin-inline: auto; }

/* ---------------------------------------------------------- how it works */

.grid-3 { margin-top: clamp(2.25rem, 5vw, 3.25rem); display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 54rem) { .grid-3 { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  padding: clamp(1.6rem, 3.2vw, 2.25rem);
  box-shadow: 0 24px 48px -30px rgba(0,0,0,.9);
}
.card .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--accent-tint); border: 1px solid var(--accent-edge);
  color: var(--link); font-size: .9375rem; font-weight: 600; margin-bottom: 1.2rem;
}
.card h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: .7rem; }
.card p { color: var(--ink-muted); font-size: 1rem; }

/* --------------------------------------------------------- what's free */

/* The free panel is a LIGHT card on the navy — the one bright object on
   the page, because "the whole planner is free" is the strongest thing this
   product has to say and it should read as an open window, not a footnote. */
.free-panel {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  background: linear-gradient(170deg, var(--card) 0%, var(--card-dim) 100%);
  border: 1px solid var(--card-edge);
  color: var(--card-ink);
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: 0 40px 80px -40px rgba(0,0,0,.9);
}
.list-free { margin: 0; padding: 0; list-style: none; display: grid; gap: 0 3rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .list-free { grid-template-columns: 1fr 1fr; } }
.list-free li {
  display: flex; align-items: baseline; gap: .85rem;
  padding-block: .85rem; border-bottom: 1px solid rgba(15,23,42,.08);
  font-size: 1.0625rem; font-weight: 500;
}
.list-free .tick { color: var(--card-accent); font-weight: 700; flex: none; }
.free-note {
  margin-top: 2rem; display: inline-block;
  padding: .7rem 1.25rem; border-radius: 999px;
  background: var(--card-edge); color: var(--card-accent);
  font-weight: 600; font-size: 1.0625rem;
}

/* ------------------------------------------------------------- premium */

.premium-grid { display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 68rem) { .premium-grid { grid-template-columns: 1.05fr .95fr; } }

.tag-premium {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .4rem 1rem; border-radius: 999px;
  background: var(--copper-tint); border: 1px solid rgba(217,119,75,.35);
  color: var(--copper-text); font-size: .8125rem; font-weight: 600;
  letter-spacing: .04em; margin-bottom: 1.25rem;
}

.features { margin: clamp(2.5rem, 6vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.features li { padding-block: 1.5rem; border-top: 1px solid var(--edge); }
.features li:last-child { border-bottom: 1px solid var(--edge); }
.features h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: .4rem; }
.features p { color: var(--ink-muted); font-size: 1rem; max-width: var(--measure); }

.prices { margin-top: clamp(2.5rem, 6vw, 3.5rem); display: grid; gap: 1.15rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .prices { grid-template-columns: repeat(3, 1fr); } }
.price {
  background: var(--surface); border: 1px solid var(--edge);
  border-radius: var(--r-lg); padding: 1.75rem;
}
.price.pick {
  background: var(--accent-tint);
  border-color: var(--accent);
  box-shadow: 0 24px 50px -28px rgba(37,99,235,.45);
}
.price .plan { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.price.pick .plan { color: var(--link); }
.price .amount { display: block; margin-top: .9rem; font-size: 2rem; font-weight: 700; letter-spacing: -0.035em; }
.price .amount .per { font-size: 1rem; font-weight: 400; color: var(--ink-muted); letter-spacing: -0.01em; }
.price .maths { margin-top: .8rem; font-size: .9375rem; color: var(--ink-muted); }
.price .maths strong { font-weight: 600; color: var(--link); }
.trial { margin-top: 1.75rem; font-size: .9375rem; color: var(--ink-faint); }

.closing {
  margin-top: clamp(2.5rem, 6vw, 3.5rem);
  font-size: clamp(1.3rem, 3.2vw, 1.9rem); font-weight: 600;
  max-width: 24ch; line-height: 1.3; letter-spacing: -0.03em;
}

/* --------------------------------------------------------- privacy line */

.plainly p {
  max-width: 24ch;
  font-size: clamp(1.6rem, 4.6vw, 2.75rem);
  font-weight: 700; line-height: 1.22; letter-spacing: -0.035em;
}
.plainly p + p { margin-top: 1.25rem; color: var(--ink-muted); font-weight: 500; max-width: 30ch; }

/* -------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--edge); padding-block: 3rem 3.5rem; font-size: .9375rem; color: var(--ink-muted); }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { color: var(--link); text-decoration: underline; }
.footer-top { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: baseline; justify-content: space-between; padding-bottom: 1.5rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; padding: 0; margin: 0; list-style: none; }
.legal-line { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; padding-top: 1.5rem; border-top: 1px solid var(--edge); color: var(--ink-faint); font-size: .875rem; }

/* ------------------------------------------------------- document pages */

.doc { padding-block: clamp(2.5rem, 6vw, 4rem) clamp(4rem, 9vw, 6rem); }
.doc-inner { max-width: 46rem; }
.doc h1 { font-size: clamp(2rem, 5.5vw, 3rem); font-weight: 700; }
.doc .updated { margin-top: 1.1rem; color: var(--ink-faint); font-size: .9375rem; }
.doc-body { margin-top: clamp(2.25rem, 5vw, 3rem); }
.doc-body h2 {
  font-size: 1.4rem; font-weight: 600; margin-top: 3.25rem;
  padding-top: 1.9rem; border-top: 1px solid var(--edge); scroll-margin-top: 2rem;
}
.doc-body h3 { font-size: 1.0625rem; font-weight: 600; margin-top: 2rem; }
.doc-body p, .doc-body ul, .doc-body ol { margin-top: 1.15rem; max-width: var(--measure); color: var(--ink-muted); }
.doc-body li { margin-top: .55rem; }
.doc-body strong { color: var(--ink); font-weight: 600; }
.doc-body table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: .9375rem; }
.doc-body th, .doc-body td { text-align: left; vertical-align: top; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--edge); color: var(--ink-muted); }
.doc-body th { color: var(--ink); font-weight: 600; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.table-scroll { overflow-x: auto; }

.toc { margin-top: 2.5rem; background: var(--surface); border: 1px solid var(--edge); border-radius: var(--r-lg); padding: 1.75rem; }
.toc h2 { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin: 0; }
.toc ol { margin: 1.1rem 0 0; padding-left: 1.25rem; color: var(--ink-muted); }
@media (min-width: 42rem) { .toc ol { columns: 2; column-gap: 2.5rem; } }
.toc li { margin-top: .45rem; break-inside: avoid; }
.toc a { color: var(--ink-muted); text-decoration: none; }
.toc a:hover { color: var(--link); text-decoration: underline; }

.notice {
  margin-top: 2rem; padding: 1.15rem 1.35rem; border-radius: var(--r);
  background: var(--accent-tint); border: 1px solid var(--accent-edge);
  color: var(--link); font-size: .9375rem; max-width: var(--measure);
}

.contact-grid { margin-top: clamp(2rem, 5vw, 2.75rem); display: grid; gap: 1.15rem; grid-template-columns: 1fr; max-width: 46rem; }
@media (min-width: 42rem) { .contact-grid { grid-template-columns: 1fr 1fr; } }
.contact-grid .card h2 { font-size: 1.1875rem; font-weight: 600; margin-bottom: .55rem; }
.contact-grid .card p { color: var(--ink-muted); font-size: 1rem; }
.contact-grid .card p + p { margin-top: .55rem; }

.faq { margin-top: clamp(2.5rem, 6vw, 3.5rem); max-width: 46rem; }
.faq h2 { font-size: 1.4rem; font-weight: 600; }
.faq dl { margin: 1.75rem 0 0; }
.faq dt { font-weight: 600; padding-top: 1.5rem; border-top: 1px solid var(--edge); }
.faq dd { margin: .5rem 0 1.5rem; color: var(--ink-muted); max-width: var(--measure); }

/* -------------------------------------------------------------- motion */

/* Scroll reveal is progressive enhancement: the .reveal class is only added
   by JS, so with JS disabled everything is simply visible. Nothing on this
   site depends on script to be readable. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
}