.value-explorer{outline:var(--border-hairline) solid var(--border);outline-offset:calc(-1 * var(--border-hairline));border-radius:var(--radius-lg);background:var(--canvas);box-shadow:var(--shadow-raised);overflow:hidden;scroll-margin-top:var(--space-4xl)}
.value-heading{padding:var(--space-2xl);display:flex;justify-content:space-between;gap:var(--space-lg);align-items:flex-start}
.value-heading .eyebrow{margin-bottom:var(--space-md)}
.value-heading h2{font-size:var(--type-h2-font-size);line-height:var(--type-h2-line-height);margin:0}
.value-heading p:not(.eyebrow){color:var(--text-2);margin-top:var(--space-md)}
.value-example{font-size:var(--type-caption-font-size);color:var(--text-2);white-space:nowrap;border:var(--border-hairline) solid var(--border);border-radius:var(--radius-sm);padding:var(--space-xs) var(--space-sm)}
.value-chart-toolbar{padding-inline:var(--layout-card-padding);display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-md) var(--space-lg)}
.value-controls{display:grid;justify-items:start;gap:var(--space-sm)}
.value-chart-guide{flex:0 1 auto;text-align:left}
.value-chart-guide [data-view-caption]{margin:0 0 var(--space-xs);color:var(--ink-blue);font-size:var(--type-body-sm-font-size);font-weight:var(--font-weight-semibold)}
.value-toggle{justify-self:start;display:flex;gap:var(--space-xs);background:var(--surface);border:0;box-shadow:inset 0 0 0 var(--border-hairline) var(--border);padding:0;border-radius:var(--radius-md)}
.value-toggle button{padding:0 var(--space-lg);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);font:inherit;font-weight:var(--font-weight-semibold);cursor:pointer;transition:background .25s,color .25s;min-height:44px}
.value-toggle button[aria-pressed=true]{background:var(--ink-blue);color:var(--canvas)}
.value-workspace{border-top:var(--border-hairline) solid var(--border);display:grid}
.value-chart-panel{padding:var(--space-xl) 0 var(--space-lg);background:linear-gradient(160deg,var(--canvas),var(--wash));min-width:0}
.value-chart-heading{display:flex;justify-content:space-between;gap:var(--space-md);color:var(--text-2);font-size:var(--type-caption-font-size)}
/* Reserve vertical room for eight labels when the seven-column chart is narrow. */
.value-chart{min-height:560px;position:relative;margin-top:var(--space-md);width:100%;aspect-ratio:760/520}
/* Project the existing SVG coordinates into the grid: x=495 ends 12 px
   before the first button edge. The morph marks use the same projection. */
.value-chart {
 --value-plot-width:calc(((100% + var(--layout-gutter)) / var(--value-chart-columns) * (var(--value-choice-start) - 1) - var(--space-md)) * 760 / 495);
}
.value-chart svg{position:absolute;inset:0;display:block;width:var(--value-plot-width);height:100%;overflow:visible}
.value-trunk,.value-branch{fill:none;stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}
.value-trunk{stroke:var(--text-2)}
.value-origin{fill:var(--text-2)}
.value-branch{opacity:.58;transition:opacity .2s,stroke-width .2s}
.value-chart circle:not(.value-origin){fill:var(--blue);opacity:.5}
.value-chart .is-selected .value-branch{stroke-width:3;opacity:1}
.value-chart .is-selected circle{opacity:1}
.value-hit{fill:none;stroke:transparent;stroke-width:20;vector-effect:non-scaling-stroke;cursor:pointer}
.value-choice{position:absolute;grid-column:var(--value-choice-start) / span var(--value-choice-span);left:0;right:0;width:auto;transform:translateY(-50%);display:flex;justify-content:space-between;align-items:center;gap:var(--space-xs);padding:var(--space-sm);border:var(--border-hairline) solid transparent;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);font:inherit;font-size:var(--type-body-sm-font-size);min-height:36px;text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.value-choice[aria-pressed=true]{background:var(--canvas);border-color:var(--blue);color:var(--ink-blue);font-weight:var(--font-weight-semibold)}
.value-choice strong{font-variant-numeric:tabular-nums}
.value-choice:hover{background:var(--wash);color:var(--ink-blue)}
.value-explorer button:focus-visible,.value-context summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.value-chart-note{margin:0;text-align:left;font-size:var(--type-caption-font-size);color:var(--text-2)}
.value-detail{border-left:var(--border-hairline) solid var(--border);padding:var(--space-xl);min-height:620px;background:var(--canvas)}
.value-detail-kicker{font-size:var(--type-caption-font-size);color:var(--text-2);margin-bottom:var(--space-md)}
.value-profile-heading{display:flex;justify-content:space-between;gap:var(--space-md);align-items:flex-start}
.value-profile-heading h3{font-size:var(--type-h3-font-size);line-height:var(--type-h3-line-height);margin:0}
.value-ltv{text-align:right;display:flex;flex-direction:column;flex-shrink:0}
.value-ltv strong{font-size:var(--type-h2-font-size);color:var(--ink-blue);line-height:1}
.value-ltv span{font-size:var(--type-caption-font-size);color:var(--text-2);margin-top:var(--space-xs)}
.value-style{font-weight:var(--font-weight-semibold);color:var(--ink-blue);margin-top:var(--space-sm)}
.value-summary{margin-top:var(--space-md);font-size:var(--type-body-sm-font-size);color:var(--text-2)}
.value-metrics{margin:var(--space-lg) 0;display:grid;gap:var(--space-md)}
.value-metric,.value-breakdown-row{display:grid;grid-template-columns:1fr auto;gap:var(--space-xs);font-size:var(--type-body-sm-font-size)}
.value-metric dd{margin:0;color:var(--ink-blue);font-weight:var(--font-weight-semibold)}
.value-bar{display:block;grid-column:1/-1;height:4px;background:var(--wash);border-radius:var(--radius-sm);overflow:hidden}
.value-bar::after{content:"";display:block;width:var(--amount);height:100%;background:linear-gradient(90deg,var(--blue),var(--ink-blue));border-radius:inherit}
.value-action{border-top:var(--border-hairline) solid var(--border);padding-top:var(--space-md)}
.value-action h4{font-size:var(--type-body-sm-font-size);color:var(--ink-blue);margin:0 0 var(--space-sm)}
.value-action p,.value-context{font-size:var(--type-body-sm-font-size)}
.value-context{margin-top:var(--space-lg);color:var(--text-2)}
.value-context summary{cursor:pointer}
.value-context p{margin-top:var(--space-sm)}
.value-breakdown-label{margin-top:var(--space-2xl);font-size:var(--type-body-sm-font-size);font-weight:var(--font-weight-semibold)}
.value-dimensions{display:flex;gap:var(--space-xs);margin:var(--space-md) 0 var(--space-xl)}
.value-dimensions button{font:inherit;font-size:var(--type-body-sm-font-size);background:transparent;color:var(--text-2);border:var(--border-hairline) solid var(--border);border-radius:var(--radius-sm);padding:var(--space-sm);cursor:pointer;min-height:44px}
.value-dimensions button[aria-pressed=true]{color:var(--ink-blue);border-color:var(--blue);background:var(--wash)}
.value-breakdown{display:grid;gap:var(--space-lg)}
.value-limitation{color:var(--text-2);font-size:var(--type-body-sm-font-size);margin-top:var(--space-2xl);border-top:var(--border-hairline) solid var(--border);padding-top:var(--space-lg)}
.value-footnote{border-top:var(--border-hairline) solid var(--border);padding:var(--space-md) var(--space-2xl);font-size:var(--type-caption-font-size);color:var(--text-2)}
@media(max-width:1100px){.value-detail{min-height:0;border-left:0;border-top:var(--border-hairline) solid var(--border)}.value-chart{min-height:420px}}
@media(max-width:520px){.value-heading{padding:var(--space-lg);display:block}.value-example{display:inline-block;margin-top:var(--space-md)}.value-toggle{justify-self:stretch}.value-toggle button{flex:1;font-size:var(--type-body-sm-font-size);padding:0 var(--space-sm)}.value-chart-toolbar{flex-direction:column;gap:var(--space-sm)}.value-controls{width:100%;justify-items:stretch}.value-chart-guide{flex:auto;width:100%;margin-left:0}.value-chart-panel{padding:var(--space-lg) 0}.value-chart{aspect-ratio:760/760}.value-chart svg{position:absolute;inset:0}.value-choice{font-size:var(--type-caption-font-size);padding:var(--space-xs)}.value-chart svg{height:100%}.value-detail{padding:var(--space-lg)}.value-footnote{padding:var(--space-md) var(--space-lg)}}
@media(prefers-reduced-motion:reduce){.value-explorer *{transition:none!important;animation:none!important}}
/* Keep eight independent tap targets and their endpoint labels readable on phones. */
@media(max-width:520px){
 .value-chart{height:440px;aspect-ratio:auto}

 .value-choice{min-height:44px;gap:var(--space-xs);padding:var(--space-xs)}
 .value-explorer[data-mode="with"] .value-choice span{white-space:nowrap}
}
/* Labels and values share a full, explicit click target above the SVG. */
.value-choices{position:absolute;inset:0;display:grid;grid-template-columns:repeat(var(--value-chart-columns),minmax(0,1fr));column-gap:var(--layout-gutter);pointer-events:none}
.value-choice{pointer-events:auto;z-index:2;border-color:var(--border);background:var(--canvas)}
.value-choice>*{pointer-events:none}
.value-choice:hover{border-color:var(--blue);box-shadow:var(--shadow-raised)}
.value-toggle button{display:flex;align-items:center;justify-content:center;gap:var(--space-sm)}
.value-toggle img{width:24px;height:24px;object-fit:contain}
.value-toggle button[aria-pressed=true] img{filter:grayscale(1) brightness(0) invert(1)}
.value-morph-mark{position:absolute;left:92%;top:50%;width:44px;height:44px;object-fit:contain;transform:translate(-50%,-50%);opacity:0;pointer-events:none;z-index:3;background:transparent;padding:var(--space-xs)}
@media(max-width:520px){.value-toggle button{gap:var(--space-xs)}.value-toggle img{width:20px;height:20px}.value-morph-mark{width:36px;height:36px}}
@media(prefers-reduced-motion:reduce){.value-morph-mark{display:none}}

/* Logo coordinates use the same responsive viewport as the branch SVG. */
.value-morph-marks{position:absolute;inset:0;width:var(--value-plot-width);pointer-events:none;z-index:3}
.value-morph-mark{z-index:auto;will-change:left,top,opacity}


[data-theme="dark"] .value-morph-mark,
[data-theme="dark"] .value-toggle img{filter:brightness(0) invert(1)}

/* Decorative curves never intercept the wider hit paths or endpoint dots. */
.value-branch{pointer-events:none}
.value-chart circle:not(.value-origin){cursor:pointer}

/* Keep label targets above the chart and usable throughout their visible motion. */
.value-choices{z-index:4}
.value-choice{min-height:44px;touch-action:manipulation;pointer-events:auto}

/* Keep the selected label and its branch visually connected to the profile. */
.value-choice[aria-pressed=true]{background:var(--wash);border-color:var(--ink-blue);box-shadow:inset 3px 0 0 var(--ink-blue)}
.value-chart g[data-branch]:not(.is-selected) .value-branch{opacity:.5}
.value-chart g[data-branch]:not(.is-selected) circle{opacity:.5}
.value-mobile-summary{display:none}
@media(max-width:520px){
 .value-mobile-summary{display:block;margin-top:var(--space-md);padding:var(--space-sm);border:var(--border-hairline) solid var(--border);border-radius:var(--radius-sm);background:var(--wash);font-size:var(--type-body-sm-font-size)}
 .value-mobile-heading{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-xs) var(--space-sm);color:var(--ink-blue)}
 .value-mobile-summary p{margin:var(--space-xs) 0 0;color:var(--text-2)}
}

/* A quiet invitation to discover the comparison; never switches modes. */
.value-heading .value-toggle-hint{margin-top:var(--space-sm);color:var(--text-2)}
.value-toggle-hint strong{color:var(--ink-blue);font-weight:var(--font-weight-semibold)}

/* One mobile column: retain the full accessible name and the selected profile,
   with compact A–H labels so each touch target can also show its value. */
.value-choice-short{display:none}
@media(max-width:600px){
 .value-chart{min-height:480px}
 .value-choice{flex-direction:column;justify-content:center;align-items:center;gap:0;padding:var(--space-xs);text-align:center}
 .value-choice-name{max-width:100%;overflow-wrap:anywhere}
 .value-explorer[data-mode="with"] .value-choice-name{display:none}
 .value-explorer[data-mode="with"] .value-choice-short{display:block}
}