/* landing-v3.css — shared skin for the three landing concepts. * * The component rules in the second half are lifted VERBATIM from _lab-components.html, which is * where they were designed and stress-tested at 252px. They are not retyped: the build script * copies them, because a lab and a page that drift apart are worse than no lab. * * THE WIDTH CONTRACT, restated here because it has broken this page twice: * .phone is a flex item at width:393px with no flex-shrink:0, so it SHRINKS with the viewport. * viewport >= 440px : usable content = viewport - 93px * viewport < 440px : usable content = viewport - 58px (thin-chrome block below) * At a 320px viewport that is 252px. Nothing here may assume more. */ :root{ --chart:#DCE85C; --blue:#2680C4; --d-line:rgba(255,255,255,.10); --d-line2:rgba(255,255,255,.16); --d-mut:rgba(255,255,255,.62); --d-mut2:rgba(255,255,255,.45); --st-900:#0F1319; --st-800:#151A22; --st-700:#1C232C; --st-600:#232B36; --on-plate-1:#EAF1FB; --on-plate-2:#B8C2CC; --on-plate-3:#A9B4C0; } *{box-sizing:border-box;-webkit-font-smoothing:antialiased;} body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center; background:#0b1f33;padding:24px;color:#fff; font-family:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;} /* Stars on the blue. The steel experiment is gone — three backdrops was three things to keep in sync, and the choice is made. Painted once, no animation: a starfield that twinkles on a marketing page is a battery cost with nothing to show for it. */ .phone::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0; background-repeat:no-repeat; background-image: radial-gradient(1.7px 1.7px at 45.4% 55.7%, rgba(255,255,255,0.59), transparent), radial-gradient(1.0px 1.0px at 50.8% 58.4%, rgba(255,255,255,0.77), transparent), radial-gradient(1.0px 1.0px at 47.7% 60.9%, rgba(255,255,255,0.39), transparent), radial-gradient(1.7px 1.7px at 31.1% 10.7%, rgba(255,255,255,0.82), transparent), radial-gradient(1.2px 1.2px at 62.9% 59.2%, rgba(255,255,255,0.86), transparent), radial-gradient(1.0px 1.0px at 64.8% 61.1%, rgba(255,255,255,0.68), transparent), radial-gradient(1.0px 1.0px at 81.8% 8.1%, rgba(255,255,255,0.44), transparent), radial-gradient(1.2px 1.2px at 25.2% 4.9%, rgba(255,255,255,0.52), transparent), radial-gradient(1.0px 1.0px at 58.7% 20.8%, rgba(255,255,255,0.69), transparent), radial-gradient(1.2px 1.2px at 50.0% 65.6%, rgba(255,255,255,0.69), transparent), radial-gradient(1.7px 1.7px at 41.1% 54.9%, rgba(255,255,255,0.38), transparent), radial-gradient(1.3px 1.3px at 26.4% 74.8%, rgba(255,255,255,0.5), transparent), radial-gradient(1.2px 1.2px at 8.7% 75.6%, rgba(255,255,255,0.4), transparent), radial-gradient(1.0px 1.0px at 29.9% 8.4%, rgba(255,255,255,0.8), transparent), radial-gradient(1.0px 1.0px at 2.1% 22.1%, rgba(255,255,255,0.59), transparent), radial-gradient(1.0px 1.0px at 96.1% 40.2%, rgba(255,255,255,0.65), transparent), radial-gradient(1.1px 1.1px at 21.1% 66.8%, rgba(255,255,255,0.39), transparent), radial-gradient(1.7px 1.7px at 33.9% 94.6%, rgba(255,255,255,0.84), transparent), radial-gradient(1.0px 1.0px at 14.9% 69.9%, rgba(255,255,255,0.37), transparent), radial-gradient(1.3px 1.3px at 78.5% 19.1%, rgba(255,255,255,0.44), transparent), radial-gradient(1.7px 1.7px at 50.9% 96.6%, rgba(255,255,255,0.41), transparent), radial-gradient(1.2px 1.2px at 63.8% 13.2%, rgba(255,255,255,0.87), transparent), radial-gradient(1.7px 1.7px at 2.0% 85.0%, rgba(255,255,255,0.66), transparent), radial-gradient(1.0px 1.0px at 97.8% 3.9%, rgba(255,255,255,0.55), transparent), radial-gradient(1.0px 1.0px at 84.0% 63.6%, rgba(255,255,255,0.36), transparent), radial-gradient(1.0px 1.0px at 16.1% 44.4%, rgba(255,255,255,0.76), transparent), radial-gradient(1.0px 1.0px at 33.6% 30.4%, rgba(255,255,255,0.38), transparent), radial-gradient(1.0px 1.0px at 22.0% 63.1%, rgba(255,255,255,0.66), transparent), radial-gradient(1.3px 1.3px at 37.7% 45.5%, rgba(255,255,255,0.6), transparent), radial-gradient(1.0px 1.0px at 57.2% 85.2%, rgba(255,255,255,0.68), transparent), radial-gradient(1.3px 1.3px at 31.8% 23.9%, rgba(255,255,255,0.47), transparent), radial-gradient(1.3px 1.3px at 20.2% 73.0%, rgba(255,255,255,0.45), transparent), radial-gradient(1.3px 1.3px at 93.2% 86.7%, rgba(255,255,255,0.38), transparent), radial-gradient(1.3px 1.3px at 6.6% 12.5%, rgba(255,255,255,0.86), transparent), radial-gradient(1.1px 1.1px at 24.9% 69.6%, rgba(255,255,255,0.57), transparent), radial-gradient(1.3px 1.3px at 88.9% 49.1%, rgba(255,255,255,0.43), transparent), radial-gradient(1.0px 1.0px at 71.2% 8.6%, rgba(255,255,255,0.6), transparent), radial-gradient(1.0px 1.0px at 64.7% 61.1%, rgba(255,255,255,0.49), transparent), radial-gradient(1.0px 1.0px at 90.1% 21.6%, rgba(255,255,255,0.38), transparent), radial-gradient(1.0px 1.0px at 41.5% 25.9%, rgba(255,255,255,0.44), transparent), radial-gradient(1.0px 1.0px at 37.4% 56.9%, rgba(255,255,255,0.39), transparent), radial-gradient(1.1px 1.1px at 15.3% 45.2%, rgba(255,255,255,0.69), transparent), radial-gradient(1.0px 1.0px at 68.4% 58.1%, rgba(255,255,255,0.66), transparent), radial-gradient(1.1px 1.1px at 90.7% 47.6%, rgba(255,255,255,0.72), transparent), radial-gradient(1.5px 1.5px at 94.4% 4.0%, rgba(255,255,255,0.38), transparent), radial-gradient(1.0px 1.0px at 8.5% 31.9%, rgba(255,255,255,0.88), transparent);} .phone > *{position:relative;z-index:1;} /* ── the hero orb ─────────────────────────────────────────────────────────────────────────── */ /* The glow lives on the container, not in the scene: a back-side glow sphere clips to the WebGL canvas edge and draws a visible square around the object. A box-shadow cannot be clipped by a viewport it is not inside. */ .sun-stage{position:relative;width:236px;height:236px;margin:22px auto 0;} .sun-stage::after{content:'';position:absolute;left:5.3%;top:5.3%;width:89.4%;height:89.4%; border-radius:50%;pointer-events:none;z-index:-1; box-shadow:0 0 52px 14px rgba(95,185,255,.30), 0 0 116px 44px rgba(95,185,255,.14);} .sun-stage canvas{display:block;} @media (max-width:380px){ .sun-stage{width:204px;height:204px;} } .phone{width:393px;height:852px;border-radius:54px;position:relative;overflow:hidden; border:11px solid #0a0a0a;box-shadow:0 24px 70px rgba(0,0,0,.55); background: radial-gradient(ellipse 70% 45% at 78% 6%, rgba(220,232,92,.15), transparent 55%), radial-gradient(ellipse 80% 55% at 14% 40%, rgba(38,128,196,.26), transparent 55%), radial-gradient(ellipse 95% 60% at 50% 108%, rgba(38,128,196,.16), transparent 60%), linear-gradient(180deg,#08131f,#060d16 55%,#04090f);} .screen{position:absolute;inset:0;padding:64px 26px 52px;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;} .screen::-webkit-scrollbar{display:none;} .screen > *{flex:0 0 auto;} /* On a phone the device frame is decoration eating 122px of a 375px screen. Thin it out. */ @media (max-width:440px){ body{padding:10px;} .phone{border-width:8px;border-radius:38px;} .screen{padding:52px 16px 44px;} } /* ── hero (locked by the founder: headline, globe, wordmark, motto) ────────────────────────── */ .hero-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:20px;} /* Fluid, not stepped. A fixed size fought a box that shrinks and lost by a pixel on one device after another; 10.2vw keeps 3-10% of slack at every phone width and caps at the design size. */ .hero-h{color:#fff;font-size:clamp(30px,10.2vw,44px);font-weight:800;line-height:1.02;letter-spacing:-1.6px;margin:0;} .hero-motto{color:#EAF1FB;font-size:clamp(19px,5.6vw,23px);font-weight:800;letter-spacing:-.3px; line-height:1.2;margin-top:20px;} /* ── section furniture ────────────────────────────────────────────────────────────────────── */ .sec{margin-top:52px;} .sec-eyb{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; color:var(--on-plate-3);text-align:center;margin-bottom:10px;} .sec-h{font-size:26px;font-weight:800;line-height:1.14;letter-spacing:-.7px;color:#fff;text-align:center;margin:0;} .sec-h .lit{color:var(--chart);} .sec-s{font-size:14px;line-height:1.55;color:var(--d-mut);text-align:center;margin:12px 0 0;} /* A second paragraph under a section's subcopy. Indented and set apart so it reads as an aside rather than a fourth line of the same sentence. */ .sec-s.indent{margin-top:14px;padding:0 22px;color:var(--d-mut2);font-size:13.5px;} .sec-gfx{margin:18px 0 0;} /* The joke beat is the only place the brand gets to be funny, so it gets the biggest type after the hero and no card around it. A glass card on a joke is a laugh track. */ .sec.joke .sec-h{font-size:clamp(26px,8.4vw,34px);} /* Air between a graphic and the headline it sets up. Without it the icon captions inside the SVG sat almost against the h2 and read as one block of text. */ .sec-gfx.above{margin-bottom:24px;} /* Extra room above a section that opens with a large character rather than type. */ .sec.airy{margin-top:76px;} /* The reg line under "view your investments". Deliberately quiet and one line: it has to be there, it must not compete with the joke above it, and it must not read as a wall of hedging. */ /* The closing thesis. The wordmark is the size it is in the hero on purpose — the page opens and closes on the same object. */ .fc-mark{color:var(--chart);font-size:32px;font-weight:800;letter-spacing:-.9px;text-align:center;margin-top:14px;} .fc-join{color:var(--d-mut);font-size:16px;font-weight:600;text-align:center;margin-top:2px;} .sec.tight{margin-top:22px;} /* The orbit. The trio turns about the ring's centre; each satellite and each label counter-rotates about its OWN centre at the same rate, so they travel the circle without ever tilting. Reverse on the same keyframes gives the negative angle (360 - x, which is -x mod 360). */ .fc-orbit{animation:fcOrbit 52s linear infinite;transform-box:view-box;} .fc-up{animation:fcOrbit 52s linear infinite reverse;transform-box:view-box;} @keyframes fcOrbit{ to{ transform:rotate(360deg); } } @media (prefers-reduced-motion: reduce){ .fc-orbit,.fc-up{animation:none;} } /* Bleeds past the screen's side padding. This diagram is width-starved — a ring plus two outboard labels inside ~320px — so the 32px it borrows scales everything in it by about 10%. */ .gfx.fc{width:calc(100% + 32px);margin:0 -16px;} @media (max-width:440px){ .gfx.fc{width:calc(100% + 24px);margin:0 -12px;} } .sec-fine{font-size:11px;line-height:1.4;color:var(--d-mut2);text-align:center;margin:14px 0 0;} /* ── SCREENSHOT SIZING ──────────────────────────────────────────────────────────────────────── ONE HEIGHT GOVERNS BOTH a real capture and a reserved frame. They sit in the same carousels, so when they disagree the section looks broken rather than pending. What went wrong: .shot img was width:100% / height:auto on a 786x1704 phone capture, so every screenshot rendered 848px TALL — taller than the viewport it was being read in — while .ph-frame beside it was capped at 340px. One image took the entire screen and the placeholder next to it was a third of the size. So: the image is sized by its HEIGHT, not its width, and the width follows the aspect. --shot-h is the single knob; the vh term keeps a screenshot inside the fold on short screens, which is where a full-bleed phone capture does the most damage. */ :root{ --shot-h:min(440px, 52vh); } .shot{padding:0;overflow:hidden;border-radius:18px;margin-top:16px; display:flex;align-items:center;justify-content:center;} /* max-height, NOT height. A fixed height fights a constrained width: in the two-up section the container is half as wide, so the box stayed 440 tall while max-width clamped it to 149 — letterboxed, and a different size from the same capture one section above. Bounding BOTH axes and letting the image scale to fit keeps one aspect everywhere: height-bound when there is room, width-bound when there isn't, distorted never. */ .shot img{display:block;max-width:100%;max-height:var(--shot-h);width:auto;height:auto;margin:0 auto;} .shot-cap{font-size:11px;color:var(--d-mut2);text-align:center;margin-top:8px;} /* ── email capture: asked UP FRONT, and it is not a gate ──────────────────────────────────── */ /* The founder's rule, verbatim: ask for email up front, and confirm nothing when it is entered. The 14 days are confirmed at the END, on a completed quiz and a saved row. */ .cap{margin-top:26px;} .cap-h{font-size:14px;font-weight:800;color:#fff;text-align:center;} .wl-input{width:100%;border:1px solid var(--d-line2);border-radius:12px;padding:13px 14px; font-size:14px;font-family:inherit;background:rgba(255,255,255,.06);color:#fff;margin-top:12px;} .wl-input::placeholder{color:var(--d-mut2);} .cap-foot{color:var(--d-mut2);font-size:10.5px;line-height:1.4;text-align:center;margin-top:10px;} /* The done-state for an email signup. Replaces the field and the button in place, so the card stops asking once it has been answered. */ /* The referral line. An asterisk under step three, quieter than the steps but not fine print — it is a promise the company has to keep, so it is legible. */ .oc-star{margin-top:12px;padding-top:10px;border-top:1px solid var(--d-line); font-size:11.5px;line-height:1.45;color:var(--chart);font-weight:700;text-align:center;} .cap-done{margin-top:12px;padding:13px 14px;border-radius:13px;font-size:12.5px;line-height:1.5; color:var(--d-mut);border:1px solid rgba(220,232,92,.30);background:rgba(220,232,92,.08);} .cap-done b{color:var(--chart);} /* A reserved screenshot slot. Named, so the gap reads as pending rather than broken, and the image simply covers it once a real capture lands in shots/. */ .ph-frame{display:none;flex-direction:column;align-items:center;justify-content:center;gap:7px; /* the REAL capture aspect (786x1704 = the phone's box at 2x), not a generic 9/16 — a reserved slot and a photographed one must occupy the identical footprint or the row looks broken */ aspect-ratio:786/1704;max-height:var(--shot-h);background: repeating-linear-gradient(135deg, rgba(255,255,255,.026) 0 9px, transparent 9px 18px);} .ph-k{font-size:9.5px;font-weight:800;letter-spacing:1.3px;text-transform:uppercase;color:var(--d-mut2);} .ph-w{font-size:12px;font-weight:700;color:var(--on-plate-3);text-align:center;padding:0 16px;line-height:1.35;} /* The slide's img is display:none until it loads, so an empty slot must still hold its shape. */ .ss-slide .shot{min-height:0;} /* ── the quiz, on the page ────────────────────────────────────────────────────────────────── */ .lq{margin-top:26px;padding:18px 14px;} /* The address is acknowledged the moment it is typed, above the first question. The row is written on that same tap, so this is reporting a fact — the page just never said it, and anyone who left mid-quiz walked away thinking they had not signed up. */ .lq-ack{margin:-4px 0 14px;padding:11px 12px;border-radius:12px;font-size:12px;line-height:1.45; color:var(--d-mut);border:1px solid rgba(220,232,92,.30);background:rgba(220,232,92,.08);} .lq-ack b{color:var(--chart);} .lq-prog{height:3px;border-radius:2px;background:rgba(255,255,255,.10);overflow:hidden;} .lq-prog span{display:block;height:100%;background:var(--chart);transition:width .25s ease;} .lq-count{font-size:10.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase; color:var(--on-plate-3);margin-top:10px;} .lq-q{font-size:19px;font-weight:800;line-height:1.25;color:#fff;margin-top:6px;} .lq-opts{display:flex;flex-direction:column;gap:8px;margin-top:14px;} .lq-opt{display:block;width:100%;text-align:left;font:inherit;font-size:14px;font-weight:700; color:#EAF1FB;cursor:pointer;padding:13px 14px;border-radius:13px; border:1px solid var(--d-line);background:rgba(255,255,255,.05);} .lq-opt:active,.lq-opt.on{border-color:rgba(220,232,92,.5);background:rgba(220,232,92,.12);color:var(--chart);} .lq-saving{font-size:14px;font-weight:700;color:var(--d-mut);text-align:center;padding:26px 0;} .lq-done-eyb{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; color:var(--chart);text-align:center;margin-bottom:12px;} .lq-held{margin-top:16px;padding:13px 14px;border-radius:13px;font-size:12.5px;line-height:1.5; color:var(--d-mut);border:1px solid rgba(220,232,92,.30);background:rgba(220,232,92,.08);} .lq-held b{color:var(--chart);} .hidden{display:none !important;} /* ── tier table ────────────────────────────────────────────────────────────────────────────── */ /* Four columns into 252px on the narrowest phone, so the type is small by necessity and the feature column takes the slack. table-layout:fixed stops one long label from starving the value columns, which is what a natural-width table does here every time. */ .tt{padding:14px 10px 12px;} .tt-t{width:100%;border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums;} .tt-t th,.tt-t td{padding:9px 2px;text-align:center;font-size:11px;} .tt-t th{font-size:10px;font-weight:800;letter-spacing:.3px;color:var(--on-plate-3); vertical-align:bottom;border-bottom:1px solid var(--d-line2);} .tt-t th span{display:block;margin-top:3px;font-size:10.5px;font-weight:800;color:#EAF1FB;letter-spacing:0;} /* The feature column is the only left-aligned one and gets the width the others do not need. */ .tt-f{width:38%;text-align:left !important;font-weight:700;color:#EAF1FB;padding-left:2px !important;} .tt-t tbody tr+tr td{border-top:1px solid rgba(255,255,255,.07);} .tt-t .y{color:var(--chart);font-weight:800;} .tt-t .n{color:var(--d-mut2);} /* The founding column is the offer, so it is the only lit column — a tinted channel running the full height of the table rather than a highlight on one cell. */ .tt-win{background:rgba(220,232,92,.08);} .tt-t thead .tt-win{border-bottom-color:rgba(220,232,92,.42);} .tt-t thead .tt-win span{color:var(--chart);} /* At 320px the four columns leave ~46px each and "$12.99/mo" overflowed its header cell by a couple of pixels. The prices are the point of this table, so they shrink rather than truncate. */ @media (max-width:360px){ .tt{padding:12px 6px 10px;} .tt-t th,.tt-t td{padding:8px 1px;font-size:10.5px;} .tt-t th{font-size:9px;} .tt-t th span{font-size:9.5px;} .tt-f{width:36%;} } .tt-note{margin-top:11px;padding-top:10px;border-top:1px solid var(--d-line); font-size:11px;color:var(--d-mut2);text-align:center;} /* ── screenshot carousel ───────────────────────────────────────────────────────────────────── */ /* A native scroll-snap track. No transform maths, so swipe, momentum and keyboard arrows all come free, and it degrades to a plain horizontal scroller if the dot script never runs. */ .ss{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory; scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-top:16px;padding-bottom:2px;} .ss::-webkit-scrollbar{display:none;} .ss-slide{flex:0 0 88%;scroll-snap-align:center;min-width:0;} /* STACKED captures — the alternative to a carousel, for the shots that carry the most weight. A swipe track hides everything after slide 1 behind a gesture most readers never make. Stacking makes the page longer on purpose: length is cheap, an unseen screenshot is not. */ .ss-stack{ display:flex; flex-direction:column; gap:34px; } .ss-stack .ss-slide{ flex:none; width:100%; scroll-snap-align:none; } /* Two captures side by side — for the point that only reads as a comparison. Stacks under 560px, because two phone screenshots side by side on a phone are two unreadable screenshots. */ .ss-pair{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; } @media (max-width:560px){ .ss-pair{ grid-template-columns:1fr; gap:30px; } } .ss-pair .ss-slide{ flex:none; width:100%; scroll-snap-align:none; } /* The numbered list under Wellthii — what she is actually good for, in three. */ .sec-list{ list-style:none; counter-reset:sl; margin:22px 0 0; padding:0; text-align:left; display:flex; flex-direction:column; gap:14px; } .sec-list li{ counter-increment:sl; position:relative; padding-left:40px; color:var(--d-mut); font-size:16px; line-height:1.55; } .sec-list li::before{ content:counter(sl); position:absolute; left:0; top:1px; width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(220,232,92,.14); border:1px solid rgba(220,232,92,.4); color:var(--chart); font-size:13px; font-weight:800; } .sec-list b{ color:#fff; font-weight:700; } .ss-cap{font-size:11.5px;line-height:1.45;color:var(--d-mut2);text-align:center;margin-top:9px;} .ss-cap b{color:#EAF1FB;font-weight:800;} .ss-dots{display:flex;justify-content:center;gap:7px;margin-top:12px;} /* The dot is 7px; the thing you have to hit is not. A pseudo-element carries the hit area out to 44px without changing the mark, which is the only way to keep a 7px dot and a real target. */ .ss-dot{position:relative;width:7px;height:7px;padding:0;border:none;border-radius:50%;cursor:pointer; background:rgba(255,255,255,.22);transition:background .2s, width .2s;} .ss-dot::after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px; transform:translate(-50%,-50%);} .ss-dot.on{width:18px;border-radius:99px;background:var(--chart);} .ss-dots{position:relative;z-index:2;} /* The two privacy rules under the connections graphic. Wellness is lit and money is steel, which is the design system's own grammar doing the work: chartreuse emits, steel stays shut. */ .cn-rules{margin-top:14px;padding-top:12px;border-top:1px solid var(--d-line); display:flex;flex-direction:column;gap:10px;} .cn-rule{display:flex;gap:9px;align-items:flex-start;font-size:11.5px;line-height:1.45;color:var(--d-mut2);} .cn-rule svg{flex:0 0 auto;width:17px;height:17px;margin-top:1px;} .cn-rule b{font-weight:800;} .cn-rule.share{color:rgba(255,255,255,.62);} .cn-rule.share svg{color:var(--chart);} .cn-rule.share b{color:var(--chart);} .cn-rule.private svg{color:var(--on-plate-2);} .cn-rule.private b{color:#EAF1FB;} /* The "more coming" line under the connections graphic. Deliberately quieter than the named marks above it: those are live today, this is a roadmap, and the type should say so. */ .cn-more{margin-top:12px;padding-top:11px;border-top:1px solid var(--d-line); font-size:11.5px;font-weight:700;letter-spacing:.2px;color:var(--d-mut2);text-align:center;} .foot{margin-top:44px;padding-top:18px;border-top:1px solid var(--d-line); font-size:11px;line-height:1.6;color:var(--d-mut2);text-align:center;} .foot a{color:var(--d-mut2);text-decoration:underline;} .foot-links{margin-top:12px;font-size:12px;} .foot-links a{color:var(--on-plate-3);font-weight:700;display:inline-block;padding:11px 6px;} .foot-co{margin-top:8px;} /* Not fine print by accident: "does not provide financial, legal or health advice" is the line a licensed rep's marketing page has to carry, so it stays legible rather than shrinking away. */ .foot-disc{margin-top:6px;font-size:11px;color:var(--d-mut2);} /* ═══════════════════════════════════════════════════════════════════════════ COMPONENTS — copied verbatim from _lab-components.html by build-landings.py. Edit them THERE and re-run the build, not here. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ SHARED PRIMITIVES lifted from DESIGN-DIRECTION.md so the lab reads like the app. ═══════════════════════════════════════════════════════════════════════════ */ .plate{position:relative;overflow:hidden;border:none;border-radius:18px; background: radial-gradient(130% 90% at 10% -14%, rgba(122,150,182,.13), transparent 58%), linear-gradient(158deg, var(--st-600) 0%, var(--st-700) 42%, var(--st-800) 74%, var(--st-900) 100%); box-shadow:inset 0 1px 0 rgba(200,214,230,.16), inset 1px 0 0 rgba(200,214,230,.06), inset 0 -1px 0 rgba(0,0,0,.55), inset -1px 0 0 rgba(0,0,0,.35), 4px 12px 30px rgba(2,5,10,.52);} .glassc{position:relative;overflow:hidden;border:1px solid var(--d-line);background:rgba(255,255,255,.045); backdrop-filter:blur(12px);border-radius:18px;} .cta-glow{display:block;width:100%;text-align:center;border:none;font-family:inherit;cursor:pointer; background:linear-gradient(180deg,#e6f176,#cdd94f);color:#0a1929;font-weight:800;font-size:15px; border-radius:999px;padding:13px 10px;text-decoration:none;letter-spacing:.2px;line-height:1.2; box-shadow:0 0 0 1px rgba(6,9,14,.85), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(120,132,40,.55), 0 6px 18px rgba(220,232,92,.28);} /* The hashtag on its own line inside the button. Smaller and slightly held back so the button still reads as one instruction with a tag under it, not as two competing lines. */ .cta-tag{display:block;font-size:11.5px;font-weight:800;letter-spacing:.6px;opacity:.72;margin-top:2px;} .eyb{font-size:10.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--on-plate-3); text-shadow:0 1px 0 rgba(200,214,230,.10),0 -1px 0 rgba(0,0,0,.55);} /* ═══════════════════════════════════════════════════════════════════════════ 1 · WELLTHII — two takes. Both wave. Both degrade to a held pose under reduce. ═══════════════════════════════════════════════════════════════════════════ */ .wel-stage{display:flex;justify-content:center;align-items:flex-end;padding:10px 0 4px;} /* TAKE A — GREETER. On-model with the shipped Wellthii (wellthi-intro.html): white body, dark visor, blue eyes, chartreuse chest core, antenna. The arm is new. */ /* 226 not 190: the viewBox grew 200→240 wide to hold the arm at peak wave and the antenna at peak bob. The character only renders at its original physical size if the CSS width grows in the same ratio. Measured, not guessed — see the bbox sweep. */ .wel-a{width:226px;height:auto;max-width:100%;} .wel-a .wa-body{animation:welBob 3.4s ease-in-out infinite;transform-box:view-box;transform-origin:118px 208px;} /* Shoulder pivot = figure-space (134,150) PLUS the translate(18,8) on .wa-shift. transform-box:view-box measures from the viewBox corner, so if the shift moves, these two numbers move with it or the arm rotates about the wrong joint. */ .wel-a .wa-arm{animation:welWave 1.5s ease-in-out infinite;transform-box:view-box;transform-origin:152px 158px;} .wel-a .wa-core{animation:welPulse 2.6s ease-in-out infinite;} .wel-a .wa-tip{animation:welPulse 2.6s ease-in-out infinite .4s;} .wel-a .wa-swish{animation:welSwish 1.5s ease-in-out infinite;} @keyframes welBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} @keyframes welWave{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(17deg)}} @keyframes welPulse{0%,100%{opacity:1}50%{opacity:.68}} @keyframes welSwish{0%,100%{opacity:.18}50%{opacity:.62}} /* TAKE B — HALO. Head + floating core + detached mitts. No neck, no legs: the "expensive assistant" idiom. The visor carries a live voice meter. */ .wel-b{width:186px;height:auto;max-width:100%;} .wel-b .wb-head{animation:welFloat 4s ease-in-out infinite;transform-box:view-box;transform-origin:100px 90px;} .wel-b .wb-torso{animation:welFloat 4s ease-in-out infinite .35s;transform-box:view-box;transform-origin:100px 152px;} .wel-b .wb-mitt-l{animation:welFloat 4s ease-in-out infinite .5s;transform-box:view-box;transform-origin:46px 152px;} .wel-b .wb-arm{animation:welWaveB 1.35s ease-in-out infinite;transform-box:view-box;transform-origin:132px 146px;} /* The ring is STATIC by design. Rotating a flat ellipse in 2D reads as a swinging lasso, not a halo — tried it, it looked cheap. The satellite bead orbits instead, on a true circle about the head, which is the only rotation that survives 2D. */ .wel-b .wb-sat{animation:welOrbit 9s linear infinite;transform-box:view-box;transform-origin:100px 90px;} .wel-b .wb-vu1{animation:welVU 1.1s ease-in-out infinite;transform-box:view-box;transform-origin:90px 100px;} .wel-b .wb-vu2{animation:welVU 1.1s ease-in-out infinite .18s;transform-box:view-box;transform-origin:100px 100px;} .wel-b .wb-vu3{animation:welVU 1.1s ease-in-out infinite .36s;transform-box:view-box;transform-origin:110px 100px;} @keyframes welFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes welWaveB{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(20deg)}} @keyframes welOrbit{to{transform:rotate(360deg)}} @keyframes welVU{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}} /* ═══════════════════════════════════════════════════════════════════════════ 2 · SUPPORTING GRAPHICS. Every one is ONE full-width viewBox SVG, so it cannot overflow at any width — it just scales. No icon font: the Tabler webfont renders tofu if it 404s, and these carry meaning. ═══════════════════════════════════════════════════════════════════════════ */ .gfx{width:100%;height:auto;display:block;} .gfx text{font-family:-apple-system,'Helvetica Neue',Helvetica,Arial,sans-serif;} .g3-live{stroke-dasharray:260;stroke-dashoffset:260;animation:g3Draw 1500ms cubic-bezier(.22,.7,.3,1) 250ms 1 forwards;} .g3-dot{opacity:0;animation:g3Pop 420ms cubic-bezier(.2,1.5,.4,1) 1650ms 1 forwards;} @keyframes g3Draw{to{stroke-dashoffset:0}} @keyframes g3Pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}} .g3-dotwrap{transform-box:view-box;transform-origin:281px 30px;} /* ═══════════════════════════════════════════════════════════════════════════ 3 · OFFER CARDS — three low-text carriers of: 14-day free trial + a surprise, when you finish the free YOUniverse quiz. ═══════════════════════════════════════════════════════════════════════════ */ .oc{padding:18px 14px 16px;} .oc-foot{color:var(--d-mut2);font-size:10.5px;line-height:1.4;text-align:center;margin-top:10px;} /* V1 · badge pair */ .o1-row{display:flex;gap:9px;} .o1-b{flex:1 1 0;min-width:0;border-radius:14px;padding:14px 6px 12px;text-align:center;} .o1-n{font-size:38px;font-weight:800;line-height:.9;letter-spacing:-2px;color:var(--chart); font-variant-numeric:tabular-nums;text-shadow:0 0 26px rgba(220,232,92,.35);} .o1-n small{font-size:14px;font-weight:800;letter-spacing:0;vertical-align:super;} .o1-q{font-size:38px;font-weight:800;line-height:.9;color:#EAF1FB;} .o1-l{font-size:9.5px;font-weight:800;letter-spacing:1.1px;text-transform:uppercase;color:var(--on-plate-3);margin-top:9px;} .o1-rule{display:flex;align-items:center;gap:9px;margin:14px 0 12px;} .o1-rule span{font-size:11px;font-weight:700;color:var(--d-mut);white-space:nowrap;} .o1-rule::before,.o1-rule::after{content:'';flex:1;height:1px;background:rgba(190,210,230,.18);} /* V2 · numbered step strip */ .o2-steps{display:flex;flex-direction:column;gap:0;margin-bottom:14px;} .o2-s{display:flex;align-items:center;gap:12px;padding:10px 2px;position:relative;} .o2-s+.o2-s{border-top:1px solid rgba(255,255,255,.07);} .o2-n{flex:0 0 auto;width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:800;color:var(--on-plate-2);font-variant-numeric:tabular-nums; background:linear-gradient(158deg,#333d47,#1b222a 58%,#10151a); box-shadow:inset 0 1px 0 rgba(200,214,230,.20), inset 0 -1px 0 rgba(0,0,0,.55);} .o2-s.win .o2-n{color:#0a1929;background:linear-gradient(180deg,#e6f176,#cdd94f); box-shadow:0 0 0 1px rgba(6,9,14,.85), inset 0 1px 0 rgba(255,255,255,.5), 0 2px 12px rgba(220,232,92,.35);} .o2-t{font-size:14px;font-weight:700;color:#EAF1FB;line-height:1.25;min-width:0;} .o2-s.win .o2-t{font-weight:800;} .o2-t b{color:var(--chart);font-weight:800;} .o2-free{flex:0 0 auto;margin-left:auto;font-size:9.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; color:var(--on-plate-3);border:1px solid var(--d-line2);border-radius:999px;padding:3px 8px;} /* V3 · sealed gift */ .o3-wrap{display:flex;flex-direction:column;align-items:center;} .o3-gift{width:132px;height:auto;max-width:60%;} .o3-gift .g-lid{transform-box:view-box;transform-origin:60px 46px;animation:o3Lift 3.6s ease-in-out infinite;} .o3-gift .g-spark{animation:o3Spark 3.6s ease-in-out infinite;} @keyframes o3Lift{0%,72%,100%{transform:translateY(0) rotate(0)}84%{transform:translateY(-7px) rotate(-3deg)}} @keyframes o3Spark{0%,70%,100%{opacity:0}84%{opacity:1}} .o3-stack{width:100%;margin-top:2px;} .o3-line{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:12px; background:rgba(255,255,255,.05);border:1px solid var(--d-line);} .o3-line+.o3-line{margin-top:7px;} .o3-line.hot{border-color:rgba(220,232,92,.34);background:rgba(220,232,92,.09);} .o3-k{font-size:15px;font-weight:800;color:#EAF1FB;line-height:1.15;min-width:0;} .o3-line.hot .o3-k{color:var(--chart);} .o3-ic{flex:0 0 auto;width:26px;height:26px;} .o3-plus{text-align:center;font-size:15px;font-weight:800;color:var(--d-mut2);margin:6px 0 -1px;} /* ═══════════════════════════════════════════════════════════════════════════ 4 · INLINE CTA — drops between quiz questions without hijacking the flow. Rules it obeys: never fixed, never focus-stealing, no autoplay motion, dismissible, `contain:layout` so it cannot reflow the question above it, and it stacks to two rows below ~272px instead of clipping. ═══════════════════════════════════════════════════════════════════════════ */ .wbi{display:flex;align-items:center;gap:11px;width:100%;contain:layout;position:relative; margin:16px 0;padding:11px 12px;border-radius:14px;text-align:left; border:1px solid var(--d-line);background:rgba(255,255,255,.05); box-shadow:inset 3px 0 0 var(--chart);scroll-margin:24px;} .wbi-txt{flex:1 1 auto;min-width:0;} .wbi-h{font-size:13px;font-weight:800;color:#EAF1FB;line-height:1.25;} .wbi-h b{color:var(--chart);} .wbi-s{font-size:11px;font-weight:600;color:var(--d-mut2);line-height:1.3;margin-top:2px;} .wbi-go{flex:0 0 auto;font:inherit;font-size:12px;font-weight:800;letter-spacing:.2px;cursor:pointer; color:#0a1929;background:linear-gradient(180deg,#e6f176,#cdd94f);border:none;border-radius:999px;padding:8px 14px; box-shadow:0 0 0 1px rgba(6,9,14,.85), inset 0 1px 0 rgba(255,255,255,.5), 0 4px 14px rgba(220,232,92,.24);} .wbi-go:active{filter:brightness(.94);} .wbi-x{flex:0 0 auto;width:22px;height:22px;border:none;background:transparent;color:var(--d-mut2); font:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0;} /* slim: one line, no button — for the tightest spots (between two options) */ .wbi.slim{padding:9px 12px;} .wbi.slim .wbi-h{font-size:12px;font-weight:700;} .wbi.slim .wbi-go{padding:0;background:none;border:none;box-shadow:none;color:var(--chart);font-size:12px;} /* The container is 252px at worst. Below 272 the button drops to its own full-width row — but the dismiss × must be PULLED UP into row one with `order`, or it strands itself on a third row under the button and the whole thing reads as broken. `.slim` opts out: its action is a text link, short enough to stay inline. */ @container (max-width:272px){ .wbi:not(.slim){flex-wrap:wrap;padding-right:30px;} /* .wbi-txt is flex:1, so it eats row one and pushes a flowed × onto a row of its own. Taking the × out of flow is the only version that puts it where a dismiss belongs — the top-right corner — without fighting the text for width. */ .wbi:not(.slim) .wbi-x{position:absolute;top:6px;right:6px;} .wbi:not(.slim) .wbi-go{width:100%;margin-top:2px;} } .wbi-host{container-type:inline-size;} /* container-query fallback for engines without it: the button already shrinks because .wbi-txt has min-width:0, so the worst case is a tighter pill, not a clip. */ /* ── reduced motion: ONE block, everything inert, nothing looks broken ────── */ @media (prefers-reduced-motion: reduce){ .wel-a .wa-body,.wel-a .wa-core,.wel-a .wa-tip,.wel-a .wa-swish, .wel-b .wb-head,.wel-b .wb-torso,.wel-b .wb-mitt-l,.wel-b .wb-sat, .wel-b .wb-vu1,.wel-b .wb-vu2,.wel-b .wb-vu3, .o3-gift .g-lid,.o3-gift .g-spark{animation:none !important;} /* the arms HOLD a raised wave instead of dropping — a still character that is mid-greeting still says hello; one with its arm down says nothing. */ .wel-a .wa-arm{animation:none !important;transform:rotate(10deg);} .wel-b .wb-arm{animation:none !important;transform:rotate(12deg);} .wel-a .wa-swish{opacity:.4 !important;} .wel-b .wb-vu1{transform:scaleY(.6)} .wel-b .wb-vu2{transform:scaleY(1)} .wel-b .wb-vu3{transform:scaleY(.6)} .o3-gift .g-spark{opacity:.85 !important;} .g3-live{animation:none !important;stroke-dashoffset:0 !important;} .g3-dot{animation:none !important;opacity:1 !important;} } /* ═══ THE PROMISE BAND ═══════════════════════════════════════════════════════════════════════ Sits directly under the hero, before the argument. Standard landing craft and the reason it is HERE rather than further down: a hero makes a claim, and the next thing a stranger wants is the cost of finding out whether it is true. Answering that immediately is what lets them read the rest without holding the question. It is a BAND, not a card — a statement the page makes, not a module you interact with. Cards invite a tap; this has nothing to tap, and giving it a card's affordances would be a lie about what it is. Chartreuse marks ONE thing: "free". That is the offer. The price under it is deliberately NOT lit — lighting both would make neither the point. (The 30-day money-back guarantee and its .promise-fine mechanism line were removed Sep 22; the rules are kept one build in case the band is restyled.) */ /* --chart, NOT --lit: app.css defines --lit as 104deg (the rake-light angle), so var(--lit) in a colour slot is invalid-at-computed-value-time and falls back to inherit, not to the literal. That silently killed the rule and the lit "free" here for as long as this page has loaded app.css. Any new accent on this page uses --chart. */ .promise{max-width:520px;margin:26px auto 0;padding:0 20px;text-align:center} .promise-rule{width:34px;height:2px;border-radius:2px;background:var(--chart,#DCE85C);opacity:.55;margin:0 auto 16px} .promise-offer{font-size:26px;font-weight:800;letter-spacing:-.5px;line-height:1.15;color:#EAF1F8} .promise-offer .lit{color:var(--chart,#DCE85C)} .promise-line{margin-top:11px;font-size:15.5px;line-height:1.5;color:#B8C2CC} .promise-line b{color:#EAF1F8;font-weight:700} /* The mechanism, small and true. It is here because the guarantee is honoured by WeBetter directly, not through the App Store — and a person who assumes otherwise, asks Apple and is refused is worse off than one who was told the real route. Small type, but it must not be removed. */ .promise-fine{margin-top:12px;font-size:11.5px;line-height:1.5;color:#7f8a99} @media(max-width:420px){ .promise-offer{font-size:22px} .promise-line{font-size:14.5px} } /* ── THREE UP (Sep 23) ────────────────────────────────────────────────────────────────────── Two rows of three cards — the three worlds, and the three report cadences. A grid rather than a carousel on purpose: the argument of both rows is that there are THREE, and a slide hidden behind a gesture is not making it. At the phone column (319px) each card is ~99px, which is why the title is 12.5px and the line is 10.5 — measured to the narrowest case, not to the desktop. The cards are plate, not glass: they hold a label, not an instrument, so nothing here is lit except the icon. */ .tri{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:22px} .tri-c{background:rgba(255,255,255,.035);border:1px solid var(--d-line);border-radius:14px; padding:14px 7px 13px;text-align:center} .tri-c svg{display:block;width:23px;height:23px;margin:0 auto 9px;color:var(--chart)} .tri-c b{display:block;font-size:12.5px;font-weight:800;line-height:1.2;letter-spacing:-.1px;color:#fff} .tri-c span{display:block;margin-top:6px;font-size:10.5px;line-height:1.42;color:var(--d-mut2)} /* the cadence word sits above its line, small caps, so the card reads Morning / Headstart / what's ahead in the same order the app says it */ .tri-c span i{display:block;font-style:normal;margin-bottom:3px;font-size:9px;font-weight:800; letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.42)} @media (max-width:360px){ .tri{gap:7px} .tri-c{padding:12px 5px 11px} .tri-c b{font-size:11.5px} } /* the connection story as one card: heading, diagram, one line of the rules that bind */ .cn-mini{padding:16px 12px 14px} .cn-mini-h{font-size:15px;font-weight:800;line-height:1.3;letter-spacing:-.2px;color:#fff; text-align:center;margin-bottom:10px} .cn-mini-h .lit{color:var(--chart)} .cn-mini-f{margin-top:10px;padding-top:10px;border-top:1px solid var(--d-line); font-size:11px;line-height:1.45;color:var(--d-mut2);text-align:center} /* ── THE LADDER (Sep 22) ───────────────────────────────────────────────────────────────────── The three worlds, one line each, directly under the offer — the same three lines that now open the app on splash.html, so what a stranger reads here and what a new user sees are one sentence, not two pitches. Hairlines rather than cards for the same reason the band above is a band: there is nothing to tap. The lit word IS the world's name, never the verb. */ .ladder{position:relative;width:100%;max-width:340px;margin:30px auto 0;padding:70px 0 0;box-sizing:border-box} /* THE PYRAMID (Sep 23). The triangle is a layer BEHIND the rows, stretched to whatever the column is. The horizontal rules are its courses: each is set to the width the triangle actually has at that height, so they land ON the diagonals rather than near them — 1/3 of the way down is 1/3 of the base, 2/3 down is 2/3, and the base is the full width. Change a row's height and these three numbers are what has to move with it. The apex sits in the 20px of padding-top, which is why the top row has no rule of its own: at the apex the triangle has no width to draw. */ .lad-tri{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0} .lad{position:relative;z-index:1;text-align:center;padding:14px 0} .lad::before{content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);height:1px; background:rgba(255,255,255,.14)} .lad:first-child::before{width:0} .lad:nth-child(3)::before{width:49%} .lad:nth-child(4)::before{width:74%} .ladder::after{content:'';display:block;height:1px;width:100%;background:rgba(255,255,255,.14)} .lad .v{display:block;font-size:12.5px;font-weight:500;letter-spacing:.6px;text-transform:uppercase;color:#7f8a99} .lad .n{display:block;margin-top:3px;font-size:24px;font-weight:800;letter-spacing:-.5px;color:#fff} .lad .n em{font-style:normal;color:var(--chart,#DCE85C)} @media(max-width:420px){ .lad .n{font-size:22px} } /* ── Sep 26 (founder, marked up on the live page) ─────────────────────────────────────────────── */ /* "put large green WeBetter and then shrink run your world your way" */ .hero-brand{color:var(--chart,#DCE85C);font-size:clamp(46px,14.5vw,62px);font-weight:900;line-height:1;letter-spacing:-2px;margin:0 0 10px;} .hero-wrap .hero-h{font-size:clamp(21px,6.4vw,28px);line-height:1.15;letter-spacing:-.6px;} /* the three "Start my 7 day free trial" asks, each with its fine print */ .promise .cta-glow{margin-top:2px;} .cta-fine{margin-top:9px;font-size:11.5px;line-height:1.45;color:var(--d-mut2,#8a96a6);text-align:center;} /* the one capture sheet they open (pre-launch: the waitlist) */ .cap-ov{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;padding:20px;box-sizing:border-box; background:rgba(3,6,13,.74);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);} .cap-ov.on{display:flex;} .cap-sheet{position:relative;width:100%;max-width:400px;box-sizing:border-box;padding:26px 18px 18px;border-radius:22px;text-align:center; background:#0F141A;border:1px solid rgba(255,255,255,.10);box-shadow:0 24px 60px rgba(0,0,0,.5);} .cap-x{position:absolute;top:8px;right:10px;background:none;border:none;color:#8a96a6;font-size:26px;line-height:1;cursor:pointer;padding:6px 10px;} .cap-t{color:#fff;font-size:20px;font-weight:800;letter-spacing:-.3px;padding:0 24px;} .cap-s{margin:8px 0 14px;color:#B8C2CC;font-size:14px;line-height:1.5;} /* ── DESKTOP (Sep 28 — founder: "is operating like an iphone on web resolve") ─────────────────── The landing lived inside the app's phone container, which the live site caps at 480px (app.css, body.wb-live .phone), so a desktop visitor saw a phone-width column in a sea of dark. From 900px up this page — and only this page (body.land) — uses the window: the container spans it, the content centres in a 1080px column, headlines and copy scale up, text stays at a readable measure, and the screenshot track shows four screens at once instead of one. Phones are untouched: every rule below lives inside the media query. */ @media (min-width:900px){ body.land .phone, body.land.wb-live .phone{ max-width:none; width:100%; } body.land .screen{ max-width:1080px; margin:0 auto; padding-left:48px; padding-right:48px; box-sizing:border-box; } body.land .hero-wrap{ margin-top:56px; } body.land .hero-brand{ font-size:96px; letter-spacing:-3px; } body.land .hero-h{ font-size:56px; letter-spacing:-2px; } body.land .hero-motto{ font-size:30px; } body.land .sec{ margin-top:96px; } body.land .sec-h{ font-size:44px; letter-spacing:-1.2px; max-width:820px; margin-left:auto; margin-right:auto; } body.land .sec-s, body.land .sec-list{ font-size:17px; max-width:680px; margin-left:auto; margin-right:auto; } body.land .sec-eyb{ font-size:12px; } body.land .sec-gfx{ max-width:620px; margin-left:auto; margin-right:auto; } body.land .cta-fine, body.land .sec-fine{ font-size:13px; } /* Every trial button at the hero's width. The two lower ones sit straight in the column, so width:100% made them ~980px bars. */ body.land .cta-glow{ max-width:380px; margin-left:auto; margin-right:auto; } /* the two three-up card rows: a readable width and type sized for a desk, not a palm */ body.land .tri{ max-width:880px; margin-left:auto; margin-right:auto; gap:16px; margin-top:30px; } body.land .tri-c{ padding:24px 18px 22px; border-radius:18px; } body.land .tri-c svg{ width:28px; height:28px; margin-bottom:12px; } body.land .tri-c b{ font-size:16px; } body.land .tri-c span{ font-size:14px; margin-top:8px; } body.land .tri-c span i{ font-size:11px; } /* the screenshot track: three across, four from 1200px, snapping each page to its left edge */ body.land .sec-gfx:has(> .ss){ max-width:none; } /* --shot-h is height-first on purpose (see SCREENSHOT SIZING). Here the slide is the narrower bound, and at 440 a 295px frame held a 203px capture with empty sides; the higher cap lets the width decide, and the vh term still keeps a capture inside the fold on a short laptop. */ body.land .ss{ gap:22px; --shot-h:min(660px, 74vh); } body.land .ss-slide{ flex:0 0 calc((100% - 44px) / 3); scroll-snap-align:start; } body.land .ss-cap{ font-size:13px; } } @media (min-width:1200px){ body.land .ss-slide{ flex-basis:calc((100% - 66px) / 4); } }