/* ============================================================================ MAR-79 — Opportunity Finder ("Find My Stocks") ============================================================================ This is the approved concept (MMR_Find_My_Stocks_Opportunity_Map_v4.html) reproduced as the Prototype home, not a reinterpretation of it. The hero, the three-step flow, the three colour- separated result groups, the two-column rich card and the price-context panel are the approved shapes and keep the approved proportions. TWO DELIBERATE DIFFERENCES FROM THE CONCEPT FILE, BOTH SUBTRACTIONS: 1. The concept carried its own sidebar and top bar. The Prototype shell already provides both, so the finder renders into the shell's content area and drops its duplicates. Nothing about the card itself changed. 2. The concept's palette is re-declared here from the values v2/mmr-tokens.css actually paints, so the finder matches the Company Workspace rather than approximating it. The mapping, concept -> token: --bg #06101d -> --bg #07101b --panel #0e1a2b -> --surface #0e1a2b (identical already) --border #21324d -> --border #21324d (identical already) --text #eef5ff -> --text #f2f6fb --muted #8ea2b9 -> --muted #9babc2 --green #22e07a -> --accent #27e281 (production paints this one) --blue #4fd8ff -> --calm #5aa7ff --gold #f2bd4a -> --warn #ffb547 The three GROUP colours are the concept's own choice and the whole point of the results screen, so they stay saturated and stay distinct — the token swap moves them a few degrees, never toward each other. EVERYTHING IS SCOPED UNDER .of-root. The v2 SPA has its own token layer in css/app.css, and the freeze on the rest of the V2 preview is lifted for this feature only. A bare :root block here would restyle every other V2 page as a side effect, which is exactly what this task is not allowed to do. ============================================================================ */ /* --------------------------------------------------------------------------- The sidebar call to action. The shell is sidebar-based, so this is a sidebar item — inventing a second top navigation to hold one button would have left the product with two navigations. Prominence comes from weight instead of position: full-bleed accent fill against a column of muted 14px text, its own block above the nav groups, and a permanent resting state. It is never hidden after onboarding. --------------------------------------------------------------------------- */ .nav-cta{ display:flex;align-items:center;gap:10px;margin:2px 12px 8px;padding:14px 14px; border-radius:12px;text-decoration:none;font-size:15px;font-weight:800;letter-spacing:-.01em; background:linear-gradient(135deg,#27e281,#12b566);color:#04120a; box-shadow:0 6px 18px rgba(39,226,129,.28);transition:filter .15s,transform .08s; } .nav-cta:hover{filter:brightness(1.06)} .nav-cta:active{transform:translateY(1px)} .nav-cta .ic{width:18px;text-align:center;font-size:16px;flex:none} /* The label owns both lines. A single flex row with a pill on the end wrapped "Find My / Stocks" at the 232px sidebar width, which reads as a bug rather than as emphasis. */ .nav-cta .lbl{display:flex;flex-direction:column;gap:2px;min-width:0;line-height:1.15} .nav-cta em{font-style:normal;font-family:var(--mono);font-size:8.5px;letter-spacing:.05em; text-transform:uppercase;font-weight:700;opacity:.72;white-space:nowrap} .nav-cta.on{box-shadow:0 6px 18px rgba(39,226,129,.28),inset 0 0 0 2px rgba(255,255,255,.5)} /* The finder is a dark canvas in both themes: the approved design is dark, and a dark card floating on a light page reads as a broken island. shell.js puts .of-canvas on for this route only, so no other V2 page is affected. */ body.of-canvas .content{background:#07101b} body.of-canvas .main{background:#07101b} .of-root{ --of-bg:#07101b; --of-panel:#0e1a2b; --of-panel-2:#0b1727; --of-panel-3:#0d1d31; --of-border:#21324d; --of-border-2:#2b4165; --of-text:#f2f6fb; --of-muted:#9babc2; --of-faint:#6f829c; --of-green:#27e281; --of-blue:#5aa7ff; --of-gold:#ffb547; --of-red:#ff5263; color:var(--of-text); font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; } /* the concept's card, centred in the shell's content area */ .of-wrap{display:flex;justify-content:center} .of-card{ width:min(1100px,100%); background:radial-gradient(circle at 50% -22%,rgba(39,226,129,.13),transparent 34%), linear-gradient(180deg,rgba(14,26,43,.98),rgba(11,23,39,.98)); border:1px solid var(--of-border);border-radius:22px;overflow:hidden; box-shadow:0 30px 90px rgba(0,0,0,.34); } /* ---------------- hero ---------------- */ .of-hero{text-align:center;padding:48px 42px 30px} .of-kicker{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--of-faint)} .of-hero h1{font-size:48px;line-height:1.06;margin:14px auto;max-width:830px;font-weight:800;letter-spacing:-.02em} .of-hero h1 em{font-style:normal;color:var(--of-green)} .of-hero p{font-size:18px;color:var(--of-muted);max-width:760px;margin:0 auto;line-height:1.5} .of-cta{ display:block;margin:34px auto 14px;width:min(640px,92%);padding:26px;border:0;border-radius:18px; background:linear-gradient(#ff5263,#d7192d);color:#fff;font:inherit;font-size:27px;font-weight:900; letter-spacing:.01em;cursor:pointer;box-shadow:0 18px 44px rgba(255,82,99,.3); } .of-cta:hover{filter:brightness(1.06)} .of-micro{font-size:12px;color:var(--of-faint)} /* ---------------- flow ---------------- */ .of-flow{padding:0 32px 34px} .of-progress{display:flex;justify-content:center;gap:8px;margin-bottom:24px} .of-dot{width:58px;height:5px;border-radius:20px;background:var(--of-border);transition:background .18s} .of-dot.on{background:var(--of-green)} .of-q{font-size:27px;font-weight:800;text-align:center;letter-spacing:-.01em} .of-qs{text-align:center;color:var(--of-muted);margin:7px 0 22px;font-size:14px} .of-opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .of-opt{ background:var(--of-panel-2);border:1px solid #263b57;border-radius:15px;padding:18px; cursor:pointer;min-height:130px;text-align:left;color:inherit;font:inherit;display:block;width:100%; transition:border-color .15s,box-shadow .15s,background .15s; } .of-opt:hover{border-color:#45698f} .of-opt[aria-pressed="true"]{border-color:var(--of-green);box-shadow:0 0 0 2px rgba(39,226,129,.13);background:#0d2130} .of-ico{font-size:22px;line-height:1} .of-ot{font-size:16px;font-weight:800;margin:10px 0 5px} .of-od{font-size:13px;color:var(--of-muted);line-height:1.42} .of-actions{display:flex;justify-content:center;gap:10px;margin-top:24px;align-items:center} .of-btn{padding:11px 18px;border-radius:999px;border:1px solid var(--of-border-2);background:#102038; color:var(--of-text);font:inherit;font-weight:700;font-size:14px;cursor:pointer} .of-btn:hover{border-color:#3d5c86} .of-btn.primary{background:var(--of-green);border-color:var(--of-green);color:#04120a} .of-btn.primary:hover{filter:brightness(1.07)} .of-hint{font-size:12px;color:var(--of-gold)} /* ---------------- results ---------------- */ .of-results{padding:32px} .of-rh{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;flex-wrap:wrap} .of-rh h2{margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em} .of-rh p{margin:5px 0 0;color:var(--of-muted);font-size:14px} .of-groups{display:grid;gap:22px} .of-sectionhint{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px} .of-hint2{padding:12px 14px;border-radius:14px;border:1px solid #27425d;background:var(--of-panel-2)} .of-hint2 b{display:block;font-size:14px;margin-bottom:4px} .of-hint2 small{color:var(--of-muted);font-size:12px;line-height:1.45;display:block} .of-hint2.now{border-color:rgba(39,226,129,.45);background:rgba(39,226,129,.09)} .of-hint2.later{border-color:rgba(90,167,255,.38);background:rgba(90,167,255,.08)} .of-group{border:1px solid #20364f;border-radius:18px;background:#091522;padding:16px} .of-group.ready{border-color:rgba(39,226,129,.55); background:linear-gradient(180deg,rgba(39,226,129,.12),rgba(9,21,34,.98) 100%)} .of-group.better_price{border-color:rgba(90,167,255,.55); background:linear-gradient(180deg,rgba(90,167,255,.12),rgba(9,21,34,.98) 100%)} .of-group.confirm{border-color:rgba(255,181,71,.55); background:linear-gradient(180deg,rgba(255,181,71,.12),rgba(9,21,34,.98) 100%)} .of-band{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;margin-bottom:14px;font-weight:800} .of-band .tag{font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding:5px 8px; border-radius:999px;border:1px solid rgba(255,255,255,.22);white-space:nowrap} .of-band .txt{display:flex;flex-direction:column;gap:3px} .of-band .txt strong{font-size:19px} .of-band .txt span{font-size:12.5px;font-weight:600;color:#e7eef7} .of-group.ready .of-band{background:linear-gradient(90deg,rgba(39,226,129,.30),rgba(39,226,129,.12)); box-shadow:inset 0 0 0 1px rgba(39,226,129,.22)} .of-group.better_price .of-band{background:linear-gradient(90deg,rgba(90,167,255,.30),rgba(90,167,255,.12)); box-shadow:inset 0 0 0 1px rgba(90,167,255,.22)} .of-group.confirm .of-band{background:linear-gradient(90deg,rgba(255,181,71,.30),rgba(255,181,71,.12)); box-shadow:inset 0 0 0 1px rgba(255,181,71,.22)} .of-grouptitle{margin-bottom:12px} .of-grouptitle h3{margin:0;font-size:19px;font-weight:800} .of-grouptitle p{margin:3px 0 0;color:#d9e4ef;font-size:12px} /* ---------------- cards ---------------- */ .of-picks{display:grid;grid-template-columns:1fr 1fr;gap:14px} .of-pick{background:var(--of-panel-2);border:1px solid #223a57;border-radius:16px;padding:18px; display:grid;grid-template-columns:1.25fr .9fr;gap:14px;align-items:stretch} .of-main{min-width:0} .of-tkr{font-size:24px;font-weight:900;letter-spacing:-.01em} .of-co{font-size:12px;color:var(--of-muted);margin-top:1px} .of-px{font-size:13px;color:var(--of-text);font-weight:700;margin-top:6px} .of-px span{color:var(--of-faint);font-weight:500;font-size:11px} .of-pill{display:inline-block;border-radius:99px;padding:4px 8px;font-size:10px;font-weight:800;margin:8px 0;letter-spacing:.04em} .of-pill.ready{color:#8ff1b9;border:1px solid #1b8453;background:rgba(39,226,129,.09)} .of-pill.better_price{color:#a9d3ff;border:1px solid #2f6185;background:rgba(90,167,255,.09)} .of-pill.confirm{color:#ffda85;border:1px solid #80652a;background:rgba(255,181,71,.09)} .of-verdict{font-weight:800;margin:8px 0 10px;font-size:14px;line-height:1.35} .of-match{display:flex;justify-content:space-between;align-items:center;background:var(--of-panel-3); padding:10px 12px;border-radius:10px;margin-bottom:6px;gap:8px} .of-match span{font-size:12.5px;color:var(--of-text);font-weight:700;line-height:1.3;min-width:0} .of-match span i{font-style:normal;font-size:11px;font-weight:500;color:var(--of-muted)} .of-match b{font-size:22px;color:var(--of-green);font-weight:900;white-space:nowrap;flex:none} .of-matchnote{font-size:10.5px;color:var(--of-faint);line-height:1.4;margin-bottom:10px} .of-kg{display:grid;grid-template-columns:1fr 1fr;gap:8px} .of-kpi{background:var(--of-panel-3);border:1px solid #1e334d;border-radius:10px;padding:10px} .of-kpi.hero{grid-column:1 / -1;border-color:rgba(39,226,129,.35);background:rgba(39,226,129,.07)} .of-k{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--of-faint)} .of-v{font-size:14px;font-weight:800;margin-top:4px} .of-kpi.hero .of-v{font-size:27px;color:var(--of-green);line-height:1.05} .of-v small{font-size:10px;font-weight:600;color:var(--of-faint)} .of-v.na{color:var(--of-faint);font-weight:600;font-size:11.5px} .of-why{font-size:12.5px;color:var(--of-muted);line-height:1.45;margin:12px 0} .of-why b{color:#dce7f2} .of-trigger{font-size:11px;color:#91a5ba;margin-top:8px;line-height:1.45} .of-trigger b{color:#dce7f2} .of-open{display:block;width:100%;padding:10px;margin-top:12px;border:1px solid #2d4b6d;border-radius:10px; background:#10233a;color:var(--of-text);font:inherit;font-weight:800;font-size:13px;text-align:center;cursor:pointer} .of-open:hover{background:#16304d;border-color:#3d5c86} .of-spark{background:#091420;border:1px solid #1d334b;border-radius:12px;padding:10px;min-width:0} .of-spark svg{width:100%;height:150px;display:block} .of-spark .empty{height:150px;display:flex;align-items:center;justify-content:center;text-align:center; font-size:11px;color:var(--of-faint);line-height:1.4;padding:0 8px} /* Five bands when MAR-78's zones are live, three when the build only has Price Context v1. Drawing five bands over a three-label vocabulary would invent two distinctions the engine behind it never made. */ .of-zonebar{height:12px;border-radius:99px;position:relative;margin-top:9px; background:linear-gradient(90deg,#27e281 0 20%,#5aa7ff 20% 40%,#ffb547 40% 60%,#ff8a3d 60% 80%,#ff5f72 80% 100%)} .of-zonebar.v1{background:linear-gradient(90deg,#27e281 0 30%,#ffb547 30% 70%,#ff5f72 70% 100%)} .of-zonebar.na{background:repeating-linear-gradient(90deg,#182742 0 8px,#0f1c30 8px 16px)} .of-zonebar .now{position:absolute;top:-4px;width:3px;height:20px;background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.12);border-radius:2px} .of-zonelabels{display:flex;justify-content:space-between;font-size:8px;color:var(--of-faint);margin-top:5px} .of-empty{padding:16px;border:1px dashed #2a4160;border-radius:12px;color:var(--of-muted);font-size:13px;line-height:1.5} .of-foot{color:var(--of-faint);font-size:11.5px;padding:0 32px 28px;line-height:1.6} .of-foot a{color:var(--of-blue)} .of-loading{padding:30px 32px;text-align:center;color:var(--of-muted)} /* --------------------------------------------------------------------------- MAR-89 — the processing state. THE DEFECT THIS REPLACES. The wait between the third answer and the results was `.of-loading` above: one muted line, centred, inside 60px of vertical padding within a wide rounded bordered panel. That is the exact silhouette of a large text field, and at the end of a three-step flow it read as a fourth step — people finished the finder and waited to be asked something else. THE RULE THIS BLOCK FOLLOWS. Nothing in the processing state may look editable or actionable: no input, no button, no focusable control, no empty framed box. Everything below is either moving (a loader, a stage sweep, a shimmer) or explicitly read-only (the answer chips carry `cursor:default` and cannot be selected or pressed). The state ends by itself. The three stages are the finder's own sequence and the three skeletons carry the three result-group colours, so the shape of the answer is on screen before the answer is — with no number in it, invented or otherwise. --------------------------------------------------------------------------- */ .of-run{padding:32px clamp(18px,3vw,32px) 30px} .of-run-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .of-run-say{flex:1 1 320px;min-width:0} .of-run-say h2{margin:0;font-size:clamp(21px,2.6vw,29px);font-weight:800;letter-spacing:-.03em} .of-run-say p{margin:7px 0 0;color:var(--of-muted);font-size:13.5px;line-height:1.55;max-width:64ch} .of-orbit{position:relative;width:54px;height:54px;flex:none;border-radius:50%; border:2px solid rgba(39,226,129,.16); box-shadow:0 0 0 7px rgba(39,226,129,.04),0 0 36px rgba(39,226,129,.13)} .of-orbit::before{content:'';position:absolute;inset:-2px;border-radius:50%; border:2px solid transparent;border-top-color:var(--of-green);border-right-color:var(--of-blue); animation:of-spin 1.1s linear infinite} .of-orbit::after{content:'';position:absolute;left:50%;top:50%;width:10px;height:10px; margin:-5px 0 0 -5px;border-radius:50%;background:var(--of-green); box-shadow:0 0 16px var(--of-green);animation:of-pulse 1.6s ease-in-out infinite} /* Keyframes are one line each on purpose: this stylesheet is parsed line by line to prove it can only style .of-* , and a keyframe step on its own line reads to that parser as a bare selector. */ @keyframes of-spin{to{transform:rotate(360deg)}} @keyframes of-pulse{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}} .of-stages{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px} .of-stage{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--of-muted); border:1px solid var(--of-border);border-radius:13px;padding:12px 15px; background-color:var(--of-panel-2);transition:color .3s ease,border-color .3s ease,opacity .3s ease} .of-stage i{width:9px;height:9px;border-radius:50%;flex:none;background:var(--of-border-2); transition:background .3s ease,box-shadow .3s ease} /* MAR-103 — a stage's appearance is now its REPORTED state, not its position in a loop. `done` means the engine finished it, `active` means the engine is in it right now, `pending` means it has not been reached. The stylesheet has no opinion about how long any of them takes, which is the entire point: the version this replaced walked all three in 0.9s on a CSS animation-delay while the request behind it could still be running — or already dead. */ .of-stage.done{color:var(--of-text);border-color:rgba(39,226,129,.32)} .of-stage.done i{background:var(--of-green);box-shadow:0 0 10px var(--of-green)} .of-stage.active{color:var(--of-text);border-color:var(--of-border-2)} .of-stage.active i{background:var(--of-blue);box-shadow:0 0 12px var(--of-blue); animation:of-pulse 1.6s ease-in-out infinite} .of-stage.pending{opacity:.5} /* MAR-103 — the run's own report on itself: the stage, the counts, the percentage and the elapsed seconds, all of them written by the engine in the last poll. Nothing on this bar is computed from a clock in the browser. */ .of-runstat{margin-top:22px} .of-runline{font-size:13.5px;font-weight:700;color:var(--of-text);letter-spacing:-.01em; font-variant-numeric:tabular-nums} .of-bar{position:relative;overflow:hidden;margin-top:10px;height:8px;border-radius:999px; background:var(--of-panel-2);border:1px solid var(--of-border)} .of-bar>i{display:block;height:100%;width:0;border-radius:999px; background:linear-gradient(90deg,var(--of-green),var(--of-blue));transition:width .4s ease} /* Before the first count arrives there is no measured percentage, so the bar shows that it is alive WITHOUT drawing a number nobody measured. */ .of-bar.waiting>i{width:34%;animation:of-wait 1.5s ease-in-out infinite} @keyframes of-wait{0%{margin-left:-36%}100%{margin-left:102%}} /* MAR-103 — the failure screen. It exists because the old one did not: a failed run replaced the whole card with one line of muted text and a "Start over" button that ERASED the three answers. So the user was shown a browser parser message about a token and then charged the questionnaire again. */ .of-fail{padding:34px clamp(18px,3vw,32px) 30px;text-align:left} .of-fail-ico{width:44px;height:44px;border-radius:50%;display:flex;align-items:center; justify-content:center;font-size:20px;color:var(--of-gold); border:1px solid rgba(255,181,71,.35);background:rgba(255,181,71,.07)} .of-fail h2{margin:16px 0 0;font-size:clamp(19px,2.3vw,25px);font-weight:800;letter-spacing:-.03em} .of-fail p{margin:9px 0 0;color:var(--of-muted);font-size:13.5px;line-height:1.6;max-width:62ch} .of-fail .of-fail-at{color:var(--of-faint);font-size:12.5px} .of-fail .of-actions{margin-top:22px} .of-fail .of-micro{margin-top:14px} /* the three result groups, named in the wait and coloured as they will be */ .of-gchip{display:inline-block;margin-left:6px;border-radius:999px;padding:2px 9px; font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--gc); border:1px solid var(--gc);background:rgba(255,255,255,.03);white-space:nowrap} .of-gchip.ready{--gc:var(--of-green)} .of-gchip.better_price{--gc:var(--of-blue)} .of-gchip.confirm{--gc:var(--of-gold)} .of-stage span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:5px 0;min-width:0} /* the answers, echoed back — visibly not a control */ .of-rchips{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:20px} .of-rchips-t{font-size:10px;letter-spacing:.14em;text-transform:uppercase; color:var(--of-faint);font-weight:800} .of-rchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--of-border-2); background:rgba(255,255,255,.03);color:var(--of-muted);border-radius:999px; padding:6px 13px;font-size:12px;font-weight:600;cursor:default; -webkit-user-select:none;user-select:none} .of-skels{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px} .of-skel{position:relative;overflow:hidden;border:1px solid var(--of-border);border-radius:16px; padding:16px 14px 14px;background:var(--of-panel-2);display:grid;gap:10px; align-content:start;min-height:184px} .of-skel::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--sk)} .of-skel.ready{--sk:var(--of-green)} .of-skel.better_price{--sk:var(--of-blue)} .of-skel.confirm{--sk:var(--of-gold)} /* the base colour is what makes it a placeholder; the gradient only sweeps across it, so the shape stays visible at every point in the animation */ .of-skel .sk{display:block;border-radius:8px;background-color:rgba(255,255,255,.055); background-repeat:no-repeat;background-size:230% 100%; background-image:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.09),rgba(255,255,255,0)); animation:of-shimmer 1.6s linear infinite} .of-skel .sk-pill{width:92px;height:18px;border-radius:999px} .of-skel .sk-tk{width:58%;height:26px} .of-skel .sk-hero{height:54px;border-radius:12px} .of-skel .sk-row{height:12px} .of-skel .sk-row.short{width:64%} @keyframes of-shimmer{from{background-position:130% 0}to{background-position:-130% 0}} @media(max-width:820px){ .of-skels{grid-template-columns:1fr} .of-skel{min-height:0} .of-skel .sk-hero{height:44px} } @media(prefers-reduced-motion:reduce){ .of-orbit::before,.of-orbit::after,.of-stage i,.of-skel .sk,.of-bar.waiting>i{animation:none} .of-bar>i{transition:none} .of-bar.waiting>i{width:100%;opacity:.35} } /* the "how ranking worked" disclosure — Match Score is published, never opaque */ .of-method{margin-top:18px;border:1px solid var(--of-border);border-radius:14px;background:rgba(9,21,34,.7)} .of-method>summary{cursor:pointer;padding:13px 16px;font-weight:700;font-size:13.5px;list-style:none} .of-method>summary::-webkit-details-marker{display:none} .of-method>summary::before{content:'▸ ';color:var(--of-green)} .of-method[open]>summary::before{content:'▾ '} .of-method .body{padding:0 16px 16px;font-size:12.5px;color:var(--of-muted);line-height:1.55} .of-method table{width:100%;border-collapse:collapse;margin-top:10px;font-size:11.5px} .of-method th{text-align:left;color:var(--of-faint);font-weight:700;text-transform:uppercase; letter-spacing:.07em;font-size:9.5px;padding:6px 8px;border-bottom:1px solid var(--of-border)} .of-method td{padding:6px 8px;border-bottom:1px solid rgba(33,50,77,.5);vertical-align:top} .of-method td.met{color:var(--of-green)} .of-method td.partial{color:var(--of-gold)} .of-method td.unmet,.of-method td.unknown,.of-method td.unpublished{color:var(--of-faint)} @media(max-width:1100px){.of-picks{grid-template-columns:1fr}.of-pick{grid-template-columns:1fr}} @media(max-width:900px){ .of-opts{grid-template-columns:1fr} .of-sectionhint{grid-template-columns:1fr} .of-hero h1{font-size:34px} .of-hero{padding:32px 20px 22px} .of-cta{font-size:22px;padding:20px} .of-flow,.of-results{padding-left:16px;padding-right:16px} .of-foot{padding-left:16px;padding-right:16px} }