:root{
  --paper:#FFFFFF;
  --white:#FFFFFF;
  --ink:#1B1D24;
  --marker:#F2B33D;
  --marker-deep:#C2831A;
  --client:#2F5D4A;
  --muted:#5F6270;
  --line:#DDDEE3;
  --wide:"wdth" 122;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --gutter:clamp(16px,4vw,48px);
  --max:1180px;
  --head:68px;
}
*{box-sizing:border-box}
/* hand-drawn graph paper under every light section */
#smooth-content{background:var(--paper) url(grid.svg) 0 0/208px 208px repeat}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.55;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--serif);line-height:1.04;letter-spacing:-.015em;margin:0}
h1{font-size:clamp(2.8rem,7.4vw,6.2rem);font-weight:500}
h2{font-size:clamp(2rem,4vw,3.2rem);font-weight:500}
h3{font-size:1.3rem;font-weight:600;letter-spacing:-.005em;line-height:1.2}
p{margin:0}
.lede{font-family:var(--serif);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;color:var(--muted);max-width:56ch}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons */
.btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:.5em;padding:.85em 1.3em;border-radius:6px;
  font-weight:650;text-decoration:none;border:0;background:none;color:var(--ink);font-size:1rem;cursor:pointer;font-family:inherit;will-change:transform}
.btn::before,.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;transition:transform .25s ease,background-color .25s ease}
.btn-primary::before{background:var(--marker);filter:url(#crayon)}
.btn-primary:hover::before{background:#E9A21F;transform:rotate(-1.2deg) scale(1.03)}
.btn-ghost::before{border:1.7px solid var(--ink);filter:url(#pencil)}
.btn-ghost::after{border:1.2px solid var(--ink);opacity:.45;transform:translate(1.5px,1.5px);filter:url(#pencil)}
.btn-ghost:hover::before{background:rgba(242,179,61,.2)}
.btn-ghost:hover::after{transform:translate(3px,3px)}

/* header: a floating notebook strip, drawn in pencil with a faint second line like the ghost buttons */
.site-head{position:fixed;top:12px;left:0;right:0;z-index:20;pointer-events:none}
.bar{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:24px;height:56px;padding:0 8px 0 16px;pointer-events:auto}
.bar::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(255,255,255,.96);border:1.5px solid var(--ink);border-radius:12px;filter:url(#pencil)}
.bar::after{content:"";position:absolute;inset:0;z-index:-2;border:1.2px solid var(--ink);border-radius:12px;opacity:.35;transform:translate(3px,3px);filter:url(#pencil)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--serif);font-weight:600;font-size:1.45rem;letter-spacing:-.01em}
.logo svg{flex:none}
/* "Studio" is written in by hand after the name, in the marigold of the page's marks */
.logo-name{display:inline-flex;align-items:baseline;white-space:nowrap}
.logo-studio{display:inline-block;margin-left:5px;font-family:"Kalam",cursive;font-weight:400;font-size:.8em;letter-spacing:0;color:var(--marker-deep);transform:rotate(-6deg) translateY(-.28em);transform-origin:left bottom}
/* the robot in the logo blinks when you point at it, like the one in the hero */
.lg-eyes{transform-box:fill-box;transform-origin:center}
.logo:hover .lg-eyes{animation:lg-blink .45s ease}
@keyframes lg-blink{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.logo:hover .lg-eyes{animation:none}}
.nav{display:flex;gap:26px;align-items:center}
/* the marker swipes under a link on hover, and stays under the section you are reading */
.nav a:not(.btn){text-decoration:none;color:var(--muted);font-weight:550;padding:0 2px;background:url(marker.svg) left 90%/0% .5em no-repeat;transition:background-size .35s ease,color .2s}
.nav a:not(.btn):hover,.nav a.is-here{color:var(--ink);background-size:100% .5em}
.nav .btn{color:var(--ink);padding:.55em 1em}
@media (max-width:820px){.nav a:not(.btn){display:none}.bar{padding-left:12px}}
.nav .btn{white-space:nowrap}
@media (max-width:420px){.bar{gap:12px}.site-head .logo{font-size:1.2rem;gap:8px}.site-head .logo svg{width:24px;height:24px}.nav .btn{font-size:.88rem;padding:.55em .8em}}

main{position:relative;isolation:isolate;padding-top:var(--head)}
/* a crayon bundle that carries the hero's work down into the products */
.bridge{position:absolute;left:0;top:0;z-index:-1;pointer-events:none;display:block}
/* the robot that sits on the tip of the crayon flow: above the page so you can meet it, and behind the cards (with the crayon) when it passes under them */
main{overflow-x:clip}
.rider{display:none;position:absolute;left:0;top:0;z-index:3;width:0;height:0;pointer-events:none}
.motion .rider{display:block}
.rider.is-under{z-index:-1}
.is-under .rider-tilt{pointer-events:none}
/* its seat (the bottom of its body) is the point that sits on the crayon */
.rider-tilt{position:absolute;left:-30px;top:-47px;width:60px;height:60px;transform-origin:50% 79%;pointer-events:auto;cursor:pointer}
.rider-bot{display:block;width:100%;height:100%;overflow:visible}
.rider-eyes{transform-box:fill-box;transform-origin:center;animation:rider-blink 5s infinite}
@keyframes rider-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.r-leg,.r-arm{transform-box:view-box}
.r-leg-back{transform-origin:28px 49.5px}
.r-leg-front{transform-origin:34px 49.5px}
.r-arm-back{transform-origin:22px 37px}
.r-arm-front{transform-origin:42px 37px}
/* sitting still, its legs swing over the edge */
.r-leg{animation:r-dangle 2.4s ease-in-out infinite}
.r-leg-front{animation-delay:-1.2s}
@keyframes r-dangle{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
/* sliding, it kicks and throws its arms up */
.r-arm{transition:transform .25s ease}
.is-moving .r-leg{animation:r-kick .3s ease-in-out infinite alternate}
.is-moving .r-leg-front{animation-delay:-.15s}
@keyframes r-kick{from{transform:rotate(-16deg)}to{transform:rotate(10deg)}}
.is-moving .r-arm-back{transform:rotate(100deg)}
.is-moving .r-arm-front{transform:rotate(-100deg)}
/* pointed at, it waves and its light comes on */
.is-hi .r-arm-front{animation:r-wave .45s ease-in-out infinite alternate}
@keyframes r-wave{from{transform:rotate(-128deg)}to{transform:rotate(-85deg)}}
.r-bulb{transition:fill .2s}
.is-hi .r-bulb,.is-moving .r-bulb{fill:#FFD84A}
.rider-say{position:absolute;left:30px;bottom:26px;isolation:isolate;white-space:nowrap;padding:3px 11px 5px;font-family:"Kalam",cursive;font-size:1rem;line-height:1.25;color:var(--ink);
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s;pointer-events:none}
.rider-say::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.5px solid var(--ink);border-radius:12px;filter:url(#pencil)}
/* the note sits beside its head (JS flips it to the other side near the screen edge); it shows while it slides, while it waits at a section, and when you point at it */
.is-hi .rider-say,.is-talking .rider-say,.is-waiting .rider-say{opacity:1;transform:none}
.is-under .rider-say{opacity:0}
.rider-say.is-above{bottom:58px}
@media (max-width:640px){.rider-tilt{left:-24px;top:-38px;width:48px;height:48px}.rider-say{bottom:22px;font-size:.92rem}.rider-say.is-above{bottom:46px}}

/* hero */
.hero{padding:clamp(40px,6vw,96px) 0 clamp(40px,5vw,72px)}
.hero h1{max-width:15ch}
/* the headline ends on a word that changes: the words share one slot as wide as the longest, so nothing moves when they swap */
.rot{display:inline-grid;overflow:clip;overflow-clip-margin:.12em;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.rw{grid-area:1/1;white-space:nowrap;justify-self:start}
.rw:not(.is-on){visibility:hidden}
/* notebook marks: marker swipe, sticky note, tape, handwriting */
.hand{font-family:"Kalam","Comic Sans MS",cursive;font-weight:400;color:var(--muted)}
.mk{background:url(marker.svg) left 88%/100% .5em no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.motion .mk{background-size:0% .5em}
.hero .lede{margin-top:28px;color:#464955}
/* a pen arrow in the margin of each section's description, pointing at the note, the way you mark one in a notebook */
/* each description sits on a light grey crayon note, like the notes further down, with its pen arrow inside */
.sec-head .lede,.hero .lede{position:relative;isolation:isolate;padding:14px 20px 16px 60px;color:#4A4D58}
.sec-head .lede::before,.hero .lede::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.6px dashed #A8AAB3;border-radius:9px;filter:url(#pencil)}
.sec-head .lede::after,.hero .lede::after{content:"";position:absolute;inset:5px;z-index:-1;border-radius:6px;opacity:.8;filter:url(#crayon);
  background:repeating-linear-gradient(-12deg,rgba(255,255,255,.24) 0 2px,transparent 2px 8px),#DCDDE2}
.note-arrow{position:absolute;left:16px;top:calc(14px + .3em);width:34px;height:20px;overflow:visible;filter:url(#pencil)}
@media (max-width:640px){.sec-head .lede,.hero .lede{padding:12px 16px 14px 54px}.note-arrow{left:12px;top:calc(12px + .3em)}}
.na-shaft{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:1}
.na-head{fill:var(--ink);stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round}
.pen path{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil)}
.hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}

/* hero workflow card */
.hero-visual{margin-top:64px}
@media (min-width:1000px){
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(40px,5vw,88px);align-items:center;max-width:1360px}
  .hero h1{font-size:clamp(3rem,5.3vw,5.6rem)}
  .hero-visual{margin-top:0}
}
/* hero: an agent that routes requests */
.hero{position:relative;isolation:isolate}
.hub{position:relative;aspect-ratio:5/3;width:100%;max-width:600px;margin-inline:auto;container-type:inline-size}
.hub-wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub-wires path{fill:none;stroke:#CFD1D8;stroke-width:1.6;stroke-dasharray:7 5}
.hub-ink{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hub.inked .hub-wires{visibility:hidden}
/* diagram cards: pencil outlines like the secondary button, crayon fill when a route runs through them */
.hub-node{position:absolute;isolation:isolate;display:flex;align-items:center;gap:.6em;height:12.5%;padding:0 .85em;transform:translateY(-50%);
  font-family:var(--serif);font-weight:600;font-size:max(12px,2.9cqw);color:var(--ink);white-space:nowrap}
.hub-node::before,.hub-node::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:9px;transition:background-color .3s ease,border-color .3s ease}
.hub-node::before{background:#fff;border:1.6px solid var(--ink);filter:url(#pencil)}
.hub-node::after{border:1.1px solid var(--ink);opacity:.35;transform:translate(2px,2px);filter:url(#pencil)}
.hub-node svg{width:1.3em;height:1.3em;flex:none;color:var(--muted)}
.hero-visual{--tone:var(--ink);--tone-fill:#fff}
.hero-visual[data-route="1"]{--tone:#C2831A;--tone-fill:#F8D58E}
.hero-visual[data-route="2"]{--tone:#BF4B45;--tone-fill:#F4BDB7}
.hero-visual[data-route="3"]{--tone:#5E8A4E;--tone-fill:#C6DCB9}
.hub-node.is-on::before{border-color:var(--tone)}
.hub-node.is-on::after{inset:-5px;z-index:-2;border:7px solid var(--tone-fill);border-radius:13px;opacity:1;transform:none;filter:url(#crayon)}
.hub-node.is-on svg{color:var(--tone)}
.hub-in{left:0;width:27.5%}
@container (max-width:440px){.hub-in svg{display:none}.hub-in{justify-content:center;padding:0 .4em}}
.hub-core{left:41.667%;top:38.889%;width:20%;height:33.333%;transform:none;justify-content:center;padding:0}
.hub-core::before{border-width:2px;border-radius:14px}
.hub-core::after{border-radius:14px}
.hub-core svg{width:64%;height:64%;filter:url(#pencil)}
.robot .bulb{fill:var(--tone);transition:fill .3s ease}
.hub-data{left:35%;top:11.667%;width:33.333%;justify-content:center}
.hub > .hub-tag.hub-aside{left:auto;right:67%;transform:translateY(-50%) rotate(-3deg)}
.hub-data b{font-weight:600}
.hub > .hub-tag{position:absolute;left:51.667%;transform:translate(-50%,-50%) rotate(-2deg);font-family:"Kalam",cursive;font-size:max(13px,3cqw);color:var(--muted);white-space:nowrap}
.hub-out{position:absolute;left:71.667%;display:flex;align-items:center;gap:.55em;transform:translateY(-50%);
  font-family:var(--serif);font-weight:500;font-size:max(12px,2.9cqw);color:var(--muted);line-height:1.15}
.hub-out .chk{position:relative;isolation:isolate;width:4.2cqw;height:4.2cqw;min-width:19px;min-height:19px;flex:none}
.hub-out .chk::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:3px;border:1.6px solid #A8AAB3;background:#fff;filter:url(#pencil);transition:border-color .3s ease}
.hub-out .chk svg{position:absolute;left:-6%;top:-8%;width:112%;height:112%;overflow:visible;filter:url(#pencil)}
.hub-out .chk path{stroke:var(--tone);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s ease}
.hub-out.is-on{color:var(--ink)}
.hub-out.is-on .chk::before{border-color:var(--ink)}
.hub-out.is-on .chk path{stroke-dashoffset:0}

/* section base */
section{padding:clamp(56px,7vw,96px) 0;scroll-margin-top:var(--head)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px;align-items:end;margin-bottom:40px}
@media (max-width:820px){.sec-head{grid-template-columns:1fr;gap:18px;margin-bottom:40px}}

/* ============ sprint: the two weeks on one notebook timeline ============ */
/* the crayon strip covers the days each stage takes; the stages below carry the same colors */
.sprint{padding-bottom:clamp(80px,9vw,128px)}
.plan{display:grid;gap:40px}
.plan-strip{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));column-gap:6px;row-gap:10px;align-items:center}
.plan-strip .note{grid-row:1;justify-self:center;font-family:"Kalam",cursive;font-size:1rem;line-height:1.2;color:var(--muted);white-space:nowrap;transform:rotate(-2deg)}
.plan-strip .note:first-child{justify-self:start}
.plan-strip .note.end{justify-self:end}
.day{grid-row:2;justify-self:center;position:relative;padding:4px 0;font-family:"Kalam",cursive;font-size:1.2rem;line-height:1.1;color:var(--ink);transition:color .3s}
.day.call::before{content:"";position:absolute;inset:-3px -13px;border:1.5px solid var(--ink);border-radius:50%;transform:rotate(-6deg);filter:url(#pencil)}
.seg{--p:1;grid-row:3;position:relative;isolation:isolate;display:flex;align-items:center;height:48px;padding:0 14px;font-family:"Kalam",cursive;font-size:1.2rem;color:var(--ink);
  clip-path:inset(-8px calc((1 - var(--p)) * (100% + 16px) - 8px) -8px -8px)}
.seg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:6px;opacity:.85;filter:url(#crayon);
  background:repeating-linear-gradient(-12deg,rgba(255,255,255,.24) 0 2px,transparent 2px 8px),var(--crayon)}
.wk{grid-row:4;position:relative;padding-top:14px;text-align:center;font-family:"Kalam",cursive;font-size:1rem;color:var(--muted)}
.wk::before{content:"";position:absolute;left:2px;right:2px;top:0;height:9px;border:1.4px solid #8B8E99;border-top:0;border-radius:0 0 5px 5px;filter:url(#pencil)}
.motion .plan-strip .day{color:#A8AAB3}
.motion .plan-strip .day.past{color:var(--ink)}

.stages{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.stages{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.stages{grid-template-columns:1fr}}
/* white notebook cards, so the crayon passing between them never runs under the text */
.stage{position:relative;isolation:isolate;display:grid;gap:10px;align-content:start;padding:20px 22px 22px}
.stage::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.5px solid var(--ink);border-radius:9px;filter:url(#pencil)}
.stage .when{justify-self:start;position:relative;isolation:isolate;padding:1px 12px 2px;font-family:"Kalam",cursive;font-size:1.1rem;color:var(--ink)}
.stage .when::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:5px;opacity:.85;filter:url(#crayon);background:var(--crayon)}
.stage h3{font-size:1.45rem}
.stage p{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:#4A4D58}
.gets{position:relative;padding-left:30px;font-family:"Archivo",system-ui,sans-serif;font-weight:600;font-size:.98rem;line-height:1.4;color:var(--ink)}
/* beats .stage p, which sets the serif body text */
.stage .gets{font-family:"Archivo",system-ui,sans-serif;font-size:.98rem;line-height:1.4;color:var(--ink)}
.gets::before{content:"";position:absolute;left:0;top:.05em;width:19px;height:19px;border:1.6px solid var(--ink);border-radius:3px;background:#fff;filter:url(#pencil)}
.gets::after{content:"";position:absolute;left:-1px;top:-.15em;width:22px;height:22px;background:var(--tone);-webkit-mask:url(tick.svg) center/contain no-repeat;mask:url(tick.svg) center/contain no-repeat}
.motion .gets::after{clip-path:inset(0 100% 0 0);transition:clip-path .45s ease .1s}
.motion .done .gets::after{clip-path:inset(0 0 0 0)}

@media (max-width:640px){
  .plan{gap:32px}
  .plan-strip{column-gap:4px}
  .plan-strip .note{font-size:.85rem}
  .day{font-size:1rem}
  .day.call::before{inset:-3px -8px}
  .seg{height:30px}
  .seg span{display:none}
}

/* ============ work: the products we built, each shown by its own logo ============ */
.work .sec-head{margin-bottom:28px}
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
@media (max-width:820px){.cases{grid-template-columns:1fr;gap:24px}}
/* each product is a notebook page: pencil outline, its logo, a handwritten label and ticked facts */
.case{position:relative;isolation:isolate;padding:30px 32px 32px}
.case::before,.case::after{content:"";position:absolute;inset:0;border-radius:10px;filter:url(#pencil)}
.case::before{z-index:-1;background:#fff;border:1.6px solid var(--ink)}
.case::after{z-index:-2;border:1.1px solid var(--ink);opacity:.3;transform:translate(3px,3px)}
.case-logo{display:flex;align-items:center;gap:10px;height:40px;margin:0 0 14px;letter-spacing:0}
.case-logo svg{width:30px;height:30px;flex:none}
.logo-ss span{font-family:"Source Sans 3",system-ui,sans-serif;font-weight:600;font-size:1.6rem;color:#1C1A17;letter-spacing:-.01em}
.logo-an span{font-family:"Familjen Grotesk",system-ui,sans-serif;font-weight:600;font-size:1.6rem;color:#14212B;letter-spacing:-.01em}
.logo-hq span:first-child{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:700;font-size:1.6rem;color:#1B1D24;letter-spacing:-.02em}
.logo-bw img{display:block;height:30px;width:auto}
.case-logo a{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;border-radius:6px;padding:2px 4px;margin:-2px -4px;background:linear-gradient(transparent 62%,rgba(242,179,61,0) 62%) no-repeat;transition:background-color .2s ease}
.case-logo a:hover{background:url(marker.svg) left 85%/100% .45em no-repeat}
.case-logo .ext{width:16px;height:16px;flex:none;color:var(--muted);transition:transform .2s ease}
.case-logo a:hover .ext{transform:translate(2px,-2px);color:var(--ink)}
.logo-hq .hq-note{font-family:"Kalam",cursive;font-size:1rem;color:var(--muted);margin-left:6px;transform:rotate(-2deg)}
.case .kind{font-family:"Kalam",cursive;font-size:1.2rem;color:var(--tone,var(--muted));transform:rotate(-1deg);transform-origin:left}
.case .facts{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}
.case .facts .lbl{font-family:"Kalam",cursive;font-weight:400;font-size:1.05rem;color:var(--tone,var(--muted));margin-right:6px}
.case .facts li{position:relative;padding-left:32px;font-weight:600;line-height:1.35}
.case .facts li::before{content:"";position:absolute;left:0;top:.05em;width:19px;height:19px;border:1.6px solid var(--ink);border-radius:3px;background:#fff;filter:url(#pencil)}
.case .facts li::after{content:"";position:absolute;left:-1px;top:-.15em;width:22px;height:22px;background:var(--tone,var(--ink));-webkit-mask:url(tick.svg) center/contain no-repeat;mask:url(tick.svg) center/contain no-repeat}

/* ============ services ladder ============ */
/* the label sits with the switch on the right, which leaves the left clear for the crayon coming down */
.ladder-tools{display:flex;justify-content:flex-end;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.currency{position:relative;isolation:isolate;display:inline-flex;gap:4px;padding:3px}
.currency::before{content:"";position:absolute;inset:0;z-index:-1;border:1.7px solid var(--ink);border-radius:8px;filter:url(#pencil)}
.currency button{position:relative;isolation:isolate;font:inherit;font-weight:650;border:0;background:transparent;padding:.5em 1em;cursor:pointer;color:var(--ink)}
.currency button::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:5px;filter:url(#crayon);transition:background-color .25s ease}
.currency button[aria-pressed="true"]::before{background:var(--marker)}
/* plans: notebook cards, the Automation Sprint colored in with crayon as the one to start with */
.ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.ladder{grid-template-columns:1fr}}
.step{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:8px;padding:22px 24px 24px}
.step::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.5px solid var(--ink);border-radius:9px;filter:url(#pencil)}
.step.is-pick::after{content:"";position:absolute;inset:5px;z-index:-1;border-radius:6px;opacity:.85;filter:url(#crayon);
  background:repeating-linear-gradient(-12deg,rgba(255,255,255,.24) 0 2px,transparent 2px 8px),#F5CF7E}
.step .pick-note{font-family:"Kalam",cursive;font-size:1.05rem;color:var(--muted);transform:rotate(-1.5deg);transform-origin:left}
.step.is-pick .pick-note{color:#7A4E0B}
.step h3{font-size:1.45rem}
.step p{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:#4A4D58}
.step .price{margin-top:auto;padding-top:10px;font-family:var(--serif);font-weight:600;font-size:1.55rem}
.step .time{font-size:.88rem;color:var(--muted)}
.step.is-pick .time{color:#5A4A2A}
.ladder-note{margin-top:20px;color:var(--muted);font-size:.95rem;max-width:70ch}

/* ============ tiers ============ */
/* three notebook cards like the prices above; Growth is colored in, and the bigger tiers only list what they add */
.kit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch}
@media (max-width:900px){.kit{grid-template-columns:1fr;max-width:560px}}
.tier{--tone:var(--ink);position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;padding:24px 26px 26px}
.tier::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.5px solid var(--ink);border-radius:9px;filter:url(#pencil)}
.tier.is-pick{--tone:#7A4E0B}
.tier.is-pick::after{content:"";position:absolute;inset:5px;z-index:-1;border-radius:6px;opacity:.85;filter:url(#crayon);
  background:repeating-linear-gradient(-12deg,rgba(255,255,255,.24) 0 2px,transparent 2px 8px),#F5CF7E}
.tier .pick-note{font-family:"Kalam",cursive;font-size:1.05rem;color:var(--muted);transform:rotate(-1.5deg);transform-origin:left}
.tier.is-pick .pick-note{color:#7A4E0B}
.tier h3{font-size:1.6rem}
.tier .price{margin-top:4px;font-family:var(--serif);font-weight:600;font-size:1.55rem;line-height:1.2}
.tier .time{font-size:.88rem;color:var(--muted)}
.tier.is-pick .time{color:#5A4A2A}
.tier-plus{margin:14px 0 0;font-family:"Kalam",cursive;font-size:1.08rem;color:var(--muted)}
.tier.is-pick .tier-plus{color:#5A4A2A}
.tier-list{list-style:none;margin:16px 0 24px;padding:0;display:grid;gap:11px}
.tier-plus+.tier-list{margin-top:8px}
.tier .btn{align-self:flex-start;margin-top:auto;font-size:.95rem;padding:.7em 1.1em}
/* Advanced spans the row: the name and price on the left, what the web app adds on the right */
.tier.is-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:14px 44px;align-items:start}
.tier-head{display:flex;flex-direction:column;gap:6px}
.tier.is-wide .btn{margin-top:18px}
.tier.is-wide .tier-plus{margin-top:2px}
.tier.is-wide .tier-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin-bottom:0}
/* stacked, the button moves below the list like in the other cards */
@media (max-width:900px){
  .tier.is-wide{display:flex;flex-direction:column;gap:6px}
  .tier-head{display:contents}
  .tier.is-wide .tier-plus{margin-top:14px}
  .tier.is-wide .tier-list{grid-template-columns:1fr}
  .tier.is-wide .btn{order:1;margin-top:24px}
}
.kit-base{position:relative;isolation:isolate;margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding:26px 30px 28px}
.kit-base::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.6px dashed #A8AAB3;border-radius:9px;filter:url(#pencil)}
.kit-base::after{content:"";position:absolute;inset:5px;z-index:-1;border-radius:6px;opacity:.8;filter:url(#crayon);
  background:repeating-linear-gradient(-12deg,rgba(255,255,255,.24) 0 2px,transparent 2px 8px),#DCDDE2}
.kit-base h3{font-family:"Kalam",cursive;font-weight:400;font-size:1.3rem;color:var(--ink);transform:rotate(-1.2deg);transform-origin:left;margin-bottom:8px}
.kit-base ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.kit-base li{position:relative;padding-left:24px;font-family:var(--serif);font-size:1.02rem;line-height:1.4;color:#3A3D48}
.kit-base li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;background:#5F6270;-webkit-mask:url(tick.svg) center/contain no-repeat;mask:url(tick.svg) center/contain no-repeat}
.kit-fine{grid-column:1/-1;margin:0;color:var(--muted);font-size:.9rem}
@media (max-width:820px){.kit-base{grid-template-columns:1fr;gap:20px;padding:22px 22px 24px}}

/* ============ automations ============ */
/* the jobs: each a notebook card colored in with the same crayon as the bundle above, the old way in grey, the new way ticked */
.auto{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.auto{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.auto{grid-template-columns:1fr}}
.auto-item{position:relative;isolation:isolate;display:grid;gap:10px;align-content:start;padding:22px 22px 24px}
.auto-item::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.5px solid var(--ink);border-radius:9px;filter:url(#pencil)}
.auto-item::after{content:"";position:absolute;inset:5px;z-index:-1;border-radius:6px;opacity:.8;filter:url(#crayon);
  background:repeating-linear-gradient(-12deg,rgba(255,255,255,.24) 0 2px,transparent 2px 8px),var(--crayon)}
.auto-item:nth-child(3n+1){--tone:#C2831A;--crayon:#F5CF7E}
.auto-item:nth-child(3n+2){--tone:#BF4B45;--crayon:#F0A49A}
.auto-item:nth-child(3n){--tone:#5E8A4E;--crayon:#B2CF8E}
.auto-item h3{font-size:1.45rem}
.auto-item .now{margin:0;font-family:var(--serif);font-size:1.02rem;line-height:1.5;color:#4A4D58}
.auto-item .now .hand{color:#2E3140;font-size:1.08rem}
.auto-item .after{position:relative;margin:0;padding-left:30px;font-weight:600;line-height:1.4}
.auto-item .after::before{content:"";position:absolute;left:0;top:.08em;width:19px;height:19px;border:1.6px solid var(--ink);border-radius:3px;background:#fff;filter:url(#pencil)}
.auto-item .after::after{content:"";position:absolute;left:-1px;top:-.12em;width:22px;height:22px;background:var(--tone);-webkit-mask:url(tick.svg) center/contain no-repeat;mask:url(tick.svg) center/contain no-repeat}
.motion .auto-item .after::after{clip-path:inset(0 100% 0 0);transition:clip-path .45s ease .1s}
.motion .auto-item.done .after::after{clip-path:inset(0 0 0 0)}
.auto-note{grid-column:span 2;position:relative;isolation:isolate;display:grid;align-content:center;margin:0;padding:22px 26px;font-family:var(--serif);font-size:1.12rem;line-height:1.55;color:#464955}
.auto-note::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.6px dashed #A8AAB3;border-radius:9px;filter:url(#pencil)}
.auto-note::after{content:"";position:absolute;inset:5px;z-index:-1;border-radius:6px;opacity:.8;filter:url(#crayon);
  background:repeating-linear-gradient(-12deg,rgba(255,255,255,.24) 0 2px,transparent 2px 8px),#DCDDE2}
@media (max-width:640px){.auto-note{grid-column:auto}}
.auto-note .hand{display:block;font-size:1.35rem;color:var(--ink);transform:rotate(-1.2deg);transform-origin:left;margin-bottom:4px}
.auto-note a{justify-self:start;margin-top:6px;color:var(--ink);font-family:"Archivo",system-ui,sans-serif;font-weight:600;text-decoration:none;white-space:nowrap;background:url(marker.svg) left 92%/100% .42em no-repeat;padding:0 2px}
@media (max-width:820px){.auto{grid-template-columns:1fr}}

/* ============ guarantee ============ */
.guarantee{background:var(--marker);color:var(--ink)}
.guarantee h2{font-size:clamp(2.2rem,5.4vw,4.4rem);max-width:17ch}
.guarantee p{margin-top:24px;max-width:58ch;color:#3B3216;font-size:1.1rem}

/* ============ faq / final ============ */
.faq{max-width:820px;border-top:2px solid var(--ink)}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font-weight:650;font-size:1.1rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:16px;font-size:1.6rem;font-weight:400;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 22px;color:var(--muted);max-width:65ch}
/* the last call: one notebook page with the next steps ticked off beside it */
.final{padding-bottom:clamp(64px,8vw,112px)}
.final-card{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:center;padding:clamp(28px,4.5vw,56px)}
.final-card::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.6px solid var(--ink);border-radius:12px;filter:url(#pencil)}
.final-card::after{content:"";position:absolute;inset:0;z-index:-2;border:1.2px solid var(--ink);border-radius:12px;opacity:.35;transform:translate(4px,4px);filter:url(#pencil)}
.final h2{max-width:16ch}
.final .hero-ctas{margin-top:28px}
.next-note{margin:0 0 12px;font-family:"Kalam",cursive;font-size:1.3rem;color:var(--ink);transform:rotate(-1.5deg);transform-origin:left}
.next-steps{--tone:#C2831A;list-style:none;margin:0;padding:0;display:grid;gap:14px}
.next-steps .gets{font-size:1rem;line-height:1.45}
.motion .next-steps .gets:nth-child(2)::after{transition-delay:.35s}
.motion .next-steps .gets:nth-child(3)::after{transition-delay:.6s}
@media (max-width:820px){.final-card{grid-template-columns:1fr}}

/* footer: a pencil rule, the brand, three short link lists with handwritten headings */
.site-foot{padding:0 0 40px;font-size:.95rem}
.site-foot .wrap::before{content:"";display:block;border-top:1.6px solid var(--ink);filter:url(#pencil);margin-bottom:44px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:22px}
/* each footer column sits on a card: the brand on a grey crayon note like the descriptions, the link lists on white pencil cards */
.foot-brand,.foot-col{position:relative;isolation:isolate;padding:20px 22px 22px}
.foot-brand::before,.foot-col::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.5px solid var(--ink);border-radius:9px;filter:url(#pencil)}
.foot-brand::before{border:1.6px dashed #A8AAB3}
.foot-brand::after{content:"";position:absolute;inset:5px;z-index:-1;border-radius:6px;opacity:.8;filter:url(#crayon);
  background:repeating-linear-gradient(-12deg,rgba(255,255,255,.24) 0 2px,transparent 2px 8px),#DCDDE2}
@media (max-width:900px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}}
@media (max-width:520px){.foot-grid{gap:14px}.foot-brand,.foot-col{padding:16px 16px 18px}}
.foot-brand p{margin:14px 0 12px;max-width:36ch;font-family:var(--serif);font-size:1.05rem;line-height:1.5;color:#4A4D58}
.foot-col{display:grid;gap:8px;align-content:start}
.foot-col h2{margin:0 0 4px;font-family:"Kalam",cursive;font-weight:400;font-size:1.25rem;letter-spacing:0;color:var(--ink);transform:rotate(-1.2deg);transform-origin:left}
.site-foot a:not(.logo){justify-self:start;color:var(--muted);text-decoration:none;padding:0 2px;background:url(marker.svg) left 90%/0% .5em no-repeat;transition:background-size .35s ease,color .2s}
.site-foot a:not(.logo):hover{color:var(--ink);background-size:100% .5em}
.foot-mail{font-weight:600}
.foot-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:18px;border-top:1px dashed #C9CBD2;color:var(--muted);font-size:.88rem}
.foot-legal{display:flex;gap:18px}

@media (prefers-reduced-motion:reduce){
  summary::after{transition:none}
}

/* hero: the example under the diagram, a notebook card showing the before and the after */
.hub-show{position:relative;isolation:isolate;display:grid;max-width:600px;margin:20px auto 0;padding:16px 20px 18px;container-type:inline-size}
.hub-show::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.6px solid var(--ink);border-radius:10px;filter:url(#pencil)}
.show{grid-area:1/1;display:grid;gap:12px;align-content:start;visibility:hidden}
.show.is-on{visibility:visible}
.show-before{margin:0;font-family:var(--serif);font-size:1rem;color:var(--muted)}
.show-before .hand{color:var(--tone);font-size:1.15rem;margin-right:4px}
.sh-chat{display:grid;gap:8px}
.sh-msg{position:relative;isolation:isolate;max-width:84%;margin:0;padding:8px 13px 9px;font-size:.95rem;line-height:1.4}
.sh-msg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;filter:url(#pencil)}
.sh-msg.in{justify-self:start}
.sh-msg.in::before{background:#fff;border:1.4px solid var(--ink);border-bottom-left-radius:3px}
.sh-msg.out{justify-self:end}
.sh-msg.out::before{background:var(--tone-fill);border:1.4px solid var(--tone);border-bottom-right-radius:3px;filter:url(#crayon)}
.sh-msg .who{display:block;font-family:"Kalam",cursive;font-size:.85rem;color:var(--muted);line-height:1.3}
.sh-typing{grid-area:2/1;justify-self:end;display:flex;gap:4px;margin:0;padding:12px 4px;visibility:hidden}
.sh-typing i{width:6px;height:6px;border-radius:50%;background:var(--tone);display:block}
.sh-chat .sh-msg.out{grid-area:2/1}
.sh-file{display:flex;align-items:center;gap:8px;width:max-content;max-width:100%;margin-top:4px;padding:6px 10px;border:1px solid var(--line);border-radius:6px;background:#FAFAFB;font-size:.88rem}
.sh-file svg{width:18px;height:18px;flex:none;color:#BF4B45}
.sh-photo{display:grid;gap:1px;width:max-content;margin:6px 0 8px;padding:7px 12px;font-size:.95rem;line-height:1.4;color:#2E3140;transform:rotate(-2deg);
  background:#FFFEF8 repeating-linear-gradient(transparent 0 20px,#E4E6EC 20px 21px);border:4px solid #fff;box-shadow:0 1px 5px rgba(0,0,0,.2)}
.sh-steps{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:6px;font-size:.85rem;color:var(--muted)}
.sh-steps span{display:inline-flex;align-items:center;gap:4px}
.sh-steps svg{width:15px;height:15px;flex:none;color:var(--tone)}
.nowrap{white-space:nowrap}

/* ============ legal pages ============ */
.legal{max-width:820px;margin:0 auto;padding:clamp(40px,6vw,80px) var(--gutter) clamp(56px,7vw,96px)}
.legal h1{font-size:clamp(2.4rem,5.5vw,3.8rem)}
.legal .updated{margin:12px 0 0;color:var(--muted);font-size:.95rem}
.legal-card{position:relative;isolation:isolate;margin-top:32px;padding:clamp(24px,4.5vw,48px)}
.legal-card::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff;border:1.5px solid var(--ink);border-radius:12px;filter:url(#pencil)}
.legal-card::after{content:"";position:absolute;inset:0;z-index:-2;border:1.2px solid var(--ink);border-radius:12px;opacity:.35;transform:translate(4px,4px);filter:url(#pencil)}
.legal-card h2{font-size:1.45rem;margin:36px 0 10px}
.legal-card h2:first-child{margin-top:0}
.legal-card p,.legal-card li{font-family:var(--serif);font-size:1.08rem;line-height:1.65;color:#3A3D48}
.legal-card p{margin:0 0 12px}
.legal-card ul{margin:0 0 12px;padding-left:1.2em}
.legal-card li{margin:4px 0}
.legal-card a{color:var(--ink)}
.legal-card dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 20px;margin:0 0 12px;font-family:var(--serif);font-size:1.08rem;line-height:1.5}
.legal-card dt{font-family:"Kalam",cursive;color:var(--muted)}
.legal-card dd{margin:0;color:#3A3D48}
@media (max-width:560px){.legal-card dl{grid-template-columns:1fr;gap:0}.legal-card dd{margin-bottom:10px}}
/* details still to fill in before the site goes live */
.todo{background:url(marker.svg) left 88%/100% .55em no-repeat;padding:0 2px;font-family:"Archivo",system-ui,sans-serif;font-size:.9em;font-weight:600;color:var(--ink)}
.foot-legal a[aria-current]{color:var(--ink)}