@layer reset, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body, h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
  ol, ul { padding: 0; list-style: none; }
  img, svg, video, picture { display: block; max-width: 100%; }
  img { height: auto; }
  button, input, select, textarea { font: inherit; color: inherit; }
  address { font-style: normal; }
}

@layer base {
  :root {
    --night: #0E2B2C;
    --night-2: #153A3B;
    --night-line: #2A4F4F;
    --amber: #E3A23B;
    --fire: #D4482A;
    --calm: #4F8A7E;
    --mist: #EEF2F0;
    --paper: #FAFBFA;
    --ink: #172322;
    --stone: #5E6D6A;
    --rule: #CBD5D2;

    --display: "IBM Plex Sans KR", "Pretendard Variable", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --sans: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, monospace;

    --step--1: clamp(0.84rem, 0.8rem + 0.15vw, 0.9rem);
    --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --step-1: clamp(1.2rem, 1.1rem + 0.45vw, 1.42rem);
    --step-2: clamp(1.55rem, 1.3rem + 1vw, 2.05rem);
    --step-3: clamp(2rem, 1.5rem + 2.1vw, 3.1rem);
    --step-4: clamp(2.35rem, 1.6rem + 3.4vw, 4.35rem);

    --gutter: clamp(1rem, 4vw, 3.5rem);
    --max: 1240px;
    --radius-s: 4px;
    --radius-m: 10px;
    --radius-l: 22px;
    color-scheme: light;
  }

  html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: var(--step-0);
    line-height: 1.7;
    word-break: keep-all;
    overflow-wrap: anywhere;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3 { line-height: 1.3; text-wrap: balance; }
  p { text-wrap: pretty; }
  a { color: inherit; text-underline-offset: 0.2em; }
  :focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 2px; }
  ::selection { background: var(--amber); color: var(--night); }

  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--amber); color: var(--night); padding: 0.6rem 1rem; border-radius: var(--radius-s); font-weight: 600; }
  .skip:focus { top: 1rem; }
}

@layer layout {
  main > section { padding-inline: var(--gutter); }
  .section-head {
    max-width: var(--max);
    margin-inline: auto;
    display: grid;
    gap: 0.75rem;
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
  }
  .section-head h2 { font-family: var(--display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.03em; }
  .section-head p { color: var(--stone); max-width: 38em; font-size: var(--step-1); line-height: 1.6; }
  @media (min-width: 960px) {
    .section-head { grid-template-columns: 1fr 1fr; align-items: end; gap: 3rem; }
    .section-head p { justify-self: end; text-align: left; }
  }
}

@layer components {
  /* ---------- masthead ---------- */
  .masthead {
    position: fixed; inset: 0 0 auto; z-index: 50;
    color: var(--mist);
    transition: background-color .3s, color .3s, box-shadow .3s;
  }
  .masthead__inner {
    max-width: calc(var(--max) + 2 * var(--gutter));
    margin-inline: auto;
    padding: 1rem var(--gutter);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  }
  .masthead[data-solid] { background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule); }

  .brand { display: inline-flex; align-items: center; gap: 0.55rem; text-decoration: none; }
  .brand__mark { width: 1.6rem; height: 1.6rem; color: var(--amber); }
  .brand__ko { font-weight: 700; font-size: 1.12rem; letter-spacing: 0.02em; }
  .brand__en { font-size: 0.72rem; letter-spacing: 0.24em; opacity: .7; padding-left: 0.1rem; }

  .nav__toggle { display: none; background: none; border: 0; width: 2.75rem; height: 2.75rem; padding: 0.5rem; cursor: pointer; }
  .nav__list { display: flex; gap: clamp(1rem, 2.4vw, 2rem); align-items: center; font-size: 0.95rem; }
  .nav__list a { text-decoration: none; opacity: .88; }
  .nav__list a:hover { opacity: 1; text-decoration: underline; }
  .nav__cta { border: 1px solid currentColor; padding: 0.45rem 1rem; border-radius: 999px; opacity: 1 !important; }
  .nav__cta:hover { text-decoration: none !important; background: var(--amber); border-color: var(--amber); color: var(--night); }

  @media (max-width: 760px) {
    .nav__toggle { display: block; }
    .nav__list[popover] {
      inset: 4.25rem var(--gutter) auto auto; margin: 0;
      flex-direction: column; align-items: stretch; gap: 0;
      min-width: 13rem; padding: 0.5rem; border: 1px solid var(--rule);
      border-radius: var(--radius-m); background: var(--paper); color: var(--ink);
      box-shadow: 0 18px 40px -18px rgb(14 43 44 / .45);
    }
    .nav__list[popover] a { display: block; padding: 0.75rem 0.9rem; }
    .nav__list[popover]:not(:popover-open) { display: none; }
    .nav__cta { border: 0; border-radius: var(--radius-s); background: var(--night); color: var(--paper); text-align: center; margin-top: 0.25rem; }
  }
  @media (min-width: 761px) {
    .nav__list[popover] { display: flex; position: static; inset: auto; border: 0; padding: 0; margin: 0; background: none; color: inherit; overflow: visible; }
  }

  /* ---------- buttons ---------- */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 3rem; padding: 0.7rem 1.35rem;
    border-radius: 999px; border: 1px solid transparent;
    font-weight: 600; text-decoration: none; cursor: pointer;
    transition: background-color .2s, color .2s, border-color .2s;
  }
  .btn--solid { background: var(--amber); color: var(--night); }
  .btn--solid:hover { background: #F0B653; }
  .btn--line { border-color: currentColor; background: transparent; }
  .btn--line:hover { background: rgb(255 255 255 / .08); }

  /* ---------- hero ---------- */
  .hero {
    background:
      radial-gradient(120% 80% at 85% 10%, var(--night-2) 0%, transparent 60%),
      var(--night);
    color: var(--mist);
    padding-top: clamp(6.5rem, 12vw, 9rem);
    padding-bottom: clamp(3.5rem, 8vw, 6rem);
    display: grid;
    gap: clamp(2.5rem, 6vw, 4rem);
    max-width: none;
  }
  .hero > * { max-width: var(--max); }
  @media (min-width: 960px) {
    .hero {
      grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
      align-items: center;
      padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2));
    }
  }
  .hero h1 {
    font-family: var(--display); font-weight: 700;
    font-size: clamp(2.2rem, 1.4rem + 3.1vw, 3.35rem); line-height: 1.25; letter-spacing: -0.035em;
  }
  .hero h1 span { display: block; }
  .hero__lead { margin-top: 1.6rem; max-width: 33em; font-size: var(--step-1); line-height: 1.65; color: #C9D6D3; }
  .hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.75rem; }

  /* camera feed */
  .feed { position: relative; margin-inline: auto; width: min(100%, 440px); }
  .feed__screen {
    position: relative; overflow: hidden;
    border-radius: var(--radius-m);
    aspect-ratio: 1086 / 1448;
    background: #0A1F20;
    box-shadow: 0 0 0 1px var(--night-line), 0 40px 80px -40px rgb(0 0 0 / .7);
  }
  .feed__screen img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) contrast(1.04); }
  .feed__screen::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgb(255 255 255 / .025) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
  }
  .feed__hud {
    position: absolute; inset: 0.8rem 0.9rem auto; display: flex; justify-content: space-between;
    font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em; color: rgb(255 255 255 / .86);
    text-shadow: 0 1px 2px rgb(0 0 0 / .6); white-space: pre;
  }
  .feed__clock { display: inline-flex; align-items: center; gap: 0.4rem; }
  .rec { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--fire); }
  .feed__target {
    position: absolute; left: 26.3%; top: 38.1%; width: 17.2%; height: 18.6%;
    outline: 2px solid var(--amber); outline-offset: 0;
  }
  .feed__tag {
    position: absolute; left: -2px; bottom: 100%;
    background: var(--amber); color: var(--night);
    font-size: 0.72rem; font-weight: 700; padding: 0.12rem 0.45rem; white-space: nowrap;
  }

  .alert {
    position: absolute; right: -1rem; bottom: 1.5rem; width: min(78%, 300px);
    background: rgb(250 251 250 / .97); color: var(--ink);
    border-radius: 16px; padding: 0.85rem 0.95rem 0.8rem;
    box-shadow: 0 24px 50px -20px rgb(0 0 0 / .65);
    font-size: 0.86rem; line-height: 1.5;
  }
  @media (min-width: 960px) { .alert { right: -3.5rem; } }
  @media (max-width: 480px) { .alert { right: 0.5rem; bottom: 0.75rem; } }
  .alert__app { display: flex; align-items: center; gap: 0.4rem; font-size: 0.74rem; color: var(--stone); }
  .alert__app svg { width: 0.95rem; height: 0.95rem; color: var(--night); }
  .alert__app time { margin-left: auto; }
  .alert__title { margin-top: 0.35rem; font-weight: 700; font-size: 0.95rem; }
  .alert__body { color: #3B4947; }
  .alert__acts { margin-top: 0.6rem; display: flex; gap: 0.4rem; }
  .alert__acts span { flex: 1; text-align: center; font-size: 0.78rem; font-weight: 600; padding: 0.38rem; border-radius: 8px; background: var(--mist); }
  .alert__acts span:first-child { background: var(--night); color: var(--paper); }

  /* ---------- promise ---------- */
  .promise { background: var(--night); color: var(--mist); padding-bottom: clamp(3rem, 7vw, 5rem); }
  .promise__list {
    max-width: var(--max); margin-inline: auto;
    display: grid; gap: 1.75rem;
    border-top: 1px solid var(--night-line); padding-top: 2rem;
  }
  @media (min-width: 760px) { .promise__list { grid-template-columns: repeat(3, 1fr); gap: 3rem; } }
  .promise h2 { font-size: var(--step-1); font-weight: 700; color: #F2C77A; }
  .promise p { margin-top: 0.4rem; color: #B5C4C1; }

  /* ---------- watch ---------- */
  .watch { padding-block: clamp(4.5rem, 10vw, 8rem); }
  .watch__body { max-width: var(--max); margin-inline: auto; }
  .tabs {
    display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none;
    border-bottom: 1px solid var(--rule); margin-bottom: 2.25rem;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs button {
    flex: none; background: none; border: 0; cursor: pointer;
    padding: 0.85rem 1.15rem; font-size: var(--step-1); font-weight: 600; color: var(--stone);
    border-bottom: 3px solid transparent; margin-bottom: -1px;
  }
  .tabs button:hover { color: var(--ink); }
  .tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--night); }

  .panel { display: grid; gap: 2rem; view-transition-name: watch-panel; }
  .panel[hidden] { display: none; }
  @media (min-width: 960px) {
    .panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
    .panel__note { grid-column: 2; }
  }
  .panel__visual { border-radius: var(--radius-m); overflow: hidden; background: var(--mist); }
  .panel__visual img { width: 100%; height: 100%; object-fit: cover; }
  .panel__visual--tall { max-width: 460px; }
  .panel__list { display: grid; gap: 0; }
  .panel__list > div { padding: 1rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: 0.2rem; }
  .panel__list > div:first-child { padding-top: 0; }
  @media (min-width: 600px) { .panel__list > div { grid-template-columns: 9.5rem 1fr; gap: 1.5rem; } }
  .panel__list dt { font-weight: 700; }
  .panel__list dd { color: #3E4C4A; }
  .panel__note { font-size: var(--step--1); color: var(--stone); border-left: 3px solid var(--amber); padding-left: 0.9rem; }
  .watch__common { margin-top: 3rem; color: var(--stone); font-size: var(--step--1); }

  /* density */
  .panel__visual--density { background: var(--night); padding: 1.25rem; }
  .density { width: 100%; height: auto; }
  .density rect { transition: fill .6s; }
  .density__legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1rem; font-size: 0.8rem; color: #B5C4C1; }
  .density__legend li { display: inline-flex; align-items: center; gap: 0.45rem; }
  .density__legend i { width: 0.8rem; height: 0.8rem; border-radius: 2px; background: var(--c); }

  /* report mock */
  .panel__visual--report { background: linear-gradient(160deg, var(--mist), #DDE5E2); padding: clamp(1.25rem, 4vw, 2.75rem); display: grid; place-items: center; }
  .report {
    width: min(100%, 380px); background: var(--paper); border-radius: var(--radius-l);
    padding: 1.4rem 1.35rem 1.1rem; box-shadow: 0 30px 60px -30px rgb(14 43 44 / .45);
    font-size: 0.9rem;
  }
  .report__kind { font-family: var(--display); font-weight: 700; font-size: 1.3rem; }
  .report__when { color: var(--stone); font-size: 0.8rem; margin-bottom: 0.9rem; }
  .report__row { display: grid; grid-template-columns: 1fr auto; gap: 0 0.75rem; padding: 0.65rem 0; border-top: 1px solid var(--rule); }
  .report__row b { font-size: 1.05rem; }
  .report__row em { grid-column: 1 / -1; font-style: normal; font-size: 0.78rem; color: var(--stone); }
  .report__spots { border-top: 1px solid var(--rule); padding-top: 0.7rem; }
  .report__spots p { font-weight: 700; margin-bottom: 0.3rem; }
  .report__spots ol { list-style: decimal; padding-left: 1.2rem; color: #3E4C4A; }
  .report__foot { display: flex; gap: 0.4rem; margin-top: 1rem; }
  .report__foot span { flex: 1; text-align: center; padding: 0.5rem; border-radius: 10px; font-weight: 600; font-size: 0.8rem; background: var(--mist); }
  .report__foot span:first-child { background: var(--night); color: var(--paper); }
  .report__sample { margin-top: 0.8rem; font-size: 0.72rem; color: var(--stone); text-align: center; }

  /* ---------- sites ---------- */
  .sites { background: var(--mist); padding-block: clamp(4.5rem, 10vw, 8rem); }
  .sites__grid {
    max-width: var(--max); margin-inline: auto;
    display: grid; gap: 1px; background: var(--rule);
    border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden;
    grid-template-columns: 1fr;
  }
  @media (min-width: 640px) { .sites__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1040px) {
    .sites__grid { grid-template-columns: repeat(4, 1fr); }
  }
  .site { background: var(--paper); display: grid; container-type: inline-size; }
  .site--image { grid-column: 1 / -1; }
  @media (min-width: 640px) { .site--image { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1040px) { .site--image { grid-column: span 2; } }
  .site picture { min-height: 100%; }
  .site picture img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
  .site__text { padding: clamp(1.25rem, 3vw, 1.75rem); display: grid; gap: 0.6rem; align-content: start; }
  .site h3 { font-size: var(--step-1); font-weight: 700; }
  .site p { color: #3E4C4A; }
  .site__who { margin-top: auto; padding-top: 0.6rem; font-size: var(--step--1); color: var(--stone) !important; }
  .site:has(picture) .site__text { align-content: center; }

  /* ---------- flow ---------- */
  .flow { padding-block: clamp(4.5rem, 10vw, 8rem); }
  .flow__steps {
    max-width: var(--max); margin-inline: auto;
    display: grid; gap: 2rem; counter-reset: step;
  }
  @media (min-width: 900px) { .flow__steps { grid-template-columns: repeat(4, 1fr); gap: 2.5rem; } }
  .flow__steps li { counter-increment: step; display: grid; gap: 0.6rem; align-content: start; padding-top: 1.1rem; border-top: 2px solid var(--night); }
  .flow__steps li::before {
    content: counter(step); font-family: var(--display); font-weight: 700; font-size: 2.6rem; line-height: 1; color: var(--amber);
  }
  .flow__steps h3 { font-size: var(--step-1); }
  .flow__steps p { color: #3E4C4A; }
  .flow__trial { max-width: var(--max); margin: 3rem auto 0; font-size: var(--step-1); font-family: var(--display); font-weight: 600; line-height: 1.6; }

  /* ---------- company ---------- */
  .company {
    position: relative; isolation: isolate; overflow: hidden;
    background: var(--night); color: var(--mist);
    padding-block: clamp(4.5rem, 10vw, 8rem);
    display: grid; gap: clamp(2.5rem, 6vw, 5rem);
  }
  @media (min-width: 960px) {
    .company { grid-template-columns: 1fr 1fr; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  }
  .company__video {
    position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
    opacity: .28; filter: saturate(.6);
  }
  .company::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, var(--night) 25%, rgb(14 43 44 / .55));
  }
  .company h2 { font-family: var(--display); font-weight: 700; font-size: var(--step-3); color: #F2C77A; }
  .company__quote p { margin-top: 1.4rem; font-size: var(--step-1); line-height: 1.75; color: #C9D6D3; max-width: 30em; }
  .timeline { display: grid; }
  .timeline li { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--night-line); }
  .timeline li:first-child { padding-top: 0.25rem; }
  .timeline time { font-family: var(--display); font-weight: 700; color: #F2C77A; font-size: 1.1rem; }
  .timeline p { color: #C9D6D3; }

  /* ---------- contact ---------- */
  .contact {
    padding-block: clamp(4.5rem, 10vw, 8rem);
    display: grid; gap: clamp(2rem, 5vw, 4rem);
  }
  @media (min-width: 960px) {
    .contact { grid-template-columns: 0.8fr 1.2fr; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  }
  .contact h2 { font-family: var(--display); font-weight: 700; font-size: var(--step-3); }
  .contact__intro > p { margin-top: 1rem; color: var(--stone); font-size: var(--step-1); line-height: 1.6; max-width: 24em; }
  .contact__direct { margin-top: 2rem; display: grid; gap: 0.5rem; }
  .contact__direct div { display: flex; gap: 1rem; }
  .contact__direct dt { width: 3rem; color: var(--stone); }
  .contact__direct dd { font-weight: 600; }

  .form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1rem; }
  .field { grid-column: 1 / -1; display: grid; gap: 0.35rem; }
  .field--half { grid-column: auto; }
  @media (max-width: 520px) { .field--half { grid-column: 1 / -1; } }
  .field label { font-size: 0.9rem; font-weight: 600; }
  .field input, .field select, .field textarea {
    width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem;
    border: 1px solid var(--rule); border-radius: var(--radius-s); background: #fff;
  }
  .field textarea { resize: vertical; }
  .field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--night); outline-offset: 0; border-color: var(--night); }
  .field__error { display: none; font-size: 0.82rem; color: var(--fire); }
  .form[data-tried] .field:has(:user-invalid) .field__error,
  .form[data-tried] .field:has(input:invalid) .field__error { display: block; }
  .form[data-tried] .field:has(input:invalid) input { border-color: var(--fire); }
  .consent { grid-column: 1 / -1; display: flex; gap: 0.6rem; align-items: start; font-size: 0.9rem; color: var(--stone); }
  .consent input { margin-top: 0.35rem; accent-color: var(--night); width: 1.05rem; height: 1.05rem; }
  .form[data-tried] .consent:has(input:invalid) { color: var(--fire); }
  .form .btn { grid-column: 1 / -1; justify-self: start; background: var(--night); color: var(--paper); }
  .form .btn:hover { background: var(--night-2); }

  .sent { border: 0; border-radius: var(--radius-m); padding: 1.75rem; max-width: 26rem; box-shadow: 0 30px 70px -30px rgb(0 0 0 / .55); }
  .sent::backdrop { background: rgb(14 43 44 / .55); backdrop-filter: blur(3px); }
  .sent__title { font-weight: 700; font-size: var(--step-1); margin-bottom: 0.6rem; }
  .sent p { color: #3E4C4A; }
  .sent form { margin-top: 1.25rem; }
  .sent .btn--line { color: var(--ink); }

  /* ---------- footer ---------- */
  .footer { background: #0A2122; color: #9FB0AD; padding: 3.5rem var(--gutter) 2.5rem; font-size: 0.88rem; line-height: 1.75; }
  .footer > * { max-width: var(--max); margin-inline: auto; }
  .footer__brand { display: flex; align-items: center; gap: 0.7rem; color: var(--mist); font-family: var(--display); font-weight: 600; margin-bottom: 2rem; }
  .footer__brand .brand__mark { width: 1.4rem; height: 1.4rem; }
  .footer__biz { display: grid; gap: 1.5rem; }
  @media (min-width: 820px) { .footer__biz { grid-template-columns: 1fr 1.2fr 0.8fr; } }
  .footer strong { display: block; color: var(--mist); font-weight: 600; margin-bottom: 0.2rem; }
  .footer a { text-decoration: none; }
  .footer a:hover { text-decoration: underline; }
  .footer__copy { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid #1E3B3C; font-size: 0.78rem; }
}

@layer motion {
  @media (prefers-reduced-motion: no-preference) {
    .feed__target { animation: target-in .5s 1s both cubic-bezier(.2,.8,.2,1); }
    .feed__tag { animation: fade-in .3s 1.35s both; }
    .alert { animation: alert-in .7s 1.9s both cubic-bezier(.2,.9,.25,1); }
    .rec { animation: blink 1.6s steps(1) infinite; }

    @keyframes target-in { from { outline-color: transparent; transform: scale(1.35); } to { outline-color: var(--amber); transform: none; } }
    @keyframes fade-in { from { opacity: 0; } }
    @keyframes alert-in { from { opacity: 0; transform: translateY(1.5rem) scale(.97); } }
    @keyframes blink { 50% { opacity: 0; } }

    @supports (animation-timeline: scroll()) {
      .masthead { animation: solid-bar linear both; animation-timeline: scroll(root); animation-range: 60vh 70vh; }
      @keyframes solid-bar {
        to { background: color-mix(in srgb, var(--paper) 92%, transparent); color: var(--ink); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--rule); }
      }
    }

    ::view-transition-old(watch-panel) { animation: .18s ease-out both fade-out; }
    ::view-transition-new(watch-panel) { animation: .28s ease-out both fade-in; }
    @keyframes fade-out { to { opacity: 0; } }
  }
}

/* ---------- sub pages ---------- */
@layer components {
  .page-hero {
    background: radial-gradient(120% 80% at 85% 10%, var(--night-2) 0%, transparent 60%), var(--night);
    color: var(--mist);
    padding: clamp(6.5rem, 11vw, 8.5rem) var(--gutter) clamp(3rem, 7vw, 5rem);
    display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  }
  @media (min-width: 960px) {
    .page-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
    .page-hero--text { grid-template-columns: minmax(0, 1fr); }
  }
  .crumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; font-size: 0.85rem; color: #9FB0AD; margin-bottom: 1.25rem; }
  .crumbs a { text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; color: var(--mist); }
  .page-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.2rem); letter-spacing: -0.035em; line-height: 1.25; }
  .page-hero__lead { margin: 1.2rem 0 2rem; max-width: 32em; font-size: var(--step-1); line-height: 1.65; color: #C9D6D3; }
  .page-hero__img { border-radius: var(--radius-m); overflow: hidden; max-height: 70vh; box-shadow: 0 0 0 1px var(--night-line), 0 40px 80px -40px rgb(0 0 0 / .7); }
  .page-hero__img img { width: 100%; height: 100%; object-fit: cover; }

  .page-body { max-width: 860px; margin-inline: auto; padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); }
  .page-body h2 { font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.03em; margin: clamp(3rem, 6vw, 4.5rem) 0 1.25rem; }
  .answer { font-size: var(--step-1); line-height: 1.75; padding: 1.4rem 1.5rem; background: var(--mist); border-left: 4px solid var(--night); border-radius: 0 var(--radius-m) var(--radius-m) 0; }
  .page-body .panel__note { margin-top: 1.25rem; }
  .page-figure { margin-top: 3rem; border-radius: var(--radius-m); overflow: hidden; }
  .page-figure img { width: 100%; }
  .points { display: grid; gap: 1.5rem; }
  @media (min-width: 720px) { .points { grid-template-columns: repeat(3, 1fr); } }
  .points li { border-top: 2px solid var(--night); padding-top: 0.9rem; }
  .points h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.35rem; }
  .points p { color: #3E4C4A; }
  .mini-steps { counter-reset: s; display: grid; gap: 0.85rem; }
  .mini-steps li { counter-increment: s; display: grid; grid-template-columns: 2.2rem 1fr; align-items: baseline; color: #3E4C4A; }
  .mini-steps li::before { content: counter(s); font-family: var(--display); font-weight: 700; font-size: 1.3rem; color: var(--amber); }
  .page-body .flow__trial { font-size: var(--step-0); margin-top: 1.5rem; }

  .faq { display: grid; border-top: 1px solid var(--rule); }
  .qa { border-bottom: 1px solid var(--rule); }
  .qa summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; }
  .qa summary::-webkit-details-marker { display: none; }
  .qa summary::after { content: ""; flex: none; width: 0.65rem; height: 0.65rem; border-right: 2px solid var(--stone); border-bottom: 2px solid var(--stone); transform: rotate(45deg) translateY(-25%); transition: transform .2s; }
  .qa[open] summary::after { transform: rotate(-135deg); }
  .qa h3 { font-size: 1.05rem; font-weight: 700; }
  .qa p { padding: 0 0 1.25rem; color: #3E4C4A; max-width: 44em; }
  .more-faq { margin-top: 1rem; }
  .more-faq a { font-weight: 600; }

  .related { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius-m); overflow: hidden; }
  @media (min-width: 720px) { .related { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } }
  .related a { display: grid; gap: 0.35rem; height: 100%; padding: 1.2rem 1.25rem; background: var(--paper); text-decoration: none; }
  .related a:hover { background: var(--mist); }
  .related span { font-weight: 700; }
  .related small { color: var(--stone); font-size: 0.88rem; line-height: 1.55; }

  .cta-band { background: var(--night); color: var(--mist); padding: clamp(3.5rem, 8vw, 5.5rem) var(--gutter); text-align: center; display: grid; justify-items: center; gap: 1rem; }
  .cta-band h2 { font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.03em; }
  .cta-band p { color: #C9D6D3; }

  .footer__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-bottom: 2rem; }
  .footer__nav a { color: #C9D6D3; }

  .site h3 a { text-decoration: none; }
  .site h3 a:hover { text-decoration: underline; }
  .site__more { font-size: 0.9rem; font-weight: 600; color: var(--night) !important; }
}
@layer components {
  .faq-teaser { padding-block: clamp(4.5rem, 10vw, 7rem) 0; }
  .faq-teaser__list, .faq-teaser .more-faq { max-width: var(--max); margin-inline: auto; }
}

/* ---------- FAQ page ---------- */
@layer components {
  .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
  .chips a { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid var(--night-line); border-radius: 999px; font-size: 0.9rem; color: #C9D6D3; text-decoration: none; }
  .chips a:hover { border-color: var(--amber); color: var(--mist); }
  .page-hero__img--wide { aspect-ratio: 4 / 3; }

  .fq-layout { max-width: var(--max); margin-inline: auto; padding: clamp(3.5rem, 8vw, 6rem) var(--gutter); display: grid; gap: 2.5rem; }
  @media (min-width: 960px) { .fq-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 4.5rem; } }
  .fq-toc { display: none; }
  @media (min-width: 960px) {
    .fq-toc { display: block; position: sticky; top: 6rem; align-self: start; }
    .fq-toc p { font-size: 0.85rem; color: var(--stone); margin-bottom: 0.75rem; }
    .fq-toc li a { display: block; padding: 0.5rem 0 0.5rem 0.9rem; border-left: 2px solid var(--rule); text-decoration: none; color: #3E4C4A; }
    .fq-toc li a:hover { border-color: var(--night); color: var(--ink); }
  }
  .fq-body { display: grid; gap: clamp(3rem, 6vw, 4.5rem); max-width: 780px; }
  .fq-group { scroll-margin-top: 6rem; }
  .fq-group header { padding-bottom: 1rem; border-bottom: 2px solid var(--night); margin-bottom: 0.5rem; }
  .fq-group h2 { font-family: var(--display); font-weight: 700; font-size: var(--step-2); letter-spacing: -0.03em; }
  .fq-group header p { color: var(--stone); margin-top: 0.2rem; }
  .fq { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); display: grid; gap: 0.6rem; }
  @media (min-width: 720px) { .fq { grid-template-columns: 15rem 1fr; gap: 2rem; } }
  .fq h3 { font-size: 1.08rem; font-weight: 700; line-height: 1.5; }
  .fq p { color: #3E4C4A; line-height: 1.8; }
  .fq strong { color: var(--ink); font-weight: 700; }

  .sc-section { background: var(--mist); padding: clamp(4rem, 9vw, 6.5rem) var(--gutter); }
  .sc { max-width: var(--max); margin-inline: auto; display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 960px) { .sc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; } }
  .sc a { display: grid; grid-template-rows: auto auto 1fr; height: 100%; background: var(--paper); border-radius: var(--radius-m); overflow: hidden; text-decoration: none; box-shadow: 0 0 0 1px var(--rule); transition: box-shadow .2s; }
  .sc a:hover { box-shadow: 0 0 0 2px var(--night); }
  .sc picture img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
  .sc__name { padding: 1rem 1.1rem 0.25rem; font-weight: 700; }
  .sc__lead { padding: 0 1.1rem 1.1rem; font-size: 0.88rem; line-height: 1.6; color: var(--stone); }
  @media (max-width: 520px) { .sc__lead { display: none; } }
}

/* ---------- solution pages v2 ---------- */
@layer components {
  .sol-hero .crumbs { margin-bottom: 1.5rem; }
  .sol-hero h1 { font-family: var(--display); font-weight: 700; font-size: clamp(2.3rem, 1.4rem + 3.2vw, 3.6rem); line-height: 1.2; letter-spacing: -0.035em; }
  @media (min-width: 960px) { .sol-hero:has(.feed--wide) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
  .feed--wide { width: 100%; max-width: 640px; }
  .feed--wide .feed__screen img { height: 100%; }
  .feed__screen > picture { display: block; height: 100%; }
  .feed__target .feed__tag { white-space: nowrap; }
  .alert__app svg { width: 0.95rem; height: 0.95rem; color: var(--night); }
  .promise__list li h3 { font-size: var(--step-1); font-weight: 700; color: #F2C77A; }

  .sol-intro { padding: clamp(4rem, 9vw, 6.5rem) var(--gutter) 0; }
  .sol-intro__inner { max-width: var(--max); margin-inline: auto; display: grid; gap: 2.5rem; }
  @media (min-width: 960px) { .sol-intro__inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 5rem; align-items: start; } }
  .sol-intro__answer { font-family: var(--display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.7rem); line-height: 1.6; letter-spacing: -0.02em; }
  .sol-facts { display: grid; border-top: 2px solid var(--night); }
  .sol-facts div { display: grid; grid-template-columns: 5rem 1fr; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
  .sol-facts dt { color: var(--stone); }
  .sol-facts dd { font-weight: 600; }

  .sol-watch .panel__visual { aspect-ratio: 4 / 3; }

  .sol-faq { max-width: var(--max); margin-inline: auto; padding: 0 var(--gutter) clamp(4.5rem, 10vw, 7rem); display: grid; gap: 2rem; }
  @media (min-width: 960px) { .sol-faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 4rem; } }
  .sol-faq h2 { font-family: var(--display); font-weight: 700; font-size: var(--step-3); letter-spacing: -0.03em; }
  .sol-faq__head p { margin-top: 0.75rem; }
  .sol-faq__head a { font-weight: 600; }

  @media (min-width: 960px) { .sc--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}
@layer components {
  .panel__visual > picture { display: block; height: 100%; }
  .sol-watch .panel__visual img { height: 100%; }
  .sol-faq { max-width: none; padding-inline: max(var(--gutter), calc((100vw - var(--max)) / 2)); }
  @media (min-width: 960px) {
    .sol-hero:has(.feed--wide) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); }
    .feed--wide { max-width: none; }
    .feed--wide .alert { right: -1.5rem; bottom: -1.5rem; }
  }
  .sol-hero { padding-bottom: clamp(4rem, 9vw, 6.5rem); }
}
@layer components {
  .sol-watch .panel { max-width: var(--max); margin-inline: auto; }
}
@layer components {
  @media (max-width: 959px) {
    .feed--wide .alert { position: relative; right: auto; bottom: auto; width: auto; margin: -1.75rem 0.75rem 0; }
  }
  .sol-watch { padding-bottom: clamp(2rem, 5vw, 3rem); }
}