.merchant-app .side-bottom a{display:block;color:var(--blue-ink);font-size:13px;font-weight:600;margin:0 0 12px;text-decoration:none}
.merchant-app .side-bottom a:hover{text-decoration:underline}

/* Status */
.observation-banner{display:flex;gap:16px;align-items:center;background:linear-gradient(100deg,#e9efff,#f3f6ff);border-radius:var(--r-lg);padding:16px 20px;margin:0 0 12px}
.shield{width:40px;height:40px;border-radius:12px;background:var(--blue);flex-shrink:0;position:relative;box-shadow:0 6px 16px -6px #3d63ffaa}
.shield:before{content:"";position:absolute;inset:10px 12px 9px;background:#fff;clip-path:polygon(50% 0,100% 18%,100% 55%,50% 100%,0 55%,0 18%)}
.shield:after{content:"";position:absolute;left:17px;top:17px;width:6px;height:6px;border-radius:50%;background:var(--blue)}
.observation-banner strong{font-weight:700;font-size:15px}
.observation-banner p{font-size:13px}
.observation-pill{margin-left:auto;font-size:12px;font-weight:600;background:var(--panel);color:var(--ink);border-radius:100px;padding:8px 14px;white-space:nowrap;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:8px}
.observation-pill:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink-4)}
#development-banner{background:transparent;padding:4px 2px;margin:-2px 0 10px;color:var(--ink-3);font-size:12.5px}#development-banner:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);margin-right:8px;vertical-align:1px}#development-banner strong{color:var(--amber-ink);font-weight:600}

/* KPIs */
.kpi-summary{font-size:16px;color:var(--ink-2);margin:4px 0 14px}
.kpi-summary strong{color:var(--amber-ink);font-weight:700}
.merchant-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 0 12px}
.merchant-kpi{--tone:var(--ink-4);background:var(--panel);border-radius:16px;padding:18px 20px 16px;min-height:0;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.merchant-kpi[data-tone=amber]{--tone:var(--amber)}
.merchant-kpi[data-tone=green]{--tone:var(--green)}
.merchant-kpi .label{color:var(--ink-3);font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px}
.merchant-kpi .label:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tone);flex-shrink:0}
.merchant-kpi strong{display:block;color:var(--ink);font-size:clamp(32px,3vw,44px);font-weight:700;letter-spacing:-.04em;margin:12px 0 6px;line-height:1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.merchant-kpi small{color:var(--ink-3);font-size:12.5px;line-height:1.4;display:block}
.merchant-kpi[data-tone=amber] small{color:var(--amber-ink)}
.merchant-kpi[data-tone=green] small{color:#11703a}
.kpi-secondary{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 16px;padding:12px 20px;background:var(--soft);border-radius:12px}
.kpi-secondary div{display:flex;align-items:baseline;gap:8px}
.kpi-secondary dt{font-size:13px;color:var(--ink-3)}
.kpi-secondary dd{margin:0;font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.kpi-secondary small{font-size:12px;color:var(--ink-4)}
.icon-button{width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:var(--ink-3);font-size:17px;display:grid;place-items:center;transition:background .15s,color .15s}
.icon-button:hover{background:var(--soft);color:var(--ink)}
.learned-list{list-style:none;margin:0;padding:0;display:grid}
.learned-list li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:14px 0;border-bottom:1px solid var(--line)}
.learned-list span{font-size:13px;color:var(--ink-3)}
.learned-list strong{grid-row:span 2;align-self:center;font-size:16px;font-weight:700;text-align:right;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.learned-list small{font-size:12px;color:var(--ink-4)}

/* Cards */
.merchant-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.merchant-card{background:var(--panel);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow)}
.merchant-card h2,.merchant-card h3{margin-top:0}
.merchant-card>h2{margin-bottom:14px}
.merchant-card p+p{margin-top:10px}
.merchant-card+.merchant-card,.merchant-grid+.merchant-card{margin-top:16px}
.merchant-grid>.merchant-card{margin:0}
.merchant-muted{font-size:13px;color:var(--ink-3);margin-top:14px}
.metric-note,.product-legend{font-size:12px;margin-top:16px;color:var(--ink-3)}
.merchant-badge{background:var(--tint);color:var(--blue-ink);padding:6px 12px;border-radius:100px;font-size:12px;font-weight:600;white-space:nowrap}

/* Onboarding */
.onboarding-card{margin:16px 0}
.onboarding-heading{display:flex;justify-content:space-between;gap:16px;align-items:start}
.onboarding-heading h2{font-size:22px}
.setup-list{padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:22px 0}
.setup-list li{display:flex;align-items:center;gap:12px;color:var(--ink);font-size:14px;font-weight:500;padding:14px 16px;background:var(--soft);border-radius:var(--r)}
.setup-check{height:26px;width:26px;display:grid;place-items:center;background:var(--green);color:#fff;border-radius:50%;font-size:12px;font-weight:700;flex-shrink:0}
.setup-check.pending{background:var(--line);color:var(--ink-3)}
.merchant-grid .setup-list{grid-template-columns:1fr}
.merchant-grid .setup-list .setup-check{background:var(--blue)}
.setup-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 0}

/* Friction distribution */
.friction-row{display:grid;grid-template-columns:130px 1fr 56px;gap:16px;align-items:center;margin:16px 0}
.friction-row button{border:0;background:none;text-align:left;padding:0;color:var(--ink);font-size:14px;font-weight:500}
.friction-row button:hover{color:var(--blue-ink)}
.bar-track{height:10px;border-radius:100px;background:var(--soft);overflow:hidden}
.bar-fill{height:100%;width:var(--bar-width);border-radius:100px;background:linear-gradient(90deg,#7b95ff,var(--blue));transition:width .6s cubic-bezier(.2,.7,.2,1)}
.friction-row strong{font-size:14px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.signal-list{list-style:none;padding:0;margin:4px 0 0;display:grid}
.signal-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:14px;padding:14px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.signal-list strong{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}

/* Opportunities */
.opportunity-list{display:grid;gap:12px}
.opportunity-card{display:grid;grid-template-columns:48px 1fr auto;gap:20px;align-items:start;background:var(--panel);border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow);transition:box-shadow .15s}
.opportunity-card:hover{box-shadow:0 14px 30px -16px #3d63ff55}
.opportunity-number{background:var(--tint);color:var(--blue-ink);width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:14px;font-weight:700}
.opportunity-card h3{margin:0 0 10px;font-size:18px}
.opportunity-card p{font-size:14px;line-height:1.65}
.opportunity-card p strong{color:var(--blue-ink);font-weight:600}
.opportunity-stats{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.opportunity-stats span{font-size:12px;font-weight:500;color:var(--ink-2);background:var(--soft);padding:5px 10px;border-radius:100px}
.opportunity-card .secondary{font-size:13px}

/* Filters */
.inline-buttons{display:flex;gap:8px;flex-wrap:wrap}
.pill-button{border:1px solid transparent;background:var(--panel);box-shadow:var(--shadow);padding:9px 16px;border-radius:100px;color:var(--ink-2);font-size:13px;font-weight:500}
.pill-button:hover{color:var(--blue-ink)}
.pill-button.selected{background:var(--blue);color:#fff;border-color:var(--blue)}

.empty-state{padding:52px 26px;text-align:center;background:var(--panel);box-shadow:var(--shadow);border-radius:var(--r-lg);margin:16px 0}
.empty-state .empty-icon{width:52px;height:52px;margin:0 auto 14px;font-size:22px;display:grid;place-items:center;background:var(--tint);color:var(--blue);border-radius:16px}
.empty-state h2{margin:10px 0}
.empty-state p{max-width:540px;margin:0 auto;line-height:1.7}
.empty-state .primary{margin-top:22px}

.product-title{font-weight:600;color:var(--ink)}
.merchant-footnote{font-size:12px;margin:32px 0 0;color:var(--ink-3);text-align:center}

/* Settings */
.settings-form{display:grid;gap:18px}
.settings-form label:has(input[type=checkbox]){display:flex;align-items:center;gap:10px;font-weight:400;color:var(--ink)}
.settings-form input[type=checkbox]{width:17px;height:17px;margin:0}
.settings-form textarea{min-height:86px;resize:vertical}
.settings-form input[type=color]{width:64px;height:44px;padding:4px}
.settings-form fieldset{border:0;background:var(--soft);border-radius:var(--r);padding:16px;display:grid;gap:12px;margin:0}
.settings-form legend{font-size:13px;font-weight:600;color:var(--ink);padding:0 6px}
.settings-form button{justify-self:start}

/* Preview */
.preview-note{font-size:13px;color:var(--ink-3);margin-bottom:18px}
.storefront-scene{padding:28px;background:var(--soft);border-radius:var(--r-lg)}
.storefront-scene .product-placeholder{height:108px;background:linear-gradient(135deg,#e2e8f5,#f1f4fb);border-radius:var(--r);margin-bottom:16px;display:grid;place-items:center;font-size:12px;color:var(--ink-3)}
.assistance-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 14px 34px -14px #0d143333}
.assistance-card .brand{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--brand-color);text-transform:uppercase;margin-bottom:10px}
.assistance-card h3{margin:0 0 10px;font-size:19px}
.assistance-card p{font-size:14px;line-height:1.65}
.assistance-card button{background:var(--brand-color);border:0;color:#fff;border-radius:8px;padding:11px 18px;margin-top:16px;font-size:13px;font-weight:600}
.preview-missing{padding:14px;background:var(--warn-bg);border-radius:10px;font-size:13px;line-height:1.6;color:var(--warn)}

/* Report */
.report-intro{padding:34px;background:radial-gradient(70% 140% at 100% 0,#2c47c9 0,transparent 60%),var(--navy);color:#fff;border-radius:24px;margin:16px 0}
.report-intro .eyebrow{color:#9fb1ff;margin-bottom:12px}
.report-intro h2{margin:0 0 10px;font-size:28px;letter-spacing:-.025em;color:#fff}
.report-intro p{color:#c3cae6}
.report-actions{display:flex;gap:10px;margin:18px 0}
.notice-small{padding:14px 18px;background:var(--tint);border-radius:var(--r);color:var(--ink-2);font-size:14px;margin:0 0 16px}
.merchant-app #content>h2{margin:36px 0 16px;font-size:22px}
.merchant-app .section-heading h2{font-size:22px}
.setup-panel{background:var(--panel);box-shadow:var(--shadow);border-radius:var(--r-lg);padding:24px;margin:16px 0}
.setup-panel label{display:flex;align-items:center;gap:10px;margin:12px 0}
.setup-panel input{width:16px;height:16px;padding:0}
.setup-panel button{margin-top:12px}
.report-print-only{display:none}

/* ===== Landing (signed-out) ===== */
.merchant-app:has(#login:not([hidden])){background:#fff}
.merchant-app:has(#login:not([hidden])) main{padding:0}
.merchant-app #login.landing{overflow-x:clip;max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
.landing{--wrap:1180px;color:var(--ink)}
.landing h2{font-size:clamp(28px,3.2vw,40px);line-height:1.12;letter-spacing:-.03em;margin:0}
.landing-nav,.hero,.statement,.band,.dark-inner,.cta-band,.landing-footer{width:min(var(--wrap),100% - 40px);margin-inline:auto}
.landing-nav{position:sticky;top:12px;z-index:5;display:flex;align-items:center;gap:32px;padding:12px 14px 12px 20px;margin-top:12px;background:linear-gradient(135deg,#ffffffc7,#ffffff99);transition:background .35s,box-shadow .35s;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-radius:18px;box-shadow:inset 0 1px 0 #ffffffcc,inset 0 0 0 1px #ffffff80,0 12px 32px -16px #0d14334d}
.landing-links{display:flex;gap:26px;margin-right:auto}
.landing-links a{color:var(--ink-2);text-decoration:none;font-weight:500;font-size:14px}
.landing-links a:hover{color:var(--blue)}

.hero{isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center;padding:72px 0 88px;position:relative;scroll-margin-top:100px}
.hero:before{content:"";position:absolute;inset:-120px calc(50% - 50vw) 0;z-index:-1;background:radial-gradient(60% 70% at 78% 40%,#c9d6ff 0,transparent 70%),linear-gradient(180deg,#eef2ff 0,#f7f9ff 70%,#fff 100%)}
.kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:var(--ink-2);background:#fff;box-shadow:var(--shadow);padding:5px 14px 5px 5px;border-radius:100px}
.kicker span{background:var(--blue);color:#fff;font-weight:600;font-size:12px;padding:3px 10px;border-radius:100px}
.merchant-app #login .hero h1{font-size:clamp(40px,5vw,64px);line-height:1.04;letter-spacing:-.04em;margin:22px 0 20px}
.hero h1 em{font-style:normal;color:var(--blue)}
.lead{font-size:18px;line-height:1.6;max-width:540px;color:var(--ink-2)}
.hero form{margin:32px 0 20px;max-width:540px;display:grid;gap:8px}
.install-row{display:flex;gap:8px;background:#fff;padding:6px;border-radius:14px;box-shadow:0 12px 30px -14px #0d143355}
.install-row input{flex:1;min-width:0;border:0;padding:12px;font-size:15px;box-shadow:none}
.install-row input:focus{box-shadow:none}
.install-row:focus-within{box-shadow:0 0 0 4px #3d63ff33}
.hero-ticks{display:flex;flex-wrap:wrap;gap:8px 20px;list-style:none;padding:0;margin:0;font-size:13px;color:var(--ink-2);font-weight:500}
.hero-ticks li{display:flex;align-items:center;gap:7px}
.hero-ticks li:before{content:"";width:16px;height:16px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233d63ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.4 8.5 3.1 3.1L12.6 4.9'/%3E%3C/svg%3E") center/contain no-repeat}

.hero-visual{position:relative;padding:20px 0 40px}
@keyframes grow{from{background-size:0 100%,auto}}
.alert-icon{width:36px;height:36px;border-radius:10px;background:#ffe9e7;position:relative;flex-shrink:0}
.alert-icon:after{content:"";position:absolute;left:12px;top:12px;width:12px;height:12px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px #f4544b33}
@keyframes rise{from{opacity:0;transform:translateY(14px)}}
.mock-caption{position:absolute;right:4px;bottom:-14px;font-size:11px;color:var(--ink-4)}

.statement{padding:96px 0 72px}
.statement p{font-size:clamp(26px,3.1vw,42px);line-height:1.28;letter-spacing:-.025em;font-weight:600;color:var(--ink);max-width:1040px;margin-inline:auto;text-align:center;text-wrap:balance}
.statement span{color:#b7bfd3}

.band{padding:56px 0}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature{background:var(--bg);border-radius:24px;padding:30px;min-height:220px;display:flex;flex-direction:column;justify-content:flex-end}
.feature h3{font-size:20px;margin:0 0 8px}
.feature p{font-size:15px}
.feature-wide{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:linear-gradient(120deg,#eef2ff,#f7f9ff);min-height:260px}
.feature-wide h3{font-size:26px}

.dark{background:radial-gradient(50% 60% at 85% 10%,#2b3fae 0,transparent 70%),radial-gradient(40% 50% at 0 100%,#1a2878 0,transparent 70%),var(--navy);color:#fff;padding:88px 0;margin:56px 0}
.dark h2{color:#fff}
.pattern-tag{align-self:flex-start;font-size:12px;font-weight:600;background:#3d63ff33;color:#b8c6ff;padding:5px 11px;border-radius:100px;margin-bottom:auto}

.privacy-card{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;background:var(--bg);border-radius:28px;padding:48px}
.privacy-card h2{margin-bottom:14px}
.privacy-card p{font-size:16px}
.privacy-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.privacy-card li{background:#fff;border-radius:14px;padding:16px 18px;font-weight:500;display:flex;gap:12px;align-items:center;box-shadow:var(--shadow)}
.privacy-card li:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--tint);flex-shrink:0}

.faq{display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:start}
.faq-list{display:grid;gap:10px}
.faq details{border-radius:16px;padding:0 22px;background:var(--bg)}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;font-size:16px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:22px;line-height:1;color:var(--blue);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{padding:0 0 20px;font-size:15px}

.cta-band{display:flex;align-items:center;justify-content:space-between;gap:32px;margin:56px auto 72px;padding:48px 52px;border-radius:28px;background:radial-gradient(60% 120% at 100% 0,#7b95ff 0,transparent 60%),linear-gradient(120deg,var(--blue-ink),var(--blue));color:#fff}
.cta-band h2{color:#fff;font-size:clamp(26px,2.8vw,36px);max-width:620px}
.cta-band p{color:#dbe3ff;margin-top:10px;font-size:16px}
.landing-footer{display:flex;align-items:center;gap:20px;padding:28px 0 40px;font-size:13px}
.landing-footer p{color:var(--ink-3);margin-right:auto}
.landing-footer a:not(.logo){color:var(--ink-2);text-decoration:none;font-weight:500}

@media(max-width:1150px){.merchant-kpis{grid-template-columns:repeat(2,1fr)}.merchant-grid{grid-template-columns:1fr}.opportunity-card{grid-template-columns:44px 1fr}.opportunity-card>button{grid-column:2;justify-self:start}.friction-row{grid-template-columns:110px 1fr 50px;gap:12px}.hero{grid-template-columns:1fr;padding-top:48px}.hero-visual{max-width:640px}.feature-grid{grid-template-columns:1fr 1fr}.privacy-card,.faq{grid-template-columns:1fr;gap:24px}}
@media(max-width:760px){.landing-links{display:none}.landing-nav{justify-content:space-between}.hero h1{font-size:40px}.lead{font-size:16px}.install-row{flex-direction:column}.install-row .cta{width:100%}.statement{padding:64px 0 40px}.feature-grid{grid-template-columns:1fr}.feature-wide{grid-template-columns:1fr;gap:20px}.band{padding:40px 0}.band-head{flex-direction:column;align-items:flex-start;gap:16px}.dark{padding:64px 0}.privacy-card{padding:28px}.cta-band{flex-direction:column;align-items:flex-start;padding:32px 26px}.landing-footer{flex-wrap:wrap}}
@media(max-width:700px){.observation-banner{align-items:start;flex-wrap:wrap;padding:14px}.observation-pill{margin-left:56px}.merchant-kpis{gap:10px}.merchant-kpi{padding:16px}.kpi-secondary{flex-direction:column;padding:12px 16px}.merchant-card{padding:20px}.opportunity-card{padding:18px;gap:12px}.friction-row{grid-template-columns:92px 1fr 46px}.storefront-scene{padding:16px}.onboarding-heading{flex-direction:column}}
@media print{aside,main>header,.observation-banner,#development-banner,.page-heading,.section-heading,#refresh,.report-actions,.merchant-footnote{display:none!important}.merchant-app main{margin:0;padding:0;max-width:none}.merchant-card,.merchant-kpi,.opportunity-card{break-inside:avoid;box-shadow:none}.merchant-grid{display:block}.merchant-card{margin:12px 0}.report-print-only{display:block}.opportunity-card button{display:none}.merchant-kpis{grid-template-columns:repeat(4,1fr)}body{background:#fff}.report-intro{background:#fff;color:var(--ink);border:1px solid var(--line)}.report-intro h2{color:var(--ink)}.merchant-kpi,.kpi-secondary{box-shadow:none;border:1px solid var(--line)}.report-intro p,.report-intro .eyebrow{color:var(--ink-2)}}

.merchant-app .page-heading h1{font-size:clamp(24px,2.4vw,34px);letter-spacing:-.025em}
/* Topbar: workspace identity + live tracking status */
.merchant-app main>header.topbar{height:64px;border-bottom:1px solid var(--line);gap:16px}
.workspace{display:flex;align-items:center;gap:10px;min-width:0;font-size:14px}
.menu-wrap{position:relative}
.store-button{display:inline-flex;align-items:center;gap:10px;border:0;background:none;padding:5px 8px 5px 5px;margin-left:-5px;border-radius:10px;font-weight:600;color:var(--ink);font-size:14px;max-width:260px}
.store-button:not(:disabled):hover{background:var(--soft)}
.store-button:disabled{cursor:default;opacity:1}
.store-button #store-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.store-button i{font-style:normal;color:var(--ink-3);font-size:12px}
.store-avatar{width:30px;height:30px;border-radius:8px;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex-shrink:0}
.store-avatar:empty{background:var(--soft)!important}
.store-avatar.small{width:24px;height:24px;border-radius:6px;font-size:11px;background:var(--tint);color:var(--blue-ink)}
.crumb-sep{color:var(--ink-4)}
.workspace #breadcrumb-view{color:var(--ink-3);font-weight:500;white-space:nowrap}
.topbar-right{display:flex;align-items:center;gap:12px}
.last-sync{font-size:12.5px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.last-sync.fresh{color:var(--ink-2)}
.topbar .live{box-shadow:none;background:var(--soft);gap:0;padding:6px 6px 6px 12px}
.topbar .live[data-tone=good] .dot{background:var(--green);box-shadow:0 0 0 3px #16a34a26;animation:pulse 2.4s ease-in-out infinite}
.topbar .live[data-tone=wait] .dot{background:var(--blue);box-shadow:0 0 0 3px #3d63ff26}
.topbar .live[data-tone=warn] .dot{background:var(--amber);box-shadow:0 0 0 3px #f59e0b2e}
.topbar .live[data-tone=bad]{background:#fdeceb;color:#a1261b}
.topbar .live[data-tone=bad] .dot{background:var(--coral);box-shadow:0 0 0 3px #f4544b33}
.topbar .live[data-tone=off] .dot{background:var(--ink-4);box-shadow:none}
.topbar .live:not(:has(.mode-tag:not([hidden]))){padding-right:12px}
@keyframes pulse{50%{box-shadow:0 0 0 6px #16a34a00}}
.mode-tag{margin-left:10px;background:var(--panel);color:var(--ink-3);font-size:11px;font-weight:600;padding:3px 8px;border-radius:100px}
.menu{position:absolute;top:calc(100% + 8px);left:0;z-index:20;min-width:230px;background:var(--panel);border-radius:14px;padding:6px;box-shadow:0 20px 50px -12px #0d143340,0 2px 6px #0d14330f;display:grid}
.menu-right{left:auto;right:0}
.menu button,.menu a{display:flex;align-items:center;gap:10px;border:0;background:none;text-align:left;padding:10px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--ink);text-decoration:none;cursor:pointer}
.menu button:hover,.menu a:hover,.menu button:focus-visible,.menu a:focus-visible{background:var(--soft);outline:none}
.menu small{margin-left:auto;font-size:11px;color:var(--green);font-weight:600}
.menu hr{border:0;height:1px;background:var(--line);margin:4px 6px}
#menu-pause{color:#a1261b}
.page-heading .store-label{display:none}
@media(max-width:700px){.merchant-app main>header.topbar{height:56px}.last-sync,.mode-tag,.crumb-sep,.workspace #breadcrumb-view{display:none}.store-button{max-width:160px}}
/* Distribution: counts before shares, quiet zero rows */
.friction-row{grid-template-columns:130px 1fr auto}
.friction-row strong{min-width:120px;font-weight:600}
.friction-row strong span{color:var(--ink-3);font-weight:500}
.friction-row.is-zero button,.friction-row.is-zero strong{color:var(--ink-4);font-weight:500}
.friction-row.is-zero .bar-track{opacity:.55}
/* What Hesio observed: insight -> evidence -> next test */
.observed-list{margin:0;display:grid}
.observed-list>div{display:grid;gap:6px;padding:14px 0;border-bottom:1px solid var(--line)}
.observed-list>div:first-child{padding-top:4px}
.observed-list dt{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.observed-list dd{margin:0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.observed-list dd>small,.product-line small{font-size:13px;color:var(--ink-3)}
.product-line{display:grid;gap:2px;min-width:0}
.product-line strong{font-size:15px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.friction-badge{background:#fff4e0;color:var(--amber-ink);font-weight:700;font-size:14px;padding:5px 12px;border-radius:100px}
.product-thumb{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#e2e8f5,#f1f4fb);display:grid;place-items:center;font-weight:700;color:var(--ink-3);flex-shrink:0}
.confidence{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:4px 10px;border-radius:100px;background:var(--soft);color:var(--ink-3)}
.confidence:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.confidence[data-level=high]{background:var(--tint);color:var(--blue-ink)}
.confidence[data-level=medium]{background:#fff4e0;color:var(--amber-ink)}
.next-test{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px;padding:16px 18px;background:var(--soft);border-radius:14px}
.next-test small,.opp-foot small{display:block;font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.next-test strong,.opp-foot strong{font-size:16px;font-weight:700}
.observed-empty{padding:18px 0}
/* Opportunities: confidence hierarchy */
.opportunity-card{display:block;padding:24px 26px}
.opportunity-card[data-level=low]{background:#fbfcfe;box-shadow:none}
.opportunity-card[data-level=low] h3{color:var(--ink-2)}
.opp-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.opp-index{font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:.04em;text-transform:uppercase}
.opportunity-card h3{margin:0 0 6px;font-size:20px}
.opp-lead{font-size:15px;color:var(--ink);margin:0}
.opp-note{font-size:13px;color:var(--ink-3);margin-top:2px}
.opportunity-stats{margin:12px 0 0}
.opp-evidence{margin-top:16px}
.opp-evidence h4{margin:0 0 6px;font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.opp-evidence ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.opp-evidence li{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--ink-2);padding:6px 0}
.opp-evidence li:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink-4);margin:8px -8px 0 0;flex-shrink:0}
.opp-evidence li small{margin-left:auto;color:var(--ink-4);font-size:12.5px;white-space:nowrap}
.opp-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.opp-foot em{display:block;font-style:normal;font-size:13px;color:var(--ink-3);margin-top:2px}
@media(max-width:700px){.opp-foot,.next-test{flex-direction:column;align-items:flex-start}.friction-row{grid-template-columns:92px 1fr}.friction-row strong{grid-column:1/-1;text-align:left;min-width:0}}
/* Sidebar: grouped product navigation + compact system state */
.merchant-app aside{padding:22px 14px 16px}
.merchant-app aside .logo{margin-bottom:22px}
.merchant-app aside nav{display:flex;flex-direction:column;gap:2px;margin-top:0}
.nav-group{margin:16px 12px 6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.merchant-app aside nav .nav-group:first-child{margin-top:0}
.merchant-app aside nav button{padding:8px 12px;border-radius:8px;font-size:14px;gap:11px}
.merchant-app aside nav button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink-4);flex-shrink:0}
.merchant-app aside nav button:hover svg{color:var(--ink-2)}
.merchant-app aside nav button.selected{background:#eef2ff;color:var(--blue-ink)}
.merchant-app aside nav button.selected svg{color:var(--blue)}
.nav-soon{cursor:default!important;color:var(--ink-4)!important;background:none!important}
.nav-soon em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:600;color:var(--ink-3);background:var(--soft);padding:2px 7px;border-radius:100px}
.nav-rule{border:0;height:1px;background:var(--line);margin:12px 8px}
.merchant-app .side-bottom.system{background:none;border-radius:0;padding:12px 12px 0;border-top:1px solid var(--line);display:grid;gap:7px}
.merchant-app .side-bottom.system .nav-group{margin:0 0 2px}
.sys-row{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink-2)}
.sys-row .dot{margin:0;width:7px;height:7px;box-shadow:none;background:var(--ink-4)}
.sys-row[data-tone=good] .dot{background:var(--green)}.sys-row[data-tone=wait] .dot{background:var(--blue)}.sys-row[data-tone=warn] .dot{background:var(--amber)}.sys-row[data-tone=bad] .dot{background:var(--coral)}.sys-row[data-tone=bad]{color:#a1261b}
.half{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--blue);background:linear-gradient(90deg,var(--blue) 50%,transparent 50%);flex-shrink:0;margin-left:-1px}
.merchant-app .side-bottom.system a{margin:4px 0 0;font-size:12.5px}
.merchant-app .side-bottom.system small{margin-top:2px;font-size:10px}
@media(max-width:700px){.nav-group,.nav-rule,.nav-soon,.merchant-app .side-bottom.system{display:none!important}.merchant-app aside .logo{margin-bottom:0}.merchant-app aside nav{flex-direction:row}.merchant-app aside nav button svg{width:16px;height:16px}}
/* Product media + links */
img.product-thumb{object-fit:cover;background:var(--soft)}
.product-thumb.small{width:28px;height:28px;border-radius:7px;font-size:12px}
.product-thumb.large{width:64px;height:64px;border-radius:14px;font-size:22px}
.product-link{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;min-width:0;border-radius:12px;padding:4px;margin:-4px}
a.product-link:hover{background:var(--soft)}
a.product-link:hover strong{color:var(--blue-ink)}
.product-link .ext{font-size:12px;color:var(--ink-4);font-weight:500}
.product-cell{display:flex;align-items:center;gap:10px}
.product-head{display:flex;align-items:center;gap:16px;margin-bottom:12px}
.product-head h2{margin:0 0 4px}
.view-link{font-size:13px;font-weight:600;text-decoration:none}
/* Storefront preview */
#preview-dialog{width:min(1100px,96vw)}
.pv-canvas,.pv-meta{contain:layout paint}
.pv-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.pv-label{font-size:13px;font-weight:600;color:var(--ink-3)}
.seg{display:inline-flex;background:var(--soft);border-radius:10px;padding:3px}
.seg button{border:0;background:none;padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--ink-3)}
.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 3px #0d14331a}
.pv-canvas{background:var(--soft);border-radius:18px;padding:22px;display:flex;justify-content:center}
.pv-frame{position:relative;width:100%;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px -16px #0d143340}
.pv-canvas[data-device=mobile] .pv-frame{width:360px;border-radius:28px;border:8px solid #0d1433;min-height:640px}
.sf-nav{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid #eef0f4;font-size:13px}
.sf-nav span{width:44px;height:6px;border-radius:4px;background:#e8ebf2}.sf-nav i{margin-left:auto;width:18px;height:18px;border-radius:50%;background:#e8ebf2}
.sf-nav b{margin-right:10px}
.sf-product{display:grid;grid-template-columns:1.05fr 1fr;gap:28px;padding:22px}
.sf-hero{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,#eef1f7,#e3e8f2);display:grid;place-items:center;overflow:hidden;color:var(--ink-4);font-size:12px}
.sf-hero img{width:100%;height:100%;object-fit:cover}
.sf-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:8px}.sf-thumbs i{aspect-ratio:1;border-radius:6px;background:#eef1f7}
.sf-info small{font-size:11px;color:var(--ink-4)}
.sf-info h3{margin:6px 0 10px;font-size:20px}
.sk{display:block;height:9px;border-radius:5px;background:#e8ebf2}
.sf-price .sk{height:14px}
.sf-variants{display:flex;gap:8px;margin:16px 0}.sf-variants i{width:44px;height:28px;border-radius:6px;border:1px solid #dfe3eb}.sf-variants i.on{border:2px solid var(--ink)}
.sf-atc{background:#0d1433;color:#fff;text-align:center;border-radius:8px;padding:12px;font-size:13px;font-weight:600}
.sf-slot{position:relative;margin:16px 0;padding:10px;border:1.5px dashed #3d63ff80;border-radius:12px;background:#f5f7ff}
.slot-tag{position:absolute;top:-10px;left:12px;background:var(--blue);color:#fff;font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:100px;letter-spacing:.02em}
.sf-lines{display:grid;gap:8px;margin-top:16px}
.sf-reviews{display:flex;align-items:center;gap:10px;margin-top:16px;font-size:12px;color:#f5a524}.sf-reviews .sk{flex:1}
.hx-card{background:#fff;border-radius:10px;padding:14px 16px;box-shadow:0 4px 14px -6px #0d143326}
.hx-brand{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand-color)}
.hx-card h4{margin:4px 0 4px;font-size:15px}
.hx-card p{font-size:12.5px;line-height:1.5;margin:0}
.hx-missing{color:var(--warn)!important}
.hx-thumbs{display:flex;gap:6px;margin-top:10px}
.hx-thumb{width:36px;height:36px;border-radius:8px;background:#eef1f7;display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--ink-3);object-fit:cover}
.hx-cta{margin-top:12px;background:var(--brand-color);color:#fff;border:0;border-radius:8px;padding:9px 14px;font-size:12.5px;font-weight:600;cursor:default}
.sf-overlay{position:absolute;inset:0;background:#0d143366;display:grid;place-items:center;padding:24px}
.cmp{background:#fff;border-radius:16px;padding:20px;width:min(640px,100%);max-height:100%;overflow:auto;box-shadow:0 30px 60px -20px #0d143366}
.cmp-head{display:flex;justify-content:space-between;gap:12px}.cmp-head h4{margin:0;font-size:17px}.cmp-head p{font-size:12.5px;margin:2px 0 0}
.cmp-x{width:28px;height:28px;border-radius:50%;background:var(--soft);display:grid;place-items:center;font-size:11px;flex-shrink:0}
.cmp-hint{font-size:12.5px;background:#f5f7ff;color:var(--blue-ink);border-radius:8px;padding:8px 12px;margin:12px 0}
.cmp-grid{display:grid;grid-template-columns:90px repeat(var(--cols),1fr);gap:0 12px;align-items:center}
.cmp-grid>div{padding:9px 0;border-bottom:1px solid #eef0f4}
.cmp-label{font-size:11.5px;font-weight:600;color:var(--ink-3)}
.cmp-prod{display:grid;gap:6px;font-size:12.5px}
.cmp-img{width:100%;aspect-ratio:1;max-width:84px;border-radius:8px;background:#eef1f7;display:grid;place-items:center;font-weight:700;color:var(--ink-3);object-fit:cover}
.cmp-cta{display:block;text-align:center;background:var(--brand-color);color:#fff;border-radius:7px;padding:7px 6px;font-size:12px;font-weight:600;text-decoration:none}
.cmp-note{font-size:11.5px;color:var(--ink-3);margin-top:10px}
.cmp-empty h4{margin:0 0 6px}
.pv-canvas[data-device=mobile] .sf-product{grid-template-columns:1fr;gap:14px;padding:14px}
.pv-canvas[data-device=mobile] .sf-nav span{display:none}
.pv-canvas[data-device=mobile] .sf-overlay{padding:0;place-items:stretch}
.pv-canvas[data-device=mobile] .cmp{width:100%;border-radius:0;max-height:none}
.pv-canvas[data-device=mobile] .cmp-grid{grid-template-columns:70px repeat(var(--cols),1fr);gap:0 6px}
.pv-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:16px 0 4px}
.pv-meta div{background:var(--soft);border-radius:12px;padding:12px 14px}
.pv-meta dt{font-size:11.5px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.pv-meta dd{margin:4px 0 0;font-size:13px;color:var(--ink)}
@media(max-width:900px){.pv-meta{grid-template-columns:1fr 1fr}.sf-product{grid-template-columns:1fr}.pv-canvas{padding:10px}}
/* Compact observation status outside Overview */
#workspace:not([data-view=overview]) .observation-banner{background:none;padding:0;margin:-6px 0 10px;border-radius:0;gap:10px}
#workspace:not([data-view=overview]) .observation-banner .shield,#workspace:not([data-view=overview]) .observation-banner p{display:none}
#workspace:not([data-view=overview]) .observation-banner strong{font-size:13px;font-weight:600;display:flex;align-items:center;gap:8px}
#workspace:not([data-view=overview]) .observation-banner strong:before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--blue);background:linear-gradient(90deg,var(--blue) 50%,transparent 50%)}
#workspace:not([data-view=overview]) .observation-banner strong:after{content:"· No storefront changes";font-weight:400;color:var(--ink-3)}
#workspace:not([data-view=overview]) .observation-pill{box-shadow:none;background:var(--soft);padding:5px 12px;font-size:12px}
/* Friction insights: tabs with confidence, interpretation layer */
.insight-tabs{display:flex;gap:8px;flex-wrap:wrap}
.insight-tab{display:grid;gap:1px;text-align:left;border:0;background:var(--panel);box-shadow:var(--shadow);border-radius:12px;padding:9px 16px;min-width:130px}
.insight-tab span{font-size:14px;font-weight:600;color:var(--ink)}
.insight-tab small{font-size:11.5px;color:var(--ink-3)}
.insight-tab.is-zero span,.insight-tab.is-zero small{color:var(--ink-4)}
.insight-tab:hover{box-shadow:0 0 0 2px #3d63ff33}
.insight-tab.selected{background:var(--blue);box-shadow:none}
.insight-tab.selected span,.insight-tab.selected small{color:#fff}
.insight-tab.selected small{opacity:.8}
.insight-summary{margin:12px 0 14px;font-size:14px;color:var(--ink-2)}
.kpi-muted{font-size:20px!important;letter-spacing:-.01em!important;color:var(--ink-3)!important;padding:10px 0 6px}
.confidence-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--soft);border-radius:12px;padding:12px 16px;margin-bottom:6px}
.confidence-summary small{display:block;font-size:12px;color:var(--ink-3);font-weight:600}
.confidence-summary strong{font-size:16px}
.evidence-title{margin:14px 0 0;font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.signal-list li>span small{display:block;font-size:12px;color:var(--ink-4);margin-top:2px}
.meaning{font-size:15px;color:var(--ink);line-height:1.6}
.meaning-card .next-test{margin-top:18px}
.low-sample{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:var(--amber-ink);background:#fff4e0;padding:2px 8px;border-radius:100px;cursor:help}
.muted-zero{color:var(--ink-4)}
td .confidence{padding:2px 9px;font-size:11.5px}
.pv-canvas[data-device=mobile] .cmp-cta{font-size:11px;white-space:nowrap;padding:6px 2px}.cmp-grid{align-items:end}
/* Tables: flat inside cards, calm header, aligned numbers */
.merchant-app th{font-size:12px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-3)}
.merchant-app th.num,.merchant-app td.num{text-align:right}
.merchant-app td.num{font-variant-numeric:tabular-nums}
.merchant-app td,.merchant-app th{padding-left:20px;padding-right:20px}
.merchant-card .table-wrap{margin:18px 0 0;background:none;box-shadow:none;border-radius:0;overflow-x:auto}
.merchant-card .table-wrap th{background:none;padding-top:0;padding-bottom:12px;border-bottom:1px solid var(--line)}
.merchant-card .table-wrap td{padding-top:14px;padding-bottom:14px;border-top:0;border-bottom:1px solid #eef1f6}
.merchant-card .table-wrap tbody tr:last-child td{border-bottom:0}
.merchant-card .table-wrap th:first-child,.merchant-card .table-wrap td:first-child{padding-left:0}
.merchant-card .table-wrap th:last-child,.merchant-card .table-wrap td:last-child{padding-right:0}
.merchant-card .table-wrap tr[data-product]:hover{background:none}
.merchant-card .table-wrap tr[data-product]:hover .product-cell{color:var(--blue-ink)}
.merchant-card .table-wrap td:first-child{min-width:240px}
/* Products: filters, prioritised table, product insight */
#workspace:not([data-view=overview]) #development-banner{margin-top:-4px}
.product-filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.product-filters input[type=search]{flex:1 1 240px;max-width:320px;padding:10px 14px}
.product-filters select{padding:10px 12px;font-size:13.5px}
.sort-label{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-3)}
.product-table .product-line strong{font-size:14px;font-weight:600}
.product-table .product-line small{font-size:12px;color:var(--ink-4)}
.merchant-app .table-wrap:not(.merchant-card .table-wrap) td:first-child,.merchant-app .table-wrap:not(.merchant-card .table-wrap) th:first-child{padding-left:24px}
.merchant-app .table-wrap:not(.merchant-card .table-wrap) td:last-child,.merchant-app .table-wrap:not(.merchant-card .table-wrap) th:last-child{padding-right:24px}
.primary-friction{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.status-pill{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:100px;background:var(--soft);color:var(--ink-3)}
.status-pill[data-status=investigate]{background:var(--tint);color:var(--blue-ink)}
.status-pill[data-status=insufficient]{background:transparent;color:var(--ink-4);padding-left:0}
.rate-dim{opacity:.55}
tr.is-selected td{background:#f5f7ff}
.product-insight{margin-bottom:18px}
.pi-head{display:flex;align-items:center;gap:16px}
.pi-title{flex:1;min-width:0}
.pi-title small{font-size:12px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.pi-title h2{margin:2px 0 2px;font-size:22px}
.pi-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}
.pi-stats div{background:var(--soft);border-radius:12px;padding:12px 16px}
.pi-stats strong{display:block;font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pi-stats small{font-size:12.5px;color:var(--ink-3)}
.pi-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:start}
.pi-primary{display:flex;align-items:center;gap:10px;margin:8px 0 4px}
.pi-other{font-size:13px;color:var(--ink-3);margin-top:12px}
.link-button{border:0;background:none;padding:0;color:var(--blue);font-weight:600;font-size:13px}
.link-button:hover{text-decoration:underline}
.pi-test{margin-top:30px;flex-direction:column;align-items:flex-start}
.pi-test em{display:block;font-style:normal;font-size:12.5px;color:var(--amber-ink);margin-top:3px}
@media(max-width:900px){.pi-stats{grid-template-columns:1fr 1fr}.pi-grid{grid-template-columns:1fr}.sort-label{margin-left:0}}
/* Weekly report: executive summary, classification, next steps */
.report-intro h2{font-size:clamp(22px,2.4vw,30px)}
.report-intro .intro-sub{font-size:16px;color:#e3e8ff;margin:0 0 12px}
.kpi-extra{margin-top:4px;color:var(--ink-4)!important;font-size:11.5px!important}
.stack-bar{display:flex;height:14px;border-radius:100px;overflow:hidden;background:var(--soft);margin:6px 0 16px;gap:2px}
.stack-bar i[data-part=friction],.stack-legend li[data-part=friction]:before{background:var(--amber)}
.stack-bar i[data-part=clear],.stack-legend li[data-part=clear]:before{background:#9fb3ff}
.stack-bar i[data-part=unclassified],.stack-legend li[data-part=unclassified]:before{background:#d7dce7}
.stack-legend{list-style:none;margin:0;padding:0;display:grid;gap:0}
.stack-legend li{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.stack-legend li:before{content:"";width:9px;height:9px;border-radius:3px;align-self:center}
.stack-legend strong{font-variant-numeric:tabular-nums;color:var(--ink)}
.stack-legend small{min-width:90px;text-align:right;color:var(--ink-4);font-size:12.5px}
.baseline-sub{font-size:13px;color:var(--ink-3);margin:-8px 0 4px}
.next-steps{margin:16px 0}
.steps{list-style:none;margin:6px 0 0;padding:0;display:grid}
.steps li{display:grid;grid-template-columns:44px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line)}
.steps li:last-child{border-bottom:0;padding-bottom:0}
.step-n{width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--blue-ink);display:grid;place-items:center;font-weight:700;font-size:13px}
.step-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.step-top h3{margin:0;font-size:16px}
.step-body p{font-size:14px;margin-top:4px}
.watch-row{padding:10px 0;border-bottom:1px solid var(--line)}
.watch-row:last-child{border-bottom:0}
.method-note{margin:20px 0 0;padding:16px 20px;border-radius:14px;background:var(--soft)}
.method-note h4{margin:0 0 4px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
.method-note p{font-size:13px}
.print-brand{display:flex;align-items:center;gap:10px;font-size:14px}
.print-brand img{border-radius:7px}.print-brand b{font-size:18px}.print-brand span{color:var(--ink-3)}
@media(max-width:700px){.steps li{grid-template-columns:36px 1fr}.steps li>button{grid-column:2;justify-self:start}}
@media print{#workspace[data-view=report] .merchant-footnote{display:none}.report-print-only{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--line)}.report-intro{padding:18px 0!important;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important}.report-intro .intro-sub{color:var(--ink-2)}.next-steps button,.steps button,.report-actions{display:none!important}.steps li{grid-template-columns:40px 1fr}.stack-bar{-webkit-print-color-adjust:exact;print-color-adjust:exact}.merchant-card,.method-note{break-inside:avoid}@page{margin:14mm}}
@media print{html,body,.merchant-app,.merchant-app main,#workspace{background:#fff!important;min-height:0!important}}
/* Settings V2 */
#workspace[data-view=settings] .section-heading{display:none}
.settings-shell{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:start}
.settings-shell.has-preview{grid-template-columns:200px minmax(0,1fr) minmax(340px,440px)}
.settings-nav{position:sticky;top:16px;display:grid;gap:2px}
.settings-nav .nav-group{margin:0 12px 8px}
.settings-nav button{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:500;color:var(--ink-2)}
.settings-nav button:hover{background:var(--panel)}
.settings-nav button.selected{background:var(--panel);color:var(--blue-ink);font-weight:600;box-shadow:var(--shadow)}
.settings-main{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:26px 28px 0;min-width:0}
.settings-title{font-size:22px;margin:0 0 6px}
.set-group{padding:20px 0;border-bottom:1px solid var(--line)}
.set-group:last-of-type{border-bottom:0}
.set-group h3{margin:0 0 12px;font-size:15px}
.set-note{font-size:13px;color:var(--ink-3);margin:-6px 0 12px}
.sf-field{display:grid;gap:6px;margin:0 0 14px}
.sf-field>span{font-size:13px;font-weight:600;color:var(--ink-2)}
.sf-field small{font-size:12px;color:var(--ink-3);font-weight:400}
.sf-field input:not([type]),.sf-field select,.set-group textarea{width:100%;max-width:520px}
.set-group textarea{min-height:84px;resize:vertical}
.set-dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.set-dl div{background:var(--soft);border-radius:12px;padding:12px 14px}
.set-dl dt{font-size:12px;color:var(--ink-3);font-weight:600}
.set-dl dd{margin:3px 0 0;font-size:14px;font-weight:600;color:var(--ink)}
.toggle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:10px 0;cursor:pointer}
.toggle-row span{display:grid;gap:2px}.toggle-row b{font-size:14px;font-weight:600;color:var(--ink)}.toggle-row small{font-size:12.5px;color:var(--ink-3)}
.toggle-row input{appearance:none;width:38px;height:22px;border-radius:100px;background:var(--line-2);position:relative;flex-shrink:0;cursor:pointer;transition:background .15s;border:0;padding:0}
.toggle-row input:before{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0003;transition:transform .15s}
.toggle-row input:checked{background:var(--blue)}.toggle-row input:checked:before{transform:translateX(16px)}
.toggle-row.is-disabled{cursor:default;opacity:.75}.toggle-row input:disabled{cursor:default}
.radio-row{display:flex;flex-wrap:wrap;gap:6px}
.radio-chip{display:inline-flex;align-items:center;padding:8px 13px;border-radius:9px;background:var(--soft);font-size:13px;font-weight:500;color:var(--ink-2);cursor:pointer}
.radio-chip input{position:absolute;opacity:0;pointer-events:none}
.radio-chip.on{background:var(--tint);color:var(--blue-ink);font-weight:600;box-shadow:inset 0 0 0 1.5px #3d63ff66}
.radio-chip:focus-within{outline:3px solid #3d63ff66}
.range-row{display:flex;align-items:center;gap:12px;max-width:420px}
.range-row input{flex:1;accent-color:var(--blue);padding:0;border:0}
.range-row output{min-width:64px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.color-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 16px}
.color-input{display:flex;align-items:center;gap:8px}
.color-input input[type=color]{width:38px;height:38px;padding:3px;border-radius:9px;cursor:pointer}
.color-input input[data-hex]{width:100px;font-family:ui-monospace,Menlo,monospace;font-size:13px;padding:9px 10px}
.preset-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.preset{border:0;background:var(--soft);border-radius:12px;padding:14px;text-align:left;display:grid;gap:2px}
.preset b{font-size:14px}.preset small{font-size:12px;color:var(--ink-3)}
.preset.on{background:var(--tint);box-shadow:inset 0 0 0 1.5px var(--blue)}.preset.on b{color:var(--blue-ink)}
.a11y{border-radius:12px;padding:14px 16px;background:var(--green-bg)}
.a11y.warn{background:#fff4e0}
.a11y b{font-size:14px}.a11y.ok b{color:#11703a}.a11y.warn b{color:var(--amber-ink)}
.a11y ul{list-style:none;margin:8px 0;padding:0;display:grid;gap:4px}
.a11y li{display:flex;justify-content:space-between;font-size:13px}.a11y li.bad span{color:var(--amber-ink);font-weight:600}
.a11y small{font-size:12px;color:var(--ink-3)}
.stage-list{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px}
.stage-list li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;padding:10px 14px;border-radius:12px;background:var(--soft)}
.stage-list li.current{background:var(--tint)}.stage-list li.current>span{color:var(--blue)}
.stage-list li.locked{opacity:.6}
.stage-list b{font-size:14px;display:block}.stage-list small{font-size:12.5px;color:var(--ink-3)}
.stage-list em{font-style:normal;font-size:11.5px;font-weight:600;color:var(--ink-3)}
.check-list{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:6px}
.check-list li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2)}
.check-list li span{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--line);font-size:11px;color:var(--ink-3)}
.check-list li.ok span{background:var(--green);color:#fff}
.split-bar{display:flex;gap:3px;border-radius:10px;overflow:hidden;font-size:12px;font-weight:600}
.split-bar span{padding:9px 12px;background:var(--soft);color:var(--ink-3);white-space:nowrap}
.split-bar span+span{background:var(--tint);color:var(--blue-ink)}
.type-tabs{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 10px;border-bottom:1px solid var(--line)}
.type-tabs button{border:0;background:var(--soft);border-radius:9px;padding:8px 13px;font-size:13px;font-weight:600;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.type-tabs button.on{background:var(--ink);color:#fff}
.dotc{width:7px;height:7px;border-radius:50%;background:var(--ink-4)}.dotc.on{background:var(--green)}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px 16px}
.check-grid label{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:400;color:var(--ink)}
.check-grid label.is-disabled{color:var(--ink-4)}.check-grid label small{margin-left:auto;font-size:11.5px;color:var(--amber-ink)}
.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.priority-list{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;max-width:420px}
.priority-list li{display:flex;align-items:center;gap:12px;padding:8px 10px;border-radius:12px;background:var(--soft);font-size:14px;font-weight:600}
.priority-list .step-n{width:28px;height:28px;font-size:12px}
.prio-move{margin-left:auto;display:flex;gap:2px}.prio-move .icon-button{width:30px;height:30px;font-size:14px}
.save-bar{position:sticky;bottom:0;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:0 -28px;padding:14px 28px;background:#fffffff2;border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg)}
.save-bar #dirty-note{margin-right:auto;font-size:13px;color:var(--ink-3)}
.save-bar.dirty #dirty-note{color:var(--amber-ink);font-weight:600}
.settings-preview{position:sticky;top:16px;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px}
.sp-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.sp-head h3{margin:0;font-size:15px}
.sp-controls{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.sp-controls .seg button{padding:6px 10px;font-size:12px}
.sp-canvas{padding:14px}
.sp-canvas .sf-product{grid-template-columns:1fr;gap:12px;padding:14px}
.sp-canvas .sf-hero{aspect-ratio:16/10}
.sp-canvas[data-device=mobile] .pv-frame{width:300px;min-height:0;border-width:6px}
.pv-off{padding:14px;border-radius:10px;background:var(--soft);color:var(--ink-3);font-size:12.5px;text-align:center}
.sf-sticky{position:sticky;bottom:0;padding:10px;background:#fffffff0;border-top:1px solid #eef0f4}
.sf-cart{padding:14px;display:grid;gap:12px}
.sf-cart-head{display:flex;justify-content:space-between;font-size:14px}
.sf-line{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:center}.sf-line i{aspect-ratio:1;border-radius:8px;background:#eef1f7}.sf-line div{display:grid;gap:6px}
.sf-total{display:flex;justify-content:space-between;gap:30px}.sf-total .sk{height:12px}
/* Assistance card driven by design tokens */
.hx-card.v2{position:relative;container-type:inline-size;min-width:0;max-width:100%;overflow:hidden;background:radial-gradient(circle at 95% 0%,color-mix(in srgb,var(--hx-accent) 7%,transparent),transparent 52%),var(--hx-bg);color:var(--hx-text);border-radius:var(--hx-radius);padding:26px;box-shadow:none;font-family:var(--sans)}
.hx-card.v2[data-type=inherit]{font-family:inherit}
.hx-card.v2[data-border=subtle]{box-shadow:inset 0 0 0 1px var(--hx-border)}
.hx-card.v2[data-border=strong]{box-shadow:inset 0 0 0 2px var(--hx-border)}
.hx-card.v2[data-shadow=soft]{filter:drop-shadow(0 6px 14px #0d14331f)}
.hx-card.v2[data-shadow=floating]{filter:drop-shadow(0 16px 30px #0d143333)}
.hx-card.v2[data-density=compact]{padding:18px}.hx-card.v2[data-density=spacious]{padding:30px}
.hx-card.v2 .hx-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}
.hx-card.v2 .hx-eyebrow{font-size:10px;font-weight:750;letter-spacing:.13em;line-height:1.35;text-transform:uppercase;color:var(--hx-accent);display:flex;align-items:center;gap:8px}
.hx-card.v2 .hx-close{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:50%;background:color-mix(in srgb,var(--hx-text) 5%,transparent);color:var(--hx-muted);font-size:19px;line-height:1}
.hx-label{font-size:10px;letter-spacing:.02em;text-transform:none;background:var(--hx-accent);color:var(--hx-on-accent);padding:2px 7px;border-radius:100px}
.hx-card.v2 h4{margin:0 0 8px;font-size:23px;font-weight:700;letter-spacing:-.035em;line-height:1.18;color:var(--hx-text)}
.hx-card.v2 p{font-size:14px;line-height:1.55;margin:0;color:var(--hx-muted)}
.hx-card.v2 .hx-verified{margin-top:6px;color:var(--hx-text)}
.hx-shows{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11.5px;color:var(--hx-muted)}
.hx-shows li:before{content:"✓ ";color:var(--hx-accent)}
.hx-products{min-width:0;max-width:100%;margin-top:20px;padding:0;background:transparent}.hx-products>p{margin:0 0 8px!important;color:var(--hx-muted);font-size:11px!important;font-weight:650}.hx-product-list{display:grid;min-width:0;grid-template-columns:minmax(0,1fr)}.hx-product-item{display:grid;grid-template-columns:44px minmax(0,1fr) auto 18px;align-items:center;min-height:60px;min-width:0;gap:10px;padding:8px 0}.hx-product-item+.hx-product-item{border-top:1px solid color-mix(in srgb,var(--hx-text) 10%,transparent)}.hx-product-image{width:44px!important;height:48px!important;object-fit:contain;padding:2px;border-radius:6px;background:color-mix(in srgb,var(--hx-text) 3%,var(--hx-bg))}.hx-product-copy{min-width:0}.hx-product-item strong{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow-wrap:anywhere;color:var(--hx-text);font-size:12px;font-weight:650;line-height:1.35}.hx-product-price{color:var(--hx-muted);font-size:12px;white-space:nowrap}.hx-product-selected{display:grid;place-items:center;width:16px;height:16px;border-radius:50%;background:var(--hx-accent);color:#fff;font-size:10px;font-weight:700;line-height:1}.hx-card.v2 .hx-selection-count{margin:12px 0 0;color:var(--hx-muted);font-size:11px;font-weight:600}
@container (max-width:350px){.hx-product-item{grid-template-columns:44px minmax(0,1fr) 18px}.hx-product-price{grid-column:2;grid-row:2;margin-top:-12px}.hx-product-selected{grid-column:3;grid-row:1/3}}
.hx-card.v2 .hx-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:8px;min-height:42px;background:var(--hx-accent);color:var(--hx-on-accent);border:1px solid var(--hx-accent);border-radius:var(--hx-btn-radius);padding:9px 14px;font-size:13px;font-weight:600;font-family:inherit;text-align:left}.hx-card.v2 .hx-cta span:last-child{font-size:19px;font-weight:400;line-height:1}
.hx-card.v2[data-weight=medium] .hx-cta{font-weight:500}
.hx-card.v2[data-size=compact] .hx-cta{padding:6px 11px;font-size:12px}.hx-card.v2[data-size=large] .hx-cta{padding:12px 18px;font-size:13.5px;width:100%}
.hx-card.v2[data-btn=outline] .hx-cta{background:transparent;color:var(--hx-accent);box-shadow:inset 0 0 0 1.5px var(--hx-accent)}
.hx-card.v2[data-btn=text] .hx-cta{background:transparent;color:var(--hx-accent);padding-left:0;padding-right:0;text-decoration:underline;text-underline-offset:3px}
.play .hx-card.v2[data-anim=fade]{animation:hxfade var(--hx-ms) ease-out both}
.play .hx-card.v2[data-anim=slide]{animation:hxslide var(--hx-ms) ease-out both}
.play .hx-card.v2[data-anim=expand]{animation:hxexpand var(--hx-ms) ease-out both}
@keyframes hxfade{from{opacity:0}}@keyframes hxslide{from{opacity:0;transform:translateY(8px)}}@keyframes hxexpand{from{opacity:0;transform:scale(.97)}}
@media(max-width:800px){.settings-shell,.settings-shell.has-preview{grid-template-columns:1fr}.settings-nav{position:static;display:flex;overflow-x:auto;gap:4px}.settings-nav .nav-group{display:none}.settings-nav button{flex-shrink:0}.settings-main{padding:18px 18px 0}.save-bar{margin:0 -18px;padding:12px 18px}.preset-grid{grid-template-columns:1fr 1fr}.set-dl,.rule-grid{grid-template-columns:1fr}}
/* Settings: preview column fills the remaining width */
.settings-shell.has-preview{grid-template-columns:180px minmax(0,1.1fr) minmax(360px,1fr)}
.settings-preview{min-width:0}
.sp-head{gap:12px}.sp-head h3{white-space:nowrap}.sp-head .link-button{white-space:nowrap}
.sp-controls{align-items:center}
.sp-controls .seg{flex-wrap:wrap}
.sp-controls .seg button{white-space:nowrap}
.settings-preview .sf-nav b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.settings-preview .sp-canvas[data-device=desktop] .sf-product{grid-template-columns:1fr 1fr;gap:16px}
.settings-preview .sp-canvas[data-device=desktop] .sf-hero{aspect-ratio:1}
@media(max-width:1280px){.settings-shell.has-preview{grid-template-columns:170px minmax(0,1fr) minmax(320px,.9fr)}.settings-preview .sp-canvas[data-device=desktop] .sf-product{grid-template-columns:1fr}}
@media(max-width:1100px){.settings-shell.has-preview{grid-template-columns:170px minmax(0,1fr)}.settings-shell.has-preview .settings-preview{grid-column:1/-1;position:static}}
#content{overflow-anchor:none}
/* Settings preview: sticky, viewport-tall panel; storefront rendered at natural size and zoomed to fit */
.settings-preview{position:sticky;top:16px;display:flex;flex-direction:column}
.settings-preview .sp-canvas{flex:none;min-height:320px;display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.settings-preview .sp-canvas[data-zoom=full]{overflow:auto;justify-content:flex-start}
.settings-preview .sp-canvas .pv-frame{flex:0 0 auto}
.settings-preview .sp-canvas[data-device=desktop] .pv-frame{width:860px}
.settings-preview .sp-canvas[data-device=mobile] .pv-frame{width:390px;border-width:8px;border-radius:32px}
.settings-preview .sp-canvas[data-device=desktop] .sf-product{grid-template-columns:1.05fr 1fr!important;gap:28px;padding:24px}
.settings-preview .sp-canvas[data-device=desktop] .sf-hero{aspect-ratio:1}
.settings-preview .sp-canvas[data-device=mobile] .sf-product{grid-template-columns:1fr!important;padding:14px}
.settings-preview>.metric-note{margin-top:10px}
@media(max-width:1100px){.settings-preview{position:static;max-height:none}.settings-preview .sp-canvas{height:680px;flex:none}}
/* Wider preview column, compact desktop mock, full-screen expand */
.settings-shell.has-preview{grid-template-columns:180px minmax(0,1fr) minmax(0,1.15fr)}
.settings-preview .sp-canvas[data-device=desktop] .pv-frame{width:760px}
.settings-preview .sp-canvas{min-height:260px}
.sp-actions{display:flex;align-items:center;gap:12px}
.sp-expand{padding:6px 12px;font-size:12.5px}
.settings-preview.expanded{position:fixed;inset:24px;z-index:60;max-height:none;box-shadow:0 30px 80px #0a103066;padding:20px 24px;overscroll-behavior:contain;overflow:auto}
#sp-backdrop{position:fixed;inset:0;z-index:59;background:#0a10308c}
.settings-preview.expanded .sp-canvas[data-device=desktop] .pv-frame{width:1100px}
@media(max-width:1280px){.settings-shell.has-preview{grid-template-columns:160px minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:1280px){.settings-shell.has-preview{grid-template-columns:160px minmax(0,1fr)}.settings-shell.has-preview .settings-preview{grid-column:1/-1;position:static}}
@media(max-width:800px){.settings-shell.has-preview{grid-template-columns:minmax(0,1fr)}.settings-shell.has-preview .settings-preview{grid-column:1}}

.sp-canvas[data-zoom=full]{overscroll-behavior:contain}

/* Toasts */
#toasts{position:fixed;right:24px;bottom:24px;z-index:1000;display:grid;gap:10px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;position:relative;overflow:hidden;display:grid;grid-template-columns:32px 1fr 28px;gap:12px;align-items:start;background:#fff;color:var(--ink);border-radius:14px;padding:14px 12px 14px 14px;box-shadow:0 18px 40px -14px #0d143340,0 0 0 1px #0d14330f;animation:toast-in .22s cubic-bezier(.2,.7,.2,1)}
.toast.leaving{animation:toast-out .18s ease-in forwards}
.toast-icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--tint);color:var(--blue)}
.toast-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.toast[data-tone=error] .toast-icon{background:#fdeceb;color:#c7362b}
.toast[data-tone=success] .toast-icon{background:var(--green-bg);color:var(--green)}
.toast-body{min-width:0;padding-top:1px}
.toast-body b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.toast-body p{margin:2px 0 0;font-size:13px;line-height:1.45;color:var(--ink-3)}
.toast-close{width:28px;height:28px;border:0;border-radius:8px;background:none;color:var(--ink-4);font-size:12px;display:grid;place-items:center}
.toast-close:hover{background:var(--soft);color:var(--ink)}
.toast-timer{position:absolute;left:0;bottom:0;height:2px;width:100%;background:currentColor;opacity:.18;transform-origin:left;animation:toast-timer linear forwards}
.toast[data-tone=error] .toast-timer{color:#c7362b}.toast[data-tone=success] .toast-timer{color:var(--green)}.toast[data-tone=info] .toast-timer{color:var(--blue)}
.toast.paused .toast-timer{animation-play-state:paused}
@keyframes toast-in{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes toast-out{to{opacity:0;transform:translateY(6px)}}
@keyframes toast-timer{to{transform:scaleX(0)}}
@media(max-width:700px){#toasts{right:16px;left:16px;bottom:16px;width:auto}}

/* Expanded preview: header with Close stays put while the panel scrolls */
.settings-preview.expanded .sp-head{position:sticky;top:-20px;z-index:5;background:var(--panel);margin:-20px -24px 10px;padding:18px 24px 10px}
/* Controls inside Hesio layouts */
.product-filters input[type=search],.product-filters select{padding-top:9px;padding-bottom:9px;font-size:14px}
.product-filters select{min-width:150px}
.color-input input[data-hex]{width:104px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;text-transform:uppercase}
.range-row input{flex:1;border:0}
.store-label select{min-width:230px}
.install-row input#shop{border:0!important;box-shadow:none!important;background-color:transparent!important;min-height:0}
/* Products table v2: one baseline per row, context stacked underneath */
.product-table{table-layout:auto}
.product-table th{background:none;padding-top:16px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.product-table td{padding-top:14px;padding-bottom:14px;vertical-align:middle}
.product-table tbody tr+tr td{border-top:1px solid #eef1f6}
.product-table th:nth-child(2),.product-table td:nth-child(2),.product-table th:nth-child(3),.product-table td:nth-child(3),.product-table th:nth-child(4),.product-table td:nth-child(4){width:1%;white-space:nowrap;padding-left:28px}
.product-table th:nth-child(5),.product-table td:nth-child(5){width:1%;white-space:nowrap;padding-left:36px}
.product-table th:nth-child(6),.product-table td:nth-child(6){width:18%;padding-left:36px}
.product-table .product-thumb.small{width:36px;height:36px;border-radius:9px;font-size:13px}
.product-table .product-cell{gap:12px}
.product-table td.num{font-size:14px;color:var(--ink)}
.cell-stack{display:inline-grid;gap:1px;line-height:1.3}
td.num .cell-stack{justify-items:end}
.cell-stack small{font-size:11.5px;font-weight:500}
.low-note{color:var(--amber-ink);cursor:help}
.status-text{color:var(--ink-3)}
.status-text[data-status=investigate]{color:var(--blue-ink);font-weight:600}
.status-text[data-status=insufficient]{color:var(--ink-4)}
.status-text:before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}
.hc{color:var(--blue-ink);font-weight:600}
.product-table tr[data-product]:hover td{background:#f8faff}
.product-table tr.is-selected td{background:#f3f6ff}
.check-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.rule-grid>*{min-width:0}.rule-grid select,.sf-field select{width:100%}
.store-design{margin-bottom:24px}.store-design-image{display:block;width:100%;max-height:400px;object-fit:cover;object-position:top;border:1px solid #e8eaf0;border-radius:12px}.store-design .section-heading{flex-wrap:wrap}.actual-store-preview{position:relative;min-height:500px}.actual-store-preview>img{width:100%;display:block}.actual-store-card{position:absolute;right:20px;bottom:20px;width:320px;max-width:85%}
.store-design .section-heading{display:flex!important;align-items:center;justify-content:space-between;gap:16px}
.embedded-app #logout-button{display:none!important}#logout-button{width:100%;margin:12px 0}

.actual-theme-capture>img{display:block;width:100%;height:auto}.assistance-design-preview{padding:16px;background:#f5f6fb;border-radius:12px;margin-top:12px}.assistance-design-preview>h4{margin:0 0 12px;color:#727b99;font-size:12px}.settings-preview.expanded .assistance-design-preview{max-width:600px;margin:12px auto}.actual-theme-capture{border:0!important;border-radius:12px!important}
/* ===== Landing v3 (Nord-style product storytelling) ===== */
.built-on{margin-top:18px;font-size:12.5px;color:var(--ink-3)}
.built-on:before{content:"";display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border-radius:4px;background:#95bf47}
.hero-visual{padding:10px 0 56px}
.mt-store{display:flex;align-items:center;gap:8px;font-weight:600}
.mt-store i{width:22px;height:22px;border-radius:6px;background:#1f3a2e;color:#fff;display:grid;place-items:center;font-style:normal;font-size:11px}
.mt-status{display:flex;align-items:center;gap:6px;background:var(--soft);border-radius:100px;padding:4px 5px 4px 10px;font-weight:500;color:var(--ink-2)}
.mt-status em{width:7px;height:7px;border-radius:50%;background:var(--green)}
.mt-status small{background:#fff;border-radius:100px;padding:2px 8px;font-size:10.5px;color:var(--ink-3)}
.mo-badge{background:#fff4e0;color:var(--amber-ink);font-weight:700;padding:3px 10px;border-radius:100px;font-size:12px}
.mo-test{background:var(--soft);border-radius:10px;padding:10px 12px}
.mo-test b{display:block;font-size:14px}
.mo-conf{display:inline-block;margin-top:5px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--tint);color:var(--blue-ink);padding:2px 8px;border-radius:100px}
.mcf-thumbs{display:flex;gap:6px;margin:10px 0}.mcf-thumbs i{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#dfe6f7,#eef2fb)}
.mcf-cta{display:inline-block;background:var(--ink);color:#fff;border-radius:9px;padding:8px 13px;font-size:12px;font-weight:600}
/* Signal → suggested test */
.band-sub{margin-top:10px;font-size:16px;color:var(--ink-3);max-width:620px}
.flow{list-style:none;margin:0;padding:0;display:flex;gap:14px;height:470px;container-type:inline-size}
.flow li{--open:calc((100cqw - 298px)*2.6/5.6);position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;border-radius:28px;background:var(--bg);padding:30px 32px;display:flex;flex-direction:column;cursor:pointer;transition:flex-grow .7s cubic-bezier(.22,.8,.22,1),color .4s}
.flow li:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 70% at 15% 0%,#3d5cff80,transparent 60%),radial-gradient(80% 60% at 100% 100%,#6a4dff40,transparent 60%),linear-gradient(165deg,#15215e,#0a1030);opacity:0;transition:opacity .5s}
.flow li.is-open{flex-grow:2.6;cursor:default}
.flow li.is-open:before{opacity:1}
.flow li:focus-visible{outline:3px solid #3d63ff;outline-offset:3px}
.flow-title{margin:0;font-size:clamp(24px,2.3vw,32px);font-weight:700;letter-spacing:-.03em;line-height:1.08;color:var(--ink);transition:color .4s}
.flow li:not(.is-open):hover .flow-title{color:var(--blue)}
.flow li.is-open .flow-title{color:#fff}
.flow-open{position:absolute;left:32px;bottom:30px;width:var(--open);display:flex;flex-direction:column;gap:28px;opacity:0;transform:translateY(14px);transition:opacity .25s,transform .25s;pointer-events:none}
.flow li.is-open .flow-open{opacity:1;transform:none;transition:opacity .45s .25s,transform .55s .25s cubic-bezier(.22,.8,.22,1);pointer-events:auto}
.flow-body h4{margin:0 0 8px;font-size:20px;font-weight:650;color:#fff;display:flex;align-items:center;gap:8px}
.flow-body p{margin:0 0 14px;font-size:15px;color:#c9d3ff}
.flow-body small{font-size:12.5px;color:#8f9ed8}
.flow-conf{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:#ffffff1f;color:#fff;padding:3px 9px;border-radius:100px}
.flow-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;transition:opacity .3s}
.flow li.is-open .flow-foot{opacity:0}
.flow-num{font-size:13px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.flow-plus{width:34px;height:34px;border-radius:50%;background:#fff;position:relative;box-shadow:var(--shadow)}
.flow-plus:before,.flow-plus:after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--ink-2);transform:translate(-50%,-50%)}
.flow-plus:after{transform:translate(-50%,-50%) rotate(90deg)}
.flow-art{background:#ffffff0f;border-radius:18px;padding:18px;box-shadow:inset 0 0 0 1px #ffffff14;color:#fff;font-size:13.5px}
.fa-events{display:grid;gap:10px}
.fa-events span{display:flex;align-items:center;gap:10px;color:#dbe3ff}
.fa-events i{width:8px;height:8px;border-radius:50%;background:#7d95ff;box-shadow:0 0 0 4px #7d95ff26}
.fa-events b{margin-left:auto;font-weight:650;color:#fff}
.fa-events .out i{background:#ff8a70;box-shadow:0 0 0 4px #ff8a7026}
.fa-meter-top,.fa-meter-foot{display:flex;justify-content:space-between;color:#c9d3ff}
.fa-meter-top b{color:#fff;font-size:18px}
.fa-meter-foot{font-size:12px;color:#8f9ed8}
.fa-bar{height:10px;border-radius:100px;background:#ffffff1a;margin:10px 0 8px;overflow:hidden}
.fa-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5a78ff,#9db0ff)}
.fa-quote{font-size:18px;font-weight:600;color:#fff;letter-spacing:-.01em}
.fa-quote span{display:block;margin-top:6px;font-size:12px;font-weight:500;color:#8f9ed8}
.fa-split-bar{display:flex;gap:4px;height:34px;border-radius:10px;overflow:hidden;font-size:12px;font-weight:650}
.fa-split-bar i{flex:9;display:flex;align-items:center;padding-left:12px;background:#ffffff1a;color:#c9d3ff;font-style:normal}
.fa-split-bar b{flex:1.4;display:grid;place-items:center;background:linear-gradient(90deg,#5a78ff,#8aa0ff);color:#fff}
.fa-split span{display:block;margin-top:10px;font-size:12px;color:#8f9ed8}
.flow-caption{position:static;text-align:right;margin-top:10px}
/* Feature cards: visual on top, copy below (Nord-style tall cards) */
.feature{justify-content:flex-start;min-height:340px;padding:0 0 28px;overflow:hidden}
.feature>h3,.feature>p{padding:0 28px}
.feature>h3{margin-top:22px}
.feature-wide{padding:34px}













.art-rows{display:grid;gap:12px;background:#fff;border-radius:18px;padding:20px 22px;box-shadow:0 18px 40px -26px #1f3cc466}
.art-rows div{display:grid;grid-template-columns:110px 1fr 76px;gap:12px;align-items:center;font-size:13px}
.art-rows span{font-weight:600}
.art-rows i{height:9px;border-radius:100px;background:linear-gradient(90deg,#7b95ff,var(--blue)) 0/var(--w) 100% no-repeat,var(--soft)}
.art-rows b{text-align:right;font-size:13px}.art-rows b em{font-style:normal;color:var(--ink-3);font-weight:500}
/* Steps with connector */
/* Footer */
.landing-footer{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;align-items:start;padding:40px 0 28px;border-top:1px solid var(--line)}
.lf-brand p{margin:14px 0 0;font-size:13px;color:var(--ink-3)}
.lf-links{display:grid;gap:10px}.lf-links a{color:var(--ink-2);text-decoration:none;font-size:14px;font-weight:500}.lf-links a:hover{color:var(--blue)}
.lf-legal{grid-column:1/-1;margin:8px 0 0;padding-top:18px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-4)}
@media(max-width:760px){.feature{min-height:0}.art-rows div{grid-template-columns:90px 1fr 64px}.landing-footer{grid-template-columns:1fr}}
.hero-visual{padding-bottom:110px}
.hero-visual .mock-caption{bottom:74px}
@media(max-width:1150px){.hero-visual{padding-bottom:60px}.hero-visual .mock-caption{bottom:-14px}}
@media(max-width:760px){.hero-visual{padding-bottom:30px}}
@media(min-width:1151px){.hero-visual{padding-bottom:150px}.hero-visual .mock-caption{bottom:112px}}
/* Platforms */
.platforms{padding-top:72px;padding-bottom:56px}
.pf-head{text-align:center}
.pf-head h2{font-size:clamp(30px,3.6vw,44px);max-width:720px;margin:0 auto}
.pf-head p{max-width:560px;margin:14px auto 0;font-size:16px;color:var(--ink-3)}
.pf-card{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:28px;padding:10px;gap:10px}
.pf-main{background:#fff;border-radius:20px;padding:36px;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:flex-start}
.pf-brand{display:flex;align-items:center;gap:14px}
.pf-brand b{display:block;font-size:20px;font-weight:650;color:var(--ink);letter-spacing:-.01em}
.pf-mark{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:#f1f8ec;color:#5e8e3e}
.pf-mark svg{width:28px;height:28px;fill:currentColor}
.pf-live{display:inline-flex;align-items:center;gap:6px;margin-top:3px;font-size:12.5px;font-weight:600;color:#11703a}
.pf-live:before{content:"";width:7px;height:7px;border-radius:50%;background:#1f9d55;box-shadow:0 0 0 3px #1f9d5522}
.pf-facts{list-style:none;margin:26px 0 30px;padding:0;display:grid;gap:12px}
.pf-facts li{display:flex;gap:10px;align-items:baseline;font-size:15px;color:var(--ink-2)}
.pf-facts li:before{content:"";flex-shrink:0;width:6px;height:6px;border-radius:50%;background:var(--blue);transform:translateY(-2px)}
.pf-main .button{margin-top:auto}
.pf-next{padding:30px 30px 26px;display:flex;flex-direction:column}
.pf-label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4)}
.pf-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pf-list li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;font-size:14.5px;font-weight:500;color:var(--ink-3);transition:background .2s,color .2s}
.pf-list li:hover{background:#fff;color:var(--ink)}
.pf-logo{width:22px;height:22px;display:grid;place-items:center;color:#a3abbf}
.pf-logo svg{width:20px;height:20px;fill:currentColor}
.pf-next p{margin:auto 0 0;padding-top:20px;font-size:14px;color:var(--ink-3)}
.pf-next p a{color:var(--blue);font-weight:600;text-decoration:none}
.pf-note{margin-top:18px;text-align:center;font-size:11.5px;color:var(--ink-4)}
@media(max-width:860px){.pf-card{grid-template-columns:1fr}.pf-main{padding:28px}.pf-next{padding:22px 18px 18px}}
@media(max-width:860px){.flow{flex-direction:column;height:auto}.flow li{flex:none;padding:24px}.flow li,.flow li.is-open{cursor:default}.flow-open{position:static;width:auto;opacity:1;transform:none;margin-top:20px}.flow li:not(.is-open) .flow-art{background:#fff;box-shadow:var(--shadow);color:var(--ink)}.flow li:not(.is-open) :is(.flow-body h4,.fa-quote,.fa-events b,.fa-meter-top b){color:var(--ink)}.flow li:not(.is-open) :is(.flow-body p,.fa-events span,.fa-meter-top){color:var(--ink-3)}.flow li:not(.is-open) :is(.flow-body small,.fa-quote span,.fa-meter-foot,.fa-split span){color:var(--ink-4)}.flow li:not(.is-open) .flow-conf{background:var(--tint);color:var(--blue-ink)}.flow li:not(.is-open) :is(.fa-bar,.fa-split-bar i){background:var(--soft);color:var(--ink-3)}.flow-foot{display:none}}
@media(prefers-reduced-motion:reduce){.flow li,.flow-open,.flow li:before{transition:none!important}}
.merchant-app #login [id]{scroll-margin-top:96px}
.landing-nav.on-dark{background:linear-gradient(135deg,#1a255fb3,#0b123399);box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff1a,0 12px 32px -16px #0006}
.landing-nav.on-dark .landing-links a,.landing-nav.on-dark .logo-text b{color:#fff}
.landing-nav.on-dark .landing-links a:hover{color:#b8c6ff}
.landing-nav.on-dark .logo-text small{color:#c9d3ff}
.landing-nav.on-dark .by-logo{opacity:.9}
.landing-nav .landing-links a,.landing-nav .logo-text b,.landing-nav .logo-text small{transition:color .35s}
/* Footer v2 — dark */
.merchant-app .landing-footer{display:block;width:min(98%,1680px);margin:24px auto 20px;padding:56px 52px 28px;border-radius:32px;border:0;box-shadow:none;color:#f5f7ff;background:#0a0e1c}
.lf-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:48px;padding-bottom:56px}
.landing-footer .logo-text b{color:#f5f7ff}
.landing-footer .logo-text small{color:#8a93b0}
.landing-footer .by-logo{opacity:.85}
.landing-footer .lf-pos{margin:22px 0 6px;font-size:17px;font-weight:600;color:#f5f7ff;letter-spacing:-.01em}
.landing-footer .lf-tag{margin:0;font-size:14px;color:#8a93b0}
.landing-footer .lf-meta{margin:18px 0 0;font-size:13px;color:#5f6883}
.lf-col{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.lf-col h4{margin:4px 0 6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#5f6883}
.merchant-app .landing-footer .lf-col a{color:#d9deee;text-decoration:none;font-size:15px;font-weight:500;transition:color .2s}
.merchant-app .landing-footer .lf-col a:hover{color:#7ea2ff}
.merchant-app .landing-footer a.lf-cta{display:inline-flex;align-items:center;gap:8px;margin-bottom:6px;padding:11px 18px;border-radius:12px;background:#4169ff;color:#fff;font-size:14px;font-weight:600;transition:background .2s}
.merchant-app .landing-footer a.lf-cta:hover{background:#5a7dff;color:#fff}
.lf-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lf-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px}
.landing-footer .lf-bottom p{margin:0;font-size:12.5px;color:#5f6883}
@media(max-width:1000px){.lf-top{grid-template-columns:1fr 1fr;gap:36px}.lf-brand{grid-column:1/-1}}
@media(max-width:560px){.merchant-app .landing-footer{padding:36px 24px 24px;border-radius:26px;margin:16px auto 12px}.lf-top{grid-template-columns:1fr;gap:30px;padding-bottom:36px}.lf-bottom{flex-direction:column;align-items:flex-start;gap:6px}}
/* Statement scroll reveal */
.statement .sw{--p:0;display:inline-block;color:color-mix(in srgb,var(--ink) calc(var(--p)*100%),#c3cadb);opacity:calc(.28 + var(--p)*.72);filter:blur(calc((1 - var(--p))*7px));transform:translateY(calc((1 - var(--p))*.35em));will-change:filter,opacity,transform}
@media(prefers-reduced-motion:reduce){.statement .sw{--p:1!important}}
/* Hero v4 */
.hero:before{background:radial-gradient(46% 60% at 76% 46%,#b9c9ff 0,#dbe4ff66 45%,transparent 72%),linear-gradient(100deg,#f3f5fb 0%,#eef2ff 55%,#e6ecff 100%)}
@media(min-width:1151px){.hero{grid-template-columns:minmax(0,.95fr) minmax(0,1.15fr);gap:48px}}
.lead{max-width:500px}
.hero form{margin:30px 0 22px;gap:10px}
.install-row{padding:5px;border-radius:14px}
.install-row input#shop{padding:10px 12px;font-size:15px}
.install-row .cta{padding-block:11px}
.install-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:0 4px;font-size:13px;color:var(--ink-3)}
.install-meta a{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--blue);text-decoration:none}
.install-meta a svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.install-meta a:hover svg{transform:translateX(3px)}
.hero-ticks{gap:8px}
.hero-ticks li{background:#ffffffb3;padding:6px 12px 6px 8px;border-radius:100px;box-shadow:0 4px 12px -8px #0d143333;font-size:12.5px}
.hero-ticks li:before{width:16px;height:16px;font-size:10px}
.built-on{margin-top:16px;font-size:12px;color:var(--ink-4)}
.built-on:before{width:10px;height:10px;border-radius:3px;vertical-align:0;opacity:.85}
.hero-visual:before{content:"";position:absolute;inset:8% 4% 18% 8%;z-index:-1;background:radial-gradient(closest-side,#4169ff47,transparent);filter:blur(40px)}
.mo-test{position:relative;background:#f3f6ff;box-shadow:0 0 0 1.5px #4169ff33,0 10px 26px -12px #4169ff66}
.mo-test:after{content:"";position:absolute;top:10px;right:10px;width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #4169ff26;animation:pulse 2.4s ease-in-out infinite}
@media(min-width:1151px){.hero-visual{padding-bottom:120px}.hero-visual .mock-caption{right:auto;left:6px;bottom:84px}}
.hero-visual .mock-caption{font-size:10.5px;color:var(--ink-4);opacity:.7}
@media(max-width:760px){.install-meta{flex-direction:column;align-items:flex-start;gap:6px}}
/* Nav Shopify button */
.nav-shop{position:relative;isolation:isolate;overflow:hidden;margin-left:auto;display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 20px 0 8px;border-radius:100px;background:#0b0f1c;color:#fff;font-size:14px;font-weight:600;text-decoration:none;box-shadow:0 8px 20px -10px #0b0f1c99;transition:box-shadow .15s,transform .15s cubic-bezier(.22,.8,.22,1)}
.nav-shop:before{content:"";position:absolute;z-index:-1;left:8px;top:50%;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#95bf47,#5e8e3e);transform:translateY(-50%) scale(1);transition:transform .6s cubic-bezier(.22,.8,.22,1)}
.ns-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:#ffffff14;transition:background .4s,transform .6s cubic-bezier(.22,.8,.22,1)}
.ns-icon svg{width:15px;height:15px;fill:currentColor}
.nav-shop:hover,.nav-shop:focus-visible{box-shadow:0 12px 28px -10px #5e8e3eb3;transform:translateY(-1px)}
.nav-shop:focus-visible{outline:3px solid #3d63ff;outline-offset:3px}
.nav-shop:hover:before,.nav-shop:focus-visible:before{transform:translateY(-50%) scale(16)}
.nav-shop:hover .ns-icon,.nav-shop:focus-visible .ns-icon{background:#ffffff2e;transform:rotate(-10deg) scale(1.06)}
.landing-nav:not(.on-dark) .nav-shop:not(:hover) .ns-icon{background:transparent}
.nav-shop:before{opacity:0;transition:transform .32s cubic-bezier(.22,.8,.22,1),opacity .2s}
.nav-shop:hover:before,.nav-shop:focus-visible:before{opacity:1}
.landing-nav.on-dark .nav-shop{background:#fff;color:#0b0f1c}
.landing-nav.on-dark .nav-shop .ns-icon{color:#5e8e3e}
.landing-nav.on-dark .nav-shop:hover{color:#fff}
.landing-nav.on-dark .nav-shop:hover .ns-icon{color:#fff}
@media(prefers-reduced-motion:reduce){.nav-shop,.nav-shop:before,.ns-icon{transition:none}}
/* hero composition fix */
@media(min-width:1151px){.hero-visual{padding-bottom:150px}.hero-visual .mock-caption{left:auto;right:290px;bottom:124px}}
.kicker.kicker-plain{padding:6px 14px 6px 12px;gap:8px}
.kicker.kicker-plain:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px #4169ff26}
.hero-ticks li:before{content:"";width:6px;height:6px;margin:0 3px;background:var(--blue);box-shadow:0 0 0 3px #4169ff1f}
.built-on:before{display:none}
/* Hero install */
.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}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:14px 26px;margin:34px 0 12px}
.nav-shop.shop-lg{margin-left:0;height:56px;padding:0 28px 0 10px;gap:12px;font-size:16px}
.shop-lg .ns-icon{width:38px;height:38px}
.shop-lg .ns-icon svg{width:19px;height:19px}
.nav-shop.shop-lg:before{left:10px;width:38px;height:38px}
.hero-link{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.hero-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.hero-link:hover{color:var(--blue)}.hero-link:hover svg{transform:translateX(3px)}
.install-note{margin:0 0 22px;padding-left:4px;font-size:13px;color:var(--ink-3)}
.pilot-connect{margin:0 0 22px;max-width:480px}
.pilot-connect summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font-size:13px;font-weight:500;color:var(--ink-3)}
.pilot-connect summary::-webkit-details-marker{display:none}
.pilot-connect summary:after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s}
.pilot-connect[open] summary:after{transform:rotate(-135deg) translateY(-1px)}
.pilot-connect summary:hover{color:var(--blue)}
.pilot-connect form{margin:12px 0 0!important;max-width:none}
.pilot-connect .install-row .cta{background:var(--ink);box-shadow:none}
.nav-shop .ns-label{white-space:nowrap}
@media(max-width:560px){.hero-actions{flex-direction:column;align-items:stretch}.nav-shop.shop-lg{justify-content:center}.hero-link{justify-content:center}}
/* Hero 3D visual */
.hv3d{padding:40px 0 60px!important;perspective:2200px}
.hv3d:before{inset:10% 0 10% 10%}
.hv-stage{position:relative;transform:rotateY(-16deg) rotateX(7deg) rotateZ(1.5deg);transform-style:preserve-3d;animation:hv-in 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
@keyframes hv-in{from{opacity:0;transform:rotateY(-28deg) rotateX(12deg) rotateZ(2deg) translateY(30px)}}
.hv-layer{border-radius:26px;background:linear-gradient(160deg,#1a2140,#0b0f1c 55%);box-shadow:inset 0 1px 0 #ffffff1f,inset 0 0 0 1px #ffffff0f}
.hv-back2,.hv-back1{position:absolute;inset:0}
.hv-back2{transform:translate(58px,-44px) translateZ(-80px);opacity:.55}
.hv-back1{transform:translate(29px,-22px) translateZ(-40px);opacity:.8}
.hv-main{position:relative;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:auto 1fr;gap:12px;padding:14px;box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff12,0 50px 90px -30px #0b0f1cb3,0 30px 60px -40px #3d5cff80;-webkit-mask:linear-gradient(180deg,#000 72%,#0000 100%);mask:linear-gradient(180deg,#000 72%,#0000 100%)}
.hv-main>div:not(.hv-orb){border-radius:18px;background:#ffffff08;box-shadow:inset 0 1px 0 #ffffff14,inset 0 0 0 1px #ffffff0d;color:#fff;position:relative;overflow:hidden}
.hv-metric{padding:26px 24px 22px;background:radial-gradient(90% 80% at 0 0,#3d5cff99,transparent 70%),#ffffff08!important}
.hv-metric small{font-size:11px;color:#9fb0e8;letter-spacing:.02em}
.hv-metric b{display:block;margin:14px 0 8px;font-size:clamp(46px,5vw,68px);line-height:1;letter-spacing:-.05em;font-weight:700;background:linear-gradient(180deg,#fff,#b8c6ff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.05em}
.hv-metric p{margin:0;font-size:13px;line-height:1.4;color:#a9b4d6}
.hv-log{grid-column:1;padding:16px 18px 22px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px}
.hv-log-head{display:flex;justify-content:space-between;color:#565f85;margin-bottom:10px;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em}.hv-log-head em{font-style:normal;color:#9fb0e8}
.hv-log ol{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.hv-log li{display:grid;grid-template-columns:40px 1fr auto;gap:8px;color:#d8def5}
.hv-log li i{font-style:normal;color:#4d567a}
.hv-log li span{color:#5a6590}
.hv-log li.hl{color:#fff}.hv-log li.hl span{color:#ffb27a;font-weight:700}
.hv-log li.out{color:#ff8a70}
.hv-types{grid-column:2;grid-row:1/3;padding:22px 18px 18px}
.hv-types h5{margin:0 0 16px;font-size:15px;font-weight:650;color:#fff;letter-spacing:-.01em}
.hv-types ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;position:relative;z-index:1}
.hv-types li{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;background:#0b0f1ccc;box-shadow:inset 0 1px 0 #ffffff1a,inset 0 0 0 1px #ffffff0f;font-size:13px;color:#e6eaf8}
.hv-types li b{font-variant-numeric:tabular-nums;color:#fff}
.hv-types li:first-child{background:linear-gradient(90deg,#3d5cff4d,#0b0f1ccc);box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #7d95ff55}
.hv-glow{position:absolute;inset:auto -20% -30% -10%;height:70%;background:radial-gradient(40% 60% at 25% 60%,#2dd4bf88,transparent 70%),radial-gradient(45% 60% at 60% 70%,#4169ffaa,transparent 70%),radial-gradient(40% 60% at 90% 55%,#a855f788,transparent 70%);filter:blur(10px);opacity:.9}
.hv-orb{position:absolute;left:50%;top:44%;width:92px;height:92px;margin:-46px 0 0 -52px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#ffffff26,#0b0f1ce6 70%);box-shadow:inset 0 1px 0 #ffffff40,inset 0 0 0 1px #ffffff1f,0 20px 40px -10px #000c,0 0 40px #3d5cff55;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transform:translateZ(40px)}
.hv-orb img{width:52px;height:52px;border-radius:14px}
.hv-pill{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:10px;padding:13px 20px 13px 16px;border-radius:16px;font-size:15px;font-weight:650;color:#fff;background:linear-gradient(135deg,#1a2350,#0b0f1c);box-shadow:inset 0 1px 0 #ffffff2e,inset 0 0 0 1px #ffffff14,0 24px 44px -16px #0b0f1cb3;transform:translateZ(60px)}
.hv-pill svg{width:18px;height:18px;fill:none;stroke:#8fa6ff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hv-p1{left:-34px;top:-18px;background:linear-gradient(135deg,#2346c9,#0b0f1c 80%)}
.hv-p2{left:-46px;bottom:26%;background:linear-gradient(135deg,#6d28d9,#0b0f1c 80%)}.hv-p2 svg{stroke:#e9d5ff}
.hv-p3{right:-18px;top:40%;font-size:13px;padding:10px 16px;background:#fff;color:var(--ink)}
.hv-p3 em{width:8px;height:8px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 4px #16a34a26}
@media(max-width:1150px){.hv-p3{right:6px}}
@media(max-width:760px){.hv-stage{transform:rotateY(-8deg) rotateX(4deg)}.hv-main{grid-template-columns:1fr}.hv-types{grid-column:1;grid-row:auto}.hv-orb{display:none}.hv-p1{left:-6px}.hv-p2{left:-6px;bottom:auto;top:44%}.hv-p3{display:none}.hv-back2,.hv-back1{display:none}}
@media(prefers-reduced-motion:reduce){.hv-stage{animation:none}}
.hv-back2{opacity:1;background:linear-gradient(160deg,#2a3563,#141a33 60%)}
.hv-back1{opacity:1;background:linear-gradient(160deg,#222b54,#10152a 60%)}
.hv-p2{bottom:4%}
.hv-p3{right:-26px;top:9%}
.hv-glow{opacity:1;filter:blur(14px);height:85%}
/* Hero rounded panel */
.hero:before{left:calc(50% - 49vw);right:calc(50% - 49vw);border-radius:0 0 36px 36px}
@media(max-width:560px){.hero:before{border-radius:0 0 26px 26px}}
@media(max-width:760px){.hv-p2{left:auto;right:-6px;top:auto;bottom:8%}}
@media(min-width:761px){.hv-p2{bottom:-4%}}
/* Hero 3D — light */
.hv-light .hv-layer{background:linear-gradient(160deg,#ffffff,#f3f6fd 60%);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #0d14330a}
.hv-light .hv-back2{background:linear-gradient(160deg,#dfe6fb,#cfd9f7)}
.hv-light .hv-back1{background:linear-gradient(160deg,#edf1fd,#dde5fa)}
.hv-light .hv-main{box-shadow:inset 0 1px 0 #fff,0 0 0 1px #0d14330d,0 50px 90px -30px #1f3cc455,0 30px 60px -40px #3d5cff66}
.hv-light .hv-main>div:not(.hv-orb){background:#fff;box-shadow:0 1px 0 #0d14330a,0 8px 22px -14px #0d143340;color:var(--ink)}
.hv-light .hv-metric{background:radial-gradient(90% 80% at 0 0,#dbe4ff,transparent 70%),#fff!important}
.hv-light .hv-metric small{color:var(--ink-3)}
.hv-light .hv-metric b{background:linear-gradient(180deg,#1b2a7a,#4169ff);-webkit-background-clip:text;background-clip:text}
.hv-light .hv-metric p{color:var(--ink-3)}
.hv-light .hv-log-head{color:var(--ink-4)}.hv-light .hv-log-head em{color:var(--blue)}
.hv-light .hv-log li{color:var(--ink-2)}.hv-light .hv-log li i{color:#5b6580}.hv-light .hv-log li span{color:var(--ink-4)}
.hv-light .hv-log li.hl{color:var(--ink)}.hv-light .hv-log li.hl span{color:#d9730d}
.hv-light .hv-log li.out{color:#e0533b}
.hv-light .hv-types h5{color:var(--ink)}
.hv-light .hv-types li{background:#f5f7fc;box-shadow:none;color:var(--ink-2)}
.hv-light .hv-types li b{color:var(--ink)}
.hv-light .hv-types li:first-child{background:linear-gradient(90deg,#e3e9ff,#f5f7fc);box-shadow:inset 0 0 0 1px #4169ff33;color:var(--ink)}
.hv-light .hv-glow{opacity:.45}
.hv-light .hv-orb{background:radial-gradient(circle at 30% 25%,#fff,#eef2fd 70%);box-shadow:0 0 0 1px #0d14330d,0 20px 40px -12px #1f3cc466,0 0 40px #4169ff33}
.hv-light .hv-pill:not(.hv-p3){box-shadow:0 20px 40px -16px #1f3cc480}
.hv-light .hv-p3{box-shadow:0 0 0 1px #0d14330d,0 18px 36px -16px #0d143355}
/* Hero 3D — glass */
.hv-glass{--rx:7deg;--ry:-16deg}
.hv-glass .hv-stage{transform:rotateY(var(--ry)) rotateX(var(--rx)) rotateZ(1.5deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hv-blobs{position:absolute;inset:-6% -4% 0 4%;z-index:0;pointer-events:none;filter:blur(38px)}
.hv-blobs i{position:absolute;border-radius:50%;opacity:.75;animation:hv-drift 14s ease-in-out infinite alternate}
.hv-blobs i:nth-child(1){width:46%;height:52%;left:6%;top:6%;background:#5b7cff}
.hv-blobs i:nth-child(2){width:40%;height:46%;right:0;top:26%;background:#a78bfa;animation-duration:17s;animation-delay:-4s}
.hv-blobs i:nth-child(3){width:34%;height:38%;left:36%;bottom:4%;background:#5eead4;animation-duration:19s;animation-delay:-8s;opacity:.6}
@keyframes hv-drift{50%{transform:translate(8%,-6%) scale(1.08)}100%{transform:translate(-6%,5%) scale(.94)}}
.hv-glass .hv-stage{z-index:1}
.hv-glass .hv-layer{background:linear-gradient(150deg,#ffffffa6,#ffffff59);-webkit-backdrop-filter:blur(22px) saturate(170%);backdrop-filter:blur(22px) saturate(170%);box-shadow:inset 0 1px 0 #ffffffe6,inset 0 0 0 1px #ffffff66,0 30px 60px -30px #1f3cc466}
.hv-glass .hv-back2{background:linear-gradient(150deg,#ffffff4d,#ffffff1f)}
.hv-glass .hv-back1{background:linear-gradient(150deg,#ffffff73,#ffffff33)}
.hv-glass .hv-main{-webkit-mask:none;mask:none;box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffff80,0 50px 90px -30px #1f3cc466}
.hv-glass .hv-main>div:not(.hv-orb){background:#ffffffb3;box-shadow:inset 0 1px 0 #fff,0 10px 26px -16px #0d14334d}
.hv-glass .hv-metric{background:radial-gradient(90% 80% at 0 0,#c7d4ffcc,transparent 70%),#ffffffb3!important}
.hv-glass .hv-types li{background:#ffffff99;box-shadow:inset 0 1px 0 #fff}
.hv-glass .hv-types li:first-child{background:linear-gradient(90deg,#dfe6ffee,#ffffffaa);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #4169ff40}
.hv-glass .hv-glow{display:none}
.hv-signal{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.hv-signal path{fill:none;stroke:#4169ff;stroke-width:1.6;stroke-dasharray:3 5;vector-effect:non-scaling-stroke;opacity:.7;animation:hv-dash 1.6s linear infinite}
.hv-signal circle{fill:#4169ff;filter:drop-shadow(0 0 3px #4169ff)}
@keyframes hv-dash{to{stroke-dashoffset:-16}}
.hv-glass .hv-orb{z-index:3;background:radial-gradient(circle at 30% 25%,#ffffffee,#ffffff99 70%);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px #ffffff80,0 20px 40px -12px #1f3cc466,0 0 0 10px #4169ff14,0 0 0 22px #4169ff0a;animation:hv-orb 3.2s ease-in-out infinite}
@keyframes hv-orb{50%{box-shadow:inset 0 1px 0 #fff,0 0 0 1px #ffffff80,0 20px 40px -12px #1f3cc466,0 0 0 14px #4169ff1f,0 0 0 30px #4169ff0d}}
.hv-glass .hv-pill{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hv-glass .hv-p1{background:linear-gradient(135deg,#3d5cffe6,#1b2a7acc)}
.hv-glass .hv-p2{background:linear-gradient(135deg,#8b5cf6e6,#4c1d95cc)}
.hv-glass .hv-p3{background:#ffffffd9}
.hv-store{position:absolute;z-index:4;right:-38px;bottom:-26px;display:flex;gap:12px;align-items:center;padding:14px 18px 14px 14px;border-radius:18px;background:linear-gradient(150deg,#ffffffd9,#ffffffa6);-webkit-backdrop-filter:blur(18px) saturate(170%);backdrop-filter:blur(18px) saturate(170%);box-shadow:inset 0 1px 0 #fff,inset 0 0 0 1px #ffffff99,0 30px 50px -20px #1f3cc466;transform:translateZ(90px);animation:hv-float 6s ease-in-out infinite}
@keyframes hv-float{50%{transform:translateZ(90px) translateY(-8px)}}
.hv-store-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#5eead4,#14b8a6);box-shadow:0 8px 18px -8px #14b8a6}
.hv-store-ic svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round}
.hv-store small{display:block;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#0f766e}
.hv-store b{display:block;font-size:15px;color:var(--ink);margin:1px 0}
.hv-store span:not(.hv-store-ic){font-size:12px;color:var(--ink-3)}
@media(max-width:760px){.hv-store{right:-4px;bottom:-40px}.hv-signal{display:none}.hv-blobs{filter:blur(30px)}}
@media(prefers-reduced-motion:reduce){.hv-blobs i,.hv-signal path,.hv-glass .hv-orb,.hv-store{animation:none}.hv-signal circle{display:none}}
.hv-glass .hv-stage{animation-fill-mode:backwards}
@media(max-width:760px){.hv-glass .hv-p2{display:none}}
.hv-glass .hv-log li.hl{margin:0 -8px;padding:5px 8px;border-radius:8px;background:linear-gradient(90deg,#dfe6ffcc,#dfe6ff55);box-shadow:inset 0 0 0 1px #4169ff2e}
.hv-glass .hv-log li.hl span{color:#3d5cff}
/* Hero 3D — bevelled glass tiles */
.hv-glass .hv-types li,.hv-glass .hv-main>div:not(.hv-orb),.hv-glass .hv-p3,.hv-store{border:1px solid transparent;background-clip:padding-box,border-box!important;background-origin:padding-box,border-box}
.hv-glass .hv-types li{background-image:linear-gradient(160deg,#ffffffe6,#f1f4fcd9),linear-gradient(135deg,#ffffff 0%,#ffffff00 38%,#ffffff00 62%,#aab8e6 100%);box-shadow:inset 0 1px 0 #fff,3px 4px 0 -1px #cfd8f2,3px 4px 0 0 #b9c6ec,0 14px 22px -14px #1f3cc466}
.hv-glass .hv-types li:first-child{background-image:linear-gradient(160deg,#e7edffee,#d6e0ffd9),linear-gradient(135deg,#ffffff 0%,#ffffff00 40%,#ffffff00 60%,#6f8cff 100%);box-shadow:inset 0 1px 0 #fff,3px 4px 0 -1px #b3c3fb,3px 4px 0 0 #8ea5f7,0 16px 26px -14px #3d5cff80}
.hv-glass .hv-main>div:not(.hv-orb){background-image:linear-gradient(160deg,#ffffffd9,#f6f8ffb3),linear-gradient(135deg,#ffffff 0%,#ffffff00 35%,#ffffff00 65%,#b4c2ee 100%);box-shadow:inset 0 1px 0 #fff,4px 5px 0 -1px #dbe2f6,4px 5px 0 0 #c3cfef,0 22px 36px -22px #1f3cc466}
.hv-glass .hv-metric{background-image:radial-gradient(90% 80% at 0 0,#c7d4ffcc,transparent 70%),linear-gradient(135deg,#ffffff 0%,#ffffff00 35%,#ffffff00 65%,#b4c2ee 100%)!important}
.hv-glass .hv-pill:not(.hv-p3){border:1px solid transparent;background-origin:padding-box,border-box;background-clip:padding-box,border-box}
.hv-glass .hv-p1{background-image:linear-gradient(135deg,#3d5cff,#1b2a7a),linear-gradient(135deg,#ffffffcc 0%,#ffffff00 40%,#ffffff00 60%,#ffffff66 100%);box-shadow:inset 0 1px 0 #ffffff59,4px 5px 0 -1px #1b2a7a,4px 5px 0 0 #121c57,0 24px 40px -16px #1f3cc4b3}
.hv-glass .hv-p2{background-image:linear-gradient(135deg,#8b5cf6,#4c1d95),linear-gradient(135deg,#ffffffcc 0%,#ffffff00 40%,#ffffff00 60%,#ffffff66 100%);box-shadow:inset 0 1px 0 #ffffff59,4px 5px 0 -1px #4c1d95,4px 5px 0 0 #36156b,0 24px 40px -16px #6d28d9b3}
.hv-glass .hv-p3{background-image:linear-gradient(160deg,#fff,#f2f5fd),linear-gradient(135deg,#fff 0%,#ffffff00 40%,#ffffff00 60%,#b4c2ee 100%);box-shadow:inset 0 1px 0 #fff,3px 4px 0 -1px #dbe2f6,3px 4px 0 0 #c3cfef,0 18px 30px -14px #1f3cc466}
.hv-store{background-image:linear-gradient(160deg,#ffffffee,#f3f6fde0),linear-gradient(135deg,#fff 0%,#ffffff00 40%,#ffffff00 60%,#9fd9cf 100%);box-shadow:inset 0 1px 0 #fff,5px 6px 0 -1px #d6ece8,5px 6px 0 0 #b5dcd4,0 30px 50px -20px #1f3cc466}
.hv-glass .hv-orb{box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px #b4c2ee66,0 0 0 1px #ffffffb3,3px 5px 0 0 #c3cfef,0 20px 40px -12px #1f3cc466,0 0 0 10px #4169ff14,0 0 0 22px #4169ff0a}
/* Hero 3D — keep depth only on floating elements */
.hv-glass .hv-main>div:not(.hv-orb){box-shadow:inset 0 1px 0 #fff,0 12px 28px -18px #1f3cc455}
.hv-glass .hv-types li{background-image:linear-gradient(160deg,#ffffffd9,#f4f6fccc),linear-gradient(135deg,#fff 0%,#ffffff00 50%,#dfe5f5 100%);box-shadow:inset 0 1px 0 #fff}
.hv-glass .hv-types li:first-child{background-image:linear-gradient(160deg,#e9eeffee,#dde5ffd9),linear-gradient(135deg,#fff 0%,#ffffff00 50%,#a9b9f6 100%);box-shadow:inset 0 1px 0 #fff,0 10px 20px -14px #3d5cff66}
.hv-glass .hv-p3{box-shadow:inset 0 1px 0 #fff,0 16px 30px -16px #1f3cc455}
.hv-glass .hv-orb{box-shadow:inset 0 1px 0 #fff,0 0 0 1px #ffffffb3,0 18px 36px -14px #1f3cc455,0 0 0 10px #4169ff12,0 0 0 22px #4169ff08}

.baseline-card{margin:20px 0;padding:32px;border-radius:28px;background:radial-gradient(ellipse at 100% 0,rgba(73,103,255,.08),transparent 55%),linear-gradient(135deg,#fff,#fafbff);overflow:hidden}
.baseline-top{display:flex;align-items:flex-start;gap:24px}.baseline-visual{flex:0 0 84px;height:84px;display:grid;place-items:center;border-radius:24px;background:#eaf0ff;color:var(--blue);box-shadow:inset 0 0 0 1px #dfe7ff}.baseline-visual svg{width:56px;height:56px}.baseline-visual circle{fill:#fff;stroke:currentColor;stroke-width:2.5}.baseline-copy{max-width:740px}.baseline-badge{display:inline-flex;align-items:center;gap:7px;color:#4054b8;background:#edf1ff;padding:5px 10px;border-radius:100px;font-size:12px;font-weight:650}.baseline-badge>span{width:6px;height:6px;border-radius:50%;background:currentColor}.baseline-copy h2{font-size:27px;letter-spacing:-.7px;line-height:1.25;margin:12px 0}.baseline-copy p{margin:0;line-height:1.65;color:var(--muted);font-size:15px}.baseline-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.baseline-chips span{font-size:12px;color:#526080;background:#fff;border:1px solid #e5eaf5;padding:5px 10px;border-radius:100px}.baseline-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:26px 0 22px}.baseline-meta>div{background:rgba(255,255,255,.8);border:1px solid #e6eaf4;border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:6px}.baseline-meta small{font-size:12px;color:var(--muted)}.baseline-meta strong{font-size:15px}.baseline-meta span{font-size:12px;color:var(--muted)}.baseline-footer{display:flex;align-items:center;justify-content:space-between;gap:16px}.baseline-actions{display:flex;flex-wrap:wrap;gap:10px}.baseline-footer p{font-size:12px;color:var(--muted);margin:0}.baseline-progress{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);padding:22px 0 0;margin:24px 0 0;border-top:1px solid #e4e9f4;gap:16px}.baseline-progress li{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;color:#8991a8}.baseline-progress li>span{flex:0 0 28px;height:28px;border-radius:50%;display:grid;place-items:center;border:1px solid #e0e5f0;background:#fff;font-size:12px}.baseline-progress small{display:block;font-size:11px;font-weight:400;margin-top:3px}.baseline-progress .complete{color:#344869}.baseline-progress .complete>span{background:#e9f5f0;border-color:#d6ece2;color:#248461}.baseline-progress .current{color:var(--blue)}.baseline-progress .current>span{background:#edf1ff;border-color:#cbd6ff}.baseline-progress .current small{color:#687794}
@media(max-width:800px){.baseline-footer{align-items:flex-start;flex-direction:column}.baseline-meta{gap:8px}.baseline-meta>div{padding:14px}.baseline-progress{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.baseline-card{padding:22px;border-radius:24px}.baseline-top{gap:14px}.baseline-visual{flex-basis:54px;height:54px;border-radius:16px}.baseline-visual svg{width:40px;height:40px}.baseline-copy h2{font-size:22px}.baseline-meta{grid-template-columns:1fr}.baseline-actions{width:100%}.baseline-actions button{width:100%}.baseline-progress{gap:18px 8px}}
.baseline-progress li>span{flex-basis:36px;height:36px;box-shadow:0 2px 5px rgba(24,39,78,.03)}
.baseline-progress li>span svg{width:20px;height:20px}
.baseline-progress .upcoming>span{background:#f8faff;color:#97a3bc;border-color:#e4e9f3}
.baseline-spinner-track{opacity:.18}.baseline-spinner-arc{stroke-width:2.4}
.baseline-spinner{animation:baseline-spin 1.2s linear infinite}
@keyframes baseline-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.baseline-spinner{animation:none}}
.opportunities-waiting{padding:28px 32px;margin:16px 0;border:1px solid #e8ecf6;border-radius:26px;background:radial-gradient(ellipse at 50% 0,rgba(78,106,255,.065),transparent 65%),#fff}
.opportunities-waiting-main{display:flex;align-items:center;gap:22px;max-width:850px;margin:0 auto}
.opportunities-signal{flex:0 0 64px;height:64px;border-radius:20px;background:#edf2ff;color:var(--blue);display:grid;place-items:center}.opportunities-signal svg{width:42px;height:42px}
.opportunities-waiting h2{font-size:22px;letter-spacing:-.4px;margin:0 0 8px}.opportunities-waiting-main p{font-size:14px;line-height:1.65;color:var(--muted);max-width:680px;margin:0}.opportunities-waiting .baseline-chips{margin-top:12px}.opportunities-waiting .baseline-progress{margin-top:22px;padding-top:18px}
@media(max-width:520px){.opportunities-waiting{padding:22px}.opportunities-waiting-main{align-items:flex-start;gap:14px}.opportunities-signal{flex-basis:44px;height:44px;border-radius:14px}.opportunities-signal svg{width:30px;height:30px}.opportunities-waiting h2{font-size:20px}}
/* Quiet onboarding details: plain icons and unboxed metadata. */
.baseline-card .baseline-chips span,.opportunities-waiting .baseline-chips span{border:0;background:transparent;border-radius:0;padding:0}
.baseline-chips span+span:before{content:'·';margin-right:8px;color:#a4adbf}
.baseline-meta>div{border:0;background:transparent;border-radius:0;padding:8px 0;box-shadow:none}
.baseline-meta>div+div{padding-left:20px}
.baseline-visual{box-shadow:none}
.baseline-progress li>span,.baseline-progress .complete>span,.baseline-progress .current>span,.baseline-progress .upcoming>span{border:0;background:transparent;box-shadow:none;border-radius:0;flex-basis:24px;height:28px}
.baseline-progress .complete>span{color:#248461}
.baseline-progress .current,.baseline-progress .current>span{color:#8991a8}
.baseline-progress .current small{color:#8991a8}
.opportunities-waiting{border:0}
@media(max-width:520px){.baseline-meta>div+div{padding-left:0}}
.opportunities-expectations{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;font-size:12px;font-weight:600;color:#64718c}.opportunities-expectations span:before{content:'→';margin-right:7px;color:#8d9bc0}
/* Hero rows — no gradient edge */
.hv-glass .hv-types li,.hv-glass .hv-types li:first-child{border:0;background-clip:border-box!important;background-origin:border-box}
.hv-glass .hv-types li{background-image:none;background-color:#ffffffc7;box-shadow:inset 0 1px 0 #fff,0 1px 2px #0d14330a}
.hv-glass .hv-types li:first-child{background-image:linear-gradient(180deg,#eef2ff,#e3e9ff);box-shadow:inset 0 1px 0 #ffffffcc,0 8px 18px -12px #3d5cff59}
.hv-glass .hv-log li.hl{box-shadow:none;background:linear-gradient(180deg,#eef2ff,#e3e9ff)}
/* Landing nav: flat on hero, floating glass after mid-hero */
.nav-slot{width:min(var(--wrap),100% - 40px);margin:12px auto 0;min-height:66px;position:relative;z-index:20}
.nav-slot .landing-nav{width:100%;margin:0;position:relative;top:auto;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-slot .landing-nav.is-floating{position:fixed;top:12px;left:50%;width:min(var(--wrap),100% - 40px);transform:translateX(-50%);background:linear-gradient(135deg,#ffffffc7,#ffffff99);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 #ffffffcc,inset 0 0 0 1px #ffffff80,0 12px 32px -16px #0d14334d;animation:nav-in .45s cubic-bezier(.2,.7,.2,1) both}
.nav-slot .landing-nav.is-floating.on-dark{background:linear-gradient(135deg,#1a255fb3,#0b123399);box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff1a,0 12px 32px -16px #0006}
.nav-slot .landing-nav.is-leaving{animation:nav-out .3s cubic-bezier(.4,0,1,1) both}
@keyframes nav-in{from{transform:translate(-50%,-140%);opacity:0}}
@keyframes nav-out{to{transform:translate(-50%,-140%);opacity:0}}
@media(prefers-reduced-motion:reduce){.nav-slot .landing-nav.is-floating,.nav-slot .landing-nav.is-leaving{animation:none}}
/* Hero 3D — static base, parallax + scroll-out on floating layer */
.hv-glass .hv-stage{transform:rotateY(-16deg) rotateX(7deg) rotateZ(1.5deg);transition:none}
@media(max-width:900px){.hv-glass .hv-stage{transform:rotateY(-6deg) rotateX(3deg) rotateZ(.5deg)}}
@media(max-width:560px){.hv-glass .hv-stage{transform:none}}
@media(prefers-reduced-motion:reduce){.hv-glass .hv-stage{transform:none}}
.hv-glass .hv-pill,.hv-glass .hv-store,.hv-glass .hv-orb{--mx:inherit;transform:translateZ(var(--z,60px)) translate3d(calc(var(--mx,0)*var(--d,14)*1px + var(--s,0)*var(--ox,0px)),calc(var(--my,0)*var(--d,14)*1px + var(--s,0)*var(--oy,0px)),0);filter:blur(calc(var(--s,0)*12px));opacity:calc(1 - var(--s,0)*1.15);will-change:transform,opacity}
@media(max-width:760px){.hv-glass .hv-pill,.hv-glass .hv-store,.hv-glass .hv-orb{filter:none}}
.hv-glass .hv-p1{--z:60px;--d:22;--ox:-120px;--oy:-60px}
.hv-glass .hv-p2{--z:70px;--d:28;--ox:-140px;--oy:40px}
.hv-glass .hv-p3{--z:60px;--d:18;--ox:120px;--oy:-50px}
.hv-glass .hv-store{--z:90px;--d:34;--ox:130px;--oy:70px;animation:none;translate:0 0}
.hv-glass .hv-orb{--z:40px;--d:10;--ox:0px;--oy:-30px;margin:-46px 0 0 -52px}
.hv-glass .hv-store{animation:hv-bob 6s ease-in-out infinite}
@keyframes hv-bob{50%{translate:0 -8px}}
@media(prefers-reduced-motion:reduce){.hv-glass .hv-store{animation:none}}
/* The workspace already exposes observation status in its navigation. */
.observation-banner{display:none}
/* Hero floating layer — idle float, no cursor tracking */
.hv-glass .hv-p1{animation:hv-bob-a 5.2s ease-in-out infinite}
.hv-glass .hv-p2{animation:hv-bob-b 6.4s ease-in-out -2.1s infinite}
.hv-glass .hv-p3{animation:hv-bob-a 5.8s ease-in-out -1.3s infinite}
.hv-glass .hv-store{animation:hv-bob-b 6.8s ease-in-out -3.4s infinite}
@keyframes hv-bob-a{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes hv-bob-b{0%,100%{translate:0 0}50%{translate:4px -11px}}
@media(prefers-reduced-motion:reduce){.hv-glass .hv-pill,.hv-glass .hv-store{animation:none}}
/* Nav v3: glass as a fading layer, seamless hand-off at the top */
.nav-slot .landing-nav,.nav-slot .landing-nav.is-floating,.nav-slot .landing-nav.is-floating.on-dark{isolation:isolate;background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
.nav-slot .landing-nav:before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(135deg,#ffffffc7,#ffffff99);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 #ffffffcc,inset 0 0 0 1px #ffffff80,0 12px 32px -16px #0d14334d;opacity:0;transition:opacity .35s ease,background .35s}
.nav-slot .landing-nav.is-floating:before{opacity:1}
.nav-slot .landing-nav.is-floating.on-dark:before{background:linear-gradient(135deg,#1a255fb3,#0b123399);box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff1a,0 12px 32px -16px #0006}
.nav-slot .landing-nav.is-floating.slide-in{animation:nav-in .45s cubic-bezier(.2,.7,.2,1) both}
@media(prefers-reduced-motion:reduce){.nav-slot .landing-nav.is-floating.slide-in{animation:none}.nav-slot .landing-nav:before{transition:none}}
@media(min-width:761px){.hv-glass .hv-p2{bottom:-12%}}
/* Statement reveal — cheaper paints */
.statement .sw{will-change:auto;filter:blur(calc((1 - var(--p))*6px))}
.statement .sw.sw-on{filter:none;transform:none;opacity:1;color:var(--ink)}
/* Hero 3D — performance: no live blur filters inside the 3D stage */
.hv3d .hv-layer,.hv3d .hv-pill,.hv3d .hv-store,.hv3d .hv-orb{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.hv-glass .hv-layer{background:linear-gradient(150deg,#ffffffd9,#ffffffa6)}
.hv-glass .hv-back2{background:linear-gradient(150deg,#ffffff80,#ffffff4d)}
.hv-glass .hv-back1{background:linear-gradient(150deg,#ffffffa6,#ffffff66)}
.hv-glass .hv-main>div:not(.hv-orb){background-color:#ffffffd9}
.hv-blobs{filter:none}
.hv-blobs i{opacity:1;will-change:transform}
.hv-blobs i:nth-child(1){background:radial-gradient(closest-side,#5b7cffbf,#5b7cff00)}
.hv-blobs i:nth-child(2){background:radial-gradient(closest-side,#a78bfab3,#a78bfa00)}
.hv-blobs i:nth-child(3){background:radial-gradient(closest-side,#5eead499,#5eead400)}
.hv-glass .hv-orb{animation:none}
.hv3d.hv-off *,.hv3d.hv-off{animation-play-state:paused!important}
/* Nav v4: blur on the nav itself (pseudo-element backdrops don't sample the page) */
.nav-slot .landing-nav:before{display:none}
.nav-slot .landing-nav{background-color:#ffffff00;-webkit-backdrop-filter:blur(0) saturate(100%);backdrop-filter:blur(0) saturate(100%);box-shadow:0 0 0 0 #0d143300;transition:background-color .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease,box-shadow .35s ease}
.nav-slot .landing-nav.is-floating{background-color:#ffffffa6;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 1px 0 #ffffffcc,inset 0 0 0 1px #ffffff80,0 12px 32px -16px #0d14334d}
.nav-slot .landing-nav.is-floating.on-dark{background-color:#141d52a6;box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff1a,0 12px 32px -16px #0006}
.nav-slot .landing-nav.is-floating.on-dark{-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%)}
/* Patterns v2 — capability section */
.dark{background:radial-gradient(50% 60% at 85% 10%,#2b3fae99 0,transparent 70%),radial-gradient(40% 50% at 0 100%,#1a2878aa 0,transparent 70%),var(--navy)}
.pt-head{max-width:760px;margin-bottom:36px}
.pt-head h2{margin:0 0 14px}
.pt-head p{margin:0;font-size:17px;line-height:1.6;color:#aab3d6}
.pattern-tag{margin-bottom:0}
.pt-flow{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:22px 0 6px}
.pt-flow span{font-size:11.5px;font-weight:600;color:#c9d3ff;background:#ffffff0f;box-shadow:inset 0 0 0 1px #ffffff14;padding:5px 9px;border-radius:8px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.pt-flow span.rep{color:#fff;background:#3d5cff59;box-shadow:inset 0 0 0 1px #7d95ff66}
.pt-flow i{width:12px;height:1.5px;background:#5d6aa3;position:relative}
.pt-flow i:after{content:"";position:absolute;right:-1px;top:-2.5px;width:5px;height:5px;border-top:1.5px solid #5d6aa3;border-right:1.5px solid #5d6aa3;transform:rotate(45deg)}
.cycle{margin-top:18px;padding:28px;border-radius:24px;background:linear-gradient(180deg,#ffffff0f,#ffffff05);box-shadow:inset 0 1px 0 #ffffff14}
.cycle-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.cycle-head h3{margin:0;font-size:24px;color:#fff;letter-spacing:-.02em}
.cycle-cta{display:inline-flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;border-radius:100px;background:#4169ff;color:#fff;font-size:14.5px;font-weight:600;text-decoration:none;box-shadow:0 12px 28px -12px #4169ffb3,inset 0 1px 0 #ffffff33;transition:background .2s,transform .2s}
.cycle-cta:hover{background:#5a7dff;transform:translateY(-1px)}
.cycle-cta svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cycle-cta:hover svg:last-child{transform:translateX(3px)}
.cycle-cta .cc-shop{fill:#fff;stroke:none;width:15px;height:15px}
.cycle-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;counter-reset:none}
.cycle-steps li{position:relative;padding:18px 20px;border-radius:16px;background:#ffffff08}
.cycle-steps li:not(:last-child):after{content:"";position:absolute;right:-9px;top:50%;width:6px;height:6px;border-top:1.5px solid #7d95ff;border-right:1.5px solid #7d95ff;transform:translateY(-50%) rotate(45deg);z-index:1}
.cycle-steps i{display:block;font-style:normal;font-size:12px;font-weight:600;color:#7d95ff;font-variant-numeric:tabular-nums}
.cycle-steps b{display:block;margin:8px 0 4px;font-size:18px;color:#fff}
.cycle-steps span{font-size:13.5px;line-height:1.5;color:#aab3d6}
@media(max-width:1150px){.cycle-steps{grid-template-columns:1fr 1fr}.cycle-steps li:nth-child(2):after{display:none}}
@media(max-width:560px){.cycle{padding:22px 18px}.cycle-steps{grid-template-columns:1fr}.cycle-steps li:after{display:none}.cycle-cta{width:100%;justify-content:center}}
.pt-flow{flex-wrap:nowrap;gap:5px;overflow:hidden}
.pt-flow span{font-size:11px;padding:4px 7px;white-space:nowrap;flex-shrink:0}
.pt-flow i{width:9px;flex-shrink:0}
/* Patterns v3 — cleaner */
.pt-head{max-width:none;display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:end;margin-bottom:44px}
.pt-head h2{margin:0;font-size:clamp(32px,3.6vw,48px);line-height:1.08;letter-spacing:-.035em}
.pt-head h2 em{font-style:normal;color:#8fa6ff}
.pt-head p{margin:0 0 22px;font-size:16px;line-height:1.65;color:#aab3d6}
.pt-path{margin:auto 0 0;padding-top:16px;font-size:12.5px;color:#6f7aa6;display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:linear-gradient(90deg,#ffffff1a,#ffffff00) top/100% 1px no-repeat}
.pt-path i{font-style:normal;color:#4d5888}
.pt-path b{color:#c7d2ff;font-weight:600}
@media(max-width:1150px){.pt-head{grid-template-columns:1fr;gap:18px}}
@media(max-width:560px){.cycle-cta{width:100%;justify-content:center}}
/* Patterns v4 — accents, journey nodes, motion */
.pt-head>h2{grid-column:1}
.pt-head{grid-template-areas:"eb eb" "h p"}
.pt-eyebrow{grid-area:eb;justify-self:start;margin-bottom:-26px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#8fa6ff}
.pt-head h2{grid-area:h}.pt-head>div{grid-area:p}








/* timeline fill on view */
@media(max-width:1150px){.pt-head{grid-template-areas:"eb" "h" "p"}.pt-eyebrow{margin-bottom:0}}
@media(min-width:1151px){.pt-head{grid-template-areas:"eb p" "h p";row-gap:14px}.pt-eyebrow{margin:0;align-self:end}.pt-head>div{align-self:end}}
#patterns.dark{padding-bottom:96px}@media(max-width:760px){#patterns.dark{padding-bottom:72px}}


.installation-support{display:flex;align-items:center;gap:28px;background:#101114;color:#fff;border-radius:24px;padding:24px 32px;margin:16px 0 24px}.installation-support img{width:112px;height:auto;flex-shrink:0}.installation-support h2{font-size:19px;font-weight:550;letter-spacing:-.3px;color:#fff;margin:0;flex:1}.installation-support-button{display:inline-flex;align-items:center;justify-content:center;gap:14px;background:#fff;color:#101114;border-radius:12px;padding:13px 18px;text-decoration:none;font-size:14px;font-weight:650;white-space:nowrap;transition:background .15s}.installation-support-button:hover{background:#e9ecf3}.installation-support-button:focus-visible{outline:3px solid #8ba3ff;outline-offset:4px}@media(max-width:650px){.installation-support{flex-wrap:wrap;padding:24px;gap:18px}.installation-support h2{flex-basis:calc(100% - 140px)}.installation-support-button{width:100%}}
.observed-heading{display:flex;justify-content:space-between;align-items:center;gap:16px}.observed-heading h2{margin:0}.observed-heading p{font-size:13px;color:var(--muted);margin:6px 0 0}.observed-glyph{color:#8793b3}.observed-glyph svg{width:26px;height:26px}.observed-summary{margin:24px 0 20px}.observed-eyebrow{font-size:11px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#8390aa}.observed-summary h3{font-size:20px;letter-spacing:-.4px;line-height:1.35;margin:9px 0}.observed-summary p{font-size:14px;color:var(--muted);line-height:1.65;margin:0;max-width:560px}.observed-expectations{display:grid;gap:16px;margin:22px 0}.observed-expectations>div{display:flex;align-items:center;gap:12px}.observed-expectations svg{width:19px;height:19px;flex-shrink:0;color:#7f8aa4}.observed-expectations strong{display:block;font-size:13px;font-weight:600}.observed-expectations small{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.5}.observed-bottom{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;padding-top:18px;margin-top:22px;border-top:1px solid #edf0f6}.observed-bottom p{font-size:11px;color:#8c96ab;margin:0}.observed-bottom .link-button{font-size:12px;font-weight:600;padding:0;white-space:nowrap}
.product-waiting{padding:30px 32px;border-radius:26px}.product-waiting-head{display:flex;align-items:flex-start;gap:20px;max-width:820px}.product-waiting-icon{color:#7583a5;padding-top:7px}.product-waiting-icon svg{width:32px;height:32px}.product-waiting h2{font-size:24px;letter-spacing:-.5px;margin:8px 0 10px}.product-waiting-head p{font-size:14px;line-height:1.65;color:var(--muted);margin:0}.product-waiting-features{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:26px 0}.product-waiting-features svg{width:20px;height:20px;color:#8894ae;display:block;margin-bottom:10px}.product-waiting-features strong{font-size:14px;font-weight:600}.product-waiting-features p{font-size:13px;line-height:1.5;color:var(--muted);margin:6px 0 0}.product-waiting-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:20px;border-top:1px solid #edf0f6}.product-waiting-footer>span{font-size:12px;color:#8590a7}.product-no-results p{color:var(--muted);font-size:14px}@media(max-width:600px){.product-waiting{padding:24px}.product-waiting h2{font-size:21px}.product-waiting-features{grid-template-columns:1fr;gap:18px}.product-waiting-features>div{position:relative;padding-left:32px}.product-waiting-features svg{position:absolute;left:0;top:0}.product-waiting-footer{align-items:flex-start;flex-direction:column}}
.experiment-overview{padding:30px 32px}.experiment-head{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}.experiment-head h2{font-size:26px;letter-spacing:-.6px;margin:8px 0 10px}.experiment-head p{font-size:14px;line-height:1.65;color:var(--muted);max-width:660px;margin:0}.experiment-state{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;white-space:nowrap;padding:7px 0;color:#8490a5}.experiment-state i{width:7px;height:7px;background:#a3acbb;border-radius:50%}.experiment-state.is-active{color:#268260}.experiment-state.is-active i{background:#268260}.experiment-allocation{margin-top:26px}.experiment-allocation-heading{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;font-size:13px}.experiment-allocation-heading small{color:var(--muted);font-size:12px}.experiment-split{display:flex;gap:4px;height:10px;border-radius:5px;overflow:hidden}.experiment-split .control{background:#d9dfec}.experiment-split .treatment{background:#4966fa}.experiment-split-labels{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--muted)}.experiment-split-labels span{display:flex;align-items:center;gap:7px}.experiment-split-labels i,.experiment-cohort-head h2 span{width:7px;height:7px;border-radius:50%;background:#c4cede}.experiment-split-labels span:last-child i{background:#4966fa}.experiment-split-labels b{color:var(--ink)}.experiment-cohorts{margin:18px 0}.experiment-cohort-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.experiment-cohort-head h2{display:flex;align-items:center;gap:9px;font-size:18px;margin:0}.experiment-cohort-head small{font-size:12px;color:var(--muted)}.experiment-cohort.treatment .experiment-cohort-head h2 span{background:#4966fa}.experiment-session-count{display:flex;align-items:baseline;gap:12px;margin:22px 0}.experiment-session-count strong{font-size:38px;font-weight:650;letter-spacing:-1px;line-height:1}.experiment-session-count span{font-size:13px;color:var(--muted)}.experiment-metrics{display:grid;gap:14px;margin:0}.experiment-metrics>div{display:flex;align-items:center;justify-content:space-between;font-size:13px}.experiment-metrics dt{color:var(--muted)}.experiment-metrics dd{margin:0;font-size:16px;font-weight:600}.experiment-metrics dd small{font-size:12px;font-weight:400;color:var(--muted)}.experiment-empty-note{font-size:12px;color:#909ab0;margin:20px 0 0}.experiment-readiness-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.experiment-readiness-head h2{margin:0;font-size:21px}.experiment-readiness-head p{font-size:13px;color:var(--muted);margin:7px 0 0}.experiment-readiness-count{font-size:12px;color:#7b88a3;white-space:nowrap}.experiment-checks{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:1fr 1fr;gap:20px 36px}.experiment-checks li{display:flex;gap:12px;align-items:center}.experiment-check-icon svg{width:18px;height:18px;color:#929caf;display:block}.experiment-checks .passed svg{color:#248461}.experiment-checks strong{display:block;font-size:13px;font-weight:550}.experiment-checks small{display:block;font-size:12px;color:var(--muted);margin-top:4px;line-height:1.4}.experiment-checks em{font-size:11px;font-style:normal;color:#96a0b3;margin-left:auto}.experiment-checks .passed em{color:#248461}.experiment-readiness-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;border-top:1px solid #edf0f6}.experiment-readiness-footer p{font-size:12px;line-height:1.6;color:var(--muted);margin:0;max-width:580px}.experiment-readiness-footer button{flex-shrink:0}@media(max-width:700px){.experiment-head,.experiment-readiness-head,.experiment-readiness-footer{align-items:flex-start;flex-direction:column;gap:12px}.experiment-checks{grid-template-columns:1fr}.experiment-allocation-heading{flex-direction:column;gap:6px}.experiment-cohort-head{flex-wrap:wrap}.experiment-overview{padding:24px}.experiment-head h2{font-size:23px}}
.friction-waiting-categories{display:flex;flex-wrap:wrap;gap:12px 22px;margin:24px 0 18px;font-size:13px;color:#8792aa}.friction-waiting-categories span:before{content:'';display:inline-block;width:5px;height:5px;background:#bcc6db;border-radius:50%;margin:0 8px 2px 0}.friction-waiting-note{font-size:12px;line-height:1.6;color:#8d97ad;margin:0;padding-top:18px;border-top:1px solid #edf0f6}
/* Patterns v5 — calmer glow, crisper cards, signal motion */
.pt-eyebrow{color:#8f9bc7}
.pt-head>div p{margin:0 0 18px;font-size:15.5px}
.pt-head .cycle-cta{border-radius:12px;padding:12px 18px 12px 15px}
/* travelling signal along the timeline */
@keyframes pt-signal{0%{left:0;opacity:0}4%{opacity:1}14%{left:-1px}25%,39%{left:calc(25% + 6px)}50%,64%{left:calc(50% + 13px)}75%,90%{left:calc(75% + 20px);opacity:1}97%{opacity:0}100%{left:calc(75% + 20px);opacity:0}}
@keyframes pt-step{0%,20%{opacity:1}28%,100%{opacity:.5}}
/* mobile: horizontal snap cards */
#patterns.dark{border-radius:0 0 36px 36px;overflow:hidden}@media(max-width:560px){#patterns.dark{border-radius:0 0 26px 26px}}

/* Storefront design: compact preview entry with a clear next action. */
.store-design{padding:28px!important}.store-design-header{display:flex;align-items:center;gap:16px}.store-design-glyph{display:flex;align-items:center;justify-content:center;color:#5267ed;flex-shrink:0;width:48px;height:48px;border-radius:14px;background:#f0f3ff}.store-design-glyph svg{width:25px;height:25px}.store-design-copy{flex:1;min-width:0}.store-design-label{font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:#8893ad;font-weight:600}.store-design-copy h2{font-size:20px;margin:5px 0 6px;letter-spacing:-.4px}.store-design-domain{font-size:12px!important;color:#8a94ab;margin:0!important;overflow-wrap:anywhere}.store-design-status{font-size:11px;color:#667490;white-space:nowrap}.store-design-status:before{content:'';display:inline-block;width:5px;height:5px;background:#8799d8;border-radius:50%;margin-right:7px;vertical-align:middle}.store-design-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;padding-top:20px;border-top:1px solid #eff1f7}.store-design-footer p{font-size:13px;line-height:1.6;color:var(--muted);margin:0;max-width:530px}.store-design-footer .secondary{font-size:13px;white-space:nowrap;padding:12px 16px;border-radius:11px}.store-design-footer .secondary span{margin-left:8px}.store-design.has-capture .store-design-image{margin-top:22px}@media(max-width:700px){.store-design{padding:22px!important}.store-design-header{flex-wrap:wrap}.store-design-status{width:100%;padding-left:64px}.store-design-footer{align-items:flex-start;flex-direction:column;gap:16px}.store-design-copy h2{font-size:18px}}

.report-summary-title{display:flex;align-items:center;gap:16px}.report-baseline-loader{display:inline-flex;flex-shrink:0;color:#a5b1df}.report-baseline-loader svg{width:28px;height:28px}@media(max-width:600px){.report-summary-title{gap:12px}.report-baseline-loader svg{width:23px;height:23px}}

.context-product-image{width:100%;height:100%;object-fit:contain}.context-gallery{display:flex;gap:10px;justify-content:center;margin-top:12px}.context-detail{font-size:13px;color:#8993a8}.context-quantity{display:flex;gap:16px;align-items:center;font-size:12px;margin:18px 0}.context-quantity span{padding:8px 12px;background:#f5f6f9;border-radius:6px}.context-buy{padding:12px;text-align:center;font-size:13px;border:1px solid #e5e8ef;border-radius:8px;margin:8px 0 24px}.context-accordions{display:grid;gap:0;margin-top:24px;font-size:12px;color:#73809b}.context-accordions span{padding:14px 0;border-bottom:1px solid #eff1f6}.context-comparison{background:white;border-radius:16px;padding:24px;max-height:100%;overflow:auto;width:100%}.context-comparison-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.context-comparison-grid p{font-size:12px;line-height:1.5;color:#8390a9}.context-comparison-grid h4{font-size:14px}.context-comparison-grid a{font-size:12px}.pv-canvas[data-device=mobile] .context-comparison{border-radius:0}.pv-canvas[data-device=mobile] .context-comparison-grid{grid-template-columns:1fr}.sp-controls{flex-wrap:wrap}.context-comparison .cmp-img{width:100%;height:140px;object-fit:contain}

.context-price{font-size:17px;font-weight:600;margin:12px 0}.context-options small{font-size:11px;color:#8390a9}.context-options p{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 12px}.context-options span{padding:5px 8px;background:#f3f5f9;border-radius:5px;font-size:11px}

.settings-preview .sp-canvas[data-device=mobile]{overflow:auto;align-items:flex-start}.settings-preview .sp-canvas[data-device=mobile] .pv-frame{max-width:none}

/* Audit 2026-09-29 — press feedback, hit areas, hover gating */
@media(hover:none){.nav-shop:hover,.nav-shop:focus-visible{transform:none}.nav-shop:hover:before,.nav-shop:focus-visible:before{transform:translateY(-50%) scale(1);opacity:0}}
a:active,button:active,summary:active{opacity:.65;transition:opacity 80ms linear}
.nav-shop:active,.cta:active,.primary:active{transform:scale(.97)}
@media(max-width:760px){
 .landing-footer a,.hero-link,.pilot-connect>summary{min-height:44px;display:inline-flex;align-items:center}
 .landing-footer .lf-col a{padding-block:11px}
 .landing-footer .lf-col{gap:0}
 .pf-next a{min-height:44px;display:inline-flex;align-items:center}}
.nav-slot .landing-nav.is-floating{background:#fffffff0}
.nav-slot .landing-nav.is-floating.on-dark{background:#0b1233f0}

/* Audit 2026-09-29 — one CTA system on the landing.
   "Install on Shopify" shipped in five fills (#0b0f1c, #3d63ff, #4169ff,
   #f4544b twice) and four radii. #f4544b is 3.38:1 with white and is also
   the error colour. The dark pill is now the single primary. */
#login .cta,#login .button.primary,#login .lf-cta,#login .cycle-cta{background:#0b0f1c;color:#fff;border-color:#0b0f1c;border-radius:100px;box-shadow:0 8px 20px -10px #0b0f1c99}
#login .cta:hover,#login .button.primary:hover,#login .lf-cta:hover,#login .cycle-cta:hover{background:#1b2440;border-color:#1b2440}
#login .cta,#login .button.primary,#login .lf-cta,#login .cycle-cta{min-height:48px;padding-inline:26px}
/* "Get started" is a jump link inside a section, not a second primary. */
#login .cta.small{background:transparent;color:var(--blue-ink);border:1.5px solid #3d63ff66;box-shadow:none;min-height:44px}
#login .cta.small:hover{background:var(--tint);border-color:#3d63ff;color:var(--blue-ink)}
/* Desktop nav and footer links were 21-23px tall. */
.landing-nav .landing-links a{min-height:44px;display:inline-flex;align-items:center}
.landing-footer .lf-col a{min-height:36px;display:inline-flex;align-items:center}
/* Collapsed flow cards reserved the full open height: ~341px of empty white
   in each of the three closed cards. */

/* Audit 2026-09-29 — mobile navigation.
   Below 760px the four nav links were display:none with no replacement, on an
   11068px page: no way back to a section short of scrolling ~6000px. */
.nav-toggle{display:none;width:44px;height:44px;margin-left:auto;align-items:center;justify-content:center;border:0;border-radius:12px;background:transparent;color:var(--ink)}
.nav-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.nav-toggle:hover{background:#0d14330d}
@media(max-width:760px){
 .landing-nav{justify-content:space-between;flex-wrap:wrap;gap:0}
 .nav-toggle{display:inline-flex}
 .nav-shop{margin-left:8px}
 .landing-links{display:none;order:3;width:100%;flex-direction:column;gap:0;margin:0;padding-top:6px}
 .landing-nav.nav-open .landing-links{display:flex}
 .landing-links a{min-height:48px;display:flex;align-items:center;padding:0 6px;border-top:1px solid #0d143314;font-weight:500}}
@media(min-width:761px){.nav-toggle{display:none}}

/* Sticky bottom CTA — the nearest target for a thumb, and the only one
   still reachable after the hero scrolls away. */
.mobile-cta{display:none}
@media(max-width:760px){
 .mobile-cta{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;flex-direction:column;align-items:stretch;gap:2px;
  padding:11px 14px calc(9px + env(safe-area-inset-bottom));
  background:#fffffff2;-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
  box-shadow:0 -1px 0 #0d14331f,0 -18px 40px -26px #0d143366;
  transform:translateY(110%);transition:transform .26s cubic-bezier(0,0,.2,1)}
 .mobile-cta.is-in{transform:none}
 .mobile-cta .nav-shop{margin:0;justify-content:center;gap:11px;min-height:54px;width:100%;padding:0 22px 0 10px;font-size:16px;border-radius:100px;
  box-shadow:0 10px 24px -12px #0b0f1ccc,inset 0 1px 0 #ffffff1f}
 .mobile-cta .ns-icon{width:34px;height:34px;background:#ffffff1f}
 .mobile-cta .ns-icon svg{width:19px;height:19px}
 .mobile-cta .nav-shop:active{transform:scale(.985)}
 .mobile-cta-sub{margin:0;text-align:center;font-size:12.5px;color:var(--ink-3);min-height:30px;display:flex;align-items:center;justify-content:center;gap:5px}
 .mobile-cta-sub a{color:var(--link);font-weight:600;text-decoration:none;padding:6px 2px}
 .mobile-cta-sub a:hover{text-decoration:underline;text-underline-offset:3px}
 .landing-footer{padding-bottom:96px}}
@media(prefers-reduced-motion:reduce){.mobile-cta{transition:opacity 150ms linear;transform:none;opacity:0}.mobile-cta.is-in{opacity:1}}

/* Audit 2026-09-29 — link and label blue on tinted surfaces.
   #3d63ff is 4.16:1 on --tint and 4.42:1 on --bg. It stays the button fill
   (a fill only needs 3:1); text uses --link (#2c4fe6, 5.5-6.2:1). */
#login a:not(.cta):not(.nav-shop):not(.button):not(.lf-cta):not(.cycle-cta):not(.logo):not(.plan-cta){color:var(--link)}
#login .eyebrow,#login .pt-head .eyebrow{color:var(--link)}
/* Inline text links need a non-colour affordance. */
#login .pf-next a,#login .hero-link{text-decoration:underline;text-underline-offset:3px}
/* 24px minimum on pointer targets that are not inside a sentence. */
#login .hero-link,#login .pilot-connect>summary{min-height:44px;display:inline-flex;align-items:center}

/* Mobile nav row: logo | Install | menu, then links as a full-width panel. */
@media(max-width:760px){
 .landing-nav{align-items:center;padding:8px 10px 8px 12px;gap:8px}
 .landing-nav .logo{order:1;margin-right:auto}
 .landing-nav .nav-shop{order:2;margin:0;padding:0 14px 0 6px;font-size:13px;gap:6px}
 .landing-nav .nav-shop .ns-icon{width:28px;height:28px}
 .nav-toggle{order:3;margin:0;flex:0 0 44px}
 .landing-links{order:4}}
/* Under 360px the label is clipped rather than removed: display:none would
   leave the link with no accessible name. */
@media(max-width:359px){
 .landing-nav .nav-shop .ns-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .landing-nav .nav-shop{padding:0 6px;min-width:44px;justify-content:center}}

/* Audit 2026-09-29 — "sample data" said at the source, not in an 11px footnote.
   The page carried ~14 figures formatted to live-data precision and admitted
   they were illustrative only in the footer, after the reader had finished. */
.sample-flag{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:13px;color:var(--ink-3)}
.sample-flag span,.sample-chip{display:inline-flex;align-items:center;padding:4px 9px;border-radius:100px;background:var(--tint);color:var(--blue-ink);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.flow-caption .sample-chip{margin-right:8px}

/* Pilot / pricing band */
.pilot-band{padding:8px 0 16px}
.pilot-card{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;padding:44px 48px;border-radius:28px;background:var(--panel);box-shadow:0 1px 2px #0d143308,0 24px 50px -30px #0d14331f}
.pilot-copy h2{margin:8px 0 12px}
.pilot-copy>p{font-size:16px;max-width:42ch}
.pilot-copy .cta{margin-top:22px}
.pilot-note{margin-top:14px;font-size:13px;color:var(--ink-3)}
.pilot-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pilot-list li{display:grid;gap:4px;padding:18px 20px;border-radius:16px;background:var(--soft)}
.pilot-list b{font-size:14px;font-weight:650;color:var(--ink)}
.pilot-list span{font-size:14px;line-height:1.55;color:var(--ink-2)}
@media(max-width:900px){.pilot-card{grid-template-columns:1fr;gap:28px;padding:32px 26px}}
.pf-ask{font-weight:600}

/* The sample-data flag rides with the hero visual, not as a third grid child. */
.hero-visual-wrap{position:relative;min-width:0}
.hero-visual-wrap .sample-flag{margin:0 0 4px}
@media(max-width:1150px){.hero-visual-wrap{max-width:640px}}

/* Audit 2026-09-29 — dark surfaces need their own text tokens.
   Darkening --ink-3/--ink-4 for the light page dropped the navy footer to
   3.47:1; routing landing links through --link dropped it to 3.08:1. */
.landing-footer{--ink-2:#d6ddf0;--ink-3:#aeb8d0;--ink-4:#aeb8d0;--link:#a9beff}
#login .landing-footer a:not(.cta):not(.nav-shop):not(.button):not(.lf-cta):not(.cycle-cta):not(.logo){color:var(--link)}
.landing-footer .lf-col h4{color:#aeb8d0}
.landing-footer .lf-meta,.landing-footer .lf-bottom p{color:#aeb8d0}
/* Eyebrows inside feature cards were still #3d63ff (4.42:1 on --bg). */
#login .eyebrow,#login [class*=mini] .eyebrow{color:var(--link)}
/* On the navy footer the dark pill has no edge (1.05:1 against #0a0e1c): invert it. */
#login .landing-footer .lf-cta{background:#fff;color:#0a0e1c;border-color:#fff;box-shadow:0 8px 20px -12px #000}
#login .landing-footer .lf-cta:hover{background:#e6eaf7;border-color:#e6eaf7;color:#0a0e1c}



/* ============================================================
   Friction patterns — four static cards become one demo.
   The same four shapes were told three times on this page; this is
   the one place they earn the space, so it is the one place that
   lets the reader drive.
   ============================================================ */





















/* pt-journey was built for a 260px card; in the tab panel it needs a real rail
   and even spacing. Accent colours are gone — a step is hot or it is not, and
   the tabs already carry the category. */









/* ============================================================
   First week — replaces "Up and running in minutes".
   Connect / Check tracking / Discover were three self-evident
   steps. What a merchant actually asks is when something useful
   shows up, which was buried in an FAQ answer.
   ============================================================ */
.week-band{padding-bottom:44px}









/* The flow row is a fixed 470px, so a collapsed card reserved the full open
   height and showed ~340px of nothing. A one-line teaser gives the column
   something to read and tells the reader what opening it will give them. */
.flow-teaser{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink-3);
 max-width:26ch;transition:opacity .3s,color .4s}
.flow li.is-open .flow-teaser{opacity:0;pointer-events:none}
.flow li:not(.is-open):hover .flow-teaser{color:var(--ink-2)}
@media(max-width:760px){.flow-teaser{display:none}}



/* The resting angle is flat under 560px, but hv-in still swings the stage
   in from rotateY(-28deg) rotateX(12deg) — a bigger rotation than the one
   that was removed, over 10-12px monospace, on the smallest screens.
   Phones get the same entry without the rotation. */
@media(max-width:560px){
 .hv-stage{animation-name:hv-in-flat}
 @keyframes hv-in-flat{from{opacity:0;transform:translateY(18px)}}}

/* ---- Floating nav over the dark section ----------------------------
   .on-dark repainted the logo and the links but not the menu button I
   added, so it stayed --ink on navy: invisible. The bar itself sat at
   #0b1233f0 against a #0a1030 section, so it had no edge either. */
.landing-nav.on-dark .nav-toggle{color:#fff}
.landing-nav.on-dark .nav-toggle:hover{background:#ffffff1f}
.landing-nav.on-dark .nav-toggle:focus-visible{outline-color:#a9beff}
.nav-slot .landing-nav.is-floating.on-dark{
 background:#18225af2;
 box-shadow:inset 0 1px 0 #ffffff33,inset 0 0 0 1px #ffffff26,0 16px 36px -18px #00000080}
@media(max-width:760px){
 .landing-nav.on-dark .landing-links a{border-top-color:#ffffff24}
 .landing-nav.on-dark .landing-links a{color:#e6ebff}}
/* #login a{color:var(--link)} (1,0,0) outranks any .landing-nav.on-dark rule,
   so the dark nav overrides the token instead of fighting the selector. */
.landing-nav.on-dark{--link:#d3dcff;--ink-2:#e6ebff}

/* ---- Day seven: the real report -----------------------------------
   Everything else on this page is drawn. One real screenshot does more
   for trust than three illustrated cards, because it proves the thing
   exists. Framed and faded at the foot so it reads as a longer page. */
.proof-band{padding-top:8px}





/* ============================================================
   Pricing — three levels that mirror what the code actually gates.
   Observation is what analyze() already does. Insight adds the work
   that is deeper but still private (product signals, PDF, previews).
   Assist is the one real switch in the system: interventions_enabled,
   the point where something reaches a shopper and an experiment runs.
   ============================================================ */
.price-band{padding-bottom:12px}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;padding:32px 30px 30px;border-radius:24px;
 background:var(--panel);box-shadow:0 1px 2px #0d14330a,0 20px 44px -30px #0d143333}
.plan-head{padding-bottom:22px;border-bottom:1px solid var(--line)}
.plan-name{margin:0;font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--link)}
.plan-price{margin:12px 0 0;display:flex;align-items:baseline;gap:8px}
.plan-price b{font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.plan-price span{font-size:14px;font-weight:500;color:var(--ink-3)}
.plan-for{margin:14px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2);max-width:32ch}
.plan-list{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px;flex:1;align-content:start}
.plan-list li{display:grid;grid-template-columns:20px 1fr;gap:11px;align-items:start;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.plan-list b{font-weight:650;color:var(--ink)}
.plan-list svg{width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--link);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.plan-cta{margin-top:26px;display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;
 border-radius:100px;background:var(--soft);color:var(--ink);font-size:15px;font-weight:650;text-decoration:none;
 transition:background .15s,color .15s}
.plan-cta:hover{background:var(--tint);color:var(--blue-ink)}
.plan-note{margin:12px 0 0;min-height:3em;font-size:12.5px;line-height:1.5;color:var(--ink-3);text-align:center;text-wrap:balance}

/* The level most stores land on carries the weight. */
.plan-lead{padding-top:32px;box-shadow:0 1px 2px #0d14330a,0 30px 60px -32px #1f3cc44d,inset 0 0 0 2px var(--blue)}
.plan-tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;
 padding:6px 15px;border-radius:100px;background:var(--blue);color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.04em;
 box-shadow:0 8px 20px -10px #3d63ffcc}
.plan-lead .plan-cta{background:#0b0f1c;color:#fff}
.plan-lead .plan-cta:hover{background:#1b2440;color:#fff}

/* Assist is where Hesio acts, so it gets the surface the page uses
   everywhere else for "what Hesio does". */
.plan-dark{--ink:#f4f6ff;--ink-2:#c3cdf0;--ink-3:#9aa8dd;--line:#ffffff24;--link:#9db4ff;
 background:linear-gradient(157deg,#1b2557,#0b1233 78%);
 box-shadow:inset 0 1px 0 #ffffff26,inset 0 0 0 1px #ffffff14,0 26px 56px -30px #0a1030a6}
.plan-dark .plan-cta{background:#fff;color:#0b0f1c}
.plan-dark .plan-cta:hover{background:#e6eaf7;color:#0b0f1c}
.plans-foot{margin:22px 0 0;font-size:13px;color:var(--ink-3)}

@media(max-width:980px){
 .plans{grid-template-columns:1fr;gap:16px;max-width:560px;margin-inline:auto}
 .plan-lead{margin-top:14px}}
@media(max-width:560px){.plan{padding:28px 22px 26px}.plan-price b{font-size:38px}}
/* Belt and braces: the plan buttons own their colours. */
#login .plan-cta{color:var(--ink)}
#login .plan-lead .plan-cta,#login .plan-dark .plan-cta{color:#fff}
#login .plan-dark .plan-cta{color:#0b0f1c}

/* ============================================================
   Section reveals.
   The hidden state is only applied once JS has marked the document,
   so with JS off or broken everything is simply visible. One shot,
   short, and movement is dropped entirely for reduced motion —
   a landing page should not make you wait for its own content.
   ============================================================ */
.reveal-on [data-rv]{transition:opacity .18s linear,filter .18s linear,transform .18s linear}

/* =======================================================================
   Features band v2 ("Inside Hesio") + first-week timeline v2
   ======================================================================= */
.feat-band{padding:72px 0 64px}
.feat-head{max-width:none;margin-bottom:40px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
 grid-template-areas:"eb eb" "h facts" "sub facts";column-gap:56px;align-items:start}
.feat-eyebrow,#login .eyebrow{grid-area:eb;display:inline-flex;align-items:center;margin:0 0 16px;
 font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--blue-ink)}
#login .band-head h2 em,#login .faq-aside h2 em{font-style:normal;color:var(--blue)}
.feat-head h2{grid-area:h;max-width:15ch}
.feat-head h2 em{font-style:normal;color:var(--blue)}
.feat-head .band-sub{grid-area:sub;margin-top:16px;max-width:46ch}
.feat-facts{grid-area:facts;list-style:none;margin:6px 0 0;padding:0;display:grid;gap:2px;
 border-top:1px solid var(--line)}
.feat-facts li{display:grid;grid-template-columns:minmax(0,15ch) minmax(0,1fr);gap:18px;align-items:baseline;
 padding:14px 2px;border-bottom:1px solid var(--line)}
.feat-facts b{font-size:13.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.feat-facts span{font-size:13.5px;line-height:1.5;color:var(--ink-3)}

.feature-grid .feature{position:relative;min-height:0}
.feature-grid .feature:not(.feature-wide){display:grid;grid-template-rows:auto 1fr auto;gap:22px;
 padding:26px 26px 28px;align-content:stretch;justify-content:stretch}
.feat-ix{margin:0;display:flex;align-items:center;gap:10px;
 font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.feat-ix span{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;
 border-radius:7px;background:var(--tint);color:var(--blue-ink);font-size:11px;letter-spacing:.02em}
.feature-wide .feat-ix{margin-bottom:16px}
.feat-txt>h3{margin:0 0 8px}
.feat-txt>p{margin:0}
.feat-where{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);
 font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--ink-4)}
.feature-wide .feat-where{margin-top:18px}
.feat-foot{margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:18px 28px;padding:20px 26px;border-radius:18px;background:var(--tint)}
.feat-foot p{margin:0;max-width:62ch;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.feat-foot .cta.small{flex-shrink:0;background:#fff}
@media(max-width:1000px){
 .feat-head{grid-template-columns:1fr;grid-template-areas:"eb" "h" "sub" "facts";column-gap:0}
 .feat-head h2{max-width:22ch}
 .feat-facts{margin-top:26px}}
@media(max-width:640px){
 .feat-band{padding:52px 0 48px}
 .feat-facts li{grid-template-columns:1fr;gap:4px}
 .feature-grid .feature:not(.feature-wide){grid-template-rows:auto auto auto;gap:18px}
 .feat-foot{padding:18px 20px}}

/* ---- first week ---- */
.week-head{max-width:none;margin-bottom:8px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
 grid-template-areas:"eb eb" "h sub";column-gap:56px;align-items:end}
.week-head .feat-eyebrow{grid-area:eb}
.week-head h2{grid-area:h;max-width:16ch}
.week-head h2 em{font-style:normal;color:var(--blue)}
.week-head .band-sub{grid-area:sub;margin:0 0 4px;max-width:48ch}

















.week-foot{margin:34px 0 0;font-size:13px;color:var(--ink-3)}
.week-foot .sample-chip{margin-right:8px}
/* the meter only grows once the step is revealed */


@media(max-width:1000px){
 .week-head{grid-template-columns:1fr;grid-template-areas:"eb" "h" "sub";align-items:start}
 .week-head h2{max-width:22ch}
 .week-head .band-sub{margin-top:14px}}

.faq-aside{position:sticky;top:104px}
.faq-aside h2{margin:0}
.faq-aside .band-sub{margin-top:14px;max-width:34ch}
.faq-ask{margin:22px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
@media(max-width:900px){.faq-aside{position:static}}

/* ---- photo cards: signal to suggested test ---- */
/* Every card carries its photo. Collapsed cards keep a light scrim so the
   title reads; the open card darkens underneath its copy. */
.flow li:nth-child(1){--art:url(/img/signal-bg.webp);--pos:50% 30%}
.flow li:nth-child(2){--art:url(/img/flow-confidence.webp);--pos:52% 35%}
.flow li:nth-child(3){--art:url(/img/flow-meaning.webp);--pos:54% 35%}
.flow li:nth-child(4){--art:url(/img/flow-test.webp);--pos:46% 40%}
.flow li{--ease:cubic-bezier(.65,.05,.25,1);transition:flex-grow .85s var(--ease),color .4s;
 clip-path:inset(0 round 28px)}
/* Photo with a built-in scrim: the top and bottom darken so the title,
   teaser and number stay readable on any photo. */
.flow li:before{opacity:1;
 background:linear-gradient(180deg,#0a1030e6 0%,#0a1030b3 24%,#0a103040 46%,#0a103000 60%,#0a103073 100%),
 var(--art) var(--pos,center)/auto 100% no-repeat,#0a1030;
 filter:saturate(.9) brightness(.92);transform:scale(1.06);
 transition:transform 1.4s var(--ease),filter .8s var(--ease)}
.flow li:not(.is-open):hover:before{transform:scale(1.02);filter:none}
.flow li.is-open:before{transform:none;filter:none}
/* The open card's darker scrim fades in rather than snapping. */
.flow li:after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
 background:linear-gradient(180deg,#0a1030b3 0%,#0a103033 24%,#0a103099 50%,#0a1030eb 78%,#0a1030 100%);
 transition:opacity .7s var(--ease)}
.flow li.is-open:after{opacity:1}
.flow-title,.flow-teaser,.flow-num{text-shadow:0 1px 12px #0a103080}
.flow-teaser{transition:opacity .35s var(--ease),transform .5s var(--ease),color .4s}
.flow li.is-open .flow-teaser{transform:translateY(-6px)}
/* Open copy arrives in two beats: the evidence card, then the explanation. */
.flow-open,.flow li.is-open .flow-open{opacity:1;transform:none;transition:none}
.flow-open>*{opacity:0;transform:translateY(18px);filter:blur(6px);transition:opacity .2s,transform .2s,filter .2s}
.flow li.is-open .flow-open>*{opacity:1;transform:none;filter:none;
 transition:opacity .6s var(--ease),transform .7s var(--ease),filter .6s var(--ease)}
.flow li.is-open .flow-open>:first-child{transition-delay:.28s}
.flow li.is-open .flow-open>:nth-child(2){transition-delay:.4s}
.flow li .flow-title,.flow li:not(.is-open):hover .flow-title{color:#fff}
.flow-teaser,.flow li:not(.is-open):hover .flow-teaser{color:#ffffffd9}
.flow-num{color:#ffffffb3}
.flow li.is-open .flow-art{background:#0a10308c;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media(max-width:860px){
 .flow li{min-height:360px}
 .flow li .flow-open>*{opacity:1;transform:none;filter:none}
 .flow li:after,.flow li.is-open:after{opacity:1;background:linear-gradient(180deg,#0a1030b3 0%,#0a103033 30%,#0a1030b3 58%,#0a1030f2 100%)}
 .flow li:not(.is-open) .flow-art{background:#0a10308c;box-shadow:inset 0 0 0 1px #ffffff14;color:#fff}
 .flow li:not(.is-open) :is(.flow-body h4,.fa-quote,.fa-events b,.fa-meter-top b){color:#fff}
 .flow li:not(.is-open) :is(.flow-body p,.fa-events span,.fa-meter-top){color:#c9d3ff}
 .flow li:not(.is-open) :is(.flow-body small,.fa-quote span,.fa-meter-foot,.fa-split span){color:#8f9ed8}
 .flow li:not(.is-open) .flow-conf{background:#ffffff1f;color:#fff}
 .flow li:not(.is-open) :is(.fa-bar,.fa-split-bar i){background:#ffffff1a;color:#c9d3ff}}
@media(prefers-reduced-motion:reduce){.flow li:before,.flow li:after,.flow-open>*,.flow-teaser{transform:none!important;filter:none!important;transition:none!important}}

/* ---- photo cards: feature grid ---- */
.feature-grid .feature.has-art{grid-template-rows:auto auto 1fr}
.feat-photo{margin:0;border-radius:16px;overflow:hidden;aspect-ratio:3/2;background:var(--soft)}
.feat-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.22,.8,.22,1)}
.feature:hover .feat-photo img{transform:scale(1.03)}
@media(prefers-reduced-motion:reduce){.feat-photo img{transition:none}}

/* ---- icon polish in the app shell ---- */
.ib-icon,#store-caret svg{width:17px;height:17px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ib-icon circle{fill:currentColor;stroke:none}
#store-caret{display:inline-flex;align-items:center}
#store-caret svg{width:14px;height:14px}
.mi-arrow{width:14px;height:14px;margin-left:6px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.7}

/* ---- breadcrumb arrow in the feature cards ---- */
.fw-arrow{width:13px;height:13px;margin:0 7px;vertical-align:-1px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;opacity:.6}

/* ---- excluded plan features ---- */
.plan-list li.no{color:var(--ink-4)}
.plan-list li.no svg{stroke:var(--ink-4);opacity:.75}
.plan-dark .plan-list li.no{color:#8493c9}
.plan-dark .plan-list li.no svg{stroke:#8493c9}

/* ---- friction pattern tab transitions ---- */



@keyframes ptx-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}






/* ============================================================
   Friction patterns: flat and plain. Four solid tabs across the
   top, then two solid cards: the session on white, the reading
   on brand blue. No glass, no outlines, no glow.
   ============================================================ */
#patterns.dark{background:var(--navy)}
.pz{display:grid;gap:12px}
.pz-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pz-tabs [role=tab]{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;grid-template-areas:"n p" "c c" "b b";row-gap:6px;column-gap:12px;
 padding:20px 22px 22px;border:0;border-radius:20px;background:var(--navy-2);font:inherit;text-align:left;color:#fff;cursor:pointer;
 transition:background-color .25s ease,color .25s ease}
.pz-tabs [role=tab]:hover{background:#1a2458}
.pz-tabs [aria-selected=true],.pz-tabs [aria-selected=true]:hover{background:#fff}
.pz-tabs [role=tab]:focus-visible{outline:2px solid #8fa6ff;outline-offset:3px}
.pz-name{grid-area:n;align-self:center;font-size:17px;font-weight:650;letter-spacing:-.015em;color:#fff;transition:color .25s}
.pz-pct{grid-area:p;font-size:30px;font-weight:750;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums;color:#fff;transition:color .25s}
.pz-pct small{font-size:15px;font-weight:650;margin-left:1px}
.pz-count{grid-area:c;font-size:13px;color:#9aa6d6;font-variant-numeric:tabular-nums;transition:color .25s}
.pz-bar{grid-area:b;height:6px;margin-top:10px;border-radius:6px;background:#ffffff1a;overflow:hidden;transition:background-color .25s}
.pz-bar i{display:block;height:100%;width:var(--share);border-radius:inherit;background:#6f86ff;transition:background-color .25s}
[aria-selected=true] .pz-name{color:var(--ink)}
[aria-selected=true] .pz-pct{color:var(--blue)}
[aria-selected=true] .pz-count{color:var(--ink-4)}
[aria-selected=true] .pz-bar{background:#e8ecf7}
[aria-selected=true] .pz-bar i{background:var(--blue)}

.pz-stage{position:relative}
.pz-panels [role=tabpanel]{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;outline:none}
/* Every panel sits in the same cell, so the stage is always as tall as the tallest one and switching never moves the page. */
.pz-panels{display:grid}
.pz-panels>[role=tabpanel]{grid-area:1/1}
.pz-panels>[role=tabpanel][hidden]{display:grid!important;visibility:hidden}
.pz-session,.pz-read{border-radius:24px;padding:36px 38px}
.pz-session{background:#fff;color:var(--ink)}
.pz-read{display:flex;flex-direction:column;background:var(--blue);color:#fff}
.pz-k{display:flex;align-items:center;gap:8px;margin:0 0 20px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.pz-k em{margin-left:auto;font-style:normal;font-weight:500;letter-spacing:0;text-transform:none;font-size:13px;color:var(--ink-4)}
.pz-read .pz-k{color:#dbe3ff}
.pz-live{width:8px;height:8px;border-radius:50%;background:var(--green)}
.pz-events{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pz-events li{display:grid;grid-template-columns:44px 1fr;column-gap:14px;align-items:center;padding:11px 14px;border-radius:12px;background:var(--soft);font-size:15px;color:var(--ink-2)}
.pz-events time{font-size:12.5px;font-weight:600;color:var(--ink-4);font-variant-numeric:tabular-nums}
.pz-events li.hot{background:#e6ecff}
.pz-events li.hot span{color:var(--blue-ink);font-weight:650}
.pz-events li.hot span:after{content:"repeat";margin-left:10px;padding:3px 9px;border-radius:100px;background:var(--blue);color:#fff;font-size:11px;font-weight:650;vertical-align:1px}
.pz-events li.out{background:#fdecea}
.pz-events li.out span{color:#b3261e;font-weight:650}
/* Hesio's own step: a moving gradient edge while it reads the session, then what it showed and the sale. */
@property --pz-a{syntax:"<angle>";inherits:false;initial-value:0deg}
.pz-events li.think{padding:9px 12px;border:2px solid transparent;
 background:linear-gradient(#f4f6ff,#f4f6ff) padding-box,conic-gradient(from var(--pz-a),#ff4d6d,#ff9f1c,#ffd60a,#2ec27e,#22d3ee,#3d63ff,#8b5cf6,#ff4d6d) border-box;
 animation:pz-spin 2.4s linear infinite}
.pz-events li.think span{display:grid;gap:3px}
.pz-events li.think b{font-weight:650;color:var(--ink)}
.pz-events li.think b{display:inline-flex;align-items:center;gap:7px}
.pz-events li.think b:before{content:"";flex:none;width:21px;height:21px;
 background:linear-gradient(135deg,#ec4899,#8b5cf6 45%,#3d63ff 75%,#06b6d4);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2.5c.5 4.3 2.7 6.5 7 7-4.3.5-6.5 2.7-7 7-.5-4.3-2.7-6.5-7-7 4.3-.5 6.5-2.7 7-7Zm8.5 11c.3 2.3 1.2 3.2 3.5 3.5-2.3.3-3.2 1.2-3.5 3.5-.3-2.3-1.2-3.2-3.5-3.5 2.3-.3 3.2-1.2 3.5-3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2.5c.5 4.3 2.7 6.5 7 7-4.3.5-6.5 2.7-7 7-.5-4.3-2.7-6.5-7-7 4.3-.5 6.5-2.7 7-7Zm8.5 11c.3 2.3 1.2 3.2 3.5 3.5-2.3.3-3.2 1.2-3.5 3.5-.3-2.3-1.2-3.2-3.5-3.5 2.3-.3 3.2-1.2 3.5-3.5Z'/%3E%3C/svg%3E") center/contain no-repeat;animation:pz-spark 1.6s ease-in-out infinite}
@keyframes pz-spark{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.18) rotate(12deg)}}
.pz-events li.think b:after{content:"";display:inline-block;width:1.2em;text-align:left;animation:pz-dots 1.2s steps(4) infinite}
.pz-events li.think small{font-size:13px;line-height:1.45;color:var(--ink-4)}
.pz-events li.show{background:#e6ecff}
.pz-events li.show span{color:var(--blue-ink);font-weight:650}
.pz-events li.buy{background:var(--green-bg)}
.pz-events li.buy span{color:#12733a;font-weight:650}
@keyframes pz-spin{to{--pz-a:360deg}}
@keyframes pz-dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.pz-play .pz-events li.think{animation:pz-in .45s cubic-bezier(.22,.8,.22,1) both,pz-spin 2.4s linear infinite;animation-delay:calc(var(--e)*.28s + .1s),0s}
.pz-meaning{margin:20px 0 0;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.pz-read h3{margin:0;font-size:clamp(30px,3vw,44px);font-weight:750;line-height:1.08;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.pz-test{margin-top:auto;padding-top:32px}
.pz-test .pz-k{margin-bottom:10px}
.pz-test p:not(.pz-k){margin:0 0 18px;font-size:15.5px;line-height:1.6;color:#fff}
.pz-chip{display:inline-flex;align-items:center;padding:9px 16px;border-radius:100px;background:#fff;font-size:13px;font-weight:650;color:var(--blue-ink)}
.pz-foot{margin:26px 0 0;font-size:12.5px;color:#9aa6d6}
.pz-foot .sample-chip{margin-right:8px;background:#ffffff14;color:#c3cfff}

/* The replay: events land one by one, then the reading follows. */
.pz-play .pz-events li{animation:pz-in .45s cubic-bezier(.22,.8,.22,1) both;animation-delay:calc(var(--e)*.28s + .1s)}
.pz-play .pz-meaning{animation:pz-in .45s cubic-bezier(.22,.8,.22,1) 3.3s both}
.pz-play .pz-read>*{animation:pz-in .55s cubic-bezier(.22,.8,.22,1) both}
.pz-play .pz-read>.pz-k{animation-delay:.15s}
.pz-play .pz-read h3{animation-delay:.25s}
.pz-play .pz-test{animation-delay:.4s}
@keyframes pz-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.pz-play *,.pz-events li.think,.pz-events li.think b:after,.pz-events li.think b:before{animation:none!important}}

@media(max-width:1080px){
 .pz-tabs [role=tab]{padding:16px 16px 18px}
 .pz-name{font-size:15.5px}
 .pz-pct{font-size:24px}
 .pz-session,.pz-read{padding:28px}}
@media(max-width:760px){
 .pz-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .pz-panels [role=tabpanel]{grid-template-columns:1fr;gap:8px}
 .pz-session,.pz-read{padding:24px 20px;border-radius:20px}
 .pz-events li{font-size:14px}
 .pz-k em{display:none}
 .pz-name{align-self:start}}

/* ============================================================
   The first week: one curve. Sessions climb, crossing the line
   where a pattern is allowed a name.
   ============================================================ */
.wk2{margin-top:44px;padding:40px 40px 34px;border-radius:30px;background:var(--panel);
 box-shadow:0 1px 2px #0d14330a,0 30px 70px -40px #0d143338,inset 0 0 0 1px #0d14330d}
.wk2-chart{position:relative;height:250px;margin:0 0 30px}
.wk2-chart svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wk2-th{stroke:#9aa6c8;stroke-width:1.2;stroke-dasharray:4 6;vector-effect:non-scaling-stroke}
.wk2-line{fill:none;stroke:var(--blue);stroke-width:3;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wk2-more{fill:none;stroke:var(--blue);stroke-opacity:.35;stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wk2-th-label{position:absolute;right:0;top:var(--y);transform:translateY(calc(-100% - 8px));font-size:12px;font-weight:600;color:var(--ink-4)}
.wk2-axis{position:absolute;left:0;top:0;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
.wk2-node{position:absolute;left:var(--x);top:var(--y);width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
 background:var(--panel);box-shadow:inset 0 0 0 3px var(--blue),0 0 0 6px #3d63ff14}
.wk2-node b{position:absolute;left:50%;bottom:calc(100% + 12px);transform:translateX(-50%);
 font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--ink);font-variant-numeric:tabular-nums}
.wk2-node:first-child b,.wk2-node[style*="--n:0"] b{left:0;transform:none}
.wk2-end{width:18px;height:18px;margin:-9px 0 0 -9px;background:var(--blue);box-shadow:0 0 0 7px #3d63ff26,0 0 24px #3d63ff80}
.wk2-end b{font-size:34px;color:var(--blue)}
.wk2-steps{list-style:none;margin:0;padding:22px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.wk2-steps li{padding-right:28px;display:flex;flex-direction:column;align-items:flex-start}
.wk2-steps li .wk2-body{flex:1}
.wk2-when{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--blue)}
.wk2-steps h3{margin:0 0 8px;font-size:18px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
.wk2-body{margin:0 0 16px;font-size:14.5px;line-height:1.6;color:var(--ink-3)}
.wk2-state{display:inline-flex;align-items:center;gap:7px;margin:0;padding:5px 11px;border-radius:100px;font-size:12px;font-weight:650;background:var(--soft);color:var(--ink-3)}
.wk2-state:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.wk2-state.wk2-s1{background:var(--tint);color:var(--blue-ink)}
.wk2-state.wk2-s2{background:var(--green-bg);color:#11703a}

/* Drawn once when seen. Without JS or with reduced motion it simply is there. */
.wk2:not(.wk2-go) svg{clip-path:inset(0 100% 0 0)}
.wk2:not(.wk2-go) :is(.wk2-more,.wk2-node,.wk2-th-label){opacity:0}
.wk2-go svg{clip-path:inset(0 0 0 0);transition:clip-path 1.9s cubic-bezier(.45,.05,.25,1)}
.wk2-go .wk2-more{transition:opacity .8s 1.9s}
.wk2-go .wk2-th-label{transition:opacity .6s 1.2s}
.wk2-go .wk2-node{animation:wk2-pop .5s cubic-bezier(.3,1.6,.5,1) both;animation-delay:calc(var(--n)*.42s + .15s)}
@keyframes wk2-pop{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
html:not(.reveal-on) .wk2 svg{clip-path:none}html:not(.reveal-on) .wk2 :is(.wk2-area,.wk2-more,.wk2-node,.wk2-th-label){opacity:1}
@media(prefers-reduced-motion:reduce){.wk2 svg{clip-path:none!important;transition:none!important}.wk2 :is(.wk2-area,.wk2-more,.wk2-node,.wk2-th-label){opacity:1!important;animation:none!important;transition:none!important}}

@media(max-width:900px){
 .wk2{padding:26px 22px 24px;border-radius:24px}
 .wk2-chart{height:200px}
 .wk2-node b{font-size:20px}.wk2-end b{font-size:26px}
 .wk2-steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:26px}}
@media(max-width:560px){
 .wk2-chart{height:170px}
 .wk2-th-label{font-size:11px}
 .wk2-steps{grid-template-columns:1fr}
 .wk2-steps li{padding-right:0}}

/* ============================================================
   Day seven: the report in a window, panned part by part.
   ============================================================ */
.rp{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:56px;align-items:center}
.rp-copy h2{margin:0 0 14px;font-size:clamp(32px,3.6vw,48px);line-height:1.06;letter-spacing:-.035em}
.rp-copy h2 em{font-style:normal;color:var(--blue)}
.rp-copy .band-sub{margin:0 0 26px}
.rp-points{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.rp-points button{display:grid;grid-template-columns:34px 1fr;gap:12px;width:100%;padding:16px 18px;border:0;border-radius:18px;background:transparent;
 font:inherit;text-align:left;color:var(--ink-3);cursor:pointer;transition:background .3s,box-shadow .3s}
.rp-points button:hover{background:#ffffff99}
.rp-points [aria-pressed=true]{background:var(--panel);box-shadow:0 1px 2px #0d14330a,0 16px 34px -24px #0d143340}
.rp-points button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.rp-n{font-size:13px;font-weight:700;color:var(--ink-4);font-variant-numeric:tabular-nums;padding-top:2px;transition:color .3s}
[aria-pressed=true] .rp-n{color:var(--blue)}
.rp-t b{display:block;font-size:16.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink-2);transition:color .3s}
[aria-pressed=true] .rp-t b{color:var(--ink)}
.rp-t span{display:block;height:0;overflow:hidden;font-size:14px;line-height:1.55;color:var(--ink-3);opacity:0;
 transition:height .55s cubic-bezier(.65,0,.35,1),margin .55s cubic-bezier(.65,0,.35,1),opacity .25s}
[aria-pressed=true] .rp-t span{height:var(--rp-d,3.1em);opacity:1;margin-top:6px;transition-delay:0s,0s,.2s}

.rp-stage{position:relative;margin:0;padding:44px 44px 0;border-radius:32px;overflow:hidden;isolation:isolate;
 background:radial-gradient(70% 60% at 85% 0%,#4c6bff,transparent 70%),radial-gradient(60% 60% at 0% 100%,#2a3a9e,transparent 70%),linear-gradient(160deg,#16215e,#0a1030)}
.rp-stage:before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(#ffffff14 1px,transparent 1.4px) 0 0/22px 22px;
 -webkit-mask:linear-gradient(180deg,#000,transparent 70%);mask:linear-gradient(180deg,#000,transparent 70%)}
.rp-window{border-radius:16px 16px 0 0;overflow:hidden;background:#f5f7fb;box-shadow:0 0 0 1px #ffffff33,0 40px 80px -30px #000c}
.rp-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 16px;background:#fff;border-bottom:1px solid var(--line)}
.rp-bar i{width:10px;height:10px;border-radius:50%;background:#e3e8f2}
.rp-bar span{margin:0 auto;padding:4px 14px;border-radius:8px;background:var(--soft);font-size:11.5px;color:var(--ink-4);transform:translateX(-22px)}
.rp-view{position:relative;aspect-ratio:1/.64;overflow:hidden}
.rp-pan{position:relative;transition:transform 1.1s cubic-bezier(.65,0,.25,1)}
.rp-img{display:block;width:100%;height:auto}
.rp-spot{position:absolute;border-radius:14px;box-shadow:0 0 0 2px var(--blue),0 0 0 7px #3d63ff29;opacity:0;transform:scale(.985);
 transition:opacity .4s,transform .5s cubic-bezier(.22,.8,.22,1);pointer-events:none}
.rp-spot em{position:absolute;left:12px;top:0;transform:translateY(-55%);padding:4px 10px;border-radius:100px;background:var(--blue);color:#fff;
 font-size:11px;font-style:normal;font-weight:700;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 18px -8px #3d63ffcc}
.rp-stage figcaption{position:absolute;left:44px;top:10px;z-index:2;display:flex;align-items:center;gap:8px;font-size:12px;color:#c9d3ff}
.rp-stage figcaption .sample-chip{background:#ffffff1f;color:#dfe5ff}
.rp-stage[data-active="0"] .rp-pan{transform:translateY(var(--pan0))}
.rp-stage[data-active="1"] .rp-pan{transform:translateY(var(--pan1))}
.rp-stage[data-active="2"] .rp-pan{transform:translateY(var(--pan2))}
.rp-stage[data-active="3"] .rp-pan{transform:translateY(var(--pan3))}
.rp-stage[data-active="0"] .rp-spot[data-spot="0"],.rp-stage[data-active="1"] .rp-spot[data-spot="1"],.rp-stage[data-active="2"] .rp-spot[data-spot="2"],.rp-stage[data-active="3"] .rp-spot[data-spot="3"]{opacity:1;transform:none;transition-delay:.55s}
@media(prefers-reduced-motion:reduce){.rp-pan,.rp-spot,.rp-t span{transition:none!important}}
@media(max-width:1000px){
 .rp{grid-template-columns:1fr;gap:32px}
 .rp-stage{padding:22px 22px 0;border-radius:24px}
 .rp-stage figcaption{left:22px}}
@media(max-width:560px){
 .rp-stage{margin-inline:-4px}
 .rp-spot em{font-size:10px}
 .rp-stage figcaption{font-size:11px}}
.rp-stage figcaption{white-space:nowrap}


/* ---- closing call to action with photo ---- */
.cta-band.cta-photo{position:relative;isolation:isolate;overflow:hidden;display:block;min-height:440px;padding:76px 64px;
 background:#0a1030;box-shadow:0 40px 90px -50px #0a1030cc}
.cta-photo:before{content:"";position:absolute;inset:0;z-index:-2;background:url(/img/cta-photo.webp) 78% 40%/cover no-repeat;
 transform:scale(1.04);transition:transform 1.6s cubic-bezier(.22,.8,.22,1)}
.cta-photo:hover:before{transform:none}
.cta-photo:after{content:"";position:absolute;inset:0;z-index:-1;
 background:linear-gradient(90deg,#0a1030 0%,#0a1030f0 30%,#0a1030a6 52%,#0a103026 74%,#0a103000 100%),
 radial-gradient(60% 90% at 0% 100%,#3d5cff59,transparent 70%)}
.cb-copy{max-width:540px}
.cb-eyebrow{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9fb2ff}
.cta-photo h2{margin:0;max-width:none;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.035em;color:#fff}
.cta-photo .cb-copy>p:not(.cb-eyebrow){margin:18px 0 0;font-size:16.5px;line-height:1.6;color:#c9d3ff}
.cb-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:32px}
#login .cta-photo .cta{background:#fff;color:#0b0f1c;border-color:#fff;box-shadow:0 14px 30px -14px #000000b3}
#login .cta-photo .cta:hover{background:#e8edff;border-color:#e8edff}
#login .cta-photo .cb-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#fff!important;text-decoration:none}
.cb-link svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.cb-link:hover svg{transform:translateX(3px)}
.cb-ticks{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:34px 0 0;padding:22px 0 0;border-top:1px solid #ffffff1f}
.cb-ticks li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:#aab3d6}
.cb-ticks li:before{content:"";width:16px;height:16px;border-radius:50%;flex-shrink:0;
 background:#7cf0b026 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2 7 10.5l4.5-5' fill='none' stroke='%237cf0b0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
@media(max-width:860px){.cta-band.cta-photo{min-height:0;padding:260px 28px 34px}
 .cta-photo:before{bottom:auto;height:320px;background-position:72% 30%}
 .cta-photo:after{background:linear-gradient(180deg,#0a103000 0,#0a103000 150px,#0a1030 290px)}}
@media(prefers-reduced-motion:reduce){.cta-photo:before{transform:none;transition:none}}
@media(min-width:1151px){.pt-head{grid-template-rows:1fr auto}}

/* The reveal rule sets its own transition list and outranks .flow li, which
   dropped flex-grow from it: the cards jumped between widths. Keep both. */
.reveal-on .flow>li[data-rv]{transition:flex-grow .85s var(--ease),opacity .18s linear,filter .18s linear,transform .18s linear}
/* Feature cards: headings reserve two lines and the breadcrumb sits on the
   card floor, so the three cards read as one row. */
.feature.has-art .feat-txt{display:flex;flex-direction:column;height:100%}
.feature.has-art .feat-txt>p:not(.feat-where){flex:1}
@media(min-width:761px){.feature.has-art .feat-txt>h3{line-height:1.3;min-height:2.6em}}
@media(min-width:1101px){.flow-title{white-space:nowrap;font-size:clamp(22px,1.95vw,30px)}.flow li:nth-child(4) .flow-title{white-space:normal}}
@media(max-width:1100px){.flow-title{white-space:normal}}

/* ============================================================
   Cookie consent: a quiet card bottom-left, a settings drawer
   inside it, and a footer link to bring it back.
   ============================================================ */
.merchant-app .landing-footer .lf-col .lf-link{padding:0;border:0;background:none;font:inherit;font-size:15px;font-weight:500;color:#d9deee;cursor:pointer;transition:color .2s}
.merchant-app .landing-footer .lf-col .lf-link:hover{color:#7ea2ff}
@media(max-width:760px){.landing-footer .lf-col .lf-link{padding-block:11px}}
.ck{position:fixed;left:24px;bottom:24px;z-index:60;width:min(440px,calc(100vw - 32px));
 opacity:0;transform:translateY(16px);transition:opacity .35s ease,transform .45s cubic-bezier(.22,.8,.22,1)}
.ck.is-in{opacity:1;transform:none}
.ck-card{padding:22px;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 1px 2px #0d14330f,0 24px 60px -18px #0d143359}
.ck-main{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.ck-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--soft)}
.ck-icon svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ck-icon svg path+path{stroke-width:2.6}
.ck h2{margin:2px 0 6px;font-size:17px;font-weight:700;letter-spacing:-.015em}
.ck p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-3)}
.ck-prefs{display:grid;gap:4px;margin:18px 0 0;padding:6px;border-radius:16px;background:var(--soft)}
.ck-prefs[hidden]{display:none!important}
.ck-row{position:relative;display:grid;grid-template-columns:1fr 44px;gap:14px;align-items:center;padding:12px 12px;border-radius:12px;cursor:pointer}
.ck-row:has(input:disabled){cursor:default}
.ck-row b{display:block;font-size:14px;font-weight:650}
.ck-row small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink-4)}
.ck-row input{position:absolute;opacity:0;width:1px;height:1px}
.ck-row i{position:relative;width:44px;height:26px;border-radius:100px;background:#cfd6e6;transition:background-color .2s}
.ck-row i:after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0d143333;transition:transform .25s cubic-bezier(.22,.8,.22,1)}
.ck-row input:checked+i{background:var(--blue)}
.ck-row input:checked+i:after{transform:translateX(18px)}
.ck-row input:disabled+i{opacity:.55}
.ck-row input:focus-visible+i{outline:2px solid var(--blue);outline-offset:2px}
.ck-actions{display:flex;gap:8px;margin-top:18px}
.ck-btn{flex:1;min-height:44px;padding:0 14px;border:0;border-radius:12px;font:inherit;font-size:14px;font-weight:650;cursor:pointer;transition:background-color .2s,color .2s}
.ck-ghost{flex:0 0 auto;background:none;color:var(--ink-3)}
.ck-ghost:hover{color:var(--ink);background:var(--soft)}
.ck-soft{background:var(--soft);color:var(--ink)}
.ck-soft:hover{background:#e3e8f2}
.ck-solid{background:var(--ink);color:#fff}
.ck-solid:hover{background:#1c2550}
.ck-btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media(max-width:760px){
 .ck{left:16px;right:16px;bottom:16px;width:auto}
 .ck-card{padding:18px}
 .ck-actions{flex-wrap:wrap}
 .ck-ghost{order:3;flex:1 1 100%;min-height:40px}
 .ck-open .mobile-cta{visibility:hidden}}
@media(prefers-reduced-motion:reduce){.ck{transition:opacity .2s linear;transform:none}}

/* Floating nav: lighter glass so the blur behind it actually shows. */
.nav-slot .landing-nav.is-floating{background:#ffffff73;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
.nav-slot .landing-nav.is-floating.on-dark{background:#18225a80;-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}

/* Settings: Plan & billing */
.plan-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.plan-option{display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:20px;border-radius:16px;background:var(--soft)}
.plan-option.current{background:#fff;box-shadow:inset 0 0 0 2px var(--blue)}
.plan-option h4{margin:0 0 6px;font-size:15px;font-weight:650}
.plan-option-price{margin:0 0 10px;display:flex;align-items:baseline;gap:4px}
.plan-option-price b{font-size:26px;font-weight:750;letter-spacing:-.03em}
.plan-option-price span{font-size:13px;color:var(--ink-4)}
.plan-option p:not(.plan-option-price){margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-3)}
.plan-option button{width:100%}
@media(max-width:900px){.plan-picker{grid-template-columns:1fr}}
/* Design audit fixes (2026-09-29) */
.skip-link{box-shadow:none}.skip-link:focus-visible{box-shadow:0 12px 32px -12px #0d143366}
@media(max-width:700px){
 .merchant-app aside nav{margin-left:-14px;margin-right:-14px;padding-left:14px;padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
 .baseline-top{flex-direction:column;gap:12px}
 .experiment-readiness-footer button{flex-shrink:1;max-width:100%;white-space:normal;text-align:left}
 .sp-head{flex-wrap:wrap;row-gap:8px}.sp-actions{flex-wrap:wrap;gap:8px 12px}
}
/* History window and report email */
.period-picker{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin:0 0 18px}
.period-picker .seg button.locked{display:inline-flex;align-items:center;gap:5px;color:var(--ink-4)}
.period-picker .seg button.locked svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.period-picker .seg button.locked:hover{color:var(--ink-2)}
.period-note{font-size:12px;color:var(--ink-3)}
.report-mail{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.report-mail button{flex-shrink:0}
.period-picker .seg button{white-space:nowrap}
@media(max-width:560px){.period-picker .seg{display:flex;width:100%;flex-wrap:nowrap}.period-picker .seg button{flex:1;justify-content:center;padding:7px 6px}}