/* =====================================================================
   Home (redesign 2026-10-31, plan BRAND-SITE-REDESIGN-PLAN-2026-10-31).
   One spacing scale (tokens: --sec-y, --pad-card, --gap), one container,
   same-size tiles/steps/chips/buttons. Dark and light alternate:
   hero dark > picker light > included dark > pricing light > how dark >
   trust light > FAQ dark > book light > footer paper.
   Motion: enter, tap or autoplay only. Nothing scrubs, nothing follows
   the cursor. Reveals sit under html.js:not(.rm), so no-JS and reduced
   motion get the finished page.
   ===================================================================== */

:root { --c-brass-ink: #7a5a2e; }   /* brass on light fields: about 5.6:1 on --c-field */

/* ---------- Section rhythm: one padding, always ---------- */
main > .sec { padding-block: var(--sec-y); scroll-margin-top: var(--nav-h); }
.sec--light {
  background: var(--c-field);
  color: var(--c-ink);
  color-scheme: light;
}
.sec--light .h-sec, .sec--light .h-card { color: var(--c-ink); }
.sec--light .sub { color: var(--c-ink-2); }
.sec--light .eyebrow { color: var(--c-brass-ink); }
.sec--light .eyebrow::before { background: var(--c-brass-ink); }
.sec--light :focus-visible { outline-color: var(--c-ink); }
.sec--light ::selection { background: var(--c-ink); color: var(--c-paper); }

/* One heading block: eyebrow, h2, one short sub */
.sec-head { gap: var(--sp-3); margin-bottom: clamp(2.5rem, 4vw, 3.5rem); }
.sec-head .sub { max-width: 34em; }
.sec-head--center .sub { margin-inline: auto; }
.sec-btns { margin-top: clamp(2.5rem, 4vw, 3.5rem); }

/* Mark: a small plus that turns to a cross when open (tiles, steps) */
.tile-mark { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-hair); }
.tile-mark::before, .tile-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--c-brass); transform: translate(-50%, -50%); transition: transform var(--dur-ui) var(--ease-out); }
.tile-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
[aria-expanded="true"] > .tile-mark::after, [aria-pressed="true"] > .tile-mark::after { transform: translate(-50%, -50%) rotate(0deg); }

/* ---------- 1. Hero: copy left, one phone playing the walkthrough ---------- */
.sec-hero { display: flex; align-items: center; }
main > .sec-hero { padding-top: calc(var(--nav-h) + clamp(2rem, 5vh, 3.5rem)); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--gap) clamp(2.5rem, 5vw, 6rem);
  align-items: center;
}
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.hero-copy .h-hero { max-width: 11em; }
.hero-sub { max-width: 30em; }
.hero-cta { margin-top: var(--sp-2); }
.hero-foot a { color: var(--c-fg); }

.hero-stage { --phone-w: 17.5rem; display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); margin: 0; justify-self: center; }
.hero-phone {
  display: block;
  width: var(--phone-w);
  padding: 7px;
  border-radius: 38px;
  background: #0d0b09;
  border: 1px solid rgba(244, 236, 223, 0.18);
  box-shadow: 0 50px 80px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(0, 0, 0, 0.6);
}
.hero-screen { position: relative; display: block; aspect-ratio: 480 / 1038; border-radius: 31px; overflow: hidden; background: #0c0a08; }
.hero-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 300ms var(--ease-std); }
.hero-clip.is-on { opacity: 1; }
.hero-dots { display: flex; gap: var(--sp-2); }
.hero-dot {
  position: relative;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  background: transparent;
  padding: 0;
}
.hero-dot::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 9px; height: 9px;
  border-radius: 50%;
  border: 1px solid var(--c-brass);
  background: transparent;
  transform: translate(-50%, -50%);
  transition: width var(--dur-ui) var(--ease-out), background var(--dur-ui) var(--ease-std);
}
.hero-dot[aria-pressed="true"]::before { width: 26px; border-radius: 6px; background: var(--c-brass); }
.hero-cap { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); max-width: 32rem; font-size: var(--fs-xs); color: var(--c-brass); text-align: center; }
.hero-cap b { font-weight: var(--fw-medium); }
.hero-pause {
  flex: none;
  min-height: var(--tap);
  min-width: var(--tap);
  padding: 0 0.9rem;
  border: 1px solid var(--c-hair);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-fg-2);
  font-size: var(--fs-xs);
}
@media (hover: hover) and (pointer: fine) {
  .hero-pause:hover { color: var(--c-fg); border-color: rgba(244, 236, 223, 0.3); }
}

/* ---------- 2. Picker: See one like yours ---------- */
.pick { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); }
.pick-chips {
  display: flex;
  gap: var(--sp-3);
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 4px var(--gutter);
  margin-inline: calc(-1 * var(--gutter));
  width: calc(100% + 2 * var(--gutter));
  -webkit-overflow-scrolling: touch;
}
.pick-chips::-webkit-scrollbar { display: none; }
.pick-chip {
  flex: none;
  width: 7.75rem;
  height: 44px;
  scroll-snap-align: center;
  border: 1px solid rgba(23, 17, 14, 0.28);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--c-ink);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: background var(--dur-ui) var(--ease-std), color var(--dur-ui) var(--ease-std);
}
.pick-chip[aria-selected="true"] { background: var(--c-ink); color: var(--c-paper); border-color: var(--c-ink); }
@media (min-width: 1024px) {
  .pick-chips { justify-content: center; overflow: visible; padding-inline: 0; margin-inline: 0; width: 100%; }
}
@media (hover: hover) and (pointer: fine) { .pick-chip:not([aria-selected="true"]):hover { border-color: var(--c-ink); } }

.pick-panel { display: flex; flex-direction: column; align-items: center; gap: var(--sp-8); width: 100%; }
.pick-stage { display: flex; align-items: flex-end; justify-content: center; gap: clamp(1.5rem, 3vw, 3rem); width: 100%; }
.pick-phone {
  position: relative;
  flex: none;
  width: min(16.25rem, 100%);
  aspect-ratio: 450 / 750;
  overflow: hidden;
  border-radius: 28px;
  border: 7px solid #17110e;
  background: var(--c-field-2);
  box-shadow: 0 40px 70px -40px rgba(23, 17, 14, 0.55);
}
.pick-laptop {
  display: none;
  flex: 0 1 52rem;
  min-width: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--c-ink-hair);
  background: var(--c-card-light);
  box-shadow: 0 1px 2px rgba(23, 17, 14, 0.05), 0 40px 70px -40px rgba(23, 17, 14, 0.5);
}
.pick-bar { display: flex; gap: 5px; padding: 10px 14px; background: #ebe4d7; border-bottom: 1px solid var(--c-ink-hair); }
.pick-bar i { display: block; width: 8px; height: 8px; border-radius: 50%; background: rgba(23, 17, 14, 0.16); }
.pick-desk { position: relative; aspect-ratio: 1200 / 750; }
.pick-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 250ms var(--ease-std); }
.pick-img.is-on { opacity: 1; }
@media (min-width: 1024px) {
  .pick-laptop { display: block; }
  .pick-phone { width: 15rem; }
}
.pick-info { display: flex; flex-direction: column; align-items: center; gap: var(--sp-5); text-align: center; }
.pick-meta { display: flex; flex-direction: column; gap: var(--sp-1); transition: opacity 200ms var(--ease-std), transform 200ms var(--ease-out); }
.pick-meta.is-swap { opacity: 0; transform: translateY(8px); }
.pick-name { font-family: var(--font-serif); font-variation-settings: "opsz" 48; font-size: var(--fs-3xl); font-weight: var(--fw-head); line-height: 1.15; letter-spacing: -0.01em; color: var(--c-ink); }
.pick-kind { color: var(--c-ink-2); }
.pick-all { margin-top: calc(-1 * var(--sp-2)); }
.pick-all a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--c-ink); font-size: var(--fs-sm); text-decoration-color: rgba(23, 17, 14, 0.4); }

/* ---------- 3. Included: five same-size tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  background: var(--c-card);
  border: 1px solid var(--c-hair);
  transition: border-color 500ms var(--ease-out);
}
.tile:last-child { grid-column: 1 / -1; }
.tile-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  width: 100%;
  flex: 1 1 auto;
  padding: var(--pad-card);
  padding-right: calc(var(--pad-card) + 8px);
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  border-radius: var(--r-card);
}
.tile-ic { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--sp-2); border-radius: 50%; border: 1px solid var(--c-brass-dim); color: var(--c-brass); }
.tile-ic .ic { width: 20px; height: 20px; }
.tile-t { font-family: var(--font-serif); font-variation-settings: "opsz" 48; font-size: var(--fs-xl); line-height: 1.2; color: var(--c-fg); }
.tile-l { font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--c-fg-2); text-wrap: pretty; }
.tile-d { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur-accordion) var(--ease-out); }
.tile-d > p { overflow: hidden; padding-inline: var(--pad-card); font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--c-fg-2); text-wrap: pretty; visibility: hidden; }
.tile-btn[aria-expanded="true"] + .tile-d { grid-template-rows: 1fr; }
.tile-btn[aria-expanded="true"] + .tile-d > p { visibility: visible; padding-bottom: var(--pad-card); }
@media (min-width: 1024px) {
  .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tile:last-child { grid-column: auto; }
}
html.js:not(.rm) .tiles:not(.is-in) .tile { opacity: 0.22; }
html.js:not(.rm) .tiles.is-in .tile { opacity: 1; border-color: var(--c-brass-dim); transition: opacity 600ms var(--ease-out) calc(var(--i) * 140ms), border-color 900ms var(--ease-out) calc(var(--i) * 140ms); }

/* ---------- 4. Pricing: one paper card, four rows ---------- */
.price-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  width: 100%;
  max-width: 45rem;
  margin-inline: auto;
  padding: var(--pad-card);
  border: 1px solid var(--c-ink-hair);
  box-shadow: var(--paper-shadow), 0 40px 70px -50px rgba(23, 17, 14, 0.5);
}
.price-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(23, 17, 14, 0.12);
  border-radius: calc(var(--r-paper) - 2px);
  pointer-events: none;
}
.price-card > * { position: relative; }
.price-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2) var(--sp-3); }
.price-num { font-family: var(--font-serif); font-variation-settings: "opsz" 144; font-size: var(--fs-8xl); line-height: 0.95; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price-unit { font-size: var(--fs-xl); color: var(--c-ink-2); }
.price-math-btn { align-self: flex-start; min-height: var(--tap); padding: 0; border: 0; background: none; color: var(--c-ink); font-size: var(--fs-sm); text-decoration: underline; text-decoration-color: rgba(23, 17, 14, 0.4); text-underline-offset: 0.22em; margin-top: calc(-1 * var(--sp-3)); }
.price-math { margin-top: calc(-1 * var(--sp-3)); color: var(--c-ink-2); }
.price-terms { display: flex; flex-direction: column; border-top: 1px solid var(--c-hair-ink); }
.price-terms > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-4); min-height: 3.25rem; padding-block: 0.8em; border-bottom: 1px solid var(--c-hair-ink); }
.price-terms dt { color: var(--c-ink-2); flex: none; }
.price-terms dd { text-align: right; font-weight: var(--fw-medium); }
.price-cta .btn { flex: 1 1 0; }
.price-note { font-size: var(--fs-sm); color: var(--c-ink-2); text-wrap: pretty; }
.price-addons { border-top: 1px solid var(--c-hair-ink); }
.price-addons summary { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); min-height: var(--tap); padding-top: var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink); cursor: pointer; list-style: none; }
.price-addons summary::-webkit-details-marker { display: none; }
.addons-mark { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--c-hair-ink); }
.addons-mark::before, .addons-mark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--c-ink); transform: translate(-50%, -50%); transition: transform var(--dur-ui) var(--ease-out); }
.addons-mark::after { transform: translate(-50%, -50%) rotate(90deg); }
.price-addons[open] .addons-mark::after { transform: translate(-50%, -50%) rotate(0deg); }
.addons { display: flex; flex-direction: column; margin-top: var(--sp-3); }
.addons li { display: flex; flex-direction: column; gap: 0.25em; padding-block: var(--sp-4); border-top: 1px solid var(--c-hair-ink); }
.addons li p { font-size: var(--fs-sm); color: var(--c-ink-2); text-wrap: pretty; }
.addons li .addon-name { font-size: var(--fs-base); font-weight: var(--fw-medium); color: var(--c-ink); }

/* ---------- 5. How: four same-size cards joined by a brass line ---------- */
.steps { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.steps::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--c-brass-dim); }
.step { position: relative; display: flex; }
.step-btn {
  position: relative;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  grid-template-areas: "n t" "n b";
  gap: var(--sp-1) var(--sp-4);
  align-content: start;
  width: 100%;
  padding: var(--pad-card);
  padding-right: calc(var(--pad-card) + 24px);
  border-radius: var(--r-card);
  border: 1px solid var(--c-hair);
  background: var(--c-card);
  color: inherit;
  text-align: left;
  transition: border-color 600ms var(--ease-out), opacity 600ms var(--ease-out);
}
.step-n { grid-area: n; font-family: var(--font-serif); font-variation-settings: "opsz" 96; font-size: var(--fs-4xl); line-height: 1; color: var(--c-brass); }
.step-t { grid-area: t; font-family: var(--font-serif); font-variation-settings: "opsz" 48; font-size: var(--fs-xl); line-height: 1.2; color: var(--c-fg); }
.step-body { grid-area: b; display: grid; }
.step-short, .step-more { grid-area: 1 / 1; font-size: var(--fs-sm); line-height: var(--lh-snug); color: var(--c-fg-2); text-wrap: pretty; transition: opacity 220ms var(--ease-std); }
.step-more { opacity: 0; visibility: hidden; }
.step-btn[aria-pressed="true"] .step-short { opacity: 0; visibility: hidden; }
.step-btn[aria-pressed="true"] .step-more { opacity: 1; visibility: visible; }
html.js:not(.rm) .steps:not(.is-in) .step-btn { opacity: 0.25; }
html.js:not(.rm) .steps.is-in .step-btn { opacity: 1; border-color: var(--c-brass-dim); transition-delay: calc(var(--i) * 120ms); }
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .steps::before { left: 0; right: 0; top: calc(var(--pad-card) + 1.4rem); bottom: auto; width: auto; height: 1px; }
  .step-btn { grid-template-columns: minmax(0, 1fr); grid-template-areas: "n" "t" "b"; gap: var(--sp-3); }
}

/* ---------- 6. Trust: still, quiet ---------- */
.trust-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap) clamp(2.5rem, 6vw, 7rem); align-items: center; }
.trust-photo { margin: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.trust-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-5);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-card);
  background: linear-gradient(160deg, #2a211b 0%, #17110e 100%);
  border: 1px solid var(--c-ink-hair);
  color: var(--c-brass);
  font-family: var(--font-serif);
  font-variation-settings: "opsz" 144;
  font-size: var(--fs-6xl);
  letter-spacing: 0.04em;
}
.trust-ph i { display: block; width: 1px; height: 3.5rem; background: var(--c-brass-dim); }
.trust-photo figcaption { font-size: var(--fs-sm); color: var(--c-ink-2); }
.trust-copy .sec-head { margin-bottom: var(--sp-8); max-width: 38rem; }
.trust-rows { display: flex; flex-direction: column; gap: var(--sp-3); }
.trust-rows li { display: flex; align-items: flex-start; gap: var(--sp-4); min-height: 4rem; padding: var(--sp-4) var(--pad-card); border-radius: var(--r-inner); background: var(--c-card-light); border: 1px solid var(--c-ink-hair); }
.trust-rows .ic { flex: none; width: 22px; height: 22px; margin-top: 0.1em; color: var(--c-brass-ink); }
.trust-rows p { color: var(--c-ink); text-wrap: pretty; }
.trust-note { margin-top: var(--sp-6); max-width: 38rem; color: var(--c-ink-2); text-wrap: pretty; }
@media (min-width: 1024px) {
  .trust-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); }
  .trust-ph { aspect-ratio: 4 / 5; }
}

/* ---------- 7. FAQ: one column ---------- */
.faq-wrap { max-width: 45rem; width: min(45rem, var(--content-w)); }
.faq { gap: var(--sp-3); }
.faq-btn { min-height: 4.25rem; }

/* ---------- 8. Book a visit ---------- */
.cta-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap) clamp(2.5rem, 6vw, 7rem); align-items: start; scroll-margin-top: calc(var(--nav-h) + var(--sec-y)); }
.cta-ways { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.cta-contacts { display: flex; flex-direction: column; gap: var(--sp-2); }
.cta-big { display: inline-flex; align-items: center; gap: var(--sp-3); min-height: var(--tap); font-size: var(--fs-lg); text-decoration: none; color: var(--c-ink); }
.cta-big .ic { color: var(--c-brass-ink); }
@media (hover: hover) and (pointer: fine) { .cta-big:hover span { text-decoration: underline; text-decoration-color: rgba(23, 17, 14, 0.35); } }
.cta-who { color: var(--c-ink-2); }
.cta-formwrap {
  padding: var(--pad-card);
  border-radius: var(--r-card);
  background: var(--c-card-light);
  border: 1px solid var(--c-ink-hair);
  box-shadow: 0 1px 2px rgba(23, 17, 14, 0.04), 0 30px 60px -40px rgba(23, 17, 14, 0.4);
}
.cta-form { display: flex; flex-direction: column; gap: var(--sp-5); }
.cta-lead { color: var(--c-ink-2); margin-top: calc(-1 * var(--sp-2)); }
.cta-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.cta-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.cta-label { font-size: var(--fs-sm); color: var(--c-ink-2); }
.cta-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border-radius: var(--r-inner);
  border: 1px solid rgba(23, 17, 14, 0.22);
  background: #fff;
  color: var(--c-ink);
  font-size: var(--fs-input);
  transition: border-color var(--dur-ui) var(--ease-std), box-shadow var(--dur-ui) var(--ease-std);
}
.cta-input:focus { outline: none; border-color: var(--c-brass-ink); box-shadow: 0 0 0 3px rgba(211, 180, 131, 0.55); }
.cta-input[aria-invalid="true"] { border-color: #a1281c; }
.cta-err, .cta-fail { font-size: var(--fs-xs); color: #a1281c; }
.cta-fail { font-size: var(--fs-sm); }
.cta-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cta-actions { display: flex; flex-direction: column; gap: var(--sp-4); }
.cta-actions .btn { width: 100%; }
.cta-policy { font-size: var(--fs-sm); color: var(--c-ink-2); max-width: 28em; text-wrap: pretty; }
.cta-policy a { color: var(--c-ink); }
.cta-done { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-6); border-radius: var(--r-inner); background: var(--c-field); transition: opacity var(--dur-light) var(--ease-out); }
.cta-done-h { font-family: var(--font-serif); font-size: var(--fs-3xl); }
.cta-done.is-dim { opacity: 0; }
.done-check { width: 56px; height: 56px; color: var(--c-brass-ink); }
.done-ring { opacity: 0.35; }
.cta-done:not([hidden]) .done-tick { stroke-dasharray: 40; stroke-dashoffset: 40; animation: done-draw 400ms var(--ease-out) 150ms forwards; }
@keyframes done-draw { to { stroke-dashoffset: 0; } }
html.rm .cta-done .done-tick { animation: none; stroke-dashoffset: 0; }
select.cta-input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--c-ink-2) 50%), linear-gradient(135deg, var(--c-ink-2) 50%, transparent 50%); background-position: calc(100% - 22px) 55%, calc(100% - 16px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
select.cta-input option { background: #fff; color: var(--c-ink); }
@media (min-width: 769px) {
  .cta-grid { grid-template-columns: 1fr 1fr; }
  .cta-field--wide { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .cta-card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .cta-actions { flex-direction: row; align-items: center; gap: var(--sp-6); }
  .cta-actions .btn { width: auto; flex: none; }
}

/* ---------- Tablet and up: the hero is two columns; below, one ---------- */
@media (max-width: 1023px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-10); }
  .hero-stage { --phone-w: 17.5rem; }
}

/* ---------- Phone ---------- */
@media (max-width: 768px) {
  .sec-head { margin-bottom: 2.5rem; }
  .hero-cta { width: 100%; flex-wrap: nowrap; }
  .hero-cta .btn { flex: 1 1 0; padding-inline: 1rem; }
  .sec-btns .btn, .price-cta .btn { flex: 1 1 0; padding-inline: 1rem; }
  .sec-btns { flex-wrap: nowrap; }
  .price-cta { flex-wrap: nowrap; }
  .price-card::before { inset: 6px; }
  .price-terms dd { max-width: 60%; }
  .faq-btn { min-height: 4.25rem; }
}

/* In-page links land with the section top right under the nav bar. */
@media (max-width: 1023px) { .steps { grid-auto-rows: 1fr; } }
@media (max-width: 768px) { .trust-ph { aspect-ratio: 16 / 10; } }

/* ---------- Free video preview (2026-10-31) ---------- */
.preview-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap) clamp(2.5rem, 6vw, 7rem); align-items: start; }
.preview-copy { display: flex; flex-direction: column; gap: var(--sp-8); }
.preview-copy .sec-head { margin-bottom: 0; }
.pv-points { display: flex; flex-direction: column; gap: var(--sp-3); }
.pv-point {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  min-height: 4.25rem;
  padding: var(--sp-3) var(--pad-card) var(--sp-3) var(--sp-4);
  border-radius: var(--r-inner);
  background: var(--c-card-light);
  border: 1px solid var(--c-ink-hair);
  overflow: hidden;
}
.pv-point > * { position: relative; z-index: 1; }
.pv-ic { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: rgba(122, 90, 46, 0.12); color: var(--c-brass-ink); }
.pv-ic .ic { width: 20px; height: 20px; }
.pv-point p { font-family: var(--font-serif); font-variation-settings: "opsz" 48; font-size: var(--fs-xl); line-height: 1.2; color: var(--c-ink); }
html.js:not(.rm) .pv-points:not(.is-in) .pv-ic { transform: scale(0.6); opacity: 0.4; }
html.js:not(.rm) .pv-points.is-in .pv-ic { animation: pv-pop 700ms cubic-bezier(0.34, 1.45, 0.64, 1) calc(var(--i) * 220ms + 150ms) both; }
@keyframes pv-pop { from { transform: scale(0.6); opacity: 0.4; } to { transform: none; opacity: 1; } }
.pv-formwrap .cta-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 769px) { .pv-formwrap .cta-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .preview-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } .pv-formwrap .cta-actions { flex-direction: column; align-items: stretch; } .pv-formwrap .cta-actions .btn { width: 100%; } }