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

   WARM GRAPHITE + COPPER. Owner decision, 16 Aug.

   The ground is the app's own Night palette (#191816 / #232120), not the deep
   green an earlier draft borrowed from a fintech reference. A visitor moving
   from this page into the app at night sees the same colours underneath them,
   which is the whole argument: the site is not dressed as a different product.

   COPPER (#DFA35C) IS THE ACTION COLOUR and it is the app's own money mark —
   the penny in the jar, the dot on a protected deadline. SAGE (#8CBE86) is
   reserved for what is FREE, exactly as the app codes it. That split is not
   decoration: it means someone who learns the colours here already knows them
   when they open the app.

   ONE LOUD THING PER SECTION. Copper appears on the primary action, the
   highlighted price, and money amounts. Everywhere else recedes. This is the
   app's own density rule applied to a web page.

   No external requests: Inter 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: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/Inter-400Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/Inter-500Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/Inter-600SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/Inter-700Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('fonts/Inter-800ExtraBold.woff2') format('woff2');
}

:root {
  /* Warm Graphite — the app's Night palette, src/theme/tokens.ts */
  --ground: #191816;
  --surface: #232120;
  --raised: #2A2725;
  --edge: #34312D;

  --ink: #F1EDE6;
  --ink-muted: #ADA79D;
  --ink-faint: #948F86;

  /* Copper: the action colour AND the app's money mark. */
  --copper: #DFA35C;
  --copper-bright: #EBBE7F;
  --copper-deep: #C68A42;
  --copper-tint: #2E2620;

  /* Sage: what is free. Never used for an action. */
  --sage: #8CBE86;
  --sage-tint: #20281F;

  /* Teal: the app's own accent, used sparingly for quiet links. */
  --teal: #5FAFB0;
  --teal-tint: #28393D;

  /* Light cards — the app's Day surfaces, for panels that must read bright. */
  --card: #FFFFFF;
  --card-dim: #EFEDE7;
  --card-ink: #1A1917;
  --card-muted: #55524C;

  --measure: 65ch;
  --page: 74rem;
  --gutter: 1.5rem;
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --font: 'Inter', -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(--copper); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--copper-bright); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--copper);
  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 graphite. */
.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 drawn penny, still used as a small inline mark (the Premium tag).
   Rim plus face, never a flat dot — the app's own money mark. */
.penny {
  width: 1.15rem; height: 1.15rem; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 34% 30%, var(--copper-bright), var(--copper) 58%, var(--copper-deep));
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.28), 0 1px 3px rgba(0,0,0,.5);
}
.penny.lg { width: 1.6rem; height: 1.6rem; }

.header-nav { display: flex; gap: 1.5rem; 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 { gap: 1rem; font-size: .875rem; } }

/* ---------------------------------------------------------------- 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 warm glow behind key sections, so the graphite has depth rather than
   reading as flat black. 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(223,163,92,.10), 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(--sage-tint); border: 1px solid rgba(140,190,134,.3);
  color: var(--sage); font-size: .875rem; font-weight: 600;
}
.status .pip { width: .45rem; height: .45rem; border-radius: 50%; background: var(--sage); 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: linear-gradient(180deg, var(--copper-bright) 0%, var(--copper) 55%, var(--copper-deep) 100%);
  color: #2A1B08;                 /* dark ink on copper — 8.4:1, never white */
  font-weight: 600; font-size: 1.0625rem; text-decoration: none;
  box-shadow: 0 10px 26px -10px rgba(223,163,92,.55), inset 0 1px 0 rgba(255,255,255,.4);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover {
  color: #2A1B08; transform: translateY(-2px);
  box-shadow: 0 16px 32px -12px rgba(223,163,92,.7), inset 0 1px 0 rgba(255,255,255,.5);
}
.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: linear-gradient(165deg, var(--raised), var(--surface));
  border: 1px solid var(--edge);
  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(--copper-tint); border: 1px solid rgba(223,163,92,.35);
  color: var(--copper); 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 graphite — 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%);
  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(26,25,23,.1);
  font-size: 1.0625rem; font-weight: 500;
}
.list-free .tick { color: #35693C; font-weight: 700; flex: none; }
.free-note {
  margin-top: 2rem; display: inline-block;
  padding: .7rem 1.25rem; border-radius: 999px;
  background: #D0DFCC; color: #24512A;
  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(223,163,92,.35);
  color: var(--copper); 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: linear-gradient(170deg, #3A2E1E, var(--copper-tint));
  border-color: rgba(223,163,92,.5);
  box-shadow: 0 24px 50px -28px rgba(223,163,92,.4);
}
.price .plan { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.price.pick .plan { color: var(--copper); }
.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(--copper); }
.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(--copper); 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(--copper); text-decoration: underline; }

.notice {
  margin-top: 2rem; padding: 1.15rem 1.35rem; border-radius: var(--r);
  background: var(--copper-tint); border: 1px solid rgba(223,163,92,.3);
  color: var(--copper); 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; }
}