/* MKT-09: a phone-native reading and product-story layer. Desktop keeps its existing exhibit; no viewport scales a recording down to mobile text size. */ .mobile-see,.hero-phone,.hero-sub-mobile,.mobile-plan-tabs,.review-browse,.receipt-toggle{display:none} .see-short{display:none} .cop-receipt-content{display:contents} /* Phone layout, plus coarse-pointer landscape: a rotated Pro Max is 932x430, where the desktop exhibit never fits the unobstructed band. Same rule as the dashboard (UI-28). public/scripts/landing-mobile.js carries the identical condition. */ @media(max-width:900px),(pointer:coarse) and (max-height:500px){ #see-desktop{display:none} .mobile-see{display:block;padding-top:24px;padding-bottom:40px} .mobile-see .sec-head{margin-bottom:24px} .mobile-see .h2{font-size:clamp(36px,8.8vw,48px);line-height:1.02;max-width:18ch} .mobile-see .h2 em{display:block} .mobile-see .sub{font-size:16px;line-height:1.65;max-width:42ch;margin-top:16px} .mobile-walkthrough{position:relative;margin-inline:auto;max-width:580px;overflow:visible} .walk-pin{position:relative;width:100%;isolation:isolate} .walk-shell{overflow:hidden;border:1px solid var(--dk);border-radius:18px;background:var(--dk);color:var(--dktxt);box-shadow:0 18px 36px -24px rgba(10,11,14,.6)} .walk-shell :focus-visible{outline:2px solid var(--grn);outline-offset:-4px} .walk-brand{display:flex;align-items:center;gap:8px;padding:9px 18px 7px;min-height:34px} .walk-brand-mark{display:grid;place-items:center;width:21px;height:21px;border:1px solid var(--grn);border-radius:5px;color:var(--grn);font:600 12px var(--mono)} .walk-brand b{font-size:12px;font-weight:500;letter-spacing:.02em} .walk-brand>span:last-child{font:500 11px/1.4 var(--mono);color:#B3B8C2;letter-spacing:.04em;margin-left:auto} /* Keep three columns at normal text size; larger text can use fewer. */ .walk-tabs{display:none;grid-template-columns:repeat(auto-fit,minmax(min(100%,max(6em,calc((100% - 12px)/3))),1fr));font-size:12px;padding:4px 12px 10px;gap:6px;border-bottom:1px solid var(--dkline2)} .js .walk-tabs{display:grid} .walk-tabs button{min-width:0;min-height:52px;color:#B3B8C2;border:1px solid var(--dkline2);border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 4px;font:400 12px var(--mono)} .walk-tabs button b{font:500 14px var(--ui)} .walk-tabs [aria-selected=true]{color:var(--grn);border-color:var(--grn);background:var(--grn-dim)} .walk-scenes{position:relative} /* Gated on html.js — set synchronously in — so the six scenes share one footprint at FIRST paint. Gating this on a class the deferred script adds made the document collapse ~3,500px under a reader who had already started scrolling. */ .js .walk-scenes{display:grid} /* the scenes stack in this wrapper so the scroll-driven mode can scale them as one */ .js .walk-scenes-fit{display:grid;min-width:0} .walk-scene{padding:20px 20px 16px;min-width:0;border-bottom:1px solid var(--dkline2)} .js .walk-scene{grid-area:1/1;visibility:hidden;opacity:0;pointer-events:none;display:flex;flex-direction:column;border-bottom:0} .js .walk-scene.is-active{visibility:visible;opacity:1;transform:none;pointer-events:auto} /* Until the script wires the tablist, show exactly what select(0) will show, so the handoff to .walk-enhanced moves nothing and no blank panel is ever painted. */ .js [data-walkthrough]:not(.walk-enhanced) .walk-scene:first-child{visibility:visible;opacity:1;pointer-events:auto} .js [data-walkthrough]:not(.walk-enhanced) .walk-tabs button:first-child{color:var(--grn);border-color:var(--grn);background:var(--grn-dim)} .walk-intro{margin-bottom:14px} .walk-eyebrow{display:block;font:500 11px/1.5 var(--mono);letter-spacing:.06em;color:#AEB4BF;margin-bottom:9px} .walk-intro h3{font-size:clamp(25px,6.6vw,32px);font-weight:500;letter-spacing:-.045em;line-height:1.12;margin:0} .walk-intro em{font-style:normal;color:var(--grn)} .walk-visual{min-width:0} .walk-question{font-size:15px;line-height:1.5;color:var(--dktxt);border:1px solid var(--dkline2);background:#1A1D23;border-radius:11px 11px 3px 11px;padding:11px 13px;margin:0 0 14px 20px} .walk-answer{display:flex;gap:9px;align-items:flex-start} .walk-ai{font-size:21px;line-height:1.2;color:var(--grn)} .walk-answer b{font-size:15px;font-weight:500;line-height:1.4} .walk-answer p{font-size:14px;line-height:1.5;color:#B3B8C2;margin-top:3px} .walk-stat-pair{display:grid;grid-template-columns:1fr 1fr;margin:15px 0 3px;padding-left:29px;gap:16px} .walk-stat-pair>div{display:flex;align-items:baseline;gap:8px} .walk-stat-pair b{font:500 33px/1.2 var(--ui);letter-spacing:-.06em;color:var(--grn)} .walk-stat-pair b>span{font-size:20px} .walk-stat-pair>div>span{font-size:12px;line-height:1.4;color:#B3B8C2} .walk-receipt{font:400 11px/1.5 var(--mono);color:#B3B8C2;padding:12px 0} .walk-receipt>span{color:var(--grn)} .walk-draft{display:flex;align-items:center;gap:10px;padding:13px 12px;border:1px solid rgba(0,230,138,.28);background:rgba(0,230,138,.055);border-radius:8px} .walk-draft>span{color:var(--grn);font-size:22px} .walk-draft b{display:block;font-size:14px;font-weight:500;line-height:1.4} .walk-draft div>span{display:block;font-size:12px;line-height:1.5;margin-top:3px;color:#B3B8C2} .walk-draft>i{font-style:normal;color:var(--grn);margin-left:auto} .walk-bound{display:flex;align-items:flex-start;gap:7px;padding-top:14px;margin-top:auto;font-size:14px;line-height:1.5;color:#B3B8C2;text-wrap:pretty} .walk-bound>span{color:var(--grn);flex:none} .walk-run-total{display:flex;align-items:center;gap:12px;padding:0 0 18px} .walk-run-total>b{font-size:54px;line-height:1;letter-spacing:-.07em;color:var(--grn);font-weight:500} .walk-run-total strong{display:block;font-size:15px;font-weight:500} .walk-run-total div>span{display:block;font-size:11px;color:#B3B8C2;line-height:1.5;max-width:19ch;margin-top:3px} .walk-orbit{margin-left:auto;color:var(--grn);font-size:32px;line-height:1} .walk-levers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .walk-levers>div{position:relative;padding:12px 9px 11px 30px;border:1px solid var(--dkline2);border-radius:7px;background:#14171D} .walk-levers i{position:absolute;left:10px;top:12px;color:var(--grn);font-size:15px;font-style:normal;line-height:1.2} .walk-levers b{display:block;font-size:14px;font-weight:500;line-height:1.3} .walk-levers span{display:block;font-size:11px;line-height:1.4;color:#B3B8C2;margin-top:5px} .walk-margin-labels{display:flex;justify-content:space-between;gap:8px;font-size:11px;line-height:1.4;color:#B3B8C2;padding-bottom:5px} .walk-margin-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 0} .walk-margin-row b{display:block;font-size:15px;font-weight:500;line-height:1.3} .walk-margin-row div>span{font-size:11px;line-height:1.5;color:#B3B8C2} .walk-margin-row strong{font-size:32px;font-weight:500;line-height:1;color:var(--grn);letter-spacing:-.04em} .walk-margin-row small{font-size:18px} .walk-margin-row>i{grid-column:1/-1;height:5px;background:var(--dkline2);border-radius:9px;overflow:hidden} .walk-margin-row>i>span{display:block;width:var(--target);height:100%;background:var(--grn);border-radius:9px;transform-origin:left} .walk-bid{padding:13px;border:1px solid var(--dkline2);border-radius:10px;background:#14171D} .walk-bid>span{font-size:13px;color:#B3B8C2} .walk-bid>div{display:flex;align-items:baseline;gap:13px;line-height:1.1;padding:14px 0 10px;white-space:nowrap} .walk-bid del{font-size:25px;color:#AEB4BF;text-decoration-thickness:1px} .walk-bid i{font-size:23px;font-style:normal;color:#AEB4BF} .walk-bid b{font-size:43px;color:var(--grn);font-weight:500;letter-spacing:-.055em} .walk-bid small{font-size:11px;color:#B3B8C2;line-height:1.4} .walk-metric-row{display:flex;justify-content:space-between;gap:10px;padding:12px 0;font-size:12px;color:#B3B8C2} .walk-metric-row b{font-size:15px;font-weight:500;color:var(--dktxt);margin-left:5px} .walk-checks{display:grid;gap:7px;font-size:14px;line-height:1.4} .walk-checks i{font-style:normal;color:var(--grn);margin-right:5px} .walk-approval{font-size:12px;line-height:1.5;color:var(--amb);padding-top:10px} .walk-approval span{margin-right:5px} .walk-files{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:8px 4px} .walk-file{position:relative;background:var(--paper);color:var(--ink);border-radius:3px 12px 3px 3px;padding:12px 12px 10px;transform:rotate(-2deg);box-shadow:0 6px 20px rgba(0,0,0,.2)} .walk-file.reverse{transform:rotate(2deg);background:#DDE8D8} .walk-file>i{display:block;font-size:22px;line-height:1;font-style:normal;color:var(--blue);margin-bottom:8px} .walk-file>span{display:block;font:500 11px/1.5 var(--mono);letter-spacing:.04em;margin-bottom:8px;color:var(--ink2)} .walk-file b{display:block;font-size:17px;font-weight:500;line-height:1.3} .walk-file small{font-size:11px;line-height:1.5;display:block;margin-top:8px;color:var(--ink2)} .walk-upload{display:flex;align-items:center;justify-content:center;gap:10px;font-size:13px;line-height:1.5;padding:14px 0;color:#B3B8C2} .walk-upload>span{font-size:22px;color:var(--grn)} .walk-verified{display:flex;align-items:center;gap:10px;border:1px solid rgba(0,230,138,.25);background:var(--grn-dim);padding:12px;border-radius:9px} .walk-verified>i{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--grn);color:var(--dk);font-size:17px;font-style:normal;flex:none} .walk-verified b{display:block;font-size:19px;font-weight:500;color:var(--grn);line-height:1.3} .walk-verified span{display:block;font-size:12px;color:#B3B8C2;line-height:1.5;margin-top:3px} .walk-night{display:flex;align-items:center;gap:14px;margin:6px 0 16px} .walk-moon{font-size:47px;line-height:1;color:var(--grn)} .walk-night b{display:block;font-size:19px;font-weight:500;line-height:1.3} .walk-night div>span{display:block;font-size:13px;color:#B3B8C2;line-height:1.5;margin-top:4px} .walk-market{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--dkline2);font-size:15px} .walk-market small{font:400 10px var(--mono);margin-left:5px;color:#B3B8C2} .walk-market b{margin-left:auto;font-size:12px;font-weight:400;color:#B3B8C2} .walk-market>i{color:var(--grn);font-style:normal} .walk-alert{display:flex;gap:10px;background:rgba(255,176,32,.07);border:1px solid rgba(255,176,32,.25);border-radius:8px;padding:14px;margin-top:12px} .walk-alert>span{border:1px solid var(--amb);border-radius:50%;display:grid;place-items:center;flex:none;width:21px;height:21px;color:var(--amb);font-size:13px} .walk-alert b{font-size:15px;font-weight:500;color:var(--amb)} .walk-alert p{font-size:13px;color:#C5C1B8;line-height:1.5;margin-top:3px} .mobile-see .see-foot{flex-direction:column;max-width:580px;margin:22px auto 0} .mobile-see .see-foot .btn{width:100%} /* A readable first impression at every narrow breakpoint. */ .hero-media,.hero-console-head{display:none!important} .hero-phone{display:block;padding:20px;background:var(--dk);color:var(--dktxt)} .hero-media-wrap .exhibit{border-radius:16px;box-shadow:5px 7px 0 var(--blue-dim)} .hero-sub{display:none} .hero-sub-mobile{display:block;font-size:17px;line-height:1.6;color:var(--ink2);margin-bottom:18px} .hero-sub-mobile strong{color:var(--ink);font-weight:500} .hero-phone-head{display:flex;align-items:center;gap:8px;margin-bottom:22px;font:500 11px/1.5 var(--mono);color:var(--grn)} .hero-phone-head>span:last-child{margin-left:auto;color:#B3B8C2;font-size:11px} .hero-phone-total{font-size:49px;font-weight:500;line-height:1.2;letter-spacing:-.06em;margin:16px 0 5px;color:var(--grn)} .hero-phone-total small{font-size:21px;letter-spacing:0;color:#B3B8C2;margin-left:8px} .hero-phone-copy{font-size:15px;line-height:1.5;color:#B3B8C2;margin-bottom:18px} .hero-phone .walk-question{margin-left:14px} .hero .hero-grid{gap:24px} .hero .hero-media-wrap{max-width:580px;margin-top:0} .hero-handoff{margin-top:18px} .hero .ex-cap{font-size:11px} .hero-watch{display:inline-flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;color:var(--grn);font-size:14px;border-top:1px solid var(--dkline2);margin-top:16px;padding-top:8px} /* Keep the supporting details close without a second full screen per tab. */ .js .receipt-toggle{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:48px;text-align:left;color:var(--grn);font-size:14px;line-height:1.4} .receipt-toggle>span{font-size:22px} .cop-receipt{padding:12px 20px} .js .cop-receipt-content{display:none} .js .cop-receipt.is-open .cop-receipt-content{display:flex;flex-direction:column;gap:14px;padding:14px 0 10px} .cop-conversation{padding:22px} .cop-receipt summary{min-height:44px;padding:12px 0} .cop-tabs button{min-height:48px} .cop-trust{gap:18px} .cop-trust>div{border-top:0;border-left:2px solid var(--blue);padding:0 0 0 14px} .hiw-grid{grid-template-columns:minmax(0,1fr);gap:0} .hiw-card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px 16px;box-shadow:none;border:0;border-top:1px solid var(--hair2);background:none;padding:22px 0} .hiw-card .step-top{grid-column:1;grid-row:1/4;display:block} .hiw-card .step-n{font:400 25px/1.2 var(--serif);color:var(--blue)} .hiw-card .step-ic{display:none} .hiw-card>h3,.hiw-card>p,.hiw-card>.time-chip{grid-column:2} .hiw-card h3{font-size:20px}.hiw-card p{font-size:16px;line-height:1.6} .hiw-card .time-chip{justify-self:start;margin-top:5px;font-size:11px} .weekly-rhythm{margin-top:16px} .weekly-rhythm>div{padding:16px 18px} .t-cards{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:88%;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:4px 0 14px;border:0;scrollbar-width:thin;scrollbar-color:var(--blue) var(--paper2)} .t-cards .t-card{scroll-snap-align:start;min-width:0;border:1px solid var(--hair2)!important;border-radius:10px;background:var(--card);opacity:1!important;transform:none!important;box-shadow:none} .js .review-browse{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-bottom:8px;color:var(--ink2);font-size:12px} .review-browse>span{margin-right:auto} .review-browse button{width:44px;height:44px;border:1px solid var(--hair2);border-radius:50%;font-size:21px;background:var(--card)} .review-browse button:disabled{opacity:.35} .js .mobile-plan-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:1px solid var(--hair2);border-radius:9px;max-width:540px;margin:0 auto 28px;background:var(--paper2)} .mobile-plan-tabs button{min-height:44px;font-size:13px;border-radius:5px;color:var(--ink2)} .mobile-plan-tabs [aria-selected=true]{background:var(--ink);color:var(--paper)} .p-cards{grid-template-columns:minmax(0,1fr);max-width:540px;margin:0 auto} /* Before the script runs, show the one card choosePlan(1) is about to select — hiding all three instead would trade a 1,113px collapse for a 1,113px expansion. */ .js #pricing:not(.mobile-plans-ready) .p-card:not([data-mobile-plan="1"]){display:none} .js #pricing:not(.mobile-plans-ready) [data-plan-tab="1"]{background:var(--ink);color:var(--paper)} .mobile-plans-ready .p-card:not(.is-mobile-plan){display:none} .p-card{opacity:1!important;transform:none!important;box-shadow:none!important;border-radius:10px;padding:28px} .p-card .price-n,.p-card .price-free{font-size:52px} .p-card .p-feat{gap:12px;padding-top:20px;margin-top:5px} .p-card .p-feat li{font-size:15px;line-height:1.5} .p-card .btn{font-size:13px;min-height:50px} .p-card .p-badge{font-size:11px;letter-spacing:.08em;border-radius:4px} .p-footnote{text-align:left;font-size:12px;line-height:1.75} .p-toggle button{min-height:48px} .f-in{font-size:16px} .cop-prod .nums{font-size:13px;line-height:1.75} .faq-q{min-height:56px} } @media(max-width:480px){ .trust-chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px} .trust-chips span{display:flex;align-items:center;justify-content:center;padding:10px 8px;font-size:14px;line-height:1.5;letter-spacing:0} } @media(max-width:380px){ .walk-scene{padding:16px 16px 12px} .walk-intro{margin-bottom:12px} .walk-brand{padding-top:7px;padding-bottom:5px} .walk-brand{padding-inline:16px} .walk-bid b{font-size:39px}.walk-bid del{font-size:23px} .walk-stat-pair{padding-left:0} .walk-run-total>b{font-size:48px} .walk-levers>div{padding-left:27px}.walk-levers i{left:8px} .walk-intro h3{font-size:24px} .p-card{padding:25px 20px} } @media(prefers-reduced-motion:no-preference){ .walk-enhanced .walk-scene.is-active{animation:walk-step-in .18s ease both} @keyframes walk-step-in{from{opacity:.4}to{opacity:1}} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .walk-scene,.walk-scene *{transition:none!important;animation:none!important} } /* ============ Scroll-driven walkthrough (phones, portrait) ============ While you scroll through this stretch the panel stays put and the six steps advance underneath it. The first build of this (MKT-09) was removed in MKT-22 because it jumped whenever a phone's address bar grew or shrank. That came from three things, and none of them may come back: 1. its scroll length was computed from window.innerHeight, which changes as the toolbar moves — here the length is pure CSS in svh, which does not; 2. a fit check against live innerHeight flipped the whole mode on and off, collapsing the section — here the mode is fixed by media queries that no toolbar movement can change (width, orientation, motion preference); 3. the resize handler called window.scrollTo — here nothing but a tap on a step ever moves the page. Landscape, reduced motion and no-JS keep the tap-through tabs above. */ @media screen and (max-width:600px) and (orientation:portrait) and (prefers-reduced-motion:no-preference){ html.js:not(.walk-static) [data-walkthrough]{ /* 620px is about as tall as the card gets on a phone, so a tall screen does not pin a card with a band of empty panel beneath it. */ --walk-panel:min(calc(100svh - var(--nav-h) - 20px),620px); --walk-step:min(50svh,380px); height:calc(var(--walk-panel) + var(--walk-step) * 6); } html.js:not(.walk-static) .walk-pin{position:sticky;top:calc(var(--nav-h) + 10px);height:var(--walk-panel);display:flex;flex-direction:column;justify-content:center} /* The card is only as tall as its tallest scene; the svh-sized pin around it keeps the scroll math, so a tall phone gets no empty band in the middle of a step. */ html.js:not(.walk-static) .walk-shell{display:flex;flex-direction:column;max-height:100%} html.js:not(.walk-static) .walk-brand{flex:none;padding:7px 16px 5px;min-height:30px;white-space:nowrap} /* One row of six numbered steps; each scene's own eyebrow carries the name. */ html.js:not(.walk-static) .walk-tabs{flex:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;padding:4px 12px 10px} html.js:not(.walk-static) .walk-tabs button{position:relative;overflow:hidden;min-height:44px;padding:0;gap:0} html.js:not(.walk-static) .walk-tabs button b{display:none} html.js:not(.walk-static) .walk-tabs button>span{font:600 13px var(--mono)} html.js:not(.walk-static) .walk-tabs .is-done{color:rgba(0,230,138,.7);border-color:rgba(0,230,138,.35)} /* progress through the current step, composited */ html.js:not(.walk-static) .walk-tabs button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grn);transform:scaleX(0);transform-origin:left} html.js:not(.walk-static) .walk-tabs [aria-selected=true]::after{transform:scaleX(var(--walk-local,0))} html.js:not(.walk-static) .walk-tabs .is-done::after{transform:scaleX(1);opacity:.45} /* The scenes fill whatever the panel has left. On a short phone they are scaled down to fit rather than clipped: --walk-room/--walk-fit are measured once from the svh-sized panel, so they cannot change while the address bar moves, and changing them never alters the section's height. */ html.js:not(.walk-static) .walk-scenes{flex:none;height:var(--walk-room,auto);overflow:hidden} html.js:not(.walk-static) .walk-scenes-fit{position:relative;display:grid;width:calc(100% / var(--walk-fit,1));height:calc(var(--walk-room,100%) / var(--walk-fit,1));transform:scale(var(--walk-fit,1));transform-origin:0 0} html.js:not(.walk-static) .walk-scene{padding:14px 18px 12px;height:100%} html.js:not(.walk-static) .walk-intro{margin-bottom:10px} html.js:not(.walk-static) .walk-intro h3{font-size:clamp(22px,6vw,28px)} /* Scrolling is already the motion. A fade that restarts on every boundary left the panel below 90% opacity for most of a steady scroll. */ html.js:not(.walk-static) .walk-scene.is-active{animation:none} /* one synchronous read in measure(): the unscaled natural height of the tallest scene */ html.js:not(.walk-static) .walk-measuring .walk-scenes{height:auto!important} html.js:not(.walk-static) .walk-measuring .walk-scenes-fit{height:auto!important;transform:none!important;align-self:start} html.js:not(.walk-static) .walk-measuring .walk-scene{height:auto!important} } /* A browser at 150% zoom (~260px wide) cannot fit the struck-out bid, the arrow and the new bid on one line; let the new bid drop under instead of being cut off at the card edge. */ @media (max-width:320px){ .walk-bid>div{flex-wrap:wrap;row-gap:4px} } /* The walkthrough controller failed to load or never started (set by the inline script). Without it the step buttons do nothing, so hide them and show all six scenes in order — the same readable story a no-JavaScript visitor gets. */ html.walk-dead .walk-tabs{display:none!important} html.walk-dead .walk-scenes,html.walk-dead .walk-scenes-fit{display:block!important;height:auto!important;transform:none!important;width:auto!important} html.walk-dead .walk-scene{visibility:visible!important;opacity:1!important;pointer-events:auto!important;border-bottom:1px solid var(--dkline2)}