/* KitchenAlly public site. One night at a restaurant: the page starts after closing in cold black, the clock in the
   corner runs with the scroll, and the last screens are morning light. The base layout below is static and complete;
   the html.motion class (set by site.js unless the visitor asked for less motion) turns the long sections into
   pinned scenes that play as you scroll. */
:root{
  --night:#0c0d0f;--panel:#141619;--panel-hi:#1b1e22;--line:#25282d;
  --ink:#f2f1ee;--soft:#9ba0a7;--dim:#6d727a;--ok:#7fd1a3;--wait:#e6c27a;
  --day:#ece8e1;--day-panel:#f6f3ee;--day-line:#d9d3c9;--day-ink:#16181b;--day-soft:#5d6168;
  /* WhatsApp, dark mode, so the phone reads as the real thing. */
  --wa-bg:#0b141a;--wa-head:#202c33;--wa-in:#202c33;--wa-out:#005c4b;--wa-ink:#e9edef;--wa-dim:#8696a0;--wa-tick:#53bdeb;
  --font:"Heebo","Assistant","Arial Hebrew",system-ui,sans-serif;
  --bg:var(--night);--fg:var(--ink);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scrollbar-color:var(--line) var(--night)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--ink);color:var(--night)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:4px}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:6px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.latin{direction:ltr;unicode-bidi:isolate}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.note{font-size:13px;color:color-mix(in srgb,currentColor 50%,transparent)}

/* Text follows --fg, which site.js blends with the sky; secondary text is the same ink, lighter. */
.soft{color:color-mix(in srgb,currentColor 62%,transparent)}

/* bar */
.bar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,color .4s}
.bar.scrolled{border-bottom-color:color-mix(in srgb,currentColor 14%,transparent)}
.bar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:16px}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;text-decoration:none}
.logo i{font-style:normal;font-weight:300}
.logo b{color:var(--ok)}
.bar nav{display:flex;align-items:center;gap:26px;font-size:15px}
.bar nav a:not(.btn){text-decoration:none;opacity:.7;transition:opacity .2s}
.bar nav a:not(.btn):hover{opacity:1}
.clock{font-variant-numeric:tabular-nums;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 18%,transparent)}
.clock i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
@media (max-width:760px){.bar nav .nl{display:none}.bar nav{gap:18px}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 26px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:500;font-size:17px;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,background .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px)}
.btn.sm{height:40px;padding:0 18px;font-size:15px}
.btn.line{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 25%,transparent)}
.btn.line:hover{box-shadow:inset 0 0 0 1px currentColor}

section{padding-block:clamp(80px,11vw,150px)}
h1{font-weight:800;font-size:clamp(46px,7.6vw,112px);line-height:.96;letter-spacing:-.035em;text-wrap:balance}
h1 > span{display:block;font-weight:300;opacity:.62}
h2{font-weight:800;font-size:clamp(34px,5vw,66px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance;max-width:17ch}
h2 > span{font-weight:300;opacity:.62}
h3{font-weight:700;font-size:clamp(22px,2.3vw,30px);line-height:1.15;letter-spacing:-.015em}
.lede{margin-top:20px;font-size:clamp(17px,1.7vw,21px);font-weight:300;color:color-mix(in srgb,currentColor 64%,transparent);max-width:34em;line-height:1.65}
.act{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-top:34px}
.act small{font-size:15px;opacity:.6}

/* ---------- WhatsApp phone ---------- */
.phone{position:relative;width:min(340px,86vw);aspect-ratio:9/18.5;border-radius:44px;background:#000;padding:10px;box-shadow:0 0 0 1px #2a2d31,0 40px 90px -30px rgba(0,0,0,.8),inset 0 0 0 2px #1a1c1f;flex:none}
.phone::before{content:"";position:absolute;top:18px;left:50%;translate:-50% 0;width:92px;height:24px;border-radius:20px;background:#000;z-index:3}
.screen{position:relative;height:100%;border-radius:35px;overflow:hidden;background:var(--wa-bg);display:flex;flex-direction:column;color:var(--wa-ink);font-size:14.5px;line-height:1.4}
.wa-head{display:flex;align-items:center;gap:10px;padding:46px 14px 10px;background:var(--wa-head);flex:none}
.wa-av{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--night);display:grid;place-items:center;font-weight:800;font-size:15px;flex:none}
.wa-head b{display:block;font-weight:500;font-size:15.5px}
.wa-head small{display:block;font-size:12px;color:var(--wa-dim)}
.wa-body{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:12px 10px 14px;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.025),transparent 40%),var(--wa-bg)}
.wa-day{align-self:center;font-size:11.5px;color:var(--wa-dim);background:#182229;padding:3px 10px;border-radius:7px;margin-bottom:4px}
.msg{position:relative;max-width:84%;padding:7px 10px 18px;border-radius:9px;background:var(--wa-in);align-self:flex-start;box-shadow:0 1px .5px rgba(0,0,0,.25);overflow-wrap:anywhere}
.msg.out{background:var(--wa-out);align-self:flex-end}
.msg.in{border-top-right-radius:2px}
.msg.out{border-top-left-radius:2px}
.msg .t{position:absolute;bottom:3px;inset-inline-end:8px;font-size:10.5px;color:color-mix(in srgb,var(--wa-ink) 55%,transparent);font-variant-numeric:tabular-nums;display:flex;gap:3px;align-items:center}
.msg.in .t{inset-inline-end:auto;inset-inline-start:8px}
.msg .t svg{width:15px;height:10px;fill:none;stroke:var(--wa-tick);stroke-width:1.6}
.msg .sub{display:block;margin-top:4px;font-size:12.5px;color:var(--wa-dim);border-top:1px solid rgba(255,255,255,.08);padding-top:4px}
.msg .who{display:block;font-size:12px;font-weight:500;color:#53bdeb;margin-bottom:2px}
.btns{display:flex;gap:6px;margin-top:8px;margin-bottom:-12px}
.btns span{flex:1;text-align:center;padding:6px 8px;border-radius:7px;background:rgba(255,255,255,.06);color:#53bdeb;font-size:13.5px;font-weight:500}
.btns span.hit{background:#53bdeb;color:#0b141a}
.voice{display:flex;align-items:center;gap:8px;min-width:180px}
.voice i{width:26px;height:26px;border-radius:50%;background:#53bdeb;flex:none;position:relative}
.voice i::after{content:"";position:absolute;inset:8px 7px 8px 10px;background:#0b141a;clip-path:polygon(0 0,100% 50%,0 100%)}
.voice b{flex:1;height:18px;background:repeating-linear-gradient(90deg,var(--wa-dim) 0 2px,transparent 2px 5px);-webkit-mask:linear-gradient(90deg,#000 0 30%,rgba(0,0,0,.6) 30% 55%,#000 55% 75%,rgba(0,0,0,.5) 75%);mask:linear-gradient(90deg,#000 0 30%,rgba(0,0,0,.6) 30% 55%,#000 55% 75%,rgba(0,0,0,.5) 75%)}
.paper{display:block;margin:-3px -6px 4px;border-radius:6px;background:#f3efe6;color:#2a2620;padding:10px 12px;font-size:11.5px;line-height:1.5;transform:rotate(-1.2deg)}
.paper b{display:block;font-size:12.5px;margin-bottom:4px}
.paper span{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed #cfc7b8}
.typing{align-self:flex-start;display:flex;gap:4px;padding:10px 12px;border-radius:9px;background:var(--wa-in)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--wa-dim);animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* messages that wait for their moment */
.motion [data-at],.motion .play .msg,.motion .play .wa-row{opacity:0;transform:translateY(10px);transition:opacity .35s,transform .35s}
.motion [data-at].on,.motion .play .msg.on,.motion .play .wa-row.on{opacity:1;transform:none}

/* ---------- the app, as it really looks ---------- */
.app{--g:#f4f5f7;--c:#fff;--b:#e8eaed;--k:#262b31;--m:#737a83;--d:#43a047;--ds:#e8f3e8;--w:#b26a00;--ws:#fff3e0;--dn:#d32f2f;
  display:grid;grid-template-columns:150px minmax(0,1fr);background:var(--g);color:var(--k);border-radius:14px;overflow:hidden;font-size:12.5px;line-height:1.45;text-align:start;box-shadow:0 40px 100px -40px rgba(0,0,0,.6),0 0 0 1px rgba(0,0,0,.06)}
.app-side{background:var(--c);border-inline-end:1px solid var(--b);padding:14px 10px;display:flex;flex-direction:column;gap:3px}
.app-side b{font-weight:800;font-size:13.5px;padding:2px 8px 12px}
.app-side span{padding:6px 9px;border-radius:7px;color:var(--m)}
.app-side span.on{background:var(--k);color:#fff}
.app-main{padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.app-crumb{font-size:11px;color:var(--m)}
.app-title{font-size:17px;font-weight:700;margin-top:-6px}
.app-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.app-grid.two{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr)}
.card{background:var(--c);border:1px solid var(--b);border-radius:11px;padding:11px 12px;box-shadow:0 2px 6px rgba(20,25,30,.05);min-width:0}
.card h4{margin:0;font-size:12.5px;font-weight:600}
.card .k{font-size:20px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.card .s{color:var(--m);font-size:11px}
.card .up{color:#2e7d32}.card .dn{color:var(--dn)}
.bars{display:flex;align-items:flex-end;gap:5px;height:74px;margin-top:8px;border-bottom:1px solid var(--b)}
.bars i{flex:1;background:var(--d);border-radius:3px 3px 0 0;height:var(--h);transform-origin:bottom;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.bars i.lo{background:#c8e3c9}
.motion .play .bars i{transform:scaleY(.05)}
.motion .play.on .bars i{transform:none}
.task{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--b)}
.task:first-of-type{border-top:0}
.task i{width:8px;height:8px;border-radius:50%;background:var(--w);flex:none}
.task i.g{background:var(--d)}
.task em{font-style:normal;margin-inline-start:auto;font-size:10.5px;padding:2px 8px;border-radius:99px;background:var(--ws);color:var(--w);white-space:nowrap}
.task em.g{background:var(--ds);color:#2e7d32}
.tbl{width:100%;border-collapse:collapse;margin-top:6px;font-variant-numeric:tabular-nums}
.tbl td{padding:5px 0;border-top:1px solid var(--b)}
.tbl td:last-child{text-align:end}
.tbl tr.flag td{color:var(--dn)}
.chip{display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:99px;background:var(--ds);color:#2e7d32;margin:2px 0 0 4px}
.chip.w{background:var(--ws);color:var(--w)}
.meter{height:6px;border-radius:9px;background:#eef0f2;overflow:hidden;margin-top:8px}
.meter i{display:block;height:100%;width:var(--v);background:var(--d);border-radius:9px}
.sched{display:grid;grid-template-columns:52px repeat(5,minmax(0,1fr));gap:3px;margin-top:8px;font-size:10.5px}
.sched span{padding:5px 4px;border-radius:5px;background:#eef0f2;color:var(--m);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sched span.p1{background:#e8f1fc;color:#2a78d6}.sched span.p2{background:#f1eafa;color:#8e5bd0}.sched span.p3{background:#e2f3f3;color:#138a8a}
.sched span.miss{background:var(--ws);color:var(--w)}
.sched span.h{background:transparent;color:var(--k);font-weight:600}
@media (max-width:640px){
  .app{grid-template-columns:1fr}
  .app-side{display:none}
  .app-grid{grid-template-columns:1fr 1fr}
  .app-grid > :last-child:nth-child(3){grid-column:1/-1}
  .app-grid.two{grid-template-columns:1fr}
}
.laptop{position:relative;padding:10px 10px 0;border-radius:18px 18px 4px 4px;background:#1b1d20;box-shadow:0 0 0 1px #2c2f33}
.laptop::after{content:"";display:block;height:14px;margin:0 -14px;border-radius:0 0 14px 14px;background:linear-gradient(#2a2c30,#141517)}
.laptop .app{border-radius:8px 8px 0 0;box-shadow:none}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,7vw,90px) clamp(40px,6vw,80px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) auto;gap:clamp(30px,6vw,90px);align-items:center}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;justify-items:start}.hero-grid .phone{justify-self:center}}
.hero .lede{font-size:clamp(18px,1.9vw,22px)}

/* ---------- story: pinned scene, chapters swap as you scroll ---------- */
.story{position:relative}
.story-pin{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,6vw,90px);align-items:center}
.chapters{display:flex;flex-direction:column;gap:70px}
.chap .time{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-variant-numeric:tabular-nums;opacity:.7;margin-bottom:14px}
.chap .time i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.chap .time i.w{background:var(--wait)}
.chap p{margin-top:14px;color:color-mix(in srgb,currentColor 64%,transparent);font-weight:300;font-size:clamp(17px,1.5vw,19px);max-width:30em}
.story .phone{display:none}
@media (max-width:900px){.story-pin{grid-template-columns:1fr}}
.chap .mini{display:flex;margin-top:22px}
.mini{flex-direction:column;gap:6px;padding:14px 12px;border-radius:16px;background:var(--wa-bg);max-width:420px;font-size:14.5px;line-height:1.4;color:var(--wa-ink)}

/* motion version: one sticky screen, chapters fade into each other */
.motion .story{height:calc(var(--n,4) * 100vh + 40vh)}
.motion .story-pin{position:sticky;top:0;height:100vh;padding-top:70px}
.motion .chapters{display:grid}
.motion .chap{grid-area:1/1;opacity:0;transform:translateY(24px);transition:opacity .5s,transform .5s;pointer-events:none}
.motion .chap.on{opacity:1;transform:none;pointer-events:auto}
.motion .chap .mini{display:none}
.motion .story .phone{position:relative;top:auto;display:block}
.motion .story .wa-body > [data-ch]:not(.vis){display:none}
.motion .progress{display:flex}
.progress{display:none;gap:6px;margin-top:40px}
.progress i{height:2px;width:34px;background:color-mix(in srgb,currentColor 20%,transparent);border-radius:2px;overflow:hidden}
.progress i b{display:block;height:100%;width:var(--f,0%);background:currentColor}
@media (max-width:900px){
  .motion .story-pin{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:18px;padding-top:76px}
  .motion .story .phone{width:min(300px,74vw);justify-self:center;max-height:calc(100vh - 290px);aspect-ratio:auto;height:calc(100vh - 290px)}
  .motion .chap p{font-size:16px;margin-top:8px}
  .motion .chap h3{font-size:22px}
  .motion .chap .time{margin-bottom:6px}
  .motion .progress{margin-top:16px}
}

/* ---------- morning: the phone opens into the app ---------- */
.morning{position:relative}
.morning-pin{display:flex;flex-direction:column;align-items:center;gap:40px;text-align:center}
.morning-pin h2{max-width:20ch;margin-inline:auto}
.morning-pin .lede{margin-inline:auto}
.morph{position:relative;width:min(1000px,100%)}
.motion .morning{height:220vh}
.motion .morning-pin{position:sticky;top:0;height:100vh;justify-content:center;padding-top:60px;gap:28px}
.motion .morph{transform:scale(calc(.55 + var(--p,1) * .45));opacity:calc(.2 + var(--p,1) * 1.6);clip-path:inset(calc((1 - var(--p,1)) * 22%) calc((1 - var(--p,1)) * 34%) round 24px)}
@media (max-width:900px){.motion .morning{height:auto}.motion .morning-pin{position:static;height:auto}.motion .morph{transform:none;opacity:1;clip-path:none}}

/* ---------- try it ---------- */
.try-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(30px,6vw,90px);align-items:center}
@media (max-width:900px){.try-grid{grid-template-columns:1fr}.try-grid .phone{justify-self:center}}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chips button{border:0;cursor:pointer;padding:12px 18px;border-radius:999px;background:transparent;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent);font-size:15.5px;text-align:start;transition:box-shadow .2s,background .2s}
.chips button:hover{box-shadow:inset 0 0 0 1px currentColor}
.chips button[aria-pressed="true"]{background:var(--fg);color:var(--bg);box-shadow:none}
#tryBody .msg,#tryBody .typing{animation:pop .3s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px)}}

/* ---------- the machine: one row per area, each opens its own page ---------- */
.areas{margin-top:56px;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.area{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:24px;align-items:center;padding:30px 0;border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent);text-decoration:none;position:relative}
.area::before{content:"";position:absolute;inset:0 -20px;background:color-mix(in srgb,currentColor 4%,transparent);opacity:0;transition:opacity .25s;border-radius:12px}
.area:hover::before{opacity:1}
.area h3{font-size:clamp(26px,3.2vw,44px);font-weight:800;letter-spacing:-.025em}
.area p{color:color-mix(in srgb,currentColor 62%,transparent);font-weight:300;font-size:16px}
.area .go{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 22%,transparent);transition:transform .25s,background .25s}
.area:hover .go{transform:translateX(-6px);background:var(--fg);color:var(--bg)}
.area .go svg{width:20px;height:20px}
@media (max-width:760px){.area{grid-template-columns:1fr auto;gap:8px 16px}.area p{grid-column:1;grid-row:2}.area .go{grid-row:1/3;grid-column:2}}

/* ---------- trust, join, faq ---------- */
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 60px;margin-top:56px}
@media (max-width:760px){.facts{grid-template-columns:1fr}}
.fact{padding:26px 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.fact b{display:block;font-weight:700;font-size:19px}
.fact span{display:block;margin-top:6px;color:color-mix(in srgb,currentColor 62%,transparent);font-weight:300}
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:end}
@media (max-width:860px){.join{grid-template-columns:1fr}}
.perks li{display:flex;gap:14px;padding:16px 0;border-top:1px solid color-mix(in srgb,currentColor 16%,transparent);font-size:17px}
.perks li::before{content:"";width:8px;height:8px;margin-top:10px;border-radius:50%;background:currentColor;flex:none}
.faq{max-width:820px}
.faq details{border-top:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.faq details:last-child{border-bottom:1px solid color-mix(in srgb,currentColor 16%,transparent)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:22px 0;font-weight:500;font-size:19px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:300;font-size:26px;line-height:1;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 24px;color:color-mix(in srgb,currentColor 62%,transparent);max-width:44em}
.close{text-align:center}
.close h2{margin-inline:auto;max-width:18ch}
.close .act{justify-content:center}
footer{padding:36px 0 50px;font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;opacity:.7}
footer nav{display:flex;gap:20px}

/* ---------- area pages ---------- */
.page-hero{padding-block:clamp(50px,8vw,110px) clamp(30px,4vw,50px)}
.page-hero h1{font-size:clamp(44px,7vw,96px)}
.tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin-top:38px;padding-bottom:4px}
.tabs a{flex:none;padding:9px 16px;border-radius:999px;text-decoration:none;font-size:15px;box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent);opacity:.75}
.tabs a[aria-current]{background:var(--fg);color:var(--bg);box-shadow:none;opacity:1}
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(30px,6vw,90px);align-items:center;padding-block:clamp(60px,8vw,110px);border-top:1px solid color-mix(in srgb,currentColor 14%,transparent)}
.feat:nth-of-type(even) .sim{order:-1}
@media (max-width:900px){.feat{grid-template-columns:1fr}.feat:nth-of-type(even) .sim{order:0}}
.feat h2{font-size:clamp(30px,3.8vw,50px);max-width:15ch}
.feat .lede{font-size:18px}
.does{margin-top:26px;display:flex;flex-direction:column}
.does li{display:flex;gap:12px;padding:12px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);font-size:16px}
.does li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok);margin-top:10px;flex:none}
.sim{display:flex;justify-content:center;min-width:0}
.sim .mini{width:100%;max-width:420px;padding:18px 14px;border-radius:20px;box-shadow:0 0 0 1px color-mix(in srgb,currentColor 14%,transparent)}
.sim .mini .msg{max-width:88%}
.sim .app{width:100%;grid-template-columns:1fr}
.sim .app .app-side{display:none}
.next-area{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:40px 0;border-top:1px solid color-mix(in srgb,currentColor 14%,transparent);text-decoration:none}
.next-area b{font-size:clamp(26px,3.4vw,44px);font-weight:800;letter-spacing:-.02em}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}