/* Wash Club landing v3 (22 Oct 2026) — Claude Design «Wash Club Landing v3.dc.html», spec design/v3/SPEC.md.
   The home pages only; the text pages keep styles.css + legal.css. Theme follows the phone (prefers-color-scheme).
   Phone < 760px, tablet < 1100px. */

@font-face { font-family: Manrope; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/manrope-500.woff?v=29ca69f62c") format("woff"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/manrope-600.woff?v=5ecc8014b3") format("woff"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/manrope-700.woff?v=1c639c769b") format("woff"); }
@font-face { font-family: Manrope; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/manrope-800.woff?v=255fba33c0") format("woff"); }

:root {
  --bg: #0A1428; --sf: #132140; --sf2: #1B2D52; --tx: #F4F7FD; --mu: #8B9FC4;
  --pr: #2F7BFF; --pr2: #4FB3FF; --link: #4FB3FF; --ok: #4CD97B; --pr-tx: #4FB3FF;
  --line: rgba(255, 255, 255, .08);
  --glow: rgba(47, 123, 255, .30); --glow2: rgba(47, 123, 255, .16);
  --sbtn-bg: #F4F7FD; --sbtn-tx: #0A1428;
  --card-shadow: none;
  --phone-shadow: 0 40px 80px rgba(0, 0, 0, .55);
  --street: rgba(139, 159, 196, .09); --avenue: rgba(139, 159, 196, .18); --river: rgba(47, 123, 255, .16);
  --grad: linear-gradient(90deg, #2F7BFF, #4FB3FF);
  --pad: 120px; --gap: 140px; --h1: 76px; --h2: 48px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #F2F4F7; --sf: #FFFFFF; --sf2: #E9EEF7; --tx: #0F1B35; --mu: #5A6B8A;
    --pr: #2B5FAD; --pr2: #2F7BFF; --link: #2B5FAD; --ok: #1FA855; --pr-tx: #2B5FAD;
    --line: rgba(15, 27, 53, .08);
    --glow: rgba(47, 123, 255, .16); --glow2: rgba(47, 123, 255, .08);
    --sbtn-bg: #0F1B35; --sbtn-tx: #FFFFFF;
    --card-shadow: 0 1px 2px rgba(15, 27, 53, .04), 0 12px 32px rgba(15, 27, 53, .06);
    --phone-shadow: 0 30px 60px rgba(15, 27, 53, .22), 0 12px 32px rgba(47, 123, 255, .18);
    --street: rgba(15, 27, 53, .06); --avenue: rgba(15, 27, 53, .10); --river: rgba(47, 123, 255, .12);
    color-scheme: light;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--bg); color: var(--tx); font-family: Manrope, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-wrap: pretty; }
.page { width: 100%; overflow-x: clip; position: relative; }
a { color: var(--link); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ol, dl, dd { margin: 0; padding: 0; }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); position: relative; }
.block { padding-top: var(--gap); }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--pr-tx); }
.head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 48px; }
.head h2, .faq-head h2, .partners h2, .cta h2 { font-size: var(--h2); line-height: 1.08; font-weight: 800; letter-spacing: -.03em; }
.head-row { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 24px; }
.head-row > div { display: flex; flex-direction: column; gap: 14px; }
.head-row > p { color: var(--mu); font-size: 16px; font-weight: 600; }

/* ---------- nav ---------- */
.nav { height: 84px; display: flex; align-items: center; justify-content: space-between; gap: 20px; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--tx); }
.brand img { width: 39px; height: auto; }
.brand span { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.nav-links { display: flex; gap: 30px; font-size: 15px; font-weight: 700; }
.nav-links a, .menu-list a { color: var(--mu); }
.nav-links a:hover { color: var(--tx); }
.nav-end { display: flex; align-items: center; gap: 10px; }
.lang { display: flex; background: var(--sf); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; }
.lang-opt { padding: 8px 11px; border-radius: 9px; font-size: 12px; font-weight: 800; color: var(--mu); }
.lang-opt.on { background: var(--sf2); color: var(--tx); }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; border-radius: 14px; background: var(--sf); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--tx); cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; right: 0; top: 52px; min-width: 220px; display: flex; flex-direction: column; padding: 8px; border-radius: 18px; background: var(--sf); border: 1px solid var(--line); box-shadow: 0 20px 40px rgba(0, 0, 0, .25); z-index: 20; }
.menu-list a { padding: 12px 14px; border-radius: 12px; font-size: 15px; font-weight: 700; }
.menu-list a:hover { background: var(--sf2); color: var(--tx); }

/* ---------- store buttons ---------- */
.stores { display: flex; gap: 12px; flex-wrap: wrap; }
.sbtn { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 22px 0 18px; border-radius: 18px; background: var(--sbtn-bg); color: var(--sbtn-tx); }
.sbtn span { display: flex; flex-direction: column; line-height: 1.05; }
.sbtn small { font-size: 12px; font-weight: 600; }
.sbtn b { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.sbtn-sm { height: 40px; padding: 0 14px 0 12px; border-radius: 12px; gap: 8px; font-size: 14px; font-weight: 800; white-space: nowrap; }
.sbtn-sm svg { width: 15px; height: 15px; }
.gbtn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 26px; border-radius: 16px; background: var(--grad); color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 12px 32px rgba(47, 123, 255, .32); }

/* ---------- phone frame (screens are real dark-theme captures; the frame stays navy in both themes) ---------- */
.phone { --w: 280px; width: calc(var(--w) + 20px); padding: 10px; border-radius: calc(var(--w) * .15 + 10px); background: #04070F; border: 1px solid rgba(255, 255, 255, .12); box-shadow: var(--phone-shadow); }
.phone .screen { border-radius: calc(var(--w) * .135); overflow: hidden; background: #0A1430; }
.phone .screen img { width: 100%; }
.fade { -webkit-mask-image: linear-gradient(#000 62%, transparent 98%); mask-image: linear-gradient(#000 62%, transparent 98%); }
.chip-img { position: absolute; border-radius: 18px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .10); box-shadow: var(--phone-shadow); background: #0A1430; }

/* ---------- hero ---------- */
.hero { display: grid; grid-template-columns: 560px 1fr; gap: 40px; align-items: center; padding-top: 40px; min-height: 620px; }
.hero-glow { position: absolute; width: 1300px; height: 1100px; right: -420px; top: -460px; background: radial-gradient(closest-side, var(--glow), transparent); pointer-events: none; }
.hero-text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border-radius: 999px; background: var(--sf); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--mu); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); }
.hero h1 { font-size: var(--h1); line-height: 1.02; font-weight: 800; letter-spacing: -.035em; }
.hero-sub { font-size: 20px; line-height: 1.55; color: var(--mu); max-width: 480px; }
.hero-art { position: relative; height: 560px; }
.hero-art .phone-front { --w: 340px; position: absolute; left: 70px; top: 0; z-index: 2; }
.hero-art .phone-back { --w: 280px; position: absolute; left: 330px; top: 70px; transform: rotate(8deg); }
.hero-art .phone-back.fade { -webkit-mask-image: linear-gradient(#000 45%, transparent 90%); mask-image: linear-gradient(#000 45%, transparent 90%); }

/* ---------- how it works ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step { background: var(--sf); border: 1px solid var(--line); border-radius: 28px; padding: 24px 24px 28px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 12px; }
.step-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.itile { width: 48px; height: 48px; border-radius: 15px; background: var(--sf2); color: var(--pr2); display: inline-flex; align-items: center; justify-content: center; }
.step-n { font-size: 14px; font-weight: 800; color: var(--mu); }
.step h3 { font-size: 21px; line-height: 1.25; font-weight: 800; letter-spacing: -.01em; }
.step p { font-size: 15px; line-height: 1.55; color: var(--mu); }

/* ---------- features (bento) ---------- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.card { position: relative; overflow: hidden; background: var(--sf); border: 1px solid var(--line); border-radius: 32px; box-shadow: var(--card-shadow); }
.card h3 { font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
.card p { font-size: 16px; line-height: 1.55; color: var(--mu); }
.card-text { position: absolute; left: 40px; top: 36px; display: flex; flex-direction: column; gap: 12px; z-index: 3; }
.b-plans { grid-column: span 7; height: 540px; background: radial-gradient(60% 60% at 70% 30%, var(--glow2), transparent), var(--sf); }
.b-plans .card-text { width: 280px; }
.b-plans .phone-plans { --w: 230px; position: absolute; right: 60px; top: 28px; }
.b-plans .chip-car { width: 320px; left: 40px; bottom: 44px; z-index: 4; }
.b-time { grid-column: span 5; height: 540px; }
.b-time .card-text { right: 40px; }
.b-time .phone-time { --w: 220px; position: absolute; left: 50%; margin-left: -120px; top: 170px; }
.b-time .phone-time.fade { -webkit-mask-image: linear-gradient(#000 40%, transparent 72%); mask-image: linear-gradient(#000 40%, transparent 72%); }
.b-qr { grid-column: span 5; height: 480px; }
.b-qr .card-text { right: 40px; }
.b-qr .phone-qr { --w: 190px; position: absolute; left: 50%; margin-left: -105px; top: 200px; }
.b-qr .phone-qr.fade { -webkit-mask-image: linear-gradient(#000 52%, transparent 88%); mask-image: linear-gradient(#000 52%, transparent 88%); }
.b-qr .chip-plate { width: 360px; left: 50%; margin-left: -180px; bottom: 34px; border-radius: 12px; z-index: 4; }
.b-cards { grid-column: span 7; height: 480px; background: radial-gradient(50% 60% at 30% 80%, rgba(255, 122, 46, .08), transparent), var(--sf); }
.b-cards .card-text { width: 300px; }
.b-cards .phone-cards { --w: 210px; position: absolute; right: 50px; top: 40px; }
.b-cards .chip-auto { width: 340px; left: 40px; bottom: 40px; z-index: 4; }
.paychips { display: flex; gap: 8px; margin-top: 8px; }
.paychips span { height: 34px; padding: 0 12px; border-radius: 10px; background: var(--sf2); display: inline-flex; align-items: center; font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--tx); }
.icard { grid-column: span 4; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.icard h3 { font-size: 22px; margin-top: 18px; }
.icard p { font-size: 15px; }
.paytiles { display: flex; gap: 12px; }
.ptile { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ptile small { font-size: 12px; font-weight: 700; color: var(--mu); }
.ptile-box { width: 68px; height: 68px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ptile-click { background: #0B1220; color: #fff; font-size: 17px; font-weight: 800; letter-spacing: -.02em; border: 1px solid rgba(255, 255, 255, .08); }
.ptile-alif { background: #FFFFFF; color: #0B1220; border: 1px solid rgba(15, 27, 53, .10); line-height: 1; }
.ptile-alif b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.ptile-alif em { font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em; margin-top: 2px; }

/* ---------- plans ---------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan { background: var(--sf); border: 1px solid var(--line); border-radius: 32px; padding: 30px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; }
.plan-premium { border-color: rgba(255, 122, 46, .35); background: radial-gradient(70% 50% at 20% 0%, rgba(255, 122, 46, .10), transparent), var(--sf); }
.ptile-plan { position: relative; overflow: hidden; width: 88px; height: 88px; border-radius: 26px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin-bottom: 24px; }
.ptile-plan::before, .ptile-plan::after { content: ""; position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); width: 90%; height: 90%; right: -40%; bottom: -40%; }
.ptile-plan::after { border-color: rgba(255, 255, 255, .28); width: 60%; height: 60%; right: -25%; bottom: -25%; }
.plan-premium .ptile-plan { background: linear-gradient(145deg, #FFB547, #FF7A2E 55%, #FF4F7B); box-shadow: 0 14px 30px rgba(255, 122, 46, .35); }
.plan-pro .ptile-plan { background: linear-gradient(145deg, #C3A6FF, #8E6BFF 55%, #6A4BE0); box-shadow: 0 14px 30px rgba(142, 107, 255, .35); }
.plan-standart .ptile-plan { background: linear-gradient(145deg, #7FD0FF, #4FB3FF 55%, #2F7BFF); box-shadow: 0 14px 30px rgba(47, 123, 255, .35); }
.plan h3 { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.plan-term { font-size: 17px; font-weight: 600; color: var(--mu); margin-top: 4px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.plan dl { display: flex; flex-direction: column; gap: 12px; padding-top: 22px; }
.plan dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.plan dt { color: var(--mu); font-weight: 600; }
.plan dd { font-weight: 800; }
.plans-foot { display: flex; justify-content: center; align-items: center; gap: 22px; margin-top: 40px; flex-wrap: wrap; color: var(--mu); font-size: 15px; font-weight: 600; }

/* ---------- partner washes ---------- */
.partners { display: grid; grid-template-columns: 1fr 600px; gap: 40px; align-items: center; padding: 20px 20px 20px 54px; border-radius: 36px; }
.partners-text { display: flex; flex-direction: column; gap: 16px; max-width: 380px; }
.partners h2 { font-size: 38px; }
.partners p { font-size: 16px; line-height: 1.6; color: var(--mu); }
.pill-soon { align-self: flex-start; margin-top: 4px; background: var(--sf2); }
.map { height: 400px; border-radius: 26px; overflow: hidden; background: var(--sf2); position: relative; }
.map svg { width: 100%; height: 100%; display: block; }
.map-streets path { stroke: var(--street); stroke-width: 2; fill: none; }
.map-avenues path { stroke: var(--avenue); stroke-width: 9; fill: none; }
.map-river { fill: var(--river); }
.map-dots circle { fill: var(--pr2); stroke: #fff; stroke-width: 3; }
.map-me-halo { fill: rgba(79, 179, 255, .22); }
.map-me { fill: var(--pr2); stroke: #fff; stroke-width: 3.5; }

/* ---------- FAQ (native details, no JS) ---------- */
.faq { display: grid; grid-template-columns: 420px 1fr; gap: 60px; align-items: start; }
.faq-head { display: flex; flex-direction: column; gap: 14px; }
.faq-head p { font-size: 15px; line-height: 1.6; color: var(--mu); margin-top: 6px; }
.faq-head p a { text-decoration: underline; text-underline-offset: 3px; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; font-size: 19px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { flex: none; width: 36px; height: 36px; border-radius: 12px; background: var(--sf); border: 1px solid var(--line); position: relative; }
.faq summary i::before, .faq summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--tx); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: none; }
.faq details p { font-size: 16px; line-height: 1.6; color: var(--mu); padding: 0 56px 26px 0; }

/* ---------- final CTA (navy in both themes) ---------- */
.cta { position: relative; overflow: hidden; border-radius: 36px; padding: 80px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; background: linear-gradient(160deg, #0B1B3F, #16306B); color: #F4F7FD; }
.cta::before { content: ""; position: absolute; width: 900px; height: 600px; left: 50%; top: -260px; margin-left: -450px; background: radial-gradient(closest-side, rgba(79, 179, 255, .38), transparent); pointer-events: none; }
.cta > * { position: relative; }
.cta img { width: 73px; height: auto; }
.cta h2 { font-size: 56px; line-height: 1.05; }
.cta p { color: #A9BBDD; font-size: 18px; line-height: 1.5; max-width: 420px; margin-bottom: 10px; }
.cta .sbtn { background: #F4F7FD; color: #0A1428; }

/* ---------- footer ---------- */
.foot { padding-top: 72px; padding-bottom: 40px; }
.foot-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.foot-brand { display: flex; flex-direction: column; gap: 8px; }
.foot-brand p { color: var(--mu); font-size: 14px; }
.socials { display: flex; gap: 10px; flex-wrap: wrap; }
.socials a { height: 44px; padding: 0 16px; border-radius: 14px; background: var(--sf); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; color: var(--tx); font-size: 14px; font-weight: 700; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 24px; color: var(--mu); font-size: 14px; }
.legal { display: flex; gap: 24px; flex-wrap: wrap; }
.legal a { color: var(--mu); }
.legal a:hover { color: var(--tx); }

/* ---------- tablet ---------- */
@media (max-width: 1099.98px) {
  :root { --pad: 40px; --gap: 110px; --h1: 60px; --h2: 40px; }
  .nav-links, .sbtn-sm { display: none; }
  .menu { display: block; }
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-art { height: 520px; }
  .hero-art .phone-front { left: 50%; margin-left: -230px; }
  .hero-art .phone-back { left: 50%; margin-left: 40px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .b-plans, .b-time, .b-qr, .b-cards { grid-column: span 12; }
  .icard { grid-column: span 6; }
  .b-pay { grid-column: span 12; }
  .partners { grid-template-columns: 1fr; padding: 20px; }
  .partners-text { padding: 20px 20px 10px; max-width: none; }
  .faq { grid-template-columns: 1fr; gap: 28px; }
}

/* ---------- phone ---------- */
@media (max-width: 759.98px) {
  :root { --pad: 20px; --gap: 72px; --h1: 44px; --h2: 32px; }
  .nav { height: 64px; }
  .head { margin-bottom: 28px; gap: 10px; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .eyebrow { font-size: 12px; }
  .hero { padding-top: 24px; gap: 28px; }
  .hero-text { gap: 20px; }
  .hero h1 { letter-spacing: -.03em; line-height: 1.04; }
  .hero-sub { font-size: 17px; }
  .stores { width: 100%; }
  .sbtn { height: 56px; border-radius: 16px; padding: 0 16px 0 14px; flex: 1 1 0; justify-content: center; min-width: 0; }
  .sbtn b { font-size: 17px; }
  .hero-art { height: 360px; }
  .hero-art .phone-front { --w: 230px; left: 0; margin-left: 0; }
  .hero-art .phone-back { --w: 180px; left: auto; right: -30px; margin-left: 0; top: 50px; }
  .steps { grid-template-columns: 1fr; gap: 0; background: var(--sf); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--card-shadow); }
  .step { flex-direction: row; align-items: flex-start; gap: 14px; border: 0; border-radius: 0; box-shadow: none; background: none; padding: 18px; display: grid; grid-template-columns: 40px 1fr; }
  .step + .step { border-top: 1px solid var(--line); }
  .step-top { grid-row: span 2; margin: 0; }
  .step-top .itile { display: none; }
  .step-n { width: 40px; height: 40px; border-radius: 12px; background: var(--sf2); color: var(--pr-tx); display: flex; align-items: center; justify-content: center; font-size: 14px; }
  .step h3 { font-size: 17px; }
  .step p { font-size: 14px; }
  .bento { gap: 14px; }
  .card { border-radius: 28px; }
  .card h3 { font-size: 21px; }
  .card p { font-size: 15px; }
  .card-text { left: 22px; right: 22px; top: 24px; width: auto; gap: 10px; }
  .b-plans .card-text, .b-cards .card-text { width: auto; }
  .b-plans { height: 520px; }
  .b-plans .phone-plans { --w: 220px; right: 50%; margin-right: -120px; top: 150px; }
  .b-plans .chip-car { width: 260px; left: 22px; bottom: 26px; }
  .b-time { height: 470px; }
  .b-time .phone-time { --w: 220px; top: 130px; }
  .b-qr { height: 500px; }
  .b-qr .phone-qr { --w: 190px; top: 190px; }
  .b-qr .chip-plate { width: 300px; margin-left: -150px; bottom: 26px; }
  .b-cards { height: 520px; }
  .b-cards .phone-cards { --w: 210px; right: 50%; margin-right: -115px; top: 210px; }
  .b-cards .chip-auto { width: 290px; left: 22px; bottom: 26px; }
  .icard { grid-column: span 6; padding: 22px; }
  .icard h3 { font-size: 17px; margin-top: 10px; }
  .icard p { font-size: 14px; }
  .b-pay { grid-column: span 12; }
  .b-pay h3 { font-size: 21px; }
  .plans { grid-template-columns: 1fr; gap: 12px; }
  .plan { flex-direction: row; align-items: center; gap: 16px; padding: 18px; border-radius: 24px; }
  .ptile-plan { flex: none; width: 64px; height: 64px; border-radius: 19px; font-size: 22px; margin: 0; }
  .plan h3 { font-size: 21px; }
  .plan-term { border: 0; padding: 0; font-size: 14px; margin-top: 2px; }
  .plan dl { padding: 0; margin-top: 4px; gap: 2px; }
  .plan dl div:not(:nth-child(3)) { display: none; }
  .plan dl div { font-size: 13px; justify-content: flex-start; gap: 6px; }
  .plans-foot { flex-direction: column; gap: 14px; margin-top: 24px; }
  .gbtn { width: 100%; height: 56px; }
  .partners { padding: 14px; border-radius: 28px; gap: 8px; }
  .partners-text { padding: 14px 10px 10px; }
  .partners h2 { font-size: 28px; }
  .map { height: 220px; order: -1; }
  .faq summary { font-size: 16px; padding: 20px 0; }
  .faq details p { padding-right: 0; font-size: 15px; }
  .cta { padding: 48px 20px; border-radius: 28px; }
  .cta img { width: 56px; }
  .cta h2 { font-size: 32px; line-height: 1.1; }
  .cta p { font-size: 16px; }
  .cta .stores { flex-direction: column; }
  .cta .sbtn { width: 100%; flex: none; }
  .foot { padding-top: 48px; }
  .legal { gap: 12px 20px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }