/* Generated by scripts/build-public-css.mjs. Do not edit. */

/* tokens/fonts.css */
/* Display face: Plus Jakarta Sans, self-hosted.
   No remote @import: Google Fonts is unreachable from mainland China (the product ships
   Chinese) and a remote @import in the token layer is render-blocking — the opposite of
   the argument for keeping the UI on the system face.
   Two weights, Fontsource's LATIN subset — the unicode-range matches that subset exactly
   (no latin-ext). That is enough on purpose: the display face is only ever used for marketing
   headlines and dashboard page titles, and any locale outside latin renders those in the UI
   face, which is a system font. font-display:swap keeps first paint instant either way.

   UI face: the platform's own system font. Deliberate: the first screen is a call starting,
   so UI text must paint with zero network cost. `-apple-system` / `BlinkMacSystemFont`
   already resolve to SF Pro Display and SF Pro Text on Apple platforms, so those families
   are not named again — no webfont is shipped and nothing is substituted.
   CJK, Devanagari, Cyrillic: no script-specific family is named. Every browser falls back
   to the OS's own script face (PingFang / Hiragino / Malgun / Yu Gothic / Nirmala UI /
   Noto CJK) through the final `sans-serif`, which is both correct and instant. */
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('./assets/fonts/PlusJakartaSans-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Plus Jakarta Sans';
  src:url('./assets/fonts/PlusJakartaSans-ExtraBold.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root{
  --font-display:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-ui:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}

/* tokens/colors.css */
/* Base palette — raw values only. Semantic aliases live in themes.css. */
:root{
  /* Current Sppeak identity — navy from the official wordmark and room gradient. */
  --sp-brand-navy:#281D72;
  --sp-brand-deep:#00013C;
  --sp-brand-mist:#EDF2FA;

  /* Brand — sampled from the Sppeak.ai wordmark */
  --sp-purple-900:#1E1033;
  --sp-purple-800:#2A1745;
  --sp-purple-700:#3D2262;  /*  — brand core — 70% of the logo */
  --sp-purple-600:#4E2D7C;
  --sp-purple-500:#64409B;
  --sp-purple-400:#7E5CBA;
  --sp-purple-300:#9B8ACD;  /*  */
  --sp-purple-200:#BFB2E0;
  --sp-purple-100:#E0D9F2;
  --sp-purple-50:#F3F0FA;

  /* Neutrals — cool, very slightly purple-tinted */
  --sp-white:#FFFFFF;
  --sp-gray-50:#F7F6FB;
  --sp-gray-100:#EFEDF5;
  --sp-gray-200:#E2DFEC;
  --sp-gray-300:#CBC7DA;
  --sp-gray-400:#A29DB4;
  --sp-gray-500:#7A7590;
  --sp-gray-600:#565270;
  --sp-gray-800:#241F38;

  /* Ink — the call room substrate (shipped value: #05060d) */
  --sp-ink-950:#05060D;
  --sp-ink-900:#0A0C16;

  /* Semantic hues — carried over from the shipped app */
  --sp-green:#30D158;
  --sp-green-ink:#1F9E4A;
  /* O verde que aguenta TEXTO BRANCO por cima (10/09/2026). O --sp-green-ink
     dá 3,47:1 com branco e reprova no AA; este dá 5,09:1. Existe para
     superfícies verdes preenchidas — o selo de desconto dos planos —, não
     para texto verde sobre fundo claro, que continua sendo o -ink. */
  --sp-green-deep:#157F3A;
  --sp-amber:#FFD60A;
  --sp-orange:#FF9F0A;
  --sp-red:#FF453A;
  --sp-red-ink:#E0304F;
  /* O vermelho de OFERTA, não de erro (10/09/2026). O --sp-red-ink dá 4,46:1
     com branco e fica logo abaixo do AA; este dá 5,67:1 cheio e 5,18:1 como
     texto sobre o próprio tom claro. Vive no selo de desconto e na linha de
     economia dos planos; erro continua sendo --state-error. */
  --sp-red-deep:#C62240;
  --sp-coral:#FA5776;
  --sp-pink:#E17CB0;

  /* ====================================================================
     Tons que o produto ja usava e o sistema nao tinha (11/09/2026).
     Estavam escritos como hex solto no site e na sala porque nunca foram
     promovidos aqui — a ordem sempre foi o contrario: o que nasce num lugar
     entra no sistema para os outros aproveitarem. Os valores sao os MESMOS
     que ja estavam no ar; nada mudou de aparencia ao trazer para ca.
     O numero segue a escala das familias acima: maior = mais escuro.
     ==================================================================== */

  /* Ambar */
  --sp-amber-70:#FFEAA0;            /* 1 uso — .debug-readonly-state.degraded {color} */

  /* Azul — tipos de arquivo no chat da sala */
  --sp-blue-195:#64D2FF;            /* 1 uso — selo saía sem cor nenhuma no Chrome. .ex */

  /* Neutros intermediarios */
  --sp-gray-30:#EEF9F3;             /* 1 uso — .contact-success {background} */
  --sp-gray-70:#EEE7FC;             /* 1 uso — .contact-section {background} */
  --sp-gray-155:#D7CBED;            /* 2 usos — .conversation-label {color} */
  --sp-gray-180:#CFC4E2;            /* 2 usos — .footer-main nav a {color} */
  --sp-gray-185:#CEC2E9;            /* 1 uso — .plans-section .eyebrow {color} */
  --sp-gray-205:#C8BED8;            /* 1 uso — .demo-captions>p {color} */
  --sp-gray-220:#C4B8DB;            /* 2 usos — .demo-disclosure {color} */
  --sp-gray-225:#C4B8D6;            /* 1 uso — .caption-picker>label {color} */
  --sp-gray-260:#B6AEC9;            /* 2 usos — .hero-note {color} */
  --sp-gray-305:#ADA0C6;            /* 1 uso — .caption-label>span {color} */
  --sp-gray-395:#9687AF;            /* 1 uso — .language-pair span {color} */
  --sp-gray-425:#8B809B;            /* 2 usos — .previous-price {color} */
  --sp-gray-455:#8B749E;            /* 1 uso — .faq-plus {color} */
  --sp-gray-525:#71657E;            /* 1 uso — .experience-intro p {color} */
  --sp-gray-530:#736185;            /* 3 usos — .contact-copy>.eyebrow {color} */
  --sp-gray-545:#686276;            /* 1 uso */
  --sp-gray-555:#6A5E7C;            /* 1 uso — .experience-heading h2 {color} */
  --sp-gray-685:#493D5A;            /* 1 uso — .contact-fields label {color} */

  /* Verde — sucesso, economia e estado saudavel */
  --sp-green-50:#D9F8E6;            /* 1 uso — .home-pricing .billing-savings {background} */
  --sp-green-130:#BDDFCF;           /* 1 uso — .contact-success {border-color} */
  --sp-green-150:#A7DFBE;           /* 1 uso — .home-pricing .billing-savings {border} */
  --sp-green-605:#236044;           /* 1 uso — .home-pricing .plan-savings {color} */
  --sp-green-630:#175A3D;           /* 1 uso — .home-pricing .billing-savings {color} */
  --sp-green-650:#21533D;           /* 1 uso — .contact-success {color} */

  /* Escuros intermediarios */
  --sp-ink-875:#191529;             /* 1 uso — .video-tile {background} */
  --sp-ink-885:#171223;             /* 3 usos — .participant-role {background} */
  --sp-ink-890:#161127;             /* 1 uso — .hero-conversation {background} */
  --sp-ink-910:#100C23;             /* 1 uso — .demo-captions {background} */
  --sp-ink-915:#100827;             /* 1 uso — .footer-language-options {box-shadow} */
  --sp-ink-925:#0A0622;             /* 1 uso — .site-header {background} */
  --sp-ink-930:#08031D;             /* 2 usos — .billing-toggle button.selected {box-shadow} */

  /* Laranja */
  --sp-orange-190:#FFB3AD;          /* 5 usos — .ferr {color} */

  /* Roxos intermediarios */
  --sp-purple-170:#D6C3FF;          /* 1 uso — .footer-invitation h2 em {color} */
  --sp-purple-185:#D1BFFF;          /* 1 uso — .hero-support .copy-emphasis {color} */
  --sp-purple-215:#C6B7EF;          /* 2 usos — .hero h1 em {color} */
  --sp-purple-225:#C7B2EF;          /* 1 uso — .conversation-label>.icon {color} */
  --sp-purple-265:#BCA5EE;          /* 1 uso — .caption-translation>.icon {color} */
  --sp-purple-320:#AD96DF;          /* 1 uso — .voice-line span {background} */
  --sp-purple-350:#A78BD5;          /* 1 uso — .contact-fields input:focus,.contact-fields */
  --sp-purple-370:#9F8BBD;          /* 1 uso — .demo-pair {color} */
  --sp-purple-555:#705793;          /* 1 uso — .feature>.icon {color} */
  --sp-purple-650:#4F4277;          /* 1 uso — .conversation-demo {border} */
  --sp-purple-825:#25184E;          /* 2 usos — .site-footer .button {color} */
  --sp-purple-850:#251047;          /* 2 usos — .conversation-demo {box-shadow} */
  --sp-purple-880:#160F39;          /* 1 uso — .mobile-nav {background} */
  --sp-purple-905:#160633;          /* 1 uso — .language-options {box-shadow} */

  /* Vermelho e rosa — erro, oferta e encerrar */
  --sp-red-165:#EDC4CA;             /* 1 uso — .contact-error {border-color} */
  --sp-red-540:#BC3145;             /* 1 uso — .contact-fields [aria-invalid=true] {border- */
  --sp-red-560:#A93955;             /* 1 uso — .demo-dock .dock-end {background} */
  --sp-red-605:#992E3E;             /* 1 uso — .contact-error {color} */
}

/* tokens/typography.css */
:root{
  /* Sizes — kept at the shipped app's real values, half-pixels included */
  --text-2xs:10.5px;
  --text-xs:11.5px;
  --text-sm:12.5px;
  --text-base:13.5px;
  --text-md:15px;
  --text-lg:17px;
  --text-xl:19px;
  --text-2xl:23px;
  /* Role sizes — real values from the shipped app that sit between scale steps */
  --text-micro:11px;    /* badge counts, typing label, transfer state */
  --text-tag:12px;      /* name capsule over video, meter hint */
  --text-control:13px;  /* popover buttons, inline hints */
  --text-row:14px;      /* list-row title */
  --text-feature:14.5px;/* feature title, onboarding body */
  /* 16px is the floor for any focusable text control: below it, iOS Safari auto-zooms the
     page on focus, which throws a user out of the lobby layout mid-call-setup. Not a scale
     step — a platform constraint. */
  --text-control-min:16px;
  /* Caption sizes — a user setting, not a designer choice */
  --caption-s:.9rem;
  --caption-m:1.1rem;
  --caption-l:1.4rem;
  --text-3xl:30px;
  --text-4xl:40px;
  --text-5xl:56px;

  --lh-tight:1.2; /* @kind other */
  --lh-snug:1.35; /* @kind other */
  --lh-body:1.5; /* @kind other */
  --lh-caption:1.45; /* @kind other */

  /* Weights — SF-style numeric weights are intentional (510/550/590/650) */
  --fw-regular:400; /* @kind other */
  --fw-book:510; /* @kind other */
  --fw-medium:550; /* @kind other */
  --fw-semibold:590; /* @kind other */
  --fw-bold:650; /* @kind other */
  --fw-heavy:700; /* @kind other */
  --fw-black:800; /* @kind other */

  --ls-kicker:.22em; /* @kind other */   /* uppercase eyebrow */
  --ls-label:.14em; /* @kind other */    /* popover section heading */
  --ls-num:.03em; /* @kind other */      /* timers, clocks */
  --ls-display:-.02em; /* @kind other */ /* marketing headlines */
}

/* tokens/spacing.css */
:root{
  --space-1:2px;
  --space-2:4px;
  --space-3:6px;
  --space-4:8px;
  --space-5:10px;
  --space-6:12px;
  --space-7:14px;
  --space-8:16px;
  --space-9:18px;
  --space-10:20px;
  --space-12:24px;
  --space-14:28px;
  --space-16:32px;
  --space-18:36px;
  --space-20:40px;
  --space-22:44px;
  --space-24:48px;
  --space-28:56px;
  --space-32:64px;
  --space-40:80px;
  --space-48:96px;
  --space-56:112px;

  /* Layout */
  --gutter-page:clamp(20px,4vw,44px); /* @kind spacing */
  --maxw-prose:68ch; /* @kind spacing */
  --maxw-content:1240px; /* @kind spacing */
  --maxw-subtitle:720px; /* @kind spacing */
  --app-sidebar-width:248px; /* @kind spacing */
  --app-form-max:720px; /* @kind spacing */
  --app-auth-max:440px; /* @kind spacing */
  --app-table-min:720px; /* @kind spacing */

  /* Safe areas — the room is edge-to-edge on phones */
  --sa-t:env(safe-area-inset-top,0px);
  --sa-b:env(safe-area-inset-bottom,0px);
  --sa-l:env(safe-area-inset-left,0px);
  --sa-r:env(safe-area-inset-right,0px);

  /* Room stage insets — the space the top bar and the dock reserve over the video */
  --room-inset-top:74px;    /* @kind spacing */
  --room-inset-bottom:102px;/* @kind spacing */
  --room-edge:16px;         /* @kind spacing */

  /* Minimum hit target — every control in the room */
  --hit-min:44px; /* @kind spacing */
}

/* tokens/radius.css */
:root{
  --r-xs:8px;
  --r-sm:12px;
  --r-md:16px;
  --r-bubble:18px;    /* chat bubble */
  --r-lg:24px;        /* popovers, video tiles */
  --r-xl:32px;        /* glass cards */
  --r-window:46px;    /* the largest surfaces: lobby preview, panels */
  --r-full:999px;
}

/* tokens/elevation.css */
:root{
  /* Room / glass elevations — lifted verbatim from the shipped app */
  --shadow-card:0 24px 70px rgba(0,0,0,.35);
  --shadow-tile:0 24px 70px rgba(0,0,0,.45);
  --shadow-chip:0 8px 24px rgba(0,0,0,.25);
  --shadow-float:0 30px 80px rgba(0,0,0,.5);
  --shadow-lightbox:0 40px 120px rgba(0,0,0,.6);

  /* Site / panel elevations — soft, wide, purple-tinted */
  --shadow-xs:0 1px 2px rgba(30,16,51,.06);
  --shadow-sm:0 2px 8px rgba(30,16,51,.06),0 1px 2px rgba(30,16,51,.04);
  --shadow-md:0 8px 24px rgba(30,16,51,.08),0 2px 6px rgba(30,16,51,.04);
  --shadow-lg:0 18px 46px rgba(30,16,51,.10),0 4px 12px rgba(30,16,51,.05);
  --shadow-xl:0 30px 80px rgba(30,16,51,.14);

  /* Accent glows — current navy primary action, destructive action */
  --glow-primary:0 14px 40px rgba(40,29,114,.45),inset 0 1px 0 rgba(255,255,255,.4);
  --glow-primary-hover:0 20px 50px rgba(40,29,114,.55),inset 0 1px 0 rgba(255,255,255,.4);

  /* Recessed — inputs, tracks, segmented rails */
  --inset-recessed:inset 0 -0.5px 1px rgba(255,255,255,.3),inset 0 -0.5px 1px rgba(255,255,255,.25),inset 1px 1.5px 4px rgba(0,0,0,.08),inset 1px 1.5px 4px rgba(0,0,0,.1);
}

/* tokens/motion.css */
:root{
  /* One easing curve carries the whole system (visionOS spring-ish) */
  --ease:cubic-bezier(.32,.72,0,1); /* @kind other */
  --ease-out:cubic-bezier(.16,1,.3,1); /* @kind other */

  --dur-press:.15s; /* @kind other */
  --dur-hover:.18s; /* @kind other */
  --dur-pop:.22s; /* @kind other */
  --dur-panel:.28s; /* @kind other */
  --dur-scene:.4s; /* @kind other */
  --dur-enter:.55s; /* @kind other */

  --lift-hover:-2px; /* @kind other */      /* translateY on hover */
  --press-scale:.94; /* @kind other */      /* scale on :active for round controls */
}
@keyframes sp-rise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes sp-spin{to{transform:rotate(360deg)}}
@keyframes sp-pulse{70%{box-shadow:0 0 0 8px rgba(155,138,205,0)}100%{box-shadow:0 0 0 0 rgba(155,138,205,0)}}
@keyframes sp-pulse-live{70%{box-shadow:0 0 0 8px rgba(48,209,88,0)}100%{box-shadow:0 0 0 0 rgba(48,209,88,0)}}
@keyframes sp-pop{from{transform:scale(.3)}60%{transform:scale(1.15)}to{transform:none}}
@keyframes sp-msg-in{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:none}}
@keyframes sp-tdot{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
@media (prefers-reduced-motion:reduce){
  :root{--dur-press:.01s; /* @kind other */--dur-hover:.01s; /* @kind other */--dur-pop:.01s; /* @kind other */--dur-panel:.01s; /* @kind other */--dur-scene:.01s; /* @kind other */--dur-enter:.01s; /* @kind other */--lift-hover:0px}
}

/* tokens/themes.css */
/* Two themes, one system.
   :root / [data-theme="light"] — site, dashboard, backoffice.
   [data-theme="dark"]          — the call room, glass over live video.
   Every component reads ONLY the semantic aliases below. */
:root,[data-theme="light"]{
  color-scheme:light;

  --bg-page:var(--sp-gray-50);
  --bg-canvas:var(--sp-white);
  --surface-card:var(--sp-white);
  --surface-sunken:var(--sp-gray-100);
  --surface-raised:var(--sp-white);
  --surface-hover:rgba(61,34,98,.05);
  --surface-active:rgba(61,34,98,.09);

  --text-primary:var(--sp-purple-900);
  --text-secondary:var(--sp-gray-600);
  --text-tertiary:var(--sp-gray-500);
  --text-on-accent:var(--sp-white);
  --text-link:var(--sp-purple-600);
  --text-link-hover:var(--sp-purple-500);

  --border-subtle:var(--sp-gray-200);
  --border-default:var(--sp-gray-300);
  --border-strong:var(--sp-gray-400);
  --border-focus:var(--sp-purple-400);

  --accent:var(--sp-purple-700);
  --accent-soft:var(--sp-purple-50);
  --accent-soft-border:var(--sp-purple-100);
  --accent-contrast:var(--sp-purple-300);
  --accent-gradient:linear-gradient(140deg,var(--sp-brand-navy),var(--sp-brand-deep));

  --state-live:var(--sp-green-ink);
  --state-live-soft:rgba(48,209,88,.12);
  --state-translating:var(--sp-purple-500);
  --state-translating-soft:rgba(100,64,155,.10);
  --state-waiting:var(--sp-gray-400);
  --state-waiting-soft:var(--sp-gray-100);
  --state-unstable:#B87F00;
  --state-unstable-soft:rgba(255,214,10,.16);
  --state-low:#C2560B;
  --state-low-soft:rgba(255,159,10,.14);
  --state-error:var(--sp-red-ink);
  --state-error-soft:rgba(250,87,118,.10);

  --focus-ring:0 0 0 3px rgba(126,92,186,.35);
  --shadow-e1:var(--shadow-sm);
  --shadow-e2:var(--shadow-md);
  --shadow-e3:var(--shadow-lg);
  /* Sombra própria de botão (06/10/2026): a de elevação, no escuro, é de cartão e ficava enorme. */
  --shadow-button:var(--shadow-sm);
  --shadow-button-hover:var(--shadow-md);
  --action-shadow-primary:0 2px 6px rgba(40,29,114,.24),inset 0 1px 0 rgba(255,255,255,.24);
  --action-shadow-primary-hover:0 4px 12px rgba(40,29,114,.32),inset 0 1px 0 rgba(255,255,255,.24);
  --radius-surface:var(--r-md);
  --radius-surface-compact:var(--r-sm);

  --glass-fill:rgba(255,255,255,.66);
  --glass-blur:blur(28px) saturate(160%); /* @kind other */
  --glass-border:rgba(61,34,98,.10);
  --glass-tint:rgba(255,255,255,.4);
  --chip-fill:rgba(255,255,255,.78);

  --scrim:rgba(30,16,51,.35);
}

[data-theme="dark"]{
  color-scheme:dark;

  --bg-page:var(--sp-ink-950);
  --bg-canvas:var(--sp-ink-900);
  --surface-card:rgba(48,52,64,.52);
  --surface-sunken:rgba(0,0,0,.10);
  --surface-raised:rgba(48,52,64,.72);
  --surface-hover:rgba(255,255,255,.10);
  --surface-active:rgba(255,255,255,.16);

  /* visionOS vibrancy levels — unchanged from the shipped app */
  --text-primary:rgba(255,255,255,.96);
  --text-secondary:rgba(255,255,255,.60);
  --text-tertiary:rgba(255,255,255,.38);
  --text-on-accent:var(--sp-white);
  --text-link:var(--sp-purple-200);
  --text-link-hover:var(--sp-purple-100);

  --border-subtle:rgba(255,255,255,.14);
  --border-default:rgba(255,255,255,.4);
  --border-strong:rgba(255,255,255,.45);
  --border-focus:var(--sp-purple-200);

  --accent:var(--sp-purple-400);
  --accent-soft:rgba(155,138,205,.16);
  --accent-soft-border:rgba(155,138,205,.32);
  --accent-contrast:var(--sp-purple-200);
  --accent-gradient:linear-gradient(140deg,var(--sp-brand-navy),var(--sp-brand-deep));

  --state-live:var(--sp-green);
  --state-live-soft:rgba(48,209,88,.14);
  --state-translating:var(--sp-purple-200);
  --state-translating-soft:rgba(155,138,205,.16);
  --state-waiting:rgba(255,255,255,.38);
  --state-waiting-soft:rgba(255,255,255,.08);
  --state-unstable:var(--sp-amber);
  --state-unstable-soft:rgba(255,214,10,.16);
  --state-low:var(--sp-orange);
  --state-low-soft:rgba(255,159,10,.16);
  --state-error:var(--sp-red);
  --state-error-soft:rgba(255,69,58,.16);

  --focus-ring:0 0 0 2px var(--sp-purple-200);
  --shadow-e1:var(--shadow-chip);
  --shadow-e2:var(--shadow-card);
  --shadow-e3:var(--shadow-float);
  --shadow-button:0 2px 8px rgba(0,0,0,.22);
  --shadow-button-hover:0 6px 16px rgba(0,0,0,.28);
  --action-shadow-primary:var(--glow-primary);
  --action-shadow-primary-hover:var(--glow-primary-hover);
  --radius-surface:var(--r-xl);
  --radius-surface-compact:var(--r-lg);

  --glass-fill:rgba(48,52,64,.52);
  --glass-blur:blur(50px); /* @kind other */
  --glass-border:rgba(255,255,255,.4);
  --glass-tint:rgba(128,128,128,.3);
  --chip-fill:rgba(70,74,86,.62);

  --scrim:rgba(4,5,10,.5);
}

/* tokens/materials.css */
/* Materials — the glass recipes. Theme-aware: in the room they are the
   visionOS windows (blur 50 + grey 30% in luminosity blend, 1.4px luminous
   border); on the site they are frosted white over the page. */
.sp-glass{
  position:relative;
  background:var(--glass-fill);
  border:1.4px solid var(--glass-border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-e2);
}
.sp-glass::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  background:var(--glass-tint);
}
[data-theme="dark"] .sp-glass::before{mix-blend-mode:luminosity}
.sp-glass>*{position:relative}

/* Small floating chips — tooltips, tags, meters. Thinner border, less blur. */
.sp-chip-glass{
  background:var(--chip-fill);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  border:.75px solid var(--border-strong);
  box-shadow:var(--shadow-chip);
}

/* Recessed — inputs, segmented rails, slider tracks, progress */
.sp-recessed{
  background:var(--surface-sunken);
  box-shadow:var(--inset-recessed);
}

/* Protection gradient — the only reliable way to read text laid directly
   over unknown video. Used under subtitles and over tile bottoms. */
.sp-protect-bottom{
  background:linear-gradient(to top,rgba(5,6,13,.72),rgba(5,6,13,0));
}
.sp-protect-top{
  background:linear-gradient(to bottom,rgba(5,6,13,.6),rgba(5,6,13,0));
}

/* tokens/brand.css */
/* Customer branding slots.
   Sppeak customers may replace two things and only two: the logo and the room
   background image. Both are read through these tokens so nothing downstream has to
   guess. Contrast is NEVER derived from either one — see readme.md > Customer branding. */
:root{
  /* Logo slot */
  --brand-logo-h:26px;        /* @kind spacing */  /* default in site header / room chrome */
  --brand-logo-h-min:20px;    /* @kind spacing */  /* below this the wordmark stops reading */
  --brand-logo-h-max:48px;    /* @kind spacing */  /* above this it competes with the H1 */
  --brand-logo-clear:.5;      /* @kind other */    /* clear space = this x logo height, all sides */
  --brand-plate-bg:var(--sp-white);
  --brand-plate-radius:var(--r-full);
  /* A PLATE É UMA SÓ, EM TRÊS TAMANHOS (B6.7). O logotipo do cliente
     aparecia em quatro geometrias inventadas em lugares diferentes — e numa
     quarta superfície, a pré-visualização do painel, não aparecia plate
     nenhuma. O que muda entre a barra da chamada, o lobby e o site é o
     TAMANHO; a forma, o fundo e a sombra são os mesmos, e vivem aqui. */
  --brand-plate-shadow:0 10px 30px rgba(0,0,0,.18); /* @kind other */
  --brand-plate-pad-sm:4px 7px;   /* @kind spacing */
  --brand-plate-pad-md:7px 10px;  /* @kind spacing */
  --brand-plate-pad-lg:10px 14px; /* @kind spacing */
  --brand-plate-logo-h-sm:22px;   /* @kind spacing */
  --brand-plate-logo-h-md:42px;   /* @kind spacing */
  --brand-plate-logo-h-lg:64px;   /* @kind spacing */
  --brand-plate-logo-w-sm:100px;  /* @kind spacing */
  --brand-plate-logo-w-md:180px;  /* @kind spacing */
  --brand-plate-logo-w-lg:210px;  /* @kind spacing */

  /* Room background slot. --brand-bg-image is set per customer, e.g.
     style="--brand-bg-image:url(/customer/bg.jpg)". Unset = official gradient. */
  /* The official brand gradient: the room background and the customer panel
     sidebar read from the same token, so the two can never drift. */
  --brand-gradient:linear-gradient(180deg,var(--sp-brand-navy) 0%,var(--sp-brand-deep) 100%); /* @kind other */
  --brand-gradient-light:linear-gradient(180deg,var(--sp-white) 0%,var(--sp-brand-mist) 100%); /* @kind other */
  --brand-gradient-soft:linear-gradient(140deg,var(--surface-card),color-mix(in srgb,var(--sp-brand-navy) 8%,var(--surface-card))); /* @kind other */
  --brand-bg-image:none;      /* @kind other */
  --brand-bg-position:center; /* @kind other */
  /* A light fixed scrim preserves customer colors; panels and captions carry
     their own contrast surfaces. No forced blur, saturation or heavy vignette. */
  --brand-bg-scrim:rgba(5,6,13,.62); /* véu escuro igual para qualquer foto, na sala e na página pública (06/10/2026) */
  --brand-bg-veil-light:rgba(247,246,251,.82); /* véu claro: a foto atrás do painel no tema claro (06/10/2026) */
  --brand-bg-blur:0px;        /* @kind other */
}
[data-theme="dark"]{--brand-plate-bg:rgba(255,255,255,.92)}

/* The scrim stack a customer background must always sit under. */
.sp-brand-bg{position:absolute;inset:0;overflow:hidden;
  background:var(--brand-gradient)}
.sp-brand-bg[data-room-theme="light"]{
  background:var(--brand-gradient-light)}
.sp-brand-bg-image{position:absolute;inset:0;background-image:var(--brand-bg-image);
  background-size:cover;background-position:var(--brand-bg-position);
  filter:blur(var(--brand-bg-blur))}
.sp-brand-bg-scrim{position:absolute;inset:0;background:var(--brand-bg-scrim)}
.sp-brand-bg-vignette{position:absolute;inset:0;
  background:none}

/* Logo slot: clear space is padding, so nothing can crowd it. */
.sp-brandlogo{display:inline-flex;align-items:center;flex:none;
  padding:calc(var(--brand-logo-h) * var(--brand-logo-clear))}
.sp-brandlogo img{height:var(--brand-logo-h);width:auto;display:block;max-width:100%;object-fit:contain}
/* Selo BETA ao lado do logo (06/10/2026): deixa claro que o produto está em versão beta.
   Pequeno e sem fundo: só o contorno e o texto, azul-marinho no tema claro e brancos no escuro.
   Na barra roxa do Teams fica branco nos dois temas. */
.sp-beta-badge{display:inline-flex;align-items:center;justify-content:center;flex:none;height:13px;padding:0 4px;border:1px solid currentColor;border-radius:999px;background:none;color:var(--sp-brand-navy);font-family:var(--font-ui,inherit);font-size:7.5px;font-weight:500;letter-spacing:.08em;line-height:1;white-space:nowrap;text-transform:uppercase}
/* No Teams o selo fica ao lado do logo dentro do mesmo link. */
.sp-brandlogo-beta{gap:8px}
[data-theme="dark"] .sp-beta-badge,.sp-brandlogo-beta .sp-beta-badge,.sp-teams-boot-logo .sp-beta-badge{color:var(--sp-white)}
.sp-brandlogo-plate{background:var(--brand-plate-bg);border-radius:var(--brand-plate-radius);
  box-shadow:var(--shadow-e1)}

/* tokens/base.css */
/* Minimal element defaults. Components carry their own styling. */
.sp-root,.sp-root *,.sp-root *::before,.sp-root *::after{box-sizing:border-box}
.sp-root{
  margin:0;
  min-height:100dvh;
  font-family:var(--font-ui);
  color:var(--text-primary);
  background:var(--bg-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:2px}
.sp-num{font-variant-numeric:tabular-nums;letter-spacing:var(--ls-num)}
.sp-kicker{font-size:var(--text-xs);letter-spacing:var(--ls-kicker);text-transform:uppercase;font-weight:var(--fw-bold);color:var(--text-secondary)}
.sp-display{font-family:var(--font-display);letter-spacing:var(--ls-display);font-weight:var(--fw-black);line-height:var(--lh-tight)}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--r-xs)}
/* Icon defaults — 1.8 stroke, SF-Symbols-like */
.sp-ic{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.sp-ic.fill{fill:currentColor;stroke:none}

/* tokens/buttons.css */
/* Semantic operations, independent of product or destination.
   Re-resolve semantic colors inside nested theme surfaces, such as the light lobby. */
:root, [data-theme="light"], [data-theme="dark"] {
  --button-action-bg: var(--sp-green-deep);
  --button-action-hover: color-mix(in srgb, var(--sp-green-deep) 85%, var(--sp-green-630));
  --button-action-fg: var(--sp-white);
  --button-danger-bg: var(--sp-red-deep);
  --button-danger-hover: color-mix(in srgb, var(--sp-red-deep) 90%, var(--sp-ink-950));
  --button-danger-fg: var(--sp-white);
  --button-neutral-bg: var(--surface-sunken);
  --button-neutral-hover: var(--surface-hover);
  --button-neutral-fg: var(--text-primary);
  --button-subtle-bg: var(--bg-page);
  --button-subtle-hover: var(--surface-sunken);
  --button-subtle-fg: var(--text-primary);
  --button-action-weight: var(--fw-semibold);
  --button-danger-weight: var(--fw-semibold);
  --button-neutral-weight: var(--fw-regular);
  --button-subtle-weight: var(--fw-regular);
  --button-height: var(--hit-min);
  --button-icon-size: var(--space-10);
  --button-gap: var(--space-5);
  --button-padding-x: var(--space-12);
  --button-padding-y: var(--space-6);
}
/* One density adjustment for every action in compact viewports. */
@media(max-width:640px){:root,[data-theme="light"],[data-theme="dark"]{--button-padding-x:var(--space-6)}}

/* tokens/blog.css */
/* Blog: editorial home, article reading and related navigation.
   Reading measures and media ratios are layout decisions, so they live here
   instead of in a Blade screen. */
:root{
  --blog-prose-max:var(--maxw-prose);
  --blog-prose-size:var(--text-lg);
  --blog-prose-lh:1.72; /* @kind other */
  --blog-prose-gap:var(--space-10);
  --blog-title-size:clamp(var(--text-3xl),4.4vw,var(--text-5xl));
  --blog-heading-size:var(--text-2xl);
  --blog-subheading-size:var(--text-xl);
  --blog-toc-width:15rem; /* @kind spacing */
  --blog-layout-gap:var(--space-28);
  --blog-card-radius:var(--r-lg);
  --blog-media-radius:var(--r-md);
  --blog-media-ratio:16/9; /* @kind other */
  --blog-media-bg:var(--brand-gradient);
  --blog-rule:var(--border-subtle);
  --blog-quote-rule:var(--accent);
  --blog-notice-info-bg:var(--accent-soft);
  --blog-notice-info-rule:var(--accent-soft-border);
  --blog-notice-warn-bg:color-mix(in srgb,var(--sp-orange) 10%,var(--surface-card));
  --blog-notice-warn-rule:color-mix(in srgb,var(--sp-orange) 38%,transparent);
  --blog-cta-bg:var(--brand-gradient);
  --blog-cta-ink:var(--sp-white);
  --blog-cta-muted:color-mix(in srgb,var(--sp-white) 78%,transparent);
  /* The public header as rendered: 64px row plus 12px of padding and the 1px rule. */
  --blog-header-h:calc(var(--space-32) + var(--space-6) + 1px); /* @kind spacing */
  --blog-carousel-max:1560px; /* @kind spacing */
  --blog-carousel-gap:var(--space-16);
  --blog-carousel-per-view:4; /* @kind other */
  --blog-feature-h:clamp(24rem,calc(100svh - var(--blog-header-h) - 15rem),38rem); /* @kind spacing */
  --blog-feature-scrim:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--sp-ink-950) 55%,transparent) 55%,var(--sp-ink-950) 100%);
  --blog-arrow-size:var(--space-20);
  /* Liquid glass over the gradient: translucent white, luminous rim, soft depth. */
  --blog-arrow-glass:color-mix(in srgb,var(--sp-white) 14%,transparent);
  --blog-arrow-glass-hover:color-mix(in srgb,var(--sp-white) 24%,transparent);
  --blog-arrow-rim:color-mix(in srgb,var(--sp-white) 40%,transparent);
  --blog-arrow-shadow:inset 0 1px 0 color-mix(in srgb,var(--sp-white) 45%,transparent),0 10px 30px rgba(0,0,0,.28); /* @kind other */
  --blog-list-max:74rem; /* @kind spacing */
  --blog-row-media-ratio:7/6; /* @kind other */
  --blog-article-hero-h:90svh; /* @kind spacing */
  --blog-article-hero-media-left:24%; /* @kind spacing */
  /* The home banner's masks: solid on the copy side, open on the photo, closed at the bottom. */
  --blog-article-hero-mask:linear-gradient(90deg,#000 0%,#000 22%,rgba(0,0,0,.8) 42%,rgba(0,0,0,.12) 70%,transparent 88%),linear-gradient(0deg,#000 0%,transparent 28%); /* @kind other */
  /* Sticky contents and anchor landings: clear of the header, with air. */
  --blog-about-logo-h:var(--space-16); /* @kind spacing */
  --blog-header-offset:calc(var(--blog-header-h) + var(--space-20)); /* @kind spacing */

  /* Backoffice */
  --blog-admin-thumb-w:calc(var(--space-40) + var(--space-16)); /* @kind spacing */
  --blog-admin-side-w:22rem; /* @kind spacing */
  --blog-admin-history-h:22rem; /* @kind spacing */
  --blog-admin-table-min:32rem; /* @kind spacing */
  --blog-admin-rich-min:calc(var(--space-40) + var(--space-8)); /* @kind spacing */
}

/* tokens/welcome.css */
/* Welcome component composition tokens. Colors inherit the existing brand/theme. */
:root {
  --welcome-stage-preview-height:240px; /* @kind spacing */
  --welcome-offer-height:560px; /* @kind spacing */
  --welcome-modal-max:1160px; /* @kind spacing */
  --welcome-offer-max:520px; /* @kind spacing */
  --welcome-heading-size:clamp(1.5rem,3vw,2.35rem); /* @kind typography */
  --welcome-price-size:clamp(2rem,4vw,2.8rem); /* @kind typography */
  --welcome-modal-pad:clamp(24px,4vw,48px); /* @kind spacing */
  --welcome-scene-min:540px; /* @kind spacing */
  --welcome-auth-height:560px; /* @kind spacing */
  --welcome-plans-height:680px; /* @kind spacing */
  --welcome-plans-max:1000px; /* @kind spacing */
  --welcome-scene-height:180px; /* @kind spacing */
  --welcome-scene-protection:linear-gradient(0deg,var(--sp-brand-deep),transparent); /* @kind color */
  --welcome-code-gap:10px; /* @kind spacing */
  --welcome-code-box-height:56px; /* @kind spacing */
  --welcome-code-size:28px; /* @kind typography */
}

/* Comparação de planos: a modal mostra o que cada plano entrega, linha a linha.
   Medidas próprias porque a tabela tem outra densidade que os cartões soltos. */
:root {
  --welcome-compare-label-col:1.15fr; /* @kind spacing */
  --welcome-compare-gap:16px; /* @kind spacing */
  --welcome-compare-row-pad:6px; /* @kind spacing */
  --welcome-compare-price-size:30px; /* @kind typography */
  --welcome-compare-name-size:var(--text-xl); /* @kind typography */
  --welcome-compare-note-size:var(--text-xs); /* @kind typography */
  --welcome-compare-row-size:var(--text-sm); /* @kind typography */
  --welcome-compare-button-size:var(--text-sm); /* @kind typography */
  --welcome-compare-check:22px; /* @kind spacing */
  --welcome-compare-pad:14px 20px 16px; /* @kind spacing */
}

/* styles/core.css */
/* Core primitives */
/* ---------- Button ---------- */
.sp-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-5);
  border:0;cursor:pointer;font:inherit;font-family:var(--font-ui);font-weight:var(--fw-semibold);
  border-radius:var(--r-full);white-space:normal;text-align:center;text-decoration:none;
  transition:transform var(--dur-hover) var(--ease),filter var(--dur-hover),box-shadow var(--dur-hover),background var(--dur-pop),color var(--dur-pop);
  -webkit-tap-highlight-color:transparent}
.sp-btn:hover{text-decoration:none}
.sp-btn-sm{padding:8px 16px;font-size:var(--text-base);min-height:36px}
.sp-btn-md{padding:12px 24px;font-size:var(--text-md);min-height:var(--hit-min)}
.sp-btn-lg{padding:15px 36px;font-size:var(--text-lg);min-height:52px}
.sp-btn-block{display:flex;width:100%}
.sp-btn .sp-ic{width:1.15em;height:1.15em}
.sp-btn-primary{color:var(--text-on-accent);background:var(--accent-gradient);box-shadow:var(--action-shadow-primary)}
.sp-btn-primary:hover:not(:disabled){transform:translateY(var(--lift-hover));filter:brightness(1.1);box-shadow:var(--action-shadow-primary-hover)}
.sp-btn-primary:active:not(:disabled){transform:translateY(0) scale(.99)}
.sp-btn-call{color:var(--button-action-fg);background:var(--button-action-bg);box-shadow:var(--shadow-button)}
.sp-btn-call:hover:not(:disabled){background:var(--button-action-hover);color:var(--button-action-fg);transform:translateY(var(--lift-hover));box-shadow:var(--shadow-button-hover)}
.sp-btn-call:active:not(:disabled){transform:translateY(0) scale(.99)}
.sp-btn-secondary{color:var(--text-primary);background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border-subtle)}
.sp-btn-secondary:hover:not(:disabled){transform:translateY(var(--lift-hover));background:var(--surface-hover)}
/* Google identity is a branded exception: official light colors, local Google Sans
   Medium and the standard G. Source and font license: components/settings.md. */
@font-face{font-family:'Google Sans';font-style:normal;font-weight:500;font-display:swap;
  src:url('./assets/fonts/GoogleSans-Medium.ttf') format('truetype')}
.sp-btn-google,.sp-btn-auth-method{color:#1F1F1F;background:#FFF;box-shadow:inset 0 0 0 1px #747775;
  font-family:'Google Sans',var(--font-ui);font-weight:500;font-size:14px;line-height:20px;gap:10px;padding-inline:12px}
.sp-btn-google:hover:not(:disabled),.sp-btn-auth-method:hover:not(:disabled){transform:translateY(var(--lift-hover));
  box-shadow:inset 0 0 0 1px #747775,0 1px 2px rgba(60,64,67,.3),0 1px 3px 1px rgba(60,64,67,.15)}
.sp-btn-google .sp-ic,.sp-btn-auth-method .sp-ic{width:20px;height:20px;flex-shrink:0}
.sp-btn-google .sp-ic{stroke:none}

/* ---------- Authenticator enrollment ---------- */
/* The QR keeps its own white ground in every theme — a scanner needs the
   contrast the code was drawn with, not the one the page is wearing. */
.sp-totp-qr{display:block;width:240px;max-width:100%;height:auto;
  background:#fff;padding:var(--space-5);border-radius:var(--r-md)}
.sp-totp-secret{display:inline-block;font-family:var(--font-mono);font-size:var(--text-md);
  letter-spacing:.08em;word-break:break-all;user-select:all}
.sp-btn-ghost{color:var(--text-secondary);background:none}
.sp-btn-ghost:hover:not(:disabled){color:var(--text-primary);background:var(--surface-hover)}
.sp-btn-glass{color:var(--text-primary);background:var(--chip-fill);
  border:.75px solid var(--border-strong);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.sp-btn-glass:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.15)}
.sp-btn-solid{color:rgba(0,0,0,.85);background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sp-btn-solid:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.05)}
.sp-btn:disabled{opacity:.45;cursor:default;transform:none;filter:none}

/* ---------- IconButton ---------- */
.sp-iconbtn{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;border-radius:50%;color:var(--text-primary);background:none;padding:0;
  transition:transform var(--dur-hover) var(--ease),background var(--dur-pop),color var(--dur-pop),filter var(--dur-hover);
  -webkit-tap-highlight-color:transparent}
.sp-iconbtn-sm{width:32px;height:32px}
.sp-iconbtn-sm .sp-ic{width:15px;height:15px}
.sp-iconbtn-md{width:40px;height:40px}
.sp-iconbtn-md .sp-ic{width:19px;height:19px}
.sp-iconbtn-lg{width:44px;height:44px}
.sp-iconbtn-lg .sp-ic{width:22px;height:22px}
.sp-iconbtn:hover:not(:disabled){transform:translateY(var(--lift-hover));background:var(--surface-hover)}
.sp-iconbtn:active:not(:disabled){transform:scale(var(--press-scale))}
.sp-iconbtn-glass{background:var(--chip-fill);border:.75px solid var(--border-strong);
  -webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px)}
.sp-iconbtn-accent{color:#fff;background:var(--accent-gradient);box-shadow:0 8px 22px rgba(40,29,114,.45),inset 0 1px 0 rgba(255,255,255,.35)}
.sp-iconbtn-accent:hover:not(:disabled){filter:brightness(1.12);background:var(--accent-gradient)}
/* "off" = the control is disabled for the call (mic muted, cam off): white solid, dark glyph */
.sp-iconbtn-off{background:#fff;color:rgba(0,0,0,.85)}
.sp-iconbtn-off:hover:not(:disabled){background:#fff;filter:brightness(.96)}
.sp-iconbtn-selected{background:#fff;color:rgba(0,0,0,.85)}
.sp-iconbtn:disabled{opacity:.35;cursor:default}

/* ---------- Badge ---------- */
.sp-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  border-radius:var(--r-full);background:linear-gradient(140deg,var(--sp-coral),var(--sp-red-ink));
  color:#fff;font-size:var(--text-micro);font-weight:var(--fw-heavy);line-height:18px;text-align:center;
  box-shadow:0 4px 12px rgba(250,87,118,.5),inset 0 1px 0 rgba(255,255,255,.3);
  animation:sp-pop var(--dur-pop) var(--ease)}

/* ---------- Card ---------- */
.sp-card{border-radius:var(--radius-surface);padding:var(--space-14)}
.sp-card-plain{background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-e1)}
.sp-card-raised{background:var(--surface-card);border:1px solid var(--border-subtle);box-shadow:var(--shadow-e2)}
.sp-card-recessed{background:var(--surface-sunken);box-shadow:var(--inset-recessed)}

/* ---------- StatusPill ---------- */
.sp-status{display:inline-flex;align-items:center;gap:var(--space-3);padding:6px 12px;
  border-radius:var(--r-full);font-size:var(--text-sm);line-height:1.25;font-weight:var(--fw-medium);
  max-width:100%;text-wrap:pretty}
.sp-status>span{min-width:0}
.sp-status i{width:7px;height:7px;border-radius:50%;flex:none;display:block;margin-top:.35em;align-self:flex-start}
.sp-status-live{color:var(--state-live);background:var(--state-live-soft)}
.sp-status-live i{background:var(--state-live);animation:sp-pulse-live 2s infinite;box-shadow:0 0 0 0 rgba(48,209,88,.5)}
.sp-status-translating{color:var(--state-translating);background:var(--state-translating-soft)}
.sp-status-translating i{background:var(--state-translating);animation:sp-pulse 2s infinite;box-shadow:0 0 0 0 rgba(155,138,205,.5)}
.sp-status-waiting{color:var(--text-secondary);background:var(--state-waiting-soft)}
.sp-status-waiting i{background:var(--state-waiting)}
.sp-status-unstable{color:var(--state-unstable);background:var(--state-unstable-soft)}
.sp-status-unstable i{background:var(--state-unstable)}
.sp-status-low{color:var(--state-low);background:var(--state-low-soft)}
.sp-status-low i{background:var(--state-low)}
.sp-status-error{color:var(--state-error);background:var(--state-error-soft)}
.sp-status-error i{background:var(--state-error)}
.sp-status-neutral{color:var(--text-secondary);background:var(--surface-sunken)}
.sp-status-neutral i{background:var(--text-tertiary)}

/* ---------- Field / Input ---------- */
.sp-field{display:block;min-width:0}
.sp-field-label{display:block;font-size:var(--text-base);color:var(--text-secondary);
  margin-bottom:7px;font-weight:var(--fw-medium)}
.sp-field-hint{margin-top:7px;font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--lh-caption)}
.sp-field-error{margin-top:7px;font-size:var(--text-sm);color:var(--state-error)}
.sp-input,.sp-form input:where(:not([type]),[type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="time"]){width:100%;border:0;outline:0;font:inherit;font-size:var(--text-control-min);color:var(--text-primary);
  background:var(--surface-sunken);border-radius:var(--r-full);padding:11px 16px;
  box-shadow:var(--inset-recessed);transition:box-shadow var(--dur-pop)}
.sp-input::placeholder,.sp-form input:where(:not([type]),[type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="time"])::placeholder{color:var(--text-tertiary)}
.sp-input:focus,.sp-form input:where(:not([type]),[type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="time"]):focus{box-shadow:inset 0 0 0 1px var(--border-focus),var(--inset-recessed)}
.sp-input:disabled,.sp-form input:where(:not([type]),[type="text"],[type="email"],[type="password"],[type="search"],[type="url"],[type="tel"],[type="number"],[type="date"],[type="datetime-local"],[type="time"]):disabled{opacity:.55}
.sp-input-multiline{border-radius:20px;resize:none;line-height:1.35;max-height:110px}
.sp-textarea,.sp-form textarea{width:100%;min-height:var(--space-40);border:0;outline:0;resize:vertical;
  font:inherit;font-size:var(--text-control-min);line-height:var(--lh-body);color:var(--text-primary);
  background:var(--surface-sunken);border-radius:var(--radius-surface-compact);padding:var(--space-7) var(--space-8);
  box-shadow:var(--inset-recessed);transition:box-shadow var(--dur-pop)}
.sp-textarea::placeholder,.sp-form textarea::placeholder{color:var(--text-tertiary)}
.sp-textarea:focus,.sp-form textarea:focus{box-shadow:inset 0 0 0 1px var(--border-focus),var(--inset-recessed)}
.sp-textarea:disabled,.sp-form textarea:disabled{opacity:.55}
.sp-visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* ---------- Select (native pill) ---------- */
.sp-select{position:relative;min-width:0}
.sp-select select,.sp-selectbtn,.sp-form select{width:100%;appearance:none;-webkit-appearance:none;border:0;cursor:pointer;
  background:var(--surface-sunken);border-radius:var(--r-full);padding:11px 36px 11px 16px;
  box-shadow:var(--inset-recessed);font:inherit;font-size:var(--text-control-min);color:var(--text-primary);
  text-align:left;text-wrap:pretty;overflow-wrap:anywhere;transition:filter var(--dur-press)}
.sp-selectbtn:hover{background:var(--surface-active)}
[data-theme="dark"] .sp-selectbtn:hover{background:var(--surface-sunken);filter:brightness(1.35)}
.sp-select::after{content:'';position:absolute;right:14px;top:50%;width:8px;height:8px;pointer-events:none;
  border-right:1.6px solid var(--text-secondary);border-bottom:1.6px solid var(--text-secondary);
  transform:translateY(-70%) rotate(45deg)}
.sp-select select:disabled{opacity:.5}

/* ---------- SegmentedControl ---------- */
.sp-seg{display:flex;padding:4px;gap:2px;border-radius:var(--r-full);
  background:var(--surface-sunken);box-shadow:var(--inset-recessed)}
.sp-seg button{flex:1;min-width:0;border:0;cursor:pointer;font:inherit;padding:9px 12px;
  border-radius:var(--r-full);font-size:var(--text-md);font-weight:var(--fw-book);
  color:var(--text-secondary);background:none;text-wrap:balance;
  transition:background var(--dur-pop) var(--ease),color var(--dur-pop)}
.sp-seg button:hover{color:var(--text-primary)}
.sp-seg button[aria-pressed="true"]{background:var(--sp-white);color:var(--sp-purple-700);box-shadow:var(--shadow-xs)}
[data-theme="dark"] .sp-seg button[aria-pressed="true"]{color:rgba(0,0,0,.85);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.sp-seg-sm button{padding:6px 12px;font-size:var(--text-base)}

/* ---------- Switch ---------- */
.sp-switch{position:relative;width:46px;height:27px;flex:none;border:1px solid var(--border-strong);
  border-radius:var(--r-full);background:var(--surface-active);cursor:pointer;padding:0;
  transition:background var(--dur-panel)}
.sp-switch::after{content:'';position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;
  background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:transform var(--dur-panel) var(--ease)}
.sp-switch[aria-checked="true"]{background:var(--accent);border-color:transparent}
.sp-switch[aria-checked="true"]::after{transform:translateX(19px)}
.sp-switch:disabled{opacity:.45;cursor:default}

/* ---------- Slider ---------- */
.sp-slider{-webkit-appearance:none;appearance:none;width:130px;height:5px;border-radius:3px;
  background:var(--sp-gray-200);outline-offset:6px}
.sp-slider::-webkit-slider-thumb{-webkit-appearance:none;width:19px;height:19px;border-radius:50%;
  background:var(--accent);box-shadow:var(--shadow-sm);cursor:pointer}
.sp-slider::-moz-range-thumb{width:19px;height:19px;border-radius:50%;background:var(--accent);border:0;cursor:pointer}
[data-theme="dark"] .sp-slider{background:var(--surface-active)}
[data-theme="dark"] .sp-slider::-webkit-slider-thumb{background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
[data-theme="dark"] .sp-slider::-moz-range-thumb{background:#fff}

/* ---------- Tabs ----------
   Navegação entre seções de uma mesma tela. Não confundir com
   SegmentedControl, que escolhe um VALOR: aqui a escolha troca o que a
   página mostra, então o padrão ARIA é tablist/tab/tabpanel e as setas do
   teclado navegam. A borda inferior é a régua; o indicador é o acento. */
.sp-tabs{display:flex;gap:2px;border-bottom:1px solid var(--border-subtle);
  overflow-x:auto;scrollbar-width:none}
.sp-tabs::-webkit-scrollbar{display:none}
.sp-tab{font:inherit;font-size:14px;font-weight:600;cursor:pointer;background:none;
  border:0;color:var(--text-secondary);padding:11px 15px;position:relative;
  white-space:nowrap;display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--r-sm) var(--r-sm) 0 0;min-height:var(--hit-min)}
.sp-tab:hover{color:var(--text-primary);background:var(--surface-hover)}
.sp-tab[aria-selected="true"]{color:var(--accent)}
/* Anel por dentro: a faixa das abas rola de lado e cortava o anel do navegador (06/10/2026). */
.sp-tab:focus-visible{outline:none;box-shadow:inset var(--focus-ring)}
.sp-tab[aria-selected="true"]::after{content:'';position:absolute;left:10px;right:10px;
  bottom:-1px;height:2px;background:var(--accent);border-radius:2px 2px 0 0}
.sp-tab:disabled{opacity:.45;cursor:default}
.sp-tab .sp-tab-count{font-family:var(--font-mono);font-size:11.5px;padding:1px 6px;
  border-radius:var(--r-full);background:var(--surface-sunken);color:var(--text-tertiary);
  font-variant-numeric:tabular-nums}
.sp-tab[aria-selected="true"] .sp-tab-count{background:var(--accent-soft);color:var(--accent)}

/* ---------- Breadcrumb ----------
   Toda tela de detalhe precisa de volta explícita. O último item é o lugar
   atual e não é link — quem já está aqui não navega para cá. */
.sp-crumb{display:flex;align-items:center;gap:8px;font-size:13.5px;flex-wrap:wrap}
.sp-crumb a{color:var(--text-secondary);text-decoration:none;display:inline-flex;
  align-items:center;gap:6px;padding:4px 8px;border-radius:var(--r-sm)}
.sp-crumb a:first-child{margin-left:-8px}
.sp-crumb a:hover{background:var(--surface-hover);color:var(--text-primary)}
.sp-crumb-sep{color:var(--text-tertiary)}
.sp-crumb-here{color:var(--text-primary);font-weight:600}

/* ---------- ProvenanceChip ----------
   Diz QUEM produziu um bloco derivado: algoritmo local, gerador de reserva
   ou modelo de linguagem. Num produto que vende análise de conversa, "foi
   extraído por algoritmo" e "foi escrito por uma IA" não podem ter a mesma
   aparência — e o segundo implica ter enviado a conversa para fora. */
.sp-prov{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  padding:4px 10px 4px 8px;border-radius:var(--r-full);border:1px solid var(--border-subtle);
  background:var(--surface-sunken);color:var(--text-secondary);cursor:help}
.sp-prov i{width:7px;height:7px;border-radius:var(--r-full);flex:none;background:var(--state-waiting)}
.sp-prov-local{background:var(--state-live-soft);border-color:transparent;color:var(--state-live)}
.sp-prov-local i{background:var(--state-live)}
.sp-prov-fallback{background:var(--state-unstable-soft);border-color:transparent;color:var(--state-unstable)}
.sp-prov-fallback i{background:var(--state-unstable)}
.sp-prov-model{background:var(--accent-soft);border-color:var(--accent-soft-border);color:var(--accent)}
.sp-prov-model i{background:var(--accent)}

/* ---------- EmptyState ----------
   Um vazio sem motivo faz o usuário procurar defeito onde não há. As três
   causas são diferentes e merecem leituras diferentes: ainda não gerado,
   o plano não cobre, ou rodou e não encontrou nada.

   `sp-empty-state`, e não `sp-empty`: aquele já existe em site.css como
   texto centrado simples — `<p class="sp-empty">` está em tabela vazia,
   lista de convites e carregamento por todo o painel. Reusar o nome
   trocaria todos eles por uma caixa tracejada. */
.sp-empty-state{text-align:center;padding:34px 24px;border:1px dashed var(--border-default);
  border-radius:var(--r-md);background:var(--surface-sunken)}
.sp-empty-state-icon{color:var(--text-tertiary);margin-bottom:10px}
.sp-empty-state h4{font-family:var(--font-display);font-size:15px;margin:0 0 5px;font-weight:700}
.sp-empty-state p{margin:0 auto;max-width:44ch;font-size:13.5px;color:var(--text-secondary)}
.sp-empty-state-action{margin-top:14px}

/* Análise de chamada: a prosa que a LLM escreve tem hierarquia própria — um
   parágrafo de abertura que resume, e metadados discretos que ancoram cada
   item a quem falou e a que altura da chamada. */
.sp-lede{font-size:15px;line-height:1.55;color:var(--text-primary);margin:0 0 var(--space-5)}
.sp-tone-label{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--text-secondary);margin-bottom:var(--space-3)}
.sp-data-list-meta,.sp-commit-meta{display:block;margin-top:var(--space-2);font-size:12px;
  color:var(--text-tertiary);font-variant-numeric:tabular-nums}

/* Period calendar (sp-range-calendar): one month, two clicks, the days between
   marked. Shared by every surface that asks for a period. */
.sp-range-calendar{--range-day:var(--space-18);display:grid;gap:var(--space-5);min-width:0}
.sp-range-calendar-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.sp-range-calendar-nav>strong{flex:1;text-align:center;font-size:var(--text-control);font-weight:var(--fw-semibold);text-transform:capitalize}
.sp-range-calendar-step{width:var(--space-16);height:var(--space-16);display:grid;place-items:center;flex:none;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-secondary);font-size:var(--text-lg);line-height:1;cursor:pointer}
.sp-range-calendar-step:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.sp-range-calendar-step:disabled{opacity:.35;cursor:default}
.sp-range-calendar-step .sp-ic{width:var(--space-8);height:var(--space-8)}
.sp-range-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:var(--space-1) 0}
.sp-range-calendar-grid>*{min-width:0;height:var(--range-day);display:grid;place-items:center}
.sp-range-calendar-weekday{font-size:var(--text-micro);color:var(--text-tertiary);text-transform:uppercase;height:var(--space-12)}
.sp-range-calendar-day{border:0;background:transparent;color:var(--text-secondary);font:inherit;font-size:var(--text-control);font-variant-numeric:tabular-nums;cursor:pointer;border-radius:var(--r-sm)}
.sp-range-calendar-day:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.sp-range-calendar-day:disabled{opacity:.3;cursor:default}
.sp-range-calendar-day[aria-current="date"]{font-weight:var(--fw-bold);color:var(--text-primary)}
.sp-range-calendar-day[data-within]{background:var(--accent-soft);color:var(--accent);border-radius:0}
.sp-range-calendar-day[data-edge]{background:var(--accent);color:var(--text-on-accent);font-weight:var(--fw-semibold)}
.sp-range-calendar-day[data-edge="start"]{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.sp-range-calendar-day[data-edge="end"]{border-radius:0 var(--r-sm) var(--r-sm) 0}
.sp-range-calendar-day[data-edge="only"]{border-radius:var(--r-sm)}
.sp-range-calendar-day:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* styles/site.css */
/* Site, customer panel and backoffice composition primitives.
   Screens compose these classes; layout and visual state never live in a
   Blade/React screen, so changing the design system changes every surface. */
.sp-app-shell{display:flex;min-height:100dvh;background:var(--bg-page)}
.sp-app-sidebar{position:sticky;top:0;width:var(--app-sidebar-width);height:100dvh;flex:none;
  display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-10) var(--space-7);
  background:var(--bg-canvas);border-right:1px solid var(--border-subtle)}
.sp-app-brand{align-self:flex-start;margin:var(--space-2) var(--space-5) var(--space-9)}
.sp-app-brand:hover{text-decoration:none}
.sp-app-nav{display:flex;flex-direction:column;gap:var(--space-2)}
.sp-app-nav-link{display:flex;align-items:center;gap:var(--space-6);min-height:var(--hit-min);
  padding:var(--space-5) var(--space-6);border-radius:var(--r-md);font-size:var(--text-row);
  font-weight:var(--fw-semibold);color:var(--text-secondary);text-wrap:pretty}
.sp-app-nav-link:hover{color:var(--text-primary);background:var(--surface-hover);text-decoration:none}
.sp-app-nav-link[aria-current="page"]{color:var(--accent);background:var(--accent-soft)}
.sp-app-nav-link .sp-ic{width:var(--space-9);height:var(--space-9)}
.sp-app-sidebar-footer{display:grid;gap:var(--space-6);margin-top:auto;padding:var(--space-5)}
.sp-app-identity{display:flex;align-items:center;gap:var(--space-6);min-width:0}
.sp-app-identity-copy{min-width:0;font-size:var(--text-sm);line-height:var(--lh-caption)}
.sp-app-identity-copy strong,.sp-app-identity-copy span{display:block;overflow-wrap:anywhere}
.sp-app-identity-copy span{color:var(--text-secondary)}
/* Brand sidebar: white navigation on the official gradient. Buttons retain
   their variant's foreground. The backoffice keeps the canvas sidebar. */
.sp-app-sidebar-brand{background:var(--brand-gradient);border-right-color:transparent;color:var(--sp-white)}
.sp-app-sidebar-brand .sp-app-nav-link{color:var(--sp-white)}
.sp-app-sidebar-brand .sp-app-nav-link:hover{color:var(--sp-white);background:rgba(255,255,255,.10)}
.sp-app-sidebar-brand .sp-app-nav-link[aria-current="page"]{color:var(--sp-white);background:rgba(255,255,255,.18)}
.sp-app-sidebar-brand .sp-app-identity-copy strong,.sp-app-sidebar-brand .sp-app-identity-copy span,
.sp-app-sidebar-brand .sp-field-label{color:var(--sp-white)}
.sp-app-sidebar-brand .sp-avatar{background:rgba(255,255,255,.18);color:var(--sp-white)}
.sp-app-sidebar-brand .sp-btn-ghost{color:var(--sp-white)}
.sp-app-sidebar-brand .sp-btn-ghost:hover:not(:disabled){color:var(--sp-white);background:rgba(255,255,255,.12)}
.sp-app-sidebar-brand .sp-ic{color:inherit}
.sp-app-main{flex:1;min-width:0;padding:var(--space-14) var(--gutter-page) var(--space-24)}
.sp-app-content{width:100%;max-width:var(--maxw-content);margin-inline:auto}
.sp-page-header{display:flex;align-items:flex-start;gap:var(--space-8);margin-bottom:var(--space-12)}
.sp-page-heading{min-width:0}
.sp-page-title{margin:0;font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);line-height:var(--lh-tight);text-wrap:balance}
.sp-page-description{max-width:var(--maxw-prose);margin:var(--space-4) 0 0;color:var(--text-secondary);
  font-size:var(--text-md);line-height:var(--lh-body);text-wrap:pretty}
.sp-page-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--space-5);margin-left:auto}
.sp-stack{display:grid;gap:var(--space-8)}
.sp-stack-sm{display:grid;gap:var(--space-5)}
.sp-cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-5)}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--space-7)}
.sp-grid-wide{grid-template-columns:repeat(auto-fit,minmax(min(100%,26rem),1fr))}
.sp-metric{display:grid;gap:var(--space-3)}
.sp-metric-label{font-size:var(--text-sm);color:var(--text-secondary)}
.sp-metric-value{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--fw-black);
  letter-spacing:var(--ls-display)}
.sp-section-title{margin:0;font-size:var(--text-xl);font-weight:var(--fw-heavy);text-wrap:balance}
.sp-section-copy{margin:var(--space-3) 0 0;color:var(--text-secondary);line-height:var(--lh-body)}
.sp-section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-8)}
.sp-section-actions{display:grid;gap:var(--space-3);min-width:min(100%,13rem)}
.sp-form{display:grid;gap:var(--space-8);width:100%;max-width:var(--app-form-max)}
.sp-form-wide{max-width:none}
.sp-form label{display:grid;gap:var(--space-3);min-width:0;color:var(--text-secondary);font-size:var(--text-base);font-weight:var(--fw-medium)}
.sp-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:var(--space-7)}
.sp-form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7)}
.sp-form-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)}
.sp-form-span-full{grid-column:1/-1}
.sp-field-compact{width:min(100%,12rem);justify-self:start}
.sp-field-medium{width:min(100%,22rem);justify-self:start}
.sp-form-actions{display:flex;flex-wrap:wrap;gap:var(--space-5);align-items:center}
/* Inside a form grid the actions sit on the input's row, bottom-aligned with
   the field: stretched and centred against label + input, the button floated
   ~20px above the input (coupon and invitation forms, 15/09/2026). */
.sp-form-grid>.sp-form-actions{align-self:end}
.sp-form-actions-separated{padding-top:var(--space-7);border-top:1px solid var(--border-subtle)}
.sp-form-output,.sp-form>output{font-size:var(--text-sm);color:var(--text-secondary);min-height:1lh}
.sp-form-output[data-state="success"]{color:var(--state-live)}
.sp-form-output[data-state="error"]{color:var(--state-error)}
.sp-toolbar{display:grid;grid-template-columns:minmax(14rem,1fr) minmax(20rem,1.45fr) auto;
  gap:var(--space-7);align-items:end;width:100%;max-width:none}
.sp-toolbar .sp-form-actions{padding-bottom:1px}
.sp-search-toolbar{display:grid;grid-template-columns:minmax(18rem,1fr) auto;gap:var(--space-7);
  align-items:end;width:100%;max-width:none;padding:var(--space-10)}
.sp-search-toolbar .sp-form-output{grid-column:1/-1}
.sp-filter-bar{display:grid;grid-template-columns:minmax(16rem,2fr) repeat(3,minmax(9rem,.7fr)) auto;
  gap:var(--space-6);align-items:end;width:100%;max-width:none;padding:var(--space-10)}
.sp-filter-bar .sp-form-output{grid-column:1/-1}
.sp-workspace-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8);align-items:start}
.sp-workspace-grid-wide{grid-template-columns:minmax(0,1.65fr) minmax(18rem,.85fr)}
.sp-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-7)}
.sp-attention-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-7)}
.sp-attention-card{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);padding:var(--space-8)}
.sp-attention-card>div{display:grid;gap:var(--space-5)}
.sp-attention-card strong{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-black)}
.sp-settings-card{display:grid;gap:var(--space-9);min-width:0}
.sp-card-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-7)}
.sp-card-title{margin:0;font-size:var(--text-xl);font-weight:var(--fw-heavy);text-wrap:balance}
.sp-card-copy{margin:var(--space-2) 0 0;color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-body);text-wrap:pretty}
.sp-card-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-6);
  padding-top:var(--space-7);border-top:1px solid var(--border-subtle)}
.sp-operational-note{display:flex;align-items:flex-start;gap:var(--space-5);padding:var(--space-6) var(--space-7);
  border-radius:var(--radius-surface-compact);background:var(--accent-soft);color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-body)}
.sp-operational-note .sp-ic{width:var(--space-9);height:var(--space-9);flex:none;color:var(--accent);margin-top:2px}
.sp-result-summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.sp-avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--space-24);height:var(--space-24);
  flex:none;overflow:hidden;border-radius:50%;background:var(--accent-soft);color:var(--accent);
  font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-black)}
.sp-avatar-sm{width:var(--space-18);height:var(--space-18);font-size:var(--text-md)}
.sp-avatar img{width:100%;height:100%;object-fit:cover}
.sp-photo-editor{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-8)}
.sp-data-list{display:grid;margin:0}
.sp-data-row{display:grid;grid-template-columns:minmax(9rem,.6fr) minmax(0,1fr);gap:var(--space-8);
  padding:var(--space-7) 0;border-top:1px solid var(--border-subtle)}
.sp-data-row:first-child{border-top:0}
.sp-data-row dt{color:var(--text-secondary)}
.sp-data-row dd{margin:0;overflow-wrap:anywhere}
.sp-table-wrap{width:100%;overflow:auto;border:1px solid var(--border-subtle);border-radius:var(--radius-surface);
  background:var(--surface-card);box-shadow:var(--shadow-e1)}
.sp-table{width:100%;min-width:var(--app-table-min);border-collapse:collapse;font-size:var(--text-row)}
.sp-table th{padding:var(--space-6) var(--space-9);text-align:left;background:var(--surface-sunken);
  color:var(--text-tertiary);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-kicker);
  text-transform:uppercase}
.sp-table td{padding:var(--space-7) var(--space-9);border-top:1px solid var(--border-subtle);vertical-align:middle}
.sp-table-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--space-3)}
.sp-table-primary,.sp-table-secondary{display:block;overflow-wrap:anywhere}
.sp-table-primary{font-weight:var(--fw-semibold);color:var(--text-primary)}
.sp-table-secondary{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--text-secondary)}
.sp-pagination{display:flex;align-items:center;justify-content:center;gap:var(--space-6);padding-top:var(--space-3)}
.sp-empty{display:grid;place-items:center;gap:var(--space-5);min-height:12rem;padding:var(--space-12);
  text-align:center;color:var(--text-secondary)}
.sp-auth-shell{min-height:100dvh;display:grid;place-items:center;padding:var(--gutter-page);background:var(--bg-page)}
.sp-auth-card{width:min(100%,var(--app-auth-max));display:grid;gap:var(--space-10)}
.sp-auth-brand{justify-self:center}
/* A transit page (Teams handoff) carries one centered line under the logo, no title. */
.sp-auth-status{display:grid;justify-items:center;gap:var(--space-8);margin:0;text-align:center;color:var(--text-secondary)}
.sp-auth-status p{margin:0}
/* A decision page (member invitation): everything sits on the card axis — the brand, the
   inviting organization's logo plate, the title, the copy and the actions. */
.sp-auth-card-centered{justify-items:center;text-align:center}
.sp-auth-card-centered .sp-page-description{margin-inline:auto}
.sp-auth-card-centered .sp-form-actions{justify-content:center}
/* Same presence on the standalone login page as in the modal (16/09/2026). */
.sp-auth-card .sp-auth-brand img{height:var(--space-24);width:auto}
.sp-divider{height:1px;border:0;background:var(--border-subtle);margin:var(--space-4) 0}
.sp-alert{padding:var(--space-7) var(--space-8);border-radius:var(--radius-surface-compact);font-size:var(--text-sm);
  line-height:var(--lh-body);background:var(--surface-sunken);color:var(--text-secondary)}
.sp-alert-error{background:var(--state-error-soft);color:var(--state-error)}
.sp-alert-warning{background:var(--state-unstable-soft);color:var(--state-unstable)}
.sp-alert-success{background:var(--state-live-soft);color:var(--state-live)}
.sp-note{margin:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-body);text-wrap:pretty}
.sp-code-block{max-width:100%;overflow:auto;padding:var(--space-8);border:1px solid var(--border-subtle);
  border-radius:var(--radius-surface-compact);background:var(--surface-sunken);color:var(--text-primary);font-size:var(--text-sm)}
/* Opt-in, not the default: centring only reads as deliberate when every line
   has the same width — a list of fixed-length codes, never wrapped output. */
.sp-code-block-center{text-align:center}
.sp-dialog{width:min(calc(100% - (var(--gutter-page) * 2)),var(--app-auth-max));padding:0;border:0;
  border-radius:var(--radius-surface);color:var(--text-primary);background:var(--surface-card);box-shadow:var(--shadow-e3)}
.sp-dialog::backdrop{background:var(--scrim);backdrop-filter:blur(var(--space-2))}
.sp-dialog-body{display:grid;gap:var(--space-8);padding:var(--space-14)}
.sp-dialog-title{margin:0;font-size:var(--text-xl);font-weight:var(--fw-heavy)}
.sp-dialog-copy{margin:0;color:var(--text-secondary);line-height:var(--lh-body)}
/* A dialog is a decision, and its actions are the whole point of the surface:
   they sit centred rather than trailing an edge, one button or several, with
   the form gap keeping them apart. Status text follows the same axis so a
   result does not read as belonging to the left margin. */
.sp-dialog .sp-form-actions{justify-content:center}
.sp-dialog .sp-form-output{text-align:center}
[data-loading="true"]{cursor:progress}
[hidden]{display:none!important}

/* Public marketing site. These are composition primitives, not a parallel
   theme: all colour, type, spacing, radius and elevation still come from the
   same tokens used by the room, customer panel and backoffice. */
.sp-site{min-height:100dvh;background:var(--bg-page);color:var(--text-primary)}
.sp-site-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border-subtle);
  background:color-mix(in srgb,var(--bg-page) 88%,transparent);backdrop-filter:blur(var(--space-8))}
.sp-site-header-inner{width:100%;max-width:var(--maxw-content);min-height:var(--space-32);margin-inline:auto;
  padding:var(--space-6) var(--gutter-page);display:flex;align-items:center;gap:var(--space-8)}
.sp-site-brand{display:inline-flex;flex:none}
/* Header over the brand gradient (blog home): solid navy, the first stop
   of --brand-gradient, so it joins the section below without a seam and
   stays readable once the page scrolls under it. The white wordmark is
   the official variant, never a filtered copy. */
.sp-site-header-brand{background:var(--sp-brand-navy);border-bottom-color:color-mix(in srgb,var(--sp-white) 12%,transparent);
  backdrop-filter:none;color:var(--sp-white)}
.sp-site-header-brand .sp-site-nav-link{color:color-mix(in srgb,var(--sp-white) 78%,transparent)}
.sp-site-header-brand .sp-site-nav-link:hover,.sp-site-header-brand .sp-site-nav-link[aria-current="page"]{
  background:color-mix(in srgb,var(--sp-white) 12%,transparent);color:var(--sp-white)}
.sp-site-header-brand .sp-btn-ghost{color:color-mix(in srgb,var(--sp-white) 86%,transparent)}
.sp-site-header-brand .sp-btn-ghost:hover:not(:disabled){color:var(--sp-white);background:color-mix(in srgb,var(--sp-white) 12%,transparent)}
.sp-site-header-brand .sp-btn-primary{color:var(--sp-brand-navy);background:var(--sp-white);box-shadow:none}
.sp-site-header-brand .sp-site-account-identity{color:var(--sp-white)}
.sp-site-brand:hover{text-decoration:none}
.sp-site-nav{display:flex;align-items:center;gap:var(--space-2)}
.sp-site-nav-link{display:inline-flex;align-items:center;min-height:var(--hit-min);padding:var(--space-5) var(--space-7);
  border-radius:var(--r-full);color:var(--text-secondary);font-size:var(--text-row);font-weight:var(--fw-semibold)}
.sp-site-nav-link:hover,.sp-site-nav-link[aria-current="page"]{background:var(--surface-hover);color:var(--text-primary);text-decoration:none}
.sp-site-header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--space-4)}
.sp-site-guest,.sp-site-account{display:flex;align-items:center;gap:var(--space-4)}
.sp-site-account-identity{display:inline-flex;align-items:center;gap:var(--space-3);color:inherit;text-decoration:none;min-height:var(--hit-min)}
.sp-site-account-name{font-size:var(--text-sm);font-weight:var(--fw-semibold);max-width:16ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sp-site-language{position:relative}
.sp-site-language summary{list-style:none;cursor:pointer}
.sp-site-language summary::-webkit-details-marker{display:none}
.sp-site-language-menu{position:absolute;right:0;top:calc(100% + var(--space-3));width:min(78vw,18rem);max-height:70dvh;
  overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2);padding:var(--space-5);
  border:1px solid var(--border-subtle);border-radius:var(--radius-surface);background:var(--surface-card);box-shadow:var(--shadow-e2)}
.sp-site-language-menu a{padding:var(--space-5) var(--space-6);border-radius:var(--r-sm);font-size:var(--text-row);color:var(--text-secondary)}
.sp-site-language-menu a:hover,.sp-site-language-menu a[aria-current="true"]{background:var(--surface-hover);color:var(--text-primary);text-decoration:none}
.sp-site-main{display:block}
.sp-site-section{width:100%;max-width:var(--maxw-content);margin-inline:auto;padding:var(--space-40) var(--gutter-page)}
.sp-site-section-compact{padding-block:var(--space-28)}
.sp-site-section-heading{max-width:var(--maxw-subtitle);margin-bottom:var(--space-16)}
.sp-site-section-heading-center{margin-inline:auto;text-align:center}
.sp-site-kicker{display:block;color:var(--accent);font-size:var(--text-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase}
.sp-site-title{margin:var(--space-5) 0 0;font-family:var(--font-display);font-size:var(--text-4xl);
  font-weight:var(--fw-black);letter-spacing:var(--ls-display);line-height:var(--lh-tight);text-wrap:balance}
.sp-site-lead{margin:var(--space-6) 0 0;color:var(--text-secondary);font-size:var(--text-lg);line-height:var(--lh-body);text-wrap:pretty}
.sp-site-hero{display:grid;grid-template-columns:minmax(0,.92fr) minmax(28rem,1.08fr);gap:var(--space-24);align-items:center;
  width:100%;max-width:var(--maxw-content);margin-inline:auto;padding:var(--space-40) var(--gutter-page) var(--space-32)}
.sp-site-hero-copy{min-width:0}
.sp-site-hero-title{margin:var(--space-7) 0 0;font-family:var(--font-display);font-size:var(--text-5xl);
  font-weight:var(--fw-black);letter-spacing:var(--ls-display);line-height:var(--lh-tight);text-wrap:balance}
.sp-site-hero-body{max-width:38ch;margin:var(--space-8) 0 0;color:var(--text-secondary);font-size:var(--text-xl);
  line-height:var(--lh-body);text-wrap:pretty}
.sp-site-actions{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-12)}
.sp-site-proof{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-10)}
.sp-site-media{position:relative;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);background:var(--sp-ink-950);box-shadow:var(--shadow-e2)}
.sp-site-media video{display:block;width:100%;height:100%;object-fit:cover;background:var(--sp-ink-950)}
.sp-site-media-label{position:absolute;left:var(--space-8);right:var(--space-8);bottom:var(--space-8);display:flex;
  align-items:center;justify-content:space-between;gap:var(--space-6);padding:var(--space-6) var(--space-7);
  border:1px solid rgba(255,255,255,.18);border-radius:var(--r-sm);background:rgba(5,6,13,.78);color:rgba(255,255,255,.92);
  backdrop-filter:blur(var(--space-5));font-size:var(--text-row)}
.sp-site-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-8)}
.sp-site-feature{display:grid;gap:var(--space-5);padding:var(--space-12);border-top:1px solid var(--border-subtle)}
.sp-site-feature:first-child{border-top-color:var(--accent)}
.sp-site-feature h3,.sp-site-step h3{margin:0;font-size:var(--text-xl);font-weight:var(--fw-heavy);text-wrap:balance}
.sp-site-feature p,.sp-site-step p{margin:0;color:var(--text-secondary);font-size:var(--text-md);line-height:var(--lh-body);text-wrap:pretty}
.sp-site-step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-7);align-items:start;padding:var(--space-10)}
.sp-site-step-number{display:grid;place-items:center;width:var(--space-20);height:var(--space-20);border-radius:var(--r-full);
  background:var(--accent-soft);color:var(--accent);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--fw-black)}
.sp-site-step-copy{display:grid;gap:var(--space-4)}
.sp-site-languages{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.sp-site-language-chip{padding:var(--space-5) var(--space-7);border:1px solid var(--border-subtle);border-radius:var(--r-full);
  background:var(--surface-card);font-size:var(--text-row);color:var(--text-secondary)}
.sp-site-pricing{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-7);align-items:stretch}
.sp-site-plan{display:flex;flex-direction:column;gap:var(--space-7);padding:var(--space-12)}
.sp-site-plan[data-featured="true"]{border-color:var(--accent-soft-border);box-shadow:var(--shadow-e2)}
.sp-site-plan-name{margin:0;font-size:var(--text-xl);font-weight:var(--fw-heavy)}
.sp-site-plan-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-3)}
.sp-site-plan-actions{display:grid;gap:var(--space-3);margin-top:auto}
.sp-site-plan-price strong{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--fw-black);letter-spacing:var(--ls-display)}
.sp-site-plan-price span{color:var(--text-secondary);font-size:var(--text-sm)}
.sp-site-plan-note{color:var(--text-secondary);font-size:var(--text-sm);margin-top:var(--space-3)}
.sp-site-plan-copy{margin:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-body)}
.sp-site-plan-features{display:grid;gap:var(--space-5);margin:0;padding:0;list-style:none;color:var(--text-secondary);font-size:var(--text-row)}
.sp-site-plan-features li{display:flex;align-items:flex-start;gap:var(--space-4)}
.sp-site-plan-features .sp-ic{width:var(--space-8);height:var(--space-8);flex:none;color:var(--accent);margin-top:var(--space-1)}
.sp-site-plan .sp-btn{margin-top:auto}
/* Na grade de planos todos os botões nascem iguais, e é o HOVER que os
   preenche — inclusive o do plano em destaque, que antes já nascia navy. Um
   botão escuro parado entre botões claros dizia "este aqui" antes de a pessoa
   ter comparado nada; o destaque do card fica por conta da sombra e do selo.
   O hover é VERDE, não navy: navy é a cor da marca e está em toda parte, então
   não dizia nada sobre o que aquele clique faz. Verde é a cor de seguir
   adiante — a mesma que o dinheiro poupado usa no resto do mercado — e aqui é
   exclusiva da ação de assinar.
   Regra local à seção: `.sp-btn-secondary:hover` segue igual no painel e no
   backoffice. A sombra é verde também; herdar a navy deixaria um halo roxo
   sob um botão verde. */
.sp-site-plan .sp-btn:hover:not(:disabled){
  color:var(--sp-white);background:var(--sp-green-deep);
  box-shadow:0 4px 12px rgba(21,127,58,.32),inset 0 1px 0 rgba(255,255,255,.24)}

/* ---------- Faixa de planos: gradiente sangrado e seletor mensal/anual ----------
   (10/09/2026) A seção de planos é a única do site que troca de fundo — ela é a
   decisão comercial da página, e um card claro sobre o gradiente da marca separa
   o preço de todo o resto. O gradiente é o MESMO token da sidebar do painel
   (--brand-gradient): as duas superfícies não podem divergir.

   O max-width sai da seção e passa ao invólucro interno. Fundo na largura da
   janela, conteúdo na largura de leitura, sem nenhum truque de 100vw — que
   abriria barra de rolagem horizontal do lado com scrollbar visível. */
/* A cor clara é dada peça por peça, NUNCA herdada da seção: os cards são
   claros, e um `color:white` no topo pintaria de branco o nome e o preço
   dentro deles — texto branco sobre card branco. */
.sp-site-section-brand{max-width:none;padding-inline:0;background:var(--brand-gradient)}
.sp-site-section-inner{width:100%;max-width:var(--maxw-content);margin-inline:auto;padding-inline:var(--gutter-page)}
.sp-site-section-brand .sp-site-title{color:var(--sp-white)}
.sp-site-section-brand .sp-site-kicker{color:rgba(255,255,255,.72)}
.sp-site-section-brand .sp-site-lead{color:rgba(255,255,255,.80)}
.sp-site-section-brand .sp-site-plan{border-color:transparent}
.sp-site-section-brand .sp-site-plan[data-featured="true"]{box-shadow:var(--shadow-e3)}

/* O SELETOR NÃO TEM JAVASCRIPT. O checkbox é irmão da barra e da grade, e os
   seletores `~` abaixo decidem o que cada estado mostra: a página pública
   mantém o orçamento de performance e o preço nunca depende de um script que
   pode não ter carregado. */
.sp-site-plans{display:grid;gap:var(--space-16)}
.sp-site-plans-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-6)}
/* Fora de vista, dentro do foco: some visualmente, nunca da árvore de
   acessibilidade nem da ordem de tabulação. */
.sp-site-interval-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;white-space:nowrap;clip-path:inset(50%)}
.sp-site-interval{display:inline-flex;align-items:center;gap:var(--space-6);
  padding:var(--space-4) var(--space-8);border:1px solid rgba(255,255,255,.24);border-radius:var(--r-full);
  background:rgba(255,255,255,.10);color:var(--sp-white);font-size:var(--text-row);font-weight:var(--fw-semibold)}
.sp-site-interval-name{transition:opacity var(--dur-hover) var(--ease)}
.sp-site-interval-switch{position:relative;flex:none;width:44px;height:24px;cursor:pointer;
  border-radius:var(--r-full);background:rgba(255,255,255,.30);transition:background var(--dur-pop) var(--ease)}
/* O alvo de toque real tem a altura mínima do sistema, mesmo com o trilho
   desenhado menor. */
.sp-site-interval-switch::after{content:"";position:absolute;inset:-10px;border-radius:var(--r-full)}
.sp-site-interval-switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--r-full);
  background:var(--sp-white);transition:translate var(--dur-pop) var(--ease),background var(--dur-pop) var(--ease)}
.sp-site-interval-badge{padding:var(--space-3) var(--space-7);border-radius:var(--r-full);
  background:var(--sp-white);color:var(--sp-purple-700);font-size:var(--text-sm);font-weight:var(--fw-bold)}
.sp-site-interval-input:checked ~ .sp-site-plans-bar .sp-site-interval-switch{background:var(--sp-white)}
.sp-site-interval-input:checked ~ .sp-site-plans-bar .sp-site-interval-switch i{translate:20px 0;background:var(--sp-purple-700)}
.sp-site-interval-input:focus-visible ~ .sp-site-plans-bar .sp-site-interval-switch{outline:2px solid var(--sp-white);outline-offset:3px}
.sp-site-interval-input:checked ~ .sp-site-plans-bar [data-interval-name="month"]{opacity:.62}
.sp-site-interval-input:not(:checked) ~ .sp-site-plans-bar [data-interval-name="year"]{opacity:.62}
/* A troca em si. `display:none` — e não visibilidade ou opacidade — porque o
   intervalo oculto também precisa sair da ordem de tabulação: o teclado não
   pode alcançar um checkout que a tela não está oferecendo. */
.sp-site-interval-input:checked ~ .sp-site-pricing [data-interval="month"]{display:none}
.sp-site-interval-input:not(:checked) ~ .sp-site-pricing [data-interval="year"]{display:none}

.sp-site-plan-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-5)}
/* TRÊS CORES, TRÊS PAPÉIS (10/09/2026): vermelho é o ABATIMENTO — o "% OFF",
   como o varejo faz há décadas —, verde-suave é o DINHEIRO POUPADO na linha de
   economia logo abaixo, e verde-cheio é a AÇÃO, no hover do botão que leva ao
   checkout. Antes o navy fazia o papel da ação e não dizia nada, porque é a
   cor da marca e está na página inteira.
   O vermelho é o --sp-red-deep, não o -ink nem o --state-error: o -ink fica
   abaixo do AA sob texto branco, e erro é outra conversa. */
.sp-site-plan-badge{padding:var(--space-3) var(--space-7);border-radius:var(--r-full);background:var(--sp-red-deep);
  color:var(--sp-white);font-size:var(--text-sm);font-weight:var(--fw-black);letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;box-shadow:var(--shadow-e1)}
.sp-site-plan-prices,.sp-site-plan-offer{display:grid;gap:var(--space-3)}
/* O preço anterior riscado ocupa a LINHA INTEIRA acima do vigente. Deixá-lo
   fluir ao lado parecia melhor até o card estreitar: aí quem quebrava era o
   sufixo ("/ mês" sozinho na linha seguinte), e o preço perdia a unidade.
   Numa linha própria a composição é a mesma em qualquer largura e idioma. */
.sp-site-plan-was{flex-basis:100%;color:var(--text-tertiary);font-size:var(--text-md);
  font-weight:var(--fw-semibold);text-decoration-thickness:2px}
.sp-site-plan-billing{color:var(--text-secondary);font-size:var(--text-sm)}
/* Verde, e não o vermelho do selo: o selo anuncia o abatimento, esta linha diz
   quanto entra de volta no bolso — dinheiro poupado é verde no sistema
   inteiro. Em vermelho a linha lia como cobrança, não como ganho.
   Raio pequeno, não pleno: a frase passa de uma linha em vários idiomas, e um
   estádio de duas linhas vira mancha. */
.sp-site-plan-savings{justify-self:start;padding:var(--space-3) var(--space-6);border-radius:var(--r-sm);
  background:var(--state-live-soft);color:var(--state-live);font-size:var(--text-sm);
  font-weight:var(--fw-semibold);line-height:var(--lh-caption)}
.sp-site-band{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);padding:var(--space-16);
  border:1px solid var(--border-subtle);border-radius:var(--radius-surface);background:var(--surface-card)}
.sp-site-band-copy{max-width:var(--maxw-subtitle)}
.sp-site-band h2{margin:0;font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--fw-black);letter-spacing:var(--ls-display)}
.sp-site-band p{margin:var(--space-4) 0 0;color:var(--text-secondary);font-size:var(--text-md);line-height:var(--lh-body)}
.sp-site-enterprise{display:grid;grid-template-columns:minmax(0,.8fr) minmax(28rem,1.2fr);gap:var(--space-20);align-items:start}
.sp-site-form-card{padding:var(--space-14)}
.sp-site-consent{display:flex!important;grid-column:1/-1;grid-template-columns:auto 1fr!important;align-items:flex-start;gap:var(--space-5)!important}
.sp-site-consent input{margin-top:var(--space-2)}
.sp-site-legal{max-width:52rem}
.sp-site-legal-body{display:grid;gap:var(--space-8);margin-top:var(--space-16);color:var(--text-secondary);font-size:var(--text-md);line-height:var(--lh-body)}
.sp-site-legal-body p{margin:0;white-space:pre-line}
.sp-site-footer{border-top:1px solid var(--border-subtle);background:var(--bg-canvas)}
.sp-site-footer-inner{width:100%;max-width:var(--maxw-content);margin-inline:auto;padding:var(--space-16) var(--gutter-page);
  display:grid;grid-template-columns:minmax(15rem,1fr) repeat(2,minmax(9rem,auto));gap:var(--space-12)}
.sp-site-footer-brand{display:grid;gap:var(--space-6);max-width:28rem}
.sp-site-footer-brand p{margin:0;color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-body)}
.sp-site-footer-nav{display:grid;align-content:start;gap:var(--space-5);font-size:var(--text-row)}
.sp-site-footer-nav strong{font-size:var(--text-sm)}
.sp-site-footer-nav a{color:var(--text-secondary)}
.sp-site-footer-meta{grid-column:1/-1;padding-top:var(--space-8);border-top:1px solid var(--border-subtle);
  color:var(--text-tertiary);font-size:var(--text-sm)}
.sp-content-tabs{display:flex;gap:var(--space-3);overflow:auto;padding-bottom:var(--space-2)}
.sp-content-panel{display:none}
.sp-content-panel[data-active="true"]{display:grid}
.sp-content-field textarea{min-height:var(--space-28)}
.sp-content-field[data-long="true"] textarea{min-height:var(--space-56)}
.sp-content-locale{width:auto;max-width:none}
.sp-editor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7)}
.sp-subsection{display:grid;gap:var(--space-7);padding-top:var(--space-8)}
.sp-price-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7)}
.sp-price-form{max-width:none;padding:var(--space-7);border:1px solid var(--border-subtle);border-radius:var(--radius-surface-compact)}
.sp-price-fields{display:grid;grid-template-columns:minmax(8rem,1fr) 6rem;gap:var(--space-5)}
.sp-lead-message summary{cursor:pointer;color:var(--accent);font-weight:var(--fw-semibold)}
.sp-lead-message p{min-width:18rem;max-width:32rem;margin:var(--space-4) 0 0;color:var(--text-secondary);line-height:var(--lh-body);white-space:pre-line}
.sp-lead-status{display:grid;grid-template-columns:minmax(8rem,1fr) auto;gap:var(--space-3);align-items:center}
.sp-lead-status .sp-form-output{grid-column:1/-1}

/* Organization branding is passive public content. Contrast is never
   guessed from pixels: every logo gets the same neutral plate, while every
   background gets the same non-adaptive blur, scrim and vignette. */
.profile-brand-background{position:fixed;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);
  z-index:-2;object-fit:cover;filter:blur(12px);transform:scale(1.04)}
.profile-brand-scrim{position:fixed;inset:0;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(5,6,13,.12) 0%,rgba(5,6,13,.68) 100%),
  linear-gradient(rgba(5,6,13,.36),rgba(5,6,13,.58))}
/* A PLATE DO LOGOTIPO DO CLIENTE — UMA SÓ, EM TRÊS TAMANHOS (B6.7).
   O contrato de nunca filtrar nem inverter a marca já estava preservado; o
   que divergia era a moldura, reinventada em cada superfície. Aqui ela é
   declarada uma vez e escolhida por tamanho: `sp-customer-logo-plate` mais
   `--sm` (barra da chamada), `--md` (lobby, painel) ou `--lg` (site). */
.sp-customer-logo-plate{display:inline-flex;align-items:center;justify-content:center;
  padding:var(--brand-plate-pad-md);border-radius:12px;
  background:rgba(252,252,252,.94);box-shadow:var(--brand-plate-shadow)}
.sp-customer-logo-plate img{display:block;object-fit:contain;
  max-width:var(--brand-plate-logo-w-md);max-height:var(--brand-plate-logo-h-md);
  /* O logotipo do cliente nunca é filtrado nem invertido. */
  filter:none!important}
.sp-customer-logo-plate--sm{padding:var(--brand-plate-pad-sm);border-radius:8px;flex:none}
.sp-customer-logo-plate--sm img{max-width:var(--brand-plate-logo-w-sm);max-height:var(--brand-plate-logo-h-sm)}
.sp-customer-logo-plate--lg{padding:var(--brand-plate-pad-lg);max-width:240px}
.sp-customer-logo-plate--lg img{max-width:var(--brand-plate-logo-w-lg);max-height:var(--brand-plate-logo-h-lg)}
/* Avatar da organização (11/10/2026): redondo, com o logo enviado preenchendo e centrado,
   como no painel (.st-logo). Usado na página do convite. */
.sp-customer-logo-avatar{display:inline-grid;place-items:center;width:96px;height:96px;border-radius:50%;
  overflow:hidden;background:var(--sp-white);box-shadow:inset 0 0 0 1px var(--border-subtle),var(--brand-plate-shadow)}
.sp-customer-logo-avatar img{display:block;width:100%;height:100%;object-fit:cover;filter:none!important}

/* O nome anterior continua valendo como a variante grande: é o que o site
   público já usa em produção. */
.customer-logo-plate{display:inline-flex;align-items:center;justify-content:center;max-width:240px;
  padding:var(--brand-plate-pad-lg);border-radius:12px;
  background:rgba(252,252,252,.94);box-shadow:var(--brand-plate-shadow)}
.customer-logo-plate img{display:block;max-width:var(--brand-plate-logo-w-lg);max-height:var(--brand-plate-logo-h-lg);object-fit:contain;filter:none!important}

@media (max-width:70rem){
  .sp-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-toolbar .sp-form-actions{grid-column:1/-1}
  .sp-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-filter-bar .sp-form-actions,.sp-filter-bar .sp-form-output{grid-column:1/-1}
  .sp-workspace-grid,.sp-workspace-grid-wide{grid-template-columns:1fr}
  .sp-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-attention-grid{grid-template-columns:1fr}
  .sp-site-pricing{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-site-grid{grid-template-columns:1fr}
}

@media (max-width:48rem){
  .sp-app-shell{display:block}
  .sp-app-sidebar{position:static;width:100%;height:auto;padding:var(--space-6) var(--gutter-page);
    border-right:0;border-bottom:1px solid var(--border-subtle)}
  .sp-app-brand{margin:0}
  .sp-app-nav{flex-direction:row;overflow:auto;padding-bottom:var(--space-2)}
  .sp-app-nav-link{flex:none}
  .sp-app-sidebar-footer{display:none}
  .sp-app-main{padding-top:var(--space-10)}
  .sp-page-header{display:grid}
  .sp-page-actions{justify-content:flex-start;margin-left:0}
  .sp-section-header{display:grid;align-items:start}
  .sp-section-actions{min-width:0;width:100%}
  .sp-form-grid-2,.sp-form-grid-3,.sp-toolbar,.sp-search-toolbar,.sp-filter-bar,.sp-metric-grid,.sp-editor-grid,.sp-price-grid{grid-template-columns:1fr}
  .sp-form-span-full,.sp-toolbar .sp-form-actions,.sp-search-toolbar .sp-form-output,
  .sp-filter-bar .sp-form-actions,.sp-filter-bar .sp-form-output{grid-column:auto}
  .sp-field-compact,.sp-field-medium{width:100%}
  .sp-card-header,.sp-card-footer{display:grid}
  .sp-attention-card{display:grid}
  .sp-data-row{grid-template-columns:1fr;gap:var(--space-2)}
  .sp-site-header-inner{flex-wrap:wrap}
  .sp-site-nav{order:3;width:100%;overflow:auto}
  .sp-site-header-actions .sp-site-login{display:none}
  .sp-site-account-name{display:none}
  .sp-site-hero,.sp-site-enterprise{grid-template-columns:1fr}
  .sp-site-hero{padding-top:var(--space-24);gap:var(--space-16)}
  .sp-site-hero-title{font-size:var(--text-4xl)}
  .sp-site-media{aspect-ratio:4/3}
  .sp-site-section{padding-block:var(--space-28)}
  .sp-site-title{font-size:var(--text-3xl)}
  .sp-site-pricing{grid-template-columns:1fr}
  .sp-site-band{display:grid;padding:var(--space-12)}
  .sp-site-footer-inner{grid-template-columns:1fr}
  .sp-site-footer-meta{grid-column:auto}
}

/* ---------- Detalhe de uma chamada ----------
   Cabeçalho de identidade, turnos de conversa e métricas. A faixa do topo
   é o único lugar da tela onde o gradiente da marca aparece: identifica a
   página sem competir com o conteúdo. */
.sp-call-head{padding:0;overflow:hidden}
.sp-call-band{height:4px;background:var(--accent-gradient)}
.sp-call-head-body{padding:var(--space-8) var(--space-9);display:grid;gap:var(--space-7)}
.sp-call-meta{font-variant-numeric:tabular-nums}
.sp-call-parties{display:flex;align-items:center;gap:var(--space-6);flex-wrap:wrap;
  padding-top:var(--space-7);border-top:1px solid var(--border-subtle)}
.sp-party{display:flex;align-items:center;gap:var(--space-4)}
.sp-party-avatar{width:34px;height:34px;border-radius:var(--r-full);flex:none;display:grid;
  place-items:center;font-family:var(--font-display);font-weight:var(--fw-bold);font-size:var(--text-sm);
  color:var(--text-on-accent);background:var(--accent-gradient)}
.sp-party-name{font-weight:var(--fw-semibold);font-size:var(--text-sm);line-height:1.2}
.sp-party-langs{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.3}
.sp-party-arrow{color:var(--text-tertiary);flex:none}

/* Turnos: a transcrição é uma conversa, não uma tabela. O relógio fica na
   margem em tabulares para as horas alinharem; a bolha alterna de lado
   para que a leitura diga quem falou antes de ler o nome. */
.sp-turns{display:flex;flex-direction:column;gap:2px}
.sp-turn{display:grid;grid-template-columns:58px 1fr;gap:var(--space-4);padding:var(--space-3) 0}
.sp-turn-time{font-family:var(--font-mono);font-size:var(--text-xs);color:var(--text-tertiary);
  text-align:right;padding-top:9px;font-variant-numeric:tabular-nums}
.sp-turn-bubble{background:var(--surface-sunken);border-radius:4px var(--r-md) var(--r-md) var(--r-md);
  padding:var(--space-5) var(--space-6);max-width:78%}
.sp-turn-peer .sp-turn-bubble{background:var(--accent-soft);
  border-radius:var(--r-md) 4px var(--r-md) var(--r-md);margin-left:auto}
.sp-turn-who{font-size:var(--text-xs);font-weight:var(--fw-bold);margin-bottom:4px;
  display:flex;align-items:center;gap:7px;color:var(--text-secondary)}
.sp-turn-lang{font-family:var(--font-mono);font-size:10px;font-weight:var(--fw-semibold);
  padding:1px 5px;border-radius:3px;background:var(--surface-card);color:var(--text-tertiary);
  border:1px solid var(--border-subtle)}
.sp-turn-text{margin:0;font-size:var(--text-sm);line-height:var(--lh-body)}
.sp-turn-mark{display:flex;align-items:center;gap:var(--space-4);margin:var(--space-6) 0 var(--space-4);
  font-size:var(--text-xs);color:var(--text-tertiary);font-weight:var(--fw-semibold)}
.sp-turn-mark::before,.sp-turn-mark::after{content:'';height:1px;background:var(--border-subtle);flex:1}

/* Métricas: o número lidera, o rótulo explica, a nota qualifica. */
.sp-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:var(--border-subtle);border:1px solid var(--border-subtle);
  border-radius:var(--radius-surface-compact);overflow:hidden}
.sp-metric{background:var(--surface-card);padding:var(--space-6) var(--space-7)}
.sp-metric-label{font-size:var(--text-xs);color:var(--text-secondary);margin-bottom:5px}
.sp-metric-value{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-bold);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sp-metric-ok{color:var(--state-live)}
.sp-metric-warn{color:var(--state-unstable)}
.sp-metric-note{font-size:var(--text-xs);color:var(--text-tertiary);margin-top:3px}

/* Pontos principais numerados: a ordem é a do ranqueamento, e o número
   diz isso sem precisar de legenda. */
.sp-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-5)}
.sp-points li{display:flex;gap:var(--space-5);align-items:flex-start}
.sp-points-n{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--fw-semibold);
  flex:none;width:22px;height:22px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);margin-top:1px}
.sp-points p{margin:0;font-size:var(--text-sm);line-height:var(--lh-body)}
.sp-commit{display:flex;gap:var(--space-5);align-items:flex-start;padding:var(--space-5) var(--space-6);
  border:1px solid var(--border-subtle);border-radius:var(--radius-surface-compact);
  background:var(--surface-sunken)}
.sp-commit + .sp-commit{margin-top:var(--space-4)}
.sp-commit .sp-ic{width:16px;height:16px;color:var(--text-tertiary);margin-top:2px}

@media (max-width:640px){
  .sp-turn{grid-template-columns:44px 1fr;gap:var(--space-3)}
  .sp-turn-bubble{max-width:88%}
  .sp-call-head-body{padding:var(--space-7)}
}

/* ---------- [hidden] vence qualquer display de classe ----------
   Sem isto, um `.sp-cluster[hidden]` continua visível porque a classe
   define display e ganha da folha do navegador. */
[hidden]{display:none!important}

/* ---------- ContentTabs: sem cortar o contorno dos botões ----------
   `overflow:auto` recortava a sombra e o anel de foco das pílulas (visto
   em /ai, 02/09/2026). Poucas abas cabem numa linha; quando não couberem,
   quebram em vez de rolar. */
.sp-content-tabs{overflow:visible;flex-wrap:wrap;padding:var(--space-2) 0}

/* ---------- ChoiceGroup: escolhas em linhas, controle à direita ----------
   Um grupo recuado com título, e uma linha por escolha: rótulo (e uma
   explicação curta em `small`) à esquerda, interruptor ou select à
   direita, altura mínima de toque. Nasceu para "Abrir sala de análise". */
.sp-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr));gap:var(--space-8)}
.sp-choice-group{background:var(--surface-sunken);border-radius:var(--radius-surface-compact);
  padding:var(--space-5) var(--space-9) var(--space-6);display:grid;align-content:start;min-width:0}
.sp-choice-group-title{margin:0;padding:var(--space-4) 0 var(--space-4);font-size:var(--text-base);
  font-weight:var(--fw-semibold);color:var(--text-secondary)}
.sp-choice-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-7);
  min-height:var(--hit-min);padding:var(--space-4) 0;border-top:1px solid var(--border-subtle)}
.sp-choice-row>span:first-child{color:var(--text-primary);font-weight:var(--fw-medium);min-width:0;line-height:1.3}
.sp-choice-row small{display:block;margin-top:2px;font-size:var(--text-sm);font-weight:400;color:var(--text-tertiary);line-height:1.35}
.sp-choice-row .sp-switch{flex:none}
.sp-choice-select{width:min(100%,15rem);flex:none}
.sp-choice-select select{width:100%}

/* ---------- CardMeta: valor informativo no cabeçalho do card ----------
   Um par rótulo/valor alinhado à direita, numa linha só, para o que o
   card quer mostrar sem ser um estado (ex.: motor padrão e custo). */
.sp-card-meta{margin:0;display:grid;gap:2px;justify-items:end;text-align:right;flex:none;white-space:nowrap}
.sp-card-meta dt{font-size:var(--text-sm);color:var(--text-tertiary)}
.sp-card-meta dd{margin:0;font-weight:var(--fw-semibold);color:var(--text-primary)}
@media (max-width:640px){.sp-card-meta{justify-items:start;text-align:left;white-space:normal}}

/* Customer identity belongs above navigation; the footer keeps the exit action. */
.sp-app-sidebar-brand .sp-app-brand{align-self:center}
.sp-app-sidebar-identity{min-width:0;margin-bottom:var(--space-7)}
.sp-app-identity-link{padding:var(--space-6);border-radius:var(--r-md);color:inherit;text-decoration:none;min-height:var(--hit-min)}
.sp-app-sidebar-brand .sp-app-identity-link:hover{background:color-mix(in srgb,var(--sp-white) 10%,transparent);color:var(--sp-white);text-decoration:none}
.sp-app-identity-link .sp-avatar{flex-shrink:0}
.sp-app-identity-link:focus-visible{outline:2px solid currentColor;outline-offset:var(--space-2)}
.sp-app-sidebar-brand .sp-app-sidebar-footer>.sp-btn{justify-self:center}
@media(max-width:48rem){
 .sp-app-sidebar-brand{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-5)}
 .sp-app-sidebar-brand .sp-app-brand{grid-column:1/-1;justify-self:center}
 .sp-app-sidebar-identity{grid-column:1;margin:0}
 .sp-app-sidebar-brand .sp-app-sidebar-footer{display:grid;grid-column:2;grid-row:2;margin:0;padding:0;align-self:center}
 .sp-app-sidebar-brand .sp-app-nav{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible}
 .sp-app-sidebar-brand .sp-app-nav-link{flex-direction:column;justify-content:center;text-align:center;padding:var(--space-5) var(--space-2);gap:var(--space-3);font-size:var(--text-sm);overflow-wrap:anywhere}
}
@media(max-width:440px){
 .sp-app-sidebar-brand .sp-app-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
 .sp-app-sidebar-brand .sp-app-nav-link{flex-direction:row;justify-content:flex-start;padding-inline:var(--space-5);gap:var(--space-5)}
}

.sp-app-sidebar-identity>.sp-field{margin:var(--space-5) var(--space-6) 0;min-width:0}
.sp-app-sidebar-identity .sp-select,.sp-app-sidebar-identity select{max-width:100%;min-width:0}

/* styles/blog.css */
/* Blog: editorial home and article reading.
   Screens compose these classes over the public site shell (sp-site).
   Every recurring editorial piece lives here: featured carousel, post list,
   card, pagination, table of contents, content blocks, contextual call to
   action and related reading. */

/* ---------- Shared pieces ---------- */
.sp-blog{--blog-section-gap:var(--space-32);padding-bottom:var(--space-40)}
.sp-blog-wrap{width:100%;max-width:var(--maxw-content);margin-inline:auto;padding-inline:var(--gutter-page)}
.sp-blog-kicker{display:inline-block;color:var(--accent);font-size:var(--text-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-kicker);text-transform:uppercase}
a.sp-blog-kicker:hover{text-decoration:underline;text-underline-offset:.3em}
.sp-blog-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-6);margin:0;
  color:var(--text-secondary);font-size:var(--text-sm);line-height:var(--lh-caption)}
.sp-blog-meta>*{display:inline-flex;align-items:center;gap:var(--space-3)}
.sp-blog-meta .sp-ic{width:var(--space-7);height:var(--space-7);color:var(--text-tertiary)}
.sp-blog-media{position:relative;display:block;overflow:hidden;aspect-ratio:var(--blog-media-ratio);
  border-radius:var(--blog-media-radius);background:var(--blog-media-bg)}
.sp-blog-media img{display:block;width:100%;height:100%;object-fit:cover}
.sp-blog-section-title{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);line-height:var(--lh-tight);text-wrap:balance}

/* ---------- Blog home: featured carousel over the brand gradient ---------- */
/* The first screen is the brand gradient alone (the plans band of the home)
   with the editorial picks. Together with the navy header it fills 100svh. */
.sp-blog-hero{display:grid;align-content:center;min-height:calc(100svh - var(--blog-header-h));
  padding-block:var(--space-24) var(--space-20);background:var(--brand-gradient);color:var(--sp-white)}
.sp-blog-carousel{position:relative;width:100%;max-width:var(--blog-carousel-max);margin-inline:auto;
  padding-inline:var(--gutter-page)}
.sp-blog-carousel-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--blog-carousel-per-view) - 1) * var(--blog-carousel-gap)) / var(--blog-carousel-per-view));
  gap:var(--blog-carousel-gap);margin:0;padding:0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:var(--blog-card-radius)}
.sp-blog-carousel-track::-webkit-scrollbar{display:none}
.sp-blog-carousel[data-fits="true"] .sp-blog-carousel-track{justify-content:center}
.sp-blog-carousel-track>li{scroll-snap-align:start;min-width:0}
.sp-blog-feature{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:var(--space-7);
  height:var(--blog-feature-h);overflow:hidden;padding:var(--space-14) var(--space-12);border-radius:var(--blog-card-radius);
  background:var(--sp-ink-950);color:var(--sp-white);text-align:center;isolation:isolate}
.sp-blog-feature:hover{text-decoration:none}
.sp-blog-feature img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 30%;
  transition:transform var(--dur-scene) var(--ease)}
.sp-blog-feature::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--blog-feature-scrim)}
.sp-blog-feature:hover img{transform:scale(1.04)}
.sp-blog-feature h2{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);line-height:var(--lh-tight);text-wrap:balance}
.sp-blog-pill{display:inline-flex;align-items:center;min-height:var(--space-14);padding:var(--space-2) var(--space-7);
  border-radius:var(--r-full);background:color-mix(in srgb,var(--sp-white) 16%,transparent);
  border:.75px solid color-mix(in srgb,var(--sp-white) 45%,transparent);-webkit-backdrop-filter:blur(30px);backdrop-filter:blur(30px);
  color:var(--sp-white);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase;text-align:center}
.sp-blog-carousel-arrow{position:absolute;top:calc(var(--blog-feature-h) / 2);z-index:2;display:grid;place-items:center;
  width:var(--blog-arrow-size);height:var(--blog-arrow-size);translate:0 -50%;border-radius:var(--r-full);cursor:pointer;
  color:var(--sp-white);background:var(--blog-arrow-glass);border:1.4px solid var(--blog-arrow-rim);
  -webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);box-shadow:var(--blog-arrow-shadow);
  transition:transform var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.sp-blog-carousel-arrow:hover{background:var(--blog-arrow-glass-hover);transform:scale(1.06)}
.sp-blog-carousel-arrow:active{transform:scale(var(--press-scale))}
.sp-blog-carousel-arrow:focus-visible{outline:2px solid var(--sp-white);outline-offset:3px}
.sp-blog-carousel-arrow .sp-ic{width:var(--space-9);height:var(--space-9)}
.sp-blog-carousel-prev{left:calc(var(--gutter-page) - var(--blog-arrow-size) / 2)}
.sp-blog-carousel-next{right:calc(var(--gutter-page) - var(--blog-arrow-size) / 2)}
.sp-blog-carousel-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);margin-top:var(--space-16)}
.sp-blog-carousel-dots button{width:var(--space-5);height:var(--space-5);padding:0;border:0;border-radius:var(--r-full);
  background:color-mix(in srgb,var(--sp-white) 45%,transparent);cursor:pointer;
  transition:width var(--dur-hover) var(--ease),background var(--dur-hover) var(--ease)}
.sp-blog-carousel-dots button::after{content:"";display:block;margin:calc(var(--space-6) * -1);width:calc(100% + var(--space-12));height:calc(100% + var(--space-12))}
.sp-blog-carousel-dots button:hover{background:color-mix(in srgb,var(--sp-white) 75%,transparent)}
.sp-blog-carousel-dots button[aria-current="true"]{width:var(--space-14);background:var(--sp-purple-300)}
.sp-blog-carousel-dots button:focus-visible{outline:2px solid var(--sp-white);outline-offset:3px}
.sp-blog-carousel-arrow[hidden],.sp-blog-carousel-dots[hidden]{display:none}
/* Without script the track still scrolls and snaps; arrows and dots need it. */
.sp-blog-carousel:not([data-ready]) .sp-blog-carousel-arrow,.sp-blog-carousel:not([data-ready]) .sp-blog-carousel-dots{display:none}

/* ---------- Blog home: post list ---------- */
.sp-blog-list{display:grid;gap:var(--space-20);width:100%;max-width:var(--blog-list-max);margin:0 auto;
  padding:var(--space-40) var(--gutter-page) 0;list-style:none;counter-reset:none}
.sp-blog-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:var(--space-24);align-items:center;
  padding:var(--space-14);border-radius:var(--blog-card-radius);background:var(--surface-card);box-shadow:var(--shadow-e1)}
.sp-blog-row-media{position:relative;display:block;overflow:hidden;aspect-ratio:var(--blog-row-media-ratio);
  border-radius:var(--blog-media-radius);background:var(--blog-media-bg);box-shadow:var(--shadow-e2)}
.sp-blog-row-media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--dur-scene) var(--ease)}
.sp-blog-row:hover .sp-blog-row-media img{transform:scale(1.04)}
.sp-blog-row-body{position:relative;display:grid;align-content:center;gap:var(--space-8);min-width:0;padding-block:var(--space-8)}
.sp-blog-row h2{margin:0;font-family:var(--font-display);font-size:var(--text-3xl);font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);line-height:1.3;text-wrap:balance}
.sp-blog-row h2 a{color:var(--text-primary);text-decoration:none;
  background-image:linear-gradient(90deg,var(--sp-purple-300),var(--sp-brand-navy));background-repeat:no-repeat;
  background-position:0 100%;background-size:0% 3px;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  transition:background-size var(--dur-scene) var(--ease)}
.sp-blog-row:hover h2 a,.sp-blog-row h2 a:focus-visible{background-size:100% 3px}
.sp-blog-row-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) 0;margin:0;color:var(--text-secondary);font-size:var(--text-md)}
.sp-blog-row-meta>*{display:inline-flex;align-items:center}
.sp-blog-row-meta>*+*::before{content:"";width:2px;height:1em;margin-inline:var(--space-7);border-radius:var(--r-full);background:var(--sp-purple-300)}
.sp-blog-row-meta a{color:inherit}
.sp-blog-row-summary{margin:0;color:var(--text-secondary);font-size:var(--text-lg);line-height:var(--lh-body);text-wrap:pretty}
.sp-blog-row-go{justify-self:start;margin-top:var(--space-4)}
.sp-blog-list-filter{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6);
  width:100%;max-width:var(--blog-list-max);margin:0 auto;padding:var(--space-24) var(--gutter-page) 0;
  color:var(--text-secondary);font-size:var(--text-row)}
.sp-blog-list-filter strong{color:var(--text-primary)}
.sp-blog-list-filter+.sp-blog-list{padding-top:var(--space-12)}

/* ---------- Cards (related reading) ---------- */
.sp-blog-block-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-6) var(--space-12);
  margin-bottom:var(--space-12)}
.sp-blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-20) var(--space-12);margin:0;padding:0;list-style:none}
.sp-blog-card{display:grid;grid-template-rows:auto 1fr;gap:var(--space-8);height:100%;color:inherit}
.sp-blog-card:hover{text-decoration:none}
.sp-blog-card .sp-blog-media{transition:transform var(--dur-hover) var(--ease),box-shadow var(--dur-hover) var(--ease)}
.sp-blog-card:hover .sp-blog-media{transform:translateY(var(--lift-hover));box-shadow:var(--shadow-e2)}
.sp-blog-card-body{display:grid;align-content:start;gap:var(--space-5)}
.sp-blog-card h3{margin:0;font-size:var(--text-xl);font-weight:var(--fw-heavy);line-height:var(--lh-snug);text-wrap:balance}
.sp-blog-card:hover h3{color:var(--accent)}
.sp-blog-card p{margin:0;color:var(--text-secondary);font-size:var(--text-md);line-height:var(--lh-body);text-wrap:pretty}
.sp-blog-card .sp-blog-meta{margin-top:var(--space-2)}

.sp-blog-list-empty{display:grid;justify-items:center;gap:var(--space-6);max-width:36rem;margin:0 auto;
  padding:var(--space-40) var(--gutter-page) 0;text-align:center}
.sp-blog-list-empty h2{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-black);letter-spacing:var(--ls-display)}
.sp-blog-list-empty p{margin:0;color:var(--text-secondary);font-size:var(--text-md);line-height:var(--lh-body)}

/* ---------- Pagination ---------- */
.sp-blog-pagination{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-3);margin-top:var(--space-24)}
.sp-blog-pagination a,.sp-blog-pagination span{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);
  min-width:var(--hit-min);min-height:var(--hit-min);padding:0 var(--space-6);border-radius:var(--r-full);
  color:var(--text-secondary);font-size:var(--text-row);font-weight:var(--fw-semibold);font-variant-numeric:tabular-nums}
.sp-blog-pagination a:hover{background:var(--surface-hover);color:var(--text-primary);text-decoration:none}
.sp-blog-pagination [aria-current="page"]{background:var(--accent);color:var(--text-on-accent)}
.sp-blog-pagination [aria-disabled="true"]{opacity:.45}
.sp-blog-pagination .sp-ic{width:var(--space-8);height:var(--space-8)}
.sp-blog-pagination .sp-blog-next .sp-ic{order:2}

/* The connector motif: two points joined, the two p's of the mark. */
.sp-blog-connector{display:inline-flex;align-items:center}
.sp-blog-connector::before,.sp-blog-connector::after{content:"";width:var(--space-7);height:var(--space-7);
  border-radius:var(--r-full);background:var(--sp-purple-300)}
.sp-blog-connector i{display:block;width:var(--space-24);height:var(--space-2);background:var(--sp-purple-300)}

/* ---------- About Sppeak (discreet, once per page) ---------- */
.sp-blog-about{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-10) var(--space-16);margin-top:var(--blog-section-gap);
  padding:var(--space-14) var(--space-16);border-radius:var(--r-xl);background:var(--brand-gradient-soft);
  border:1px solid var(--blog-rule)}
.sp-blog-about-copy{flex:1 1 28rem;display:grid;gap:var(--space-4)}
.sp-blog-about h2{margin:0;font-size:var(--text-xl);font-weight:var(--fw-heavy);line-height:var(--lh-snug);text-wrap:balance}
.sp-blog-about p{margin:0;color:var(--text-secondary);font-size:var(--text-md);line-height:var(--lh-body);text-wrap:pretty}
/* The official colour wordmark on the light card: never filtered or recoloured. */
.sp-blog-about-logo{flex:none;display:block;width:auto;height:var(--blog-about-logo-h)}

/* ---------- Article: breadcrumbs and header ---------- */
.sp-blog-updated{display:flex;align-items:flex-start;gap:var(--space-5);max-width:60ch;margin:0;padding:var(--space-6) var(--space-8);
  border-radius:var(--r-sm);background:var(--surface-sunken);color:var(--text-secondary);font-size:var(--text-base);line-height:var(--lh-body)}
.sp-blog-updated .sp-ic{flex:none;width:var(--space-9);height:var(--space-9);margin-top:var(--space-1);color:var(--accent)}
.sp-blog-updated strong{color:var(--text-primary)}

/* ---------- Article: hero banner ---------- */
/* The home banner's recipe: a full-width band on the brand gradient, the
   photo from the right, the gradient masked over it so the copy on the
   left reads on navy and the photo breathes on the right; a second mask
   closes the bottom. With the navy header it fills 90svh. */
.sp-blog-article-hero{position:relative;isolation:isolate;display:grid;overflow:hidden;
  min-height:calc(var(--blog-article-hero-h) - var(--blog-header-h));background:var(--brand-gradient);color:var(--sp-white)}
.sp-blog-article-hero-media{position:absolute;inset:0 0 0 var(--blog-article-hero-media-left);z-index:-2;margin:0}
.sp-blog-article-hero-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.sp-blog-article-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--brand-gradient);
  -webkit-mask-image:var(--blog-article-hero-mask);mask-image:var(--blog-article-hero-mask)}
.sp-blog-article-hero-inner{display:grid;grid-template-rows:auto 1fr;gap:var(--space-24);padding-block:var(--space-16) var(--space-40)}
.sp-blog-article-hero-copy{display:grid;align-self:end;gap:var(--space-8);max-width:40rem}
.sp-blog-article-hero .sp-blog-kicker{justify-self:start;color:var(--sp-purple-100)}
.sp-blog-article-hero h1{margin:0;font-family:var(--font-display);font-size:var(--blog-title-size);font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);line-height:1.08;text-wrap:balance}
.sp-blog-article-hero-copy>p{margin:0;max-width:52ch;color:var(--sp-gray-200);font-size:var(--text-xl);line-height:var(--lh-body);text-wrap:pretty}
.sp-blog-breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3);margin:0;padding:0;list-style:none;
  font-size:var(--text-sm);color:color-mix(in srgb,var(--sp-white) 55%,transparent)}
.sp-blog-breadcrumbs li{display:inline-flex;align-items:center;gap:var(--space-3)}
.sp-blog-breadcrumbs li+li::before{content:"/";color:color-mix(in srgb,var(--sp-white) 35%,transparent)}
.sp-blog-breadcrumbs a{color:color-mix(in srgb,var(--sp-white) 78%,transparent)}
.sp-blog-breadcrumbs a:hover{color:var(--sp-white)}
.sp-blog-breadcrumbs [aria-current="page"]{overflow-wrap:anywhere}

/* Below the fold: dates, reading time and the update note, opening the text column. */
.sp-blog-article-meta{display:grid;gap:var(--space-8);padding-bottom:var(--space-6);border-bottom:1px solid var(--blog-rule)}
.sp-blog-article-meta .sp-blog-meta{font-size:var(--text-md)}
.sp-blog-article-meta .sp-blog-meta .sp-ic{width:var(--space-8);height:var(--space-8)}
.sp-blog-figure figcaption,.sp-blog-video figcaption{margin-top:var(--space-5);color:var(--text-tertiary);font-size:var(--text-sm);line-height:var(--lh-caption)}

/* ---------- Article: layout and table of contents ---------- */
.sp-blog-article-layout{display:grid;grid-template-columns:var(--blog-toc-width) minmax(0,var(--blog-prose-max));
  gap:var(--blog-layout-gap);justify-content:center;align-items:start;padding-top:var(--space-24)}
.sp-blog-toc{position:sticky;top:var(--blog-header-offset);display:grid;gap:var(--space-6)}
.sp-blog-toc summary{display:none}
.sp-blog-toc-title{margin:0;color:var(--text-tertiary);font-size:var(--text-xs);font-weight:var(--fw-bold);
  letter-spacing:var(--ls-label);text-transform:uppercase}
.sp-blog-toc ol{display:grid;gap:var(--space-1);margin:0;padding:0;list-style:none;counter-reset:toc;
  border-left:1px solid var(--blog-rule)}
.sp-blog-toc a{display:block;margin-left:-1px;padding:var(--space-4) var(--space-8);border-left:2px solid transparent;
  color:var(--text-secondary);font-size:var(--text-row);line-height:var(--lh-snug)}
.sp-blog-toc a:hover{color:var(--text-primary);border-left-color:var(--border-strong);text-decoration:none}
.sp-blog-toc a[aria-current="true"]{color:var(--accent);border-left-color:var(--accent);font-weight:var(--fw-heavy)}

/* ---------- Article: prose ---------- */
.sp-blog-prose{min-width:0;font-size:var(--blog-prose-size);line-height:var(--blog-prose-lh);color:var(--text-primary)}
.sp-blog-prose>*{margin:0}
.sp-blog-prose>*+*{margin-top:var(--blog-prose-gap)}
.sp-blog-prose p{text-wrap:pretty}
.sp-blog-prose h2{margin-top:var(--space-32);font-family:var(--font-display);font-size:var(--blog-heading-size);font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);line-height:var(--lh-tight);text-wrap:balance;scroll-margin-top:var(--blog-header-offset)}
.sp-blog-prose h3{margin-top:var(--space-20);font-size:var(--blog-subheading-size);font-weight:var(--fw-heavy);line-height:var(--lh-snug);
  text-wrap:balance;scroll-margin-top:var(--blog-header-offset)}
.sp-blog-prose h2+*,.sp-blog-prose h3+*{margin-top:var(--space-8)}
.sp-blog-prose ul,.sp-blog-prose ol{display:grid;gap:var(--space-5);padding-left:1.3em}
.sp-blog-prose li::marker{color:var(--accent);font-weight:var(--fw-bold)}
.sp-blog-prose a{color:var(--text-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.sp-blog-prose a:hover{color:var(--text-link-hover)}
.sp-blog-prose strong{font-weight:var(--fw-heavy)}
.sp-blog-prose>:first-child{margin-top:0}
.sp-blog-prose h2[tabindex="-1"]:focus:not(:focus-visible){outline:none}

/* ---------- Content blocks ---------- */
.sp-blog-figure{margin-inline:0}
.sp-blog-figure .sp-blog-credit{color:var(--text-tertiary)}
.sp-blog-video{margin-inline:0}
.sp-blog-video .sp-blog-media{display:grid;place-items:center}
.sp-blog-video .sp-blog-media img{position:absolute;inset:0}
.sp-blog-video .sp-blog-media iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.sp-blog-video-play{position:relative;display:grid;place-items:center;width:var(--space-40);height:var(--space-40);
  border-radius:var(--r-full);background:color-mix(in srgb,var(--sp-white) 18%,transparent);color:var(--sp-white);
  border:1.4px solid color-mix(in srgb,var(--sp-white) 45%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
.sp-blog-video-play .sp-ic{width:var(--space-12);height:var(--space-12);margin-left:var(--space-1)}
.sp-blog-transcript{margin-top:var(--space-6);border:1px solid var(--blog-rule);border-radius:var(--r-sm);background:var(--surface-card)}
.sp-blog-transcript summary{display:flex;align-items:center;gap:var(--space-4);min-height:var(--hit-min);padding:0 var(--space-8);
  cursor:pointer;color:var(--text-secondary);font-size:var(--text-row);font-weight:var(--fw-semibold)}
.sp-blog-transcript summary .sp-ic{width:var(--space-8);height:var(--space-8)}
.sp-blog-transcript div{display:grid;gap:var(--space-5);padding:0 var(--space-8) var(--space-8);color:var(--text-secondary);
  font-size:var(--text-md);line-height:var(--lh-body)}
.sp-blog-transcript p{margin:0}
.sp-blog-table{overflow-x:auto;border:1px solid var(--blog-rule);border-radius:var(--r-md);background:var(--surface-card)}
.sp-blog-table table{width:100%;min-width:32rem;border-collapse:collapse;font-size:var(--text-md);line-height:var(--lh-body)}
.sp-blog-table caption{padding:var(--space-7) var(--space-8) 0;text-align:left;color:var(--text-secondary);font-size:var(--text-sm);caption-side:top}
.sp-blog-table th,.sp-blog-table td{padding:var(--space-7) var(--space-8);text-align:left;vertical-align:top}
.sp-blog-table thead th{color:var(--text-tertiary);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);
  text-transform:uppercase;border-bottom:1px solid var(--blog-rule)}
.sp-blog-table tbody tr+tr>*{border-top:1px solid var(--blog-rule)}
.sp-blog-table tbody th{font-weight:var(--fw-heavy)}
.sp-blog-quote{margin-inline:0;padding:var(--space-4) 0 var(--space-4) var(--space-12);border-left:3px solid var(--blog-quote-rule)}
.sp-blog-quote p{font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-heavy);line-height:var(--lh-snug);
  letter-spacing:var(--ls-display);text-wrap:balance}
.sp-blog-notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-6);padding:var(--space-10) var(--space-12);
  border:1px solid var(--blog-notice-info-rule);border-radius:var(--r-md);background:var(--blog-notice-info-bg);font-size:var(--text-md);line-height:var(--lh-body)}
.sp-blog-notice>.sp-ic{width:var(--space-10);height:var(--space-10);margin-top:var(--space-1);color:var(--accent)}
.sp-blog-notice strong{display:block;margin-bottom:var(--space-2)}
.sp-blog-notice p{margin:0;color:var(--text-secondary)}
.sp-blog-notice-warn{border-color:var(--blog-notice-warn-rule);background:var(--blog-notice-warn-bg)}
.sp-blog-notice-warn>.sp-ic{color:var(--sp-red-deep)}
.sp-blog-faq{display:grid;gap:0;border-top:1px solid var(--blog-rule)}
.sp-blog-faq details{border-bottom:1px solid var(--blog-rule)}
.sp-blog-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-8);min-height:var(--hit-min);
  padding:var(--space-8) 0;cursor:pointer;list-style:none;font-weight:var(--fw-heavy);line-height:var(--lh-snug)}
.sp-blog-faq summary::-webkit-details-marker{display:none}
.sp-blog-faq summary .sp-ic{flex:none;width:var(--space-9);height:var(--space-9);color:var(--accent);
  transition:transform var(--dur-hover) var(--ease)}
.sp-blog-faq details[open] summary .sp-ic{transform:rotate(45deg)}
.sp-blog-faq details>div{padding:0 0 var(--space-10);color:var(--text-secondary);font-size:var(--text-md);line-height:var(--lh-body)}
.sp-blog-faq details>div p{margin:0}

/* ---------- Contextual call to action ---------- */
.sp-blog-cta{display:grid;gap:var(--space-6);padding:var(--space-14);border-radius:var(--r-xl);background:var(--blog-cta-bg);color:var(--blog-cta-ink)}
.sp-blog-cta .sp-blog-connector::before,.sp-blog-cta .sp-blog-connector::after,.sp-blog-cta .sp-blog-connector i{background:var(--sp-purple-200)}
.sp-blog-cta .sp-blog-connector i{width:var(--space-16)}
.sp-blog-cta h2,.sp-blog-prose .sp-blog-cta h2{margin:0;font-family:var(--font-display);font-size:var(--text-2xl);font-weight:var(--fw-black);
  letter-spacing:var(--ls-display);line-height:var(--lh-tight);color:inherit;text-wrap:balance}
.sp-blog-cta p{margin:0;color:var(--blog-cta-muted);font-size:var(--text-md);line-height:var(--lh-body);text-wrap:pretty}
.sp-blog-cta-actions{display:flex;flex-wrap:wrap;gap:var(--space-5);margin-top:var(--space-4)}
.sp-blog-prose .sp-blog-cta a{text-decoration:none}
.sp-blog-cta .sp-btn-secondary{color:var(--sp-white);background:color-mix(in srgb,var(--sp-white) 12%,transparent);
  border-color:color-mix(in srgb,var(--sp-white) 32%,transparent)}

/* ---------- Sources and related reading ---------- */
.sp-blog-sources{padding-top:var(--space-12);border-top:1px solid var(--blog-rule)}
.sp-blog-sources h2{margin:0;font-family:var(--font-ui);font-size:var(--text-md);font-weight:var(--fw-heavy);letter-spacing:0}
.sp-blog-sources ol{margin-top:var(--space-6);font-size:var(--text-base);line-height:var(--lh-body);color:var(--text-secondary)}
.sp-blog-sources .sp-ic{width:var(--space-7);height:var(--space-7);margin-left:var(--space-2);vertical-align:-.1em}
.sp-blog-related{margin-top:var(--space-40);padding-block:var(--space-32) 0;border-top:1px solid var(--blog-rule)}

/* ---------- Preview bar (public template, backoffice preview only) ---------- */
.sp-blog-preview-bar{position:fixed;left:50%;bottom:var(--space-10);z-index:40;translate:-50% 0;display:flex;align-items:center;gap:var(--space-5);
  padding:var(--space-5) var(--space-10);border-radius:var(--r-full);background:var(--sp-ink-950);color:var(--sp-white);
  font-size:var(--text-sm);font-weight:var(--fw-semibold);box-shadow:var(--shadow-e3)}
.sp-blog-preview-bar i{width:var(--space-4);height:var(--space-4);border-radius:var(--r-full);background:var(--sp-orange)}

/* ---------- Responsive ---------- */
@media (max-width:1280px){
  .sp-blog{--blog-carousel-per-view:3}
}
@media (max-width:1000px){
  .sp-blog{--blog-carousel-per-view:2}
}
@media (max-width:1100px){
  .sp-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sp-blog-article-layout{grid-template-columns:minmax(0,var(--blog-prose-max));gap:var(--space-16)}
  .sp-blog-toc{position:static;padding:0;border:1px solid var(--blog-rule);border-radius:var(--r-md);background:var(--surface-card)}
  .sp-blog-toc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);min-height:var(--hit-min);
    padding:var(--space-4) var(--space-10);cursor:pointer;list-style:none;font-size:var(--text-row);font-weight:var(--fw-semibold)}
  .sp-blog-toc summary::-webkit-details-marker{display:none}
  .sp-blog-toc summary .sp-ic{width:var(--space-8);height:var(--space-8);transition:transform var(--dur-hover) var(--ease)}
  .sp-blog-toc[open] summary .sp-ic{transform:rotate(45deg)}
  .sp-blog-toc .sp-blog-toc-title{display:none}
  .sp-blog-toc ol{margin:0 var(--space-10) var(--space-10)}
}
@media (max-width:820px){
  .sp-blog-row{grid-template-columns:1fr;gap:var(--space-12);padding:var(--space-8)}
  .sp-blog-row-body{padding:0 var(--space-4) var(--space-4)}
  .sp-blog-row h2{font-size:var(--text-2xl)}
  .sp-blog-row-summary{font-size:var(--text-md)}
  .sp-blog-list{gap:var(--space-14);padding-top:var(--space-24)}
  .sp-blog{--blog-section-gap:var(--space-24)}
  .sp-blog-grid{grid-template-columns:1fr;gap:var(--space-16)}
  /* Phones: the photo takes the whole band, the copy sits on the bottom. */
  .sp-blog{--blog-article-hero-media-left:0px;
    --blog-article-hero-mask:linear-gradient(0deg,#000 0%,#000 30%,rgba(0,0,0,.55) 55%,transparent 80%),linear-gradient(180deg,#000 0%,transparent 16%)}
  .sp-blog-breadcrumbs li:last-child{display:none}
  .sp-blog-article-hero-inner{padding-block:var(--space-10) var(--space-24)}
  .sp-blog-article-hero-copy>p{font-size:var(--text-lg)}
  .sp-blog-quote{padding-left:var(--space-8)}
  .sp-blog-quote p{font-size:var(--text-xl)}
  .sp-blog-cta{padding:var(--space-12)}
  .sp-blog-about{padding:var(--space-12)}
}
@media (max-width:560px){
  .sp-blog-carousel-arrow{display:none!important}
  /* Phones: the track bleeds to the screen edge so the next card peeks. */
  .sp-blog-carousel{padding-inline:0}
  .sp-blog-carousel-track{grid-auto-columns:82%;gap:var(--space-8);padding-inline:var(--gutter-page);
    scroll-padding-inline:var(--gutter-page);border-radius:0}
  .sp-blog-row-meta .sp-blog-row-category{display:none}
  .sp-blog-row-meta{font-size:var(--text-base)}
  .sp-blog-row-meta>*+*::before{margin-inline:var(--space-5)}
  .sp-blog-pagination .sp-blog-page-number{display:none}
  /* Tables stack: one block per row, each cell labelled by its column. */
  .sp-blog-table{overflow:visible}
  .sp-blog-table table{min-width:0}
  .sp-blog-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .sp-blog-table tbody tr{display:grid;gap:var(--space-5);padding:var(--space-8)}
  .sp-blog-table tbody tr+tr{border-top:1px solid var(--blog-rule)}
  .sp-blog-table tbody tr+tr>*{border-top:0}
  .sp-blog-table tbody th,.sp-blog-table tbody td{display:block;padding:0}
  .sp-blog-table tbody [data-label]::before{content:attr(data-label);display:block;margin-bottom:var(--space-2);
    color:var(--text-tertiary);font-size:var(--text-xs);font-weight:var(--fw-bold);letter-spacing:var(--ls-label);text-transform:uppercase}
  .sp-blog-pagination .sp-blog-page-number[aria-current="page"]{display:inline-flex}
}

/* styles/actions.css */
/* Shared operation anatomy. Product layouts own placement, never these colors. */
.sp-btn.sp-btn-md:is(.sp-btn-action,.sp-btn-danger,.sp-btn-neutral,.sp-btn-subtle) {
  gap:var(--button-gap);min-height:var(--button-height);min-width:0;max-width:100%;
  padding:var(--button-padding-y) var(--button-padding-x);font-size:var(--text-md);
  line-height:var(--lh-snug);font-family:var(--font-ui);font-weight:var(--button-action-weight);
  border:0;border-radius:var(--r-full);text-decoration:none;
}
.sp-btn-label{min-width:0;overflow-wrap:anywhere}
.sp-btn:is(.sp-btn-action,.sp-btn-danger,.sp-btn-neutral,.sp-btn-subtle)>.sp-ic,
.sp-iconbtn:is(.sp-iconbtn-action,.sp-iconbtn-danger,.sp-iconbtn-neutral,.sp-iconbtn-subtle)>.sp-ic {
  width:var(--button-icon-size);height:var(--button-icon-size);flex:none;
}
.sp-btn-action,.sp-iconbtn-action{background:var(--button-action-bg);color:var(--button-action-fg);box-shadow:var(--shadow-button)}
.sp-btn-danger,.sp-iconbtn-danger{font-weight:var(--button-danger-weight);background:var(--button-danger-bg);color:var(--button-danger-fg);box-shadow:var(--shadow-button)}
.sp-btn-neutral,.sp-btn.sp-btn-md.sp-btn-neutral,.sp-iconbtn-neutral{background:var(--button-neutral-bg);color:var(--button-neutral-fg);box-shadow:inset 0 0 0 1px var(--border-subtle);font-weight:var(--button-neutral-weight)}
.sp-btn-subtle,.sp-btn.sp-btn-md.sp-btn-subtle,.sp-iconbtn-subtle{background:var(--button-subtle-bg);color:var(--button-subtle-fg);box-shadow:inset 0 0 0 1px var(--border-subtle);font-weight:var(--button-subtle-weight)}
.sp-btn-action:hover:not(:disabled),.sp-iconbtn-action:hover:not(:disabled){background:var(--button-action-hover);color:var(--button-action-fg);box-shadow:var(--shadow-button-hover)}
.sp-btn-danger:hover:not(:disabled),.sp-iconbtn-danger:hover:not(:disabled){background:var(--button-danger-hover);color:var(--button-danger-fg);box-shadow:var(--shadow-button-hover);filter:none}
.sp-btn-neutral:hover:not(:disabled),.sp-iconbtn-neutral:hover:not(:disabled){background:var(--button-neutral-hover);color:var(--button-neutral-fg)}
.sp-btn-subtle:hover:not(:disabled),.sp-iconbtn-subtle:hover:not(:disabled){background:var(--button-subtle-hover);color:var(--button-subtle-fg)}
.sp-btn:is(.sp-btn-action,.sp-btn-danger,.sp-btn-neutral,.sp-btn-subtle):hover:not(:disabled){transform:translateY(var(--lift-hover))}
.sp-btn:is(.sp-btn-action,.sp-btn-danger,.sp-btn-neutral,.sp-btn-subtle):active:not(:disabled){transform:translateY(0) scale(.99)}
.sp-iconbtn:is(.sp-iconbtn-action,.sp-iconbtn-danger,.sp-iconbtn-neutral,.sp-iconbtn-subtle){width:var(--button-height);height:var(--button-height);border:0;padding:0}
.sp-btn[aria-busy="true"],.sp-iconbtn[aria-busy="true"]{cursor:progress}
.sp-btn[aria-busy="true"]>.sp-ic,.sp-iconbtn[aria-busy="true"]>.sp-ic{opacity:.65}
/* Salvando (11/10/2026): o botão ocupado gira e continua aceso; apagado, a pessoa não sabia
   se algo estava acontecendo. */
.sp-btn[aria-busy="true"]::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:sp-spin .8s linear infinite}
.sp-btn[aria-busy="true"]:disabled{opacity:1}

/* styles/welcome.css */
/* Welcome dialogs: shared by public authentication, panel offers and staff preview. */

.sp-welcome-sequence-editor { min-width:0; padding:var(--space-10); border:1px solid var(--border-subtle); border-radius:var(--r-lg); background:var(--surface-sunken); }
.sp-welcome-sequence-editor > legend,.sp-welcome-stage > legend { padding-inline:var(--space-4); font-weight:var(--fw-bold); color:var(--text-primary); }
.sp-welcome-stage-list,.sp-welcome-stage-preview,#welcome-additional-settings { display:grid; gap:var(--space-8); }
#welcome-additional-settings[hidden] { display:none; }
.sp-welcome-stage { min-width:0; margin:0; padding:var(--space-8); border:1px solid var(--border-subtle); border-radius:var(--r-md); background:var(--surface-card); }
.sp-welcome-stage-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-6); }
.sp-welcome-stage-fields label { min-width:0; }
.sp-welcome-stage-preview { min-height:var(--welcome-stage-preview-height); align-content:center; text-align:center; }
.sp-welcome-stage-preview .sp-welcome-discount { justify-self:center; }
@media(max-width:480px) { .sp-welcome-stage-fields { grid-template-columns:repeat(2,minmax(0,1fr)); } .sp-welcome-stage-fields label:last-child { grid-column:1/-1; } }

.sp-has-modal { overflow:hidden; }
.sp-welcome-dialog { box-sizing:border-box; width:min(calc(100% - var(--space-16)),var(--welcome-modal-max)); max-height:calc(100dvh - var(--space-16)); padding:0; border:1px solid var(--border-subtle); border-radius:var(--r-xl); color:var(--text-primary); background:var(--surface-card); box-shadow:var(--shadow-e3); overflow:hidden; }
.sp-welcome-dialog[open] { animation:sp-welcome-enter var(--dur-panel) var(--ease) both; }
.sp-welcome-dialog::backdrop { background:var(--scrim); backdrop-filter:blur(var(--space-2)); }
.sp-welcome-close { position:absolute; inset-block-start:var(--space-8); inset-inline-end:var(--space-8); z-index:2; min-width:var(--hit-min); min-height:var(--hit-min); background:var(--surface-card); border:1px solid var(--border-subtle); color:var(--text-primary); border-radius:var(--r-full); cursor:pointer; display:grid; place-items:center; }
.sp-welcome-heading { margin:0; font-family:var(--font-display); font-size:var(--welcome-heading-size); font-weight:var(--fw-heavy); line-height:var(--lh-tight); letter-spacing:var(--ls-display); text-wrap:balance; }
.sp-auth-modal { height:min(var(--welcome-auth-height),calc(100dvh - var(--space-16))); overflow:hidden; }
.sp-auth-modal-grid { box-sizing:border-box; height:100%; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr); padding:var(--space-4); gap:var(--space-4); }
.sp-auth-scene { position:relative; overflow:hidden; border-radius:var(--r-lg); min-height:var(--welcome-scene-min); background:var(--brand-gradient); color:var(--text-on-accent); }
.sp-auth-portraits { display:grid; grid-template-columns:1fr 1fr; height:100%; position:absolute; inset:0; gap:var(--space-2); }
.sp-auth-portraits img { height:100%; width:100%; object-fit:cover; }
.sp-auth-scene-copy { position:absolute; inset-inline:0; bottom:0; padding:var(--space-20); padding-top:var(--space-48); background:var(--welcome-scene-protection); }
.sp-auth-scene-copy h2 { font-family:var(--font-display); font-size:var(--welcome-heading-size); font-weight:var(--fw-heavy); line-height:var(--lh-tight); text-wrap:balance; margin:var(--space-8) 0; }
.sp-auth-scene-copy p { font-size:var(--text-md); line-height:var(--lh-body); }
.sp-auth-modal .sp-auth-scene { min-height:0; }
.sp-auth-modal-content { min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:var(--space-12); padding:var(--welcome-modal-pad); }
.sp-auth-modal-content > * { flex-shrink:0; }
.sp-auth-modal-content > :first-child { margin-block-start:auto; }
.sp-auth-modal-content > :last-child { margin-block-end:auto; }
.sp-auth-modal-content header { display:grid; gap:var(--space-8); }
.sp-auth-modal-content [data-auth-form] { display:grid; gap:var(--space-8); }
.sp-auth-modal-content .sp-auth-brand { align-self:center; margin-bottom:var(--space-2); }
.sp-auth-legal { text-align:center; }
/* Os documentos do aviso de acesso precisam parecer links (LGPD art. 9º: acesso facilitado). */
.sp-auth-legal a { color:inherit; text-decoration:underline; text-underline-offset:2px; }
.sp-welcome-body { padding:var(--welcome-modal-pad); display:grid; gap:var(--space-16); }
.sp-welcome-hero { display:grid; justify-items:center; text-align:center; gap:var(--space-8); padding:var(--space-12) var(--space-16); }
.sp-welcome-hero .sp-note { max-width:var(--maxw-prose); }
.sp-welcome-offer { max-width:var(--welcome-offer-max); }
.sp-welcome-offer .sp-welcome-body { gap:var(--space-12); text-align:center; }
.sp-welcome-gift { display:grid; place-items:center; width:var(--space-32); height:var(--space-32); border-radius:var(--r-full); background:var(--accent-soft); color:var(--accent); margin-inline:auto; }
.sp-welcome-gift .sp-ic { width:var(--space-16); height:var(--space-16); }
.sp-welcome-ticket { width:100%; max-width:var(--welcome-offer-max); margin-inline:auto; border:1px solid var(--border-subtle); border-radius:var(--r-lg); background:var(--surface-sunken); text-align:center; overflow:hidden; }
.sp-welcome-ticket-code { padding:var(--space-8); border-bottom:1px dashed var(--border-strong); display:grid; gap:var(--space-4); }
.sp-welcome-ticket-code code { overflow-wrap:anywhere; font-size:var(--text-sm); color:var(--text-primary); }
.sp-welcome-ticket[data-claimed="true"] .sp-welcome-ticket-code { background:var(--state-live-soft); color:var(--state-live); }
.sp-welcome-ticket-values { display:grid; grid-template-columns:1fr 1fr; }
.sp-welcome-ticket-values > div { padding:var(--space-12) var(--space-6); display:grid; align-content:center; gap:var(--space-4); }
.sp-welcome-ticket-values > div + div { border-inline-start:1px dashed var(--border-strong); }
.sp-welcome-ticket-values strong { font-size:var(--text-2xl); font-variant-numeric:tabular-nums; font-weight:var(--fw-heavy); }
.sp-welcome-ticket-values [data-percent] { color:var(--sp-red-deep); }
.sp-welcome-ticket-values small { color:var(--text-secondary); font-size:var(--text-xs); }
.sp-welcome-ticket-actions { padding:var(--space-8); }
.sp-welcome-switch { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:var(--space-4); margin-inline:auto; padding:var(--space-4); border:1px solid var(--border-subtle); border-radius:var(--r-full); background:var(--surface-sunken); }
.sp-welcome-switch button[aria-pressed="true"] { background:var(--accent-gradient); color:var(--text-on-accent); }
.sp-welcome-saving,.sp-welcome-discount { display:inline-flex; width:fit-content; max-width:100%; flex:none; align-items:center; justify-content:center; gap:var(--space-3); border-radius:var(--r-full); padding:var(--space-3) var(--space-6); font-size:var(--text-sm); font-weight:var(--fw-bold); }
.sp-welcome-offer .sp-welcome-discount { justify-self:center; }
.sp-welcome-saving { background:var(--state-live-soft); color:var(--state-live); }
.sp-welcome-discount { background:var(--sp-red-deep); color:var(--text-on-accent); }
.sp-welcome-plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-12); }
.sp-welcome-plan { display:grid; align-content:start; gap:var(--space-10); border:1px solid var(--border-subtle); border-radius:var(--r-lg); padding:var(--space-16); background:var(--surface-card); transition:box-shadow var(--dur-panel) var(--ease); }
.sp-welcome-plan:hover,.sp-welcome-plan[data-selected="true"] { box-shadow:var(--shadow-e2); }
.sp-welcome-plan h3 { margin:0; font-size:var(--text-xl); font-family:var(--font-display); }
.sp-welcome-price { margin:0; font-size:var(--welcome-price-size); font-weight:var(--fw-heavy); font-variant-numeric:tabular-nums; letter-spacing:var(--ls-display); }
.sp-welcome-price small { font-size:var(--text-sm); font-weight:var(--fw-medium); color:var(--text-secondary); }
.sp-welcome-benefits { list-style:none; display:grid; gap:var(--space-8); margin:0; padding:var(--space-8) 0 0; font-size:var(--text-sm); }
.sp-welcome-benefits li { display:flex; gap:var(--space-6); align-items:center; }
.sp-welcome-benefits .sp-ic { flex-shrink:0; color:var(--accent); }
.sp-welcome-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--space-8); }
.sp-welcome-reminder { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-8); padding:var(--space-10) var(--space-12); margin-block-end:var(--space-12); border:1px solid var(--accent-soft-border); border-radius:var(--r-lg); background:var(--accent-soft); }
.sp-welcome-reminder[hidden],.sp-welcome-dialog [hidden] { display:none!important; }
.sp-welcome-admin-grid { display:grid; align-items:start; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-12); }
.sp-welcome-admin-list { display:grid; gap:var(--space-8); }
.sp-welcome-admin-row { display:flex; justify-content:space-between; align-items:center; gap:var(--space-8); flex-wrap:wrap; padding:var(--space-10); border:1px solid var(--border-subtle); border-radius:var(--r-md); }
@keyframes sp-welcome-enter { from { opacity:0; transform:translateY(var(--space-8)); } to { opacity:1; transform:translateY(0); } }
@media(max-width:720px) {
  .sp-welcome-dialog { width:calc(100% - var(--space-8)); max-height:calc(100dvh - var(--space-8)); border-radius:var(--r-lg); }
  .sp-auth-modal-grid,.sp-welcome-plans,.sp-welcome-admin-grid { grid-template-columns:1fr; }
  .sp-auth-modal { height:min(var(--welcome-auth-height),calc(100dvh - var(--space-8))); }
  .sp-auth-modal-grid { grid-template-rows:var(--welcome-scene-height) minmax(0,1fr); }
  .sp-auth-scene { min-height:var(--welcome-scene-height); }
  .sp-auth-scene-copy { padding:var(--space-10); padding-top:var(--space-20); }
  .sp-auth-scene-copy h2 { font-size:var(--text-xl); max-width:20ch; }
  .sp-auth-scene-copy p,.sp-auth-scene-copy .sp-kicker { display:none; }
  .sp-auth-portraits img { object-position:center 35%; }
  .sp-auth-modal-content { padding:var(--space-12); }
  .sp-welcome-hero { padding-inline:var(--space-4); }
  .sp-welcome-plan { padding:var(--space-12); }
  .sp-welcome-ticket-values strong { font-size:var(--text-xl); }
}
@media(max-height:650px) and (max-width:720px) { .sp-auth-scene { display:none; } .sp-auth-modal-grid { grid-template-rows:minmax(0,1fr); } .sp-auth-modal-content { padding-top:var(--space-28); } }
@media(prefers-reduced-motion:reduce) { .sp-welcome-dialog[open] { animation:none; } }
.sp-welcome-plans-dialog { background:var(--brand-gradient); }
.sp-welcome-plans-dialog .sp-welcome-hero { color:var(--text-on-accent); }
.sp-welcome-plans-dialog .sp-welcome-hero .sp-note { color:var(--text-on-accent); }
.sp-welcome-plans-dialog .sp-welcome-body > .sp-welcome-actions > .sp-btn-ghost { color:var(--text-on-accent); }
.sp-welcome-plans-dialog [data-welcome-output] { color:var(--text-on-accent); }
.sp-welcome-ticket { color:var(--text-primary); }
.sp-auth-scene .sp-kicker { color:inherit; }
.sp-welcome-dialog .sp-form-output:empty { min-height:0; margin:0; }
.sp-welcome-plans-dialog .sp-welcome-hero { padding-block:var(--space-6); }
.sp-welcome-plans-dialog .sp-welcome-body { gap:var(--space-12); }

@media(max-width:720px) { .sp-welcome-plans-dialog .sp-welcome-hero { padding-block-start:var(--space-24); } }

.sp-welcome-choice-group { display:flex; flex-wrap:wrap; gap:var(--space-8); padding:var(--space-8); border:1px solid var(--border-subtle); border-radius:var(--r-md); }
.sp-welcome-choice-group legend { color:var(--text-secondary); font-size:var(--text-sm); padding-inline:var(--space-4); }
.sp-form .sp-welcome-choice-group label { display:flex; align-items:center; gap:var(--space-4); min-height:var(--hit-min); cursor:pointer; }
.sp-welcome-choice-group input { width:var(--space-10); height:var(--space-10); accent-color:var(--accent); }
.sp-welcome-dialog .sp-welcome-confirm-output { display:block; min-height:4lh; }

/* Dialogs never scroll. Mobile compares one plan at a time. */
.sp-welcome-plans-dialog { width:min(calc(100% - var(--space-16)),var(--welcome-plans-max)); height:min(var(--welcome-plans-height),calc(100dvh - var(--space-16))); overflow:hidden; }
.sp-welcome-plans-dialog[open] { display:flex; flex-direction:column; }
.sp-welcome-plans-dialog .sp-welcome-plans-head { flex:none; padding:var(--space-16) var(--space-28) var(--space-10); }
.sp-welcome-plans-dialog .sp-welcome-heading { font-size:var(--text-2xl); }
.sp-welcome-plans-dialog > .sp-welcome-body { flex:1; min-height:0; overflow:hidden; align-content:start; padding:var(--space-8) var(--space-16) var(--space-12); gap:var(--space-8); }
.sp-welcome-plans-dialog [data-ticket-slot]:empty,.sp-welcome-plans-dialog [data-welcome-output]:empty { display:none; }
.sp-welcome-plans-dialog .sp-welcome-plan { padding:var(--space-12); gap:var(--space-5); }
.sp-welcome-plans-dialog .sp-welcome-price { font-size:var(--text-3xl); }
.sp-welcome-plans-dialog .sp-welcome-benefits { font-size:var(--text-sm); gap:var(--space-5); }
.sp-welcome-plans-footer { flex:none; padding:var(--space-8) var(--space-12); border-top:1px solid var(--border-subtle); }
.sp-welcome-plans-footer .sp-btn-ghost { color:var(--text-on-accent); }
@media(max-width:720px) {
  .sp-welcome-plans-dialog { width:calc(100% - var(--space-8)); height:min(var(--welcome-plans-height),calc(100dvh - var(--space-8))); }
  .sp-welcome-plans-dialog .sp-welcome-plans-head { padding:var(--space-24) var(--space-12) var(--space-8); }
  .sp-welcome-plans-dialog > .sp-welcome-body { padding-inline:var(--space-8); }
  .sp-welcome-plans-footer { gap:var(--space-3); }
  .sp-welcome-plans-footer .sp-btn { font-size:var(--text-xs); min-height:var(--hit-min); padding-inline:var(--space-6); }
}

.sp-welcome-plan-picker { display:none; }
.sp-welcome-plans-dialog > .sp-welcome-body { display:flex; flex-direction:column; padding:var(--space-6) var(--space-12); }
.sp-welcome-plans-dialog .sp-welcome-plans { min-height:0; flex:1; }
.sp-welcome-plans-dialog .sp-welcome-plan { display:flex; flex-direction:column; justify-content:flex-start; gap:var(--space-5); }
.sp-welcome-plans-dialog .sp-welcome-plan > .sp-btn { margin-top:auto; min-height:var(--hit-min); }
.sp-welcome-allowance { display:flex; gap:var(--space-4); align-items:center; margin:0; font-size:var(--text-sm); color:var(--text-secondary); }
.sp-welcome-allowance .sp-ic { color:var(--accent); flex:none; }
.sp-welcome-ticket-compact { display:flex; align-items:center; gap:var(--space-6); max-width:none; padding:var(--space-5) var(--space-8); }
.sp-welcome-ticket-compact .sp-welcome-ticket-code { flex:1; padding:0; border:0; text-align:start; gap:var(--space-2); font-size:var(--text-xs); }
.sp-welcome-ticket-compact .sp-welcome-ticket-code code { font-size:var(--text-xs); }
.sp-welcome-ticket-compact .sp-welcome-ticket-values { display:flex; align-items:center; gap:var(--space-8); }
.sp-welcome-ticket-compact .sp-welcome-ticket-values > div { padding:0; border:0; }
.sp-welcome-ticket-compact .sp-welcome-ticket-values strong { font-size:var(--text-lg); }
.sp-welcome-ticket-compact .sp-welcome-ticket-values small { font-size:var(--text-2xs); }
.sp-welcome-ticket-compact .sp-welcome-ticket-actions { padding:0; }
.sp-welcome-ticket-compact .sp-welcome-ticket-actions .sp-btn { font-size:var(--text-xs); min-height:var(--hit-min); padding-inline:var(--space-6); }
.sp-auth-modal-content { padding:var(--space-16); gap:var(--space-8); }
.sp-auth-modal-content .sp-welcome-heading { font-size:var(--text-2xl); }
/* Logotipo com presença: o dobro do que era (16/09/2026). */
.sp-auth-modal-content .sp-auth-brand img { height:var(--space-24); width:auto; }
.sp-auth-modal-content [data-auth-form] { gap:var(--space-5); }
.sp-auth-modal-content #login-form { gap:var(--space-5); }
.sp-auth-modal-content #alternative-login { display:grid; grid-template-columns:1fr; gap:var(--space-5); }
.sp-auth-modal-content #alternative-login > p { grid-column:1/-1; font-size:var(--text-xs); }
.sp-auth-modal-content #alternative-login .sp-btn,.sp-auth-modal-content #submit { font-size:var(--text-xs); white-space:normal; min-height:var(--hit-min); padding:var(--space-4); }
.sp-auth-modal-content #alternative-login .sp-btn svg,.sp-auth-modal-content #submit svg { flex:none; }
/* Modal enxuta (26/09/2026): título centrado; e-mail e os três botões numa
   coluna de 70%, centrada; "Enviar código" com letra maior; chave de acesso sem negrito. */
.sp-auth-modal-content header { text-align:center; margin-bottom:var(--space-2); }
/* Sem erro, a saída não guarda espaço: o Google fica colado no "Enviar código"
   (a margem negativa desfaz o gap do formulário). */
.sp-auth-modal-content #login-output:empty { min-height:0; margin-block-start:calc(-1 * var(--space-5)); }
.sp-auth-modal-content .sp-field:has(#email),.sp-auth-modal-content #submit,.sp-auth-modal-content #alternative-login .sp-btn { box-sizing:border-box; width:70%; margin-inline:auto; }
.sp-auth-modal-content #submit { font-size:var(--text-md); }
.sp-auth-modal-content #passkey-login { font-weight:var(--fw-book); }
.sp-auth-modal-content [data-auth-stage]:not([data-auth-stage="email"]) > hr { display:none; }
.sp-auth-modal-content #login-output { min-height:2lh; font-size:var(--text-xs); }
/* Login code (15/09/2026): the e-mail field gives way to a prominent "code
   sent to" line and one box per digit. One real input sits invisibly over the
   boxes — paste, keyboard and one-time-code autofill keep working — and the
   boxes only mirror what was typed; the active box carries the focus ring. */
.sp-code-field { display:grid; gap:var(--space-6); }
.sp-code-sent { display:grid; gap:var(--space-2); text-align:center; }
/* A linha "código enviado para" é um selo — verde de ação, letras brancas —
   para não se confundir com o resto do texto; o e-mail vai mascarado. */
.sp-code-sent strong,.sp-auth-badge { display:inline-flex; align-items:center; justify-content:center; justify-self:center; max-width:100%; box-sizing:border-box; padding:var(--space-3) var(--space-8); border-radius:var(--r-full); background:var(--button-action-bg); color:var(--button-action-fg); box-shadow:var(--shadow-e1); font-size:var(--text-md); font-weight:var(--fw-heavy); line-height:1.3; text-align:center; overflow-wrap:anywhere; }
/* O mesmo selo em vermelho para o que deu errado no login: código inválido
   (com o link "solicite novamente" dentro) e a espera para pedir de novo, com
   o contador vivo. Centralizado, onde antes havia uma linha miúda. */
.sp-auth-badge[data-tone="error"] { background:var(--button-danger-bg); color:var(--button-danger-fg); }
.sp-auth-badge-link { font:inherit; color:inherit; background:none; border:0; padding:0; margin:0; text-decoration:underline; text-underline-offset:.15em; cursor:pointer; }
.sp-auth-badge-link:hover { text-decoration-thickness:2px; }
.sp-auth-badge-link:disabled { cursor:default; opacity:.7; text-decoration:none; }
.sp-form #login-output:has(.sp-auth-badge),.sp-form #login-output:has(.sp-auth-wait) { display:grid; justify-items:center; text-align:center; }
/* A espera para pedir de novo não é selo: duas linhas em vermelho — a frase
   e, embaixo, o contador vivo. */
.sp-auth-wait { display:grid; gap:var(--space-1); justify-items:center; text-align:center; color:var(--state-error); font-size:var(--text-sm); font-weight:var(--fw-medium); line-height:1.35; }
.sp-code-sent span { font-size:var(--text-sm); color:var(--text-secondary); }
.sp-code-entry { position:relative; display:grid; }
.sp-code-boxes { display:grid; grid-template-columns:repeat(var(--code-digits,6),minmax(0,1fr)); gap:var(--welcome-code-gap); }
.sp-code-box { display:flex; align-items:center; justify-content:center; height:var(--welcome-code-box-height); border-radius:var(--r-md); border:1px solid var(--border-strong); background:var(--surface-sunken); font-family:var(--font-mono); font-size:var(--welcome-code-size); font-weight:var(--fw-heavy); font-variant-numeric:tabular-nums; color:var(--text-primary); transition:border-color var(--dur-hover),box-shadow var(--dur-hover); }
.sp-code-box[data-active="true"] { border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent); }
/* A caixa ativa tem cursor piscando, como um campo de texto: clicar e digitar
   têm de parecer o que são. Vazia, o cursor fica no centro; cheia (última
   caixa), depois do dígito. Sem animação para quem pediu menos movimento. */
.sp-code-box[data-active="true"]::after { content:""; display:inline-block; width:2px; height:1.15em; margin-inline-start:2px; border-radius:1px; background:var(--text-primary); animation:sp-code-caret 1s step-end infinite; }
@keyframes sp-code-caret { 50% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .sp-code-box[data-active="true"]::after { animation:none; } }
.sp-code-input { position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; border:0; background:transparent; color:transparent; caret-color:transparent; opacity:.01; font-size:16px; }
.sp-code-input:focus { outline:none; box-shadow:none; }
.sp-auth-modal-content #remember-field { font-size:var(--text-sm); }
.sp-auth-modal-content #change-email { min-height:var(--hit-min); }
@media(max-width:720px) {
  .sp-welcome-plan-picker { display:flex; flex:none; gap:var(--space-4); justify-content:center; }
  .sp-welcome-plan-picker button { min-height:var(--hit-min); color:var(--text-on-accent); }
  .sp-welcome-plan-picker [aria-pressed="true"] { color:var(--accent); background:var(--surface-card); }
  .sp-welcome-plans-dialog .sp-welcome-plan[data-selected="false"] { display:none; }
  .sp-welcome-plans-dialog .sp-welcome-plans { grid-template-columns:1fr; }
  .sp-welcome-plans-dialog .sp-welcome-heading { font-size:var(--text-xl); }
  .sp-welcome-plans-dialog .sp-welcome-plans-head { padding-top:var(--space-22); }
  .sp-welcome-plans-dialog .sp-welcome-switch { padding:var(--space-2); gap:0; flex-wrap:nowrap; }
  .sp-welcome-plans-dialog .sp-welcome-switch .sp-btn { padding-inline:var(--space-6); font-size:var(--text-xs); min-height:var(--hit-min); }
  .sp-welcome-plans-dialog .sp-welcome-switch .sp-welcome-saving { font-size:var(--text-2xs); padding-inline:var(--space-4); gap:var(--space-2); }
  .sp-welcome-ticket-compact { flex-wrap:wrap; justify-content:space-between; gap:var(--space-4); padding:var(--space-4); }
  .sp-welcome-ticket-compact .sp-welcome-ticket-code { flex-basis:100%; text-align:center; }
  .sp-welcome-ticket-compact .sp-welcome-ticket-code code { display:none; }
  .sp-welcome-ticket-compact .sp-welcome-ticket-values { flex:1; justify-content:space-around; gap:var(--space-3); }
  .sp-auth-modal-content { padding:var(--space-10); }
  .sp-auth-modal-grid { grid-template-rows:100px minmax(0,1fr); }
  .sp-auth-scene { min-height:0; }
  .sp-auth-scene-copy h2 { font-size:var(--text-md); max-width:none; }
  .sp-auth-scene-copy { padding:var(--space-6); }
  .sp-auth-modal-content .sp-welcome-heading { font-size:var(--text-xl); }
}
@media(max-height:760px) {
  .sp-welcome-plans-dialog .sp-welcome-plan { padding:var(--space-8); gap:var(--space-3); }
  .sp-welcome-plans-dialog .sp-welcome-plans-head { padding-bottom:var(--space-4); }
  .sp-welcome-plans-dialog .sp-welcome-plans-footer { padding-block:var(--space-4); gap:var(--space-3); }
  .sp-welcome-plans-dialog .sp-welcome-plans-footer .sp-btn { font-size:var(--text-xs); min-height:var(--hit-min); padding-inline:var(--space-6); }
  .sp-welcome-plans-dialog .sp-welcome-price { font-size:var(--text-2xl); }
  .sp-welcome-plans-dialog .sp-welcome-plan .sp-note { font-size:var(--text-xs); }
  .sp-auth-modal-content { padding:var(--space-10); gap:var(--space-5); }
}
@media(max-height:650px) and (max-width:720px) {
  .sp-auth-modal-grid { grid-template-rows:minmax(0,1fr); }
  .sp-auth-modal-content { padding-top:var(--space-20); }
  .sp-welcome-plans-dialog .sp-welcome-hero .sp-note { display:none; }
  .sp-welcome-plans-dialog > .sp-welcome-body { gap:var(--space-3); padding-block:var(--space-3); }
  .sp-welcome-plans-dialog .sp-welcome-plan { gap:var(--space-2); }
  .sp-welcome-plans-footer .sp-btn-ghost:last-child { display:none; }
}
@media(max-height:560px) {
  .sp-auth-modal-content .sp-auth-brand,.sp-auth-modal-content header .sp-note { display:none; }
  .sp-auth-modal-content #alternative-login > p { display:none; }
  .sp-auth-modal-content header { padding-inline-end:var(--space-16); }
  .sp-welcome-offer .sp-welcome-body { padding:var(--space-20) var(--space-12) var(--space-12); gap:var(--space-5); }
  .sp-welcome-offer .sp-welcome-heading { font-size:var(--text-xl); }
  .sp-welcome-offer .sp-welcome-gift { display:none; }
}
.sp-welcome-ticket-compact[data-claimed="true"] .sp-welcome-ticket-code { background:transparent; }
.sp-welcome-offer .sp-welcome-body { padding:var(--space-16); gap:var(--space-6); }
.sp-welcome-offer .sp-welcome-heading { font-size:var(--text-2xl); }
.sp-welcome-offer .sp-welcome-gift { width:var(--space-24); height:var(--space-24); }
@media(max-width:720px) { .sp-welcome-offer .sp-welcome-body { padding:var(--space-20) var(--space-12) var(--space-12); } }
@media(min-width:721px) and (min-height:600px) { .sp-welcome-plans-dialog .sp-welcome-price { font-size:var(--text-3xl); } }
.sp-welcome-label-short { display:none; }
.sp-welcome-price { display:flex; align-items:baseline; flex-wrap:wrap; column-gap:var(--space-2); }
.sp-welcome-price del { margin-inline-start:var(--space-4); }
@media(max-width:720px) {
  .sp-welcome-label-long { display:none; }
  .sp-welcome-label-short { display:inline; }
  .sp-welcome-plans-footer { flex-wrap:nowrap; }
  .sp-welcome-plans-dialog .sp-welcome-plans-footer .sp-btn { padding-inline:var(--space-6); min-height:var(--hit-min); }
  .sp-welcome-plans-dialog .sp-welcome-plans-footer .sp-btn-ghost:last-child { display:inline-flex; }
  .sp-welcome-plans-dialog .sp-welcome-hero .sp-note { display:none; }
  .sp-welcome-plans-dialog .sp-welcome-plan { padding:var(--space-6); gap:var(--space-2); }
  .sp-welcome-plans-dialog .sp-welcome-plan .sp-note { font-size:var(--text-xs); }
  .sp-welcome-plans-dialog .sp-welcome-price { font-size:var(--text-2xl); }
  .sp-welcome-plans-dialog .sp-welcome-plan > .sp-btn { padding:var(--space-6); min-height:var(--hit-min); }
  .sp-welcome-plans-dialog .sp-welcome-plan .sp-welcome-saving,.sp-welcome-plans-dialog .sp-welcome-discount { font-size:var(--text-xs); padding:var(--space-2) var(--space-4); }
  .sp-welcome-plans-dialog .sp-welcome-plan .sp-ic { width:var(--space-8); height:var(--space-8); }
  .sp-welcome-ticket-compact .sp-welcome-ticket-code { display:none; }
  .sp-welcome-plans-dialog .sp-welcome-plans-head { padding:var(--space-8) var(--space-28) var(--space-5) var(--space-10); }
  .sp-welcome-plans-dialog .sp-welcome-plan h3 { font-size:var(--text-lg); }
  .sp-welcome-plans-dialog > .sp-welcome-body { padding-inline:var(--space-8); }
}
@media(max-height:650px) {
  .sp-auth-modal-content .sp-auth-brand,.sp-auth-modal-content header .sp-note,.sp-auth-modal-content #alternative-login > p { display:none; }
  .sp-auth-modal-content header { padding-inline-end:var(--space-16); }
  .sp-auth-modal-content { gap:var(--space-4); }
  .sp-auth-modal-content .sp-divider { margin-block:var(--space-3); }
}
@media(max-width:720px) {
  .sp-welcome-plans-dialog .sp-welcome-allowance { font-size:var(--text-xs); gap:var(--space-3); }
  .sp-welcome-ticket-compact { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; }
  .sp-welcome-ticket-compact .sp-welcome-ticket-values { display:grid; grid-template-columns:1fr 1fr; }
  .sp-welcome-ticket-compact .sp-welcome-ticket-actions { max-width:var(--space-48); }
  .sp-welcome-ticket-compact .sp-welcome-ticket-actions .sp-btn { white-space:normal; padding:var(--space-4); }
  .sp-welcome-ticket-compact[data-claimed="true"] { grid-template-columns:1fr; }
}
@media(max-width:360px) {
  .sp-welcome-ticket-compact .sp-welcome-ticket-values strong { font-size:var(--text-sm); }
  .sp-welcome-ticket-compact .sp-welcome-ticket-values small { font-size:var(--text-2xs); }
  .sp-welcome-plans-dialog .sp-welcome-switch .sp-btn { padding-inline:var(--space-4); }
  .sp-welcome-plans-dialog .sp-welcome-switch .sp-welcome-saving { padding-inline:var(--space-2); }
}
@media(max-width:720px) and (max-height:650px) {
  .sp-welcome-plans-dialog > .sp-welcome-body { gap:var(--space-2); }
  .sp-welcome-plans-dialog .sp-welcome-plan { gap:var(--space-1); }
  .sp-welcome-plans-dialog .sp-welcome-plans-footer { padding-block:var(--space-2); }
}
@media(max-width:720px) and (max-height:650px) {
  .sp-welcome-plans-dialog:has([data-welcome-output]:not(:empty)) .sp-welcome-allowance,
  .sp-welcome-plans-dialog:has([data-welcome-output]:not(:empty)) .sp-welcome-plan .sp-welcome-saving,
  .sp-welcome-plan[data-unavailable="true"] .sp-welcome-allowance,
  .sp-welcome-plan[data-unavailable="true"] .sp-welcome-saving { display:none; }
  .sp-welcome-plans-dialog [data-welcome-output] { font-size:var(--text-xs); }
}
@media(max-width:720px) { .sp-auth-modal-content { gap:var(--space-5); } }

/* Stage changes and expiry feedback keep the same frame. On short phones
   the decorative gift yields space to the complete offer and its action. */
.sp-welcome-offer-fixed { height:min(var(--welcome-offer-height),calc(100dvh - var(--space-8))); max-height:calc(100dvh - var(--space-8)); }
.sp-welcome-offer-fixed > .sp-welcome-body { box-sizing:border-box; height:100%; align-content:center; }
@media(max-height:650px) { .sp-welcome-offer .sp-welcome-gift { display:none; } }

/* ------------------------------------------------------------------
   Comparação de planos da modal de boas-vindas.

   O cupom e o período dividem uma faixa só; a tabela ocupa o resto. Cada
   linha é um item do plano e cada coluna um plano, então a segunda coluna
   tem função. Não há rodapé: sair sem comprar é o botão cinza no pé da
   coluna dos rótulos, alinhado com os botões de escolha.

   O diálogo nunca rola (680px de altura fixa), então tudo que muda com a
   largura passa por estas variáveis, em três faixas: larga, intermediária
   (cabem duas colunas, mas apertadas) e estreita (um plano por vez).
   ------------------------------------------------------------------ */
/* Uma linha só acima de 720px: empilhar cupom e período custava 74px da tabela e
   fazia a lista de itens rolar. Abaixo disso a faixa empilha, que é o certo. */
.sp-welcome-strip { display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap; gap:var(--space-6) var(--space-8); flex:none; }
/* Em alemão e vietnamita o aviso do anual não cabe na linha. Sem nowrap ele escapava
   do diálogo; empilhando a faixa inteira ele custava 74px de altura da tabela. Deixar
   cupom e período encolherem faz o texto quebrar dentro deles, que é onde cabe. */
.sp-welcome-strip > * { min-width:0; }
.sp-welcome-strip .sp-welcome-switch { margin-inline:0; flex:0 1 auto; }
/* O aviso do anual é o texto mais longo da faixa e o único secundário nela:
   um passo menor evita que ele quebre em duas linhas e roube altura da tabela. */
.sp-welcome-strip .sp-welcome-switch .sp-welcome-saving { flex:0 1 auto; font-size:var(--text-xs); }
.sp-welcome-strip [data-ticket-slot]:empty { display:none; }

/* O título alinhado ao início e mais baixo devolve à tabela a altura que ela
   precisa; o recuo à direita livra o botão de fechar. */
.sp-welcome-plans-dialog .sp-welcome-plans-head { justify-items:start; text-align:start; gap:var(--space-2); padding:var(--space-10) var(--space-28) var(--space-6) var(--space-14); }
.sp-welcome-plans-dialog .sp-welcome-plans-head .sp-note { max-width:none; }

.sp-welcome-plans:has(> .sp-welcome-compare) { grid-template-columns:minmax(0,1fr); }
.sp-welcome-compare { flex:1; min-height:0; display:flex; flex-direction:column; color:var(--text-primary);
  background:var(--surface-card); border-radius:var(--r-lg); padding:var(--welcome-compare-pad); }
.sp-welcome-compare-head,.sp-welcome-compare-row,.sp-welcome-compare-foot { display:grid; gap:var(--welcome-compare-gap);
  grid-template-columns:minmax(0,var(--welcome-compare-label-col)) repeat(2,minmax(0,1fr)); }
.sp-welcome-compare-head { align-items:end; padding-block-end:var(--welcome-compare-row-pad); border-block-end:1px solid var(--border-subtle); }
.sp-welcome-compare-corner { display:flex; align-items:flex-end; height:100%; }
.sp-welcome-compare-corner span { font-size:var(--text-2xs); text-transform:uppercase; letter-spacing:var(--ls-label); color:var(--text-secondary); }
.sp-welcome-compare-plan { display:grid; gap:var(--space-2); align-content:end; }
.sp-welcome-compare-plan h3 { margin:0; font-size:var(--welcome-compare-name-size); font-family:var(--font-display); }
.sp-welcome-compare-plan .sp-welcome-price { display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--space-4); font-size:var(--welcome-compare-price-size); }
.sp-welcome-compare-plan .sp-note { font-size:var(--welcome-compare-note-size); }
.sp-welcome-compare-plan .sp-welcome-saving { justify-self:start; font-size:var(--welcome-compare-note-size); }
.sp-welcome-compare-plan .sp-welcome-discount { font-size:var(--welcome-compare-note-size); }
.sp-welcome-plan-top { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--space-3); }
/* Cabeçalho e pé são sempre visíveis; quando a frase de cobrança cresce (vietnamita,
   russo) quem cede é a lista, não os botões. O diálogo em si continua sem rolar. */
.sp-welcome-compare-rows { flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; overflow:visible; }
.sp-welcome-compare-row { align-items:center; padding-block:var(--welcome-compare-row-pad); border-block-end:1px solid var(--border-subtle); font-size:var(--welcome-compare-row-size); }
.sp-welcome-compare-label { display:flex; align-items:center; gap:var(--space-5); color:var(--text-secondary); }
.sp-welcome-compare-label .sp-ic { color:var(--accent); flex:none; }
.sp-welcome-compare-value { font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.sp-welcome-compare-check { display:inline-grid; place-items:center; width:var(--welcome-compare-check); height:var(--welcome-compare-check); border-radius:var(--r-full); background:var(--state-live-soft); color:var(--state-live); }
.sp-welcome-compare-check .sp-ic { width:var(--space-7); height:var(--space-7); color:inherit; }
.sp-welcome-compare-foot { padding-block-start:var(--space-6); }
.sp-welcome-compare-foot .sp-btn { min-height:var(--hit-min); font-size:var(--welcome-compare-button-size); }

/* Faixa intermediária: duas colunas ainda cabem, mas a frase de cobrança
   quebraria em quatro linhas e empurraria os botões para fora do diálogo. */
@media(max-width:1000px) and (min-width:721px) {
  .sp-welcome-compare {
    --welcome-compare-label-col:0.8fr; --welcome-compare-gap:12px; --welcome-compare-row-pad:2px;
    --welcome-compare-price-size:26px; --welcome-compare-name-size:var(--text-lg);
    --welcome-compare-note-size:var(--text-2xs); --welcome-compare-row-size:var(--text-xs);
    --welcome-compare-button-size:var(--text-xs);
  }
}
/* Faixa estreita: um plano por vez. O rótulo fica com a largura que sobra e o
   valor encolhe até o conteúdo — no desktop as duas colunas de plano precisam
   ter a mesma medida, aqui só existe uma. */
@media(max-width:720px) {
  .sp-welcome-compare {
    --welcome-compare-gap:var(--space-6); --welcome-compare-row-pad:1px; --welcome-compare-pad:var(--space-6) var(--space-8) var(--space-8);
    --welcome-compare-price-size:var(--text-xl); --welcome-compare-name-size:var(--text-lg);
    --welcome-compare-note-size:var(--text-2xs); --welcome-compare-row-size:var(--text-xs);
    --welcome-compare-button-size:var(--text-2xs);
  }
  .sp-welcome-compare-row { grid-template-columns:minmax(0,1fr) auto; }
  .sp-welcome-compare-foot { grid-template-columns:minmax(0,1fr); gap:var(--space-4); }
  .sp-welcome-compare [data-plan][data-selected="false"] { display:none; }
  .sp-welcome-compare-plan { gap:var(--space-1); }
  .sp-welcome-compare-label { gap:var(--space-4); }
  .sp-welcome-compare-foot .sp-btn { padding-inline:var(--space-4); }
  /* Com um plano por vez o rótulo da coluna não tem o que rotular, e colidia com o preço. */
  .sp-welcome-compare-head { grid-template-columns:minmax(0,1fr); }
  .sp-welcome-compare-head .sp-welcome-compare-corner { display:none; }
  /* `justify-items:center` dava largura de conteúdo ao título, que então não
     quebrava e passava por baixo do botão de fechar. */
  .sp-welcome-plans-dialog .sp-welcome-plans-head { justify-items:stretch; text-align:center; padding:var(--space-22) var(--space-10) var(--space-3); }
  .sp-welcome-plans-dialog > .sp-welcome-body { padding:var(--space-3) var(--space-8) var(--space-6); gap:var(--space-4); }
  .sp-welcome-strip { flex-wrap:wrap; justify-content:center; gap:var(--space-3); }
}
/* Compact comparison keeps full-size operation buttons and every feature visible. */
@media(max-width:720px){
  .sp-welcome-plans-dialog{max-width:calc(100vw - var(--space-8))}
  .sp-welcome-plans-dialog .sp-welcome-plans-head{padding:var(--space-6) var(--space-32) var(--space-2) var(--space-10);text-align:start}
  .sp-welcome-plans-dialog>.sp-welcome-body{gap:var(--space-3);padding-block-end:var(--space-2)}
  .sp-welcome-compare{--welcome-compare-row-pad:0px;--welcome-compare-pad:var(--space-4)}
  .sp-welcome-compare-foot{gap:var(--space-2)}
  .sp-welcome-ticket-compact{padding-block:var(--space-1)}
  .sp-welcome-ticket-compact[data-claimed="false"]{grid-template-columns:minmax(0,1fr) minmax(0,1.8fr)}
  .sp-welcome-ticket-compact[data-claimed="false"] .sp-welcome-ticket-values{grid-template-columns:1fr;gap:var(--space-2)}
  .sp-welcome-ticket-compact .sp-welcome-ticket-actions{max-width:none}
}