:root{
  --paper:#faf9f7;--ink:#111;--coral:#fc8b8c;--marigold:#fdbd30;--sky:#68b4fd;--grey:#8a8a8a;--rule:#e6e3dc;--sheet:#fff;
  --brush:"Caveat Brush","Marker Felt","Chalkboard SE",sans-serif;
  --hand:"Covered By Your Grace","Chalkboard SE","Comic Sans MS",sans-serif;
  --mono:"Space Mono",Menlo,"Courier New",monospace;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
/* No scroll-behavior:smooth here. Measured 4 Oct: with it on, every in-page anchor on the
   site changed the hash and left the page where it was. With it off the same click lands on
   the target. The horizontal clip below is not involved; it was tested on and off. */
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--ink);font:16px/1.6 var(--mono)}
a{color:inherit}
img,video{max-width:100%;display:block}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* type */
/* A band is one strip per line of text, never a single block behind a wrapped heading.
   Inline plus box-decoration-break:clone gives every line fragment its own padded strip, and
   the line-height is the gap between them. The skew is gone on purpose: transform does not
   apply to an inline box, and a flat strip per line beats one skewed slab over three lines. */
.band{display:inline;font-family:var(--brush);text-transform:uppercase;line-height:1.78;padding:.04em .32em .1em;background:var(--coral);font-weight:400;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.band.y{background:var(--marigold)}
.band.b{background:var(--sky)}
/* colour rule: coral = page headline + closing only; marigold = section headlines; sky = pills and numbers; tiles and murals keep coral */
h1,h2,h3{margin:0;font-weight:400}
.hand{font-family:var(--hand)}
.small{font-size:13px;color:var(--grey)}
.label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 22px;border-radius:999px;border:1.5px solid var(--ink);background:var(--sheet);color:var(--ink);font:700 14px var(--mono);text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s ease}
.btn:hover{transform:translateY(-1px) rotate(-.6deg)}
.btn.primary{background:var(--ink);color:#fff}
.btn.sm{padding:9px 16px;font-size:13px}
.btn[aria-disabled="true"]{opacity:.45;pointer-events:none}

/* promo bar: one line above the nav, on only when the server injects window.__promo.
   With no injection it renders nothing and takes no height, so an un-injected page is the
   page as it was. The copy comes from the flag's value, so the words change without a deploy. */
.promo{display:none;position:relative;z-index:30;background:var(--marigold);color:var(--ink)}
.promo.on{display:block}
.promo .in{display:flex;align-items:center;gap:14px;padding:10px 48px;max-width:1200px;margin:0 auto}
.promo p{margin:0;font:13px/1.45 var(--mono);flex:1}
.promo a{color:inherit;text-underline-offset:3px}
.promo .x{flex:none;width:26px;height:26px;border:0;border-radius:50%;background:transparent;color:var(--ink);
  font:400 17px/1 var(--mono);cursor:pointer;opacity:.6}
.promo .x:hover{opacity:1;background:rgba(17,17,17,.08)}
/* The bar sits above a sticky nav, so the nav must stick below it rather than over it. */
.promo.on ~ .nav{top:0}
@media (max-width:720px){
  .promo .in{padding:9px 18px;gap:10px}
  .promo p{font-size:12px}
}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:32px;padding:16px 48px;background:rgba(250,249,247,.92);backdrop-filter:blur(6px)}
.nav .logo{height:66px;opacity:0;transition:opacity .3s ease}
.nav.scrolled .logo{opacity:1}
.nav .links{margin-left:auto;display:flex;gap:32px;align-items:center}
.nav .links a{text-decoration:none;font-size:15px}
.nav .links a.muted{color:var(--grey)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,64px);align-items:center;padding-block:56px 120px}
.hero .wordmark-box{width:100%;max-width:420px;margin-bottom:40px}
.hero .wordmark{width:100%;mix-blend-mode:multiply}
[hidden]{display:none!important}
.hero .hero-band{display:flex;flex-direction:column;gap:6px;margin:0 0 40px;font-size:clamp(48px,5.9vw,86px);line-height:1}
.hero .hero-band .band{white-space:nowrap}
.hero .hero-band .band{align-self:flex-start}
.hero h1.lead{font-size:clamp(16px,1.4vw,20px);line-height:1.6;font-weight:400;max-width:600px;margin:0 0 40px}
.hero .sub{font-size:15px;color:var(--grey);max-width:560px;margin:0 0 24px}
.hero p.lead{font-size:18px;max-width:600px;margin:0 0 24px}
.hero .ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:32px}
.art{position:relative;height:560px}
.art.stack{height:auto;aspect-ratio:560/640;width:100%;max-width:560px;margin-left:auto}
.stack .tile{width:54%}
.stack .s1{left:3%;top:0;--tilt:-4deg}
.stack .s2{left:23%;top:12.5%;--tilt:3deg}
.stack .s3{left:43%;top:25%;--tilt:-2deg}
.stack .s4{left:2%;top:39%;--tilt:4deg}
.stack .s5{left:28%;top:51.5%;--tilt:-3deg}

.tile{position:absolute;width:300px;aspect-ratio:1;background:var(--sheet);border-radius:6px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(var(--tilt,0deg))}
.tile img{width:100%;height:100%;object-fit:cover}
.art .t1{left:0;top:220px;--tilt:-4deg}
.art .t2{left:250px;top:170px;--tilt:3deg}

/* sections */
section{padding-block:96px}
section.white{background:var(--sheet)}
.sec-head{display:flex;flex-direction:column;gap:20px;align-items:flex-start;margin-bottom:32px}
.sec-head.center{align-items:center;text-align:center}
.sec-head h2{font-size:56px;line-height:1}
.sec-head p{margin:0;max-width:900px;font-size:18px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.card{background:var(--sheet);border-radius:8px;box-shadow:var(--shadow);padding:28px;transform:rotate(var(--tilt,0deg))}
.card.paper{background:var(--paper);border:1px solid var(--rule);box-shadow:none}
.card h3{font-family:var(--brush);font-size:30px;margin-bottom:10px}
.card .icon{height:120px;width:auto;margin:6px 0 10px}
.card .kv{display:flex;flex-direction:column;gap:2px;margin-top:10px}
.card .kv b{font:400 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--grey)}
.card .kv span{font-size:15px}
.card.me{border:2px solid var(--ink);background:var(--sheet);position:relative}
.card .tag{position:absolute;right:24px;top:14px;font-family:var(--brush);color:var(--coral);font-size:22px;transform:rotate(6deg)}
.step .num{width:40px;height:40px;border-radius:50%;background:var(--sky);display:grid;place-items:center;font-family:var(--brush);font-size:26px;margin-bottom:12px}
.step .doodle{width:220px;aspect-ratio:1;border-radius:6px;box-shadow:var(--shadow);overflow:hidden;margin:4px 0 16px;transform:rotate(var(--dt,0deg))}
.step .doodle img{width:100%;height:100%;object-fit:cover}
.step .mural-thumb{aspect-ratio:1376/768;width:100%}
.step .mural-thumb img{object-fit:contain;background:var(--sheet)}
.step .tip{display:flex;align-items:flex-start;gap:10px;margin:14px 0 0;padding-top:14px;border-top:1px solid var(--rule)}
.step .tip img{width:auto;height:30px;flex:0 0 auto;margin-top:-2px}
.step .tip span{font-family:var(--hand);font-size:19px;line-height:1.25}
.morelink{margin:26px 0 0;font-size:15px}
.morelink a{color:var(--ink)}
.step h3{font-size:32px}
.step p{margin:0;font-size:15px}

/* mural */
.mural{width:1000px;max-width:100%;margin:0 auto;border-radius:8px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(-.8deg);background:var(--sheet)}
.center{text-align:center}
.center .btn{margin-top:32px}

/* demo */
.demo{position:relative;width:1000px;max-width:100%;margin:0 auto;border-radius:8px;border:1px solid var(--rule);overflow:hidden;background:var(--sheet)}
.demo video{width:100%;aspect-ratio:1240/840}
.demo-bar{display:flex;justify-content:center;gap:12px;margin-top:16px}
.modal{position:fixed;inset:0;z-index:50;background:rgba(17,17,17,.55);display:grid;place-items:center;padding:24px}
.modal-box{width:min(1400px,96vw);background:var(--paper);border-radius:8px;padding:16px;box-shadow:0 24px 64px rgba(0,0,0,.25)}
.modal-box video{width:100%;max-height:calc(100vh - 140px);aspect-ratio:1240/840;border-radius:6px;background:var(--sheet)}

/* pricing */
.toggle{display:inline-flex;align-items:center;gap:10px;font-size:13px}
.toggle .sw{width:40px;height:22px;border-radius:11px;background:var(--ink);position:relative;cursor:pointer}
.toggle .sw::after{content:"";position:absolute;top:2px;left:20px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .15s}
.toggle.monthly .sw{background:var(--rule)}
.toggle.monthly .sw::after{left:2px}
.toggle .g{color:var(--grey)}
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,380px));gap:24px;justify-content:center;align-items:stretch;margin-top:32px}
.tier{position:relative;background:var(--sheet);border-radius:8px;box-shadow:var(--shadow);padding:28px;display:flex;flex-direction:column;gap:14px;transform:rotate(var(--tilt,0deg))}
.tier .band{font-size:44px;align-self:flex-start}
.tier .price{display:flex;align-items:flex-end;gap:6px}
.tier .price b{font:400 56px/1 var(--brush)}
.tier .price span{font-size:12px;color:var(--grey);max-width:200px;line-height:1.4}
.tier ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13px;flex:1}
.tier ul li::before{content:"+ "}
.tier ul.base li::before{content:""}
.tier{text-align:left}
.tier .btn{width:100%}
.topup{margin:32px auto 0;text-align:center}

/* closing + footer */
.closing{text-align:center;padding-block:80px}
.closing .logo{width:360px;max-width:80%;margin:0 auto 24px}
.closing h2{font-size:56px;margin-bottom:32px}
.closing .closing-line{font-size:28px;margin:40px 0 0;color:var(--ink)}
footer{border-top:1px solid var(--rule);padding:32px 48px 40px;display:flex;gap:32px;align-items:center;font-size:12px;color:var(--grey)}
footer p{margin:0;max-width:640px}
footer .links{margin-left:auto;display:flex;flex-wrap:wrap;gap:12px 24px}
footer a{text-decoration:none}

/* mobile */
@media (max-width:900px){
  .nav{padding:14px 20px;gap:12px}
  .nav .links a:not(.btn){display:none}
  .nav .logo{height:50px}
  .hero{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:24px 56px;text-align:center}
  .hero .wordmark{margin:0 auto}
  .hero .hero-band{font-size:clamp(30px,9.2vw,48px);align-items:center;margin-bottom:28px}
  .hero .wordmark-box{margin-bottom:28px}
  .hero .hero-band .band{align-self:center}
  .hero h1.lead{font-size:17px;margin:0 auto 8px}
  .hero .sub{margin:0 auto 20px}
  .hero p.lead{font-size:16px;margin:0 auto 20px}
  .hero .ctas{justify-content:center}
  .hero .ctas .btn{width:100%}
  .art.stack{width:100%;max-width:380px;margin:0 auto}
  section{padding-block:56px}
  .sec-head h2{font-size:36px}
  .closing h2,.use-cta h2{font-size:36px}
  .sec-head p{font-size:15px}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card .icon{height:80px}
  .step .doodle{width:120px}
  .tiers{grid-template-columns:minmax(0,1fr)}
  .tier .band{font-size:34px}
  .tier .price b{font-size:48px}
  footer{flex-direction:column;align-items:flex-start;padding:24px 20px 32px}
  footer .links{margin-left:0}
}

/* use cases page */
.use-hero{padding-block:56px 24px}
.use-hero h1{font-size:56px;line-height:1;margin:0 0 20px}
.use-hero .sub{font-size:16px;color:var(--grey);margin:0;max-width:640px}
.use{padding-block:56px;border-top:1px solid var(--rule)}
.use .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.use h2{font-family:var(--brush);text-transform:uppercase;font-size:38px;line-height:1.05;margin-bottom:24px;max-width:560px}
.use p{margin:0 0 20px;font-size:16px;line-height:1.65}
.use ul{margin:0 0 20px;padding-left:18px;font-size:15px;line-height:1.6}
.use li{margin-bottom:8px}
.use .good{font-size:13px;line-height:1.6;color:var(--grey)}
.use .good b{font-weight:700;color:var(--ink);text-transform:uppercase;font-size:11px;letter-spacing:.08em;margin-right:6px}
.use .proof{font-family:var(--hand);font-size:22px;margin:24px 0 0;color:var(--ink)}
.use .mural{width:100%;transform:rotate(.6deg)}
.use .demo{width:100%}
.use .mural img{width:100%;height:auto}
.use:nth-child(even) .mural{transform:rotate(-.6deg)}
.strip{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px}
.strip .tile-s{width:120px;aspect-ratio:1;border-radius:6px;box-shadow:var(--shadow);overflow:hidden;background:var(--sheet);flex:none}
.strip .tile-s img{width:100%;height:100%;object-fit:cover}
.strip .arrow{font-family:var(--brush);font-size:28px;color:var(--grey)}
.strip .slide{flex:none;width:min(300px,100%);height:169px;background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:12px 14px;display:grid;grid-template-columns:1fr 130px;gap:12px;align-items:center;font-size:10px;line-height:1.4;box-shadow:var(--shadow)}
.strip .slide .t{font-family:var(--brush);font-size:13px;text-transform:uppercase;margin-bottom:4px}
.strip .slide img{width:130px;height:130px;object-fit:cover;border-radius:3px}
.strip .cap{font-size:12px;color:var(--grey);flex:1;min-width:160px}
.use-cta{text-align:center;padding-block:96px}
.use-cta h2{font-size:56px;margin-bottom:12px}
.use-cta p{font-family:var(--hand);font-size:22px;margin:0 0 28px}
@media (max-width:900px){.use .wrap{grid-template-columns:1fr;gap:24px}.use .wrap>div{min-width:0}.use-hero h1{font-size:36px}.use h2{font-size:26px}.strip{flex-wrap:wrap}}