/* Quick Gallery homepage (design handoff part 8, on the part 5 look and motion engine).
   Motion rules: docs/design-handoff-part-5/MOTION-SPEC.md and docs/design-handoff-part-8/MOTION-NOTES.md.
   Only transform and opacity animate. Hidden starting states apply only under html.qgm-js (added by
   home.js), so the page reads completely without JavaScript. Layout: 1440 design above 900px wide,
   the 390 phone design below it; fixed-size mockups (.qgm-fit) scale to their column. */

html, body { overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-sans); }
a { color: var(--ink); text-underline-offset: 3px; }
a:hover { color: var(--ink-muted); }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { list-style: none; padding: 0; }
.stat, .display, [class*="heading-"] { font-variant-numeric: lining-nums; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
svg[viewBox="0 0 16 16"] { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:root { --gut: 64px; --ease: cubic-bezier(.16, 1, .3, 1); --gold: #e9c27e; --inkpanel: #1c1a17; --onink: #faf7f2; }
.qgm-c { box-sizing: border-box; width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.qgm-band { position: relative; }
.qgm-sunken { background: var(--sunken); }
.qgm-muted { color: var(--ink-muted); }
.qgm-dim { color: rgba(250,247,242,.78); }
.qgm-over { text-transform: uppercase; color: var(--ink-muted); }
.qgm-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qgm-stack0 { display: flex; flex-direction: column; min-width: 0; }
.qgm-gap18 { gap: 18px; }
.qgm-gap24 { gap: 24px; }
.qgm-center { align-items: center; text-align: center; }
.qgm-grow { flex-grow: 1; }
.qgm-self { align-self: flex-start; }
.qgm-sm-only, .qgm-sm-br { display: none !important; }

/* Ambient glow (fixed, never animated: see the performance rules) */
.qg-amb { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.qg-amb i { position: absolute; display: block; }
.qg-amb .g1 { left: -22vw; top: 4vh; width: 66vw; height: 78vh; background: radial-gradient(closest-side, rgba(212,166,88,.22), rgba(212,166,88,.07) 55%, transparent); }
.qg-amb .g2 { right: -24vw; top: 22vh; width: 62vw; height: 72vh; background: radial-gradient(closest-side, rgba(198,122,96,.15), rgba(198,122,96,.04) 55%, transparent); }
.qg-amb .g3 { left: 18vw; bottom: -34vh; width: 64vw; height: 56vh; background: radial-gradient(closest-side, rgba(212,166,88,.13), transparent); }

/* ---------- Ink panels: gold and terracotta glows, a cropped Q at 7.5% ---------- */
.qgm-ink { position: relative; isolation: isolate; overflow: hidden; box-sizing: border-box; background: var(--inkpanel); color: var(--onink); border-radius: 24px; }
.qgm-ink::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(55% 60% at 6% 12%, rgba(212,166,88,.26), transparent 70%), radial-gradient(50% 60% at 100% 100%, rgba(198,122,96,.24), transparent 70%); }
.qgm-wm { position: absolute; z-index: -1; opacity: .075; pointer-events: none; height: auto; max-width: none; }
.qgm-ink a:not(.qgm-btn) { color: inherit; }
.qgm-ink :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.qgm-ink .qgm-swoosh path { stroke: var(--gold); }
.qgm-ink .qgm-toast { color: var(--ink); }
/* Full-width panels sit 16px in from the page edge. */
.qgm-hero, .qgm-app, .qgm-reports, .qgm-cta { width: calc(100% - 32px); max-width: 1408px; margin-left: auto; margin-right: auto; border-radius: 32px; padding-left: calc(var(--gut) - 16px); padding-right: calc(var(--gut) - 16px); }

/* ---------- Buttons ---------- */
.qgm-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; height: 44px; padding: 0 20px; border-radius: var(--radius-md); border: 1px solid transparent; font: inherit; font-size: 15px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform .5s var(--ease), opacity .3s; }
.qgm-btn:hover { transform: translate3d(0, -2px, 0); }
.qgm-btn.lg { height: 56px; padding: 0 24px; font-size: 16px; }
.qgm-btn.dark, .qgm-btn.dark:hover { background: var(--inkpanel); color: var(--onink); }
.qgm-btn.light, .qgm-btn.light:hover { background: var(--onink); color: var(--inkpanel); }
.qgm-btn.ghost, .qgm-btn.ghost:hover { background: transparent; color: var(--onink); border-color: rgba(250,247,242,.42); }
.qgm-full { width: 100%; }

/* ---------- Nav ---------- */
.qgm-nav { position: sticky; top: 0; z-index: 30; transition: background-color .4s ease, box-shadow .4s ease; }
.qgm-scrolled .qgm-nav, .qgm-menu-open .qgm-nav { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.qgm-navin { height: 76px; display: flex; align-items: center; gap: 40px; }
.qgm-wordmark { color: var(--ink); text-decoration: none; }
.qgm-wordmark img { display: block; height: 50px; width: auto; margin-left: -10px; } /* the SVG's own left padding */
.qgm-wordmark.sm img { height: 44px; margin-left: -9px; }
.qgm-links { display: flex; gap: 28px; }
.qgm-links a { text-decoration: none; font-weight: 500; }
.qgm-signin { text-decoration: none; font-weight: 600; }
.qgm-menu-btn { display: none; width: 44px; height: 44px; margin-right: -10px; border: 0; padding: 0; background: transparent; color: var(--ink); align-items: center; justify-content: center; cursor: pointer; }
.qgm-menu { position: absolute; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; gap: 4px; padding: 8px var(--gut) 20px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-overlay); }
.qgm-menu[hidden] { display: none; }
.qgm-menu a { display: flex; align-items: center; min-height: 48px; font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--line); }
.qgm-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform-origin: left; transform: scaleX(0); will-change: transform; }

/* ---------- Hero ---------- */
.qgm-hero { padding-top: 64px; }
.qgm-hero .qgm-wm { width: 780px; right: -150px; top: -60px; }
.qgm-herotext { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.qgm-hero h1.overline { font-size: 14px; line-height: 20px; letter-spacing: .16em; color: rgba(250,247,242,.8); }
.qgm-h1 { max-width: 1120px; font-size: clamp(50px, 6.5vw, 94px); line-height: 1.02; }
.qgm-ul { position: relative; display: inline-block; white-space: nowrap; }
.qgm-swoosh { position: absolute; left: 0; right: 0; bottom: -12px; width: 100%; height: 20px; overflow: visible; }
.qgm-swoosh path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; }
.qgm-lead { max-width: 640px; margin-top: 8px; font-size: 20px; line-height: 31px; color: rgba(250,247,242,.82); }
.qgm-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.qgm-herostage { position: relative; margin-top: 44px; }
.qgm-herodev .qgm-fitbox > div { position: absolute; }
.qgm-mover { transform-origin: 50% 100%; will-change: transform; }
.qgm-herodev .pl { transform: rotate(-4deg); }
.qgm-herodev .pr { transform: rotate(4deg); }
.qgm-pill { position: absolute; left: 50%; bottom: 28px; z-index: 5; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; border-radius: var(--radius-pill); background: rgba(28,26,23,.86); color: var(--onink); white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(0,0,0,.5); }
.qgm-js .qgm-pill.qgm-blur:not(.qgm-in) { transform: translate3d(-50%, 24px, 0); }
.qgm-pill.qgm-blur.qgm-in { transform: translateX(-50%); }
.qgm-pill.sm { position: static; transform: none; display: flex; padding: 14px 0 26px; background: none; box-shadow: none; white-space: normal; color: rgba(250,247,242,.8); }
.qgm-toast { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgba(28,26,23,.35); white-space: nowrap; }
.qgm-toast .label { font-weight: 600; }
.qgm-toast .ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--on-primary); display: inline-flex; align-items: center; justify-content: center; }
.qgm-toast .ic svg { width: 14px; height: 14px; }

/* Fit: a fixed-size mockup (--w × --h) scaled to its column. home.js sets --fit; the media
   queries at the bottom are the fallback without JavaScript. */
.qgm-fit { --fit: 1; position: relative; width: 100%; max-width: calc(var(--w) * 1px); height: calc(var(--h) * var(--fit) * 1px); margin-left: auto; margin-right: auto; }
.qgm-fitbox { position: absolute; left: 0; top: 0; width: calc(var(--w) * 1px); height: calc(var(--h) * 1px); transform: scale(var(--fit)); transform-origin: 0 0; }
.qgm-fitbox > * { position: absolute; }

/* ---------- Devices ---------- */
.qgm-dev { contain: layout paint; }
.qgm-dev img { display: block; max-width: none; }
.qgm-laptop { display: flex; flex-direction: column; align-items: center; }
.qgm-laptop-lid { position: relative; width: 100%; box-sizing: border-box; padding: 14px 12px 16px; border-radius: 18px 18px 6px 6px; background: #2a2724; box-shadow: var(--shadow-overlay); }
.qgm-laptop-lid::before { content: ""; position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: #6e665b; }
.qgm-laptop-scr { position: relative; overflow: hidden; border-radius: 3px; background: var(--paper); }
.qgm-laptop-scr img { width: 100%; height: auto; }
.qgm-laptop-base { position: relative; width: 112%; height: 14px; border-radius: 2px 2px 16px 16px; background: #b9b0a3; }
.qgm-laptop-base::before { content: ""; position: absolute; top: 0; left: 42%; width: 16%; height: 5px; border-radius: 0 0 8px 8px; background: #8f8576; }
.qgm-laptop-foot { width: 100%; height: 6px; border-radius: 0 0 50% 50%; background: #d8d0c4; }
.qgm-phone { --u: calc(var(--pw) * 1px / 236); position: relative; width: calc(236 * var(--u)); height: calc(486 * var(--u)); flex-shrink: 0; box-sizing: border-box; padding: calc(7 * var(--u)); border-radius: calc(40 * var(--u)); background: #1c1a17; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); contain: none; }
.qgm-phone::before, .qgm-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px 0 0 2px; background: inherit; }
.qgm-phone::before { left: -3px; top: calc(140 * var(--u)); height: calc(48 * var(--u)); }
.qgm-phone::after { right: -3px; top: calc(145 * var(--u)); height: calc(72 * var(--u)); border-radius: 0 2px 2px 0; }
.qgm-phone .scr { position: relative; width: 100%; height: 100%; border-radius: calc(33 * var(--u)); background: var(--paper); overflow: hidden; }
.qgm-phone .scr::before { content: ""; position: absolute; z-index: 1; top: calc(8 * var(--u)); left: 50%; width: calc(68 * var(--u)); height: calc(19 * var(--u)); transform: translateX(-50%); border-radius: var(--radius-pill); background: #1c1a17; }
.qgm-phone.light { background: #3b3732; }
.qgm-phone.light .scr::before { background: #3b3732; }
.qgm-phone .in { position: absolute; left: 0; top: calc(33 * var(--u)); }
.qgm-phone .in.full { top: 0; }
.qgm-phone img { width: calc(222 * var(--u)); height: auto; }
.qgm-phone .in.full img { width: calc(222 * var(--u)); }
.qgm-ipad { width: 330px; box-sizing: border-box; padding: 14px; border-radius: 28px; background: #1c1a17; box-shadow: var(--shadow-overlay); }
.qgm-ipad.sm { width: 206px; padding: 12px; border-radius: 20px; }
.qgm-ipad .scr { border-radius: 12px; overflow: hidden; background: var(--paper); }
.qgm-ipad.sm .scr { border-radius: 8px; }
.qgm-ipad img { width: 100%; height: auto; }
.qgm-win { border-radius: 12px; overflow: hidden; background: var(--paper); box-shadow: 0 0 0 1px var(--line-strong), 0 28px 60px -30px rgba(28,26,23,.45); }
.qgm-winbar { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 14px; background: var(--sunken); border-bottom: 1px solid var(--line); color: var(--ink); }
.qgm-winbar i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); }
.qgm-winbar span { margin: 0 auto; padding: 3px 40px; border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-muted); white-space: nowrap; }
.qgm-winbar b { width: 46px; }
.qgm-winbody { position: relative; overflow: hidden; }
.qgm-winbody img { width: 100%; height: auto; }
.qgm-pan { will-change: transform; }
.qgm-dev .qgm-pan { animation: qgm-pan 18s ease-in-out infinite alternate; }
@keyframes qgm-pan { 0%, 14% { transform: translate3d(0, 0, 0); } 86%, 100% { transform: translate3d(0, calc(var(--pan) * var(--u, 1px)), 0); } }

/* ---------- Small shared pieces ---------- */
.qgm-h2 { font-size: clamp(40px, 4.45vw, 64px); line-height: 1.08; }
.qgm-h2cta { font-size: clamp(42px, 4.7vw, 68px); line-height: 1.06; }
.qgm-h3 { font-size: clamp(30px, 2.6vw, 38px); line-height: 1.1; }
.qgm-lead2 { font-size: 18px; line-height: 29px; max-width: 560px; color: var(--ink-muted); }
.qgm-ink .qgm-lead2 { color: rgba(250,247,242,.8); }
.qgm-lead3 { font-size: 17px; line-height: 27px; }
.qgm-serif { font-family: var(--font-serif); font-size: 28px; line-height: 1.28; font-weight: 500; }
.qgm-tile { box-sizing: border-box; padding: 28px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.qgm-ring { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid currentColor; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; }
.qgm-ring svg { width: 16px; height: 16px; }
.qgm-ring.xs { width: 26px; height: 26px; border-width: 1px; }
.qgm-ring.xs svg { width: 13px; height: 13px; }
.qgm-checks { display: flex; flex-direction: column; gap: 14px; }
.qgm-checks li { display: flex; gap: 12px; align-items: flex-start; }
.qgm-checks .body { font-size: 16px; line-height: 24px; padding-top: 1px; }
.qgm-dot { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(114,200,149,.2); color: #9fdcb2; }
.qgm-dot svg { width: 12px; height: 12px; }
.qgm-badge { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-pill); background: rgba(250,247,242,.12); color: var(--onink); white-space: nowrap; font-weight: 600; }
.qgm-badge i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.qgm-badge.ok { background: rgba(114,200,149,.18); color: #9fdcb2; }
.qgm-badge.okl { background: var(--ok-soft); color: var(--ok); }
.qgm-badge.warn { background: var(--warn-soft); color: var(--warn); }
.qgm-badge svg { width: 13px; height: 13px; }
.qgm-texts .qgm-badge, .qgm-app .qgm-badge { align-self: flex-start; }

/* Shoot-day meter: "1 of 4 · Before the shoot" */
.qgm-meter { display: flex; align-items: center; gap: 14px; color: var(--ink-muted); text-transform: uppercase; }
.qgm-meter > span:first-child { display: flex; gap: 4px; }
.qgm-meter i { width: 16px; height: 3px; border-radius: 2px; background: var(--line); }
.qgm-meter[data-stage="1"] i:nth-child(-n+1), .qgm-meter[data-stage="2"] i:nth-child(-n+2),
.qgm-meter[data-stage="3"] i:nth-child(-n+3), .qgm-meter[data-stage="4"] i { background: var(--ink); }
.qgm-ink .qgm-meter { color: rgba(250,247,242,.78); }
.qgm-ink .qgm-meter i { background: rgba(250,247,242,.22); }
.qgm-ink .qgm-meter[data-stage="1"] i:nth-child(-n+1), .qgm-ink .qgm-meter[data-stage="2"] i:nth-child(-n+2),
.qgm-ink .qgm-meter[data-stage="3"] i:nth-child(-n+3), .qgm-ink .qgm-meter[data-stage="4"] i { background: var(--onink); }
.qgm-meterrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ---------- Marquee ---------- */
.qgm-marquee { overflow: hidden; margin-top: 16px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.qgm-track { display: flex; gap: 18px; width: max-content; animation: qgm-marquee 70s linear infinite; will-change: transform; }
.qgm-marquee:hover .qgm-track { animation-play-state: paused; }
@keyframes qgm-marquee { to { transform: translate3d(calc(-50% - 9px), 0, 0); } }
.qgm-mlist { display: flex; gap: 18px; font-weight: 500; }
.qgm-mlist li { flex-shrink: 0; display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; }
.qgm-mlist li::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--line-strong); }

/* ---------- 1. The problem ---------- */
.qgm-problem { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 64px; align-items: center; padding-top: 140px; padding-bottom: 120px; }
.qgm-problem .qgm-stack { gap: 28px; }
.qgm-scrub { font-family: var(--font-serif); font-size: clamp(24px, 2.2vw, 30px); line-height: 1.42; font-weight: 500; }
.qgm-sw { transition: opacity .45s ease; }
.qgm-js.qgm-live .qgm-sw { opacity: .16; }
.qgm-js.qgm-live .qgm-sw.on { opacity: 1; }
.qgm-mess { box-sizing: border-box; box-shadow: 0 18px 40px -22px rgba(28,26,23,.45); transition: opacity 1s ease, transform 1.6s var(--ease); }
.qgm-mess.m1 { transform: rotate(-4deg); } .qgm-mess.m2 { transform: rotate(3deg); transition-delay: .15s; }
.qgm-mess.m3 { transform: rotate(5deg); transition-delay: .3s; } .qgm-mess.m4 { transform: rotate(-2deg); transition-delay: .45s; }
.qgm-js .qgm-blur:not(.qgm-in) .qgm-mess { opacity: 0; transform: translate3d(0, 30px, 0) rotate(0); }
.qgm-js .qgm-messfit.qgm-blur:not(.qgm-in) { opacity: 1; transform: none; }
.qgm-sheet { left: 0; top: 40px; width: 290px; background: #fff; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; line-height: 18px; overflow: hidden; }
.qgm-sheet .hd { padding: 7px 10px; background: #e4efe2; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 600; }
.qgm-sheet > div:not(.hd) { display: grid; grid-template-columns: 44px 1fr 50px; padding: 4px 10px; border-bottom: 1px solid var(--line); }
.qgm-sheet span:first-child { color: var(--ink-muted); font-size: 12px; }
.qgm-sheet span:last-child { color: var(--ok); font-size: 12px; text-align: right; }
.qgm-sheet .q { color: var(--warn) !important; }
.qgm-paynote { right: 0; top: 0; width: 260px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; background: #fff; border-radius: 14px; font-size: 13px; line-height: 18px; }
.qgm-paynote .av { width: 26px; height: 26px; flex-shrink: 0; border-radius: 8px; background: #cfe0f5; }
.qgm-paynote b { display: block; }
.qgm-paynote span span { color: var(--ink-muted); font-style: italic; }
.qgm-sticky { right: 0; top: 150px; width: 200px; height: 160px; padding: 14px 18px; background: #f6e3a1; font-family: var(--font-serif); font-size: 19px; line-height: 23px; color: #3a3220; }
.qgm-cardnote { left: 70px; top: 262px; display: flex; gap: 12px; align-items: center; padding: 12px 16px; background: var(--inkpanel); color: var(--onink); border-radius: 10px; font-size: 13px; line-height: 18px; }
.qgm-cardnote svg { width: 22px; height: 22px; }
.qgm-cardnote b { display: block; }
.qgm-cardnote span span { opacity: .8; }

/* ---------- 2. Before the shoot ---------- */
.qgm-before { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: center; padding-top: 60px; padding-bottom: 140px; }
.qgm-before .qgm-checks { margin-top: 10px; }
.qgm-slotwin { left: 0; top: 0; }
.qgm-payphone { left: 380px; top: 46px; }
.qgm-float { animation: qgm-float 7s ease-in-out infinite alternate; will-change: transform; }
@keyframes qgm-float { from { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); } to { transform: translate3d(0, -12px, 0) rotate(var(--r, 0deg)); } }
.qgm-feechip { left: 40px; top: 430px; z-index: 3; display: flex; align-items: center; gap: 14px; padding: 14px 20px 14px 14px; border-radius: 14px; background: var(--inkpanel); color: var(--onink); box-shadow: 0 20px 40px -20px rgba(28,26,23,.6); white-space: nowrap; }
.qgm-feechip .ic { width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--inkpanel); display: inline-flex; align-items: center; justify-content: center; }
.qgm-feechip .caption { opacity: .8; }

/* ---------- 3. Shoot day ---------- */
.qgm-day { display: flex; flex-direction: column; padding-top: 120px; padding-bottom: 120px; }
.qgm-dayhead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 64px; align-items: end; }
.qgm-tlcard { margin-top: 48px; padding: 28px 34px 30px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); }
.qgm-tlhd { display: flex; justify-content: space-between; gap: 16px; }
.qgm-tl { position: relative; }
.qgm-tenmin { margin-top: 24px; }
.qgm-tenmin .qgm-line { position: absolute; left: 7px; right: 7px; top: 6px; height: 2px; background: var(--ink); transform-origin: left; transition: transform 2.6s var(--ease) .2s; }
.qgm-stops { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.qgm-stop { position: relative; display: flex; flex-direction: column; gap: 10px; transition: opacity 1s ease, transform 1.4s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.qgm-stops .qgm-stop { align-items: center; text-align: center; }
.qgm-stops .qgm-stop:first-child { align-items: flex-start; text-align: left; }
.qgm-stops .qgm-stop:last-child { align-items: flex-end; text-align: right; }
.qgm-stop .pt { width: 14px; height: 14px; flex-shrink: 0; border-radius: 50%; background: var(--surface); border: 2px solid var(--ink); box-sizing: border-box; position: relative; z-index: 1; }
.qgm-stop.end .pt { background: var(--live); border-color: var(--live); box-shadow: 0 0 0 4px rgba(180,45,37,.14); }
.qgm-stop .t { display: flex; flex-direction: column; gap: 2px; }
.qgm-stop .t .caption { color: var(--ink-muted); }
.qgm-stop .t .body-strong { font-size: 17px; line-height: 24px; }
.qgm-stop .t .body { color: var(--ink-muted); max-width: 200px; }
.qgm-trav { position: absolute; left: 7px; right: 7px; top: 0; height: 14px; pointer-events: none; z-index: 2; }
.qgm-trav { --s1: .3; --s2: .5; --s3: .7; } /* where the middle stops sit; home.js measures them */
.qgm-trav i { position: absolute; left: 0; top: 0; width: 100%; height: 14px; animation: qgm-trav 10s cubic-bezier(.65, 0, .35, 1) infinite; will-change: transform, opacity; }
.qgm-trav i::before { content: ""; position: absolute; left: -6px; top: 1px; width: 12px; height: 12px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 5px rgba(180,45,37,.16); }
/* The dot rests about a second at each stop, then moves on to the next. */
@keyframes qgm-trav {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  3% { opacity: 1; }
  12% { transform: translate3d(0, 0, 0); }
  20%, 30% { transform: translate3d(calc(var(--s1) * 100%), 0, 0); }
  38%, 48% { transform: translate3d(calc(var(--s2) * 100%), 0, 0); }
  56%, 66% { transform: translate3d(calc(var(--s3) * 100%), 0, 0); }
  74%, 92% { transform: translate3d(100%, 0, 0); opacity: 1; }
  100% { transform: translate3d(100%, 0, 0); opacity: 0; }
}

.qgm-texts { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 60px 48px; }
.qgm-texts .qgm-wm { width: 460px; left: -230px; bottom: -220px; }
.qgm-lock { display: flex; justify-content: center; }
.qgm-lockphone { position: relative; width: 272px; height: 470px; box-sizing: border-box; padding: 64px 12px 14px; display: flex; flex-direction: column; gap: 10px; border-radius: 40px; border: 8px solid #0d0c0b; background: linear-gradient(170deg, #4a3e30, #241f1b 55%, #3a2a22); box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.qgm-lockphone::before { content: ""; position: absolute; top: 10px; left: 50%; width: 76px; height: 22px; margin-left: -38px; border-radius: var(--radius-pill); background: #0d0c0b; }
.qgm-lockphone .clock { text-align: center; font-size: 54px; line-height: 1; font-weight: 400; letter-spacing: -.01em; color: var(--onink); margin-bottom: 14px; }
.qgm-sms { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 16px; background: rgba(250,247,242,.93); color: var(--ink); font-size: 13px; line-height: 18px; }
.qgm-sms .ic { width: 24px; height: 24px; flex-shrink: 0; border-radius: 7px; background: #2c6e47; color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.qgm-sms .ic svg { width: 13px; height: 13px; }
.qgm-sms .hd { display: flex; white-space: nowrap; justify-content: space-between; gap: 8px; font-size: 12px; margin-bottom: 2px; }
.qgm-sms .hd span { color: var(--ink-muted); }

.qgm-trio { margin-top: 64px; }
.qgm-cap { white-space: nowrap; }
.qgm-solo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.qgm-solo .qgm-tile:first-child { display: flex; flex-direction: column; gap: 12px; }

/* ---------- 4. The iPhone app ---------- */
.qgm-app { margin-top: 110px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding-top: 64px; }
.qgm-app > .qgm-stack { padding-bottom: 64px; }
.qgm-app .qgm-wm { width: 560px; left: -300px; bottom: -260px; }
.qgm-appfit { align-self: end; }

/* ---------- Tethered or card ---------- */
.qgm-teth { padding-top: 140px; padding-bottom: 40px; }
.qgm-tethhead { max-width: 960px; }
.qgm-paths { display: grid; grid-template-columns: minmax(0, 420px) minmax(60px, 120px) minmax(0, 1fr); align-items: center; margin-top: 48px; }
.qgm-pathcards { display: flex; flex-direction: column; gap: 20px; }
.qgm-path { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 24px 22px; }
.qgm-path .hd { display: flex; align-items: center; gap: 14px; }
.qgm-sq { width: 40px; height: 40px; border-radius: 10px; background: var(--sunken); display: inline-flex; align-items: center; justify-content: center; }
.qgm-sq svg { width: 18px; height: 18px; }
.qgm-chip0 { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--sunken); font-weight: 600; }
.qgm-merge { width: 100%; height: 100%; overflow: visible; }
.qgm-mline { fill: none; stroke: var(--ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) 1s; }
.qgm-js .qgm-tl:not(.qgm-in) .qgm-mline { stroke-dashoffset: 1; }
.qgm-mergedown { justify-content: center; padding: 12px 0; }
.qgm-mergedown svg { width: 24px; height: 24px; }
.qgm-same { display: flex; flex-direction: column; gap: 16px; padding: 34px 36px; }
.qgm-steps3 { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.qgm-steps3 li { flex-direction: row; align-items: center; gap: 14px; }
.qgm-steps3 .n { width: 26px; height: 26px; flex-shrink: 0; box-sizing: border-box; border-radius: 50%; border: 1px solid rgba(250,247,242,.5); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; }
.qgm-steps3 .body { font-size: 16px; line-height: 24px; }

/* ---------- 5. After the shoot ---------- */
.qgm-after { padding-top: 140px; padding-bottom: 40px; }
.qgm-sortrow { display: grid; grid-template-columns: minmax(0, 350px) 110px minmax(0, 1fr); align-items: center; margin-top: 56px; }
.qgm-cardfolder { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; }
.qgm-cardfolder .hd { display: flex; align-items: center; gap: 10px; }
.qgm-thumbs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.qgm-thumbs i { aspect-ratio: 1; background: #fff center / cover no-repeat; border: 1px solid var(--line); background-image: url(/static/qg/art/qg-family-01-walking.webp); }
.qgm-thumbs i:nth-child(7n+2) { background-image: url(/static/qg/art/qg-family-04-hug.webp); }
.qgm-thumbs i:nth-child(7n+3) { background-image: url(/static/qg/art/qg-family-06-kids.webp); }
.qgm-thumbs i:nth-child(7n+4) { background-image: url(/static/qg/art/qg-family-03-sitting.webp); }
.qgm-thumbs i:nth-child(7n+5) { background-image: url(/static/qg/art/qg-family-11-santa-family.webp); }
.qgm-thumbs i:nth-child(7n+6) { background-image: url(/static/qg/art/qg-family-07-jump.webp); }
.qgm-thumbs i:nth-child(7n) { background-image: url(/static/qg/art/qg-family-10-nose-to-nose.webp); }
.qgm-sortarrow { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.qgm-sortarrow svg { width: 32px; height: 32px; stroke-width: 1.2; }
.qgm-lrfit { margin-right: 0; }
/* The Lightroom window is drawn in HTML (no screenshot of Adobe's app). */
.qgm-lr { left: 0; top: 0; width: 660px; height: 440px; display: flex; flex-direction: column; border-radius: 10px; overflow: hidden; background: #262523; color: #d9d5ce; font-size: 13px; line-height: 18px; box-shadow: 0 30px 60px -30px rgba(28,26,23,.6), 0 0 0 1px rgba(0,0,0,.4); }
.qgm-lr .bar { position: relative; height: 30px; display: flex; align-items: center; gap: 7px; padding: 0 12px; background: #353330; flex-shrink: 0; }
.qgm-lr .bar i { width: 11px; height: 11px; border-radius: 50%; background: #ec6a5e; }
.qgm-lr .bar i:nth-child(2) { background: #f4bf4f; }
.qgm-lr .bar i:nth-child(3) { background: #61c554; }
.qgm-lr .bar span { position: absolute; left: 0; right: 0; text-align: center; font-weight: 600; font-size: 12px; pointer-events: none; }
.qgm-lr .main { flex: 1; display: grid; grid-template-columns: 250px 1fr; min-height: 0; }
.qgm-lr .side { background: #1f1e1c; padding: 12px 0; }
.qgm-lr .ov { padding: 0 14px 8px; font-size: 10px; letter-spacing: .1em; font-weight: 600; color: #9b958c; text-transform: uppercase; }
.qgm-lr .set { display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-weight: 600; color: #f0ece5; }
.qgm-lr .set svg { width: 12px; height: 12px; }
.qgm-lr .rows { position: relative; margin-top: 2px; }
.qgm-lr .rows .qgm-stop { flex-direction: row; align-items: center; gap: 8px; height: 28px; padding: 0 14px 0 26px; box-sizing: border-box; }
.qgm-lr .rows .qgm-stop span:nth-of-type(1) { flex: 1; }
.qgm-lr .rows .qgm-stop span:nth-of-type(2) { color: #9b958c; }
.qgm-lr .rows svg { width: 13px; height: 13px; color: #9b958c; }
.qgm-lr .rows .on { background: rgba(255,255,255,.07); color: #fff; }
.qgm-lr .rows .un { font-style: italic; color: #9b958c; }
.qgm-scan { position: absolute; left: 0; right: 0; top: 0; height: 28px; background: rgba(233,194,126,.16); box-shadow: inset 3px 0 0 var(--gold); animation: qgm-scan 9.8s var(--ease) infinite; will-change: transform; }
@keyframes qgm-scan { 0%, 10% { transform: translateY(0); } 14%, 24% { transform: translateY(28px); } 28%, 38% { transform: translateY(56px); } 42%, 52% { transform: translateY(84px); } 56%, 66% { transform: translateY(112px); } 70%, 80% { transform: translateY(140px); } 84%, 94% { transform: translateY(168px); } 100% { transform: translateY(0); } }
.qgm-lr .grid { padding: 10px 12px; min-width: 0; }
.qgm-lr .grid .hd { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: #9b958c; }
.qgm-lr .grid .hd b { color: #f0ece5; }
.qgm-lr .pics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.qgm-lr .pics i { aspect-ratio: 1 / .9; background: #fbf8f2 var(--a) center / cover no-repeat; border-radius: 2px; }
.qgm-lr .pics i:first-child { box-shadow: 0 0 0 2px #f0ece5; }
.qgm-lr .foot { display: flex; gap: 14px; height: 26px; align-items: center; padding: 0 12px; background: #1f1e1c; border-top: 1px solid #353330; font-size: 11px; color: #9b958c; flex-shrink: 0; }
.qgm-lr .foot .gold { color: var(--gold); }
.qgm-lr .foot span:last-child { margin-left: auto; }

.qgm-clockrow { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 40px; }
.qgm-clock { display: flex; align-items: center; gap: 22px; padding: 18px 26px 18px 18px; border-radius: var(--radius-lg); }
.qgm-clock .face { display: flex; flex-direction: column; align-items: center; padding: 12px 18px; border-radius: 14px; background: rgba(250,247,242,.08); flex-shrink: 0; }
.qgm-clock .face .caption { opacity: .75; }
.qgm-clock .t { font-family: var(--font-serif); font-size: 34px; line-height: 40px; font-variant-numeric: lining-nums; }
.qgm-clock .body-strong { font-size: 17px; margin-bottom: 4px; }
.qgm-clock .body { color: rgba(250,247,242,.8); font-size: 16px; line-height: 24px; }
.qgm-panelfig { justify-self: end; width: 360px; margin-top: -150px; display: flex; flex-direction: column; gap: 10px; }
.qgm-macwin { border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(28,26,23,.55), 0 0 0 1px var(--line); }
.qgm-macwin img { width: 100%; height: auto; }

/* ---------- 6. Delivery ---------- */
.qgm-delivery { padding-top: 140px; padding-bottom: 140px; }
.qgm-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.qgm-option { display: flex; flex-direction: column; gap: 16px; padding: 34px; min-height: 480px; }
.qgm-option.two { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 24px; align-items: start; }
.qgm-handoff { display: flex; align-items: center; gap: 16px; padding: 26px 22px; border-radius: 14px; background: var(--sunken); }
.qgm-handoff > svg { width: 28px; height: 28px; stroke-width: 1.2; flex-shrink: 0; }
.qgm-handoff .from { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 8px; background: var(--inkpanel); color: var(--onink); font-size: 14px; white-space: nowrap; }
.qgm-handoff .to { display: flex; flex-direction: column; padding: 10px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--line); font-size: 14px; }
.qgm-optphone { position: relative; padding-top: 6px; }
.qgm-optphone .qgm-badge { position: absolute; left: -36px; bottom: 34px; z-index: 2; box-shadow: var(--shadow-raised); }
.qgm-numbered { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.qgm-numbered li { display: flex; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.qgm-numbered .n { font-family: var(--font-serif); font-size: 26px; line-height: 24px; color: var(--ink-muted); }
.qgm-numbered .body { font-size: 16px; line-height: 24px; }

/* ---------- 7. Reports ---------- */
.qgm-reports { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 56px; align-items: center; padding-top: 80px; padding-bottom: 80px; }
.qgm-reports .qgm-wm { width: 560px; right: -80px; top: -160px; }
.qgm-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin-top: 10px; }
.qgm-stats > div { display: flex; flex-direction: column; gap: 6px; padding: 22px 0 20px; border-top: 1px solid rgba(250,247,242,.2); }
.qgm-stats .stat { font-size: 68px; line-height: 1; white-space: nowrap; }
.qgm-stats small { margin-left: 6px; font-size: .42em; }
.qgm-stats .label { color: rgba(250,247,242,.78); }
.qgm-reports .qgm-checks { margin-top: 6px; }
.qgm-reportwin .qgm-winbody { height: 480px; }
.odo-wrap { display: inline-flex; }
.odo { display: inline-block; height: 1em; line-height: 1em; overflow: hidden; vertical-align: top; }
.odo .col { display: block; transform: translate3d(0, calc(var(--n) * -10%), 0); transition: transform 2s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); will-change: transform; }
.qgm-js .qgm-stats:not(.qgm-in) .odo .col { transform: translate3d(0, 0, 0); }

/* ---------- 8. Santa ---------- */
.qgm-santa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; padding-top: 140px; padding-bottom: 140px; }
.qgm-santafit { --w: 616; --h: 600; }
.qgm-santafit .p1, .qgm-santafit .p2 { background: var(--surface) center / cover no-repeat; border: 10px solid var(--surface); box-shadow: 0 0 0 1px var(--line), 0 22px 44px -24px rgba(28,26,23,.4); }
.qgm-santafit .p1 { left: 0; top: 10px; width: 270px; aspect-ratio: 3 / 4; rotate: -4deg; }
.qgm-santafit .p2 { left: 30px; top: 360px; width: 290px; aspect-ratio: 3 / 2; rotate: 3deg; }
.qgm-santaphone { left: 300px; top: 30px; }
.qgm-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.qgm-pills span { padding: 8px 14px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); font-weight: 600; }

/* ---------- 9. Pricing ---------- */
.qgm-pricing { display: flex; flex-direction: column; gap: 40px; padding-top: 120px; padding-bottom: 120px; }
.qgm-pricing .qgm-center { gap: 18px; }
.qgm-bill { display: inline-flex; padding: 4px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--line); }
.qgm-bill button { height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--ink); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .3s, color .3s; }
.qgm-bill button[aria-pressed="true"] { background: var(--inkpanel); color: var(--onink); }
.qgm-bill .save { margin-left: 6px; font-size: 12px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--ok-soft); color: var(--ok); }
[data-bill="m"] .yr, [data-bill="y"] .mo { display: none !important; }
[data-bill] .qgm-price .mo, [data-bill] .qgm-price .yr { animation: qgm-pop .5s var(--ease); }
.qgm-plans { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; width: 100%; max-width: 1160px; margin: 0 auto; align-items: stretch; }
.qgm-plan { display: flex; flex-direction: column; gap: 18px; padding: 34px; border-radius: 24px; }
.qgm-plan.pro .qgm-wm { width: 420px; right: -90px; bottom: -150px; }
.qgm-planhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.qgm-price { display: flex; flex-direction: column; gap: 4px; }
.qgm-price > div { display: flex; align-items: baseline; gap: 8px; }
.qgm-price .stat { font-size: 84px; line-height: 1; }
/* Two columns that flow on their own, so a two-line item doesn't stretch the row beside it. */
.qgm-incl { columns: 2; column-gap: 28px; margin-bottom: 8px; }
.qgm-incl li { display: flex; gap: 10px; align-items: flex-start; break-inside: avoid; padding-bottom: 12px; }
.qgm-incl svg { color: #9fdcb2; margin-top: 3px; }
.qgm-plan.studio { align-self: start; gap: 22px; background: var(--surface); } /* only as tall as its form */
.qgm-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: 100%; max-width: 1160px; margin: 0 auto; }
.qgm-notes > div { display: flex; gap: 14px; align-items: flex-start; }
.qgm-notes .qgm-ring { width: 32px; height: 32px; border-width: 1px; }
.qgm-notes .qgm-ring svg { width: 14px; height: 14px; }
.qgm-notes .body { padding-top: 5px; font-size: 15px; line-height: 22px; }

/* Email capture: idle, error, sending and done, with no modal. */
.qgm-form { display: flex; flex-direction: column; gap: 10px; }
.qgm-form .fields { display: flex; flex-direction: column; gap: 10px; }
.qgm-form input[type=email] { height: 52px; width: 100%; min-width: 0; box-sizing: border-box; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.qgm-form input::placeholder { color: var(--ink-muted); }
.qgm-form .go { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 24px; border-radius: 12px; border: 0; background: var(--inkpanel); color: var(--onink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: transform .5s var(--ease), opacity .3s; }
.qgm-form .go:hover { transform: translate3d(0, -2px, 0); }
.qgm-form .err, .qgm-form .qgm-ok { display: none; }
.qgm-form .err { color: var(--live); }
.qgm-form[data-state="error"] .err { display: block; }
.qgm-form[data-state="error"] input[type=email] { border-color: var(--live); box-shadow: 0 0 0 1px var(--live); }
.qgm-form .spin { display: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: qgm-spin .8s linear infinite; }
.qgm-form[data-state="sending"] .spin { display: inline-block; }
.qgm-form[data-state="sending"] .go { opacity: .75; cursor: default; }
.qgm-form[data-state="done"] .fields, .qgm-form[data-state="done"] .fine { display: none !important; }
.qgm-form[data-state="done"] .qgm-ok { display: flex; animation: qgm-pop .6s var(--ease); }
.qgm-ok { gap: 12px; align-items: flex-start; outline: none; }
.qgm-ok .ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; background: var(--ok-soft); color: var(--ok); display: inline-flex; align-items: center; justify-content: center; }
.qgm-ok .stack0 { gap: 2px; }
.qgm-ok .em { font-weight: 600; }
.qgm-ok .undo { align-self: flex-start; margin-top: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.qgm-form.dark .fields { flex-direction: row; }
.qgm-form.dark input[type=email] { width: 340px; background: rgba(250,247,242,.08); border-color: rgba(250,247,242,.4); color: var(--onink); }
.qgm-form.dark input::placeholder { color: rgba(250,247,242,.62); }
.qgm-form.dark .go { background: var(--onink); color: var(--inkpanel); }
.qgm-form.dark .err { color: #ffb3a8; }
.qgm-form.dark[data-state="error"] input[type=email] { border-color: #ffb3a8; box-shadow: 0 0 0 1px #ffb3a8; }
.qgm-form.dark .qgm-ok .ic { background: rgba(114,200,149,.2); color: #9fdcb2; }
.qgm-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@keyframes qgm-pop { from { opacity: 0; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
@keyframes qgm-spin { to { transform: rotate(360deg); } }
/* Closing CTA: buttons once sign-up is open, the beta form until then. */
.qgm-signup-open .qgm-ifclosed, :root:not(.qgm-signup-open) .qgm-ifopen { display: none !important; }

/* ---------- 10. FAQ ---------- */
.qgm-faqsec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; padding-top: 130px; padding-bottom: 130px; }
.qgm-faqsec .qgm-stack { gap: 12px; align-self: start; }
.qgm-faqs { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 8px 18px; }
.qgm-faq { border-radius: var(--radius-md); interpolate-size: allow-keywords; transition: background-color .35s ease; }
.qgm-faq + .qgm-faq { border-top: 1px solid var(--line); }
.qgm-faq[open] { background: var(--sunken); }
.qgm-faq::details-content { height: 0; overflow: hidden; transition: height .55s var(--ease), content-visibility .55s allow-discrete; }
.qgm-faq[open]::details-content { height: auto; }
.qgm-faq summary { display: flex; align-items: center; gap: 16px; cursor: pointer; padding: 18px 14px; list-style: none; border-radius: var(--radius-md); }
.qgm-faq summary::-webkit-details-marker { display: none; }
.qgm-faq summary:hover { color: var(--ink-muted); }
.qgm-faq p { padding: 0 14px 20px 58px; }
.qgm-pm { position: relative; width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--ink); box-sizing: border-box; }
.qgm-pm::before, .qgm-pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; margin: -.75px 0 0 -5px; background: var(--ink); border-radius: 1px; }
.qgm-pm::after { transform: rotate(90deg); }
.qgm-faq[open] .qgm-pm::after { display: none; }

/* ---------- 11. Closing call to action ---------- */
.qgm-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: 40px; align-items: center; padding-top: 90px; padding-bottom: 90px; margin-bottom: 40px; }
.qgm-cta .qgm-wm { width: 860px; left: -120px; top: 50%; margin-top: -275px; } /* the Q behind the headline, mostly in view */
.qgm-cta .qgm-form { max-width: 520px; }
.qgm-fanfit { --w: 620; --h: 560; }
.qgm-fan { position: absolute; inset: 0; }
.qgm-fanpic { position: absolute; left: 50%; top: 50%; width: 190px; margin: -127px 0 0 -95px; aspect-ratio: 3 / 4; background: var(--surface) center / cover no-repeat; border: 8px solid var(--surface); box-shadow: 0 30px 60px -30px rgba(0,0,0,.6); transition: transform 1.4s var(--ease) .3s, opacity .9s ease .3s; }
.qgm-fan .p1 { transform: translate3d(-190px, 30px, 0) rotate(-12deg); }
.qgm-fan .p2 { transform: translate3d(200px, -10px, 0) rotate(9deg); }
.qgm-fan .p3 { transform: translate3d(150px, 190px, 0) rotate(-5deg); }
.qgm-fanphone { position: absolute; left: 50%; top: 20px; margin-left: -120px; }

/* ---------- Footer and giant wordmark ---------- */
.qgm-footer { border-top: 1px solid var(--line); padding: 56px 0 32px; }
.qgm-footer .qgm-c { display: flex; flex-direction: column; gap: 40px; }
.qgm-fgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: 40px; }
.qgm-fbrand { display: flex; flex-direction: column; gap: 10px; max-width: 300px; }
.qgm-fgrid nav { display: flex; flex-direction: column; gap: 10px; }
.qgm-fgrid nav a { text-decoration: none; }
.qgm-fbottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.qgm-giant { overflow: hidden; padding-top: 24px; display: flex; justify-content: center; }
.qgm-giant span { display: block; font-family: var(--font-serif); font-size: min(250px, 16.8vw); line-height: .84; font-weight: 600; letter-spacing: -.02em; white-space: nowrap; will-change: transform; }

/* ---------- Motion: reveals (only once the script has added .qgm-js) ---------- */
.qgm-words .w { display: inline-block; transition: opacity 1s ease, filter 1.1s ease, transform 1.3s var(--ease); transition-delay: calc(var(--i) * 55ms); }
.qgm-js .qgm-words:not(.qgm-in) .w { opacity: 0; filter: blur(8px); transform: translate3d(0, .3em, 0); }
.qgm-swoosh path { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s var(--ease) 1s; }
.qgm-js .qgm-words:not(.qgm-in) .qgm-swoosh path { stroke-dashoffset: 1; }
.qgm-blur, .qgm-rise { transition: opacity 1s ease, transform 1.4s var(--ease); transition-delay: calc(var(--d, 0) * 1ms); }
.qgm-js .qgm-blur:not(.qgm-in) { opacity: 0; transform: translate3d(0, 24px, 0); }
.qgm-js .qgm-rise:not(.qgm-in) { opacity: 0; transform: translate3d(0, 64px, 0); }
.qgm-js .qgm-tl:not(.qgm-in) .qgm-stop { opacity: 0; transform: translate3d(0, 14px, 0); }
.qgm-js .qgm-tl:not(.qgm-in) .qgm-line { transform: scaleX(0); }
.qgm-load { animation: qgm-up 1.5s var(--ease) both; animation-delay: calc(var(--d, 0) * 1ms); }
@keyframes qgm-up { from { opacity: 0; transform: translate3d(0, 80px, 0); } to { opacity: 1; transform: none; } }
.qgm-toast { opacity: 0; animation: qgm-toast 12s var(--ease) infinite; animation-delay: calc(1.8s + var(--k) * 2s); will-change: transform, opacity; }
@keyframes qgm-toast { 0% { opacity: 0; transform: translate3d(0, 14px, 0) scale(.97); } 6%, 58% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translate3d(0, -8px, 0); } }
.qgm-develop { transition: opacity 1.2s ease, transform 1.6s var(--ease), filter 1.8s ease; transition-delay: calc(var(--d, 0) * 1ms); }
.qgm-js .qgm-develop:not(.qgm-in) { opacity: .25; filter: grayscale(1) brightness(1.35); transform: translate3d(0, 36px, 0); }
.qgm-js .qgm-fan:not(.qgm-in) .qgm-fanpic { transform: none; opacity: 0; }

/* ---------- Tablet ---------- */
@media (max-width: 1200px) {
  :root { --gut: 40px; }
  .qgm-navin { gap: 28px; }
  .qgm-links { gap: 20px; }
  .qgm-problem, .qgm-before, .qgm-santa, .qgm-reports, .qgm-app, .qgm-cta { gap: 40px; }
  .qgm-paths { grid-template-columns: minmax(0, 360px) 80px minmax(0, 1fr); }
  .qgm-sortrow { grid-template-columns: minmax(0, 300px) 90px minmax(0, 1fr); }
  .qgm-stats .stat { font-size: 56px; }
  .qgm-incl { columns: 1; }
  .qgm-option.two { grid-template-columns: minmax(0, 1fr) 150px; }
  .qgm-fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .qgm-fbrand { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .qgm-links a[href="/help"] { display: none; }
  .qgm-panelfig { margin-top: 0; }
}

/* ---------- Phone and small tablet: the 390 design ---------- */
@media (max-width: 899px) {
  :root { --gut: 24px; }
  .qgm-lg-only { display: none !important; }
  .qgm-sm-only { display: revert !important; }
  .qgm-fit.qgm-sm-only { display: block !important; }
  .qgm-mergedown.qgm-sm-only { display: flex !important; }
  .qgm-sm-br { display: inline !important; }
  .qgm-lg-br { display: none; }
  .qgm-navin { height: 60px; gap: 12px; }
  .qgm-wordmark img { height: 42px; margin-left: -8px; }
  .qgm-links, .qgm-signin { display: none; }
  .qgm-menu-btn { display: inline-flex; }
  .qgm-navin .qgm-btn { height: 40px; padding: 0 16px; }

  .qgm-hero, .qgm-app, .qgm-reports, .qgm-cta { width: calc(100% - 16px); border-radius: 26px; padding-left: 20px; padding-right: 20px; }
  .qgm-ink { border-radius: 22px; }
  .qgm-hero { padding-top: 36px; }
  .qgm-hero .qgm-wm { width: 420px; right: -160px; top: -30px; }
  .qgm-herotext { align-items: stretch; text-align: left; gap: 18px; }
  .qgm-hero h1.overline { font-size: 12px; line-height: 17px; letter-spacing: .12em; }
  .qgm-h1 { font-size: clamp(40px, 11vw, 56px); line-height: 1.08; }
  .qgm-lead { margin-top: 0; font-size: 17px; line-height: 26px; }
  .qgm-ctas { flex-direction: column; gap: 10px; }
  .qgm-ctas .qgm-btn { width: 100%; }
  .qgm-herotext .caption { text-align: center; }
  .qgm-herostage { margin-top: 26px; }
  .qgm-marquee { padding: 14px 0; }
  .qgm-mlist { font-size: 12px; }

  .qgm-h2 { font-size: clamp(36px, 10vw, 48px); }
  .qgm-lead2 { font-size: 17px; line-height: 27px; }
  .qgm-problem, .qgm-before, .qgm-dayhead, .qgm-santa, .qgm-reports, .qgm-app, .qgm-cta, .qgm-faqsec, .qgm-clockrow, .qgm-solo, .qgm-options, .qgm-plans, .qgm-notes, .qgm-numbered, .qgm-texts { grid-template-columns: minmax(0, 1fr); }
  .qgm-problem { gap: 28px; padding-top: 72px; padding-bottom: 56px; }
  .qgm-scrub { font-size: 23px; }
  .qgm-before { gap: 28px; padding-top: 40px; padding-bottom: 72px; }
  .qgm-day { padding-top: 72px; padding-bottom: 64px; }
  .qgm-dayhead { gap: 18px; }
  .qgm-tlcard { margin-top: 28px; padding: 22px 20px; }
  .qgm-tlhd { display: none; }
  .qgm-tenmin { margin-top: 0; }
  .qgm-stops { grid-template-columns: 1fr; gap: 22px; }
  .qgm-stops .qgm-stop, .qgm-stops .qgm-stop:first-child, .qgm-stops .qgm-stop:last-child { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
  .qgm-stop .pt { margin-top: 3px; }
  .qgm-tenmin .qgm-line { left: 6px; right: auto; top: 8px; bottom: 40px; width: 2px; height: auto; transform-origin: top; }
  .qgm-js .qgm-tenmin:not(.qgm-in) .qgm-line { transform: scaleY(0); }
  .qgm-trav { display: none; }
  .qgm-stop .t .body { max-width: none; }
  .qgm-texts { gap: 28px; padding: 32px 20px 28px; margin-top: 24px; }
  .qgm-trio { margin-top: 40px; }
  .qgm-solo { gap: 14px; margin-top: 24px; }
  .qgm-solo .qgm-tile:last-child { padding: 0; background: none; border: 0; }
  .qgm-tile { padding: 22px 20px; }
  .qgm-serif { font-size: 24px; }
  .qgm-app { margin-top: 72px; padding-top: 36px; gap: 28px; }
  .qgm-app > .qgm-stack { padding-bottom: 0; }
  .qgm-app .qgm-btn { width: 100%; }
  .qgm-teth { padding-top: 72px; }
  .qgm-paths { grid-template-columns: minmax(0, 1fr); margin-top: 28px; }
  .qgm-pathcards { gap: 14px; }
  .qgm-same { padding: 26px 22px; }
  .qgm-after { padding-top: 72px; }
  .qgm-sortrow { grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 28px; }
  .qgm-sortarrow { padding: 10px 0; }
  .qgm-sortarrow svg { transform: rotate(90deg); }
  .qgm-sortarrow .caption { display: none; }
  .qgm-clockrow { gap: 24px; margin-top: 24px; }
  .qgm-clockrow > .qgm-stack { gap: 14px; }
  .qgm-clockrow .qgm-tile { padding: 0; background: none; border: 0; }
  .qgm-panelfig { order: -1; width: 100%; margin-top: 0; }
  .qgm-panelfig { order: 0; }
  .qgm-clock { order: -1; }
  .qgm-delivery { padding-top: 72px; padding-bottom: 72px; }
  .qgm-options { gap: 14px; margin-top: 28px; }
  .qgm-option { min-height: 0; padding: 24px 22px; }
  .qgm-option.two { grid-template-columns: minmax(0, 1fr); }
  .qgm-optphone { display: flex; justify-content: center; }
  .qgm-handoff { flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px; }
  .qgm-handoff > svg { transform: rotate(90deg); margin-left: 12px; }
  .qgm-clock { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; }
  .qgm-optphone .qgm-badge { left: 0; }
  .qgm-numbered { gap: 0; margin-top: 24px; }
  .qgm-numbered li { padding: 16px 0; }
  .qgm-reports { padding-top: 40px; padding-bottom: 36px; gap: 32px; }
  .qgm-reports .qgm-wm { width: 380px; right: -140px; top: -80px; }
  .qgm-stats .stat { font-size: 52px; }
  .qgm-stats { gap: 0 18px; }
  .qgm-reportwin .qgm-winbody { height: 300px; }
  .qgm-santa { gap: 28px; padding-top: 72px; padding-bottom: 72px; }
  .qgm-santatext { order: -1; }
  .qgm-santafit { --w: 358; --h: 400; margin-left: 0; }
  .qgm-santafit .p1 { left: 0; top: 20px; width: 170px; }
  .qgm-santafit .p2 { left: 0; top: 260px; width: 190px; }
  .qgm-santaphone { left: auto; right: 0; top: 0; }
  .qgm-santaphone .sz { transform: scale(.76); transform-origin: 100% 0; }
  .qgm-pricing { gap: 24px; padding-top: 72px; padding-bottom: 72px; }
  .qgm-pricing .qgm-center { align-items: flex-start; text-align: left; }
  .qgm-plan { padding: 26px 22px; }
  .qgm-price .stat { font-size: 64px; }
  .qgm-notes { gap: 18px; }
  .qgm-faqsec { gap: 16px; padding-top: 72px; padding-bottom: 72px; }
  .qgm-faqs { padding: 4px 8px; }
  .qgm-faq summary { padding: 18px 8px; }
  .qgm-faq p { padding: 0 8px 20px 52px; }
  .qgm-cta { padding-top: 48px; padding-bottom: 0; gap: 12px; }
  .qgm-cta .qgm-wm { width: 520px; left: -150px; top: -40px; margin-top: 0; }
  .qgm-cta .qgm-ctas .qgm-btn { width: 100%; }
  .qgm-form.dark .fields { flex-direction: column; }
  .qgm-form.dark input[type=email] { width: 100%; }
  .qgm-fanfit { --w: 480; --h: 520; }
  .qgm-footer { padding: 36px 0 28px; }
  .qgm-footer .qgm-c { gap: 28px; }
  .qgm-fgrid { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .qgm-fbottom { flex-direction: column; gap: 4px; }
  .qgm-giant { justify-content: flex-start; padding: 16px var(--gut) 0; }
  .qgm-giant span { font-size: 26.7vw; line-height: .85; }
}
@media (max-width: 600px) {
  :root { --gut: 16px; }
}

/* No JavaScript: rough scales for the fixed-size mockups (home.js measures the real ones). */
@media (max-width: 1400px) { :root:not(.qgm-js) .qgm-herodev { --fit: .9; } }
@media (max-width: 1200px) { :root:not(.qgm-js) .qgm-fit { --fit: .8; } :root:not(.qgm-js) .qgm-herodev { --fit: .72; } }
@media (max-width: 1000px) { :root:not(.qgm-js) .qgm-fit { --fit: .66; } :root:not(.qgm-js) .qgm-herodev { --fit: .62; } }
@media (max-width: 899px) { :root:not(.qgm-js) .qgm-fit { --fit: .9; } }
@media (max-width: 600px) { :root:not(.qgm-js) .qgm-fit { --fit: .54; } :root:not(.qgm-js) .qgm-herodev.qgm-fit, :root:not(.qgm-js) .qgm-santafit { --fit: .92; } }

/* ---------- Reduced motion: everything shows, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="qgm-"], [class*="qgm-"] *, .qgm-words .w { animation: none !important; transition: none !important; }
  .qgm-js .qgm-words:not(.qgm-in) .w, .qgm-js .qgm-blur:not(.qgm-in), .qgm-js .qgm-rise:not(.qgm-in), .qgm-js .qgm-develop:not(.qgm-in) { opacity: 1; filter: none; transform: none !important; }
  .qgm-toast { opacity: 1; }
  .qgm-trav, .qgm-scan { display: none; }
  .odo .col { transition: none !important; }
  .qgm-js .qgm-stats:not(.qgm-in) .odo .col { transform: translate3d(0, calc(var(--n) * -10%), 0); }
  .qgm-js .qgm-blur:not(.qgm-in) .qgm-mess { opacity: 1; }
  .qgm-js .qgm-words:not(.qgm-in) .qgm-swoosh path, .qgm-js .qgm-tl:not(.qgm-in) .qgm-mline { stroke-dashoffset: 0; }
}

/* Without JavaScript: a solid nav (no scrolled state) and no menu button (every section is on the page). */
:root:not(.qgm-js) .qgm-nav { background: var(--paper); box-shadow: 0 1px 0 var(--line); }
:root:not(.qgm-js) .qgm-menu-btn { display: none; }

/* Illustrations drawn as CSS backgrounds below the fold load as they come near the screen
   (home.js adds .qgm-bgon), not with the first paint. .qgm-lazyon is set by a one-line script in
   the page head, so it applies from the first paint; without JavaScript they load as usual. */
.qgm-lazyon .qgm-lazybg:not(.qgm-bgon), .qgm-lazyon .qgm-lazybg:not(.qgm-bgon) * { background-image: none !important; }

/* Hero link to the iPhone app section */
.qgm-heroapp { align-self: center; margin-top: 4px; text-decoration: none; white-space: normal; text-align: left; }
.qgm-heroapp svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; flex: none; }
.qgm-heroapp:hover { background: rgba(250,247,242,.2); }
.qgm-app .qgm-checks { margin-top: 2px; }