/* Secure.com report pages.

   The tokens and primitives below come from the website repo
   (src/components/HomepageUpdateShared.css and the folds it feeds), so a report
   reads as part of the product: the #eaf1ff wash, N27 headings with a blue
   emphasis span, white cards that lift on hover, and the navy to blue gradient
   panels. Light only, like the site. */
@import url("/shared/geist.css");

@font-face {
  font-family: "N27";
  src: url("/shared/N27-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --navy: #001c51;
  --navy-deep: #03173a;
  --blue: #0061c1;
  --blue-deep: #004b95;
  --teal: #1eb2c2;
  --ink: #0b1b33;
  --body: #35496b;
  --muted: #5a6b85;
  --line: rgba(0, 75, 149, 0.16);
  --line-soft: rgba(0, 75, 149, 0.1);
  --wash: #eaf1ff;
  --grad: linear-gradient(179.4725deg, #001c51 0%, #004b95 99.124%);
  --shadow: 0 22px 48px rgba(0, 28, 81, 0.16);
  --shadow-sm: 0 10px 26px rgba(0, 28, 81, 0.08);
  --radius: 18px;
  /* chart series: brand blue and the brand coral, checked for colour vision
     deficiency on white. Every bar carries its value, which the coral needs. */
  --c1: #0061c1;
  --c2: #d98677;
  --c3: #001c51;
  --c-base: #93a3bd;
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: radial-gradient(150% 880px at 44% -150px, #ccdfff, #eaf1ff 68%) no-repeat, var(--wash);
  color: var(--ink);
  font: 16px/1.6 Geist, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 600; }

/* progress line: this is a report, so the reader can see how much is left */
.progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 50;
  background: linear-gradient(90deg, var(--blue), var(--teal)); transition: width 0.1s linear; }

.wrap { width: min(86%, 1180px); margin: 0 auto; }
section { padding: clamp(38px, 4.4vw, 72px) 0; }
/* the first screen has to hold the headline and the benchmark together */
body > section:first-of-type { padding-top: clamp(16px, 2vw, 30px); }
body > section:first-of-type .card { padding: 20px 22px; }
body > section:first-of-type h1 { font-size: clamp(32px, 3.6vw, 46px); letter-spacing: -1.4px; }
body > section:first-of-type .lead { font-size: 16px; }
.center { text-align: center; }
.center .lead, .center .sublead { margin-left: auto; margin-right: auto; }

/* type ---------------------------------------------------------------------- */
h1 {
  font: 400 clamp(34px, 4.3vw, 56px)/1.08 N27, Geist, sans-serif;
  letter-spacing: -1.8px; color: var(--navy-deep); margin: 0 0 18px;
}
h2 {
  font: 400 clamp(30px, 3.5vw, 44px)/1.14 N27, Geist, sans-serif;
  letter-spacing: -1.4px; color: var(--navy-deep); margin: 0 0 16px;
}
h3 { font: 400 20px/1.25 N27, Geist, sans-serif; letter-spacing: -0.5px; color: var(--navy-deep); margin: 0 0 10px; }
.em { color: var(--blue); }
.label {
  display: inline-block; margin: 0 0 14px; font: 600 12px/1.4 Geist, sans-serif;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--blue);
}
.lead { font: 400 17px/1.6 Geist, sans-serif; color: var(--body); max-width: 860px; }
.sublead { font: 400 16px/1.62 Geist, sans-serif; color: var(--muted); max-width: 820px; }
.small { font-size: 13.5px; line-height: 1.55; }
.muted { color: var(--muted); }

/* top bar ------------------------------------------------------------------- */
.top { padding: 26px 0 0; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.top img { height: 28px; width: auto; }
.top .meta { font-size: 13px; color: var(--muted); text-align: right; }

/* the trust line the site runs under its hero */
.trust { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin-top: 24px;
  font-size: 13.5px; color: var(--muted); }
.trust span { position: relative; }
.trust span + span::before { content: "·"; position: absolute; left: -15px; color: var(--muted); }

/* cards --------------------------------------------------------------------- */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 26px;
}
.hover { position: relative; overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1),
    box-shadow 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), border-color 0.35s ease; }
.hover::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; border-radius: 6px 6px 0 0;
  background: linear-gradient(90deg, var(--blue), var(--teal));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.42s cubic-bezier(0.22, 0.61, 0.36, 1); pointer-events: none;
}
.hover:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: rgba(0, 97, 193, 0.32); }
.hover:hover::after { transform: scaleX(1); }
@media (hover: none) {
  .hover:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line); }
  .hover:hover::after { transform: scaleX(0); }
}

.grid { display: grid; gap: 18px; }
/* the floor in a minmax is a hard floor: on a screen narrower than it, the column
   keeps that width and pushes the page sideways. min() lets it give way there and
   changes nothing on any screen with room for it. */
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

/* the navy panel the site uses for its own answer */
.navy {
  background:
    radial-gradient(circle at 100% 106%, rgba(255, 255, 255, 0.05) 0 52%, rgba(255, 255, 255, 0) 52.5%),
    radial-gradient(circle at 100% 106%, rgba(255, 255, 255, 0.036) 0 72%, rgba(255, 255, 255, 0) 72.5%),
    var(--grad);
  border: 1px solid rgba(66, 151, 255, 0.4); border-radius: 22px; color: #fff;
  box-shadow: 0 24px 52px rgba(16, 55, 116, 0.18); padding: 30px;
}
.navy h2, .navy h3 { color: #fff; }
.navy .lead, .navy .small, .navy .muted { color: rgba(255, 255, 255, 0.78); }
.navy .label { color: #8fc2ff; }
.icon {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22); margin-bottom: 16px;
}
.icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }

/* the headline number ------------------------------------------------------- */
.stat { display: flex; flex-direction: column; justify-content: center; }
.stat .n { font: 400 clamp(46px, 6vw, 76px)/1 N27, Geist, sans-serif; letter-spacing: -3px; color: var(--navy); }
.stat .n span { font-size: 0.42em; letter-spacing: -1px; color: var(--blue); }
.stat .say { margin-top: 12px; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.big { font: 400 clamp(34px, 4.4vw, 44px)/1 N27, Geist, sans-serif; letter-spacing: -1.6px;
  color: var(--navy); margin-bottom: 10px; }
.source { margin-top: 14px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.source a { color: var(--muted); text-decoration: underline; }

/* charts -------------------------------------------------------------------- */
figure { margin: 0; }
figcaption { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 12px; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; margin: 2px 0 16px; font-size: 13px; color: var(--muted); }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 7px; }
.chart { width: 100%; overflow: visible; }
.chart text { font: 13px Geist, system-ui, sans-serif; fill: var(--muted); }
.chart .val { fill: var(--navy-deep); font-weight: 600; }
.chart rect.bar { transition: width .9s cubic-bezier(.22, .75, .25, 1), opacity .2s ease; }
.chart .val { opacity: 0; transition: opacity .35s ease .5s; }
.chart .val.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .chart rect.bar { transition: none; }
  .chart .val { opacity: 1; transition: none; }
}
.chart rect.bar:hover { opacity: 0.85; }

.tip {
  position: fixed; z-index: 60; display: none; pointer-events: none; background: var(--navy-deep);
  color: #fff; font: 12.5px/1.45 Geist, sans-serif; padding: 9px 11px; border-radius: 12px;
  box-shadow: var(--shadow-sm); max-width: 260px;
}

/* tabs and the before and after slider -------------------------------------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tab {
  font: 550 13.5px Geist, sans-serif; letter-spacing: -0.2px; color: var(--navy-deep);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 16px;
  cursor: pointer; transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.tab[aria-selected="true"] { background: var(--grad); color: #fff; border-color: transparent; }
.tab:hover { border-color: rgba(0, 97, 193, 0.4); }

.slider input[type="range"] { width: 100%; accent-color: var(--blue); margin: 14px 0 6px;
  height: 26px; cursor: grab; }
.slider input[type="range"]:active { cursor: grabbing; }
.slider .label { background: rgba(0, 97, 193, 0.08); border-radius: 100px; padding: 4px 10px; }
.ends { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.meter { height: 12px; background: var(--wash); border: 1px solid var(--line-soft); border-radius: 8px;
  margin-top: 16px; overflow: hidden; }
.meter > div { height: 100%; background: var(--grad); transition: width 0.15s ease; }

/* reader inputs: the benchmark, the calculator and the readiness check -------- */
input[type="number"], input[type="text"], select {
  font: 400 15px Geist, sans-serif; color: var(--navy-deep); background: #fff;
  border: 1px solid var(--line); border-radius: 12px; padding: 11px 13px; min-width: 110px;
}
input[type="number"]:focus, select:focus { outline: 2px solid rgba(0, 97, 193, 0.35); outline-offset: 1px; }
.field { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 10px 0; }
.field label { font-size: 14px; color: var(--body); }
.answer { margin-top: 14px; font-size: 15px; color: var(--body); min-height: 24px; }
.answer strong { color: var(--navy); }

.scale { position: relative; height: 12px; border-radius: 8px; margin: 18px 0 8px;
  background: linear-gradient(90deg, rgba(0, 97, 193, 0.14), rgba(0, 97, 193, 0.55)); }
.scale .pin { position: absolute; top: -6px; width: 3px; height: 24px; border-radius: 3px;
  background: var(--navy); transition: left 0.3s cubic-bezier(0.22, 0.61, 0.36, 1); }
.scale-ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }

.checks { display: grid; gap: 10px; margin: 6px 0 4px; }
.checks label { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--body);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; }
.checks label:hover { border-color: rgba(0, 97, 193, 0.4); }
.checks input { accent-color: var(--blue); margin-top: 2px; }

/* tables -------------------------------------------------------------------- */
/* a table has a width below which its columns stop meaning anything, so on a narrow
   screen it scrolls inside its own card instead of pushing the whole page sideways.
   The floor belongs to the visible table only: report.js also builds a one pixel
   copy of every chart for screen readers and print, and a min-width on .table blew
   that one up to 460px and widened the page with it. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.table-scroll > .table { min-width: 460px; }
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; }
.table th {
  font: 600 12px Geist, sans-serif; letter-spacing: 0.08em; text-transform: uppercase;
  color: #314766; text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.table td { padding: 13px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; color: var(--body); }
.table td.num { text-align: right; font-variant-numeric: tabular-nums; color: var(--navy-deep); font-weight: 600; }
.table tr:last-child td { border-bottom: 0; }
.table .secure {
  background: linear-gradient(136deg, rgba(0, 28, 81, 1) 0%, rgba(0, 75, 149, 1) 100%);
  border-left: 3px solid #accaff; color: #fff; font-weight: 600;
}

/* close --------------------------------------------------------------------- */
.btns { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px;
  padding: 0 22px; border-radius: 14px; font: 550 16px Geist, sans-serif; letter-spacing: -0.3px;
  background: #fff; color: #000; box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease, transform 0.3s ease;
  /* a link gets the hand on its own, a button does not, and every button here is
     one the reader is meant to press */
  cursor: pointer;
}
.btn:disabled { cursor: default; opacity: .6; }
.btn:hover { text-decoration: none; background: rgba(255, 255, 255, 0.9); transform: translateY(-1px); }
.btn.dark { background: linear-gradient(180deg, rgb(55, 53, 53) 0%, rgb(0, 0, 0) 100%); color: #fff; box-shadow: none; }
.btn.dark:hover { background: linear-gradient(180deg, rgb(70, 68, 68) 0%, rgb(20, 20, 20) 100%); }
.btn.ghost { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; box-shadow: none; }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.18); }

/* sources ------------------------------------------------------------------- */
.sources { font-size: 13.5px; color: var(--muted); padding-left: 18px; }
.sources li { margin: 9px 0; }



/* scroll reveal, the same easing the site uses ------------------------------- */
[data-reveal].armed { opacity: 0; transform: translateY(26px); }
[data-reveal].armed.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--delay, 0s);
}

@media (max-width: 760px) {
  .wrap { width: 90%; }
  .card, .navy { padding: 20px; }
  .btn { width: 100%; }
  /* except the pair at the foot of a form, which shares one line */
  .dlg-btns .btn { width: auto; flex: 1; }
  .dlg-in { padding: 22px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal].armed { opacity: 1; transform: none; }
}
@media print {
  .progress, .tabs { display: none; }
  body { background: #fff; }
  .card, .navy { box-shadow: none; break-inside: avoid; }
}

/* ---------------------------------------------------------------------------
   Report shell, September 2026. Abdel Rahman sent over a benchmark page he
   liked, so the shape now follows it: a pill of navigation that floats, a first
   screen with a picture beside the headline and three counts under it, a strip
   of what the page stands on, a segment comparison anyone can switch, and one
   small form that stays on the page instead of sending the reader away.
   --------------------------------------------------------------------------- */

/* the bar is the width and height the site's own is: 94% of the window up to a
   wider cap than the page's own measure, not the same 1180 the content uses */
.topbar { position: sticky; top: 14px; z-index: 40; margin: 14px auto 0; width: min(94%, 1340px); }
.topbar-in { display: flex; align-items: center; gap: 18px; padding: 11px 12px 11px 22px;
  background: rgba(255, 255, 255, .8); backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 20px; box-shadow: none; }
/* the size the site shows its own at in the bar: 178 by 47. Ours was 136 by 36,
   which is why it read as the smaller, weaker mark beside theirs. */
.topbar-logo { flex: none; height: 47px; width: auto; }
.topbar-seg { color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.topbar-links { display: flex; gap: 18px; margin-left: auto; }
.topbar-links a { color: var(--body); font-size: 13.5px; text-decoration: none; }
.topbar-links a:hover { color: var(--blue); }
.btn-sm { height: 48px; padding: 0 20px; font-size: 15px; border-radius: 12px; }
.btn-lg { height: 56px; padding: 0 26px; font-size: 16px; }
.btn-on-navy { background: #fff; color: var(--navy); }
.btn-on-navy:hover { background: #eaf1ff; }
.btn.ghost { background: transparent; color: var(--body); border: 1px solid var(--line); }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); cursor: pointer;
  text-decoration: underline; }

/* The first screen is the homepage's own: the wash with its radial lift and the
   grid plate behind it, the copy on the left, a visual on the right, and a band
   of four figures under both. The homepage puts its product diagram in that
   right hand slot; ours puts the segment, since that is what the reader came for. */
.hero { position: relative; padding: clamp(30px, 4vw, 54px) 0 0; }
/* the page's backdrop, not the hero's: it runs from the top edge so the strip
   beside the bar is painted the same as the screen below it. It fades out before
   the first screen ends, because the folds below paint their own wash and a
   backdrop that simply stopped left a line across the page. */
.hero-grid { position: absolute; top: 0; left: 0; width: 100%; height: 1020px;
  object-fit: cover; opacity: .5; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 42%, rgba(0, 0, 0, 0) 74%);
  mask-image: linear-gradient(#000 42%, rgba(0, 0, 0, 0) 74%); }
.hero-in { position: relative; z-index: 1; }
.hero-grid-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(32px, 4.5vw, 72px); align-items: center; padding-top: clamp(10px, 2vw, 26px); }
.hero h1 { margin-top: 10px; }
.hero .lead { max-width: 52ch; }
.hero-cta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.hero-points { display: flex; align-items: center; flex-wrap: wrap; gap: 14px;
  margin-top: clamp(30px, 3.4vw, 42px); color: #4f688e; font-size: 13.5px; }
.hero-points i { width: 4px; height: 4px; border-radius: 50%; background: rgba(0, 75, 149, .35); }

/* the right hand visual: the segment, as a card with two figures floating off it */
.hero-visual { position: relative; display: grid; place-items: center; min-height: 340px;
  padding: 18px 34px; }
.hv-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 22px;
  box-shadow: var(--shadow); padding: 26px 30px 30px; text-align: center; max-width: 340px; }
.hv-top { color: var(--muted); font-size: 12.5px; margin-bottom: 14px; }
.hv-say { color: var(--body); font-size: 14px; margin-top: 16px; }
.hv-chip { position: absolute; display: flex; align-items: baseline; gap: 7px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: 14px; box-shadow: var(--shadow-sm);
  padding: 10px 14px; }
.hv-chip b { font-family: N27, Geist, sans-serif; font-size: 19px; color: var(--navy); }
.hv-chip span { color: var(--muted); font-size: 12.5px; }
.hv-1 { top: -14px; right: -26px; }
.hv-2 { top: 44%; left: -34px; }
.hv-3 { bottom: -18px; right: -18px; }

/* the band of four, the way the homepage prints its outcome metrics */
.hero-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(34px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
.hero-metrics li { padding: 6px 24px; }
.hero-metrics li + li { border-left: 1px solid rgba(0, 75, 149, .18); }
.hero-metrics li:first-child { padding-left: 0; }
.hero-metrics small { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--blue); }
.hero-metrics strong { display: block; font-family: N27, Geist, sans-serif; font-weight: 400;
  font-size: clamp(26px, 2.8vw, 36px); line-height: 1.15; color: var(--navy); margin: 4px 0 2px; }
.hero-metrics span { color: var(--muted); font-size: 13px; }
.hero-strip { margin-top: clamp(30px, 4vw, 52px); border-top: 1px solid var(--line-soft); }

/* the customer logos, the same row secure.com runs under its own first screen:
   a centred strip, not the full width of the window. The row is printed twice and
   slid by half its width plus one gap, which loops without a jump. */
.logos { width: min(86%, 1180px); margin: 0 auto; padding: clamp(26px, 3vw, 40px) 0 clamp(20px, 2.5vw, 32px); }
.logos-head { text-align: center; color: var(--muted); font-size: 13px; letter-spacing: .04em;
  margin: 0 0 clamp(16px, 2vw, 24px); }
.marquee { overflow: hidden; -webkit-mask-image:
  linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
/* the gap has to be wide enough that one set of logos is wider than the strip,
   or the loop brings the same logo onto both edges at once and it reads as a bug */
.marquee-run { display: flex; align-items: center; gap: clamp(48px, 8vw, 130px); width: max-content;
  animation: marquee 45s linear infinite; }
.marquee img { height: 26px; width: auto; flex: none; filter: invert(1) grayscale(1);
  opacity: .5; transition: opacity .2s ease; }
.marquee:hover img { opacity: .72; }
/* the compact marks carry their name inside the shape, so they need a little
   more height than a wordmark to read at strip size */
.marquee img[src*="olg"] { height: 36px; }
.marquee img[src*="dazn"] { height: 30px; }
.marquee:hover .marquee-run { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - clamp(24px, 4vw, 65px))); } }
@media (prefers-reduced-motion: reduce) { .marquee-run { animation: none; } }

section[id] { scroll-margin-top: 92px; }
/* the site paints one gradient over the first screen and then a single flat wash
   down the rest of the page. Checked fold by fold on secure.com: every section
   below the hero paints rgb(234, 241, 255) itself, which is this wash, and the
   white cards are what separate one fold from the next. Painting it rather than
   letting it show through is what keeps the gradient to the first screen. */
section, .hero-strip { position: relative; z-index: 1; background: var(--wash); }
section.alt { background: var(--wash); }
.sec-head { max-width: 760px; margin: 0 auto 26px; text-align: center; }
.sec-head .lead { margin-left: auto; margin-right: auto; }

/* the same width as the cards it sits above, so it reads as part of the page
   rather than a note floating in the middle of it */
.notice { display: flex; gap: 18px 24px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; background: rgba(255, 255, 255, .7); border: 1px solid var(--line-soft);
  border-radius: 14px; padding: 16px 22px; margin: 0 0 18px; }
.notice p { margin: 0; font-size: 14px; color: var(--body); max-width: 78ch; }
.notice strong { color: var(--navy); font-weight: 600; }
.notice .btn { flex: none; }

.bench { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; align-items: stretch; }
.bench-score { display: grid; place-items: center; text-align: center; gap: 14px; }
.bench-score .say { color: var(--body); max-width: 30ch; margin: 0; }
@property --p { syntax: "<number>"; initial-value: 0; inherits: false; }
.ring { --p: 0; position: relative; width: 190px; height: 190px; border-radius: 50%; display: grid;
  place-items: center; background: conic-gradient(var(--blue) calc(var(--p) * 1%), var(--wash) 0);
  transition: --p 1s ease; }
.ring::after { content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: #fff; }
.ring span { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 2px;
  font-family: N27, Geist, sans-serif; color: var(--navy); }
.ring b { font-size: 46px; line-height: 1; font-weight: 400; }
.ring i { font-size: 20px; font-style: normal; color: var(--muted); }
.market { margin-top: 18px; }

.cmp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tabs { display: inline-flex; background: var(--wash); border-radius: 999px; padding: 4px; }
.tabs button { border: 0; background: transparent; font: inherit; font-size: 13.5px; color: var(--body);
  padding: 8px 18px; border-radius: 999px; cursor: pointer; }
.tabs button.on { background: #fff; color: var(--navy); box-shadow: var(--shadow-sm); font-weight: 500; }
.pick[hidden] { display: none; }
.pick { display: flex; align-items: center; gap: 10px; }
.pick select { font: inherit; font-size: 13.5px; color: var(--ink); background: #fff; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 10px; }
.legend { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px;
  margin: 18px 0 6px; }
.legend .k { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.legend .k1 { background: var(--c1); }
.legend .k2 { background: var(--c-base); }
.legend em { font-style: normal; }
.cmp-note { margin-top: 12px; }

.dlg { border: 0; border-radius: var(--radius); padding: 0; width: min(92vw, 460px);
  margin: auto; box-shadow: var(--shadow); color: var(--ink); }
.dlg::backdrop { background: rgba(0, 28, 81, .45); backdrop-filter: blur(3px); }
.dlg-in { padding: 26px 26px 22px; display: grid; gap: 12px; position: relative; }
.dlg-x { position: absolute; top: 10px; right: 12px; border: 0; background: none; font-size: 22px;
  line-height: 1; color: var(--muted); cursor: pointer; }
.dlg h3 { font-size: 20px; }
/* the field says what it wants inside itself, the way the site's own forms do. A
   label above every input put the hint on a line of its own and made a three field
   form look like a tax return. The label is still there for a screen reader. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.fields { display: grid; gap: 10px; margin: 2px 0 2px; }
.dlg input { font: inherit; width: 100%; padding: 14px 15px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--wash); color: var(--ink); }
.dlg input::placeholder { color: var(--muted); opacity: 1; }
.dlg input:hover { border-color: rgba(0, 97, 193, .35); }
.dlg input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; background: #fff; }
.dlg-btns { display: flex; gap: 10px; margin-top: 8px; }
/* the buttons keep to one line: "Request a demo" broke over two on a phone and the
   form ended with a two storey button next to a one storey one */
.dlg-btns .btn { height: 48px; white-space: nowrap; padding: 0 18px; }

.foot { background: var(--navy); color: #cfe0f7; padding: 34px 0 30px; margin-top: 10px; }
.foot .small { color: #9db8dd; }
.foot-in { display: grid; grid-template-columns: 1fr auto; gap: 20px 24px; align-items: center; }
.foot-brand { display: grid; gap: 6px; justify-items: start; }
.foot-brand img { height: 38px; width: auto; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { color: #cfe0f7; font-size: 13.5px; }
.foot-note { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 14px;
  margin-top: 6px; }

@media (max-width: 560px) {
  /* four points wrap on a phone and leave a dot hanging at the end of a line, so
     only the two that fit one line stay. The rest of the page says the others. */
  .hero-points span:nth-of-type(n+3), .hero-points i:nth-of-type(n+2) { display: none; }
  /* the slider is dragged with a finger here, not a pointer, so it gets a finger's
     worth of height to catch, and the tabs the same */
  .slider input[type="range"] { height: 44px; }
  .tabs button { padding: 12px 18px; }
  /* a figure like "243 million" is wider than the narrowest phone, so it may break */
  .stat .n { overflow-wrap: anywhere; }
  /* the one button in the bar has room for one line, not two */
  .topbar-in > .btn { white-space: nowrap; font-size: 12.5px; padding: 9px 13px; }
  .topbar-in { gap: 10px; }
  /* the full size mark and the button do not share a phone's width, so the mark
     gives way: it is the button that has to stay readable */
  .topbar-logo { height: 36px; }
}
@media (max-width: 900px) {
  .topbar-links, .topbar-seg { display: none; }
  .hero-grid-cols { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero-copy, .hero-visual { min-width: 0; }
  .hero-copy h1, .hero-copy .lead { overflow-wrap: anywhere; }
  .hero-visual { min-height: 0; margin-top: 8px; }
  .hv-chip { position: static; display: inline-flex; margin: 8px 8px 0 0; }
  .hero-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .hero-metrics li:nth-child(odd) { padding-left: 0; }
  .hero-metrics li:nth-child(3) { border-left: 0; }
  .bench { grid-template-columns: 1fr; }
  .foot-in { grid-template-columns: 1fr; }
  .logos { width: 90%; }
  .marquee img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal].armed { opacity: 1; transform: none; }
}
@media print {
  .progress, .tabs { display: none; }
  body { background: #fff; }
  .card, .navy { box-shadow: none; break-inside: avoid; }
}


/* the quieter half of the detail: a figure, its label, and a thin bar behind it */
.fig-list { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.fig-list li { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: baseline; padding-bottom: 10px; }
.fig-list b { font-family: N27, Geist, sans-serif; font-weight: 400; font-size: 26px; color: var(--navy);
  min-width: 68px; }
.fig-list span { color: var(--body); font-size: 14px; }
.fig-list i { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w); border-radius: 2px;
  background: var(--c); opacity: .55; }

.navy h3 a { color: inherit; text-decoration: none; }
.navy h3 a:hover { text-decoration: underline; }