/* Homepage previews share the approved dashboard's surfaces; content stays compact. */
.landing-page :is(.hero-dashboard,#demo .dashboard,#sample-report .report-preview){--accent:#00a898;--preview-mint:#dceeea;--preview-line:#b9d3ce;--preview-cream:#f7f4ee;--preview-muted:#566e75;border:3px solid #f7f4eee6;border-radius:32px;background:rgba(234,244,240,.92);box-shadow:0 1px 2px #fff4 inset,0 20px 48px #102a351a;backdrop-filter:blur(18px)}
/* The small hero workspace. */
.landing-page .hero-dashboard{overflow:hidden}
.landing-page .hero-dashboard>.mock-top{background:transparent;border-bottom:1px solid var(--preview-line);border-radius:0;color:var(--preview-muted)}
.landing-page .preview-rail{background:transparent;border-color:var(--preview-line);border-radius:0;color:var(--preview-muted)}
.landing-page .preview-rail .rail-active{background:var(--preview-cream);border-radius:30px;color:var(--ink)}
.landing-page .rail-monogram{background:var(--accent);border-radius:12px}
.landing-page .rail-note{border-color:var(--preview-line)}
.landing-page .preview-main{background:transparent;padding:30px}
.landing-page .hero-dashboard-title h2{font-weight:650}
.landing-page .hero-dashboard-title .signal{background:transparent;border:1px solid var(--accent);border-radius:30px;color:#007d73}
.landing-page .hero-rows{gap:16px}
.landing-page .hero-rows>div{border:1px solid var(--preview-cream);border-radius:18px;background:var(--preview-mint);box-shadow:0 12px 26px #102a3526,0 1px 1px #fff9 inset;padding:20px;transition:transform .2s,box-shadow .2s}
.landing-page .hero-rows>div:first-child{border-left:1px solid var(--preview-cream)}
.landing-page .hero-rows>div:hover{transform:translateY(-2px);box-shadow:0 16px 30px #102a352b}
.landing-page .hero-rows strong{color:var(--accent)}
.landing-page .hero-rows .hero-fit b{border:5px solid var(--accent);background:var(--preview-mint);color:var(--accent);padding-top:4px}
.landing-page .mock-bottom{border-color:var(--preview-line);color:var(--preview-muted)}
/* Interactive priorities and heading cards. */
.landing-page #demo .dashboard-header,.landing-page #demo .toolbar,.landing-page #demo .dashboard-body{background:transparent;border-color:var(--preview-line)}
.landing-page #demo .dashboard-header h3{font-weight:650}
.landing-page #demo .dashboard .badge{background:var(--preview-cream);border:1px solid var(--preview-line);border-radius:30px;color:var(--ink)}
.landing-page #demo .priorities{background:transparent;border-color:var(--preview-line)}
.landing-page #demo .priorities h4{font-size:20px;line-height:1.2;font-weight:650}
.landing-page #demo .priorities input{accent-color:#269b8f}
.landing-page #demo .filter{background:var(--preview-cream);border:1px solid transparent;color:var(--preview-muted)}
.landing-page #demo .filter.active{background:var(--accent);color:white;border-color:var(--accent)}
.landing-page #demo .sort select{appearance:none;-webkit-appearance:none;border:1px solid var(--preview-line);border-radius:30px;background:var(--preview-cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23102a35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px;padding:10px 38px 10px 14px;color:var(--ink)}
.landing-page #demo .cards{gap:24px}
.landing-page #demo .heading-card{background:var(--preview-mint);border:1px solid var(--preview-cream);border-radius:18px;box-shadow:0 12px 26px #102a3526,0 1px 1px #fff9 inset;transition:box-shadow .2s,transform .2s}
.landing-page #demo .heading-card:hover{transform:translateY(-2px);box-shadow:0 16px 30px #102a352b}
.landing-page #cards .heading-card h4{color:var(--accent);font-size:26px;line-height:1.15}
.landing-page #cards .heading-fit strong{width:76px;height:76px;flex-basis:76px;border:5px solid var(--accent);color:var(--accent);padding-top:4px}
.landing-page #demo .heading-card .save{border:1px solid var(--accent);background:transparent;color:var(--ink);border-radius:30px}
.landing-page #demo .heading-card .save:hover,.landing-page #demo .heading-card .save[aria-pressed=true]{background:#bce3da;border-color:#007d73}
.landing-page #demo .shortlist-strip{border-color:var(--preview-line);background:transparent}
/* Compact sample comparison uses the live dashboard table's design language. */
.landing-page #sample-report .report-preview{background:rgba(234,244,240,.46);padding:34px;transition:box-shadow .2s}
.landing-page #sample-report .report-preview:hover{transform:none;box-shadow:0 1px 2px #fff4 inset,0 20px 48px #102a351a}
.landing-page #sample-report .report-head h3{font-size:28px;line-height:1.2;font-weight:650}
.landing-page #sample-report .table-wrap{border:1px solid var(--preview-cream);border-radius:22px;background:var(--preview-mint);box-shadow:0 14px 32px #102a3520;scrollbar-color:#279b8f #dceeea}
.landing-page #comparison{--comparison-label:#DDEFEB;--comparison-column:#e9efea;border-collapse:separate;border-spacing:0;table-layout:fixed;min-width:720px;margin:0;background:#e9efea}
.landing-page #comparison :is(th,td){border-right:1px solid var(--preview-cream);border-bottom:1px solid var(--preview-cream);padding:22px 20px;vertical-align:top;line-height:1.55}
.landing-page #comparison tr>:last-child{border-right:0}
.landing-page #comparison tbody tr:last-child>*{border-bottom:0}
.landing-page #comparison thead th{background:var(--comparison-column);vertical-align:top;padding:28px 20px}
.landing-page #comparison thead th:first-child{background:var(--comparison-label);width:23%;color:var(--ink);font:500 15px/1.5 'Instrument Sans',sans-serif}
.landing-page #comparison .sample-comparison-title{display:block;font:700 28px/1.16 Newsreader,serif;color:var(--accent);overflow-wrap:normal}
.landing-page #comparison tbody th{background:var(--comparison-label);font-size:13px;font-weight:600;color:var(--ink)}
.landing-page #comparison tbody td{background:var(--comparison-column);font-size:14px;color:var(--ink)}
.landing-page #comparison .sample-consideration-label{display:flex;align-items:center;gap:11px}
.landing-page #comparison .sample-consideration-icon{width:22px;height:22px;flex:0 0 22px;color:var(--accent)}
.landing-page #comparison .sample-priority-fit-row :is(th,td){vertical-align:middle;padding-top:28px;padding-bottom:28px}
.landing-page #comparison .sample-priority-fit-row .sample-consideration-icon{width:25px;height:25px;flex-basis:25px}
.landing-page #comparison .comparison-fit-number{display:block;border:0;border-radius:0;background:transparent;color:var(--accent);font:700 50px/1.1 Newsreader,serif;width:auto;height:auto;padding:0}
.landing-page #comparison .sample-rating-row td::before{content:'';display:inline-block;width:10px;height:10px;margin-right:8px;border:1px solid #00000012;border-radius:50%;background:#279b8f;vertical-align:baseline}
.landing-page #comparison .sample-rating-row td:is(.outcome-moderate,.outcome-negative)::before{background:#cf841d}
@media(max-width:1050px){.landing-page .preview-main{padding:22px}.landing-page #demo .cards{gap:18px}.landing-page #cards .heading-card h4{font-size:23px}}
@media(max-width:760px){.landing-page :is(.hero-dashboard,#demo .dashboard,#sample-report .report-preview){border-radius:26px;border-width:2px}.landing-page #demo .priorities{border-bottom:1px solid var(--preview-line)}.landing-page #sample-report .report-preview{padding:22px}.landing-page #comparison .sample-comparison-title{font-size:25px}}
@media(max-width:520px){.landing-page .preview-main{padding:18px 14px}.landing-page .hero-rows{gap:14px}.landing-page .hero-rows>div{padding:14px;border-radius:16px}.landing-page .hero-rows .hero-fit b{border-width:4px}.landing-page #demo .cards{padding:16px;gap:18px}.landing-page #sample-report .report-preview{padding:18px 14px}.landing-page #sample-report .report-head h3{font-size:24px}.landing-page #comparison :is(th,td){padding:18px 16px}}
@media(prefers-reduced-motion:reduce){.landing-page .hero-rows>div,.landing-page #demo .heading-card{transition:none}.landing-page .hero-rows>div:hover,.landing-page #demo .heading-card:hover{transform:none}}

/* Use the supplied symbol in the miniature workspace navigation. */
.landing-page .rail-monogram{background:var(--preview-cream)}
.landing-page .rail-monogram img{display:block;width:24px;height:28px;object-fit:contain}

/* Score arcs use the same percentage as their visible label, starting at 12 o’clock.
   The masked overlay keeps the existing transparent/gradient centres intact. */
.landing-page .score-ring{position:relative;isolation:isolate;--ring-width:5px;--ring-colour:var(--accent,#00a898);--ring-track:#b9d3ce}
.landing-page .hero-rows .hero-fit b.score-ring,
.landing-page #cards .heading-fit strong.score-ring{border:0}
.landing-page .score-ring::before{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:conic-gradient(var(--ring-colour) var(--score,0%),var(--ring-track) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-width)),#000 calc(100% - var(--ring-width) + .5px));mask:radial-gradient(farthest-side,transparent calc(100% - var(--ring-width)),#000 calc(100% - var(--ring-width) + .5px))}
@media(max-width:520px){.landing-page .hero-rows .hero-fit b.score-ring{--ring-width:4px}}