/* Homepage storytelling pass. Product screens and module detail pages keep their own layout. */
.home-page { --ink: #20292e; --muted: #596872; --line: #dee4e7; }
.home-page .wrap { max-width: 1376px; padding-inline: 48px; }
.home-page h2 { font-size: clamp(32px, 3.4vw, 48px); line-height: 1.2; letter-spacing: -.045em; font-weight: 600; }
.home-page .section { padding-block: 96px; }
.home-page .section-heading { gap: 48px; margin-bottom: 48px; }
.home-page .section-heading > p { font-size: 15px; line-height: 1.85; color: var(--muted); max-width: 360px; }
.home-page .eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .08em; color: #586870; }
.home-page .button { font-size: 14px; min-height: 48px; border-radius: 5px; }
.home-page .text-link { font-size: 14px; }
.home-page .hero { padding: 64px 0 0; text-align: left; background: #f7f9fa; overflow: hidden; }
.home-page .hero-copy { text-align: left; display: grid; grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr); align-items: end; gap: 64px; margin: 0 auto 40px; }
.home-page .hero-category { justify-content: flex-start; margin: 0 0 24px; font-size: 11px; }
.home-page .hero-category > span { width: 6px; height: 6px; background: #285ad6; }
.home-page .hero h1 { font-size: clamp(44px, 4.3vw, 64px); font-weight: 600; letter-spacing: -.055em; line-height: 1.15; max-width: none; margin: 0; text-wrap: initial; animation: none; }
.home-page .hero h1 em { color: #53636d; font-style: normal; font-weight: 450; }
.home-page .hero-intro { padding-bottom: 4px; }
.home-page .hero-lead { font-size: 16px; line-height: 1.8; font-weight: 450; color: #53636d; margin: 0; max-width: 380px; animation: none; }
.home-page .hero-copy .actions { justify-content: start; align-items: start; flex-direction: column; margin-top: 24px; gap: 16px; animation: none; }
.home-page .hero-copy .button.primary { min-height: 48px; font-size: 14px; padding-inline: 24px; }
.home-page .hero-product { width: 100%; max-width: 1376px; position: relative; margin: 0 auto; padding-inline: 48px; animation: none; }
.home-page .product-caption { background: #fff; border: 1px solid #d6dfe5; border-bottom: 0; border-radius: 8px 8px 0 0; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 12px; color: #364750; }
.product-caption > span:first-child { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.product-caption svg { width: 17px; height: 17px; color: #526d86; }
.product-caption > span:last-child { font-size: 11px; color: #647681; }
.caption-divider { color: #b9c4cb; font-weight: 400; }
.home-page .product-open { display: block; width: 100%; padding: 0; background: #fff; border: 1px solid #d6dfe5; border-radius: 0 0 6px 6px; box-shadow: 0 16px 40px #25384908; transform: none; overflow: hidden; position: relative; }
.home-page .product-open:hover { transform: none; box-shadow: 0 16px 40px #25384908; }
.home-page .product-open img { display: block; width: 100%; border-radius: 0; max-height: 520px; object-fit: cover; object-position: top; }
.home-page .product-zoom { display: flex; gap: 8px; align-items: center; width: auto; height: auto; padding: 10px 14px; bottom: 16px; right: 16px; border-radius: 4px; border: 1px solid #d6dfe5; background: #fff; color: #365267; font-size: 11px; box-shadow: none; }
.home-page .product-zoom svg { width: 15px; height: 15px; }
.home-page .hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; color: #5a6c76; font-size: 12px; }
.hero-bottom p { margin: 0; }
.hero-bottom p span { padding-inline: 12px; color: #a9b6c0; }
.hero-bottom a { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.hero-bottom svg { width: 14px; height: 14px; }
.product-story { background: #fff; border-bottom: 1px solid var(--line); scroll-margin-top: 96px; }
.story-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.65fr); gap: 56px; align-items: center; }
.story-controls { display: flex; flex-direction: column; }
.story-controls button { display: flex; gap: 20px; align-items: start; padding: 28px 8px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: transparent; color: #6c7b83; text-align: left; font: inherit; cursor: pointer; transition: color 180ms, border-color 180ms; }
.story-controls button:last-child { border-bottom: 1px solid var(--line); }
.story-number { font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 5px; }
.story-controls strong { display: block; font-size: 20px; line-height: 1.4; font-weight: 550; margin-bottom: 12px; letter-spacing: -.025em; }
.story-controls button > span:nth-child(2) > span { display: block; font-size: 13px; line-height: 1.85; }
.story-controls svg { width: 18px; height: 18px; flex: none; margin-left: auto; margin-top: 4px; opacity: 0; transition: opacity 180ms, transform 180ms; transform: translate(-3px, 3px); }
.story-controls button[aria-selected=true] { color: #283e4e; border-top-color: #285ad6; }
.story-controls button[aria-selected=true] .story-number { color: #285ad6; }
.story-controls button[aria-selected=true] svg { opacity: 1; transform: none; color: #285ad6; }
.story-controls button:hover { color: #283e4e; }
.home-page :is(a, button, [tabindex]):focus-visible { outline: 2px solid #285ad6; outline-offset: 5px; }
.story-panel { border: 1px solid #d6dfe5; border-radius: 6px; overflow: hidden; background: #f5f7fa; }
.story-panel-heading { display: flex; justify-content: space-between; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #d6dfe5; background: #fff; font-size: 12px; font-weight: 600; }
.story-panel-heading span:last-child { font-size: 11px; color: #667781; font-weight: 400; }
.story-viewport { overflow: hidden; aspect-ratio: 1.65; position: relative; }
.story-canvas { position: relative; width: 100%; transform: scale(1.5); transform-origin: 98% 17%; transition: transform 650ms cubic-bezier(.22,.65,.3,1), transform-origin 650ms cubic-bezier(.22,.65,.3,1); }
.story-canvas img { display: block; width: 100%; height: auto; }
.story-spot { position: absolute; left: 83.8%; top: 15.4%; width: 14.6%; height: 3.8%; border: 2px solid #285ad6; border-radius: 4px; box-shadow: 0 0 0 3px #285ad614; transition: left 650ms cubic-bezier(.22,.65,.3,1), top 650ms cubic-bezier(.22,.65,.3,1), width 650ms cubic-bezier(.22,.65,.3,1), height 650ms cubic-bezier(.22,.65,.3,1); }
.story-panel[data-step="1"] .story-canvas { transform: scale(1.6); transform-origin: 76% 36%; }
.story-panel[data-step="1"] .story-spot { left: 66%; top: 31.0%; width: 16%; height: 7%; }
.story-panel[data-step="2"] .story-canvas { transform: scale(1.65); transform-origin: 99% 36%; }
.story-panel[data-step="2"] .story-spot { left: 90%; top: 31.0%; width: 8.5%; height: 7%; }
.story-detail { display: flex; align-items: start; gap: 24px; background: #fff; padding: 20px 24px; border-top: 1px solid #d6dfe5; min-height: 84px; }
.story-detail-number { font-size: 11px; color: #47668f; white-space: nowrap; padding-top: 3px; font-variant-numeric: tabular-nums; }
.story-detail p { font-size: 13px; line-height: 1.75; margin: 0; color: #516570; }
.story-footnote { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; margin-top: 32px; }
.story-footnote p { font-size: 12px; color: #63747e; line-height: 1.8; margin: 0; }
.home-page .trust-band { background: #f7f9fa !important; }
.home-page .trust-layout { gap: 96px; }
.home-page .trust-year { font-size: 80px; color: #53636d; }
.home-page .trust-history h3 { font-size: 18px; }
.home-page .trust-history p { font-size: 14px; }
.home-page .trust-register h3 { font-size: 17px; }
.home-page .trust-register article { padding-block: 20px; }
.home-page .trust-details { font-size: 13px; line-height: 1.8; }
.home-page .module-overview { padding-top: 96px !important; }
.home-page .module-grid { border-left: 0; }
.home-page .module-card { padding: 32px 24px; border-right: 0; transition: background 180ms; }
.home-page .module-card-top { margin-bottom: 24px; }
.home-page .module-card-top > svg { width: 24px; height: 24px; }
.home-page .module-card h3 { font-size: 22px; }
.home-page .module-card > p { font-size: 14px; margin-bottom: 24px; }
.home-page .module-card-bottom > span { font-size: 12px; }
.home-page .module-card:nth-child(3n+2) { border-inline: 1px solid var(--line); }
.home-page .connected-layout { gap: 96px; padding-block: 64px; }
.home-page .connected-layout > div > p:not(.eyebrow) { font-size: 16px; max-width: 520px; }
.home-page .extras-band .section { padding-block: 64px; }
.home-page .extras-band h2 { font-size: 32px; }
.home-page .extras-band .section-heading { margin-bottom: 32px; }
.home-page .process-band .section { grid-template-columns: 1fr; }
.home-page .process-band h2 { font-size: 40px; margin-bottom: 40px; }
.home-page .steps { gap: 48px; }
.home-page .steps p { font-size: 14px; }
.home-page .offers .offer { padding: 28px; }
.home-page .offer .limit { font-size: 13px; }
@media (max-width: 1100px) {
  .home-page .wrap { padding-inline: 32px; }
  .home-page .hero-copy { gap: 32px; grid-template-columns: 1.7fr 1fr; }
  .home-page .hero h1 { font-size: 46px; }
  .story-layout { gap: 32px; }
  .story-controls strong { font-size: 18px; }
  .story-controls button { gap: 16px; padding-block: 24px; }
}
@media (max-width: 780px) {
  .home-page .wrap { padding-inline: 24px; }
  .home-page .section { padding-block: 64px; }
  .home-page .hero { padding-top: 40px; }
  .home-page .hero-copy { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .home-page .hero-category { margin-bottom: 20px; font-size: 10px; }
  .home-page .hero h1 { font-size: clamp(32px, 5.3vw, 46px); }
  .home-page .hero-lead { font-size: 15px; max-width: 520px; }
  .home-page .hero-copy .actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
  .home-page .hero-product { padding-inline: 24px; }
  .home-page .product-open img { max-height: none; object-fit: contain; }
  .home-page .product-caption { padding: 14px 16px; font-size: 11px; }
  .product-caption > span:first-child { gap: 8px; }
  .product-caption > span:last-child { font-size: 10px; }
  .home-page .hero-bottom { padding: 20px 0; font-size: 11px; flex-wrap: wrap; gap: 12px; }
  .hero-bottom p span { padding-inline: 6px; }
  .home-page .section-heading { margin-bottom: 32px; }
  .home-page .section-heading > p { max-width: 540px; font-size: 14px; }
  .story-layout { grid-template-columns: 1fr; gap: 24px; }
  .story-controls { flex-direction: row; gap: 12px; }
  .story-controls button { width: 33.333%; flex-direction: column; padding: 16px 0; gap: 8px; border-bottom: 0 !important; }
  .story-controls strong { font-size: 16px; margin: 0; line-height: 1.6; }
  .story-controls button > span:nth-child(2) > span, .story-controls svg { display: none; }
  .story-number { padding: 0; }
  .story-footnote { align-items: start; flex-direction: column; gap: 16px; margin-top: 24px; }
  .home-page .trust-layout { gap: 32px; }
  .home-page .module-overview { padding-top: 64px !important; }
  .home-page .module-card:nth-child(3n+2) { border-inline: 0; }
  .home-page .module-card:nth-child(odd) { border-right: 1px solid var(--line); }
  .home-page .module-card { padding: 24px 20px; }
  .home-page .module-card h3 { font-size: 20px; }
  .home-page .connected-layout { gap: 24px; padding-block: 48px; }
  .home-page .connected-layout > div > p:not(.eyebrow) { font-size: 14px; }
  .home-page .process-band h2 { font-size: 32px; }
  .home-page .steps { gap: 32px; }
}
@media (max-width: 480px) {
  .home-page .hero h1 { font-size: 30px; letter-spacing: -.045em; line-height: 1.22; }
  .home-page .hero-copy .actions { flex-direction: column; align-items: start; gap: 16px; }
  .home-page .hero-copy .text-link { font-size: 13px; }
  .product-caption > span:last-child { display: none; }
  .home-page .product-zoom { padding: 8px; bottom: 10px; right: 10px; }
  .product-zoom > span { display: none; }
  .home-page .hero-bottom { padding-block: 16px; }
  .home-page .hero-bottom a { display: none; }
  .story-controls strong { font-size: 14px; }
  .story-viewport { aspect-ratio: 1.3; }
  .story-canvas { transform: scale(3.2); transform-origin: 98% 17%; }
  .story-panel[data-step="1"] .story-canvas { transform: scale(3.2); transform-origin: 76% 36%; }
  .story-panel[data-step="2"] .story-canvas { transform: scale(3.2); transform-origin: 99% 36%; }
  .story-spot { border-width: 1px; box-shadow: 0 0 0 1px #285ad614; }
  .story-panel-heading { padding: 16px; }
  .story-detail { padding: 16px; gap: 16px; min-height: 108px; }
  .story-detail p { font-size: 12px; }
  .home-page .module-card:nth-child(odd) { border-right: 0; }
  .home-page .module-card { padding: 24px 0; }
  .home-page .module-card-top { margin-bottom: 16px; }
  .home-page .module-card > p { max-width: none; margin-bottom: 20px; }
  .home-page .extras-band h2 { font-size: 28px; }
}
@media (max-width: 350px) {
  .home-page .wrap { padding-inline: 20px; }
  .home-page .hero-product { padding-inline: 20px; }
  .home-page .hero h1 { font-size: 26px; }
  .home-page .hero-lead { font-size: 14px; }
  .story-controls strong { font-size: 12px; }
  .story-panel-heading { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-canvas, .story-spot, .story-controls button, .story-controls svg { transition: none; }
}

/* Without JavaScript, keep all walkthrough explanations available as static content. */
.story-layout:not(.is-interactive) .story-controls button { cursor: default; }
@media (max-width: 780px) {
  .story-layout:not(.is-interactive) .story-controls { flex-direction: column; }
  .story-layout:not(.is-interactive) .story-controls button { width: 100%; }
  .story-layout:not(.is-interactive) .story-controls button > span:nth-child(2) > span { display: block; }
}
.home-page .intro .mark { animation: none; }

/* The enlarged viewer preserves native image pixels instead of shrinking to a phone. */
.home-page #product-dialog { width: calc(100% - 24px); max-width: 1464px; max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; }
.home-page #product-dialog[open] { display: flex; flex-direction: column; }
.home-page .product-heading { padding: 16px; margin: 0; flex: none; }
.home-page .product-heading .icon-button { width: 44px; height: 44px; }
.product-viewer-tools { display: flex; gap: 8px; padding: 0 16px; flex: none; }
.product-viewer-tools button { min-height: 44px; padding: 8px 16px; background: #fff; border: 1px solid #d6dfe5; border-radius: 4px; color: #516570; font: inherit; font-size: 13px; cursor: pointer; }
.product-viewer-tools button[aria-pressed=true] { color: #285ad6; border-color: #285ad6; background: #f4f7fe; }
#product-viewer-hint { font-size: 12px; line-height: 1.6; color: #596872; margin: 12px 16px 16px; flex: none; }
#product-viewport { overflow: auto; height: min(72dvh,720px); min-height: 0; border-top: 1px solid #d6dfe5; background: #f5f7fa; touch-action: pan-x pan-y; overscroll-behavior: contain; scroll-behavior: auto; }
#product-viewport img { display: block; width: 1440px; max-width: none; height: 900px; max-height: none; object-fit: contain; user-select: none; }
#product-viewport[data-fit=true] img { width: 100%; height: auto; }
.home-page #product-viewport:focus-visible { outline-offset: -3px; }