/* YuGO Rides – site styles
   Layout: wide 1200px container, left-aligned text; hero splits copy / real scooter on a teal disc
   resting on the logo's double rule. Plans are the visual centre of the page. */

:root {
  --teal: #00a6a6;          /* brand turquoise (scooter body, logo) – large shapes only */
  --teal-ink: #00797a;      /* AA-contrast teal for buttons and links on white */
  --teal-deep: #075b5d;     /* hover / pressed */
  --teal-soft: #d6f1f1;     /* tints */
  --teal-wash: #eef8f8;     /* section background */
  --amber: #e7ad4f;         /* logo "YU" amber – tiny accents only */
  --ink: #16242a;           /* charcoal text */
  --muted: #4b5d63;
  --line: #d3e3e3;
  --paper: #ffffff;
  --bg: #ffffff;
  --danger: #b42318;

  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --body: "Inter", "Segoe UI", system-ui, sans-serif;

  --maxw: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 16px;
  --header-h: 72px;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--teal-ink); text-underline-offset: 3px; }
a:hover { color: var(--teal-deep); }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.25; }
p { max-width: 64ch; }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 50px; padding: 0 1.4em; border-radius: 999px; font: 600 1rem/1 var(--body); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; white-space: nowrap; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--teal-ink); color: #fff; }
.btn-primary:hover { background: var(--teal-deep); color: #fff; }
.btn-outline { border-color: var(--teal-ink); color: var(--teal-ink); background: #fff; }
.btn-outline:hover { background: var(--teal-wash); color: var(--teal-deep); }
.btn-light { background: #fff; color: var(--teal-deep); }
.btn-light:hover { background: var(--teal-soft); color: var(--teal-deep); }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.96); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--header-h); }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 42px; width: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a:not(.btn) { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .98rem; padding: 10px 12px; border-radius: 8px; }
.nav a:not(.btn):hover { background: var(--teal-wash); color: var(--teal-deep); }
.nav .btn { margin-left: 10px; min-height: 44px; }
.menu-toggle { display: none; background: none; border: 0; width: 48px; height: 48px; border-radius: 10px; cursor: pointer; color: var(--ink); }
.menu-toggle svg { width: 28px; height: 28px; margin: auto; }
@media (max-width: 960px) {
  .menu-toggle { display: grid; }
  .nav { position: fixed; inset: var(--header-h) 0 auto 0; background: #fff; border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 20px; box-shadow: 0 16px 30px -20px rgba(22,36,42,.35); display: none; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 14px 4px; border-bottom: 1px solid var(--line); border-radius: 0; font-size: 1.05rem; }
  .nav .btn { margin: 16px 0 0; }
}

/* Sections */
section { padding-block: clamp(64px, 9vw, 112px); scroll-margin-top: var(--header-h); }
.section-head { margin-bottom: clamp(32px, 4vw, 52px); }
.section-head p { color: var(--muted); font-size: 1.125rem; margin-top: 14px; }
.wash { background: var(--teal-wash); }

/* Hero */
.hero { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 7vw, 96px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { min-width: 0; }
.tagline { display: inline-block; font-family: var(--display); font-weight: 700; color: var(--teal-ink); font-size: 1.05rem; margin-bottom: 18px; }
.hero h1 { font-size: clamp(2.7rem, 6.4vw, 5.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; }
.hero h1 span { display: block; }
.hero .lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--muted); margin: 24px 0 32px; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 36px; color: var(--ink); font-weight: 600; font-size: .98rem; }
.hero-facts li { display: flex; align-items: center; gap: 8px; }
.hero-facts svg { width: 20px; height: 20px; color: var(--teal-ink); flex: none; }
.hero-art { position: relative; justify-self: center; width: min(100%, 460px); }
.hero-art .disc { position: absolute; left: 50%; top: 46%; width: 92%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: var(--teal-soft); }
.hero-art img { position: relative; margin: 0 auto; width: auto; height: clamp(300px, 34vw, 420px); aspect-ratio: 199 / 336; filter: drop-shadow(0 22px 22px rgba(7, 91, 93, .22)); }
.road { position: relative; height: 18px; margin-top: -6px; }
.road::before, .road::after { content: ""; position: absolute; left: 0; right: 0; height: 5px; border-radius: 3px; background: var(--teal); }
.road::before { top: 0; } .road::after { bottom: 0; }
.hero-note { position: relative; margin-top: 14px; font-size: .85rem; color: var(--muted); text-align: center; }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-art { width: min(100%, 320px); }
  .hero-art img { height: 260px; }
}

/* Plans */
.plans-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.plan { background: var(--paper); border: 1.5px solid var(--line); border-radius: 20px; padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.plan.featured { border: 2px solid var(--teal); box-shadow: 0 18px 40px -26px rgba(0, 121, 122, .55); }
.plan-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.plan h3 { font-size: 1.6rem; font-weight: 800; }
.plan .for { color: var(--muted); margin-top: 6px; }
.chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--teal-soft); color: var(--teal-deep); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.price { font-family: var(--display); font-weight: 800; color: var(--ink); letter-spacing: -0.03em; line-height: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; padding-block: 18px; border-block: 4px double var(--teal); font-variant-numeric: tabular-nums; }
.price .amt { font-size: clamp(2.6rem, 5vw, 3.4rem); }
.price .per { font-family: var(--body); font-weight: 600; font-size: 1.05rem; color: var(--muted); letter-spacing: 0; }
.price .plus { font-size: clamp(1.6rem, 3vw, 2rem); }
.price .grp { display: inline-flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.terms { list-style: none; display: grid; gap: 0; }
.terms li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.terms li:last-child { border-bottom: 0; }
.terms dt, .terms .k { color: var(--muted); }
.terms .v { font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.plan .btn { align-self: flex-start; margin-top: auto; }
.plans-note { margin-top: 24px; color: var(--muted); font-size: .95rem; }
@media (max-width: 760px) { .plans-grid { grid-template-columns: 1fr; } .terms li { grid-template-columns: 1fr; gap: 2px; } .terms .v { text-align: left; } }

/* Steps */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); counter-reset: step; }
.steps li { counter-increment: step; min-width: 0; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--teal-ink); color: #fff; font: 800 1.25rem/1 var(--display); margin-bottom: 18px; }
.steps h3 { margin-bottom: 8px; }
.steps p { color: var(--muted); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 16px; } .steps li::before { grid-row: span 2; margin: 0; } }

/* About */
.about-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.big-quote { font-family: var(--display); font-weight: 800; font-size: clamp(2.8rem, 7vw, 5.4rem); line-height: .98; letter-spacing: -0.04em; color: var(--teal-ink); }
.about-copy > p { font-size: 1.125rem; color: var(--muted); margin-top: 20px; }
.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; }
.vm div { border-top: 4px double var(--teal); padding-top: 16px; }
.vm h3 { font-size: 1.1rem; margin-bottom: 6px; }
.vm p { color: var(--muted); }
.benefits { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(48px, 6vw, 72px); }
.benefits li { min-width: 0; }
.benefits svg { width: 36px; height: 36px; color: var(--teal-ink); margin-bottom: 14px; }
.benefits h3 { margin-bottom: 6px; }
.benefits p { color: var(--muted); }
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; } .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .vm, .benefits { grid-template-columns: 1fr; } }

/* Swap explainer */
.swap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.swap-figure { background: #fff; border-radius: 24px; padding: clamp(24px, 4vw, 40px); border: 1.5px solid var(--line); }
.swap-row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 10px; }
.pack { border: 2px solid var(--ink); border-radius: 12px; padding: 10px; position: relative; }
.pack::after { content: ""; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 6px; height: 22px; background: var(--ink); border-radius: 0 3px 3px 0; }
.cells { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; height: 44px; }
.cells i { border-radius: 4px; background: var(--line); }
.pack.low .cells i:first-child { background: var(--amber); }
.pack.full .cells i { background: var(--teal); }
.pack-label { margin-top: 10px; font-weight: 600; font-size: .95rem; text-align: center; }
.swap-row svg { width: 32px; height: 32px; color: var(--teal-ink); margin: 0 auto 26px; }
.swap-figure figcaption { margin-top: 22px; color: var(--muted); font-size: .95rem; }
.swap-points { list-style: none; display: grid; gap: 18px; margin-top: 24px; }
.swap-points li { padding-left: 28px; position: relative; }
.swap-points li::before { content: ""; position: absolute; left: 0; top: .5em; width: 14px; height: 8px; border-block: 2px solid var(--teal); }
.swap-points b { display: block; }
.swap-points span { color: var(--muted); }
@media (max-width: 860px) { .swap { grid-template-columns: 1fr; } }

/* FAQ */
.faq { max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 700 1.125rem/1.35 var(--display); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--teal-ink); border-bottom: 2.5px solid var(--teal-ink); transform: rotate(45deg) translate(-3px, -3px); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details > div { padding: 0 0 24px; color: var(--muted); }
.faq details > div p + p { margin-top: 10px; }

/* Franchise */
.franchise { background: var(--teal-deep); color: #fff; }
.franchise h2, .franchise h3 { color: #fff; }
.fr-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 72px); align-items: start; }
.fr-copy p { color: #d5eded; font-size: 1.125rem; margin-top: 16px; }
.fr-copy .contact-inline { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.fr-panel { background: #fff; color: var(--ink); border-radius: 20px; padding: clamp(22px, 3vw, 32px); min-width: 0; }
.fr-panel h3 { color: var(--ink); font-size: 1.4rem; margin-bottom: 6px; }
.fr-panel > p { color: var(--muted); margin-bottom: 18px; }
.form { display: grid; gap: 8px; }
.form > h3, .form > p { margin-bottom: 4px; }
.form .btn { justify-self: start; margin-top: 6px; }
.row2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: .95rem; }
.field .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea { font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1.5px solid #b9cccc; border-radius: 10px; padding: 12px 14px; min-height: 48px; width: 100%; }
.field textarea { min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--teal-ink); box-shadow: 0 0 0 3px rgba(0, 121, 122, .2); }
.field [aria-invalid="true"] { border-color: var(--danger); }
.field .err { color: var(--danger); font-size: .85rem; line-height: 1.3; min-height: 1.3em; } /* reserved so the layout never jumps under the pointer */
.hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.consent { font-size: .88rem; color: var(--muted); }
.form-status { font-weight: 600; padding: 12px 14px; border-radius: 10px; }
.form-status:empty { display: none; }
.form-status.ok { background: #e3f6ec; color: #0f5b33; }
.form-status.err { background: #fde8e7; color: var(--danger); }
.form-status.busy { background: var(--teal-wash); color: var(--teal-deep); }
.fr-fallback ul { list-style: none; display: grid; gap: 10px; margin-top: 8px; }
@media (max-width: 900px) { .fr-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .row2 { grid-template-columns: 1fr; } }

/* Contact */
.contact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.card { background: #fff; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 24px; min-width: 0; }
.card h3 { font-size: 1rem; color: var(--muted); font-family: var(--body); font-weight: 600; margin-bottom: 10px; }
.card .big { font: 700 1.25rem/1.35 var(--display); color: var(--ink); text-decoration: none; display: block; overflow-wrap: anywhere; }
.card a.big:hover { color: var(--teal-deep); }
.card .big + .big { margin-top: 6px; }
.card address { font-style: normal; font: 600 1.1rem/1.5 var(--display); }
.card .sub { margin-top: 12px; display: inline-block; font-weight: 600; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* Footer */
.site-footer { background: var(--ink); color: #c9d6d8; padding-block: 48px 36px; font-size: .95rem; }
.site-footer a { color: #e8f1f2; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 32px; }
.foot-logo { background: #fff; border-radius: 12px; padding: 10px 14px; display: inline-block; }
.foot-logo img { height: 64px; width: auto; }
.site-footer h2 { font: 700 1rem/1.3 var(--body); color: #fff; margin-bottom: 12px; }
.site-footer ul { list-style: none; display: grid; gap: 8px; }
.foot-base { margin-top: 36px; padding-top: 20px; border-top: 1px solid #33464c; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr; } }

/* Mobile call bar (thumb reach, real tel: links only) */
.callbar { display: none; }
@media (max-width: 640px) {
  .callbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.97); border-top: 1px solid var(--line); }
  .callbar .btn { min-height: 46px; padding: 0 .8em; font-size: .95rem; }
  body { padding-bottom: 72px; }
}

/* Legal draft pages */
.legal { padding-block: 56px 88px; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 16px; }
.legal h2 { font-size: 1.35rem; margin: 32px 0 10px; }
.legal p, .legal li { color: var(--muted); }
.legal ul { padding-left: 1.2em; display: grid; gap: 6px; }
.draft-banner { background: #fff4df; border: 1.5px solid var(--amber); color: #6b4300; border-radius: 12px; padding: 14px 18px; margin-bottom: 28px; font-weight: 600; }

.lede-muted { color: var(--muted); font-size: 1.125rem; margin-top: 14px; }
.foot-about { margin-top: 14px; }

/* ================= Franchise page ================= */
.fx-hero { padding-block: clamp(36px, 5vw, 72px) clamp(40px, 5vw, 64px); }
.fx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.fx-hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
.fx-hero h1 span { display: block; }
.fx-hero h1 span + span { color: var(--teal-ink); }
.fx-hero .lede { font-size: clamp(1.08rem, 1.5vw, 1.25rem); color: var(--muted); margin: 22px 0 30px; max-width: 50ch; }
.fx-hero-art { margin: 0; justify-self: center; width: min(100%, 440px); }
.fx-hero-art img { width: 100%; border-radius: 24px; aspect-ratio: 524 / 500; object-fit: cover; }
.fx-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 5vw, 56px); border-block: 4px double var(--teal); }
.fx-figures div { padding: 20px 18px; min-width: 0; }
.fx-figures div + div { border-left: 1px solid var(--line); }
.fx-figures dt { color: var(--muted); font-size: .92rem; font-weight: 500; }
.fx-figures dd { font: 800 clamp(1.8rem, 3.4vw, 2.6rem)/1.1 var(--display); letter-spacing: -0.03em; color: var(--ink); margin-top: 6px; font-variant-numeric: tabular-nums; }
.fx-note { margin-top: 14px; font-size: .88rem; color: var(--muted); max-width: 90ch; }
@media (max-width: 860px) {
  .fx-hero-grid { grid-template-columns: 1fr; }
  .fx-hero-art { width: min(100%, 360px); }
  .fx-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fx-figures div:nth-child(3) { border-left: 0; }
  .fx-figures div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

.fx-pillars { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.fx-pillars li { border-top: 4px double var(--teal); padding-top: 16px; min-width: 0; }
.fx-pillars h3 { margin-bottom: 6px; }
.fx-pillars p { color: var(--muted); }
.fx-subhead { font-size: 1.35rem; margin: clamp(40px, 5vw, 56px) 0 20px; }
.fx-subhead.first { margin-top: 0; }
.fx-flow, .fx-settle { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; counter-reset: f; }
.fx-settle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fx-flow li, .fx-settle li { counter-increment: f; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px; min-width: 0; position: relative; }
.fx-flow li::before, .fx-settle li::before { content: counter(f, decimal-leading-zero); display: block; font: 800 .9rem/1 var(--display); color: var(--teal-ink); margin-bottom: 10px; }
.fx-flow b, .fx-settle b { display: block; font: 700 1.05rem/1.3 var(--display); }
.fx-flow span, .fx-settle span { color: var(--muted); font-size: .95rem; }
@media (max-width: 900px) { .fx-pillars { grid-template-columns: 1fr; } .fx-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fx-flow, .fx-settle { grid-template-columns: 1fr; } }

.fx-models { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.fx-model { background: #fff; border: 1.5px solid var(--line); border-radius: 20px; padding: clamp(24px, 3vw, 34px); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.fx-model.featured { border: 2px solid var(--teal); }
.fx-model .chip { align-self: flex-start; }
.fx-model h3 { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; }
.fx-model-sub { color: var(--muted); margin-top: -8px; }
.ticks { list-style: none; display: grid; gap: 10px; }
.ticks li { padding-left: 28px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: .35em; width: 14px; height: 8px; border-left: 2.5px solid var(--teal-ink); border-bottom: 2.5px solid var(--teal-ink); transform: rotate(-45deg); }
.fx-best { color: var(--muted); }
.fx-best b { color: var(--ink); }
.fx-entry { margin-top: auto; padding-top: 16px; border-top: 4px double var(--teal); font: 700 1.1rem/1.4 var(--display); }
.fx-entry span { display: block; font: 500 .85rem/1.4 var(--body); color: var(--muted); }
.fx-raci { margin-top: 28px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; }
.fx-raci summary { cursor: pointer; padding: 18px 22px; font: 700 1.05rem/1.3 var(--display); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fx-raci summary::-webkit-details-marker { display: none; }
.fx-raci summary::after { content: "+"; font-size: 1.5rem; color: var(--teal-ink); }
.fx-raci[open] summary::after { content: "–"; }
.fx-raci .table-scroll { padding: 0 22px 22px; }
.table-scroll { overflow-x: auto; }
.table-scroll table { width: 100%; border-collapse: collapse; min-width: 520px; }
.table-scroll th, .table-scroll td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table-scroll thead th { font-size: .9rem; color: var(--muted); font-weight: 600; }
@media (max-width: 760px) { .fx-models { grid-template-columns: 1fr; } }

/* Calculator */
.calc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 36px); background: #fff; border: 1.5px solid var(--line); border-radius: 22px; padding: clamp(20px, 3vw, 36px); }
.calc-controls, .calc-out { min-width: 0; }
.seg { border: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; background: var(--teal-wash); padding: 6px; border-radius: 14px; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; text-align: center; padding: 11px 6px; border-radius: 10px; font-weight: 600; font-size: .95rem; cursor: pointer; }
.seg input:checked + span { background: var(--teal-ink); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: 2px; }
.slider { margin-top: 26px; }
.slider label { display: flex; justify-content: space-between; font-weight: 600; }
.slider output { font: 800 1.4rem/1 var(--display); color: var(--teal-ink); font-variant-numeric: tabular-nums; }
.slider input[type=range] { width: 100%; margin-top: 12px; accent-color: var(--teal-ink); height: 28px; }
.slider-scale { display: flex; justify-content: space-between; font-size: .8rem; color: var(--muted); }
.calc-facts { margin-top: 26px; display: grid; gap: 0; }
.calc-facts div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.calc-facts dt { color: var(--muted); }
.calc-facts dd { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th { text-align: left; font-weight: 500; padding: 11px 0; border-bottom: 1px solid var(--line); }
.ledger td { text-align: right; font-weight: 600; padding: 11px 0 11px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ledger tr.sub th { color: var(--teal-ink); font-weight: 600; }
.ledger tr.minus td { color: var(--muted); }
.ledger tr.total th, .ledger tr.total td { font: 800 1.1rem/1.3 var(--display); border-bottom: 0; border-top: 4px double var(--teal); padding-top: 14px; }
.ledger tr.total.neg td { color: var(--danger); }
.calc-result { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.calc-result div { background: var(--teal-wash); border-radius: 12px; padding: 14px; min-width: 0; }
.calc-result span { display: block; font-size: .82rem; color: var(--muted); font-weight: 500; }
.calc-result strong { display: block; font: 800 1.3rem/1.2 var(--display); margin-top: 4px; font-variant-numeric: tabular-nums; }
.fx-disclaimer { margin-top: 18px; font-size: .88rem; color: var(--muted); max-width: 100ch; }
@media (max-width: 900px) { .calc { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .calc-result { grid-template-columns: 1fr; } .seg span { font-size: .85rem; } }

.fx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.fx-gap { margin-top: clamp(36px, 5vw, 56px); }
.kv { display: grid; margin-top: 22px; }
.kv div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kv dt { color: var(--muted); }
.kv dd { font-weight: 700; }
.fx-small { margin-top: 18px; font-size: .95rem; color: var(--muted); }
.tiers { min-width: 560px; }
.tiers th { color: var(--muted); font-weight: 600; white-space: nowrap; }
.tiers td { font: 700 1.15rem/1.3 var(--display); text-align: center; font-variant-numeric: tabular-nums; }
.tiers thead td { font: 600 .95rem/1.3 var(--body); color: var(--ink); }
.tiers tbody td:last-child { color: var(--teal-ink); }
@media (max-width: 860px) { .fx-two { grid-template-columns: 1fr; } }

.fx-who { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(20px, 4vw, 40px); align-items: center; margin-top: clamp(40px, 5vw, 64px); background: var(--teal-wash); border-radius: 22px; padding: clamp(18px, 3vw, 28px); }
.fx-who img { border-radius: 16px; width: 100%; aspect-ratio: 364 / 240; object-fit: cover; }
.fx-who h3 { font-size: 1.4rem; margin-bottom: 8px; }
.fx-who p { color: var(--muted); }
@media (max-width: 760px) { .fx-who { grid-template-columns: 1fr; } }

.fx-notice { padding-block: 28px; background: #fff4df; }
.fx-notice p { color: #5a4100; font-size: .92rem; max-width: 110ch; }
.fr-page .franchise { scroll-margin-top: var(--header-h); }

/* Homepage franchise teaser */
.fr-teaser-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.fr-teaser-figs div { border: 1px solid rgba(255,255,255,.25); border-radius: 12px; padding: 12px 14px; }
.fr-teaser-figs b { display: block; font: 800 1.5rem/1.1 var(--display); color: #fff; }
.fr-teaser-figs span { font-size: .85rem; color: #d5eded; }
@media (max-width: 480px) { .fr-teaser-figs { grid-template-columns: 1fr; } }