/* ============================================================================= Onboarding funnel + pricing — presentation ----------------------------------------------------------------------------- Serves /start and /pricing. Both stamp data-ui='v2' on so v2/tokens.css applies; every colour, radius and step below resolves to a --v2-* token, so the funnel cannot drift from the dashboard it sells. Mobile-first on purpose. A quiz funnel is overwhelmingly opened on a phone, so the base rules are the narrow layout and the media queries add width back. One question fills the viewport. The answer rows are the only real component here, and they are sized for a thumb (56px min) rather than a cursor. ========================================================================== */ /* ------------------------------------------------------------------ page -- */ /* These pages load tokens.css only — not the dashboard's style.css — so they do not inherit its global reset. Without this, any `width: 100%` element that also has padding overflows the viewport. */ body.funnel *, body.funnel *::before, body.funnel *::after { box-sizing: border-box; } html[data-ui='v2'] body.funnel { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--v2-canvas); color: var(--v2-ink); font-family: var(--v2-sans); font-size: var(--v2-t-md); line-height: 1.55; -webkit-font-smoothing: antialiased; } /* A single wash behind everything. Fixed rather than on the body so it does not repeat or shift as the taller screens scroll. */ body.funnel::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -20%, var(--v2-accent-soft), transparent 60%), radial-gradient(100% 60% at 50% 120%, var(--v2-sunk), transparent 70%); } .fn-shell { position: relative; z-index: 1; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } .fn-main { flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; max-width: 620px; margin: 0 auto; padding: var(--v2-s5) var(--v2-s4) var(--v2-s8); } .fn-main--wide { max-width: 1120px; } /* ------------------------------------------------------------------- top -- */ /* Three columns so the brand is centred on the page, not centred in whatever space the actions leave over. /start has no actions and /pricing has one, and the mark has to land in the same place on both. Side columns are minmax(0,1fr) so a long action label shrinks its own column instead of shoving the middle one off-centre. */ .fn-top { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--v2-s3); width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--v2-s4) var(--v2-s4) 0; box-sizing: border-box; } /* Brand lockup — the same construction as the dashboard sidebar (see v2/shell.css .mi-brand): mark and wordmark painted as CSS masks over currentColor, so the real drawn logotype is used rather than the wordmark re-set in Inter. Pure white here rather than --v2-ink; these are the only two pages in the product with no chrome around them to sit against. Mask paths are relative to this file. */ .fn-brand { grid-column: 2; display: inline-flex; align-items: center; gap: var(--v2-s2); text-decoration: none; color: #FFFFFF; transition: opacity var(--v2-fast) var(--v2-ease); } .fn-brand:hover { opacity: 0.65; } .fn-brand:focus-visible { outline: none; box-shadow: var(--v2-ring); border-radius: var(--v2-r-sm); } .fn-brand-mark, .fn-brand-wordmark { display: block; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; /* contain, so the box below need not match the SVG ratio to the pixel */ -webkit-mask-size: contain; mask-size: contain; flex-shrink: 0; } .fn-brand-mark { width: 22px; height: 22px; -webkit-mask-image: url('../brand/macroinsight-icon.svg'); mask-image: url('../brand/macroinsight-icon.svg'); } .fn-brand-wordmark { width: 112px; height: 19px; -webkit-mask-image: url('../brand/macroinsight-wordmark.svg'); mask-image: url('../brand/macroinsight-wordmark.svg'); } .fn-top-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--v2-s2); } /* Narrow screens: the brand keeps the centre and any action drops to its own centred row beneath it. On a phone a right-aligned nowrap label and a centred 112px wordmark cannot both fit across 375px without colliding. */ @media (max-width: 560px) { .fn-top { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: var(--v2-s2); } .fn-brand { grid-column: 1; } .fn-top-actions { grid-column: 1; justify-self: center; } } .fn-link { display: inline-flex; align-items: center; gap: var(--v2-s1); padding: var(--v2-s1) var(--v2-s2); border-radius: var(--v2-r-sm); font-size: var(--v2-t-sm); font-weight: 500; color: var(--v2-ink-2); text-decoration: none; /* Topbar links must not break mid-phrase and push the header to two rows. */ white-space: nowrap; transition: color var(--v2-fast) var(--v2-ease), background var(--v2-fast) var(--v2-ease); } .fn-link:hover { color: var(--v2-ink); background: var(--v2-hover); } .fn-link:focus-visible { outline: none; box-shadow: var(--v2-ring); } /* -------------------------------------------------------------- progress -- */ .fn-progress { width: 100%; max-width: 620px; margin: var(--v2-s5) auto 0; padding: 0 var(--v2-s4); box-sizing: border-box; } .fn-progress-track { height: 3px; border-radius: var(--v2-r-pill); background: var(--v2-sunk-2); overflow: hidden; } .fn-progress-fill { height: 100%; width: 0; border-radius: var(--v2-r-pill); background: var(--v2-accent); transition: width var(--v2-med) var(--v2-ease-out); } /* There is deliberately no meta row under the track — no step label, no "3 of 8". The bar is the whole progress indicator. */ /* ---------------------------------------------------------------- screen -- */ .fn-screen { display: none; } .fn-screen.is-active { display: block; animation: fn-enter var(--v2-med) var(--v2-ease-out) both; } @keyframes fn-enter { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } .fn-head { margin: var(--v2-s7) 0 var(--v2-s6); } .fn-kicker { display: block; margin-bottom: var(--v2-s3); font-size: var(--v2-t-xs); font-weight: 600; letter-spacing: var(--v2-wide); text-transform: uppercase; color: var(--v2-accent-text); } .fn-prompt { margin: 0; font-size: var(--v2-t-2xl); font-weight: 600; line-height: 1.2; letter-spacing: var(--v2-tighter); color: var(--v2-ink); text-wrap: pretty; } .fn-note { margin: var(--v2-s3) 0 0; font-size: var(--v2-t-sm); color: var(--v2-ink-3); text-wrap: pretty; } /* --------------------------------------------------------------- answers -- */ .fn-answers { display: flex; flex-direction: column; gap: var(--v2-s2); margin: 0; padding: 0; list-style: none; } /* The whole row is the target. Grid rather than flex so the label column is the only thing that flexes and the two fixed columns never squeeze it. */ .fn-answer { display: grid; grid-template-columns: 38px minmax(0, 1fr) 18px; align-items: center; gap: var(--v2-s3); width: 100%; min-height: 64px; padding: var(--v2-s3) var(--v2-s4); box-sizing: border-box; border: 0; border-radius: var(--v2-r-lg); background: var(--v2-surface); box-shadow: var(--v2-e1); color: var(--v2-ink); font-family: inherit; font-size: var(--v2-t-md); font-weight: 500; line-height: 1.4; text-align: left; cursor: pointer; transition: background var(--v2-fast) var(--v2-ease), box-shadow var(--v2-fast) var(--v2-ease), transform var(--v2-fast) var(--v2-ease); } @media (hover: hover) { .fn-answer:hover { background: var(--v2-hover); box-shadow: 0 0 0 1px var(--v2-accent-line), 0 2px 10px #00000038; transform: translateY(-1px); } .fn-answer:hover .fn-answer-go { opacity: 1; transform: none; } .fn-answer:hover .fn-answer-icon { background: var(--v2-accent-soft); color: var(--v2-accent-text); } } .fn-answer:focus-visible { outline: none; box-shadow: var(--v2-ring); } .fn-answer:active { transform: translateY(0) scale(0.995); } /* Confirmation beat. The row commits visually before the screen advances, so the tap registers as an answer rather than the page just jumping. */ .fn-answer.is-chosen { background: var(--v2-accent-soft); box-shadow: 0 0 0 1px var(--v2-accent), 0 2px 10px #00000038; } .fn-answer.is-chosen .fn-answer-icon { background: var(--v2-accent); color: var(--v2-accent-ink); } .fn-answer.is-chosen .fn-answer-go { opacity: 1; color: var(--v2-accent-text); } /* Previously-chosen answer when stepping back through the quiz. */ .fn-answer.is-previous { box-shadow: 0 0 0 1px var(--v2-accent-line), var(--v2-e1); } .fn-answer.is-previous .fn-answer-icon { background: var(--v2-accent-soft); color: var(--v2-accent-text); } /* Illustration chip. A well rather than an outlined box: the glyph is the thing being read, and a border would compete with the strokes inside it. */ .fn-answer-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--v2-r-md); background: var(--v2-sunk); color: var(--v2-ink-2); transition: background var(--v2-fast) var(--v2-ease), color var(--v2-fast) var(--v2-ease); } .fn-answer-icon svg { display: block; } /* Numeric variant — same well, a digit instead of a drawing. Tabular mono so two- and one-digit rows sit on the same optical centre. */ .fn-answer-icon--num { font-family: var(--v2-mono); font-size: var(--v2-t-sm); font-weight: 600; font-variant-numeric: tabular-nums; /* --v2-ink-2, the same as the glyphs: at ink-3 a 13px digit in a 38px well read noticeably fainter than an illustrated row two questions earlier. */ color: var(--v2-ink-2); } .fn-answer-go { font-size: var(--v2-t-md); color: var(--v2-ink-3); opacity: 0; transform: translateX(-4px); transition: opacity var(--v2-fast) var(--v2-ease), transform var(--v2-fast) var(--v2-ease); } .fn-foot { display: flex; align-items: center; gap: var(--v2-s3); margin-top: var(--v2-s6); font-size: var(--v2-t-xs); color: var(--v2-ink-3); } .fn-back { display: inline-flex; align-items: center; gap: var(--v2-s1); padding: var(--v2-s1) var(--v2-s2); border: 0; border-radius: var(--v2-r-sm); background: none; color: var(--v2-ink-3); font-family: inherit; font-size: var(--v2-t-xs); cursor: pointer; } .fn-back:hover { background: var(--v2-hover); color: var(--v2-ink-2); } .fn-back:focus-visible { outline: none; box-shadow: var(--v2-ring); } .fn-back[hidden] { display: none; } .fn-hint { margin-left: auto; } @media (max-width: 600px) { .fn-hint { display: none; } } /* ----------------------------------------------------------------- intro -- */ .fn-intro { padding-top: var(--v2-s7); } .fn-intro-title { margin: 0; font-size: var(--v2-t-3xl); font-weight: 700; line-height: 1.08; letter-spacing: var(--v2-tighter); text-wrap: balance; } .fn-intro-lede { margin: var(--v2-s4) 0 0; font-size: var(--v2-t-lg); line-height: 1.5; color: var(--v2-ink-2); text-wrap: pretty; } .fn-intro-points { margin: var(--v2-s6) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--v2-s3); } .fn-intro-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--v2-s3); align-items: start; font-size: var(--v2-t-sm); color: var(--v2-ink-2); } .fn-intro-points .fn-tick { color: var(--v2-accent-text); } .fn-cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--v2-s2); width: 100%; min-height: 52px; margin-top: var(--v2-s7); padding: var(--v2-s3) var(--v2-s6); box-sizing: border-box; border: 0; border-radius: var(--v2-r-md); background: var(--v2-accent); color: var(--v2-accent-ink); font-family: inherit; font-size: var(--v2-t-lg); font-weight: 600; letter-spacing: var(--v2-tight); text-decoration: none; cursor: pointer; transition: background var(--v2-fast) var(--v2-ease), transform var(--v2-fast) var(--v2-ease); } .fn-cta:hover { background: var(--v2-accent-hover); } .fn-cta:active { transform: scale(0.995); } .fn-cta:focus-visible { outline: none; box-shadow: var(--v2-ring); } .fn-cta--secondary { background: var(--v2-sunk-2); color: var(--v2-ink); box-shadow: var(--v2-e-btn); font-size: var(--v2-t-md); min-height: 44px; margin-top: var(--v2-s3); } .fn-cta--secondary:hover { background: var(--v2-hover-2); } .fn-microcopy { margin: var(--v2-s3) 0 0; font-size: var(--v2-t-xs); color: var(--v2-ink-3); text-align: center; } /* --------------------------------------------------------------- analyse -- */ .fn-analyse { padding-top: var(--v2-s9); text-align: center; } .fn-analyse-title { margin: 0 0 var(--v2-s6); font-size: var(--v2-t-xl); font-weight: 600; letter-spacing: var(--v2-tight); } .fn-analyse-list { margin: 0 auto; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--v2-s3); text-align: left; max-width: 420px; } .fn-analyse-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--v2-s3); align-items: center; font-size: var(--v2-t-sm); color: var(--v2-ink-3); opacity: 0.35; transition: opacity var(--v2-med) var(--v2-ease), color var(--v2-med) var(--v2-ease); } .fn-analyse-list li.is-done { opacity: 1; color: var(--v2-ink-2); } .fn-analyse-list li.is-done .fn-analyse-mark { color: var(--v2-bull); } .fn-analyse-mark { font-family: var(--v2-mono); color: var(--v2-ink-4); } /* ---------------------------------------------------------------- result -- */ .fn-result { padding-top: var(--v2-s6); } .fn-match { display: inline-flex; align-items: center; gap: var(--v2-s2); padding: var(--v2-s1) var(--v2-s3); border-radius: var(--v2-r-pill); background: var(--v2-bull-soft); color: var(--v2-bull); font-size: var(--v2-t-xs); font-weight: 600; letter-spacing: var(--v2-wide); text-transform: uppercase; } .fn-result-title { margin: var(--v2-s4) 0 0; font-size: var(--v2-t-3xl); font-weight: 700; line-height: 1.1; letter-spacing: var(--v2-tighter); text-wrap: balance; } .fn-result-reason { margin: var(--v2-s4) 0 0; font-size: var(--v2-t-lg); line-height: 1.5; color: var(--v2-ink-2); text-wrap: pretty; } .fn-card { margin-top: var(--v2-s6); padding: var(--v2-s5); border-radius: var(--v2-r-lg); background: var(--v2-surface); box-shadow: var(--v2-e2); } .fn-card-head { display: flex; align-items: baseline; gap: var(--v2-s3); flex-wrap: wrap; } .fn-card-title { margin: 0; font-size: var(--v2-t-xl); font-weight: 650; letter-spacing: var(--v2-tight); } .fn-card-kicker { font-size: var(--v2-t-sm); color: var(--v2-ink-3); } .fn-card-sub { margin: var(--v2-s3) 0 0; font-size: var(--v2-t-sm); line-height: 1.55; color: var(--v2-ink-2); } .fn-section-label { margin: var(--v2-s6) 0 var(--v2-s3); font-size: var(--v2-t-xs); font-weight: 600; letter-spacing: var(--v2-wide); text-transform: uppercase; color: var(--v2-ink-3); } /* Tailored setup list — the answers turned into concrete switches. */ .fn-tailored { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--v2-s3); } .fn-tailored li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--v2-s3); align-items: start; font-size: var(--v2-t-sm); line-height: 1.5; color: var(--v2-ink-2); } .fn-tailored .fn-tick { color: var(--v2-bull); } .fn-tailored b { color: var(--v2-ink); font-weight: 600; } /* Why-not-the-others note. */ .fn-because { margin-top: var(--v2-s4); padding: var(--v2-s4); border-radius: var(--v2-r-md); background: var(--v2-sunk); font-size: var(--v2-t-sm); line-height: 1.55; color: var(--v2-ink-2); } .fn-because b { color: var(--v2-ink); font-weight: 600; } /* ----------------------------------------------------------------- order -- */ .fn-order { margin-top: var(--v2-s6); } .fn-order-rows { display: flex; flex-direction: column; gap: var(--v2-s3); padding: var(--v2-s4) 0 0; } .fn-order-row { display: flex; align-items: baseline; gap: var(--v2-s3); font-size: var(--v2-t-sm); color: var(--v2-ink-2); } .fn-order-row dt { margin: 0; } .fn-order-row dd { margin: 0 0 0 auto; font-variant-numeric: tabular-nums; color: var(--v2-ink); } .fn-order-row--total { margin-top: var(--v2-s2); padding-top: var(--v2-s4); box-shadow: inset 0 1px 0 var(--v2-line); font-size: var(--v2-t-lg); font-weight: 650; color: var(--v2-ink); } .fn-order-row--total dd { font-size: var(--v2-t-xl); } .fn-order-note { margin: var(--v2-s4) 0 0; font-size: var(--v2-t-xs); line-height: 1.6; color: var(--v2-ink-3); } .fn-order-note b { color: var(--v2-ink-2); font-weight: 600; } .fn-trust { display: flex; flex-wrap: wrap; gap: var(--v2-s2) var(--v2-s4); margin-top: var(--v2-s4); font-size: var(--v2-t-xs); color: var(--v2-ink-3); } .fn-trust span { display: inline-flex; align-items: center; gap: var(--v2-s1); } /* ------------------------------------------------------- plan comparison -- */ /* Disclosure rather than a modal: the full list has to be reachable without leaving the checkout, because leaving is where funnels lose people. */ .fn-disclosure { margin-top: var(--v2-s6); border-radius: var(--v2-r-lg); background: var(--v2-surface); box-shadow: var(--v2-hairline); overflow: hidden; } .fn-disclosure > summary { display: flex; align-items: center; gap: var(--v2-s3); padding: var(--v2-s4) var(--v2-s5); font-size: var(--v2-t-sm); font-weight: 550; color: var(--v2-ink-2); cursor: pointer; list-style: none; } .fn-disclosure > summary::-webkit-details-marker { display: none; } .fn-disclosure > summary:hover { background: var(--v2-hover); color: var(--v2-ink); } .fn-disclosure > summary:focus-visible { outline: none; box-shadow: var(--v2-ring); } .fn-disclosure > summary::after { content: "▾"; margin-left: auto; font-size: var(--v2-t-xs); color: var(--v2-ink-3); transition: transform var(--v2-fast) var(--v2-ease); } .fn-disclosure[open] > summary::after { transform: rotate(180deg); } .fn-disclosure-body { padding: 0 var(--v2-s5) var(--v2-s5); } /* The plan grid. One column on a phone, three from tablet up. Also used standalone on /pricing. Cards stretch to a common height (the grid default) rather than sizing to their own content. Combined with `margin-top: auto` on .fn-plan-action that lands all three buttons on one baseline — with feature lists of 8, 12 and 9 items, content-height cards put them 230px apart, which reads as broken. */ .fn-plans { display: grid; gap: var(--v2-s4); grid-template-columns: minmax(0, 1fr); margin-top: var(--v2-s5); } @media (min-width: 860px) { .fn-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--v2-s5); } } .fn-plan { position: relative; display: flex; flex-direction: column; padding: var(--v2-s5); border-radius: var(--v2-r-lg); background: var(--v2-surface); box-shadow: var(--v2-e1); } .fn-plan--rec { box-shadow: 0 0 0 1px var(--v2-accent-line), 0 8px 28px #00000057; } .fn-plan--chosen { box-shadow: 0 0 0 1px var(--v2-accent), 0 8px 28px #00000057; } .fn-plan-flag { position: absolute; top: calc(-1 * var(--v2-s3)); left: var(--v2-s5); padding: 2px var(--v2-s2); border-radius: var(--v2-r-pill); background: var(--v2-accent); color: var(--v2-accent-ink); font-size: 10px; font-weight: 700; letter-spacing: var(--v2-wide); text-transform: uppercase; } .fn-plan-name { margin: 0; font-size: var(--v2-t-lg); font-weight: 650; letter-spacing: var(--v2-tight); } .fn-plan-kicker { margin: var(--v2-s1) 0 0; font-size: var(--v2-t-xs); color: var(--v2-ink-3); } .fn-plan-price { display: flex; align-items: baseline; gap: var(--v2-s1); margin: var(--v2-s4) 0 0; } .fn-plan-amount { font-size: var(--v2-t-3xl); font-weight: 700; letter-spacing: var(--v2-tighter); font-variant-numeric: tabular-nums; line-height: 1; } .fn-plan-per { font-size: var(--v2-t-sm); color: var(--v2-ink-3); } .fn-plan-billed { margin: var(--v2-s2) 0 0; font-size: var(--v2-t-xs); color: var(--v2-ink-3); } .fn-plan-summary { margin: var(--v2-s4) 0 0; font-size: var(--v2-t-sm); line-height: 1.55; color: var(--v2-ink-2); } .fn-plan-inherits { margin: var(--v2-s5) 0 var(--v2-s2); font-size: var(--v2-t-xs); font-weight: 600; color: var(--v2-ink-2); } .fn-plan-features { margin: var(--v2-s4) 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--v2-s2); } .fn-plan-features li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--v2-s2); align-items: start; font-size: var(--v2-t-sm); line-height: 1.45; color: var(--v2-ink-2); } .fn-plan-features .fn-tick { color: var(--v2-bull); } .fn-plan-limits { margin-top: var(--v2-s4); } .fn-plan-limits li { color: var(--v2-ink-3); } .fn-plan-limits .fn-tick { color: var(--v2-ink-4); } .fn-plan-action { margin-top: auto; padding-top: var(--v2-s5); } .fn-plan-action .fn-cta { margin-top: 0; min-height: 44px; font-size: var(--v2-t-md); } .fn-plan-current { display: block; padding: var(--v2-s3); border-radius: var(--v2-r-md); background: var(--v2-accent-soft); color: var(--v2-accent-text); font-size: var(--v2-t-sm); font-weight: 600; text-align: center; } /* ------------------------------------------------------------- confirmed -- */ .fn-done { padding-top: var(--v2-s9); text-align: center; } .fn-done-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto var(--v2-s5); border-radius: var(--v2-r-pill); background: var(--v2-bull-soft); color: var(--v2-bull); font-size: var(--v2-t-2xl); } .fn-done-title { margin: 0; font-size: var(--v2-t-2xl); font-weight: 650; letter-spacing: var(--v2-tighter); } .fn-done-body { margin: var(--v2-s4) auto 0; max-width: 460px; font-size: var(--v2-t-md); color: var(--v2-ink-2); } /* ------------------------------------------------------- pricing page -- */ .fn-page-head { margin: var(--v2-s8) 0 0; text-align: center; } .fn-page-title { margin: 0; font-size: var(--v2-t-3xl); font-weight: 700; line-height: 1.1; letter-spacing: var(--v2-tighter); text-wrap: balance; } .fn-page-lede { margin: var(--v2-s4) auto 0; max-width: 560px; font-size: var(--v2-t-lg); line-height: 1.5; color: var(--v2-ink-2); text-wrap: pretty; } .fn-page-trial { display: inline-flex; align-items: center; gap: var(--v2-s2); margin-top: var(--v2-s5); padding: var(--v2-s2) var(--v2-s4); border-radius: var(--v2-r-pill); background: var(--v2-accent-soft); box-shadow: 0 0 0 1px var(--v2-accent-line); color: var(--v2-accent-text); font-size: var(--v2-t-sm); font-weight: 600; } .fn-faq { margin-top: var(--v2-s9); } .fn-faq-title { margin: 0 0 var(--v2-s5); font-size: var(--v2-t-xl); font-weight: 650; letter-spacing: var(--v2-tight); text-align: center; } .fn-faq-grid { display: grid; gap: var(--v2-s5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 760px) { .fn-faq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .fn-faq-q { margin: 0 0 var(--v2-s2); font-size: var(--v2-t-md); font-weight: 600; color: var(--v2-ink); } .fn-faq-a { margin: 0; font-size: var(--v2-t-sm); line-height: 1.6; color: var(--v2-ink-2); } .fn-page-foot { margin-top: var(--v2-s9); padding-top: var(--v2-s5); box-shadow: inset 0 1px 0 var(--v2-line); display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-s3); font-size: var(--v2-t-xs); color: var(--v2-ink-3); } .fn-page-foot a { color: var(--v2-ink-2); } /* -------------------------------------------------------------- desktop -- */ @media (min-width: 760px) { /* Sit the quiz lower in the viewport. On a desktop screen the header is only ~34px tall, so content that starts right under it crowds the top edge with a lot of empty space left below. Mobile keeps the tighter base spacing — there the fold is the constraint, not the emptiness. */ .fn-main { padding-top: var(--v2-s9); } .fn-head { margin-top: var(--v2-s9); } .fn-intro { padding-top: var(--v2-s9); } .fn-prompt { font-size: var(--v2-t-3xl); } .fn-intro-title { font-size: var(--v2-t-4xl); } .fn-result-title { font-size: var(--v2-t-4xl); } .fn-cta { width: auto; min-width: 280px; } .fn-plan-action .fn-cta { width: 100%; } } /* -------------------------------------------------------------- motion --- */ @media (prefers-reduced-motion: reduce) { .fn-screen.is-active { animation: none; } .fn-answer, .fn-answer-go, .fn-answer-key, .fn-progress-fill, .fn-cta { transition: none; } .fn-answer:hover { transform: none; } }