/* Selected current-app details, adapted as website figures. No app runtime.
   Hallmark · component scope · atmospheric Night Court · app chartreuse.
   Pre-emit critique: P5 H4 E4 S5 R5 V4. */
.product-highlights { margin-top: var(--space-2xl); }
.product-highlight { display: grid; align-items: center; gap: var(--space-xl); padding-block: var(--space-2xl); border-top: var(--rule-hair) solid var(--color-rule); }
.product-highlight > * { min-width: 0; }
.highlight-copy .eyebrow { color: var(--color-muted); }
.highlight-copy h3 { font-size: clamp(2rem, 3.3vw, 3rem); font-weight: 500; line-height: 1.1; letter-spacing: var(--tracking-display); max-width: 14ch; }
.highlight-copy > p:not(.eyebrow) { margin-top: var(--space-md); max-width: 34ch; color: var(--color-neutral); }
.highlight-copy .text-link { margin-top: var(--space-sm); }
.product-detail { width: 100%; max-width: 36rem; margin-inline: auto; }
.product-detail figcaption { margin-top: var(--space-sm); color: var(--color-muted); font-size: var(--text-xs); }
.detail-card { border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink-2); padding: clamp(1.25rem, 3vw, 2.5rem); }
.detail-card__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.detail-label { font-size: var(--text-xs); font-weight: 550; letter-spacing: var(--tracking-label); text-transform: uppercase; line-height: 1.4; }
.life-state { color: var(--color-accent); font-size: var(--text-sm); }
.life-reading { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block: var(--space-xl); }
.life-reading strong { color: var(--color-ink); font: 400 clamp(5rem, 9vw, 8rem)/.9 var(--font-display); letter-spacing: -.07em; }
.life-reading > span { font-size: var(--text-lg); line-height: 1.4; }
.life-reading small { display: block; font-size: var(--text-sm); color: var(--color-muted); }
.life-meter { height: .5rem; border-radius: var(--radius-pill); overflow: hidden; background: var(--color-rule); }
.life-meter span { display: block; width: 62%; height: 100%; border-radius: inherit; background: var(--color-accent); }
.life-footer { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); }
.highlight-copy > p.highlight-release { font-size: var(--text-sm); color: var(--color-accent); }
.court-figure { max-width: 30rem; }
.court-detail { width: 100%; padding: clamp(1rem, 2.5vw, 2rem); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.court-detail__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); }
.court-detail__header .detail-label { color: var(--color-ink-2); }
.court-detail__sets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xs); margin-block: var(--space-md); }
.court-detail__sets > div { display: flex; flex-direction: column; gap: var(--space-2xs); }
.court-detail__sets dt { color: var(--color-muted); font-size: var(--text-xs); }
.court-detail__sets dd { order: -1; color: var(--color-ink); font: 400 clamp(1.75rem, 3.5vw, 2.5rem)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.court-map { position: relative; width: 100%; max-width: 20rem; aspect-ratio: 688 / 1024; margin-inline: auto; overflow: hidden; border-radius: var(--radius-card-sm); isolation: isolate; }
.court-map > img { width: 100%; height: 100%; object-fit: contain; }
.court-map__zone { position: absolute; z-index: 1; display: grid; place-items: center; border: 1px dashed color-mix(in oklch, var(--color-ink) 45%, transparent); border-radius: var(--radius-button); background: color-mix(in oklch, var(--color-paper) 30%, transparent); color: var(--color-ink-2); font-size: .6875rem; line-height: 1; font-weight: 500; }
.court-map__zone--marked { background: color-mix(in oklch, var(--color-accent) 50%, transparent); border: var(--rule-hair) solid var(--color-accent); color: var(--color-accent-ink); font-weight: 650; }
.court-map__mark { position: absolute; z-index: 2; width: .625rem; height: .625rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 2px color-mix(in oklch, var(--color-accent) 30%, transparent); }
.court-detail__note { display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-sm); color: var(--color-neutral); font-size: var(--text-sm); }
.court-detail__note > span { flex: 0 0 auto; width: .5rem; height: .5rem; border-radius: 50%; background: var(--color-accent); }
.match-saved { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); font-family: var(--font-display); font-size: clamp(1.5rem, 2.5vw, 2rem); line-height: 1.2; letter-spacing: var(--tracking-display); }
.match-saved svg { width: 1.75rem; height: 1.75rem; flex: 0 0 auto; color: var(--color-accent); }
.match-score { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.match-result { font-size: var(--text-sm); color: var(--color-accent); }
.match-result time { display: block; margin-top: var(--space-3xs); color: var(--color-muted); font-size: var(--text-xs); }
.match-sets { display: flex; gap: var(--space-md); color: var(--color-ink); font: 400 clamp(2rem, 4.3vw, 3.5rem)/1 var(--font-display); letter-spacing: var(--tracking-display); }
.match-note { padding-top: var(--space-lg); }
.match-note .detail-label { color: var(--color-muted); }
.match-note > p:last-child { margin-top: var(--space-xs); font-size: var(--text-base); line-height: 1.6; }
.match-focus { margin-top: var(--space-lg); padding-left: var(--space-sm); border-left: var(--rule-fine) solid var(--color-accent); }
.match-focus .detail-label { color: var(--color-accent); }
.match-focus > p:last-child { margin-top: var(--space-xs); font-size: var(--text-base); line-height: 1.6; }
.tracker-hero .product-detail figcaption { color: var(--color-sky-muted); }
.tracker-hero__grid.teaser-tracker-hero { padding-bottom: var(--space-2xl); }
.guide-highlight { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-2xl); }
.guide-highlight__grid { display: grid; gap: var(--space-xl); align-items: center; }
.guide-highlight h2 { max-width: 15ch; }
.guide-highlight__copy > p:not(.eyebrow) { max-width: 35ch; color: var(--color-neutral); margin-top: var(--space-md); }
.guide-highlight__copy .text-link { margin-top: var(--space-md); }
@media (min-width: 48rem) {
  .product-highlight { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: var(--space-2xl); padding-block: var(--space-3xl); }
  .product-highlight--court { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
  .product-highlight--court .highlight-copy { grid-column: 2; grid-row: 1; padding-left: var(--space-lg); }
  .product-highlight--court .product-detail { grid-column: 1; grid-row: 1; }
  .guide-highlight__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2xl); }
  .tracker-hero__grid.teaser-tracker-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: var(--space-2xl); }
}
@media (max-width: 24rem) {
  .match-sets { gap: var(--space-xs); }
}

/* Current engine visuals, selectively adapted for homepage highlights 01 and 03. */
.tension-figure, .finder-figure { max-width: 34rem; }
.tension-source, .finder-source { font-size: var(--text-xs); color: var(--color-accent); }
.tension-dial { display: block; width: 100%; max-width: 29rem; margin: var(--space-xl) auto var(--space-md); overflow: visible; }
.tension-dial__track { fill: none; stroke: var(--color-paper-3); stroke-width: 14; stroke-linecap: round; }
.tension-dial__range { fill: none; stroke: color-mix(in oklch, var(--color-accent) 38%, transparent); stroke-width: 14; }
.tension-dial__tick { stroke: var(--color-rule-2); stroke-width: 1.5; }
.tension-dial__tick--major { stroke: var(--color-muted); stroke-width: 2; }
.tension-dial__limit { fill: var(--color-muted); font-family: var(--font-body); font-size: 9px; text-anchor: middle; }
.tension-dial__recorded { stroke: var(--color-ink); stroke-width: 3; stroke-linecap: round; }
.tension-dial__pick { fill: var(--color-accent); stroke: var(--color-paper-2); stroke-width: 3; }
.tension-dial__halo { fill: color-mix(in oklch, var(--color-accent) 25%, transparent); }
.tension-dial__value { fill: var(--color-ink); font-family: var(--font-display); font-size: 44px; font-weight: 500; text-anchor: middle; letter-spacing: -.02em; }
.tension-dial__unit { fill: var(--color-muted); font-family: var(--font-body); font-size: 12px; text-anchor: middle; }
.tension-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2xs) var(--space-sm); font-size: var(--text-xs); color: var(--color-neutral); }
.tension-legend span { white-space: nowrap; }
.tension-legend i { display: inline-block; width: .75rem; height: .1875rem; border-radius: var(--radius-pill); vertical-align: middle; margin-right: var(--space-3xs); }
.tension-legend__pick { background: var(--color-accent); }
.tension-legend__recorded { background: var(--color-ink); }
.tension-legend__range { background: color-mix(in oklch, var(--color-accent) 38%, transparent); }
.tension-detail__note { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); color: var(--color-muted); font-size: var(--text-sm); line-height: 1.6; }
.finder-map { display: block; width: 100%; margin-top: var(--space-lg); }
.finder-map__frame { fill: var(--color-paper); stroke: var(--color-rule); }
.finder-map__grid { stroke: var(--color-rule); stroke-width: 1; stroke-dasharray: 2 4; }
.finder-map__target { fill: color-mix(in oklch, var(--color-accent) 12%, transparent); stroke: color-mix(in oklch, var(--color-accent) 55%, transparent); stroke-dasharray: 4 4; }
.finder-map__others { fill: var(--color-rule-2); }
.finder-map__current { fill: var(--color-paper); stroke: var(--color-ink); stroke-width: 2.5; }
.finder-map__current-label { fill: var(--color-ink); font-family: var(--font-body); font-size: 10.5px; font-weight: 500; text-anchor: middle; }
.finder-map__pick { fill: var(--color-accent); }
.finder-map__number { fill: var(--color-accent-ink); font-family: var(--font-display); font-size: 11px; font-weight: 600; text-anchor: middle; }
.finder-map__axis { fill: var(--color-muted); font-family: var(--font-body); font-size: 10px; }
.finder-detail__label { margin-top: var(--space-md); color: var(--color-muted); font-size: var(--text-xs); }
.finder-target-legend { display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-xs); color: var(--color-neutral); font-size: var(--text-xs); }
.finder-target-legend > span { width: .875rem; height: .625rem; border-radius: 50%; border: 1px dashed color-mix(in oklch, var(--color-accent) 70%, transparent); background: color-mix(in oklch, var(--color-accent) 12%, transparent); }
.finder-picks { display: grid; gap: 0; margin: var(--space-2xs) 0 0; padding: 0; list-style: none; }
.finder-picks li { display: flex; align-items: center; gap: var(--space-xs); padding-block: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule); }
.finder-picks li:last-child { padding-bottom: 0; }
.finder-picks li > span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; flex: 0 0 auto; border-radius: 50%; color: var(--color-accent-ink); background: var(--color-accent); font-family: var(--font-display); font-size: var(--text-xs); }
.finder-picks p { font-family: var(--font-display); font-size: clamp(.9375rem, 1.6vw, 1.125rem); color: var(--color-ink-2); line-height: 1.4; }
@media (max-width: 30rem) {
  .tension-dial__limit { font-size: 12px; }
  .finder-map__axis { font-size: 14px; }
  .finder-map__current-label, .finder-map__number { font-size: 13.5px; }
}

/* Original website flow with selected app figures in place of full screens. */
.selected-section > * { min-width: 0; }
.selected-section h2 { max-width: 15ch; }
.selected-section .text-link { margin-top: var(--space-lg); }
.selected-section p.highlight-release { margin-top: var(--space-md); color: var(--color-accent); font-size: var(--text-sm); }
.equipment-copy > p:not(.eyebrow) { margin-top: var(--space-lg); max-width: 40ch; color: var(--color-neutral); }
.selected-tracker-hero { padding-bottom: var(--space-2xl); }
.guide-app.selected-guide { grid-template-columns: minmax(0, 1fr); }
.selected-guide .detail-card__header p { margin: 0; }
.selected-guide .detail-card p.detail-label { font-size: var(--text-xs); line-height: 1.4; }
.selected-guide .detail-card .tension-detail__note { font-size: var(--text-sm); line-height: 1.6; margin-top: var(--space-lg); }
.tracker-trends--text .section-lede { margin-top: 0; }
@media (min-width: 40rem) {
  .selected-tracker-hero { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
}
@media (max-width: 39.99rem) {
  .selected-section.equipment-section .equipment-copy { grid-row: 1; }
}

/* A schematic court glimpse showing selected player-entered areas. */
.court-diagram { display: block; width: 100%; max-width: 24rem; margin: 0 auto; }
.court-diagram__surface { fill: color-mix(in oklch, var(--color-accent) 5%, var(--color-paper-2)); }
.court-diagram__lines { fill: none; stroke: color-mix(in oklch, var(--color-ink) 40%, transparent); stroke-width: 1.25; }
.court-diagram__net { fill: none; stroke: var(--color-muted); stroke-width: 2; stroke-dasharray: 3 3; }
.court-diagram__halos { fill: color-mix(in oklch, var(--color-accent) 12%, transparent); }
.court-diagram__marks { fill: var(--color-accent); }

/* Real app court image without the surrounding interface card. */
.court-realistic { position: relative; width: 100%; max-width: 22rem; aspect-ratio: 688 / 1024; margin-inline: auto; }
.court-realistic > img { display: block; width: 100%; height: 100%; object-fit: contain; border: 0; border-radius: 0; }
.court-realistic__mark { position: absolute; width: .75rem; height: .75rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 0 4px color-mix(in oklch, var(--color-accent) 18%, transparent); }
.court-figure:has(.court-realistic) { max-width: 22rem; }

/* One selected Patterns reading, adapted from the app's five-match visual. */
.patterns-figure { max-width: 32rem; }
.patterns-detail { padding-block: var(--space-sm); }
.patterns-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.patterns-heading .detail-label { color: var(--color-muted); }
.patterns-heading > span { color: var(--color-accent); font-size: var(--text-xs); }
.patterns-number { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.patterns-title { margin-top: var(--space-sm); color: var(--color-ink); font: 500 clamp(1.5rem, 2.5vw, 2rem)/1.2 var(--font-display); letter-spacing: var(--tracking-display); max-width: 18ch; }
.patterns-reading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: clamp(1rem, 3vw, 2.5rem); margin-block: var(--space-xl); }
.patterns-frequency { display: flex; flex-direction: column; gap: var(--space-xs); color: var(--color-muted); font-size: var(--text-xs); white-space: nowrap; }
.patterns-frequency strong { color: var(--color-ink); font: 500 clamp(2.75rem, 5vw, 4rem)/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.patterns-frequency strong > span { color: var(--color-muted); font-size: .5em; }
.patterns-timeline { min-width: 0; }
.patterns-timeline > p { color: var(--color-muted); font-size: var(--text-xs); margin-bottom: var(--space-sm); text-align: right; }
.patterns-matches { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2xs); list-style: none; margin: 0; padding: 0; }
.patterns-matches li { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; color: var(--color-muted); font-size: var(--text-xs); text-align: center; font-variant-numeric: tabular-nums; }
.patterns-mark { height: 2rem; border: var(--rule-hair) solid var(--color-rule-2); border-radius: .25rem; background: var(--color-paper-2); }
.patterns-matches .is-present .patterns-mark { background: var(--color-accent); border-color: var(--color-accent); }
.patterns-evidence { border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }
.patterns-evidence .detail-label { color: var(--color-muted); }
.patterns-evidence > span { display: inline-block; margin-top: var(--space-sm); padding: .375rem .75rem; border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); color: var(--color-ink-2); font-size: var(--text-sm); }
.tracker-hero .patterns-detail { padding: clamp(1.25rem, 3vw, 2rem); background: var(--color-paper); }
.patterns-matches .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Three concise examples: two recurring difficulties and one strength. */
.patterns-example { padding-block: var(--space-md); }
.patterns-example + .patterns-example { border-top: var(--rule-hair) solid var(--color-rule); }
.patterns-example:last-child { padding-bottom: 0; }
.patterns-example .patterns-number { margin-top: 0; }
.patterns-example .patterns-title { margin-top: var(--space-xs); font-size: clamp(1.25rem, 2vw, 1.5rem); max-width: none; }
.patterns-example .patterns-reading { margin-block: var(--space-sm); gap: var(--space-lg); }
.patterns-example .patterns-frequency strong { font-size: 2.75rem; }
.patterns-example .patterns-mark { height: 1.5rem; }
.patterns-example .patterns-evidence { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-sm); border: 0; padding-top: 0; }
.patterns-example .patterns-evidence > span { margin-top: 0; font-size: var(--text-xs); padding: .25rem .625rem; }
.patterns-example .patterns-evidence .detail-label { font-size: .625rem; }
.patterns-positive { color: var(--color-neutral); font-size: var(--text-sm); line-height: 1.5; }

/* Selected My setup card, preserving the current app's photograph geometry. */
.my-setup-figure { max-width: 34rem; }
.my-setup-card { position: relative; width: 100%; aspect-ratio: 1315 / 1197; overflow: hidden; isolation: isolate; border-radius: var(--radius-card-sm); background: var(--color-paper-2); }
.my-setup-photo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.my-setup-card::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--color-paper) 72%, transparent) 0%, color-mix(in srgb, var(--color-paper) 52%, transparent) 40%, transparent 88%); }
.my-setup-heading, .my-setup-facts, .my-setup-latest { position: absolute; z-index: 2; left: 4.5%; color: var(--color-ink); }
.my-setup-heading { top: 5%; max-width: 53%; display: flex; align-items: center; gap: .5rem; padding-bottom: .625rem; border-bottom: var(--rule-hair) solid color-mix(in srgb, var(--color-ink) 30%, transparent); font-size: clamp(.6875rem, 1.15vw, .875rem); font-weight: 650; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.my-setup-number { display: grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; color: var(--color-accent-ink); background: var(--color-accent); font-size: .625rem; letter-spacing: 0; }
.my-setup-facts { top: 23%; bottom: 29%; width: 53%; display: flex; flex-direction: column; gap: .6rem; margin: 0; }
.my-setup-facts > div:last-child { margin-top: auto; }
.my-setup-facts dt, .my-setup-latest > p { color: var(--color-ink-2); font-size: clamp(.625rem, .95vw, .75rem); font-weight: 600; line-height: 1.2; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.my-setup-facts dd { margin: .25rem 0 0; font-size: clamp(.8125rem, 1.6vw, 1.1875rem); font-weight: 500; line-height: 1.25; }
.my-setup-gauge { display: block; margin-top: .15rem; color: var(--color-accent); font-size: clamp(.6875rem, 1.15vw, .875rem); }
.my-setup-facts .my-setup-tension { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.my-setup-latest { top: 81%; bottom: 3%; width: 53%; }
.my-setup-latest > span { display: block; margin-top: .3rem; font-size: clamp(.6875rem, 1.1vw, .875rem); line-height: 1.35; }
@media (max-width: 30rem) { .my-setup-facts { gap: .35rem; } }

/* Selected Player DNA answers, adapted as a static website profile.
   Hallmark · component scope · atmospheric Night Court · existing tokens.
   Pre-emit critique: P5 H4 E4 S5 R5 V4. */
.player-dna-figure { max-width: 34rem; }
.player-dna-card { padding: clamp(1.25rem, 3vw, 2.5rem); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card-sm); background: var(--color-paper); color: var(--color-ink); }
.player-dna-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.player-dna-heading > p { color: var(--color-ink-2); font-size: var(--text-xs); font-weight: 500; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.player-dna-heading > img { display: block; width: 2rem; height: 2rem; flex: 0 0 auto; mix-blend-mode: screen; }
.player-dna-style { padding-block: clamp(2rem, 4vw, 3.5rem); }
.player-dna-style > p, .player-dna-facts dt { color: var(--color-muted); font-size: var(--text-xs); line-height: 1.4; }
.player-dna-style > h3 { margin-top: var(--space-sm); color: var(--color-accent); font: 500 clamp(2.5rem, 4.2vw, 4rem)/1.03 var(--font-display); letter-spacing: var(--tracking-display); overflow-wrap: anywhere; }
.player-dna-facts { margin: 0; }
.player-dna-facts > div { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: baseline; gap: var(--space-xs); padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.player-dna-facts > div:last-child { padding-bottom: 0; }
.player-dna-facts dd { margin: 0; color: var(--color-ink-2); font: 400 clamp(1rem, 1.5vw, 1.25rem)/1.4 var(--font-display); }
@media (max-width: 30rem) {
  .player-dna-facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); padding-block: var(--space-sm); }
}