/* ==========================================================================
   /ZERORANK-INDEX                       docs/spec/ambassador-index.md §2 (ADR-23)
   No comp: the page stands on the .zr-bl shell (bl.css: hero wash, eyebrow,
   h1, lede, the hairline/ink/shadow tokens) and borrows the section head of
   /wall-of-love and /university, the soft grey tray of /about and the wall,
   and uni.css's mono micro-label, so it reads as the same site. The live page
   is dark with an orange accent; only its content and information design are
   ported. No new colours: every value is a base.css / bl.css token or a
   literal another sheet already uses. The three chart series are the site's
   blue, the accent gradient's magenta (base.css --zr-accent-grad) and the
   blog's education green (bl.css): the one triple of site colours that clears
   the colour-blind and contrast checks (worst pair ΔE 13.3 under deuteranopia,
   all three ≥ 3:1 on white). Up and down are the product dashboard's own pair
   (zd.css .zd-dl), and never colour alone: an arrow and a sign go with them.

     .zr-zx
       .zr-zx__hero > .zr-zx__marquee > .zr-zx__track > .zr-zx__set × 2 > img.zr-zx__logo
       .zr-zx__dash[data-zx]
         .zr-zx__tabs > ul.zr-zx__tablist > li > a.zr-zx__tab          (tablist / tab under zindex.js)
         section.zr-zx__panel#<slug> × 12 > .zr-zx__frame
           .zr-zx__block   ( .zr-zx__phead ( h2 · .zr-zx__chips ) · ol.zr-zx__top > li.zr-zx__topcard )
           .zr-zx__card.zr-zx__chart ( __charthead · __plot ( __yaxis · svg · __ends · __xaxis ) )
           .zr-zx__card > table.zr-zx__table--rank                    the ranking
           .zr-zx__card ( __chead · table.zr-zx__table--kw · __cfoot ) the keywords
           .zr-zx__card ( __chead · ul.zr-zx__prompts · __cfoot )      the sample prompts
       .zr-zx__sec > .zr-zx__head ( eyebrow · __h2 · __sub )
         ul.zr-zx__inds > li > a.zr-zx__ind        ul.zr-zx__how > li.zr-zx__step        .zr-zx__cta
   ========================================================================== */
.zr-zx{
  --zx-mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --zx-hover:#C9D6F2;                  /* the site's hover hairline (content.css, pp.css, uni.css) */
  --zx-tray:#F6F7F9; --zx-tray-line:#EEF1F5;                       /* .zr-pp__frame / .zr-wall__frame */
  --zx-s1:var(--zr-blue); --zx-s2:#EB2699; --zx-s3:#1C7A4F;        /* chart series: rank 1, 2, 3 */
  --zx-up:#15803D; --zx-down:#DC2626;                              /* zd.css .zd-dl / .is-down */
  --zx-in:24px;                                                    /* a card's inner gutter */
  --zx-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4m-7 7 7-7 7 7'/%3E%3C/svg%3E");
  --zx-bubble:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* ── hero ───────────────────────────────────────────────────────────────────
   The type is the centred hero of /wall-of-love, /case-studies and /about
   (54px / 1.12 at 1440), one step above the .zr-bl default, so the h1 stays
   above the shared FAQ heading (.zr-h2, 53px at 1440) further down. */
.zr-zx__hero{ padding-bottom:clamp(24px, 2.6vw, 40px); }
.zr-zx .zr-bl__h1{ font-size:clamp(34px, 4.6vw, 54px); line-height:1.12; letter-spacing:-.032em; }
.zr-zx .zr-bl__lede{ width:min(600px, 100%); font-size:16.5px; }

/* The brand marquee: decorative, so the set is in the HTML twice and the loop
   is base.css's own keyframes (-50% = one set). No script, nothing to lay out. */
.zr-zx__marquee{
  width:min(900px, 100%); margin-top:14px; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent);
}
.zr-zx__track{ display:flex; width:max-content; animation:zr-marquee 48s linear infinite; }
.zr-zx__marquee:hover .zr-zx__track{ animation-play-state:paused; }
.zr-zx__set{ display:flex; align-items:center; gap:34px; padding-right:34px; }
.zr-zx__marquee .zr-zx__logo{ opacity:.9; }

/* ── a company mark ─────────────────────────────────────────────────────────
   logo.dev serves square tiles, most of them on their own ground; the hairline
   ring keeps the white ones off the white card. 128px files in 40px and 28px
   slots. A domain without a file gets the initial tile (decided at build). */
.zr-zx__logo{
  --logo:40px;
  display:block; flex:0 0 auto; width:var(--logo); height:var(--logo);
  border-radius:calc(var(--logo) * .25); background:#fff; object-fit:cover;
  box-shadow:0 0 0 1px rgba(31,36,41,.09);
}
.zr-zx__logo--i{
  display:grid; place-items:center; background:#EEF2F8; color:#44546A; box-shadow:none;
  font-size:calc(var(--logo) * .43); font-weight:600; line-height:1;
}
.zr-zx__logo--i::before{ content:attr(data-i); }
.zr-zx__logo--you{ background:transparent; box-shadow:none; border:1.5px dashed #C3C8CF; }

/* ── the dashboard ─────────────────────────────────────────────────────────── */
.zr-zx__dash{ padding-block:clamp(12px, 1.6vw, 24px) clamp(40px, 4.6vw, 72px); scroll-margin-top:104px; }

/* tabs: two centred rows of pills from 900px; below that one row that scrolls
   sideways and dissolves into the page gutters. Without script these are
   in-page links to the twelve panels below; zindex.js makes them tabs. */
.zr-zx__tabs{ margin-bottom:clamp(20px, 2.4vw, 32px); }
/* 900px: the twelve names break 7 + 5 instead of 9 + 3 */
.zr-zx__tablist{
  position:relative; display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
  max-width:900px; margin:0 auto; padding:0; list-style:none;
}
.zr-zx__tablist li{ display:flex; flex:0 0 auto; }
.zr-zx__tab{
  display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
  border:1px solid var(--bl-hair); border-radius:999px; background:#fff;
  font-size:14px; line-height:20px; color:var(--bl-body); white-space:nowrap;
  -webkit-user-select:none; user-select:none;
  transition:background .16s var(--zr-ease-out-quad), border-color .16s var(--zr-ease-out-quad), color .16s var(--zr-ease-out-quad);
}
.zr-zx__tab:hover{ border-color:#D3D8E0; color:var(--bl-ink); }
.zr-zx__tab:focus-visible{ outline-offset:2px; border-radius:999px; }
/* the blog's category filter, same control, same selected state */
.zr-zx__tab[aria-selected="true"]{ background:var(--bl-ink); border-color:var(--bl-ink); color:#fff; }
@media (pointer:coarse){ .zr-zx__tab{ min-height:44px; } }

/* a panel: every block of one industry on the site's soft tray */
.zr-zx__panel{ scroll-margin-top:104px; }
.zr-zx__panel[hidden]{ display:none; }
.zr-zx__panel + .zr-zx__panel{ margin-top:clamp(28px, 3vw, 44px); }
/* under zindex.js one panel shows at a time, and a link to it lands with the tab strip still in view */
.zr-zx__dash.is-tabs .zr-zx__panel{ margin-top:0; scroll-margin-top:calc(120px + var(--zx-tabs-h, 96px)); }

.zr-zx__frame{
  display:grid; grid-template-columns:minmax(0,1fr); gap:12px;
  padding:12px; border-radius:28px; background:var(--zx-tray); border:1px solid var(--zx-tray-line);
}
.zr-zx__block, .zr-zx__card{
  min-width:0; overflow:hidden; background:#fff; border:1px solid #EDF1F7; border-radius:18px;
  box-shadow:0 6px 16px -6px rgba(31,36,41,.05);
}

/* uni.css's micro-label: "Visibility Score", the table heads */
.zr-zx__label, .zr-zx__table thead th{
  margin:0; font-family:var(--zx-mono); font-size:11.5px; font-weight:400; line-height:18px;
  letter-spacing:.04em; text-transform:uppercase; color:var(--zr-muted);
}

/* panel head: the title and the three static chips */
.zr-zx__phead, .zr-zx__chead{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 20px;
  padding:16px var(--zx-in); border-bottom:1px solid var(--bl-rule);
}
.zr-zx__ptitle{ margin:0; font-size:20px; font-weight:500; line-height:28px; letter-spacing:-.02em; color:var(--bl-body); text-wrap:balance; }
.zr-zx__ptitle b{ font-weight:600; color:var(--bl-ink); }
.zr-zx__ctitle{ margin:0; font-size:17px; font-weight:500; line-height:26px; letter-spacing:-.015em; color:var(--bl-ink); text-wrap:balance; }
/* They state what the numbers are (platform, country, week). On the live page
   they carry a chevron and open nothing; here they are labels and look it. */
.zr-zx__chips{ display:flex; flex-wrap:wrap; gap:6px; margin:0; padding:0; list-style:none; }
.zr-zx__chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 11px 4px 9px;
  border:1px solid var(--bl-hair); border-radius:999px; background:#FBFCFE;
  font-size:12.5px; line-height:18px; color:var(--bl-body); white-space:nowrap;
}
.zr-zx__chip svg{ flex:0 0 auto; width:13px; height:13px; color:#7B8594; }
.zr-zx__stroke{ fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }

/* the top three */
.zr-zx__top{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.zr-zx__topcard{ position:relative; min-width:0; overflow:hidden; padding:22px var(--zx-in) 24px; }
.zr-zx__topcard + .zr-zx__topcard{ border-left:1px solid var(--bl-rule); }
.zr-zx__topcard p{ position:relative; margin:0; }
.zr-zx__topnum{
  position:absolute; right:10px; bottom:-34px; pointer-events:none; -webkit-user-select:none; user-select:none;
  font-size:176px; font-weight:600; line-height:1; letter-spacing:-.04em; color:rgba(20,99,245,.055);
}
.zr-zx__topscore{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 10px; margin-top:6px !important; }
.zr-zx__topscore b{ font-size:34px; font-weight:500; line-height:42px; letter-spacing:-.03em; color:var(--bl-ink); }
.zr-zx__topco{ display:flex; align-items:center; gap:12px; margin-top:26px !important; font-size:18px; font-weight:500; line-height:24px; letter-spacing:-.015em; color:var(--bl-ink); }
/* overflow-wrap:anywhere, not break-word: the narrow column below 760px is sized by the grid, and break-word
   leaves the name overprinting the score (measured at 360 and 320). */
.zr-zx__topco span{ min-width:0; text-wrap:balance; overflow-wrap:anywhere; }

/* the change: direction by arrow and sign, colour only on top of that. The arrow is one masked box, so the 23
   changes of a panel cost no element of their own (twelve panels are in the page). */
.zr-zx__chg{ font-size:13.5px; font-weight:500; line-height:20px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.zr-zx__chg::before{
  content:""; display:inline-block; width:11px; height:11px; margin-right:3px; vertical-align:-1px; background:currentColor;
  -webkit-mask:var(--zx-arrow) center / contain no-repeat; mask:var(--zx-arrow) center / contain no-repeat;
}
.zr-zx__chg--up{ color:var(--zx-up); }
.zr-zx__chg--down{ color:var(--zx-down); }
.zr-zx__chg--down::before{ rotate:180deg; }
@media (forced-colors:active){
  .zr-zx__chg::before{ background:CanvasText; }
  /* the pill's ink/fill are overridden by the mode, so the selected tab needs a system colour of its own; without
     it the twelve tabs look identical although only one panel is shown */
  .zr-zx__tab[aria-selected="true"]{ background:Highlight; color:HighlightText; border-color:Highlight; }
  /* a 5.5% watermark repaints as solid CanvasText: a 176px numeral over each card */
  .zr-zx__topnum{ display:none; }
  /* the lines are SVG strokes, which the mode leaves alone; their keys are backgrounds, which it would erase */
  .zr-zx__key, .zr-zx__end::before{ forced-color-adjust:none; }
}

/* ── the chart ──────────────────────────────────────────────────────────────
   The SVG is only the drawing (gridlines + three lines) and stretches with the
   card; every piece of text around it is HTML placed by percentage, so it is
   the same size on a phone as on a desktop. --t / --l come from chart.ts. */
.zr-zx__chart{ padding:18px var(--zx-in) 14px; }
.zr-zx__charthead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; }
.zr-zx__legend{ display:flex; flex-wrap:wrap; gap:6px 18px; margin:0; padding:0; list-style:none; font-size:13.5px; line-height:20px; color:var(--bl-body); }
.zr-zx__legend li{ display:inline-flex; align-items:center; gap:8px; }
.zr-zx__key{ flex:0 0 auto; width:10px; height:10px; border-radius:50%; background:var(--c); }
.zr-zx__key--1, .zr-zx__end--1{ --c:var(--zx-s1); }
.zr-zx__key--2, .zr-zx__end--2{ --c:var(--zx-s2); }
.zr-zx__key--3, .zr-zx__end--3{ --c:var(--zx-s3); }

.zr-zx__plot{
  display:grid; grid-template-columns:38px minmax(0,1fr) 58px; grid-template-rows:var(--zx-plot, 264px) 30px;
  margin-top:22px;
}
.zr-zx__yaxis, .zr-zx__ends, .zr-zx__xaxis{
  position:relative; font-family:var(--zx-mono); font-size:11.5px; line-height:16px; color:var(--zr-muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.zr-zx__yaxis{ grid-area:1 / 1; }
.zr-zx__yaxis span{ position:absolute; right:10px; top:var(--t); translate:0 -50%; }
.zr-zx__svg{ grid-area:1 / 2; display:block; width:100%; height:100%; overflow:visible; }
.zr-zx__gridline{ fill:none; stroke:var(--zx-tray-line); stroke-width:1; vector-effect:non-scaling-stroke; shape-rendering:crispEdges; }
.zr-zx__line{ fill:none; stroke-width:2.25; stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
.zr-zx__line--1{ stroke:var(--zx-s1); }
.zr-zx__line--2{ stroke:var(--zx-s2); }
.zr-zx__line--3{ stroke:var(--zx-s3); }
/* the value at the end of each line: a ringed dot on the plot's edge, then the number in ink */
.zr-zx__ends{ grid-area:1 / 3; }
.zr-zx__end{ position:absolute; left:0; top:var(--t); translate:0 -50%; padding-left:13px; font-size:12px; font-weight:500; color:var(--bl-ink); }
.zr-zx__end::before{
  content:""; position:absolute; left:-5px; top:50%; translate:0 -50%;
  width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:0 0 0 2px #fff;
}
.zr-zx__xaxis{ grid-area:2 / 2; }
.zr-zx__xaxis span{ position:absolute; left:var(--l); top:12px; translate:-50% 0; }
/* two labels, one per end of the plot: flush with the edge rather than centred on it (ADR-23: no dates) */
.zr-zx__xaxis span:first-child{ translate:0 0; }
.zr-zx__xaxis span:last-child{ translate:-100% 0; }

/* ── the two tables ─────────────────────────────────────────────────────────
   Real tables. The bar between a name and its number is the same number drawn
   (score out of 100; a keyword's volume against the industry's largest), there
   so the eye has something to follow across a 1100px row. */
.zr-zx__table{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:14.5px; line-height:22px; color:var(--bl-ink); }
.zr-zx__table th, .zr-zx__table td{ height:56px; padding:8px 0; text-align:left; vertical-align:middle; font-weight:400; }
.zr-zx__table thead th{ height:44px; padding-block:0; border-bottom:1px solid var(--bl-rule); background:#FCFDFE; }
.zr-zx__table tbody tr + tr > *, .zr-zx__table tfoot tr > *{ border-top:1px solid var(--bl-rule); }
.zr-zx__table tbody tr{ transition:background .16s var(--zr-ease-out-quad); }
.zr-zx__table tbody tr:hover{ background:#FAFBFD; }
.zr-zx__table tbody th{ font-weight:500; }
.zr-zx__table--kw th:first-child{ padding-left:var(--zx-in); }
.zr-zx__table--kw tbody th{ font-weight:400; }
.zr-zx__table .zr-zx__c-rank{ width:60px; padding-left:var(--zx-in); font-family:var(--zx-mono); font-size:12.5px; color:var(--zr-muted); font-variant-numeric:tabular-nums; }
.zr-zx__table .zr-zx__c-num{ width:48%; text-align:right; }
.zr-zx__table .zr-zx__c-chg{ width:104px; padding-right:var(--zx-in); text-align:right; }
.zr-zx__table .zr-zx__c-you{ padding-right:var(--zx-in); }
.zr-zx__you-in{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 16px; }
.zr-zx__co{ display:flex; align-items:center; gap:12px; min-width:0; text-wrap:balance; overflow-wrap:anywhere; }
.zr-zx__co .zr-zx__logo{ --logo:28px; }
/* The bar is drawn on the cell itself: a track and a fill, both pseudo-elements, right up against the number.
   --w is the share (0-1) the page computed; --zx-num is the room kept for the number and the gap before it. */
.zr-zx__table td.zr-zx__c-num{ --zx-num:78px; --zx-track:min(380px, 100% - var(--zx-num)); position:relative; font-variant-numeric:tabular-nums; }
.zr-zx__table tbody td.zr-zx__c-num{ font-weight:500; }
.zr-zx__table--kw tbody td.zr-zx__c-num{ font-weight:400; color:var(--bl-body); }
.zr-zx__table tbody td.zr-zx__c-num::before,
.zr-zx__table tbody td.zr-zx__c-num::after{
  content:""; position:absolute; top:50%; translate:0 -50%; left:calc(100% - var(--zx-num) - var(--zx-track));
  height:6px; border-radius:99px;
}
.zr-zx__table tbody td.zr-zx__c-num::before{ width:var(--zx-track); background:#F1F4F9; }
.zr-zx__table tbody td.zr-zx__c-num::after{ width:calc(var(--zx-track) * var(--w, 0)); background:#B9CFFB; transition:background .16s var(--zr-ease-out-quad); }
.zr-zx__table tbody tr:hover td.zr-zx__c-num::after{ background:#8FB3F9; }
.zr-zx__you td{ color:var(--zr-muted); }
/* the "?" stays level with "Your company" when the link wraps under it on a phone */
.zr-zx__table .zr-zx__you .zr-zx__c-rank{ vertical-align:top; padding-top:19px; }

/* the three ways out to the app, one per card */
.zr-zx__out{
  display:inline-flex; align-items:center; gap:6px; min-height:44px;
  font-size:14px; font-weight:500; line-height:20px; color:var(--zr-blue);
}
.zr-zx__out:hover > span{ text-decoration:underline; text-underline-offset:3px; }
.zr-zx__out svg{ flex:0 0 auto; width:16px; height:16px; transition:translate .2s var(--zr-ease); }
.zr-zx__out:hover svg{ translate:2px -2px; }
.zr-zx__cfoot{ margin:0; padding:4px var(--zx-in); border-top:1px solid var(--bl-rule); }

/* sample prompts: two columns of three, read across */
.zr-zx__prompts{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin:0; padding:0; list-style:none; }
.zr-zx__prompts li{
  display:flex; align-items:flex-start; gap:12px; min-width:0; padding:17px var(--zx-in);
  font-size:14.5px; line-height:22px; color:var(--bl-ink);
}
.zr-zx__prompts li:nth-child(n+3){ border-top:1px solid var(--bl-rule); }
.zr-zx__prompts li:nth-child(odd){ border-right:1px solid var(--bl-rule); }
.zr-zx__prompts li{ text-wrap:pretty; }
.zr-zx__prompts li::before{
  content:""; flex:0 0 auto; width:16px; height:16px; margin-top:3px; background:#9AA3AF;
  -webkit-mask:var(--zx-bubble) center / contain no-repeat; mask:var(--zx-bubble) center / contain no-repeat;
}

/* ── sections under the dashboard ───────────────────────────────────────────── */
.zr-zx__sec{ padding-block:clamp(40px, 4.6vw, 72px); }
.zr-zx__sec--last{ padding-top:clamp(8px, 1vw, 16px); padding-bottom:clamp(56px, 6vw, 96px); }
.zr-zx__head{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px;
  max-width:760px; margin:0 auto clamp(28px, 3.2vw, 44px);
}
.zr-zx__h2{
  margin:0; text-wrap:balance;
  font-size:clamp(28px, 3.4vw, 46px); font-weight:500; line-height:1.16; letter-spacing:-.03em;   /* = .zr-pp__h2 */
  background:var(--zr-head-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.zr-zx__sub{ margin:0; max-width:600px; font-size:16.5px; line-height:26px; color:var(--zr-muted); text-wrap:pretty; }

/* explore all industries: twelve links back up into the dashboard */
.zr-zx__inds{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.zr-zx__inds li{ display:flex; min-width:0; }
.zr-zx__ind{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:14px 12px; width:100%; min-width:0;
  padding:16px 18px 17px; background:#fff; border:1px solid var(--bl-hair); border-radius:18px;
  box-shadow:var(--bl-card-sh);
  transition:border-color .18s var(--zr-ease-out-quad), box-shadow .18s var(--zr-ease-out-quad);
}
.zr-zx__ind:hover{ border-color:var(--zx-hover); box-shadow:0 16px 34px -16px rgba(16,49,110,.22); }
.zr-zx__ind:focus-visible{ border-radius:18px; }
.zr-zx__ind-logos{ display:flex; }
.zr-zx__ind-logos .zr-zx__logo{ --logo:28px; box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(31,36,41,.08); }
.zr-zx__ind-logos .zr-zx__logo + .zr-zx__logo{ margin-left:-7px; }
.zr-zx__ind svg{ grid-area:1 / 2; width:16px; height:16px; color:var(--bl-dim); transition:translate .2s var(--zr-ease), color .16s var(--zr-ease-out-quad); }
.zr-zx__ind:hover svg{ translate:3px 0; color:var(--zr-blue); }
.zr-zx__ind b{ grid-area:2 / 1 / 3 / -1; font-size:16px; font-weight:500; line-height:22px; letter-spacing:-.012em; color:var(--bl-ink); }
.zr-zx__note{ margin:clamp(20px, 2.4vw, 32px) 0 0; text-align:center; font-size:14.5px; line-height:22px; color:var(--zr-muted); }

/* how we track AI prompts: uni.css's link card, standing still */
.zr-zx__how{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin:0; padding:0; list-style:none; }
.zr-zx__step{
  display:flex; flex-direction:column; gap:10px; min-width:0; padding:24px 22px 24px;
  background:#fff; border:1px solid var(--bl-hair); border-radius:18px; box-shadow:var(--bl-card-sh);
}
.zr-zx__step-ico{
  display:grid; place-items:center; width:40px; height:40px; margin-bottom:4px; border-radius:12px;
  background:var(--bg, #E8F0FE); color:var(--fg, var(--zr-blue));
}
.zr-zx__step-ico svg{ width:20px; height:20px; }
.zr-zx__step--violet{ --bg:#F0EBFF; --fg:#5B3FD9; }
.zr-zx__step--green { --bg:#E6F7EE; --fg:#1C7A4F; }
.zr-zx__step--amber { --bg:#FFF3E0; --fg:#9A5B00; }
.zr-zx__step h3{ margin:0; font-size:17px; font-weight:500; line-height:1.3; color:var(--bl-ink); }
.zr-zx__step p{ margin:0; font-size:14px; line-height:22px; color:var(--zr-muted); text-wrap:pretty; }

/* closing strip: bl.css's .zr-news box with two buttons, as on /university */
.zr-zx__cta{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px 48px;
  padding:40px 44px; background:#FBFCFE; border:1px solid var(--bl-hair); border-radius:24px;
}
.zr-zx__cta-copy{ display:flex; flex-direction:column; gap:10px; flex:1 1 380px; min-width:0; }
.zr-zx__cta-h{ margin:0; font-size:clamp(22px, 2vw, 28px); font-weight:500; line-height:1.29; letter-spacing:-.025em; color:var(--bl-ink); text-wrap:balance; }
.zr-zx__cta-p{ margin:0; max-width:560px; font-size:16px; line-height:24px; color:var(--bl-body); text-wrap:pretty; }
.zr-zx__cta-go{ display:flex; flex-wrap:wrap; gap:12px; }
/* the white secondary button of /university, through .zr-btn's own knobs */
.zr-zx__ghost{
  --btn-face:#fff; --btn-face-hi:#FAFBFD; --btn-ink:var(--zr-ink);
  --btn-sheen:transparent; --btn-sheen-hi:transparent; --btn-press:rgba(15,23,42,.14);
  box-shadow:inset 0 0 0 1px #E4E9F0, 0 1px 2px rgba(0,0,0,.06);
}
.zr-zx__ghost:hover{ box-shadow:inset 0 0 0 1px var(--zx-hover), 0 1px 2px rgba(0,0,0,.06); }
.zr-zx__ghost:active{ box-shadow:inset 0 0 0 1px var(--zx-hover), inset 0 3px 8px var(--btn-press); }

/* ── responsive ─────────────────────────────────────────────────────────────── */
@media (max-width:1040px){
  .zr-zx__inds{ grid-template-columns:repeat(3, minmax(0,1fr)); }
  .zr-zx__how{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .zr-zx__table .zr-zx__c-num{ width:42%; }
}
@media (max-width:899px){
  /* one row of tabs that scrolls; it runs out to the screen edges and fades there. The right fade is wider than the
     gutter so a cut-off pill reads as "more this way", and the row's end padding matches it, so the last tab
     clears the fade when the row is scrolled to its end. */
  .zr-zx__tabs{
    margin-inline:calc(-1 * var(--zr-pad));
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 var(--zr-pad), #000 calc(100% - 44px), transparent);
            mask-image:linear-gradient(90deg, transparent, #000 var(--zr-pad), #000 calc(100% - 44px), transparent);
  }
  .zr-zx__tablist{
    flex-wrap:nowrap; justify-content:flex-start; overflow-x:auto; overscroll-behavior-x:contain;
    padding:6px 44px 6px var(--zr-pad); margin-block:-6px; scroll-padding-inline:var(--zr-pad) 44px;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .zr-zx__tablist::-webkit-scrollbar{ display:none; }
  .zr-zx__tab{ min-height:44px; }
  .zr-zx__dash.is-tabs .zr-zx__panel{ scroll-margin-top:calc(116px + var(--zx-tabs-h, 56px)); }
}
@media (max-width:760px){
  .zr-zx{ --zx-in:18px; }
  .zr-zx__frame{ padding:8px; gap:8px; border-radius:24px; }
  .zr-zx__block, .zr-zx__card{ border-radius:16px; }
  .zr-zx__top{ grid-template-columns:minmax(0,1fr); }
  .zr-zx__topcard{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:0 16px; padding-block:18px; }
  .zr-zx__topcard + .zr-zx__topcard{ border-left:0; border-top:1px solid var(--bl-rule); }
  /* name on the left, score on the right: three rows instead of three tall tiles */
  .zr-zx__topcard .zr-zx__label{ grid-area:1 / 2; text-align:right; }
  .zr-zx__topscore{ grid-area:2 / 2; justify-content:flex-end; margin-top:2px !important; }
  .zr-zx__topscore b{ font-size:26px; line-height:34px; }
  .zr-zx__topco{ grid-area:1 / 1 / 3 / 2; margin-top:0 !important; font-size:16.5px; line-height:22px; }
  .zr-zx__topnum{ display:none; }
  .zr-zx__plot{ --zx-plot:228px; grid-template-columns:34px minmax(0,1fr) 54px; }
  .zr-zx__yaxis span{ right:8px; }
  .zr-zx__prompts{ grid-template-columns:minmax(0,1fr); }
  .zr-zx__prompts li:nth-child(n+2){ border-top:1px solid var(--bl-rule); }
  .zr-zx__prompts li:nth-child(odd){ border-right:0; }
  .zr-zx__how{ gap:12px; }
  .zr-zx__cta{ padding:28px; }
}
@media (max-width:680px){
  .zr-zx__inds{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
  .zr-zx__ind{ padding:14px 14px 15px; border-radius:16px; }
  .zr-zx__ind b{ font-size:15px; line-height:21px; }
  /* no room for the bar: rank, name, number, change, on fixed columns so nothing can push the table wider than
     its card. The head label is wider than its 62px column and is let out to the left (a flex-end line overflows
     towards the start; a text-align:right one would overflow to the right, under the change column). */
  .zr-zx__table tbody td.zr-zx__c-num::before, .zr-zx__table tbody td.zr-zx__c-num::after{ display:none; }
  .zr-zx__table{ font-size:14px; }
  .zr-zx__table .zr-zx__c-rank{ width:46px; }
  .zr-zx__table .zr-zx__c-num{ width:62px; }
  .zr-zx__table .zr-zx__c-chg{ width:86px; }
  .zr-zx__table thead .zr-zx__c-num span{ display:flex; justify-content:flex-end; white-space:nowrap; }
  .zr-zx__co{ gap:10px; }
  .zr-zx__co .zr-zx__logo{ --logo:24px; }
  .zr-zx__you-in{ padding-block:4px; }
  /* Under about 400px the three fixed columns plus the mark leave the name less than its longest word, and
     overflow-wrap:anywhere then breaks that word mid-syllable ("Internation al Paper"). Give the name the room
     back: the number keeps its digits, the change keeps its arrow and sign. */
  @media (max-width:420px){
    .zr-zx__table{ font-size:13.5px; }
    .zr-zx__table .zr-zx__c-rank{ width:34px; padding-left:14px; }
    .zr-zx__table .zr-zx__c-num{ width:56px; }
    .zr-zx__table .zr-zx__c-chg{ width:74px; padding-right:14px; }
    .zr-zx__co{ gap:8px; }
    .zr-zx__co .zr-zx__logo{ --logo:22px; }
  }
  .zr-zx__table .zr-zx__you .zr-zx__c-rank{ padding-top:15px; }
  /* every other week on a phone: eight labels do not fit under a 250px plot */
  /* (the x-axis is two words since ADR-23; both fit at every width) */
}
@media (max-width:620px){
  .zr-zx__how{ grid-template-columns:minmax(0,1fr); }
  .zr-zx__cta{ padding:24px 20px; }
  .zr-zx__cta-go{ width:100%; }
  .zr-zx__cta-go .zr-btn{ flex:1 1 100%; }
}

/* Keyboard: Tab scrolls the focused link to the nearest edge, where its block can sit inside the reveal observer's
   excluded bottom band (site.js: threshold .15, -8% bottom margin) and never get .is-in; focus would then land on
   an invisible card. A block that holds the focus is shown, whatever the observer thinks (as uni.css, wall.css).
   Without scripting base.css already shows every [data-reveal]. */
.zr-zx [data-reveal]:focus-within, .zr-faq [data-reveal]:focus-within{ opacity:1; translate:none; filter:none; }
/* Shift+Tab scrolls the focused row to the top edge, which is where the floating nav pill sits */
/* the FAQ section is a sibling of .zr-zx, not a child: it needs the guard by name. This sheet loads on this page
   only, so the other pages that carry a FAQ are untouched. */
.zr-zx :is(a, summary):focus-visible, .zr-faq :is(a, summary):focus-visible{ scroll-margin-block:112px 24px; }

@media (prefers-reduced-motion:reduce){
  /* base.css collapses every animation to one instant run, which would park the marquee at its far end */
  .zr-zx__track{ animation:none; }
  .zr-zx__out:hover svg, .zr-zx__ind:hover svg{ translate:none; }
}