/* ===========================================================================
   Frowning Gorilla — shared stylesheet

   To adopt: <link rel="stylesheet" href="styles.css"> AND class="fg" on <body>.
   A page may keep a small local <style> block only for rules genuinely unique
   to it.

   WHY THE CLASS: everything below the @font-face block is scoped to .fg, so
   this file cannot reach a page that still carries its own inline CSS. Those
   pages link it for the self-hosted fonts alone and must NOT add the class.

   That scope is load-bearing, not tidiness. Unscoped, `strong { font-weight:
   600 }` reached the frozen Eve pages — which define no strong rule of their
   own — dropping 12 elements from 700 to 600 and reflowing support.html 148px
   taller. The scope is what keeps the freeze intact as this file grows.

   Fonts are self-hosted (see fonts/README.md). Never add a fonts.googleapis.com
   link — no external dependencies, per CLAUDE.md.

   Per-app accent: add a theme class alongside .fg, or on any element within it.
     <body class="fg theme-shape-n-ship">   orange
     <body class="fg theme-nearing">        teal
     <body class="fg">                      company indigo — non-app pages

   Component rules (contact form, FAQ disclosure) are deliberately not here yet;
   they get added by the phase that first needs them, so each commit stays
   reviewable.
   =========================================================================== */

/* ── Fonts ─────────────────────────────────────────────────────────────────
   Unscoped on purpose: every page needs the faces, including the pages that
   opt out of the design system below.

   DM Sans is a variable font: one file covers the whole 300–600 range, so the
   weight range is declared rather than a face per weight. DM Serif Display is
   static 400 — there is no bold serif; don't ask for one, it would faux-bold.

   No italic face is shipped. <em> renders as a synthesised oblique, which is
   what the site has always done. Adding a real italic would change how existing
   pages render, including the frozen Eve Countdown pages.                    */

@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
  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: 'DM Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('fonts/dm-sans-latin-ext.woff2') format('woff2');
  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: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-latin.woff2') format('woff2');
  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: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-latin-ext.woff2') format('woff2');
  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;
}


/* Archivo — display face for landing-page headlines. Variable, one file covers
   400–900, so the range is declared rather than a face per weight. Body copy
   stays DM Sans; Archivo is for headlines only.

   JetBrains Mono — labels, eyebrows and figures. Not for prose.

   Both are OFL, self-hosted, latin subset only (the site is en-GB). Same rule as
   the DM faces: never add a fonts.googleapis.com link.

   FILES REQUIRED IN fonts/ — see fonts/README.md:
     fonts/archivo-latin.woff2          (variable, wght 400–900)
     fonts/jetbrains-mono-latin.woff2   (variable, wght 400–700)                */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('fonts/archivo-latin.woff2') format('woff2');
  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: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  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;
}

/* ===========================================================================
   Everything below is scoped to .fg. None of it applies without the class.
   =========================================================================== */

/* ── Palette ───────────────────────────────────────────────────────────────
   Every accent comes as a pair, and the distinction is load-bearing:

     --accent       brand colour. Fills, bullets, icon tiles. NOT text.
     --accent-deep  anything a person has to read: links, and any band with
                    white text on it.

   The brand accents fail WCAG AA as text on --bg (teal #19BAB0 is 2.31:1,
   orange #E0641C is 3.35:1). The deep variants clear it (both 5.36:1). Using
   --accent for text is a bug, not a style choice.

   The theme classes below carry custom properties only. They are left unscoped
   because nothing outside .fg consumes these variables, so they cannot have a
   visual effect on a page that has not opted in.                             */

.fg {
  /* Company accent — non-app pages. Passes as text on --bg (7.99:1) and with
     white on it (8.33:1), so it needs no separate deep variant. */
  --accent:       #3E4C7A;
  --accent-deep:  #3E4C7A;
  --accent-light: #eef0f7;
  --accent-mid:   #c7cde3;

  --ink:          #1a1f2e;
  --ink-mid:      #4a5168;
  --ink-soft:     #8a90a2;
  --rule:         #e8eaf0;
  --bg:           #fafafa;
  --white:        #ffffff;
}

.theme-nearing {
  --accent:       #19BAB0;
  --accent-deep:  #0E7470;  /* 5.36:1 on --bg; white on it 5.60:1 */
  --accent-light: #e8f9f8;
  --accent-mid:   #b2e8e6;
}

.theme-shape-n-ship {
  --accent:       #E0641C;
  --accent-deep:  #B0470F;  /* 5.36:1 on --bg; white on it 5.59:1 */
  --accent-light: #fdf1e9;
  --accent-mid:   #f5cdaf;
}

/* ── Base ── */
.fg,
.fg *,
.fg *::before,
.fg *::after { box-sizing: border-box; margin: 0; padding: 0; }

body.fg {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 16px;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.fg header {
  background: var(--white);
  border-bottom: 1px solid var(--rule);
  padding: 0 2rem;
}

.fg .header-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 2rem 0 1.75rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.fg .app-icon {
  width: 48px;
  height: 48px;
  background: var(--accent);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fg .app-icon svg { width: 28px; height: 28px; }

/* On most pages the app name in the header is the page's h1. On a landing page
   the hero headline is the real h1, so the name uses .brand instead — same
   treatment, no second h1. */
.fg .header-text h1,
.fg .header-text .brand {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.fg .header-text p {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin-top: 0.2rem;
  font-weight: 400;
}

/* ── Hero band ──────────────────────────────────────────────────────────────
   Uses --accent-deep, not --accent. White on the brand teal is 2.42:1 and
   fails outright; on --accent-deep it is 5.60:1. The subtitle is 0.92 white
   because at the old 0.82 it lands at 4.33:1 — still short of AA.           */
.fg .hero {
  background: var(--accent-deep);
  padding: 3rem 2rem;
  text-align: center;
}

.fg .hero h1,
.fg .hero h2 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 2.25rem;
  font-weight: 400;
  color: var(--white);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.fg .hero p {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.0625rem;
  margin-top: 0.75rem;
  font-weight: 300;
}

/* Pre-launch status line, directly under a badge slot. Inherits the hero
   paragraph colour — don't fade it further. Deleted in the same commit that
   adds the badge; see CLAUDE.md.

   Must out-specify `.fg .hero p` (0,2,1), so this is `.fg .hero p.hero-status`
   (0,3,1) rather than the obvious `.fg .hero-status` (0,2,0) — which loses, and
   silently does nothing at all. */
.fg .hero p.hero-status {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-top: 1.5rem;
}

/* ── Callout card ── */
.fg .callout {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 0 2rem;
}

.fg .callout-card {
  background: var(--accent-light);
  border: 1.5px solid var(--accent-mid);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.fg .callout-card .icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.fg .callout-card p {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}

.fg .callout-card p span {
  font-weight: 300;
  color: var(--ink-mid);
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
}

/* ── Main content ── */
.fg main {
  max-width: 720px;
  margin: 0 auto;
  padding: 2.5rem 2rem 5rem;
}

.fg section { margin-bottom: 2.75rem; }
.fg section:last-child { margin-bottom: 0; }

/* Lead-in paragraphs above the first rule on the legal pages. */
.fg .intro p { margin-bottom: 0.85rem; }

/* Section heading. It's h3 on pages whose h1 is the app name in the header and
   whose hero is an h2. On a landing page the hero takes the h1, so its sections
   are h2 — same treatment, no skipped level. */
.fg main h2,
.fg h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.3125rem;
  font-weight: 400;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--rule);
}

.fg h4 {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 1.25rem 0 0.5rem;
}

.fg p {
  font-size: 0.9375rem;
  color: var(--ink-mid);
  margin-bottom: 0.75rem;
  font-weight: 400;
}

.fg p:last-child { margin-bottom: 0; }

.fg strong { color: var(--ink); font-weight: 600; }

.fg ul {
  list-style: none;
  margin: 0.5rem 0 0.75rem;
  padding: 0;
}

.fg ul li {
  font-size: 0.9375rem;
  color: var(--ink-mid);
  padding: 0.35rem 0 0.35rem 1.5rem;
  position: relative;
}

.fg ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* ── Links ──────────────────────────────────────────────────────────────────
   Underlined at rest. This is an accessibility requirement, not a style
   preference — DO NOT remove them as a design cleanup.

   WCAG 1.4.1: a link identified by colour alone must contrast at least 3:1 with
   the text around it. Ours don't come close — measured against body copy, the
   company indigo is 1.06:1 and the teal and orange are 1.41:1. Strip the colour
   and the link disappears into the sentence. (All three still clear 4.5:1
   against the background; that's a different question.)

   Footer and nav link lists are exempt: a link that is the whole line is
   identifiable by position, so the criterion doesn't apply.                   */
.fg a {
  color: var(--accent-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  font-weight: 500;
}

/* Already underlined, so hover thickens rather than adds. */
.fg a:hover { text-decoration-thickness: 2px; }

.fg footer a,
.fg nav a { text-decoration: none; }

.fg footer a:hover,
.fg nav a:hover { text-decoration: underline; }

/* Keyboard focus must stay visible — don't remove without a replacement. */
.fg a:focus-visible,
.fg summary:focus-visible,
.fg button:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── FAQ disclosure ─────────────────────────────────────────────────────────
   Ported from nearing-support.html, which still carries its own inline copy
   because it hasn't migrated. The marker uses --accent (decorative, not text),
   so the brand colour is fine here.                                          */
.fg details {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--white);
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.fg details summary {
  cursor: pointer;
  padding: 1rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 2.5rem;
}

.fg details summary::-webkit-details-marker { display: none; }

.fg details summary::after {
  content: '+';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 400;
}

.fg details[open] summary::after { content: '–'; }

.fg details .answer { padding: 0 1.25rem 1.1rem; }

.fg details img {
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid var(--rule);
  margin: 0.5rem 0;
  display: block;
}

.fg details .caption {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-style: italic;
  margin-bottom: 0.75rem;
}

/* ── Contact card ── */
.fg .contact-card {
  background: var(--accent-light);
  border: 1.5px solid var(--accent-mid);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
}

.fg .contact-card p {
  font-size: 0.9375rem;
  color: var(--ink);
}

.fg .rule { border: none; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* ── Product screenshots ─────────────────────────────────────────────────────
   macOS window captures, saved as transparent PNGs with their own rounded
   corners and drop shadow baked in. Do NOT add a border, border-radius or
   box-shadow — the window already has them, and framing again double-frames it. */
.fg .shot { display: block; width: 100%; height: auto; margin-top: 1.25rem; }

/* A screenshot standing on its own (e.g. the landing hero), centred in the
   content column with the same width as the callout/body. The wrapper handles
   the spacing, so the image itself needs no top margin here. */
.fg .shot-figure {
  max-width: 720px;
  margin: 2.5rem auto 0;
  padding: 0 2rem;
}

.fg .shot-figure .shot { margin-top: 0; }

/* ── Footer ── */
.fg footer {
  background: var(--white);
  border-top: 1px solid var(--rule);
  padding: 1.75rem 2rem;
  text-align: center;
}

.fg footer p {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  margin: 0;
}

.fg footer a { font-size: 0.8125rem; }

/* ── Responsive ── */
@media (max-width: 600px) {
  .fg .hero h1,
  .fg .hero h2 { font-size: 1.75rem; }
  .fg .callout-card { flex-direction: column; gap: 0.5rem; }
}


/* ===========================================================================
   SURFACE TOKENS + AUTOMATIC DARK THEME
   ---------------------------------------------------------------------------
   Added for the Shape n Ship landing page. Two parts:

   1. Surface tokens (--page, --panel, --hairline …). The original palette names
      what things ARE in the light theme (--white, --bg, --ink), which stops
      making sense once there are two themes — --white cannot go dark. Rather
      than rename them and touch nine pages, the new names sit alongside. Use
      the surface tokens in new work; the old names still resolve everywhere.
      A rename is a separate commit, and not an urgent one.

   2. An opt-in dark theme, driven by the visitor's own system setting via
      prefers-color-scheme. It is gated on .auto-theme, NOT on .fg, so it
      reaches only pages that have been reviewed in both themes. Adding the
      class is how a page opts in — one word per page, page by page.

      Gating matters: applied to .fg it would immediately re-theme the support,
      privacy and terms pages, none of which have been checked in dark. And the
      frozen Eve pages carry no .fg class at all, so they cannot be reached by
      this block under any circumstances.

   Opted in so far: shape-n-ship.html.

   WHY THE APP THEMES DON'T NEED A DARK VARIANT: both apps support light and
   dark, so the site following the visitor's setting is the honest signal. The
   brand accents do the same job in both themes — see the contrast notes below.
   =========================================================================== */

.fg {
  /* Light theme — warm paper, not the cold #fafafa. The app art is dark, and
     warm neutrals let a dark screenshot read as a deliberate graphic block. */
  --page:         #F6F1E7;
  --page-alt:     #FBF8F2;
  --panel:        #FFFFFF;
  --hairline:     #E0D8C8;

  --text:         #1F1913;  /* 14.9:1 on --page */
  --text-mid:     #574F47;  /*  7.1:1 on --page */
  --text-soft:    #6B6155;  /*  5.5:1 on --page — the floor. Nothing lighter
                               carries prose. */

}

@media (prefers-color-scheme: dark) {
  .fg.auto-theme {
    /* Warm near-black, matching the App Store screenshots. Not pure #000 —
       the app's own chrome is warm, and true black makes the screenshots'
       transparent corners visible as a seam. */
    --page:         #100D0B;
    --page-alt:     #17130F;
    --panel:        #1A1613;
    --hairline:     rgba(255, 255, 255, 0.10);

    --text:         #FFFFFF;  /* 19.5:1 on --page */
    --text-mid:     #A9A199;  /*  7.6:1 */
    --text-soft:    #8D857C;  /*  5.2:1 — the floor, same role as in light. */


    /* Company indigo, lifted for legibility on a dark page. Per-app overrides
       follow the surface block — see the note there about why the accent pair
       inverts. */
    --accent-deep:  #A9B4DC;  /* 10.1:1 on --page */
    --accent-light: #171A24;
    --accent-mid:   rgba(62, 76, 122, 0.50);

    /* Old names kept resolving so existing components survive the theme flip.
       --white is a raised surface here, which is exactly the misnomer note
       above. */
    --bg:           #100D0B;
    --white:        #1A1613;
    --ink:          #FFFFFF;
    --ink-mid:      #A9A199;
    --ink-soft:     #8D857C;
    --rule:         rgba(255, 255, 255, 0.10);
  }

  /* The accent pair inverts its logic in dark, and this is the interesting part:
     both brand accents PASS as text on the dark page — orange #E0641C at 5.5:1
     and teal #19BAB0 at 7.9:1 — which is the thing neither can do on the light
     background (3.35:1 and 2.31:1). Their deep variants would fail instead
     (2.4:1 and 2.2:1), so --accent-deep is remapped UP rather than down.

     For Nearing that means --accent and --accent-deep converge on the same
     value in dark: the brand teal is both the fill and the readable text. The
     rule from the light theme is unchanged — --accent for fills, --accent-deep
     for anything a person reads. Only the values move. */
  .fg.auto-theme.theme-shape-n-ship {
    --accent-deep:  #F0A574;  /* 9.5:1 on --page */
    --accent-light: #241A13;  /* wash behind panels, not a text colour */
    --accent-mid:   rgba(224, 100, 28, 0.42);
  }

  .fg.auto-theme.theme-nearing {
    --accent-deep:  #19BAB0;  /* 7.9:1 on --page */
    --accent-light: #0B1F1E;
    --accent-mid:   rgba(25, 186, 176, 0.42);
    --accent-wash:  rgba(25, 186, 176, 0.11);
    --accent-edge:  rgba(25, 186, 176, 0.46);
  }
}

/* ── Site navigation ────────────────────────────────────────────────────────
   Shared across app pages so none of them is a dead end. Currently used by
   shape-n-ship.html; nearing.html and the support pages adopt it as each is
   reworked.

   The company mark is rendered as a mask so it takes the current text colour —
   the SVG's navy gradient is invisible on a dark page, and at 26px the gradient
   reads as flat anyway. index.html keeps the full illustration at 56px.

   Nav links are exempt from the underline-at-rest rule: a link that is the
   whole line is identifiable by position. See CLAUDE.md.                      */
.fg .site-nav {
  background: var(--page);
  border-bottom: 1px solid var(--hairline);
  padding: 0 2rem;
}

.fg .site-nav-inner {
  max-width: 1080px;
  margin: 0 auto;
  height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.fg .site-nav-home {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  flex-shrink: 0;
}

.fg .site-nav-home .mark {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  background: var(--text);
  -webkit-mask: url('frowning-gorilla-logo.svg') center / contain no-repeat;
  mask: url('frowning-gorilla-logo.svg') center / contain no-repeat;
}

.fg .site-nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.875rem;
  margin: 0;
  padding: 0;
}

.fg .site-nav ul li { padding: 0; }
.fg .site-nav ul li::before { content: none; }

.fg .site-nav ul a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-soft);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.fg .site-nav ul a:hover { color: var(--text); text-decoration: none; }

/* Current page. aria-current does the work, so the styling has a real hook
   rather than a class the markup has to remember to keep in sync. */
.fg .site-nav ul a[aria-current='page'] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

@media (max-width: 720px) {
  .fg .site-nav { padding: 0 1.25rem; }
  .fg .site-nav-inner { height: auto; padding: 0.9rem 0; flex-wrap: wrap; gap: 0.75rem 1.25rem; }
  .fg .site-nav ul { gap: 1.25rem; }
}

/* ── Accent derivatives, per app ─────────────────────────────────────────────
   --accent-wash and --accent-edge are tints of the app's accent, so they cannot
   live in a single shared declaration. They were introduced with orange values
   because only one page used them; a second app makes that a bug. Declared here
   at (0,2,0) rather than edited into the original theme blocks above, so the
   diff stays additive.

   Company indigo is the default for non-app pages.                            */
.fg {
  --accent-wash: rgba(62, 76, 122, 0.07);
  --accent-edge: rgba(62, 76, 122, 0.30);
}

.fg.theme-shape-n-ship {
  --accent-wash: rgba(224, 100, 28, 0.07);
  --accent-edge: rgba(224, 100, 28, 0.30);
}

.fg.theme-nearing {
  --accent-wash: rgba(25, 186, 176, 0.09);
  --accent-edge: rgba(25, 186, 176, 0.34);
}


/* ===========================================================================
   LANDING PAGES
   ---------------------------------------------------------------------------
   Shared by shape-n-ship.html and nearing.html. This block started as a local
   <style> in shape-n-ship.html with a note to promote it here rather than copy
   it when a second page adopted the design. Nearing adopted it; this is that
   promotion. Do not copy these rules into a page again.

   Two things to know before editing:

   1. styles.css styles the bare tags — .fg header, .fg main, .fg section,
      .fg footer — at (0,1,1). A landing page reuses all four, so a
      single-class .lp-* rule (0,1,0) silently LOSES to them. Every selector
      here is ".fg .lp-…" (0,2,0), and the inherited tag defaults are zeroed in
      the reset block at the top. Both are load-bearing and neither is visible
      until measured: .fg main {max-width:720px} once capped the whole layout
      at reading width, which is the single thing this design exists to avoid.

   2. The shared .hero and .callout CLASSES are deliberately unused. A landing
      hero is a full-bleed stage, not a solid accent band, and overriding a
      shared component on one page would make the shared version meaningless.

   Screenshots come in two kinds and are framed differently — see .shot (self-
   framed transparent captures, never framed again) and .lp-figure (opaque
   photographs, which need the frame the capture doesn't have).
   =========================================================================== */
.fg main.lp-main { max-width: none; margin: 0; padding: 0; }
.fg .lp-section,
.fg .lp-band { margin-bottom: 0; }
.fg header.lp-hero { border-bottom: none; }
.fg footer.lp-footer { padding: 2.25rem 0; }


/* Wider than the 720px reading column. The whole argument for this design is
   that a 1500px screenshot should not be shown at thumbnail size. */
.fg .lp-wrap { max-width: 1080px; margin: 0 auto; padding: 0 2rem; }

body.fg { background: var(--page); color: var(--text); }

/* ── Hero ── */
.fg .lp-hero { background: var(--page); padding: 5.5rem 0 3.5rem; }

.fg .lp-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.71875rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.fg .lp-hero h1 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(2.625rem, 6.2vw, 4.625rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
  color: var(--text);
  max-width: 20ch;
  margin: 1.4rem 0 0;
  text-wrap: balance;
}

.fg .lp-lede {
  font-size: 1.1875rem;
  line-height: 1.55;
  font-weight: 300;
  color: var(--text-mid);
  max-width: 42rem;
  margin-top: 1.35rem;
  text-wrap: pretty;
}

/* Pre-launch status. Deleted in the same commit that adds the badge — the
   two must never both appear. See CLAUDE.md. */
.fg .lp-status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.9rem;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--accent-edge);
  border-radius: 999px;
  background: var(--accent-wash);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

.fg .lp-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }

/* ── Lead screenshot ────────────────────────────────────────────────────
   Full-bleed and cropped. The capture is a transparent PNG with its own
   window chrome and shadow, so it needs no frame — it is wider than the
   viewport on purpose and the bottom fades into the page. */
.fg .lp-stage { position: relative; overflow: hidden; margin-top: 1rem; }

.fg .lp-stage img {
  display: block;
  width: 116%;
  max-width: none;
  margin-left: -8%;
  height: auto;
}

/* Dark only. The fade works by painting the page colour over the bottom of
   the capture, which is invisible when the page and the screenshot share a
   luminance range — true in dark (#100D0B over near-black UI) and false in
   light, where it would lay #F6F1E7 over 127px of live window content and
   read as a broken image. In light the capture already ends on its own
   baked drop shadow, so it needs no fade at all. */
@media (prefers-color-scheme: dark) {
  .fg.auto-theme .lp-stage::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 26%;
    background: linear-gradient(180deg, transparent, var(--page) 88%);
    pointer-events: none;
  }
}

/* ── Sourced claim ── */
.fg .lp-claim {
  margin-top: 1rem;
  padding: 1.6rem 1.75rem;
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-left: 3px solid var(--accent);
  border-radius: 12px;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.fg .lp-claim .flag { color: var(--accent); font-size: 1.35rem; line-height: 1.2; flex-shrink: 0; }
.fg .lp-claim p { font-size: 1.0625rem; line-height: 1.55; color: var(--text); font-weight: 500; }
.fg .lp-claim p span {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--text-mid);
}

/* ── Sections ── */
.fg .lp-section { padding: 5rem 0; }
.fg .lp-section.alt { background: var(--page-alt); }

.fg .lp-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--hairline);
}

.fg .lp-head h2 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.875rem, 3.4vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.05;
  color: var(--text);
  /* the shared sheet gives main h2 a rule and serif face; neither wanted here */
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

.fg .lp-head .note {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-soft);
}

/* ── Steps ── */
.fg .lp-step { padding-top: 3.25rem; }

.fg .lp-step-text {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 2.5rem;
  align-items: start;
}

.fg .lp-step-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--accent-deep);
  display: block;
  margin-bottom: 0.5rem;
}

.fg .lp-step h3 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
}

.fg .lp-step p { font-size: 1rem; line-height: 1.65; color: var(--text-mid); max-width: 46rem; }
.fg .lp-step .shot { margin-top: 1.9rem; }

/* ── Bring-your-own-AI band ─────────────────────────────────────────────
   The only place the page inverts against its own theme: in light mode this
   band stays dark, because the prompt capture is dark and a dark band gives
   it an edge without a border. In dark mode it becomes --page-alt with
   hairlines top and bottom — see the media query below. */
.fg .lp-band { background: #14100E; padding: 5rem 0; }

/* In dark mode #14100E measures 1.02:1 against --page — an invisible band
   and, with it, no stage for the capture. So the band becomes the raised
   surface, and the hairlines do the separating: at these luminances a 1px
   rule reads where a 5% background shift does not. */
@media (prefers-color-scheme: dark) {
  .fg.auto-theme .lp-band,
  .fg.auto-theme.theme-shape-n-ship .lp-band,
  .fg.auto-theme.theme-nearing .lp-band {
    background: var(--page-alt);
    border-top: 1px solid var(--hairline);
    border-bottom: 1px solid var(--hairline);
  }
}
/* Out-specifies .fg .lp-band p below, which would otherwise inflate the
   band's mono label to lede size. */
.fg .lp-band p.lp-eyebrow {
  font-size: 0.71875rem;
  font-weight: 500;
  line-height: 1.7;
  color: #F0A574;
}
.fg .lp-band h2 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: clamp(1.875rem, 3.4vw, 2.375rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #fff;
  border-bottom: none;
  padding-bottom: 0;
  margin: 1.1rem 0 0;
  max-width: 24ch;
  text-wrap: balance;
}
.fg .lp-band p { color: #A9A199; font-size: 1.0625rem; line-height: 1.6; max-width: 34rem; }
.fg .lp-band p strong { color: #fff; font-weight: 600; }
.fg .lp-band a { color: #F0A574; }
.fg .lp-band-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3.5rem; align-items: center; }
.fg .lp-band-copy { display: flex; flex-direction: column; gap: 1rem; }
/* No border, radius or shadow — same rule as .shot in styles.css. The
   capture is a transparent PNG with its own rounded window chrome and baked
   shadow, so any frame here lands out in the transparent margin and boxes
   the window in a rectangle it doesn't have. */
.fg .lp-band-shot img { display: block; width: 100%; height: auto; }

/* ── Pricing ── */
.fg .lp-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; padding-top: 3.25rem; }

.fg .lp-price {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 2rem 2.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.fg .lp-price.pro { border: 1.5px solid var(--accent-edge); background: var(--accent-wash); }

.fg .lp-price .tier {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}

.fg .lp-price.pro .tier { color: var(--accent-deep); }

.fg .lp-price h3 {
  font-family: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--text);
  border-bottom: none;
  padding-bottom: 0;
  margin: 0;
}

/* Figures set in the surrounding face with tabular widths. A monospace
   inset was tried and removed: mono gives the full stop the same cell as a
   digit, so "$34.99" opened up into "$34 . 99" at headline size. Applied to
   the card so the lifetime and launch figures agree. */
.fg .lp-price { font-variant-numeric: tabular-nums; }

.fg .lp-price p { font-size: 0.9375rem; line-height: 1.6; color: var(--text-mid); }

.fg .lp-price .launch {
  margin-top: 0.35rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline);
  color: var(--text-mid);
}

.fg .lp-price .launch strong { color: var(--text); font-weight: 600; }

.fg .lp-footnotes { padding-top: 2rem; display: flex; flex-direction: column; gap: 0.5rem; }
.fg .lp-footnotes p { font-size: 0.875rem; color: var(--text-soft); }

/* ── Footer ── */
.fg .lp-footer {
  background: var(--page-alt);
  border-top: 1px solid var(--hairline);
  padding: 2.25rem 0;
  text-align: center;
}

.fg .lp-footer p { font-size: 0.8125rem; color: var(--text-soft); }
.fg .lp-footer a { color: var(--text-soft); font-size: 0.8125rem; text-decoration: none; }
.fg .lp-footer a:hover { color: var(--text); text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 860px) {
  .fg .lp-step-text { grid-template-columns: 1fr; gap: 0.9rem; }
  .fg .lp-band-grid { grid-template-columns: 1fr; gap: 2.25rem; }
  .fg .lp-prices { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .fg .lp-wrap { padding: 0 1.25rem; }
  .fg .lp-hero { padding: 3.25rem 0 2.5rem; }
  .fg .lp-section, .fg .lp-band { padding: 3.25rem 0; }
  .fg .lp-stage img { width: 148%; margin-left: -24%; }
  .fg .lp-claim { padding: 1.25rem 1.35rem; }
  .fg .lp-price { padding: 1.5rem 1.5rem; }
}

/* ── Opaque screenshot figures ──────────────────────────────────────────────
   Nearing's captures are JPEGs: rectangular, opaque, no window chrome and no
   baked shadow. They are the opposite case to .shot and need exactly what .shot
   forbids — a radius, a hairline and a shadow — because without them a
   photograph bleeds into the page with a hard machine edge.

   Don't merge these two rules. Which one applies depends on how the file was
   exported, not on which page it sits on.                                     */
.fg .lp-figure {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  margin-top: 1.9rem;
}

.fg .lp-figure.lead { margin-top: 1rem; }

/* Copy beside a figure rather than above it — used where the capture is close
   to square and full width would waste the column. */
.fg .lp-split {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 3rem;
  /* start, not center: the device cutout is ~690px tall against ~230px of copy,
     and centring the short column pushed the copy 281px below the heading it
     belongs to — a hole directly under the section rule. Aligning to the top
     puts the height difference below the copy, where unequal columns read as
     normal. */
  align-items: start;
  padding-top: 3.25rem;
}

.fg .lp-split .lp-figure { margin-top: 0; }
.fg .lp-split-copy { display: flex; flex-direction: column; gap: 0.75rem; }
.fg .lp-split-copy p { font-size: 1rem; line-height: 1.65; color: var(--text-mid); }

.fg .lp-band .lp-quote-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .fg .lp-split,
  .fg .lp-band .lp-quote-grid { grid-template-columns: 1fr; gap: 2rem; }
}

/* ── Prose block inside a landing section ───────────────────────────────────
   A run of paragraphs under a .lp-head, where the section makes its point in
   words and the screenshot (if any) follows. Same top rhythm as .lp-step.     */
.fg .lp-prose { padding-top: 3.25rem; }
.fg .lp-prose p { font-size: 1.0625rem; line-height: 1.65; color: var(--text-mid); max-width: 46rem; }

/* ── Per-app band colour ────────────────────────────────────────────────────
   .lp-band is dark in BOTH themes, so its colours are literal rather than
   tokens — which means each app needs its own. Warm near-black carries orange;
   teal wants the green side of neutral or it reads muddy.                     */
.fg.theme-nearing .lp-band { background: #0A1615; }

.fg.theme-nearing .lp-band p.lp-eyebrow,
.fg.theme-nearing .lp-band a { color: #19BAB0; }

/* ── Device cutout ──────────────────────────────────────────────────────────
   The third kind of image on the site, after .shot and .lp-figure: a device
   photographed against nothing, saved as a transparent PNG with the Dynamic
   Island cut out. It gets no border and no radius — there is no rectangle to
   trace — and its shadow is a filter rather than a box-shadow, because
   drop-shadow follows the alpha channel while box-shadow would draw the
   bounding box in mid-air.

   Sized at its natural width and centred: the screen is 343px across and there
   is no more resolution behind it, so stretching it to fill the column would
   only soften the widgets that are the subject.                               */
.fg .lp-device {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.38));
}
