/* ============================================================
   layout.public.modern.css
   New public / marketing layout — "VetlinkPRO AI Transcribe"
   Based on Razal's artifact design.
   Brand system: Navy text / Teal accent / Orange CTA-only.

   Scoped under body.l-public-modern so it never bleeds into the
   dashboard, auth, app or embedded layouts (mirrors the
   .l-dashboard convention in layout.dashboard.css).

   Self-hosted fonts (see wwwroot/fonts) keep us within the site
   CSP (font-src 'self'); no external Google Fonts request.
   ============================================================ */

/* ---- Self-hosted brand fonts ---- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/inter-700.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/source-sans-3-400.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/source-sans-3-600.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/source-sans-3-700.woff2') format('woff2');}

/* ---- Design tokens (scoped) ---- */
.l-public-modern{
  /* Brand palette (VetlinkPRO) */
  --teal:#18A7A0;      /* accents, icons, borders, focus rings */
  --teal-ink:#0E6E69;  /* teal used as TEXT on light grounds (AA) */
  --navy:#0F2A3A;      /* brand ink */
  --orange:#FF7A45;    /* primary CTA ONLY */
  --sky:#BFD9FF;
  --mint:#7AC8B5;

  /* Themed neutrals (navy-biased, never a flat grey) */
  --bg:#F4F7F8;
  --surface:#FFFFFF;
  --surface-2:#FFFFFF;
  --panel:#EEF4F5;     /* soft tinted fills */
  --border:#E4EBEE;
  --text:#0F2A3A;
  --muted:rgba(15,42,58,.66);

  /* Hero / dark bands (constant across themes) */
  --hero:#0F2A3A;
  --hero-2:#0A1C27;
  --hero-text:#FFFFFF;
  --hero-muted:rgba(255,255,255,.76);
  --hero-line:rgba(255,255,255,.12);
  --hero-card:#11303F;
  --hero-card-border:rgba(122,200,181,.22);

  --ring:#18A7A0;
  --shadow-card:0 1px 3px rgba(15,42,58,.07), 0 8px 28px -18px rgba(15,42,58,.25);
  --shadow-lift:0 18px 50px -24px rgba(15,42,58,.45);

  /* Type */
  --font-heading:'Inter','DM Sans','Segoe UI',system-ui,sans-serif;
  --font-body:'Source Sans 3','Segoe UI',system-ui,sans-serif;
  --text-h1:clamp(38px,5.4vw,62px);
  --text-h2:clamp(27px,3.6vw,40px);
  --text-h3:19px;

  --maxw:1200px;
  --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-xl:26px;
}

/* Light-only for brand consistency with the auth / dashboard / app pages.
   Auto dark-mode (prefers-color-scheme) intentionally removed. The
   [data-theme] overrides below stay dormant unless a toggle sets them. */
/* Explicit override wins in both directions (if a theme toggle is ever added) */
.l-public-modern[data-theme="light"]{
  --bg:#F4F7F8; --surface:#FFFFFF; --surface-2:#FFFFFF; --panel:#EEF4F5;
  --border:#E4EBEE; --text:#0F2A3A; --muted:rgba(15,42,58,.66);
  --teal-ink:#0E6E69;
  --hero:#0F2A3A; --hero-2:#0A1C27; --hero-card:#11303F;
  --shadow-card:0 1px 3px rgba(15,42,58,.07), 0 8px 28px -18px rgba(15,42,58,.25);
  --shadow-lift:0 18px 50px -24px rgba(15,42,58,.45);
}
.l-public-modern[data-theme="dark"]{
  --bg:#091620; --surface:#0F2836; --surface-2:#123141; --panel:#102A38;
  --border:#204150; --text:#EAF3F5; --muted:rgba(234,243,245,.66);
  --teal-ink:#5FD6CF;
  --hero:#0B2029; --hero-2:#06131B; --hero-card:#0E2A38;
  --shadow-card:0 1px 3px rgba(0,0,0,.5), 0 12px 34px -20px rgba(0,0,0,.7);
  --shadow-lift:0 22px 60px -26px rgba(0,0,0,.8);
}

/* ---- Base ---- */
html{scroll-behavior:smooth;}
.l-public-modern *,.l-public-modern *::before,.l-public-modern *::after{box-sizing:border-box;}
.l-public-modern{margin:0;background:var(--bg);color:var(--text);
  font-family:var(--font-body);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.l-public-modern h1,.l-public-modern h2,.l-public-modern h3,.l-public-modern h4{
  font-family:var(--font-heading);color:var(--text);
  font-weight:700;margin:0 0 .5em;line-height:1.12;text-wrap:balance;
  letter-spacing:-.015em;}
.l-public-modern h1{font-size:var(--text-h1);}
.l-public-modern h2{font-size:var(--text-h2);}
.l-public-modern h3{font-size:var(--text-h3);line-height:1.3;letter-spacing:-.01em;}
.l-public-modern p{margin:0 0 1em;max-width:64ch;}
.l-public-modern a{color:var(--teal-ink);text-underline-offset:3px;}
.l-public-modern img,.l-public-modern svg{max-width:100%;}
.l-public-modern ::selection{background:rgba(24,167,160,.24);}

.l-public-modern .container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.l-public-modern .section{padding:clamp(60px,8.5vw,116px) 0;}
.l-public-modern .section > .container > header{max-width:60ch;margin:0 auto clamp(36px,5vw,60px);text-align:center;}
.l-public-modern .section > .container > header p{margin-inline:auto;color:var(--muted);}
.l-public-modern .eyebrow{display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-heading);font-weight:700;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--teal-ink);
  margin-bottom:14px;}
.l-public-modern .eyebrow::before{content:"";width:22px;height:2px;background:var(--teal);border-radius:2px;}
.l-public-modern .lead{font-size:clamp(18px,2.1vw,21px);color:var(--muted);}

/* ---- Buttons ---- */
.l-public-modern .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-heading);font-weight:700;font-size:16px;
  padding:15px 30px;border-radius:var(--radius-md);border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;transition:transform .16s ease,opacity .16s ease,border-color .16s ease,background .16s ease;}
.l-public-modern .btn:active{transform:translateY(1px);}
.l-public-modern .btn-primary{background:var(--orange);color:#fff;box-shadow:0 10px 26px -12px rgba(255,122,69,.85);}
.l-public-modern .btn-primary:hover{opacity:.93;transform:translateY(-1px);}
.l-public-modern .btn-ghost{background:transparent;color:var(--hero-text);border-color:rgba(255,255,255,.28);}
.l-public-modern .btn-ghost:hover{border-color:var(--teal);}
.l-public-modern .btn-ghost-ink{background:transparent;color:var(--text);border-color:var(--border);}
.l-public-modern .btn-ghost-ink:hover{border-color:var(--teal);}
.l-public-modern .btn:focus-visible{outline:3px solid var(--ring);outline-offset:3px;}

/* ---- Nav ---- */
.l-public-modern .nav{position:sticky;top:0;z-index:60;background:var(--hero);
  border-bottom:1px solid var(--hero-line);}
.l-public-modern .nav .container{display:flex;align-items:center;gap:24px;height:64px;}
.l-public-modern .brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;margin-right:auto;}
.l-public-modern .brand .mark{width:34px;height:34px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(150deg,var(--teal),#0E7E78);
  display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}
.l-public-modern .brand .mark span{display:flex;align-items:flex-end;gap:2.5px;height:15px;}
.l-public-modern .brand .mark i{width:2.5px;background:#fff;border-radius:2px;display:block;}
.l-public-modern .brand .mark i:nth-child(1){height:6px} .l-public-modern .brand .mark i:nth-child(2){height:14px}
.l-public-modern .brand .mark i:nth-child(3){height:9px} .l-public-modern .brand .mark i:nth-child(4){height:12px}
.l-public-modern .brand b{font-family:var(--font-heading);font-weight:700;font-size:18px;letter-spacing:-.02em;}
.l-public-modern .brand em{font-style:normal;color:var(--mint);font-weight:600;}
.l-public-modern .nav-links{display:none;gap:28px;align-items:center;}
.l-public-modern .nav-links a{color:rgba(255,255,255,.82);text-decoration:none;font-family:var(--font-heading);
  font-weight:600;font-size:15px;transition:color .15s;}
.l-public-modern .nav-links a:hover{color:var(--teal);}
.l-public-modern .nav-actions{display:flex;align-items:center;gap:10px;}
.l-public-modern .nav .btn{padding:9px 18px;font-size:14.5px;}
@media(min-width:900px){.l-public-modern .nav-links{display:flex;}}
/* Small screens: let the nav wrap so the two action buttons never overflow
   (auth-aware nav shows two buttons vs the source's one). Desktop unchanged. */
@media(max-width:480px){
  .l-public-modern .nav .container{flex-wrap:wrap;height:auto;min-height:64px;row-gap:10px;padding-top:10px;padding-bottom:10px;}
  .l-public-modern .nav-actions{width:100%;}
  .l-public-modern .nav-actions .btn{flex:1 1 0;}
}

/* ---- Hero ---- */
.l-public-modern .hero{position:relative;overflow:hidden;color:var(--hero-text);
  background:radial-gradient(1200px 620px at 82% -8%,#164055 0%,transparent 60%),
             linear-gradient(180deg,var(--hero) 0%,var(--hero-2) 100%);}
.l-public-modern .hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(680px 320px at 12% 108%,rgba(24,167,160,.20),transparent 62%);}
.l-public-modern .hero .container{position:relative;z-index:1;display:grid;gap:clamp(36px,5vw,64px);
  padding-top:clamp(56px,7vw,96px);padding-bottom:clamp(64px,8vw,110px);
  grid-template-columns:1fr;align-items:center;}
@media(min-width:1000px){.l-public-modern .hero .container{grid-template-columns:1.04fr .96fr;}}
.l-public-modern .hero h1{color:#fff;}
.l-public-modern .hero h1 .hl{color:var(--mint);}
.l-public-modern .hero .eyebrow{color:var(--mint);}
.l-public-modern .hero .eyebrow::before{background:var(--mint);}
.l-public-modern .hero p{color:var(--hero-muted);font-size:clamp(18px,2vw,21px);max-width:38ch;}
.l-public-modern .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin:30px 0 20px;}
.l-public-modern .hero-trust{display:flex;flex-wrap:wrap;gap:8px 20px;color:rgba(255,255,255,.62);
  font-size:14.5px;font-family:var(--font-heading);font-weight:600;}
.l-public-modern .hero-trust span{display:inline-flex;align-items:center;gap:7px;}
.l-public-modern .hero-trust svg{width:16px;height:16px;color:var(--mint);}

/* ---- Hero live demo (the signature moment) ---- */
.l-public-modern .demo{background:var(--hero-card);border:1px solid var(--hero-card-border);
  border-radius:var(--radius-xl);padding:20px;box-shadow:var(--shadow-lift);
  backdrop-filter:blur(2px);}
.l-public-modern .demo-bar{display:flex;align-items:center;gap:12px;padding:4px 6px 16px;
  border-bottom:1px solid rgba(255,255,255,.09);}
.l-public-modern .rec{display:inline-flex;align-items:center;gap:8px;color:#fff;
  font-family:var(--font-heading);font-weight:700;font-size:13.5px;letter-spacing:.01em;}
.l-public-modern .rec .dot{width:9px;height:9px;border-radius:50%;background:#22C55E;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:lpm-pulse 1.8s ease-out infinite;}
@keyframes lpm-pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.l-public-modern .eq{display:inline-flex;align-items:flex-end;gap:3px;height:20px;margin-left:2px;}
.l-public-modern .eq i{width:3px;background:var(--teal);border-radius:3px;height:6px;animation:lpm-eq 1s ease-in-out infinite;}
.l-public-modern .eq i:nth-child(2){animation-delay:.12s} .l-public-modern .eq i:nth-child(3){animation-delay:.24s}
.l-public-modern .eq i:nth-child(4){animation-delay:.36s} .l-public-modern .eq i:nth-child(5){animation-delay:.48s}
.l-public-modern .eq i:nth-child(6){animation-delay:.6s} .l-public-modern .eq i:nth-child(7){animation-delay:.72s}
@keyframes lpm-eq{0%,100%{height:5px}50%{height:19px}}
.l-public-modern .demo-timer{margin-left:auto;font-family:var(--font-heading);font-weight:600;
  font-size:13px;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums;}
.l-public-modern .demo-said{padding:16px 6px 6px;color:rgba(255,255,255,.9);font-size:15.5px;line-height:1.55;min-height:3.4em;}
.l-public-modern .demo-said .caret{display:inline-block;width:2px;height:1.05em;background:var(--mint);
  margin-left:1px;vertical-align:-2px;animation:lpm-blink 1s steps(1) infinite;}
@keyframes lpm-blink{50%{opacity:0}}
.l-public-modern .demo-flow{display:flex;align-items:center;gap:10px;color:var(--mint);
  font-family:var(--font-heading);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;margin:14px 6px 12px;}
.l-public-modern .demo-flow::before,.l-public-modern .demo-flow::after{content:"";height:1px;background:rgba(122,200,181,.3);flex:1;}
.l-public-modern .soap{display:grid;gap:9px;}
.l-public-modern .soap-row{display:grid;grid-template-columns:34px 1fr;gap:12px;align-items:start;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);
  border-radius:12px;padding:11px 13px;opacity:0;transform:translateY(9px);
  animation:lpm-rise .55s cubic-bezier(.2,.7,.3,1) forwards;}
.l-public-modern .soap-row:nth-child(1){animation-delay:.15s} .l-public-modern .soap-row:nth-child(2){animation-delay:1.0s}
.l-public-modern .soap-row:nth-child(3){animation-delay:1.85s} .l-public-modern .soap-row:nth-child(4){animation-delay:2.7s}
@keyframes lpm-rise{to{opacity:1;transform:none}}
.l-public-modern .soap-k{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  font-family:var(--font-heading);font-weight:700;font-size:16px;color:#052e2b;
  background:linear-gradient(160deg,var(--mint),var(--teal));}
.l-public-modern .soap-row h5{margin:1px 0 3px;font-family:var(--font-heading);font-weight:700;
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--mint);}
.l-public-modern .soap-row p{margin:0;color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.45;max-width:none;}

/* ---- Steps (a real sequence: 01 -> 02 -> 03) ---- */
.l-public-modern .steps{display:grid;gap:22px;grid-template-columns:1fr;counter-reset:step;}
@media(min-width:760px){.l-public-modern .steps{grid-template-columns:repeat(3,1fr);gap:26px;}}
.l-public-modern .step{position:relative;padding-top:8px;}
.l-public-modern .step .num{font-family:var(--font-heading);font-weight:700;font-size:15px;
  color:var(--teal-ink);letter-spacing:.06em;display:inline-flex;align-items:center;gap:12px;margin-bottom:16px;}
.l-public-modern .step .num::before{counter-increment:step;content:"0" counter(step);
  font-size:34px;letter-spacing:-.02em;}
.l-public-modern .step .num::after{content:"";height:2px;width:46px;background:var(--border);border-radius:2px;}
@media(min-width:760px){.l-public-modern .step:not(:last-child) .num::after{width:calc(100% - 118px);}}
.l-public-modern .step h3{margin-bottom:8px;}
.l-public-modern .step p{color:var(--muted);margin:0;}

/* ---- Feature cards ---- */
.l-public-modern .grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
.l-public-modern .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--shadow-card);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.l-public-modern .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lift);border-color:rgba(24,167,160,.35);}
.l-public-modern .card .ic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--panel);color:var(--teal-ink);margin-bottom:16px;}
.l-public-modern .card .ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;}
.l-public-modern .card h3{margin-bottom:7px;}
.l-public-modern .card p{color:var(--muted);margin:0;font-size:16.5px;}

/* ---- SOAP explainer split ---- */
.l-public-modern .split{display:grid;gap:clamp(30px,4vw,56px);grid-template-columns:1fr;align-items:center;}
@media(min-width:940px){.l-public-modern .split{grid-template-columns:1fr 1.05fr;}}
.l-public-modern .soap-list{display:grid;gap:14px;margin:26px 0 0;padding:0;list-style:none;}
.l-public-modern .soap-list li{display:grid;grid-template-columns:44px 1fr;gap:16px;align-items:start;}
.l-public-modern .soap-list .lk{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--font-heading);font-weight:700;font-size:19px;color:#fff;
  background:linear-gradient(160deg,var(--teal),#0E7E78);}
.l-public-modern .soap-list h4{margin:3px 0 2px;font-size:16px;}
.l-public-modern .soap-list p{margin:0;color:var(--muted);font-size:16px;}

.l-public-modern .note{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lift);overflow:hidden;}
.l-public-modern .note-head{background:var(--hero);color:#fff;padding:16px 22px;display:flex;align-items:center;gap:12px;}
.l-public-modern .note-head .pt{font-family:var(--font-heading);font-weight:700;font-size:15.5px;}
.l-public-modern .note-head .meta{margin-left:auto;font-size:12.5px;color:rgba(255,255,255,.6);
  font-family:var(--font-heading);font-weight:600;font-variant-numeric:tabular-nums;}
.l-public-modern .note-head .tag{background:rgba(122,200,181,.18);color:var(--mint);font-family:var(--font-heading);
  font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:4px 9px;border-radius:999px;}
.l-public-modern .note-body{padding:8px 22px 20px;}
.l-public-modern .note-sec{padding:15px 0;border-bottom:1px solid var(--border);}
.l-public-modern .note-sec:last-child{border-bottom:0;}
.l-public-modern .note-sec h4{margin:0 0 5px;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--teal-ink);}
.l-public-modern .note-sec p{margin:0;font-size:15.5px;color:var(--text);max-width:none;}

/* ---- Security ---- */
.l-public-modern .sec-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
.l-public-modern .sec-item{display:grid;grid-template-columns:42px 1fr;gap:15px;align-items:start;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;}
.l-public-modern .sec-item .ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;
  background:var(--panel);color:var(--teal-ink);}
.l-public-modern .sec-item svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.l-public-modern .sec-item h4{margin:2px 0 4px;font-size:16px;}
.l-public-modern .sec-item p{margin:0;color:var(--muted);font-size:15px;}

/* ---- Final CTA band ---- */
.l-public-modern .cta{position:relative;overflow:hidden;color:#fff;text-align:center;
  background:radial-gradient(700px 340px at 50% -30%,#17475c,transparent 65%),
             linear-gradient(180deg,var(--hero) 0%,var(--hero-2) 100%);}
.l-public-modern .cta .container{position:relative;z-index:1;padding-block:clamp(64px,8vw,104px);}
.l-public-modern .cta h2{color:#fff;max-width:20ch;margin-inline:auto;}
.l-public-modern .cta p{color:var(--hero-muted);margin-inline:auto;max-width:52ch;font-size:19px;}
.l-public-modern .cta .btn{margin-top:26px;}
.l-public-modern .cta .wave{position:absolute;inset:auto 0 0;height:120px;display:flex;align-items:flex-end;
  justify-content:center;gap:5px;opacity:.16;pointer-events:none;}
.l-public-modern .cta .wave i{width:5px;background:var(--mint);border-radius:4px;}

/* ---- Footer ---- */
.l-public-modern .foot{background:var(--hero-2);color:rgba(255,255,255,.72);border-top:1px solid var(--hero-line);}
.l-public-modern .foot .container{padding-block:52px;display:grid;gap:34px;grid-template-columns:1fr;}
@media(min-width:760px){.l-public-modern .foot .container{grid-template-columns:1.4fr 1fr 1fr;}}
.l-public-modern .foot h5{font-family:var(--font-heading);color:#fff;font-size:13px;letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 14px;}
.l-public-modern .foot a{color:rgba(255,255,255,.72);text-decoration:none;display:block;padding:5px 0;font-size:15px;}
.l-public-modern .foot a:hover{color:var(--teal);}
.l-public-modern .foot .about p{color:rgba(255,255,255,.6);font-size:15px;max-width:40ch;margin:14px 0 0;}
.l-public-modern .foot .brand b{color:#fff;}
.l-public-modern .foot-base{border-top:1px solid var(--hero-line);}
.l-public-modern .foot-base .container{padding-block:20px;display:flex;flex-wrap:wrap;gap:8px 18px;
  align-items:center;justify-content:space-between;font-size:13.5px;color:rgba(255,255,255,.5);}
.l-public-modern .foot-base .fine{max-width:64ch;}
.l-public-modern .foot-legal{display:flex;gap:18px;}
.l-public-modern .foot-legal a{display:inline;padding:0;color:rgba(255,255,255,.5);}
.l-public-modern .foot-legal a:hover{color:var(--teal);}

/* ---- Legal pages (Privacy / Terms) ---- */
.l-public-modern .legal{max-width:80ch;margin:0 auto;}
.l-public-modern .legal h1{font-size:clamp(30px,4vw,42px);margin-bottom:.15em;}
.l-public-modern .legal h2{font-size:1.3rem;margin:1.9em 0 .5em;}
.l-public-modern .legal p{max-width:none;color:var(--text);}
.l-public-modern .legal ul{margin:0 0 1.1em;padding-left:1.2rem;display:grid;gap:.45rem;}
.l-public-modern .legal li{line-height:1.55;color:var(--text);}
.l-public-modern .legal a{color:var(--teal-ink);}
.l-public-modern .legal-updated{color:var(--muted);font-family:var(--font-heading);font-weight:600;font-size:.9rem;margin:0 0 1.2em;}
.l-public-modern .legal-note{background:var(--panel);border:1px solid var(--border);border-left:4px solid var(--teal);
  border-radius:var(--radius-md);padding:14px 16px;margin:20px 0 30px;font-size:.96rem;color:var(--text);}
.l-public-modern .legal-note p{margin:0;}
.l-public-modern .legal-note--warn{border-left-color:var(--orange);background:#FFF4EF;}

.l-public-modern [data-reveal]{will-change:opacity,transform;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .l-public-modern *,.l-public-modern *::before,.l-public-modern *::after{animation:none!important;transition:none!important;}
  .l-public-modern .soap-row{opacity:1;transform:none;}
  .l-public-modern .demo-said .caret{display:none;}
  .l-public-modern [data-reveal]{opacity:1!important;transform:none!important;}
}

/* ---- Home page: DARK aibeta styling (banner + footer, per the reference screenshots).
        The base .hero (dark gradient, white headline, mint accents) and .foot (dark) rules apply;
        here we only (a) make the whole home page a dark ground so there's no light void below the
        footer, and (b) keep the banner compact with a smaller headline. Scoped via body.l-home. ---- */
.l-public-modern.l-home{background:var(--hero-2);}
.l-public-modern > main > .hero > .container{padding-top:clamp(32px,4.5vw,56px);padding-bottom:clamp(32px,4.5vw,56px);}
.l-public-modern > main > .hero h1{font-size:clamp(30px,3.8vw,46px);}

/* ---- Hero AI support chat mockup (Archer) — reuses the dark .demo card aesthetic ---- */
.l-public-modern .chat{display:grid;gap:12px;padding:16px 4px 4px;align-content:start;min-height:224px;}
/* live-typing demo: message entrance, "typing…" dots, and a blinking caret */
@keyframes lpm-chat-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.l-public-modern .chat-msg{animation:lpm-chat-in .3s cubic-bezier(.2,.7,.3,1) both;}
.l-public-modern .typing{display:inline-flex;gap:5px;align-items:center;padding:4px 0;}
.l-public-modern .typing i{width:6px;height:6px;border-radius:50%;background:var(--mint);animation:lpm-typing 1.2s infinite ease-in-out;}
.l-public-modern .typing i:nth-child(2){animation-delay:.18s}
.l-public-modern .typing i:nth-child(3){animation-delay:.36s}
@keyframes lpm-typing{0%,70%,100%{opacity:.3;transform:translateY(0)}35%{opacity:1;transform:translateY(-3px)}}
.l-public-modern .ci-field.is-typing{color:rgba(255,255,255,.92);}
.l-public-modern .ci-caret{display:inline-block;width:2px;height:1.05em;background:var(--mint);margin-left:1px;vertical-align:-2px;animation:lpm-blink 1s steps(1) infinite;}
.l-public-modern .chat-msg{max-width:90%;padding:11px 14px;border-radius:14px;font-size:14px;line-height:1.5;}
.l-public-modern .chat-msg.user{justify-self:end;background:linear-gradient(160deg,var(--teal),#0E7E78);color:#fff;border-bottom-right-radius:5px;}
.l-public-modern .chat-msg.bot{justify-self:start;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.9);border-bottom-left-radius:5px;}
.l-public-modern .chat-msg.bot b{color:var(--mint);font-weight:700;}
.l-public-modern .chat-msg .who{display:flex;align-items:center;gap:8px;font-family:var(--font-heading);font-weight:700;font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--mint);margin-bottom:6px;}
.l-public-modern .chat-msg .who .ava{width:20px;height:20px;border-radius:6px;flex:0 0 auto;display:grid;place-items:center;background:linear-gradient(150deg,var(--teal),#0E7E78);}
.l-public-modern .chat-cite{margin-top:9px;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-heading);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--mint);background:rgba(122,200,181,.14);padding:3px 9px;border-radius:999px;}
.l-public-modern .chat-input{display:flex;align-items:center;gap:10px;margin:14px 4px 2px;}
.l-public-modern .ci-field{flex:1;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:10px 13px;color:rgba(255,255,255,.5);font-size:13.5px;}
.l-public-modern .ci-human{color:var(--mint);font-family:var(--font-heading);font-weight:700;font-size:12.5px;white-space:nowrap;}
.l-public-modern .demo-note{margin:14px 4px 2px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09);color:rgba(255,255,255,.55);font-size:12px;}
.l-public-modern .demo-note b{color:var(--mint);font-weight:700;}

/* ---- Hero caveat box (GM requirement: "check with a human" visible) — dark ground ---- */
.l-public-modern .hero-note{display:flex;gap:10px;align-items:flex-start;margin:0 0 22px;padding:11px 15px;
  border-radius:12px;background:rgba(255,122,69,.1);border:1px solid rgba(255,122,69,.3);
  color:rgba(255,255,255,.88);font-size:14.5px;max-width:42ch;}
.l-public-modern .hero-note strong{color:var(--orange);}