/* Rekado site styles. Tokens and components from the step-4 brand system.
   Light by default, dark under prefers-color-scheme. No frameworks. */

/* ---------- tokens ---------- */
:root{
  --ground:#FFFFFF;--ground2:#F4F6F3;--surface:#FFFFFF;--surface2:#F4F6F3;
  --line:#DDE3DE;--line2:#C9D1CB;--ink:#19213A;--muted:#5A6366;--faint:#8A938F;
  --primary:#1A7D58;--primary-hover:#15694A;--on-primary:#FFFFFF;--primary-soft:#EEF8F2;
  --tag:#F9D6CC;--on-tag:#0E3A2B;--tag-edge:#1A7D58;--accent:#F7AE3A;--on-accent:#19213A;
  --drop:#C2381F;--drop-bg:#FDECE8;--success:#156448;--success-bg:#EEF8F2;--warn:#7F4F08;--warn-bg:#FFF1D6;
  --focus:#1A7D58;--hl:#F9D6CC;--shadow:rgba(25,33,58,.10);
  /* logo face (swap point: matches brand/README.md colour versions) */
  --rk-face:#1A7D58;--rk-eye:#FFFFFF;--rk-btn:#19213A;--rk-cheek:#F9D6CC;--rk-cap:#F7AE3A;--rk-band:#19213A;
  --f-display:"Bricolage Grotesque",system-ui,sans-serif;
  --f-text:"Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"Courier Prime",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);
  --gutter:16px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --ground:#0F1613;--ground2:#141C18;--surface:#18201C;--surface2:#202A25;
    --line:#2E3A34;--line2:#3B4A42;--ink:#EDF2EE;--muted:#A3B0A9;--faint:#7C8A83;
    --primary:#5CCB97;--primary-hover:#7AD8AB;--on-primary:#0B2219;--primary-soft:#16301F;
    --tag:#F4CFC4;--on-tag:#0E3A2B;--tag-edge:#F4CFC4;--accent:#FFC25A;--on-accent:#19213A;
    --drop:#FF8C78;--drop-bg:#3A1E19;--success:#6FD3A2;--success-bg:#16301F;--warn:#FFCB6B;--warn-bg:#33290F;
    --focus:#7AD8AB;--hl:#4A302B;--shadow:rgba(0,0,0,.45);
    --rk-face:#5CCB97;--rk-eye:#0B2219;--rk-btn:#F9D6CC;
    color-scheme:dark;
  }
}
@media (min-width:640px){:root{--gutter:24px}}
@media (min-width:1024px){:root{--gutter:32px}}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
html,body{overflow-x:clip}
body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.55 var(--f-text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%}
img{display:block;height:auto}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;margin:0;text-wrap:balance}
h1{font-size:clamp(36px,5vw,44px);line-height:1.05;letter-spacing:-.03em}
h2{font-size:clamp(30px,4.2vw,44px);line-height:1.05;letter-spacing:-.03em}
h3{font-size:20px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
p{margin:0 0 12px}
a{color:var(--primary);text-underline-offset:3px}
a:hover{color:var(--primary-hover)}
code,.mono{font-family:var(--f-mono)}
strong,b{font-weight:800}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--ground);padding:10px 14px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px;color:var(--ground)}
.container{width:100%;max-width:1200px;margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.container.narrow{max-width:820px}

/* ---------- header ---------- */
.site-head{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ground) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-head.scrolled{border-bottom-color:var(--line)}
.head-in{display:flex;align-items:center;gap:16px;min-height:68px}
.brand{display:inline-flex;align-items:center;line-height:0;border-radius:8px;flex:none}
.brand img{height:32px;width:auto}
.site-nav{display:flex;gap:2px;margin-left:auto}
.site-nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:15px;padding:8px 12px;border-radius:10px}
.site-nav a:hover{background:var(--surface2);color:var(--ink)}
.head-cta{margin-left:8px}
@media (max-width:860px){.site-nav{display:none}.head-cta{margin-left:auto}}
.head-cta .btn-label-long{margin-left:-4px}
@media (max-width:420px){.head-cta .btn-label-long{display:none}}

/* ---------- logo face (inline SVG, colours from tokens) ---------- */
.rkf-face{fill:var(--rk-face)}
.rkf-eye{stroke:var(--rk-eye);fill:none}
.rkf-eyeo{fill:var(--rk-eye)}
.rkf-cheek{fill:var(--rk-cheek)}
.rkf-cap{fill:var(--rk-cap)}
.rkf-band{fill:var(--rk-band)}
.rkf-btn{fill:var(--rk-btn)}
/* brand motion (from brand/motion/motion.css) */
.rk-face .rk-cap{transform-box:fill-box;transform-origin:8% 100%}
.rk-face .rk-eyes-open{opacity:0}
@keyframes rk-tip{0%{transform:none}28%{transform:translateY(-3px) rotate(-12deg)}52%{transform:translateY(-3px) rotate(-12deg)}74%{transform:translateY(.3px) rotate(2deg)}88%{transform:rotate(-.8deg)}100%{transform:none}}
@keyframes rk-blink-c{0%,91.9%{opacity:1}92%,95.9%{opacity:0}96%,100%{opacity:1}}
@keyframes rk-blink-o{0%,91.9%{opacity:0}92%,95.9%{opacity:1}96%,100%{opacity:0}}
@keyframes rk-bob{0%,100%{transform:none}50%{transform:translateY(-2.5px) rotate(-3deg)}}
@keyframes rk-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.rk-face.is-found .rk-cap{animation:rk-tip 900ms cubic-bezier(.3,.7,.2,1) both}
.rk-face.is-idle .rk-eyes-closed{animation:rk-blink-c 6s linear infinite 2s}
.rk-face.is-idle .rk-eyes-open{animation:rk-blink-o 6s linear infinite 2s}
.rk-face.is-loading .rk-cap{animation:rk-bob 1.2s ease-in-out infinite}

/* ---------- buttons ---------- */
.btn-add{display:inline-flex;align-items:center;gap:10px;font:800 16px/1 var(--f-text);color:var(--on-primary);background:var(--primary);border-radius:14px;padding:13px 20px 13px 14px;text-decoration:none;box-shadow:0 3px 0 var(--accent);border:0;cursor:pointer;transition:transform .12s ease-out,box-shadow .12s ease-out,background .12s;white-space:nowrap;
  --rk-face:var(--on-primary);--rk-eye:var(--primary)}
.btn-add svg{width:26px;height:26px;flex:none}
.btn-add:hover{color:var(--on-primary);background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 4px 0 var(--accent);--rk-eye:var(--primary-hover)}
.btn-add:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent)}
.btn-add:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.btn-add.sm{font-size:14.5px;padding:9px 14px 9px 10px;border-radius:12px;gap:8px}
.btn-add.sm svg{width:24px;height:24px}
.btn-add.lg{font-size:18px;padding:16px 24px 16px 16px}
.btn-add.lg svg{width:30px;height:30px}
.btn-sec{display:inline-flex;align-items:center;font:800 16px/1 var(--f-text);color:var(--primary);background:transparent;border-radius:14px;padding:15px 20px;box-shadow:inset 0 0 0 1.5px var(--primary);text-decoration:none;transition:background .12s}
.btn-sec:hover{background:var(--primary-soft);color:var(--primary)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* ---------- small type helpers ---------- */
.kicker{display:inline-block;font:800 13px/1.2 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:12px}
.lede{font-size:19px;line-height:1.5;color:var(--muted);max-width:640px;margin:14px 0 0}
.cap{font-size:13px;color:var(--muted);line-height:1.45}
.disc{font-size:13px;color:var(--muted);display:flex;gap:7px;align-items:flex-start;line-height:1.4;margin:0}
.disc svg{flex:none;margin-top:2px;width:14px;height:14px}
.disc.lg{font-size:15px}
.disc.lg svg{width:16px;height:16px;margin-top:3px}

/* ---------- sections ---------- */
.section{padding:96px 0}
.section.tint{background:var(--ground2)}
.sec-head{max-width:720px;margin-bottom:44px}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head.center .lede{margin-left:auto;margin-right:auto}
@media (max-width:640px){.section{padding:64px 0}.sec-head{margin-bottom:32px}.lede{font-size:17px}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:56px 0 88px}
.hero::before{content:"";position:absolute;right:-12vw;top:-18vw;width:min(62vw,900px);height:min(62vw,900px);border-radius:50%;background:var(--primary-soft);z-index:-1}
.hero-in{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:56px;align-items:center}
.eyebrow{font:700 15px/1.3 var(--f-mono);color:var(--primary);margin:0 0 18px}
.hl{font:800 clamp(44px,6.2vw,80px)/.94 var(--f-display);letter-spacing:-.045em;margin:0 0 22px}
.hl .hi{position:relative;white-space:nowrap;color:var(--primary);z-index:0}
.hl .hi::before{content:"";position:absolute;left:-.06em;right:-.08em;bottom:.04em;height:.36em;background:var(--hl);z-index:-1;border-radius:.08em;transform:rotate(-1.2deg)}
.hsub{font-size:20px;line-height:1.5;color:var(--muted);max-width:540px;margin:0 0 28px}
.works{font-size:15px;color:var(--ink);font-weight:700;margin:22px 0 8px}
.works span{color:var(--faint);font-weight:400;padding:0 4px}
@media (max-width:1100px){.hero-in{gap:32px}}
@media (max-width:900px){.hero-in{grid-template-columns:minmax(0,1fr);gap:40px}.hero .chat{max-width:640px}.hero{padding:40px 0 64px}.hero::before{right:-40vw;top:-30vw;width:120vw;height:120vw}}
@media (max-width:560px){.hl{font-size:clamp(40px,11.5vw,48px)}.hsub{font-size:17px}.eyebrow{font-size:14px}.hero .row .btn-add,.hero .row .btn-sec{flex:1 1 auto;justify-content:center}}

/* ---------- chat demo ---------- */
.chat{background:var(--surface2);border:1px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 40px 80px -48px var(--shadow);min-width:0;margin:0;position:relative}
@media (prefers-color-scheme: dark){.chat{background:var(--surface)}}
.ch-top{display:flex;justify-content:space-between;align-items:center;font:800 11.5px/1 var(--f-text);color:var(--muted);margin-bottom:12px;text-transform:uppercase;letter-spacing:.07em}
.ch-top .mode{display:inline-flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);padding:5px 8px;border-radius:999px}
@media (prefers-color-scheme: dark){.ch-top .mode{background:var(--surface2)}}
.ch-top .mode i{width:7px;height:7px;border-radius:50%;background:var(--faint)}
.ch-top .mode.live i{background:var(--primary)}
.bub{padding:11px 14px;font-size:15px;line-height:1.45;margin-bottom:10px;max-width:90%;overflow-wrap:anywhere}
.bub.me{background:var(--ink);color:var(--ground);border-radius:16px 16px 4px 16px;margin-left:auto;width:fit-content}
.bub.ai{background:var(--surface);border:1px solid var(--line);border-radius:16px 16px 16px 4px;width:fit-content}
@media (prefers-color-scheme: dark){.bub.ai{background:var(--surface2)}}
.via{display:flex;align-items:center;gap:6px;font:700 12px/1 var(--f-mono);color:var(--muted);margin-bottom:6px}
.via svg{width:16px;height:16px;flex:none}
.chat-results{min-height:0;transition:min-height .2s}
.cards2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.cards3{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px;margin-bottom:12px}
.chat .card{max-width:none}
.chat .card .cb{padding:10px 11px 12px}
.chat .card .ct{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chat .card .price{font-size:20px}
.chat .card .open{font-size:13px;padding:10px 8px}
.chat .card .htag{font-size:11.5px;padding:5px 8px 5px 18px}
.chat .card .htag::before{left:8px}
.chat .card .prow{margin-bottom:10px}
.chat .disc{margin:2px 2px 0}
.cards3 .card .ph{aspect-ratio:1/1}
.cards3 .card .ct{font-size:13px}
.cards3 .card .open{font-size:12px}
.chat-loading{display:flex;align-items:center;gap:10px;padding:8px 2px 16px}
.chat-loading svg{width:40px;height:40px;flex:none}
.typing{font:700 13px/1 var(--f-mono);color:var(--muted)}
/* composer (live try box) */
.composer{display:flex;gap:8px;margin-top:14px;background:var(--surface);border:1px solid var(--line2);border-radius:14px;padding:6px 6px 6px 14px;align-items:center}
@media (prefers-color-scheme: dark){.composer{background:var(--surface2)}}
.composer:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.composer input{flex:1;min-width:0;border:0;background:transparent;color:var(--ink);font:400 15px/1.3 var(--f-text);padding:8px 0}
.composer input::placeholder{color:var(--muted);opacity:1}
.composer input:focus{outline:none}
.composer button{flex:none;font:800 14px/1 var(--f-text);background:var(--primary);color:var(--on-primary);border:0;border-radius:10px;padding:11px 16px;cursor:pointer}
.composer button:hover{background:var(--primary-hover)}
.composer button:disabled{opacity:.6;cursor:progress}
.try-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:10px;font-size:13px;color:var(--muted)}
.try-row button{font:600 13px/1 var(--f-text);color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 11px;cursor:pointer}
.try-row button:hover{border-color:var(--primary)}
.try-note{font-size:12.5px;color:var(--muted);margin:8px 2px 0;min-height:1.4em}
@media (max-width:560px){
  .chat{padding:12px;border-radius:18px}
  .cards2{grid-template-columns:minmax(0,1fr)}
  .cards2 .card:nth-child(n+2){display:none}
  .cards3{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:minmax(0,1fr)}
  .cards3 .card{display:grid;grid-template-columns:108px minmax(0,1fr)}
  .cards3 .card .ph{border-bottom:0;border-right:1px solid var(--line);aspect-ratio:auto;height:100%}
}

/* ---------- product image (illustrative pattern + photo slot) ---------- */
.ph{position:relative;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;color:#6B4A40;isolation:isolate}
.ph>svg.prod{width:66%;height:auto;position:relative;z-index:1}
.ph::after{content:"";position:absolute;left:24%;right:24%;bottom:14%;height:8%;border-radius:50%;background:rgba(60,40,30,.18);filter:blur(6px);z-index:0}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.ph.has-photo::after{display:none}
/* Generated product photos (shot on white): multiply lets the tile tint show through the
   backdrop, the way store photos sit in the product cards. Scenes fill the tile. */
.ph.photo::after{display:none}
.ph.photo>img{object-fit:contain;mix-blend-mode:multiply;padding:4% 6%}
.ph.photo.scene>img{object-fit:cover;mix-blend-mode:normal;padding:0}
.ph.real{background:#FFFFFF}
.ph.real::after{display:none}
.nophoto{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;font:700 12px/1.2 var(--f-mono);color:#5A4A44;text-align:center}
.nophoto svg{width:32px;height:32px;--rk-face:#1A7D58;--rk-eye:#FFFFFF;--rk-btn:#19213A}
.ph:has(.nophoto)::after{display:none}
.ph.real>img{object-fit:contain;padding:6%}
.ph.blush{background:radial-gradient(85% 75% at 50% 32%,#FFFFFF 0%,#FBEAE4 62%,#F5DCD3 100%);color:#7A4E42}
.ph.mint{background:radial-gradient(85% 75% at 50% 32%,#FFFFFF 0%,#E7F5EC 62%,#D5EDDF 100%);color:#2F5E49}
.ph.butter{background:radial-gradient(85% 75% at 50% 32%,#FFFFFF 0%,#FFF3D9 62%,#FCE6B8 100%);color:#7A5A1E}
.ph.sky{background:radial-gradient(85% 75% at 50% 32%,#FFFFFF 0%,#E8F0F8 62%,#D6E4F2 100%);color:#36506B}
.ph.lilac{background:radial-gradient(85% 75% at 50% 32%,#FFFFFF 0%,#F1EBF8 62%,#E3D8F1 100%);color:#5A4772}
.ph.white{background:radial-gradient(85% 75% at 50% 32%,#FFFFFF 0%,#F7F7F5 70%,#EEEEEA 100%);color:#5A5A55}
.il{position:absolute;right:8px;top:8px;z-index:3;font:700 10.5px/1 var(--f-mono);background:rgba(255,255,255,.82);color:#3B3B3B;padding:3px 6px;border-radius:4px}

/* ---------- product card ---------- */
.card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:16px;overflow:hidden;max-width:360px;position:relative;transition:transform .18s var(--ease),box-shadow .18s var(--ease);min-width:0}
.card .ph{border-bottom:1px solid var(--line);aspect-ratio:3/2}
.cb{padding:12px 14px 14px;position:relative;min-width:0}
.trow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;min-width:0}
.htag{display:inline-flex;align-items:center;font:700 12.5px/1 var(--f-mono);color:var(--on-tag);background:var(--tag);padding:6px 10px 6px 21px;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%);border-radius:0 5px 5px 0;position:relative;transform-origin:10px 50%;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;transition:transform .18s var(--ease)}
.htag::before{content:"";position:absolute;left:10px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--surface)}
.ct{font:800 16px/1.25 var(--f-text);margin:0 0 2px;letter-spacing:0}
.cm{font-size:13px;color:var(--muted);margin:0 0 10px}
.prow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.price{font:800 24px/1 var(--f-display);letter-spacing:-.02em}
.was{font-size:13px;color:var(--muted);text-decoration:line-through}
.save{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--on-accent);font-weight:800;font-size:12.5px;line-height:1;padding:5px 9px 5px 7px;border-radius:999px;white-space:nowrap}
.save small{font-weight:700;font-size:11px;opacity:.9;border-right:1px solid rgba(25,33,58,.3);padding-right:6px}
.hist{display:inline-flex;align-items:center;gap:5px;font:700 12px/1 var(--f-mono);padding:4px 7px;border-radius:6px;background:var(--surface2);color:var(--muted);white-space:nowrap}
.hist svg{width:28px;height:12px;flex:none}
.hist.low{background:var(--success-bg);color:var(--success)}
.hist.drop{background:var(--drop-bg);color:var(--drop)}
.open{display:flex;align-items:center;justify-content:center;width:100%;font:800 14.5px/1 var(--f-text);text-decoration:none;color:var(--on-primary);background:var(--primary);border:0;border-radius:11px;padding:12px 14px;cursor:pointer;transition:background .12s ease-out,transform .12s ease-out;white-space:nowrap;overflow:hidden}
a.open:hover{background:var(--primary-hover);color:var(--on-primary)}
a.open:active{transform:translateY(1px)}
.open:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.open .st{overflow:hidden;text-overflow:ellipsis;min-width:0}
.open.ghost{background:transparent;color:var(--primary);box-shadow:inset 0 0 0 1.5px var(--primary)}
.open.demo{cursor:default}
.foot{font-size:11.5px;color:var(--muted);margin:10px 0 0;line-height:1.35}
@media (hover:hover){
  .card:hover{transform:translateY(-2px);box-shadow:0 10px 26px -12px var(--shadow)}
  .card:hover .htag{transform:rotate(-4deg)}
}

/* ---------- arrival motion ---------- */
@keyframes rk-arrive{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rk-swing{0%{transform:rotate(-18deg)}30%{transform:rotate(9deg)}52%{transform:rotate(-4.5deg)}72%{transform:rotate(2deg)}88%{transform:rotate(-.6deg)}100%{transform:rotate(0)}}
@keyframes rk-fade{from{opacity:0}to{opacity:1}}
@keyframes rk-dots{0%{content:""}25%{content:"."}50%{content:".."}75%,100%{content:"..."}}
.typing i{font-style:normal;display:inline-block;width:1.4em;text-align:left}
.typing i::after{content:"..."}
@media (prefers-reduced-motion:no-preference){
  .arrive .card{animation:rk-arrive 280ms var(--ease) both}
  .arrive .card .htag{animation:rk-swing 900ms cubic-bezier(.36,0,.2,1) both}
  .arrive .card:nth-child(1){animation-delay:0ms}.arrive .card:nth-child(1) .htag{animation-delay:140ms}
  .arrive .card:nth-child(2){animation-delay:90ms}.arrive .card:nth-child(2) .htag{animation-delay:230ms}
  .arrive .card:nth-child(3){animation-delay:180ms}.arrive .card:nth-child(3) .htag{animation-delay:320ms}
  .typing i::after{animation:rk-dots 1200ms steps(1) infinite}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
  .arrive .card{animation:rk-fade 160ms linear both!important}
  .card:hover{transform:none}.card:hover .htag{transform:none}
  .btn-add:hover,.btn-add:active{transform:none}
  .rk-face .rk-cap,.rk-face .rk-eyes-closed,.rk-face .rk-eyes-open{animation:none!important}
  .rk-face .rk-eyes-closed{opacity:1}.rk-face .rk-eyes-open{opacity:0}
  .rk-face.is-loading .rk-cap-vis{animation:rk-pulse 1.6s ease-in-out infinite!important;animation-duration:1.6s!important;animation-iteration-count:infinite!important}
}

/* ---------- how it works ---------- */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:step}
.step{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;min-width:0;display:flex;flex-direction:column}
.step .num{font:800 64px/.8 var(--f-display);letter-spacing:-.05em;color:var(--primary);margin-bottom:14px}
.step h3{font-size:22px;margin-bottom:8px}
.step p{color:var(--muted);margin:0}
.step .vis{margin-top:auto;padding-top:22px;min-height:150px;display:flex;align-items:flex-end}
.step .vis>*{width:100%}
.mini-pick{background:var(--surface2);border-radius:14px;padding:8px}
.mini-pick div{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:9px;font-weight:700;font-size:14.5px}
.mini-pick div.on{background:var(--surface);box-shadow:0 1px 0 var(--line)}
.mini-pick small{font-weight:600;color:var(--muted);font-size:12px}
.mini-pick .tg{width:30px;height:18px;border-radius:999px;background:var(--line2);position:relative;flex:none}
.mini-pick .tg::after{content:"";position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:#fff}
.mini-pick .on .tg{background:var(--primary)}.mini-pick .on .tg::after{left:15px}
.mini-ask{display:flex;flex-direction:column;gap:8px}
.mini-ask .bub{margin:0;font-size:14px}
.mini-ask .bub.me{max-width:94%}
.mini-open{background:var(--surface2);border-radius:14px;padding:14px}
.mini-open .trow{margin-bottom:10px}
.mini-open .price{font-size:22px}
@media (max-width:900px){.steps{grid-template-columns:minmax(0,1fr);max-width:560px}.step .vis{min-height:0}}

/* ---------- compare strip ---------- */
.cmp{display:grid;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
.cmpcol{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;position:relative;min-width:0;display:flex;flex-direction:column}
.cmpcol .ph{aspect-ratio:4/3;border-bottom:1px solid var(--line)}
.cmpcol .cb{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.cmpcol .open{margin-top:auto}
.cmpcol.best{box-shadow:inset 0 0 0 2px var(--primary);border-color:var(--primary)}
.cmpcol.best .ph{border-bottom-color:var(--primary)}
.pickn{position:absolute;left:14px;top:6px;z-index:3;font:800 84px/1 var(--f-display);letter-spacing:-.05em;color:#19213A;opacity:.9}
.bestlbl{position:absolute;right:10px;bottom:10px;z-index:3;font:700 11.5px/1 var(--f-mono);background:#1A7D58;color:#fff;padding:5px 8px;border-radius:5px}
.cmpcol .ct{font-size:17px;margin-bottom:8px}
.specs{list-style:none;margin:0 0 16px;padding:0;font-size:14px}
.specs li{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px dashed var(--line)}
.specs li span:first-child{color:var(--muted)}
.specs li span:last-child{font-weight:700;text-align:right}
.cmp-foot{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px}
@media (max-width:900px){
  .cmp{grid-template-columns:minmax(0,1fr);max-width:560px}
  .cmpcol:nth-child(n+2){display:grid;grid-template-columns:150px minmax(0,1fr)}
  .cmpcol:nth-child(n+2) .ph{aspect-ratio:auto;height:100%;border-bottom:0;border-right:1px solid var(--line)}
  .cmpcol:nth-child(n+2) .pickn{font-size:60px;left:10px}
  .cmpcol:nth-child(n+2) .specs{display:none}
  .cmpcol:nth-child(n+2) .cb{padding:14px}
}
@media (max-width:420px){.cmpcol:nth-child(n+2){grid-template-columns:110px minmax(0,1fr)}.cmpcol:nth-child(n+2) .pickn{font-size:48px}}

/* ---------- same look for less ---------- */
.lookalike{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:88px;background:var(--surface);border:1px solid var(--line);border-radius:28px;padding:48px}
.lookalike h3.big{font:800 clamp(34px,4.4vw,52px)/1 var(--f-display);letter-spacing:-.04em;margin-bottom:16px}
.lookalike h3.big .amt{color:var(--primary);position:relative;z-index:0;white-space:nowrap}
.lookalike h3.big .amt::before{content:"";position:absolute;left:-.04em;right:-.06em;bottom:.05em;height:.34em;background:var(--hl);z-index:-1;transform:rotate(-1.2deg)}
.lookalike p{color:var(--muted);font-size:17px}
.lookalike .fine{font-size:14px;color:var(--muted);border-left:3px solid var(--tag);padding-left:12px;margin-top:18px}
.look-demo{background:var(--surface2);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px}
.look-demo .card{max-width:340px;margin-left:0}
@media (max-width:900px){.lookalike{grid-template-columns:minmax(0,1fr);gap:28px;padding:28px 20px;margin-top:64px;border-radius:22px}}

/* ---------- setup tabs ---------- */
.setup{background:var(--surface);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.tabs{display:flex;gap:4px;padding:8px;background:var(--surface2);border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs [role="tab"]{flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 15.5px/1 var(--f-text);color:var(--muted);background:transparent;border:0;border-radius:12px;padding:13px 16px;cursor:pointer;white-space:nowrap}
.tabs [role="tab"]:hover{color:var(--ink)}
.tabs [role="tab"][aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 0 var(--line),0 4px 14px -8px var(--shadow)}
.tabs [role="tab"] small{font:800 10.5px/1 var(--f-text);letter-spacing:.05em;text-transform:uppercase;background:var(--warn-bg);color:var(--warn);padding:4px 6px;border-radius:5px}
.tabpanel{padding:36px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px}
.tabpanel[hidden]{display:none}
.tabpanel h3{font-size:26px;margin-bottom:6px}
.tabpanel .sub{color:var(--muted);margin-bottom:22px}
.howto{list-style:none;margin:0;padding:0;counter-reset:s}
.howto li{counter-increment:s;display:grid;grid-template-columns:36px minmax(0,1fr);gap:14px;align-items:start;padding:12px 0;border-top:1px dashed var(--line);font-size:16.5px}
.howto li:first-child{border-top:0;padding-top:0}
.howto li::before{content:counter(s);width:32px;height:32px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font:800 16px/32px var(--f-display);text-align:center}
.menu{font-weight:800;background:var(--surface2);border:1px solid var(--line);border-radius:7px;padding:1px 7px;white-space:nowrap}
.hint{font-size:14px;color:var(--muted);margin:16px 0 0}
.note{font-size:14.5px;padding:12px 14px;border-left:3px solid var(--accent);background:var(--warn-bg);color:var(--ink);border-radius:0 10px 10px 0;margin:18px 0 0}
.addr-card{background:var(--surface2);border-radius:18px;padding:20px;align-self:start}
.addr-card .k{display:block;font:800 13px/1.2 var(--f-text);margin-bottom:10px}
.urlbox{display:flex;align-items:center;gap:8px;background:var(--surface);border:1.5px solid var(--line2);border-radius:12px;padding:6px 6px 6px 14px}
.urlbox code{flex:1;min-width:0;font:700 15px/1.3 var(--f-mono);color:var(--ink);overflow-wrap:anywhere;user-select:all}
.copy{flex:none;font:800 14px/1 var(--f-text);background:var(--primary);color:var(--on-primary);border:0;border-radius:9px;padding:11px 14px;cursor:pointer;min-width:84px}
.copy:hover{background:var(--primary-hover)}
.copy.done{background:var(--success-bg);color:var(--success)}
.addr-card .then{margin:18px 0 6px;font-size:13px;font-weight:800;color:var(--muted)}
.addr-card .bub{max-width:100%;margin:0;font-size:14.5px}
.soon{grid-template-columns:minmax(0,1fr)!important;max-width:720px}
.soon-in{display:flex;gap:20px;align-items:flex-start}
.soon-in svg{width:64px;height:64px;flex:none}
@media (max-width:860px){.tabpanel{grid-template-columns:minmax(0,1fr);padding:24px 18px;gap:24px}.tabs [role="tab"]{font-size:14.5px;padding:12px}}
@media (max-width:480px){.soon-in{flex-direction:column;gap:12px}.soon-in svg{width:52px;height:52px}}

/* ---------- trust ---------- */
.trust{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.trust>div{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:24px;min-width:0}
.trust .ic{width:44px;height:44px;border-radius:12px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center;margin-bottom:16px}
.trust .ic svg{width:24px;height:24px}
.trust h3{font-size:19px;margin-bottom:8px}
.trust p{color:var(--muted);font-size:15px;margin:0}
.trust p+p{margin-top:8px}
@media (max-width:1023px){.trust{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.trust{grid-template-columns:minmax(0,1fr)}}

/* ---------- coming next ---------- */
.nextgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.nextcard{position:relative;min-width:0}
.nextcard .card{max-width:none;opacity:.96}
.nextcard .aisle{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.nextcard .aisle h3{font-size:22px}
.badge-soon{font:800 11px/1 var(--f-text);letter-spacing:.06em;text-transform:uppercase;background:var(--warn-bg);color:var(--warn);padding:5px 8px;border-radius:6px}
.badge-now{font:800 11px/1 var(--f-text);letter-spacing:.06em;text-transform:uppercase;background:var(--success-bg);color:var(--success);padding:5px 8px;border-radius:6px}
.nextcard .open{background:var(--surface2);color:var(--muted)}
@media (max-width:900px){.nextgrid{grid-template-columns:minmax(0,1fr);max-width:420px}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;align-items:start}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:0;min-width:0}
.faq summary{list-style:none;cursor:pointer;padding:18px 52px 18px 20px;font:700 18px/1.3 var(--f-display);letter-spacing:-.01em;position:relative;border-radius:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:20px;top:50%;width:10px;height:10px;margin-top:-7px;border-right:2.5px solid var(--primary);border-bottom:2.5px solid var(--primary);transform:rotate(45deg);transition:transform .18s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.faq details>div{padding:0 20px 18px;color:var(--muted)}
.faq details>div p:last-child{margin:0}
@media (max-width:860px){.faq{grid-template-columns:minmax(0,1fr)}}

/* ---------- closing band ---------- */
.closer{background:var(--primary);color:var(--on-primary);border-radius:28px;padding:56px 48px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:center;position:relative;overflow:hidden}
.closer h2{color:var(--on-primary);font-size:clamp(32px,4.4vw,52px)}
.closer p{margin:12px 0 0;font-size:17px;opacity:.92}
.closer p i{font-style:italic}
.closer .btn-add{background:var(--on-primary);color:var(--primary);box-shadow:0 3px 0 var(--accent);--rk-face:var(--primary);--rk-eye:var(--on-primary);--rk-btn:#19213A}
.closer .btn-add:hover{background:var(--primary-soft);color:var(--primary);--rk-eye:var(--primary-soft)}
@media (prefers-color-scheme: dark){.closer .btn-add{--rk-btn:#F9D6CC}}
@media (max-width:760px){.closer{grid-template-columns:minmax(0,1fr);padding:36px 22px;border-radius:22px}.closer .btn-add{justify-content:center}}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:48px 0 40px;margin-top:96px;background:var(--ground)}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px;align-items:start}
.foot-brand img{height:30px;width:auto}
.foot-brand p{color:var(--muted);font-size:15px;margin:14px 0 0;max-width:380px}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-end;font-weight:700}
.foot-links a{color:var(--ink);text-decoration:none}
.foot-links a:hover{color:var(--primary);text-decoration:underline}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:13.5px}
@media (max-width:760px){.foot-grid{grid-template-columns:minmax(0,1fr)}.foot-links{justify-content:flex-start}.site-foot{margin-top:64px}}

/* ---------- content pages (developers, legal, 404) ---------- */
.page{padding:56px 0 24px}
.page-head{margin-bottom:36px}
.page-head .lede{margin-top:12px}
.prose{max-width:720px}
.prose h2{font-size:26px;margin:40px 0 10px;letter-spacing:-.02em}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{color:var(--ink)}
.prose p{margin-bottom:14px}
.draft{display:inline-flex;gap:8px;align-items:center;font-size:14px;font-weight:700;background:var(--warn-bg);color:var(--warn);border-radius:10px;padding:10px 14px;margin:0 0 28px}
.devgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:8px 0 8px}
.devgrid>div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:18px 20px;min-width:0}
.devgrid h3{font:700 17px/1.2 var(--f-mono);letter-spacing:0;margin-bottom:6px;color:var(--primary)}
.devgrid p{color:var(--muted);margin:0;font-size:15px}
.code{background:#19213A;color:#E7ECF5;border-radius:14px;padding:18px 20px;overflow-x:auto;font:400 14px/1.6 var(--f-mono);margin:12px 0 20px;white-space:pre}
@media (prefers-color-scheme: dark){.code{background:#0B110E;border:1px solid var(--line)}}
.code .c{color:#9AA6BE}.code .k{color:#8FE0B8}
.keybox{background:var(--surface2);border-radius:18px;padding:20px;margin:12px 0 20px}
.keybox form{display:flex;gap:8px;flex-wrap:wrap}
.keybox input{flex:1 1 220px;min-width:0;font:400 16px/1.3 var(--f-text);color:var(--ink);background:var(--surface);border:1.5px solid var(--line2);border-radius:12px;padding:12px 14px}
.keybox input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.btn{font:800 15px/1 var(--f-text);background:var(--primary);color:var(--on-primary);border:0;border-radius:12px;padding:13px 18px;cursor:pointer}
.btn:hover{background:var(--primary-hover)}
.btn.quiet{background:var(--surface);color:var(--ink);border:1px solid var(--line2)}
.status{font-size:14px;color:var(--muted);min-height:1.4em;margin:10px 0 0}
.status.err{color:var(--drop)}
.keyout{font:700 15px/1.4 var(--f-mono);background:var(--surface);border:1px solid var(--line2);border-radius:10px;padding:12px 14px;overflow-wrap:anywhere;margin:8px 0}
@media (max-width:640px){.devgrid{grid-template-columns:minmax(0,1fr)}.page{padding:36px 0 8px}}
.lost{display:grid;grid-template-columns:auto minmax(0,1fr);gap:40px;align-items:center;padding:72px 0 24px;max-width:860px}
.lost svg.big{width:180px;height:180px}
.lost h1{font-size:clamp(40px,6vw,64px);letter-spacing:-.04em;line-height:.98;margin-bottom:14px}
.lost p{font-size:19px;color:var(--muted);max-width:520px}
.lost .sugg{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 26px}
.lost .sugg a{font-size:14.5px;font-weight:700;background:var(--surface2);color:var(--ink);text-decoration:none;border-radius:999px;padding:8px 13px}
.lost .sugg a:hover{background:var(--primary-soft);color:var(--primary)}
@media (max-width:640px){.lost{grid-template-columns:minmax(0,1fr);gap:20px;padding:40px 0 8px}.lost svg.big{width:112px;height:112px}.lost p{font-size:17px}}

/* ---------- small-screen refinements ---------- */
@media (max-width:900px){
  .cmpcol:nth-child(n+2) .pickn{top:auto;bottom:6px;left:8px;font-size:52px}
  .cmpcol:nth-child(n+2) .il{font-size:9.5px;right:6px;top:6px}
  .nextcard .card .ph{aspect-ratio:16/9}
}
@media (max-width:560px){
  .tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}
  .tabs [role="tab"]{flex:none}
}