/* Draknar Webworks home page: sections that exist only on index.html.
   Everything shared (fonts, base, buttons, header, footer, close band,
   tables) is in shared/base.css; tokens are in shared/tokens.css. */

/* ---------- Hero (static from first paint; only the sky moves) ---------- */
.hero { position: relative; isolation: isolate; min-height: calc(100svh - 6.5rem); display: grid; align-items: center; overflow: hidden; color: var(--fg); }
.sky-poster, .sky { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.sky-poster {
  background:
    radial-gradient(60% 40% at 74% 78%, oklch(94% 0.09 78 / .9), transparent 70%),
    radial-gradient(90% 55% at 50% 100%, var(--sky-horizon), transparent 75%),
    linear-gradient(180deg, var(--sky-zenith) 0%, var(--sky-mid) 55%, var(--sky-horizon) 100%);
}
.sky { z-index: -1; opacity: 0; transition: opacity 900ms ease; }
.sky.is-ready { opacity: 1; }
.ridge { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(90px, 14vw, 200px); z-index: 0; pointer-events: none; }
.ridge-far { fill: var(--ridge-far); }
.ridge-near { fill: var(--ridge-near); }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); align-items: center; gap: var(--space-7); padding-top: clamp(2.5rem, 6vh, 5rem); padding-bottom: clamp(7rem, 16vw, 14rem); }
.hero-kicker { margin-bottom: var(--space-4); }
.hero h1 { margin-bottom: var(--space-5); }
.hero-lead { color: var(--fg); opacity: .86; margin-bottom: var(--space-6); max-width: 30ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero-phone { margin: 0; justify-self: center; text-align: center; }
.phone { position: relative; width: min(100%, 300px); aspect-ratio: 390 / 800; padding: 12px; border-radius: var(--radius-phone); background: var(--ink); box-shadow: var(--shadow-phone), 0 0 0 1px oklch(100% 0 0 / .12) inset; }
.phone-screen { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--radius-phone) - 12px); background: var(--surface); }
.hero-shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; transition: opacity 700ms ease; }
.hero-shot.is-on { opacity: 1; }
.phone-cap { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--muted); max-width: 32ch; margin-inline: auto; text-wrap: pretty; }
.phone-cap #hero-phone-name { font-weight: 600; color: var(--fg); }

.hero-ledger { position: relative; z-index: 2; background: var(--surface-2); color: var(--fg); border-bottom: 1px solid var(--border); }
.ledger-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-7); padding-block: var(--space-5); }
.ledger-row p { display: flex; flex-direction: column; gap: .1rem; }
.ledger-row strong { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; letter-spacing: -0.01em; line-height: 1.1; }
.ledger-row span { font-size: var(--text-sm); color: var(--muted); }
.motion-btn { margin-left: auto; min-height: 40px; padding: .4rem .9rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); color: var(--fg); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.motion-btn:hover { border-color: var(--fg); }
.motion-btn:active { transform: scale(.97); }

/* ---------- Sample sites rail ---------- */
.rail-tools { display: grid; grid-template-columns: 1fr auto; gap: var(--space-4) var(--space-6); align-items: center; margin-bottom: var(--space-5); }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { min-height: 44px; padding: .5rem 1.1rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface); font-weight: 600; font-size: .9375rem; cursor: pointer; transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), transform var(--dur-fast); }
.chip:hover { border-color: var(--fg); }
.chip:active { transform: scale(.97); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hint { grid-column: 1; font-size: var(--text-sm); color: var(--muted); }
.rail-arrows { grid-column: 2; grid-row: 1 / 3; display: flex; gap: .5rem; }
.arrow { width: 48px; height: 48px; display: grid; place-items: center; border: 1.5px solid var(--border-strong); border-radius: 50%; background: var(--surface); cursor: pointer; transition: border-color var(--dur-fast), transform var(--dur-fast); }
.arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.arrow:hover { border-color: var(--fg); }
.arrow:active { transform: scale(.94); }

.rail { display: flex; gap: var(--space-5); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: var(--space-3) max(1.25rem, (100vw - var(--wrap)) / 2) var(--space-6); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; cursor: grab; }
.rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.site-card { position: relative; flex: 0 0 auto; width: 268px; scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--space-4); }
.site-card[hidden] { display: none; }
.site-card.is-in { animation: flip var(--dur-slow) var(--ease-out); }
.phone-sm { display: block; width: 100%; height: auto; overflow: hidden; padding: 9px; border-radius: 28px; border: 0; cursor: pointer; text-align: left; box-shadow: var(--shadow-2), 0 0 0 1px oklch(100% 0 0 / .12) inset; transition: transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow); }
.phone-sm .phone-screen { position: absolute; inset: 9px; width: auto; height: auto; border-radius: 19px; }
.phone-sm img { width: 100%; height: auto; transform: translateY(0); transition: transform 8s linear; }
.phone-sm:hover, .phone-sm:focus-visible, .phone-sm[aria-pressed="true"] { transform: translateY(-6px); box-shadow: var(--shadow-phone), 0 0 0 1px oklch(100% 0 0 / .12) inset; }
.phone-sm:hover img, .phone-sm[aria-pressed="true"] img { transform: translateY(calc(-100% * 1400 / 2200 - 18px)); }
.site-meta h3 { font-size: 1.2rem; margin-bottom: .1rem; }
.site-name { color: var(--muted); }
.site-links { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: var(--space-3); }

.kind-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 var(--space-6); margin-top: var(--space-4); border-top: 1px solid var(--border); }
.kind-links a { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: var(--space-4) 0; border-bottom: 1px solid var(--border); text-decoration: none; }
.kind-links a:hover strong { text-decoration: underline; text-underline-offset: .18em; }
.kind-links strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.kind-links span { font-size: var(--text-sm); color: var(--muted); }

/* ---------- How it works: the day dial ---------- */
.story { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.2fr); gap: var(--space-8); align-items: start; timeline-scope: --steps; }
.dial { position: sticky; top: 7rem; display: grid; place-items: center; width: min(100%, 340px); aspect-ratio: 1; }
.dial > * { grid-area: 1 / 1; }
.dial-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: var(--border); stroke-width: 2; }
.dial-fill { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--dur-slow) var(--ease-out); }
.dial-label { align-self: start; margin-top: 22%; font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.dial-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 7vw, 5.5rem); line-height: 1; letter-spacing: -0.04em; text-align: center; }
.dial-num.flip { animation: flip var(--dur-slow) var(--ease-out); }
.steps { display: flex; flex-direction: column; view-timeline-name: --steps; }
.step { padding: clamp(2.5rem, 6vh, 4.5rem) 0; border-top: 1px solid var(--border); }
.step:first-child { border-top: 0; padding-top: 0; }
.step h3 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); margin-bottom: var(--space-3); }
.step p { max-width: 52ch; font-size: var(--text-lg); color: var(--muted); transition: color var(--dur-slow); }
.step.is-active p { color: var(--fg); }
@supports (animation-timeline: view()) {
  .dial-fill { animation: ring-fill linear both; animation-timeline: --steps; animation-range: entry 45% exit 55%; transition: none; }
  @keyframes ring-fill { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}

/* ---------- Promises (plain icon list) ---------- */
.promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }
.promises li { display: grid; grid-template-columns: 32px 1fr; gap: var(--space-4); align-items: start; }
.ico { width: 28px; height: 28px; margin-top: .15rem; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.promises h3 { margin-bottom: var(--space-2); }
.promises p { color: var(--muted); max-width: 48ch; }

/* ---------- Pricing (dusk) ---------- */
.build-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: center; padding: var(--space-6); border: 1px solid var(--ink-border); border-radius: var(--radius-lg); background: var(--ink-2); margin-bottom: var(--space-8); }
.build-price { display: flex; flex-direction: column; padding-right: var(--space-6); border-right: 1px solid var(--ink-border); }
.build-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(3rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -0.03em; }
.build-once { color: var(--on-ink-muted); margin-top: .35rem; }
.build-body h3 { margin-bottom: var(--space-3); }
.build-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem var(--space-5); }
.build-list li { position: relative; padding-left: 1.5rem; color: var(--on-ink); }
.build-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .8rem; height: .45rem; border-left: 2px solid var(--ok-on-ink); border-bottom: 2px solid var(--ok-on-ink); transform: rotate(-45deg); }

.plans-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.plans-lead { color: var(--on-ink-muted); font-size: var(--text-lg); }
.billing { display: flex; align-items: center; gap: var(--space-4); }
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: var(--radius-pill); background: var(--ink-3); border: 1px solid var(--ink-border); }
.seg-btn { position: relative; z-index: 1; min-width: 6.5rem; min-height: 44px; padding: .5rem 1.2rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--on-ink-muted); font-weight: 600; cursor: pointer; transition: color var(--dur-fast); }
.seg-btn[aria-checked="true"] { color: var(--ink); }
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--radius-pill); background: var(--on-ink); transition: transform var(--dur) var(--ease-out); }
.seg[data-period="yearly"] .seg-thumb { transform: translateX(100%); }
.billing-note { color: var(--on-ink-muted); }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border: 1px solid var(--ink-border); border-radius: var(--radius-lg); background: var(--ink-2); transition: border-color var(--dur); }
.plan:hover { border-color: oklch(100% 0 0 / .28); }
.plan-featured { border-color: oklch(54.8% 0.188 22.2 / .8); box-shadow: 0 0 0 1px oklch(54.8% 0.188 22.2 / .35), 0 30px 60px oklch(10% 0.02 30 / .5); background: var(--ink-3); }
.plan-badge { position: absolute; top: -.85rem; left: var(--space-6); padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--on-ink); color: var(--ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.plan-name { font-size: 1.1rem; font-weight: 700; letter-spacing: .01em; }
.plan-tag { color: var(--on-ink-muted); margin-bottom: var(--space-3); }
.plan-price { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.price-num { font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 1; letter-spacing: -0.03em; }
.price-per { color: var(--on-ink-muted); font-size: var(--text-lg); }
.plan-build { font-size: var(--text-sm); color: var(--on-ink-muted); margin-top: .35rem; }
.plan-total { padding: .8rem 1rem; border-radius: var(--radius-sm); background: oklch(100% 0 0 / .06); font-size: var(--text-sm); }
.total-label { font-weight: 700; }
.save-chip { align-self: flex-start; padding: .3rem .75rem; border-radius: var(--radius-pill); border: 1px solid var(--ok-on-ink); color: var(--ok-on-ink); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; }
.plans[data-period="yearly"] .save-chip { display: none; }
.plan-btn { width: 100%; }
.features { display: flex; flex-direction: column; gap: .55rem; padding-top: var(--space-2); border-top: 1px solid var(--ink-border); margin-top: var(--space-2); }
.features li { position: relative; padding-left: 1.6rem; font-size: var(--text-sm); line-height: 1.45; }
.features li::before { content: ""; position: absolute; left: 0; top: .45em; }
.features .in::before { width: .75rem; height: .4rem; border-left: 2px solid var(--ok-on-ink); border-bottom: 2px solid var(--ok-on-ink); transform: rotate(-45deg); }
.features .out { color: var(--on-ink-muted); }
.features .out::before { width: .65rem; height: .65rem; top: .35em; background: linear-gradient(45deg, transparent 45%, currentColor 45% 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, currentColor 45% 55%, transparent 55%); opacity: .6; }
.flip { animation: flip var(--dur-slow) var(--ease-out); }
@keyframes flip { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.year-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6); margin-top: var(--space-8); }
.year-cost, .extras { padding: var(--space-6); border: 1px solid var(--ink-border); border-radius: var(--radius-lg); }
.year-cost h3, .extras h3 { margin-bottom: var(--space-3); }
.year-cost > p, .extras li { color: var(--on-ink-muted); }
.year-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); font-size: var(--text-sm); }
.year-table th, .year-table td { text-align: left; padding: .65rem .5rem; border-top: 1px solid var(--ink-border); vertical-align: top; }
.year-table thead th { border-top: 0; color: var(--on-ink-muted); font-weight: 600; }
.year-table strong { color: var(--on-ink); }
.extras ul { display: flex; flex-direction: column; gap: .7rem; }
.extras li { padding-left: 1rem; border-left: 2px solid var(--ink-border); }

/* ---------- Add-ons (priced menu list) ---------- */
.addons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-8); border-top: 1px solid var(--ink-border); }
.addons a { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--ink-border); text-decoration: none; }
.addons a:hover h3 { text-decoration: underline; text-underline-offset: .18em; }
.addon-top { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.addons h3 { font-size: 1.1rem; }
.addon-price { font-family: var(--font-display); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.addons p { color: var(--on-ink-muted); font-size: var(--text-sm); margin-top: .2rem; max-width: 46ch; }

/* ---------- Compare (home uses the shared table with a wider minimum) ---------- */
#compare .compare { min-width: 760px; }
#compare .compare tbody th { white-space: nowrap; }

/* ---------- FAQ (on dusk) ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--space-7); align-items: start; }
.faq-head { position: sticky; top: 6rem; margin-bottom: 0; }
.faq { border-top: 1px solid var(--ink-border); }
.faq:last-child { border-bottom: 1px solid var(--ink-border); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; color: var(--on-ink); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: 0 0 auto; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur) var(--ease-out); margin-right: 4px; }
.faq[open] summary::after { transform: rotate(-135deg); }
.faq-body { padding: 0 0 1.25rem; max-width: 62ch; display: flex; flex-direction: column; gap: .8rem; color: var(--on-ink-muted); }

/* ---------- Where ---------- */
.where { position: relative; isolation: isolate; color: var(--on-ink); background: var(--ink); overflow: hidden; }
.where-photo { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.where::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, oklch(18.5% 0.014 62 / .2), oklch(18.5% 0.014 62 / .85)); }
.where-inner h2 { margin-bottom: var(--space-4); }
.lead-ink { color: var(--on-ink); max-width: 64ch; }
.cities { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--space-6); }
.cities li { padding: .5rem 1rem; border: 1px solid var(--ink-border-strong); border-radius: var(--radius-pill); font-family: var(--font-display); font-weight: 600; }
.credit { margin-top: var(--space-7); font-size: var(--text-xs); color: var(--on-ink-muted); }

/* ---------- Contact (on dusk, with a paper form) ---------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--space-8); align-items: start; }
.contact-side h2 { margin-bottom: var(--space-4); }
.contact-list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: var(--space-6) 0 0; }
.contact-list dt { font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--on-ink-muted); margin-bottom: .2rem; }
.contact-list dd { margin: 0; }
.about { margin-top: var(--space-7); padding-top: var(--space-6); border-top: 1px solid var(--ink-border); max-width: 52ch; }
.about h3 { margin-bottom: .4rem; }
.about p + p { margin-top: .5rem; }

.ask { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--surface); color: var(--fg); box-shadow: var(--shadow-2); }
.ask-req { font-size: var(--text-sm); color: var(--muted); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field label { font-weight: 600; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: .7rem .9rem; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg); color: var(--fg); font: inherit; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.field textarea { resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--fg); box-shadow: 0 0 0 3px oklch(50% 0.2 255 / .35); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--accent); }
.field ::placeholder { color: oklch(48% 0.015 58); }
.err { font-size: var(--text-sm); color: var(--accent); font-weight: 600; }
.err:empty { display: none; }
.ask-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); }
.ask .small { color: var(--muted); }
.form-status { font-weight: 600; }
.form-status:empty { display: none; }

/* ---------- Responsive (home) ---------- */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-6); }
  .plans { grid-template-columns: 1fr; max-width: 34rem; margin-inline: auto; }
  .year-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; padding-bottom: clamp(8rem, 20vw, 11rem); }
  .hero-phone { justify-self: start; text-align: left; }
  .phone { width: min(100%, 250px); }
  .phone-cap { margin-inline: 0; }
  .story { grid-template-columns: 1fr; gap: var(--space-5); }
  .dial { position: relative; top: auto; width: 180px; }
  .dial-num { font-size: 2.6rem; }
  .dial-label { margin-top: 20%; font-size: .8rem; }
  .promises { grid-template-columns: 1fr; }
  .build-card { grid-template-columns: 1fr; }
  .build-price { flex-direction: row; align-items: baseline; gap: .75rem; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--ink-border); padding-bottom: var(--space-4); }
  .build-list { grid-template-columns: 1fr; }
  .addons { grid-template-columns: 1fr; }
  .faq-grid { grid-template-columns: 1fr; gap: var(--space-5); }
  .faq-head { position: static; }
  .contact-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}
@media (max-width: 600px) {
  .hero { min-height: auto; }
  .hero-grid { padding-top: var(--space-6); gap: var(--space-6); }
  .hero-lead { max-width: none; }
  .hero-actions .btn { width: 100%; }
  .ledger-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
  .ledger-row strong { font-size: 1.15rem; }
  .motion-btn { grid-column: 1 / -1; margin-left: 0; justify-self: start; }
  .rail-tools { grid-template-columns: 1fr; }
  .rail-arrows { grid-column: 1; grid-row: auto; }
  .rail { padding-inline: 1rem; gap: var(--space-4); }
  .site-card { width: 236px; }
  .site-links { flex-direction: column; align-items: stretch; }
  .site-links .btn { width: 100%; }
  .seg-btn { min-width: 5.5rem; }
  .plans-head { flex-direction: column; align-items: flex-start; }
  .billing { flex-wrap: wrap; }
  #compare .compare { min-width: 680px; }
  .contact-list { grid-template-columns: 1fr; }
  .ask { padding: var(--space-5); }
  .ask-foot .btn { width: 100%; }
}

/* ---------- Motion preferences (home) ---------- */
@media (hover: none) {
  .phone-sm:hover img { transform: none; }
  .phone-sm[aria-pressed="true"] img { transform: translateY(calc(-100% * 1400 / 2200 - 18px)); }
}
@media (prefers-reduced-motion: reduce) {
  .sky { display: none; }
  .motion-btn { display: none; }
  .dial-fill { animation: none; }
}

/* Texting opt-in on the contact form (Tony 2026-09-24): unticked, optional, the carrier wording in full */
.sms-accept { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; align-items: start; font-size: var(--text-sm); line-height: 1.5; cursor: pointer; }
.sms-accept input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; accent-color: var(--accent); }
.sms-accept input:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sms-accept a { text-decoration: underline; text-underline-offset: .18em; }
/* The yearly saving on the first-year table (Tony 2026-09-24): the save chips' green, readable on dusk ink */
.year-table td.year-save { color: var(--ok-on-ink); font-weight: 700; white-space: nowrap; }
/* Table captions build-live.py writes for screen readers: hidden on screen (was showing on the home page) */
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }