/* Home 2026 — page-templates/page-home-2026-tpl.php only.
   Figma yDuOq0twIMXUFVJ2okf1dO since 2026-11-03, was 8FfVT929uaC5XeiYc0okUp (desktop 70:951, mobile 324:6537). Tokens are scoped to .hp26 on purpose:
   the new buttons / eyebrow / dark shade apply to the homepage only, not webstick.css :root. */

@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url(../webfonts/dm-sans-300.woff2) format('woff2'); }
/* The site's static DM Sans files are the 9pt optical size, about 10% wider than Figma at 75px, which auto-sizes opsz.
   The browser does the same with this variable face (font-optical-sizing: auto), so type sets as in the design at every size. */
@font-face { font-family: 'DM Sans HP'; font-style: normal; font-weight: 100 1000; font-display: swap; src: url(../webfonts/dm-sans-var.woff2) format('woff2'); }
@font-face { font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(../webfonts/dm-mono-500.woff2) format('woff2'); }

.hp26 {
  --hp-sans: 'DM Sans HP', 'DM Sans', 'DM Sans Fallback', Arial, sans-serif;
  --hp-dark: #1c1b1f;
  --hp-dark-2: #1f1e20;
  --hp-ink: #231f1f;   /* Figma yDuOq (2026-11-02): dark type #231f1f, light type #e5e5e5 */
  --hp-grey: #e5e5e5;
  --hp-mid: #757575;
  --hp-attrib: #454444;
  --hp-card: #e5e5e5;
  --hp-teal: #06616d;
  --hp-teal-2: #2899aa;
  --hp-cyan: #66e0ff;
  --hp-orange: #faa51b;
  --hp-btn: linear-gradient(90deg, #ed8823 0%, #e76d2b 100%);
  --hp-gutter: clamp(24px, 7.225vw - 4.04px, 100px);   /* 25 @402 -> 100 @1440 (6.95vw gave 27.9 @402) */
  --hp-max: 1240px;
  /* fluid between the 402 and 1440 frames; the file has no responsive rule */
  --hp-h2: clamp(30px, calc(12.57px + 4.335vw), 75px);
  --hp-h3: clamp(28px, calc(25.29px + .674vw), 35px);
  --hp-lead: clamp(20px, calc(18.45px + .385vw), 24px);
  --hp-callout: clamp(30px, calc(26.13px + .963vw), 40px);
  --hp-hex-sides: linear-gradient(90deg, transparent calc(50% - 1920px), #000 calc(50% - 1720px), #000 calc(50% + 1720px), transparent calc(50% + 1920px));   /* edges of the 3840px *-wide.svg grids */
  font-family: var(--hp-sans); color: var(--hp-ink); background: #fff;
  -webkit-font-smoothing: antialiased;
}
.hp26 *, .hp26 *::before, .hp26 *::after { box-sizing: border-box; }
.hp26 img { display: block; max-width: 100%; height: auto; }
:where(.hp26) :where(h1, h2, h3, p, figure, blockquote) { margin: 0; }   /* :where keeps the reset at 0 specificity */
.hp26 a:not(.hp-btn) { color: inherit; text-decoration: none; }

.hp-wrap { width: min(var(--hp-max), 100% - 2 * var(--hp-gutter)); margin-inline: auto; position: relative; }
.hp-dark { background: var(--hp-dark); color: #fff; }

.hp-eyebrow { font: 500 18px/27px 'DM Mono', monospace; letter-spacing: 0; text-transform: uppercase; color: var(--hp-teal); }
.hp-dark .hp-eyebrow { color: var(--hp-teal-2); }
.hp26 .hp-h2 { font-weight: 700; font-size: var(--hp-h2); line-height: 1.133; letter-spacing: -.005em; color: inherit; }
.hp-center { text-align: center; }
.hp26 :is(h1, h2, h3, h4) { font-family: var(--hp-sans); }
.hp26 :is(h1, h2, h3, p, blockquote) { text-wrap: pretty; }
.hp-rule { border: 0; border-top: 1px dashed var(--hp-mid); margin: 0; }

.hp26 .hp-btn { display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 20px; border-radius: 15px;
  font: 700 16px/21px var(--hp-sans); letter-spacing: -.011em; color: #000; background: var(--hp-btn); border: 1px solid transparent; white-space: nowrap;
  text-decoration: none; transition: filter .2s, background-color .2s, color .2s; }
.hp26 .hp-btn:hover { filter: brightness(1.08); color: #000; }   /* no hover states in the file */
.hp26 .hp-btn--ghost { background: transparent; color: #fff; border-color: #e5e5e5; }   /* guidance sheet 2026-11-01: "secondary button for dark background" */
.hp26 .hp-btn--ghost:hover { background: rgba(255,255,255,.08); color: #fff; filter: none; }
.hp26 .hp-btn:focus-visible { outline: 2px solid var(--hp-cyan); outline-offset: 3px; }

/* ---------- S1 hero 70:977 — the site header is fixed over it (.dark-hero = white nav) ---------- */
.hp-hero { position: relative; overflow: clip; padding-top: 275px; }   /* Figma: 50 + 75 nav + 150 to the eyebrow */
/* webstick.css `body:not(.home) #hero-section:not(.light-hero)` (1,2,1) paints --banner-bg on every non-front page; (1,3,0) keeps the design's flat dark */
.hp26 #hero-section.hp-hero.dark-hero { background: var(--hp-dark); }
/* hex-grid.svg (2026-11-01) replaces the 800px hero-hexagons.webp: same cells as the A1 glow lattice, all off, sharp at any DPR
   (generated by outer _scripts/hp-redesign/_gen_hex_svg.py) */
.hp-hero__bg { position: absolute; top: 0; left: 50%; width: 1471px; margin-left: -735.5px; height: 736px; background: url(../img/hp26/hex-grid.svg) center top / 1471px auto no-repeat;
  /* the grid's base (#131416) is darker than the section (#1c1b1f): fade its bottom out so it reads as no box */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 170px), transparent); mask-image: linear-gradient(#000 calc(100% - 170px), transparent); }
@media (min-width: 1472px) {   /* F12 "100% wide": past 1471px the 3840px grid (same cells, 1471px box centred) fills the width */
  .hp-hero__bg { left: 0; width: 100%; margin-left: 0; background-image: url(../img/hp26/hex-grid-wide.svg); background-size: 3840px auto;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 170px), transparent), var(--hp-hex-sides); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(#000 calc(100% - 170px), transparent), var(--hp-hex-sides); mask-composite: intersect; }
}
/* Figma "gradient" 173:2884 over the hexagons: #231f1f/.3 to 393px, ramping to #1c1b1f/.9 at 599px, in a 1260px box
   (mobile 328:6648: 209 -> 321px). Its .9 end matches the section colour, so it needs no edge fade. */
.hp-hero::before { content: ""; position: absolute; inset: 0 -10px auto; height: 1260px; background: linear-gradient(rgba(35,31,31,.3) 393px, rgba(28,27,31,.9) 599px); z-index: 1; pointer-events: none; }
.hp-hero > :not(.hp-hero__bg) { position: relative; z-index: 2; }
.hp-hero__copy { text-align: center; }
/* type + gaps below follow Laura's guidance sheet (2026-11-01): eyebrow 18 / ls 0 / #e5e5e5, H1 ls -0.5%, body ls -1% / #e5e5e5, gaps 35 / 50 / 50 / 15 */
.hp-hero__eyebrow { font: 500 18px/27px 'DM Mono', monospace; color: #e5e5e5; text-transform: uppercase; }
.hp-hero__eyebrow b { color: var(--hp-teal-2); font-weight: 500; }
.hp26 .hp-hero h1 { margin: 35px auto 0; max-width: 940px; font-weight: 700; font-size: var(--hp-h2); line-height: 1.133; letter-spacing: -.005em; color: #fff; }
.hp-hero h1 em { font-style: normal; color: var(--hp-orange); }
.hp-hero__lead { margin: 50px auto 0; max-width: 744px; font-size: var(--hp-lead); line-height: 1.417; letter-spacing: -.01em; color: #e5e5e5; }
.hp-hero__ctas { display: flex; gap: 15px; justify-content: center; margin-top: 50px; }
.hp-hero__ctas .hp-btn { width: 268px; }
.hp-hero__media { margin-top: 150px; aspect-ratio: 1240 / 548; border-radius: 15px; overflow: hidden; border: 1px solid #454444; }
.hp-hero__media { position: relative; }
.hp-hero__media img { width: 100%; height: 100%; object-fit: cover; }   /* still under the video: LCP, poster, and fallback */
.hp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.hp-video.is-playing { opacity: 1; }

/* ---------- S2 call-out 70:987 ---------- */
.hp-callout { position: relative; padding: 100px 0; overflow: hidden; }
.hp-callout::before { content: ""; position: absolute; top: 44px; bottom: 0; left: 50%; width: 1471px; margin-left: -735.5px; background: url(../img/hp26/hex-grid-callout.svg) center top / 1471px auto no-repeat; opacity: .5;   /* lit cells = Figma 376:2's */
  /* as .hp-hero__bg: the image's dark base must not read as a box — fade where it starts and where the section clips it */
  -webkit-mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 140px), transparent); }
/* F12: on phones home-2026.js runs the hexagon loop here too (.is-live): a plain grid under it, the canvas at the grid's .5 */
.hp-callout.is-live::before { background-image: url(../img/hp26/hex-grid.svg); }
.hp-callout > .hp-tiles { display: none; position: absolute; left: 0; top: -5.9px; width: 100%; height: calc(100% + 5.9px); opacity: .5; pointer-events: none;   /* row 0 at the grid's -49.9 */
  -webkit-mask-image: linear-gradient(transparent 49.9px, #000 189.9px, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(transparent 49.9px, #000 189.9px, #000 calc(100% - 140px), transparent); }
.hp-callout.is-live > .hp-tiles { display: block; }
@media (min-width: 1472px) {
  .hp-callout::before { left: 0; width: 100%; margin-left: 0; background-image: url(../img/hp26/hex-grid-callout-wide.svg); background-size: 3840px auto;
    -webkit-mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 140px), transparent), var(--hp-hex-sides); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(transparent, #000 140px, #000 calc(100% - 140px), transparent), var(--hp-hex-sides); mask-composite: intersect; }
  .hp-callout.is-live::before { background-image: url(../img/hp26/hex-grid-wide.svg); }
}
/* No overlay for Figma 173:2887 / mobile 328:6814: the grid's .5 + masks already match the Figma render, which includes it
   (left-strip luminance stddev .8–1.0 vs Figma .7–1.1); adding it dimmed the grid to .2–.6 (measured 2026-11-03) */
.hp-callout p { position: relative; padding: 140.5px 0; max-width: 1123px; margin: 0 auto; text-align: center; font-weight: 300; font-size: var(--hp-callout); line-height: 1.25; letter-spacing: .01em; color: #e5e5e5; }   /* guidance sheet */

/* ---------- S3 logos 70:991 — same marquee as home.css / calico.css / ebook-lp.css ---------- */
.hp-logos { padding: 50px 0 116px; }   /* guidance sheet: 50 / eyebrow / 80 / logos / 80 + 50; the 60px slots hold ~40px marks */
.hp-logos .hp-eyebrow { margin: 0; color: var(--hp-teal-2); text-align: center; }
@keyframes hp-logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.hp-logos__strip { overflow: hidden; width: 100%; margin-top: 66px; }   /* + 14px slide padding = 80 */
.hp-logos__track { display: flex; align-items: center; width: max-content; animation: hp-logos-scroll 54s linear infinite; }
@media (min-width: 768px) { .hp-logos__strip { width: min(var(--hp-max), 100% - 2 * var(--hp-gutter)); margin-inline: auto; } }
.hp-logos__strip:hover .hp-logos__track { animation-play-state: paused; }
.hp-logos__list { display: flex; flex-wrap: nowrap; align-items: center; flex-shrink: 0; }
.hp-logos__slide { width: 181px; display: inline-flex; align-items: center; justify-content: center; padding: 14px 12px; }
.hp26 .hp-logos__slide img { max-height: 60px; max-width: 100%; width: auto; }   /* the shared 226×100 images carry padding: 60 brings the marks near Figma's ~40px (2026-11-01) */
@media (prefers-reduced-motion: reduce) { .hp-logos__track { animation: none; } }

/* ---------- S4/S5 new workload 185:3086 + 415:32 ---------- */
.hp-workload { padding: 106px 0 0; }
.hp-workload .hp-eyebrow { margin: 0; color: var(--hp-teal-2); }   /* guidance sheet: hero eyebrow treatment, #2899aa */
.hp-workload__head { display: grid; grid-template-columns: minmax(0, 730fr) minmax(0, 35fr) minmax(0, 475fr); align-items: start; }
.hp26 .hp-workload__head h2 { grid-column: 1; margin-top: 35px; line-height: 1.147; }
.hp-workload__head p { grid-column: 3; margin-top: 70px; font-size: var(--hp-lead); line-height: 1.417; letter-spacing: -.01em; }
.hp-cards3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; margin-top: 102px; }
.hp-wcard { background: var(--hp-card); border-radius: 15px; padding: 43px 36px 42px; display: flex; flex-direction: column; min-height: 562px; }
.hp26 .hp-wcard h3 { font-size: 30px; line-height: 40px; letter-spacing: -.6px; font-weight: 700; color: inherit; }
.hp-wcard p { margin-top: 22px; font: 500 18px/28px var(--hp-sans); letter-spacing: -.36px; }
.hp26 .hp-wcard img { margin-top: auto; width: 320px; aspect-ratio: 1; object-fit: cover; border-radius: 15px; }

/* All three body texts start on one line: every title reserves two lines, and the body sits one line up (reviewer 2026-11-04). */
@media (min-width: 1200px) {
  .hp26 .hp-wcard h3 { min-height: 90px; margin-bottom: -24px; }
  .hp-wcard p { margin-bottom: 26px; }
}

/* ---------- S6 CTA band 263:4477 ---------- */
.hp-ctaband-wrap { padding: 29px 0; }
.hp-ctaband { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 32px;
  min-height: 214px; padding: 40px 96px 40px 64px; border-radius: 15px; background: var(--hp-dark-2); color: var(--hp-grey); }
/* Figma's own hexagon outlines (363:9195, exported as SVG), 53px in from the band's left edge; was the filled, glowing texture.webp */
.hp-ctaband::before { content: ""; position: absolute; inset: 0; background: url(../img/hp26/band-hex.svg) 53px 0 / 497px 214px no-repeat; }
.hp-ctaband > * { position: relative; }
.hp-ctaband p { margin: 0; flex: 0 1 704px; font-weight: 700; font-size: clamp(28px, 2.43vw, 35px); line-height: 1.286; letter-spacing: -.7px; text-align: center; }
.hp-ctaband .hp-btn { width: 268px; }

/* ---------- S7 the gap 70:998 (+ rollovers 328:6576) ---------- */
.hp-gap { padding: 101px 0 100px; }
.hp26 .hp-gap h2 { max-width: 973px; margin: 47px auto 0; }
.hp-gap__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; margin-top: 102px; }
.hp-gcard { position: relative; aspect-ratio: 390 / 522; border-radius: 15px; overflow: hidden; color: var(--hp-grey); background: var(--hp-dark); transition: transform .35s ease; }
.hp26 .hp-gcard__art, .hp26 .hp-gcard__art--hover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .35s ease; }
.hp26 .hp-gcard__art--hover { opacity: 0; }
.hp-gcard:hover, .hp-gcard:focus-within { transform: translateY(-23px); }
.hp26 .hp-gcard:hover .hp-gcard__art--hover, .hp26 .hp-gcard:focus-within .hp-gcard__art--hover { opacity: 1; }
.hp-gcard__text { position: absolute; left: 36px; right: 36px; bottom: 40px; text-align: left; }
.hp26 .hp-gcard h3 { font-size: 30px; line-height: 40px; letter-spacing: -.6px; font-weight: 700; color: inherit; }   /* guidance: subhead 30/40/-2% */
.hp-gcard p { margin-top: 12px; font: 500 18px/28px var(--hp-sans); letter-spacing: -.36px; }
.hp-statement { margin-top: 114px; }
.hp-statement p { padding: 52px 0 46px; max-width: 1240px; margin: 0 auto; text-align: center; font-weight: 300; font-size: var(--hp-callout); line-height: 1.25; letter-spacing: .01em; color: var(--hp-ink); }

/* ---------- S8 point of view 70:1014 ---------- */
.hp26 .hp-pov { background: var(--hp-dark); padding: 118px 0 104px; }
.hp26 .hp-pov h2 { margin: 66px auto 0; max-width: 700px; }
.hp-pov h2 span { color: var(--hp-teal-2); }
.hp-pov__sub { margin: 50px auto 0; max-width: 640px; font-weight: 500; letter-spacing: -.01em; color: var(--hp-grey); font-size: clamp(22px, 2.08vw, 30px); line-height: 1.333; }
.hp-pov__body { margin: 48px auto 0; max-width: 740px; font-size: var(--hp-lead); line-height: 1.417; letter-spacing: -.01em; color: var(--hp-grey); }
.hp-pov__body strong { font-weight: 700; }   /* Figma 306:5781 is Inter 800 — treated as a slip */
.hp26 .hp-pov__art { margin: 0 auto; width: min(1050px, 100%); }
.hp-pov__tag { margin-top: 109px; font-weight: 700; font-size: clamp(24px, 5.21vw, 75px); line-height: 1.5; letter-spacing: -.005em; color: var(--hp-teal-2); }   /* Figma: 75/112.5 desktop, 24/30 mobile */

/* ---------- S9 how it works 306:5809 + steps 70:1020 / 306:5845 / 306:5858 / 306:5868 ---------- */
.hp-how { padding: 106px 0 0; }
.hp26 .hp-how h2 { margin-top: 47px; max-width: 660px; line-height: 1.147; }
.hp-steps { padding: 34px 0 100px; }
.hp-step { position: sticky; top: 90px; padding-top: 49px; background: #fff; }   /* the file shows no interaction: panels stack on scroll; top clears the fixed header */
.hp-step + .hp-step { margin-top: 100px; }
.hp-step__panel { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 524fr) minmax(0, 92fr) minmax(0, 514fr); padding: 61px 60px 54px 49px;
  margin-top: 49px; border-radius: 15px; border: 1px solid var(--hp-mid); background: var(--hp-dark); color: var(--hp-grey); min-height: 625px; }
/* G1: each panel = Laura's export (graphics drop 2026-11-02 "Tile Background"): one texture placed per step (yDuOq 306:6273 / 6420 / 6277 / 6279).
   Row order See, Govern, Contain, Prove. Mobile uses its own exports (F13, step-*-m.webp) */
@media (min-width: 768px) {
  .hp-step__panel { background: var(--hp-dark) center / cover no-repeat; }
  .hp-step:nth-child(1) .hp-step__panel { background-image: url(../img/hp26/step-see.webp); }
  .hp-step:nth-child(2) .hp-step__panel { background-image: url(../img/hp26/step-govern.webp); }
  .hp-step:nth-child(3) .hp-step__panel { background-image: url(../img/hp26/step-contain.webp); }
  .hp-step:nth-child(4) .hp-step__panel { background-image: url(../img/hp26/step-prove.webp); }
}
.hp-step__panel > *, .hp-step__text > * { position: relative; z-index: 1; }   /* text sits in display:contents on mobile */
.hp-step__text { display: flex; flex-direction: column; }
.hp-step__label { font: 500 18px/27px 'DM Mono', monospace; letter-spacing: 0; color: var(--hp-grey); padding-bottom: 16px; border-bottom: 1px dashed var(--hp-mid); }
.hp-step__label b { color: var(--hp-teal-2); font-weight: 500; }
.hp26 .hp-step__text h3 { margin-top: auto; max-width: 380px; font-weight: 600; font-size: 30px; line-height: 40px; letter-spacing: -.6px; color: inherit; }
.hp-step__text p:not(.hp-step__label) { margin-top: 26px; max-width: 520px; font: 500 18px/28px var(--hp-sans); letter-spacing: -.36px; }
.hp26 .hp-step__shot { position: relative; overflow: hidden; grid-column: 3; align-self: start; border-radius: 15px; width: 100%; aspect-ratio: 1; }
.hp-step__img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- S10 personas 433:81 / 433:103 / 433:179 / 433:198 ---------- */
.hp-personas-head { padding: 118px 0 107px; }
.hp26 .hp-personas-head h2 { margin: 66px auto 0; max-width: 1050px; color: var(--hp-grey); }
.hp-persona { padding: 100px 0 99px; }
/* image and text share one row height, so the button's bottom = the image's bottom at any width (was: text min-height 490 vs a
   shorter image below a 700px column). The image keeps 700:490 while the text fits beside it, and crops (cover) once the text is taller */
.hp-persona .hp-wrap { display: grid; grid-template-columns: minmax(0, 484fr) minmax(0, 60fr) minmax(0, 700fr); align-items: stretch; }
.hp-persona--flip .hp-wrap { grid-template-columns: minmax(0, 700fr) minmax(0, 56fr) minmax(0, 484fr); }
.hp26 .hp-persona__img { grid-column: 3; grid-row: 1; width: 100%; height: 100%; border-radius: 15px; aspect-ratio: 700 / 490; object-fit: cover; }
.hp26 .hp-persona--flip .hp-persona__img { grid-column: 1; }
.hp-persona__text { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; }
.hp-persona--flip .hp-persona__text { grid-column: 3; }
.hp-persona__text .hp-eyebrow { padding-bottom: 22px; border-bottom: 1px dashed var(--hp-mid); }
.hp26 .hp-persona__text h3 { margin-top: 40px; max-width: 460px; font-size: var(--hp-h3); line-height: 1.286; letter-spacing: -.02em; font-weight: 700; color: #fff; }
.hp-persona__text p:not(.hp-eyebrow) { margin-top: 30px; max-width: 460px; font: 500 18px/28px var(--hp-sans); letter-spacing: -.36px; }
.hp-persona__text .hp-btn { margin-top: auto; width: 268px; max-width: 100%; }

/* ---------- S11 testimonials + stats 306:6021 ---------- */
.hp-trust { padding: 101px 0 100px; }
.hp26 .hp-trust h2 { margin: 47px auto 0; max-width: 760px; }
.hp-trust__sub { margin-top: 44px; font-weight: 500; letter-spacing: -.01em; font-size: clamp(20px, 2.08vw, 30px); line-height: 1.333; }
.hp-quote { position: relative; margin: 167px auto 0; max-width: 1090px; }
.hp-quote:not([hidden]), .hp-quotes.is-stacked > .hp-quote[hidden] { display: grid; grid-template-columns: 126fr 35fr 929fr; }   /* :not([hidden]) — an author display beats the hidden attribute */
.hp-quote__mark { font: 700 200px/1 Georgia, serif; letter-spacing: -3.8px; background: linear-gradient(90deg, #ffa500, #ef7f1e, #e76d2c); -webkit-background-clip: text; background-clip: text; color: transparent; height: 110px; margin-top: -20px; }
.hp-quote__body { grid-column: 3; border-left: 1px dashed var(--hp-mid); padding-left: 35px; margin-left: -35px; }
.hp-quote blockquote { font-weight: 600; letter-spacing: -.01em; font-size: clamp(24px, 2.78vw, 40px); line-height: 1.25; border: 0; padding: 0; margin: 0; font-style: normal; }   /* beats webstick.css:946 40px inline margins + non-critical.css:6 italic, which outrank the :where reset */
.hp-quote figcaption { margin-top: 98px; font: 500 20px/30px var(--hp-sans); letter-spacing: -.4px; color: var(--hp-attrib); }
.hp26 .hp-quote__logo { margin-top: 4px; width: 135px; }
.hp-quotes.is-stacked { display: grid; }   /* home-2026.js: every quote in one cell, the hidden ones invisible but sized */
.hp-quotes.is-stacked > .hp-quote { grid-area: 1 / 1; width: 100%; }   /* auto margins in a grid cell would shrink-wrap */
.hp-quotes.is-stacked > .hp-quote[hidden] { visibility: hidden; }
.hp-quotes.is-stacked > .hp-arrows { grid-row: 2; }
.hp-arrows { display: flex; gap: 11px; justify-content: flex-end; margin-top: 40px; }
.hp-arrows button { width: 54px; height: 54px; border-radius: 50%; border: 1px solid #000; background: #fff; color: #000; cursor: pointer; display: grid; place-items: center; padding: 0; }
.hp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 35px; margin-top: 89px; }
.hp-stat { border-top: 1px solid var(--hp-mid); padding-top: 43px; }
.hp-stat strong { display: block; font-weight: 700; font-size: clamp(60px, 6.94vw, 100px); line-height: .9; letter-spacing: 0; }
.hp-stat strong i { font-style: normal; color: #e76d2b; }
.hp-stat > span { display: block; margin-top: 40px; max-width: 210px; font: 400 24px/34px var(--hp-sans); letter-spacing: -.01em; }
.hp26 .hp-trust .hp-btn--pill { margin-top: 80px; width: 268px; }   /* Figma yDuOq: the hero button, no longer a 45px pill */

/* ---------- S12 bottom CTA 70:1071 ---------- */
.hp26 .hp-endcta { position: relative; overflow: hidden; background: var(--hp-dark); color: var(--hp-grey); padding: 97px 0 170px; }
/* F9 option C "Discovery scan" (Hero Line Art Options.html), in Figma's art box 363:9562; reduced motion and off-screen (home-2026.js) hold it still */
.hp-scan { position: absolute; right: -11px; top: -6px; width: 652px; height: 754px; overflow: visible; pointer-events: none; }
.hp-scan .ln { stroke: var(--hp-teal); fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hp-scan .lead { stroke: #3fa9b8; }
.hp-scan .fl { fill: var(--hp-dark); stroke: var(--hp-teal); vector-effect: non-scaling-stroke; }
.hp-scan .dot { fill: var(--hp-teal); }
.hp-scan text { font: 500 9.5px 'DM Mono', monospace; letter-spacing: .06em; fill: var(--hp-teal); }
.hp-scan .sweep { transform-box: view-box; transform-origin: 560px 325px; animation: hp-scan-spin 14s linear infinite; }
.hp-scan .blip { opacity: .55; animation: hp-scan-blip 14s linear infinite; }
.hp-scan.is-off .sweep, .hp-scan.is-off .blip { animation-play-state: paused; }
@keyframes hp-scan-spin { to { transform: rotate(360deg); } }
@keyframes hp-scan-blip { 0% { opacity: 1; } 12%, 100% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .hp-scan .sweep, .hp-scan .blip { animation: none; } }
/* Figma 478:715: over the art, under the copy; darkens the lower right. Handles (.59,.09)→(.87,.99) on 1444×743 = 149deg, stops .58/.94 → 68.8/89.1% */
.hp-endcta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(149deg, rgba(28,26,30,0) 68.8%, #1c1a1e 89.1%); }
.hp-endcta .hp-wrap { z-index: 1; }
.hp26 .hp-endcta h2 { margin-top: 38px; max-width: 640px; }
.hp-endcta .hp-wrap > p:not(.hp-eyebrow) { margin-top: 45px; max-width: 570px; font-size: var(--hp-lead); line-height: 1.417; letter-spacing: -.02em; color: var(--hp-grey); }
.hp-endcta__ctas { display: flex; gap: 17px; margin-top: 90px; }
.hp-endcta__ctas .hp-btn { width: 268px; }

/* ---------- motion, from Tigera's Round 2 HTML (2026-10-28; animations only, not its design) ---------- */
/* A1 hero hover glow: a canvas over hex-grid.svg; home-2026.js lights the hovered cell (+ a halo on its neighbours)
   and fades it over 1.4s. Full width, cells centred like the grid's, from 49.9px above the hero (row 0 is cut by the top).
   F12 loop (.is-live, phones): the canvas drops under the ::before gradient, so lit cells fade with the grid */
.hp-hero > .hp-tiles { position: absolute; z-index: 2; left: 0; top: -49.9px; width: 100%; height: 785.9px; display: block; pointer-events: none;   /* bottom = the image's 736px */
  /* same reach as .hp-hero__bg: whole image, bottom 170px fading (sides too past the wide grid, below) */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 170px), transparent); mask-image: linear-gradient(#000 calc(100% - 170px), transparent); }
.hp-hero.is-live > .hp-tiles { z-index: 0; }
@media (min-width: 1472px) {
  .hp-hero > .hp-tiles { -webkit-mask-image: linear-gradient(#000 calc(100% - 170px), transparent), var(--hp-hex-sides); -webkit-mask-composite: source-in;
    mask-image: linear-gradient(#000 calc(100% - 170px), transparent), var(--hp-hex-sides); mask-composite: intersect; }
}

/* A4 hero headline: home-2026.js wraps each word in .hp-w with a 45ms stagger */
.hp-w { display: inline-block; animation: hp-word-in .7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hp-word-in { from { opacity: .06; filter: blur(8px); transform: translateY(12px); } }

/* A6 point-of-view keys, built in CSS so they can move: edges light in turn, the Lynx key's border sweeps */
@property --hp-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.hp-pov { overflow-x: clip; }   /* the turned keys are wider than their box */
.hp-keys { height: 470px; display: flex; align-items: center; justify-content: center; perspective: 1600px; margin-top: 40px; }
.hp-keys__grid { display: grid; grid-template-columns: repeat(3, 170px); gap: 26px; transform: rotateX(56deg) rotateZ(-45deg); transform-style: preserve-3d; }
.hp-keys i { position: relative; width: 170px; height: 170px; border-radius: 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 8px;
  background: linear-gradient(160deg, #26272b, #1d1e21); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 16px 0 #111214, 0 30px 50px rgba(0,0,0,.6);
  font: normal 700 21px/1.15 var(--hp-sans); color: #8c8585; text-align: center; }
.hp-keys .e1 { animation: hp-edge 6s ease-in-out infinite; }
.hp-keys .e2 { animation: hp-edge 6s ease-in-out 1.5s infinite; }
.hp-keys .e3 { animation: hp-edge 6s ease-in-out 3s infinite; }
.hp-keys .e4 { animation: hp-edge 6s ease-in-out 4.5s infinite; }
@keyframes hp-edge {
  0%, 30%, 100% { border-color: rgba(255,255,255,.08); color: #8c8585; }
  12% { border-color: rgba(255,236,210,.85); color: #fff; box-shadow: 0 16px 0 #111214, 0 0 40px rgba(255,220,180,.25); }
}
/* G2: Lynx key recoloured to Laura's lynx-keys-2899AA.png (sampled: face #145e69 → #104e57, side #0a2f36, icon #52b6c4 / #1b6f7c) */
.hp-keys i.hp-keys__lynx { font-size: 30px; color: #fff; background: linear-gradient(160deg, #155f6a, #0f4750); border-color: rgba(40,153,170,.5);
  box-shadow: 0 16px 0 #0a2f36, 0 0 80px rgba(40,153,170,.4), 0 0 160px rgba(40,153,170,.15); }
.hp-keys__lynx::before { content: ""; position: absolute; inset: -2px; border-radius: 28px; padding: 2px;
  background: conic-gradient(from var(--hp-a), transparent 0deg, #1b6f7c 50deg, #eafbfd 90deg, #2899aa 130deg, transparent 210deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: hp-sweep 4s linear infinite; }
@keyframes hp-sweep { to { --hp-a: 360deg; } }
.hp-keys__lynx b { width: 56px; height: 49px; background: linear-gradient(135deg, #52b6c4, #1b6f7c); clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }

/* A7 step panels already stack on scroll (.hp-step sticky); each now stops 22px lower so the earlier ones peek out.
   This is the no-JS / reduced-motion fallback; .is-swipe below replaces it */
.hp-step { top: calc(90px + var(--i, 0) * 22px); }

/* Step cards as a deck (client 2026-11-05, make.com "One AI Automation platform"; was a dissolve 2026-11-04, a timed slide-up 2026-11-01).
   The stage pins while the track (.hp-wrap, height set in JS) scrolls past. The cards share one grid cell, first on top, and home-2026.js sets
   each one's transform from scroll. --hp-deck-peek (JS) is the room the cards behind take below the front one; with the last card in front that
   room is empty, so it comes out of the section's bottom padding. The rule leaves the cards, so it stays put and scrolls away with the page. */
.hp-steps.is-swipe { padding-bottom: max(0px, calc(100px - var(--hp-deck-peek, 0px))); }
.hp-steps.is-swipe::before { content: ""; display: block; width: min(var(--hp-max), 100% - 2 * var(--hp-gutter)); margin: 49px auto; border-top: 1px dashed var(--hp-mid); }
.hp-steps.is-swipe .hp-steps__stage { position: sticky; top: 90px; display: grid; padding-bottom: var(--hp-deck-peek, 0px); }
.hp-steps.is-swipe .hp-step { position: relative; top: auto; grid-area: 1 / 1; margin: 0; padding-top: 0; background: none; z-index: calc(10 - var(--i, 0)); transform-origin: 50% 100%; will-change: transform; }
.hp-steps.is-swipe .hp-step .hp-rule { display: none; }
.hp-steps.is-swipe .hp-step__panel { margin-top: 0; }
/* A pinned card must fit the window. Under 560px tall (landscape phones) home-2026.js turns pinning off, and the stack mustn't stick either. */
@media (min-width: 768px) and (max-height: 559px) {
  .hp-step { position: static; }
  .hp-step + .hp-step { margin-top: 32px; }
}
/* Short windows, 1366x768-class laptops down: the card takes the height left beside its minimum peek (155 = top 90, 3 x 10 peek, a margin), and the square shot shrinks to match */
@media (min-width: 768px) and (max-height: 780px) {
  .hp-steps.is-swipe .hp-step__panel { min-height: calc(100vh - 155px); padding-top: 28px; padding-bottom: 28px; }
  .hp26 .hp-steps.is-swipe .hp-step__shot { width: min(100%, calc(100vh - 213px)); justify-self: end; }
}

/* A2 hero media tilts up into place; A3 section heads and cards rise in. Scroll-driven, so Safari and Firefox show them static */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hp-hero__media { transform-origin: 50% 100%; animation: hp-shot-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }   /* flat and aligned with the nav once fully in view; needs .hp-hero overflow: clip, as hidden stops view() following the page scroll */
    .hp-workload__head, .hp-cards3, .hp-gap .hp-h2, .hp-gap__cards, .hp-statement, .hp-pov .hp-h2, .hp-how .hp-wrap,
    .hp-personas-head .hp-wrap, .hp-persona .hp-wrap, .hp-trust .hp-center, .hp-stats, .hp-endcta .hp-wrap {
      animation: hp-rise linear both; animation-timeline: view(); animation-range: entry entry 70%; }
  }
}
@keyframes hp-shot-in { from { transform: perspective(1600px) rotateX(14deg) scale(.88); opacity: .55; } }
@keyframes hp-rise { from { opacity: 0; transform: translateY(40px); } }

@media (prefers-reduced-motion: reduce) {
  .hp26 .hp-keys i, .hp-w, .hp-keys__lynx::before { animation: none; }   /* .hp26 outranks .hp-keys .e1 */
}

/* ---------- tablet <=1199 (derived — no tablet frame) ---------- */
@media (max-width: 1199px) {
  .hp-statement p br { display: none; }   /* the copy's break only suits the design's full width */
  .hp-gcard { aspect-ratio: auto; min-height: 440px; }   /* narrow columns: let the card grow rather than crowd its text */
  .hp-ctaband { padding: 40px 48px; }
  .hp-step__panel { padding: 48px 40px; }
  .hp-scan { opacity: .45; }
}
/* ---------- tablets 768-1023: no Figma frame (the file has 1440 and 402), so this layout is ours. The desktop grid squeezed in here
   made titles poke out of the workload cards, clipped the team cards' text and cut off the persona screenshots. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hp-workload__head { display: block; }
  .hp-workload__head p { margin-top: 32px; max-width: 640px; }
  .hp-cards3, .hp-gap__cards { grid-template-columns: 1fr; gap: 24px; margin-top: 64px; }
  .hp-wcard { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; min-height: 0; padding: 36px; }
  .hp-wcard p { margin-bottom: 0; }
  .hp26 .hp-wcard img { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin-top: 0; }
  .hp-gcard { aspect-ratio: auto; min-height: 340px; }
  .hp-persona .hp-wrap, .hp-persona--flip .hp-wrap { display: flex; flex-direction: column; gap: 40px; }
  .hp26 .hp-persona__img { order: 2; height: auto; }
  .hp26 .hp-persona__text h3, .hp-persona__text p:not(.hp-eyebrow) { max-width: none; }
  .hp-persona__text .hp-btn { margin-top: 30px; }
  .hp-keys { height: 400px; }
  .hp-keys__grid { transform: scale(.85) rotateX(56deg) rotateZ(-45deg); }
}
/* ---------- mobile <=767 (frame 324:6537, 402 wide) ---------- */
@media (max-width: 767px) {
  .hp-eyebrow, .hp-step__label { font-size: 14px; line-height: 21px; }   /* Figma yDuOq: every mobile eyebrow 14/21/0 */
  .hp26 .hp-h2 { letter-spacing: -.02em; }   /* mobile H1 30/40/-2% */
  .hp-hero { padding-top: 134px; }   /* Figma: 25 + 58 nav + 51 */
  .hp-hero__eyebrow { font-size: 14px; line-height: 21px; max-width: 260px; margin: 0 auto; }
  .hp26 .hp-hero h1 { margin-top: 32px; max-width: 250px; line-height: 40px; letter-spacing: -.02em; }   /* Figma yDuOq mobile hero: gaps -14 / +14 / -15 / -21 vs the old frame */
  .hp-hero__lead { margin-top: 59px; line-height: 30px; }
  .hp-hero__ctas { flex-direction: column; align-items: center; gap: 12px; margin-top: 51px; }
  .hp-hero__ctas .hp-btn { width: 289px; max-width: 100%; }
  .hp-hero__media { margin-top: 49px; }
  .hp-hero::before { height: 760px; background: linear-gradient(rgba(35,31,31,.3) 209px, rgba(28,27,31,.9) 321px); }   /* Figma's box is 679px; 760 covers the hexagons' faded bottom (736) */
  /* F12: Figma mobile draws the hexagons at 849px, not 1471 (328:6647; the loop GIF fitted to a phone matches): grids and
     canvases x .5772, which home-2026.js reads from --hp-hex-k. The callout's (328:6813) is turned 90°; the loop keeps it upright */
  .hp26 { --hp-hex-k: .5772; }
  .hp-hero__bg { width: 849px; margin-left: -424.5px; height: 424.8px; background-size: 849px auto;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 98px), transparent); mask-image: linear-gradient(#000 calc(100% - 98px), transparent); }
  .hp-hero > .hp-tiles { top: -28.8px; height: 453.6px; -webkit-mask-image: linear-gradient(#000 calc(100% - 98px), transparent); mask-image: linear-gradient(#000 calc(100% - 98px), transparent); }
  .hp-callout::before { width: 849px; margin-left: -424.5px; background-size: 849px auto; }
  .hp-callout > .hp-tiles { top: 15.2px; height: calc(100% - 15.2px);
    -webkit-mask-image: linear-gradient(transparent 28.8px, #000 168.8px, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(transparent 28.8px, #000 168.8px, #000 calc(100% - 140px), transparent); }
  .hp-callout { padding: 69px 0 75px; }
  .hp-callout p { padding: 76px 8px 71px; line-height: 40px; }
  .hp-logos__strip { margin-top: 49px; }
  .hp-logos__slide { width: 50vw; }   /* F13: "show two or one logo at a time" */
  .hp-logos__track { animation-duration: 60s; }   /* same px/s as desktop (181px slides / 54s) */
  .hp-workload { padding-top: 71px; text-align: center; }
  .hp-workload__head { display: block; }
  .hp26 .hp-workload__head h2 { margin-top: 45px; line-height: 40px; }
  .hp-workload__head p { margin-top: 68px; line-height: 30px; }
  .hp-cards3, .hp-gap__cards, .hp-stats { grid-template-columns: 1fr; gap: 50px; }
  .hp-cards3 { margin-top: 70px; text-align: left; }
  .hp-wcard { min-height: 562px; padding: 38px 31px 30px; }
  .hp26 .hp-wcard h3 { line-height: 35px; }
  .hp-ctaband { flex-direction: column; align-items: center; min-height: 352px; padding: 59px 31px 64px; }   /* Figma mobile 451:681 */
  .hp-ctaband p { flex: none; width: 100%; text-align: center; font-size: 28px; line-height: 32px; letter-spacing: -.56px; }
  .hp-ctaband .hp-btn { width: 100%; }
  .hp-ctaband::before { background: url(../img/hp26/band-hex-m.svg) right bottom / 295px 301px no-repeat; }   /* Figma mobile 451:690 */
  .hp-gap { padding-top: 71px; }
  .hp26 .hp-gap h2 { margin-top: 41px; line-height: 40px; }
  .hp-gap__cards { margin-top: 70px; }
  .hp-gcard { aspect-ratio: 352 / 470; }
  .hp-gcard:hover, .hp-gcard:focus-within { transform: none; }
  .hp26 .hp-gcard__art--hover { display: none; }   /* F13: still image, no animation (also skips the lazy hover art download) */
  .hp-statement { margin-top: 70px; }
  .hp-statement p { padding: 40px 0; line-height: 40px; }
  .hp-statement br { display: none; }
  .hp26 .hp-pov { padding: 83px 0 67px; }
  .hp26 .hp-pov h2 { margin-top: 61px; max-width: 280px; line-height: 40px; }
  .hp-pov__sub, .hp-pov__body { margin-top: 45px; line-height: 30px; }
  .hp-pov__tag { margin-top: 40px; line-height: 30px; letter-spacing: -.019em; }
  .hp-keys { height: 260px; margin-top: 30px; }
  .hp-keys__grid { transform: scale(.46) rotateX(56deg) rotateZ(-45deg); }
  .hp-how { padding-top: 71px; text-align: center; }
  .hp26 .hp-how h2 { margin: 33px auto 0; max-width: 280px; line-height: 40px; }
  .hp-step { position: static; padding-top: 0; }
  .hp-step + .hp-step { margin-top: 0; }
  .hp-step .hp-rule { display: none; }
  /* F13: Figma yDuOq mobile steps (358:7893, 604:2431/2459, 606:2486): panel 352x846 r15, content inset 30, label 28 / rule 74 / shot 104 (292 sq) / h3 465;
     bg = each frame's "Mobile See Background Image" exported at 3x (#1f1e20 + texture; Contain at 70%), no gradient overlay */
  .hp-step__panel { display: flex; flex-direction: column; margin-top: 50px; padding: 27px 29px 40px; min-height: 846px; text-align: left; background: #1f1e20 center / cover no-repeat; }
  .hp-step:nth-child(1) .hp-step__panel { background-image: url(../img/hp26/step-see-m.webp); }
  .hp-step:nth-child(2) .hp-step__panel { background-image: url(../img/hp26/step-govern-m.webp); }
  .hp-step:nth-child(3) .hp-step__panel { background-image: url(../img/hp26/step-contain-m.webp); }
  .hp-step:nth-child(4) .hp-step__panel { background-image: url(../img/hp26/step-prove-m.webp); }
  .hp26 .hp-step__shot { order: -1; margin: 30px 0 0; width: 100%; }
  .hp-step__text { display: contents; }
  .hp-step__label { order: -2; margin-bottom: 0; padding-bottom: 25px; letter-spacing: -.15px; }   /* +1px panel border = Figma's 28 / 30 insets */
  .hp26 .hp-step__text h3 { margin: 69px 0 0; padding-bottom: 0; font-weight: 700; line-height: 35px; }
  .hp-step__text p:not(.hp-step__label) { margin-top: 20px; line-height: 24px; }
  .hp-step__text br { display: none; }
  .hp-personas-head { padding: 71px 0 73px; }
  .hp26 .hp-personas-head h2 { margin-top: 42px; max-width: 250px; line-height: 40px; }
  .hp-persona { padding: 59px 0 71px; }
  .hp-persona .hp-wrap, .hp-persona--flip .hp-wrap { display: flex; flex-direction: column; }
  .hp26 .hp-persona__img { order: 2; margin-top: 40px; }
  .hp-persona__text { display: contents; }
  .hp-persona__text .hp-eyebrow { order: 1; }
  .hp26 .hp-persona__text h3 { order: 3; margin-top: 40px; font-size: 30px; line-height: 35px; }
  .hp-persona__text p:not(.hp-eyebrow) { order: 4; margin-top: 26px; line-height: 24px; }
  .hp-persona__text .hp-btn { order: 5; margin-top: 70px; width: 289px; align-self: center; }
  .hp-trust { padding-top: 71px; }
  .hp26 .hp-trust h2 { margin-top: 45px; line-height: 40px; }
  .hp-trust__sub { margin-top: 47px; line-height: 30px; }
  .hp-quote:not([hidden]), .hp-quotes.is-stacked > .hp-quote[hidden] { display: block; margin-top: 89px; text-align: center; }
  .hp-quote__mark { font-size: 100px; height: 60px; letter-spacing: -1.9px; }   /* Figma yDuOq: Georgia 100 */
  .hp-quote__body { border: 0; padding: 0; margin: 40px 0 0; }
  .hp-quote blockquote { font-size: 30px; line-height: 40px; font-weight: 500; }
  .hp-quote figcaption { margin-top: 60px; }
  .hp26 .hp-quote__logo { margin: 12px auto 0; }
  .hp-arrows { justify-content: center; }
  .hp-stats { gap: 0; margin-top: 60px; text-align: center; }
  .hp-stat { padding: 48px 0 54px; }   /* F13: Figma stat frames 241 apart, number glyph 58 below the rule, label right under it */
  .hp-stat strong { font-size: min(100px, 27vw); }
  .hp-stat > span { margin: 1px auto 0; max-width: 226px;   /* Figma breaks: fits "Kubernetes nodes secured" (219.5), not "Clusters under management" (232.2) */ font-weight: 500; font-size: 18px; line-height: 24px; letter-spacing: -.36px; }
  .hp26 .hp-trust .hp-btn--pill { display: flex; width: 289px; max-width: 100%; margin-left: auto; margin-right: auto; }   /* Figma mobile: centred (desktop stays left) */
  .hp26 .hp-endcta { padding: 90px 0 105px; }
  .hp-scan, .hp-endcta::after { display: none; }   /* Figma mobile 359:8434 has no art (Avi 2026-11-03), so no fade either */
  .hp-endcta .hp-wrap { text-align: center; }
  .hp26 .hp-endcta h2 { margin: 26px auto 0; max-width: 290px; line-height: 40px; letter-spacing: -.01em; }   /* node 359:8456: -0.3 */
  .hp-endcta .hp-wrap > p:not(.hp-eyebrow) { margin: 34px auto 0; line-height: 30px; }
  .hp-endcta__ctas { flex-direction: column; align-items: center; gap: 12px; margin-top: 85px; }
  .hp-endcta__ctas .hp-btn { width: 289px; max-width: 100%; }
}
/* ---------- landscape phone (F13: "when rotating phone, video plays fullscreen") ----------
   Browsers allow real fullscreen only from a tap, so the hero clip fills the viewport instead; home-2026.js scrolls it into place on rotate */
@media (max-width: 400px) { .hp-keys__grid { transform: scale(.42) rotateX(56deg) rotateZ(-45deg); } }
@media (max-width: 360px) { .hp-gcard { aspect-ratio: auto; min-height: 420px; } }
@media (max-width: 360px) { .hp-keys__grid { transform: scale(.37) rotateX(56deg) rotateZ(-45deg); } }
@media (max-width: 335px) { .hp-keys__grid { transform: scale(.33) rotateX(56deg) rotateZ(-45deg); } }
@media (orientation: landscape) and (max-height: 500px) {
  .hp-hero__media { width: 100vw; height: 100vh; height: 100svh; margin-left: calc(50% - 50vw); aspect-ratio: auto; border: 0; border-radius: 0; background: #000; animation: none; }
  .hp-hero__media img, .hp-video { object-fit: contain; }
}