/* Binder — the site's stylesheet. Both pages share it: brand tokens, base and shared components first, then index.html's seven sections in page order, then the /signup wizard. Neither page carries CSS of its own. Mobile-first: every rule outside the two @media blocks at the bottom is the ~390px rule, and wider screens only widen. Change brand colors/fonts here. */ /* ===== tokens ============================================================ */ :root{ /* Blue lineage from the 2.0 brand, lifted so it reads on near-black. */ --brand:#4d7cf3; --brand-dk:#3a63d6; --brand-bg:linear-gradient(90deg,#4d7cf3,#2f9ad6); --bg:#08090c; --surface:#101219; --surface-2:#171a23; --line:#242833; --ink:#f3f5f9; --muted:#98a0b0; --dim:#69707e; --ok:#3ddc97; --warn:#f0b354; /* Inter is actually loaded (Google Fonts link in both s) — the names here only work because of that link. */ --font-body:'Inter',system-ui,-apple-system,'Helvetica Neue',sans-serif; --font-head:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif; --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,monospace; } /* ===== base ============================================================== */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased;position:relative} /* Page-wide grain, fixed and behind the content (z-index:-1), so every section shares the hero's texture instead of going flat after the fold. */ body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.4; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")} a{color:inherit;text-decoration:none} img,svg{max-width:100%} .wrap{max-width:1140px;margin:0 auto;padding:0 20px} /* ===== shared components ================================================= */ .btn{display:inline-block;background:var(--brand-bg);color:#fff;padding:14px 22px;border-radius:10px;font-weight:700;font-size:15px;line-height:1.2;border:none;cursor:pointer;font-family:var(--font-body);text-align:center;transition:.15s; box-shadow:0 10px 30px -10px rgba(77,124,243,.55)} /* A sign of life on the one element that has to be clicked: colour travels in one direction, forever, instead of rocking back and forth. The one-way loop is what dictates the stop positions. The button shows a third of the image, so for the end of the animation to look identical to the start — no snap — the image's first third has to equal its last third. That means alternating stops (blue, teal, blue, teal) rather than a single ramp, and every point on the button then cycles blue -> teal -> blue as it passes. Change the two colours freely; move the 33.333%/66.667% stops and it snaps. Two colours only, matched in brightness (~124), so the drift reads as hue and never as a third colour passing through. Dials — background-size is the travel, duration the speed. */ .btn{background:linear-gradient(90deg,#4d7cf3,#2c98cc 33.333%,#4d7cf3 66.667%,#2c98cc);background-size:300% 100%; animation:grad-drift 6s linear infinite} @keyframes grad-drift{to{background-position:100% 0}} /* On top of that drift, two soft pools of colour wander over the button on their own clocks. 7s and 11s share no common multiple worth noticing, so they drift in and out of phase and the surface never repeats a pose you recognise — that is what reads as water rather than as a slide. One pool leans teal and the other indigo, ~50deg apart, so where they overlap the colour changes rather than just brightening. They live on pseudo-elements rather than as extra background layers because CSS can only animate all of an element's background-positions together, and one shared clock is exactly what kills the effect. Pseudo-elements also mean transform-only motion, which the compositor handles without repainting. isolation + z-index:-1 puts them above the button's own gradient but below its label; overflow:hidden keeps them inside the pill. */ .btn{position:relative;z-index:0;overflow:hidden;isolation:isolate} .btn::before,.btn::after{content:"";position:absolute;z-index:-1;pointer-events:none; width:110%;height:300%;top:-100%;border-radius:50%} .btn::before{left:-25%;background:radial-gradient(closest-side,rgba(30,206,205,.58),transparent); animation:btn-pool-a 7s ease-in-out infinite alternate} .btn::after{right:-25%;background:radial-gradient(closest-side,rgba(96,110,245,.55),transparent); animation:btn-pool-b 11s ease-in-out infinite alternate} @keyframes btn-pool-a{to{transform:translate(55%,9%) scale(1.2)}} @keyframes btn-pool-b{to{transform:translate(-60%,-8%) scale(.85)}} .btn:hover{filter:brightness(1.08);box-shadow:0 12px 34px -10px rgba(77,124,243,.7)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.6;cursor:default} .btn-lg{padding:17px 28px;font-size:16px} .btn-block{display:block;width:100%} nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} /* Landing only (signup's bar is always solid): the hero owns the top of the screen, so the bar starts invisible and fades in on the first scroll. nav.js owns both classes; without it the bar simply stays in this bare state. */ /* fixed, not sticky: the bar has to float *over* the hero so the hero's wash and grain run behind it. Sticky keeps it in the flow, which leaves a flat 60px band of bare --bg above the gradient — a transparent bar that still looks like a bar. .hero pays for the lost height with padding-top. */ [data-page="landing"] nav{position:fixed;left:0;right:0; background:transparent;backdrop-filter:none;border-bottom-color:transparent; transition:background .2s ease,border-color .2s ease,backdrop-filter .2s ease} [data-page="landing"] nav.is-scrolled{background:color-mix(in srgb,var(--bg) 82%,transparent); backdrop-filter:blur(10px);border-bottom-color:var(--line)} /* The nav CTA waits for the hero's own button to leave the screen — two identical buttons on screen at once reads as a mistake. */ /* Smaller than a page CTA: it rides in a 60px bar, and shrinking it is what buys the breathing room above and below. */ [data-page="landing"] nav .btn{padding:10px 18px;font-size:14px; opacity:0;transform:translateY(-6px);pointer-events:none; transition:opacity .2s ease,transform .2s ease} [data-page="landing"] nav.is-cta-shown .btn{opacity:1;transform:none;pointer-events:auto} .nav-in{display:flex;align-items:center;justify-content:space-between;height:60px} .logo{display:flex;align-items:center;gap:8px;font-size:20px;font-weight:800;letter-spacing:-.02em;font-family:var(--font-head)} .logo .mark{height:22px;width:auto;flex:none} .logo .mark path{fill:var(--brand)} .logo .wm{color:var(--ink)} /* The wordmark is one solid colour — the mark beside it carries the blue. */ .logo .wm em{font-style:normal} .sec{padding:56px 0;border-top:1px solid var(--line)} /* Each section gets its own faint wash, alternating sides and tints, so the scroll has rhythm instead of one flat black run after the hero. */ .sec[data-section="disappears"]{background:radial-gradient(80% 70% at 8% 0%, rgba(255,90,90,.06), transparent 60%)} .sec[data-section="features"]{background:radial-gradient(90% 60% at 92% 0%, rgba(77,124,243,.09), transparent 62%)} .sec[data-section="audience"]{background:radial-gradient(80% 60% at 8% 0%, rgba(47,154,214,.07), transparent 60%)} .sec[data-section="price"]{background:radial-gradient(80% 70% at 92% 0%, rgba(61,220,151,.06), transparent 60%)} .sec[data-section="founder"]{background:radial-gradient(80% 60% at 8% 0%, rgba(77,124,243,.07), transparent 60%)} .sec-title{font-family:var(--font-head);font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:800} .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .cta-row{margin-top:26px} /* The mid CTA sits directly under the four cards, so a full-width button reads as a fifth card. Narrower and shorter than the hero's, and centred. */ .cta-mid{text-align:center} .cta-mid .btn{padding:13px 34px} /* ===== 1 · hero ========================================================== */ /* Dark "vibe": two off-centre blue washes over the page's near-black. The grain is the page-wide body::before layer — every section's washes stay transparent so it shows through, which is why none of them end in var(--bg). */ /* Top padding = the fixed nav's 61px + the hero's own 44px. */ .hero{position:relative;overflow:hidden;padding:105px 0 56px; background: radial-gradient(120% 90% at 78% -10%, rgba(77,124,243,.22), transparent 60%), radial-gradient(90% 70% at 0% 8%, rgba(47,154,214,.14), transparent 62%);} /* The light-trail canvas fills the hero and stays under the content, which is what .hero .wrap's z-index buys. warp.js sizes it to the box. */ .warp{position:absolute;inset:0;width:100%;height:100%;pointer-events:none} .hero .wrap{position:relative;z-index:1} .hero h1{font-family:var(--font-head);font-size:38px;line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:0 0 16px} .hero .sub{font-size:17px;color:var(--muted);max-width:34em} /* Same drifting ramp as the CTA, clipped to the glyphs instead of a box, so the one highlighted phrase breathes in step with the button below it. */ .hero .sub strong{font-weight:700;color:transparent; background:linear-gradient(90deg,#4d7cf3,#2c98cc 33.333%,#4d7cf3 66.667%,#2c98cc);background-size:300% 100%; -webkit-background-clip:text;background-clip:text; animation:grad-drift 6s linear infinite} .hero .note{margin-top:12px;font-size:14px;font-weight:600;color:#fff} /* Scoped to the hero so the mid-page CTA keeps the tighter .cta-row spacing. */ .hero .cta-row{margin-top:32px} /* hero activity feed — chips arrive from the bottom and the stack rises. feed.js owns the timing and the content; everything visual is here. */ /* Stacked under the copy on mobile; the 1040px rule drops this to 0 when the hero splits into two columns. */ .feed{margin-top:48px} /* Reads as one phrase, left-aligned: "73 calls today". */ /* Centred rather than baseline-aligned: .feed-num clips its overflow, which would otherwise synthesise its baseline from the bottom edge and sit the number low against the label. */ .feed-head{display:flex;align-items:center;gap:8px; padding:0 4px 12px;border-bottom:1px solid var(--line);margin-bottom:14px} .feed-label{font-size:15px;color:var(--muted)} /* An odometer, one column per digit — feed.js builds the columns and rolls only the ones whose digit actually changed, so 24 -> 25 leaves the 2 standing. Each column is a window one row tall; the new digit is appended below the old one and the pair slides up, so it rises from underneath and pushes the old digit out of view. */ .feed-num{font-family:var(--font-mono);font-size:24px;font-weight:700;color:var(--ink); font-variant-numeric:tabular-nums;line-height:1.15;display:flex} .feed-num .dig{overflow:hidden;height:1.15em} .feed-num .roll{display:block;transition:transform .42s cubic-bezier(.22,.61,.36,1)} /* Exactly two rows live in a column mid-roll, so half the stack is one row. */ .feed-num .roll.is-rolling{transform:translateY(-50%)} .feed-num i{display:block;height:1.15em;font-style:normal} /* Fixed height, top-anchored: a new chip is inserted at the top and pushes the stack down, and dropping the last one off is invisible because content hangs from the top. The mask fades chips out at the bottom as they leave. */ .feed-list{list-style:none;height:300px;overflow:hidden; display:flex;flex-direction:column;justify-content:flex-start; -webkit-mask-image:linear-gradient(to bottom,#000 72%,transparent); mask-image:linear-gradient(to bottom,#000 72%,transparent)} /* Two halves to the entrance: the row opens from zero height (which is what pushes the stack down) while the chip inside slides in from the right. flex:none matters — the stack is deliberately taller than the box, and without it the items shrink to fit instead of overflowing under the mask. */ .feed-item{flex:none;overflow:hidden;height:0;animation:feed-open .42s cubic-bezier(.22,.9,.3,1) forwards} @keyframes feed-open{to{height:50px}} .feed-item .feed-chip{animation:feed-slide .5s cubic-bezier(.16,.8,.3,1) .05s both} @keyframes feed-slide{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}} /* Glass, not card: translucent over a blur so the hero's wash and grain carry through, a hairline of light along the top edge, and a soft drop shadow to lift it off the background. The family colour arrives as a gradient that is strongest behind the icon and gone by the middle of the text — the chip is lit from its own icon rather than tinted flat. 13px is what keeps the longest line on one row of a ~390px phone; the wide layout gives the feed its own column, so it goes back up to 14px there. */ .feed-chip{display:flex;align-items:center;gap:9px;height:42px;margin-bottom:8px;padding:0 14px; border-radius:999px;border:1px solid var(--line);backdrop-filter:blur(7px); font-size:13px;color:var(--ink);white-space:nowrap;overflow:hidden; box-shadow:0 10px 22px -16px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.055)} .feed-chip svg{flex:none;width:16px;height:16px} .feed-chip span{overflow:hidden;text-overflow:ellipsis} /* Exactly two families, each owning one colour throughout — green = it happened on the phone, blue = Binder did it. The chip carries a wash of its own colour so the family is legible at a glance, before any word is read. */ .feed-chip.is-call{border-color:rgba(61,220,151,.24); background:linear-gradient(90deg,rgba(61,220,151,.17),rgba(16,18,25,.72) 58%)} .feed-chip.is-call svg{color:var(--ok)} /* Already --brand's exact rgb; the lift is in alpha and in a brighter glyph, because at low alpha over near-black that blue reads as navy rather than as the blue on the buttons. */ .feed-chip.is-ai{border-color:rgba(77,124,243,.42); background:linear-gradient(90deg,rgba(77,124,243,.3),rgba(16,18,25,.72) 58%)} .feed-chip.is-ai svg{color:#7ea6ff} /* The chip that just arrived is held a touch brighter, so the top of the column reads as the live edge and the stack visibly cools as it ages downward. */ .feed-item:first-child .feed-chip{border-color:rgba(255,255,255,.16); box-shadow:0 12px 26px -14px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.09)} /* ===== 2 · what disappears =============================================== */ .gone{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin-top:22px} .gone li{font-size:15px;color:var(--muted);text-decoration:line-through; text-decoration-color:rgba(255,90,90,.85);text-decoration-thickness:1px; background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:9px 13px} /* ===== 3 · the four things =============================================== */ /* align-items:start — grid items stretch to the tallest in their row by default, so opening one card would grow its closed neighbour's empty box to match. */ .feats{margin-top:26px;display:grid;gap:12px;align-items:start} .feat{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} .feat summary{list-style:none;cursor:pointer;padding:18px;display:grid;grid-template-columns:26px 1fr 18px;gap:12px;align-items:center} .feat summary::-webkit-details-marker{display:none} /* Just the number, wearing the same drifting ramp as the CTA and the price. */ .feat .n{font-family:var(--font-mono);font-size:17px;font-weight:700;text-align:center; color:transparent;background:linear-gradient(90deg,#4d7cf3,#2c98cc 33.333%,#4d7cf3 66.667%,#2c98cc); background-size:300% 100%;-webkit-background-clip:text;background-clip:text; animation:grad-drift 6s linear infinite} .feat h3{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3} .feat .chev{width:17px;height:17px;color:#fff;stroke-width:3;transition:transform .18s} .feat[open] .chev{transform:rotate(180deg)} .feat[open]{border-color:rgba(77,124,243,.45)} .feat .body{padding:0 18px 18px 56px;font-size:14.5px;color:var(--muted)} .feat .body strong{color:var(--ink);font-weight:600} /* ===== 4 · who it's for ================================================== */ /* Deliberately unequal: the "yes" card is lit and clickable, the "no" card sits flat and dim. Two boxes that look alike can't show opposition, and a reader should want to be in the left one. */ .fit{margin-top:20px;display:grid;gap:12px} .fit>*{border:1px solid var(--line);border-radius:12px;padding:18px;font-size:15px;display:block} .fit b{display:block;font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px} .fit ul{list-style:none;display:grid;gap:9px} /* The tick/cross is drawn per card below; the padding reserves its column. */ .fit li{padding-left:26px;position:relative;line-height:1.45} .fit .yes{background:rgba(77,124,243,.10);border-color:rgba(77,124,243,.45);color:var(--ink); box-shadow:0 0 40px -18px rgba(77,124,243,.9);transition:.15s} .fit .yes:hover{border-color:var(--brand);box-shadow:0 0 44px -14px rgba(77,124,243,1)} .fit .yes b{color:var(--ok)} /* Same check as the price list. */ .fit .yes li::before{content:"";position:absolute;left:2px;top:6px;width:12px;height:7px; border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)} .fit-go{display:block;margin-top:16px;padding-top:14px;border-top:1px solid rgba(77,124,243,.28); font-weight:700;color:var(--brand)} .fit .no{background:transparent;color:var(--dim)} .fit .no b{color:var(--warn)} .fit .no li::before{content:"×";position:absolute;left:3px;top:-1px;font-size:17px;color:var(--warn);opacity:.8} /* Mirrors .fit-go's position so both cards close on a line instead of a bullet — this one is a verdict, not another criterion, so it carries no cross. */ .fit-end{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--line); font-weight:700;color:var(--muted)} /* ===== 5 · price ========================================================= */ .price{margin-top:20px;border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:22px} .price .big{font-family:var(--font-head);font-size:38px;font-weight:800;letter-spacing:-.02em;line-height:1.1; color:transparent;background:linear-gradient(90deg,#4d7cf3,#2c98cc 33.333%,#4d7cf3 66.667%,#2c98cc);background-size:300% 100%; -webkit-background-clip:text;background-clip:text; animation:grad-drift 6s linear infinite} /* Half the size of .big, so the pair reads $0 first, then the $20 that follows. */ .price .then{margin-top:6px;font-family:var(--font-head);font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .price ul{list-style:none;margin-top:18px;display:grid;gap:9px} .price li{font-size:15px;color:var(--muted);padding-left:24px;position:relative} .price li strong{color:var(--ink);font-weight:700} .price li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)} /* ===== 6 · founder ======================================================= */ .founder{margin-top:16px;display:flex;align-items:center;gap:18px} .founder-photo{width:96px;height:96px;flex:none;border-radius:50%;object-fit:cover;border:1px solid var(--line)} .founder-name{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.02em} .founder-role{font-size:15px;color:var(--muted);margin-top:2px} .founder-note{font-size:15px;color:var(--dim);margin-top:10px} .founder-links{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15px} .founder-links a{color:var(--brand);font-weight:600;text-decoration:underline} /* ===== 7 · signup ======================================================== */ .signup{border-top:1px solid var(--line);padding:56px 0 72px; background:radial-gradient(100% 80% at 50% 0%, rgba(77,124,243,.16), transparent 65%)} .field+.field{margin-top:16px} .field label{display:block;font-size:13px;font-weight:700;margin-bottom:7px} .field .hint{font-weight:400;color:var(--dim)} .field input,.field textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:14px;color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.4} /* 16px = no iOS zoom on focus */ .field textarea{resize:vertical;min-height:84px} .field input::placeholder,.field textarea::placeholder{color:#5a6070} .field input:focus,.field textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(77,124,243,.18)} .field.bad input,.field.bad textarea{border-color:#e05a5a} .err{display:none;font-size:13px;color:#ff8080;margin-top:6px} .field.bad .err{display:block} /* the landing page's closing block — one white heading, one button */ .close{max-width:560px} .close-head{font-family:var(--font-head);font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:800;color:#fff;margin-bottom:24px} .close-fine{margin-top:12px;font-size:14px;font-weight:600;color:#fff} .done{display:none;border:1px solid var(--ok);border-radius:14px;padding:24px;background:rgba(61,220,151,.07);max-width:460px;margin-top:22px} .done h3{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:-.02em} .done p{margin-top:8px;font-size:15px;color:var(--muted)} /* signup.js flips this one class on to swap the wizard -> confirmation. */ .is-done #wiz-form,.is-done .wiz-bar{display:none} .is-done .done{display:block} /* ===== /signup — the three-step wizard =================================== */ /* Its own page, so a CTA click is a real step through a door. Reuses .field, .err, .btn and .done above; only the step machinery is new. */ .wiz{padding:36px 0 72px;min-height:70vh; background:radial-gradient(100% 70% at 50% 0%, rgba(77,124,243,.13), transparent 65%)} .wiz .wrap{max-width:520px} /* Progress is the bar alone — no "Step 1 of 3". Thicker than a hairline and lit at the leading edge so the fill is readable without a caption. */ .wiz-bar{display:flex;align-items:center;margin-bottom:28px} .wiz-track{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden} .wiz-track i{display:block;height:100%;width:33.33%;border-radius:3px;background:var(--brand-bg); box-shadow:0 0 12px 0 rgba(77,124,243,.65);transition:width .35s cubic-bezier(.4,0,.2,1)} /* Only the active step is in the document flow; the rest are simply not shown. */ .step{display:none} .step.is-on{display:block} .step h1{font-family:var(--font-head);font-size:28px;line-height:1.15;letter-spacing:-.02em;font-weight:800} .step-sub{margin-top:8px;font-size:15px;color:var(--muted)} .step .field{margin-top:24px} .step .btn{margin-top:24px} .wiz-back{display:block;margin:14px auto 0;background:none;border:none;cursor:pointer; font-family:var(--font-body);font-size:14px;color:var(--dim);padding:6px} .wiz-back:hover{color:var(--ink)} /* Tap targets for "what do you sell" — one tap, no dropdown. */ .choices{display:grid;gap:10px} .choice{width:100%;text-align:left;cursor:pointer;font-family:var(--font-body);font-size:16px;font-weight:600; background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:16px;transition:.15s} .choice:hover{border-color:var(--dim)} .choice.is-on{border-color:var(--brand);background:rgba(77,124,243,.10);box-shadow:0 0 0 3px rgba(77,124,243,.18)} .field.bad .choice{border-color:#e05a5a} .wiz .done{margin-top:0} @media (min-width:760px){ .wiz{padding:56px 0 96px} .step h1{font-size:34px} } footer{border-top:1px solid var(--line);padding:26px 0;font-size:13px;color:var(--dim)} footer .wrap{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between} /* ===== wider screens ===================================================== */ @media (min-width:760px){ .wrap{padding:0 32px} .sec{padding:80px 0} .sec-title{font-size:38px} .btn-block{display:inline-block;width:auto} .hero{padding:64px 0 80px} .hero h1{font-size:52px} .hero .sub{font-size:19px} .signup{padding:80px 0 96px} .close-head{font-size:38px} .feats{grid-template-columns:1fr 1fr} .fit{grid-template-columns:1fr 1fr} .price .big{font-size:46px} .price .then{font-size:23px} .founder{gap:24px} .founder-photo{width:120px;height:120px} .founder-name{font-size:26px} } @media (min-width:1040px){ /* Hero goes side-by-side: copy left, activity feed right. */ .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center} .hero h1{font-size:56px} .feed{margin-top:0} .feed-list{height:350px} .feed-chip{font-size:14px;gap:10px;padding:0 16px} } @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important} .btn,.btn::before,.btn::after,.hero .sub strong,.price .big,.feat .n{animation:none}}