/* =============================================================================
   Presr — Marketing Site Stylesheet
   ============================================================================= */

/* The site's one web font, served from this site rather than Google Fonts, so
   no visitor's IP address goes to a third party (privacy.html → This website).
   A variable font; 500–700 are the weights the page uses, and a request for
   400 settles on 500, as it did when only those three were loaded. OFL 1.1 —
   the licence sits beside the files. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.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: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('assets/fonts/plus-jakarta-sans-latin-wght-normal.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;
}

:root {
  color-scheme: light;

  /* ── Brand Color Ramp ─────────────────────────────────────────────────── */
  --brand-50:  #FFF4ED;
  --brand-100: #FFE6D8;
  --brand-200: #FFCBB0;
  --brand-400: #FF8A5B;
  --brand-500: #FF6B35;
  --brand-600: #E85D04;
  --brand-700: #C24E05;
  --brand-800: #873200;
  --brand-900: #491C00;

  /* ── Accent & State Colors ────────────────────────────────────────────── */
  /* Done, and caution — the extension's own values (src/builder/index.css):
     a forest green rather than Tailwind's mint, and a dark gold for "some
     parsers cope with this" that can't be mistaken for the brand orange. */
  --emerald-50:  #EAF5EC;
  --emerald-500: #2B8A3E;
  --emerald-600: #1E602B;

  --gold-50:     #FBF3E2;
  --gold-500:    #B0781A;
  --gold-600:    #8A5C10;

  /* A job's status glyph in the drawn side panel: saved is the brand,
     applied this blue, interviewing the green above. */

  /* ══ THE INK ══════════════════════════════════════════════════════════════
     The one decision the rest of this file is downstream of.

     Every neutral on the page is one hue at a different alpha — fills,
     hairlines, rings, muted copy and shadows alike — rather than a gray ramp.
     A stock Tailwind slate ramp (#0F172A/#64748B/#E2E8F0 — what this file
     used to ship) is a *cold* neutral, and it fights a warm brand: an orange
     button on cold gray is two unrelated colors sharing a page.

     The ink below is the brand orange dragged down to near-black — same warm
     family, so orange stops being an intrusion and starts being the loud end
     of one ramp. Every neutral token from here on is an alpha of it, and no
     ground is pure white.

     Change --ink-rgb and the entire site re-tints in one edit. */
  --ink-rgb: 29, 19, 12;

  /* ── Light Ground Surfaces & Borders ──────────────────────────────────── */
  --surface:         #ffffff;
  /* The page itself: white pulled toward the ink, never #fff, so a white card
     reads as *raised off* the page rather than as a borderless hole in it.
     Three steps of ground now exist where there used to be two invisible
     ones: card > band > paper. */
  --ground:          #FEFCF9;
  /* Paper, not gray. The old #F8FAFC sat a hair off white and read as a
     rendering artifact; a warm cream reads as a deliberate second ground, so
     the alternating bands finally do the job they were laid out to do. */
  --surface-sunken:  #FAF5EE;
  --surface-inset:   #F3EBE1;
  /* The extension's own sunken ground, warmed: what the drawn side panel and
     builder sit on (the product's #f7f8fa, in this site's ink). */
  --app-ground:      #F7F5F2;

  --border:          rgba(var(--ink-rgb), 0.10);
  --border-soft:     rgba(var(--ink-rgb), 0.06);
  --border-strong:   rgba(var(--ink-rgb), 0.18);

  /* ── Text Hierarchy ───────────────────────────────────────────────────── */
  /* Four alphas of one ink rather than four sampled grays — the hierarchy is
     the same, the family is not. */
  --text:            rgb(var(--ink-rgb));
  --text-secondary:  rgba(var(--ink-rgb), 0.74);
  --text-muted:      rgba(var(--ink-rgb), 0.56);
  --text-subtle:     rgba(var(--ink-rgb), 0.40);

  /* ── Dark Ground (Ink) ────────────────────────────────────────────────── */
  --ink:             rgb(var(--ink-rgb));
  --ink-deep:        #120B06;
  --ink-border:      rgba(255, 255, 255, 0.1);
  --ink-border-soft: rgba(255, 255, 255, 0.06);

  /* Warm on the way back up too: a cold #F8FAFC on a warm ink is the same
     mismatch in reverse. */
  --on-ink:          #FDF8F3;
  --on-ink-2:        #DCD1C7;
  --on-ink-muted:    #A5968C;
  --on-ink-subtle:   #71625A;

  --brand-on-ink:    #FF8A5B;
  --brand-on-tint:   #C24E05;

  /* ── Refined Elevation & Multi-Stop Shadows ───────────────────────────── */
  /* Cast in the ink, not in slate. A warm shadow under a warm card is the
     difference between a page that looks lit and one that looks composited. */
  --shadow-xl: 0 24px 48px -8px rgba(var(--ink-rgb), 0.14), 0 10px 20px -4px rgba(var(--ink-rgb), 0.07);
  /* Primary CTA ambient brand glow (DESIGN.md mapped to brand color) */
  --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.40);
  /* A sheet of paper standing on a surface — used by the template gallery. */
  --shadow-paper:
    0 1px 1px rgba(var(--ink-rgb), 0.05),
    0 8px 18px -6px rgba(var(--ink-rgb), 0.12),
    0 24px 48px -20px rgba(var(--ink-rgb), 0.22);
  --shadow-paper-hi:
    0 2px 3px rgba(var(--ink-rgb), 0.06),
    0 18px 34px -10px rgba(var(--ink-rgb), 0.18),
    0 44px 70px -28px rgba(var(--ink-rgb), 0.30);

  --focus-ring: 0 0 0 3px rgba(255, 107, 53, 0.35);

  /* ── The Ring ───────────────────────────────────────────────────────────── */
  --ring:        inset 0 0 0 1px rgba(var(--ink-rgb), 0.10);
  --ring-strong: inset 0 0 0 1px rgba(var(--ink-rgb), 0.18);
  --ring-brand:  inset 0 0 0 1px rgba(255, 107, 53, 0.35);
  --ring-ink:    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  --shadow-lift: 0 18px 40px -18px rgba(var(--ink-rgb), 0.32);

  /* ── Typography — Font Families (DESIGN.md) ───────────────────────────── */
  --font-gilroy: 'Gilroy', 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: var(--font-gilroy);
  --font-display: var(--font-gilroy);
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ── Typography — Weights (DESIGN.md: 500 body/links/buttons, 600 display/headings) */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ── Typography — Type Scale & Precise Tracking (DESIGN.md) ───────────── */
  /* Tracking is size-specific (apple-design skill, §15): small text opens up a
     little, body sits near zero, and only display sizes pull in hard. Every
     value is in em, not px. These used to be px lifted from DESIGN.md at each
     size's maximum — but the headings are clamp()ed, so on a phone the 92px
     headline rendered at 40px still carried -6.9px of tracking (-0.17em) and
     its letters collided. In em the tracking shrinks with the type. */
  --text-caption: 12px;
  --leading-caption: 1.44;
  --tracking-caption: 0.02em;

  --text-body-sm: 14px;
  --leading-body-sm: 1.44;
  --tracking-body-sm: 0.01em;

  /* 17px running text — the size almost every paragraph on the page is. */
  --tracking-body: -0.006em;

  --text-subheading: 18px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.012em;

  --text-heading-sm: 24px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.018em;

  --text-heading: 46px;
  --leading-heading: 1.05;
  --tracking-heading: -0.026em;

  --text-heading-xl: 66px;
  --leading-heading-xl: 1.02;
  --tracking-heading-xl: -0.032em;

  --text-display: 92px;
  --leading-display: 0.96;
  --tracking-display: -0.042em;

  --step-2:  clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);

  /* ── Spacing Scale (DESIGN.md base 4px) ───────────────────────────────── */
  --spacing-20: 20px;

  /* ── Layout Parameters (DESIGN.md) ────────────────────────────────────── */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: 24px;
  --element-gap: 8px;

  --pad-x: clamp(20px, 5vw, 48px);
  --nav-h: 72px;

  /* ── Border Radius & Component Shapes (DESIGN.md) ─────────────────────── */
  --radius-xs: 6px;
  --radius-md: 7px;
  --radius-lg: 16px;

  /* Named Radii */
  --radius-tags: 9999px;
  --radius-cards: 24px;
  --radius-icons: 7px;
  --radius-buttons: 9999px;
  --radius-pill: 9999px;

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --t-fast: 150ms var(--ease-smooth);
  --t-base: 250ms var(--ease-spring);
  --t-slow: 400ms var(--ease-spring);
  /* Presses answer inside one perceptual beat and let go just as fast. */
  --t-press: 110ms cubic-bezier(0.2, 0, 0, 1);
}

/* =============================================================================
   Reset & Base Styles
   ============================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 32px);
}

body {
  background: var(--ground);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: var(--tracking-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

::selection {
  background: var(--brand-100);
  color: var(--brand-900);
}

/* Gilroy / Humanist Sans at 600 with negative tracking hierarchy (DESIGN.md) */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.04em;
  line-height: 1.0;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 1.8rem + 3.2vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

h2 {
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, var(--text-heading-xl));
  line-height: var(--leading-heading-xl);
  letter-spacing: var(--tracking-heading-xl);
}

h3 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
}

h4 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}

h5, h6 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
}

/* ── The stroke ──────────────────────────────────────────────────────────
   Two overlapping hand-drawn passes in the accent color, sitting under one
   phrase of the headline. The whole reason it works
   is that it is *drawn* — a straight 3px rule under the same words reads as an
   underline, which is a link, not a mark.

   It is a background rather than an inline <svg> so that the phrase is still
   plain text to a screen reader and to selection, and so that a line break in
   the middle of the phrase gives each fragment its own stroke instead of
   stranding one absolutely-positioned graphic across two lines. */
.mark {
  position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 22' preserveAspectRatio='none'%3E%3Cpath d='M5 11c62-6 152-8 291-4' fill='none' stroke='%23FF6B35' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M34 19c68-5 138-6 236-4' fill='none' stroke='%23FF6B35' stroke-width='4' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  /* Clear of the descenders. Through the tail of a "y" it stops reading as a
     mark under the phrase and starts reading as a strike through it. */
  background-position: 0 100%;
  background-size: 100% 0.22em;
  /* Each line fragment gets its own copy rather than one stretched across the
     break. */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
  padding-bottom: 0.16em;
}

/* Drawn on, left to right, as the headline arrives. Rides the .reveal class
   the rest of the hero already uses, so it cannot get out of step with it. */
.reveal:not(.is-in) .mark { background-size: 0% 0.22em; }
.reveal.is-in .mark { transition: background-size 900ms var(--ease-spring) 260ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal:not(.is-in) .mark { background-size: 100% 0.22em; }
  .reveal.is-in .mark { transition: none; }
}
h4 { font-size: var(--step-2); }

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--surface-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-xs);
  padding: 0.15em 0.45em;
  color: var(--brand-800);
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

.skip {
  position: absolute;
  left: -9999px;
  top: 14px;
  z-index: 999;
  background: var(--ink);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-weight: 600;
}
.skip:focus { left: 20px; }

/* =============================================================================
   Layout & Container Utilities
   ============================================================================= */

.wrap {
  width: 100%;
  max-width: var(--page-max-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.wrap-narrow { max-width: 860px; }

.section {
  position: relative;
  padding-block: var(--section-gap, 80px);
}

/* Paper. The hairline at each edge is the ring idea applied to a whole band —
   the boundary is stated once at full strength instead of being left to a 4%
   difference in fill that nobody can see. */
.section-sunken {
  background: var(--surface-sunken);
  border-block: 1px solid var(--border);
}

.section-ink-deep {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 107, 53, 0.14), transparent 70%),
    radial-gradient(50% 40% at 85% 100%, rgba(59, 130, 246, 0.08), transparent 60%),
    var(--ink-deep);
}

/* Headings & Eyebrows (DESIGN.md: 600 display weight, tight tracking) */
.head {
  max-width: 800px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: clamp(44px, 5vw, 64px);
}

.head h2 {
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, var(--text-heading-xl));
  line-height: var(--leading-heading-xl);
  letter-spacing: var(--tracking-heading-xl);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 16px;
}

.head .sub {
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-inline: auto;
}

.eyebrow {
  display: block;
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  color: var(--brand-on-tint);
  margin-bottom: 14px;
}

/* =============================================================================
   Buttons & Interactive Elements (DESIGN.md: 9999px pills, 16px 24px, 500 weight)
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--element-gap, 8px);
  font-family: var(--font-body);
  font-weight: var(--font-weight-medium);
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: var(--tracking-body);
  padding: 16px 24px;
  border-radius: var(--radius-buttons);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast),
              box-shadow var(--t-fast), transform var(--t-press);
}
/* Feedback on the press, not the release (apple-design §1). */
.btn:active { transform: scale(0.97); }

/* Primary Pill CTA Button: Filled pill with ambient brand glow */
.btn-primary {
  background: var(--brand-500);
  color: #ffffff;
  box-shadow: var(--shadow-glow);
}

.btn-primary:hover {
  background: var(--brand-400);
  color: #ffffff;
  box-shadow: 0 0 24px rgba(255, 107, 53, 0.55);
}
.btn-primary:active {
  background: var(--brand-600);
  color: #ffffff;
}
.btn-primary .chrome-i { stroke: currentColor; }

.btn-quiet {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  padding: 16px 24px;
  border-radius: var(--radius-buttons);
}

.btn-quiet:hover {
  background: var(--surface-inset);
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-lg {
  padding: 16px 28px;
  font-size: 17px;
  border-radius: var(--radius-buttons);
  font-weight: var(--font-weight-medium);
}

.btn-block { width: 100%; }

.chrome-i {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

/* =============================================================================
   Navigation Header
   ============================================================================= */

/* A translucent material the page scrolls under (apple-design §12), tinted
   toward the warm ground rather than white. There is no hairline under it:
   once content is actually beneath the bar, a soft edge fades in instead
   (.nav::after), which is only there when floating chrome overlaps content. */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(254, 252, 249, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  transition: background-color var(--t-base);
}
.nav::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto;
  height: 14px;
  background: linear-gradient(rgba(var(--ink-rgb), 0.07), rgba(var(--ink-rgb), 0));
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}
.nav.is-stuck { background: rgba(254, 252, 249, 0.8); }
.nav.is-stuck::after { opacity: 1; }

.nav-in {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  font-size: 1.45rem;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.brand-logo {
  height: 30px;
  width: auto;
  flex: none;
  object-fit: contain;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.nav-links a {
  font-size: 17px;
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  color: var(--text-secondary);
  padding: 8px 14px;
  border-radius: var(--radius-tags);
  transition: background-color var(--t-fast), color var(--t-fast);
}

.nav-links a:hover {
  color: var(--text);
  background: var(--surface-inset);
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  /* place-content, not place-items: the two bars have to sit 7px apart in
     the middle, not one in the centre of each half of the button — that
     spread them 22px apart and turned the open state into a chevron. */
  place-content: center;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform var(--t-base), opacity var(--t-base);
}
.nav-toggle span + span { margin-top: 5px; }

.nav-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

/* Drops out of the bar it belongs to and goes back up into it — the same path
   both ways (apple-design §7). A transition rather than keyframes so that a
   second tap mid-flight reverses it from wherever it is. Closed, it is
   `inert` (set in main.js), so nothing in it can take focus. */
.nav-drawer {
  overscroll-behavior: contain;
  position: absolute;
  inset: 100% 0 auto;
  display: grid;
  gap: 4px;
  padding: 16px var(--pad-x) 24px;
  border-top: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: var(--shadow-xl);
  transform-origin: 50% 0;
  opacity: 0;
  transform: translateY(-10px) scale(0.985);
  visibility: hidden;
  transition: opacity 220ms var(--ease-smooth), transform 320ms var(--ease-spring), visibility 0s linear 320ms;
}
.nav-drawer.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 180ms var(--ease-smooth), transform 360ms var(--ease-spring), visibility 0s;
}
.nav-drawer a {
  padding: 12px 6px;
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-soft);
}
.nav-drawer .btn { margin-top: 12px; border-bottom: none; }

/* =============================================================================
   Hero Section (DESIGN.md: 92px display headline, 17px body, pill CTA)
   ============================================================================= */

.hero {
  position: relative;
  padding-top: clamp(56px, 7vw, 96px);
  padding-bottom: clamp(64px, 8vw, 112px);
  overflow: hidden;
  /* Plain white. The orange wash that used to sit here showed through the
     frosted nav as a peach tint; without it the bar reads clean. */
  background: var(--surface);
}

.hero-in {
  position: relative;
  z-index: 1;
  display: block;
  max-width: var(--page-max-width, 1200px);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.hero-copy {
  max-width: 940px;
  margin-inline: auto;
  text-align: center;
}

.hero-copy h1 {
  font-size: clamp(2.5rem, 1.8rem + 3.2vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-semibold);
  margin-bottom: 24px;
  color: var(--ink);
  text-wrap: balance;
}

.hero-copy .lede {
  text-wrap: balance;
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-medium);
  color: var(--text-secondary);
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: 34px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-bottom: 22px;
}

/* ── The hero demo ────────────────────────────────────────────────────────
   A browser window with three layers in one stage: the profile you scroll
   (left), the side panel (right), and the builder, which grows out of the
   panel over both. The builder's reveal is a clip-path driven by a spring in
   main.js, so it can reverse from any point. */
.demo {
  position: relative;
  max-width: 1120px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--ring-strong), var(--shadow-lift);
  text-align: left;
}

.demo-chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 46px;
  padding: 0 14px;
  background: var(--surface-inset);
  border-bottom: 1px solid var(--border);
}
.demo-dots { display: flex; gap: 6px; }
.demo-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.16); }
.demo-url {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 1 320px;
  min-width: 0;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  box-shadow: var(--ring);
  font-size: 12.5px;
  color: var(--text-muted);
}
.demo-url svg { width: 12px; height: 12px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.demo-url-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 160ms var(--ease-smooth); }
.demo-restart {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: var(--brand-700);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-200);
  touch-action: manipulation;
  transition: background-color var(--t-fast), transform var(--t-press), opacity 200ms var(--ease-smooth);
}
.demo-restart[hidden] { display: none; }
.demo-restart:hover { background: var(--brand-100); }
.demo-restart:active { transform: scale(0.95); }
.demo-restart svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.demo-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  height: 540px;
}

/* ── The profile page ── */
.demo-page {
  position: relative;
  overflow-y: auto;
  overscroll-behavior: auto;
  background: var(--surface-inset);
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--ink-rgb), 0.2) transparent;
  cursor: grab;
  outline: none;
}
.demo-page:focus-visible { box-shadow: inset 0 0 0 3px rgba(255, 107, 53, 0.35); }
.demo-page.is-grabbing { cursor: grabbing; user-select: none; -webkit-user-select: none; }
.demo-page-in {
  max-width: 600px;
  margin: 0 auto;
  padding: 16px 16px 40px;
  display: grid;
  gap: 10px;
  will-change: transform;
}

.pf-top { border-radius: 14px; overflow: hidden; background: #ffffff; box-shadow: var(--ring); }
.pf-banner {
  height: 78px;
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 107, 53, 0.4), transparent 60%),
    linear-gradient(135deg, #2E2019 0%, var(--ink-deep) 100%);
}
.pf-card { padding: 0 18px 16px; }
.pf-avatar {
  width: 64px;
  height: 64px;
  margin-top: -32px;
  border-radius: 50%;
  border: 3px solid #ffffff;
  display: grid;
  place-items: center;
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
}
.pf-name { margin-top: 8px; font-size: 20px; line-height: 1.2; letter-spacing: -0.015em; }
.pf-headline { margin-top: 3px; font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); }
.pf-meta { margin-top: 3px; font-size: 12.5px; color: var(--text-muted); }

.pf-block {
  position: relative;
  padding: 14px 18px 16px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--ring);
}
.pf-block h4 { font-size: 16px; line-height: 1.3; letter-spacing: -0.01em; margin-bottom: 8px; }
.pf-block > p, .pf-item p { font-size: 13px; line-height: 1.45; color: var(--text-secondary); }
/* The section that was just read: one soft ring, once. Feedback on the
   thing that caused it (apple-design §13), not only in the panel. */
.pf-block::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--brand-400);
  opacity: 0;
  pointer-events: none;
}
.pf-block.is-read::after { animation: pfRead 1100ms var(--ease-smooth); }
@keyframes pfRead { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

.pf-item { display: flex; gap: 12px; align-items: flex-start; }
.pf-item + .pf-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border-soft); }
.pf-item b { display: block; font-size: 13.5px; font-weight: 600; }
.pf-item > div > span, .pf-item > div > small { display: block; font-size: 12.5px; color: var(--text-secondary); }
.pf-item > div > small { color: var(--text-muted); }
.pf-item p { margin-top: 5px; }
.pf-logo {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  background: var(--c);
}
.pf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pf-chips span { font-size: 12.5px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--surface-sunken); box-shadow: var(--ring); }
.pf-langs { display: grid; gap: 6px; }
.pf-langs li { display: flex; gap: 8px; font-size: 13px; }
.pf-langs span { color: var(--text-muted); }
.pf-end { padding: 10px 0 0; text-align: center; font-size: 12px; color: var(--text-subtle); }

.demo-hint {
  position: absolute;
  left: calc((100% - 340px) / 2);
  bottom: 18px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 16px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  background: rgba(18, 11, 6, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
  transition: opacity 260ms var(--ease-smooth), transform 360ms var(--ease-spring);
  z-index: 2;
}
.demo-hint svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* Two nudges in the direction to scroll when it first appears, then still. */
.demo-hint.is-nudging svg { animation: hintNudge 900ms var(--ease-smooth) 2; }
@keyframes hintNudge { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
.demo-hint.is-gone { opacity: 0; transform: translate(-50%, 8px); }

/* ── The panel ──
   The extension's side panel mid-read, as it now draws it: the count and a
   thin bar on the panel's own ground, one line of status, and every section
   in one rounded list whose state is the mark at the end of its row — empty,
   a spinner while it is being read, a tick once it is. Each row used to be a
   card of its own with a green rail down its edge and its icon on a tinted
   tile. The chrome it sits in (.sp-head and friends) is shared with the Enhance demo. */
.demo-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--app-ground);
  border-left: 1px solid var(--border);
}
.dm-meter { padding: 14px 16px 0; }
.demo.is-full .dm-meter .sp-meter-row b { color: var(--emerald-600); }
.demo.is-full .dm-meter .progress-fill { background: var(--emerald-500); }
.dm-note { margin-top: 9px; font-size: 12px; line-height: 1.45; color: var(--text-secondary); transition: color var(--t-base); }
.demo.is-full .dm-note { color: var(--emerald-600); }

.dm-rows {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 12px 14px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #ffffff;
  scrollbar-width: none;
}
.dm-rows::-webkit-scrollbar { display: none; }
.dm-row {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 8px 12px;
}
/* The hairline starts at the text, past the icon. */
.dm-row + .dm-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: 42px;
  right: 0;
  height: 1px;
  background: var(--border-soft);
}
.dm-row > div { min-width: 0; }
.dm-row b { display: block; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text-secondary); transition: color var(--t-base); }
.dm-row small { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; color: var(--text-subtle); transition: color var(--t-base); }
.dm-ic { display: flex; justify-content: center; color: var(--text-subtle); transition: color var(--t-base); }
.dm-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-state { position: relative; width: 18px; height: 18px; }
.dm-row.is-live .dm-ic { color: var(--brand-500); }
.dm-row.is-live b { color: var(--text); }
.dm-row.is-live .dm-state {
  width: 15px;
  height: 15px;
  margin: 1.5px;
  border-radius: 50%;
  border: 2px solid var(--brand-100);
  border-top-color: var(--brand-500);
  animation: spSpin 700ms linear infinite;
}
.dm-row.is-done .dm-ic { color: var(--text-muted); }
.dm-row.is-done b { color: var(--text); }
.dm-row.is-done small { color: var(--text-muted); }
.dm-row.is-done .dm-state { color: var(--emerald-500); animation: dmPop 420ms var(--ease-spring); }
.dm-row.is-done .dm-state::after {
  content: "";
  position: absolute;
  left: 6.5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border: solid currentColor;
  border-width: 0 1.8px 1.8px 0;
  transform: rotate(45deg);
}
@keyframes dmPop { 0% { transform: scale(0.4); } 100% { transform: none; } }

.dm-foot { margin-top: auto; padding: 12px 14px; background: #ffffff; border-top: 1px solid var(--border); }
.dm-build {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  color: #ffffff;
  background: var(--brand-500);
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-press);
}
.dm-build:hover:not(:disabled) { background: var(--brand-600); }
.dm-build:active:not(:disabled) { transform: scale(0.98); }
/* Disabled the way the panel draws it: grey, not a faded orange. */
.dm-build:disabled { cursor: default; color: var(--text-subtle); background: rgba(var(--ink-rgb), 0.06); }

/* ── After Build resume ──
   The resume takes the profile's cell and the panel turns into what was made,
   each where it already was, so nothing moves somewhere new; the two cross on
   one spring (main.js). The resume is only a page: no editor chrome, because
   a demo's controls that look real have to be real. */
#demoStage > .demo-page,
#demoStage > .demo-result { grid-area: 1 / 1; }
#demoStage > .demo-panel { grid-area: 1 / 2; }

.demo-result {
  position: relative;
  z-index: 2;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 24px 32px;
  background: var(--surface-inset);
  scrollbar-width: thin;
}
.demo-result[hidden] { display: none; }
/* Always a whole letter page, whatever was read: built from a few sections,
   the page used to stop where they did, half a sheet. It still grows past
   that if anything ever runs longer. */
#demoPaper { aspect-ratio: 8.5 / 11; transform-origin: 50% 0; will-change: transform; }

/* The panel's tabs share one cell, and so do the LinkedIn tab's two views,
   so the panel keeps its size whichever is showing and while they cross. The
   one not showing keeps its room, unseen. */
.dm-tabs { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr); }
.dm-tabs > * { grid-area: 1 / 1; min-height: 0; }
.dm-views { display: grid; grid-template-rows: minmax(0, 1fr); }
.dm-read, .dm-done { grid-area: 1 / 1; min-height: 0; display: flex; flex-direction: column; }
.dm-tabs > .dm-views[hidden] { display: grid; visibility: hidden; }
.dm-tabs > .dm-view[hidden],
.dm-views > [hidden] { display: flex; visibility: hidden; }

/* The tabs, working: the extension's segmented control, pressable. */
.sp-seg button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  border-radius: 7px;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.sp-seg button:not(.is-on):hover { color: var(--text); }
.sp-seg button:not(.is-on):active { background: rgba(var(--ink-rgb), 0.05); }
.sp-seg button.is-on { color: var(--text); font-weight: 600; background: #ffffff; box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.12), 0 0 0 0.5px rgba(var(--ink-rgb), 0.06); }
.sp-seg button:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 1px; }

/* ── What was made ── */
.dm-done-body { padding: 16px 16px 0; }
.dm-done-title { font-family: var(--font-display); font-size: 16px; line-height: 1.3; font-weight: var(--font-weight-semibold); letter-spacing: -0.01em; color: var(--text); outline: none; }
.dm-done-sub { margin-top: 4px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.dm-done-next { margin-top: 14px; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
a.dm-build { text-decoration: none; }

/* The template, picked by its page: the real export of each, the way a
   template chooser shows them, rather than three words in a switch. A radio
   group under the picture, so the picture, its name and the choice are one
   thing to press. The one chosen carries the brand ring; its name goes dark. */
.dm-tpls { min-width: 0; margin: 16px 0 0; padding: 0; border: 0; }
.dm-label { float: none; margin: 0 0 8px; padding: 0; font-size: 12px; font-weight: var(--font-weight-semibold); color: var(--text-secondary); }
.dm-tpl-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dm-tpl {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 7px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.dm-tpl input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dm-tpl img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 440 / 570;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(var(--ink-rgb), 0.06);
  transition: box-shadow var(--t-fast), transform var(--t-press);
}
.dm-tpl span { font-size: 12.5px; font-weight: 600; color: var(--text-muted); transition: color var(--t-fast); }
.dm-tpl:hover img { box-shadow: 0 0 0 1px var(--border-strong), 0 6px 14px -8px rgba(var(--ink-rgb), 0.3); }
.dm-tpl:hover span { color: var(--text-secondary); }
.dm-tpl:active img { transform: scale(0.97); }
.dm-tpl:has(input:checked) img { box-shadow: 0 0 0 2px var(--brand-500), 0 6px 16px -8px rgba(232, 93, 4, 0.45); }
.dm-tpl:has(input:checked) span { color: var(--text); }
.dm-tpl:has(input:focus-visible) img { outline: 2px solid var(--brand-400); outline-offset: 3px; }

/* ── Build resume before everything is read ──
   The extension's own question (src/sidepanel → confirmAction): the panel
   dimmed, the question in the middle, the sections it's about as one inset
   list with the checklist's dot, and two short answers side by side. */
.dm-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(var(--ink-rgb), 0.28);
  animation: dmScrimIn 200ms var(--ease-smooth);
}
.dm-scrim[hidden] { display: none; }
@keyframes dmScrimIn { from { opacity: 0; } }
.dm-ask {
  width: 100%;
  max-width: 300px;
  max-height: 100%;
  overflow-y: auto;
  padding: 20px 18px 16px;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 24px 60px -20px rgba(var(--ink-rgb), 0.4), 0 0 0 1px rgba(var(--ink-rgb), 0.06);
  text-align: center;
  animation: dmAskIn 180ms var(--ease-smooth);
}
@keyframes dmAskIn { from { opacity: 0; transform: scale(0.96); } }
.dm-ask-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); }
.dm-ask-body { margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.dm-ask-list { margin: 14px 0 0; padding: 4px 0; list-style: none; border-radius: 10px; background: var(--app-ground); text-align: left; }
.dm-ask-list li { position: relative; display: grid; gap: 1px; padding: 6px 12px 6px 28px; }
.dm-ask-list li::before { content: ""; position: absolute; left: 12px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--brand-500); }
.dm-ask-list b { font-size: 13px; font-weight: 600; color: var(--text); }
.dm-ask-list small { font-size: 11.5px; color: var(--text-muted); }
.dm-ask-actions { display: flex; gap: 8px; margin-top: 18px; }
.dm-ask-btn {
  flex: 1;
  min-width: 0;
  height: 36px;
  padding: 0 12px;
  border-radius: 10px;
  background: rgba(var(--ink-rgb), 0.06);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  touch-action: manipulation;
  transition: background-color var(--t-fast), transform var(--t-press);
}
.dm-ask-btn:hover { background: rgba(var(--ink-rgb), 0.1); }
.dm-ask-btn:active { transform: scale(0.97); }
.dm-ask-btn.is-primary { background: var(--brand-500); color: #ffffff; }
.dm-ask-btn.is-primary:hover { background: var(--brand-600); }
.dm-ask-btn:focus-visible { outline: 2px solid var(--brand-400); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dm-scrim, .dm-ask { animation: none; } }

/* ── Resumes and Jobs ── the extension's own lists, drawn small. */
.dm-view { display: flex; flex-direction: column; gap: 12px; padding: 14px; overflow-y: auto; }
.dm-view-note { font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.dm-empty { margin: auto 0; display: grid; justify-items: center; gap: 6px; padding: 12px 8px; text-align: center; }
.dm-empty[hidden] { display: none; }
.dm-empty-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #ffffff; box-shadow: 0 0 0 1px var(--border); color: var(--text-muted); }
.dm-empty-ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-empty-title { margin-top: 6px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--text); }
.dm-empty-desc { max-width: 30ch; font-size: 12.5px; line-height: 1.45; color: var(--text-secondary); }
.dm-empty-btn {
  margin-top: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px var(--border-strong);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
  transition: background-color var(--t-fast), transform var(--t-press);
}
.dm-empty-btn:hover { background: var(--app-ground); }
.dm-empty-btn:active { transform: scale(0.97); }
.dm-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--border); border-radius: 10px; background: #ffffff; overflow: hidden; }
.dm-list[hidden] { display: none; }
.dm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  color: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  transition: background-color var(--t-fast);
}
.dm-item:hover { background: var(--app-ground); }
.dm-item:active { background: rgba(var(--ink-rgb), 0.05); }
.dm-item:focus-visible { outline: 2px solid var(--brand-400); outline-offset: -2px; }
.dm-item-ic, .dm-mono { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.dm-item-ic { background: var(--brand-50); color: var(--brand-700); }
.dm-item-ic svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dm-mono { background: #3F4A5A; color: #ffffff; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; }
.dm-item-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.dm-item-text b { overflow: hidden; font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; text-overflow: ellipsis; }
.dm-item-text small { font-size: 11.5px; color: var(--text-muted); }
.dm-pill { flex: none; padding: 2px 8px; border-radius: var(--radius-pill); background: rgba(var(--ink-rgb), 0.06); font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.dm-chev { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--text-subtle); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.db-paper {
  width: min(600px, 100%);
  margin: 0 auto;
  padding: 34px 38px 40px;
  background: #ffffff;
  box-shadow: var(--shadow-paper);
  color: #111111;
  font: 400 10.5px/1.4 'Times New Roman', Times, serif;
  letter-spacing: 0;
  --acc: #111111;
}
.db-paper header { text-align: center; margin-bottom: 10px; }
.db-paper h5, .db-paper h6 { font-family: inherit; }
.db-paper h5 { font-size: 24px; line-height: 1.1; font-weight: 700; color: var(--acc); letter-spacing: 0; }
.db-paper header p { margin-top: 3px; color: #555555; }
.db-paper section { margin-top: 12px; }
.db-paper section[hidden] { display: none; }
.db-paper h6 {
  font-size: 11.5px;
  line-height: 1.2;
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.02em;
  color: var(--acc);
  padding-bottom: 2px;
  margin-bottom: 5px;
  border-bottom: 1px solid var(--acc);
}
.db-row { display: flex; justify-content: space-between; gap: 12px; }
.db-paper ul { margin: 2px 0 6px 14px; list-style: disc; }
.db-paper li { padding-left: 2px; }
.db-paper p + p { margin-top: 1px; }
/* The three templates the demo can switch between. Classic is the default.
   Times has a much smaller x-height than Calibri, so at the same size it
   reads a size smaller and spindly: Classic gets its own, larger size and
   tighter leading so it reads like the other two. */
#demoPaper.is-classic { font-size: 12.5px; line-height: 1.3; }
#demoPaper.is-classic h5 { font-size: 27px; }
#demoPaper.is-classic h6 { font-size: 13.5px; }
#demoPaper.is-classic header p { color: #444444; }
.db-paper.is-modern { font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; --acc: #1F3864; }
.db-paper.is-modern h6 { font-variant: normal; text-transform: uppercase; border-bottom-color: #C5CDDA; letter-spacing: 0.03em; }
/* As the product sets them, split: the name and headline on the left, the
   contact details stacked on the right, one to a line. */
.db-paper.is-modern header,
.db-paper.is-technical header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  text-align: left;
}
.db-paper.is-modern header h5,
.db-paper.is-technical header h5 { grid-column: 1; grid-row: 1; }
.db-paper.is-modern header p:last-child,
.db-paper.is-technical header p:last-child { grid-column: 1; grid-row: 2; }
.db-paper.is-modern .db-contact,
.db-paper.is-technical .db-contact { grid-column: 2; grid-row: 1 / span 2; margin-top: 2px; text-align: right; }
.db-paper.is-modern .db-contact span,
.db-paper.is-technical .db-contact span { display: block; }
.db-paper.is-modern .db-contact i,
.db-paper.is-technical .db-contact i { display: none; }
.db-contact i { font-style: normal; }
.db-paper.is-technical { font-family: Calibri, Carlito, 'Segoe UI', Arial, sans-serif; --acc: #0F5132; }
.db-paper.is-technical h6 { font-variant: normal; border-bottom: 0; padding: 3px 6px; background: #E7F0EA; }
.db-paper { transition: color 200ms var(--ease-smooth); }
.db-paper h6, .db-paper h5 { transition: color 200ms var(--ease-smooth), background-color 200ms var(--ease-smooth), border-color 200ms var(--ease-smooth); }

@media (max-width: 760px) {
  .demo-stage { grid-template-columns: 1fr; grid-template-rows: 330px auto; height: auto; }
  .demo-panel { border-left: 0; border-top: 1px solid var(--border); }
  .dm-rows { flex: none; display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
  .dm-row { grid-template-columns: 15px minmax(0, 1fr) 18px; gap: 8px; min-height: 40px; padding: 7px 10px; }
  .dm-row small { display: none; }
  .dm-row + .dm-row::before { left: 33px; }
  .dm-row:nth-child(2)::before { display: none; }
  .dm-row:nth-child(even) { box-shadow: inset 1px 0 0 var(--border-soft); }
  .demo-hint { left: 50%; bottom: auto; top: 270px; }
  #demoStage > .demo-panel { grid-area: 2 / 1; }
  .demo-result { padding: 14px; }
  .db-paper { padding: 22px 20px 26px; font-size: 9.5px; }
  #demoPaper.is-classic { font-size: 11px; }
  .demo-restart span { display: none; }
}
@media (max-width: 420px) {
  .demo-url { flex-basis: 150px; }
}

/* ── The product's own UI, drawn ─────────────────────────────────────────
   Shared by the hero demo's panel and the Enhance demo's, and built from
   the extension's side panel as it now is (src/sidepanel/sidepanel.css,
   rebuilt to the apple-design skill on 2026-09-26): a grey segmented control
   whose selected tab is white rather than orange, a heading over one rounded
   list with hairlines that start at the text, status as the mark at the end
   of a row, and orange only on what you do or what needs you. The neutrals
   are this site's ink rather than the extension's grey, so the drawing sits
   in the page it is on. */
.sp-head { padding: 12px 14px 10px; background: #ffffff; border-bottom: 1px solid var(--border); }
.sp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 0 10px 2px;
}
.sp-logo { height: 20px; width: auto; }
/* The plan: a grey capsule with no border, the one control in the bar. */
.sp-plan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 24px;
  padding: 0 10px 0 8px;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), 0.06);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.sp-plan svg { width: 12px; height: 12px; color: var(--text-muted); }

.sp-seg {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 2px;
  border-radius: 9px;
  background: rgba(var(--ink-rgb), 0.06);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  text-align: center;
}
.sp-seg span { display: flex; align-items: center; justify-content: center; gap: 5px; height: 26px; border-radius: 7px; white-space: nowrap; }
.sp-seg span.is-on { color: var(--text); font-weight: 600; background: #ffffff; box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.12), 0 0 0 0.5px rgba(var(--ink-rgb), 0.06); }
/* Counts are plain numbers, the way a mailbox shows its count. */
.sp-seg i { font-style: normal; font-weight: 500; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* How far the read has got: a count and a thin bar, on the panel's ground. */
.sp-meter-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.sp-meter-row > span { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--text); }
.sp-meter-row b { font-size: 12px; font-weight: 500; color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color var(--t-base); }
.progress-track { height: 4px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.progress-fill {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: var(--brand-500);
  transition: width 500ms var(--ease-spring), background-color var(--t-base);
}
@keyframes spSpin { to { transform: rotate(360deg); } }

.sp-private { display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 7px; font-size: 11px; color: var(--text-subtle); }
.sp-private svg { width: 11px; height: 11px; }
.sp-head svg, .sp-private svg {
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}

/* =============================================================================
   Features (#features) — two ways in, two demos, and the rest in one row
   ============================================================================= */

/* "Soon": what the web builder's buttons say until it is live. main.js
   removes it, and the aria-disabled, once BUILDER_URL is set. */
.soon {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: var(--radius-pill);
  background: rgba(var(--ink-rgb), 0.07);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
[data-builder][aria-disabled="true"] { cursor: default; }
.btn-quiet[aria-disabled="true"] { color: var(--text-secondary); }
.btn-quiet[aria-disabled="true"]:hover { background: var(--surface); border-color: var(--border); color: var(--text-secondary); }
.btn[aria-disabled="true"]:active { transform: none; }
.cta-link .soon { background: rgba(255, 255, 255, 0.12); color: var(--on-ink-2); }
.cta-link[aria-disabled="true"]:hover { color: var(--on-ink-2); }

/* Two ways in: two columns split by one hairline, not two cards. */
.ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 980px;
  margin-inline: auto;
}
.way { padding: 4px clamp(24px, 4vw, 48px); }
.way + .way { border-left: 1px solid var(--border); }
.way-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--brand-50);
  color: var(--brand-600);
}
.way-ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Where a feature lives and which plan has it: a plain line under the copy,
   not an uppercase label over the heading (taste: one eyebrow per three
   sections at most, and this page uses none). */
.where {
  margin-top: 14px;
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
}
.feat-copy .where { margin-top: 22px; }
.way h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  margin-bottom: 10px;
}
.way h3 + p { color: var(--text-secondary); }
.way-link { display: inline-block; margin-top: 4px; font-weight: var(--font-weight-semibold); color: var(--brand-on-tint); }
.way-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* A feature and its demo, side by side; .is-flip puts the demo first. */
.feat {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
  margin-top: clamp(80px, 9vw, 120px);
}
.feat.is-flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
/* A feature page's one demo opens its section, with no feature above it. */
.wrap > .feat:first-child { margin-top: 0; }
.feat.is-flip .sim { order: -1; }
.feat-copy h2,
.feat-copy h3 {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
  margin-bottom: 16px;
}
.feat-copy > p { color: var(--text-secondary); }

.ticks {
  margin-top: 24px;
  display: grid;
  gap: 12px;
}

.ticks li {
  position: relative;
  padding-left: 28px;
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-secondary);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.25em;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF6B35' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat;
  border: 1px solid var(--brand-200);
}

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── The demos ────────────────────────────────────────────────────────────
   Each is a browser window like the hero's (it borrows .demo-chrome), with
   the product drawn inside from its own components, and a caption along the
   bottom saying it is an example and what to press. */
.sim {
  margin: 0;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: var(--ring-strong), var(--shadow-lift);
  text-align: left;
}
.sim-stage { position: relative; display: grid; height: 520px; }
.sim-cap {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  background: var(--surface-inset);
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  color: var(--text-secondary);
}
.sim-cap b { font-weight: var(--font-weight-semibold); color: var(--text); }
:where(.sim button) { font: inherit; letter-spacing: inherit; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:where(.sim svg) { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* What to press next: a ring that keeps breathing out until it's pressed,
   then moves on to the step after. One at a time, so it always says where to
   go. */
.is-cue { animation: cue 2s var(--ease-smooth) 0.4s infinite; }
@keyframes cue {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 107, 53, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 53, 0); }
}

/* ── Match and tailor ── */
/* Short enough to sit whole between the nav and the install bar on a
   laptop, and as tall as the page beside it. */
.ts-stage { grid-template-columns: 320px minmax(0, 1fr); height: 448px; }
.bp.ts-panel {
  min-width: 0;
  min-height: 0;
  /* Everything fits in every state, so the panel never scrolls. */
  overflow: hidden;
  border-radius: 0;
  box-shadow: none;
  border-right: 1px solid var(--border);
}
.ts-panel .bp-head { padding: 12px 14px; }
.ts-panel .bp-body { gap: 12px; padding: 12px 14px 14px; }
.ts-head { display: flex; align-items: center; gap: 10px; }
.ts-head h4 { font-size: 15px; }
.ts-head p { margin-top: 1px; }
.ts-panel .bp-fit-top b, .ts-panel .bp-fit-top p { transition: opacity 200ms var(--ease-smooth); }
#tsim.is-strong .bp-ring .arc { stroke: var(--emerald-500); }
.bp-fchips span { transition: color var(--t-base), background-color var(--t-base); }
.bp-fchips span:not(.is-on) svg { display: none; }

.ts-open, .ts-apply, .es-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 10px;
  background: var(--brand-500);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-press);
}
.ts-open svg, .es-copy svg { width: 13px; height: 13px; }
.ts-open:active, .ts-apply:active:not(:disabled), .es-copy:active { transform: scale(0.97); }

.ts-bay { min-width: 0; overflow: hidden; display: grid; place-items: center; padding: 16px; background: var(--surface-inset); }
/* A whole page, the height of the panel. */
.ts-paper { width: auto; height: 100%; max-width: 100%; aspect-ratio: 8.5 / 11; overflow: hidden; padding: 24px 24px 0; font-size: 8.5px; }
.ts-paper h5 { font-size: 18px; }
.ts-paper h6 { font-size: 9.5px; }
.ts-paper li, .ts-paper p { transition: background-color 700ms var(--ease-smooth); }
.ts-paper .is-new { background: var(--emerald-50); }

/* The review. It grows out of the button that opened it and goes back into
   it — a clip-path on one spring, in main.js. */
.ts-sheet {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--app-ground);
  will-change: clip-path;
}
.ts-sheet[hidden] { display: none; }
.ts-sheet-head, .ts-sheet-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #ffffff;
}
.ts-sheet-head { border-bottom: 1px solid var(--border); }
.ts-sheet-head b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.ts-sheet-head small { display: block; font-size: 12px; color: var(--text-muted); }
.ts-x { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(var(--ink-rgb), 0.06); color: var(--text-secondary); transition: background-color var(--t-fast), transform var(--t-press); }
.ts-x:active { transform: scale(0.92); }
.ts-x svg { width: 14px; height: 14px; stroke-width: 2.2; }
.ts-sheet-body { overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 10px; padding: 14px 16px 20px; scrollbar-width: thin; }
.ts-group { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); }
.ts-pick, .ts-card { padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #ffffff; }
.ts-pick-title { font-size: 13px; font-weight: 600; }
.ts-pick-note { margin-top: 2px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.ts-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
  padding: 5px 11px 5px 9px;
  border-radius: var(--radius-pill);
  background: #ffffff;
  box-shadow: var(--ring-strong);
  font-size: 12.5px;
  font-weight: 600;
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-press);
}
.ts-chip svg { width: 12px; height: 12px; stroke-width: 2.4; transition: transform var(--t-base); }
.ts-chip small { font-size: 11px; font-weight: 500; color: var(--text-muted); }
.ts-chip:active { transform: scale(0.96); }
.ts-chip[aria-pressed="true"] { background: var(--brand-50); color: var(--brand-700); box-shadow: var(--ring-brand); }
.ts-chip[aria-pressed="true"] svg { transform: rotate(45deg); }
.ts-pick.is-caution .ts-chip { box-shadow: inset 0 0 0 1px var(--gold-500); }
.ts-pick.is-caution .ts-chip[aria-pressed="true"] { background: var(--gold-50); color: var(--gold-600); }
.ts-entry { font-size: 12.5px; font-weight: 600; color: var(--text-secondary); }
.ts-card { display: grid; gap: 8px; transition: border-color var(--t-base), opacity var(--t-base); }
.ts-card.is-new-line { border-style: dashed; }
.ts-card.is-use { border-style: solid; border-color: rgba(43, 138, 62, 0.45); }
.ts-card.is-keep .ts-diff { opacity: 0.6; }
.ts-draft { justify-self: start; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--gold-50); font-size: 11px; font-weight: 600; color: var(--gold-600); }
.ts-diff { font-size: 12.5px; line-height: 1.55; transition: opacity var(--t-base); }
.ts-diff del { color: #B42318; background: #FDECEA; text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, 0.6); border-radius: 3px; }
.ts-diff ins { color: var(--emerald-600); background: var(--emerald-50); text-decoration: none; border-radius: 3px; }
.ts-why { font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.ts-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ts-choices button {
  min-height: 32px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--ring-strong);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-press);
}
.ts-choices button:active { transform: scale(0.97); }
.ts-choices [data-choice="keep"][aria-pressed="true"] { background: rgba(var(--ink-rgb), 0.08); box-shadow: none; color: var(--text); }
.ts-choices [data-choice="use"][aria-pressed="true"] { background: var(--emerald-500); box-shadow: none; color: #ffffff; }
.ts-fits { font-size: 11.5px; color: var(--text-muted); }
.ts-sheet-foot { border-top: 1px solid var(--border); }
#tsChosen { font-size: 12px; color: var(--text-muted); }
.ts-apply:disabled { cursor: default; background: rgba(var(--ink-rgb), 0.06); color: var(--text-subtle); }

/* ── Improve LinkedIn ── */
.es-stage { grid-template-columns: minmax(0, 1fr) 300px; height: 470px; }
.es-page {
  position: relative;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: var(--surface-inset);
}
.es-page > * { flex: none; }
.es-page .pf-banner { height: 60px; }
.es-page .pf-avatar { width: 56px; height: 56px; margin-top: -28px; font-size: 16px; }
#esDesc { transition: background-color 700ms var(--ease-smooth); }
#esDesc.is-new { background: var(--brand-50); }
/* The form is modal on the profile, so the profile dims behind it. */
.es-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(18, 11, 6, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms var(--ease-smooth);
}
.es-page.is-editing::before { opacity: 1; }
.es-form {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 64px;
  z-index: 2;
  display: grid;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: var(--ring), var(--shadow-xl);
  will-change: transform, opacity;
}
.es-form[hidden] { display: none; }
.es-form-head { padding: 13px 16px; border-bottom: 1px solid var(--border-soft); }
.es-form-head b { font-size: 15px; font-weight: 700; }
.es-form-body { display: grid; gap: 4px; padding: 6px 16px 14px; }
.es-label { margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }
.es-input { padding: 8px 10px; border-radius: 8px; box-shadow: var(--ring-strong); font-size: 12.5px; line-height: 1.45; }
.es-area { min-height: 92px; transition: background-color 500ms var(--ease-smooth); }
.es-area.is-new { background: var(--brand-50); }
.es-form-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border-soft); }
.es-paste, .es-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 5px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-press);
}
.es-paste { background: #ffffff; box-shadow: var(--ring-strong); }
.es-paste kbd { font: inherit; font-size: 11px; color: var(--text-muted); }
.es-save { background: var(--ink); color: #ffffff; }
.es-save:disabled { cursor: default; background: rgba(var(--ink-rgb), 0.06); color: var(--text-subtle); }
.es-paste:active, .es-save:active:not(:disabled) { transform: scale(0.96); }

.es-panel { display: flex; flex-direction: column; min-height: 0; background: var(--app-ground); border-left: 1px solid var(--border); }
.es-eyebrow { font-size: 13px; font-weight: 700; }
.es-sub { margin-top: 1px; font-size: 11.5px; color: var(--text-muted); }
.es-body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; }
.es-crumb { margin-bottom: 8px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.es-field { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: #ffffff; }
.es-field-name { font-size: 13px; font-weight: 600; }
.es-choice { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; padding: 2px; border-radius: 9px; background: rgba(var(--ink-rgb), 0.06); }
.es-choice button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
  color: var(--text-secondary);
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-press);
}
.es-choice button:active { transform: scale(0.96); }
.es-choice button.is-on { background: #ffffff; color: var(--text); font-weight: 600; box-shadow: 0 1px 2px rgba(var(--ink-rgb), 0.12), 0 0 0 0.5px rgba(var(--ink-rgb), 0.06); }
.es-choice .es-ai { color: var(--brand-700); }
.es-choice svg { width: 11px; height: 11px; }
.es-text { min-height: 128px; font-size: 12.5px; line-height: 1.5; white-space: pre-line; color: var(--text-secondary); }
.es-text small { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--emerald-600); }
.es-wait { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); }
.es-wait::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--brand-100); border-top-color: var(--brand-500); animation: spSpin 700ms linear infinite; }
.es-copy { width: 100%; }
.es-copy.is-done { background: var(--emerald-500); }
.es-safety { display: flex; align-items: flex-start; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--border); background: #ffffff; font-size: 11px; line-height: 1.45; color: var(--text-muted); }
.es-safety svg { flex: none; width: 12px; height: 12px; margin-top: 1px; }

/* ── The rest of the builder: one flat row ── */
.extras {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
  margin-top: clamp(80px, 9vw, 120px);
  padding-top: 48px;
  border-top: 1px solid var(--border);
}
.extras svg { width: 26px; height: 26px; fill: none; stroke: var(--brand-500); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.extras h3 { margin: 14px 0 8px; font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }
.extras p { font-size: 15px; line-height: 1.5; color: var(--text-secondary); }
.extras a { font-weight: var(--font-weight-semibold); color: var(--brand-on-tint); white-space: nowrap; }
.extras a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 980px) {
  .feat, .feat.is-flip { grid-template-columns: 1fr; }
  .feat.is-flip .sim { order: 0; }
  .extras { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .ways { grid-template-columns: 1fr; gap: 36px; }
  .way { padding: 0; }
  .way + .way { border-left: 0; border-top: 1px solid var(--border); padding-top: 36px; }
  .ts-stage { grid-template-columns: 1fr; height: 448px; }
  .ts-panel { border-right: 0; }
  .ts-bay { display: none; }
  .es-stage { grid-template-columns: 1fr; grid-template-rows: 300px auto; height: auto; }
  .es-panel { border-left: 0; border-top: 1px solid var(--border); }
  .es-form { top: 10px; left: 10px; right: 10px; }
  /* Room for the description and the buttons: the title field goes. */
  .es-form-body > :nth-child(-n+2) { display: none; }
  .es-area { min-height: 72px; }
  .es-text { min-height: 0; }
}
@media (max-width: 520px) {
  .extras { grid-template-columns: 1fr; }
}
/* Hover is a pointer affordance; on touch it sticks after a tap and reads
   as pressed. */
@media (hover: hover) {
  .ts-open:hover, .ts-apply:hover:not(:disabled), .es-copy:not(.is-done):hover { background: var(--brand-600); }
  .ts-x:hover { background: rgba(var(--ink-rgb), 0.1); }
}
/* The global focus ring is a box-shadow, which these buttons already use for
   their own rings, so they get an outline instead. */
.sim button:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .is-cue { animation: none; box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.55); }
}

/* ── The builder's panels, drawn ─────────────────────────────────────────
   The Match panel in the tailoring demo (#match) is the real builder panel
   rebuilt in HTML from src/builder/components/LeftSidebar/panels/
   MatchPanel.jsx — same headings, same order, same labels — with the "Alex
   Mercer" demo data. The builder draws every panel the same way (apple-design
   skill): a heading over one rounded list with hairlines, and orange only on
   what is switched on. */
.bp {
  width: 100%;
  min-width: 360px;
  min-height: 100%;
  background: #ffffff;
  border-top-left-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px rgba(var(--ink-rgb), 0.08), 0 22px 44px -20px rgba(var(--ink-rgb), 0.3);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--text);
  user-select: none;
  -webkit-user-select: none;
}
.bp svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bp button { font: inherit; letter-spacing: inherit; }

.bp-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--border-soft); }
.bp-head h4 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.bp-head p { margin-top: 6px; color: var(--text-muted); font-size: 12.5px; line-height: 1.45; }

.bp-body { padding: 16px 16px 28px; display: grid; gap: 18px; align-content: start; }

/* A heading over one rounded list: the unit every panel is built from. */
.bp-set { display: grid; gap: 8px; min-width: 0; }
.bp-set-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 4px; }
.bp-set-head b { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: -0.005em; }
.bp-set-head span { min-width: 0; font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-list { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 10px; background: #ffffff; }
.bp-list > * { position: relative; padding: 11px 12px; }
.bp-list > * + *::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--hair, 12px);
  right: 0;
  height: 1px;
  background: var(--border-soft);
}
.bp-list > :first-child { border-radius: 9px 9px 0 0; }
.bp-list > :last-child { border-radius: 0 0 9px 9px; }
.bp-list > :only-child { border-radius: 9px; }
/* Grey, round, white initials — the way Contacts draws a person. */
.bp-mono {
  width: 34px;
  height: 34px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, #BFB7AF 0%, #A39A92 100%);
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.bp-mono.is-sq { border-radius: 9px; }

/* Match: AI reads the posting, then checks the résumé against it. */
.bp-fit { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--border); border-radius: 10px; }
.bp-fit-top { position: relative; display: flex; align-items: center; gap: 14px; }
.bp-fit-top > div { flex: 1; min-width: 0; }
.bp-fit-top b { display: block; font-size: 13.5px; font-weight: 600; }
.bp-fit-top p { margin-top: 3px; font-size: 11.5px; line-height: 1.45; color: var(--text-muted); }
.bp-ring { width: 64px; height: 64px; flex: none; transform: rotate(-90deg); }
.bp-ring circle { fill: none; stroke: rgba(var(--ink-rgb), 0.07); stroke-width: 6.5; }
.bp-ring .arc { stroke: var(--gold-500); stroke-linecap: round; stroke-dasharray: 0 100; }
.bp-ring-val {
  position: absolute;
  left: 0; top: 50%;
  width: 64px;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bp-ring-val small { font-size: 10px; font-weight: 600; color: var(--text-subtle); }
.bp-fit-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--text-muted); }
.bp-fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.bp-fchips span { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--app-ground); font-size: 11.5px; line-height: 1.4; color: var(--text-muted); }
.bp-fchips span.is-on { color: var(--emerald-600); background: var(--emerald-50); }
.bp-fchips svg { width: 10px; height: 10px; stroke-width: 3; }

/* =============================================================================
   Template Gallery (#templates)
   ============================================================================= */

@property --fade-l { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --fade-r { syntax: '<length>'; inherits: false; initial-value: 0px; }

.tpl-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 36px;
}

.tpl-filters-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tpl-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  font-size: var(--text-body-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-secondary);
  background: var(--surface);
  border-radius: var(--radius-tags);
  box-shadow: var(--ring);
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.tpl-filter-btn:hover {
  color: var(--text);
  box-shadow: var(--ring-strong);
}
.tpl-filter-btn.is-active {
  background: var(--ink);
  color: var(--on-ink);
  box-shadow: none;
}

.tpl-filter-n {
  font-variant-numeric: tabular-nums;
  font-size: var(--text-caption, 12px);
  font-weight: var(--font-weight-semibold, 600);
  padding: 1px 7px;
  border-radius: var(--radius-tags);
  background: rgba(var(--ink-rgb), 0.06);
  color: var(--text-muted);
}
.tpl-filter-btn.is-active .tpl-filter-n {
  background: rgba(255, 255, 255, 0.14);
  color: var(--on-ink-2);
}

.tpl-arrows { display: flex; gap: 8px; flex: 0 0 auto; }

.tpl-arrow {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tags);
  background: var(--surface);
  box-shadow: var(--ring);
  color: var(--text-secondary);
  transition: color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast);
}
.tpl-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tpl-arrow:hover { color: var(--text); box-shadow: var(--ring-strong); }
.tpl-arrow[disabled] { opacity: 0.32; pointer-events: none; }

.tpl-rail {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  padding-inline: max(var(--pad-x), calc((100% - var(--page-max-width, 1200px)) / 2 + var(--pad-x)));
  scroll-padding-inline: max(var(--pad-x), calc((100% - var(--page-max-width, 1200px)) / 2 + var(--pad-x)));
  padding-block: 10px 8px;
  scrollbar-width: none;

  --fade-l: 0px;
  --fade-r: 56px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
  transition: --fade-l var(--t-fast), --fade-r var(--t-fast);
}
.tpl-rail.is-scrolled  { --fade-l: 56px; }
.tpl-rail.is-at-end    { --fade-r: 0px; }
.tpl-rail::-webkit-scrollbar { display: none; }

.tpl-grid {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  width: max-content;
  padding-bottom: 34px;
}

.tpl-card {
  flex: 0 0 auto;
  width: clamp(232px, 21vw, 286px);
  scroll-snap-align: start;
  container-type: inline-size;
}
.tpl-card.is-hidden { display: none; }

.tpl-paper {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 8.5 / 11;
  overflow: hidden;
  background: #ffffff;
  border-radius: var(--radius-md);
  box-shadow: var(--ring), var(--shadow-paper);
  cursor: zoom-in;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.tpl-paper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.tpl-card:hover .tpl-paper,
.tpl-paper:focus-visible {
  transform: translateY(-8px);
  box-shadow: var(--ring), var(--shadow-paper-hi);
}
.tpl-paper:focus-visible { outline: 2px solid var(--brand-500); outline-offset: 3px; }

.tpl-expand {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 30px 0 13px;
  font-family: var(--font-body);
  font-size: var(--text-body-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.01em;
  color: #ffffff;
  background: linear-gradient(to top, rgba(var(--ink-rgb), 0.82), rgba(var(--ink-rgb), 0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--t-base), transform var(--t-base);
}
.tpl-expand svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tpl-card:hover .tpl-expand,
.tpl-paper:focus-visible .tpl-expand { opacity: 1; transform: none; }

.tpl-meta { margin-top: 16px; }

.tpl-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.tpl-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: var(--text-subheading, 18px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--tracking-subheading);
  color: var(--text);
  white-space: nowrap;
}

.tpl-dot {
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--a, #000);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}

.tpl-spec {
  font-size: var(--text-caption, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-subtle);
  text-align: right;
  white-space: nowrap;
}

.tpl-desc {
  margin-top: 6px;
  font-size: var(--text-body-sm, 14px);
  line-height: var(--leading-body-sm, 1.44);
  color: var(--text-muted);
}

@container (max-width: 272px) {
  .tpl-meta-row { flex-direction: column; align-items: flex-start; gap: 3px; }
  .tpl-spec { text-align: left; white-space: normal; padding-left: 17px; }
}

.tpl-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 11px;
}

.tpl-swatch {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.16);
}
.tpl-swatch.is-identity {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px var(--surface-sunken), 0 0 0 3px rgba(var(--ink-rgb), 0.28);
}

.tpl-empty {
  text-align: center;
  color: var(--text-muted);
  font-size: 17px;
  padding-block: 40px;
}

.tpl-foot {
  max-width: 640px;
  margin: 8px auto 0;
  text-align: center;
  font-size: var(--text-body-sm, 14px);
  line-height: var(--leading-body-sm, 1.44);
  color: var(--text-muted);
}

.tpl-lb {
  overscroll-behavior: contain;
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
}
.tpl-lb[hidden] { display: none; }

.tpl-lb-scrim {
  position: absolute;
  inset: 0;
  background: rgba(var(--ink-rgb), 0.86);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: lbFade var(--t-base) both;
}

.tpl-lb-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  width: min(1080px, 100%);
  max-height: 100%;
  animation: lbRise var(--t-slow) both;
}

@keyframes lbFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbRise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

.tpl-lb-sheet {
  position: relative;
  justify-self: end;
  height: min(84vh, 880px);
  aspect-ratio: 8.5 / 11;
  max-width: 100%;
  background: #ffffff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(0, 0, 0, 0.55);
}
.tpl-lb-sheet img { width: 100%; height: 100%; object-fit: contain; }
.tpl-lb-sheet img[hidden] { display: none; }

.tpl-lb-side { color: var(--on-ink); align-self: center; }

.tpl-lb-eyebrow {
  font-size: var(--text-caption, 12px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--brand-on-ink);
}
.tpl-lb-eyebrow span { color: var(--on-ink-muted); font-variant-numeric: tabular-nums; }

.tpl-lb-side h3 {
  margin-top: 8px;
  font-size: var(--text-heading-sm, 24px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--on-ink);
}

.tpl-lb-spec {
  margin-top: 4px;
  font-size: var(--text-body-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--on-ink-muted);
}

.tpl-lb-desc {
  margin-top: 14px;
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-medium, 500);
  color: var(--on-ink-2);
}

.tpl-lb-accents { margin-top: 22px; }
.tpl-lb-label {
  font-size: var(--text-caption, 12px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--on-ink-subtle);
  margin-bottom: 9px;
}

.tpl-lb-accents .tpl-swatches {
  width: fit-content;
  align-items: center;
  gap: 8px;
  margin-top: 0;
  padding: 9px 12px;
  border-radius: var(--radius-tags);
  background: rgba(255, 255, 255, 0.94);
}
.tpl-lb-label span {
  color: var(--on-ink-muted);
  letter-spacing: 0.04em;
}

.tpl-lb-accents .tpl-swatch {
  position: relative;
  width: 19px;
  height: 19px;
  padding: 0;
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.18);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.tpl-lb-accents .tpl-swatch:hover { transform: scale(1.14); }
.tpl-lb-accents .tpl-swatch:focus-visible,
.tpl-lb-accents .tpl-swatch-custom:focus-within {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
}
.tpl-lb-accents .tpl-swatch[aria-pressed="true"],
.tpl-lb-accents .tpl-swatch-custom.is-on {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 2px #fff, 0 0 0 3.5px rgba(var(--ink-rgb), 0.7);
}

.tpl-lb-accents .tpl-swatch.is-identity::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(to bottom right,
    transparent calc(50% - 1px), #fff calc(50% - 1px),
    #fff calc(50% + 1px), transparent calc(50% + 1px));
}
.tpl-lb-accents .tpl-swatch-custom {
  cursor: pointer;
  background: conic-gradient(#E11D48, #F59E0B, #16A34A, #0EA5E9, #7C3AED, #E11D48);
}
.tpl-lb-accents .tpl-swatch-custom.is-on { background: var(--c); }
.tpl-lb-accents .tpl-swatch-custom input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.tpl-lb-accents .tpl-swatches.is-off { opacity: 0.45; }
.tpl-lb-accents .is-off .tpl-swatch { cursor: not-allowed; transform: none; }

.tpl-lb-vector { position: absolute; inset: 0; }
.tpl-lb-vector[hidden] { display: none; }
.tpl-lb-vector svg { width: 100%; height: 100%; }
.tpl-lb-vector .ac { fill: var(--tpl-ac); }
.tpl-lb-vector .hf { fill: var(--tpl-hf); }
.tpl-lb-vector .rf { fill: var(--tpl-rf); }

.tpl-lb-side .btn { margin-top: 24px; }

.tpl-lb-nav {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}
.tpl-lb-step {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  font-size: var(--text-body-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  border-radius: var(--radius-tags);
  color: var(--on-ink-2);
  box-shadow: var(--ring-ink);
  transition: color var(--t-fast), background var(--t-fast);
}
.tpl-lb-step:hover { color: #fff; background: rgba(255, 255, 255, 0.09); }
.tpl-lb-step svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.tpl-lb-x {
  position: absolute;
  top: -14px;
  right: -6px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-tags);
  color: var(--on-ink-2);
  box-shadow: var(--ring-ink);
  background: rgba(255, 255, 255, 0.06);
  transition: color var(--t-fast), background var(--t-fast);
}
.tpl-lb-x:hover { color: #fff; background: rgba(255, 255, 255, 0.16); }
.tpl-lb-x svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (max-width: 900px) {
  .tpl-lb-panel {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    overflow-y: auto;
    gap: 22px;
  }
  .tpl-lb-sheet { justify-self: center; max-height: 52vh; }
  .tpl-lb-x { top: -6px; right: 0; }
  .tpl-bar { flex-direction: column; align-items: stretch; }
  .tpl-filters-nav { justify-content: center; }
  .tpl-arrows { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tpl-rail { scroll-behavior: auto; }
  .tpl-lb-scrim, .tpl-lb-panel { animation: none; }
  .tpl-card:hover .tpl-paper { transform: none; }
}

/* ── How it works (/linkedin-resume-builder) ─────────────────────────────
   One flat column: a number, then the step's own verb as its heading. No
   cards and no "Step 1" labels. */
.how { display: grid; gap: 32px; max-width: 640px; margin-inline: auto; counter-reset: how; }
.how li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 20px; padding-left: 0; counter-increment: how; }
.how li::before {
  content: counter(how);
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-50);
  color: var(--brand-on-tint);
  font-weight: var(--font-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.how h3 { margin: 7px 0 6px; font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); }
.how p { color: var(--text-secondary); }
.how-more { max-width: 640px; margin: 40px auto 0; font-size: 15px; line-height: 1.5; color: var(--text-secondary); text-align: center; text-wrap: pretty; }
.how-more a { font-weight: var(--font-weight-semibold); color: var(--brand-on-tint); }
.how-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================================
   FAQ Accordion (#faq — DESIGN.md 24px Card)
   ============================================================================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 880px;
  margin-inline: auto;
}

.faq-item {
  background: var(--surface);
  border-radius: var(--radius-cards, 24px);
  box-shadow: var(--ring);
  transition: box-shadow var(--t-fast);
}
.faq-item:hover {
  box-shadow: var(--ring-strong);
}
.faq-item[open] {
  box-shadow: var(--ring-brand);
}

.faq-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: var(--card-padding, 24px);
  font-family: var(--font-display);
  font-size: var(--text-subheading, 18px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--tracking-subheading);
  color: var(--text);
  transition: color var(--t-fast);
}
.faq-summary::-webkit-details-marker { display: none; }
.faq-summary:hover { color: var(--brand-600); }

.faq-icon-cross {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-icons, 7px);
  background: var(--surface-inset);
  position: relative;
  flex: none;
  transition: background-color var(--t-base), transform var(--t-base);
}
.faq-icon-cross::before,
.faq-icon-cross::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: transform var(--t-base), opacity var(--t-base);
}
.faq-icon-cross::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq-item[open] .faq-icon-cross {
  background: var(--brand-50);
}
.faq-item[open] .faq-icon-cross::before,
.faq-item[open] .faq-icon-cross::after {
  background: var(--brand-600);
}
.faq-item[open] .faq-icon-cross::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq-answer {
  padding: 0 var(--card-padding, 24px) var(--card-padding, 24px);
}
.faq-answer p {
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-secondary);
}

/* =============================================================================
   Closing CTA (#get) & Dark Footer
   ============================================================================= */

.cta-section {
  padding-block: clamp(80px, 9vw, 116px);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-glow-aurora {
  position: absolute;
  top: -50%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 600px;
  background: radial-gradient(circle, rgba(255, 107, 53, 0.28) 0%, rgba(255, 107, 53, 0.05) 50%, transparent 70%);
  filter: blur(80px);
  pointer-events: none;
}

.cta-content-wrap {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
}

.cta-content-wrap h2 {
  font-size: clamp(1.875rem, 1.4rem + 1.8vw, var(--text-heading-xl));
  line-height: var(--leading-heading-xl);
  letter-spacing: var(--tracking-heading-xl);
  font-weight: var(--font-weight-semibold, 600);
  color: #ffffff;
  margin-bottom: 20px;
}

.cta-content-wrap p {
  font-size: 17px;
  line-height: 1.44;
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-medium, 500);
  color: var(--on-ink-2);
  max-width: 54ch;
  margin-inline: auto;
}

.cta-actions-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 36px 0 0;
}

/* Dark Footer */
.foot {
  background: var(--ink-deep);
  border-top: 1px solid var(--ink-border);
  color: var(--on-ink-2);
  padding-top: var(--section-gap, 80px);
}

.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr);
  gap: 48px;
  padding-bottom: 56px;
}

.foot-brand p {
  margin-top: 16px;
  font-size: var(--text-body-sm, 14px);
  line-height: var(--leading-body-sm, 1.44);
  font-weight: var(--font-weight-medium, 500);
  color: var(--on-ink-muted);
  max-width: 32ch;
}

.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

.foot-cols h4 {
  font-family: var(--font-display);
  font-size: var(--text-caption, 12px);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--on-ink-muted);
  margin-bottom: 16px;
}

.foot-cols a {
  display: block;
  font-size: var(--text-body-sm, 14px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--on-ink-2);
  padding: 6px 0;
  transition: color var(--t-fast);
}
.foot-cols a:hover {
  color: var(--brand-400);
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
  justify-content: space-between;
  align-items: center;
  padding-block: 24px;
  border-top: 1px solid var(--ink-border-soft);
  font-size: var(--text-caption, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--on-ink-muted);
}

/* =============================================================================
   Sticky Install Dock
   ============================================================================= */

.dock {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 20px rgba(var(--ink-rgb), 0.10);
  transform: translateY(120%);
  transition: transform 400ms var(--ease-spring);
}
.dock.is-up { transform: translateY(0); }

.dock-in {
  display: flex;
  align-items: center;
  gap: 16px;
}

.dock-mark {
  width: 28px;
  height: 28px;
  flex: none;
  object-fit: contain;
}

.dock-copy {
  flex: 1;
}
.dock-copy b {
  display: block;
  font-size: var(--text-body-sm, 14px);
  font-weight: var(--font-weight-semibold, 600);
  color: var(--text);
}
.dock-copy span {
  font-size: var(--text-caption, 12px);
  font-weight: var(--font-weight-medium, 500);
  color: var(--text-muted);
}

.dock-close-btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-icons, 7px);
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast), transform var(--t-press);
}
.dock-close-btn:hover {
  background: var(--surface-inset);
  color: var(--text);
}
.dock-close-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 2;
}

/* =============================================================================
   Privacy promises (#privacy)
   ============================================================================= */

/* Three statements down one column, not three cards across: they are
   promises to read, not features to compare. */
.promises { display: grid; }
.promises li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 20px;
  padding: 26px 0;
  border-top: 1px solid var(--border);
}
.promises li:last-child { border-bottom: 1px solid var(--border); }
.promise-ic {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: var(--brand-600);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-100);
}
.promise-ic svg { width: 22px; height: 22px; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.promises h3 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}
.promises p { margin-top: 6px; color: var(--text-secondary); letter-spacing: var(--tracking-body); max-width: 60ch; }

/* =============================================================================
   Pricing (#pricing)
   ============================================================================= */

.plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--spacing-20, 20px);
  align-items: stretch;
  max-width: 1040px;
  margin-inline: auto;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 24px;
  background: var(--surface);
  border-radius: var(--radius-cards, 24px);
  box-shadow: var(--ring);
}
.plan.is-featured { box-shadow: var(--ring-brand), inset 0 0 0 2px rgba(255, 107, 53, 0.18); }
.plan-flag {
  position: absolute;
  top: -12px;
  left: 24px;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-caption);
  color: var(--brand-800);
  background: var(--brand-50);
  box-shadow: inset 0 0 0 1px var(--brand-200);
  padding: 4px 12px;
  border-radius: var(--radius-pill);
}
.plan-name {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
}
.plan-price { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.plan-price b {
  font-variant-numeric: tabular-nums;
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 1;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.plan-price span { font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--text-muted); }
/* One line under each plan's button, so the three buttons line up. Plus
   leads with its monthly price, the one people compare, and its weekly and
   three-month prices go here. */
.plan-other { margin-top: 10px; text-align: center; font-size: var(--text-body-sm); letter-spacing: var(--tracking-body-sm); color: var(--text-secondary); }
.plan-other b { font-weight: 700; color: var(--text); }
.plan-pitch { margin-top: 12px; color: var(--text-secondary); letter-spacing: var(--tracking-body); min-height: 2.9em; }
.plan-list { display: grid; gap: 10px; margin: 20px 0 24px; padding-top: 20px; border-top: 1px solid var(--border-soft); flex: 1; align-content: start; }
.plan-list li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: var(--tracking-body);
  color: var(--text-secondary);
}
.plan-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--brand-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E85D04' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 9px no-repeat;
  box-shadow: inset 0 0 0 1px var(--brand-200);
}
.plan-list li.is-off { color: var(--text-subtle); text-decoration: line-through; text-decoration-color: rgba(var(--ink-rgb), 0.25); }
.plan-list li.is-off::before {
  background: rgba(var(--ink-rgb), 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23857B74' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7 7 17'/%3E%3C/svg%3E") center / 8px no-repeat;
  box-shadow: none;
}
.plan .btn { font-size: 16px; padding: 13px 20px; white-space: normal; text-align: center; }
.plans-note {
  max-width: 640px;
  margin: 28px auto 0;
  text-align: center;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--text-muted);
}

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; max-width: 460px; gap: 28px; }
  .plan-pitch { min-height: 0; }
}

.privacy-more {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: center;
  font-size: var(--text-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--text-muted);
}
.privacy-more a { color: var(--brand-on-tint); font-weight: var(--font-weight-semibold); white-space: nowrap; }

.cta-link { color: var(--on-ink-2); font-weight: var(--font-weight-medium); align-self: center; transition: color var(--t-fast); }
.cta-link:hover { color: #ffffff; }

/* =============================================================================
   Motion & Feedback — apple-design pass
   ============================================================================= */

/* Presses answer on pointer-down (§1). Everything tappable either scales a
   hair or dims; nothing waits for the click. */
.tpl-filter-btn, .tpl-arrow, .tpl-lb-step, .tpl-lb-x, .dock-close-btn,
.faq-summary, .nav-toggle, .tpl-paper, .tpl-lb-accents .tpl-swatch {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.tpl-filter-btn:active, .tpl-arrow:active,
.tpl-lb-step:active, .tpl-lb-x:active, .dock-close-btn:active, .nav-toggle:active { transform: scale(0.96); }
.tpl-filter-btn, .tpl-arrow, .tpl-lb-step, .tpl-lb-x, .dock-close-btn, .nav-toggle {
  transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), opacity var(--t-fast), transform var(--t-press);
}
.tpl-paper:active { transform: translateY(-4px) scale(0.985); transition-duration: 110ms; }
.faq-summary:active { opacity: 0.7; }

/* FAQ answers open and close rather than popping. Progressive: browsers
   without ::details-content simply toggle, as before. */
@supports selector(::details-content) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 320ms var(--ease-spring), content-visibility 320ms allow-discrete;
  }
  .faq-item[open]::details-content { block-size: auto; }
}

/* The install bar is chrome over content — the same material as the nav, with
   the light-catching top edge instead of a gray rule. */
.dock {
  background: rgba(254, 252, 249, 0.74);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 -1px 0 rgba(var(--ink-rgb), 0.06), 0 -10px 30px -12px rgba(var(--ink-rgb), 0.18);
}
.dock-mark { width: 24px; height: 29px; }

/* ── The template viewer ───────────────────────────────────────────────────
   Opening and closing are driven by springs in main.js, not by keyframes: the
   sheet grows out of the card you clicked and goes back into it (§7), a close
   can be interrupted by reopening, and on touch the sheet can be swiped
   sideways to the next template or pulled down to dismiss, with the release
   velocity carried into the animation (§5–§6). */
.tpl-lb-scrim, .tpl-lb-panel { animation: none; }
.tpl-lb-scrim { opacity: 0; }
.tpl-lb-sheet {
  touch-action: none;
  transform-origin: 50% 50%;
  will-change: transform;
  cursor: grab;
}
.tpl-lb.is-dragging .tpl-lb-sheet { cursor: grabbing; }
.tpl-lb-side { will-change: opacity, transform; }
.tpl-paper.is-source { opacity: 0; transition: none; }
.tpl-lb-hint {
  display: none;
  margin-top: 14px;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--on-ink-muted);
}
@media (pointer: coarse) { .tpl-lb-hint { display: block; } }

/* Hover is a pointer affordance. On touch it sticks after a tap and makes a
   card look selected, so it is only applied where hover exists. */
@media (max-width: 900px) {
  /* On a phone the close button lands over the white sheet, where a light
     glyph on a clear chip disappears. A solid dark chip reads on both. */
  .tpl-lb-x { z-index: 2; top: 6px; right: 6px; color: #ffffff; background: rgba(18, 11, 6, 0.72); box-shadow: none; }
}

@media (max-width: 680px) {
  /* Two lines of copy beside a full-size button crushed the copy into a
     one-word column. On a phone the bar is the button. */
  .dock-copy { display: none; }
  .dock-in .btn { flex: 1; }
}

@media (hover: none) {
  .tpl-card:hover .tpl-paper { transform: none; box-shadow: var(--ring), var(--shadow-paper); }
  .tpl-card:hover .tpl-expand { opacity: 0; transform: translateY(6px); }
  .btn-primary:hover { background: var(--brand-500); box-shadow: var(--shadow-glow); }
}

/* =============================================================================
   Responsive Breakpoints
   ============================================================================= */

@media (min-width: 901px) {
  .nav-drawer { display: none !important; }
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle { display: grid; }
  .foot-in { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .foot-cols { grid-template-columns: 1fr; }
  .dock-copy span { display: none; }
}

/* =============================================================================
   Scroll Reveal Animations
   ============================================================================= */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--ease-spring), transform 600ms var(--ease-spring);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
.reveal[data-d="1"] { --d: 1; }
.reveal[data-d="2"] { --d: 2; }
.reveal[data-d="3"] { --d: 3; }
.reveal[data-d="4"] { --d: 4; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* =============================================================================
   Legal / Document Pages (privacy.html)
   ============================================================================= */

.doc { padding-block: clamp(48px, 6vw, 80px) var(--section-gap, 80px); }
.doc-head { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.doc-head h1 { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: var(--tracking-heading); }
.doc-head p { margin-top: 12px; color: var(--text-muted); font-size: var(--text-body-sm, 14px); }
.doc h2 { font-size: var(--text-heading-sm, 24px); font-weight: var(--font-weight-semibold, 600); letter-spacing: var(--tracking-heading-sm); margin: 44px 0 14px; }
.doc h3 { font-size: var(--text-subheading, 18px); font-weight: var(--font-weight-semibold, 600); letter-spacing: var(--tracking-subheading); margin: 24px 0 8px; }
.doc p, .doc li { color: var(--text-secondary); font-size: 17px; line-height: 1.44; font-weight: var(--font-weight-medium, 500); }
.doc p + p { margin-top: 14px; }
.doc ul { margin: 14px 0; display: grid; gap: 10px; }
.doc ol { margin: 14px 0; padding-left: 22px; display: grid; gap: 10px; list-style: decimal; }
.doc ol li::marker { color: var(--brand-on-tint); font-weight: var(--font-weight-semibold, 600); }
.doc ul li { position: relative; padding-left: 22px; }
.doc ul li::before {
  content: "";
  position: absolute;
  left: 4px; top: 0.55em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-500);
}
.doc strong { color: var(--text); font-weight: var(--font-weight-semibold, 600); }
.callout {
  margin: 28px 0;
  padding: 20px 24px;
  background: var(--brand-50);
  border: 1px solid var(--brand-200);
  border-left: 4px solid var(--brand-500);
  border-radius: var(--radius-cards, 24px);
}
.callout p { color: var(--brand-900); font-size: 17px; line-height: 1.44; }
.callout ul { margin-bottom: 0; }
.callout li { color: var(--brand-900); }
.doc-link { color: var(--brand-on-tint); font-weight: var(--font-weight-semibold, 600); text-decoration: underline; text-decoration-color: var(--brand-200); text-underline-offset: 3px; }
.doc-link:hover { text-decoration-color: currentColor; }
.doc-fine { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text-muted) !important; font-size: var(--text-body-sm) !important; }
.doc-table-wrap { margin: 16px 0; overflow-x: auto; border-radius: var(--radius-lg); box-shadow: var(--ring); }
.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.doc-table th, .doc-table td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--border-soft); color: var(--text-secondary); }
.doc-table th { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); text-transform: uppercase; color: var(--text-muted); background: var(--surface-sunken); }
.doc-table tr:last-child td { border-bottom: 0; }
.doc-table td:first-child { width: 58%; color: var(--text); }

/* ── Blog (/blog/) ─────────────────────────────────────────────────────────
   Posts reuse the legal pages' reading column (.doc). What is added: the
   crumb back to the index, a figure, one call to action at the end, and the
   index's list, which is one flat column of links rather than cards. */
.post-crumb { margin: 0 0 14px !important; font-size: var(--text-body-sm) !important; }
.post-crumb a { color: var(--brand-on-tint); font-weight: var(--font-weight-semibold); }
.post-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-figure { margin: 32px auto; max-width: 360px; }
.post-figure img { width: 100%; height: auto; box-shadow: var(--ring), var(--shadow-paper); }
.post-figure figcaption { margin-top: 12px; text-align: center; font-size: var(--text-body-sm); color: var(--text-muted); }
.post-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  margin-top: 48px;
  padding: 24px 0;
  border-block: 1px solid var(--border);
}
.post-cta p { margin: 0; max-width: 46ch; }
.post-list { display: grid; }
.post-list li + li { border-top: 1px solid var(--border); }
.post-list a { display: block; padding: 24px 0; }
.post-list h2 { margin: 0 0 8px; transition: color var(--t-fast); }
.post-list a:hover h2 { color: var(--brand-on-tint); }
.post-list p { margin: 0 0 10px; }
.post-list time { font-size: var(--text-body-sm); color: var(--text-muted); }
.post-list li::before { content: none; }
.post-list li { padding-left: 0; }
.nav-links a[aria-current="page"] { color: var(--text); }

/* =============================================================================
   Accessibility Preferences — reduced motion, transparency and more contrast
   (apple-design §14). Reduced motion keeps its own global switch above; these
   add the gentler equivalents rather than removing feedback outright.
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .btn:active, .tpl-paper:active { transform: none; }
  .nav-drawer, .nav-drawer.is-open { transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .nav, .nav.is-stuck, .dock { background: var(--ground); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav { box-shadow: 0 1px 0 var(--border); }
  .tpl-lb-scrim { background: var(--ink-deep); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-drawer { background: var(--surface); }
}

@media (prefers-contrast: more) {
  :root {
    --text-secondary: rgba(var(--ink-rgb), 0.9);
    --text-muted: rgba(var(--ink-rgb), 0.78);
    --text-subtle: rgba(var(--ink-rgb), 0.66);
    --ring: inset 0 0 0 1px rgba(var(--ink-rgb), 0.38);
    --ring-strong: inset 0 0 0 1px rgba(var(--ink-rgb), 0.6);
    --border: rgba(var(--ink-rgb), 0.38);
  }
  .nav, .nav.is-stuck, .dock { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 1px 0 rgba(var(--ink-rgb), 0.5); }
  .dock { box-shadow: 0 -1px 0 rgba(var(--ink-rgb), 0.5); }
}

/* ── "It's free", under Build in your browser ─────────────────────────────
   A note hung off the button rather than a line of its own: it answers the
   one question the button raises. It arrives after the hero has, with a
   small spring. */
.free-note-wrap {
  position: relative;
  display: inline-flex;
}

.free-note {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--brand-50);
  box-shadow: var(--ring-brand);
  color: var(--brand-800);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--tracking-body-sm);
  pointer-events: none;
}

/* The tail, pointing up at the button. */
.free-note::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  translate: -50% 0;
  rotate: 45deg;
  background: var(--brand-50);
  box-shadow: -1px -1px 0 0 rgba(255, 107, 53, 0.35);
}

.reveal:not(.is-in) .free-note { opacity: 0; transform: translateY(-6px) scale(0.92); }
.reveal.is-in .free-note {
  transition: opacity 500ms var(--ease-spring) 700ms, transform 700ms var(--ease-spring) 700ms;
}

/* Room for the note under the buttons. */
.hero-actions:has(.free-note) { margin-bottom: 66px; }

/* ── Welcome: the page the extension opens once, on install ──────────────── */
.doc-head .welcome-lede { font-size: 17px; color: var(--text-secondary); margin-top: 8px; }
.welcome-steps { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-direction: column; gap: 28px; }
.welcome-step { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; }
.welcome-step h2 { margin: 4px 0 6px; font-size: 20px; }
.welcome-step p { margin: 0 0 12px; color: var(--text-secondary); }
.welcome-num {
  display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-50); box-shadow: var(--ring-brand);
  color: var(--brand-700); font-weight: var(--font-weight-semibold);
}
.welcome-note { font-size: var(--text-body-sm); }

/* A drawing of Chrome's toolbar: an address bar, the puzzle piece, and the
   menu it opens with Presr's pin. */
.welcome-toolbar {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  max-width: 440px; height: 44px; padding: 0 12px; margin-bottom: 64px;
  border-radius: 12px; background: var(--surface-inset);
}
.wt-address { flex: 1; height: 26px; border-radius: 13px; background: var(--surface); }
.wt-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }
.wt-icon svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; }
.wt-puzzle { background: var(--brand-100); box-shadow: 0 0 0 2px var(--brand-500); }
.wt-menu {
  position: absolute; right: 8px; top: 48px;
  width: 190px; padding: 6px; border-radius: 10px;
  background: var(--surface); box-shadow: var(--ring), var(--shadow-xl);
}
.wt-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: var(--surface-sunken); font-size: 14px; }
.wt-row span:nth-child(2) { flex: 1; }
.wt-pin { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; box-shadow: 0 0 0 2px var(--brand-500); }
.wt-pin svg { width: 14px; height: 14px; fill: none; stroke: var(--brand-700); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }

.welcome-alt { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--border); }
.welcome-alt h2 { font-size: 20px; margin: 0 0 6px; }
.welcome-alt p { color: var(--text-secondary); }
.welcome-alt-links { display: flex; flex-wrap: wrap; gap: 10px; }