:root{ /* pulled from static/css/loft.css so this matches the app */ --ink:#14141f; --ink-2:#1e1e2c; --band:#26266b; --band-2:#1f1f59; --card:#1c1c50; --accent:#5b5bd6; --accent-600:#4a4ac4; --peri:#c9c9fb; --cream:#efe3b0; --amber:#dd9a2f; --w:rgba(255,255,255,.92); --w-70:rgba(255,255,255,.68); --w-45:rgba(255,255,255,.45); --w-12:rgba(255,255,255,.12); --w-07:rgba(255,255,255,.07); --display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --max:1180px; --pad:clamp(20px,5vw,40px); --sect:clamp(72px,9vw,124px); --r:12px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ font-family:var(--body); background:var(--ink); color:var(--w-70); font-size:16px; line-height:1.65; -webkit-font-smoothing:antialiased; /* clip, not hidden. Overflow set on propagates to the viewport, and `hidden` would turn the viewport into a scroll container, which breaks position:sticky on the nav. This is only a backstop — the real mobile overflow sources (nav row, the comparison table) are fixed at their origin in the media queries below. */ overflow-x:clip; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} :focus-visible{outline:2px solid var(--cream);outline-offset:3px;border-radius:4px} .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)} .sect{padding-block:var(--sect)} h1,h2,h3{font-family:var(--display);color:#fff;line-height:1.1;letter-spacing:-.02em;font-weight:600} h1{font-size:clamp(2.3rem,5.2vw,3.9rem);letter-spacing:-.03em} h2{font-size:clamp(1.8rem,3.4vw,2.7rem)} h3{font-size:1.16rem;line-height:1.35;letter-spacing:-.01em} .eyebrow{ font-family:var(--mono);font-size:.72rem;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--peri); display:block;margin-bottom:16px; } /* ---------- promo bar ---------- */ .promo{ background:var(--band);border-bottom:1px solid var(--w-12); font-size:.85rem;color:var(--w); } .promo .wrap{display:flex;align-items:center;justify-content:center;gap:12px;padding-block:11px;text-align:center} .promo a{color:var(--cream);text-decoration:underline;text-underline-offset:3px;white-space:nowrap} .promo button{ background:none;border:0;color:var(--w-45);cursor:pointer; font-size:1.15rem;line-height:1;padding:2px 4px;margin-left:auto;flex-shrink:0; } .promo button:hover{color:#fff} /* ---------- nav ---------- */ .nav{ position:sticky;top:0;z-index:60; background:rgba(20,20,31,.82);backdrop-filter:blur(14px); border-bottom:1px solid var(--w-07); } .nav .wrap{display:flex;align-items:center;gap:36px;height:66px} .logo{ font-family:var(--display);font-weight:700;font-size:1.24rem; color:#fff;letter-spacing:-.03em;display:flex;align-items:center;gap:10px; } .brand-mark{height:36px;width:auto;flex-shrink:0;display:block} .brand-word{font-weight:700;letter-spacing:-.02em;line-height:1} .brand-word span{font-weight:500;color:#8f8fec} .ft-grid .brand-mark{height:31px} .nav-links{display:flex;gap:30px;font-size:.92rem;margin-left:8px} .nav-links a{color:var(--w-70);transition:color .18s} .nav-links a:hover{color:#fff} .nav-cta{margin-left:auto;display:flex;align-items:center;gap:20px} .nav-signin{color:var(--w-70);font-size:.9rem;transition:color .18s;white-space:nowrap} .nav-signin:hover{color:#fff} .btn{ display:inline-flex;align-items:center;gap:9px; font-family:var(--body);font-weight:600;font-size:.93rem; padding:12px 22px;border-radius:8px;border:1px solid transparent; cursor:pointer;transition:transform .16s,background .18s,border-color .18s; /* a button label that breaks across two lines reads as broken, not as wrapped */ white-space:nowrap; } .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--accent);color:#fff} .btn-primary:hover{background:var(--accent-600)} .btn-ghost{border-color:var(--w-12);color:var(--w);background:transparent} .btn-ghost:hover{border-color:var(--peri);color:#fff} .btn-cream{background:var(--cream);color:var(--ink)} .btn-cream:hover{background:#f6efc9} .btn .arw{transition:transform .18s} .btn:hover .arw{transform:translateX(3px)} .btn-lg{padding:17px 34px;font-size:1.05rem;border-radius:9px;gap:11px} /* ---------- hero ---------- */ .hero{position:relative;overflow:hidden;padding-block:clamp(56px,7vw,92px) var(--sect)} .hero::before{ content:"";position:absolute;inset:0;pointer-events:none; background: radial-gradient(760px 460px at 78% 8%,rgba(91,91,214,.30),transparent 62%), radial-gradient(560px 380px at 6% 92%,rgba(38,38,107,.42),transparent 66%); } .hero .wrap{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(36px,5vw,68px);align-items:center} .hero h1 .h1-verbs{color:var(--peri)} .hero h1 .accent{ color:var(--cream); /* subtle hand-drawn underline so the promise reads as the thesis */ background-image:linear-gradient(var(--cream),var(--cream)); background-size:100% 2px;background-repeat:no-repeat;background-position:0 100%; padding-bottom:2px; } .hero p.lede{font-size:1.09rem;margin-top:22px;max-width:52ch;color:var(--w-70)} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px} .certline{ margin-top:30px;padding-top:22px;border-top:1px solid var(--w-07); font-family:var(--mono);font-size:.76rem;color:var(--w-45);letter-spacing:.02em; } /* ---------- signature: the cadence card ---------- */ .cadence{ background:linear-gradient(168deg,var(--band) 0%,var(--band-2) 100%); border:1px solid var(--w-12);border-radius:16px; padding:26px 24px 24px;box-shadow:0 30px 80px rgba(10,10,30,.55); } .cadence-hd{ display:flex;align-items:center;justify-content:space-between; padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--w-12); } .cadence-hd span{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--peri)} .pill{ font-family:var(--mono);font-size:.68rem;letter-spacing:.08em; background:rgba(239,227,176,.14);color:var(--cream); padding:5px 10px;border-radius:99px;border:1px solid rgba(239,227,176,.22); } /* `.cadence-hd span` above is one specificity point heavier than `.pill`, so without this the pill silently rendered at .72rem/.14em in periwinkle instead of its own cream. That extra tracking is also ~25px of width, which is what pushed the header row past the card on narrow screens. Do not fold this back into .pill. */ .cadence-hd .pill{font-size:.68rem;letter-spacing:.08em;color:var(--cream)} /* Gutter maths, kept in sync deliberately: the day label must END before the rail line begins, or the step dot renders on top of the text. With padding-left 92 the label spans 0-48px, the line sits at 62px, and the 9px dot (left:-34px) spans 58-67px so it stays centred on the line. Change one, recheck all four. */ .rail{position:relative;padding-left:92px;padding-top:22px} .rail::before{ content:"";position:absolute;left:62px;top:34px;bottom:14px;width:1px; background:linear-gradient(var(--w-12),rgba(255,255,255,.02)); } .step{position:relative;margin-bottom:14px} .step:last-child{margin-bottom:0} .day{ position:absolute;left:-92px;top:12px;width:48px;text-align:right; font-family:var(--mono);font-size:.7rem;color:var(--w-45);letter-spacing:.05em; } .step::before{ content:"";position:absolute;left:-34px;top:17px; width:9px;height:9px;border-radius:50%;background:var(--peri); box-shadow:0 0 0 4px var(--band-2); } .step.live::before{background:var(--cream)} .mail{ background:var(--card);border:1px solid var(--w-12); border-radius:10px;padding:14px 16px; } .mail .subj{color:#fff;font-weight:600;font-size:.91rem;margin-bottom:7px;letter-spacing:-.005em} .mail .bd{font-size:.85rem;line-height:1.55;color:var(--w-70)} .mail mark{background:rgba(239,227,176,.17);color:var(--cream);padding:1px 4px;border-radius:3px} .mail .meta{ display:flex;gap:14px;margin-top:11px;padding-top:10px;border-top:1px solid var(--w-07); font-family:var(--mono);font-size:.68rem;color:var(--w-45); } .cadence-ft{ margin-top:20px;padding-top:16px;border-top:1px solid var(--w-12); font-family:var(--mono);font-size:.7rem;color:var(--w-45); display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px; } .cadence-ft b{color:var(--peri);font-weight:500} /* ---------- cadence: staged reveal ---------- Each step rises in, its subject wipes across in discrete jumps (steps() is what makes it read as typing rather than a fade), then the body and meta appear. Delays are hand-sequenced rather than derived from nth-child arithmetic so the rhythm can be tuned per step. Every property zeroed here is forced back to its visible state in the reduced-motion block at the foot of this file. Miss that and the whole card renders blank for anyone who has motion turned down. */ .cadence .step{opacity:0;animation:stepIn .5s cubic-bezier(.33,.6,.3,1) both} .cadence .step:nth-child(1){animation-delay:.40s} .cadence .step:nth-child(2){animation-delay:1.75s} .cadence .step:nth-child(3){animation-delay:3.10s} .cadence .subj{clip-path:inset(0 100% 0 0);animation:typeIn .8s steps(26,end) both} .cadence .step:nth-child(1) .subj{animation-delay:.70s} .cadence .step:nth-child(2) .subj{animation-delay:2.05s} .cadence .step:nth-child(3) .subj{animation-delay:3.40s} .cadence .bd,.cadence .meta{opacity:0;animation:softIn .45s ease both} .cadence .step:nth-child(1) .bd{animation-delay:1.50s} .cadence .step:nth-child(1) .meta{animation-delay:1.65s} .cadence .step:nth-child(2) .bd{animation-delay:2.85s} .cadence .step:nth-child(2) .meta{animation-delay:3.00s} .cadence .step:nth-child(3) .bd{animation-delay:4.20s} .cadence .step:nth-child(3) .meta{animation-delay:4.35s} @keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes typeIn{to{clip-path:inset(0 0 0 0)}} @keyframes softIn{to{opacity:1}} /* ---------- logo marquee ---------- */ .logos{border-block:1px solid var(--w-07);padding-block:44px;background:rgba(255,255,255,.014)} .logos p{ text-align:center;font-family:var(--mono);font-size:.73rem; letter-spacing:.15em;text-transform:uppercase;color:var(--w-45);margin-bottom:30px; } /* One period of the animation must equal exactly one group's width, so each group carries its own trailing gap as padding rather than relying on a gap between the two groups — otherwise translateX(-50%) lands half a gap short and the strip visibly jumps on every loop. */ /* The -webkit- prefix is not redundant: iOS Safari below 15.4 ignores the unprefixed property entirely and the strip renders with hard cut edges. The compositing hints on the track are load-bearing on iOS. Safari rasterises a masked subtree once and then reuses that bitmap, so the marquee painted at its start offset and never appeared to move even though the animation was technically running. Promoting the track to its own layer (translate3d + will-change) forces the transform onto the compositor, where the mask cannot flatten it. landing.js samples the matrix after first paint and drives the strip from rAF if it is somehow still stuck. */ .marquee{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{ display:flex;width:max-content; animation:slide 46s linear infinite; will-change:transform; transform:translate3d(0,0,0); -webkit-backface-visibility:hidden;backface-visibility:hidden; } .marquee-group{display:flex;gap:60px;padding-right:60px;flex:0 0 auto} @keyframes slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} .marquee-track span{ font-family:var(--display);font-weight:600;font-size:1.16rem; color:var(--w-45);white-space:nowrap;letter-spacing:-.01em; } /* ---------- problem ---------- */ .problem{background:var(--ink-2)} .problem h2{max-width:19ch} .pain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:52px;background:var(--w-07);border:1px solid var(--w-07);border-radius:var(--r);overflow:hidden} .pain{background:var(--ink-2);padding:30px 28px} .pain h3{margin-bottom:11px;color:var(--peri)} .pain p{font-size:.95rem} .result{ margin-top:34px;padding:24px 28px;border-left:3px solid var(--cream); background:rgba(239,227,176,.05);border-radius:0 var(--r) var(--r) 0; } .result strong{color:var(--cream);font-weight:600} .result p{color:var(--w);font-size:1.03rem} /* ---------- features ---------- */ .feat{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);align-items:center;margin-bottom:var(--sect)} .feat:last-child{margin-bottom:0} .feat.flip .feat-txt{order:2} .feat h2{font-size:clamp(1.55rem,2.7vw,2.15rem);max-width:17ch} .feat p.sub{margin-top:18px;font-size:1rem} .feat ul{list-style:none;margin-top:26px;display:grid;gap:13px} .feat li{position:relative;padding-left:28px;font-size:.95rem} .feat li::before{ content:"";position:absolute;left:0;top:.55em; width:7px;height:7px;border-radius:2px;background:var(--accent); transform:rotate(45deg); } .shot{ background:linear-gradient(158deg,var(--band) 0%,var(--band-2) 100%); border:1px solid var(--w-12);border-radius:14px; aspect-ratio:4/3;display:grid;place-items:center;padding:18px; box-shadow:0 22px 60px rgba(10,10,30,.4); } .shot svg{width:100%;height:auto;display:block} /* ---------- inline SVG product graphics ---------- Styling lives here rather than in a