/* Sonidly AI — shared design system (see docs/SONIDLY_DESIGN_SYSTEM.md). Light-first. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  /* Accent gradient — logo wordmark / key numbers only. Subtle calm blue (2026-07-07 rebrand). */
  --grad: linear-gradient(100deg,#1D79E9 0%,#3D9BFF 100%);
  --grad-2: linear-gradient(120deg,#1D79E9 0%,#3D9BFF 100%);
  /* Buttons/interactive = solid brand blue. --primary-strong = AA-safe on white (links, small text). */
  --primary:#1D79E9; --primary-strong:#135FBC; --accent:#2E90FA;
  --ink:#16181D; --ink2:#565B66; --ink3:#838185;
  /* Cool surface system: page → card → elevated → field, very light cool borders. */
  --bg:#F7F7F7; --bg-soft:#F2F4F7; --surface:#FFFFFF; --surface-2:#FCFCFC;
  --field:#F7F8FA; --border:#E6E8EC; --border-strong:#D5D8DF; --hover:#F1F6FD;
  --success:#15A46A; --warning:#E0A118; --error:#E5484D; --info:#2E90FA;
  --radius:16px; --radius-sm:10px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(16,24,40,.04),0 2px 6px rgba(16,24,40,.06);
  --shadow-2:0 8px 24px rgba(29,121,233,.20);
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  font-family:'Poppins',Inter,system-ui,sans-serif;
  background:var(--bg); color:var(--ink); min-height:100vh; padding:20px;
  line-height:1.5;
}
.glow{position:fixed;inset:0;z-index:-1;
  background:radial-gradient(55% 45% at 75% 15%,rgba(29,121,233,.08),transparent 70%),
             radial-gradient(45% 40% at 15% 85%,rgba(61,155,255,.10),transparent 70%);}
.wrap{max-width:480px;margin:0 auto}
.brandmark{font-weight:700;font-size:26px;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
h1{font-size:1.7rem;font-weight:700;letter-spacing:-.02em;margin:.2rem 0 .4rem}
h2{font-size:1.2rem;font-weight:600;margin:.2rem 0 .8rem}
p.sub{color:var(--ink2);margin:.2rem 0 1.4rem}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow-1);padding:22px;margin-bottom:16px}
label{display:block;font-size:.82rem;font-weight:500;color:var(--ink2);margin:0 0 6px}
input,select{width:100%;font-size:1rem;font-family:inherit;padding:13px 14px;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--field);color:var(--ink);margin-bottom:14px}
input:focus,select:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 3px rgba(29,121,233,.18)}
input.invalid,select.invalid,.invalid{border-color:var(--error)!important;box-shadow:0 0 0 3px rgba(229,72,77,.18)}
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;font-family:inherit;
  font-size:1.05rem;font-weight:600;padding:15px;border:0;border-radius:var(--radius-pill);cursor:pointer;
  text-align:center;line-height:1.2;
  color:#fff;background:var(--primary);box-shadow:var(--shadow-2);transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(.95)} .btn:active{transform:translateY(1px);background:var(--primary-strong)}
.btn:disabled{opacity:.4;box-shadow:none;cursor:default}
/* Neutral secondary: white, grey border, dark text (orange is reserved for the single
   primary action per screen + text links; see SONIDLY_DESIGN_SYSTEM.md §3). */
.btn.secondary{background:#fff;color:var(--ink);border:1.5px solid var(--border);box-shadow:none}
.btn.secondary:hover{filter:none;border-color:var(--ink2);background:#fff}
.btn.secondary:active{transform:translateY(1px);background:#fff}
.btn.ghost{background:transparent;color:var(--ink2);box-shadow:none}
.btn.danger{background:var(--error);box-shadow:none}
a{color:var(--primary-strong);text-decoration:none} a:hover{text-decoration:underline}
.muted{color:var(--ink2);font-size:.88rem}
.row{display:flex;gap:10px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:.85rem;padding:6px 12px;border-radius:var(--radius-pill);
  background:var(--bg-soft);border:1px solid var(--border)}
.toggle{display:flex;gap:8px;background:var(--bg-soft);border:1px solid var(--border);border-radius:var(--radius-pill);padding:5px;margin-bottom:16px}
.toggle button{flex:1;border:0;background:transparent;font-family:inherit;font-weight:600;font-size:.95rem;
  padding:11px;border-radius:var(--radius-pill);color:var(--ink2);cursor:pointer}
.toggle button.active{background:var(--primary);color:#fff}
.err{color:var(--error);font-size:.88rem;min-height:1.1rem;margin:0 0 8px}
.ok{color:var(--success);font-size:.88rem}
.center{text-align:center}
.hide{display:none !important}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink3)}
.dot.on{background:var(--success)} .dot.warn{background:var(--warning)} .dot.off{background:var(--error)}
.list-item{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--border)}
.list-item:last-child{border-bottom:0}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}

/* ===== Technological / serious additions (balance direction) ===== */
/* faint technical grid behind content — adds structure without darkening */
.techgrid{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(rgba(14,14,18,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(14,14,18,.035) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 80%);
          mask-image:radial-gradient(120% 80% at 50% 0%,#000 30%,transparent 80%);}

/* Official Sonidly logo image (sonidly-logo-v2-primary), injected by ui.js / hero.
   2026-07-07 rebrand: the shipped PNG is still the old warm-orange wordmark, so we
   recolor it to a muted brand blue via a CSS tint filter until a blue PNG is supplied.
   (brightness(0) flattens to a silhouette, then invert/sepia/hue-rotate tints it.) */
.brandlogo{height:31px;width:auto;display:block;
  filter:brightness(0) saturate(100%) invert(31%) sepia(72%) saturate(1100%) hue-rotate(187deg) brightness(92%) contrast(90%)}
.herologo{display:inline-flex;align-items:center;justify-content:center;gap:.5rem}
.herologo .brandlogo{height:clamp(46px,9vw,64px)}

/* logo mark (mark.svg) used inline, incl. as the "o" in the wordmark */
.mark{display:inline-block;vertical-align:middle;width:1em;height:1em;flex:none}
.wordmark{display:inline-flex;align-items:center;gap:.04em;font-weight:700;
  letter-spacing:-.02em;line-height:1;white-space:nowrap}
.wordmark .gx{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.wordmark .mark{width:.86em;height:.86em;transform:translateY(.02em)} /* sits like a lowercase o */
.tag-ai{font-family:var(--mono);font-weight:600;font-size:.34em;letter-spacing:.12em;
  color:var(--primary-strong);border:1.5px solid var(--primary);border-radius:6px;
  padding:.18em .4em;margin-left:.5em;align-self:center}

/* status strip (operational / serious feel) */
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--mono);font-size:.74rem;color:var(--ink2);letter-spacing:.02em;
  padding:9px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.7);backdrop-filter:blur(6px)}
.statusbar .live{display:inline-flex;align-items:center;gap:7px;color:var(--ink)}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--success);
  box-shadow:0 0 0 0 rgba(31,181,122,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(31,181,122,.5)}70%{box-shadow:0 0 0 7px rgba(31,181,122,0)}100%{box-shadow:0 0 0 0 rgba(31,181,122,0)}}

/* metric cards */
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);
  padding:14px 12px;text-align:left}
.stat .num{font-family:var(--mono);font-weight:600;font-size:1.5rem;letter-spacing:-.02em;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1.1}
.stat .lbl{font-size:.74rem;color:var(--ink2);margin-top:4px;line-height:1.25}

/* pipeline strip — speech → STT → translate → voice */
.pipe{display:flex;align-items:stretch;gap:0;border:1px solid var(--border);
  border-radius:var(--radius-sm);overflow:hidden;background:var(--bg-soft);margin:0 0 18px}
.pipe .step{flex:1;padding:12px 8px;text-align:center;position:relative}
.pipe .step+.step{border-left:1px solid var(--border)}
.pipe .step .k{font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.pipe .step .v{font-size:.8rem;font-weight:600;color:var(--ink);margin-top:3px}
.section-k{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink3);margin:0 0 8px}

/* language switcher */
.langsel{display:inline-flex;gap:2px;background:var(--bg-soft);border:1px solid var(--border);
  border-radius:var(--radius-pill);padding:3px}
.langsel button{font-family:var(--mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;
  border:0;background:transparent;color:var(--ink2);padding:5px 9px;border-radius:var(--radius-pill);cursor:pointer}
.langsel button.active{background:var(--primary);color:#fff}
.topbar .right{display:flex;align-items:center;gap:10px}
.topbar [data-brand]{text-decoration:none;font-size:28px;display:inline-flex;align-items:center}

/* ===== Responsive desktop dashboards: 1 column on phone, 2-col grid on wide ===== */
@media (min-width:820px){
  body{padding:28px}
  .wrap.wide{max-width:1040px}
  .wrap.wide .cards{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
  .wrap.wide .cards .span2{grid-column:1 / -1}   /* full-width card when needed */
}

/* ===== FAQ / Help accordion ===== */
details.faq{border:1px solid var(--border);border-radius:var(--radius-sm);padding:0 14px;margin-bottom:10px;background:var(--surface)}
details.faq>summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;color:var(--ink)}
details.faq>summary::-webkit-details-marker{display:none}
details.faq>summary::after{content:"+";float:right;color:var(--ink3);font-weight:700}
details.faq[open]>summary::after{content:"–"}
details.faq>div{padding:0 0 14px;color:var(--ink2);line-height:1.6;font-size:.94rem}
.faq-h{font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);margin:18px 0 8px}

/* ===================================================================
   MOTION LAYER — life & dynamics (added 2026-06-23).
   Rule: animate transform/opacity only (GPU, no layout reflow),
   short durations, desktop-only hover, fully off under reduced-motion.
   =================================================================== */
@keyframes sn-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes sn-fade{from{opacity:0}to{opacity:1}}
@keyframes sn-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes sn-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes sn-ring{0%{box-shadow:0 0 0 0 rgba(29,121,233,.45)}70%{box-shadow:0 0 0 12px rgba(29,121,233,0)}100%{box-shadow:0 0 0 0 rgba(29,121,233,0)}}
@keyframes sn-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes sn-tick{0%{transform:translateY(-3px)}100%{transform:none}}

/* block appearance + stagger (ui.js sets .sn-in and per-item --d delay) */
.sn-in{opacity:0;animation:sn-rise .55s cubic-bezier(.22,.61,.36,1) forwards;animation-delay:var(--d,0ms)}
/* card re-shown after being hidden (state transition) */
.sn-reveal{animation:sn-rise .45s cubic-bezier(.22,.61,.36,1)}
/* a number that just changed gives a small tick */
.sn-bump{animation:sn-tick .25s ease}

/* soft hover — desktop pointer only, never on touch (no mobile jank) */
@media (hover:hover) and (pointer:fine){
  .card{transition:transform .2s cubic-bezier(.22,.61,.36,1),box-shadow .2s ease,border-color .2s ease}
  .card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(16,24,40,.10);border-color:var(--border-strong)}
  .stat{transition:transform .18s ease,box-shadow .18s ease}
  .stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-1)}
  .list-item{border-radius:8px;transition:background .15s ease,padding-left .15s ease}
  .list-item:hover{background:var(--bg-soft);padding-left:8px}
  .langs button{transition:transform .12s ease,border-color .15s ease,box-shadow .15s ease}
  .langs button:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:0 6px 16px rgba(29,121,233,.14)}
}
.btn{will-change:transform}

/* sound-wave equalizer — runs only when .on, sleeps otherwise (0 cost idle) */
.wave{display:inline-flex;align-items:center;gap:3px;height:22px}
.wave i{display:block;width:3px;height:100%;border-radius:3px;background:var(--primary);
  transform:scaleY(.35);transform-origin:center;opacity:.5;
  animation:sn-wave 1s ease-in-out infinite;animation-play-state:paused}
.wave.on i{animation-play-state:running;opacity:1}
.wave i:nth-child(1){animation-delay:0ms}.wave i:nth-child(2){animation-delay:120ms}
.wave i:nth-child(3){animation-delay:240ms}.wave i:nth-child(4){animation-delay:360ms}
.wave i:nth-child(5){animation-delay:180ms}.wave i:nth-child(6){animation-delay:80ms}
.wave i:nth-child(7){animation-delay:300ms}

/* live pulse ring for broadcast status */
.pulse.on{animation:sn-ring 2s infinite}

/* company usage bars grow up on render */
#uChart>div{transform-origin:bottom;animation:sn-grow .5s cubic-bezier(.22,.61,.36,1) both}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .sn-in{opacity:1!important}
  .wave i{transform:none}
}