/* Fieldfolio - concrete / steel / copper. Truck energy. */
:root {
  --bg: #EDEAE4;
  --ink: #121417;
  --steel: #2A3036;
  --panel: #FFFFFF;
  --muted: #5A6168;
  --accent: #C47A2C;
  --line: #C8C4BB;
  --radius: 6px;
  --shadow: 0 4px 16px rgba(18, 20, 23, 0.08);
  --nav-bg: rgba(237, 234, 228, 0.96);
  --btn-on-ink: #ffffff;
  --color-scheme: light;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  /* back-compat aliases used in older inline styles */
  --teal: var(--ink);
  --spruce: var(--ink);
  --mist: #E4E0D8;
  --sand: var(--bg);
  --sun: var(--accent);
  --white: var(--panel);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--accent); }
h1, h2, h3 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 0.55em;
  font-weight: 800;
}
p { margin: 0 0 1em; }
.container { width: min(1080px, 92%); margin: 0 auto; }

/* Nav */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--nav-bg);
  color-scheme: var(--color-scheme);
  border-bottom: 2px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0; gap: 1rem;
}
.logo {
  display: flex; align-items: center; gap: 0.55rem;
  font-weight: 800; color: var(--ink); font-size: 1.15rem;
  text-decoration: none; letter-spacing: -0.02em;
}
.logo:hover { text-decoration: none; color: var(--ink); }
.logo-mark { width: 32px; height: 32px; flex-shrink: 0; border-radius: 6px; }
.nav-links {
  display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap;
  font-size: 0.95rem;
}
.nav-links a {
  color: var(--steel); font-weight: 600; text-decoration: none;
  padding: 0.45rem 0.35rem; min-height: 44px; display: inline-flex; align-items: center;
}
.nav-links a:hover { color: var(--ink); }
.nav-toggle {
  display: none; background: var(--panel); border: 2px solid var(--ink);
  border-radius: var(--radius); padding: 0.55rem 0.85rem; color: var(--ink);
  cursor: pointer; font-weight: 700; min-height: 44px;
}

/* Buttons - square-ish, bold, high contrast */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.4rem; padding: 0.85rem 1.35rem; border-radius: var(--radius);
  font-weight: 750; font-size: 1rem; border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease;
  min-height: 48px; letter-spacing: -0.01em;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--btn-on-ink); border-color: var(--ink); }
.btn-primary:hover { background: var(--steel); color: var(--btn-on-ink); border-color: var(--steel); }
.btn-ghost {
  background: var(--panel); color: var(--ink); border-color: var(--ink);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--ink); }
.btn-accent { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-block { width: 100%; }

/* Hero */
.hero {
  padding: 2.75rem 0 2.25rem;
  display: grid; gap: 2rem; align-items: center;
}
@media (min-width: 820px) {
  .hero { grid-template-columns: 1.1fr 0.9fr; padding: 4rem 0 3rem; }
}
.eyebrow {
  display: inline-block; font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--steel); background: var(--panel);
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  padding: 0.4rem 0.7rem; border-radius: 2px; margin-bottom: 1rem;
}
.hero h1 { font-size: clamp(1.85rem, 5vw, 2.75rem); margin-bottom: 0.65rem; }
.hero .lede { font-size: 1.1rem; color: var(--muted); max-width: 34ch; margin-bottom: 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero-art {
  background: var(--panel);
  border: 2px solid var(--steel);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

/* Cards / sections */
.section { padding: 2.75rem 0; }
.section-alt {
  background: var(--mist);
  border-block: 2px solid var(--line);
}
.section-head { max-width: 38rem; margin-bottom: 1.5rem; }
.section-head p { color: var(--muted); }
.grid-2 {
  display: grid;
  gap: 1rem;
}
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.grid-3 {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--panel); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: none;
}
.card .icon {
  width: 44px; height: 44px; border-radius: var(--radius);
  background: var(--ink); color: var(--btn-on-ink);
  display: grid; place-items: center; margin-bottom: 0.85rem;
}
.card h3 { font-size: 1.05rem; margin-bottom: 0.35rem; }
.card p { color: var(--muted); font-size: 0.95rem; margin: 0; }
.steps { counter-reset: step; display: grid; gap: 0.85rem; }
.step {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem;
  background: var(--panel); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 1.1rem; align-items: start;
}
.step::before {
  counter-increment: step; content: counter(step);
  width: 2.25rem; height: 2.25rem; border-radius: var(--radius);
  background: var(--ink); color: var(--btn-on-ink); font-weight: 800;
  display: grid; place-items: center; font-size: 0.95rem;
}
.step h3 { margin-bottom: 0.3rem; }
.step p { color: var(--muted); margin: 0; }

/* Pricing */
.price-grid {
  display: grid; gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .price-grid.price-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.price-card.featured {
  border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: -2px;
}
.price { font-size: 2.4rem; font-weight: 800; color: var(--ink); margin: 0.3rem 0; letter-spacing: -0.03em; }
.price span { font-size: 1rem; font-weight: 600; color: var(--muted); }
.price-alt { margin: 0 0 0.25rem; color: var(--muted); font-size: 0.95rem; }
.price-list { list-style: none; padding: 0; margin: 1rem 0 1.4rem; }
.price-list li {
  padding: 0.45rem 0 0.45rem 1.5rem; position: relative; color: var(--muted);
}
.price-list li::before {
  content: ""; position: absolute; left: 0; top: 0.8rem;
  width: 0.65rem; height: 0.65rem; border-radius: 1px; background: var(--accent);
}
.note {
  font-size: 0.9rem; color: var(--muted); background: var(--panel);
  border: 1px dashed var(--line); border-radius: var(--radius); padding: 0.85rem 1rem;
}

/* Waitlist form */
.form {
  background: var(--panel); border: 2px solid var(--steel);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: none;
  max-width: 440px;
}
.form label {
  display: block; font-weight: 700; font-size: 0.95rem;
  margin-bottom: 0.4rem; color: var(--ink);
}
.form input, .form select, .form textarea {
  width: 100%; padding: 0.85rem 0.9rem; border: 2px solid var(--line);
  border-radius: var(--radius); font: inherit; margin-bottom: 1rem;
  background: var(--bg); min-height: 48px;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid var(--accent); border-color: var(--ink);
}
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.chip {
  font-size: 0.8rem; padding: 0.35rem 0.65rem; border-radius: 2px;
  background: var(--bg); color: var(--steel); border: 1px solid var(--line);
  font-weight: 650;
}
.success {
  display: none; background: var(--panel); border: 2px solid var(--ink);
  color: var(--ink); border-radius: var(--radius); padding: 1.2rem; margin-top: 1rem;
}
.success.show { display: block; }

/* FAQ */
details {
  background: var(--panel); border: 2px solid var(--line);
  border-radius: var(--radius); padding: 0.95rem 1.1rem; margin-bottom: 0.65rem;
}
summary { cursor: pointer; font-weight: 750; color: var(--ink); min-height: 44px; display: flex; align-items: center; }
details[open] summary { margin-bottom: 0.5rem; }
details p { margin: 0; color: var(--muted); font-size: 0.95rem; }

/* Footer */
.footer {
  border-top: 2px solid var(--line); padding: 2rem 0; margin-top: 1.5rem;
  color: var(--muted); font-size: 0.9rem;
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 1rem;
  justify-content: space-between; align-items: center;
}
.footer a { color: var(--ink); font-weight: 650; text-decoration: none; }
.footer a:hover { color: var(--accent); }

/* Page title band */
.page-band {
  padding: 2.25rem 0 1.35rem;
  background: var(--panel);
  border-bottom: 2px solid var(--line);
}
.page-band h1 { font-size: clamp(1.65rem, 4vw, 2.2rem); }
.page-band p { color: var(--muted); }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-links {
    display: none; position: absolute; left: 4%; right: 4%; top: 100%;
    flex-direction: column; align-items: stretch;
    background: var(--panel); border: 2px solid var(--ink);
    border-radius: var(--radius); padding: 0.75rem; box-shadow: var(--shadow);
  }
  .nav-links.open { display: flex; }
  .nav { position: relative; }
  .nav-links .btn { width: 100%; }
}


/* Checkout TEST UI */
.price-cta-row {
  display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.25rem;
}
.btn-disabled,
.btn[aria-disabled="true"],
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
  background: #c8c4bb;
  border-color: #9a9590;
  color: #5a6168;
}
.checkout-banner {
  border-left: 4px solid var(--accent);
  padding-left: 0.85rem;
}
[data-checkout-flash][data-state="success"] {
  border-left: 4px solid #2f6b3a;
  padding-left: 0.85rem;
  color: #1e3d24;
}
[data-checkout-flash][data-state="cancel"] {
  border-left: 4px solid var(--muted);
  padding-left: 0.85rem;
}

/* Dark mode */
html { color-scheme: light dark; }
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

html[data-theme="dark"] {
  --bg: #121417;
  --ink: #F2EFE8;
  --steel: #C5CBD1;
  --panel: #1C2128;
  --muted: #9AA3AB;
  --accent: #D4893A;
  --line: #3A424A;
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
  --mist: #181c22;
  --sand: var(--bg);
  --white: var(--panel);
  --nav-bg: rgba(18, 20, 23, 0.96);
  --btn-on-ink: #121417;
  --color-scheme: dark;
}

/* Theme toggle */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.35rem; min-height: 44px; min-width: 44px;
  padding: 0.45rem 0.7rem; border-radius: var(--radius);
  border: 2px solid var(--line); background: var(--panel); color: var(--ink);
  cursor: pointer; font-weight: 700; font-size: 0.85rem; font-family: inherit;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--ink); }
.theme-toggle .theme-icon { font-size: 1rem; line-height: 1; }
.theme-toggle .theme-label { letter-spacing: -0.01em; }
@media (max-width: 720px) {
  .theme-toggle .theme-label { display: none; }
}

/* Hero mockup follows theme tokens when using currentColor fills via CSS vars on svg */
.hero-art svg [data-theme-fill="bg"] { fill: var(--bg); }
.hero-art svg [data-theme-fill="panel"] { fill: var(--panel); }
.hero-art svg [data-theme-fill="ink"] { fill: var(--ink); }
.hero-art svg [data-theme-fill="line"] { fill: var(--line); }
.hero-art svg [data-theme-fill="steel"] { fill: var(--steel); }
.hero-art svg [data-theme-fill="accent"] { fill: var(--accent); }
.hero-art svg [data-theme-stroke="steel"] { stroke: var(--steel); }
.hero-art svg [data-theme-fill="on-ink"] { fill: var(--btn-on-ink); }
.hero-art svg [data-theme-fill="on-steel"] { fill: var(--bg); }



/* Site menu: same drawer/backdrop behavior as the desktop app. */
.nav-toggle { display: inline-flex; }
.nav-links { display: none !important; }
body.site-menu-open { overflow: hidden; }
.site-menu {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: flex-start; justify-content: flex-end;
}
.site-menu[hidden] { display: none !important; }
.site-menu-backdrop {
  position: absolute; inset: 0; background: rgba(18, 20, 23, 0.4);
}
.site-menu-panel {
  position: relative;
  width: min(320px, calc(100% - 1rem));
  margin: 0.5rem;
  background: var(--panel); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--radius);
  padding: 1rem; box-shadow: var(--shadow);
  max-height: min(90vh, 640px); overflow: auto;
}
.site-menu-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.site-menu-head h2 { margin: 0; font-size: 1.1rem; }
.site-menu-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.site-menu-nav a:not(.btn) {
  display: flex; align-items: center; min-height: 44px;
  padding: 0.65rem 0.85rem; border-radius: 4px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.98rem;
}
.site-menu-nav a:not(.btn):hover,
.site-menu-nav a:not(.btn):focus-visible {
  background: var(--bg); outline: none;
}
.site-menu-nav a[aria-current="page"] {
  background: var(--bg); box-shadow: inset 3px 0 0 var(--accent);
}
.site-menu-cta { margin-top: 0.55rem; width: 100%; text-align: center; justify-content: center; }
@media (max-width: 420px) {
  .site-menu { align-items: flex-end; justify-content: center; }
  .site-menu-panel { width: 100%; margin: 0; border-radius: 16px 16px 0 0; }
}

/* t83: Menu opens site-menu overlay; hide legacy link row on small screens still OK; on desktop hide duplicate row so one Menu pattern */
.nav-links { display: none !important; }
.nav-toggle { display: inline-flex !important; }


/* Theme toggle sits in nav-inner (nav-links is hidden in favor of Menu drawer) */
.nav-inner { display: flex; align-items: center; gap: 0.5rem; }
.nav-inner .theme-toggle { margin-left: auto; }
.nav-inner .nav-toggle { margin-left: 0.35rem; }
.nav-inner .logo { margin-right: 0; }

/* ===== Stage 2-4 (2026-09-30): offer, features, motion ===== */
.offer { background: var(--panel); border: 2px solid var(--ink); border-radius: var(--radius); padding: 1.35rem; margin-top: 1.5rem; }
.offer h2 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.offer p { color: var(--muted); }
.offer-count { min-height: 1.6em; margin: 0 0 0.6rem; color: var(--ink) !important; font-size: 1.05rem; font-weight: 700; opacity: 0; transition: opacity 0.3s var(--ff-ease); }
.offer-count.is-in { opacity: 1; }
.offer-cta { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.offer-cta [hidden], [data-offer-buy][hidden] { display: none !important; }
.tier-tag, .status-tag {
  display: inline-block; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 2px; border: 1px solid var(--line); background: var(--bg); color: var(--steel);
  margin: 0 0.35rem 0.5rem 0;
}
.status-tag.is-soon { border-color: var(--accent); color: var(--ink); border-left: 3px solid var(--accent); }
.status-tag.is-live { border-left: 3px solid #2f6b3a; }
.text-link { font-weight: 700; }
.feature-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-grid .card p + p { margin-top: 0.6rem; }
.offline-band h2 { font-size: 1.5rem; }

/* Buttons: hover/press */
/* Motion tokens: short, gentle, small travel. Used by every hover and reveal. */
:root { --ff-ease: cubic-bezier(0.2, 0, 0, 1); --ff-dur: 0.2s; --ff-lift: 0px;
  /* Thin soft glow under a box: a 6px 18px low opacity shadow plus a 1px hairline in the same color. */
  --glow-box: 0 6px 18px rgba(18, 20, 23, 0.12), 0 0 0 1px rgba(18, 20, 23, 0.12);
  --glow-or: 0 6px 18px rgba(216, 127, 40, 0.22), 0 0 0 1px rgba(216, 127, 40, 0.34); }
html[data-theme="dark"] { --glow-box: 0 6px 18px rgba(216, 127, 40, 0.20), 0 0 0 1px rgba(216, 127, 40, 0.30); }
.btn { transition: background var(--ff-dur) var(--ff-ease), border-color var(--ff-dur) var(--ff-ease), transform var(--ff-dur) var(--ff-ease), box-shadow var(--ff-dur) var(--ff-ease); }
.btn:active { transform: translateY(0.5px); }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .card { transition: transform var(--ff-dur) var(--ff-ease), border-color var(--ff-dur) var(--ff-ease), box-shadow var(--ff-dur) var(--ff-ease); }
  @media (hover: hover) {
    .card:hover { box-shadow: var(--glow-box); }
  }
  @keyframes ff-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .hero > div:first-child > * { animation: ff-rise 0.4s var(--ff-ease) both; }
  .hero > div:first-child > *:nth-child(2) { animation-delay: 0.04s; }
  .hero > div:first-child > *:nth-child(3) { animation-delay: 0.08s; }
  .hero > div:first-child > *:nth-child(4) { animation-delay: 0.12s; }
  .hero-art { animation: ff-rise 0.45s 0.08s var(--ff-ease) both; }
  .js-motion [data-reveal] { opacity: 0; transform: translateY(8px); transition: opacity 0.4s var(--ff-ease), transform 0.4s var(--ff-ease); }
  .js-motion [data-reveal].is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .offer-count { opacity: 1; }
}

/* ===== 2026-09-30 light/dark QA fixes (colors only, no wording) ===== */
:root { --accent-text: #9A5A17; --ok-text: #2F6B3A; --err-text: #B42318; }
html[data-theme="dark"] { --accent-text: #D4893A; --ok-text: #55B064; --err-text: #F0705F; }
a:hover, .footer a:hover { color: var(--accent-text); }
.btn-accent { color: #121417; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--accent-text); outline-offset: 2px;
}
.btn-primary:focus-visible { outline-color: var(--accent-text); }
[data-checkout-flash][data-state="success"] { color: var(--ink); border-left-color: var(--ok-text); }
#c-error { color: var(--err-text) !important; }
html[data-theme="dark"] .btn-disabled, html[data-theme="dark"] .btn[aria-disabled="true"], html[data-theme="dark"] .btn[disabled] {
  background: #2A3036; border-color: #4a535b; color: #9AA3AB;
}
html[data-theme="dark"] .status-tag.is-live { border-left-color: var(--ok-text); }
.status-tag.is-live { border-left-color: var(--ok-text); }

/* ===== 2026-09-30 additions: savings line,, FAQ block, app shots, trade pages ===== */
.savings-line { margin-top: 1.25rem; }
.savings-line strong { color: var(--ink); }
@media (min-width: 700px) { .faq-block { max-width: 46rem; } }
.shot-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .shot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .shot-grid { grid-template-columns: repeat(4, 1fr); } }
.shot { margin: 0; padding: 0.75rem; }
.shot img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); }
.shot .shot-dark { display: none; }
html[data-theme="dark"] .shot .shot-light { display: none; }
html[data-theme="dark"] .shot .shot-dark { display: block; }
.shot-cap { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.92rem; }
.shot-cap strong { display: block; color: var(--ink); }
.trade-group { margin-top: 1.75rem; }
.trade-group h2 { font-size: 1.2rem; margin-bottom: 0.75rem; }
.trade-checks { list-style: none; padding: 0; margin: 0.25rem 0 0; }
.trade-checks li { position: relative; padding: 0.3rem 0 0.3rem 1.5rem; color: var(--muted); font-size: 0.95rem; }
.trade-checks li::before { content: ""; position: absolute; left: 0; top: 0.6rem; width: 0.7rem; height: 0.7rem; border: 2px solid var(--ok-text); border-radius: 2px; }
.trade-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }

/* Round 3: buy buttons on cards, hidden inside the store apps */
.card-cta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
html.ff-native [data-buy], html.ff-native [data-offer], html.ff-native [data-manage-plan], html.ff-native .card-cta { display: none !important; }

/* ===== 2026-09-30 final changes: hover rings, footer, tracker, offer meter, add-ons ===== */
:root { --hl: #D87F28; --ring-c: var(--ink); }
/* --hl is the exact accent from the FIELDFOLIO logo files (#D87F28). Same value in light and dark. Hover rings, tracker bar and offer meter all use it. */
html[data-theme="dark"] { --hl: #D87F28; }
/* One hover for every box. Black boxes and black buttons get a yellow ring. White boxes and white buttons get a black ring (light ink in dark mode). */
.card, .step, details, .note, .offer, .form, .btn-ghost, .btn-primary, .card .icon { transition: box-shadow var(--ff-dur) var(--ff-ease), transform var(--ff-dur) var(--ff-ease), border-color var(--ff-dur) var(--ff-ease), background var(--ff-dur) var(--ff-ease); }
@media (hover: hover) {
  .card:hover, .step:hover, details:hover, .note:hover, .offer:hover, .form:hover, .btn-ghost:hover { box-shadow: var(--glow-box); }
  .btn-primary:hover, .card .icon:hover { border-color: var(--hl); box-shadow: var(--glow-or); }
  .btn-primary:hover { background: var(--ink); color: var(--btn-on-ink); }
}
.card:hover .card-cta .btn, .card .btn-block { box-sizing: border-box; }

/* Footer: links sit bottom right, same order as the menu */
.footer-inner { align-items: flex-end; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; justify-content: flex-end; margin-left: auto; text-align: right; max-width: 100%; }
@media (max-width: 720px) { .footer-inner { flex-direction: column; align-items: stretch; } .footer-links { margin-left: 0; } .footer-inner > span { text-align: right; } }

/* Get the app: keep the line on one row where the screen allows */
.oneline { max-width: none; }
@media (min-width: 820px) { .oneline { white-space: nowrap; } }

/* Job progress tracker (How it works) */
.tracker-list { list-style: none; padding: 0; margin: 0.5rem 0 0.75rem; }
.tracker-list li { margin: 0; }
.tracker-list label { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0; cursor: pointer; color: var(--ink); min-height: 44px; }
.tracker-list input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; accent-color: var(--ink); flex: none; }
.tracker-list input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.tracker-bar { height: 10px; border: 2px solid var(--ink); border-radius: 999px; background: var(--panel); overflow: hidden; }
.tracker-bar span { display: block; height: 100%; width: 0; background: var(--hl); transition: width 0.2s var(--ff-ease); }
.tracker-note { color: var(--muted); font-size: 0.9rem; margin: 0.5rem 0 0; }

/* Limited offer meter: width is set from the real count, never a fixed number */
.offer-meter { width: min(420px, 100%); height: 12px; border: 2px solid var(--ink); border-radius: 999px; background: var(--panel); overflow: hidden; margin: 0.4rem 0 0.75rem; }
.offer-meter[hidden] { display: none; }
.offer-meter span { display: block; height: 100%; width: 0; background: var(--hl); transition: width 0.4s var(--ff-ease); }

/* Optional add-ons on Pricing */
.addons { margin-top: 2rem; }
.addons h2 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.addons-lede { color: var(--muted); margin: 0 0 1rem; max-width: 60ch; }
.addons .price-card h3 { font-size: 1.25rem; margin-bottom: 0.2rem; }

/* ===== 2026-09-30 layout rhythm (spacing and grouping only; no copy changes) =====
   Rhythm: sections 2.25rem (mobile) / 3rem (desktop); blocks inside a section 1rem to 1.5rem;
   page headers 1.75rem to 2.25rem; cards 1.25rem; readable lines about 70ch. */
:root { --sp-section: 2.25rem; --sp-block: 1.5rem; --sp-gap: 1rem; --measure: 70ch; }
@media (min-width: 820px) { :root { --sp-section: 3rem; } }

.section { padding: var(--sp-section) 0; }
/* Same background back to back: one gap, not two */
.section:not(.section-alt) + .section:not(.section-alt) { padding-top: 0; }
.section-head { margin-bottom: var(--sp-block); }
.section-head h2 { margin-bottom: 0.35rem; }
.section-head p { margin-bottom: 0; }
.page-band { padding: 1.75rem 0 1.25rem; }
.page-band + .section, .page-band + main.section { padding-top: 1.75rem; }
@media (min-width: 820px) {
  .page-band { padding: 2.25rem 0 1.5rem; }
  .page-band + .section, .page-band + main.section { padding-top: 2.25rem; }
}
.page-band .eyebrow { margin-bottom: 0.75rem; }
.hero { padding: 1.75rem 0 1.5rem; gap: 1.5rem; }
@media (min-width: 820px) {
  .hero { grid-template-columns: 1fr 1fr; padding: 3rem 0 2.25rem; gap: 2.5rem; }
  .hero-art { max-width: 440px; justify-self: end; width: 100%; }
}
.hero-actions { margin-top: 1.25rem; }
.footer { padding: 1.5rem 0; margin-top: 0; }

/* Grids share one gap */
.grid-2, .grid-3, .feature-grid, .price-grid, .steps { gap: var(--sp-gap); }
.card { padding: 1.25rem; }
.grid-3 .card .icon { margin-bottom: 0.7rem; }
.card h3 + p { margin-top: 0; }
.card p + p { margin-top: 0.5rem; }
.grid-2, .grid-3 { align-items: stretch; }
.section .container > p { margin-top: var(--sp-block); }

/* Home tracker row: tracker leads, Plan markup sits beside it at its natural height */
@media (min-width: 700px) {
  .grid-2:has(> #tracker) { grid-template-columns: minmax(0, 46rem); }
}

/* Steps: columns on desktop instead of full width bars */
@media (min-width: 700px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .steps.steps-2 { grid-template-columns: repeat(2, 1fr); }
}
.step { padding: 1.1rem 1.1rem 1.1rem 1rem; gap: 0.85rem; }

/* Home: four more features as 2 x 2, no orphan */
.offline-band { padding-block: var(--sp-section); }
.offline-band .section-head { margin-bottom: 0; max-width: 46rem; }

/* Features: no orphan last card, readable measure */
@media (min-width: 700px) and (max-width: 979px) {
  .feature-grid > .card:last-child:nth-child(2n+1) { grid-column: 1 / -1; }
}
@media (min-width: 980px) {
  .feature-grid > .card:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
}
.feature-grid .card p { max-width: var(--measure); }
.feature-grid + .note { margin-top: var(--sp-block) !important; }
.feature-grid + .note + p { margin-top: 1rem !important; }

/* Notes: readable width, grouped tightly */
main .note { max-width: 80ch; }
.price-grid ~ .note, .addons ~ .note { margin-top: 0.6rem !important; }
.addons ~ .note:first-of-type { margin-top: var(--sp-block) !important; }
.note a { overflow-wrap: anywhere; }

/* Pricing blocks */
.offer { margin-top: var(--sp-block); padding: 1.15rem 1.25rem; }
.offer h2 { margin-bottom: 0.25rem; }
.offer p { margin-bottom: 0.5rem; }
.offer p:last-of-type { margin-bottom: 0; }
.addons { margin-top: 2rem; }
.addons-lede { margin-bottom: var(--sp-gap); }
.price-card { padding: 1.25rem; }

/* How it works: two column board, steps full width, tracker spans */
.how-layout { display: grid; gap: var(--sp-gap) !important; }
@media (min-width: 820px) {
  .how-layout { grid-template-columns: repeat(2, 1fr); grid-auto-flow: dense; }
  .how-layout > .steps { grid-column: 1 / -1; margin-bottom: 0.5rem; }
  .how-layout > #tracker { grid-column: 2; grid-row: span 4; }
}

/* Single column pages: one width, one padding */
.col-narrow { max-width: 46rem; }
.col-medium { max-width: 54rem; }
.col-narrow > .card, .col-medium > .card, .col-narrow > .legal-card { padding: 1.5rem 1.25rem; }
@media (min-width: 700px) {
  .col-narrow > .card, .col-medium > .card, .col-narrow > .legal-card { padding: 1.75rem; }
}
.about-card h2 { margin-top: 1.25rem; margin-bottom: 0.4rem; }
.about-card .about-actions { margin-top: 1.25rem; }
.legal-card h2 { font-size: 1.15rem; margin: 1.5rem 0 0.4rem; }
.legal-card h2:first-child { margin-top: 0; font-size: 1.35rem; }
.legal-card h3 { margin: 1.1rem 0 0.3rem; }
.legal-card p, .legal-card li { max-width: var(--measure); }
.legal-card p { margin: 0 0 0.7rem; }
.legal-card ul, .legal-card ol { margin: 0 0 0.8rem; }
.col-narrow .card p { max-width: var(--measure); }

@media (max-width: 699px) {
  .hero-actions .btn { flex: 1 1 auto; }
  .section .container > p { margin-top: 1.25rem; }
}

/* Nested FAQ section inside main: no doubled padding; footer sits at the bottom on short pages */
main.section > .section { padding: var(--sp-section) 0 0; }
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main, body > .section { flex: 1 0 auto; }
body > .footer { margin-top: auto; flex-shrink: 0; }

/* 2026-09-30k Menu button: label centered both ways */
.nav-toggle, .nav-inner .nav-toggle {
  display: inline-flex !important; align-items: center; justify-content: center;
  gap: 0.4rem; line-height: 1; padding: 0 0.95rem; min-height: 44px; min-width: 66px;
  box-sizing: border-box; text-align: center; font-family: inherit; font-size: 0.9rem;
}

/* Home tracker: Plan markup is the tracker's footer */
.tracker-foot { margin-top: 1.1rem; padding-top: 1rem; border-top: 2px solid var(--line); }
.tracker-foot h3 { font-size: 1.05rem; margin: 0 0 0.3rem; }
.tracker-foot p { margin: 0; }
/* optical nudge: cap height has no descender, so ink sits 1px high without this */
.nav-toggle, .nav-inner .nav-toggle { padding-top: 2px; padding-bottom: 0; }

/* ===== 2026-09-30k reference style layout (layout, spacing and motion only) =====
   Clean sectioned pages: one rhythm, thin 1px cards, soft glow under boxes, fade in on scroll. */
:root { --sp-section: 2.5rem; --sp-block: 1.75rem; --sp-gap: 1.1rem; --card-r: 10px; --card-rest: 0 1px 2px rgba(18, 20, 23, 0.05); }
html[data-theme="dark"] { --card-rest: none; }
@media (min-width: 820px) { :root { --sp-section: 3.75rem; --sp-block: 2rem; --sp-gap: 1.25rem; } }

/* Eyebrow: small caps with a thin accent line, no box */
.eyebrow { background: none; border: 0; border-radius: 0; padding: 0; display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; letter-spacing: 0.1em; }
.eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: var(--hl); flex: none; }

/* Page header band */
.page-band { padding: 2.25rem 0 1.75rem; border-bottom: 1px solid var(--line); }
.page-band p { max-width: 60ch; margin-bottom: 0; }
@media (min-width: 820px) { .page-band { padding: 3rem 0 2.25rem; } }
.page-band + .section, .page-band + main.section { padding-top: var(--sp-section); }
@media (min-width: 820px) { .page-band + .section, .page-band + main.section { padding-top: 3rem; } }

.section-alt { border-block: 1px solid var(--line); }
.section-head { margin-bottom: var(--sp-block); }
.hero { padding: 2.25rem 0 2rem; }
@media (min-width: 820px) { .hero { padding: 4rem 0 3rem; } }

/* Thin cards */
.card, .step, details, .offer, .form, .price-card { border-width: 1px; border-radius: var(--card-r); box-shadow: var(--card-rest); }
.card, .price-card { padding: 1.4rem; }
.note { border-width: 1px; border-radius: var(--card-r); }
.card .icon { border-radius: 8px; }
.btn { border-width: 1px; border-radius: 8px; }
.btn-ghost { border-color: var(--ink); }
.nav-toggle, .theme-toggle { border-width: 1px; }
.tracker-bar, .offer-meter { border-width: 1px; }
.offer { border-color: var(--line); border-left: 3px solid var(--hl); }
.grid-2, .grid-3, .feature-grid, .price-grid, .steps { gap: var(--sp-gap); }
.addons { margin-top: 3rem; }

/* Soft glow only. No ring, no lift, no scale. */
@media (hover: hover) {
  .card:hover, .step:hover, details:hover, .note:hover, .offer:hover, .price-card:hover, .btn-ghost:hover { border-color: var(--line); box-shadow: var(--glow-box); transform: none; }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn-primary:hover, .card .icon:hover { transform: none; border-color: var(--ink); box-shadow: var(--glow-or); }
  .contact-split .form:hover { box-shadow: none; }
}
html[data-theme="dark"] .btn-primary:hover { border-color: var(--btn-on-ink); }
html[data-theme="dark"] .card:hover, html[data-theme="dark"] .step:hover, html[data-theme="dark"] details:hover { border-color: var(--line); }

/* Contact: info on the left, form card on the right */
.contact-split { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 860px) { .contact-split { grid-template-columns: 0.8fr 1.2fr; gap: 3rem; } }
.contact-info h2 { font-size: 1.15rem; margin: 0 0 0.45rem; }
.contact-info h2:not(:first-child) { margin-top: 1.75rem; }
.contact-info p { margin: 0 0 0.5rem; color: var(--muted); }
.contact-info .contact-note { font-size: 0.9rem; margin-top: 1.5rem; }
.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; }
.check-list li { position: relative; padding-left: 1.6rem; color: var(--ink); }
.check-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--ok-text); }
.contact-split > .card { padding: 1.5rem; }
@media (min-width: 700px) { .contact-split > .card { padding: 2rem; } }
.contact-split .card .form { background: none; border: 0; padding: 0; max-width: none; box-shadow: none; }

/* Scroll reveal: starts hidden only when JS has set up the observer (js-motion). Without JS everything stays visible. */
@media (prefers-reduced-motion: no-preference) {
  .js-motion [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ff-ease), transform 0.5s var(--ff-ease); }
  .js-motion [data-reveal].is-visible { opacity: 1; transform: none; }
}

/* ===== 2026-09-30n: offer and notes are normal cards again ===== */
/* Pro tier: no special outline. It gets the same hover glow as every other box. */
.price-card.featured { border-color: var(--line); outline: 0; }

/* 2026-09-30 CSP: utility classes that replace inline style attributes (no visual change) */
.u-0ca412{margin-top:1.25rem !important;margin-bottom:0 !important}
.u-1386d5{margin:0 !important}
.u-1c0307{margin-top:0.75rem !important}
.u-2952fb{margin:0.35rem 0 0 !important}
.u-33b881{margin:0.5rem 0 0 !important}
.u-3a717e{max-width:42ch !important}
.u-48e8b9{padding:1.5rem !important}
.u-641fde{display:flex !important;flex-wrap:wrap !important;gap:0.75rem !important}
.u-806271{max-width:48ch !important}
.u-831aca{margin-top:2rem !important}
.u-9dae1d{margin-top:1rem !important}
.u-a07466{display:none;margin-top:1rem;color:#c44}
.u-b06fb3{margin-top:1.5rem !important}
.u-b69a2b{max-width:44ch !important}
.u-b8148c{max-width:60ch !important}
.u-bd9a23{max-width:780px !important}
.u-cc5fb6{margin-top:1.5rem !important;display:flex !important;flex-wrap:wrap !important;gap:0.65rem !important}
.u-d40331{margin-bottom:1.25rem !important}
.u-e34cd0{margin:0.75rem 0 0 !important;color:var(--muted) !important;font-size:0.95rem !important}
.u-ea00a4{margin:2rem 0 !important;border:0 !important;border-top:1px solid var(--line) !important}
.u-f7683c{margin-bottom:1.5rem !important}
.u-fe9a83{margin-left:0.5rem !important}

/* customer link viewer (r.html) */
  .rv-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; padding: 0.75rem 0; }
  .rv-bar .logo { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 800; color: var(--ink); text-decoration: none; }
  .rv-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .rv-frame { width: 100%; border: 1.5px solid var(--line); border-radius: var(--radius); background: #fff; min-height: 60vh; display: block; }
  .rv-note { color: var(--muted); font-size: 0.9rem; margin: 0.75rem 0; }
  @media print { .rv-bar, .rv-note, .footer { display: none !important; } .rv-frame { border: 0; } }
.hp-field { position: absolute; left: -9999px; height: 0; overflow: hidden; }

/* about card */
  .about-card h2 { margin-top: 1.5rem; }
  .about-card h2:first-child { margin-top: 0; }
  .about-card .about-actions { margin-top: 1.5rem; margin-bottom: 0; }

/* hero art: DURING label sits on the accent block in both themes */
.hero-art svg [data-theme-fill="on-accent"] { fill: #121417; }

/* Account management section on pricing (merged from the old delete-account page) */
.account { margin-top: 2.5rem; scroll-margin-top: 5rem; }
.account h2 { font-size: 1.35rem; margin-bottom: 0.4rem; }
.account-lede { color: var(--muted); margin: 0 0 1.25rem; max-width: 60ch; }
.account-card { margin-bottom: 1.25rem; padding: 1.4rem 1.5rem; }
.account-card h3 { margin: 0 0 0.75rem; }
.account-card h4 { margin: 1.5rem 0 0.5rem; font-size: 1rem; }
.account-card p { margin: 0 0 1rem; }
.account-card ul, .account-card ol { margin: 0 0 1rem; padding-left: 1.3rem; }
.account-card li { margin: 0 0 0.4rem; }
.account-card > :last-child { margin-bottom: 0; }

/* Manage plan page (not in menu, footer or sitemap) */
.mp-wrap { max-width: 780px; }
.mp-card { margin-bottom: 1.25rem; padding: 1.5rem; }
.mp-card h2 { font-size: 1.25rem; margin: 0 0 0.75rem; }
.mp-card h3 { font-size: 1rem; margin: 1.5rem 0 0.5rem; }
.mp-card p { margin: 0 0 1rem; }
.mp-card ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.mp-card li { margin: 0 0 0.4rem; }
.mp-wrap > .note { margin-bottom: 1.25rem; }
.mp-delete-form { margin: 1.5rem 0 1rem; }
.mp-delete-form label { display: block; font-weight: 700; margin: 0 0 0.4rem; }
.mp-delete-form input { width: 100%; max-width: 20rem; margin: 0 0 0.6rem; }
.mp-done { font-weight: 700; margin: 1rem 0; }
.mp-native-only { display: none; }
html.ff-native .mp-native-only { display: block; }
html.ff-native .mp-billing { display: none !important; }

/* Underlines never cut through descenders (g, y, p, j, q) */
a, button.link, .auth-help-link { text-decoration-skip-ink: auto; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
a:not(.btn) { overflow: visible; }

/* 2026-09-30m header controls: one soft style, no black border, no black hover fill.
   Hover is only the same soft glow every other button has. */
.nav-toggle, .theme-toggle, .nav-inner .nav-toggle {
  display: inline-flex !important; align-items: center; justify-content: center;
  box-sizing: border-box; height: 44px; min-height: 44px; min-width: 44px;
  padding: 2px 0.95rem 0; gap: 0.35rem; margin: 0;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1);
}
.theme-toggle { padding: 0 0.7rem; }
.nav-toggle { min-width: 66px; }
.nav-toggle:hover, .theme-toggle:hover, .nav-toggle:focus-visible, .theme-toggle:focus-visible {
  background: var(--panel); color: var(--ink); border-color: var(--line);
  box-shadow: var(--glow-box); text-decoration: none; transform: none;
}
.nav-toggle:focus-visible, .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle .theme-icon { font-size: 1rem; line-height: 1; }
.theme-toggle .theme-label { font-size: 0.9rem; letter-spacing: 0; }
@media (max-width: 720px) { .theme-toggle .theme-label { display: none; } .theme-toggle { min-width: 44px; width: 44px; padding: 0; } }

/* 2026-09-30m same narrow-phone spacing as the app header */
@media (max-width: 420px) { .nav-inner { gap: 0.15rem; } .nav-inner .nav-toggle { margin-left: 0; } }