/* v4.css: what v4 adds to the v3 design (real screenshots, the trust band, the film, the
 * coming-soon labels, the working form) and the layouts for tablets (≤ 960 px) and phones (≤ 600 px).
 * Arabic (right-to-left) adjustments are in rtl.css, loaded only by ar/index.html. */

/* ── skip link, language link, menu button ── */
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: #fff; color: #101828; font: 800 15px var(--body); text-decoration: none; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.skip:focus { top: 12px; }
.nav-in { position: relative; }
.nav-links .nav-lang { font-family: 'Cairo', var(--body); font-weight: 800; }
.nav-links .nav-lang[lang=en] { font-family: var(--body); }
.nav-toggle { display: none; width: 44px; height: 44px; flex: none; border-radius: 12px; border: 0; background: rgba(127,127,127,.18); cursor: pointer; padding: 0; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform .3s var(--swift), opacity .2s; }
.nav-toggle[aria-expanded=true] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded=true] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded=true] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── hero art: a real Blocks screenshot + chips, Qubi and the seal (all kept off the stage in the shot) ── */
.hero-art { position: relative; width: 100%; max-width: 720px; margin-inline-start: auto; aspect-ratio: 1.12 / 1; }
.hero-art .shot-frame { position: absolute; left: 4%; top: 15%; width: 94%; transition: translate .6s var(--swift); }
.shot-frame.tilt { transform: perspective(2000px) rotateY(-9deg) rotateX(3deg); }
.hero-art .st-leap { left: -9%; top: -5%; height: 30%; width: auto; }
.ach.a1 { right: -3%; top: 5%; animation: floatA 6s ease-in-out infinite; }
.ach.a2 { left: -7%; top: 87%; animation: floatB 7s ease-in-out infinite; }
.ach.a3 { right: 16%; bottom: -8%; animation: floatA 6.5s ease-in-out infinite; }
.hero-art .seal { right: -6%; top: 74%; width: 19%; }

/* a browser-style frame around real screenshots */
.shot-frame { margin: 0; border-radius: 18px; background: #fff; overflow: hidden; box-shadow: 0 50px 100px -40px rgba(0,0,0,.55), 0 0 0 1px rgba(16,24,40,.08); }
.dark .shot-frame { box-shadow: 0 60px 120px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.14), 0 0 90px -30px rgba(43,163,242,.45); }
.shot-bar { height: 36px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid #EEF0F4; font: 800 12px var(--body); color: #667085; white-space: nowrap; overflow: hidden; }
.shot-bar .dots { gap: 6px; } .shot-bar .dots i { width: 10px; height: 10px; }
.shot-frame img { display: block; width: 100%; height: auto; }

/* ── trust band: schools and credentials, right under the hero ── */
.trust { position: relative; z-index: 2; background: #fff; border-bottom: 1px solid var(--line); padding: 30px var(--gut) 32px; }
.trust-in { max-width: 1240px; margin: 0 auto; display: grid; gap: 16px; justify-items: center; text-align: center; }
.trust-lead { margin: 0; font: 900 13px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #667085; }
.trust-schools { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 30px; font: 700 clamp(16px, 1.45vw, 21px) var(--display); color: var(--ink); }
.trust-schools .more { color: var(--muted); font: 800 15px var(--body); }
.trust-creds { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trust-creds li { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 14px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--line); text-align: start; }
.trust-creds i { width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--c) 40%, #fff), var(--c)); box-shadow: 0 6px 14px -6px var(--c); }
.trust-creds i::after { content: '★'; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 14px; }
.trust-creds b { display: block; font: 800 14px/1.15 var(--body); }
.trust-creds span { display: block; font: 700 12px/1.3 var(--body); color: var(--muted); }

/* ── the film ── */
.sec.film { padding-top: clamp(64px, 9vh, 110px); padding-bottom: clamp(56px, 8vh, 96px); }
.film-frame { position: relative; max-width: 1080px; margin: 32px auto 0; border-radius: 24px; overflow: hidden; background: #05070F; aspect-ratio: 16 / 9;
              box-shadow: 0 50px 100px -40px rgba(16,24,40,.6), 0 0 0 1px rgba(16,24,40,.08); }
.film-video { display: block; width: 100%; height: 100%; background: #05070F; object-fit: cover; }
.film-play { position: absolute; inset: 0; margin: auto; width: 96px; height: 96px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
             background: linear-gradient(135deg, #FFB820, #FF8A00); box-shadow: 0 20px 50px -10px rgba(255,138,0,.8), 0 0 0 12px rgba(255,255,255,.28); transition: transform .4s var(--swift); }
.film-play:hover { transform: scale(1.08); }
.film-play svg { width: 40px; height: 40px; fill: #101828; margin-left: 6px; }
.film-frame.playing .film-play, html:not(.js) .film-play { display: none; }
.film-note { text-align: center; margin: 14px 0 0; font: 800 13px var(--mono); letter-spacing: .06em; color: #667085; }

/* ── why: the four skills in one line, and the "why programs stall" card ── */
.skills { margin: 28px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font: 700 17px var(--body); color: var(--muted); }
.skills span { padding: 6px 13px; border-radius: 999px; font: 800 14px var(--body); color: color-mix(in srgb, var(--c) 80%, #000); background: color-mix(in srgb, var(--c) 12%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 30%, #fff); }
.stall-card { margin-top: 64px; border-radius: 32px; padding: clamp(26px, 4vw, 52px); box-shadow: 0 50px 100px -50px rgba(5,7,15,.8); }
.stall-card .glow.gb { width: 900px; height: 900px; left: -420px; top: -520px; }
.stall-in { position: relative; z-index: 2; }
.stall-card .sub-title { color: #fff; font-size: clamp(26px, 2.6vw, 40px); }
.stall-sub { margin: 12px 0 0; max-width: 860px; font: 700 clamp(16px, 1.3vw, 19px)/1.55 var(--body); color: #B4C6E4; }
.stall-card .conclude { margin-top: 28px; }

/* ── coming soon ── */
.eng-tags .soon { background: #F2F4F7; color: #667085; font-style: italic; }
.soon-badge { display: inline-block; align-self: flex-start; margin-top: 10px; padding: 5px 10px; border-radius: 999px; background: #101828; color: #FFB820; font: 900 11px var(--body); letter-spacing: .12em; text-transform: uppercase; position: relative; z-index: 2; }
.tile.soon { border-style: dashed; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--a) 6%, #fff) 0 14px, #fff 14px 28px); }
.mk.soon .soon-badge { position: absolute; top: 30px; left: 30px; margin: 0; }
.mk.soon .mk-art { opacity: .78; filter: saturate(.7); }

/* ── tools: small tiles keep their sentence; real screenshots on the big and wide ones ── */
.tile:not(.big):not(.wide) .tile-art { width: 36%; height: 42%; top: 14px; right: 12px; bottom: auto; }
.tile:not(.big):not(.wide) .tile-cat { max-width: 60%; }
.tile:not(.big):not(.wide) h3 { margin-top: auto; }
.tile:not(.big):not(.wide) p { max-width: 100%; font-size: 13.5px; }
.tile p code { font: 700 12.5px var(--mono); background: rgba(16,24,40,.06); padding: 1px 5px; border-radius: 5px; white-space: nowrap; }
.tile.shot .tile-art { display: none; }
.tile-shot { position: absolute; overflow: hidden; border-radius: 14px 0 0 0; background: #fff; box-shadow: 0 20px 40px -16px rgba(16,24,40,.45), 0 0 0 1px rgba(16,24,40,.08); transition: transform .6s var(--swift); }
.tile-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.tile.wide.shot .tile-shot { right: 0; bottom: 0; width: 50%; height: 80%; }
.tile.wide.shot p { max-width: 46%; }
.tile.big.shot .tile-shot { left: 22px; right: 0; bottom: 0; height: 64%; }
.tile.big.shot p { max-width: 92%; }
.tile.shot:hover .tile-shot { transform: translateY(-4px); }

/* ── AI: list, pause control, the real extension cards ── */
.ai-list .ds { display: none; }
.ai-pause { margin-top: 16px; display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 999px; border: 0; cursor: pointer;
            background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #DCEBFF; font: 800 14px var(--body); }
.ai-pause:hover { background: rgba(255,255,255,.14); }
.ai-pause::before { content: ''; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.ai-pause[aria-pressed=true]::before { width: 0; height: 0; border-right: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.ai-cards-wrap { position: relative; z-index: 2; max-width: 1400px; margin: 64px auto 0; }
.ai-cards-lead { margin: 0 0 14px; font: 900 13px var(--body); letter-spacing: .16em; text-transform: uppercase; color: #9FB3D3; }
.ai-cards { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.ai-cards li { border-radius: 14px; overflow: hidden; box-shadow: 0 20px 40px -20px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.1); }
.ai-cards img { display: block; width: 100%; height: auto; }

/* ── hands-on: the simulator, as it really looks ── */
.sim-feature { max-width: 1240px; margin: 18px auto 0; display: grid; grid-template-columns: 1fr .9fr; gap: clamp(24px, 4vw, 60px); align-items: center; padding: clamp(22px, 3vw, 40px);
               border-radius: 28px; background: #fff; box-shadow: 0 30px 60px -36px rgba(16,24,40,.45), 0 0 0 1px rgba(16,24,40,.06); }
.sim-copy p { margin: 12px 0 18px; font: 700 17px/1.6 var(--body); color: var(--muted); }
.sim-copy b { color: var(--ink); }
.sim-shot { margin: 0; justify-self: center; width: 100%; max-width: 460px; border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(16,24,40,.5), 0 0 0 1px rgba(16,24,40,.08); }
.sim-shot img { display: block; width: 100%; height: auto; }

/* ── teachers, leaders, the partnership ── */
.lead-block { max-width: 1240px; margin: 56px auto 0; display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 3vw, 40px);
              border-radius: 28px; background: color-mix(in srgb, #FF8A00 6%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, #FF8A00 24%, #fff); }
.lead-copy p { margin: 12px 0 0; font: 700 17px/1.6 var(--body); color: var(--muted); }
.journey { margin-top: clamp(64px, 9vh, 110px); }

/* ── the form ── */
.cta-sub { max-width: 640px; margin: 16px 0 0; font: 700 clamp(17px, 1.6vw, 20px)/1.55 var(--body); color: #B4C6E4; }
.lead { position: relative; width: min(860px, 100%); margin-top: 26px; padding: clamp(18px, 3vw, 30px); border-radius: 26px; text-align: start;
        background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px -30px rgba(43,163,242,.45); }
.lead-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.lead-grid .wide { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; font: 800 14px var(--body); color: #DCEBFF; }
.fld i { font-style: normal; font-weight: 700; color: #8FA6C8; }
.fld input, .fld textarea { width: 100%; min-height: 50px; border: 0; border-radius: 14px; padding: 12px 14px; background: rgba(255,255,255,.08); color: #fff;
        box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.2); font: 700 16px var(--body); outline: 0; transition: box-shadow .2s, background .2s; }
.fld textarea { resize: vertical; min-height: 92px; }
.fld input:focus, .fld textarea:focus { box-shadow: inset 0 0 0 2px #7CC8FF; background-color: rgba(255,255,255,.13); }
.fld [aria-invalid=true] { box-shadow: inset 0 0 0 2px #F43F5E; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.lead-privacy { margin: 14px 0 0; font: 700 13px/1.5 var(--body); color: #8FA6C8; }
.lead .btn { margin-top: 16px; width: 100%; }
.lead .btn[disabled] { opacity: .7; cursor: progress; }
.lead-msg { min-height: 1.4em; margin: 14px 0 0; font: 800 16px/1.5 var(--body); color: #86EFAC; text-align: center; }
.lead-msg.bad { color: #FDA4AF; }

/* ══════════ tablets and small laptops ══════════ */
@media (max-width: 1100px) {
    .rail { display: none; }
    .nav-in { justify-content: space-between; gap: 10px; }
    .nav-toggle { display: inline-flex; }
    .nav-cta { margin-left: auto; }
    .nav-links { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); margin: 0; flex-direction: column; gap: 2px; padding: 10px; border-radius: 20px;
                 background: rgba(10,17,40,.97); color: #fff; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.1); }
    .nav[data-theme=light] .nav-links { background: rgba(255,255,255,.98); color: var(--ink); box-shadow: 0 30px 60px -20px rgba(16,24,40,.4), inset 0 0 0 1px rgba(16,24,40,.08); }
    .nav.open .nav-links { display: flex; }
    .nav-links a { padding: 13px 14px; font-size: 17px; }
}

@media (max-width: 960px) {
    .shero { min-height: 0; }
    .shero-in { grid-template-columns: 1fr; padding-top: 112px; padding-bottom: 64px; }
    .hero-art { max-width: 600px; margin: 18px auto 0; }
    .vs, .shift { grid-template-columns: 1fr; }
    .vs-arrow, .shift-arrow { justify-self: center; transform: rotate(90deg); }
    .brands, .sys { grid-template-columns: 1fr; }
    .path-track { height: auto; margin-top: 30px; }
    .path-svg, .path-qubi { display: none; }
    .steps4 { position: static; grid-template-columns: 1fr 1fr; }
    .step { opacity: 1; transform: none; }
    .demo-row { grid-template-columns: 1fr; margin-top: 40px; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .ai-in { grid-template-columns: 1fr; }
    .ai-cards { grid-template-columns: repeat(3, 1fr); }
    .sim-feature, .hw-in, .lead-block, .teach-grid, .show-grid { grid-template-columns: 1fr; }
    .hw-board, .hw-art:hover .hw-board { transform: none; }
    .make-grid { grid-template-columns: 1fr 1fr; }
    .phases { grid-template-columns: 1fr; gap: 34px; }
    .phase p { min-height: 0; }
    .pub-card { grid-template-columns: 1fr; justify-items: start; }
    .cta-qubi { height: 150px; }
}

/* ══════════ phones ══════════ */
@media (max-width: 600px) {
    :root { --gut: 16px; }
    .nav { top: 10px; }
    .nav-in { height: 58px; padding: 0 8px 0 12px; border-radius: 18px; }
    .nav-logo img { height: 34px; }
    .nav-cta { --h: 40px; padding: 0 14px; font-size: 14px; }
    .sec { padding-top: 64px; padding-bottom: 64px; }
    .shero-in { padding-top: 96px; padding-bottom: 48px; }
    .shero-title { font-size: 31px; line-height: 1.15; }
    .sec-title { font-size: 34px; line-height: 1.1; }
    .sec-title.sm { font-size: 30px; }
    .cta-title { font-size: 32px; }
    .sec-sub { font-size: 17px; }
    .btn { height: auto; min-height: var(--h); padding-top: 10px; padding-bottom: 10px; white-space: normal; text-align: center; }
    .hero-cta .btn { width: 100%; }
    .hero-facts { gap: 16px 22px; margin-top: 30px; }
    .hero-facts b { font-size: 28px; }
    .hero-art { margin-top: 28px; }
    .ach { font-size: 12px; gap: 6px; padding: 6px 9px 6px 6px; border-radius: 12px; }
    .ach-ic { width: 24px; height: 24px; padding: 5px; border-radius: 8px; }
    .ach b { width: 17px; height: 17px; font-size: 10px; }
    .ach.a1 { right: -1%; top: 3%; } .ach.a2 { left: -1%; top: 90%; } .ach.a3 { right: 18%; bottom: -14%; }
    .hero-art .seal { width: 22%; right: -2%; top: 78%; }
    .hero-art .st-leap { left: -1%; top: -4%; height: 27%; }
    .trust { padding: 24px var(--gut); }
    .trust-schools { gap: 6px 18px; font-size: 16px; }
    .trust-creds li { padding: 6px 10px 6px 6px; }
    .film-play { width: 72px; height: 72px; box-shadow: 0 16px 40px -10px rgba(255,138,0,.8), 0 0 0 8px rgba(255,255,255,.28); }
    .film-play svg { width: 30px; height: 30px; }
    .film-frame { border-radius: 16px; }
    .vs-card { padding: 18px; }
    .vs-code { font-size: 14px; }
    .stall-card { border-radius: 24px; padding: 22px 18px; margin-top: 48px; }
    .shift-col { padding: 18px; }
    .steps4 { grid-template-columns: 1fr; }
    .try-bar { gap: 8px; padding: 0 10px; height: 54px; }
    .try-bar .dots { display: none; }
    .try-tabs button { padding: 7px 9px; font-size: 13px; }
    .try-body { grid-template-columns: 1fr; height: auto; }
    .try-code { height: 270px; border-right: 0; border-bottom: 1px solid #EEF0F4; }
    .try-stage { height: 200px; }
    .pane.code { font-size: 12px; padding: 16px 10px; }
    .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .tile, .tile.big, .tile.wide { grid-column: auto; grid-row: auto; min-height: 168px; }
    .tile:not(.shot) p, .tile:not(.big):not(.wide):not(.shot) p, .tile:not(.big):not(.wide):not(.shot) h3 { max-width: 62%; }
    .tile:not(.shot):not(.big):not(.wide) h3 { margin-top: 6px; }
    .tile:not(.shot) .tile-art, .tile:not(.big):not(.wide):not(.shot) .tile-art { width: 32%; height: auto; top: 50%; bottom: auto; right: 14px; translate: 0 -50%; aspect-ratio: 1.2; }
    .tile.shot { padding-bottom: 0; }
    .tile.shot p, .tile.big.shot p, .tile.wide.shot p { max-width: 100%; }
    .tile.shot .tile-shot, .tile.big.shot .tile-shot, .tile.wide.shot .tile-shot { position: relative; inset: auto; width: auto; height: auto; aspect-ratio: 16 / 10; margin: 16px -22px 0 0; }
    .ai-list button { padding: 10px; gap: 8px; font-size: 13px; }
    .ai-list .ic { width: 28px; height: 28px; padding: 6px; }
    .ai-card { min-width: 50%; max-width: 64%; padding: 10px 12px; font-size: 12px; }
    .ai-card p { display: none; }
    .ai-cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .stage-label { font-size: 16px; }
    .sim-feature { padding: 18px; border-radius: 22px; }
    .make-grid { grid-template-columns: 1fr; }
    .mk-art { height: 190px; }
    .hw-cta .btn { width: 100%; }
    .t-card { padding: 20px; }
    .gov-list { grid-template-columns: 1fr; }
    .lead-block { padding: 20px; border-radius: 22px; }
    .show-grid .qr { width: 150px; height: 150px; }
    details { padding: 0 18px; }
    summary { font-size: 18px; padding: 18px 0; }
    .lead-grid { grid-template-columns: 1fr; }
    .lead { padding: 16px; border-radius: 20px; }
    .cta-bricks { width: 150px; height: 140px; }
    .cta-qubi { display: none; }
    .foot-cols { gap: 28px; }
}

/* the curriculum card's three points */
.t-ticks { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 10px; }
.t-ticks li { position: relative; padding: 11px 14px 11px 44px; border-radius: 14px; background: #FFF8E8; font: 700 15px/1.45 var(--body); color: var(--ink); }
.t-ticks li::before { content: '✓'; position: absolute; left: 12px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #FFB820; color: #101828; font: 900 12px var(--body); }

/* Blockduino hotspots near the board's edges: open their label inwards (no sideways scroll on phones) */
.hs.l span { left: -8px; transform: translate(0, 6px); }
.hs.r span { left: auto; right: -8px; transform: translate(0, 6px); }
.hs.l:hover span, .hs.l:focus-visible span, .hs.l.on span, .hs.r:hover span, .hs.r:focus-visible span, .hs.r.on span { transform: none; }
main { overflow-x: clip; }

/* the grade cards sit in normal flow under the road, so longer text (Arabic) never overlaps the demo */
.path-track { height: auto; }
.steps4 { position: relative; top: auto; margin-top: 270px; }
.tile.big.shot .tile-shot { height: 56%; }
/* the Blocks tile keeps the whole stage in view: Qubi's feet on wide screens, Nova on phones */
@media (min-width: 601px) { .tile.big.shot .tile-shot { right: 22px; height: 58%; border-radius: 14px 14px 0 0; } }
@media (min-width: 601px) and (max-width: 960px) { .tile.big { grid-row: span 3; } .tile.big.shot .tile-shot { height: 68%; } }
.tile.big.shot .tile-shot img { object-position: right center; }
@media (max-width: 960px) { .steps4 { margin-top: 0; } }

/* ══════════ the split (2026-10-17): the tools summary, the tools page ══════════ */

/* ── the tools, short version ── */
.tool-groups { max-width: 1240px; margin: 34px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: start; }
.tg { border-radius: 22px; padding: 18px; background: color-mix(in srgb, var(--c) 7%, #fff); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c) 28%, #fff); }
.tg-h { margin: 0 0 10px; font: 900 12px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--c); }
.tg ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.tg li { padding: 10px 12px; border-radius: 12px; background: #fff; font: 700 13.5px/1.35 var(--body); color: var(--muted); box-shadow: 0 8px 18px -14px rgba(16,24,40,.4); }
.tg li b { display: block; font: 700 17px/1.25 var(--display); color: var(--ink); }
.tg li.soon { background: rgba(255,255,255,.55); box-shadow: none; outline: 1.5px dashed color-mix(in srgb, var(--c) 45%, #fff); outline-offset: -1.5px; color: #667085; font-style: italic; }
.tool-shots { max-width: 1240px; margin: 22px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.tool-highlights { max-width: 1240px; margin: 22px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.th { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 22px; background: #fff; text-decoration: none; color: var(--ink);
      box-shadow: 0 24px 50px -32px rgba(16,24,40,.45), 0 0 0 1px rgba(16,24,40,.06); transition: transform .4s var(--swift), box-shadow .3s; }
.th:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -28px color-mix(in srgb, var(--c) 60%, transparent), 0 0 0 2px var(--c); }
.th-ic { width: 42px; height: 42px; border-radius: 12px; padding: 10px; background: var(--c); margin-bottom: 6px; }
.th-ic svg { width: 100%; height: 100%; display: block; }
.th b { font: 700 21px/1.2 var(--display); }
.th span { font: 700 15px/1.5 var(--body); color: var(--muted); }
.th i { margin-top: auto; padding-top: 8px; font: 800 14px var(--body); font-style: normal; color: var(--c); }
.see-all { text-align: center; margin: 30px 0 0; }

/* ── the tools page ── */
.page-hero { padding: 150px var(--gut) 80px; }
.page-hero-in { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; }
.page-title { margin: 0; font: 700 clamp(40px, 5vw, 76px)/1.06 var(--display); letter-spacing: -0.012em; }
.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.jump a { padding: 9px 16px; border-radius: 999px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); color: #DCEBFF; text-decoration: none; font: 800 15px var(--body); transition: background .2s; }
.jump a:hover { background: rgba(255,255,255,.16); }
.back { margin: 22px 0 0; }
.back a { color: #9FB3D3; font: 800 15px var(--body); text-decoration: none; }
.back a:hover { color: #fff; }
.nav-links a[aria-current=page] { opacity: 1; background: rgba(127,127,127,.18); }
.sec.path .demo-row { margin-top: 26px; }
.show-grid.one { grid-template-columns: 1fr; }
.cta-band { padding: clamp(70px, 10vh, 110px) var(--gut); text-align: center; }
.cta-band-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.cta-band .sec-sub { margin-left: auto; margin-right: auto; }
.cta-band .btn { margin-top: 26px; }

@media (max-width: 960px) {
    .tool-groups { grid-template-columns: 1fr 1fr; }
    .tool-shots, .tool-highlights { grid-template-columns: 1fr; }
    .page-hero { padding-top: 120px; padding-bottom: 64px; }
}
@media (max-width: 600px) {
    .tool-groups { grid-template-columns: 1fr; }
    .page-hero { padding-top: 104px; padding-bottom: 52px; }
    .page-title { font-size: 36px; }
    .jump a { font-size: 14px; padding: 8px 13px; }
}