*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #fffdf8; --green: #1D9E75; --green-dark: #0F6E56; --green-light: #e8f7f2; --text: #2C2C2A; --text-muted: #555450; --text-faint: #888780; --border: rgba(0,0,0,0.10); --radius: 20px; } body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; } /* ── Layout helpers ── */ .section-inner { max-width: 900px; margin: 0 auto; padding: 0 24px; } /* ── Nav ── */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(255,253,248,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .nav-inner { max-width: 900px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; /* Keep logo-left / actions-right regardless of locale — unlike content, a nav bar swapping sides between languages reads as the page jumping around rather than as correct RTL behavior. Pinning direction here overrides the automatic flex-order reversal that [dir="rtl"] on would otherwise apply to this row. */ direction: ltr; } .nav-logo { font-size: 24px; font-weight: 800; color: var(--green); letter-spacing: -0.5px; } .nav-family { font-size: 14px; font-weight: 700; color: var(--green); text-decoration: none; } .nav-family:hover { text-decoration: underline; } .lang-switch { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; font-weight: 700; background: var(--green-light); border-radius: 20px; padding: 4px 6px; margin-inline-end: 20px; } .lang-switch-link { color: var(--text-muted); text-decoration: none; padding: 3px 8px; border-radius: 14px; } .lang-switch-link:hover { color: var(--green-dark); background: rgba(255,255,255,0.6); } .lang-switch-current { color: #fff; background: var(--green); padding: 3px 8px; border-radius: 14px; } .lang-switch-sep { display: none; } .nav-cta { background: var(--green); color: #fff; text-decoration: none; padding: 10px 20px; border-radius: 10px; font-size: 15px; font-weight: 700; transition: opacity 0.1s; } .nav-cta:active { opacity: 0.85; } /* ── Hero ── */ .hero { padding: 20px 0 32px; } /* Outer column: the two-pane row (text + mascot) on top, then the CTA and microcopy as their own full-width block below — NOT squeezed into the ~2/3 text column, which is what was causing the button label and microcopy to wrap awkwardly on mobile. */ .hero-inner { max-width: 900px; margin: 0 auto 28px; padding: 0 24px; } /* Two badges (age range, minutes/day), free of the two-pane row below — same reasoning as .hero-cta/.hero-microcopy: this is a full-width fact row, not squeezed into the ~2/3 text column. */ /* No wrap: both badges must stay on one line even on narrow phones. gap is allowed to shrink (via clamp) rather than the row wrapping, and each .hero-badge can shrink slightly (flex-shrink, no longer flex:0) instead of forcing a second line. */ .hero-badges { display: flex; flex-wrap: nowrap; gap: clamp(6px, 2vw, 10px); margin-bottom: 16px; } /* Two-pane row: headline/copy on one side, Badr clearly visible beside it — not the device (that's now its own full-width block below, see .hero-device-wrap). Mascot takes a real, deliberate third of the row's width rather than a small floating afterthought — text stays start-aligned (left in LTR, right in RTL) the same way it does on desktop; there is no reason to center it once the mascot is properly composed alongside it. */ .hero-top { display: flex; align-items: center; gap: 24px; margin-bottom: 20px; } .hero-text { flex: 1 1 0; min-width: 0; } .hero-cta { display: inline-block; } .hero-inner .hero-microcopy { display: block; } /* width:vw, NOT a flex-basis percentage — confirmed live via DevTools that flex-basis:32% was rendering at roughly double the intended share (259px in a 382px row, ~68% not 32%). vw is relative to the viewport (not the flex container), so it sidesteps whatever was causing that flex-basis miscalculation entirely. 35vw so it reads as a real third of a typical ~380-430px phone screen (~135-150px) — the previous 20vw floored out at 90px on every phone size, which is why it looked tiny everywhere; this is the actual arithmetic fix, not another guess. */ .hero-mascot-aside { flex: 0 0 auto; width: clamp(120px, 32vw, 180px); height: auto; filter: drop-shadow(0 10px 16px rgba(16, 40, 32, 0.14)); } .hero-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--green-light); color: var(--green-dark); font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 50px; letter-spacing: 0.3px; white-space: nowrap; } .hero-badge svg { flex: 0 0 auto; } .hero-title { font-size: clamp(26px, 4.5vw, 40px); font-weight: 900; line-height: 1.15; letter-spacing: -1px; color: var(--text); margin-bottom: 8px; } .hero-beat { font-size: clamp(16px, 2.5vw, 19px); font-weight: 700; color: var(--green-dark); line-height: 1.4; margin-bottom: 10px; } .hero-microcopy { font-size: 13px; color: var(--text-muted); margin-top: 10px; } .hero-microcopy-check { color: var(--green); font-weight: 700; margin-inline-end: 4px; } .hero-sub { font-size: clamp(15px, 2.2vw, 17px); color: var(--text-muted); line-height: 1.55; /* no margin-bottom: this is the last child inside .hero-top, whose own margin-bottom already sets the gap before the CTA below — the two were stacking (18px + 20px = 38px), which is what made the gap look oversized. */ max-width: 440px; } /* ── Hero recitation device ── Flat (no 3D tilt), scales with the viewport instead of the demo's JS perspective/fit math — a landing hero has one layout to solve, not several preview sizes, so plain responsive CSS is enough. */ /* ── Device sizing model ── .hero-device is always 320×240 AT MOST (width:100% of the wrap, which caps at 320px; aspect-ratio:4/3 derives the matching height). Every value inside it (padding, font-size, margins) is expressed as a cqw percentage computed FROM that known 320×240 target — see the math in each rule's comment. This is the same container-query mechanism used earlier, but every number below is derived from real arithmetic against the box's actual known dimensions, not eyeballed against a screenshot. container-type must be `size` (not `inline-size`) so cqh is also available for anything that needs to respect the box's height, not just its width. */ /* Now a full-width block of its own below the hero text (not squeezed beside it), so it can render bigger/more legibly. Every value inside is cqw/cqh derived from the 320×240 reference box (see comment above), which is what makes it safe to size this much larger here — nothing inside was hand-tuned to the old 320px cap. */ .hero-device-wrap { position: relative; max-width: 340px; width: min(92%, 340px); margin: 0 auto; aspect-ratio: 4 / 3; container-type: size; } /* 10px / 320px = 3.125cqw */ .hero-device { width: 100%; height: 100%; border-radius: 24px; background: linear-gradient(145deg, #3a4348 0%, #22292c 26%, #0d1114 62%, #2b3336 100%); padding: 3.125cqw; box-shadow: 0 20px 50px rgba(16, 40, 32, 0.18), 0 4px 12px rgba(16, 40, 32, 0.10); box-sizing: border-box; } .hero-screen { width: 100%; height: 100%; border-radius: 14px; background: linear-gradient(180deg, #f7faf8, #eef3f0); display: flex; flex-direction: row; /* stretch (not center): .hero-mascot-pane's two flex:1 children (the status card and Badr's half) need the pane to actually fill the row's full height to have real space to split — center left it sized to its own shrunk content instead, which is why the card was coming out short/narrow-looking regardless of its own width:100%. */ align-items: stretch; direction: ltr; } /* 14px / 320px = 4.375cqw. The whole left column is split into two EQUAL halves — thought box on top, Badr below — via flex:1 on both children, not implicit sizing + centering (that's what made the box tiny/floaty before: nothing was actually claiming half the space). */ .hero-mascot-pane { flex: 0 0 36%; display: flex; flex-direction: column; padding: 4.375cqw; gap: 2cqh; } /* "Thought box" — fixed size (exactly half the column's height, via flex:1 below, matched by .hero-mascot-half claiming the other half), text sits inside it and wraps instead of truncating so longer status strings are never cut off. Same visual language as the app's own Badr instruction card (.learn-badr-msg in learn.css: tan background, rounded corners). Waveform sits above the text, inside the same box — reuses the exact bar pattern from placement.css's .waveform. */ .hero-status { flex: 1 1 0; width: 100%; background: #f0ece4; border-radius: 3cqw; font-family: system-ui, sans-serif; font-size: 4.6cqh; font-weight: 700; line-height: 1.25; text-align: center; color: var(--text, #2c2c2a); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6cqh; padding: 0 2cqw; box-sizing: border-box; } .hero-status-text { overflow-wrap: break-word; } .hero-status-waveform { display: flex; align-items: center; justify-content: center; gap: 3px; height: 5cqh; } .hero-status-waveform .bar { width: 3px; border-radius: 2px; background: var(--green); height: 20%; animation: heroWave 0.7s ease-in-out infinite; } /* Once the playthrough ends (replay icon showing), the waveform freezes flat instead of bouncing forever — it should only look "listening" while something is actually being recited. */ .hero-status-waveform.paused .bar { animation-play-state: paused; height: 20% !important; } .hero-status-waveform .bar:nth-child(1) { animation-delay: 0s; --h: 40%; } .hero-status-waveform .bar:nth-child(2) { animation-delay: 0.1s; --h: 80%; } .hero-status-waveform .bar:nth-child(3) { animation-delay: 0.2s; --h: 100%; } .hero-status-waveform .bar:nth-child(4) { animation-delay: 0.1s; --h: 65%; } .hero-status-waveform .bar:nth-child(5) { animation-delay: 0.05s; --h: 50%; } @keyframes heroWave { 0%, 100% { height: 20%; } 50% { height: var(--h, 60%); } } /* Claims exactly the other half of the column (see .hero-status above), so Badr is no longer squeezed into whatever space happened to be left over — this is a real, defined region, not implicit centering. */ .hero-mascot-half { flex: 1 1 0; width: 100%; display: flex; align-items: center; justify-content: center; } .hero-mascot-img { width: 100%; height: auto; max-height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 10px 16px rgba(16, 40, 32, 0.18)); animation: badrFloat 5.5s ease-in-out infinite; } @keyframes badrFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* margin: reduced top/bottom (was 10px/320=3.125cqw) to give the sheet more vertical room in the box; right stays 3.125cqw, left 4px/320=1.25cqw. padding: 12px/320=3.75cqw, 14px/320=4.375cqw */ .hero-sheet { flex: 1 1 auto; background: var(--paper, #fff); border-radius: 16px; margin: 1.5cqw 3.125cqw 1.5cqw 1.25cqw; padding: 3.75cqw 4.375cqw; box-shadow: 0 10px 24px rgba(16, 40, 32, 0.08); } /* 4px / 320px = 1.25cqw */ .hero-ayah-block { padding-bottom: 1.25cqw; margin-bottom: 1.25cqw; border-bottom: 1px solid #eef3f0; } .hero-ayah-block:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } /* 15px / 240px (box height, not width — text height is what risks overflow) = 6.25cqh */ .hero-line-ar { direction: rtl; text-align: right; font-family: "Amiri", serif; font-size: 6.25cqh; font-weight: 700; line-height: 1.3; color: var(--green); } /* 9px / 240px = 3.75cqh */ .hero-line-tr { direction: ltr; text-align: left; font-family: system-ui, sans-serif; font-size: 3.75cqh; font-weight: 600; line-height: 1.3; color: var(--ink-soft, #4f9c78); margin-top: 1px; } /* four states: unrecited (invisible, space reserved), green, red, skipped */ .hero-w, .hero-t { display: inline-block; opacity: 0; transform: translateY(4px); color: var(--green); transition: opacity 0.3s ease, transform 0.3s ease, color 0.3s ease; } .hero-w.shown, .hero-t.on { opacity: 1; transform: none; } .hero-w.st-red { color: #c0392b; } /* skipped: the slot keeps its width, text goes invisible, red rule underneath so nothing reflows when a word is re-attributed. */ .hero-w.st-skip { color: transparent; box-shadow: inset 0 -0.07em 0 0 #c0392b; } .hero-mark { display: inline-block; width: 0.5em; height: 0.5em; margin: 0 0.12em; border: 1px solid #8a8a86; border-radius: 50%; color: #8a8a86; font-size: 0.45em; line-height: 0.46em; text-align: center; vertical-align: middle; font-family: "Amiri", serif; } /* Positioned relative to the DEVICE box (cqw/cqh, same mechanism as everything else here), not the viewport — a viewport-relative offset (the previous clamp(...,-2vw,...)) is disconnected from the device's actual rendered size and could push the button somewhere unpredictable on a device that renders small. Sitting fully inside the bottom-right corner (positive offsets only) also means it can never end up partially or fully off the device's own box, regardless of size. */ .hero-unmute { position: absolute; bottom: -4cqh; right: 4cqw; z-index: 2; height: 40px; padding: 0 16px 0 12px; border-radius: 10px; border: none; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; box-shadow: 0 2px 8px rgba(16, 40, 32, 0.25); transition: opacity 0.1s, padding 0.25s ease; } .hero-unmute-label { font-size: 13px; font-weight: 700; white-space: nowrap; } /* Soft pulsing ring, invitation to tap. JS sets this span's display:none directly the moment the button is first clicked (see hero-recitation.js), which is what stops the animation permanently — no class/attribute toggling here, just plain display. */ .hero-unmute-ring { position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--green); opacity: 0; pointer-events: none; animation: unmutePulse 2.2s ease-out infinite; } @keyframes unmutePulse { 0% { transform: scale(0.9); opacity: 0.6; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-unmute-ring { animation: none; } } .hero-unmute:active { opacity: 0.85; } /* Truly flat benefit row under the device, matching the actual mock: plain icon directly above a label, no card, no background, no border — nothing but icon + text sitting on the page background. */ .hero-mini-features { max-width: 900px; margin: 56px auto 0; padding: 0 24px; display: flex; gap: 12px; } .hero-mini-feature { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } /* PNGs recolored to the app's green via mask-image (background-color fills the shape, the PNG's alpha becomes the mask) rather than a filter/hue-rotate chain — a filter can't reliably hit an exact target color from arbitrary source art, a mask gives a pixel-perfect fill. */ .hero-mini-icon { display: inline-block; width: 36px; height: 36px; background-color: var(--green); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; } .hero-mini-feature span { font-size: 13px; font-weight: 600; color: var(--text-muted); line-height: 1.35; } /* ── Buttons ── Flat fill, no gradient, no "pressed keycap" ledge shadow — the previous 0 6px 0 offset-shadow treatment read as dated/gamified (skeuomorphic 3D button) rather than a serious-product CTA. Elevation is a small soft shadow at most; the press state is opacity/scale, not a collapsing shadow. */ .btn-primary { display: inline-block; background: var(--green); color: #fff; text-decoration: none; text-align: center; padding: 14px 28px; border-radius: 10px; font-size: 17px; font-weight: 700; box-shadow: 0 2px 8px rgba(16, 40, 32, 0.16); transition: opacity 0.1s, transform 0.1s; cursor: pointer; } .btn-primary:active { opacity: 0.88; transform: scale(0.98); } .btn-large { font-size: 18px; padding: 16px 32px; } /* ── Features ── */ .features { padding: 32px 0; background: #fff; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .section-title { font-size: clamp(22px, 4vw, 32px); font-weight: 800; text-align: center; margin-bottom: 24px; letter-spacing: -0.5px; } .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .feature-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; gap: 0; } .feature-card--soon { opacity: 0.85; } .feature-shot { background: #e8e4dc; padding: 16px 20px 0; display: flex; align-items: flex-end; justify-content: center; } .feature-shot img { display: block; width: 75%; max-width: 180px; height: auto; border-radius: 18px 18px 0 0; box-shadow: 0 8px 32px rgba(0,0,0,0.18); } .feature-body { padding: 20px 18px 24px; } .feature-portal-link { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--green); text-decoration: none; } .feature-portal-link:hover { text-decoration: underline; } .feature-soon-badge { display: inline-block; background: #fff3e0; color: #b45309; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 50px; margin-bottom: 8px; letter-spacing: 0.3px; text-transform: uppercase; } .feature-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 6px; color: var(--text); } .feature-card p { font-size: 14px; color: var(--text-muted); line-height: 1.6; } /* ── Feature card diagrams ── */ .fd-diagram { background: var(--bg); border-bottom: 1px solid var(--border); padding: 18px 16px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; min-height: 96px; justify-content: center; } .fd-diagram--muted { opacity: 0.5; } .fd-label { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); } /* Bar chart */ .fd-bars { display: flex; align-items: flex-end; gap: 5px; height: 52px; } .fd-bar { width: 16px; background: var(--green-light); border-radius: 4px 4px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 3px; transition: background 0.2s; } .fd-bar--today { background: var(--green); } .fd-bar span { font-size: 8px; font-weight: 700; color: var(--green-dark); line-height: 1; } .fd-bar--today span { color: #fff; } /* Hex tiles */ .fd-hexrow { display: flex; gap: 6px; align-items: center; } .fd-hex { width: 44px; height: 44px; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); display: flex; align-items: center; justify-content: center; } .fd-hex--green { background: #1D9E75; } .fd-hex--amber { background: #f59e0b; } .fd-hex--grey { background: #e2ddd5; } .fd-hex span { font-family: 'Amiri', serif; font-size: 8px; color: #fff; text-align: center; line-height: 1.2; padding: 0 3px; } .fd-hex--grey span { color: #888; } /* Word detection */ .fd-words { display: flex; gap: 6px; align-items: center; direction: rtl; flex-wrap: wrap; justify-content: center; } .fd-word { font-family: 'Amiri', serif; font-size: 17px; padding: 2px 6px; border-radius: 6px; line-height: 1.6; } .fd-word--ok { background: #d1fae5; color: #065f46; } .fd-word--err { background: #fee2e2; color: #991b1b; } .fd-word--miss { background: #fef3c7; color: #92400e; border: 1.5px dashed #f59e0b; } .fd-word-legend { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .fd-wl { font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 50px; } .fd-wl--ok { background: #d1fae5; color: #065f46; } .fd-wl--err { background: #fee2e2; color: #991b1b; } .fd-wl--miss { background: #fef3c7; color: #92400e; } /* Streak badges */ .fd-streaks { display: flex; gap: 4px; align-items: center; } .fd-streak-item { width: 32px; height: 32px; } .fd-streak-item img { width: 100%; height: 100%; object-fit: contain; } .fd-streak--dim img { opacity: 0.25; filter: saturate(0); } .fd-streak--bright img { filter: drop-shadow(0 2px 4px rgba(239,68,68,0.4)); } /* Family profiles */ .fd-profiles { display: flex; flex-direction: column; gap: 8px; width: 100%; } .fd-profile { display: flex; align-items: center; gap: 8px; } .fd-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--green-light); color: var(--green); font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .fd-profile-info { flex: 1; min-width: 0; } .fd-profile-name { font-size: 11px; font-weight: 700; color: var(--text); margin-bottom: 3px; } .fd-pbar { height: 5px; background: var(--green-light); border-radius: 50px; overflow: hidden; } .fd-pfill { height: 100%; background: var(--green); border-radius: 50px; } /* Islamic values ayah */ .fd-ayah { font-family: 'Amiri', serif; font-size: 15px; color: var(--green-dark); text-align: center; direction: rtl; line-height: 1.8; } @media (max-width: 700px) { .features-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 420px) { .features-grid { grid-template-columns: 1fr; } } /* ── How it works ── */ .how { padding: 32px 0; } .steps { display: flex; flex-direction: column; gap: 0; } .step { display: flex; align-items: flex-start; gap: 20px; } .step-number { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff; font-size: 18px; font-weight: 900; display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 0 var(--green-dark); } .step-text h3 { font-size: 18px; font-weight: 800; margin-bottom: 6px; padding-top: 10px; } .step-text p { font-size: 15px; color: var(--text-muted); line-height: 1.6; max-width: 520px; } .step-connector { width: 2px; height: 36px; background: var(--border); margin-left: 21px; } /* ── Quote ── */ .quote-section { padding: 28px 0; background: var(--green-light); border-top: 1px solid rgba(29,158,117,0.2); border-bottom: 1px solid rgba(29,158,117,0.2); } .quote { text-align: center; max-width: 600px; margin: 0 auto; } .quote-arabic { font-family: 'Amiri', serif; font-size: clamp(22px, 4vw, 32px); line-height: 1.8; color: var(--green-dark); direction: rtl; margin-bottom: 10px; } .quote-english { font-family: 'Amiri', Georgia, serif; font-size: clamp(16px, 2.5vw, 22px); line-height: 1.5; color: var(--green-dark); opacity: 0.75; margin-bottom: 16px; } .quote cite { font-size: 14px; font-style: normal; color: var(--text-faint); font-weight: 600; } /* ── CTA section ── */ .cta-section { padding: 32px 0; background: #fff; border-top: 1px solid var(--border); } .cta-inner { display: flex; align-items: center; gap: 40px; } .cta-badr { flex-shrink: 0; width: clamp(100px, 18vw, 160px); height: auto; animation: badrFloat 3s ease-in-out infinite; animation-delay: 0.5s; } .cta-text h2 { font-size: clamp(22px, 4vw, 32px); font-weight: 800; margin-bottom: 8px; letter-spacing: -0.5px; } .cta-text p { font-size: 16px; color: var(--text-muted); margin-bottom: 24px; } /* ── Footer ── */ .footer { padding: 28px 0; border-top: 1px solid var(--border); } .footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .footer-logo { font-size: 18px; font-weight: 800; color: var(--green); } .footer-copy { font-size: 13px; color: var(--text-faint); } .footer-link { font-size: 14px; font-weight: 700; color: var(--green); text-decoration: none; } .footer-link:hover { text-decoration: underline; } /* ── Responsive ── */ @media (max-width: 600px) { /* Keeps the phone view at the tighter two-level hero (title + subtitle) — the green "beat" line is desktop-only. */ .hero-beat--desktop { display: none; } /* Slightly tighter than desktop so both badges reliably fit on one line on narrow phones, without going as small as before. */ .hero-badge { padding: 6px 12px; font-size: 12px; } .hero-badge svg { width: 13px; height: 13px; } /* Nav: logo + language switcher + CTA is already three separate elements competing for width — the family portal link is a secondary path for returning guardians, not part of the landing page's conversion goal, and is still reachable from the footer. Drop it here rather than shrink everything to fit. */ .nav-family { display: none; } .nav-inner { padding: 12px 16px; } .lang-switch { margin-inline-end: 8px; } .hero-top { gap: 16px; } .hero-sub { max-width: 100%; } /* Considerably smaller than the desktop full-width block — at 94% it was dominating the whole screen below the fold; this keeps it a supporting demo, not the main event. ~10% smaller than the previous 68%/260px. */ .hero-device-wrap { width: 61%; max-width: 234px; margin: 0 auto; } .hero-unmute { height: 44px; } /* Hero CTA: full width and a smaller/tighter size than the desktop .btn-primary default so a longer label can't force a line wrap on narrow phones (this previously had no mobile override at all). Now free of the ~2/3 text column (see .hero-cta / .hero-top above), so full-width here means the actual row width, not a squeezed column. */ .hero-cta { display: block; width: 100%; font-size: 16px; padding: 16px 24px; white-space: nowrap; } .cta-inner { flex-direction: column; text-align: center; } .cta-text .btn-primary { display: block; text-align: center; } .footer-inner { flex-direction: column; align-items: center; text-align: center; } } @media (max-width: 420px) { /* Shorter phones (iPhone SE class): the final CTA section's desktop 72px top+bottom padding was pushing it (and its button) under the fold. Trim it here rather than everywhere, since the extra breathing room is fine on taller screens. */ .cta-section { padding: 40px 0; } }