/*
  myShop early access page.
  Section structure, spacing rhythm and component patterns are ported from
  AstroWind (MIT, Copyright (c) 2023 onWidget, https://github.com/arthelokyo/astrowind):
  Hero2, Contact + Form, Features (as steps), Content rows, Comparison, Pricing,
  FAQs, CallToAction and StickyCTA. See THIRD-PARTY-LICENSES.md.
  Restyled 2026-11-13 to the approved "Workshop dark rail" look: white page, charcoal bands,
  header and footer, amber highlights, colored icon tiles that match the product images, Inter.
  Green appears only where it means approved. Static on purpose: no entrance animation.
*/

:root {
  --bg: #FFFFFF; --soft: #F7F7F6; --line: #E6E4DF; --line-2: #D6D3CC;
  --ink: #1D1E21; --body: #3D3F44; --mute: #64666C;
  --char: #222326; --char-2: #1C1D20; --char-3: #303236; --on-char: #ECECEA; --on-char-2: #B9BBC0;
  --amber: #E8B84A; --amber-h: #F0C55E; --amber-50: #FBF1D6; --amber-line: #EFDDA9; --amber-ink: #7A5410;
  --green: #2F5D3A; --green-50: #E7EFE3; --green-line: #C9DAC4; --green-ink: #24502F;
  --red-ink: #9A3522;
  --sh-sm: 0 1px 2px rgba(34,35,38,.06), 0 3px 10px rgba(34,35,38,.05);
  --sh-md: 0 2px 6px rgba(34,35,38,.07), 0 14px 30px rgba(34,35,38,.11);
  --sans: 'Inter', 'Segoe UI', Arial, sans-serif;
  --radius: 12px;
  --header-h: 68px;
}

* { box-sizing: border-box; }
html { scroll-padding-top: calc(var(--header-h) + 8px); }
html, body { margin: 0; }
body { background: var(--bg); color: var(--ink); font: 18px/1.55 var(--sans); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
::selection { background: var(--amber-50); color: var(--ink); }
.money { font-variant-numeric: tabular-nums; font-weight: 700; }
.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; }
[hidden] { display: none !important; }

/* Colored icon tiles, the same set as the product images */
.tile { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; color: #fff; font-size: 26px;
  background: linear-gradient(155deg, var(--t1) 0%, var(--t2) 100%);
  box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 1.5px 0 rgba(255,255,255,.28) inset, 0 -2px 0 rgba(0,0,0,.10) inset, 0 5px 12px var(--tg); }
.tile i { filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.22)); }
.t-amber  { --t1: #E7B044; --t2: #B9821F; --tg: rgba(185,130,31,.30); }
.t-blue   { --t1: #3C70A2; --t2: #24496E; --tg: rgba(36,73,110,.30); }
.t-red    { --t1: #D3533D; --t2: #A63523; --tg: rgba(166,53,35,.28); }
.t-teal   { --t1: #2A8E8D; --t2: #176161; --tg: rgba(23,97,97,.28); }
.t-violet { --t1: #6B5BC8; --t2: #48399B; --tg: rgba(72,57,155,.28); }

/* Pills (match the app) */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
.pill.ok { background: var(--green-50); color: var(--green-ink); border-color: var(--green-line); }
.pill.opt { background: var(--amber-50); color: var(--amber-ink); border-color: var(--amber-line); }
.pill.now { background: #F9E8E2; color: var(--red-ink); border-color: #EDC3B7; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; padding: 0 26px; border-radius: 10px; border: 0; font: 600 18px/1.2 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.btn-primary { background: var(--char); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 3px 8px rgba(34,35,38,.18); }
.btn-primary:hover { background: #34363B; }
.btn-amber { background: var(--amber); color: var(--char); box-shadow: 0 1px 0 rgba(255,255,255,.45) inset, 0 3px 10px rgba(160,115,20,.28); }
.btn-amber:hover { background: var(--amber-h); }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn-block { width: 100%; }

/* WidgetWrapper + Headline */
.wrap { position: relative; max-width: 1280px; margin: 0 auto; padding: 48px 16px; }
@media (min-width: 768px) { .wrap { padding: 64px 24px; } }
@media (min-width: 1024px) { .wrap { padding: 88px 24px; } }
.w-6xl { max-width: 1152px; }
.headline { text-align: center; max-width: 820px; margin: 0 auto 32px; }
@media (min-width: 768px) { .headline { margin-bottom: 48px; } }
h1, h2, h3 { color: var(--ink); margin: 0; text-wrap: balance; letter-spacing: -.025em; }
.headline h2 { font-size: 30px; line-height: 1.12; font-weight: 800; }
@media (min-width: 768px) { .headline h2 { font-size: 42px; } }
.headline p { margin: 16px 0 0; font-size: 20px; color: var(--body); text-wrap: pretty; }
.soft { background: var(--soft); }

/* Header (charcoal) */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--char); border-bottom: 1px solid rgba(255,255,255,.06); }
.site-header .bar { max-width: 1280px; margin: 0 auto; height: var(--header-h); padding: 0 16px; display: flex; align-items: center; gap: 24px; }
@media (min-width: 768px) { .site-header .bar { padding: 0 24px; } }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand-light { display: inline-flex; color: var(--ink); margin-bottom: 14px; }

.site-nav { display: none; gap: 28px; margin-left: auto; }
.site-nav a { text-decoration: none; font-weight: 500; font-size: 16px; color: var(--on-char); }
.site-nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.site-header .btn { margin-left: auto; }
@media (min-width: 900px) { .site-nav { display: flex; } .site-header .btn { margin-left: 8px; } }

/* Photo slots. The photo paints as a background layer over a charcoal fill.
   app.js adds .has-photo to the section once the file in img/ loads. No labels are shown. */
.band { position: relative; overflow: hidden; color: var(--on-char); background: var(--char-2); }
.photo { position: absolute; inset: 0; background: radial-gradient(120% 90% at 78% 40%, #2E3034 0%, #232428 55%, #1C1D20 100%); }
.photo-img { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; z-index: 1; }
.scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.band > .wrap, .band > .hero-inner { position: relative; z-index: 3; }

/* Hero2: Luis photo with floating outcome cards */
.hero .photo-img { background-image: url("img/s01-hero.jpg"); }
.hero-inner { max-width: 1280px; margin: 0 auto; padding: 40px 16px 24px; }
.hero-copy { max-width: 560px; }
.eyebrow { margin: 0; font-size: 16px; font-weight: 600; color: var(--amber); letter-spacing: .005em; }
.hero h1 { color: #fff; font-size: 38px; line-height: 1.06; font-weight: 800; letter-spacing: -.035em; margin: 10px 0 16px; }
.hero .sub { font-size: 20px; line-height: 1.5; color: #DCDDE0; margin: 0 0 26px; max-width: 34ch; }
.hero-note { margin: 14px 0 0; font-size: 16px; color: var(--on-char-2); }
.hero-note b { color: #fff; font-weight: 600; }
.outcomes { list-style: none; margin: 0; padding: 0; position: relative; z-index: 4; }
.oc { display: flex; align-items: center; gap: 14px; background: #fff; color: var(--ink); border: 1px solid #E3E1DB; border-radius: 18px; padding: 12px 20px 12px 12px; box-shadow: 0 2px 6px rgba(0,0,0,.10), 0 16px 34px rgba(0,0,0,.22); }
.oc .tile { width: 52px; height: 52px; border-radius: 15px; font-size: 28px; }
.oc b { font-size: 17px; line-height: 1.25; font-weight: 700; letter-spacing: -.015em; max-width: 220px; }
@media (min-width: 1024px) {
  /* The photo is pinned to the right edge at its own size (1080x720, scale .703), so the cards keep
     the same spot on Luis at any width: cabinets, car body, floor. Never over his face. */
  .hero { height: 720px; }
  .hero .photo-img { left: auto; right: 0; width: 1080px; height: 720px; background-size: 1080px 720px; }
  .hero .scrim { background: linear-gradient(to left, rgba(28,29,32,0) 0, rgba(28,29,32,0) 520px, rgba(28,29,32,.86) 760px, #1C1D20 940px); }
  .hero-inner { height: 100%; display: flex; align-items: center; padding: 0 24px; }
  .hero h1 { font-size: 56px; }
  .outcomes { position: absolute; inset: 0; pointer-events: none; }
  .oc { position: absolute; }
  .o1 { right: 360px; top: 56px; }
  .o2 { right: 24px; top: 112px; }
  .o3 { right: 24px; top: 588px; }
  .o4 { right: 624px; top: 588px; }
}
@media (min-width: 1024px) and (max-width: 1239px) { .o1, .o4 { display: none; } }
@media (max-width: 1023px) {
  /* Tablet and phone: copy, form, then the outcome cards in a tidy stack, then the photo below,
     anchored to the bottom so Luis shows clear of the text. */
  .hero.has-photo .photo-img { background-size: 100% auto; background-position: 50% 100%; background-color: var(--char-2); }
  .hero.has-photo .scrim { background: linear-gradient(to top, rgba(28,29,32,.25) 0, rgba(28,29,32,0) 26vw, rgba(28,29,32,0) 52vw, #1C1D20 70vw); }
  .hero:not(.has-photo) .photo-img { display: none; }
  .hero-inner { padding-bottom: 0; }
  .outcomes { display: grid; gap: 8px; max-width: 592px; padding: 24px 16px 40px; }
  .hero.has-photo .outcomes { padding-bottom: 72vw; }
  .oc { gap: 12px; padding: 9px 14px 9px 9px; border-radius: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.18), 0 10px 20px rgba(0,0,0,.18); }
  .oc .tile { width: 36px; height: 36px; border-radius: 11px; font-size: 20px; }
  .oc b { font-size: 15px; max-width: none; }
}
@media (max-width: 767px) {
  .hero .photo-img { background-image: url("img/s02-hero-mobile.jpg"); }
  .hero.has-photo .scrim { background: linear-gradient(to top, rgba(28,29,32,.2) 0, rgba(28,29,32,0) 24vw, rgba(28,29,32,0) 92vw, #1C1D20 118vw); }
  .hero.has-photo .outcomes { padding-bottom: 104vw; }
  .hero h1 { font-size: 36px; }
  .hero .sub { font-size: 19px; margin-bottom: 20px; }
  .oc b { font-size: 14.5px; }
}

/* Forms */
.inline-form { display: flex; gap: 12px; flex-wrap: wrap; max-width: 560px; }
.inline-form .field { flex: 1 1 260px; margin: 0; }
.inline-form .btn { flex: 0 0 auto; }
@media (max-width: 560px) { .inline-form .btn { width: 100%; } }
input[type=email], input[type=text], select { width: 100%; min-height: 56px; padding: 0 16px; font: 400 18px var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #B5B3AE; border-radius: 10px; }
.band input[type=email] { border-color: #fff; }
input::placeholder { color: #6F7075; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; font-size: 16px; color: var(--ink); margin-bottom: 8px; }
.field .opt-note { font-weight: 400; color: var(--mute); }
.field-err { display: none; font-size: 16px; margin: 8px 0 0; font-weight: 500; color: var(--red-ink); }
.band .field-err { color: #F4B9AD; }
.has-err .field-err { display: block; }
.has-err input { border-color: #C2412D !important; }
.form-error { margin: 12px 0 0; font-weight: 500; color: var(--red-ink); }
.band .form-error { color: #F4B9AD; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-card { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 22px; max-width: 560px; text-align: left; box-shadow: var(--sh-md); }
.form-card h3 { font-size: 22px; margin: 12px 0 4px; }
.form-card .step2-sub { margin: 0 0 18px; color: var(--body); font-size: 17px; }
.grid-2 { display: grid; gap: 0 16px; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.row-btns { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.link-btn { background: none; border: 0; padding: 8px 4px; font: 500 16px var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.done h3 { font-size: 24px; margin: 12px 0 6px; }
.done p { margin: 0; }
.band .done h3 { color: #fff; }
.band .done p { color: var(--on-char-2); }
.stamp { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.stamp.ok { background: var(--green-50); color: var(--green-ink); border: 1px solid var(--green-line); }

/* Product band: the approved laptop-and-phone image */
.product .wrap { padding-bottom: 40px; }
.product-band { margin: 0 auto; max-width: 1240px; }
.product-band img { width: 100%; height: auto; }

/* Problem band (Content pattern over S03) */
.problem .photo-img { background-image: url("img/s03-problem.jpg"); background-position: 30% 50%; }
.problem .wrap { display: flex; }
.problem-copy { max-width: 620px; }
.problem.has-photo .scrim { background: linear-gradient(270deg, rgba(28,29,32,.92) 0%, rgba(28,29,32,.84) 40%, rgba(28,29,32,.2) 66%, rgba(28,29,32,0) 85%); }
@media (min-width: 768px) { .problem.has-photo .wrap { min-height: 620px; align-items: center; justify-content: flex-end; } .problem.has-photo .problem-copy { max-width: 500px; } .problem .media { position: absolute; inset: 0; } }
@media (max-width: 767px) {
  .problem.has-photo .media { position: relative; aspect-ratio: 16 / 9; }
  .problem.has-photo .scrim { background: linear-gradient(180deg, rgba(28,29,32,0) 55%, rgba(28,29,32,.95) 100%); }
  .problem.has-photo .wrap { padding-top: 8px; }
  .problem:not(.has-photo) .media { position: absolute; inset: 0; }
}
.problem h2 { color: #fff; font-size: 32px; line-height: 1.1; font-weight: 800; margin-bottom: 14px; }
@media (min-width: 768px) { .problem h2 { font-size: 44px; } }
.problem .lead { font-size: 20px; color: var(--on-char-2); margin: 0 0 24px; }
.pains { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pains li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; }
.pains i { font-size: 22px; color: var(--amber); margin-top: 3px; }
.pains b { display: block; color: #fff; font-size: 19px; }
.pains span { color: #CFD0D3; font-size: 17px; }

/* The customer loop: connected steps with small HTML screens */
.loop { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); counter-reset: step; }
.lstep { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--sh-sm); }
.lstep .mini { height: 132px; margin: 12px 12px 0; border-radius: 11px; background: var(--soft); border: 1px solid var(--line); display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 12px; overflow: hidden; }
.lstep .lb { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px 18px; }
.lstep .tile { width: 40px; height: 40px; border-radius: 12px; font-size: 21px; margin-top: 2px; }
.lstep h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.lstep h3 .n { color: var(--mute); font-weight: 600; margin-right: 4px; }
.lstep p { margin: 5px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--body); }
@media (min-width: 1024px) {
  .lstep:not(.again)::after { content: ""; position: absolute; z-index: 2; top: 72px; right: -16px; width: 12px; height: 12px; border-top: 2.5px solid var(--line-2); border-right: 2.5px solid var(--line-2); transform: rotate(45deg); }
  .lstep:nth-child(4)::after { display: none; }
}
.lstep.again { background: var(--char); border-color: var(--char); justify-content: center; align-items: flex-start; padding: 22px; }
.lstep.again i.big { font-size: 40px; color: var(--amber); }
.lstep.again h3 { color: #fff; margin-top: 12px; font-size: 20px; }
.lstep.again p { color: var(--on-char-2); margin-top: 6px; font-size: 15.5px; }
/* mini screen pieces */
.mb { align-self: flex-start; max-width: 92%; padding: 7px 10px; border-radius: 12px 12px 12px 4px; background: #fff; border: 1px solid var(--line); font-size: 13px; line-height: 1.35; color: var(--ink); }
.mb.dark { align-self: flex-end; border-radius: 12px 12px 4px 12px; background: var(--char); border-color: var(--char); color: #fff; }
.ms { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ms span { height: 30px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--body); }
.ms span.on { background: var(--char); border-color: var(--char); color: #fff; }
.mt { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mt span { position: relative; height: 78px; border-radius: 8px; background: #888 url("img/s01-hero.jpg") no-repeat; background-size: 520px auto; }
.mt span:nth-child(1) { background-position: -400px -150px; }
.mt span:nth-child(2) { background-position: -360px -130px; }
.mt span:nth-child(2)::before { content: ""; position: absolute; inset: 0; border-radius: 8px; background: rgba(0,0,0,.28); }
.mt span:nth-child(2)::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -11px; width: 22px; height: 22px; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3 2l5 3-5 3z' fill='%23222326'/%3E%3C/svg%3E") no-repeat 55% 50% / 10px; }
.mok { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; background: var(--green-50); border: 1px solid var(--green-line); font-size: 13px; font-weight: 600; color: var(--green-ink); }
.mok i { font-size: 18px; }
.mstar { display: flex; gap: 3px; color: var(--amber); font-size: 20px; }
.mlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 12.5px; font-weight: 600; }
.mlink i { color: var(--amber-ink); }
.loop-hint { display: none; margin: 12px 0 0; font-size: 15px; color: var(--mute); }
@media (max-width: 1023px) and (min-width: 768px) { .loop { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {
  .loop { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 10px; -webkit-overflow-scrolling: touch; }
  .lstep { flex: 0 0 80%; scroll-snap-align: start; }
  .lstep .mini { height: 116px; }
  .loop-hint { display: block; }
}

/* Alternating composite rows (Content pattern) */
.rows { display: grid; gap: 56px; }
@media (min-width: 900px) { .rows { gap: 96px; } }
.row { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .row { grid-template-columns: 5fr 7fr; gap: 56px; } .row.rev { grid-template-columns: 7fr 5fr; } .row.rev .row-img { order: -1; } }
.row > * { min-width: 0; }
.row-text .tile { margin-bottom: 16px; }
.row-text h3 { font-size: 28px; line-height: 1.15; font-weight: 800; }
@media (min-width: 900px) { .row-text h3 { font-size: 36px; } }
.row-text p { margin: 14px 0 0; font-size: 18px; color: var(--body); }
.row-img { margin: 0; }
.row-img img { width: 100%; height: auto; }
.feat-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.feat-chips li { padding: 6px 12px; border: 1px solid var(--line-2); background: #fff; border-radius: 999px; font-size: 15px; font-weight: 500; color: var(--ink); }
.row-text .fine { font-size: 15px; color: var(--mute); margin-top: 12px; }
/* HTML text thread card for the texting row */
.thread-card { max-width: 460px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh-md); overflow: hidden; }
.thread-card .th-h { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.thread-card .th-h .av { width: 42px; height: 42px; border-radius: 50%; background: var(--char); color: var(--amber); display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.thread-card .th-h b { display: block; font-size: 17px; }
.thread-card .th-h small { display: block; font-size: 14px; color: var(--mute); }
.thread-card .th-b { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 20px; }
.thread-card .ts { text-align: center; font-size: 13px; color: var(--mute); margin: 4px 0 0; }
.thread-card .bub { align-self: flex-start; max-width: 82%; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: #F0F0EE; font-size: 16px; line-height: 1.4; }
.thread-card .bub.me { align-self: flex-end; border-radius: 18px 18px 6px 18px; background: var(--char); color: #fff; }
.thread-card .rv { align-self: flex-start; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; box-shadow: var(--sh-sm); }
.thread-card .rv .mstar { font-size: 18px; }
.thread-card .rv b { font-size: 15px; }

/* Ask myShop band (charcoal). Robot photo slot: img/robot.jpg, detected by app.js. */
.ask { background: var(--char); color: var(--on-char); }
.ask .headline h2 { color: #fff; }
.ask .headline p { color: var(--on-char-2); }
.ask-grid { display: grid; gap: 28px; align-items: stretch; }
@media (min-width: 960px) { .ask-grid { grid-template-columns: 5fr 7fr; gap: 40px; } }
.ask-photo { position: relative; min-height: 300px; border-radius: 22px; overflow: hidden; background: radial-gradient(90% 80% at 50% 45%, #34363B 0%, #26282C 60%, #1E1F22 100%); border: 1px solid rgba(255,255,255,.06); }
.ask-photo .photo-img { background-image: url("img/robot.jpg"); background-position: 50% 30%; opacity: 0; }
.ask-photo.has-photo .photo-img { opacity: 1; }
.ask-photo .voice { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.ask-photo.has-photo .voice { display: none; }
.ask-photo .mic { width: 88px; height: 88px; border-radius: 50%; background: var(--amber); color: var(--char); display: grid; place-items: center; font-size: 42px; box-shadow: 0 0 0 12px rgba(232,184,74,.14), 0 0 0 26px rgba(232,184,74,.06); }
.ask-photo .bars { display: flex; align-items: center; gap: 5px; height: 56px; }
.ask-photo .bars span { width: 6px; border-radius: 3px; background: var(--amber); opacity: .85; }
.ask-photo .say { font-size: 17px; color: var(--on-char-2); }
.ask-cards { display: grid; gap: 14px; }
@media (min-width: 640px) { .ask-cards { grid-template-columns: 1fr 1fr; } }
.acard { background: #fff; color: var(--ink); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.acard .ah { display: flex; align-items: center; gap: 12px; }
.acard h3 { font-size: 18px; line-height: 1.25; letter-spacing: -.015em; }
.acard .q { margin: 0; padding: 10px 12px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); font-size: 15.5px; color: var(--ink); }
.acard .r { margin: 0; display: flex; gap: 8px; align-items: flex-start; font-size: 15px; color: var(--body); }
.acard .r i { color: var(--amber-ink); font-size: 17px; margin-top: 2px; }

/* Comparison (charcoal band, photo hook S13) */
.compare .photo-img { background-image: url("img/s13-compare.jpg"); background-position: 50% 50%; }
.compare.has-photo .scrim { background: rgba(28,29,32,.55); }
.compare .headline h2 { color: #fff; }
.compare .headline p { color: var(--on-char-2); }
.price-list { display: none; list-style: none; margin: 0 0 20px; padding: 16px 18px; background: #fff; color: var(--ink); border-radius: 14px; }
.price-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 17px; }
.price-list li:last-child { border-bottom: 0; }
.price-list li:first-child { font-weight: 700; }
.price-list small { display: block; font-size: 14px; color: var(--mute); font-weight: 400; }
@media (max-width: 860px) { .price-list { display: block; } }
.table-card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 760px; table-layout: fixed; border-collapse: collapse; text-align: left; font-size: 16px; color: var(--ink); }
.cmp col.c-label { width: 24%; } .cmp col.c-val { width: 19%; }
.cmp th, .cmp td { padding: 14px 16px; vertical-align: middle; }
.cmp thead th { padding: 18px 16px; text-align: center; vertical-align: bottom; border-bottom: 1px solid var(--line-2); }
.cmp thead th:first-child { text-align: left; font: 500 15px var(--sans); color: var(--mute); }
.cmp .col-name { display: block; font-size: 19px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; line-height: 1.2; }
.cmp .col-sub { display: block; margin-top: 4px; font-size: 15px; color: var(--mute); }
.cmp th.hl { background: var(--char); }
.cmp th.hl .col-name { color: #fff; }
.cmp th.hl .col-sub { color: var(--amber); }
.cmp td.hl { background: #FBF6E8; font-weight: 600; color: var(--ink); }
.cmp tbody td { text-align: center; border-bottom: 1px solid var(--line); line-height: 1.4; }
.cmp tbody td small { font-size: 14px; color: var(--mute); font-weight: 400; }
.cmp tbody th[scope=row] { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--line); line-height: 1.35; }
.cmp tbody th[scope=row] small { display: block; font-weight: 400; color: var(--mute); font-size: 14px; margin-top: 2px; }
.cmp .grp th { background: var(--soft); padding: 9px 16px; font-size: 15px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line); }
.cmp .grp th span { position: sticky; left: 16px; display: inline-block; }
.cmp .sticky { position: sticky; left: 0; z-index: 1; background: #fff; }
.cmp .yes { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--char); color: var(--amber); font-size: 16px; vertical-align: middle; }
.cmp .unk { color: var(--mute); font-style: italic; }
.cmp tfoot td { padding: 18px 16px; }
.cmp tfoot td.hl { background: #FBF6E8; }
.swipe-hint { display: none; font-size: 15px; color: var(--mute); padding: 12px 14px 0; margin: 0; }
@media (max-width: 860px) {
  .swipe-hint { display: block; }
  .cmp { font-size: 15px; }
  .cmp th, .cmp td { padding: 12px 10px; }
  .cmp .col-name { font-size: 16px; }
  .cmp tfoot .btn { padding: 0 8px; font-size: 15px; }
  .cmp tr.hide-phone { display: none; }
  .cmp { min-width: 760px; } .cmp col.c-label { width: 124px; } .cmp col.c-val { width: 159px; } .cmp th[scope=row] { font-size: 14.5px; }
}
.cmp-foot { padding: 18px 20px 22px; border-top: 1px solid var(--line); font-size: 15px; color: var(--body); background: #fff; }
.cmp-foot p { margin: 0 0 10px; }
.cmp-foot details summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.cmp-foot ul { margin: 10px 0 0; padding-left: 18px; columns: 2 280px; column-gap: 32px; }
.cmp-foot li { margin-bottom: 6px; break-inside: avoid; }
.cmp-foot a { color: #24496E; word-break: break-word; }

/* Pricing */
.price-wrap { display: flex; justify-content: center; }
.price-card { width: 100%; max-width: 480px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px 26px; text-align: center; box-shadow: var(--sh-md); position: relative; overflow: hidden; }
.price-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--amber); }
.price-card h3 { font-size: 20px; font-weight: 700; }
.price-card .sub { margin: 4px 0 0; color: var(--body); font-size: 17px; }
.amount { margin: 18px 0 2px; display: flex; justify-content: center; align-items: flex-start; gap: 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.amount .cur { font-size: 34px; font-weight: 700; line-height: 1.3; }
.amount .val { font-size: 78px; font-weight: 800; line-height: 1; letter-spacing: -.04em; }
.price-card .period { color: var(--body); font-size: 17px; }
.price-card .terms { margin: 12px auto 0; display: table; padding: 4px 12px; border-radius: 999px; background: var(--amber-50); border: 1px solid var(--amber-line); color: var(--amber-ink); font-weight: 600; font-size: 15px; }
.plist { list-style: none; margin: 22px 0 24px; padding: 20px 0 0; border-top: 1px solid var(--line); text-align: left; display: grid; gap: 10px; }
.plist li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; font-size: 17px; line-height: 1.4; }
.plist i { width: 22px; height: 22px; border-radius: 50%; background: var(--char); color: var(--amber); display: grid; place-items: center; font-size: 12px; margin-top: 1px; }
.price-card .inline-form { max-width: none; }
.price-card .inline-form .field { flex-basis: 100%; }
.price-card .inline-form .btn { width: 100%; }
.price-card .done { text-align: left; }
.price-card .done h3, .price-card .form-card h3 { font-size: 22px; }

/* FAQs */
.faq { max-width: 768px; margin: 0 auto; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.faq summary i { font-size: 22px; flex: none; color: var(--mute); }
.faq details[open] summary i { transform: rotate(180deg); }
.faq .ans { padding: 0 40px 20px 0; color: var(--body); font-size: 18px; }
.faq .ans p { margin: 0; }

/* CallToAction (over S12) */
.final .photo-img { background-image: url("img/s12-final.jpg"); background-position: 50% 40%; }
.final.has-photo .scrim { background: rgba(28,29,32,.66); }
.final .wrap { display: flex; justify-content: center; }
.final-box { max-width: 680px; text-align: center; }
.final h2 { color: #fff; font-size: 34px; line-height: 1.1; font-weight: 800; }
@media (min-width: 768px) { .final h2 { font-size: 46px; } }
.final .sub { margin: 14px auto 26px; font-size: 20px; color: var(--on-char-2); max-width: 46ch; }
.final .inline-form { margin: 0 auto; justify-content: center; }
.final .inline-form .field { text-align: left; }
.final .hero-note { text-align: center; }
.final .form-card, .final .done { margin: 0 auto; }

/* Footer (charcoal) */
.site-footer { background: var(--char-2); color: var(--on-char-2); }
.site-footer .bar { max-width: 1280px; margin: 0 auto; padding: 28px 16px 96px; display: flex; flex-wrap: wrap; gap: 14px 32px; align-items: center; justify-content: space-between; font-size: 15px; }
@media (min-width: 768px) { .site-footer .bar { padding: 28px 24px; } }
.site-footer nav { display: flex; gap: 22px; flex-wrap: wrap; }
.site-footer nav a { text-decoration: none; color: var(--on-char); }
.site-footer nav a:hover { text-decoration: underline; }

/* StickyCTA (phone only, plain show/hide) */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(34,35,38,.12); }
.sticky-cta .in { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.sticky-cta p { margin: 0; font-size: 16px; font-weight: 600; color: var(--ink); }
@media (min-width: 768px) { .sticky-cta { display: none !important; } }

/* Phone trims (keep the page near ten screens) */
@media (max-width: 767px) {
  .wrap { padding-top: 40px; padding-bottom: 40px; }
  .headline { margin-bottom: 22px; }
  .headline h2 { font-size: 28px; }
  .headline p { font-size: 18px; margin-top: 10px; }
  .product .wrap { padding-top: 28px; padding-bottom: 8px; }
  .product .headline p { display: none; }
  .problem h2 { font-size: 30px; }
  .problem .lead { margin-bottom: 18px; }
  .pains { gap: 12px; }
  .pains span { display: none; }
  .pains li { align-items: center; }
  .pains i { margin-top: 0; }
  .rows { gap: 44px; }
  .row-text .tile { width: 40px; height: 40px; font-size: 21px; margin-bottom: 12px; }
  .row-text h3 { font-size: 25px; }
  .row-text p { font-size: 17px; margin-top: 10px; }
  .row-text .fine { display: none; }
  .row.text-only-phone .row-img { display: none; }
  .ask-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .ask-photo .say { display: none; }
  .ask-photo .mic { width: 64px; height: 64px; font-size: 30px; }
  .ask-cards { gap: 10px; }
  .acard { padding: 14px; gap: 9px; }
  .acard .r { display: none; }
  .compare .headline h2 { font-size: 26px; }
  #price .headline p, .price-card .sub { display: none; }
  .plist { gap: 6px; margin: 16px 0 18px; padding-top: 14px; }
  .plist li { font-size: 16px; }
}
@media (max-width: 767px) {
  .row-text .tile { display: none; }
  .plist li:nth-child(n+6) { display: none; }
  .cmp-foot .hide-phone-p { display: none; }
  .feat-chips li { font-size: 14px; padding: 5px 10px; }
}
@media (max-width: 767px) {
  .wrap { padding-top: 34px; padding-bottom: 34px; }
  .row:not(.text-only-phone) .row-text p { display: none; }
}
/* Wide screens: give the product images more room (their stages carry transparent margin) */
@media (min-width: 1100px) {
  #features { overflow: hidden; }
  .row { grid-template-columns: 4fr 8fr; gap: 40px; }
  .row.rev { grid-template-columns: 8fr 4fr; }
  .row-img img { width: 114%; max-width: none; margin-left: -7%; }
}

/* ---------- Audit round (2026-11-13) ---------- */
/* Perk line inside the price card */
.price-card .perk { margin: 0 0 12px; font-size: 17px; font-weight: 700; color: var(--ink); }
/* Comparison table folds on phones only (app.js closes it under 768px) */
.cmp-fold > summary { display: none; }
@media (max-width: 767px) {
  .cmp-fold > summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; list-style: none; cursor: pointer; padding: 16px 18px; font-size: 17px; font-weight: 700; color: var(--ink); }
  .cmp-fold > summary::-webkit-details-marker { display: none; }
  .cmp-fold > summary::after { content: ""; width: 9px; height: 9px; border-right: 2.5px solid var(--mute); border-bottom: 2.5px solid var(--mute); transform: rotate(45deg); margin-top: -4px; }
  .cmp-fold[open] > summary { border-bottom: 1px solid var(--line); }
  .cmp-fold[open] > summary::after { transform: rotate(225deg); margin-top: 4px; }
  .price-list { margin-bottom: 14px; }
}
/* Ask myShop: until img/robot.jpg exists, the cards use the full width */
.ask-photo:not(.has-photo) { display: none; }
@media (min-width: 960px) { .ask-grid:has(.ask-photo:not(.has-photo)) { grid-template-columns: 1fr; } .ask-grid:has(.ask-photo:not(.has-photo)) .ask-cards { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px) {
  /* Phones: the spoken line sells it better than the label */
  .acard h3 { display: none; }
  .acard { flex-direction: row; align-items: center; gap: 12px; }
  .acard .ah { flex: none; }
  .acard .tile { width: 40px; height: 40px; font-size: 21px; }
  .acard .q { flex: 1; }
}
/* Loop: a short stacked list on phones, no swiping */
@media (max-width: 767px) {
  .loop { display: grid; grid-template-columns: 1fr; gap: 8px; overflow: visible; margin: 0; padding: 0; }
  .lstep { flex: none; flex-direction: row; align-items: center; border-radius: 14px; }
  .lstep .mini, .lstep p { display: none; }
  .lstep .lb { align-items: center; padding: 10px 14px; }
  .lstep .tile { width: 36px; height: 36px; font-size: 19px; margin-top: 0; }
  .lstep h3 { font-size: 17px; }
  .lstep.again { padding: 12px 14px; flex-direction: row; gap: 12px; }
  .lstep.again i.big { font-size: 26px; }
  .lstep.again h3 { margin-top: 0; font-size: 17px; }
}
/* Phones: the follow-up and booking rows repeat the loop, so they drop out */
@media (max-width: 767px) { .row.hide-row-phone { display: none; } }
/* Phones: the Luis photo becomes a short strip under the outcome cards */
@media (max-width: 767px) {
  .hero.has-photo .photo { top: auto; bottom: 0; height: 60vw; }
  .hero.has-photo .photo-img { background-size: cover; background-position: 52% 46%; }
  .hero.has-photo .scrim { background: linear-gradient(to top, rgba(28,29,32,0) 0, rgba(28,29,32,0) 44vw, #1C1D20 60vw); }
  .hero.has-photo .outcomes { padding-bottom: 60vw; }
}

/* ---------- myShop round (2026-11-13) ---------- */
/* Hero feature boxes: the four main features, 2x2 under the signup form */
.hero-feats { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 560px; }
.hero-feats li { display: flex; gap: 11px; align-items: flex-start; padding: 12px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.hero-feats .tile { width: 36px; height: 36px; border-radius: 11px; font-size: 19px; }
.hero-feats b { display: block; color: #fff; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; }
.hero-feats li > div > span { display: block; margin-top: 3px; color: #C9CACD; font-size: 13.5px; line-height: 1.35; }
@media (min-width: 1024px) {
  /* Taller hero for the feature boxes. The photo is pinned right at its own aspect (1170x780, scale .7617),
     and each outcome card is placed in photo pixels, so it stays on the same spot at any width:
     cabinets, car body, floor, and the oil change card on Luis's lower shirt and arm. Never his face or hands. */
  .hero { height: 860px; }
  .hero .photo-img { width: 1290px; height: 860px; background-size: 1290px 860px; }
  .hero h1 { font-size: 46px; margin: 6px 0 12px; }
  .hero .sub { margin-bottom: 18px; font-size: 19px; }
  .voice-demo { margin: -4px 0 18px; }
  .o1 { right: auto; left: calc(100% - 813px); top: 67px; }
  .o2 { right: auto; left: calc(100% - 410px); top: 133px; }
  .o3 { right: auto; left: calc(100% - 410px); top: 702px; }
  .o4 { right: auto; left: calc(100% - 735px); top: 588px; }
}
@media (min-width: 1024px) and (max-width: 1379px) { .o1 { display: none; } }
@media (min-width: 1024px) and (max-width: 1279px) { .o4 { display: none; } }
@media (max-width: 767px) {
  .site-header .bar { gap: 12px; }
  .site-header .btn-sm { padding: 0 14px; font-size: 15px; }
  .hero-feats { gap: 8px; margin-top: 18px; }
  .hero-feats li { flex-direction: column; gap: 8px; padding: 11px; }
  .hero-feats .tile { width: 32px; height: 32px; font-size: 17px; }
  .hero-feats b { font-size: 14.5px; }
  .hero-feats li > div > span { font-size: 13px; }
}
@media (max-width: 767px) {
  /* Phones: two outcome cards are enough; the feature boxes above cover follow-ups and booking */
  .outcomes .o3, .outcomes .o4 { display: none; }
  .oc { padding-top: 7px; padding-bottom: 7px; }
  .wrap { padding-top: 30px; padding-bottom: 30px; }
}


@media (max-width: 767px) {
  .eyebrow { font-size: 14px; letter-spacing: 0; }
  .hero h1 { margin: 8px 0 12px; }
  .hero-feats { margin-top: 14px; }
}

/* ---------- Offer boosts (2026-11-13): founding count, guarantee ---------- */
.spots { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; padding: 5px 12px; border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--amber); background: rgba(232,184,74,.12); border: 1px solid rgba(232,184,74,.35); }
.spots.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 3px rgba(232,184,74,.22); }
.price-card .spots { margin: 0 0 14px; color: var(--amber-ink); background: var(--amber-50); border-color: var(--amber-line); }
.price-card .spots.live::before { background: #D6A436; }
.price-card .perk { margin-bottom: 8px; }
.guarantee { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--soft); border: 1px solid var(--line); text-align: left; font-size: 15px; line-height: 1.45; color: var(--body); }
.guarantee i { flex: none; font-size: 22px; color: var(--ink); margin-top: 1px; }
.guarantee b { color: var(--ink); }
.guarantee-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; }
.guarantee-note i { color: var(--amber); font-size: 18px; }
@media (max-width: 767px) {
  .spots { font-size: 14px; margin-top: 8px; }
  .guarantee { font-size: 14px; padding: 10px 12px; }
}
/* Phone length trims after the offer boosts (keep the page at 10 screens or less) */
@media (max-width: 767px) {
  .wrap { padding-top: 26px; padding-bottom: 26px; }
  .plist li:nth-child(n+5) { display: none; }
  .hero.has-photo .photo { height: 48vw; }
  .hero.has-photo .scrim { background: linear-gradient(to top, rgba(28,29,32,0) 0, rgba(28,29,32,0) 34vw, #1C1D20 48vw); }
  .hero.has-photo .outcomes { padding-bottom: 48vw; }
  .problem.has-photo .media { aspect-ratio: 21 / 9; }
  .site-footer .bar { padding-top: 20px; gap: 10px 22px; }
  .site-footer .bar > span { display: none; }
}

/* myShop approved brand pack (2026-11-13): horizontal logo image in the header, footer and thanks page */
.brand-logo { display: block; height: 50px; width: auto; }
@media (max-width: 767px) { .brand-logo { height: 38px; } }
.brand-light { display: flex; justify-content: center; }

/* ---------- Offer and trust round (2026-11-13, late) ---------- */
.price-card .later { margin: 10px auto 0; max-width: 34ch; font-size: 15px; line-height: 1.45; color: var(--body); }
.priv-note { margin: 10px 0 0; font-size: 14px; color: var(--on-char-2); }
.priv-note a { color: inherit; text-underline-offset: 3px; }
.priv-note.on-light { color: var(--mute); }
.final .priv-note { text-align: center; }
/* Plan grid: the extra features, as compact tiles */
.plan-more { margin-top: 64px; }
.plan-h { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 18px; }
.plan-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plan-grid li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 14px; background: #fff; border: 1px solid var(--line); box-shadow: var(--sh-sm); }
.plan-grid .tile { width: 38px; height: 38px; border-radius: 11px; font-size: 20px; }
.plan-grid b { display: block; font-size: 16px; line-height: 1.25; letter-spacing: -.01em; }
.plan-grid li > div > span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--body); }
.plan-more .feat-chips { margin-top: 14px; }
@media (max-width: 1023px) { .plan-grid { grid-template-columns: repeat(2, 1fr); } }
/* Footer company line */
.site-footer .company { margin: 0; flex-basis: 100%; order: 3; font-size: 15px; color: var(--on-char-2); }
.site-footer .company a { color: var(--on-char); }
/* Done state: spot number and next steps */
.done-spot { margin: 0 0 6px !important; font-size: 18px; font-weight: 700; color: var(--ink); }
.band .done-spot { color: var(--amber); }
.next-steps { margin: 12px 0 0; padding-left: 22px; text-align: left; font-size: 16px; line-height: 1.5; color: var(--body); }
.band .next-steps { color: var(--on-char-2); }
.next-steps li + li { margin-top: 4px; }
/* Privacy page */
.doc { max-width: 760px; }
.doc h1 { font-size: 36px; font-weight: 800; }
.doc .doc-sub { color: var(--mute); margin: 8px 0 26px; }
.doc h2 { font-size: 22px; font-weight: 700; margin: 28px 0 8px; }
.doc p, .doc li { font-size: 17px; color: var(--body); }
.doc ul { padding-left: 22px; margin: 0; }
.doc li + li { margin-top: 6px; }
.doc a { color: #24496E; }
.doc .doc-foot { margin-top: 36px; font-size: 15px; color: var(--mute); }
@media (max-width: 767px) {
  .plan-more { margin-top: 36px; }
  .plan-h { font-size: 22px; margin-bottom: 12px; }
  .plan-grid { gap: 8px; }
  .plan-grid li { padding: 10px; gap: 9px; align-items: center; }
  .plan-grid .tile { width: 32px; height: 32px; font-size: 17px; }
  .plan-grid b { font-size: 14px; }
  .plan-grid li > div > span { display: none; }
  .priv-note { font-size: 13px; margin-top: 6px; }
  .site-footer .company { font-size: 14px; }
  .price-card .later { font-size: 14px; }
}
/* Phone trims after the offer and trust round (keep the page at 10 screens or less).
   The texting and AI-quote rows drop out on phones: the loop, the hero boxes and Ask myShop already say both. */
@media (max-width: 767px) {
  .plan-more .feat-chips { display: none; }
  .loop { gap: 6px; }
  .lstep .lb { padding-top: 7px; padding-bottom: 7px; }
  .acard { padding: 11px 12px; }
  .ask-cards { gap: 8px; }
}
@media (max-width: 767px) { .faq summary { padding: 15px 0; } .faq summary h3 { font-size: 18px; } }
.site-header .bar > .brand + .btn { margin-left: auto; }

/* Hero voice demo (2026-11-13): shows "talk to it" in one glance */
.eyebrow i { margin-right: 4px; }
.voice-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: -8px 0 24px; padding: 10px 14px 10px 10px; max-width: 560px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; }
.voice-demo .vd-mic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E8B84A; color: #1C1D20; font-size: 18px; }
.voice-demo .vd-said { color: #F4EFE6; font-size: 15.5px; font-style: italic; line-height: 1.35; flex: 1 1 220px; }
.voice-demo .vd-arrow { color: #E8B84A; font-size: 16px; }
.voice-demo .vd-out { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: #1C1D20; font-weight: 700; font-size: 14.5px; padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.voice-demo .vd-out i { color: #2F6B3A; font-size: 17px; }
@media (max-width: 767px) { .voice-demo { margin: -10px 0 20px; } .voice-demo .vd-said { font-size: 14.5px; flex-basis: 100%; } .voice-demo .vd-arrow { display: none; } }

@media (min-width: 1024px) and (max-width: 1399px) { .o4 { display: none; } }
@media (max-width: 767px) {
  .hero-priv { display: none; }
  .voice-demo { padding: 8px 12px 8px 8px; gap: 6px 8px; }
  .voice-demo .vd-mic { width: 30px; height: 30px; font-size: 16px; }
  .hero .sub { margin-bottom: 18px; }
}
@media (max-width: 767px) { .hero-inner { padding-top: 22px; } .hero .eyebrow { margin-bottom: 0; } .hero h1 { margin: 6px 0 10px; } }