/* Revuei product detail V4 - 2026-09-16 template refresh.
   Visual language taken from the approved Reviewer-2 detail layout (_k2 design source).
   Scope: v4-* hooks only. Every number and every conclusion still comes from the page payload. */ :root { --v4-paper: #fbf7f2; --v4-card: #fffdfa; --v4-ink: #211b1a; --v4-soft: #584946; --v4-muted: #877772; --v4-faint: #b8a7a0; --v4-line: #e8dbd3; --v4-rose: #b7526d; --v4-rose-deep: #8d304d; --v4-rose-soft: #e9a2b1; --v4-mint: #dce9df; --v4-mint-ink: #41664e; --v4-sand: #f2e7c8; --v4-sand-ink: #775c21; --v4-risk: #edd3d0; --v4-risk-ink: #873f3d; --v4-gold: #c4a35a; --v4-fav: #5a9a72; --v4-prob: #b45a58; --v4-unc: #cfc4bc; --v4-max: 1180px; --v4-serif: 'Playfair Display', Georgia, serif; --v4-sans: 'DM Sans', Inter, Arial, sans-serif; } body.rv-v4-live { background: var(--v4-paper); color: var(--v4-ink); } .v4-page *, .v4-page *::before, .v4-page *::after { box-sizing: border-box; } .v4-page h1, .v4-page h2, .v4-page h3, .v4-page p { margin-top: 0; } .v4-page h1, .v4-page h2, .v4-page h3 { color: var(--v4-ink); } .v4-page p { color: var(--v4-muted); } .v4-wrap { width: min(var(--v4-max), calc(100% - 48px)); margin: 0 auto; } .v4-main { overflow: hidden; } .v4-icon { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; } .v4-eyebrow { margin: 0 0 10px; color: var(--v4-faint); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .v4-breadcrumb { margin: 18px 0 0; color: var(--v4-faint); font-size: 12px; } .v4-breadcrumb a { color: var(--v4-muted); } .v4-no-image { display: grid; place-items: center; width: 100%; min-height: 240px; color: rgba(255,255,255,.8); font-size: 12px; } /* Hero: decision card, not a billboard */ .v4-hero { padding: 18px 0 10px; } .v4-hero-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr); gap: clamp(28px, 4vw, 56px); align-items: stretch; } .v4-hero-copy { padding: 5px 0 26px; } .v4-hero h1 { max-width: 560px; margin: 0 0 10px; font: 400 clamp(30px, 3.15vw, 44px)/1.06 'Playfair Display', Georgia, serif; letter-spacing: -.03em; } .v4-hero-sub { max-width: 500px; margin-bottom: 20px; color: var(--v4-soft) !important; font-size: 13.5px; line-height: 1.55; } .v4-answer { padding: 16px 0 15px; border-top: 1px solid var(--v4-ink); border-bottom: 1px solid var(--v4-line); } .v4-answer-label { display: block; margin-bottom: 9px; color: var(--v4-rose-deep); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .v4-answer p { max-width: 600px; margin: 0; color: var(--v4-ink) !important; font: 500 clamp(19px, 1.9vw, 25px)/1.25 'Playfair Display', Georgia, serif; } /* v9: composite verdict read as a best-signal block plus a separate caution block */ .v4-vviz { margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .v4-vviz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding: 9px 0 0; } .v4-vviz-head b { color: var(--v4-faint); font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .v4-vviz-head span { color: var(--v4-faint); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .v4-vviz-rows { padding: 0; margin: 0; list-style: none; } .v4-vviz-row { display: block; border: 0; padding: 0; } .v4-vviz-row.up { padding: 4px 0 14px; border-bottom: 1px solid var(--v4-line); } .v4-vviz-row.down { padding: 14px 0 4px; } .v4-vviz-row.topic { padding: 4px 0 14px; border-bottom: 1px solid var(--v4-line); } .v4-vviz-lab { display: block; margin-bottom: 8px; color: var(--v4-mint-ink); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; } .v4-vviz-row.down .v4-vviz-lab { display: inline-flex; align-items: center; margin-bottom: 9px; padding: 4px 8px; border-radius: 999px; background: var(--v4-risk); color: var(--v4-risk-ink); letter-spacing: .08em; } .v4-vviz-row.topic .v4-vviz-lab { display: inline-flex; align-items: center; margin-bottom: 9px; padding: 4px 8px; border-radius: 999px; background: var(--v4-sand); color: var(--v4-sand-ink); letter-spacing: .08em; } .v4-vviz-row b { display: block; min-width: 0; color: var(--v4-ink); font: 400 clamp(24px, 2.6vw, 34px)/1.1 'Playfair Display', Georgia, serif; letter-spacing: -.02em; } .v4-vviz-row.down b { color: var(--v4-risk-ink); font-size: clamp(17px, 1.7vw, 21px); font-weight: 600; line-height: 1.3; letter-spacing: 0; } .v4-vviz-bar { display: block; height: 10px; margin-top: 13px; border-radius: 99px; background: #f0e4db; overflow: hidden; } .v4-vviz-bar i { display: block; height: 100%; min-width: 3px; border-radius: 99px; background: linear-gradient(90deg, #3f7a56, #6fa888); } .v4-vviz-row.down .v4-vviz-bar { height: 6px; margin-top: 10px; } .v4-vviz-row.down .v4-vviz-bar i { background: linear-gradient(90deg, #8f4a52, #c07f84); } .v4-vviz-row.topic .v4-vviz-bar i { background: linear-gradient(90deg, #9c8d85, #c4b6ac); } .v4-vviz-num { display: block; margin: 9px 0 0; color: var(--v4-muted); font-size: 12px; line-height: 1.4; } .v4-vviz-row.down .v4-vviz-num { margin-top: 8px; color: var(--v4-faint); font-size: 11px; } .v4-vviz-foot { margin: 12px 0 0; color: var(--v4-faint); font-size: 11px; line-height: 1.4; } .v4-vviz-note { margin: 12px 0 0; color: var(--v4-muted); font-size: 11.5px; line-height: 1.5; } /* Fit notes live behind a disclosure so the decision stays above the fold */ .v4-fit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 24px 0 23px; } .v4-fit { min-width: 0; } .v4-fit-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; color: var(--v4-ink); font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; } .v4-fit-head .v4-icon { width: 17px; height: 17px; color: var(--v4-mint-ink); } .v4-fit.caution .v4-fit-head .v4-icon { color: var(--v4-risk-ink); } .v4-fit ul { padding: 0; margin: 0; list-style: none; } .v4-fit li { position: relative; padding-left: 15px; margin: 0 0 7px; color: var(--v4-soft); font-size: 12px; line-height: 1.45; } .v4-fit li::before { content: '+'; position: absolute; left: 0; color: var(--v4-mint-ink); font-weight: 700; } .v4-fit.caution li::before { content: '!'; color: var(--v4-risk-ink); } .v4-fit-note { margin: 11px 0 0; font-size: 10px; line-height: 1.5; } .v4-hero-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 14px 0 0; padding-top: 0; border-top: 0; color: var(--v4-faint); font-size: 11px; line-height: 1.4; } .v4-hero-meta > span { display: inline-flex; align-items: baseline; gap: 6px; } .v4-hero-meta > span + span::before { content: '\00b7'; margin-right: 12px; color: var(--v4-faint); } .v4-hero-meta small { color: var(--v4-faint); font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .v4-hero-meta strong { color: var(--v4-soft); font-weight: 600; } .v4-action-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .v4-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border: 1px solid var(--v4-ink); border-radius: 999px; background: var(--v4-ink); color: #fff; font-size: 13px; font-weight: 700; } .v4-button:hover { border-color: var(--v4-rose-deep); background: var(--v4-rose-deep); color: #fff; } .v4-button.secondary { border-color: var(--v4-line); background: transparent; color: var(--v4-soft); } .v4-button.secondary:hover { border-color: var(--v4-rose); background: #fff8f4; color: var(--v4-rose-deep); } .v4-visual { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; min-height: 520px; overflow: hidden; border-radius: 24px; background: #d4a08d; } .v4-visual img { position: relative; grid-row: 1; inset: auto; z-index: 0; width: 100%; height: 100%; min-height: 0; padding: 52px 30px 12px; object-fit: contain; object-position: center; } .v4-visual::after { content: ''; position: absolute; inset: 0 0 auto; height: 34%; background: linear-gradient(180deg, rgba(39,25,22,.12), transparent); pointer-events: none; } .v4-visual-top, .v4-visual-bottom { position: absolute; z-index: 1; right: 22px; left: 22px; display: flex; justify-content: space-between; gap: 16px; } .v4-visual-top { top: 22px; align-items: flex-start; } .v4-visual-label { color: rgba(255,253,250,.85); font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .v4-visual-mark { color: #fff; font: 400 28px/1 'Playfair Display', Georgia, serif; text-align: right; } .v4-visual-mark small { display: block; margin-top: 5px; color: rgba(255,255,255,.7); font: 700 9px/1 'DM Sans', sans-serif; letter-spacing: .14em; text-transform: uppercase; } .v4-visual-bottom { position: relative; grid-row: 2; right: auto; bottom: auto; left: auto; z-index: 2; align-items: flex-end; padding: 13px 22px 16px; border-top: 1px solid rgba(255,255,255,.35); background: rgba(89,54,44,.14); } .v4-visual-bottom span { display: block; color: rgba(255,255,255,.65); font-size: 10px; } .v4-visual-bottom strong { display: block; margin-top: 2px; color: #fff; font: 400 22px/1 'Playfair Display', Georgia, serif; } /* Anchor rail */ .v4-rail { position: sticky; top: 70px; z-index: 10; display: flex; gap: 7px; overflow-x: auto; padding: 12px 0; margin-top: 6px; border-bottom: 1px solid var(--v4-line); background: rgba(251,247,242,.94); backdrop-filter: blur(16px); } .v4-rail a { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: var(--v4-muted); font-size: 11px; text-decoration: none; } .v4-rail a:hover { background: var(--v4-mint); color: var(--v4-mint-ink); } /* Sections and 30-second read */ .v4-section { padding: 64px 0 0; scroll-margin-top: 120px; } .v4-section-head { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 10px 40px; align-items: end; margin-bottom: 24px; } .v4-section-head h2 { max-width: 650px; margin-bottom: 0; font: 400 clamp(30px, 3.7vw, 48px)/1.02 'Playfair Display', Georgia, serif; letter-spacing: -.04em; } .v4-section-head p { max-width: 360px; margin-bottom: 2px; justify-self: end; font-size: 12px; line-height: 1.55; } .v4-fast { padding: 28px; border-radius: 22px; background: var(--v4-ink); color: #fff; } .v4-fast .v4-eyebrow { color: var(--v4-rose-soft); } .v4-fast h2 { max-width: 620px; margin-bottom: 22px; color: #fff; font: 400 clamp(30px, 3.8vw, 50px)/1.05 'Playfair Display', Georgia, serif; letter-spacing: -.04em; } .v4-fast-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.25); } .v4-fast-card { min-height: 165px; padding: 21px 22px 5px 0; border-right: 1px solid rgba(255,255,255,.2); } .v4-fast-card + .v4-fast-card { padding-left: 22px; } .v4-fast-card:last-child { border-right: 0; } .v4-fast-card .v4-icon { width: 23px; height: 23px; margin-bottom: 20px; color: var(--v4-rose-soft); } .v4-fast-card strong { display: block; margin-bottom: 6px; color: #fff; font-size: 14px; } .v4-fast-card span { display: block; max-width: 230px; color: rgba(255,255,255,.68); font-size: 12px; line-height: 1.5; } /* Data strip */ .v4-data-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--v4-ink); border-bottom: 1px solid var(--v4-line); } .v4-stat { min-height: 170px; padding: 21px 24px 18px 0; border-right: 1px solid var(--v4-line); } .v4-stat + .v4-stat { padding-left: 24px; } .v4-stat:last-child { border-right: 0; } .v4-stat-number { display: block; margin-bottom: 5px; color: var(--v4-rose); font: 400 45px/1 'Playfair Display', Georgia, serif; } .v4-stat.caution .v4-stat-number { color: var(--v4-risk-ink); } .v4-stat.neutral .v4-stat-number { color: var(--v4-ink); } .v4-stat-label { display: block; margin-bottom: 16px; color: var(--v4-soft); font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; } .v4-stat p { margin: 0; font-size: 11px; line-height: 1.45; } .v4-stat-meter { height: 5px; margin-top: 19px; overflow: hidden; border-radius: 99px; background: var(--v4-line); } .v4-stat-meter span { display: block; width: var(--meter); height: 100%; border-radius: inherit; background: var(--v4-rose); } .v4-stat.caution .v4-stat-meter span { background: var(--v4-risk-ink); } .v4-source-ring { display: flex; align-items: center; gap: 13px; margin-top: 15px; } .v4-ring { display: grid; width: 36px; height: 36px; place-items: center; border: 6px solid var(--v4-line); border-left-color: var(--v4-ink); border-radius: 50%; color: var(--v4-ink); font-size: 11px; font-weight: 700; } .v4-source-ring span { color: var(--v4-muted); font-size: 10px; line-height: 1.35; } /* Signal map: one composite ring plus one ring per topic */ .v4-chart-grid { display: grid; grid-template-columns: minmax(280px, .9fr) minmax(0, 1.15fr); gap: 16px; align-items: start; } .v4-chart-panel { padding: 22px 24px 20px; border: 1px solid var(--v4-line); border-radius: 22px; background: var(--v4-card); } .v4-chart-panel.caution { background: linear-gradient(135deg, #fffdfa 0%, #fbf0ec 100%); } .v4-chart-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .v4-chart-title h3 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .v4-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--v4-faint); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .v4-legend::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--v4-mint-ink); } .v4-chart-panel.caution .v4-legend::before { background: var(--v4-risk-ink); } .v4-bars { display: grid; gap: 15px; } .v4-bar-row { display: grid; grid-template-columns: 135px minmax(90px, 1fr) 55px; align-items: center; gap: 11px; } .v4-bar-row strong { color: var(--v4-soft); font-size: 11px; font-weight: 500; } .v4-bar-track { height: 9px; overflow: hidden; border-radius: 99px; background: #eee3dd; } .v4-bar-fill { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #74a887, #bad7bd); } .v4-chart-panel.caution .v4-bar-fill { background: linear-gradient(90deg, #a95c65, #d79ba0); } .v4-bar-value { color: var(--v4-muted); font-size: 10px; text-align: right; } .v4-chart-note { margin: 18px 0 0; padding-top: 13px; border-top: 1px solid var(--v4-line); font-size: 10px; line-height: 1.5; } /* Questions */ .v4-question-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--v4-ink); border-bottom: 1px solid var(--v4-line); } .v4-question { min-height: 220px; padding: 19px 18px 20px 0; border-right: 1px solid var(--v4-line); } .v4-question + .v4-question { padding-left: 18px; } .v4-question:last-child { border-right: 0; } .v4-question .v4-icon { width: 22px; height: 22px; margin-bottom: 24px; color: var(--v4-rose); } .v4-question h3 { min-height: 43px; margin-bottom: 13px; font-size: 14px; line-height: 1.35; } .v4-question p { margin-bottom: 18px; font-size: 11px; line-height: 1.55; } .v4-status { display: inline-flex; padding: 5px 8px; border-radius: 999px; background: var(--v4-mint); color: var(--v4-mint-ink); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .v4-status.caution { background: var(--v4-risk); color: var(--v4-risk-ink); } .v4-status.limited { background: var(--v4-sand); color: var(--v4-sand-ink); } /* Split and risk */ .v4-split { display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; border-radius: 22px; background: var(--v4-ink); } .v4-split-card { min-height: 220px; padding: 28px; color: #fff; } .v4-split-card + .v4-split-card { border-left: 1px solid rgba(255,255,255,.22); background: #47302f; } .v4-split-label { display: block; margin-bottom: 48px; color: #e8a0af; font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; } .v4-split-card h3 { max-width: 410px; margin-bottom: 10px; color: #fff; font: 400 26px/1.08 'Playfair Display', Georgia, serif; } .v4-split-card p { max-width: 430px; margin-bottom: 0; color: rgba(255,255,255,.66); font-size: 12px; line-height: 1.55; } .v4-risk-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(240px, .6fr); gap: 22px; align-items: start; } .v4-risk-list { border-top: 1px solid var(--v4-ink); } .v4-risk-row { display: grid; grid-template-columns: 160px 1fr 40px; align-items: center; gap: 14px; min-height: 54px; border-bottom: 1px solid var(--v4-line); } .v4-risk-row strong { color: var(--v4-soft); font-size: 12px; font-weight: 500; } .v4-risk-track { height: 8px; overflow: hidden; border-radius: 99px; background: #f0e2de; } .v4-risk-track span { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: #b66c71; } .v4-risk-row em { color: var(--v4-risk-ink); font: 400 18px/1 'Playfair Display', Georgia, serif; text-align: right; } .v4-risk-note { padding: 20px; background: var(--v4-sand); } .v4-risk-note h3 { margin-bottom: 8px; color: var(--v4-sand-ink); font-size: 14px; } .v4-risk-note p { margin-bottom: 0; color: var(--v4-sand-ink); font-size: 11px; line-height: 1.6; } .v4-note-line { margin-top: 15px; color: var(--v4-muted); font-size: 10px; } /* Routine, purchase, evidence and sources */ .v4-routine { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--v4-ink); border-bottom: 1px solid var(--v4-line); } .v4-routine-step { min-height: 150px; padding: 18px 16px 16px 0; border-right: 1px solid var(--v4-line); } .v4-routine-step + .v4-routine-step { padding-left: 16px; } .v4-routine-step:last-child { border-right: 0; } .v4-routine-step .v4-icon { width: 22px; height: 22px; margin-bottom: 16px; color: var(--v4-rose); } .v4-routine-step strong { display: block; margin-bottom: 6px; font-size: 13px; } .v4-routine-step span { color: var(--v4-muted); font-size: 11px; line-height: 1.5; } .v4-purchase { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--v4-line); } .v4-purchase h3 { margin-bottom: 5px; font: 400 24px/1 'Playfair Display', Georgia, serif; } .v4-purchase p { margin-bottom: 0; font-size: 11px; } .v4-purchase-note { flex: 0 0 230px; padding-left: 19px; border-left: 1px solid var(--v4-line); } .v4-purchase-note strong { display: block; margin-bottom: 5px; color: var(--v4-soft); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; } .v4-purchase-note span { color: var(--v4-muted); font-size: 10px; line-height: 1.5; } .v4-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .v4-details { border-top: 1px solid var(--v4-ink); border-bottom: 1px solid var(--v4-line); } .v4-details summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 16px 0; color: var(--v4-ink); font-size: 13px; font-weight: 700; list-style: none; } .v4-details summary::-webkit-details-marker { display: none; } .v4-details summary::after { content: '+'; color: var(--v4-rose); font: 400 19px/1 'Playfair Display', Georgia, serif; } .v4-details[open] summary::after { content: '\2212'; } .v4-details-content { padding: 3px 0 20px; } .v4-detail-row { display: grid; grid-template-columns: 130px 1fr; gap: 16px; padding: 12px 0; border-top: 1px solid var(--v4-line); } .v4-detail-row strong { color: var(--v4-soft); font-size: 11px; } .v4-detail-row span { color: var(--v4-muted); font-size: 11px; line-height: 1.5; } .v4-boundary { margin: 14px 0 0; padding: 12px 14px; background: #f7e9e4; color: var(--v4-rose-deep); font-size: 10px; line-height: 1.55; } .v4-data-boundary { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--v4-ink); border-bottom: 1px solid var(--v4-line); } .v4-boundary-stat { min-height: 128px; padding: 20px 20px 18px 0; border-right: 1px solid var(--v4-line); } .v4-boundary-stat + .v4-boundary-stat { padding-left: 20px; } .v4-boundary-stat:last-child { border-right: 0; } .v4-boundary-stat strong { display: block; margin-bottom: 8px; color: var(--v4-ink); font: 400 32px/1 'Playfair Display', Georgia, serif; } .v4-boundary-stat span { color: var(--v4-muted); font-size: 11px; line-height: 1.45; } .v4-source-list { border-top: 1px solid var(--v4-ink); border-bottom: 1px solid var(--v4-line); } .v4-source-row { display: grid; grid-template-columns: minmax(120px, .9fr) minmax(0, 1.6fr) auto; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--v4-line); font-size: 12px; } .v4-source-row:last-child { border-bottom: 0; } .v4-source-row strong { color: var(--v4-ink); font-size: 12px; font-weight: 600; } .v4-source-row span { color: var(--v4-muted); font-size: 12px; line-height: 1.45; } .v4-source-row a { color: var(--v4-rose); font-size: 12px; font-weight: 700; text-decoration: none; white-space: nowrap; } .v4-source-row a:hover { text-decoration: underline; } .v4-final { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0 8px; } .v4-final h2 { margin-bottom: 4px; font: 400 28px/1.1 'Playfair Display', Georgia, serif; } .v4-final p { margin-bottom: 0; font-size: 12px; } /* Fit-note disclosure (hero) */ .v4-fit-details { margin: 20px 0 0; border: 0; border-top: 1px solid var(--v4-line); border-radius: 14px; background: #fff8f3; padding: 0 14px; } .v4-fit-details > summary { padding: 12px 0; color: var(--v4-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .v4-fit-details > summary::after { color: var(--v4-rose); font-size: 15px; font-weight: 700; line-height: 1; } .v4-fit-details .v4-fit-grid { gap: 18px; margin: 2px 0 0; padding-bottom: 16px; } .v4-fit-details .v4-fit-note { margin-top: 7px; } .v4-dir-rows { display: grid; } .v4-dir-track { position: relative; height: 13px; border-radius: 999px; background: #f1ebe5; overflow: hidden; } .v4-dir-span { position: absolute; top: 0; left: 0; bottom: 0; width: var(--span, 0%); min-width: 8px; border-radius: 999px; overflow: hidden; display: block; background: #e7ded5; } .v4-dir-fill { display: flex; width: 100%; height: 100%; } .v4-dir-fill i { display: block; width: var(--seg, 0%); height: 100%; background: var(--dot, #cdc2ba); } @media (max-width: 980px) { .v4-hero-grid { grid-template-columns: 1fr; gap: 30px; } .v4-hero-copy { padding-bottom: 0; } .v4-visual { min-height: 440px; } .v4-question-grid { grid-template-columns: repeat(3, 1fr); } .v4-question:nth-child(3) { border-right: 0; } .v4-question:nth-child(n+4) { border-top: 1px solid var(--v4-line); } .v4-question:nth-child(4) { padding-left: 0; } .v4-question:nth-child(5) { padding-left: 18px; } } @media (max-width: 720px) { .v4-wrap { width: min(var(--v4-max), calc(100% - 32px)); } .v4-hero { padding-top: 14px; } .v4-breadcrumb { margin-bottom: 18px; font-size: 11px; } .v4-hero h1 { font-size: clamp(28px, 8.4vw, 38px); } .v4-fit-grid, .v4-chart-grid, .v4-split, .v4-risk-grid, .v4-details-grid { grid-template-columns: 1fr; } .v4-visual { min-height: 410px; border-radius: 17px; } .v4-fast { padding: 22px 18px; } .v4-fast-grid, .v4-data-strip, .v4-data-boundary { grid-template-columns: 1fr; } .v4-fast-card, .v4-fast-card + .v4-fast-card, .v4-stat, .v4-stat + .v4-stat, .v4-boundary-stat, .v4-boundary-stat + .v4-boundary-stat { min-height: 0; padding: 18px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.2); } .v4-stat, .v4-stat + .v4-stat, .v4-boundary-stat, .v4-boundary-stat + .v4-boundary-stat { border-bottom: 1px solid var(--v4-line); } .v4-fast-card:last-child, .v4-stat:last-child, .v4-boundary-stat:last-child { border-bottom: 0; } .v4-fast-card .v4-icon { margin-bottom: 9px; } .v4-question-grid { grid-template-columns: 1fr 1fr; } .v4-question, .v4-question + .v4-question { min-height: 208px; padding: 17px 14px 17px 0; border-right: 1px solid var(--v4-line); } .v4-question:nth-child(2n) { padding-left: 14px; border-right: 0; } .v4-question:nth-child(3) { border-right: 1px solid var(--v4-line); } .v4-question:nth-child(n+3) { border-top: 1px solid var(--v4-line); } .v4-question:nth-child(5) { grid-column: 1 / -1; padding-left: 0; border-right: 0; } .v4-split-card { min-height: 210px; padding: 23px 19px; } .v4-split-card + .v4-split-card { border-top: 1px solid rgba(255,255,255,.22); border-left: 0; } .v4-split-label { margin-bottom: 33px; } .v4-risk-row { grid-template-columns: 125px 1fr 28px; gap: 9px; } .v4-routine { grid-template-columns: 1fr 1fr; } .v4-routine-step, .v4-routine-step + .v4-routine-step { min-height: 145px; padding: 17px 14px 17px 0; border-right: 1px solid var(--v4-line); } .v4-routine-step:nth-child(2n) { padding-left: 14px; border-right: 0; } .v4-routine-step:nth-child(n+3) { border-top: 1px solid var(--v4-line); } .v4-purchase, .v4-final { align-items: flex-start; flex-direction: column; } .v4-purchase-note { flex-basis: auto; width: 100%; padding: 15px 0 0; border-top: 1px solid var(--v4-line); border-left: 0; } .v4-source-row { grid-template-columns: 1fr auto; gap: 4px 12px; padding: 11px 0; } .v4-source-row span { grid-column: 1; } .v4-source-row a { grid-column: 2; grid-row: 1 / span 2; } .v4-section { padding-top: 48px; } .v4-section-head { display: block; } .v4-section-head p { margin-top: 12px; justify-self: auto; } .v4-bar-row { grid-template-columns: 118px minmax(75px, 1fr) 50px; gap: 8px; } .v4-hero-meta { gap: 4px 14px; } .v4-hero-meta > span + span::before { margin-right: 8px; } } /* rv-v4-neutral-compact-hero-v1: facts-only and topic-frequency pages keep the
   standard shell while fitting the decision hero in the first desktop viewport. */ main.rv-v4-neutral .v4-hero-copy { padding-bottom: 10px; } main.rv-v4-neutral .v4-hero h1 { max-width: 620px; margin-bottom: 10px; font-size: clamp(27px, 2.85vw, 40px); line-height: 1.06; } main.rv-v4-neutral .v4-hero-sub { max-width: 520px; margin-bottom: 14px; font-size: 13px; line-height: 1.45; } main.rv-v4-neutral .v4-answer { padding: 12px 0 13px; } main.rv-v4-neutral .v4-answer-label { margin-bottom: 7px; } main.rv-v4-neutral .v4-answer p { max-width: 600px; font-size: clamp(17px, 1.7vw, 22px); line-height: 1.22; } main.rv-v4-neutral .v4-vviz-row.up { padding: 2px 0 11px; } main.rv-v4-neutral .v4-vviz-row.down { padding: 11px 0 2px; } main.rv-v4-neutral .v4-vviz-row b { font-size: clamp(21px, 2.2vw, 29px); } main.rv-v4-neutral .v4-vviz-row.down b { font-size: clamp(15px, 1.5vw, 18px); } main.rv-v4-neutral .v4-vviz-bar { margin-top: 10px; } main.rv-v4-neutral .v4-vviz-num { margin-top: 7px; font-size: 11px; } main.rv-v4-neutral .v4-fit-details { margin-top: 14px; } main.rv-v4-neutral .v4-fit-details > summary { padding: 10px 0; } main.rv-v4-neutral .v4-fit-details .v4-fit-grid { gap: 14px; padding-bottom: 12px; } main.rv-v4-neutral .v4-fit-head { margin-bottom: 7px; font-size: 10px; } main.rv-v4-neutral .v4-fit li { margin-bottom: 4px; font-size: 11px; line-height: 1.25; } main.rv-v4-neutral .v4-fit-note { margin-top: 6px; font-size: 9px; line-height: 1.3; } main.rv-v4-neutral .v4-hero-meta { gap: 4px 12px; margin-top: 10px; font-size: 10px; } main.rv-v4-neutral .v4-action-row { gap: 8px; margin-top: 12px; } @media (min-width: 981px) and (max-height: 900px) { main.rv-v4-neutral .v4-hero h1 { font-size: clamp(26px, 2.6vw, 37px); } main.rv-v4-neutral .v4-hero-sub { margin-bottom: 11px; font-size: 12.5px; line-height: 1.35; } main.rv-v4-neutral .v4-answer { padding: 10px 0 11px; } main.rv-v4-neutral .v4-answer p { font-size: clamp(16px, 1.55vw, 20px); line-height: 1.18; } main.rv-v4-neutral .v4-vviz-row.up { padding: 2px 0 9px; } main.rv-v4-neutral .v4-vviz-row.down { padding: 9px 0 2px; } main.rv-v4-neutral .v4-vviz-row b { font-size: clamp(20px, 2vw, 26px); } main.rv-v4-neutral .v4-fit-details { margin-top: 11px; } main.rv-v4-neutral .v4-fit-details > summary { padding: 9px 0; } main.rv-v4-neutral .v4-fit-details .v4-fit-grid { padding-bottom: 10px; } main.rv-v4-neutral .v4-fit li { margin-bottom: 3px; font-size: 10px; line-height: 1.2; } main.rv-v4-neutral .v4-fit-note { margin-top: 5px; font-size: 8px; line-height: 1.25; } main.rv-v4-neutral .v4-hero-meta { margin-top: 8px; font-size: 9px; } main.rv-v4-neutral .v4-action-row { margin-top: 9px; } } @media (max-width: 980px) { main.rv-v4-neutral .v4-hero h1 { font-size: clamp(28px, 7.6vw, 40px); line-height: 1.06; } main.rv-v4-neutral .v4-hero-sub { font-size: 13px; } } /* Scoped to post879 restricted-synthesis branch only. */ .v4-c879-restricted { padding-bottom: 70px; } .v4-c879-restricted .v4-hero h1 { font-size: clamp(28px, 3.2vw, 44px); } .v4-c879-restricted .v4-visual { min-height: 480px; } .v4-c879-restricted .v4-c879-claims { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; } .v4-c879-restricted .v4-c879-claim,.v4-c879-restricted .v4-c879-boundary { padding: 28px; border: 1px solid var(--v4-line); border-radius: 18px; background: #fffdfb; } .v4-c879-restricted .v4-c879-claim h3 { font: 400 28px/1.15 Georgia,serif; margin-bottom: 18px; } .v4-c879-restricted .v4-c879-claim p,.v4-c879-restricted .v4-c879-boundary p { font-size: 15px; line-height: 1.65; } .v4-c879-restricted .v4-c879-limit { border-top: 1px solid var(--v4-line); padding-top: 16px; margin-top: 20px; } .v4-c879-restricted .v4-c879-limit strong { font-size: 12px; } .v4-c879-restricted .v4-c879-limit p { margin: 9px 0 0; font-size: 13px; } @media(max-width:760px) { .v4-c879-restricted .v4-c879-claims { grid-template-columns:1fr; } .v4-c879-restricted .v4-c879-claim,.v4-c879-restricted .v4-c879-boundary { padding:22px; } .v4-c879-restricted .v4-visual { min-height:360px; } } .v4-cp001-summary .v4-cp001-boundary,.v4-cp001-summary .v4-cp001-claim { padding:26px; margin-bottom:18px; border:1px solid var(--v4-line); border-radius:18px; background:#fffdfb; } .v4-cp001-summary p { font-size:15px; line-height:1.65; } .v4-cp001-summary h3 { font:400 28px/1.2 Georgia,serif; } .v4-cp001-summary .v4-cp001-limit { border-top:1px solid var(--v4-line); padding-top:16px; } .v4-cp001-summary .v4-cp001-limit p { font-size:13px; } /* Composite mix donut (2026-09-16 refresh) */ .v4-donut-wrap { display: flex; align-items: center; gap: 22px; } .v4-donut { position: relative; flex: 0 0 148px; width: 148px; height: 148px; border-radius: 50%; } .v4-donut::after { content: ''; position: absolute; inset: 27px; border-radius: 50%; background: #fbf7f3; } .v4-donut-center { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; justify-items: center; text-align: center; } .v4-donut-center b { color: var(--v4-ink); font: 400 30px/1 var(--v4-serif); } .v4-donut-center small { display: block; margin-top: 5px; color: var(--v4-faint); font-size: 8.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .v4-donut-side { min-width: 0; } .v4-donut-side b { display: block; color: var(--v4-ink); font: 400 30px/1 var(--v4-serif); } .v4-donut-side span { display: block; margin-top: 6px; color: var(--v4-soft); font-size: 12px; line-height: 1.4; } .v4-donut-side p { margin: 8px 0 0; color: var(--v4-muted); font-size: 11px; line-height: 1.45; } .v4-mix-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; padding: 0; margin: 0; list-style: none; } .v4-mix-legend li { display: grid; grid-template-columns: 11px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; color: var(--v4-muted); font-size: 11.5px; } .v4-mix-legend i { width: 11px; height: 11px; border-radius: 3px; background: var(--dot, #cdc2ba); } .v4-mix-legend b { color: var(--v4-ink); font-weight: 600; } .v4-mix-legend em { color: var(--v4-faint); font-style: normal; } /* One small ring per topic: arc length is the topic share, the colours inside are the direction split. */ .v4-ring-mini { position: relative; display: block; width: 44px; height: 44px; border-radius: 50%; } .v4-ring-mini::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--v4-card); } @media (max-width: 560px) { .v4-donut-wrap { flex-direction: column; align-items: flex-start; gap: 15px; } .v4-mix-legend { grid-template-columns: minmax(0, 1fr); } } .v4-fit-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; } .v4-fit-details > summary::-webkit-details-marker { display: none; } .v4-fit-details > summary::after { content: '+'; } .v4-fit-details[open] > summary::after { content: '\2212'; }