/* ============================================================ AI EDGE OS — SHARED STYLESHEET One source of truth for every page. Edit here, not in the HTML. Result Pages additionally carry . ============================================================ */ /* ============================================================ AI EDGE OS — WEBSITE MASTER DESIGN SYSTEM Extends the established AI Edge Planner brand for the web. ============================================================ */ :root{ /* ---- Color: extends the tested Planner brand, not invented fresh ---- */ --ink: #1a1a1a; --body: #55565c; --body-soft: #86878f; --paper: #ffffff; --cream: #faf9f6; --line: #e8e6e2; --pink: #e91e63; --pink-deep: #b8134e; --pink-tint: #fdedf2; --blue: #5574f8; --blue-deep: #37409e; --blue-tint: #eef1fd; --ink-panel: #1a1a1a; --ink-panel-2:#262626; --term-accent:#a9b7ff; --term-text: #f3f3f5; /* ---- Type scale ---- */ --display: 'Poppins', sans-serif; --text: 'Inter', sans-serif; --mono: 'JetBrains Mono', monospace; /* ---- Radius / shadow ---- */ --r-s: 8px; --r-m: 14px; --r-l: 24px; --r-xl: 32px; --shadow-card: 0 1px 2px rgba(20,20,30,0.04), 0 8px 24px -12px rgba(20,20,30,0.10); --shadow-lift: 0 20px 60px -20px rgba(20,20,30,0.28); --wrap: 1180px; } *{ margin:0; padding:0; box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ font-family:var(--text); color:var(--body); background:var(--paper); -webkit-font-smoothing:antialiased; line-height:1.5; font-size:16px; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ max-width:var(--wrap); margin:0 auto; padding:0 28px; } section{ position:relative; } h1,h2,h3{ font-family:var(--display); color:var(--ink); font-weight:700; letter-spacing:-0.01em; line-height:1.12; } h1{ font-size:clamp(2rem, 2.9vw, 2.65rem); font-weight:800; letter-spacing:-0.02em; } br.approach-break{ display:none; } h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); } h3{ font-size:1.15rem; } .lede{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--body); max-width:640px; line-height:1.55; } .eyebrow{ font-family:var(--display); font-weight:700; font-size:12.5px; letter-spacing:0.16em; text-transform:uppercase; color:var(--pink); margin-bottom:14px; display:inline-block; } .eyebrow.blue{ color:var(--blue); } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:700; font-size:15.5px; padding:15px 26px; border-radius:100px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; cursor:pointer; border:none; } .btn-primary{ background:var(--pink); color:#fff; box-shadow:0 10px 24px -10px rgba(233,30,99,0.55); } .btn-primary:hover{ background:var(--pink-deep); transform:translateY(-2px); box-shadow:0 14px 30px -10px rgba(233,30,99,0.6); } .btn-ghost{ background:transparent; color:var(--ink); border:1.5px solid var(--line); } .btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); } .btn-dark{ background:var(--ink); color:#fff; } .btn-blue{ background:var(--blue); color:#fff; } .btn-blue:hover{ background:var(--blue-deep); transform:translateY(-2px); } .btn-dark:hover{ background:#000; transform:translateY(-2px); } .btn:focus-visible{ outline:2.5px solid var(--blue); outline-offset:3px; } .btn svg{ transition:transform .18s ease; } .btn:hover svg{ transform:translateX(3px); } /* ---- Reveal on scroll ---- */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease; } .reveal.is-visible{ opacity:1; transform:translateY(0); } @media (prefers-reduced-motion:reduce){ .reveal{ opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} } /* ============================================================ HEADER ============================================================ */ .site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,0.88); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:74px; } .brand{ display:flex; align-items:center; gap:9px; } .brand img{ height:24px; width:auto; } nav.main-nav{ display:flex; align-items:center; gap:34px; } nav.main-nav a{ font-family:var(--display); font-weight:600; font-size:14.5px; color:var(--ink); opacity:0.75; transition:opacity .15s; } nav.main-nav a:hover{ opacity:1; } .header-cta{ display:flex; align-items:center; gap:18px; } .header-cta .btn{ padding:11px 20px; font-size:14px; } .nav-toggle{ display:none; background:none; border:none; cursor:pointer; padding:6px; } .nav-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; border-radius:2px; } /* ============================================================ HERO ============================================================ */ .hero{ padding:76px 0 90px; overflow:hidden; background: radial-gradient(900px 500px at 85% -10%, var(--blue-tint) 0%, transparent 60%), radial-gradient(700px 400px at -10% 90%, var(--pink-tint) 0%, transparent 55%); } .hero .wrap{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; align-items:center; max-width:1750px; margin-left:max(0px, calc((100vw - 1180px)/2)); margin-right:auto; } .hero-copy .brand-claim{ margin-top:28px; font-size:14px; color:var(--blue-deep); font-style:italic; font-weight:500; } .hero-copy .brand-claim b{ font-style:normal; } .hero-copy h1{ margin-bottom:14px; line-height:1.28; } .hero-copy h1 .accent{ color:var(--pink); } .hero-copy .category-line{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--blue-deep); margin-bottom:20px; } .hero-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; margin-top:32px; } .hero-visual{ position:relative; } .hero-visual img{ width:112%; max-width:585px; margin-left:-13%; margin-top:-36px; filter:drop-shadow(0 40px 70px rgba(20,20,40,0.20)); } .trust-row{ display:flex; gap:28px; margin-top:38px; flex-wrap:wrap; } .trust-row .t-item{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--body-soft); font-weight:500; } .trust-row svg{ flex-shrink:0; color:var(--pink); } /* ============================================================ SECTION: PROBLEM ============================================================ */ .sec-problem{ padding:100px 0; background:var(--cream); } .problem-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; } .problem-list{ margin-top:22px; display:flex; flex-direction:column; gap:0; } .problem-list li{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line); font-size:15.5px; color:var(--body); } .problem-list li:last-child{ border-bottom:1px solid var(--line); } .problem-list li svg{ flex-shrink:0; margin-top:3px; color:var(--body-soft); } .contrast-box{ margin-top:30px; background:var(--ink); color:#fff; padding:26px 30px; border-radius:var(--r-l); font-family:var(--display); font-weight:600; font-size:1.2rem; line-height:1.4; } .contrast-box .hi{ color:#ffb3cd; } /* ============================================================ SECTION: APPROACH ============================================================ */ .sec-approach{ padding:110px 0; } .approach-head{ max-width:760px; margin:0 auto 56px; text-align:center; } .approach-head .lede{ margin:18px auto 0; } .transform-strip{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; font-family:var(--display); font-weight:700; font-size:clamp(1rem,2vw,1.3rem); margin-bottom:64px; } .transform-strip .step{ padding:12px 22px; border-radius:100px; border:1.5px solid var(--line); color:var(--body-soft); } .transform-strip .step.final{ background:var(--pink); color:#fff; border-color:var(--pink); } .transform-strip .arrow{ color:var(--line); font-size:1.4rem; } .principles-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; } .principle-card{ padding:32px 28px; border-radius:var(--r-l); background:var(--paper); border:1px solid var(--line); transition:transform .2s ease, box-shadow .2s ease; } .principle-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card); } .principle-card .p-icon{ width:44px; height:44px; border-radius:12px; background:var(--blue-tint); display:flex; align-items:center; justify-content:center; margin-bottom:18px; color:var(--blue-deep); } .principle-card h3{ margin-bottom:8px; } .principle-card p{ font-size:14.5px; color:var(--body-soft); line-height:1.5; } .supporting-principle{ text-align:center; margin-top:48px; font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--ink); } /* ============================================================ SECTION: HOW IT WORKS (real linear sequence -> numbered) ============================================================ */ .sec-how{ padding:110px 0; background:var(--ink); color:#fff; } .sec-how .approach-head h2{ color:#fff; } .sec-how .approach-head .lede{ color:rgba(255,255,255,0.65); } .how-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; margin-top:20px; } .how-steps::before{ content:''; position:absolute; top:27px; left:16.5%; right:16.5%; height:1.5px; background:rgba(255,255,255,0.14); } .how-step{ position:relative; padding:0 20px; text-align:left; } .how-step .num{ width:54px; height:54px; border-radius:50%; background:var(--ink); border:1.5px solid rgba(255,255,255,0.25); display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:700; font-size:19px; color:var(--pink); margin-bottom:22px; position:relative; z-index:2; } .how-step h3{ color:#fff; margin-bottom:9px; font-size:1.15rem; } .how-step p{ font-size:14.5px; color:rgba(255,255,255,0.6); line-height:1.55; } .how-supporting{ text-align:center; margin-top:56px; font-family:var(--display); font-weight:600; font-size:1.1rem; color:#fff; } .how-supporting .hi{ color:var(--pink); } /* ============================================================ SECTION: START WHERE YOU ARE ============================================================ */ .sec-start{ padding:110px 0; } .start-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; align-items:center; } .level-cards{ display:flex; flex-direction:column; gap:14px; } .level-card{ display:flex; align-items:center; gap:18px; padding:20px 24px; border-radius:var(--r-l); border:1px solid var(--line); transition:border-color .2s, transform .2s; } .level-card:hover{ border-color:var(--blue); transform:translateX(4px); } .level-card .l-tag{ font-family:var(--display); font-weight:700; font-size:13px; color:var(--blue-deep); background:var(--blue-tint); padding:7px 14px; border-radius:100px; flex-shrink:0; width:96px; text-align:center; } .level-card p{ font-size:14.5px; color:var(--body); margin:0; } .start-cta{ margin-top:30px; } .cta-support{ font-size:13px; color:var(--body-soft); margin-top:14px; } /* ============================================================ SECTION: THE PLANNER — signature cyclical diagram ============================================================ */ .sec-planner{ padding:110px 0; background:var(--cream); } .planner-intro{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:56px; align-items:center; margin-bottom:64px; } .planner-head{ max-width:560px; margin-bottom:0; } .planner-visual{ text-align:center; margin-bottom:0; } .planner-visual img{ max-width:480px; width:100%; margin:0 auto; filter:drop-shadow(0 30px 60px -15px rgba(20,20,40,0.22)); } .cycle-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-bottom:64px; } .cycle-diagram{ position:relative; aspect-ratio:1/1; max-width:440px; margin:0 auto; } .cycle-diagram svg{ width:100%; height:100%; } .cycle-node{ position:absolute; width:108px; text-align:center; transform:translate(-50%,-50%); } .cycle-node .cn-dot{ width:46px; height:46px; border-radius:50%; background:#fff; border:2px solid var(--blue); display:flex; align-items:center; justify-content:center; margin:0 auto 8px; font-family:var(--display); font-weight:700; color:var(--blue-deep); font-size:13px; box-shadow:0 6px 16px -6px rgba(85,116,248,0.35); position:relative; z-index:3;} .cycle-node.reuse .cn-dot{ background:var(--pink); border-color:var(--pink); color:#fff; } .cycle-node span{ font-family:var(--display); font-weight:700; font-size:13.5px; color:var(--ink); } .cycle-copy .rhythm-row{ display:flex; gap:14px; margin-top:26px; flex-wrap:wrap; } .rhythm-chip{ flex:1; min-width:150px; background:#fff; border:1px solid var(--line); border-radius:var(--r-m); padding:16px 18px; } .rhythm-chip .rc-tag{ font-family:var(--display); font-weight:700; font-size:12px; color:var(--pink); text-transform:uppercase; letter-spacing:0.04em; } .rhythm-chip .rc-name{ font-family:var(--display); font-weight:700; font-size:14px; color:var(--ink); margin:4px 0 3px; } .rhythm-chip .rc-time{ font-size:12px; color:var(--body-soft); font-family:var(--mono); } .relationship-strip{ background:var(--ink); border-radius:var(--r-l); padding:30px 36px; text-align:center; margin-bottom:30px;} .relationship-strip p{ font-family:var(--mono); color:var(--term-text); font-size:15px; } .relationship-strip .hi{ color:var(--term-accent); font-weight:600; } .planner-cta{ text-align:center; } /* ============================================================ SECTION: ECOSYSTEM ============================================================ */ .sec-ecosystem{ padding:100px 0; } .eco-head{ text-align:center; max-width:640px; margin:0 auto 56px; } .eco-path{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; grid-template-rows:auto auto auto; align-items:start; justify-content:center; column-gap:14px; } .eco-stop{ display:grid; grid-template-rows:subgrid; grid-row:1 / 4; text-align:center; padding:0 14px; width:230px; } .eco-stop .es-badge{ grid-row:1; align-self:end; font-family:var(--mono); font-size:11px; color:var(--body-soft); margin-bottom:10px; } .eco-stop h3{ grid-row:2; align-self:start; display:flex; align-items:flex-end; justify-content:center; min-height:42px; font-size:16px; margin-bottom:8px; } .eco-stop p{ grid-row:3; align-self:start; font-size:13px; color:var(--body-soft); line-height:1.5; } .eco-stop.active h3{ color:var(--pink); } .eco-arrow-v{ grid-row:1 / 4; align-self:center; color:var(--line); font-size:1.6rem; } @media(max-width:859px){ .eco-path{ grid-template-columns:1fr; } .eco-stop{ grid-row:auto; grid-template-rows:auto auto auto; width:100%; } .eco-arrow-v{ grid-row:auto; margin:6px 0; transform:rotate(90deg); } } /* ============================================================ SECTION: TRUST ============================================================ */ .sec-trust{ padding:100px 0; background:var(--ink); color:#fff; } .trust-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:50px; } .trust-card{ background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:var(--r-l); padding:30px; } .trust-card .tc-icon{ color:var(--pink); margin-bottom:16px; } .trust-card h3{ color:#fff; font-size:16px; margin-bottom:8px; } .trust-card p{ font-size:13.5px; color:rgba(255,255,255,0.6); line-height:1.55; } .sec-trust .approach-head h2{ color:#fff; } .sec-trust .approach-head .lede{ color:rgba(255,255,255,0.6); } /* ============================================================ FINAL CTA ============================================================ */ .sec-final{ padding:130px 0; text-align:center; background: radial-gradient(700px 400px at 50% 0%, var(--pink-tint) 0%, transparent 60%); } .sec-final h2{ max-width:780px; margin:0 auto 18px; } .sec-final .lede{ margin:0 auto 36px; text-align:center; } .final-actions{ display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; } /* ============================================================ RESULT PAGE COMPONENTS — shared across Beginner/Explorer/Optimizer ============================================================ */ /* Same background treatment as the Homepage hero, so both headers match. */ .result-hero{ padding:64px 0 90px; overflow:hidden; background: radial-gradient(900px 500px at 85% -10%, var(--blue-tint) 0%, transparent 60%), radial-gradient(700px 400px at -10% 90%, var(--pink-tint) 0%, transparent 55%); } .result-hero-grid{ display:grid; grid-template-columns:1fr 1.1fr; gap:56px; align-items:start; } .result-hero-copy{ padding-top:26px; } .result-gauge-wrap{ text-align:center; } /* ---- Score visual: supplied AI Edge OS score artwork ---- */ .score-visual{ container-type:inline-size; position:relative; width:100%; max-width:560px; margin:0 auto; } .score-visual img{ display:block; width:100%; height:auto; } .score-ring{ position:absolute; inset:0; width:100%; height:100%; } .ring-track{ fill:none; stroke:#d9dced; stroke-width:30; } .ring-fill{ fill:none; stroke:url(#ringGrad); stroke-width:30; stroke-linecap:round; transition:stroke-dashoffset 1s cubic-bezier(.22,.9,.3,1); } .score-center{ position:absolute; left:48.93%; top:47.87%; transform:translate(-50%,-50%); display:none; flex-direction:column; align-items:center; line-height:1; } /* Fail closed: the number and the progress arc only appear once a real score has been read from the URL. Without ?score= the card shows an empty dial and the level only — never an invented number. See Notion 15.8 Production safety. */ .has-score .score-center{ display:flex; } .ring-fill{ display:none; } .has-score .ring-fill{ display:block; } .score-note-full{ display:none; } .has-score .score-note-full{ display:block; } .has-score .score-note-lite{ display:none; } .score-label{ font-family:var(--display); font-size:2.5cqw; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; color:var(--body-soft); } .score-number{ font-family:var(--display); font-size:13cqw; font-weight:800; letter-spacing:-0.02em; color:var(--ink); margin-top:3cqw; } .score-max{ font-family:var(--display); font-size:3.4cqw; font-weight:600; color:var(--body-soft); margin-top:2.4cqw; } .score-badge{ position:absolute; left:49.24%; top:77.98%; transform:translate(-50%,-50%); white-space:nowrap; font-family:var(--display); font-size:2.4cqw; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--blue); } .result-tag{ display:block; margin-top:10px; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--body-soft); } .score-note{ max-width:340px; margin:14px auto 0; font-size:13.5px; line-height:1.5; color:var(--body-soft); } .result-hero-copy .eyebrow{ color:var(--blue); } .result-hero-copy h1{ color:var(--pink); font-size:clamp(2.6rem,4.3vw,3.6rem); line-height:1.15; margin-bottom:20px; } .result-headline{ font-size:clamp(1.8rem,3vw,2.7rem); margin-bottom:30px; line-height:1.3; } /* The Optimizer headline is the longest of the three levels and does not fit the column at the standard size. Sized down just enough that each sentence holds one line, rather than letting it break after "AI.". */ .result-headline-long{ font-size:clamp(1.55rem,2.5vw,2.25rem); } /* ---- Planner mockup inside "What Comes After" ---- */ .after-mockup{ margin:56px auto 8px; max-width:560px; } .after-mockup img{ width:100%; height:auto; filter:drop-shadow(0 34px 62px rgba(20,20,40,0.22)); } .sec-opportunity{ padding:110px 0; background:var(--cream); } .focus-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; margin-top:48px; } .focus-card{ background:#fff; border-radius:var(--r-l); padding:28px 22px; border:1px solid var(--line); } .focus-card .focus-num{ font-family:var(--mono); font-size:12px; color:var(--blue); font-weight:600; } .focus-card h3{ font-size:1.14rem; margin:12px 0 12px; } .focus-card p{ font-size:13.5px; color:var(--body-soft); line-height:1.5; } .sec-starterkit{ padding:110px 0; background:var(--ink); color:#fff; } .sec-starterkit h2{ color:#fff; } .nowrap{ white-space:nowrap; } .starterkit-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:52px; align-items:center; } .sec-starterkit .lede{ color:rgba(255,255,255,0.68); } .sec-starterkit .cta-support{ color:rgba(255,255,255,0.5); } .starterkit-visual{ text-align:center; } .sk-mockup{ width:100%; max-width:660px; height:auto; margin:0 auto; display:block; filter:drop-shadow(0 30px 55px rgba(0,0,0,0.55)); } /* Portrait-format kit artwork needs a smaller width to match the optical size of the landscape versions. */ .sk-mockup-tall{ max-width:450px; } .action-steps{ grid-template-columns:repeat(4,1fr); } .action-steps::before{ left:12%; right:12%; } /* Three-step variant. The number of steps follows the locked copy per level, so the grid adapts rather than the copy being padded out to fill it. */ .action-steps-3{ grid-template-columns:repeat(3,1fr); } .action-steps-3::before{ left:16.6%; right:16.6%; } @media (max-width:900px){ .result-hero-grid{ grid-template-columns:1fr; text-align:center; } .result-hero-copy{ padding-top:0; } .result-hero-copy{ text-align:left; } .focus-grid{ grid-template-columns:repeat(2,1fr); } .starterkit-grid{ grid-template-columns:1fr; } .starterkit-visual{ order:-1; } .action-steps{ grid-template-columns:1fr; } } @media (max-width:560px){ .focus-grid{ grid-template-columns:1fr; } .score-visual{ max-width:380px; } .after-mockup{ margin-top:40px; } } /* ============================================================ FOOTER ============================================================ */ footer{ background:var(--cream); border-top:1px solid var(--line); padding:56px 0 30px; } .footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:40px; } .footer-brand .brand{ margin-bottom:12px; } .footer-brand p{ font-size:13.5px; color:var(--body-soft); max-width:280px; } .footer-cols{ display:flex; gap:64px; flex-wrap:wrap; } .footer-col h4{ font-family:var(--display); font-size:12.5px; font-weight:700; letter-spacing:0.06em; text-transform:uppercase; color:var(--body-soft); margin-bottom:14px; } .footer-col a{ display:block; font-size:14px; color:var(--ink); opacity:0.8; margin-bottom:11px; } .footer-col a:hover{ opacity:1; color:var(--pink); } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:26px; border-top:1px solid var(--line); font-size:12.5px; color:var(--body-soft); flex-wrap:wrap; gap:12px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:980px){ nav.main-nav{ display:none; } .nav-toggle{ display:block; } .hero .wrap, .problem-grid, .start-grid, .cycle-wrap, .planner-intro{ grid-template-columns:1fr; } .hero-visual{ order:-1; margin-bottom:10px; } .hero-visual img{ width:100%; margin-left:0; margin-top:0; } .principles-grid, .how-steps, .trust-grid{ grid-template-columns:1fr; gap:18px; } .how-steps::before{ display:none; } .footer-top{ flex-direction:column; gap:28px; } } @media (max-width:560px){ h1{ font-size:2.1rem; } h2{ font-size:1.7rem; } .header-cta .btn-primary{ display:none; } .hero{ padding:48px 0 60px; } .sec-problem,.sec-approach,.sec-how,.sec-start,.sec-planner,.sec-ecosystem,.sec-trust{ padding:64px 0; } .sec-final{ padding:80px 0; } .btn{ width:100%; justify-content:center; } .hero-actions,.final-actions{ flex-direction:column; align-items:stretch; } .contrast-box{ font-size:1.05rem; padding:22px; } .relationship-strip p{ font-size:13px; } } @media (min-width:981px){ .hero-copy h1{ font-size:clamp(2.7rem, calc(1.8vw + 1.6rem), 3.6rem); } br.approach-break{ display:inline; } } /* ============================================================ RESULT PAGE TYPOGRAPHY The Result Pages use a larger heading scale and more generous spacing than the approved Homepage. Scoped to so the Homepage keeps exactly the design that was signed off. To unify the site later, move these values into the base rules above. ============================================================ */ /* :where() keeps these at the SAME specificity as the base rules they replace. Without it, `.page-result h2` (0,1,1) would outrank component rules such as `.result-headline` (0,1,0) and blow up headings that are meant to stay small. */ :where(.page-result) h1, :where(.page-result) h2, :where(.page-result) h3{ line-height:1.2; } :where(.page-result) h1{ font-size:clamp(2.4rem, 3.5vw, 3.2rem); } :where(.page-result) h2{ font-size:clamp(2.3rem, 4.1vw, 3.35rem); } :where(.page-result) h3{ font-size:1.28rem; line-height:1.32; } :where(.page-result) .lede{ line-height:1.62; font-size:clamp(1.1rem,1.75vw,1.38rem); max-width:none; } :where(.page-result) .eyebrow{ margin-bottom:18px; } :where(.page-result) .approach-head .lede{ margin:26px auto 0; } :where(.page-result) .principle-card h3{ margin-bottom:12px; } :where(.page-result) .how-step h3{ margin-bottom:12px; font-size:1.25rem; } :where(.page-result) .sec-final h2{ max-width:820px; margin:0 auto 26px; } /* ============================================================ PLANNER SALES PAGE Scoped to . Reuses the shared design system; only page-specific components live here. ============================================================ */ :where(.page-planner) h1{ font-size:clamp(2.4rem,4vw,3.5rem); line-height:1.12; } :where(.page-planner) h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.2; } :where(.page-planner) h3{ font-size:1.2rem; line-height:1.35; } .page-planner .approach-head{ margin-bottom:52px; } /* Hero */ .planner-hero{ padding:70px 0 84px; overflow:hidden; background: radial-gradient(900px 500px at 85% -10%, var(--blue-tint) 0%, transparent 60%), radial-gradient(700px 400px at -10% 90%, var(--pink-tint) 0%, transparent 55%); } .planner-hero-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:center; } .planner-hero-copy h1{ margin:8px 0 20px; } .planner-hero-actions{ margin-top:34px; } .planner-hero-actions .cta-support{ margin-top:14px; } .planner-hero-visual img{ width:100%; height:auto; filter:drop-shadow(0 40px 70px rgba(20,20,40,0.22)); } /* Problem */ .friction-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:44px; } .friction-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-m); padding:20px 22px; font-size:15px; color:var(--body); line-height:1.45; } /* Transformation */ .shift-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:40px; } .shift-card{ border-radius:var(--r-l); padding:32px 26px; border:1px solid var(--line); background:var(--paper); } .shift-after{ border-color:rgba(85,116,248,0.28); background:linear-gradient(160deg,#fbfbff,#f2f4ff); } .shift-label{ font-family:var(--display); font-weight:700; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--body-soft); } .shift-after .shift-label{ color:var(--blue-deep); } .shift-steps{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:18px 0 16px; } .shift-steps span{ font-family:var(--display); font-weight:600; font-size:14.5px; padding:8px 14px; border-radius:100px; background:#fff; border:1px solid var(--line); } .shift-after .shift-steps span{ border-color:rgba(85,116,248,0.3); color:var(--blue-deep); } .shift-steps i{ font-style:normal; color:var(--body-soft); } .shift-final{ background:var(--pink) !important; border-color:var(--pink) !important; color:#fff !important; } .shift-card p{ font-size:14.5px; color:var(--body-soft); } .lede.center{ margin:0 auto; text-align:center; } /* Framework */ .sec-framework{ padding:110px 0; background:var(--cream); } .framework-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; } .fw-step{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:26px 22px; } .fw-num{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--blue-tint); color:var(--blue-deep); font-family:var(--display); font-weight:700; font-size:14px; } .fw-step h3{ margin:14px 0 9px; } .fw-step p{ font-size:14.5px; color:var(--body); line-height:1.5; } .framework-line{ text-align:center; margin:38px 0 0; font-family:var(--mono); font-size:14px; letter-spacing:0.04em; color:var(--blue-deep); } .product-shot{ margin-top:48px; } .product-shot img{ width:100%; height:auto; border-radius:var(--r-l); border:1px solid var(--line); box-shadow:var(--shadow-lift); } /* Rhythm */ .sec-rhythm{ padding:110px 0; } .rhythm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-bottom:40px; } .rhythm-card{ border:1px solid var(--line); border-radius:var(--r-l); padding:30px 28px; background:var(--paper); } .rhythm-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; } .rhythm-when{ font-family:var(--display); font-weight:700; font-size:17px; color:var(--ink); } .rhythm-time{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:var(--pink); background:var(--pink-tint); padding:5px 10px; border-radius:100px; } .rhythm-card h3{ color:var(--blue-deep); margin-bottom:10px; } .rhythm-card p{ font-size:15px; color:var(--body); line-height:1.55; } /* What you get */ .sec-includes{ padding:110px 0; background:var(--cream); } .includes-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-bottom:40px; } .include-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:30px 28px; } .include-tag{ font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:var(--blue); } .include-card h3{ margin:10px 0 10px; } .include-card p{ font-size:15px; color:var(--body); line-height:1.55; } /* PDF + Notion */ .sec-duo{ padding:110px 0; } .duo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .duo-card{ border:1px solid var(--line); border-radius:var(--r-l); padding:32px 30px; background:var(--paper); } .duo-tag{ display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:0.1em; padding:6px 12px; border-radius:6px; margin-bottom:16px; } .duo-tag.pdf{ background:var(--pink); color:#fff; } .duo-tag.notion{ background:var(--blue); color:#fff; } .duo-card h3{ margin-bottom:16px; } .duo-card ul{ list-style:none; } .duo-card li{ font-size:15px; color:var(--body); padding:9px 0 9px 22px; position:relative; border-top:1px solid var(--line); } .duo-card li:first-child{ border-top:none; } .duo-card li::before{ content:''; position:absolute; left:2px; top:17px; width:7px; height:7px; border-radius:50%; background:var(--blue); } /* What you build */ .sec-build{ padding:110px 0; background:var(--cream); } .build-grid{ margin-bottom:48px; } .build-shots{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .build-shots figure{ margin:0; } .build-shots img{ width:100%; height:auto; border-radius:var(--r-m); border:1px solid var(--line); box-shadow:0 14px 34px -18px rgba(20,20,40,0.3); } .build-shots figcaption{ margin-top:12px; font-size:13.5px; color:var(--body-soft); text-align:center; } .progress-note{ margin-top:48px; background:var(--paper); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:var(--r-m); padding:28px 30px; } .progress-note h3{ margin-bottom:10px; } .progress-note p{ font-size:15px; color:var(--body); line-height:1.6; } /* Principles (dark) */ .sec-principles-dark{ padding:110px 0; background:var(--ink); color:#fff; } .sec-principles-dark h2{ color:#fff; } .sec-principles-dark .eyebrow{ color:var(--pink); } .principles-list{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:40px; } .principles-list span{ background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14); border-radius:100px; padding:11px 20px; font-size:14.5px; color:rgba(255,255,255,0.9); } /* Closing line under a section. Had no base rule, so it rendered unaligned and without spacing — which is why it sat off-centre against everything else. */ .section-close{ margin:52px auto 0; max-width:780px; text-align:center; font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.5; color:var(--body); } .section-close .hi{ color:var(--pink); display:block; } .section-close.light{ color:rgba(255,255,255,0.72); } .clarify{ max-width:760px; margin:36px auto 0; text-align:center; } .clarify p{ font-size:14.5px; color:rgba(255,255,255,0.6); line-height:1.65; } /* Fit */ .sec-fit{ padding:110px 0; } .fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .fit-card{ border:1px solid var(--line); border-radius:var(--r-l); padding:32px 30px; background:var(--paper); } .fit-card h3{ margin-bottom:16px; } .fit-yes{ border-color:rgba(85,116,248,0.3); } .fit-card ul{ list-style:none; } .fit-card li{ font-size:15px; color:var(--body); line-height:1.5; padding:9px 0 9px 26px; position:relative; } .fit-yes li::before{ content:'\2713'; position:absolute; left:0; color:var(--blue); font-weight:700; } .fit-no li::before{ content:'\2013'; position:absolute; left:0; color:var(--body-soft); } /* Start small */ .sec-start-small{ padding:110px 0; background:var(--cream); } .start-small-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .section-close.left{ text-align:left; margin-left:0; margin-right:0; } /* Start Small — the copy column had no vertical rhythm at all. */ .start-small-grid h2{ margin-bottom:22px; } .start-small-grid .lede{ margin-bottom:8px; } .start-small-grid .section-close.left{ margin-top:26px; margin-bottom:34px; } .start-small-grid .btn{ margin-top:0; } .cover-shot{ background:none; border:none; box-shadow:none; filter:drop-shadow(0 34px 60px rgba(20,20,40,0.22)); } /* Product proof — readable close-ups of real Planner pages */ .sec-proof{ padding:110px 0; } .proof-stack{ display:flex; flex-direction:column; gap:44px; margin:0 auto; } .proof-item{ margin:0; } .proof-item img{ width:100%; height:auto; border-radius:var(--r-l); border:1px solid var(--line); box-shadow:var(--shadow-lift); } .proof-item figcaption{ margin-top:18px; text-align:center; font-size:16.5px; line-height:1.55; color:var(--body); max-width:640px; margin-left:auto; margin-right:auto; } .proof-item figcaption strong{ display:block; font-family:var(--display); font-weight:700; font-size:1.12rem; color:var(--ink); margin-bottom:6px; } /* Build shots stacked full width instead of three tiny columns */ .build-shots{ display:flex; flex-direction:column; gap:44px; } .build-shots img{ border-radius:var(--r-l); } .build-shots figcaption{ margin-top:14px; font-size:14.5px; } /* Final CTA — add rhythm between headline, lede, button and closing line */ .page-planner .sec-final h2{ margin-bottom:26px; } .page-planner .sec-final .lede{ margin-bottom:38px; } .page-planner .sec-final .section-close{ margin-top:46px; } .cover-shot{ width:100%; height:auto; } /* FAQ */ .sec-faq{ padding:110px 0; } .faq-list{ max-width:820px; margin:0 auto; } .faq-list details{ border-bottom:1px solid var(--line); } .faq-list summary{ cursor:pointer; list-style:none; padding:20px 0; font-family:var(--display); font-weight:600; font-size:17px; color:var(--ink); position:relative; padding-right:34px; } .faq-list summary::-webkit-details-marker{ display:none; } .faq-list summary::after{ content:'+'; position:absolute; right:6px; top:18px; font-size:22px; color:var(--body-soft); font-weight:400; } .faq-list details[open] summary::after{ content:'\2013'; } .faq-list details p{ padding:0 0 22px; font-size:15.5px; color:var(--body); line-height:1.6; max-width:700px; } /* Offer */ .sec-offer{ padding:110px 0; background:var(--cream); } .offer-card{ max-width:640px; margin:0 auto; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); padding:52px 44px; text-align:center; box-shadow:var(--shadow-lift); } .offer-card h2{ margin:8px 0 26px; } .offer-list{ list-style:none; text-align:left; max-width:400px; margin:0 auto 30px; } .offer-list li{ font-size:15px; color:var(--body); padding:10px 0 10px 26px; position:relative; border-top:1px solid var(--line); } .offer-list li:first-child{ border-top:none; } .offer-list li::before{ content:'\2713'; position:absolute; left:0; color:var(--pink); font-weight:700; } .offer-price{ margin-bottom:26px; } .price-pending{ display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:0.06em; color:var(--body-soft); background:var(--line); padding:8px 16px; border-radius:100px; } .btn-large{ font-size:16px; padding:17px 34px; } @media (max-width:900px){ .planner-hero-grid, .shift-grid, .duo-grid, .fit-grid, .start-small-grid, .includes-grid{ grid-template-columns:1fr; } .framework-grid{ grid-template-columns:repeat(2,1fr); } .rhythm-grid, .friction-grid, .build-shots{ grid-template-columns:1fr; } .planner-hero-visual{ order:-1; } } @media (max-width:560px){ .framework-grid{ grid-template-columns:1fr; } .sec-framework,.sec-rhythm,.sec-includes,.sec-duo,.sec-build, .sec-principles-dark,.sec-fit,.sec-start-small,.sec-faq,.sec-offer{ padding:64px 0; } .offer-card{ padding:38px 24px; } } /* ============================================================ PLANNER PAGE — READABILITY PASS The small grey supporting text was too small to read comfortably. Everything at that size is lifted together so the page keeps one consistent secondary text size instead of five slightly different ones. ============================================================ */ .page-planner .eyebrow{ font-size:15.5px; letter-spacing:0.13em; } .page-planner .cta-support{ font-size:15.5px; } .page-planner .lede{ font-size:clamp(1.1rem,1.6vw,1.32rem); } .friction-card{ font-size:16.5px; line-height:1.5; padding:22px 24px; } .fw-step p, .shift-card p, .clarify p{ font-size:16px; line-height:1.55; } .rhythm-card p, .include-card p, .duo-card li, .fit-card li, .offer-list li, .progress-note p{ font-size:16.5px; line-height:1.55; } .page-planner .focus-card p{ font-size:16px; line-height:1.55; } .shift-label{ font-size:13.5px; letter-spacing:0.12em; } .shift-steps span{ font-size:15.5px; padding:9px 12px; white-space:nowrap; } .framework-line{ font-size:17px; } .include-tag{ font-size:14px; letter-spacing:0.07em; } .rhythm-time{ font-size:14px; letter-spacing:0.05em; padding:6px 12px; } .duo-tag{ font-size:15px; letter-spacing:0.09em; padding:7px 14px; } .page-planner .focus-card .focus-num{ font-size:15px; } .price-pending{ font-size:13.5px; } .build-shots figcaption, .proof-item figcaption{ font-size:16px; color:var(--body); } .faq-list p{ font-size:16.5px; } /* Dark section: white on black reads smaller than black on white, so size and contrast both go up. */ .principles-list span{ font-size:16.5px; padding:12px 22px; color:#fff; } .sec-principles-dark .clarify p{ font-size:16px; color:rgba(255,255,255,0.78); } .sec-principles-dark .section-close.light{ color:rgba(255,255,255,0.85); } @media (max-width:560px){ .friction-card, .rhythm-card p, .include-card p, .duo-card li, .fit-card li, .offer-list li, .progress-note p{ font-size:16px; } } @media (max-width:900px){ .shift-grid{ grid-template-columns:1fr; } } /* ============================================================ /next — BRIDGE PAGE Deliberately shorter and quieter than the Planner sales page. One obvious primary action; secondary paths stay visually low-key. ============================================================ */ :where(.page-bridge) h1{ font-size:clamp(2.2rem,3.6vw,3.1rem); line-height:1.15; } :where(.page-bridge) h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.2; } :where(.page-bridge) h3{ font-size:1.25rem; line-height:1.35; } .page-bridge .eyebrow{ font-size:15.5px; letter-spacing:0.13em; } .page-bridge .lede{ font-size:clamp(1.1rem,1.6vw,1.32rem); } .page-bridge .approach-head{ margin-bottom:52px; } .bridge-hero{ padding:70px 0 88px; overflow:hidden; background: radial-gradient(900px 500px at 85% -10%, var(--blue-tint) 0%, transparent 60%), radial-gradient(700px 400px at -10% 90%, var(--pink-tint) 0%, transparent 55%); } .bridge-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; } .bridge-hero-grid h1{ margin:10px 0 22px; } .bridge-claim{ margin-top:28px; font-family:var(--display); font-weight:600; font-size:clamp(1.05rem,1.5vw,1.25rem); line-height:1.5; color:var(--body); } .bridge-claim .hi{ color:var(--pink); display:block; } .bridge-claim-sub{ margin-top:24px; font-size:16px; line-height:1.6; color:var(--body-soft); max-width:560px; } .bridge-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; } .bridge-hero-visual img{ width:100%; height:auto; filter:drop-shadow(0 40px 70px rgba(20,20,40,0.22)); } .bridge-list{ list-style:none; margin-top:18px; } .bridge-list li{ font-size:16.5px; color:var(--body); line-height:1.5; padding:10px 0 10px 24px; position:relative; border-top:1px solid var(--line); } .bridge-list li:first-child{ border-top:none; } .bridge-list li::before{ content:''; position:absolute; left:2px; top:19px; width:7px; height:7px; border-radius:50%; background:var(--body-soft); } .shift-after .bridge-list li::before{ background:var(--blue); } .sec-bridge-planner{ padding:110px 0; background:var(--cream); } .bridge-planner-grid{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:52px; align-items:center; } .bridge-notion-stack{ display:flex; flex-direction:column; gap:22px; } .bridge-planner-grid h2{ margin:10px 0 20px; } .bridge-includes{ list-style:none; margin:24px 0 26px; } .bridge-includes li{ font-size:16.5px; color:var(--body); padding:9px 0 9px 26px; position:relative; border-top:1px solid var(--line); } .bridge-includes li:first-child{ border-top:none; } .bridge-includes li::before{ content:'\2713'; position:absolute; left:0; color:var(--pink); font-weight:700; } .bridge-relationship{ font-family:var(--display); font-weight:600; font-size:1.1rem; line-height:1.5; color:var(--ink); margin-bottom:30px; } .bridge-relationship .hi{ color:var(--blue-deep); display:block; } .bridge-notion-shot{ width:100%; height:auto; border-radius:var(--r-l); border:1px solid var(--line); box-shadow:var(--shadow-lift); } .sec-bridge-why{ padding:110px 0; } .bridge-why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; } .sec-bridge-explore{ padding:96px 0; background:var(--cream); } .bridge-explore{ max-width:720px; margin:0 auto; text-align:center; } .bridge-explore h2{ margin-bottom:18px; } .bridge-explore .lede{ margin:0 auto 30px; } .bridge-quiet-links{ display:flex; flex-wrap:wrap; gap:28px; justify-content:center; } .bridge-quiet-links a{ font-family:var(--display); font-weight:600; font-size:16px; color:var(--body-soft); border-bottom:1px solid var(--line); padding-bottom:3px; transition:color .15s, border-color .15s; } .bridge-quiet-links a:hover{ color:var(--blue-deep); border-color:var(--blue); } @media (max-width:900px){ .bridge-hero-grid, .bridge-planner-grid{ grid-template-columns:1fr; } .bridge-why-grid{ grid-template-columns:1fr; } .bridge-hero-visual{ order:-1; } } @media (max-width:560px){ .bridge-hero{ padding:56px 0 64px; } .sec-bridge-planner,.sec-bridge-why,.sec-bridge-explore{ padding:64px 0; } .bridge-quiet-links{ gap:16px; flex-direction:column; } } .page-bridge .sec-final .lede{ margin-bottom:40px; } /* ============================================================ /planner-next — stable destination printed in the Planner PDF. Audience: people who already own the Planner. Nothing is sold here. ============================================================ */ :where(.page-pnext) h1{ font-size:clamp(2.4rem,4vw,3.5rem); line-height:1.12; } :where(.page-pnext) h2{ font-size:clamp(1.9rem,3.2vw,2.7rem); line-height:1.2; } .page-pnext .eyebrow{ font-size:15.5px; letter-spacing:0.13em; } .page-pnext .lede{ font-size:clamp(1.05rem,1.5vw,1.22rem); } .pnext{ padding:76px 0 110px; overflow:hidden; background: radial-gradient(900px 500px at 85% -10%, var(--blue-tint) 0%, transparent 60%), radial-gradient(700px 400px at -10% 90%, var(--pink-tint) 0%, transparent 55%); } .pnext-inner > *{ max-width:820px; } .pnext-inner h1{ max-width:920px; } .pnext-inner > .pnext-meanwhile{ max-width:1060px; } .pnext-meanwhile > p, .pnext-meanwhile > h2{ max-width:820px; } .pnext-inner h1{ margin:10px 0 24px; } .pnext-inner .lede{ margin-bottom:18px; } .pnext-signup{ margin-top:46px; padding:32px 0 0; border-top:1px solid var(--line); } .pnext-signup::before{ content:''; display:block; width:44px; height:3px; border-radius:2px; background:var(--pink); margin-bottom:22px; } .pnext-signup h2{ margin-bottom:12px; } .page-pnext h1 .hi-line{ color:var(--pink); } .pnext-signup > p{ font-size:16.5px; line-height:1.62; color:var(--body); margin-bottom:12px; } .pnext-form{ display:flex; flex-wrap:wrap; gap:12px; } .pnext-form input{ flex:1 1 280px; font-family:var(--body-font, inherit); font-size:16px; padding:15px 18px; border:1.5px solid var(--line); border-radius:100px; color:var(--ink); background:#fff; } .pnext-form input::placeholder{ color:var(--body-soft); } .pnext-note{ margin-top:0; font-size:16.5px; line-height:1.62; color:var(--body-soft); } .pnext-meanwhile{ margin-top:52px; } .pnext-meanwhile h2{ margin-bottom:12px; } .pnext-meanwhile p{ font-size:16.5px; line-height:1.62; color:var(--body); } .page-pnext .section-close{ text-align:left; margin:30px 0 0; } @media (max-width:560px){ .pnext{ padding:56px 0 72px; } .pnext-signup{ padding:26px 22px 22px; } } /* the operating rhythm, shown instead of buried in a sentence */ .rhythm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:26px 0 8px; } .rhythm-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:22px 22px 20px; } .rhythm-card .rc-when{ display:block; font-family:var(--display); font-weight:700; font-size:15.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--pink); margin-bottom:4px; } .rhythm-card .rc-what{ display:block; font-family:var(--display); font-weight:700; font-size:19px; color:var(--ink); margin-bottom:10px; } .rhythm-card p{ font-size:16.5px; line-height:1.55; color:var(--body); margin:0; } .page-pnext .section-close{ text-align:left; margin:34px 0 0; } @media (max-width:900px){ .rhythm-grid{ grid-template-columns:1fr; } } /* ============================================================ /ai-quiz — the Tally form is the page; everything else stays out of its way ============================================================ */ :where(.page-quiz) h1{ font-size:clamp(2.2rem,3.6vw,3.1rem); line-height:1.15; } .page-quiz .eyebrow{ font-size:15.5px; letter-spacing:0.13em; } .page-quiz h1 .hi-line{ color:var(--pink); } .quiz-sec{ padding:64px 0 96px; background: radial-gradient(900px 500px at 85% -10%, var(--blue-tint) 0%, transparent 60%), radial-gradient(700px 400px at -10% 90%, var(--pink-tint) 0%, transparent 55%); } .quiz-head{ max-width:760px; } .quiz-head h1{ margin:10px 0 20px; } .quiz-head .lede{ font-size:clamp(1.05rem,1.5vw,1.22rem); margin-bottom:20px; } .quiz-meta{ display:flex; flex-wrap:wrap; gap:10px 26px; } .quiz-meta span{ display:flex; align-items:center; gap:8px; font-size:16px; color:var(--body); } .quiz-meta span::before{ content:'\2713'; color:var(--pink); font-weight:700; } .quiz-frame{ margin-top:34px; max-width:860px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-l); padding:12px 18px; } .quiz-frame iframe{ display:block; width:100%; border:0; } @media (max-width:560px){ .quiz-sec{ padding:48px 0 64px; } .quiz-frame{ padding:8px 10px; } } /* ============================================================ MOBILE NAVIGATION — added 14 Sep 2026 The .nav-toggle button existed but nothing opened it, so the navigation was unreachable on any screen below 980px. Requires the toggle script in each page's inline