/* Grow demo page. Shared styles come from site.css; logic is in grow-demo.js */
[hidden]{display:none!important}
.gd-hero{position:relative;padding:90px 0 30px;overflow:hidden}
.gd-hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse at 70% 20%,#000 20%,transparent 70%);z-index:-1}
.gd-hero::after{content:"";position:absolute;width:520px;height:520px;right:-140px;top:-200px;border-radius:50%;background:var(--teal);filter:blur(110px);opacity:.18;z-index:-1}
.gd-hero h1{font-size:clamp(40px,6vw,64px);font-weight:800;margin-bottom:20px}
.gd-stage-sec{padding-top:30px}

.gd-stage{display:grid;grid-template-columns:1fr 340px 1fr;gap:40px;align-items:start}

/* steps */
.gd-steps{list-style:none;display:grid;gap:10px;position:sticky;top:100px}
.gd-steps li{position:relative;padding:14px 16px 14px 52px;border:1px solid var(--line);border-radius:14px;background:var(--card);opacity:.55;transition:opacity .4s,border-color .4s,transform .4s}
.gd-steps li::before{content:attr(data-step);position:absolute;left:14px;top:14px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font:600 13px "JetBrains Mono",monospace;background:var(--bg2);border:1px solid var(--line);color:var(--muted);transition:all .4s}
.gd-steps b{display:block;font-size:16px}
.gd-steps span{font-size:14px;color:var(--muted)}
.gd-steps li.on{opacity:1;border-color:color-mix(in srgb,var(--teal) 55%,var(--line));transform:translateX(4px)}
.gd-steps li.on::before{background:var(--teal);border-color:var(--teal);color:#0b0f1a}
.gd-steps li.done{opacity:.9}
.gd-steps li.done::before{content:"✓";background:color-mix(in srgb,var(--teal) 25%,var(--bg2));color:var(--teal);border-color:transparent}

/* phone */
.gd-phone-col{display:grid;justify-items:center;gap:16px}
.phone{position:relative;width:320px;height:640px;border-radius:46px;background:#05070d;border:1px solid #333d5c;padding:14px;box-shadow:0 50px 90px -35px rgba(0,0,0,.85),0 0 0 6px #121829,0 0 80px -20px rgba(94,234,212,.25)}
.phone-notch{position:absolute;top:22px;left:50%;translate:-50% 0;width:96px;height:26px;border-radius:14px;background:#000;z-index:3}
.phone-status{position:absolute;top:24px;left:34px;right:30px;display:flex;justify-content:space-between;font:600 13px Inter,sans-serif;color:#e8ecf5;z-index:2}
.phone.light .phone-status{color:#111827}
.phone-status .sig{font-size:10px;letter-spacing:1px;opacity:.85}
.phone-screen{position:absolute;inset:14px;border-radius:34px;overflow:hidden;background:#f4f5f8;color:#111827;display:flex;flex-direction:column}
.phone-start{position:absolute;inset:14px;border-radius:34px;display:grid;place-content:center;justify-items:center;gap:14px;text-align:center;padding:30px;background:radial-gradient(circle at 50% 40%,rgba(129,140,248,.25),rgba(5,7,13,.92) 70%);z-index:4;transition:opacity .4s}
.phone-start p{font-size:14px;color:#c5cce0;max-width:220px}
.phone-start.gone{opacity:0;pointer-events:none}
.play{padding:15px 24px;font-size:16px}

/* call screen */
.call{flex:1;display:flex;flex-direction:column;align-items:center;padding:96px 20px 40px;background:linear-gradient(#26324f,#0f1525);color:#fff;text-align:center}
.call .av{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#2563eb);display:grid;place-items:center;font:700 30px Inter,sans-serif;margin-bottom:16px}
.call b{font-size:22px}
.call .st{margin-top:6px;color:#b8c2da;font-size:15px}
.call .ring{animation:ring 1s ease-in-out infinite}
@keyframes ring{50%{opacity:.45}}
.call .end{margin-top:auto;width:64px;height:64px;border-radius:50%;background:#ef4444;display:grid;place-items:center}
.call.ended .st{color:#fca5a5}

/* messages */
.msgs-head{padding:56px 16px 10px;text-align:center;background:#fff;border-bottom:1px solid #e5e7eb}
.msgs-head .av{width:40px;height:40px;margin:0 auto 4px;border-radius:50%;background:linear-gradient(135deg,#38bdf8,#2563eb);display:grid;place-items:center;color:#fff;font-weight:700}
.msgs-head b{font-size:13px;display:block}
.msgs-head small{font-size:11px;color:#6b7280}
.msgs{flex:1;overflow-y:auto;padding:12px 12px 16px;display:flex;flex-direction:column;gap:6px;scrollbar-width:none}
.msgs::-webkit-scrollbar{display:none}
.bub{max-width:82%;padding:9px 13px;border-radius:18px;font-size:14px;line-height:1.4;animation:bub .35s cubic-bezier(.2,.8,.2,1) both;word-wrap:break-word}
@keyframes bub{from{opacity:0;transform:translateY(10px) scale(.96)}}
.bub.in{align-self:flex-start;background:#e5e7eb;color:#111827;border-bottom-left-radius:6px}
.bub.out{align-self:flex-end;background:#2563eb;color:#fff;border-bottom-right-radius:6px}
.bub a{color:inherit;font-weight:600}
.stamp{align-self:center;font-size:11px;color:#6b7280;font-weight:600;margin:8px 0 2px}
.typing{align-self:flex-start;background:#e5e7eb;border-radius:18px;padding:12px 14px;display:flex;gap:4px}
.typing.out{align-self:flex-end;background:#93b4f5}
.typing i{width:7px;height:7px;border-radius:50%;background:#6b7280;animation:dot 1s infinite}
.typing.out i{background:#fff}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes dot{30%{transform:translateY(-4px);opacity:.5}}

.card-in{align-self:flex-start;width:86%;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:12px;animation:bub .35s both;box-shadow:0 6px 16px -10px rgba(0,0,0,.3)}
.card-in h4{font-size:13px;margin-bottom:8px;color:#111827}
.slots{display:grid;gap:6px}
.slots button,.stars button{font:600 13px Inter,sans-serif;border-radius:10px;cursor:pointer;transition:transform .15s,background .2s}
.slots button{padding:9px;border:1.5px solid #2563eb;background:#fff;color:#2563eb}
.slots button:hover{background:#eff4ff}
.slots button.pick{background:#2563eb;color:#fff}
.slots button:disabled{cursor:default}
.slots button:disabled:not(.pick){opacity:.4}
.stars{display:flex;gap:4px;justify-content:center}
.stars button{width:38px;height:38px;border:0;background:none;font-size:28px;line-height:1;color:#d1d5db;padding:0}
.stars button.lit{color:#f59e0b}
.stars button:hover:not(:disabled){transform:scale(1.15)}
.stars button:disabled{cursor:default}
.hint{margin-top:8px;font-size:11px;color:#6b7280;text-align:center;animation:ring 1.4s ease-in-out infinite}
.bub .gbtn{display:block;margin-top:8px;text-align:center;padding:9px;border-radius:10px;background:#111827;color:#fff;font-size:13px;font-weight:600;text-decoration:none}
.skip{align-self:center;margin:10px 0 4px;font:600 11px "JetBrains Mono",monospace;color:#4b5563;background:#e5e7eb;padding:4px 10px;border-radius:999px}

/* owner feed */
.gd-owner{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px;position:sticky;top:100px}
.owner-head{display:flex;align-items:center;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.owner-head b{display:block;font-size:15px}
.owner-head small{color:var(--muted);font-size:12.5px}
.owner-dot{width:10px;height:10px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 4px rgba(74,222,128,.18);flex:none}
.owner-feed{list-style:none;display:grid;gap:10px;margin-top:14px;min-height:120px}
.owner-feed li{display:grid;grid-template-columns:30px 1fr;gap:4px 10px;align-items:start;padding:10px 12px;border-radius:12px;background:var(--bg2);border:1px solid var(--line);font-size:14px;animation:bub .4s both}
.owner-feed li .ic{grid-row:1/3;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;background:color-mix(in srgb,var(--c,#818cf8) 18%,transparent);color:var(--c,#818cf8)}
.owner-feed li b{font-size:14px}
.owner-feed li small{color:var(--muted);font-size:12.5px}
.owner-feed .owner-empty{display:block;color:var(--muted);text-align:center;background:none;border-style:dashed}
.owner-sum{margin-top:16px;padding:16px;border-radius:14px;background:linear-gradient(135deg,rgba(94,234,212,.12),rgba(129,140,248,.12));border:1px solid color-mix(in srgb,var(--teal) 35%,var(--line));animation:bub .5s both}
.owner-sum p{font-size:14px;color:#c5cce0}
.sum-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.sum-grid b{display:block;font:500 22px "JetBrains Mono",monospace;color:var(--teal)}
.sum-grid span{font-size:12.5px;color:var(--muted)}
.sum-note{font-weight:600;color:var(--text)!important}

.gd-cta{text-align:center}
.gd-cta .lead{margin:0 auto}
.gd-cta .cta-row{justify-content:center;margin-top:28px}

@media (max-width:1060px){
  .gd-stage{grid-template-columns:340px 1fr;gap:32px}
  .gd-steps{grid-column:1/3;position:static;grid-template-columns:repeat(5,1fr);gap:8px}
  .gd-steps li{padding:12px;padding-top:44px}
  .gd-steps li::before{top:12px}
  .gd-steps span{display:none}
  .gd-steps b{font-size:14px}
  .gd-steps li.on{transform:translateY(-3px)}
}
@media (max-width:760px){
  .gd-stage{grid-template-columns:1fr}
  .gd-steps{grid-column:auto;display:flex;overflow-x:auto;scrollbar-width:none;margin:0 -20px;padding:4px 20px}
  .gd-steps li{flex:0 0 132px}
  .gd-owner{position:static}
  .phone{width:300px;height:600px}
}
@media (prefers-reduced-motion:reduce){.bub,.card-in,.owner-feed li,.owner-sum{animation:none}.call .ring,.hint,.typing i{animation:none}}