/* insuresight.ai: the stylesheet every page shares. See docs/marketing-site.md. */

/* Public Sans, self-hosted (SIL Open Font License, assets/fonts/OFL-public-sans.txt): one
   variable file for every weight. Chosen 2026-10-09 over Schibsted Grotesk, one of the
   free "distinctive grotesks" generated pages reach for: Public Sans is the US
   government design system's face, sober and institutional, and reads as nobody's trend. White and cool grey rather than the warm paper and serif
   headings this page started with, which is the house style of AI-generated pages and read
   as one. The navy comes from the mark. */
@font-face {
  font-family: "Public Sans";
  src: url(/assets/fonts/public-sans-latin.woff2) format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
:root {
  --paper: #FFFFFF;
  --panel: #FFFFFF;
  --tint: #F3F5F7;
  --line: #E1E6EA;
  --line-2: #ECEFF2;
  --ink: #0D1722;
  --text: #1F2A33;
  --muted: #5E6A73;
  /* 4.5:1 or better on paper, tint, white and the highlight blue. It was #8B949A (2.9:1),
     and it carried the disclosures: the most important small print was the hardest to read. */
  --faint: #626B72;
  --brand: #2A5C86;
  --brand-2: #4D84B0;
  --brand-soft: #E7EEF5;
  --ok: #2F7A55;
  --route: #6B5CA5;
  --wait: #9A5F14;
  --risk: #A33A2B;
  --risk-soft: #F8E9E6;
  --night: #0F1B26;
  --font: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--paper); color: var(--text);
  font-family: var(--font);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
/* 16px minimum gutter on a phone; 93vw alone left 13px at 375. */
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, #trust :focus-visible { outline-color: #fff; }
a:not(.btn) { text-underline-offset: .2em; text-decoration-thickness: 1px; }

h1, h2, h3 { color: var(--ink); }
h1, h2 { font-family: var(--font); font-weight: 700; letter-spacing: -.03em; }
h1 { font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 1.05; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); line-height: 1.12; margin: 0; text-wrap: balance; }
h3 { font-size: 1.05rem; font-weight: 650; margin: 0 0 4px; letter-spacing: -.005em; }
p { margin: 0; }
.muted { color: var(--muted); }

.btn { display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .95rem; padding: 11px 20px; border-radius: 6px; border: 1px solid var(--brand); text-decoration: none; transition: background .15s, color .15s, border-color .15s, transform .08s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: #224C6F; }
.btn-plain { color: var(--brand); background: transparent; }
.btn-plain:hover { background: var(--brand-soft); }

/* ---- nav ---- */
.nav { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 20; transition: box-shadow .2s; }
.nav.solid { box-shadow: 0 8px 24px -16px rgba(13,23,34,.35); }
.nav-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 1.05rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }
.nav-links a.l { color: var(--muted); font-size: .92rem; text-decoration: none; }
.nav-links a.l:hover { color: var(--ink); }
.nav .btn { padding: 8px 15px; font-size: .88rem; }

/* ---- hero: dark, so the film reads as a screen and the page opens on a beat ---- */
.hero { padding: 76px 0 88px; background: var(--night); color: #fff; }
.hero-top { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: end; }
.hero h1 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.6rem); line-height: 1; letter-spacing: -.038em; }
.hero .lede { color: rgba(255,255,255,.78); margin-top: 0; }
.hero .lede b { color: #fff; }
.hero .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.hero .btn-primary:hover { background: #E9EEF3; }
.hero .btn-plain { color: #fff; border-color: rgba(255,255,255,.45); }
.hero .btn-plain:hover { background: rgba(255,255,255,.08); }
/* The film is wider than the text column: the most human thing on the page, shown big. */
.hero .film { width: min(1280px, calc(100% - 32px)); margin: 56px auto 0; }
.hero .film-frame { box-shadow: 0 40px 90px -40px rgba(0,0,0,.75), 0 0 0 1px rgba(255,255,255,.06); }
.hero .film figcaption { color: rgba(255,255,255,.72); }
/* The benchmark band under the film: industry figures, each with the outcome we deliver. The
   outcome line follows its figure once, as the band comes into view (site.js); without script, or
   with reduced motion, everything simply shows. */
.proof { margin-top: 56px; }
.proof-k { font-size: .8rem; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.proof-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 18px; }
.proof-i { display: flex; flex-direction: column; border-top: 1px solid rgba(255,255,255,.18); padding-top: 18px; }
.proof-i .v { font-size: 2.4rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: #fff; }
.proof-i p { margin-top: 10px; font-size: .92rem; color: rgba(255,255,255,.78); }
.proof-i .src { display: block; margin: 6px 0 14px; font-size: .76rem; color: rgba(255,255,255,.55); }
.proof-i .src a { color: inherit; }
.proof-i .ours { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.12); font-size: .95rem; font-weight: 600; color: #fff; }
.proof.reveal .ours { opacity: 0; transform: translateY(6px); transition: opacity .5s ease .5s, transform .5s ease .5s; }
.proof.reveal .proof-i:nth-child(2) .ours { transition-delay: .65s; }
.proof.reveal .proof-i:nth-child(3) .ours { transition-delay: .8s; }
.proof.reveal.in .ours { opacity: 1; transform: none; }
@media (max-width: 900px) { .proof-grid { grid-template-columns: 1fr; gap: 24px; } }
.lede { font-size: 1.12rem; color: var(--muted); margin-top: 22px; max-width: 34em; }
.lede b { color: var(--ink); font-weight: 600; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---- the film ---- */
.film { margin: 0; }
.film-frame { position: relative; border-radius: 12px; overflow: hidden; background: #0b1b2a; box-shadow: 0 1px 2px rgba(21,34,44,.06), 0 24px 48px -24px rgba(21,34,44,.35); aspect-ratio: 16 / 9; }
.film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-sound { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 9px; border: none; border-radius: 999px; padding: 10px 16px 10px 12px; background: rgba(250,248,244,.94); color: var(--ink); font-family: inherit; font-size: .9rem; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.film-sound:hover { background: #fff; }
.film-sound[hidden] { display: none; }
.film figcaption { margin-top: 10px; font-size: .8rem; color: var(--faint); }

.fold-call .call { max-width: 760px; }

/* ---- the app ---- */
.devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.device { margin: 0; text-align: center; }
.device-frame { max-width: 280px; margin: 0 auto; padding: 10px; border-radius: 44px; background: #0d1216; box-shadow: 0 30px 60px -30px rgba(21,34,44,.5), 0 0 0 1px #2b333a inset; }
.device-frame img { display: block; width: 100%; height: auto; border-radius: 34px; }
.device figcaption { margin-top: 16px; }
.device figcaption b { display: block; color: var(--ink); font-weight: 650; }
.device figcaption span { color: var(--muted); font-size: .92rem; }

/* The subject stands left of centre, so the line sits right, over a gradient from the right. */
.band { position: relative; min-height: 520px; display: grid; align-items: end; background: #0b1b2a 30% 40%/cover no-repeat; }
.band::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to left, rgba(8,12,16,.82) 0%, rgba(8,12,16,.55) 34%, rgba(8,12,16,0) 62%); }
.band p { position: relative; margin: 0 0 0 auto; padding: 64px 0; color: #fff; font-family: var(--font); font-weight: 650; letter-spacing: -.025em; font-size: clamp(1.8rem, 3.2vw, 2.7rem); line-height: 1.15; max-width: 12.5em; }
.band-credit { position: absolute; right: 16px; bottom: 10px; color: rgba(255,255,255,.8); font-size: .72rem; }

/* ---- founders ---- */
.founders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 48px; max-width: 920px; }
.founder { margin: 0; display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 28px; align-items: start; }
.founder img { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line); }
.founder figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; }
.founder b { font-family: var(--font); font-weight: 650; letter-spacing: -.015em; font-size: 1.45rem; color: var(--ink); line-height: 1.2; }
.founder .role { font-size: .82rem; font-weight: 650; color: var(--brand); letter-spacing: .02em; }
.founder figcaption span:not(.role) { color: var(--muted); font-size: .95rem; margin-top: 6px; }
.founder a { margin-top: 8px; font-size: .88rem; color: var(--brand); font-weight: 600; text-decoration: none; }
.founder a:hover { text-decoration: underline; }

/* ---- panels, tables ---- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(21,34,44,.04), 0 12px 32px -18px rgba(21,34,44,.18); overflow: hidden; }
.panel-head { display: flex; align-items: baseline; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-head .t { font-weight: 650; font-size: .95rem; color: var(--ink); }
.dev { font-size: .82rem; font-weight: 650; color: var(--wait); }
.panel-foot { padding: 11px 18px; border-top: 1px solid var(--line); background: var(--tint); color: var(--muted); font-size: .8rem; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .75rem; font-weight: 600; color: var(--faint); padding: 10px 18px 8px; border-bottom: 1px solid var(--line-2); }
td { padding: 12px 18px; border-bottom: 1px solid var(--line-2); font-size: .88rem; vertical-align: top; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
td.caller { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
td.disp { color: var(--muted); }
.st { font-size: .82rem; font-weight: 600; white-space: nowrap; }
.st::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-right: 7px; vertical-align: 1px; }
.st-live { color: var(--brand); } .st-ok { color: var(--ok); } .st-route { color: var(--route); }
.st-risk { color: var(--risk); } .st-wait { color: var(--wait); }
tr.on td { background: var(--brand-soft); }
tr.lapsed td { background: var(--risk-soft); }
.flag { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; margin: 2px 4px 2px 0; white-space: nowrap; }
.flag-risk { color: var(--risk); border-color: #EBC2BA; }
.flag-new { color: var(--brand); border-color: #BFD3E6; background: var(--brand-soft); }
/* The desk plays once when it comes into view: rows arrive, a newly past-due policy
   lands, and a renewal gets raised on a call. Without script or with reduced motion it
   is simply the finished desk. */
.desk tbody tr.row { transition: opacity .5s ease, transform .5s ease; }
.desk td { transition: background-color 1.2s ease; }
.desk.pre tbody tr.row { opacity: 0; transform: translateY(8px); }
.desk.pre tbody tr.row.in { opacity: 1; transform: none; }
.desk.pre tr.row[data-late]:not(.shown) { display: none; }
.desk.pre .flag[data-late] { opacity: 0; transform: scale(.9); transition: opacity .4s ease, transform .4s ease; }
.desk.pre .flag[data-late].in { opacity: 1; transform: none; }
.desk tr.flash td { background: #FFF3D6; transition: background-color .15s; }

/* ---- sections ---- */
section { padding: 88px 0; border-top: 1px solid var(--line); scroll-margin-top: 64px; }
.intro { max-width: 40em; }
.intro p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; text-wrap: pretty; }

/* ---- a call: audio, and a transcript that follows it ---- */
.player { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.player[hidden] { display: none; }
.play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
.play:hover { background: #224C6F; }
.play svg { display: block; }
.play .i-pause, .play.on .i-play { display: none; }
.play.on .i-pause { display: block; }
.track { flex: 1; height: 6px; border-radius: 3px; background: var(--line-2); cursor: pointer; position: relative; }
.track i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--brand); }
.clock { font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
audio { display: block; width: calc(100% - 36px); margin: 14px 18px; }
audio[hidden] { display: none; }
/* On a wide screen a long call scrolls inside its panel and follows the audio. On a
   phone the panel never scrolls on its own (a thumb landing on it got stuck there):
   it shows the opening lines and a button for the rest. */
.turns { list-style: none; margin: 0; padding: 6px 0; max-height: 440px; overflow-y: auto; overscroll-behavior: contain; position: relative; }
.turns li { padding: 9px 18px 9px 15px; border-left: 3px solid transparent; }
.turns li[data-cue] { cursor: pointer; }
/* data-audio="off" shows the transcript alone: no player, nothing that looks playable. */
.call[data-audio="off"] audio, .call[data-audio="off"] .player { display: none; }
.call[data-audio="off"] .turns li[data-cue] { cursor: auto; }
.turns li.now { background: var(--brand-soft); border-left-color: var(--brand); }
.who { display: block; font-size: .75rem; font-weight: 600; color: var(--faint); }
.turns li.agent .who { color: var(--brand); }
.say { margin-top: 1px; font-size: .96rem; line-height: 1.45; color: var(--ink); }
.lang { font-size: .66rem; font-weight: 600; color: var(--muted); background: var(--tint); border-radius: 4px; padding: 1px 5px; margin-right: 7px; vertical-align: 2px; }
.note { margin-top: 3px; font-size: .8rem; color: var(--muted); }
.more { display: none; width: 100%; border: none; border-top: 1px solid var(--line-2); background: var(--panel); color: var(--brand); font: inherit; font-weight: 600; font-size: .9rem; padding: 12px 18px; cursor: pointer; text-align: left; }
.call.clipped .turns li:nth-child(n+5) { display: none; }
.call.clipped .more { display: block; }

/* ---- retention ---- */
.stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; max-width: 820px; }
.stat { border-top: 2px solid var(--ink); padding-top: 14px; }
.stat .v { font-family: var(--font); font-size: 2.8rem; font-weight: 700; letter-spacing: -.035em; line-height: 1; color: var(--ink); }
.stat p { margin-top: 10px; font-size: .92rem; color: var(--text); }
.stat .src { display: block; margin-top: 6px; font-size: .78rem; color: var(--faint); }
.stat .src a { color: inherit; }
.retention-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: start; margin-top: 56px; }
.partner { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 24px; }
.partner h3 { font-family: var(--font); font-weight: 650; letter-spacing: -.015em; font-size: 1.4rem; line-height: 1.2; margin: 10px 0 10px; }
.partner > p { color: var(--muted); font-size: .95rem; }
.partner .measure { margin-top: 16px; color: var(--text); }
.guard { list-style: none; margin: 14px 0 0; padding: 0; font-size: .9rem; color: var(--muted); }
.guard li { padding: 4px 0 4px 22px; position: relative; }
.guard li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--ok); }

/* ---- the queue ---- */
.queue { margin-top: 40px; }
.queue-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; grid-template-areas: "intro people" "table people"; align-items: start; }
.queue-grid .intro { grid-area: intro; }
.queue-grid .queue { grid-area: table; }
.people { grid-area: people; margin: 0; }
.people img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 24px 48px -28px rgba(21,34,44,.45); }
.people figcaption { margin-top: 14px; color: var(--muted); font-size: .92rem; }
.people .credit { display: block; margin-top: 4px; color: var(--faint); font-size: .75rem; }

/* ---- the folds: everything that is proof but not the story ---- */
#today { background: var(--tint); }
#today .next { background: var(--panel); border: 1px solid var(--line); }
.folds { margin-top: 48px; border-top: 1px solid var(--line); }
.fold { border-bottom: 1px solid var(--line); }
.fold > summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: baseline; padding: 22px 36px 22px 0; cursor: pointer; list-style: none; position: relative; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.fold[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.fold > summary:hover .f-t { color: var(--brand); }
.f-t { font-family: var(--font); font-size: 1.4rem; font-weight: 650; letter-spacing: -.015em; color: var(--ink); line-height: 1.2; }
.f-s { color: var(--muted); font-size: .92rem; text-align: right; }
.fold-body { padding: 4px 0 52px; }
.fold .devices { margin-top: 32px; }
.fold .caps { margin-top: 8px; }

/* ---- due diligence, on navy ---- */
#trust { background: var(--night); border-top: none; }
#trust h2, #trust h3 { color: #fff; }
#trust .intro p, #trust .trust p { color: rgba(255,255,255,.74); }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 40px; margin-top: 44px; }
.trust h3 { margin-bottom: 6px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.16); }
.trust p { color: var(--muted); font-size: .94rem; }

/* ---- what works today ---- */
.highlights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; }
.hl { border-top: 2px solid var(--ink); padding-top: 16px; }
.hl h3 { font-family: var(--font); font-weight: 650; font-size: 1.2rem; letter-spacing: -.015em; line-height: 1.2; margin-bottom: 8px; }
.hl p { color: var(--muted); font-size: .92rem; }
.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin-top: 48px; }
.caps h3 { font-size: .85rem; color: var(--muted); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.caps ul { list-style: none; margin: 0; padding: 0; }
.caps li { padding: 3px 0; font-size: .92rem; }
.next { margin-top: 44px; padding: 20px 24px; background: var(--tint); border-radius: 8px; font-size: .96rem; color: var(--muted); }
.next b { color: var(--ink); font-weight: 650; }

/* ---- book intelligence ---- */
.book-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fig { padding: 18px; border-right: 1px solid var(--line-2); }
.fig:last-child { border-right: none; }
.fig .k { font-size: .8rem; color: var(--muted); }
.fig .v { font-family: var(--font); font-size: 2.1rem; line-height: 1.1; margin-top: 6px; color: var(--ink); font-weight: 700; letter-spacing: -.035em; }
.fig .s { font-size: .8rem; color: var(--muted); margin-top: 6px; }
.split { display: flex; height: 6px; border-radius: 3px; overflow: hidden; margin-top: 12px; background: var(--line-2); }
.split i { display: block; }
.brow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 20px; padding: 13px 18px; border-top: 1px solid var(--line-2); font-size: .88rem; align-items: baseline; }
.brow .r { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.withheld { color: var(--wait); font-weight: 600; }

/* ---- close ---- */
.close { text-align: center; }
.close .intro { margin: 0 auto; }
.close .hero-cta { justify-content: center; }

footer { border-top: 1px solid var(--line); padding: 28px 0 40px; }
.foot-in { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; }
footer a { color: var(--muted); font-size: .9rem; }
footer .fine { flex-basis: 100%; color: var(--faint); font-size: .8rem; max-width: 60em; }

/* ---- tablet ---- */
@media (max-width: 900px) {
  .book-grid, .listen-grid, .retention-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-top { grid-template-columns: 1fr; gap: 24px; }
  .trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .queue-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "people" "table"; }
  .founders { grid-template-columns: 1fr; gap: 36px; }
  .people { margin-top: 28px; }
  .highlights, .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-links a.l.opt { display: none; }
}
/* ---- phone ---- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav-links a.l { display: none; }
  .hero { padding: 40px 0 48px; }
  .hero .film { width: 100%; margin-top: 36px; }
  .hero .film-frame { border-radius: 0; }
  .hero .film figcaption { padding: 0 16px; }
  .fold > summary { grid-template-columns: 1fr; row-gap: 4px; }
  .f-t { font-size: 1.25rem; }
  .f-s { text-align: left; }
  section { padding: 56px 0; }
  .hero-cta .btn { flex: 1 1 100%; }
  .turns { max-height: none; overflow: visible; }
  .highlights, .caps, .stats, .trust { grid-template-columns: 1fr; gap: 14px; }
  .stats { gap: 22px; } .trust { gap: 24px; }
  .caps { gap: 26px; }
  .figs { grid-template-columns: 1fr; }
  .fig { border-right: none; border-bottom: 1px solid var(--line-2); }
  .fig:last-child { border-bottom: none; }
  /* the figure goes under its description; side by side it crushed the text to ~90px */
  .brow { grid-template-columns: 1fr; }
  .brow .r { white-space: normal; }
  /* caller number, duration and expiry-date columns drop out so the rest fits without scroll */
  th.caller, td.caller, th.num, td.num, th.opt, td.opt { display: none; }
  th, td { padding-left: 14px; padding-right: 14px; }
  /* Three phones stacked make a very long scroll; on a phone they become a row you swipe,
     with the next one peeking in so it is obvious there is more. */
  .devices { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; margin-left: -16px; margin-right: -16px; padding: 0 16px 8px; scrollbar-width: none; }
  .devices::-webkit-scrollbar { display: none; }
  .device { flex: 0 0 76%; scroll-snap-align: center; }
  .film-sound { right: 10px; bottom: 10px; padding: 8px 12px 8px 10px; font-size: .82rem; }
  .band { min-height: 460px; background-position: 26% 30%; }
  .founder { grid-template-columns: 112px minmax(0, 1fr); gap: 20px; }
  .founder img { width: 112px; height: 112px; }
  .founder figcaption { padding-top: 4px; }
  .band::before { background: linear-gradient(to top, rgba(8,12,16,.85) 0%, rgba(8,12,16,.35) 42%, rgba(8,12,16,0) 62%); }
  .band p { margin: 0; padding: 36px 0 44px; max-width: none; font-size: 1.75rem; }
}

/* ---- the signature: the mark's converging arcs ----
   The mark is a signal closing to one known point (see insuresight-mark.svg). Drawn large and
   faint in the two dark sections, and used as the list marker; the headline's full stop takes
   the mark's lightest arc colour. One motif, used sparingly, is what makes the page ours. */
/* Never behind text: one drawing, in the empty space beside the due-diligence heading. */
#trust { position: relative; overflow: hidden; }
#trust > .wrap { position: relative; }
.arcs { position: absolute; top: 60px; right: max(16px, calc((100% - 1120px) / 2)); width: 170px; height: auto; pointer-events: none; }
.arcs path { fill: none; stroke: rgba(115,166,206,.35); stroke-width: 3; stroke-linecap: round; }
.arcs circle { fill: rgba(115,166,206,.35); }
.hero h1 .dot { color: #73A6CE; }
.guard li::before { top: .38em; left: 0; width: 17px; height: 15px; border: 0; border-radius: 0; background: url(/assets/insuresight-mark.svg) no-repeat center / contain; }
.guard li { padding-left: 28px; }

/* ---- icons: one stroke set, drawn to the mark's weight ---- */
.ico { display: block; width: 28px; height: 28px; margin-bottom: 14px; fill: none; stroke: var(--brand); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- folds open and close smoothly where the browser can animate to auto height ---- */
:root { interpolate-size: allow-keywords; }
.fold::details-content { block-size: 0; overflow: clip; transition: block-size .35s ease, content-visibility .35s allow-discrete; }
.fold[open]::details-content { block-size: auto; }
.fold > summary:focus-visible { outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .fold::details-content, .desk tbody tr.row, .desk td, .btn, .nav { transition: none; }
}
@media (max-width: 640px) {
}
/* Below this width the heading's line reaches the drawing's space. */
@media (max-width: 1100px) { .arcs { display: none; } }

/* ---- inner pages: product, security, about ---- */
.nav a.l[aria-current="page"] { color: var(--ink); font-weight: 600; }
.page-hero { background: var(--night); color: #fff; padding: 76px 0 72px; }
.page-hero h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -.035em; max-width: 15em; }
.page-hero p { color: rgba(255,255,255,.78); font-size: 1.15rem; margin-top: 20px; max-width: 38em; }
.page-hero .hero-cta { margin-top: 28px; }
.page-hero .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.page-hero .btn-primary:hover { background: #E9EEF3; }
.page-hero .btn-plain { color: #fff; border-color: rgba(255,255,255,.45); }
.page-hero .btn-plain:hover { background: rgba(255,255,255,.08); }
.page-hero :focus-visible { outline-color: #fff; }
section.tint { background: var(--tint); }
.spec { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; margin: 36px 0 0; border-top: 1px solid var(--line); }
.spec dt { padding: 18px 0; font-weight: 650; color: var(--ink); border-bottom: 1px solid var(--line); letter-spacing: -.005em; }
.spec dd { margin: 0; padding: 18px 0; color: var(--text); border-bottom: 1px solid var(--line); }
.spec dd .muted { display: block; margin-top: 6px; font-size: .92rem; }
.state { display: inline-block; font-size: .78rem; font-weight: 650; padding: 1px 8px; border-radius: 4px; margin-right: 8px; vertical-align: 1px; }
.state-yes { color: var(--ok); background: #E8F3EC; }
.state-no { color: var(--wait); background: #FBF1E3; }
.state-na { color: var(--muted); background: var(--tint); }
.steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.steps li { border-top: 2px solid var(--ink); padding-top: 14px; font-size: .95rem; color: var(--muted); }
.steps li::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-size: .8rem; font-weight: 650; color: var(--brand); margin-bottom: 8px; }
.steps li b { display: block; color: var(--ink); font-weight: 650; margin-bottom: 6px; }
.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 40px; }
.split-2 h3 { margin-bottom: 8px; }
.split-2 p, .split-2 li { color: var(--muted); }
.split-2 ul { margin: 10px 0 0; padding-left: 1.1em; }
.split-2 li { padding: 3px 0; }
.more-link { display: inline-block; margin-top: 28px; font-weight: 600; color: var(--brand); text-decoration: none; }
.more-link:hover { text-decoration: underline; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.principles div { border-top: 2px solid var(--ink); padding-top: 16px; }
.principles h3 { font-size: 1.15rem; margin-bottom: 8px; }
.principles p { color: var(--muted); font-size: .96rem; }
@media (max-width: 900px) {
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .principles, .split-2 { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .page-hero { padding: 44px 0 48px; }
  .spec { grid-template-columns: 1fr; }
  .spec dt { border-bottom: none; padding-bottom: 4px; }
  .spec dd { padding-top: 0; }
  .steps { grid-template-columns: 1fr; gap: 18px; }
}
.page-note { margin-top: 36px; }

/* ---- phone menu: the text links are hidden below 640px, so they live here instead ---- */
.menu { display: none; position: relative; }
.menu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 6px; color: var(--ink); }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.menu[open] > summary { background: var(--tint); }
.menu-panel { position: absolute; right: 0; top: 48px; min-width: 190px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 18px 40px -18px rgba(13,23,34,.35); padding: 6px; display: flex; flex-direction: column; }
.menu-panel a { padding: 11px 12px; border-radius: 6px; color: var(--ink); font-weight: 600; text-decoration: none; }
.menu-panel a:hover, .menu-panel a:focus-visible { background: var(--tint); }
@media (max-width: 640px) { .menu { display: block; } .nav-links { gap: 10px; } }

/* ---- the wordmark: the mark inline, and the name in two weights ----
   "Insure" bold and "Sight" regular, so the compound reads as two words and the wordmark is
   not simply the body font in bold. The mark's arcs are drawn per background: on white they
   darken as they converge (the SVG file's colours); on navy they brighten, or the inner arc
   and the dot vanish into the ground. */
.brand { font-size: 1.14rem; font-weight: 400; letter-spacing: -.015em; gap: 10px; }
.brand .wm b { font-weight: 750; }
.mark path { fill: none; stroke-linecap: round; }
.mark .m1 { stroke: #73A6CE; stroke-width: 2.6; }
.mark .m2 { stroke: #4D84B0; stroke-width: 3.2; }
.mark .m3 { stroke: #2A5C86; stroke-width: 3.8; }
.mark .m4 { fill: #2A5C86; }

/* ---- the nav is part of the dark header until that header scrolls out from under it ---- */
.nav { transition: background-color .25s, box-shadow .2s, border-color .25s; }
.nav .btn-primary, .nav .brand, .nav .nav-links a.l { transition: background .25s, color .25s, border-color .25s; }
.nav:not(.solid) { background: var(--night); border-bottom-color: rgba(255,255,255,.08); }
.nav:not(.solid) .brand { color: #fff; }
.nav:not(.solid) .nav-links a.l { color: rgba(255,255,255,.74); }
.nav:not(.solid) .nav-links a.l:hover, .nav:not(.solid) .nav-links a.l[aria-current="page"] { color: #fff; }
.nav:not(.solid) .btn-primary { background: #fff; color: var(--ink); border-color: #fff; }
.nav:not(.solid) .btn-primary:hover { background: #E9EEF3; }
.nav:not(.solid) :focus-visible { outline-color: #fff; }
.nav:not(.solid) .menu > summary { color: #fff; }
.nav:not(.solid) .menu[open] > summary { background: rgba(255,255,255,.1); }
.nav:not(.solid) .mark .m1 { stroke: #5F8FB8; }
.nav:not(.solid) .mark .m2 { stroke: #9CC2E2; }
.nav:not(.solid) .mark .m3 { stroke: #DCEAF6; }
.nav:not(.solid) .mark .m4 { fill: #FFFFFF; }

/* ---- the renewal desk opens: select a policy for why it's there and what happens next ---- */
.desk tr.row { cursor: pointer; }
.desk tr.row:hover td { background: #F7F9FB; }
.desk tr.row.lapsed:hover td { background: #F5E1DD; }
.desk tr.row.open td { background: var(--brand-soft); }
.rowbtn { all: unset; cursor: pointer; font-weight: 600; color: var(--ink); border-radius: 3px; }
.rowbtn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; }
.desk .chev { width: 28px; padding-left: 0; padding-right: 14px; text-align: right; }
.desk td.chev::after { content: ""; display: inline-block; width: 7px; height: 7px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: rotate(45deg); transition: transform .2s; vertical-align: 2px; }
.desk tr.row.open td.chev::after { transform: rotate(-135deg); vertical-align: -1px; }
.desk tr.detail td { background: var(--brand-soft); padding: 2px 18px 16px; border-bottom: 1px solid var(--line-2); }
.desk tr.detail dl { margin: 0; display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 6px 16px; font-size: .88rem; }
.desk tr.detail dt { font-weight: 650; color: var(--ink); }
.desk tr.detail dd { margin: 0; color: var(--text); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 640px) { .desk tr.detail dl { grid-template-columns: 1fr; gap: 2px; } .desk tr.detail dd { margin-bottom: 8px; } .desk .chev { display: none; } }

/* ---- product: the steps of a call, played along with the call itself ---- */
.walk-bar { display: none; align-items: center; gap: 14px; margin-top: 36px; }
.walk.live .walk-bar { display: flex; }
.walk-bar .lbl { font-weight: 600; color: var(--ink); font-size: .95rem; }
.walk-bar .clock { margin-left: auto; }
.walk .steps { margin-top: 28px; }
.steps li { position: relative; }
.steps li::after { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--brand-2); }
.walk.live .steps li { cursor: pointer; }
.stepbtn { all: unset; display: block; font-weight: 650; color: var(--ink); margin-bottom: 6px; cursor: pointer; border-radius: 3px; }
.stepbtn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 3px; }
.steps li.now .stepbtn, .steps li:hover .stepbtn { color: var(--brand); }
.steps q { display: block; margin-top: 12px; padding-left: 10px; border-left: 2px solid var(--line); font-size: .88rem; color: var(--text); font-style: italic; }
.steps li.now q { border-left-color: var(--brand-2); color: var(--ink); }

/* ---- two calls, one at a time (both, stacked, without script) ---- */
.calls .tabs { display: none; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.calls.live .tabs { display: flex; }
.tabs [role="tab"] { font: inherit; font-weight: 600; font-size: .92rem; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--muted); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.tabs [role="tab"]:hover { color: var(--ink); border-color: #CBD3DA; }
.tabs [role="tab"][aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.calls .call + .call { margin-top: 24px; }
.calls.live .call + .call { margin-top: 0; }

/* ---- product: the voice gallery. Generated portraits are labelled on the image itself. ---- */
.voices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.persona { margin: 0; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.persona-img { position: relative; }
.persona-img img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.ai-tag { position: absolute; left: 10px; top: 10px; font-size: .72rem; font-weight: 650; color: var(--ink); background: rgba(255,255,255,.92); border-radius: 4px; padding: 2px 8px; }
.persona figcaption { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.persona b { font-size: 1.1rem; font-weight: 650; color: var(--ink); letter-spacing: -.01em; }
.vmeta { font-size: .85rem; color: var(--muted); }
.vplay { display: flex; gap: 8px; margin-top: 12px; }
.vbtn { font: inherit; font-size: .85rem; font-weight: 600; display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.vbtn::before { content: ""; width: 0; height: 0; border-left: 7px solid currentColor; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.vbtn:hover { border-color: #CBD3DA; }
.vbtn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.vbtn.on::before { width: 7px; height: 9px; border: none; border-left: 2.5px solid currentColor; border-right: 2.5px solid currentColor; box-sizing: border-box; }
.voices-note { margin-top: 24px; font-size: .85rem; color: var(--muted); max-width: 48em; }
@media (max-width: 900px) { .voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }