/* HomeView-inspired composition. TinyBook's display headings retain their tokens. */
.feature-overview { background:#f5f5f7; }
.feature-overview > .content-wide { max-width:none; padding-inline:0; }
.feature-overview .feature-overview-heading { width:var(--content-max); max-width:100%; margin-inline:auto; padding-inline:var(--page-gutter); text-align:left; }
.feature-overview .feature-grid {
  display:flex; align-items:stretch; gap:var(--highlight-gap);
  margin:0; padding:0 var(--highlight-gutter); overflow-x:auto; overflow-y:hidden;
  scroll-padding-inline:var(--highlight-gutter); scroll-snap-type:x mandatory;
  touch-action:pan-x pan-y pinch-zoom; overscroll-behavior-x:contain;
}
.feature-overview .feature-grid.is-dragging { scroll-snap-type:none; }
.feature-overview .feature-card {
  display:flex; flex-direction:column; align-items:center; flex:none;
  width:min(var(--highlight-width),calc(100vw - 2 * var(--highlight-gutter)));
  min-height:var(--highlight-height); padding:var(--highlight-copy-block) var(--highlight-copy-inline) 24px;
  border:0; border-radius:var(--highlight-radius); background:#fff;
  scroll-snap-align:start; scroll-snap-stop:always; text-align:center;
}
.feature-overview .feature-card-copy { flex:none; align-items:center; width:100%; }
.feature-overview .feature-card h3 { max-width:none; margin:0; font-size:var(--highlight-title-size); line-height:1.15; letter-spacing:-.025em; text-wrap:balance; }
.feature-overview .feature-card p { max-width:38ch; margin:12px 0 0; font-size:var(--highlight-body-size); line-height:1.45; color:var(--secondary); text-wrap:pretty; }
.feature-overview .feature-card .feature-visual { flex:1; display:flex; align-items:center; justify-content:center; width:100%; min-height:220px; height:auto; margin:20px 0 0; }
.feature-overview .feature-card .feature-visual img { display:block; width:100%; max-width:900px; height:350px; object-fit:contain; mix-blend-mode:multiply; transform:none; }
.feature-overview #feature-trackpad { background:#eaf2fb; }
.feature-overview #feature-lid { background:#fbf8f2; }
.feature-overview .highlight-controls { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; margin:28px var(--page-gutter) 0; }
.feature-overview .highlight-controls[hidden],.highlight-dot[hidden] { display:none; }
.highlight-progress { display:flex; align-items:center; padding:0 8px; border-radius:999px; background:#e8e8ed; }
.highlight-dot { display:grid; place-items:center; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
.highlight-dot span { width:7px; height:7px; border-radius:99px; background:#86868b; transition:width .24s ease,background .24s ease; }
.highlight-dot[aria-pressed=true] span { width:28px; background:var(--ink); }
.highlight-dot:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.control-story { margin-top:32px; min-width:0; }
.control-story-tabs { margin-inline:0; }
.control-story-panel { margin-top:24px; }
.control-story-panel[hidden] { display:none; }
.control-story-panel h3 { margin:0; font:600 21px/1.25 var(--font); letter-spacing:-.025em; text-wrap:balance; }
.control-story-panel p { margin:10px 0 0; font:400 16px/1.45 var(--font); color:var(--secondary); }
.control-story-panel .text-link { margin-top:8px; }
.interactive-product[data-control-focus=trackpad] #trackpad,
.interactive-product[data-control-focus=keys] #keyboard,
.interactive-product[data-control-focus=zoom] .demo-upper { outline:2px solid #0071e330; outline-offset:3px; }
.image-story.has-photo-parallax[data-story-zoom] :is(.palm-art,.lookalike-art) img { transform:scale(var(--story-image-scale,1)); will-change:transform; }
.image-story[data-story-zoom=palm] .palm-art img { transform-origin:var(--story-zoom-origin-palm); }
.image-story[data-story-zoom=lid] .lookalike-art img { transform-origin:var(--story-zoom-origin-lid); }
@media(min-width:1051px) {
  .scenarios-section .heading-group { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:0 64px; max-width:none; }
  .scenarios-section .heading-group .eyebrow { grid-column:1 / -1; }
  .scenarios-section .heading-group .heading-description { margin:0 0 4px; }
  .personalisation-chapter .chapter-intro { text-align:left; }
  .personalisation-chapter .chapter-intro .heading-group { display:grid; grid-template-columns:1fr 1fr; align-items:end; gap:0 64px; max-width:none; }
  .personalisation-chapter .chapter-intro .eyebrow { grid-column:1 / -1; }
  .personalisation-chapter .chapter-intro .heading-description { max-width:440px; margin:0 0 4px; }
}
@media(hover:hover) and (pointer:fine) { .feature-overview .feature-grid { cursor:grab; } .feature-overview .feature-grid.is-dragging { cursor:grabbing; } }
@media(max-width:1050px) {
  .controls-story .experience-copy { width:100%; max-width:none; }
  .control-story { max-width:626px; margin-inline:auto; }
  .controls-story .controls-introduction { max-width:620px; }
  .control-story-panel { text-align:center; }
  .control-story-tabs { display:flex; margin-inline:auto; }
}
@media(max-width:650px) {
  .feature-overview .feature-card { min-height:var(--highlight-height); }
  .feature-overview .feature-card .feature-visual { min-height:180px; margin-top:12px; }
  .feature-overview .feature-card .feature-visual img { height:210px; }
  .feature-overview .highlight-controls { gap:12px; margin-top:20px; }
  .control-story-panel h3 { font-size:19px; }
}
@media(max-width:359px) {
  .feature-overview .highlight-controls { gap:8px; }
}
@media(prefers-reduced-motion:reduce) {
  .highlight-dot span { transition:none; }
  .image-story[data-story-zoom] :is(.palm-art,.lookalike-art) img { transform:none; will-change:auto; }
}
.no-js .highlight-controls,.no-js .control-story-tabs { display:none; }
@media print {
  .feature-overview .feature-grid { display:grid; grid-template-columns:1fr; overflow:visible; }
  .feature-overview .feature-card { width:100%; break-inside:avoid; }
  .feature-overview .highlight-controls,.control-story-tabs { display:none; }
  .control-story-panel[hidden] { display:block; }
  .image-story.has-photo-parallax[data-story-zoom] :is(.palm-art,.lookalike-art) img { transform:none; }
}