/* MOOI ATLAS — PHASE 2B PRODUCT EXPERIENCE */

.atlas-page { background: var(--bg-primary); }
.atlas-page main { overflow: clip; }
.atlas-page em { color: var(--accent-current); font-style: italic; }
.chapter-label {
  margin-bottom: 20px;
  color: var(--accent-current);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* HERO */
.atlas-hero {
  position: relative;
  min-height: calc(100svh - 90px);
  margin-top: -28px;
  padding: clamp(90px, 10vh, 130px) max(52px, calc((100vw - 1336px) / 2)) 72px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  align-items: center;
  isolation: isolate;
  background:
    radial-gradient(circle at 72% 42%, rgba(127,214,255,.13), transparent 26%),
    radial-gradient(circle at 50% 90%, rgba(87,194,255,.05), transparent 32%),
    var(--bg-primary);
}
.atlas-hero::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 24vh;
  background: linear-gradient(to bottom, transparent, var(--bg-secondary));
  pointer-events: none;
}
.atlas-hero-word {
  position: absolute;
  z-index: -2;
  left: 50%;
  top: 48%;
  color: transparent;
  font-family: 'Benzin', 'Inter', sans-serif;
  font-size: clamp(120px, 18vw, 310px);
  letter-spacing: -.055em;
  line-height: .8;
  -webkit-text-stroke: 1px rgba(244,244,242,.055);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}
.atlas-hero-copy {
  z-index: 2;
  grid-column: 1 / span 6;
  grid-row: 1;
  align-self: center;
  max-width: 650px;
}
.atlas-kicker {
  margin-bottom: 20px;
  color: var(--accent-current);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.atlas-hero h1 {
  max-width: 780px;
  font-family: 'Benzin', 'Inter', sans-serif;
  font-size: clamp(64px, 8vw, 132px);
  line-height: .9;
  letter-spacing: -.065em;
}
.atlas-hero-copy > p:last-child {
  max-width: 410px;
  margin-top: 30px;
  color: var(--text-soft);
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 300;
  line-height: 1.65;
}
.atlas-hero-visual {
  z-index: 1;
  grid-column: 5 / -1;
  grid-row: 1;
  align-self: stretch;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.atlas-hero-visual picture { display: contents; }
.atlas-hero-image {
  width: min(64vw, 840px);
  height: min(64vw, 840px);
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 54px 80px rgba(0,0,0,.55));
  transform: translate(10%, 2%);
}
.atlas-hero-meta {
  z-index: 2;
  grid-column: 1 / span 7;
  grid-row: 2;
  display: flex;
  gap: 32px;
  color: rgba(244,244,242,.62);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.atlas-hero-meta span { display: flex; align-items: center; gap: 10px; }
.atlas-hero-meta span::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-current); }
.atlas-scroll-cue {
  position: absolute;
  right: max(52px, calc((100vw - 1336px) / 2));
  bottom: 60px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--text-secondary);
  font-size: 9px;
  letter-spacing: .25em;
  text-decoration: none;
  text-transform: uppercase;
}
.atlas-scroll-cue i { width: 46px; height: 1px; background: currentColor; transition: width .25s ease; }
.atlas-scroll-cue:hover i { width: 68px; }

/* STATEMENT */
.atlas-statement {
  min-height: 78svh;
  padding: clamp(110px, 14vw, 190px) max(52px, calc((100vw - 1200px) / 2));
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--bg-secondary);
}
.atlas-statement h2 {
  max-width: 1100px;
  font-family: 'Benzin', 'Inter', sans-serif;
  font-size: clamp(52px, 8vw, 124px);
  line-height: .98;
  letter-spacing: -.055em;
}
.atlas-statement-copy {
  align-self: flex-end;
  width: min(440px, 100%);
  margin-top: 70px;
  padding-top: 22px;
  border-top: 1px solid color-mix(in srgb, var(--accent-current) 28%, transparent);
  color: var(--text-soft);
  font-size: var(--text-body-lg);
  font-weight: 400;
  line-height: var(--leading-body);
}

/* OVERVIEW */
.atlas-overview {
  min-height: 135svh;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  background: var(--bg-primary);
}
.overview-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(145deg, #11151B, var(--bg-primary) 68%);
}
.overview-stage::after {
  content: 'TWO FORMS';
  position: absolute;
  left: 8%;
  bottom: 7%;
  z-index: -1;
  color: rgba(244,244,242,.035);
  font-family: 'Benzin', 'Inter', sans-serif;
  font-size: clamp(64px, 9vw, 150px);
  letter-spacing: -.04em;
  white-space: nowrap;
}
.overview-orbit {
  position: absolute;
  left: 48%;
  top: 49%;
  width: min(54vw, 780px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--accent-current) 16%, transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 100px color-mix(in srgb, var(--accent-current) 7%, transparent) inset;
}
.overview-device {
  position: absolute;
  transform: translateY(var(--parallax-y, 0));
  transition: transform .12s linear;
}
.overview-device img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 32px 60px rgba(0,0,0,.6)); }
.overview-device--black { left: 18%; bottom: 7%; width: min(26vw, 360px); height: 72%; z-index: 2; }
.overview-device--white { right: 8%; top: 7%; width: min(23vw, 320px); height: 68%; z-index: 1; opacity: .9; }
.overview-caption {
  position: absolute;
  z-index: 3;
  color: rgba(244,244,242,.5);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
}
.overview-caption--one { left: 8%; top: 14%; }
.overview-caption--two { right: 7%; bottom: 14%; writing-mode: vertical-rl; }
.overview-copy {
  padding: 160px clamp(44px, 5vw, 96px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.overview-copy h2,
.specs-heading h2,
.display-copy h2,
.technologies-heading h2,
.flavors-heading h2,
.support-faq > h2,
.atlas-related > header h2,
.omny-related > header h2,
.sleek-related > header h2,
.compare-related > header h2 {
  font-family: var(--font-body);
  font-size: var(--text-heading-lg);
  font-weight: 550;
  line-height: var(--leading-heading);
  letter-spacing: -.035em;
}
.overview-notes { margin-top: 90px; display: grid; gap: 38px; }
.overview-notes article { display: grid; grid-template-columns: 34px 1fr; column-gap: 20px; padding-top: 20px; border-top: 1px solid var(--border-primary); }
.overview-notes article > span { grid-row: 1 / span 2; color: var(--accent-current); font-size: 10px; letter-spacing: .12em; }
.overview-notes h3 { font-size: 19px; font-weight: 550; }
.overview-notes p { max-width: 54ch; margin-top: 8px; color: var(--text-secondary); font-size: 15px; line-height: var(--leading-body); }

/* SPECS — VISUAL PAUSE */
.atlas-specs {
  padding: clamp(110px, 12vw, 180px) max(52px, calc((100vw - 1240px) / 2));
  color: var(--text-dark);
  background: var(--bg-light);
}
.atlas-specs .chapter-label { color: var(--accent-atlas-ink); }
.atlas-specs em { color: var(--accent-atlas-ink); }
.specs-heading { max-width: 840px; }
.key-facts {
  margin-top: 100px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid rgba(17,18,22,.22);
  border-bottom: 1px solid rgba(17,18,22,.22);
}
.key-fact { min-height: 220px; padding: 24px 18px 26px 0; display: flex; flex-direction: column; border-right: 1px solid rgba(17,18,22,.16); }
.key-fact:last-child { border-right: 0; padding-left: 18px; }
.key-fact-index { color: rgba(17,18,22,.46); font-size: 10px; letter-spacing: .14em; }
.key-fact strong { margin-top: auto; font-family: var(--font-body); font-size: clamp(24px, 2.2vw, 34px); font-weight: 600; line-height: 1.08; letter-spacing: -.035em; }
.key-fact > span:last-child { margin-top: 8px; color: rgba(17,18,22,.7); font-size: 12px; letter-spacing: .02em; }
.secondary-specs { margin-top: 48px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.secondary-spec { display: flex; flex-direction: column; gap: 10px; }
.secondary-spec span { color: rgba(17,18,22,.62); font-size: 11px; letter-spacing: .04em; }
.secondary-spec strong { font-size: 16px; font-weight: 550; }

/* DISPLAY */
.atlas-display {
  min-height: 105svh;
  padding: 0;
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  background: #080C12;
}
.display-copy { padding: 150px clamp(52px, 7vw, 120px); display: flex; flex-direction: column; justify-content: center; }
.display-intro { max-width: 54ch; margin-top: 34px; color: var(--text-secondary); font-size: 16px; line-height: var(--leading-body); }
.display-indicators { margin-top: 70px; list-style: none; }
.display-indicators li { min-height: 72px; display: grid; grid-template-columns: 52px 1fr; align-items: center; border-top: 1px solid color-mix(in srgb, var(--accent-current) 24%, transparent); }
.display-indicators li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--accent-current) 24%, transparent); }
.display-indicators span { color: var(--accent-current); font-size: 10px; }
.display-indicators strong { font-size: 18px; font-weight: 400; }
.display-visual { position: relative; min-height: 760px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 58% 45%, rgba(87,194,255,.20), transparent 36%); }
.display-light { position: absolute; top: 8%; bottom: 8%; left: 55%; z-index: -1; width: 1px; background: linear-gradient(transparent, rgba(127,214,255,.6), transparent); box-shadow: 0 0 80px 20px rgba(87,194,255,.12); }
.display-visual picture { position: absolute; width: min(39vw, 570px); height: 112%; right: -2%; bottom: -18%; transform: translateY(var(--parallax-y, 0)); }
.display-visual img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(-30px 40px 60px rgba(0,0,0,.7)); }
.display-real-label { position: absolute; left: 44px; bottom: 38px; color: rgba(244,244,242,.45); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; }

/* TECHNOLOGIES */
.atlas-technologies { padding: clamp(105px, 11vw, 155px) max(52px, calc((100vw - 1240px) / 2)); background: var(--bg-secondary); }
.technologies-heading { max-width: 900px; }
.technology-story { margin-top: 76px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
.technology-block { position: relative; min-height: 260px; padding: 36px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border-top: 1px solid var(--border-primary); background: rgba(255,255,255,.018); }
.technology-block--screen { grid-column: span 7; min-height: 470px; background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent-current) 14%, transparent), transparent 38%), #11151B; }
.technology-block--screen::after { position: absolute; right: -3%; bottom: -4%; color: transparent; font-family: 'Benzin', sans-serif; font-size: clamp(70px, 10vw, 140px); -webkit-text-stroke: 1px color-mix(in srgb, var(--accent-current) 14%, transparent); }
.atlas-page .technology-block--screen::after { content: 'SCREEN'; }
.technology-block--boost { grid-column: span 5; min-height: 470px; color: var(--text-primary); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-current) 7%, transparent), transparent 54%), var(--bg-elevated); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent-current) 34%, transparent); }
.technology-block--secondary { grid-column: span 4; }
.technology-number { color: var(--text-secondary); font-size: 10px; letter-spacing: .16em; }
.technology-block--boost .technology-number { color: var(--accent-current); }
.technology-block h3 { position: relative; z-index: 1; font-family: var(--font-body); font-size: var(--text-heading-md); font-weight: 600; line-height: var(--leading-heading); letter-spacing: -.03em; }
.technology-block--screen h3,
.technology-block--boost h3 { font-size: var(--text-heading-lg); }
.technology-block p { position: relative; z-index: 1; max-width: 58ch; margin-top: 18px; color: var(--text-secondary); font-size: 15px; line-height: var(--leading-body); }
.technology-block--boost p { color: var(--text-secondary); }

/* FLAVORS */
.atlas-flavors { padding: clamp(105px, 11vw, 155px) max(52px, calc((100vw - 1240px) / 2)); background: var(--bg-primary); }
.flavors-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.flavors-count { padding-bottom: 10px; color: var(--text-soft); font-family: var(--font-body); font-size: 16px; font-weight: 500; }
.flavor-filter-rail { margin: 64px 0 38px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.flavor-filter-rail::-webkit-scrollbar { display: none; }
.flavor-filter {
  min-height: 44px;
  padding: 0 22px;
  flex: 0 0 auto;
  border: 1px solid var(--border-primary);
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
}
.flavor-filter:hover { color: var(--text-primary); border-color: var(--border-strong); }
.flavor-filter.is-active { color: var(--text-dark); background: var(--accent-current); border-color: var(--accent-current); }
.flavor-editorial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.flavor-tile {
  position: relative;
  min-height: 210px;
  padding: 24px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border: 1px solid var(--border-primary);
  background: linear-gradient(145deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
}
.flavor-tile:nth-child(5n + 1) { grid-column: span 2; }
.flavor-tile-number { position: absolute; top: 20px; left: 22px; color: rgba(244,244,242,.42); font-size: 9px; letter-spacing: .12em; }
.flavor-orb { position: absolute; top: 50%; right: 8%; width: 128px; height: 128px; border-radius: 50%; background: linear-gradient(135deg, var(--flavor-a), var(--flavor-b)); box-shadow: 0 0 52px color-mix(in srgb, var(--flavor-a) 28%, transparent), inset 16px 14px 30px rgba(255,255,255,.18), inset -18px -18px 34px rgba(0,0,0,.35); transform: translateY(-50%); opacity: .8; }
.flavor-packshot { position: absolute; top: 50%; right: 6%; height: 75%; width: auto; max-width: 40%; object-fit: contain; transform: translateY(-50%); filter: drop-shadow(0 8px 24px rgba(0,0,0,.4)); transition: transform .35s var(--ease-out); }
.flavor-tile.has-packshot:hover .flavor-packshot { transform: translateY(-50%) scale(1.06); }
.flavor-tile > div { position: relative; z-index: 1; max-width: 65%; }
.flavor-category { color: var(--text-secondary); font-size: 11px; letter-spacing: .08em; }
.flavor-tile h3 { margin-top: 8px; font-size: clamp(17px, 1.4vw, 21px); font-weight: 500; line-height: 1.3; text-wrap: balance; }
.flavor-asset-note { max-width: 68ch; margin-top: 20px; color: rgba(244,244,242,.62); font-size: 13px; line-height: 1.6; }

/* EDITORIAL GALLERY */
.device-editorial { padding: clamp(80px, 8vw, 120px) max(52px, calc((100vw - 1240px) / 2)); background: var(--bg-primary); }
.editorial-heading { margin-bottom: 48px; }
.editorial-heading h2 { margin-top: 12px; font-size: clamp(28px, 3.2vw, 44px); font-weight: 500; }
.editorial-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.editorial-item { margin: 0; overflow: hidden; border-radius: 16px; }
.editorial-item--wide { grid-column: span 2; }
.editorial-item img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 560px; }
.editorial-item--wide img { max-height: 480px; }

/* SUPPORT + AUTHENTICITY */
.atlas-support { padding: clamp(100px, 10vw, 145px) max(52px, calc((100vw - 1240px) / 2)); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: clamp(60px, 8vw, 120px); background: var(--bg-secondary); }
.support-faq > h2 { margin-bottom: 62px; }
.faq-list { border-top: 1px solid var(--border-primary); }
.faq-item { border-bottom: 1px solid var(--border-primary); }
.faq-item h3 { margin: 0; }
.faq-question { width: 100%; min-height: 72px; padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; border: 0; background: transparent; color: var(--text-primary); font: inherit; font-size: 17px; text-align: left; cursor: pointer; }
.faq-question:hover { color: var(--accent-current); }
.faq-icon { position: relative; width: 24px; height: 24px; flex: 0 0 auto; }
.faq-icon::before,
.faq-icon::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s ease; }
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-question[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq-answer { display: grid; grid-template-rows: 0fr; color: var(--text-secondary); transition: grid-template-rows .32s var(--ease-out); }
.faq-answer > div { overflow: hidden; }
.faq-answer p { max-width: 65ch; padding: 0 46px 0 0; font-size: 16px; line-height: var(--leading-body); }
.faq-item.is-open .faq-answer { grid-template-rows: 1fr; }
.faq-item.is-open .faq-answer p { padding-bottom: 26px; }
.authenticity-panel { align-self: start; position: sticky; top: 110px; padding: clamp(34px, 4vw, 54px); border: 1px solid color-mix(in srgb, var(--accent-current) 28%, transparent); background: linear-gradient(145deg, color-mix(in srgb, var(--accent-current) 8%, transparent), rgba(255,255,255,.018)); }
.auth-status { display: inline-flex; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--accent-current) 34%, transparent); border-radius: 999px; color: var(--accent-current); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.authenticity-panel h2 { margin-top: 42px; font-family: var(--font-body); font-size: var(--text-heading-md); font-weight: 600; line-height: var(--leading-heading); letter-spacing: -.035em; }
.authenticity-panel p { margin-top: 24px; color: var(--text-secondary); font-size: 15px; line-height: var(--leading-body); }
.auth-preview { margin-top: 38px; min-height: 54px; padding-left: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--border-primary); color: rgba(244,244,242,.62); font-size: 12px; }
.auth-preview button { align-self: stretch; min-width: 92px; border: 0; background: rgba(255,255,255,.07); color: rgba(244,244,242,.42); font: inherit; font-size: 9px; letter-spacing: .15em; text-transform: uppercase; }
.authenticity-panel > a { margin-top: 28px; display: inline-flex; gap: 9px; color: var(--text-primary); font-size: 12px; letter-spacing: .08em; text-decoration: none; }

/* RELATED */
.atlas-related { padding: clamp(105px, 11vw, 155px) max(52px, calc((100vw - 1240px) / 2)); background: var(--bg-primary); }
.atlas-related > header { max-width: 820px; }
.related-devices { margin-top: 90px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.related-device { position: relative; min-height: 560px; padding: 42px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-primary); background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--device-accent) 12%, transparent), transparent 34%), var(--bg-secondary); }
.related-device-visual { height: 300px; display: grid; place-items: center; }
.related-device-visual picture { display: contents; }
.related-device-image { width: min(76%, 380px); height: auto; max-height: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 26px 42px rgba(0,0,0,.55)); }
.related-device-copy { margin-top: auto; }
.related-device-copy > span { color: var(--device-accent); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; }
.related-device-copy h3 { margin-top: 10px; font-family: var(--font-body); font-size: var(--text-heading-md); font-weight: 600; letter-spacing: -.035em; }
.related-device-copy p { max-width: 54ch; margin-top: 12px; color: var(--text-secondary); font-size: 15px; line-height: var(--leading-body); }
.related-device-copy a { min-height: 44px; margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; color: var(--text-primary); font-size: 11px; letter-spacing: .12em; text-decoration: none; text-transform: uppercase; }
.data-error { margin: 30px auto; padding: 20px; max-width: 720px; color: #ffb4ab; text-align: center; }

/* TABLET */
@media (max-width: 1100px) {
  .atlas-hero { padding-inline: 34px; }
  .atlas-hero-copy { grid-column: 1 / span 7; }
  .atlas-hero-visual { grid-column: 5 / -1; }
  .atlas-hero-image { width: min(72vw, 760px); height: min(72vw, 760px); }
  .atlas-overview { grid-template-columns: 1.05fr .95fr; }
  .overview-device--black { left: 12%; width: 31vw; }
  .overview-device--white { right: 2%; width: 28vw; }
  .overview-copy { padding-inline: 42px; }
  .key-facts { grid-template-columns: repeat(3, 1fr); }
  .key-fact { border-bottom: 1px solid rgba(17,18,22,.16); }
  .technology-block--screen,
  .technology-block--boost { grid-column: span 6; }
  .atlas-support { grid-template-columns: 1fr 380px; gap: 56px; }
}

@media (max-width: 860px) {
  .atlas-hero { min-height: 820px; margin-top: 0; padding: 110px 24px 54px; grid-template-rows: auto 1fr auto; }
  .atlas-hero-copy { grid-column: 1 / -1; grid-row: 1; align-self: start; text-align: center; }
  .atlas-hero h1 { font-size: clamp(50px, 13vw, 92px); }
  .atlas-hero-copy > p:last-child { margin-inline: auto; margin-top: 18px; font-size: 15px; }
  .atlas-hero-visual { grid-column: 1 / -1; grid-row: 2; }
  .atlas-hero-image { width: min(92vw, 650px); height: min(92vw, 650px); transform: none; }
  .atlas-hero-meta { grid-column: 1 / -1; grid-row: 3; justify-content: center; flex-wrap: wrap; gap: 12px 22px; }
  .atlas-scroll-cue { display: none; }
  .atlas-statement { min-height: 72svh; padding: 120px 28px; }
  .atlas-statement h2 { font-size: clamp(46px, 11vw, 78px); }
  .atlas-overview { min-height: auto; display: block; }
  .overview-stage { position: relative; height: 760px; }
  .overview-device--black { left: 16%; width: min(38vw, 300px); }
  .overview-device--white { right: 9%; width: min(35vw, 270px); }
  .overview-copy { padding: 110px 28px; }
  .overview-notes { margin-top: 60px; }
  .atlas-specs,
  .atlas-technologies,
  .atlas-flavors,
  .atlas-support,
  .atlas-related { padding-inline: 28px; }
  .atlas-display { min-height: auto; grid-template-columns: 1fr; }
  .display-copy { padding: 110px 28px 64px; }
  .display-visual { min-height: 700px; }
  .display-visual picture { width: min(66vw, 510px); right: 8%; }
  .technology-block--screen,
  .technology-block--boost { grid-column: span 12; min-height: 390px; }
  .technology-block--secondary { grid-column: span 4; }
  .flavor-editorial-grid { grid-template-columns: 1fr 1fr; }
  .flavor-tile:nth-child(5n + 1) { grid-column: span 1; }
  .atlas-support { grid-template-columns: 1fr; }
  .authenticity-panel { position: static; }
  .related-device { min-height: 510px; padding: 32px; }
}

/* PHONE */
@media (max-width: 600px) {
  .breadcrumbs { font-size: 10px; }
  .atlas-hero { min-height: calc(100svh - 70px); padding: 86px 20px 42px; }
  .atlas-hero-word { top: 49%; font-size: 30vw; }
  .atlas-kicker { margin-bottom: 12px; }
  .atlas-hero h1 { font-size: clamp(43px, 13vw, 62px); }
  .atlas-hero-copy > p:last-child { max-width: 330px; font-size: 14px; }
  .atlas-hero-image { width: 108vw; height: 108vw; margin-left: -4vw; }
  .atlas-hero-meta { font-size: 8px; gap: 10px 14px; }
  .atlas-statement { min-height: 68svh; padding: 100px 20px; }
  .atlas-statement h2 { font-size: clamp(38px, 11vw, 54px); }
  .atlas-statement-copy { margin-top: 48px; font-size: 15px; }
  .overview-stage { height: 610px; }
  .overview-orbit { width: 94vw; }
  .overview-device--black { left: 6%; bottom: 5%; width: 49vw; height: 74%; }
  .overview-device--white { right: -5%; top: 4%; width: 45vw; height: 70%; }
  .overview-copy { padding: 90px 20px; }
  .overview-copy h2,
  .specs-heading h2,
  .display-copy h2,
  .technologies-heading h2,
  .flavors-heading h2,
  .support-faq > h2,
  .atlas-related > header h2,
  .omny-related > header h2,
  .sleek-related > header h2 { font-size: clamp(32px, 9vw, 40px); }
  .overview-notes { gap: 28px; }
  .overview-notes article { grid-template-columns: 26px 1fr; }
  .atlas-specs,
  .atlas-technologies,
  .atlas-flavors,
  .atlas-support,
  .atlas-related { padding: 90px 20px; }
  .key-facts { margin-top: 60px; grid-template-columns: 1fr 1fr; }
  .key-fact { min-height: 165px; padding: 18px 14px 20px 0; }
  .key-fact:nth-child(even) { padding-left: 14px; border-right: 0; }
  .key-fact:last-child { padding-left: 0; }
  .key-fact strong { font-size: clamp(20px, 6.5vw, 28px); }
  .secondary-specs { grid-template-columns: 1fr; gap: 22px; }
  .display-copy { padding: 90px 20px 50px; }
  .display-intro { font-size: 15px; }
  .display-visual { min-height: 590px; }
  .display-visual picture { width: 78vw; height: 108%; right: -1%; bottom: -15%; }
  .display-real-label { left: 20px; bottom: 20px; }
  .technology-story { margin-top: 60px; display: block; }
  .technology-block { min-height: 260px; margin-bottom: 12px; padding: 26px; }
  .technology-block--screen,
  .technology-block--boost { min-height: 360px; }
  .device-editorial { padding: 90px 20px; }
  .editorial-grid { grid-template-columns: 1fr; }
  .editorial-item--wide { grid-column: span 1; }
  .editorial-item img { max-height: 360px; }
  .editorial-item--wide img { max-height: 320px; }
  .flavors-heading { align-items: flex-start; flex-direction: column; }
  .flavor-filter-rail { margin: 48px -20px 28px; padding: 0 20px; scroll-padding-inline: 20px; }
  .flavor-editorial-grid { grid-template-columns: 1fr; }
  .flavor-tile { min-height: 180px; }
  .flavor-orb { width: 108px; height: 108px; }
  .flavor-tile > div { max-width: 68%; }
  .support-faq > h2 { margin-bottom: 44px; }
  .faq-question { min-height: 68px; font-size: 16px; }
  .authenticity-panel { padding: 30px 24px; }
  .related-devices { margin-top: 58px; grid-template-columns: 1fr; }
  .related-device { min-height: 500px; padding: 26px; }
  .related-device-visual { height: 270px; }
}

@media (prefers-reduced-motion: reduce) {
  .overview-device,
  .display-visual picture { transform: none !important; transition: none; }
  .atlas-scroll-cue i { transition: none; }
}