/* ==========================================================================
   Pinit — customer website (pinitsarees.com)
   Shared by index.html, franchise.html and the three legal pages.
   Palette sampled directly from the Figma export:
     maroon  #660108 -> #7A000A   (header, ticker, riders band)
     red     #C0392B              (accent words, buttons, icons)
     gold    #E67E22              (section headings, highlights)
     ink     #23150F              (body headings)
   ========================================================================== */

:root {
  --maroon: #660108;
  --maroon-2: #7a000a;
  --maroon-deep: #5f160a;
  --red: #c0392b;
  --red-dark: #a5301f;
  --gold: #e67e22;
  --ink: #23150F;
  --body: #4a4a4a;
  --muted: #767676;
  --cream: #fdf5f2;
  --cream-2: #f9f1ee;
  --line: #ece3df;
  --white: #fff;

  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1200px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 10px 30px rgba(35, 21, 15, .08);
  --header-h: 64px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--body);
  background: var(--white);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.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;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--maroon); color: #fff;
  padding: 10px 16px; z-index: 100; text-decoration: none;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  /* Flat #660108 across the first 20% so it matches the maroon baked into
     pinit-logo.png exactly — a gradient there would show a seam round the logo. */
  background: linear-gradient(90deg, #660108 0%, #660108 20%, #4a0106 58%, #2e0104 100%);
  height: var(--header-h);
}
.topbar__inner {
  max-width: 1320px; margin: 0 auto; padding: 0 24px;
  height: 100%; display: flex; align-items: center; gap: 28px;
}
.topbar__logo { flex: none; display: block; }
.topbar__logo img { height: 38px; width: auto; }

.topnav { display: flex; align-items: center; gap: 26px; margin-left: auto; }
.topnav a {
  color: rgba(255, 255, 255, .88);
  text-decoration: none; font-size: 14px; white-space: nowrap;
}
.topnav a:hover, .topnav a[aria-current="page"] { color: #fff; }

.stores { display: flex; gap: 10px; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: 8px;
  background: #000; color: #fff; border: 1px solid #2a2a2a;
  border-radius: 8px; padding: 6px 14px;
  text-decoration: none; line-height: 1.15;
}
.store:hover { opacity: .85; }
.store svg { width: 19px; height: 19px; flex: none; }
.store__txt { display: flex; flex-direction: column; }
.store__sub { font-size: 8.5px; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.store__name { font-size: 13.5px; font-weight: 700; }
.topbar .store { padding: 5px 12px; }

.burger {
  display: none; margin-left: auto;
  width: 40px; height: 34px; border-radius: 8px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff; cursor: pointer;
  align-items: center; justify-content: center;
}
.burger span, .burger span::before, .burger span::after {
  display: block; width: 16px; height: 2px; background: currentColor; position: relative;
}
.burger span::before, .burger span::after { content: ""; position: absolute; left: 0; }
.burger span::before { top: -5px; }
.burger span::after { top: 5px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 8px; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  padding: 13px 24px; text-decoration: none;
}
.btn--red { background: var(--red); color: #fff; width: 100%; }
.btn--red:hover { background: var(--red-dark); }
.btn--gold { background: linear-gradient(90deg, var(--gold), #d9741d); color: #fff; }

/* ---------- Hero ---------- */
.hero { background: var(--white); overflow: hidden; }
.hero__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 60px 24px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center;
}
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 58px);
  line-height: 1.14; color: var(--ink);
  margin: 0 0 14px; font-weight: 700;
}
.hero h1 .red { color: var(--red); }
.hero h1 .gold { color: var(--gold); }
.hero__tag {
  font-weight: 700; font-style: italic; color: var(--ink);
  font-size: 17px; margin: 0 0 16px;
}
.hero__body { color: var(--body); margin: 0 0 26px; max-width: 46ch; }
.hero__label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 10px;
}
/* Entrance animation, matching the reference recording frame-by-frame: the
   arch backdrop is STATIC while only the phones rise from the bottom of the
   arch, scaling up from small to full size as they climb. (The previous
   version animated the whole block — arch included — because the old asset
   had the arch baked into the phones image; the layers are now split.)
   The arch's absolute offsets reproduce the original combined 614x764
   composition: arch 604px wide at (6,54) → 98.37% at left .98% / top 7.07%. */
.hero__media { position: relative; }
.hero__arch {
  position: absolute;
  left: .98%; top: 7.07%;
  width: 98.37%; height: auto;
}
.hero__phones {
  position: relative; /* paints above the absolutely-positioned arch */
  width: 100%; height: auto;
  transform-origin: 50% 85%;
  opacity: 0; /* hidden until the page has loaded; html.is-loaded starts the rise */
}
/* The entrance only starts once the whole page (images included) has loaded —
   pinit-site.js adds .is-loaded on window load. Starting it on a fixed timer
   meant it played over a half-rendered page on refresh. */
html.is-loaded .hero__phones {
  animation: phones-rise .65s cubic-bezier(0.22, 1, 0.36, 1) .45s both;
}
@keyframes phones-rise {
  from { opacity: 0; transform: translateY(38%) scale(.45); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__phones, html.is-loaded .hero__phones { animation: none; opacity: 1; }
}
.hero__rule { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; position: relative; }
.hero__rule hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
.scrolldown {
  position: absolute; left: 50%; bottom: -6px; transform: translate(-50%, -50%);
  width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  display: grid; place-items: center; color: var(--muted);
  animation: scrolldown-bob 2s ease-in-out infinite;
}
.scrolldown:hover { color: var(--red); border-color: var(--red); }
.scrolldown svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
@keyframes scrolldown-bob {
  0%, 100% { transform: translate(-50%, -50%); }
  50% { transform: translate(-50%, calc(-50% + 5px)); }
}
@media (prefers-reduced-motion: reduce) {
  .scrolldown { animation: none; }
}

/* ---------- Fabric ticker ---------- */
.ticker {
  background: linear-gradient(90deg, var(--maroon-2), #4a0106);
  color: #fff; overflow: hidden; padding: 15px 0;
}
.ticker__track {
  display: flex; gap: 0; width: max-content;
  animation: ticker 38s linear infinite;
}
.ticker__track span {
  font-family: var(--font-display); font-size: 16px;
  padding: 0 26px; white-space: nowrap; display: inline-flex; align-items: center; gap: 26px;
}
.ticker__track span::after { content: "\25C6"; font-size: 9px; color: var(--gold); }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ---------- Generic section ---------- */
.sec { padding: 76px 0; }
.sec--cream { background: var(--cream); }
.sec--cream2 { background: var(--cream-2); }
.sec__head { text-align: center; max-width: 640px; margin: 0 auto 44px; }
.sec__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px); line-height: 1.2;
  margin: 0 0 12px; color: var(--gold);
}
.sec__title--ink { color: var(--ink); }
.sec__sub { color: var(--body); margin: 0; font-size: 15.5px; }

/* ---------- About ---------- */
.about__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: center;
}
.about h2 {
  font-family: var(--font-display); color: var(--gold);
  font-size: clamp(26px, 3vw, 36px); margin: 0 0 6px; font-weight: 700;
}
.about h3 {
  font-family: var(--font-display); font-style: italic; font-weight: 700;
  color: var(--ink); font-size: 18px; margin: 0 0 18px;
}
.about p { margin: 0 0 14px; }

/* ---------- How it works ---------- */
.modes { display: flex; justify-content: center; margin-bottom: 40px; }
.modes__wrap {
  display: inline-flex; background: #fae3e0; border-radius: 999px; padding: 5px;
}
.mode {
  display: inline-flex; align-items: center; gap: 9px;
  border: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--ink); padding: 11px 26px; border-radius: 999px;
}
.mode svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.mode[aria-selected="true"] { background: var(--red); color: #fff; }

.hiw__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
}
.hiw__panel[hidden] { display: none; }
.step__shot {
  /* No border/radius here on purpose — each hiw-*.png already has its own
     red frame and rounded corners baked in from the Figma export (its exact
     pixels). A CSS border here duplicated it in a different red shade
     (#c0392b vs the baked-in #c43a27), producing a visible two-tone edge. */
  margin-bottom: 20px;
}
.step__shot img { display: block; width: 100%; height: auto; }
.step h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 19px; color: var(--ink); margin: 0 0 8px; text-align: center;
}
.step p { margin: 0; text-align: center; color: var(--muted); font-size: 14px; }

/* ---------- Deposit band ---------- */
.deposit { padding: 40px 0 80px; }
.deposit__card {
  max-width: var(--wrap); margin: 0 auto;
  background: linear-gradient(100deg, #a5211a, #7d0f10 60%, #6a0a0d);
  border-radius: var(--radius-lg); color: #fff;
  display: grid; grid-template-columns: 1fr .9fr; gap: 30px; align-items: center;
  padding: 46px 48px; position: relative;
}
.deposit__card h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px); line-height: 1.22; margin: 0 0 16px;
}
.deposit__card p { color: rgba(255, 255, 255, .88); margin: 0; font-size: 14.5px; }
.deposit__bill {
  justify-self: end; align-self: stretch;
  position: relative;
  width: 400px; max-width: 100%; min-height: 250px;
}
/* Static phone frame. Overhangs the panel's top edge (top offset = panel
   padding 46px + 48px pop-out) and runs flush to its bottom edge (offset =
   panel padding), matching the reference composition. */
.bill-phone {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: -94px; bottom: -46px; width: 250px;
  background: #f6f5f4; border: 1.5px solid #d9453c;
  border-bottom: 0; border-radius: 34px 34px 0 0;
  overflow: hidden; display: flex; flex-direction: column;
}
.bill-phone__status {
  display: flex; align-items: center; justify-content: space-between;
  background: #fff; padding: 12px 20px 8px;
  font-size: 13px; font-weight: 600; color: #111;
}
.bill-phone__bar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; padding: 8px 16px 12px;
  font-size: 13.5px; color: #111;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}
/* The bill card rises/fades in over the phone once scrolled into view; it is
   deliberately wider than the phone, overhanging it on both sides. */
.bill-card {
  position: absolute; left: 0; right: 0; top: 8px;
  background: #fff; border-radius: 16px; padding: 8px 24px 20px;
  box-shadow: 0 18px 44px rgba(40, 8, 8, .25);
  color: #333;
}
.bill-card.reveal { transform: translateY(36px) scale(.94); transition-delay: .35s; }
.bill-card.reveal.is-visible { transform: translateY(0) scale(1); }
.bill-card__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid #ececec; font-size: 15px;
}
.bill-card__row strong { font-weight: 600; color: #1c1c1c; }
.bill-card__credit { color: #27ae60; font-weight: 600; }
.bill-card__row--total { border-bottom: 0; padding-bottom: 4px; }
.bill-card__row--total b { font-size: 15px; color: #111; }
.bill-card__total {
  font-family: var(--font-display); font-weight: 700;
  font-size: 24px; color: #111;
}
/* doubled class beats .deposit__card p, which would otherwise paint this
   note white-on-white inside the maroon panel */
.bill-card .bill-card__note { margin: 4px 0 0; font-size: 12px; line-height: 1.55; color: #6b6b6b; }

/* ---------- Franchise CTA block ---------- */
.fcta__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.fcta h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2;
  color: var(--ink); margin: 0 0 14px;
}
.fcta h2 .gold { color: var(--gold); }
.fcta__lead { margin: 0 0 30px; max-width: 40ch; }
.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.perk { text-align: center; }
.perk__ico {
  width: 42px; height: 42px; margin: 0 auto 10px;
  border-radius: 10px; background: #fdeeea;
  display: grid; place-items: center;
}
.perk__ico svg { width: 21px; height: 21px; fill: none; stroke: var(--red); stroke-width: 1.6; }
.perk p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--ink); font-weight: 500; }

/* ---------- Forms ---------- */
.form-card {
  background: #fff; border-radius: var(--radius);
  padding: 30px 30px 26px; box-shadow: var(--shadow);
}
.form-card--tint { background: #fdf0ed; box-shadow: none; }
.form-card h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 23px; color: var(--red); margin: 0 0 4px;
}
.form-card__sub { font-size: 13px; color: var(--muted); margin: 0 0 20px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 12.5px; font-weight: 600;
  color: var(--ink); margin-bottom: 6px;
}
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; font-family: inherit; font-size: 14px; color: var(--ink);
  border: 1px solid var(--line); border-radius: 7px;
  padding: 11px 13px; background: #fff;
}
.field textarea { min-height: 92px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid rgba(192, 57, 43, .3); outline-offset: 1px; border-color: var(--red);
}
.field-err {
  display: block; min-height: 15px; margin-top: 5px;
  font-size: 12px; color: var(--red);
}
.field--invalid input, .field--invalid select, .field--invalid textarea {
  border-color: var(--red); background: #fdf4f3;
}
.phone-row { display: flex; gap: 8px; }
.phone-row .cc {
  flex: none; width: 58px; text-align: center;
  border: 1px solid var(--line); border-radius: 7px;
  display: grid; place-items: center; font-size: 14px; color: var(--ink); background: #fff;
}
.form-note {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 11.5px; color: var(--muted); margin: 12px 0 0;
}
.form-note svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.form-status { margin: 12px 0 0; font-size: 13.5px; text-align: center; }
.form-status--ok { color: #1c7a3e; }
.form-status--error { color: var(--red); }
.btn:disabled { opacity: .65; cursor: not-allowed; }

/* ---------- Experience blocks ---------- */
.exp { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.exp__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; margin-bottom: 70px;
}
.exp__row:last-child { margin-bottom: 0; }
.exp__row--flip .exp__media { order: 2; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 8px 18px; margin-bottom: 16px;
  font-size: 14px; font-weight: 600; color: #fff;
}
.pill svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.pill--red { background: var(--red); }
.pill--gold { background: var(--gold); }
.exp h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(22px, 2.5vw, 28px); color: var(--ink); margin: 0 0 12px;
}
.exp p { margin: 0 0 20px; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: 14px; color: var(--ink); }

/* ---------- Scroll-triggered reveal (below-the-fold entrance), matching the
   reference recording: the phone mockup and the copy block fade/rise into
   place once scrolled into view, then the tick list settles in one item at
   a time rather than appearing all at once. .is-visible is toggled by an
   IntersectionObserver in pinit-site.js the first time each element enters
   the viewport. */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1), transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* The phone-mockup image gets the pronounced hero-style entrance from the
   reference recording — it rises from well below AND scales up from small,
   while the text column keeps the soft fade above. */
.exp__media.reveal {
  transform: translateY(34%) scale(.5);
  transform-origin: 50% 85%;
  transition-duration: .75s;
}
.exp__media.reveal.is-visible { transform: translateY(0) scale(1); }
.reveal--stagger > li {
  opacity: 0; transform: translateY(16px);
  transition: opacity .5s cubic-bezier(0.22, 1, 0.36, 1), transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal--stagger.is-visible > li { opacity: 1; transform: translateY(0); }
.reveal--stagger.is-visible > li:nth-child(1) { transition-delay: .05s; }
.reveal--stagger.is-visible > li:nth-child(2) { transition-delay: .15s; }
.reveal--stagger.is-visible > li:nth-child(3) { transition-delay: .25s; }
.reveal--stagger.is-visible > li:nth-child(4) { transition-delay: .35s; }
.reveal--stagger.is-visible > li:nth-child(5) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--stagger > li { transition: none; opacity: 1; transform: none; }
}
.ticks li svg { flex: none; width: 19px; height: 19px; margin-top: 1px; }

/* ---------- Riders band ---------- */
.riders {
  /* Exact gradient stops from the Figma frame: #96281B → #C0392B → #7B1200 */
  background: linear-gradient(180deg, #96281B 0%, #C0392B 42%, #7B1200 100%);
  color: #fff; padding: 70px 0;
}
.riders h2 {
  font-family: var(--font-display); font-weight: 700; text-align: center;
  font-size: clamp(26px, 3.2vw, 38px); margin: 0 0 44px; color: #fff;
}
.riders__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: .8fr 1.6fr; gap: 34px; align-items: stretch;
}
.riders__photo {
  border-radius: var(--radius);
  display: grid; place-items: end center; overflow: hidden;
}
.riders__photo img {
  /* Fill the card edge-to-edge — the photo carries its own red gradient, so
     letting it cover the card avoids visible seams at the sides (per Figma). */
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
}
.riders__list {
  display: grid; gap: 0; grid-template-rows: repeat(3, 1fr);
  /* Exact panel from Figma: rx 24, 40%-opacity gradient #E06052 → #8A1B0A */
  background: linear-gradient(180deg, rgba(224, 96, 82, .4), rgba(138, 27, 10, .4));
  border-radius: 24px;
  padding: 16px 32px;
}
.rider-item {
  display: flex; gap: 26px; padding: 24px 0; align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.rider-item:last-child { border-bottom: 0; }
.rider-item__ico {
  /* Figma: 76×76 white box, radius 12, 56px icon */
  flex: none; width: 76px; height: 76px; border-radius: 12px;
  background: #fff; display: grid; place-items: center;
}
.rider-item__ico img { width: 56px; height: 56px; display: block; }
.rider-item h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 20px; margin: 0 0 7px; color: #fff;
}
.rider-item p { margin: 0; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .85); }

/* ---------- FAQ + contact ---------- */
.faqwrap {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.25fr .85fr; gap: 54px; align-items: start;
}
.faqwrap h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(26px, 3vw, 34px); color: var(--ink);
  margin: 0 0 26px; line-height: 1.2;
}
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 44px 20px 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 16.5px; color: var(--ink);
}
.acc__item summary::-webkit-details-marker { display: none; }
.acc__item summary::after {
  /* Figma: closed rows carry a plain red "+" — the filled circle appears only
     on the open row's minus, so the two states read differently at a glance. */
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; color: var(--red);
  display: grid; place-items: center; font-size: 20px; font-weight: 400; line-height: 1;
}
.acc__item[open] summary::after { content: "\2212"; background: var(--red); color: #fff; font-size: 16px; }
.acc__body { padding: 0 44px 20px 0; }
.acc__body p { margin: 0 0 10px; font-size: 14px; }
.acc__body p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.foot { background: var(--cream); padding: 56px 0 0; }
.foot__cols {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px 40px;
  display: grid; grid-template-columns: 1.5fr 1fr 1.3fr; gap: 40px;
}
.foot__logo { display: inline-block; margin-bottom: 14px; }
.foot__logo img { height: 40px; width: auto; }
.foot__about { font-size: 13.5px; color: var(--body); margin: 0; max-width: 34ch; }
.foot h4 {
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); font-weight: 700; margin: 0 0 16px;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.foot a { color: var(--ink); text-decoration: none; font-size: 13.5px; }
.foot a:hover { color: var(--red); text-decoration: underline; }
.foot__contact li { display: flex; gap: 11px; font-size: 13.5px; color: var(--ink); }
.foot__contact svg { flex: none; width: 15px; height: 15px; margin-top: 3px; fill: none; stroke: var(--red); stroke-width: 1.6; }
.foot__bar {
  border-top: 1px solid var(--line);
}
.foot__bar div {
  max-width: var(--wrap); margin: 0 auto; padding: 18px 24px;
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; color: var(--muted);
}

/* ==========================================================================
   Franchise page
   ========================================================================== */
.frhero {
  background: #3a0805; /* shows while the image loads / if it 404s */
  line-height: 0; /* collapses the inline-image gap under the <img> */
}
.frhero__img { display: block; width: 100%; height: auto; }

/* comparison table */
.modeltable { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.modeltable__scroll { overflow-x: auto; }
.modeltable table { width: 100%; border-collapse: collapse; min-width: 720px; background: #fff; }
.modeltable th, .modeltable td {
  padding: 15px 20px; font-size: 13.5px; text-align: center; border: 1px solid #f1e4e1;
}
.modeltable thead th { color: #fff; font-size: 14px; font-weight: 700; }
.modeltable thead th:first-child { background: #fdeeea; color: var(--ink); text-align: left; }
.modeltable thead th.master { background: var(--red); }
.modeltable thead th.mini { background: linear-gradient(90deg, var(--gold), #d9741d); }
.modeltable tbody th {
  text-align: left; font-weight: 600; color: var(--ink);
  background: #fff; font-size: 13.5px;
}
.modeltable tbody th span { display: inline-flex; align-items: center; gap: 9px; }
.modeltable tbody th svg { width: 16px; height: 16px; fill: none; stroke: var(--red); stroke-width: 1.6; flex: none; }
.modeltable td.master { background: #fdf3f1; }
.modeltable td.mini { background: #fdf6ee; }

/* mini franchise */
.mini__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start;
}
.mini h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.2vw, 38px); color: var(--ink); margin: 0 0 12px;
}
.mini h2 .gold { color: var(--gold); }
.mini__lead { margin: 0 0 26px; max-width: 42ch; }
.hl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 22px; }
.hl__item { border-left: 3px solid var(--gold); padding: 4px 0 4px 14px; }
.hl__item strong { display: block; font-size: 14.5px; color: var(--ink); margin-bottom: 4px; }
.hl__item span { font-size: 12.5px; color: var(--muted); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat { background: #fdf0ed; border-radius: 10px; padding: 16px 18px; }
.stat b { display: block; font-size: 26px; color: var(--red); font-weight: 800; line-height: 1.1; }
.stat span { font-size: 12.5px; color: var(--muted); }

/* steps */
.steps {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch;
}
.stepcard {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px; text-align: center; position: relative;
}
/* The design links the four steps with a short dash across each gap, reading
   as one left-to-right journey rather than four loose cards. Sits in the grid
   gutter, so it never overlaps a card's own border. */
.stepcard:not(:last-child)::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  width: 18px; /* matches .steps gap */ height: 1px;
  /* Figma draws these as a neutral warm grey, not a brand-red line */
  background: #cdb9b1; transform: translateY(-50%);
}
.stepcard__ico {
  width: 42px; height: 42px; margin: 0 auto 14px;
  display: grid; place-items: center;
}
.stepcard__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--red); stroke-width: 1.5; }
.stepcard h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 7px; }
.stepcard p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* why cards */
.why {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.whycard {
  background: #faf3f1; border-radius: var(--radius);
  padding: 26px 22px; text-align: center;
}
.whycard svg { width: 24px; height: 24px; fill: none; stroke: var(--red); stroke-width: 1.5; margin-bottom: 12px; }
.whycard h3 { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; }

/* franchise faq */
.frfaq {
  max-width: var(--wrap); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 1.4fr .8fr; gap: 44px; align-items: start;
}
.helpcard {
  background: #fdf0ed; border-radius: var(--radius);
  padding: 34px 30px; text-align: center;
}
.helpcard__ico {
  width: 52px; height: 52px; margin: 0 auto 16px; border-radius: 12px;
  background: #fff; display: grid; place-items: center;
}
.helpcard__ico svg { width: 26px; height: 26px; fill: none; stroke: var(--red); stroke-width: 1.5; }
.helpcard h3 { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--ink); margin: 0 0 6px; }
.helpcard p { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.helpcard .btn { width: auto; padding: 11px 26px; }

/* ==========================================================================
   Legal pages (privacy / terms / refund)
   ========================================================================== */
.legal-hero {
  background: var(--cream); text-align: center;
  padding: 54px 24px 46px; border-bottom: 1px solid var(--line);
}
.legal-hero__eyebrow {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin: 0 0 12px; font-weight: 600;
}
.legal-hero h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 42px); color: var(--ink);
  margin: 0 auto 16px; max-width: 18ch; line-height: 1.2;
}
.legal-meta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.legal-meta span {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 15px; font-size: 12.5px; color: var(--muted);
}
.legal-layout {
  max-width: var(--wrap); margin: 0 auto;
  padding: 40px 24px 80px;
  display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 48px; align-items: start;
}
.legal-toc { position: sticky; top: calc(var(--header-h) + 20px); }
.legal-toc h2 {
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 14px; font-weight: 700;
}
.legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: toc; }
.legal-toc a { color: var(--body); text-decoration: none; font-size: 13px; line-height: 1.45; display: block; }
.legal-toc a:hover, .legal-toc a.active { color: var(--red); }
.legal-doc { min-width: 0; }
.legal-doc h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; color: var(--ink); margin: 38px 0 14px;
  padding-top: 22px; border-top: 1px solid var(--line);
}
.legal-doc > p:first-child + h2, .legal-doc h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 6px; }
.legal-doc h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin: 22px 0 8px; }
.legal-doc p, .legal-doc li { font-size: 14px; line-height: 1.7; }
.legal-doc ul, .legal-doc ol { padding-left: 20px; }
.legal-doc li { margin-bottom: 7px; }
.legal-doc table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.legal-doc th, .legal-doc td { border: 1px solid var(--line); padding: 10px 13px; text-align: left; vertical-align: top; }
.legal-doc th { background: var(--cream); font-weight: 700; color: var(--ink); }
.callout, .note {
  background: #fdf0ed; border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0; padding: 14px 18px; margin: 16px 0; font-size: 13.5px;
}
.note__label, .callout__label {
  display: block; font-weight: 700; color: var(--red);
  font-size: 12px; margin-bottom: 5px;
}
.placeholder { background: #fff3cd; padding: 1px 5px; border-radius: 3px; }
.contact-card {
  background: #fdf0ed; border-left: 3px solid var(--red);
  border-radius: 0 10px 10px 0; padding: 22px 24px; margin-top: 18px;
}
.contact-card h3 { font-family: var(--font-display); color: var(--red); font-size: 18px; margin: 0 0 12px; }
.contact-card p { margin: 0 0 6px; font-size: 13.5px; }

.totop {
  position: fixed; right: 20px; bottom: 20px;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--red); color: #fff; border: 0; cursor: pointer;
  font-size: 18px; opacity: 0; pointer-events: none; transition: opacity .2s;
  z-index: 60;
}
.totop.show { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .topnav {
    display: none; position: absolute; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #4a0106; padding: 8px 24px 16px; z-index: 55;
  }
  .topnav.open { display: flex; }
  .topnav a { padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 15px; }
  .topbar .stores { display: none; }
  .burger { display: inline-flex; }

  .hero__inner, .about__inner, .fcta__inner, .mini__inner,
  .exp__row, .deposit__card { grid-template-columns: 1fr; }
  .exp__row--flip .exp__media { order: 0; }
  /* single column: the text sits inside the panel above the phone, so drop
     the top pop-out and give the layers their own height instead */
  .deposit__bill { justify-self: center; width: 100%; max-width: 400px; min-height: 330px; margin-top: 10px; }
  .bill-phone { top: 0; bottom: -46px; }
  .hiw__grid, .steps, .why { grid-template-columns: repeat(2, 1fr); }
  /* Steps wrap to a grid here, so a left-to-right connector would dangle off
     the end of each row. */
  .stepcard:not(:last-child)::after { display: none; }
  .riders__inner, .faqwrap, .frfaq, .legal-layout { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
  .foot__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  .sec { padding: 54px 0; }
  .hiw__grid, .steps, .why, .grid2, .perks, .hl, .stats { grid-template-columns: 1fr; }
  .perks { grid-template-columns: repeat(2, 1fr); }
  .deposit__card { padding: 32px 26px; }
  .bill-phone { bottom: -32px; }
  .foot__cols { grid-template-columns: 1fr; }
  .foot__bar div { flex-direction: column; }
  .modes__wrap { width: 100%; }
  .mode { flex: 1; justify-content: center; padding: 11px 14px; font-size: 14px; }
}

@media print {
  .topbar, .foot, .totop, .legal-toc, .stores { display: none !important; }
  .legal-layout { display: block; padding: 0; }
  body { background: #fff; }
}