/* Not Yet: Checkout Blocker — website
   =====================================
   Same section layout and class structure as the AvClock website
   (nav / hero / feature-grid / faq / blog-board / footer), reskinned
   for a completely different product and palette: this is the
   extension's own real default "Calm" theme (styles/themes.css in the
   extension repo), a soft warm stone/putty neutral, not a generic
   SaaS gradient and not AvClock's dark instrument-panel look. Radii
   are large and soft (28px / 16px, matching the extension's own
   --nyc-radius tokens) instead of AvClock's sharp 4-8px panel edges,
   since a pause/calm tool should read as soft, not mechanical.
   Deliberately no red/alarm color anywhere -- same rule the extension
   itself follows, see CLAUDE.md "Key lessons." */

:root {
  --bg: #F0EEE9;
  --bg-elevated: #F9F8F5;
  --panel: #F9F8F5;
  --panel-2: #FFFFFF;
  --hairline: #E3E0D8;
  --hairline-strong: #D6D2C6;
  --text-primary: #2E2C28;
  --text-secondary: #6F6C64;
  --text-tertiary: #938F85;
  --accent: #A39B8B;
  --accent-strong: #8C8474;
  --accent-gradient: linear-gradient(135deg, #C9C2B4 0%, #A39B8B 50%, #8C8474 100%);
  --accent-wash: rgba(163, 155, 139, 0.14);
  --gambling: #7C8598;
  --radius-sm: 16px;
  --radius: 28px;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --serif: ui-serif, "New York", Georgia, serif;
  --max-width: 1080px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 0.5em;
  color: var(--text-primary);
}

p { margin: 0 0 1em; color: var(--text-secondary); max-width: 62ch; }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}
img { max-width: 100%; display: block; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

.label-caps {
  font-family: var(--mono);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-strong);
}

/* Nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(240, 238, 233, 0.88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.site-nav .container { display: flex; align-items: center; justify-content: space-between; height: 62px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: var(--text-primary); font-family: var(--serif); }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav-links { display: flex; gap: 26px; align-items: center; }
.nav-links a { color: var(--text-secondary); font-size: 14.5px; font-weight: 600; }
.nav-links a:hover { color: var(--text-primary); text-decoration: none; }

.nav-toggle {
  display: none;
  width: 38px; height: 38px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-toggle span { display: block; width: 17px; height: 2px; background: var(--text-primary); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; }
.site-nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Sections */
section { padding: 84px 0; border-bottom: 1px solid var(--hairline); }
section:last-of-type { border-bottom: none; }
.section-eyebrow { color: var(--accent-strong); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.section-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--accent-strong); display: inline-block; }
.section-head { max-width: 620px; margin-bottom: 44px; }
.section-head h2 { font-size: clamp(26px, 3.6vw, 36px); }
.section-head p { font-size: 17.5px; }

/* ============ HERO — always centered, at every window size, not just
   below the mobile breakpoint. A single centered column (logo, then
   headline, then description, then badges, then the demo card) reads
   better for a calm/pause product than a left-aligned two-column
   layout, and it means there's no separate "desktop version" of the
   centering to keep in sync with the mobile one. ============ */
.hero { padding-top: 60px; padding-bottom: 60px; }
.hero-grid { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero-icon { margin-bottom: 30px; }
.hero-icon img {
  width: 168px; height: 168px;
  border-radius: 40px;
  box-shadow: 0 24px 60px -18px rgba(140, 132, 116, 0.45), 0 0 0 1px var(--hairline-strong);
}
.hero .label-caps { margin-bottom: 16px; justify-content: center; }
/* margin-left/right:auto is load-bearing, not decorative -- max-width
   narrows the h1's own box below its centered flex-item parent's
   width, and text-align:center alone only centers the TEXT LINES
   inside that box, not the box itself. Without auto margins here the
   box stays flush against its parent's left edge (confirmed via a
   real bounding-box measurement: the h1's left edge exactly matched
   its parent's, off-center by over 200px on a 1400px-wide screen)
   even though every line of text inside it looked internally
   centered. .subhead already had this right below; h1 didn't. */
.hero h1 { font-size: clamp(32px, 4.4vw, 48px); max-width: 15ch; margin-left: auto; margin-right: auto; }
.hero .subhead { font-size: 19px; max-width: 48ch; margin: 0 auto 30px; color: var(--text-secondary); }
.badge-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 8px; }

.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--text-primary);
  color: var(--bg-elevated);
  font-weight: 700; font-size: 14.5px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.store-badge:hover { transform: translateY(-1px); opacity: 0.88; text-decoration: none; }
.store-badge.secondary { background: transparent; color: var(--text-primary); border: 1px solid var(--hairline-strong); }
.store-badge svg { width: 17px; height: 17px; }

/* ============ Mock store frame — a real, honest illustration of the
   actual mechanism, not stock art or a real screenshot this
   environment can't produce. Ported from the extension's own "See it
   in action" demo (onboarding.js's wireCheckoutDemo()): a fake store
   page, a real Not Yet on/off toggle, and a paused/success view swap,
   restyled in the site's own calm palette instead of the extension's
   literal overlay.css classes. One card, three interchangeable inner
   views (.mock-store-page/.mock-pause-view/.mock-success-view),
   swapped via [hidden] by js/hero-demo.js -- only one is ever visible
   at a time, so there's no layered-overlay z-index bookkeeping to get
   wrong. ============ */
.mock-frame {
  margin: 46px auto 0;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  background: var(--panel-2);
  box-shadow: 0 30px 70px -30px rgba(46, 44, 40, 0.22);
  max-width: 420px;
  text-align: left;
  overflow: hidden;
}
.mock-chrome { display: flex; align-items: center; gap: 5px; padding: 14px 20px; background: var(--bg); border-bottom: 1px solid var(--hairline); }
.mock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hairline-strong); flex-shrink: 0; }
.mock-url { margin-left: 8px; font-family: var(--mono); font-size: 11.5px; color: var(--text-tertiary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mock-toggle { display: flex; gap: 6px; padding: 20px 20px 0; }
.mock-toggle-btn {
  flex: 1;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); padding: 8px 10px;
  cursor: pointer;
}
.mock-toggle-btn.active { color: #fff; background: var(--accent-gradient); border-color: transparent; }
.mock-toggle-hint { padding: 0 20px; font-size: 12.5px; color: var(--text-tertiary); margin: 10px 0 0; }

.mock-store-page { padding: 20px; }
.mock-store-name { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 14px; }
/* Fake placeholder text, not just a blank bar -- an empty box here
   read as a broken button rather than a decorative form field. */
.mock-store-field { display: flex; align-items: center; height: 34px; padding: 0 12px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--hairline-strong); margin-bottom: 8px; font-size: 13px; color: var(--text-tertiary); }
.mock-store-order { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.mock-store-row { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--text-secondary); padding: 4px 0; }
.mock-store-order .mock-btn { margin-top: 14px; }
.mock-wallet-label { font-size: 12px; color: var(--text-tertiary); text-align: center; margin: 14px 0 8px; }
/* display:none as the default, grid only when :not([hidden]) -- same
   [hidden]-vs-author-rule cascade footgun as .mock-wallet-shield
   above, hit for real here on the first render check: an unconditional
   display:grid here beat the UA [hidden]{display:none} rule, so this
   row and the shield banner both showed at once instead of swapping. */
.mock-wallet-row { display: none; grid-template-columns: 1fr 1fr; gap: 8px; }
.mock-wallet-row:not([hidden]) { display: grid; }
.mock-wallet-btn { font-family: var(--sans); font-size: 13px; font-weight: 600; color: var(--text-secondary); background: var(--bg-elevated); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); padding: 10px; cursor: pointer; }
/* Only shown while the toggle is on -- swaps in for the two wallet
   buttons above rather than layering on top of them, same "one thing
   visible at a time" rule as the three main views. Mirrors the real
   buy-button shield's own click-to-continue behavior. */
.mock-wallet-shield {
  width: 100%;
  /* [hidden] alone isn't enough here: the UA stylesheet's [hidden] {
     display:none } rule loses to an equally-specific author rule that
     sets display, so an unconditional display:flex on this class
     would win and defeat the hidden attribute when JS toggles it. */
  display: none;
  align-items: center; justify-content: center; gap: 8px;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--accent-strong);
  background: var(--accent-wash); border: 1px dashed var(--accent);
  border-radius: var(--radius-sm); padding: 10px;
  cursor: pointer;
}
.mock-wallet-shield:not([hidden]) { display: flex; }

.mock-pause-view { padding: 20px; }
.mock-pause-view .mock-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 16px; }
.mock-pause-view h3 { font-size: 20px; margin-bottom: 8px; }
.mock-pause-view p { font-size: 14.5px; margin-bottom: 20px; }

.mock-success-view { padding: 40px 24px; text-align: center; }
.mock-success-check { width: 46px; height: 46px; margin: 0 auto 16px; border-radius: 50%; background: var(--accent-gradient); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; }
.mock-success-title { font-family: var(--serif); font-size: 19px; color: var(--text-primary); margin-bottom: 4px; }
.mock-success-method { font-size: 13.5px; color: var(--text-secondary); min-height: 1.4em; margin-bottom: 8px; }
.mock-success-note { font-size: 12.5px; color: var(--text-tertiary); margin-bottom: 22px; }
.mock-success-view .mock-btn { display: inline-block; width: auto; padding: 10px 20px; }

/* Tabs -- one real unlock-method demo each, matching content.js's
   setupCode()/setupReflect()/setupWait(). Plain buttons, not an
   actual ARIA tabpanel focus-management implementation (marketing
   page, not the app itself), but role/aria-selected are still set so
   it reads sensibly to assistive tech either way. */
.mock-tabs { display: flex; gap: 6px; margin-bottom: 22px; }
.mock-tab {
  flex: 1;
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); padding: 8px 10px;
  cursor: pointer;
}
.mock-tab.active { color: #fff; background: var(--accent-gradient); border-color: transparent; }
.mock-panel[hidden] { display: none; }

.mock-code {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg);
  border: 1px dashed var(--hairline-strong);
  color: var(--text-primary);
  margin-bottom: 14px;
  word-break: break-all;
}
/* Matched-so-far prefix bolds and darkens as you type, exactly like
   the real block screen's own code display -- the rest stays muted.
   Rendered by js/hero-demo.js. */
.mock-code .matched { font-weight: 800; color: var(--text-primary); }
.mock-code .pending { font-weight: 400; color: var(--text-tertiary); opacity: 0.55; }
.mock-code.mock-code-complete { border-style: solid; border-color: var(--accent); background: var(--accent-wash); }

.mock-prompt-question { font-family: var(--serif); font-size: 17px; font-weight: 500; letter-spacing: normal; text-align: left; }

.mock-timer-display { font-size: 26px; letter-spacing: 0.04em; }
.mock-timer-track { height: 6px; border-radius: 3px; background: var(--bg); border: 1px solid var(--hairline-strong); overflow: hidden; margin-bottom: 16px; }
.mock-timer-fill { height: 100%; width: 100%; background: var(--accent-gradient); transform-origin: left; transition: transform 1s linear; }

.mock-input {
  width: 100%;
  font-family: var(--mono);
  font-size: 15px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
  margin-bottom: 16px;
}
.mock-input:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.mock-textarea { font-family: var(--sans); resize: none; }
.mock-actions { display: flex; flex-direction: column; gap: 10px; }
/* Applied to a mix of real <button> and plain <div> elements (the
   store buy/reset buttons are real buttons; the pause view's
   continue/calm are too, now converted from the div-styled-as-button
   this started as) -- reset button chrome so both render identically
   regardless of which element carries the class. */
.mock-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 14.5px;
  font-family: var(--sans);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.mock-btn.primary { background: var(--accent-gradient); color: #fff; opacity: 0.55; }
.mock-btn.primary.mock-btn-ready { opacity: 1; }
.mock-btn.calm { color: var(--accent-strong); background: transparent; border: 1px solid var(--hairline-strong); }

/* ============ How it works — numbered steps ============ */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.step { background: var(--panel-2); padding: 26px 24px; }
.step-num { font-family: var(--serif); font-size: 26px; color: var(--accent-strong); margin-bottom: 10px; }
.step h3 { font-size: 16.5px; margin-bottom: 8px; }
.step p { font-size: 14.5px; margin: 0; }

/* ============ Feature cards — replaced an earlier cryptic
   three-letter-tag layout (BLOCK/CAT/GAMB/etc.) borrowed from
   AvClock's aviation-code vernacular, which doesn't mean anything on
   a checkout blocker. Every card now leads with a real short title a
   visitor can read on its own. ============ */
/* Fixed column counts, not auto-fill -- chosen per section so the
   card count always divides evenly and no row ever ends with empty
   trailing grid cells. Free has 9 cards (3x3 exactly); Premium has 8
   (the 8th is the "More on the way" placeholder added specifically so
   7 real cards don't leave a gap in a 4-column row -- 4x2 exactly). */
.feature-cards { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
#free .feature-cards { grid-template-columns: repeat(3, 1fr); }
#premium .feature-cards { grid-template-columns: repeat(4, 1fr); }
.feature-card { background: var(--panel-2); padding: 22px 22px 24px; }
.feature-card h4 { font-size: 15.5px; margin-bottom: 6px; color: var(--text-primary); }
.feature-card p { font-size: 14px; margin: 0; }
.feature-card .badge {
  display: inline-block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--accent-strong);
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  margin-bottom: 10px;
}
.feature-card.premium .badge { color: #8A6D3B; background: rgba(212, 165, 90, 0.14); }
.feature-card.soon { background: var(--bg-elevated); }
.feature-card.soon .badge { color: var(--text-tertiary); background: var(--hairline); }
.feature-card.soon h4 { color: var(--text-secondary); }

/* ============ Quiet Place / pinboard showcase — an honest mock of
   the real corkboard (pinboard.js): CSS "photos" (gradient tiles, no
   stock imagery) pinned at slight angles, not a screenshot. ============ */
.showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.showcase-copy p { font-size: 16px; }
.showcase-feature-list { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.showcase-feature-list li { font-size: 14.5px; color: var(--text-secondary); padding-left: 22px; position: relative; }
.showcase-feature-list li::before { content: "\2022"; color: var(--accent-strong); position: absolute; left: 4px; font-weight: 700; }
.mock-pinboard {
  position: relative;
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(46, 44, 40, 0.22);
  padding: 30px 24px 24px;
}
.mock-pinboard .mock-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 18px; }

/* Draggable board -- position:relative bounding box; each pin is
   positioned absolutely within it via inline left/top percentages, so
   it reflows sanely at any container width without JS having to know
   the width itself. */
.pinboard-surface { position: relative; min-height: 260px; touch-action: none; }
.pin-photo {
  position: absolute;
  width: 92px; height: 110px;
  transform: rotate(var(--pin-rot, 0deg));
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.pin-photo:active,
.pin-photo.dragging { cursor: grabbing; z-index: 30; }
.pin-photo:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 5px; border-radius: 4px; }
.pin-photo-inner {
  box-sizing: border-box;
  width: 100%; height: 100%;
  background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: center;
  border: 6px solid #fff;
  border-radius: 3px;
  box-shadow: 0 8px 18px -6px rgba(46, 44, 40, 0.3);
  transition: border-radius 0.2s ease, border-width 0.2s ease, clip-path 0.2s ease;
}
.pin-photo-inner img { width: 62%; height: 62%; object-fit: contain; }
.pin-photo-inner svg { width: 56%; height: 56%; color: var(--accent-strong); }
.pin-photo::after {
  content: "";
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
  z-index: 1;
}

/* Border style variants -- picked via the .pinboard-border-picker
   buttons below, applied as a class on .pinboard-surface so every pin
   updates together. */
.pinboard-surface.style-rounded .pin-photo-inner { border-width: 4px; border-radius: 16px; }
.pinboard-surface.style-torn .pin-photo-inner {
  border-width: 6px;
  border-color: #fdfaf3;
  border-radius: 0;
  clip-path: polygon(2% 4%, 12% 0%, 30% 3%, 48% 0%, 68% 4%, 84% 1%, 98% 5%, 100% 22%, 97% 45%, 100% 68%, 96% 88%, 100% 98%, 78% 96%, 60% 100%, 40% 97%, 22% 100%, 4% 96%, 0% 76%, 3% 52%, 0% 28%);
}

.pinboard-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.pinboard-border-picker { display: flex; gap: 6px; flex-wrap: wrap; }
.border-swatch {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); padding: 6px 12px;
  cursor: pointer;
}
.border-swatch.active { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-wash); }
.pinboard-reset {
  font-family: var(--sans); font-size: 12.5px; font-weight: 600;
  color: var(--text-tertiary);
  background: none; border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 6px 0;
}
.pinboard-reset:hover { color: var(--text-primary); }

/* Shared pill styling for both the mood check-in and activity rows --
   ported from the extension's own Quiet Place (calm.html/calm.js):
   clicking either shows the same real confirmation copy that page
   uses ("Noted. Thanks for checking in." / "Logged. That'll show up
   in your recap."), not just a silent active-state toggle. */
.mock-pill-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); text-align: center; margin: 22px 0 10px; }
.pinboard-controls + .mock-pill-label { margin-top: 22px; }
.mock-pill-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.mock-pill {
  font-family: var(--sans);
  font-size: 13px; font-weight: 600; color: var(--text-secondary);
  background: var(--bg); border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm); padding: 7px 13px;
  cursor: pointer;
}
.mock-pill.active { color: var(--accent-strong); border-color: var(--accent); background: var(--accent-wash); }
.mock-pill-confirm { min-height: 1.4em; text-align: center; font-size: 12.5px; color: var(--accent-strong); margin: 8px 0 0; }

/* ============ Recap / analytics showcase — a real mock of the recap
   page's stat tiles + trend chart, plain CSS bars, no chart library
   and no fabricated real data. ============ */
.mock-recap {
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgba(46, 44, 40, 0.22);
  padding: 28px 26px;
}
.mock-recap .mock-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 18px; }
.recap-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; }
.recap-stat { text-align: center; }
.recap-stat .num { font-family: var(--serif); font-size: 26px; color: var(--text-primary); }
.recap-stat .lbl { font-size: 11.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.recap-chart { display: flex; align-items: flex-end; gap: 10px; height: 90px; padding: 0 4px; }
.recap-chart .bar { flex: 1; background: var(--accent-gradient); border-radius: 5px 5px 2px 2px; opacity: 0.85; }
.recap-chart .bar.peak { opacity: 1; }
.recap-chart-labels { display: flex; gap: 10px; padding: 0 4px; margin-top: 8px; }
.recap-chart-labels span { flex: 1; text-align: center; font-size: 10.5px; color: var(--text-tertiary); font-family: var(--mono); }

.price-callout {
  margin-top: 36px;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius);
  padding: 13px 22px;
  font-weight: 600;
  color: var(--text-primary);
  font-size: 15px;
}

/* Two column */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; }
.who-card { background: var(--panel-2); padding: 30px; }
.who-card h3 { font-size: 18px; color: var(--accent-strong); letter-spacing: -0.01em; }
.who-card p { margin: 0; }

/* FAQ */
.faq-item { border-bottom: 1px solid var(--hairline); padding: 18px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: 16.5px; list-style: none; display: flex; justify-content: space-between; align-items: center; font-family: var(--serif); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--accent-strong); font-family: var(--mono); font-size: 20px; font-weight: 400; margin-left: 16px; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p { margin-top: 10px; }

/* Footer */
footer { padding: 52px 0 36px; border-top: 1px solid var(--hairline); }
.footer-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--text-secondary); font-size: 13.5px; }
.footer-note { color: var(--text-tertiary); font-size: 12.5px; margin-top: 22px; max-width: 70ch; }

/* Blog listing */
.blog-board { border: 1px solid var(--hairline-strong); border-radius: var(--radius); background: var(--panel-2); overflow: hidden; }
/* Tag column widened from the original 58px (sized for AvClock's
   cryptic 4-letter codes -- CODE/GUARD/CALM/GAMB, which never meant
   anything on a checkout blocker) to fit a real, readable topic word
   or two instead. */
.blog-row { display: grid; grid-template-columns: 118px 1fr 62px; gap: 18px; align-items: center; padding: 20px; border-bottom: 1px solid var(--hairline); color: inherit; }
.blog-row:last-child { border-bottom: none; }
a.blog-row { transition: background 0.15s ease; }
a.blog-row:hover { background: var(--bg); text-decoration: none; }
.blog-row .tag { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 0.01em; color: var(--accent-strong); border: 1px solid rgba(163, 155, 139, 0.4); background: var(--accent-wash); border-radius: var(--radius-sm); padding: 5px 10px; text-align: center; line-height: 1.3; }
.blog-row.stub .tag { color: var(--text-tertiary); border-color: var(--hairline-strong); background: transparent; }
.row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.row-title { color: var(--text-primary); font-weight: 700; font-size: 16.5px; }
a.blog-row:hover .row-title { color: var(--accent-strong); }
.row-excerpt { color: var(--text-secondary); font-size: 14px; }
.row-status { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-align: right; white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-end; gap: 5px; }
.row-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.row-status.live { color: #6E9B6E; }
.row-status.soon { color: var(--text-tertiary); }

.more-posts { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--hairline); }
.more-posts .label-caps { color: var(--text-tertiary); margin-bottom: 14px; }

article.post { max-width: 700px; margin: 0 auto; }
article.post h1 { font-size: clamp(27px, 3.6vw, 38px); margin-bottom: 12px; }
article.post .post-meta { color: var(--text-tertiary); font-family: var(--mono); font-size: 12.5px; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 0.06em; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.share-btn { font-family: var(--mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent-strong); background: var(--accent-wash); border: 1px solid rgba(163, 155, 139, 0.4); border-radius: var(--radius-sm); padding: 5px 10px; cursor: pointer; text-transform: none; }
.share-btn:hover { background: rgba(163, 155, 139, 0.24); }
article.post h2 { font-size: 22px; margin-top: 38px; }
article.post p { font-size: 17px; color: var(--text-secondary); max-width: none; }
article.post .callout { background: var(--panel-2); border: 1px solid var(--hairline); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 18px 20px; margin: 32px 0; }
article.post .callout p { max-width: none; }
article.post .disclaimer { margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--hairline); font-size: 13.5px; color: var(--text-tertiary); }

/* Legal pages */
article.legal { max-width: 740px; margin: 0 auto; }
article.legal h1 { font-size: 30px; }
article.legal .updated { color: var(--text-tertiary); font-family: var(--mono); font-size: 13px; margin-bottom: 38px; }
article.legal h2 { font-size: 18px; margin-top: 34px; color: var(--text-primary); }
article.legal p, article.legal li { font-size: 15.5px; max-width: none; }
article.legal .lede { background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 20px 22px; margin: 0 0 32px; }
article.legal .lede p { margin: 0; }
article.legal ul { padding-left: 22px; }
article.legal li { margin-bottom: 10px; }
article.legal .contact { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline); }

/* ============ Info-button popovers — ported from the extension's own
   Settings page (.nyc-info-wrap/.nyc-info-btn/.nyc-info-popover in
   pages.css, nycWireInfoButtons() in options.js/onboarding.js): a
   tap-to-reveal "i" bubble next to a jargon term, instead of a
   permanently-on-screen explanation paragraph. Click toggles it open
   (only one at a time), and it also opens on hover for anyone with a
   mouse. ============ */
.info-wrap { position: relative; display: inline-flex; vertical-align: middle; margin-left: 6px; }
.info-btn {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: none; color: inherit; opacity: 0.55;
  font-size: 10.5px; font-style: italic; font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  padding: 0;
}
.info-btn:hover, .info-btn:focus-visible { opacity: 1; }
.info-popover {
  display: none;
  position: absolute;
  top: 24px; left: 0;
  z-index: 30;
  width: 280px;
  max-width: min(280px, 80vw);
  background: var(--panel-2);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  font-weight: 400;
  font-family: var(--sans);
  color: var(--text-secondary);
  box-shadow: 0 6px 20px rgba(46, 44, 40, 0.16);
}
.info-wrap-end .info-popover { left: auto; right: 0; }
.info-wrap.info-open .info-popover, .info-wrap:hover .info-popover { display: block; }
@media (max-width: 600px) {
  /* A 280px popover anchored to an "i" button near a phone's right
     edge runs past it -- same real bug the extension's own Settings
     page hit and fixed the same way: pin it to the bottom of the
     screen instead, where it can't overflow anything. */
  .info-popover {
    position: fixed;
    left: 12px; right: 12px; bottom: 12px; top: auto;
    width: auto; max-width: none;
    z-index: 100;
    box-shadow: 0 8px 30px rgba(46, 44, 40, 0.22);
  }
}

/* ============ Rope border — ported from the extension's own shared
   scripts/rope-frame.js + styles/pages.css, used there on onboarding
   and Settings. Used two places on this site: the Setup & Help page
   (below), structurally the same kind of "app-like utility page" the
   extension uses it on, and the homepage's "See it in action" demo
   card, framing the demo itself rather than the hero icon (which
   already carries its own rope-circle artwork -- a second rope frame
   around THAT would read as redundant, the demo card doesn't have
   that problem). Behavior lives in js/rope-frame.js, a near-verbatim
   port since the module was already fully parameterized (SVG ids, no
   extension globals). ============ */
.rope-frame-wrap { position: relative; max-width: 740px; margin: 0 auto; padding: 30px 0; }
/* Narrower than the default 740px: sized for the ~420px hero demo
   card instead of the Setup & Help page's much wider column. Using
   the same wrap/default padding here would frame a wide swath of
   empty hero space around a narrow card instead of the card itself. */
.rope-frame-wrap.hero-demo-frame { max-width: 480px; padding: 24px 0; }
.rope-frame {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
}
.rope-stroke {
  stroke: var(--accent-strong);
  stroke-width: 9;
  stroke-dasharray: 5 0.9;
  opacity: 0.4;
}
@media (max-width: 600px) {
  /* Two rounds of fixing the JS inset math and matching CSS padding
     didn't converge on a real phone for the extension's own version
     of this border either -- same call made there: gone outright on
     phone widths rather than a third blind guess in an environment
     that can't test against a real device. */
  .rope-frame { display: none; }
}

/* ============ Setup & Help page — mirrors the extension's own
   Settings page layout (a single centered column of cards), since
   it's describing that same page to someone who hasn't opened it
   yet. ============ */
.help-page { max-width: 640px; margin: 0 auto; position: relative; }
.help-card { background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px 28px; margin-bottom: 20px; }
.help-card h2 { font-size: 17px; margin-bottom: 10px; }
.help-card > p:first-of-type { margin-top: 0; }
.help-steps { margin: 10px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--text-secondary); }
.help-steps li { margin-bottom: 6px; }
.help-faq-item { border-top: 1px solid var(--hairline); padding: 14px 0 0; margin-top: 14px; }
.help-faq-item:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.help-faq-item summary { cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--text-primary); list-style: none; }
.help-faq-item summary::-webkit-details-marker { display: none; }
.help-faq-item summary::before { content: "+ "; color: var(--accent-strong); font-family: var(--mono); }
.help-faq-item[open] summary::before { content: "\2212 "; }
.help-faq-item .help-faq-body { margin-top: 10px; font-size: 14px; color: var(--text-secondary); }
.help-faq-body p { font-size: 14px; margin: 0 0 10px; }
.help-faq-body p:last-child { margin-bottom: 0; }
.help-report-field { display: block; font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.help-report-input, .help-report-select, .help-report-textarea {
  width: 100%;
  font-family: var(--sans); font-size: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline-strong);
  background: var(--bg-elevated);
  color: var(--text-primary);
}
.help-report-textarea { min-height: 80px; resize: vertical; }
.help-error-text { color: #B5764F; font-size: 12.5px; margin: 8px 0 0; }

/* Responsive */
@media (max-width: 860px) {
  .hero-icon img { width: 128px; height: 128px; }
  .two-col { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .showcase { grid-template-columns: 1fr; }
  .showcase.reverse .showcase-visual { order: -1; }
  .recap-stat-row { grid-template-columns: repeat(3, 1fr); }
  /* Still evenly divided at this width: 9 free cards / 1 column = 9
     clean rows, 8 premium cards / 2 columns = 4 clean rows. Never an
     intermediate 2-column step for the free grid specifically -- 9
     isn't divisible by 2, and that's exactly the gap this whole fix
     exists to avoid. */
  #free .feature-cards { grid-template-columns: 1fr; }
  #premium .feature-cards { grid-template-columns: repeat(2, 1fr); }
  .blog-row { grid-template-columns: 84px 1fr 56px; gap: 12px; }
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(240, 238, 233, 0.98);
    border-bottom: 1px solid var(--hairline);
    padding: 4px 24px 12px;
    max-height: 0; overflow: hidden; opacity: 0; pointer-events: none;
    transition: max-height 0.22s ease, opacity 0.18s ease;
  }
  .nav-links a { padding: 13px 0; border-bottom: 1px solid var(--hairline); }
  .nav-links a:last-child { border-bottom: none; }
  .site-nav.nav-open .nav-links { max-height: 320px; opacity: 1; pointer-events: auto; }
  section { padding: 56px 0; }
}

@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; }
  .blog-row { grid-template-columns: 1fr 56px; }
  .blog-row .tag { grid-column: 1 / -1; justify-self: start; }
}