/* ==========================================================================
   /quote/customize — FRAME "Quote customize" 7064:1327, 1920x2589.
   Built same-to-same from the LIVE Figma file R4YlVFqXtGfx3rlvWSMro8.

   Linked FROM app/quote/customize/page.tsx, AFTER quote-results.css.  This
   page wears the `.qr` shell wholesale — the marble, the rail, the stepper,
   the FAQ block and the footer are all quote-results.css's, and they land on
   Figma's own y1240 / y2112 with no offset because both screens put the same
   120 gap above them.  Only what is new to D17 lives here, plus the handful of
   rail rules D17 changes; everything is namespaced `.qc-`, and the few `.qr-`
   selectors below are scoped under `.qc` so /quote/results is untouched.

   Every length is rem = figma_px / 16.  Never write px here.
   ========================================================================== */

/* ==========================================================================
   LEFT RAIL — Frame 101 @40,40 460x930, same box, different contents
   ==========================================================================
   D10's rail carries a "Restart quote" pill and a recommendation panel; D17's
   carries a "Back to results" pill and the chosen package.  The shell, the
   logo and the sticky behaviour are quote-results.css's and unchanged. */

/* Frame 113 @228,46 168x48 — card-relative, so 228 - 12 = 216 and 46 - 12 = 34 */
/* VERTICALLY CENTRED ON THE LOGO (user, 2026-08-07: "button ko logo k center
   align kro customize page pr"), the same deviation D18 already carries.  The
   logo is 117x60 at card-rel 40,40, so its centre is y70; Figma puts this
   48-tall row at y34, i.e. centred on y58 — 12 high.  46 lands the row's centre
   on the logo's exactly.  Figma's own x is kept. */
.qc-back {
  position: absolute;
  left: 13.5rem;                                    /* 216 */
  top: 2.875rem;                                    /* 46 = 70 - 48/2 */
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 3rem;                                     /* 48 */
}
.qc-back-chip {
  flex: none;
  width: 2.5rem;                                    /* 40 */
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);                         /* #f5f6f0 */
  border-radius: var(--radius-sm);
}
/* the shared arrow vector under Figma's 180deg wrapper rotation */
.qc-back-chip img { width: 1.75rem; height: 1.75rem; transform: scaleX(-1); }
.qc-back-label {
  font-family: var(--font-ui);                      /* Geist-SemiBold */
  font-weight: 600;
  font-size: 1.0625rem;                             /* 17 */
  line-height: 1.38125rem;                          /* 22.1 */
  letter-spacing: -0.01rem;
  color: var(--ink);
  white-space: nowrap;
}

/* Frame 1707481526 @40,140 356x392 — card-relative 28,128.  Its stroke is a
   GRADIENT_LINEAR top->bottom, #e2fa5a -> #869435 at weight 2 INSIDE, so it is
   a masked ::after ring rather than a border — the same recipe card 1 uses on
   the results page, and for the same reason (a real border would shift every
   absolutely-positioned child in by the border width).

   DEVIATION (user, 2026-08-07): the card is CENTRED in the rail, not on Figma's
   own x.  Figma puts it at card-relative 28 in a 436-wide rail card, i.e. 28
   left against 52 right — visibly left-heavy, which is what the user flagged.
   `left/right: 0` + `margin-inline: auto` centres it on 40/40 without a magic
   number, so it cannot drift if the rail width ever changes.  The card's own
   356x392 and every child offset inside it are untouched. */
.qc-pkg {
  position: absolute;
  left: 0;
  right: 0;
  margin-inline: auto;                              /* (436 - 356) / 2 = 40 */
  top: 8rem;                                        /* 128 */
  width: 22.25rem;                                  /* 356 */
  height: 24.5rem;                                  /* 392 */
  background: var(--bg);                            /* #fefff9 */
  border-radius: var(--radius);
}
.qc-pkg::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 0.125rem;                                /* weight 2 */
  pointer-events: none;
  background: linear-gradient(to bottom, #e2fa5a 0%, #869435 100%);
  -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;
}
/* Group 26 @20,20 — the same four images and the same offsets as the results
   page's own product art, so the sizes below are D10's numbers exactly. */
.qc-pkg-art { position: absolute; left: 1.25rem; top: 1.25rem; }
.qc-pkg-art img { position: absolute; max-width: none; object-fit: contain; }
.qc-im-panels  { left: 0;          top: 2.5rem;   width: 12rem;     height: 12rem; }     /* @0,40   192x192 */
.qc-im-longi   { left: 4.3125rem;  top: 0;        width: 3.375rem;  height: 1.25rem; }   /* @69,0    54x20  */
.qc-im-siglogo { left: 12.125rem;  top: 3rem;     width: 5.6875rem; height: 2.25rem; }   /* @194,48  91x36  */
.qc-im-batt    { left: 10.5625rem; top: 5.75rem;  width: 8.75rem;   height: 8.75rem; }   /* @169,92 140x140 */

.qc-pkg-h {
  position: absolute;
  left: 1.25rem;
  top: 17rem;                                       /* 272 */
  width: 19.5rem;                                   /* 312 — the authored wrap width */
  margin: 0;
  font-family: var(--font-display);                 /* HostGrotesk-Medium */
  font-weight: 500;
  font-size: 1.25rem;                               /* 20 */
  line-height: 1.75rem;                             /* 28 */
  letter-spacing: -0.08rem;
  color: rgba(17, 17, 17, 0.92);
}
/* Frame 1707481532 @20,340 279x32, padding [6,8,6,8], gap 4 */
.qc-pkg-inc {
  position: absolute;
  left: 1.25rem;
  top: 21.25rem;                                    /* 340 */
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  background: rgba(17, 17, 17, 0.06);
}
.qc-pkg-inc-t {
  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;
}
.qc-pkg-inc img { width: 1.25rem; height: 1.25rem; }

/* Frame 15 @20,790 225x24 and the help line @20,834 — both card-relative
   8,778 and 8,822.  The two Trustpilot crops are quote-results.css's.

   BOTTOM-ANCHORED, and ALIGNED TO THE CHOOSE PAGE (user, 2026-08-07, with a
   side-by-side of D10 and D17: "us ko 1st image ki trah align kro like left
   bottom right margins line or content main margin").  So the whole cluster —
   the rule, the Trustpilot mark, the help line and the FAB — now sits on
   /quote/results' own y's, which is also what D18 does:

     rule 758 (bottom 146) · trust 790 (92) · help 834 (48) · FAB 826 (40),
     left 20 for both texts, and the FAB's 20 RIGHT inset,

   i.e. exactly quote-results.css's `.qr-rule` / `.qr-trust` / `.qr-help` /
   `.qr-fab`.  This supersedes the earlier pass that pushed the group left 33
   and down +12; the two screens read as one rail again, and the rule -> mark
   gap is back to Figma's own 32.

   They stay anchored from the BOTTOM rather than placed at Figma's y: the rail
   is `height: min(58.125rem, calc(100vh - 5rem))`, so below a 1010-tall window
   the card shrinks and a top-anchored cluster would float mid-card — the same
   reason quote-results.css bottom-anchors its copies.  At exactly 930 the two
   forms are identical. */
/* The rail's footer rule (user, 2026-08-07: "is k uper border do like choose
   screen").  D17 is the ONLY screen in the stack that omits it: D10 and D18
   both carry `VECTOR "Vector 8" rel(0,758) 436x0` — byte-identical nodes, same
   [8,8] dashes, same transparent -> #e2fa5a @52.4038% -> transparent gradient
   stroke — and the choose screen draws the same thing as .qz-rule-bot.  So this
   is D17's own slip, the same class as the LONGi-on-all-three-cards one, and
   the paint is reused from quote-results.css's `.qr-rule` rather than rewritten.

   Full-bleed 0..436 while the cluster below is inset 20 — exactly how D10
   pairs its rule with .qr-trust, and it needs no override at all now that D17
   is on D10's y's: `.qr-rule`'s own `bottom: 146` is Figma's 758. */
.qc-rule { top: auto; }

.qc-trust {
  position: absolute;
  left: 1.25rem;                                    /* 20 — D10's own inset */
  top: auto;
  bottom: 5.75rem;                                  /* 906 - 790 - 24 */
  display: flex;
  align-items: center;
  gap: 0.375rem;                                    /* 6 */
}
.qc-help {
  position: absolute;
  left: 1.25rem;                                    /* 20 */
  top: auto;
  bottom: 3rem;                                     /* 906 - 834 - 24 */
  margin: 0;
  white-space: pre;                                 /* Figma's own triple spaces */
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.25rem;                               /* 20 */
  line-height: 1.525rem;                            /* 24.4 */
  letter-spacing: -0.08rem;
  color: var(--ink-70);
}
.qc-help a { color: var(--ink); text-decoration: underline; }
/* the word splitter makes .rv-w an inline-block, and a text decoration is not
   painted across an atomic inline — see CLAUDE.md.  These links are element
   children of a words target, so they are kept whole and are safe; the rule is
   here only so a future spec change cannot silently erase them. */
.qc-help a .rv-w {
  text-decoration-line: underline;
  text-decoration-color: inherit;
}
/* Frame 103 @376,826 40x40 — D10's own box, so the 20 right inset mirrors the
   20 left the two texts carry. */
.qc-fab {
  position: absolute;
  left: 23.5rem;                                    /* 376 -> 20 from the right */
  top: auto;
  bottom: 2.5rem;                                   /* 906 - 826 - 40 */
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #00ab55;
  border-radius: var(--radius-sm);
}
.qc-fab img { width: 1.5rem; height: 1.5rem; }

/* ==========================================================================
   STEPPER — stage 2, so tab 2 is filled too
   ==========================================================================
   D10 is .12 / .04 / .04; D17 is .12 / .12 / .04.  What separates cell 1 from
   cell 2 is the CHIP: 7064:1563 is a SOLID #111111 r8 box holding 7064:1566, a
   #e2fa5a weight-2 check, while cell 2's 7064:1570 is #111 @.12 and empty.

   The check was documented here from the start but never actually rendered —
   `.qr-tab-on` alone gives the flat @.12 chip, so both cells looked identical
   and the stepper never said "step 1 is done" (user, 2026-08-07: "customize pe
   1st tick k sath aana jese submit screen pe aya … pehla step complete abi
   user second pe hai").  The recipe is quote-submit.css's `.qb-tab-done`
   verbatim, down to the asset: flow-check-white.svg's name lies, its path is
   stroked #E2FA5A and is this exact node. */
.qc .qc-tab-done .qr-tab-chip {
  background: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.qc .qc-tab-done .qr-tab-chip img { width: 1.25rem; height: 1.25rem; }  /* the 20x20 inner frame */
.qc .qc-tab-now .qr-tab-chip { background: rgba(17, 17, 17, 0.12); }

/* ==========================================================================
   Frame 1707481534 @1080.5,112 259x44 — the Save / Continue row
   ==========================================================================
   The lime DROP_SHADOW (#e2fa5a a0.48 radius 40 offset 0,2) is on the ROW, not
   on the button, so it haloes both — reproduced with a filter rather than a
   box-shadow, which would draw a rectangle round the row's own box. */
.qc-topbar {
  width: max-content;
  margin: 1.5rem auto 0;                            /* tabs end y88 -> row at y112 */
  display: flex;
  align-items: center;
  gap: 1.5rem;                                      /* 24 */
  filter: drop-shadow(0 0.125rem 2.5rem rgba(226, 250, 90, 0.48));
}
.qc-save {
  font-family: var(--font-sans);
  font-weight: 500;                                 /* InstrumentSans-Medium */
  font-size: 1rem;
  line-height: 1.22rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.125rem;
}
/* It is a `words` reveal target now, and `html.rv-on .rv-w { display:
   inline-block }` — a text decoration is not painted across an atomic inline,
   so without this the underline survives only in the spaces between the words.
   `inherit` rather than literals so the :hover thickening below flows through.
   Same rule, same reason, as quote-results.css's `.qr-topbar-link .rv-w`. */
.qc-save .rv-w {
  text-decoration-line: underline;
  text-decoration-thickness: inherit;
  text-underline-offset: inherit;
  text-decoration-color: inherit;
}
/* The d/m pair for the four things the 428 frame changes structurally — the
   rail's pill, the CTA's label, and add-on row 4.  Mobile-only elements are
   hidden here; desktop-only ones are hidden in the media block at the end,
   which is why only ONE of the two directions lives out here.  `.qc-m-only`
   beats quote-results.css's own `.qr-restart { display: flex }` on load order,
   not specificity — this sheet is linked second. */
.qc-m-only { display: none; }
/* the third box the 428 CTA needs; above 768 it must not exist at all, so the
   label and the chip stay direct flex items of the anchor */
.qc-cta-in { display: contents; }

/* "Link - Solid Black" 7064:1553 — the layer name lies again: it is #00b779,
   the one non-lime, non-ink button in the whole design.  Its chip is WHITE. */
.qc-continue {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 8.75rem;                                   /* 140 */
  height: 2.75rem;                                  /* 44 */
  padding: 0.375rem 0.375rem 0.375rem 1rem;         /* [6,6,6,16] */
  gap: 0.624375rem;                                 /* 9.99 */
  border-radius: var(--radius);
  background: #00b779;
  position: relative;                               /* anchors the sheen band */
  overflow: hidden;                                 /* and clips it */
}
.qc-continue-t {
  font-family: var(--font-ui);                      /* Geist-SemiBold */
  font-weight: 600;
  font-size: 1.0625rem;                             /* 17 */
  line-height: 1.38125rem;                          /* 22.1 */
  letter-spacing: -0.01rem;
  color: var(--white);
}
.qc-continue-chip {
  flex: none;
  width: 2rem;                                      /* 32 */
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  border-radius: var(--radius-sm);
}
.qc-continue-chip img { width: 1.75rem; height: 1.75rem; }

/* ==========================================================================
   THE FOUR ADD-ON ROWS — Frames 1707481540..543 @540, y 196/432/668/904
   ==========================================================================
   1340x216 each on a 236 pitch, so the gap is 20 — the same gap the results
   page's package cards use. */
.qc-rows {
  margin-top: 2.5rem;                               /* top bar ends y156 -> row 1 at y196 */
  display: flex;
  flex-direction: column;
  gap: 1.25rem;                                     /* 236 - 216 */
}
.qc-row {
  position: relative;
  height: 13.5rem;                                  /* 216 */
  background: var(--white);
  border-radius: 2.25rem;                           /* 36 */
  box-shadow:
    0 0.125rem 2.5rem rgba(0, 0, 0, 0.08),          /* DROP_SHADOW #000 a.08 r40 0,2 */
    inset 0 0 0 0.125rem rgba(17, 17, 17, 0.06);    /* stroke #111 @.06 weight 2 INSIDE */
  overflow: hidden;                                 /* clipsContent */
}
/* every photo has its own box, and none of them is square — Figma's numbers */
.qc-photo { position: absolute; max-width: none; object-fit: contain; }
.qc-im-1 { left: 3.75rem;  top: 2rem;    width: 5.75rem;   height: 9.5rem; }    /* @60,32 92x152 */
.qc-im-2 { left: 1.0625rem; top: 1.25rem; width: 11.0625rem; height: 11.0625rem; } /* @17,20 177x177 */
.qc-im-3 { left: 1.125rem;  top: 1.25rem; width: 11rem;     height: 11rem; }    /* @18,20 176x176 */
.qc-im-4 { left: 1.1875rem; top: 1.25rem; width: 11rem;     height: 11rem; }    /* @19,20 176x176 */

/* Frame 1707481531 @212,20 820x176 r24, inside a 1052 card — i.e. 212 in from
   the left and 20 in from the RIGHT.

   The 1108 stated here was measured against a wider canvas and, being a fixed
   width, it stopped agreeing with the card the moment the card was not 1340:
   the panel ran past the card's right edge instead of stopping 20 inside it.
   Anchoring both edges states the design's actual intent — 212 and 20 — and
   resolves to Figma's own 820 on a 1052 card at any container width. */
.qc-panel {
  position: absolute;
  left: 13.25rem;                                   /* 212 */
  right: 1.25rem;                                   /* 20 -> 820 on a 1052 card */
  top: 1.25rem;
  width: auto;
  height: 11rem;                                    /* 176 */
  background: rgba(17, 17, 17, 0.04);
  border-radius: 1.5rem;                            /* 24 */
  overflow: hidden;
}
.qc-panel > * { position: absolute; margin: 0; }
.qc-h {
  left: 1.5rem;
  top: 1.25rem;                                     /* 20 */
  font-family: var(--font-display);                 /* HostGrotesk-Medium */
  font-weight: 500;
  font-size: 1.5rem;                                /* 24 */
  line-height: 2rem;
  letter-spacing: -0.08rem;
  color: rgba(17, 17, 17, 0.92);
  white-space: nowrap;
}
.qc-blurb {
  left: 1.5rem;
  top: 3.75rem;                                     /* 60 */
  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;
}
/* Frame 1707481540 @24,104 — two rows on a 12 gap, each an icon + a label at
   the icon's own x24 (20 + a 4 gap) */
.qc-specs {
  left: 1.5rem;
  top: 6.5rem;                                      /* 104 */
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;                                     /* 12 */
}
/* 148 of price box + its 16 gutter + a 24 gap: the copy column ends here so a
   long product name cannot slide under the price. */
.qc-h,
.qc-blurb,
.qc-specs { right: 11.75rem; }
.qc-h,
.qc-blurb { overflow: hidden; text-overflow: ellipsis; }
.qc-specs li { display: flex; align-items: center; gap: 0.25rem; height: 1.25rem; }
.qc-specs img { flex: none; width: 1.25rem; height: 1.25rem; }
.qc-spec-t {
  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;
}

/* Frame 1707481535 @944,16 148x144 — 16 in from the panel's RIGHT edge, which
   is what 944 means in an 1108 panel and what it has to keep meaning now the
   panel is anchored rather than fixed. A left of 944 would leave it hanging
   past an 820 panel entirely. */
.qc-price {
  left: auto;
  right: 1rem;                                      /* 16 */
  top: 1rem;                                        /* 16 */
  width: 9.25rem;                                   /* 148 */
  height: 9rem;                                     /* 144 */
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
}
.qc-price > * { position: absolute; }
.qc-price-cap {
  left: 3.4375rem;                                  /* 55 */
  top: 0.875rem;                                    /* 14 */
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.22rem;
  letter-spacing: -0.01rem;
  color: var(--ink-70);
}
.qc-price-val {
  left: 2.8125rem;                                  /* 45 */
  top: 2.5rem;                                      /* 40 */
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;                                /* 24 */
  line-height: 2rem;
  letter-spacing: -0.08rem;
  color: var(--ink);
}
/* "Link - Solid Black" @16,84 116x44, padding [6,6,6,16], gap 9.99 */
.qc-add {
  left: 1rem;
  top: 5.25rem;                                     /* 84 */
  width: 7.25rem;                                   /* 116 */
  height: 2.75rem;                                  /* 44 */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.375rem 0.375rem 0.375rem 1rem;
  gap: 0.624375rem;
  border-radius: var(--radius);
  background: var(--ink);
  overflow: hidden;                                 /* clips the sheen band;
                                                       Figma marks this node
                                                       `clip` in any case */
}
.qc-add-t {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 1.0625rem;                             /* 17 */
  line-height: 1.38125rem;                          /* 22.1 */
  letter-spacing: -0.01rem;
  color: var(--white);
}
.qc-add-chip {
  flex: none;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  border-radius: var(--radius-sm);
}
.qc-add-chip img { width: 1.75rem; height: 1.75rem; }

/* ==========================================================================
   INTERACTION LAYER
   ==========================================================================
   Figma authors no hover on D17 at all, so everything here is the homepage
   vocabulary the standing instruction asks for, held to the same four
   invariants: the resting render is untouched, no hover changes the box model,
   nothing inert gets a button hover, and there is a reduced-motion block. */
.qc-row {
  transition:
    transform var(--dur-hover) var(--ease-premium),
    box-shadow var(--dur-hover) var(--ease-premium);
}
/* `transform`, never `translate` — the reveal layer owns `translate` here */
.qc-row:hover {
  transform: translateY(-0.1875rem);
  box-shadow:
    0 0.125rem 2.5rem rgba(0, 0, 0, 0.12),
    inset 0 0 0 0.125rem rgba(17, 17, 17, 0.16);
}

.qc-add,
.qc-continue,
.qc-back {
  transition:
    background var(--dur-hover) var(--ease-premium),
    box-shadow var(--dur-hover) var(--ease-premium),
    transform var(--dur-hover) var(--ease-premium);
}
.qc-add-chip,
.qc-continue-chip,
.qc-back-chip { transition: box-shadow var(--dur-hover) var(--ease-premium); }
.qc-add-chip img,
.qc-continue-chip img,
.qc-back-chip img { transition: transform var(--dur-hover) var(--ease-premium); }

/* THE SPECULAR SWEEP (user, 2026-08-10: "glow guzarne wala jo humne homepage pe
   baki pages pe b use kya hai") — base.css's `.btn::before` band verbatim on both
   of this page's buttons, sharing its `@keyframes btn-sheen` and its
   --dur-sheen / --ease-sheen tokens.  Third and fourth copies of the same band
   (base.css `.btn`, home-sections.css `.psh-btn`); keep all of them in sync.

   `z-index: -1` puts the light under the label, and it only resolves that way
   because `:hover` applies a `transform` and so makes the button a stacking
   context — see the note in quote-submit.css.  Both buttons also need
   `overflow: hidden` (Figma marks both nodes `clip` anyway) or the band would
   travel outside the pill. */
.qc-add::before,
.qc-continue::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);
}
.qc-add:hover::before,
.qc-continue:hover::before { animation: btn-sheen var(--dur-sheen) var(--ease-sheen) 80ms; }

.qc-add: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);
}
.qc-add:hover .qc-add-chip { box-shadow: 0 0 0 0.1875rem rgba(226, 250, 90, 0.3); }
.qc-add:hover .qc-add-chip img { transform: translateX(0.1875rem); }
.qc-add:active { transform: translateY(0); transition-duration: var(--dur-press); }

/* the green button brightens rather than darkening — an ink shadow is
   invisible on #00b779, so the shadow is green too */
/* the green button brightens rather than darkening — an ink shadow is
   invisible on #00b779, so the shadow is green too */
.qc-continue:hover {
  background: #00cc86;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.875rem 1.875rem -0.875rem rgba(0, 120, 78, 0.7);
}
.qc-continue:hover .qc-continue-chip { box-shadow: 0 0 0 0.1875rem rgba(255, 255, 255, 0.35); }
.qc-continue:hover .qc-continue-chip img { transform: translateX(0.1875rem); }
.qc-continue:active { transform: translateY(0); transition-duration: var(--dur-press); }

/* the back link leads the way it travels, i.e. LEFT — and its arrow is already
   flipped, so the nudge has to restate the flip */
.qc-back:hover .qc-back-chip { background: rgba(17, 17, 17, 0.1); }
.qc-back:hover .qc-back-chip img { transform: scaleX(-1) translateX(0.1875rem); }

.qc-pkg-inc { transition: background var(--dur-hover) var(--ease-premium); }
.qc-pkg-inc img { transition: transform var(--dur-hover) var(--ease-premium); }
.qc-pkg-inc:hover { background: rgba(17, 17, 17, 0.12); }
.qc-pkg-inc:hover img { transform: translateX(0.125rem); }

/* the WhatsApp FAB — quote-results.css's `.qr-fab` recipe verbatim (user,
   2026-08-07: "whatsapp button ka hover effect bnao jese choose screen pe bna
   howa"), so the two rails now behave alike as well as measure alike.  Like
   .qc-continue the green BRIGHTENS rather than darkening and its shadow is
   green too, because an ink shadow is invisible under a #00ab55 chip. */
.qc-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);
}
.qc-fab:hover {
  background: #00c463;
  transform: translateY(-0.125rem);
  box-shadow: 0 0.5rem 1.125rem -0.5rem rgba(0, 171, 85, 0.7);
}
.qc-fab:active { transform: translateY(0); transition-duration: var(--dur-press); }

.qc-save,
.qc-help a {
  transition:
    text-decoration-thickness var(--dur-hover) var(--ease-premium),
    text-underline-offset var(--dur-hover) var(--ease-premium);
}
.qc-save:hover,
.qc-help a:hover {
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.25rem;
}

.qc-add:focus-visible,
.qc-continue:focus-visible,
.qc-back:focus-visible,
.qc-pkg-inc:focus-visible,
.qc-save:focus-visible,
.qc-fab:focus-visible {
  outline: 0.125rem solid var(--ink);
  outline-offset: 0.1875rem;
}

@media (prefers-reduced-motion: reduce) {
  .qc-row,
  .qc-add,
  .qc-continue,
  .qc-back,
  .qc-pkg-inc,
  .qc-fab,
  .qc-save { transition-duration: 1ms; }
  .qc-row:hover,
  .qc-add:hover,
  .qc-fab:hover,
  .qc-continue:hover { transform: none; }
  .qc-add:hover .qc-add-chip img,
  .qc-continue:hover .qc-continue-chip img { transform: none; }
  /* the sweep is movement, so it goes — the colour and depth feedback stay */
  .qc-add:hover::before,
  .qc-continue:hover::before { animation: none; }
  .qc-back:hover .qc-back-chip img { transform: scaleX(-1); }
}

/* ==========================================================================
   428 — FRAME "Quote customize" 7064:3259 (M12), 428x4716
   ==========================================================================
   Spec: design-reference/wizard/spec/mobile/M12-quote-customize.md.  One
   max-width block at the end of the file, so the closed 1920 render is
   untouched by construction.

   NO ROOT SCALE — base.css's sub-768 root is calc(100vw / 26.75), i.e.
   1rem == 1 Figma mobile px at 428, so every number below is Figma's own.

   ---- MOST OF THIS SCREEN IS ALREADY BUILT --------------------------------
   This page links quote-results.css first, and that sheet's own 428 block is
   written against the SAME nodes: M12's logo (20,40), restart pill (247,46)
   161x48, three 40x28 stepper pills at 20/194/368 y132 with an ink and an
   @.08 connector, FAQ heading (44,2238) 340x112, sub (20,2358) 388x128, list
   (20,2526) 388x860 and footer (20,3406) 388x1290 are byte-identical to M10's
   — only their y differs, and every one of those blocks is in flow, so they
   land by themselves exactly as they do on 1920.  The structural mapping is
   just as lucky: M10 makes `.qr-side` a 180-tall pinned band with ONE flow
   child under it (its recommendation panel), and M12 puts the package card in
   precisely that slot.  So `.qc-pkg` needs the same three declarations
   `.qr-reco` gets, and the rail's 392-tall card lands on Figma's (20,180).

   ---- WHAT M12 ACTUALLY CHANGES -------------------------------------------
   1. THREE add-on rows, not four (see the note in QuoteCustomize.tsx), and
      each is restructured: the photo goes ABOVE a full-width panel instead of
      beside it, 388x522 with the panel at (12,216) 364x294.
   2. The row's stroke goes `#111 @.06` -> `@.16` and its radius 36 -> 12; the
      inner panel's radius 24 -> 8.
   3. The rail's "Back to results" becomes "Restart quote" -> step 1.
   4. The Save / Continue row becomes a FIXED bottom bar: `Frame 1707481571`
      @0,4592 428x124 `scroll: FIXED`, #fefff9, holding `Frame 113` @20,16
      388x84 — a #057442 block with the green DROP_SHADOW, and a #f5f6f0
      364x60 pill inside it reading "Next, submit".  No Save link at all.
   5. Trustpilot, the help line, the FAB and the dashed rule have NO node on
      this frame (grep of the spec returns zero), so all four are switched off.
      `.qr-rule` is already hidden by quote-results.css — the span carries both
      classes — but the other three are `.qc-` and are hidden below.
   ========================================================================== */
@media (max-width: 767.98px) {
  /* the d/m pair's other direction */
  .qc-d-only { display: none; }
  .qr-restart.qc-m-only { display: flex; }
  span.qc-m-only { display: inline; }

  /* no node on M12 */
  .qc-trust,
  .qc-help,
  .qc-fab,
  .qc-save { display: none; }

  /* ---- the header band --------------------------------------------------
     `Frame 1707481526` @20,180 388x392 — the same three declarations
     quote-results.css gives `.qr-reco`, because this card occupies the same
     slot: the one flow child under `.qr-side`'s 180 pinned band.  Its own 392
     height, its lime -> #869435 gradient ring and every child offset are
     already Figma's 428 values on the 1920 sheet, so nothing else moves. */
  /* `relative`, NOT `static` — and this is where `.qr-reco`'s recipe stops
     transferring.  That panel's children are in FLOW, so it can afford to be
     static; every child of THIS card is absolutely positioned, so going static
     hands them the nearest positioned ancestor instead — `.qr-side` — and the
     product art lands at (40,20) of the PAGE, straight over the logo, the
     restart pill and the stepper, while the title and the chip sit 180 high
     inside the card.  `top`/`left` must be cleared with it: the 1920 rule puts
     this card at (0,128) and `relative` would re-read both as offsets. */
  .qc-pkg {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 1.25rem;                                /* the 20 gutter -> 388 */
    width: auto;                                      /* undoes the 1920 356 */
  }
  /* GROUP "Group 26" @40,20 309x232 — the four slots inside it are byte-
     identical to the 1920 frame's, so only the group's origin moves (20 -> 40,
     which centres its 309 in 388: 40 left against 39 right). */
  .qc-pkg-art { left: 2.5rem; }

  /* ---- the stepper — stage 2 in the WIZARD's pill vocabulary ------------
     quote-results.css's 428 block turns the three cells into 40x28 pills and
     paints `.qr-tab-on` solid ink.  On D17 stage 2 fills cells 1 AND 2, so
     both carry `.qr-tab-on` and cell 2 would come out solid black — but M12
     draws 7064:3275 as #f5f6f0 with a 1px INSIDE #111 stroke, i.e. the
     wizard's "current" ring, not a filled cell.  The two existing modifier
     classes already separate them, so no new markup: `.qc-tab-done` stays ink
     and `.qc-tab-now` is put back to the ring.  Its box-shadow comes from the
     inherited `.qr-tab:nth-child(2)` rule at (0,2,0) and needs no restating. */
  .qc .qc-tab-done .qr-tab-chip img { width: 1.5rem; height: 1.5rem; }  /* the 24x24 glyph frame @8,2 */
  .qc .qc-tab-now { background: var(--qr-chip, #f5f6f0); }
  /* the 1920 rule paints a @.12 chip, and on 428 the chip is inset:0 — it
     would fill the whole cell.  7064:3275 is empty. */
  .qc .qc-tab-now .qr-tab-chip { background: none; }

  /* ---- the main column --------------------------------------------------
     `.qr-side` is 180 + the 392 card = 572, and row 1 is at 592, so the pad is
     20 — not the 32 M10 needs.  With the top bar fixed, `.qc-rows` is the
     first in-flow child. */
  .qr-main { padding-top: 1.25rem; }
  /* the fixed bar is 124 tall and flush with the viewport bottom, so without
     clearance it permanently covers the footer's legal bar.  Figma's frame has
     the same overlap (the bar is parked at 4592 while the footer runs to
     4696), but a FIXED bar means that region can never be scrolled into view —
     the identical situation the homepage's sticky quickbar hit, where the fix
     was to grow the page's bottom padding.  124 + the frame's own 20 gutter. */
  .qr-shell { padding-bottom: 9rem; }                 /* 144 */

  /* ---- the three add-on rows — 388x522 on a 542 pitch ------------------- */
  .qc-rows {
    margin: 0 1.25rem;                                /* the 20 gutter -> 388 wide */
    gap: 1.25rem;                                     /* 1134 - 592 - 522 */
  }
  /* PADDING, not a positioned panel: the row has to grow when a title wraps
     (see below), and `height: auto` + padding is the only form where the row,
     the panel and Figma's 216 photo band all follow one number.  A margin on
     the panel would collapse straight out through the row instead — it has no
     border and an inset box-shadow is not one. */
  .qc-row {
    height: auto;
    padding: 13.5rem 0.75rem 0.75rem;                 /* 216 / 12 / 12 */
    border-radius: var(--radius);                     /* 12, not the 1920 36 */
    box-shadow:
      0 0.125rem 2.5rem rgba(0, 0, 0, 0.08),          /* DROP_SHADOW #000 a.08 r40 0,2 — unchanged */
      inset 0 0 0 0.125rem rgba(17, 17, 17, 0.16);    /* stroke @.16 here, not @.06 */
  }
  /* each photo keeps its own un-square box, and all three rasters are the ones
     the 1920 rows already ship — every M12 imageref also appears on D17 */
  .qc-im-1 { left: 9.125rem;  top: 2rem;      width: 6.0625rem;  height: 10rem; }      /* image 152 @146,32  97x160 */
  .qc-im-2 { left: 6.375rem;  top: 0.5625rem; width: 11.4375rem; height: 11.4375rem; } /* image 158 @102,9  183x183 */
  .qc-im-3 { left: 6.1875rem; top: 0.8125rem; width: 11.875rem;  height: 11.875rem; }  /* image 159 @99,13  190x190 */

  /* Frame 1707481531 @12,216 364x294 — a FLOW column now, so its own height is
     Figma's 20 + 32 + 8 + 40 + 20 + 52 + 20 + 82 + 20 = 294 by arithmetic
     rather than by declaration.  That matters because the 1920 titles are kept
     (Figma repeats one title across all three mobile rows — a slip): row 1's
     fits the authored 316 on one line and measures exactly 294/522, while the
     two longer titles wrap to two lines and the row grows 32 with them
     instead of overlapping the blurb, which is what a fixed height would do. */
  .qc-panel {
    position: static;
    width: auto;
    height: auto;
    padding: 1.25rem;                                 /* 20 */
    border-radius: var(--radius-sm);                  /* 8, not the 1920 24 */
  }
  .qc-panel > * { position: static; }
  .qc-h {
    width: 19.75rem;                                  /* 316 — the authored wrap width */
    white-space: normal;
  }
  .qc-blurb {
    margin-top: 0.5rem;                               /* 60 - 20 - 32 */
    white-space: normal;                              /* 324 wide -> Figma's 2 lines */
  }
  .qc-specs { margin-top: 1.25rem; }                  /* 120 - 60 - 40 */

  /* Frame 1707481535 @20,192 324x82 — still an absolute box inside, so it has
     to keep `position: relative` after the reset above or its three children
     would resolve against the row. */
  .qc-price {
    position: relative;
    /* `left: auto; top: auto` is NOT redundant — the 1920 rule puts this box at
       (944,16) and `position: relative` turns both into OFFSETS, which slid it
       944 right and 16 down.  Any box that goes absolute -> relative in this
       file needs the same two lines. */
    left: auto;
    top: auto;
    margin-top: 1.25rem;                              /* 192 - 120 - 52 */
    width: auto;                                      /* 364 - 40 = Figma's 324 */
    height: 5.125rem;                                 /* 82 */
  }
  .qc-price-cap { left: 1rem; top: 0.75rem; }         /* @16,12 */
  .qc-price-val { left: 1rem; top: 2.375rem; }        /* @16,38 */
  .qc-add { left: 12rem; top: 1.1875rem; }            /* @192,19 — 116x44 unchanged */

  /* ---- Frame 1707481571 @0,4592 428x124, scroll: FIXED ------------------
     The lime DROP_SHADOW belongs to the 1920 row and is gone here; the green
     one on `Frame 113` replaces it, so the filter has to be cleared or the two
     would compose.  z-index because `.qc-rows` comes later in the DOM and its
     rows are positioned. */
  .qc-topbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: block;
    width: auto;
    height: 7.75rem;                                  /* 124 */
    margin: 0;
    padding: 1rem 1.25rem 1.5rem;                     /* 16 / 20 / 24 */
    background: var(--bg);                            /* #fefff9 */
    filter: none;
  }
  /* Frame 113 @20,16 388x84 — the padding puts the pill on Figma's own 12,12
     and 388 - 24 / 84 - 24 give it 364x60 with no second number to keep. */
  .qc-continue {
    display: flex;
    width: auto;
    height: 5.25rem;                                  /* 84 */
    padding: 0.75rem;                                 /* 12 */
    gap: 0;
    background: #057442;
    box-shadow: 0 0 2.5rem rgba(0, 171, 85, 0.32);    /* DROP_SHADOW #00ab55 a.32 r40 0,0 */
  }
  .qc-cta-in {
    display: flex;
    align-items: center;
    flex: 1;
    padding: 0.625rem 0.625rem 0.625rem 1rem;         /* [10,10,10,16] */
    gap: 0.625rem;                                    /* 10 */
    border-radius: var(--radius);
    background: var(--panel);                         /* #f5f6f0 */
    transition: background var(--dur-hover) var(--ease-premium);
  }
  /* the label is a FILL child again: 364 - 16 - 10 - 40 - 10 = 288 */
  .qc-continue-t {
    flex: 1;
    text-align: center;
    font-size: 1.25rem;                               /* 20, not the 1920 17 */
    line-height: 1.6rem;                              /* 25.6 */
    color: var(--ink);                                /* not white — the pill is #f5f6f0 */
  }
  .qc-continue-chip {
    width: 2.5rem;                                    /* 40, not 32 */
    height: 2.5rem;
    background: var(--accent);                        /* lime, not white */
  }

  /* the hover moves to the PILL: #057442 is the ground now, so brightening the
     wrapper would fight its own glow, and a white chip ring is invisible on
     #f5f6f0 */
  .qc-continue:hover {
    background: #057442;
    transform: none;
    box-shadow: 0 0 2.5rem rgba(0, 171, 85, 0.32);
  }
  .qc-continue:hover .qc-cta-in { background: var(--white); }
  .qc-continue:hover .qc-continue-chip { box-shadow: 0 0 0 0.1875rem rgba(17, 17, 17, 0.12); }
}