/* home.css — the new home page: the first screen (hero, stage, phone, window), the three beats (how-), the bento (bn-),
   the last door (fin-). Everything uses the tokens and recipes of kit.css. The chapters that moved to /day/ keep their own sheets. */

/* ── the first screen ───────────────────────────────────────────────────────────────────────────────────────────────── */
.hero{position:relative;isolation:isolate;overflow:clip;padding:clamp(108px,15vh,150px) 0 calc(clamp(64px,9vh,110px) + var(--k-lap));background:var(--k-gold-ground);color:var(--plum-600)}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.9;mix-blend-mode:overlay;background-image:url(/assets/clay/grain-gold.webp);background-size:512px}
.hero::after{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;background:radial-gradient(36% 32% at 32% 30%,rgba(255,250,215,.6),rgba(255,250,215,0) 70%);animation:hero-sweep 16s ease-in-out infinite alternate}
@keyframes hero-sweep{to{transform:translate3d(34%,12%,0)}}
.hero-in{width:min(var(--max),100% - 2*var(--gutter));margin-inline:auto;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(20px,4vw,60px);align-items:center;min-height:min(780px,calc(100svh - 190px))}
.hero-copy{position:relative;z-index:2}
.hero-eyebrow{color:var(--plum-500)}
.hero h1{margin-top:20px;font-size:clamp(2.55rem,4.9vw,4.8rem);color:var(--plum-600);text-shadow:0 2px 0 rgba(255,255,255,.4),0 10px 22px rgba(140,70,0,.18)}
.hl{position:relative;display:inline-block;margin:.04em .04em .12em;padding:.02em .28em .1em;color:var(--cream-50);white-space:nowrap;border-radius:.46em;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow);text-shadow:0 2px 0 rgba(20,0,10,.35);transform:rotate(-1.8deg);transform-origin:20% 90%}
.hl::after{content:"";position:absolute;inset-inline-end:.2em;bottom:-.27em;width:.46em;height:.4em;background:var(--plum-600);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M0 0H72C74 34 84 62 100 90C52 82 14 52 0 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M0 0H72C74 34 84 62 100 90C52 82 14 52 0 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero-sub{margin-top:24px;max-width:30em;font-size:clamp(1.08rem,1.4vw,1.28rem);color:var(--ink-2);text-wrap:pretty}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
/* the stage: the same workspace twice — the browser inside the laptop and the chat on the phone, side by side. The phone stands
   in front of the laptop's base and bezel only, so neither screen hides the other; hero-demo.js fills both with the same example. */
.hero-show{position:relative;min-width:0;--bleed:0px}
.stage{position:relative;container-type:inline-size;width:calc(100% + var(--bleed));max-width:760px;margin-inline:auto;aspect-ratio:100/77;--mx:0;--my:0}
.st-glow{position:absolute;inset:0 4% 6% 2%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,252,228,.9),rgba(255,252,228,0));filter:blur(6px)}
.st-floor{position:absolute;inset-inline:0 -2%;bottom:0;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(110,50,0,.32),rgba(110,50,0,0));filter:blur(8px)}
.px{position:absolute;transform:translate3d(calc(var(--mx)*var(--d,10)*1px),calc(var(--my)*var(--d,10)*1px),0);transition:transform .45s var(--ease);will-change:transform}
.px--1{--d:6}.px--2{--d:12}.px--3{--d:22}
/* in stage-width units (the stage is 100 × 77): the laptop 97 wide from -15 (its body -6 → 74, its screen 2 → 65), the phone 35 wide
   from 67, standing a little in front of the laptop's base; the clay things keep to the corners the screens leave free */
.px-wn{inset-inline-start:-15%;top:14.5%;width:97%;z-index:1}
.px-ph{inset-inline-start:67%;top:3.5%;width:35%;z-index:3}
.px-t1{inset-inline-start:-4%;top:1%;width:11%;z-index:4}
.px-t3{inset-inline-start:-6%;bottom:2%;width:11%;z-index:4}
.px-bd{inset-inline-start:46%;top:-1%;width:13%;z-index:5}
.st-tile{width:100%;border-radius:23%;box-shadow:0 22px 28px -14px rgba(90,40,0,.55),0 5px 9px -2px rgba(90,40,0,.25),inset 0 0 0 1px rgba(255,255,255,.35);animation:k-float 7s ease-in-out infinite}
.st-tile--1{--r:-9deg;transform:rotate(-9deg)}
.st-badge{width:100%;--r:-8deg;transform:rotate(-8deg);filter:drop-shadow(0 26px 22px rgba(70,8,36,.45));animation:k-float 6.5s ease-in-out infinite}
.st-spark{position:absolute;inset-inline-start:0;top:0;width:4.4cqw;height:auto;margin-block:-2.2cqw 0; margin-inline:-2.2cqw 0;z-index:7;pointer-events:none;filter:drop-shadow(0 0 1.4cqw rgba(255,240,170,.95))}
.st-star{position:absolute;height:auto;z-index:6;filter:drop-shadow(0 8px 8px rgba(120,60,0,.35));animation:k-twinkle 3.4s ease-in-out infinite}
.st-star--1{inset-inline-start:-9%;top:48%;width:4.2%}
.st-star--2{inset-inline-start:61.5%;top:13%;width:4%;animation-delay:-1.2s}
.st-star--3{inset-inline-start:38%;bottom:0;width:3.4%;animation-delay:-2.2s}

/* one small line under the two screens: what the picture means */
.hero-sync{position:relative;z-index:8;margin:clamp(6px,1.2vw,16px) auto 0;max-width:34rem;font:600 .875rem/1.4 var(--text);color:var(--plum-600);text-align:center;text-wrap:balance}
.hero-sync svg{display:inline-block;width:18px;height:18px;margin-inline-end:7px;vertical-align:-4px;fill:none;stroke:var(--plum-500);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* The generated hardware contains no UI: this measured aperture holds the existing localized demo. */
.lp{position:relative;aspect-ratio:3/2;transform:perspective(1600px) rotateY(5deg);transform-origin:70% 50%}
.lp-frame{display:block;width:100%;height:auto;pointer-events:none}
.lp-screen{position:absolute;inset-block-start:10.8%;inset-inline-start:17.8%;width:64.8%;height:57.7%;overflow:hidden;border-radius:.4%}
/* The workspace, in miniature: the browser bar, the rail of rooms, today's two numbers, the same cards the phone talks about and
   the workspace's own ask line. Sized in cqw so it reads the same at every width (the screen is 1.68 wide to 1 high). */
.wn{container-type:inline-size;position:relative;height:100%;border-radius:.4cqw;background:linear-gradient(180deg,#fffaf0,#fff2d4);overflow:hidden}
.wn-top{display:flex;align-items:center;gap:1.4cqw;height:6.4cqw;padding:0 2.4cqw;background:linear-gradient(180deg,#fff6e0,#fdebc4);border-bottom:1px solid rgba(100,8,46,.08)}
.wn-top i{width:1.5cqw;height:1.5cqw;border-radius:50%;background:#f3c7a0;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.wn-top i:nth-child(2){background:#f7d977}.wn-top i:nth-child(3){background:#b9dba0}
.wn-url{margin-inline-start:2cqw;padding:.8cqw 2.6cqw;border-radius:999px;background:rgba(100,8,46,.07);font:600 2cqw/1 var(--text);color:var(--ink-3)}
.wn-ex{margin-inline-start:auto;padding:.7cqw 1.6cqw;border-radius:999px;background:rgba(100,8,46,.08);font:650 1.6cqw/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.wn-body{display:grid;grid-template-columns:9cqw minmax(0,1fr);height:calc(100% - 6.4cqw)}
.wn-rail{display:grid;align-content:start;justify-items:center;gap:1.8cqw;padding:2.2cqw 0;background:rgba(100,8,46,.05)}
.wn-rail img{width:5.8cqw;height:auto;border-radius:23%;box-shadow:0 .8cqw 1.4cqw -.6cqw rgba(90,40,0,.4)}
.wn-main{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:1.4cqw;padding:2.2cqw 2.6cqw 2cqw;min-width:0;min-height:0}
.wn-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.6cqw}
.wn-stats>div{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:.4cqw 1.4cqw;padding:1.2cqw 1.8cqw;border-radius:2cqw;background:#fff;box-shadow:inset 0 1px 0 #fff,0 1cqw 2cqw -1.2cqw rgba(90,40,0,.4)}
.wn-stats small{grid-column:1/-1;font:650 2.2cqw/1.1 var(--text);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wn-stats b{font:800 4.6cqw/1 var(--display);letter-spacing:-.03em;color:var(--plum-600);white-space:nowrap}
.wn-stats i{min-width:0;font:650 2.2cqw/1 var(--text);font-style:normal;color:#2f7a4d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wn-feed{display:grid;align-content:start;gap:1cqw;min-height:0;overflow:hidden}
.wn-it{display:flex;align-items:center;gap:1.6cqw;padding:1.1cqw 1.6cqw;border-radius:2cqw;background:#fff;box-shadow:inset 0 1px 0 #fff,0 1cqw 2cqw -1.2cqw rgba(90,40,0,.4);animation:k-pop .6s var(--spring) both}
.wn-it.is-flash{box-shadow:inset 0 1px 0 #fff,0 0 0 .5cqw rgba(250,201,63,.95),0 1.4cqw 3cqw -1cqw rgba(200,130,0,.6)}
.wn-ic{display:grid;place-items:center;width:5cqw;height:5cqw;border-radius:50%;background:var(--k-gold-clay);flex:none}
.wn-ic svg{width:3.2cqw;height:3.2cqw;fill:none;stroke:var(--plum-700);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wn-tx{display:grid;gap:.35cqw;min-width:0;flex:1}
.wn-tx b{font:700 2.8cqw/1.2 var(--text);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wn-tx i{font:500 2.3cqw/1.2 var(--text);font-style:normal;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wn-btn{padding:1.1cqw 2.2cqw;border-radius:999px;background:var(--k-plum-clay);box-shadow:var(--k-plum-shadow);font:700 2.3cqw/1 var(--display);color:var(--cream-50);flex:none;white-space:nowrap}
.wn-btn.is-done{background:#e5f2d9;box-shadow:inset 0 1px 0 #fff;color:#2f7a4d}
.wn-cmd{display:flex;align-items:center;gap:1.4cqw;padding:1cqw 1.6cqw;border-radius:999px;background:rgba(100,8,46,.06);font:500 2.2cqw/1 var(--text);color:var(--ink-3)}
.wn-slash{display:grid;place-items:center;width:3.8cqw;height:3.8cqw;border-radius:1cqw;background:#fff;box-shadow:0 .4cqw .8cqw -.4cqw rgba(90,40,0,.4);font:700 2.2cqw/1 var(--display);color:var(--plum-600)}
/* a small screen (the laptop on a phone): bigger words, the ask line steps aside so the three cards keep their room */
@container (max-width:330px){
  .wn-top{height:7.4cqw}.wn-url{font-size:2.6cqw}.wn-ex{font-size:2cqw}
  .wn-body{height:calc(100% - 7.4cqw)}
  .wn-main{grid-template-rows:auto minmax(0,1fr);padding:2.2cqw 2.4cqw 2cqw}
  .wn-cmd{display:none}
  .wn-stats small{font-size:2.8cqw}.wn-stats b{font-size:5.4cqw}.wn-stats i{font-size:2.8cqw}
  .wn-tx b{font-size:3.4cqw}.wn-tx i{font-size:2.9cqw}.wn-ic{width:6cqw;height:6cqw}.wn-ic svg{width:3.8cqw;height:3.8cqw}.wn-btn{font-size:2.9cqw}
}

/* the phone: a plum clay body, a cream screen, the demo conversation */
.ph{container-type:inline-size;position:relative;aspect-ratio:9/18.6;transform:perspective(1400px) rotateY(-7deg) rotateZ(1.5deg);transform-origin:50% 100%}
.ph-body{position:absolute;inset:0;padding:2.7cqw;border-radius:14.5cqw;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow),inset 0 0 0 .5cqw rgba(255,255,255,.07),0 60px 70px -34px rgba(60,6,30,.7)}
.ph-btn{position:absolute;width:1.1cqw;border-radius:1cqw;background:linear-gradient(90deg,#7a0f44,#a3205f);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.ph-btn--1{inset-inline-start:-.7cqw;top:20%;height:6cqw}.ph-btn--2{inset-inline-start:-.7cqw;top:29%;height:10cqw}.ph-btn--3{inset-inline-end:-.7cqw;top:26%;height:14cqw}
.ph-screen{position:relative;display:flex;flex-direction:column;height:100%;border-radius:12cqw;overflow:hidden;background:#fff4dc;box-shadow:inset 0 0 0 .4cqw rgba(0,0,0,.18),inset 0 1cqw 2cqw rgba(60,6,30,.12)}
.ph-screen::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(118deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,0) 32%)}
.ph-island{position:absolute;inset-inline-start:50%;top:2.4cqw;width:27cqw;height:7.4cqw;margin-inline-start:-13.5cqw;border-radius:5cqw;background:#1a0510;z-index:3}
.ph-bar{display:flex;align-items:center;gap:3cqw;padding:12cqw 4.4cqw 3cqw;background:linear-gradient(180deg,#fffaf0,#fff0cf);box-shadow:0 .6cqw 1.6cqw -1cqw rgba(90,40,0,.3);position:relative;z-index:2}
.ph-av{width:10.4cqw;height:10.4cqw;border-radius:50%;background:var(--cream-50);box-shadow:inset 0 0 0 .5cqw rgba(100,8,46,.1),0 .8cqw 1.4cqw -.6cqw rgba(90,40,0,.4);display:grid;place-items:center;flex:none}
.ph-av img{width:7.6cqw;height:auto}
.ph-who{display:grid;gap:.5cqw;min-width:0;flex:1}
.ph-who b{font:750 4.4cqw/1 var(--display);color:var(--plum-600);letter-spacing:-.01em}
.ph-who small{font:500 2.9cqw/1.1 var(--text);color:#2f7a4d}
.ph-ex{padding:1.2cqw 2.4cqw;border-radius:999px;background:rgba(100,8,46,.08);font:650 2.3cqw/1 var(--text);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.ph-chat{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:2.2cqw;padding:3.4cqw 3.6cqw;overflow:hidden;background-color:#fdf0d2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cpath d='M28 22 29.600 26.400 34 28 29.600 29.600 28 34 26.400 29.600 22 28 26.400 26.400Z' fill='%23d9a441' fill-opacity='.22'/%3E%3C/svg%3E")}
.msg{position:relative;max-width:88%;padding:2.5cqw 3.3cqw 2.1cqw;border-radius:4.4cqw;font-size:4.2cqw;line-height:1.34;animation:msg-in .55s var(--spring) both}
@keyframes msg-in{from{opacity:0;transform:translateY(3cqw) scale(.94)}to{opacity:1;transform:none}}
.msg p{margin:0}
.msg small{display:block;margin-top:.8cqw;text-align:end;font:500 2.6cqw/1 var(--text);opacity:.55}
.msg--bot{align-self:flex-start;background:#fff;color:var(--ink);border-end-start-radius:1.2cqw;box-shadow:0 .5cqw 0 rgba(0,0,0,.03),0 2.6cqw 4cqw -2.6cqw rgba(110,50,0,.4)}
.msg--me{align-self:flex-end;background:var(--k-gold-clay);color:var(--plum-700);border-end-end-radius:1.2cqw;box-shadow:var(--k-gold-shadow)}
.ph-day{align-self:center;padding:1cqw 3cqw;border-radius:999px;background:rgba(255,255,255,.7);font:650 2.6cqw/1 var(--text);color:var(--ink-3);box-shadow:0 .4cqw .8cqw -.4cqw rgba(90,40,0,.3)}
.ph-chat.is-out{opacity:0;transition:opacity .6s}
.ph-chat{transition:opacity .4s}
.msg--typing{display:flex;gap:1.2cqw;padding:3.2cqw 3.6cqw}
.msg--typing i{width:2cqw;height:2cqw;border-radius:50%;background:rgba(100,8,46,.35);animation:typing 1s ease-in-out infinite}
.msg--typing i:nth-child(2){animation-delay:.15s}.msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(-1.2cqw);opacity:1}}
.msg--voice{display:flex;align-items:center;gap:2.4cqw;padding:2.2cqw 3cqw}
.msg--voice .vp{display:grid;place-items:center;width:7.6cqw;height:7.6cqw;border-radius:50%;background:var(--k-plum-clay);flex:none}
.msg--voice .vp svg{width:3.4cqw;height:3.4cqw;fill:var(--cream-50)}
.msg--voice .vwave{display:flex;align-items:center;gap:.6cqw;height:6cqw}
.msg--voice .vwave i{display:block;width:.9cqw;border-radius:1cqw;background:rgba(74,10,40,.55)}
.msg--voice small{margin:0}
.msg--voice p{font-size:3.5cqw;line-height:1.3}
.work{display:grid;gap:1.4cqw;margin:2cqw 0 .6cqw}
.work li{display:flex;align-items:center;gap:2cqw;font-size:3.4cqw;line-height:1.25;color:var(--ink-2);animation:msg-in .45s var(--spring) both}
.work li svg{width:3.8cqw;height:3.8cqw;flex:none;border-radius:50%;background:#2f9a62;padding:.7cqw;fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.acts{display:flex;gap:2cqw;margin-top:2.2cqw}
.acts button{padding:2cqw 4.2cqw;border-radius:999px;font:700 3.5cqw/1 var(--display);cursor:pointer;transition:transform .2s var(--spring)}
.acts .yes{color:var(--cream-50);background:var(--k-plum-clay);box-shadow:var(--k-plum-shadow)}
.acts .no{color:var(--plum-600);box-shadow:inset 0 0 0 .5cqw rgba(100,8,46,.35)}
.acts .yes.is-press{transform:scale(.92);filter:brightness(1.2)}
.chipk{display:inline-flex;align-items:center;gap:1.6cqw;margin-top:2cqw;padding:1.8cqw 3.4cqw;border-radius:999px;background:var(--k-gold-clay);box-shadow:var(--k-gold-shadow);font:700 3.3cqw/1 var(--display);color:var(--plum-700)}
.ph-in{display:flex;align-items:center;gap:2.4cqw;margin:0 3cqw 3.4cqw;padding:2cqw 3cqw;border-radius:999px;background:#fff;box-shadow:inset 0 1px 0 #fff,0 1.4cqw 2.6cqw -1.6cqw rgba(90,40,0,.5);position:relative;z-index:2}
.ph-field{flex:1;font:500 3.3cqw/1 var(--text);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-ico svg,.ph-mic svg{width:5cqw;height:5cqw;fill:none;stroke:var(--plum-600);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ph-mic{display:grid;place-items:center;width:7.4cqw;height:7.4cqw;border-radius:50%;background:var(--k-plum-clay);flex:none}
.ph-mic svg{stroke:var(--cream-50);width:4cqw;height:4cqw}

/* two columns from 1101 px: the stage takes a little of the gutter on its end side, never the laptop's corner */
@media (min-width:1101px){.hero-show{--bleed:clamp(0px,1vw,20px)}.stage{max-width:none;margin-inline:0 calc(-1*var(--bleed))}}
@media (max-width:1100px){
  .hero-in{grid-template-columns:minmax(0,1fr);min-height:0;gap:clamp(28px,4vw,44px)}
  .hero-copy{text-align:start}
  /* one column: the laptop's body reaches 6 % past the stage's start and the phone 2 % past its end, so the stage keeps a margin
     for both and moves a little toward its end to centre the pair */
  .stage{width:min(760px,90%);inset-inline-start:2%}
}
/* a phone: the laptop across the full width, the phone below its screen standing on the keyboard — both whole, both readable; the
   corner the phone leaves free holds the badge and the one line that says what the picture means */
@media (max-width:640px){
  .hero{padding-top:104px}
  .hero-in{gap:14px}
  .hero-show{width:100%;max-width:440px;margin-inline:auto}
  .stage{width:100%;inset-inline-start:0;aspect-ratio:100/171}
  .px-wn{inset-inline-start:-9%;top:0;width:118%}
  .px-ph{inset-inline-start:43%;top:32.2%;width:55%}
  .px-t1,.px-t3,.st-star--2{display:none}
  .px-bd{inset-inline-start:5%;top:47%;width:25%}
  .st-star--1{inset-inline-start:29%;top:46%;width:6%}.st-star--3{inset-inline-start:3%;bottom:5%;width:5%}
  .st-glow{inset:30% 0 0 0}
  .st-floor{inset-inline:36% -2%;height:4%}
  .hero-sync{position:absolute;inset-inline-start:0;top:63%;width:39%;margin:0;font-size:.875rem;text-align:start;text-wrap:pretty}
  .hero-sync svg{display:block;width:22px;height:22px;margin-block-end:8px}
  .hero-cta{margin-top:26px}
  .hero-sub{margin-top:18px}
}

/* ── how it works: three paper cards on plum ──────────────────────────────────────────────────────────────────────── */
.sec-head{max-width:46rem;margin-bottom:clamp(34px,5vw,64px)}
.sec-head .k-h2{margin-top:18px}
.sec-head .k-lead{margin-top:18px}
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,26px)}
.how-card{--ink:#2a0a1c;--ink-2:#5b2a44;--ink-3:#7a4a62;position:relative;display:flex;flex-direction:column;gap:12px;padding:26px 26px 26px;border-radius:var(--r-xl);background:var(--k-paper);box-shadow:var(--k-paper-shadow),0 40px 60px -34px rgba(0,0,0,.6);color:var(--ink);transition:transform .45s var(--spring)}
.how-card:hover{transform:translateY(-6px)}
.how-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.how-star{height:auto;width:54px;filter:drop-shadow(0 10px 8px rgba(130,70,0,.4))}
.how-n{font:800 3.6rem/1 var(--display);letter-spacing:-.05em;color:rgba(100,8,46,.1)}
.how-card h3{color:var(--plum-600)}
.how-card>p{color:var(--ink-2);font-size:1.03rem}
.hv{margin-top:auto;padding-top:14px}
.hv-pills{display:flex;flex-wrap:wrap;gap:8px}
.hv-pills span{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:var(--cream-200);box-shadow:inset 0 1px 0 #fff;font:650 .8125rem/1 var(--display);color:var(--plum-600)}
.hv-pills svg{width:16px;height:16px;fill:none;stroke:var(--plum-600);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hv-bub{margin-block:14px 0; margin-inline:auto 0;max-width:92%;padding:13px 16px;border-start-start-radius:20px; border-start-end-radius:20px; border-end-end-radius:5px; border-end-start-radius:20px;background:var(--k-gold-clay);box-shadow:var(--k-gold-shadow);color:var(--plum-700);font-weight:600;font-size:.98rem;line-height:1.35}
.hv-faces{display:flex;margin-bottom:14px}
.hv-faces img{width:54px;height:54px;border-radius:50%;object-fit:cover;border:3px solid var(--cream-50);box-shadow:0 8px 12px -6px rgba(90,40,0,.5);margin-inline-start:-12px}
.hv-faces img:first-child{margin-inline-start:0}
.hv-steps{display:grid;gap:9px}
.hv-steps li{display:flex;align-items:center;gap:10px;font-size:.95rem;color:var(--ink-2)}
.hv-steps li::before{content:"";width:20px;height:20px;flex:none;border-radius:50%;background:#2f9a62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}
.hv-ok{padding:18px;border-radius:24px;background:var(--cream-200);box-shadow:inset 0 1px 0 #fff,inset 0 -3px 0 rgba(160,100,20,.1)}
.hv-ok p{font:700 1.02rem/1.3 var(--display);color:var(--plum-600)}
.hv-row{display:flex;align-items:center;gap:10px;margin-top:14px}
.hv-chip{padding:9px 14px;border-radius:999px;box-shadow:inset 0 0 0 2px rgba(100,8,46,.3);font:650 .875rem/1 var(--display);color:var(--plum-600)}
.how-free{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:clamp(30px,4vw,48px);font:600 1.02rem/1.3 var(--text);color:var(--gold-200)}
.how-free img{height:auto}
.how-free img:nth-child(1){width:24px}.how-free img:nth-child(2),.how-free img:nth-child(3){width:15px;margin-inline-end:2px}
@media (max-width:900px){.how-grid{grid-template-columns:minmax(0,1fr);max-width:520px}}

/* ── the bento ───────────────────────────────────────────────────────────────────────────────────────────────────── */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.6vw,20px)}
.bn{--ink:#2a0a1c;--ink-2:#5b2a44;--ink-3:#7a4a62;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:8px;min-height:250px;padding:26px 26px 24px;border-radius:var(--r-xl);text-decoration:none;color:var(--ink);background:var(--k-paper);box-shadow:var(--k-paper-shadow);transition:transform .45s var(--spring),box-shadow .35s}
.bn:hover{transform:translateY(-5px)}
.bn.k-card--plum{--ink:#fff5de;--ink-2:#ecd2c4;background:var(--k-grain-light),var(--k-plum-clay);box-shadow:var(--k-plum-shadow);color:var(--cream-100)}
.bn.k-card--gold{background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow);color:var(--plum-700)}
.bn h3{color:inherit}
.bn>p{color:inherit;opacity:.82;font-size:1rem;max-width:30em}
.bn:not(.k-card--plum):not(.k-card--gold) h3{color:var(--plum-600)}
.bn:not(.k-card--plum):not(.k-card--gold)>p{color:var(--ink-2);opacity:1}
.bn-num{font:800 clamp(3.2rem,5.2vw,4.8rem)/.9 var(--display);letter-spacing:-.05em}
.bn--chat{grid-column:1/6;grid-row:1/3}
.bn--rooms{grid-column:6/13}
.bn--club{grid-column:6/9}
.bn--proc{grid-column:9/13}
.bn--boss{grid-column:1/6}
.bn--proof{grid-column:6/9}
.bn--money{grid-column:9/13}
.bn-go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;font:650 .9375rem/1 var(--display);color:var(--plum-500)}
.bn-go::after{content:"→";transition:transform .3s var(--spring)}
.bn.k-card--plum .bn-go{color:var(--gold-300)}
.bn:hover .bn-go::after{transform:translateX(5px)}
.bn-bar{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 12px;border-radius:18px;background:rgba(255,245,222,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.bn-bar img{width:34px;height:auto;border-radius:50%;background:var(--cream-50);padding:3px}
.bn-bar b{font:700 .95rem/1 var(--display);white-space:nowrap}
.bn-bar small{margin-inline-start:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:500 .75rem/1 var(--text);color:#bfe8c9}
.bn-chat{display:grid;gap:10px;padding-top:12px}
.bn-chat .bm{max-width:90%;padding:11px 15px;border-radius:18px;font-size:.95rem;line-height:1.35}
.bn-chat .bm--me{justify-self:end;background:var(--k-gold-clay);box-shadow:var(--k-gold-shadow);color:var(--plum-700);border-end-end-radius:5px;font-weight:600}
.bn-chat .bm--bot{justify-self:start;background:rgba(255,245,222,.96);color:#2a0a1c;border-end-start-radius:5px}
.bn-chat .bm--bot span{display:flex;gap:8px;margin-top:9px}
.bn-chat .bm--bot b{padding:7px 14px;border-radius:999px;font:700 .8125rem/1 var(--display)}
.bn-chat .bm--bot b:first-child{background:var(--k-plum-clay);color:var(--cream-50);box-shadow:var(--k-plum-shadow)}
.bn-chat .bm--bot b:last-child{box-shadow:inset 0 0 0 2px rgba(100,8,46,.3);color:var(--plum-600)}
.bn-tiles{display:flex;gap:12px;margin-top:auto;padding:14px 0 12px}
.bn-tiles img{flex:1;min-width:0;border-radius:23%;box-shadow:0 14px 18px -10px rgba(90,40,0,.5);transition:transform .45s var(--spring)}
.bn-tiles img:nth-child(odd){transform:translateY(8px) rotate(-3deg)}
.bn-tiles img:nth-child(even){transform:translateY(-4px) rotate(3deg)}
.bn--rooms:hover .bn-tiles img{transform:translateY(-6px) rotate(0)}
.bn-faces{display:flex;margin-top:auto;padding-top:12px}
.bn-faces img{width:58px;height:58px;border-radius:50%;object-fit:cover;border:3px solid #ffe9a0;box-shadow:0 10px 14px -8px rgba(110,50,0,.6);margin-inline-start:-14px}
.bn-faces img:first-child{margin-inline-start:0}
.bn-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:12px}
.bn-chips span{padding:9px 14px;border-radius:999px;background:var(--cream-200);box-shadow:inset 0 1px 0 #fff;font:650 .8125rem/1 var(--display);color:var(--plum-600)}
.bn-lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:auto;padding-top:14px}
.bn-lanes li{display:grid;gap:3px;padding:14px 14px 13px;border-radius:20px}
.bn-lanes b{font:750 .95rem/1.15 var(--display)}
.bn-lanes i{font:500 .8125rem/1.25 var(--text);font-style:normal;opacity:.85}
.bn-lanes .l1{background:var(--k-gold-clay);box-shadow:var(--k-gold-shadow);color:var(--plum-700)}
.bn-lanes .l2{background:var(--cream-200);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 2px rgba(100,8,46,.18);color:var(--plum-600)}
.bn-lanes .l3{background:var(--k-plum-clay);box-shadow:var(--k-plum-shadow);color:var(--cream-100)}
.bn-pay{display:grid;gap:8px;margin-top:auto;padding-top:12px}
.bn-pay li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:10px 13px;border-radius:16px;background:rgba(255,245,222,.1);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.bn-pay b{font:650 .8125rem/1.25 var(--text);color:var(--cream-100)}
.bn-pay em{grid-row:span 2;align-self:center;font:800 1.02rem/1 var(--display);font-style:normal;color:#ffe08a;font-variant-numeric:tabular-nums}
.bn-pay i{font:600 .75rem/1.2 var(--text);font-style:normal;color:#ecd2c4}
.bn-pay i.bn-ok{color:#bfe8c9}
.bn-proof{display:grid;gap:8px;margin-top:auto;padding-top:12px}
.bn-proof span{display:flex;align-items:center;gap:9px;padding:9px 12px;border-radius:14px;background:var(--cream-200);box-shadow:inset 0 1px 0 #fff;font:600 .8125rem/1.2 var(--text);color:var(--plum-600)}
.bn-proof span::before{content:"";width:18px;height:18px;flex:none;border-radius:50%;background:#2f9a62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.500l4 4 8-9'/%3E%3C/svg%3E") center/70% no-repeat}
@media (max-width:1020px){
  .bn--chat{grid-column:1/13;grid-row:auto}.bn--rooms{grid-column:1/13}.bn--club{grid-column:1/7}.bn--proc{grid-column:7/13}.bn--boss{grid-column:1/13}.bn--proof{grid-column:1/7}.bn--money{grid-column:7/13}
}
@media (max-width:640px){
  .bn--chat .bn-bar,.bn--chat .bn-chat{display:none}   /* on a phone the first screen's demo is the conversation: the card keeps its words and its link */
  .bn--club,.bn--proc,.bn--proof,.bn--money{grid-column:1/13}.bn-lanes{grid-template-columns:minmax(0,1fr)}.bn{min-height:0}
}


/* ── the last door ───────────────────────────────────────────────────────────────────────────────────────────────── */
.fin{padding-block:clamp(88px,10vw,150px) calc(clamp(88px,10vw,150px) + var(--k-lap))}
.fin-in{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,5vw,80px);align-items:center}
.fin-art{display:grid;justify-items:center;gap:24px}
.fin-badge{width:min(100%,340px);filter:drop-shadow(0 40px 34px rgba(70,8,36,.45));animation:k-float 7s ease-in-out infinite}
.fin-wm{width:min(100%,360px)}
.fin-copy .k-h2{color:var(--plum-600)}
.fin-copy .k-lead{margin-top:18px}
.fin-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
@media (max-width:820px){.fin-in{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center}.fin-cta{justify-content:center}.fin-badge{width:min(70%,260px)}}

.noscript{padding:40px 0;color:var(--ink-2)}

/* a larger first screen on large monitors */
@media (min-width:1560px){.hero-in{width:min(1380px,100% - 2*var(--gutter))}.stage{max-width:820px}.hero h1{font-size:clamp(2.55rem,4.4vw,5.4rem)}}

/* the dock: on a phone, once the first screen has gone, the way in stays under the thumb */
.k-dock{position:fixed;inset-inline-start:0;inset-inline-end:0;bottom:0;z-index:55;display:none;padding:10px 14px calc(10px + env(safe-area-inset-bottom));pointer-events:none;transform:translateY(120%);transition:transform .5s var(--spring)}
.k-dock .k-btn{pointer-events:auto;width:100%;box-shadow:var(--k-plum-shadow),0 18px 30px -10px rgba(40,0,20,.6)}
.k-dock.is-on{transform:none}
@media (max-width:760px){.k-dock{display:block}html.is-home .k-hdr-r>.k-btn{display:none}}   /* the hero has its own button, then the dock: the header's would be a third */

/* a large, faint star in the plum cards: the mark as a watermark, so a tall card is never empty */
.bn.k-card--plum::before{content:"";position:absolute;inset-inline-end:-12%;top:-8%;width:62%;aspect-ratio:1;pointer-events:none;background:rgba(255,226,140,.075);-webkit-mask:var(--star) center/contain no-repeat;mask:var(--star) center/contain no-repeat;transform:rotate(12deg)}
.bn--money::before{inset-inline-end:auto;inset-inline-start:-14%;top:auto;bottom:-20%;width:70%}
.bn>*{position:relative}

/* ── clay objects: stickers on the cards, things around the badge ─────────────────────────────────────────────────── */
.st-bubble{width:100%;filter:drop-shadow(0 20px 18px rgba(90,40,0,.42));--r:-6deg;transform:rotate(-6deg);animation:k-float 7.6s ease-in-out infinite}
.bn-deco{position:absolute;height:auto;pointer-events:none;z-index:2;filter:drop-shadow(0 16px 14px rgba(60,20,0,.34));transition:transform .5s var(--spring)}
.bn-deco--check{inset-inline-end:18px;top:16px;width:96px;transform:rotate(10deg)}
.bn--chat:hover .bn-deco--check{transform:rotate(4deg) translateY(-4px) scale(1.04)}
.bn-deco--receipt{inset-inline-end:14px;top:12px;width:92px;transform:rotate(9deg)}
.bn--proc:hover .bn-deco--receipt{transform:rotate(3deg) translateY(-4px)}
.bn-deco--shield{inset-inline-end:12px;top:12px;width:64px;transform:rotate(8deg)}
.bn--proof:hover .bn-deco--shield{transform:rotate(2deg) translateY(-4px) scale(1.04)}
.bn--proc>h3,.bn--proc>p{max-width:calc(100% - 96px)}
.bn--chat>h3,.bn--chat>p{max-width:calc(100% - 100px)}
.bn--proof>h3{max-width:calc(100% - 78px)}
.bn--proof>p{max-width:calc(100% - 40px)}
.fin-art{position:relative;width:100%;min-height:420px}
.fin-o{position:absolute;height:auto;pointer-events:none;filter:drop-shadow(0 20px 16px rgba(70,8,36,.35));animation:k-float 7s ease-in-out infinite}
.fin-o--1{inset-inline-start:-2%;top:2%;width:21%;--r:-9deg;animation-delay:-1s}
.fin-o--2{inset-inline-end:-2%;top:30%;width:21%;--r:8deg;animation-delay:-2.4s}
.fin-o--3{inset-inline-end:12%;top:-4%;width:11%;--r:14deg;animation-delay:-3.2s}
.fin-o--4{inset-inline-start:6%;bottom:12%;width:9%;--r:-12deg;animation-delay:-4.1s}
.fin-o--5{inset-inline-end:3%;bottom:6%;width:10%;--r:10deg;animation-delay:-5s}
@media (max-width:820px){.fin-art{min-height:0;max-width:420px;margin-inline:auto}.fin-o--1{inset-inline-start:2%}.fin-o--2{inset-inline-end:2%}}
@media (max-width:640px){.bn-deco--check{inset-inline-end:12px;top:12px;width:76px}.bn--chat>h3,.bn--chat>p{max-width:calc(100% - 84px)}.bn--proc>h3,.bn--proc>p{max-width:calc(100% - 78px)}.bn-deco--receipt{width:72px}}

@media (max-width:560px){html.is-home .k-brand .k-wm{display:block}}   /* the header's button is gone on the home page: the name takes its place */