/* Image, color surface, and live content occupy independent, isolated planes. */
:root {
  --depth-paper: #FFFCF8;
  --depth-underlay: #EBD9C9;
  --depth-shadow: 0 24px 52px -28px rgb(37 32 28 / 35%), 0 5px 12px -6px rgb(37 32 28 / 12%);
  --depth-shadow-high: 0 38px 64px -30px rgb(23 35 61 / 35%), 0 10px 20px -12px rgb(23 35 61 / 22%);
  --depth-radius: 16px;
}
.depth-scene {position:relative;isolation:isolate}
.depth-backdrop {position:absolute;inset:0;z-index:-3;overflow:hidden;border-radius:inherit;pointer-events:none;background:#F4EBDD}
.depth-backdrop img {display:block;width:100%;height:100%;object-fit:cover;object-position:70% 55%}
.depth-backdrop--dark {background:var(--navy)}
.depth-backdrop--dark img {opacity:.09;mix-blend-mode:luminosity}
.depth-panel {position:relative;isolation:isolate;border-radius:var(--depth-radius)}
.depth-panel::before,.depth-panel::after {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.depth-panel::before {z-index:-1;background:var(--depth-paper);box-shadow:var(--depth-shadow)}
.depth-panel::after {z-index:-2;background:var(--depth-underlay);transform:translate(-10px,12px)}
.site-header {position:relative;z-index:5}

/* The text rests on a solid foreground sheet; the paths float over the image. */
.personalize-home .hero.depth-scene,.persona-hero.depth-scene,.directory-hero.depth-scene {
  max-width:1368px;width:calc(100% - 3rem);padding:3.5rem;gap:2.5rem;
  margin-bottom:4rem;border-radius:var(--depth-radius);
}
.personalize-home .hero.depth-scene {grid-template-columns:minmax(0,1.18fr) minmax(0,1fr)}
.hero-copy.depth-panel,.persona-copy.depth-panel {padding:2.5rem;z-index:2}
.personalize-home .hero h1 {font-size:clamp(2.75rem,4.25vw,4.5rem)}
.personalize-home .hero .intro {max-width:25rem}
.personalize-home .hero-body {font-size:1rem;max-width:31rem}
.hero-art.journey-art {z-index:1}
.hero-art .journey-svg {transform:perspective(1100px) rotateY(-12deg) rotateX(7deg) rotateZ(4deg);filter:drop-shadow(12px 26px 12px rgb(23 35 61 / 18%))}
.journey-motion {z-index:3;background:var(--depth-paper);border:0;box-shadow:0 5px 12px rgb(23 35 61 / 12%);color:var(--navy)}

/* The proposed personalized response steps forward from the darker plane. */
.personalization-difference.depth-scene {padding-block:5.5rem 6rem}
.difference-heading h2 {letter-spacing:-.035em}
.difference-states {gap:2rem;border:0;overflow:visible;align-items:start;margin-block:3rem}
.difference-states article {border:0;border-radius:var(--depth-radius)}
.difference-before {margin-top:1.75rem;background:#20304D;box-shadow:0 14px 30px -18px rgb(0 0 0 / 45%)}
.difference-after {position:relative;isolation:isolate;background:var(--blue);box-shadow:0 28px 50px -20px rgb(0 0 0 / 45%)}
.difference-after::before {content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:inherit}
.difference-after::after {content:"";position:absolute;inset:0;z-index:-2;border-radius:inherit;background:#9CB5F3;transform:translate(9px,11px)}

/* Wider editorial scenes alternate with quiet, unframed reading sections. */
.connected-life.depth-scene {margin-block:2rem;grid-template-columns:1.05fr 1fr;padding-block:3rem}
.connected-life .depth-backdrop {inset:1.5rem 0 1.5rem 18%;border-radius:var(--depth-radius)}
.connected-copy.depth-panel {padding:2.5rem}
.task-paper {position:relative;isolation:isolate;border:0;box-shadow:var(--depth-shadow-high)}
.task-paper::before,.task-paper::after {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.task-paper::before {background:var(--white);z-index:-1}
.task-paper::after {background:#DCE5F6;transform:translate(12px,14px) rotate(1.5deg);z-index:-2}
.fit-section.depth-scene {background:transparent;padding-top:4rem;padding-bottom:4rem;margin-block:2rem 4rem}
.fit-heading {grid-template-columns:1.1fr 1fr;padding-block:2.5rem}
.fit-heading>.depth-backdrop {inset:0 -1.5rem;border-radius:var(--depth-radius)}
.fit-heading>.depth-backdrop img {object-position:65% 75%}
.fit-copy.depth-panel {padding:2.25rem}
.fit-dimensions,.fit-voice,.fit-next {position:relative;z-index:1}
.fit-dimensions {background:var(--cream);padding-top:1rem}
.fit-voice {background:var(--depth-paper);padding:2rem;border:0;border-radius:var(--depth-radius);box-shadow:var(--depth-shadow)}
.definition.depth-scene {box-shadow:0 16px 30px -22px rgb(23 35 61 / 40%)}
.closing.depth-scene {margin-block:2rem 3rem;padding:3rem;border:0;border-radius:var(--depth-radius);box-shadow:var(--depth-shadow)}
.closing.depth-scene .depth-backdrop img {opacity:.55;object-position:50% 30%}
.closing.depth-scene h2 {max-width:35rem}
.persona-page .closing.depth-scene h2 {margin-inline:auto}

/* Every edition inherits the same physical layers, with the example on top. */
.persona-hero.depth-scene {grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.persona-hero h1 {font-size:clamp(2.5rem,4.1vw,4rem)}
.persona-intro {font-size:1rem}
.persona-tone.depth-panel {background:transparent;border:0;padding:2.25rem;--depth-paper:var(--navy);--depth-underlay:var(--blue);color:var(--cream);transform:translateY(2.5rem)}
.persona-tone.depth-panel::after {transform:translate(12px,14px)}
.persona-tone.depth-panel::before {box-shadow:var(--depth-shadow-high)}
.persona-tone .persona-mark {background:var(--cream);padding:7px;width:62px;height:76px;border-radius:12px}
.persona-tone .small-label {color:#C8D4ED}
.persona-tone blockquote {border-color:#526079}
.persona-tone .fine-print {color:#C8D4ED}
.persona-included.depth-scene {background:var(--navy)}
.persona-included .included-list {padding:2rem;background:var(--blue);border-radius:var(--depth-radius);box-shadow:0 24px 40px -20px rgb(0 0 0 / 35%)}
.persona-included .included-list>div:last-child {margin-bottom:0;border:0;padding-bottom:0}
.persona-directory-page .directory-hero.depth-scene {padding:3rem;min-height:500px;display:flex;align-items:center}
.directory-copy.depth-panel {width:min(100%,48rem);padding:2.5rem}
.directory-copy>p:not(.intro) {max-width:36rem}
.directory-copy .directory-note {font-size:.875rem;margin-top:1.5rem}
.directory-hero h1 {font-size:clamp(2.5rem,4.5vw,4rem)}
.persona-directory a {border:0;box-shadow:var(--depth-shadow);background:var(--depth-paper);transition:background-color .15s,box-shadow .15s}
.persona-directory a:hover {background:#F3F6FF;box-shadow:var(--depth-shadow-high)}
.persona-directory a:focus-visible {outline:3px solid var(--blue);outline-offset:5px}
.quiz-builder {box-shadow:var(--depth-shadow-high)}
.quiz-preferences {box-shadow:var(--depth-shadow)}

@media(max-width:1050px) {
  .personalize-home .hero.depth-scene,.persona-hero.depth-scene,.directory-hero.depth-scene {padding:2rem;gap:2rem;width:calc(100% - 2rem)}
  .hero-copy.depth-panel,.persona-copy.depth-panel,.connected-copy.depth-panel,.directory-copy.depth-panel {padding:1.75rem}
  .personalize-home .hero h1 {font-size:clamp(2.5rem,4.5vw,3.75rem)}
  .personalize-home .hero .intro {font-size:.8125rem}
  .persona-hero h1 {font-size:clamp(2.5rem,4.8vw,3.5rem)}
  .persona-tone.depth-panel {padding:1.75rem}
  .connected-life.depth-scene {gap:2rem}
  .fit-copy.depth-panel {padding:1.75rem}
  .closing.depth-scene {width:calc(100% - 4rem);padding:2rem}
}
@media(max-width:760px) {
  .personalize-home .hero.depth-scene,.persona-hero.depth-scene {grid-template-columns:1fr}
  .personalize-home .hero.depth-scene,.persona-hero.depth-scene,.persona-directory-page .directory-hero.depth-scene {width:calc(100% - 1.5rem);padding:1.75rem 1.125rem;gap:1.5rem;margin-bottom:2.5rem}
  .hero-copy.depth-panel,.persona-copy.depth-panel,.directory-copy.depth-panel {padding:1.5rem}
  .depth-panel::after {transform:translate(-6px,8px)}
  .personalize-home .hero h1 {font-size:clamp(2.125rem,8.7vw,3.5rem)}
  .personalize-home .hero .intro {font-size:.75rem}
  .personalize-home .hero-body {font-size:.9375rem}
  .personalize-home .hero-art.journey-art {max-width:340px;width:85%;padding-bottom:1.5rem;margin-block:-.75rem 0}
  .hero-art .journey-svg {transform:perspective(1000px) rotateY(-7deg) rotateX(5deg);filter:drop-shadow(8px 17px 9px rgb(23 35 61 / 16%))}
  .hero-art .journey-motion {right:-.5rem}
  .personalization-difference.depth-scene {padding-block:3.5rem}
  .difference-states {grid-template-columns:1fr;gap:1.25rem;margin-block:2rem}
  .difference-before {margin-top:0}
  .difference-after::after {transform:translate(6px,8px)}
  .difference-states article {padding:1.5rem}
  .connected-life.depth-scene {grid-template-columns:1fr;gap:1.5rem;margin-block:0;padding-block:2.5rem 1rem}
  .connected-life .depth-backdrop {inset:4rem .75rem 0;border-radius:var(--depth-radius)}
  .connected-copy.depth-panel {padding:1.5rem}
  .connected-copy h2 {font-size:2.25rem}
  .task-paper::after {transform:translate(6px,9px) rotate(1deg)}
  .fit-section.depth-scene {padding-top:1.5rem;padding-bottom:2rem;margin-block:0 2rem}
  .fit-heading>.depth-backdrop {inset:0 -.625rem}
  .fit-heading {grid-template-columns:1fr;gap:2rem;padding-block:1.5rem}
  .fit-copy.depth-panel {padding:1.5rem}
  .fit-heading h2 {font-size:2.25rem}
  .fit-voice {padding:1.5rem}
  .fit-dimensions {margin-top:2rem}
  .persona-hero h1 {font-size:clamp(2.125rem,9vw,3.5rem)}
  .persona-tone.depth-panel {transform:none;margin:0 .5rem .75rem;padding:1.5rem}
  .persona-tone.depth-panel::after {transform:translate(6px,8px)}
  .persona-included .included-list {padding:1.5rem}
  .persona-directory-page .directory-hero.depth-scene {min-height:0}
  .directory-hero h1 {font-size:clamp(2.125rem,9vw,3rem)}
  .closing.depth-scene {width:calc(100% - 2.75rem);padding:2rem 1.5rem;margin-block:1.5rem 2.5rem}
  .closing.depth-scene h2 {font-size:2.125rem}
}
@media(prefers-reduced-motion:reduce) {
  .persona-directory a {transition:none}
}
@media(forced-colors:active) {
  .depth-backdrop,.depth-panel::before,.depth-panel::after,.task-paper::before,.task-paper::after,.difference-after::before,.difference-after::after {display:none}
  .depth-panel,.task-paper,.difference-states article,.persona-directory a,.quiz-builder {border:1px solid CanvasText;box-shadow:none}
  .journey-motion {border:1px solid ButtonText}
}

/* Concrete task bands and a paper priority list give each feature its own visual. */
.handoff-visual,.priority-visual {position:relative;min-width:0;margin:0;z-index:1}
.handoff-visual {padding:1.25rem 1.25rem 4rem 0;width:100%;max-width:540px;justify-self:center}
.handoff-visual figcaption,.priority-visual figcaption {font-size:.8125rem;font-weight:600;line-height:1.5;color:var(--muted);margin-bottom:1.25rem}
.handoff-visual figcaption {padding-left:.75rem}
.handoff-bands {list-style:none;padding:0;margin:0;display:grid;gap:.875rem}
.handoff-band {--band-ink:var(--cream);--band-fill:var(--navy);--handoff:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:90px;padding:1.125rem 1.25rem;width:94%;background:var(--band-fill);color:var(--band-ink);border-radius:12px;box-shadow:0 14px 24px -15px rgb(23 35 61 / 38%);transform:translateX(calc(var(--handoff) * 12px))}
.handoff-band:nth-child(2) {--band-ink:var(--navy);--band-fill:var(--depth-paper);margin-left:5%}
.handoff-band:nth-child(3) {--band-fill:var(--blue);margin-left:1%;width:96%}
.handoff-band:nth-child(4) {--band-ink:var(--navy);--band-fill:#F5D9C3;margin-left:4%;width:91%}
.band-category {display:block;font-size:.75rem;line-height:1.5;font-weight:500;margin-bottom:.375rem}
.band-task {display:block;font-size:1.0625rem;line-height:1.45;font-weight:600;letter-spacing:-.015em}
.band-check {display:grid;place-items:center;flex:none;width:30px;height:30px;border:1px solid currentColor;border-radius:50%;transform:scale(calc(1 + var(--handoff) * .1))}
.band-check svg {width:18px;height:18px;opacity:calc(.55 + var(--handoff) * .45)}
.handoff-visual .journey-motion {right:1.5rem;bottom:0}
.priority-visual {padding:2rem;background:var(--depth-paper);border-radius:var(--depth-radius);box-shadow:var(--depth-shadow-high);isolation:isolate;max-width:480px;width:100%;justify-self:center}
.priority-visual::before,.priority-visual::after {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.priority-visual::before {z-index:-1;background:var(--depth-paper)}
.priority-visual::after {z-index:-2;background:#DCE5F6;transform:translate(10px,12px) rotate(2deg)}
.priority-list {list-style:none;padding:0;margin:0}
.priority-list li {position:relative;padding:1.25rem 0 1.25rem 1.5rem;border-top:1px solid var(--line)}
.priority-list li::before {content:"";position:absolute;left:0;top:1.625rem;width:7px;height:7px;border-radius:50%;background:var(--blue)}
.priority-list li:nth-child(2)::before {background:var(--navy)}
.priority-list li:nth-child(3)::before {background:var(--orange)}
.priority-list li:last-child {padding-bottom:0}
.priority-label {display:block;color:var(--muted);font-size:.75rem;font-weight:600;margin-bottom:.5rem}
.priority-list h3 {font-size:1.25rem;line-height:1.4;letter-spacing:-.02em;margin:0;font-weight:600}
.priority-list p {font-size:.875rem;line-height:1.65;color:var(--muted);margin:.5rem 0 0;max-width:none}
@media(max-width:1050px) and (min-width:761px) {
  .connected-life.depth-scene,.fit-heading {gap:2rem;grid-template-columns:1fr 1fr}
  .handoff-visual {padding-right:.75rem}
  .handoff-band {padding:1rem;gap:.75rem}
  .band-task {font-size:.9375rem}
  .priority-visual {padding:1.5rem}
}
@media(max-width:760px) {
  .handoff-visual {padding:.5rem .75rem 3.75rem 0;max-width:440px;margin-bottom:1rem}
  .handoff-visual figcaption {padding-left:.25rem}
  .handoff-band {min-height:86px;padding:1rem;gap:.75rem;transform:translateX(calc(var(--handoff) * 7px))}
  .band-task {font-size:1rem}
  .band-check {width:26px;height:26px}
  .band-check svg {width:16px;height:16px}
  .handoff-visual .journey-motion {right:.5rem;bottom:0}
  .priority-visual {width:calc(100% - .75rem);padding:1.5rem;margin:0 .5rem .75rem 0}
  .priority-visual::after {transform:translate(6px,8px) rotate(1deg)}
}
@media(prefers-reduced-motion:reduce) {
  .handoff-band,.band-check {transform:none!important}
  .band-check svg {opacity:1}
}
@media(forced-colors:active) {
  .handoff-band,.priority-visual {border:1px solid CanvasText;box-shadow:none}
  .priority-visual::before,.priority-visual::after {display:none}
}