/* =========================================================
   LYLAX — Shared page layer (Nov 2026)
   Loaded on every page after styles.css. Holds the design tokens,
   the hp building blocks (wrap, labels, headings, buttons, image
   frames) shared with the homepage, the footer, and the inner-page
   components (prefix pg): page hero, section heading, cards, navy
   call-to-action band, technology explorer, FAQ, myths,
   collections, contact and endorsements. Homepage-only layout is
   in home.css.
   ========================================================= */

:root {
  --hp-navy: #0f2557;
  --hp-navy-deep: #0a1a3d;
  --hp-soft: #f2f5fb;
  --hp-line: #dbe3f0;
  --hp-muted: #5a6b8a;
  --hp-accent: #a7c3f5;       /* light blue: buttons, arrows, marks on navy */
  --hp-accent-hover: #c0d4f8;
  --hp-ink: #3360bd;          /* chapter numbers and small labels on light backgrounds */
  --hp-radius: 16px;
  --hp-nav: 68px;
}
.nav { background: rgba(255,255,255,.96); }

/* Zero-specificity resets so component classes below can set margins */
:where(.hp, .pg) :where(h1, h2, h3, h4, p, figure, ul, ol) { margin: 0; }
:where(.hp, .pg) :where(ul, ol) { padding: 0; list-style: none; }
:is(.hp, .pg) [hidden] { display: none !important; }
:is(.hp, .pg) section[id], .hpChapter { scroll-margin-top: var(--hp-nav); }

/* ---------- Building blocks ---------- */
.hpWrap { max-width: 1440px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 64px); }
.hpSection { padding: 96px 0; }
.hpCenter { text-align: center; }
.hpCenter .hpLead { margin-left: auto; margin-right: auto; }

.hpLabel {
  display: inline-block; margin-bottom: 16px; padding: 5px 12px;
  border: 1px solid var(--hp-line); border-radius: 999px; background: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hp-muted);
}
.hpLabel b { margin-right: 4px; color: var(--hp-ink); }
.hpH2 {
  max-width: 900px; margin: 6px auto 16px;
  font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  color: var(--hp-navy); text-wrap: balance;
}
.hpH3 { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.hpLead { max-width: 700px; font-size: clamp(16px, 1.8vw, 19px); line-height: 1.6; color: var(--hp-muted); }
.hpTag { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hp-muted); }
.hpNote { margin-top: 10px; font-size: 13px; color: var(--hp-muted); }
.hpLink {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 16px;
  font-weight: 700; color: var(--hp-navy);
  text-decoration: underline; text-decoration-color: var(--hp-accent); text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.hpClosing {
  max-width: 860px; margin: 44px auto 0; text-align: center; text-wrap: balance;
  font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; color: var(--hp-navy);
}
.hpPullquote {
  max-width: 820px; margin: 40px auto 0; text-align: center; text-wrap: balance;
  font-size: clamp(21px, 2.8vw, 30px); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--hp-navy);
}

.hpBtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 13px 24px;
  border: 1.5px solid transparent; border-radius: 999px;
  font-size: 14px; font-weight: 700;
  transition: transform .15s, background .15s, border-color .15s;
}
.hpBtn:hover { transform: translateY(-1px); }
.hpBtn:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 3px; }
.hpBtn--accent { background: var(--hp-accent); color: var(--hp-navy); }
.hpBtn--accent:hover { background: var(--hp-accent-hover); }
.hpBtn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.hpBtn--ghost:hover { background: rgba(255,255,255,.08); }
.hpBtn--navy { background: var(--hp-navy); color: #fff; }
.hpBtn--line { background: #fff; border-color: var(--hp-navy); color: var(--hp-navy); }
.hpBtn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ---------- Image frames (site.js → fillImageSlots) ---------- */
.hpPhoto { width: 100%; border-radius: var(--hp-radius); }
.hpPhoto--banner { margin-top: 40px; }
.hpPhoto--dark.is-empty {
  border-color: rgba(255,255,255,.25);
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 14px, rgba(255,255,255,.08) 14px 28px);
}
.hpPhoto--dark .imgSpec { color: #fff; }
.hpPhoto--dark .imgSpec__label { color: var(--hp-accent); }
.hpPhoto--dark .imgSpec__brief { color: rgba(255,255,255,.85); }
.hpPhoto--dark .imgSpec__file { background: rgba(255,255,255,.12); color: #fff; }
/* Card thumbnails: compact brief */
.hpThumb { border-radius: 0; }
.hpThumb.is-empty { padding: 12px 16px; border-width: 0 0 2px; }
.hpThumb .imgSpec { gap: 5px; }
.hpThumb .imgSpec__label { font-size: 10px; }
.hpThumb .imgSpec__brief { font-size: 12px; line-height: 1.45; }
.hpThumb .imgSpec__meta { display: none; }
.hpThumb .imgSpec__file { font-size: 10px; padding: 2px 8px; }
/* Small illustrations: the full brief is in the hover title */
.hpIcon { flex-shrink: 0; background: transparent; border-radius: 12px; }
.hpIcon > img { object-fit: contain; }
.hpIcon.is-empty { padding: 4px; border-width: 1.5px; }
.hpIcon .imgSpec { gap: 0; }
.hpIcon .imgSpec__label { font-size: 8px; letter-spacing: .06em; line-height: 1.3; }
.hpIcon .imgSpec__brief, .hpIcon .imgSpec__meta, .hpIcon .imgSpec__file { display: none; }

/* ---------- Footer: logo tile, tagline, light-blue column titles ---------- */
.footer { background: var(--hp-navy-deep); }
.footer__logo { display: inline-flex; align-items: center; }
.footer__logo img { width: 190px; height: auto; }
.footer__tag { max-width: 240px; margin-top: 18px; font-size: 16px; font-weight: 700; line-height: 1.35; letter-spacing: -.01em; color: #fff; }
.footer__cols h4 { color: var(--hp-accent); letter-spacing: .04em; text-transform: none; font-weight: 700; }

/* =========================================================
   INNER PAGES (prefix pg)
   ========================================================= */
.pg { background: var(--hp-soft); color: var(--hp-navy); }
.pg em { font-weight: 800; }
.pgSection { padding: 96px 0; }
.pgSection--tight { padding: 32px 0 96px; }
.pgSection--band { background: #fff; border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); }

/* Eyebrow: small label with a dot */
.pgEyebrow {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; color: rgba(15,37,87,.7);
}
.pgEyebrow::before { content: ''; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--hp-ink); }
.pgEyebrow--plain { justify-content: flex-start; }
.pgEyebrow--plain::before { display: none; }
.pgEyebrow--light { color: rgba(255,255,255,.75); }
.pgEyebrow--light::before { background: var(--hp-accent); }

/* Page hero: title beside a photo */
.pgHero { position: relative; isolation: isolate; padding: calc(var(--hp-nav) + 56px) 0 64px; overflow: hidden; }
.pgHero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 85% 0%, rgba(167,195,245,.35), transparent 70%);
}
.pgHero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.pgHero__copy { text-align: center; }
.pgHero__title {
  margin: 20px 0 22px; font-size: clamp(40px, 5.2vw, 72px); font-weight: 800; letter-spacing: -.04em; line-height: 1.04;
  color: var(--hp-navy); text-wrap: balance;
}
.pgHero__title em { display: inline !important; line-height: inherit !important; }
.pgHero__lead { max-width: 560px; margin: 0 auto; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: var(--hp-muted); }
.pgHero__photo { width: 100%; border-radius: 24px; border: 1px solid rgba(15,37,87,.08); box-shadow: 0 30px 60px -34px rgba(15,37,87,.35); }
.pgHero__caption { margin-top: 12px; text-align: center; font-size: 12px; color: var(--hp-muted); }
.pgHero--center { text-align: center; }
.pgHero--center .pgHero__lead { max-width: 640px; }
.pgHero--fabric {
  background:
    linear-gradient(180deg, rgba(242,245,251,.92) 0%, rgba(242,245,251,.7) 50%, rgba(242,245,251,.2) 100%),
    url('/images/bg-fabric-light.webp') center bottom / cover no-repeat,
    var(--hp-soft);
}
.pgSep { margin: 0 .12em; font-weight: 300; color: var(--hp-accent); }
.pgChips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.pgChips a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(15,37,87,.15); background: #fff; font-size: 12px; font-weight: 600; color: var(--hp-navy);
  transition: border-color .15s, background .15s;
}
.pgChips a:hover { border-color: var(--hp-ink); background: #eef3fd; }

/* Section heading */
.pgHead { max-width: 800px; margin: 0 auto 56px; text-align: center; }
.pgHead__title {
  margin: 20px 0 16px; font-size: clamp(32px, 4vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  color: var(--hp-navy); text-wrap: balance;
}
.pgHead__lead { max-width: 640px; margin: 0 auto; font-size: 16px; line-height: 1.7; color: var(--hp-muted); }
.pgHead__lead:empty { display: none; }

/* Cards */
.pgCards { display: grid; gap: 20px; }
.pgCards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pgCards--three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 56px; }
.pgCards--two > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
.pgCard { padding: 32px; background: #fff; border: 1px solid var(--hp-line); border-radius: var(--hp-radius); }
.pgCard__num { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: #8a9bb5; }
.pgCard__title { margin: 12px 0 14px; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.2; }
.pgCard p { font-size: 15px; line-height: 1.65; color: var(--hp-muted); }
.pgCard p + p { margin-top: 12px; }
.pgCard .pgCard__sub { margin-bottom: 10px; font-weight: 700; color: var(--hp-navy); }
.pgCard__note { padding-left: 14px; border-left: 3px solid var(--hp-accent); font-style: italic; }
.pgCenterArt { width: 96px; margin: 0 auto 8px; }

/* Navy call-to-action band: runs straight into the footer */
.pgCta { padding: 96px 0; background: var(--hp-navy-deep); color: #fff; text-align: center; }
.pgCta__inner { display: flex; flex-direction: column; align-items: center; }
.pgCta__art { width: 96px; margin: -144px auto 40px; }
.pgCta__art.is-empty { background: var(--hp-soft); }
.pgCta__title {
  max-width: 900px; margin: 16px 0 18px; font-size: clamp(30px, 4vw, 48px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  color: #fff; text-wrap: balance;
}
.pgCta__body { max-width: 720px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.82); }
.pgCta__body + .pgCta__body { margin-top: 14px; }
.pgCta__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.pgCta__title em {
  background: none !important; animation: none !important;
  color: var(--hp-accent) !important; -webkit-text-fill-color: var(--hp-accent) !important;
}
.pgCta + .footer, main:has(> .pgCta:last-child) + .footer { padding-top: 40px; }

/* ---------- Technology: slider ---------- */
.pgSlider { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: start; }
.pgSlider__stageCard { padding: 24px; background: #fff; border: 1px solid var(--hp-line); border-radius: 24px; }
.pgSlider__stage { width: 100%; height: auto; }
.pgSlider__fixed { margin-top: 6px; text-align: center; font-size: 12px; color: var(--hp-muted); }
.pgSlider__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--hp-muted); }
.pgSlider__range { width: 100%; height: 32px; margin: 10px 0 2px; accent-color: var(--hp-navy); cursor: pointer; }
.pgSlider__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--hp-muted); }
.pgSlider__readout { margin-top: 24px; padding: 22px; background: var(--hp-soft); border: 1px solid var(--hp-line); border-radius: 16px; }
.pgSlider__readout strong { display: block; margin: 6px 0 8px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.pgSlider__readout p { font-size: 14px; line-height: 1.6; color: var(--hp-muted); }
.pgSlider__note { margin-top: 20px; font-size: 14px; line-height: 1.6; color: var(--hp-muted); }
.pgSlider__explainer { max-width: 720px; margin: 40px auto 0; text-align: center; font-size: 14px; line-height: 1.7; color: var(--hp-muted); }

/* ---------- Technology: system explorer ---------- */
.pgTabs { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.pgTab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px;
  text-align: left; background: #fff; border: 1.5px solid var(--hp-line); border-radius: 12px; color: var(--hp-navy);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.pgTab:hover { border-color: rgba(15,37,87,.4); }
.pgTab:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: 3px; }
.pgTab__order, .pgTab__cat { font-size: 11px; color: var(--hp-muted); }
.pgTab__name { font-size: 14px; font-weight: 700; }
.pgTab.is-active { background: #e8effc; border-color: var(--hp-navy); box-shadow: 0 0 0 3px rgba(167,195,245,.6); }
.pgTab--hero { background: var(--hp-navy); border-color: var(--hp-navy); color: #fff; }
.pgTab--hero .pgTab__order, .pgTab--hero .pgTab__cat { color: rgba(255,255,255,.7); }
.pgTab--hero.is-active { background: var(--hp-navy); box-shadow: 0 0 0 3px var(--hp-accent); }
.pgExplorer { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
.pgSys, .pgContinuum { padding: 32px; background: #fff; border: 1px solid var(--hp-line); border-radius: 24px; }
.pgSys__eyebrow { font-size: 12px; color: var(--hp-muted); }
.pgSys__title { margin: 6px 0 10px; font-size: clamp(32px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; }
.pgSys__oneLiner { margin-bottom: 14px; font-size: 17px; line-height: 1.5; }
.pgSys__how { font-size: 14px; line-height: 1.65; color: var(--hp-muted); }
.pgSys__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; }
.pgSys__cols h4 { margin-bottom: 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--hp-muted); }
.pgSys__list { display: grid; gap: 8px; font-size: 14px; line-height: 1.45; }
.pgSys__list li { position: relative; padding-left: 22px; }
.pgSys__list li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.pgSys__list--yes li::before { content: '\2713'; color: var(--hp-navy); }
.pgSys__list--no li::before { content: '\00d7'; left: 2px; font-size: 17px; line-height: 1.1; color: var(--hp-muted); }
.pgSys__who { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--hp-line); font-size: 14px; line-height: 1.6; color: var(--hp-muted); }
.pgSys__who strong { color: var(--hp-navy); }
.pgContinuum__title { margin: 8px 0 20px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.pgBar { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label val" "track val"; gap: 6px 16px; align-items: center; margin-bottom: 14px; }
.pgBar__label { grid-area: label; font-size: 12px; font-weight: 600; }
.pgBar__track { grid-area: track; height: 8px; overflow: hidden; border-radius: 999px; background: #e6ecf5; }
.pgBar__fill { height: 100%; border-radius: inherit; background: var(--hp-navy); transition: width .8s var(--ease-out); }
.pgBar__val { grid-area: val; min-width: 24px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--hp-muted); }
.pgContinuum__note { margin-top: 16px; font-size: 12px; line-height: 1.6; color: var(--hp-muted); }

/* Centred prose block */
.pgProse { max-width: 760px; text-align: center; }
.pgProse .pgHead__title { margin-bottom: 24px; }
.pgProse p:not(.pgEyebrow) { margin-bottom: 16px; font-size: 16px; line-height: 1.75; color: var(--hp-muted); }
.pgProse .pgProse__strong { font-weight: 700; color: var(--hp-navy); }
.pgProse .pgProse__fine { margin: 24px 0 0; font-size: 13px; }

/* ---------- FAQ ---------- */
.pgFaq { overflow: hidden; background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; }
.pgFaq[open] { border-color: var(--hp-ink); }
.pgFaq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px;
  list-style: none; cursor: pointer; font-size: 16px; font-weight: 600; line-height: 1.45;
}
.pgFaq summary::-webkit-details-marker { display: none; }
.pgFaq summary:focus-visible { outline: 3px solid var(--hp-accent); outline-offset: -3px; }
.pgFaq__toggle {
  display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  background: var(--hp-accent); color: var(--hp-navy); transition: transform .2s;
}
.pgFaq[open] .pgFaq__toggle { transform: rotate(45deg); }
.pgFaq__a { margin: 0 24px; padding: 18px 0 22px; border-top: 1px solid var(--hp-line); font-size: 15px; line-height: 1.8; color: var(--hp-muted); }
.pgTopHead { text-align: center; }
.pgTopHead__row { display: flex; align-items: center; justify-content: center; gap: 20px; }
.pgTopHead__row .pgHead__title { margin: 0; }
.pgTopHead__art { width: 84px; }
.pgFaqTop { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: clamp(32px, 4vw, 64px); align-items: start; margin-top: 40px; }
.pgFaqTop__photo { position: sticky; top: calc(var(--hp-nav) + 24px); border-radius: 16px; }
.pgFaqTop__list .pgFaq { border: 0; border-bottom: 1px solid var(--hp-line); border-radius: 0; background: transparent; }
.pgFaqTop__list .pgFaq summary { padding: 20px 0; }
.pgFaqTop__list .pgFaq__a { margin: 0; padding-top: 0; border-top: 0; }
.pgFaqGroup { margin-top: 64px; scroll-margin-top: calc(var(--hp-nav) + 24px); }
.pgFaqGroup:first-child { margin-top: 0; }
.pgFaqGroup__title {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px;
  font-size: clamp(22px, 3vw, 28px); font-weight: 800; letter-spacing: -.025em; line-height: 1.3;
}
.pgFaqGroup__title > span {
  display: grid; place-items: center; flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(167,195,245,.4); font-size: 12px; letter-spacing: 0;
}
.pgFaqGroup__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.pgContactBox {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 72px; padding: 32px;
  background: #eef3fd; border: 1px solid rgba(51,96,189,.25); border-radius: 16px;
}
.pgContactBox > div { flex: 1; }
.pgContactBox h2 { margin-bottom: 8px; font-size: 24px; font-weight: 800; letter-spacing: -.025em; }
.pgContactBox p { max-width: 580px; font-size: 14px; line-height: 1.7; color: var(--hp-muted); }
.pgContactBox__art { width: 84px; }
.pgContactBox .hpBtn { flex-shrink: 0; }

/* ---------- Myths ---------- */
.pgMyths { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pgMyths > :last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
.pgMyth { display: grid; align-content: start; gap: 18px; padding: 32px; background: #fff; border: 1px solid var(--hp-line); border-radius: 24px; }
.pgMyth__row { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; }
.pgMyth__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.pgMyth__icon--myth { background: #fde8e6; color: #b42318; }
.pgMyth__icon--fact { background: #e3ebfb; color: var(--hp-navy); }
.pgMyth__tag { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: var(--hp-muted); }
.pgMyth__myth { font-size: clamp(19px, 1.8vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.pgMyth__fact { font-size: 15px; line-height: 1.65; color: var(--hp-muted); }

/* ---------- Collections ---------- */
.pgGroup + .pgGroup { margin-top: 64px; }
.pgGroup__head { position: relative; margin-bottom: 28px; text-align: center; }
.pgGroup__head::before { content: ''; position: absolute; left: 0; right: 0; top: 24px; height: 1px; background: var(--hp-line); }
.pgGroup__label, .pgGroup__title { position: relative; display: table; margin: 0 auto; padding: 0 16px; background: var(--hp-soft); }
.pgGroup__label { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--hp-muted); }
.pgGroup__title { font-size: 22px; font-weight: 800; letter-spacing: -.02em; line-height: 1.3; }
.pgGroup__title em { line-height: inherit !important; }
.pgGroup__lead { max-width: 640px; margin: 10px auto 0; font-size: 14px; line-height: 1.6; color: var(--hp-muted); }
.pgGroup__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.pgProduct {
  display: flex; flex-direction: column; flex: 0 1 calc(33.333% - 11px); min-height: 420px; padding: 24px;
  background: #fff; border: 1px solid var(--hp-line); border-radius: 16px;
}
.pgProduct.is-flagship { background: #eef3fd; border-color: var(--hp-ink); }
.pgProduct__top { display: flex; align-items: center; justify-content: space-between; min-height: 26px; }
.pgProduct__num { font-size: 11px; color: var(--hp-muted); }
.pgProduct__badge { padding: 4px 10px; border-radius: 999px; background: var(--hp-accent); font-size: 11px; font-weight: 700; }
.pgProduct__name { margin: 10px 0 12px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.pgProduct__hint { font-size: 14px; line-height: 1.6; color: var(--hp-muted); }
.pgProduct__img { display: grid; place-items: center; height: 220px; margin: auto 0 16px; padding: 16px; border-radius: 12px; background: rgba(242,245,251,.7); }
.pgProduct__img img { max-height: 188px; }
.pgProduct__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 14px; font-weight: 700; }

/* ---------- Contact ---------- */
.pgContact { padding-bottom: 96px; }
.pgContact__art { width: 96px; margin: 0 auto 16px; }
.pgContact__cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 40px; }
.pgContact__card {
  display: flex; align-items: flex-start; gap: 16px; min-width: 300px; padding: 22px 24px; text-align: left;
  background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; transition: border-color .15s, transform .15s;
}
.pgContact__card:hover { border-color: var(--hp-navy); transform: translateY(-2px); }
.pgContact__icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--hp-navy); color: var(--hp-accent); }
.pgContact__eyebrow { display: block; font-size: 11px; color: var(--hp-muted); }
.pgContact__value { display: block; margin: 2px 0; font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.pgContact__hint { display: block; font-size: 13px; color: var(--hp-muted); }
.pgContact__form { max-width: 640px; margin: 24px auto 0; text-align: left; }
.pgContact__consumer { max-width: 560px; margin: 28px auto 0; font-size: 14px; line-height: 1.6; color: var(--hp-muted); }
.pgContact__consumer a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 600; color: var(--hp-navy); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Calibrated Feel: definition, journey, showroom note ---------- */
.pgNote { max-width: 860px; margin: 0 auto 32px; padding: 28px 32px; background: var(--hp-soft); border-left: 3px solid var(--hp-ink); border-radius: 16px; }
.pgNote p:not(.pgEyebrow) { font-size: 15px; line-height: 1.7; color: var(--hp-muted); }
.pgNote .pgEyebrow + p { margin-top: 10px; }
.pgJourney__label { margin: 40px 0 16px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--hp-muted); }
.pgJourney { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 960px; margin: 0 auto 40px; }
.pgJourney__step { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #fff; border: 1px solid var(--hp-line); border-radius: 16px; }
.pgJourney__step strong { font-size: 17px; }
.pgJourney__step > span:last-child { font-size: 14px; line-height: 1.6; color: var(--hp-muted); }
.pgJourney__step.is-set { background: var(--hp-navy); border-color: var(--hp-navy); color: #fff; }
.pgJourney__step.is-set > span { color: rgba(255,255,255,.75); }

/* ---------- About: endorsements ---------- */
.pgEndorsements { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 1100px; margin: 0 auto; }
.pgEndorse {
  display: grid; grid-template-columns: 120px 1fr; gap: 24px; align-items: center; padding: 24px;
  background: linear-gradient(135deg, #f1f5fd, #fff); border: 1px solid var(--hp-line); border-radius: 20px;
}
.pgEndorse__logo { display: grid; place-items: center; width: 120px; height: 120px; padding: 10px; background: #fff; border: 1px solid var(--hp-line); border-radius: 14px; }
.pgEndorse__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.pgEndorse__slot { width: 100%; }
.pgEndorse__slot.is-empty { padding: 6px; border-width: 1.5px; }
.pgEndorse__slot .imgSpec__brief, .pgEndorse__slot .imgSpec__meta, .pgEndorse__slot .imgSpec__file { display: none; }
.pgEndorse__slot .imgSpec__label { font-size: 9px; }
.pgEndorse__badge { display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--hp-navy); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: #fff; }
.pgEndorse__title { margin: 10px 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.pgEndorse p { font-size: 14px; line-height: 1.6; color: var(--hp-muted); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .pgTabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .pgHero__grid, .pgSlider, .pgExplorer, .pgFaqTop, .pgEndorsements { grid-template-columns: 1fr; }
  .pgCards--three, .pgJourney { grid-template-columns: 1fr; }
  .pgFaqTop__photo { position: static; width: 100%; max-width: 420px; margin: 0 auto; }
  .pgProduct { flex-basis: calc(50% - 8px); }
}
@media (max-width: 640px) {
  .hpWrap { padding: 0 16px; }
  .pgSection { padding: 64px 0; }
  .pgSection--tight { padding: 24px 0 64px; }
  .pgHero { padding: calc(var(--hp-nav) + 32px) 0 48px; }
  .pgHead { margin-bottom: 36px; }
  .pgCards--two, .pgMyths, .pgFaqGroup__grid, .pgSys__cols { grid-template-columns: 1fr; }
  .pgCards--two > :last-child:nth-child(odd), .pgMyths > :last-child:nth-child(odd) { width: 100%; }
  .pgCard, .pgMyth, .pgSys, .pgContinuum { padding: 24px; }
  .pgTabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgProduct { flex-basis: 100%; min-height: 0; }
  .pgFaq summary { padding: 18px 20px; font-size: 15px; }
  .pgFaq__a { margin: 0 20px; font-size: 14px; }
  .pgTopHead__row { flex-direction: column-reverse; gap: 8px; }
  .pgContactBox { flex-direction: column; align-items: flex-start; padding: 24px; }
  .pgEndorse { grid-template-columns: 88px 1fr; gap: 16px; padding: 18px; }
  .pgEndorse__logo { width: 88px; height: 88px; }
  .pgContact__card { width: 100%; min-width: 0; }
  .pgCta { padding: 72px 0; }
  .pgCta__art { width: 72px; margin-top: -108px; }
}