/* RetailRank public site. Every colour, radius and shadow here is the logged-in app's own token
   (retailrank-app/src/shell_head_j.html), so a visitor who signs in meets the product they read about.
   The site adds scale and pacing, never a new colour. As in the app: your brand is blue, sponsored is violet. */
:root{
  --ink:#111733; --text:#141A33; --text-2:#4A5273; --text-3:#606985;
  --blue:#5170FF; --blue-press:#3A54E0; --blue-wash:#EEF1FF; --blue-wash-2:#E1E7FF;
  --canvas:#F5F6FA; --surface:#FFFFFF; --surface-sunken:#FAFBFD;
  --line:#E3E6F0; --line-2:#EEF0F6; --line-strong:#CFD4E4;
  --pos:#0E7C55; --pos-wash:#E8F6EF; --warn:#9A5B08; --warn-wash:#FFF4E3; --neg:#BE2D3A; --neg-wash:#FDEDEE;
  --ad:#6B4EC7; --ad-wash:#F1EDFC; --ad-line:#DFD5F7;
  --c-lowes:#1c56c9; --c-homedepot:#e2621b; --c-wayfair:#7b3fc0; --c-ferguson:#1b7f3b; --c-amazon:#b07a00;
  --slot:#DCE0EB;
  --r-chip:6px; --r-control:8px; --r-card:12px; --r-panel:14px;
  --sh-1:0 1px 2px rgba(17,23,51,.05); --sh-2:0 4px 16px rgba(17,23,51,.09); --sh-3:0 12px 32px rgba(17,23,51,.14);
  --t:140ms cubic-bezier(.2,.6,.3,1);
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --wrap:1180px;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:88px;scroll-behavior:smooth}
body{margin:0;background:var(--surface);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{display:block;height:auto}
a{color:var(--blue-press);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)}
.tab{font-variant-numeric:tabular-nums}
.muted{color:var(--text-3)}
p{margin:0 0 14px;max-width:68ch}

/* type scale: 12 · 14 · 16 · 19 · 22 · 40 · 62 */
h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance}
.eyebrow{display:block;font:600 13px/1.2 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--blue-press);margin:0 0 14px}
.display{font-size:clamp(40px,5.1vw,62px);line-height:1.04;font-weight:800;letter-spacing:-.034em}
.h2{font-size:clamp(28px,3.2vw,40px);line-height:1.12;font-weight:750;letter-spacing:-.025em}
.h3{font-size:22px;line-height:1.28;font-weight:700;letter-spacing:-.014em}
.h4{font-size:16px;line-height:1.35;font-weight:650;letter-spacing:-.006em}
.lede{font-size:19px;line-height:1.6;color:var(--text-2);max-width:58ch;margin:22px 0 0}
.section-head{max-width:780px;margin:0 0 30px}
.section-head .lede{font-size:18px}

/* bands: white is the default ground, canvas marks a change of subject, ink closes the page */
.band{padding:56px 0}
.band.tight{padding:40px 0}
.band.canvas{background:var(--canvas);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:var(--r-control);font:600 15px/1 var(--sans);border:1px solid transparent;cursor:pointer;white-space:nowrap;transition:background var(--t),border-color var(--t),box-shadow var(--t)}
.btn:hover{text-decoration:none}
.btn-primary{background:var(--blue-press);color:#fff;box-shadow:0 1px 2px rgba(58,84,224,.35),inset 0 1px 0 rgba(255,255,255,.14)}
.btn-primary:hover{background:#2E45C4}
.btn-quiet{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-quiet:hover{border-color:var(--ink)}
.btn-sm{height:38px;padding:0 15px;font-size:14px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:34px}
.textlink{font-weight:600;font-size:15px}
.textlink::after{content:' \2192'}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:26px;height:66px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:750;font-size:17px;letter-spacing:-.015em}
.brand:hover{text-decoration:none}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--ink);color:#fff;display:grid;place-items:center;font:800 11.5px/1 var(--sans);letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:2px;flex:1}
.nav > a,.dd > button{display:inline-flex;align-items:center;gap:5px;height:38px;padding:0 11px;border-radius:var(--r-control);color:var(--text-2);font:500 15px/1 var(--sans);background:none;border:0;cursor:pointer;white-space:nowrap}
.nav > a:hover,.dd > button:hover,.dd.open > button{color:var(--ink);background:var(--canvas);text-decoration:none}
.nav > a[aria-current="page"]{color:var(--ink)}
.dd{position:relative}
.dd > button svg{width:12px;height:12px;transition:transform var(--t)}
.dd.open > button svg{transform:rotate(180deg)}
.menu{display:none;position:absolute;top:calc(100% + 8px);left:-8px;min-width:340px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh-3);padding:8px}
.dd.open .menu{display:block}
.dd::after{content:'';position:absolute;left:0;right:0;top:100%;height:10px}
.menu:not(.menu-product) a:not(.btn){display:block;padding:10px 12px;border-radius:var(--r-control);color:var(--ink)}
.menu:not(.menu-product) a:not(.btn):hover{background:var(--canvas);text-decoration:none}
.menu:not(.menu-product) a b{display:block;font-weight:600;font-size:14.5px}
.menu:not(.menu-product) a span{display:block;color:var(--text-3);font-size:13px;line-height:1.45;margin-top:2px}
.menu .menu-foot{border-top:1px solid var(--line-2);margin-top:6px;padding-top:6px}
.menu .menu-foot a{color:var(--blue-press);font-weight:600;font-size:14px}
.prod-promo .btn-primary{color:#fff}
.ret-dot{display:inline-block;width:8px;height:8px;border-radius:2.5px;background:var(--c);margin-right:9px;vertical-align:1px}
.head-actions{display:flex;align-items:center;gap:10px}
.head-actions .login{color:var(--text-2);font-weight:500;font-size:15px;padding:0 8px;white-space:nowrap}
.burger{display:none;width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface);cursor:pointer;margin-left:auto}
.burger span,.burger span::before,.burger span::after{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;margin:0 auto;position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0}
.burger span::before{top:-6px}.burger span::after{top:6px}


/* the Product mega-menu: a left rail switching between Solutions and Features, and a promo rail.
   Every display rule that overrides .menu is scoped to the same open-state selector, so it cannot lose
   a specificity race with .dd.open .menu the way an earlier bare-class version did. */
.sprite{display:none}
.ico{width:18px;height:18px;flex:none}
.menu-product{width:1000px;left:-12px;padding:0;overflow:hidden}
.dd.open .menu.menu-product{display:flex}
/* Hover opens the menu only where there is real hover and the desktop nav is showing. Focus no longer
   reveals it at all, which is what let the burger expand the mega-menu with no tap. */
@media (hover:hover) and (min-width:1181px){ .dd:not(.shut):hover .menu{display:block} .dd:not(.shut):hover .menu.menu-product{display:flex} }
.prod-rail{width:190px;flex:none;padding:12px;border-right:1px solid var(--line-2)}
.prod-tab{display:flex;align-items:center;gap:10px;width:100%;padding:11px 12px;border-radius:var(--r-control);border:0;background:none;font:650 15px var(--sans);color:var(--ink);cursor:pointer;text-align:left}
.prod-tab .ico{color:var(--blue-press)}
.prod-tab .arrow{margin-left:auto;width:12px;height:12px;color:var(--text-3);opacity:0}
.prod-tab:hover{background:var(--canvas);color:var(--ink)}
.prod-tab.active{background:var(--blue-wash);color:var(--ink)}
.prod-tab.active .ico,.prod-tab.active .arrow{color:var(--blue-press)}
.prod-tab.active .arrow{opacity:1}
.prod-panels{flex:1;padding:18px 10px;min-width:0}
.prod-panel[hidden]{display:none}
/* Solutions: one card each, carrying the outcome and the sections inside it */
.panel-solutions{display:grid;gap:4px}
.sol-card{display:block;padding:13px 14px;border-radius:var(--r-card);color:var(--ink)}
.sol-card:hover{background:var(--canvas);text-decoration:none}
.sol-card .sol-head{display:flex;align-items:center;gap:9px}
.sol-card .sol-head .ico{color:var(--blue-press)}
.sol-card .sol-head b{font-weight:650;font-size:15px;color:var(--ink)}
.sol-card .sol-tag{margin-left:auto;font:600 11px/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--text-3)}
.sol-card .sol-outcome{display:block;font-size:13.5px;color:var(--text-2);margin:5px 0 0 27px}
.sol-card .sol-inside{display:block;font:400 12.5px/1.6 var(--sans);color:var(--text-2);margin:7px 0 0 27px}
/* Features: the same three names as column labels, so the mapping is obvious */
.panel-features{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 8px}
.panel-features .glabel{display:block;font:650 12px/1 var(--sans);letter-spacing:.01em;color:var(--ink);padding:0 10px 10px}
.panel-features a{display:flex;gap:9px;align-items:flex-start;padding:7px 10px;border-radius:var(--r-control);color:var(--ink)}
.panel-features a:hover{background:var(--canvas);text-decoration:none}
.panel-features .ico{color:var(--text-3);margin-top:2px}
.panel-features b{display:block;font-weight:650;font-size:13.5px;line-height:1.3;color:var(--ink)}
.panel-features .d{display:block;color:var(--text-3);font-size:11.5px;line-height:1.35;margin-top:1px}
.prod-promo{width:230px;flex:none;background:var(--canvas);border-left:1px solid var(--line);padding:18px;display:flex;flex-direction:column;gap:12px;justify-content:flex-start}
.prod-promo h5{margin:0;font:600 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.prod-promo .tile{display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.prod-promo .tile:hover{text-decoration:none;border-color:var(--line-strong)}
.prod-promo .tile img{display:block;width:100%;height:70px;object-fit:cover;object-position:top}
.prod-promo .tile .cap{display:block;padding:8px 10px}
.prod-promo .tile .cap b{display:block;font-size:12.5px;font-weight:650;color:var(--ink)}
.prod-promo .tile .cap span{display:block;font-size:11px;color:var(--text-3);margin-top:1px}
.prod-promo .rail-link{font-size:12.5px;font-weight:600;color:var(--ink)}
.prod-promo .btn{margin-top:4px;width:100%}
/* one call to action, and the line that does the converting */
.cta-band{display:flex;flex-direction:column;gap:14px}
.cta-band > div{display:flex;flex-wrap:wrap;gap:12px}
.cta-sub{margin:0;font-size:14.5px;color:var(--text-2);max-width:56ch}
.page-head .cta-band{margin-top:34px}
/* the answer block: the page's own question, answered before anything elaborates on it */
.answer{margin:0 0 34px;padding:24px 26px;background:var(--surface-sunken);border:1px solid var(--line);border-left:3px solid var(--blue);border-radius:var(--r-card)}
.answer p{margin:10px 0 0;max-width:70ch;font-size:16.5px;color:var(--text)}
/* who we are, for a reader who arrived from a search and has never heard of us */
.who-we-are{margin:20px 0 0;font-size:14px;line-height:1.55;color:var(--text-3);max-width:62ch}
.foot-label{display:block;font:500 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:#7D86A6;margin:16px 0 9px}
.foot-label:first-of-type{margin-top:0}
.foot-note{margin:14px 0 0;color:#9AA2BF;font-size:13px;line-height:1.55;max-width:34ch}
.foot-note a{text-decoration:underline;text-underline-offset:2px}
@media (max-width:900px){ .menu-wide{min-width:0;grid-template-columns:1fr} }


/* a feature section on a solution page: its own anchor, its own screen, the outcome first */
.feature{padding:40px 0;border-top:1px solid var(--line)}
.feature:first-of-type{border-top:0;padding-top:8px}
.feature{border-top:0}
.feature + .feature{border-top:1px solid var(--line)}
.feature-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:44px;align-items:start}
.feature-copy .kicker{display:flex;align-items:center;gap:8px;font:600 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--blue-press);margin-bottom:14px}
.feature-copy .kicker .ico{width:15px;height:15px}
.feature-copy .h3{font-size:24px;margin-bottom:10px}
.feature-copy p{font-size:15.5px;color:var(--text-2);margin:0 0 10px}
.feature-copy .bullets{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.feature-copy .bullets li{display:flex;gap:10px;font-size:14.5px;color:var(--text-2)}
.feature-copy .bullets li::before{content:'';flex:none;width:5px;height:5px;border-radius:2px;background:var(--blue);margin-top:8px}
.feature.reverse .feature-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.feature.solo .feature-grid{grid-template-columns:minmax(0,1fr)}
.feature.solo .feature-shot{display:none}
.feature.solo .feature-copy p,.feature.solo .feature-copy .bullets{max-width:76ch}
.feature.reverse .feature-copy{order:2}
.feature.reverse .feature-shot{order:1}
.sol-jump{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.sol-jump a{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--line);border-radius:100px;font-size:13.5px;font-weight:500;color:var(--text-2);background:var(--surface)}
.sol-jump a:hover{text-decoration:none;border-color:var(--line-strong);color:var(--ink)}
.sol-jump a .ico{width:15px;height:15px;color:var(--text-3)}
.feature-grid > *{min-width:0}
@media (max-width:1040px){ .feature-grid,.feature.reverse .feature-grid{grid-template-columns:1fr;gap:28px} .feature.reverse .feature-copy{order:1} .feature.reverse .feature-shot{order:2} }
@media (max-width:1180px){ .menu-product{width:auto;left:0} .prod-rail{width:auto;border-right:0;border-bottom:1px solid var(--line-2);display:flex;gap:6px} .prod-promo{display:none} .panel-features{grid-template-columns:1fr} }

/* hero */
.hero{padding:76px 0 88px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:52px;align-items:center}
.hero .aside{margin-top:18px;font-size:14px;color:var(--text-3)}

/* the page-1 strips: the app's slot strip, one row per retailer, 24 slots each */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);box-shadow:var(--sh-3);padding:22px 22px 18px}
.panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.panel-head .h4{font-size:15px}
.panel-head .when{font:500 12px/1 var(--mono);color:var(--text-3)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--text-2);margin:10px 0 4px}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:11px;height:11px;border-radius:3px;background:var(--c)}
.legend i.ka{box-shadow:inset 0 0 0 2.5px var(--ad)}
.strip{padding:13px 0 12px;border-top:1px solid var(--line-2)}
.strip:first-of-type{border-top:0}
.legend + .strip,.panel-note + .strip{border-top:0}
.strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px}
.ret{display:inline-flex;align-items:center;gap:8px;font-weight:650;font-size:14px;color:var(--ink)}
.ret::before{content:'';width:9px;height:9px;border-radius:2.5px;background:var(--c)}
.strip-shelf{font:400 12px/1.2 var(--mono);color:var(--text-3);text-align:right}
.cells{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:3px}
.cells i{display:block;height:26px;border-radius:3px;background:var(--slot)}
.cells i.k{background:var(--blue)}
.cells i.s{background:var(--ad)}
.cells i.ka{background:var(--blue);box-shadow:inset 0 0 0 2.5px var(--ad)}
.cells i.x{background:transparent;box-shadow:inset 0 0 0 1px var(--line-strong)}
.strip-foot{font:400 12px/1.2 var(--mono);color:var(--text-3);margin-top:8px}
.strip-foot b{color:var(--ink);font-weight:600}
.panel .finding{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:14.5px;color:var(--text-2)}

/* coverage line */
.coverage{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.coverage .who{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px}
.coverage .who > span:first-child{font-size:14px;color:var(--text-3);margin-right:4px}
.coverage .ret{font-size:15px}
.coverage .any{font-size:14px;color:var(--text-2)}
.stats{display:flex;gap:36px}
.stat b{display:block;font-size:28px;line-height:1.05;font-weight:750;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.stat span{font:400 12px/1.4 var(--mono);color:var(--text-3)}


/* what we measure: five verb-led lines, the plainest answer to what this company does */
.measures{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 44px;max-width:860px}
.measures li{display:flex;gap:11px;font-size:16px;line-height:1.5;color:var(--text)}
.measures li::before{content:'';flex:none;width:7px;height:7px;border-radius:2px;background:var(--blue);margin-top:9px}
/* the scope line: what the page does not claim, in one sentence rather than a panel of denials */
.scope-line{font-size:14.5px;line-height:1.6;color:var(--text-3);max-width:92ch;margin:0}
@media (max-width:760px){ .measures{grid-template-columns:1fr} }

/* cards */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;box-shadow:var(--sh-1)}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.grid-3 > *,.grid-2 > *{min-width:0}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.grid-2.fit{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.job{display:flex;flex-direction:column;gap:12px}
.job .kicker{font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-press)}
.job p{color:var(--text-2);font-size:15.5px;margin:0}
.job .fig{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-2)}


/* hero outcome bullets: the three jobs, before any mention of how */
.outcome-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:12px;max-width:60ch}
.outcome-list li{display:flex;gap:10px;font-size:16px;line-height:1.55;color:var(--text-2)}
.outcome-list li::before{content:'';flex:none;width:6px;height:6px;border-radius:2px;background:var(--blue);margin-top:10px}
.outcome-list b{color:var(--ink);font-weight:650}
.panel-note{margin:2px 0 14px;font-size:13px;line-height:1.5;color:var(--text-3)}
/* solutions, in two labelled groups, so six offerings read as structure and not as inflation */
.card.svc .h4{font-size:17px;letter-spacing:-.01em}

/* figures: the visual, one sentence, the same numbers as a table */
.fig{margin:0}
.fig svg.chart{display:block;width:100%;max-width:520px;height:auto}
.fig figcaption .finding{font-size:14.5px;line-height:1.5;color:var(--text);font-weight:500;margin:12px 0 4px}
.fig .source{font:400 11.5px/1.4 var(--mono);color:var(--text-3);margin:0}
.chart .grid{stroke:var(--line-2);stroke-width:1}
.chart .axis{fill:var(--text-3);font:400 11px var(--mono)}
.chart .label{fill:var(--text-2);font:500 12.5px var(--sans)}
.chart .val{fill:var(--ink);font:600 12.5px var(--sans)}
.chart .val.dim{fill:var(--text-3);font-weight:500}
details.numbers{margin-top:10px;font-size:13px}
details.numbers summary{cursor:pointer;color:var(--blue-press);font-weight:500;list-style:none;display:inline-flex;align-items:center;gap:6px}
details.numbers summary::-webkit-details-marker{display:none}
details.numbers summary::before{content:'+';font:600 13px var(--mono)}
details.numbers[open] summary::before{content:'\2212'}
.tbl{overflow-x:auto;margin-top:8px}
/* A chart's screen-reader table sits in a 1px .sr box; as a scroller it became an invisible Tab stop. */
.sr .tbl{overflow:visible}
.tbl table{border-collapse:collapse;width:100%;font-size:13px}
.tbl th{text-align:left;font-weight:600;color:var(--text-2);border-bottom:1px solid var(--line);padding:6px 10px 6px 0;white-space:nowrap}
.tbl td{border-bottom:1px solid var(--line-2);padding:6px 10px 6px 0;color:var(--text)}

/* product screen */
.shot{margin:0}
.shot .frame{border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden;background:var(--surface);box-shadow:var(--sh-3)}
.shot .bar{height:30px;background:var(--surface-sunken);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 12px}
.shot .bar i{width:9px;height:9px;border-radius:50%;background:var(--line-strong)}
.shot .bar span{margin-left:10px;font:400 11.5px/1 var(--mono);color:var(--text-3)}
.shot figcaption{font:400 10.5px/1.5 var(--mono);color:var(--text-3);margin-top:8px;text-align:right}
.proof-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:56px;align-items:start}
.callouts{display:flex;flex-direction:column;gap:26px;padding-top:8px}
.callouts .h4{margin-bottom:6px}
.callouts p{color:var(--text-2);font-size:15.5px;margin:0}


/* a scenario card: the concrete story beside a capability, where a screenshot would say less */
.scenario{background:var(--surface-sunken);border-left:3px solid var(--ad)}
.scenario .kicker{font:600 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ad)}
.scenario p{font-size:15px;color:var(--text-2);margin:0 0 10px}
.scenario .scenario-out{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);color:var(--text)}
.scenario .scenario-out b{color:var(--ink)}

/* steps: a real sequence, so it is numbered */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;counter-reset:step}
.step{border-top:2px solid var(--ink);padding-top:18px}
.step .n{font:500 12px/1 var(--mono);color:var(--text-3);margin-bottom:14px;display:block}
.step p{color:var(--text-2);font-size:15.5px;margin:8px 0 0}


/* the retailer mechanics table: real prose per row, a source link, and the date it was checked */
.tbl.mechanics table{font-size:14.5px}
.tbl.mechanics th:first-child,.tbl.mechanics td:first-child{width:62%}
.tbl.mechanics td{padding:14px 16px 14px 0;vertical-align:top;line-height:1.55}
.tbl.mechanics td a{font-size:13px;font-weight:600}
.tbl.mechanics td .checked{display:block;margin-top:4px;font-size:11.5px;color:var(--text-3)}

/* what is specific to a retailer: the claims themselves, no citations, no dates */
.mechanics-list{list-style:none;padding:0;margin:0;display:grid;gap:0}
.mechanics-list li{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line-2);font-size:15.5px;line-height:1.6;color:var(--text);max-width:92ch}
.mechanics-list li:first-child{border-top:0;padding-top:0}
.mechanics-list li::before{content:'';flex:none;width:6px;height:6px;border-radius:2px;background:var(--blue);margin-top:10px}

/* what a brand can and cannot see natively: proof of domain knowledge, not a trust badge */
.visibility-split .formats li::before{content:'';display:none}
.visibility-split .formats{gap:8px}
.visibility-split .formats li{font-size:14.5px;padding-left:16px;position:relative}
.visibility-split .formats li::before{content:'\2013';display:inline;position:absolute;left:0;color:var(--text-3)}
/* decision ai / managed intelligence: the one slot that keeps the two apart */
.who-does-work{margin-top:20px;padding:16px 18px;border-radius:var(--r-card);background:var(--blue-wash);border:1px solid var(--blue-wash-2)}

/* services */
.svc{display:flex;flex-direction:column;gap:10px;color:var(--text);transition:border-color var(--t),box-shadow var(--t)}
.svc:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:var(--sh-2)}
.svc .h3{font-size:20px}
.svc p{color:var(--text-2);font-size:15.5px;margin:0}
.svc .go{margin-top:auto;padding-top:8px;font-weight:600;font-size:14.5px;color:var(--blue-press)}
.svc .go::after{content:' \2192'}
.svc .for{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}

/* research teaser */
.research-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:center}
.formats{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:10px}
.formats li{display:flex;gap:12px;font-size:15px;color:var(--text-2)}
.formats.limits{margin-top:14px}
.formats li .ret{min-width:108px}

/* the four ways in */
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.way{display:flex;flex-direction:column;gap:8px;padding:24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);color:var(--text);transition:border-color var(--t),box-shadow var(--t)}
.way:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:var(--sh-2)}
.way.primary{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.way .way-k{font:500 11.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.way b{font-size:18px;color:var(--ink);letter-spacing:-.01em}
.way > span:last-child{color:var(--text-2);font-size:14.5px;line-height:1.5}


/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.plan{display:flex;flex-direction:column;gap:10px;padding:26px 24px}
.plan .plan-title{display:flex;align-items:center;gap:10px;justify-content:space-between}
.plan .price{margin:2px 0 0}
.plan .who{margin:0}
.plan .who{color:var(--text-3);font-size:14px;margin:0}
.plan .price{font-size:30px;font-weight:750;letter-spacing:-.02em;color:var(--ink);margin:6px 0 2px;font-variant-numeric:tabular-nums}
.plan .price:not(.figure){font-size:21px;font-weight:700;color:var(--text-2)}
.plan .price span{display:block;font:400 12px/1.4 var(--mono);color:var(--text-3);letter-spacing:0}
.plan .has{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:10px;font-size:14.5px;color:var(--text-2)}
.plan .has li{display:flex;gap:10px}
.plan .has li::before{content:'';flex:none;width:6px;height:6px;border-radius:2px;background:var(--blue);margin-top:8px}
.plan .btn{margin-top:auto;align-self:flex-start}
/* an unconfirmed figure is marked on the page rather than guessed */
.tbd{display:inline-block;font:500 12px/1 var(--mono);color:var(--warn);background:var(--warn-wash);border:1px dashed currentColor;border-radius:var(--r-chip);padding:5px 8px;vertical-align:2px}
@media (max-width:1040px){ .plans{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .plans{grid-template-columns:1fr} }


/* the three solutions, as tiles on the homepage and the about page */
.sol-tile{display:flex;flex-direction:column;gap:8px;color:var(--text);transition:border-color var(--t),box-shadow var(--t)}
.sol-tile:hover{text-decoration:none;border-color:var(--line-strong);box-shadow:var(--sh-2)}
.sol-tile .sol-head{display:flex;align-items:center;gap:9px}
.sol-tile .sol-head .ico{color:var(--blue-press);width:20px;height:20px}
.sol-tile .sol-head b{font-size:19px;font-weight:700;letter-spacing:-.014em;color:var(--ink)}
.sol-tile .sol-tag{font:600 11px/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--text-3)}
.sol-tile p{color:var(--text-2);font-size:15px;margin:4px 0 0}
.sol-tile .sol-outcome{font-size:14.5px;font-weight:600;color:var(--ink);margin-top:4px}
.sol-tile .sol-inside{font:400 12.5px/1.6 var(--sans);color:var(--text-2);padding-top:10px;margin-top:4px;border-top:1px solid var(--line-2)}
.sol-tile .go{margin-top:auto;padding-top:10px;font-weight:600;font-size:14.5px;color:var(--blue-press)}
.sol-tile .go::after{content:' \2192'}
/* pricing: six plans, and the notes the production page carried */
.plans.plans-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.plan-tag{flex:none;font:500 10.5px/1 var(--mono);letter-spacing:.05em;text-transform:uppercase;color:var(--ad);background:var(--ad-wash);border:1px solid var(--ad-line);border-radius:var(--r-chip);padding:5px 7px}
.plan-foot{font-size:12px;color:var(--text-3);margin:0}
.plan-note{font-size:13px;line-height:1.5;color:var(--text-3);margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line-2)}
.plan .has a{color:var(--text-2);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:2px}
.plan .has a:hover{color:var(--blue-press);text-decoration-color:currentColor}
.disclaimer{font-size:12.5px;line-height:1.6;color:var(--text-3);max-width:80ch;margin:0}
@media (max-width:1040px){ .plans.plans-6{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .plans.plans-6{grid-template-columns:1fr} }

/* subscribe */
.subscribe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center;margin:0;padding:40px 44px;border-radius:var(--r-panel);background:var(--blue-wash)}
.subscribe p{color:var(--text-2);margin:8px 0 0;font-size:15.5px}
.subscribe form{display:flex;flex-wrap:wrap;gap:10px}
.subscribe input{flex:1;min-width:220px;height:46px;border:1px solid var(--line-strong);border-radius:var(--r-control);padding:0 14px;font:400 15px var(--sans);color:var(--ink);background:var(--surface)}
.subscribe input:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form-msg{flex-basis:100%;margin:2px 0 0;font-size:14px;color:var(--text-2);min-height:20px}
.form-msg.ok{color:var(--pos)}
.form-msg.err{color:var(--neg)}


/* the ask form */
.ask{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:26px}
.ask .wide{grid-column:1 / -1}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13.5px;font-weight:600;color:var(--text-2)}
.field label .opt{font-weight:400;color:var(--text-3)}
.field input,.field textarea{border:1px solid var(--line-strong);border-radius:var(--r-control);padding:11px 13px;font:400 15px/1.5 var(--sans);color:var(--ink);background:var(--surface);width:100%}
.field input{height:46px;padding:0 13px}
.field textarea{resize:vertical;min-height:92px}
.field input:focus,.field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.ask .actions{margin-top:0}
@media (max-width:600px){ .ask{grid-template-columns:1fr} }

/* footer */
.site-footer{background:var(--ink);color:#B9C0D8;padding:64px 0 36px;font-size:14.5px}
.site-footer a{color:#DDE2F2}
.site-footer .brand{color:#fff}
.site-footer .brand .mark{background:#fff;color:var(--ink)}
.foot-top{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(4,minmax(0,1fr));gap:32px}
.foot-top h4{color:#fff;font-size:13px;font-weight:600;letter-spacing:.02em;margin:0 0 14px}
.foot-top ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot-brand p{margin:16px 0 0;max-width:30ch;color:#9AA2BF}
.foot-bottom{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font:400 12px/1.4 var(--mono);color:#8D95B3}

/* page heads for inner pages */
.page-head{padding:48px 0 32px;border-bottom:1px solid var(--line)}
.crumbs{font:400 12.5px/1 var(--mono);color:var(--text-3);margin-bottom:18px}
.crumbs a{color:var(--text-3)}
.stub-note{margin-top:28px;padding:16px 18px;border:1px dashed var(--line-strong);border-radius:var(--r-card);color:var(--text-2);font-size:15px;background:var(--surface-sunken)}

@media (max-width:1040px){
  .hero-grid,.proof-grid,.research-grid{grid-template-columns:1fr;gap:44px}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps,.ways{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-top{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subscribe{grid-template-columns:1fr}
}
@media (max-width:1180px){
  .nav,.head-actions{display:none}
  .burger{display:inline-block}
  /* the open menu is part of the header's normal flow, so nothing can be pinned to a stale height */
  .site-header.menu-open .wrap{flex-wrap:wrap;height:auto;padding-bottom:16px}
  .site-header.menu-open .nav{display:flex;flex-direction:column;align-items:stretch;width:100%;flex:0 0 100%;order:3;gap:2px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line-2)}
  .site-header.menu-open .head-actions{display:flex;width:100%;flex:0 0 100%;order:4;gap:10px;margin-top:10px}
  .site-header.menu-open .head-actions .btn{flex:1}
  .menu-product{flex-direction:column}
  .prod-rail{flex:none;width:auto;border-right:0;border-bottom:1px solid var(--line-2);display:flex;gap:6px}
  .prod-panels{padding:14px 0}
  .prod-promo{display:none}
  .menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;min-width:0}
  
  .band{padding:72px 0}
}
@media (max-width:600px){
  .steps,.ways{grid-template-columns:1fr}
  .stats{gap:24px}
  .cells i{height:20px}
  .foot-top{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* tap targets: on a phone an inline text link is only as tall as its line box, which measured 16 to
   19px across the footer, the crumbs and the textlinks. Padding grows the hit area without moving
   anything at desktop widths. */
@media (max-width:760px){
  .site-footer ul a,.site-footer .foot-note a{display:inline-block;padding:7px 0}
  .foot-bottom a{display:inline-block;padding:8px 0}
  .site-footer ul{gap:2px}
  .textlink{display:inline-block;padding:7px 0}
  .crumbs a{display:inline-block;padding:10px 0}
  .plan .has a{display:inline-block;padding:5px 0}
  .mechanics-list a{display:inline-block;padding:5px 0}
  .menu:not(.menu-product) a{padding:12px 12px}
  .nav > a{min-height:44px}
}

@media (max-width:600px){
  /* at 9.45px a 2.5px inset ring is undecodable, and that ring is the hero's central distinction */
  .cells i.ka,.legend i.ka{box-shadow:none;background:linear-gradient(135deg,var(--blue) 0 50%,var(--ad) 50% 100%)}
  .grid-3{grid-template-columns:1fr}
}

/* ---- touch targets ------------------------------------------------------------------------
   Measured, not assumed: at 768px the standalone link lists were rendering 15 and 16px rows,
   because the only touch rule stopped at 760px and a tablet is still a finger. Padded here up to
   1024px. Links that sit inline inside a sentence are deliberately NOT padded: WCAG 2.5.8 exempts
   them, and padding them shifts the body copy around them for no gain. This block is last in the
   file on purpose, so it cannot lose a source-order tie the way two earlier rules here did. */
@media (max-width:1024px){
  .site-footer ul li{margin:0}
  .site-footer ul a{display:block;min-height:44px;padding:11px 0;line-height:1.45}
  .foot-note a,.foot-bottom a{display:inline-block;min-height:44px;padding:13px 4px;line-height:1.4;vertical-align:middle}
  .crumbs a{display:inline-block;min-height:44px;padding:13px 4px;line-height:1.4;vertical-align:middle}
  /* a textlink that is a paragraph's only child is a standalone control, not an inline link */
  p > .textlink:only-child{display:inline-block;min-height:44px;padding:13px 2px;line-height:1.4}
  .sol-jump a{min-height:44px;display:inline-flex;align-items:center}
}

@media (max-width:1024px){
  /* the footer logo is a real control (it goes home); it was the 30px link my lumped measurement
     was reporting as a failing nav link */
  .foot-brand .brand{min-height:44px;display:inline-flex;align-items:center;gap:8px}
}

/* Long-form legal text: measured at ~86 characters a line on a wide screen, which is past
   comfortable reading. Constrained here rather than left to inherit the band width. */
.legal{max-width:72ch}
.legal h2{margin-top:34px}
.legal p + p{margin-top:12px}
.legal .formats{margin-top:12px}
.card.svc.flagship{display:block}
.card.svc.flagship .lede{font-size:16.5px}

/* Legal long-form: .formats is markerless and text-2 coloured, which made the service components on
   /terms read as grey paragraphs. Legal text gets a real list and body colour. */
.legal h2{margin:34px 0 10px}
.legal-list{margin:12px 0 0;padding-left:22px;display:grid;gap:8px;list-style:disc}
.legal-list li{color:var(--text-1);font-size:inherit}
.legal .legal-list + p{margin-top:14px}

/* The flagship report card filled its left half and left the right half empty. */
.card.svc.flagship{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px;align-items:start}
.flagship-meta{display:grid;gap:18px;padding-left:28px;border-left:1px solid var(--line)}
.flagship-meta h4{margin:0 0 5px;font:600 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.flagship-meta p{margin:0;font-size:14.5px;color:var(--text-2);line-height:1.5}
@media (max-width:860px){
  .card.svc.flagship{grid-template-columns:1fr;gap:22px}
  .flagship-meta{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:20px}
}

/* The four things we measure were sitting loose on the canvas with nothing holding them, which read
   as unfinished next to every other block on the page. */
.measures-box{margin-top:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--sh-1);padding:28px 30px}
.measures-box .measures{max-width:none;gap:16px 48px}
@media (max-width:760px){ .measures-box{padding:22px} }

/* Implementations: two screenshots across, because three dense app screens on a 1180px page would be
   about 373px each and unreadable. A lone third takes the full width rather than sitting in a half
   column beside a gap. */
.impl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:26px}
.impl-grid > *{min-width:0}
.impl-grid > figure:last-child:nth-child(odd){grid-column:1 / -1}
.impl-grid figcaption{font-weight:600;color:var(--ink)}
@media (max-width:860px){ .impl-grid{grid-template-columns:1fr;gap:22px} }

/* The four measures use icons rather than bullet squares. */
.measures li::before{content:none;display:none}
.measures li .ico{flex:none;width:19px;height:19px;color:var(--blue-press);margin-top:1px}

/* The in-page call to action was sitting flush against the jump pills and reading as a fifth pill,
   with its caption orphaned underneath. Separated and set on one row so it reads as one control. */
.sol-jump + .cta-band{margin-top:24px;padding-top:22px;border-top:1px solid var(--line);
  flex-direction:row;align-items:center;gap:18px;flex-wrap:wrap}
.sol-jump + .cta-band .cta-sub{margin:0}
.hero .cta-band{margin-top:32px}
@media (max-width:600px){ .sol-jump + .cta-band{flex-direction:column;align-items:flex-start;gap:12px} }

/* ---- logo: the three-bar glyph from the RetailRank design, set with Altavane in its geometric face ---- */
.brand{gap:9px}
.brand .logo-glyph{height:19px;width:auto;flex:none;fill:var(--blue);display:block}
.brand .wordmark{font-family:'Poppins',var(--sans);font-weight:500;font-size:22px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.site-footer .brand .wordmark{color:#fff}
.site-footer .brand .logo-glyph{fill:#8EA2FF}

/* ---- solution pages: one compact head. The lede repeated the answer block and the page head and the
   band beneath it each carried their own padding, which is where the empty space came from. ---- */
.band.solhead{padding:36px 0 40px;border-bottom:1px solid var(--line)}
.band.solhead h1{margin:0 0 20px}
.band.solhead .answer{margin:0}
.feature{padding:32px 0}

/* ======== retailer pages, modelled on a product landing page: a pinned section bar, a hero with the
   product beside the call to action, containers all the way down, long detail behind accordions ======== */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
[id^="anc_"]{scroll-margin-top:32px}
.rnav{position:sticky;top:66px;z-index:40;background:rgba(255,255,255,.95);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.rnav .wrap{display:flex;align-items:center;gap:20px;height:52px}
.rnav-name{font-weight:650;font-size:14.5px;color:var(--ink);white-space:nowrap;padding-right:18px;border-right:1px solid var(--line)}
.rnav-links{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;min-width:0}
.rnav-links::-webkit-scrollbar{display:none}
.rnav-links a{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:var(--r-control);font-size:14px;font-weight:500;color:var(--text-2);white-space:nowrap}
.rnav-links a:hover{color:var(--ink);background:var(--canvas);text-decoration:none}
.rnav-links a.on{color:var(--ink);background:var(--blue-wash)}
.rhero{padding:40px 0 44px}
.rhero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:48px;align-items:center}
.rhero-grid > *{min-width:0}
.rhero .crumbs{margin:0 0 14px}
.rhero h1{margin:0 0 14px}
.rhero .lede{margin:0}
.rhero .cta-band{margin-top:26px}
.rchecks{list-style:none;padding:0;margin:36px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.rchecks li{display:flex;gap:11px;align-items:flex-start;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--surface);box-shadow:var(--sh-1);font-size:14.5px;line-height:1.45;color:var(--text);min-width:0}
.rchecks .ico{flex:none;width:19px;height:19px;color:var(--blue-press);margin-top:1px}
.routcomes{margin-top:22px}
.acc{border-top:1px solid var(--line);margin-top:18px}
.acc > summary{cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;min-height:48px;padding:10px 0;font-weight:600;font-size:15px;color:var(--ink)}
.acc > summary::-webkit-details-marker{display:none}
.acc > summary::after{content:'+';flex:none;font:500 22px/1 var(--sans);color:var(--blue-press)}
.acc[open] > summary::after{content:'\2212'}
.acc > summary:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
.acc-body{padding:2px 0 14px}
.acc-body > p{margin:0 0 14px;color:var(--text-2);max-width:78ch}
.rsum{padding:26px 28px}
.rsum > .lede{margin:0;max-width:72ch}
.rvis{align-items:start}
.rvis-col{padding:24px 26px}
.rvis-metric{display:flex;align-items:baseline;gap:12px;padding-bottom:12px;margin-bottom:2px;border-bottom:1px solid var(--line)}
.rvis-metric b{font:700 36px/1 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.rvis-metric span{font-size:14.5px;font-weight:600;color:var(--text-2)}
.rvis-col .acc{margin-top:0}
.rvis-metric + .acc,.rvis-metric + .rvis-plain{border-top:0}
.acc-item > summary{font-weight:500;font-size:14.5px;line-height:1.45;min-height:46px}
.acc-item .acc-body > p{font-size:14.5px}
.rvis-plain{margin:0;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5;color:var(--text)}
.rscope{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:center;padding:24px 28px}
.rscope .eyebrow{margin-bottom:6px}
.rscope h2{margin:0}
.rscope p{margin:0;color:var(--text-2)}
.faq-acc{max-width:880px;border-bottom:1px solid var(--line)}
.faq-acc .acc{margin-top:0}
.acc-faq > summary{font-size:16px}
@media (max-width:1180px){ .band{padding:52px 0} }
@media (max-width:1040px){
  .rhero-grid{grid-template-columns:1fr;gap:30px}
  .rchecks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rscope{grid-template-columns:1fr;gap:10px}
}
@media (max-width:760px){
  .rnav-name{display:none}
  .rnav .wrap{height:50px}
  .rchecks{grid-template-columns:1fr;margin-top:28px}
  .rsum,.rvis-col,.rscope{padding:20px}
  .rhero{padding:28px 0 36px}
  .band{padding:44px 0}
}
@media (max-width:1024px){ .rnav-links a{min-height:44px} }

/* ---- hardening pass 1, adjudicated findings ---- */
/* C4: .rnav-links scrolls horizontally, which clips an outline drawn outside the link. */
.rnav-links a:focus-visible{outline-offset:-2px}
/* C5: three cards in a two-column grid left the third alone at half width. */
@media (max-width:1040px) and (min-width:601px){ .grid-3 > :last-child:nth-child(odd){grid-column:1 / -1} }
/* C7: the burger menu is live up to 1180px, but the 44px rule only reached 760px. */
@media (max-width:1180px){ .site-header.menu-open .nav > a,.site-header.menu-open .dd > button,.site-header.menu-open .head-actions .btn{height:44px} .site-header.menu-open .head-actions .login{display:inline-flex;align-items:center;height:44px} }
/* C8: plan buttons were btn-sm, 38px. */
@media (max-width:1024px){ .plan .btn.btn-sm{height:44px} }
/* C13: the stacked scope card left a quarter of itself empty. */
@media (max-width:1040px){ .rscope p{max-width:none} }

/* Every .kicker rule was scoped (.feature-copy, .job, .scenario), so the Protect / Optimize / Grow labels
   on the retailer pages rendered as plain body text. Found by sweeping for classes no rule reaches. */
.routcomes .kicker{display:block;font:600 11.5px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--blue-press)}

/* Homepage outcome cards: the deliverable line had no style and read weaker than the chart caption above
   it, and uneven answer lengths left the three links at different heights. Label it, rule it, and pin the
   links to the bottom of the card so they line up across the row. */
.card.job:has(> .card-answer){display:flex;flex-direction:column}
.card-answer{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:15px;line-height:1.5;color:var(--ink)}
.card-answer span{display:block;margin-bottom:6px;font:600 11px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--text-3)}
.card-go{margin:auto 0 0;padding-top:16px}
/* Pinning the links to the card bottom aligned their bottoms, not their tops: a one-line link sat a line
   lower than a two-line one. Where the cards share a row, every link paragraph holds two lines. */
@media (min-width:1041px){ .card.job .card-go{min-height:calc(2lh + 16px)} }
/* The space before the arrow could break, which left a lone arrow on its own line. */
.textlink::after{content:'\00a0\2192'}

/* ---- hardening pass 2, adjudicated findings ---- */
/* C4: two-up card grids stay two-up down to 900px instead of collapsing at 1180. The contact page is the
   exception: its form holds a two-column grid of inputs, which would drop to about 196px wide at 1000px. */
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} }
@media (max-width:1180px){ .grid-2:has(> .ask){grid-template-columns:1fr} }
/* C5: the Solutions / Features rail tabs inside the burger were 41px. */
@media (max-width:1180px){ .site-header.menu-open .prod-tab{min-height:44px} }
/* C8: a bare chart beside long copy pinned to the top and left a hole under it. */
.feature-shot:has(> .fig:only-child){align-self:center}
/* C9: a disabled button looked exactly like an enabled one. */
.btn:disabled{opacity:.6;cursor:progress}

/* Round 3 (visual review): open burger keeps the 66px logo row; wrapped rows take no flex gap */
@media (max-width:1180px){
  .site-header.menu-open .wrap{row-gap:0;padding-top:11px}
  .panel-features .col-group + .col-group .glabel{padding-top:18px}
}
/* The form is the first thing in its band, so it does not add its own top margin to the band's padding */
.grid-2 > .ask:first-child{margin-top:0}
/* The two "what a brand can see" cards share a bottom edge */
.rvis{align-items:stretch}
.rvis-col > :last-child{border-bottom:1px solid var(--line)}

/* Logo: the bars match the A of the wordmark (Poppins 500 at 22px renders the A 15.3px tall and 13.9px wide),
   so the tallest bar tops out level with the A and the base sits on the text baseline */
.brand .logo-glyph{height:15.3px}
.brand .logo-glyph{position:relative;top:-.65px}

/* Codex review: a screenshot's full-size link, beside its caption */
.shot-full{margin-left:10px;white-space:nowrap}