/* ============================================================
   SHEMA — MODERN SURFACE LAYER
   Loaded after peniel.css. Keeps the brand colours and the mark,
   but moves the product pages to the visual language buyers now
   expect from software: sans type, soft radii, glass panels,
   aurora fields, scroll-driven motion.

   Technique notes, arrived at by studying how current AI voice
   sites are built rather than copying any of them:
     - glass = translucent fill + backdrop-filter blur + 1px inner
       highlight, never a flat grey box
     - depth = layered radial gradients, not drop shadows
     - motion = IntersectionObserver + CSS transitions, no library
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

:root {
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Radii, the way current product sites scale them */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Glass */
  --glass:        rgba(243,242,242,.045);
  --glass-strong: rgba(243,242,242,.075);
  --glass-line:   rgba(243,242,242,.12);
  --glass-hi:     rgba(243,242,242,.16);

  /* Amber, expanded just enough for glows. Still one accent. */
  --amber-soft: rgba(164,103,11,.16);
  --amber-glow: rgba(196,132,32,.30);
}

/* ---------------- Type ---------------- */
body.modern,
body.modern .btn,
body.modern input,
body.modern select,
body.modern textarea,
body.modern button { font-family: var(--sans); }

body.modern {
  background: var(--ink);
  color: var(--paper);
  letter-spacing: -0.011em;
}

body.modern h1, body.modern h2, body.modern h3, body.modern h4 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -0.032em;
}

.d1 { font-size: clamp(42px, 5.6vw, 78px); line-height: 1.03; font-weight: 600; letter-spacing: -0.04em; }
.d2 { font-size: clamp(30px, 3.7vw, 52px); line-height: 1.08; font-weight: 600; letter-spacing: -0.035em; }
.d3 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; font-weight: 600; letter-spacing: -0.02em; }

.body-lg { font-size: clamp(16px,1.25vw,19px); line-height: 1.6; color: var(--paper-70); }
.body-md { font-size: 15.5px; line-height: 1.65; color: var(--paper-70); }
.body-sm { font-size: 14px;   line-height: 1.6;  color: var(--paper-55); }

/* Eyebrow, as a pill rather than a tracked-out label */
.tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(14px);
  font-size: 13px; font-weight: 500; color: var(--paper-70);
  letter-spacing: -0.005em;
}
.tag i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber); flex: none;
  box-shadow: 0 0 0 3px var(--amber-soft);
}
.tag.live i { animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 3px var(--amber-soft); } 50% { box-shadow: 0 0 0 7px rgba(164,103,11,.05); } }

/* ---------------- Aurora field ---------------- */
.aurora { position: relative; isolation: isolate; overflow: hidden; }
.aurora > .aurora-layer {
  position: absolute; inset: -20% -10%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(46% 38% at 18% 26%, rgba(164,103,11,.34), transparent 70%),
    radial-gradient(40% 34% at 82% 18%, rgba(120,72,14,.28), transparent 72%),
    radial-gradient(52% 44% at 62% 88%, rgba(196,132,32,.20), transparent 70%);
  filter: blur(20px);
  animation: swirl 34s ease-in-out infinite alternate;
}
@keyframes swirl {
  0%   { transform: translate3d(0,0,0) scale(1)    rotate(0deg); }
  50%  { transform: translate3d(2%,-2%,0) scale(1.09) rotate(4deg); }
  100% { transform: translate3d(-2%,2%,0) scale(1.05) rotate(-3deg); }
}
/* Optional generated texture, multiplied under the gradients */
.aurora > .aurora-img {
  position: absolute; inset: 0; z-index: -3; pointer-events: none;
  opacity: .5;
}
.aurora > .aurora-img :is(img, video) { width: 100%; height: 100%; object-fit: cover; }
/* Grain keeps large gradients from banding on cheap panels */
.aurora::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .aurora > .aurora-layer { animation: none; } }

/* ---------------- Glass panels ---------------- */
.glass {
  position: relative;
  border-radius: var(--r-lg);
  border: 1px solid var(--glass-line);
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(1.15);
  -webkit-backdrop-filter: blur(24px) saturate(1.15);
}
/* The inner top highlight is what sells it as glass rather than grey */
.glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  padding: 1px; pointer-events: none;
  background: linear-gradient(to bottom, var(--glass-hi), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.glass-sm { border-radius: var(--r); }
.glass-strong { background: var(--glass-strong); }

.glass-hover { transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s, background .35s; }
.glass-hover:hover { transform: translateY(-3px); border-color: rgba(243,242,242,.22); background: var(--glass-strong); }

/* A card that glows amber when it is the recommended one */
.glass.accent {
  border-color: rgba(164,103,11,.42);
  background: linear-gradient(180deg, rgba(164,103,11,.13), rgba(164,103,11,.03));
}

/* ---------------- Buttons ---------------- */
body.modern .btn {
  border-radius: var(--r-pill);
  font-weight: 500;
  font-size: 15.5px;
  padding: 13px 24px;
  letter-spacing: -0.01em;
  transition: transform .2s cubic-bezier(.2,.7,.3,1), background .2s, border-color .2s, box-shadow .3s;
}
body.modern .btn:active { transform: scale(.975); }

/* The primary button used to be amber. It is paper on ink now, and
   that pair of rules is defined further down in one place. Leaving the
   old ones here was not dead code: they carried `color: #fff`, which
   the newer hover rule does not override, so a hovered button went
   white on white. Same selector, later rule only wins per property. */

body.modern .btn-ghost,
body.modern a.btn-ghost,
body.modern button.btn-ghost {
  background: var(--glass); color: var(--paper);
  border-color: var(--glass-line);
  backdrop-filter: blur(14px);
}
body.modern .btn-ghost:hover,
body.modern a.btn-ghost:hover,
body.modern button.btn-ghost:hover {
  background: var(--glass-strong); border-color: rgba(243,242,242,.28); color: var(--paper);
}

.btn-xl { padding: 17px 32px; font-size: 17px; }

/* ---------------- Motion ---------------- */
[data-in] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
[data-in].vis { opacity: 1; transform: none; }

[data-in-group] > * { opacity: 0; transform: translateY(22px); }
[data-in-group].vis > * {
  opacity: 1; transform: none;
  transition: opacity .8s cubic-bezier(.2,.7,.3,1), transform .8s cubic-bezier(.2,.7,.3,1);
}
[data-in-group].vis > *:nth-child(1) { transition-delay: 0ms; }
[data-in-group].vis > *:nth-child(2) { transition-delay: 80ms; }
[data-in-group].vis > *:nth-child(3) { transition-delay: 160ms; }
[data-in-group].vis > *:nth-child(4) { transition-delay: 240ms; }
[data-in-group].vis > *:nth-child(5) { transition-delay: 320ms; }
[data-in-group].vis > *:nth-child(6) { transition-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  [data-in], [data-in-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------------- Layout helpers ---------------- */
.shell { max-width: 1200px; margin: 0 auto; padding-inline: 28px; }
@media (max-width: 700px) { .shell { padding-inline: 20px; } }

.sect { padding-block: clamp(72px, 9vw, 132px); }
.sect-sm { padding-block: clamp(48px, 6vw, 80px); }

.center { text-align: center; }
.mx-auto { margin-inline: auto; }
.stack-6 > * + * { margin-top: 6px; }
.stack-12 > * + * { margin-top: 12px; }
.stack-16 > * + * { margin-top: 16px; }
.stack-24 > * + * { margin-top: 24px; }
.stack-32 > * + * { margin-top: 32px; }

.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.row-center { justify-content: center; }

.cols { display: grid; gap: 20px; }
.c2 { grid-template-columns: repeat(2,1fr); }
.c3 { grid-template-columns: repeat(3,1fr); }
.c4 { grid-template-columns: repeat(4,1fr); }
@media (max-width: 1000px) { .c4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 880px)  { .c3 { grid-template-columns: 1fr; } .c2 { grid-template-columns: 1fr; } }
@media (max-width: 560px)  { .c4 { grid-template-columns: 1fr; } }

.hide-sm { }
@media (max-width: 900px) { .hide-sm { display: none !important; } }

/* ============================================================
   PASS 2 — legibility, depth, and real motion
   ============================================================ */

:root {
  /* #A4670B is correct for amber on paper, but it turns to mud on a
     dark glass panel. This is the same hue lifted for on-dark use,
     not a second accent. */
  --amber-lift: #E3A44B;
  --amber-dim:  rgba(227,164,75,.62);
  --amber-line: rgba(227,164,75,.28);
}

/* Anything amber sitting on a dark field uses the lifted tone */
body.modern .tag i { background: var(--amber-lift); box-shadow: 0 0 0 3px rgba(227,164,75,.14); }
body.modern .amber { color: var(--amber-lift); }

/* The aurora was drowning the cards. Pull the photo back, deepen the
   corners, let the gradients do the colour. */
.aurora > .aurora-img { opacity: .26; }
.aurora > .aurora-img::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(23,21,19,.86) 100%);
}
.aurora > .aurora-layer { filter: blur(30px); opacity: .82; }

/* ---------------- Call card (shared across pages) ---------------- */
.callcard { padding: 22px; }
.callcard .cc-bar { display:flex; align-items:center; gap:10px; padding-bottom:15px; border-bottom:1px solid var(--glass-line); }
.callcard .cc-bar .num { font-size:13px; color: var(--paper-70); font-weight:500; }
.callcard .cc-bar .clk { margin-left:auto; font-size:12.5px; color: var(--paper-55); font-variant-numeric: tabular-nums; }

.wave { display:flex; align-items:center; gap:3px; height:32px; padding-block:16px 4px; }
.wave i { flex:1; border-radius:2px; background: rgba(227,164,75,.26); height:16%; transition: height .2s ease, background .2s ease; }
.wave.on i { animation: wv .95s ease-in-out infinite; background: var(--amber-lift); }
@keyframes wv { 0%,100% { height:12%; } 50% { height:94%; } }

.lines { max-height:268px; overflow-y:auto; padding-top:6px; scrollbar-width:thin; }
.lines::-webkit-scrollbar { width:3px; }
.lines::-webkit-scrollbar-thumb { background: var(--glass-line); border-radius:4px; }
.li { display:grid; grid-template-columns:60px 1fr; gap:12px; padding-block:11px; }
.li + .li { border-top:1px solid rgba(243,242,242,.07); }
.li .w { font-size:10.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding-top:4px; }
.li.shema  .w { color: var(--amber-lift); }
.li.caller .w { color: var(--paper-30); }
.li .t { font-size:14.5px; line-height:1.55; color: var(--paper); }
.li.caller .t { color: var(--paper-55); }
.li.pop { animation: pop .5s cubic-bezier(.2,.7,.3,1) both; }
@keyframes pop { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width:520px){ .li{grid-template-columns:1fr;gap:3px} .li .w{padding-top:0} }

/* ============================================================
   MOTION
   Everything below collapses under prefers-reduced-motion.
   ============================================================ */

/* Headline that wipes up line by line from a mask */
.reveal { display: block; overflow: hidden; }
.reveal > span {
  display: block;
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(.16,1,.3,1);
}
.vis .reveal > span, .reveal.vis > span { transform: none; }
.reveal:nth-child(2) > span { transition-delay: .07s; }
.reveal:nth-child(3) > span { transition-delay: .14s; }

/* Slow drift for anything that should feel alive but not busy */
.float { animation: float 9s ease-in-out infinite; }
.float-slow { animation: float 14s ease-in-out infinite; }
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* Hover response. Fixed, not cursor-tracked: a still surface that
   acknowledges the pointer rather than chasing it. The sheen sits
   behind the content so it can never wash over a label. */
.sheen { position: relative; overflow: hidden; isolation: isolate; }
.sheen::after {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(243,242,242,.055), transparent 62%);
  opacity: 0; transition: opacity .45s cubic-bezier(.16,1,.3,1);
}
.sheen:hover::after { opacity: 1; }

/* Cards lift, they do not tip. A 3D tilt on a flat product reads as
   a demo of the effect rather than a property of the thing. */
.tilt { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1); }
.tilt:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,.30); }

/* Buttons stay where you aimed. */
.magnetic { transition: transform .18s cubic-bezier(.16,1,.3,1), filter .18s ease; }
.magnetic:hover { filter: brightness(1.06); }
.magnetic:active { transform: scale(.98); }

/* Scroll-linked parallax. Uses the native scroll timeline where the
   browser has it, so it runs off the main thread. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-para] {
      animation: para linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
    @keyframes para { from { transform: translateY(var(--para-from, 40px)); } to { transform: translateY(var(--para-to, -40px)); } }

    .scale-in {
      animation: scalein linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 42%;
    }
    @keyframes scalein { from { opacity:0; transform: scale(.94) translateY(30px); } to { opacity:1; transform:none; } }
  }
}

/* Number that ticks up, held at a fixed width so nothing jumps */
.count { font-variant-numeric: tabular-nums; }

/* A rule that draws itself in */
.draw { transform: scaleX(0); transform-origin: left; transition: transform 1.1s cubic-bezier(.16,1,.3,1); }
.vis .draw, .draw.vis { transform: scaleX(1); }

/* Slow rotating conic ring, used behind the demo card */
.ring { position:absolute; border-radius:50%; pointer-events:none; z-index:-1;
  background: conic-gradient(from 0deg, transparent, rgba(227,164,75,.22), transparent 42%);
  animation: spin 22s linear infinite; filter: blur(26px); }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .float, .float-slow, .ring, .wave.on i { animation: none !important; }
  .reveal > span { transform: none !important; }
  .draw { transform: none !important; }
}

/* ============================================================
   APP SHELL — dashboards on the same dark glass
   ============================================================ */

body.modern.app-dark { background: var(--ink); }
.app-bar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(23,21,19,.82);
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--glass-line);
}
.app-bar .shell { display:flex; align-items:center; gap:20px; height:66px; }

.tabbar { display:flex; gap:6px; border-bottom:1px solid var(--glass-line); background: rgba(23,21,19,.6); }
.tabbar .shell { display:flex; gap:6px; }
.tabbar button {
  appearance:none; background:none; border:0; cursor:pointer;
  font-family: var(--sans); font-size:14px; font-weight:500; color: var(--paper-55);
  padding:15px 4px; margin-right:18px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  transition: color .2s, border-color .2s;
}
.tabbar button:hover { color: var(--paper-70); }
.tabbar button[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--amber-lift); }

.stat-card { padding: 20px 22px; }
.stat-card .k { font-size:12.5px; color: var(--paper-55); font-weight:500; }
.stat-card .v { font-size: clamp(26px,2.6vw,34px); font-weight:600; letter-spacing:-0.03em; margin-top:8px; }
.stat-card .n { font-size:13px; color: var(--paper-55); margin-top:5px; }
.stat-card .v.amber { color: var(--amber-lift); }

body.modern table.data th {
  color: var(--paper-55); border-bottom-color: var(--glass-line);
  font-family: var(--sans); font-size:12px; font-weight:600; letter-spacing:.02em; text-transform:none;
}
body.modern table.data td { border-bottom-color: rgba(243,242,242,.07); color: var(--paper); }
body.modern table.data tr:hover td { background: rgba(243,242,242,.025); }

body.modern input, body.modern select, body.modern textarea {
  background: rgba(243,242,242,.04); color: var(--paper);
  border:1px solid var(--glass-line); border-radius: var(--r-sm);
  font-family: var(--sans); padding:11px 13px;
}
body.modern input:focus, body.modern select:focus, body.modern textarea:focus {
  border-color: var(--amber-line); box-shadow: 0 0 0 3px rgba(227,164,75,.10); outline:none;
}
body.modern input::placeholder, body.modern textarea::placeholder { color: var(--paper-30); }
body.modern option { background: var(--ink); color: var(--paper); }
body.modern label.field-label { color: var(--paper-55); font-size:12.5px; font-weight:500; letter-spacing:0; text-transform:none; }

.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px; border-radius: var(--r-pill);
  font-size:12px; font-weight:500; border:1px solid var(--glass-line); color: var(--paper-70);
}
.chip::before { content:''; width:6px; height:6px; border-radius:50%; background: currentColor; }
.chip.ok   { color:#7FC29B; border-color: rgba(127,194,155,.3); background: rgba(127,194,155,.08); }
.chip.warn { color: var(--amber-lift); border-color: var(--amber-line); background: rgba(227,164,75,.08); }
.chip.bad  { color:#D98A7A; border-color: rgba(217,138,122,.3); background: rgba(217,138,122,.08); }

/* Status pill used inside a glass card. Deliberately NOT .tag: a
   nested backdrop-filter renders badly inside another one, and
   peniel.css already owns .bar as a progress component. */
.cc-pill {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 5px 11px 5px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--glass-line);
  background: rgba(243,242,242,.06);
  font-size: 12px; font-weight: 500; color: var(--paper-70); line-height: 1;
}
.cc-pill i {
  width: 6px; height: 6px; border-radius: 50%; flex: none; display: block;
  background: var(--amber-lift); box-shadow: 0 0 0 3px rgba(227,164,75,.14);
}
.cc-pill.live i { animation: pulse 2.2s ease-in-out infinite; }

/* ============================================================
   BRIDGE
   The dashboards and inner pages were built against peniel.css
   class names. Rather than rewrite that markup, remap those
   components onto the glass system whenever body.modern is set.
   One switch rebrands every page.
   ============================================================ */

body.modern .wrap { max-width: 1200px; padding-inline: 28px; }
@media (max-width: 700px) { body.modern .wrap { padding-inline: 20px; } }

/* App chrome */
body.modern .app { background: var(--ink); min-height: 100vh; }
body.modern .app-head {
  background: rgba(23,21,19,.82);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--glass-line);
  position: sticky; top: 0; z-index: 60;
}
body.modern .app-head .wrap { height: 66px; display: flex; align-items: center; gap: 18px; }
body.modern .app-main { padding-block: 32px 80px; }

body.modern .app-tabs {
  background: rgba(23,21,19,.55);
  border-bottom: 1px solid var(--glass-line);
  backdrop-filter: blur(14px);
}
body.modern .app-tab {
  font-family: var(--sans); font-size: 14px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--paper-55);
  padding: 15px 0; margin-right: 26px;
  border-bottom: 2px solid transparent;
}
body.modern .app-tab:hover { color: var(--paper-70); }
body.modern .app-tab[aria-selected="true"] { color: var(--paper); border-bottom-color: var(--amber-lift); }

/* Cards become glass */
body.modern .card {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(20px) saturate(1.12);
  -webkit-backdrop-filter: blur(20px) saturate(1.12);
  padding: 26px;
  color: var(--paper);
}
body.modern .card-sm { padding: 20px; border-radius: var(--r); }

/* Stats */
body.modern .stat .k { font-family: var(--sans); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: var(--paper-55); }
body.modern .stat .v { font-size: clamp(26px,2.6vw,34px); font-weight: 600; letter-spacing: -.03em; color: var(--paper); }
body.modern .stat .n { font-size: 13px; color: var(--paper-55); }

/* Headings and text inside app pages */
body.modern .app h1, body.modern .app h2,
body.modern .app h3, body.modern .app h4 { color: var(--paper); }
body.modern .muted { color: var(--paper-55); }
body.modern .label { color: var(--amber-lift); font-family: var(--sans);
  font-size: 12px; letter-spacing: .04em; font-weight: 600; text-transform: uppercase; }
body.modern .label-quiet, body.modern .label-slate { color: var(--paper-55); }
body.modern .lede { color: var(--paper-70); }
body.modern .small { color: var(--paper-55); }

/* Rules */
body.modern .rule-hair, body.modern hr.rule-hair { background: var(--glass-line); }
body.modern .rule-heavy { background: var(--paper-30); }
body.modern .runhead { border-top-color: var(--paper-30); border-bottom-color: var(--glass-line); }
body.modern .rows-ruled > * { border-bottom-color: var(--glass-line); }
body.modern .rows-ruled > *:first-child { border-top-color: var(--paper-30); }
body.modern .rows-ruled > *:last-child { border-bottom-color: var(--paper-30); }
body.modern .cols-ruled > * + * { border-left-color: var(--glass-line); }

/* Buttons */
body.modern .btn-secondary {
  background: var(--glass); color: var(--paper);
  border: 1px solid var(--glass-line); border-radius: var(--r-pill);
}
body.modern .btn-secondary:hover { background: var(--glass-strong); border-color: rgba(243,242,242,.28); }
body.modern .btn-sm { padding: 9px 16px; font-size: 14px; }

/* Pills become chips */
body.modern .pill {
  border-radius: var(--r-pill); font-family: var(--sans);
  font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none;
  border: 1px solid var(--glass-line); background: rgba(243,242,242,.05); color: var(--paper-70);
  padding: 5px 11px;
}
body.modern .pill-ok   { color:#7FC29B; border-color: rgba(127,194,155,.3); background: rgba(127,194,155,.08); }
body.modern .pill-review { color: var(--amber-lift); border-color: var(--amber-line); background: rgba(227,164,75,.08); }
body.modern .pill-miss { color:#D98A7A; border-color: rgba(217,138,122,.3); background: rgba(217,138,122,.08); }
body.modern .pill-neutral { color: var(--paper-55); }

/* Banners */
body.modern .banner {
  background: rgba(227,164,75,.08); border: 1px solid var(--amber-line);
  border-radius: var(--r); color: var(--paper-70); padding: 14px 18px; font-size: 14px;
}
body.modern .banner-warn { background: rgba(217,138,122,.08); border-color: rgba(217,138,122,.3); }

/* Progress bars keep working, just restyled */
body.modern .bar { background: rgba(243,242,242,.09); border-radius: var(--r-pill); height: 7px; }
body.modern .bar > span { background: var(--amber-lift); border-radius: var(--r-pill); }

/* Section heads */
body.modern .section-head h3 { font-size: 18px; font-weight: 600; }

/* Copy-to-clipboard rows */
body.modern .copy-row input { background: rgba(243,242,242,.04); font-family: var(--sans); font-size: 13.5px; }

/* Site chrome on marketing sub-pages */
body.modern .site-head {
  background: rgba(23,21,19,.82); border-bottom: 1px solid var(--glass-line);
  backdrop-filter: blur(18px);
}
body.modern .site-foot { background: transparent; border-top: 1px solid var(--glass-line); color: var(--paper-55); }
body.modern .form-card { border-radius: var(--r-lg); border-color: var(--glass-line); background: var(--glass);
  backdrop-filter: blur(20px); }

/* ------------------------------------------------------------
   Pages that live outside the .app shell — login, checkout,
   thanks, apply — still inherit peniel's ink-on-paper defaults.
   On the dark surface that renders as black on black, which is
   invisible rather than merely ugly. Cover them here so the
   modern switch is genuinely one switch.
   ------------------------------------------------------------ */
body.modern h1, body.modern h2, body.modern h3, body.modern h4,
body.modern .head-1, body.modern .head-2, body.modern .head-3, body.modern .head-4 {
  color: var(--paper);
}
body.modern .field > label,
body.modern label.field-label { color: var(--paper-55); }
body.modern .hint { color: var(--paper-55); }
body.modern .lead { color: var(--paper-70); }
body.modern .cred { background: rgba(243,242,242,.05); border: 1px solid var(--glass-line);
  border-radius: var(--r); color: var(--paper); }

/* The status palette from peniel.css is tuned for ink on paper.
   admin.js and rep.js paint table cells with these directly, so
   remap the tokens rather than chase every call site. */
body.modern {
  --slate:      rgba(243,242,242,.55);
  --ok:         #7FC29B;
  --review:     rgba(243,242,242,.70);
  --miss:       #D98A7A;
  --amber-text: var(--amber-lift);
}
body.modern .btn-quiet { color: var(--amber-lift); }
body.modern .btn-quiet:hover { color: var(--paper); }
body.modern .btn:disabled, body.modern .btn[aria-disabled="true"] {
  color: var(--paper-30); border-color: var(--glass-line);
}

/* A paper band is a light field on a light page. On the dark surface
   it is a white slab in the middle of the scroll, so turn it into a
   quiet raised band instead. */
body.modern .paper {
  background: rgba(243,242,242,.028);
  color: var(--paper);
  border-block: 1px solid var(--glass-line);
}
body.modern .flood { background: rgba(164,103,11,.14); color: var(--paper); }
body.modern .ink { background: transparent; color: var(--paper); }

/* ============================================================
   REFINEMENT PASS
   Apple-leaning minimalism on the dark surface we already have.

   The governing change: amber stops being a field and becomes a
   highlight. It marks one number, one live dot, one focus ring,
   one active state — never a whole button or a whole panel. The
   heavy lifting is done by type, hairlines and space instead.
   ============================================================ */

body.modern {
  /* One easing for everything that moves. Apple's is a long tail. */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --hair: 1px solid rgba(243,242,242,.10);
}

/* ---------- Logo ----------
   peniel.css paints a.logo with --ink for the paper theme, and
   resets to inherit only on :hover. On the dark shell that left
   the mark and the wordmark invisible until you moused over it,
   with just the amber outline and the "by" showing through. */
body.modern .logo,
body.modern a.logo,
body.modern .app-head a.logo,
body.modern .site-head a.logo,
body.modern a.logo:hover { color: var(--paper); }
body.modern .logo .by,
body.modern .lockup .by { color: var(--amber-lift); }
body.modern .logo .endorse,
body.modern .lockup .endorse { color: var(--paper-30); }

/* ---------- Buttons ----------
   The primary action is the brightest thing on the screen, not the
   most saturated. Near-white fill, ink label. Amber is reserved. */
body.modern .btn {
  border-radius: 10px;
  font-family: var(--sans); font-weight: 550; letter-spacing: -0.005em;
  transition: background .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .12s var(--ease);
}
body.modern a.btn-primary, body.modern button.btn-primary, body.modern .btn-primary {
  background: var(--paper); color: var(--ink); border: 1px solid var(--paper);
  box-shadow: none;
}
body.modern .btn-primary:hover,
body.modern a.btn-primary:hover,
body.modern button.btn-primary:hover {
  background: #FFFFFF; border-color: #FFFFFF; color: var(--ink);
}
body.modern .btn:active { transform: scale(.98); }
body.modern .btn-pill, body.modern .nav .btn-primary { border-radius: var(--r-pill); }

/* Focus is the one place amber is allowed to be loud, because it
   only ever appears for the one control you are actually using. */
body.modern :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--amber-lift); outline-offset: 2px; border-radius: 8px;
}

/* ---------- Surfaces ----------
   Crisp radii, hairline borders, essentially no shadow at rest. */
body.modern .card, body.modern .glass {
  border-radius: 16px;
  border: var(--hair);
  box-shadow: none;
  transition: border-color .25s var(--ease), transform .25s var(--ease),
              box-shadow .25s var(--ease);
}
body.modern .card:hover {
  border-color: rgba(243,242,242,.17);
  box-shadow: 0 2px 10px rgba(0,0,0,.30);
}
body.modern .card-sm { border-radius: 14px; }

/* ---------- Segmented control ----------
   The dashboard tab strip, as an iOS segmented control: one track,
   selected segment raised out of it. Replaces the underline rule. */
body.modern .app-tabs { background: transparent; border-bottom: var(--hair); }
body.modern .app-tabs .wrap {
  display: flex; gap: 4px; padding-block: 12px;
}
body.modern .app-tab {
  border: 0; border-radius: 9px; margin-right: 0;
  padding: 8px 15px; font-size: 14px; font-weight: 500;
  color: var(--paper-55); background: transparent;
  transition: background .22s var(--ease), color .22s var(--ease);
}
body.modern .app-tab:hover { color: var(--paper-70); background: rgba(243,242,242,.045); }
body.modern .app-tab[aria-selected="true"] {
  color: var(--ink); background: var(--paper); border-bottom-color: transparent;
}

/* ---------- Dashboard hero band ----------
   One image, one greeting, one number that matters. Everything
   else on the page is subordinate to it. */
.hero-band {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 20px; border: var(--hair);
  padding: clamp(26px, 3.4vw, 40px);
  margin-bottom: 22px;
}
.hero-band > .bg { position: absolute; inset: 0; z-index: -2; }
.hero-band > .bg :is(img, video) { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero-band::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(23,21,19,.86) 4%, rgba(23,21,19,.42) 54%, rgba(23,21,19,.80));
}
.hero-band .eyebrow {
  font-size: 12.5px; font-weight: 500; color: var(--paper-55);
  display: flex; align-items: center; gap: 8px;
}
.hero-band .eyebrow i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--amber-lift);
  box-shadow: 0 0 0 3px rgba(227,164,75,.14); flex: none;
}
.hero-band h2 {
  font-size: clamp(25px, 2.9vw, 36px); font-weight: 600;
  letter-spacing: -0.035em; margin-top: 12px; line-height: 1.08;
}
.hero-band .band-figs { display: flex; gap: clamp(28px, 4vw, 56px); flex-wrap: wrap; margin-top: 26px; }
.hero-band .fig .k { font-size: 12.5px; color: var(--paper-55); }
.hero-band .fig .v {
  font-size: clamp(28px, 3.2vw, 40px); font-weight: 600; letter-spacing: -0.04em;
  margin-top: 5px; font-variant-numeric: tabular-nums; line-height: 1;
}
.hero-band .fig.lead .v { color: var(--amber-lift); }
@media (max-width: 620px) { .hero-band .band-figs { gap: 22px; } }

/* ---------- Grouped list ----------
   Tables read as iOS grouped lists: no rules between columns, a
   hairline between rows, and room to breathe. */
body.modern table.data { border-collapse: collapse; width: 100%; }
body.modern table.data th {
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0; text-transform: none; color: rgba(243,242,242,.44);
  padding: 0 14px 12px; border-bottom: var(--hair);
}
body.modern table.data td {
  padding: 15px 14px; font-size: 14.5px; color: var(--paper-70);
  border-bottom: 1px solid rgba(243,242,242,.055);
}
body.modern table.data tr:last-child td { border-bottom: 0; }
body.modern table.data tbody tr { transition: background .18s var(--ease); }
body.modern table.data tbody tr:hover { background: rgba(243,242,242,.028); }
body.modern table.data td:first-child, body.modern table.data th:first-child { padding-left: 2px; }
body.modern table.data td:last-child,  body.modern table.data th:last-child  { padding-right: 2px; }
body.modern table.data .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Inputs ---------- */
body.modern input, body.modern select, body.modern textarea {
  background: rgba(243,242,242,.045);
  border: var(--hair); border-radius: 10px;
  color: var(--paper); font-family: var(--sans); font-size: 15px;
  padding: 12px 14px;
  transition: border-color .2s var(--ease), background .2s var(--ease);
}
body.modern input:hover, body.modern select:hover, body.modern textarea:hover {
  border-color: rgba(243,242,242,.18);
}
body.modern input::placeholder, body.modern textarea::placeholder { color: var(--paper-30); }
body.modern .copy-row input { border-radius: 10px 0 0 10px; }
body.modern .copy-row .btn { border-radius: 0 10px 10px 0; }

/* ---------- Staggered entrance ----------
   Nothing mounts all at once. 12px and 600ms, per the house easing. */
body.modern [data-reveal], body.modern [data-reveal-group] > * {
  opacity: 0; transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
body.modern [data-reveal].in, body.modern [data-reveal-group].in > * { opacity: 1; transform: none; }
body.modern [data-reveal-group].in > *:nth-child(2) { transition-delay: 70ms; }
body.modern [data-reveal-group].in > *:nth-child(3) { transition-delay: 140ms; }
body.modern [data-reveal-group].in > *:nth-child(4) { transition-delay: 210ms; }
body.modern [data-reveal-group].in > *:nth-child(5) { transition-delay: 280ms; }
body.modern [data-reveal-group].in > *:nth-child(6) { transition-delay: 350ms; }
@media (prefers-reduced-motion: reduce) {
  body.modern [data-reveal], body.modern [data-reveal-group] > * {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* The aurora is atmosphere behind the type, not a field of colour.
   At full strength it reads as an orange page; at this strength it
   reads as a dark page with light in it. */
body.modern .aurora > .aurora-layer { opacity: .46; }
body.modern .aurora > .aurora-img   { opacity: .18; }

/* Eyebrows are orientation, not emphasis. They were amber and
   letterspaced, which made every section shout before it spoke. */
body.modern .label {
  color: var(--paper-30); font-family: var(--sans);
  font-size: 12.5px; font-weight: 500; letter-spacing: 0; text-transform: none;
}
body.modern .label-slate, body.modern .label-quiet { color: var(--paper-30); }

/* Inside the app shell the serif meta labels read as a different
   product to the sans everything else is set in. One family. */
body.modern.app :is(.label, .stat .k, .ladder .n, .split .k, .rank .pos,
                    .goal-head, .step .n, .cred, .cred .k) {
  font-family: var(--sans); letter-spacing: 0; text-transform: none;
}
body.modern.app .ladder .n, body.modern.app .split .k { font-size: 12.5px; color: var(--paper-55); }
body.modern.app .ladder { border: var(--hair); border-radius: 14px; overflow: hidden; }
body.modern.app .ladder .step.now { background: rgba(227,164,75,.08); }

/* --teal and --teal-wash are VoiceFlow-era tokens still referenced from
   inline styles in rep.js and admin.js. Undefined, they resolved to
   nothing and the payout columns quietly lost their emphasis. Map them
   here: money reads bright rather than coloured, and the accent is spent
   on the one row that is you. */
body.modern {
  --teal: var(--paper);
  --teal-wash: rgba(227,164,75,.09);
}
body.modern table.data td[style*="--teal"] { font-weight: 550; color: var(--paper); }
body.modern .rank.me, body.modern tr[style*="teal-wash"] { background: rgba(227,164,75,.09); }

/* ============================================================
   LIVE DEMO WIDGET
   Shared by demo.html and the closer dashboard. Mounted by
   assets/demo-call.js, which drives the orb's class between
   idle / listening / talking off the real Retell call state.
   ============================================================ */

.orb-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 34px 26px; }

/* The orb sits ON the ring loop, so it has to be a lens rather than a
   lid. A solid disc just covered the thing we generated. Everything
   here is translucent and blurred, so the rings read straight through
   it and the orb only ever reads as a presence. Amber shows up as the
   halo while the agent speaks, and nowhere else. */
.orb {
  position: relative; width: 190px; height: 190px; border-radius: 50%;
  display: grid; place-items: center; flex: none;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
/* One hairline edge, and the halo that pushes out while it talks. */
.orb::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(243,242,242,.10);
}
.orb::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid var(--amber-line);
  animation: halo 3.4s ease-out infinite;
}
@keyframes halo {
  0%   { transform: scale(1);    opacity: .7; }
  100% { transform: scale(1.55); opacity: 0; }
}
.orb.idle::after { animation-play-state: paused; opacity: .18; }
.orb.talking { transform: scale(1.05); }
.orb.talking::after { animation-duration: 1.3s; }
.orb.listening { transform: scale(1); }

/* The core is frosted glass over the loop, not a paint chip on top. */
.orb-core {
  width: 92px; height: 92px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(243,242,242,.07);
  border: 1px solid rgba(243,242,242,.16);
  backdrop-filter: blur(9px) saturate(1.3);
  -webkit-backdrop-filter: blur(9px) saturate(1.3);
  box-shadow: inset 0 1px 0 rgba(243,242,242,.22), 0 10px 34px -14px rgba(0,0,0,.7);
  transition: background .35s var(--ease), border-color .35s var(--ease),
              box-shadow .35s var(--ease), transform .18s ease;
}
.orb.listening .orb-core { background: rgba(243,242,242,.09); }
.orb.talking .orb-core {
  background: rgba(227,164,75,.16);
  border-color: var(--amber-line);
  box-shadow: inset 0 1px 0 rgba(243,242,242,.26), 0 0 46px -10px rgba(227,164,75,.5);
}

/* Bars are light on glass now, not ink on a white disc. */
.bars { display: flex; align-items: center; gap: 4px; height: 32px; }
.bars i {
  width: 3.5px; border-radius: 2px; height: 22%;
  background: var(--paper-55); transition: background .35s var(--ease);
}
.orb.listening .bars i { background: var(--paper-70); }
.orb.talking .bars i { background: var(--amber-lift); animation: bounce .62s ease-in-out infinite; }
.bars i:nth-child(2) { animation-delay: .09s } .bars i:nth-child(3) { animation-delay: .18s }
.bars i:nth-child(4) { animation-delay: .27s } .bars i:nth-child(5) { animation-delay: .36s }
@keyframes bounce { 0%,100% { height: 20%; } 50% { height: 88%; } }
@media (prefers-reduced-motion: reduce) {
  .orb::after, .orb.talking .bars i { animation: none; }
}

.demo-status { font-size: 14.5px; color: var(--paper-55); min-height: 1.4em; text-align: center; }
.demo-status strong { color: var(--paper); font-weight: 600; }
.demo-err { color: #D98A7A; font-size: 14px; min-height: 1.3em; text-align: center; }

.tx { padding: 22px; }
.tx-head { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: var(--hair); }
.tx-body { max-height: 340px; overflow-y: auto; padding-top: 8px; scrollbar-width: thin; }
.tx-body::-webkit-scrollbar { width: 3px; }
.tx-body::-webkit-scrollbar-thumb { background: var(--glass-line); border-radius: 4px; }
.tx-empty { color: var(--paper-30); font-size: 14.5px; padding: 26px 0; text-align: center; }

/* The demo stage. The rings sit behind the orb and drift, so the
   widget is alive before anyone presses anything. */
.demo-stage { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; }
.demo-stage > .bg { position: absolute; inset: -8%; z-index: -2; }
.demo-stage > .bg { will-change: opacity; transform: translateZ(0); }
.demo-stage > .bg video,
.demo-stage > .bg img {
  width: 100%; height: 100%; object-fit: cover; opacity: .42;
  transition: opacity .8s var(--ease), filter .8s var(--ease);
}
/* The still is only the poster. If video is unavailable it keeps the
   stage from being a black rectangle, so it drifts on its own. */
.demo-stage > .bg img { animation: driftRings 26s ease-in-out infinite alternate; }
.demo-stage::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 34%, transparent, rgba(23,21,19,.72) 78%);
}
@keyframes driftRings {
  0%   { transform: scale(1)    translate3d(0,0,0); }
  100% { transform: scale(1.07) translate3d(-1.5%,1%,0); }
}
/* The rings answer the call state: dim while idle, open up while the
   agent is actually speaking. */
.demo-stage:has(.orb.idle) > .bg :is(video, img) { opacity: .38; filter: saturate(.75); }
.demo-stage:has(.orb.talking) > .bg :is(video, img) { opacity: .75; filter: saturate(1.15) brightness(1.12); }
@media (prefers-reduced-motion: reduce) { .demo-stage > .bg img { animation: none; } }