direct child also clips horizontally, so any child that escapes the body-level clip (e.g. a nested overflow:visible chain) still can't push the page sideways on mobile. */ #root, #root > div { max-width: 100vw; overflow-x: hidden; position: relative; } section { max-width: 100vw; overflow-x: hidden; position: relative; } } /* ───────────────────────────────────────────────────────── ≤ 900px — tablet & phone ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* ─── Section paddings ──────────────────────────────────── */ section[id="compare"], section[id="reach"], section[id="pricing"], section[id="configure"], section[id="ask"], section[id="security"] { padding: 56px 18px !important; scroll-margin-top: 60px !important; } section[id="journey"], section[id="live"] { padding-left: 0 !important; padding-right: 0 !important; } /* ─── Container max-widths fluid ────────────────────────── */ [style*="max-width: 1280"], [style*="max-width: 1200"], [style*="max-width: 1100"], [style*="max-width: 980"], [style*="max-width: 960"], [style*="max-width: 920"], [style*="max-width: 880"], [style*="max-width: 820"], [style*="max-width: 800"], [style*="max-width: 760"], [style*="max-width: 720"] { max-width: 100% !important; } /* ─── Multi-col grids → single column ───────────────────── */ /* Catches all common explicit grid-template patterns used in the React code. We declare BOTH variants for each pattern — one with spaces after commas, one without — because browsers normalize React's inline styles unpredictably (Chrome strips the space inside minmax/repeat parens, Safari often keeps it). Limited to inside

so we don't stomp on tweaks-panel or design-canvas internals. */ section [style*="grid-template-columns: 1fr 1.6fr"], section [style*="grid-template-columns: 1.6fr 1fr"], section [style*="grid-template-columns: 1fr 1.4fr"], section [style*="grid-template-columns: 1.4fr 1fr"], section [style*="grid-template-columns: 1fr 1.2fr"], section [style*="grid-template-columns: 1.2fr 1fr"], section [style*="grid-template-columns: 1fr 1.5fr"], section [style*="grid-template-columns: 1.5fr 1fr"], section [style*="grid-template-columns: 1fr 1.1fr"], section [style*="grid-template-columns: 1.1fr 1fr"], section [style*="grid-template-columns: 1fr 2fr"], section [style*="grid-template-columns: 2fr 1fr"], section [style*="grid-template-columns: 7fr 5fr"], section [style*="grid-template-columns: 5fr 7fr"], section [style*="grid-template-columns: 1fr 1fr"], section [style*="grid-template-columns: repeat(2"], section [style*="grid-template-columns: repeat(3"], section [style*="grid-template-columns: repeat(5"], section [style*="grid-template-columns: minmax(0, auto)"], section [style*="grid-template-columns: minmax(0,auto)"], section [style*="grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)"], section [style*="grid-template-columns: minmax(0,1fr) minmax(0,1fr)"], section [style*="grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr)"], section [style*="grid-template-columns: minmax(0,1.1fr) minmax(0,1fr)"] { grid-template-columns: 1fr !important; gap: 18px !important; } /* 4-col grids (compare metric tiles, security badges, tools grid) get a 2-col layout on phone — single column would waste space and lose the "scoreboard" feel of those tiles. */ section [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; } /* Flex rows that should wrap. Many of the inline flex rows ship without flex-wrap on the assumption they fit; force wrap so toolbars, button rows, badge clusters all behave. */ section [style*="display: flex"][style*="gap"] { flex-wrap: wrap !important; } /* ─── Type scale (display headings) ─────────────────────── */ section h1, section h2 { font-size: clamp(28px, 7.5vw, 44px) !important; line-height: 1.06 !important; letter-spacing: -0.02em !important; } section h3 { font-size: clamp(20px, 5vw, 28px) !important; line-height: 1.15 !important; } /* Massive editorial inline-styled "display" sizes (40px+) get coerced down. The selector matches anything declaring a font size in the 40-100px range via inline style. */ section [style*="fontSize: 40"], section [style*="fontSize: 42"], section [style*="fontSize: 44"], section [style*="fontSize: 46"], section [style*="fontSize: 48"], section [style*="fontSize: 52"], section [style*="fontSize: 56"], section [style*="fontSize: 60"], section [style*="fontSize: 64"], section [style*="fontSize: 72"], section [style*="fontSize: 88"], section [style*="fontSize: 96"], section [style*="fontSize: 120"], section [style*="font-size: 40"], section [style*="font-size: 48"], section [style*="font-size: 56"], section [style*="font-size: 64"], section [style*="font-size: 72"] { font-size: clamp(28px, 7vw, 42px) !important; } /* Body copy paragraphs at 18-22px → 15px. */ section p[style*="font-size: 18"], section p[style*="font-size: 19"], section p[style*="font-size: 20"], section p[style*="font-size: 22"], section p[style*="fontSize: 18"], section p[style*="fontSize: 19"], section p[style*="fontSize: 20"], section p[style*="fontSize: 22"] { font-size: 15px !important; line-height: 1.55 !important; } } /* ───────────────────────────────────────────────────────── NAV — hamburger drawer ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { nav[style*="position: sticky"][style*="z-index: 50"] { padding: 10px 14px !important; } nav[style*="position: sticky"][style*="z-index: 50"] > div:first-child { gap: 10px !important; } /* Hide the section-link rail. JS still renders it; we simply don't show it on mobile. The hamburger is the entry point. */ nav[style*="position: sticky"][style*="z-index: 50"] > div:first-child > div:nth-child(2) { display: none !important; } /* Hide the outlined "Calculate Savings" button and shrink the primary CTA so the hamburger has room. */ nav[style*="position: sticky"][style*="z-index: 50"] > div:last-child > a:first-child { display: none !important; } nav[style*="position: sticky"][style*="z-index: 50"] > div:last-child > a.ed-btn-primary { padding: 8px 12px !important; font-size: 12px !important; } } .yw-hamb { display: none; width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); align-items: center; justify-content: center; color: #fff; padding: 0; margin: 0; cursor: pointer; flex-shrink: 0; } .yw-hamb:focus-visible { outline: 2px solid #7c5cff; outline-offset: 2px; } .yw-hamb svg { width: 18px; height: 18px; } @media (max-width: 900px) { .yw-hamb { display: inline-flex; } } .yw-drawer { position: fixed; inset: 0; background: rgba(8, 8, 12, .94); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); z-index: 100; display: flex; flex-direction: column; padding: 18px 20px 32px; color: #fff; font-family: var(--font-body); overflow-y: auto; /* Keep horizontal containment — never let a transform push the drawer's bounding box past the viewport (the browser still measures transformed boxes for scrollWidth, which would force horizontal scroll on the page). */ max-width: 100vw; overflow-x: hidden; /* Closed: invisible + visibility hidden so the box is fully out of layout flow. We use opacity transition + a small vertical translate for the entry feel. */ opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.2,1), visibility 0s linear .26s; } .yw-drawer[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity .22s ease, transform .26s cubic-bezier(.2,.7,.2,1), visibility 0s linear 0s; } .yw-drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 36px; } .yw-drawer__close { width: 38px; height: 38px; border-radius: 8px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); display: inline-flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; } .yw-drawer__links { display: flex; flex-direction: column; gap: 4px; } .yw-drawer__links a { display: block; padding: 14px 4px; color: #fff; text-decoration: none; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--font-display, Georgia, serif); } .yw-drawer__links a:active { color: #c8b9ff; } .yw-drawer__cta { margin-top: auto; padding-top: 24px; display: flex; flex-direction: column; gap: 10px; } .yw-drawer__cta a { display: inline-flex; align-items: center; justify-content: center; padding: 14px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; } .yw-drawer__cta a.is-primary { background: #7c5cff; color: #fff; } .yw-drawer__cta a.is-ghost { border: 1.5px solid rgba(255,255,255,.4); color: #fff; } body[data-yw-drawer="true"] { overflow: hidden; } /* ───────────────────────────────────────────────────────── HERO (top section, no id) ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { #root > div > section:first-of-type { padding: 72px 18px 48px !important; } #root > div > section:first-of-type h1 { font-size: clamp(36px, 9vw, 56px) !important; line-height: 1.05 !important; } #root > div > section:first-of-type p { font-size: 16px !important; line-height: 1.5 !important; } /* Hero stat tower (the right-side stack of metric blocks). The 7fr/5fr grid collapses to 1 col by the global rule, but the stat tower itself still has fixed sizing inside. Allow it to expand fluidly. */ #root > div > section:first-of-type [style*="grid-template-columns: 7fr 5fr"] > div { width: 100% !important; } /* Faint background card grid was almost invisible on phone — bump brightness so the drift effect actually reads on small screens (still subtle enough not to compete with foreground content). */ .hero-cards-track { opacity: .65 !important; } /* Hero trust band (Trusted by + 400+ + logos). The desktop layout puts the count, a vertical divider, and the three logos on one row. On phone the row wraps and the 1px divider becomes a forlorn floating sliver between rows, while the gap-40 logo row crams against the screen edge. Force the band into a clean vertical stack: count → thin horizontal rule → logos in a wrapping row anchored to the left. */ .hero-trust-band { flex-direction: column !important; align-items: stretch !important; gap: 22px !important; margin-top: 36px !important; padding-top: 22px !important; } .hero-trust-divider { width: 100% !important; height: 1px !important; align-self: auto !important; margin: 0 !important; } .hero-trust-logos { gap: 24px 28px !important; width: 100% !important; flex: none !important; justify-content: flex-start !important; align-items: center !important; row-gap: 18px !important; } .hero-trust-logos img { height: 24px !important; max-width: 38vw !important; } } /* ───────────────────────────────────────────────────────── REACH — clean mobile rebuild ───────────────────────────────────────────────────────── * The desktop composition is a 640px-tall photo canvas with 7 absolute-positioned dashboard cards arranged in a 3-column collage. On mobile we kill the canvas + dock photo entirely (it leaves a giant black void with just a dim glow) and stack the cards vertically as a clean column. Cards keep their floating shadow + hover-float animations; the harbour photo does not earn its keep at phone scale. Class hooks: .rf-canvas outer 640px-tall positioned wrapper .rf-cards-layer the absolute layer holding all cards .rf-float-a/b/c individual card classes (set in JSX) ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Section header padding — desktop is 120px 32px 56px which leaves a giant empty band above the heading on phone. */ section[id="reach"] > div:first-child { padding: 56px 18px 24px !important; } /* Title is fontSize: 80 inline. Bring it down so it doesn't wrap to 4–5 lines on a 390px screen. */ section[id="reach"] h2 { font-size: 36px !important; line-height: 1.05 !important; } /* Body paragraph is fontSize: 20. Trim. */ section[id="reach"] [style*="font-size: 20px"] { font-size: 15px !important; line-height: 1.5 !important; padding-top: 0 !important; } /* Outer wrapper around the canvas had padding: 0 32px 72px. */ section[id="reach"] > div:nth-child(2) { padding: 0 14px 36px !important; } /* Canvas: drop the photo dock + hard height; let cards size it. Targets BOTH the explicit class (.rf-canvas, current JSX) AND the legacy [style*="height: 640"] selector as a safety net for stale-transpilation cases. */ section[id="reach"] .rf-canvas, section[id="reach"] [style*="height: 640"] { height: auto !important; border-radius: 0 !important; overflow: visible !important; padding: 0 !important; background: transparent !important; } /* Hide the DockBackdrop entirely — it's the first child of the canvas and is purely decorative. Use multiple properties so even if a later rule wins on `display`, it still collapses. */ section[id="reach"] .rf-canvas > div:first-child, section[id="reach"] [style*="height: 640"] > div:first-child { display: none !important; visibility: hidden !important; height: 0 !important; width: 0 !important; overflow: hidden !important; opacity: 0 !important; pointer-events: none !important; } /* Cards layer becomes a vertical stack. Note: we DON'T use the legacy [style*="position: absolute"][style*="inset: 0"] fallback here — it would also match the DockBackdrop (same inline styles) and re-show it as a flex stack, defeating the display:none above. */ section[id="reach"] .rf-cards-layer { position: static !important; inset: auto !important; display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 14px !important; } /* Each card flattens: cancel absolute coords, transforms, fixed widths. Animation off so cards don't visually wobble. By default each card spans BOTH columns (full-width row); the social pair below explicitly occupies one column each. */ section[id="reach"] .rf-cards-layer > .rf-float-a, section[id="reach"] .rf-cards-layer > .rf-float-b, section[id="reach"] .rf-cards-layer > .rf-float-c, section[id="reach"] .rf-cards-layer > div { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; grid-column: 1 / -1 !important; transform: none !important; animation: none !important; box-shadow: 0 12px 28px -10px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06) !important; } /* Pair the Instagram (5) and YouTube (6) social cards into one side-by-side row so they reclaim the empty horizontal space instead of stacking on their own lines. */ section[id="reach"] .rf-cards-layer > div:nth-child(5), section[id="reach"] .rf-cards-layer > div:nth-child(6) { grid-column: span 1 !important; min-width: 0 !important; } /* The hero "4.07" card has fontSize: 88 inline — too tall for phone. Bring the headline down. */ section[id="reach"] .rf-cards-layer .rf-float-b [style*="font-size: 88"], section[id="reach"] [style*="height: 640"] [style*="font-size: 88"] { font-size: 56px !important; } } /* ───────────────────────────────────────────────────────── COMPARE — metric tiles, expanded panel ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* The expanded panel under the metric tiles uses big inline paddings; trim. */ section[id="compare"] [style*="padding: 40"], section[id="compare"] [style*="padding: 48"] { padding: 22px !important; } } /* ───────────────────────────────────────────────────────── FEATURE MATRIX (light section between Reach & Pricing) The mobile rendering for this section is handled below via the .yw-matrix--mobile / .yw-matrix--desktop swap. ───────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────── PRICING — stack the asymmetric "Free / Paid" rail ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* The PRICING section has a left dark "Free" hero and a right light paid rail. They share a 2-col grid that the global rule already collapses; just trim the inner paddings. */ section[id="pricing"] [style*="padding: 48"], section[id="pricing"] [style*="padding: 56"], section[id="pricing"] [style*="padding: 64"] { padding: 28px !important; } /* The "$0 / Always free" hero card is sticky-top on desktop so it pins next to the paid rail as the user scrolls. On mobile the rail is stacked underneath, so a sticky pin would just glue the card to the top of the viewport and overlap the paid rail content. Disable sticky on phone — also kill it on ANY descendant of #pricing as a belt-and-suspenders, in case a future style adds another sticky child. */ section[id="pricing"] [style*="position: sticky"], section[id="pricing"] [style*="position:sticky"], section[id="pricing"] *[style*="sticky"], section[id="configure"] [style*="position: sticky"], section[id="configure"] [style*="position:sticky"], section[id="configure"] *[style*="sticky"], section[id="compare"] [style*="position: sticky"], section[id="compare"] [style*="position:sticky"], section[id="compare"] *[style*="sticky"] { position: static !important; top: auto !important; } /* Paid plans grid: keep 2 cards per row on mobile. The global 1fr-1fr collapse rule above forces this to single column, which leaves a lot of vertical scroll for ~6 small cards. The cards have a flip-to-detail eye icon that already gives each card a "tap for more" affordance, so 2-up reads great on phone — they're compact tiles, not paragraphs. */ section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } /* When a paid card flips to its detail face, the desktop card uses gridColumn: "1 / -1" to expand to full row. That works in a 2-col grid on mobile too — the flipped card spans both columns. No override needed. */ /* Trim the paid card padding so 2-up actually fits text. */ section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] .ed-card, section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] > div > div > div[style*="padding: 22"] { padding: 16px !important; } /* Smaller type for the plan name + price on phone so 2-up doesn't truncate. */ section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] [style*="font-size: 26"] { font-size: 22px !important; } section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] [style*="font-size: 15"][style*="font-weight: 600"] { font-size: 14px !important; } /* Bump the eye icon button to a comfortable touch target. The desktop button is 24×24 — bumping to 32×32 on phone so it's easy to hit without accidentally hitting copy. */ section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] button[aria-label^="Learn more"] { width: 32px !important; height: 32px !important; } /* Plan card header row (name | unit + eye). At 2-up width (~170px each on a 390px viewport) the row can get cramped. Tighten the inner unit/eye gap and let the unit shrink. */ section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] [style*="justify-content: space-between"][style*="align-items: center"] { gap: 6px !important; } section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] [style*="justify-content: space-between"][style*="align-items: center"] [style*="gap: 10"] { gap: 6px !important; } /* Flipped card detail face: trim padding for narrow cards. */ section[id="pricing"] [style*="grid-template-columns: 1fr 1fr"][style*="gap: 12"] .yw-flip-back { padding: 18px !important; } /* ─── §8c: PaidFlipCard → tap accordion on mobile ───────── Spec: "On mobile, the flip interaction must be replaced with a tap-to-expand accordion — CSS 3D transforms for flip cards are unreliable on iOS Safari." Strategy: keep the React click-to-flip state, but neutralize the 3D rotation on phone and restack front + back as vertical siblings. When `flipped` is false, the back face is still in the DOM with `position: absolute` — we hide it. When true, it's `position: relative` (set by JSX). We just need to: 1. Kill perspective + preserve-3d on the inner wrapper so there's no half-transformed flicker on iOS. 2. Reset `transform: rotateY(...)` on the inner wrapper AND the back face (which has rotateY(180deg) baked into its inline style to face away on desktop). 3. Disable backface-visibility hiding so the front face stays visible when the back is collapsed/expanded. 4. When the card is NOT flipped, the back face has inline `position: absolute; inset: 0` — hide it via display:none. When flipped, it's `position: relative` — show as block. 5. The flipped card uses `gridColumn: 1 / -1` to span both mobile columns, which is exactly what we want for the accordion-expanded state — no override needed there. Selectors target the structure inside the flip-card-grid: .yw-flip-grid > div[style*="perspective"] > div[style*="preserve-3d"] > div (front, ed-card) > div (back, has #0e0a18 background) */ /* Outer perspective wrapper: kill perspective so any residual transforms aren't 3D-projected. */ .yw-flip-grid > div[style*="perspective"] { perspective: none !important; } /* Inner flipper: kill preserve-3d + rotateY transform. Stack front + back as normal block children. */ .yw-flip-grid > div[style*="perspective"] > div[style*="preserve-3d"], .yw-flip-grid [style*="transform-style: preserve-3d"], .yw-flip-grid [style*="transformStyle"] { transform: none !important; transform-style: flat !important; -webkit-transform-style: flat !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; gap: 0 !important; } /* Front face (.ed-card): cancel backface-visibility (so it never hides on its own) and let it size naturally. The JSX sets `position: absolute; inset: 0` when flipped — undo that on mobile so the front stays in flow above the back. */ .yw-flip-grid > div[style*="perspective"] > div > .ed-card { position: relative !important; inset: auto !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; transform: none !important; } /* Back face: keyed off the `.yw-flip-back` class (we used to match by inline style `background: #0e0a18`, but Chromium normalizes hex colors to `rgb(14, 10, 24)` when serializing the style attr, so attribute selectors against the hex form silently miss). Strip the baked-in rotateY(180deg) and disable backface hiding. */ .yw-flip-grid .yw-flip-back { transform: none !important; backface-visibility: visible !important; -webkit-backface-visibility: visible !important; } /* When NOT flipped, the back face has inline `position: absolute; inset: 0` (set by JSX). Hide it on mobile so the card is just the collapsed front face. */ .yw-flip-grid .yw-flip-back[data-flipped="false"] { display: none !important; } /* When flipped, JSX switches the back face to `position: relative; inset: auto`. That now reads as a normal block beneath the front — exactly the accordion expansion we want. Add a thin top divider via margin so the visual transition feels intentional rather than two cards stacked accidentally. */ .yw-flip-grid .yw-flip-back[data-flipped="true"] { display: flex !important; margin-top: -1px !important; border-radius: 0 0 14px 14px !important; } /* When the back is showing, the front's bottom corners should square off so the two faces visually merge. We can't easily target "front-when-flipped" without a class, but the JSX conveniently puts the front into `position: absolute` ONLY when flipped — meaning when the front is `position: relative` AND it's a sibling to a `position: relative` back face, the card is in expanded state. Use :has() to detect this and square the front's bottom corners. */ .yw-flip-grid > div[style*="perspective"]:has(> div > .yw-flip-back[data-flipped="true"]) > div > .ed-card { border-radius: 14px 14px 0 0 !important; border-bottom: none !important; } /* ─── §8c-fix: back face must not crop its own content. ───── The JSX bakes `overflow: hidden` + `height: 100%` into the back face (so the desktop 3D flip clips cleanly). On mobile the back stacks below the front as an accordion expansion and needs to size to its content — otherwise the perks table / bullet list at the bottom is invisible. Also force the outer perspective wrapper + inner flipper + front face off `height: 100%` so the grid row auto-sizes to fit the (front + back) stack instead of locking to the tallest non-flipped sibling. */ .yw-flip-grid > div[style*="perspective"], .yw-flip-grid > div[style*="perspective"] > div[style*="preserve-3d"], .yw-flip-grid > div[style*="perspective"] > div > .ed-card { height: auto !important; } .yw-flip-grid .yw-flip-back { overflow: visible !important; height: auto !important; } /* The back face's inner content wrapper also has height: 100% (so the close button row pins to top on desktop). On mobile let it grow with content. */ .yw-flip-grid .yw-flip-back > div[style*="height: 100%"] { height: auto !important; } /* Perks table inside the back face: 3-column grid (1.4fr 0.9fr 1.1fr) is too tight on a ~290px-wide card. Restack as label-row + value-row pairs so nothing wraps into illegibility. */ .yw-flip-grid .yw-flip-back [style*="grid-template-columns: 1.4fr 0.9fr 1.1fr"] { grid-template-columns: 1fr 1fr !important; gap: 6px !important; } /* The header row (Service / Standard / Member) — let "Service" span both columns so the two price columns line up under it. */ .yw-flip-grid .yw-flip-back [style*="grid-template-columns: 1.4fr 0.9fr 1.1fr"][style*="border-bottom"]:first-of-type > div:first-child { grid-column: 1 / -1 !important; } /* For each data row, push the label to span both columns so the two price cells sit below it cleanly. Targets rows that contain a strike-through standard price. */ .yw-flip-grid .yw-flip-back [style*="grid-template-columns: 1.4fr 0.9fr 1.1fr"]:not([style*="border-bottom: 1px solid rgba(255,255,255,.18)"]) > div:first-child { grid-column: 1 / -1 !important; margin-bottom: 2px !important; font-weight: 600 !important; } } /* ───────────────────────────────────────────────────────── CONFIGURE — full mobile rebuild ───────────────────────────────────────────────────────── * Desktop layout: 2-col grid (inputs left, comparison right), inputs sticky, per-platform rows in a 4-col grid (name | bar | price | delta). Mobile reality: - 4-col grid (180px name + bar + 110 + 110) overflows hard. - Sticky inputs make no sense on a phone. - Headline savings card is 1fr auto with CTA col 200px wide. - Header is 1fr auto with sidebar copy on the right. - User on a phone needs to see THE NUMBER first, then tweak. Mobile rebuild: 1. Header: stack — eyebrow + h2 + sidebar copy in one column. 2. Region + persona toggles: full-width pills, 2 rows. 3. Reorder: comparison panel (savings) ABOVE inputs panel. 4. Headline savings card: stack savings number + CTA buttons. 5. Per-platform comparison rows: ditch 4-col grid; render as compact stacked cards — top row name + price, bottom row bar + delta chip. Hides the bar on really small screens. 6. Itemized breakdown: keep 1fr/auto rows; trim padding. 7. Sticky off (already handled). ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* ── Section padding tightening (already partially set globally; nail exact values for configure). */ section[id="configure"] { padding: 64px 16px !important; } section[id="configure"] > div { /* The maxWidth wrapper. Allow it to shrink. */ width: 100% !important; } /* ── 1. Header: 1fr auto → single column. */ section[id="configure"] > div > div[style*="grid-template-columns: 1fr auto"][style*="align-items: end"] { grid-template-columns: 1fr !important; gap: 16px !important; align-items: start !important; margin-bottom: 28px !important; } /* Smaller h2 + max-width relax so the headline fits on phone. */ section[id="configure"] h2 { font-size: clamp(30px, 8.5vw, 40px) !important; line-height: 1.05 !important; max-width: none !important; } /* The supporting copy on the right should not have a maxWidth cap on phone. */ section[id="configure"] > div > div[style*="grid-template-columns: 1fr auto"] [style*="max-width: 360"] { max-width: none !important; font-size: 13px !important; } /* ── 2. Region + persona segmented controls. */ /* The container is flex with gap:12 wrap, which is fine. The individual segmented pills ALREADY wrap (they're inline-flex pills inside a flex+wrap parent). Force each pill to span full width so each of region & persona gets its own row, comfortably tappable. */ section[id="configure"] [style*="display: inline-flex"][style*="padding: 4px"][style*="border-radius: 999px"] { display: flex !important; width: 100% !important; } section[id="configure"] [style*="display: inline-flex"][style*="padding: 4px"][style*="border-radius: 999px"] > * { flex: 1 !important; text-align: center !important; justify-content: center !important; } /* ── 3. Main grid: stack on mobile. (Keep desktop order: inputs first, then comparison panel — "Your team" sits right under the currency/persona toggles, then the savings hero + rows + breakdown follow as results of those inputs.) */ section[id="configure"] [style*="grid-template-columns: 1fr 1.6fr"] { display: flex !important; flex-direction: column !important; gap: 14px !important; } /* Inputs panel: trim the 28px padding that crowds phones. */ section[id="configure"] [style*="grid-template-columns: 1fr 1.6fr"] > div:first-child { padding: 20px 16px !important; } /* ── 4. Headline savings card: stack big number + CTA col. */ section[id="configure"] [style*="grid-template-columns: 1fr auto"][style*="align-items: end"][style*="padding: 32px"] { grid-template-columns: 1fr !important; padding: 24px 18px !important; gap: 18px !important; align-items: stretch !important; } /* The big savings number 96px → fits on phone but reads better trimmed slightly. */ section[id="configure"] [style*="font-size: 96px"] { font-size: clamp(56px, 16vw, 80px) !important; } /* ── 5. Per-platform comparison rows: collapse 4-col grid. */ /* The row grid is "minmax(180px,1.2fr) 1fr 110px 110px" — too wide for phones. Switch to 2-col (name + price), with bar + delta full-width below. We use grid-template-areas so the existing children can be re-mapped. */ section[id="configure"] [style*="grid-template-columns: minmax(180px,1.2fr) 1fr 110px 110px"], section[id="configure"] [style*="grid-template-columns: minmax(180px, 1.2fr) 1fr 110px 110px"] { grid-template-columns: 1fr auto !important; grid-template-areas: "name price" "bar bar" "delta delta" !important; column-gap: 12px !important; row-gap: 8px !important; padding: 14px !important; } /* Map children: 1st = name, 2nd = bar, 3rd = price, 4th = delta. */ section[id="configure"] [style*="grid-template-columns: minmax(180px,1.2fr) 1fr 110px 110px"] > *:nth-child(1), section[id="configure"] [style*="grid-template-columns: minmax(180px, 1.2fr) 1fr 110px 110px"] > *:nth-child(1) { grid-area: name !important; min-width: 0 !important; } section[id="configure"] [style*="grid-template-columns: minmax(180px,1.2fr) 1fr 110px 110px"] > *:nth-child(2), section[id="configure"] [style*="grid-template-columns: minmax(180px, 1.2fr) 1fr 110px 110px"] > *:nth-child(2) { grid-area: bar !important; } section[id="configure"] [style*="grid-template-columns: minmax(180px,1.2fr) 1fr 110px 110px"] > *:nth-child(3), section[id="configure"] [style*="grid-template-columns: minmax(180px, 1.2fr) 1fr 110px 110px"] > *:nth-child(3) { grid-area: price !important; text-align: right !important; } section[id="configure"] [style*="grid-template-columns: minmax(180px,1.2fr) 1fr 110px 110px"] > *:nth-child(4), section[id="configure"] [style*="grid-template-columns: minmax(180px, 1.2fr) 1fr 110px 110px"] > *:nth-child(4) { grid-area: delta !important; text-align: left !important; } /* Wrapper for the per-platform rows section: trim padding. */ section[id="configure"] [style*="background: rgba(255,255,255,.03)"][style*="padding: 28px"] { padding: 18px 14px !important; } /* Allow names to wrap on phone instead of nowrap → ellipsis hell. */ section[id="configure"] [style*="grid-template-columns: minmax(180px,1.2fr) 1fr 110px 110px"] [style*="white-space: nowrap"] { white-space: normal !important; } /* "Click any price to enter your actual monthly cost" badge: wraps; allow it to wrap multi-line and shrink. */ section[id="configure"] [style*="white-space: nowrap"][style*="border-radius: 999"][style*="padding: 6px 12px"] { white-space: normal !important; line-height: 1.3 !important; } /* ── 6. Sticky off — already in this file higher up. Confirm. */ /* (handled) */ /* ── 7. Inputs panel internal trims */ /* Stepper rows often have a label + control; keep wide buttons tappable. The number input was already set above. The +/- buttons are themed via inline styles, leave alone. */ /* Itemized breakdown: trim padding so the dollar figures don't wrap; the values are already font-size 15. */ section[id="configure"] [style*="background: rgba(255,255,255,.03)"][style*="padding: 28px"] [style*="grid-template-columns: 1fr auto"] { gap: 12px !important; } /* Step 5 competitor overpay rows. Desktop is a 3-col grid: [ name + verdict ] [ Their price ] [ On YachtWay ] On phone that's too wide — the YachtWay column slides off the right edge (the user saw the "$6…" YACHTWAY value clipped). Stack the row: name+verdict spans full width on top, then the two price columns sit on a single sub-row below at 50/50. The left vertical divider on the YachtWay column rotates into a thin top-border on the price sub-row so it still reads as a separator. */ .yw-cfg-overpay-row { grid-template-columns: 1fr 1fr !important; grid-template-areas: "name name" "their yw" !important; column-gap: 16px !important; row-gap: 14px !important; padding: 16px 16px !important; } .yw-cfg-overpay-row > div:nth-child(1) { grid-area: name; min-width: 0 !important; } .yw-cfg-overpay-row > div:nth-child(2) { grid-area: their; min-width: 0 !important; text-align: left !important; padding-top: 14px !important; border-top: 1px solid rgba(255,255,255,.10) !important; } .yw-cfg-overpay-row > div:nth-child(3) { grid-area: yw; min-width: 0 !important; padding-left: 0 !important; border-left: none !important; text-align: right !important; padding-top: 14px !important; border-top: 1px solid rgba(255,255,255,.10) !important; } /* Trim the YachtWay big number so it doesn't blow past the column. */ .yw-cfg-overpay-row > div:nth-child(3) > div:last-child { font-size: 20px !important; white-space: nowrap !important; } /* And the "You overpay $X" verdict — let it wrap freely. */ .yw-cfg-overpay-row [style*="font-size: 17"] { font-size: 15px !important; } /* Export PDF / Share buttons: already use flex 1 1 200px / 140px so they wrap fine. Just ensure stack-friendly basis. */ section[id="configure"] button[style*="flex: 1 1 200"], section[id="configure"] button[style*="flex: 1 1 140"] { flex: 1 1 100% !important; } } /* ───────────────────────────────────────────────────────── LIVE — desktop/mobile component split ───────────────────────────────────────────────────────── */ /* Show desktop cinematic above 900px; mobile-native component takes over below. Each component fully owns its layout — no selector-mining overrides needed. */ .live-desktop-only { display: block; } .live-mobile-only { display: none; } @media (max-width: 900px) { .live-desktop-only { display: none !important; } .live-mobile-only { display: block !important; } /* Flash bundle grid: 2-col on phone. The global mobile-collapse rule earlier in this file catches all `repeat(2, ...)` / `1fr 1fr` grids and forces them to single column. The bundle carousel should stay 2-up so the SAVE % comparison reads at a glance. This selector is more specific (class + grid signature) so it wins. */ .lcm-bundle-grid[style*="grid-template-columns: repeat(2, 1fr)"], .lcm-bundle-grid[style*="grid-template-columns: 1fr 1fr"], .lcm-bundle-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } } /* ───────────────────────────────────────────────────────── ASK ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { section[id="ask"] [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } } /* ───────────────────────────────────────────────────────── SECURITY (TrustHero) — badge grid ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* The 4-col badge grid handled globally → 2col. The big radial glow at top center can be 900px wide; clamp it. */ section[id="security"] [style*="width: 900"] { width: 100vw !important; max-width: 100vw !important; } section[id="security"] [style*="padding: 140px 32px 120px"] { padding: 64px 18px 48px !important; } } /* ───────────────────────────────────────────────────────── FINAL CTA + footer ───────────────────────────────────────────────────────── */ @media (max-width: 900px) { /* Final dark CTA strip with 2fr/1fr grid: collapse handled globally, just trim radial glow size. */ #root > div > section:nth-last-of-type(2) { padding: 56px 18px !important; } #root > div > section:nth-last-of-type(2) [style*="width: 700"] { width: 100vw !important; max-width: 100vw !important; height: 400px !important; } /* CTA button stack flexes vertical. */ #root > div > section:nth-last-of-type(2) [style*="display: flex"][style*="flexDirection: column"] { width: 100% !important; } } /* ───────────────────────────────────────────────────────── ≤ 640px — phone tightening ───────────────────────────────────────────────────────── */ @media (max-width: 640px) { section[id="compare"], section[id="reach"], section[id="pricing"], section[id="configure"], section[id="ask"], section[id="security"] { padding: 48px 14px !important; } /* Reach card-collage: cards extend full width with smaller inner padding. */ section[id="reach"] .rf-float-a, section[id="reach"] .rf-float-b, section[id="reach"] .rf-float-c { padding: 16px !important; } /* Configure inputs row: tighten gaps. */ section[id="configure"] [style*="gap: 24"] { gap: 14px !important; } section[id="configure"] [style*="gap: 32"] { gap: 18px !important; } } /* ───────────────────────────────────────────────────────── ≤ 380px — micro ───────────────────────────────────────────────────────── */ @media (max-width: 380px) { nav[style*="position: sticky"][style*="z-index: 50"] { padding: 8px 12px !important; } nav[style*="position: sticky"] img { height: 18px !important; } nav[style*="position: sticky"] > div:last-child > a.ed-btn-primary { padding: 7px 10px !important; font-size: 11px !important; } section h1, section h2 { font-size: clamp(26px, 8vw, 36px) !important; } } /* ───────────────────────────────────────────────────────── TWEAKS PANEL — bottom-sheet on mobile ───────────────────────────────────────────────────────── */ @media (max-width: 700px) { [data-tweaks-panel] { inset: auto 0 0 0 !important; width: 100% !important; max-width: 100% !important; border-radius: 18px 18px 0 0 !important; max-height: 80vh !important; } } /* ───────────────────────────────────────────────────────── Engagement toast — mobile = phone-style top banner ───────────────────────────────────────────────────────── * Desktop: floating card bottom-right, slides up + scales in. Mobile: render as a real OS notification banner — full-width pill at the top of the viewport, sliding DOWN from above. That matches the user's mental model of a push notification and stops competing with the LIVE section overlays at the bottom of the screen. We override the positioning, the entry transform direction, and the collapsed/expanded shape so it always reads as a notification rather than a floating CTA card. */ @media (max-width: 900px) { /* Hide engagement toast entirely on mobile — its full-width positioning was the root cause of horizontal-shift bugs on phones. The toast is desktop-only. */ .engagement-toast { display: none !important; } } /* ───────────────────────────────────────────────────────── LIVE — overrides removed ───────────────────────────────────────────────────────── * The mobile LIVE experience is now its own component (LiveCinematicMobile). The desktop cinematic and mobile layouts are toggled at the top of this file via .live-desktop-only / .live-mobile-only — no per-element overrides needed here. ─────────────────────────────────────────────────────────── */ /* ───────────────────────────────────────────────────────── BUYER JOURNEY — desktop/mobile component split ───────────────────────────────────────────────────────── * Same approach as LIVE: the desktop scroll-cinema (sticky 100vh per stage with side-by-side copy + mock) doesn't translate to phones — fixed-height mocks + half-empty 100vh slides waste the screen. The mobile component (BuyerJourneyMobile) is a tap-driven stage carousel with content-sized cards using phone-native mocks (BuyerJourneyMobileMock). Each component fully owns its layout — no selector-mining overrides needed. */ .journey-desktop-only { display: block; } .journey-mobile-only { display: none; } @media (max-width: 900px) { .journey-desktop-only { display: none !important; } .journey-mobile-only { display: block !important; } } /* ───────────────────────────────────────────────────────── DASHBOARD PREVIEW — desktop/mobile swap ───────────────────────────────────────────────────────── * Desktop shows a real product screenshot (assets/dealer-dashboard.png); mobile keeps the lightweight DashboardMock since the screenshot is desktop-shaped and would render too small to read on a phone. */ .dashboard-img-desktop { display: block; } .dashboard-mock-mobile { display: none; } .dashboard-preview-pane { overscroll-behavior: contain; } .dashboard-preview-pane:hover .dashboard-scroll-hint { opacity: .7; } .dashboard-img-desktop:hover ~ .dashboard-scroll-hint { opacity: 0; } @media (max-width: 900px) { .dashboard-img-desktop { display: none !important; } .dashboard-mock-mobile { display: block !important; } } /* ───────────────────────────────────────────────────────── FEATURE MATRIX — desktop/mobile swap ───────────────────────────────────────────────────────── * Desktop renders a wide 7-column comparison table. On mobile that's unusable even with sticky-column horizontal scroll. The component now ships TWO views side-by-side in the DOM: className "yw-matrix--mobile" (display:none by default)

className "yw-matrix--desktop" (visible by default) We flip them on at <= 900px. The mobile view is a competitor picker + clean stacked rows: each capability shows YachtWay vs. one selected competitor, no horizontal scroll. ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .yw-matrix--desktop { display: none !important; } .yw-matrix--mobile { display: block !important; } /* The FEATURE MATRIX

has no id (unlike compare/reach/ pricing etc), so the global section-padding override misses it. The desktop padding is 120px 32px; on a 390px viewport that leaves 326px content area, and combined with the matrix's internal padding the rows clip. Target the section via :has(.yw-matrix--mobile) to nail it without affecting anything else. */ section:has(.yw-matrix--mobile) { padding: 56px 14px !important; } /* Trim the matrix section's heading block. */ section:has(.yw-matrix--mobile) > div > div[style*="margin-bottom: 56"] { margin-bottom: 24px !important; } /* The h2 is 56px on desktop — way too big for phone. */ section:has(.yw-matrix--mobile) h2 { font-size: clamp(28px, 8vw, 36px) !important; line-height: 1.05 !important; } /* Edge-to-edge full-width matrix on mobile: cancel any section side padding that would shrink it, and let header + rows span the full viewport width. The label column flexes (1fr) to consume the screen, value columns stay compact at 56px each. */ section:has(.yw-matrix--mobile) { padding-left: 0 !important; padding-right: 0 !important; } /* Restore side padding for the heading block above the matrix (so the h2 + tagline don't go edge-to-edge — only the table should). The heading block is the first child wrapper above the matrix container. */ section:has(.yw-matrix--mobile) > div > div[style*="margin-bottom"] { padding-left: 14px !important; padding-right: 14px !important; } .yw-matrix--mobile { width: 100% !important; max-width: 100% !important; overflow: hidden !important; box-sizing: border-box !important; } /* Picker (1st child) keeps side padding so the toggle pills don't slam into the screen edge. */ .yw-matrix--mobile > div:nth-child(1) { margin-left: 14px !important; margin-right: 14px !important; } /* Header strip + rows grid: full viewport width, no margin. */ .yw-matrix--mobile > div:nth-child(2), .yw-matrix--mobile > div:nth-child(3) { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; grid-template-columns: 1fr 110px 110px !important; border-left: none !important; border-right: none !important; border-radius: 0 !important; } /* Platform name in header: allow wrap, slight size trim so "YachtWorld" / "YachtWay" fit without being cropped. */ .yw-matrix--mobile > div:nth-child(2) > div:nth-child(2), .yw-matrix--mobile > div:nth-child(2) > div:nth-child(3) { padding-left: 4px !important; padding-right: 4px !important; } .yw-matrix--mobile > div:nth-child(2) > div:nth-child(2) [style*="font-size"], .yw-matrix--mobile > div:nth-child(2) > div:nth-child(3) [style*="font-size"] { font-size: 13px !important; white-space: normal !important; overflow-wrap: anywhere !important; line-height: 1.2 !important; } .yw-matrix--mobile * { min-width: 0 !important; box-sizing: border-box !important; } /* Allow string-value cells (Free, $1K–$15K+/mo, etc.) to wrap onto 2 lines inside the narrow 64px value column instead of overflowing. */ .yw-matrix--mobile [id="yw-mxm-rows"] span { overflow-wrap: anywhere; word-break: break-word; } }