/* QRaway landing pages (CL template). Every class, id and custom property is prefixed qra-lp-;
every rule is scoped under the page wrapper .qra-lp, so nothing here touches the rest of QRaway. */
/* Layout: one calm reading column per band; the hero pairs the promise with the
thing being sold (a phone showing the draft) and the work-order ticket the owner signs off.
Every section carries a drawing so the page can be understood by looking, not only reading. */
.qra-lp {
--qra-lp-bg: #f4f6f9;
--qra-lp-surface: #ffffff;
--qra-lp-ink: #132033;
--qra-lp-muted: #536176;
--qra-lp-line: #d8dfe9;
--qra-lp-brand: #005ab4;
--qra-lp-brand-hover: #00458a;
--qra-lp-brand-ink: #ffffff;
--qra-lp-brand-soft: #e3eef9;
--qra-lp-mark: #f5c518;
--qra-lp-mark-ink: #1d1700;
--qra-lp-ok: #12795a;
--qra-lp-no: #c2412d;
--qra-lp-frame: #132033;
--qra-lp-shadow: 0 18px 40px -18px rgba(19, 32, 51, .35);
--qra-lp-input: #f8fafc;
--qra-lp-final-bg: #132033;
--qra-lp-final-fg: #f4f6f9;
--qra-lp-form-bg: #ffffff;
--qra-lp-topbar-bg: #005ab4;
--qra-lp-topbar-fg: #ffffff;
--qra-lp-radius: 12px;
--qra-lp-radius-lg: 24px;
--qra-lp-ease: .3s ease;
--qra-lp-band-alt: #ffffff;
--qra-lp-card-border: #d8dfe9;
--qra-lp-card-shadow: none;
--qra-lp-ico-bg: #e3eef9;
--qra-lp-ico-mark-bg: #f5c518;
--qra-lp-ico-mark-fg: #1d1700;
--qra-lp-ico-justify: center;
--qra-lp-plinth-a: #e9edf3;
--qra-lp-plinth-b: #dde3eb;
--qra-lp-plinth-shadow: 0 30px 60px -24px rgba(19, 32, 51, .4);
/* QRaway brand type: Blinker for headings, Montserrat for UI and body */
--qra-lp-f-display: "Blinker", "Arial Narrow", Arial, sans-serif;
--qra-lp-f-body: "Montserrat", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--qra-lp-f-mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
--qra-lp-s-xs: .875rem; --qra-lp-s-sm: 1.03rem; --qra-lp-s-base: 1.0625rem; --qra-lp-s-lg: 1.25rem;
--qra-lp-s-xl: clamp(1.85rem, 1.35rem + 1.9vw, 2.6rem);
--qra-lp-s-hero: clamp(2.5rem, 1.7rem + 3.6vw, 4.1rem);
--qra-lp-gutter: max(16px, env(safe-area-inset-left, 0px));
--qra-lp-gutter-r: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
.qra-lp:not([data-theme="light"]) {
/* QRaway dark brand palette: qraway.com surfaces, gold from qraway.ca */
--qra-lp-bg: #121212; --qra-lp-surface: #1a1a1a; --qra-lp-ink: #e0e0e0; --qra-lp-muted: #b0ada6; --qra-lp-line: #242424;
--qra-lp-brand: #c0a062; --qra-lp-brand-hover: #d4b57a; --qra-lp-brand-ink: #000000; --qra-lp-brand-soft: #1e1a12;
--qra-lp-mark: #c0a062; --qra-lp-mark-ink: #000000; --qra-lp-ok: #77bb88; --qra-lp-no: #d95656; --qra-lp-frame: #2c2c2c;
--qra-lp-shadow: 0 20px 50px rgba(0, 0, 0, .6);
--qra-lp-input: #1e1e1e; --qra-lp-final-bg: #0a0a0a; --qra-lp-final-fg: #e0e0e0; --qra-lp-form-bg: #121212;
--qra-lp-topbar-bg: #c0a062; --qra-lp-topbar-fg: #141414;
--qra-lp-band-alt: #0a0a0a; --qra-lp-card-border: transparent; --qra-lp-card-shadow: 0 14px 36px rgba(0, 0, 0, .55);
--qra-lp-ico-bg: transparent; --qra-lp-ico-mark-bg: transparent; --qra-lp-ico-mark-fg: #c0a062; --qra-lp-ico-justify: start;
--qra-lp-plinth-a: #202020; --qra-lp-plinth-b: #111111; --qra-lp-plinth-shadow: 0 34px 70px rgba(0, 0, 0, .65);
color-scheme: dark;
}
}
.qra-lp[data-theme="dark"] {
--qra-lp-bg: #121212; --qra-lp-surface: #1a1a1a; --qra-lp-ink: #e0e0e0; --qra-lp-muted: #b0ada6; --qra-lp-line: #242424;
--qra-lp-brand: #c0a062; --qra-lp-brand-hover: #d4b57a; --qra-lp-brand-ink: #000000; --qra-lp-brand-soft: #1e1a12;
--qra-lp-mark: #c0a062; --qra-lp-mark-ink: #000000; --qra-lp-ok: #77bb88; --qra-lp-no: #d95656; --qra-lp-frame: #2c2c2c;
--qra-lp-shadow: 0 20px 50px rgba(0, 0, 0, .6);
--qra-lp-input: #1e1e1e; --qra-lp-final-bg: #0a0a0a; --qra-lp-final-fg: #e0e0e0; --qra-lp-form-bg: #121212;
--qra-lp-topbar-bg: #c0a062; --qra-lp-topbar-fg: #141414;
--qra-lp-band-alt: #0a0a0a; --qra-lp-card-border: transparent; --qra-lp-card-shadow: 0 14px 36px rgba(0, 0, 0, .55);
--qra-lp-ico-bg: transparent; --qra-lp-ico-mark-bg: transparent; --qra-lp-ico-mark-fg: #c0a062; --qra-lp-ico-justify: start;
--qra-lp-plinth-a: #202020; --qra-lp-plinth-b: #111111; --qra-lp-plinth-shadow: 0 34px 70px rgba(0, 0, 0, .65);
color-scheme: dark;
}
.qra-lp, .qra-lp * { box-sizing: border-box; }
html:has(.qra-lp) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html:has(.qra-lp) { scroll-behavior: auto; } }
.qra-lp {
background: var(--qra-lp-bg); color: var(--qra-lp-ink);
font-family: var(--qra-lp-f-body); font-size: var(--qra-lp-s-base); line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
.qra-lp h1, .qra-lp h2, .qra-lp h3 { font-family: var(--qra-lp-f-display); font-stretch: 112%; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
.qra-lp h2 { font-size: var(--qra-lp-s-xl); font-weight: 600; }
.qra-lp h3 { font-size: var(--qra-lp-s-lg); font-weight: 700; font-stretch: 104%; }
.qra-lp p { margin: 0; }
.qra-lp a { color: var(--qra-lp-brand); }
.qra-lp :focus-visible { outline: 3px solid var(--qra-lp-mark); outline-offset: 2px; border-radius: 4px; }
.qra-lp .qra-lp-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.qra-lp .qra-lp-ill { display: block; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-ill .qra-lp-qr { color: var(--qra-lp-brand); }
.qra-lp .qra-lp-wrap { max-width: 1120px; margin: 0 auto; padding-left: var(--qra-lp-gutter); padding-right: var(--qra-lp-gutter-r); }
.qra-lp .qra-lp-band { padding-block: clamp(56px, 7vw, 96px); }
.qra-lp .qra-lp-band.qra-lp-alt { background: var(--qra-lp-surface); border-block: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-lede { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-lg); max-width: 60ch; }
.qra-lp .qra-lp-section-head { display: grid; gap: 14px; margin-bottom: 36px; max-width: 720px; }
.qra-lp .qra-lp-eyebrow { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--qra-lp-muted); }
/* Top bar: sits in the page flow and scrolls away; the menu below it stays pinned (as on qraway.ca) */
.qra-lp .qra-lp-topbar { background: var(--qra-lp-topbar-bg); color: var(--qra-lp-topbar-fg); text-align: center; text-transform: uppercase; font-size: 13px; font-weight: 600; letter-spacing: .5px; line-height: 1.45; padding-block: 12px; transition: margin-top var(--qra-lp-ease); }
.qra-lp .qra-lp-topbar a { color: inherit; font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .qra-lp .qra-lp-topbar { transition: none; } }
/* Header + mobile menu */
.qra-lp .qra-lp-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--qra-lp-surface) 95%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-top .qra-lp-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; }
.qra-lp .qra-lp-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--qra-lp-f-display); font-weight: 700; font-size: 1.45rem; letter-spacing: .5px; color: var(--qra-lp-ink); text-decoration: none; }
.qra-lp .qra-lp-brand img { width: 34px; height: 34px; flex: none; }
.qra-lp .qra-lp-brand .qra-lp-word > span { color: var(--qra-lp-brand); }
.qra-lp .qra-lp-nav { display: flex; align-items: center; gap: 26px; }
.qra-lp .qra-lp-nav a.qra-lp-plain { position: relative; color: var(--qra-lp-ink); text-decoration: none; font-weight: 600; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; padding-block: 8px; transition: color var(--qra-lp-ease); }
.qra-lp .qra-lp-nav a.qra-lp-plain::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; background: var(--qra-lp-brand); transform: scaleX(0); transform-origin: left; transition: transform var(--qra-lp-ease); }
.qra-lp .qra-lp-nav a.qra-lp-plain:hover { color: var(--qra-lp-brand); }
.qra-lp .qra-lp-nav a.qra-lp-plain:hover::after { transform: scaleX(1); }
.qra-lp .qra-lp-theme-btn, .qra-lp .qra-lp-menu-btn { width: 42px; height: 42px; border: 1px solid var(--qra-lp-line); background: var(--qra-lp-surface); color: var(--qra-lp-ink); border-radius: 50%; cursor: pointer; display: inline-grid; place-items: center; transition: border-color var(--qra-lp-ease), color var(--qra-lp-ease); }
.qra-lp .qra-lp-theme-btn:hover, .qra-lp .qra-lp-menu-btn:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-theme-btn svg, .qra-lp .qra-lp-menu-btn svg { width: 20px; height: 20px; }
.qra-lp .qra-lp-menu-btn { display: none; border-radius: var(--qra-lp-radius); }
.qra-lp .qra-lp-mnav { border-top: 1px solid var(--qra-lp-line); background: var(--qra-lp-surface); }
.qra-lp .qra-lp-mnav ul { list-style: none; margin: 0; padding-block: 8px 16px; display: grid; }
.qra-lp .qra-lp-mnav a { display: flex; align-items: center; gap: 12px; min-height: 52px; color: var(--qra-lp-ink); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-mnav a svg { width: 22px; height: 22px; color: var(--qra-lp-brand); flex: none; }
.qra-lp .qra-lp-mnav li:last-child a { border-bottom: 0; }
.qra-lp .qra-lp-mnav .qra-lp-btn { margin-top: 12px; width: 100%; color: var(--qra-lp-brand-ink); justify-content: center; }
@media (max-width: 1023px) {
.qra-lp .qra-lp-nav a.qra-lp-plain { display: none; }
.qra-lp .qra-lp-menu-btn { display: inline-grid; }
}
@media (max-width: 760px) { .qra-lp .qra-lp-nav .qra-lp-btn-small .qra-lp-long { display: none; } }
@media (min-width: 1024px) { .qra-lp .qra-lp-mnav { display: none; } }
/* Buttons */
.qra-lp .qra-lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: var(--qra-lp-radius); font-family: var(--qra-lp-f-body); font-weight: 600; font-size: var(--qra-lp-s-base); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color var(--qra-lp-ease), transform var(--qra-lp-ease), box-shadow var(--qra-lp-ease); }
.qra-lp .qra-lp-btn-primary { background: var(--qra-lp-brand); color: var(--qra-lp-brand-ink); }
.qra-lp .qra-lp-btn-primary:hover { background: var(--qra-lp-brand-hover); transform: translateY(-2px); box-shadow: 0 10px 24px -12px var(--qra-lp-brand); }
@media (prefers-reduced-motion: reduce) { .qra-lp .qra-lp-btn-primary:hover { transform: none; } }
.qra-lp .qra-lp-btn-primary:active { transform: translateY(1px); }
.qra-lp .qra-lp-btn-small { min-height: 42px; padding: 0 16px; font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-link-quiet { color: var(--qra-lp-ink); font-weight: 600; text-underline-offset: 4px; }
/* Hero */
.qra-lp .qra-lp-hero { padding-block: clamp(36px, 6vw, 80px) clamp(56px, 7vw, 96px); }
.qra-lp .qra-lp-hero .qra-lp-wrap { display: grid; gap: clamp(36px, 5vw, 64px); grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }
@media (max-width: 900px) { .qra-lp .qra-lp-hero .qra-lp-wrap { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-crumbs { font-size: var(--qra-lp-s-xs); color: var(--qra-lp-muted); margin-bottom: 22px; }
.qra-lp .qra-lp-crumbs span[aria-hidden] { margin: 0 6px; }
.qra-lp .qra-lp-crumbs a { color: var(--qra-lp-muted); text-underline-offset: 3px; }
.qra-lp .qra-lp-crumbs a:hover { color: var(--qra-lp-brand); }
.qra-lp .qra-lp-crumbs [aria-current] { color: var(--qra-lp-ink); }
.qra-lp .qra-lp-hero h1 { font-size: var(--qra-lp-s-hero); font-weight: 300; letter-spacing: -1px; line-height: 1.02; }
.qra-lp .qra-lp-hero h1 em { font-style: normal; font-weight: 600; color: var(--qra-lp-brand); }
.qra-lp .qra-lp-hero .qra-lp-lede { margin-top: 22px; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-price-line { margin-top: 18px; font-size: var(--qra-lp-s-base); color: var(--qra-lp-muted); }
.qra-lp .qra-lp-price-line strong { color: var(--qra-lp-ink); }
.qra-lp .qra-lp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.qra-lp .qra-lp-assure { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; padding: 0; list-style: none; font-size: var(--qra-lp-s-sm); color: var(--qra-lp-muted); }
.qra-lp .qra-lp-assure li { display: flex; align-items: center; gap: 8px; }
.qra-lp .qra-lp-tick { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--qra-lp-ok); display: inline-grid; place-items: center; }
.qra-lp .qra-lp-tick::after { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--qra-lp-surface); border-bottom: 2px solid var(--qra-lp-surface); transform: rotate(-45deg) translate(1px, -1px); }
/* Hero visual: device slot + work order */
.qra-lp .qra-lp-stage { position: relative; display: grid; justify-items: center; padding-bottom: 40px; }
/* device slot: later swap .device-dummy for 
+ 
*/
.qra-lp .qra-lp-device { margin: 0; width: min(300px, 100%); display: grid; gap: 10px; justify-items: center; }
.qra-lp .qra-lp-device figcaption { font-family: var(--qra-lp-f-mono); font-size: .72rem; color: var(--qra-lp-muted); text-align: center; }
.qra-lp .qra-lp-device figcaption a { color: var(--qra-lp-brand); text-underline-offset: 3px; }
.qra-lp .qra-lp-phone { width: 100%; aspect-ratio: 9 / 18.5; max-width: 100%; background: var(--qra-lp-frame); border-radius: 38px; padding: 11px; box-shadow: var(--qra-lp-shadow); }
.qra-lp .qra-lp-screen { height: 100%; background: var(--qra-lp-surface); border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; font-size: 12px; line-height: 1.4; }
.qra-lp .qra-lp-s-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; border-bottom: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-s-logo { font-family: var(--qra-lp-f-display); font-weight: 800; font-stretch: 110%; font-size: 13px; }
.qra-lp .qra-lp-s-burger { width: 16px; height: 10px; border-block: 2px solid var(--qra-lp-ink); position: relative; }
.qra-lp .qra-lp-s-burger::after { content: ""; position: absolute; left: 0; right: 0; top: 2px; border-top: 2px solid var(--qra-lp-ink); }
.qra-lp .qra-lp-s-hero { padding: 16px; display: grid; gap: 8px; background: var(--qra-lp-brand-soft); }
.qra-lp .qra-lp-s-hero b { font-family: var(--qra-lp-f-display); font-stretch: 108%; font-size: 17px; line-height: 1.15; }
.qra-lp .qra-lp-s-hero small { color: var(--qra-lp-muted); font-size: 11px; }
.qra-lp .qra-lp-s-call { display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--qra-lp-brand); color: var(--qra-lp-brand-ink); border-radius: 8px; padding: 9px; font-weight: 700; font-size: 12px; margin-top: 4px; }
.qra-lp .qra-lp-s-call svg { width: 13px; height: 13px; }
.qra-lp .qra-lp-s-quote { text-align: center; border: 1.5px solid var(--qra-lp-brand); color: var(--qra-lp-brand); border-radius: 8px; padding: 7px; font-weight: 700; font-size: 11.5px; }
.qra-lp .qra-lp-s-sec { padding: 12px 16px 0; display: grid; gap: 6px; }
.qra-lp .qra-lp-s-label { font-family: var(--qra-lp-f-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-s-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.qra-lp .qra-lp-s-chips span { border: 1px solid var(--qra-lp-line); border-radius: 99px; padding: 3px 8px; font-size: 10.5px; }
.qra-lp .qra-lp-s-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.qra-lp .qra-lp-s-photo { aspect-ratio: 4 / 3; border-radius: 6px; position: relative; overflow: hidden; background: var(--qra-lp-brand-soft); }
.qra-lp .qra-lp-s-photo i { position: absolute; left: 6px; bottom: 5px; font-style: normal; font-family: var(--qra-lp-f-mono); font-size: 8.5px; background: var(--qra-lp-surface); padding: 1px 5px; border-radius: 3px; }
.qra-lp .qra-lp-s-photo.qra-lp-before { background: repeating-linear-gradient(135deg, var(--qra-lp-line) 0 6px, transparent 6px 12px), var(--qra-lp-bg); }
.qra-lp .qra-lp-s-photo.qra-lp-after::before { content: ""; position: absolute; left: 22%; right: 22%; top: 30%; height: 10px; border-radius: 5px; background: var(--qra-lp-brand); opacity: .55; box-shadow: 0 16px 0 var(--qra-lp-brand); }
.qra-lp .qra-lp-s-area { padding: 12px 16px 16px; color: var(--qra-lp-muted); font-size: 11px; }
.qra-lp .qra-lp-ticket { position: absolute; right: 0; bottom: 0; width: min(250px, 78%); background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-line); border-radius: 12px; box-shadow: var(--qra-lp-shadow); padding: 16px 16px 14px; font-family: var(--qra-lp-f-mono); font-size: 12px; display: grid; gap: 10px; }
.qra-lp .qra-lp-ticket-head { display: flex; justify-content: space-between; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-muted); border-bottom: 1px dashed var(--qra-lp-line); padding-bottom: 8px; }
.qra-lp .qra-lp-ticket ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.qra-lp .qra-lp-ticket li { display: flex; align-items: center; gap: 8px; }
.qra-lp .qra-lp-ticket li .qra-lp-tick { width: 15px; height: 15px; }
.qra-lp .qra-lp-ticket-cost { display: flex; justify-content: space-between; border-top: 1px dashed var(--qra-lp-line); padding-top: 8px; }
.qra-lp .qra-lp-ticket-cost b { color: var(--qra-lp-ok); }
.qra-lp .qra-lp-stamp { justify-self: start; background: var(--qra-lp-mark); color: var(--qra-lp-mark-ink); font-weight: 600; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 6px; transform: rotate(-3deg); }
@media (max-width: 900px) {
.qra-lp .qra-lp-stage { justify-items: start; padding-bottom: 0; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.qra-lp .qra-lp-device { justify-self: center; }
.qra-lp .qra-lp-ticket { position: static; width: 100%; max-width: 360px; justify-self: center; }
}
/* Value strip */
.qra-lp .qra-lp-strip { border-block: 1px solid var(--qra-lp-line); background: var(--qra-lp-surface); }
.qra-lp .qra-lp-strip ul { list-style: none; margin: 0 auto; padding-block: 22px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 28px; }
@media (max-width: 860px) { .qra-lp .qra-lp-strip ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qra-lp .qra-lp-strip li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; align-items: start; min-width: 0; }
.qra-lp .qra-lp-strip .qra-lp-ico { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; background: var(--qra-lp-brand-soft); color: var(--qra-lp-brand); display: grid; place-items: center; }
.qra-lp .qra-lp-strip .qra-lp-ico svg { width: 24px; height: 24px; }
.qra-lp .qra-lp-strip b { font-family: var(--qra-lp-f-display); font-stretch: 110%; font-size: 1.1rem; }
.qra-lp .qra-lp-strip span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
/* Context intro */
.qra-lp .qra-lp-intro-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .qra-lp .qra-lp-intro-grid { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-intro-grid .qra-lp-section-head { margin-bottom: 0; }
.qra-lp .qra-lp-prose { display: grid; gap: 18px; max-width: 62ch; }
.qra-lp .qra-lp-pullquote { font-family: var(--qra-lp-f-display); font-stretch: 108%; font-weight: 700; font-size: var(--qra-lp-s-lg); line-height: 1.35; border-left: 4px solid var(--qra-lp-mark); padding-left: 18px; }
.qra-lp .qra-lp-worries { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.qra-lp .qra-lp-worries li { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.qra-lp .qra-lp-worry { background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-line); border-radius: 10px; padding: 10px 12px; font-size: var(--qra-lp-s-sm); color: var(--qra-lp-muted); text-decoration: line-through; text-decoration-color: var(--qra-lp-no); text-decoration-thickness: 2px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.qra-lp .qra-lp-worry svg { width: 18px; height: 18px; color: var(--qra-lp-no); flex: none; }
.qra-lp .qra-lp-worries .qra-lp-arrow { color: var(--qra-lp-muted); font-family: var(--qra-lp-f-mono); }
.qra-lp .qra-lp-handled { background: var(--qra-lp-brand-soft); border-radius: 10px; padding: 10px 12px; font-size: var(--qra-lp-s-sm); font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* What you get */
/* solution_overview: one niche scene as a low 2:1 card beside the heading (stacks under it on narrow screens) */
.qra-lp .qra-lp-head-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px; align-items: center; margin-bottom: 36px; }
.qra-lp .qra-lp-head-row .qra-lp-section-head { margin-bottom: 0; }
.qra-lp .qra-lp-head-pic { margin: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 2 / 1; box-shadow: var(--qra-lp-shadow); }
@media (min-width: 861px) { .qra-lp .qra-lp-head-row { align-items: stretch; } .qra-lp .qra-lp-head-row .qra-lp-head-pic { aspect-ratio: auto; height: 100%; } .qra-lp .qra-lp-head-row .qra-lp-head-pic img { object-position: 62% 50%; } }
.qra-lp .qra-lp-head-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a picture not made yet (asset_todo): a quiet dashed slot that keeps the layout, assets come after the text */
.qra-lp .qra-lp-asset-todo { display: grid; place-items: center; width: 100%; height: 100%; min-height: 240px; padding: 16px; border: 2px dashed var(--qra-lp-line); border-radius: 14px; color: var(--qra-lp-muted); font-family: var(--qra-lp-f-mono); font-size: .75rem; text-align: center; }
.qra-lp .qra-lp-stage > .qra-lp-asset-todo { width: min(300px, 100%); min-height: 420px; }
/* drawn stand-ins until the niche has its own pictures: the Space on the hero phone, the scene in "No website yet?" */
.qra-lp .qra-lp-phone-real svg.qra-lp-space-mock { height: calc(100% - 96 * var(--qra-lp-pt)); }
.qra-lp .qra-lp-head-pic .qra-lp-scene-art { display: block; width: 100%; height: 100%; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-head-pic:has(.qra-lp-scene-art) { display: grid; align-items: center; background: color-mix(in srgb, var(--qra-lp-brand) 6%, var(--qra-lp-surface)); }
@media (max-width: 860px) { .qra-lp .qra-lp-head-row { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.qra-lp .qra-lp-get-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--qra-lp-line); }
/* v49 cut: 4 benefits in one row, section CTAs, proof steps, 3 cases, accordion FAQ, one-column final CTA */
@media (min-width: 1000px) { .qra-lp #qra-lp-why .qra-lp-get-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qra-lp .qra-lp-section-cta { margin-top: 36px; }
.qra-lp .qra-lp-proof-steps { list-style: none; counter-reset: ps; margin: 22px 0 26px; padding: 0; display: grid; gap: 14px; }
.qra-lp .qra-lp-proof-steps li { counter-increment: ps; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 14px; }
.qra-lp .qra-lp-proof-steps li::before { content: counter(ps); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-family: var(--qra-lp-f-display); font-weight: 800; background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-proof-steps b { font-family: var(--qra-lp-f-display); font-size: 1.15rem; }
.qra-lp .qra-lp-proof-steps span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
@media (min-width: 721px) { .qra-lp .qra-lp-cases.qra-lp-cases-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.qra-lp .qra-lp-faq-acc { gap: 0 48px; }
.qra-lp .qra-lp-faq-acc details.qra-lp-qa { display: block; border-bottom: 1px solid var(--qra-lp-line); padding: 4px 0; }
.qra-lp .qra-lp-faq-acc summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.qra-lp .qra-lp-faq-acc summary::-webkit-details-marker { display: none; }
.qra-lp .qra-lp-faq-acc summary::after { content: "+"; flex: none; font-family: var(--qra-lp-f-display); font-size: 1.5rem; line-height: 1; color: var(--qra-lp-brand); transition: transform .2s; }
.qra-lp .qra-lp-faq-acc details[open] summary::after { transform: rotate(45deg); }
.qra-lp .qra-lp-faq-acc summary h3 { margin: 0; }
.qra-lp .qra-lp-faq-acc details.qra-lp-qa p { margin: 0 0 16px; }
.qra-lp .qra-lp-faq-acc summary:focus-visible { outline: 2px solid var(--qra-lp-brand); outline-offset: 4px; border-radius: 6px; }
.qra-lp .qra-lp-final .qra-lp-wrap.qra-lp-final-one { display: block; max-width: 760px; text-align: center; }
.qra-lp .qra-lp-final-one .qra-lp-final-points { justify-content: center; grid-auto-flow: column; gap: 10px 28px; }
@media (max-width: 760px) { .qra-lp .qra-lp-final-one .qra-lp-final-points { grid-auto-flow: row; justify-items: center; } }
.qra-lp .qra-lp-final-actions { margin-top: 30px; }
@media (min-width: 761px) { .qra-lp .qra-lp-final-one .qra-lp-final-points li { white-space: nowrap; } }
@media (max-width: 860px) { .qra-lp .qra-lp-get-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .qra-lp .qra-lp-get-grid { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-get { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--qra-lp-line); display: grid; gap: 8px; align-content: start; min-width: 0; }
.qra-lp .qra-lp-get h3 { font-size: 1.15rem; }
.qra-lp .qra-lp-get p { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-get .qra-lp-ico { width: 52px; height: 52px; border-radius: 14px; background: var(--qra-lp-brand-soft); color: var(--qra-lp-brand); display: grid; place-items: center; margin-bottom: 4px; }
.qra-lp .qra-lp-get .qra-lp-ico svg { width: 28px; height: 28px; }
/* Use cases */
.qra-lp .qra-lp-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 720px) { .qra-lp .qra-lp-cases { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-case { background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-line); border-radius: 14px; overflow: hidden; display: grid; align-content: start; min-width: 0; }
.qra-lp .qra-lp-case .qra-lp-scene { background: var(--qra-lp-brand-soft); padding: 18px 24px 0; display: grid; place-items: center; }
.qra-lp .qra-lp-case .qra-lp-scene svg { width: 100%; max-width: 260px; height: auto; }
.qra-lp .qra-lp-case .qra-lp-txt { padding: 22px 26px 26px; display: grid; gap: 10px; }
.qra-lp .qra-lp-case .qra-lp-when { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); color: var(--qra-lp-brand); text-transform: uppercase; letter-spacing: .08em; }
.qra-lp .qra-lp-case p { color: var(--qra-lp-muted); }
/* QR bridge */
.qra-lp .qra-lp-flow { list-style: none; margin: 0 0 48px; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; position: relative; }
.qra-lp .qra-lp-flow li { display: grid; justify-items: center; text-align: center; gap: 12px; position: relative; min-width: 0; }
.qra-lp .qra-lp-flow .qra-lp-node { width: 84px; height: 84px; border-radius: 50%; background: var(--qra-lp-surface); border: 2px solid var(--qra-lp-ink); display: grid; place-items: center; position: relative; z-index: 1; }
.qra-lp .qra-lp-flow .qra-lp-node svg { width: 40px; height: 40px; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-flow li.qra-lp-end .qra-lp-node { background: var(--qra-lp-mark); border-color: var(--qra-lp-mark); }
.qra-lp .qra-lp-flow li.qra-lp-end .qra-lp-node svg { color: var(--qra-lp-mark-ink); }
.qra-lp .qra-lp-flow li:not(:last-child)::after { content: ""; position: absolute; top: 42px; left: calc(50% + 46px); right: calc(-50% + 40px); border-top: 2px dashed var(--qra-lp-muted); }
.qra-lp .qra-lp-flow b { font-family: var(--qra-lp-f-display); font-stretch: 106%; font-size: 1rem; line-height: 1.25; }
.qra-lp .qra-lp-flow span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-xs); }
@media (max-width: 760px) {
.qra-lp .qra-lp-flow { grid-template-columns: minmax(0, 1fr); gap: 0; }
.qra-lp .qra-lp-flow li { grid-template-columns: 64px minmax(0, 1fr); justify-items: start; text-align: left; align-items: center; gap: 4px 16px; padding-bottom: 22px; }
.qra-lp .qra-lp-flow li > div { grid-column: 2; }
.qra-lp .qra-lp-flow .qra-lp-node { width: 64px; height: 64px; grid-row: span 2; }
.qra-lp .qra-lp-flow .qra-lp-node svg { width: 30px; height: 30px; }
.qra-lp .qra-lp-flow li:not(:last-child)::after { top: 66px; bottom: 0; left: 31px; right: auto; border-top: 0; border-left: 2px dashed var(--qra-lp-muted); }
}
.qra-lp .qra-lp-places { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 40px; }
@media (max-width: 860px) { .qra-lp .qra-lp-places { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 861px) { .qra-lp #qra-lp-qr-codes .qra-lp-places { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qra-lp .qra-lp-place { background: var(--qra-lp-bg); border: 1px solid var(--qra-lp-line); border-radius: 14px; padding: 14px 14px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.qra-lp .qra-lp-band:not(.qra-lp-alt) .qra-lp-place { background: var(--qra-lp-surface); }
.qra-lp .qra-lp-place svg { width: 100%; height: auto; }
.qra-lp .qra-lp-place b { font-family: var(--qra-lp-f-display); font-stretch: 106%; font-size: 1rem; }
.qra-lp .qra-lp-place span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-xs); }
.qra-lp .qra-lp-qr-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .qra-lp .qra-lp-qr-points { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-qr-point { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: start; min-width: 0; }
.qra-lp .qra-lp-qr-point .qra-lp-ico { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; background: var(--qra-lp-mark); color: var(--qra-lp-mark-ink); display: grid; place-items: center; }
.qra-lp .qra-lp-qr-point .qra-lp-ico svg { width: 28px; height: 28px; }
.qra-lp .qra-lp-qr-point p { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-qr-point h3 { font-size: 1.1rem; }
/* Steps */
.qra-lp .qra-lp-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: step; }
@media (max-width: 900px) { .qra-lp .qra-lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .qra-lp .qra-lp-steps { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-step { counter-increment: step; display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 3px solid var(--qra-lp-ink); min-width: 0; }
.qra-lp .qra-lp-step-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qra-lp .qra-lp-step-top::before { content: "Step " counter(step); font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-step .qra-lp-ico { width: 56px; height: 56px; border-radius: 50%; background: var(--qra-lp-brand-soft); color: var(--qra-lp-brand); display: grid; place-items: center; }
.qra-lp .qra-lp-step .qra-lp-ico svg { width: 30px; height: 30px; }
.qra-lp .qra-lp-step.qra-lp-last { border-top-color: var(--qra-lp-ok); }
.qra-lp .qra-lp-step.qra-lp-last .qra-lp-ico { background: var(--qra-lp-ok); color: var(--qra-lp-surface); }
.qra-lp .qra-lp-step p { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-step .qra-lp-when { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); background: var(--qra-lp-brand-soft); color: var(--qra-lp-ink); justify-self: start; padding: 3px 8px; border-radius: 5px; }
/* Price + turnkey */
.qra-lp .qra-lp-price-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .qra-lp .qra-lp-price-grid { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-relax { width: 100%; max-width: 360px; height: auto; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-price-card { background: var(--qra-lp-surface); border: 2px solid var(--qra-lp-ink); border-radius: 16px; padding: clamp(24px, 4vw, 36px); display: grid; gap: 18px; }
.qra-lp .qra-lp-amount { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.qra-lp .qra-lp-amount b { font-family: var(--qra-lp-f-display); font-stretch: 118%; font-weight: 900; font-size: clamp(3rem, 2.2rem + 3vw, 4.5rem); line-height: 1; font-variant-numeric: tabular-nums; }
.qra-lp .qra-lp-amount span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-lg); }
.qra-lp .qra-lp-per-month { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-sm); color: var(--qra-lp-muted); }
.qra-lp .qra-lp-incl { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.qra-lp .qra-lp-incl li { display: flex; gap: 12px; align-items: flex-start; }
.qra-lp .qra-lp-incl li .qra-lp-tick { margin-top: 4px; }
.qra-lp .qra-lp-excl { font-size: var(--qra-lp-s-sm); color: var(--qra-lp-muted); border-top: 1px dashed var(--qra-lp-line); padding-top: 14px; }
.qra-lp .qra-lp-free-note { background: var(--qra-lp-mark); color: var(--qra-lp-mark-ink); border-radius: 10px; padding: 12px 14px; font-weight: 600; font-size: var(--qra-lp-s-sm); }
/* FAQ */
.qra-lp .qra-lp-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 48px; }
@media (max-width: 800px) { .qra-lp .qra-lp-faq { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-qa { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px 14px; align-content: start; min-width: 0; }
.qra-lp .qra-lp-qa .qra-lp-q { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: var(--qra-lp-brand-soft); color: var(--qra-lp-brand); font-family: var(--qra-lp-f-display); font-weight: 800; display: grid; place-items: center; }
.qra-lp .qra-lp-qa h3 { font-size: 1.12rem; font-stretch: 102%; }
.qra-lp .qra-lp-qa p { color: var(--qra-lp-muted); }
/* Related */
.qra-lp .qra-lp-related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 900px) { .qra-lp .qra-lp-related { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .qra-lp .qra-lp-related { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-rel { border: 1.5px solid var(--qra-lp-line); border-radius: 12px; padding: 18px; display: grid; gap: 6px; align-content: start; background: var(--qra-lp-surface); min-width: 0; color: var(--qra-lp-ink); text-decoration: none; position: relative; transition: border-color .15s, transform .15s; }
.qra-lp .qra-lp-rel:hover { border-color: var(--qra-lp-brand); transform: translateY(-2px); }
.qra-lp .qra-lp-rel .qra-lp-go { position: absolute; top: 18px; right: 18px; color: var(--qra-lp-brand); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .qra-lp .qra-lp-rel:hover { transform: none; } }
.qra-lp .qra-lp-trades { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.qra-lp .qra-lp-trades-label { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-trades ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qra-lp .qra-lp-trades li a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--qra-lp-line); border-radius: 99px; background: var(--qra-lp-surface); color: var(--qra-lp-ink); text-decoration: none; font-size: var(--qra-lp-s-sm); font-weight: 600; }
.qra-lp .qra-lp-trades li a:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-trades-all { font-weight: 700; font-size: var(--qra-lp-s-sm); text-underline-offset: 4px; }
/* Helpful guides */
.qra-lp .qra-lp-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .qra-lp .qra-lp-guides { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-guide { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 22px 24px; border-radius: 12px; border: 1.5px solid var(--qra-lp-line); background: var(--qra-lp-bg); color: var(--qra-lp-ink); text-decoration: none; min-width: 0; transition: border-color .15s; }
.qra-lp .qra-lp-band:not(.qra-lp-alt) .qra-lp-guide { background: var(--qra-lp-surface); }
.qra-lp .qra-lp-guide:hover { border-color: var(--qra-lp-brand); }
.qra-lp .qra-lp-guide b { font-family: var(--qra-lp-f-display); font-stretch: 104%; font-size: 1.08rem; line-height: 1.25; padding-right: 24px; }
.qra-lp .qra-lp-guide span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-guide .qra-lp-g-tag { justify-self: start; font-family: var(--qra-lp-f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-brand); }
.qra-lp .qra-lp-guide .qra-lp-go { position: absolute; top: 20px; right: 20px; color: var(--qra-lp-brand); font-weight: 700; }
/* Since 1999 */
.qra-lp .qra-lp-history { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; }
.qra-lp .qra-lp-history::before { content: ""; position: absolute; left: 0; right: 0; top: 27px; border-top: 3px solid var(--qra-lp-line); }
.qra-lp .qra-lp-history li { position: relative; display: grid; gap: 8px; align-content: start; min-width: 0; }
.qra-lp .qra-lp-history .qra-lp-yr { justify-self: start; position: relative; z-index: 1; font-family: var(--qra-lp-f-display); font-stretch: 118%; font-weight: 900; font-size: 1.5rem; line-height: 1; background: var(--qra-lp-ink); color: var(--qra-lp-bg); padding: 14px 14px 12px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.qra-lp .qra-lp-history li.qra-lp-now .qra-lp-yr { background: var(--qra-lp-mark); color: var(--qra-lp-mark-ink); }
.qra-lp .qra-lp-history b { font-family: var(--qra-lp-f-display); font-stretch: 104%; font-size: 1.05rem; line-height: 1.25; margin-top: 6px; }
.qra-lp .qra-lp-history p { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-history a { font-size: var(--qra-lp-s-sm); font-weight: 600; text-underline-offset: 3px; }
@media (max-width: 860px) {
.qra-lp .qra-lp-history { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 0; }
.qra-lp .qra-lp-history::before { left: 27px; right: auto; top: 0; bottom: 0; border-top: 0; border-left: 3px solid var(--qra-lp-line); }
.qra-lp .qra-lp-history li { grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; }
.qra-lp .qra-lp-history li > :not(.qra-lp-yr) { grid-column: 2; }
.qra-lp .qra-lp-history .qra-lp-yr { grid-row: span 3; }
}
.qra-lp .qra-lp-history-foot { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.qra-lp .qra-lp-history-foot p { font-family: var(--qra-lp-f-display); font-stretch: 106%; font-weight: 700; font-size: var(--qra-lp-s-lg); max-width: 46ch; }
.qra-lp .qra-lp-rel .qra-lp-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--qra-lp-brand-soft); color: var(--qra-lp-brand); display: grid; place-items: center; margin-bottom: 4px; }
.qra-lp .qra-lp-rel .qra-lp-ico svg { width: 24px; height: 24px; }
.qra-lp .qra-lp-rel b { font-family: var(--qra-lp-f-display); font-stretch: 106%; font-size: 1.02rem; line-height: 1.25; }
.qra-lp .qra-lp-rel span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-planned { font-family: var(--qra-lp-f-mono); font-size: .72rem; color: var(--qra-lp-muted); }
/* Final CTA + form */
.qra-lp .qra-lp-final { background: var(--qra-lp-ink); color: var(--qra-lp-bg); }
.qra-lp .qra-lp-final .qra-lp-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .qra-lp .qra-lp-final .qra-lp-wrap { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-final h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem); font-weight: 900; }
.qra-lp .qra-lp-final .qra-lp-lede { color: color-mix(in srgb, var(--qra-lp-bg) 78%, var(--qra-lp-ink)); margin-top: 18px; }
.qra-lp .qra-lp-final-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.qra-lp .qra-lp-final-points li { display: flex; gap: 12px; align-items: center; }
.qra-lp .qra-lp-final-points .qra-lp-tick::after { border-color: var(--qra-lp-mark-ink); }
.qra-lp .qra-lp-final-points .qra-lp-tick { background: var(--qra-lp-mark); }
.qra-lp form { background: var(--qra-lp-surface); color: var(--qra-lp-ink); border-radius: 16px; padding: clamp(22px, 4vw, 32px); display: grid; gap: 16px; }
.qra-lp .qra-lp-field { display: grid; gap: 6px; }
.qra-lp label { font-weight: 600; font-size: var(--qra-lp-s-sm); }
.qra-lp label .qra-lp-opt { font-weight: 400; color: var(--qra-lp-muted); }
.qra-lp input, .qra-lp textarea { font: inherit; color: var(--qra-lp-ink); background: var(--qra-lp-bg); border: 1.5px solid var(--qra-lp-line); border-radius: 10px; padding: 12px 14px; min-height: 50px; width: 100%; }
.qra-lp textarea { min-height: 88px; resize: vertical; }
.qra-lp input:focus, .qra-lp textarea:focus { outline: none; border-color: var(--qra-lp-brand); box-shadow: 0 0 0 3px var(--qra-lp-brand-soft); }
.qra-lp .qra-lp-field.qra-lp-invalid input { border-color: var(--qra-lp-no); }
.qra-lp .qra-lp-err { color: var(--qra-lp-no); font-size: var(--qra-lp-s-xs); }
.qra-lp .qra-lp-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 520px) { .qra-lp .qra-lp-two { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-form-foot { font-size: var(--qra-lp-s-xs); color: var(--qra-lp-muted); }
.qra-lp .qra-lp-proto-msg { background: var(--qra-lp-brand-soft); border-radius: 10px; padding: 12px 14px; font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-rel b { padding-right: 24px; }
.qra-lp .qra-lp-foot { background: var(--qra-lp-surface); border-top: 1px solid var(--qra-lp-line); padding-block: 56px 110px; font-size: var(--qra-lp-s-sm); }
@media (min-width: 761px) { .qra-lp .qra-lp-foot { padding-block: 56px 32px; } }
.qra-lp .qra-lp-foot-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(var(--qra-lp-foot-cols, 4), minmax(0, 1fr)); gap: 36px 28px; }
.qra-lp .qra-lp-foot-legal { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.qra-lp .qra-lp-foot-legal a { color: var(--qra-lp-muted); text-underline-offset: 3px; }
.qra-lp .qra-lp-foot-legal a:hover { color: var(--qra-lp-brand); }
@media (max-width: 900px) { .qra-lp .qra-lp-foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qra-lp .qra-lp-foot-brand { grid-column: 1 / -1; } }
@media (max-width: 460px) { .qra-lp .qra-lp-foot-grid { grid-template-columns: minmax(0, 1fr); } }
.qra-lp .qra-lp-foot-brand { display: grid; gap: 14px; align-content: start; justify-items: start; max-width: 34ch; }
.qra-lp .qra-lp-foot-brand p { color: var(--qra-lp-muted); }
.qra-lp .qra-lp-foot-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.qra-lp .qra-lp-foot-col h2 { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-foot-col ul + h2 { margin-top: 14px; }
.qra-lp .qra-lp-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.qra-lp .qra-lp-foot-col a { display: inline-block; padding-block: 4px; color: var(--qra-lp-ink); text-decoration: none; }
.qra-lp .qra-lp-foot-col a:hover { color: var(--qra-lp-brand); text-decoration: underline; text-underline-offset: 3px; }
.qra-lp .qra-lp-foot-col a.qra-lp-all { color: var(--qra-lp-brand); font-weight: 600; }
.qra-lp .qra-lp-foot-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--qra-lp-line); color: var(--qra-lp-muted); }
.qra-lp .qra-lp-toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: calc(100% - 32px); background: var(--qra-lp-ink); color: var(--qra-lp-bg); font-size: var(--qra-lp-s-sm); padding: 12px 16px; border-radius: 10px; box-shadow: var(--qra-lp-shadow); }
@media (min-width: 761px) { .qra-lp .qra-lp-toast { bottom: calc(24px + env(safe-area-inset-bottom, 0px)); } }
/* Mobile sticky CTA */
.qra-lp .qra-lp-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--qra-lp-surface); border-top: 1px solid var(--qra-lp-line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); display: flex; align-items: center; gap: 12px; }
.qra-lp .qra-lp-sticky-cta .qra-lp-btn { flex: 1 1 auto; min-height: 48px; padding: 0 16px; white-space: nowrap; }
.qra-lp .qra-lp-sticky-cta small { color: var(--qra-lp-muted); font-size: .72rem; line-height: 1.3; flex: 0 1 8.5rem; min-width: 0; }
@media (min-width: 761px) { .qra-lp .qra-lp-sticky-cta { display: none; } }
/* QRaway brand surfaces and motion (hover behaviour mirrors qraway.ca cards) */
@media (max-width: 760px) {
.qra-lp .qra-lp-nav { gap: 8px; }
.qra-lp .qra-lp-brand { font-size: 1.2rem; letter-spacing: .3px; gap: 8px; }
.qra-lp .qra-lp-brand img { width: 30px; height: 30px; }
.qra-lp .qra-lp-topbar { font-size: 12px; padding-block: 10px; }
}
@media (max-width: 420px) { .qra-lp .qra-lp-nav .qra-lp-btn-small { display: none; } }
.qra-lp .qra-lp-case, .qra-lp .qra-lp-place, .qra-lp .qra-lp-rel, .qra-lp .qra-lp-guide { border-radius: var(--qra-lp-radius); transition: border-color var(--qra-lp-ease), transform var(--qra-lp-ease), box-shadow var(--qra-lp-ease); }
.qra-lp .qra-lp-case:hover, .qra-lp .qra-lp-place:hover, .qra-lp .qra-lp-rel:hover, .qra-lp .qra-lp-guide:hover { border-color: var(--qra-lp-brand); transform: translateY(-4px); box-shadow: var(--qra-lp-shadow); }
.qra-lp .qra-lp-rel .qra-lp-go, .qra-lp .qra-lp-guide .qra-lp-go { transition: transform .2s; }
.qra-lp .qra-lp-rel:hover .qra-lp-go, .qra-lp .qra-lp-guide:hover .qra-lp-go { transform: translateX(4px); }
.qra-lp .qra-lp-flow .qra-lp-node { transition: border-color var(--qra-lp-ease), transform var(--qra-lp-ease); }
.qra-lp .qra-lp-flow li:hover .qra-lp-node { border-color: var(--qra-lp-brand); transform: scale(1.06); }
.qra-lp .qra-lp-get .qra-lp-ico, .qra-lp .qra-lp-strip .qra-lp-ico, .qra-lp .qra-lp-qr-point .qra-lp-ico, .qra-lp .qra-lp-step .qra-lp-ico { transition: transform var(--qra-lp-ease); }
.qra-lp .qra-lp-get:hover .qra-lp-ico, .qra-lp .qra-lp-strip li:hover .qra-lp-ico, .qra-lp .qra-lp-qr-point:hover .qra-lp-ico, .qra-lp .qra-lp-step:hover .qra-lp-ico { transform: translateY(-3px); }
.qra-lp .qra-lp-trades li a { transition: border-color var(--qra-lp-ease), color var(--qra-lp-ease); }
@media (prefers-reduced-motion: reduce) {
.qra-lp .qra-lp-case:hover, .qra-lp .qra-lp-place:hover, .qra-lp .qra-lp-rel:hover, .qra-lp .qra-lp-guide:hover, .qra-lp .qra-lp-flow li:hover .qra-lp-node, .qra-lp .qra-lp-get:hover .qra-lp-ico, .qra-lp .qra-lp-strip li:hover .qra-lp-ico, .qra-lp .qra-lp-qr-point:hover .qra-lp-ico, .qra-lp .qra-lp-step:hover .qra-lp-ico, .qra-lp .qra-lp-rel:hover .qra-lp-go, .qra-lp .qra-lp-guide:hover .qra-lp-go { transform: none; }
}
.qra-lp .qra-lp-price-card { border-color: var(--qra-lp-brand); border-radius: var(--qra-lp-radius-lg); }
.qra-lp .qra-lp-amount b, .qra-lp .qra-lp-history .qra-lp-yr { font-weight: 700; }
.qra-lp .qra-lp-final { background: var(--qra-lp-final-bg); color: var(--qra-lp-final-fg); border-top: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-final h2 { font-weight: 600; }
.qra-lp .qra-lp-final .qra-lp-lede { color: color-mix(in srgb, var(--qra-lp-final-fg) 75%, var(--qra-lp-final-bg)); }
.qra-lp form { background: var(--qra-lp-form-bg); border: 1px solid var(--qra-lp-line); border-radius: var(--qra-lp-radius-lg); }
.qra-lp input, .qra-lp textarea { background: var(--qra-lp-input); border-radius: var(--qra-lp-radius); }
/* qraway.com styling: darker alt bands, borderless cards with soft shadows (dark theme) */
.qra-lp .qra-lp-band.qra-lp-alt { background: var(--qra-lp-band-alt); }
.qra-lp .qra-lp-case, .qra-lp .qra-lp-place, .qra-lp .qra-lp-rel, .qra-lp .qra-lp-guide, .qra-lp .qra-lp-ticket, .qra-lp form { border-color: var(--qra-lp-card-border); box-shadow: var(--qra-lp-card-shadow); }
.qra-lp .qra-lp-case:hover, .qra-lp .qra-lp-place:hover, .qra-lp .qra-lp-rel:hover, .qra-lp .qra-lp-guide:hover { border-color: var(--qra-lp-brand); box-shadow: var(--qra-lp-shadow); }
/* Breadcrumbs, qraway.com style ("HQ / The Infrastructure"); wraps cleanly at any depth */
.qra-lp .qra-lp-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-crumbs a { color: var(--qra-lp-brand); text-decoration: none; }
.qra-lp .qra-lp-crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--qra-lp-brand-hover); }
.qra-lp .qra-lp-crumbs span[aria-hidden] { margin: 0 10px; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-crumbs [aria-current] { color: var(--qra-lp-muted); }
/* Gold ornament: diamond + fading line, used sparingly under a few section headings */
.qra-lp .qra-lp-ornament { display: flex; align-items: center; gap: 10px; width: 180px; max-width: 100%; }
.qra-lp .qra-lp-ornament i { width: 7px; height: 7px; flex: none; background: var(--qra-lp-brand); transform: rotate(45deg); }
.qra-lp .qra-lp-ornament::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--qra-lp-brand), transparent); }
/* FAQ questions with a gold rule on the left (qraway.com headings) */
.qra-lp .qra-lp-qa { grid-template-columns: minmax(0, 1fr); }
.qra-lp .qra-lp-qa h3 { border-left: 2px solid color-mix(in srgb, var(--qra-lp-brand) 45%, transparent); padding-left: 14px; }
.qra-lp .qra-lp-qa p { padding-left: 16px; }
/* Hero phone on a plinth (qraway.com "Featured Live Hubs"); asset slot stays the same */
.qra-lp .qra-lp-device { width: min(340px, 100%); padding: 26px 26px 16px; border-radius: 32px; background: linear-gradient(160deg, var(--qra-lp-plinth-a), var(--qra-lp-plinth-b)); box-shadow: var(--qra-lp-plinth-shadow); }
.qra-lp .qra-lp-device .qra-lp-phone { box-shadow: 0 0 0 1px color-mix(in srgb, var(--qra-lp-brand) 45%, transparent), 0 18px 40px -12px rgba(0, 0, 0, .55); }
/* Icons: tinted tiles in light, plain gold line icons in dark */
.qra-lp .qra-lp-strip .qra-lp-ico, .qra-lp .qra-lp-get .qra-lp-ico, .qra-lp .qra-lp-rel .qra-lp-ico, .qra-lp .qra-lp-step .qra-lp-ico { background: var(--qra-lp-ico-bg); justify-items: var(--qra-lp-ico-justify); }
.qra-lp .qra-lp-qr-point .qra-lp-ico { background: var(--qra-lp-ico-mark-bg); color: var(--qra-lp-ico-mark-fg); justify-items: var(--qra-lp-ico-justify); }
/* steps + "More ways" icons: one padded tile in both themes, so the check no longer stands out and nothing floats */
.qra-lp .qra-lp-step .qra-lp-ico, .qra-lp .qra-lp-rel .qra-lp-ico { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; justify-items: center;
background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-step .qra-lp-ico svg, .qra-lp .qra-lp-rel .qra-lp-ico svg { width: 26px; height: 26px; }
.qra-lp .qra-lp-step.qra-lp-last .qra-lp-ico { background: color-mix(in srgb, var(--qra-lp-ok) 16%, transparent); color: var(--qra-lp-ok); }
/* Readability pass: Blinker has a small x-height, so its titles get ~25% more; small labels +1-2px */
.qra-lp h3 { font-size: 1.5rem; }
.qra-lp .qra-lp-get h3, .qra-lp .qra-lp-qa h3 { font-size: 1.4rem; }
.qra-lp .qra-lp-qr-point h3, .qra-lp .qra-lp-guide b, .qra-lp .qra-lp-strip b, .qra-lp .qra-lp-history b { font-size: 1.32rem; }
.qra-lp .qra-lp-place b, .qra-lp .qra-lp-rel b { font-size: 1.25rem; }
.qra-lp .qra-lp-flow b { font-size: 1.18rem; }
.qra-lp .qra-lp-place span { font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-crumbs { font-size: 13px; }
.qra-lp .qra-lp-device figcaption, .qra-lp .qra-lp-guide .qra-lp-g-tag { font-size: .8rem; }
.qra-lp .qra-lp-ticket { font-size: 13px; }
.qra-lp .qra-lp-ticket-head { font-size: 11.5px; }
.qra-lp .qra-lp-stamp { font-size: 12px; }
.qra-lp .qra-lp-btn { white-space: nowrap; }
.qra-lp .qra-lp-nobr { white-space: nowrap; }
/* 1999-Now: full-width band above the footer, coloured like the top bar */
.qra-lp .qra-lp-since-band { background: var(--qra-lp-topbar-bg); color: var(--qra-lp-topbar-fg); padding-block: 30px; }
.qra-lp .qra-lp-since-band .qra-lp-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; }
.qra-lp .qra-lp-since-mark { font-family: var(--qra-lp-f-display); font-weight: 600; font-size: clamp(1.9rem, 1.3rem + 2vw, 2.6rem); line-height: 1; white-space: nowrap; }
.qra-lp .qra-lp-since-band p { font-size: var(--qra-lp-s-base); line-height: 1.55; max-width: 70ch; min-width: 0; flex: 1 1 320px; }
.qra-lp .qra-lp-since-band a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.qra-lp .qra-lp-since-band a:hover { text-decoration-thickness: 2px; }
/* === RHYTHM v1 (2026-10-19). To roll back: delete this block and the "anchor" class on #qr. === */
/* 1. Stronger zebra in the light theme (dark keeps its own --qra-lp-band-alt) */
.qra-lp { --qra-lp-band-alt: #e6edf6; }
/* 2. QR section as the page's dark anchor; tokens are re-scoped inside it so every child follows */
.qra-lp .qra-lp-band.qra-lp-anchor {
--qra-lp-ink: #eef2f8; --qra-lp-muted: #aab6c8; --qra-lp-surface: #1b2b43; --qra-lp-line: #2b3d58;
--qra-lp-brand: #8ab4ff; --qra-lp-brand-hover: #a9c8ff; --qra-lp-brand-soft: #22355a;
--qra-lp-card-border: #2b3d58; --qra-lp-card-shadow: none; --qra-lp-ico-mark-bg: #f5c518; --qra-lp-ico-mark-fg: #1d1700;
--qra-lp-shadow: 0 18px 40px -18px rgba(0, 0, 0, .5);
background: #132033; color: var(--qra-lp-ink); border-block: 0;
}
@media (prefers-color-scheme: dark) {
.qra-lp:not([data-theme="light"]) .qra-lp-band.qra-lp-anchor {
--qra-lp-ink: inherit; --qra-lp-muted: inherit; --qra-lp-surface: inherit; --qra-lp-line: inherit; --qra-lp-brand: inherit; --qra-lp-brand-hover: inherit; --qra-lp-brand-soft: inherit; --qra-lp-card-border: inherit; --qra-lp-card-shadow: inherit; --qra-lp-ico-mark-bg: inherit; --qra-lp-ico-mark-fg: inherit; --qra-lp-shadow: inherit; background: transparent; box-shadow: none;
}
}
.qra-lp[data-theme="dark"] .qra-lp-band.qra-lp-anchor {
--qra-lp-ink: inherit; --qra-lp-muted: inherit; --qra-lp-surface: inherit; --qra-lp-line: inherit; --qra-lp-brand: inherit; --qra-lp-brand-hover: inherit; --qra-lp-brand-soft: inherit; --qra-lp-card-border: inherit; --qra-lp-card-shadow: inherit; --qra-lp-ico-mark-bg: inherit; --qra-lp-ico-mark-fg: inherit; --qra-lp-shadow: inherit; background: transparent; box-shadow: none;
}
/* === end RHYTHM v1 === */
/* Anchor links land below the sticky header */
.qra-lp section[id] { scroll-margin-top: 84px; }
/* === HERO PHONE: real iPhone frame + Space capture (from the fitting page, v10) === */
/* real iPhone frame (transparent screen) over a Space screenshot */
/* tune in DevTools on .phone-real: --qra-lp-shot-top moves the screenshot box; --qra-lp-shot-pos picks which part of a taller capture shows (bottom | top | center | 0 40%) */
.qra-lp .qra-lp-phone-real { position: relative; width: 100%; aspect-ratio: 670 / 1360; --qra-lp-shot-top: 1.4%; --qra-lp-shot-left: 3.7%; --qra-lp-shot-w: 92.6%; --qra-lp-shot-h: 97.2%; --qra-lp-shot-pos: center; }
.qra-lp .qra-lp-phone-real .qra-lp-screen { position: absolute; left: var(--qra-lp-shot-left); top: var(--qra-lp-shot-top); width: var(--qra-lp-shot-w); height: var(--qra-lp-shot-h); border-radius: 11% / 5.4%; overflow: hidden; background: #000; container-type: inline-size; }
.qra-lp .qra-lp-phone-real .qra-lp-screen > * { --qra-lp-pt: calc(100cqw / 440); }
/* iOS status bar, 62pt, drawn in HTML so it stays 9:41 on every capture */
.qra-lp .qra-lp-phone-real .qra-lp-sb { position: absolute; inset: 0 0 auto; height: calc(62 * var(--qra-lp-pt)); box-sizing: border-box; padding: calc(6 * var(--qra-lp-pt)) calc(34 * var(--qra-lp-pt)) 0 calc(64 * var(--qra-lp-pt)); display: flex; align-items: center; justify-content: space-between; background: var(--qra-lp-sb-bg, #141414); color: #fff; }
.qra-lp .qra-lp-phone-real .qra-lp-sb-time { font: 600 calc(17 * var(--qra-lp-pt)) / 1 "Inter", -apple-system, "SF Pro Text", "Segoe UI", sans-serif; letter-spacing: -.01em; }
.qra-lp .qra-lp-phone-real .qra-lp-sb-icons { display: flex; align-items: center; gap: calc(6 * var(--qra-lp-pt)); }
.qra-lp .qra-lp-phone-real .qra-lp-sb-icons svg { height: calc(12 * var(--qra-lp-pt)); width: auto; display: block; }
/* capture: 440 x 842 at 3x fits exactly between the bars */
.qra-lp .qra-lp-phone-real .qra-lp-shot { position: absolute; left: 0; top: calc(62 * var(--qra-lp-pt)); width: 100%; height: calc(100% - 96 * var(--qra-lp-pt)); object-fit: cover; object-position: var(--qra-lp-shot-pos); display: block; }
/* home indicator strip, 34pt */
.qra-lp .qra-lp-phone-real .qra-lp-home { position: absolute; inset: auto 0 0; height: calc(34 * var(--qra-lp-pt)); background: #000; }
.qra-lp .qra-lp-phone-real .qra-lp-home::after { content: ""; position: absolute; left: 50%; bottom: calc(9 * var(--qra-lp-pt)); width: calc(140 * var(--qra-lp-pt)); height: calc(5 * var(--qra-lp-pt)); border-radius: 99px; background: #fff; transform: translateX(-50%); }
.qra-lp .qra-lp-phone-real .qra-lp-frame { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
/* frame colour follows the theme: silver iPhone in light, gold in dark */
.qra-lp .qra-lp-phone-real .qra-lp-frame-gold { display: none; }
@media (prefers-color-scheme: dark) { .qra-lp:not([data-theme="light"]) .qra-lp-phone-real .qra-lp-frame-gold { display: block; } .qra-lp:not([data-theme="light"]) .qra-lp-phone-real .qra-lp-frame-silver { display: none; } }
.qra-lp[data-theme="dark"] .qra-lp-phone-real .qra-lp-frame-gold { display: block; }
.qra-lp[data-theme="dark"] .qra-lp-phone-real .qra-lp-frame-silver { display: none; }
.qra-lp .qra-lp-stage .qra-lp-device { width: min(300px, 100%); justify-self: end; margin-right: 0; padding: 22px 22px 14px; }
/* text takes the free width; the phone column is just wide enough for the phone and the ticket */
@media (min-width: 901px) {
.qra-lp .qra-lp-hero .qra-lp-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); }
.qra-lp .qra-lp-stage { min-height: 640px; }
/* phone sits 50px higher; the approval ticket keeps its place */
.qra-lp .qra-lp-stage .qra-lp-device { position: relative; top: -50px; }
/* approval ticket: tilted 2deg, checklist in two columns (2 rows of 2) */
.qra-lp .qra-lp-ticket { bottom: -160px; width: min(380px, 100%); transform: rotate(2deg); }
.qra-lp .qra-lp-ticket .qra-lp-stamp { transform: none; }
.qra-lp .qra-lp-ticket ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.qra-lp:not(.qra-lp-page-home) .qra-lp-hero .qra-lp-ticket { bottom: -180px; } /* niche pages hang it 20px lower (owner, 2026-10-24); HOME keeps -160px */
}
/* wide screens: the ticket grows 100px to the left, so longer checklist items stay on one line (owner, 2026-10-24); HOME keeps its own */
@media (min-width: 1100px) {
.qra-lp:not(.qra-lp-page-home) .qra-lp-hero .qra-lp-ticket { width: max-content; min-width: 340px; max-width: 480px; } /* as wide as its checklist, up to 480px */
/* an item too long for the 480px card wraps onto a second line instead of pushing out of it (owner, 2026-10-27) */
.qra-lp:not(.qra-lp-page-home) .qra-lp-hero .qra-lp-ticket ul { grid-template-columns: minmax(0, max-content) minmax(0, max-content); justify-content: space-between; column-gap: 32px; }
}
@media (max-width: 900px) {
.qra-lp .qra-lp-stage .qra-lp-device { justify-self: center; margin-right: 0; width: min(280px, 82%); }
}
/* === end HERO PHONE === */
/* === AIR v53: more room between and inside blocks (moderate) === */
.qra-lp .qra-lp-band { padding-block: clamp(76px, 9vw, 120px); }
.qra-lp .qra-lp-hero { padding-bottom: clamp(72px, 8vw, 110px); }
.qra-lp .qra-lp-section-head { margin-bottom: clamp(40px, 4vw, 52px); gap: 16px; }
.qra-lp .qra-lp-section-cta { margin-top: clamp(40px, 4vw, 52px); }
.qra-lp .qra-lp-head-row { margin-bottom: clamp(40px, 4vw, 56px); }
.qra-lp .qra-lp-get { padding-top: 30px; padding-bottom: 30px; }
.qra-lp .qra-lp-cases { gap: 24px; }
.qra-lp .qra-lp-places { gap: 18px; margin-bottom: 0; }
.qra-lp .qra-lp-steps { row-gap: 40px; }
.qra-lp .qra-lp-proof-steps { gap: 18px; margin-block: 28px 32px; }
.qra-lp .qra-lp-faq-acc summary { padding-block: 18px; }
.qra-lp .qra-lp-trades { margin-top: 40px; }
.qra-lp .qra-lp-since-band { padding-block: 40px; }
@media (max-width: 760px) {
.qra-lp .qra-lp-section-head { margin-bottom: 32px; }
/* phones: 20px more side padding for page content (header stays compact) */
.qra-lp main .qra-lp-wrap, .qra-lp .qra-lp-foot .qra-lp-wrap { padding-left: calc(var(--qra-lp-gutter) + 20px); padding-right: calc(var(--qra-lp-gutter-r) + 20px); }
/* phones: 10px more between cards once they stack */
.qra-lp .qra-lp-cases, .qra-lp .qra-lp-places, .qra-lp .qra-lp-related, .qra-lp .qra-lp-guides { gap: 26px; }
.qra-lp .qra-lp-get { padding-top: 24px; padding-bottom: 24px; }
}
@media (max-width: 860px) {
/* phones/tablets: let blocks inside a section breathe */
.qra-lp .qra-lp-price-grid { gap: 64px; }
.qra-lp .qra-lp-price-grid .qra-lp-prose { gap: 26px; }
.qra-lp .qra-lp-head-row { gap: 44px; }
.qra-lp .qra-lp-worries { gap: 14px; margin-top: 18px; }
.qra-lp .qra-lp-hero .qra-lp-wrap { gap: 56px; }
.qra-lp .qra-lp-places, .qra-lp .qra-lp-cases { margin-top: 8px; }
}
/* bottom sticky CTA removed: the sticky header already shows the button */
@media (max-width: 420px) {
/* narrow phones: keep the header CTA, drop the theme toggle there instead (theme follows the phone) */
.qra-lp .qra-lp-nav .qra-lp-btn-small { display: inline-flex !important; padding: 0 14px; }
.qra-lp .qra-lp-nav .qra-lp-theme-btn { display: none; }
}
@media (max-width: 350px) { .qra-lp .qra-lp-top .qra-lp-brand .qra-lp-word { display: none; } }
@media (max-width: 420px) { .qra-lp main .qra-lp-btn { max-width: 100%; white-space: normal; text-align: center; } }
.qra-lp .qra-lp-sticky-cta { display: none !important; }
.qra-lp .qra-lp-foot { padding-bottom: 40px; }
@media (max-width: 560px) {
/* QR places: one per row, picture left, text right */
.qra-lp #qra-lp-qr-codes .qra-lp-places { grid-template-columns: minmax(0, 1fr); }
.qra-lp #qra-lp-qr-codes .qra-lp-place { grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; row-gap: 4px; align-items: center; padding: 16px; }
.qra-lp #qra-lp-qr-codes .qra-lp-place svg { grid-row: span 2; }
.qra-lp #qra-lp-qr-codes .qra-lp-place b { align-self: end; }
.qra-lp #qra-lp-qr-codes .qra-lp-place span { align-self: start; }
}
.qra-lp .qra-lp-price-card .qra-lp-card-cta { width: 100%; justify-content: center; margin-top: 6px; }
.qra-lp #qra-lp-price .qra-lp-prose .qra-lp-free-line { color: var(--qra-lp-brand); font-family: var(--qra-lp-f-display); font-weight: 700; font-size: 1.45rem; line-height: 1.25; margin: 0; text-wrap: balance; }
/* price block: even rhythm steps -> gold line -> text */
.qra-lp #qra-lp-price .qra-lp-proof-steps { margin-bottom: 8px; }
@media (min-width: 861px) { .qra-lp #qra-lp-price .qra-lp-proof-steps { margin-bottom: 80px; } }
/* room between the "No website yet?" heading and the worry rows */
.qra-lp #qra-lp-why .qra-lp-worries { margin-top: 28px; }
@media (max-width: 860px) { .qra-lp #qra-lp-why .qra-lp-worries { margin-top: 40px; } }
@media (max-width: 860px) {
.qra-lp #qra-lp-why .qra-lp-head-row { gap: 64px; }
}
/* final CTA: centred on desktop, left-aligned on phones (remove this rule to centre it again) */
@media (max-width: 760px) {
.qra-lp .qra-lp-final .qra-lp-wrap.qra-lp-final-one { text-align: left; }
.qra-lp .qra-lp-final-one .qra-lp-final-points { justify-items: start; justify-content: start; }
}
.qra-lp .qra-lp-ticket { padding-bottom: 30px; }
@media (min-width: 901px) { .qra-lp .qra-lp-ticket { padding-bottom: 20px; } }
@media (max-width: 900px) { .qra-lp .qra-lp-stage { gap: 70px; } }
/* === end AIR === */
/* === request modal: every "#draft" button opens it === */
.qra-lp .qra-lp-draft-modal { width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--qra-lp-line); border-radius: var(--qra-lp-radius-lg, 24px); background: var(--qra-lp-surface); color: var(--qra-lp-ink); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6); overflow: auto; }
.qra-lp .qra-lp-draft-modal::backdrop { background: rgba(6, 8, 14, .66); backdrop-filter: blur(3px); }
.qra-lp .qra-lp-draft-modal form { position: relative; background: none; border: 0; box-shadow: none; border-radius: 0; padding: clamp(24px, 5vw, 36px); gap: 18px; }
.qra-lp .qra-lp-dm-head { display: grid; gap: 8px; padding-right: 40px; }
.qra-lp .qra-lp-dm-head h2 { font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2rem); }
.qra-lp .qra-lp-dm-head p, .qra-lp .qra-lp-dm-fine { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); margin: 0; }
.qra-lp .qra-lp-dm-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--qra-lp-line); background: var(--qra-lp-bg); color: var(--qra-lp-ink); display: grid; place-items: center; cursor: pointer; }
.qra-lp .qra-lp-dm-close svg { width: 20px; height: 20px; }
.qra-lp .qra-lp-dm-close:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-draft-modal input[type=file] { padding: 10px 12px; min-height: 0; }
.qra-lp .qra-lp-dm-submit { width: 100%; margin-top: 4px; }
.qra-lp .qra-lp-field.qra-lp-invalid textarea { border-color: var(--qra-lp-no); }
@media (prefers-reduced-motion: no-preference) { .qra-lp .qra-lp-draft-modal[open] { animation: qra-lp-dm-in .18s ease-out; } @keyframes qra-lp-dm-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } }
.qra-lp .qra-lp-field-label { font-weight: 600; }
.qra-lp .qra-lp-field-label .qra-lp-opt { font-weight: 400; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-drop { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; padding: 18px; border: 1.5px dashed color-mix(in srgb, var(--qra-lp-brand) 55%, var(--qra-lp-line)); border-radius: var(--qra-lp-radius, 12px); background: color-mix(in srgb, var(--qra-lp-brand) 6%, var(--qra-lp-input, var(--qra-lp-bg))); cursor: pointer; transition: border-color .15s, background .15s; }
.qra-lp .qra-lp-drop:hover, .qra-lp .qra-lp-drop.qra-lp-over { border-color: var(--qra-lp-brand); background: color-mix(in srgb, var(--qra-lp-brand) 12%, var(--qra-lp-input, var(--qra-lp-bg))); }
.qra-lp .qra-lp-drop:focus-within { outline: 2px solid var(--qra-lp-brand); outline-offset: 3px; }
.qra-lp .qra-lp-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.qra-lp .qra-lp-drop-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--qra-lp-brand) 14%, transparent); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-drop-ico svg { width: 24px; height: 24px; }
.qra-lp .qra-lp-drop-txt { display: grid; gap: 2px; }
.qra-lp .qra-lp-drop-txt b { font-weight: 600; }
.qra-lp .qra-lp-drop-txt span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); font-weight: 400; }
.qra-lp .qra-lp-drop-list { grid-column: 1 / -1; color: var(--qra-lp-brand); font-size: var(--qra-lp-s-sm); font-weight: 600; }
.qra-lp .qra-lp-drop-list:empty { display: none; }
.qra-lp .qra-lp-dm-step { display: grid; gap: 18px; }
.qra-lp .qra-lp-dm-step[hidden] { display: none; }
.qra-lp .qra-lp-dm-step-no { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-brand); }
.qra-lp .qra-lp-dm-head h2:focus { outline: none; }
.qra-lp .qra-lp-dm-next { width: 100%; margin-top: 4px; }
.qra-lp .qra-lp-dm-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; margin-top: 4px; }
.qra-lp .qra-lp-dm-back { background: transparent; color: var(--qra-lp-ink); border: 1.5px solid var(--qra-lp-line); }
.qra-lp .qra-lp-dm-back:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-dm-actions .qra-lp-dm-submit { width: 100%; margin: 0; }
.qra-lp .qra-lp-draft-modal textarea { min-height: 76px; }
.qra-lp .qra-lp-drop { padding: 14px 16px; }
@media (max-height: 820px) {
/* short phone screens: keep each step on one screen */
.qra-lp .qra-lp-draft-modal form { gap: 14px; padding: 22px 22px 20px; }
.qra-lp .qra-lp-dm-step { gap: 14px; }
.qra-lp .qra-lp-dm-head { gap: 6px; }
.qra-lp .qra-lp-draft-modal .qra-lp-field { gap: 5px; }
.qra-lp .qra-lp-draft-modal input:not([type=file]) { min-height: 46px; padding-block: 10px; }
.qra-lp .qra-lp-draft-modal textarea { min-height: 60px; }
.qra-lp .qra-lp-drop { padding: 10px 14px; }
.qra-lp .qra-lp-drop-ico { width: 36px; height: 36px; }
}
/* both steps share one grid cell, so the form keeps the height of the taller step */
.qra-lp .qra-lp-dm-steps { display: grid; }
.qra-lp .qra-lp-dm-steps > .qra-lp-dm-step { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 18px; }
.qra-lp .qra-lp-dm-step.qra-lp-is-off { visibility: hidden; pointer-events: none; }
/* step change: step 1 slides out to the left, step 2 comes in from the right; Back reverses it */
.qra-lp .qra-lp-dm-steps { overflow: hidden; margin: -4px; padding: 4px; }
@media (prefers-reduced-motion: no-preference) {
.qra-lp .qra-lp-dm-steps > .qra-lp-dm-step { transition: opacity .28s ease, transform .28s ease, visibility 0s linear 0s; }
.qra-lp .qra-lp-dm-steps > .qra-lp-dm-step.qra-lp-is-off { opacity: 0; transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s; }
.qra-lp .qra-lp-dm-steps > .qra-lp-dm-step[data-step="1"].qra-lp-is-off { transform: translateX(-36px); }
.qra-lp .qra-lp-dm-steps > .qra-lp-dm-step[data-step="2"].qra-lp-is-off { transform: translateX(36px); }
}
.qra-lp .qra-lp-dm-intro { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); margin: 0; }
.qra-lp .qra-lp-dm-actions-1 { margin-top: auto; }
@media (max-height: 820px) { .qra-lp .qra-lp-dm-steps > .qra-lp-dm-step { gap: 14px; } }
/* step 2: 50px between the photo areas and the buttons (tighter only on very short screens) */
.qra-lp .qra-lp-dm-step .qra-lp-dm-actions { margin-top: 32px; }
@media (max-height: 820px) { .qra-lp .qra-lp-dm-step .qra-lp-dm-actions { margin-top: 36px; } }
@media (max-height: 760px) { .qra-lp .qra-lp-dm-step .qra-lp-dm-actions { margin-top: 12px; } }
/* step 1: three small guarantees fill the space above Next */
.qra-lp .qra-lp-assure.qra-lp-dm-assure { flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin: auto 0; }
.qra-lp .qra-lp-assure.qra-lp-dm-assure li { white-space: nowrap; font-size: 14px; }
@media (max-width: 400px) { .qra-lp .qra-lp-assure.qra-lp-dm-assure { gap: 6px 10px; } .qra-lp .qra-lp-assure.qra-lp-dm-assure li { font-size: 12.5px; gap: 6px; } .qra-lp .qra-lp-assure.qra-lp-dm-assure .qra-lp-tick { width: 16px; height: 16px; } }
.qra-lp .qra-lp-dm-hl { color: var(--qra-lp-brand); font-weight: 700; }
.qra-lp .qra-lp-dm-assure ~ .qra-lp-dm-actions-1 { margin-top: 0; }
@media (max-height: 760px) { .qra-lp .qra-lp-dm-assure { display: none; } .qra-lp .qra-lp-dm-assure ~ .qra-lp-dm-actions-1 { margin-top: auto; } }
/* === end request modal === */
/* === main landing (long page): rules for .qra-lp-page-main only === */
/* six QR places: three per row instead of four */
@media (min-width: 861px) { .qra-lp.qra-lp-page-main #qra-lp-qr-codes .qra-lp-places { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* the QR section here also has the flow above and the three points below the places */
.qra-lp.qra-lp-page-main #qra-lp-qr-codes .qra-lp-places { margin-bottom: clamp(48px, 5vw, 64px); }
/* the three QR points: text right under the title, not spread over the row height */
.qra-lp.qra-lp-page-main .qra-lp-qr-point { align-content: start; }
/* the hero is followed by the value strip here, so the hanging approval ticket needs room above it */
@media (min-width: 901px) { .qra-lp.qra-lp-page-main .qra-lp-hero { padding-bottom: 210px; } }
/* "What your website will have": short text beside the picture sits centred, not stretched to its height */
.qra-lp.qra-lp-page-main .qra-lp-head-row .qra-lp-section-head { align-content: center; }
/* value strip on phones: one item per row, the 2-column version is too tight */
@media (max-width: 560px) { .qra-lp.qra-lp-page-main .qra-lp-strip ul { grid-template-columns: minmax(0, 1fr); gap: 20px; } }
/* three plans: cards side by side on wide screens, stacked (first plan on top) below 960px */
.qra-lp.qra-lp-page-main .qra-lp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 960px) { .qra-lp.qra-lp-page-main .qra-lp-tiers { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 28px; } }
.qra-lp.qra-lp-page-main .qra-lp-tier { display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 3vw, 32px); }
.qra-lp.qra-lp-page-main .qra-lp-tier:not(.qra-lp-tier-main) { border-color: var(--qra-lp-line); }
.qra-lp.qra-lp-page-main .qra-lp-tier h3 { font-size: 1.6rem; }
.qra-lp.qra-lp-page-main .qra-lp-tier .qra-lp-amount b { font-size: clamp(2.8rem, 2.2rem + 1.6vw, 3.6rem); }
.qra-lp.qra-lp-page-main .qra-lp-tier .qra-lp-card-cta { margin-top: auto; }
.qra-lp.qra-lp-page-main .qra-lp-tier-tag { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-main .qra-lp-tier-plus { font-weight: 600; font-size: var(--qra-lp-s-sm); margin-bottom: -4px; }
.qra-lp.qra-lp-page-main .qra-lp-tier .qra-lp-incl { margin-bottom: 8px; }
.qra-lp.qra-lp-page-main .qra-lp-btn-outline { background: transparent; color: var(--qra-lp-ink); border: 1.5px solid color-mix(in srgb, var(--qra-lp-ink) 22%, transparent); }
.qra-lp.qra-lp-page-main .qra-lp-btn-outline:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-main .qra-lp-tiers-note { margin-top: 28px; color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
/* comparison table under the plan cards; the Showcase column is tinted like its card */
.qra-lp.qra-lp-page-main .qra-lp-compare-box { margin-top: clamp(48px, 5vw, 64px); }
.qra-lp .qra-lp-compare-box .qra-lp-compare { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-compare-box .qra-lp-compare caption { text-align: left; font-family: var(--qra-lp-f-display); font-weight: 600; font-size: 1.5rem; margin-bottom: 18px; }
.qra-lp .qra-lp-compare-box .qra-lp-compare th, .qra-lp .qra-lp-compare-box .qra-lp-compare td { padding: 13px 8px; border-bottom: 1px solid var(--qra-lp-line); text-align: center; vertical-align: middle; }
.qra-lp .qra-lp-compare-box .qra-lp-compare thead th { font-family: var(--qra-lp-f-display); font-size: 1.15rem; font-weight: 700; vertical-align: bottom; width: 17%; }
.qra-lp .qra-lp-compare-box .qra-lp-compare thead th small { display: block; font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); font-weight: 400; color: var(--qra-lp-muted); margin-top: 2px; }
.qra-lp .qra-lp-compare-box .qra-lp-compare thead th:first-child { width: auto; text-align: left; padding-left: 0; font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-compare-box .qra-lp-compare tbody th { text-align: left; font-weight: 500; padding-left: 0; }
.qra-lp .qra-lp-compare-box .qra-lp-compare th:nth-child(3), .qra-lp .qra-lp-compare-box .qra-lp-compare td:nth-child(3) { background: color-mix(in srgb, var(--qra-lp-brand) 7%, transparent); }
.qra-lp .qra-lp-compare-box .qra-lp-compare .qra-lp-tick { vertical-align: middle; }
.qra-lp .qra-lp-compare-box .qra-lp-compare .qra-lp-no { color: var(--qra-lp-muted); }
@media (max-width: 560px) {
.qra-lp .qra-lp-compare-box .qra-lp-compare thead th { width: 50px; font-size: .82rem; padding-inline: 2px; }
.qra-lp .qra-lp-compare-box .qra-lp-compare tbody th { font-size: .9rem; padding-right: 10px; }
.qra-lp .qra-lp-compare-box .qra-lp-compare thead th:first-child { width: auto; }
.qra-lp .qra-lp-compare-box .qra-lp-compare td { padding-inline: 4px; }
/* prices are on the cards right above; the narrow columns keep only the plan names */
.qra-lp .qra-lp-compare-box .qra-lp-compare thead th small { display: none; }
}
.qra-lp.qra-lp-page-main .qra-lp-tiers-note a { font-weight: 600; text-underline-offset: 3px; white-space: nowrap; }
/* interactive plan matrix (classes added by qra-lp.js): tick rows, the plan that has them all lights up */
.qra-lp .qra-lp-compare-box .qra-lp-matrix-hint { display: block; margin-top: 6px; font-family: var(--qra-lp-f-body); font-size: var(--qra-lp-s-sm); font-weight: 400; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix tbody tr { cursor: pointer; transition: background-color .2s; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix tbody tr:hover { background: color-mix(in srgb, var(--qra-lp-brand) 5%, transparent); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix tbody tr.qra-lp-on { background: color-mix(in srgb, var(--qra-lp-brand) 9%, transparent); }
.qra-lp .qra-lp-compare-box .qra-lp-need { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-weight: inherit; font-size: inherit; }
.qra-lp .qra-lp-compare-box .qra-lp-need input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--qra-lp-brand); cursor: pointer; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix tr.qra-lp-on .qra-lp-need { font-weight: 600; }
/* the picked plan's column glows, the others step back */
.qra-lp .qra-lp-compare-box .qra-lp-matrix.qra-lp-has-pick :is(th, td):nth-child(3):not(.qra-lp-picked) { background: transparent; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix :is(th, td) { transition: background-color .25s, opacity .25s; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix :is(th, td).qra-lp-picked { background: color-mix(in srgb, var(--qra-lp-brand) 16%, transparent); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix thead th.qra-lp-picked { color: var(--qra-lp-brand); box-shadow: inset 0 3px 0 var(--qra-lp-brand); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix td.qra-lp-dim > span { opacity: .35; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix tr.qra-lp-on td.qra-lp-picked .qra-lp-tick { transform: scale(1.2); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix .qra-lp-tick { transition: transform .2s; }
/* hovering a plan column on a desktop shows it as one strip */
@media (hover: hover) {
.qra-lp .qra-lp-compare-box .qra-lp-matrix:has(:is(th, td):nth-child(2):hover) :is(th, td):nth-child(2),
.qra-lp .qra-lp-compare-box .qra-lp-matrix:has(:is(th, td):nth-child(3):hover) :is(th, td):nth-child(3),
.qra-lp .qra-lp-compare-box .qra-lp-matrix:has(:is(th, td):nth-child(4):hover) :is(th, td):nth-child(4) { outline: 0; box-shadow: inset 1px 0 0 var(--qra-lp-line), inset -1px 0 0 var(--qra-lp-line); }
}
/* the plan card above follows the pick */
.qra-lp.qra-lp-page-main .qra-lp-tier { transition: border-color .25s, box-shadow .25s, transform .25s; }
.qra-lp.qra-lp-page-main .qra-lp-tier.qra-lp-tier-picked { border-color: var(--qra-lp-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qra-lp-brand) 25%, transparent), var(--qra-lp-shadow); }
/* result bar: sticks to the bottom of the screen while the table is in view */
.qra-lp .qra-lp-compare-box .qra-lp-matrix-bar { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 5; margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 16px 20px; border-radius: var(--qra-lp-radius); background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-line); box-shadow: var(--qra-lp-shadow); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-bar.qra-lp-has-pick { border-color: var(--qra-lp-brand); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-txt { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-txt b { font-family: var(--qra-lp-f-display); font-size: 1.35rem; line-height: 1.2; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-bar.qra-lp-has-pick .qra-lp-matrix-txt b { color: var(--qra-lp-brand); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-txt span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-clear { background: none; border: 0; padding: 8px 4px; font: inherit; font-size: var(--qra-lp-s-sm); color: var(--qra-lp-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-clear:hover { color: var(--qra-lp-brand); }
@media (max-width: 560px) {
.qra-lp .qra-lp-compare-box .qra-lp-matrix-bar { padding: 14px 16px; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-cta { flex: 1 1 0; order: 3; min-height: 46px; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-clear { order: 4; }
.qra-lp .qra-lp-compare-box .qra-lp-matrix-txt b { font-size: 1.2rem; }
.qra-lp .qra-lp-compare-box .qra-lp-need { gap: 8px; }
}
@media (prefers-reduced-motion: no-preference) {
.qra-lp .qra-lp-compare-box .qra-lp-matrix-bar.qra-lp-bump { animation: qra-lp-bump .45s ease-out; }
@keyframes qra-lp-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-6px); } 100% { transform: none; } }
}
/* === end main landing === */
/* all landings (owner, 2026-10-22): the 20px of extra side padding that phones have also applies up to 1199px,
to the page content and the footer only; from 1200px the wide container needs none. The top bar and the header
keep their own padding everywhere */
@media (min-width: 761px) and (max-width: 1199px) {
.qra-lp main .qra-lp-wrap, .qra-lp .qra-lp-foot .qra-lp-wrap { padding-left: calc(var(--qra-lp-gutter) + 20px); padding-right: calc(var(--qra-lp-gutter-r) + 20px); }
}
/* all landings: the three final CTA points stack on the narrowest desktop widths, where one row overflows */
@media (min-width: 761px) and (max-width: 820px) {
.qra-lp .qra-lp-final-one .qra-lp-final-points { grid-auto-flow: row; justify-items: center; }
}
/* === home (static HOME page, .qra-lp-page-home only) === */
/* hero phone carousel: two demo sites cross-fade; the status bar follows each site's top colour */
.qra-lp.qra-lp-page-home .qra-lp-carousel .qra-lp-shot { opacity: 0; transition: opacity .7s ease; }
.qra-lp.qra-lp-page-home .qra-lp-carousel .qra-lp-shot.qra-lp-on { opacity: 1; }
.qra-lp.qra-lp-page-home .qra-lp-carousel .qra-lp-sb { transition: background-color .7s ease, color .7s ease; }
/* each slide has its own caption; all captions share one grid cell, so the block keeps the height
of the longest one and nothing below moves when the slide changes */
.qra-lp.qra-lp-page-home .qra-lp-carousel figcaption { display: grid; justify-items: center; gap: 4px; text-align: center; }
.qra-lp.qra-lp-page-home .qra-lp-slide-names { display: grid; }
.qra-lp.qra-lp-page-home .qra-lp-slide-name { grid-area: 1 / 1; opacity: 0; transition: opacity .7s ease; }
.qra-lp.qra-lp-page-home .qra-lp-slide-name.qra-lp-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .qra-lp.qra-lp-page-home .qra-lp-slide-name { transition: none; } }
.qra-lp.qra-lp-page-home .qra-lp-dots { display: inline-flex; }
.qra-lp.qra-lp-page-home .qra-lp-dots button { width: 26px; height: 26px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.qra-lp.qra-lp-page-home .qra-lp-dots button::before { content: ""; width: 8px; height: 8px; border-radius: 99px; background: color-mix(in srgb, var(--qra-lp-muted) 50%, transparent); transition: width .3s, background-color .3s; }
.qra-lp.qra-lp-page-home .qra-lp-dots button[aria-pressed="true"]::before { width: 20px; background: var(--qra-lp-brand); }
@media (prefers-reduced-motion: reduce) { .qra-lp.qra-lp-page-home .qra-lp-carousel .qra-lp-shot, .qra-lp.qra-lp-page-home .qra-lp-carousel .qra-lp-sb { transition: none; } }
/* founder block: monogram (until a photo arrives) beside a short story and the links */
.qra-lp.qra-lp-page-home .qra-lp-founder { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; max-width: 960px; }
.qra-lp.qra-lp-page-home .qra-lp-founder-pic { width: 168px; height: 168px; border-radius: 50%; display: grid; place-items: center; font-family: var(--qra-lp-f-display); font-weight: 700; font-size: 3.6rem; letter-spacing: .04em; color: var(--qra-lp-brand); background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); border: 2px solid var(--qra-lp-brand); }
.qra-lp.qra-lp-page-home .qra-lp-founder-txt { display: grid; gap: 14px; }
.qra-lp.qra-lp-page-home .qra-lp-founder-txt p { max-width: 62ch; }
.qra-lp.qra-lp-page-home .qra-lp-founder-links { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 6px; }
.qra-lp.qra-lp-page-home .qra-lp-founder-links a { font-weight: 600; text-underline-offset: 4px; }
@media (max-width: 640px) {
.qra-lp.qra-lp-page-home .qra-lp-founder { grid-template-columns: minmax(0, 1fr); }
.qra-lp.qra-lp-page-home .qra-lp-founder-pic { width: 112px; height: 112px; font-size: 2.4rem; }
}
/* who-it's-for and solutions grids: the chips row sits a little lower than on the niche pages */
.qra-lp.qra-lp-page-home #qra-lp-who .qra-lp-trades { margin-top: 36px; }
/* desktop hero (home): text sits at the top; the draft ticket becomes one straight line under both columns
(one row from 1200px; on narrower desktops it folds into two neat rows) */
@media (min-width: 901px) {
.qra-lp.qra-lp-page-home .qra-lp-hero { padding-bottom: clamp(72px, 8vw, 110px); }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-wrap { align-items: start; row-gap: 40px; }
.qra-lp.qra-lp-page-home .qra-lp-stage { display: contents; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket {
position: static; grid-column: 1 / -1; width: 100%; transform: none;
display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 24px;
padding: 18px 22px;
}
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket ul { justify-content: flex-end; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket .qra-lp-stamp { justify-self: end; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket-head { flex-direction: column; gap: 2px; border-bottom: 0; padding-bottom: 0; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket ul { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket li { white-space: nowrap; gap: 6px; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket-cost { gap: 10px; border-top: 0; padding-top: 0; white-space: nowrap; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-stamp { transform: none; white-space: nowrap; }
}
@media (min-width: 1200px) {
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 18px; padding-inline: 18px; font-size: 12px; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket ul { flex-wrap: nowrap; gap: 8px 12px; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-ticket-head { font-size: 11px; }
.qra-lp.qra-lp-page-home .qra-lp-hero .qra-lp-stamp { font-size: 11px; padding: 6px 10px; }
}
/* final CTA points: three in a row only when they fit; between phone and wide desktop they stack centred */
@media (min-width: 761px) and (max-width: 1000px) {
.qra-lp.qra-lp-page-home .qra-lp-final-one .qra-lp-final-points { grid-auto-flow: row; justify-items: center; }
}
/* === end home === */
/* === hub pages (.qra-lp-page-hub): profession map, plan strip === */
.qra-lp .qra-lp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* hero: big promise, the search front and centre, four honest numbers */
.qra-lp.qra-lp-page-hub .qra-lp-hub-hero {
padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px);
background: radial-gradient(900px 420px at 85% -10%, color-mix(in srgb, var(--qra-lp-brand) 13%, transparent), transparent 70%), var(--qra-lp-bg);
}
.qra-lp.qra-lp-page-hub .qra-lp-hub-hero .qra-lp-crumbs { margin-bottom: 26px; }
.qra-lp.qra-lp-page-hub .qra-lp-hub-hero-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(32px, 5vw, 72px); align-items: end; }
@media (max-width: 960px) { .qra-lp.qra-lp-page-hub .qra-lp-hub-hero-grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }
.qra-lp.qra-lp-page-hub .qra-lp-hub-hero h1 { font-size: var(--qra-lp-s-hero); font-weight: 300; letter-spacing: -1px; line-height: 1.02; }
.qra-lp.qra-lp-page-hub .qra-lp-hub-hero h1 em { font-style: normal; font-weight: 600; color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-hub-hero .qra-lp-lede { margin-top: 22px; color: var(--qra-lp-ink); }
.qra-lp.qra-lp-page-hub .qra-lp-prof-search { position: relative; margin-top: 32px; max-width: 640px; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-search svg { position: absolute; left: 20px; top: 50%; width: 24px; height: 24px; transform: translateY(-50%); color: var(--qra-lp-muted); pointer-events: none; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-search input {
min-height: 64px; padding: 0 20px 0 58px; font-size: 1.1rem; font-weight: 500;
border: 1.5px solid var(--qra-lp-line); border-radius: 16px; background: var(--qra-lp-surface); box-shadow: var(--qra-lp-shadow);
transition: border-color .2s, box-shadow .2s;
}
.qra-lp.qra-lp-page-hub .qra-lp-prof-search input:focus { border-color: var(--qra-lp-brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--qra-lp-brand) 18%, transparent), var(--qra-lp-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-prof-search input::-webkit-search-cancel-button { cursor: pointer; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-popular span { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-muted); margin-right: 4px; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-popular a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid var(--qra-lp-line); border-radius: 99px; background: var(--qra-lp-surface); color: var(--qra-lp-ink); text-decoration: none; font-size: var(--qra-lp-s-sm); font-weight: 600; transition: border-color .2s, color .2s; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-popular a:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-hub-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 960px) { .qra-lp.qra-lp-page-hub .qra-lp-hub-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qra-lp.qra-lp-page-hub .qra-lp-hub-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qra-lp.qra-lp-page-hub .qra-lp-hub-stats li { padding: 18px 18px 16px; border-radius: 16px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); box-shadow: var(--qra-lp-card-shadow); display: grid; gap: 4px; }
.qra-lp.qra-lp-page-hub .qra-lp-hub-stats b { font-family: var(--qra-lp-f-display); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.6rem); font-weight: 700; line-height: 1; color: var(--qra-lp-brand); font-variant-numeric: tabular-nums; }
.qra-lp.qra-lp-page-hub .qra-lp-hub-stats span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); line-height: 1.35; }
/* profession map */
.qra-lp.qra-lp-page-hub .qra-lp-pmap { padding-top: clamp(48px, 6vw, 72px); }
.qra-lp.qra-lp-page-hub .qra-lp-pmap-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; margin-bottom: 20px; }
.qra-lp.qra-lp-page-hub .qra-lp-pmap-head .qra-lp-section-head { margin-bottom: 0; }
.qra-lp.qra-lp-page-hub .qra-lp-pmap-count { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-muted); }
/* jump bar: sticks under the header while the map scrolls, and scrolls sideways when it is too long */
.qra-lp.qra-lp-page-hub .qra-lp-sector-nav {
position: sticky; top: calc(73px + env(safe-area-inset-top, 0px)); z-index: 10;
display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 12px 2px;
background: color-mix(in srgb, var(--qra-lp-bg) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.qra-lp.qra-lp-page-hub .qra-lp-sector-nav::-webkit-scrollbar { display: none; }
.qra-lp.qra-lp-page-hub .qra-lp-sector-nav a { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--qra-lp-line); border-radius: 99px; background: var(--qra-lp-surface); color: var(--qra-lp-ink); text-decoration: none; font-size: var(--qra-lp-s-sm); font-weight: 600; white-space: nowrap; transition: background-color .2s, border-color .2s, color .2s; }
.qra-lp.qra-lp-page-hub .qra-lp-sector-nav a small { font-family: var(--qra-lp-f-mono); font-size: .72rem; font-weight: 500; color: var(--qra-lp-muted); }
.qra-lp.qra-lp-page-hub .qra-lp-sector-nav a:hover { border-color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-sector-nav a[aria-current="true"] { background: var(--qra-lp-brand); border-color: var(--qra-lp-brand); color: var(--qra-lp-brand-ink); }
.qra-lp.qra-lp-page-hub .qra-lp-sector-nav a[aria-current="true"] small { color: inherit; opacity: .75; }
/* industry cards flow in balanced columns (masonry), each a list of professions */
.qra-lp.qra-lp-page-hub .qra-lp-sectors { margin-top: 24px; column-width: 330px; column-gap: 20px; }
.qra-lp.qra-lp-page-hub .qra-lp-sector {
break-inside: avoid; margin: 0 0 20px; scroll-margin-top: 150px;
background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); border-radius: 18px; box-shadow: var(--qra-lp-card-shadow); overflow: hidden;
transition: border-color var(--qra-lp-ease), box-shadow var(--qra-lp-ease);
}
.qra-lp.qra-lp-page-hub .qra-lp-sector:hover { border-color: color-mix(in srgb, var(--qra-lp-brand) 45%, var(--qra-lp-line)); }
.qra-lp.qra-lp-page-hub .qra-lp-sector-head { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px 18px 14px; border-bottom: 1px solid var(--qra-lp-line); }
.qra-lp.qra-lp-page-hub .qra-lp-sector-head .qra-lp-ico { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-sector-head .qra-lp-ico svg { width: 24px; height: 24px; }
.qra-lp.qra-lp-page-hub .qra-lp-sector-head h3 { font-size: 1.28rem; }
.qra-lp.qra-lp-page-hub .qra-lp-sector-head p { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-xs); line-height: 1.45; margin-top: 3px; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; }
.qra-lp.qra-lp-page-hub .qra-lp-prof {
display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name go" "tags tags"; align-items: center; gap: 6px 12px;
padding: 11px 12px; border-radius: 11px; color: var(--qra-lp-ink); text-decoration: none; transition: background-color .2s;
}
.qra-lp.qra-lp-page-hub .qra-lp-prof:hover { background: color-mix(in srgb, var(--qra-lp-brand) 8%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-prof-name { grid-area: name; font-weight: 500; line-height: 1.3; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-tags { grid-area: tags; display: flex; flex-wrap: wrap; gap: 4px; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-tags:empty { display: none; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-tags i { font-style: normal; font-family: var(--qra-lp-f-mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qra-lp-muted); border: 1px solid var(--qra-lp-line); border-radius: 5px; padding: 1px 6px; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-go { grid-area: go; font-family: var(--qra-lp-f-mono); font-size: .72rem; white-space: nowrap; color: var(--qra-lp-muted); border: 1px dashed var(--qra-lp-line); border-radius: 99px; padding: 3px 10px; transition: color .2s, border-color .2s; }
.qra-lp.qra-lp-page-hub .qra-lp-prof:hover .qra-lp-prof-go { color: var(--qra-lp-brand); border-color: var(--qra-lp-brand); }
/* professions with their own page stand out: tinted row, bold name, solid accent button */
.qra-lp.qra-lp-page-hub .qra-lp-prof-live { background: color-mix(in srgb, var(--qra-lp-brand) 6%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-prof-live .qra-lp-prof-name { font-weight: 700; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-live .qra-lp-prof-go { border: 0; background: var(--qra-lp-brand); color: var(--qra-lp-brand-ink); font-weight: 600; }
.qra-lp.qra-lp-page-hub .qra-lp-prof-live:hover .qra-lp-prof-go { color: var(--qra-lp-brand-ink); background: var(--qra-lp-brand-hover); }
.qra-lp.qra-lp-page-hub .qra-lp-pmap-empty { margin-top: 24px; padding: clamp(24px, 4vw, 40px); border-radius: 18px; border: 1.5px dashed color-mix(in srgb, var(--qra-lp-brand) 45%, var(--qra-lp-line)); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.qra-lp.qra-lp-page-hub .qra-lp-pmap-empty p { max-width: 60ch; color: var(--qra-lp-muted); }
.qra-lp.qra-lp-page-hub .qra-lp-pmap-empty b { color: var(--qra-lp-ink); font-family: var(--qra-lp-f-display); font-size: 1.3rem; display: block; margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) { .qra-lp.qra-lp-page-hub .qra-lp-sector, .qra-lp.qra-lp-page-hub .qra-lp-prof { transition: none; } }
/* plan strip */
.qra-lp.qra-lp-page-hub .qra-lp-plan-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .qra-lp.qra-lp-page-hub .qra-lp-plan-strip { grid-template-columns: minmax(0, 1fr); max-width: 520px; } }
.qra-lp.qra-lp-page-hub .qra-lp-plan-mini { display: grid; gap: 8px; align-content: start; padding: 24px; border-radius: 18px; background: var(--qra-lp-surface); border: 1.5px solid var(--qra-lp-line); box-shadow: var(--qra-lp-card-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-plan-mini-main { border: 2px solid var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-plan-tag { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .1em; color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-plan-name { font-family: var(--qra-lp-f-display); font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.qra-lp.qra-lp-page-hub .qra-lp-plan-price { display: flex; align-items: baseline; gap: 6px; }
.qra-lp.qra-lp-page-hub .qra-lp-plan-price b { font-family: var(--qra-lp-f-display); font-size: 2.4rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.qra-lp.qra-lp-page-hub .qra-lp-plan-price span { color: var(--qra-lp-muted); }
.qra-lp.qra-lp-page-hub .qra-lp-plan-mini p { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp.qra-lp-page-hub .qra-lp-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 36px; }
/* the search form is not a card: drop the boxed form styles every landing form gets */
.qra-lp.qra-lp-page-hub form.qra-lp-prof-search { display: block; background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; }
.qra-lp.qra-lp-page-hub .qra-lp-prof { grid-template-areas: "name go"; }
/* on a mouse, the "Free draft" pill shows on hover only, so the professions with a page stand out */
@media (hover: hover) {
.qra-lp.qra-lp-page-hub .qra-lp-prof:not(.qra-lp-prof-live) .qra-lp-prof-go { opacity: 0; transition: opacity .2s, color .2s, border-color .2s; }
.qra-lp.qra-lp-page-hub .qra-lp-prof:not(.qra-lp-prof-live):hover .qra-lp-prof-go,
.qra-lp.qra-lp-page-hub .qra-lp-prof:not(.qra-lp-prof-live):focus-visible .qra-lp-prof-go { opacity: 1; }
}
/* rows without a page: the name is text, only the Free draft pill is a link */
.qra-lp.qra-lp-page-hub div.qra-lp-prof:hover { background: none; }
.qra-lp.qra-lp-page-hub a.qra-lp-prof-go { text-decoration: none; }
.qra-lp.qra-lp-page-hub a.qra-lp-prof-go:hover, .qra-lp.qra-lp-page-hub a.qra-lp-prof-go:focus-visible { color: var(--qra-lp-brand-ink); background: var(--qra-lp-brand); border-color: var(--qra-lp-brand); border-style: solid; opacity: 1; }
/* === end hub === */
/* === industry hubs (generated /industries//, styled as hubs) === */
.qra-lp.qra-lp-page-hub .qra-lp-btn-outline { background: transparent; color: var(--qra-lp-ink); border: 1.5px solid color-mix(in srgb, var(--qra-lp-ink) 22%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-btn-outline:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
/* profession map: names with a hub card are links; industry titles link to their hub */
.qra-lp.qra-lp-page-hub a.qra-lp-prof-name { color: inherit; text-decoration: none; }
.qra-lp.qra-lp-page-hub a.qra-lp-prof-name:hover { color: var(--qra-lp-brand); text-decoration: underline; text-underline-offset: 3px; }
.qra-lp.qra-lp-page-hub .qra-lp-sector-head h3 a { color: inherit; text-decoration: none; }
.qra-lp.qra-lp-page-hub .qra-lp-sector-head h3 a:hover { color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-sector-head h3 a::after { content: " →"; color: var(--qra-lp-brand); }
/* hero: industry badge, and a card with what a page here shows */
.qra-lp.qra-lp-page-hub .qra-lp-ih-hero .qra-lp-hub-hero-grid { align-items: center; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-badge { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; padding: 6px 14px 6px 6px; border-radius: 99px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-line); font-weight: 600; font-size: var(--qra-lp-s-sm); }
.qra-lp.qra-lp-page-hub .qra-lp-ih-badge .qra-lp-ico { width: 32px; height: 32px; border-radius: 99px; display: grid; place-items: center; background: color-mix(in srgb, var(--qra-lp-brand) 14%, transparent); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-ih-badge .qra-lp-ico svg { width: 18px; height: 18px; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-hero .qra-lp-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-card { padding: 26px; border-radius: 20px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); box-shadow: var(--qra-lp-shadow); display: grid; gap: 16px; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-card li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; line-height: 1.4; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-card li .qra-lp-tick { margin-top: 2px; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 14px; border-top: 1px dashed var(--qra-lp-line); font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); color: var(--qra-lp-muted); }
.qra-lp.qra-lp-page-hub .qra-lp-ih-card-foot b { color: var(--qra-lp-ok); font-weight: 600; }
/* professions of the industry: cards, the anchors the profession map links to */
.qra-lp.qra-lp-page-hub .qra-lp-pro-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
@media (min-width: 961px) { .qra-lp.qra-lp-page-hub .qra-lp-pro-grid { grid-template-columns: repeat(var(--qra-lp-cols, 4), minmax(0, 1fr)); } }
.qra-lp.qra-lp-page-hub .qra-lp-pro-card {
display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 22px; border-radius: 18px; scroll-margin-top: 110px;
background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); box-shadow: var(--qra-lp-card-shadow);
transition: border-color var(--qra-lp-ease), transform var(--qra-lp-ease), box-shadow var(--qra-lp-ease);
}
.qra-lp.qra-lp-page-hub .qra-lp-pro-card:hover { border-color: var(--qra-lp-brand); transform: translateY(-3px); box-shadow: var(--qra-lp-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-pro-card:target { border-color: var(--qra-lp-brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--qra-lp-brand) 30%, transparent), var(--qra-lp-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-pro-card-live { border: 2px solid var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-pro-card h3 { font-size: 1.35rem; }
.qra-lp.qra-lp-page-hub .qra-lp-pro-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.qra-lp.qra-lp-page-hub .qra-lp-pro-tags span { font-family: var(--qra-lp-f-mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--qra-lp-muted); border: 1px solid var(--qra-lp-line); border-radius: 6px; padding: 2px 7px; }
.qra-lp.qra-lp-page-hub .qra-lp-pro-card .qra-lp-btn { margin-top: auto; }
.qra-lp.qra-lp-page-hub .qra-lp-pro-card .qra-lp-pro-tags { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .qra-lp.qra-lp-page-hub .qra-lp-pro-card:hover { transform: none; } }
.qra-lp.qra-lp-page-hub #qra-lp-pros .qra-lp-trades { margin-top: 40px; }
/* what a page can do: solution cards with the plan that has it */
.qra-lp.qra-lp-page-hub .qra-lp-sol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-card { display: grid; gap: 10px; align-content: start; padding: 24px; border-radius: 18px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); box-shadow: var(--qra-lp-card-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-sol-card .qra-lp-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); margin-bottom: 4px; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-card .qra-lp-ico svg { width: 26px; height: 26px; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-card h3 { font-size: 1.3rem; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-card p { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp.qra-lp-page-hub .qra-lp-sol-plan { justify-self: start; margin-top: 4px; font-family: var(--qra-lp-f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 99px; border: 1px solid var(--qra-lp-line); color: var(--qra-lp-muted); }
.qra-lp.qra-lp-page-hub .qra-lp-sol-plan-card { color: var(--qra-lp-ok); border-color: color-mix(in srgb, var(--qra-lp-ok) 45%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-sol-plan-showcase { color: var(--qra-lp-brand); border-color: color-mix(in srgb, var(--qra-lp-brand) 45%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-sol-plan-hub { color: var(--qra-lp-ink); border-color: color-mix(in srgb, var(--qra-lp-ink) 35%, transparent); }
/* hero picture slot: a generic drawing with the industry icon until a real picture is set in sectors.json;
on wide screens the "What your page shows" card tucks under the picture's lower left corner */
.qra-lp.qra-lp-page-hub .qra-lp-ih-side { position: relative; display: grid; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-visual { margin: 0; color: var(--qra-lp-ink); }
.qra-lp.qra-lp-page-hub .qra-lp-ih-art { display: block; width: 100%; height: auto; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-img { display: block; width: 100%; height: auto; aspect-ratio: 7 / 6; object-fit: cover; border-radius: 22px; box-shadow: var(--qra-lp-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-ih-card { position: relative; z-index: 1; }
@media (min-width: 961px) {
.qra-lp.qra-lp-page-hub .qra-lp-ih-hero .qra-lp-hub-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.qra-lp.qra-lp-page-hub .qra-lp-ih-visual { width: 88%; justify-self: end; }
/* like the CL ticket: the card hangs out of the hero into the next band, tilted 2deg */
.qra-lp.qra-lp-page-hub .qra-lp-ih-card { position: absolute; left: 170px; bottom: calc(-1 * (clamp(56px, 7vw, 96px) + 130px)); width: min(300px, 62%); z-index: 3; transform: rotate(2deg); box-shadow: var(--qra-lp-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-ih-visual { width: 92%; }
}
@media (max-width: 960px) {
.qra-lp.qra-lp-page-hub .qra-lp-ih-side { justify-items: center; }
.qra-lp.qra-lp-page-hub .qra-lp-ih-visual { width: min(400px, 100%); }
.qra-lp.qra-lp-page-hub .qra-lp-ih-card { width: 100%; max-width: 420px; margin-top: -36px; }
}
/* === end industry hubs === */
/* === solution hubs (generated /solutions//) and the /solutions/ index === */
/* hero: the solution badge sits next to a pill naming the plan that has it */
.qra-lp.qra-lp-page-hub .qra-lp-sh-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.qra-lp.qra-lp-page-hub .qra-lp-sh-badges .qra-lp-ih-badge { margin-bottom: 0; }
.qra-lp.qra-lp-page-hub .qra-lp-sh-plan { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 99px; font-family: var(--qra-lp-f-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; text-decoration: none; border: 1px solid var(--qra-lp-line); color: var(--qra-lp-muted); background: var(--qra-lp-surface); transition: border-color .2s, color .2s; }
.qra-lp.qra-lp-page-hub .qra-lp-sh-plan.qra-lp-sol-plan-card { color: var(--qra-lp-ok); border-color: color-mix(in srgb, var(--qra-lp-ok) 45%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-sh-plan.qra-lp-sol-plan-showcase { color: var(--qra-lp-brand); border-color: color-mix(in srgb, var(--qra-lp-brand) 45%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-sh-plan.qra-lp-sol-plan-hub { color: var(--qra-lp-ink); border-color: color-mix(in srgb, var(--qra-lp-ink) 35%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-sh-plan:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
/* plan ladder: three plan cards joined by a line through their nodes; the plans that include it light up */
.qra-lp.qra-lp-page-hub .qra-lp-ladder { list-style: none; margin: 0; padding: 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; position: relative; }
.qra-lp.qra-lp-page-hub .qra-lp-ladder::before { content: ""; position: absolute; top: 22px; left: 40px; right: calc(33.33% - 60px); height: 2px; background: linear-gradient(90deg, var(--qra-lp-line), var(--qra-lp-brand)); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-step {
position: relative; display: grid; gap: 8px; align-content: start; padding: 34px 24px 24px; border-radius: 18px;
background: var(--qra-lp-surface); border: 1.5px dashed var(--qra-lp-line); color: var(--qra-lp-muted);
transition: transform var(--qra-lp-ease), box-shadow var(--qra-lp-ease);
}
.qra-lp.qra-lp-page-hub .qra-lp-ladder-step .qra-lp-plan-name, .qra-lp.qra-lp-page-hub .qra-lp-ladder-step .qra-lp-plan-price b { color: var(--qra-lp-muted); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-on { border: 1.5px solid color-mix(in srgb, var(--qra-lp-brand) 45%, var(--qra-lp-line)); color: var(--qra-lp-ink); box-shadow: var(--qra-lp-card-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-on .qra-lp-plan-name, .qra-lp.qra-lp-page-hub .qra-lp-ladder-on .qra-lp-plan-price b { color: var(--qra-lp-ink); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-on p { color: var(--qra-lp-muted); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-start { border: 2px solid var(--qra-lp-brand); box-shadow: var(--qra-lp-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-node {
position: absolute; top: -22px; left: 22px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
font-family: var(--qra-lp-f-display); font-weight: 700; font-size: 1.1rem; background: var(--qra-lp-surface); color: var(--qra-lp-muted); border: 2px solid var(--qra-lp-line);
}
.qra-lp.qra-lp-page-hub .qra-lp-ladder-on .qra-lp-ladder-node { background: var(--qra-lp-brand); border-color: var(--qra-lp-brand); color: var(--qra-lp-brand-ink); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-node svg { width: 22px; height: 22px; }
/* the "Starts here" flag is stamped on, tilted like the hanging card */
.qra-lp.qra-lp-page-hub .qra-lp-ladder-flag { position: absolute; top: -16px; right: 18px; padding: 5px 11px; border-radius: 7px; background: var(--qra-lp-mark); color: var(--qra-lp-mark-ink); font-family: var(--qra-lp-f-mono); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; transform: rotate(3deg); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .4); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-state { justify-self: start; margin-top: 6px; font-family: var(--qra-lp-f-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; padding: 3px 10px; border-radius: 99px; border: 1px solid var(--qra-lp-line); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-on .qra-lp-ladder-state { color: var(--qra-lp-ok); border-color: color-mix(in srgb, var(--qra-lp-ok) 45%, transparent); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-ask .qra-lp-ladder-step { border-style: solid; color: var(--qra-lp-ink); }
.qra-lp.qra-lp-page-hub .qra-lp-ladder-ask::before { background: var(--qra-lp-line); }
@media (max-width: 860px) {
.qra-lp.qra-lp-page-hub .qra-lp-ladder { grid-template-columns: minmax(0, 1fr); gap: 34px; max-width: 520px; }
.qra-lp.qra-lp-page-hub .qra-lp-ladder::before { top: 22px; bottom: 40px; left: 43px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--qra-lp-line), var(--qra-lp-brand)); }
}
/* who uses it: industries with their professions as chips (a profession with its own page is filled) */
.qra-lp.qra-lp-page-hub .qra-lp-users { column-width: 300px; column-gap: 18px; }
.qra-lp.qra-lp-page-hub .qra-lp-user-group { break-inside: avoid; margin: 0 0 18px; padding: 18px; border-radius: 18px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); box-shadow: var(--qra-lp-card-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-user-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; font-family: var(--qra-lp-f-display); font-weight: 700; font-size: 1.15rem; }
.qra-lp.qra-lp-page-hub .qra-lp-user-head .qra-lp-ico { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-user-head .qra-lp-ico svg { width: 20px; height: 20px; }
.qra-lp.qra-lp-page-hub .qra-lp-user-head a { color: inherit; text-decoration: none; }
.qra-lp.qra-lp-page-hub .qra-lp-user-head a:hover { color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-user-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.qra-lp.qra-lp-page-hub .qra-lp-user-group li a, .qra-lp.qra-lp-page-hub .qra-lp-user-group li span { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--qra-lp-line); color: var(--qra-lp-ink); text-decoration: none; font-size: var(--qra-lp-s-sm); font-weight: 500; transition: border-color .2s, color .2s; }
.qra-lp.qra-lp-page-hub .qra-lp-user-group li a:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-user-group li a.qra-lp-user-live { background: var(--qra-lp-brand); border-color: var(--qra-lp-brand); color: var(--qra-lp-brand-ink); font-weight: 600; }
.qra-lp.qra-lp-page-hub #qra-lp-users .qra-lp-trades { margin-top: 32px; }
/* /solutions/ index: the upgrade path, one row per plan, its solutions on the right, a line joining the steps */
.qra-lp.qra-lp-page-hub .qra-lp-tiers-path { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; position: relative; }
.qra-lp.qra-lp-page-hub .qra-lp-tiers-path::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 21px; width: 2px; background: linear-gradient(180deg, var(--qra-lp-ok), var(--qra-lp-brand) 55%, var(--qra-lp-ink)); opacity: .5; }
.qra-lp.qra-lp-page-hub .qra-lp-tier-row { display: grid; grid-template-columns: minmax(0, 290px) minmax(0, 1fr); gap: 24px; align-items: start; position: relative; }
.qra-lp.qra-lp-page-hub .qra-lp-tier-head { position: relative; padding: 4px 0 0 64px; display: grid; gap: 6px; }
.qra-lp.qra-lp-page-hub .qra-lp-tier-head p { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp.qra-lp-page-hub .qra-lp-tier-node { position: absolute; left: 0; top: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--qra-lp-f-display); font-weight: 700; font-size: 1.15rem; color: var(--qra-lp-brand-ink); background: var(--qra-lp-brand); box-shadow: 0 0 0 6px var(--qra-lp-bg); }
.qra-lp.qra-lp-page-hub .qra-lp-tier-card .qra-lp-tier-node { background: var(--qra-lp-ok); color: #fff; }
.qra-lp.qra-lp-page-hub .qra-lp-tier-hub .qra-lp-tier-node { background: var(--qra-lp-ink); color: var(--qra-lp-bg); }
.qra-lp.qra-lp-page-hub .qra-lp-tier-ask .qra-lp-tier-node { background: var(--qra-lp-surface); color: var(--qra-lp-muted); border: 2px dashed var(--qra-lp-line); }
.qra-lp.qra-lp-page-hub .qra-lp-tier-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-link {
display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 16px;
background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); box-shadow: var(--qra-lp-card-shadow); color: var(--qra-lp-ink); text-decoration: none;
transition: border-color var(--qra-lp-ease), transform var(--qra-lp-ease), box-shadow var(--qra-lp-ease);
}
.qra-lp.qra-lp-page-hub .qra-lp-sol-link:hover { border-color: var(--qra-lp-brand); transform: translateY(-3px); box-shadow: var(--qra-lp-shadow); }
.qra-lp.qra-lp-page-hub .qra-lp-sol-link .qra-lp-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-sol-link .qra-lp-ico svg { width: 23px; height: 23px; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-link-txt { display: grid; gap: 2px; min-width: 0; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-link-txt b { font-family: var(--qra-lp-f-display); font-size: 1.12rem; line-height: 1.2; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-link-txt span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-xs); line-height: 1.4; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-link .qra-lp-go { color: var(--qra-lp-brand); font-weight: 700; transition: transform .2s; }
.qra-lp.qra-lp-page-hub .qra-lp-sol-link:hover .qra-lp-go { transform: translateX(4px); }
@media (max-width: 860px) {
.qra-lp.qra-lp-page-hub .qra-lp-tier-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.qra-lp.qra-lp-page-hub .qra-lp-tier-grid { padding-left: 64px; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) { .qra-lp.qra-lp-page-hub .qra-lp-tier-grid { padding-left: 0; } .qra-lp.qra-lp-page-hub .qra-lp-tiers-path::before { display: none; } }
@media (prefers-reduced-motion: reduce) { .qra-lp.qra-lp-page-hub .qra-lp-sol-link:hover, .qra-lp.qra-lp-page-hub .qra-lp-sol-link:hover .qra-lp-go { transform: none; } }
/* === end solution hubs === */
/* ---------- feature list /features/ (FEATURES type, hub look): the full plan matrix, grouped ---------- */
.qra-lp.qra-lp-page-hub .qra-lp-feat-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.qra-lp.qra-lp-page-hub .qra-lp-feat-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px; border: 1px solid var(--qra-lp-line); border-radius: 99px; background: var(--qra-lp-surface); color: var(--qra-lp-ink); text-decoration: none; font-size: var(--qra-lp-s-sm); font-weight: 600; white-space: nowrap; transition: border-color .2s, color .2s; }
.qra-lp.qra-lp-page-hub .qra-lp-feat-jump a:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-feat-jump svg { width: 17px; height: 17px; color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-feat-box { margin-top: 36px; }
/* the plan names stay in view under the site header while the long list scrolls */
.qra-lp .qra-lp-compare-box .qra-lp-feat-table thead th { position: sticky; top: calc(73px + env(safe-area-inset-top, 0px)); z-index: 2; background: var(--qra-lp-bg); padding-top: 16px; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table thead th:nth-child(3) { background: color-mix(in srgb, var(--qra-lp-brand) 7%, var(--qra-lp-bg)); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix.qra-lp-has-pick thead th:nth-child(3):not(.qra-lp-picked) { background: var(--qra-lp-bg); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix thead th.qra-lp-picked { background: color-mix(in srgb, var(--qra-lp-brand) 16%, var(--qra-lp-bg)); }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tbody { scroll-margin-top: 150px; }
/* group heading rows: not tickable */
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tr.qra-lp-grp { cursor: default; background: none; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tr.qra-lp-grp:hover { background: none; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tr.qra-lp-grp th { padding: 34px 0 12px; text-align: left; font-family: var(--qra-lp-f-display); font-size: 1.35rem; font-weight: 700; border-bottom: 2px solid var(--qra-lp-ink); background: none; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tbody:first-of-type tr.qra-lp-grp th { padding-top: 22px; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table .qra-lp-grp-ic { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px; border-radius: 10px; vertical-align: middle; background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table .qra-lp-grp-ic svg { width: 19px; height: 19px; }
/* a feature: its name, and one plain line under it */
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tbody th { padding-block: 15px; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tbody th b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tbody th small { display: block; margin-top: 3px; font-weight: 400; font-size: var(--qra-lp-s-sm); line-height: 1.45; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-compare-box .qra-lp-matrix.qra-lp-feat-table tr.qra-lp-on .qra-lp-need { font-weight: inherit; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table .qra-lp-need > span { min-width: 0; }
.qra-lp.qra-lp-page-hub .qra-lp-feat-note { margin-top: 22px; color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
@media (max-width: 760px) {
.qra-lp.qra-lp-page-hub .qra-lp-feat-jump { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
.qra-lp.qra-lp-page-hub .qra-lp-feat-jump::-webkit-scrollbar { display: none; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tr.qra-lp-grp th { font-size: 1.15rem; padding-top: 28px; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table .qra-lp-grp-ic { width: 30px; height: 30px; margin-right: 10px; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tbody th b { font-size: .95rem; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table tbody th small { font-size: .82rem; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table thead th:not(:first-child) { width: 54px; font-size: .74rem; letter-spacing: -.01em; padding-inline: 0; }
.qra-lp .qra-lp-compare-box .qra-lp-feat-table td { padding-inline: 0; }
}
/* features that are on the platform but not in a plan: cards with "ask about this" */
.qra-lp.qra-lp-page-hub .qra-lp-more-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: 16px; }
.qra-lp.qra-lp-page-hub .qra-lp-more-grid li { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 24px; border-radius: 18px; background: var(--qra-lp-bg); border: 1px dashed color-mix(in srgb, var(--qra-lp-brand) 40%, var(--qra-lp-line)); }
.qra-lp.qra-lp-page-hub .qra-lp-more-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 4px; background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); }
.qra-lp.qra-lp-page-hub .qra-lp-more-ic svg { width: 24px; height: 24px; }
.qra-lp.qra-lp-page-hub .qra-lp-more-grid h3 { font-size: 1.25rem; }
.qra-lp.qra-lp-page-hub .qra-lp-more-grid p { margin: 0; color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); line-height: 1.55; }
.qra-lp.qra-lp-page-hub .qra-lp-more-ask { justify-self: start; margin-top: 6px; color: var(--qra-lp-brand); font-weight: 600; font-size: var(--qra-lp-s-sm); text-decoration: underline; text-underline-offset: 3px; }
.qra-lp.qra-lp-page-hub .qra-lp-more-ask:hover { text-decoration-thickness: 2px; }
/* ---------- reading blocks for any page type (owner rule: every page answers real questions in its own words) ---------- */
/* answer: question + paragraphs, "in short" card beside (it sits low, clear of a hanging hero card) */
.qra-lp .qra-lp-answer { display: grid; gap: 32px; }
.qra-lp .qra-lp-answer-main { display: grid; gap: 18px; max-width: 68ch; }
.qra-lp .qra-lp-answer-main h2 { margin-bottom: 4px; }
.qra-lp .qra-lp-answer-main p { margin: 0; font-size: 1.08rem; line-height: 1.75; }
.qra-lp .qra-lp-answer-main p:first-of-type { font-size: var(--qra-lp-s-lg); line-height: 1.6; }
.qra-lp .qra-lp-answer-aside { align-self: end; display: grid; gap: 14px; padding: 26px; border-radius: 18px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); box-shadow: var(--qra-lp-card-shadow); }
.qra-lp .qra-lp-answer-aside > b { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); font-weight: 500; text-transform: uppercase; letter-spacing: .12em; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-answer-aside ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.qra-lp .qra-lp-answer-aside li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; line-height: 1.4; }
.qra-lp .qra-lp-answer-aside li .qra-lp-tick { margin-top: 2px; }
@media (min-width: 961px) {
.qra-lp .qra-lp-answer.qra-lp-answer-has-aside { grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: clamp(40px, 5vw, 80px); }
}
/* checklist: numbered points, two columns on wide screens */
.qra-lp .qra-lp-checklist { list-style: none; margin: 0; padding: 0; counter-reset: qra-lp-check; display: grid; gap: 0 clamp(32px, 4vw, 64px); }
.qra-lp .qra-lp-checklist li { counter-increment: qra-lp-check; display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; row-gap: 6px; padding: 22px 0; border-top: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-checklist li::before { content: counter(qra-lp-check, decimal-leading-zero); grid-row: 1 / 3; font-family: var(--qra-lp-f-mono); font-size: 1.05rem; font-weight: 600; color: var(--qra-lp-brand); padding-top: 3px; }
.qra-lp .qra-lp-checklist h3 { font-size: 1.2rem; }
.qra-lp .qra-lp-checklist p { margin: 0; color: var(--qra-lp-muted); line-height: 1.6; }
@media (min-width: 861px) {
.qra-lp .qra-lp-checklist { grid-template-columns: 1fr 1fr; }
}
/* versus: the places people already use, then the own page they all point to */
.qra-lp .qra-lp-vs { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.qra-lp .qra-lp-vs-card { display: grid; align-content: start; gap: 14px; padding: 24px; border-radius: 18px; background: var(--qra-lp-bg); border: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-vs-card h3 { font-size: 1.2rem; }
.qra-lp .qra-lp-vs-card p { margin: 0; font-size: var(--qra-lp-s-sm); line-height: 1.55; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-vs-card p b { display: block; margin-bottom: 3px; font-family: var(--qra-lp-f-mono); font-size: .76rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.qra-lp .qra-lp-vs-good b { color: var(--qra-lp-ok); }
.qra-lp .qra-lp-vs-miss b { color: var(--qra-lp-no); }
.qra-lp .qra-lp-vs-ours { position: relative; background: color-mix(in srgb, var(--qra-lp-brand) 8%, var(--qra-lp-surface)); border: 2px solid var(--qra-lp-brand); box-shadow: var(--qra-lp-shadow); }
.qra-lp .qra-lp-vs-ours p { color: var(--qra-lp-ink); font-size: var(--qra-lp-s-base); }
.qra-lp .qra-lp-vs-flag { justify-self: start; padding: 4px 10px; border-radius: 99px; background: var(--qra-lp-brand); color: var(--qra-lp-brand-ink); font-family: var(--qra-lp-f-mono); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; }
/* a profession's own sentences on its hub card */
.qra-lp .qra-lp-pro-text { margin: 0; color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); line-height: 1.55; }
/* related pages as pills: the last band of a page, right above the footer (owner rule 2026-10-23) */
.qra-lp .qra-lp-band.qra-lp-more-links { padding-block: 40px 44px; background: var(--qra-lp-bg); border-top: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-more-links .qra-lp-trades { margin-top: 0; }
/* locations directory: provinces/states as cards, each with its cities */
.qra-lp .qra-lp-loc-country { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 16px; font-size: 1.5rem; }
.qra-lp .qra-lp-loc-country:first-of-type { margin-top: 0; }
.qra-lp .qra-lp-loc-country a { color: var(--qra-lp-ink); text-decoration: none; }
.qra-lp .qra-lp-loc-country a:hover { color: var(--qra-lp-brand); }
.qra-lp .qra-lp-loc-country small { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); font-weight: 400; color: var(--qra-lp-muted); text-transform: uppercase; letter-spacing: .1em; }
.qra-lp .qra-lp-loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.qra-lp .qra-lp-loc-card { display: grid; align-content: start; gap: 10px; padding: 20px 22px; border-radius: 16px; background: var(--qra-lp-bg); border: 1px solid var(--qra-lp-card-border); scroll-margin-top: 110px; }
.qra-lp .qra-lp-loc-card h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 1.2rem; }
.qra-lp .qra-lp-loc-card h3 a { color: var(--qra-lp-ink); text-decoration: none; }
.qra-lp .qra-lp-loc-card h3 a:hover { color: var(--qra-lp-brand); text-decoration: underline; text-underline-offset: 3px; }
.qra-lp .qra-lp-loc-card h3 .qra-lp-loc-code { font-family: var(--qra-lp-f-mono); font-size: .75rem; font-weight: 500; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-loc-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.qra-lp .qra-lp-loc-card li a { display: inline-block; padding: 3px 0; color: var(--qra-lp-ink); text-decoration: none; font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-loc-card li a:hover { color: var(--qra-lp-brand); text-decoration: underline; text-underline-offset: 3px; }
.qra-lp .qra-lp-loc-card p { margin: 0; color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
/* geo pages: who in this place could use a page (setting, then professions, then in-text links) */
.qra-lp .qra-lp-local-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.qra-lp .qra-lp-local-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; background: var(--qra-lp-bg); border: 1px solid var(--qra-lp-card-border); }
.qra-lp .qra-lp-local-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--qra-lp-brand) 12%, transparent); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-local-ic svg { width: 23px; height: 23px; }
.qra-lp .qra-lp-local-card h3 { font-size: 1.25rem; }
.qra-lp .qra-lp-local-card p { margin: 0; line-height: 1.6; }
.qra-lp .qra-lp-local-card > p:not(.qra-lp-local-links) { color: var(--qra-lp-muted); }
.qra-lp .qra-lp-local-links { margin-top: auto !important; padding-top: 6px; font-size: var(--qra-lp-s-sm); font-weight: 600; }
.qra-lp .qra-lp-local-links a { color: var(--qra-lp-brand); text-underline-offset: 3px; }
/* geo pages: nearby towns, one line each */
.qra-lp .qra-lp-nearby { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 clamp(24px, 4vw, 48px); }
.qra-lp .qra-lp-nearby li { display: grid; align-content: start; gap: 4px; padding: 16px 0; border-top: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-nearby b { font-family: var(--qra-lp-f-display); font-size: 1.15rem; }
.qra-lp .qra-lp-nearby b a { color: var(--qra-lp-ink); }
.qra-lp .qra-lp-nearby span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); line-height: 1.55; }
/* ---------- old qraway.ca pages (LEGACY type): the old text in the new design ---------- */
.qra-lp .qra-lp-legacy .qra-lp-wrap { max-width: 860px; }
.qra-lp .qra-lp-legacy-head { display: grid; gap: 10px; margin: 6px 0 26px; }
.qra-lp .qra-lp-legacy-head h1 { font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem); font-weight: 600; line-height: 1.08; }
.qra-lp .qra-lp-legacy-head time, .qra-lp .qra-lp-legacy-list time { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); color: var(--qra-lp-muted); text-transform: uppercase; letter-spacing: .08em; }
.qra-lp .qra-lp-legacy-poster { margin: 0 0 30px; border-radius: 18px; overflow: hidden; border: 1px solid var(--qra-lp-line); background: var(--qra-lp-surface); }
.qra-lp .qra-lp-legacy-poster img { display: block; width: 100%; height: auto; max-height: 460px; object-fit: cover; }
.qra-lp .qra-lp-prose { font-size: 1.08rem; line-height: 1.75; overflow-wrap: anywhere; }
.qra-lp .qra-lp-prose > * { margin-top: 0; margin-bottom: 0; }
.qra-lp .qra-lp-prose > * + * { margin-top: .9em; }
.qra-lp .qra-lp-prose > :is(h2, h3, h4) { margin-top: 1.4em; line-height: 1.2; }
.qra-lp .qra-lp-prose > hr + :is(h2, h3, h4), .qra-lp .qra-lp-prose > :first-child { margin-top: 0; }
.qra-lp .qra-lp-prose h2 { font-size: 1.6rem; }
.qra-lp .qra-lp-prose h3 { font-size: 1.3rem; }
.qra-lp .qra-lp-prose h4 { font-size: 1.12rem; }
.qra-lp .qra-lp-prose p, .qra-lp .qra-lp-prose ul, .qra-lp .qra-lp-prose ol { margin-bottom: 0; }
.qra-lp .qra-lp-prose ul, .qra-lp .qra-lp-prose ol { padding-left: 1.3em; }
.qra-lp .qra-lp-prose li + li { margin-top: .35em; }
.qra-lp .qra-lp-prose li > p { margin: 0; }
.qra-lp .qra-lp-prose a { color: var(--qra-lp-brand); text-underline-offset: 3px; }
.qra-lp .qra-lp-prose > hr { border: 0; border-top: 1px solid var(--qra-lp-line); margin: 1.6em 0; }
.qra-lp .qra-lp-prose img { max-width: 100%; height: auto; border-radius: 12px; }
.qra-lp .qra-lp-prose blockquote { margin-left: 0; padding-left: 18px; border-left: 4px solid var(--qra-lp-mark); color: var(--qra-lp-muted); }
/* old content tables (image grids, comparisons) scroll sideways inside the text column instead of stretching the page */
.qra-lp .qra-lp-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.qra-lp .qra-lp-prose td, .qra-lp .qra-lp-prose th { padding: 8px 10px; border-bottom: 1px solid var(--qra-lp-line); vertical-align: top; }
.qra-lp .qra-lp-legacy-pretext { font-size: var(--qra-lp-s-lg); color: var(--qra-lp-muted); }
/* child pages (timeline years, sections, the library index) */
.qra-lp .qra-lp-legacy-list { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 12px; }
.qra-lp .qra-lp-legacy-list li { display: grid; gap: 4px; padding: 16px 20px; border-radius: 14px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); }
.qra-lp .qra-lp-legacy-list li a { color: var(--qra-lp-ink); text-decoration: none; }
.qra-lp .qra-lp-legacy-list li a:hover b { color: var(--qra-lp-brand); text-decoration: underline; text-underline-offset: 3px; }
.qra-lp .qra-lp-legacy-list b { font-family: var(--qra-lp-f-display); font-size: 1.15rem; }
.qra-lp .qra-lp-legacy-list span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); line-height: 1.55; }
/* children with no description (timeline years): a compact grid instead of tall rows */
.qra-lp .qra-lp-legacy-list.qra-lp-legacy-list-compact { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qra-lp .qra-lp-legacy-list-compact li { padding: 14px 16px; text-align: center; }
/* ---------- the 404 page (ERROR type) ---------- */
.qra-lp .qra-lp-error-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.qra-lp .qra-lp-error-txt { display: grid; gap: 16px; justify-items: start; }
.qra-lp .qra-lp-error-txt h1 { font-size: var(--qra-lp-s-hero); font-weight: 300; line-height: 1.04; letter-spacing: -1px; }
.qra-lp .qra-lp-error-img { width: min(100%, 420px); height: auto; justify-self: center; }
.qra-lp .qra-lp-error-links { list-style: none; margin: 8px 0 10px; padding: 0; display: grid; gap: 8px; width: 100%; }
.qra-lp .qra-lp-error-links a { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); color: var(--qra-lp-ink); text-decoration: none; transition: border-color var(--qra-lp-ease); }
.qra-lp .qra-lp-error-links a:hover { border-color: var(--qra-lp-brand); }
.qra-lp .qra-lp-error-links b { font-family: var(--qra-lp-f-display); font-size: 1.1rem; }
.qra-lp .qra-lp-error-links span { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
@media (min-width: 900px) { .qra-lp .qra-lp-error-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
/* Screens block (CL pages with a TV in the room): the niche's text and a list on the left, a drawn TV on the right */
.qra-lp .qra-lp-screens { display: grid; gap: 32px; align-items: center; }
.qra-lp .qra-lp-screens-txt > p { max-width: 62ch; }
.qra-lp .qra-lp-screens-show { list-style: none; margin: 18px 0; padding: 0; display: grid; gap: 12px; }
.qra-lp .qra-lp-screens-show li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.45; }
.qra-lp .qra-lp-screens-show li .qra-lp-tick { margin-top: 3px; flex: none; }
.qra-lp .qra-lp-screens-how { color: var(--qra-lp-muted); font-size: .95em; }
.qra-lp .qra-lp-screens-tv { margin: 0; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-screens-tv svg { display: block; width: 100%; height: auto; max-width: 460px; margin: 0 auto; }
@media (min-width: 901px) {
.qra-lp .qra-lp-screens { grid-template-columns: minmax(0, 1.25fr) minmax(300px, 1fr); gap: clamp(40px, 5vw, 80px); }
}
.qra-lp .qra-lp-screens-txt h2 { margin-bottom: 14px; }
.qra-lp .qra-lp-screens .qra-lp-plan-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; justify-content: flex-start; }
.qra-lp .qra-lp-screens .qra-lp-btn-outline { background: transparent; color: var(--qra-lp-ink); border: 1.5px solid color-mix(in srgb, var(--qra-lp-ink) 22%, transparent); }
.qra-lp .qra-lp-screens .qra-lp-btn-outline:hover { border-color: var(--qra-lp-brand); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-screens .qra-lp-link-quiet { white-space: nowrap; }
.qra-lp .qra-lp-screens .qra-lp-plan-actions { margin-top: 20px; }
/* Client reviews (testimonial block): a soft brand band, one card per review, a big quote mark; no stars */
.qra-lp .qra-lp-band.qra-lp-reviews { background: var(--qra-lp-brand-soft); border-block: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-reviews h2 { margin-top: 6px; }
.qra-lp .qra-lp-review-grid { display: grid; gap: 44px 28px; margin-top: 40px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: start; }
.qra-lp .qra-lp-review-grid.qra-lp-review-one { grid-template-columns: minmax(0, 820px); }
.qra-lp .qra-lp-review { position: relative; margin: 0; padding: 34px 28px 26px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); border-radius: var(--qra-lp-radius-lg); box-shadow: var(--qra-lp-shadow); display: grid; gap: 20px; }
.qra-lp .qra-lp-review::before { content: "\201C"; position: absolute; top: -18px; left: 22px; font-family: Georgia, "Times New Roman", serif; font-size: 96px; line-height: 1; color: var(--qra-lp-mark); }
.qra-lp .qra-lp-review blockquote { margin: 0; }
.qra-lp .qra-lp-review blockquote p { margin: 0; font-family: var(--qra-lp-f-display); font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.3; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-review figcaption { display: grid; gap: 3px; padding-top: 16px; border-top: 1px solid var(--qra-lp-line); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-review figcaption b { font-size: var(--qra-lp-s-base); }
.qra-lp .qra-lp-review figcaption span { color: var(--qra-lp-muted); }
.qra-lp .qra-lp-review figcaption a { margin-top: 6px; color: var(--qra-lp-brand); font-weight: 600; text-decoration: none; justify-self: start; }
.qra-lp .qra-lp-review figcaption a:hover { text-decoration: underline; text-underline-offset: 3px; }
.qra-lp .qra-lp-review-all { margin: 22px 0 0; }
.qra-lp .qra-lp-review-all a { color: var(--qra-lp-brand); font-weight: 600; text-decoration: none; }
.qra-lp .qra-lp-review-all a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 901px) { .qra-lp .qra-lp-review { padding: 40px 40px 30px; } }
/* ---------- QR pages (type QR): a drawn scene in the hero, scan → page, spots, scan chart, who uses it, sizes ---------- */
.qra-lp .qra-lp-hero-scene { margin: 0; width: 100%; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-hero-scene .qra-lp-scene-art { display: block; width: 100%; height: auto; border-radius: var(--qra-lp-radius-lg); }
@media (min-width: 1100px) {
.qra-lp .qra-lp-hero-art .qra-lp-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); }
.qra-lp .qra-lp-hero-art .qra-lp-stage { min-height: 0; padding-bottom: 200px; }
.qra-lp .qra-lp-hero-art .qra-lp-stage .qra-lp-ticket { right: -12px; bottom: 0; }
}
@media (min-width: 901px) and (max-width: 1099px) { .qra-lp .qra-lp-hero-art .qra-lp-stage { padding-bottom: 160px; } }
.qra-lp .qra-lp-scanflow { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 28px; counter-reset: qrascan; }
.qra-lp .qra-lp-scanflow li { position: relative; counter-increment: qrascan; display: grid; gap: 8px; align-content: start; }
.qra-lp .qra-lp-scanflow-pic { background: var(--qra-lp-bg); border: 1px solid var(--qra-lp-card-border); border-radius: var(--qra-lp-radius); padding: 18px; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-band:not(.qra-lp-alt) .qra-lp-scanflow-pic { background: var(--qra-lp-surface); }
.qra-lp .qra-lp-scanflow-pic .qra-lp-ill { display: block; width: 100%; height: auto; max-height: 150px; }
.qra-lp .qra-lp-scanflow h3 { margin-top: 8px; font-size: var(--qra-lp-s-lg); }
.qra-lp .qra-lp-scanflow h3::before { content: counter(qrascan) ". "; color: var(--qra-lp-brand); }
.qra-lp .qra-lp-scanflow p { color: var(--qra-lp-muted); }
@media (min-width: 901px) {
.qra-lp .qra-lp-scanflow { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px; }
.qra-lp .qra-lp-scanflow li:not(:last-child)::after { content: "→"; position: absolute; right: -32px; top: 70px; font-size: 26px; color: var(--qra-lp-brand); }
}
.qra-lp .qra-lp-spots { display: grid; gap: 22px; margin-top: 36px; }
.qra-lp .qra-lp-spot { display: grid; gap: 14px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-card-border); border-radius: var(--qra-lp-radius-lg); box-shadow: var(--qra-lp-card-shadow); padding: 22px; color: var(--qra-lp-ink); }
.qra-lp .qra-lp-spot-pic .qra-lp-ill { display: block; width: 100%; height: auto; max-height: 130px; }
.qra-lp .qra-lp-spot h3 { font-size: var(--qra-lp-s-lg); }
.qra-lp .qra-lp-spot p { margin-top: 6px; color: var(--qra-lp-muted); }
.qra-lp .qra-lp-spot-leads { display: inline-block; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--qra-lp-brand-soft); font-size: var(--qra-lp-s-xs); }
.qra-lp .qra-lp-spot-leads b { font-family: var(--qra-lp-f-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .85em; margin-right: 6px; color: var(--qra-lp-brand); }
@media (min-width: 901px) {
.qra-lp .qra-lp-spots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qra-lp .qra-lp-spot-main { grid-column: 1 / -1; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 36px; padding: 32px; border-color: var(--qra-lp-mark); }
.qra-lp .qra-lp-spot-main .qra-lp-ill { max-height: 220px; }
.qra-lp .qra-lp-spot-main h3 { font-size: var(--qra-lp-s-xl); }
}
.qra-lp .qra-lp-stats { display: grid; gap: 36px; align-items: center; }
.qra-lp .qra-lp-stats h2 { margin-top: 6px; font-size: var(--qra-lp-s-xl); }
.qra-lp .qra-lp-stats .qra-lp-prose > p { margin-top: 14px; max-width: 60ch; }
.qra-lp .qra-lp-stats-points { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.qra-lp .qra-lp-stats-points li { display: flex; gap: 10px; align-items: flex-start; }
.qra-lp .qra-lp-stats-points .qra-lp-tick { margin-top: 3px; flex: none; }
.qra-lp .qra-lp-stats-chart { margin: 0; background: var(--qra-lp-bg); border: 1px solid var(--qra-lp-card-border); border-radius: var(--qra-lp-radius-lg); padding: 26px 26px 18px; }
.qra-lp .qra-lp-stats-chart svg { display: block; width: 100%; height: auto; }
.qra-lp .qra-lp-stats-chart figcaption { margin-top: 8px; font-size: var(--qra-lp-s-xs); color: var(--qra-lp-muted); }
@media (min-width: 901px) { .qra-lp .qra-lp-stats { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 5vw, 80px); } }
.qra-lp .qra-lp-who-uses { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
.qra-lp .qra-lp-who-uses li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: center; padding: 16px 18px; border-radius: var(--qra-lp-radius); background: var(--qra-lp-bg); border: 1px solid var(--qra-lp-card-border); color: var(--qra-lp-ink); transition: border-color var(--qra-lp-ease); }
.qra-lp .qra-lp-who-uses li:has(a):hover { border-color: var(--qra-lp-brand); }
.qra-lp .qra-lp-who-uses a { color: inherit; text-decoration: none; }
.qra-lp .qra-lp-who-uses a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the link */
.qra-lp .qra-lp-who-uses .qra-lp-ico { grid-row: span 2; }
.qra-lp .qra-lp-who-uses li > span:not(.qra-lp-ico) { color: var(--qra-lp-muted); font-size: var(--qra-lp-s-xs); grid-column: 2; }
.qra-lp .qra-lp-sizes-box { margin-top: 30px; overflow-x: auto; border: 1px solid var(--qra-lp-card-border); border-radius: var(--qra-lp-radius); background: var(--qra-lp-surface); }
.qra-lp .qra-lp-sizes { width: 100%; border-collapse: collapse; font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-sizes th, .qra-lp .qra-lp-sizes td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-sizes thead th { font-family: var(--qra-lp-f-mono); font-size: var(--qra-lp-s-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--qra-lp-muted); font-weight: 500; }
.qra-lp .qra-lp-sizes tbody tr:last-child th, .qra-lp .qra-lp-sizes tbody tr:last-child td { border-bottom: 0; }
.qra-lp .qra-lp-sizes-note { margin-top: 14px; color: var(--qra-lp-muted); font-size: var(--qra-lp-s-sm); }
.qra-lp .qra-lp-who-uses .qra-lp-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--qra-lp-ico-bg); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-who-uses .qra-lp-ico svg { width: 24px; height: 24px; }
.qra-lp .qra-lp-who-uses b { font-size: var(--qra-lp-s-base); }
.qra-lp .qra-lp-spot-pic { display: grid; place-items: center; min-height: 120px; }
/* ---------- the site-wide menu (partials/menu.php): dropdowns on desktop, expandable groups in the phone panel ---------- */
.qra-lp .qra-lp-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 24px; }
.qra-lp .qra-lp-menu > li { position: relative; }
.qra-lp .qra-lp-nav .qra-lp-menu-top { position: relative; background: none; border: 0; cursor: pointer; color: var(--qra-lp-ink); font: inherit; font-weight: 600; font-size: 14px; letter-spacing: .5px; text-transform: uppercase; padding: 8px 16px 8px 0; transition: color var(--qra-lp-ease); }
.qra-lp .qra-lp-nav .qra-lp-menu-top::after { content: ""; position: absolute; right: 2px; top: 50%; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-70%) rotate(45deg); transition: transform var(--qra-lp-ease); }
.qra-lp .qra-lp-menu-has:hover .qra-lp-menu-top, .qra-lp .qra-lp-menu-has.qra-lp-open .qra-lp-menu-top { color: var(--qra-lp-brand); }
.qra-lp .qra-lp-menu-has.qra-lp-open .qra-lp-menu-top::after { transform: translateY(-30%) rotate(225deg); }
.qra-lp .qra-lp-menu-drop { position: absolute; top: 100%; left: -16px; min-width: 260px; padding: 10px; background: var(--qra-lp-surface); border: 1px solid var(--qra-lp-line); border-radius: var(--qra-lp-radius); box-shadow: var(--qra-lp-shadow); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; z-index: 30; }
.qra-lp .qra-lp-menu-drop::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* keeps hover alive across the gap */
.qra-lp .qra-lp-menu-has:hover .qra-lp-menu-drop, .qra-lp .qra-lp-menu-has:focus-within .qra-lp-menu-drop, .qra-lp .qra-lp-menu-has.qra-lp-open .qra-lp-menu-drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.qra-lp .qra-lp-menu-has.qra-lp-closed .qra-lp-menu-drop { opacity: 0; visibility: hidden; }
.qra-lp .qra-lp-menu-drop ul { list-style: none; margin: 0; padding: 0; display: grid; }
.qra-lp .qra-lp-menu-drop a { display: block; padding: 9px 12px; border-radius: 8px; color: var(--qra-lp-ink); text-decoration: none; font-size: 15px; white-space: nowrap; }
.qra-lp .qra-lp-menu-drop a:hover, .qra-lp .qra-lp-menu-drop a:focus-visible { background: var(--qra-lp-brand-soft); color: var(--qra-lp-brand); }
.qra-lp .qra-lp-menu-drop .qra-lp-menu-all { margin-top: 6px; padding-top: 11px; border-top: 1px solid var(--qra-lp-line); border-radius: 0 0 8px 8px; color: var(--qra-lp-brand); font-weight: 700; }
@media (max-width: 1023px) { .qra-lp .qra-lp-menu { display: none; } }
@media (min-width: 1024px) and (max-width: 1180px) { .qra-lp .qra-lp-menu { gap: 16px; } .qra-lp .qra-lp-nav .qra-lp-btn-small .qra-lp-long { display: none; } }
.qra-lp .qra-lp-mgroup summary { display: flex; align-items: center; gap: 12px; min-height: 52px; cursor: pointer; list-style: none; font-weight: 600; color: var(--qra-lp-ink); border-bottom: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-mgroup summary::-webkit-details-marker { display: none; }
.qra-lp .qra-lp-mgroup summary svg { width: 22px; height: 22px; color: var(--qra-lp-brand); flex: none; }
.qra-lp .qra-lp-mgroup summary::after { content: ""; margin-left: auto; margin-right: 6px; width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--qra-lp-ease); }
.qra-lp .qra-lp-mgroup[open] summary::after { transform: rotate(225deg); }
.qra-lp .qra-lp-mnav .qra-lp-mgroup ul { list-style: none; margin: 0; padding: 4px 0 8px 34px; display: grid; border-bottom: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-mnav .qra-lp-mgroup a { min-height: 42px; border-bottom: 0; font-weight: 500; }
.qra-lp .qra-lp-mnav .qra-lp-mgroup .qra-lp-menu-all { color: var(--qra-lp-brand); font-weight: 700; }
/* phone menu: full screen (owner 2026-10-26). While it is open the header itself is pinned over the whole screen as a
column: the bar on top, the list scrolling under it, the draft button 100px above the bottom, never hidden. The page
behind doesn't scroll (overflow hidden; the scroll position never changes, qra-lp.js), so nothing moves. */
.qra-lp .qra-lp-mnav[hidden] { display: none; }
.qra-lp.qra-lp-menu-open .qra-lp-top { position: fixed; top: var(--qra-lp-mtop, 0px); left: 0; right: 0; bottom: 0; z-index: 30; display: flex; flex-direction: column; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--qra-lp-surface); }
.qra-lp.qra-lp-menu-open .qra-lp-top .qra-lp-bar { flex: none; }
/* nothing moves when it opens: the header stays at the height it was (under the top bar at the top of the page), the
wraps keep their full width inside the column (auto margins would shrink them to their content), and the header
stops where the page's scrollbar was, so the logo and buttons stay in place */
.qra-lp.qra-lp-menu-open .qra-lp-top .qra-lp-wrap { width: 100%; box-sizing: border-box; }
.qra-lp.qra-lp-menu-open .qra-lp-top { right: var(--qra-lp-sbw, 0px); }
.qra-lp .qra-lp-mnav { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.qra-lp .qra-lp-mnav-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.qra-lp .qra-lp-mnav-cta { flex: none; padding-top: 12px; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--qra-lp-line); }
.qra-lp .qra-lp-mnav-cta .qra-lp-btn { width: 100%; margin-top: 0; justify-content: center; color: var(--qra-lp-brand-ink); }
html.qra-lp-scroll-lock, html.qra-lp-scroll-lock body { overflow: hidden; overscroll-behavior: none; overflow-anchor: none; }
@media (min-width: 1024px) { .qra-lp .qra-lp-mnav { display: none; } }