/* ============================================================
   tregua — dumb phone launcher (shipped as Dumbphone until 2.0.0)
   Identity: monospace IS the product. True-black OLED canvas,
   warm orange accent, IBM Plex Mono for headlines AND labels,
   IBM Plex Sans for prose. Calm, quiet, intentional.
   ============================================================ */

:root {
  /* Brand tokens */
  --brand-bg-dark: #000000;        /* authentic OLED black */
  --brand-bg-light: #F4F1EC;       /* warm bone — light sections */
  --brand-accent: #FF5B1F;         /* signal orange — CTAs, links */
  --brand-accent-2: #34C759;       /* iOS green — secondary accent */
  --brand-accent-ink: #1A0A00;     /* near-black ink on the bright orange — 6.7:1 AA (white is only 3.1:1) */

  /* Elevated/card surfaces — color-mix off pure black is too flat,
     so pin them to the authentic #0A0A0A / hairline ramp. */
  --bg-elevated: #0A0A0A;
  --bg-card: #0A0A0A;

  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.13);

  --theme-color: #000000;

  /* ---------- Type: the one landing that leaves the shared pair ----------
     shared/base.css ships Fraunces (display, italic) + Geist + Geist Mono, and
     the other eight documents use it. Overriding the three --font-* tokens here
     is the same move hazlo/app.css already makes for --font-body (DM Sans):
     base.css is not forked. The override reaches three pages, not one:
     privacy/index.html and support/index.html load this file whole, so an edit
     here restyles tregua's policy and support page as well as the landing. The
     scale follows the face rather than staying put — --fs-hero comes down
     below, and the three type-carrying rules after it (.display, .letter__body,
     the brand wordmarks) each say why beside them — while the layout, the
     spacing, the components and the palette machinery all stay shared.

     Why this product and no other: tregua's own logotype is a monospaced
     `tregua_` with a terminal cursor (assets/icon.png), and what the app does
     is turn a wall of icons into a monospaced list of words. Fraunces's
     high-contrast italic is an editorial performance — the right voice for
     Hazlo, Tobydoro and Countie, and the opposite of what this product sells.
     A mono makes the headline read in the launcher's own voice instead of
     describing it.

     IBM Plex Mono specifically: of the monos on Google Fonts it is the closest
     match to that logotype — curved-foot `t`, single-storey open-tail `g`,
     spurred `u`, double-storey `a` with a tail. Geist Mono, JetBrains Mono and
     Roboto Mono were set against the icon side by side and are further off. It
     also brings IBM Plex Sans, so display, prose and labels become one
     superfamily drawn together: two families loaded here instead of three, and
     typography as monochromatic as the palette. */
  --font-display: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  --font-body: "IBM Plex Sans", "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;

  /* A mono sets far wider than Fraunces at the same size and carries more visual
     mass, so the hero is dialled back from base.css's
     clamp(2.75rem, 7vw + 0.5rem, 5rem) — otherwise "Less phone. / More life."
     overruns the 1120px container on a desktop and a 320px phone alike. */
  --fs-hero: clamp(2.15rem, 5.2vw + 0.6rem, 4.25rem);
}

/* base.css hardcodes `font-style: italic` on .display — that is Fraunces's idea,
   and a slanted mono at hero size is a different, worse one. Roman, with the
   tracking a mono wants once it gets big. */
.display {
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.035em;
}

/* The wordmark is the icon's own logotype (a monospaced `tregua_`), so the text
   beside it is set in the same mono rather than in the body sans. */
.nav__brand, .footer__brand { font-family: var(--font-mono); letter-spacing: -0.02em; }

/* base.css sets .letter__body in --font-display italic too. With Fraunces that
   is a warm handwritten aside; with a mono it is six centred lines of slanted
   fixed-pitch text, which is the least readable thing on the page and the wrong
   voice for the one paragraph where a person, not the product, is talking.
   The division this page ends up with: MONO is the launcher speaking —
   headlines, labels, prices, the wordmark. SANS is Mike speaking. */
.letter__body {
  font-family: var(--font-body);
  font-style: normal;
  font-size: clamp(1.15rem, 1.1vw + 0.95rem, 1.45rem);
  line-height: 1.55;
}

/* The orange halo reads strong on pure black — soften it a touch. */
.halo::before { opacity: 0.5; }

/* ============================================================
   web-fx · ember liquid-chrome behind the hero.
   tregua stays OLED-calm: the flow is signal-orange on true black,
   kept very dark + low-opacity + masked, so it reads as a faint ember,
   not a metallic surface. The launcher screenshots remain the focus.
   ============================================================ */
.hero .fx-liquid {
  background-image: url(assets/liquid-ember.webp);
  opacity: 0.36;
  -webkit-mask-image: radial-gradient(125% 100% at 50% 18%, #000 26%, transparent 74%);
          mask-image: radial-gradient(125% 100% at 50% 18%, #000 26%, transparent 74%);
}
/* with the ember present, dial the orange halo back so the hero isn't busy */
.hero .halo::before { opacity: 0.3; }

/* ============================================================
   Pricing — "What is free. What costs money."
   The system has .split: two bare bordered columns with em-dash bullets. It
   cannot carry a price, a hierarchy or a period switcher, so this is local.
   The STRUCTURE follows a modern pricing page; the surface does not. No
   gradient, no glow, no second hue — hierarchy comes from the accent border
   .split__col--pro already used, plus weight and scale.

   The switcher is three radios in a fieldset and :has() on .pricing: no JS, no
   state to keep in sync, and it keeps working with scripting off. The repo
   already requires a browser with color-mix(), which is the same vintage.
   ============================================================ */
.pricing { display: flex; flex-direction: column; align-items: center; }

/* ---- period switcher ---- */
.pricing__switch {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-pill);
  padding: 3px;
  margin: 0 0 clamp(1.75rem, 4vh, 2.5rem);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px; min-width: 0;
}
/* The group needs a name for a screen reader, not a line of layout — the same
   off-canvas idiom base.css uses for .skip-link. */
.pricing__legend { position: absolute; left: -999px; }
.pricing__opt {
  position: relative;
  padding: 0.5rem 1.15rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  letter-spacing: 0.02em;
  color: var(--text-2);
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: color 0.2s, background 0.2s;
}
/* 1px and transparent rather than display:none — the radio has to stay
   focusable and keep its native arrow-key behaviour. */
.pricing__opt input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; opacity: 0; margin: 0; }
.pricing__opt:hover { color: var(--text-1); }
.pricing__opt:has(input:checked) { background: var(--brand-accent); color: var(--brand-accent-ink); }
/* Ringed in --text-1, not the accent: it has to read on the black pill AND on
   the orange one. */
.pricing__opt:has(input:focus-visible) { outline: 2px solid var(--text-1); outline-offset: 3px; }

/* ---- the two cards ---- */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); width: 100%; align-items: start; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

.plan {
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--bg-card);
}
.plan--pro {
  border-color: color-mix(in srgb, var(--brand-accent) 40%, transparent);
  background: color-mix(in srgb, var(--brand-accent) 6%, transparent);
}
.plan__name {
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-2);
}
.plan--pro .plan__name { color: var(--brand-accent); }

.plan__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.9rem; }
.plan__amount {
  font-family: var(--font-display);
  font-size: clamp(2.3rem, 3.4vw + 0.9rem, 3.1rem);
  font-weight: 500;
  /* A mono gives '.' a full advance width, so a price reads as 22 . 99 at
     default tracking. Tightened until the decimal point binds to its digits. */
  letter-spacing: -0.06em;
  line-height: 1;
  color: var(--text-1);
  font-variant-numeric: tabular-nums;
}
.plan__per { font-size: var(--fs-sm); color: var(--text-2); }
.plan__save {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-accent);
  border: 1px solid color-mix(in srgb, var(--brand-accent) 45%, transparent);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem;
  align-self: center;
}
/* The three Pro metas are 1-2 lines depending on the period. Reserving two
   line-boxes keeps the feature list from jumping as the switcher is used. */
.plan__meta {
  margin-top: 0.7rem;
  font-size: var(--fs-cap);
  line-height: 1.5;
  color: var(--text-2);
  min-height: 3em;
  min-height: 2lh;
}
.plan__lead {
  margin-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.plan__list { margin-top: 1.1rem; }
.plan__list li {
  position: relative;
  padding: 0.6rem 0 0.6rem 1.7rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.plan__list li:first-child { border-top: none; }
/* The tick is two borders on a rotated empty box: no icon file, no eleven
   copies of an inline SVG, and it scales with the list's own font-size. */
.plan__list li::before {
  content: "";
  position: absolute; left: 0.3rem; top: 1.15em;
  width: 0.36rem; height: 0.68rem;
  border: solid var(--text-2);
  border-width: 0 1.6px 1.6px 0;
  transform: translateY(-72%) rotate(45deg);
}
.plan--pro .plan__list li::before { border-color: var(--brand-accent); }

.pricing__fine {
  margin-top: 1.6rem;
  font-family: var(--font-mono);
  font-size: var(--fs-cap);
  letter-spacing: 0.02em;
  color: var(--text-2);
  text-align: center;
}

/* ---- which price the switcher shows ----
   Only the three modified tiers switch; the Free card's bare .plan__tier is
   never hidden.

   The unconditional rule hides two of the three, NOT all of them. Hiding all
   three outside the @supports block would leave a browser that drops the
   :has() rules showing the Pro card with no price at all — worse than the
   plain HTML. So the yearly tier, which is also the checked default, is the
   one that survives on its own, and the switcher is withdrawn rather than left
   as a control that does nothing. */
.plan__tier--month, .plan__tier--life { display: none; }
@supports not selector(:has(*)) {
  .pricing__switch { display: none; }
}
@supports selector(:has(*)) {
  .plan__tier--year { display: none; }
  .pricing:has(input[value="month"]:checked) .plan__tier--month,
  .pricing:has(input[value="year"]:checked)  .plan__tier--year,
  .pricing:has(input[value="life"]:checked)  .plan__tier--life { display: block; }
}