/* =====================================================================
   agents247.io — shared stylesheet
   Dark-first tokens, swapped consistently for light. Every colour is
   defined on bare :root first so nothing depends on a media query.
   ===================================================================== */

:root{
  --ground:#07090C;
  --ground-2:#0B0E13;
  --glass:rgba(255,255,255,.045);
  --glass-2:rgba(255,255,255,.07);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.18);
  --ink:#F2F4F7;
  --ink-2:#98A2B3;
  --ink-3:#8B93A3;
  /* --ink-3 was #667085 in ALL THREE blocks: the muted tier was written once
     and never given a per-theme value. Audited live on 29 Aug across all four
     pages in both themes, it was the ONLY cause of every failure found —
     45 of them, and nothing else failed at all:

         /                 12 dark,  2 light   worst 3.12
         /how-it-works.html 6 dark,  0 light   worst 3.89
         /about.html       10 dark,  0 light   worst 3.71
         /contact.html     15 dark,  0 light   worst 3.71  (9 are form labels)

     Dark is worse because the glass cards composite UP to rgb(35,36,38),
     so the muted text sits on a lighter ground than the page — the opposite
     of the intuition that dark mode fails on the darkest surface. Measured
     against every background it actually lands on: dark now clears 5.03,
     light 5.07, and light stays lighter than --ink-2 (6.73) so the three
     ink tiers still read as three tiers. */
  --accent:#F0B429;
  --accent-ink:#0A0C10;
  --accent-text:#FFC94A;
  --live:#3DDC97;
  --shadow:0 24px 60px -28px rgba(0,0,0,.85);
  --shadow-pop:0 30px 70px -30px rgba(0,0,0,.9);
  --glow:radial-gradient(60% 50% at 50% 0%, rgba(240,180,41,.16), transparent 70%);
  --blur:blur(18px);
  --panel:#12161E;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --ground:#EDF0F5; --ground-2:#F6F8FB;
    --glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.92);
    --line:rgba(16,24,40,.10); --line-strong:rgba(16,24,40,.20);
    --ink:#0E1420; --ink-2:#475467; --ink-3:#5D6675;
    --accent:#F0B429; --accent-ink:#251A00; --accent-text:#9A5B02;
    --live:#0F9D62;
    --shadow:0 22px 50px -30px rgba(16,24,40,.45);
    --shadow-pop:0 26px 60px -30px rgba(16,24,40,.55);
    --glow:radial-gradient(60% 50% at 50% 0%, rgba(240,180,41,.30), transparent 70%);
    --blur:blur(14px);
    --panel:#FFFFFF;
  }
}
:root[data-theme="light"]{
  --ground:#EDF0F5; --ground-2:#F6F8FB;
  --glass:rgba(255,255,255,.74); --glass-2:rgba(255,255,255,.92);
  --line:rgba(16,24,40,.10); --line-strong:rgba(16,24,40,.20);
  --ink:#0E1420; --ink-2:#475467; --ink-3:#5D6675;
  --accent:#F0B429; --accent-ink:#251A00; --accent-text:#9A5B02;
  --live:#0F9D62;
  --shadow:0 22px 50px -30px rgba(16,24,40,.45);
  --shadow-pop:0 26px 60px -30px rgba(16,24,40,.55);
  --glow:radial-gradient(60% 50% at 50% 0%, rgba(240,180,41,.30), transparent 70%);
  --blur:blur(14px);
  --panel:#FFFFFF;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:Montserrat,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:inherit;text-wrap:balance;margin:0;letter-spacing:-.02em}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem);font-weight:800;line-height:1.05}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem);font-weight:700;line-height:1.15}
h3{font-size:1.14rem;font-weight:600;line-height:1.35}
p{margin:0}
a{color:inherit}
.wrap{width:min(1180px,92vw);margin-inline:auto}
.eyebrow{font-size:.74rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--accent-text)}
.muted{color:var(--ink-2)}
section{padding:clamp(72px,9vw,128px) 0;position:relative}
.sec-head{display:flex;flex-direction:column;gap:14px;max-width:62ch;margin-bottom:52px}
.alt{background:var(--ground-2)}

.glass{
  background:var(--glass);border:1px solid var(--line);border-radius:22px;
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);box-shadow:var(--shadow);
}

/* =====================================================================
   LOGO
   Built from HTML + CSS, never from a text-in-SVG lockup. The "7" chip
   is sized in em against its own font-size, so it stays optically
   identical at every scale and does not depend on Montserrat being
   installed — which is exactly what broke the SVG version.
   ===================================================================== */
.logo{
  display:inline-flex;align-items:center;gap:.52em;
  font-weight:800;letter-spacing:-.03em;font-size:1.06rem;
  text-decoration:none;color:var(--ink);line-height:1;white-space:nowrap;
}
.logo svg{flex:none;display:block}
.logo .word{display:inline-flex;align-items:center}
.logo .amber{color:var(--accent-text)}
.logo .seven{
  display:inline-grid;place-items:center;
  width:1.34em;height:1.34em;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);
  font-size:.78em;font-weight:800;line-height:1;
  margin-left:.16em;font-style:normal;
  transform:translateY(-.02em);
}

/* =====================================================================
   NAV — every item is a button. Same pill, same hover, same focus ring.
   Both dropdowns use one panel component so they cannot drift apart.
   ===================================================================== */
.nav-shell{position:sticky;top:18px;z-index:80;padding-inline:4vw}
.nav{
  display:flex;align-items:center;gap:6px;
  padding:9px 9px 9px 20px;border-radius:999px;
  width:min(1180px,92vw);margin-inline:auto;flex-wrap:nowrap;
}
.nav .logo{margin-right:auto}

.nav-links{display:flex;align-items:center;gap:4px}
@media(max-width:960px){.nav-links{display:none}}

/* one shared shape for links, dropdown triggers and the login button */
.navitem{
  font:inherit;font-size:.93rem;font-weight:500;color:var(--ink-2);
  background:transparent;border:1px solid transparent;
  padding:9px 15px;border-radius:999px;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  transition:color .18s ease,background .18s ease,border-color .18s ease;
}
.navitem:hover,.navitem:focus-visible{color:var(--ink);background:var(--glass-2);border-color:var(--line-strong)}
.navitem[aria-expanded="true"]{color:var(--ink);background:var(--glass-2);border-color:var(--line-strong)}
.navitem .caret{width:9px;height:9px;flex:none;transition:transform .2s ease;opacity:.75}
.navitem[aria-expanded="true"] .caret{transform:rotate(180deg)}
.navitem.login{color:var(--ink);border-color:var(--line-strong)}

.nav .cta{
  font:inherit;font-size:.93rem;font-weight:600;
  background:var(--accent);color:var(--accent-ink);border:1px solid transparent;
  padding:9px 18px;border-radius:999px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:filter .18s ease;
}
.nav .cta:hover{filter:brightness(1.08)}

/* dropdown */
.menu{position:relative}
/* The panel sits 12px below the trigger. Without this bridge the pointer
   crosses dead space on its way down, mouseleave fires, and the menu shuts
   before it can be clicked. The bridge makes the gap part of the menu. */
.menu::after{content:"";position:absolute;top:100%;left:0;right:0;height:14px}
.panel{
  position:absolute;top:calc(100% + 12px);right:0;left:auto;
  width:320px;padding:8px;display:none;flex-direction:column;gap:2px;
  border-radius:18px;box-shadow:var(--shadow-pop);z-index:90;
  background:var(--panel);          /* opaque — page text must not read through */
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.panel[data-open="true"]{display:flex}
.panel a{
  display:flex;flex-direction:column;gap:2px;
  padding:11px 13px;border-radius:12px;text-decoration:none;
  border:1px solid transparent;transition:background .16s ease,border-color .16s ease;
}
.panel a:hover,.panel a:focus-visible{background:var(--glass-2);border-color:var(--line)}
.panel a strong{font-size:.94rem;font-weight:600;color:var(--ink)}
.panel a span{font-size:.83rem;color:var(--ink-3);line-height:1.45}

.icon-btn{
  border:1px solid var(--line-strong);background:transparent;color:var(--ink);
  width:38px;height:38px;border-radius:999px;cursor:pointer;display:grid;place-items:center;
  font-size:1rem;flex:none;transition:background .18s ease;
}
.icon-btn:hover{background:var(--glass-2)}
.burger{display:none}
@media(max-width:960px){
  .burger{display:grid}
  /* the bar cannot hold five controls on a phone — Login and Sign up
     move into the sheet, which is where a thumb reaches them anyway */
  .nav .cta{display:none}
  .navitem.login{display:none}
  .nav{padding-left:16px}
}

/* mobile sheet — same item shapes as the desktop panels */
.sheet{margin:10px auto 0;width:min(1180px,92vw);padding:12px;display:flex;flex-direction:column;gap:2px}
.sheet[hidden]{display:none}
.sheet a{display:flex;flex-direction:column;gap:2px;text-decoration:none;padding:11px 13px;border-radius:12px}
.sheet a:hover{background:var(--glass-2)}
.sheet a strong{font-size:.98rem;font-weight:600;color:var(--ink)}
.sheet a span{font-size:.83rem;color:var(--ink-3)}
.sheet .grp{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);padding:14px 13px 6px}
.sheet hr{border:none;border-top:1px solid var(--line);margin:8px 4px}

/* =====================================================================
   HERO
   ===================================================================== */
.hero{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(56px,7vw,92px);text-align:center;position:relative}
.hero::before{content:"";position:absolute;inset:-120px 0 auto;height:620px;background:var(--glow);pointer-events:none}
.hero-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}
.hero p.lede{max-width:60ch;font-size:1.12rem;color:var(--ink-2)}
.hero .fine{font-size:.78rem;color:var(--ink-3);letter-spacing:.03em}
/* sub-pages have no dial card under the headline, so the same padding
   leaves a dead band between the lede and the first section */
.hero.compact{padding-bottom:clamp(20px,2.5vw,34px)}
.hero.compact + section{padding-top:clamp(44px,5vw,68px)}

.dial{
  margin-top:14px;padding:32px 34px 74px;width:min(580px,100%);
  display:flex;flex-direction:column;align-items:center;gap:12px;
  position:relative;overflow:hidden;isolation:isolate;
}
.dial::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(115% 85% at 50% 108%, rgba(61,220,151,.26), transparent 60%),
    radial-gradient(105% 80% at 50% -8%,  rgba(240,180,41,.22), transparent 58%);
  animation:breathe 3.8s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}
.dial canvas{
  position:absolute;inset:auto 0 0;width:100%;height:86px;opacity:.9;z-index:-1;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.live{display:flex;align-items:center;gap:11px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.beacon{position:relative;width:11px;height:11px;flex:none;display:inline-block}
.beacon::before{content:"";position:absolute;inset:2px;border-radius:50%;background:var(--live);box-shadow:0 0 12px 1px var(--live)}
.beacon::after,.beacon i{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--live);animation:ping 2.8s cubic-bezier(0,0,.2,1) infinite}
.beacon i{animation-delay:1.4s}
.beacon.sm{width:9px;height:9px}
.beacon.sm::before{inset:1.5px}
@keyframes ping{0%{transform:scale(.9);opacity:.85}100%{transform:scale(4.2);opacity:0}}
.number{
  font-weight:700;font-size:clamp(2.1rem,5.8vw,3.25rem);letter-spacing:.02em;
  color:var(--ink);text-decoration:none;display:block;font-variant-numeric:tabular-nums;
  position:relative;text-shadow:0 0 34px rgba(240,180,41,.28);
}
.number:hover{color:var(--accent-text)}
.dial small{color:var(--ink-3);font-size:.87rem;max-width:44ch;position:relative}

/* =====================================================================
   BUTTONS
   ===================================================================== */
.btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:6px}
.btn{
  font:inherit;font-size:.97rem;font-weight:600;text-decoration:none;
  padding:13px 26px;border-radius:999px;border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;
  transition:transform .16s ease,background .18s ease,border-color .18s ease,filter .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{border-color:var(--line-strong);color:var(--ink);background:var(--glass)}
.btn-ghost:hover{background:var(--glass-2)}

/* =====================================================================
   SCENARIO CARDS
   Was a horizontal rail with three audio players. The players had no
   audio behind them while the copy said "press play — this is the actual
   voice", which is a promise the page could not keep, and the sideways
   scroll hid the third card. Now three cards that fit the page.
   ===================================================================== */
.scenarios{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(292px,1fr))}
.call{padding:28px;display:flex;flex-direction:column;gap:12px}
.call .tag{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.call p{color:var(--ink-2);font-size:.98rem}
.disclosure{margin-top:26px;font-size:.87rem;color:var(--ink-3);max-width:78ch}

/* the player ------------------------------------------------------------
   The duration is written into the HTML as a fallback and then overwritten
   from the file's own metadata, so regenerating the audio can never leave a
   wrong number sitting on the page. */
.player{display:flex;align-items:center;gap:14px;margin-top:auto;padding:12px 14px;
  border-radius:14px;background:var(--glass-2);border:1px solid var(--line)}
.play{width:40px;height:40px;border-radius:999px;border:none;background:var(--accent);
  color:var(--accent-ink);cursor:pointer;display:grid;place-items:center;flex:none;
  transition:filter .18s ease}
.play:hover{filter:brightness(1.08)}
.play svg{margin-left:2px}
.play[data-playing="true"] svg{margin-left:0}
.bars{display:flex;align-items:center;gap:3px;height:26px;flex:1;min-width:0}
.bars i{flex:1;background:var(--ink-3);border-radius:2px;opacity:.45;transition:background .1s linear,opacity .1s linear}
.bars i.on{background:var(--accent);opacity:1}
.dur{font-size:.8rem;color:var(--ink-3);font-variant-numeric:tabular-nums;flex:none}


/* =====================================================================
   STEPS / CAPABILITIES / FAQ / ABOUT / CONTACT
   ===================================================================== */
.steps{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(272px,1fr))}
.step{padding:28px;display:flex;flex-direction:column;gap:13px}
.step .n{font-size:.78rem;letter-spacing:.14em;color:var(--accent-text)}
.step p{color:var(--ink-2);font-size:.97rem}

.caps{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:22px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(268px,1fr))}
.cap{background:var(--ground-2);padding:24px 26px;display:flex;flex-direction:column;gap:7px}
.cap strong{font-weight:600;font-size:1rem}
.cap span{color:var(--ink-2);font-size:.93rem}

.faq{display:flex;flex-direction:column;gap:11px;max-width:78ch}
details{border-radius:16px;padding:0;overflow:hidden}
summary{list-style:none;cursor:pointer;padding:20px 24px;font-weight:600;font-size:1.01rem;display:flex;justify-content:space-between;gap:16px;align-items:center}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent-text);font-size:1.2rem;flex:none}
details[open] summary::after{content:"–"}
details p{padding:0 24px 22px;color:var(--ink-2);font-size:.97rem;max-width:66ch}

.about{display:grid;gap:20px;grid-template-columns:1.35fr .65fr;align-items:start}
@media(max-width:900px){.about{grid-template-columns:1fr}}
.about-main{padding:32px;display:flex;flex-direction:column;gap:16px}
.about-main p{color:var(--ink-2);max-width:64ch}
.about-main b{color:var(--ink)}
.about-side{display:grid;gap:12px}
.fact{padding:18px 22px;display:flex;flex-direction:column;gap:3px}
.fact .k{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.fact .v{font-weight:600;font-size:1.02rem;color:var(--ink);font-variant-numeric:tabular-nums;text-decoration:none}

.contact{display:grid;gap:24px;grid-template-columns:1.05fr .95fr;align-items:start}
@media(max-width:900px){.contact{grid-template-columns:1fr}}
form{padding:30px;display:flex;flex-direction:column;gap:14px}
.row{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media(max-width:560px){.row{grid-template-columns:1fr}}
label{font-size:.71rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:block;margin-bottom:7px}
input,select,textarea{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line-strong);
  background:var(--ground-2);color:var(--ink);font-family:inherit;font-size:.96rem}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
textarea{resize:vertical;min-height:88px}
.lines{display:grid;gap:16px}
.line-card{padding:26px;display:flex;flex-direction:column;gap:6px}
.line-card .k{font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text)}
.line-card .v{font-weight:600;font-size:1.6rem;font-variant-numeric:tabular-nums;text-decoration:none}
.line-card small{color:var(--ink-3);font-size:.89rem}

/* closing call to action, shared by every page */
.cta-band{padding:clamp(56px,7vw,96px) 0}
.cta-card{padding:clamp(32px,4vw,54px);display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.cta-card p{color:var(--ink-2);max-width:56ch}

/* =====================================================================
   FOOTER
   ===================================================================== */
footer{border-top:1px solid var(--line);padding:48px 0 60px;background:var(--ground-2)}
.foot-top{display:flex;flex-wrap:wrap;gap:32px 60px;justify-content:space-between;margin-bottom:36px}
.foot-col{display:flex;flex-direction:column;gap:9px;min-width:150px}
.foot-col .h{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.foot-col a{font-size:.92rem;color:var(--ink-2);text-decoration:none}
.foot-col a:hover{color:var(--ink)}
.foot-bottom{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center;
  border-top:1px solid var(--line);padding-top:22px}
.foot-bottom p,.foot-bottom a{font-size:.87rem;color:var(--ink-3);text-decoration:none}
.foot-bottom a:hover{color:var(--ink)}

dialog{border:none;padding:0;background:transparent;color:var(--ink);max-width:min(460px,92vw);margin:auto}
dialog::backdrop{background:rgba(4,6,10,.62);backdrop-filter:blur(6px)}
.join{padding:30px;display:flex;flex-direction:column;gap:14px}
.join h3{font-size:1.35rem;font-weight:700}
.join p{color:var(--ink-2);font-size:.95rem}
.join .close{position:absolute;top:16px;right:18px;background:none;border:none;color:var(--ink-3);font-size:1.3rem;cursor:pointer;line-height:1}
.join-wrap{position:relative}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}