[hidden]{display:none!important}
/* Gridbox Pro site v5. Tokens come from the app's own theme (apps/web/src/theme.css)
   so the app captures sit on the same colours they were shot on. */
:root{
  --chrome:#f2f6f5; --panel:#ffffff; --ink:#1b2422; --muted:#5f6e69; --line:#e0e7e4;
  --accent:#0f766e; --accent-ink:#ffffff; --accent-soft:#e2f1ee; --well:#0a0a0a;
  --ok:#2fbf8f; --warn:#b45309; --danger:#b3563f;
  --bronze:#6b4a2f; --paper:#fbfcfb;
  --display:Archivo,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --max:1120px; --r:12px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --chrome:#151a19; --panel:#1f2624; --ink:#e8eeec; --muted:#93a29c; --line:#2d3633;
    --accent:#1fae9d; --accent-ink:#04231f; --accent-soft:#17332e; --paper:#111615;
    --bronze:#c9a27e;
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased}
img,svg,video{display:block;max-width:100%}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--display);letter-spacing:-.028em;line-height:1.08;font-weight:700}
h1,h2{font-weight:800}
h1,h2,h3{text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,62px);font-weight:800}
h2{font-size:clamp(28px,3.4vw,42px);margin-bottom:14px}
h3{font-size:22px;margin-bottom:8px;line-height:1.2}
p{max-width:62ch}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--muted)}
.lede{font-size:19px;color:var(--muted);max-width:56ch}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--panel);padding:8px 12px;border-radius:8px;z-index:100}
.skip:focus{left:8px}

/* header */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:22px;height:62px}
.wordmark{font-family:"Bricolage Grotesque",var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:6px}
.wordmark b{font-weight:inherit;color:var(--accent);margin-left:.08em}
.wordmark .mk{width:26px;height:26px;display:block;margin-right:4px}
.wordmark .mk-d{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .wordmark .mk-l{display:none}:root:not([data-theme="light"]) .wordmark .mk-d{display:block}}
.top.on-plate .wordmark .mk-l{display:none}.top.on-plate .wordmark .mk-d{display:block}.top.on-plate .wordmark b{color:#7fd0c5}
.wordmark i{width:22px;height:22px;border-radius:5px;background:
  linear-gradient(var(--accent) 0 0) 0 0/50% 50% no-repeat,
  linear-gradient(var(--accent) 0 0) 100% 100%/50% 50% no-repeat,
  linear-gradient(var(--accent-soft) 0 0) 100% 0/50% 50% no-repeat,
  linear-gradient(var(--accent-soft) 0 0) 0 100%/50% 50% no-repeat}
.top nav{display:flex;gap:18px;margin-left:auto;font-size:15px}
.top nav a{color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--ink)}
.top .btn{margin-left:8px}
@media (max-width:760px){.top nav a:not(.keep){display:none}.top .wrap{gap:12px}}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px;padding:13px 20px;border-radius:var(--r);border:1px solid transparent;text-decoration:none;cursor:pointer;font-family:var(--body);line-height:1;white-space:nowrap;transition:transform .12s ease,background .12s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-primary:hover{background:color-mix(in srgb,var(--accent) 88%,black)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--muted)}
.btn-lg{font-size:18px;padding:16px 26px}
.btn-sm{font-size:14px;padding:9px 14px;border-radius:9px}
.textlink{font-size:15px;color:var(--muted)}
.textlink a{color:var(--ink)}

/* sections */
section{padding:88px 0}
@media (max-width:760px){section{padding:56px 0}}
.band{background:var(--chrome)}
.well{background:var(--well);color:#e8eeec}
/* The textured build plate (Artlist, Seedream 4K, pei-3). Dark on the left where the text sits. */
.well.plate{background:linear-gradient(90deg,rgba(8,10,10,.84) 0%,rgba(8,10,10,.6) 45%,rgba(8,10,10,.25) 100%),url(img/plate-2400.webp) center/cover var(--well)}
@media (max-width:760px){.well.plate{background:linear-gradient(rgba(8,10,10,.62),rgba(8,10,10,.72)),url(img/plate-1200.webp) center/cover var(--well)}}
.well h2,.well h3{color:#fff}
.well .lede,.well .muted{color:#a8b3af}
.eyeline{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.dim{font-family:var(--mono);font-size:13px;color:var(--bronze);letter-spacing:.02em;display:inline-flex;align-items:center;gap:8px}
.dim::before{content:"";width:22px;height:1px;background:var(--bronze);display:inline-block}
.dim::after{content:"";width:22px;height:1px;background:var(--bronze);display:inline-block}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:28px;align-items:center}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.card h3{margin-top:0}
.tight{margin:8px 0 0 18px}
.tight li{margin-bottom:6px}
.pill-row{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--muted);margin-top:18px}
.pill-row span::before{content:"·";margin-right:8px;color:var(--line)}
.pill-row span:first-child::before{content:none}

/* hero */
.hero{padding:64px 0 48px}
/* A frosted 3D print lit from behind (Artlist, Seedream 4K, petg). Light on the left where the text sits. */
.hero.frost{background:linear-gradient(90deg,rgba(251,252,251,.85) 0%,rgba(251,252,251,.6) 50%,rgba(251,252,251,.2) 100%),url(img/frost-2400.webp) center/cover var(--paper)}
@media (max-width:760px){.hero.frost{background:linear-gradient(rgba(251,252,251,.72),rgba(251,252,251,.5)),url(img/frost-1200.webp) center/cover var(--paper)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero.frost{background:linear-gradient(90deg,rgba(17,22,21,.88) 0%,rgba(17,22,21,.7) 50%,rgba(17,22,21,.38) 100%),url(img/frost-2400.webp) center/cover var(--paper)}}
@media (prefers-color-scheme:dark) and (max-width:760px){:root:not([data-theme="light"]) .hero.frost{background:linear-gradient(rgba(17,22,21,.82),rgba(17,22,21,.72)),url(img/frost-1200.webp) center/cover var(--paper)}}
.hero .wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}}
.hero h1{margin-bottom:18px;max-width:14ch}
.hero .lede{margin-bottom:26px}
.cta{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}
.price-line{margin-top:14px;font-size:15px;color:var(--muted)}
.price-line b{color:var(--ink);font-weight:600}
.proof{display:flex;align-items:center;gap:10px;margin-top:22px;font-size:15px}
.stars{color:var(--warn);letter-spacing:1px;font-size:15px}
.sample-tag{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warn);border:1px dashed var(--warn);border-radius:6px;padding:2px 6px}

/* screenshot and video slots (Brandon fills these) */
.slot{position:relative;border-radius:16px;overflow:hidden;background:
  linear-gradient(var(--line) 1px,transparent 1px) 0 0/42px 42px,
  linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/42px 42px,
  var(--chrome);border:1px solid var(--line);aspect-ratio:4/3;display:grid;place-items:center;text-align:center;padding:24px}
.slot.wide{aspect-ratio:16/9}
.slot.tall{aspect-ratio:3/4}
.slot.square{aspect-ratio:1}
.slot .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.slot .what{font-family:var(--display);font-weight:700;font-size:20px;line-height:1.2;max-width:22ch;color:var(--ink)}
.slot .how{font-size:13.5px;color:var(--muted);max-width:34ch;margin-top:6px}
.slot.app{padding-top:54px}
.slot.app::before{content:"";position:absolute;left:0;right:0;top:0;height:34px;background:var(--panel);border-bottom:1px solid var(--line)}
.slot.loop{padding:0;background:var(--chrome)}
video.loop-video{cursor:pointer}
video.loop-video::-webkit-media-controls,video.loop-video::-webkit-media-controls-panel,video.loop-video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.slot.loop video{width:100%;height:100%;object-fit:cover;display:block}
.slot.shot{padding:0;background:var(--chrome)}
.slot.shot img{width:100%;height:100%;object-fit:cover;display:block}
.slot.shot.win{aspect-ratio:1600/997}
.slot.shot.pano{aspect-ratio:1920/808}
.slot.shot.carousel{position:relative;overflow:hidden;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.slot.shot.carousel .track{display:flex;width:100%;height:100%;transition:transform .45s cubic-bezier(.25,.8,.25,1)}
.slot.shot.carousel .track img{flex:0 0 100%;-webkit-user-drag:none;pointer-events:none}
.slot.shot.carousel .dots{position:absolute;left:0;right:0;bottom:6px;display:flex;justify-content:center;gap:0}
.slot.shot.carousel .dots button{width:18px;height:22px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.slot.shot.carousel .dots button::before{content:"";width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.6);box-shadow:0 0 0 1px rgba(0,0,0,.14);transition:background .2s,transform .2s}
.slot.shot.carousel .dots button[aria-current="true"]::before{background:#fff;transform:scale(1.3)}
.slot.shot.carousel .dots button:focus-visible{outline:2px solid #fff;outline-offset:-3px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.slot.shot.carousel .track{transition:none}}
.slot.app::after{content:"";position:absolute;left:14px;top:11px;width:12px;height:12px;border-radius:50%;background:var(--line);box-shadow:20px 0 0 var(--line),40px 0 0 var(--line)}
.slot.video .play{width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center;margin:0 auto 12px;color:#fff}
.slot.video .play svg{margin-left:3px}
.slot.photo{background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px),radial-gradient(120% 90% at 50% 100%,#d9e3df,var(--chrome))}
.well .slot{background-color:#151a19;border-color:#2d3633;background-image:linear-gradient(#2d3633 1px,transparent 1px),linear-gradient(90deg,#2d3633 1px,transparent 1px)}
.well .slot .what{color:#fff}.well .slot .how{color:#a8b3af}
.well .slot.app::before{background:#1f2624;border-color:#2d3633}
.well .slot.app::after{background:#2d3633;box-shadow:20px 0 0 #2d3633,40px 0 0 #2d3633}

/* the signature: dimension marks over the hero photo */
.figure{position:relative}
.marks{position:absolute;inset:0;pointer-events:none;font-family:var(--mono);font-size:12px;color:var(--bronze)}
.marks .h{position:absolute;left:8%;right:8%;top:14px;height:0;border-top:1px solid var(--bronze)}
.marks .h::before,.marks .h::after{content:"";position:absolute;top:-6px;width:1px;height:13px;background:var(--bronze)}
.marks .h::before{left:0}.marks .h::after{right:0}
.marks .h span{position:absolute;left:50%;top:-9px;transform:translateX(-50%);background:var(--chrome);padding:0 6px}
.marks .v{position:absolute;top:10%;bottom:10%;right:14px;width:0;border-left:1px solid var(--bronze)}
.marks .v::before,.marks .v::after{content:"";position:absolute;left:-6px;width:13px;height:1px;background:var(--bronze)}
.marks .v::before{top:0}.marks .v::after{bottom:0}
.marks .v span{position:absolute;top:50%;left:-2px;transform:translate(-100%,-50%) rotate(-90deg);transform-origin:right center;background:var(--chrome);padding:0 6px;white-space:nowrap}
.inset{position:absolute;right:-6%;bottom:-8%;width:46%;box-shadow:0 20px 50px -20px rgba(0,0,0,.45);border-radius:14px}
.inset .slot{aspect-ratio:16/10;padding-top:44px}
.inset .slot .what{font-size:15px}.inset .slot .how{display:none}
@media (max-width:900px){.inset{position:static;width:100%;margin-top:14px}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:step}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.step{counter-increment:step;display:flex;flex-direction:column}
.step h3{margin-top:0}
.step p{flex:1;margin-bottom:16px} /* text sits above its picture; the paragraph stretches so the three pictures line up */
.step h3::before{content:counter(step) ". ";color:var(--accent)}
.step p{font-size:16px;color:var(--muted)}

/* feature rows */
.feature{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;padding:56px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0}
.feature.flip{grid-template-columns:1.15fr 1fr}
.feature.flip .text{order:2}
.feature .text p{color:var(--muted);font-size:17px;margin-top:10px}
@media (max-width:860px){.feature,.feature.flip{grid-template-columns:1fr;gap:22px;padding:40px 0}.feature.flip .text{order:0}}
/* Each feature on its own frosted panel, the white frost and the teal frost in turn (his pick C, 2026-09-29). */
#features .feature{border-top:0;padding:40px 44px;margin:22px 0;border-radius:24px;background:linear-gradient(rgba(251,252,251,.8),rgba(251,252,251,.86)),url(img/frost-2400.webp) center/cover var(--paper);box-shadow:0 30px 60px -44px rgba(27,36,34,.35)}
#features .feature:nth-of-type(even){background:linear-gradient(rgba(251,252,251,.74),rgba(251,252,251,.82)),url(img/frost-teal-2400.webp) center/cover var(--paper)}
@media (max-width:760px){#features .feature{padding:26px 20px;background:linear-gradient(rgba(251,252,251,.8),rgba(251,252,251,.86)),url(img/frost-1200.webp) center/cover var(--paper)}#features .feature:nth-of-type(even){background:linear-gradient(rgba(251,252,251,.74),rgba(251,252,251,.82)),url(img/frost-teal-1200.webp) center/cover var(--paper)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #features .feature{background:linear-gradient(rgba(17,22,21,.84),rgba(17,22,21,.9)),url(img/frost-2400.webp) center/cover var(--paper);box-shadow:none}:root:not([data-theme="light"]) #features .feature:nth-of-type(even){background:linear-gradient(rgba(17,22,21,.8),rgba(17,22,21,.88)),url(img/frost-teal-2400.webp) center/cover var(--paper)}}
@media (prefers-color-scheme:dark) and (max-width:760px){:root:not([data-theme="light"]) #features .feature{background:linear-gradient(rgba(17,22,21,.84),rgba(17,22,21,.9)),url(img/frost-1200.webp) center/cover var(--paper)}:root:not([data-theme="light"]) #features .feature:nth-of-type(even){background:linear-gradient(rgba(17,22,21,.8),rgba(17,22,21,.88)),url(img/frost-teal-1200.webp) center/cover var(--paper)}}

/* two columns old/new */
.oldnew{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:760px){.oldnew{grid-template-columns:1fr}}
.oldnew .card ul{list-style:none;margin:10px 0 0}
.oldnew .card li{padding:10px 0;border-top:1px solid var(--line);color:var(--muted)}
.oldnew .card.now{border-color:var(--accent);background:var(--accent-soft)}
.oldnew .card.now li{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
/* Quick lines with an X or a check (the usual way vs Gridbox Pro, and the compare table). */
.marks-list li{display:flex;gap:12px;align-items:flex-start;font-size:17px;line-height:1.4;font-weight:500}
.marks-list li::before{content:"";flex:none;width:24px;height:24px;border-radius:50%;margin-top:0;background-position:center;background-repeat:no-repeat;background-size:12px}
.marks-list li.x::before{background-color:color-mix(in srgb,var(--danger) 16%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 2.5l7 7M9.5 2.5l-7 7' stroke='%23b3563f' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")}
.marks-list li.ok::before{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.oldnew .card h3{margin-bottom:4px}
/* Sharing section */
.share-points{display:grid;gap:18px;margin-top:26px}
.share-points b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.01em;margin-bottom:4px}
.share-points p{color:var(--muted);font-size:16.5px}

/* compare */
.cmp{overflow-x:auto}
.cmp table{width:100%;border-collapse:collapse;font-size:15px;min-width:640px}
.cmp th{text-align:left;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line);font-weight:700}
.cmp td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--muted)}
.cmp td:first-child{color:var(--ink);font-weight:600}
.cmp td.us{color:var(--ink);background:var(--accent-soft)}
.cmp th.us{color:var(--accent)}
.yes{color:var(--accent);font-weight:700}
.no{color:var(--muted)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media (max-width:760px){.gallery{grid-template-columns:repeat(2,1fr)}}
.gallery figcaption{font-size:13.5px;color:var(--muted);margin-top:8px}
.gallery figcaption b{color:var(--ink);font-weight:600}

/* reviews */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.review{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;display:flex;flex-direction:column;gap:12px}
.review p{font-size:16.5px;line-height:1.5}
.review .who{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--muted);margin-top:auto}
.review .who b{color:var(--ink);display:block;font-weight:600}
.avatar{width:40px;height:40px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center;font-weight:700;color:var(--accent);font-size:14px;flex:none}
.review.crit{border-style:dashed}
.review .reply{border-top:1px solid var(--line);padding-top:12px;font-size:15px;color:var(--muted)}
.review .reply b{color:var(--ink);font-weight:600}
.rating{display:flex;align-items:center;gap:12px;margin-bottom:20px;font-size:16px}
.rating .big{font-family:var(--display);font-size:34px;font-weight:800;line-height:1}

/* price */
.price{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media (max-width:860px){.price{grid-template-columns:1fr}}
.price-card{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 30px 60px -40px rgba(27,36,34,.35)}
.price-card .amount{font-family:var(--display);font-size:56px;font-weight:800;letter-spacing:-.03em;line-height:1}
.price-card .amount small{font-family:var(--body);font-size:17px;font-weight:500;color:var(--muted);letter-spacing:0;margin-left:8px}
.price-card ul{list-style:none;margin:20px 0 24px}
.price-card li{padding:9px 0;border-top:1px solid var(--line);font-size:16px;display:flex;gap:10px}
.price-card li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;margin-top:9px}
.price-card .fine{font-size:13.5px;color:var(--muted);margin-top:14px}

/* faq */
.faq details{border-top:1px solid var(--line);padding:4px 0}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font-family:var(--display);font-weight:700;font-size:20px;padding:16px 36px 16px 0;position:relative;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:26px;color:var(--accent);font-family:var(--body);font-weight:300}
.faq details[open] summary::after{content:"\2212"}
.faq details p{color:var(--muted);padding-bottom:18px;max-width:64ch}

/* founder */
.founder{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:center}
@media (max-width:760px){.founder{grid-template-columns:1fr}}

/* close + bridge */
.bridge{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin-top:28px;max-width:560px}
.bridge form{display:grid;gap:12px;margin-top:12px}
.bridge input[type=email]{font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink)}
.bridge .os{display:flex;gap:16px;font-size:15px;color:var(--muted)}
.bridge .os label{display:flex;align-items:center;gap:6px}
.bridge .note{font-size:13.5px;color:var(--muted)}
.bridge .msg{font-size:15px;color:var(--accent);min-height:1.2em}
.signup{margin-top:32px}
/* one copy sits under the list on wide screens, the other under the price card on phones */
.signup-phone{display:none}
@media (max-width:860px){.signup-desk{display:none}.signup-phone{display:block;margin-top:0}}
.signup .consent{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.signup .consent input{margin-top:4px;accent-color:var(--accent)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* footer */
footer{border-top:1px solid var(--line);padding:36px 0 60px;font-size:14.5px;color:var(--muted)}
footer .wrap{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:24px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--ink)}
footer ul{list-style:none}
footer li{margin-bottom:8px}
footer .sample-note{grid-column:1/-1;border-top:1px dashed var(--warn);padding-top:12px;color:var(--warn);font-size:13px}

/* reveal: see "motion" at the end of this file */

/* inner pages */
.page{padding:56px 0 80px}
.page h1{font-size:clamp(32px,4.4vw,48px);max-width:20ch;margin-bottom:14px}
.page .byline{font-size:14px;color:var(--muted);margin-bottom:28px}
.page h2{font-size:26px;margin:44px 0 10px}
.page h3{font-size:20px;margin:28px 0 8px}
.page p,.page li{font-size:17px;color:var(--ink)}
.page p{margin-bottom:14px;max-width:66ch}
.page ol,.page ul{margin:0 0 16px 22px}
.page li{margin-bottom:8px}
.page .slot{margin:22px 0}
.page .aside{background:var(--chrome);border-radius:12px;padding:16px 18px;font-size:15.5px;margin:18px 0;max-width:66ch}
.page .aside b{font-weight:600}
.toc{background:var(--chrome);border-radius:12px;padding:16px 20px;margin-bottom:28px;font-size:15px}
.toc a{text-decoration:none;color:var(--ink);margin-right:16px}
.docgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.docgrid a{display:block;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px;text-decoration:none;color:var(--ink)}
.docgrid a b{font-family:var(--display);font-size:19px;display:block;margin-bottom:6px}
.docgrid a span{color:var(--muted);font-size:14.5px}
.changelog .rel{border-top:1px solid var(--line);padding:22px 0;display:grid;grid-template-columns:150px 1fr;gap:20px}
@media (max-width:640px){.changelog .rel{grid-template-columns:1fr;gap:6px}}
.changelog .rel .v{font-family:var(--mono);font-size:14px;color:var(--accent)}
.changelog .rel .d{font-size:13px;color:var(--muted);display:block;margin-top:4px}
.changelog .rel p{margin:0;color:var(--ink)}
.dl-choice{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:24px 0}
@media (max-width:640px){.dl-choice{grid-template-columns:1fr}}
.dl-choice .card{display:flex;flex-direction:column;gap:10px}
.dl-choice .card .v{font-family:var(--mono);font-size:13px;color:var(--muted)}
/* activate page: the buyer's license key with a Copy button */
.keybox{display:flex;gap:12px;align-items:center;flex-wrap:wrap;background:var(--chrome);border-radius:12px;padding:14px 16px;margin:12px 0 16px;max-width:66ch}
.keybox code{font-family:var(--mono);font-size:15px;word-break:break-all;flex:1 1 260px}
.hdyhau{margin-top:26px}
.hdyhau fieldset{border:0}
.hdyhau legend{font-weight:600;margin-bottom:8px}
.hdyhau label{display:inline-flex;align-items:center;gap:6px;margin:0 14px 8px 0;font-size:15px;color:var(--muted)}

/* v5.1: the three benefit lines under the hero (the approved product-page shape) */
.benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px;padding-top:28px;border-top:1px solid var(--line)}
.benefits b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.benefits p{font-size:16px;color:var(--muted)}
@media (max-width:760px){.benefits{grid-template-columns:1fr;gap:18px}}
.cta .btn{min-width:230px}
@media (max-width:520px){.cta .btn{min-width:0;flex:1 1 100%}}
.bridge p{margin:0}
/* v5.1 fixes: the benefit row spans the full width; the header button keeps its own text color */
.hero .wrap.wrap-plain{display:block}
.top nav a.btn-primary,.top nav a.btn-primary:hover{color:var(--accent-ink)}

/* Dark image sections: text flips light, cards keep their own colors. */
.on-dark{color:#e8eeec}
.on-dark h2,.on-dark h3{color:#fff}
.on-dark .lede,.on-dark .muted{color:#b9c3bf}
.on-dark a:not(.btn){color:#5fd3c2}
.on-dark .price-card,.on-dark .bridge{color:var(--ink)}
.on-dark .price-card a:not(.btn),.on-dark .bridge a{color:var(--accent)}
/* Closing: a nozzle laying the first layer on the gold-fleck plate (Artlist, Nano Banana Pro, nozzle-white).
   On phones the photo becomes a strip above the headline, so the text and email box don't cover it. */
#download.nozzle{background:linear-gradient(90deg,rgba(8,10,10,.92) 0%,rgba(8,10,10,.72) 45%,rgba(8,10,10,.3) 100%),url(img/nozzle-white-2400.webp) center/cover #0a0a0a}
@media (max-width:760px){#download.nozzle{padding-top:calc(56.25vw + 12px);background:linear-gradient(180deg,rgba(10,10,10,0) 0,rgba(10,10,10,.1) 28vw,#0a0a0a 56.25vw),url(img/nozzle-white-band.webp) top center/100% auto no-repeat #0a0a0a}}
/* Help page: questions grouped under short heads */
.page h2.help-group{font-size:24px;margin:44px 0 6px}
.page .faq{max-width:780px}
.faq .more{display:block;margin-top:6px;font-size:15px}
.faq .more a{font-weight:600}
/* Feature matrix: checks and X's, a short name per row, a tap or hover opens the explanation. */
.mx{width:100%;border-collapse:collapse;font-size:15px}
.mx thead th{font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink);text-align:center;padding:12px 8px;border-bottom:2px solid var(--line);vertical-align:bottom}
.mx thead th.us{color:var(--accent)}
@media (min-width:761px){.mx thead th{hyphens:none}}
.mx tbody th{text-align:left;font-weight:600;padding:12px 12px 12px 0;border-bottom:1px solid var(--line);position:relative;width:38%}
.mx td{text-align:center;padding:12px 8px;border-bottom:1px solid var(--line);vertical-align:middle;color:var(--muted);font-size:13px;line-height:1.3}
.mx td.us{background:var(--accent-soft)}
.mx .tip{all:unset;cursor:pointer;color:var(--ink);border-bottom:1px dashed color-mix(in srgb,var(--ink) 35%,transparent);line-height:1.35}
.mx .tip:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.mx .tip::after{content:"";display:inline-block;width:15px;height:15px;margin-left:6px;vertical-align:-2px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--ink) 40%,transparent);background:center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 4.3v3.4' stroke='%235f6e69' stroke-width='1.4' stroke-linecap='round'/%3E%3Ccircle cx='5' cy='2.5' r='.8' fill='%235f6e69'/%3E%3C/svg%3E")}
.mx .tipbox{display:none;font-weight:400;font-size:14.5px;line-height:1.5;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px;max-width:46ch;box-shadow:0 18px 40px -24px rgba(27,36,34,.35)}
.mx tr.open .tipbox{display:block}
@media (hover:hover) and (min-width:761px){.mx tbody th:hover .tipbox{display:block;position:absolute;left:0;top:100%;margin-top:-4px;z-index:5;width:max-content}}
.mk{display:inline-block;width:24px;height:24px;border-radius:50%;background-position:center;background-repeat:no-repeat;background-size:12px;vertical-align:middle}
.mk.yes{background-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mk.part{background-color:color-mix(in srgb,var(--accent) 16%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%230f766e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.mk.no{background-color:color-mix(in srgb,var(--muted) 14%,transparent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%235f6e69' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E")}
.mx .note{display:block;margin-top:4px}
.mx .txt{color:var(--ink);font-weight:600;font-size:13.5px}
.mx td.us .txt{color:var(--accent)}
.mx-wrap{margin-top:24px}
.mx-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:14px;color:var(--muted);margin-top:14px;align-items:center}
.mx-legend span{display:inline-flex;align-items:center;gap:8px}
.mx-legend .mk{width:20px;height:20px;background-size:10px}
@media (max-width:760px){
  .mx,.mx thead,.mx tbody,.mx tr{display:block}
  .mx thead{position:sticky;top:62px;z-index:4;background:var(--paper)}
  .mx thead tr,.mx tbody tr{display:grid;grid-template-columns:repeat(var(--cols),1fr)}
  .mx thead th:first-child{display:none}
  .mx thead th{font-size:11.5px;padding:10px 2px;line-height:1.2;hyphens:manual}
  .mx tbody th{grid-column:1/-1;width:auto;border-bottom:0;padding:16px 0 6px}
  .mx td{padding:6px 2px 14px;font-size:12px}
  .mx .tipbox{max-width:none}
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Price: matte teal filament (Artlist, Seedream 4K, matte-teal), a strip above the headline on phones. */
#price.matte{background:linear-gradient(90deg,rgba(6,20,18,.82) 0%,rgba(6,20,18,.55) 48%,rgba(6,20,18,.15) 100%),url(img/matte-teal-2400.webp) center/cover #0a0a0a}
@media (max-width:760px){#price.matte{padding-top:calc(56.25vw + 12px);background:linear-gradient(180deg,rgba(10,10,10,0) 0,rgba(10,10,10,.1) 28vw,#0a0a0a 56.25vw),url(img/matte-teal-band.webp) top center/100% auto no-repeat #0a0a0a}}
@media (min-width:761px){#price .price-card{position:sticky;top:86px}}
/* "Everything that comes with it": a check per line, tap or hover for what it does. */
.get-head{font-size:19px;margin:30px 0 8px}
.get-list{list-style:none;margin:0;padding:0}
.get-list li{position:relative;padding:9px 0 9px 34px;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.get-list li::before{content:"";position:absolute;left:0;top:10px;width:22px;height:22px;border-radius:50%;background:var(--accent) center/11px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.2 6.3l2.4 2.4 5.2-5.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.get-list .tip{all:unset;cursor:pointer;font-size:16.5px;font-weight:500;line-height:1.4;border-bottom:1px dashed color-mix(in srgb,currentColor 40%,transparent)}
.get-list .tip:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.get-list .tipbox{display:none;font-size:14.5px;line-height:1.5;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-top:10px;max-width:46ch;box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}
.get-list li.open .tipbox{display:block}
@media (hover:hover) and (min-width:761px){.get-list li:hover .tipbox{display:block;position:absolute;left:34px;top:100%;margin-top:-2px;z-index:5;width:max-content;pointer-events:none}.get-list li.open:hover .tipbox{position:static;width:auto;pointer-events:auto}}
.get-hint{font-size:14px;margin-top:12px}
.price-card .tier+.tier{margin-top:26px;padding-top:24px;border-top:2px solid var(--line)}
.price-card .tier ul{margin:14px 0 20px}
.price-card .tier .btn{display:flex;justify-content:center;width:100%}
.price-card .tier-paid .amount{font-size:44px}
.price-card .tier .btn.is-soon{cursor:default;opacity:.65;pointer-events:none}
.price-card .tier .amount small{display:block;margin:8px 0 0}
.price-card .tier-name{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.price-card .amount .was{font-size:.5em;font-weight:600;color:var(--muted);text-decoration:line-through;margin-right:6px;vertical-align:middle}
.frostband .get-list li::before{background-color:var(--ink)}
.get-list li.more{display:none}
.get-list.all li.more{display:block}
.get-more{all:unset;cursor:pointer;display:inline-block;margin-top:12px;font-weight:600;font-size:15.5px;color:var(--accent);border-bottom:1px solid currentColor}
.get-more:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.get-list .tipbox img{display:block;width:100%;max-width:340px;height:auto;border-radius:8px;margin:0 0 10px}
@media (hover:hover) and (min-width:761px){.get-list li:hover .tipbox{max-width:372px;white-space:normal}}
.on-dark .get-hint{color:#b9c3bf}

/* ---- chapters (home page): the background changes only when the topic does.
   1 the promise (hero + video): gold fleck plate, at least a full first screen, running under the header
   2 how and why: paper · 3 what you get and what people made: chrome · 4 the offer: teal frost
   5 last questions: paper, then the plate again to close the page */
.chapter-plate{margin-top:-62px;padding-top:62px;color:#e8eeec;background:linear-gradient(90deg,rgba(8,10,10,.84) 0%,rgba(8,10,10,.58) 46%,rgba(8,10,10,.3) 100%),url(img/plate-tall-2400.webp) center top/cover #0b0d0c}
@media (max-width:760px){.chapter-plate{background:linear-gradient(rgba(8,10,10,.5),rgba(8,10,10,.6) 45%,rgba(8,10,10,.7)),url(img/plate-tall-1200.webp) center top/cover #0b0d0c}}
.chapter-plate>section{background:none}
.chapter-plate .hero{min-height:calc(100svh - 62px);display:flex;align-items:center}
.chapter-plate .hero>.wrap{width:100%}
.chapter-plate h1{color:#fff}
.chapter-plate .price-line{color:#a8b3af}
.chapter-plate .price-line b{color:#fff}
.chapter-plate .marks span{background:#141817}
.chapter-plate .well+.well,.chapter-plate section+section{padding-top:24px}
.top{transition:background-color .25s ease,border-color .25s ease}
.top.on-plate{background:rgba(10,12,12,.5);border-bottom-color:rgba(255,255,255,.08)}
.top.on-plate .wordmark{color:#fff}
.top.on-plate nav a:not(.btn){color:#c3ccc9}
.top.on-plate nav a:not(.btn):hover{color:#fff}
#price.frostband{background:linear-gradient(rgba(251,252,251,.66),rgba(251,252,251,.76)),url(img/frost-teal-2400.webp) center/cover var(--paper)}
@media (max-width:760px){#price.frostband{background:linear-gradient(rgba(251,252,251,.7),rgba(251,252,251,.8)),url(img/frost-teal-1200.webp) center/cover var(--paper)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #price.frostband{background:linear-gradient(rgba(17,22,21,.84),rgba(17,22,21,.9)),url(img/frost-teal-2400.webp) center/cover var(--paper)}}
:root[data-theme="dark"] #price.frostband{background:linear-gradient(rgba(17,22,21,.84),rgba(17,22,21,.9)),url(img/frost-teal-2400.webp) center/cover var(--paper)}
#download.plate-end{background:linear-gradient(90deg,rgba(8,10,10,.86) 0%,rgba(8,10,10,.6) 48%,rgba(8,10,10,.3) 100%),url(img/plate-2400.webp) center/cover #0b0d0c}
@media (max-width:760px){#download.plate-end{background:linear-gradient(rgba(8,10,10,.66),rgba(8,10,10,.76)),url(img/plate-1200.webp) center/cover #0b0d0c}}

/* drag to compare (hero): his photo on the left of the line, the print on the right */
.cmp{position:relative;width:100%;max-width:480px;margin-left:auto;aspect-ratio:4/5;border-radius:16px;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:ew-resize;background:#1a1f1e;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);outline:1px solid rgba(255,255,255,.1)}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.cmp .after{clip-path:inset(0 0 0 var(--x,50%))}
.cmp .bar{position:absolute;top:0;bottom:0;left:var(--x,50%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.18)}
.cmp .knob{position:absolute;top:50%;left:var(--x,50%);width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.35);display:grid;place-items:center;color:#1b2422}
.cmp .tag{position:absolute;top:12px;font:600 12.5px/1 var(--body);padding:7px 10px;border-radius:7px;background:rgba(255,255,255,.92);color:#1b2422}
.cmp .t1{left:12px}.cmp .t2{right:12px}
.cmp input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cmp:focus-within .knob{outline:3px solid var(--accent);outline-offset:2px}
@media (max-width:900px){.cmp{margin:0 auto}}

/* ---- motion (2026-10-06) -------------------------------------------------------------------------------
   One easing and one rhythm for the whole page. Blocks only start hidden once site.js is running (the html.js
   class, set in the home page head and dropped again if site.js never loads), so nothing stays invisible without
   it. None of this runs for visitors who ask for reduced motion. site.js sets --d (delay between siblings) and
   --i (position in a list). */
:root{--ease-out:cubic-bezier(.16,1,.3,1)}
@media (prefers-reduced-motion:no-preference){
  /* blocks rise in as they scroll into view, siblings one after another */
  .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease-out),transform 1s var(--ease-out);transition-delay:var(--d,0ms)}
  .js .reveal.in{opacity:1;transform:none}
  /* pictures settle from a slight zoom while their block comes in */
  .js .reveal .slot>img,.js .reveal .slot>video,.js figure.reveal img{transform:scale(1.045);transition:transform 1.6s var(--ease-out);transition-delay:var(--d,0ms)}
  .js .reveal.in .slot>img,.js .reveal.in .slot>video,.js figure.reveal.in img{transform:none}
  /* list lines and price tiers follow their card one at a time */
  .js .reveal .marks-list li,.js .get-list.reveal>li{opacity:0;transform:translateX(-10px);transition:opacity .6s var(--ease-out),transform .7s var(--ease-out);transition-delay:calc(var(--d,0ms) + 200ms + var(--i,0) * 70ms)}
  .js .reveal.in .marks-list li,.js .get-list.reveal.in>li{opacity:1;transform:none}
  .js .price-card.reveal .tier{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease-out),transform .9s var(--ease-out);transition-delay:calc(120ms + var(--i,0) * 120ms)}
  .js .price-card.reveal.in .tier{opacity:1;transform:none}
  /* the first screen rises in on load, line by line, and the photo settles beside it */
  .js .hero .wrap>div:first-child>*{animation:rise .9s var(--ease-out) both}
  .js .hero .wrap>div:first-child>:nth-child(2){animation-delay:.08s}
  .js .hero .wrap>div:first-child>:nth-child(3){animation-delay:.16s}
  .js .hero .wrap>div:first-child>:nth-child(4){animation-delay:.24s}
  .js .hero .wrap>div:first-child>:nth-child(5){animation-delay:.32s}
  .js .hero .figure{animation:settle 1.2s var(--ease-out) .18s both}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
  @keyframes settle{from{opacity:0;transform:translateY(14px) scale(.975)}to{opacity:1;transform:none}}
  /* buttons lift a little under the pointer and press in on click */
  .btn{transition:transform .25s var(--ease-out),background-color .2s ease,border-color .2s ease,box-shadow .3s var(--ease-out)}
  .btn:hover{transform:translateY(-2px)}
  .btn:active{transform:translateY(0) scale(.98);transition-duration:.08s}
  .btn-primary:hover{box-shadow:0 12px 26px -12px color-mix(in srgb,var(--accent) 80%,transparent)}
  /* gallery photos lean in a touch on hover, once they're in */
  @media (hover:hover){
    .js .gallery figure.reveal.in .slot img{transition:transform .8s var(--ease-out);transition-delay:0s}
    .gallery figure:hover .slot img{transform:scale(1.035)}
  }
  /* an FAQ answer fades open */
  .faq details[open]>:not(summary){animation:rise .5s var(--ease-out) both}
}