/*
 * CTRL REALITY site UX layer, r1 (owner order 2026-10-16). Loaded after
 * site-r2.css (and compare-r1.css) on every page, with assets/site-ux-r1.js.
 * Adds: designed light theme (dark stays the default), skip link, scroll
 * progress, header search and theme buttons, mobile menu polish and tap
 * targets, search dialog, cookie banner, floating contact and back to top,
 * copy buttons, accessible FAQ accordion, form error and success states,
 * confirmation modals, last updated line, fade-in on scroll, hover and
 * focus states, and a print stylesheet.
 * File name carries a revision (-r1) because /assets is served immutable.
 */

/* ------------------------------ light theme ------------------------------ */
html{color-scheme:dark}
html[data-theme="light"]{
  color-scheme:light;
  --cr-bg:#f4f2ee; --cr-bg-well:#ebe8e2;
  --cr-surface-1:#ffffff; --cr-surface-2:#f7f5f1; --cr-surface-3:#e4e0d9;
  --cr-text:#0c0c0f; --cr-text-secondary:#45454d; --cr-text-tertiary:#5f5f68;
  --cr-line:rgba(12,12,15,.16); --cr-line-hair:rgba(12,12,15,.09);
  --cr-glass:rgba(244,242,238,.82); --cr-hover:rgba(12,12,15,.05);
  --cr-red:#d02e1a; --cr-red-text:#b3281a; --cr-red-button:#d02e1a; --cr-red-pressed:#b3281a;
  --cr-scrim:linear-gradient(180deg, rgba(244,242,238,.6), rgba(244,242,238,.86));
}
html[data-theme="light"] .cr-bg::before{opacity:.34}
html[data-theme="light"] .cr-glow{opacity:.18}
html[data-theme="light"] .btn-solid{background:var(--cr-text);color:#fff;border-color:var(--cr-text)}
html[data-theme="light"] .cr-freereport{background:var(--cr-text);border-color:var(--cr-text);color:#fff}
html[data-theme="light"] .step .rule,
html[data-theme="light"] .founding .dot{background:var(--cr-text)}
html[data-theme="light"] .metric .big,
html[data-theme="light"] .aside .row b,
html[data-theme="light"] .plan.feat .tier,
html[data-theme="light"] .plan li .ck,
html[data-theme="light"] .plan .price.call,
html[data-theme="light"] .founding b,
html[data-theme="light"] .est-s-val,
html[data-theme="light"] .est-g-val,
html[data-theme="light"] .est-range,
html[data-theme="light"] .faq .ic,
html[data-theme="light"] .legal h2,
html[data-theme="light"] .legal a,
html[data-theme="light"] .cmp-table thead th,
html[data-theme="light"] .cmp-table tbody th,
html[data-theme="light"] .cmp-link,
html[data-theme="light"] .cmp-qa strong,
html[data-theme="light"] .ask-ai-toast{color:var(--cr-text)}
html[data-theme="light"] .cmp-table th,html[data-theme="light"] .cmp-table td{border-top-color:var(--cr-line)}
html[data-theme="light"] .plan.feat{border-color:var(--cr-text);background:var(--cr-surface-1)}
html[data-theme="light"] .plan .pill,
html[data-theme="light"] .est-presets button.on{background:var(--cr-text);color:#fff;border-color:var(--cr-text)}
html[data-theme="light"] .est-slider input[type=range]{accent-color:var(--cr-text)}
html[data-theme="light"] .est input[type=number]:focus,
html[data-theme="light"] .field input:focus{border-color:var(--cr-text)}
html[data-theme="light"] .ask-ai-btn{background:rgba(12,12,15,.035)}
html[data-theme="light"] #plan-detail,html[data-theme="light"] #report-success{border-color:var(--cr-text) !important}
html[data-theme="light"] #plan-detail-tier,html[data-theme="light"] #report-success a{color:var(--cr-text) !important}
@media(hover:hover){
  html[data-theme="light"] .btn-ghost:hover,
  html[data-theme="light"] .cr-book:hover,
  html[data-theme="light"] .ask-ai-btn:hover{border-color:var(--cr-text)}
  html[data-theme="light"] .ask-ai-btn:hover{background:rgba(12,12,15,.07)}
  html[data-theme="light"] .sec-book a:hover{color:var(--cr-text);border-color:var(--cr-text)}
}
/* The illustrative dashboard is a picture of the dark app: it stays dark in both themes. */
html[data-theme="light"] .dash{
  --cr-bg-well:#08080b; --cr-surface-1:#0e0e11; --cr-surface-2:#141419; --cr-surface-3:#1c1c22;
  --cr-text:#ffffff; --cr-text-secondary:#b4b4bb; --cr-text-tertiary:#8a8a93;
  --cr-line:rgba(255,255,255,.12); --cr-line-hair:rgba(255,255,255,.07);
  color:#fff; color-scheme:dark; box-shadow:0 30px 70px rgba(12,12,15,.18);
}
/* The free report flow (assets/free-report-r7.js) injects dark scoped styles; these win in light. */
html[data-theme="light"] #cfr .cfr-back{background:rgba(30,26,22,.42)}
html[data-theme="light"] #cfr .cfr-card{background:rgba(255,255,255,.96);color:#0c0c0f;border-color:rgba(12,12,15,.12);box-shadow:0 30px 80px rgba(12,12,15,.22)}
html[data-theme="light"] #cfr .cfr-ey,html[data-theme="light"] #cfr .cfr-p,html[data-theme="light"] #cfr .cfr-meta,
html[data-theme="light"] #cfr .cfr-msg,html[data-theme="light"] #cfr .cfr-score .b,html[data-theme="light"] #cfr .cfr-gate ul{color:#45454d}
html[data-theme="light"] #cfr label,html[data-theme="light"] #cfr .cfr-note,html[data-theme="light"] #cfr .cfr-score .k,html[data-theme="light"] #cfr .cfr-rank .k{color:#5f5f68}
html[data-theme="light"] #cfr input{background:#f7f5f1;border-color:rgba(12,12,15,.16);color:#0c0c0f}
html[data-theme="light"] #cfr input::placeholder{color:#8a8a93}
html[data-theme="light"] #cfr input:focus{border-color:#0c0c0f}
html[data-theme="light"] #cfr .cfr-btn{background:#0c0c0f;border-color:#0c0c0f;color:#fff}
html[data-theme="light"] #cfr .cfr-btn.cfr-ghost{background:transparent;color:#0c0c0f;border-color:rgba(12,12,15,.28)}
html[data-theme="light"] #cfr .cfr-btn.cfr-ghost:hover{border-color:#0c0c0f}
html[data-theme="light"] #cfr .cfr-x{color:#45454d;border-color:rgba(12,12,15,.16)}
html[data-theme="light"] #cfr .cfr-x:hover{color:#0c0c0f;border-color:#0c0c0f}
html[data-theme="light"] #cfr .cfr-score,html[data-theme="light"] #cfr .cfr-rank,html[data-theme="light"] #cfr .cfr-next{background:#f7f5f1;border-color:rgba(12,12,15,.08)}
html[data-theme="light"] #cfr .cfr-rank .v,html[data-theme="light"] #cfr .cfr-ok,html[data-theme="light"] #cfr .cfr-list li,html[data-theme="light"] #cfr .cfr-cmp{color:#0c0c0f}
html[data-theme="light"] #cfr .cfr-list li,html[data-theme="light"] #cfr .cfr-cmp,html[data-theme="light"] #cfr .cfr-gate{border-color:rgba(12,12,15,.12)}
html[data-theme="light"] #cfr .cfr-tag{background:#0c0c0f;color:#fff}
html[data-theme="light"] #cfr .cfr-spin{border-color:rgba(12,12,15,.15);border-top-color:#0c0c0f}

/* ------------------------- skip link and progress ------------------------ */
.ux-skip{position:fixed;left:12px;top:-80px;z-index:2147483640;background:var(--cr-text);color:var(--cr-bg);padding:12px 18px;border-radius:10px;font-weight:600;font-size:15px;transition:top .15s var(--cr-ease)}
.ux-skip:focus,.ux-skip:focus-visible{top:12px}
main:focus{outline:none}
.ux-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:2147480500;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:var(--cr-red);will-change:transform}

/* --------------------------- header additions ---------------------------- */
.site-header{transition:box-shadow .2s var(--cr-ease),background .2s var(--cr-ease)}
.site-header.ux-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.28)}
html[data-theme="light"] .site-header.ux-scrolled{box-shadow:0 10px 30px rgba(12,12,15,.08)}
.ux-icon-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border-radius:11px;border:1px solid var(--cr-line);background:transparent;color:var(--cr-text);cursor:pointer;transition:border-color .18s var(--cr-ease),background .18s var(--cr-ease),transform .18s var(--cr-ease)}
.ux-icon-btn svg{width:19px;height:19px;display:block}
.ux-theme-btn .ux-sun{display:none}
html[data-theme="light"] .ux-theme-btn .ux-sun{display:block}
html[data-theme="light"] .ux-theme-btn .ux-moon{display:none}
@media(hover:hover){.ux-icon-btn:hover{border-color:var(--cr-text);background:var(--cr-hover)}}
.site-nav a{position:relative}
.site-nav a[aria-current="page"]{color:var(--cr-text)}
.site-nav a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--cr-red)}
.ux-menu-row{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 12px;border:0;border-radius:10px;background:transparent;color:var(--cr-text-secondary);font-family:var(--font);font-size:15px;text-align:left;cursor:pointer}
.ux-menu-row svg{width:18px;height:18px;flex:none}
@media(hover:hover){.ux-menu-row:hover{background:var(--cr-hover);color:var(--cr-text)}}
.cr-menu-panel a[aria-current="page"]{color:var(--cr-text);background:var(--cr-hover)}
.cr-menu>summary .bars span{transition:transform .2s var(--cr-ease),opacity .2s var(--cr-ease)}
.cr-menu[open]>summary .bars span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.cr-menu[open]>summary .bars span:nth-child(2){opacity:0}
.cr-menu[open]>summary .bars span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(hover:hover){.cr-menu>summary:hover{border-color:var(--cr-text)}}
.cr-menu-panel{max-height:calc(100vh - 90px);overflow:auto}

/* Phones: brand, search, Book a call and the menu on one line, every target 44 px. */
@media(max-width:767px){
  .site-header-in{padding:10px 12px;gap:6px}
  .cr-head-ctas{gap:6px}
  .cr-head-ctas .ux-theme-btn{display:none}
  .cr-book,.cr-freereport{min-height:44px}
}
@media(max-width:420px){
  .cr-brand{gap:8px}
  .cr-chev{width:32px;height:32px;padding:6px}
  .cr-word{font-size:12.5px;letter-spacing:.12em}
  .cr-book{padding:0 10px;font-size:13px}
}
@media(max-width:359px){.cr-word{display:none}}
@media(min-width:768px){.cr-menu-panel .ux-menu-row[data-theme-toggle]{display:none}}
/* Tablets: the five-link nav wrapped at 768 to 1023 px, so the menu serves there too. */
@media(min-width:768px) and (max-width:1023px){
  .site-header-in{display:flex}
  .site-nav{display:none}
  .cr-menu{display:block}
  .cr-head-ctas{margin-left:auto}
}
@media(min-width:1024px){.site-header-in{grid-template-columns:auto 1fr auto;gap:24px}.cr-head-ctas .cr-book,.cr-head-ctas .cr-freereport{white-space:nowrap}}
@media(min-width:1024px) and (max-width:1199px){.site-nav{gap:20px}}

/* ------------------------- tap targets on phones ------------------------- */
@media(max-width:767px){
  .fcol{gap:0}
  .fcol a,.fcol-btn{min-height:44px;display:flex;align-items:center}
  .sec-book a{display:inline-flex;align-items:center;min-height:46px}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px}
  .legal ul li>a{display:inline-block;padding:10px 0}
  .ux-copy{min-height:44px}
}
.fcol-btn{background:none;border:0;padding:0;margin:0;text-align:left;font-family:var(--font);font-size:14px;color:var(--cr-text-secondary);cursor:pointer;transition:color .18s var(--cr-ease)}
@media(hover:hover){.fcol-btn:hover{color:var(--cr-text)}}

/* ------------------------- hover, focus, active -------------------------- */
.btn:active,.cr-book:active,.cr-freereport:active,.ux-icon-btn:active,.ux-fab:active,.ux-copy:active{transform:scale(.97)}
.legal a{transition:text-decoration-color .18s var(--cr-ease),color .18s var(--cr-ease)}
@media(hover:hover){
  .legal a:hover{text-decoration-color:var(--cr-red)}
  .crumbs a:hover,.cmp-table td a:hover,.cmp-link:hover,.report-note a:hover{color:var(--cr-text);text-decoration:underline;text-underline-offset:2px}
  .cr-brand:hover .cr-chev{border-color:rgba(255,255,255,.4)}
  .site-footer-bot a:hover{color:var(--cr-text)}
}
.site-footer-bot a{color:var(--cr-text-tertiary);transition:color .18s var(--cr-ease)}

/* ------------------------------ copy button ------------------------------ */
.ux-copy{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border-radius:9px;border:1px solid var(--cr-line);background:transparent;color:var(--cr-text-secondary);font-family:var(--font);font-weight:600;font-size:13px;cursor:pointer;vertical-align:middle;white-space:nowrap;transition:color .18s var(--cr-ease),border-color .18s var(--cr-ease)}
.ux-copy svg{width:14px;height:14px;flex:none}
@media(hover:hover){.ux-copy:hover{color:var(--cr-text);border-color:var(--cr-text)}}
.ux-copy[data-copied]{color:var(--cr-text);border-color:var(--cr-red)}
.ux-foot-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
@media(max-width:767px){
  /* Room under the footer so the fixed back-to-top and contact buttons never sit on its last row. */
  .site-footer-in{padding-bottom:136px}
  .ux-copy{min-height:44px;padding:0 14px}
  .ux-foot-tools a{display:inline-flex;align-items:center;min-height:44px}
  .est-note,.est-disclosure{font-size:13px}
}
p.ux-updated{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;color:var(--cr-text-tertiary);font-size:13.5px;letter-spacing:.02em;margin:0 0 22px}
p.ux-updated time{color:var(--cr-text-secondary)}
/* Without JavaScript the search, theme, copy and cookie buttons would do nothing, so they stay hidden. */
html:not(.ux-js) [data-search-open],html:not(.ux-js) [data-theme-toggle],html:not(.ux-js) [data-copy],html:not(.ux-js) [data-copy-url],html:not(.ux-js) [data-consent-open]{display:none !important}

/* ------------- Google preferred source badge (official EN asset) ------------- */
.ux-prefsrc{display:inline-flex;align-items:center;min-height:44px;margin-top:18px;border-radius:12px;line-height:0;transition:transform .18s var(--cr-ease)}
.ux-prefsrc img{width:169px;height:auto;display:block}
.ux-prefsrc .ux-ps-light{display:none}
html[data-theme="light"] .ux-prefsrc .ux-ps-dark{display:none}
html[data-theme="light"] .ux-prefsrc .ux-ps-light{display:block}
@media(hover:hover){.ux-prefsrc:hover{transform:translateY(-1px)}}
p.ux-prefsrc-row{margin:0 0 22px}
p.ux-prefsrc-row .ux-prefsrc{margin-top:0}
@media print{.ux-prefsrc,.ux-prefsrc-row{display:none !important}}

/* --------------------------------- FAQ ----------------------------------- */
details.ux-faq{border-bottom:1px solid var(--cr-line-hair);interpolate-size:allow-keywords}
details.ux-faq>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 4px;min-height:44px;font-weight:500;font-size:clamp(17px,2vw,21px);line-height:1.35;letter-spacing:-0.01em;color:var(--cr-text);border-radius:8px;transition:color .18s var(--cr-ease)}
details.ux-faq>summary::-webkit-details-marker{display:none}
details.ux-faq>summary .ic{color:var(--cr-text);font-size:22px;line-height:1;flex:none;transition:transform .3s var(--cr-ease)}
details.ux-faq[open]>summary .ic{transform:rotate(45deg)}
@media(hover:hover){details.ux-faq>summary:hover{color:var(--cr-text-secondary)}}
details.ux-faq .ans p{padding:0 4px 24px;margin:0;color:var(--cr-text-secondary);font-size:16px;max-width:70ch}
details.ux-faq::details-content{block-size:0;overflow:clip;transition:block-size .35s var(--cr-ease),content-visibility .35s var(--cr-ease) allow-discrete}
details.ux-faq[open]::details-content{block-size:auto}
.cmp .ux-faq-list{margin:6px 0 18px}
.cmp details.ux-faq>summary{font-size:17px;padding:16px 2px}
.cmp details.ux-faq .ans p{font-size:15.5px;padding:0 2px 18px}

/* --------------------------------- forms --------------------------------- */
.ux-err{display:flex;gap:6px;align-items:flex-start;color:var(--cr-red-text);font-size:13px;line-height:1.45;margin:2px 0 0}
.ux-err::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-top:1px;border-radius:50%;background:var(--cr-red);color:#fff;font-size:11px;font-weight:700}
.field input[aria-invalid="true"]{border-color:var(--cr-red)}
.ux-form-alert{border:1px solid var(--cr-red);background:rgba(255,77,61,.08);border-radius:12px;padding:14px 16px;margin-top:16px;color:var(--cr-text);font-size:15px}
.ux-form-alert p{margin:0 0 10px;color:var(--cr-text)}
.ux-form-alert .ux-alert-actions{display:flex;flex-wrap:wrap;gap:10px}
.ux-form-alert button{min-height:44px;padding:0 18px;border-radius:999px;font-family:var(--font);font-weight:600;font-size:14px;cursor:pointer;border:1px solid var(--cr-line);background:transparent;color:var(--cr-text)}
.ux-form-alert button.ux-primary{background:var(--cr-text);color:var(--cr-bg);border-color:var(--cr-text)}
#report-success:focus{outline:none}
button[aria-busy="true"]{cursor:progress;opacity:.75}

/* ------------------------------ modal dialogs ---------------------------- */
dialog.ux-modal{border:0;padding:0;margin:auto;background:transparent;color:var(--cr-text);max-width:calc(100vw - 32px);width:460px;overflow:visible}
dialog.ux-modal::backdrop{background:rgba(3,3,4,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html[data-theme="light"] dialog.ux-modal::backdrop{background:rgba(30,26,22,.4)}
.ux-modal-card{position:relative;background:var(--cr-surface-1);border:1px solid var(--cr-line);border-radius:16px;padding:28px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.5);font-family:var(--font)}
.ux-modal-card h2{font-weight:300;font-size:26px;line-height:1.15;letter-spacing:-0.02em;margin:0 40px 10px 0;color:var(--cr-text)}
.ux-modal-card p{color:var(--cr-text-secondary);font-size:15.5px;line-height:1.6;margin:0 0 22px}
.ux-modal-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:999px;border:1px solid var(--cr-line);background:transparent;color:var(--cr-text-secondary);font-size:20px;line-height:1;cursor:pointer}
@media(hover:hover){.ux-modal-x:hover{color:var(--cr-text);border-color:var(--cr-text)}}
.ux-modal-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.ux-modal-actions .btn{padding:12px 22px;font-size:15px;min-height:44px}
dialog.ux-modal[open] .ux-modal-card{animation:ux-pop .22s var(--cr-ease)}
@keyframes ux-pop{from{opacity:0;transform:translateY(10px) scale(.98)}}

/* ------------------------------ search dialog ---------------------------- */
dialog.ux-search{border:0;padding:0;margin:clamp(12px,9vh,96px) auto auto;width:min(640px,calc(100vw - 24px));max-width:none;max-height:min(76vh,680px);background:transparent;color:var(--cr-text);overflow:visible}
dialog.ux-search::backdrop{background:rgba(3,3,4,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html[data-theme="light"] dialog.ux-search::backdrop{background:rgba(30,26,22,.36)}
.ux-search-panel{display:flex;flex-direction:column;max-height:min(76vh,680px);background:var(--cr-surface-1);border:1px solid var(--cr-line);border-radius:16px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;font-family:var(--font)}
.ux-search-bar{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 14px;border-bottom:1px solid var(--cr-line-hair)}
.ux-search-bar svg{width:19px;height:19px;flex:none;color:var(--cr-text-tertiary)}
.ux-search-bar input{flex:1;min-width:0;min-height:44px;background:transparent;border:0;color:var(--cr-text);font-family:var(--font);font-size:17px;outline:none}
.ux-search-bar input::-webkit-search-cancel-button{display:none}
.ux-search-bar input::placeholder{color:var(--cr-text-tertiary)}
.ux-search-bar .ux-icon-btn{border-color:transparent}
.ux-search-status{margin:0;padding:10px 16px 0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--cr-text-tertiary)}
.ux-search-res{list-style:none;margin:0;padding:6px;overflow:auto;overscroll-behavior:contain}
.ux-search-res a{display:block;padding:11px 12px;border-radius:10px;color:var(--cr-text);border:1px solid transparent}
.ux-search-res a:focus-visible{box-shadow:none;border-color:var(--cr-red);background:var(--cr-hover)}
@media(hover:hover){.ux-search-res a:hover{background:var(--cr-hover)}}
.ux-search-res .t{display:block;font-weight:600;font-size:15.5px;line-height:1.35}
.ux-search-res .u{display:block;font-size:12px;color:var(--cr-text-tertiary);margin-top:2px}
.ux-search-res .x{display:block;font-size:14px;line-height:1.5;color:var(--cr-text-secondary);margin-top:4px}
.ux-search-res mark{background:rgba(255,77,61,.26);color:inherit;border-radius:3px;padding:0 1px}
.ux-search-empty{padding:18px 16px;color:var(--cr-text-secondary);font-size:14.5px}
.ux-search-foot{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 16px;border-top:1px solid var(--cr-line-hair);font-size:12px;color:var(--cr-text-tertiary)}
.ux-search-foot kbd{font-family:var(--font);font-size:11px;border:1px solid var(--cr-line);border-radius:5px;padding:1px 6px;margin-right:4px;color:var(--cr-text-secondary)}
@media(hover:none){.ux-search-foot{display:none}}
.ux-skel{display:block;height:12px;border-radius:6px;margin:12px 12px;background:linear-gradient(90deg,var(--cr-surface-2) 0%,var(--cr-surface-3) 50%,var(--cr-surface-2) 100%);background-size:200% 100%;animation:ux-shimmer 1.2s linear infinite}
.ux-skel.w2{width:62%}.ux-skel.w3{width:44%}
@keyframes ux-shimmer{from{background-position:200% 0}to{background-position:-200% 0}}
html.ux-lock,html.ux-lock body{overflow:hidden}

/* ------------------------------ cookie banner ---------------------------- */
.ux-consent{position:fixed;left:12px;right:12px;bottom:12px;z-index:2147481000;max-width:720px;margin:0 auto;display:flex;align-items:center;gap:14px;padding:10px 10px 10px 18px;background:var(--cr-surface-1);border:1px solid var(--cr-line);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.45);font-family:var(--font);transition:opacity .2s var(--cr-ease),transform .2s var(--cr-ease)}
.ux-consent[hidden]{display:none}
.ux-consent.ux-wait{opacity:0;transform:translateY(12px);pointer-events:none;visibility:hidden}
.ux-consent p{flex:1;margin:0;font-size:13.5px;line-height:1.45;color:var(--cr-text-secondary)}
.ux-consent a{color:var(--cr-text);text-decoration:underline;text-underline-offset:2px}
.ux-consent .ux-c-short{display:none}
.ux-cbtns{display:flex;gap:8px;flex:none}
.ux-cbtns button{min-height:44px;padding:0 18px;border-radius:10px;font-family:var(--font);font-weight:600;font-size:14px;cursor:pointer;border:1px solid var(--cr-line);background:transparent;color:var(--cr-text)}
.ux-cbtns .ux-c-accept{background:var(--cr-text);color:var(--cr-bg);border-color:var(--cr-text)}
@media(hover:hover){.ux-cbtns .ux-c-decline:hover{border-color:var(--cr-text)}}
@media(max-width:600px){
  .ux-consent{left:8px;right:8px;bottom:8px;gap:8px;padding:8px 8px 8px 12px}
  .ux-consent .ux-c-long{display:none}
  .ux-consent .ux-c-short{display:inline}
  .ux-consent p{font-size:12.5px;line-height:1.35}
  .ux-cbtns{gap:6px}
  .ux-cbtns button{padding:0 12px;font-size:13.5px}
}

/* ------------------------- floating contact, top ------------------------- */
.ux-float{position:fixed;right:16px;bottom:calc(16px + var(--ux-consent-h,0px));z-index:2147480000;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:var(--font);transition:bottom .2s var(--cr-ease)}
.ux-top{width:48px;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:var(--cr-surface-2);border:1px solid var(--cr-line);color:var(--cr-text);cursor:pointer;box-shadow:0 10px 28px rgba(0,0,0,.35);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s var(--cr-ease),transform .2s var(--cr-ease),visibility 0s linear .2s,border-color .18s var(--cr-ease)}
.ux-top.on{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--cr-ease),transform .2s var(--cr-ease),visibility 0s,border-color .18s var(--cr-ease)}
.ux-top svg{width:20px;height:20px}
@media(hover:hover){.ux-top:hover{border-color:var(--cr-text)}}
.ux-fab-wrap{position:relative}
.ux-fab{display:inline-flex;align-items:center;gap:9px;min-height:50px;padding:0 20px 0 16px;border-radius:999px;border:0;background:var(--cr-red-button);color:#fff;font-family:var(--font);font-weight:600;font-size:15px;cursor:pointer;box-shadow:0 14px 34px rgba(208,46,26,.32),0 4px 14px rgba(0,0,0,.3);transition:transform .18s var(--cr-ease),background .18s var(--cr-ease)}
.ux-fab svg{width:20px;height:20px;flex:none}
@media(hover:hover){.ux-fab:hover{transform:translateY(-1px);background:var(--cr-red-pressed)}}
.ux-float-menu{position:absolute;right:0;bottom:calc(100% + 10px);min-width:15.5rem;padding:6px;background:var(--cr-surface-1);border:1px solid var(--cr-line);border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.ux-float-menu[hidden]{display:none}
.ux-float-menu .ux-fm-h{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-text-tertiary);padding:8px 12px 4px}
.ux-float-menu a,.ux-float-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:0 12px;border-radius:10px;border:0;background:transparent;color:var(--cr-text);font-family:var(--font);font-weight:500;font-size:15px;text-align:left;cursor:pointer}
.ux-float-menu svg{width:18px;height:18px;flex:none;color:var(--cr-text-secondary)}
@media(hover:hover){.ux-float-menu a:hover,.ux-float-menu button:hover{background:var(--cr-hover)}}
@media(max-width:767px){
  .ux-float{right:12px;bottom:calc(12px + var(--ux-consent-h,0px))}
  .ux-fab{width:52px;height:52px;min-height:52px;padding:0;justify-content:center}
  .ux-fab .ux-fab-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  /* The contact button waits until the visitor scrolls, so it never sits on the hero call to action. */
  .ux-fab-wrap{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s var(--cr-ease),transform .2s var(--cr-ease),visibility 0s linear .2s}
  .ux-float.ux-scrolled .ux-fab-wrap,.ux-float.ux-open .ux-fab-wrap{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--cr-ease),transform .2s var(--cr-ease),visibility 0s}
}

/* --------------------------- loading animations -------------------------- */
html.ux-js .ux-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--cr-ease),transform .6s var(--cr-ease)}
html.ux-js .ux-reveal.is-in{opacity:1;transform:none}
.cal-wrap.ux-loading{background:linear-gradient(90deg,var(--cr-surface-1) 0%,var(--cr-surface-2) 50%,var(--cr-surface-1) 100%);background-size:200% 100%;animation:ux-shimmer 1.4s linear infinite}
@media(prefers-reduced-motion:reduce){
  html.ux-js .ux-reveal{opacity:1;transform:none;transition:none}
  .ux-skel,.cal-wrap.ux-loading{animation:none}
  dialog.ux-modal[open] .ux-modal-card{animation:none}
  details.ux-faq::details-content{transition:none}
}

/* --------------------------------- print --------------------------------- */
@media print{
  @page{margin:16mm 14mm}
  html,body{background:#fff !important;color:#000 !important}
  *,*::before,*::after{box-shadow:none !important;text-shadow:none !important;animation:none !important;transition:none !important}
  .cr-bg,body>canvas,.site-header,.ux-skip,.ux-progress,.ux-float,.ux-consent,dialog,.ask-ai-sec,.ask-ai-foot,.ask-ai-toast,.sec-book,.home-cta,.demo-video,#demo,.cal-wrap,.cal-cta,#cfr,.ux-copy,.site-footer-cols,.dash,.report-form,.est-presets,.cmp-cta,video,iframe{display:none !important}
  main::before{content:"CTRL Reality, Inc.  |  ctrlreality.ai";display:block;font:600 10pt/1.4 var(--font);letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid #999;padding-bottom:6pt;margin-bottom:14pt}
  .wrap{max-width:none !important;padding:0 !important}
  .section,.home-hero,.page-hero{padding:6pt 0 !important;border:0 !important}
  .ux-reveal{opacity:1 !important;transform:none !important}
  h1,h2,h3,.h1,.h2,.legal h1,.legal h2{color:#000 !important;break-after:avoid;page-break-after:avoid}
  .h1,.home-hero .h1{font-size:26pt !important}
  .h2{font-size:18pt !important}
  p,li,td,th,span,b,.lead,.eyebrow,.legal p,.legal ul,.split p,.step p,.agent p,.aside .row,.metric .cap,.metric .big{color:#000 !important}
  .step,.agent,.plan,.aside,.index-panel,.est,details.ux-faq,.cmp-table tr{break-inside:avoid;page-break-inside:avoid;background:#fff !important;border-color:#bbb !important}
  .steps,.agents-grid,.plans,.split{display:block !important}
  .step,.agent,.plan{margin:0 0 8pt}
  a{color:#000 !important;text-decoration:underline}
  .legal a[href^="http"]::after,.cmp a[href^="http"]::after{content:" (" attr(href) ")";font-size:8.5pt;word-break:break-all;text-decoration:none}
  .site-footer{border-top:1px solid #999 !important;margin-top:12pt}
  .site-footer-bot{color:#000 !important}
  .ux-updated{color:#000 !important}
}

/* =========================================================================
   r2 (2026-10-19): brand palette from the 3D model gradient, light theme fixes,
   lighter header, one-line cookie banner, brighter free report fields.
   Gradient stops (gradient.webp / the video background): periwinkle #96a3ee,
   sky #6db4f5, pink #f099c2, peach #f5c9a8, lilac #b39df2.
   The 3D bundle used to paint an opaque inline background on <body>; that hid
   the aurora and turned every light page black below the hero. Body is
   transparent again; the page background is the html colour plus .cr-bg.
   ========================================================================= */
body{background:transparent !important}
body>canvas{filter:none !important}

:root{
  --cr-bg:#06060b; --cr-bg-well:#0a0a12;
  --cr-surface-1:#0f0f18; --cr-surface-2:#171724; --cr-surface-3:#222233;
  --cr-text:#ffffff; --cr-text-secondary:#cfd2e0; --cr-text-tertiary:#b0b4c6;
  --cr-line:rgba(190,200,255,.22); --cr-line-hair:rgba(190,200,255,.12);
  --cr-glass:rgba(8,8,14,.985); --cr-hover:rgba(190,200,255,.08);
  --cr-red:#96a3ee; --cr-red-text:#ff8a8a; --cr-red-button:#4f5fd0; --cr-red-pressed:#3f4fc0;
  --cr-red-soft:#f099c2; --cr-on-red:#0b0b14;
  --cr-err:#ff8a8a;
  --cr-grad:linear-gradient(100deg,#6db4f5 0%,#96a3ee 38%,#f099c2 72%,#f5c9a8 100%);
  --cr-scrim:linear-gradient(180deg,rgba(6,6,11,.28),rgba(6,6,11,.62));
}
html[data-theme="light"]{
  --cr-bg:#f5f4fa; --cr-bg-well:#ecebf5;
  --cr-surface-1:#ffffff; --cr-surface-2:#f7f6fb; --cr-surface-3:#e6e5f1;
  --cr-text:#0b0b14; --cr-text-secondary:#363749; --cr-text-tertiary:#50516a;
  --cr-line:rgba(24,26,70,.22); --cr-line-hair:rgba(24,26,70,.11);
  --cr-glass:rgba(245,244,250,.985); --cr-hover:rgba(24,26,70,.06);
  --cr-red:#4b5bd1; --cr-red-text:#b3261e; --cr-red-button:#4b5bd1; --cr-red-pressed:#3a49b8;
  --cr-red-soft:#f099c2; --cr-on-red:#ffffff;
  --cr-err:#b3261e;
  --cr-grad:linear-gradient(100deg,#2f6fe0 0%,#5566d6 38%,#b8317c 80%,#b8317c 100%);
  --cr-scrim:linear-gradient(180deg,rgba(245,244,250,.30),rgba(245,244,250,.58));
}
.cr-bg::before{opacity:.62}
html[data-theme="light"] .cr-bg::before{opacity:.7}
html[data-theme="light"] .cr-glow{opacity:.22}
.cr-glow{opacity:.34}

/* header: no live blur over the animated canvas (a large repaint on every frame) */
.site-header{-webkit-backdrop-filter:none;backdrop-filter:none}
.cr-menu-panel{-webkit-backdrop-filter:none;backdrop-filter:none}
.cr-chev{background:#0b0b14;border-color:rgba(190,200,255,.3);color:#fff}

/* gradient emphasis in headings (solid colour first, so words never go missing) */
.h2 .em,.go-h1 .em,.h1 .em{color:var(--cr-text)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .h2 .em,.go-h1 .em,.h1 .em{background:var(--cr-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
@media(forced-colors:active){.h2 .em,.go-h1 .em,.h1 .em{background:none;-webkit-text-fill-color:currentColor;color:inherit}}
.step .rule{background:var(--cr-grad)}
html[data-theme="light"] .step .rule{background:var(--cr-grad)}
.mdl .mf{background:var(--cr-grad)}
.eyebrow{color:var(--cr-text-secondary)}
.ux-progress{background:var(--cr-grad)}
.site-nav a[aria-current="page"]::after{background:var(--cr-grad)}
.ux-fab{background:var(--cr-red-button);box-shadow:0 14px 34px rgba(79,95,208,.38),0 4px 14px rgba(0,0,0,.3)}
@media(hover:hover){.ux-fab:hover{background:var(--cr-red-pressed)}}
.ux-search-res mark{background:rgba(150,163,238,.35)}
html[data-theme="light"] .ux-search-res mark{background:rgba(75,91,209,.2)}
.ux-form-alert{border-color:var(--cr-err);background:rgba(255,138,138,.1)}
html[data-theme="light"] .ux-form-alert{background:rgba(179,38,30,.07)}
.ux-err{color:var(--cr-err)}
.ux-err::before{background:var(--cr-err);color:var(--cr-bg)}
.field input[aria-invalid="true"]{border-color:var(--cr-err)}
.ux-copy[data-copied]{border-color:var(--cr-red)}

/* placeholders and form labels: clear and readable in both themes */
::placeholder{color:var(--cr-text-tertiary);opacity:1}
.field label,.est .efield>label,.est .efield>.elabel{color:var(--cr-text-secondary)}
.fcol .ct,.site-footer-bot,.site-footer-bot a{color:var(--cr-text-tertiary)}

/* light theme: remaining hard-coded whites */
html[data-theme="light"] .pchips span.on{background:var(--cr-text);color:#fff;border-color:var(--cr-text)}
html[data-theme="light"] .est-chip{color:var(--cr-text-secondary)}
html[data-theme="light"] .plan.feat{background:linear-gradient(180deg,#ffffff,#f3f1fb)}
html[data-theme="light"] .site-header.ux-scrolled{box-shadow:0 10px 30px rgba(24,26,70,.1)}
html[data-theme="light"] .cr-brand:hover .cr-chev{border-color:rgba(24,26,70,.5)}
/* the illustrative dashboard stays a picture of the dark app */
html[data-theme="light"] .dash{
  --cr-bg-well:#0a0a12; --cr-surface-1:#0f0f18; --cr-surface-2:#171724; --cr-surface-3:#222233;
  --cr-text:#ffffff; --cr-text-secondary:#cfd2e0; --cr-text-tertiary:#b0b4c6;
  --cr-line:rgba(190,200,255,.22); --cr-line-hair:rgba(190,200,255,.12);
}

/* cookie banner: one short line, a settings link, Accept and Decline */
.ux-consent{max-width:560px;padding:10px 10px 10px 18px;background:var(--cr-surface-1)}
.ux-consent p{font-size:15px;color:var(--cr-text);display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px}
.ux-consent a,.ux-consent .ux-c-link{color:var(--cr-text);font-size:14px;text-decoration:underline;text-underline-offset:3px;background:none;border:0;padding:0;font-family:var(--font);cursor:pointer;min-height:44px;display:inline-flex;align-items:center}
.ux-consent .ux-c-link{font-weight:500}
@media(max-width:600px){.ux-consent p{font-size:14px;gap:0 10px}.ux-consent a,.ux-consent .ux-c-link{font-size:13.5px}}

/* free report overlay: labels and hints in clear white, brighter field text */
#cfr label{color:#ffffff}
#cfr input::placeholder{color:#b9bccd}
#cfr .cfr-note,#cfr .cfr-score .k,#cfr .cfr-rank .k,#cfr .cfr-share{color:#cfd2e0}
html[data-theme="light"] #cfr label{color:#0b0b14}
html[data-theme="light"] #cfr input::placeholder{color:#50516a}
html[data-theme="light"] #cfr .cfr-note,html[data-theme="light"] #cfr .cfr-score .k,html[data-theme="light"] #cfr .cfr-rank .k,html[data-theme="light"] #cfr .cfr-share{color:#363749}

/* Ask AI: five engines, one row; a short note when an engine needs a paste */
.ask-ai-note{color:var(--cr-text-secondary)}

/* 2026-10-19: the "Prompt copied, paste it in" note sits above the cookie banner, never under it */
.ask-ai-toast{bottom:104px;z-index:2147483200}
/* 2026-10-19: hero paragraph stays left of the robot on wide screens */
@media(min-width:1000px){.home-hero .lead{max-width:min(62ch,44vw)}}

/* =========================================================================
   r3 (2026-10-19, audit fixes): opaque header, hero legibility on phones,
   12px text floor, visible field edges, phone tap targets, floating buttons
   that never sit on the footer, a themed dashboard preview, centred reading
   column, taller scheduler frame.
   ========================================================================= */

/* header: fully opaque so nothing shows through it */
.site-header{background:#06060b}
html[data-theme="light"] .site-header{background:#f5f4fa}

/* 12px text floor */
.fcol .ct,.metric .cap,.dash-bar .illtag,.dpanel .ph .pt,.dpanel .ph .pv small,.mdl .ml,.mdl .mv,.sov .lg,
.pchips span,.cite .ci,.cite .cs,.agent .atag,.aside .l,.plan .pill,.est .efield>label,.est .efield>.elabel,
.est-chip,.est-sub,.est-disclosure,.field label,.report-note,.ask-ai-foot .ct,.ux-float-menu .ux-fm-h,.ux-search-foot kbd{font-size:12px}
.mdl .ml,.mdl .mv{font-size:12px}
@media(min-width:861px){.dash-line text{font-size:12px}}
@media(max-width:400px){.mdl .ml,.mdl .mv{font-size:12px}}
.dpanel .ph .pv,.sov .lg b{color:var(--cr-text)}

/* form fields: edges clearly visible (3:1 or better) */
.field input,.est input[type=number]{border-color:rgba(255,255,255,.4)}
html[data-theme="light"] .field input,html[data-theme="light"] .est input[type=number]{border-color:rgba(12,12,15,.45)}
html[data-theme="light"] .field input:focus,html[data-theme="light"] .est input[type=number]:focus{border-color:var(--cr-red);box-shadow:0 0 0 3px rgba(75,91,209,.22)}
html[data-theme="light"] #cfr input{border-color:rgba(12,12,15,.45)}
.report-note{margin-top:14px;display:block}

/* floating buttons: same behaviour at every width (hidden at the top, shown after a scroll),
   and out of the way once the footer is on screen */
.ux-fab-wrap{opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s var(--cr-ease),transform .2s var(--cr-ease),visibility 0s linear .2s}
.ux-float.ux-scrolled .ux-fab-wrap,.ux-float.ux-open .ux-fab-wrap{opacity:1;visibility:visible;transform:none;transition:opacity .2s var(--cr-ease),transform .2s var(--cr-ease),visibility 0s}
.ux-float.ux-float-off:not(.ux-open){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s var(--cr-ease),visibility 0s linear .2s}

/* hero on phones: text and buttons sit on a backing so the robot never makes them hard to read */
@media(max-width:700px){
  .home-hero .lead{position:relative;z-index:2;padding:14px 16px;border-radius:14px;background:rgba(6,6,11,.78)}
  html[data-theme="light"] .home-hero .lead{background:rgba(245,244,250,.86)}
  .home-hero .home-cta{position:relative;z-index:2}
  .home-hero .btn-ghost{background:#06060b}
  html[data-theme="light"] .home-hero .btn-ghost{background:#f5f4fa}
}

/* phone tap targets: 44px on controls, 24px on links inside paragraphs */
@media(max-width:767px){
  .fcol a,.site-footer-bot a,.site-footer a.ux-prefsrc{display:flex;align-items:center;min-height:44px}
  .site-footer-bot a{display:inline-flex}
  .est-presets button,.pchips span{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
  .site-footer .ux-copy,.site-footer button{min-height:44px}
}
.legal a,.cmp a,.legal p a,.cmp-table a{padding-block:4px}

/* reading column centred on wide screens */
.legal{margin-inline:auto}
@media(min-width:1000px){.legal{max-width:760px}.cmp .legal{max-width:960px}}

/* scheduler frame tall enough for the whole month */
.cal-wrap{height:clamp(780px,92vh,980px)}

/* dashboard preview follows the theme (light shows the same picture in the light palette) */
html[data-theme="light"] .dash{
  --cr-bg-well:#ecebf5; --cr-surface-1:#ffffff; --cr-surface-2:#f7f6fb; --cr-surface-3:#e6e5f1;
  --cr-text:#0b0b14; --cr-text-secondary:#363749; --cr-text-tertiary:#50516a;
  --cr-line:rgba(24,26,70,.22); --cr-line-hair:rgba(24,26,70,.11);
}
html[data-theme="light"] .dash .dash-line g[stroke]{stroke:rgba(24,26,70,.14)}
html[data-theme="light"] .dash .dash-line g[fill]{fill:#50516a}
html[data-theme="light"] .dash .dash-line path[stroke="#ffffff"]{stroke:#4b5bd1}
html[data-theme="light"] .dash .dash-line stop{stop-color:#4b5bd1}
html[data-theme="light"] .dash .dash-line circle[fill="#ffffff"]{fill:#4b5bd1}
html[data-theme="light"] .dash .dash-line circle[fill="#9a9aa2"]{fill:#8f98e0}
html[data-theme="light"] .dash .sov circle[stroke="#1c1c22"]{stroke:#e6e5f1}
html[data-theme="light"] .dash .sov circle[stroke="#ffffff"]{stroke:#4b5bd1}
html[data-theme="light"] .dash .sov circle[stroke="#9a9aa2"]{stroke:#8f98e0}
html[data-theme="light"] .dash .sov circle[stroke="#6f6f78"]{stroke:#f099c2}
html[data-theme="light"] .dash .sov circle[stroke="#45454c"]{stroke:#f5c9a8}
html[data-theme="light"] .dash .sov text[fill="#ffffff"]{fill:#0b0b14}
html[data-theme="light"] .dash .sov text[fill="#9a9aa2"]{fill:#50516a}
html[data-theme="light"] .dash .lg i[style*="#ffffff"]{background:#4b5bd1 !important}
html[data-theme="light"] .dash .lg i[style*="#9a9aa2"]{background:#8f98e0 !important}
html[data-theme="light"] .dash .lg i[style*="#6f6f78"]{background:#f099c2 !important}
html[data-theme="light"] .dash .lg i[style*="#45454c"]{background:#f5c9a8 !important}
html[data-theme="light"] .cite .ci{color:#0b0b14}
.mdl-also{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cr-text-tertiary);margin:14px 0 10px;padding-top:12px;border-top:1px solid var(--cr-line-hair)}
/* desktop: nav and footer links at least 24px tall */
.site-nav a{padding-block:6px}
.fcol a{padding-block:3px}
.est input[type=range]{min-height:24px}
p.report-note{font-size:13px}


/* =========================================================================
   r4 (2026-10-20, 300-visitor audit). Phones first.
   Hero and both buttons on the first screen, readable hero in the dark scene,
   one slim cookie bar, a two-button bar that replaces the floating bubble on
   phones, 44px targets, a menu that fits large text, shorter inner-page tops,
   audience cards, plain Plans cards, a clean footer, and landscape care.
   ========================================================================= */

html{scroll-padding-top:88px;scroll-padding-bottom:120px}
html,body{overflow-x:clip}
.ux-form-alert[hidden]{display:none !important}

/* ---- hero: readable over the moving scene at every width ---- */
.home-hero{position:relative}
.home-hero .wrap{position:relative;z-index:2}
.home-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:linear-gradient(90deg,rgba(6,6,11,.58),rgba(6,6,11,.18) 62%,transparent)}
html[data-theme="light"] .home-hero::before{background:linear-gradient(90deg,rgba(245,244,250,.5),rgba(245,244,250,.12) 62%,transparent)}
.home-hero .eyebrow{color:#e9ebf6;font-size:13px;text-shadow:0 1px 14px rgba(6,6,11,.85)}
html[data-theme="light"] .home-hero .eyebrow{color:#14131f;text-shadow:none}
.home-hero .h1{text-shadow:0 2px 26px rgba(6,6,11,.5)}
html[data-theme="light"] .home-hero .h1{text-shadow:none}
.home-hero .lead{position:relative;z-index:2;padding:14px 16px;border-radius:14px;background:rgba(6,6,11,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html[data-theme="light"] .home-hero .lead{background:rgba(245,244,250,.78)}
.home-hero .lead .lead-a{color:var(--cr-text)}
.home-hero .btn-ghost{background:rgba(6,6,11,.72);border-color:rgba(255,255,255,.55)}
html[data-theme="light"] .home-hero .btn-ghost{background:rgba(245,244,250,.9);border-color:rgba(12,12,15,.5)}
.hero-for,.hero-scores{position:relative;z-index:2;max-width:62ch;margin:16px 0 0;font-size:14px;line-height:1.55;color:#d8dae6;text-shadow:0 1px 12px rgba(6,6,11,.9)}
.hero-for a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.hero-scores{margin-top:8px}
.hero-scores b{color:#fff;font-weight:600}
html[data-theme="light"] .hero-for,html[data-theme="light"] .hero-scores{color:#2b2c3a;text-shadow:none}
html[data-theme="light"] .hero-scores b{color:#0c0c0f}
/* the scene canvases fade out at their lower edge instead of ending in a hard line */
body>canvas{-webkit-mask-image:linear-gradient(#000 calc(100% - 140px),transparent);mask-image:linear-gradient(#000 calc(100% - 140px),transparent)}

@media(max-width:700px){
  .home-hero{padding-top:92px;padding-bottom:36px}
  .home-hero .eyebrow{margin-bottom:10px}
  .home-hero .h1{font-size:clamp(36px,10.6vw,46px)}
  .home-hero .lead{margin-top:14px;font-size:16px;line-height:1.5;padding:12px 14px}
  .home-hero .home-cta{margin-top:18px;gap:10px}
  .home-hero .home-cta .btn{flex:1 1 140px;min-height:60px;box-sizing:border-box;padding-inline:14px}
  .hero-for,.hero-scores{font-size:13.5px;background:rgba(6,6,11,.7);padding:10px 12px;border-radius:12px;text-shadow:none}
  .hero-scores{margin-top:8px}
  html[data-theme="light"] .hero-for,html[data-theme="light"] .hero-scores{background:rgba(245,244,250,.82)}
  .home-hero::before{background:linear-gradient(180deg,rgba(6,6,11,.5),rgba(6,6,11,.2) 70%,transparent)}
  html[data-theme="light"] .home-hero::before{background:linear-gradient(180deg,rgba(245,244,250,.5),rgba(245,244,250,.15) 70%,transparent)}
}
@media(max-height:640px){.home-hero .lead .lead-b{display:none}.hero-scores{display:none}}

/* ---- inner pages: no empty first screen on phones ---- */
@media(max-width:700px){
  .page-hero{padding:88px 0 20px}
  .page-hero:has(>.wrap:empty){padding:72px 0 0}
  .section{padding-top:clamp(44px,9vw,72px);padding-bottom:clamp(44px,9vw,72px)}
  .home-hero{padding-bottom:36px}
}
.legal h1{line-height:1.1}
.legal ul{list-style-position:outside;padding-left:1.3em}
.legal-toc{margin:0 0 28px;padding:14px 18px 8px;border:1px solid var(--cr-line-hair);border-radius:14px;background:var(--cr-surface-1)}
.legal-toc p{margin:0 0 4px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-text-tertiary)}
.legal-toc ul{list-style:none;margin:0;padding:0}
.legal-toc li{margin:0}
.legal-toc a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--cr-text-secondary);font-size:15px}
.legal-toc a:hover{color:var(--cr-text)}
.ux-small{font-size:13px;color:var(--cr-text-tertiary)}
.ux-linkbtn{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}

/* ---- audience cards, video lead, ask-ai question ---- */
.who-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.who-card{background:var(--cr-surface-1);border:1px solid var(--cr-line-hair);border-radius:14px;padding:18px 20px}
.who-card h3{font-weight:500;font-size:17px;letter-spacing:-.01em;margin:0 0 8px}
.who-card p{margin:0;font-size:14.5px;line-height:1.5;color:var(--cr-text-secondary)}
.who-guides{margin:20px 0 0;font-size:14px;color:var(--cr-text-secondary)}
.who-guides a{color:var(--cr-text);text-decoration:underline;text-underline-offset:3px;padding-block:10px}
@media(max-width:860px){.who-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}.who-card{padding:12px 13px;border-radius:12px}.who-card h3{font-size:15px;line-height:1.25;margin:0 0 6px}.who-card p{font-size:13px;line-height:1.4}}
@media(max-width:340px){.who-card{padding:10px 10px}.who-card h3{font-size:14px}}
.demo-lead{margin:14px 0 0;max-width:62ch;font-size:15px;line-height:1.55;color:var(--cr-text-secondary)}
.demo-lead a{color:var(--cr-text);text-decoration:underline;text-underline-offset:3px;padding-block:10px}
@media(max-width:600px){.demo-video{margin-inline:-16px;border-radius:0;border-inline:0}}
.ask-ai-q{margin:20px 0 0;padding:14px 16px;border:1px solid var(--cr-line-hair);border-radius:12px;background:var(--cr-surface-1);color:var(--cr-text);font-size:15px;line-height:1.5;max-width:62ch}
.ask-ai-note{color:var(--cr-text-secondary);font-size:14px}
.ask-ai-toast{bottom:calc(120px + var(--ux-consent-h,0px))}
.ask-ai-foot .ask-ai-row{gap:8px}
.ask-ai-foot .ask-ai-btn{width:auto;height:auto;min-height:44px;padding:0 14px;gap:8px}
.ask-ai-foot .ask-ai-btn span{font-size:13px}

/* ---- section links: a real button on phones, one Free report next to it ---- */
.sec-both{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px}
@media(max-width:767px){
  .sec-book{margin-top:28px}
  .sec-book a{display:flex;align-items:center;justify-content:center;min-height:52px;width:100%;border:1px solid var(--cr-line);border-radius:12px;color:var(--cr-text);font-weight:600;font-size:16px;padding:0 16px}
  .sec-book .btn{width:100%;min-height:52px}
  .sec-both{flex-direction:column;align-items:stretch;gap:10px}
}

/* ---- header, menu ---- */
.cr-menu-panel{width:min(16rem,calc(100vw - 24px));max-width:calc(100vw - 24px);box-sizing:border-box;overflow-wrap:anywhere}
.cr-menu-panel a,.cr-menu-panel .ux-menu-row{display:flex;align-items:center;min-height:46px}
.cr-menu-panel .cr-menu-report{margin:0 0 6px}
.site-nav a{display:inline-flex;align-items:center;min-height:44px;padding-inline:6px}
.cr-chev{background:#0b0b14;border-color:rgba(190,200,255,.3)}
@media(max-height:500px) and (orientation:landscape){
  .site-header-in{padding-block:4px}
  .cr-brand,.cr-menu>summary,.cr-book,.ux-icon-btn{min-height:44px}
  .site-header{position:relative}
  html{scroll-padding-top:12px}
}

/* ---- cookie bar: one slim row, same on every phone ---- */
.ux-consent p a{white-space:nowrap}
@media(max-width:600px){
  .ux-consent{left:0;right:0;bottom:0;max-width:none;border-radius:14px 14px 0 0;border-inline:0;border-bottom:0;padding:6px 8px 6px 14px;padding-bottom:calc(6px + env(safe-area-inset-bottom))}
  .ux-consent p{display:block;font-size:12.5px;line-height:1.3}
  .ux-consent p a,.ux-consent .ux-c-link{display:none}
  .ux-cbtns button{min-height:44px;padding:0 14px}
}

/* ---- phones: two-button bar instead of the floating bubble ---- */
.ux-bar{position:fixed;left:0;right:0;bottom:var(--ux-consent-h,0px);z-index:2147480500;display:none;gap:10px;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:var(--cr-surface-1);border-top:1px solid var(--cr-line);box-shadow:0 -12px 32px rgba(0,0,0,.35);transform:translateY(120%);visibility:hidden;transition:transform .25s var(--cr-ease),visibility 0s linear .25s;font-family:var(--font)}
.ux-bar a,.ux-bar button{flex:1;min-height:48px;border-radius:12px;font-family:var(--font);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;white-space:nowrap}
.ux-bar .ux-bar-solid{background:var(--cr-text);color:var(--cr-bg);border:1px solid var(--cr-text)}
.ux-bar .ux-bar-ghost{background:transparent;color:var(--cr-text);border:1px solid var(--cr-line)}
@media(max-width:767px){
  .ux-bar{display:flex}
  .ux-bar.on{transform:none;visibility:visible;transition:transform .25s var(--cr-ease),visibility 0s}
  .ux-float{display:none}
  .site-footer{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
html[data-theme="light"] .ux-bar{box-shadow:0 -12px 32px rgba(20,20,60,.12)}
.ux-fab .ux-fab-t{white-space:nowrap}

/* ---- 44px targets on touch and on phones ---- */
.fcol{gap:0}
.fcol .ct{margin-bottom:6px}
.fcol a,.fcol-btn{display:flex;align-items:center;min-height:44px}
.fcol-btn{background:none;border:0;padding:0;font:inherit;font-size:14px;color:var(--cr-text-secondary);cursor:pointer;text-align:left}
.site-footer-bot a{display:inline-flex;align-items:center;min-height:44px}
.ux-copy{min-height:44px}
@media(pointer:coarse),(max-width:767px){
  .legal a,.cmp a,.cmp-table a,.who-guides a{padding-block:10px}
  .cmp-table td a{display:inline-block;padding:10px 4px}
  .est-presets button{min-height:44px}
  .cr-book,.cr-freereport,.ux-icon-btn,.cr-menu>summary{min-height:44px}
  .site-footer .ux-copy,.site-footer button{min-height:44px}
}
.ux-cmp-cta{margin:0 0 22px}
.ux-cmp-cta .btn{min-height:48px}

/* ---- Plans: plain cards ---- */
.plans-from{margin:18px 0 0;font-size:16px;color:var(--cr-text-secondary);max-width:62ch}
.plans-from b{color:var(--cr-text);font-weight:600}
.plan .who{color:var(--cr-text-secondary);font-size:14px;line-height:1.45;margin:8px 0 16px;min-height:0}
.plan ul{margin-bottom:20px}
.plan li{font-size:14px}
.plan-btns{display:flex;flex-direction:column;gap:8px}
.plan .btn{min-height:48px}
.plan .price.call{font-size:17px}
@media(min-width:1081px){.plan .who{min-height:84px}}
.plans{margin-top:30px}

/* ---- free report modal on short screens and phones ---- */
@media(max-width:560px){#cfr .cfr-wrap{padding:12px 10px}#cfr .cfr-card{border-radius:16px}#cfr .cfr-actions{flex-direction:column}}
@media(max-height:480px){#cfr .cfr-wrap{align-items:flex-start;padding:8px}#cfr .cfr-intro{display:none}}

/* ---- landscape phones ---- */
@media(max-height:500px) and (orientation:landscape){
  .home-hero{padding-top:36px;padding-bottom:28px}
  .home-hero .h1{font-size:40px}
  .home-hero .lead{max-width:min(62ch,60vw)}
  .home-hero .lead .lead-b,.hero-scores{display:none}
  body>canvas{opacity:.55}
  .section{padding-top:36px;padding-bottom:36px}
}

/* ---- 300-visitor pass, round 2 (2026-10-20) ---- */
/* turning a phone sideways and back must not leave the page zoomed out: the scene canvases follow the screen width */
body>canvas{width:100% !important;max-width:100% !important}
html,body{overflow-x:clip}
/* inline text links and small link buttons reach a 44px hit area on phones */
@media(max-width:700px){
  .hero-for a,.who-guides a,.demo-lead a,main p a:not(.btn),main li a:not(.btn),main td a:not(.btn),main dd a:not(.btn),.report-note a,.ux-linkbtn,.cmp-link{display:inline;padding:15px 8px;margin-inline:-8px}
  .site-footer-bot a,.site-footer-bot button,.site-footer-bot .ux-copy{min-height:44px;display:inline-flex;align-items:center}
}
.ux-float-menu .ux-fm-n{display:block;font-size:12px;line-height:1.4;color:var(--cr-text-tertiary);padding:6px 12px 10px;max-width:240px}
/* shorter phone page: compact agent cards */
@media(max-width:700px){
  .agents-grid{gap:10px;margin-top:28px}
  .agent{padding:16px 16px}
  .agent .atag{margin-bottom:8px}
  .agent h3{font-size:18px;margin-bottom:6px}
}

/* ---- r5 (2026-10-20, re-test fixes) ---- */
/* tiny phones: the logo link keeps a 44px tap target even with the wordmark hidden */
@media(max-width:339px){.cr-brand{min-width:44px;justify-content:center}}
/* Book a call in section ends is the same ghost pill as every other secondary button */
.sec-book a.btn{border-radius:999px;font-weight:600;font-size:16px;padding:0 22px;min-height:48px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
@media(max-width:700px){.sec-book a.btn{width:100%;min-height:52px}}
.cmp-link{text-decoration:none}
/* hero robot: longer fade at the lower edge so legs never end in a flat line */
body>canvas{-webkit-mask-image:linear-gradient(#000 calc(100% - 300px),rgba(0,0,0,.55) calc(100% - 150px),transparent);mask-image:linear-gradient(#000 calc(100% - 300px),rgba(0,0,0,.55) calc(100% - 150px),transparent)}
/* phones: fewer cards over the robot so the head and torso read */
@media(max-width:700px){
  .home-hero .lead,.hero-for{background:rgba(6,6,11,.55)}
  html[data-theme="light"] .home-hero .lead,html[data-theme="light"] .hero-for{background:rgba(245,244,250,.72)}
  body>canvas{opacity:.85}
  .site-footer{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .dash-line text{font-size:15px}
}
/* search: empty-state buttons look like the rest of the site */
.ux-search-empty button,.ux-search-empty a{font:inherit;font-weight:600;font-size:14px;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--cr-line);background:transparent;color:var(--cr-text);display:inline-flex;align-items:center;cursor:pointer;margin:6px 8px 0 0}
.ux-search-empty button{background:var(--cr-text);color:var(--cr-bg)}
/* engines per plan */
.eng-wrap{margin-top:36px}
.eng-h{font-size:18px;font-weight:600;margin:0 0 12px}
.eng-tbl{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.eng-tbl th,.eng-tbl td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--cr-line-hair,rgba(255,255,255,.12));vertical-align:top}
.eng-tbl thead th{font-size:13px;color:var(--cr-text-secondary)}
.eng-tbl tbody th{font-weight:600;white-space:nowrap}
@media(max-width:700px){
  .eng-tbl,.eng-tbl tbody,.eng-tbl tr,.eng-tbl th,.eng-tbl td{display:block;width:100%}
  .eng-tbl thead{position:absolute;left:-9999px}
  .eng-tbl tr{border:1px solid var(--cr-line-hair,rgba(255,255,255,.12));border-radius:12px;padding:10px 4px;margin-bottom:10px}
  .eng-tbl th,.eng-tbl td{border:0;padding:4px 12px}
  .eng-tbl td:before{content:attr(data-l) ": ";color:var(--cr-text-secondary)}
}

/* ---- 2026-10-20 re-test fixes ---- */
input::placeholder{text-overflow:ellipsis}
input{text-overflow:ellipsis}
/* inline links in legal-style lists: normal line spacing, tap area from a pseudo-element */
.legal ul li>a,.legal p a,.legal li a{display:inline;padding:0;margin-inline:0;position:relative}
.legal ul li>a::after,.legal p a::after,.legal li a::after{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px}
.legal a[href^="http"]::after{content:"";font-size:inherit}
@media print{.legal a[href^="http"]::after{content:" (" attr(href) ")";position:static;font-size:8.5pt;word-break:break-all}}
.legal a.btn,.cmp a.btn{text-decoration:none}
.legal a.btn::after,.cmp a.btn::after{content:none}
/* cookie banner: desktop docks bottom-right so it never covers the hero copy; hidden behind the report dialog */
@media(min-width:701px){
  .ux-consent{left:auto;right:16px;margin:0;max-width:420px;bottom:16px}
}
html:has(#cfr.cfr-on) .ux-consent{display:none}
@media(max-width:600px){
  .ux-consent p a{display:inline;min-height:0;padding:14px 6px;margin:-14px 0 -14px 2px}
}
/* ghost buttons: visible hover */
@media(hover:hover){.btn-ghost:hover{background:color-mix(in srgb,var(--cr-text) 10%,transparent);border-color:var(--cr-text)}}
/* hero CTAs on inner pages pair up like the home hero on phones */
@media(max-width:700px){
  .home-cta{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .home-cta .btn{width:100%;min-height:56px;padding-inline:12px}
  .home-hero .home-cta{display:flex}
}
.site-nav .cr-login,.cr-menu-panel a.cr-login{font-weight:400}
.ux-linkbtn{padding:0;margin-inline:0;line-height:inherit;vertical-align:baseline;position:relative}
.ux-linkbtn::after{content:"";position:absolute;left:-4px;right:-4px;top:-12px;bottom:-12px}

/* ---- 2026-10-20 re-test round 3 ---- */
/* contents lists on legal pages: whole row is the tap target (beats .legal li a) */
.legal .legal-toc li>a{display:flex;align-items:center;min-height:44px;padding:0;margin:0;position:static}
.legal .legal-toc li>a::after{content:none}
.legal-toc li+li{border-top:1px solid var(--cr-line-hair)}
/* about page call-to-action links: 44px tall on phones */
@media(max-width:700px){
  .ux-tap{display:inline-flex !important;align-items:center;min-height:44px;padding:0 !important;margin-inline:0 !important}
  .ux-tap::after{content:none !important}
}
/* hero "See who it is for" on desktop: a 24px+ hit area */
@media(min-width:701px){.hero-for a{display:inline-block;padding:3px 0}}

/* Header report button: a verb label, short on tablets, full on wide screens. */
.cr-freereport .hl-l{display:none}
@media(min-width:1200px){.cr-freereport .hl-s{display:none}.cr-freereport .hl-l{display:inline}}

/* Robot poster: a real frame of the 3D robot shows at once and stays if the scene cannot load. It fades out when the live robot is on screen. */
.robot-poster{position:absolute;top:0;left:0;width:100%;height:100vh;height:100svh;z-index:0;pointer-events:none;background:#06060b center top/cover no-repeat;opacity:1;transition:opacity .7s ease;
  background-image:url(/assets/robot-poster-m-dark-r2.jpg);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 300px),rgba(0,0,0,.55) calc(100% - 150px),transparent);mask-image:linear-gradient(#000 calc(100% - 300px),rgba(0,0,0,.55) calc(100% - 150px),transparent)}
html[data-theme="light"] .robot-poster{background-color:#e9e8f6;background-image:url(/assets/robot-poster-m-light-r2.jpg)}
@media(min-width:701px){
  .robot-poster{background-image:url(/assets/robot-poster-d-dark-r1.jpg)}
  html[data-theme="light"] .robot-poster{background-image:url(/assets/robot-poster-d-light-r1.jpg)}
}
@media(max-width:700px){.robot-poster{opacity:1}}
.robot-poster.off{opacity:0 !important;visibility:hidden;transition:opacity .7s ease,visibility 0s .7s}
@media(prefers-reduced-motion:reduce){.robot-poster{transition:none}}

/* Talk to us: the same black and white as the site buttons, not a coloured chat bubble. */
.ux-fab{background:var(--cr-text);color:var(--cr-bg);box-shadow:0 10px 28px rgba(0,0,0,.28),0 2px 8px rgba(0,0,0,.2)}
@media(hover:hover){.ux-fab:hover{background:var(--cr-text);opacity:.88}}
.ux-float-menu{min-width:19rem}
.ux-float-menu a,.ux-float-menu button{white-space:nowrap}

/* Phones: the Recommended plan card comes first in the stack. */
@media(max-width:700px){.plans{display:flex;flex-direction:column}}

/* ---- round 5 (2026-10-21): 300-visitor retest and Fable pass ---- */
.btn-solid{font-weight:600}
/* theme switch: the scene fades out, re-tints while hidden and fades back in */
body>canvas{transition:opacity .35s ease}
html.ux-theme-swap body>canvas{opacity:0 !important;transition:opacity .22s ease}
html.ux-theme-swap .robot-poster{transition:none}
@media(prefers-reduced-motion:reduce){body>canvas{transition:none}html.ux-theme-swap body>canvas{opacity:1 !important}}
/* phones: the two hero explainer lines read as one box */
@media(max-width:700px){
  .hero-for{margin-bottom:0;border-bottom-left-radius:0;border-bottom-right-radius:0;padding-bottom:4px}
  .hero-scores{display:block;margin-top:0;border-top-left-radius:0;border-top-right-radius:0;padding-top:0;background:rgba(6,6,11,.55)}
  html[data-theme="light"] .hero-scores{background:rgba(245,244,250,.72)}
  .report-form .btn{margin-bottom:14px}
  .cal-cta{border:0;padding:0;background:none}
  .cal-cta .btn{width:100%;min-height:52px}
  .dash-bar{flex-wrap:wrap;gap:6px}
  .dash-bar .illtag{margin-left:auto}
}
@media(max-width:700px){.hero-for a{padding:12px 8px}}
@media(min-width:701px){main p a:not(.btn),main li a:not(.btn){padding-block:2px}}
.ux-cmp-cta{margin-bottom:28px}
.ux-cmp-cta+p{margin-top:0}
/* phones: the robot fades out above the next section instead of running into it */
@media(max-width:700px){body>canvas{-webkit-mask-image:linear-gradient(#000 calc(100% - 420px),rgba(0,0,0,.5) calc(100% - 290px),transparent calc(100% - 170px));mask-image:linear-gradient(#000 calc(100% - 420px),rgba(0,0,0,.5) calc(100% - 290px),transparent calc(100% - 170px))}}
/* play button sits in the lower third of the poster so it never covers the search box in the poster frame */
.demo-video .demo-play{align-items:flex-end;padding-bottom:clamp(8px,4%,28px)}
@media(max-width:700px){.sec-book.phone-hide{display:none}}

/* ---- round 6 (2026-10-21): retest 91 and Fable 85 ---- */
/* phones: one-sentence hero lead, one-line eyebrow, lighter boxes with a blur, and a robot band under the headline */
@media(max-width:700px){
  .home-hero .eyebrow{font-size:12px;letter-spacing:.1em}
  .home-hero .lead{margin-top:clamp(72px,11svh,96px)}
  .home-hero .lead,.hero-for,.hero-scores{background:rgba(6,6,11,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  html[data-theme="light"] .home-hero .lead,html[data-theme="light"] .hero-for,html[data-theme="light"] .hero-scores{background:rgba(245,244,250,.66)}
  /* footer: the sticky bar and contact button hide while the footer is on screen, so no extra room is needed */
  .site-footer-in{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
}
/* dark mode: the white solid button carries the same visual weight as the outlined one beside it */
html:not([data-theme="light"]) .btn-solid{font-weight:700}
/* small inline links in lists and sources reach a 24px target */
main li a:not(.btn),main .sources a,main .links a{padding-block:4px}
/* book-a-demo: on phones the report form sits right under the intro, so the anchor pair is dropped */

.cmp-cta-pair{margin-top:28px}
.sec-book-pair{margin-top:24px}
@media(max-width:700px){.sec-book-pair{display:none}}
/* desktop: header logo, page content and footer start on the same left edge */
@media(min-width:1024px){.site-header-in{max-width:70rem;padding-left:24px}.site-footer-in{max-width:70rem;padding-left:24px;padding-right:24px}}
.home-cta+p.updated{margin-top:18px}

/* ---- round 7 (2026-10-21) ---- */
.split.split-one{grid-template-columns:1fr}
.split.split-one p{max-width:66ch}
/* fold summaries: hidden where the list is always open, a tap row on phones */
details.fold-phone>summary{display:none}
@media(max-width:700px){
  details.fold-phone>summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 16px;margin-top:22px;border:1px solid var(--cr-line);border-radius:12px;background:var(--cr-surface-1);color:var(--cr-text);font-weight:600;font-size:16px;cursor:pointer;list-style:none}
  details.fold-phone>summary::-webkit-details-marker{display:none}
  details.fold-phone>summary::after{content:"+";font-size:22px;font-weight:400;line-height:1}
  details.fold-phone[open]>summary::after{content:"\2212"}
  details.agents-fold[open]>.agents-grid{margin-top:14px}
  .legal-toc{padding:0 16px}
  details.toc-fold>summary{margin:0;padding:0;border:0;border-radius:0;background:none;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cr-text-tertiary);min-height:48px}
  /* home dashboard preview: the two main cards only */
  .dash-sub{display:none}
}
@media(max-width:860px){.dash-line text{font-size:24px}}
/* footer tools: link and buttons share one line box */
.ux-foot-tools a,.ux-foot-tools button{display:inline-flex;align-items:center;line-height:1}
/* compare and about: inline links reach a 44px target without changing the look */
.cmp-table td a{display:inline-block;padding:6px 0}
/* plans on wide screens: three cards, then two */
@media(min-width:1081px){
  .plans{grid-template-columns:repeat(6,1fr)}
  .plans>*{grid-column:span 2}
  .plans>*:nth-child(n+4){grid-column:span 3}
  .plan p,.plan li{font-size:14.5px}
}
/* one corner stack: the back-to-top button waits while the cookie banner is up */
html:has(.ux-consent:not([hidden])) .ux-top{opacity:0 !important;visibility:hidden !important}
/* link-only list rows (related comparisons) are full 44px rows */
main li>a:only-child:not(.btn){display:inline-flex;align-items:center;min-height:44px}
/* CTRL REALITY one button style, r1 (owner order 2026-10-23: "all the buttons need to be the same").
   Every call to action on the site is the same solid pill: same shape, height, type and colours.
   Loaded after site-ux-r10.css on every page. Revision in the name because /assets is served immutable. */
html body .btn,
html body .btn-solid,
html body .btn-ghost,
html body .btn-lg,
html body .cr-book,
html body .cr-freereport,
html body .cr-menu-panel .cr-book,
html body .ux-bar a,
html body .ux-bar button,
html body .ux-cbtns button,
html body .ux-cbtns .ux-c-accept,
html body .ux-cbtns .ux-c-decline,
html body .h2-ai,
html body .ux-form-alert button,
html body .ux-form-alert button.ux-primary,
html body .cal-cta .btn,
html body .plan .btn,
html body .sec-book .btn,
html body .home-hero .btn-ghost,
html body .ux-modal-actions .btn,
html body #cfr .cfr-btn,
html body #cfr .cfr-btn.cfr-ghost,
html body .ctrl-return .btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  min-height: 48px !important;
  height: 48px;
  padding: 0 26px !important;
  border-radius: 999px !important;
  border: 1px solid var(--cr-text) !important;
  background: var(--cr-text) !important;
  color: var(--cr-bg) !important;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px !important;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .18s var(--cr-ease), opacity .18s var(--cr-ease);
}
@media (hover: hover) {
  html body .btn:hover,
  html body .cr-book:hover,
  html body .cr-freereport:hover,
  html body .ux-bar a:hover,
  html body .ux-bar button:hover,
  html body .ux-cbtns button:hover,
  html body .h2-ai:hover,
  html body #cfr .cfr-btn:hover {
    transform: translateY(-1px);
    opacity: .92;
    border-color: var(--cr-text) !important;
  }
}
html body .btn:focus-visible,
html body .cr-book:focus-visible,
html body .cr-freereport:focus-visible,
html body .h2-ai:focus-visible,
html body #cfr .cfr-btn:focus-visible {
  outline: 2px solid var(--cr-text);
  outline-offset: 3px;
}
html body .h2-ai[aria-disabled="true"] { opacity: .55; }
html body #cfr .cfr-btn.cfr-full { width: 100%; }
html body .plan .btn,
html body .sec-book .btn,
html body .cal-cta .btn { width: 100%; }
@media (min-width: 641px) { html body .sec-book .btn { width: auto; } }
html body .ux-bar a, html body .ux-bar button { flex: 1; padding: 0 12px !important; }
html body .ux-cbtns button { padding: 0 18px !important; }
@media (max-width: 400px) {
  html body .ux-cbtns button { padding: 0 12px; font-size: 14px; }
  html body .ux-bar a, html body .ux-bar button { font-size: 14px; }
}

/* Header on phones: the sticky bar and the menu carry Book a call, so the header keeps one choice. */
@media (max-width: 767px) {
  html body .site-header .cr-head-ctas > .cr-book { display: none !important; }
}
/* Menu panel: Book a call sits under the free report button, same style. */
html body .cr-menu-panel .cr-book { width: 100%; margin-top: 6px; }

/* Plans: Start is the only priced card. */
.plan .price .from { display: none; }
.plan.feat .pill { margin-bottom: 4px; }
@media (min-width: 1081px) { .plans { grid-template-columns: repeat(3, 1fr); } }

/* Return prompt for visitors coming back from their own AI tab. */
.ctrl-return {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147481000;
  display: none; padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
  background: var(--cr-surface-1); border-top: 1px solid var(--cr-line);
  box-shadow: 0 -14px 40px rgba(0, 0, 0, .35);
}
.ctrl-return.on { display: block; }
.ctrl-return-in { max-width: 560px; margin: 0 auto; position: relative; padding-right: 40px; }
.ctrl-return h2 { font-size: 20px; font-weight: 600; line-height: 1.25; margin: 0 0 6px; color: var(--cr-text); }
.ctrl-return p { margin: 0 0 14px; color: var(--cr-text-secondary); font-size: 15px; line-height: 1.5; }
.ctrl-return .btn { width: 100%; }
.ctrl-return-x {
  position: absolute; top: -6px; right: -6px; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--cr-line); background: transparent; color: var(--cr-text); font-size: 20px; cursor: pointer;
}
/* Six plan cards: three across on desktop, two on tablets, one on phones (replaces the old five-card spans). */
@media (min-width: 1081px) { html body .plans { grid-template-columns: repeat(3, 1fr); } html body .plans > *, html body .plans > *:nth-child(n+4) { grid-column: auto; } }
@media (min-width: 561px) and (max-width: 1080px) { html body .plans { grid-template-columns: repeat(2, 1fr); } html body .plans > *, html body .plans > *:nth-child(n+4) { grid-column: auto; } }
/* Respect hidden and inline display:none on buttons (the unify rule forces display). */
html body .btn[hidden], html body #cfr .cfr-btn[hidden], html body .btn[style*="display:none"], html body #cfr .cfr-btn[style*="display:none"], html body .btn[style*="display: none"] { display: none !important; }