/* AI in Context: Hugging Face video landing page (template-aic-hf-video-lp.php).
   Campaign palette: warm black, gold accent. Everything is scoped to .hflp,
   and hover styles sit behind (hover: hover) and (pointer: fine) so touch
   devices never keep a button highlighted after a tap. */

.hflp {
  --bg: #1F1A15; --panel: #110E0C; --input: #1C1612; --chip: #16120E;
  --gold: #E3A867; --gold-hover: #F2C389; --gold-light: #F5D3A3; --link: #E8B57A;
  --heading: #F7F0E6; --text: #F3EBDF; --body: #D2C5B3; --muted: #BCAD99; --subdued: #A99A87; --on-gold: #1A120B;
  --border-card: rgba(243,220,184,.13); --border-acc: rgba(231,182,118,.2);
  --gutter: clamp(20px, 4vw, 48px);
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--bg); color: var(--text);
  /* 1.42857 is line-height: normal for the Typekit builds of these fonts; the
     site's self-hosted copies report a smaller normal, so it is set explicitly. */
  font-family: proxima-nova, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.42857;
  -webkit-font-smoothing: antialiased;
}
.hflp *, .hflp *::before, .hflp *::after { box-sizing: border-box; }
/* Centred columns: max-width is the content width, gutters sit outside it. */
.hflp .hflp-hero__text, .hflp .hflp-cards, .hflp .hflp-acc-wrap, .hflp .hflp-nl__inner { box-sizing: content-box; }
.hflp h1, .hflp h2, .hflp h3, .hflp p, .hflp ul, .hflp ol { margin: 0; }
.hflp .hflp-heading { font-family: museo-sans, 'Helvetica Neue', Arial, sans-serif; font-weight: 700; color: var(--heading); }

/* Links: gold, no site-wide underline border. */
.hflp a { color: var(--link); text-decoration: none; border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .hflp a:hover { color: var(--gold-light); } }
.hflp a:focus-visible, .hflp button:focus-visible, .hflp [role="button"]:focus-visible, .hflp input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
/* No file-type icons after links on this page. */
.hflp a::after { content: none !important; }

/* Spotlight glow behind the whole page (position set by JS). */
.hflp-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(598px circle at var(--gx, -999px) var(--gy, -999px), rgba(186,116,52,.30), rgba(110,66,30,.1) 45%, rgba(31,26,21,0) 75%); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* First screen minus the site header and a strip of the cards; JS sets the exact height. */
.hflp-hero { position: relative; overflow: hidden; background: var(--bg); min-height: max(440px, calc(100svh - 240px)); display: flex; align-items: flex-end; }
.hflp-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
/* On tall, narrow screens the photo is sized by the screen's width, not the
   hero's height, so a long title can't push the subject's face down behind it.
   The text starts halfway down the photo (below the subject's chin) and the
   photo fades into the backdrop underneath. */
@media (max-aspect-ratio: 4/5) {
  .hflp-hero__img { bottom: auto; height: 120vw;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
  .hflp .hflp-hero__text { padding-top: 60vw; }
}
/* Elsewhere the photo keeps its full-screen size (set by aic-hf-video-lp.js) and is
   anchored to the bottom, so the shorter hero trims only the top of it. The query
   is the exact opposite of the one above, so the two never both apply at 4:5. */
@media not all and (max-aspect-ratio: 4/5) { .hflp-hero__img { top: auto; height: max(100%, var(--hflp-photo-h, 100%)); } }
/* Holder for the table cube; sized and placed by JS, kept out of the flex row. */
.hflp-hero [data-hflp-hero-cube] { position: absolute; }
.hflp-hero__fade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(31,26,21,0) 58%, rgba(31,26,21,.65) 80%, #1F1A15 96%); }
.hflp-hero .hflp-glow { z-index: 0; -webkit-mask-image: linear-gradient(180deg, transparent 50%, #000 96%); mask-image: linear-gradient(180deg, transparent 50%, #000 96%); }
.hflp-hero__text { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter) clamp(32px, 4vw, 48px); display: flex; flex-direction: column; gap: 16px; }
.hflp-hero h1 { font-size: clamp(40px, 5.4vw, 64px); letter-spacing: -1px; line-height: 1.05; color: #F7F0E6; text-wrap: balance; text-shadow: 0 2px 24px rgba(0,0,0,.5); }
.hflp-hero h1 span { display: inline-block; }
/* Byline = the site's standard entry meta (get_entry_meta_text), restyled:
   16px body colour, items 6px apart, author link underlined in gold. */
.hflp-byline { font-size: 16px; color: var(--body); }
.hflp .hflp-byline .entry-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; margin: 0 !important; padding: 0; background: none;
  color: var(--body); font-size: 16px; line-height: 1.42857; }
/* inline-block so the underline sits under the full line box. */
.hflp .hflp-byline .author a { display: inline-block; color: var(--text); border-bottom: 1px solid rgba(231,182,118,.6); }
@media (hover: hover) and (pointer: fine) { .hflp .hflp-byline .author a:hover { color: var(--text); border-bottom-color: rgba(231,182,118,.6); } }
/* Share toggle. The "·" before it sits inside the same span, so this margin sets the space after the dot. */
.hflp .hflp-byline .eightyk-social-no-text-button { margin-left: 6px; padding: 0; color: var(--body); font-size: 16px; line-height: inherit; vertical-align: baseline; cursor: pointer; transition: color .15s ease-in-out; }
@media (hover: hover) and (pointer: fine) { .hflp .hflp-byline .eightyk-social-no-text-button:hover { color: var(--gold-light); } }
/* Its pop-out share circles, in the page palette instead of brand colours. */
.hflp .hflp-byline .socialcount-no-text a { border-bottom: 0; }
.hflp .hflp-byline .socialcount-no-text .social-button-no-text { background: rgba(17,14,12,.55); border: 1px solid rgba(231,182,118,.55); color: var(--body); padding: 0; }
.hflp .hflp-byline .socialcount-no-text .social-icon { top: 0; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .hflp .hflp-byline .socialcount-no-text a:hover .social-button-no-text { background: rgba(227,168,103,.14); border-color: var(--gold-light); color: var(--gold-light); } }

/* Newsletter sign-up under the byline: the form and a line on what subscribers get. */
.hflp-hero-nl { width: 100%; max-width: 480px; margin-top: 4px; }
.hflp-hero-nl form { margin: 0; }
.hflp-hero-nl .hflp-nl-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* .form-newsletter-signup in these selectors outranks the shared form rules further down, so the field and button match. */
.hflp .hflp-hero-nl .form-newsletter-signup input[type="email"] { flex: 999 1 200px; height: 44px; background: rgba(17,14,12,.55); }
.hflp-hero-nl .submit { flex: 1 0 auto; display: flex; }
.hflp .hflp-hero-nl .form-newsletter-signup input[type="submit"] { width: 100%; height: 44px; line-height: 44px; padding: 0 20px; }
/* .hflp in front so this margin beats the .hflp p reset at the top. */
.hflp .hflp-hero-nl__note { margin-top: 10px; font-size: 14px; line-height: 1.45; color: var(--body); text-wrap: pretty; }

/* ── Action cards ─────────────────────────────────────────────────────── */
.hflp-light { position: relative; }
.hflp-cards { position: relative; max-width: 1200px; margin: 0 auto; padding: 40px var(--gutter) clamp(64px, 8vw, 96px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 56px 48px; isolation: isolate; align-items: stretch; }
.hflp-card { position: relative; isolation: isolate; background: rgba(17,14,12,.5); border: 1.5px solid var(--border-card); padding: 32px;
  display: flex; flex-direction: column; gap: 14px; }
.hflp-card--wide { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 48px; row-gap: 20px; }
.hflp-card--wide .hflp-card__main { flex: 1 1 360px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.hflp-card--wide .hflp-card__side { flex: 0 1 340px; display: flex; flex-direction: column; gap: 10px; }
/* 28px grid texture; JS snaps the cell size so whole cells fit. */
.hflp-card__grid { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(rgba(243,220,184,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(243,220,184,.045) 1px, transparent 1px);
  background-size: 28px 28px; background-position: -1px -1px; }
/* Spotlight-lit border ring + faint inner wash. */
.hflp-card__ring { position: absolute; inset: -1.5px; padding: 1.5px; pointer-events: none;
  background: radial-gradient(172px circle at var(--lx, -999px) var(--ly, -999px), rgba(255,246,228,1), rgba(255,226,180,0) 70%),
              radial-gradient(644px circle at var(--lx, -999px) var(--ly, -999px), rgba(244,196,128,.95), rgba(214,150,78,.45) 30%, rgba(200,140,70,0) 72%);
  -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, linear-gradient(#000 0 0); mask-composite: exclude; }
.hflp-card__wash { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(736px circle at var(--lx, -999px) var(--ly, -999px), rgba(255,210,150,.07), rgba(255,210,150,0) 60%); }
/* Optional image along the bottom of a card, at its own proportions (set
   inline), growing into any space left under the content. It bleeds to the
   card's edges and fades in from the top and sides. Behind the hover boxes,
   above the grid. */
.hflp-card__still { position: relative; z-index: -1; flex: 1 0 auto; margin: 6px -32px -32px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 35%, #000 70%), linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.6) 35%, #000 70%), linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-composite: intersect; }
.hflp-card__still-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
/* In a full-width card the still runs under both columns. */
.hflp-card--wide .hflp-card__still { flex: 1 0 100%; margin-top: 0; }
.hflp-card__boxes { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hflp-card__boxes > i { position: absolute; border-radius: 1px; background: #050403; opacity: 0; transform: scale(0); }

.hflp-card__title { font-size: clamp(26px, 2.4vw, 30px); line-height: 1.1; }
/* Text blocks. One straight after the title sits tight under it, like an intro. */
.hflp-card__text { font-size: 18px; color: var(--text); line-height: 1.5; text-wrap: pretty; }
.hflp-card__title + .hflp-card__text { margin-top: -6px; margin-bottom: 8px; }
.hflp-card__text a { border-bottom: 1px solid rgba(231,182,118,.5); }
.hflp-card__text strong { color: var(--heading); }
.hflp-card__text p + p, .hflp-card__text ul, .hflp-card__text ol { margin-top: 10px; }
.hflp-card__text ul, .hflp-card__text ol { padding-left: 22px; }
.hflp-card__text li { margin: 4px 0; }
/* In a full-width card's side column, text reads as small print under the buttons. */
.hflp-card__side .hflp-card__text { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Each button with its description underneath, set apart from the next pair. */
.hflp-res { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.hflp-res + .hflp-res { margin-top: 30px; }
.hflp-res__desc { font-size: 14px; color: var(--muted); line-height: 1.45; }
.hflp-res__desc strong { color: var(--heading); }

/* Buttons. */
/* Long labels wrap into even lines instead of leaving one word on its own. */
.hflp .hflp-btn { display: block; padding: 12px 14px; text-align: center; text-wrap: balance;
  background: var(--gold); color: var(--on-gold); border: 0; border-radius: 3px; font: inherit; font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.42857;
  text-decoration: none; cursor: pointer; transition: background .15s ease-in-out, color .15s ease-in-out, border-color .15s ease-in-out; }
/* The icon flows inline with the label, so when a label wraps on a phone the
   icon stays next to its first line instead of out at the left edge. */
.hflp .hflp-btn i { display: inline-block; margin-right: 8px; vertical-align: -1px; font-size: 15px; width: 18px; text-align: center; }
@media (hover: hover) and (pointer: fine) { .hflp .hflp-btn:hover { background: var(--gold-hover); color: var(--on-gold); } }
.hflp .hflp-btn--inline { align-self: flex-start; padding: 12px 22px; }
.hflp .hflp-btn--outline { display: flex; align-items: center; justify-content: flex-start; gap: 10px; background: transparent; border: 1px solid var(--gold); color: var(--text); font-size: 15px; }
.hflp .hflp-btn--outline i, .hflp .hflp-btn__glyph { margin-right: 0; color: var(--gold); width: 16px; text-align: center; }
@media (hover: hover) and (pointer: fine) { .hflp .hflp-btn--outline:hover { background: rgba(227,168,103,.1); border-color: var(--gold-light); color: var(--heading); } }

/* Stat (static count). */
.hflp-stat { display: flex; align-items: baseline; gap: 0 8px; flex-wrap: wrap; padding: 4px 0; }
.hflp-stat__num { font-family: museo-sans, 'Helvetica Neue', Arial, sans-serif; font-size: 20px; font-weight: 700; line-height: 1.15; color: var(--heading); }
.hflp-stat__label { font-size: 16px; color: var(--body); line-height: 1.5; }

/* Region chips. */
.hflp-prompt { font-size: 16px; color: var(--body); line-height: 1.5; margin-top: 4px; }
.hflp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@property --chip-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --chip-h { syntax: '<color>'; inherits: false; initial-value: rgba(231,182,118,.5); }
@keyframes hflp-chip-run { from { --chip-a: 0deg; --chip-h: #FFE6BC; } to { --chip-a: 360deg; --chip-h: #FFE6BC; } }
.hflp-chip { padding: 8px 16px; border-radius: 50px; font: inherit; font-size: 14px; line-height: 1.42857; cursor: pointer; transition: all .15s ease-in-out;
  color: var(--text); border: 1px solid transparent;
  background: linear-gradient(var(--chip), var(--chip)) padding-box,
              conic-gradient(from var(--chip-a), rgba(231,182,118,.5) 0deg, rgba(231,182,118,.5) 200deg, var(--chip-h) 300deg, rgba(231,182,118,.5) 360deg) border-box; }
@media (hover: hover) and (pointer: fine) { .hflp-chip:not([aria-pressed="true"]):hover { animation: hflp-chip-run 1.1s cubic-bezier(.16,1,.3,1) 1 forwards; } }
.hflp-chip[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 700; }
/* Location chips, then the chosen location's description, stat and button. */
.hflp-location { display: flex; flex-direction: column; gap: 14px; }
/* The card's height animates when the visitor switches location (aic-hf-video-lp.js); the new content fades in. */
.hflp-region { display: flex; flex-direction: column; gap: 14px; animation: hflp-fade-in .3s ease-out; }
/* 28px above a location's button: the region's 14px gap plus this margin. */
.hflp .hflp-region__btn { margin-top: 14px; }
.hflp-region[hidden] { display: none; }
@keyframes hflp-fade-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .hflp-region { animation: none; } }
.hflp-region__desc { font-size: 16px; color: var(--body); line-height: 1.5; margin-top: 4px; }

/* Copy-link field + share grid. */
.hflp-copy { display: flex; align-items: center; gap: 10px; width: 100%; border: 1px solid rgba(243,220,184,.32); border-radius: 3px; padding: 5px 5px 5px 14px;
  background: rgba(0,0,0,.25); cursor: pointer; font: inherit; color: inherit; text-align: left; }
.hflp-copy > i { color: var(--muted); font-size: 13px; }
.hflp-copy__url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; color: var(--body); }
.hflp-copy__btn { padding: 9px 14px; background: var(--gold); color: var(--on-gold); border-radius: 3px; font-size: 16px; font-weight: 600; }
.hflp-share { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 4px; }

/* Inline newsletter form inside a card (Learn more). */
.hflp-nl-inline form { margin: 0; }
.hflp-nl-inline .hflp-nl-row { display: flex; flex-wrap: wrap; gap: 8px; }
.hflp-nl-inline input[type="email"] { flex: 999 1 180px; height: 46px !important; }
.hflp-nl-inline .submit { flex: 1 0 auto; display: flex; }
.hflp-nl-inline input[type="submit"] { height: 46px !important; width: 100%; }


/* ── Feedback / Sources / Credits ─────────────────────────────────────── */
.hflp-acc-wrap { max-width: 720px; margin: calc(-1 * clamp(10px, 1vw, 12px)) auto 0; padding: 0 var(--gutter) clamp(24px, 3vw, 32px); position: relative; }
.hflp-acc { border: 1px solid var(--border-acc); border-radius: 4px; overflow: hidden; display: flex; flex-direction: column; }
.hflp-acc__item { background: var(--panel); }
.hflp-acc__item + .hflp-acc__item { border-top: 1px solid var(--border-acc); }
.hflp-acc__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; width: 100%; padding: 22px 24px; margin: 0;
  background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.hflp-acc__titles { display: flex; flex-direction: column; gap: 4px; }
.hflp-acc__title { font-size: 24px; }
.hflp-acc__sub { font-family: museo-sans, 'Helvetica Neue', Arial, sans-serif; font-size: 16px; font-weight: 700; color: var(--subdued); }
.hflp-acc__toggle { font-family: museo-sans, 'Helvetica Neue', Arial, sans-serif; font-size: 15px; font-weight: 700; color: var(--link); padding-top: 6px; white-space: nowrap; }
.hflp-acc__body { padding: 0 24px 24px; display: flex; flex-direction: column; gap: 12px; font-size: 16px; color: var(--body); line-height: 1.5; }
.hflp-acc__body[hidden] { display: none; }
.hflp-acc__body p + p, .hflp-acc__body ul, .hflp-acc__body ol { margin-top: 10px; }
.hflp-acc__body ul, .hflp-acc__body ol { padding-left: 22px; }
.hflp-acc__body li { margin: 4px 0; }
.hflp-acc__body a { border-bottom: 1px solid rgba(231,182,118,.5); }

/* ── Newsletter ───────────────────────────────────────────────────────── */
.hflp-nl { position: relative; background: radial-gradient(ellipse 50% 120% at 50% 100%, rgba(140,86,38,.35), rgba(31,26,21,0) 70%); scroll-margin-top: 80px; }
.hflp-nl__inner { max-width: 720px; margin: 0 auto; padding: clamp(32px, 4vw, 48px) var(--gutter) clamp(56px, 8vw, 96px); display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: left; }
.hflp-nl h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.1; text-wrap: balance; }
.hflp-nl__body { font-size: 17px; line-height: 1.6; color: var(--muted); text-wrap: pretty; }
.hflp-nl__form { width: 100%; max-width: 520px; margin-top: 8px; }
.hflp-nl__form form { margin: 0; }
.hflp-nl__form .hflp-nl-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hflp-nl__form input[type="email"] { flex: 999 1 240px; }
.hflp-nl__form .submit { flex: 1 0 auto; display: flex; }
.hflp-nl__form input[type="submit"] { width: 100%; height: 48px !important; padding: 0 26px; }

/* The shared newsletter shortcode's fields, restyled for the dark palette. */
.hflp .form-newsletter-signup input[type="email"] { min-width: 0; height: 48px; margin: 0; background: var(--input); border: 1px solid rgba(231,182,118,.7); border-radius: 3px;
  padding: 0 14px; color: var(--text); font: inherit; font-size: 16px; box-shadow: none; outline: none; }
.hflp .form-newsletter-signup input[type="email"]:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }
.hflp .form-newsletter-signup input[type="email"]::placeholder { color: #8F8170; }
/* Submit: no vertical padding (overriding the theme's .btn-homepage) and line-height
   equal to the height, so the label centres the same in every browser. */
.hflp .form-newsletter-signup input[type="submit"] { -webkit-appearance: none; appearance: none; margin: 0; padding: 0 26px; background: var(--gold); border: 0; border-radius: 3px; color: var(--on-gold); font: inherit; font-size: 16px;
  font-weight: 600; letter-spacing: 0; text-transform: none; box-shadow: none; transition: background .15s ease-in-out; }
.hflp .hflp-nl-inline .form-newsletter-signup input[type="submit"] { line-height: 46px; }
.hflp .hflp-nl__form .form-newsletter-signup input[type="submit"] { line-height: 48px; }
@media (hover: hover) and (pointer: fine) { .hflp .form-newsletter-signup input[type="submit"]:hover { background: var(--gold-hover); color: var(--on-gold); } }

/* ── Link preview (desktop hover) ─────────────────────────────────────── */
.hflp-pv { position: fixed; left: -999px; top: -999px; width: 340px; z-index: 50; display: block; color: inherit; text-decoration: none; pointer-events: none; opacity: 0;
  transform: scale(.55); will-change: transform, clip-path;
  transition: clip-path .14s cubic-bezier(.4,0,1,1), transform .14s cubic-bezier(.4,0,1,1), opacity .14s linear .04s; }
.hflp-pv.is-on { opacity: 1; pointer-events: auto; transform: scale(1);
  transition: clip-path .28s cubic-bezier(.16,1,.3,1), transform .32s cubic-bezier(.16,1,.3,1), opacity .08s linear; }
.hflp .hflp-pv, .hflp .hflp-pv:hover { color: inherit; }
.hflp-pv__frame { background: var(--panel); border: 1px solid var(--gold-hover); border-radius: 4px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 14px 28px rgba(0,0,0,.45), 0 30px 60px rgba(0,0,0,.4); }
.hflp-pv__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--border-acc); font-size: 13px; color: var(--muted); }
.hflp-pv__bar i { font-size: 10px; }
.hflp-pv__host { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hflp-pv__shot { aspect-ratio: 16 / 10; background: #120F0C center top / cover no-repeat; }
.hflp-pv__caret { position: absolute; z-index: 2; width: 8px; height: 16px; display: block; }
.hflp-pv__caret--l { left: -7px; }
.hflp-pv__caret--r { right: -7px; }

/* ── Glass cube (aic-hf-glass-cube.js) ───────────────────────────────────────── */
/* Panes are canvases painted with the glass shader; the cube is one canvas,
   redrawn each frame, facing the camera from the middle of the box. */
.hflp .gcube { position: relative; pointer-events: none; }
.hflp .gcube__stage { position: absolute; inset: 0; perspective-origin: 50% 50%; }
.hflp .gcube__box { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; }
.hflp .gcube__pane { position: absolute; left: 0; top: 0; display: block; box-sizing: border-box; }
.hflp .gcube__pane--edges { border: var(--edge) solid rgba(186,181,174,.6); }
.hflp .gcube__pane--tb { border-top: var(--edge) solid rgba(186,181,174,.6); border-bottom: var(--edge) solid rgba(186,181,174,.6); }
.hflp .gcube__cube { position: absolute; left: 0; top: 0; display: block; }
/* Hero: sits on the table in the still (placed by aic-hf-video-lp.js), softened into the photo. */
.hflp .hflp-cube-table { position: absolute; filter: blur(.35px) saturate(.9); }
/* Newsletter: the cube's frame is clamp(160px, 20vw, 240px) with the box at 66% of
   it; the margins keep the frame's spacing around the box. Centred over the
   left-aligned text. */
.hflp .hflp-cube-float { --f: clamp(160px, 20vw, 240px); width: calc(var(--f) * .66); align-self: center;
  margin: calc(var(--f) * -.015) 0 calc(var(--f) * .225 - 8px); }

@media (prefers-reduced-motion: reduce) {
  .hflp-chip { transition: none; }
}