/* ==========================================================================
   /quote/results — the quote results screen.
   Built same-to-same from the LIVE Figma file R4YlVFqXtGfx3rlvWSMro8,
   FRAME "Quote results" 7064:944, 1920x2758.

   Linked FROM app/quote/results/page.tsx, never from the layout — quote.css's
   bare `.step { display: none }` is why that invariant exists.  Namespace is
   `.qr-`, verified zero hits across base / home / home-sections / home-mobile /
   motion / quote-wizard.

   Every length is rem = figma_px / 16, against base.css's fluid root
   (calc(100vw/120) above 768).  Never write px here.

   THIS PAGE SCROLLS.  Unlike the nine wizard steps (1920x1010) Figma draws this
   one 2758 tall, so the `html:has(.qz)` height-bound root scale from
   quote-wizard.css deliberately does NOT apply here — the width scale from
   base.css is the only one, and the document is as long as the design.
   ========================================================================== */

/* ---- tokens local to this page ---------------------------------------- */
.qr {
  /* Cards 2/3, resting.  Figma's own is @.16; the user took it down to .06 and
     then back up a notch (2026-08-07, "nichley 2 cards ka border light kro"
     then "thora sa dark kro minor sa") — .10 is where it landed.  The pair to
     card 1's ring going to full opacity, so the recommended card still reads
     as the only one with a real edge.  The hover value below is untouched,
     which keeps Figma's Recipe C legible: .10 -> .4 is still a clear step. */
  --qr-line: rgba(17, 17, 17, 0.1);
  --qr-line-h: rgba(17, 17, 17, 0.4);      /* ... and on hover (Figma Recipe C) */
  --qr-wash: rgba(17, 17, 17, 0.04);       /* the spec panel / contact card ground */
  --qr-green: #00ab55;                     /* the spec checks + "How?" + the FAB */
  --dur-zoom: 700ms;                       /* re-declared per CLAUDE.md, not imported */
}

/* ==========================================================================
   PAGE SHELL
   ========================================================================== */
.qr {
  position: relative;
  min-height: 100vh;
  background: var(--bg);                   /* the frame's own #fefff9 */
  /* The frame is `clipsContent`.  Nothing overflows now that card 1's halo is
     gone (the marble clips itself inside .qr-bg), so this is a guard rather than
     load-bearing — but keep it `clip`, never `hidden`: hidden would make this a
     scroll container and the sticky rail would stop pinning to the viewport.
     Paired with `overflow-y: visible`, which is legal here — the spec only
     cross-adjusts hidden/scroll/auto against visible, not clip — so the page
     still scrolls normally. */
  overflow-x: clip;
  overflow-y: visible;
}

/* ---- the marble ground -------------------------------------------------
   RECTANGLE 7064:945 — bbox rel(-1180,-738) 3953.91x3137.77, rotationRad
   -0.45275724 (= -25.9411deg).  A rotated node's absoluteBoundingBox is the
   ROTATED box, so it is not the element: fillGeometry gives the real
   pre-rotation size, 3536.36 x 1769.04.  Rotation preserves the centre, so the
   element is placed by centring it on the bbox centre (796.955, 830.885):
       left = 796.955 - 3536.36/2 = -971.225
       top  = 830.885 - 1769.04/2 =  -53.635
   The source is 4096x2049 and 3536.36/1769.04 = 1.9990 = 4096/2049, so
   `object-fit: cover` crops nothing.  Its own mean colour is (254.9,254.9,249.4)
   — i.e. #fefff9 — which is why this reads as faintly-veined page background
   rather than as a photograph. */
.qr-bg {
  position: absolute;
  inset: 0;
  overflow: clip;
  z-index: 0;
  pointer-events: none;
}
.qr-bg img {
  position: absolute;
  left: -60.7015625rem;
  top: -3.3521875rem;
  width: 221.0225rem;
  height: 110.565rem;
  max-width: none;                         /* base.css's img{max-width:100%} would clamp it */
  object-fit: cover;
  transform: rotate(-25.9411deg);
}

.qr-shell {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;                 /* so the rail is its own height, not stretched */
  gap: 2.5rem;                             /* 540 - 40 - 460 */
  padding: 2.5rem;                         /* the frame's own 40 gutter, all four sides */
}
.qr-main {
  flex: 1 1 auto;
  min-width: 0;                            /* 1920 - 80 - 460 - 40 = 1340 */
}

/* ==========================================================================
   LEFT RAIL — Frame 101 @40,40 460x930  ->  white card 436x906
   ==========================================================================
   STICKY, and height-capped to the viewport (user, 2026-08-06: "resultspage pe
   left section sticky rhe ga or 100vh min adjust hoga").  Figma asks for the
   same thing outright — Frame 101 carries `scroll: FIXED`, i.e. it does not
   travel with the page.

   height = min(Figma's own 930, the viewport minus the 40 gutters).  At a
   1010-tall window those are equal, so the render is Figma-exact; on a taller
   window it stays 930 rather than growing; on a shorter one it shrinks so the
   pinned rail is always fully visible.  Everything is rem, so the 930 branch
   scales with the design while `100vh` does not — which is correct, since the
   thing being subtracted is a real viewport gutter.

   What that costs: the rail's lower cluster has to be BOTTOM-anchored or it
   floats mid-card the moment the height is not 930.  Those four are .qr-rule,
   .qr-trust, .qr-help and .qr-fab.  Their bottoms are Figma's own y's measured
   from the other end (906 - y - h), so at exactly 930 nothing moves.

   39rem floor = 624: the recommendation box ends at card-rel 452 and the bottom
   cluster needs 148, so 600 of card + 24 of padding is the point below which
   the two would meet.  Under that the page simply scrolls the rail. */
.qr-side {
  flex: none;
  width: 28.75rem;                         /* 460 */
  position: sticky;
  top: 2.5rem;
  height: min(58.125rem, calc(100vh - 5rem));
  min-height: 39rem;
  background: var(--panel);                /* #f5f6f0 */
  border-radius: var(--radius);
  padding: 0.75rem;                        /* 12 */
}
.qr-side-card {
  position: relative;
  height: 100%;                            /* 906 */
  background: var(--white);
  border-radius: var(--radius);
}
.qr-side-card > * { position: absolute; }

.qr-logo { left: 2.5rem; top: 2.5rem; width: 7.3125rem; height: 3.75rem; }  /* @40,40 117x60 */
.qr-logo img { width: 100%; height: 100%; object-fit: contain; }

/* ---- Frame 113 7064:1320 @235,46 161x48 — "Restart quote" --------------
   HUG/FIXED: 40 chip + 8 gap + 113 label = 161, and pad [4,,4,] puts the chip
   at y4.  `align-items: center` then lands the 22-tall label on Figma's own
   y13 ((40 - 22)/2 + 4).  This is the one node on the screen Figma wires to a
   real destination — ON_CLICK -> 7064:2469, i.e. step 1. */
.qr-restart {
  left: 14.6875rem; top: 2.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;                             /* 8 */
  padding: 0.25rem 0;                      /* 4 top / 4 bottom */
  border: 0; background: none; appearance: none; font: inherit; cursor: pointer;
}
.qr-restart-chip {
  flex: none;
  width: 2.5rem; height: 2.5rem;           /* 40x40 */
  border-radius: var(--radius);            /* r12, not the 8 the other chips use */
  background: rgba(17, 17, 17, 0.04);
  box-shadow: inset 0 0 0 0.125rem rgba(17, 17, 17, 0.04);   /* weight 2, INSIDE */
  display: grid; place-items: center;
}
.qr-restart-chip img { width: 1.5rem; height: 1.5rem; }
.qr-restart-label {
  font-family: var(--font-sans);
  font-weight: 500;                        /* InstrumentSans-Medium */
  font-size: 1.125rem;                     /* 18 */
  line-height: 1.3725rem;                  /* 21.96 */
  letter-spacing: -0.01rem;
  color: var(--ink-70);
  white-space: nowrap;
}

/* ---- Frame 1707481526 @40,140 356x312 — the recommendation panel --------
   #fefff9 with a 2px INSIDE gradient stroke (#e2fa5a -> #869435, straight
   down).  A transparent border + a two-layer background is exact here BECAUSE
   the children are in flow: Figma's 20 padding is measured from the outer edge,
   so `border: 2 + padding: 18` puts the first child at 20 either way, and
   356 = 2 + 18 + 316 + 18 + 2.  Height is HUG: 20 + 204 + 20 + 48 + 20 = 312. */
.qr-reco {
  left: 2.5rem; top: 8.75rem;
  width: 22.25rem;                         /* 356 */
  border: 0.125rem solid transparent;
  border-radius: var(--radius);
  padding: 1.125rem;                       /* 20 - the 2px border */
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    linear-gradient(to bottom, #e2fa5a 0%, #869435 100%) border-box;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                            /* 20 */
}
.qr-reco-lines {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                            /* 12 */
}
.qr-reco-lines p {
  margin: 0;
  font-family: var(--font-ui);             /* Geist-Regular */
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3rem;                     /* 20.8 */
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
/* the styleOverrideTable runs — Geist-Medium at full #111 */
.qr-reco-lines b {
  font-weight: 500;
  color: var(--ink);
}
.qr-reco-answers {
  align-self: flex-start;
  font-family: var(--font-ui);
  font-weight: 500;                        /* Geist-Medium */
  font-size: 1rem;
  line-height: 1.3rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
  text-decoration: underline;
}

/* ---- Frame 113 7064:1307 — the panel-count stepper, 316x48 -------------
   4 + 40 + 4 + 220 + 4 + 40 + 4 = 316 exactly, so nothing is declared but the
   two 40s.  Figma wires no interaction on either button and its middle cell
   reads "02"; a -/+ pair that does nothing is broken UI, so the count is live
   and starts at Figma's own 2.  It is deliberately not bound to the "10 panel"
   copy above it — that number is the design's, and inventing an arithmetic
   relationship between the two would be inventing design. */
.qr-count {
  height: 3rem;                            /* 48 */
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 0 0.75rem rgba(0, 0, 0, 0.2);   /* DROP_SHADOW #000 a0.2 radius 12 */
  padding: 0.25rem;                        /* 4 */
  display: flex;
  align-items: center;
  gap: 0.25rem;                            /* 4 */
}
.qr-count-btn {
  flex: none;
  width: 2.5rem; height: 2.5rem;           /* 40x40 */
  padding: 0; border: 0; appearance: none; cursor: pointer;
  border-radius: var(--radius);
  background: rgba(226, 250, 90, 0.12);
  box-shadow: inset 0 0 0 0.125rem var(--accent);   /* #e2fa5a weight 2 INSIDE */
  display: grid; place-items: center;
}
.qr-count-btn img { width: 1.5rem; height: 1.5rem; }
.qr-count-val {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  font-family: var(--font-sans);
  font-weight: 500;                        /* InstrumentSans-Medium */
  font-size: 1.125rem;                     /* 18 */
  line-height: 1.3725rem;                  /* 21.96 */
  letter-spacing: -0.01rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;      /* so 09 -> 10 cannot jitter the row */
}

/* ---- the bottom cluster, all four bottom-anchored (see .qr-side) -------- */
/* Vector 8 @0,758 436 long, weight 2, strokeDashes [8,8], and the stroke is
   itself a vertical GRADIENT (transparent -> #e2fa5a @52.4038% -> transparent),
   so the dash is painted through a mask rather than as a flat colour.  Copied
   from quote-wizard.css's .qz-rule, which is the same node on the step screens. */
.qr-rule {
  left: 0; width: 27.25rem; height: 0.125rem;
  bottom: 9.125rem;                        /* 906 - 758 - 2 */
  background: linear-gradient(to bottom,
    rgba(226, 250, 90, 0) 0%, #e2fa5a 52.4038%, rgba(226, 250, 90, 0) 100%);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 0.5rem, transparent 0.5rem 1rem);
          mask-image: repeating-linear-gradient(to right, #000 0 0.5rem, transparent 0.5rem 1rem);
}

/* Frame 15 @20,790 225x24 — logo 94x24 + stars 125x24, gap 6 */
.qr-trust {
  left: 1.25rem; bottom: 5.75rem;          /* 906 - 790 - 24 */
  width: 14.0625rem; height: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;                           /* 6 */
}
/* Both fills are Figma CROPs (scaleMode STRETCH + imageTransform), so the
   visible window is a fraction of the source.  These are the homepage's own
   .tp-logo / .tp-stars numbers verbatim — the same two imageRefs, the same two
   boxes — expressed as percentages of the box so they ride the fluid scale. */
.qr-tp-logo, .qr-tp-stars { position: relative; display: block; overflow: hidden; height: 1.5rem; }
.qr-tp-logo { width: 5.875rem; }           /* 94x24 */
.qr-tp-stars { width: 7.8125rem; }         /* 125x24 */
.qr-tp-logo img {
  position: absolute;
  left: -36.63%; top: -62.21%;
  width: 172.68%; height: 291.68%;
  max-width: none;
}
.qr-tp-stars img {
  position: absolute;
  left: 0; top: -140.95%;
  width: 100%; height: 241.9%;
  max-width: none;
}

/* TEXT 7064:1319 @20,834 305x24 — "Help?   Start Chat   or   Book a Call."
   The triple spaces are Figma's own, and characterStyleOverrides makes the two
   link runs Medium + underlined at full #111. */
.qr-help {
  left: 1.25rem; bottom: 3rem;             /* 906 - 834 - 24 */
  margin: 0;
  width: 19.0625rem;                       /* 305 */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.25rem;                      /* 20 */
  line-height: 1.525rem;                   /* 24.4 */
  letter-spacing: -0.01rem;
  color: var(--ink-70);
  white-space: pre;                        /* keeps Figma's runs of spaces */
}
.qr-help a {
  font-weight: 500;
  color: var(--ink);
  text-decoration: underline;
}

/* Frame 103 @376,826 40x40 — #00ab55 r8 with the white WhatsApp glyph.
   Figma stacks TWO identical 24x24 glyph frames here, one stroked #000000 and
   one #ffffff, pixel-aligned; only the top (white) one is ever seen, so the
   black copy is not built. */
.qr-fab {
  left: 23.5rem; bottom: 2.5rem;           /* 906 - 826 - 40 */
  width: 2.5rem; height: 2.5rem;
  padding: 0; border: 0; appearance: none; cursor: pointer;
  border-radius: var(--radius-sm);
  background: var(--qr-green);
  display: grid; place-items: center;
}
.qr-fab img { width: 1.5rem; height: 1.5rem; }

/* ==========================================================================
   TAB STEPPER — Frame 113 7064:1272 @900,40 620x48
   900 + 310 = 1210 = the right pane's own centre (540 + 1340/2), so it is
   centred, not offset.  Three FILL/FILL tabs: (620 - 8 - 8)/3 = 201.333.
   The tab fills encode progress — D10 is .12/.04/.04, D17 .12/.12/.04 — and
   Figma wires NO interaction on any of the three, so all three are inert
   markup here rather than three links to routes that do not exist.
   ========================================================================== */
/* PINNED, like the rail (user, 2026-08-07: "is ko fixed kro").  Figma asks for
   it outright — Frame 113 carries `scroll: FIXED`, the same flag as Frame 101 —
   so the bar floats over the cards as they pass under it.  It needs an explicit
   z-index because .qr-card is `position: relative` and a positioned later
   sibling would otherwise paint on top of the pinned bar. */
.qr-tabs {
  position: sticky;
  top: 2.5rem;                             /* the frame's own y40 */
  z-index: 5;
  width: 38.75rem;                         /* 620 */
  height: 3rem;                            /* 48 */
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: 0 0 2.5rem rgba(0, 0, 0, 0.2);    /* DROP_SHADOW #000 a0.2 radius 40 */
  padding: 0.25rem;                        /* 4 */
  display: flex;
  gap: 0.25rem;                            /* 4 */
  overflow: hidden;                        /* clipsContent */
}
.qr-tab {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;                            /* 40 */
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  gap: 0.75rem;                            /* chip 8 + 24 + 12 = the label's own x44 */
  padding: 0.5rem;                         /* 8 — also the chip's y8 and the number's right inset */
}
.qr-tab-chip {
  flex: none;
  width: 1.5rem; height: 1.5rem;           /* 24x24 */
  border-radius: var(--radius-sm);
}
.qr-tab-label {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.22rem;                    /* 19.52 */
  letter-spacing: -0.01rem;
  white-space: nowrap;
}
.qr-tab-num {
  margin-left: auto;
  font-family: var(--font-sans);
  font-size: 0.75rem;                      /* 12 */
  line-height: 0.915rem;                   /* 14.64 */
  letter-spacing: -0.01rem;
}
/* tab 1 — the completed stage */
.qr-tab-on {
  background: rgba(17, 17, 17, 0.12);
  box-shadow: inset 0 0 0 0.125rem rgba(17, 17, 17, 0.08);
}
.qr-tab-on .qr-tab-chip { background: rgba(17, 17, 17, 0.12); }
.qr-tab-on .qr-tab-label { font-weight: 500; color: var(--ink); }
.qr-tab-on .qr-tab-num { font-weight: 500; color: var(--ink); }
/* tabs 2 and 3 — still ahead */
.qr-tab-off {
  background: rgba(17, 17, 17, 0.04);
  box-shadow: inset 0 0 0 0.125rem rgba(17, 17, 17, 0.01);
}
.qr-tab-off .qr-tab-chip { background: rgba(17, 17, 17, 0.06); }
.qr-tab-off .qr-tab-label { font-weight: 400; color: var(--ink-70); }
.qr-tab-off .qr-tab-num { font-weight: 400; color: var(--ink-70); }

/* ==========================================================================
   TOP BAR — Frame 1707481534 @933.5,112 553x29, HUG, gap 24
   283 + 24 + 127 + 24 + 95 = 553, and 933.5 + 276.5 = 1210, so it is a centred
   hug row and none of the three x's is declared.
   ========================================================================== */
.qr-topbar {
  width: max-content;
  margin: 1.5rem auto 0;                   /* tabs end y88 -> row starts y112 */
  display: flex;
  align-items: center;                     /* the y0 / y4.5 offsets are all centre 14.5 */
  gap: 1.5rem;                             /* 24 */
}
.qr-topbar h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;                        /* InstrumentSans-Medium */
  font-size: 1.5rem;                       /* 24 */
  line-height: 1.83rem;                    /* 29.28 */
  letter-spacing: -0.01rem;
  color: var(--ink);
  white-space: nowrap;
}
.qr-topbar-link {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.22rem;                    /* 19.52 */
  letter-spacing: -0.01rem;
  color: var(--ink-70);
  text-decoration: underline;
  white-space: nowrap;
  border: 0; background: none; padding: 0; appearance: none; cursor: pointer;
}

/* ==========================================================================
   PACKAGE CARDS — 7064:946 / 1016 / 1081, 1340x356 r36 @y181 / 557 / 933
   ========================================================================== */
.qr-cards {
  margin-top: 2.5rem;                      /* top bar ends y141 -> card 1 at y181 */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                            /* 376 - 356 */
}
.qr-card {
  position: relative;
  height: 22.25rem;                        /* 356 */
  background: var(--white);
  border-radius: 2.25rem;                  /* 36 */
}
.qr-card > * { position: absolute; }

/* cards 2 and 3 — stroke #111 @.16 weight 2 INSIDE + DROP_SHADOW #000 a.08
   radius 40 offset 0,2.  The stroke is an inset shadow, not a border: a real
   border would move every absolutely-positioned child 2px in, because they
   resolve against the PADDING box while Figma's INSIDE stroke does not. */
.qr-card-n {
  box-shadow:
    0 0.125rem 2.5rem rgba(0, 0, 0, 0.08),
    inset 0 0 0 0.125rem var(--qr-line);
}

/* card 1 — the recommended one.  No stroke of its own; instead GROUP "Group 27"
   holds three crops of one lime halo plus RECTANGLE "Rectangle 23", a 1340x356
   ring painted with a GRADIENT_LINEAR stroke.  Its DROP_SHADOW is lime:
   #e2fa5a a0.4 radius 40 offset 0,8. */
.qr-card-1 { box-shadow: 0 0.5rem 2.5rem rgba(226, 250, 90, 0.4); }
/* Rectangle 23's stroke: handles (0.5,1)->(0.5,0) = straight up, stops
   #111111 @0 -> #e2fa5a @69.9061%, and the PAINT carries opacity 0.4 on top of
   the stop alphas — the three-opacities trap CLAUDE.md flags.  Figma's paint
   opacity IS a layer opacity, so it is expressed as `opacity` on the overlay
   rather than folded into the stops — which also leaves one knob for the hover.
   A 2px INSIDE gradient ring needs the mask-composite sandwich; a `border` is
   out for the same child-shifting reason as above. */
.qr-card-1::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.125rem;                       /* weight 2 */
  pointer-events: none;
  /* Figma's own paint opacity here is .4; taken to full on the user's call
     (2026-08-07, "top card k border ki opacity hta do yani 100% krdo"), the
     pair to cards 2/3 dropping to @.06.  The ring is Rectangle 23's ink->lime
     gradient, so at full strength it is also what shows through wherever the
     beam mask above it goes dim. */
  opacity: 1;
  background: linear-gradient(to top, #111111 0%, #e2fa5a 69.9061%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}

/* ---- the electric beam border on card 1 — REMOVED ----------------------
   Card 1 briefly carried an animated lightning ring ported from
   C:\Users\Talha\Downloads\tayyabshahid.com (`.lightning-card`): a `::before`
   10px outside the card, bent by a static feTurbulence + feDisplacementMap
   filter, with a rotating conic-gradient mask sweeping a bright head round the
   edge.  The user removed it on 2026-08-07 ("is screen pe pele card se
   animation remove krdo"), so the whole block is gone — the `@property
   --qr-beam` descriptor, the `::before`, its reduced-motion gate and the
   `@keyframes qr-beam` — along with the `#qr-lightning` SVG filter that
   QuoteResults.tsx inlined for it.

   Nothing else depended on it, and card 1 needs no replacement: it is back to
   exactly Figma's own two layers, which were always separate rules —
   `.qr-card-1`'s lime DROP_SHADOW and `.qr-card-1::after`, Rectangle 23's
   ink -> lime ring at the full opacity the user set.  If it is ever wanted
   back, it is in the 2026-08-07 zip beside this repo. */

/* ---- Group 27, the halo — REMOVED -------------------------------------
   Card 1's GROUP "Group 27" wrapped Rectangle 23 (the gradient ring above) with
   three crops of a lime rounded-rect halo, the whole group rotated -90deg.  The
   user dropped the halo on 2026-08-07 ("results page qr-glow hta do"); the ring
   and the lime DROP_SHADOW stay, so card 1 still reads as the recommended one.

   Kept here because the geometry is the expensive part to re-derive.  Each
   child's reported box is already the ROTATED box while its fillGeometry gives
   the pre-rotation one, so the same centre-preserving conversion as the marble
   applies:
     glow A  bbox card-rel(-149,-75) 956.243x509  ->  element 509x956.243 @  74.6215, -298.6215
     glow B  bbox card-rel( 782,-75) 705.304x509  ->  element 509x705.304 @ 880.152 , -173.152
     glow C  bbox card-rel( 502,-75) 344    x509  ->  element 509x344     @ 419.5   ,    7.5
   B and C are Figma CROPs of the same 1022x1920 source (results-glow.png):
   imageTransform [[.999,0,.0005],[0,d,.26316]] shows the image from y 26.316%
   down at a uniform 509/1021 = 0.4985 scale, so both put the source at
   509.5x957.2 offset (-0.25,-251.9) inside their own clip box and only the box
   height differs.  A is the whole image (509/1022 x 1920 = 956.24 exactly). */

/* ---- Group 26, the product art @32,40 ---------------------------------
   The group's own box is only the union of its children, so it is a zero-size
   anchor at Figma's 32,40 and each image keeps its group-relative offset. */
.qr-art { left: 2rem; top: 2.5rem; }
.qr-art img { position: absolute; max-width: none; }
.qr-im-panels    { left: 0;          top: 2.5rem;   width: 12rem;      height: 12rem; }      /* @0,40   192x192 */
.qr-im-longi     { left: 4.3125rem;  top: 0;        width: 3.375rem;   height: 1.25rem; }    /* @69,0    54x20  */
.qr-im-batt      { left: 10.5625rem; top: 5.75rem;  width: 8.75rem;    height: 8.75rem; }    /* @169,92 140x140 */
.qr-im-sigenlogo { left: 12.125rem;  top: 3rem;     width: 5.6875rem;  height: 2.25rem; }    /* @194,48  91x36  */
.qr-im-alphalogo { left: 12.5625rem; top: 3.625rem; width: 4.875rem;   height: 1.625rem; }   /* @201,58  78x26  */
.qr-im-teslalogo { left: 13.625rem;  top: 2.5rem;   width: 2.75rem;    height: 2.75rem; }    /* @218,40  44x44  */
.qr-im-powerwall { left: 9.4375rem;  top: 5.75rem;  width: 10.875rem;  height: 12.1875rem; } /* @151,92 174x195 */
.qr-art img { object-fit: contain; }

/* ---- Frame 1707481531, the spec panel @373,20 947x316 r24 --------------
   DELIBERATE DEVIATION: 931, not Figma's 947 (user, 2026-08-07, by value).
   Figma's 947 leaves a 20 gap to the card's right edge; 931 makes it 36, so the
   grey panel is pulled in off the card's r36 corner.  .qr-price moves with it —
   595 -> 579 — so the price box keeps the exact 20 gutter inside the panel that
   was set on the same day.  Nothing inside either box moves.
   It was also briefly widened the other way, to 959 (gap 8); that pinched the
   panel's r24 corner against the card's r36 one and read as the grey box
   escaping the card, so do not try that again. */
.qr-panel {
  left: 23.3125rem; top: 1.25rem;
  width: 58.1875rem; height: 19.75rem;     /* 931x316 (Figma 947 — see above) */
  background: var(--qr-wash);              /* #111111 @ .04 */
  border-radius: 1.5rem;                   /* 24 */
  overflow: hidden;                        /* clipsContent */
}
.qr-panel > * { position: absolute; }

.qr-pkg-h {
  left: 1.5rem; top: 1.25rem;
  width: 20.75rem;                         /* 332 — the authored wrap width, load-bearing */
  margin: 0;
  font-family: var(--font-display);        /* HostGrotesk-Medium */
  font-weight: 500;
  font-size: 1.5rem;                       /* 24 */
  line-height: 2rem;                       /* 32 */
  letter-spacing: -0.08rem;                /* -1.28 */
  color: rgba(17, 17, 17, 0.92);
}

/* Frame 1707481532 @24,96 279x32 — 8 + 239 + 4 + 20 + 8 = 279, height 6+20+6 */
.qr-inc {
  left: 1.5rem; top: 6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;                            /* 4 */
  padding: 0.375rem 0.5rem;                /* 6 / 8 */
  border-radius: var(--radius-sm);
  background: rgba(17, 17, 17, 0.06);
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.22rem;                    /* 19.52 */
  letter-spacing: -0.01rem;
  color: var(--ink-70);
  white-space: nowrap;
}
.qr-inc img { width: 1.25rem; height: 1.25rem; }

/* Frame 1707481540 @24,152 148 tall — five 20-tall rows on a 32 pitch */
.qr-specs {
  left: 1.5rem; top: 9.5rem;
  margin: 0; padding: 0; list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                            /* 12 */
}
.qr-specs li {
  height: 1.25rem;                         /* 20 */
  display: flex;
  align-items: center;
  gap: 0.25rem;                            /* icon 20 + 4 = the label's own x24 */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.22rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
  white-space: nowrap;
}
.qr-specs img { flex: none; width: 1.25rem; height: 1.25rem; }

/* ---- Frame 1707481535 @587,20 332x272 r12 — the price card -------------
   ONE DELIBERATE DEVIATION, and it is the whole of the "box k andr wala margin
   sahi kro" fix (user, 2026-08-07).  Figma puts this box at panel-rel x587, which
   leaves 947 - 587 - 332 = 28 of gutter on its right.  Stacked on the panel's own
   20 gap to the card edge that is 48 of dead white down the right of every card,
   and 28-then-20 reads as an accident.

   x579 makes the gutter exactly 20 — the same 20 the panel already has above it.
   (It was x595 while the panel was 947 wide, which gave the same 20; both moved
   16 left together when the panel came in to 931, so the gutter is unchanged.)
   The box's own 332x272 is untouched, so nothing inside it moves.  Top stays
   Figma's 20, which is what keeps its top edge level with the title's.

   NOT to try again: widening the panel to 959 (gap 8) pinches its r24 corner
   against the card's r36 one and the grey reads as escaping the card. */
.qr-price {
  left: 36.1875rem; top: 1.25rem;          /* 579 (Figma 587 — see above) */
  width: 20.75rem; height: 17rem;          /* 332x272 */
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;                        /* clipsContent */
}
.qr-price > * { position: absolute; }

/* Frame 7064:976 @16,16 24x24, rotationRad pi — the quote mark.  The shipped
   SVG is the un-rotated child geometry (paths start at M9,5 and M18,5), so the
   180deg is applied here. */
.qr-quote {
  left: 1rem; top: 1rem;
  width: 1.5rem; height: 1.5rem;
  display: block;
  transform: rotate(180deg);
}
.qr-blurb {
  left: 3rem; top: 1rem;
  width: 16.75rem;                         /* 268 */
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.22rem;                    /* 19.52 */
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
/* Vector 11 @0,92 332 long and Vector 10 @166,92 120 long, both weight 2
   CENTER-aligned #e2fa5a — so each straddles its Figma coordinate by 1. */
.qr-rule-h { left: 0; top: 5.6875rem; width: 20.75rem; height: 0.125rem; background: var(--accent); }
.qr-rule-v { left: 10.3125rem; top: 5.75rem; width: 0.125rem; height: 7.5rem; background: var(--accent); }

.qr-price-cap {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.22rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
  white-space: nowrap;
}
.qr-cap-1 { left: 1.6875rem; top: 7.6875rem; }    /* @27,123 */
.qr-cap-2 { left: 11.625rem; top: 7.6875rem; }    /* @186,123 */

.qr-price-val {
  font-family: var(--font-display);        /* HostGrotesk-Medium */
  font-weight: 500;
  font-size: 1.5rem;                       /* 24 */
  line-height: 2rem;                       /* 32 */
  letter-spacing: -0.08rem;                /* -1.28 */
  color: var(--ink);
  white-space: nowrap;
}
.qr-val-1 { left: 2.0625rem; top: 9.3125rem; }    /* @33,149 */
/* Frame 1707481537 @204,149 83x32 — HUG, gap 4: 59 + 4 + 20 = 83 */
.qr-val-2 {
  left: 12.75rem; top: 9.3125rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
/* the chevron frame is rotated 90deg, which is how the shared right-chevron
   becomes a down-chevron */
.qr-val-2 img { width: 1.25rem; height: 1.25rem; transform: rotate(90deg); }

/* ---- "View package details" @16,212 300x44 ----------------------------
   Figma: r12, pad [6,6,6,16], SPACE_BETWEEN, gap 9.99, chip 32x32 r8 lime.
   16 + 246 + 32 + 6 = 300 exactly, so the label takes `flex: 1` and the gap
   resolves to 0 — which is why Figma reports the label as 246 rather than the
   236.01 the declared gap would give.  Card 1 is solid ink with a white label;
   cards 2 and 3 are transparent with a 2px #111 @.08 INSIDE stroke and an ink
   label.  All three keep the lime chip. */
.qr-cta {
  left: 1rem; top: 13.25rem;
  width: 18.75rem; height: 2.75rem;        /* 300x44 */
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  border: 0; appearance: none; cursor: pointer;
  /* the specular pass needs a clip box and its own stacking context */
  overflow: hidden;
  isolation: isolate;
}
.qr-cta-label {
  flex: 1 1 auto;
  min-width: 0;
  text-align: center;                      /* the TEXT node is align CENTER/CENTER */
  font-family: var(--font-ui);
  font-weight: 600;                        /* Geist-SemiBold */
  font-size: 1.0625rem;                    /* 17 */
  line-height: 1.38125rem;                 /* 22.1 */
  letter-spacing: -0.01rem;
}
.qr-cta-chip {
  flex: none;
  width: 2rem; height: 2rem;               /* 32x32 */
  border-radius: var(--radius-sm);
  background: var(--accent);
  display: grid; place-items: center;
}
.qr-cta-chip img { width: 1.75rem; height: 1.75rem; }   /* the 28 Arrow Icon */
.qr-cta-dark { background: var(--ink); }
.qr-cta-dark .qr-cta-label { color: var(--white); }
.qr-cta-ghost { background: none; box-shadow: inset 0 0 0 0.125rem rgba(17, 17, 17, 0.08); }
.qr-cta-ghost .qr-cta-label { color: var(--ink); }

/* ---- Frame 1707481538 @58,296 258x27 — the savings row ----------------
   HUG, gap 8: 41 + 8 + 159 + 8 + 42 = 258, and the three y offsets
   (0 / 5 / 3.5) all put the item's centre on 13.5, i.e. `align-items: center`. */
.qr-save {
  left: 3.625rem; top: 18.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;                             /* 8 */
}
.qr-save-pc {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;                      /* 20 */
  line-height: 1.6625rem;                  /* 26.6 */
  letter-spacing: -0.08rem;
  color: rgba(17, 17, 17, 0.92);
}
.qr-save-t {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.875rem;                     /* 14 */
  line-height: 1.0675rem;                  /* 17.08 */
  letter-spacing: -0.01rem;
  color: var(--ink-70);
  white-space: nowrap;
}
.qr-save-how {
  font-family: var(--font-sans);
  font-weight: 500;                        /* InstrumentSans-Medium */
  font-size: 1rem;
  line-height: 1.22rem;
  letter-spacing: -0.01rem;
  color: var(--qr-green);
  text-decoration: underline;
  white-space: nowrap;
}

/* ==========================================================================
   FAQ BLOCK — heading @580,1409 458x120 · sub @580,1549 491x96
              contact card @580,1933 510x228 · list @1222,1409 618x752
   Both columns end on 2161, and 580..1840 is 1260 centred on 1210, the same
   centre as the cards.  The left column's card is bottom-anchored with
   `margin-top: auto` rather than a hardcoded 524 — the homepage §11a mechanism.
   ========================================================================== */
.qr-faq {
  width: 78.75rem;                         /* 1260 */
  margin: 7.5rem auto 0;                   /* card 3 ends y1289 -> y1409 */
  display: grid;
  grid-template-columns: 40.125rem 38.625rem;   /* 642 (1222-580) / 618 */
}
.qr-faq-left { display: flex; flex-direction: column; }

/* TEXT 7064:1149 — HostGrotesk-SemiBoldItalic 52/60 ls 0, and the ONE display
   heading in the design with letterSpacing 0.  `textAutoResize: HEIGHT` means
   the box is the full 458 while the glyphs are narrower, so the gradient is
   laid out over 458 -> `display: block` at that width, not inline-block.
   Same node, same 458x120 box and the same #111 @.155415 first stop as the
   homepage's §11a heading, so the conversion is copied rather than recomputed. */
.qr-faq-h {
  margin: 0;
  width: 28.625rem;                        /* 458 */
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 3.25rem;                      /* 52 */
  line-height: 3.75rem;                    /* 60 */
  letter-spacing: 0;
}
.qr-faq-h span {
  display: block;
  background: linear-gradient(85.57deg, #111111 22.02%, #e2fa5a 136.29%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
/* Host Grotesk (not Instrument Sans) 400 24/32.  Copy says "Salesflow" — a
   Figma placeholder that the homepage reproduces verbatim too. */
.qr-faq-sub {
  margin: 1.25rem 0 0;                     /* heading box ends 1529 -> sub 1549 */
  width: 30.6875rem;                       /* 491 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}

/* Frame 100 @580,1933 510x228 r8 #111 @.04 */
.qr-contact {
  margin-top: auto;
  width: 31.875rem; height: 14.25rem;      /* 510x228 */
  padding: 1.25rem;                        /* 20 */
  border-radius: var(--radius-sm);
  background: var(--qr-wash);
  overflow: hidden;                        /* clipsContent */
}
.qr-contact p {
  margin: 0;
  width: 29.375rem;                        /* 470 */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
/* "Read Reviews" @20,148 208.99x60 is byte-for-byte base.css's .btn .btn-dark
   at the homepage's .btn-lg size — pad [10,10,10,16], gap 9.99, Geist-SemiBold
   20/25.6, 40x40 r8 lime chip, 28 arrow, 16 + 133 + 9.99 + 40 + 10 = 208.99.
   .btn/.btn-dark come from base.css (global); only the -lg sizing is restated,
   because .btn-lg itself lives in home.css, which this route does not link. */
.qr-reviews {
  margin-top: 2rem;                        /* 20 pad + 96 text + 32 = Figma's y148 */
  font-size: 1.25rem;                      /* 20 */
  line-height: 1.6rem;                     /* 25.6 */
}
.qr-reviews .chip { width: 2.5rem; height: 2.5rem; }
.qr-reviews .chip img { width: 1.75rem; height: 1.75rem; }

/* ---- Frame 1707481542 @1222,1409 618x752 — the question list -----------
   12 + 9*72 + 8*10 + 12 = 752 exactly, so no height is declared.  Rows are
   594x72 r12 #fff, pad [16,16,16,24], gap 9.99:
   24 + 504.01 + 9.99 + 40 + 16 = 594, so the question takes `flex: 1`.

   Figma repeats ONE question in all nine rows, wires `interactions: []` on
   every one and supplies no answer copy anywhere in the file — so, exactly as
   on the homepage's §11a, the rows are a real accordion with row 1's question
   verbatim and the other eight plus all nine answers authored.  The 72-tall
   row and its padding live on the BUTTON, so a closed list still measures 752. */
.qr-faqs {
  padding: 0.75rem;                        /* 12 */
  border-radius: var(--radius);
  background: linear-gradient(to bottom, #f5f6f0 0%, #e2fa5a 100%);
  overflow: hidden;                        /* clipsContent */
  display: flex;
  flex-direction: column;
  gap: 0.625rem;                           /* 10 (Figma's 9.99 + .01) */
}
.qr-faq-row {
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;                        /* clips the answer while it collapses */
}
.qr-faq-row h3 { margin: 0; }
.qr-faq-btn {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  height: 4.5rem;                          /* 72 */
  padding: 1rem 1rem 1rem 1.5rem;          /* [16,16,16,24] */
  border: 0; margin: 0; background: none; appearance: none;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.qr-faq-q {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-weight: 400;                        /* Geist-Regular, not the 600 buttons use */
  font-size: 1.25rem;
  line-height: 1.6rem;                     /* 25.6 */
  letter-spacing: -0.01rem;
  color: var(--ink);
}
/* "Arrow Icon Wrapper" 40x40 r8 #f6f6f6, rotationRad 1.5708 — which is how the
   shared right-pointing arrow.svg becomes a down chevron. */
.qr-faq-chip {
  flex: none;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm);
  background: #f6f6f6;
  display: flex; align-items: center; justify-content: center;
}
.qr-faq-chip img { width: 1.75rem; height: 1.75rem; transform: rotate(90deg); }
/* grid-template-rows 0fr -> 1fr animates to the answer's real height with no
   magic max-height; `visibility` keeps a closed answer out of the a11y tree and
   interpolates discretely, so it stays painted for the whole collapse. */
.qr-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows 340ms var(--ease-premium),
    visibility 340ms var(--ease-premium);
  transition-behavior: allow-discrete;
}
.qr-faq-row.is-open .qr-faq-panel { grid-template-rows: 1fr; visibility: visible; }
.qr-faq-panel-in { overflow: hidden; min-height: 0; }
/* separator borrowed from §4's VECTOR "Vector 9" (#111 @.12, strokeDashes
   [8,8]) rather than invented, so it reads as part of the design language */
.qr-faq-a {
  margin: 0;
  padding: 1rem 1.5rem 1.25rem;
  background-image: repeating-linear-gradient(to right,
    rgba(17, 17, 17, 0.12) 0 0.5rem, transparent 0.5rem 1rem);
  background-repeat: no-repeat;
  background-position: 1.5rem 0;
  background-size: calc(100% - 3rem) 0.0625rem;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}

/* ==========================================================================
   FOOTER — Frame 1707481544 @580,2281 1260x437
   437 = 12 + 343 + 10 + 60 + 12, and the white card's own
   40 + 263 + 40 = 343, so neither needs a declared height.
   This is the homepage's §11b footer minus its heading, CTA and photo band.
   ========================================================================== */
.qr-footer {
  width: 78.75rem;                         /* 1260 */
  margin: 7.5rem auto 0;                   /* FAQ ends y2161 -> footer y2281 */
  padding: 0.75rem;                        /* 12 */
  border-radius: var(--radius);
  background: linear-gradient(to bottom, #f5f6f0 0%, #e2fa5a 100%);
  overflow: hidden;                        /* clipsContent */
  display: flex;
  flex-direction: column;
  gap: 0.625rem;                           /* 10 */
}
.qr-ftr-card {
  position: relative;
  height: 21.4375rem;                      /* 343 */
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}
.qr-ftr-card > * { position: absolute; }

.qr-ftr-logo { left: 2.5rem; top: 2.5rem; width: 7.3125rem; height: 3.75rem; }
.qr-ftr-logo img { width: 100%; height: 100%; object-fit: contain; }
.qr-ftr-blurb {
  left: 2.5rem; top: 7.25rem;              /* @40,116 */
  width: 20rem;                            /* 320 */
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 1.525rem;                   /* 24.4 */
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
/* Frame 103/104/105 @40/88/136, y263 — 40x40 r8 #111 with lime 24x24 glyphs */
.qr-ftr-social {
  left: 2.5rem; top: 16.4375rem;           /* @40,263 */
  display: flex;
  gap: 0.5rem;                             /* 88 - 40 - 40 */
}
.qr-ftr-social span {
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--radius-sm);
  background: var(--ink);
  display: grid; place-items: center;
}
.qr-ftr-social img { width: 1.5rem; height: 1.5rem; }

/* Three "Navigation Links" columns at card-rel x 440 / 705 / 971 running to the
   card's right edge — a 265.33 pitch on 114/100/193-wide columns, so it is a
   3x1fr grid, not space-between (whose gaps would be 158.5, not 151/166). */
.qr-ftr-nav {
  left: 27.5rem; top: 2.5rem;              /* @440,40 */
  right: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.qr-ftr-navh {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;                        /* HostGrotesk-SemiBoldItalic */
  font-style: italic;
  font-size: 1.25rem;                      /* 20 */
  line-height: 1.6625rem;                  /* 26.6 */
  letter-spacing: 0;
}
/* `background-image`, never the `background` shorthand — the shorthand resets
   background-clip back to border-box and the heading renders as a solid lime
   bar with no letters.  The three boxes are 77 / 89 / 71 x 27, identical to the
   homepage's, so the three conversions are copied verbatim. */
.qr-ftr-navh span {
  display: inline-block;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.qr-ftr-navh-services span { background-image: linear-gradient(84.08deg, #111111 22.54%, #e2fa5a 135.58%); }  /* 77x27 */
.qr-ftr-navh-company  span { background-image: linear-gradient(84.88deg, #111111 22.25%, #e2fa5a 136%); }     /* 89x27 */
.qr-ftr-navh-general  span { background-image: linear-gradient(83.59deg, #111111 22.77%, #e2fa5a 135.3%); }   /* 71x27 */
.qr-ftr-nav ul {
  margin: 1.25rem 0 0;                     /* heading 27 -> list at y47 */
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                            /* 38 pitch - 26 row */
}
.qr-ftr-nav li {
  height: 1.625rem;                        /* 26 */
  font-family: var(--font-ui);
  font-weight: 500;                        /* Geist Medium */
  font-size: 1rem;
  line-height: 1.6rem;                     /* 25.6 */
  letter-spacing: -0.01rem;
  color: var(--ink);
  white-space: nowrap;
}

.qr-ftr-legal {
  height: 3.75rem;                         /* 60 */
  border-radius: var(--radius);
  background: var(--white);
  display: grid;
  place-items: center;
}
.qr-ftr-legal p {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;                        /* InstrumentSans-Medium */
  font-size: 1rem;
  line-height: 1.22rem;
  letter-spacing: -0.01rem;
  color: var(--ink);
}

/* ==========================================================================
   INTERACTION LAYER
   ==========================================================================
   Figma authors exactly one hover recipe for this screen — Recipe C, the
   package card: stroke #111 @.16 -> @.4 and DROP_SHADOW #000 a.08 -> a.12,
   nothing else.  Everything on top of that is the homepage's own vocabulary,
   per the standing instruction "agle pages pe b aese hi hover animation
   loading animation rkhna" and "quote k pages pe buttons pe hover animation
   effects dalo like home page": a translateY lift, one tight low shadow, a
   1000ms specular pass, the arrow chip leading by 3px, and an :active that
   settles the lift at --dur-press.

   The four invariants hold: the resting render is untouched (every declaration
   sits behind :hover / :active / :focus-visible), no hover changes the box
   model, nothing gets a button hover unless it is genuinely clickable, and
   there is a prefers-reduced-motion block at the end.
   ========================================================================== */

/* ---- Recipe C, plus a lift ---------------------------------------------- */
.qr-card {
  transition:
    transform var(--dur-hover) var(--ease-premium),
    box-shadow var(--dur-hover) var(--ease-premium);
}
/* `transform` here, never `translate` — the reveal layer owns `translate` on
   this element (motion-spec.json, variant `up`) and the two compose. */
.qr-card-n:hover {
  transform: translateY(-0.1875rem);
  box-shadow:
    0 0.125rem 2.5rem rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.125rem var(--qr-line-h);
}
/* Card 1 is authored inconsistently in Figma: it has no resting stroke at all
   and its hover overlay changes neither stroke nor shadow, while cards 2 and 3
   both do.  Treating that as a slip rather than a decision (WIZARD-NOTES §7),
   it gets the same idea expressed in its own material — the lime halo deepens
   instead of an ink ring darkening. */
.qr-card-1:hover {
  transform: translateY(-0.1875rem);
  box-shadow: 0 0.75rem 3rem rgba(226, 250, 90, 0.62);
}
/* The ring rests at full opacity now, so there is nowhere for it to deepen to;
   card 1's hover is carried entirely by the lift and the lime shadow above. */

/* ---- the package CTAs, the homepage .btn recipe ------------------------- */
.qr-cta {
  transition:
    background var(--dur-hover) var(--ease-premium),
    box-shadow var(--dur-hover) var(--ease-premium),
    transform var(--dur-hover) var(--ease-premium);
}
/* One restrained specular pass.  z-index:-1 + `isolation` on the button puts it
   above the fill and below the label — see CLAUDE.md's pseudo-element trap.
   The band and the keyframes are base.css's, which is where @keyframes
   btn-sheen lives, so the two copies cannot drift. */
.qr-cta::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0; bottom: 0; left: -55%;
  width: 46%;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(100deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.1) 30%,
    rgba(255, 255, 255, 0.38) 50%,
    rgba(255, 255, 255, 0.1) 70%,
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-18deg);
}
.qr-cta:hover::before { animation: btn-sheen var(--dur-sheen) var(--ease-sheen) 80ms; }
.qr-cta-chip { transition: box-shadow var(--dur-hover) var(--ease-premium); }
.qr-cta-chip img { transition: transform var(--dur-hover) var(--ease-premium); }
.qr-cta:hover .qr-cta-chip { box-shadow: 0 0 0 0.1875rem rgba(226, 250, 90, 0.3); }
.qr-cta:hover .qr-cta-chip img { transform: translateX(0.1875rem); }
.qr-cta:active .qr-cta-chip img { transform: translateX(0.0625rem); }

.qr-cta-dark:hover {
  background: #212121;
  transform: translateY(-0.125rem);
  box-shadow:
    0 0.875rem 1.875rem -0.875rem rgba(17, 17, 17, 0.7),
    inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08);
}
.qr-cta-dark:active {
  transform: translateY(0);
  box-shadow:
    0 0.1875rem 0.5rem -0.3125rem rgba(17, 17, 17, 0.7),
    inset 0 0 0 0.0625rem rgba(255, 255, 255, 0.08);
  transition-duration: var(--dur-press);
}
/* the ghost pair keeps its INSIDE stroke and darkens it, the same way the
   homepage's ghost .btn goes from #111 @.08 to @.16 */
.qr-cta-ghost:hover {
  background: var(--ink-08);
  transform: translateY(-0.125rem);
  box-shadow:
    0 0.625rem 1.5rem -0.75rem rgba(17, 17, 17, 0.45),
    inset 0 0 0 0.125rem rgba(17, 17, 17, 0.16);
}
.qr-cta-ghost:active {
  transform: translateY(0);
  box-shadow:
    0 0.125rem 0.375rem -0.25rem rgba(17, 17, 17, 0.5),
    inset 0 0 0 0.125rem rgba(17, 17, 17, 0.16);
  transition-duration: var(--dur-press);
}
.qr-cta:focus-visible { outline: 0.125rem solid var(--ink); outline-offset: 0.1875rem; }
.qr-cta-dark:focus-visible { outline-color: var(--accent); }

/* ---- "Restart quote" — the one node Figma actually wires ---------------- */
.qr-restart-chip { transition: background-color var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium); }
.qr-restart-chip img { transition: transform var(--dur-hover) var(--ease-premium); }
.qr-restart-label { transition: color var(--dur-hover) var(--ease-premium); }
.qr-restart:hover .qr-restart-chip {
  background: var(--ink-08);
  box-shadow: inset 0 0 0 0.125rem rgba(17, 17, 17, 0.12);
}
/* it is a refresh glyph, so it turns rather than slides */
.qr-restart:hover .qr-restart-chip img { transform: rotate(-90deg); }
.qr-restart:hover .qr-restart-label { color: var(--ink); }
.qr-restart:active .qr-restart-chip img { transition-duration: var(--dur-press); }
.qr-restart:focus-visible { outline: 0.1875rem solid var(--ink); outline-offset: 0.125rem; border-radius: var(--radius); }

/* ---- the panel counter -------------------------------------------------- */
.qr-count-btn {
  transition:
    background-color var(--dur-hover) var(--ease-premium),
    box-shadow var(--dur-hover) var(--ease-premium),
    transform var(--dur-hover) var(--ease-premium);
}
.qr-count-btn:hover {
  background: rgba(226, 250, 90, 0.4);
  box-shadow:
    inset 0 0 0 0.125rem var(--accent),
    0 0.375rem 0.875rem -0.5rem rgba(17, 17, 17, 0.35);
  transform: translateY(-0.0625rem);
}
.qr-count-btn:active { transform: translateY(0); transition-duration: var(--dur-press); }
.qr-count-btn:disabled { opacity: 0.4; cursor: default; }
.qr-count-btn:disabled:hover {
  background: rgba(226, 250, 90, 0.12);
  box-shadow: inset 0 0 0 0.125rem var(--accent);
  transform: none;
}
.qr-count-btn:focus-visible { outline: 0.1875rem solid var(--ink); outline-offset: 0.125rem; }

/* ---- the WhatsApp FAB --------------------------------------------------- */
.qr-fab {
  transition:
    background-color var(--dur-hover) var(--ease-premium),
    box-shadow var(--dur-hover) var(--ease-premium),
    transform var(--dur-hover) var(--ease-premium);
}
.qr-fab:hover {
  background: #00c463;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(0, 171, 85, 0.7);
}
.qr-fab:active { transform: translateY(0); transition-duration: var(--dur-press); }
.qr-fab:focus-visible { outline: 0.1875rem solid var(--ink); outline-offset: 0.125rem; }

/* ---- the FAQ rows — the homepage's .qna-faq recipe verbatim -------------
   White cannot lift into the lime gradient behind it, so the row slides right
   instead and the #f6f6f6 chip takes the lime. */
.qr-faq-row {
  transition:
    transform var(--dur-hover) var(--ease-premium),
    box-shadow var(--dur-hover) var(--ease-premium);
}
.qr-faq-chip { transition: background var(--dur-hover) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium); }
.qr-faq-chip img { transition: transform 340ms var(--ease-premium); }
.qr-faq-row:hover {
  transform: translateX(0.1875rem);
  box-shadow:
    0 0.625rem 1.625rem -0.875rem rgba(17, 17, 17, 0.25),
    inset 0 0 0 0.0625rem rgba(17, 17, 17, 0.06);
}
.qr-faq-row:hover .qr-faq-chip,
.qr-faq-row.is-open .qr-faq-chip { background: var(--accent); }
.qr-faq-row:hover .qr-faq-chip { box-shadow: 0 0 0 0.1875rem rgba(226, 250, 90, 0.35); }
.qr-faq-row.is-open { box-shadow: 0 0.875rem 2rem -1.125rem rgba(17, 17, 17, 0.24); }
.qr-faq-row.is-open .qr-faq-chip img { transform: rotate(270deg); }   /* 90 closed (Figma) -> 270 open */
.qr-faq-btn:focus-visible { outline: 0.125rem solid var(--ink); outline-offset: -0.1875rem; border-radius: var(--radius); }
.qr-faq-btn:active { transition-duration: var(--dur-press); }

/* ---- text links — the homepage's .pv-how a recipe ----------------------
   Rule thickens 1 -> 2 AND the offset drops 2 -> 4; thickness alone is nearly
   invisible at 16px.  No lift, no colour change: these are links, not buttons. */
.qr-topbar-link,
.qr-save-how,
.qr-reco-answers,
.qr-help a,
.qr-inc {
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.125rem;
  transition:
    text-decoration-thickness var(--dur-hover) var(--ease-premium),
    text-underline-offset var(--dur-hover) var(--ease-premium),
    text-decoration-color var(--dur-hover) var(--ease-premium),
    color var(--dur-hover) var(--ease-premium),
    background-color var(--dur-hover) var(--ease-premium);
}

/* "What's included?" / "Save for later" / "Form Answers" get the SIDEBAR's link
   look (user, 2026-08-07: "in teenon links ko wese hi style jese niche start
   chat ko diya howa bs fonts and colors wohi rkhna jo abi in links k rkhe
   howe").  The geometry was already identical to `.qr-help a` — 1px thickness,
   2px offset, both from the rule above — so the only thing that actually
   differed was the RULE's colour: `text-decoration-color` defaults to
   `currentColor`, and the two top-bar links are `#111 @.7`, which painted a thin
   grey hairline where Start Chat paints solid ink at 20px.

   `text-decoration-color` is its own property, so pinning it to full ink matches
   Start Chat's rule exactly while leaving the requested font and text colour
   untouched.  If it wants more air under the glyphs, `text-underline-offset` on
   the block above is the one knob — it is shared with Start Chat, so both move
   together, which is the point. */
.qr-topbar-link,
.qr-reco-answers {
  text-decoration-color: var(--ink);
}

/* ---- THE WORD SPLITTER ERASES AN UNDERLINE -----------------------------
   And this is the general shape of it, so it is worth not rediscovering: a
   text decoration is NOT painted across the contents of an ATOMIC INLINE, and
   `motion.css` sets `html.rv-on .rv-w { display: inline-block }`.  So the
   moment a link becomes a `words` reveal target its rule vanishes under every
   word and survives only in the SPACES between them.

   Measured, not reasoned (user, 2026-08-07: "in links k border show ni ho rhe
   or hover state main b border show ni ho rhe").  The same link was rendered
   plain and word-split through an SVG foreignObject onto a canvas and scanned
   row by row: the underline row goes from 120 dark px spanning the whole
   string to 10 — two stubs, one per inter-word space.  That is also why
   thickening it on :hover looked like nothing happening: 1px -> 2px on 10px of
   line is invisible.

   `.qr-help a` is untouched by this and always rendered correctly, which is
   the tell: it is a direct ELEMENT child of a words target, so the splitter
   keeps it whole as one `.rv-el` and deliberately gives it NO display change.

   Restating the three longhands on the words paints each word; the parent's
   own line still fills the gaps, so the rule reads as continuous.  `inherit`
   rather than literals so the :hover thickening below flows through
   automatically — a transition's interpolated computed value inherits, so the
   children animate with the parent instead of jumping. */
.qr-topbar-link .rv-w,
.qr-reco-answers .rv-w,
.qr-save-how .rv-w {
  text-decoration-line: underline;
  text-decoration-thickness: inherit;
  text-underline-offset: inherit;
  text-decoration-color: inherit;
}
.qr-topbar-link:hover,
.qr-save-how:hover,
.qr-reco-answers:hover,
.qr-help a:hover {
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.25rem;
}
.qr-topbar-link:hover { color: var(--ink); }
/* the in-card "What's included in my installation" pill is a chip, not an
   underlined link, so it deepens its own ground and nudges its chevron */
.qr-inc img { transition: transform var(--dur-hover) var(--ease-premium); }
.qr-inc:hover { background: rgba(17, 17, 17, 0.12); color: var(--ink); }
.qr-inc:hover img { transform: translateX(0.125rem); }
.qr-topbar-link:focus-visible,
.qr-save-how:focus-visible,
.qr-reco-answers:focus-visible,
.qr-help a:focus-visible,
.qr-inc:focus-visible {
  outline: 0.125rem solid var(--ink);
  outline-offset: 0.1875rem;
  border-radius: 0.1875rem;
}

/* The three tab-stepper cells and the footer's 17 nav items get NO hover:
   Figma wires no destination on any of them and the design contains no URLs
   for the footer, so a hover there would promise a click that never happens. */

@media (prefers-reduced-motion: reduce) {
  .qr-card,
  .qr-cta, .qr-cta-chip, .qr-cta-chip img,
  .qr-restart-chip, .qr-restart-chip img, .qr-restart-label,
  .qr-count-btn, .qr-fab,
  .qr-faq-row, .qr-faq-chip, .qr-faq-chip img,
  .qr-topbar-link, .qr-save-how, .qr-reco-answers, .qr-help a, .qr-inc, .qr-inc img {
    transition-duration: 0.01ms;
  }
  /* keep every colour/state change, drop the movement and the light */
  .qr-card-n:hover, .qr-card-1:hover,
  .qr-cta-dark:hover, .qr-cta-ghost:hover,
  .qr-count-btn:hover, .qr-fab:hover, .qr-faq-row:hover { transform: none; }
  .qr-cta:hover .qr-cta-chip img,
  .qr-cta:active .qr-cta-chip img,
  .qr-restart:hover .qr-restart-chip img,
  .qr-inc:hover img { transform: none; }
  .qr-cta:hover::before { animation: none; }
}

/* copy and marks that exist on only one of the two frames.  NOTE: putting the
   two variants of .qr-blurb in spans makes the word splitter treat the blurb as
   ONE `.rv-el` token instead of per-word — the reveal still runs, just as a
   single fade.  That is the documented behaviour for an element child of a
   `words` target, not a bug. */
.qr-m-only { display: none; }
.qr-blurb-m { display: none; }
.qr-tab-check { display: none; }

/* ==========================================================================
   MOBILE — M10 "Get a qoute" 7064:2906, canvas 428x5424
   ==========================================================================
   Unlike /quote, this frame is a LONG SCROLLING PAGE, so there is deliberately
   NO height-bound root scale here: base.css's `calc(100vw / 26.75)` below 768
   already makes 1rem == 1 Figma mobile px on the 428 canvas, and the page is
   free to run to its own 5424.

   The two-pane shell dissolves. The rail's white card is gone entirely and its
   contents become page furniture — logo (20,40), "Restart quote" (247,46) and
   the recommendation panel (20,180) — with the 3-cell tab stepper landing
   BETWEEN them at y132 even though it lives in the other pane. That is why
   .qr-side becomes an absolute header layer and .qr-tabs is pulled out of
   .qr-main's flow: the two panes have to interleave.

   Dropped on this frame: the dashed rule, the Trustpilot row, the help line,
   the FAB, and the FAQ block's contact card + reviews row — none has a node in
   M10.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* the frame's own 20 bottom gutter — the footer ends at 5404 and the frame is
     5424, mirroring the 20 down each side */
  .qr-shell {
    display: block;
    padding: 0 0 1.25rem;
  }

  /* The header sits IN FLOW, not as an absolute layer, so that expanding the
     recommendation panel pushes everything below it down instead of covering it
     (user: "jb expand ho to overlap na kre nichle content se").  Its 180 of top
     padding is the band the logo, the restart pill and the stepper are pinned
     into — none of those ever moves — and the panel itself is a flow child, so
     .qr-side's height IS 180 + the panel. */
  .qr-side {
    position: relative;
    top: auto;                             /* the desktop sticky offset would
                                              otherwise shift the whole header 40 */
    width: auto;
    height: auto;
    min-height: 0;
    flex: none;
    padding: 11.25rem 0 0;                 /* 180 */
    background: none;
    border-radius: 0;
  }
  /* static, so .qr-side-card's absolute children resolve against .qr-side */
  .qr-side-card {
    position: static;
    height: auto;
    background: none;
    border-radius: 0;
  }
  .qr-logo { left: 1.25rem; top: 2.5rem; } /* image 141 @20,40 117x60 */

  /* Frame 113 7064:2909 @247,46 161x48 — chip 40x40 at y4, label at x48 */
  .qr-restart {
    left: 15.4375rem; top: 2.875rem;       /* 247,46 */
    width: 10.0625rem; height: 3rem;       /* 161x48 */
  }

  /* Frame 1707481526 7064:2916 @20,180 388x183 — same lime->#869435 gradient
     ring, same 20 padding; only the box changes.  Its copy is Figma's own
     truncation: one two-line paragraph ending in a literal "......", then Form
     Answers at y54 and the counter at y115.  The 1920 frame's other two
     paragraphs simply do not fit 183. */
  .qr-reco {
    position: static;                      /* a flow child — see .qr-side */
    margin: 0 1.25rem;                     /* the 20 gutter -> 388 wide */
    width: auto;                           /* undoes the 1920 frame's 356 */
    height: 11.4375rem;                    /* 183 */
  }
  /* THE DOTS ARE THE CONTROL (user: "dots k click pe box expand o jay a to sara
     content sow krne k liye").  Because the header is in flow, opening simply
     grows .qr-side and the top bar, the cards, the FAQ and the footer all move
     down with it. */
  .qr-reco-more {
    padding: 0; border: 0; background: none; appearance: none;
    font: inherit; color: inherit; cursor: pointer;
    letter-spacing: inherit;
    text-decoration: underline;
    text-underline-offset: 0.125rem;
  }
  .qr-reco.is-open { height: auto; }
  .qr-reco.is-open p.qr-d-only { display: block; }
  .qr-reco.is-open span.qr-d-only { display: inline; }
  .qr-reco.is-open .qr-reco-more { display: none; }
  /* NOTE, because the obvious worry here turns out to be unfounded: the two
     hidden paragraphs ARE `words` reveal targets, and a target that never
     intersects would open at opacity 0.001 — the trap .qr-faq-a and §3's
     off-stage cards document.  Measured after opening, every word carries
     `rv-in` and a running `rv-word` animation, so MotionLayer reveals them
     correctly even while their paragraph is display:none.  An opt-out rule was
     written for this and removed again as dead weight.  (In the browser pane
     they still read 0.001 — animations freeze at t=0 there.) */

  /* no node for these on M10 */
  .qr-rule,
  .qr-trust,
  .qr-help,
  .qr-fab,
  .qr-contact,
  .qr-reviews { display: none; }

  /* --- the stepper — three 40x28 pills @20/194/368, y132 -----------------
     Pulled out of .qr-main's flow and positioned against .qr-shell so it can
     sit between the restart pill and the recommendation panel.  The cells
     become the wizard's own pill vocabulary: 7064:2934 is solid #111111 with
     a lime check, 7064:2938 is #f5f6f0 with a 1px INSIDE #111 stroke, and
     7064:2939 is plain #f5f6f0. */
  .qr-tabs {
    position: absolute;
    left: 1.25rem; top: 8.25rem;           /* 20,132 */
    width: 24.25rem;                       /* 388 */
    height: 1.75rem;                       /* 28 */
    margin: 0;
    padding: 0;
    gap: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    justify-content: space-between;        /* 20 / 194 / 368 on a 174 pitch */
  }
  .qr-tab {
    position: relative;
    flex: none;
    width: 2.5rem; height: 1.75rem;        /* 40x28 */
    padding: 0;
    border-radius: var(--radius-sm);       /* 8 */
    gap: 0;
  }
  .qr-tab-label,
  .qr-tab-num { display: none; }
  .qr-tab-chip {
    position: absolute; inset: 0;
    width: auto; height: auto;
    border-radius: inherit;
    background: none;
    display: grid; place-items: center;
  }
  .qr-tab-on { background: var(--ink); box-shadow: none; }
  .qr-tab-on .qr-tab-chip { background: none; }
  .qr-tab-check {
    display: block;
    width: 1.5rem; height: 1.5rem;         /* the 24x24 glyph frame @8,2 */
  }
  /* cell 2 is the current one, cell 3 still ahead */
  .qr-tab-off { background: var(--qr-chip, #f5f6f0); box-shadow: none; }
  .qr-tab-off .qr-tab-chip { background: none; }
  .qr-tab:nth-child(2) { box-shadow: inset 0 0 0 0.0625rem var(--ink); }

  /* Vector 8 @39,146 175 long ink and Vector 9 @214,146 178 long @.08, with
     the opaque pills painted over them — so, exactly as on /quote, only the
     two 134-wide gaps are ever seen.  Per-gap is pixel-identical. */
  .qr-tab:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 2.5rem;                          /* the pill's right edge */
    top: 0.8125rem;                        /* (28 - 2) / 2 */
    width: 8.375rem;                       /* 194 - 60 */
    height: 0.125rem;                      /* weight 2 */
    background: rgba(17, 17, 17, 0.08);
  }
  .qr-tab:first-child::after { background: var(--ink); }

  /* --- main column ------------------------------------------------------
     .qr-side ends at 363 (180 + the 183 panel), so a 32 pad puts the top bar on
     Figma's 395 — and it stays 32 below the panel however tall the panel gets. */
  .qr-main { padding-top: 2rem; }          /* 395 - 363 */

  /* Frame 1707481534 7064:2940 @20,395 388x48 — left-aligned now, and the
     heading is authored 118 wide so it wraps to two lines. */
  .qr-topbar {
    width: auto;
    margin: 0 1.25rem;                     /* the 20 gutter */
    gap: 1.5rem;                           /* 142 - 118 = 293 - 269 = 24 */
  }
  .qr-topbar h1 {
    width: 7.375rem;                       /* 118 */
    font-size: 1.25rem;                    /* 20 */
    line-height: 1.525rem;                 /* 24.4 */
    white-space: normal;
  }
  /* THE LINK GOES TO THE EDGE. The heading is authored 118 wide and the row's
     gap put the link immediately after it, so on the 388 track it floated in
     the middle of the row with the gutter empty to its right. `auto` sends it
     to the right margin, where it pairs with the heading across the row
     instead of trailing it. */
  .qr-topbar .qr-topbar-link { margin-left: auto; }
  .qr-m-only { display: inline; }
  .qr-d-only { display: none; }

  /* --- package cards — 388x805 r36 on an 821 pitch ---------------------- */
  .qr-cards {
    margin: 1rem 1.25rem 0;                /* 459 - 443 = 16, in the 20 gutter */
    gap: 1rem;                             /* 1280 - 459 - 805 */
  }
  .qr-card {
    height: 50.3125rem;                    /* 805 */
    border-radius: 2.25rem;                /* 36 — unchanged */
  }
  /* GROUP "Group 26" @39,24 — its four slots are byte-identical to the 1920
     frame's, so only the group's own origin moves (desktop has it at 32,40). */
  .qr-art { left: 2.4375rem; top: 1.5rem; }

  /* Frame 1707481538 @65,280 258x27 — the savings row */
  .qr-save { left: 4.0625rem; top: 17.5rem; }

  /* Frame 1707481531 @12,323 364x470 r24 */
  .qr-panel {
    left: 0.75rem; top: 20.1875rem;        /* 12,323 */
    width: 22.75rem; height: 29.375rem;    /* 364x470 */
  }
  .qr-pkg-h {
    left: 1.5rem; top: 1.25rem;            /* 24,20 */
    width: 19.75rem;                       /* 316 */
    font-size: 1.5rem;                     /* 24 */
    line-height: 2rem;                     /* 32 */
  }
  /* Frame 1707481533 @24,96 — ONE bullet survives on this frame */
  .qr-specs {
    left: 1.5rem; top: 6rem;               /* 24,96 */
    gap: 0;
  }
  .qr-specs li { display: none; }
  .qr-specs li.qr-spec-m { display: flex; }
  /* Frame 1707481532 @24,132 279x32 */
  .qr-inc {
    left: 1.5rem; top: 8.25rem;            /* 24,132 */
    width: 17.4375rem;                     /* 279 */
  }
  /* Frame 1707481535 @24,188 316x182 r12.
     `overflow: visible` is load-bearing here: the CTA is nested inside this box
     in the markup but belongs to the panel 202 further down, and Figma's own
     `clipsContent` on this frame was cutting it away entirely — the button
     measured at its right place and still did not paint. */
  .qr-price {
    left: 1.5rem; top: 11.75rem;           /* 24,188 */
    width: 19.75rem; height: 11.375rem;    /* 316x182 */
    overflow: visible;
  }
  .qr-quote { left: 1rem; top: 1rem; }     /* 16,16 24x24 */
  .qr-blurb {
    left: 3rem; top: 1rem;                 /* 48,16 */
    width: 15.75rem;                       /* 252 */
  }
  /* the two lime hairlines: Vector 11 @0,92 316 wide and Vector 10 @158,92
     90 tall — both weight 2 and centred on their own 0-thickness node */
  .qr-rule-h { left: 0; top: 5.6875rem; width: 19.75rem; }         /* 91, 316 */
  .qr-rule-v { left: 9.8125rem; top: 5.75rem; height: 5.625rem; }  /* 157, 92, 90 */
  .qr-cap-1 { left: 1.6875rem; top: 6.75rem; }   /* 27,108 */
  .qr-cap-2 { left: 11.125rem; top: 6.75rem; }   /* 178,108 */
  .qr-val-1 { left: 2.0625rem; top: 8.375rem; }  /* 33,134 */
  .qr-val-2 { left: 12.25rem; top: 8.375rem; }   /* 196,134 */
  /* Link - Solid Black @24,390 316x60 — panel-relative, but the markup nests
     it inside .qr-price, which is itself positioned, so its offsets resolve
     against the price box at (24,188).  Hence 0 / 202, not 24 / 390: getting
     this wrong parks the button 188 below the panel, where it reads as simply
     missing. */
  .qr-cta {
    left: 0; top: 12.625rem;               /* panel-rel 24,390 */
    width: 19.75rem;                       /* 316 */
    height: 3.75rem;                       /* 60 */
    padding: 0.625rem 0.625rem 0.625rem 1rem;   /* [10,10,10,16] */
  }
  /* the chip is 40x40 here, not the 1920 frame's 32, and the 10 padding puts it
     on Figma's own x266 — 12 left of where the smaller chip sat (user: "arrow
     wale box ko … minor sa left ko kro").  Its 28 arrow is unchanged. */
  .qr-cta-chip { width: 2.5rem; height: 2.5rem; }        /* Arrow Icon Wrapper 7064:2979 */
  .qr-cta-label {
    font-size: 1.25rem;                    /* 20 */
    line-height: 1.625rem;                 /* 26 */
  }
  /* the blurb slot is 16..91, i.e. 75 — three lines of 19.52.  Every card's
     1920 copy runs to four, so on this frame each drops its trailing clause;
     card 1's shortened text is Figma's own mobile string (7064:2972) verbatim,
     cards 2 and 3 are trimmed the same way (Figma repeats card 1's string on
     all three, the duplicate-and-edit slip §4 mobile already documents, so
     their own wording is kept rather than that repeat). */
  .qr-blurb-d { display: none; }
  .qr-blurb-m { display: inline; }

  /* --- FAQ ---------------------------------------------------------------
     The block stops being a two-column row: the heading and sub go full width
     and centred, and the nine rows follow. */
  .qr-faq {
    display: block;
    width: auto;
    margin: 2.5rem 1.25rem 0;              /* cards end 2906 -> heading 2946 */
  }
  .qr-faq-h {
    width: 21.25rem;                       /* TEXT 7064:3076 @44,2946 340x112 */
    margin: 0 auto;
    font-size: 3rem;                       /* 48, not the 1920 frame's 52 */
    line-height: 3.5rem;                   /* 56 */
    letter-spacing: -0.08rem;              /* -1.28 — the 1920 heading is the
                                              one with letterSpacing 0 */
    text-align: center;
  }
  .qr-faq-sub {
    width: auto;                           /* TEXT 7064:3077 @20,3066 388x128 */
    margin: 0.5rem 0 0;                    /* 3066 - 2946 - 112 = 8 */
    font-size: 1.5rem;                     /* 24 */
    line-height: 2rem;                     /* 32 */
    text-align: center;
  }
  /* Frame 101 7064:3078 @20,3234 388x860 — nine 364x84 rows on a 94 pitch */
  .qr-faqs {
    width: auto;
    margin-top: 2.5rem;                    /* 3234 - 3066 - 128 = 40 */
    padding: 0.75rem;                      /* 12 */
    gap: 0.625rem;                         /* 94 - 84 */
  }
  .qr-faq-q {
    font-size: 1.25rem;                    /* 20 */
    line-height: 1.6rem;                   /* 25.6 */
  }
  /* the row grows from 72 to Figma's 84 because the question wraps to two
     lines here: 364 - 24 - 16 - 40 - 10 leaves it exactly the 274 the file
     authors, so 16 + 52 + 16 = 84.  `height: auto` with an 84 floor, rather
     than a fixed height, so a longer question can still grow. */
  .qr-faq-btn { height: auto; min-height: 5.25rem; }

  /* --- footer ------------------------------------------------------------
     Frame 1707481505 @20,4114 388x1290, card 364x1196, legal bar 364x60. */
  /* Frame 1707481505 @20,4114 388x1290.  The 12 padding + 10 gap it already
     has reproduce the card at (12,12) and the legal bar at (12,1218) by
     themselves — 12 + 1196 + 10 = 1218 — so only the card's height moves. */
  .qr-footer {
    width: auto;
    margin: 1.25rem 1.25rem 0;             /* FAQ ends 4094 -> footer 4114 */
  }
  .qr-ftr-card { height: 74.75rem; }       /* 1196 */
  .qr-ftr-logo { left: 1.25rem; top: 1.25rem; }        /* image 141 @20,20 */
  .qr-ftr-social {
    left: 13rem; top: 1.875rem;            /* Frame 103 @208,30 */
    gap: 0.5rem;                           /* 256 - 208 - 40 */
  }
  .qr-ftr-blurb {
    left: 1.25rem; top: 6rem;              /* 20,96 */
    width: 20.25rem;                       /* 324 */
  }
  /* the three columns stop being a 3-up grid and stack on Figma's own 336
     pitch (208 / 544 / 880), each 296 tall — heading 32 + 20 + list 244 */
  .qr-ftr-nav {
    left: 1.25rem; top: 13rem;             /* 20,208 */
    right: auto;
    width: 20.25rem;                       /* 324 */
    display: flex;
    flex-direction: column;
    gap: 2.5rem;                           /* 336 pitch - the 296 column */
  }
  /* 24/31.92 here, not the 1920 frame's 20/26.6 — which is what makes each
     column exactly Figma's 296 (32 heading + 20 + a 244 list) */
  .qr-ftr-navh {
    font-size: 1.5rem;                     /* 24 */
    line-height: 1.995rem;                 /* 31.92 */
  }
  /* each item becomes a 324x34 #f5f6f0 pill with the shared arrow at x286 —
     the homepage footer's own recipe, where a 26px arrow.svg reproduces
     Figma's Arrow Icon exactly, so no new asset and no extra markup. */
  .qr-ftr-nav ul { gap: 0.5rem; }          /* 42 pitch - the 34 row */
  .qr-ftr-nav li {
    position: relative;
    height: 2.125rem;                      /* 34 */
    display: flex;
    align-items: center;
    padding: 0 0.75rem;                    /* label at x12 */
    border-radius: var(--radius-sm);       /* 8 */
    background: var(--panel);              /* #f5f6f0 */
  }
  .qr-ftr-nav li::after {
    content: "";
    position: absolute;
    right: 0.75rem;                        /* 324 - 286 - 26 = 12 */
    width: 1.625rem; height: 1.625rem;     /* 26x26 */
    background: url("/assets/img/arrow.svg") center / contain no-repeat;
    opacity: 0.4;                          /* the vector's own stroke alpha */
  }
}