/* landing-screens-1107: real product screens (hero + #how). Loaded after v8.css and sources.css; v8.css untouched. */

/* Joni's role list: two numbered lists (Hebrew, then English), numbering continuous across both */
.roles{display:block;margin-bottom:3px}
.roles .r{display:block;line-height:1.5}
.roles .r b{font-weight:500;color:#54656f;font-variant-numeric:tabular-nums}
.roles .r.more{color:#8696a0;line-height:1;margin:-1px 0 3px;letter-spacing:2px}
.roles bdi{unicode-bidi:isolate}

/* WhatsApp reply / link buttons under a card message */
.wa-card{padding-bottom:0}
.wa-btns{display:block;margin:5px -9px 0;border-top:1px solid #e9edef}
.wa-btns>span{display:flex;align-items:center;justify-content:center;gap:5px;padding:6px 8px;color:#008069;font-weight:500;line-height:1.3}
.wa-btns>span+span{border-top:1px solid #e9edef}
.wa-ext{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.wa-card.link .link-card{margin-bottom:5px}

/* a file Joni sends (tailored CV, Word): file card + caption in the same bubble */
.message.incoming.doc{padding:4px 4px 3px}
.message.incoming.doc .doc-card{margin-bottom:4px}
.doc-cap{display:block;padding:0 5px}
.message.incoming.doc>small{padding:2px 6px 0}

/* the real screens in the step tiles: the whole crop visible, centred, soft card edge */
.step .shot-tile img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:10px;box-shadow:0 1px 2px #1517191a,0 8px 22px #15171914}

/* phone: Joni's chat stays short enough to read at a glance */
.iphone .roles .r{line-height:1.45}

/* one tile height per row from two columns up (chat tiles no longer grow past the screenshots) */
@media(min-width:700px){.step .tile,.step .tile.chat-tile{height:400px;min-height:0}}
@media(min-width:1080px){.step .tile,.step .tile.chat-tile{height:420px}}
@media(max-width:699px){.step .tile.shot-tile{height:380px}}
.chat-tile bdi{white-space:nowrap}

/* round 2: step 03 = Joni's real CV flow (career-coach.md 1ב): "עדכנתי…", one line per change, the page card (Word only on request: in the copy, the tile has no room for a 2nd exchange) */
.message .chg{display:block;margin-top:3px;color:#3b4a54}
.message .chg+.chg{margin-top:1px}
.wa-card.link .link-card strong{font-size:12.5px}

/* ---- round 3 (11-07): one narrative. Sources stats = 2 (new jobs per day + source types), the source-name strip, the start line. */
.sources-stats.r3{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
.sources-stats.r3>div{justify-content:flex-end}
.start-line{max-width:520px;margin:-4px auto 22px;font-size:17px;line-height:1.7;color:#c3ccd1}
.src-strip{max-width:790px;margin:0 auto 26px}
.strip-view{overflow:hidden;-webkit-mask-image:linear-gradient(to left,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to left,transparent,#000 7%,#000 93%,transparent)}
.strip-track{display:flex;width:max-content;animation:a4j-strip 70s linear infinite}
.src-strip:hover .strip-track,.src-strip:focus-within .strip-track,.src-strip.paused .strip-track{animation-play-state:paused}
.strip-set{display:flex;align-items:center;flex:none;list-style:none;margin:0;padding:0}
.strip-set li{white-space:nowrap;padding:0 22px;font-size:15px;line-height:2.4;color:#c3ccd1}
.strip-cat{color:#79dfcc;font-weight:600}
.strip-cat::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:#79dfcc;margin-inline-end:9px;vertical-align:middle}
.strip-dot{color:#5f6b72}
.strip-note{margin:6px auto 0;max-width:620px;font-size:12px;line-height:1.6;color:#8d989f}
.strip-pause{font:inherit;font-size:12px;color:#a9c9c1;background:none;border:0;padding:4px 2px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.strip-pause:focus-visible{outline:2px solid #79dfcc;outline-offset:2px;border-radius:3px}
@keyframes a4j-strip{from{transform:translateX(0)}to{transform:translateX(50%)}}
@media(max-width:699px){.step .tile.shot-tile.tall{height:480px}.start-line{font-size:15px;margin-bottom:18px}.strip-set li{font-size:14px;padding:0 16px}.src-strip{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){
 .strip-track{animation:none;width:auto}
 .strip-set[aria-hidden="true"],.strip-pause{display:none}
 .strip-set{flex-wrap:wrap;justify-content:center;flex:1}
 .strip-set li{line-height:1.9;white-space:normal;padding:0 10px}
 .strip-dot{display:none}
 .strip-set bdi{display:inline-block;white-space:nowrap;margin-inline:7px}
 .strip-view{-webkit-mask-image:none;mask-image:none}
}

/* ===== round 4 (11-07) =====
   Hero: the laptop shows the real desktop board at every width; laptop and phone never overlap.
   >=700: one grid, laptop | phone side by side, a caption under each (legend = subgrid). motion.js's zoom-fit is off.
   <700: laptop under the title, then CTA + copy, then the phone (the hero grid places them; scene = display:contents). */
.hero .scene-wrap:has(.r4){aspect-ratio:auto;height:auto;padding:0}
.hero .scene.r4{position:relative;inset:auto;right:auto;top:auto;width:100%;height:auto;margin:0;zoom:1!important;overflow:visible;
 display:grid;grid-template-columns:minmax(0,1fr) var(--pw,212px);column-gap:var(--dgap,36px);row-gap:18px;align-items:end;--pw:212px;--dgap:36px}
.r4 .live-board{position:relative;inset:auto;left:auto;top:auto;right:auto;width:100%;height:auto;aspect-ratio:3824/2564;grid-column:1;grid-row:1;
 margin:0;filter:drop-shadow(0 26px 30px #0008)}
.r4 .board-display>.board-image{display:block;position:static;width:100%;height:100%;float:none;top:auto;right:auto;max-width:none;object-fit:cover;object-position:top}
.hero .r4 .iphone{position:relative;inset:auto;left:auto;top:auto;bottom:auto;right:auto;width:var(--pw);height:auto;aspect-ratio:1419/2796;grid-column:2;grid-row:1;
 margin:0;filter:drop-shadow(10px 22px 22px #0009);--phone-scale:calc(.831 * 212 / 300)}
.r4 .legend{position:static;inset:auto;grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:subgrid;column-gap:var(--dgap);margin:0;
 width:auto;white-space:normal;font-size:15px;line-height:1.45;gap:0}
.r4 .legend .who{display:block;text-align:center;text-wrap:balance}
@media(min-width:1080px){.hero:has(.scene.r4){grid-template-columns:minmax(0,4.4fr) minmax(0,7.6fr)}}
@media(min-width:1280px){.hero .scene.r4{--pw:200px;--dgap:32px}.hero .r4 .iphone{--phone-scale:calc(.831 * 200 / 300)}}
.r4 .legend .who.sys{grid-column:1;grid-row:1}.r4 .legend .who.joni{grid-column:2;grid-row:1}
.r4 .legend .who i{display:inline-block;width:8px;height:8px;margin:0 0 0 8px;vertical-align:.08em}.r4 .legend .who b{margin-left:4px}
@media(min-width:1080px) and (max-width:1279px){.hero .scene.r4{--pw:180px;--dgap:26px}.hero .r4 .iphone{--phone-scale:calc(.831 * 180 / 300)}.r4 .legend{font-size:14px}}
@media(min-width:700px) and (max-width:1079px){.r4 .legend{font-size:14px}.hero .scene.r4{--pw:196px;--dgap:30px}.hero .r4 .iphone{--phone-scale:calc(.831 * 196 / 300)}.hero .scene-wrap:has(.r4){margin-top:40px;max-width:820px;margin-inline:auto}}
@media(max-width:699px){
 .hero:has(.scene.r4){grid-template-areas:'title' 'laptop' 'syscap' 'action' 'watch' 'copy' 'phone' 'joncap';row-gap:14px}
 .hero .scene-wrap:has(.r4),.hero .scene.r4,.r4 .legend{display:contents}
 .r4 .live-board{grid-area:laptop;width:calc(100% + 12px);margin:6px -6px 0;filter:drop-shadow(0 16px 18px #0008)}
 .hero .r4 .iphone{grid-area:phone;justify-self:center;--pw:252px;width:252px;margin-top:22px;--phone-scale:calc(.831 * 252 / 300)}
 .r4 .legend .who{font-size:13.5px;color:var(--g-300)}
 .r4 .legend .who.sys{grid-area:syscap;margin-bottom:8px}.r4 .legend .who.joni{grid-area:joncap;margin-bottom:4px}
}
@media(max-width:360px){.hero .r4 .iphone{--pw:232px;width:232px;--phone-scale:calc(.831 * 232 / 300)}}

/* #start: infinite logo carousel by category. Mono logos (white) on dark tiles, the real colours on a light tile on hover / focus.
   Pauses on hover, keyboard focus, the pause button, and off screen. Reduced motion = static grid by category. */
.logo-rail{max-width:1120px;margin:0 auto 40px;position:relative}
.rail-view{position:relative;overflow:hidden;height:92px;display:flex;align-items:center;border-radius:18px;outline:none;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.rail-view:focus-visible{box-shadow:inset 0 0 0 2px var(--brand,#79dfcc);-webkit-mask-image:none;mask-image:none}
.rail-track{display:flex;width:max-content;animation:rail-rtl var(--rail-dur,90s) linear infinite;will-change:transform;backface-visibility:hidden}
@keyframes rail-rtl{from{transform:translate3d(0,0,0)}to{transform:translate3d(50%,0,0)}}
.logo-rail:hover .rail-track,.rail-view:focus-visible .rail-track,.logo-rail.is-paused .rail-track,.logo-rail.is-off .rail-track{animation-play-state:paused}
.rail-set{display:flex;align-items:center;gap:14px;margin:0;padding:0 0 0 14px;list-style:none}
.rail-group{display:flex;align-items:center;gap:12px}
.rail-cat{display:inline-flex;align-items:center;gap:8px;padding:0 6px 0 8px;font-size:13px;font-weight:600;color:var(--brand,#79dfcc);white-space:nowrap;letter-spacing:.1px}
.rail-cat:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.rail-logos{display:flex;align-items:center;gap:12px;margin:0;padding:0;list-style:none}
.lg{position:relative;display:grid;place-items:center;height:62px;min-width:118px;padding:0 24px;border-radius:16px;background:#1c2124;
 border:1px solid #ffffff12;box-shadow:inset 0 1px 0 #ffffff08;transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease}
.lg img{grid-area:1/1;display:block;height:var(--h);width:auto;max-width:none;transition:opacity .3s ease}
.lg .lg-m{opacity:.84}.lg .lg-c{opacity:0}
.lg.wm span{font-size:15.5px;font-weight:700;color:#d7dfdc;white-space:nowrap;letter-spacing:-.1px;transition:color .3s ease}
.lg.wm.lat span{font-size:16.5px;letter-spacing:.2px}
.lg.watch{display:flex;gap:10px;color:#d7dfdc;font-size:14.5px;font-weight:600;white-space:nowrap}
.lg.watch svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--brand,#79dfcc)}
@media(hover:hover){.lg:hover{background:#f4f6f5;border-color:#fff;box-shadow:0 6px 18px #0006}
 .lg:hover .lg-m{opacity:0}.lg:hover .lg-c{opacity:1}.lg.wm:hover span,.lg.watch:hover{color:#12302a}.lg.watch:hover svg{color:#1f8a72}}
.rail-view:focus-visible .lg{background:#f4f6f5;border-color:#fff}.rail-view:focus-visible .lg-m{opacity:0}.rail-view:focus-visible .lg-c{opacity:1}
.rail-view:focus-visible .lg.wm span,.rail-view:focus-visible .lg.watch{color:#12302a}
.rail-foot{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:12px}
.rail-note{margin:0;font-size:12.5px;line-height:1.5;color:var(--g-400,#9aa3a0)}
.rail-pause{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:999px;border:1px solid #ffffff26;background:transparent;
 color:var(--g-300,#c4ccc9);font:inherit;font-size:12.5px;cursor:pointer}
.rail-pause:hover{border-color:#79dfcc80;color:#fff}.rail-pause:focus-visible{outline:2px solid var(--brand,#79dfcc);outline-offset:2px}
.rail-pause svg{width:14px;height:14px;fill:currentColor}.rail-pause .ic-play{display:none}
.logo-rail.is-paused .rail-pause .ic-play{display:block}.logo-rail.is-paused .rail-pause .ic-pause{display:none}
@media(max-width:699px){.logo-rail{margin-bottom:30px;margin-inline:-20px}.rail-view{height:80px;border-radius:0}
 .lg{height:54px;min-width:100px;padding:0 18px;border-radius:14px}.lg img{height:calc(var(--h) * .86)}
 .lg.wm span{font-size:14.5px}.lg.wm.lat span{font-size:15px}.lg.watch{font-size:13.5px}.rail-cat{font-size:12.5px}.rail-foot{padding:0 20px}}
@media(prefers-reduced-motion:reduce){
 .rail-view{display:block;height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
 .rail-track{animation:none;transform:none;width:auto;display:block}
 .rail-set[aria-hidden]{display:none}
 .rail-set{display:grid;gap:22px;padding:0;justify-items:center}
 .rail-group{flex-direction:column;gap:10px}
 .rail-logos{flex-wrap:wrap;justify-content:center}
 .rail-pause{display:none}
 .lg,.lg img,.lg span{transition:none}
}
@media(prefers-reduced-motion:reduce) and (max-width:699px){.logo-rail{margin-inline:0}.lg{min-width:0}}
/* review aid: /?pending outlines every pending (amber) and trial (blue) item */
.show-pending [data-pending="1"]{outline:2px dashed #f5a524!important;outline-offset:2px}
.show-pending [data-trial="1"]{outline:2px dashed #7aa2ff!important;outline-offset:2px}
/* round 4b (11-07): one set. Every tile is the same box (152x62; mobile 128x52); each logo is sized + centred by one optical rule
   (tools/logo-raster.mjs: equal visual area + ink weight, mass-centred) inside a 116x38 logo box; flat white mono, own colours on hover/focus.
   The company-watch tile spans exactly two boxes, wordmark tiles wrap inside one box. */
.lg{box-sizing:border-box;width:152px;min-width:0;height:62px;padding:0 18px;flex:none}
.lg img{width:var(--w);height:var(--h);transform:translateY(var(--dy,0px))}
.lg .lg-m{opacity:.86}
.lg.wm span{display:block;max-width:116px;font-size:15px;line-height:1.15;white-space:normal;text-align:center;text-wrap:balance}
.lg.wm.lat span{font-size:16px;letter-spacing:.3px}
.lg.watch{width:316px;justify-content:center;font-size:14.5px}
@media(max-width:699px){.lg{width:128px;height:52px;padding:0 15px;border-radius:13px}
 .lg img{width:calc(var(--w) * .84);height:calc(var(--h) * .84);transform:translateY(calc(var(--dy,0px) * .84))}
 .lg.wm span{max-width:98px;font-size:13px}.lg.wm.lat span{font-size:14px}.lg.watch{width:268px;font-size:13px}}
@media(prefers-reduced-motion:reduce) and (max-width:699px){.lg{min-width:0;width:128px}.lg.watch{width:268px}}

/* ===== round 5 (11-08, Elia review of r4c) =====
   hero: the original live composition (v8.css) again, .r4 rules no longer match. Only change: the laptop shows the real desktop
   board at every width (below 700px live showed two cropped phone cards; now the same desktop screenshot, top of the page). */
@media(max-width:699px){.hero .r5 .board-display>.board-image{display:block;position:static;width:100%;height:100%;float:none;top:auto;right:auto;max-width:none;object-fit:cover;object-position:top center}}
/* sources stats: weekly new jobs + companies (landing-numbers.json) */
.sources-stats.r5 dd{white-space:nowrap}
/* demo-data caption, next to the product screens */
.how .demo-note{margin:30px auto 0;text-align:center;font-size:13px;line-height:1.5;color:var(--g-400)}
/* morning: the narrative block of the old #why, its own section */
.value-story.morning{padding:84px 28px 88px}
.morning-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 80px;align-items:end;max-width:1180px}
.morning .eyebrow{color:#2f6f60;font-size:15px;margin:0}
.morning h2{font-size:clamp(30px,3.4vw,48px);line-height:1.3;letter-spacing:-.8px;margin:12px 0 0;color:#151719}
.morning-body>p{font-size:18px;line-height:1.85;color:#4c5760;margin:0;max-width:540px}
.morning .value-signature{margin-top:22px}
@media(max-width:899px){.morning-layout{grid-template-columns:1fr;gap:16px}}
@media(max-width:699px){.value-story.morning{padding:44px 20px 48px}.morning h2{font-size:28px;margin-top:8px}.morning-body>p{font-size:16px;line-height:1.75}}
/* FAQ: the 4 questions, own section */
.value-story.faq{padding:80px 28px 88px}
.faq-layout{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px 76px;align-items:start;max-width:1180px}
.faq .eyebrow{color:#2f6f60;font-size:15px;margin:0}
.faq h2{font-size:clamp(26px,2.6vw,36px);line-height:1.3;letter-spacing:-.6px;margin:10px 0 0;color:#151719}
@media(max-width:899px){.faq-layout{grid-template-columns:1fr;gap:20px}}
@media(max-width:699px){.value-story.faq{padding:44px 20px 48px}.faq h2{font-size:26px}}
/* signup: one line about price */
.free-note{margin:14px auto 0;max-width:470px;font-size:13px;line-height:1.65;color:var(--g-300)}
#entry-status:empty{margin:0}
.consent.nudge{animation:a4j-nudge 1.6s ease;border-radius:10px}
@keyframes a4j-nudge{0%,100%{box-shadow:0 0 0 0 #79dfcc00}25%,60%{box-shadow:0 0 0 6px #79dfcc40}}
@media(prefers-reduced-motion:reduce){.consent.nudge{animation:none}}
/* final CTA: one button, back to the signup card (the consent flow stays the only way in) */
.go{background:var(--ink);padding:56px 28px}
.go-in{max-width:980px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px 32px;flex-wrap:wrap;padding:26px 30px;border:1px solid #79dfcc25;border-radius:22px;background:radial-gradient(ellipse at 100% 0,#79dfcc12,transparent 60%),#1b1e21}
.go-copy{display:flex;align-items:center;gap:14px}
.go-copy img{width:52px;height:52px;border-radius:50%;background:#24332f;flex:none}
.go h2{margin:0;font-size:clamp(22px,2.4vw,30px);line-height:1.3;letter-spacing:-.4px;color:#fff}
.go .cta{width:auto;min-width:300px}
@media(max-width:699px){.go{padding:36px 20px}.go-in{flex-direction:column;text-align:center;padding:24px 18px}.go-copy{flex-direction:column;gap:10px}.go .cta{width:100%;min-width:0}}
/* footer: logo + line, grouped links, language switch, thin (c) row */
footer.site-foot{display:block;max-width:none;margin:0;padding:0;border-top:1px solid var(--line-dark);background:var(--ink);text-align:start;color:var(--g-300);font-size:14px}
.ft-in{max-width:1264px;margin:auto;padding:52px 28px 40px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr);gap:32px 48px;align-items:start}
.ft-brand .ft-logo{display:inline-block;border-radius:6px}
.ft-brand img{display:block;width:128px;height:auto}
.ft-brand p{margin:14px 0 0;font-size:15.5px;line-height:1.6;color:var(--g-300);max-width:320px}
.ft-h{margin:4px 0 12px;font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--g-400)}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.ft-col a{display:inline-flex;align-items:center;min-height:36px;color:#e6eaec;text-decoration:none;font-size:15px;line-height:1.4;text-underline-offset:4px}
.ft-col a:hover{color:var(--brand);text-decoration:underline;text-decoration-color:#79dfcc80}
.ft-lang ul{display:flex;flex-wrap:wrap;gap:8px}
.ft-lang a{min-height:38px;padding:0 15px;border:1px solid #ffffff22;border-radius:999px;font-size:14px}
.ft-lang a:hover{text-decoration:none;border-color:#79dfcc80}
.ft-lang a[aria-current="page"]{border-color:#79dfcc66;color:var(--brand);background:#79dfcc12}
.site-foot a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:6px}
.ft-lang a:focus-visible{border-radius:999px}
.ft-bottom{border-top:1px solid var(--line-dark)}
.ft-bottom p{max-width:1264px;margin:auto;padding:16px 28px 22px;font-size:12.5px;color:var(--g-400)}
@media(max-width:899px){.ft-in{grid-template-columns:1fr 1fr}.ft-brand{grid-column:1/-1}}
@media(max-width:699px){.ft-in{padding:36px 20px 28px;gap:26px 20px}.ft-col a{min-height:44px}.ft-lang a{min-height:44px}.ft-bottom p{padding:14px 20px 20px}}
@media(max-width:420px){.ft-in{grid-template-columns:1fr}}
.ft-lang a[lang="ar"]{font-size:15.5px}
@media(max-width:699px){.ft-in{gap:22px 20px}.ft-col ul{gap:0}.ft-h{margin-bottom:4px}.ft-lang ul{margin-top:6px}}

/* ux-r1 (11-08): contrast with existing tokens; locked start button lets the tap through to the form */
.how .step .n{color:var(--brand-deep)}
.how .demo-note{color:var(--g-600)}
.question-number{color:var(--g-600)}
.video-duration{color:var(--g-600)}
#entry-form #enter:disabled{pointer-events:none}

/* ux-r2 (11-08): source monograms in Heebo (already loaded) instead of a 408KB Baloo download */
.src-list .src-tile{font-family:Heebo,Arial,sans-serif;font-weight:700}
.logo-rail .lg.wm,.logo-rail .lg.wm span{font-family:Heebo,Arial,sans-serif}

/* ux-r3 (11-08): one line under the narrative line: what the start button does (same colour as .start-line) */
.start-line:has(+.next-line){margin-bottom:6px}
.next-line{max-width:520px;margin:0 auto 22px;font-size:15px;line-height:1.6;color:#c3ccd1}
@media(max-width:699px){.next-line{font-size:14px;margin-bottom:18px}}

/* r6 (11-08): hero H1 green line wraps only between its two halves; "בקרוב" on the Employment Service tile */
.hero h1 .nw{white-space:nowrap}
@media(min-width:1080px){.hero h1{font-size:min(48px,calc(3.9vw - 4px))}}
@media(max-width:699px){.hero .iphone .message{font-size:19px;line-height:1.45}.hero .iphone .message small{font-size:12px}}
.lg .soon{position:absolute;top:3px;inset-inline-start:6px;padding:1px 5px 2px;border-radius:999px;font-size:10px;font-weight:600;line-height:1.1;color:#102320;background:var(--brand,#79dfcc)}
@media(max-width:699px){.lg .soon{top:2px;font-size:9.5px;padding:1px 4px 1px}}

/* r6b (11-08): "how it works" = 6 steps. 3+3 grid (>=1024) / 2 columns (700-1023) / swipe carousel + dots (<700).
   Each card: small screen (the same tiles, zoomed down) + number + title + one line. The rail is gone (cards carry the number). */
#how .journey{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:34px}
#how .step{display:flex;flex-direction:column;padding:12px 12px 20px;border-radius:20px}
#how .step .tile{--tz:.7;zoom:var(--tz);height:430px;min-height:0;flex:none;border-radius:13px}
#how .step .shot-tile{padding:14px}
#how .step .shot-tile.tall img{width:100%;height:100%;max-height:none;object-fit:cover;object-position:50% 100%}
#how .step .actor{margin:16px 4px 4px;font-size:12.5px}
#how .step h3{display:flex;align-items:center;gap:10px;margin:0 4px;font-size:19px;line-height:1.35;font-weight:600}
#how .step .n{display:inline-grid;place-items:center;flex:none;min-width:30px;height:24px;padding:0 6px;border-radius:999px;background:#e3f6f1;color:#1f6b5c;font-size:12px;font-weight:700;letter-spacing:.3px}
#how .step>p:last-child{margin:6px 4px 0;font-size:15px;line-height:1.6}
#how .how-dots{display:none}
@media(min-width:1024px) and (max-width:1279px){#how .step .tile{--tz:.66;height:450px}#how .step h3{font-size:18px}#how .step>p:last-child{font-size:14.5px}}
@media(min-width:700px) and (max-width:1023px){#how .journey{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#how .step .tile{--tz:.66;height:470px}}
/* <700: one card per view with a peek of the next, snap, dots */
@media(max-width:699px){
 #how .journey{display:flex;gap:12px;margin:24px -20px 0;padding:2px 20px 10px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:20px;overscroll-behavior-x:contain;scrollbar-width:none}
 #how .journey::-webkit-scrollbar{display:none}
 #how .journey:focus-visible{outline:2px solid #2f7fe0;outline-offset:-2px;border-radius:12px}
 #how .step{flex:0 0 82%;scroll-snap-align:start;scroll-snap-stop:always}
 #how .step .tile{--tz:.78;height:560px}
 #how .step h3{font-size:18.5px}#how .step>p:last-child{font-size:15px}
 #how .how-dots{display:flex;justify-content:center;gap:2px;margin-top:8px}
 #how .how-dots button{width:24px;height:24px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
 #how .how-dots button::before{content:'';width:8px;height:8px;border-radius:999px;background:#7d878d;transition:width .2s ease,background-color .2s ease}
 #how .how-dots button[aria-current]::before{width:20px;background:#1f6b5c}
 #how .how-dots button:focus-visible{outline:2px solid #2f7fe0;outline-offset:1px;border-radius:6px}
}
@media(prefers-reduced-motion:reduce){#how .how-dots button::before{transition:none}}
/* chat tiles inside the smaller screens: start from the top, no extra bottom fade */
#how .step .tile.chat-tile{justify-content:flex-start;gap:6px;padding:62px 12px 12px}
#how .sim-tile{gap:5px}
#how .chat-tile .message{flex-shrink:0}
.wa-t{display:block;font-weight:600;margin-bottom:1px}
.message .fb{display:block}.message .fb+.fb{margin-top:3px}.message .fb.nq{margin-top:6px}
/* 04: the system's applications log (r8; was the send sheet + "soon" pop-up) */
.send-tile{background:#edf0f1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 18px}
.bm{width:100%;max-width:340px;background:#fff;border-radius:14px;padding:16px 16px 14px;box-shadow:0 1px 2px #1517191a,0 8px 22px #15171914;color:#151719;font-size:13px;line-height:1.5}
.bm-title{margin:0 0 10px;font-size:16px;font-weight:700}
.bm-job{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:1px solid #e3e7e9;border-radius:11px;background:#fafafb}
.bm-job small{display:block;font-size:11.5px;font-weight:600;color:#5f676e}.bm-job b{display:block;font-size:14px}
.bm-site{flex:none;padding:2px 9px;border-radius:999px;background:#fdf1dc;color:#8a5300;box-shadow:inset 0 0 0 1px #f1d29b;font-size:11.5px;font-weight:700}
.bm-lead{margin:10px 0 8px}
.bm-facts{margin:0 0 10px;padding:0 11px;border:1px solid #e3e7e9;border-radius:11px}
.bm-facts div{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid #e3e7e9}.bm-facts div:last-child{border:0}
.bm-facts dt{color:#5f676e}.bm-facts dd{margin:0;font-weight:600}

/* r6b: logo carousel categories = a clear chip with a divider before each group; a smaller, quieter pause button */
.rail-set{gap:0}
.rail-group{gap:12px;padding-inline:14px 18px;position:relative}
.rail-group::before{content:'';position:absolute;inset-inline-start:0;top:50%;width:1px;height:46px;transform:translateY(-50%);background:linear-gradient(transparent,#ffffff2e,transparent)}
.rail-cat{height:40px;padding:0 15px 0 14px;gap:9px;border-radius:999px;font-size:15.5px;font-weight:700;color:#eaf8f4;background:#79dfcc14;box-shadow:inset 0 0 0 1px #79dfcc47}
.rail-cat:before{width:9px;height:9px;opacity:1;background:var(--brand,#79dfcc);box-shadow:0 0 0 3px #79dfcc2e}
.rail-foot{justify-content:flex-end;margin-top:8px;padding-inline:6px}
.rail-pause{min-height:28px;padding:2px 10px 2px 9px;gap:5px;border-color:#ffffff1c;font-size:12px;color:#aeb8b4}
.rail-pause svg{width:11px;height:11px}
@media(max-width:699px){.rail-cat{height:36px;font-size:14px;padding:0 12px}.rail-group{padding-inline:12px 14px}.rail-group::before{height:40px}.rail-foot{padding:0 16px}}
@media(prefers-reduced-motion:reduce){.rail-group{padding-inline:0}.rail-group::before{display:none}}

/* r8 (11-08): landing-review-1 fixes */
/* skip link */
.skip-link{position:absolute;z-index:100;top:8px;inset-inline-start:8px;padding:12px 16px;border-radius:10px;background:#79dfcc;color:#102320;font-weight:700;text-decoration:none;transform:translateY(-200%)}
.skip-link:focus{transform:none;outline:2px solid #fff;outline-offset:2px}
main:focus{outline:none}
/* 04: applications log */
.alog .bm-title{margin-bottom:2px}
.al-sub{margin:0 0 10px;color:#5f676e;font-size:12px}
.al-list{margin:0;padding:0;list-style:none;border:1px solid #e3e7e9;border-radius:11px;overflow:hidden}
.al-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 11px;border-bottom:1px solid #e3e7e9}
.al-row:last-child{border:0}.al-row.is-new{background:#eef8f5}
.al-job small{display:block;font-size:11.5px;font-weight:600;color:#5f676e}.al-job b{display:block;font-size:13.5px;line-height:1.35}
.al-st{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:3px}.al-st small{font-size:11px;color:#5f676e;white-space:nowrap}
.al-chip{padding:1px 9px 2px;border-radius:999px;font-size:11.5px;font-weight:700}
.al-chip.sent{background:#e3f4ef;color:#1f6b5c;box-shadow:inset 0 0 0 1px #b9e3d7}.al-chip.int{background:#e7eefc;color:#2a55a8;box-shadow:inset 0 0 0 1px #c3d3f3}
.al-note{display:flex;align-items:center;gap:7px;margin:10px 0 0;font-size:12.5px;font-weight:600;color:#1f6b5c}
.al-note svg{flex:none;width:18px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* hero: demo-data note under the mockup */
.scene .legend .hero-demo-note{display:block;font-size:12px;color:var(--g-400,#8b959b)}
.r5 .legend{flex-wrap:wrap}
/* CTA arrow (the flex button trims the plain space) + no orphan words in the step lines / start line */
.cta-arrow{margin-inline-start:.4em}
#how .step>p:last-child,.start-line{text-wrap:pretty}
/* carousel heading */
.rail-head{margin:0 0 14px;text-align:center;font-size:15px;font-weight:600;color:#c9d3d0}
/* locked start button: helper line */
.enter-help{margin:10px auto 0;max-width:460px;text-align:center;font-size:13.5px;color:var(--g-300,#c2c8cd)}
.enter-help[hidden]{display:none}
/* touch targets >= 44px at phone widths */
@media(max-width:699px){
 .language-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;box-sizing:border-box}
 .hero .watch-link{min-height:44px;padding-block:0}
 .video-external{display:inline-flex;align-items:center;min-height:44px}
 #how .how-dots{gap:0}#how .how-dots button{width:44px;height:44px}
 .rail-pause{min-height:44px;padding-inline:14px}
 .consent a,.answer a{padding-block:12px}
}
/* r8b (11-08): landing-review-2 fixes */
/* touch targets >= 44px at every width (r8 did phones only); header logo link too */
.site-header>a:first-child,.ft-logo{display:inline-flex;align-items:center;min-height:44px}
.language-nav a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;box-sizing:border-box}
.hero .watch-link{display:inline-flex;align-items:center;min-height:44px;padding-block:0}
.video-external{display:inline-flex;align-items:center;min-height:44px}
.rail-pause{min-height:44px;padding-inline:14px}
.hero .watch-link:after,.video-external:after{bottom:8px}  /* keep the hairline under the text, not at the bottom of the 44px box */
/* start card in place: bottom sheet on phones, dialog on wider screens */
html.has-sheet .to-start .cta-arrow,html.has-sheet .go-btn .cta-arrow{display:none}
html.sheet-open{overflow:hidden}
dialog.start-sheet{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:92dvh;padding:0;border:0;background:transparent;color:inherit;overflow:auto;overscroll-behavior:contain}
dialog.start-sheet::backdrop{background:#0b0d0ecc}
dialog.start-sheet .signup-panel{margin:0;border-radius:22px 22px 0 0;border-bottom:0;padding:44px 20px calc(24px + env(safe-area-inset-bottom));background:radial-gradient(ellipse at 50% 0,#79dfcc0b,transparent 70%),#1b1e21}
dialog.start-sheet .signup-panel::before{content:'';position:absolute;top:10px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:2px;background:#ffffff2e}
dialog.start-sheet .large{width:52px;height:52px;margin-bottom:10px}
dialog.start-sheet .start-line{margin:10px 0 8px}dialog.start-sheet .next-line{margin:0 0 18px}
.sheet-close{position:absolute;z-index:2;top:8px;inset-inline-end:8px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#c2c8cd;cursor:pointer}
.sheet-close:hover{background:#ffffff12}.sheet-close:focus-visible{outline:2px solid #79dfcc;outline-offset:-2px}
.sheet-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
dialog.start-sheet[open]{animation:sheet-up .28s cubic-bezier(.2,.8,.2,1)}
@keyframes sheet-up{from{transform:translateY(40px);opacity:0}}
@media(min-width:700px){
 dialog.start-sheet{inset:0;margin:auto;width:min(620px,calc(100% - 48px));height:fit-content;border-radius:24px}
 dialog.start-sheet .signup-panel{border-radius:24px;border-bottom:1px solid #ffffff12;padding:44px 36px 32px}
 dialog.start-sheet .signup-panel::before{display:none}
 dialog.start-sheet[open]{animation-name:sheet-in}
 @keyframes sheet-in{from{transform:scale(.97);opacity:0}}
}
@media(prefers-reduced-motion:reduce){dialog.start-sheet[open]{animation:none}}
dialog.start-sheet .signup-panel{position:relative}
.answer a[dir=ltr]{unicode-bidi:isolate}