/* Shared styling for the public marketing pages (landing, signup, login,
   pricing) — same Texas navy/red/gold-on-white tokens as assets/style.css,
   duplicated rather than shared because these pages are served to logged-out
   visitors and shouldn't depend on anything under the authenticated /app tree. */
:root {
  --tx-navy: #0a2955;
  --tx-navy-deep: #071c3d;
  --tx-red: #bf0a30;
  --tx-red-deep: #8f0723;
  --tx-gold: #f2b134;
  --ink: #16213a;
  --ink-soft: #55617a;
  --line: #e3e7ee;
  --card: #ffffff;
  --bg: #f7f8fb;
  --shadow-sm: 0 1px 2px rgba(10, 41, 85, 0.06), 0 1px 1px rgba(10, 41, 85, 0.04);
  --shadow-md: 0 8px 24px rgba(10, 41, 85, 0.10), 0 2px 6px rgba(10, 41, 85, 0.06);
  --shadow-lg: 0 20px 48px rgba(10, 41, 85, 0.16), 0 6px 16px rgba(10, 41, 85, 0.08);
  --radius: 16px;
  --radius-sm: 10px;
}
* { box-sizing: border-box; }
/* Stop iPhones from enlarging text on their own (it distorts the hero
   graphic's small print). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: inherit; }
img { max-width: 100%; }

/* Phones: the page always fits the screen's width and only scrolls
   vertically. "clip" rather than "hidden" so nothing sticky breaks. Form
   fields use 16px text because iPhones zoom the whole page in (and leave it
   scrolling sideways) when you tap a field with smaller text; people can
   still pinch-zoom whenever they like. */
@media (max-width: 760px) {
  html, body { overflow-x: clip; }
  input, select, textarea { font-size: 16px !important; }
}

/* Light background so the logo and wordmark render in their native navy/red
   (matching branding/logo-concepts/brand-logo.jpeg) instead of white-on-navy
   — Texas flag colors are navy, red, and white only, so gold is deliberately
   absent from this section. */
header.site-header {
  background: linear-gradient(120deg, #ffffff 0%, #f4f6fb 100%);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  padding: 0.75px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 0.5px; font-weight: 800; min-width: 0; }
/* .star is now the brand icon image (branding/logo-concepts/brand-logo.jpeg,
   processed into a transparent PNG) rather than a plain "★" character —
   width/height replace the old font-size/color-based star glyph sizing.
   Sized to ~20% taller than the 3-line text block next to it (see
   .brand-star in assets/style.css for the same math) so the icon reads as
   a modest accent rather than dominating the header. */
.brand .star { width: 84px; height: 84px; flex: none; }
.brand-text { min-width: 0; }
/* Same size/weight as the authenticated app's own header (.brand-text
   .title in assets/style.css) — this text is the one place the two header
   designs are asked to actually agree, pixel for pixel, not just look
   similar. Stacked TEXAS / HOTEL TAX / INTELLIGENCE, navy with the middle
   line in red and slightly larger, matching the three-line wordmark in
   branding/logo-concepts/brand-logo.jpeg. */
.brand-text .name { display: flex; flex-direction: column; line-height: 1.08; }
.brand-text .name .line { font-size: 19px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--tx-navy); }
.brand-text .name .line.accent { font-size: 27px; color: var(--tx-red); }
.header-actions { display: flex; gap: 10px; flex: none; }
.header-actions .btn { white-space: nowrap; }
.header-actions .btn-ghost { background: transparent; color: var(--tx-navy); border: 1.5px solid var(--tx-navy); }
.header-actions .btn-ghost:hover { background: var(--tx-navy); color: #fff; }
.stripe { height: 4px; background: linear-gradient(90deg, var(--tx-red) 0%, var(--tx-red) 50%, var(--tx-navy) 50%, var(--tx-navy) 100%); }

/* ---------- Logged-in header state (New Search / Account menu) ----------
   Ported from the authenticated app's own topbar (assets/style.css) — a
   visitor who's already signed in sees the same two controls here as in
   the app itself, instead of Log In/Get Started. Colors are unchanged from
   there since both headers already share the same light navy/red-on-white
   theme. */
.pill-btn {
  border: 1.5px solid var(--tx-navy);
  background: transparent;
  color: var(--tx-navy);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.pill-btn:hover { background: var(--tx-navy); color: #fff; transform: translateY(-1px); }

.account-menu { position: relative; }

.account-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1.5px solid var(--tx-navy);
  background: transparent;
  color: var(--tx-navy);
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.account-trigger:hover, .account-trigger[aria-expanded="true"] { background: var(--tx-navy); color: #fff; }

.account-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--tx-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  flex: none;
  box-shadow: 0 0 0 1.5px #fff;
}

.account-name { font-size: 13.5px; font-weight: 600; max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chevron { flex: none; opacity: 0.8; }

.account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: #fff;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px rgba(7, 28, 61, 0.28);
  padding: 6px;
  z-index: 20;
}

.account-item { display: block; padding: 9px 12px; border-radius: 6px; font-size: 13.5px; font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.account-item:hover { background: #f3f6fb; }
.account-item-danger { color: var(--tx-red); }

.account-divider { height: 1px; background: var(--line); margin: 6px 4px; }

@media (max-width: 680px) {
  .account-name { display: none; }
  .account-trigger { padding: 6px; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 999px; border: none; font-size: 14.5px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.btn-primary { background: linear-gradient(135deg, var(--tx-red) 0%, var(--tx-red-deep) 100%); color: #fff; box-shadow: 0 8px 20px rgba(191,10,48,0.30); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(191,10,48,0.38); }
.btn-ghost { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.3); }
.btn-ghost:hover { background: rgba(255,255,255,0.2); }
.btn-secondary { background: #fff; color: var(--tx-navy); border: 1.5px solid var(--line); }
.btn-secondary:hover { border-color: var(--tx-navy); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

main { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.hero { text-align: center; padding: 76px 20px 56px; position: relative; }
.hero-eyebrow {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--tx-red); background: rgba(191,10,48,0.08); padding: 6px 16px; border-radius: 999px; margin-bottom: 22px;
}
.hero h1 { font-size: clamp(32px, 5vw, 52px); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--tx-navy-deep); line-height: 1.1; }
.hero h1 span { color: var(--tx-red); }
.hero p.lede { font-size: 18px; color: var(--ink-soft); max-width: 620px; margin: 0 auto 34px; line-height: 1.6; }
.hero-ctas { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.hero-note { font-size: 13px; color: var(--ink-soft); }

/* ---------- Landing-page hero: two-column split with a product preview
   graphic (landing.html only — gated on .hero-split so about/contact/
   terms/privacy, which reuse the plain centered .hero above, are
   untouched). ---------- */
.hero.hero-split { text-align: left; padding: 64px 24px 104px; overflow: hidden; }
/* Navy band (2026-10-03): the landing hero runs edge to edge on deep navy
   with a red glow, matching the dark "Try it on a deal" band and the app's
   dashboard header. It sits outside <main>, so it spans the whole window;
   the stats card below overlaps its bottom edge. */
.hero.hero-split {
  background:
    radial-gradient(circle at 88% 12%, rgba(191,10,48,0.34) 0%, rgba(191,10,48,0) 42%),
    radial-gradient(circle at 8% 100%, rgba(242,177,52,0.10) 0%, rgba(242,177,52,0) 40%),
    linear-gradient(140deg, var(--tx-navy-deep) 0%, var(--tx-navy) 72%);
  color: #fff;
}
.hero-split .hero-eyebrow { background: rgba(255,255,255,0.12); color: var(--tx-gold); }
.hero-split .hero-copy h1 { color: #fff; }
.hero-split .hero-copy h1 span { color: var(--tx-gold); }
.hero-split .hero-copy p.lede, .hero-split .hero-note { color: rgba(255,255,255,0.78); }
.hero-split .btn-secondary { background: transparent; color: #fff; border-color: rgba(255,255,255,0.5); }
.hero-split .btn-secondary:hover { border-color: #fff; background: rgba(255,255,255,0.08); }
.hero-split .shot-secondary { box-shadow: var(--shadow-lg), 0 0 0 6px rgba(255,255,255,0.10); }
.hero-split .hero-visual-tag { background: #fff; color: var(--tx-navy-deep); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 40px; align-items: center; max-width: 1032px; margin: 0 auto; }
.hero-split .hero-copy { text-align: left; }
.hero-split .hero-copy h1 { margin-left: 0; }
.hero-split .hero-copy p.lede { margin-left: 0; }
.hero-split .hero-ctas { justify-content: flex-start; }

/* ---------- Hero graphic: a designed mockup (not a literal screenshot) of
   search results stacked with a floating dashboard card, so the hero reads
   as polished product art. Real screenshots live further down the page in
   the "See it in action" slideshow (.showcase-*) instead. */
.preview-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: #f4f6fb; border-bottom: 1px solid var(--line); }
.preview-chrome .dot { width: 8px; height: 8px; border-radius: 50%; }
.preview-chrome .dot-red { background: var(--tx-red); }
.preview-chrome .dot-gold { background: var(--tx-gold); }
.preview-chrome .dot-navy { background: var(--tx-navy); opacity: 0.5; }
.preview-url { margin-left: 8px; font-size: 10.5px; color: var(--ink-soft); font-family: "SFMono-Regular", Consolas, monospace; }

/* The graphic is always drawn at one fixed design size (328px wide; its
   cards reach 372 x 370 including the dashboard card that overhangs to the
   left) and then scaled as a whole with transform: scale(--s). Scaling with
   transform rather than zoom keeps the shape identical everywhere and stops
   Safari's minimum text size from blowing up the small print. The frame
   reserves the scaled footprint in the layout. */
.hero-grid { --s: 1.22; }
.hero-visual-frame {
  position: relative; justify-self: end; align-self: center;
  width: calc(372px * var(--s)); height: calc(370px * var(--s));
}
.hero-visual {
  position: absolute; top: 0; left: calc(44px * var(--s)); width: 328px; margin: 0; padding: 0 0 84px 44px;
  transform: scale(var(--s)); transform-origin: 0 0;
}
.shot-frame {
  background: var(--card); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); overflow: hidden;
}
.shot-primary { transform: rotate(1deg); position: relative; z-index: 1; }
.shot-secondary {
  width: 62%; position: absolute; left: -44px; bottom: -30px; transform: rotate(-3deg);
  z-index: 2; box-shadow: var(--shadow-lg), 0 0 0 6px var(--bg);
}

.mock-body { padding: 16px 18px 18px; }
.mock-search {
  display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 8px 8px 8px 14px; margin-bottom: 14px;
}
.mock-search svg { flex: none; color: var(--tx-navy); opacity: 0.6; }
.mock-search span:not(.mock-chip) { font-size: 12.5px; color: var(--ink-soft); flex: 1; }
.mock-chip { font-size: 10px; font-weight: 700; color: var(--tx-navy); background: rgba(10,41,85,0.08); padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.mock-results { display: flex; flex-direction: column; gap: 8px; }
.mock-row { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; }
.mock-row-hi { border-color: var(--tx-gold); background: #fbf5e6; }
.mock-avatar {
  width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--tx-navy), var(--tx-navy-deep));
}
.mock-avatar-b { background: linear-gradient(135deg, var(--tx-red), var(--tx-red-deep)); }
.mock-avatar-c { background: linear-gradient(135deg, #7a8699, #55617a); }
.mock-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mock-name { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-city { font-size: 10.5px; color: var(--ink-soft); }
.mock-figure { font-size: 12.5px; font-weight: 800; color: var(--tx-navy-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }

.mock-dash-header {
  background: linear-gradient(120deg, var(--tx-navy-deep), var(--tx-navy)); padding: 14px 16px 16px; color: #fff;
}
.mock-dash-eyebrow { font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.55); margin-bottom: 4px; }
.mock-dash-name { font-size: 15px; font-weight: 800; margin-bottom: 8px; }
.mock-dash-figure { font-size: 16px; font-weight: 800; color: var(--tx-gold); }
.mock-dash-figure span { display: block; font-size: 9px; font-weight: 600; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
.mock-dash-tiles { display: flex; gap: 1px; background: var(--line); }
.mock-tile { flex: 1; background: var(--card); padding: 10px 6px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.mock-tile-icon { width: 22px; height: 22px; border-radius: 7px; display: flex; align-items: center; justify-content: center; }
.mock-tile-icon svg { width: 12px; height: 12px; }
.mock-tile-icon-a { background: #e4e9fb; color: #4a5fd9; }
.mock-tile-icon-b { background: #fbe4ea; color: var(--tx-red); }
.mock-tile-icon-c { background: #faf0d9; color: #b8860b; }
.mock-tile-num { font-size: 13px; font-weight: 800; color: var(--tx-navy-deep); font-variant-numeric: tabular-nums; }
.mock-tile-lbl { font-size: 8.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.03em; }
.mock-dash-timeline { padding: 10px 14px 13px; }
.mock-dash-timeline-bar { height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; margin-bottom: 6px; }
.mock-dash-timeline-bar span { display: block; width: 60%; height: 100%; margin-left: 40%; background: linear-gradient(90deg, var(--tx-gold), var(--tx-red)); }
.mock-dash-timeline-lbl { font-size: 9.5px; color: var(--ink-soft); font-weight: 600; }

.hero-visual-tag {
  position: absolute; bottom: 8px; right: 8px; background: var(--tx-navy-deep); color: #fff; font-size: 10.5px;
  font-weight: 700; padding: 7px 13px; border-radius: 999px; box-shadow: var(--shadow-md); display: flex; align-items: center; gap: 6px;
  z-index: 3; white-space: nowrap;
}
.hero-visual-tag svg { flex: none; }

/* Tablets: the headline stays on the left with the product graphic beside
   it on the right; the eyebrow sits above both and the lede, buttons and
   note run full width underneath. .hero-copy steps out of the way
   (display: contents) so its children join the hero grid. */
@media (max-width: 860px) {
  .hero.hero-split { padding: 36px 16px 72px; }
  .hero-grid {
    --s: 0.85;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "eyebrow eyebrow" "title visual" "lede lede" "ctas ctas" "note note";
    gap: 0 14px;
  }
  .hero-split .hero-copy { display: contents; }
  .hero-split .hero-eyebrow { grid-area: eyebrow; justify-self: start; margin-bottom: 16px; }
  .hero-split .hero-copy h1 { grid-area: title; align-self: center; margin: 0; font-size: clamp(23px, 5.6vw, 40px); }
  .hero-split .hero-copy p.lede { grid-area: lede; margin: 20px 0 22px; font-size: 15.5px; max-width: none; }
  .hero-split .hero-ctas { grid-area: ctas; margin-bottom: 12px; }
  .hero-split .hero-note { grid-area: note; }
  .hero-visual-frame { grid-area: visual; }
}
/* Phones: the graphic takes about 60% of the width at the top right, and
   the headline shares its row, flowing around the cards' outline (a float
   with shape-outside inside the h1) so it fills the space beside them
   without covering them. The outline: the search card spans x 88-372 from
   the top; the dashboard card reaches the left edge from y = 125. */
@media (max-width: 640px) {
  .hero-grid { --s: 0.58; grid-template-columns: minmax(0, 1fr); grid-template-areas: "eyebrow" "title" "lede" "ctas" "note"; }
  .hero-visual-frame { grid-area: title; justify-self: end; align-self: start; z-index: 1; }
  .hero-split .hero-copy h1 { position: relative; z-index: 2; align-self: start; font-size: 26px; line-height: 1.12; }
  .hero-split .hero-copy h1::before {
    content: ""; float: right; width: calc(372px * var(--s)); height: calc(370px * var(--s)); shape-margin: 7px;
    shape-outside: polygon(calc(88px * var(--s)) 0, 100% 0, 100% 100%, 0 100%, 0 calc(125px * var(--s)), calc(88px * var(--s)) calc(125px * var(--s)));
  }
  .hero-split .hero-copy p.lede { margin-top: 18px; }
  .hero-split .hero-ctas { flex-wrap: nowrap; gap: 10px; }
  .hero-split .hero-ctas .btn { flex: 1; padding: 12px 10px; }
}
@media (max-width: 360px) {
  .hero-grid { --s: 0.47; }
  .hero-split .hero-copy h1 { font-size: 22px; }
}

.section-title { text-align: center; font-size: 28px; font-weight: 800; color: var(--tx-navy-deep); margin: 0 0 12px; }
.section-lede { text-align: center; color: var(--ink-soft); max-width: 560px; margin: 0 auto 44px; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; margin-bottom: 72px; }
/* Landing page only (about.html has 4 cards, not 6 — stays on the auto-fit
   rule above so it isn't forced into an awkward 3+1 split): exactly 3
   columns / 2 rows on desktop, collapsing to 2 then 1 column as it narrows. */
.feature-grid-3col { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* About page's 4 cards: 2 rows of 2 on tablets and phones. */
@media (max-width: 860px) { .feature-grid-2col-sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Phones keep the same grids (3 across on the landing page, 2 across on
   About) with compact cards instead of one card per screen. */
@media (max-width: 640px) {
  .feature-grid { gap: 10px; margin-bottom: 48px; }
  .feature-card { padding: 14px 10px 14px; border-radius: 12px; text-align: center; }
  .feature-card:hover { transform: none; }
  .feature-icon { width: 34px; height: 34px; border-radius: 10px; margin: 0 auto 10px; font-size: 17px; }
  .feature-icon svg { width: 17px; height: 17px; }
  .feature-card h3 { font-size: 13px; line-height: 1.25; margin-bottom: 6px; }
  .feature-card p { font-size: 11.5px; line-height: 1.45; text-align: left; }
  .feature-grid-3col .feature-card { padding: 12px 8px; }
  .feature-grid-3col .feature-card h3 { font-size: 12px; }
  .feature-grid-3col .feature-card p { font-size: 10.5px; }
  .section-title { font-size: 22px; }
  .section-lede { margin-bottom: 26px; font-size: 14.5px; }
}
.feature-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.2s ease; }
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.feature-icon {
  width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px; background: linear-gradient(135deg, rgba(10,41,85,0.10), rgba(10,41,85,0.04)); color: var(--tx-navy);
}
.feature-card:nth-child(2n) .feature-icon { background: linear-gradient(135deg, rgba(191,10,48,0.10), rgba(191,10,48,0.04)); color: var(--tx-red); }
.feature-icon svg { width: 22px; height: 22px; }
.feature-card h3 { font-size: 16.5px; margin: 0 0 8px; color: var(--ink); }
.feature-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

.stats-row {
  display: flex; justify-content: center; gap: 0; flex-wrap: wrap; background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 16px 12px; margin: -34px auto 56px; max-width: 960px; position: relative; z-index: 2;
}
.stat-item { text-align: center; flex: 1; min-width: 130px; padding: 3px 16px; border-right: 1px solid var(--line); }
.stat-item:last-child { border-right: none; }
.stat-item .num { font-size: 25px; font-weight: 800; color: var(--tx-navy-deep); font-variant-numeric: tabular-nums; }
.stat-item .lbl { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
@media (max-width: 640px) {
  .stats-row { margin-top: -40px; }
  .stat-item { border-right: none; border-bottom: 1px solid var(--line); padding: 8px 16px; }
  .stat-item:last-child { border-bottom: none; }
}

.pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 720px; margin: 0 auto 60px; }
.pricing-grid[hidden], .existing-sub-notice[hidden], .checkout-grid[hidden] { display: none; }

/* ---------- /pricing: plan picker + summary beside Paddle's inline checkout ---------- */
.checkout-page { max-width: 1080px; margin: 48px auto; padding: 0 16px; }
.checkout-page h1 { font-size: 28px; color: var(--tx-navy-deep); margin: 0 0 6px; }
.checkout-lead { color: var(--ink-soft); margin: 0 0 26px; font-size: 15px; }
.checkout-page .existing-sub-notice { margin-left: 0; }
.checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 28px; align-items: start; }
.plan-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 18px; }
.plan-option { position: relative; display: block; text-align: left; font: inherit; color: inherit; cursor: pointer; background: var(--card); border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 16px 14px; }
.plan-option:hover { border-color: #b8c1d1; }
.plan-option[aria-checked="true"] { border-color: var(--tx-navy); box-shadow: 0 0 0 3px rgba(10,41,85,.12); }
.plan-option:focus-visible { outline: 3px solid var(--tx-gold); outline-offset: 2px; }
.plan-radio { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b8c1d1; }
.plan-option[aria-checked="true"] .plan-radio { border-color: var(--tx-navy); background: radial-gradient(var(--tx-navy) 0 4px, #fff 5px); }
.plan-name { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 700; letter-spacing: .02em; color: var(--ink-soft); text-transform: uppercase; }
.plan-amount { display: block; font-size: 26px; font-weight: 800; color: var(--tx-navy-deep); }
.plan-amount span { font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.plan-note { display: block; font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; }
.plan-save { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 800; background: var(--tx-gold); color: var(--tx-navy-deep); border-radius: 999px; padding: 3px 9px; text-transform: uppercase; letter-spacing: .04em; }
.order-summary { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.order-summary h4 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
.order-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; font-size: 14.5px; border-bottom: 1px solid #f0f2f6; }
.order-row:last-of-type { border-bottom: 0; }
.order-row.total { font-weight: 800; font-size: 16px; color: var(--tx-navy-deep); border-top: 2px solid var(--line); border-bottom: 0; padding-top: 12px; margin-top: 4px; }
.order-row .muted { color: var(--ink-soft); font-size: 13px; }
.order-includes { list-style: none; padding: 0; margin: 16px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-size: 13.5px; }
.order-includes li::before { content: "✓ "; color: var(--tx-navy); font-weight: 800; }
.checkout-fine { font-size: 12.5px; color: var(--ink-soft); margin-top: 14px; line-height: 1.5; }
.checkout-container { background: var(--card); border: 1px solid #d5dbe5; border-radius: 14px; padding: 8px; box-shadow: 0 8px 28px rgba(10,41,85,.10); min-height: 450px; }
.checkout-unavailable { margin: 0; padding: 40px 28px; text-align: center; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }
.checkout-unavailable strong { color: var(--tx-navy-deep); }
@media (max-width: 860px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .checkout-page { margin: 28px auto; }
  .checkout-page h1 { font-size: 22px; }
  .checkout-lead { font-size: 14px; margin-bottom: 18px; }
  .plan-option { padding: 12px 12px 10px; }
  .plan-amount { font-size: 21px; }
  .plan-radio { top: 12px; right: 12px; width: 16px; height: 16px; }
  .order-includes { grid-template-columns: 1fr; }
  .checkout-container { padding: 4px; }
}
.existing-sub-notice { max-width: 560px; margin: 0 auto 60px; background: var(--card); border: 1.5px solid var(--tx-gold); border-radius: var(--radius); padding: 22px 26px; text-align: left; font-size: 15px; line-height: 1.55; }
.existing-sub-notice p { margin: 0 0 10px; }
.existing-sub-notice p:last-child { margin-bottom: 0; }
.price-card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 32px 28px; text-align: center; box-shadow: var(--shadow-sm); position: relative; }
.price-card.featured { border-color: var(--tx-gold); box-shadow: var(--shadow-md); }
.price-card .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--tx-gold); color: var(--tx-navy-deep); font-size: 11px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 5px 14px; border-radius: 999px; }
.price-card h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin: 6px 0 14px; }
.price-card .amount { font-size: 44px; font-weight: 800; color: var(--tx-navy-deep); }
.price-card .amount span { font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.price-card .save { font-size: 13px; color: var(--tx-red); font-weight: 700; margin-top: 4px; }
.price-card ul { list-style: none; padding: 0; margin: 22px 0 26px; text-align: left; font-size: 14px; color: var(--ink); }
.price-card ul li { padding: 6px 0; padding-left: 24px; position: relative; }
.price-card ul li::before { content: "✓"; position: absolute; left: 0; color: var(--tx-red); font-weight: 800; }
/* The two plans always sit side by side, compacted on phones. */
@media (max-width: 640px) {
  .pricing-grid { gap: 10px; margin-bottom: 40px; }
  .price-card { padding: 22px 12px 14px; border-radius: 12px; display: flex; flex-direction: column; }
  .price-card .badge { font-size: 9.5px; padding: 4px 10px; top: -11px; white-space: nowrap; }
  .price-card h3 { font-size: 12.5px; margin: 2px 0 8px; }
  .price-card .amount { font-size: 32px; }
  .price-card .amount span { font-size: 12px; }
  .price-card .save { font-size: 11.5px; }
  .price-card ul { font-size: 12px; margin: 14px 0 16px; flex: 1; }
  .price-card ul li { padding: 4px 0 4px 18px; }
  .price-card .btn { padding: 11px 8px; font-size: 13px; }
}

/* ---------- "See it in action" screenshot showcase: a scroll-snap strip
   (native touch/trackpad swipe, no library) of real app screenshots with
   prev/next buttons and dot indicators layered on top. The screenshots
   show only the app's content (no browser bar) and every slide has the
   same fixed size: 16:9 desktop captures, and portrait phone captures
   (390 x 640 CSS px) on phones via <picture>. Regenerate them with
   tools/showcase-screenshots.js. */
.showcase { position: relative; margin-bottom: 14px; }
.showcase-track {
  display: flex; align-items: flex-start; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 8%;
  padding: 4px 8% 16px; margin: 0 -24px; -webkit-overflow-scrolling: touch;
}
.showcase-track::-webkit-scrollbar { height: 6px; }
.showcase-track::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.showcase-slide { flex: 0 0 auto; width: min(780px, 82vw); margin: 0; scroll-snap-align: center; }
.showcase-slide .shot-frame { box-shadow: var(--shadow-md); }
.showcase-slide picture { display: block; }
.showcase-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top; background: var(--bg); }
.showcase-slide figcaption { text-align: center; font-size: 13px; color: var(--ink-soft); margin-top: 12px; padding: 0 8px; }
.showcase-slide figcaption strong { color: var(--ink); }
.showcase-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-md); color: var(--tx-navy);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.showcase-arrow:hover { background: var(--tx-navy); color: #fff; }
.showcase-arrow svg { width: 18px; height: 18px; }
.showcase-prev { left: -6px; }
.showcase-next { right: -6px; }
.showcase-dots { display: flex; justify-content: center; gap: 8px; margin-bottom: 10px; }
.showcase-note { text-align: center; font-size: 12px; color: var(--ink-soft); font-style: italic; margin: 0 0 72px; }
.showcase-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); border: none; padding: 0; cursor: pointer; }
.showcase-dot.active { background: var(--tx-red); width: 20px; border-radius: 4px; }
@media (max-width: 640px) {
  .showcase-arrow { display: none; }
  .showcase-track { padding: 4px 13vw 16px; scroll-padding: 0 13vw; gap: 14px; margin: 0 -16px; }
  .showcase-slide { width: 74vw; }
  .showcase-slide img { aspect-ratio: 390 / 640; }
  .showcase-slide figcaption { font-size: 12px; }
  .showcase-note { margin-bottom: 48px; font-size: 11.5px; }
}

.cta-band {
  background:
    radial-gradient(circle at 15% 20%, rgba(242,177,52,0.16) 0%, rgba(242,177,52,0) 45%),
    radial-gradient(circle at 85% 85%, rgba(191,10,48,0.22) 0%, rgba(191,10,48,0) 45%),
    linear-gradient(120deg, var(--tx-navy-deep), var(--tx-navy));
  border-radius: var(--radius); color: #fff; text-align: center; padding: 56px 30px; margin-bottom: 72px;
  position: relative; overflow: hidden;
}
.cta-band h2 { font-size: 26px; margin: 0 0 12px; position: relative; }
.cta-band p { color: rgba(255,255,255,0.75); margin: 0 0 26px; position: relative; }
.cta-band .btn { position: relative; }

footer.site-footer { text-align: center; padding: 34px 20px 44px; font-size: 12px; color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: 20px; }
footer.site-footer p { max-width: 640px; margin: 6px auto; line-height: 1.6; }

/* Legal pages (Privacy Policy / Terms of Service) — narrower than the
   1080px .main wrapper everything else uses, since long-form prose reads
   badly at that width; sits inside .main the same way every other page's
   content does. */
.policy-content { max-width: 760px; margin: 0 auto 64px; }
.policy-meta { font-size: 13px; color: var(--ink-soft); margin: 0 0 32px; }
.policy-content h2 { font-size: 19px; color: var(--tx-navy-deep); margin: 34px 0 12px; }
.policy-content h2:first-of-type { margin-top: 0; }
.policy-content p { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0 0 14px; }
.policy-content ul { margin: 0 0 14px; padding-left: 22px; }
.policy-content li { font-size: 14.5px; line-height: 1.7; color: var(--ink); margin: 0 0 8px; }
.policy-content a { color: var(--tx-navy); font-weight: 600; }

/* Auth forms (signup/login) */
.auth-wrap { max-width: 420px; margin: 64px auto; }
/* Signup's form grew a full street/apt/city/state/zip address (item 1) on
   top of the original single line — 420px started forcing the 3-column
   city/state/zip row too tight, so signup.html opts into this wider card
   instead of the login/forgot/reset-password pages, which are unaffected. */
.auth-wrap.auth-wrap-wide { max-width: 500px; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow-md); }
.auth-card h1 { font-size: 24px; margin: 0 0 6px; color: var(--tx-navy-deep); }
.auth-card .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 26px; }
.field { margin-bottom: 18px; }
.field-row { display: flex; gap: 14px; }
.field-row .field { flex: 1; min-width: 0; }
/* City / State / ZIP (item 1's address breakdown, signup.html): city needs
   more room than the 2-letter state code or the ZIP, so this is a weighted
   grid rather than three equal flex columns. */
.field-row-3 { display: grid; grid-template-columns: 2fr 0.8fr 1fr; gap: 14px; }
.field-row-3 .field { min-width: 0; }
.optional-tag { font-weight: 500; color: var(--ink-soft); font-size: 12px; }
.req { color: var(--tx-red); font-weight: 700; margin-left: 1px; }
.required-note { margin: -6px 0 14px; font-size: 12.5px; color: var(--ink-soft); }
@media (max-width: 480px) {
  .field-row-3 { grid-template-columns: 1fr; }
  .field-row { flex-direction: column; gap: 0; }
}
.field label { display: block; font-size: 13px; font-weight: 700; color: var(--tx-navy); margin-bottom: 6px; }
.field-hint { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; line-height: 1.45; }
.field input {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; transition: border-color 0.15s ease;
}
.field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: 15px; font-family: inherit; resize: vertical; transition: border-color 0.15s ease;
}
.field textarea:focus { outline: none; border-color: var(--tx-navy); }
.field input:focus { outline: none; border-color: var(--tx-navy); }
.form-error {
  background: rgba(191,10,48,0.08); border: 1px solid rgba(191,10,48,0.25); color: var(--tx-red-deep);
  border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13.5px; margin-bottom: 18px; display: none;
}
.form-error.show { display: block; }
.form-success {
  background: rgba(20,140,80,0.08); border: 1px solid rgba(20,140,80,0.25); color: #0f6b3f;
  border-radius: var(--radius-sm); padding: 14px 16px; font-size: 14px; line-height: 1.5;
}
.auth-switch { text-align: center; font-size: 13.5px; color: var(--ink-soft); margin-top: 18px; }
.auth-switch a { color: var(--tx-red); font-weight: 700; text-decoration: none; }

/* FAQ accordion (Contact page) — native <details>/<summary>, no JS needed */
.faq-list { max-width: 760px; margin: 0 auto 64px; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 4px 20px; box-shadow: var(--shadow-sm);
}
.faq-item summary {
  padding: 16px 0; font-weight: 700; font-size: 15px; color: var(--tx-navy-deep); cursor: pointer;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--ink-soft); flex: none; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-answer { padding: 0 0 18px; color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; }

/* "Contact Us" popup form */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(7,28,61,0.5); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 100;
}
/* Author CSS beats the browser's own [hidden]{display:none} rule by origin,
   not specificity — so the class rule above wins and the modal never
   actually hid when JS set the hidden attribute back to true (the X button
   "not closing" the modal). This rule scores higher on specificity than
   .modal-overlay alone, so it wins instead. */
.modal-overlay[hidden] { display: none; }
.modal-card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: 32px 30px; max-width: 460px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative;
}
.modal-card h2 { font-size: 22px; margin: 0 0 6px; color: var(--tx-navy-deep); }
.modal-card .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 22px; }
.modal-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(10,41,85,0.06); color: var(--ink-soft); font-size: 20px; line-height: 1;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.modal-close:hover { background: rgba(10,41,85,0.12); color: var(--ink); }

/* Pricing (post-signup) page specifics */
.pricing-page-wrap { max-width: 760px; margin: 48px auto; text-align: center; }
.pricing-page-wrap h1 { font-size: 30px; color: var(--tx-navy-deep); margin-bottom: 10px; }
.pricing-page-wrap .sub { color: var(--ink-soft); margin-bottom: 40px; }
.checkout-status { margin-top: 20px; font-size: 14px; color: var(--ink-soft); min-height: 20px; }

@media (max-width: 640px) {
  main { padding: 0 16px; }
  .hero { padding: 52px 16px 40px; }
  .auth-wrap { margin: 32px auto; }
}

@media (max-width: 480px) {
  header.site-header { padding: 0.75px 16px; }
  .brand .star { width: 55px; height: 55px; }
  .brand-text .name .line { font-size: 12.5px; }
  .brand-text .name .line.accent { font-size: 17.5px; }
  .header-actions .btn { padding: 9px 16px; font-size: 13px; }
}
/* The smallest phones (320-360px): keep the wordmark on its three lines and
   the two header buttons beside it without overlapping. */
@media (max-width: 360px) {
  header.site-header { padding: 0.75px 10px; gap: 6px; }
  .brand .star { width: 42px; height: 42px; }
  .brand-text .name .line { font-size: 10.5px; white-space: nowrap; }
  .brand-text .name .line.accent { font-size: 14.5px; }
  .header-actions { gap: 6px; }
  .header-actions .btn { padding: 8px 11px; font-size: 12px; }
}