@font-face{font-family:Jost;src:url(../assets/jost.woff2) format("woff2");font-display:swap;font-weight:100 900}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:#151915;background:#fafbf8;font-family:Jost,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #5d770b;outline-offset:5px}.skip{position:fixed;left:10px;top:-80px;z-index:100;background:white;padding:15px}.skip:focus{top:10px}.build-note{background:#1c2119;color:#eaf0e1;text-align:center;padding:9px 20px;font-size:13px}.site-header{max-width:1440px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 4vw}.brand{display:inline-flex;align-items:center;gap:13px;font-size:26px;font-weight:650;letter-spacing:-.025em}.brand img{object-fit:contain}.site-header nav{display:flex;align-items:center;gap:34px;font-size:17px}.cta{display:inline-flex;justify-content:center;align-items:center;gap:28px;min-height:58px;padding:16px 25px;background:#d7ff62;color:#17210b;border:1px solid #b3cc69;box-shadow:0 5px 0 #98b948,0 9px 20px #5b752414;border-radius:15px;font-weight:650;font-size:19px;transition:transform .18s,box-shadow .18s}.cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 #98b948,0 12px 22px #5b752420}.hero{max-width:1440px;min-height:650px;margin:auto;padding:70px 4vw 90px;display:grid;grid-template-columns:1.04fr 1fr;gap:28px;align-items:center}.hero-copy{min-width:0;position:relative;z-index:2}h1{font-size:clamp(44px,4.7vw,72px);line-height:1.05;letter-spacing:-.04em;margin:0;font-weight:700;text-wrap:balance}.category{font-size:20px;line-height:1.4;display:block;margin-bottom:29px;letter-spacing:0;font-weight:500}.hero p{font-size:21px;line-height:1.5;color:#566051;max-width:530px;margin:29px 0}.hero-actions{display:flex;gap:30px;align-items:center;flex-wrap:wrap}.check-it{font-size:19px;font-weight:600;border-bottom:1px solid;padding:13px 0}#hero-art{width:100%;aspect-ratio:1;display:grid;place-items:center;position:relative;min-width:0}#hero-art>img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.feature-nav{max-width:1360px;margin:0 auto;border-block:1px solid #dce1d5;padding:23px 30px;display:flex;gap:22px 30px;flex-wrap:wrap;justify-content:center;font-size:17px}.feature-nav a{padding:6px 0;border-bottom:1px solid transparent}.feature-nav a:hover{border-color:#171c14}.demo-disclosure{text-align:center;font-size:14px;color:#66725d;margin:28px 20px 0}.demo-section{max-width:1440px;margin:auto;padding:110px 4vw;display:grid;grid-template-columns:minmax(250px,.38fr) minmax(0,1fr);gap:54px;align-items:start;scroll-margin-top:10px;min-height:800px}.demo-copy{padding-top:76px;min-width:0}.demo-copy h2{font-size:clamp(27px,2.5vw,37px);font-weight:650;letter-spacing:-.025em;line-height:1.16;margin:0;text-wrap:balance}.coming{display:block;color:#67735b;font-size:13px;margin-top:19px}.cube-rest{width:145px;height:145px;margin:42px auto 0}.native-demo{min-width:0;position:relative;z-index:2;background:#fff;border:1px solid #e0e5db;border-radius:24px;box-shadow:0 25px 70px #1e361b0b;overflow:hidden;min-height:660px}.native-demo iframe{display:block;border:0;width:100%;height:720px;background:#fff}.pending-demo{min-height:660px;display:grid;place-items:center;color:#717a68;font-size:15px;background:#f7f9f3}.trial{max-width:1260px;margin:100px auto;padding:85px 32px;border-radius:28px;text-align:center;background:#171c15;color:#fafcf5}.trial h2{font-size:clamp(42px,5vw,70px);line-height:1.06;letter-spacing:-.035em;margin:0}.trial p{font-size:22px;color:#d3dfc7;line-height:1.5;margin:26px 0 34px}.trial small{display:block;margin-top:32px;font-size:14px;color:#c0cbb6}.faq{max-width:850px;margin:90px auto;padding:0 24px}.faq h2{font-size:34px;letter-spacing:-.025em}.faq details{padding:20px 0;border-bottom:1px solid #dfe5d8}.faq summary{font-size:21px;cursor:pointer}.faq p{font-size:18px;line-height:1.6;color:#56634b}footer{max-width:1280px;margin:auto;padding:40px 24px 70px;border-top:1px solid #dce2d4}.related{margin:28px 0;font-size:17px}.related summary{cursor:pointer}.related nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:25px 0}.related a{text-decoration:underline;text-underline-offset:4px}.legal{display:flex;gap:24px;font-size:15px;color:#56634b}#sculpture-root{position:fixed;left:0;top:0;width:540px;height:540px;z-index:3;pointer-events:none}.sculpture-ready .entrance-poster{visibility:hidden}@media(min-width:1700px){.hero{padding-top:90px;min-height:750px}.demo-section{gap:70px}}@media(max-width:950px){.demo-section{gap:28px;grid-template-columns:250px minmax(0,1fr);padding-inline:26px}.hero{padding-inline:26px;gap:10px}.hero-actions{gap:20px}.cta{font-size:17px;padding:15px 20px;gap:18px}.site-header{padding-inline:26px}.site-header nav{gap:22px}}@media(max-width:760px){html{scroll-padding-top:20px}.build-note{font-size:11px}.site-header{padding:19px 22px}.brand{font-size:22px;gap:9px}.brand img{width:32px;height:32px}.site-header nav>a:not(.cta){display:none}.site-header .cta{font-size:13px;min-height:44px;padding:10px 12px;gap:9px;border-radius:10px}.hero{display:flex;flex-direction:column;gap:25px;padding:45px 24px 65px;min-height:0;align-items:stretch}h1{font-size:clamp(42px,9.4vw,65px);max-width:620px}.category{font-size:17px;margin-bottom:20px}.hero p{font-size:19px;margin:23px 0}.hero-actions{gap:22px}.hero-actions .cta{font-size:17px}.check-it{font-size:17px}#hero-art{max-width:410px;align-self:center;margin:0 auto;aspect-ratio:1.1}.feature-nav{justify-content:flex-start;padding:18px 24px;gap:9px 22px;font-size:15px}.demo-disclosure{font-size:12px}.demo-section{display:flex;flex-direction:column;gap:25px;padding:75px 18px 105px;min-height:0;position:relative}.demo-copy{padding:0 8px;width:100%}.demo-copy h2{font-size:32px;max-width:530px;text-wrap:pretty}.coming{margin-top:12px}.cube-rest{position:absolute;bottom:-30px;left:calc(50% - 58px);width:116px;height:116px;margin:0}.native-demo{width:100%;min-height:650px;border-radius:18px}.native-demo iframe{height:760px}.pending-demo{min-height:550px}.trial{margin:90px 18px;padding:60px 22px;border-radius:20px}.trial p{font-size:19px}.faq{margin-top:65px}.faq h2{font-size:30px}.related nav{grid-template-columns:1fr}#sculpture-root{width:360px;height:360px}}
/* The complete mobile entrance must be visible on initial entry. Desktop keeps the sculpture to the right. */
@media(max-width:760px){#hero-art{order:-1;max-width:360px}.hero{padding-top:20px}}

/* Human spacing correction: the real product dominates each row; framing is not another UI. */
html{scroll-padding-top:24px}
.demo-section{grid-template-columns:clamp(190px,19vw,245px) minmax(0,1fr);gap:clamp(32px,4vw,58px);scroll-margin-top:-60px}
.demo-copy{padding-top:40px}
.native-demo{border:0;border-radius:0;box-shadow:none;background:transparent;overflow:visible}
.native-demo iframe{background:transparent}
.cube-replay-trigger{position:absolute;inset:0;border:0;background:transparent;cursor:pointer;pointer-events:auto;border-radius:24px}
.cube-replay-trigger:focus-visible{outline:2px solid #719e1e;outline-offset:-15px}
.cube-replay-layer[hidden]{display:none!important}
.cube-replay-layer{pointer-events:none;z-index:2}
.cube-replaying canvas{opacity:0}
@media(max-width:760px){.demo-section{gap:22px;padding-inline:12px;scroll-margin-top:-42px}.demo-copy{padding:0 12px}.native-demo{width:100%}.cube-replay-trigger{border-radius:16px}}

.native-demo:has(iframe){min-height:0}

/* Native app body needs320px. At narrow phone widths, devote the available width to the real UI instead of squeezing it with landing padding. */
@media(max-width:380px){.demo-section{padding-inline:0}.demo-copy{padding-inline:18px}}

/* Phone transitions need a real clear corridor for the flowing pieces, not a
   tiny ornament squeezed between the frame and the next hook. At this spacing
   the 116px resting marker is centred in the ~344px inter-section gap; motion
   may expand to 280px after the layout owner checks the actual clear pocket. */
@media(max-width:760px){.demo-section{padding-bottom:269px}.cube-rest{bottom:39px}}

/* R226 human correction: retain the established two-column row. Only swap
   column order: first native demo left / compact hook+cube right, then reverse.
   No extra sculpture row above the demo, no narrower third-column squeeze. */
@media(min-width:761px){
 .demo-section:nth-child(odd){grid-template-columns:minmax(0,1fr) clamp(190px,19vw,245px)}
 .demo-section:nth-child(odd) .demo-copy{grid-column:2;grid-row:1}
 .demo-section:nth-child(odd) .native-demo{grid-column:1;grid-row:1}
}

/* The arriving fan needs clearance below the hook, within the same side column. */
@media(min-width:761px){.demo-section .cube-rest{margin-top:72px}}

/* R239: the SAME travelling sculpture now rests as a leading hook bullet.
   Reserve its footprint beside readable text; mobile demos retain full width. */
@media(max-width:760px){
 .demo-copy{position:relative;padding-left:108px;min-height:88px}
 .demo-copy .cube-rest{position:absolute;left:10px;top:-12px;bottom:auto;width:88px;height:88px;margin:0}
}

/* R239 latest composition: demo leads every row, cube bullet precedes hook.
   The paired support column is modestly wider so the hook stays readable. */
@media(min-width:761px){
 .demo-section:nth-child(n){grid-template-columns:minmax(0,1fr) clamp(280px,29vw,360px);gap:clamp(24px,3vw,44px)}
 .demo-section:nth-child(n) .demo-copy{grid-column:2;grid-row:1;position:relative;padding-left:96px;min-height:110px}
 .demo-section:nth-child(n) .native-demo{grid-column:1;grid-row:1}
 .demo-section .cube-rest{position:absolute;left:0;top:24px;bottom:auto;width:88px;height:88px;margin:0}
}

/* R249: the human requires an unmistakable product boundary against white.
   This is the landing frame only; native controls and their layout stay native. */
.native-demo:has(iframe){border:2px solid #171b16;border-radius:22px;background:#fff;box-shadow:0 6px 0 #171b16,0 18px 32px #171b1621;overflow:hidden}
@media(max-width:760px){.native-demo:has(iframe){border-radius:18px;box-shadow:0 4px 0 #171b16,0 12px 24px #171b161c}}

/* R254: restrained mobile travel can sit behind glyphs. Only a deliberate burst
   rises over content; this layer rule does not replace collision-safe paths. */
@media(max-width:760px){
 #sculpture-root{z-index:1}
 .hero-copy,.demo-copy,.native-demo,.site-header,.feature-nav,.demo-disclosure,.trial,.faq,footer{position:relative;z-index:2}
 #sculpture-root[data-cube-burst="true"]{z-index:4}
}

/* R269: mobile cube is the bullet of the WHOLE hook, not its first line.
   The measured grid row owns its centre; Coming soon is a separate row so it
   cannot pull the cube down. Retain full-width native demos and clear gaps. */
@media(max-width:760px){
 .demo-copy{display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:10px;row-gap:12px;align-items:center;padding:0 12px;min-height:88px}
 .demo-copy h2{grid-column:2;grid-row:1;font-size:34px;line-height:1.13;max-width:none}
 .demo-copy .cube-rest{grid-column:1;grid-row:1;position:static;align-self:center;width:88px;height:88px;margin:0}
 .demo-copy .coming{grid-column:2;grid-row:2;margin:0}
 .native-demo:has(iframe){box-shadow:0 2px 0 #171b16,0 10px 22px #171b1617}
}

/* R275 WHY: all-row placement overrode the approved alternation, and the
   absolute bullet centred on the first line. Intrinsic grid rows bind the
   bullet to the whole hook; Coming soon cannot change its centre. */
@media(min-width:761px){
 .demo-section:nth-child(n){grid-template-columns:minmax(0,1fr) clamp(250px,25vw,330px)}
 .demo-section:nth-child(even){grid-template-columns:clamp(250px,25vw,330px) minmax(0,1fr)}
 .demo-section:nth-child(even) .demo-copy{grid-column:1}
 .demo-section:nth-child(even) .native-demo{grid-column:2}
 .demo-section:nth-child(n) .demo-copy{display:grid;grid-template-columns:88px minmax(0,1fr);gap:12px 10px;align-items:center;padding:40px 0 0;min-height:0}
 .demo-copy h2{grid-column:2;grid-row:1}
 .demo-copy .coming{grid-column:2;grid-row:2;margin:0}
 .demo-section .cube-rest{position:static;grid-column:1;grid-row:1;align-self:center;width:88px;height:88px;margin:0}
}
/* One crisp perimeter encloses the native viewport; no second padded mat. */
.native-demo:has(iframe){border-width:3px;border-radius:16px;box-shadow:0 5px 0 #171b16,0 14px 28px #171b1624}
@media(max-width:760px){.native-demo:has(iframe){border-radius:14px;box-shadow:0 3px 0 #171b16,0 10px 22px #171b161c}}
/* R275: tightening the frame must also retire the obsolete 800px row floor.
   Keep the authored 110px/269px animation corridors as explicit padding. */
.demo-section{min-height:0}

/* R295: a faint rectangular backdrop gives the page depth without a film over
   text or native demos. Two static background gradients leave the centre clear;
   no pseudo-element, filter, shadow, animation, or new stacking context. Keep
   the sculpture's existing multiply blend so its canvas has no pale rectangle. */
body{
 background-image:
  linear-gradient(90deg,rgba(23,27,22,.025),rgba(23,27,22,0) 28%,rgba(23,27,22,0) 72%,rgba(23,27,22,.025)),
  linear-gradient(180deg,rgba(23,27,22,.016),rgba(23,27,22,0) 26%,rgba(23,27,22,0) 74%,rgba(23,27,22,.016));
 background-attachment:fixed;
 background-repeat:no-repeat;
 background-size:100% 100%;
}