/* The report pages' own pieces, on top of hub.css and the story kit (story.css): the Landscape report
   (site/ai-implementation-landscape-2026/report/, filled by scripts/landscape.py) and the store benchmark report
   (site/agentic-commerce-grader-benchmarks/report/, filled by scripts/store_benchmark.py). Class names start with lr-.
   The print rules at the end lay a report out for its PDF (scripts/landscape_report.py, scripts/store_benchmark.py). */

.lr-print-head{display:none}

/* ---------- hero ---------- */
.lr-hero{min-height:auto;padding-bottom:0}
.lr-hero .hero__title{font-size:clamp(44px,6.6vw,92px)}
.lr-answer{font-size:clamp(22px,2.3vw,30px);line-height:1.35;color:var(--ink2);max-width:52rem}
.lr-answer b{font:600 1.15em/1.1 var(--display);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.lr-sub{font-size:clamp(17px,1.5vw,19px);line-height:1.6;color:var(--ink2);max-width:45rem}
.lr-hero__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:6px}
.lr-hero__ctas .scroll-cue{align-self:center}
.lr-meta{padding-top:18px;border-top:1px solid var(--rule)}

/* ---------- the six findings, as a list of links ---------- */
.lr-index{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lr-index a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 22px 26px;background:#fff;border:1px solid var(--rule);border-top:3px solid var(--ink);
  color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s}
.lr-index a:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--stamp);border-color:var(--ink);color:var(--ink)}
.lr-index small{font:12px var(--mono);color:var(--stamp)}
.lr-index b{font:600 clamp(20px,1.9vw,24px)/1.2 var(--display)}
.lr-index a > span{font-size:15px;line-height:1.5;color:var(--ink2)}

/* ---------- ranked bars: one row per layer, each a link to the layer (--w is the bar's length) ---------- */
.lr-bars{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;border-top:1px solid var(--ink)}
.lr-bars a{display:grid;grid-template-columns:2.2em minmax(0,17rem) minmax(0,1fr) 3.4ch;align-items:center;gap:6px 18px;padding:11px 0;
  border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none}
.lr-bars small{font:12px var(--mono);color:var(--ink3)}
.lr-bars__name{font-size:16px;font-weight:500;line-height:1.3}
.lr-bars__bar{display:block;height:14px;background:var(--track)}
.lr-bars__bar i{display:block;height:100%;width:var(--w);background:var(--dash);transform-origin:left;transition:transform 1s cubic-bezier(.25,.7,.1,1) .2s}
.lr-bars .is-big .lr-bars__bar i{background:var(--ink)}
.lr-bars b{font:600 22px/1 var(--display);text-align:right;font-variant-numeric:tabular-nums}
.lr-bars a:hover .lr-bars__name{color:var(--stamp)}
.lr-bars a:hover .lr-bars__bar i{background:var(--stamp)}
html.js .lr-bars:not(.in) .lr-bars__bar i{transform:scaleX(0)}
/* the share version: a percentage and "n of N" after the bar */
.lr-bars--pct a{grid-template-columns:minmax(0,17rem) minmax(0,1fr) 4.4ch 7ch}
.lr-bars--pct em{font:12px var(--mono);font-style:normal;color:var(--ink3);white-space:nowrap}
.dark-section .lr-bars{border-top-color:var(--stage-dash)}
.dark-section .lr-bars a{color:var(--stage-ink);border-bottom-color:var(--stage-rule)}
.dark-section .lr-bars__bar{background:var(--stage-rule)}
.dark-section .lr-bars__bar i{background:var(--stage-mute)}
.dark-section .lr-bars .is-big .lr-bars__bar i{background:var(--stamp-on-dark)}
.dark-section .lr-bars b{color:#fff}
.dark-section .lr-bars em{color:var(--stage-mute)}
.dark-section .lr-bars a:hover .lr-bars__name{color:var(--stamp-on-dark)}
.dark-section .lr-bars a:hover .lr-bars__bar i{background:var(--stamp-on-dark)}
.lr-dark-h{margin-top:clamp(56px,7vw,80px);font:12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stage-soft)}
.lr-dark-h + .lr-bars{margin-top:18px}

/* ---------- "for buyers": the practical line under a finding ---------- */
.lr-take{display:flex;flex-wrap:wrap;gap:20px clamp(28px,4vw,56px);margin-top:clamp(32px,4vw,48px)}
.lr-take p{flex:1 1 320px;min-width:0;max-width:40rem;padding-left:16px;border-left:3px solid var(--stamp);font-size:17px;line-height:1.55;color:var(--ink2)}
.lr-take b{display:block;margin-bottom:6px;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--stamp)}
.lr-take--dark p{border-left-color:var(--stamp-on-dark);color:var(--stage-soft)}
.lr-take--dark b{color:var(--stamp-on-dark)}

/* ---------- checks: passed, partly and failed as one bar per check (--w is a segment's share) ---------- */
.lr-stack{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;border-top:1px solid var(--ink)}
.lr-stack li{display:grid;grid-template-columns:minmax(0,19rem) minmax(0,1fr) 4.4ch 14ch;align-items:center;gap:6px 18px;padding:11px 0;border-bottom:1px solid var(--rule)}
.lr-stack__name{font-size:16px;font-weight:500;line-height:1.3}
.lr-stack__bar{display:flex;height:14px;background:var(--track)}
.lr-stack__bar i{display:block;height:100%;width:var(--w);transform-origin:left;transition:transform 1s cubic-bezier(.25,.7,.1,1) .2s}
.lr-stack i.p,.lr-stack__key .p::before{background:var(--ink)} .lr-stack i.w,.lr-stack__key .w::before{background:var(--dash)} .lr-stack i.f,.lr-stack__key .f::before{background:var(--stamp)}
.lr-stack b{font:600 22px/1 var(--display);text-align:right;font-variant-numeric:tabular-nums;color:var(--stamp)} .lr-stack b.pass{color:var(--ink)}
.lr-bars .is-low .lr-bars__bar i{background:var(--stamp)} .lr-bars .is-low b{color:var(--stamp)}
.lr-stack em{font:12px var(--mono);font-style:normal;color:var(--ink3);white-space:nowrap}
.lr-stack__key{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font:12px var(--mono);letter-spacing:.03em;color:var(--ink3)}
.lr-stack__key span{display:inline-flex;align-items:center;gap:8px}
.lr-stack__key span[class]::before{content:"";width:10px;height:10px}
html.js .lr-stack:not(.in) .lr-stack__bar i{transform:scaleX(0)}
.lr-bars div{display:grid;grid-template-columns:minmax(0,17rem) minmax(0,1fr) 4.4ch 7ch;align-items:center;gap:6px 18px;padding:11px 0;border-bottom:1px solid var(--rule)}
.lr-take .link-arrow{display:flex;width:max-content;max-width:100%;margin-top:12px}

/* ---------- headquarters: one stacked bar and its key ---------- */
.lr-hq{margin-top:clamp(36px,5vw,52px);display:flex;flex-direction:column;gap:18px}
.lr-hq__bar{display:flex;height:34px;background:var(--track)}
.lr-hq__bar i{display:block;width:var(--w);height:100%}
.lr-hq__key{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15px;color:var(--ink2)}
.lr-hq__key li{display:inline-flex;align-items:center;gap:8px}
.lr-hq__key li::before{content:"";width:12px;height:12px;background:var(--c)}
.lr-hq__key b{font:600 17px var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.lr-hq .c1{--c:var(--ink)} .lr-hq .c2{--c:var(--blue)} .lr-hq .c3{--c:var(--teal)} .lr-hq .c4{--c:var(--magenta)} .lr-hq .c5{--c:var(--warn)} .lr-hq .c6{--c:var(--dash)}
.lr-hq__bar i{background:var(--c)}
.lr-big{margin-top:clamp(48px,6vw,72px)}

/* ---------- columns by year (--h is the bar's height); the snapshot's year is red, "so far" ---------- */
.lr-duo{margin-top:clamp(36px,5vw,56px);align-items:flex-start}
.lr-chart{flex:1 1 380px;min-width:0}
.lr-cols{list-style:none;margin:0;padding:0;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:clamp(8px,1.4vw,18px)}
.lr-cols li{display:flex;flex-direction:column;align-items:stretch;gap:8px}
.lr-cols b{font:600 clamp(20px,2vw,26px)/1 var(--display);text-align:center;font-variant-numeric:tabular-nums}
.lr-cols__bar{display:flex;align-items:flex-end;height:clamp(160px,22vw,240px);border-bottom:1px solid var(--ink)}
.lr-cols__bar i{display:block;width:100%;height:var(--h);background:var(--ink);transform-origin:bottom;transition:transform 1s cubic-bezier(.25,.7,.1,1) .2s}
.lr-cols .is-now i{background:var(--stamp)}
.lr-cols .is-now b{color:var(--stamp)}
.lr-cols small{font:12px var(--mono);color:var(--ink3);text-align:center;line-height:1.3}
.lr-cols em{display:block;font-style:normal;color:var(--stamp)}
.lr-cols__unit{margin-top:16px;font:11px/1.6 var(--mono);letter-spacing:.03em;color:var(--ink3)}
html.js .lr-chart:not(.in) .lr-cols__bar i{transform:scaleY(0)}
.lr-duo .stat-list{margin-top:0}
.lr-duo .stat-list a{color:inherit}

/* ---------- the statement ---------- */
.lr-statement{margin-top:clamp(36px,5vw,56px);font-size:clamp(34px,4.6vw,64px)}
.lr-statement figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;color:var(--ink2)}
.lr-statement figcaption .link-arrow{margin-top:0}

/* ---------- four ways to hire ---------- */
.lr-ask{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:clamp(36px,5vw,56px)}
.lr-ask__card{display:flex;flex-direction:column;gap:12px;padding:clamp(22px,3vw,32px);background:#fff;border:1px solid var(--rule);border-top:3px solid var(--ink)}
.lr-ask__card small{font:12px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--stamp)}
.lr-ask__card h3{font-size:clamp(24px,2.4vw,30px);line-height:1.15}
.lr-ask__card > p{font-size:16px;color:var(--ink2);line-height:1.5}
.lr-ask__layers{list-style:none;margin:4px 0 0;padding:0;border-top:1px dashed var(--dash)}
.lr-ask__layers li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px dashed var(--dash);font-size:15px}
.lr-ask__layers a{font-weight:500}
.lr-ask__layers b{font:500 13px var(--mono);color:var(--ink3);font-variant-numeric:tabular-nums}
.lr-ask__q{margin:8px 0 0;padding:0 0 0 1.4em;display:flex;flex-direction:column;gap:10px;font-size:16px;line-height:1.5}
.lr-ask__q li::marker{font:600 14px var(--mono);color:var(--stamp)}

/* ---------- the share kit: a card per layer ---------- */
.lr-kit{list-style:none;margin:clamp(36px,5vw,56px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 20px}
.lr-kit li{display:flex;flex-direction:column;gap:10px;min-width:0}
.lr-kit__img{display:block;border:1px solid var(--rule);background:var(--stage);transition:transform .25s,box-shadow .25s}
.lr-kit__img:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--stamp)}
.lr-kit img{display:block;width:100%;height:auto}
.lr-kit p{display:flex;flex-direction:column;gap:2px;font-size:15px}
.lr-kit p > a{font-weight:600}
.lr-kit p span{font:12px var(--mono);color:var(--ink3)}
.lr-kit p span a{color:var(--ink2)}
.lr-kit p .lr-kit__name{font:600 15px/1.4 var(--font);color:var(--ink)}
.lr-share__more{margin-top:clamp(36px,5vw,48px);padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-direction:column;gap:12px;font-size:16px;color:var(--ink2)}
.lr-kit__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lr-kit__list a{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1.5px solid var(--ink);background:#fff;font-weight:600;font-size:15px;text-decoration:none}
.lr-kit__list a:hover{border-color:var(--stamp)}
.lr-share__note{font:12px var(--mono);color:var(--ink3)}

/* ---------- how we built it ---------- */
.lr-method__list{max-width:52rem;margin-top:clamp(28px,4vw,40px);font-size:16px;line-height:1.55}

/* ---------- small screens ---------- */
@media (max-width:860px){
  .lr-index{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lr-kit{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .lr-index,.lr-ask,.lr-kit{grid-template-columns:minmax(0,1fr)}
  .lr-bars a{grid-template-columns:2em minmax(0,1fr) 3.4ch;grid-template-areas:"n name v" ". bar bar"}
  .lr-bars small{grid-area:n} .lr-bars__name{grid-area:name} .lr-bars b{grid-area:v} .lr-bars__bar{grid-area:bar}
  .lr-bars--pct a{grid-template-columns:minmax(0,1fr) 4.4ch;grid-template-areas:"name v" "bar bar" "em em"}
  .lr-bars--pct em{grid-area:em}
  .lr-bars--pct div{grid-template-columns:minmax(0,1fr) 4.4ch;grid-template-areas:"name v" "bar bar" "em em"}
  .lr-bars--pct div .lr-bars__name{grid-area:name} .lr-bars--pct div b{grid-area:v} .lr-bars--pct div .lr-bars__bar{grid-area:bar}
  .lr-stack li{grid-template-columns:minmax(0,1fr) 4.4ch;grid-template-areas:"name v" "bar bar" "em em"}
  .lr-stack__name{grid-area:name} .lr-stack b{grid-area:v} .lr-stack__bar{grid-area:bar} .lr-stack em{grid-area:em}
  .lr-cols small{font-size:11px}
}

/* ---------- reduced motion: the bars stand still ---------- */
@media (prefers-reduced-motion:reduce){
  html.js .lr-bars:not(.in) .lr-bars__bar i,html.js .lr-chart:not(.in) .lr-cols__bar i,html.js .lr-stack:not(.in) .lr-stack__bar i{transform:none}
  .lr-stack__bar i{transition:none}
  .lr-bars__bar i,.lr-cols__bar i,.lr-index a,.lr-kit__img{transition:none}
}

/* ---------- print: the PDF (A4), one finding per page, everything in its final state ---------- */
@media print{
  @page{size:A4;margin:14mm 14mm 16mm}
  html{font-size:13px}
  body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .topbar,.foot,.live-grid,.scroll-cue,.lr-hero__ctas,.lr-share,.closing,.lr-method .cta-row{display:none !important}
  .wrap{max-width:none;padding-inline:0}
  .lr-print-head{display:block;margin:0 0 6mm;font:10px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink3)}
  html.js [data-reveal],html.js [data-reveal-group] > *{opacity:1 !important;transform:none !important;transition:none !important}
  html.js .lr-bars .lr-bars__bar i,html.js .lr-cols__bar i,html.js .lr-stack__bar i{transform:none !important}
  .lr-stack li{padding:5px 0} .lr-stack__name{font-size:12px} .lr-stack b{font-size:15px} .lr-stack{break-inside:avoid}
  html.js .statement .word{opacity:1 !important}
  html.js .statement__mark path{stroke-dashoffset:0 !important}
  html.js .statement figcaption,html.js .big-figure mark{opacity:1;transform:none;background-size:100% 55%}
  .hero{min-height:0;padding:0;gap:18px}
  .hero::before{display:none}
  .hero__title{font-size:52px}
  .hero__line > span{transform:none !important;animation:none !important}
  .section,.dark-section{padding-block:0;margin-top:0}
  .section--tight{padding-top:8mm}
  .lr-finding{break-before:page}
  .dark-section{padding:8mm;background:var(--stage)}
  .section-title{font-size:30px}
  .intro,.lr-take p{font-size:13px}
  .lr-index{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .lr-index li{break-inside:avoid}
  .lr-index a{padding:12px 14px;border-top-width:2px}
  .lr-index b{font-size:16px}
  .lr-bars{margin-top:6mm}
  .lr-bars a{padding:5px 0}
  .lr-bars__name{font-size:12px}
  .lr-bars b{font-size:15px}
  .lr-bars,.lr-ask__card,.lr-hq,.lr-chart,.stat-list li,.stat-row > div,.big-figure,.statement{break-inside:avoid}
  .stat-list b,.stat-row b{font-size:34px}
  .stat-list li{padding:10px 0}
  .lr-statement{font-size:30px;margin-top:6mm}
  .lr-ask{gap:10px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .lr-ask__card{padding:14px;gap:8px}
  .lr-ask__card h3{font-size:18px}
  .lr-ask__card > p,.lr-ask__q,.lr-ask__layers li{font-size:12px}
  .lr-ask__layers li{padding:4px 0}
  .lr-ask__q{gap:4px;margin-top:4px}
  .lr-ask__q li::marker{font-size:11px}
  .lr-index a > span{font-size:12px}
  .lr-cols__bar{height:150px}
  .lr-method{break-before:page}
  .source{margin-top:6mm}
  a{text-decoration:none}
}