/* ─────────────────────────────────────────────────────────────
   MyAnsweringService.AI
   Night shift. Oscilloscope. No cards, no bubbles, no radius.
   ───────────────────────────────────────────────────────────── */

:root{
  --void:#050504;
  --char:#0d0d0b;
  --bone:#efece1;
  --ash:#7d7a6e;
  --dim:#4a483f;
  --acid:#ccff02;
  --signal:#ff3b1f;
  --line:#1e1e1a;
  --disp:"Space Grotesk",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --serif:"Instrument Serif",Georgia,serif;
}

*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--void);color:var(--bone);
  font-family:var(--disp);font-weight:400;line-height:1.5;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
/* film grain */
body::after{
  content:"";position:fixed;inset:0;z-index:9998;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--acid);color:var(--void)}

.mono{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ash)}
.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.acid{color:var(--acid)}
.pad{padding-inline:clamp(16px,4vw,56px)}
.rule{height:1px;background:var(--line);width:100%}

/* ── nav ─────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  height:56px;border-bottom:1px solid var(--line);
  background:rgba(5,5,4,.82);backdrop-filter:blur(14px);
  padding:0 clamp(16px,4vw,56px);
}
.brand{font-family:var(--mono);font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--bone);text-decoration:none}
.brand i{font-style:normal;color:var(--acid)}
.status{display:flex;align-items:center;gap:9px;white-space:nowrap}
.status b{font-weight:400}
.dot{width:6px;height:6px;background:var(--acid);flex:none;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.15}}

/* ── hero ────────────────────────────────────────────── */
.hero{min-height:100svh;padding-top:56px;display:flex;flex-direction:column;justify-content:space-between}
.hero-top{padding:clamp(40px,9vh,110px) clamp(16px,4vw,56px) 0}
.hero h1{
  font-family:var(--disp);font-weight:700;
  font-size:clamp(3.4rem,15.5vw,15rem);
  line-height:.82;letter-spacing:-.05em;
  margin:0;text-transform:uppercase;
}
.hero h1 em{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:-.03em;font-weight:400}
.hero .sub{
  font-size:clamp(1rem,1.9vw,1.45rem);color:var(--ash);
  margin-top:30px;max-width:34ch;line-height:1.35;
}
.hero .sub b{color:var(--bone);font-weight:500}

/* full-bleed scope */
.scope{position:relative;width:100%;height:clamp(140px,26vh,260px);margin-top:auto}
.scope canvas{display:block;width:100%;height:100%}
.scope::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--void) 0%,transparent 12%,transparent 88%,var(--void) 100%);
}

.hero-foot{
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:20px clamp(16px,4vw,56px) 26px;border-top:1px solid var(--line);
}

/* ── links / actions (no buttons that look like pills) ── */
.go{
  font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--bone);text-decoration:none;display:inline-flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--dim);padding-bottom:5px;transition:.2s;
}
.go:hover{color:var(--acid);border-color:var(--acid);gap:18px}
.go.big{font-size:clamp(.9rem,2.4vw,1.3rem);letter-spacing:.08em;white-space:nowrap}

/* ── marquee ─────────────────────────────────────────── */
.marq{
  border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;
  padding:16px 0;background:var(--char);
}
.marq-in{display:inline-flex;animation:slide 34s linear infinite}
.marq:hover .marq-in{animation-play-state:paused}
.marq span{
  font-family:var(--mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ash);padding:0 26px;
}
.marq span::after{content:"◦";color:var(--acid);margin-left:26px}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── sections ────────────────────────────────────────── */
section{padding-block:clamp(58px,7.5vw,116px) clamp(46px,5.5vw,88px)}
.big{
  font-weight:700;font-size:clamp(2.1rem,7.4vw,6.4rem);
  line-height:.94;letter-spacing:-.045em;max-width:15ch;
}
.big em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em}

/* numbered editorial rows, hairlines only */
.rows{margin-top:clamp(32px,4vw,60px);border-top:1px solid var(--line)}
.row{
  display:grid;grid-template-columns:64px 1fr;gap:clamp(16px,4vw,60px);
  padding:clamp(22px,3.4vh,38px) 0;border-bottom:1px solid var(--line);
  align-items:baseline;
}
.row .n{font-family:var(--mono);font-size:.72rem;color:var(--acid);letter-spacing:.1em}
.row .t{font-size:clamp(1.05rem,2.6vw,1.85rem);line-height:1.3;letter-spacing:-.02em;max-width:26ch}
.row .d{color:var(--ash);font-size:.94rem;margin-top:8px;max-width:44ch;line-height:1.5}

/* ── transcript ──────────────────────────────────────── */
.tape{border:1px solid var(--line);background:var(--char);margin-top:clamp(30px,3.6vw,56px)}
.tape-bar{
  display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
  padding:13px 18px;border-bottom:1px solid var(--line);
}
.tape-body{
  padding:22px 18px;min-height:min(52vh,410px);
  font-family:var(--mono);font-size:clamp(.76rem,1.35vw,.92rem);line-height:1.95;
}
.ln{margin-bottom:3px}
.ln .who{color:var(--dim);display:inline-block;min-width:8ch}
.ln.ai .who{color:var(--acid)}
.ln.sys{color:var(--signal);letter-spacing:.14em;font-size:.72rem;text-transform:uppercase;margin:14px 0}
.ln.cal{color:var(--bone)}
.cur{display:inline-block;width:8px;height:1.05em;background:var(--acid);vertical-align:-2px;animation:blink .9s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.tape-foot{border-top:1px solid var(--line);padding:16px 18px;color:var(--ash);font-size:.9rem}
.tape-foot b{color:var(--bone);font-weight:500}

/* ── pricing table ───────────────────────────────────── */
table{width:100%;border-collapse:collapse;margin-top:clamp(30px,3.6vw,56px)}
thead th{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);font-weight:400;text-align:left;padding:0 0 14px;border-bottom:1px solid var(--line);
}
thead th:last-child,tbody td:last-child{text-align:right}
tbody td{padding:clamp(20px,3vh,32px) 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.tier{font-size:clamp(1.2rem,3vw,2rem);font-weight:700;letter-spacing:-.03em}
.tier small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ash);font-weight:400;margin-top:7px}
.amt{font-family:var(--mono);font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:700;letter-spacing:-.02em}
.amt i{font-style:normal;color:var(--ash);font-size:.68rem;letter-spacing:.1em}
tbody tr.on .amt{color:var(--acid)}
.inc{color:var(--ash);font-size:.9rem;line-height:1.6;max-width:32ch}

/* ── form: underlines, never boxes ───────────────────── */
form{margin-top:clamp(30px,3.6vw,56px);max-width:640px}
.f{position:relative;margin-bottom:30px}
.f label{
  display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);margin-bottom:9px;
}
.f input,.f textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--dim);
  color:var(--bone);font-family:var(--disp);font-size:1.05rem;padding:7px 0;
  transition:border-color .25s;resize:none;
}
.f input:focus,.f textarea:focus{outline:0;border-bottom-color:var(--acid)}
.f input::placeholder,.f textarea::placeholder{color:var(--dim)}

.consent{display:flex;gap:13px;align-items:flex-start;margin:34px 0 26px;
  padding-top:24px;border-top:1px solid var(--line)}
.consent input{
  appearance:none;width:15px;height:15px;flex:none;margin-top:4px;
  border:1px solid var(--dim);background:transparent;cursor:pointer;transition:.2s;
}
.consent input:checked{background:var(--acid);border-color:var(--acid)}
.consent input:focus-visible{outline:2px solid var(--acid);outline-offset:2px}
.consent label{font-size:.79rem;line-height:1.65;color:var(--ash);cursor:pointer}
.consent label a{color:var(--bone);text-decoration:underline;text-underline-offset:3px}

button[type=submit]{
  background:transparent;border:1px solid var(--bone);color:var(--bone);
  font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  padding:17px 40px;cursor:pointer;transition:.25s;
}
button[type=submit]:hover{background:var(--acid);border-color:var(--acid);color:var(--void)}
button[type=submit]:disabled{opacity:.4;cursor:wait}
.note{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-top:18px}
.msg{display:none;font-family:var(--mono);font-size:.8rem;padding:14px 0;
  border-top:1px solid;margin-bottom:20px;letter-spacing:.04em}
.msg.ok{display:block;color:var(--acid);border-color:var(--acid)}
.msg.err{display:block;color:var(--signal);border-color:var(--signal)}

/* ── footer ──────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:44px clamp(16px,4vw,56px) 34px}
.f-top{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;margin-bottom:34px}
footer a{color:var(--ash);text-decoration:none;transition:.2s}
footer a:hover{color:var(--acid)}
.f-links{display:flex;gap:24px;flex-wrap:wrap;font-family:var(--mono);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.f-bot{font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;color:var(--dim);
  text-transform:uppercase;line-height:1.9}

/* ── reveal ──────────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.2,.7,.3,1),transform .9s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
}

/* ── legal pages ─────────────────────────────────────── */
.doc{max-width:68ch;padding:120px clamp(16px,4vw,56px) 100px}
.doc h1{font-size:clamp(2.2rem,6vw,4rem);font-weight:700;letter-spacing:-.04em;line-height:.95}
.doc .upd{font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ash);margin:16px 0 48px}
.doc h2{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin:46px 0 14px;
  padding-top:20px;border-top:1px solid var(--line)}
.doc h3{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--acid);margin:28px 0 10px;font-weight:400}
.doc p{color:var(--ash);margin-bottom:15px;font-size:.95rem;line-height:1.75}
.doc strong{color:var(--bone);font-weight:500}
.doc ul{margin:0 0 16px;list-style:none}
.doc li{color:var(--ash);font-size:.95rem;line-height:1.7;padding-left:20px;position:relative;margin-bottom:9px}
.doc li::before{content:"/";position:absolute;left:0;color:var(--acid);font-family:var(--mono);font-size:.8rem}
.doc a{color:var(--bone)}
.flag{border-left:2px solid var(--acid);padding:18px 0 18px 22px;margin:26px 0;background:var(--char)}
.flag p{color:var(--bone);margin:0;font-size:.93rem}

/* ── narrow ──────────────────────────────────────────── */
@media(max-width:700px){
  .status b{display:none}
  .brand{font-size:.68rem}
  .scope{height:min(34vh,300px)}
  .hero-top{padding-top:clamp(28px,5vh,60px)}
  .row{grid-template-columns:34px 1fr;gap:14px}
  .hero-foot{gap:12px}
  thead th:nth-child(2),tbody td:nth-child(2){display:none}
}