/* ============================================================
   Minutes Services — Design tokens
   Palette: charcoal ink / cool paper gray / emerald primary / rust accent
   Type: Plus Jakarta Sans (display) + Inter (body) + JetBrains Mono (data/labels)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:#17213B;
  --ink-soft:#2B3654;
  --paper:#F4F6FA;
  --paper-raised:#FFFFFF;
  --brass:#1F5FAD;
  --brass-light:#4F8FE0;
  --slate:#5C6B80;
  --stamp:#8C3B2E;
  --line:#D6DDE8;
  --line-soft:#E5EAF2;

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-mono:'IBM Plex Mono', monospace;

  --max:1180px;
  --radius:10px;
  --radius-sm:6px;
  --radius-lg:16px;
  --shadow-sm:0 2px 8px -2px rgba(23,33,59,.08);
  --shadow-md:0 12px 28px -10px rgba(23,33,59,.16);
  --shadow-lg:0 30px 60px -20px rgba(23,33,59,.22);
  --ease:cubic-bezier(.2,.7,.3,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 32px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

:focus-visible{
  outline:2px solid var(--brass);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  line-height:1.12;
  margin:0;
  color:var(--ink);
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--brass);
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.eyebrow::before{
  content:"";
  width:16px; height:1px;
  background:var(--brass);
  display:inline-block;
}

p{ margin:0; }
.lede{ color:var(--slate); font-size:18px; line-height:1.65; }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:13px 26px;
  border-radius:100px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  cursor:pointer;
  border:1px solid transparent;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.btn-primary:hover{ background:var(--ink-soft); box-shadow:var(--shadow-md); }
.btn-brass{
  background:linear-gradient(155deg, var(--brass-light), var(--brass));
  color:#fff;
  border-color:var(--brass);
}
.btn-brass:hover{ box-shadow:0 14px 28px -10px rgba(31,95,173,.4); }
.btn-ghost{
  background:transparent;
  color:var(--ink);
  border-color:var(--line);
}
.btn-ghost:hover{ border-color:var(--ink); background:var(--paper-raised); }
.btn-lg{ padding:16px 34px; font-size:16px; }
.btn-block{ width:100%; }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* ---------- Header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(244,246,250,.78);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:88px; /* + 1px border = 89px site header, same as the main site and Court Reporting */
  padding:0 32px;
  max-width:1800px;
  margin:0 auto;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-display);
  font-weight:600;
  font-size:20px;
  color:var(--ink);
}
.seal{
  width:34px; height:34px;
  border-radius:50%;
  background:var(--ink);
  border:1.5px solid var(--brass);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--brass-light);
  font-family:var(--font-display);
  font-weight:600;
  font-size:14px;
  flex:none;
}
.brand sup{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--brass);
  margin-left:2px;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:34px;
}
.main-nav a{
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-soft);
  transition:color .15s ease;
  position:relative;
}
.main-nav a:hover{ color:var(--ink); }
.main-nav a.active{ color:var(--ink); }
.main-nav a.active::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-19px;
  height:2px;
  background:var(--brass);
}

.header-actions{
  display:flex;
  align-items:center;
  gap:18px;
}
.header-actions .login{
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-soft);
}
.header-actions .login:hover{ color:var(--ink); }

.nav-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{
  display:block;
  width:22px;
  height:2px;
  background:var(--ink);
  margin:5px 0;
}

/* ---------- Site greeting ("Good Evening! Ashburn") ----------
   Injected by /ai-minutes/script/site-greeting.js into the app pages'
   .app-topbar and the public pages' .top-header-right. */
.topbar-greeting{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--slate);
  white-space:nowrap;
}
.topbar-greeting-icon{
  display:inline-flex;
  color:var(--brass);
}
.app-topbar .topbar-greeting{ margin-left:auto; }
.top-header .topbar-greeting{
  font-size:inherit;
  color:var(--paper);
}
.top-header .topbar-greeting-icon{ color:var(--brass-light); }

/* ---------- Top header (contact bar) ---------- */
.top-header{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12.5px;
}
.top-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:9px 32px;
  max-width:1800px;
}
.top-contact{
  display:flex;
  align-items:center;
  gap:24px;
  list-style:none;
  margin:0; padding:0;
}
.top-contact li{
  display:flex;
  align-items:center;
  gap:7px;
}
.top-contact a{
  color:var(--paper);
  opacity:.9;
  transition:opacity .15s ease, color .15s ease;
}
.top-contact a:hover{ opacity:1; color:var(--brass-light); }
.top-icon{ width:13px; height:13px; flex:none; color:var(--brass-light); }
.top-home{ display:flex; align-items:center; }
.top-home .top-icon{ width:17px; height:17px; }
.top-home:hover .top-icon{ color:var(--paper); }

.top-header-right{
  display:flex;
  align-items:center;
  gap:22px;
}
.top-social{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0; padding:0;
}
.top-social a{
  width:22px; height:22px;
  border-radius:50%;
  border:1px solid rgba(244,246,250,.28);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-display);
  font-size:11px;
  font-weight:600;
  color:var(--paper);
  opacity:.85;
  transition:opacity .15s ease, border-color .15s ease, color .15s ease;
}
.top-social a:hover{ opacity:1; border-color:var(--brass-light); color:var(--brass-light); }

.top-region{ position:relative; }
.top-region-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  color:var(--paper);
  font-family:var(--font-mono);
  font-size:12.5px;
  cursor:pointer;
  opacity:.9;
  padding:0;
}
.top-region-toggle:hover{ opacity:1; }
.top-region-toggle img{ width:16px; height:16px; border-radius:50%; object-fit:cover; }
.top-region-toggle .caret{ width:10px; height:10px; }
.top-region-menu{
  display:none;
  position:absolute;
  right:0; top:calc(100% + 10px);
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:var(--shadow-md);
  min-width:190px;
  padding:6px;
  list-style:none;
  margin:0;
  z-index:120;
}
.top-region:hover .top-region-menu,
.top-region:focus-within .top-region-menu{ display:block; }
.top-region-menu li{ padding:0; }
.top-region-menu a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:6px;
  color:var(--ink-soft);
  font-size:13px;
}
.top-region-menu a:hover{ background:var(--paper); color:var(--ink); }
.top-region-menu img{ width:16px; height:16px; border-radius:50%; object-fit:cover; }

@media (max-width:720px){
  .top-header-row{ padding:8px 20px; }
  .top-contact li:nth-child(3){ display:none; }
}
@media (max-width:560px){
  .top-header-right .top-social{ display:none; }
}

/* ---------- Hero ---------- */
.hero{
  padding:88px 0 96px;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  top:-220px; right:-160px;
  width:640px; height:640px;
  background:radial-gradient(circle, rgba(31,95,173,.16), rgba(31,95,173,0) 70%);
  pointer-events:none;
}
.hero .wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero h1{
  font-size:50px;
  letter-spacing:-.01em;
  margin:20px 0 22px;
}
.hero-copy .lede{ max-width:480px; margin-bottom:34px; }
.hero-ctas{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.hero-note{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--slate);
  margin-top:16px;
}

/* Signature element: the "minutes document" transform card */
.doc-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:6px;
  box-shadow:var(--shadow-lg);
  padding:28px;
  position:relative;
}
.doc-card-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  border-bottom:1px solid var(--line);
  padding-bottom:14px;
  margin-bottom:18px;
}
.doc-card-head .doc-title{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--slate);
}
.doc-card-head .doc-date{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--slate);
}
.doc-transform{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:16px;
  align-items:center;
}
.wave{
  display:flex;
  align-items:flex-end;
  gap:3px;
  height:64px;
  padding:6px 4px;
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:8px;
}
.wave span{
  flex:1;
  background:var(--brass-light);
  border-radius:1px;
}
.wave-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--slate);
  margin-top:8px;
}
.doc-arrow{
  color:var(--brass);
  font-size:20px;
}
.doc-minutes{
  background:var(--paper);
  border:1px solid var(--line-soft);
  border-radius:8px;
  padding:14px 14px 16px;
  font-size:12.5px;
}
.doc-minutes .agenda-item{
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--brass);
  letter-spacing:.04em;
  margin-bottom:6px;
}
.doc-minutes .agenda-line{
  height:6px;
  background:var(--line-soft);
  border-radius:4px;
  margin-bottom:6px;
}
.doc-minutes .agenda-line.short{ width:60%; }
.doc-stamp{
  margin-top:20px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1.5px solid var(--stamp);
  color:var(--stamp);
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:6px;
  transform:rotate(-2deg);
}
.doc-footer-note{
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--slate);
}

/* ---------- Trust bar ---------- */
.trust{
  padding:36px 0 60px;
  border-top:1px solid var(--line-soft);
}
.trust-label{
  text-align:center;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--slate);
  margin-bottom:28px;
}
.trust-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:14px;
}
.trust-chip{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--ink-soft);
  border:1px solid var(--line);
  border-radius:20px;
  padding:8px 16px;
  background:var(--paper-raised);
}

/* ---------- Stats ---------- */
.stats{
  background:var(--ink);
  color:var(--paper);
  padding:52px 0;
}
.stats-row{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  text-align:center;
}
.stat-num{
  font-family:var(--font-display);
  font-size:42px;
  color:var(--brass-light);
}
.stat-label{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:#B9C0D2;
  margin-top:6px;
  letter-spacing:.03em;
}

/* ---------- Section shell ---------- */
.section{
  padding:104px 0;
}
.section-head{
  max-width:640px;
  margin-bottom:56px;
}
.section-head h2{
  font-size:36px;
  margin-top:16px;
}
.section-head .lede{ margin-top:16px; }
.section-head.center{
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

/* ---------- How it works (zigzag timeline; classes prefixed hw-) ---------- */
.hw-how{ --band-a:#EAF1FB; --band-b:#DCE8F8; --spine:#9DB9E6; background:linear-gradient(180deg,var(--band-a),var(--band-b)); padding:88px 24px 96px; }

.hw-tl{ list-style:none; margin:0 auto; padding:0; max-width:1020px; position:relative; display:grid; gap:64px; }
.hw-tl::before{ content:""; position:absolute; top:22px; bottom:22px; left:50%; width:2px; margin-left:-1px;
  background:linear-gradient(180deg,var(--spine),var(--brass-light) 50%,var(--spine)); border-radius:2px; }
.hw-tl-row{ display:grid; grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr); gap:0 40px; align-items:center;
  grid-template-areas:"copy node fig"; }
.hw-tl-row:nth-child(even){ grid-template-areas:"fig node copy"; }
.hw-copy{ grid-area:copy; }
.hw-node{ grid-area:node; width:44px; height:44px; border-radius:50%; background:var(--brass); color:#fff; display:grid; place-items:center;
  font:600 19px var(--font-display); box-shadow:0 0 0 7px var(--band-a), 0 6px 14px -4px rgba(31,95,173,.5); position:relative; }
.hw-tl-row .hw-shot{ grid-area:fig; }
.hw-copy h3{ font-family:var(--font-display); font-weight:600; letter-spacing:-.01em; font-size:26px; line-height:1.2; margin:0 0 12px; text-wrap:balance; }
.hw-copy p{ color:var(--ink-soft); font-size:16px; line-height:1.65; max-width:410px; }
.hw-tl-row:nth-child(odd) .hw-copy{ justify-self:end; text-align:right; }
.hw-tl-row:nth-child(odd) .hw-copy p{ margin-left:auto; }

/* ---------- pictures of the screens (same as the first mock-up) ---------- */
.hw-shot{
  position:relative; border:1px solid var(--line); border-radius:12px; background:var(--paper);
  box-shadow:0 10px 24px -14px rgba(23,33,59,.35), 0 0 0 6px rgba(255,255,255,.55); overflow:hidden; aspect-ratio:16/10; padding:12px;
  font-size:10px; color:var(--ink); text-align:left;
}
.hw-bar{ height:6px; border-radius:3px; background:var(--line); }
.hw-bar.hw-s{ width:38%; } .hw-bar.hw-m{ width:64%; } .hw-bar.hw-l{ width:88%; } .hw-bar.hw-full{ width:100%; }
.hw-bar.hw-dk{ background:#B9C3D6; } .hw-bar.hw-blue{ background:var(--brass-light); }
.hw-stack{ display:grid; gap:6px; }
.hw-chip{ display:inline-flex; align-items:center; gap:4px; border-radius:100px; padding:3px 8px; font:600 9px var(--font-body); background:#E6EEFB; color:var(--brass); white-space:nowrap; }
.hw-chip.hw-dark{ background:var(--ink); color:#fff; }
.hw-chip.hw-open{ background:#fff; color:var(--slate); border:1px dashed #9AA9C2; }
.hw-win{ background:#fff; border:1px solid var(--line-soft); border-radius:8px; }
.hw-win-top{ display:flex; gap:4px; padding:6px 8px; border-bottom:1px solid var(--line-soft); align-items:center; }
.hw-win-top i{ width:6px; height:6px; border-radius:50%; background:var(--line); display:block; }
.hw-prog{ height:5px; border-radius:3px; background:var(--line-soft); overflow:hidden; }
.hw-prog i{ display:block; height:100%; background:var(--brass); border-radius:3px; }

/* 1 agenda */
.hw-ag{ display:grid; grid-template-columns:1.5fr 1fr; gap:10px; height:100%; }
.hw-ag .hw-win{ padding:10px; }
.hw-ag-title{ font:600 11px var(--font-display); margin-bottom:8px; }
.hw-ag-row{ display:flex; gap:6px; align-items:center; padding:5px 0; border-bottom:1px dashed var(--line-soft); }
.hw-ag-row b{ font:500 9px var(--font-mono); color:var(--brass); width:12px; }
.hw-ag-row .hw-bar{ flex:1; }
.hw-drop{ border:1.5px dashed var(--brass-light); border-radius:8px; background:#F1F6FE; display:grid; place-content:center; text-align:center; gap:6px; padding:8px; }
.hw-drop .hw-ico{ width:24px; height:24px; margin:0 auto; border-radius:50%; background:var(--brass); color:#fff; display:grid; place-items:center; font:700 13px var(--font-body); }
.hw-drop span{ font-weight:600; color:var(--brass); font-size:9px; }

/* 2 sample minutes / template */
.hw-tpl{ display:grid; grid-template-columns:1fr 1.25fr; gap:10px; height:100%; }
.hw-tpl .hw-win{ padding:10px; display:grid; gap:8px; align-content:start; }
.hw-tpl-h{ font:700 8.5px var(--font-body); letter-spacing:.06em; color:var(--slate); }
.hw-sample{ display:grid; grid-template-columns:22px 1fr; gap:8px; align-items:center; border:1px solid var(--line-soft); border-radius:7px; padding:7px; }
.hw-sample .hw-ic{ width:22px; height:26px; border-radius:4px; background:#2B579A; color:#fff; display:grid; place-items:center; font:700 7px var(--font-mono); }
.hw-sample .hw-nm{ font-weight:600; font-size:9px; margin-bottom:4px; }
.hw-tpl-list{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.hw-tp{ border:1.5px solid var(--line); border-radius:7px; padding:6px 5px 7px; background:#fff; display:grid; gap:4px; position:relative; }
.hw-tp.hw-on{ border-color:var(--brass); background:#F1F6FE; }
.hw-tp.hw-on::after{ content:"✓"; position:absolute; top:-6px; right:-6px; width:14px; height:14px; border-radius:50%; background:var(--brass); color:#fff; font:700 9px/14px var(--font-body); text-align:center; }
.hw-tp b{ font:700 7px var(--font-body); text-align:center; letter-spacing:.03em; }
.hw-tp .hw-bar{ height:4px; }

/* 3 recording */
.hw-rec{ display:grid; gap:8px; height:100%; grid-template-rows:auto 1fr; }
.hw-tabs{ display:flex; gap:5px; }
.hw-tab{ border:1px solid var(--line); background:#fff; border-radius:100px; padding:3px 9px; font:600 9px var(--font-body); color:var(--slate); }
.hw-tab.hw-on{ background:var(--ink); border-color:var(--ink); color:#fff; }
.hw-files{ background:#fff; border:1px solid var(--line-soft); border-radius:8px; padding:9px; display:grid; gap:8px; align-content:start; }
.hw-file{ display:grid; grid-template-columns:22px 1fr auto; gap:8px; align-items:center; }
.hw-file .hw-ic{ width:22px; height:22px; border-radius:5px; background:#E6EEFB; color:var(--brass); display:grid; place-items:center; font:700 8px var(--font-mono); }
.hw-file .hw-ic.hw-z{ background:#E3EEFF; } .hw-file .hw-ic.hw-y{ background:#FBE3E0; color:#B3261E; }
.hw-file .hw-nm{ font-weight:600; font-size:9.5px; margin-bottom:4px; }
.hw-file .hw-st{ font:500 8.5px var(--font-mono); color:var(--slate); }

/* 4 speakers */
.hw-spk{ display:grid; grid-template-columns:1.6fr 1fr; gap:10px; height:100%; }
.hw-tr{ padding:8px 10px; display:grid; gap:8px; align-content:start; }
.hw-tr-row{ display:grid; grid-template-columns:30px 1fr; gap:8px; }
.hw-tr-row time{ font:500 8.5px var(--font-mono); color:var(--slate); padding-top:2px; }
.hw-tr-row .hw-who{ margin-bottom:4px; display:flex; gap:5px; align-items:center; }
.hw-tr-row.hw-active{ background:#F1F6FE; margin:0 -6px; padding:4px 6px; border-radius:6px; }
.hw-side{ display:grid; gap:8px; align-content:start; }
.hw-vid{ aspect-ratio:16/10; border-radius:8px; background:linear-gradient(160deg,#2B3654,#17213B); position:relative; }
.hw-vid::after{ content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%); border-left:12px solid #fff; border-top:7px solid transparent; border-bottom:7px solid transparent; opacity:.9; }
.hw-vid i{ position:absolute; left:8px; right:8px; bottom:7px; height:3px; border-radius:2px; background:rgba(255,255,255,.3); }
.hw-vid i::before{ content:""; position:absolute; inset:0 60% 0 0; background:var(--brass-light); border-radius:2px; }
.hw-sugg{ background:#fff; border:1px solid var(--line-soft); border-radius:8px; padding:7px 8px; display:grid; gap:5px; }
.hw-sugg .hw-row{ display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:9px; }
.hw-ok{ color:#1E7B4B; font-weight:700; }

/* 5 minutes */
.hw-min{ display:grid; grid-template-columns:1.5fr 1fr; gap:10px; height:100%; }
.hw-doc{ padding:10px 12px; display:grid; gap:6px; align-content:start; }
.hw-doc .hw-tb{ display:flex; gap:4px; padding-bottom:6px; border-bottom:1px solid var(--line-soft); margin-bottom:2px; }
.hw-doc .hw-tb i{ width:14px; height:8px; border-radius:2px; background:var(--line); display:block; }
.hw-doc h4{ margin:0; font:600 11px var(--font-display); text-align:center; }
.hw-doc .hw-sub{ text-align:center; font-size:8.5px; color:var(--slate); margin-bottom:2px; }
.hw-doc .hw-hd{ font:700 8.5px var(--font-body); letter-spacing:.06em; margin-top:2px; }
.hw-hl{ background:#CFE1FB; border-radius:2px; height:6px; }
.hw-export{ display:grid; gap:8px; align-content:start; }
.hw-exp{ background:#fff; border:1px solid var(--line-soft); border-radius:8px; padding:8px; display:flex; gap:8px; align-items:center; font-weight:600; font-size:9.5px; }
.hw-exp i{ font:700 8px var(--font-mono); font-style:normal; border-radius:4px; padding:4px 5px; color:#fff; }
.hw-exp .hw-w{ background:#2B579A; } .hw-exp .hw-p{ background:#C0392B; }
.hw-ai{ background:#fff; border:1px solid var(--line-soft); border-radius:8px; padding:8px; display:grid; gap:6px; }
.hw-ai .hw-chip{ justify-self:start; }

/* ---------- narrow screens: spine moves to the left ---------- */
@media (max-width:820px){
  .hw-how{ padding:64px 16px 72px; }
  .hw-tl{ gap:48px; }
  .hw-tl::before{ left:22px; }
  .hw-tl-row, .hw-tl-row:nth-child(even){ grid-template-columns:44px minmax(0,1fr); gap:14px 16px; grid-template-areas:"node copy" ". fig"; align-items:start; }
  .hw-tl-row:nth-child(odd) .hw-copy{ justify-self:start; text-align:left; }
  .hw-tl-row:nth-child(odd) .hw-copy p{ margin-left:0; }
  .hw-node{ margin-top:-2px; }
  .hw-tpl{ grid-template-columns:.8fr 1.6fr; gap:8px; }
  .hw-tpl .hw-win{ padding:8px; }
  .hw-tpl-list{ gap:4px; }
  .hw-tp{ padding:6px 3px 7px; }
  .hw-tp b{ font-size:6.5px; letter-spacing:0; }
  .hw-copy h3{ font-size:23px; }
}
.hw-how{ margin-bottom:104px; }
.hw-how .section-head h2{ text-wrap:balance; }

/* ---------- Feature rows ---------- */
.feature-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
  padding:64px 0;
  border-bottom:1px solid var(--line-soft);
}
.feature-row:first-of-type{ padding-top:0; }
.feature-row:last-of-type{ border-bottom:none; }
.feature-row.reverse .feature-visual{ order:2; }
.feature-row.reverse .feature-copy{ order:1; }
.feature-copy h3{
  font-size:28px;
  margin:14px 0 16px;
}
.feature-copy p{
  color:var(--slate);
  font-size:16px;
  line-height:1.7;
}
.feature-copy .btn{ margin-top:22px; }
.feature-visual{
  aspect-ratio:4/3;
  border-radius:10px;
  border:1px solid var(--line);
  background:linear-gradient(155deg,#E8EDF5,#F4F6FA 60%);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.feature-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.feature-visual.icon-visual img{
  width:62%;
  height:62%;
  object-fit:contain;
}
.feature-visual .glyph{
  font-family:var(--font-display);
  font-size:120px;
  color:var(--brass);
  opacity:.16;
}
.feature-visual .mini-doc{
  position:relative;
  width:72%;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:8px;
  padding:16px;
  box-shadow:0 20px 40px -16px rgba(23,33,59,.18);
}
.mini-doc .agenda-item{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--brass);
  margin-bottom:8px;
  letter-spacing:.05em;
}
.mini-doc .agenda-line{
  height:5px;
  background:var(--line-soft);
  border-radius:4px;
  margin-bottom:7px;
}
.mini-doc .agenda-line.w60{ width:60%; }
.mini-doc .agenda-line.w80{ width:80%; }

/* ---------- Testimonial ---------- */
.testimonial{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:8px;
  padding:56px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:36px;
  align-items:center;
}
.testimonial-avatar{
  width:76px; height:76px;
  border-radius:50%;
  background:var(--ink);
  color:var(--brass-light);
  font-family:var(--font-display);
  font-size:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.testimonial blockquote{
  font-family:var(--font-display);
  font-size:23px;
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
  margin:0 0 18px;
}
.testimonial cite{
  font-style:normal;
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--slate);
}
.testimonial cite b{ color:var(--ink); font-weight:600; }

/* ---------- FAQ ---------- */
.faq-list{
  border-top:1px solid var(--line);
  max-width:820px;
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-q{
  width:100%;
  background:none;
  border:none;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:22px 4px;
  text-align:left;
  cursor:pointer;
  font-family:var(--font-body);
  font-size:17px;
  font-weight:600;
  color:var(--ink);
}
.faq-q .plus{
  font-family:var(--font-mono);
  font-size:18px;
  color:var(--brass);
  transition:transform .2s ease;
  flex:none;
}
.faq-item.open .faq-q .plus{ transform:rotate(45deg); }
.faq-a{
  max-height:0;
  overflow:hidden;
  transition:max-height .25s ease;
}
.faq-a p{
  color:var(--slate);
  padding:0 4px 22px;
  font-size:15px;
  line-height:1.7;
  max-width:640px;
}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--ink);
  border-radius:10px;
  padding:64px 56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:40px;
  color:var(--paper);
}
.cta-banner h2{
  color:var(--paper);
  font-size:32px;
  max-width:440px;
}
.cta-banner p{
  color:#B9C0D2;
  margin-top:10px;
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);
  color:var(--paper);
  border-top:1px solid rgba(244,246,250,.12);
  padding:72px 0 32px;
  margin-top:40px;
}
.footer-top{
  display:grid;
  grid-template-columns:1.4fr repeat(3,1fr);
  gap:40px;
  padding-bottom:56px;
}
.footer-brand .brand{ margin-bottom:14px; color:var(--paper); }
.footer-brand .seal{
  background:var(--brass);
  border-color:var(--brass-light);
  color:var(--ink);
}
.footer-brand-logo{
  width:34px;
  height:34px;
  flex-shrink:0;
}
.footer-brand p{
  color:rgba(244,246,250,.62);
  font-size:14px;
  max-width:260px;
  line-height:1.7;
}
.footer-col h4{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass-light);
  margin-bottom:16px;
}
.footer-col ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer-col a{
  color:rgba(244,246,250,.82);
  font-size:14.5px;
}
.footer-col a:hover{ color:var(--brass-light); }
.footer-bottom{
  border-top:1px solid rgba(244,246,250,.12);
  padding-top:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}
.footer-bottom p{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:rgba(244,246,250,.55);
}
.footer-legal{
  display:flex;
  gap:22px;
}
.footer-legal a{
  font-family:var(--font-mono);
  font-size:12.5px;
  color:rgba(244,246,250,.55);
}
.footer-legal a:hover{ color:var(--paper); }

/* Footer: "About" strip above the link columns */
.footer-about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  padding-bottom:44px;
  margin-bottom:44px;
  border-bottom:1px solid rgba(244,246,250,.12);
}
.footer-about-col h4{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass-light);
  margin-bottom:14px;
}
.footer-about-col p{
  color:rgba(244,246,250,.7);
  font-size:14px;
  line-height:1.75;
  max-width:560px;
}
.footer-about-col p + p{ margin-top:12px; }
.footer-more-links{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:16px; }
.footer-about-col > .footer-more{ display:inline-block; margin-top:16px; }
.footer-more{
  color:var(--paper);
  font-size:14px;
  font-weight:600;
  border-bottom:1px solid rgba(79,143,224,.55);
  padding-bottom:1px;
}
.footer-more:hover{ color:var(--brass-light); border-bottom-color:var(--brass-light); }
@media (max-width:820px){
  .footer-about{ grid-template-columns:1fr; gap:36px; }
}

.footer-subhead{ margin-top:26px; }
.footer-addr h5{
  font-family:var(--font-body);
  font-weight:600;
  font-size:13.5px;
  color:var(--paper);
  margin:0 0 6px;
}
.footer-addr h5:not(:first-child){ margin-top:18px; }
.footer-addr p{
  color:rgba(244,246,250,.62);
  font-size:13px;
  line-height:1.7;
  margin:0;
}
.footer-addr a{ color:rgba(244,246,250,.82); }
.footer-addr a:hover{ color:var(--brass-light); }

.footer-post{ display:block; color:rgba(244,246,250,.82); }
.footer-post:hover{ color:var(--brass-light); }
.footer-post .post-title{
  display:block;
  font-size:13.5px;
  line-height:1.45;
}
.footer-post .post-date{
  display:block;
  font-family:var(--font-mono);
  font-size:11px;
  color:rgba(244,246,250,.5);
  margin-top:3px;
}
.footer-phone .post-date{
  font-family:var(--font-mono);
  font-size:11px;
  color:rgba(244,246,250,.5);
  margin-left:6px;
}

/* ---------- Page header (inner pages) ---------- */
.page-hero{
  padding:72px 0 64px;
  border-bottom:1px solid var(--line-soft);
}
.page-hero h1{ font-size:44px; margin-top:16px; }
.page-hero .lede{ max-width:600px; margin-top:18px; }

/* ---------- Pricing ---------- */
.pricing-toggle-note{
  font-family:var(--font-mono);
  font-size:13px;
  color:var(--slate);
}
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}
.price-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:8px;
  padding:36px 30px;
  display:flex;
  flex-direction:column;
}
.price-card.featured{
  border-color:var(--brass);
  box-shadow:0 20px 44px -18px rgba(31,95,173,.35);
  position:relative;
}
.price-card.featured::before{
  content:"Most chosen";
  position:absolute;
  top:-13px;
  left:30px;
  background:var(--brass);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:20px;
}
/* billing.html: the plan card matching the account's actual current
   subscription (set by billing-data.js's markCurrentPlan()) -- placed after
   .featured::before so it wins the ribbon text on the "Most chosen" card
   too, if that happens to be the one they're already on. */
.price-card.current-plan{
  border-color:var(--brass);
  position:relative;
}
.price-card.current-plan::before{
  content:"Current plan";
  position:absolute;
  top:-13px;
  left:30px;
  background:var(--brass);
  color:#fff;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:5px 12px;
  border-radius:20px;
}
.price-card.current-plan [data-choose-plan]{
  opacity:.55;
  cursor:default;
  pointer-events:none;
}
.price-name{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass);
}
.price-amount{
  font-family:var(--font-display);
  font-size:44px;
  margin:14px 0 4px;
}
.price-amount > span:not([hidden]){ display:block; }
.price-amount .period{
  font-family:var(--font-mono);
  font-size:14px;
  color:var(--slate);
  font-weight:400;
}
.price-amount .price-note{
  display:block;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--slate);
  font-weight:400;
  margin-top:6px;
}
.price-amount .price-note s{
  color:var(--slate);
}
.price-amount .price-hint{
  display:block;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:#2FA84F;
  font-weight:600;
  margin-top:8px;
}
.price-amount .price-save{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:#2FA84F;
  border-radius:20px;
  padding:5px 12px;
  margin-top:10px;
}
.price-desc{
  color:var(--slate);
  font-size:14.5px;
  margin-bottom:24px;
}
.price-features{
  list-style:none;
  margin:0 0 30px;
  padding:20px 0 0;
  border-top:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.price-features li{
  font-size:14.5px;
  color:var(--ink-soft);
  display:flex;
  gap:10px;
}
.price-features li::before{
  content:"✓";
  color:var(--brass);
  font-weight:600;
}

/* ---------- Pricing: trust badge & billing toggle ---------- */
.trust-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.badge-nocc{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.03em;
  color:var(--brass);
  background:var(--paper-raised);
  border:1px solid var(--brass);
  border-radius:20px;
  padding:6px 14px;
}
.badge-nocc::before{
  content:"✓";
  font-weight:700;
}
.billing-toggle-row{
  display:flex;
  justify-content:center;
  margin-bottom:40px;
}
.billing-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:30px;
  padding:4px;
}
.billing-option{
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-mono);
  font-size:13.5px;
  color:var(--slate);
  background:none;
  border:none;
  border-radius:24px;
  padding:9px 20px;
  cursor:pointer;
}
.billing-option.active{
  background:var(--brass);
  color:#fff;
}
.billing-option .save-badge{
  font-size:11px;
  letter-spacing:.03em;
  background:#2FA84F;
  color:#fff;
  border-radius:20px;
  padding:2px 8px;
}
.billing-option.active .save-badge{
  background:rgba(255,255,255,.22);
}

/* ---------- Product tour extras ---------- */
.tour-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}
.tour-card{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:10px;
  padding:28px;
}
.tour-card .glyph-num{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--brass);
}
.tour-card h3{
  font-size:19px;
  margin:14px 0 10px;
}
.tour-card p{
  color:var(--slate);
  font-size:14.5px;
  line-height:1.65;
}
.integrations-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.integration-chip{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--line);
  background:var(--paper-raised);
  border-radius:10px;
  padding:14px 20px;
  font-weight:600;
  font-size:14.5px;
}
.integration-chip .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--brass);
}

/* ---------- Blog ---------- */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.blog-card{
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
  background:var(--paper-raised);
  display:flex;
  flex-direction:column;
}
.blog-card-media{
  aspect-ratio:16/10;
  background:linear-gradient(155deg,#1B2A4A,#3A4A70);
  display:flex;
  align-items:center;
  justify-content:center;
}
.blog-card-media span{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--brass-light);
}
.blog-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.blog-more{
  text-align:center;
  margin-top:36px;
}
.blog-card-body{
  padding:22px 22px 26px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.blog-date{
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--slate);
  margin-bottom:10px;
}
.blog-card-body h3{
  font-size:19px;
  margin-bottom:10px;
}
.blog-card-body p{
  color:var(--slate);
  font-size:14px;
  line-height:1.65;
  flex:1;
}
.blog-read{
  margin-top:16px;
  font-family:var(--font-mono);
  font-size:12.5px;
  color:var(--brass);
  font-weight:500;
}
.blog-empty-note{
  margin-top:56px;
  border:1px dashed var(--line);
  border-radius:10px;
  padding:36px;
  text-align:center;
  color:var(--slate);
  font-family:var(--font-mono);
  font-size:13px;
}

/* ---------- Newsletter ---------- */
.newsletter{
  background:var(--paper-raised);
  border:1px solid var(--line);
  border-radius:8px;
  padding:44px 48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center;
}
.newsletter h3{ font-size:24px; }
.newsletter p{ color:var(--slate); margin-top:10px; font-size:14.5px; }
.newsletter-form{
  display:flex;
  gap:10px;
}
.newsletter-form input{
  flex:1;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:6px;
  font-family:var(--font-body);
  font-size:14.5px;
  background:var(--paper);
  color:var(--ink);
}
.newsletter-form input:focus{ outline:2px solid var(--brass); outline-offset:1px; }

/* ---------- Home header brand (logo + wordmark + tagline) ----------
   Matches the main Minutes Services site's header (img/logo-225x225.png +
   float-left icon with a stacked wordmark/tagline beside it) -- scoped to
   .navbar-brand so it doesn't affect the "SM seal" .brand used in the app
   sidebar, the footer, and the other marketing pages' headers. */
.navbar-brand{
  display:block;
  gap:0;
}
.ms-logo{
  float:left;
  width:50px;
  height:50px;
  margin-right:12px;
}
.navbar-brand .brand-name{
  display:block;
  font-family:Verdana, Georgia, serif;
  font-size:22px;
  font-weight:700;
  line-height:1.15;
  color:#159EEE;
  text-transform:uppercase;
  margin:2px 0 0;
}
.navbar-brand .brand-tagline{
  display:block;
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:11px;
  font-weight:400;
  color:#333;
  letter-spacing:2.5px;
  text-transform:uppercase;
  margin-top:3px;
}
/* Keep "MINUTES SERVICES" on one line once there's room for it -- below
   this, .main-nav still shows in full (it collapses to the hamburger menu
   at 720px, separately), so let the brand stay shrinkable there instead of
   forcing the nav links to wrap. */
@media (min-width: 1024px){
  .navbar-brand{ flex:none; }
  .navbar-brand .brand-name, .navbar-brand .brand-tagline{ white-space:nowrap; }
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ order:-1; }
  .stats-row{ grid-template-columns:1fr; gap:32px; }
  .feature-row{ grid-template-columns:1fr; gap:32px; }
  .feature-row.reverse .feature-visual{ order:0; }
  .feature-row.reverse .feature-copy{ order:0; }
  .footer-top{ grid-template-columns:1fr 1fr; }
  .pricing-grid{ grid-template-columns:1fr; }
  .tour-grid{ grid-template-columns:1fr 1fr; }
  .blog-grid{ grid-template-columns:1fr 1fr; }
  .newsletter{ grid-template-columns:1fr; }
  .cta-banner{ flex-direction:column; text-align:center; }
}

@media (max-width: 720px){
  .wrap{ padding:0 20px; }
  .main-nav, .header-actions .login{ display:none; }
  .nav-toggle{ display:block; }
  .hero{ padding:48px 0 56px; }
  .hero h1{ font-size:36px; }
  .section{ padding:64px 0; }
  .section-head h2{ font-size:28px; }
  .testimonial{ grid-template-columns:1fr; padding:32px; text-align:left; }
  .footer-top{ grid-template-columns:1fr; }
  .tour-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .page-hero h1{ font-size:32px; }
}

/* Mobile nav drawer */
.mobile-nav{
  display:none;
  flex-direction:column;
  gap:2px;
  padding:8px 20px 20px;
  border-top:1px solid var(--line-soft);
}
.mobile-nav.open{ display:flex; }
.mobile-nav a{
  padding:12px 0;
  font-size:15px;
  font-weight:500;
  color:var(--ink-soft);
  border-bottom:1px solid var(--line-soft);
}
.mobile-nav .btn{ margin-top:14px; }

/* ---------- Product walkthrough video (home page + product tour) ---------- */
.demo-section{ padding-top:12px; }
.demo-frame{
  position:relative;
  max-width:1000px;
  margin:44px auto 0;
  border-radius:16px;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line);
  background:#17213B;
  aspect-ratio:16/9;
}
.demo-frame img, .demo-frame video{ width:100%; height:100%; object-fit:cover; display:block; background:#17213B; }
.demo-frame:not(.playing)::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,33,59,0) 55%, rgba(23,33,59,.5));
  pointer-events:none;
}
.demo-play{
  position:absolute; z-index:2; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:92px; height:92px; border-radius:50%;
  border:0; cursor:pointer;
  background:linear-gradient(155deg, var(--brass-light), var(--brass));
  box-shadow:0 18px 40px -12px rgba(31,95,173,.6);
  display:flex; align-items:center; justify-content:center;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease);
}
.demo-play:hover, .demo-play:focus-visible{ transform:translate(-50%,-50%) scale(1.06); box-shadow:0 22px 46px -12px rgba(31,95,173,.7); }
.demo-play svg{ width:34px; height:34px; margin-left:5px; fill:#fff; }
.demo-foot{ text-align:center; margin-top:26px; color:var(--slate); font-size:14.5px; }
.demo-foot a{ color:var(--brass); font-weight:600; text-decoration:underline; }

.hero-demo{
  display:inline-flex; align-items:center; gap:10px;
  margin:18px 0 0;
  font-weight:600; font-size:15px; color:var(--ink);
}
.hero-demo .dot{
  width:34px; height:34px; border-radius:50%;
  background:linear-gradient(155deg, var(--brass-light), var(--brass));
  display:inline-flex; align-items:center; justify-content:center;
}
.hero-demo svg{ width:13px; height:13px; fill:#fff; margin-left:2px; }
.hero-demo em{ font-style:normal; color:var(--slate); font-weight:500; }
.hero-demo:hover{ color:var(--brass); }

@media (max-width: 640px){
  .demo-play{ width:68px; height:68px; }
  .demo-play svg{ width:26px; height:26px; }
}

/* ---------- Product tour: Meet Winston (AI minute-taker) ---------- */
.winston-grid{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:48px; align-items:center; }
.winston-copy h2{ margin:10px 0 0; }
.winston-copy .lede{ margin-top:16px; }
.winston-points{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:18px; }
.winston-points li{ display:flex; gap:14px; color:var(--slate); font-size:15px; line-height:1.6; }
.winston-points strong{ color:var(--ink); }
.winston-ico{ flex:none; width:36px; height:36px; border-radius:8px; background:rgba(31,95,173,.1); color:var(--brass);
  display:flex; align-items:center; justify-content:center; }
.winston-ico svg{ width:20px; height:20px; }
.demo-frame.winston-video{ margin:0; width:100%; max-width:none; }
/* Winston's poster is a meeting screen: keep it bright (the play button stays centred, over empty tile). */
.demo-frame.winston-video:not(.playing)::after{ display:none; }
.winston-steps{ list-style:none; margin:48px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.winston-steps li{ background:var(--paper-raised); border:1px solid var(--line); border-radius:10px; padding:24px; }
.winston-steps h3{ font-size:18px; margin:12px 0 6px; }
.winston-steps p{ color:var(--slate); font-size:14.5px; line-height:1.6; }
.winston-n{ width:28px; height:28px; border-radius:50%; background:rgba(31,95,173,.1); color:var(--brass); font-weight:600; font-size:13px;
  display:flex; align-items:center; justify-content:center; }
.winston-cta{ margin-top:32px; display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.winston-cta span{ color:var(--slate); font-size:14.5px; }
@media (max-width:820px){
  .winston-grid{ grid-template-columns:1fr; gap:32px; }
  .winston-steps{ grid-template-columns:1fr; }
}