/* ===== OPTIMASON "Limewash" (no-italic build) — warm paper, clay + slate wash ==========
   Register borrowed from Steep (centred serif hero over a soft wash,
   floated data cards) but recoloured: Steep's peach/lilac becomes
   clay/slate — the second wash moved 63 degrees off their lilac, so the
   hero reads cool-warm rather than sunset. */

:root {
  --paper: #FEFDFB;  --paper-2: #F8F5F2;  --card: #F1EEE9;
  --ink: #181E25;    --ink-2: #49535F;    --ink-3: #5D6874;
  --rule: #EAE6E1;   --rule-strong: #CFC6BF;
  --accent: #AE3D29; --accent-wash: #F4DBD7;
  --on-accent-wash: #6A251B; --on-accent: #FFFFFF;

  --wash-1: rgba(214,122,98,.30);   /* clay  */
  --wash-2: rgba(123,160,190,.26);  /* slate */
  --wash-3: rgba(206,186,160,.26);  /* stone */
}
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) {
    --paper: #101519; --paper-2: #161C22; --card: #1D242C;
    --ink: #F3F1EC;   --ink-2: #AEB7C1;   --ink-3: #8C96A1;
    --rule: #242C35;  --rule-strong: #38424D;
    --accent: #E37D63; --accent-wash: #2A1713;
    --on-accent-wash: #F6C9BC; --on-accent: #101519;
    --wash-1: rgba(190,92,68,.20); --wash-2: rgba(84,120,156,.20); --wash-3: rgba(120,104,82,.18);
  }
}

/* Centred hero over the wash. */
.hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding-block: clamp(32px,4.5vw,60px); }
/* Pages that lead with the action rather than the pitch (contact) halve the
   space above the headline. Must be repeated here: this theme overrides the
   base .hero padding, so the base .hero-tight rule would otherwise lose. */
.hero.hero-lead { padding-block: clamp(16px,2.25vw,30px) clamp(26px,3vw,40px); }
/* Pricing opens straight onto the plan cards, so it runs tighter than a
   pitch hero. Matches the base themes' .hero-tight, which this theme's
   .hero padding would otherwise override. */
.hero.hero-tight { padding-block: clamp(24px,2.8vw,36px) clamp(26px,3vw,40px); }
/* The base theme colours these for a dark hero (pale grey + patina). This hero is
   light, so they would drop to 1.69:1. Use page ink and the accent instead. */
.hero .offer-note, .hero .plan-terms { color: var(--ink-2); }
.hero .offer-note strong { color: var(--accent); }
.hero .wrap { display: block; max-width: 1140px; }
.hero h1 { max-width: 20ch; margin-inline: auto; }
.hero .lede { max-width: 56ch; margin-inline: auto; }
.hero .actions { justify-content: center; }

/* Inner pages wrap the hero in two .hero-col columns for the dark themes.
   This hero is centred and single-column, so the wrappers must collapse —
   left as grid children they stack and the lede lands after the CTA, which
   asks people to act before they have read what the page offers. */
/* gap:0 — the base theme's hero grid gap becomes a row-gap once this is a
   single flex column, stacking on top of each item's own margin. */
.hero .wrap:has(.hero-col) {
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.hero .wrap:has(.hero-col) > * { width: 100%; }
.hero .hero-col { display: contents; }
.hero .hero-col h1 { order: 1; }
.hero .hero-col .lede { order: 2; margin-top: 14px; }
.hero .hero-col .actions { order: 3; margin-top: 24px; }
.hero .hero-col .offer-note {
  order: 4; margin: 14px auto 0; text-align: center; max-width: 52ch;
}
/* The base theme reorders these inside its own 920px query; repeat the
   orders here so the centred single column keeps lede before CTA. */
@media (max-width: 920px) {
  .hero .hero-col:first-child h1 { order: 1; }
  .hero .hero-col:last-child { order: 2; }
  .hero .hero-col:first-child .actions { order: 3; margin-top: 22px; }
  .hero .hero-col:first-child .offer-note { order: 4; }
}

.hero::before {
  content: ""; position: absolute; inset: -30% -10% auto -10%; height: 170%;
  z-index: -1; pointer-events: none; filter: blur(30px);
  background:
    radial-gradient(40% 52% at 20% 32%, var(--wash-1) 0%, transparent 64%),
    radial-gradient(36% 48% at 78% 26%, var(--wash-2) 0%, transparent 62%),
    radial-gradient(48% 60% at 52% 88%, var(--wash-3) 0%, transparent 66%);
}
.hero::after {
  content: ""; position: absolute; left:0; right:0; bottom:0; height:140px; z-index:-1;
  background: linear-gradient(to bottom, transparent, var(--paper));
}

/* Floated data cards. */
.scards { position: relative; width: 100%; margin: 46px auto 0; }
.scard {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 15px;
  padding: 14px 16px; text-align: left; font-family: var(--sans);
  box-shadow: 0 1px 2px rgba(20,27,36,.05), 0 16px 34px -16px rgba(20,27,36,.22);
}
.scard .k { font-size:.8rem; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); margin:0 0 6px; }
.scard .v { font-size:1.5rem; font-weight:650; letter-spacing:-.022em; color:var(--ink); margin:0; line-height:1.08; }
.scard .v em { font-style: normal; color: var(--accent); }
.scard .s { font-size:.84rem; color:var(--ink-2); margin:5px 0 0; line-height:1.4; }
@media (min-width: 1040px) {
  /* stretch, not start: the cards are deliberately staggered below, and a
     card whose description wraps to one fewer line would otherwise be
     shorter, making the stagger read as a misalignment rather than a choice. */
  .scards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
  .scard:nth-child(1) { margin-top: 26px; }
  .scard:nth-child(3) { margin-top: 40px; }
}
@media (max-width: 1039px) { .scards { display: grid; gap: 12px; } }