/* Shared story composition. Narrow and wide use one narrative and asset source. */

html.narrow-story-tail-free {
  scroll-snap-type: none;
}

@keyframes story-continue-nudge {
  0%,
  65%,
  100% {
    transform: translateY(0);
  }

  78% {
    transform: translateY(6px);
  }
}

.narrow-cover__key-creation [hidden],
.narrow-cover__key-ring-builder [hidden] {
  display: none !important;
}

.narrow-cover__ring-reset-note {
  flex: 1 0 100%;
}

.narrow-cover__live-kicker--section {
  display: none;
}

.narrow-cover__continue-cue {
  display: inline-grid;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 2px solid currentColor;
  border-radius: 50%;
  color: inherit;
  place-items: center;
  text-decoration: none;
}

.narrow-cover__continue-cue svg {
  width: 28px;
  height: 28px;
  overflow: visible;
  animation: story-continue-nudge 1.8s ease-in-out infinite;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.narrow-cover__continue-cue:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .narrow-cover__continue-cue svg {
    animation: none;
  }

  [data-story-key-ring-image] {
    transition: none !important;
  }
}

@media (min-width: 900px) {
  body.wide-story-ready .wide-canonical-story [data-story-harbor-action][hidden] {
    display: none !important;
  }

  html.wide-story-ready {
    --wide-story-header: calc(88px + var(--safe-top));
    scroll-padding-top: var(--wide-story-header);
  }

  body.wide-story-ready .wide-story-replaced {
    display: none !important;
  }

  body.wide-story-ready .story-stop {
    scroll-snap-stop: always;
  }

  body.wide-story-ready .wide-canonical-story {
    --story-body-size: clamp(1.125rem, 1.45vw, 1.32rem);
    --story-body-line: 1.52;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: clip;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    height: max(620px, calc(100svh - var(--wide-story-header)));
    min-height: max(620px, calc(100svh - var(--wide-story-header)));
    overflow: hidden;
    scroll-margin-top: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__viewport-canvas {
    display: grid;
    width: min(100%, 1440px);
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    padding: clamp(2rem, 5vh, 4.75rem) clamp(2rem, 5vw, 5.5rem);
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 6rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--story-v3:not(.narrow-cover--physical-limits) .narrow-cover__viewport-canvas {
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: clamp(1.25rem, 2.5vh, 2.25rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--story-v3:not(.narrow-cover--physical-limits) .narrow-cover__live-kicker--section {
    display: block;
    grid-row: 1;
    grid-column: 1 / -1;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--story-v3:not(.narrow-cover--physical-limits) .narrow-cover__live-kicker--inline {
    display: none;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--story-v3:not(.narrow-cover--physical-limits) .narrow-cover__live-copy {
    grid-row: 2;
    grid-column: 1;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--story-v3:not(.narrow-cover--physical-limits) .narrow-cover__art-window {
    grid-row: 2;
    grid-column: 2;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-copy {
    position: relative;
    z-index: 2;
    align-self: center;
    min-width: 0;
    max-width: 39rem;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-kicker {
    margin: 0;
    color: var(--wide-story-accent, #365d78);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
    text-transform: uppercase;
  }

  body.wide-story-ready .wide-canonical-story h1,
  body.wide-story-ready .wide-canonical-story h2 {
    max-width: 13ch;
    margin: clamp(0.8rem, 1.6vh, 1.25rem) 0 0;
    color: inherit;
    font-size: clamp(2.35rem, 4vw, 4.8rem);
    font-weight: 750;
    letter-spacing: -0.055em;
    line-height: 1.02;
    text-wrap: balance;
  }

  body.wide-story-ready .wide-canonical-story h2 {
    font-size: clamp(2.15rem, 3.45vw, 4.2rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-summary {
    display: grid;
    max-width: 36rem;
    margin-top: clamp(1.2rem, 2.6vh, 2rem);
    gap: clamp(0.8rem, 1.5vh, 1.2rem);
    color: var(--wide-story-muted, #566169);
    font-size: var(--story-body-size);
    letter-spacing: -0.012em;
    line-height: var(--story-body-line);
    text-wrap: pretty;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-summary p {
    margin: 0;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-summary ol {
    display: grid;
    gap: 0.35em;
    margin: 0;
    padding-left: 1.35em;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-summary li {
    padding-left: 0.2em;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-action {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    min-height: 48px;
    margin-top: clamp(1.25rem, 2.8vh, 2rem);
    padding: 0.25rem 0 0.45rem;
    border-bottom: 2px solid currentColor;
    color: var(--wide-story-accent, #9ec2d3);
    font-size: clamp(1rem, 1.25vw, 1.2rem);
    font-weight: 750;
    line-height: 1.25;
    text-decoration: none;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-action svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__art-window {
    position: relative;
    display: grid;
    width: 100%;
    height: min(67vh, 650px);
    min-height: 0;
    place-items: center;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__precise-art {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    object-fit: contain;
    object-position: center;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--problem {
    --wide-story-accent: #9ec2d3;
    --wide-story-muted: rgba(255, 255, 255, 0.78);
    background: #061d2b;
    color: #fff;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--problem .narrow-cover__precise-art {
    width: min(100%, 34rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--house-key,
  body.wide-story-ready .wide-canonical-story .narrow-cover--better-key {
    --wide-story-accent: #365d78;
    --wide-story-muted: #566169;
    background: #f3f2ee;
    color: #25282b;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--house-key .narrow-cover__art-window,
  body.wide-story-ready .wide-canonical-story .narrow-cover--better-key .narrow-cover__art-window {
    overflow: hidden;
    border: 1px solid rgba(54, 93, 120, 0.18);
    border-radius: clamp(1rem, 2vw, 1.75rem);
    background: #fff;
    box-shadow: 0 24px 60px rgba(7, 26, 39, 0.12);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--house-key .narrow-cover__precise-art,
  body.wide-story-ready .wide-canonical-story .narrow-cover--better-key .narrow-cover__precise-art {
    object-fit: cover;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--physical-limits,
  body.wide-story-ready .wide-canonical-story .narrow-cover--ring {
    --wide-story-accent: #365d78;
    --wide-story-muted: #566169;
    background: #dbe7ec;
    color: #25282b;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--physical-limits .narrow-cover__viewport-canvas {
    grid-template: auto minmax(0, 1fr) / 1fr;
    align-items: stretch;
    gap: clamp(1.5rem, 3vh, 2.75rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--physical-limits .narrow-cover__problem-intro {
    align-self: start;
    max-width: none;
    text-align: center;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--physical-limits .narrow-cover__problem-intro h2 {
    max-width: none;
    margin: 0;
    color: var(--wide-story-accent, #365d78);
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    font-weight: 800;
    letter-spacing: 0.12em;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-grid {
    position: relative;
    display: grid;
    min-height: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 5vw, 6rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-grid::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    background: rgba(54, 93, 120, 0.24);
    content: "";
    transform: translateX(-0.5px);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-group {
    container-type: inline-size;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-rows: auto auto;
    align-content: start;
    gap: clamp(2rem, 4vh, 3.25rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-group + .narrow-cover__problem-group {
    padding-left: 0;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-copy h3,
  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-copy p {
    margin: 0;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-copy {
    width: 100%;
    max-width: 34rem;
    margin: 0 auto;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-copy h3 {
    display: block;
    color: inherit;
    min-height: 1.08em;
    font-size: clamp(1.15rem, 4cqi, 2.5rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
    text-align: left;
    text-wrap: nowrap;
    white-space: nowrap;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-copy p {
    max-width: 34ch;
    margin-top: 0.7rem;
    color: var(--wide-story-muted, #566169);
    font-size: var(--story-body-size);
    line-height: var(--story-body-line);
    text-align: left;
    text-wrap: pretty;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-art {
    display: grid;
    min-height: 0;
    place-items: center;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__problem-art img {
    display: block;
    width: clamp(13rem, 18vw, 19rem);
    max-width: 100%;
    height: auto;
    aspect-ratio: 941 / 1672;
    object-fit: contain;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__key-creation,
  body.wide-story-ready .wide-canonical-story .narrow-cover__key-ring-builder {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 0.85rem;
    padding: 1rem 1.25rem 0;
    text-align: center;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__key-creation p,
  body.wide-story-ready .wide-canonical-story .narrow-cover__key-ring-builder p {
    max-width: 34ch;
    margin: 0;
    color: inherit;
    font-size: var(--story-body-size);
    line-height: var(--story-body-line);
    text-wrap: pretty;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__story-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1.25rem;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__story-form {
    margin: 0;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__story-button,
  body.wide-story-ready .wide-canonical-story .narrow-cover__story-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: 1rem;
    font-weight: 750;
    text-decoration: none;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__story-button {
    padding: 0.7rem 1.2rem;
    border: 2px solid currentColor;
    border-radius: 0.3rem;
    background: #fff;
    color: #365d78;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    user-select: none;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__story-link {
    padding: 0;
    border: 0;
    border-bottom: 2px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--mementom-key .narrow-cover__precise-art {
    bottom: 7.5rem;
    height: calc(100% - 7.5rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--mementom-key {
    --wide-story-accent: #c7dfec;
    --wide-story-muted: rgba(255, 255, 255, 0.84);
    background: #365d78;
    color: #fff;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--mementom-key .narrow-cover__precise-art {
    width: min(100%, 24rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--ring .narrow-cover__art-window {
    grid-template-rows: minmax(0, 1fr) auto;
    place-items: stretch;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--ring .narrow-cover__precise-art {
    position: static;
    grid-row: 1;
    width: min(100%, 24rem);
    height: 100%;
    margin: auto;
    object-fit: contain;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--ring .narrow-cover__key-ring-builder {
    position: static;
    grid-row: 2;
    gap: 0.7rem;
    padding: 0 1.25rem;
  }

  body.wide-story-ready .wide-canonical-story [data-story-key-ring-image][hidden],
  body.wide-story-ready .wide-canonical-story .narrow-cover__key-ring-builder [hidden] {
    display: none !important;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--ring [data-story-key-ring-image] {
    transition: opacity 180ms ease;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--ring.is-key-ring-empty [data-story-key-ring-image] {
    opacity: 0.26;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--login {
    --wide-story-accent: #9ec2d3;
    --wide-story-muted: rgba(255, 255, 255, 0.78);
    background: #061d2b;
    color: #fff;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover--login .narrow-cover__art-window {
    pointer-events: none;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-preview-link {
    display: block;
    width: min(100%, 32rem);
    height: 100%;
    color: inherit;
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-preview {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    color: #25282b;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: 4.75rem;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid #d6d8d5;
    background: #f2f1e8;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-company,
  body.wide-story-ready .wide-canonical-story .narrow-cover__login-security {
    display: flex;
    align-items: center;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-company {
    gap: 0.7rem;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-company > span {
    display: grid;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-company small,
  body.wide-story-ready .wide-canonical-story .narrow-cover__login-security {
    color: #365d78;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-company strong {
    font-family: Georgia, serif;
    font-size: 1.12rem;
    font-weight: 400;
    line-height: 1.05;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__harbor-mark {
    position: relative;
    display: block;
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #25282b;
    background: #f8f6ed;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__harbor-mark::before {
    position: absolute;
    top: 18%;
    left: 34%;
    width: 2px;
    height: 65%;
    background: #25282b;
    content: "";
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__harbor-mark::after {
    position: absolute;
    top: 29%;
    left: 38%;
    border-top: 0.8rem solid transparent;
    border-bottom: 0.5rem solid transparent;
    border-left: 1.05rem solid #dc5b43;
    content: "";
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-security {
    gap: 0.45rem;
    text-align: right;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-security img {
    width: 1.15rem;
    height: 1.15rem;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-body {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    padding: clamp(1rem, 2vh, 1.4rem);
    align-content: start;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-body h3 {
    margin: 0;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
    letter-spacing: -0.04em;
    line-height: 1.05;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-body > p {
    margin: 0.6rem 0 0;
    color: #667078;
    font-size: clamp(0.75rem, 0.9vw, 0.9rem);
    line-height: 1.38;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-ring {
    display: block;
    width: auto;
    height: min(18vh, 9rem);
    margin: 0.35rem auto;
    object-fit: contain;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-button {
    display: grid;
    min-height: 2.55rem;
    margin-top: 0.45rem;
    border: 1px solid #aeb9bf;
    border-radius: 0.25rem;
    color: #25282b;
    font-size: clamp(0.76rem, 0.95vw, 0.9rem);
    font-weight: 700;
    place-items: center;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-button--primary {
    border-color: #365d78;
    background: #365d78;
    color: #fff;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-body .narrow-cover__login-privacy {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid #d8dddd;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-cancel {
    padding: 0.55rem 0;
    color: #4e5960;
    font-size: 0.8rem;
    font-weight: 700;
    text-align: center;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.55rem;
    border-top: 1px solid #d8dddd;
    color: #365d78;
    font-size: 0.78rem;
    font-weight: 700;
  }
}

@media (min-width: 900px) and (max-width: 1120px) {
  body.wide-story-ready .wide-canonical-story .narrow-cover__viewport-canvas {
    padding-right: 2.5rem;
    padding-left: 2.5rem;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.92fr);
    gap: 2.5rem;
  }

  body.wide-story-ready .wide-canonical-story h1,
  body.wide-story-ready .wide-canonical-story h2 {
    font-size: clamp(2.15rem, 4.2vw, 3.25rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-summary {
    font-size: 1.125rem;
  }
}

@media (min-width: 900px) and (max-height: 720px) {
  body.wide-story-ready .wide-canonical-story .narrow-cover__viewport-canvas {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__art-window {
    height: min(64vh, 500px);
  }

  body.wide-story-ready .wide-canonical-story h1,
  body.wide-story-ready .wide-canonical-story h2 {
    font-size: clamp(2rem, 3.55vw, 3.3rem);
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__live-summary {
    margin-top: 1rem;
    gap: 0.65rem;
    font-size: 1.0625rem;
    line-height: 1.42;
  }
}

@media (max-width: 899px) {
  body.narrow-story-ready [data-story-harbor-action][hidden] {
    display: none !important;
  }

  :root {
    --narrow-header: calc(74px + var(--safe-top));
    --narrow-stop: calc(100svh - var(--narrow-header));
  }

  html {
    scroll-padding-top: var(--narrow-header);
    scroll-snap-type: y mandatory;
  }

  html.narrow-story-ready:not(.narrow-detail-open) {
    scroll-padding-top: var(--narrow-header);
  }

  html.narrow-detail-open {
    scroll-snap-type: none;
  }

  html.narrow-scroll-restoring {
    scroll-behavior: auto !important;
    scroll-snap-type: none;
  }

  body.narrow-story-ready {
    --narrow-identity-login: 1;
    --narrow-answer-login: 1;
    --narrow-key-build: 1;
    background: var(--paper);
  }

  body.narrow-story-ready .site-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem;
    min-height: var(--narrow-header);
    padding-top: calc(12px + var(--safe-top));
    padding-right: max(12px, var(--safe-right));
    padding-bottom: 12px;
    padding-left: max(12px, var(--safe-left));
  }

  body.narrow-story-ready .site-header .brand {
    min-width: 0;
    max-width: 100%;
  }

  body.narrow-story-ready .site-header .menu-button,
  body.narrow-story-ready .site-header .primary-nav {
    grid-column: 2;
  }

  body.narrow-story-ready .key-morph-layer,
  body.narrow-story-ready .key-ring-drop-layer {
    display: none !important;
  }

  body.narrow-story-ready .problem-hero,
  body.narrow-story-ready .narrow-detail-chrome,
  body.narrow-story-ready .narrow-detail-section {
    display: none !important;
  }

  body.narrow-story-ready.narrow-detail-open .narrow-covers,
  body.narrow-story-ready.narrow-detail-open .site-footer {
    display: none !important;
  }

  body.narrow-story-ready.narrow-detail-open .narrow-detail-chrome {
    display: grid !important;
  }

  body.narrow-story-ready.narrow-detail-open .narrow-detail-section.is-narrow-detail-active {
    display: block !important;
  }

  body.narrow-story-ready.narrow-detail-open .key-ring-stage.narrow-detail-section.is-narrow-detail-active {
    display: grid !important;
  }

  body.narrow-story-ready .narrow-detail-section.is-narrow-detail-active,
  body.narrow-story-ready .narrow-detail-section.is-narrow-detail-active .reveal,
  body.narrow-story-ready .narrow-detail-section.is-narrow-detail-active [data-reveal] {
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* The faithful comparison is a focused story, never a dense overview cover. */
  body.narrow-story-ready .signin-story {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--deep);
  }

  body.narrow-story-ready .signin-story__comparison {
    display: block;
  }

  body.narrow-story-ready .signin-panel {
    display: flex;
    min-height: var(--narrow-stop);
    padding: clamp(1.5rem, 5.5vw, 2.15rem) max(var(--gutter), var(--safe-right)) clamp(1.75rem, 6vw, 2.5rem) max(var(--gutter), var(--safe-left));
    scroll-margin-top: var(--narrow-header);
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.narrow-story-ready .signin-panel--identity {
    background: var(--deep);
    --identity-fill-height: 100% !important;
    --identity-heading-opacity: 1 !important;
    --identity-summary-opacity: 1 !important;
    --identity-copy-opacity: 1 !important;
    --identity-login-opacity: 1 !important;
  }

  body.narrow-story-ready .signin-panel--identity::before {
    display: none;
  }

  body.narrow-story-ready .signin-panel--mementom {
    background: var(--blue);
  }

  body.narrow-story-ready .signin-panel--mementom .signin-panel__label {
    color: var(--blue-light);
  }

  body.narrow-story-ready .signin-panel--mementom .signin-panel__title {
    color: var(--white);
  }

  body.narrow-story-ready .signin-panel--mementom .signin-panel__summary {
    color: rgba(255, 255, 255, 0.8);
  }

  body.narrow-story-ready .signin-panel__label {
    margin-bottom: 0.75rem;
  }

  body.narrow-story-ready .signin-panel__title {
    max-width: 12ch;
    font-size: clamp(2.15rem, 9.5vw, 3rem);
    line-height: 0.98;
  }

  body.narrow-story-ready .signin-panel__summary {
    min-height: 0;
    margin: 1rem 0 0;
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.48;
  }

  body.narrow-story-ready .signin-panel .familiar-login,
  body.narrow-story-ready .signin-panel .memory-login {
    width: min(100%, 430px);
    margin: clamp(0.7rem, 2.4vh, 1.15rem) auto 0;
    padding: clamp(1rem, 4.2vw, 1.4rem);
    border-radius: 16px;
  }

  body.narrow-story-ready .signin-panel--identity .familiar-login {
    opacity: var(--narrow-identity-login) !important;
    transform: translateY(calc((1 - var(--narrow-identity-login)) * 14px));
    transition: none;
    will-change: opacity, transform;
  }

  body.narrow-story-ready .signin-panel--mementom .memory-login {
    opacity: var(--narrow-answer-login) !important;
    transform: translateY(calc((1 - var(--narrow-answer-login)) * 14px));
    transition: none;
    will-change: opacity, transform;
  }

  body.narrow-story-ready .signin-panel .login-card__heading {
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  body.narrow-story-ready .signin-panel .login-card__heading img,
  body.narrow-story-ready .signin-panel .familiar-login__mark {
    width: 2.6rem;
    height: 2.6rem;
  }

  body.narrow-story-ready .signin-panel .login-card__heading strong {
    font-size: clamp(1.05rem, 4.8vw, 1.3rem);
  }

  body.narrow-story-ready .signin-panel .familiar-login__field,
  body.narrow-story-ready .signin-panel .memory-login__step {
    margin-top: 0.75rem;
  }

  body.narrow-story-ready .signin-panel .familiar-login__field b,
  body.narrow-story-ready .signin-panel .memory-login__phrase {
    min-height: 44px;
    padding: 0.65rem 0.8rem;
  }

  body.narrow-story-ready .signin-panel .familiar-login__submit,
  body.narrow-story-ready .signin-panel .login-card__continue {
    min-height: 48px;
    margin-top: 0.9rem;
    padding: 0.72rem 0.85rem;
  }

  body.narrow-story-ready .signin-panel .familiar-login__divider {
    margin: 0.85rem 0 0.7rem;
  }

  body.narrow-story-ready .signin-panel .familiar-login__providers {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  body.narrow-story-ready .signin-panel .familiar-login__providers div {
    min-height: 44px;
    padding: 0.4rem 0.2rem;
    font-size: clamp(0.6rem, 2.45vw, 0.72rem);
  }

  body.narrow-story-ready .signin-panel .memory-login__photo {
    grid-template-columns: clamp(70px, 22vw, 94px) minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 88px;
    padding: 0.65rem;
  }

  body.narrow-story-ready .signin-panel .memory-login > p {
    margin-top: 0.7rem;
  }

  /* Mobile keeps the complete problem-first narrative in calm, vertical chapters. */
  body.narrow-story-ready .narrow-covers {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    background: var(--paper);
  }

  body.narrow-story-ready .narrow-cover {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-rows: auto minmax(14rem, 1fr);
    min-height: min(var(--narrow-stop), 48rem);
    overflow: hidden;
    scroll-margin-top: var(--narrow-header);
    scroll-snap-align: start;
    scroll-snap-stop: normal;
  }

  body.narrow-story-ready .narrow-cover__copy {
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: min(100%, 430px);
    min-width: 0;
    max-width: 100%;
    margin: 0 auto;
    padding: clamp(2rem, 7vw, 3rem) max(var(--gutter), var(--safe-right)) 1rem max(var(--gutter), var(--safe-left));
  }

  body.narrow-story-ready .narrow-cover__kicker {
    margin: 0 0 0.85rem;
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  body.narrow-story-ready .narrow-cover h1,
  body.narrow-story-ready .narrow-cover h2 {
    max-width: 13ch;
    margin: 0;
    color: inherit;
    font-size: clamp(2.25rem, 9.5vw, 3.2rem);
    letter-spacing: -0.055em;
    line-height: 0.98;
    overflow-wrap: anywhere;
  }

  body.narrow-story-ready .narrow-cover__summary {
    max-width: 34rem;
    margin: 0.95rem 0 0;
    font-size: clamp(0.98rem, 4vw, 1.08rem);
    line-height: 1.48;
  }

  body.narrow-story-ready .narrow-cover__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 48px;
    margin-top: 0.85rem;
    color: inherit;
    font-size: 1rem;
    font-weight: 800;
    text-decoration: none;
  }

  body.narrow-story-ready .narrow-cover__action::after {
    position: absolute;
    right: 0;
    bottom: 0.42rem;
    left: 0;
    height: 1px;
    background: currentColor;
    content: "";
    opacity: 0.72;
  }

  body.narrow-story-ready .narrow-cover__action svg,
  body.narrow-story-ready .narrow-more svg,
  body.narrow-story-ready .narrow-detail-chrome svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  body.narrow-story-ready .narrow-cover__action:focus-visible,
  body.narrow-story-ready .narrow-more a:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 4px;
  }

  body.narrow-story-ready .narrow-cover--problem {
    min-height: min(var(--narrow-stop), 48rem);
    background: var(--deep);
    color: var(--white);
  }

  body.narrow-story-ready .narrow-cover--problem .narrow-cover__kicker {
    color: rgba(255, 255, 255, 0.62);
  }

  body.narrow-story-ready .narrow-cover--problem .narrow-cover__summary {
    color: rgba(255, 255, 255, 0.74);
  }

  body.narrow-story-ready .narrow-cover--problem .narrow-cover__action,
  body.narrow-story-ready .narrow-cover--value .narrow-cover__action {
    color: var(--blue-light);
  }

  body.narrow-story-ready .narrow-cover__visual {
    align-self: center;
    justify-self: center;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    pointer-events: none;
  }

  body.narrow-story-ready .narrow-cover__visual--identity {
    align-self: end;
    padding: 0 max(0.9rem, var(--safe-right)) clamp(1.5rem, 6vw, 2.5rem) max(0.9rem, var(--safe-left));
  }

  body.narrow-story-ready .identity-trace {
    position: relative;
    width: min(100%, 25rem);
    aspect-ratio: 360 / 330;
    margin: 0 auto;
  }

  body.narrow-story-ready .identity-trace__lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: rgba(237, 107, 79, 0.82);
    stroke-linecap: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
  }

  body.narrow-story-ready .identity-trace__providers,
  body.narrow-story-ready .identity-trace__sites {
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
    align-items: center;
  }

  body.narrow-story-ready .identity-trace__providers {
    left: 0;
    width: 27.5%;
    grid-template-rows: repeat(5, 1fr);
    gap: 0.35rem;
    padding: 0.1rem 0;
  }

  body.narrow-story-ready .identity-trace__providers span {
    display: flex;
    align-items: center;
    gap: 0.32rem;
    min-height: 2.35rem;
    padding: 0.35rem 0.38rem;
    border: 1px solid rgba(158, 194, 211, 0.35);
    border-radius: 0.52rem;
    background: #102a3a;
    color: rgba(255, 255, 255, 0.92);
    font-size: clamp(0.5rem, 2.15vw, 0.68rem);
    font-weight: 800;
    line-height: 1;
  }

  body.narrow-story-ready .identity-trace__providers i {
    position: relative;
    flex: 0 0 1.15rem;
    display: grid;
    width: 1.15rem;
    height: 1.15rem;
    place-items: center;
    border-radius: 50%;
    background: var(--white);
    color: var(--deep);
    font-family: Arial, sans-serif;
    font-size: 0.69rem;
    font-style: normal;
    font-weight: 900;
  }

  body.narrow-story-ready .identity-trace__mail::before {
    width: 0.65rem;
    height: 0.47rem;
    border: 1.5px solid currentColor;
    border-radius: 1px;
    content: "";
  }

  body.narrow-story-ready .identity-trace__mail::after {
    position: absolute;
    top: 0.31rem;
    width: 0.48rem;
    height: 0.48rem;
    border-right: 1.4px solid currentColor;
    border-bottom: 1.4px solid currentColor;
    content: "";
    transform: rotate(45deg);
  }

  body.narrow-story-ready .identity-trace__phone::before {
    width: 0.42rem;
    height: 0.72rem;
    border: 1.4px solid currentColor;
    border-radius: 0.1rem;
    content: "";
  }

  body.narrow-story-ready .identity-trace__apple::before {
    content: "●";
    font-size: 0.56rem;
    transform: translateY(-0.08rem);
  }

  body.narrow-story-ready .identity-trace__apple::after {
    position: absolute;
    width: 0.47rem;
    height: 0.58rem;
    border-radius: 55% 45% 50% 50%;
    background: currentColor;
    content: "";
    transform: translateY(0.12rem);
  }

  body.narrow-story-ready .identity-trace__google {
    background: conic-gradient(from -35deg, #4285f4 0 26%, #34a853 0 46%, #fbbc05 0 67%, #ea4335 0 82%, #4285f4 0) !important;
    color: var(--white) !important;
  }

  body.narrow-story-ready .identity-trace__facebook {
    background: #1877f2 !important;
    color: var(--white) !important;
  }

  body.narrow-story-ready .identity-trace__address {
    position: absolute;
    top: 27%;
    left: 40.2%;
    display: grid;
    width: 19.7%;
    min-height: 46%;
    padding: 0.5rem 0.28rem;
    place-items: center;
    border: 2px solid var(--coral);
    border-radius: 0.65rem;
    background: #143345;
    text-align: center;
  }

  body.narrow-story-ready .identity-trace__address small {
    color: var(--coral);
    font-size: clamp(0.42rem, 1.7vw, 0.56rem);
    font-weight: 900;
    letter-spacing: 0.06em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  body.narrow-story-ready .identity-trace__address strong {
    overflow-wrap: anywhere;
    color: var(--white);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(0.43rem, 1.8vw, 0.58rem);
    line-height: 1.25;
  }

  body.narrow-story-ready .identity-trace__address svg {
    width: 2.3rem;
    max-width: 72%;
    fill: none;
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 2;
  }

  body.narrow-story-ready .identity-trace__address span {
    width: 0.48rem;
    height: 0.48rem;
    border-radius: 50%;
    background: var(--coral);
  }

  body.narrow-story-ready .identity-trace__sites {
    right: 0;
    width: 27%;
    grid-template-rows: repeat(5, 1fr);
    gap: 0.35rem;
    padding: 0.1rem 0;
  }

  body.narrow-story-ready .identity-trace__site {
    position: relative;
    display: grid;
    grid-template-columns: 38% 1fr;
    grid-template-rows: 1fr auto auto;
    align-content: end;
    gap: 0.18rem 0.28rem;
    min-height: 2.35rem;
    padding: 0.82rem 0.32rem 0.3rem;
    border: 1px solid rgba(158, 194, 211, 0.34);
    border-radius: 0.46rem;
    background: #102a3a;
    overflow: hidden;
  }

  body.narrow-story-ready .identity-trace__sites i {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 0.7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }

  body.narrow-story-ready .identity-trace__sites i::before {
    position: absolute;
    top: 0.25rem;
    left: 0.32rem;
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0.34rem 0 rgba(158, 194, 211, 0.8);
    content: "";
  }

  body.narrow-story-ready .identity-trace__sites b {
    display: block;
    grid-column: 2;
    width: 88%;
    height: 0.16rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.4);
  }

  body.narrow-story-ready .identity-trace__sites b:last-child {
    width: 55%;
  }

  body.narrow-story-ready .identity-trace__sites em {
    grid-row: 1 / 4;
    width: 100%;
    height: 100%;
    min-height: 1.2rem;
    border-radius: 0.18rem;
    background: rgba(158, 194, 211, 0.55);
  }

  body.narrow-story-ready .identity-trace__site--shop em {
    background: linear-gradient(145deg, var(--mustard) 0 50%, #d96b55 50%);
  }

  body.narrow-story-ready .identity-trace__site--media em {
    background: radial-gradient(circle at 50% 48%, var(--white) 0 15%, transparent 17%), linear-gradient(135deg, #759bb2, #294f6c);
  }

  body.narrow-story-ready .identity-trace__site--story em {
    background: linear-gradient(0deg, #8bb89f 0 36%, transparent 36%), linear-gradient(140deg, #e8d7bb 0 50%, #75a4bc 50%);
  }

  body.narrow-story-ready .identity-trace__site--chat em {
    background: radial-gradient(circle at 28% 35%, #ed6b4f 0 16%, transparent 17%), radial-gradient(circle at 70% 64%, #9ec2d3 0 16%, transparent 17%), #f3f2ee;
  }

  body.narrow-story-ready .identity-trace__site--grid em {
    background: repeating-linear-gradient(90deg, #294f6c 0 20%, transparent 20% 26%), repeating-linear-gradient(0deg, #9ec2d3 0 24%, #365d78 24% 31%);
  }

  body.narrow-story-ready .narrow-cover--answer {
    min-height: min(var(--narrow-stop), 48rem);
    background: var(--blue);
    color: var(--white);
  }

  body.narrow-story-ready .narrow-cover--answer .narrow-cover__copy {
    padding-bottom: 1rem;
  }

  body.narrow-story-ready .narrow-cover--answer .narrow-cover__kicker {
    color: var(--blue-light);
  }

  body.narrow-story-ready .narrow-cover--answer .narrow-cover__summary {
    color: rgba(255, 255, 255, 0.82);
  }

  body.narrow-story-ready .narrow-cover__visual--answer {
    align-self: end;
    padding: 0 max(var(--gutter), var(--safe-right)) clamp(1.6rem, 6vw, 2.5rem) max(var(--gutter), var(--safe-left));
  }

  body.narrow-story-ready .memory-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.42rem;
    width: min(100%, 22.5rem);
    margin: 0 auto;
    padding: clamp(0.8rem, 3.6vw, 1.1rem);
    border: 1.5px solid rgba(255, 255, 255, 0.76);
    border-radius: 1.15rem;
    background: rgba(15, 45, 63, 0.12);
    box-shadow: 0 22px 45px rgba(7, 26, 39, 0.18);
  }

  body.narrow-story-ready .memory-flow__title {
    color: var(--white);
    font-size: 0.82rem;
    font-weight: 850;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  body.narrow-story-ready .memory-flow__rule {
    height: 1px;
    margin-bottom: 0.15rem;
    background: rgba(255, 255, 255, 0.38);
  }

  body.narrow-story-ready .memory-flow__label {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.narrow-story-ready .memory-flow__photo {
    height: clamp(5.2rem, 23vw, 7rem);
    padding: 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.52);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.96);
  }

  body.narrow-story-ready .memory-flow__photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 0.4rem;
    object-fit: cover;
  }

  body.narrow-story-ready .memory-flow__operator {
    display: grid;
    width: 1.5rem;
    height: 1.5rem;
    margin: -0.12rem auto;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.58);
    border-radius: 50%;
    color: var(--white);
    font-size: 0.9rem;
    font-weight: 850;
  }

  body.narrow-story-ready .memory-flow__phrase {
    min-height: 3rem;
    padding: 0.82rem;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 0.65rem;
    background: rgba(255, 255, 255, 0.96);
    color: var(--deep);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(0.72rem, 3.1vw, 0.9rem);
    letter-spacing: 0.04em;
  }

  body.narrow-story-ready .memory-flow__result {
    display: grid;
    gap: 0.2rem;
    padding: 0.72rem 0.82rem;
    border-radius: 0.65rem;
    background: var(--deep);
    color: var(--white);
  }

  body.narrow-story-ready .memory-flow__result strong {
    font-size: 0.86rem;
  }

  body.narrow-story-ready .memory-flow__result small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.65rem;
    line-height: 1.35;
  }

  body.narrow-story-ready .narrow-cover--key,
  body.narrow-story-ready .narrow-cover--ring {
    grid-template-rows: auto minmax(13rem, 1fr);
    min-height: min(var(--narrow-stop), 49rem);
    color: var(--deep);
  }

  body.narrow-story-ready .narrow-cover--key {
    background: var(--paper);
  }

  body.narrow-story-ready .narrow-cover--ring {
    background: #dce8ed;
  }

  body.narrow-story-ready .narrow-cover--key .narrow-cover__copy,
  body.narrow-story-ready .narrow-cover--ring .narrow-cover__copy {
    padding-bottom: 0.75rem;
  }

  body.narrow-story-ready .narrow-cover--key .narrow-cover__kicker,
  body.narrow-story-ready .narrow-cover--ring .narrow-cover__kicker {
    color: var(--blue-deep);
  }

  body.narrow-story-ready .story-house-key {
    --story-key-accent: #365d78;
    display: block;
    width: auto;
    height: 100%;
    overflow: visible;
  }

  body.narrow-story-ready .story-house-key--sunset {
    --story-key-accent: #d96b55;
  }

  body.narrow-story-ready .story-house-key--harbor {
    --story-key-accent: #ed6b4f;
  }

  body.narrow-story-ready .story-house-key--sky {
    --story-key-accent: #77acc8;
  }

  body.narrow-story-ready .story-house-key--garden {
    --story-key-accent: #8bb89f;
  }

  body.narrow-story-ready .key-making {
    position: relative;
    width: min(100%, 25rem);
    height: clamp(20rem, 96vw, 26rem);
    margin: 0 auto;
  }

  body.narrow-story-ready .key-making__inputs {
    position: absolute;
    z-index: 2;
    top: 11%;
    left: max(var(--gutter), var(--safe-left));
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.36rem;
    align-items: center;
    width: 43%;
  }

  body.narrow-story-ready .key-making__inputs > span {
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(54, 93, 120, 0.28);
    border-radius: 0.58rem;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 10px 26px rgba(7, 26, 39, 0.08);
  }

  body.narrow-story-ready .key-making__photo img {
    width: 100%;
    height: 3.4rem;
    object-fit: cover;
  }

  body.narrow-story-ready .key-making__inputs small {
    padding: 0.34rem 0.42rem;
    color: var(--blue-deep);
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  body.narrow-story-ready .key-making__phrase strong {
    padding: 0.54rem 0.42rem 0;
    color: var(--deep);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: clamp(0.52rem, 2.3vw, 0.66rem);
    line-height: 1.35;
  }

  body.narrow-story-ready .key-making__inputs > b {
    color: var(--blue-deep);
    font-size: 1rem;
  }

  body.narrow-story-ready .key-making__inputs > b:last-child {
    grid-column: 1 / 3;
    justify-self: end;
    margin: 0.15rem 0.3rem 0 0;
    font-size: 1.55rem;
  }

  body.narrow-story-ready .key-making__key {
    position: absolute;
    right: 3%;
    bottom: 4%;
    height: 92%;
    transform: rotate(3deg);
  }

  body.narrow-story-ready .narrow-cover__visual--ring {
    align-self: end;
    padding: 0 max(0.7rem, var(--safe-right)) 0 max(0.7rem, var(--safe-left));
  }

  body.narrow-story-ready .story-key-ring {
    position: relative;
    width: min(100%, 25rem);
    height: clamp(21rem, 100vw, 28rem);
    margin: 0 auto;
  }

  body.narrow-story-ready .story-key-ring__loop {
    position: absolute;
    top: 3%;
    left: 50%;
    width: 53%;
    aspect-ratio: 1;
    border: clamp(0.58rem, 2.8vw, 0.8rem) solid var(--blue-deep);
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.85), 0 18px 36px rgba(7, 26, 39, 0.1);
    transform: translateX(-50%);
  }

  body.narrow-story-ready .story-key-ring__key {
    position: absolute;
    bottom: 7%;
    height: 61%;
    transform-origin: 50% 8%;
  }

  body.narrow-story-ready .story-key-ring__key::before {
    position: absolute;
    z-index: 2;
    top: 2.2%;
    left: 50%;
    width: 1.1rem;
    aspect-ratio: 1;
    border: 0.28rem solid var(--blue-deep);
    border-radius: 50%;
    content: "";
    transform: translateX(-50%);
  }

  body.narrow-story-ready .story-key-ring__key--mountain {
    left: 27%;
    transform: rotate(7deg);
  }

  body.narrow-story-ready .story-key-ring__key--sunset {
    right: 24%;
    transform: rotate(-7deg);
  }

  body.narrow-story-ready .narrow-cover--value {
    min-height: min(var(--narrow-stop), 48rem);
    background: var(--deep);
    color: var(--white);
  }

  body.narrow-story-ready .narrow-cover--value .narrow-cover__kicker {
    color: var(--blue-light);
  }

  body.narrow-story-ready .narrow-cover--value .narrow-cover__summary {
    color: rgba(255, 255, 255, 0.74);
  }

  body.narrow-story-ready .narrow-cover__visual--relationships {
    align-self: end;
    padding: 0 max(0.7rem, var(--safe-right)) clamp(1.5rem, 5vw, 2.2rem) max(0.7rem, var(--safe-left));
  }

  body.narrow-story-ready .relationship-story {
    position: relative;
    width: min(100%, 25rem);
    aspect-ratio: 1;
    margin: 0 auto;
  }

  body.narrow-story-ready .relationship-story__lanes {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: none;
    stroke-linecap: round;
    stroke-width: 3;
  }

  body.narrow-story-ready .relationship-story__lane--harbor {
    stroke: var(--coral);
  }

  body.narrow-story-ready .relationship-story__lane--northstar {
    stroke: var(--blue-light);
  }

  body.narrow-story-ready .relationship-story__lane--fieldnote {
    stroke: #8bb89f;
  }

  body.narrow-story-ready .relationship-story__ring {
    position: absolute;
    top: 43%;
    left: 3%;
    width: 24%;
    aspect-ratio: 1;
  }

  body.narrow-story-ready .relationship-story__ring > span {
    position: absolute;
    inset: 0;
    border: clamp(0.34rem, 1.8vw, 0.5rem) solid var(--blue-light);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 12px 24px rgba(0, 0, 0, 0.18);
  }

  body.narrow-story-ready .relationship-story__ring-key {
    position: absolute;
    top: 72%;
    width: 23%;
    height: 70%;
    border: 2px solid var(--blue-light);
    border-radius: 0.18rem 0.18rem 0.35rem 0.35rem;
    background: #d9e1e4;
    transform-origin: 50% 0;
  }

  body.narrow-story-ready .relationship-story__ring-key--one {
    left: 19%;
    transform: rotate(18deg);
  }

  body.narrow-story-ready .relationship-story__ring-key--two {
    left: 39%;
    transform: rotate(2deg);
  }

  body.narrow-story-ready .relationship-story__ring-key--three {
    left: 58%;
    transform: rotate(-15deg);
  }

  body.narrow-story-ready .relationship-story__key {
    position: absolute;
    left: 40.5%;
    height: 21%;
    transform: rotate(90deg);
  }

  body.narrow-story-ready .relationship-story__key--harbor {
    top: 6%;
  }

  body.narrow-story-ready .relationship-story__key--northstar {
    top: 39.5%;
  }

  body.narrow-story-ready .relationship-story__key--fieldnote {
    top: 73%;
  }

  body.narrow-story-ready .relationship-story__site {
    position: absolute;
    right: 0;
    display: grid;
    grid-template-rows: auto 1fr;
    width: 39%;
    height: 27%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 0.65rem;
    background: #f8f7f2;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.16);
    color: var(--deep);
  }

  body.narrow-story-ready .relationship-story__site--harbor {
    top: 0;
  }

  body.narrow-story-ready .relationship-story__site--northstar {
    top: 36.5%;
  }

  body.narrow-story-ready .relationship-story__site--fieldnote {
    top: 73%;
  }

  body.narrow-story-ready .relationship-story__site > i {
    position: absolute;
    top: 0.42rem;
    right: 0.45rem;
    width: 0.2rem;
    height: 0.2rem;
    border-radius: 50%;
    background: var(--coral);
    box-shadow: 0.36rem 0 var(--mustard), 0.72rem 0 #8bb89f;
  }

  body.narrow-story-ready .relationship-story__site > strong {
    padding: 0.72rem 0.48rem 0.28rem;
    border-bottom: 1px solid rgba(7, 26, 39, 0.12);
    font-size: clamp(0.5rem, 2vw, 0.64rem);
    line-height: 1;
  }

  body.narrow-story-ready .relationship-story__site-content {
    display: grid;
    grid-template-columns: 38% 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 0.2rem 0.35rem;
    padding: 0.4rem;
  }

  body.narrow-story-ready .relationship-story__site-content b {
    grid-row: 1 / 4;
    border-radius: 0.2rem;
    background: linear-gradient(140deg, #f1c453 0 50%, #d96b55 50%);
  }

  body.narrow-story-ready .relationship-story__site--northstar b {
    background: linear-gradient(140deg, #e1eff5 0 52%, #365d78 52%);
  }

  body.narrow-story-ready .relationship-story__site--fieldnote b {
    background: linear-gradient(140deg, #d6dfca 0 52%, #8bb89f 52%);
  }

  body.narrow-story-ready .relationship-story__site-content em {
    align-self: center;
    width: 88%;
    height: 0.18rem;
    border-radius: 1rem;
    background: rgba(7, 26, 39, 0.28);
  }

  body.narrow-story-ready .narrow-cover--demo {
    grid-template-rows: auto 1fr;
    min-height: min(var(--narrow-stop), 46rem);
    border-top: 10px solid var(--coral);
    background: #f4efe5;
    color: var(--deep);
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__copy {
    padding-bottom: 1rem;
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__kicker {
    color: #9d4c3c;
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__action {
    justify-content: center;
    width: 100%;
    min-height: 54px;
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 0.35rem;
    background: var(--blue-deep);
    color: var(--white);
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__action::after {
    display: none;
  }

  body.narrow-story-ready .narrow-cover__visual--harbor {
    align-self: end;
    padding: 0 max(var(--gutter), var(--safe-right)) clamp(1.6rem, 6vw, 2.5rem) max(var(--gutter), var(--safe-left));
    pointer-events: none;
  }

  body.narrow-story-ready .harbor-browser {
    width: min(100%, 22.5rem);
    margin: 0 auto;
    overflow: hidden;
    border: 1.5px solid var(--deep);
    border-radius: 1.05rem;
    background: var(--white);
    box-shadow: 0 24px 45px rgba(7, 26, 39, 0.15);
  }

  body.narrow-story-ready .harbor-browser__chrome {
    display: flex;
    align-items: center;
    gap: 0.28rem;
    height: 1.35rem;
    padding: 0 0.55rem;
    border-bottom: 1px solid rgba(7, 26, 39, 0.18);
    background: #ecebe6;
  }

  body.narrow-story-ready .harbor-browser__chrome span {
    width: 0.36rem;
    height: 0.36rem;
    border-radius: 50%;
    background: var(--coral);
  }

  body.narrow-story-ready .harbor-browser__chrome span:nth-child(2) {
    background: var(--mustard);
  }

  body.narrow-story-ready .harbor-browser__chrome span:nth-child(3) {
    background: #8bb89f;
  }

  body.narrow-story-ready .harbor-browser__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 3.2rem;
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid rgba(7, 26, 39, 0.12);
  }

  body.narrow-story-ready .harbor-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  body.narrow-story-ready .harbor-brand > i {
    position: relative;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--deep);
  }

  body.narrow-story-ready .harbor-brand > i::before {
    position: absolute;
    top: 0.35rem;
    left: 0.55rem;
    width: 1px;
    height: 1.05rem;
    background: var(--deep);
    content: "";
  }

  body.narrow-story-ready .harbor-brand > i span {
    position: absolute;
    top: 0.38rem;
    left: 0.58rem;
    border-top: 0.3rem solid transparent;
    border-bottom: 0.3rem solid transparent;
    border-left: 0.66rem solid var(--coral);
  }

  body.narrow-story-ready .harbor-brand > span {
    display: grid;
  }

  body.narrow-story-ready .harbor-brand strong {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
    line-height: 1;
  }

  body.narrow-story-ready .harbor-brand small {
    font-size: 0.45rem;
    font-weight: 900;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  body.narrow-story-ready .harbor-browser__header > b,
  body.narrow-story-ready .harbor-browser__header > b::before,
  body.narrow-story-ready .harbor-browser__header > b::after {
    width: 1.15rem;
    height: 1px;
    background: var(--deep);
  }

  body.narrow-story-ready .harbor-browser__header > b {
    position: relative;
  }

  body.narrow-story-ready .harbor-browser__header > b::before,
  body.narrow-story-ready .harbor-browser__header > b::after {
    position: absolute;
    left: 0;
    content: "";
  }

  body.narrow-story-ready .harbor-browser__header > b::before {
    top: -0.32rem;
  }

  body.narrow-story-ready .harbor-browser__header > b::after {
    top: 0.32rem;
  }

  body.narrow-story-ready .harbor-browser__intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.8rem 0.72rem 0.65rem;
  }

  body.narrow-story-ready .harbor-browser__intro strong {
    max-width: 9ch;
    font-family: Georgia, serif;
    font-size: clamp(1.35rem, 6vw, 1.75rem);
    font-weight: 500;
    line-height: 0.94;
  }

  body.narrow-story-ready .harbor-browser__intro small {
    color: var(--muted);
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
  }

  body.narrow-story-ready .harbor-browser__lot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 0 0.72rem 0.85rem;
  }

  body.narrow-story-ready .harbor-browser__image {
    grid-column: 1 / 3;
    display: block;
    height: clamp(7.4rem, 34vw, 9rem);
    margin-bottom: 0.5rem;
    border: 1px solid rgba(7, 26, 39, 0.15);
    background-image: url("./assets/harbor-public-lots.webp");
    background-position: left center;
    background-size: 300% 100%;
  }

  body.narrow-story-ready .harbor-browser__lot small {
    grid-column: 1 / 3;
    color: #9d4c3c;
    font-size: 0.52rem;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  body.narrow-story-ready .harbor-browser__lot > strong {
    font-family: Georgia, serif;
    font-size: 1.05rem;
    font-weight: 500;
  }

  body.narrow-story-ready .harbor-browser__lot p {
    margin: 0;
    font-size: 0.74rem;
  }

  body.narrow-story-ready .harbor-browser__lot > b {
    grid-column: 1 / 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 2.5rem;
    margin-top: 0.6rem;
    padding: 0.6rem 0.7rem;
    border-radius: 0.3rem;
    background: var(--blue-deep);
    color: var(--white);
    font-size: 0.67rem;
  }

  body.narrow-story-ready .narrow-more {
    display: grid;
    width: 100%;
    padding: clamp(2.25rem, 8vw, 3.5rem) max(var(--gutter), var(--safe-right)) calc(2rem + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
    background: var(--white);
  }

  body.narrow-story-ready .narrow-more > p {
    margin: 0 0 0.75rem;
    color: var(--muted);
    font-size: 0.9rem;
  }

  body.narrow-story-ready .narrow-more a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "kicker icon" "title icon";
    align-items: center;
    min-height: 76px;
    padding: 0.9rem 0;
    border-top: 1px solid rgba(7, 26, 39, 0.14);
    color: var(--deep);
    text-decoration: none;
  }

  body.narrow-story-ready .narrow-more a > span {
    grid-area: kicker;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
  }

  body.narrow-story-ready .narrow-more a > strong {
    grid-area: title;
    font-size: 1.05rem;
  }

  body.narrow-story-ready .narrow-more a > svg {
    grid-area: icon;
  }

  body.narrow-story-ready .site-footer {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.narrow-story-ready .site-footer > * {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  body.narrow-story-ready .site-footer .brand {
    width: auto;
  }

  body.narrow-story-ready .site-footer > a:not(.brand) {
    grid-column: 1;
  }

  body.narrow-story-ready .site-footer a:not(.brand) {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  body.narrow-story-ready .site-footer .brand {
    min-height: 48px;
  }

  /* Focused mobile routes keep every deeper idea out of the overview scroll. */
  body.narrow-story-ready .narrow-detail-chrome {
    position: sticky;
    z-index: 47;
    top: var(--narrow-header);
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 0.75rem;
    min-height: 64px;
    padding: 0.5rem max(var(--gutter), var(--safe-right)) 0.5rem max(var(--gutter), var(--safe-left));
    border-bottom: 1px solid rgba(7, 26, 39, 0.14);
    background: color-mix(in srgb, var(--paper) 96%, transparent);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }

  body.narrow-story-ready .narrow-detail-chrome__back {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.55rem 0.7rem 0.55rem 0;
    border: 0;
    background: transparent;
    color: var(--blue-deep);
    font: inherit;
    font-size: 0.88rem;
    font-weight: 850;
    cursor: pointer;
  }

  body.narrow-story-ready .narrow-detail-chrome__title {
    justify-self: end;
    max-width: 13rem;
    color: var(--muted);
    font-size: 0.74rem;
    line-height: 1.25;
    text-align: right;
  }

  body.narrow-story-ready .narrow-detail-chrome__back:focus-visible {
    outline: 3px solid var(--coral);
    outline-offset: 3px;
  }

  body.narrow-story-ready .narrow-detail-chrome__title:focus {
    outline: 0;
  }

  /* Each Learn more route opens with the same editorial image-and-copy system
   * as the narrow overview, then continues into the real product experience. */
  body.narrow-story-ready .narrow-topic-hero {
    width: 100%;
    min-height: calc(100svh - var(--narrow-header) - 64px);
    padding: clamp(2.5rem, 10vw, 4.5rem) max(var(--gutter), var(--safe-right)) clamp(3rem, 12vw, 5rem) max(var(--gutter), var(--safe-left));
    overflow: hidden;
  }

  body.narrow-story-ready .narrow-topic-hero__copy,
  body.narrow-story-ready .narrow-topic-hero__visual {
    width: min(100%, 430px);
    margin-inline: auto;
  }

  body.narrow-story-ready .narrow-topic-hero__kicker {
    margin: 0;
    color: var(--blue);
    font-size: 0.78rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  body.narrow-story-ready .narrow-topic-hero h1 {
    max-width: 12ch;
    margin: 1.35rem 0 0;
    color: var(--deep);
    font-size: clamp(2.4rem, 11vw, 4.15rem);
    font-weight: 750;
    letter-spacing: -0.045em;
    line-height: 1.02;
    text-wrap: balance;
  }

  body.narrow-story-ready .narrow-topic-hero__summary,
  body.narrow-story-ready .narrow-topic-hero__emphasis {
    max-width: 34rem;
    margin: 1.4rem 0 0;
    color: var(--ink);
    font-size: clamp(1.02rem, 4.2vw, 1.22rem);
    line-height: 1.55;
  }

  body.narrow-story-ready .narrow-topic-hero__emphasis {
    padding-left: 1rem;
    border-left: 4px solid var(--coral);
    color: var(--deep);
    font-weight: 750;
  }

  body.narrow-story-ready .narrow-topic-hero__steps {
    display: grid;
    gap: 0;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: narrow-topic-step;
  }

  body.narrow-story-ready .narrow-topic-hero__steps li {
    position: relative;
    display: grid;
    gap: 0.35rem;
    min-height: 72px;
    padding: 1rem 0 1rem 3.25rem;
    border-top: 1px solid rgba(7, 26, 39, 0.18);
    counter-increment: narrow-topic-step;
  }

  body.narrow-story-ready .narrow-topic-hero__steps li::before {
    position: absolute;
    top: 1rem;
    left: 0;
    display: grid;
    width: 2.2rem;
    height: 2.2rem;
    border: 2px solid currentColor;
    border-radius: 50%;
    color: var(--blue-deep);
    font-size: 0.86rem;
    font-weight: 850;
    content: counter(narrow-topic-step);
    place-items: center;
  }

  body.narrow-story-ready .narrow-topic-hero__steps strong,
  body.narrow-story-ready .narrow-topic-hero__steps span {
    display: block;
  }

  body.narrow-story-ready .narrow-topic-hero__steps strong {
    color: var(--deep);
    font-size: 1rem;
    line-height: 1.25;
  }

  body.narrow-story-ready .narrow-topic-hero__steps span {
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.45;
  }

  body.narrow-story-ready .narrow-topic-hero__visual {
    container-type: inline-size;
    position: relative;
    display: grid;
    min-height: 25rem;
    margin-top: 2.25rem;
    overflow: hidden;
    place-items: center;
  }

  body.narrow-story-ready .narrow-topic-hero__visual > img {
    display: block;
    max-width: none;
    height: auto;
  }

  body.narrow-story-ready .narrow-topic-hero--access {
    background: #365f7d;
  }

  body.narrow-story-ready .narrow-topic-hero--access .narrow-topic-hero__kicker,
  body.narrow-story-ready .narrow-topic-hero--access h1,
  body.narrow-story-ready .narrow-topic-hero--access .narrow-topic-hero__summary,
  body.narrow-story-ready .narrow-topic-hero--access .narrow-topic-hero__emphasis,
  body.narrow-story-ready .narrow-topic-hero--access .narrow-topic-hero__steps strong {
    color: #fff;
  }

  body.narrow-story-ready .narrow-topic-hero--access .narrow-topic-hero__steps li {
    border-color: rgba(255, 255, 255, 0.28);
  }

  body.narrow-story-ready .narrow-topic-hero--access .narrow-topic-hero__steps li::before,
  body.narrow-story-ready .narrow-topic-hero--access .narrow-topic-hero__steps span {
    color: rgba(255, 255, 255, 0.78);
  }

  body.narrow-story-ready .narrow-memory-pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.85rem;
    width: 100%;
    padding: 1.15rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 22px;
    color: #fff;
  }

  body.narrow-story-ready .narrow-memory-pair img {
    grid-column: 1 / -1;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 14px;
    object-fit: cover;
  }

  body.narrow-story-ready .narrow-memory-pair span {
    display: grid;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 50%;
    background: #fff;
    color: #4f9df0;
    font-size: 1.55rem;
    place-items: center;
  }

  body.narrow-story-ready .narrow-memory-pair strong {
    min-width: 0;
    padding: 0.9rem 1rem;
    border-radius: 12px;
    background: #fff;
    color: #2d567a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: clamp(0.92rem, 4vw, 1.06rem);
    font-weight: 500;
    overflow-wrap: anywhere;
  }

  body.narrow-story-ready .narrow-memory-pair b {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 11rem;
    padding: 1rem 1.4rem;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-radius: 18px;
    color: #fff;
    text-align: center;
  }

  body.narrow-story-ready .narrow-topic-hero--key,
  body.narrow-story-ready .narrow-topic-hero--marketplace {
    background: #f6f4f1;
  }

  body.narrow-story-ready .narrow-topic-hero__key-art {
    width: 64%;
    transform: translateY(-19%);
  }

  body.narrow-story-ready .narrow-topic-hero--ring {
    background: #dbe7ee;
  }

  body.narrow-story-ready .narrow-topic-hero__ring-art {
    width: 58%;
    transform: translateY(-8%);
  }

  body.narrow-story-ready .narrow-topic-hero--value {
    background: #061d2b;
  }

  body.narrow-story-ready .narrow-topic-hero--value .narrow-topic-hero__kicker {
    color: #8ab8d8;
  }

  body.narrow-story-ready .narrow-topic-hero--value h1,
  body.narrow-story-ready .narrow-topic-hero--value .narrow-topic-hero__summary,
  body.narrow-story-ready .narrow-topic-hero--value .narrow-topic-hero__emphasis,
  body.narrow-story-ready .narrow-topic-hero--value .narrow-topic-hero__steps strong {
    color: #fff;
  }

  body.narrow-story-ready .narrow-topic-hero--value .narrow-topic-hero__steps li {
    border-color: rgba(255, 255, 255, 0.22);
  }

  body.narrow-story-ready .narrow-topic-hero--value .narrow-topic-hero__steps li::before,
  body.narrow-story-ready .narrow-topic-hero--value .narrow-topic-hero__steps span {
    color: rgba(255, 255, 255, 0.72);
  }

  body.narrow-story-ready .narrow-topic-hero__value-art {
    position: absolute;
    top: -66cqi;
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  body.narrow-story-ready .narrow-topic-hero__value-figure {
    position: relative;
    display: grid;
    width: 100%;
    height: min(120cqi, 30rem);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 22px;
    place-items: center;
  }

  body.narrow-story-ready .narrow-topic-hero__value-figure figcaption {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    display: grid;
    gap: 0.2rem;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 16px;
    background: rgba(6, 29, 43, 0.88);
    color: #fff;
    line-height: 1.3;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  body.narrow-story-ready .narrow-topic-hero__value-figure figcaption strong,
  body.narrow-story-ready .narrow-topic-hero__value-figure figcaption span {
    display: block;
  }

  body.narrow-story-ready .narrow-topic-hero__value-figure figcaption strong {
    font-size: 1.05rem;
  }

  body.narrow-story-ready .narrow-topic-hero__value-figure figcaption span {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.92rem;
  }

  body.narrow-story-ready .narrow-topic-hero__marketplace-art {
    width: 100%;
    border: 2px solid var(--deep);
    border-radius: 24px;
    box-shadow: 0 20px 44px rgba(7, 26, 39, 0.12);
  }

  /* Blank-key route: one continuous blue field, then the two-key ring. */
  body.narrow-story-ready .physical-key-story {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: var(--blue);
  }

  body.narrow-story-ready .physical-key-story__canvas {
    display: grid;
    grid-template-rows: auto minmax(26rem, 1fr);
    width: 100%;
    min-height: var(--narrow-stop);
    margin: 0;
    overflow: visible;
    clip-path: none !important;
    background: var(--blue) !important;
    --key-stage-fill-height: 100% !important;
  }

  body.narrow-story-ready .physical-key-story__intro {
    grid-area: auto;
    width: 100%;
    margin: 0;
    padding: clamp(2.25rem, 8vw, 3.75rem) max(var(--gutter), var(--safe-right)) 0 max(var(--gutter), var(--safe-left));
  }

  body.narrow-story-ready .physical-key-story__intro > * {
    width: 100%;
  }

  body.narrow-story-ready .physical-key-story__intro .eyebrow {
    color: rgba(255, 255, 255, 0.72);
  }

  body.narrow-story-ready .physical-key-story__intro h2 {
    max-width: 9ch;
    color: var(--white);
    font-size: clamp(2.9rem, 13vw, 4.15rem);
  }

  body.narrow-story-ready .physical-key-story__intro > p:last-child {
    max-width: 31rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 4.3vw, 1.15rem);
  }

  body.narrow-story-ready .physical-key-build {
    grid-area: auto;
    width: 100%;
    min-height: 26rem;
    margin: 0;
    padding: 1rem max(var(--gutter), var(--safe-right)) 2rem max(var(--gutter), var(--safe-left));
    overflow: visible;
  }

  body.narrow-story-ready .physical-key__card-target {
    display: none;
  }

  body.narrow-story-ready .physical-key {
    top: 50%;
    left: 50%;
    width: min(66vw, 16rem);
    opacity: var(--narrow-key-build) !important;
    transform: translate(-50%, calc(-50% + ((1 - var(--narrow-key-build)) * 42px))) scale(calc(0.82 + (var(--narrow-key-build) * 0.18))) !important;
    will-change: opacity, transform;
  }

  body.narrow-story-ready .physical-key__memory--photo {
    opacity: clamp(0, calc((var(--narrow-key-build) - 0.12) * 4.5), 1) !important;
  }

  body.narrow-story-ready .physical-key__memory--phrase {
    opacity: clamp(0, calc((var(--narrow-key-build) - 0.34) * 4.5), 1) !important;
  }

  body.narrow-story-ready .physical-key figcaption strong {
    color: var(--white);
  }

  body.narrow-story-ready .physical-key figcaption span {
    color: rgba(255, 255, 255, 0.72);
  }

  body.narrow-story-ready .narrow-key-flight {
    position: fixed;
    z-index: 46;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    transform-origin: center center;
    will-change: transform, opacity;
  }

  body.narrow-story-ready .narrow-key-flight .physical-key__visual {
    width: 100%;
    margin: 0;
  }

  body.narrow-story-ready .narrow-key-flight .physical-key__memory {
    opacity: 1 !important;
  }

  body.narrow-story-ready .key-ring-stage {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    width: 100%;
    max-width: none;
    margin: 0;
    background: var(--paper);
    --narrow-ring-arrival: 1;
  }

  body.narrow-story-ready[data-narrow-detail="key"] .key-ring-stage {
    grid-template-areas: "arrival";
    grid-template-rows: minmax(var(--narrow-stop), auto);
    padding: 0 max(var(--gutter), var(--safe-right)) calc(2rem + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
  }

  body.narrow-story-ready[data-narrow-detail="ring"] .key-ring-stage {
    grid-template-areas:
      "ring"
      "feedback"
      "ceremony"
      "actions"
      "restart";
    grid-template-rows: auto auto auto auto auto;
    padding: clamp(1.5rem, 6vw, 2.5rem) max(var(--gutter), var(--safe-right)) calc(3rem + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
  }

  body.narrow-story-ready .key-ring-stage__intro {
    z-index: 2;
    grid-area: arrival;
    align-self: start;
    display: block;
    min-height: var(--narrow-stop);
    padding: clamp(2.25rem, 8vw, 3.75rem) 0 24rem;
  }

  body.narrow-story-ready[data-narrow-detail="ring"] .key-ring-stage__intro {
    display: none;
  }

  body.narrow-story-ready .key-ring-stage__intro h2 {
    max-width: 9ch;
    font-size: clamp(2.9rem, 13vw, 4.1rem);
  }

  body.narrow-story-ready .key-ring-stage__intro > p:last-child {
    max-width: 29rem;
    margin-top: 1rem;
    font-size: clamp(1rem, 4.2vw, 1.12rem);
  }

  body.narrow-story-ready .key-ring {
    z-index: 1;
    width: min(100%, 34rem);
    margin: 0 auto;
    opacity: var(--narrow-ring-arrival);
  }

  body.narrow-story-ready[data-narrow-detail="key"] .key-ring {
    grid-area: arrival;
    align-self: end;
    margin-bottom: clamp(1.25rem, 4vh, 2.5rem);
  }

  body.narrow-story-ready[data-narrow-detail="ring"] .key-ring {
    grid-area: ring;
  }

  body.narrow-story-ready .key-ring__canvas {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  body.narrow-story-ready .key-ring__desktop-story {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto;
    clip-path: none;
  }

  body.narrow-story-ready .ring-label,
  body.narrow-story-ready .ring-sublabel {
    opacity: var(--narrow-ring-arrival);
  }

  body.narrow-story-ready[data-narrow-detail="key"] .key-ring__controls,
  body.narrow-story-ready[data-narrow-detail="key"] .key-ceremony {
    display: none !important;
  }

  body.narrow-story-ready[data-narrow-detail="ring"] .key-ring__controls {
    display: contents;
  }

  body.narrow-story-ready .key-ring__controls[data-feedback-visible] .key-ring__controls-copy {
    grid-area: feedback;
    z-index: 1;
    width: min(100%, 430px);
    margin: 0 auto 0.75rem;
    padding: 0.85rem;
    border: 1px solid rgba(54, 93, 120, 0.24);
    border-radius: 14px;
    background: var(--white);
  }

  body.narrow-story-ready .key-ceremony {
    grid-area: ceremony;
    min-height: 0;
    margin: 0;
    padding: 0;
  }

  body.narrow-story-ready .key-ceremony__surface.memory-login {
    width: min(100%, 430px);
    min-height: 0;
    height: auto;
    margin: 0 auto;
    padding: clamp(1rem, 4.2vw, 1.35rem);
    border-radius: 16px;
  }

  body.narrow-story-ready .key-ceremony .login-card__heading {
    margin-bottom: 1rem;
  }

  body.narrow-story-ready .key-ceremony .memory-login__step {
    margin-top: 0.8rem;
  }

  body.narrow-story-ready .key-ceremony .memory-login__photo {
    grid-template-columns: clamp(70px, 22vw, 94px) minmax(0, 1fr);
    min-height: 88px;
    padding: 0.65rem;
  }

  body.narrow-story-ready .key-ceremony .login-card__continue {
    min-height: 48px;
    margin-top: 1rem;
    padding: 0.72rem 0.85rem;
  }

  body.narrow-story-ready .key-ring__control-actions {
    grid-area: actions;
    grid-template-columns: 1fr !important;
    gap: 0.6rem;
    width: min(100%, 430px);
    margin: 0 auto;
    padding: 0.75rem;
    border: 1px solid rgba(54, 93, 120, 0.24);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: 0 14px 36px rgba(7, 26, 39, 0.08);
  }

  body.narrow-story-ready .key-ring__restart {
    grid-area: restart;
    width: min(100%, 430px);
    margin: 0.75rem auto 0;
  }

  body.narrow-story-ready .key-ring__control-actions button,
  body.narrow-story-ready .key-ring__control-actions a {
    min-height: 48px;
    padding: 0.75rem 0.9rem;
    font-size: 0.82rem;
  }

  /* Existing approved deep sections become focused mobile destinations. */
  body.narrow-story-ready .value-story,
  body.narrow-story-ready .marketplace,
  body.narrow-story-ready .one-answer,
  body.narrow-story-ready .partner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(3rem, 10vw, 5rem) max(var(--gutter), var(--safe-right)) calc(3rem + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
  }

  body.narrow-story-ready .value-story {
    min-height: var(--narrow-stop);
  }

  body.narrow-story-ready .value-story__intro h2 {
    max-width: 9ch;
    font-size: clamp(2.75rem, 11.8vw, 3.75rem);
    line-height: 0.96;
  }

  body.narrow-story-ready .marketplace__intro,
  body.narrow-story-ready .one-answer,
  body.narrow-story-ready .partner {
    grid-template-columns: 1fr;
  }

  body.narrow-story-ready .marketplace__intro {
    width: 100%;
    padding: 0 0 2rem;
  }

  body.narrow-story-ready .company-demo-launch {
    width: 100%;
  }

  body.narrow-story-ready .harbor-demo-invitation {
    min-height: 440px;
  }

  body.narrow-story-ready .one-answer {
    min-height: var(--narrow-stop);
  }

  body.narrow-story-ready .privacy-details {
    width: 100%;
    margin: 0;
    padding: clamp(2.5rem, 9vw, 4rem) max(var(--gutter), var(--safe-right)) calc(3rem + var(--safe-bottom)) max(var(--gutter), var(--safe-left));
    background: var(--paper);
  }

  body.narrow-story-ready .privacy-details > div {
    grid-template-columns: 1fr;
  }

  body.narrow-story-ready .privacy-details p {
    min-height: 0;
  }

  body.narrow-story-ready .partner {
    min-height: var(--narrow-stop);
  }
}

@media (min-width: 600px) and (max-width: 899px) {
  :root {
    --narrow-header: calc(88px + var(--safe-top));
  }

  body.narrow-story-ready .signin-panel__title {
    font-size: clamp(3.45rem, 7.2vw, 4rem);
  }

  body.narrow-story-ready .signin-panel__summary {
    max-width: 38rem;
    font-size: 1.18rem;
  }

  body.narrow-story-ready .signin-panel .familiar-login,
  body.narrow-story-ready .signin-panel .memory-login,
  body.narrow-story-ready .key-ceremony__surface.memory-login,
  body.narrow-story-ready .key-ring__control-actions {
    width: min(100%, 500px);
  }

  body.narrow-story-ready .narrow-cover__copy {
    width: min(100%, 560px);
  }

  body.narrow-story-ready .narrow-cover h1,
  body.narrow-story-ready .narrow-cover h2 {
    font-size: clamp(3.65rem, 7.6vw, 4.25rem);
  }

  body.narrow-story-ready .identity-trace,
  body.narrow-story-ready .memory-flow,
  body.narrow-story-ready .key-making,
  body.narrow-story-ready .story-key-ring,
  body.narrow-story-ready .relationship-story,
  body.narrow-story-ready .harbor-browser {
    width: min(100%, 27rem);
  }

  body.narrow-story-ready .key-making,
  body.narrow-story-ready .story-key-ring {
    height: 30rem;
  }

  body.narrow-story-ready .physical-key-story__intro h2,
  body.narrow-story-ready .key-ring-stage__intro h2 {
    font-size: clamp(4.5rem, 9.5vw, 5.2rem);
  }

  body.narrow-story-ready .physical-key-story__intro > p:last-child,
  body.narrow-story-ready .key-ring-stage__intro > p:last-child {
    max-width: 38rem;
    font-size: 1.2rem;
  }
}

@media (max-width: 899px) and (max-height: 620px) {
  html {
    scroll-snap-type: y mandatory;
  }

  body.narrow-story-ready .signin-panel,
  body.narrow-story-ready .physical-key-story__canvas,
  body.narrow-story-ready .key-ring-stage__intro,
  body.narrow-story-ready .narrow-cover {
    min-height: auto;
  }

  body.narrow-story-ready .signin-panel {
    padding-top: 1.5rem;
    padding-bottom: 2rem;
  }

  body.narrow-story-ready .physical-key-build {
    min-height: 23rem;
  }

  body.narrow-story-ready .key-ring-stage__intro {
    padding-bottom: 22rem;
  }

  body.narrow-story-ready .narrow-cover {
    min-height: 31rem;
  }
}

@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  body.narrow-story-ready {
    --narrow-identity-login: 1 !important;
    --narrow-answer-login: 1 !important;
    --narrow-key-build: 1 !important;
  }

  body.narrow-story-ready .narrow-key-flight {
    display: none !important;
  }

  body.narrow-story-ready .physical-key,
  body.narrow-story-ready .key-ring,
  body.narrow-story-ready .ring-label,
  body.narrow-story-ready .ring-sublabel {
    opacity: 1 !important;
    transform: none !important;
  }
}

/*
 * The accepted narrow concepts are the production visual specification.
 * Their pixels are rendered directly; only non-visual semantics and hit areas
 * are layered above the exact source images.
 */
@media (max-width: 899px) {
  body.narrow-story-ready .narrow-cover.narrow-cover--exact {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--narrow-stop);
    min-height: var(--narrow-stop);
    max-height: var(--narrow-stop);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    line-height: 0;
    scroll-margin-top: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  body.narrow-story-ready .narrow-cover--exact.narrow-cover--problem,
  body.narrow-story-ready .narrow-cover--exact.narrow-cover--value {
    background: #061d2b;
  }

  body.narrow-story-ready .narrow-cover--exact.narrow-cover--answer {
    background: #3b6783;
  }

  body.narrow-story-ready .narrow-cover--exact.narrow-cover--house-bridge,
  body.narrow-story-ready .narrow-cover--exact.narrow-cover--key,
  body.narrow-story-ready .narrow-cover--exact.narrow-cover--demo {
    background: #f7f5f0;
  }

  body.narrow-story-ready .narrow-cover--exact.narrow-cover--ring {
    background: #a8cadb;
  }

  body.narrow-story-ready .narrow-cover__exact-image {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
    object-fit: contain;
  }

  body.narrow-story-ready .narrow-cover__semantic,
  body.narrow-story-ready .narrow-cover__exact-action span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    white-space: nowrap !important;
  }

  body.narrow-story-ready .narrow-cover__exact-action {
    position: absolute;
    z-index: 3;
    display: block;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  body.narrow-story-ready .narrow-cover__exact-action:focus-visible {
    outline: 3px solid #ff6b50;
    outline-offset: 3px;
  }

  body.narrow-story-ready .narrow-cover--problem .narrow-cover__exact-action {
    top: 38.5%;
    left: 6.4%;
    width: 29%;
    height: 5.5%;
  }

  body.narrow-story-ready .narrow-cover--answer .narrow-cover__exact-action {
    top: 28.8%;
    left: 6.4%;
    width: 29%;
    height: 5.5%;
  }

  body.narrow-story-ready .narrow-cover--key .narrow-cover__exact-action {
    top: 28.9%;
    left: 6.4%;
    width: 29%;
    height: 5.5%;
  }

  body.narrow-story-ready .narrow-cover--ring .narrow-cover__exact-action {
    top: 26.8%;
    left: 6.4%;
    width: 38%;
    height: 5.5%;
  }

  body.narrow-story-ready .narrow-cover--value .narrow-cover__exact-action {
    top: 30.8%;
    left: 6.4%;
    width: 29%;
    height: 5.5%;
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__exact-action {
    top: 25.8%;
    left: 6.4%;
    width: 87.2%;
    height: 7.4%;
  }

}

/*
 * Live-copy fidelity pass: the approved raster supplies the exact illustration
 * pixels while headings, summaries, and CTAs remain editable, semantic HTML.
 */
@media (max-width: 899px) {
  body.narrow-story-ready .narrow-cover.narrow-cover--exact.narrow-cover--live {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: var(--narrow-stop);
    min-height: var(--narrow-stop);
    max-height: var(--narrow-stop);
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    line-height: 1.5;
    scroll-snap-stop: always;
  }

  body.narrow-story-ready .narrow-cover__viewport-canvas {
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    width: min(100%, max(320px, 46.258dvh));
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    overflow: hidden;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--problem {
    --copy-height: 93.787cqi;
    --art-height: 122.391cqi;
    --art-shift: -93.787cqi;
    --copy-top: 22.86cqi;
    --copy-inline: 6.56cqi;
    --heading-size: max(1.65rem, 6.45cqi);
    --heading-width: 100%;
    --heading-gap: 4.7cqi;
    --summary-size: max(1rem, 3.98cqi);
    --summary-line: 1.65;
    --summary-gap: 5.9cqi;
    --action-gap: 7.3cqi;
    --tile-background: #001121;
    --tile-foreground: #f7f7f6;
    --tile-muted: #dbe3ed;
    --tile-accent: #5b8fd1;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--answer {
    --copy-height: 75.029cqi;
    --art-height: 141.149cqi;
    --art-shift: -75.029cqi;
    --copy-top: 15.36cqi;
    --copy-inline: 7.39cqi;
    --heading-size: max(1.75rem, 7.15cqi);
    --heading-width: 100%;
    --heading-gap: 5.15cqi;
    --summary-size: max(1rem, 3.8cqi);
    --summary-line: 1.62;
    --summary-gap: 4.1cqi;
    --action-gap: 4.9cqi;
    --tile-background: #2d567a;
    --tile-foreground: #f8f8f7;
    --tile-muted: #eef2f7;
    --tile-accent: #a4c8f1;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--house-bridge {
    --copy-height: 103cqi;
    --art-height: 113.178cqi;
    --art-shift: 0;
    --copy-top: 12.3cqi;
    --copy-inline: 8.2cqi;
    --heading-size: max(1.55rem, 6.2cqi);
    --heading-width: 100%;
    --heading-gap: 4.4cqi;
    --summary-size: max(1rem, 3.72cqi);
    --summary-line: 1.46;
    --summary-gap: 4cqi;
    --action-gap: 0;
    --tile-background: #fff;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--key {
    --copy-height: 73.857cqi;
    --art-height: 142.321cqi;
    --art-shift: -46.893cqi;
    --copy-top: 16.3cqi;
    --copy-inline: 8.2cqi;
    --heading-size: max(1.55rem, 5.75cqi);
    --heading-width: 100%;
    --heading-gap: 5.05cqi;
    --summary-size: max(1rem, 3.62cqi);
    --summary-line: 1.52;
    --summary-gap: 3.25cqi;
    --action-gap: 4.85cqi;
    --tile-background: #f4f2f0;
    --tile-foreground: #03223a;
    --tile-muted: #082944;
    --tile-accent: #2f6b96;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--ring {
    --copy-height: 69.168cqi;
    --art-height: 147.01cqi;
    --art-shift: -30.481cqi;
    --copy-top: 16.06cqi;
    --copy-inline: 8.2cqi;
    --heading-size: max(1.8rem, 7.15cqi);
    --heading-width: 100%;
    --heading-gap: 4.65cqi;
    --summary-size: max(1rem, 3.75cqi);
    --summary-line: 1.45;
    --summary-gap: 4.65cqi;
    --action-gap: 4.55cqi;
    --tile-background: #dbe3ea;
    --tile-foreground: #03223a;
    --tile-muted: #082944;
    --tile-accent: #2f6b96;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--value {
    --copy-height: 76.202cqi;
    --art-height: 139.977cqi;
    --art-shift: -76.202cqi;
    --copy-top: 12.5cqi;
    --copy-inline: 8.32cqi;
    --heading-size: max(1.8rem, 7.25cqi);
    --heading-width: 100%;
    --heading-gap: 3.8cqi;
    --summary-size: max(1rem, 3.58cqi);
    --summary-line: 1.5;
    --summary-gap: 3.8cqi;
    --action-gap: 4.2cqi;
    --tile-background: #001528;
    --tile-foreground: #f7f7f6;
    --tile-muted: #e4e8ee;
    --tile-accent: #65a1df;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--demo {
    --copy-height: 51cqi;
    --art-height: 139.977cqi;
    --art-shift: -76.202cqi;
    --copy-top: 12.2cqi;
    --copy-inline: 6.56cqi;
    --heading-size: max(1.8rem, 7.45cqi);
    --heading-width: 100%;
    --heading-gap: 4.8cqi;
    --summary-size: max(1rem, 3.65cqi);
    --summary-line: 1.6;
    --summary-gap: 3.8cqi;
    --action-gap: 4.7cqi;
    --tile-background: #f6f4f1;
    --tile-foreground: #031a32;
    --tile-muted: #081d36;
    --tile-accent: #db583d;
  }

  body.narrow-story-ready .narrow-cover--live {
    background: var(--tile-background) !important;
    color: var(--tile-foreground);
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--demo::before {
    position: absolute;
    z-index: 4;
    inset: 0 0 auto;
    height: max(5px, 0.7cqi);
    background: #df583d;
    content: "";
    pointer-events: none;
  }

  body.narrow-story-ready .narrow-cover__live-copy {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    min-height: var(--copy-height);
    padding: var(--copy-top) var(--copy-inline) 0;
    color: var(--tile-foreground);
  }

  body.narrow-story-ready .narrow-cover__live-kicker {
    margin: 0;
    color: var(--tile-accent);
    font-size: max(1rem, 4cqi);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.25;
    text-align: center;
    text-wrap: balance;
    text-transform: uppercase;
  }

  body.narrow-story-ready .narrow-cover--live h1,
  body.narrow-story-ready .narrow-cover--live h2 {
    max-width: var(--heading-width);
    margin: var(--heading-gap) 0 0;
    color: var(--tile-foreground);
    font-size: var(--heading-size);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.16;
    overflow-wrap: normal;
    text-wrap: wrap;
  }

  body.narrow-story-ready .narrow-cover--story-v3 h1,
  body.narrow-story-ready .narrow-cover--story-v3 h2 {
    margin-inline: auto;
    text-align: center;
    text-wrap: balance;
  }

  body.narrow-story-ready .narrow-cover--live h1 span,
  body.narrow-story-ready .narrow-cover--live h2 span {
    display: block;
  }

  body.narrow-story-ready .narrow-cover--house-bridge .narrow-cover__live-summary span + span {
    margin-top: 2.7cqi;
  }

  body.narrow-story-ready .narrow-cover--house-bridge .narrow-cover__live-summary span:last-child {
    color: var(--tile-foreground);
    font-weight: 700;
  }

  body.narrow-story-ready .narrow-cover--ring h2 {
    text-wrap: balance;
  }

  body.narrow-story-ready .narrow-cover__live-summary {
    max-width: min(100%, 36ch);
    margin: var(--summary-gap) 0 0;
    color: var(--tile-muted);
    font-size: var(--summary-size);
    font-weight: 400;
    letter-spacing: -0.012em;
    line-height: var(--summary-line);
    hyphens: none;
    overflow-wrap: normal;
    text-wrap: pretty;
  }

  body.narrow-story-ready .narrow-cover__live-summary p {
    margin: 0;
  }

  body.narrow-story-ready .narrow-cover__live-summary p + p {
    margin-top: 0.72em;
  }

  body.narrow-story-ready .narrow-cover__live-summary ol {
    display: grid;
    gap: 0.35em;
    margin: 0.72em 0;
    padding-left: 1.35em;
  }

  body.narrow-story-ready .narrow-cover__live-summary li {
    padding-left: 0.2em;
  }

  body.narrow-story-ready .narrow-cover__live-action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: max(0.45rem, 1.8cqi);
    min-width: 44px;
    min-height: 48px;
    margin-top: var(--action-gap);
    padding: 0 0 max(0.24rem, 0.7cqi);
    color: var(--tile-accent);
    font-size: max(1rem, 3.75cqi);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
  }

  body.narrow-story-ready .narrow-cover__live-action::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: max(1px, 0.18cqi);
    background: currentColor;
    content: "";
  }

  body.narrow-story-ready .narrow-cover__live-action svg {
    flex: 0 0 auto;
    width: max(1.4rem, 3.9cqi);
    height: max(1.4rem, 3.9cqi);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.2;
  }

  body.narrow-story-ready .narrow-cover__live-action:focus-visible {
    border-radius: 4px;
    outline: 3px solid #ff6b50;
    outline-offset: 4px;
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__live-action {
    display: none;
    justify-content: center;
    width: 100%;
    min-height: max(54px, 13.1cqi);
    padding: 0 max(1rem, 2cqi);
    border-radius: max(5px, 1.3cqi);
    background: #2e6695;
    color: #fff;
    font-weight: 500;
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__live-action::after {
    display: none;
  }

  body.narrow-story-ready .narrow-cover__art-window {
    position: relative;
    z-index: 1;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    height: auto;
    overflow: hidden;
    pointer-events: none;
  }

  body.narrow-story-ready [data-story-key-creation],
  body.narrow-story-ready [data-story-key-ring-builder] {
    pointer-events: auto;
  }

  body.narrow-story-ready .narrow-cover__art-action {
    position: absolute;
    z-index: 3;
    top: calc(var(--art-shift) + 201.8cqi);
    left: 11.5%;
    width: 77%;
    height: 10.8cqi;
    min-height: 44px;
    border-radius: max(5px, 1.3cqi);
    background: transparent;
    pointer-events: auto;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
  }

  body.narrow-story-ready .narrow-cover__art-action:hover {
    background: rgba(255, 255, 255, 0.08);
  }

  body.narrow-story-ready .narrow-cover__art-action:active {
    background: rgba(255, 255, 255, 0.16);
  }

  body.narrow-story-ready .narrow-cover__art-action:focus-visible {
    outline: 3px solid #ff6b50;
    outline-offset: 3px;
  }

  body.narrow-story-ready .narrow-cover__precise-art {
    position: absolute;
    top: var(--art-shift);
    right: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-width: none;
    margin: 0;
  }

  /* The ring should read as an object inside the tile, not as the tile itself. */
  body.narrow-story-ready .narrow-cover--ring .narrow-cover__precise-art {
    top: -22cqi;
    right: auto;
    left: 12%;
    width: 76%;
  }

  body.narrow-story-ready .narrow-cover--house-bridge .narrow-cover__precise-art {
    top: 0;
    right: auto;
    left: -5%;
    width: 110%;
  }

  body.narrow-story-ready .narrow-cover__art-steps {
    position: absolute;
    z-index: 2;
    inset: 0;
    margin: 0;
    padding: 0;
    color: #f8f8f7;
    font-size: max(1rem, 3.6cqi);
    font-weight: 700;
    line-height: 1.25;
    list-style: none;
    pointer-events: none;
  }

  body.narrow-story-ready .narrow-cover__art-steps li {
    position: absolute;
    left: 19.4cqi;
    margin: 0;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(1) {
    top: 23.4cqi;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(2) {
    top: 79.8cqi;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(3) {
    top: 111.2cqi;
    left: 19cqi;
    width: 62cqi;
    text-align: center;
  }

  body.narrow-story-ready .narrow-cover__art-note {
    position: absolute;
    z-index: 2;
    top: 11cqi;
    left: 6.5cqi;
    width: 42cqi;
    margin: 0;
    color: #082944;
    font-size: max(1rem, 3.3cqi);
    font-weight: 500;
    letter-spacing: -0.012em;
    line-height: 1.45;
    pointer-events: none;
  }

}

/* Preserve the three-line editorial rhythm on the narrowest supported phones. */
@media (max-width: 340px) {
  body.narrow-story-ready .narrow-cover--live.narrow-cover--problem {
    --heading-size: 1.5rem;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--house-bridge {
    --copy-height: 114cqi;
    --copy-top: 10cqi;
    --heading-size: 1.35rem;
    --heading-gap: 3.4cqi;
    --summary-size: 1rem;
    --summary-line: 1.38;
    --summary-gap: 3.2cqi;
  }

  body.narrow-story-ready .narrow-cover--house-bridge .narrow-cover__live-summary span + span {
    margin-top: 2.2cqi;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--key {
    --heading-size: 1.3rem;
    --heading-gap: 3.8cqi;
    --summary-gap: 2.8cqi;
    --action-gap: 3.8cqi;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--ring {
    --heading-size: 1.25rem;
    --heading-gap: 3.8cqi;
    --summary-gap: 3.4cqi;
    --action-gap: 3.8cqi;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--value {
    --copy-top: 6cqi;
    --copy-inline: 6.25cqi;
    --heading-size: 1.5rem;
    --heading-gap: 2.5cqi;
    --summary-line: 1.42;
    --summary-gap: 2.5cqi;
    --action-gap: 2.8cqi;
  }

  body.narrow-story-ready .narrow-cover--ring .narrow-cover__precise-art {
    top: -19cqi;
    left: 14%;
    width: 72%;
  }

  body.narrow-story-ready .narrow-cover--value .narrow-cover__precise-art {
    top: -44cqi;
    right: auto;
    left: 21%;
    width: 58%;
  }

  body.narrow-story-ready .narrow-cover--live.narrow-cover--demo {
    --heading-size: 1.5rem;
  }

  body.narrow-story-ready .narrow-cover--answer .narrow-cover__precise-art {
    top: -60cqi;
    right: auto;
    left: 10%;
    width: 80%;
  }

  body.narrow-story-ready .narrow-cover__art-steps li {
    left: 25cqi;
    font-size: 0.875rem;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(1) {
    top: 18.7cqi;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(2) {
    top: 60cqi;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(3) {
    top: 88.5cqi;
    left: 15cqi;
    width: 70cqi;
  }

  body.narrow-story-ready .narrow-cover__art-steps::before,
  body.narrow-story-ready .narrow-cover__art-steps::after {
    position: absolute;
    z-index: 1;
    content: "";
    pointer-events: none;
  }

  body.narrow-story-ready .narrow-cover__art-steps::before {
    top: 50cqi;
    left: calc(50% - 18px);
    width: 36px;
    height: 40px;
    background: #2d567a;
  }

  body.narrow-story-ready .narrow-cover__art-steps::after {
    top: 50cqi;
    left: calc(50% - 11px);
    display: grid;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #f8f8f7;
    color: #4f9df0;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1;
    place-items: center;
    content: "+";
  }

  body.narrow-story-ready .narrow-cover__art-steps li {
    z-index: 2;
  }

  body.narrow-story-ready .narrow-cover--key h2 span,
  body.narrow-story-ready .narrow-cover--ring h2 span {
    display: inline;
  }
}

/* Short mobile and tablet landscape views keep the same story in a two-column frame. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 600px) {
  body.narrow-story-ready .narrow-cover__viewport-canvas {
    flex-direction: row;
    width: min(100%, 900px);
  }

  body.narrow-story-ready .narrow-cover__live-copy {
    flex: 0 0 46%;
    width: 46%;
    height: 100%;
    min-height: 0;
    padding: 28px 24px 18px;
  }

  body.narrow-story-ready .narrow-cover__live-kicker {
    font-size: 0.75rem;
  }

  body.narrow-story-ready .narrow-cover--live h1,
  body.narrow-story-ready .narrow-cover--live h2 {
    margin-top: 12px;
    font-size: 1.25rem;
    line-height: 1.16;
  }

  body.narrow-story-ready .narrow-cover--problem h1,
  body.narrow-story-ready .narrow-cover--answer h2,
  body.narrow-story-ready .narrow-cover--demo h2 {
    font-size: 1.35rem;
  }

  body.narrow-story-ready .narrow-cover--value h2 {
    font-size: 1.5rem;
  }

  body.narrow-story-ready .narrow-cover__live-summary {
    margin-top: 12px;
    font-size: 1rem;
    line-height: 1.35;
  }

  body.narrow-story-ready .narrow-cover__live-action {
    gap: 0.5rem;
    margin-top: 10px;
    padding-bottom: 4px;
    font-size: 1rem;
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__live-action {
    display: inline-flex;
    min-height: 50px;
    border-radius: 5px;
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__art-action {
    display: none;
  }

  body.narrow-story-ready .narrow-cover__art-window {
    flex: 1 1 auto;
    width: 54%;
    height: 100%;
  }

  body.narrow-story-ready .narrow-cover--problem .narrow-cover__precise-art {
    top: -500px;
  }

  body.narrow-story-ready .narrow-cover--answer .narrow-cover__precise-art {
    top: -230px;
    right: auto;
    left: 15%;
    width: 70%;
  }

  body.narrow-story-ready .narrow-cover--house-bridge .narrow-cover__precise-art {
    top: 18px;
    right: auto;
    left: 0;
    width: 100%;
  }

  body.narrow-story-ready .narrow-cover--key .narrow-cover__precise-art {
    top: -205px;
    right: auto;
    left: 12.5%;
    width: 75%;
  }

  body.narrow-story-ready .narrow-cover--ring .narrow-cover__precise-art {
    top: -50px;
    right: auto;
    left: 25%;
    width: 50%;
  }

  body.narrow-story-ready .narrow-cover--value .narrow-cover__precise-art {
    top: -370px;
  }

  body.narrow-story-ready .narrow-cover--demo .narrow-cover__precise-art {
    top: -365px;
  }

  body.narrow-story-ready .narrow-cover__art-steps {
    font-size: 0.875rem;
  }

  body.narrow-story-ready .narrow-cover__art-steps li {
    left: 18%;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(1) {
    top: 19%;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(2) {
    top: 64%;
  }

  body.narrow-story-ready .narrow-cover__art-steps li:nth-child(3) {
    top: 91%;
    left: 10%;
    width: 80%;
  }

  body.narrow-story-ready .narrow-cover__art-note {
    top: 18%;
    left: 4%;
    width: 41%;
    font-size: 0.95rem;
    line-height: 1.35;
  }

}

/*
 * Narrative v3 ends the house-key analogy before the product explanation.
 * Product keys use real transparent PNG assets. The final frame reproduces
 * the current Harbor login with code-native text and controls.
 */
@media (max-width: 899px) {
  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--house-key {
    --copy-height: 72cqi;
    --copy-top: 9cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.65rem, 6.7cqi);
    --heading-width: 100%;
    --heading-gap: 3.5cqi;
    --summary-size: max(1rem, 3.65cqi);
    --summary-line: 1.43;
    --summary-gap: 3.5cqi;
    --tile-background: #f3f2ee;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--physical-limits {
    --copy-height: 27cqi;
    --copy-top: 8cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.65rem, 6.5cqi);
    --heading-width: 100%;
    --heading-gap: 3.5cqi;
    --summary-size: max(1rem, 3.6cqi);
    --summary-line: 1.42;
    --summary-gap: 3.5cqi;
    --tile-background: #dbe7ec;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--better-key {
    --copy-height: 68cqi;
    --copy-top: 8cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.55rem, 6.05cqi);
    --heading-width: 100%;
    --heading-gap: 3.2cqi;
    --summary-size: max(1rem, 3.55cqi);
    --summary-line: 1.42;
    --summary-gap: 3.2cqi;
    --tile-background: #f3f2ee;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--mementom-key {
    --copy-height: 68cqi;
    --copy-top: 8cqi;
    --copy-inline: 10cqi;
    --heading-size: max(1.65rem, 6.45cqi);
    --heading-width: 100%;
    --heading-gap: 3.4cqi;
    --summary-size: max(1rem, 3.55cqi);
    --summary-line: 1.42;
    --summary-gap: 3.4cqi;
    --tile-background: #365d78;
    --tile-foreground: #fff;
    --tile-muted: rgba(255, 255, 255, 0.84);
    --tile-accent: #c7dfec;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--ring {
    --copy-height: 70cqi;
    --copy-top: 8cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.65rem, 6.55cqi);
    --heading-width: 100%;
    --heading-gap: 3.4cqi;
    --summary-size: max(1rem, 3.55cqi);
    --summary-line: 1.42;
    --summary-gap: 3.4cqi;
    --tile-background: #dbe7ec;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--login {
    --copy-height: 58cqi;
    --copy-top: 7.5cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.55rem, 6.1cqi);
    --heading-width: 100%;
    --heading-gap: 3cqi;
    --summary-size: max(1rem, 3.45cqi);
    --summary-line: 1.4;
    --summary-gap: 2.8cqi;
    --action-gap: 2.8cqi;
    --tile-background: #061d2b;
    --tile-foreground: #fff;
    --tile-muted: rgba(255, 255, 255, 0.78);
    --tile-accent: #9ec2d3;
  }

  /* One narrative hierarchy uses one type scale across every story beat. */
  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--exact {
    --heading-size: max(1.65rem, 6.5cqi);
    --summary-size: max(1rem, 3.6cqi);
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--house-key .narrow-cover__art-window,
  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--better-key .narrow-cover__art-window {
    width: auto;
    align-self: stretch;
    margin: 0 6.5cqi 6.5cqi;
    overflow: hidden;
    border: 1px solid rgba(54, 93, 120, 0.2);
    border-radius: max(18px, 5cqi);
    background: #fff;
    box-shadow: 0 18px 42px rgba(7, 26, 39, 0.12);
  }

  body.narrow-story-ready .narrow-cover--story-v3 .narrow-cover__precise-art {
    position: static;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: contain;
    object-position: center;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--physical-limits .narrow-cover__viewport-canvas {
    background: #dbe7ec;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--physical-limits .narrow-cover__problem-intro {
    min-height: var(--copy-height);
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--physical-limits .narrow-cover__problem-intro h2 {
    margin: 0;
    color: var(--tile-accent);
    font-size: max(1rem, 4cqi);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.28;
    text-align: center;
    text-wrap: balance;
  }

  body.narrow-story-ready .narrow-cover__problem-grid {
    display: grid;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 7.4cqi 6.5cqi;
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  body.narrow-story-ready .narrow-cover__problem-group {
    display: grid;
    min-height: 0;
    padding: 4.2cqi 0;
    grid-template-rows: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 2.8cqi;
  }

  body.narrow-story-ready .narrow-cover__problem-group + .narrow-cover__problem-group {
    border-top: 1px solid rgba(54, 93, 120, 0.24);
  }

  body.narrow-story-ready .narrow-cover__problem-copy h3,
  body.narrow-story-ready .narrow-cover__problem-copy p {
    margin: 0;
  }

  body.narrow-story-ready .narrow-cover__problem-copy h3 {
    color: var(--tile-foreground);
    font-size: clamp(0.95rem, 4cqi, 1.12rem);
    letter-spacing: -0.03em;
    line-height: 1.12;
    text-align: left;
    text-wrap: nowrap;
    white-space: nowrap;
  }

  body.narrow-story-ready .narrow-cover__problem-copy p {
    margin-top: 2.2cqi;
    color: var(--tile-muted);
    font-size: max(0.92rem, 3.45cqi);
    line-height: 1.38;
    text-wrap: pretty;
  }

  body.narrow-story-ready .narrow-cover__problem-art {
    display: grid;
    min-width: 0;
    height: 100%;
    min-height: 0;
    place-items: center;
  }

  body.narrow-story-ready .narrow-cover__problem-art img {
    display: block;
    width: auto;
    max-width: 70%;
    height: 100%;
    min-height: 0;
    margin: 0 auto;
    object-fit: contain;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--house-key .narrow-cover__precise-art,
  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--better-key .narrow-cover__precise-art {
    object-fit: cover;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--mementom-key .narrow-cover__art-window,
  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--ring .narrow-cover__art-window {
    position: relative;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    margin: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--mementom-key .narrow-cover__precise-art {
    grid-row: 1;
    width: 78% !important;
    height: 100% !important;
    margin: 0 auto;
    object-fit: contain;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--mementom-key .narrow-cover__live-summary {
    max-width: 17rem;
    text-wrap: pretty;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--ring .narrow-cover__precise-art {
    position: static !important;
    display: block;
    grid-row: 1;
    width: 72% !important;
    height: 100% !important;
    margin: 0 auto;
    object-fit: contain;
  }

  body.narrow-story-ready [data-story-key-ring-image][hidden],
  body.narrow-story-ready .narrow-cover__key-ring-builder [hidden] {
    display: none !important;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--ring [data-story-key-ring-image] {
    transition: opacity 180ms ease;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--ring.is-key-ring-empty [data-story-key-ring-image] {
    opacity: 0.26;
  }

  body.narrow-story-ready .narrow-cover__key-creation,
  body.narrow-story-ready .narrow-cover__key-ring-builder {
    position: relative;
    z-index: 2;
    display: grid;
    grid-row: 2;
    justify-items: center;
    gap: max(0.7rem, 2.7cqi);
    padding: 0 7.4cqi max(1.1rem, 4.5cqi);
    color: var(--tile-foreground);
    text-align: center;
  }

  body.narrow-story-ready .narrow-cover__key-creation p,
  body.narrow-story-ready .narrow-cover__key-ring-builder p {
    max-width: 34ch;
    margin: 0;
    color: var(--tile-muted);
    font-size: var(--summary-size);
    line-height: var(--summary-line);
    text-wrap: pretty;
  }

  body.narrow-story-ready .narrow-cover__story-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: max(0.65rem, 2.4cqi) max(0.9rem, 3.5cqi);
  }

  body.narrow-story-ready .narrow-cover__story-form {
    margin: 0;
  }

  body.narrow-story-ready .narrow-cover__story-button,
  body.narrow-story-ready .narrow-cover__story-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-size: max(1rem, 3.65cqi);
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
  }

  body.narrow-story-ready .narrow-cover__story-button {
    padding: max(0.7rem, 2.6cqi) max(1rem, 4cqi);
    border: 2px solid currentColor;
    border-radius: 0.3rem;
    background: #fff;
    color: #365d78;
    cursor: pointer;
    font-family: inherit;
    touch-action: manipulation;
    user-select: none;
  }

  body.narrow-story-ready .narrow-cover__story-link {
    padding: 0;
    border: 0;
    border-bottom: 2px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--login .narrow-cover__art-window {
    margin: 0;
    padding: 0 6.5cqi 6.5cqi;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
  }

  body.narrow-story-ready .narrow-cover__login-preview-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
  }

  body.wide-story-ready .wide-canonical-story .narrow-cover__login-preview-link:focus-visible,
  body.narrow-story-ready .narrow-cover__login-preview-link:focus-visible {
    outline: 3px solid #df583d;
    outline-offset: 4px;
  }

  body.narrow-story-ready .narrow-cover__login-preview {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-radius: max(16px, 4cqi);
    background: #fff;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
    color: #25282b;
  }

  body.narrow-story-ready .narrow-cover__login-header {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    min-height: max(48px, 12.5cqi);
    padding: 2.5cqi 4.2cqi;
    border-bottom: 1px solid #d6d8d5;
    background: #f2f1e8;
  }

  body.narrow-story-ready .narrow-cover__login-company {
    display: flex;
    align-items: center;
    gap: 2.4cqi;
  }

  body.narrow-story-ready .narrow-cover__login-company > span {
    display: grid;
  }

  body.narrow-story-ready .narrow-cover__login-company small,
  body.narrow-story-ready .narrow-cover__login-security {
    color: #365d78;
    font-size: max(0.48rem, 1.95cqi);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  body.narrow-story-ready .narrow-cover__login-company strong {
    font-family: Georgia, serif;
    font-size: max(0.8rem, 3.5cqi);
    font-weight: 400;
    line-height: 1.05;
  }

  body.narrow-story-ready .narrow-cover__harbor-mark {
    position: relative;
    display: block;
    width: max(30px, 8cqi);
    height: max(30px, 8cqi);
    border: 1px solid #25282b;
    background: #f8f6ed;
  }

  body.narrow-story-ready .narrow-cover__harbor-mark::before {
    position: absolute;
    top: 18%;
    left: 34%;
    width: 2px;
    height: 65%;
    background: #25282b;
    content: "";
  }

  body.narrow-story-ready .narrow-cover__harbor-mark::after {
    position: absolute;
    top: 29%;
    left: 38%;
    border-top: 4cqi solid transparent;
    border-bottom: 2.3cqi solid transparent;
    border-left: 5cqi solid #dc5b43;
    content: "";
  }

  body.narrow-story-ready .narrow-cover__login-security {
    display: flex;
    align-items: center;
    gap: 1.4cqi;
    text-align: right;
  }

  body.narrow-story-ready .narrow-cover__login-security img {
    width: max(16px, 4cqi);
    height: max(16px, 4cqi);
  }

  body.narrow-story-ready .narrow-cover__login-body {
    display: grid;
    min-height: 0;
    flex: 1 1 auto;
    grid-template-columns: 1fr;
    align-content: start;
    justify-items: stretch;
    padding: 4cqi;
  }

  body.narrow-story-ready .narrow-cover__login-body h3 {
    margin: 0;
    font-size: max(1.2rem, 5.2cqi);
    letter-spacing: -0.03em;
    line-height: 1.05;
  }

  body.narrow-story-ready .narrow-cover__login-body > p {
    margin: 2cqi 0 0;
    color: #667078;
    font-size: max(0.7rem, 2.65cqi);
    line-height: 1.38;
  }

  body.narrow-story-ready .narrow-cover__login-ring {
    display: block;
    width: auto;
    height: min(20cqi, 19dvh);
    margin: 1.5cqi auto;
    object-fit: contain;
  }

  body.narrow-story-ready .narrow-cover__login-button {
    display: grid;
    min-height: max(34px, 9cqi);
    margin-top: 1.5cqi;
    place-items: center;
    border: 1px solid #aeb9bf;
    border-radius: 4px;
    color: #25282b;
    font-size: max(0.68rem, 2.75cqi);
    font-weight: 700;
    line-height: 1.15;
  }

  body.narrow-story-ready .narrow-cover__login-button--primary {
    border-color: #365d78;
    background: #365d78;
    color: #fff;
  }

  body.narrow-story-ready .narrow-cover__login-body .narrow-cover__login-privacy {
    margin-top: 2cqi;
    padding-top: 2cqi;
    border-top: 1px solid #d8dddd;
    font-size: max(0.62rem, 2.35cqi);
  }

  body.narrow-story-ready .narrow-cover__login-cancel {
    padding: 1.7cqi 0;
    color: #4e5960;
    font-size: max(0.64rem, 2.5cqi);
    font-weight: 700;
    text-align: center;
  }

  body.narrow-story-ready .narrow-cover__login-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1.7cqi;
    border-top: 1px solid #d8dddd;
    color: #365d78;
    font-size: max(0.62rem, 2.35cqi);
    font-weight: 700;
  }
}

@media (max-width: 340px) {
  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--better-key {
    --copy-height: 84cqi;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--mementom-key {
    --copy-height: 90cqi;
    --heading-size: 1.45rem;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--ring {
    --copy-height: 87cqi;
    --heading-size: 1.45rem;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--login {
    --copy-height: 82cqi;
    --heading-size: 1.35rem;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--mementom-key .narrow-cover__precise-art {
    height: calc(100% - 12px) !important;
  }
}

@media (max-width: 899px) and (orientation: landscape) and (max-height: 600px) {
  body.narrow-story-ready .narrow-cover--story-v3 .narrow-cover__live-copy {
    flex: 0 0 44%;
    width: 44%;
    padding: 24px 20px 16px;
  }

  body.narrow-story-ready .narrow-cover--story-v3 .narrow-cover__art-window {
    flex: 1 1 auto;
    width: 56%;
    height: 100%;
    margin: 14px 16px 14px 0;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--mementom-key .narrow-cover__precise-art,
  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--ring .narrow-cover__precise-art {
    width: 60% !important;
  }

  body.narrow-story-ready .narrow-cover--story-v3.narrow-cover--login .narrow-cover__art-window {
    padding: 0;
  }

  body.narrow-story-ready .narrow-cover__login-header {
    min-height: 40px;
    padding: 7px 12px;
  }

  body.narrow-story-ready .narrow-cover__harbor-mark {
    width: 34px;
    height: 34px;
  }

  body.narrow-story-ready .narrow-cover__harbor-mark::after {
    border-top-width: 14px;
    border-bottom-width: 8px;
    border-left-width: 18px;
  }

  body.narrow-story-ready .narrow-cover__login-company small,
  body.narrow-story-ready .narrow-cover__login-security {
    font-size: 0.5rem;
  }

  body.narrow-story-ready .narrow-cover__login-company strong {
    font-size: 1rem;
  }

  body.narrow-story-ready .narrow-cover__login-security img {
    width: 16px;
    height: 16px;
  }

  body.narrow-story-ready .narrow-cover__login-body {
    padding: 9px 12px;
  }

  body.narrow-story-ready .narrow-cover__login-body h3 {
    font-size: 1rem;
  }

  body.narrow-story-ready .narrow-cover__login-body > p {
    margin-top: 5px;
    font-size: 0.64rem;
  }

  body.narrow-story-ready .narrow-cover__login-ring {
    height: 68px;
    margin: 3px auto;
  }

  body.narrow-story-ready .narrow-cover__login-button {
    min-height: 30px;
    margin-top: 5px;
    font-size: 0.66rem;
  }

  body.narrow-story-ready .narrow-cover__login-body .narrow-cover__login-privacy {
    margin-top: 6px;
    padding-top: 6px;
    font-size: 0.6rem;
  }

  body.narrow-story-ready .narrow-cover__login-cancel {
    display: block;
    padding: 5px 0;
    font-size: 0.64rem;
  }

  body.narrow-story-ready .narrow-cover__login-details {
    display: none;
  }
}

/*
 * Narrative v2: live editorial copy paired with real raster story assets.
 * Approved product rasters remain unchanged; new analogy images are framed,
 * never redrawn in CSS or SVG.
 */
@media (max-width: 899px) {
  body.narrow-story-ready .narrow-cover.narrow-cover--story-v2 {
    scroll-snap-stop: normal;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--house-key {
    --copy-height: 80cqi;
    --copy-top: 10.5cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.8rem, 7.3cqi);
    --heading-width: 100%;
    --heading-gap: 3.8cqi;
    --summary-size: max(1rem, 3.72cqi);
    --summary-line: 1.46;
    --summary-gap: 3.8cqi;
    --tile-background: #f3f2ee;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--physical-problems {
    --copy-height: 52cqi;
    --copy-top: 10.5cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.7rem, 6.7cqi);
    --heading-width: 100%;
    --heading-gap: 3.8cqi;
    --summary-size: max(1rem, 3.7cqi);
    --summary-line: 1.45;
    --summary-gap: 3.8cqi;
    --tile-background: #dbe7ec;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--better-key {
    --copy-height: 102cqi;
    --copy-top: 8.7cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.55rem, 6.15cqi);
    --heading-width: 100%;
    --heading-gap: 3.1cqi;
    --summary-size: max(1rem, 3.48cqi);
    --summary-line: 1.42;
    --summary-gap: 3.2cqi;
    --tile-background: #f3f2ee;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--answer {
    --copy-height: 92cqi;
    --copy-top: 9.2cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.65rem, 6.5cqi);
    --heading-width: 100%;
    --heading-gap: 3.5cqi;
    --summary-size: max(1rem, 3.58cqi);
    --summary-line: 1.45;
    --summary-gap: 3.5cqi;
    --tile-background: #365d78;
    --tile-foreground: #fff;
    --tile-muted: rgba(255, 255, 255, 0.82);
    --tile-accent: #c7dfec;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--ring {
    --copy-height: 90cqi;
    --copy-top: 9.2cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.6rem, 6.35cqi);
    --heading-width: 100%;
    --heading-gap: 3.5cqi;
    --summary-size: max(1rem, 3.58cqi);
    --summary-line: 1.45;
    --summary-gap: 3.5cqi;
    --tile-background: #dbe7ec;
    --tile-foreground: #25282b;
    --tile-muted: #4e5960;
    --tile-accent: #365d78;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--value {
    --copy-height: 100cqi;
    --copy-top: 8.7cqi;
    --copy-inline: 7.4cqi;
    --heading-size: max(1.6rem, 6.35cqi);
    --heading-width: 100%;
    --heading-gap: 3.25cqi;
    --summary-size: max(1rem, 3.48cqi);
    --summary-line: 1.44;
    --summary-gap: 3.25cqi;
    --tile-background: #061d2b;
    --tile-foreground: #fff;
    --tile-muted: rgba(255, 255, 255, 0.78);
    --tile-accent: #9ec2d3;
  }

  body.narrow-story-ready .narrow-cover--story-v2 .narrow-cover__live-summary span + span {
    margin-top: 2.25cqi;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--emphasize-last .narrow-cover__live-summary span:last-child {
    color: var(--tile-foreground);
    font-weight: 700;
  }

  body.narrow-story-ready .narrow-cover--story-v2:not(.narrow-cover--problem):not(.narrow-cover--demo) .narrow-cover__art-window {
    width: auto;
    margin: 0 6.5cqi 6.5cqi;
    overflow: hidden;
    border: 1px solid rgba(54, 93, 120, 0.2);
    border-radius: max(18px, 5cqi);
    background: #fff;
    box-shadow: 0 18px 42px rgba(7, 26, 39, 0.12);
  }

  body.narrow-story-ready .narrow-cover--story-v2:where(:not(.narrow-cover--problem):not(.narrow-cover--demo)) .narrow-cover__precise-art {
    position: static !important;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--house-key .narrow-cover__art-window {
    background: #fff;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--house-key .narrow-cover__precise-art {
    object-fit: contain;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--answer .narrow-cover__art-window {
    border-color: rgba(255, 255, 255, 0.38);
    background: #f3f2ee;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--answer .narrow-cover__precise-art {
    object-fit: contain;
    object-position: center;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--ring .narrow-cover__precise-art {
    object-fit: contain;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--value .narrow-cover__art-window {
    border-color: rgba(158, 194, 211, 0.32);
    background: #001528;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--value .narrow-cover__precise-art {
    object-position: 50% 82%;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--physical-problems .narrow-cover__art-window {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

}

@media (max-width: 899px) and (orientation: landscape) and (max-height: 600px) {
  body.narrow-story-ready .narrow-cover--story-v2:not(.narrow-cover--problem):not(.narrow-cover--demo) .narrow-cover__art-window {
    width: auto;
    height: auto;
    margin: 16px 18px 16px 0;
    border-radius: 16px;
  }

  body.narrow-story-ready .narrow-cover--story-v2 .narrow-cover__live-summary span + span {
    margin-top: 7px;
  }

  body.narrow-story-ready .narrow-cover--story-v2.narrow-cover--physical-problems .narrow-cover__art-window {
    margin-right: 18px;
  }

}