/* B2B guide: the whole styling, in the site's look (6 Oct 2026; made once by docs/guide_stylesheet.py). Part 1: the guide's own rules with the brand values written in. Part 2: the layout approved as preview B. The site fonts come from ../../../assets/fonts/fonts.css (linked by the guide). */ :root{ --blue:#1061FF; --blue-soft:#8fb3ff; --ink:#0B0F17; --dark:#000; --pale:#F5F7FB; --line:#E2E6EE; --mut:#5B6478; --card:#ffffff; } *{box-sizing:border-box; margin:0; padding:0} html{scroll-behavior:smooth} body{font-family:"Geist",sans-serif; color:var(--ink); background:#fff; font-size:18.5px; line-height:1.68; -webkit-font-smoothing:antialiased} h1,h2,h3,h4,.sans,button,input,select,.kicker,.kicker2{font-family:"Geist",sans-serif} h1{font-size:clamp(30px,5.2vw,50px); line-height:1.12; letter-spacing:-.01em; font-weight:700} h2{font-size:clamp(25px,3.6vw,36px); line-height:1.16; letter-spacing:-.01em; font-weight:700; margin:14px 0 22px} h3{font-size:clamp(20px,2.6vw,25px); line-height:1.25; font-weight:600; margin:34px 0 14px} h4{font-size:17.5px; font-weight:600} p{margin:0 0 18px} a{color:var(--blue)} section{padding:78px 0} .wrap{max-width:920px; margin:0 auto; padding:0 24px} .wide{max-width:1000px} .kicker{display:block; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--blue); margin-bottom:10px} .dark{background:var(--dark); color:#e9eaf0} .dark .kicker{color:var(--blue-soft)} .dark h2,.dark h3{color:#fff} .dark p{color:#c9ccd8} .mut{color:var(--mut); font-size:15.5px} .turn{margin-top:34px; padding-top:22px; border-top:1px solid var(--line); font-style:italic; color:#3a4150} .dark .turn{border-top-color:#26262c; color:#aeb2c2} .turn .sans{font-style:normal} b,strong{font-weight:700} /* banner + progress */ /* hero */ .hero{background:radial-gradient(1200px 600px at 75% -10%, #1a2a5e 0%, var(--dark) 55%); color:#fff; padding:96px 0 84px} .hero .kicker{color:var(--blue-soft); margin-bottom:34px} .hero p.lede{font-size:20.5px; line-height:1.6; color:#c9ccd8; margin-top:30px; max-width:640px} .hero .meta{font-family:"Geist",sans-serif; font-size:13.5px; color:#8a90a3; margin-top:34px; letter-spacing:.04em; max-width:none} .hero .meta span{white-space:nowrap} @media (max-width:640px){.hero .meta span{white-space:normal}} .metasep{display:inline-block; width:2px; height:14px; background:#7d9bff; border-radius:1px; margin:0 14px; vertical-align:middle} .curator{margin-top:34px; border-left:3px solid var(--blue); padding:4px 0 4px 18px; color:#dfe3f2; font-size:17px; max-width:640px} /* --- hero matrica --- */ .curatorrow{display:flex; align-items:center; gap:24px; margin-top:34px} .curatorrow .curator{margin-top:0; flex:0 1 640px; min-width:0} .hero-sticker{flex:0 0 auto; width:200px; height:auto; margin-left:auto; display:block; transform:rotate(-4deg); filter:drop-shadow(0 10px 26px rgba(0,0,0,.45)); user-select:none; -webkit-user-select:none; pointer-events:none} @media (max-width:900px){ .curatorrow{display:block} .hero-sticker{width:160px; margin:26px auto 0; transform:rotate(-3deg)} } @media (prefers-reduced-motion: reduce){ .hero-sticker{transform:none} } /* panels & boxes */ .panel{background:var(--pale); border:1px solid var(--line); border-radius:14px; padding:24px 26px; margin:26px 0} .mvv{border-left:3px solid var(--blue); background:var(--pale); border-radius:0 12px 12px 0; padding:16px 20px; margin:20px 0; font-family:"Geist",sans-serif; font-size:15px; line-height:1.6} .mvv b{display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin-bottom:8px} .fail{border-left:3px solid #c33; background:#fdf3f3; border-radius:0 12px 12px 0; padding:14px 20px; margin:20px 0; font-family:"Geist",sans-serif; font-size:15px; line-height:1.6} .fail b{display:block; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:#b32; margin-bottom:6px} .src{font-size:14px; color:var(--mut); font-family:"Geist",sans-serif} .dark .src{color:#8a90a3} /* quiz */ .quiz{background:var(--pale); border:1px solid var(--line); border-radius:16px; padding:26px 28px; margin:30px 0} .dark .quiz{background:#17181d; border-color:#26262c} .quiz .qlabel{font-family:"Geist",sans-serif; font-size:13.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:12px} .quiz p.qq{font-family:"Geist",sans-serif; font-size:17.5px; font-weight:600; line-height:1.45; margin-bottom:18px} .dark .quiz p.qq{color:#fff} .sliderrow{display:flex; align-items:center; gap:16px; margin-bottom:16px} .sliderrow input[type=range]{flex:1; accent-color:var(--blue); height:28px} .sliderrow .val{font-family:"Geist",sans-serif; font-weight:700; font-size:22px; color:var(--blue); min-width:74px; text-align:right} .btn{display:inline-block; background:var(--blue); color:#fff; border:0; border-radius:999px; padding:12px 24px; font-family:"Geist",sans-serif; font-weight:700; font-size:15.5px; cursor:pointer; text-decoration:none} .btn:hover{background:#0d43e0} .btn.ghost{background:transparent; color:var(--blue); border:1.5px solid var(--blue)} .dark .btn.ghost{color:#fff; border-color:#fff} .q1rev{display:none; margin-top:20px; border-top:1px solid var(--line); padding-top:18px} .dark .q1rev{border-top-color:#26262c} .q1rev.on{display:block} .barrow{display:flex; align-items:center; gap:12px; margin:10px 0; font-family:"Geist",sans-serif; font-size:14px} .barrow .blab{min-width:118px; color:var(--mut); text-align:right} .dark .barrow .blab{color:#8a90a3} .barrow .btrack{flex:1; background:#e2e8f8; border-radius:6px; height:22px; overflow:hidden} .dark .barrow .btrack{background:#22232a} .barrow .bfill{display:block; height:100%; background:var(--blue); border-radius:6px; width:0; transition:width .9s ease} .barrow .bfill.gray{background:#9aa4c0} .barrow .bnum{min-width:52px; font-weight:700} /* calculators */ .calc{background:var(--dark); color:#e9eaf0; border-radius:16px; padding:28px; margin:30px 0} .calc .qlabel{font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--blue-soft); margin-bottom:14px} .calc .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:8px} .calc label{display:block; font-family:"Geist",sans-serif; font-size:13px; color:#9aa0b4; margin-bottom:6px} .calc input{width:100%; background:#17181d; border:1px solid #2c2d35; color:#fff; border-radius:10px; padding:11px 13px; font-size:17px; font-family:"Geist",sans-serif} .calc input:focus{outline:2px solid var(--blue)} .calc .out{margin-top:18px; border-top:1px solid #26262c; padding-top:18px; font-family:"Geist",sans-serif} .calc .big{font-size:clamp(26px,4vw,38px); font-weight:700; color:#fff; line-height:1.2} .calc .big em{font-style:normal; color:var(--blue-soft)} .calc .note{font-size:13px; color:#4a5160; margin-top:10px; line-height:1.5} /* scrolly */ .scrolly{position:relative; margin:20px 0 0} .steps{position:relative; z-index:2} .step{min-height:82vh; display:flex; align-items:flex-end; justify-content:center; padding-bottom:5vh} .step .card{background:rgba(255,255,255,.97); border:1px solid var(--line); box-shadow:0 12px 34px rgba(20,30,60,.12); border-radius:14px; padding:18px 24px; max-width:470px; font-size:16.5px} .mloop{stroke:#1061FF; stroke-width:2.4; fill:none; stroke-dasharray:7 6} /* roles, cats, ladder */ /* --- ch4 role cards: same card language as the ch5 categories, ordered along the funnel --- */ .roles{display:block; margin:26px 0} .rc{position:relative; border:1px solid #e7ecf5; border-radius:13px; background:#fff; overflow:hidden; padding-left:4px; margin-bottom:10px; box-shadow:0 1px 2px rgba(20,30,60,.04); transition:border-color .22s, box-shadow .22s;} .rc:last-child{margin-bottom:0;} .rc::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--rail); transition:width .2s;} .rc:hover{border-color:#c3cfe6;} .rc[open]{border-color:#b9ccfa; box-shadow:0 8px 26px rgba(26,86,255,.08);} .rc[open]::before{width:6px;} .rc > summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:13px; padding:15px 17px;} .rc > summary::-webkit-details-marker{display:none} .rc > summary:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; border-radius:12px;} .rc .stg{flex:0 0 auto; width:26px; height:26px; border-radius:999px; background:#eaf0fe; color:#2f4aa3; display:inline-flex; align-items:center; justify-content:center; font-family:"Geist",sans-serif; font-weight:700; font-size:12px; margin-top:1px; transition:background .25s, color .25s;} .rc[open] .stg{background:var(--blue); color:#fff;} .rc .tx{min-width:0; flex:1;} .rc .rt{display:block; font-family:"Geist",sans-serif; font-weight:600; font-size:16.5px; line-height:1.33; letter-spacing:-.005em; color:var(--ink);} .rc .rs{display:block; font-size:13.5px; line-height:1.47; color:#6a7183; margin-top:5px;} .rc > summary::after{content:''; flex:0 0 8px; height:8px; margin-top:7px; margin-left:auto; border-right:1.6px solid #aab2c2; border-bottom:1.6px solid #aab2c2; transform:rotate(45deg); transition:transform .25s, border-color .25s;} .rc[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px); border-color:var(--blue);} .rc .rb{padding:0 17px 16px;} .rc .rb p{font-size:15px; line-height:1.6; color:#3f4655; margin:0;} .rc .tag{display:inline-block; font-family:"Geist",sans-serif; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-top:10px;} .cats{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; margin:22px 0 8px; width:min(918px, calc(100vw - 48px));} /* same 918px width as before, but anchored to the text's left edge instead of centred on the viewport */ @media (max-width:760px){.cats{grid-template-columns:1fr; gap:8px; width:auto;}} /* each group sits in its own panel; the heading is the panel header */ .colgrp{min-width:0; background:#f7f9fd; border:1px solid #e6ecf7; border-radius:18px; padding:18px 16px 16px; transition:border-color .25s, background .25s;} .colgrp.on{border-color:#bacdfa; background:#f5f8ff;} .catgrp{padding:0 4px 13px; border-bottom:2px solid #d3ddef; margin:0 0 14px; transition:border-color .25s;} .catgrp .gt{display:block; font-family:"Geist",sans-serif; font-weight:600; font-size:16.5px; letter-spacing:-.005em; color:#2b3242; transition:color .25s;} .catgrp .gs{display:block; font-size:13px; line-height:1.45; color:#8a90a0; margin-top:3px;} .colgrp.on .catgrp{border-bottom-color:var(--blue);} .colgrp.on .catgrp .gt{color:var(--blue);} /* white cards; the colour lives in a 4px rail on the left edge */ .cat{position:relative; border:1px solid #e7ecf5; border-radius:13px; background:#fff; margin-bottom:9px; overflow:hidden; padding-left:4px; box-shadow:0 1px 2px rgba(20,30,60,.04); transition:border-color .22s, box-shadow .22s;} .cat:last-child{margin-bottom:0;} .cat::before{content:''; position:absolute; left:0; top:0; bottom:0; width:4px; transition:width .2s;} .cat:hover{border-color:#c3cfe6;} .cat > summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:13px; padding:15px 17px;} .cat > summary:focus-visible{outline:2px solid var(--blue); outline-offset:-2px; border-radius:12px;} .cat > summary::-webkit-details-marker{display:none} .cat > summary::after{content:''; flex:0 0 8px; height:8px; margin-top:7px; margin-left:auto; border-right:1.6px solid #aab2c2; border-bottom:1.6px solid #aab2c2; transform:rotate(45deg); transition:transform .25s, border-color .25s;} .cat[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px); border-color:var(--blue);} .cat h4{font-size:16.5px; line-height:1.33; margin:0; font-weight:600; letter-spacing:-.005em;} /* the category letter gets its own disc, matching the ch4 role-card numbers */ .cat .cn{flex:0 0 auto; width:26px; height:26px; border-radius:999px; background:#eef2fb; color:#54607a; display:inline-flex; align-items:center; justify-content:center; font-family:"Geist",sans-serif; font-weight:700; font-size:13px; margin-top:1px; transition:background .25s, color .25s;} .cat[open] .cn{background:var(--blue); color:#fff;} .cat > p{font-size:15px; line-height:1.6; margin:0; color:#3f4655; padding:0 17px 17px;} .cat summary > div{min-width:0; flex:1;} .cat[open]{border-color:#b9ccfa; box-shadow:0 8px 26px rgba(26,86,255,.08);} .cat[open]::before{width:6px;} /* two roads, two colours - within a road the cards are not ranked, so no gradient */ .cat.fnd::before{background:#d3b768} .cat.bld::before{background:#4aa878} /* --- ch4 team structures: six pills, one panel (replaces six accordions) --- */ .mswitch{margin:18px 0 0} /* pill rows tighter than the gap below them, so the strip reads as one control group and the panel as separate content */ .mswitch .tbar{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:26px} .mswitch .tb{font-family:"Geist",sans-serif; font-size:14.5px; font-weight:600; padding:10px 17px; border-radius:999px; border:1px solid var(--line); background:#fff; color:#6a7183; cursor:pointer; transition:.2s; text-align:left;} .mswitch .tb:hover{border-color:#b9ccfa} .mswitch .tb.on{background:var(--blue); border-color:var(--blue); color:#fff} .mswitch .tb:focus-visible{outline:2px solid var(--blue); outline-offset:2px} .mswitch .pbox{background:#fff; border:1px solid #e7ecf5; border-radius:14px; padding:22px 24px; overflow:hidden; transition:height .3s cubic-bezier(.22,.61,.36,1);} .mswitch .pane[hidden]{display:none} .mswitch .pane ul{list-style:none; margin:0; padding:0} .mswitch .pane ul li{position:relative; padding-left:20px; margin:0 0 9px; max-width:none; line-height:1.6; font-size:15px; color:#3a4150} .mswitch .pane ul li:last-child{margin-bottom:0} .mswitch .pane ul li::before{content:"\2022"; position:absolute; left:0; top:0; color:var(--blue); font-weight:600} .mswitch .pane .fb-src{color:#6a7284; font-size:14px; font-style:italic; margin-top:12px} /* assessment */ .assess{background:var(--dark); color:#e9eaf0; padding:84px 0} .assess h2{color:#fff} .assess .intro{color:#c9ccd8; font-size:17px} .kicker2{font-family:"Geist",sans-serif; font-size:12px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--blue-soft); margin-bottom:10px} .q{background:#17181d; border:1px solid #26262c; border-radius:14px; padding:20px 22px; margin:16px 0} .q h4{color:#fff; font-size:17px; margin-bottom:14px} .opt{display:block; font-family:"Geist",sans-serif; font-size:15px; line-height:1.5; border:1.5px solid #2c2d35; border-radius:10px; padding:11px 15px; margin:8px 0; cursor:pointer; color:#c9ccd8} .opt:hover{border-color:var(--blue)} .opt.sel{border-color:var(--blue); background:var(--blue); color:#fff} .cta{display:inline-block; background:var(--blue); color:#fff; border:0; border-radius:999px; padding:14px 28px; font-family:"Geist",sans-serif; font-weight:700; font-size:16px; cursor:pointer; text-decoration:none} .note{font-size:13.5px; color:#4a5160} .results{display:none} .results.on{display:block} /* cta section */ .ctagrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:30px} .ctacard{border:1px solid var(--line); border-radius:16px; padding:28px} .ctacard.blue{background:var(--blue); border-color:var(--blue); color:#fff} .ctacard.blue h3{color:#fff; margin-top:0} .ctacard.blue p{color:#e8eeff} .ctacard h3{margin-top:0} /* sources */ .srcs{font-family:"Geist",sans-serif; font-size:14px; line-height:1.6; color:#3a4150} .srcs li{margin:9px 0} .srcs b{font-weight:600} ol.srcs{padding-left:34px} ol.srcs li::marker{color:var(--blue); font-weight:600; font-family:"Geist",sans-serif} .srcs a{color:inherit; text-decoration:none} .srcs a:hover{text-decoration:underline} sup.ref{font-size:11px; line-height:0} sup.ref a{color:var(--blue); text-decoration:none; font-weight:600} .dark sup.ref a{color:var(--blue-soft)} footer{background:var(--dark); color:#8a90a3; font-family:"Geist",sans-serif; font-size:13px; padding:34px 0; text-align:center} /* numbered sub-points with ghost numbers */ .pt{position:relative; margin-left:0; padding-left:46px; margin-bottom:16px;} .pt .ptn{position:absolute; left:0; top:-6px; font-family:"Geist",sans-serif; font-size:34px; font-weight:600; color:#dbe3f8;} .dark .pt .ptn{color:rgba(125,155,255,0.22)} @media (max-width:640px){ body{font-size:17px} .metasep{display:none} section{padding:58px 0} .step .card{font-size:15px; padding:15px 18px} .barrow .blab{min-width:86px; font-size:12.5px} .pt{position:relative; margin-left:0; padding-left:46px; margin-bottom:16px;} .pt .ptn{position:absolute; right:auto; left:0; margin-right:0; text-align:left; font-size:28px} } @media (prefers-reduced-motion: reduce){ .lvl.pulse .chevwrap{animation:none !important} html{scroll-behavior:auto} *{transition:none !important; animation:none !important} } /* ===== V10 component subset ===== */ .wip{position:fixed; top:0; left:0; right:0; z-index:99; background:var(--ink); color:#fff; font-size:12px; padding:6px 16px; text-align:center; font-family:"Geist",sans-serif;} .wip b{color:#ffd479;} .kicker2{font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:14px;} /* ---------- SCROLLY ---------- */ .scrolly{position:relative;} .sticky{position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; z-index:0; padding-top:20px;} .sticky svg{width:min(860px,94vw); height:auto;} .steps{position:relative; z-index:1; pointer-events:none;} .step{min-height:62vh; display:flex; align-items:flex-end; justify-content:center;} .step .card{pointer-events:auto; background:rgba(255,255,255,.96); border:1px solid var(--line); box-shadow:0 4px 24px rgba(20,20,32,.09); border-radius:12px; max-width:430px; padding:24px 28px; font-size:17px; margin:0 24px 8vh;} .step .card b{font-weight:700;} /* Georgia ships only old-style figures, so a leading "1." sits at x-height beside a capital. Space Grotesk has lining figures - and is what every other number on the page is set in. */ .step .card b .cnum{font-family:"Geist",sans-serif; font-weight:700; letter-spacing:.005em;} .step:first-child{min-height:76vh;} .step:last-child{min-height:82vh;} /* engine svg states */ #scrolly-map{background:#0e0e10;} #scrolly-map .step .card{background:rgba(20,20,26,.95); border:1px solid #2b2b33; color:#dfe3ee; box-shadow:0 6px 30px rgba(0,0,0,.5);} .stage{opacity:.1; transform:translateY(10px); transition:opacity .6s, transform .6s;} .stage.on{opacity:1; transform:none;} .handoff{opacity:0; transition:opacity .5s;} .handoff.on{opacity:1;} .handoff.leaking .valvecore{animation:pulse 1.1s infinite; r:6;} .handoff.leaking > circle:first-of-type{stroke:#c0392b;} @keyframes pulse{0%,100%{fill:#c0392b}50%{fill:#f19066}} .flywheel{opacity:0; transition:opacity .8s; pointer-events:none;} .flywheel.on{opacity:1; pointer-events:auto;} .band{opacity:0; transition:opacity .7s;} .band.on{opacity:1;} .leakstream{opacity:0; transition:opacity .7s;} .leakstream.on{opacity:1;} .svg-label{font-family:"Geist",sans-serif; font-weight:700;} .svg-sub{font-family:"Geist",sans-serif;} /* ---------- STAGE EXPLORER ---------- */ .explorer{max-width:920px; margin:0 auto; padding:24px 24px 44px;} .tabs{display:flex; gap:8px; flex-wrap:wrap; font-family:"Geist",sans-serif; margin-bottom:16px;} /* question and tabs share one panel, so they read as prompt + control */ .explorer .prompt{background:#f5f8ff; border:1px solid #e2eafd; border-radius:16px; padding:16px 26px 15px; margin-bottom:14px;} .explorer .prompt .eqq{font-family:"Geist",sans-serif; font-size:18px; font-weight:600; letter-spacing:-.005em; color:#141420; margin:0;} .explorer .prompt .tabs{margin:13px 0 0;} .explorer .prompt .ehh{font-family:"Geist",sans-serif; font-size:14px; line-height:1.5; color:#7a8296; margin:6px 0 0;} .tab{flex:1; min-width:140px; border:1px solid #e3e3e8; border-radius:999px; padding:11px 12px; font-size:14px; font-weight:500; cursor:pointer; background:#fff; color:var(--gray); text-align:center; transition:all .2s;} .tab:hover{border-color:var(--accent); color:var(--ink);} .tab.on{background:var(--accent); border-color:var(--accent); color:#fff;} /* margin:0 is deliberate - the earlier .panel rule (pale card) leaves 26px behind otherwise; 26px horizontal padding lines this text up with the prompt box above it */ .panel{border:1px solid #e6e6ea; border-radius:16px; padding:32px 26px; display:none; background:#fff; margin:0;} .panel.on{display:block;} /* the panel's first child inherits the global h3 top margin (34px) on top of the panel's own 38px padding - 72px of dead space above the headline */ .panel h3{font-family:"Geist",sans-serif; letter-spacing:-.01em; font-size:22px; margin:0 0 8px;} .panel .mission{color:var(--gray); font-style:italic; margin-bottom:22px; font-size:16.5px;} .panel h4{font-family:"Geist",sans-serif; font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin:26px 0 10px;} .panel ul{margin-left:20px;} .panel li{margin-bottom:9px; font-size:16px;} .panel li::marker{color:var(--accent);} .panel li b{font-weight:700;} .panel .fail{border-left:2px solid var(--leak); padding-left:16px; font-size:16px; color:#4a4a52;} .panel .mvv{background:#f5f8ff; border:1px solid #dbe6fd; border-radius:12px; padding:18px 20px; font-size:16px;} .panel .mvv ul.mvv-steps{list-style:none; margin:0; padding:0; counter-reset:mvvstep;} .panel .mvv ul.mvv-steps li{position:relative; padding-left:24px; margin:0 0 9px; font-size:inherit; line-height:inherit; counter-increment:mvvstep;} .panel .mvv ul.mvv-steps li:last-child{margin-bottom:0;} .panel .mvv ul.mvv-steps li::before{content:counter(mvvstep) "."; position:absolute; left:0; top:0; color:var(--blue); font-family:"Geist",sans-serif; font-weight:600; font-size:inherit;} .panel .mvv p.mvv-close{margin:12px 0 0;} /* ---------- ARC SCROLLY reuse ---------- */ .arcphase rect{opacity:0; transition:opacity .6s;} .arcphase.on rect{opacity:1;} .arcphase text{transition:fill .5s;} .arcphase .svg-label,.arcphase .svg-l2{fill:#b9c0d4;} .arcphase.on .svg-label{fill:#1061FF;} .arcphase.on .svg-l2{fill:#2a3050;} .svg-l2{fill:#2a3050;} /* ---------- Panel A "TISZTA" anchor text styles (ch6 growth chart) ---------- */ #scrolly-arc .arc-lvl{font-family:"Geist",sans-serif; font-size:11.5px; font-weight:600; letter-spacing:1.2px;} #scrolly-arc .arc-phase{font-family:"Geist",sans-serif; font-size:9.8px; font-weight:500; letter-spacing:0.8px;} #scrolly-arc .arc-axis{font-family:"Geist",sans-serif; font-size:11.5px; font-weight:500; letter-spacing:1px; fill:#6b7290;} #scrolly-arc .arc-ann{font-family:"Geist",sans-serif; font-style:italic; font-size:15px; fill:#333a5c; paint-order:stroke; stroke:#ffffff; stroke-width:3.5px; stroke-linejoin:round;} #scrolly-arc .arc-annm{font-family:"Geist",sans-serif; font-size:11.5px; font-weight:500; letter-spacing:1.3px; fill:#8a92a6; paint-order:stroke; stroke:#ffffff; stroke-width:3px; stroke-linejoin:round;} #scrolly-arc .arc-cap{font-family:"Geist",sans-serif; font-size:13px; font-weight:600; letter-spacing:2px; fill:#2a3050;} #scrolly-arc .arc-cap tspan{fill:#1061FF;} #scrolly-arc .arc-guard{font-family:"Geist",sans-serif; font-style:italic; font-size:13.5px; fill:#8a90a8;} /* ---------- LEVELS ---------- */ .levels{max-width:920px; margin:0 auto; padding:16px 24px 56px;} .lvl{border:1px solid #dde2ec; border-radius:14px; margin-bottom:10px; overflow:hidden; transition:border-color .25s, box-shadow .25s;} .lvl:hover{border-color:#c3cbdb;} .lvl summary{list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:16px; padding:20px 24px; font-family:"Geist",sans-serif;} .lvl summary > div{flex:1; min-width:0;} .lvl summary::-webkit-details-marker{display:none;} /* the arrow sits in a hairline circle so it reads as a control, not decoration */ .lvl .chevwrap{flex:0 0 32px; height:32px; margin-left:auto; align-self:center; border:1px solid #d7dde9; border-radius:999px; display:flex; align-items:center; justify-content:center; transition:background .25s, border-color .25s;} .lvl .chevwrap i{display:block; width:8px; height:8px; border-right:2px solid #6f7789; border-bottom:2px solid #6f7789; transform:rotate(45deg) translate(-1px,-1px); transition:transform .25s, border-color .25s;} .lvl:hover .chevwrap{border-color:var(--accent); background:#f2f6ff;} .lvl:hover .chevwrap i{border-color:var(--accent);} .lvl[open] .chevwrap{background:var(--accent); border-color:var(--accent);} .lvl[open] .chevwrap i{border-color:#fff; transform:rotate(-135deg) translate(-2px,-2px);} /* one-off nudge when the levels first scroll into view: three rings, then never again */ .lvl.pulse .chevwrap{animation:lvlring 1.2s ease-out 3;} @keyframes lvlring{0%{box-shadow:0 0 0 0 rgba(26,86,255,.30)} 70%{box-shadow:0 0 0 10px rgba(26,86,255,0)}100%{box-shadow:0 0 0 0 rgba(26,86,255,0)}} .lvl .n{flex:0 0 auto; margin-top:-4px; padding:0 14px; height:30px; border-radius:999px; background:#eef3ff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; color:var(--accent); transition:background .25s, color .25s;} .lvl summary h3{font-size:18px; letter-spacing:-.01em; margin:0;} .lvl summary p{font-size:13px; color:var(--gray); margin:0;} .lvl .body{padding:0 24px 22px 84px; font-size:16.5px;} .lvl .body p{margin-bottom:10px;} .lvl .body b{font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:block; margin-top:12px;} .lvl[open]{border-color:#b9ccfa; box-shadow:0 6px 24px rgba(26,86,255,.08);} .lvl[open] .n{background:var(--accent); color:#fff;} .assess .kicker2{color:#8fb4ee;} /* ---------- PROGRESS + CHAPTER NAV ---------- */ .progress{position:fixed; top:26px; left:0; height:3px; background:var(--accent); width:0%; z-index:98;} /* ---------- REVEAL ON SCROLL ---------- */ .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;} .reveal.vis{opacity:1; transform:none;} /* ---------- ANIMATED COUNTERS ---------- */ .counters{display:flex; gap:26px; max-width:1240px; margin:44px auto; padding:0 24px; flex-wrap:wrap;} .counter{flex:1; min-width:220px; border-top:3px solid var(--accent); padding:16px 4px 0;} .counter .big{font-size:54px; font-weight:800; font-family:"Geist",sans-serif; letter-spacing:-.02em; line-height:1;} .counter .big span{font-size:1em;} .counter .big small{font-size:0.52em; font-weight:700; margin-left:2px; vertical-align:baseline; letter-spacing:0;} .counter p{font-size:15px; color:var(--gray); font-family:"Geist",sans-serif; margin-top:8px;} .counter .src{font-size:11px; color:#bbb; font-family:"Geist",sans-serif;} /* ---------- ARC LINE DRAW ---------- */ /* ---------- STICKY CTA ---------- */ .stickycta{position:fixed; right:18px; bottom:18px; z-index:96; background:#1061FF; color:#fff; font-family:"Geist",sans-serif; font-size:14px; font-weight:500; padding:12px 22px; border-radius:999px; text-decoration:none; box-shadow:0 6px 24px rgba(26,86,255,.35); opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .4s, transform .4s;} .stickycta.show{opacity:1; pointer-events:auto; transform:none;} @media (prefers-reduced-motion: reduce){ .valvecore{animation:none !important;} .stage{transform:none;} } @media (max-width:700px){ .step .card{font-size:15.5px; padding:20px;} .panel{padding:24px;} .lvl .body{padding-left:22px;} } /* === INT-v07c: standardized section transitions === */ @media (min-width:901px){ /* === ch6 money-curve scrolly: Option C1 — "szoros par": centered chart, cards tight left (v09) === Full-bleed grid container (body has no side padding); steps + sticky share grid cell 1/1. CHART: width --figw targets 1012px (size option M), clamped to 100vw - 394px so on smaller desktops its right edge stays >=24px from the viewport edge even when the pair is pushed right by the card clamp (24 + 330 + 16 + figw + 24 = 100vw); 1012px holds down to ~1406px viewports, below that the clamp shrinks it. Its left offset --figx aims the chart CENTER at 50vw (50vw - figw/2) but is floored by the no-overlap constraint 24px + 330px card + gap. GAP: ideally 32px; when space is tight it shrinks first (clamped 16..32 via the leftover 50vw - figw/2 - 354px), then --figx's floor pushes the PAIR right together with the card's left edge pinned at 24px — chart as close to center as the constraint allows. CARDS: 330px wide, right edge glued to figx - gap (steps margin-left = figx - gap - 330). Exact 50vw centering from ~1784px viewports at figw=1012. Sticky top = 50vh - figh/2 keeps the chart vertically centered; figh derives from the 1000x486 viewBox + svg card padding: figh = (figw - 50px)*(486/1000) + 36px. Steps stay in normal document flow (stacked grid cells), so the 55vh step rhythm and IntersectionObserver activation timing are untouched. */ #scrolly-arc{--figw:clamp(380px, 100vw - 444px, 1113px); --figh:calc((var(--figw) - 50px)*0.4418 + 36px); --gap:clamp(16px, 50vw - var(--figw)/2 - 404px, 32px); --figx:max(50vw - var(--figw)/2, 404px + var(--gap)); display:grid; grid-template-columns:1fr; width:100%; max-width:100%; padding:0; margin:0;} #scrolly-arc .mobilearc{display:none;} #scrolly-arc .steps{grid-column:1; grid-row:1; z-index:2; pointer-events:none; width:380px; margin:0 0 0 calc(var(--figx) - var(--gap) - 380px); padding:0 0 10vh;} #scrolly-arc .sticky{grid-column:1; grid-row:1; z-index:1; position:sticky; top:max(24px, calc(50vh - var(--figh)/2)); align-self:start; height:auto; display:block; width:var(--figw); margin:0 0 0 var(--figx); padding:0;} #scrolly-arc .sticky svg{width:100%; max-width:none; display:block;} #scrolly-arc .step{min-height:55vh; display:flex; align-items:center; justify-content:flex-start; margin:0; padding:0;} #scrolly-arc .step .card{pointer-events:auto; margin:0; width:380px; max-width:380px; text-wrap:pretty; background:rgba(255,255,255,.97); border:1px solid #dfe6f5; color:#16181d; box-shadow:0 18px 48px rgba(20,30,60,.20);} } .ch6band .levels{padding-bottom:0;} .ch6band section[id="ch6"]{padding-top:72px;} section .turn{margin-bottom:0;} /* === INT-v08b: systematic mobile sweep (mobile contract) === */ @media (max-width:640px){ section{padding:56px 0;} .hero{padding:72px 0 80px;} .assess{padding:64px 0;} .quiz{padding:20px 18px;} .calc{padding:22px 18px;} .explorer{padding:20px 16px 44px;} .panel{padding:20px 18px;} .counters{gap:18px;} .counter .big{font-size:44px;} .srcs li{overflow-wrap:anywhere;} .ctarow{gap:10px;} .ctarow .cta{padding:12px 20px; font-size:14.5px;} .curator{padding:12px 14px; font-size:13.5px;} .tpl-handoff, [id="tpl-handoff"]{font-size:13.5px !important; padding:14px 16px !important;} } @media (pointer:coarse){ .opt{padding:13px 16px;} .tab{padding:13px 14px;} #rail a{padding:8px 12px;} summary{min-height:44px;} .btn,.cta{padding:13px 24px;} } /* === INT-v08a: calculator mobile + number inputs === */ input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;} input[type=number]{-moz-appearance:textfield; appearance:textfield;} .calc .grid{align-items:end;} @media (max-width:640px){ .calc .grid{grid-template-columns:1fr; gap:12px;} .calc label{min-height:0;} .calc .big{font-size:24px;} } /* === INT-v07b: (arc rhythm rules removed in v09 rebuild — see INT-v07c block) === */ /* === INT-v07: unified horizontal grid (one left edge everywhere) === */ .wrap > p, .wrap li, section .turn{max-width:39em;} .wrap .quiz, .wrap .calc{max-width:760px;} .assess .q,.assess p.intro{max-width:700px;} .explorer, .levels, .counters{padding-left:24px; padding-right:24px;} /* === CH7-v10: audit review pass — s01/s02 section labels, q10 hint, l01/l04, u01/u03/u04 === */ /* === INT-v06: map section 3A — side column + spotlight === */ #scrolly-map .stage{opacity:.55; transform:none;} #scrolly-map .band{opacity:.45;} #scrolly-map .handoff{opacity:.5;} #scrolly-map .leakstream{opacity:0;} #scrolly-map .flywheel{opacity:0;} #scrolly-map .stage.on, #scrolly-map .band.on, #scrolly-map .handoff.on, #scrolly-map .leakstream.on, #scrolly-map .flywheel.on{opacity:1;} @media (min-width:901px){ #scrolly-map{display:grid; grid-template-columns:1fr minmax(300px,410px) minmax(680px,1080px) 1fr; gap:0 44px; padding:0 24px;} #scrolly-map .mobilemap{display:none;} #scrolly-map .steps{grid-column:2; grid-row:1; z-index:2; pointer-events:auto; padding:5vh 0 3vh;} #scrolly-map .sticky{grid-column:3; grid-row:1; height:100vh; padding-top:0;} #scrolly-map .sticky svg{width:100%; max-width:1080px;} #scrolly-map .step{min-height:62vh; align-items:center; justify-content:flex-start; padding-bottom:0;} #scrolly-map .step .card{margin:0; max-width:410px; text-wrap:pretty;} } /* === INT-v09c: progressive disclosure — milestone sets hidden at rest, reveal-and-persist (green @3, indigo @4, persisted 70%) === */ .arcann .a-ring{opacity:0; transform-origin:center; transform-box:fill-box;} .arcann.on .a-ring{animation:annping .7s ease-out 1;} #scrolly-arc .ann-g{fill:#1f7d4f;} #scrolly-arc .ann-gm{fill:#4c8f6d;} #scrolly-arc .ann-i{fill:#4a3fd6;} #scrolly-arc .a-lead{fill:none; stroke:#b9c4e8; stroke-width:1;} #scrolly-arc #ann1 .a-lead{stroke:#7cc4a0;} #scrolly-arc #ann2 .a-lead{stroke:#a89ff0;} /* base blue curve is a single continuous path underneath; colored overlays + labels + dots start hidden */ .arcseg,.mseg{transition:opacity .35s ease, stroke-width .35s ease;} .seg-fedezi,.seg-nyer,.mseg-fed,.mseg-nyer{opacity:0;} #ann1,#ann2{opacity:0; transition:opacity .35s ease;} .a-mdot{fill:#fff; stroke:#1061FF; stroke-width:2.5; opacity:0; transition:opacity .35s ease, r .35s ease;} #mdot1{stroke:#279e64;} #mdot2{stroke:#279e64; transition:opacity .35s ease, r .35s ease, stroke .35s ease;} #mdot3{stroke:#5b4ee6;} #scrolly-arc[data-ms="4"] #mdot2,#scrolly-arc[data-ms="5"] #mdot2{stroke:#5b4ee6;} .mdot{fill:#fff; stroke:#1061FF; stroke-width:1.8; opacity:0; transition:opacity .35s ease, r .3s ease;} #mmdot1{stroke:#279e64;} #mmdot2{stroke:#279e64; transition:opacity .35s ease, r .3s ease, stroke .35s ease;} #mmdot3{stroke:#5b4ee6;} #scrolly-arc[data-ms="4"] #mmdot2,#scrolly-arc[data-ms="5"] #mmdot2{stroke:#5b4ee6;} /* green set (fedezi: segment M3-M12, label, leaders, M3+M12 dots): in from state 3, persists at 70% */ #scrolly-arc[data-ms="3"] .seg-fedezi,#scrolly-arc[data-ms="4"] .seg-fedezi,#scrolly-arc[data-ms="5"] .seg-fedezi, #scrolly-arc[data-ms="3"] #ann1,#scrolly-arc[data-ms="4"] #ann1,#scrolly-arc[data-ms="5"] #ann1, #scrolly-arc[data-ms="3"] #mdot1,#scrolly-arc[data-ms="4"] #mdot1,#scrolly-arc[data-ms="5"] #mdot1, #scrolly-arc[data-ms="3"] #mdot2,#scrolly-arc[data-ms="4"] #mdot2,#scrolly-arc[data-ms="5"] #mdot2, #scrolly-arc[data-ms="3"] .mseg-fed,#scrolly-arc[data-ms="4"] .mseg-fed,#scrolly-arc[data-ms="5"] .mseg-fed, #scrolly-arc[data-ms="3"] #mmdot1,#scrolly-arc[data-ms="4"] #mmdot1,#scrolly-arc[data-ms="5"] #mmdot1, #scrolly-arc[data-ms="3"] #mmdot2,#scrolly-arc[data-ms="4"] #mmdot2,#scrolly-arc[data-ms="5"] #mmdot2{opacity:.7;} /* indigo set (nyereség: segment M12-M18, label, leaders, M18 dot): in from state 4, persists at 70% */ #scrolly-arc[data-ms="4"] .seg-nyer,#scrolly-arc[data-ms="5"] .seg-nyer, #scrolly-arc[data-ms="4"] #ann2,#scrolly-arc[data-ms="5"] #ann2, #scrolly-arc[data-ms="4"] #mdot3,#scrolly-arc[data-ms="5"] #mdot3, #scrolly-arc[data-ms="4"] .mseg-nyer,#scrolly-arc[data-ms="5"] .mseg-nyer, #scrolly-arc[data-ms="4"] #mmdot3,#scrolly-arc[data-ms="5"] #mmdot3{opacity:.7;} /* active card: its own set at full strength */ #scrolly-arc[data-ms="3"] .seg-fedezi{opacity:1; stroke-width:3.5;} #scrolly-arc[data-ms="3"] .mseg-fed{opacity:1; stroke-width:2.4;} #scrolly-arc[data-ms="3"] #ann1,#scrolly-arc[data-ms="3"] #mdot1,#scrolly-arc[data-ms="3"] #mdot2,#scrolly-arc[data-ms="3"] #mmdot1,#scrolly-arc[data-ms="3"] #mmdot2{opacity:1;} #scrolly-arc[data-ms="4"] .seg-nyer{opacity:1; stroke-width:3.5;} #scrolly-arc[data-ms="4"] .mseg-nyer{opacity:1; stroke-width:2.4;} #scrolly-arc[data-ms="4"] #ann2,#scrolly-arc[data-ms="4"] #mdot2,#scrolly-arc[data-ms="4"] #mdot3,#scrolly-arc[data-ms="4"] #mmdot2,#scrolly-arc[data-ms="4"] #mmdot3{opacity:1;} /* shared M12 dot + own dots enlarge with the active card */ #scrolly-arc[data-ms="3"] #mdot1,#scrolly-arc[data-ms="3"] #mdot2,#scrolly-arc[data-ms="4"] #mdot2,#scrolly-arc[data-ms="4"] #mdot3{r:6.5px;} #scrolly-arc[data-ms="3"] #mmdot1,#scrolly-arc[data-ms="3"] #mmdot2,#scrolly-arc[data-ms="4"] #mmdot2,#scrolly-arc[data-ms="4"] #mmdot3{r:4.5px;} @keyframes annping{0%{opacity:.75; transform:scale(.5);}100%{opacity:0; transform:scale(2.4);}} @media (prefers-reduced-motion: reduce){ .arcseg,.mseg,#ann1,#ann2,.a-mdot,.mdot{transition:none;} .arcann.on .a-ring{animation:none;} } /* === INT-v05b: arc chart on white card (pale band restored its canvas) === */ #scrolly-arc .sticky svg{background:#fff; border:1px solid #dfe6f5; border-radius:16px; box-shadow:0 12px 44px rgba(20,20,32,.07); padding:34px 24px 14px; box-sizing:border-box;} /* === INT-v05: hover combo (világosodás + nyíl-csúszás) === */ .btn,.cta,.ctarow .cta,.copybtn,.stickycta{transition:background-color .22s ease, color .22s ease, border-color .22s ease, filter .22s ease;} .btn:not(.ghost):hover, .cta:hover, .ctarow .cta:not(.ghost):hover, .stickycta:hover{filter:brightness(1.13);} .ctacard a.cta[style]:hover{filter:brightness(0.94);} .btn.ghost:hover{background:rgba(26,86,255,.07); border-color:#3f70ff; filter:none;} .ctarow .cta.ghost:hover{background:rgba(125,155,255,.09); border-color:#7d9bff; color:#fff; filter:none;} .arr{display:inline-block; transition:transform .22s ease;} .btn:hover .arr, .cta:hover .arr, .ctarow .cta:hover .arr, .copybtn:hover .arr{transform:translateX(5px);} @media (prefers-reduced-motion: reduce){.arr{transition:none;} .btn:hover .arr,.cta:hover .arr,.ctarow .cta:hover .arr,.copybtn:hover .arr{transform:none;}} /* === INT-v04: review fixes === */ .copybtn{display:inline-flex; align-items:center; gap:7px; margin-top:12px; background:transparent; border:1.5px solid var(--blue); color:var(--blue); border-radius:999px; padding:8px 18px; font-family:"Geist",sans-serif; font-size:14px; font-weight:600; cursor:pointer;} .copybtn:hover{background:var(--blue); color:#fff;} .opt:focus-visible,.tab:focus-visible,.btn:focus-visible,.cta:focus-visible,.copybtn:focus-visible,#rail a:focus-visible,summary:focus-visible,.ctarow .cta:focus-visible,.stickycta:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:6px;} .q.missing{border-color:#e24b4a !important;} .mobilemap,.mobilearc{display:none;} .msticky{display:none;} @media (max-width:900px){ #scrolly-map .sticky, #scrolly-arc .sticky{display:none;} .msticky{display:block; position:sticky; top:44px; z-index:6; max-width:520px; margin:0 auto;} #scrolly-map .msticky{background:#0e0e10; padding:8px 14px 2px;} #scrolly-arc .msticky{background:var(--pale); padding:8px 14px 4px;} .machart{background:#fff; border:1px solid #dfe6f5; border-radius:12px; box-shadow:0 8px 24px rgba(20,20,32,.08);} #scrolly-map .steps, #scrolly-arc .steps{display:block; padding:2vh 0 5vh;} #scrolly-map .step, #scrolly-arc .step{min-height:0; padding:0; margin:0 16px 12vh; display:block;} #scrolly-map .step .card, #scrolly-arc .step .card{margin:0 auto; max-width:520px;} .mobilemap,.mobilearc{display:none;} .mm .st,.mm .bd{opacity:.55; transition:opacity .45s;} .mm .hv{opacity:.4; transition:opacity .45s;} .mm .lk,.mm .fw{opacity:0; transition:opacity .45s;} #scrolly-map[data-ms="1"] .mm-st1,#scrolly-map[data-ms="1"] .mm-b1{opacity:1;} #scrolly-map[data-ms="2"] .mm-st2,#scrolly-map[data-ms="2"] .mm-b2{opacity:1;} #scrolly-map[data-ms="3"] .mm-st3,#scrolly-map[data-ms="3"] .mm-b3{opacity:1;} #scrolly-map[data-ms="4"] .mm-st4,#scrolly-map[data-ms="4"] .mm-b4{opacity:1;} #scrolly-map[data-ms="5"] .mm .lk{opacity:1;} #scrolly-map[data-ms="5"] .mm .st,#scrolly-map[data-ms="5"] .mm .bd{opacity:.3;} #scrolly-map[data-ms="6"] .mm .fw{opacity:1;} #scrolly-map[data-ms="6"] .mm-st1,#scrolly-map[data-ms="6"] .mm-st4,#scrolly-map[data-ms="6"] .mm-b4{opacity:1;} .ma .ph rect{opacity:0; transition:opacity .45s;} .ma .ph text{transition:fill .45s;} .ma .ph .svg-label,.ma .ph .svg-l2{fill:#b9c0d4;} .ma .an{opacity:0; transition:opacity .35s ease;} #scrolly-arc[data-ms="1"] .ma-p1 rect,#scrolly-arc[data-ms="2"] .ma-p2 rect,#scrolly-arc[data-ms="3"] .ma-p3 rect,#scrolly-arc[data-ms="4"] .ma-p4 rect,#scrolly-arc[data-ms="5"] .ma-p5 rect{opacity:1;} #scrolly-arc[data-ms="1"] .ma-p1 .svg-label,#scrolly-arc[data-ms="2"] .ma-p2 .svg-label,#scrolly-arc[data-ms="3"] .ma-p3 .svg-label,#scrolly-arc[data-ms="4"] .ma-p4 .svg-label,#scrolly-arc[data-ms="5"] .ma-p5 .svg-label{fill:#1061FF;} #scrolly-arc[data-ms="1"] .ma-p1 .svg-l2,#scrolly-arc[data-ms="2"] .ma-p2 .svg-l2,#scrolly-arc[data-ms="3"] .ma-p3 .svg-l2,#scrolly-arc[data-ms="4"] .ma-p4 .svg-l2,#scrolly-arc[data-ms="5"] .ma-p5 .svg-l2{fill:#2a3050;} #scrolly-arc[data-ms="4"] .ma-an1,#scrolly-arc[data-ms="5"] .ma-an1,#scrolly-arc[data-ms="5"] .ma-an2{opacity:.7;} #scrolly-arc[data-ms="3"] .ma-an1,#scrolly-arc[data-ms="4"] .ma-an2{opacity:1;} } @media (max-width:900px) and (prefers-reduced-motion: reduce){ .msticky{display:none;} #scrolly-map .steps, #scrolly-arc .steps{display:none;} .mobilemap{display:block; padding:28px 20px 4px; max-width:560px; margin:0 auto;} .mobilearc{display:block; padding:8px 20px 4px; max-width:560px; margin:0 auto;} } .mslot .card{border-radius:12px; padding:15px 17px; font-size:15px; line-height:1.62; font-family:"Geist",sans-serif; margin:8px 0 20px;} #scrolly-map .mslot .card{background:rgba(20,20,26,.95); border:1px solid #2b2b33; color:#dfe3ee;} #scrolly-map .mslot .card b{color:#fff;} #scrolly-arc .mslot .card{background:#fff; border:1px solid #dfe6f5; color:#16181d; box-shadow:0 8px 24px rgba(20,30,60,.08);} .mloop{text-align:center; font-family:"Geist",sans-serif; font-size:11px; letter-spacing:1.5px; color:#7d9bff; margin:14px 0 4px;} .mstage{border:1px solid #2e3a5c; border-radius:10px; padding:12px 14px; margin:8px 0;} .mstage .mk{font-family:"Geist",sans-serif; font-size:10.5px; letter-spacing:1.5px; color:#7d9bff;} .mstage h4{font-family:"Geist",sans-serif; font-size:15.5px; color:#fff; margin:3px 0 2px;} .mstage p{font-size:13px; color:#8e97ad; margin:0; font-family:"Geist",sans-serif;} .mhand{text-align:center; font-family:"Geist",sans-serif; font-size:11px; letter-spacing:1.5px; color:#5d6478; margin:2px 0;} .mfun{display:flex; justify-content:space-between; font-family:"Geist",sans-serif; font-size:12.5px; color:#8fa8e8; margin-top:14px; padding:10px 6px; border-top:1px solid #2e3a5c;} .marc{border-left:3px solid var(--blue); border-radius:0; padding:8px 0 8px 14px; margin:10px 0;} .marc b{font-family:"Geist",sans-serif; font-size:14.5px; color:var(--ink); display:block;} .marc span{font-size:13px; color:var(--mut); font-family:"Geist",sans-serif;} /* === integration fixes (INT-v03) === */ :root{--accent:#1061FF; --gray:#6b6b76; --leak:#c0392b; --go:#1e8a5a; --paper:#fbfaf8; --faint:#f4f3f0;} .wip{position:static !important;} .progress{top:0 !important;} #scrolly-map{margin:0;} /* the heading shares the counters' 1240px container - in .wrap (920px) it sat 160px to the right of the first column, which is what made the band look misaligned */ .statband .bandhead{max-width:1240px; margin:0 auto; padding:0 24px;} .statband .eyebrow{display:block; font-family:"Geist",sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:#6d8cff; margin-bottom:9px;} .statband .bh{font-family:"Geist",sans-serif; font-size:20px; font-weight:600; letter-spacing:-.01em; color:#f2f4f9; margin:0; line-height:1.28;} .statband .counter p{color:#b9c0d2;} .statband .counter .src{margin-top:12px;} .statband .counters{margin:24px auto 8px; gap:22px; flex-wrap:nowrap;} .statband .counter{min-width:0; flex:1 1 0;} @media (max-width:900px){.statband .counters{flex-wrap:wrap;} .statband .counter{min-width:220px;}} section[id], .assess{scroll-margin-top:72px;} /* === integrated add-ons === */ .ctarow{display:flex; flex-wrap:wrap; gap:12px; margin-top:36px;} .ctarow .cta{display:inline-block; background:#1061FF; color:#fff; border-radius:999px; padding:13px 24px; text-decoration:none; font-family:"Geist",sans-serif; font-size:15px; font-weight:700; border:0;} .ctarow .cta.ghost{background:transparent; border:1px solid #3a3e4d; color:#c9ccd8;} .scrollcue2{margin-top:40px; font-family:"Geist",sans-serif; font-size:12px; color:#8a90a3; letter-spacing:.15em; text-transform:uppercase; animation:bob2 2s ease-in-out infinite;} @keyframes bob2{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}} @media (prefers-reduced-motion: reduce){.scrollcue2{animation:none;}} .scrollcue2 a{color:#7d9bff; text-decoration:none;} #rail{position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(255,255,255,.95); backdrop-filter:blur(8px); border-bottom:1px solid #e3e3e8; transform:translateY(-110%); transition:transform .25s ease;} #rail.on{transform:translateY(0);} #rail .rwrap{max-width:1020px; margin:0 auto; display:flex; align-items:center; gap:4px; padding:8px 14px; overflow-x:auto;} #rail .rlabel{font-family:"Geist",sans-serif; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#8a90a3; margin-right:8px; white-space:nowrap;} #rail a{font-family:"Geist",sans-serif; font-size:12.5px; text-decoration:none; color:#5a6270; padding:5px 11px; border-radius:999px; white-space:nowrap; border:1px solid transparent;} #rail a .rn{font-weight:700; margin-right:2px;} #rail a.act{color:#fff; background:#1061FF;} @media(max-width:700px){#rail a .rt{display:none;}} /* === INT-v09: info popups, card variants === */ .term{border-bottom:1px dotted currentColor; cursor:pointer; -webkit-tap-highlight-color:transparent;} svg tspan.term{text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px;} .term:hover{color:var(--blue);} #scrolly-map .term:hover{color:var(--blue-soft);} .popbg{position:fixed; inset:0; background:rgba(14,14,16,.52); z-index:260; display:none; align-items:center; justify-content:center; padding:20px;} .popbg.on{display:flex;} .popcard{background:#fff; color:var(--ink); border-radius:14px; max-width:440px; width:100%; padding:24px 26px 20px; box-shadow:0 18px 60px rgba(10,15,40,.35); position:relative; font-size:15.5px; line-height:1.65; max-height:82vh; overflow:auto;} .popcard h5{font-family:"Geist",sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin:0 34px 10px 0;} .popcard p{margin:0 0 12px; font-size:15.5px; color:#2a2f3a;} .popcard p:last-child{margin-bottom:0;} .popcard .popx{position:absolute; top:8px; right:10px; border:0; background:none; font-size:22px; line-height:1; color:var(--mut); cursor:pointer; padding:8px; font-family:"Geist",sans-serif;} #scrolly-map .step .card.light, #scrolly-map .mslot .card.light{background:rgba(255,255,255,.97); border:1px solid var(--line); color:#2a2f3a;} #scrolly-map .step .card.light b, #scrolly-map .mslot .card.light b{color:#16181d;} /* === INT-v10: hover tooltips (desktop only; touch keeps tap overlay) === */ .term:focus-visible{outline:2px solid var(--blue); outline-offset:2px; border-radius:2px;} #scrolly-map .term:focus-visible{outline-color:var(--blue-soft);} @media (hover:hover) and (pointer:fine){ .tipwrap{position:fixed; left:0; top:0; z-index:280; width:max-content; max-width:340px; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease, visibility 0s linear .12s;} .tipwrap.wide{max-width:420px;} .tipwrap.on{opacity:1; visibility:visible; transition:opacity .12s ease;} .tipcard{background:#fff; border:1px solid #e3e8f4; border-radius:12px; box-shadow:0 14px 44px rgba(10,15,40,.16); padding:14px 16px 13px; font-family:system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;} .tipcard h5{font-family:"Geist",sans-serif; font-size:13px; font-weight:600; letter-spacing:0; text-transform:none; color:#1061FF; margin:0 0 6px;} .tipcard p{font-size:13.5px; line-height:1.5; color:#2a2f3a; margin:0 0 8px;} .tipcard p:last-child{margin-bottom:0;} .tipcard p.src{font-size:12px; color:#8a90a3;} .tiparrow{position:absolute; bottom:-6px; left:50%; width:11px; height:11px; margin-left:-6px; background:#fff; border:1px solid #e3e8f4; border-top:0; border-left:0; transform:rotate(45deg);} .tipwrap.below .tiparrow{bottom:auto; top:-6px; border:1px solid #e3e8f4; border-bottom:0; border-right:0;} .tipwrap.darkv .tipcard{background:#1c2030; border-color:#2e3a5c; box-shadow:0 14px 44px rgba(0,0,0,.55);} .tipwrap.darkv .tipcard h5{color:#7d9bff;} .tipwrap.darkv .tipcard p{color:#c9ccd8;} .tipwrap.darkv .tipcard p.src{color:#8a90a3;} .tipwrap.darkv .tiparrow{background:#1c2030; border-color:#2e3a5c;} @media (prefers-reduced-motion: reduce){.tipwrap{transition:none;}} } /* ===== Orin B2B Audit (v2) — a guide dizájn-tokenjeire hangolva ===== */ #assessment .ab-card{ --ab-sans:"Geist",sans-serif; --ab-serif:"Geist",sans-serif; background:var(--card);color:var(--ink);border-radius:16px;margin:34px 0 0;overflow:hidden; box-shadow:0 18px 50px -24px rgba(10,14,24,.55);text-align:left; font-family:var(--ab-serif);font-size:17px;line-height:1.62} /* a guide globális elem-szabályai a kártyán belül */ #assessment .ab-card h2,#assessment .ab-card h3,#assessment .ab-card h4{ font-family:var(--ab-sans);letter-spacing:-.01em;margin:0} #assessment .ab-card p{margin:0} #assessment .ab-card ul{margin:0;padding:0;list-style:none} #assessment .ab-card a{color:var(--blue)} #assessment .ab-card button,#assessment .ab-card input,#assessment .ab-card select{ font-family:var(--ab-sans)} /* --- fejrész: haladó sáv --- */ #assessment .ab-card > .ab-pstage{display:flex;gap:8px;padding:22px 30px; border-bottom:1px solid var(--line);margin:0} #assessment .ab-card .ab-psg{flex:1;height:6px;border-radius:99px;background:#e6ecf9;overflow:hidden} #assessment .ab-card .ab-psg i{display:block;height:6px;width:0;border-radius:99px; background:var(--blue-soft);transition:width .35s} #assessment .ab-card .ab-psg.ab-act i,#assessment .ab-card .ab-psg.ab-done i{background:var(--blue)} #assessment .ab-card > .ab-body{padding:28px 30px 30px} /* --- kérdés --- */ #assessment .ab-card .ab-slab{display:flex;align-items:baseline;gap:10px;margin:0 0 14px; font-family:var(--ab-sans)} #assessment .ab-card .ab-slab b{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; color:var(--blue-soft);font-weight:700} #assessment .ab-card .ab-slab span{font-size:12px;color:#9aa3b5;font-variant-numeric:tabular-nums} #assessment .ab-card h4{font-size:22px;line-height:1.32;font-weight:700;margin:0 0 20px;color:var(--ink)} #assessment .ab-card .ab-opts{display:flex;flex-direction:column;gap:8px} #assessment .ab-card .ab-opt{display:flex;gap:13px;align-items:flex-start;width:100%;text-align:left; background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 17px;cursor:pointer; font-family:var(--ab-serif);font-size:16.5px;line-height:1.5;color:var(--ink); transition:border-color .16s,background .16s,box-shadow .16s} #assessment .ab-card .ab-opt:hover{border-color:var(--blue-soft);background:var(--pale)} #assessment .ab-card .ab-opt .ab-mk{flex:none;width:18px;height:18px;border-radius:50%; border:1.5px solid #c3ccdd;margin-top:5px;display:flex;align-items:center;justify-content:center; box-sizing:border-box;transition:.16s} #assessment .ab-card .ab-opt .ab-mk::after{content:"";width:6px;height:6px;border-radius:50%; background:#fff;transform:scale(0);transition:.18s} #assessment .ab-card .ab-opt.ab-sel{border-color:var(--blue);background:var(--pale); box-shadow:0 0 0 3px rgba(26,86,255,.10)} #assessment .ab-card .ab-opt.ab-sel .ab-mk{border-color:var(--blue);background:var(--blue)} #assessment .ab-card .ab-opt.ab-sel .ab-mk::after{transform:scale(1)} /* --- forrásolt tény --- */ #assessment .ab-card .ab-fact{margin:18px 0 0;padding:0 16px;max-height:0;overflow:hidden;opacity:0; background:#f3f8f5;border:1px solid transparent;border-radius:12px;font-size:15.5px;line-height:1.55; color:#2c5c47;transition:max-height .4s,opacity .3s,padding .4s,border-color .3s} #assessment .ab-card .ab-fact.ab-on{max-height:240px;opacity:1;padding:14px 16px;border-color:#cfe4d8} #assessment .ab-card .ab-fact b{display:block;font-family:var(--ab-sans);font-size:11px; letter-spacing:.11em;text-transform:uppercase;color:#3f8e69;margin:0 0 6px;font-weight:700} #assessment .ab-card .ab-fact s{text-decoration:none;color:#7a9a8a;font-size:14px} /* --- navigáció --- */ #assessment .ab-card .ab-nav{display:flex;align-items:center;gap:12px;margin:26px 0 0;padding:20px 0 0; border-top:1px solid var(--line)} #assessment .ab-card .ab-nav .ab-sp{flex:1} #assessment .ab-card .ab-btn{display:inline-block;background:var(--blue);color:#fff;border:0; border-radius:999px;padding:12px 26px;font-family:var(--ab-sans);font-weight:700;font-size:15px; cursor:pointer;transition:.16s} #assessment .ab-card .ab-btn:hover{filter:brightness(1.08)} #assessment .ab-card .ab-btn.ab-gh{background:#fff;color:var(--mut);border:1px solid var(--line)} #assessment .ab-card .ab-btn.ab-gh:hover{border-color:var(--blue-soft);color:var(--blue);filter:none} #assessment .ab-card .ab-btn.ab-gh[disabled]{opacity:.35;cursor:not-allowed} #assessment .ab-card .ab-stepn{font-family:var(--ab-sans);font-size:13px;color:#9aa3b5; font-variant-numeric:tabular-nums;font-weight:600} /* --- kiértékelés --- */ #assessment .ab-card .ab-fin{padding:52px 30px 46px;text-align:center} #assessment .ab-card .ab-fin h3{font-size:26px;font-weight:700;margin:0 0 12px} #assessment .ab-card .ab-fin p{color:var(--mut);font-size:17px;margin:0 auto 26px;max-width:460px;line-height:1.6} #assessment .ab-card .ab-spin{width:34px;height:34px;border-radius:50%;border:3px solid var(--line); border-top-color:var(--blue);margin:0 auto 22px;animation:ab-sp .7s linear infinite} @keyframes ab-sp{to{transform:rotate(360deg)}} #assessment .ab-card .ab-calcl{max-width:270px;margin:0 auto;text-align:left;min-height:116px} #assessment .ab-card .ab-redo{margin:20px 0 0;font-size:14px} #assessment .ab-card .ab-redo a{color:#9aa3b5;text-decoration:underline;cursor:pointer} /* --- eredmény: fejléc --- */ #assessment .ab-card .ab-res{padding:30px 30px 30px} #assessment .ab-card .ab-hd{display:flex;gap:16px;align-items:center;margin:0 0 16px} #assessment .ab-card .ab-cnum{flex:none;width:58px;height:58px;border-radius:15px;background:#fbeaea; color:#b04a4a;font-family:var(--ab-sans);font-size:28px;font-weight:700;display:flex; align-items:center;justify-content:center} #assessment .ab-card .ab-hd h3{font-size:25px;font-weight:700;line-height:1.2} #assessment .ab-card .ab-q0{font-size:16px;color:var(--mut);margin:0 0 16px;line-height:1.6} #assessment .ab-card .ab-q0 b{color:var(--ink);font-weight:700} #assessment .ab-card .ab-rec{font-family:var(--ab-sans);font-size:17.5px;font-weight:600; color:var(--ink);margin:0 0 24px;padding:0 0 0 16px;border-left:3px solid #c25a5a;line-height:1.5} /* --- eredmény: szakaszsáv (navigáció) --- */ #assessment .ab-card .ab-fbar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px; margin:0 0 24px;padding:0 0 24px;border-bottom:1px solid var(--line)} #assessment .ab-card .ab-fseg{appearance:none;border:0;background:none;padding:0;cursor:pointer; text-align:center;min-width:0;font-family:var(--ab-sans)} #assessment .ab-card .ab-fseg .ab-lb{font-size:11px;line-height:14px;height:28px;letter-spacing:.07em; text-transform:uppercase;font-weight:700;color:#b8bfcc;margin:0 0 8px;display:flex; align-items:flex-end;justify-content:center;transition:color .16s} #assessment .ab-card .ab-fseg .ab-rl{height:6px;border-radius:99px;background:#e6ecf9;transition:.16s} #assessment .ab-card .ab-fseg .ab-ct{font-size:11px;color:#c2c8d4;margin:8px 0 0;transition:color .16s} #assessment .ab-card .ab-fseg.ab-on .ab-rl{transform:scaleY(1.6)} #assessment .ab-card .ab-fseg.ab-on .ab-ct{color:#8a93a6} #assessment .ab-card .ab-fseg.ab-crit .ab-rl{background:#c25a5a;opacity:.5} #assessment .ab-card .ab-fseg.ab-crit .ab-lb{color:#c98d8d} #assessment .ab-card .ab-fseg.ab-crit.ab-on .ab-lb{color:#b04a4a} #assessment .ab-card .ab-fseg.ab-crit.ab-on .ab-rl{background:#c25a5a;opacity:1} #assessment .ab-card .ab-fseg.ab-warn .ab-rl{background:#c9a13f;opacity:.5} #assessment .ab-card .ab-fseg.ab-warn .ab-lb{color:#cdb27a} #assessment .ab-card .ab-fseg.ab-warn.ab-on .ab-lb{color:#8a6a1d} #assessment .ab-card .ab-fseg.ab-warn.ab-on .ab-rl{background:#c9a13f;opacity:1} #assessment .ab-card .ab-fseg.ab-good .ab-rl{background:#4a9b74;opacity:.5} #assessment .ab-card .ab-fseg.ab-good .ab-lb{color:#8bb9a3} #assessment .ab-card .ab-fseg.ab-good.ab-on .ab-lb{color:#2c7a56} #assessment .ab-card .ab-fseg.ab-good.ab-on .ab-rl{background:#4a9b74;opacity:1} /* --- kapu --- */ #assessment .ab-card .ab-gate{border:1px solid #c9d8ff;border-radius:16px;padding:24px 26px; background:var(--pale);margin:0 0 26px} #assessment .ab-card .ab-gate h4{font-size:20px;font-weight:700;margin:0 0 14px} #assessment .ab-card .ab-val li{position:relative;padding:0 0 0 27px;margin:0 0 10px;font-size:16px; line-height:1.5} #assessment .ab-card .ab-val li:before{content:"";position:absolute;left:0;top:6px;width:14px;height:8px; border-left:2.5px solid var(--blue);border-bottom:2.5px solid var(--blue);transform:rotate(-45deg)} #assessment .ab-card .ab-frm{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0} #assessment .ab-card .ab-frm input[type=email]{flex:1;min-width:230px;border:1px solid var(--line); border-radius:999px;padding:0 20px;height:48px;font-family:var(--ab-sans);font-size:15.5px;background:#fff} #assessment .ab-card .ab-frm input[type=email]:focus{outline:0;border-color:var(--blue); box-shadow:0 0 0 3px rgba(26,86,255,.12)} #assessment .ab-card .ab-frm .ab-btn{height:48px;padding:0 26px} #assessment .ab-card .ab-optin{display:flex;gap:10px;align-items:flex-start;margin:15px 0 0; font-size:14.5px;color:var(--mut);line-height:1.5;cursor:pointer} #assessment .ab-card .ab-optin input{accent-color:var(--blue);margin-top:3px;flex:none} #assessment .ab-card .ab-safe{display:flex;gap:10px;align-items:center;margin:16px 0 0;padding:15px 0 0; border-top:1px solid #d9e3fa;font-size:14.5px;color:#2c5c47} #assessment .ab-card .ab-safe .ab-sh{flex:none;display:flex;align-items:center} #assessment .ab-card .ab-consent{font-size:13.5px;color:#98a1b3;margin:10px 0 0;line-height:1.55} /* --- eredmény: szakaszpanelek --- */ #assessment .ab-card .ab-locked{transition:filter .3s,opacity .3s} #assessment .ab-card .ab-locked.ab-on{filter:blur(5px);opacity:.4;pointer-events:none;user-select:none} #assessment .ab-card .ab-pane{display:none} #assessment .ab-card .ab-pane.ab-on{display:block} #assessment .ab-card .ab-ph{display:flex;align-items:baseline;gap:11px;margin:0 0 6px} #assessment .ab-card .ab-ph b{font-family:var(--ab-sans);font-size:18px;font-weight:700} #assessment .ab-card .ab-tag{font-family:var(--ab-sans);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;font-weight:700;border-radius:5px;padding:4px 9px} #assessment .ab-card .ab-tag.ab-crit{background:#fbeaea;color:#b04a4a} #assessment .ab-card .ab-tag.ab-warn{background:#fdf3dd;color:#8a6a1d} #assessment .ab-card .ab-tag.ab-good{background:#e2f2ea;color:#2c7a56} #assessment .ab-card .ab-pl{font-size:15.5px;color:#8a93a6;margin:0 0 8px} #assessment .ab-card .ab-gi{display:flex;gap:14px;padding:17px 0;border-bottom:1px solid #f2f4f9} #assessment .ab-card .ab-gi:last-of-type{border-bottom:0} #assessment .ab-card .ab-gi .ab-d{flex:none;width:25px;height:25px;border-radius:8px;background:#eef2fa; color:var(--mut);font-family:var(--ab-sans);font-size:13px;font-weight:700;display:flex; align-items:center;justify-content:center;margin-top:2px} #assessment .ab-card .ab-pane.ab-crit .ab-gi .ab-d{background:#fbeaea;color:#b04a4a} #assessment .ab-card .ab-gi b{display:block;font-family:var(--ab-sans);font-size:17px;font-weight:700; margin:0 0 6px;line-height:1.35} #assessment .ab-card .ab-gi p{font-size:16px;color:var(--mut);line-height:1.6} #assessment .ab-card .ab-tg{margin:10px 0 0;padding:10px 13px;background:#f3f8f5;border-radius:10px; font-size:15px;color:#2c5c47;line-height:1.5} #assessment .ab-card .ab-tg i{font-style:normal;font-weight:700} #assessment .ab-card .ab-sg{display:flex;gap:12px;align-items:flex-start;margin:20px 0 2px; padding:15px 17px;background:#f3f8f5;border:1px solid #cfe4d8;border-radius:12px;font-size:15.5px; color:#2c5c47;line-height:1.55} #assessment .ab-card .ab-sg .ab-ic{flex:none;width:21px;height:21px;border-radius:50%;background:#cfe4d8; color:#2c7a56;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin-top:1px} #assessment .ab-card .ab-sg .ab-lbl{font-weight:700} /* --- CTA --- */ #assessment .ab-card .ab-cta{margin:28px 0 0;padding:26px 28px;background:var(--blue); border-radius:16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;color:#fff} #assessment .ab-card .ab-cta div{flex:1;min-width:240px} #assessment .ab-card .ab-cta b{display:block;font-family:var(--ab-sans);font-size:19px;font-weight:700;margin:0 0 6px} #assessment .ab-card .ab-cta p{font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.9)} #assessment .ab-card .ab-cta a{background:#fff;color:var(--blue);border-radius:999px;padding:13px 26px; font-family:var(--ab-sans);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap} @media(max-width:640px){ #assessment .ab-card > .ab-body{padding:22px 18px 24px} #assessment .ab-card > .ab-pstage{padding:18px 18px} #assessment .ab-card .ab-res{padding:22px 18px 24px} #assessment .ab-card .ab-fin{padding:40px 18px 36px} #assessment .ab-card h4{font-size:19.5px} #assessment .ab-card .ab-opt{font-size:15.5px;padding:13px 14px} #assessment .ab-card .ab-fseg .ab-lb{font-size:8.5px;letter-spacing:.02em;height:34px} #assessment .ab-card .ab-frm input[type=email]{min-width:100%} #assessment .ab-card .ab-frm .ab-btn{width:100%} #assessment .ab-card .ab-cta{padding:20px 18px} #assessment .ab-card .ab-cta a{width:100%;text-align:center} } /* === CH2 map — Option D stage cards (approved): HTML cards above the original SVG band === */ .optd-stage{display:none;} @media (min-width:901px){ #scrolly-map{grid-template-columns:1fr minmax(300px,410px) minmax(680px,1380px) 1fr;} #scrolly-map .sticky{flex-direction:column;} #scrolly-map .sticky svg{max-width:1380px;} .optd-stage{display:block;width:100%;max-width:1380px;font-family:'Inter',Helvetica,Arial,sans-serif;} .optd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:26px;} .optd-card{background:rgba(20,24,44,.7);border:1px solid #2e3a5c;border-radius:14px;padding:18px 20px;position:relative;box-shadow:0 18px 40px -22px rgba(0,0,0,.65);opacity:.55;transition:opacity .6s;} .optd-card::before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(160deg,rgba(125,155,255,.07),transparent 45%);pointer-events:none;} .optd-card .eyebrow{font-family:"Geist",sans-serif;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#7d9bff;font-weight:600;margin:0 0 10px;} .optd-card h3{font-family:"Geist",sans-serif;font-weight:600;font-size:17px;color:#eef1fa;margin:0 0 2px;line-height:1.3;letter-spacing:-.005em;} .optd-card h3 .en{display:block;font-family:'Inter',Helvetica,Arial,sans-serif;font-weight:400;font-size:11.5px;color:#7b849c;letter-spacing:.01em;margin-top:2px;} .optd-card .sub{font-size:12.5px;color:#aab2c8;margin:0 0 12px;line-height:1.4;} .optd-card ul{list-style:none;margin:0;padding:0;} .optd-card ul li{position:relative;padding-left:16px;font-size:13px;line-height:1.45;margin:0 0 7px;color:#aab2c8;max-width:none;overflow-wrap:break-word;} .optd-card ul li::before{content:"\2731";position:absolute;left:0;top:0;color:#7d9bff;font-size:10px;line-height:1.9;} .optd-card.cs{background:rgba(23,51,38,.7);border-color:#2e5c46;} .optd-card.cs::before{background:linear-gradient(160deg,rgba(111,227,165,.08),transparent 45%);} .optd-card.cs .eyebrow{color:#6fe3a5;} .optd-card.cs ul li{font-size:12.5px;line-height:1.42;margin-bottom:6px;} .optd-card.cs ul li::before{color:#6fe3a5;} /* scrolly state mirroring — driven by existing data-ms set in setMap; band/leak/flywheel states stay on the original SVG (.on via JS) */ #scrolly-map[data-ms="1"] .optd-c1, #scrolly-map[data-ms="2"] .optd-c2, #scrolly-map[data-ms="3"] .optd-c3, #scrolly-map[data-ms="4"] .optd-c4, #scrolly-map[data-ms="6"] .optd-c1,#scrolly-map[data-ms="6"] .optd-c4{opacity:1;} #scrolly-map[data-ms="5"] .optd-card{opacity:.3;} } @media (min-width:901px) and (prefers-reduced-motion: reduce){ .optd-card{transition:none;} } /* === CH2 tracker: clickable pill-bar section tracker above the stage cards (desktop scrolly only) === */ .ch2-tracker{display:none;} @media (min-width:901px){ .ch2-tracker{display:flex; flex-wrap:nowrap; gap:8px; justify-content:center; width:100%; max-width:1380px; margin:0 auto 22px;} .ch2-tracker .ch2-pill{font-family:"Geist",sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.04em; color:#aab2c8; background:rgba(20,20,26,.6); border:1px solid #2b2b33; border-radius:999px; padding:6px 12px; cursor:pointer; transition:border-color .25s, color .25s, background .25s; white-space:nowrap;} .ch2-tracker .ch2-pill .pn{color:var(--blue-soft); font-weight:600; margin-right:6px;} .ch2-tracker .ch2-pill:hover{border-color:#3d4b73; color:#fff;} .ch2-tracker .ch2-pill.on{border-color:var(--blue); background:rgba(26,86,255,.16); color:#fff;} .ch2-tracker .ch2-pill:focus-visible{outline:2px solid var(--blue-soft); outline-offset:2px;} /* divider + slightly wider gaps before the two un-numbered steps */ .ch2-tracker .ch2-div{align-self:center; width:1px; height:16px; background:#5a6178; margin:0 8px;} .ch2-tracker .ch2-pill.alt.on{border-color:#fff; background:#fff; color:#16181d;} /* white active = the white narration cards these two open */ } @media (min-width:901px) and (max-width:1379px){ .ch2-tracker{flex-wrap:wrap;} /* narrow desktop: sticky column can drop below ~830px — allow a second row instead of overflow */ } @media (min-width:901px) and (prefers-reduced-motion: reduce){ .ch2-tracker .ch2-pill{transition:none;} } /* === sources reveal (paywall-style) === */ #forrasok .wrap > p, #forrasok .srcs li{max-width:none} #forrasok .reveal-body{position:relative} #forrasok .reveal-clip{position:relative; overflow:hidden; transition:max-height .62s cubic-bezier(.22,.61,.36,1)} #forrasok .fadeveil{position:absolute; left:0; right:0; bottom:0; height:190px; pointer-events:none; background:linear-gradient(to bottom, rgba(242,246,255,0) 0%, rgba(242,246,255,.72) 42%, rgba(242,246,255,.97) 78%, var(--pale) 100%); opacity:1; transition:opacity .45s ease} #forrasok .reveal.open .fadeveil{opacity:0} #forrasok .reveal-ctrl{margin-top:18px; text-align:center} #forrasok .revbtn{display:inline-flex; align-items:center; gap:9px; font-family:"Geist",sans-serif; font-size:14.5px; font-weight:500; color:#fff; background:var(--blue); border:0; border-radius:999px; padding:12px 24px; cursor:pointer; box-shadow:0 6px 20px rgba(26,86,255,.22); transition:filter .2s ease} #forrasok .revbtn:hover{filter:brightness(1.08)} #forrasok .revbtn .arrow{display:inline-block; transition:transform .3s ease} #forrasok .reveal.open .revbtn .arrow{transform:rotate(180deg)} #forrasok .revbtn:focus-visible{outline:2px solid var(--blue); outline-offset:3px} #forrasok .reveal.open .reveal-clip .srcs li{opacity:1} @media (prefers-reduced-motion: reduce){ #forrasok .reveal-clip{transition:none} #forrasok .fadeveil{transition:none} #forrasok .revbtn .arrow{transition:none} } @media (max-width:900px){ .hero h1 br, .hero .curator br{display:none} } /* ======================== Part 2 ======================== */ /* ===== B2B guide — design alignment with the home page (approved as preview B, 6 Oct) ===== Foundations from the home page: Clash Grotesk 600 headings, Geist for text and interface, #1061FF, black dark bands, 20 px cards, the site's button pair (white primary / glass secondary on dark; blue on light). */ /* 1 · type: headings in Clash Grotesk (the rest is Geist, written into the rules above) */ h1,h2,h3,.statband .bh,.counter .big{font-family:"Clash Grotesk","Geist",sans-serif!important;font-weight:600!important;letter-spacing:-.015em} h1{font-size:clamp(36px,5vw,60px)!important;line-height:1.04!important} h2{font-size:clamp(28px,3.4vw,44px)!important;line-height:1.08!important} h3{font-size:clamp(21px,2.3vw,26px)} .kicker,.kicker2,.statband .eyebrow{font-family:"Geist",sans-serif!important;font-weight:600;letter-spacing:.14em!important;color:var(--blue)} .dark .kicker,.dark .kicker2,.assess .kicker2,.statband .eyebrow{color:#8fb3ff!important} /* 2 · hero as the home page's card: the bar inside it, a blue/teal glow, eyebrow pill, meta chips, site buttons */ #top.hero{width:min(calc(100% - 24px),92%);margin:12px auto 0;border-radius:28px;padding-bottom:72px; background:radial-gradient(60% 80% at 88% 0%,rgba(16,97,255,.42),rgba(16,97,255,0) 62%),radial-gradient(40% 55% at 6% 100%,rgba(51,184,151,.14),rgba(51,184,151,0) 70%),#05070C; box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.22)} /* the card sits on black, as the home hero does (the page under the guide is white) */ #top.hero{position:relative} .hero .kicker{display:inline-flex!important;align-items:center;height:34px;padding:0 15px;border-radius:999px;margin-bottom:30px!important; background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:500 13px/1 "Geist",sans-serif!important;letter-spacing:.01em!important;text-transform:none;color:rgba(255,255,255,.86)!important} .hero h1{color:#fff} .hero p.lede{font-size:19px!important;color:rgba(255,255,255,.72)!important} .curator{border-left:0!important;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);border-radius:16px;padding:18px 22px!important;color:rgba(255,255,255,.8)!important;font-size:16px!important} .hero .meta{display:flex;flex-wrap:wrap;gap:8px;font-family:"Geist",sans-serif!important;letter-spacing:0!important} .hero .meta span:not(.metasep){display:inline-flex;align-items:center;height:32px;padding:0 13px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font:500 13px/1 "Geist",sans-serif;color:#fff;white-space:nowrap} .hero .metasep{display:none!important} .cta{border-radius:8px!important;font:500 15px/1 "Geist",sans-serif!important;letter-spacing:-.2px;padding:16px 20px!important} .hero .cta:not(.ghost),.assess .cta:not(.ghost),.dark .cta:not(.ghost){background:#fff!important;color:#000!important} .hero .cta.ghost,.dark .cta.ghost{background:rgba(255,255,255,.13)!important;border:0!important;color:#fff!important} /* 3 · section rhythm: black for the showcase bands, white for reading, the site's soft grey-blue for panels */ .dark,.assess{background:#000!important} .step .card,.quiz,.ctacard,.explorer>div,.roles>*,.cat{border-radius:20px!important} .dark .step .card{background:linear-gradient(180deg,#151619 0%,#0f1012 100%)!important;border:0!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.08)!important} .quiz{background:#fff!important;border:0!important;box-shadow:0 0 0 1px var(--line),0 30px 60px -30px rgba(15,22,38,.25)} .tab{border-radius:12px!important;font-family:"Geist",sans-serif!important} .opt{font-family:"Geist",sans-serif!important;border-radius:12px!important} .counter{border-top:2px solid #1061FF!important} .counter .big{font-size:64px!important} .ctacard.blue{background:linear-gradient(160deg,#2B76FF 0%,#1061FF 45%,#0A3FBF 100%)!important} .stickycta{background:#1061FF!important;border-radius:10px!important;font-family:"Geist",sans-serif!important} /* 4 · the chapter bar on scroll looks like the site's menu bar: dark glass, white active pill */ #rail{background:rgba(0,0,0,.72)!important;backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);border-bottom:0!important} #rail a{color:rgba(255,255,255,.72)!important} #rail a.act{background:#fff!important;color:#000!important} #rail .rlabel{color:rgba(255,255,255,.45)!important} #rail .rwrap{scrollbar-width:none} #rail .rwrap::-webkit-scrollbar{display:none} /* 5 · the audit card: interface text in Geist (it inherited the serif) */ #assessment .ab-card,#assessment .ab-card *:not(h1):not(h2):not(h3):not(svg):not(path){font-family:"Geist",sans-serif!important} /* phones: the eyebrow may wrap, so it becomes a rounded box instead of a squeezed pill */ @media (max-width:640px){.hero .kicker{height:auto!important;padding:8px 14px!important;line-height:1.4!important;border-radius:14px!important}} /* ===== 6 · phones and tablets (Adam, 6 Oct: "mobile was never finalised") ===== */ /* 6a · system map, all widths: one card style for every step (the "Fontos" card was white) */ #scrolly-map .step .card.light,#scrolly-map .mslot .card.light{background:linear-gradient(180deg,#101a33 0%,#0c1226 100%)!important;color:rgba(255,255,255,.82)!important; border:0!important;box-shadow:inset 0 0 0 1px rgba(16,97,255,.45),inset 0 1px 0 rgba(255,255,255,.1)!important} #scrolly-map .step .card.light b,#scrolly-map .mslot .card.light b{color:#fff!important} @media (max-width:1199.98px){ /* 6b · system map on phones, tablets and small laptops (the desktop map needs ~1,150 px and ran off a 1,024 px screen): no sticky mini-diagram with 7 px labels over half-hidden cards. The stages read top to bottom as one connected flow: stage header + its text in one card, the hand-offs between them, then the lead funnel as bars, then the flywheel. Same words, same order. */ #scrolly-map .msticky,#scrolly-map .steps{display:none!important} #scrolly-map .mobilemap{display:block!important;max-width:560px;margin:0 auto;padding:12px 16px 40px} #scrolly-map .mstage{margin:0!important;border:0!important;border-radius:20px 20px 0 0;padding:20px 20px 4px!important; background:linear-gradient(180deg,#141d36 0%,#111419 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(255,255,255,.08)} #scrolly-map .mstage .mk{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:rgba(16,97,255,.18); color:#8fb3ff!important;font:600 11px/1 "Geist",sans-serif!important;letter-spacing:.12em!important} #scrolly-map .mstage[style*="2e5c50"] .mk{background:rgba(51,184,151,.16);color:#5fd3ad!important} #scrolly-map .mstage[style*="2e5c50"]{background:linear-gradient(180deg,#0f2a24 0%,#111419 100%)} #scrolly-map .mstage h4{font:600 22px/1.15 "Clash Grotesk","Geist",sans-serif!important;letter-spacing:-.01em;margin:12px 0 4px!important;color:#fff} #scrolly-map .mstage p{font:400 14px/1.4 "Geist",sans-serif!important;color:rgba(255,255,255,.55)!important} #scrolly-map .mslot .card{margin:0!important;border:0!important;border-radius:0 0 20px 20px!important;padding:14px 20px 22px!important; background:#111419!important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08),inset 1px 0 0 rgba(255,255,255,.08),inset -1px 0 0 rgba(255,255,255,.08)!important; font-size:15.5px!important;line-height:1.6!important;color:rgba(255,255,255,.78)!important} #scrolly-map .mslot .card b{color:#fff} #scrolly-map .mslot .card .cnum{display:none} /* the hand-off between two stages: the label (its own words) as a pill on a short connecting line */ #scrolly-map .mhand{position:relative;width:fit-content;margin:26px auto!important;padding:0 12px!important;height:26px;display:flex;align-items:center;border-radius:999px; background:#160f0d;box-shadow:inset 0 0 0 1px rgba(224,118,92,.5);font:600 10.5px/1 "Geist",sans-serif!important;letter-spacing:.1em!important;color:#f0a08c!important} #scrolly-map .mhand::before,#scrolly-map .mhand::after{content:"";position:absolute;left:50%;width:1.5px;height:26px;transform:translateX(-50%)} #scrolly-map .mhand::before{bottom:100%;background:linear-gradient(#2a3350,#e0765c)} #scrolly-map .mhand::after{top:100%;background:linear-gradient(#e0765c,#2a3350)} /* the lead funnel: bars that shrink from stage to stage */ #scrolly-map .mfun{display:flex!important;flex-direction:column;gap:8px;margin:34px 0 18px!important;padding:18px!important;border:0!important;border-radius:20px; background:#0b0d12;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} #scrolly-map .mfun span{position:relative;display:flex;align-items:center;height:34px;padding:0 12px;border-radius:8px;white-space:nowrap; font:600 14px/1 "Geist",sans-serif!important;color:#fff} #scrolly-map .mfun span:nth-child(1){width:100%;background:#1f3f99} #scrolly-map .mfun span:nth-child(2){width:62%;background:#1a3480} #scrolly-map .mfun span:nth-child(3){width:40%;background:#172c69;min-width:110px} #scrolly-map .mfun span:nth-child(4){width:30%;min-width:140px;background:#1f8a63} #scrolly-map .mloop{margin:28px 0 12px!important;font:600 11px/1 "Geist",sans-serif!important;letter-spacing:.12em!important;color:#5fd3ad!important} #scrolly-map .mslot[data-src="5"] .card,#scrolly-map .mslot[data-src="6"] .card{border-radius:20px!important;padding:20px!important} #scrolly-map .mslot[data-src="6"] .card{background:linear-gradient(180deg,#0f2a24 0%,#0e1714 100%)!important;box-shadow:inset 0 0 0 1px rgba(51,184,151,.4)!important} #scrolly-map{display:block!important;padding:0!important} #scrolly-map .sticky{display:none!important} #scrolly-map .mobilemap{max-width:620px!important} } @media (max-width:900px){ /* 6c · growth curve: shorter gaps between the cards, a calmer sticky chart */ #scrolly-arc .step{margin-bottom:7vh!important} #scrolly-arc .step .card{border-radius:16px!important;border:0!important;box-shadow:0 0 0 1px var(--line),0 18px 40px -24px rgba(15,22,38,.3)!important} /* 6d · team models: one sideways row instead of six wrapped pills */ /* team models (Adam, 6 Oct: the sideways row looked cut off): all six buttons visible in a two-column grid */ .mswitch .tbar{display:grid!important;grid-template-columns:1fr 1fr;gap:8px!important;margin:0 0 22px!important} .mswitch .tb{border-radius:12px!important;font-family:"Geist",sans-serif!important;text-align:left;padding:11px 14px!important;line-height:1.3;white-space:normal} /* 6e · key numbers: a sideways row of cards (five full-height blocks were 1,470 px of scrolling) */ .statband .counters{flex-wrap:nowrap!important;flex-direction:row!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px!important; margin:24px 0 8px!important;padding:0 20px 8px!important;scrollbar-width:none} .statband .counters::-webkit-scrollbar{display:none} .statband .counter{flex:0 0 78%!important;min-width:0!important;scroll-snap-align:start;scroll-margin-left:20px;padding:18px 18px 16px!important;border-radius:16px; background:#0c0d10;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);border-top:0!important;position:relative} .statband .counter::before{content:"";position:absolute;left:18px;right:18px;top:0;height:2px;background:#1061FF} } @media (min-width:641px) and (max-width:900px){ /* 6j · tablets: intro box and sticker side by side (the sticker stood alone in the middle), two number cards per view */ #top .curatorrow{display:flex!important;align-items:center;gap:24px} #top .curator{flex:1 1 auto;margin-top:0!important} #top .hero-sticker{flex:0 0 150px;width:150px!important;margin:0!important;transform:rotate(-4deg)!important} .statband .counter{flex-basis:46%!important} } @media (max-width:640px){ /* 6f · hero: the sticker sits next to the two buttons instead of alone between the intro box and the chips */ #top .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:4px;align-items:start} #top .wrap>*{grid-column:1 / -1} #top .curatorrow{display:contents} #top .kicker{grid-row:1;justify-self:start} #top h1{grid-row:2} #top .lede{grid-row:3} #top .curator{grid-row:4;grid-column:1 / -1} #top .meta{grid-row:5} #top .ctarow{grid-row:6;grid-column:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px} #top .ctarow .cta{white-space:nowrap} #top .hero-sticker{grid-row:6;grid-column:2;align-self:center;width:108px!important;margin:0 -8px 0 0!important;transform:rotate(-6deg)!important} #top .scrollcue2{grid-row:7} #top .meta span:not(.metasep){height:auto!important;min-height:32px;padding:8px 13px!important;white-space:normal!important;line-height:1.3!important} /* 6g · the five growth levels: label above the title, so the text gets the full width */ .lvl summary{display:grid!important;grid-template-columns:1fr auto;gap:10px 12px!important;padding:18px!important} .lvl .n{justify-self:start;margin-top:0!important} .lvl summary>div{grid-column:1 / -1;grid-row:2} .lvl summary>.chevwrap{grid-column:2;grid-row:1;width:32px!important;height:32px!important;flex:none!important} /* 6h · stage explorer: a little more room for the text inside the card */ .explorer .panel,.explorer>div:not(.tabs){padding-left:18px!important;padding-right:18px!important} /* 6i · the floating audit button: a full-width bar at the bottom, easy to hit with a thumb */ .stickycta{left:12px!important;right:12px!important;bottom:calc(12px + env(safe-area-inset-bottom))!important;text-align:center;padding:14px 16px!important;font-size:15px!important} } /* B: option B only — the reading text in Geist too (the home page has no serif) */ body{font-size:18px;line-height:1.68;letter-spacing:-.005em} /* audit gate: an e-mail address is needed to open the details (launch, 6 Oct) */ #assessment .ab-card .ab-frm input.ab-err{box-shadow:0 0 0 2px #e0765c!important;border-color:#e0765c!important} /* ======================== Review round 2 (6 Oct): fixes from Adam's screenshots and the full-page review ======================== */ /* hero, laptops and wider: the text starts under the OrinGroup logo, as on the home page (it sat in the 920 px column, 164 px right of the logo on wide screens); the intro box and sticker stay together */ @media (min-width:1200px){ #top .wrap{max-width:min(1200px, calc(100% - 20px));padding:0 15px;margin:0 auto} #top h1,#top .lede{max-width:880px} #top .curatorrow{max-width:880px} } /* chapter headings: the hidden line breaks only fitted the old font ("igényel -" / "a legjobbaktól is") */ h2 br{display:none} /* chapter 1: the big 1 and 2 were nearly invisible */ .pt .ptn{font-family:"Clash Grotesk","Geist",sans-serif!important;color:#1061FF!important;opacity:.85} /* chapter 3: the "Hol hibázik" box in the site's palette (was red) */ .fail,.panel .fail{background:#FFF5F1!important;border-left:3px solid #e0765c!important;color:#3a3f4b!important;border-radius:0 12px 12px 0} /* chapter 5: the two boxes no longer stick out past the text column; group colours blue and teal (were yellow and green) */ .cats{width:auto!important} .cat.fnd::before{background:#1061FF!important} .cat.bld::before{background:#33B897!important} /* "Két út innen": the Bootcamp date as a chip above the title, the button in the site's shape */ .ctacard{display:flex;flex-direction:column;align-items:flex-start} .ctacard .note{order:-1;display:inline-flex;align-items:center;height:30px;padding:0 12px;margin:0 0 14px!important;border-radius:999px; background:#F1F5FF;color:#1061FF!important;font:600 13px/1 "Geist",sans-serif!important} .btn,.btn.ghost{border-radius:8px!important;font-weight:500!important} /* system map, laptops: the steps and the diagram in one 1,200 px block, in line with the rest of the page (the cards sat 48 px from the window edge); a third less scrolling between steps */ @media (min-width:1200px){ #scrolly-map{grid-template-columns:1fr minmax(300px,380px) minmax(0,776px) 1fr!important} #scrolly-map .sticky svg{max-width:776px!important} #scrolly-map .step{min-height:46vh!important} } /* growth curve, laptops: the cards and the chart as one centred pair (the cards touched the left window edge) */ @media (min-width:901px){ #scrolly-arc{--figw:min(800px, 100vw - 444px)!important;--gap:32px!important; --figx:calc(50vw - (412px + var(--figw)) / 2 + 412px)!important} } /* chapter 6, phones: the small bar chart only repeats the five levels listed right under it, and its labels were unreadable */ @media (max-width:640px){ .levels{margin-top:8px} div.reveal:has(> svg[viewBox="0 0 900 208"]){display:none} } /* key numbers, 900-1,300 px windows: "25–95%" no longer runs past the window at 64 px */ @media (min-width:901px){ .counter .big{font-size:clamp(44px, 4.6vw, 64px)!important} .counter{min-width:0!important} } /* ============================================================================================================ Chapter 2, laptop (1,200 px and wider): ribbon funnel with "gates" at the hand-offs (Adam, 7 Oct 2026). The original drawing (svg#engine) is hidden at this width; the script at the end of the guide draws the ribbon under the four stage cards, measured against them. Phones and tablets keep the original layout. Made from docs/ch2_funnel_options.py (spacing) and docs/ch2_handoff_options.py (ribbon, variant 2). ============================================================================================================ */ @media (min-width:1200px){ /* the original two-column structure, in a calmer frame: 56 px between text and diagram, 40 px page margins */ #scrolly-map{grid-template-columns:minmax(300px,380px) minmax(0,1240px)!important;justify-content:center;gap:0 clamp(32px,4vw,56px)!important;padding:0 clamp(24px,3vw,40px)!important} #scrolly-map .steps{grid-column:1!important} #scrolly-map .sticky{grid-column:2!important} #scrolly-map .sticky svg#engine{display:none!important} /* the pinned diagram sits just under the chapter bar instead of the middle of the screen: no empty black band */ #scrolly-map .sticky{justify-content:flex-start!important;padding-top:max(76px, calc(50vh - 360px))!important;max-width:1240px} #scrolly-map .step{min-height:72vh!important} #ch2{padding-bottom:28px!important} /* one card language: the narration card and the four stage cards share radius, edge and type scale */ #scrolly-map .step .card{border-radius:20px!important;padding:26px 28px!important;font-size:16px!important;line-height:1.62!important;max-width:380px!important} .optd-grid{gap:16px!important;margin-bottom:22px!important} .optd-card{border-radius:20px!important;padding:18px 18px 14px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)!important} .optd-card .eyebrow{font-size:11px!important;letter-spacing:.14em!important} .optd-card h3{font-family:"Clash Grotesk","Geist",sans-serif!important;font-size:19px!important;letter-spacing:-.005em!important;margin-bottom:4px!important} .optd-card h3 .en{font-family:"Geist",sans-serif!important;font-size:12px!important} .optd-card .sub{font-size:13px!important;margin-bottom:10px!important} .optd-card ul li{font-size:13px!important;line-height:1.42!important;margin-bottom:5px!important} .ch2-tracker{margin-bottom:18px!important} .ch2-tracker .ch2-pill{font-size:12.5px!important;padding:7px 14px!important} .ch2-tracker{flex-wrap:nowrap!important} @media (max-width:1439.98px){ .ch2-tracker .ch2-pill{font-size:11.5px!important;padding:6px 10px!important} .ch2-tracker{gap:6px!important} .ch2-tracker .ch2-div{margin:0 4px!important} } /* the new funnel */ .fz{position:relative;width:100%} .fz svg{display:block;width:100%;overflow:visible} .fz .t{position:absolute;white-space:nowrap;font-family:"Geist",sans-serif;pointer-events:none} .fz .num{font:600 30px/1 "Clash Grotesk","Geist",sans-serif;letter-spacing:-.01em;color:#fff} .fz .lab{white-space:normal!important;font:600 10.5px/1.35 "Geist",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9db4f2} .fz .cs .lab{color:#5fd3ad} .fz .leak{white-space:normal!important;font:600 10.5px/1.35 "Geist",sans-serif;letter-spacing:.06em;color:#ffb08a;padding:5px 10px;border-radius:10px;background:#1d110d;box-shadow:inset 0 0 0 1px rgba(232,121,79,.5)} .fz .fwl{font:600 11.5px/1 "Geist",sans-serif;letter-spacing:.14em;color:#9db4ff;pointer-events:auto} .fz .fwl .term{color:#fff} .fz .cap{font:500 11px/1 "Geist",sans-serif;letter-spacing:.16em;color:#6b7699;text-transform:uppercase} /* states (data-ms is set by the guide's own scroll script): 1-4 = that stage, 5 = hand-offs, 6 = flywheel */ .fz .col{transition:opacity .5s} #scrolly-map[data-ms="1"] .fz .col:not(.c1),#scrolly-map[data-ms="2"] .fz .col:not(.c2), #scrolly-map[data-ms="3"] .fz .col:not(.c3),#scrolly-map[data-ms="4"] .fz .col:not(.c4){opacity:.38} #scrolly-map[data-ms="5"] .fz .col{opacity:.5} #scrolly-map[data-ms="6"] .fz .col.c2,#scrolly-map[data-ms="6"] .fz .col.c3{opacity:.38} .fz .lk,.fz .fw{opacity:0;transition:opacity .6s} #scrolly-map[data-ms="5"] .fz .lk,#scrolly-map[data-ms="6"] .fz .fw{opacity:1} .fz .fwpath{stroke-dasharray:6 7;animation:fzflow 1.6s linear infinite} @keyframes fzflow{to{stroke-dashoffset:-26}} /* shorter laptop screens (up to 860 px tall): tighter cards so cards and funnel still share one screen */ @media (max-height:860px){ #scrolly-map .sticky{padding-top:64px!important} .ch2-tracker{margin-bottom:12px!important} .optd-card{padding:14px 14px 10px!important} .optd-card h3{font-size:17px!important} .optd-card .sub{margin-bottom:6px!important} .optd-card ul li{font-size:12px!important;line-height:1.35!important;margin-bottom:3px!important} .optd-grid{margin-bottom:16px!important} } @media (prefers-reduced-motion:reduce){.fz .fwpath{animation:none}} } @media (min-width:1200px){ .fz .veil{opacity:0;transition:opacity .5s} #scrolly-map[data-ms="1"] .fz .veil:not(.v1),#scrolly-map[data-ms="2"] .fz .veil:not(.v2), #scrolly-map[data-ms="3"] .fz .veil:not(.v3),#scrolly-map[data-ms="4"] .fz .veil:not(.v4){opacity:.55} #scrolly-map[data-ms="5"] .fz .veil{opacity:.35} #scrolly-map[data-ms="6"] .fz .veil.v2,#scrolly-map[data-ms="6"] .fz .veil.v3{opacity:.55} .fz svg .col{display:none} } @media (min-width:1200px){ .fz .lnum{font:600 26px/1 "Clash Grotesk","Geist",sans-serif;letter-spacing:-.01em;color:#ff9a72} .fz .lwhy{white-space:normal!important;font:600 10.5px/1.4 "Geist",sans-serif;letter-spacing:.1em;color:rgba(255,190,165,.85)} .fz .lk .t{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s} #scrolly-map:not([data-ms="5"]) .fz .lk .t{transform:translateY(-6px)} .fz .gate{transition:opacity .6s} @keyframes fzpulse{0%{r:6;opacity:.9}100%{r:22;opacity:0}} .fz .pulse{animation:fzpulse 2.2s cubic-bezier(.2,.6,.3,1) infinite} @media (prefers-reduced-motion:reduce){.fz .pulse{animation:none;opacity:0}} } /* ------------------------------------------------------------------------------------------------------------ Chapter 2, laptop: the flywheel step (Adam, 7 Oct 2026, option 2 "Return arcs" from docs/ch2-flywheel-options.html). Customer success feeds every stage, so all four cards and the whole ribbon are lit; the three return arcs draw in. ------------------------------------------------------------------------------------------------------------ */ @media (min-width:1200px){ /* flywheel step: every stage is fed, so all four cards and the whole ribbon are lit */ #scrolly-map[data-ms="6"] .optd-card{opacity:1!important} #scrolly-map[data-ms="6"] .fz .veil{opacity:0!important} #scrolly-map[data-ms="6"] .fz .col{opacity:1!important} .fz .fw .t{transition:transform .7s cubic-bezier(.2,.8,.2,1)} #scrolly-map:not([data-ms="6"]) .fz .fw .t{transform:translateY(6px)} #scrolly-map:not([data-ms="6"]) .fz .fw .t.fwl{transform:translate(-50%,6px)} /* the returns draw themselves in when the step opens */ .fz .wdraw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.4s cubic-bezier(.3,.7,.2,1) var(--dl,0s)} #scrolly-map[data-ms="6"] .fz .wdraw{stroke-dashoffset:0} @media (prefers-reduced-motion:reduce){.fz .wdraw{transition:none}} } /* ------------------------------------------------------------------------------------------------------------ Chapter 2, laptop: spacing (Adam, 7 Oct 2026, option 2 "Snug, pinned in the middle" + shorter scroll, from docs/ch2-spacing-options.html). The pinned panel is only as tall as its content (it was a full window tall with the content pushed down, which left ~240 px of empty space above the pills and ~300 px under the caption); while pinned it sits in the middle of the window. Each step is 55% of the window (was 72%): about a quarter less scrolling. ------------------------------------------------------------------------------------------------------------ */ @media (min-width:1200px){ #scrolly-map .sticky{height:auto!important;align-self:start!important;top:max(56px, calc(50vh - 380px))!important;padding-top:8px!important;padding-bottom:0!important} #scrolly-map .steps{padding-top:0!important;padding-bottom:0!important} #scrolly-map .step{min-height:55vh!important} /* first narration card starts level with the stage cards (8 px + pills 33 px + 18 px gap) */ #scrolly-map .step:first-child{align-items:flex-start!important;padding-top:59px!important} #ch2{padding-bottom:8px!important} /* room between the figure caption and chapter 3 (Adam: more than in the preview) */ #scrolly-map{padding-bottom:72px!important} } /* ------------------------------------------------------------------------------------------------------------ Chapter 2, laptop: the start of the diagram and its captions (Adam, 7 Oct 2026, option 2 of docs/ch2-top-options.html: "Calmer controls" + "Centred figure title", with more room under the flywheel arcs). One background for the intro and the diagram with room between them; the pills as one segmented control; stage cards not in focus without an outline; the caption lines in normal case (words unchanged). ------------------------------------------------------------------------------------------------------------ */ @media (min-width:1200px){ /* one chapter: the intro and the diagram share one background, with room between them */ #ch2{background:#0e0e10!important;padding-bottom:72px!important} /* short laptop screens: one narration card at a time (a 55%-of-window step is shorter than a card there) */ #scrolly-map .step{min-height:max(55vh, 520px)!important} } @media (min-width:1200px){ /* calmer controls: the six pills become one segmented control (one outline instead of six) */ .ch2-tracker{width:max-content!important;margin-left:auto!important;margin-right:auto!important;padding:4px!important;gap:2px!important; border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)} .ch2-tracker .ch2-pill{border:0!important;background:transparent!important;color:#9aa3bb!important} .ch2-tracker .ch2-pill:hover{color:#fff!important} .ch2-tracker .ch2-pill.on{background:#1b2a57!important;color:#fff!important;box-shadow:inset 0 0 0 1px rgba(143,179,255,.35)} .ch2-tracker .ch2-pill.alt.on{background:#fff!important;color:#16181d!important;box-shadow:none} .ch2-tracker .ch2-div{opacity:.35} /* the stage cards that are not in focus lose their outline, so fewer boxes compete */ #scrolly-map .optd-card{transition:border-color .4s,opacity .4s} #scrolly-map[data-ms="1"] .optd-card:not(.optd-c1),#scrolly-map[data-ms="2"] .optd-card:not(.optd-c2), #scrolly-map[data-ms="3"] .optd-card:not(.optd-c3),#scrolly-map[data-ms="4"] .optd-card:not(.optd-c4), #scrolly-map[data-ms="5"] .optd-card{border-color:transparent!important;box-shadow:none!important} } @media (min-width:1200px){ .fz .t.fwchip{display:inline-flex;align-items:center;gap:10px;padding:7px 15px 7px 12px;border-radius:999px;white-space:nowrap;pointer-events:auto; background:rgba(79,209,165,.07);box-shadow:inset 0 0 0 1px rgba(79,209,165,.3);font:500 13px/1 "Geist",sans-serif;color:#c3cde3} .fz .fwchip .ic{color:#5fd3ad;font-size:15px;line-height:1} .fz .fwchip .term{font:600 14px/1 "Clash Grotesk","Geist",sans-serif;color:#fff;letter-spacing:.01em} .fz .fwchip .sep{width:1px;height:14px;background:rgba(255,255,255,.16)} /* the caption follows the drawing: right under the ribbon in steps 1-4, under the hand-offs / arcs in 5-6 */ .fz .t.cap2{transition:transform .6s cubic-bezier(.2,.8,.2,1)} #scrolly-map:not([data-ms="5"]):not([data-ms="6"]) .fz .t.cap2.follow{transform:translate(var(--tx,0),var(--up))} #scrolly-map[data-ms="5"] .fz .t.cap2.follow,#scrolly-map[data-ms="6"] .fz .t.cap2.follow{transform:translate(var(--tx,0),0)} } @media (min-width:1200px){ .fz .t.cap2{--tx:-50%;display:flex;flex-direction:column;align-items:center;gap:7px;white-space:nowrap} .fz .cap2 .ey{display:flex;align-items:center;gap:10px;font:600 10.5px/1 "Geist",sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#7088c9} .fz .cap2 .ey:before,.fz .cap2 .ey:after{content:"";width:28px;height:1px;background:rgba(143,179,255,.3)} .fz .cap2 .ti{font:500 16px/1.2 "Clash Grotesk","Geist",sans-serif;letter-spacing:.005em;color:#b4bfdb} } @media (min-width:1200px){ /* the chip is centred on its own position; keep that while it fades in */ #scrolly-map:not([data-ms="6"]) .fz .fw .t.fwchip{transform:translate(-50%,6px)} } @media (min-width:1200px){ /* the last step (flywheel) is tall enough that the pinned panel stays in place while it is read; with a 55%-of- window step the panel was pushed up at the end of the chapter and the pills and card tops went under the bar */ #scrolly-map .step:last-child{min-height:max(55vh, calc(2 * max(56px, 50vh - 380px) + 1560px - 100vh))!important} } /* ------------------------------------------------------------------------------------------------------------ Chapter 6 on phones and tablets (Adam, 7 Oct 2026): the laptop growth chart re-proportioned for a phone (built by the script before "scrolly 2: arc"), and less empty space above the chart and after the last card. ------------------------------------------------------------------------------------------------------------ */ @media (max-width:900px){ section:has(+ #scrolly-arc){padding-bottom:6px!important} #scrolly-arc{margin-top:0!important} #scrolly-arc .steps{padding-bottom:8px!important} #scrolly-arc .step:last-child{margin-bottom:24px!important} #scrolly-arc .machart{padding:12px 10px 8px} #scrolly-arc .mxhead{display:flex;align-items:baseline;gap:8px;padding:0 4px 4px;font:600 10.5px/1.2 "Geist",sans-serif;letter-spacing:.12em;color:#2a3050} #scrolly-arc .mxhead b{color:#1061FF;font-weight:600;white-space:nowrap} #scrolly-arc .mxnote{margin:2px 4px 0;font:italic 400 11px/1.3 "Geist",sans-serif;color:#8a90a8;text-align:center} #scrolly-arc svg.mxarc{display:block;width:100%;height:auto} #scrolly-arc .mxarc .arc-lvl{font-size:30px;letter-spacing:0} #scrolly-arc .mxarc .arc-axis{font-size:28px;letter-spacing:.3px} #scrolly-arc .mxarc .arc-ann{font-size:33px;stroke-width:7px} #scrolly-arc .mxarc .arc-annm{font-size:24px;stroke-width:6px;letter-spacing:1.5px} #scrolly-arc .mxarc .a-lead{stroke-width:2} /* the state rules of the laptop chart, for the copy's prefixed ids */ #scrolly-arc #m-ann1 .a-lead{stroke:#7cc4a0} #scrolly-arc #m-ann2 .a-lead{stroke:#a89ff0} #m-ann1,#m-ann2{opacity:0;transition:opacity .35s ease} #m-mdot1,#m-mdot2{stroke:#279e64;stroke-width:4.5} #m-mdot3{stroke:#5b4ee6;stroke-width:4.5} #scrolly-arc[data-ms="4"] #m-mdot2,#scrolly-arc[data-ms="5"] #m-mdot2{stroke:#5b4ee6} #scrolly-arc[data-ms="3"] #m-ann1,#scrolly-arc[data-ms="4"] #m-ann1,#scrolly-arc[data-ms="5"] #m-ann1, #scrolly-arc[data-ms="3"] #m-mdot1,#scrolly-arc[data-ms="4"] #m-mdot1,#scrolly-arc[data-ms="5"] #m-mdot1, #scrolly-arc[data-ms="3"] #m-mdot2,#scrolly-arc[data-ms="4"] #m-mdot2,#scrolly-arc[data-ms="5"] #m-mdot2, #scrolly-arc[data-ms="4"] #m-ann2,#scrolly-arc[data-ms="5"] #m-ann2, #scrolly-arc[data-ms="4"] #m-mdot3,#scrolly-arc[data-ms="5"] #m-mdot3{opacity:.7} #scrolly-arc[data-ms="3"] #m-ann1,#scrolly-arc[data-ms="3"] #m-mdot1,#scrolly-arc[data-ms="3"] #m-mdot2, #scrolly-arc[data-ms="4"] #m-ann2,#scrolly-arc[data-ms="4"] #m-mdot2,#scrolly-arc[data-ms="4"] #m-mdot3{opacity:1} #scrolly-arc .mxarc .arcseg{stroke-width:6.6px} #scrolly-arc[data-ms="3"] .mxarc .seg-fedezi,#scrolly-arc[data-ms="4"] .mxarc .seg-nyer{stroke-width:7.5px} #scrolly-arc[data-ms="3"] #m-mdot1,#scrolly-arc[data-ms="3"] #m-mdot2,#scrolly-arc[data-ms="4"] #m-mdot2,#scrolly-arc[data-ms="4"] #m-mdot3{r:12px} } /* ------------------------------------------------------------------------------------------------------------ Phone review fixes (Adam, 7 Oct 2026, docs/guide-mobile-review.html items 1-2) 1 · chapter bar: the script marks the current chapter with .ab-act but only .act was styled, so nothing was ever highlighted. Now the current chapter is a white pill; on phones it also shows its name; the bar is near-solid. 2 · floating audit button: slimmer on phones (it is now shown from chapter 1 until the audit comes into view). ------------------------------------------------------------------------------------------------------------ */ #rail{background:rgba(10,10,12,.92)!important} #rail a.ab-act{background:#fff!important;color:#0b0f17!important} #rail a.ab-act .rn{color:#1061FF} @media (max-width:700px){ #rail .rlabel{display:none} #rail .rwrap{padding:7px 10px!important;gap:2px!important} #rail a{padding:7px 10px!important;font-size:13px!important} #rail a.ab-act .rt{display:inline!important;margin-left:4px;font-weight:500} .stickycta{left:50%!important;right:auto!important;transform:translateX(-50%) translateY(12px);width:max-content;max-width:calc(100% - 32px); padding:11px 18px!important;font-size:14px!important;border-radius:999px!important;box-shadow:0 10px 28px -10px rgba(16,97,255,.6)} .stickycta.show{transform:translateX(-50%)!important} } /* ------------------------------------------------------------------------------------------------------------ Chapter 2, phones and tablets (below 1,200 px): swipe cards (Adam, 7 Oct 2026, option 3 round 2 of docs/ch2-mobile-options.html, step buttons above the figure, no figure caption). Built by