/* Demo pages (/demo/). Builds on the tokens and components in site.css. */
.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}
.print-only{display:none}

/* Demo bar: breadcrumb and language switch */
.demo-bar{margin-top:100px;background:var(--card);border-bottom:1px solid var(--line)}
.demo-bar-inner{display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;padding:12px 0}
.demo-bar .crumbs{margin:0;font-size:.78rem}
.lang-switch{display:inline-flex;border:1px solid var(--line);border-radius:100px;padding:3px;background:var(--paper)}
.lang-switch a{padding:4px 12px;border-radius:100px;font-size:.72rem;font-weight:700;color:var(--soft)}
.lang-switch a[aria-current]{background:var(--forest);color:#fff}

/* Shared buttons and CTA */
.pill-ghost{background:transparent;color:var(--forest);border-color:var(--forest);box-shadow:none}
.pill-ghost:hover{background:var(--forest);color:#fff}
.pill .icon{width:18px;height:18px}
.contact .pill.pill-ghost{background:transparent;color:#fbf8f1;border-color:rgba(251,248,241,.6);box-shadow:none}
.contact .pill.pill-ghost:hover{background:rgba(251,248,241,.12);border-color:#fbf8f1}
.demo-cta-actions{display:flex;flex-wrap:wrap;gap:12px 14px;justify-content:center}

/* Intro */
.demo-intro{padding:72px 0 28px}
.demo-intro h1{font-size:clamp(2.2rem,4vw,3.8rem);line-height:1.14;margin:20px 0 22px;max-width:900px}
.lede{max-width:760px;font-size:1.06rem;color:#3e4852}

/* Hub */
.demo-hub{padding:30px 0 110px}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hub-card{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--card);border:1px solid #e6dfd3;border-radius:var(--radius);padding:30px;transition:transform .3s var(--ease),box-shadow .3s}
.hub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hub-card strong{font:400 1.5rem/1.25 var(--serif);color:var(--ink);letter-spacing:-.02em}
.hub-text{font-size:.9rem;color:var(--muted)}
.hub-go{margin-top:auto;padding-top:14px;font-size:.82rem;font-weight:700;color:var(--forest)}
.hub-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--sage-soft);color:var(--forest);margin-bottom:8px}
.hub-icon .icon{width:24px;height:24px}
.hub-num{position:absolute;top:30px;right:30px;font-size:.72rem;font-weight:700;letter-spacing:.14em;color:var(--clay)}
.hub-tag{position:absolute;top:28px;right:64px;background:#f6e7d6;color:#74431c;border-radius:100px;padding:4px 11px;font-size:.68rem;font-weight:700}
.hub-card-lead{grid-column:span 2;background:radial-gradient(700px 300px at 90% 0%,#2f5c84,transparent 60%),var(--forest);border-color:var(--forest)}
.hub-card-lead strong{color:#fbf8f1;font-size:2rem}.hub-card-lead .hub-text{color:#d5dde6;max-width:520px;font-size:1rem}
.hub-card-lead .hub-go{color:#fbf8f1}.hub-card-lead .hub-icon{background:rgba(255,255,255,.12);color:#fbf8f1}
.hub-card-lead .hub-num{color:#e6c6a4}

/* Report layout (Snapshot, monitoring) */
.report{padding:48px 0 96px}
.report-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-bottom:26px;border-bottom:1px solid var(--line);margin-bottom:24px}
.report-head h1{font-size:clamp(2rem,3.4vw,3.2rem);margin:14px 0 6px}
.report-meta{margin:0;font-size:.88rem;color:var(--soft)}
.kpis{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:16px}
.kpis-3{grid-template-columns:repeat(3,1fr)}
.kpi{background:var(--card);border:1px solid #e6dfd3;border-radius:var(--radius);padding:24px}
.kpi>strong{display:block;font:400 2.5rem/1.1 var(--serif);color:var(--forest-deep);letter-spacing:-.03em;margin-bottom:8px}
.kpi p{margin:0;font-size:.82rem;line-height:1.55}
.kpi-score{display:flex;gap:20px;align-items:center}
.kpi-score b{display:block;font-size:.9rem;margin-bottom:4px}
.score-ring{--p:0;flex-shrink:0;position:relative;display:grid;place-items:center;align-content:center;width:104px;height:104px;border-radius:50%;background:conic-gradient(var(--clay) calc(var(--p) * 1%),#ebe6dc 0)}
.score-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:var(--card)}
.score-ring strong,.score-ring span{position:relative;line-height:1}
.score-ring strong{font:400 2.2rem var(--serif);color:var(--clay)}
.score-ring span{font-size:.7rem;color:var(--soft);font-weight:700}
.report-block{background:var(--card);border:1px solid #e6dfd3;border-radius:var(--radius);padding:32px;margin-top:20px}
.report-block h2{font-size:1.6rem;margin-bottom:6px;letter-spacing:-.02em}
.report-block .sub{font-size:.86rem;margin-bottom:20px}
.compare-bars{max-width:780px}
.compare-bars .bar-row{grid-template-columns:180px 1fr 52px;font-size:.86rem;margin:14px 0}
.compare-bars .bar{height:12px}
.report-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.report-cols-3{grid-template-columns:repeat(3,1fr)}
.report-cols .report-block{margin-top:20px}

/* Chips, legend, prompt table */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:.78rem;color:var(--soft);margin-bottom:14px}
.legend .none{margin-left:10px}
.chip{display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 7px;margin:2px 3px 2px 0;border-radius:6px;background:#ebe6dc;color:#34424e;font-size:.7rem;font-weight:700}
.chip-you{background:var(--clay);color:#fff}
.none{color:#b2ab9e}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:12px}
.table-wrap:focus-visible{outline:2px solid var(--clay)}
.prompt-table{width:100%;min-width:680px;border-collapse:collapse;font-size:.82rem}
.prompt-table th{text-align:left;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);background:var(--paper);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.prompt-table td,.prompt-table tbody th{padding:10px 14px;border-bottom:1px solid #eee8de;vertical-align:middle}
.prompt-table tbody th{text-align:left;font-size:.82rem;text-transform:none;letter-spacing:0;color:var(--ink);background:none;font-weight:600}
.prompt-table tr:last-child td,.prompt-table tr:last-child th{border-bottom:0}
.prompt-table td:first-child{color:var(--soft);font-variant-numeric:tabular-nums;width:36px}
.prompt-table tr.hit td{background:#fbf1e6}
.lang-tag{display:inline-block;margin-right:8px;padding:1px 6px;border-radius:4px;border:1px solid var(--line);font-size:.62rem;font-weight:700;color:var(--soft);vertical-align:1px}

/* Checks and fixes */
.checks{list-style:none;margin:16px 0 0;padding:0}
.checks li{display:grid;grid-template-columns:96px 1fr;gap:14px;align-items:start;padding:13px 0;border-top:1px solid var(--line)}
.checks li:first-child{border-top:0;padding-top:4px}
.checks b{display:block;font-size:.9rem;line-height:1.4}
.checks span{font-size:.8rem;color:var(--muted);line-height:1.5}
.check-badge{display:inline-flex!important;align-items:center;gap:5px;justify-content:center;border-radius:100px;padding:4px 10px;font-size:.72rem!important;font-weight:700}
.check-badge .icon{width:14px;height:14px}
.pass .check-badge{background:#e1efe3;color:#2d6a3a!important}
.fail .check-badge{background:#f6e2dd;color:#8a2f25!important}
.fixes{list-style:none;margin:16px 0 0;padding:0;counter-reset:fix}
.fixes li{counter-increment:fix;position:relative;padding:4px 0 18px 50px}
.fixes li::before{content:counter(fix);position:absolute;left:0;top:2px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--clay);color:#fff;font:400 1rem var(--serif)}
.fixes b{display:block;font-size:.95rem;line-height:1.4;margin-bottom:4px}
.fixes span{display:block;font-size:.84rem;color:var(--muted);line-height:1.6}
.dot-list{list-style:none;margin:16px 0 0;padding:0}
.dot-list li{position:relative;padding:0 0 14px 20px;font-size:.88rem;color:var(--muted);line-height:1.6}
.dot-list li::before{content:"";position:absolute;left:2px;top:9px;width:7px;height:7px;border-radius:50%;background:var(--sage)}
.method-note{margin-top:20px;padding:18px 22px;border-left:3px solid var(--clay);background:var(--card);border-radius:0 12px 12px 0}
.method-note b{font-size:.82rem}
.method-note p{margin:4px 0 0;font-size:.8rem;line-height:1.65}

/* AEO before/after */
.aeo-demo{padding:10px 0 100px}
.tabs{display:inline-flex;gap:4px;padding:5px;border-radius:100px;background:var(--card);border:1px solid var(--line);margin-bottom:24px}
.tab{border:0;background:none;border-radius:100px;padding:10px 26px;font-weight:700;font-size:.88rem;color:var(--soft);transition:background .2s,color .2s}
.tab[aria-selected=true]{background:var(--forest);color:#fff}
.aeo-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.col-title,.col-title-inline{display:flex;align-items:center;gap:10px;font:700 .8rem var(--sans);letter-spacing:.04em;color:#34424e;margin-bottom:12px}
.col-title span,.col-title-inline span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--clay);color:#fff;font-size:.72rem;text-transform:uppercase}
.browser{background:#fff;border:1px solid #e0d9cc;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.browser-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f1ede6;border-bottom:1px solid #e0d9cc}
.browser-bar i{width:9px;height:9px;border-radius:50%;background:#d6cfc2}
.browser-bar span{margin-left:10px;flex:1;background:#fff;border-radius:6px;padding:3px 10px;font-size:.7rem;color:var(--soft)}
.browser-body{padding:18px}
.browser-body>p{font-size:.84rem;margin:14px 0}
.mock-hero{display:flex;align-items:flex-end;min-height:150px;border-radius:10px;padding:16px;background:center/cover;position:relative;overflow:hidden}
.mock-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(15,30,25,.7),rgba(15,30,25,0) 70%)}
.mock-hero b{position:relative;color:#fff;font:400 1.2rem/1.3 var(--serif)}
.mock-icons{display:flex;gap:14px;color:var(--soft);margin-bottom:16px}
.mock-icons .icon{width:26px;height:26px}
.mock-btn{display:inline-block;background:var(--ink);color:#fff;border-radius:6px;padding:7px 14px;font-size:.76rem;font-weight:700}
.mock-facts{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mock-facts li{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--ink)}
.mock-facts .icon{width:18px;height:18px;color:var(--forest);flex-shrink:0}
.mock-faq{border-top:1px solid var(--line);padding-top:10px;font-size:.76rem}
.mock-faq b{display:block;margin-bottom:4px}
.mock-faq span{display:block;padding:5px 0;border-bottom:1px dashed var(--line);color:var(--muted)}
.facts-card{background:var(--card);border:1px solid #e6dfd3;border-radius:14px;padding:22px}
.facts-score{font-size:.86rem;margin-bottom:12px}
.facts-score strong{font:400 1.9rem var(--serif);color:var(--forest-deep);margin-right:6px}
.facts{list-style:none;margin:0;padding:0}
.facts li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid #eee8de;font-size:.84rem}
.fact-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:50%}
.fact-icon .icon{width:13px;height:13px}
.found .fact-icon{background:#e1efe3;color:#2d6a3a}
.missing .fact-icon{background:#f6e2dd;color:#8a2f25}
.fact-label{color:#34424e;font-weight:600}
.fact-value{text-align:right;color:var(--ink)}
.missing .fact-value{color:#8a2f25;font-style:italic}
.code-block{margin-top:22px;background:var(--card);border:1px solid #e6dfd3;border-radius:14px}
.code-block summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;padding:16px 20px;cursor:pointer;list-style:none}
.code-block summary::-webkit-details-marker{display:none}
.code-block summary .col-title-inline{margin:0}
.code-block summary small{font-size:.74rem;color:var(--soft)}
.code-block summary::after{content:"+";font-size:1.2rem;color:var(--forest);margin-left:auto}
.code-block[open] summary::after{content:"−"}
.code-block pre{margin:0;max-height:440px;overflow:auto;background:var(--forest-deep);color:#dfe6ee;padding:20px;border-radius:0 0 14px 14px;font:.74rem/1.6 ui-monospace,SFMono-Regular,Consolas,monospace}
.ai-answer{margin-top:22px;border-radius:14px;padding:22px;background:#fff;border:1px dashed #cbbfa9}
.ai-answer-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:12px}
.ai-q{background:var(--paper);border-radius:100px;padding:6px 14px;font-size:.82rem;font-weight:600}
.ai-answer p{font-size:.9rem;color:var(--ink);margin-bottom:12px}
.ai-verdict{display:inline-flex;align-items:center;gap:6px;border-radius:100px;padding:5px 12px;font-size:.76rem;font-weight:700;background:#f6e2dd;color:#8a2f25}
.ai-verdict .icon{width:14px;height:14px}
.ai-answer-after{border-color:#9fbea5}
.ai-answer-after .ai-verdict{background:#e1efe3;color:#2d6a3a}
.demo-note-line{margin-top:26px;font-size:.84rem}

/* Assistant */
.assistant-demo{padding:10px 0 100px}
.assistant-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start}
.chat{display:flex;flex-direction:column;height:720px;background:var(--card);border:1px solid #e6dfd3;border-radius:22px;box-shadow:var(--shadow);overflow:hidden}
.chat-head{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line);background:#fff}
.chat-head b{display:block;font-size:.92rem}
.chat-avatar{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#0f4c6e;color:#fff;font-size:.8rem;font-weight:700}
.chat-status{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--soft)}
.chat-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#5fa36b}
.chat-log{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:82%;padding:11px 15px;font-size:.86rem;line-height:1.55;border-radius:16px;animation:pop .3s var(--ease) both}
.msg-bot{align-self:flex-start;background:#eeede8;border-bottom-left-radius:4px;color:var(--ink)}
.msg-user{align-self:flex-end;background:var(--forest);color:#fff;border-bottom-right-radius:4px}
.msg-notice{align-self:center;max-width:92%;display:flex;gap:10px;align-items:flex-start;background:#fff6e9;border:1px solid #f0d9b8;color:#6b4518;font-size:.78rem;border-radius:12px}
.msg-notice b{display:block}
.msg-typing{display:flex;gap:4px;padding:14px 16px}
.msg-typing i{width:7px;height:7px;border-radius:50%;background:#a4a99f;animation:blink 1s infinite}
.msg-typing i:nth-child(2){animation-delay:.15s}.msg-typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
.chat-chips{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;border-top:1px solid var(--line)}
.chat-chips button{flex-shrink:0;max-width:100%;text-align:left;background:#fff;border:1px solid #c6ccd4;border-radius:100px;padding:7px 13px;font-size:.76rem;font-weight:600;color:var(--ink);transition:border-color .2s,background .2s}
.chat-chips button:hover{border-color:var(--forest)}
.chat-chips button.chip-unknown{border-style:dashed;border-color:var(--clay)}
.chat-chips button:disabled{opacity:.45}
.chat-input{display:flex;gap:8px;padding:12px 16px 16px;background:var(--card)}
.chat-input input{flex:1;min-width:0;border:1px solid #cdd3da;border-radius:100px;padding:11px 16px;background:#fff;outline:none}
.chat-input input:focus{border-color:var(--sage);box-shadow:0 0 0 4px #7f93a633}
.chat-input button{width:44px;height:44px;border-radius:50%;border:0;background:var(--forest);color:#fff;font-size:1.1rem}
.assistant-side h2{font-size:1.6rem;margin-bottom:6px}

/* Monitoring chart */
.chart-legend{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;margin:0 0 10px;padding:0;font-size:.8rem;color:#34424e}
.chart-legend li{display:flex;align-items:center;gap:8px}
.chart-legend i{width:16px;height:4px;border-radius:2px}
.chart{position:relative}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .grid{stroke:#e6e0d5;stroke-width:1}
.chart .axis{fill:var(--soft);font:12px var(--sans)}
.chart .series polyline{fill:none;stroke:var(--c);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .series circle{fill:var(--c);stroke:var(--card);stroke-width:2}
.chart .series-you polyline{stroke-width:3}
.chart .direct-label{fill:var(--ink);font:600 12px var(--sans)}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .crosshair{stroke:#a9a296;stroke-dasharray:3 4;opacity:0}
.chart.active .crosshair{opacity:1}
.chart-tip{position:absolute;top:8px;z-index:2;min-width:180px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:10px 12px;font-size:.76rem;pointer-events:none}
.chart-tip b{display:block;margin-bottom:4px}
.chart-tip div{display:flex;align-items:center;gap:8px;justify-content:space-between}
.chart-tip div span{display:flex;align-items:center;gap:6px}
.chart-tip i{width:10px;height:3px;border-radius:2px}
.chart-tip em{font-style:normal}
.table-hint{display:none;font-size:.74rem;color:var(--soft);margin:0 0 8px}
.data-table{margin-top:16px}
.data-table summary{cursor:pointer;font-size:.82rem;font-weight:700;color:var(--forest);margin-bottom:10px}
.data-table .prompt-table{min-width:520px}

@media(max-width:1080px){
 .hub-grid{grid-template-columns:1fr 1fr}
 .kpis{grid-template-columns:1fr 1fr}
 .report-cols-3{grid-template-columns:1fr}
 .assistant-grid{grid-template-columns:1fr}
 .chat{height:600px}
}
@media(max-width:760px){
 .demo-bar{margin-top:72px}
 .demo-bar-inner{padding:10px 0}
 .demo-intro{padding:44px 0 18px}
 .hub-grid{grid-template-columns:1fr}
 .hub-card-lead{grid-column:auto}.hub-card-lead strong{font-size:1.6rem}
 .hub-card{padding:24px}
 .report{padding:30px 0 70px}
 .report-head{flex-direction:column;align-items:flex-start}
 .kpis,.kpis-3{grid-template-columns:1fr 1fr;gap:12px}
 .kpi-score{grid-column:1/-1}
 .kpi{padding:18px}.kpi>strong{font-size:2rem}
 .report-block{padding:22px 18px}
 .report-cols{grid-template-columns:1fr;gap:0}
 .compare-bars .bar-row{grid-template-columns:110px 1fr 44px;font-size:.78rem}
 .checks li{grid-template-columns:1fr;gap:6px}
 .check-badge{justify-self:start}
 .aeo-grid{grid-template-columns:1fr}
 .tab{padding:9px 22px}
 .mock-facts{grid-template-columns:1fr}
 .facts li{grid-template-columns:24px 1fr;row-gap:2px}
 .fact-value{grid-column:2;text-align:left;font-size:.8rem;color:var(--muted)}
 .chat{height:auto;border-radius:18px}.chat-log{height:340px;flex:none}.chat-chips{max-height:none}
 .msg{max-width:90%}
 .table-hint{display:block}
 .chart-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -6px;padding:0 6px}
 .chart svg{min-width:620px}
 .chart .axis,.chart .direct-label{font-size:19px}
 .chart-tip{min-width:160px}
}

/* Print: one clean report on A4 */
@page{size:A4;margin:14mm}
@media print{
 *{-webkit-print-color-adjust:exact;print-color-adjust:exact;animation:none!important;transition:none!important}
 .site-header,.demo-bar,.footer,.dialog-backdrop,.no-print,.demo-cta{display:none!important}
 body{background:#fff;font-size:11px}
 .print-only{display:block}
 .print-flag{font-size:9px;color:#74431c;margin:0 0 10px}
 .container{width:100%}
 .report{padding:0}
 .report-head{padding-bottom:12px;margin-bottom:12px}
 .report-head h1{font-size:24px}
 .kpis{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:8px}
 .kpi-score{grid-column:auto}
 .table-hint{display:none!important}
 .kpi,.report-block,.method-note{box-shadow:none;border-color:#d8d2c6;break-inside:avoid}
 .report-block{padding:16px;margin-top:10px}
 .report-block:has(.prompt-table){break-inside:auto}
 .report-cols{grid-template-columns:1fr 1fr;gap:10px}
 .report-cols-3{grid-template-columns:repeat(3,1fr)}
 .table-wrap{overflow:visible;border-color:#d8d2c6}
 .prompt-table{min-width:0;font-size:9px}
 .prompt-table td,.prompt-table th{padding:5px 8px}
 .prompt-table tr{break-inside:avoid}
 .js .reveal{opacity:1!important;transform:none!important}
 .bar i,.stat-bar i{animation:none!important}
 .data-table{display:none}
}

/* Platform screenshots (2026-11) */
.shots-section{background:var(--cream)}
.shots-section .lede{max-width:720px}
.shots{display:grid;grid-template-columns:repeat(12,1fr);gap:22px;margin-top:28px;align-items:start}
.shot{margin:0;grid-column:span 4}
.shot-wide{grid-column:span 8}
.shot-full{grid-column:1/-1}
.shot a{display:block;border-radius:16px;overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);transition:transform .3s var(--ease)}
.shot a:hover{transform:translateY(-3px)}
.shot img{display:block;width:100%;height:auto}
.shot-phone a{max-height:620px}
.shot figcaption{font-size:.84rem;color:var(--muted);margin-top:10px;line-height:1.5}
@media(max-width:900px){.shot,.shot-wide{grid-column:1/-1}.shot-phone{max-width:420px}}
/* Rates demo */
.rate-tabs{margin:18px 0 16px}
.rate-summary{display:flex;flex-wrap:wrap;gap:10px 26px;margin:0 0 14px;font-size:.9rem;color:var(--muted)}
.rate-summary strong{color:var(--ink);font-size:1.05rem}
.rate-row{display:grid;grid-template-columns:170px 1fr 90px;gap:14px;align-items:center;padding:9px 0;border-bottom:1px solid #eee8de;font-size:.9rem}
.rate-row:last-child{border-bottom:0}
.rate-row.you{font-weight:700}
.rate-bar{height:10px;background:#eee8de;border-radius:99px;overflow:hidden}
.rate-bar i{display:block;height:100%;background:var(--sage);border-radius:99px}
.rate-row.you .rate-bar i{background:var(--clay)}
.rate-row b{text-align:right;font-variant-numeric:tabular-nums}
.rate-row .full{color:#a5432f}
@media(max-width:560px){.rate-row{grid-template-columns:110px 1fr 70px;font-size:.84rem}}
/* Review reply demo */
.review-card{background:var(--card);border:1px solid #e6dfd3;border-radius:var(--radius);padding:26px}
.review-card .stars{color:var(--clay);letter-spacing:2px}
.reply-box{margin-top:16px;padding:18px 20px;background:var(--paper);border-left:3px solid var(--forest);border-radius:0 12px 12px 0;white-space:pre-line;font-size:.92rem}
.flow{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:flow}
.flow li{counter-increment:flow;background:var(--card);border:1px solid #e6dfd3;border-radius:14px;padding:18px;font-size:.88rem}
.flow li::before{content:counter(flow);display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--forest);color:#fff;font-weight:700;font-size:.8rem;align-items:center;justify-content:center;margin-bottom:10px}
.flow b{display:block;margin-bottom:4px}
@media(max-width:760px){.flow{grid-template-columns:1fr 1fr}}