/* ============================================================
   Mister Mobile - Repair Checker SPA
   Design tokens extracted from Figma "Website Enhancement"
   page "Repair Checker (Plugin)" → frame "Latest - Updated 24/6/2026"
   ------------------------------------------------------------
   Font     : Montserrat (hero title = 900 / 40px / #000)
   Yellow   : #FFED00      Black: #000000      White: #FFFFFF
   Radius   : 8px (tiles, cards, inputs)
   Buttons  : primary = black bg / white text (e.g. "Start")
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900&display=swap');

:root{
  --mm-yellow:#FFED00;
  --mm-yellow-soft:#FFF7A8;
  --mm-black:#000000;
  --mm-ink:#1a1a1a;
  --mm-grey:#6b6b6b;
  --mm-line:#e4e4e4;
  --mm-bg:#ffffff;
  --radius:8px;
  --radius-pill:999px;
  --shadow:0 4px 10px rgba(0,0,0,.15);    /* Figma shadow "M" */
  --shadow-l:0 10px 24px -2px rgba(0,0,0,.20);  /* Figma shadow "L" */
  --font:'Montserrat', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{overflow-x:clip;}   /* the hero art bleeds right; never let it add a scrollbar */
html{overflow-y:scroll;scrollbar-gutter:stable;}   /* reserve scrollbar gutter so the header/content never shifts between pages */
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  color:var(--mm-ink);
  background:var(--mm-bg);
  line-height:1.5;
}

/* ---------- Top bar: "Back to Mister Mobile" ---------- */
.topbar{border-bottom:1px solid var(--mm-line);background:#fff;}
.topbar__inner{
  max-width:1200px;margin:0 auto;padding:14px 24px;min-height:64px;
  display:flex;align-items:center;position:relative;
}
.topbar__back{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:600;font-size:16px;color:var(--mm-black);text-decoration:none;
}
.topbar__back svg{width:20px;height:20px;}
/* question/result header: back chevron (absolute left) + centered inline progress */
.hdr__back{
  position:absolute;left:24px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:6px;color:var(--mm-black);
  display:inline-flex;border-radius:8px;
}
.hdr__back:hover{background:#f4f4f4;}
.hdr__back svg{width:24px;height:24px;}
/* inline progress — Figma: 528px, 3 segments, label + rounded bar */
.prog{margin:0 auto;display:flex;gap:20px;width:528px;max-width:calc(100% - 80px);}
.prog__seg{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;}
.prog__label{font-weight:700;font-size:clamp(11px,3vw,14px);color:var(--mm-black);line-height:1;}
.prog__bar{display:block;width:100%;height:6px;border-radius:999px;background:#D9D9D9;}
/* the current step AND every step already cleared are yellow — the bar reads as
   progress filling up, so Model+Issue are both yellow on any issue page (RC-65) */
.prog__seg.is-active .prog__bar,
.prog__seg.is-done .prog__bar{background:var(--mm-yellow);}
.topbar__back:hover{opacity:.7;}


/* ---------- Quiz container ---------- */
/* min-height stops the page collapsing when a short step follows a tall one — measured
   on stage: landing 1009px -> device step 422px, and series 1416px -> model 290px.
   box-sizing is border-box globally, so this 750px INCLUDES the 118px of vertical
   padding (~632px of content floor). Tall steps are unaffected. */
.quiz{max-width:1200px;margin:0 auto;padding:28px 24px 90px;min-height:750px;}
.step{animation:fade .3s ease;padding-top:8px;}   /* small top gap, consistent with page 1 (hero) */
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.step__back{
  background:#fff;border:1.5px solid var(--mm-line);border-radius:var(--radius);
  color:var(--mm-ink);font-size:14px;font-weight:700;cursor:pointer;
  padding:8px 14px;margin-bottom:22px;display:inline-flex;gap:6px;align-items:center;
}
.step__back:hover{border-color:var(--mm-black);}
/* question header — LEFT-aligned title + subtitle in a 630px block (per Figma) */
.qhead{text-align:left;max-width:1200px;margin:0 auto 32px;}
.step__title{font-size:clamp(17px,4.6vw,20px);font-weight:700;color:var(--mm-black);margin:0 0 6px;}
.step__sub{color:var(--mm-black);font-weight:500;margin:0;font-size:clamp(13px,3.8vw,16px);}

/* ---------- Landing / hero (2-column) — Figma: left col 416, hero 844 ---------- */
/* Landing split: the illustration takes 50% of the 1200px container and stays INSIDE it
   (it used to bleed to the viewport edge via a negative right margin). The copy column
   gets the other half but its content is capped at 480px, so the leftover ~96px reads as
   the gutter between the two. */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 50%;column-gap:0;align-items:center;padding-top:8px;}
/* guarantee every left-column element shares the same left edge */
.hero__copy{display:flex;flex-direction:column;align-items:flex-start;max-width:480px;}
/* Trusted Repair Service badge — exported as a single SVG (pill + star + text) */
.hero__badge-img{display:block;height:28px;width:auto;margin-bottom:18px;}
.hero__logo{display:flex;align-items:center;gap:6px;margin-bottom:18px;}
.hero__logo img{height:clamp(54px,13vw,87px);width:auto;}   /* Figma: logo 174×87; scales fluidly on small screens */
.hero__title{font-size:clamp(26px,6.2vw,40px);font-weight:900;line-height:1.3;margin:0 0 16px;letter-spacing:-.02em;white-space:nowrap;}
.hero__title em{
  background:var(--mm-yellow);font-style:normal;
  padding:.04em .26em;border-radius:6px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
.hero__lede{color:var(--mm-black);font-weight:500;font-size:13px;line-height:1.55;max-width:600px;margin:0 0 12px;}
.hero__lede--tag{font-weight:600;margin-bottom:22px;}
.hero__badge{display:inline-flex;align-items:center;gap:6px;background:#FFED00;color:var(--mm-black);font-size:12px;font-weight:600;line-height:1;padding:8px 14px;border-radius:var(--radius-pill);margin-bottom:18px;}
.hero__badge-star{width:14px;height:14px;flex:0 0 14px;fill:currentColor;}

/* How it works — no border; steps separated by a grey divider line */
.hiw{margin-bottom:10px;max-width:600px;}   /* the only gap above "Check Your Repair Cost Now" (28 -> 18 -> 10) */
.hiw__title{font-weight:700;font-size:clamp(17px,4.2vw,20px);margin:0 0 5px;color:var(--mm-black);}
.hiw__steps{list-style:none;margin:0;padding:0;}
.hiw__steps li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--mm-line);}
.hiw__steps li:first-child{border-top:none;}
.hiw__tile{
  flex:0 0 40px;width:40px;height:40px;border-radius:var(--radius);
  background:var(--mm-yellow);display:grid;place-items:center;
}
.hiw__tile svg{width:22px;height:22px;stroke:var(--mm-black);}
.hiw__tile-icon{width:24px;height:24px;object-fit:contain;}
.hiw__step-t{display:block;font-weight:700;font-size:clamp(14px,3.4vw,16px);color:var(--mm-black);line-height:1.25;}
.hiw__step-d{display:block;margin-top:4px;color:#7C7C7C;font-weight:500;font-size:14px;line-height:1.1;}

.hero__art{display:flex;justify-content:flex-end;margin-top:0;margin-right:0;}
.hero__art img{width:100%;max-width:100%;height:auto;}

/* ---------- Choice grids (Figma: 630px block, cards 190×180, 30px gap) ---------- */
.choices{display:grid;gap:30px;max-width:1200px;margin:0 auto;}
.choices--grid{grid-template-columns:repeat(5,1fr);}
.choices--list{gap:14px;}   /* columns are set in the list-variant block further down */

/* type-to-filter bar on the long list steps (series / model) */
.listsearch{position:relative;max-width:1200px;margin:0 auto 26px;}   /* 18 + 8px breathing room above the cards */
.listsearch__icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--mm-grey);pointer-events:none;}
/* Pill — fully rounded ends, dark 1.5px stroke. radius-pill is 999px, so the ends stay
   semicircular whatever the field's height ends up being. */
.listsearch__input{width:100%;min-height:52px;padding:0 22px 0 48px;border:1.5px solid #212529;border-radius:var(--radius-pill);background:#fff;font:inherit;font-size:15px;color:var(--mm-ink);}
.listsearch__input::placeholder{color:var(--mm-grey);}
.listsearch__input:focus{outline:none;border-color:var(--mm-black);}
.listsearch__empty{max-width:1200px;margin:-8px auto 14px;color:var(--mm-grey);font-size:14px;text-align:center;}
.choice[hidden]{display:none;}   /* filter hides rows; must outrank .choice's display:flex */
.choices--two{grid-template-columns:repeat(2,1fr);}

.choice{
  border:1px solid #D9D9D9;border-radius:var(--radius);
  background:#fff;padding:20px 12px;cursor:pointer;min-height:180px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;
  transition:background-color .25s ease-out, border-color .25s ease-out, box-shadow .25s ease-out;
  font:inherit;color:inherit;
}
/* Figma hover/selected: fill yellow + 2px black border + M shadow.
   The 2nd border-px and the drop shadow are box-shadows (no reflow → no lag).

   :hover is gated to real pointers. On touch it STICKS to whatever sits under the last
   tap position, and because a re-render swaps the grid underneath that point, the tile
   that happens to land there lit up in the identical yellow — indistinguishable from
   "selected". That is what made a stale option look chosen after pressing Back.
   Tap feedback on touch now comes from .is-selected, applied by selectChoice(). */
/* Two different yellows, and the distinction is the whole fix.

   `.is-flash` is the TAP yellow, and it is available on every device. It is removed by an
   unconditional setTimeout — not by pointerleave, not by a re-render, not by anything the
   browser has to volunteer. That is why it cannot linger: the only thing that puts it on
   also guarantees, on a timer, to take it off.

   `.is-hover` / `.is-selected` are the MOUSE yellows and stay scoped to html:not(.touch).
   A phone never keeps a persistent highlight, so there is nothing to get stuck.

   For the record, three earlier attempts all failed by trying to stop the class being
   ADDED — a hover media query, then an e.pointerType check, then making the rule
   unreachable on touch. iOS defeated the first two by mis-reporting, and the third simply
   moved the lingering to the grey pressed shade. Expiring on a timer sidesteps all of it. */
/* The yellow tile fill now exists ONLY on wide viewports. This is a plain media query, so
   it depends on nothing the browser has to report honestly — no hover capability, no
   pointerType, no JS class, no feature detection. Below 881px the rule is not in play at
   all, so a phone cannot show a yellow tile whatever classes end up on it. The
   html:not(.touch) guard is kept inside as a second layer for touch tablets.

   That indirection is why this took so many attempts: every previous version asked iOS a
   question (do you hover? what kind of pointer? has a finger touched?) and acted on the
   answer. Viewport width is the one thing that is not up for negotiation. */
@media (min-width:881px){
  html:not(.touch) .choice.is-flash,
  html:not(.touch) .choice.is-selected,
  html:not(.touch) .choice.is-hover{
    background:var(--mm-yellow);border-color:var(--mm-black);
    box-shadow:0 0 0 1px var(--mm-black), 0 4px 10px rgba(0,0,0,.15);
  }
}
/* Snap ON, fade OFF (mouse only). The tile's base rule carries a .25s background
   transition, which made the flash ramp up slowly; killing it while .is-flash is present
   makes the yellow land instantly, and removing the class hands the fade-out back to the
   base transition. */
@media (min-width:881px){ html:not(.touch) .choice.is-flash{ transition:none; } }

/* ---------- MOBILE: NO YELLOW TILE STATE AT ALL ----------
   Every yellow above is scoped html:not(.touch), and app.js puts `touch` on <html> at the
   first real finger. So on a phone a tile is never yellow — not on tap, not on hover, not
   on selection, not from any phantom event iOS invents. The only touch feedback is
   -webkit-tap-highlight-color below, which the OS paints and the OS removes, so there is
   nothing in our control that could linger. */
/* The browser's own tap tint, for the instant before JS runs. The OS clears it. */
.choice{ -webkit-tap-highlight-color:rgba(0,0,0,.06); }
/* NOTE: there is deliberately no `.choice:hover` rule, and the hover media query is gone.
   Plenty of mobile browsers report (hover:hover)/(pointer:fine) even on a touch screen, so
   gating on the media query was not enough — :hover still applied, still stuck to the last
   tap position, and a re-render dropped a fresh tile under that point which lit up yellow
   and read as "already selected". .is-hover is added by app.js ONLY when the pointer event
   reports pointerType === "mouse", which no touch can fake. */
.choice__icon{width:clamp(56px,18vw,100px);height:clamp(56px,18vw,100px);object-fit:contain;}
/* Brand logos read LARGER than the rest because every wordmark/glyph fills its own
   viewBox edge-to-edge — object-fit:contain then paints Apple at the full 100px where
   Figma draws it ~52px tall. The 100×100 box is kept (tile rhythm unchanged); the
   padding caps the DRAWN logo at Figma's ~56px band, so tall glyphs shrink and wide
   wordmarks (Samsung, Honor) stay width-bound exactly as before. The padding tracks the
   box's own clamp (18vw box − 2×4vw pad = a 10vw drawn logo) so the ratio holds on mobile. */
.choices--brand .choice__icon{padding:clamp(12px,4vw,22px) 0;}
.choice__label{font-weight:600;font-size:clamp(13px,3.6vw,16px);color:var(--mm-black);}
/* Fade the screen's icons in TOGETHER once they've all loaded, so a bordered tile
   doesn't flash empty and the grid doesn't "pop" icon-by-icon on slow mobile networks.
   revealIcons() in app.js adds .icons-ready to #quiz-container when the batch is ready.
   CSS FAILSAFE: a 1.2s animation forces the icons visible even if the JS never adds
   .icons-ready (e.g. a cached old app.js), so icons can never stay permanently blank.
   Only <img> icons fade — inline-SVG icons render instantly. */
img.choice__icon,.symptom__icon{opacity:0;transition:opacity .3s ease;animation:icon-failsafe 1ms linear 1.2s forwards;}
.icons-ready img.choice__icon,.icons-ready .symptom__icon{opacity:1;animation:none;}
@keyframes icon-failsafe{to{opacity:1;}}

/* list variant (series / model) — a 5-up rack of compact cards with the label centred.
   Was a stack of full-width 72px rows with a chevron; long lists (Samsung has 251 models)
   meant a lot of scrolling, so the same options now tile five to a row. The chevron goes:
   it pointed along a row that no longer exists. Column count steps down with the
   breakpoints below, ending at two across on phones.

   FIXED COLUMNS, DELIBERATELY. repeat(5,1fr) sizes every card at a fifth of the row and
   leaves the spare columns empty, so a last row of two — or a whole list of two, like
   Apple Watch Ultra — keeps the same card size and packs from the left. Never swap this
   for auto-fit/auto-fill: those stretch a short row to fill the width, which is the one
   thing this must not do. justify-content:start states the packing direction outright. */
.choices--list{grid-template-columns:repeat(5,1fr);justify-content:start;justify-items:stretch;gap:14px;}
/* Card shape is a RATIO, not a size: 220:80 (2.75:1). The column width is whatever a
   fifth of the row comes to, and the height follows from it — so the proportion holds at
   every breakpoint instead of locking to one pixel size. min-height keeps a long label
   (e.g. "I can't find my device series") from squashing the box below usable height. */
.choices--list .choice{flex-direction:column;align-items:center;justify-content:center;gap:0;padding:12px;aspect-ratio:220/80;min-height:64px;height:auto;text-align:center;}
.choices--list .choice__label{flex:none;font-weight:600;font-size:clamp(13px,3.6vw,15px);line-height:1.3;color:var(--mm-black);}
.choices--list .choice::after{content:none;}
/* contact fallback ("I can't find my model") — secondary, dashed, same cell size */
.choices--list .choice--contact{border-style:dashed;}
.choices--list .choice--contact .choice__label{color:var(--mm-grey);font-weight:600;}

/* ---------- Live preview icon ---------- */
.preview{display:flex;justify-content:center;margin:0 0 24px;}
.preview__img{
  width:120px;height:120px;object-fit:contain;
  background:var(--mm-yellow-soft);border-radius:12px;padding:14px;
  transition:transform .2s;
}

/* ---------- Buttons ---------- */
/* Figma buttons use 8px radius (not pills); primary = black bg / white text */
.btn{
  display:inline-block;border:none;cursor:pointer;font:inherit;font-weight:600;
  padding:9px 22px;border-radius:var(--radius);font-size:16px;text-decoration:none;text-align:center;
}
.btn--primary{background:var(--mm-black);color:#fff;}
.btn--primary:hover{background:#222;}
.btn--yellow{background:var(--mm-yellow);color:var(--mm-black);}
.btn--yellow:hover{background:#ffe200;}
.btn--ghost{background:#fff;color:var(--mm-black);border:1.5px solid var(--mm-black);transition:background-color .2s ease;}
.btn--ghost:hover{background:var(--mm-yellow);}
.btn--block{display:block;width:100%;}
/* A .btn switched to display:flex (the centred fit-width blocks on the result and
   no-result pages) makes its label a flex item, and text-align stops applying — so a
   min-width wider than the label leaves the text hugging the left edge. Centre both
   axes wherever that override happens. */
.result #restart-btn,.noresult__contact,.noresult__restart{align-items:center;justify-content:center;}
/* Start button — Figma: 148×36, 8px radius */
#start-btn{min-width:148px;}

/* ---------- Symptoms (informative) page ---------- */
.symptoms{max-width:1200px;margin:0 auto;text-align:left;}
.symptoms .step__title,.symptoms .step__sub{text-align:left;}
.sym-badge{display:inline-block;background:var(--mm-yellow);color:var(--mm-black);font-weight:500;font-size:14px;padding:6px 14px;border-radius:var(--radius-pill);margin-bottom:14px;}   /* Figma: Montserrat 500/Medium, not bold */
/* Figma: cards 384×136, 20px padding, 12px gap, 96px icon, title 700/20px.
   flex-wrap so any count (4/3/2/1) lays out; rows fill from the left, so an odd last
   card sits under the first column instead of centring between the two. */
.symptoms__grid{display:grid;grid-template-columns:repeat(2,minmax(0,384px));justify-content:center;gap:20px;margin:22px 0;}
.symptom{display:flex;align-items:center;gap:12px;border:1px solid #ECECEC;border-radius:var(--radius);padding:20px;background:#fff;box-shadow:var(--shadow);}
.symptom__icon{flex:0 0 clamp(60px,18vw,96px);width:clamp(60px,18vw,96px);height:clamp(60px,18vw,96px);object-fit:contain;}
.symptom__txt{min-width:0;}
.symptom__t{font-weight:700;font-size:clamp(16px,4.4vw,20px);color:var(--mm-black);margin-bottom:4px;line-height:1.15;}
.symptom__d{font-weight:500;font-size:14px;color:var(--mm-ink);line-height:1.4;}   /* black-ish per Figma */
.symptoms__note{display:flex;align-items:center;gap:10px;max-width:1200px;margin:0 auto;background:#FFF9D6;border-radius:var(--radius);padding:14px 16px;font-size:13px;color:var(--mm-ink);line-height:1.5;}
.symptoms__note-icon{flex:0 0 18px;width:18px;height:18px;color:#caa400;margin-top:0;}
.symptoms__actions{display:flex;justify-content:center;gap:28px;margin-top:40px;}
#sym-back,#sym-next{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:148px;padding:8px 20px;}
@media (max-width:600px){ .symptoms__grid{grid-template-columns:1fr;} }

/* ---------- Result card ---------- */
.result{text-align:left;max-width:1200px;margin:0 auto;}   /* column centred on page */
.result__head{margin-bottom:20px;}                        /* title + subtitle LEFT-aligned */
.result__head .step__title{margin:0 0 8px;}
.result__head .step__sub{margin:0;}
.result__img{width:150px;height:150px;object-fit:contain;margin:0 auto 16px;display:block;}   /* photo centred */
.result__card{
  border:1.5px solid var(--mm-line);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);text-align:center;margin:0 auto 20px;max-width:300px;   /* narrow; product name wraps to 2 lines */
}
.result__cta{justify-content:center;}
.result #restart-btn{display:flex;width:fit-content;margin:0 auto;}   /* centred */
.result__name{font-size:16px;font-weight:500;margin:0 0 6px;line-height:1.3;}    /* Figma: Montserrat 500/Medium */
.result__price{font-size:18px;font-weight:600;margin:0 0 14px;}   /* Figma: Montserrat 600/SemiBold */
.result__card .btn,#viewrepair-btn{margin-top:2px;min-width:150px;border:2px solid var(--mm-black) !important;}   /* View Repair: yellow w/ black border (Figma) */
/* "Prefer some guidance?" block — left-aligned, divider above (Figma); the number is
   plain text (no link) so the WhatsApp button stays the only exit */
.result__guidance{text-align:left;border-top:1px solid var(--mm-line);margin-top:28px;padding-top:28px;}
.result__guidance .step__title{margin:0 0 8px;}
.result__guidance .step__sub{margin:0 0 48px;}   /* Figma: 48px between the description and Back to Start */
.result__wa{font-weight:600;}

.nomatch{text-align:center;max-width:1200px;margin:0 auto;padding-top:10px;}
.nomatch__img{width:140px;height:140px;margin:0 auto 16px;display:block;}

/* ---------- No-result page (Figma "No Result Page") ---------- */
.noresult{max-width:1200px;margin:0 auto;}   /* same column width as .result so divider + buttons line up */
.noresult .step__title{margin:0 0 8px;}      /* title + subtitle left-aligned (per Figma) */
.noresult .step__sub{margin:0;}
.noresult__img{display:block;width:360px;max-width:82%;height:auto;margin:24px auto 28px;}   /* bigger illustration */
.noresult__contact{display:flex;width:fit-content;min-width:150px;margin:0 auto;border:2px solid var(--mm-black);}   /* yellow + black border, same as View Repair */
.noresult__or{display:flex;align-items:center;gap:14px;margin:36px 0 0;color:var(--mm-grey);font-size:14px;}   /* full-width divider, like the result page */
.noresult__or::before,.noresult__or::after{content:"";flex:1;height:1px;background:var(--mm-line);}
.noresult__restart{display:flex;width:fit-content;margin:48px auto 0;}   /* Figma: 48px between "or" and Back to Start */

/* ---------- Responsive ---------- */
@media (max-width:1260px){
  .choices--grid{grid-template-columns:repeat(4,1fr);}
  .choices--list{grid-template-columns:repeat(4,1fr);}
  .hero{grid-template-columns:minmax(0,1fr) 46%;}   /* art gives back a little room as the container narrows */
}
@media (max-width:880px){
  .choices--grid{grid-template-columns:repeat(3,1fr);}
  .choices--list{grid-template-columns:repeat(3,1fr);}
  /* Can't fit side-by-side → single column, hide the hero illustration */
  .hero{grid-template-columns:1fr;gap:24px;}
  .hero__art{display:none;margin-right:0;}
  .hero__title{font-size:32px;white-space:normal;}
  .hiw,.hero__lede{max-width:none;}
}
@media (max-width:600px){
  /* Fonts now scale fluidly via clamp() at base — only LAYOUT changes here */
  /* Header: smaller back chevron + tighter progress bar */
  .topbar__inner{padding:12px 16px;min-height:56px;}
  .topbar__back svg{width:18px;height:18px;}
  .hdr__back{left:12px;padding:4px;}
  .hdr__back svg{width:20px;height:20px;}
  .prog{gap:8px;max-width:calc(100% - 56px);}
  .quiz{padding:20px 16px 90px;}
  /* Tiles reflow to 2 columns, height shrinks to fit (icon/label already fluid) */
  .choices{gap:14px;max-width:none;}
  .choices--grid{grid-template-columns:repeat(2,1fr);}
  .choice{min-height:0;padding:18px 10px;gap:10px;}
  /* series / model cards: two across on phones, per the wireframe */
  .choices--list{grid-template-columns:repeat(2,1fr);gap:12px;}
  /* two across on a phone makes each card much wider, so the 2.75:1 ratio would leave a
     very tall box — let the height come from the content instead. */
  .choices--list .choice{aspect-ratio:auto;min-height:56px;padding:12px 10px;gap:0;}
}

/* ---------- "Recommending in progress" loader (issue → result) ---------- */
.loading{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:48px;}
.loading__spinner{
  width:56px;height:56px;border-radius:50%;
  border:5px solid var(--mm-line);border-top-color:var(--mm-yellow);
  animation:wa-spin .8s linear infinite;margin-bottom:24px;
}
@keyframes wa-spin{to{transform:rotate(360deg);}}
.loading .step__title{margin:0 0 6px;}
.loading .step__sub{margin:0 0 22px;color:var(--mm-grey);}
.loading__steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left;}
.loading__steps li{
  position:relative;padding-left:30px;font-size:15px;font-weight:600;color:var(--mm-black);
  opacity:.25;animation:wa-step-in .45s ease forwards;animation-delay:var(--d);
}
.loading__steps li::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;background:var(--mm-line);
}
.loading__steps li::after{
  content:"✓";position:absolute;left:5px;top:50%;transform:translateY(-50%);
  font-size:12px;font-weight:700;color:var(--mm-black);opacity:0;animation:wa-check-in .3s ease forwards;animation-delay:var(--d);
}
@keyframes wa-step-in{to{opacity:1;}}
@keyframes wa-check-in{0%{opacity:0;}100%{opacity:1;}}
/* turn each bullet yellow as its step "completes" */
.loading__steps li::before{animation:wa-bullet .45s ease forwards;animation-delay:var(--d);}
@keyframes wa-bullet{to{background:var(--mm-yellow);}}

/* ---------- WhatsApp float (matched exactly to the live mistermobile.com.sg site) ---------- */
.whatsapp-float{ position:fixed; bottom:150px; right:-25px; z-index:9999; transition:bottom 0.3s; }
.whatsapp-button{
  display:flex; align-items:center; background:#25D366; color:#fff;
  padding:8px 65px 8px 16px; border-radius:50px;
  box-shadow:rgba(37,211,102,0.4) 0 4px 12px; transition:0.3s;
  overflow:hidden; width:40px; white-space:nowrap; text-decoration:none;
}
/* Expansion is gated to devices that actually have a hover state. On touch, :hover
   STICKS after a tap and never clears — and because the tap navigates out to WhatsApp,
   the button was still matching :hover when the customer came back, so it stayed
   expanded. That was the bug. Touch gets the .is-peek class instead (app.js), which is
   self-clearing and cannot survive a round trip. */
/* Same pointer-type reasoning as .choice above — no :hover, no media query. */
.whatsapp-button.is-peek,
.whatsapp-button.is-hover{ width:180px; box-shadow:rgba(37,211,102,0.6) 0 6px 16px; background:#20BA5A; }
.whatsapp-button.is-peek .whatsapp-text,
.whatsapp-button.is-hover .whatsapp-text{ opacity:1; }
.whatsapp-icon{ width:28px; height:28px; flex-shrink:0; }
.whatsapp-text{ margin-left:12px; font-size:14px; font-weight:600; opacity:0; transition:opacity 0.3s 0.1s; text-decoration:none; color:#fff; }


/* ---------- SEO content block ----------
   Typography mirrors the site's Elementor globals so this reads like the rest of
   mistermobile.com.sg: Montserrat 14/500/1.8 body on #333, 26/700 section heads,
   18/700 sub-heads, underlined 500 links. Carousel matches the Swiper set-up
   (44px nav, 6px bullets, 6px gaps). */
/* Full-width tint, content centred on the same 1152px column as the quiz above.
   Centring is done with padding, not auto margins: the element rules below set their
   own left/right margins and are more specific, so margins can't be relied on. */
/* Typography and the FAQ accordion mirror www.mistermobile.com.sg (Montserrat 14/26,
   body #333, section h2 22/700, sub-heads 18/700, black underlined links; the accordion
   is the site's own native <details>/<summary>: white closed, brand yellow open, 20px
   panel inside an #E5E5E5 hairline. Section rules divide the content blocks; the seam
   between the quiz and this block stays borderless — the background change is enough). */
.seo{background:#F8F8F8;border-top:0;max-width:none;margin:0;padding:52px max(24px, calc((100% - 1152px) / 2)) 88px;
  text-align:left;font-family:var(--font);color:#333333;font-size:14px;font-weight:400;line-height:1.857;}
.seo > *{max-width:1152px;}
/* The page's ONE h1 — and the only heading a crawler sees without running JS, since the
   hero h1 is painted by app.js into an empty <main> (seo.php promotes it, RC-fix). */
.seo h1,.seo__h1{font-size:26px;font-weight:700;color:var(--mm-black);line-height:1.4;margin:0 0 16px;}
/* A hairline above each section, the way the site separates its content blocks. */
.seo h2{font-size:22px;font-weight:700;color:var(--mm-black);line-height:1.4;
  margin:40px 0 16px;padding-top:36px;border-top:1px solid #000;}
.seo h3{font-size:18px;font-weight:700;color:var(--mm-black);line-height:1.5;margin:28px 0 10px;}
.seo p{font-size:14px;font-weight:400;line-height:1.857;margin:0 0 16px;}
/* NO max-width on prose. A ch-based cap (104ch = 970.78px) made paragraphs wrap ~181px
   short of the 1152px column every heading, list, image and the carousel align to, which
   read as the content breaking mid-page. The site runs its body copy the full width too. */
.seo strong{font-weight:700;color:var(--mm-black);}
.seo a{color:var(--mm-black);font-weight:500;text-decoration:underline;text-underline-offset:2px;}
.seo a:hover{text-decoration-thickness:2px;}
.seo ul{margin:0 0 22px;padding:0;list-style:none;}
/* DEFAULT link list (services, brands) — a two-column black bullet list on the site's own
   body-list metrics: 14px/25.2px, 20px text indent, 10px 0 margins, and a 33px item pitch
   whose spacing sits INSIDE the item (the site's boxes touch; there is no margin between).
   The dot is a ::before rather than a real list marker because `list-style-position:outside`
   markers get clipped in CSS multi-column layouts — the absolute dot is column-safe. */
.seo ul.seo__cols{columns:2;column-gap:56px;margin:10px 0 22px;padding:0;list-style:none;}   /* `.seo ul` above is (0,1,1) and outranks a bare .seo__cols — qualify or the margins never land */
.seo__cols li{break-inside:avoid;position:relative;margin:0;padding:4px 0 4px 20px;
  font-size:14px;font-weight:400;line-height:25.2px;color:#333333;}
.seo__cols li::before{content:"";position:absolute;left:6px;top:1em;   /* 1em = 14px: the first line's centre, minus half the dot */
  width:5px;height:5px;background:#000;border-radius:50%;}
.seo__cols li a{color:var(--mm-black);font-weight:500;text-decoration:underline;text-underline-offset:2px;}

/* BRANCH list only — the site's own .button-container buttons: flex-wrap, 10px gap,
   #000 / #fff, 9px 17px, 4px radius, 14px/500. seo.php tags the list that links to
   /locations/ with this class at render time, so services and brands keep the bullets.
   The chip is the <li>, not the <a>, because a branch carries a bare "(Coming Soon)"
   suffix outside its link — styling the anchor alone would leave that text orphaned. */
.seo ul.seo__cols--chips{display:flex;flex-wrap:wrap;gap:10px;columns:auto;margin:10px 0 32px;}   /* 24 + 8px extra breathing room under the branch pills (qualified — see above) */
.seo__cols--chips li{margin:0;padding:9px 17px;background:#000;color:#fff;border-radius:4px;
  font-size:14px;font-weight:500;line-height:25.2px;}
.seo__cols--chips li::before{content:none;}
.seo__cols--chips li:hover{background:#2b2b2b;}
.seo__cols--chips li a{color:#fff;font-weight:500;text-decoration:none;}
.seo__cols--chips li a:hover{text-decoration:underline;text-underline-offset:2px;}

/* ---------- FAQ accordion (native <details>; no JS) ---------- */
.seo__faq{margin:0 0 10px;}
/* Same lift in both states, so nothing shifts visually when an item opens. On an open
   item the shadow wraps the whole card — yellow header plus white answer panel. */
.seo__faq{box-shadow:0 2px 4px rgba(0,0,0,.1);}
.seo__faq > summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:#fff;padding:11px 14px;cursor:pointer;list-style:none;}
.seo__faq > summary::-webkit-details-marker{display:none;}   /* Safari/Chrome default triangle */
.seo__faq > summary::marker{content:"";}                     /* Firefox */
.seo__faq > summary:hover{background:#F4F4F4;}
.seo__faq[open] > summary,.seo__faq[open] > summary:hover{background:var(--mm-yellow);}
/* The question keeps its heading semantics INSIDE the summary (the HTML spec allows a
   heading as summary's first child), so collapsing costs nothing in the outline. */
.seo__faq-q{font-size:14px;font-weight:500;color:#1F2124;line-height:1.857;margin:0;}
.seo h3.seo__faq-q{font-size:14px;font-weight:500;margin:0;}
.seo__faq-icon{flex:0 0 auto;width:0;height:0;margin-left:auto;
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:6px solid #1F2124;
  transition:transform .15s ease;}
.seo__faq[open] .seo__faq-icon{transform:rotate(180deg);}
.seo__faq-a{background:#fff;border:1px solid #E5E5E5;border-top:0;padding:20px;}
.seo__faq-a > :last-child{margin-bottom:0;}
.seo__faq-a ul{margin:10px 0 0;}
.seo__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:4px 0 26px;}
.seo__pair img{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;}   /* height:auto is load-bearing: seo.php ships width/height attrs, and without it the height attribute (a presentational hint) beats aspect-ratio and the photo renders at its full intrinsic height */
.seo__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:26px 0 8px;}
.seo__grid img{width:100%;height:auto;display:block;}
.seo__carousel{position:relative;margin:10px 0 30px;}
.seo__track{display:flex;gap:16px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;
  padding:0;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.seo__track::-webkit-scrollbar{display:none;}
.seo__slide{flex:0 0 calc((100% - 64px) / 5);margin:0;scroll-snap-align:start;}
.seo__slide img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}   /* height:auto — same reason as .seo__pair img above */
/* Arrows sit ON the photos, so a bare glyph with a text-shadow disappeared against the
   lighter shopfronts. Solid dark plate + drop shadow instead — readable over anything.
   Vertical centring: the dots add 22px below the track (6px dot + 16px margin), so the
   button centres on the TRACK at 50% - 11px, not the old 50% - 22px, which sat 11px high. */
.seo__cbtn{position:absolute;top:calc(50% - 11px);transform:translateY(-50%);z-index:2;
  width:40px;height:40px;display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  background:rgba(0,0,0,.78);color:#fff;font-size:28px;font-weight:700;line-height:1;
  box-shadow:0 2px 12px rgba(0,0,0,.45);transition:background .15s ease;}
.seo__cbtn:hover{background:#000;}
.seo__cbtn:focus-visible{outline:2px solid var(--mm-yellow);outline-offset:2px;}
.seo__cbtn--prev{left:0;}
.seo__cbtn--next{right:0;}
.seo__cbtn[hidden]{display:none;}
.seo__dots{display:flex;justify-content:center;gap:6px;margin-top:16px;}
.seo__dot{width:6px;height:6px;border-radius:50%;border:0;padding:0;background:#d4d4d4;cursor:pointer;}
.seo__dot[aria-current="true"]{background:#000;}
@media (max-width:1100px){ .seo__slide{flex:0 0 calc((100% - 48px) / 4);} }
@media (max-width:880px){
  .seo__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .seo__slide{flex:0 0 calc((100% - 32px) / 3);}
}
@media (max-width:600px){
  .hero__badge{font-size:11px;padding:7px 12px;}
  .seo{padding:36px 16px 64px;}
  .seo__pair img{aspect-ratio:16/9;}
  .seo__grid{gap:12px;}
  .seo__cbtn{width:34px;height:34px;font-size:24px;}
  .seo h1,.seo__h1{font-size:22px;}
  .seo h2{font-size:19px;margin-top:32px;padding-top:28px;}
  .seo h3{font-size:16px;}
  .seo__faq-a{padding:16px;}
  .seo ul.seo__cols{columns:1;}
  .seo ul.seo__cols--chips{gap:8px;}
  .seo__cols--chips li{padding:8px 14px;}
  .seo__pair{grid-template-columns:1fr;}
  .seo__slide{flex:0 0 calc((100% - 16px) / 2);}
}