/* new-home - partner section (owner: agent 5). Semantic tokens only (css/tokens.css); cinema utilities from css/cinema.css.
 * Visual language: concentric rings. The opening is a circular film window inside rings that open with the scroll;
 * the builder draws a journey as three rings (idea, what happens in it, who gets it); the door closes on rings again. */

#nh-partner { background: var(--nh-bg); overflow: clip; }
.pt { display: grid; gap: 0; padding-bottom: 0; }
.pt-btn { white-space: normal; text-align: center; }
.pt-head { display: grid; gap: var(--nh-space-3); margin-bottom: var(--nh-space-7); max-width: 46rem; }
.pt-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.pt-head .nh-lead { margin-inline: inherit; }

/* ======================= 1. the opening ======================= */
.pt-open {
  --pt-p: 0.5;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--nh-space-6);
  padding: var(--nh-space-9) var(--nh-gutter) var(--nh-space-8);
  max-width: calc(var(--nh-container) + 2 * var(--nh-gutter));
  margin-inline: auto;
}
.pt-open__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}
.pt-open__rings { position: absolute; inset: -14%; width: 128%; height: 128%; max-width: none; overflow: visible; pointer-events: none; }
.pt-open__rings circle {
  fill: none;
  stroke: var(--nh-accent-strong);
  stroke-width: 0.35;
  opacity: calc(0.5 - var(--i) * 0.07);
  transform-origin: 0 0;
  transform: scale(calc(1 + (var(--pt-p) - 0.5) * var(--i) * 0.12 * var(--nh-move)));
  transition: transform 120ms linear;
}
.pt-open__disc {
  position: relative;
  width: 76%;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--nh-border-strong), var(--nh-shadow-4), 0 0 120px -30px var(--nh-accent-glow);
  transform: scale(calc(1 + (var(--pt-p) - 0.5) * 0.14 * var(--nh-move)));
  transition: transform 120ms linear;
  background: radial-gradient(circle at 50% 40%, var(--nh-p-teal-800), var(--nh-p-ink-950) 70%);
}
.pt-open__disc.nh-media { overflow: hidden; border-radius: 50%; }
.pt-open__disc::before { border-radius: 50%; }
.pt-open__video { opacity: 0; transition: opacity var(--nh-dur-cinema) var(--nh-ease-cinema); }
.pt-open__video[poster], .pt-open.is-playing .pt-open__video { opacity: 1; }

.pt-open__copy { position: relative; display: grid; gap: var(--nh-space-4); justify-items: start; }
.pt-open__title { display: grid; gap: 0.02em; font-size: clamp(2.75rem, 1rem + 6vw, 6.25rem); }
.pt-open__title2 { color: var(--nh-accent); }
.pt-open__lead { max-width: 36rem; }
.pt-open__actions { margin-top: var(--nh-space-3); }
/* the film's pause button sits on the edge of the disc, where the eye already is (WCAG 2.2.2) */
.pt-open__visual { position: relative; width: min(100%, 34rem); margin-inline: auto; }
.pt-open__visual .pt-open__stage { width: 100%; }
.pt-film-toggle {
  position: absolute; right: 9%; bottom: 9%; z-index: 3;
  width: var(--nh-tap); height: var(--nh-tap);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--nh-btn-secondary-border);
  background: var(--nh-surface-glass);
  color: var(--nh-text);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background-color var(--nh-dur-fast) var(--nh-ease-out);
}
.pt-film-toggle:hover { background: var(--nh-btn-secondary-bg-hover); }
.pt-film-toggle:focus-visible { border-radius: 50%; }
.pt-film-toggle .nh-icon { width: 18px; height: 18px; }

@media (max-width: 899.98px) {
  .pt-open { padding-top: var(--nh-space-8); min-height: 0; }
  .pt-open__visual { width: min(88%, 26rem); }
}
@media (min-width: 900px) {
  .pt-open { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--nh-space-8); }
  .pt-open__visual { order: 2; width: min(100%, 40rem); }
  .pt-open__copy { order: 1; }
}

/* ======================= 2. the route ======================= */
.pt-route { padding-block: var(--nh-space-9) var(--nh-space-8); }
.pt-route__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--nh-space-6); position: relative; }
.pt-route__item { position: relative; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--nh-space-5); align-items: start; }
.pt-route__pic { position: relative; width: 7.5rem; aspect-ratio: 1; }
.pt-route__img { position: absolute; inset: 10%; border-radius: 50%; }
.pt-route__img img { transition: transform var(--nh-dur-cinema) var(--nh-ease-cinema); }
.pt-route__item:hover .pt-route__img img { transform: scale(calc(1 + 0.06 * var(--nh-move))); }
.pt-route__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--nh-border-strong); }
.pt-route__ring::after { content: ""; position: absolute; inset: -9%; border-radius: 50%; border: 1px dashed var(--nh-border); }
.pt-route__num {
  position: absolute; right: -4px; bottom: 2px;
  min-width: 2.25rem; height: 2.25rem; padding-inline: 0.4rem;
  display: grid; place-items: center;
  border-radius: var(--nh-radius-pill);
  background: var(--nh-btn-primary-bg); color: var(--nh-btn-primary-text);
  font-family: var(--nh-font-display); font-size: var(--nh-fs-xs); font-weight: var(--nh-weight-semibold);
  font-variant-numeric: tabular-nums;
}
.pt-route__text { display: grid; gap: var(--nh-space-2); padding-top: var(--nh-space-2); }
.pt-route__k { font-family: var(--nh-font-display); font-size: var(--nh-fs-xs); letter-spacing: var(--nh-tracking-eyebrow); text-transform: uppercase; color: var(--nh-accent); }
.pt-route__t { font-size: var(--nh-fs-xl); }
.pt-route__d { color: var(--nh-text-muted); max-width: 34ch; }

/* the route line: vertical on a phone, through the circles on a wide screen */
.pt-route__list::before {
  content: ""; position: absolute; left: 3.75rem; top: 3.75rem; bottom: 3.75rem; width: 1px;
  background: linear-gradient(var(--nh-accent-strong), var(--nh-border) 85%);
  opacity: 0.6;
}
@media (min-width: 900px) {
  .pt-route__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--nh-space-6); }
  .pt-route__item { grid-template-columns: minmax(0, 1fr); gap: var(--nh-space-5); }
  .pt-route__pic { width: min(100%, 15rem); }
  .pt-route__list::before { left: 7.5rem; right: 7.5rem; top: min(7.5rem, 12.5%); bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--nh-accent-strong), var(--nh-border)); }
  .pt-route__num { right: 4%; bottom: 6%; min-width: 2.75rem; height: 2.75rem; font-size: var(--nh-fs-sm); }
}

/* ======================= 3. the builder ======================= */
.pt-build { padding-block: var(--nh-space-9); scroll-margin-top: calc(var(--nh-nav-h) + 8px); }
.pt-build__grid {
  display: grid;
  gap: var(--nh-space-6);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "stage" "form" "card";
  padding: clamp(1rem, 0.4rem + 2.6vw, 3rem);
  border-radius: var(--nh-radius-xl);
  background:
    radial-gradient(90% 70% at 20% 30%, var(--nh-accent-soft), transparent 70%),
    var(--nh-bg-raised);
  border: 1px solid var(--nh-border);
  box-shadow: var(--nh-shadow-3);
}
@media (min-width: 900px) {
  .pt-build__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "stage form" "stage card"; align-items: start; column-gap: var(--nh-space-8); }
}

/* the rings */
.pt-stage { grid-area: stage; position: relative; container-type: inline-size; width: min(100%, 32rem); aspect-ratio: 1; margin-inline: auto; align-self: center; }
.pt-stage__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pt-stage__base { fill: none; stroke: var(--nh-border-strong); stroke-width: 0.5; stroke-dasharray: 1.2 2.4; }
.pt-stage__arc {
  --fill: 0;
  fill: none; stroke: var(--nh-accent-strong); stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--fill));
  transform: rotate(-90deg);
  transition: stroke-dashoffset var(--nh-dur-slower) var(--nh-ease-cinema);
  filter: drop-shadow(0 0 3px var(--nh-accent-glow));
}
.pt-stage__people circle { fill: var(--nh-highlight); opacity: 0; transform: scale(0); transform-box: fill-box; transform-origin: center; transition: opacity var(--nh-dur-slow) var(--nh-ease-out), transform var(--nh-dur-slow) var(--nh-ease-spring); transition-delay: calc(var(--d) * 60ms); }
.pt-stage.is-live .pt-stage__people circle { opacity: 1; transform: scale(1); }
.pt-stage__people { transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .pt-stage.is-live.is-visible .pt-stage__people { animation: pt-orbit 60s linear infinite; }
}
@keyframes pt-orbit { to { transform: rotate(360deg); } }

.pt-stage__centre {
  position: absolute; left: 50%; top: 50%;
  width: 36%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--nh-surface-2), var(--nh-surface));
  border: 1px solid var(--nh-border-strong);
  box-shadow: 0 0 0 8px var(--nh-accent-soft), var(--nh-shadow-2);
  padding: 8%;
  text-align: center;
}
.pt-stage__centre-text { font-family: var(--nh-font-display); font-weight: var(--nh-weight-medium); font-size: clamp(0.72rem, 3.6cqi, 1.2rem); line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; color: var(--nh-heading); text-wrap: balance; }
.pt-stage.is-live .pt-stage__centre { box-shadow: 0 0 0 8px var(--nh-accent-soft), var(--nh-shadow-glow); }

.pt-node {
  position: absolute;
  width: clamp(2.25rem, 1.6rem + 2vw, 3.1rem); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.72);
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--nh-surface);
  border: 1px solid var(--nh-border);
  color: var(--nh-text-subtle);
  opacity: 0.55;
  transition: transform var(--nh-dur-slow) var(--nh-ease-spring), opacity var(--nh-dur-base) var(--nh-ease-out), background-color var(--nh-dur-base), color var(--nh-dur-base), border-color var(--nh-dur-base);
}
.pt-node .nh-icon { width: 46%; height: 46%; }
.pt-node.is-on { transform: translate(-50%, -50%) scale(1); opacity: 1; color: var(--nh-btn-primary-text); background: var(--nh-btn-primary-bg); border-color: transparent; box-shadow: var(--nh-shadow-glow); }
.pt-node--pub { opacity: 0.35; }
.pt-node--pub.is-on { background: var(--nh-highlight); color: var(--nh-bg); }

/* the form */
.pt-form { grid-area: form; display: grid; gap: var(--nh-space-5); min-width: 0; }
.pt-progress { display: grid; gap: var(--nh-space-3); }
.pt-progress__label { font-family: var(--nh-font-display); font-size: var(--nh-fs-sm); color: var(--nh-text-muted); font-variant-numeric: tabular-nums; }
.pt-progress__bar { height: 3px; border-radius: 3px; background: var(--nh-border); overflow: hidden; }
.pt-progress__bar span { display: block; height: 100%; background: var(--nh-accent-strong); transform-origin: 0 50%; transform: scaleX(0.16); transition: transform var(--nh-dur-slower) var(--nh-ease-cinema); }
.pt-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nh-space-2); }
.pt-steps__btn {
  min-height: var(--nh-tap); padding: 0 0.8rem 0 0.35rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--nh-radius-pill);
  border: 1px solid var(--nh-border);
  background: transparent; color: var(--nh-text-muted);
  font-family: var(--nh-font-display); font-size: var(--nh-fs-sm);
  transition: background-color var(--nh-dur-fast), color var(--nh-dur-fast), border-color var(--nh-dur-fast);
}
.pt-steps__btn:not(:disabled):hover { border-color: var(--nh-border-strong); color: var(--nh-text); }
/* a step not reached yet reads at full contrast (--nh-text-muted, 7:1+); its state shows in the dashed number ring */
.pt-steps__btn:disabled { cursor: default; }
.pt-steps__btn:disabled:not(.is-done) .pt-steps__n { border-style: dashed; }
.pt-steps__btn:focus-visible { border-radius: var(--nh-radius-pill); }
.pt-steps__n { width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--nh-border-strong); font-size: var(--nh-fs-xs); font-variant-numeric: tabular-nums; }
@media (max-width: 420px) { .pt-steps { gap: 0.3rem; flex-wrap: nowrap; } .pt-steps__btn { padding: 0 0.6rem 0 0.3rem; gap: 0.35rem; } .pt-steps__n { width: 1.6rem; height: 1.6rem; } }
.pt-steps__btn[aria-current="step"] { color: var(--nh-heading); border-color: var(--nh-accent-strong); background: var(--nh-accent-soft); }
.pt-steps__btn[aria-current="step"] .pt-steps__n { background: var(--nh-accent-strong); border-color: transparent; color: var(--nh-bg); }
.pt-steps__btn.is-done .pt-steps__n { border-color: var(--nh-accent-strong); color: var(--nh-accent); }

.pt-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--nh-space-4); }
.pt-step__q { padding: 0; font-family: var(--nh-font-display); font-size: var(--nh-fs-2xl); font-weight: var(--nh-weight-medium); line-height: var(--nh-lh-snug); color: var(--nh-heading); letter-spacing: var(--nh-tracking-heading); margin-bottom: var(--nh-space-4); }
.pt-step__q:focus-visible { outline-offset: 6px; }
.pt-step__hint { display: block; margin-top: var(--nh-space-1); font-family: var(--nh-font-text); font-size: var(--nh-fs-sm); font-weight: var(--nh-weight-regular); color: var(--nh-text-muted); letter-spacing: 0; }

.pt-choices { display: grid; gap: var(--nh-space-2); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .pt-choices--topics, .pt-choices--blocks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pt-choice { position: relative; display: block; cursor: pointer; }
.pt-choice input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pt-choice__box {
  display: flex; align-items: center; gap: var(--nh-space-3);
  min-height: 3.5rem; height: 100%;
  padding: var(--nh-space-3) var(--nh-space-4);
  border-radius: var(--nh-radius-md);
  border: 1px solid var(--nh-border);
  background: var(--nh-surface);
  color: var(--nh-text);
  transition: border-color var(--nh-dur-fast), background-color var(--nh-dur-fast), box-shadow var(--nh-dur-base);
}
.pt-choice__t { display: grid; gap: 2px; font-family: var(--nh-font-display); font-weight: var(--nh-weight-medium); line-height: 1.25; min-width: 0; }
.pt-choice__t small { font-family: var(--nh-font-text); font-weight: var(--nh-weight-regular); font-size: var(--nh-fs-sm); color: var(--nh-text-muted); }
.pt-choice__icon { width: 22px; height: 22px; color: var(--nh-accent); }
.pt-choice__tick { width: 18px; height: 18px; margin-left: auto; opacity: 0; color: var(--nh-accent); transition: opacity var(--nh-dur-fast); }
.pt-choice:hover .pt-choice__box { border-color: var(--nh-border-strong); }
.pt-choice input:checked + .pt-choice__box { border-color: var(--nh-accent-strong); background: var(--nh-accent-soft); box-shadow: inset 0 0 0 1px var(--nh-accent-strong); }
.pt-choice input:checked + .pt-choice__box .pt-choice__tick { opacity: 1; }
.pt-choice input:focus-visible + .pt-choice__box { outline: 2px solid var(--nh-focus); outline-offset: 3px; box-shadow: 0 0 0 6px var(--nh-focus-halo); }
/* the radio's own dot, so a choice never rests on colour alone */
.pt-choices--topics .pt-choice__box::before, .pt-choices--pubs .pt-choice__box::after {
  content: ""; flex: none; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1.5px solid var(--nh-border-strong); box-shadow: inset 0 0 0 4px var(--nh-surface);
  transition: background-color var(--nh-dur-fast), border-color var(--nh-dur-fast);
}
.pt-choices--pubs .pt-choice__box::after { margin-left: auto; order: 9; }
.pt-choices--topics .pt-choice input:checked + .pt-choice__box::before,
.pt-choices--pubs .pt-choice input:checked + .pt-choice__box::after { border-color: var(--nh-accent-strong); background: var(--nh-accent-strong); box-shadow: inset 0 0 0 3px var(--nh-surface); }

.pt-error { display: flex; gap: var(--nh-space-2); align-items: center; color: var(--nh-warn); font-size: var(--nh-fs-sm); }
.pt-error .nh-icon { width: 18px; height: 18px; }

.pt-nav { display: flex; flex-wrap: wrap; gap: var(--nh-space-3); align-items: center; }
.pt-nav [data-pt-next] { margin-left: auto; }
.pt-nav [data-pt-back][hidden] + [data-pt-next] { margin-left: 0; }

.pt-done { display: grid; gap: var(--nh-space-3); justify-items: start; }
.pt-done:focus-visible { outline-offset: 8px; border-radius: var(--nh-radius-md); }
.pt-done__title { font-family: var(--nh-font-display); font-size: var(--nh-fs-2xl); color: var(--nh-heading); line-height: var(--nh-lh-snug); }
.pt-done__text { color: var(--nh-text-muted); max-width: 40ch; margin-bottom: var(--nh-space-2); }

/* the journey card */
.pt-card {
  grid-area: card;
  display: grid; gap: var(--nh-space-3);
  padding: var(--nh-space-5);
  border-radius: var(--nh-radius-lg);
  background: var(--nh-surface);
  border: 1px solid var(--nh-border);
  box-shadow: var(--nh-shadow-2);
  transition: border-color var(--nh-dur-slow), box-shadow var(--nh-dur-slow);
}
.pt-card.is-live { border-color: var(--nh-accent-strong); box-shadow: var(--nh-shadow-glow); }
.pt-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--nh-space-3); }
.pt-card__eyebrow { font-family: var(--nh-font-display); font-size: var(--nh-fs-xs); letter-spacing: var(--nh-tracking-eyebrow); text-transform: uppercase; color: var(--nh-text-muted); }
.pt-card__status { font-size: var(--nh-fs-xs); font-family: var(--nh-font-display); padding: 0.25rem 0.7rem; border-radius: var(--nh-radius-pill); border: 1px solid var(--nh-border-strong); color: var(--nh-text-muted); }
.pt-card.is-live .pt-card__status { border-color: var(--nh-ok); color: var(--nh-ok); }
.pt-card__title { font-size: var(--nh-fs-xl); }
.pt-card__blocks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--nh-space-2); }
.pt-card__blocks:empty { display: none; }
.pt-card__blocks li { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem 0.35rem 0.55rem; border-radius: var(--nh-radius-pill); background: var(--nh-surface-2); font-size: var(--nh-fs-sm); }
.pt-card__blocks .nh-icon { width: 16px; height: 16px; color: var(--nh-accent); }
.pt-card__for { color: var(--nh-text-muted); font-size: var(--nh-fs-sm); }
.pt-card__for:empty { display: none; }

/* ======================= 4. what partners get ======================= */
.pt-gets { padding-block: var(--nh-space-8); }
.pt-gets__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); background: var(--nh-divider); border-radius: var(--nh-radius-lg); overflow: hidden; border: 1px solid var(--nh-border); }
@media (min-width: 640px) { .pt-gets__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pt-gets__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-gets__item { display: grid; gap: var(--nh-space-2); align-content: start; padding: var(--nh-space-6) var(--nh-space-5); background: var(--nh-bg); }
.pt-gets__icon { width: 3rem; height: 3rem; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--nh-border-strong); color: var(--nh-accent); margin-bottom: var(--nh-space-2); box-shadow: 0 0 0 6px var(--nh-accent-soft); }
.pt-gets__icon .nh-icon { width: 22px; height: 22px; }
.pt-gets__t { font-size: var(--nh-fs-xl); }
.pt-gets__d { color: var(--nh-text-muted); }

/* ======================= 5. the door ======================= */
.pt-door { position: relative; overflow: clip; padding-block: var(--nh-space-10) var(--nh-section-y); text-align: center; isolation: isolate; }
.pt-door__rings { position: absolute; left: 50%; top: 50%; width: min(150vw, 70rem); height: auto; aspect-ratio: 1; max-width: none; transform: translate(-50%, -50%); z-index: -1; overflow: visible; pointer-events: none; }
.pt-door__rings circle { fill: none; stroke: var(--nh-accent-strong); stroke-width: 0.25; opacity: calc(0.42 - var(--i) * 0.05); transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .pt-door__rings circle { animation: pt-breathe 9s var(--nh-ease-in-out) infinite; animation-delay: calc(var(--i) * -0.9s); }
}
@keyframes pt-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
.pt-door__inner { display: grid; justify-items: center; gap: var(--nh-space-4); }
.pt-door__title { max-width: 16ch; }
.pt-door__lead { margin-inline: auto; }
.pt-door__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--nh-space-3); margin-top: var(--nh-space-3); }
.pt-door__more { font-size: var(--nh-fs-sm); }

@media (max-width: 480px) {
  .pt-door__actions .nh-btn, .pt-open__actions .nh-btn { width: 100%; }
  .pt-open__actions { width: 100%; }
}

/* ======================= reduced motion ======================= */
@media (prefers-reduced-motion: reduce) {
  .pt-open__rings circle, .pt-open__disc { transform: none; transition: none; }
  .pt-stage__arc, .pt-node, .pt-stage__people circle, .pt-progress__bar span { transition-duration: 1ms; transition-delay: 0s; }
}