/* ============================================================
   VocoBook, cinematic direction.
   Built to eight rules measured off waymo.com:
   1  Full-bleed colour bands, a 1224px column inside 11.9vw gutters
   2  Display type is LIGHT (400) and huge, line-height ~1.0, tracking -.04em
   3  One accent blue does two jobs: a whole band, and the giant numeral
   4  Film first, words second. Headline floats on the film, no box
   5  A deep-blue statement card overlaps the bottom of the film
   6  Proof is one enormous number with small words set around it
   7  Card rails run 16:9 and bleed off the right edge
   8  Eyebrows, labels and attributions are mono, 13px, tracking positive
   ============================================================ */

:root{
  --ink:        #23233c;   /* body text on white. A blue black, never #000 */
  --ink-soft:   #5f6575;
  --black:      #000000;   /* the film band */
  --deep:       #050b1e;   /* the stats band */
  --blue:       #005de6;   /* VocoBook accent. Waymo's #0077ff seat */
  --blue-deep:  #003a94;   /* the statement card */
  --cyan:       #01cce4;   /* signal only, never text. Waymo's green seat */
  --paper:      #ffffff;
  --grey:       #f2f2f2;
  --line:       rgba(35,35,60,.16);
  --line-light: rgba(255,255,255,.22);

  --gutter: clamp(20px, 11.9vw, 190px);
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-weight:400; font-size:17px; line-height:1.55;
  letter-spacing:-.011em; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,video{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ margin:0; font-weight:400; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.shell{ width:100%; max-width:1600px; margin:0 auto; padding-inline:var(--gutter); }
.skip{ position:absolute; left:-9999px; }
.skip:focus{ left:16px; top:16px; background:#fff; padding:10px 14px; z-index:99; }

/* Rule 8: mono is the only place tracking goes positive */
.mono{ font-family:var(--mono); font-size:13px; letter-spacing:.09em; font-weight:400; }

/* ---------- nav ---------- */
.topnav{ position:sticky; top:0; z-index:40; background:var(--paper); }
.topnav-in{ display:flex; align-items:center; gap:32px; height:100px; }
.wordmark{
  display:inline-flex; align-items:center; gap:12px;
  font-weight:700; font-size:20px; letter-spacing:.24em; color:var(--ink);
  white-space:nowrap;
}
/* The app mark, carried over from the old landing: a rounded square in the
   brand gradient with three bars for a voice. The square is CSS so the
   gradient is declared once, rather than an SVG <linearGradient> whose id
   would be duplicated by the second lockup in the footer. */
.mark{
  flex:0 0 auto; width:36px; height:36px; border-radius:12px;
  background:linear-gradient(145deg,#14b8f4,#0b6ae8);
  display:grid; place-items:center;
  box-shadow:0 8px 20px rgba(11,115,234,.28);
}
.mark svg{ width:19px; height:23px; fill:#fff; }
.topnav-links{ margin-left:auto; display:flex; gap:clamp(18px,3vw,54px); }
.topnav-links a{ font-size:16px; color:var(--ink); letter-spacing:-.02em; }
.topnav-links a:hover{ color:var(--blue); }
.topnav-cta{
  border:1px solid var(--line); border-radius:999px; padding:11px 22px;
  font-size:15px; letter-spacing:-.01em; transition:background .2s,color .2s,border-color .2s;
}
.topnav-cta:hover{ background:var(--ink); border-color:var(--ink); color:#fff; }

.strip{ background:var(--black); color:#fff; }
.strip-in{ display:flex; align-items:center; gap:16px; height:52px; }
.strip-in .mono{ color:var(--cyan); }
.strip-in a{ font-size:15px; letter-spacing:-.01em; }
.strip-in a:hover{ text-decoration:underline; }

/* ---------- 1. film hero (rules 4 + 5) ---------- */
.film-hero{ position:relative; background:var(--black); padding-bottom:0; }
.film-media{ position:relative; width:100%; height:clamp(460px,72vh,770px); overflow:hidden; }
.film-el{ width:100%; height:100%; object-fit:cover; }
/* Nothing sits on the film now, so the scrim is only there to seat the card
   against the bottom of the frame. The old left-weighted gradient existed to
   hold a headline and would only be dimming the film for no reason. */
.film-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.14) 0%,rgba(0,0,0,0) 26%,rgba(0,0,0,.42) 100%);
}

/* rule 5: the statement card overlaps the bottom of the film, and it is the
   card, not the film, that carries the headline. Back to the original small
   proportions (800px, 44px padding) with the headline sized to fit them. */
.claim{
  position:relative; margin-top:-116px; margin-bottom:0;
  background:var(--blue-deep); color:#fff; border-radius:22px;
  padding:40px clamp(28px,4vw,56px);
  max-width:800px; margin-inline:auto;
}
.claim h1{
  font-size:clamp(1.5rem,2.1vw,2.1rem); line-height:1.06; letter-spacing:-.04em;
  font-weight:400; max-width:18ch;
}
.claim-row{
  margin-top:26px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.22);
  display:grid; grid-template-columns:1fr auto; gap:36px; align-items:center;
}
.claim-line{ font-size:clamp(1.02rem,1.22vw,1.18rem); line-height:1.3;
  letter-spacing:-.024em; color:rgba(255,255,255,.8); }

.circ-link{
  display:inline-flex; align-items:center; gap:16px;
  font-size:clamp(1.12rem,1.5vw,1.45rem); line-height:1.22; letter-spacing:-.026em;
}
.circ{
  flex:0 0 auto; width:42px; height:42px; border:1.3px solid currentColor;
  border-radius:50%; display:grid; place-items:center; transition:transform .24s;
}
.circ svg{ width:19px; height:19px; }
.circ-link:hover .circ{ transform:translateX(5px); }

/* ---------- bands ---------- */
.band-black{ background:var(--black); color:#fff; padding-block:110px 90px; }
.band-paper{ background:var(--paper); color:var(--ink); padding-block:120px; }
.band-paper.tight{ padding-block:90px 110px; }
.band-blue{ background:var(--blue); color:#fff; padding-block:96px 120px; }
.band-ink{ background:var(--deep); color:#fff; padding-block:110px; }

.rule{ border:0; border-top:1px solid var(--line-light); margin:78px 0 64px; }
.rule.dim{ border-top-color:var(--line); margin:96px 0 72px; }
.rule.short{ width:min(250px,40%); margin:0 0 54px; }
.rule.white{ border-top-color:rgba(255,255,255,.75); }

.band-title{
  font-size:clamp(1.9rem,3.1vw,3rem); line-height:1.05; letter-spacing:-.04em;
  font-weight:400;
}
.band-title.dark-title{ color:var(--ink); }
.display{
  font-size:clamp(2.1rem,3.7vw,3.7rem); line-height:1.02; letter-spacing:-.042em;
  font-weight:400;
}
.display.center{ text-align:center; }
.lede{ margin-top:26px; max-width:58ch; font-size:clamp(1.02rem,1.2vw,1.22rem);
  line-height:1.5; color:var(--ink-soft); letter-spacing:-.016em; }
.lede.wide{ max-width:64ch; }
.lede.center{ margin-inline:auto; text-align:center; }
.band-ink .lede,.band-blue .lede,.band-black .lede,.lede.on-blue{ color:rgba(255,255,255,.78); }
.eyebrow{ color:var(--blue); margin-bottom:22px; }
.eyebrow.on-blue{ color:rgba(255,255,255,.8); }
.footnote{ margin-top:26px; font-size:12px; line-height:1.6; color:var(--ink-soft);
  max-width:68ch; letter-spacing:0; }
.band-black .footnote,.footnote.on-ink{ color:rgba(255,255,255,.52); }

/* ---------- 2. proof (rule 6) ----------
   The figure is a STACK, not a row: "every" sits tight on top of the numeral
   and "answered" tight underneath, each at its own size on one left edge.
   Set beside the numeral, as it was, the two small lines floated at mid
   height with nothing holding them. The note moved into the same column so
   the band has no dead corner, and the photograph is a plain rounded frame
   running the full height of that column. The ellipse mask is gone: on a
   head-and-shoulders crop it cut the ears and read as a sticker. */
.proof{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(30px,5vw,80px); align-items:stretch;
}
.proof-figure{ display:flex; flex-direction:column; align-items:flex-start; }
.proof-small{
  font-size:clamp(1.5rem,2.3vw,2.3rem); line-height:1; letter-spacing:-.04em;
  color:var(--blue); margin-left:.06em;
}
.proof-big{
  color:var(--blue); font-weight:500; margin-top:-.06em;
  font-size:clamp(4.6rem,10.6vw,10.4rem); line-height:.86; letter-spacing:-.06em;
}
.proof-mid{
  margin-top:.1em; font-size:clamp(1.9rem,3.1vw,3.1rem); line-height:1;
  letter-spacing:-.045em;
}
.proof-sub{
  margin-top:18px; font-size:clamp(1rem,1.2vw,1.2rem); line-height:1.4;
  letter-spacing:-.02em; color:rgba(255,255,255,.66);
}
.proof-figure .circ-link{ margin-top:44px; }
.proof-note{ margin-top:auto; padding-top:52px; max-width:46ch; }

.proof-media{
  margin:0; border-radius:24px; overflow:hidden; min-height:0;
  box-shadow:0 34px 80px -46px rgba(0,0,0,.9);
}
.proof-media img{ width:100%; height:100%; min-height:340px;
  object-fit:cover; object-position:center 24%; }

/* ---------- the call, one panel with flag chips (rule 7 adapted) ----------
   The reference runs a rail of cards. Five near-identical waveform cards read
   as five thumbnails of the same thing, so the rail collapses into ONE panel
   and the five become a choice. Flags are drawn SVG, never emoji. */
.flags{
  margin-top:42px; display:flex; flex-wrap:wrap; gap:10px;
}
.flag{
  display:inline-flex; align-items:center; gap:10px;
  height:44px; padding:0 18px 0 14px;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  background:rgba(255,255,255,.04); color:rgba(255,255,255,.72);
  font-family:var(--sans); font-size:15px; letter-spacing:-.015em;
  cursor:pointer; transition:border-color .2s,background .2s,color .2s;
}
.flag svg{ width:22px; height:15.4px; flex:0 0 auto; border-radius:2.5px;
  box-shadow:0 0 0 1px rgba(0,0,0,.28); }
.flag:hover{ border-color:rgba(255,255,255,.5); color:#fff; }
.flag.is-on{ background:#fff; border-color:#fff; color:#07162f; }
.flag:focus-visible{ outline:2px solid var(--cyan); outline-offset:3px; }

.call-panel{ margin-top:34px; }
.call-art{
  position:relative; aspect-ratio:16/5.6; border-radius:18px; overflow:hidden;
  background:linear-gradient(160deg,#0d2352 0%,#04091a 100%);
  display:grid; place-items:center;
}
.wave{
  position:absolute; inset:0; display:flex; align-items:center;
  gap:3px; padding-inline:clamp(20px,4vw,54px); opacity:.55;
}
/* The bars FLEX rather than sitting at a fixed width: at a fixed width 72 bars
   made a 576px clump floating in a 1220px panel. */
.wave i{ flex:1 1 0; min-width:2px; border-radius:2px; background:var(--blue);
  transition:background .2s; }
.wave i.done{ background:var(--cyan); }
.play{
  position:relative; z-index:2; width:74px; height:74px; border-radius:50%;
  border:1.4px solid rgba(255,255,255,.82); background:rgba(0,0,0,.46);
  color:#fff; display:grid; place-items:center; cursor:pointer;
  backdrop-filter:blur(6px); transition:background .2s,transform .2s;
}
.play:hover{ background:rgba(0,0,0,.74); transform:scale(1.05); }
.play:focus-visible{ outline:2px solid var(--cyan); outline-offset:4px; }
.play svg{ width:22px; height:22px; }
.play .i-play{ margin-left:3px; }
.play .i-pause{ display:none; }
.call-panel.on .play .i-play{ display:none; }
.call-panel.on .play .i-pause{ display:block; }
.call-time{
  position:absolute; right:18px; bottom:15px; z-index:2;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em;
  color:rgba(255,255,255,.82);
}
.call-cap{ margin-top:22px; }
.call-meta{ color:rgba(255,255,255,.58); }
.call-cap h3{ margin-top:8px; font-size:clamp(1.4rem,2.1vw,2.1rem);
  line-height:1.1; letter-spacing:-.038em; }

/* ---------- 3. meet ---------- */
.meet{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(34px,5vw,86px); align-items:center; }
.meet-media img{ border-radius:20px; width:100%; }
.meet-copy .circ-link{ margin-top:40px; }

.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,4vw,64px); }
.feat-ic{ display:block; color:var(--blue); margin-bottom:26px; }
.feat-ic svg{ width:34px; height:34px; }
.feat-fig{ font-size:clamp(1.55rem,2.35vw,2.35rem); line-height:1.04;
  letter-spacing:-.042em; margin-bottom:14px; }
.feats p{ color:var(--ink-soft); font-size:16px; line-height:1.55; max-width:34ch; }

/* ---------- 5. voices ----------
   The band used to be a quote with three decorative thumbs and an empty right
   half. Now the portrait is the size the band deserves and the three thumbs
   earn their place: they switch the picture AND the words, so only one quote
   is on screen at a time. */
.voices{
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:clamp(36px,5vw,76px); align-items:center;
}
.voices-copy{ min-width:0; }
.quote{ margin:0; }
.quote p{
  font-size:clamp(1.45rem,2.45vw,2.4rem); line-height:1.18; letter-spacing:-.038em;
  max-width:26ch;
}
.quote cite{ display:block; margin-top:30px; font-style:normal;
  color:rgba(255,255,255,.82); }

.faces{ display:flex; gap:14px; margin-top:52px; }
.face{
  position:relative; width:70px; height:70px; padding:0; border-radius:50%;
  cursor:pointer; border:0; background:none;
  transition:transform .22s, opacity .22s; opacity:.6;
}
.face img{
  width:100%; height:100%; object-fit:cover; border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.34);
}
.face:hover{ opacity:1; transform:translateY(-2px); }
.face.is-on{ opacity:1; }
.face.is-on img{ box-shadow:0 0 0 2px rgba(255,255,255,.28); }
.face:focus-visible{ outline:2px solid #fff; outline-offset:6px; border-radius:50%; }

/* The ring sweeps once per slide, so the faces read as carousel dots that
   tell you how long is left rather than as three static portraits. It is
   driven by an animation restart, not by a timer writing to the DOM. */
.face-ring{
  position:absolute; inset:-5px; width:calc(100% + 10px); height:calc(100% + 10px);
  transform:rotate(-90deg); pointer-events:none; opacity:0;
}
.face-ring circle{
  fill:none; stroke:#fff; stroke-width:2.4; stroke-linecap:round;
  stroke-dasharray:222.4; stroke-dashoffset:222.4;
}
.face.is-on .face-ring{ opacity:1; }
.face.is-on .face-ring circle{ animation:face-sweep var(--slide,6s) linear forwards; }
.faces.is-paused .face-ring circle{ animation-play-state:paused; }
.faces.is-manual .face-ring{ opacity:0; }
@keyframes face-sweep{ to{ stroke-dashoffset:0; } }

/* The portrait stays inside the gutter and is capped, so it reads as a
   photograph next to the words rather than a wall the words sit beside. The
   frame matches the source ratio (1040x1199) so the tallest of the three is
   not cropped at the hairline. */
.voices-shot{
  margin:0 0 0 auto; width:100%; max-width:460px;
  border-radius:24px; overflow:hidden;
  box-shadow:0 34px 80px -44px rgba(0,0,0,.5);
}
.voices-shot{ position:relative; aspect-ratio:1/1.15; }
/* Two stacked layers so one picture dissolves into the next. Swapping a single
   src leaves a blank frame for as long as the next file takes to arrive. */
.voices-shot .shot{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 28%;
  opacity:0; transition:opacity .62s ease;
}
.voices-shot .shot.is-on{ opacity:1; }

/* ---------- 6. technology ---------- */
.tech{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(34px,5vw,86px); align-items:center; }
.tech-media img{ border-radius:18px; box-shadow:0 30px 70px rgba(35,35,60,.14); }
.tech-copy .circ-link{ margin-top:40px; }

/* ---------- 7. why we are here ---------- */
.stats{ margin-top:70px; display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(26px,4vw,70px); }
.stats strong{
  display:block; font-weight:400; color:var(--blue);
  font-size:clamp(1.5rem,2.6vw,2.6rem); line-height:1.04; letter-spacing:-.045em;
  margin-bottom:16px;
}
.stats p{ color:rgba(255,255,255,.76); font-size:16px; line-height:1.5; max-width:30ch; }
.src{ display:block; margin-top:10px; color:rgba(255,255,255,.4); font-size:11px; }

/* ---------- 8. demo ---------- */
.demo-band{ padding-top:20px; border-top:1px solid rgba(255,255,255,.1); }
.demo-mount{ margin-top:54px; }

/* ---------- 9. mission ---------- */
.mission .display{ max-width:20ch; }
.mission-links{ margin-top:52px; display:flex; flex-wrap:wrap; gap:48px; }

/* ---------- footer ---------- */
.site-foot{ background:var(--grey); color:var(--ink); padding-block:80px 34px; }
.foot-grid{ display:grid; grid-template-columns:1.6fr repeat(3,1fr);
  gap:clamp(26px,4vw,60px); }
.foot-brand p{ margin-top:22px; max-width:38ch; color:var(--ink-soft);
  font-size:15px; line-height:1.55; }
.wordmark.dark{ color:var(--ink); font-size:18px; }
.wordmark.dark .mark{ width:32px; height:32px; border-radius:11px; }
.wordmark.dark .mark svg{ width:17px; height:20px; }
.foot-phone,.foot-mail{ display:block; margin-top:16px; color:var(--ink); }
.foot-phone:hover,.foot-mail:hover{ color:var(--blue); }
.foot-col h4{ margin-bottom:20px; color:var(--ink-soft); font-weight:400; }
.foot-col a{ display:block; padding:7px 0; font-size:15px; letter-spacing:-.015em; }
.foot-col a:hover{ color:var(--blue); }
.foot-bar{ margin-top:66px; padding-top:24px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  color:var(--ink-soft); font-size:11px; }

/* ---------- the voice desk island, restyled onto the ink band ---------- */
.demo-mount .vb-bits{ color:#fff; }

/* ============================================================
   NARROW. Every override below sits after the component it edits.
   ============================================================ */
@media (max-width:1180px){
  .proof{ grid-template-columns:1fr; }
  .proof-media{ order:-1; }
  .proof-media img{ aspect-ratio:16/9; height:auto; }
  .tech{ grid-template-columns:1fr; }
  .tech-media{ order:2; }
  .foot-grid{ grid-template-columns:1fr 1fr; row-gap:48px; }
}
@media (max-width:900px){
  .topnav-links{ display:none; }
  .topnav-in{ height:76px; }
  .topnav-cta{ margin-left:auto; }
  .meet{ grid-template-columns:1fr; }
  .meet-media{ order:-1; }
  .voices{ grid-template-columns:1fr; gap:38px; }
  .voices-shot{ order:-1; margin-inline:0; max-width:none; border-radius:22px; }
  .voices-shot{ aspect-ratio:1/1; }
  .feats,.stats{ grid-template-columns:1fr; gap:46px; }
  .feats p,.stats p{ max-width:46ch; }
  .claim{ margin-top:-72px; }
  .claim-row{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:620px){
  body{ font-size:16px; }
  .strip-in{ height:auto; padding-block:12px; flex-wrap:wrap; gap:6px; }
  .film-media{ height:clamp(420px,76vh,600px); }
  .dark{ padding-block:72px 64px; }
  .light{ padding-block:74px; }
  .blue,.ink{ padding-block:74px; }
  .rule{ margin:52px 0 42px; }
  .rule.dim{ margin:64px 0 50px; }
  .proof-figure .circ-link{ margin-top:34px; }
  .proof-note{ padding-top:34px; }
  .proof-media img{ min-height:260px; }
  .flag{ height:40px; padding:0 14px 0 11px; font-size:14px; }
  .call-art{ aspect-ratio:16/11; }
  .play{ width:60px; height:60px; }
  /* 72 bars at a 2px floor plus a 3px gap need 397px: wider than the phone,
     so the last few were clipped by the panel. Tighten both. */
  .wave{ gap:2px; padding-inline:16px; }
  .wave i{ min-width:1px; }
  .face{ width:56px; height:56px; }
  .faces{ gap:12px; }
  .foot-grid{ grid-template-columns:1fr; }
  .mission-links{ flex-direction:column; gap:26px; }
  .foot-bar{ flex-direction:column; gap:10px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* The three-line hand break left "desk" hanging on its own line at 1600.
   Let it wrap on a measure instead. */
.meet-h{ max-width:15ch; }

/* ============================================================
   The live-demo island (bits.js) ships with the old amber brand and a
   white surface. It is token driven, so retint rather than fork it.
   The gradients and the few hardcoded oranges are re-stated because
   they never read a variable. This block sits LAST on purpose: at equal
   specificity source order decides, and bits.css loads after us.
   ============================================================ */
.demo-mount .vb-bits{
  --vb-accent:#005de6;
  --vb-amber:#01cce4;
  --vb-ink:#ffffff;
  --vb-body:rgba(255,255,255,.78);
  --vb-muted:rgba(255,255,255,.62);
  --vb-line:rgba(255,255,255,.22);
  --vb-surface:rgba(255,255,255,.06);
  --vb-surface-quiet:rgba(255,255,255,.04);
  font-family:var(--sans);
}
.demo-mount .vb-desk__glow{
  background:radial-gradient(closest-side,rgba(0,93,230,.34),rgba(0,93,230,.12) 54%,rgba(0,93,230,0) 74%);
}
.demo-mount .vb-desk__bar{ background:linear-gradient(180deg,#01cce4,#005de6); }
.demo-mount .vb-desk__status{ color:#01cce4; }
.demo-mount .vb-desk__input{
  background:rgba(255,255,255,.07); color:#fff;
  border-color:rgba(255,255,255,.26);
}
.demo-mount .vb-desk__input::placeholder{ color:rgba(255,255,255,.5); }
.demo-mount .vb-desk__input:focus{ border-color:#01cce4; }
.demo-mount .vb-desk__call,
.demo-mount .vb-desk__again{ background:var(--blue); color:#fff; }
.demo-mount .vb-desk__lang select{
  background:rgba(255,255,255,.07); color:#fff;
  border-color:rgba(255,255,255,.26);
}
.demo-mount .vb-desk__caption{ color:#fff; }
.demo-mount .vb-desk__fine{ color:rgba(255,255,255,.58); }

/* Phone: the nav pill wrapped to two lines, and the hand break in the
   claim card fell mid-phrase once the card was one column wide. */
.topnav-cta{ white-space:nowrap; }
@media (max-width:620px){
  /* The mark widened the lockup by 48px and the nav overflowed by 11px at
     390. The lockup gives that back, not the button. */
  .wordmark{ font-size:16px; letter-spacing:.18em; gap:9px; }
  .mark{ width:30px; height:30px; border-radius:10px; }
  .mark svg{ width:16px; height:19px; }
  .topnav-cta{ padding:9px 15px; font-size:13.5px; }
  .wide-br{ display:none; }
}