/* A shared reading edge for the page; local columns serve comparison, sequence and action. */
:root {
  --gutter: max(clamp(24px, 5.4vw, 100px), calc((100vw - 1280px) / 2));
  --layout-gap: clamp(40px, 5vw, 72px);
}

.section-heading, .section-deck, .prose, .text-button,
.burden-list, .tool-duet, .benefit-row, .sample-note,
.work-nav, .work-article, .process-steps, .product-details,
.journal-layout, .first-board, .offer-rows, .offer-conditions,
.faq-list { margin-left: 0; margin-right: 0; }
.section-heading, .problem .section-heading { max-width: 1100px; }
.section-heading h2 { text-wrap: pretty; }
.prose { width: 100%; }
.sample-note { text-align: left; }
.wide-prose { max-width: none; }
.wide-prose > p { max-width: 760px; }

/* 01: three recurring burdens are a parallel summary of the preceding narrative. */
.burden-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: none; gap: var(--layout-gap); margin-top: 50px;
  padding-top: 28px; border-top: 1px solid var(--line);
}
.burden-list > div { padding: 0; }
.burden-list > div > span { position: static; display: block; margin-bottom: 14px; }
.burden-list strong { font-size: 25px; }
.burden-list p { margin-top: 16px; }

/* 02: the paper belongs to the copy; movement belongs to the image. */
.affinity {
  padding: 120px var(--gutter);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: calc(var(--layout-gap) + 24px); align-items: center; overflow: clip;
}
.reading-paper { margin: 0; padding: 0; background: none; box-shadow: none; transform: none; isolation: isolate; }
.reading-paper::before {
  content: ''; position: absolute; inset: -38px -32px;
  background: var(--paper); box-shadow: 10px 12px 0 #49334c12; z-index: -1;
}
.reading-paper > * { transform: none; }
.reading-paper .prose { font-size: 17px; }
.affinity-media { margin: 0; padding: 0; align-self: center; }
.affinity-media .film-image { aspect-ratio: 1 / 1.12; }
.affinity-media .film { transform: rotate(1.2deg); }
.affinity-media figcaption { padding-left: 0; }

/* 03: each product's explanation is attached to its film, followed by their handoff. */
.tool-duet { max-width: none; gap: var(--layout-gap); margin-bottom: 50px; }
.duet-amp { top: 0; height: calc((100vw - 2 * var(--gutter) - var(--layout-gap)) * 9 / 32); display: flex; align-items: center; }
.tool-panel { min-width: 0; }
.tool-description { margin-top: 28px; font-size: 17px; }
.tool-panel .product-logo { margin-left: 0; }
.tool-panel > p { text-align: left; }
.approach-summary { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--layout-gap); align-items: center; }
.handoff-line {
  display: grid; grid-template-columns: 1fr 24px 1fr; gap: 15px;
  width: 100%; max-width: none; margin: 0; padding: 30px 24px;
  background: var(--white); border-top: 5px solid var(--blue); border-bottom: 1px solid var(--line);
  text-align: center;
}
.handoff-line > div { min-width: 0; }
.handoff-line strong { display: block; margin-bottom: 12px; }
.handoff-line span { display: block; font-size: 13px; line-height: 1.8; }
.handoff-line b { display: block; }

/* 04–05: prose and proof share a row; the editing recording retains a wide stage. */
.benefit-row { max-width: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--layout-gap); }
.benefit-row:nth-of-type(2) { direction: ltr; }
.benefit-copy { min-width: 0; }
.recording-frame { max-width: none; margin-left: 0; margin-right: 0; }
.quality-notes { max-width: none; gap: 28px; margin-inline: 0; }
.editorial-note { max-width: 900px; border-top: 1px solid var(--line); }

/* 06: a title and its full explanation accompany the same film on the right. */
.work-nav { justify-content: flex-start; max-width: none; }
.work-article {
  max-width: none; display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  grid-template-rows: auto 1fr;
  column-gap: var(--layout-gap); padding: 70px 0 80px;
}
.work-heading {
  grid-column: 1; padding: 0; margin-bottom: 30px;
  display: grid; grid-template-columns: auto 1fr; gap: 20px 24px; align-items: center;
}
.work-index { position: static; line-height: 1; }
.work-heading > p { margin: 0; }
.work-heading h3 { grid-column: 1 / -1; font-size: 32px; }
.work-body, #work-software .work-body, #work-podcast .work-body { display: contents; }
.work-body > .prose { grid-column: 1; grid-row: 2; min-width: 0; align-self: start; }
.work-video {
  grid-column: 2; grid-row: 1 / 3; justify-self: center; align-self: center;
  width: min(100%, 340px); max-width: none; margin: 0;
}
.work-video .film-image { aspect-ratio: 9 / 16; max-height: none; }
#work-software .work-video, #work-podcast .work-video { width: 100%; }
#work-software .film-image, #work-podcast .film-image { aspect-ratio: 16 / 9; }

/* 07: four steps have an ordered two-by-two structure, distinct from the two reading notes. */
.making > .film { max-width: none; margin-inline: 0; }
.process-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: none; gap: 44px var(--layout-gap); margin: 50px 0 65px;
}
.process-steps article { display: block; padding: 26px 0 0; border-top: 3px solid var(--blue); }
.process-steps article:nth-child(n+3) { border-color: #bc6248; }
.step-number { display: block; margin: 0 0 20px; font-size: 44px; }
.process-steps h3 { font-size: 24px; }
.process-steps .prose { max-width: none; }
.making-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--layout-gap); }
.making-note, .making-note + .making-note { max-width: none; padding: 25px 0 0; border-top: 1px solid #c9c3b5; }
.making-note h3 { min-height: 3.5em; font-size: 25px; margin: 0 0 24px; }
.making-note { font-size: 17px; }

/* 08–09: comparable products and diagnostic tables use the available width. */
.product-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(6, auto); max-width: none; gap: 24px; border: 0; }
.product-detail { display: grid; grid-row: span 6; grid-template-rows: subgrid; padding: 36px 34px 40px; border-top: 5px solid var(--blue); background: #f0edfa; }
.product-detail + .product-detail { border-left: 0; border-top: 5px solid #e78062; background: var(--paper); }
.product-detail h3 { min-height: 0; margin: 0; }
.product-detail .prose { display: contents; }
.product-detail .prose > p { margin: 0; }
.product-detail .button { margin: 8px 0 0; justify-self: start; }
.product-detail ul { margin: 0; }
.diagnosis .wide-prose > p { max-width: 760px; }

/* 10: a focused reading column with a visibly separate, sticky navigation panel. */
.journal-layout { max-width: none; grid-template-columns: minmax(0, 760px) minmax(220px, 1fr); gap: var(--layout-gap); }
.journal-essays { min-width: 0; }
.journal-index { max-width: 320px; padding: 30px; background: var(--paper); border-top: 4px solid var(--blue); }
.journal-index > img { width: 92px; }
.journal-index > p { font-size: 22px; }

/* 11: the completion film accompanies the four steps instead of floating after a narrow sheet. */
.first { overflow: clip; }
.first-board { max-width: none; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: calc(var(--layout-gap) + 20px); align-items: start; }
.first-steps { max-width: none; padding: 0; background: none; box-shadow: none; isolation: isolate; }
.first-steps::before { content: ''; position: absolute; inset: -12px -28px; z-index: -1; background: var(--white); box-shadow: 9px 11px 0 #b451331d; }
.first-steps article { display: block; padding: 28px 0; }
.first-steps article > span { display: block; padding: 0; margin-bottom: 14px; }
.first-steps .prose { max-width: none; }
.first-board > .film { position: sticky; top: 110px; width: 100%; margin: 14px 0 0; }
.first-board > .film .film-image { aspect-ratio: 4 / 5; }
.first-board > .film video, .first-board > .film .video-poster { object-fit: cover; object-position: 72% center; }

/* 12: three entry routes are independent choices, with conditions in a separate paper panel. */
.offer-rows { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.offer-rows article { display: flex; flex-direction: column; gap: 0; padding: 26px 0 30px; border-top: 3px solid var(--blue); }
.offer-rows article:nth-child(2) { border-color: #e78062; }
.offer-rows article:nth-child(3) { border-color: #a391ce; }
.offer-rows article > span { display: block; margin-bottom: 18px; line-height: 1.2; }
.offer-rows h3 { padding: 0; min-height: 3.6em; margin: 0 0 20px; font-size: 24px; }
.offer-rows .prose { max-width: none; }
.offer-conditions {
  max-width: none; margin-top: 35px; padding: 36px 40px 40px; background: var(--paper);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px 48px; border: 1px solid var(--line);
}
.offer-conditions > .eyebrow { grid-column: 1 / -1; margin: 0; }
.offer-conditions .prose { max-width: 760px; }
.offer-conditions .button { margin-top: 0; align-self: end; max-width: 310px; }
.offer-conditions::before { left: -1px; right: -1px; }

/* 13–15: audience, questions and consultation each have their own reading and action structure. */
.fit-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--layout-gap); align-items: center; }
.fit-body > .prose { min-width: 0; }
.fit-body > .film { min-width: 0; transform: rotate(1.2deg); }
.fit-body .film-image { aspect-ratio: 1.45; }
.fit-body video, .fit-body .video-poster { object-fit: cover; }
.faq-list { max-width: 1100px; }
.faq-list summary { padding-left: 0; padding-right: 0; }
.faq-list details > .prose { max-width: 820px; padding: 0 0 30px; }
.consult { padding-top: 100px; }
.consult-header { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--layout-gap); align-items: center; margin-bottom: 65px; }
.consult .section-heading { margin: 0; }
.consult-header .section-heading h2 { font-size: clamp(30px, 3vw, 44px); }
.consult-art { max-width: none; margin: 0; }
.consult-art .film-image { aspect-ratio: 2.15; }
.consult-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--layout-gap); align-items: start; }
.consult-copy { max-width: none; font-size: 17px; }
.consult-copy > h3 { font-size: 25px; }
.consult-sheet { width: 100%; min-width: 0; max-width: none; margin: 0; padding: 30px; background: var(--white); box-shadow: 10px 12px 0 #b18b162e; border: 0; }
.consult-sheet::before { content: none; }
.sheet-head { display: block; }
.sheet-head > span:last-child { display: block; margin-top: 8px; }
.brief-fields { grid-template-columns: 1fr; }
.brief-actions { gap: 20px; }
.brief-actions .button { width: 100%; }

.film-dialog > header > div { min-width: 0; }
.film-dialog #close-dialog { flex-shrink: 0; white-space: nowrap; }

@media (max-width: 1100px) {
  .product-detail { padding: 30px 26px 34px; }
  .product-detail .button { font-size: 14px; padding: 16px; }
  .offer-rows { gap: 24px; }
  .offer-rows h3 { font-size: 21px; }
  .offer-conditions { display: block; padding: 32px; }
  .offer-conditions > .eyebrow { margin-bottom: 24px; }
  .offer-conditions .button { margin-top: 30px; max-width: none; }
}

@media (max-width: 980px) {
  .affinity { display: block; padding: 100px var(--gutter) 75px; }
  .reading-paper { margin-bottom: 65px; }
  .reading-paper::before { inset: -28px -20px; }
  .affinity-media { max-width: 640px; margin: 0 auto; }
  .affinity-media .film-image { aspect-ratio: 1.55; }
  .approach-summary { display: block; }
  .handoff-line { max-width: 680px; margin-top: 35px; }
  .benefit-row { display: grid; grid-template-columns: 1fr; gap: 30px; }
  .benefit-row .film { width: min(100%, 680px); margin: 0; justify-self: center; }
  .benefit-copy .prose { max-width: 760px; }
  .work-article { display: block; }
  .work-body, #work-software .work-body, #work-podcast .work-body { display: flex; flex-direction: column; gap: 35px; }
  .work-heading { max-width: 760px; }
  .work-body > .prose { max-width: 760px; }
  .work-video { margin: 0 auto; width: min(100%, 320px); }
  #work-software .work-video, #work-podcast .work-video { max-width: 680px; }
  .journal-layout { display: flex; flex-direction: column; gap: 35px; }
  .journal-index { order: -1; position: static; max-width: none; width: 100%; padding: 24px; margin: 0; }
  .journal-index > img { display: none; }
  .journal-index > p { margin-bottom: 18px; font-size: 20px; }
  .journal-index > p br { display: none; }
  .journal-index nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
  .journal-index nav a { border-top: 0; padding: 10px 0; }
  .journal-essays { width: 100%; }
  .first-board { display: block; }
  .first-board > .film { position: relative; top: auto; width: 76%; margin: 65px 0 0 auto; }
  .first-board > .film .film-image { aspect-ratio: 16 / 9; }
  .first-board > .film video, .first-board > .film .video-poster { object-fit: contain; object-position: center; }
  .offer-rows { grid-template-columns: 1fr 1fr; gap: 20px 36px; }
  .offer-rows article:nth-child(3) { grid-column: 1 / -1; }
  .offer-rows h3 { min-height: 0; }
  .fit-body { display: block; }
  .fit-body > .film { max-width: 680px; margin: 38px auto 0; }
  .fit-body .film-image { aspect-ratio: 1.8; }
  .consult-header { grid-template-columns: 1fr; gap: 30px; margin-bottom: 45px; }
  .consult-art { max-width: 540px; width: 100%; justify-self: end; }
  .consult-layout { display: block; }
  .consult-copy { max-width: 760px; }
  .consult-sheet { max-width: 760px; margin-top: 50px; padding: 36px; }
  .brief-fields { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .film-dialog > header { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; }
  .film-dialog > header > div { display: contents; }
  .film-dialog #dialog-kind { grid-column: 1; grid-row: 1; }
  .film-dialog #close-dialog { grid-column: 2; grid-row: 1; }
  .film-dialog h2 { grid-column: 1 / -1; margin: 0; }
  :root { --gutter: 24px; --layout-gap: 32px; }
  .burden-list { display: block; margin-top: 38px; padding-top: 0; border-top: 0; }
  .burden-list > div { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; padding: 24px 0; border-top: 1px solid var(--line); }
  .burden-list > div > span { grid-column: 1 / -1; margin: 0; }
  .burden-list strong { font-size: 20px; }
  .burden-list p { margin: 0; font-size: 13px; }
  .affinity { padding: 70px var(--gutter) 60px; }
  .reading-paper { margin-bottom: 50px; padding: 0; transform: none; box-shadow: none; }
  .reading-paper::before { inset: -24px -12px; }
  .reading-paper .prose { font-size: 16px; }
  .affinity-media figcaption { padding-right: 0; }
  .tool-duet { display: block; margin: 38px 0; }
  .tool-panel .product-logo { margin-left: 0; width: 220px; }
  .tool-panel > p { font-size: 16px; }
  .tool-description { font-size: 16px; margin-top: 24px; }
  .duet-amp { margin: 25px 0; height: auto; display: block; }
  .handoff-line { padding: 22px 16px; gap: 12px; }
  .handoff-line strong { font-size: 22px; }
  .handoff-line span { font-size: 12px; }
  .benefit-row { margin-bottom: 65px; }
  .benefit-row .film { width: calc(100% - 10px); }
  .recording-frame { margin-inline: -10px; }
  .work-heading { padding: 0; gap: 16px; }
  .work-heading h3 { font-size: 25px; }
  .work-article { padding: 44px 0 55px; }
  .work-video { width: min(100%, 290px); }
  .making > .film { margin: 35px -6px 20px; }
  .process-steps { grid-template-columns: 1fr; gap: 30px; margin: 38px 0 45px; }
  .process-steps article { padding: 23px 0 0; }
  .process-steps h3 { font-size: 21px; }
  .step-number { font-size: 35px; margin-bottom: 18px; }
  .making-notes { grid-template-columns: 1fr; gap: 34px; }
  .making-note h3 { min-height: 0; font-size: 23px; }
  .making-note { font-size: 16px; }
  .product-details { grid-template-columns: 1fr; gap: 28px; margin: 35px 0 45px; }
  .product-detail, .product-detail + .product-detail { padding: 28px 22px 32px; }
  .product-detail h3 { min-height: 0; font-size: 22px; }
  .product-detail .prose { font-size: 16px; }
  .product-detail .button { width: 100%; margin-top: auto; font-size: 13px; padding: 14px 12px; }
  .journal-index { padding: 22px 18px; }
  .journal-index nav { gap: 0 18px; }
  .journal-index nav a { font-size: 12px; }
  .first-steps { padding: 0; }
  .first-steps::before { inset: -4px -12px; }
  .first-steps article { padding: 24px 0; }
  .first-board > .film { width: 94%; margin-top: 45px; }
  .offer-rows { display: block; }
  .offer-rows article { padding: 24px 0 28px; }
  .offer-rows h3 { font-size: 23px; margin-bottom: 20px; }
  .offer-conditions { padding: 28px 22px 32px; margin: 24px 0 0; }
  .offer-conditions > .eyebrow { font-size: 11px; }
  .offer-conditions .button { font-size: 13px; padding: 15px 12px; }
  .faq-list details > .prose { padding: 0 0 25px; }
  .consult { padding-top: 70px; }
  .consult-header .section-heading h2 { font-size: 29px; }
  .consult-header { gap: 25px; }
  .consult-art { width: 100%; margin: 0; }
  .consult-copy { font-size: 16px; }
  .consult-copy > h3 { font-size: 23px; }
  .consult-sheet { padding: 28px 22px 32px; margin: 38px 0 0; box-shadow: 7px 8px 0 #b18b162e; }
  .brief-fields { grid-template-columns: 1fr; }
  .brief-fields label { margin-bottom: 0; }
  .sheet-head { font-size: 16px; }
  .brief-actions .button { font-size: 14px; padding: 16px 14px; }
}