/* 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;
  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;
}
.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: min(1rem, 6.2vw); 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;
}
.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;
}
/* One line from the first paint. The column may shrink (min-width 0) so nowrap does not widen the page. wordFit may zoom this heading (ff-zNN); the used box stays one line so the page below does not jump. The gap lives on .lede, which is not zoomed. Visible with no script. */
.hero > div:first-child { min-width: 0; }
.hero h1 { font-size: clamp(1.85rem, 5vw, 2.75rem); margin-bottom: 0; white-space: nowrap; overflow: hidden; line-height: 1.4; height: 1.4em; max-width: 100%; min-width: 0; }
.hero .lede { font-size: 1.1rem; color: var(--muted); max-width: 34ch; margin-top: 0.65rem; 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: min(1.05rem, 6.6vw); margin-bottom: 0.35rem; }
.card p { color: var(--muted); font-size: min(0.95rem, 6vw); 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; font-size: min(1.17em, 7vw); }
.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; }
.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: min(0.95rem, 6vw); }

/* 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: min(clamp(1.65rem, 4vw, 2.2rem), 8.5vw); }
.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; }
@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: 1rem;
}
.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: min(1.25rem, 7.4vw); 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: min(1.25rem, 6.5vw); }
.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 { }

/* 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: min(1.15rem, 6.6vw); margin: 1.5rem 0 0.4rem; }
.legal-card h2:first-child { margin-top: 0; font-size: min(1.35rem, 7.4vw); }
.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: min(1.05rem, 6.6vw); 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; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* F164: clip, never left:-9999px (RTL sideways scroll) */

/* 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; } }

/* 2026-10-01 theme toggle: icon only. Sun shows in dark mode (switch to light), moon shows in light mode (switch to dark). */
.theme-toggle, .nav-inner .theme-toggle { width: 44px; min-width: 44px; padding: 0; gap: 0; }
.theme-toggle .theme-svg { display: block; width: 20px; height: 20px; flex: none; }
.theme-toggle .theme-sun { display: none; }
html[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
html[data-theme="dark"] .theme-toggle .theme-moon { display: none; }

/* 2026-10-01 interactive sample tracker: trade tabs, tools row, expandable sample report */
.tracker-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 0.4rem; }
.tracker-tab { font: inherit; font-size: 0.88rem; font-weight: 700; min-height: 44px; padding: 0 0.85rem; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--ink); cursor: pointer; transition: box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1), border-color 0.2s, background 0.2s; }
.tracker-tab:hover, .tracker-tab:focus-visible { box-shadow: var(--glow-box); }
.tracker-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tracker-tab[aria-pressed="true"] { background: var(--ink); color: var(--btn-on-ink); border-color: var(--ink); }
.tracker-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0 0; }
.tracker-list label:hover span { color: var(--ink); }
.tracker-report { margin-top: 0.9rem; border: 1px solid var(--line); border-radius: var(--card-r, 10px); background: var(--bg); }
.tracker-report summary { cursor: pointer; font-weight: 700; padding: 0.75rem 1rem; min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
.tracker-report summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tracker-report-body { padding: 0 1rem 1rem; }
.tracker-report-body p { margin: 0 0 0.4rem; }
.tracker-report-title { font-weight: 800; color: var(--ink); }
.tracker-report-meta { color: var(--muted); font-size: 0.85rem; }
.tracker-report-list { list-style: none; padding: 0; margin: 0.4rem 0 0.75rem; }
.tracker-report-list li { padding: 0.2rem 0; font-size: 0.92rem; color: var(--muted); }
.tracker-report-list li.is-done { color: var(--ink); font-weight: 650; }
.tracker-share-note { color: var(--muted); font-size: 0.88rem; min-height: 1.2em; }
.btn-sm { min-height: 40px; padding: 0.4rem 0.7rem; font-size: 0.88rem; }

/* ===== 2026-10-01 centered layout: fill the blank space, CSS only ===== */
/* Page headers and section headings sit in the middle */
.page-band .container { text-align: center; }
.page-band p, .page-band .u-b69a2b, .page-band .u-3a717e, .page-band .u-b8148c { margin-inline: auto; }
.section-head { margin-inline: auto; text-align: center; }
.offline-band .section-head { margin-inline: auto; }

/* Home: tracker card and its row centered */
@media (min-width: 700px) {
  .grid-2:has(> #tracker) { grid-template-columns: minmax(0, 46rem); justify-content: center; }
}
.grid-2 > #tracker { margin-inline: auto; width: 100%; }
.tracker-tools { justify-content: center; }
.tracker-tabs { justify-content: center; }
#tracker > h3, #tracker > p, #tracker .tracker-note { text-align: center; }
#tracker .tracker-list { width: fit-content; max-width: 100%; margin-inline: auto; }
#tracker .tracker-foot { text-align: center; }
.tracker-report-body { text-align: center; }
.tracker-report-list { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.tracker-report summary { justify-content: center; }

/* How it works: tracker spans the full row so it is not pushed to one side */
@media (min-width: 820px) {
  .how-layout > #tracker { grid-column: 1 / -1; grid-row: auto; width: 100%; max-width: 46rem; margin-inline: auto; }
  .how-layout > .card:not(#tracker) { text-align: center; }
  .how-layout .price-list { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
  .how-layout > .card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 46rem; margin-inline: auto; width: 100%; }
}
.steps .step { text-align: left; }

/* Buttons that sit alone on a row are centered */
.section .container > p:has(> .btn), .u-b06fb3:has(> .btn) { text-align: center; }
.u-641fde { justify-content: center !important; }
.u-cc5fb6 { justify-content: center !important; }
.about-card .about-actions { text-align: center; }
.feature-grid ~ p:has(> .btn), .feature-grid + .note + p { text-align: center; }
.trade-links { text-align: center; }

/* Notes and FAQ blocks centered with their readable width */
main .note { margin-inline: auto; }
.faq-block { margin-inline: auto; }
.price-grid ~ .note, .addons ~ .note { text-align: center; }
.addons-lede { margin-inline: auto; text-align: center; }
.addons > h2 { text-align: center; }

/* Pricing: cards center their text and keep lists as a tidy centered block */
.price-card { text-align: center; }
.price-list { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.price-card .price-cta-row { justify-content: center; }
.offer { text-align: center; border-left-width: 1px; border-top: 3px solid var(--hl); }
.offer .offer-cta { display: flex; justify-content: center; }
.offer .offer-meter { margin-inline: auto; }

/* Features cards */
.feature-grid .card { text-align: left; }

/* Trade checklist pages: groups of cards centered, orphans in the middle of the last row */
.trade-group h2 { text-align: center; }
.trade-group .feature-grid { display: flex; flex-wrap: wrap; justify-content: center; }
.trade-group .feature-grid > .card { flex: 0 1 100%; box-sizing: border-box; }
@media (min-width: 700px) {
  .trade-group .feature-grid > .card { flex-basis: calc((100% - var(--sp-gap)) / 2); }
}
@media (min-width: 980px) {
  .trade-group .feature-grid > .card { flex-basis: calc((100% - 2 * var(--sp-gap)) / 3); }
}
.trade-checks { width: fit-content; max-width: 100%; margin-inline: auto; }
.trade-group .card h3 { text-align: center; }

/* Cards with a few short lines: center their text */
.about-card { text-align: left; }
.col-medium > .card { text-align: center; }
.col-medium > .card .oneline { margin-inline: auto; }

/* Contact: info column and form sit as one centered block */
.contact-split { max-width: 66rem; margin-inline: auto; }
@media (min-width: 860px) { .contact-split { align-items: center; } }
.contact-info { text-align: center; }
.contact-info .check-list { width: fit-content; max-width: 100%; margin-inline: auto; text-align: left; }
.contact-info .contact-note { margin-inline: auto; max-width: 36ch; }

/* Manage plan: cards line up in the middle column */
.mp-wrap { margin-inline: auto; }
.mp-card > h2, .mp-card > p:has(> .btn) { text-align: center; }
.mp-wrap > .note { text-align: center; }

/* Phones: nothing overflows */
@media (max-width: 699px) {
  .page-band .container { text-align: left; }
  .section-head { text-align: left; }
}

/* Full sample report */
.sample-report { font-size: 0.95rem; }
.sample-report .sr-badge { display: inline-block; margin: 0 0 0.5rem; padding: 0.15rem 0.6rem; border: 1px solid var(--hl); border-radius: 999px; color: var(--ink); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; }
.sample-report .sr-title { margin: 0 0 0.2rem; font-size: min(1.2rem, 6.4vw); }
.sample-report .sr-meta { color: var(--muted); margin: 0 0 0.9rem; }
.sample-report .sr-info { margin: 0 0 0.9rem; display: grid; gap: 0.3rem; }
.sample-report .sr-info-row { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.5rem; }
.sample-report dt { color: var(--muted); font-weight: 650; }
.sample-report dd { margin: 0; color: var(--ink); }
.sample-report .sr-h { margin: 1rem 0 0.4rem; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.sample-report .sr-checks, .sample-report .sr-mats { list-style: none; padding: 0; margin: 0; }
.sample-report .sr-checks li { padding: 0.2rem 0; color: var(--ink); font-weight: 650; }
.sample-report .sr-mats li { padding: 0.15rem 0; color: var(--ink); }
.sample-report .sr-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem; }
.sample-report .sr-photo { margin: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--bg); }
.sample-report .sr-photo img { display: block; width: 100%; height: auto; }
.sample-report .sr-photo figcaption { padding: 0.4rem 0.55rem; font-size: 0.8rem; color: var(--muted); }
.sample-report .sr-notes, .sample-report .sr-sign { margin: 0; color: var(--ink); }
.sample-report .sr-foot { margin: 1rem 0 0; font-size: 0.8rem; color: var(--muted); }

/* PREVIEW: faint fixed logo behind the whole page */
html { background: var(--bg); }
body { position: relative; background: transparent !important; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/site/assets/bg-logo-ink.svg") center center / 100% 100% no-repeat; opacity: 0.05; }
html[data-theme="dark"] body::before { opacity: 0.026; background-image: url("/site/assets/bg-logo-light.svg"); }
.section, .section-alt, .page-band, .hero, main, footer, .site-footer { background-color: transparent !important; }

@media (max-aspect-ratio: 1/1) { body::before { inset: auto; top: 0; left: 50%; height: 100vh; height: 100dvh; width: calc(100vh * 3296 / 2300); width: calc(100dvh * 3296 / 2300); aspect-ratio: 3296 / 2300; transform: translateX(-50%); background-size: 100% 100%; } }

/* 2026-10-10 one menu everywhere: account group at the end, signed in only */
.menu-group { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 2px solid var(--line); }
.menu-signout {
  display: flex; align-items: center; min-height: 44px; width: 100%;
  padding: 0.65rem 0.85rem; border: 0; border-radius: 4px; background: none;
  color: var(--ink); font: inherit; font-weight: 600; font-size: 1rem; text-align: left; cursor: pointer;
}
.menu-signout:hover, .menu-signout:focus-visible { background: var(--bg); outline: none; }

/* 2026-10-10 E8: short closing module at the bottom of Home */
.home-close-card { max-width: 46rem; margin: 0 auto; text-align: center; }
.home-close-card h2 { margin-top: 0; }
.home-close-card p { font-size: 1rem; }
.home-close-card .btn { min-height: 44px; }

/* 2026-10-11 QA r0025 ideas 14 and 15: footer text 16px, footer links at least 44px tall and wide */
.footer { font-size: 1rem; }
.footer-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.mp-card[hidden], .mp-card [hidden] { display: none !important; }
/* 2026-10-11 E13 (Ty 7:59 PM CT): the light/dark switch is an icon only (sun in dark mode, moon in light mode), 44px square, no words */
.theme-toggle .theme-label { display: none !important; }
.theme-toggle, .nav-inner .theme-toggle { width: 44px; min-width: 44px; padding: 0 !important; gap: 0; justify-content: center; }

/* 2026-10-12 ideas 25 and 27: customer link page. Hidden parts stay hidden (the print button and the frame
   showed on a turned off link), and on phones the report sits flat on the page with no box around it. */
.rv-actions[hidden], .rv-frame[hidden], .rv-note[hidden] { display: none !important; }
.rv-frame { min-height: 0; overflow: hidden; }
@media (max-width: 600px) {
  .rv-frame { border: 0; border-radius: 0; margin-left: -4vw; margin-right: -4vw; width: calc(100% + 8vw); max-width: none; }
}
/* 2026-10-12 E16: customer link page text 16px, logo link 44px tall */
.rv-note { font-size: 1rem; }
.rv-bar .logo { min-height: 44px; }
/* 2026-10-12 E16: no sideways scroll at 200% text size (header wraps, long words break, grids can shrink) */
.nav-inner { flex-wrap: wrap; }
.nav-inner .logo { min-width: 0; }
.contact-split > *, .contact-info, .steps > *, .step, .sample-report, .sample-report .sr-info-row > * { min-width: 0; }
.sample-report .sr-info-row { grid-template-columns: minmax(0, min(6.5rem, 30vw)) minmax(0, 1fr); }
/* 2026-10-12 E16: text box borders at least 3:1 against the page and the box, light and dark */
:root { --input-line: #7A756C; }
html[data-theme="dark"] { --input-line: #77818C; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="color"]):not(:focus),
textarea:not(:focus), select:not(:focus) { border-color: var(--input-line) !important; }

/* idea63: trade checklist pages, 16px minimum for intro and steps */
.note.trade-intro{font-size:1rem}
.trade-checks li{font-size:min(1rem, 6.2vw)}
/* idea63b: trade page disclaimer + trade index card summaries 16px */
.note.trade-note{font-size:1rem}
.trade-index .card p{font-size:1rem}

/* Q1 2026-10-14: a11y. h2 that keeps the h3 look; band now lives inside main */
h2.h3 { font-size: min(1.17em, 7vw); }
.card h2.h3 { font-size: min(1.05rem, 6.6vw); margin-bottom: 0.35rem; }
.card h2.h3 + p { margin-top: 0; }
.step h2.h3 { margin-bottom: 0.3rem; }
#tracker > h2.h3 { text-align: center; }
.trade-group .card h2.h3 { text-align: center; }
main.q1-main { display: block; }
main.q1-main > .section > .section { padding: var(--sp-section) 0 0; }
.nf-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.nf-links a { min-height: 44px; }
/* Q1 2026-10-14 idea 66 / F15: at large text sizes, text scales down to fit the screen width instead of breaking words. The original sizes above now read min(original, vw); at normal size nothing changes. */
:where(main, footer) :where(p, li, dd, dt, a, strong, em, span, label, summary) { font-size: min(1em, 6.2vw); }
:where(.card) h2 { font-size: min(1.5rem, 7.6vw); }
.price-grid > *, .feature-grid > *, .grid-2 > *, .how-layout > * { min-width: 0; }
.u-cc5fb6 > * { max-width: 100%; }
/* Q2 F19: body text at least 16px, small labels at least 14px; min() keeps 200% text inside the screen */
.card p, .price-alt, .note, .contact-info .contact-note, .form label, .trade-checks li, .sample-report, .sample-report .sr-photo figcaption, .sample-report .sr-foot { font-size: min(1rem, 6vw); }
.u-e34cd0 { font-size: min(1rem, 6vw) !important; }
.tracker-tab, .btn-sm, .nav-toggle { font-size: min(1rem, 6vw); }
.eyebrow, .tier-tag, .status-tag, .sample-report .sr-badge, .sample-report .sr-h { font-size: 1rem; }
.sample-report .sr-info-row { grid-template-columns: minmax(0, min(7rem, 30vw)) minmax(0, 1fr); }
details p, .tracker-note, .rv-note { font-size: min(1rem, 6vw); }
.nav-toggle, .nav-inner .nav-toggle { font-size: min(1rem, 6vw); }
/* Q2 F19: the How it works sample report keeps its width at large text (padding stops growing past the 320px size) */
.card:has(> .tracker-report), .card:has(.tracker-report) { padding-left: min(1.4rem, 7vw); padding-right: min(1.4rem, 7vw); }
details.tracker-report { padding-left: min(1.1rem, 5.5vw); padding-right: min(1.1rem, 5.5vw); }
.tracker-report-body { padding-left: min(1rem, 5vw); padding-right: min(1rem, 5vw); }
.sample-report .sr-title { font-size: min(1.2rem, 6vw); }
.sample-report .sr-info-row { display: flex; flex-wrap: wrap; column-gap: 0.5rem; }
.sample-report .sr-info-row > dt { flex: 0 0 min(6.5rem, 30vw); }
.sample-report .sr-info-row > dd { flex: 1 1 4.5rem; }

.app-shots{display:flex;gap:1rem;overflow-x:auto;margin-top:1.5rem;padding-bottom:.5rem;scroll-snap-type:x mandatory}
.app-shots:focus-visible{outline:3px solid currentColor;outline-offset:4px;border-radius:8px} /* t440 audit fix 9: the screenshot strip scrolls by keyboard */
.app-shots img{flex:0 0 auto;width:min(62vw,240px);height:auto;aspect-ratio:360/780;border-radius:18px;scroll-snap-align:start}
/* F29 (2026-10-18): sample report rows keep whole words; the value drops to its own line when the row is narrow. */
.sample-report .sr-info-row > dt, .sample-report .sr-info-row > dd, .sample-report .sr-checks li, .sample-report .sr-mats li { overflow-wrap: break-word; word-break: normal; }
.sample-report .sr-info-row > dd { flex: 1 1 8rem; }
/* F29b (2026-10-18): at 480px and below the sample report gets more room so long words never split. */
@media (max-width: 480px) {
  .card:has(.tracker-report) { padding-left: 0.6rem; padding-right: 0.6rem; }
  details.tracker-report { padding-left: 0.35rem; padding-right: 0.35rem; }
  .tracker-report-body { padding-left: 0.35rem; padding-right: 0.35rem; }
  .sample-report .sr-info-row > dt { flex: 1 1 100%; }
  .sample-report .sr-info-row > dd { flex: 1 1 100%; }
  .sample-report .sr-title { font-size: min(1.05rem, 5.2vw); }
}
/* F30b (2026-10-18): on narrow screens padding scales with the viewport, not with the text size, so enlarged text keeps more room for whole words. */
@media (max-width: 480px) {
  .card, .card:has(> .tracker-report), .card:has(.tracker-report) { padding-left: min(1rem, 4vw); padding-right: min(1rem, 4vw); }
  .offer { padding-left: min(1rem, 4vw); padding-right: min(1rem, 4vw); }
  .price-list li { padding-left: min(1.5rem, 5vw); }
  .price-list li::before { width: min(0.65rem, 2.4vw); height: min(0.65rem, 2.4vw); }
  .btn { padding-left: min(1.35rem, 4vw); padding-right: min(1.35rem, 4vw); }
  .price-cta-row .btn, .offer-cta .btn { flex: 1 1 auto; }
  .note { padding-left: min(1rem, 4vw); padding-right: min(1rem, 4vw); }
}
@media (max-width: 480px) {
  .step { padding: min(1.1rem, 4vw) min(1.1rem, 4vw) min(1.1rem, 4vw) min(1rem, 3.6vw); gap: min(0.85rem, 3vw); }
  .step::before { width: min(2.25rem, 9vw); height: min(2.25rem, 9vw); font-size: min(0.95rem, 4vw); }
}
@media (max-width: 480px) {
  .tracker-report summary { padding-left: min(1rem, 3vw); padding-right: min(1rem, 3vw); }
  .sample-report .sr-badge { padding-left: min(0.6rem, 2.2vw); padding-right: min(0.6rem, 2.2vw); letter-spacing: 0; }
}
@media (max-width: 480px) {
  .offer h2 { font-size: min(1.35rem, 6.2vw); }
}

@media (max-width: 480px) {
  .card h3 { font-size: min(1.05rem, 5.3vw); overflow-wrap: break-word; }
  .note { font-size: min(1rem, 5.2vw); }
  .tracker-tab { padding-left: min(0.85rem, 2.4vw); padding-right: min(0.85rem, 2.4vw); font-size: min(1rem, 5vw); }
}
@media (max-width: 480px) { .addons .price-card h3 { font-size: min(1.25rem, 5.6vw); } }

/* ===== Customer Proof Link viewer (1.0.2) ===== */
.rv-lang{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .75rem;margin:.5rem 0}
.rv-lang[hidden],.rv-okbox[hidden]{display:none !important}
.rv-lab{font-weight:700;font-size:1rem}
.rv-sel{font:inherit;font-size:1rem;min-height:44px;padding:.4rem .6rem;border:2px solid var(--line);border-radius:var(--radius);background:var(--panel,#fff);color:var(--ink);max-width:100%}
.rv-lang .btn,.rv-okbox .btn{min-height:44px}
.rv-okbox{margin:1rem 0 1.5rem;display:grid;gap:.5rem;justify-items:start}
.rv-okbox .btn{min-width:min(12rem,100%);max-width:100%;font-size:1.1rem;white-space:normal}
.rv-okbox .rv-note{max-width:100%;overflow-wrap: break-word}
@media (max-width:480px){.rv-okbox .btn{width:100%}.rv-sel{flex:1 1 10rem}}
@media print{.rv-lang,.rv-okbox{display:none !important}}
.rv-lang [hidden],.rv-okbox [hidden]{display:none !important}

/* F41/F42 (2026-10-19): big text on a wide screen (text size setting) gets the narrow layout, like a zoomed browser. ff-tw-s / ff-tw-m are set by i18n.js. */
@media (min-width: 820px) { .oneline { white-space: normal; } }
html.ff-tw-s .hero, html.ff-tw-s .grid-2, html.ff-tw-s .grid-3, html.ff-tw-s .price-grid, html.ff-tw-s .price-grid.price-grid-3, html.ff-tw-s .feature-grid, html.ff-tw-s .shot-grid, html.ff-tw-s .steps, html.ff-tw-s .steps.steps-2, html.ff-tw-s .how-layout, html.ff-tw-s .contact-split, html.ff-tw-s .grid-2:has(> #tracker) { grid-template-columns: minmax(0, 1fr); }
html.ff-tw-s .feature-grid > .card, html.ff-tw-s .how-layout > *, html.ff-tw-s .how-layout > #tracker, html.ff-tw-s .how-layout > .steps { grid-column: auto; grid-row: auto; }
html.ff-tw-s .hero-art { justify-self: stretch; }
html.ff-tw-m .grid-3, html.ff-tw-m .price-grid.price-grid-3, html.ff-tw-m .feature-grid, html.ff-tw-m .shot-grid, html.ff-tw-m .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
html.ff-tw-m .feature-grid > .card:last-child:nth-child(3n+1) { grid-column: auto; }
html.ff-tw-m .feature-grid > .card:last-child:nth-child(2n+1) { grid-column: 1 / -1; }

/* F43 (2026-10-19): logo link and small buttons are 44px tall */
.logo { min-height: 44px; }
.btn-sm { min-height: 44px; }
main li > a[href^="#"]:only-child { display: inline-flex; align-items: center; min-height: 44px; }
.tracker-tools .btn, #tracker-share { min-height: 44px; }
/* F43b (2026-10-19): sample checklist boxes are 24px */
.tracker-list input { width: 1.5rem; height: 1.5rem; margin-top: 0; }
/* F43c (2026-10-19): trade card title links are 44px tall */
.trade-index .card h2 > a, .trade-index .card h3 > a { display: inline-flex; align-items: center; min-height: 44px; }
/* F42b (2026-10-19): trade page card groups follow the big-text layout too */
html.ff-tw-s .trade-group .feature-grid > .card { flex-basis: 100%; }
html.ff-tw-m .trade-group .feature-grid > .card { flex-basis: calc((100% - var(--sp-gap)) / 2); }
/* F42c (2026-10-19): sample report rows stack label over value at big text */
html.ff-tw-s .sample-report .sr-info-row { display: block; }
html.ff-tw-s .sample-report .sr-info-row > dt { margin-bottom: 0.15rem; }
/* F42e large text lists */
html.ff-tw-s #tracker .tracker-list, html.ff-tw-s .trade-checks { width: auto; }
.tracker-list label > span { min-width: 0; }
html.ff-tw-s .trade-checks li { padding-inline-start: 1.1em; }
html.ff-tw-s .trade-checks li::before { width: 0.6em; height: 0.6em; top: 0.55em; }

/* QA retest 2 (2026-10-19) */
/* F43: numbered contents links on legal pages are standalone list links: at least 24px tall */
.legal-doc li > a[href^="#"]:only-child, .legal-card li > a[href^="#"]:only-child { display: flex; align-items: center; min-height: 44px; padding-block: 0.25rem; } /* F43: 44px tall contents links */
/* F40: the Crew section sits in a closed details block, so it has to fit at big text sizes without waiting for the word fit */
html.ff-tw-s .crew-add-grid, html.ff-tw-s .crew-member-edit, html.ff-tw-m .crew-add-grid, html.ff-tw-m .crew-member-edit { grid-template-columns: minmax(0, 1fr); }
html.ff-tw-s .crew-add { padding-inline: 0.4rem; }
html.ff-tw-s .crew-add label, html.ff-tw-s .crew-add label .opt, html.ff-tw-s .crew-add .opt, html.ff-tw-s .crew-role-pill, html.ff-tw-m .crew-add label .opt { font-size: max(0.72rem, 16px); }
html.ff-tw-s .crew-role-pill { flex-shrink: 0; }
/* F50: long eyebrow words (et "KONTROLLNIMEKIRJAD") at big text on a narrow screen: drop the rule line and most of the letter spacing */
html.ff-tw-xs .eyebrow::before { display: none; }
html.ff-tw-xs .eyebrow { letter-spacing: 0.02em; gap: 0; max-width: 100%; flex-wrap: wrap; }

/* Stage 3 (2026-10-19) F46: heading for screen readers only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* F78: long words in legal prose hyphenate (prose only, never buttons or labels) */
.ffl-legal-prose p, .ffl-legal-prose li, .ffl-legal-prose dd, .ffl-legal-prose td { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.ffl-legal-prose .btn, .ffl-legal-prose button, .ffl-legal-prose label, .ffl-legal-prose a.btn { -webkit-hyphens: manual; hyphens: manual; }
/* F73 v2: photo buttons take the full card width; at large text each photo gets its own row */
.photo-slot .thumbs { grid-template-columns: repeat(auto-fill, minmax(min(100%, 9em), 1fr)) !important; min-width: 0; }
.photo-slot .thumb { min-width: 0; overflow: visible; }
html .photo-slot .thumb .thumb-mark, html .photo-slot .thumb .thumb-del { width: 100%; box-sizing: border-box; max-width: none; overflow: visible; }

/* F95: every tap target is at least 44px wide, even a short label like "El" */
.tracker-tab, .nav-toggle, .btn, .chip, [role=tab] { min-width: 44px; box-sizing: border-box; }

/* F125 (2026-10-20): the header stays one row in every language. Logo, language, sun or moon, Menu never wrap.
   When a long Menu or language label would not fit, i18n.js adds ff-nav-tight and the logo word hides (mark stays), like the app header. */
.nav-inner { flex-wrap: nowrap !important; }
.nav-inner > * { flex-shrink: 0; }
.nav-inner .logo { min-width: 0; }
.nav-inner.ff-nav-tight .logo { font-size: 0; gap: 0; }

/* F139 (t433): no visible text under 16px anywhere. Small headings, tags, notes, labels, the Sample preview and the tab bar get a 16px floor that still grows with the text size. */
html :is(.eyebrow, .tier-tag, .status-tag, .ffr-group, .lede, .home-sync, .ffs-note, .ffs-alt, .tag, .auth-label, .ffs-pill, .acc-sum, .step-done, .snap-sub, label, .hint, .opt, small, .pill, .badge, [class^="sample-folio"], [class*=" sample-folio"], [class^="sample-folio"] *, [class*=" sample-folio"] *, .sample-folio-mock *, .seg button, [role=tab]) { font-size: max(1rem, 16px) !important; }
html .ffs-tab > span { font-size: max(1rem, 16px) !important; }
html :is(.ffs-textbtn, .textbtn, .link-btn) { font-size: max(1rem, 16px) !important; }

/* F144: Korean wraps between words, not inside them */
:lang(ko), :lang(ko) * { word-break: keep-all; overflow-wrap: anywhere; }

/* F148 (t439): inline Terms, Privacy and Billing links get a 44px tall tap area; inline padding grows the hit box, not the line */
:is(p, label, li, span, small) > a:is([href*="terms"], [href*="privacy"], [href*="billing"], [href*="manage-plan"], [href^="mailto:"]):not(.btn):not(.ffs-btn),
[data-ff-legal] a, .ff-legal-p a { display: inline; padding-top: 13px; padding-bottom: 13px; }
/* t440 audit fix 11: other in-sentence links get the same 44px tap height; zero specificity so styled links keep their own look */
:where(p > a[href]:not(.btn, .ffs-btn, [class*="btn"], [role="button"])) { display: inline; padding-top: 13px; padding-bottom: 13px; }
/* F156 (t439): step titles and FAQ questions wrap evenly, never mid-word */
.step-title, details > summary, .faq summary { text-wrap: balance; overflow-wrap: normal; word-break: normal; hyphens: manual; }

/* F168 (t440): buttons and form fields use the page font, not the browser's Arial; the Type DELETE box matches the other inputs */
button, input, select, textarea { font: inherit; }
.mp-delete-form input { display: block; min-height: 48px; padding: 0.7rem 0.9rem; font-size: 1rem; border: 2px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); }
.mp-delete-form input:focus { outline: 2px solid var(--accent); border-color: var(--ink); }
/* F156/F175 (t442): headings and FAQ questions that need two lines split evenly, never with one word alone on the last line */
h1, h2, h3, .faq summary, details > summary { text-wrap: balance; overflow-wrap: normal; word-break: normal; }

/* t444 F175: on phones the tagline and section labels drop the capitals and letter spacing, so they fit on one line */
@media (max-width: 600px) { .eyebrow, .job-group-title { text-transform: none !important; letter-spacing: 0 !important; } }
/* F181 (t444): a short in-sentence legal link (de "AGB") gets a 44px wide tap area; the padding grows the hit box and the negative margin keeps the line as it was */
:is(p, li, small, label) > a:is([href*="terms"], [href*="privacy"]):not(.btn) { padding-inline: 6px; margin-inline: -6px; }
/* t444 F156: on narrow phones an FAQ card's side padding gives its question about 13px more room so it stays on one line at 16px */
@media (max-width: 360px) { .faq-block details { padding-left: 0.7rem; padding-right: 0.7rem; } }

/* t445 (Ty 3:23 PM Oct 23): one shared footer on every page (Home, About us, How it works, Pricing, Get the app, Contact, Legal).
   From 1024px up the links stay on ONE row in every language; the copyright line sits beside them when there is room, above them when not. */
/* Container query, not a media query: rem here follows the page text size, so 200% text gets room to wrap instead of overlapping. 56rem = 896px at 100% (a 1024px screen gives 942px). */
.footer-inner { container-type: inline-size; container-name: fffoot; }
@container fffoot (min-width: 56rem) {
  .footer-links { flex-wrap: nowrap; white-space: nowrap; margin-left: auto; }
  .footer-links a { white-space: nowrap; flex-shrink: 0; }
}

/* ===== F156/F175 one line (b-site-oneline) =====
   Home, how it works, features, FAQ and pricing headings stay on one line.
   Size stays at the body size (never under 16px) so a long translation fits the box.
   The page margin is a little wider, the step title uses the full card, and eyebrows
   drop letter-spacing. The short eyebrow rule hides on a narrow screen. */
html body main .container,
html body .page-band .container { width: min(1080px, calc(100% - 24px)); }
/* F220: 404 content uses the same side inset as the shared header, not the 4px main inset.
   Big text adds 0.4rem of padding to every .container. The header padding stays 0, so the 404 column does too. */
html body.page-404 main .container { width: min(1080px, 92%); padding-left: 0; padding-right: 0; }
html body main .hero h1,
html body .page-band h1,
html body main .page-band h1,
html body main .section-head h2,
html body main .home-close h2,
html body main .step :is(h2, h3),
html body main .faq-block summary,
html body main #faq summary,
html body main .price-card > :is(h2, h3),
html body main .addons > h2,
html body main .offer > h2,
html body main .feature-grid :is(h2, h3),
html body main #tracker > :is(h2, h3),
html body main .how-layout > .card > h3,
html body .page-band .eyebrow,
html body main .eyebrow {
  font-size: max(1rem, 16px);
  letter-spacing: 0;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}
@media (min-width: 760px) {
  html body main .hero h1,
  html body .page-band h1,
  html body main .page-band h1,
  html body main .section-head h2,
  html body main .home-close h2 { font-size: max(1.35rem, 16px); }
}
@media (min-width: 1100px) {
  html body .page-band h1,
  html body main .page-band h1,
  html body main .hero h1 { font-size: max(1.7rem, 16px); }
}
html body .page-band .eyebrow,
html body main .eyebrow { letter-spacing: 0; gap: 0.45rem; }
@media (max-width: 420px) {
  html body .page-band .eyebrow::before,
  html body main .eyebrow::before { display: none; }
  html body .page-band .eyebrow,
  html body main .eyebrow { gap: 0; }
}
html body main .faq-block details { padding-left: 0.55rem; padding-right: 0.55rem; }
html body main .faq-block summary { min-height: 44px; }
html body main .step { grid-template-columns: 1fr; }
html body main .step::before { font-size: max(1rem, 16px); margin-bottom: 0.35rem; }
@media (min-width: 700px) {
  html body main .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1200px) {
  html body main .steps:not(.steps-2) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html body main .price-card,
html body main .feature-grid > .card,
html body main .how-layout > .card { padding-left: 0.85rem; padding-right: 0.85rem; }
/* F180: header and language-button rules also live here so they apply with the first stylesheet.
   i18n.css repeats them. Chromium can paint before i18n.css, and these controls must not move. */
.ffl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.3rem; min-width: 44px; min-height: 44px; padding: 0 0.55rem; margin: 0; border: 1.5px solid var(--line, #c8c4bb); border-radius: 999px; background: var(--panel, #fff); color: var(--ink, #121417); font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: 0.02em; cursor: pointer; flex: none; -webkit-tap-highlight-color: rgba(196, 122, 44, 0.2); }
.ffl-ico { flex: none; }
@media (max-width: 380px) { .ffl-code { display: none; } .ffl-btn { padding: 0 0.5rem; } }
/* 2026-10-20 header (Ty): language, light/dark and Menu sit together at the right edge in that order on every page, never centered.
   Sample (login page only) sits to the left of language, so the other three never move. */
.nav-inner { flex-wrap: wrap; position: relative; gap: 0 !important; row-gap: 0.4rem !important; }
.nav > .container.nav-inner { width: min(1080px, 92%) !important; max-width: none !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; }
.nav-inner > .ffl-btn { margin-inline-start: auto !important; margin-inline-end: 0 !important; }
.nav-inner > .theme-toggle, .nav-inner > .nav-toggle { margin-inline-start: 0.4rem !important; margin-inline-end: 0 !important; flex-shrink: 0; }
.nav-inner > .ffl-btn ~ .theme-toggle { margin-inline-start: 0.4rem !important; }
.nav-inner > .logo { min-width: 0; flex-shrink: 1; }
.nav-inner > #btn-sample { margin-inline-start: auto !important; }
.nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.4rem !important; }
@media (max-width: 380px) {
  .nav-inner > .logo { gap: 0.35rem; font-size: 0.95rem; letter-spacing: 0; }
  .nav-inner > .logo .logo-mark { width: 26px; height: 26px; }
  .nav-inner > .theme-toggle, .nav-inner > .nav-toggle, .nav-inner > .ffl-btn ~ .theme-toggle, .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.15rem !important; }
  .nav-inner > .nav-toggle { padding-left: 0.4rem !important; padding-right: 0.4rem !important; min-width: 44px !important; }
}
@media (max-width: 340px) { .nav-inner > .logo { font-size: 0; gap: 0; min-width: 44px; min-height: 44px; } .nav-inner > .logo .logo-mark { width: 32px; height: 32px; } }
@media (max-width: 440px) { .nav-inner:has(> #btn-sample:not([hidden])) > .logo { font-size: 0; gap: 0; min-width: 44px; min-height: 44px; } .nav-inner:has(> #btn-sample:not([hidden])) > .logo .logo-mark { width: 32px; height: 32px; } }
/* same spacing between the right side controls on every page (beats older page rules) */
header.nav > .nav-inner > .ffl-btn ~ .theme-toggle, header.nav > .nav-inner > .theme-toggle ~ .nav-toggle, header.nav > .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.4rem !important; margin-inline-end: 0 !important; }
@media (max-width: 380px) { header.nav > .nav-inner > .ffl-btn ~ .theme-toggle, header.nav > .nav-inner > .theme-toggle ~ .nav-toggle, header.nav > .nav-inner > #btn-sample ~ .ffl-btn { margin-inline-start: 0.15rem !important; } }
/* very narrow phones in long languages: only the logo mark shows so the controls stay on one row */
@media (max-width: 380px) { header.nav > .nav-inner > .logo { font-size: 0 !important; gap: 0 !important; min-width: 44px; min-height: 44px; } header.nav > .nav-inner > .logo .logo-mark { width: 32px; height: 32px; } }
/* login page on 320px phones in long languages: the logo steps aside so Sample, language, light/dark and Menu stay on one row */
@media (max-width: 340px) { header.nav > .nav-inner:has(> #btn-sample:not([hidden])) > .logo { display: none !important; } }
/* F125 (2026-10-21): header one row at 100% and 200% text, every page. i18n.js steps up ff-nav-t1..t4 until it fits:
   t1 hides the logo word, t2 compacts the language pill to its code (no globe), t3 hides the logo mark, t4 tightens gaps. Tap targets stay 44px. */
.nav-inner { flex-wrap: nowrap !important; }
.nav-inner > * { flex-shrink: 0; }
.nav-inner > .logo { min-width: 0; flex-shrink: 1; overflow: hidden; }
.nav-inner.ff-nav-t1 > .logo { font-size: 0 !important; gap: 0 !important; }
.nav-inner.ff-nav-t2 .ffl-btn svg { display: none !important; }
.nav-inner.ff-nav-t2 .ffl-code { display: inline !important; }
.nav-inner.ff-nav-t3 > .logo { display: none !important; }
.nav-inner.ff-nav-t3 > :nth-child(2) { margin-inline-start: auto !important; }
.nav-inner.ff-nav-t4 { gap: 0.2rem !important; padding-inline: 0.4rem !important; }
.nav-inner.ff-nav-t4 > button { padding-inline: 0.45rem !important; margin-inline: 0 !important; }
/* t5, t6: last steps before wrapping at 200% text. Labels shrink but never below 16px. */
.nav-inner.ff-nav-t5 > button, .nav-inner.ff-nav-t5 .ffl-code { font-size: max(16px, 0.75rem) !important; }
.nav-inner.ff-nav-t6 > button, .nav-inner.ff-nav-t6 .ffl-code { font-size: 16px !important; padding-inline: 0.35rem !important; }
.nav-inner.ff-nav-t6 { gap: 4px !important; padding-inline: 6px !important; }
.nav-inner.ff-nav-t6 > * { margin-inline: 0 !important; }
.nav-inner.ff-nav-t6 > :first-child:not(.logo), .nav-inner.ff-nav-t6 > .logo + * { margin-inline-start: auto !important; }
.nav-inner.ff-nav-t6 > button { padding-inline: 6px !important; min-width: 44px !important; gap: 0 !important; }
/* audit fix 13 (t442): until the language button is inserted, the theme button keeps its place, so Sample and the logo do not jump */
.nav-inner:not(:has(> .ffl-btn)) > #btn-theme { margin-inline-start: calc(0.8rem + 64px) !important; }
@media (max-width: 380px) { .nav-inner:not(:has(> .ffl-btn)) > #btn-theme { margin-inline-start: 46px !important; } }
/* F180: the site theme button is added by script. Hold its 44px slot so language and Menu do not jump when it arrives. */
header.nav .nav-inner > .ffl-btn:not(:has(~ .theme-toggle)) { margin-inline-end: calc(44px + 0.4rem) !important; }
@media (max-width: 380px) { header.nav .nav-inner > .ffl-btn:not(:has(~ .theme-toggle)) { margin-inline-end: calc(44px + 0.15rem) !important; } }

/* wordFit zoom scales the hero heading. Undo that scale on the box so the line stays 1.4em and the gap on .lede does not move. */
.hero h1.ff-z45 { zoom: 0.45; height: calc(1.4em / 0.45); }
.hero h1.ff-z46 { zoom: 0.46; height: calc(1.4em / 0.46); }
.hero h1.ff-z47 { zoom: 0.47; height: calc(1.4em / 0.47); }
.hero h1.ff-z48 { zoom: 0.48; height: calc(1.4em / 0.48); }
.hero h1.ff-z49 { zoom: 0.49; height: calc(1.4em / 0.49); }
.hero h1.ff-z50 { zoom: 0.5; height: calc(1.4em / 0.5); }
.hero h1.ff-z51 { zoom: 0.51; height: calc(1.4em / 0.51); }
.hero h1.ff-z52 { zoom: 0.52; height: calc(1.4em / 0.52); }
.hero h1.ff-z53 { zoom: 0.53; height: calc(1.4em / 0.53); }
.hero h1.ff-z54 { zoom: 0.54; height: calc(1.4em / 0.54); }
.hero h1.ff-z55 { zoom: 0.55; height: calc(1.4em / 0.55); }
.hero h1.ff-z56 { zoom: 0.56; height: calc(1.4em / 0.56); }
.hero h1.ff-z57 { zoom: 0.57; height: calc(1.4em / 0.57); }
.hero h1.ff-z58 { zoom: 0.58; height: calc(1.4em / 0.58); }
.hero h1.ff-z59 { zoom: 0.59; height: calc(1.4em / 0.59); }
.hero h1.ff-z60 { zoom: 0.6; height: calc(1.4em / 0.6); }
.hero h1.ff-z61 { zoom: 0.61; height: calc(1.4em / 0.61); }
.hero h1.ff-z62 { zoom: 0.62; height: calc(1.4em / 0.62); }
.hero h1.ff-z63 { zoom: 0.63; height: calc(1.4em / 0.63); }
.hero h1.ff-z64 { zoom: 0.64; height: calc(1.4em / 0.64); }
.hero h1.ff-z65 { zoom: 0.65; height: calc(1.4em / 0.65); }
.hero h1.ff-z66 { zoom: 0.66; height: calc(1.4em / 0.66); }
.hero h1.ff-z67 { zoom: 0.67; height: calc(1.4em / 0.67); }
.hero h1.ff-z68 { zoom: 0.68; height: calc(1.4em / 0.68); }
.hero h1.ff-z69 { zoom: 0.69; height: calc(1.4em / 0.69); }
.hero h1.ff-z70 { zoom: 0.7; height: calc(1.4em / 0.7); }
.hero h1.ff-z71 { zoom: 0.71; height: calc(1.4em / 0.71); }
.hero h1.ff-z72 { zoom: 0.72; height: calc(1.4em / 0.72); }
.hero h1.ff-z73 { zoom: 0.73; height: calc(1.4em / 0.73); }
.hero h1.ff-z74 { zoom: 0.74; height: calc(1.4em / 0.74); }
.hero h1.ff-z75 { zoom: 0.75; height: calc(1.4em / 0.75); }
.hero h1.ff-z76 { zoom: 0.76; height: calc(1.4em / 0.76); }
.hero h1.ff-z77 { zoom: 0.77; height: calc(1.4em / 0.77); }
.hero h1.ff-z78 { zoom: 0.78; height: calc(1.4em / 0.78); }
.hero h1.ff-z79 { zoom: 0.79; height: calc(1.4em / 0.79); }
.hero h1.ff-z80 { zoom: 0.8; height: calc(1.4em / 0.8); }
.hero h1.ff-z81 { zoom: 0.81; height: calc(1.4em / 0.81); }
.hero h1.ff-z82 { zoom: 0.82; height: calc(1.4em / 0.82); }
.hero h1.ff-z83 { zoom: 0.83; height: calc(1.4em / 0.83); }
.hero h1.ff-z84 { zoom: 0.84; height: calc(1.4em / 0.84); }
.hero h1.ff-z85 { zoom: 0.85; height: calc(1.4em / 0.85); }
.hero h1.ff-z86 { zoom: 0.86; height: calc(1.4em / 0.86); }
.hero h1.ff-z87 { zoom: 0.87; height: calc(1.4em / 0.87); }
.hero h1.ff-z88 { zoom: 0.88; height: calc(1.4em / 0.88); }
.hero h1.ff-z89 { zoom: 0.89; height: calc(1.4em / 0.89); }
.hero h1.ff-z90 { zoom: 0.9; height: calc(1.4em / 0.9); }
.hero h1.ff-z91 { zoom: 0.91; height: calc(1.4em / 0.91); }
.hero h1.ff-z92 { zoom: 0.92; height: calc(1.4em / 0.92); }
.hero h1.ff-z93 { zoom: 0.93; height: calc(1.4em / 0.93); }
.hero h1.ff-z94 { zoom: 0.94; height: calc(1.4em / 0.94); }
.hero h1.ff-z95 { zoom: 0.95; height: calc(1.4em / 0.95); }
.hero h1.ff-z96 { zoom: 0.96; height: calc(1.4em / 0.96); }
.hero h1.ff-z97 { zoom: 0.97; height: calc(1.4em / 0.97); }
.hero h1.ff-z98 { zoom: 0.98; height: calc(1.4em / 0.98); }
.hero h1.ff-z99 { zoom: 0.99; height: calc(1.4em / 0.99); }

/* F185: the header logo link stays at least 44 by 44, including when the word is hidden.
   The extra width comes out of the gap before the language button, so language, theme and Menu stay on the right edge.
   Login at 340px and below still hides the logo. This rule does not change display. */
header.nav > .nav-inner > a.logo {
  min-width: 44px;
  min-height: 44px;
  box-sizing: border-box;
}
/* F183 footer links on one row, F184 one tagline.
   Below 768px the tagline wraps in the row, fully visible, and does not stick out.
   From 768px up it stays one line. Its size stays at 16px.
   The seven links are one row from 1024px up. At 320 and 390 the short labels,
   the same seven links in fewer letters, stay on one row.
   Container queries use rem, so 200% text lets the links wrap instead of overlapping. */
html body .footer > .container.footer-inner {
  width: min(1080px, 100%);
  max-width: 1080px;
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
  container-type: inline-size;
  container-name: fffoot;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0.15rem;
}
html body .footer .footer-brand {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  font-size: 16px;
  line-height: 1.35;
  flex: none;
}
@media (min-width: 768px) {
  html body .footer .footer-brand {
    white-space: nowrap;
  }
}
html body .footer .footer-links {
  margin-left: 0;
  max-width: none;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.35rem;
}
html body .footer .footer-links .ff-short { display: none; }
html body .footer .footer-links .ff-full { display: inline; }
@container fffoot (min-width: 64rem) {
  html body .footer .footer-links {
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: center;
    gap: 0 0.75rem;
  }
  html body .footer .footer-links a {
    white-space: nowrap !important;
    max-width: none !important;
    flex-shrink: 0;
  }
}
@container fffoot (min-width: 16rem) and (max-width: 30rem) {
  html body .footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 6px;
    width: 100%;
  }
  html body .footer .footer-links .ff-full { display: none; }
  html body .footer .footer-links .ff-short { display: inline; }
  html body .footer .footer-links a {
    white-space: nowrap !important;
    max-width: none !important;
    flex: 0 0 auto;
    letter-spacing: 0;
    padding-left: 0;
    padding-right: 0;
    min-width: 44px;
    min-height: 44px;
  }
}
/* t446: at 481px to 800px the full footer labels wrap to 2 rows in ms, ru and uk, so those three use the same short labels as small widths. */
@media (min-width: 481px) and (max-width: 800px) {
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-full { display: none; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-short { display: inline; }
}
/* t446 (Ty 7:49 PM Oct 23): the footer tagline stays on ONE line. Below 768px it is the short line, from 768px up the full line. */
html body .footer .footer-brand { white-space: nowrap; text-wrap: nowrap; }
html body .footer .footer-brand .ff-tag-short { display: none; }
@media (max-width: 767.98px) {
  html body .footer .footer-brand .ff-tag-full { display: none; }
  html body .footer .footer-brand .ff-tag-short { display: inline; }
}

/* F187 F188: footer links keep their natural letter-spacing and natural width.
   One row comes from the short labels and a tight gap, not from squeezing glyphs.
   Below 480px the Home link is hidden. The logo still goes home.
   Each link is at least 44 by 44. Weight 400 selects the regular face.
   Noto Sans is named so the width stays the one these labels were measured with.
   Big text (ff-tw-xs, ff-tw-s, ff-tw-m) may wrap so nothing overlaps or scrolls sideways. */
html body .footer .footer-links {
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 100%;
}
html body .footer .footer-links a {
  letter-spacing: 0 !important;
  word-spacing: normal !important;
  font-stretch: normal !important;
  font-weight: 400;
  font-family: "Noto Sans", "Segoe UI", system-ui, sans-serif;
  font-size: max(16px, 1rem);
  line-height: 1.2;
  flex: 0 0 auto !important;
  min-width: 44px;
  min-height: 44px;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  white-space: nowrap !important;
  max-width: none !important;
}
@media (max-width: 767.98px) {
  html body .footer .footer-links .ff-full { display: none !important; }
  html body .footer .footer-links .ff-short { display: inline !important; }
}
@media (min-width: 768px) {
  html body .footer .footer-links { gap: 0 0.25rem; }
  html body .footer .footer-links .ff-full { display: inline !important; }
  html body .footer .footer-links .ff-short { display: none !important; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-full { display: inline !important; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-short { display: none !important; }
}
@media (min-width: 1024px) {
  html body .footer .footer-links { gap: 0 0.75rem; }
}
@media (max-width: 479.98px) {
  html body .footer .footer-links { gap: 0 6px; flex-wrap: wrap; justify-content: center; }
  html body .footer .footer-links a[href="/site/"] { display: none !important; }
  html body .footer .footer-brand { letter-spacing: 0; word-spacing: normal; }
}
html.ff-tw-xs body .footer .footer-links,
html.ff-tw-s body .footer .footer-links,
html.ff-tw-m body .footer .footer-links {
  flex-wrap: wrap !important;
}
html.ff-tw-xs body .footer .footer-links a,
html.ff-tw-s body .footer .footer-links a,
html.ff-tw-m body .footer .footer-links a {
  white-space: normal !important;
}
/* F193 / F298: at 768px and below, short labels stay on one row when they fit.
   The gap is 8px, and 6px from 480px down, so a 320px row does not need
   negative letter-spacing. If a language is still wider, the row wraps.
   Each link stays at least 44px tall and the type stays 16px. */
@media (max-width: 768px) {
  html body .footer .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    justify-content: safe center;
    align-items: center;
    gap: 0 8px;
    width: 100%;
    max-width: 100%;
  }
  html body .footer .footer-links .ff-full { display: none !important; }
  html body .footer .footer-links .ff-short { display: inline !important; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-full { display: none !important; }
  html:is([lang="ms"], [lang="ru"], [lang="uk"]) body .footer .footer-links .ff-short { display: inline !important; }
  html body .footer .footer-links a {
    box-sizing: border-box;
    padding-inline: 0;
    min-width: 44px;
    min-height: 44px;
    flex: 0 0 auto !important;
    font-size: max(16px, 1rem);
  }
}
@media (max-width: 479.98px) {
  /* F203: Home and Pricing hide by href. Those addresses are not rewritten.
     The app link hides by class. storelink.js rewrites its href on iPhone, so an href selector would miss it.
     About, How it works, Contact and Legal stay. */
  html body .footer .footer-links a[href="/site/pricing"],
  html body .footer .footer-links a.ff-foot-app { display: none !important; }
  html body .footer .footer-links { flex-wrap: wrap; justify-content: center; gap: 0 6px; }
  html body .footer .footer-links a { padding-inline: 0; letter-spacing: 0; word-spacing: normal; }
}

/* F290 F298: phone side inset is at least 12px from 320px through 768px.
   The shared column was calc(100% - 0.5rem), 4px a side. r76-i also sets
   padding 4px !important on main.q1-main .container up to 520px, and
   r76-o / r76-p set width calc(100% - 8px). The doubled class is more
   specific, so this wins without editing those files. Text and cards
   sit in this column. border-box keeps the padding inside the viewport. */
@media (max-width: 768px) {
  html body main.q1-main .container.container,
  html body main .container.container,
  html body .page-band > .container.container,
  html body .page-band .container.container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  html body .footer > .container.footer-inner.footer-inner {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html body .footer .footer-links.footer-links {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  html body .footer .footer-links.footer-links a {
    letter-spacing: 0 !important;
    word-spacing: normal !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  html body .footer .footer-brand {
    letter-spacing: 0 !important;
    word-spacing: normal !important;
  }
}
/* Greek short tagline is 2px wider than a 320px row in the UI font.
   Arial at 16px fits that one line. Spacing stays at normal. */
html[lang="el"] body .footer .footer-brand {
  font-family: Arial, Arimo, "Noto Sans", sans-serif;
}
@media (max-width: 479.98px) {
  html body .footer .footer-links.footer-links {
    column-gap: 6px !important;
  }
}