/* Talk Society — the dark, photographic look (the home page since 2026-10-26, from the founder's
   approved mockups). Loaded after agency.css only on pages that ask for it (`night` on the
   layout), and every rule here is scoped to `.agency.night`, so a page without it is unchanged.
   One idea per screen; photographs (AI-generated, no real people or businesses); very large
   grotesk type with tight leading; white
   rounded buttons; hairlines instead of boxes; the price and the questions on light. */

/* the same two files agency.css loads, opened to their full weight range (agency.css declares
   300–500): one download each, the bold display weights for free */
@font-face{font-family:"Inter Tight";src:url("/fonts/hark/inter-tight-variable-latin-239e3c121b9f93f650289374acbf6288.woff2?vsn=d") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url("/fonts/hark/inter-variable-latin-65850a373e258f1c897a2b3d75eb74de.woff2?vsn=d") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

body:has(.agency.night){background:#000}

.agency.night{
  --n-bg:#000;
  --n-ink:#f4f2ee;
  --n-dim:rgba(244,242,238,.66);
  --n-faint:rgba(244,242,238,.5);
  --n-hair:rgba(244,242,238,.12);
  --n-amber:#e3a35e;
  --n-light:#f3f0e9;
  --n-ink-on-light:#0c0c0b;
  --n-display:"Inter Tight",Inter,system-ui,sans-serif;
  --n-text:Inter,system-ui,-apple-system,sans-serif;
  /* side padding that keeps the content inside the site's max width on a wide screen */
  --padx:max(var(--pad),calc((100% - var(--max)) / 2 + var(--pad)));
  background:var(--n-bg);color:var(--n-ink);font-family:var(--n-text)
}
.agency.night h1,.agency.night h2,.agency.night h3{font-family:var(--n-display)}

/* ---------- header: over the photograph, then over everything ---------- */
.agency.night .nav{background:rgba(0,0,0,.9);border-bottom:1px solid rgba(244,242,238,.08);color:var(--n-ink)}
.agency.night .logo{font-weight:600;letter-spacing:-.025em;color:#fff}
.agency.night .logo-mark{color:#fff}
.agency.night .nav nav{color:var(--n-dim)}
.agency.night .nav nav a:hover{color:#fff}
.agency.night .nav-cta{background:var(--n-ink);color:var(--n-ink-on-light);border-radius:12px;font-weight:600}
.agency.night .nav-cta:hover{background:#fff}
.agency.night .nav-cta span{color:var(--n-ink-on-light)}
.agency.night .menu{color:#fff}
.agency.night .nav nav.open{background:#000;border-bottom-color:var(--n-hair)}
.agency.night .nav-drop summary:hover,.agency.night .nav-drop[open] summary{color:#fff}
.agency.night .nav-drop-panel{background:#0b0b0a;border-color:var(--n-hair);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.agency.night .nav-drop-panel a b{color:#fff}
.agency.night .nav-drop-panel a small{color:var(--n-dim)}
.agency.night .nav-drop-panel a:hover{background:rgba(244,242,238,.07)}
.agency.night .nav-drop-panel .nav-drop-all{border-top-color:var(--n-hair);color:var(--n-dim)}
.agency.night .nav nav.open .nav-drop-panel{background:none}

/* ---------- buttons ---------- */
.agency.night .n-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 30px;border-radius:14px;background:var(--n-ink);color:var(--n-ink-on-light);font:600 16.5px/1 var(--n-text);letter-spacing:-.01em;transition:background .2s,box-shadow .2s,transform .3s var(--ease)}
.agency.night .n-btn:hover{background:#fff;transform:translateY(-1px)}
.agency.night .n-btn .mark,.agency.night .n-link .mark{display:none}
.agency.night .n-btn.ghost{background:transparent;color:var(--n-ink);box-shadow:inset 0 0 0 1.5px rgba(244,242,238,.55)}
.agency.night .n-btn.ghost:hover{background:rgba(244,242,238,.08);box-shadow:inset 0 0 0 1.5px #fff}
.agency.night .n-btn.dark{background:var(--n-ink-on-light);color:var(--n-ink)}
.agency.night .n-btn.dark:hover{background:#000}
.agency.night .n-btn.ghost.dark{background:transparent;color:var(--n-ink-on-light);box-shadow:inset 0 0 0 1.5px rgba(12,12,11,.35)}
.agency.night .n-btn.ghost.dark:hover{box-shadow:inset 0 0 0 1.5px var(--n-ink-on-light)}
.agency.night .n-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px}

/* ---------- 1. hero ---------- */
.agency.night .n-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:min(100svh,1000px);margin-top:-78px;padding:150px var(--padx) 96px;overflow:hidden}
.agency.night .n-hero-photo{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:68% 60%}
.agency.night .n-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.94) 26%,rgba(0,0,0,.55) 48%,rgba(0,0,0,0) 70%),linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 32%)}
.agency.night .n-hero-copy{max-width:640px}
.agency.night .n-hero h1{max-width:7.4em;font-weight:640;font-size:clamp(54px,7.3vw,112px);line-height:.95;letter-spacing:-.04em;color:#fff}
.agency.night .n-lede{max-width:27em;margin-top:30px;font-size:clamp(18px,1.55vw,22px);line-height:1.45;color:var(--n-dim);letter-spacing:-.005em}
.agency.night .facts-line{max-width:34em;gap:6px 22px;margin-top:30px;font-size:14.5px;color:var(--n-dim)}
.agency.night .facts-line li+li::before{content:none}

/* ---------- 2. every job we build ---------- */
.agency.night .n-agents{padding:clamp(120px,12vw,190px) var(--padx);border-top:1px solid var(--n-hair)}
.agency.night .n-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:48px;align-items:end;margin-bottom:clamp(48px,6vw,84px)}
.agency.night .n-head h2{font-weight:640;font-size:clamp(44px,5.8vw,90px);line-height:.95;letter-spacing:-.04em;color:#fff}
.agency.night .n-head h2 span{color:var(--n-faint)}
.agency.night .n-head p{max-width:24em;padding-bottom:8px;font-size:18px;line-height:1.5;color:var(--n-dim)}
.agency.night .n-index{margin:0;padding:0;list-style:none;border-top:1px solid var(--n-hair)}
.agency.night .n-index li{display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.35fr) 196px;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--n-hair)}
.agency.night .n-num{font:500 14px/1 var(--n-text);font-variant-numeric:tabular-nums;color:var(--n-faint)}
.agency.night .n-index h3{font-weight:560;font-size:clamp(23px,2.25vw,33px);line-height:1.05;letter-spacing:-.032em;color:#fff}
.agency.night .n-index p{font-size:16.5px;line-height:1.45;color:var(--n-dim)}
.agency.night .n-link{display:inline-flex;align-items:center;justify-content:center;gap:10px;justify-self:end;min-height:48px;padding:0 20px;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(244,242,238,.3);font-weight:500;font-size:15px;white-space:nowrap;color:var(--n-ink);transition:background .2s,color .2s,box-shadow .2s}
.agency.night .n-link span{opacity:.55}
.agency.night .n-link:hover{background:var(--n-ink);color:var(--n-ink-on-light);box-shadow:none}

/* ---------- 3. why it works: full duplex (the guide's diagram) ---------- */
.agency.night .n-duplex{padding:clamp(110px,11vw,170px) var(--padx);border-top:1px solid var(--n-hair)}
.agency.night .n-duplex .duplex{max-width:none;margin:0 0 34px}
.agency.night .n-duplex .n-link{padding:12px 20px;white-space:normal;text-align:left}

/* ---------- 4. the industry demos ---------- */
.agency.night .n-industries{padding:clamp(110px,11vw,170px) var(--padx);border-top:1px solid var(--n-hair)}
.agency.night .n-kicker{margin-bottom:28px;font-size:18px;color:var(--n-dim)}
.agency.night .n-industry-pages{margin-top:40px;font-size:16px;color:var(--n-dim)}
.agency.night .n-industry-pages a{color:#fff;text-decoration:underline;text-decoration-color:rgba(244,242,238,.35);text-underline-offset:4px}
.agency.night .n-industry-pages a:hover{text-decoration-color:#fff}
.agency.night .n-index h3 a{color:inherit;transition:color .2s}
.agency.night .n-index h3 a:hover{color:var(--n-dim)}
.agency.night .n-industry{gap:clamp(40px,6vw,110px)}
.agency.night .industry-list{border-top:1px solid var(--n-hair)}
.agency.night .industry-tab{border-bottom:1px solid var(--n-hair);color:var(--n-faint)}
.agency.night .industry-tab strong{font-family:var(--n-display);font-weight:500;color:rgba(244,242,238,.74)}
.agency.night .industry-tab:hover,.agency.night .industry-tab.is-active{color:var(--n-dim)}
.agency.night .industry-tab:hover strong,.agency.night .industry-tab.is-active strong{color:#fff}
.agency.night .industry-tab.is-active::after{color:var(--n-amber)}
.agency.night .industry-panel{top:110px;padding:0;border:0;border-radius:0;background:transparent}
.agency.night .industry-lead{color:var(--n-faint)}
.agency.night .industry-panel h3{margin:14px 0 34px;font-weight:620;font-size:clamp(40px,4.6vw,68px);line-height:1;letter-spacing:-.04em;color:#fff}
.agency.night .industry-can{margin:14px 0 36px;border-top:1px solid var(--n-hair)}
.agency.night .industry-can li{border-bottom:1px solid var(--n-hair);font-size:18px;color:rgba(244,242,238,.8)}
.agency.night .industry-can li::before{background:var(--n-amber)}

/* ---------- 5. how we compare ---------- */
.agency.night .n-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(48px,7vw,120px);align-items:start;padding:clamp(110px,11vw,170px) var(--padx);border-top:1px solid var(--n-hair)}
.agency.night .n-compare h2{font-weight:640;font-size:clamp(38px,4.4vw,68px);line-height:.98;letter-spacing:-.04em;color:#fff}
.agency.night .n-compare h2 span{color:var(--n-faint)}
.agency.night .n-compare-copy p{max-width:28em;margin:30px 0 34px;font-size:18px;line-height:1.5;color:var(--n-dim)}
.agency.night .n-compare-copy .n-link{justify-self:start;white-space:normal;text-align:left}
.agency.night .lp-table{margin-top:0;font-size:17px}
.agency.night .lp-table caption{padding-bottom:16px;font-size:14px;color:var(--n-faint)}
.agency.night .lp-table th,.agency.night .lp-table td{padding:20px 0;border-bottom:1px solid var(--n-hair)}
.agency.night .lp-table td{font-variant-numeric:tabular-nums;color:var(--n-dim)}
.agency.night .lp-table:not(.lp-table-wide) td{text-align:right}
.agency.night .lp-table thead th{font-size:12px;letter-spacing:.12em;color:var(--n-faint)}
.agency.night .lp-table:not(.lp-table-wide) thead th+th{text-align:right}
.agency.night .lp-table tbody th{font-weight:500;color:rgba(244,242,238,.86)}
.agency.night .lp-table small{color:var(--n-faint)}
.agency.night .lp-table .lp-ours th,.agency.night .lp-table .lp-ours td{background:transparent;border-bottom:0;color:var(--n-amber);font-weight:600}
.agency.night .lp-table:not(.lp-table-wide) .lp-ours th,.agency.night .lp-table:not(.lp-table-wide) .lp-ours td{font-size:20px}
.agency.night .lp-table .lp-ours small{font-weight:400;font-size:13px}
.agency.night .lp-small{color:var(--n-faint)!important}

/* ---------- 6. the price and the questions, on light ---------- */
.agency.night .n-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.agency.night .n-price{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(56px,7vw,130px);align-items:start;padding:clamp(120px,12vw,190px) var(--padx);background:var(--n-light);color:var(--n-ink-on-light)}
.agency.night .n-price-left{position:sticky;top:130px}
@media (max-height:820px){.agency.night .n-price-left{position:static}}
.agency.night .n-big{display:grid;grid-template-columns:auto auto;grid-template-areas:"n c" "n p";justify-content:start;align-items:start;margin:0;font-family:var(--n-display);font-weight:660;letter-spacing:-.06em;line-height:.8}
.agency.night .n-big-num{grid-area:n;font-size:clamp(150px,19vw,300px)}
.agency.night .n-big-cent{grid-area:c;margin-top:.1em;font-size:clamp(84px,10.5vw,166px)}
.agency.night .n-big-per{grid-area:p;align-self:end;margin:0 0 .18em .05em;font-weight:600;font-size:clamp(24px,2.6vw,40px);line-height:1;letter-spacing:-.035em;white-space:nowrap}
.agency.night .n-price-copy{max-width:21em;margin-top:42px;font-size:clamp(20px,1.85vw,27px);line-height:1.38;letter-spacing:-.012em;color:#3f3d38}
.agency.night .n-price-small{max-width:36em;margin-top:20px;font-size:15px;line-height:1.55;color:#6e6a61}
.agency.night .n-faq h2{margin-bottom:26px;font-weight:600;font-size:clamp(28px,2.4vw,38px);letter-spacing:-.03em}
.agency.night .n-faq details{border-top:1px solid rgba(12,12,11,.16)}
.agency.night .n-faq details:last-of-type{border-bottom:1px solid rgba(12,12,11,.16)}
.agency.night .n-faq summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;cursor:pointer;list-style:none;font:500 clamp(19px,1.6vw,24px)/1.3 var(--n-display);letter-spacing:-.022em}
.agency.night .n-faq summary::-webkit-details-marker{display:none}
.agency.night .n-faq summary::after{content:"+";flex:none;font-weight:300;font-size:32px;line-height:.7;transition:transform .3s var(--ease)}
.agency.night .n-faq details[open] summary::after{transform:rotate(45deg)}
.agency.night .n-faq details p{padding:0 48px 26px 0;font-size:17px;line-height:1.55;color:#45423c}

/* ---------- the landing pages (/ai-receptionist, /ai-answering-service, /ai-receptionist-pricing):
   the same look through their shared pieces (`lp_hero`, `lp_demo_block`, `lp_price`, `lp_faq`,
   `lp_proof`, `lp_close`). Their buttons keep the classes the rest of the site uses (`primary`,
   `secondary`); inside `main` they wear this page's buttons. The modal is outside `main`. ---------- */
.agency.night main .primary,.agency.night main .secondary{align-items:center;justify-content:center;gap:10px;min-height:58px;padding:0 30px;border:0;border-radius:14px;font:600 16.5px/1 var(--n-text);letter-spacing:-.01em;white-space:nowrap;transition:background .2s,box-shadow .2s,transform .3s var(--ease)}
.agency.night main .primary{background:var(--n-ink);color:var(--n-ink-on-light)}
.agency.night main .primary:hover{background:#fff;transform:translateY(-1px)}
.agency.night main .secondary{background:transparent;color:var(--n-ink);box-shadow:inset 0 0 0 1.5px rgba(244,242,238,.55)}
.agency.night main .secondary:hover{background:rgba(244,242,238,.08);box-shadow:inset 0 0 0 1.5px #fff}
.agency.night main .secondary span{color:inherit;opacity:.6}
.agency.night main .primary .mark,.agency.night main .secondary .mark{display:none}
.agency.night main .text-btn{display:inline-flex;align-items:center;gap:10px;width:auto;max-width:none;min-height:48px;margin-top:30px;padding:0 20px;border:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(244,242,238,.3);font-weight:500;font-size:15px;color:var(--n-ink)}
.agency.night main .text-btn:hover{background:var(--n-ink);color:var(--n-ink-on-light);box-shadow:none}
.agency.night main .hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}
.agency.night .eyebrow{color:var(--n-faint)}
.agency.night .eyebrow .mark{color:var(--n-amber)}

/* the hero: the home page's, with a page's longer headline */
.agency.night .lp-hero{max-width:none}
.agency.night .lp-hero .n-hero-copy{max-width:780px}
.agency.night .n-eyebrow{margin-bottom:26px;font:500 12.5px/1.5 var(--n-text);letter-spacing:.14em;text-transform:uppercase;color:var(--n-faint)}
.agency.night .lp-hero h1{max-width:none;margin:0;font-size:clamp(42px,5vw,78px);line-height:.97}
.agency.night .n-hero h1 em{font-family:inherit;font-style:normal;letter-spacing:inherit;color:var(--n-faint)}
.agency.night .lp-phone{margin-top:16px;font-size:15px;color:var(--n-faint)}
/* the phone-only demo button under the hero photo (`lp_hero/1`); hidden above 640px */
.agency.night main .lp-hero-try{display:none}
.agency.night .lp-phone a,.agency.night .lp-small a,.agency.night .lp-proof a{color:var(--n-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(244,242,238,.35)}

/* a section: one reading column on the page's left edge */
.agency.night main .lp-section{max-width:none;margin:0;padding:clamp(100px,10vw,160px) var(--padx);border-top:1px solid var(--n-hair)}
.agency.night main .lp-section>*{max-width:820px;margin-left:0;margin-right:0}
.agency.night main .lp-section>table,.agency.night main .lp-section>.lp-two,.agency.night main .lp-section>.lp-calc{max-width:1100px}
.agency.night main .lp-section>.eyebrow{margin-bottom:24px}
.agency.night main .lp-section h2{margin-bottom:32px;font-weight:640;font-size:clamp(38px,4.8vw,72px);line-height:.98;letter-spacing:-.04em;color:#fff}
.agency.night main .lp-section h2 span{color:var(--n-faint)}
.agency.night main .lp-section p{font-size:18px;line-height:1.6;color:var(--n-dim)}
.agency.night main .lp-tries li,.agency.night main .lp-checks li{padding:16px 0 16px 34px;border-bottom:1px solid var(--n-hair);font-size:18px;color:rgba(244,242,238,.86)}
.agency.night .lp-tries li::before{top:16px;color:var(--n-faint)}
.agency.night .lp-checks li::before{top:23px;border-left-color:var(--n-amber);border-bottom-color:var(--n-amber)}
.agency.night .lp-timeline li{grid-template-columns:170px 1fr;padding:24px 0;border-bottom:1px solid var(--n-hair)}
.agency.night .lp-timeline b{font:600 22px/1.25 var(--n-display);letter-spacing:-.02em;color:#fff}
.agency.night .lp-two h3{margin-bottom:10px;font-weight:600;font-size:28px;color:#fff}
.agency.night .lp-calc{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
.agency.night .lp-calc label{color:var(--n-faint)}
.agency.night .lp-calc input{width:100%;min-width:0}
.agency.night .lp-calc-out{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;padding:20px 22px}
.agency.night .lp-calc input{border:1px solid rgba(244,242,238,.28);background:transparent;font-weight:500;color:#fff}
.agency.night .lp-calc input:focus{outline:none;border-color:var(--n-ink)}
.agency.night .lp-calc-out{background:var(--n-ink);color:var(--n-ink-on-light)}
.agency.night .lp-calc-out b{font-weight:640}
.agency.night .lp-table-wide th,.agency.night .lp-table-wide td{padding:18px 18px 18px 0}
.agency.night .lp-founder b{color:#fff}

/* on a wide screen: the eyebrow and the heading on the left, staying in view while the section
   scrolls; everything else on the right. Both left-hand pieces share one grid area that spans
   every row, so the right-hand column sets the rows and the heading never pushes it down. */
@media (min-width:1101px){
  .agency.night main .lp-section{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(56px,6vw,120px);row-gap:0;align-items:start}
  .agency.night main .lp-section>*{grid-column:2;max-width:none}
  .agency.night main .lp-section>.eyebrow{grid-column:1;grid-row:1 / span 40;align-self:start;margin:0}
  .agency.night main .lp-section>h2{grid-column:1;grid-row:1 / span 40;align-self:start;position:sticky;top:118px;margin:44px 0 0;font-size:clamp(34px,3.6vw,56px)}
  .agency.night main .lp-section>.text-btn{justify-self:start}
}

/* the price and the questions, on light, as on the home page */
.agency.night main .lp-price,.agency.night main .lp-faq{background:var(--n-light);color:var(--n-ink-on-light);border-top:1px solid rgba(12,12,11,.08)}
.agency.night main .lp-price .eyebrow,.agency.night main .lp-faq .eyebrow{color:#6e6a61}
.agency.night main .lp-price .eyebrow .mark,.agency.night main .lp-faq .eyebrow .mark{color:var(--n-ink-on-light)}
.agency.night main .lp-price h2,.agency.night main .lp-faq h2{color:var(--n-ink-on-light)}
.agency.night main .lp-price h2 span{color:#8a867d}
.agency.night main .lp-price p,.agency.night main .lp-faq p{color:#45423c}
.agency.night main .lp-price .primary{background:var(--n-ink-on-light);color:var(--n-ink)}
.agency.night main .lp-price .primary:hover{background:#000}
.agency.night .lp-example{margin-top:34px;padding:28px 0;border:0;border-top:1px solid rgba(12,12,11,.16);border-bottom:1px solid rgba(12,12,11,.16);border-radius:0;background:transparent}
.agency.night .lp-example span{font-size:17px;color:#45423c}
.agency.night .lp-example b{font-weight:640;font-size:clamp(34px,3.4vw,48px);letter-spacing:-.04em;color:var(--n-ink-on-light)}
.agency.night .lp-refund{margin-top:34px;padding:2px 0 2px 24px;border:0;border-left:3px solid var(--n-amber);border-radius:0;background:transparent}
.agency.night .lp-refund h3{font-weight:600;color:var(--n-ink-on-light)}
.agency.night main .lp-faq details{border-bottom:1px solid rgba(12,12,11,.16)}
.agency.night main .lp-faq summary{padding:26px 0;font:500 clamp(19px,1.6vw,24px)/1.3 var(--n-display);letter-spacing:-.022em;color:var(--n-ink-on-light)}
.agency.night main .lp-faq summary::after{font-weight:300;font-size:30px;line-height:.8;color:var(--n-ink-on-light)}
.agency.night main .lp-faq details p{padding:0 48px 26px 0;font-size:17px}

/* the close */
.agency.night main .final-cta{max-width:none;padding:clamp(120px,13vw,190px) var(--padx);border-top:1px solid var(--n-hair)}
.agency.night main .final-cta h2{margin:0 0 24px;font-weight:640;font-size:clamp(46px,6.6vw,104px);line-height:.95;letter-spacing:-.045em;color:#fff}
.agency.night main .final-cta p{color:var(--n-dim)}
.agency.night .lp-ps{color:var(--n-faint)!important}
.agency.night .lp-ps b{color:#fff}

/* ---------- the legal pages: the dark header and footer, the document on light for reading ---------- */
.agency.night main.legal{max-width:none;margin:0;padding:clamp(80px,9vw,130px) var(--padx) 0;background:var(--n-light);color:var(--ink)}
.agency.night main.legal .eyebrow,.agency.night .legal-updated{color:#6e6a61}
.agency.night main.legal .eyebrow .mark{color:var(--ink)}
/* the grey under a row's name in the cookie and subprocessor tables: #7a776f on the cream was
   3.9:1, under the 4.5:1 a 12.5px label needs */
.agency.night .legal-where{color:#625f58}
.agency.night .legal-head h1{font-weight:640;letter-spacing:-.04em;color:var(--n-ink-on-light)}
.agency.night .legal-body h2{font-weight:600;letter-spacing:-.03em}

/* ---------- the 404: the hero with no photograph ---------- */
.agency.night .n-hero-plain{min-height:min(84svh,820px)}
.agency.night .n-hero-plain h1 em{display:block}

/* ---------- a lead's video page (/v/<slug>) ---------- */
.agency.night .vp{padding-top:clamp(56px,7vw,96px)}
.agency.night .vp-head h1{font-weight:640;letter-spacing:-.04em;color:#fff}
.agency.night .vp-sub{color:var(--n-dim)}
.agency.night .vp-player{box-shadow:none;border:1px solid var(--n-hair)}
.agency.night .vp-note{color:var(--n-faint)}

/* ---------- footer, the floating button ---------- */
.agency.night .site-footer{max-width:none;padding:80px var(--padx) 40px;border-top:0;color:var(--n-faint);background:#000}
/* the floating button sits over the bottom-right corner, where the legal links are: room for it,
   as agency.css keeps (`[data-agency-site] .site-footer`), which the rule above out-specifies */
.agency.night[data-agency-site] .site-footer{padding-bottom:116px}
.agency.night .foot-brand .logo,.agency.night .foot-col b{color:#fff}
.agency.night .foot-brand p{color:var(--n-faint)}
.agency.night .foot-col a,.agency.night .foot-col address{color:var(--n-dim)}
.agency.night .foot-col a:hover,.agency.night .foot-legal a:hover{color:#fff}
.agency.night .foot-col .text-btn{color:#fff;border-color:rgba(244,242,238,.3)}
.agency.night .foot-bottom{border-top-color:var(--n-hair)}
.agency.night .socials a,.agency.night .socials span{color:var(--n-dim)}
/* the floating "Book a demo": the page's white button, the mark on black */
.agency.night .floating{gap:14px;padding:10px 20px 10px 10px;border-radius:18px;background:var(--n-ink);color:var(--n-ink-on-light);border:1px solid rgba(255,255,255,.6);box-shadow:0 24px 60px rgba(0,0,0,.6)}
.agency.night .floating:hover{background:#fff}
.agency.night .floating-dot{width:42px;height:42px;border-radius:12px;background:#0c0c0b}
.agency.night .floating-dot .mark{color:var(--n-ink)}
.agency.night .floating-text b{font-weight:600;font-size:15px;letter-spacing:-.01em}
.agency.night .floating-text small{opacity:.6}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .agency.night .n-index li{grid-template-columns:52px minmax(0,1fr) auto;row-gap:8px}
  .agency.night .n-index p{grid-column:2;grid-row:2}
  .agency.night .n-index .n-link{grid-column:3;grid-row:1 / span 2}
}
@media (max-width:980px){
  /* agency.css turns the industry list into a rail of chips here; the active chip is ink on ink.
     The list's hairline is the desktop list's top edge: over a row of chips it is a stray line. */
  .agency.night .industry-list{border-top:0}
  .agency.night .industry-tab{border:1px solid rgba(244,242,238,.24)}
  .agency.night .industry-tab.is-active{background:var(--n-ink);border-color:var(--n-ink)}
  .agency.night .industry-tab.is-active strong{color:var(--n-ink-on-light)}
}
@media (max-width:760px){
  .agency.night .lp-timeline li{grid-template-columns:1fr;gap:6px}
  .agency.night .lp-table-wide tr{border-bottom:1px solid var(--n-hair)}
  .agency.night .lp-table-wide th,.agency.night .lp-table-wide td{padding:3px 0;border:0}
  .agency.night .lp-table-wide td[data-label]::before{color:var(--n-faint)}
}
@media (min-width:641px) and (max-width:1100px){
  /* a landing page's longer headline reaches further into the photograph */
  .agency.night .lp-hero::before{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 40%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.4) 100%),linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 32%)}
}
@media (min-width:641px) and (max-width:900px){
  .agency.night .n-hero::before{background:linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 40%,rgba(0,0,0,.7) 72%,rgba(0,0,0,.4) 100%),linear-gradient(0deg,rgba(0,0,0,.75) 0%,rgba(0,0,0,0) 32%)}
}
@media (max-width:900px){
  .agency.night .n-head{grid-template-columns:1fr;gap:20px}
  .agency.night .n-price,.agency.night .n-compare{grid-template-columns:1fr}
  .agency.night .n-price-left{position:static}
}

/* ---------- phone ---------- */
@media (max-width:640px){
  .agency.night .n-hero{align-items:flex-end;min-height:100svh;padding:46svh var(--pad) 56px}
  .agency.night .n-hero-photo{bottom:auto;height:62svh;object-position:95% 60%}
  .agency.night .n-hero::before{background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 110px,rgba(0,0,0,0) 34svh,#000 61svh)}
  .agency.night .n-hero h1{font-size:clamp(46px,13vw,64px)}
  .agency.night .n-actions{flex-direction:column;align-items:stretch}
  .agency.night .n-btn,.agency.night main .n-actions .primary,.agency.night main .n-actions .secondary{width:100%}
  .agency.night main .lp-section .primary,.agency.night main .lp-section .secondary,.agency.night main .final-cta .primary,.agency.night main .final-cta .secondary{white-space:normal;text-align:center}
  .agency.night .lp-hero h1{font-size:clamp(38px,10.5vw,54px)}
  /* pulled up into the photo, so the headline under it moves down ~42px, not the button's full height */
  .agency.night main .lp-hero .lp-hero-try{display:flex;flex-direction:column;gap:4px;width:100%;min-height:60px;margin:-38px 0 20px;padding:10px 22px;white-space:normal;text-align:center}
  .agency.night .lp-hero-try-sub{font:500 13px/1.2 var(--n-text);letter-spacing:0;opacity:.62}
  .agency.night main .lp-faq details p{padding-right:0}
  .agency.night main .text-btn{white-space:normal;text-align:left;padding:12px 18px}
  .agency.night[data-agency-site] .site-footer{padding-bottom:40px}
  .agency.night .industry-panel h3{margin:8px 0 18px;font-size:34px}
  .agency.night .industry-can{margin:8px 0 24px}
  .agency.night .industry-can li{padding:10px 0;font-size:16px}
  /* the number hangs in a narrow gutter, so the title and its line get most of the width */
  .agency.night .n-index li{grid-template-columns:28px minmax(0,1fr);column-gap:14px;row-gap:8px;padding:22px 0}
  .agency.night .n-index h3{font-size:22px;line-height:1.1;letter-spacing:-.025em}
  .agency.night .n-index p{grid-column:2;grid-row:auto;font-size:16px;line-height:1.5}
  .agency.night .n-index .n-link{grid-column:2;grid-row:auto;justify-self:start;margin-top:8px}
  .agency.night .n-faq details p{padding-right:0}

  /* ---- the phone's rhythm and type (2026-10-27). One section rhythm: 72px above and below every
     section (it was 100-120px each side: ~220px of empty black between two sections). One
     section heading, ~39px at 390px, with a little room between the words: at -.04em tracking the
     spaces nearly closed ("Itanswers the"). One body size, 17px. Labels at 12px, not 11.
     Buttons in a section are full width, as in the hero. Everything here is inside this block:
     tablets and desktops are untouched. The team section and the blog are defined further down
     the file, so their phone rules are in the block at the end. ---- */
  .agency.night{--n-sec:72px}
  /* a jump to a section (#agents from the menu, #team from every landing page, #pricing, the
     outbound demo's text to /#agents) lands under the 78px sticky header: the old 110-120px
     padding used to clear it. 44px puts the first line where it landed before (~116px down). */
  .agency.night main>section[id]{scroll-margin-top:44px}
  /* the one-word last line ("Questions people / ask"): the browser picks the breaks */
  .agency.night main h1,.agency.night main h2{text-wrap:pretty}
  .agency.night main .lp-faq h2{text-wrap:balance}
  /* not the hero: there `pretty` breaks "Hand your / phone / work to AI." (the headline already
     keeps "to AI." together with a no-break space) */
  .agency.night .n-hero h1{text-wrap:wrap}
  .agency.night .n-agents,.agency.night .n-duplex,.agency.night .n-industries,.agency.night .n-compare,.agency.night .n-price{padding:var(--n-sec) var(--padx)}
  .agency.night main .lp-section{padding:var(--n-sec) var(--padx)}
  .agency.night .n-compare{gap:40px}
  .agency.night .n-price{gap:56px}
  .agency.night .n-head{gap:16px;margin-bottom:36px}
  .agency.night .n-head h2,.agency.night .n-compare h2,.agency.night main .lp-section h2{font-size:clamp(34px,10vw,40px);line-height:1;letter-spacing:-.035em;word-spacing:.04em}
  .agency.night .n-hero h1{word-spacing:.04em}
  .agency.night .n-head p,.agency.night .n-compare-copy p{font-size:17px;line-height:1.55}
  .agency.night .n-compare-copy p{margin:20px 0 26px}
  .agency.night .n-lede{margin-top:24px;line-height:1.5}
  .agency.night .facts-line{margin-top:26px}
  /* the hero's label sits on the photograph: lifted off it */
  .agency.night .n-eyebrow{margin-bottom:20px;color:rgba(244,242,238,.8);text-shadow:0 1px 16px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.7)}
  .agency.night main .eyebrow,.agency.night .industry-lead{font-size:12px;letter-spacing:.14em}
  .agency.night .duplex-head b{font-size:12px}
  .agency.night main .lp-section>.eyebrow{margin-bottom:18px}
  .agency.night main .lp-section h2{margin-bottom:24px}
  .agency.night main .lp-section p{font-size:17px;line-height:1.6}
  .agency.night main .lp-tries li,.agency.night main .lp-checks li{padding:14px 0 14px 30px;font-size:17px;line-height:1.5}
  .agency.night .lp-tries li::before{top:14px}
  .agency.night .lp-checks li::before{top:21px}
  .agency.night .lp-timeline li{padding:20px 0}
  .agency.night .lp-timeline b{font-size:20px}
  .agency.night main .lp-section .hero-actions{flex-direction:column;align-items:stretch;margin-top:28px}
  .agency.night main .lp-section .hero-actions .primary,.agency.night main .lp-section .hero-actions .secondary{width:100%}
  /* the caption sat flush against the paragraph above it */
  .agency.night main .lp-section>.lp-table{margin-top:28px}
  .agency.night .lp-table:not(.lp-table-wide) th,.agency.night .lp-table:not(.lp-table-wide) td{padding:16px 0}
  .agency.night .lp-table-wide th,.agency.night .lp-table-wide td{font-size:16px}
  .agency.night .n-compare-copy .n-link,.agency.night .n-duplex .n-link{padding:12px 18px;line-height:1.35}
  .agency.night .n-kicker{margin-bottom:22px;font-size:17px}
  .agency.night .n-industry-pages{margin-top:32px;line-height:1.6}
  .agency.night .n-price-copy{margin-top:32px;font-size:19px}
  .agency.night .n-price-small{font-size:16.5px;line-height:1.6;color:#5b5850}
  /* a 1fr track's minimum is its content's: at ~280px the big 30¢ set the column wider than the
     screen and cut the end off every line beside it */
  .agency.night .n-price{grid-template-columns:minmax(0,1fr)}
  .agency.night .n-faq summary,.agency.night main .lp-faq summary{padding:22px 0}
  .agency.night .lp-example{margin-top:28px;padding:22px 0}
  .agency.night .lp-refund{margin-top:28px;padding-left:20px}
  /* the close: left-aligned like every other section (seven centred lines are hard to read), its
     two buttons one width */
  .agency.night main .final-cta{padding:80px var(--padx);text-align:left}
  .agency.night main .final-cta h2{margin-bottom:20px;font-size:clamp(34px,10vw,40px);line-height:1;letter-spacing:-.035em;word-spacing:.04em}
  .agency.night main .final-cta p{margin:0;font-size:17px;line-height:1.6}
  .agency.night main .lp-close .hero-actions{align-items:stretch;margin-top:30px}
  .agency.night main .final-cta .primary,.agency.night main .final-cta .secondary{width:100%}
  .agency.night .lp-ps{margin-top:28px!important;font-size:15.5px!important}
  /* the 404 has no photograph: its words start under the header, not at the foot of the screen */
  .agency.night .n-hero-plain{align-items:flex-start;min-height:0;padding:150px var(--padx) var(--n-sec)}
  /* the legal pages, the 404 and a lead's video page (/v/<slug>) wrap their links under the logo
     (no menu button there): the header scrolls away rather than holding ~135px of a phone
     screen, and each link is a tap target rather than a 22px line of text */
  .agency.night .nav-static{position:relative}
  .agency.night .nav-static nav{gap:0 20px;font-size:15px}
  .agency.night .nav-static nav>a,.agency.night .nav-static .nav-drop summary{padding:8px 0}
  /* a link to a section (/terms#texts) no longer needs room for a header pinned over it */
  .agency.night .legal-body h2[id]{scroll-margin-top:24px}
  .agency.night main.legal{padding-top:44px}
  .agency.night .legal-head h1{word-spacing:.04em}
  .agency.night .site-footer{padding-top:56px}
}
@media (prefers-reduced-motion:reduce){
  .agency.night .n-btn,.agency.night .n-link{transition:none}
}

/* ---------- the demo modal, dark (agency.css lays it out; this re-colours it) ----------
   One charcoal panel for every call. The demos glow amber, like the photographs; a call with our
   own AI (`.ours`, set by agency_site.js for a `demo: false` kind) is the pearl one, so it never
   reads as one more sample. Layout, the pinned bar and the compaction are agency.css's. */
.agency.night{--m-bg:#121211;--m-line:rgba(244,242,238,.12);--m-line-2:rgba(244,242,238,.22)}
.agency.night .modal-backdrop{background:rgba(0,0,0,.66)}
.agency.night .voice-panel,.agency.night .voice-panel.ours{background:var(--m-bg);color:var(--n-ink);border:1px solid var(--m-line);border-radius:24px;box-shadow:0 40px 100px rgba(0,0,0,.75)}
.agency.night .voice-panel .eyebrow{color:var(--n-faint)}
.agency.night .voice-panel .eyebrow .mark{color:var(--n-amber)}
.agency.night .voice-panel.ours .eyebrow,.agency.night .voice-panel.ours .eyebrow .mark{color:var(--n-ink)}
.agency.night .voice-panel h2{font-weight:600;letter-spacing:-.035em;color:#fff}
.agency.night .voice-panel p,.agency.night .voice-panel .voice-hint,.agency.night .voice-panel .outcome-summary{color:var(--n-dim)}
.agency.night .voice-panel .permission-note,.agency.night .voice-panel .outcome-note{color:var(--n-dim)}
.agency.night .voice-panel .voice-status,.agency.night .voice-panel .voice-orb.active .voice-status{color:var(--n-dim)}
.agency.night .voice-panel #voiceCallUs a,.agency.night .voice-panel .sms-links a{color:var(--n-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--m-line-2)}

/* the sphere: amber for a demo, pearl for our own AI */
.agency.night .voice-panel .sphere.small{filter:drop-shadow(0 18px 40px rgba(227,163,94,.30))}
.agency.night .voice-panel .sphere-body{background:radial-gradient(circle at 32% 28%,#fff4e4 0%,#f3c88f 10%,#c9843e 28%,#5c3416 54%,#1d1009 76%,#070403 100%);box-shadow:inset -12px -18px 36px rgba(0,0,0,.6),inset 6px 8px 20px rgba(243,200,143,.14)}
.agency.night .voice-panel .sphere-body::after{background:radial-gradient(circle at 74% 78%,rgba(243,200,143,.28),transparent 38%),radial-gradient(circle at 60% 20%,rgba(255,255,255,.12),transparent 30%)}
.agency.night .voice-panel.ours .sphere.small{filter:drop-shadow(0 18px 40px rgba(244,242,238,.18))}
.agency.night .voice-panel.ours .sphere-body{background:radial-gradient(circle at 32% 28%,#ffffff 0%,#e9e6df 11%,#a19d94 30%,#45433f 56%,#161615 78%,#060606 100%);box-shadow:inset -12px -18px 36px rgba(0,0,0,.6),inset 6px 8px 20px rgba(255,255,255,.10)}
.agency.night .voice-panel.ours .sphere-body::after{background:radial-gradient(circle at 74% 78%,rgba(255,255,255,.18),transparent 38%),radial-gradient(circle at 60% 20%,rgba(255,255,255,.14),transparent 30%)}
.agency.night .voice-panel .voice-bars .mark{color:rgba(244,242,238,.4)}
.agency.night .voice-panel .voice-orb.active .voice-bars .mark{color:var(--n-amber)}
.agency.night .voice-panel.ours .voice-orb.active .voice-bars .mark{color:var(--n-ink)}

/* the buttons: the page's own */
.agency.night .voice-panel .primary,.agency.night .voice-panel .secondary{align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:14px;font:600 15.5px/1 var(--n-text);letter-spacing:-.01em}
.agency.night .voice-panel .primary,.agency.night .voice-panel.ours .primary{background:var(--n-ink);color:var(--n-ink-on-light)}
.agency.night .voice-panel .primary:hover,.agency.night .voice-panel.ours .primary:hover{background:#fff}
.agency.night .voice-panel .primary .mark{display:none}
.agency.night .voice-panel .secondary,.agency.night .voice-panel.ours .secondary{background:transparent;color:var(--n-ink);box-shadow:inset 0 0 0 1.5px var(--m-line-2)}
.agency.night .voice-panel .secondary:hover{box-shadow:inset 0 0 0 1.5px rgba(244,242,238,.6)}
.agency.night .voice-panel .close,.agency.night .voice-panel.ours .close{background:var(--m-bg);border-color:var(--m-line-2);color:var(--n-dim)}
.agency.night .voice-panel .close:hover{color:#fff;border-color:rgba(244,242,238,.5)}
.agency.night #panelLive .voice-actions,.agency.night .voice-panel.ours #panelLive .voice-actions{background:var(--m-bg);box-shadow:0 -14px 14px -10px rgba(0,0,0,.6)}

/* the scenario card and the brief: hairlines, no fill */
.agency.night .scenario{background:transparent;border:1px solid var(--m-line)}
.agency.night .scenario-row{border-bottom-color:var(--m-line)}
.agency.night .scenario-row span{color:var(--n-faint)}
.agency.night .scenario-row b{color:var(--n-ink)}
.agency.night .scenario-quote{font-family:var(--n-text);font-style:normal;font-size:16px;color:var(--n-dim)}
.agency.night .voice-brief{border:1px solid var(--m-line)}
.agency.night .voice-brief-head,.agency.night .voice-brief dt{color:var(--n-faint)}
.agency.night .voice-brief dl>div{border-top-color:var(--m-line)}
.agency.night .voice-brief dd{color:var(--n-ink)}

/* the phone field and the texts box */
.agency.night .voice-phone label,.agency.night .voice-phone small,.agency.night .voice-phone .sms-opt label{color:var(--n-dim)}
.agency.night .voice-phone input{background:rgba(244,242,238,.05);border-color:var(--m-line-2);color:#fff}
.agency.night .voice-phone input:focus{outline-color:var(--n-amber)}
.agency.night .voice-phone .sms-opt input{accent-color:var(--n-amber)}

/* during the call, and after it */
.agency.night .voice-ticker li{color:rgba(244,242,238,.85);border-top-color:var(--m-line)}
.agency.night .voice-ticker li::before{background:var(--n-amber)}
.agency.night .done-check{background:var(--n-amber);color:#0c0c0b}
.agency.night .voice-panel.ours .done-check{background:var(--n-ink)}
.agency.night .done-ask{color:#fff}
.agency.night .outcome-lines li{color:rgba(244,242,238,.85);border-top-color:var(--m-line)}
.agency.night .outcome-lines li::before{color:var(--n-amber)}
.agency.night .outcome-sources-head{color:var(--n-faint)}
.agency.night .outcome-sources li{border-top-color:var(--m-line)}
.agency.night .outcome-sources a{color:var(--n-dim)}
.agency.night .sc{background:transparent;border-color:var(--m-line)}
.agency.night .sc-score{color:#fff}
.agency.night .sc-meta,.agency.night .sc-shape,.agency.night .sc-na,.agency.night .sc-table em{color:var(--n-faint)}
.agency.night .sc-table th,.agency.night .sc-shape dt{color:var(--n-ink)}
.agency.night .sc-table td,.agency.night .voice-panel .sc-summary{color:var(--n-dim)}
.agency.night .sc-table th,.agency.night .sc-table td{border-top-color:var(--m-line)}
.agency.night .outcome-contact label span{color:var(--n-faint)}
.agency.night .outcome-contact input,.agency.night .voice-panel.ours .outcome-contact input{background:rgba(244,242,238,.05);border-color:var(--m-line-2);color:#fff}
.agency.night .outcome-contact input::placeholder{color:rgba(244,242,238,.4)}
.agency.night .outcome-contact input:focus{outline-color:var(--n-amber)}
.agency.night .outcome-note.ok,.agency.night .voice-panel.ours .outcome-note.ok{color:#fff}
.agency.night .toast{background:var(--n-ink);color:var(--n-ink-on-light)}

/* ---------- how Talk Society works: one founder, a team of AI agents (2026-10-27) ----------
   `HarkWeb.Business.AgencyTeam`. A control room rather than an "about us": the founder's card,
   the team as a roster with status lights, a log of real releases in a monospaced terminal, and
   counters from our build history. The status lights and the cursor are decoration; they stop
   under reduced motion. */
@font-face{font-family:"Geist Mono";src:url("/fonts/hark/geist-mono-variable-3eaf074afc53d1eb21f9dc4bc6ad30d8.woff2?vsn=d") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
.agency.night{--n-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;--n-green:#7fd49a}
.agency.night .n-team{position:relative;isolation:isolate;overflow:hidden;padding:clamp(120px,12vw,190px) var(--padx);border-top:1px solid var(--n-hair)}
/* a faint grid behind the roster, fading out from its middle */
.agency.night .n-team::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(var(--n-hair) 1px,transparent 1px),linear-gradient(90deg,var(--n-hair) 1px,transparent 1px);background-size:64px 64px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 70% 50%,#000 0%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 70% 50%,#000 0%,transparent 75%)}
.agency.night .n-team-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:28px;font:500 13px/1 var(--n-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--n-amber)}
.agency.night .n-team-eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--n-amber);animation:n-team-pulse 2s infinite}
@keyframes n-team-pulse{0%{box-shadow:0 0 0 0 rgba(227,163,94,.55)}70%{box-shadow:0 0 0 9px rgba(227,163,94,0)}100%{box-shadow:0 0 0 0 rgba(227,163,94,0)}}
.agency.night .n-team .n-head p b{font-weight:560;color:#fff}
.agency.night .n-team-org{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:56px;align-items:start}
.agency.night .n-team-right{display:flex;flex-direction:column;gap:20px;min-width:0}

/* the founder's card */
.agency.night .n-team-founder{display:flex;flex-direction:column;padding:28px;border:1px solid var(--n-hair);border-radius:22px;background:linear-gradient(180deg,rgba(244,242,238,.04),rgba(244,242,238,0))}
.agency.night .n-team-founder :is(img,.n-team-mono){width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:16px}
.agency.night .n-team-founder img{background:#151514}
.agency.night .n-team-founder b{margin-top:24px;font:620 30px/1 var(--n-display);letter-spacing:-.03em;color:#fff}
.agency.night .n-team-role{margin-top:12px;font:500 13px/1.35 var(--n-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--n-amber)}
.agency.night .n-team-founder p{margin-top:20px;font-size:17px;line-height:1.5;color:var(--n-dim)}
.agency.night .n-team-human{margin-top:24px;padding-top:18px;border-top:1px solid var(--n-hair);font:500 12.5px/1.5 var(--n-mono);color:var(--n-faint)}
.agency.night .n-team-human::before{content:"●";content:"●" / "";margin-right:8px;color:var(--n-green)}

/* no photo: his initials in a tile, marked as the team's one human. The letters size to the tile
   (container units), so one rule serves the big card, the tablet row and the landing block. */
.agency.night .n-team-mono{position:relative;display:grid;place-items:center;container-type:inline-size;overflow:hidden;border-radius:16px;background:radial-gradient(circle at 50% 42%,rgba(227,163,94,.22),rgba(227,163,94,0) 62%),linear-gradient(160deg,#1a1917,#0b0b0a);box-shadow:inset 0 0 0 1px rgba(227,163,94,.35)}
.agency.night .n-team-mono::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,242,238,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,238,.07) 1px,transparent 1px);background-size:12.5% 12.5%;-webkit-mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%);mask-image:radial-gradient(circle at 50% 45%,#000,transparent 72%)}
.agency.night .n-team-mono span{position:relative;font:640 40cqi/1 var(--n-display);letter-spacing:-.06em;color:#fff}
.agency.night .n-team-mono small{position:absolute;left:7cqi;top:7cqi;display:flex;align-items:center;gap:7px;font:500 11px/1 var(--n-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--n-green)}
.agency.night .n-team-mono small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--n-green);box-shadow:0 0 10px rgba(127,212,154,.6)}
@container (max-width:150px){.agency.night .n-team-mono small{display:none}}

/* the team: a roster with status lights */
.agency.night .n-team-roster{position:relative;border:1px solid var(--n-hair);border-radius:22px;background:rgba(0,0,0,.6)}
.agency.night .n-team-roster::before{content:"";position:absolute;left:-57px;top:96px;width:56px;height:1px;background:linear-gradient(90deg,var(--n-amber),var(--n-hair))}
.agency.night .n-team-roster-head{display:flex;justify-content:space-between;gap:16px;padding:18px 24px;border-bottom:1px solid var(--n-hair);font:500 12.5px/1 var(--n-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--n-faint)}
.agency.night .n-team-roster-head span:last-child{color:var(--n-green)}
.agency.night .n-team-roster ul{margin:0;padding:0;list-style:none}
.agency.night .n-team-roster li{display:grid;grid-template-columns:22px 140px minmax(0,1fr) auto;gap:18px;align-items:center;padding:19px 24px;border-bottom:1px solid var(--n-hair)}
.agency.night .n-team-roster li:last-child{border-bottom:0}
.agency.night .n-team-roster li b{font:600 18px/1.1 var(--n-display);letter-spacing:-.02em;color:#fff}
.agency.night .n-team-does{font-size:15px;line-height:1.4;color:var(--n-dim)}
.agency.night .n-team-roster code{font:500 12px/1 var(--n-mono);white-space:nowrap;color:var(--n-faint)}
.agency.night .n-team-roster code em{font:inherit;font-style:normal;letter-spacing:inherit;color:var(--n-amber)}
.agency.night .n-team-dot{width:8px;height:8px;border-radius:50%;background:var(--n-green);box-shadow:0 0 12px rgba(127,212,154,.55)}

/* the release log: a terminal */
.agency.night .n-team-log{padding:18px 22px;border:1px solid var(--n-hair);border-radius:16px;background:#050505;font:500 13px/1.85 var(--n-mono);color:var(--n-dim)}
.agency.night .n-team-log p{display:flex;gap:12px;margin:0;font:inherit;color:inherit}
.agency.night .n-team-log .when{flex:0 0 auto;width:4.5em;color:var(--n-faint)}
.agency.night .n-team-log .what{flex:0 0 auto;width:5.5em}
.agency.night .n-team-log .what.merged{color:var(--n-green)}
.agency.night .n-team-log .what.review{color:var(--n-amber)}
.agency.night .n-team-caret{display:inline-block;width:8px;height:15px;margin-top:6px;background:var(--n-amber);animation:n-team-blink 1s steps(1) infinite}
@keyframes n-team-blink{50%{opacity:0}}

/* the counters */
.agency.night .n-team-stats{container-type:inline-size;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(64px,7vw,96px) 0 0;padding:0;list-style:none;border-top:1px solid var(--n-hair)}
.agency.night .n-team-stats li{padding:30px 28px 0 0}
.agency.night .n-team-stats li+li{padding-left:28px;border-left:1px solid var(--n-hair)}
.agency.night .n-team-stats b{display:block;font:640 min(clamp(44px,4.6vw,72px),5.5cqi)/1 var(--n-display);letter-spacing:-.045em;font-variant-numeric:tabular-nums;color:#fff}
.agency.night .n-team-stats span{display:block;max-width:15em;margin-top:12px;font-size:15px;line-height:1.45;color:var(--n-dim)}
.agency.night .n-team-note{max-width:60em;margin-top:28px;font:500 12.5px/1.6 var(--n-mono);color:var(--n-faint)}

/* the landing pages' compact block: the card beside its words, three counters */
.agency.night main .lp-team .n-team-founder{display:grid;grid-template-columns:120px minmax(0,1fr);column-gap:24px;margin-top:36px;padding:22px}
.agency.night main .lp-team .n-team-founder :is(img,.n-team-mono){grid-row:1 / span 4;align-self:start;width:120px}
.agency.night main .lp-team .n-team-founder b{margin-top:4px;font-size:24px}
.agency.night main .lp-team .n-team-founder p{margin-top:14px;font-size:16px}
.agency.night main .lp-team .n-team-human{margin-top:16px;padding-top:14px}
.agency.night main .lp-team .n-team-stats{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:40px}
.agency.night main .lp-team .n-team-stats b{font-size:min(clamp(36px,3.4vw,52px),7.5cqi)}
.agency.night main .lp-team .n-team-note{margin-top:28px;font:500 12.5px/1.6 var(--n-mono);color:var(--n-faint)}
.agency.night main .lp-team .n-team-stats span{font-size:14.5px;line-height:1.45}
.agency.night main .lp-team .n-link{justify-self:start;margin-top:36px;text-decoration:none}

@media (max-width:1280px){
  .agency.night .n-team-roster li{grid-template-columns:22px 140px minmax(0,1fr);row-gap:8px}
  .agency.night .n-team-roster code{grid-column:3}
}
@media (max-width:1100px){
  .agency.night .n-team-org{grid-template-columns:minmax(0,1fr);gap:20px}
  .agency.night .n-team-founder{display:grid;grid-template-columns:160px minmax(0,1fr);column-gap:28px}
  .agency.night .n-team-founder :is(img,.n-team-mono){grid-row:1 / span 4;align-self:start;width:160px}
  .agency.night .n-team-founder b{margin-top:4px}
  .agency.night .n-team-roster::before{display:none}
}
@media (max-width:760px){
  .agency.night .n-team-roster li{grid-template-columns:16px minmax(0,1fr);gap:6px 14px;padding:18px 20px}
  .agency.night .n-team-does,.agency.night .n-team-roster code{grid-column:2}
  .agency.night .n-team-roster code{white-space:normal}
  .agency.night .n-team-log{font-size:12px;line-height:1.7}
  .agency.night .n-team-log p{flex-wrap:wrap;column-gap:10px;row-gap:0;margin-bottom:8px}
  .agency.night .n-team-log p:last-child{margin-bottom:0}
  .agency.night .n-team-log .when,.agency.night .n-team-log .what{width:auto}
  .agency.night .n-team-stats,.agency.night main .lp-team .n-team-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .agency.night .n-team-stats li,.agency.night .n-team-stats li+li{padding:24px 16px 24px 0;border-left:0;border-bottom:1px solid var(--n-hair)}
  .agency.night .n-team-stats li:nth-child(even){padding-left:16px;border-left:1px solid var(--n-hair)}
  .agency.night .n-team-stats li:last-child:nth-child(odd){grid-column:1 / -1}
  .agency.night .n-team-stats b{font-size:min(clamp(44px,4.6vw,72px),11cqi)}
  .agency.night main .lp-team .n-team-stats b{font-size:min(clamp(36px,3.4vw,52px),11cqi)}
}
@media (max-width:560px){
  .agency.night .n-team-founder,.agency.night main .lp-team .n-team-founder{grid-template-columns:96px minmax(0,1fr);column-gap:18px;padding:20px}
  .agency.night .n-team-founder :is(img,.n-team-mono),.agency.night main .lp-team .n-team-founder :is(img,.n-team-mono){width:96px}
  .agency.night .n-team-founder b{font-size:22px}
  .agency.night .n-team-founder p,.agency.night .n-team-human{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .agency.night .n-team-eyebrow i,.agency.night .n-team-caret{animation:none}
}

/* ---------- The blog (2026-10-27, `HarkWeb.Business.AgencyBlog`): the home page's "From the blog"
   section, the index (`/blog`), and a post (`/blog/<slug>`) with its dated build rail, the
   MoonPay concierge panel (`AgencyBlogComponents`, `.ci`) and the latest Blockster Briefing's
   player (`.briefing`). ---------- */
.agency.night .blog-shot{display:block;width:100%;height:auto;border:1px solid var(--n-hair);border-radius:14px;background:#0d0d0c}
.agency.night .blog-meta{font:500 13px/1.4 var(--n-mono);color:var(--n-faint)}
.agency.night .blog-tag{display:inline-block;padding:5px 10px;border:1px solid var(--n-hair);border-radius:999px;font:500 12px/1 var(--n-mono);color:var(--n-dim)}
.agency.night .blog-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--n-amber);box-shadow:0 0 12px rgba(227,163,94,.6)}
.agency.night .blog-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:4px}
.agency.night main .blog-actions .primary,.agency.night main .blog-actions .secondary{display:inline-flex;text-decoration:none}

/* the home page's section */
.agency.night .blog-home{padding:clamp(110px,11vw,170px) var(--padx);border-top:1px solid var(--n-hair)}
.agency.night .blog-home-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,5vw,88px);align-items:start}
.agency.night .blog-kicker{display:flex;gap:16px;align-items:baseline;margin-bottom:26px;font:500 13px/1 var(--n-mono)}
.agency.night .blog-kicker b{font-weight:500;color:var(--n-amber)}
.agency.night .blog-kicker a{color:var(--n-faint);text-decoration:none}
.agency.night .blog-kicker a:hover{color:var(--n-ink)}
.agency.night .blog-home h2{font:640 clamp(40px,4.4vw,66px)/.98 var(--n-display);letter-spacing:-.04em;color:#fff}
.agency.night .blog-home h2 a{color:inherit;text-decoration:none}
.agency.night .blog-home h2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:8px}
.agency.night .blog-home-dek{max-width:30em;margin:26px 0 30px;font-size:18px;line-height:1.55;color:var(--n-dim)}
.agency.night .blog-cap{margin-top:12px;font:500 12.5px/1.5 var(--n-mono);color:var(--n-faint)}
.agency.night .blog-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:22px 0 0;border-top:1px solid var(--n-hair)}
.agency.night .blog-figs div{padding:18px 18px 0 0}
.agency.night .blog-figs div+div{padding-left:18px;border-left:1px solid var(--n-hair)}
.agency.night .blog-figs dt{font:640 34px/1 var(--n-display);letter-spacing:-.03em;color:#fff}
.agency.night .blog-figs dd{margin:8px 0 0;font-size:14px;line-height:1.4;color:var(--n-dim)}

/* the index */
.agency.night .blog-index{padding:clamp(70px,8vw,120px) var(--padx) clamp(110px,10vw,150px)}
.agency.night .blog-index h1{font:640 clamp(44px,5.6vw,88px)/.95 var(--n-display);letter-spacing:-.045em;color:#fff}
.agency.night .blog-filter{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 44px}
.agency.night .blog-filter a{padding:10px 16px;border:1px solid var(--n-hair);border-radius:999px;font-size:14.5px;color:var(--n-dim);text-decoration:none}
.agency.night .blog-filter a:hover{color:var(--n-ink);border-color:rgba(244,242,238,.4)}
.agency.night .blog-filter a[aria-current]{background:var(--n-ink);border-color:var(--n-ink);color:#000}
.agency.night .blog-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);border:1px solid var(--n-hair);border-radius:22px;overflow:hidden;text-decoration:none}
.agency.night .blog-card+.blog-card{margin-top:20px}
.agency.night .blog-card img{width:100%;height:100%;min-height:320px;object-fit:cover;object-position:left center}
.agency.night .blog-card>div{display:flex;flex-direction:column;justify-content:space-between;gap:24px;padding:clamp(26px,3vw,44px)}
.agency.night .blog-card h2{margin-top:14px;font:640 clamp(30px,3vw,46px)/1 var(--n-display);letter-spacing:-.035em;color:#fff}
.agency.night .blog-card p{font-size:16.5px;line-height:1.55;color:var(--n-dim)}
.agency.night .blog-card h2+p{margin-top:14px}
.agency.night .blog-card:hover h2{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.agency.night .blog-tags{display:flex;flex-wrap:wrap;gap:8px}

/* a post */
.agency.night .blog-head{padding:clamp(60px,7vw,110px) var(--padx) 0}
.agency.night .blog-crumbs{display:flex;gap:10px;margin-bottom:34px;font:500 13px/1 var(--n-mono);color:var(--n-faint)}
.agency.night .blog-crumbs a{color:var(--n-faint);text-decoration:none}
.agency.night .blog-crumbs a:hover{color:var(--n-ink)}
.agency.night .blog-head h1{font:640 clamp(42px,5.2vw,84px)/.95 var(--n-display);letter-spacing:-.045em;color:#fff;text-wrap:balance}
.agency.night .blog-dek{max-width:34em;margin:28px 0 24px;font-size:20px;line-height:1.5;color:var(--n-dim)}
.agency.night .blog-cover{margin:clamp(48px,5vw,72px) 0 0}
.agency.night .blog-body{display:grid;grid-template-columns:260px minmax(0,1fr);gap:clamp(48px,6vw,110px);padding:clamp(64px,7vw,100px) var(--padx) clamp(110px,10vw,150px)}
.agency.night .blog-rail{position:sticky;top:104px;align-self:start}
.agency.night .blog-rail>p{margin-bottom:18px;font:500 13px/1 var(--n-mono);color:var(--n-amber)}
.agency.night .blog-rail ol{margin:0;padding:0;list-style:none;border-left:1px solid var(--n-hair)}
.agency.night .blog-rail li{position:relative;padding:0 0 18px 20px}
.agency.night .blog-rail li::before{content:"";position:absolute;top:5px;left:-4px;width:7px;height:7px;border-radius:50%;background:#2a2a28}
.agency.night .blog-rail li.done::before{background:var(--n-green)}
.agency.night .blog-rail li.live::before{background:var(--n-amber);box-shadow:0 0 12px rgba(227,163,94,.6)}
.agency.night .blog-rail time{display:block;font:500 12px/1.3 var(--n-mono);color:var(--n-faint)}
.agency.night .blog-rail li>span{display:block;margin-top:4px;font-size:14.5px;line-height:1.4;color:var(--n-dim)}
.agency.night .blog-rail li.live>span{color:var(--n-ink)}
.agency.night .blog-rail-talk{display:inline-flex;gap:7px;align-items:center;margin-top:9px;padding:6px 11px 6px 9px;border:1px solid rgba(227,163,94,.45);border-radius:999px;background:none;color:var(--n-amber);font:500 12px/1 var(--n-mono);cursor:pointer}
.agency.night .blog-rail-talk svg{width:13px;height:13px}
.agency.night .blog-rail-talk:hover{background:rgba(227,163,94,.1)}

.agency.night .blog-prose{font-size:19px;line-height:1.7;color:rgba(244,242,238,.78)}
.agency.night .blog-prose>*{max-width:68ch}
.agency.night .blog-prose>p,.agency.night .blog-prose>ul,.agency.night .blog-prose>ol{margin:0 0 1.15em}
.agency.night .blog-prose>ul,.agency.night .blog-prose>ol{padding-left:1.2em}
.agency.night .blog-prose>ul{list-style:disc}
.agency.night .blog-prose>ol{list-style:decimal}
.agency.night .blog-prose>ul li,.agency.night .blog-prose>ol li{margin:.35em 0}
.agency.night .blog-prose h2{margin:2.2em 0 .6em;font:640 clamp(28px,2.6vw,38px)/1.08 var(--n-display);letter-spacing:-.03em;color:#fff}
.agency.night .blog-prose h3{margin:1.8em 0 .5em;font:620 22px/1.2 var(--n-display);letter-spacing:-.02em;color:#fff}
.agency.night .blog-prose strong{font-weight:600;color:var(--n-ink)}
.agency.night .blog-prose>p a{color:var(--n-ink);text-decoration:underline;text-decoration-color:rgba(244,242,238,.35);text-underline-offset:3px}
.agency.night .blog-prose code{padding:2px 6px;border-radius:6px;background:rgba(244,242,238,.08);font:500 .86em var(--n-mono);color:var(--n-ink)}
.agency.night .blog-prose pre{max-width:none;margin:1.4em 0;padding:20px 22px;overflow:auto;border:1px solid var(--n-hair);border-radius:12px;background:#070707;font:500 14px/1.7 var(--n-mono);color:var(--n-dim)}
.agency.night .blog-prose pre code{padding:0;background:none;font:inherit;color:inherit}
.agency.night .blog-prose figure{max-width:none;margin:2em 0}
.agency.night .blog-prose figure.card{max-width:470px}
.agency.night .blog-prose figcaption{margin-top:12px;font:500 13px/1.5 var(--n-mono);color:var(--n-faint)}
.agency.night .blog-prose table{width:100%;max-width:none;margin:1.4em 0;border-collapse:collapse;font-size:16px}
.agency.night .blog-prose th,.agency.night .blog-prose td{padding:12px 14px 12px 0;border-bottom:1px solid var(--n-hair);text-align:left;vertical-align:top}
.agency.night .blog-prose th{font:500 12.5px/1.4 var(--n-mono);color:var(--n-faint)}
.agency.night .blog-prose td:first-child{color:var(--n-ink);white-space:nowrap}
.agency.night .blog-prose .blog-actions{max-width:none;margin-top:2em}
.agency.night .blog-arch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:none;margin:2em 0}
.agency.night .blog-arch div{padding:16px;border:1px solid var(--n-hair);border-radius:12px;background:#070707}
.agency.night .blog-arch b{display:block;margin-bottom:6px;font:600 15px/1.25 var(--n-display);color:#fff}
.agency.night .blog-arch span{display:block;font-size:14px;line-height:1.45;color:var(--n-dim)}
.agency.night .blog-arch small{display:block;margin-top:10px;font:500 11.5px/1.4 var(--n-mono);color:var(--n-amber)}

/* the concierge panel; `.blog-anchor` is the removed square card's address (`#ask-moonpay`), kept
   just before the panel so old links land on it */
.agency.night .ci [hidden]{display:none!important}
.agency.night .ci,.agency.night .blog-anchor{scroll-margin-top:110px}
.agency.night .blog-anchor{display:block}
.agency.night .ci button{font-family:var(--n-text);cursor:pointer}
.agency.night .ci button:focus-visible,.agency.night .blog-rail-talk:focus-visible,.agency.night .briefing button:focus-visible{outline:2px solid var(--n-amber);outline-offset:3px}
/* inside a box that clips (overflow:hidden), the ring goes inside the button or it is cut off */
.agency.night .briefing-frame button:focus-visible,.agency.night .ci-asks button:focus-visible{outline-offset:-3px}
@keyframes blog-wave{0%,100%{height:6px}50%{height:30px}}

/* the hairline panel (the article) */
.agency.night .blog-prose .ci{max-width:none;margin:2.2em 0;border:1px solid var(--n-hair);border-radius:16px;background:#070707;overflow:hidden}
.agency.night .ci-head{display:flex;gap:10px;align-items:center;margin:0;padding:14px 22px;border-bottom:1px solid var(--n-hair);font:500 12.5px/1.3 var(--n-mono);color:var(--n-faint)}
.agency.night .ci-head b{font-weight:500;color:var(--n-amber)}
.agency.night .ci-main{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:22px;align-items:center;padding:28px 22px}
.agency.night .ci-mic{display:grid;place-items:center;width:72px;height:72px;padding:0;border:0;border-radius:50%;background:var(--n-ink);color:#000;transition:background .2s,box-shadow .2s}
.agency.night .ci-mic svg{width:26px;height:26px}
.agency.night .ci[data-state=connecting] .ci-mic,.agency.night .ci[data-state=listening] .ci-mic,.agency.night .ci[data-state=speaking] .ci-mic,.agency.night .ci[data-state=ending] .ci-mic{background:var(--n-amber);box-shadow:0 0 0 8px rgba(227,163,94,.14)}
.agency.night .ci-title{margin:0;font:640 clamp(24px,2.2vw,30px)/1.05 var(--n-display);letter-spacing:-.03em;color:#fff}
.agency.night .ci-status{margin:8px 0 0;font:500 13px/1.45 var(--n-mono);color:var(--n-dim)}
.agency.night .ci-end{margin-top:10px;padding:7px 13px;border:1px solid rgba(244,242,238,.35);border-radius:999px;background:none;color:var(--n-ink);font-size:13.5px}
.agency.night .ci-wave{display:flex;gap:4px;align-items:center;height:34px;opacity:.25}
.agency.night .ci-wave i{width:4px;height:8px;border-radius:2px;background:var(--n-amber)}
.agency.night .ci[data-state=listening] .ci-wave,.agency.night .ci[data-state=speaking] .ci-wave{opacity:1}
.agency.night .ci[data-state=speaking] .ci-wave i{animation:blog-wave 1s ease-in-out infinite}
.agency.night .ci-wave i:nth-child(2n){animation-delay:-.3s}
.agency.night .ci-wave i:nth-child(3n){animation-delay:-.55s}
.agency.night .ci-wave i:nth-child(5n){animation-delay:-.8s}
.agency.night .ci-asks{display:grid;grid-template-columns:1fr 1fr;margin:0;padding:0;list-style:none;border-top:1px solid var(--n-hair)}
.agency.night .ci-asks li{margin:0;border-bottom:1px solid var(--n-hair)}
.agency.night .ci-asks li:nth-child(odd){border-right:1px solid var(--n-hair)}
.agency.night .ci-asks button{display:block;width:100%;padding:15px 22px;border:0;background:none;color:var(--n-dim);font-size:16px;line-height:1.4;text-align:left}
.agency.night .ci-asks button:hover{background:rgba(244,242,238,.04);color:var(--n-ink)}
.agency.night .ci-fine{margin:0;padding:14px 22px;font-size:13px;line-height:1.5;color:var(--n-faint)}
.agency.night .ci-ask{margin-left:6px;padding:0;border:0;background:none;color:var(--n-amber);font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* the latest Blockster Briefing */
.agency.night .blog-prose .briefing{max-width:none;margin:2em 0 2.4em}
.agency.night .briefing-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:0 0 14px;font:500 12.5px/1.3 var(--n-mono);color:var(--n-faint)}
.agency.night .briefing-head b{font-weight:500;color:var(--n-amber)}
.agency.night .briefing-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--n-hair);border-radius:14px;background:#000}
.agency.night .briefing-frame button{position:absolute;inset:0;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
.agency.night .briefing-frame img{display:block;width:100%;height:100%;object-fit:cover}
.agency.night .briefing-play{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:var(--n-ink);color:#000;box-shadow:0 10px 40px rgba(0,0,0,.45);transition:transform .2s}
.agency.night .briefing-play svg{width:30px;height:30px;margin-left:4px}
.agency.night .briefing-frame button:hover .briefing-play{transform:scale(1.06)}
.agency.night .briefing-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.agency.night .briefing-chapters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin:22px 0 0;padding:0;list-style:none;border-top:1px solid var(--n-hair)}
.agency.night .briefing-chapters li{position:relative;margin:0}
.agency.night .briefing-chapters li::before{content:"";position:absolute;top:-4px;left:0;width:7px;height:7px;border-radius:50%;background:#2a2a28}
.agency.night .briefing-chapters li.on::before{background:var(--n-amber);box-shadow:0 0 12px rgba(227,163,94,.6)}
.agency.night .briefing-chapters button{display:block;width:100%;padding:16px 14px 4px 0;border:0;background:none;font-family:var(--n-text);text-align:left;cursor:pointer}
.agency.night .briefing-chapters time{display:block;font:500 12px/1.3 var(--n-mono);color:var(--n-faint)}
.agency.night .briefing-chapters b{display:block;margin-top:6px;font:600 14.5px/1.25 var(--n-display);color:var(--n-ink)}
.agency.night .briefing-chapters span{display:block;margin-top:4px;font-size:13.5px;line-height:1.4;color:var(--n-dim)}
.agency.night .briefing-chapters button:hover b,.agency.night .briefing-chapters li.on b{color:var(--n-amber)}
.agency.night .briefing-foot{margin:18px 0 0;font:500 12.5px/1.5 var(--n-mono);color:var(--n-faint)}
.agency.night .briefing-foot a{color:var(--n-dim)}

@media (max-width:1000px){
  .agency.night .blog-home-grid,.agency.night .blog-body,.agency.night .blog-card{grid-template-columns:minmax(0,1fr)}
  .agency.night .blog-rail{position:static}
}
@media (max-width:860px){.agency.night .blog-arch{grid-template-columns:1fr 1fr}}
@media (max-width:760px){
  .agency.night .ci-main{grid-template-columns:auto minmax(0,1fr)}
  .agency.night .ci-wave{display:none}
  .agency.night .ci-asks{grid-template-columns:1fr}
  .agency.night .ci-asks li:nth-child(odd){border-right:0}
  .agency.night .briefing-chapters{grid-template-columns:1fr;margin-left:4px;border-top:0;border-left:1px solid var(--n-hair)}
  .agency.night .briefing-chapters li::before{top:20px;left:-4px}
  .agency.night .briefing-chapters button{padding:14px 0 6px 20px}
  .agency.night .briefing-play{width:64px;height:64px;margin:-32px 0 0 -32px}
}
@media (max-width:560px){
  .agency.night .blog-figs{grid-template-columns:1fr}
  .agency.night .blog-figs div,.agency.night .blog-figs div+div{padding:16px 0;border-left:0}
  .agency.night .blog-figs div+div{border-top:1px solid var(--n-hair)}
  .agency.night .blog-arch{grid-template-columns:1fr}
  .agency.night .blog-actions a{width:100%;justify-content:center}
}
@media (prefers-reduced-motion:reduce){
  .agency.night .ci[data-state=speaking] .ci-wave i{animation:none;height:18px}
}

/* ---------- phone: the team section and the blog, in the rhythm and type of the block above
   (2026-10-27). Here, after their own rules, so these win. Monospaced text you read in full (the
   release log, the note under the counters) is 13px: at 12px a phone shrank it to a smudge. ---------- */
@media (max-width:640px){
  .agency.night .n-team,.agency.night .blog-home{padding:var(--n-sec) var(--padx)}
  .agency.night .n-team-eyebrow{margin-bottom:20px}
  /* the founder's quote: one size on the home page and in the landing pages' compact block */
  .agency.night .n-team-founder p,.agency.night main .lp-team .n-team-founder p{font-size:16.5px;line-height:1.5}
  .agency.night .n-team-human{font-size:13px}
  .agency.night .n-team-does{font-size:15.5px;line-height:1.45}
  .agency.night .n-team-roster code{font-size:12.5px;line-height:1.4}
  .agency.night .n-team-log{font-size:13px;line-height:1.65}
  .agency.night .n-team-stats,.agency.night main .lp-team .n-team-stats{margin-top:48px}
  .agency.night .n-team-note,.agency.night main .lp-team .n-team-note{font-size:13px;line-height:1.6}
  .agency.night .blog-home h2{font-size:clamp(34px,10vw,40px);line-height:1;letter-spacing:-.035em;word-spacing:.04em}
  .agency.night .blog-home-dek{margin:20px 0 26px;font-size:17px}
  .agency.night .blog-tag{font-size:12.5px}
  .agency.night .blog-index{padding:44px var(--padx) var(--n-sec)}
  .agency.night .blog-filter{margin:26px 0 32px}
  /* the card's picture is a screenshot of a whole site: a 320px-tall slab cropped most of it */
  .agency.night .blog-card img{min-height:0;height:auto;aspect-ratio:16/10}
  .agency.night .blog-card>div{gap:20px;padding:22px}
  .agency.night .blog-head{padding-top:40px}
  .agency.night .blog-crumbs{margin-bottom:24px}
  .agency.night .blog-dek{margin:22px 0 20px;font-size:18px}
  .agency.night .blog-body{gap:40px;padding:48px var(--padx) var(--n-sec)}
  .agency.night .blog-prose{font-size:17.5px;line-height:1.65}
  .agency.night .blog-index h1,.agency.night .blog-head h1,.agency.night .blog-card h2{word-spacing:.04em}
  /* small print you read in full is 13px here too; the stack diagram's labels 12px */
  .agency.night .briefing-foot,.agency.night .blog-cap{font-size:13px}
  .agency.night .blog-arch small{font-size:12px}
  /* the post's closing "Book a demo" is a button: the full-width rule below 560px only took links */
  .agency.night .blog-actions :is(a,button){width:100%;justify-content:center}
  /* links that were a 13px line of text: a bigger hit area without moving anything */
  .agency.night .blog-kicker a,.agency.night .blog-crumbs a{position:relative}
  .agency.night .blog-kicker a::after,.agency.night .blog-crumbs a::after{content:"";position:absolute;inset:-14px -8px}
  .agency.night .blog-rail-talk{min-height:40px;padding:0 14px 0 12px}
}
/* narrow phones (iPhone mini/SE at 375, most Androids at 360, 320): the logo, "Book a demo" and the
   menu button did not fit one row — "Talk Society" broke over two lines, and at 320 the menu
   button hung 18px off the right edge. Tighter gaps, and the header button drops its arrow. */
@media (max-width:389px){
  .agency.night .nav{column-gap:12px}
  .agency.night .nav .logo{white-space:nowrap}
  .agency.night .nav .nav-cta{padding-left:14px;padding-right:14px}
  .agency.night .nav .nav-cta span{display:none}
}
/* the narrowest screens (a Galaxy Fold's 280px cover screen, 300-339px): the logo, the button and
   the menu still need ~327px, so the menu button hung off the edge. Smaller type and gaps; the
   header button stays (a phone header keeps its own "Book a demo"). */
@media (max-width:339px){
  .agency.night .nav{column-gap:8px}
  .agency.night .nav .logo{gap:8px;font-size:15.5px}
  .agency.night .nav .nav-cta{padding-left:12px;padding-right:12px;font-size:13.5px}
  /* the same screens: the big 30¢ and the longest legal title ("Subprocessors") were wider than
     the column */
  .agency.night .n-big-num{font-size:120px}
  .agency.night .n-big-cent{font-size:68px}
  .agency.night .legal-head h1{font-size:34px}
}
@media (max-width:300px){
  .agency.night .nav{column-gap:6px}
  .agency.night .nav .logo{gap:6px;font-size:14px}
  .agency.night .nav .nav-cta{padding-left:10px;padding-right:10px;font-size:13px}
}