/* alleventcast.com — professional AV / conferencing.
   Premium B2B: warm off-white, generous whitespace, one deep-teal accent,
   editorial serif display against a clean grotesque. Restrained, no neon.
   Nothing shared with the other sites. */

:root{
  --bg:#fbfaf7;
  --bg-2:#f2f0ea;
  --ink:#101418;
  --ink-2:#3d464f;
  --muted:#6d7681;
  --line:#e2ded4;
  --line-2:#cdc7b9;
  --teal:#0f6f6c;
  --teal-2:#0a4f4d;
  --teal-pale:#e6f0ef;
  --white:#fff;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.68;
}

img{max-width:100%;height:auto;display:block}
svg{max-width:100%;height:auto}

.wrap{max-width:1100px;margin:0 auto;padding:0 26px}
.narrow{max-width:68ch}

h1,h2,h3{
  font-family:'Instrument Serif',Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.08;
  letter-spacing:-.012em;
  margin:0;
  color:var(--ink);
}
h1{font-size:clamp(2.5rem,6vw,4.4rem)}
h2{font-size:clamp(1.95rem,4.2vw,3.1rem);margin-bottom:.9rem}
h3{
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:1.08rem;letter-spacing:-.005em;margin-bottom:.45rem;
}

p{margin:0 0 1.1rem;max-width:68ch}
.lead{font-size:1.2rem;color:var(--muted);line-height:1.6}

a{color:var(--teal)}
em{font-style:italic;color:var(--teal)}
strong{color:var(--ink);font-weight:700}

/* ---------- masthead ---------- */

.brandbar{
  display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;
  padding:26px 0;
}
.mark{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.5rem;color:var(--ink);letter-spacing:-.01em;
}
.mark b{font-weight:400;color:var(--teal)}
.brandbar .tag{font-size:.86rem;color:var(--muted)}

header.mast{padding:0 0 84px;border-bottom:1px solid var(--line)}
header.mast .hero{padding-top:56px;max-width:22ch}
header.mast h1{margin-bottom:1.5rem}
header.mast .lead{max-width:56ch}

.kicker{
  font-size:.79rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--teal);font-weight:700;margin-bottom:1.4rem;
}

/* ---------- buttons ---------- */

.btn{
  display:inline-block;
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:1.02rem;
  background:var(--teal);color:#fff;
  text-decoration:none;
  padding:15px 32px;min-height:48px;
  border:1px solid var(--teal);
  border-radius:4px;
}
.btn:hover,.btn:focus{background:var(--teal-2);border-color:var(--teal-2)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover,.btn.ghost:focus{border-color:var(--teal);color:var(--teal);background:transparent}
.btnrow{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}

/* ---------- sections ---------- */

section{padding:84px 0;border-bottom:1px solid var(--line)}
section.tint{background:var(--bg-2)}
section.deep{background:var(--teal-2);border-bottom:none}
section.deep h2,section.deep h3{color:#fff}
section.deep p{color:rgba(255,255,255,.82)}
section.deep .kicker{color:#8fd6d2}

.eyebrow{
  font-size:.79rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-bottom:1rem;
}

/* ---------- pull ---------- */

.pull{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:clamp(1.5rem,3.4vw,2.2rem);
  line-height:1.28;color:var(--ink);
  border-left:3px solid var(--teal);
  padding-left:28px;margin:40px 0;max-width:26ch;
}

/* ---------- three modes ---------- */

.modes{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(276px,1fr));margin-top:40px}
.mode{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:30px;
}
section.tint .mode{background:var(--white)}
.mode .n{
  font-family:'Instrument Serif',Georgia,serif;
  font-size:2.4rem;color:var(--teal);line-height:1;
  display:block;margin-bottom:.8rem;
}
.mode h3{font-size:1.22rem;margin-bottom:.6rem}
.mode p{font-size:.98rem;margin-bottom:0}

/* ---------- diagram ---------- */

.diagram{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:6px;
  padding:34px 30px 26px;
  margin-top:40px;
  overflow-x:auto;
}
.diagram figcaption{
  font-size:.88rem;color:var(--muted);
  margin-top:20px;padding-top:18px;border-top:1px solid var(--line);
  max-width:none;
}

/* ---------- table ---------- */

.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:38px}
table.cmp{width:100%;border-collapse:collapse;font-size:.97rem;min-width:600px;background:var(--white)}
table.cmp caption{
  text-align:left;font-size:.79rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);font-weight:700;padding-bottom:1rem;
}
table.cmp th,table.cmp td{
  text-align:left;padding:15px 18px;
  border-bottom:1px solid var(--line);vertical-align:top;
}
table.cmp thead th{
  background:var(--ink);color:#fff;font-weight:700;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
}
table.cmp thead th.best{background:var(--teal)}
table.cmp tbody th{font-weight:700;color:var(--ink);width:28%}
table.cmp td{color:var(--ink-2)}

/* ---------- grids ---------- */

.cols{display:grid;gap:32px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:40px}
.cols p{font-size:.98rem;margin-bottom:0}
.cols h3{color:var(--ink)}
section.deep .cols h3{color:#fff}

/* ---------- note ---------- */

.note{
  background:var(--teal-pale);
  border:1px solid #c9e0de;
  border-radius:6px;
  padding:26px 28px;margin:36px 0;
}
.note .hd{
  font-size:.79rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal-2);font-weight:700;margin-bottom:.7rem;
}
.note p{font-size:.97rem;margin-bottom:0;color:var(--ink-2)}
.note p + p{margin-top:.9rem}

/* ---------- image slots ---------- */

.slot{
  position:relative;overflow:hidden;
  display:grid;place-items:center;
  background:var(--bg-2);
  border:1px solid var(--line);border-radius:6px;
  min-height:250px;margin:38px 0;
}
/* Placeholder art: concentric wavefronts radiating from a point — sound
   propagation, drawn plainly. Fits a page whose main visual is already a
   diagram. Covered entirely by ::after once a real file lands. */
.slot::before{
  content:"";position:absolute;inset:0;
  background-image:
    repeating-radial-gradient(circle at 16% 50%,
      transparent 0 23px, rgba(15,111,108,.16) 23px 25px);
}
.slot::after{
  content:"";position:absolute;inset:0;
  background-image:var(--img);background-size:cover;background-position:center;
}
.slot.tall{min-height:400px}

/* ---------- footnote ---------- */

.footnote{
  font-size:.88rem;color:var(--muted);
  border-top:1px solid var(--line);
  padding-top:20px;margin-top:38px;max-width:76ch;
}

/* ---------- cta ---------- */

.cta{text-align:center;padding:96px 0}
.cta p{margin-left:auto;margin-right:auto;max-width:52ch}
.cta .btnrow{justify-content:center}
.cta .btn.ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.cta .btn.ghost:hover,.cta .btn.ghost:focus{border-color:#fff;color:#fff}
.cta .btn:not(.ghost){background:#fff;color:var(--teal-2);border-color:#fff}
.cta .btn:not(.ghost):hover,.cta .btn:not(.ghost):focus{background:var(--teal-pale);border-color:var(--teal-pale)}

/* ---------- footer ---------- */

footer{background:var(--ink);color:rgba(255,255,255,.66);padding:50px 0 62px;font-size:.9rem}
footer a{color:#8fd6d2}
footer p{max-width:74ch}
footer .fine{font-size:.83rem;margin-top:1.5rem;color:rgba(255,255,255,.4)}

@media (max-width:640px){
  section{padding:56px 0}
  header.mast{padding-bottom:56px}
  header.mast .hero{padding-top:32px;max-width:none}
  .btn{width:100%;text-align:center}
  .pull{padding-left:20px;margin:30px 0}
}