/* Landing page styles, moved out of inline <style> blocks in app/views/home so browsers can
   cache them across visits. Order = the order the partials render (cascade order matters).
   Linked after the app stylesheets via content_for :page_stylesheets (home/_hero). */

/* === hero === */
@media (min-width: 640px) {
  .hero-nowrap {
    white-space: nowrap;
    display: inline-block;
  }
  .hero-br {
    display: block;
  }
}

@media (max-width: 424px) {
  [data-testid='landing-hero'] {
    padding-top: clamp(6.75rem, 22vw, 7.75rem) !important;
  }

  [data-testid='landing-hero'] > .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  [data-testid='landing-hero-content'] {
    transform: none;
    width: auto;
    margin-left: 0;
  }

  [data-testid='landing-hero-ctas'] {
    align-items: center;
    gap: 0.875rem;
    margin-bottom: 1.75rem;
  }

  [data-testid='landing-hero-ctas'] a {
    width: fit-content;
    max-width: 100%;
    padding: 0.95rem 1.4rem;
    font-size: 1rem;
    line-height: 1.25rem;
  }
}

@media (max-width: 374px) {
  [data-testid='landing-hero'] > .container {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  [data-testid='landing-hero-content'] > div:first-child {
    margin-bottom: 0.8rem;
    padding: 0.45rem 0.85rem;
  }

  [data-testid='landing-hero-content'] > div:first-child span:last-child {
    font-size: 0.72rem;
    line-height: 1rem;
  }

  [data-testid='landing-hero-content'] > h1 {
    margin-bottom: 0.8rem;
    font-size: 2.45rem;
    line-height: 0.96;
  }

  html:lang(ko) [data-testid='landing-hero-content'] > h1 {
    font-size: 2.35rem;
    line-height: 1;
  }

  [data-testid='landing-hero-content'] > p {
    max-width: 16.6rem;
    margin-bottom: 1.15rem;
    font-size: 1rem;
    line-height: 1.48;
  }

  [data-testid='landing-hero-ctas'] {
    margin-bottom: 1.35rem;
  }

  [data-testid='landing-hero-ctas'] a {
    padding: 0.82rem 1.1rem;
    font-size: 0.95rem;
  }

  [data-testid='landing-hero-content'] > div:last-child {
    gap: 0.5rem 0.85rem;
  }

  [data-testid='landing-hero-content'] > div:last-child span {
    font-size: 0.73rem;
    line-height: 0.95rem;
  }
}

@media (min-width: 375px) and (max-width: 424px) {
  [data-testid='landing-hero-content'] > div:first-child {
    margin-bottom: 1.15rem;
  }

  [data-testid='landing-hero-content'] > h1 {
    margin-bottom: 1.15rem;
    font-size: 3.05rem;
    line-height: 1.01;
  }

  html:lang(ko) [data-testid='landing-hero-content'] > h1 {
    font-size: 2.9rem;
  }

  [data-testid='landing-hero-content'] > p {
    max-width: 19.5rem;
    margin-bottom: 1.75rem;
    font-size: 1.15rem;
    line-height: 1.6;
  }

  html:lang(ko) [data-testid='landing-hero-content'] > p {
    font-size: 1.1rem;
  }
}

@media (min-width: 425px) and (max-width: 767px) {
  [data-testid='landing-hero'] {
    padding-top: clamp(6.75rem, 16vw, 7.75rem) !important;
  }

  [data-testid='landing-hero-ctas'] {
    align-items: center;
    margin-bottom: 2rem;
  }

  [data-testid='landing-hero-ctas'] a {
    width: fit-content;
    max-width: 100%;
  }
}

@media (min-width: 1280px) {
  [data-testid='landing-hero-content'] > h1 {
    font-size: clamp(3.5rem, 4.5vw, 10rem);
    letter-spacing: -0.04em;
    line-height: 1.0;
  }

  [data-testid='landing-hero-content'] > p {
    font-size: clamp(1.25rem, 1.6vw, 2.25rem);
    max-width: clamp(36rem, 50vw, 64rem);
  }

  [data-testid='landing-hero-ctas'] a {
    padding: clamp(0.9rem, 0.8vw, 1.2rem) clamp(1.4rem, 1.5vw, 2.25rem);
    font-size: clamp(1rem, 0.9vw, 1.2rem);
  }
}

/* === stats === */
[data-testid='landing-metrics'] {
  /* Apple design tokens (from awesome-design-md/apple) */
  --apple-canvas: #f5f5f7;
  --apple-ink: #1d1d1f;
  --apple-ink-80: #333336;
  --apple-ink-48: #6e6e73;
  --apple-hairline: #d2d2d7;
  --apple-blue: #0066cc;

  --apple-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;

  /* Fluid type ramps */
  --metrics-eyebrow: clamp(0.65rem, 0.7vw, 1.25rem);
  --metrics-headline: clamp(1.7rem, 4vw, 7rem);
  --metrics-lede: clamp(0.95rem, 1.5vw, 2.25rem);
  --metrics-value: clamp(2.5rem, 10vw, 5rem);
  --metrics-title: clamp(0.95rem, 1.6vw, 1.0625rem);
  --metrics-body: clamp(0.78rem, 1.4vw, 0.875rem);
  --metrics-trust-eyebrow: clamp(0.65rem, 1.2vw, 0.75rem);
  --metrics-trust-label: clamp(0.78rem, 1.4vw, 0.9375rem);
}

[data-testid='landing-metrics'],
[data-testid='landing-metrics'] * {
  font-family: var(--apple-font);
}

[data-testid='landing-metrics'] {
  padding: clamp(0.75rem, 2vw, 1.5rem) 0;
}

[data-testid='landing-metrics-shell'] {
  width: 100%;
}

[data-testid='landing-metrics-stage'] {
  position: relative;
  min-height: calc(100svh - 1.5rem);
  margin: 0.75rem;
  border-radius: 1.5rem;
  overflow: hidden;
  transform-origin: center;
}

[data-testid='landing-metrics-content'] {
  position: relative;
  inset: auto;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(2rem, 3vw, 4.5rem) clamp(1.5rem, 5vw, 8rem) clamp(3rem, 4vw, 5.5rem);
}

/* Numerals: tabular so counter doesn't dance */
[data-testid='landing-metrics-card-value'] {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* Grid: 2 columns on mobile, 4 on desktop */
[data-testid='landing-metrics-grid'] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1rem, 3vw, 2.5rem);
  row-gap: clamp(1.25rem, 3vw, 2rem);
}

@media (min-width: 900px) {
  [data-testid='landing-metrics-grid'] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Each card: no glass, no border — just a top hairline + breathing room */
[data-testid='landing-metrics-card-shell'] {
  position: relative;
  padding-top: clamp(0.85rem, 2vw, 1.25rem);
}

[data-testid='landing-metrics-card-shell']::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--apple-hairline);
}

/* Short viewports (e.g. 320×480) — keep the section comfortably inside the pinned frame */
@media (max-height: 580px) {
  [data-testid='landing-metrics'] {
    --metrics-headline: clamp(1.3rem, 5vw, 1.7rem);
    --metrics-lede: 0.82rem;
    --metrics-value: clamp(1.7rem, 8.5vw, 2.4rem);
    --metrics-title: 0.85rem;
    --metrics-body: 0.72rem;
  }
}

@media (max-width: 767px) {
  [data-testid='landing-metrics-stage'] {
    min-height: auto;
  }

  [data-testid='landing-metrics-content'] {
    display: block;
    padding: 2.5rem 1.25rem 3rem;
  }

  [data-testid='landing-metrics-content'] > * + * {
    margin-top: 2.25rem;
  }
}

/* === features shell === */
[data-testid='landing-features-side-indicator'] {
  display: flex;
}

[data-testid='landing-features-analysis-layout'] {
  display: grid;
}

[data-testid='landing-features-analysis-card-shell'] {
  width: min(100%, 44rem, calc(62vh + 1rem));
  margin-inline: auto;
}

@media (min-width: 426px) and (max-width: 1024px) and (orientation: portrait) {
  [data-testid='landing-features-analysis-layout'] {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6rem;
    align-items: start;
  }

  [data-testid='landing-features-analysis-layout'] > :first-child {
    order: 1;
  }

  [data-testid='landing-features-analysis-layout'] > :last-child {
    order: 2;
  }

  [data-testid='landing-features-analysis-card-shell'] {
    width: min(100%, 34rem, calc(47vh + 1rem));
  }
}

@media (min-width: 426px) and (max-width: 1024px) and (orientation: landscape) {
  [data-testid='landing-features-analysis-layout'] {
    grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
    gap: 1.85rem;
    align-items: center;
  }

  [data-testid='landing-features-analysis-layout'] > :first-child {
    order: 1;
  }

  [data-testid='landing-features-analysis-layout'] > :last-child {
    order: 2;
  }

  [data-testid='landing-features-analysis-card-shell'] {
    width: min(100%, 40rem, calc(58vh + 1rem));
    margin-inline: 0;
  }
}

@media (max-width: 425px) {
  [data-testid='landing-features-side-indicator'] {
    display: none;
  }
}

/* === upload panel: base === */
[data-testid='landing-features-upload-panel'] {
  background: transparent;
}

[data-testid='landing-features-upload-panel'] .upload-video-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 10px;
}

[data-testid='landing-features-upload-panel'] .upload-video-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: inherit;
}

/* Frame-sequence scrubber for phones / low-power devices (FrameSequencePlayer draws on a canvas
   inside it). Hidden by default; the controller picks the mode and sets display inline. The
   background is frame 0, so the stage is never blank while the first frames download. */
[data-testid='landing-features-upload-panel'] .upload-frame-scrubber {
  position: absolute;
  inset: 0;
  display: none;
  overflow: hidden;
  border-radius: inherit;
  background: #eef0f1 url(/videos/upload-frames/wide/f000.webp) center / cover no-repeat;
}

@media (orientation: portrait) {
  [data-testid='landing-features-upload-panel'] .upload-frame-scrubber {
    background-image: url(/videos/upload-frames/tall/f000.webp);
  }
}

@media (hover: none) and (pointer: coarse), (max-width: 900px) {
  [data-testid='landing-features-upload-panel'] .upload-video-stage video {
    display: none;
  }
  [data-testid='landing-features-upload-panel'] .upload-frame-scrubber {
    display: block;
  }
}

/* Vignette removed — copy now fades in over a clean white panel */
[data-testid='landing-features-upload-panel'] .upload-video-vignette {
  display: none;
}

[data-testid='landing-features-upload-panel'] .upload-copy-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.25rem, 4vw, 4rem);
  pointer-events: none;
  isolation: isolate;
}

/* White panel fades in behind the copy — same approach as mobile */
[data-testid='landing-features-upload-panel'] .upload-copy-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

[data-testid='landing-features-upload-panel'][data-copy-visible='true'] .upload-copy-stage::before {
  opacity: 1;
}

[data-testid='landing-features-upload-panel'] .upload-copy {
  width: min(28rem, 88%);
  color: rgba(15, 23, 42, 0.92);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: none;
  text-align: center;
  position: relative;
  z-index: 1;
}

[data-testid='landing-features-upload-panel'][data-copy-visible='true'] .upload-copy {
  opacity: 1;
  transform: translateY(0);
}

[data-testid='landing-features-upload-panel'] .upload-copy .upload-badge {
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  gap: 0.55rem;
  color: #4338ca;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

[data-testid='landing-features-upload-panel'] .upload-copy .upload-badge svg {
  width: 1.1rem;
  height: 1.1rem;
}

[data-testid='landing-features-upload-panel'] .upload-copy h3 {
  margin-top: 1rem;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  font-size: clamp(2rem, 4.4vw, 3.75rem);
  color: #0f172a;
}

[data-testid='landing-features-upload-panel'] .upload-copy h3 .landing-features-upload-title-line {
  display: inline-block;
  white-space: nowrap;
}

/* Soften muted line from locale (it ships .text-slate-400) */
[data-testid='landing-features-upload-panel'] .upload-copy h3 .text-slate-400 {
  color: rgba(15, 23, 42, 0.45) !important;
}

[data-testid='landing-features-upload-panel'] .upload-copy .upload-body {
  margin-top: 1.1rem;
  font-size: clamp(0.95rem, 1.25vw, 1.125rem);
  line-height: 1.55;
  color: rgba(15, 23, 42, 0.76);
}

[data-testid='landing-features-upload-panel'] .upload-copy .upload-bullets {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
}

[data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 0.65rem;
  color: rgba(15, 23, 42, 0.86);
  font-size: clamp(0.85rem, 1.05vw, 1rem);
  line-height: 1.35;
}

[data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4338ca;
}

[data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon svg {
  width: 0.62rem;
  height: 0.62rem;
}

/* === upload panel: hi-res screens === */
@media (min-width: 1920px) {
  [data-testid='landing-features-upload-panel'] .upload-copy {
    width: min(52rem, 70vw);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-badge {
    font-size: clamp(0.78rem, 0.6vw, 1.5rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 {
    font-size: clamp(3.75rem, 4.4vw, 8rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-body {
    font-size: clamp(1.125rem, 1.3vw, 3rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet {
    font-size: clamp(1rem, 1.05vw, 2rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon {
    width: 1.5rem;
    height: 1.5rem;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon svg {
    width: 0.85rem;
    height: 0.85rem;
  }
}

/* 4K scaling — uncap vw for native 4K displays */
@media (min-width: 3200px) {
  [data-testid='landing-features-upload-panel'] .upload-copy {
    width: min(80rem, 65vw);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-badge {
    font-size: clamp(1.5rem, 0.6vw, 2.25rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 {
    font-size: clamp(8rem, 4.4vw, 16rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-body {
    font-size: clamp(3rem, 1.3vw, 6rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet {
    font-size: clamp(2rem, 1.05vw, 4rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon svg {
    width: 1.25rem;
    height: 1.25rem;
  }
}

/* === upload panel: desktop === */
/* Desktop / wide viewports — copy lives on the left side of the frame in
   dark tones, and the animated dark vignette is fully disabled. */
@media (min-width: 1024px) and (orientation: landscape), (min-width: 1280px) {
  [data-testid='landing-features-upload-panel'] .upload-video-vignette {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
    transition: none;
  }

  [data-testid='landing-features-upload-panel'][data-overlay-active='true'] .upload-video-vignette {
    display: none !important;
    opacity: 0 !important;
  }

  /* No white overlay at desktop — copy sits on the natural light video area */
  [data-testid='landing-features-upload-panel'] .upload-copy-stage::before {
    display: none;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy-stage {
    justify-content: flex-start;
    align-items: center;
    padding: clamp(2rem, 4vw, 4.5rem);
    /* Left padding keeps the copy in the clean off-white video area before
       the darker action shifts toward the right side of the frame. */
    padding-left: clamp(2rem, 5vw, 6rem);
    padding-right: max(clamp(2rem, 4vw, 4rem), 58vw);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy {
    width: min(28rem, 34vw);
    text-align: left;
    color: #0f172a;
    text-shadow: none;
    transform: translateX(-24px);
  }

  [data-testid='landing-features-upload-panel'][data-copy-visible='true'] .upload-copy {
    transform: translateX(0);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-badge {
    flex-direction: row;
    color: #1f2937;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 {
    color: #0a0a0a;
    font-size: clamp(2.2rem, 3.4vw, 3.6rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 .text-slate-400 {
    color: rgba(15, 23, 42, 0.45) !important;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-body {
    color: rgba(15, 23, 42, 0.7);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullets {
    align-items: flex-start;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet {
    flex-direction: row;
    color: rgba(15, 23, 42, 0.82);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon {
    background: rgba(15, 23, 42, 0.08);
    border-color: rgba(15, 23, 42, 0.25);
    color: #0f172a;
  }
}

@media (min-width: 1600px) and (orientation: landscape) {
  [data-testid='landing-features-upload-panel'] .upload-copy-stage {
    padding: clamp(2.25rem, 4vw, 5rem);
    padding-left: clamp(2.5rem, 5vw, 7rem);
    padding-right: max(clamp(2.25rem, 4vw, 5rem), 59vw);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy {
    width: min(34rem, 32vw);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 {
    font-size: clamp(2.6rem, 3vw, 4rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-body {
    font-size: clamp(1.05rem, 1.15vw, 1.25rem);
  }
}

@media (min-width: 2000px) and (orientation: landscape) {
  [data-testid='landing-features-upload-panel'] .upload-copy {
    width: min(40rem, 32vw);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 {
    font-size: clamp(3rem, 3vw, 4.5rem);
  }
}

/* 4K — uncap all text tokens so vw drives proportional growth */
@media (min-width: 3200px) {
  [data-testid='landing-features-upload-panel'] .upload-copy {
    width: min(52rem, 32vw);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 {
    font-size: clamp(3rem, 3.3vw, 8rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-body {
    font-size: clamp(1rem, 0.98vw, 3rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet {
    font-size: clamp(0.9rem, 0.82vw, 2.5rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* Portrait / narrow viewports — copy sits at the bottom over the video with

/* === upload panel: narrow === */
   the original dark vignette, but push the copy to the right edge with
   enough breathing room from the viewport. */
@media (orientation: portrait) and (min-width: 433px) and (max-width: 1024px),
       (min-width: 769px) and (max-width: 1023px) {
  [data-testid='landing-features-upload-panel'] .upload-copy-stage {
    align-items: center;
    justify-content: center;
    padding: clamp(1.5rem, 5vw, 2.75rem) clamp(1.75rem, 5vw, 3.5rem) clamp(2rem, 7vw, 3rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy-stage::before {
    content: "";
  }

  [data-testid='landing-features-upload-panel'] .upload-copy {
    width: min(28rem, 86vw);
    text-align: center;
    transform: translateY(12px);
    color: rgba(15, 23, 42, 0.92);
    text-shadow: none;
  }

  [data-testid='landing-features-upload-panel'][data-copy-visible='true'] .upload-copy {
    transform: translateY(0);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-badge {
    flex-direction: row;
    color: #4338ca;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 {
    color: #0f172a;
    font-size: clamp(1.8rem, 5vw, 2.9rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 .text-slate-400 {
    color: rgba(15, 23, 42, 0.45) !important;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-body {
    color: rgba(15, 23, 42, 0.76);
    font-size: clamp(0.9rem, 2.4vw, 1rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullets {
    align-items: center;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet {
    flex-direction: row;
    color: rgba(15, 23, 42, 0.86);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    color: #4338ca;
  }
}

/* Very narrow / very tall viewports — shrink the video stage vertically so
   less is cropped from the sides and the reference vertical seam stays
   within the frame with breathing room from the edge. */
@media (max-aspect-ratio: 3/5) and (max-width: 768px) {
  [data-testid='landing-features-upload-panel'] .upload-video-stage {
    top: clamp(1.25rem, 9vh, 7rem);
    bottom: clamp(1.25rem, 9vh, 7rem);
  }
}

@media (max-aspect-ratio: 1/2) and (max-width: 600px) {
  [data-testid='landing-features-upload-panel'] .upload-video-stage {
    top: clamp(2rem, 15vh, 9rem);
    bottom: clamp(2rem, 15vh, 9rem);
  }
}

/* Small mobile portrait: the copy takes over the section with a solid white
   panel instead of sharing space with the video. */
@media (max-width: 432px) {
  [data-testid='landing-features-upload-panel'] .upload-video-vignette {
    display: none;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy-stage {
    isolation: isolate;
    align-items: center;
    justify-content: center;
    padding: clamp(1.25rem, 5vw, 2rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy-stage::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #fff;
    -webkit-mask-image: none;
    mask-image: none;
    opacity: 0;
    transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy {
    position: relative;
    isolation: isolate;
    z-index: 1;
    width: min(22rem, 92%);
    text-align: center;
    transform: translateY(16px) scale(0.98);
    color: rgba(15, 23, 42, 0.92);
    text-shadow: none;
  }

  [data-testid='landing-features-upload-panel'][data-copy-visible='true'] .upload-copy {
    text-align: center;
    transform: translateY(0) scale(1);
  }

  [data-testid='landing-features-upload-panel'][data-copy-visible='true'] .upload-copy-stage::before {
    opacity: 1;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-badge {
    flex-direction: row;
    align-self: center;
    color: #4338ca;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 {
    color: #0f172a;
    font-size: clamp(1.6rem, 7vw, 2.4rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy h3 .text-slate-400 {
    color: rgba(15, 23, 42, 0.52) !important;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-body {
    color: rgba(15, 23, 42, 0.76);
    font-size: clamp(0.85rem, 3.4vw, 1rem);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullets {
    align-items: center;
    justify-content: center;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullets li {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgba(15, 23, 42, 0.86);
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-bullet-icon {
    background: rgba(99, 102, 241, 0.12);
    border-color: rgba(99, 102, 241, 0.35);
    color: #4338ca;
  }
}

@media (max-width: 420px) {
  [data-testid='landing-features-upload-panel'] .upload-copy-stage {
    /* Side indicator is hidden below 425px, so we can reclaim the left edge. */
    padding: 1.1rem 1.1rem 2rem 1.25rem;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy {
    width: 100%;
  }

  [data-testid='landing-features-upload-panel'] .upload-copy .upload-badge {
    font-size: 0.7rem;
  }
}

/* === intelligence panel === */
/* ── Design tokens ───────────────────────────────────────── */
[data-testid='intel-panel'] {
  --apple-canvas: #f5f5f7;
  --apple-ink: #1d1d1f;
  --apple-ink-48: #6e6e73;
  --apple-hairline: #d2d2d7;
  --apple-blue: #0066cc;
  --apple-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  background: transparent;
  color: var(--apple-ink);
  font-family: var(--apple-font);
  box-sizing: border-box;
}

/* ── Base grid (mobile-first): text row on top, stage fills rest ── */
[data-testid='intel-shell'] {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  padding-top: 4.5rem; /* clears the fixed nav (~72px mobile) */
}

[data-testid='intel-copy'] {
  grid-row: 1;
  padding: 1.25rem 1.25rem 0.75rem;
  text-align: center;
  opacity: 1;
  transition: transform 460ms cubic-bezier(.16,1,.3,1);
}

/* shared-pose-scene is the second direct child of intel-shell — it fills 1fr */
[data-testid='intel-shell'] [data-testid='shared-pose-scene'] {
  min-height: 0;
}

/* ── Eyebrow ─────────────────────────────────────────────── */
[data-testid='intel-eyebrow'] {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--apple-blue);
  font-weight: 600;
  font-size: clamp(0.7rem, 1.3vw, 0.78rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
[data-testid='intel-eyebrow']::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--apple-blue);
  box-shadow: 0 0 0 0 rgba(0,102,204,0.55);
  animation: intelPulse 2.2s infinite;
}
@keyframes intelPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(0,102,204,.55) } 70% { box-shadow: 0 0 0 8px rgba(0,102,204,0) } }

/* ── Title ───────────────────────────────────────────────── */
[data-testid='intel-title'] {
  margin-top: 0.85rem;
  font-size: clamp(1.85rem, 5vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--apple-ink);
  hyphens: none;
  overflow-wrap: normal;
}
[data-testid='intel-title'] .intelligence-title-muted { color: var(--apple-ink-48); display: block; }

/* ── Body ────────────────────────────────────────────────── */
[data-testid='intel-body'] {
  margin-top: 1rem;
  font-size: clamp(0.95rem, 1.7vw, 1.18rem);
  line-height: 1.55;
  color: var(--apple-ink-48);
  hyphens: none;
  overflow-wrap: normal;
}

/* ── 2K / 4K display scaling (intel section only) ────────── */
@media (min-width: 2560px) {
  [data-testid='intel-eyebrow'] { font-size: clamp(0.8rem, 0.9vw, 0.95rem); }
  [data-testid='intel-title']   { font-size: clamp(2.4rem, 3.8vw, 4.2rem); }
  [data-testid='intel-body']    { font-size: clamp(1.1rem, 1.4vw, 1.45rem); }
}
@media (min-width: 3840px) {
  [data-testid='intel-eyebrow'] { font-size: clamp(0.9rem, 1vw, 1.15rem); }
  [data-testid='intel-title']   { font-size: clamp(3.2rem, 4.2vw, 5.5rem); }
  [data-testid='intel-body']    { font-size: clamp(1.35rem, 1.6vw, 1.9rem); }
}

/* === shared pose scene === */
/* ── Height chain: each wrapper must propagate height down to the canvas ── */
[data-testid='shared-pose-scene'] {
  width: 100%;
  height: 100%;
  min-height: 0;
}

[data-testid='shared-pose-stage'] {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.scene-shell {
  position: relative;
  width: 100%;
  height: 100%;
}

/* canvas must be block so it doesn't carry inline baseline gap */
.scene-shell canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* SVG overlay sits on top of the canvas */
.scene-shell svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* === step breakdown panel === */
/* ── Design tokens (mirrors intelligence panel) ──────────── */
[data-testid='step-panel'] {
  --apple-canvas: #f5f5f7;
  --apple-ink: #1d1d1f;
  --apple-ink-48: #6e6e73;
  --apple-blue: #0066cc;
  --apple-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;
  background: transparent;
  color: var(--apple-ink);
  font-family: var(--apple-font);
  box-sizing: border-box;
}

/* ── Base grid: text row on top, transparent scene gap fills rest ── */
[data-testid='step-shell'] {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: 100%;
  padding-top: 4.5rem; /* clears the fixed nav (~72px mobile) */
}

[data-testid='step-copy'] {
  grid-row: 1;
  padding: 1.25rem 1.25rem 0.75rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  transition: transform 460ms cubic-bezier(.16,1,.3,1), opacity 460ms cubic-bezier(.16,1,.3,1);
}

/* Transparent gap — 3D world from the intelligence panel shows through */
[data-testid='step-scene-gap'] {
  grid-row: 2;
  min-height: 0;
}

/* ── Eyebrow ─────────────────────────────────────────────── */
[data-testid='step-eyebrow'] {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--apple-blue);
  font-weight: 600;
  font-size: clamp(0.7rem, 1.3vw, 0.78rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
[data-testid='step-eyebrow']::before {
  content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--apple-blue);
}

/* ── Title ───────────────────────────────────────────────── */
[data-testid='step-title'] {
  margin-top: 0.85rem;
  font-size: clamp(1.85rem, 5vw, 3.25rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--apple-ink);
  hyphens: none;
  overflow-wrap: normal;
}

/* ── Body ────────────────────────────────────────────────── */
[data-testid='step-body'] {
  margin-top: 1rem;
  font-size: clamp(0.95rem, 1.7vw, 1.18rem);
  line-height: 1.55;
  color: var(--apple-ink-48);
  hyphens: none;
  overflow-wrap: normal;
}

/* ── 2K / 4K display scaling ──────────────────────────────── */
@media (min-width: 2560px) {
  [data-testid='step-eyebrow'] { font-size: clamp(0.8rem, 0.9vw, 0.95rem); }
  [data-testid='step-title']   { font-size: clamp(2.4rem, 3.8vw, 4.2rem); }
  [data-testid='step-body']    { font-size: clamp(1.1rem, 1.4vw, 1.45rem); }
}
@media (min-width: 3840px) {
  [data-testid='step-eyebrow'] { font-size: clamp(0.9rem, 1vw, 1.15rem); }
  [data-testid='step-title']   { font-size: clamp(3.2rem, 4.2vw, 5.5rem); }
  [data-testid='step-body']    { font-size: clamp(1.35rem, 1.6vw, 1.9rem); }
}

@media (max-width: 720px) {
  [data-testid='step-shell'] { padding: 0.85rem 0.75rem 1.15rem; gap: 0.8rem; }
  [data-testid='step-header'] { max-width: 22rem; }
  [data-testid='step-title'] { margin-top: 0.45rem; font-size: clamp(1.35rem, 7vw, 1.9rem); }
  [data-testid='step-body'] { margin-top: 0.45rem; font-size: 0.82rem; line-height: 1.45; }
  [data-testid='step-stage-wrap'] {
    width: 300%;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
    aspect-ratio: 16 / 9;
  }
}

/* Portrait mobile: text stays on top, 3D canvas (shared from intelligence
   anchor) fills below. The stage-wrap is invisible (opacity:0) and not
   used by the bridge on portrait — hide it from layout to avoid dead space. */
@media (max-width: 1024px) and (orientation: portrait) {
  [data-testid='step-panel'] {
    align-items: stretch;
  }
  [data-testid='step-shell'] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
    width: 100%;
    max-width: none;
    padding: 44px 16px 8px 16px;
    gap: 0;
    align-content: unset;
    overflow: visible;
  }
  [data-testid='step-header'] {
    max-width: none;
    padding-top: 0;
    margin: 0;
    opacity: 0;
    transform: scale(0.965);
  }
  [data-testid='step-stage-wrap'] {
    display: none;
  }
}

/* === reports panel === */
/* ── 2K / 4K display scaling ──────────────────────────────── */
@media (min-width: 2560px) {
  #features-reports [data-testid='rp-badge']   { font-size: clamp(0.8rem, 0.9vw, 1rem); }
  #features-reports [data-testid='rp-title']   { font-size: clamp(2.5rem, 3.5vw, 4rem); }
  #features-reports [data-testid='rp-body']    { font-size: clamp(1rem, 1.3vw, 1.35rem); }
  #features-reports [data-testid='rp-bullets'] li { font-size: clamp(0.95rem, 1.2vw, 1.2rem); }
}
@media (min-width: 3840px) {
  #features-reports [data-testid='rp-badge']   { font-size: clamp(1rem, 1.1vw, 1.3rem); }
  #features-reports [data-testid='rp-title']   { font-size: clamp(3.5rem, 4.5vw, 5.5rem); }
  #features-reports [data-testid='rp-body']    { font-size: clamp(1.3rem, 1.6vw, 1.8rem); }
  #features-reports [data-testid='rp-bullets'] li { font-size: clamp(1.2rem, 1.4vw, 1.6rem); }
}

/* === research section === */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* === certification === */
[data-testid='landing-certification'] {
  /* Apple design tokens (from awesome-design-md/apple), mirrored from the stats stage */
  --apple-canvas: #f5f5f7;
  --apple-ink: #1d1d1f;
  --apple-ink-80: #333336;
  --apple-ink-48: #6e6e73;
  --apple-hairline: #d2d2d7;
  --apple-blue: #0066cc;
  --apple-focus: #0071e3;
  --apple-font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", system-ui, sans-serif;

  padding: clamp(0.75rem, 2vw, 1.5rem) 0;
  font-family: var(--apple-font);
  color: var(--apple-ink);
}

[data-testid='landing-certification-stage'] {
  margin: 0.75rem;
  border-radius: 1.5rem;
  background: var(--apple-canvas);
  overflow: hidden;
}

[data-testid='landing-certification-content'] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(3.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  [data-testid='landing-certification-content'] {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

[data-testid='landing-certification-eyebrow'] {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--apple-blue);
  font-weight: 600;
  font-size: clamp(0.7rem, 1.3vw, 0.78rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

[data-testid='landing-certification-eyebrow']::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--apple-blue);
}

[data-testid='landing-certification-heading'] {
  margin-top: 0.85rem;
  font-size: clamp(1.85rem, 5vw, 3.25rem);
  line-height: 1.07;
  letter-spacing: -0.035em;
  font-weight: 600;
  color: var(--apple-ink);
  text-wrap: balance;
  word-break: keep-all;
}

[data-testid='landing-certification-heading'] .certification-heading-muted {
  display: block;
  color: var(--apple-ink-48);
}

[data-testid='landing-certification-body'] {
  margin-top: 1.1rem;
  max-width: 36rem;
  font-size: clamp(1rem, 1.6vw, 1.0625rem);
  line-height: 1.47;
  letter-spacing: -0.01em;
  color: var(--apple-ink-48);
  text-wrap: pretty;
  word-break: keep-all;
}

/* Spec sheet: label / value rows divided by hairlines, no card chrome */
[data-testid='landing-certification-specs'] {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  max-width: 36rem;
  border-bottom: 1px solid var(--apple-hairline);
}

[data-testid='landing-certification-specs'] > div {
  display: grid;
  grid-template-columns: minmax(6.5rem, 9rem) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--apple-hairline);
  font-size: clamp(0.875rem, 1.4vw, 0.9375rem);
  line-height: 1.43;
  letter-spacing: -0.01em;
}

[data-testid='landing-certification-specs'] dt {
  color: var(--apple-ink-48);
}

[data-testid='landing-certification-specs'] dt,
[data-testid='landing-certification-specs'] dd {
  margin: 0;
}

[data-testid='landing-certification-specs'] dd {
  color: var(--apple-ink);
  font-weight: 600;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

[data-testid='landing-certification-specs'] .certification-spec-note {
  color: var(--apple-ink-48);
  font-weight: 400;
}

[data-testid='landing-certification-specs'] .certification-spec-numeric {
  font-variant-numeric: tabular-nums lining-nums;
}

@media (max-width: 420px) {
  [data-testid='landing-certification-specs'] > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.15rem;
  }
}

/* Primary pill CTA (Action Blue) */
[data-testid='landing-certification-cta'] {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  background: var(--apple-blue);
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, background-color 160ms ease;
}

[data-testid='landing-certification-cta']:hover { background: #0077ed; }
[data-testid='landing-certification-cta']:active { transform: scale(0.95); }
[data-testid='landing-certification-cta']:focus-visible { outline: 2px solid var(--apple-focus); outline-offset: 3px; }
[data-testid='landing-certification-cta'] svg { width: 0.95rem; height: 0.95rem; }

[data-testid='landing-certification-footnote'] {
  margin-top: 1rem;
  max-width: 36rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--apple-ink-48);
  word-break: keep-all;
}

/* The certificate is the "product shot": it rests on the surface and takes the system's one shadow */
[data-testid='landing-certification-figure'] {
  display: block;
  justify-self: center;
  width: min(100%, 22rem);
}

[data-testid='landing-certification-figure'] img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: rgba(0, 0, 0, 0.22) 3px 5px 30px 0;
  transform: rotate(1.5deg);
  transition: transform 460ms cubic-bezier(.16,1,.3,1);
}

[data-testid='landing-certification-figure']:hover img { transform: rotate(0deg) translateY(-4px); }

@media (min-width: 900px) {
  [data-testid='landing-certification-figure'] { width: min(100%, 24rem); }
}

@media (prefers-reduced-motion: reduce) {
  [data-testid='landing-certification-figure'] img,
  [data-testid='landing-certification-cta'] { transition: none; }
}

@media (min-width: 900px) {
  [data-testid='landing-certification-content'].certification-no-figure {
    grid-template-columns: minmax(0, 1fr);
    max-width: 48rem;
  }
}

/* === tests + faq (press design system: docs/press/README.md, after awesome-design-md/apple) === */
.landing-tests,
.landing-faq {
  --apple-canvas: #f5f5f7;
  --apple-ink: #1d1d1f;
  --apple-ink-80: #333336;
  --apple-ink-48: #6e6e73;
  --apple-hairline: #d2d2d7;
  --apple-blue: #0066cc;
  background: #fff;
  color: var(--apple-ink);
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", Arial, sans-serif;
  padding: clamp(4.5rem, 9vw, 8rem) 1rem;
}
.landing-tests-inner { max-width: 72rem; margin: 0 auto; }
.landing-faq-inner { max-width: 48rem; margin: 0 auto; }
.landing-tests-intro { max-width: 44rem; margin: 0 auto; text-align: center; }
.landing-eyebrow {
  font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--apple-blue);
}
.landing-tests-heading {
  margin-top: 0.75rem; font-size: clamp(1.9rem, 4.2vw, 3.25rem); font-weight: 600; line-height: 1.08;
  letter-spacing: -0.025em; text-wrap: balance;
}
.landing-tests-lede {
  margin-top: 1rem; font-size: clamp(1rem, 1.6vw, 1.25rem); line-height: 1.5; color: var(--apple-ink-80); text-wrap: pretty;
}
.landing-tests-grid {
  display: grid; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}
.landing-test-card {
  display: flex; flex-direction: column; background: var(--apple-canvas); border-radius: 18px;
  padding: clamp(1.5rem, 2.5vw, 2rem);
}
.landing-test-tag { font-size: 0.8rem; font-weight: 600; color: var(--apple-ink-48); letter-spacing: -0.005em; }
.landing-test-card h3 {
  margin-top: 0.35rem; font-size: clamp(1.35rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
}
.landing-test-body { margin-top: 0.75rem; font-size: 0.975rem; line-height: 1.55; color: var(--apple-ink-80); }
.landing-test-figure { margin-top: auto; padding-top: 1.5rem; }
.landing-track { position: relative; display: flex; gap: 3px; height: 10px; }
.landing-track span { display: block; min-width: 3px; border-radius: 999px; }
.landing-track i {
  position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 999px; border: 3px solid #fff;
  transform: translate(-50%, -50%);
}
.landing-figure-caption { margin-top: 0.6rem; font-size: 0.75rem; color: var(--apple-ink-48); }
.landing-tests-footnote {
  max-width: 44rem; margin: clamp(2rem, 4vw, 3rem) auto 0; padding-top: 1.25rem; border-top: 1px solid var(--apple-hairline);
  text-align: center; font-size: 0.85rem; line-height: 1.5; color: var(--apple-ink-48);
}
.landing-faq { background: var(--apple-canvas); }
.landing-faq .landing-eyebrow, .landing-faq .landing-tests-heading { text-align: center; }
.landing-faq-list { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--apple-hairline); }
.landing-faq details { border-bottom: 1px solid var(--apple-hairline); }
.landing-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0;
  cursor: pointer; list-style: none;
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after { content: "+"; font-size: 1.4rem; font-weight: 400; color: var(--apple-ink-48); }
.landing-faq details[open] summary::after { content: "−"; }
.landing-faq summary h3 { font-size: clamp(1.02rem, 1.6vw, 1.15rem); font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; }
.landing-faq details p { padding: 0 2rem 1.25rem 0; font-size: 0.975rem; line-height: 1.6; color: var(--apple-ink-80); }
:lang(ko) .landing-tests, :lang(ko) .landing-faq { word-break: keep-all; }
:lang(ko) .landing-eyebrow { letter-spacing: 0.06em; }
:lang(ko) .landing-test-body, :lang(ko) .landing-tests-lede, :lang(ko) .landing-faq details p { line-height: 1.7; }
:lang(ko) .landing-tests-heading { letter-spacing: -0.015em; }

/* features grid (#features) - shares the .landing-tests tokens */
.landing-feature-list {
  display: grid; gap: 2.25rem 2rem; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.landing-feature-list li { padding-top: 1.25rem; border-top: 1px solid var(--apple-hairline); }
.landing-feature-list svg { width: 26px; height: 26px; color: var(--apple-blue); }
.landing-feature-list h3 { margin-top: 0.9rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; }
.landing-feature-list p { margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.55; color: var(--apple-ink-80); }
:lang(ko) .landing-feature-list p { line-height: 1.7; }
.landing-feature-grid { background: var(--apple-canvas); }
.landing-track-ticks { position: relative; height: 1.1rem; margin-top: 0.4rem; font-size: 0.72rem; color: var(--apple-ink-48); font-variant-numeric: tabular-nums; }
.landing-track-ticks span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.landing-scale-legend { margin-top: 0.35rem; font-size: 0.78rem; line-height: 1.45; color: var(--apple-ink-80); }

/* === test pages (tests/show) - press design system, same tokens as .landing-tests === */
.test-page {
  --apple-canvas: #f5f5f7; --apple-ink: #1d1d1f; --apple-ink-80: #333336; --apple-ink-48: #6e6e73;
  --apple-hairline: #d2d2d7; --apple-blue: #0066cc;
  color: var(--apple-ink); background: #fff;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", Arial, sans-serif;
}
.test-page-inner { max-width: 72rem; margin: 0 auto; padding: 0 1rem; }
.test-page-narrow { max-width: 48rem; }
.test-page-hero { padding: clamp(7rem, 12vw, 9.5rem) 0 clamp(3rem, 6vw, 5rem); }
.test-page-hero-grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .test-page-hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }
.test-page-crumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; font-size: 0.82rem; color: var(--apple-ink-48); }
.test-page-crumbs a { color: var(--apple-ink-48); }
.test-page-crumbs a:hover { color: var(--apple-blue); }
.test-page h1 {
  margin-top: 0.75rem; font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 600; line-height: 1.06; letter-spacing: -0.025em; text-wrap: balance;
}
.test-page-lede { margin-top: 1.1rem; font-size: clamp(1.02rem, 1.6vw, 1.25rem); line-height: 1.55; color: var(--apple-ink-80); text-wrap: pretty; }
.test-page-facts { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.5rem 0 1.75rem; }
.test-page-facts div { border: 1px solid var(--apple-hairline); border-radius: 999px; padding: 0.4rem 0.9rem; font-size: 0.88rem; }
.test-page-facts dt { display: inline; color: var(--apple-ink-48); margin-right: 0.4rem; }
.test-page-facts dd { display: inline; font-weight: 600; }
.test-page-phone { justify-self: center; width: min(100%, 300px); margin: 0; }
.test-page-phone-screen {
  display: flex; flex-direction: column; aspect-ratio: 1080 / 2400; overflow: hidden;
  border: 8px solid #1d1d1f; border-radius: 36px; background: #f3f5f8;
}
.test-page-phone-header { display: block; width: 100%; height: auto; flex: none; }
.test-page-phone-scroll { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; overscroll-behavior: auto; }
.test-page-phone-scroll::-webkit-scrollbar { display: none; }
.test-page-phone-scroll:focus-visible { outline: 2px solid var(--apple-blue); outline-offset: -2px; }
.test-page-phone-scroll img { display: block; width: 100%; height: auto; }
.test-page-phone-hint { margin-top: 0.75rem; text-align: center; font-size: 0.82rem; color: var(--apple-ink-48); }
.test-page-band { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.test-page-alt { background: var(--apple-canvas); }
.test-page h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; }
.test-page-text { margin-top: 1rem; font-size: 1.02rem; line-height: 1.65; color: var(--apple-ink-80); }
.test-page-steps { counter-reset: step; display: grid; gap: 1.5rem 2rem; margin: 2rem 0 0; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.test-page-steps li { counter-increment: step; padding-top: 1rem; border-top: 1px solid var(--apple-hairline); }
.test-page-steps li::before { content: counter(step); display: block; font-size: 0.8rem; font-weight: 600; color: var(--apple-blue); letter-spacing: 0.08em; }
.test-page-steps h3 { margin-top: 0.5rem; font-size: 1.1rem; font-weight: 600; letter-spacing: -0.015em; }
.test-page-steps p { margin-top: 0.4rem; font-size: 0.95rem; line-height: 1.6; color: var(--apple-ink-80); }
.test-page-track { margin-top: 1.75rem; background: #fff; }
.test-page-track .landing-test-figure { padding-top: 0; }
.test-page-who { margin-top: 1.25rem; padding: 0; list-style: none; border-top: 1px solid var(--apple-hairline); }
.test-page-who li { padding: 0.9rem 0; border-bottom: 1px solid var(--apple-hairline); font-size: 1rem; line-height: 1.55; color: var(--apple-ink-80); }
.test-page-refs { margin-top: 1.25rem; padding-left: 1.25rem; display: grid; gap: 0.75rem; font-size: 0.9rem; line-height: 1.55; color: var(--apple-ink-80); }
.test-page-refs a { color: var(--apple-ink-80); text-decoration: underline; text-decoration-color: var(--apple-hairline); text-underline-offset: 3px; }
.test-page-refs a:hover { color: var(--apple-blue); }
.test-page-other { text-decoration: none; color: inherit; background: #fff; }
.test-page-other:hover h3 { color: var(--apple-blue); }
.landing-test-more { margin-top: 1rem; font-size: 0.92rem; font-weight: 600; }
.landing-test-more a, span.landing-test-more { color: var(--apple-blue); }
.test-page-getapp { margin-top: clamp(3rem, 6vw, 4.5rem); text-align: center; max-width: 40rem; margin-left: auto; margin-right: auto; }
.test-page-getapp .test-page-text { margin-bottom: 1.5rem; }
:lang(ko) .test-page { word-break: keep-all; }
:lang(ko) .test-page-lede, :lang(ko) .test-page-text, :lang(ko) .test-page-steps p, :lang(ko) .test-page-who li { line-height: 1.75; }
:lang(ko) .test-page .landing-eyebrow { letter-spacing: 0.06em; }
.landing-test-title-link { color: inherit; text-decoration: none; }
.landing-test-title-link:hover { color: var(--apple-blue); }
.test-page-video-frame { margin: 1.75rem 0 0; }
.test-page-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: #f5f5f7; }
.test-page-video-frame figcaption { max-width: 48rem; }
.test-page-video-note { margin-top: 0.5rem; font-size: 0.85rem; color: var(--apple-ink-48); }

/* science page (info/science) - shares the .test-page tokens */
.test-page-narrow-text { max-width: 48rem; }
.science-table-wrap { margin-top: 1.75rem; overflow-x: auto; }
.science-table { width: 100%; min-width: 40rem; border-collapse: collapse; font-size: 0.93rem; line-height: 1.5; }
.science-table th, .science-table td { padding: 0.85rem 0.9rem 0.85rem 0; border-bottom: 1px solid var(--apple-hairline); text-align: left; vertical-align: top; }
.science-table thead th { font-size: 0.78rem; font-weight: 600; color: var(--apple-ink-48); text-transform: uppercase; letter-spacing: 0.06em; }
.science-table tbody th { font-weight: 600; color: var(--apple-ink); white-space: nowrap; }
.science-table td { color: var(--apple-ink-80); }
.science-table a { color: var(--apple-blue); }
.science-numbers { display: grid; gap: 1.5rem 2rem; margin-top: 1.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.science-numbers div { padding-top: 1rem; border-top: 1px solid var(--apple-hairline); }
.science-numbers dt { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.science-numbers dd { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.5; color: var(--apple-ink-80); }
.science-download { margin-top: 1.75rem; }
.landing-tests-footnote a { color: var(--apple-blue); white-space: nowrap; }
:lang(ko) .science-table { word-break: keep-all; }
@media (max-width: 640px) {
  .science-table { min-width: 0; }
  .science-table thead { display: none; }
  .science-table, .science-table tbody, .science-table tr, .science-table th, .science-table td { display: block; width: 100%; }
  .science-table tr { padding: 0.9rem 0; border-bottom: 1px solid var(--apple-hairline); }
  .science-table th, .science-table td { padding: 0.15rem 0; border: 0; white-space: normal; }
  .science-table td[data-label]::before { content: attr(data-label); display: block; margin-top: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--apple-ink-48); }
  .science-table .science-source { margin-top: 0.25rem; font-size: 0.85rem; }
}
@media (min-width: 900px) { .science-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.science-page .landing-tests-footnote { margin-left: 0; text-align: left; }

/* buyer's guide (info/apps_guide) - reuses .test-page and .science-table */
.guide-disclosure { margin-top: 1.25rem; padding: 1rem 1.15rem; border-radius: 18px; background: var(--apple-canvas); font-size: 0.9rem; line-height: 1.55; color: var(--apple-ink-80); }
.guide-table { min-width: 64rem; font-size: 0.86rem; }
.guide-table tbody th { white-space: normal; min-width: 14rem; }
.guide-table tbody th > a { color: var(--apple-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--apple-hairline); text-underline-offset: 3px; }
.guide-note { margin-top: 0.35rem; font-weight: 400; color: var(--apple-ink-80); line-height: 1.5; }
.guide-tests { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.2rem; min-width: 9.5rem; }
.guide-test { display: flex; justify-content: space-between; gap: 0.6rem; font-size: 0.8rem; }
.guide-test b { font-weight: 600; }
.guide-test-yes b { color: var(--apple-ink); }
.guide-test-no b { color: var(--apple-ink-48); font-weight: 400; }
.guide-test-unknown b { color: var(--apple-ink-48); font-weight: 400; font-style: italic; }
.guide-paper { display: block; margin-bottom: 0.3rem; color: var(--apple-blue); }
@media (max-width: 640px) {
  .guide-table { min-width: 0; }
  .guide-tests { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
}

/* reference values (info/reference_values) - reuses .test-page, .science-table, .guide-disclosure */
.refvalues-toc { margin: 1.25rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.refvalues-toc a { display: inline-block; padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--apple-hairline); color: var(--apple-ink); font-size: 0.85rem; text-decoration: none; }
.refvalues-toc a:hover { border-color: var(--apple-ink-48); }
.refvalues-table tbody th { white-space: normal; min-width: 9rem; font-variant-numeric: tabular-nums; }
.refvalues-sources-heading { margin-top: 1.5rem; font-size: 0.95rem; font-weight: 600; color: var(--apple-ink); }
.refvalues-sources { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.6; }
.refvalues-sources a { color: var(--apple-blue); }
.refvalues-inapp { margin-top: 1.25rem; font-size: 0.92rem; line-height: 1.55; color: var(--apple-ink-80); }
.refvalues-inapp b { display: block; font-weight: 600; color: var(--apple-ink); }
.refvalues-inapp a { color: var(--apple-blue); }
.refvalues-page .landing-tests-footnote { margin-left: 0; text-align: left; }

/* learn (info/learn + test pages) - article cards linking to the AICU blog */
.learn-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.learn-card { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: #fff; color: var(--apple-ink); text-decoration: none; border: 1px solid var(--apple-hairline); }
.test-page-band:not(.test-page-alt) .learn-card { background: var(--apple-canvas); border-color: transparent; }
.learn-card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.learn-card-image { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; background: var(--apple-canvas); }
.learn-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.35rem 1.4rem; }
.learn-card h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.learn-card-excerpt { margin-top: 0.5rem; font-size: 0.92rem; line-height: 1.55; color: var(--apple-ink-80); }
.learn-card-meta { margin-top: auto; padding-top: 0.9rem; font-size: 0.8rem; color: var(--apple-ink-48); }
/* shorts: square cards; a sideways-scrolling row on phones, a grid from tablets up */
.learn-shorts { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(13.5rem, 1fr); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; margin-bottom: 1.5rem; }
.learn-short { scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.6rem; color: var(--apple-ink); text-decoration: none; }
.learn-short img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 18px; background: #272729; }
.learn-short-title { font-size: 0.95rem; font-weight: 600; line-height: 1.35; letter-spacing: -0.01em; }
.learn-short:hover .learn-short-title { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) { .learn-shorts { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; } }

/* learn articles (info/article): Ghost HTML on this site, in the press type scale */
.learn-article-column { max-width: 44rem; margin: 0 auto; }
.learn-article-hero h1 { text-wrap: balance; }
.learn-article-meta { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.45rem; font-size: 0.9rem; color: var(--apple-ink-48); }
.learn-article-feature { max-width: 56rem; margin: clamp(2rem, 4vw, 3rem) auto 0; }
.learn-article-feature img { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--apple-canvas); }
.is-short .learn-article-feature { max-width: 34rem; }
.learn-article-band { padding-top: clamp(1rem, 3vw, 2rem); }
.learn-article-body { font-size: 1.075rem; line-height: 1.7; color: var(--apple-ink-80); word-break: keep-all; overflow-wrap: anywhere; }
.learn-article-body > * + * { margin-top: 1.15em; }
.learn-article-body h2 { margin-top: 2.2em; font-size: clamp(1.45rem, 2.4vw, 1.8rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; color: var(--apple-ink); }
.learn-article-body h3 { margin-top: 1.8em; font-size: 1.2rem; font-weight: 600; color: var(--apple-ink); }
.learn-article-body a { color: var(--apple-blue); text-decoration: underline; text-decoration-color: rgba(0, 102, 204, 0.3); text-underline-offset: 3px; }
.learn-article-body strong { color: var(--apple-ink); font-weight: 600; }
.learn-article-body ul, .learn-article-body ol { padding-left: 1.3em; }
.learn-article-body ul { list-style: disc; }
.learn-article-body ol { list-style: decimal; }
.learn-article-body li + li { margin-top: 0.45em; }
.learn-article-body figure { margin: 2em 0; }
.learn-article-body figure img, .learn-article-body figure video { display: block; width: 100%; height: auto; border-radius: 18px; background: var(--apple-canvas); }
.learn-article-body figcaption { margin-top: 0.7em !important; text-align: center; font-size: 0.85rem !important; line-height: 1.45; color: var(--apple-ink-48); opacity: 1 !important; }
.learn-article-body table { display: block; overflow-x: auto; width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.learn-article-body th, .learn-article-body td { padding: 0.7em 0.9em 0.7em 0; border-bottom: 1px solid var(--apple-hairline); text-align: left; vertical-align: top; }
.learn-article-body thead th { font-size: 0.8rem; font-weight: 600; color: var(--apple-ink-48); text-transform: uppercase; letter-spacing: 0.02em; }
.learn-article-body hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--apple-hairline); }
.learn-article-body em { color: var(--apple-ink-48); }