/* The homepage on tablets and phones. Desktop art direction lives in
home.html; this file only ever applies inside the compact query or one of
its bands, so a fine-pointer desktop at 1024px and up never reads it.
THE RULE THIS FILE ENFORCES (Jack, 2026-09-29, replacing the 2026-09-09
"nothing behind a tap, every screen stacked" rule): tablet and phone are
designed, not stacked, and they MOVE like desktop does.
- The hero is one connected flow: tool tiles ping, pulses travel a wire
into the brain, a second wire carries them into the attention card,
which cycles its three scenes exactly as desktop does. Left to right
on a tablet, top to bottom on a phone.
- The logo strip is a marquee again, and the orbit turns below 1024px.
- Below 1024px, "Watch it build itself" is a segmented control over one
screen and the contract book is a screen over a step list: one step at
a time, the clip plays, the bar fills, it advances; tap or swipe to
move. From 1024px on a touch screen both use the desktop layout, which
already fits there.
- Sections ease in as they scroll into view (home-mobile.js).
- prefers-reduced-motion stops all of it: posters, no autoplay, no
marquee, no pulses; every control still switches what is shown.
Bands used below:
COMPACT (max-width: 1023px), (pointer: coarse) and (max-width: 1366px)
TABLET 768px and up inside COMPACT
SMALL (max-width: 1023px): the stepper and orbit layouts
PHONE (max-width: 600px): the app-grade type scale and centring
The phone breakpoint stays at 600px because Jack's centring and type-scale
decisions (2026-09-10) are written against it. */
.home-tabs, .home-mobile-close, .fdash__cap, .cb__wire { display: none; }
/* =============================================================== COMPACT == */
@media (max-width: 1023px), (pointer: coarse) and (max-width: 1366px) {
:root {
--marketing-target-height: 44px;
--marketing-bottom-space: calc(64px + env(safe-area-inset-bottom, 0px));
--home-action-gradient: linear-gradient(100deg, #2563eb, #7c3aed 55%, #a855f7);
/* lucide arrow-up-right, the same glyph the React More sheet renders. Used as
a mask so it inherits colour, and kept in CSS rather than in the markup
because check-nav-parity reads the sheet's links with a regex that requires
Text with nothing else inside. */
--home-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
--hm-card: #FFFFFF;
--hm-pulse: var(--accent);
--hm-pulse-glow: rgba(29,78,216,0.16);
}
html { scroll-padding-top: 72px; scroll-padding-bottom: calc(var(--marketing-bottom-space) + 16px); }
body { padding-bottom: var(--marketing-bottom-space); }
.wrap { padding-inline: 20px; }
:is(a, button, [tabindex], summary) { -webkit-tap-highlight-color: transparent; }
:is(a, button, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* ---------------------------------------------------------------- HEADER --
Values copied from src/app/(marketing)/mobile-shell.css so the homepage bar
and a React marketing page's bar are the same bar: 60px, hairline bottom,
wordmark left, a plain Log in link, then one pill carrying three dots and
the word More on a single line. check:marketing-mobile asserts the two
files still agree; it does not just read this one. */
.nav {
top: 0; left: 0; translate: none; width: 100%; height: 60px;
padding: 0 max(16px, env(safe-area-inset-left, 0px));
border-width: 0 0 1px; border-radius: 0;
background: rgba(255,255,255,.97); backdrop-filter: none; box-shadow: none;
}
.nav__mark { min-height: 44px; display: flex; align-items: center; }
.nav__mark img { height: 18px; }
.nav__links, .nav__go, .nav__demo { display: none; }
.nav__cta { display: flex; gap: 4px; align-items: center; }
.nav__login, .nav__burger {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
min-height: 44px; min-width: 44px; width: auto; height: auto; padding: 0 9px;
font-family: var(--sans); font-size: 14px; font-weight: 600; line-height: 1;
letter-spacing: 0; text-transform: none;
color: var(--ink-2); border: 0; border-radius: 8px; background: transparent;
}
/* Jack: make Log in obvious. A blue OUTLINE, not a fill, so it reads as a
secondary action beside the filled Get started button in the tab bar and
the filled More pill does not compete with it for attention. 1px less
padding than .nav__burger to keep the two the same OUTER height once the
border is added (border-box sizing eats into content, not the box). */
.nav__login { border: 1.5px solid var(--accent); color: var(--accent); padding: 0 7.5px; }
.nav__burger { flex-direction: row; background: var(--alt); }
.nav__burger svg { width: 20px; height: 20px; }
.nav__burger:hover { background: var(--alt); }
.nav__login:hover { background: transparent; }
@media (hover: hover) {
.nav__burger:hover { background: #F0F1F3; }
.nav__login:hover { background: #F0F1F3; }
}
/* ------------------------------------------------------------ MORE SHEET --
One column, hairline-separated rows with a trailing arrow, exactly the
shape of .marketing-more nav a. No transition: it appears on the tap. */
.nav__mobile {
top: auto; bottom: calc(var(--marketing-bottom-space) + 8px);
width: calc(100% - 24px); max-width: 560px;
max-height: calc(100dvh - var(--marketing-bottom-space) - 84px); overflow-y: auto;
padding: 4px 20px 12px; background: var(--surface, #fff); backdrop-filter: none;
border-radius: 20px; transition: none; z-index: 69;
}
.nav__mobile.is-open { display: block; }
.nav__mobile a, .nav__mobile a.nav__msub {
display: flex; justify-content: space-between; align-items: center; gap: 12px;
min-height: 48px; padding: 12px 0; border-radius: 0;
border-bottom: 1px solid var(--border); font-size: 15px; color: var(--ink);
}
.nav__mobile a::after {
content: ''; flex: none; width: 17px; height: 17px; opacity: .5;
background: currentColor;
-webkit-mask: var(--home-arrow) center / 17px 17px no-repeat;
mask: var(--home-arrow) center / 17px 17px no-repeat;
}
.nav__mobile a:hover { background: none; color: var(--ink); }
@media (hover: hover) { .nav__mobile a:hover { color: var(--accent); } }
.nav__mgroup { padding: 16px 0 4px; color: var(--muted); }
.home-mobile-close {
display: flex; align-items: center; justify-content: space-between;
border: 0; border-bottom: 1px solid var(--border); background: none;
color: var(--ink); font: 700 19px var(--sans); min-height: 52px; padding: 0;
cursor: pointer;
}
.home-mobile-close span {
display: grid; place-items: center; width: 36px; height: 36px;
border-radius: 50%; background: var(--alt); font-size: 20px; font-weight: 400;
}
/* --------------------------------------------------------- BOTTOM TABS -- */
.home-tabs { position: fixed; z-index: 70; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px)); height: var(--marketing-bottom-space); border-top: 1px solid var(--border); background: var(--surface); }
.home-tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; gap: 2px; font-size: 10px; font-weight: 600; color: var(--muted); border-radius: 8px; }
.home-tabs a > span { display: grid; place-items: center; width: 44px; height: 30px; border-radius: 8px; }
.home-tabs svg { width: 20px; height: 20px; }
.home-tabs a[aria-current] { color: var(--accent); }
.home-tabs a[aria-current] > span { background: var(--accent-soft); }
.home-tabs a[aria-current] svg { fill: var(--accent-soft); stroke-width: 2.4; }
.home-tabs .home-tabs__start > span { background: var(--home-action-gradient); color: var(--surface); }
.home-tabs a:focus-visible { background: var(--alt); }
@media (hover: hover) { .home-tabs a:hover { background: var(--alt); } }
/* ------------------------------------------------------------------ HERO -- */
.hero { padding: 92px 20px 48px; text-align: left; }
.hero .h1 { font-size: clamp(34px, 7.8vw, 48px); line-height: 1.07; max-width: 24ch; margin: 0; text-wrap: pretty; }
.hero .nh-sub { margin: 20px 0 0; font-size: 16px; line-height: 1.6; }
.hero__sub2 { margin: 12px 0 0; font-size: 14px; max-width: 56ch; }
.hero__ctas { justify-content: flex-start; gap: 8px; margin-top: 24px; }
.btn { min-height: 48px; padding-left: 16px; font-size: 14px; }
.hero__ctas .btn { gap: 8px; }
.hero__fine { color: var(--muted); font-size: 12px; max-width: 40ch; margin-top: 16px; }
/* -------------------------------------------------------------- THE FLOW --
The desktop circuit board is a fixed 1180x460 drawing. Here it becomes a
grid of four real parts and two wires: the tools, the brain, the card, and
the wires between them, each carrying pulses. Which way the flow runs is
set per band further down; the parts are the same at every compact width. */
.cb {
position: relative; width: auto; height: auto; margin: 36px 0 0; padding: 0;
display: grid; gap: 0; justify-items: center; align-items: center;
background: none; text-align: left;
}
.cb__svg, .cbp { display: none; }
/* Labels are pills sitting on the flow, not captions floating over white. */
.cb__lab {
position: static; width: auto; z-index: 2; justify-self: center;
display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px;
border-radius: 999px; background: var(--hm-card); border: 1px solid var(--border);
box-shadow: var(--shadow-sm); white-space: nowrap;
font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .06em;
text-transform: uppercase; color: var(--accent);
}
.cb__tiles {
position: static; inset: auto; z-index: 1; pointer-events: none;
display: grid; gap: 8px; padding: 14px; max-width: none;
background: var(--hm-card); border: 1px solid var(--border); border-radius: 16px;
box-shadow: var(--shadow-sm);
}
/* position: relative anchors the glow layer below, and the inset reset is
load-bearing: desktop places each tile with `.cb__tile:nth-child(n)
{ left; top }` and the chip with `.cb__chip { left; top }`, which
`static` ignored and `relative` applies as an offset. The tile reset is
written at the same specificity as desktop's nth-child rule (two
classes), so it wins by coming later; `.cb__tile` alone lost to it. */
.cb__tile {
position: relative; width: 44px; height: 44px; border-radius: 12px;
box-shadow: none; background: var(--alt); border: 1px solid var(--border);
}
.cb__tiles > .cb__tile { inset: auto; }
/* The ping's glow is its own layer, so the animation only ever changes
opacity and transform, never paint. */
.cb__tile::after {
content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
border: 1.5px solid var(--accent-border);
box-shadow: 0 0 0 4px var(--accent-soft), 0 10px 20px -10px rgba(29,78,216,.55);
opacity: 0;
}
.cb__tile img { width: 24px; height: 24px; }
.cb__chip {
position: relative; inset: auto; z-index: 1; width: 176px; height: 176px; padding: 0;
display: grid; place-items: center; border-radius: 24px;
background: var(--hm-card); border: 1px solid var(--border-s); box-shadow: var(--shadow-sm);
}
.cb__chip::before {
content: ''; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
box-shadow: 0 0 0 10px rgba(29,78,216,.06), 0 20px 44px -18px rgba(29,78,216,.5);
opacity: 0;
}
.cb__chipbrain { width: 168px; }
.cb .fdash { position: relative; inset: auto; left: auto; top: auto; z-index: 1; width: 100%; max-width: 440px; margin: 0; }
/* The wires: a dashed hairline and three pulses riding it. Each pulse is a
box the size of the wire translated by 100% of ITSELF, which is the wire's
length, so the travel is right at any length without measuring it. */
.cb__wire { display: block; position: relative; z-index: 0; }
.cb__wire::before { content: ''; position: absolute; }
.cb__wire i { position: absolute; inset: 0; opacity: 0; }
.cb__wire i::after {
content: ''; position: absolute; width: 7px; height: 7px; border-radius: 2px;
background: var(--hm-pulse); box-shadow: 0 0 0 3px var(--hm-pulse-glow);
}
/* The attention card is the desktop card: its header, its dots and its
three scenes fading one into the next. The scenes share one grid cell, so
the card is as tall as its tallest scene at THIS width without a number
written anywhere. Its buttons are artwork the cursor presses, not controls
(home-mobile.js takes them out of the tab order). */
.fdash__stage { display: grid; height: auto; }
.fdash__scene { grid-area: 1 / 1; position: relative; inset: auto; }
.fdash__scene .fbtn { pointer-events: none; }
/* ------------------------------------------------------------- LOGO ROW --
The marquee again: one row travelling left, faded at both edges. The
sequence (both copies, doubled by home.html's script) is what moves, so
the row can hold the fade still while the logos pass under it. */
.logos { padding: 28px 0 24px; overflow: hidden; }
.logos__cap, .logos__more { margin-inline: 20px; text-align: left; }
.logos__cap { margin-bottom: 16px; }
.logos__row {
width: auto; overflow: hidden; animation: none; padding: 6px 0;
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.logos__seq { display: flex; align-items: center; width: max-content; }
.logos__seq .logo-tile { margin-right: 36px; font-size: 14px; }
.logos__seq img { width: 22px; height: 22px; }
.logos__more { margin-top: 14px; }
/* -------------------------------------------------------------- SECTIONS -- */
.sec { padding: 56px 0; }
.h2 { font-size: 30px; line-height: 1.12; text-wrap: pretty; }
.sub { font-size: 16px; line-height: 1.6; }
.sec__head { text-align: left; max-width: none; margin-inline: 0; }
.sec__head .sub { margin: 16px 0 0; }
.orbit-sec { padding: 56px 20px; }
.orbit__foot { text-align: left; font-size: 14px; }
.orbit__foot b { display: block; }
/* ------------------------------------------------------------------ STATS -- */
.stats { margin-inline: 20px; padding: 32px 24px; border-radius: 12px; text-align: left; background: var(--navy); }
.stats .h2 { margin: 0; }
.stats__sub { margin: 16px 0 0; }
.stats__row { display: flex; flex-direction: column; gap: 0; margin-top: 24px; padding-top: 0; }
.stat { display: grid; grid-template-columns: 100px 1fr; align-items: center; min-height: 72px; gap: 16px; border-bottom: 1px solid rgba(255,255,255,.14); }
.stat:last-child { border: 0; }
.stat b { font-size: 32px; }
.stat span { margin: 0; }
/* 44px is the tap-target floor, on a phone too (it was 26px tall there). */
.people__cta { min-height: 44px; }
/* --------------------------------------------------------------- FOUNDING -- */
.founding__grid { grid-template-columns: 1fr; gap: 24px; }
.fpanel { padding: 0; gap: 0; border: 0; border-radius: 0; background: none; }
.fpanel > div { padding: 16px 0; border-bottom: 1px solid var(--border); }
.fpanel__foot { padding-top: 16px; border-top: 0; color: var(--muted); }
/* -------------------------------------------------------------------- FAQ --
Closed rows at EVERY width since 2026-09-17 (Jack, homepage change 7): one
handler in home.html binds every .obj__q and the CSS collapse keys off the
same aria-expanded. This block only restyles the rows. */
.obj__panel { margin-top: 24px; border: 0; border-radius: 0; background: none; }
.obj__grid { grid-template-columns: 1fr; }
.obj { padding: 20px 0; border: 0; border-bottom: 1px solid var(--border); }
.obj:last-child { border-bottom: 1px solid var(--border); }
.obj__spot, .obj__icon { display: none; }
.obj .eyebrow { display: block; }
.obj h3 { margin-top: 8px; font-size: 20px; }
.obj p { padding-bottom: 0; margin-top: 10px; font-size: 15px; }
/* Left inline so it flows with the sentence; vertical padding on an inline
element grows the hit area without moving the line box. */
.obj p a { display: inline; padding-block: 14px; text-decoration: underline; }
/* ------------------------------------------------------------------ CLOSE -- */
.close-card { padding: 40px 24px; margin-bottom: 16px; text-align: left; }
.close-card .h2, .close-card p { margin-left: 0; }
.close-card__ctas { justify-content: flex-start; }
footer { padding: 32px 20px 24px; }
.foot__grid { gap: 24px; }
.foot__brand p, .foot__base { color: var(--muted); }
.foot__cols { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); width: 100%; gap: 24px 16px; }
.foot__col b { margin-bottom: 4px; }
.foot__col a { min-height: 44px; display: flex; align-items: center; margin: 0; }
/* --------------------------------------------------------- SCROLL REVEAL --
home-mobile.js puts .hm-reveal on only when motion is allowed and
an IntersectionObserver exists, so without either nothing is ever hidden. */
.hm-reveal .hm-r { opacity: 0; translate: 0 18px; transition: opacity 620ms ease, translate 620ms cubic-bezier(.2,.7,.2,1); }
.hm-reveal .hm-r.is-in { opacity: 1; translate: 0 0; }
/* Off screen, nothing animates: home-mobile.js marks the hero flow, the
logo row and the orbit .hm-off while they are out of view. */
.hm-off, .hm-off *, .hm-off *::before, .hm-off *::after { animation-play-state: paused !important; }
}
/* ============================================================ FLOW, PHONE ==
Top to bottom: tools, wire, brain, wire, card. Each label sits ON its wire
(same grid cell, drawn above it), so the flow reads as one spine. Every
part names its row AND its column: two items given only a row would be
auto-placed side by side in a new column instead of on top of each other. */
@media (max-width: 767px) {
.cb { grid-template-columns: minmax(0, 1fr); }
.cb__lab--tools { grid-area: 1 / 1; margin-bottom: -14px; }
.cb__tiles {
grid-area: 2 / 1; width: 100%; padding: 24px 14px 16px;
grid-template-columns: repeat(7, minmax(0, 44px)); justify-content: center; gap: 6px;
}
.cb__tile { width: 100%; height: auto; aspect-ratio: 1; }
.cb__wire--in { grid-area: 3 / 1; }
.cb__lab--brain { grid-area: 3 / 1; }
.cb__chip { grid-area: 4 / 1; }
.cb__wire--out { grid-area: 5 / 1; }
.cb__lab--card { grid-area: 5 / 1; }
.cb .fdash { grid-area: 6 / 1; }
.cb__wire { width: 2px; height: 84px; }
.cb__wire::before { left: 0; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--accent-border) 0 4px, transparent 4px 9px); }
.cb__wire i::after { left: -2.5px; top: -3.5px; }
}
/* ============================================================ FLOW, TABLET ==
Left to right, like desktop: tools, wire, brain, wire, card, each label
above its part on one line. */
@media (min-width: 768px) and (max-width: 1023px), (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
.cb {
grid-template-columns: auto minmax(28px, 1fr) auto minmax(28px, 1fr) minmax(0, 440px);
grid-template-rows: auto auto; row-gap: 16px; max-width: 980px; margin-inline: auto;
}
.cb__lab--tools { grid-area: 1 / 1; }
.cb__tiles { grid-area: 2 / 1; grid-template-columns: repeat(2, 44px); }
.cb__wire--in { grid-area: 2 / 2; }
/* The brain's label spans the wires either side of it, so its width never
sets the brain's column: that space belongs to the card. */
.cb__lab--brain { grid-area: 1 / 2 / 2 / 5; }
.cb__chip { grid-area: 2 / 3; width: 160px; height: 160px; }
.cb__chipbrain { width: 152px; }
.cb__wire--out { grid-area: 2 / 4; }
.cb__lab--card { grid-area: 1 / 5; }
.cb .fdash { grid-area: 2 / 5; justify-self: stretch; }
.cb__wire { width: 100%; height: 2px; }
.cb__wire::before { left: 0; right: 0; top: 0; height: 2px; background: repeating-linear-gradient(to right, var(--accent-border) 0 4px, transparent 4px 9px); }
.cb__wire i::after { left: -3.5px; top: -2.5px; }
}
/* ================================================================= MOTION ==
Everything in the compact layout that moves on its own, in one place, and
only for a visitor who has not asked for less. The wire direction follows
the flow direction set above: down on a phone, right on a tablet. */
@media (prefers-reduced-motion: no-preference) and (max-width: 1023px), (prefers-reduced-motion: no-preference) and (pointer: coarse) and (max-width: 1366px) {
/* Each tile pings in turn: the tools sending into the flow. */
.cb__tile { animation: hm-ping 3.5s ease-in-out var(--d, 0s) infinite; }
.cb__tile::after { animation: hm-glow 3.5s ease-in-out var(--d, 0s) infinite; }
.cb__tile:nth-child(2) { --d: .5s; }
.cb__tile:nth-child(3) { --d: 1s; }
.cb__tile:nth-child(4) { --d: 1.5s; }
.cb__tile:nth-child(5) { --d: 2s; }
.cb__tile:nth-child(6) { --d: 2.5s; }
.cb__tile:nth-child(7) { --d: 3s; }
/* The brain breathes. */
.cb__chip::before { animation: hm-breathe 3.6s ease-in-out infinite; }
.cb__chipbrain { animation: hm-swell 3.6s ease-in-out infinite; }
/* Three pulses per wire, a third of a cycle apart. */
.cb__wire i { animation: hm-right 2.4s linear infinite; }
.cb__wire i:nth-child(2) { animation-delay: .8s; }
.cb__wire i:nth-child(3) { animation-delay: 1.6s; }
.cb__wire--out i { animation-duration: 2s; }
/* The logo marquee. */
.logos__seq { animation: marq 44s linear infinite; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
.cb__wire i { animation-name: hm-down; }
}
@keyframes hm-ping { 0%, 22%, 100% { transform: none; } 8% { transform: translateY(-3px); } }
@keyframes hm-glow { 0%, 22%, 100% { opacity: 0; } 8% { opacity: 1; } }
@keyframes hm-breathe { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes hm-swell { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes hm-down {
0% { transform: translateY(0); opacity: 0; } 12%, 86% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; }
}
@keyframes hm-right {
0% { transform: translateX(0); opacity: 0; } 12%, 86% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; }
}
/* A visitor who asked for less motion keeps a still, readable page: the logo
row becomes a plain sideways scroller with no second copy. */
@media (prefers-reduced-motion: reduce) and (max-width: 1023px), (prefers-reduced-motion: reduce) and (pointer: coarse) and (max-width: 1366px) {
.logos__row { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: thin; }
.logos__seq .home-logo-repeat { display: none; }
}
/* ============================================================ TABLET BAND ==
Tablets share touch navigation with phones but lay content out wider. */
@media (min-width: 768px) and (max-width: 1023px), (min-width: 768px) and (max-width: 1366px) and (pointer: coarse) {
.wrap { padding-inline: 32px; }
.hero { padding: 104px 32px 64px; }
.hero .h1 { font-size: clamp(40px,5.4vw,56px); letter-spacing: -0.025em; }
.hero .nh-sub { font-size: 17px; max-width: 54ch; }
.hero__fine { font-size: 13px; }
.cb { margin-top: 44px; }
/* TYPE FLOOR FOR TABLETS (measured 2026-09-20: this band fell through to
desktop sizes drawn for a 1180px composition). Applied by name. */
.fn__badge { font-size: 11px; }
.fg__chip { font-size: 11px; }
.ltab__n { font-size: 13px; }
.tour__ico { font-size: 13px; }
.foot__base .mono, .mono { font-size: 12px; }
/* 44px is the tap-target floor. */
.foot__base a, .cc__link { display: inline-flex; align-items: center; min-height: 44px; }
.home-tabs { left: 50%; right: auto; transform: translateX(-50%); width: min(720px,100%); border: 1px solid var(--border); border-bottom: 0; border-radius: 16px 16px 0 0; }
.home-tabs a { font-size: 12px; }
.nav__mobile { left: 50%; translate: -50% 0; }
.logos__cap, .logos__more { margin-inline: 32px; }
.orbit-sec { max-width: var(--max); margin-inline: auto; padding: 64px 32px; }
.stats { margin-inline: 32px; padding: 40px 32px; }
.stats__row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 32px; }
.founding__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
.obj__grid { grid-template-columns: 1fr; }
.foot__cols { grid-template-columns: repeat(4,minmax(0,1fr)); }
footer { padding-inline: 32px; }
}
/* A 1024-1366px touch screen (a landscape iPad) uses the desktop orbit,
laptop and tour, which are centred compositions, so their headings centre
with them as they do on desktop. The laptop's deck hangs 7% off each side;
contain it, as home.html already does for a mouse. */
@media (min-width: 1024px) and (max-width: 1366px) and (pointer: coarse) {
.orbit-sec .sec__head, .live .sec__head, .objections .sec__head { text-align: center; }
.orbit-sec .sec__head .sub { margin-inline: auto; }
.orbit__foot { text-align: center; }
.laptop__deck { width: 100%; margin-left: 0; }
}
/* ============================================= BELOW 1024px: THE STEPPERS ==
From 1024px up (a landscape iPad and larger) the desktop layouts for the
orbit, "Watch it build itself" and the contract book already fit, so they
are left alone. Below it they are rebuilt here. */
@media (max-width: 1023px) {
/* ----------------------------------------------------------------- ORBIT --
The real orbit, scaled. The rings are px boxes and each tile's radius is
written inline by home.html's builder, so --orbit-d (the outer ring's
diameter) drives every measurement, including each ring's --ro, which
home.html reads in place of the inline --r.
NO TWO TILES EVER OVERLAP (Jack 2026-09-29: "they're all overlapping
each other"). The rings turn at different speeds, so a tile on one ring
passes directly over the tile on the next; they clear only if a tile is
clear of the tile on the next ring by the gap between the two rings.
Tiles stay upright, so two passing on a diagonal meet corner to corner;
a rounded square (corner radius 0.3 of its side) reaches 0.583 of its
side along a diagonal, so two of them need a gap of 1.166 tiles. The
rings sit at radii 0.30, 0.40 and 0.50 of --orbit-d (gaps 0.10) and a
tile is 0.085 of it (needs 0.099), at every width, so the clearance
holds wherever the orbit is drawn. Measured before: overlap in every
frame below 1024px, worst 51% of a tile at 320. The brain's stage is
0.54 so its opaque disc (about 1.07x the stage, radius 0.289) stays
inside ring 1 (0.30). */
.orbit-fallback { display: none !important; }
.orbit {
display: block; position: relative;
--orbit-d: min(460px, calc(100vw - 110px)); --otile: calc(var(--orbit-d) * 0.085);
width: calc(var(--orbit-d) + var(--otile)); max-width: 100%;
aspect-ratio: 1 / 1; margin: 28px auto 0;
}
.oring--3 { width: var(--orbit-d); height: var(--orbit-d); --ro: calc(var(--orbit-d) * 0.5); }
.oring--2 { width: calc(var(--orbit-d) * 0.8); height: calc(var(--orbit-d) * 0.8); --ro: calc(var(--orbit-d) * 0.4); }
.oring--1 { width: calc(var(--orbit-d) * 0.6); height: calc(var(--orbit-d) * 0.6); --ro: calc(var(--orbit-d) * 0.3); }
.orbit__stage { width: calc(var(--orbit-d) * 0.54); }
.otile { width: var(--otile); height: var(--otile); margin: calc(var(--otile) / -2) 0 0 calc(var(--otile) / -2); }
.otile__i { border-radius: calc(var(--otile) * 0.3); }
.otile__i img { width: calc(var(--otile) * 0.56); height: calc(var(--otile) * 0.56); }
/* Hover-only, and there is no hover here. */
.otile__name { display: none; }
.orbit__foot { margin-top: 20px; }
/* ----------------------------------------------- WATCH IT BUILD ITSELF --
A segmented control over one screen. The tab's own bar fills while its
clip plays and the next tab takes over when it is full (home.html's
cgo()); a tap jumps, a swipe on the screen steps (home-mobile.js). */
.live .wrap { display: block; }
.live__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 26px 0 14px; }
.ltab {
display: flex; flex-direction: row; align-items: flex-start; gap: 10px;
box-sizing: border-box; min-height: 44px; margin: 0; padding: 12px 12px 15px;
background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: none;
cursor: pointer; pointer-events: auto; text-align: left;
font-size: 12.5px; line-height: 1.4; color: var(--muted);
transition: border-color 200ms ease, box-shadow 200ms ease;
}
.ltab b { display: block; margin-bottom: 2px; font-size: 14.5px; }
.ltab br { display: none; }
.ltab.is-on { border-color: var(--accent-border); box-shadow: 0 10px 24px -16px rgba(29,78,216,0.55); }
/* No step number on the segments (Jack 2026-09-30: "remove the little
one there"). Three named segments in a row read in order on their own;
the filling bar and the accent border say which one is showing. Hidden
visually, not removed, so a screen reader still hears "1 Finance". */
.ltab__n {
position: absolute; width: 1px; height: 1px; overflow: hidden; padding: 0; border: 0;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.laptop { max-width: none; margin: 0; }
.laptop__lid { padding: 6px; border-radius: 16px; }
.laptop__cam, .laptop__deck { display: none; }
.laptop__screen { border-radius: 10px; touch-action: pan-y; }
.live__next { gap: 10px; margin: 20px 0 0; max-width: none; }
/* --------------------------------------------------- THE CONTRACT BOOK --
The screen first, then the three steps under it. The open step shows its
sentence and its progress line; the clip's own end advances it; a tap on
a step jumps, a swipe on the screen steps. The heading's wrapper is
dissolved so heading, screen and list are three rows of one grid. */
.tour__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.tour__grid > div:first-child { display: contents; }
.tour__grid .h2 { grid-area: 1 / 1; max-width: 24ch !important; }
.tour__panelwrap { grid-area: 2 / 1; margin: 24px 0 0; }
.tour__panel { border-radius: 14px; border: 1px solid var(--border-s); box-shadow: var(--shadow); touch-action: pan-y; }
.tour__list { grid-area: 3 / 1; margin-top: 10px !important; }
.tour__item button { min-height: 44px; padding: 16px 4px; }
.tour__item.is-on .tour__body { max-height: 320px; }
}
/* 768-1023px: a larger orbit (the tile still scales with it). */
@media (min-width: 768px) and (max-width: 1023px) {
.orbit { --orbit-d: min(520px, calc(100vw - 200px)); }
}
/* ================================================================== PHONE ==
Below 600px everything centres (Jack 2026-09-10: "make the layout centred
for everything from top to bottom, only for Android and iOS mobile
versions") and the page takes the app-grade surface: a soft grey ground,
white cards at radius 14, a type scale with a 12px floor. Product artwork
(the attention card and the screens) keeps its own left-aligned layout,
because a facsimile of a product that centres its own rows stops reading
as one. */
@media (max-width: 600px) {
:root {
/* THE PHONE TYPE SCALE, declared once and referenced everywhere below so a
future edit changes a number in one place. The floor is 12px. */
--t-display: clamp(34px, 9.2vw, 38px);
--t-h2: clamp(26px, 7.2vw, 29px);
--t-card: 17px;
--t-tab: 15px;
--t-body: 16px;
--t-secondary: 14px;
--t-section: 13px;
--t-floor: 12px;
--app-ground: #F1F2F4;
--app-card: #FFFFFF;
--app-r: 14px;
--app-gut: 16px;
}
body { background: var(--app-ground); }
.wrap { padding-inline: var(--app-gut); }
.sec { padding: 36px 0; }
.h2 { font-size: var(--t-h2); }
.sub { font-size: var(--t-body); }
.sec__head .sub { margin-top: 12px; }
/* ------------------------------------------------------------------ HERO -- */
.hero { background: var(--app-card); padding: 84px 20px 0; text-align: center; }
.hero .h1 { font-size: var(--t-display); line-height: 1.08; }
.hero .h1, .hero .nh-sub, .hero__sub2, .hero__fine { margin-inline: auto; }
.hero .nh-sub { font-size: var(--t-body); margin-top: 16px; }
.hero__sub2 { font-size: var(--t-secondary); }
.hero__fine { font-size: var(--t-floor); }
.hero__ctas { justify-content: center; }
.btn { font-size: 15px; min-height: 50px; }
/* The flow starts where the white hero ends: pulled full bleed onto the
grey ground, so its white cards read as cards. */
.cb { margin: 28px -20px 0; padding: 30px var(--app-gut) 16px; background: var(--app-ground); border-top: 1px solid var(--border); }
.cb__lab { font-size: var(--t-floor); }
.cb__chip { width: min(208px, 56vw); height: min(208px, 56vw); border-radius: var(--app-r); }
.cb__chipbrain { width: min(196px, 53vw); }
.cb .fdash { border-radius: var(--app-r); border-color: var(--border); box-shadow: 0 10px 30px -18px rgba(9,30,66,.35); }
.fdash > header { font-size: var(--t-section); }
.fn__title { font-size: 15px; line-height: 1.35; flex-wrap: wrap; gap: 4px 8px; }
.fn__badge { font-size: var(--t-floor); letter-spacing: .04em; padding: 2px 9px; }
.fn__body { font-size: var(--t-secondary); }
.fn__suggest { font-size: 13px; }
.fr__row { font-size: var(--t-secondary); }
.fr__row .fbtn, .fbtn { font-size: 13px; }
.fg__top { font-size: var(--t-secondary); }
.fg__top em { font-size: var(--t-floor); }
.fg__chip { font-size: var(--t-floor); letter-spacing: .04em; padding: 2px 8px; }
.fr__empty { font-size: 13px; }
/* -------------------------------------------------------------- LOGO ROW --
Header on the grey, the moving row inside a white card. */
.logos { border: 0; padding: 28px 0 8px; background: none; }
.logos__cap, .logos__more { text-align: center; }
.logos__cap, .foot__col b {
font-family: var(--sans); font-size: var(--t-section); font-weight: 700;
letter-spacing: 0; text-transform: none; color: var(--muted);
}
.logos__cap { margin-bottom: 12px; }
.logos__row {
margin-inline: var(--app-gut); padding: 16px 0;
background: var(--app-card); border: 1px solid var(--border); border-radius: var(--app-r);
}
.logos__seq .logo-tile { font-size: 15px; }
.logos__more { font-size: var(--t-section); margin-top: 14px; padding-inline: var(--app-gut); }
/* -------------------------------------------------------------- SECTIONS -- */
.sec__head { text-align: center; }
.sec__head .sub, .sec__head .h2 { margin-inline: auto; }
.orbit-sec { padding: 28px var(--app-gut) 12px; }
.orbit-sec .orbit {
--orbit-d: min(340px, calc(100vw - 72px));
width: 100%; background: var(--app-card); border: 1px solid var(--border); border-radius: var(--app-r);
}
.orbit__foot { text-align: center; font-size: var(--t-secondary); margin-top: 16px; }
/* ---------------------------------------------- WATCH IT BUILD ITSELF --
Three equal segments, the number over the name. The step's line of copy
is what the clip itself shows, so on a phone the segment carries the
name only; the line is hidden visually and stays in the accessibility
tree, so the control is still named in full. */
.live__tabs { gap: 6px; margin: 22px 0 12px; }
.ltab {
flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
min-height: 52px; padding: 12px 4px 14px; font-size: var(--t-secondary);
background: var(--app-card); border-radius: var(--app-r);
}
.ltab br { display: none; }
.ltab__d {
position: absolute; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.ltab b { font-size: var(--t-tab); line-height: 1.25; margin: 0; }
.laptop__lid { padding: 5px; border-radius: var(--app-r); }
.laptop__screen { border-radius: 9px; }
/* ------------------------------------------------- THE CONTRACT BOOK --
The steps under the screen, centred like the rest of the phone page:
the badge above its title, the open step's sentence and its progress
line under them. */
.tour__grid .h2 { margin-inline: auto; text-align: center; }
.tour__panel { border-radius: var(--app-r); }
.tour__list {
background: var(--app-card); border: 1px solid var(--border); border-radius: var(--app-r);
padding: 2px 16px;
}
.tour__item:last-child { border-bottom: 0; }
.tour__item button {
display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center;
text-align: center; gap: 8px; padding: 16px 0 14px;
}
.tour__title { font-size: var(--t-card); }
.tour__body p { padding: 0 0 12px; text-align: center; font-size: var(--t-secondary); }
.tour__prog { margin: 0 0 16px; }
/* The contract-book step badge; the step being shown fills with the
accent. (The Watch it build itself segments carry no number.) */
.tour__ico {
width: 30px; height: 30px; border-radius: 9px;
background: var(--alt); border: 1px solid var(--border); color: var(--muted);
font-family: var(--sans); font-size: var(--t-floor); font-weight: 700;
}
.tour__item.is-on .tour__ico { background: var(--accent); border-color: var(--accent); color: #fff; }
/* ------------------------------------------------------------------ STATS --
Jack: "I really like the bold section that says Not a concept. Running
today." Its look is kept exactly, the type is scaled to the rest. The four
stat tiles are dropped at phone width (Jack 2026-09-17, brief change 6). */
.stats { margin-inline: var(--app-gut); padding: 36px 24px; border-radius: 18px; text-align: center; }
.stats .h2, .stats__sub { margin-inline: auto; }
.stats .h2 { font-size: clamp(27px, 7.6vw, 31px); }
.stats__sub { font-size: var(--t-body); }
.stat {
grid-template-columns: minmax(0, 1fr);
justify-items: center; text-align: center; gap: 2px; min-height: 0; padding-block: 18px;
}
.stat b { font-size: 40px; line-height: 1.05; }
.stat span { font-size: 15px; }
.stats__row { display: none; }
/* --------------------------------------------------------------- FOUNDING -- */
.founding__grid { text-align: center; }
.founding__grid .sub { margin-inline: auto; }
.fpanel {
margin-top: 22px; padding: 0 16px;
background: var(--app-card); border: 1px solid var(--border); border-radius: var(--app-r);
}
.fpanel > div, .fpanel__foot { text-align: center; }
.fpanel > div { padding: 18px 0; }
.fpanel > div:last-of-type { border-bottom: 0; }
.fpanel h3 { font-size: var(--t-card); }
.fpanel p { font-size: var(--t-secondary); }
.fpanel__foot { padding: 0 0 18px; font-size: var(--t-floor); }
/* ------------------------------------------------------------------- FAQ --
Five questions, all closed, one opens per tap. The control is a real