:root { --cream:#f6efe3; --ink:#171816; --green:#198942; --red:#ed2f27; --yellow:#ffc515; --blue:#2e79e6; --white:#fffdf8; --control-radius:20px; --control-border:3px solid var(--ink); --control-depth:0 7px 0 var(--ink); --control-depth-hover:0 12px 0 var(--ink); --control-depth-active:0 3px 0 var(--ink); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; overflow-x:hidden; background:var(--cream); color:var(--ink); font-family:"Space Grotesk",sans-serif; }
body::after { content:""; position:fixed; inset:0; z-index:9998; pointer-events:none; background:url("dot-grain.png") 0 0 / 720px auto repeat; opacity:.2; mix-blend-mode:multiply; }
a { color:inherit; text-decoration:none; }
a:focus-visible,button:focus-visible { outline:4px solid var(--yellow); outline-offset:4px; }
img { display:block; max-width:100%; }
.shell { width:min(1280px,calc(100% - 56px)); margin-inline:auto; }
.brick-rail { height:62px; background:url("WEBSITE%20IDEAS%20AND%20EXAMPLES%20TO%20USE/2026-08-14%2011.32.05.jpg") 0 48% / 520px auto repeat-x; animation:rail-roll 26s linear infinite; }
.site-header { --header-gap:18px; --header-pair-shift:0px; height:88px; position:sticky; top:0; z-index:20; display:block; background:var(--cream); isolation:isolate; }
.site-header::after { content:""; position:absolute; z-index:0; inset:auto 0 0; height:2px; background:var(--ink); pointer-events:none; }
.site-header > * { position:absolute; z-index:1; top:calc(50% - 4px); }
.wordmark { left:0; display:flex; align-items:center; width:128px; transform:translateY(-50%); transition:left .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1); }
.wordmark img { width:100%; height:auto; }
.site-header nav { left:50%; display:flex; align-items:center; gap:34px; font:600 11px/1 "IBM Plex Mono",monospace; text-transform:uppercase; opacity:1; visibility:visible; transform:translate(-50%,-50%); transition:opacity .22s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s; }
.site-header nav a { padding-block:10px; border-bottom:2px solid transparent; }
.site-header nav a:hover { border-color:var(--red); }
.header-buy { right:0; padding:14px 18px; background-color:var(--yellow); background-image:url("dot-grain.png"); background-size:680px auto; background-blend-mode:multiply; border:3px solid var(--ink); border-radius:16px; box-shadow:0 6px 0 var(--ink); font:600 11px/1 "IBM Plex Mono",monospace; text-transform:uppercase; transform:translateY(-50%); }
.header-buy:hover { transform:translateY(-4px); box-shadow:0 10px 0 var(--ink); }
.header-buy:active { transform:translateY(3px); box-shadow:0 3px 0 var(--ink); }
.hero { position:relative; min-height:1040px; overflow:hidden; isolation:isolate; }
.hero-title { position:relative; z-index:2; padding-top:70px; }
.hero-tag,.plate-label { margin:0; font:600 11px/1.3 "IBM Plex Mono",monospace; letter-spacing:.14em; text-transform:uppercase; }
.hero-tag { margin-left:4px; }
.hero h1 { margin:18px 0 0; font:400 clamp(76px,11.5vw,176px)/.75 "Bowlby One SC",sans-serif; letter-spacing:-.06em; text-align:center; }
.hero h1 span { display:block; opacity:0; animation:title-lock .7s cubic-bezier(.2,.85,.25,1) forwards; }
.hero h1 span:nth-child(2) { animation-delay:.09s; }
.hero h1 span:nth-child(3) { animation-delay:.18s; }
.hero h1 span:nth-child(4) { animation-delay:.27s; }
.hero h1 span:nth-child(2) { color:var(--red); }
.hero h1 span:nth-child(3) { color:var(--blue); }
.hero h1 .green-line { color:var(--green); }
.hero-character { position:absolute; z-index:4; width:min(720px,52vw); left:50%; top:410px; transform:translateX(calc(-50% + var(--frog-x,0px))) translateY(var(--frog-y,0px)) rotate(calc(-2deg + var(--frog-rotate,0deg))); transition:transform .25s cubic-bezier(.2,.85,.25,1); }
.hero-character img { width:100%; filter:drop-shadow(16px 20px 0 rgba(23,24,22,.15)); transform-origin:50% 65%; transition:filter .25s; }
.hero-character:hover img { animation:frog-boing .72s cubic-bezier(.22,.9,.32,1); filter:drop-shadow(22px 28px 0 rgba(23,24,22,.2)); }
.floating-set { position:absolute; z-index:5; pointer-events:none; will-change:transform; }
.floating-set-left { width:260px; left:-74px; top:160px; transform:rotate(12deg) translate3d(calc(var(--mx,0) * -9px),calc(var(--my,0) * -9px),0); }
.floating-set-right { width:300px; right:-68px; top:110px; transform:rotate(-18deg) translate3d(calc(var(--mx,0) * 12px),calc(var(--my,0) * 12px),0); }
.hero-lower { position:absolute; z-index:7; left:50%; bottom:54px; transform:translateX(-50%); display:grid; grid-template-columns:minmax(0,.78fr) minmax(520px,1.22fr); gap:34px; align-items:end; }
.intro-plate { max-width:520px; padding:25px 27px 23px; overflow:hidden; background-color:var(--ink); background-image:url("dot-grain.png"); background-size:680px auto; background-blend-mode:soft-light; color:var(--white); border:3px solid var(--ink); border-radius:24px; box-shadow:0 8px 0 var(--green); transition:transform .18s ease,box-shadow .18s ease; }
.intro-plate:hover { transform:translateY(-5px); box-shadow:0 13px 0 var(--green); }
.intro-plate>p:not(.plate-label) { margin:18px 0 20px; font-size:18px; line-height:1.42; }
.intro-plate a { display:inline-block; border-bottom:2px solid var(--yellow); font:600 11px/1.4 "IBM Plex Mono",monospace; text-transform:uppercase; }
.hero-actions-column { display:grid; gap:22px; }
/** Keep the four hero links visually subordinate to the frog while retaining their molded silhouettes and touch targets. */
.action-plates { width:min(100%,640px); justify-self:end; display:grid; grid-template-columns:repeat(4,1fr); align-items:end; gap:2px; perspective:900px; }
.action-plate { position:relative; min-height:154px; padding:0; border:0; margin:0; display:grid; place-items:center; background:none!important; filter:drop-shadow(7px 13px 0 rgba(23,24,22,.24)); transform:translateY(var(--lift,0)); transition:transform .18s ease,filter .18s ease; }
.action-plate:nth-child(2) { min-height:168px; }
.action-plate:nth-child(3) { min-height:146px; }
.action-block-image { width:96%; max-width:none; height:auto; pointer-events:none; user-select:none; }
.action-plate:hover { --lift:-5px; filter:drop-shadow(9px 18px 0 rgba(23,24,22,.28)); }
.action-plate:active { --lift:3px; filter:drop-shadow(3px 6px 0 rgba(23,24,22,.24)); }
.ca-strip { position:relative; min-height:72px; padding:12px 14px 12px 22px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; background-color:var(--white); background-image:url("dot-grain.png"); background-size:680px auto; background-blend-mode:multiply; border:3px dashed var(--ink); border-radius:22px; }
.ca-strip code { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#777; font:600 13px/1 "IBM Plex Mono",monospace; }
.copy-ca { padding:12px 18px; background-color:var(--yellow); background-image:url("dot-grain.png"); background-size:680px auto; background-blend-mode:multiply; border:3px solid var(--ink); border-radius:13px; box-shadow:0 5px 0 var(--ink); color:var(--ink); font:700 14px/1 "Space Grotesk",sans-serif; cursor:pointer; transition:transform .16s,box-shadow .16s; }
.copy-ca:hover { transform:translateY(-4px); box-shadow:0 10px 0 var(--ink); }
.copy-ca:active { transform:translateY(3px); box-shadow:0 2px 0 var(--ink); }
.copy-status { position:absolute; right:14px; bottom:-25px; font:600 10px/1 "IBM Plex Mono",monospace; text-transform:uppercase; }
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.plate-yellow { background-color:var(--yellow); color:var(--ink); }
.plate-red { background-color:var(--red); color:var(--white); }
.plate-blue { background-color:var(--blue); color:var(--white); }
.plate-green { background-color:var(--green); color:var(--white); }
.origin { position:relative; padding:125px 0 140px; overflow:hidden; isolation:isolate; }
.origin>.shell,.build-log>.shell,.how-to-buy>.shell,.specimen-banner>.shell { position:relative; z-index:2; }
.section-head { display:grid; grid-template-columns:1fr 2.15fr; gap:40px; align-items:start; margin-bottom:76px; }
.section-head h2 { margin:0; font:400 clamp(54px,7.8vw,112px)/.83 "Bowlby One SC",sans-serif; letter-spacing:-.055em; }
.section-head h2 span { color:var(--green); }
.story-board { display:grid; grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(150px,auto); gap:18px; }
.story-photo,.story-panel { margin:0 0 8px; min-height:360px; overflow:hidden; border:3px solid var(--ink); border-radius:26px; box-shadow:0 8px 0 var(--ink); }
.story-photo { position:relative; }
.story-photo { transition:transform .18s ease,box-shadow .18s ease; }
.story-photo:hover { transform:translateY(-5px); box-shadow:0 13px 0 var(--ink); }
.story-photo img { width:100%; height:100%; object-fit:cover; }
.story-photo img { transition:transform .8s cubic-bezier(.2,.8,.2,1),filter .5s; }
.story-photo:hover img { transform:scale(1.045) rotate(.4deg); filter:saturate(1.08); }
.story-photo-large { grid-column:span 7; grid-row:span 2; }
.story-photo-large img { min-height:738px; }
.story-photo-small { grid-column:span 5; }
.story-panel { grid-column:span 5; padding:30px; display:flex; flex-direction:column; background-image:url("dot-grain.png"); background-size:680px auto; background-blend-mode:multiply; }
.story-panel h3 { margin:auto 0 15px; font:400 clamp(28px,3vw,44px)/.92 "Bowlby One SC",sans-serif; letter-spacing:-.035em; }
.story-panel>p:last-child { margin:0; max-width:440px; font-size:17px; line-height:1.45; }
.panel-number { margin:0; font:600 12px/1 "IBM Plex Mono",monospace; }
.panel-red { background:var(--red); color:var(--white); }
.panel-built-green { background:var(--green); color:var(--white); }
.panel-yellow { grid-column:span 5; background:var(--yellow); color:var(--ink); justify-content:center; }
.panel-yellow p { margin:0; font:400 clamp(34px,4vw,58px)/.98 "Bowlby One SC",sans-serif; letter-spacing:-.04em; }
.panel-blue { grid-column:span 7; background:var(--blue); color:var(--white); }
.panel-green { grid-column:span 7; background:var(--green); color:var(--white); }
.build-log { position:relative; padding:120px 0 140px; overflow:hidden; isolation:isolate; background:var(--ink); color:var(--white); }

/* Keep the supplied banner edge-to-edge while preserving its complete artwork on every viewport. */
.frog-banner-band { position:relative; z-index:1; width:100vw; margin-left:calc(50% - 50vw); overflow:hidden; isolation:isolate; background:#e60012; }
.frog-banner-band img { display:block; width:100%; height:auto; max-width:none; }
.section-head-dark { display:block; }
.section-head-dark h2 { max-width:980px; margin-left:auto; }
.section-head-dark h2 span { color:var(--yellow); }
.timeline-grid { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.timeline-card { min-height:310px; padding:25px; margin-bottom:8px; border:3px solid var(--ink); border-radius:26px; box-shadow:0 8px 0 var(--white); display:flex; flex-direction:column; background-image:url("dot-grain.png"); background-size:680px auto; background-blend-mode:multiply; overflow:hidden; }
.timeline-card,.story-panel { transition:transform .18s ease,box-shadow .18s ease; }
.timeline-card:hover { transform:translateY(-5px); box-shadow:0 13px 0 var(--white); }
.story-panel:hover { transform:translateY(-5px); box-shadow:0 13px 0 var(--ink); }
.timeline-card time { font:400 clamp(36px,4vw,58px)/.9 "Bowlby One SC",sans-serif; letter-spacing:-.04em; }
.timeline-card h3 { margin:auto 0 12px; font:400 25px/.95 "Bowlby One SC",sans-serif; }
.timeline-card p { margin:0; max-width:350px; font-size:15px; line-height:1.45; }
.timeline-card-wide { grid-column:span 2; }
.section-floaters { position:absolute; inset:0; z-index:3; pointer-events:none; }
.scroll-brick { position:absolute; width:var(--brick-size,clamp(128px,12vw,188px)); aspect-ratio:.78; opacity:var(--brick-opacity,1); transform:translate3d(0,var(--scroll-shift,0px),0); will-change:transform; }
.scroll-brick::before { content:""; position:absolute; inset:0; background-image:url("hero-action-bricks.png"); background-repeat:no-repeat; background-size:400% 100%; filter:drop-shadow(9px 13px 0 rgba(23,24,22,.18)); transform:rotate(var(--brick-rotation,0deg)); animation:section-brick-bob var(--brick-duration,5.8s) ease-in-out infinite var(--brick-delay,0s); }
.scroll-brick-yellow::before { background-position:0 50%; }
.scroll-brick-red::before { background-position:33.333% 50%; }
.scroll-brick-blue::before { background-position:66.666% 50%; }
.scroll-brick-green::before { background-position:100% 50%; }
.origin-brick-yellow { left:-48px; top:17%; --brick-size:clamp(158px,14vw,220px); --brick-rotation:-17deg; --brick-duration:5.2s; }
.origin-brick-red { right:-54px; top:68%; --brick-size:clamp(132px,11vw,178px); --brick-rotation:13deg; --brick-duration:6.1s; --brick-delay:-1.4s; }
.origin-brick-blue { right:2.5%; top:39%; --brick-size:clamp(92px,8vw,126px); --brick-rotation:-9deg; --brick-duration:5.7s; --brick-delay:-2.8s; }
.origin-brick-green { left:3%; top:84%; --brick-size:clamp(72px,6vw,96px); --brick-rotation:18deg; --brick-duration:4.9s; --brick-delay:-.6s; }
.build-brick-blue { right:-42px; top:16%; --brick-size:clamp(154px,13vw,205px); --brick-rotation:16deg; --brick-duration:5.6s; --brick-delay:-.8s; }
.build-brick-green { left:-48px; top:64%; --brick-size:clamp(128px,10vw,166px); --brick-rotation:-14deg; --brick-duration:6.4s; --brick-delay:-2.1s; }
.build-brick-red { left:2%; top:38%; --brick-size:clamp(82px,7vw,112px); --brick-rotation:12deg; --brick-duration:5.1s; --brick-delay:-3.2s; }
.build-brick-yellow { right:3%; top:80%; --brick-size:clamp(104px,9vw,142px); --brick-rotation:-16deg; --brick-duration:6s; --brick-delay:-1.7s; }
.buy-brick-yellow { right:2%; top:7%; --brick-size:clamp(116px,10vw,158px); --brick-rotation:14deg; --brick-duration:5.4s; --brick-delay:-2s; }
.buy-brick-red { left:-34px; top:47%; --brick-size:clamp(92px,8vw,126px); --brick-rotation:-13deg; --brick-duration:6.2s; --brick-delay:-.9s; }
.buy-brick-blue { right:4%; top:76%; --brick-size:clamp(74px,6vw,98px); --brick-rotation:19deg; --brick-duration:4.8s; --brick-delay:-3.4s; }
.specimen-brick-green { right:1.5%; top:25%; --brick-size:clamp(98px,8vw,134px); --brick-rotation:15deg; --brick-duration:5.8s; --brick-delay:-1.2s; }
.specimen-brick-red { left:-32px; top:72%; --brick-size:clamp(76px,6.5vw,108px); --brick-rotation:-17deg; --brick-duration:5.1s; --brick-delay:-2.6s; }
.how-to-buy { position:relative; padding:120px 0 130px; background:var(--white); overflow:hidden; }
.how-to-buy h2 { margin:0 0 72px; font:400 clamp(58px,8vw,116px)/.84 "Bowlby One SC",sans-serif; letter-spacing:-.055em; }
.buy-steps { position:relative; list-style:none; margin:0; padding:0; display:grid; gap:0; }
.buy-steps::before { content:""; position:absolute; left:79px; top:34px; bottom:34px; border-left:5px dashed var(--ink); }
.buy-steps li { position:relative; display:grid; grid-template-columns:158px minmax(0,1fr); gap:42px; align-items:center; min-height:210px; }
.step-marker { position:relative; z-index:1; width:158px; aspect-ratio:1; display:grid; place-items:center; }
.step-marker img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(7px 10px 0 rgba(23,24,22,.2)); }
.buy-steps h3 { margin:0 0 12px; font:400 clamp(27px,3vw,42px)/1 "Bowlby One SC",sans-serif; }
.buy-steps p { margin:0; max-width:900px; color:#777; font-size:20px; line-height:1.5; }
.community { position:relative; min-height:820px; overflow:hidden; background:var(--blue); color:var(--white); display:grid; align-items:center; }
.community::before { content:""; position:absolute; inset:0 0 auto; height:54px; background:url("WEBSITE%20IDEAS%20AND%20EXAMPLES%20TO%20USE/2026-08-14%2011.32.05.jpg") 0 48%/430px auto repeat-x; animation:rail-roll 26s linear infinite reverse; }
.community-inner { position:relative; z-index:2; padding-top:54px; }
.community h2 { margin:0 0 25px; font:400 clamp(72px,11vw,160px)/.78 "Bowlby One SC",sans-serif; letter-spacing:-.055em; }
.community h2 span { color:var(--yellow); }
.community-inner>p { max-width:410px; font-size:22px; }
.community-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; width:min(820px,100%); margin-top:40px; }
.community-actions a { min-height:72px; padding:18px 15px; display:grid; place-items:center; border:3px solid var(--ink); border-radius:20px; box-shadow:0 7px 0 var(--ink); background-color:var(--cream); background-image:url("dot-grain.png"); background-size:680px auto; background-blend-mode:multiply; color:var(--ink); text-align:center; font:400 16px/1 "Bowlby One SC",sans-serif; transition:transform .18s,box-shadow .18s; }
.community-actions a:first-child { background-color:var(--green); color:var(--white); }
.community-actions a:nth-child(2) { background-color:var(--white); }
.community-actions a:nth-child(3) { background-color:var(--blue); color:var(--white); }
.community-actions a:nth-child(4) { background-color:var(--yellow); }
.community-actions a:hover { transform:translateY(-5px); box-shadow:0 12px 0 var(--ink); }
.community-actions a:active { transform:translateY(3px); box-shadow:0 3px 0 var(--ink); }
.community-blocks { position:absolute; z-index:1; width:430px; right:2%; top:90px; transform:rotate(-12deg); animation:footer-drift 6s ease-in-out infinite; will-change:transform; }
.specimen-banner { position:relative; padding:105px 0 116px; overflow:hidden; background:var(--ink); color:var(--white); }
.specimen-banner h2 { margin:0 0 44px; font:400 clamp(58px,7vw,108px)/.88 "Bowlby One SC",sans-serif; letter-spacing:-.05em; }
.specimen-banner h2 span { display:block; color:var(--white); }
.specimen-banner h2 span:last-child { color:#54e591; }
.specimen-banner figure { position:relative; margin:0; overflow:hidden; border:5px solid var(--yellow); border-radius:24px; box-shadow:0 10px 0 rgba(255,197,21,.45); }
.specimen-banner figure::after,.story-photo::after { content:""; position:absolute; inset:0; pointer-events:none; background:url("dot-grain.png") 0 0/720px auto repeat; opacity:.2; mix-blend-mode:multiply; }
.specimen-banner img { width:100%; aspect-ratio:3/1; object-fit:cover; object-position:center; }
/**
 * Footer action buttons define the site's canonical surface and movement.
 * Content cards share that geometry and depth; the LEGO-shaped hero links,
 * dashed contract field, and circular route markers keep their required forms.
 */
.intro-plate,.story-photo,.story-panel,.timeline-card,.specimen-banner figure { border:var(--control-border); border-radius:var(--control-radius); box-shadow:var(--control-depth); transition:transform .18s ease,box-shadow .18s ease; }
.intro-plate:hover,.story-photo:hover,.story-panel:hover,.timeline-card:hover,.specimen-banner figure:hover { transform:translateY(-5px); box-shadow:var(--control-depth-hover); }
.header-buy,.intro-plate a,.copy-ca,.community-actions a { border:var(--control-border); border-radius:var(--control-radius); box-shadow:var(--control-depth); background-image:url("dot-grain.png"); background-size:680px auto; background-blend-mode:multiply; transition:transform .18s ease,box-shadow .18s ease; }
.intro-plate a { padding:12px 16px; background-color:var(--yellow); color:var(--ink); border-bottom:3px solid var(--ink); }
.header-buy:hover,.intro-plate a:hover,.copy-ca:hover,.community-actions a:hover { transform:translateY(-5px); box-shadow:var(--control-depth-hover); }
.header-buy:active,.intro-plate a:active,.copy-ca:active,.community-actions a:active { transform:translateY(3px); box-shadow:var(--control-depth-active); }
.site-header .header-buy { transition:left .45s cubic-bezier(.2,.8,.2,1),right .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease; }
.site-header.is-compact .wordmark { left:calc(50% + var(--header-pair-shift)); transform:translate(calc(-100% - var(--header-gap) / 2),-50%); }
.site-header.is-compact .header-buy { right:calc(50% - var(--header-pair-shift)); transform:translate(calc(100% + var(--header-gap) / 2),-50%); }
.site-header.is-compact { background:transparent; }
.site-header.is-compact::after { display:none; }
.site-header.is-compact nav { opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,calc(-50% - 10px)); transition-delay:0s,0s,.22s; }
.site-header:not(.is-compact) .header-buy:hover { transform:translateY(calc(-50% - 4px)); }
.site-header:not(.is-compact) .header-buy:active { transform:translateY(calc(-50% + 3px)); }
.site-header.is-compact .header-buy:hover { transform:translate(calc(100% + var(--header-gap) / 2),calc(-50% - 4px)); }
.site-header.is-compact .header-buy:active { transform:translate(calc(100% + var(--header-gap) / 2),calc(-50% + 3px)); }
.brick-rail-bottom { height:64px; }
.site-footer { position:relative; min-height:136px; display:flex; align-items:center; justify-content:space-between; gap:20px; font:600 9px/1 "IBM Plex Mono",monospace; letter-spacing:.12em; text-transform:uppercase; }
.site-footer span { position:relative; z-index:2; }
.reveal-item { opacity:0; translate:0 46px; transition:opacity .62s ease,translate .62s cubic-bezier(.2,.8,.2,1),transform .18s ease,box-shadow .18s ease; transition-delay:calc(var(--reveal-index,0) * 55ms),calc(var(--reveal-index,0) * 55ms),0s,0s; }
.reveal-item.is-visible { opacity:1; translate:0 0; }
.brick-cursor { position:fixed; z-index:9999; left:0; top:0; width:27px; height:27px; opacity:0; pointer-events:none; background:url("hero-action-bricks.png") 0 50% / 400% 100% no-repeat; filter:drop-shadow(2px 3px 0 rgba(23,24,22,.3)); transform:translate3d(var(--cursor-x,0px),var(--cursor-y,0px),0) translate(-50%,-50%) rotate(var(--cursor-rotate,-12deg)) scale(var(--cursor-scale,1)); transform-origin:center; will-change:transform; transition:opacity .12s ease,filter .12s ease; }
.brick-cursor.is-active { opacity:1; }
.brick-cursor.is-clicking { --cursor-scale:.82; }
.brick-cursor.is-link { filter:drop-shadow(2px 3px 0 rgba(23,24,22,.38)) saturate(1.18); }
@media (hover:hover) and (pointer:fine) { body,body * { cursor:none!important; } }
@keyframes rail-roll { to { background-position:520px 48%; } }
@keyframes title-lock { from { opacity:0; transform:translateY(55px) rotate(1.5deg); } to { opacity:1; transform:none; } }
@keyframes frog-boing { 0%,100% { transform:none; } 28% { transform:translateY(-24px) rotate(3deg) scale(1.025); } 52% { transform:translateY(4px) rotate(-2deg) scale(.99); } 74% { transform:translateY(-8px) rotate(1deg); } }
@keyframes footer-drift { 0%,100% { transform:translate3d(0,0,0) rotate(-12deg); } 50% { transform:translate3d(-18px,-25px,0) rotate(-6deg); } }
@keyframes section-brick-bob { 0%,100% { transform:translateY(-9px) rotate(var(--brick-rotation,0deg)); } 50% { transform:translateY(13px) rotate(calc(var(--brick-rotation,0deg) + 4deg)); } }
@keyframes mobile-action-bob { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(0,-4px,0) rotate(.6deg); } }
@keyframes mobile-frog-float { 0%,100% { transform:translate3d(0,0,0) rotate(0deg); } 50% { transform:translate3d(0,-7px,0) rotate(.7deg); } }
@media (min-width:901px) {
  /** Close the intentionally asymmetric grids on desktop without disturbing the compact mobile flow. */
  .section-head { display:block; text-align:center; }
  .section-head h2,.section-head-dark h2 { max-width:1120px; margin-inline:auto; text-align:center; }
  .story-board .panel-green { grid-column:span 12; }
  .timeline-card-wide { grid-column:span 3; }
  .timeline-card-wide p { max-width:620px; }
}
@media (max-width:900px) {
  .shell { width:min(100% - 32px,720px); }
  .site-header { height:78px; }
  .site-header > * { top:calc(50% - 3px); }
  .site-header nav { display:none; }
  /**
   * Mobile uses normal document flow for the hero's major pieces. This keeps
   * the headline, character, story card, and links from depending on a fixed
   * viewport height or overlapping when copy and font metrics change.
   */
  .hero { min-height:0; padding-bottom:64px; display:flex; flex-direction:column; }
  .hero-title { padding-top:46px; translate:0 var(--mobile-title-shift,0px); will-change:translate; }
  .hero h1 { font-size:clamp(64px,14vw,96px); line-height:.82; text-align:left; }
  .hero-character { position:relative; width:min(520px,82vw); left:auto; top:auto; transform:rotate(-1.5deg); translate:0 var(--mobile-frog-shift,0px); margin:-10px auto -22px; will-change:transform,translate; }
  /** Float the image itself so the wrapper can keep owning the capped scroll offset. */
  .hero-character img { animation:mobile-frog-float 6.8s ease-in-out infinite; will-change:transform; }
  .floating-set { display:none; }
  .hero-lower { position:relative; left:auto; bottom:auto; transform:none; grid-template-columns:1fr; gap:26px; align-items:stretch; }
  .intro-plate { max-width:none; }
  .action-plates { width:100%; justify-self:stretch; grid-template-columns:repeat(4,1fr); gap:8px; }
  .action-plate,.action-plate:nth-child(2),.action-plate:nth-child(3),.action-plate:nth-child(4) { min-height:138px; }
  .action-plate:nth-child(1) .action-block-image { animation-delay:-.4s; }
  .action-plate:nth-child(2) .action-block-image { animation-delay:-1.6s; }
  .action-plate:nth-child(3) .action-block-image { animation-delay:-2.8s; }
  .action-plate:nth-child(4) .action-block-image { animation-delay:-4s; }
  .action-block-image { animation:mobile-action-bob 5.6s ease-in-out infinite; will-change:transform; }
  .section-head { grid-template-columns:1fr; gap:20px; }
  .story-photo-large,.story-photo-small,.story-panel,.panel-yellow,.panel-blue,.panel-green { grid-column:span 12; }
  .story-photo-large img { min-height:500px; }
  .timeline-grid { grid-template-columns:1fr 1fr; }
  .timeline-card-wide { grid-column:span 2; }
  .how-to-buy h2 { margin-bottom:54px; }
  .community-blocks { width:300px; right:-80px; top:100px; opacity:.76; }
  .scroll-brick { max-width:118px; --brick-opacity:.9; }
  .origin-brick-yellow,.build-brick-green { left:-62px; }
  .origin-brick-red,.build-brick-blue { right:-62px; }
}
@media (max-width:560px) {
  .brick-rail { height:48px; background-size:360px auto; }
  .shell { width:calc(100% - 30px); }
  .wordmark { width:104px; }
  .header-buy { padding:12px 12px; }
  .hero { padding-bottom:46px; }
  .hero-title { padding-top:34px; }
  .hero h1 { margin-top:0; font-size:17vw; line-height:.8; letter-spacing:-.065em; }
  .hero h1 span:nth-child(2) { font-size:.77em; letter-spacing:-.07em; }
  .hero h1 span:nth-child(3) { font-size:.9em; }
  .hero-character { width:min(370px,98vw); margin:-2px auto -8px; }
  .hero-character img { filter:drop-shadow(9px 12px 0 rgba(23,24,22,.14)); }
  .hero-lower { gap:22px; }
  .intro-plate { padding:22px 21px 21px; }
  .intro-plate>p:not(.plate-label) { font-size:15px; }
  .action-plates { grid-template-columns:1fr 1fr; gap:12px; }
  .action-plate,.action-plate:nth-child(2),.action-plate:nth-child(3),.action-plate:nth-child(4) { min-height:128px; }
  .action-block-image { width:94%; }
  .ca-strip { min-height:68px; padding-left:15px; gap:10px; border-radius:18px; }
  .ca-strip code { font-size:10px; }
  .copy-ca { padding:11px 13px; }
  .origin,.build-log { padding:74px 0 84px; }
  .section-head { margin-bottom:36px; }
  .section-head h2 { font-size:clamp(40px,12.5vw,50px); line-height:.86; }
  .story-board { gap:12px; }
  .story-photo,.story-panel { min-height:0; }
  .story-photo { aspect-ratio:4/5; }
  .story-photo-large img { min-height:0; }
  .story-panel { min-height:278px; padding:24px; }
  .panel-yellow { min-height:220px; }
  .timeline-grid { grid-template-columns:1fr; gap:12px; }
  .timeline-card,.timeline-card-wide { min-height:230px; grid-column:span 1; }
  .how-to-buy { padding:74px 0 84px; }
  .how-to-buy h2 { margin:0 0 44px; font-size:clamp(42px,13vw,54px); }
  .buy-steps::before { left:44px; top:24px; bottom:24px; border-left-width:4px; }
  .buy-steps li { grid-template-columns:88px minmax(0,1fr); gap:16px; min-height:168px; }
  .step-marker { width:88px; }
  .step-marker img { filter:drop-shadow(4px 6px 0 rgba(23,24,22,.2)); }
  .buy-steps h3 { margin-bottom:8px; font-size:24px; }
  .buy-steps p { font-size:15px; line-height:1.42; }
  .community { min-height:680px; }
  .community-inner { padding-top:74px; padding-bottom:54px; }
  .community h2 { font-size:clamp(56px,18vw,70px); }
  .community-inner>p { max-width:240px; font-size:18px; }
  .community-actions { grid-template-columns:1fr 1fr; gap:8px; }
  .community-actions a { margin:0; min-height:54px; display:grid; place-items:center; }
  .community-blocks { width:190px; right:-76px; top:118px; opacity:.55; }
  .specimen-banner { padding:72px 0 78px; }
  .specimen-banner h2 { margin:0 0 30px; font-size:clamp(44px,14vw,58px); }
  /** Preserve the supplied wide cast banner on phones; cover-cropping hides the side characters. */
  .specimen-banner img { aspect-ratio:auto; height:auto; object-fit:contain; object-position:center; }
  .brick-rail-bottom { height:48px; }
  .site-footer { min-height:150px; padding-block:28px; flex-direction:column; justify-content:center; gap:14px; }
  /** Keep all four tap targets in one compact phone row; the minmax columns prevent
      the grid from creating a second oversized line at narrow widths. */
  .action-plates { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; }
  .action-plate,.action-plate:nth-child(2),.action-plate:nth-child(3),.action-plate:nth-child(4) { min-height:92px; }
  .action-block-image { width:100%; }
  /** Keep one compact edge block per content section on phones without crowding copy or controls. */
  .section-floaters .scroll-brick:not(.mobile-floater) { display:none; }
  .scroll-brick.mobile-floater { display:block; --brick-size:70px; --brick-opacity:.82; }
  /** A tiny scale settle makes scroll-revealed cards feel tactile on touch screens while
      keeping their measured boxes, image crops, and shared hover geometry unchanged. */
  .reveal-item { scale:.985; transition:opacity .62s ease,translate .62s cubic-bezier(.2,.8,.2,1),scale .62s cubic-bezier(.2,.8,.2,1),transform .18s ease,box-shadow .18s ease; transition-delay:calc(var(--reveal-index,0) * 55ms),calc(var(--reveal-index,0) * 55ms),calc(var(--reveal-index,0) * 55ms),0s,0s; }
  .reveal-item.is-visible { scale:1; }
  .origin-brick-blue { right:-24px; top:47%; }
  .build-brick-yellow { right:-22px; top:56%; }
  .buy-brick-red { left:-24px; top:52%; }
  .specimen-brick-green { right:-22px; top:48%; }
}
@media (max-width:900px) {
  /** Phone navigation is already collapsed, so keep the two visible controls stable while scrolling. */
  .site-header.is-compact .wordmark { left:0; transform:translateY(-50%); }
  .site-header.is-compact .header-buy { right:0; transform:translateY(-50%); }
  .site-header.is-compact .header-buy:hover { transform:translateY(calc(-50% - 4px)); }
  .site-header.is-compact .header-buy:active { transform:translateY(calc(-50% + 3px)); }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; }
  .floating-set { transform:none!important; }
  .brick-rail,.community-blocks,.hero-character:hover img,.hero h1 span { animation:none!important; }
  .hero h1 span,.reveal-item { opacity:1; translate:none; }
  .reveal-item { scale:1!important; }
  .brick-cursor { display:none; }
  .scroll-brick { transform:none!important; }
  .scroll-brick::before { animation:none!important; }
  .action-block-image,.hero-character img { animation:none!important; }
}