/* self-hosted fonts */
@font-face{font-family:"Manrope";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/manrope-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/manrope-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/manrope-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/manrope-latin-700-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/geist-mono-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fonts/geist-mono-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;src:url("fonts/caveat-latin-600-normal.woff2") format("woff2")}

/* Layout: light canvas in chapters (white / soft gray / one teal band), bento of live mini UIs that take turns, dark teal footer */
:root{
  --bg:#F4F7F6; --paper:#FFFFFF; --surface:#FFFFFF; --surface-2:#ECF1EF; --line:#DDE4E1; --line-2:#C6D0CC;
  --fg:#0D1714; --fg-2:#3F4C47; --fg-3:#5B6863;
  --accent:#0E6A5E; --accent-2:#0A574D; --accent-soft:#DDF0EB; --on-accent:#FFFFFF;
  --band:#0D5B51; --deep:#062A26; --deep-line:#164640;
  --pop:#FFB938; --pop-soft:#FFF1D1; --on-pop:#3A2600;
  --ok:#11734F; --ok-soft:#E1F3EA; --warn:#8A5300; --warn-soft:#FBEFD9; --err:#B42318;
  --h1a:#000000; --h1b:#666666; --muted-word:rgba(255,255,255,.32);
  --glass:rgba(255,255,255,.8); --overlay:rgba(255,255,255,.88);
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0.32,0.72,0,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#181818; --paper:#1F1F1F; --surface:#1F1F1F; --surface-2:#272727; --line:#313131; --line-2:#3E3E3E;
  --fg:#F2F4F3; --fg-2:#BCC4C1; --fg-3:#99A39F;
  --accent:#5BCFB9; --accent-2:#7DDBC8; --accent-soft:#17312C; --on-accent:#06201C;
  --band:#0B3F38; --deep:#031916; --deep-line:#12322D;
  --pop:#FFC861; --pop-soft:#3A2D12; --on-pop:#2A1C00;
  --ok:#55C99C; --ok-soft:#173327; --warn:#E9A845; --warn-soft:#352914; --err:#FF8A80;
  --h1a:#FFFFFF; --h1b:#9B9B9B;
  --glass:rgba(31,31,31,.8); --overlay:rgba(0,0,0,.86); color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#181818; --paper:#1F1F1F; --surface:#1F1F1F; --surface-2:#272727; --line:#313131; --line-2:#3E3E3E;
  --fg:#F2F4F3; --fg-2:#BCC4C1; --fg-3:#99A39F;
  --accent:#5BCFB9; --accent-2:#7DDBC8; --accent-soft:#17312C; --on-accent:#06201C;
  --band:#0B3F38; --deep:#031916; --deep-line:#12322D;
  --pop:#FFC861; --pop-soft:#3A2D12; --on-pop:#2A1C00;
  --ok:#55C99C; --ok-soft:#173327; --warn:#E9A845; --warn-soft:#352914; --err:#FF8A80;
  --h1a:#FFFFFF; --h1b:#9B9B9B;
  --glass:rgba(31,31,31,.8); --overlay:rgba(0,0,0,.86); color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:700;letter-spacing:-.02em}
p{text-wrap:pretty;margin:0}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.wrap{max-width:1152px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--surface);padding:8px 12px;border:1px solid var(--line);border-radius:8px}
.skip:focus{left:16px}
.eyebrow{font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
svg.i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* bands */
.b-paper{background:var(--paper)}
.b-gray{background:var(--bg)}
.b-band{background:var(--band);color:#FFFFFF;--fg:#FFFFFF}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:9999px;font-size:16px;line-height:24px;font-weight:600;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .6s var(--ease),transform .6s var(--ease),border-color .6s var(--ease)}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn-primary:active{transform:scale(.98)}
.btn-sm{font-size:14px;line-height:20px;padding:8px 12px}
.textlink{display:inline-flex;align-items:center;gap:4px;font-weight:600;color:var(--accent);text-decoration:none;font-size:16px}
.textlink svg{width:16px;height:16px;transition:transform .6s var(--ease)}
.textlink:hover svg{transform:translateX(4px)}

/* nav */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--paper)}
.nav{position:fixed;top:calc(env(safe-area-inset-top,0px) + 24px);left:50%;transform:translateX(-50%);z-index:50;width:max-content;max-width:calc(100% - 32px)}
.pill{display:flex;align-items:center;gap:24px;padding:8px 8px 8px 16px;border-radius:9999px;background:var(--glass);backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-weight:700;font-size:16px}
.brand svg{width:24px;height:24px}
.navlinks{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.navlinks a{display:block;padding:4px 12px;border-radius:9999px;font-size:14px;line-height:20px;font-weight:500;color:var(--fg-2);text-decoration:none;transition:background .6s var(--ease),color .6s var(--ease)}
.navlinks a:hover{background:var(--surface-2);color:var(--fg)}
.navlinks a[aria-current="true"]{color:var(--fg);background:var(--surface-2)}
.burger{display:none;position:relative;width:40px;height:40px;border-radius:9999px;border:0;background:transparent;cursor:pointer}
.burger span{position:absolute;left:12px;width:16px;height:1.5px;background:var(--fg);border-radius:2px;transition:transform .7s var(--ease),top .7s var(--ease)}
.burger span:nth-child(1){top:16px}.burger span:nth-child(2){top:23px}
.menu-open .burger span:nth-child(1){top:19.5px;transform:rotate(45deg)}
.menu-open .burger span:nth-child(2){top:19.5px;transform:rotate(-45deg)}
.overlay{position:fixed;inset:0;z-index:40;background:var(--overlay);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);display:flex;flex-direction:column;justify-content:center;padding:96px max(24px,env(safe-area-inset-right,0px)) 48px max(24px,env(safe-area-inset-left,0px));opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.menu-open .overlay{opacity:1;pointer-events:auto}
.overlay ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.overlay a{font-size:30px;line-height:36px;font-weight:700;text-decoration:none;display:inline-block;transform:translateY(48px);opacity:0;transition:transform .7s var(--ease),opacity .7s var(--ease)}
.menu-open .overlay li:nth-child(1) a{transition-delay:.1s}.menu-open .overlay li:nth-child(2) a{transition-delay:.15s}.menu-open .overlay li:nth-child(3) a{transition-delay:.2s}.menu-open .overlay li:nth-child(4) a{transition-delay:.25s}.menu-open .overlay li:nth-child(5) a{transition-delay:.3s}
.menu-open .overlay a{transform:none;opacity:1}

/* hero */
.hero{padding-top:160px;padding-bottom:96px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center}
.hero h1{font-size:60px;line-height:1;max-width:680px;letter-spacing:-.035em;color:var(--fg);padding-bottom:4px}
.scribble{position:relative;white-space:nowrap;display:inline-block}
.scribble svg{position:absolute;left:-2%;bottom:-14px;width:104%;height:22px;overflow:visible;fill:none;stroke:var(--pop);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;z-index:-1}
.scribble svg path+path{stroke-width:3;opacity:.7}
.hero .sub{font-size:20px;line-height:28px;color:var(--fg-2);max-width:680px;margin-top:24px}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}
.hero .fine{margin-top:16px;font-size:14px;line-height:20px;color:var(--fg-3)}
.kicker{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:4px 12px 4px 4px;border-radius:9999px;background:var(--pop-soft);font-size:14px;line-height:20px;font-weight:600;color:var(--fg)}
.kicker b{background:var(--pop);color:var(--on-pop);font-size:12px;line-height:16px;padding:2px 8px;border-radius:9999px}

/* overnight panel */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 1px 2px rgba(13,23,20,.04),0 32px 64px -32px rgba(13,23,20,.22)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 12px}
.panel-head b{display:block;font-size:16px;line-height:24px;font-weight:700}
.panel-head small{display:block;font-size:12px;line-height:16px;color:var(--fg-3)}
.moon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--deep);color:#FFD9A8}
.moon svg{width:20px;height:20px}
.clock{font-family:var(--mono);font-size:12px;line-height:16px;padding:4px 8px;border-radius:9999px;background:var(--surface-2);color:var(--fg-2);font-variant-numeric:tabular-nums}
.feed{list-style:none;margin:0;padding:0 8px 8px;display:flex;flex-direction:column;gap:4px;height:352px;overflow:hidden}
.row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border-radius:12px;transition:transform 1s var(--ease),opacity 1s var(--ease),filter 1s var(--ease),background .8s var(--ease)}
.row.enter{transform:translateY(-16px);opacity:0;filter:blur(6px)}
.row.fresh{background:var(--surface-2)}
.ico{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--surface-2);color:var(--fg-2)}
.ico svg{width:16px;height:16px}
.row .txt{min-width:0}
.row .txt b{display:block;font-size:14px;line-height:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .txt span{display:block;font-size:12px;line-height:16px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row time{font-family:var(--mono);font-size:12px;line-height:16px;color:var(--fg-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.row.brief{background:var(--accent-soft)}
.row.brief .ico{background:var(--accent);color:var(--on-accent)}
.panel-foot{display:flex;gap:24px;padding:12px 16px;border-top:1px solid var(--line);font-size:12px;line-height:16px;color:var(--fg-3);flex-wrap:wrap}
.panel-foot b{color:var(--fg);font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* sections */
section{scroll-margin-top:96px}
.sec{padding-top:96px;padding-bottom:96px}
.lead{font-size:36px;line-height:40px;max-width:800px}
.lead span{color:var(--fg-3)}
.doors-band{padding-top:64px}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.door{display:flex;flex-direction:column;gap:12px;padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:24px;text-decoration:none;transition:border-color .7s var(--ease),transform .7s var(--ease)}
.door:hover{border-color:var(--line-2);transform:translateY(-2px)}
.door:active{transform:scale(.99)}
.door h3{font-size:24px;line-height:32px}
.door p{color:var(--fg-2)}
.door .textlink{margin-top:auto;padding-top:8px}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:48px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:24px;display:flex;flex-direction:column;overflow:hidden;min-width:0;transition:border-color .8s var(--ease)}
.card.live{border-color:var(--line-2)}
.s4{grid-column:span 4}.s2{grid-column:span 2}.s3{grid-column:span 3}
.card-head{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;padding:24px 24px 0}
.card-head > div{min-width:0}
.card h3{font-size:20px;line-height:28px;margin-top:8px}
.card .desc{font-size:14px;line-height:20px;color:var(--fg-2);margin-top:8px;max-width:440px}
.more{flex:none;display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:9999px;border:1px solid var(--line);background:var(--surface);font-size:12px;line-height:16px;font-weight:600;cursor:pointer;color:var(--fg-2);transition:border-color .6s var(--ease),color .6s var(--ease),transform .6s var(--ease)}
.more svg{width:14px;height:14px}
.more:hover{border-color:var(--line-2);color:var(--fg)}
.more:active{transform:scale(.97)}
.stage{margin:24px;margin-top:auto;padding-top:24px;flex:1;display:flex;flex-direction:column}
.stage > .screen-box{flex:1}
.log{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.log li{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:12px;line-height:16px}
.log time{font-family:var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.log span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log .chip{font-size:12px;line-height:16px;font-weight:600;padding:2px 8px;border-radius:9999px;background:var(--ok-soft);color:var(--ok)}
.log .chip.w{background:var(--pop-soft);color:var(--fg)}
@media (max-width:640px){.log li{grid-template-columns:minmax(0,1fr) auto}.log time{display:none}}
.screen-box{background:var(--surface-2);border-radius:16px;padding:16px;min-height:248px;position:relative;overflow:hidden}
.example{position:absolute;right:12px;bottom:8px;font-family:var(--mono);font-size:12px;line-height:16px;color:var(--fg-3)}

/* pipe */
.pipe-track{display:grid;grid-template-columns:auto 1fr auto 1fr auto 1fr auto;align-items:center;gap:8px}
.node{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;line-height:16px;color:var(--fg-3);transition:color .8s var(--ease)}
.node .disc{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);transition:background .8s var(--ease),border-color .8s var(--ease),color .8s var(--ease),transform .8s var(--ease)}
.node.on{color:var(--fg)}
.node.on .disc{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.node.cur .disc{transform:scale(1.08)}
.node.done .disc{border-color:var(--ok);color:var(--ok);background:var(--ok-soft)}
.link{height:2px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-bottom:20px}
.link i{display:block;height:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.link.on i{transform:scaleX(1)}
.msg{margin-top:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;align-items:center;gap:12px;min-height:72px}
.msg .body{flex:1;min-width:0;transition:opacity .5s var(--ease),transform .8s var(--ease)}
.msg .body.swap{opacity:0;transform:translateY(4px)}
.msg .when{font-family:var(--mono);font-size:12px;line-height:16px;color:var(--fg-3)}
.msg .what{font-size:14px;line-height:20px;margin-top:2px}
.approve{flex:none;font-size:12px;line-height:16px;font-weight:700;padding:4px 12px;border-radius:9999px;background:var(--pop);color:var(--on-pop);opacity:0;transform:scale(.9);transition:opacity .6s var(--ease),transform .6s var(--ease),background .5s var(--ease)}
.approve.show{opacity:1;transform:none;animation:pulse 2.2s var(--ease) infinite}
.approve.pressed{transform:scale(.94);background:var(--ok);color:#FFFFFF;animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--pop-soft)}50%{box-shadow:0 0 0 6px var(--pop-soft)}}
.stats{display:flex;gap:24px;margin-top:16px;flex-wrap:wrap}
.stats div{font-size:12px;line-height:16px;color:var(--fg-3)}
.stats b{display:block;font-family:var(--mono);font-size:18px;line-height:28px;color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}

/* law site demo */
.site-box{display:flex;flex-direction:column;gap:12px;min-height:336px}
.lw{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.lw-bar{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:1px solid var(--line)}
.lw-bar .dots{display:flex;gap:4px}
.lw-bar .dots i{width:8px;height:8px;border-radius:9999px;background:var(--line-2)}
.lw-bar .u{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:4px;font-size:12px;line-height:16px;color:var(--fg-3);background:var(--surface-2);border-radius:9999px;padding:2px 8px;white-space:nowrap;overflow:hidden}
.lw-bar .u svg{width:10px;height:10px}
.lw-body{padding:12px;display:flex;flex-direction:column;gap:12px}
.lw-nav{display:flex;justify-content:space-between;align-items:center;font-size:12px;line-height:16px;color:var(--fg-3)}
.lw-nav b{font-size:14px;line-height:20px;color:var(--fg);letter-spacing:-.01em}
.lw-mark{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--accent);margin-right:6px;vertical-align:0}
.lw-h{font-size:18px;line-height:24px;font-weight:700;letter-spacing:-.02em}
.lw-s{font-size:12px;line-height:16px;color:var(--fg-3);margin-top:4px}
.lw-form{border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;background:var(--bg)}
.lw-f{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:12px;line-height:16px;transition:border-color .6s var(--ease)}
.lw-f span{color:var(--fg-3);flex:none}
.lw-f em{font-style:normal;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lw-f.focus{border-color:var(--accent)}
.lw-f.focus em::after{content:"";display:inline-block;width:1px;height:12px;background:var(--fg);margin-left:1px;vertical-align:-2px;animation:blink 1s infinite}
.lw-go{text-align:center;font-size:12px;line-height:16px;font-weight:700;padding:8px;border-radius:9999px;background:var(--accent);color:var(--on-accent);transition:background .6s var(--ease),transform .4s var(--ease)}
.lw-go.is-sent{background:var(--ok)}
.lw-go.press{transform:scale(.96)}
.lw-note{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--line);font-size:12px;line-height:16px;transition:opacity 1s var(--ease),transform 1s var(--ease)}
.lw-note .ni{width:24px;height:24px;border-radius:8px;flex:none;display:grid;place-items:center;background:var(--pop);color:var(--on-pop)}
.lw-note .ni svg{width:14px;height:14px}
.lw-note b{font-weight:700}
.lw-note span{color:var(--fg-3)}
.lw-note.off{opacity:0;transform:translateY(8px)}

/* software */
.s6{grid-column:span 6}
.sw-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:12px;align-items:stretch}
.req{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:8px}
.req .who{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--fg-3)}
.board-wrap{display:flex;flex-direction:column;gap:8px;min-width:0}
.board{display:flex;gap:8px;overflow-x:auto;padding-bottom:2px}
.col{flex:1 0 120px;min-width:120px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px;display:flex;flex-direction:column;gap:6px;transition:all 1.1s var(--ease);overflow:hidden}
.col h4{margin:0;font-family:var(--mono);font-size:12px;line-height:16px;font-weight:500;color:var(--fg-3)}
.col.new h4{color:var(--on-pop);background:var(--pop);align-self:flex-start;padding:0 6px;border-radius:4px}
.col.new.hide{flex:0 0 0;min-width:0;padding:0;border-width:0;opacity:0}
.tk{font-size:12px;line-height:16px;padding:6px 8px;border-radius:8px;background:var(--surface-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all 1s var(--ease)}
.tk.arrive.hide{opacity:0;transform:translateY(-8px)}
.tk.leave{opacity:.25}
.team > span{display:flex}
.team{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--fg-3)}
.av{flex:none;width:24px;height:24px;border-radius:9999px;display:grid;place-items:center;font-size:12px;line-height:16px;font-weight:700;color:var(--fg);background:var(--accent-soft);border:2px solid var(--surface-2)}
.av + .av{margin-left:-6px}
.av.p{background:var(--pop-soft)}

/* hosting */
.status-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.status-top b{font-size:14px;line-height:20px}
.live-dot{display:inline-flex;align-items:center;gap:8px;font-size:12px;line-height:16px;font-weight:700;color:var(--ok)}
.live-dot i{width:8px;height:8px;border-radius:9999px;background:var(--ok);box-shadow:0 0 0 4px var(--ok-soft)}
.stat-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:12px;line-height:16px;margin-top:4px;transition:opacity 1s var(--ease)}
.stat-row span:first-child{color:var(--fg-2);min-width:0}
.stat-row .v{font-family:var(--mono);font-weight:500;color:var(--ok);white-space:nowrap}
.stat-row.checking .v{color:var(--fg-3)}
.stat-row.dim{opacity:.4}
.spark{display:flex;align-items:flex-end;gap:2px;height:32px;margin-top:12px;margin-bottom:16px}
.spark i{flex:1;background:var(--accent);opacity:.35;border-radius:2px 2px 0 0;transition:height 1s var(--ease)}
.spark i:last-child{opacity:1}

/* design */
.design-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px;align-items:stretch}
.browser{background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.browser-bar{display:flex;gap:4px;padding:8px;border-bottom:1px solid var(--line)}
.browser-bar i{width:8px;height:8px;border-radius:9999px;background:var(--line-2)}
.canvas{padding:12px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.blk{border:1px dashed var(--line-2);border-radius:2px;min-height:20px;transition:all 1.1s var(--ease);background:transparent}
.blk.h{grid-column:span 3;min-height:44px}
.blk.t{grid-column:span 2;min-height:12px}
.blk.img{min-height:64px}
.styled .blk{border-style:solid;border-color:transparent;border-radius:8px}
.styled .blk.h{background:var(--fg)}
.styled .blk.t{background:var(--line-2)}
.styled .blk.img.a{background:var(--accent)}
.styled .blk.img.b2{background:var(--pop)}
.styled .blk.img.c{background:var(--accent-soft)}
.styled .blk.s{background:var(--surface-2)}
.spec{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:12px}
.aa{font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.03em}
.swatches{display:flex;gap:8px}
.sw{width:24px;height:24px;border-radius:9999px;border:1px solid var(--line)}
.spec small{font-family:var(--mono);font-size:12px;line-height:16px;color:var(--fg-3);margin-top:auto}

/* ops */
.ops{position:relative;min-height:216px}
.ops ul,.ops ol{list-style:none;margin:0;padding:0;position:absolute;inset:0;display:flex;flex-direction:column;gap:4px;transition:opacity 1.1s var(--ease),transform 1.1s var(--ease),filter 1.1s var(--ease)}
.messy li{font-size:12px;line-height:16px;padding:4px 8px;background:var(--surface);border:1px solid var(--line);border-radius:8px;width:max-content;max-width:100%;color:var(--fg-2)}
.messy li:nth-child(odd){margin-left:16px}.messy li:nth-child(3n){margin-left:40px}
.messy li s{color:var(--fg-3)}
.clean{justify-content:center;gap:8px!important}
.clean li{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;font-size:14px;line-height:20px;font-weight:600}
.clean li i{font-style:normal;font-family:var(--mono);font-size:12px;line-height:16px;width:24px;height:24px;border-radius:9999px;display:grid;place-items:center;background:var(--ok-soft);color:var(--ok)}
.ops .clean{opacity:0;transform:scale(.96);filter:blur(4px)}
.ops.fixed .messy{opacity:0;transform:scale(.9);filter:blur(6px)}
.ops.fixed .clean{opacity:1;transform:none;filter:none}
.ops-count{position:absolute;left:12px;bottom:8px;font-family:var(--mono);font-size:12px;line-height:16px;color:var(--fg-3)}

/* ai */
.tools{display:flex;flex-wrap:wrap;gap:4px}
.tool{font-size:12px;line-height:16px;font-weight:600;padding:4px 8px;border-radius:9999px;border:1px solid var(--line);background:var(--surface);color:var(--fg-3);transition:all 1s var(--ease)}
.tool.on{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.chat{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.bub{font-size:12px;line-height:16px;padding:8px 12px;border-radius:12px;max-width:88%;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.bub.q{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.bub.a{align-self:flex-start;background:var(--surface);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub.off{opacity:0;transform:translateY(8px)}
.typing{display:inline-flex;gap:4px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:12px;align-self:flex-start}
.typing span{width:4px;height:4px;border-radius:9999px;background:var(--fg-3);animation:blink 1.4s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:48px;list-style:none;padding:0}
.steps li{padding:24px;border-top:1px solid var(--line-2)}
.steps .n{font-family:var(--mono);font-size:14px;line-height:20px;color:var(--accent)}
.steps h3{font-size:20px;line-height:28px;margin-top:12px}
.steps p{color:var(--fg-2);margin-top:8px}

/* tagline */
.tagline{padding-top:96px;padding-bottom:96px}
.tagline p{font-size:60px;line-height:1;font-weight:700;max-width:880px;letter-spacing:-.035em}
.tagline .w{transition:color 1s var(--ease)}
.js-reveal .w{color:var(--muted-word)}
.js-reveal .w.lit{color:#FFFFFF}

/* offer */
.offer{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;margin-top:48px}
.offer-main{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px}
.incl{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.incl li{display:flex;gap:12px;align-items:flex-start;color:var(--fg-2)}
.incl svg{color:var(--ok);margin-top:2px}
.price-card{background:var(--deep);color:#FFFFFF;border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:16px}
.price-card .eyebrow{color:rgba(255,255,255,.72)}
.price-card .price{font-size:48px;line-height:1;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.price-card .badge{align-self:flex-start;font-size:12px;line-height:16px;font-weight:700;padding:4px 12px;border-radius:9999px;background:var(--pop);color:var(--on-pop)}
.price-card p{color:rgba(255,255,255,.82);font-size:14px;line-height:20px}
.price-card .btn{align-self:flex-start;margin-top:auto;background:#FFFFFF;color:#062A26}
.price-card .btn:hover{background:#DDF0EB;transform:translateY(-1px)}

/* about */
.about{display:grid;grid-template-columns:auto minmax(0,1fr);gap:32px;align-items:start;max-width:880px}
.avatar{width:80px;height:80px;border-radius:9999px;display:grid;place-items:center;background:var(--pop-soft);color:var(--fg);font-weight:700;font-size:24px}
.about h2{font-size:30px;line-height:36px}
.about p{color:var(--fg-2);margin-top:16px;font-size:18px;line-height:28px;max-width:640px}

/* faq */
.faq-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:48px;align-items:start}
.faq-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:16px}
.faq-side p{color:var(--fg-2);font-size:18px;line-height:28px;max-width:360px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:24px 0;font-size:18px;line-height:28px;font-weight:600}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{transition:transform .7s var(--ease);color:var(--fg-3)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding-bottom:24px;color:var(--fg-2);max-width:680px}

/* contact */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:start}
.contact h2{font-size:36px;line-height:40px}
.contact .intro p{color:var(--fg-2);margin-top:16px;font-size:18px;line-height:28px}
.contact .intro ul{list-style:none;padding:0;margin:24px 0 0;display:flex;flex-direction:column;gap:12px;color:var(--fg-2);font-size:14px;line-height:20px}
.contact .intro li{display:flex;gap:8px;align-items:center}
.contact .intro li svg{color:var(--ok)}
form{background:var(--bg);border:1px solid var(--line);border-radius:24px;padding:32px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field.full{grid-column:span 2}
label{font-size:14px;line-height:20px;font-weight:600}
input,select,textarea{font:inherit;font-size:16px;line-height:24px;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:8px 12px;width:100%;transition:border-color .6s var(--ease),box-shadow .6s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--line-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
textarea{min-height:120px;resize:vertical}
.err{font-size:12px;line-height:16px;color:var(--err);min-height:16px}
[aria-invalid="true"]{border-color:var(--err)}
.notice{grid-column:span 2;font-size:12px;line-height:16px;color:var(--fg-3)}
.form-actions{grid-column:span 2;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sent{grid-column:span 2;display:flex;gap:12px;align-items:flex-start;padding:16px;border-radius:12px;background:var(--ok-soft);color:var(--ok);font-size:14px;line-height:20px}

/* footer */
footer{background:var(--deep);color:#FFFFFF;padding-top:64px;padding-bottom:48px}
.foot-top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-bottom:48px;border-bottom:1px solid var(--deep-line)}
.foot-top p{font-size:30px;line-height:36px;font-weight:700;letter-spacing:-.02em;max-width:560px}
.foot-top .btn{background:var(--pop);color:var(--on-pop)}
.foot-top .btn:hover{background:#FFC75E}
.foot{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center;padding-top:24px;font-size:14px;line-height:20px;color:rgba(255,255,255,.7)}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
.foot a,.foot button{color:rgba(255,255,255,.7);text-decoration:none;background:none;border:0;padding:0;cursor:pointer;font-size:14px}
.foot a:hover,.foot button:hover{color:#FFFFFF}
footer :focus-visible{outline-color:#FFFFFF}

/* motion toggle */
.motion{position:fixed;z-index:45;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9999px;border:1px solid var(--line);background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:12px;line-height:16px;font-weight:600;color:var(--fg-2);cursor:pointer;transition:border-color .6s var(--ease),transform .6s var(--ease)}
.motion:hover{border-color:var(--line-2);color:var(--fg)}
.motion:active{transform:scale(.97)}
.motion svg{width:14px;height:14px}

/* dialog */
dialog{border:1px solid var(--line);border-radius:24px;padding:0;background:var(--surface);color:var(--fg);width:min(560px,calc(100% - 32px));max-height:calc(100% - 48px)}
dialog::backdrop{background:rgba(6,20,18,.42);backdrop-filter:blur(4px)}
dialog[open]{animation:pop .7s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.dlg{padding:32px;display:flex;flex-direction:column;gap:16px}
.dlg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.dlg h3{font-size:24px;line-height:32px;margin-top:8px}
.dlg p{color:var(--fg-2)}
.x{width:40px;height:40px;border-radius:9999px;border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer;flex:none}
.x:hover{border-color:var(--line-2)}
.dlg ol{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.dlg ol li{display:grid;grid-template-columns:24px 1fr;gap:12px;font-size:14px;line-height:20px;color:var(--fg-2)}
.dlg ol li b{color:var(--fg);display:block;font-weight:700}
.dlg ol .n{font-family:var(--mono);font-size:12px;line-height:20px;color:var(--accent)}
.meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:16px;border-top:1px solid var(--line)}
.meta div{font-size:14px;line-height:20px;color:var(--fg-2)}
.meta .eyebrow{display:block;margin-bottom:4px}

.rv{transition:transform 1s var(--ease)}
.rv.pending{transform:translateY(24px)}

@media (max-width:960px){
  .hero-grid{grid-template-columns:1fr}
  .hero h1{font-size:48px}
  .bento{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s4,.s6{grid-column:span 2}.s2,.s3{grid-column:span 1}
  .offer,.contact,.faq-layout{grid-template-columns:1fr}
  .faq-side{position:static}
  .tagline p{font-size:48px}
}
@media (max-width:780px){
  .navlinks,.pill .btn{display:none}
  .burger{display:block}
  .pill{gap:16px;padding:4px 4px 4px 16px}
}
@media (max-width:640px){
  .hero{padding-top:128px;padding-bottom:64px}
  .hero h1{font-size:36px;line-height:40px}
  .hero h1 br{display:none}
  .hero .sub{font-size:18px;line-height:28px}
  .sec,.tagline{padding-top:64px;padding-bottom:64px}
  .doors-band{padding-top:48px}
  .lead{font-size:30px;line-height:36px}
  .tagline p{font-size:36px;line-height:40px}
  .doors,.steps{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}
  .s4,.s2,.s3,.s6{grid-column:span 1}
  .design-grid,.sw-grid{grid-template-columns:1fr}
  .door,.offer-main,.price-card,form{padding:24px}
  form{grid-template-columns:1fr}
  .field.full,.notice,.form-actions,.sent{grid-column:span 1}
  .about{grid-template-columns:1fr}
  .meta{grid-template-columns:1fr}
  .pipe-track .node span{display:none}
  .link{margin-bottom:0}
  .row time{display:none}
  .card-head{flex-direction:column;gap:16px;padding:32px 24px 0}
  .card h3{font-size:22px;line-height:28px}
  .card .desc{font-size:16px;line-height:24px;margin-top:12px}
  .stage{margin:24px 16px 16px;padding-top:32px}
  .more{order:2;padding:8px 16px;font-size:14px;line-height:20px}
  .motion{width:40px;height:40px;padding:0;justify-content:center}
  .motion span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .foot-top p{font-size:24px;line-height:32px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation:none!important}
  html{scroll-behavior:auto}
  .motion{display:none}
}

/* handwritten notes */
.hn{position:absolute;margin:0;font-family:"Caveat","Bradley Hand","Segoe Print",cursive;font-size:24px;line-height:24px;font-weight:600;color:var(--accent);transform:rotate(-4deg);pointer-events:none;z-index:3;white-space:nowrap}
.hn-arrow{display:block;width:72px;height:36px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.panel-wrap{position:relative}
.hn-hero{left:24px;bottom:-76px;display:flex;align-items:flex-start;gap:8px;transform:rotate(-3deg)}
.hn-hero .hn-arrow{width:40px;height:40px;margin-top:-6px}
.stats{position:relative}
.hn-rule{position:static;display:flex;align-items:center;gap:4px;align-self:center;transform:rotate(-3deg)}
.hn-rule .hn-arrow{width:56px}
.price-row{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.price-card{position:relative}
.hn-price{position:static;color:var(--pop);display:flex;align-items:flex-end;gap:4px;transform:rotate(-5deg);padding-bottom:4px}
.hn-price .hn-arrow{width:44px;height:36px}
@media (max-width:960px){.hn-hero{position:static;margin:16px 0 8px 16px}.hn-hero .hn-arrow{transform:scaleY(-1);margin-top:4px}}
@media (max-width:640px){.hn-rule .hn-arrow{display:none}.hn{font-size:22px}}

/* ---------- inner pages ---------- */
.page-hero{padding-top:152px;padding-bottom:64px}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font-size:14px;line-height:20px;color:var(--fg-3);margin-bottom:24px;list-style:none;padding:0}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line-2)}
.crumbs a{text-decoration:none;color:var(--fg-2)}
.crumbs a:hover{color:var(--accent)}
.page-hero h1{font-size:52px;line-height:56px;letter-spacing:-.035em;max-width:880px}
.answer{font-size:20px;line-height:30px;color:var(--fg-2);max-width:720px;margin-top:24px}
.page-hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}
.updated{margin-top:16px;font-size:14px;line-height:20px;color:var(--fg-3)}
.demo-card{max-width:880px}
.demo-card .stage{margin:16px;padding-top:0}
.sec-head{display:flex;flex-direction:column;gap:12px;margin-bottom:40px;max-width:720px}
.sec-head h2{font-size:36px;line-height:40px}
.sec-head p{color:var(--fg-2);font-size:18px;line-height:28px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.box{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:32px;min-width:0}
.box h2,.box h3{font-size:22px;line-height:28px}
.box p{color:var(--fg-2);margin-top:12px}
.xlist{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:16px}
.xlist li{display:flex;gap:12px;align-items:flex-start;color:var(--fg-2)}
.xlist svg{color:var(--fg-3);margin-top:2px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tile{display:flex;flex-direction:column;gap:8px;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:24px;text-decoration:none;transition:border-color .7s var(--ease),transform .7s var(--ease);min-width:0}
.tile:hover{border-color:var(--line-2);transform:translateY(-2px)}
.tile h3{font-size:20px;line-height:28px}
.tile p{color:var(--fg-2);font-size:14px;line-height:20px}
.tile .textlink{margin-top:auto;padding-top:8px;font-size:14px}
.pains{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pain{padding:24px;border-radius:24px;background:var(--surface);border:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.pain .eyebrow{color:var(--accent)}
.pain h3{font-size:20px;line-height:28px}
.pain p{color:var(--fg-2)}
.pain a{color:var(--accent);font-weight:600;text-decoration:none;font-size:14px;line-height:20px;margin-top:auto;padding-top:8px}
.prose{max-width:720px}
.prose > * + *{margin-top:16px}
.prose h2{font-size:30px;line-height:36px;margin-top:56px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:20px;line-height:28px;margin-top:32px}
.prose p,.prose li{color:var(--fg-2);font-size:18px;line-height:30px}
.prose ul,.prose ol{padding-left:24px;display:flex;flex-direction:column;gap:8px}
.prose a{color:var(--accent);font-weight:600}
.prose strong{color:var(--fg)}
.callout{padding:16px 20px;border-radius:16px;background:var(--pop-soft);color:var(--fg);font-size:16px;line-height:24px}
.callout.soft{background:var(--accent-soft)}
.cta-band{background:var(--band);color:#FFFFFF}
.cta-band .inner{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;padding-top:64px;padding-bottom:64px}
.cta-band h2{font-size:36px;line-height:40px;max-width:640px}
.cta-band p{color:rgba(255,255,255,.82);margin-top:12px;font-size:18px;line-height:28px;max-width:560px}
.cta-band .btn{background:var(--pop);color:var(--on-pop)}
.cta-band .btn:hover{background:#FFC75E}
.towns{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:24px 0 0;padding:0}
.towns li{padding:8px 16px;border-radius:9999px;background:var(--surface);border:1px solid var(--line);font-weight:600;font-size:14px;line-height:20px}
.about-hero{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:center}
.photo-slot{aspect-ratio:4/5;max-width:100%;border-radius:24px;background:var(--pop-soft);display:grid;place-items:center;text-align:center;padding:24px;color:var(--fg-2);font-size:14px;line-height:20px;border:2px dashed var(--line-2)}
.photo-slot b{display:block;font-size:48px;line-height:56px;color:var(--fg);margin-bottom:8px}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.price-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tier{display:flex;flex-direction:column;gap:12px;padding:32px;border-radius:24px;background:var(--surface);border:1px solid var(--line)}
.tier.feature{background:var(--deep);color:#FFFFFF;border-color:transparent}
.tier.feature p,.tier.feature li{color:rgba(255,255,255,.82)}
.tier.feature .eyebrow{color:rgba(255,255,255,.7)}
.tier .big{font-size:40px;line-height:44px;font-weight:700;letter-spacing:-.03em}
.tier .big small{font-size:16px;font-weight:600;letter-spacing:0}
.tier ul{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.tier li{display:flex;gap:8px;color:var(--fg-2);font-size:14px;line-height:20px}
.tier li svg{width:16px;height:16px;color:var(--ok);margin-top:2px}
.tier.feature li svg{color:var(--pop)}
.tier .btn{align-self:flex-start;margin-top:auto}
.tier.feature .btn{background:#FFFFFF;color:#062A26}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px;padding-top:48px;padding-bottom:48px;border-bottom:1px solid var(--deep-line)}
.foot-cols h4{margin:0 0 16px;font-family:var(--mono);font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:500}
.foot-cols ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.foot-cols a{color:rgba(255,255,255,.82);text-decoration:none;font-size:14px;line-height:20px}
.foot-cols a:hover{color:#FFFFFF}
.err-hero{padding-top:200px;padding-bottom:120px}
@media (max-width:960px){
  .split,.about-hero{grid-template-columns:1fr}
  .tiles,.price-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .page-hero{padding-top:120px;padding-bottom:48px}
  .page-hero h1{font-size:36px;line-height:40px}
  .answer{font-size:18px;line-height:28px}
  .tiles,.price-tiers,.pains,.facts{grid-template-columns:1fr}
  .box,.tier{padding:24px}
  .sec-head h2,.cta-band h2{font-size:30px;line-height:36px}
  .prose p,.prose li{font-size:17px;line-height:28px}
  .demo-card .stage{margin:12px}
}

/* page transitions: cross-document view transitions where supported */
@view-transition{navigation:auto}
.nav{view-transition-name:site-nav}
::view-transition-old(root){animation:vt-out .22s cubic-bezier(0.32,0.72,0,1) both}
::view-transition-new(root){animation:vt-in .5s cubic-bezier(0.32,0.72,0,1) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(12px)}}
/* fallback for browsers without them: fade the page out before leaving */
body{transition:opacity .2s cubic-bezier(0.32,0.72,0,1)}
body.leaving{opacity:0}
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none}
  body{transition:none}
}

/* review fixes */
.door h2.door-h{font-size:24px;line-height:32px;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.foot-contact{margin-top:12px;font-size:16px;line-height:24px;color:rgba(255,255,255,.82)}
.foot-contact a,.foot a{color:inherit}
.contact-direct{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:24px}
.panel-head > div{min-width:0}
.panel-head small,.panel-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:24px}
.guide-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:64px;align-items:start}
.guide-side{position:sticky;top:120px;display:flex;flex-direction:column;gap:16px}
.guide-side .box{padding:24px}
.toc{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.toc a{color:var(--fg-2);text-decoration:none;font-size:14px;line-height:20px}
.toc a:hover{color:var(--accent)}
.side-cta h2{font-size:20px;line-height:28px}
.side-cta p{font-size:14px;line-height:20px}
.side-cta .btn{margin-top:16px}
.prose h2[id]{scroll-margin-top:120px}
.demo-wrap{position:relative}
.hn-demo{position:static;display:flex;align-items:flex-start;gap:4px;margin:0 0 12px 24px;transform:rotate(-2deg)}
.hn-demo .hn-arrow{width:44px;height:36px;margin-top:8px}
@media (max-width:960px){.guide-layout{grid-template-columns:1fr}.guide-side{position:static}}
@media (max-width:640px){.scribble svg{bottom:-10px;height:16px}}
.sent.is-error{background:var(--pop-soft);color:var(--fg)}
.scribble{isolation:isolate}
.panel-head > div > div{min-width:0}

/* photos */
.photo-band{padding-bottom:96px}
.photo-fig{margin:0;display:flex;flex-direction:column;gap:12px}
.photo-fig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:24px;background:var(--surface-2);filter:saturate(.92)}
.photo-fig.wide img{aspect-ratio:21/9}
.photo-fig figcaption{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:0 8px}
.hn-cap{position:static;transform:rotate(-2deg);white-space:normal}
.credit{font-size:12px;line-height:16px;color:var(--fg-3);margin-left:auto}
.credit a{color:inherit}
.prose .photo-fig{margin-top:48px}
.avatar-photo{width:80px;height:80px;border-radius:9999px;object-fit:cover}
@media (max-width:640px){.photo-band{padding-bottom:64px}.photo-fig.wide img{aspect-ratio:4/3}.photo-fig img{border-radius:16px}}

/* photo mosaic on the homepage */
.mosaic-head{margin:0 0 24px 8px}
.mosaic{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;border-radius:24px;overflow:hidden}
.tile-photo{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;text-decoration:none;background:var(--surface-2)}
.tile-photo img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);transition:transform 1s cubic-bezier(0.32,0.72,0,1)}
.tile-photo:hover img{transform:scale(1.04)}
.tile-photo:focus-visible{outline-offset:-4px}
.tp-label{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:9999px;background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:var(--fg);font-size:14px;line-height:20px;font-weight:600}
.tp-label svg{width:14px;height:14px}
.mosaic-credit{display:block;margin:12px 8px 0;text-align:right}
@media (max-width:640px){.mosaic{grid-template-columns:repeat(2,minmax(0,1fr));border-radius:16px}.tile-photo{aspect-ratio:1/1}.tp-label{left:8px;bottom:8px;font-size:12px;line-height:16px;padding:4px 10px}.mosaic-credit{text-align:left}}