/* -------------------------------------------------------------------------- RE-PRICING STATE The panel +/- re-runs the pricing engine, which is a round trip. Without a signal the old figure sits there looking stuck. The number stays readable while it refreshes. -------------------------------------------------------------------------- */ .qr-price-val.is-repricing { opacity: 0.45; transition: opacity 120ms ease; } /* The word that stands in the FIGURE'S place while the engine reprices — see the note at that span in ChoosePackageStep. Set in the UI face, not the display one: "updating…" at the price's own 24 with -1.28 of tracking reads as a headline rather than as a status. It keeps the value box's 32 line so the card does not resize under the reader when the number arrives, and `nowrap` (inherited) keeps it on one line. */ .qr-price-val .qr-price-updating { font-family: var(--font-sans); font-weight: 400; font-size: 1rem; line-height: 2rem; /* the value's own 32 */ letter-spacing: -0.01rem; color: var(--ink-70); } .qr-help button:hover { opacity: 0.72; } /* The Submit screen's overrides live in quote-submit-integration.css, which is linked after quote-submit.css — see that file's header for why. */ /* ========================================================================== CONTENT REFLOW — package cards -------------------------------------------------------------------------- The design places the title, the "What's included" chip, the spec list and the price box at fixed y/x inside a fixed-height panel. Those coordinates were authored around the design's own product names; real catalogue names run 2–4x longer, so the title grew into the chip and the specs ran under the price box. The panel becomes a two-column grid instead: the text column flows, so each block pushes the next one down, and the price keeps its own column at the design's x and width. Chrome, artwork, the rail and the stepper are untouched. At the design's own content length this renders as before. ========================================================================== */ .qr-card { height: auto; min-height: 22.25rem; } .qr-panel > .qr-pkg-h { margin: 0 0 0.75rem; } .qr-panel > .qr-specs { margin: 0; } .qr-specs li { max-width: none; height: auto; align-items: flex-start; } .qr-specs li img { flex: none; margin-top: 0.15rem; } .qr-specs li .qr-spec-t { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } /* The one genuinely variable string in the box: let it wrap inside its own slot instead of running under the divider. */ .qr-blurb { overflow-wrap: anywhere; overflow: hidden; } /* ========================================================================== DESKTOP GEOMETRY ONLY -------------------------------------------------------------------------- Everything below re-places or re-sizes something on the design's 1920 canvas. The design ships no separate mobile stylesheet: its own `@media (max-width: 767.98px)` blocks live inside quote-*.css and restate these same boxes for the 428 canvas. Unscoped, these rules outranked those blocks at every width and the phone layout inherited desktop coordinates. Scoped to >=768 they apply exactly as before on desktop — which is unchanged — and below it the design's own mobile rules govern, as they were written to. Rules that are not geometry (colour, type, wrapping, hover and disabled states, the brand wordmark) stay global above: they are correct at any width. ========================================================================== */ /* ========================================================================== AT EVERY WIDTH — elements the design does not style -------------------------------------------------------------------------- The design has no rules for these at any breakpoint: the EPC address list, the tariffs fields, the roof designer's opt-out, the Next row, the brand wordmark and the fitted logo slots are all ours. There is no mobile fallback for them to inherit, so scoping them to desktop left them positioned by the design's `> *` canvas rules on a phone. The roof designer matters most: it is an interactive map with its own controls and cannot live on a coordinate canvas at ANY width. ========================================================================== */ /* ========================================================================== PANEL MAKER — a wordmark, not a logo -------------------------------------------------------------------------- The design ships artwork for one panel brand. Every other manufacturer either showed that brand's logo — misattributing the product — or nothing at all, and each new brand a company adds would have needed an asset committed first. The maker's name is set as text in the same box instead, so any brand renders correctly the day it is priced, with no artwork to supply. The box, its coordinates and its scale are the design's own: only the content changed from an to a , so the slot sits exactly where the mark did. `.qr-im-longi` / `.qc-im-longi` / `.qd-im-longi` keep their names because those are the design's own selectors and the coordinates live on them. ========================================================================== */ .qr-brand-name { /* The design positions these slots with `.qr-art img { position: absolute }` — an ELEMENT selector, so a in the same slot was never taken out of flow and fell to the top-left of the artwork instead of sitting where the mark does. This is the line that was missing. */ position: absolute; /* The authored box is sized for one particular logo bitmap. A name is text, so the left edge and baseline stay exactly where the mark's were and the box grows to the right as far as the battery mark allows (its slot starts at 194, this one at 69). */ width: max-content; max-width: 7.5rem; display: flex; align-items: center; font-family: var(--font-display); font-weight: 700; /* fills the 20px slot the artwork occupied, the way a wordmark does */ font-size: 1.125rem; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; } /* The details sheet's slot is a little larger (61x23), so its type follows. */ .qd-im-longi.qr-brand-name { font-size: 1.25rem; max-width: 8.5rem; } @media (min-width: 768px) { /* Additive fixes for the results screen, loaded AFTER quote-results.css. * * The design's card is laid out on a fixed 1920 canvas: the title, the * "What's included" chip and the spec rows each sit at an absolute y inside a * 931x316 panel that clips its content. Those positions were authored around * the design's own product names ("Longi Hi-MO X10 485W Panels + Sigenergy * 9.1kWh Battery"), which wrap to two lines. * * Real catalogue names are much longer — "Trina Vertex S+ 450W Dual Glass Full * Black N-Type Mono 450W Panels + Alpha ESS SMILE G3 4.8kWh Battery" wraps to * four — so the title grew down into the chip and the spec rows ran under the * price box and were clipped mid-word. * * Everything here bounds the text to the box the design drew for it. No * position, size, colour or type is changed, and quote-results.css stays * byte-identical to the design team's file. */ /* -------------------------------------------------------------------------- PACKAGE TITLE The chip sits at y96 and the title starts at y20 with a 32px line-height, so two lines (20 + 64 = 84) is the most that can be shown without touching it. The full name stays available as the element's tooltip, and the panel model is repeated in the spec list below, so nothing is actually lost. -------------------------------------------------------------------------- */ .qr-pkg-h { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* -------------------------------------------------------------------------- SPEC ROWS The price box starts at x579 and the rows at x24, so a row has 555px before it would run underneath. Each stays on its own line and ends in an ellipsis rather than being clipped mid-word by the panel's `overflow: hidden`. -------------------------------------------------------------------------- */ .qr-specs li { max-width: 33rem; /* 528 — clear of the price box */ min-width: 0; } .qr-specs li .qr-spec-t { min-width: 0; /* lets a flex child actually shrink */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== RAIL HELP LINE -------------------------------------------------------------------------- The design styles these as `.qr-help a`. They are rendered as buttons here so they can call the platform's own contact handler rather than jump to a dead `#chat` anchor, which left them matching no rule and rendering as plain text. Same treatment, applied to the button too, plus the reset a button needs to sit inline in a sentence. ========================================================================== */ .qr-help button { padding: 0; border: 0; background: none; font: inherit; letter-spacing: inherit; cursor: pointer; font-weight: 500; color: var(--ink); text-decoration: underline; } .qr-panel { height: auto; min-height: 19.75rem; display: grid; grid-template-columns: minmax(0, 34.6875rem) 20.75rem; /* The price box spans all three rows of the text column. Without an explicit row sizing, its height is shared out between those rows and opens gaps between the title, the What's-included bar and the specs. The first two rows stay at their content height and the specs row absorbs the slack. */ grid-template-rows: min-content min-content 1fr; align-items: start; padding: 1.25rem 1.25rem 1.25rem 1.5rem; box-sizing: border-box; overflow: visible; /* was clipping long specs mid-word */ } /* The text column, in order, in flow. */ .qr-panel > .qr-pkg-h, .qr-panel > .qr-inc, .qr-panel > .qr-specs { position: static; left: auto; top: auto; grid-column: 1; width: 100%; max-width: 100%; } /* The chip hugs its label, as the design's `display: inline-flex` intends. It is a grid item here, which blockifies that to `flex` and stretches it to the column — so the width is stated explicitly rather than left to `justify-self` alone, which cannot win against the `width: 100%` above. */ .qr-panel > .qr-inc { margin: 0 0 0.75rem; justify-self: start; width: max-content; max-width: 100%; } /* The price box keeps its own column, at the design's width, and grows with its own content rather than being pinned to a height. */ .qr-panel > .qr-price { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 1 / span 3; height: auto; min-height: 17rem; } /* Long names and specs wrap instead of being clamped or clipped. These replace the line-clamp / ellipsis workarounds added before the reflow. */ .qr-pkg-h { display: block; -webkit-line-clamp: none; line-clamp: none; overflow: visible; overflow-wrap: anywhere; } /* Below the design's desktop canvas the card stacks. */ /* ========================================================================== CONTENT REFLOW — submit rail package card ========================================================================== */ /* ========================================================================== CONTENT REFLOW — containment fix -------------------------------------------------------------------------- `.qr-card > *` makes every child absolute, so the panel was taken out of flow: the card could not learn how tall its content had become and the last spec spilled past the card's edge. The panel now participates in the card's layout — the design's own left/top offsets become margins, so it sits exactly where it did — and the card grows with it. The artwork and the savings line stay absolute, which is what they should be. ========================================================================== */ .qr-card > .qr-panel { position: static; margin: 1.25rem 1.25rem 1.25rem 23.3125rem; } /* ========================================================================== PRICE BOX — reflow REVERTED -------------------------------------------------------------------------- Converting the price box's internals to flow destroyed the design: the decorative quote mark has no intrinsic size constraint, so it rendered at full height, and every figure lost the sizing its coordinates carried. The box keeps the design's absolute layout. Its content is short and fixed-format (a one-line caption, "£5,660", "£63"), so it is not a growth risk; only the expert quote can run long, and that is bounded below rather than by rebuilding the box. ========================================================================== */ .qr-panel > .qr-price { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 1 / span 3; height: 17rem; /* the design's own box, restored */ } /* ========================================================================== THE EXPERT BLURB, INSIDE ITS FIXED BOX -------------------------------------------------------------------------- The price box is 332x272 with the lime rule drawn at y91, leaving 75px above it for the blurb. At the design's 16/19.52 that is three lines, and the design's own copy is three lines — but this text comes from the package and runs to four, so the fourth crossed the rule. The box is not rebuilt: its quote mark and figures are placed by coordinate and reflowing them is what broke this card before. Instead the blurb is set a touch smaller — 15/18 — which fits four lines in the same 75px, and is clamped at four so a longer string ends in an ellipsis rather than crossing the rule. The full text stays available as the element's tooltip. ========================================================================== */ .qr-blurb { font-size: 0.9375rem; /* 15 */ line-height: 1.125rem; /* 18 — 4 lines = 72px < 75px */ display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } } /* ========================================================================== MOBILE — lifted back to the top level -------------------------------------------------------------------------- These blocks were written for phones, and an automated pass that scoped the desktop geometry swept them inside `@media (min-width: 768px)`. A max-width query nested in a min-width query can never match, so they were silently inert at every width. Restored to the top level, where they apply. ========================================================================== */ @media (max-width: 767.98px) { .qr-panel { grid-template-columns: minmax(0, 1fr); padding: 1.25rem; } .qr-panel > .qr-price { grid-column: 1; grid-row: auto; width: 100%; margin-top: 1rem; } } /* ========================================================================== MOBILE — the card grows instead of bleeding into the next one -------------------------------------------------------------------------- The design's phone layout is a fixed 805-tall card holding a fixed 364x470 panel, and it shows a REDUCED spec list (`.qr-specs li { display: none }`, only `.qr-spec-m` rows). Those boxes were measured against the design's own two-line product names. A real catalogue name — "Longi Hi-Mo X10 HVD 530W Dual Glass Black White Bifacial 530W Panels + Alpha ESS SMILE5 5kWh" — wraps to four lines at the phone's 24/32 type. The title slot runs 20 to 96 (the top of `.qr-specs`), so the fourth line crossed it and the whole card spilled over the one below. Two changes, and deliberately no more: the title is bounded to the slot the design drew for it, and the card and panel may grow rather than clip. Every coordinate in the design's mobile layout is untouched, so the phone view is the approved one — it simply no longer overflows. ========================================================================== */ @media (max-width: 767.98px) { /* 20 -> 96 is 76px, which is two lines of the phone's 32px leading. The full name stays on the element's `title` attribute. */ .qr-pkg-h { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } /* ---- THE HEADING KEEPS ONE LINE ------------------------------------ `.qr-topbar h1` is authored 118 wide, which is the design's own box for "3 available packages" at its own copy length — and it wraps that copy onto two lines, leaving the row two lines tall beside a one-line link. The width was a Figma box, never a constraint the text needed; `nowrap` keeps the phrase whole and the row lets it size itself. It fits: the phrase is about 190 of the 388 track and the link takes ~125, gap included. */ .qr-topbar h1 { width: auto; white-space: nowrap; } /* ---- NOTHING MAY BE WIDER THAN THE CARD IT SITS IN ------------------ `.qr-panel` (364), `.qr-price` (316) and both lime rules carry FIXED widths measured against the 428 frame. base.css scales the root by `min(100vw / 26.75, 100vh / 57.875)`, so on a short, wide viewport the HEIGHT term wins and every one of those rem widths resolves larger than the viewport is — the card runs past the right edge and the page scrolls sideways, which is the overflow in the report. Anchoring to both edges instead of stating a width makes each box the width of its parent minus its own inset, whatever the root resolves to. The design's insets are kept exactly: 12 either side of the panel, and the price box on the panel's own 24. */ .qr-cards, .qr-card { max-width: 100%; } .qr-panel { right: 0.75rem; width: auto; } /* 12, as authored */ .qr-price { right: 1.5rem; width: auto; } /* 24, as authored */ .qr-pkg-h, .qr-specs, .qr-inc { max-width: calc(100% - 3rem); } /* The hairlines follow the box they divide. The vertical one is authored at 157 in a 316 box — dead centre, and it stops being centre the moment the box is not 316. `50%` keeps it there at any width, pulled back by half its own 2px so the stroke straddles the middle rather than starting on it. */ .qr-rule-h { right: 0; width: auto; } .qr-rule-v { left: 50%; transform: translateX(-0.0625rem); } /* AND THE RIGHT-HAND PAIR MOVES WITH IT. The captions and figures are authored at fixed lefts — 27/33 in the left half, 178/196 in the right — which are the midline's own 158 plus 20 and 38. Those were right while the box was exactly 316 and the rule sat on 157. The rule follows the box now, so a wider box slides it right, under a "Finance from" still pinned to 178 — which is the caption sitting on the lime line in the report. Anchoring the pair to the SAME 50% keeps the 20 and the 38 whatever the box resolves to; the left pair needs nothing, it measures from an edge that has not moved. */ .qr-cap-2 { left: 50%; margin-left: 1.25rem; } /* 20 past the midline */ .qr-val-2 { left: 50%; margin-left: 2.375rem; } /* 38 past the midline */ /* Grow rather than clip, so anything that does run long extends the card downward instead of painting over the next one. */ .qr-card { height: auto; min-height: 50.3125rem; } .qr-panel { height: auto; min-height: 29.375rem; } /* The chip hugs its label here too. */ .qr-inc { width: max-content; max-width: calc(100% - 3rem); } /* The expert blurb sits in a 75px slot above the lime rule — three lines of the phone's 19.52 leading. Bounded so it cannot cross the rule. */ .qr-blurb { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } } /* The battery slot is wider and shorter than the panel's (91x36 vs 54x20 on the results card, 103x41 in the details sheet), so its wordmark takes the room the artwork had. Same treatment otherwise: the design's box, its coordinates, its scale — only the content is text now. */ .qr-im-sigenlogo.qr-brand-name { font-size: 1.0625rem; max-width: 9rem; } .qd-im-siglogo.qr-brand-name { font-size: 1.1875rem; max-width: 10rem; } /* ========================================================================== FOOTER LINK LABELS STAY INSIDE THEIR COLUMN -------------------------------------------------------------------------- The footer's columns are company-authored now, and each `li` was drawn `white-space: nowrap` for labels like "About" and "Contact". A longer one — "Terms of business and cancellation" — would push out of its column and over the next. Truncation is right here rather than wrapping: these are navigation labels on a fixed 26 row, and the design's own grid gives them no vertical room to grow into. ========================================================================== */ .qr-ftr-nav li { max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .qr-ftr-nav li > a { display: block; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== THE JOURNEY STEPPER — one bar, four screens, four cells ========================================================================== Choose, Details, Customize and Submit all render , and this is the only place the bar's shared behaviour is declared. It was previously duplicated per screen (`.qpd …`, `.qc …`), which is how the four got out of step with each other in the first place. Loaded after quote-results.css, and nothing later in the order touches `.qr-tabs`' width or `.qr-tab-check`, so these govern everywhere. ========================================================================== */ /* A COMPLETED CELL, ON ANY OF THE FOUR SCREENS. quote-customize.css and quote-submit.css each declare this recipe scoped to their own root (`.qc .qc-tab-done`, `.qb .qb-tab-done`) — but the Choose screen's root carries neither, so a completed cell there had no ink chip to put a check in. Declared unscoped here; the two scoped copies still win on their own screens and say the same thing. */ .qr-tab-done .qr-tab-chip { background: var(--ink); display: inline-flex; align-items: center; justify-content: center; } /* AND THE CHECK IS ACTUALLY VISIBLE. quote-results.css declares `.qr-tab-check { display: none }` unscoped for the 1920 canvas and only turns it back on inside its own 428 block — so every completed cell rendered as an EMPTY black square on desktop. With two completed stages (Choose AND Details) that is two blank squares. */ .qr-tab-done .qr-tab-check { display: block; width: 1.25rem; height: 1.25rem; /* the 20x20 inner frame */ } /* FOUR CELLS NEED MORE THAN THE AUTHORED 620. `.qr-tabs` is authored 620 for three stages; at four the labels crowd the numbers (620 - 8 of padding - 12 of gaps = 150 a cell, against 16px labels needing 44 of chip and gap plus the number's own column). 740 gives each of four the breathing room the three-cell bar gives each of its own. Keyed on the COUNT, because it is not fixed: a tenant can disable Details or Submit and the bar comes back with two or three cells, and at three it keeps the design's own 620 so it is identical to the bar on /quote. */ .qr-tabs[data-cells="4"] { width: 46.25rem; } /* 740 */ /* A four-cell bar is only as wide as its column allows. Below the width where 740 plus the rail no longer fits, the bar shrinks and the labels ellipsis rather than the numbers being pushed out of their cells. */ @media (max-width: 1279.98px) { .qr-tabs[data-cells="4"] { width: min(46.25rem, 100%); } .qr-tabs[data-cells="4"] .qr-tab { gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.375rem; } .qr-tabs[data-cells="4"] .qr-tab-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } } /* ---- the 428 canvas ------------------------------------------------------ quote-results.css turns the cells into 40x28 pills on the design's own 388 track, joined by a `::after` connector authored 134 long for the three-cell pitch. The length is (388 - cells x 40) / (cells - 1): 2 cells -> 308 3 cells -> 134 (the design's own) 4 cells -> 76 */ @media (max-width: 767.98px) { .qr-tabs[data-cells="4"] { width: 24.25rem; } /* 388 */ .qr-tabs[data-cells="4"] .qr-tab { gap: 0; padding: 0; } .qr-tabs[data-cells="4"] .qr-tab:not(:last-child)::after { width: 4.75rem; } /* 76 */ .qr-tabs[data-cells="2"] .qr-tab:not(:last-child)::after { width: 19.25rem; } /* 308 */ /* THE CURRENT CELL'S RING FOLLOWS THE STATE, NOT A POSITION. quote-results.css draws it with `.qr-tab:nth-child(2)`, which is right only while stage 2 IS the second cell. With Details in the bar the current cell is the third, so that rule ringed a COMPLETED cell and left the current one a flat pill — cells 3 and 4 were indistinguishable. Moved onto the state class so it follows the active cell wherever the enabled steps put it. */ .qr-tabs[data-cells="4"] .qr-tab:nth-child(2) { box-shadow: none; } .qr-tabs[data-cells="4"] .qr-tab-now { box-shadow: inset 0 0 0 0.0625rem var(--ink); /* weight 1 INSIDE */ } } /* ========================================================================== THE HOME'S AERIAL, IN THE RESULTS RAIL ========================================================================== The design puts a picture of the homeowner's roof above the recommendation panel that is about it — the same aerial the Submit rail already shows. The rail carried the recommendation alone, so the panel opened with "We're recommending 19 panels for your home" beside nothing that showed the home. `.qr-side-card > *` makes every child of the card absolute, so this is placed rather than flowed: at the card's own 40 inset and 356 wide, which is `.qr-reco`'s own left and width, so the two line up as one column. EVERYTHING BELOW IT HAS TO MOVE, and only when the map is actually there — hence `has-hero` on the rail rather than a blanket offset. `.qr-reco` is authored at y140 and the bottom cluster (`.qr-rule`, `.qr-trust`, `.qr-help`, `.qr-fab`) is anchored to the card's bottom, so the panel slides into the gap between them and the rail's floor rises to keep the two apart. ========================================================================== */ .qr-hero { left: 2.5rem; /* 40 — `.qr-reco`'s own inset */ top: 8.75rem; /* 140 — where the panel started */ width: 22.25rem; /* 356 — the panel's own width */ height: 9rem; /* 144 */ border-radius: var(--radius); overflow: hidden; /* clips the image to the radius */ background: var(--panel); /* the ground while it loads */ } .qr-hero img { display: block; width: 100%; height: 100%; object-fit: cover; /* fills the box at any aspect */ } /* 140 + 144 + 20 — the design's own gap between stacked rail blocks. */ .qr-side.has-hero .qr-reco { top: 19rem; } /* 304 */ /* THE FLOOR THE PANEL'S NEW POSITION NEEDS. quote-results.css sets 39rem for a card whose recommendation ends at 452; with the aerial above it that box ends ~164 lower, and the bottom cluster still needs its last 148 of card. Under this height the page simply scrolls the rail, which is the fallback that sheet already documents. */ .qr-side.has-hero { min-height: 48.25rem; } /* 772 */ /* ---- the 428 canvas ------------------------------------------------------ quote-results.css's own 428 block dissolves the two-pane shell and re-places every rail child on the 388 track; the aerial rides the same track and the blocks under it are that sheet's to position, so only this box is stated. */ @media (max-width: 767.98px) { /* A FLOW CHILD HERE, like `.qr-reco` beside it. `.qr-side-card > *` still makes every child absolute on this canvas — that sheet un-positions them one at a time — so without this the aerial would float over the header's own content instead of sitting above the recommendation. `.qr-reco`'s own recipe: the 20 gutter as a margin, `width: auto` to undo the 1920 frame's 356, and a stated height. */ .qr-hero { position: static; left: auto; top: auto; margin: 0 1.25rem 1.25rem; /* the 20 gutter -> 388 wide */ width: auto; height: 8rem; /* 128 */ } /* `top: 19rem` above is inert on this canvas — that sheet makes `.qr-reco` static — so nothing has to undo it. The desktop floor does: the rail is an in-flow header here with no bottom cluster to clear. */ .qr-side.has-hero { min-height: 0; } } /* ========================================================================== THE 428 LOGO + BACK HEADER — shared by the screens that hide the rail ========================================================================== On the phone the rail IS the header: quote-results.css turns `.qr-side` into an in-flow band carrying the logo and the back pill. Customize hides the rail outright and Submit hides its side card, and both took that band with them — leaving those two screens with no logo and no way back on a phone. renders this on both. Hidden above 768, so the desktop screens are untouched. The geometry is quote-results.css's own for this canvas — logo 117x60 at the frame's 20 gutter, a 40 chip in a 48-tall row ending on the far gutter, so the row spans the same 388 the content below it does. The chip and label come from quote-customize.css (`.qc-back-chip` carries the flipped arrow vector, `.qc-back-label` its Geist-SemiBold 17), which is the same pill the package-details rail draws. ========================================================================== */ .qj-mhead { display: none; } @media (max-width: 767.98px) { /* FIGMA'S HEADER, AND THE SAME ONE ON EVERY PHONE SCREEN. The design puts `image 141` (the logo) at (20,40) 117x60 and `Frame 113` (the way back) at y46 — 6 lower, so the 48 pill centres against the 60 mark rather than sitting on its top edge. `align-items: center` on a 48- tall row did neither: it pulled the 60 logo UP to y34 and left the pill at y40, so this header stood 6 high of the rail-based screens (Choose, Details), whose own `.qr-logo` / `.qr-restart` are at Figma's 40 and 46 already. Height comes off the logo now, and the 32 below lands the journey bar on 132 — which is where quote-results.css has always pinned it on the rail screens. One number, four screens. */ .qj-mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin: 2.5rem 1.25rem 2rem; /* 40 top / 20 sides / 32 -> bar at 132 */ height: auto; } .qj-mhead-back { margin-top: 0.375rem; height: 3rem; } /* y46, 48 tall */ .qj-mhead-logo { flex: none; width: 7.3125rem; /* 117 */ height: 3.75rem; /* 60 */ } .qj-mhead-logo img { width: 100%; height: 100%; object-fit: contain; } /* A