/* self-hosted @font-face — stylesheet-relative URLs (deployable under any base path) */ @font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/Inter-400.8909904ab6.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/Inter-500.f3779f1efc.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/Inter-600.f9a06e79cd.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Inter-700.6f56409fd3.woff2') format('woff2')} @font-face{font-family:'Inter';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/Inter-800.a7d0a50f15.woff2') format('woff2')} @font-face{font-family:'General Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/GeneralSans-Medium.c30377df1d.woff2') format('woff2')} @font-face{font-family:'General Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/GeneralSans-Semibold.94a2a0e1ef.woff2') format('woff2')} @font-face{font-family:'Satoshi';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/Satoshi-Bold.353a7fbfb4.woff2') format('woff2')} @font-face{font-family:'Satoshi';font-style:normal;font-weight:900;font-display:swap;src:url('../fonts/Satoshi-Black.bd11b58202.woff2') format('woff2')} /* ============================================================ DESIGN TOKENS — landing-scoped (V1 system preserved, §0) ============================================================ */ :root{ --roo-ink:#07142B; --roo-ink-soft:#43516B; /* darkened from V1 #526079 for contrast (§5,§13.4) */ --roo-midnight:#061A4A; --roo-deep-blue:#0A2D78; --roo-blue:#1769FF; --brand-primary:#1769FF; --brand-primary-hover:var(--roo-blue-hover); --brand-primary-soft:#EAF1FF; --roo-blue-hover:#1147B8; /* V461 §7.2: unified brand-primary-hover across public + dashboard */ --roo-blue-soft:#EAF1FF; --roo-canvas:#F7F9FF; --roo-white:#FFFFFF; --roo-line:#DCE4F2; --roo-positive:#159A66; --roo-amber:#C88712; --font-display:"General Sans","Inter",Arial,sans-serif; --font-body:"Inter",Arial,sans-serif; --font-number:"Satoshi","General Sans","Inter",Arial,sans-serif; --landing-max:1180px; /* V5.5: consolidated desktop width (was 1280) to align with the V25 baseline */ --gutter-desktop:24px; /* V5.5: tighter desktop gutter (was 64) */ --gutter-tablet:32px; --gutter-mobile:20px; --section-y-desktop:92px; /* V5.1: tightened to reduce page length */ --section-y-tablet:72px; --section-y-mobile:38px; --radius-card:28px; --radius-large:40px; --radius-pill:999px; --ease-reveal:cubic-bezier(0.16,1,0.3,1); --ease-header:cubic-bezier(0.22,1,0.36,1); } *,*::before,*::after{box-sizing:border-box} html,body{margin:0;padding:0} html{scroll-padding-top:96px} /* fixed sticky header must not obscure anchored content */ /* V5.1: per-section anchor offset so headings clear the sticky header on jump/scroll */ section[id]{scroll-margin-top:90px} @media(max-width:767px){section[id]{scroll-margin-top:78px}} body{ font-family:var(--font-body); color:var(--roo-ink); background:var(--roo-canvas); font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } /* Batch 1.2-cv2 (A2): the horizontal-overflow guard lives on html, NOT body. body{overflow-x:hidden} forced body's overflow-y to compute to `auto` (CSS single-axis rule), making its own scroll container — a classic cause of position:sticky failing on real mobile browsers. On the root element the guard clamps the viewport instead, so body never becomes an independent scroller and sticky keeps working. Individual wide components (tables, swipe decks) keep their own overflow containers, and remaining overflow bugs are fixed at the source rather than silently hidden. */ html{overflow-x:hidden;overflow-x:clip} h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;margin:0;letter-spacing:-0.01em} p{margin:0} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} img,svg{display:block;max-width:100%} :focus-visible{outline:2px solid var(--roo-blue);outline-offset:3px;border-radius:4px} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .wrap{max-width:var(--landing-max);margin:0 auto;padding:0 var(--gutter-desktop)} .eyebrow{font-size:13px;font-weight:600;letter-spacing:0.02em;color:var(--roo-blue);display:inline-flex;align-items:center;gap:8px} .eyebrow--onblue{color:#BFD4FF} .eyebrow-chip{display:inline-block;padding:7px 14px;border-radius:var(--radius-pill);background:var(--roo-blue-soft);color:var(--roo-blue);font-size:13px;font-weight:600;letter-spacing:0.01em} .eyebrow-chip--onblue{background:rgba(255,255,255,0.14);color:#DCE8FF} /* ============================================================ BUTTONS — hover/focus/active states, WCAG-AA (§3) ============================================================ */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:50px;padding:0 26px;border-radius:var(--radius-pill);font-size:15px;font-weight:500;letter-spacing:0.005em;transition:transform .18s var(--ease-reveal),background .18s ease,box-shadow .18s ease,border-color .18s ease,color .18s ease;white-space:nowrap} .btn:active{transform:translateY(0) scale(0.99)} .btn-primary{background:var(--roo-blue);color:#fff;box-shadow:0 6px 20px -6px rgba(23,105,255,0.55)} .btn-primary:hover{background:var(--roo-blue-hover);transform:translateY(-2px);box-shadow:0 10px 26px -6px rgba(23,105,255,0.6)} /* Hero primary CTA = deep navy so it doesn't sink into the blue gradient (§3.1) */ .btn-navy{background:var(--roo-ink);color:#fff;box-shadow:0 8px 22px -8px rgba(7,20,43,0.7)} .btn-navy:hover{background:#0C1E3D;transform:translateY(-2px);box-shadow:0 12px 28px -8px rgba(7,20,43,0.75)} .btn-ghost{background:transparent;color:var(--roo-ink);border:1px solid var(--roo-line)} .btn-ghost:hover{border-color:var(--roo-blue);color:var(--roo-blue);transform:translateY(-2px)} /* Secondary hero CTA over pale gradient floor — darker text/border for contrast (§3.2) */ .btn-hero-secondary{background:rgba(255,255,255,0.9);color:var(--roo-ink);border:1px solid rgba(7,20,43,0.22)} .btn-hero-secondary:hover{background:#fff;border-color:var(--roo-ink);transform:translateY(-2px)} .btn-lg{height:54px;padding:0 30px;font-size:16px} /* ============================================================ HEADER — transparent → floating pill (§8) ============================================================ */ .site-header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:center;padding:20px var(--gutter-desktop);transition:padding .28s var(--ease-header);pointer-events:none} .header-inner{width:100%;max-width:var(--landing-max);display:flex;align-items:center;justify-content:space-between;padding:14px 8px 14px 4px;border-radius:var(--radius-pill);border:1px solid transparent;transition:background .28s var(--ease-header),border-color .28s var(--ease-header),box-shadow .28s var(--ease-header),padding .28s var(--ease-header);pointer-events:auto} .site-header.scrolled{padding-top:16px;padding-bottom:16px} .site-header.scrolled .header-inner{background:rgba(255,255,255,0.94);backdrop-filter:saturate(150%) blur(12px);-webkit-backdrop-filter:saturate(150%) blur(12px);border-color:var(--roo-line);box-shadow:0 8px 30px -12px rgba(7,20,43,0.18);padding-left:22px;padding-right:14px} /* D1 (V5.5): logo click/touch target ≥44×44 (transparent min-height; visible mark unchanged), icon + wordmark both link home, with a header-context-aware focus ring. */ .brand-link{display:flex;align-items:center;flex:none;padding:0 12px;min-height:44px;border-radius:10px} .brand-link:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:10px} .site-header.scrolled .brand-link:focus-visible{outline-color:var(--roo-blue)} .brand-logo{height:26px;width:auto;transition:filter .28s var(--ease-header)} .brand-logo{filter:brightness(0) invert(1)} .site-header.scrolled .brand-logo{filter:none} .main-nav{display:flex;align-items:center;gap:2px} .nav-link,.nav-trigger{padding:9px 15px;border-radius:var(--radius-pill);font-size:14.5px;font-weight:500;color:rgba(255,255,255,0.88);transition:color .2s ease,background .2s ease;display:inline-flex;align-items:center;gap:6px} .nav-link:hover,.nav-trigger:hover{color:#fff;background:rgba(255,255,255,0.1)} .site-header.scrolled .nav-link,.site-header.scrolled .nav-trigger{color:var(--roo-ink-soft)} .site-header.scrolled .nav-link:hover,.site-header.scrolled .nav-trigger:hover{color:var(--roo-blue);background:var(--roo-blue-soft)} .nav-trigger .chev{width:15px;height:15px;transition:transform .25s var(--ease-header)} .nav-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)} .header-actions{display:flex;align-items:center;gap:8px} .header-login{padding:9px 16px;font-size:14.5px;font-weight:500;color:#fff;border-radius:var(--radius-pill);transition:color .2s,background .2s} .header-login:hover{background:rgba(255,255,255,0.1)} .site-header.scrolled .header-login{color:var(--roo-ink)} .site-header.scrolled .header-login:hover{color:var(--roo-blue);background:var(--roo-blue-soft)} .header-cta{height:42px;padding:0 20px;border-radius:var(--radius-pill);background:#fff;color:var(--roo-ink);font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;white-space:nowrap;transition:transform .18s,background .18s,color .18s} .header-cta:hover{transform:translateY(-1px)} .site-header.scrolled .header-cta{background:var(--roo-blue);color:#fff} .menu-btn{display:none;width:44px;height:44px;border-radius:12px;align-items:center;justify-content:center;color:#fff} .site-header.scrolled .menu-btn{color:var(--roo-ink)} /* B1: reduced motion → the directional header changes state instantly (no slide) */ @media(prefers-reduced-motion:reduce){ .site-header,.site-header .header-inner{transition:none!important} } /* ============================================================ PRODUCT MEGA MENU (§9) ============================================================ */ .mega{position:fixed;left:0;right:0;top:0;z-index:99;display:flex;justify-content:center;padding:0 var(--gutter-desktop);pointer-events:none;opacity:0;transition:opacity .24s var(--ease-header);} .mega .mega-panel{transform:translateY(-8px);transition:transform .24s var(--ease-header)} .mega.open .mega-panel{transform:translateY(0)} .mega.open{opacity:1;pointer-events:auto} /* A06: panel top derived from measured header bottom + 14–16px gap (JS sets --mega-top) */ .mega-panel{width:100%;max-width:var(--landing-max);margin-top:var(--mega-top,86px);background:#fff;border:1px solid var(--roo-line);border-radius:30px;box-shadow:0 30px 70px -30px rgba(7,20,43,0.35);padding:26px;display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:20px} .mega-col h4{font-size:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--roo-ink-soft);margin-bottom:12px} .mega-item{display:flex;gap:12px;padding:11px 12px;border-radius:14px;transition:background .16s;align-items:flex-start} .mega-item:hover{background:var(--roo-blue-soft)} .mega-item .mic{width:34px;height:34px;border-radius:9px;flex:none;background:var(--roo-blue-soft);color:var(--roo-blue);display:flex;align-items:center;justify-content:center} .mega-item:hover .mic{background:#fff} /* A05: title + desc are separate block rows inside a vertical wrapper — never concatenate */ .mega-item .mtext{display:flex;flex-direction:column;min-width:0} .mega-item .mtitle{display:block;font-size:14px;font-weight:600;color:var(--roo-ink);line-height:1.3} .mega-item .msub{display:block;font-size:12.5px;color:var(--roo-ink-soft);margin-top:3px;line-height:1.45} .mega-preview{background:linear-gradient(160deg,#061A4A,#0A2D78);border-radius:18px;padding:20px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;position:relative;overflow:hidden} .mega-preview .grid-bg{position:absolute;inset:0;background:linear-gradient(90deg,transparent 39px,rgba(255,255,255,0.07) 40px) 0 0/40px 40px,linear-gradient(0deg,transparent 39px,rgba(255,255,255,0.07) 40px) 0 0/40px 40px} .mega-preview .mp-label{position:relative;font-size:12px;color:#BFD4FF;font-weight:600} .mega-preview .mp-mini{position:relative;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.16);border-radius:12px;padding:13px;margin:12px 0} .mega-preview .mp-row{display:flex;justify-content:space-between;font-size:12px;padding:5px 0;color:rgba(255,255,255,0.9)} .mega-preview .mp-row b{font-weight:600} .mega-preview .btn{position:relative;background:#fff;color:var(--roo-ink);height:40px;font-size:13.5px} /* ============================================================ MOBILE DRAWER (§10) ============================================================ */ .drawer-scrim{position:fixed;inset:0;background:rgba(7,20,43,0.4);z-index:150;opacity:0;pointer-events:none;transition:opacity .25s ease} .drawer-scrim.open{opacity:1;pointer-events:auto} .drawer{position:fixed;top:12px;right:12px;left:12px;z-index:151;background:#fff;border-radius:24px;box-shadow:0 30px 70px -20px rgba(7,20,43,0.4);padding:18px;transform:translateY(-16px);opacity:0;pointer-events:none;transition:transform .28s var(--ease-header),opacity .28s var(--ease-header);max-height:calc(100vh - 24px);overflow-y:auto} .drawer.open{transform:translateY(0);opacity:1;pointer-events:auto} .drawer-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .drawer-head .brand-logo{filter:none;height:24px} .drawer-close{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--roo-ink);background:var(--roo-canvas)} .drawer-nav{display:flex;flex-direction:column;gap:2px;margin-top:6px} .drawer-nav a,.drawer-acc-btn{padding:14px 12px;border-radius:12px;font-size:16px;font-weight:500;color:var(--roo-ink);display:flex;align-items:center;justify-content:space-between;width:100%;text-align:left} .drawer-nav a:hover,.drawer-acc-btn:hover{background:var(--roo-blue-soft)} .drawer-acc-btn .chev{width:18px;height:18px;transition:transform .25s} .drawer-acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)} .drawer-acc-panel{max-height:0;overflow:hidden;transition:max-height .3s var(--ease-header)} .drawer-acc-panel a{padding-left:26px;font-size:15px;font-weight:400;color:var(--roo-ink-soft)} .drawer-cta{margin-top:12px} .drawer-cta .btn{width:100%} /* ============================================================ HERO ============================================================ */ .hero{position:relative;min-height:min(100vh,1080px);display:flex;flex-direction:column;justify-content:center;align-items:center;padding:150px var(--gutter-desktop) 90px;text-align:center;overflow:hidden;background:linear-gradient(180deg,#04143F 0%,#082A77 18%,#1769FF 42%,#77A5FF 64%,#D8E5FF 84%,#F7F9FF 100%)} #hero-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none} .hero-context-label{position:absolute;z-index:2;top:calc(50% - 40px);left:50%;transform:translateX(-50%);font-size:12px;font-weight:600;letter-spacing:0.04em;color:rgba(255,255,255,0.7);display:none} .hero-content{position:relative;z-index:3;width:100%;max-width:860px;margin:0 auto} .hero h1{font-size:clamp(38px,4.2vw,64px);line-height:1.04;font-weight:500;color:#fff;max-width:760px;margin:18px auto 0;letter-spacing:-0.02em;text-shadow:0 2px 30px rgba(4,20,63,0.3)} .hero-sub{font-size:18px;line-height:1.62;color:rgba(255,255,255,0.94);max-width:640px;margin:22px auto 0;text-shadow:0 1px 20px rgba(4,20,63,0.25)} .hero-ctas{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap} /* Analysis bar */ .analysis-bar{position:relative;z-index:5;width:100%;max-width:1152px;margin:44px auto 0;background:rgba(255,255,255,0.97);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.7);border-radius:26px;box-shadow:0 24px 60px -20px rgba(6,26,74,0.5);padding:20px} .analysis-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:0 2px} .analysis-title{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--roo-ink)} .analysis-sample{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;color:var(--roo-blue)} .analysis-sample svg{width:15px;height:15px;transition:transform .18s} .analysis-sample:hover{color:var(--roo-blue-hover)}.analysis-sample:hover svg{transform:translateX(2px)} .analysis-fields{display:grid;grid-template-columns:minmax(138px,0.92fr) minmax(150px,1.0fr) minmax(200px,1.48fr) minmax(112px,0.72fr) minmax(140px,0.9fr);gap:14px;align-items:end} .afield{display:flex;flex-direction:column;gap:7px;text-align:left;min-width:0} .afield label{font-size:12.5px;font-weight:600;color:var(--roo-ink-soft);padding-left:2px} .afield-control{height:52px;border:1px solid var(--roo-line);border-radius:14px;background:var(--roo-white);padding:0 14px;display:flex;align-items:center;gap:10px;font-size:15px;color:var(--roo-ink);transition:border-color .18s,box-shadow .18s} .afield-control:hover{border-color:#B9CCEC} .afield-control svg{flex:none;color:var(--roo-ink-soft)} .afield-control input{border:none;outline:none;background:none;width:100%;font-family:inherit;font-size:15px;color:var(--roo-ink);min-width:0} .analysis-action .btn{width:100%;height:52px} .analysis-note{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:12.5px;color:var(--roo-ink-soft)} .analysis-note svg{color:var(--roo-positive)} /* ============================================================ CUSTOM COMBOBOX / LISTBOX (§4) — replaces native (Analysis type + Analysis area). Selected option = pale-blue background, blue text and a check. No native/system dropdown. */ .asheet-val.is-placeholder{color:#93A0B7} .asheet-lbbtn[aria-expanded="true"]{border-color:var(--roo-blue);box-shadow:0 0 0 3px var(--roo-blue-soft)} .asheet-lbbtn[aria-expanded="true"] .asheet-chev{transform:rotate(180deg)} .asheet-lblist{list-style:none;margin:7px 0 0;padding:6px;border:1px solid var(--roo-line);border-radius:14px;background:#fff;box-shadow:0 14px 34px -18px rgba(6,26,74,0.3);display:flex;flex-direction:column;gap:2px} .asheet-lblist[hidden]{display:none} .asheet-lbopt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 14px;border-radius:11px;font-size:15px;color:var(--roo-ink);cursor:pointer} .asheet-lbopt .lb-check{width:19px;height:19px;flex:none;color:var(--roo-blue);opacity:0} .asheet-lbopt.active{background:#F2F6FF} .asheet-lbopt[aria-selected="true"]{background:var(--roo-blue-soft);color:var(--roo-blue);font-weight:600} .asheet-lbopt[aria-selected="true"] .lb-check{opacity:1} .asheet-note{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--roo-ink-soft);margin:3px 0 0;line-height:1.45} .asheet-note svg{width:15px;height:15px;flex:none;color:var(--roo-positive)} .asheet-note.is-prompt svg{color:var(--roo-blue)}.asheet-note.is-prompt{color:var(--roo-blue)} .asheet-foot{flex:none;padding:12px 18px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--roo-line);background:#fff} .asheet-submit{width:100%;height:52px} .asheet-back{display:inline-flex;align-items:center;gap:4px;font-size:14.5px;font-weight:600;color:var(--roo-blue);padding:6px 8px 6px 2px;min-height:40px} .asheet-back svg{width:18px;height:18px} .asheet-subsearch{position:relative;display:flex;align-items:center;height:48px;margin:14px 16px 8px;border:1px solid var(--roo-line);border-radius:12px;background:#F5F8FF;padding:0 12px;gap:9px;flex:none} .asheet-subsearch:focus-within{border-color:var(--roo-blue);background:#fff;box-shadow:0 0 0 3px var(--roo-blue-soft)} .asheet-subsearch .bt-sicon{width:16px;height:16px;color:var(--roo-ink-soft);flex:none} .asheet-sublist{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:4px 10px 16px} .asheet-optrow{width:100%} @media(prefers-reduced-motion:reduce){ .asheet{transition:none} .asheet-scrim{transition:none} } @media(min-width:768px){ .asheet,.asheet-scrim{display:none!important} } /* ---- V46 B4/G/H: public additions ---- */ .early-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:26px;align-items:start} @media (max-width:960px){.early-grid{grid-template-columns:1fr}} .early-cta-card{background:linear-gradient(160deg,var(--roo-blue),#0F4FD8);color:#fff;border:0} .early-cta-card h2,.early-cta-card p{color:#fff} .early-cta-card .form-note,.early-cta-card .form-note a{color:rgba(255,255,255,.85)} /* CTA legibility: buttons inside prose/cards never inherit link colours */ .prose p a.btn,.prose a.btn,.info-card a.btn{border-bottom:0} .btn-onblue{background:#fff !important;color:var(--roo-blue) !important;border-bottom:0 !important} .btn-onblue:hover{background:#EAF1FF !important;color:#0F4FD8 !important} /* entry cards + mini product UI */ .entrycard .ec-k,.ec-k{font-size:.66rem;font-weight:800;letter-spacing:.09em;color:var(--roo-blue)} .ec-ui{margin-top:14px;border:1px solid var(--roo-line);border-radius:12px;padding:12px;background:#fff} .ec-ui-bar{display:flex;gap:8px;flex-wrap:wrap} .ec-chip{font-size:.72rem;font-weight:700;border:1px solid var(--roo-line);border-radius:999px;padding:3px 10px;color:var(--roo-ink-soft)} .ec-chip.ec-ok{color:#0A6B41;background:#E4F5EC;border-color:#CBE8D4} .ec-chip.ec-alert{color:#B02E20;background:#FBEAE8;border-color:#F0A0A0} .ec-ui-line{height:8px;border-radius:99px;background:#EEF1F6;margin-top:10px} .mono-note{font-size:.78rem;color:var(--roo-ink-soft);margin:10px 0 0;line-height:1.55} /* compare mini */ .cmp-mini{max-width:680px;margin:22px auto 0;border:1px solid var(--roo-line);border-radius:14px;overflow:hidden;background:#fff} .cm-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:8px;padding:10px 16px;border-top:1px solid #F0F2F6;font-size:.86rem} .cm-row:first-child{border-top:0} .cm-head{background:#F7F9FF;font-weight:700;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;color:var(--roo-ink-soft)} .cm-lead{color:#0A6B41;font-weight:700} .cm-unk{color:#8A97AD} /* asset slots — designed branded fallback */ .aslot{margin:18px 0 0} .aslot-in{position:relative;border-radius:14px;overflow:hidden;background:linear-gradient(150deg,#0E1B33,#1147B8);color:#9DBDFB} .aslot-bg{position:absolute;inset:0;width:100%;height:100%} .aslot-lbl{position:absolute;left:14px;bottom:12px;right:14px;color:#EAF1FF;font-size:.78rem;font-weight:600;letter-spacing:.02em;text-shadow:0 1px 6px rgba(7,20,43,.5)} /* insights fallback covers */ .acard .acover-fb{display:block;border-radius:12px 12px 0 0;background:linear-gradient(150deg,#0E1B33,#1769FF);color:#EAF1FF;padding:26px 18px;min-height:120px;position:relative} .acover-fb .af-topic{font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#9DBDFB} .acover-fb .af-line{height:7px;border-radius:99px;background:rgba(255,255,255,.22);margin-top:12px} /* editorial rail (Template B) — the injected .rail is a SIBLING column of the .editorial-grid (minmax(0,760px) 1fr), never nested inside the reading column */ @media (min-width:1100px){ .editorial-grid>.rail{position:sticky;top:96px;max-width:340px;justify-self:start;border:1px solid var(--roo-line);border-radius:14px;padding:16px 18px;background:#fff} } .rail .rail-k{font-size:.66rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--roo-ink-soft)} .rail ol{list-style:none;margin:10px 0 0;padding:0} .rail li{margin:0} .rail a{display:block;padding:6px 0;font-size:.85rem;color:var(--roo-ink-soft);border-bottom:0} .rail a:hover{color:var(--roo-blue)} @media (max-width:1099px){.editorial-grid>.rail{order:-1;position:static;border:1px solid var(--roo-line);border-radius:12px;padding:12px 16px;margin:0 0 18px;background:#F7F9FF}} .insight-card .acover-fb{border-radius:12px;margin-bottom:12px;min-height:86px;padding:16px} .insight-card .acover-fb .af-line{display:block} /* ==== V461 P0.6: topic covers on insight side cards ==== */ .insight-card .ic-cover{display:block;border-radius:12px;overflow:clip;margin-bottom:12px;line-height:0} .insight-card .ic-cover img{width:100%;height:auto;display:block;border-radius:12px} .insight-card .ic-cover+.acover-fb{display:none} .insight-card.img-fallback .ic-cover{display:none} .insight-card.img-fallback .acover-fb{display:flex} /* ==== V461 P0.7: public card containment at the primitive level ==== */ .info-card,.insight-card,.insight-feature,.rvcard,.ev-item,.faq-item,.why-opt,.aslot{overflow:clip} /* .price-card: the MOST-POPULAR badge deliberately straddles the top edge (design-system exception, uniform across cards) — clip everything else via inner wrapper instead */ /* ==== V461 §7.1: Roocation Select ==== */ select.rsel-native{display:none!important} .rsel-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:10px;min-height:40px;padding:8px 12px;font:inherit;font-size:0.8438rem;color:var(--roo-ink);background:#fff;border:1px solid var(--roo-line);border-radius:10px;cursor:pointer;min-width:150px;max-width:100%;text-align:left} .rsel-btn:hover{border-color:var(--roo-blue);background:var(--blue-bg,rgba(23,105,255,0.05))} .rsel-btn:focus-visible{outline:2px solid var(--roo-blue);outline-offset:2px} .rsel-btn .rsel-v{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rsel-btn .rsel-chev{width:16px;height:16px;flex:0 0 auto;color:var(--roo-ink-soft)} .rsel-btn.rsel-sm{min-height:34px;padding:5px 10px;font-size:0.8125rem;min-width:130px} .rsel-pop{position:fixed;z-index:260;background:#fff;border:1px solid var(--roo-line);border-radius:12px;box-shadow:0 18px 44px -18px rgba(7,20,43,0.28);overflow:auto;padding:6px} .rsel-list{outline:none} .rsel-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:42px;padding:9px 12px;border-radius:8px;font-size:0.8438rem;color:var(--roo-ink);cursor:pointer} .rsel-opt:hover,.rsel-opt.act{background:var(--blue-bg,rgba(23,105,255,0.08))} .rsel-opt.on{color:var(--roo-blue);font-weight:600} .rsel-opt .rsel-tick{width:16px;height:16px;color:var(--roo-blue);flex:0 0 auto} .rsel-scrim{position:fixed;inset:0;z-index:255;background:rgba(7,15,33,0.44)} .rsel-sheet{position:fixed;left:0;right:0;bottom:0;z-index:260;background:#fff;border-radius:16px 16px 0 0;border:1px solid var(--roo-line);border-bottom:0;box-shadow:0 18px 44px -18px rgba(7,20,43,0.28);max-height:70vh;display:flex;flex-direction:column;padding:0 10px calc(10px + env(safe-area-inset-bottom,0px))} .rsel-sheet .rsel-shead{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0 10px;border-bottom:1px solid var(--roo-line);margin-bottom:6px} .rsel-sheet .rsel-shead b{font-size:0.875rem} .rsel-grab{width:42px;height:4px;border-radius:99px;background:var(--roo-line);display:block;margin-top:6px} .rsel-sheet .rsel-list{overflow:auto} .rsel-sheet .rsel-opt{min-height:46px} html.rsel-lock,html.rsel-lock body{overflow:hidden} /* ==== V461 §16 part A: coded public diagrams ==== */ /* depth ladder */ .dgl{margin:26px 0 8px;border:1px solid var(--roo-line);border-radius:14px;padding:20px 22px;background:#fff;overflow:clip} .dgl-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:end} .dgl-step{display:flex;flex-direction:column} .dgl-bar{height:var(--h,40px);border-radius:8px 8px 3px 3px;background:linear-gradient(180deg,#5B93FF,#1769FF);margin-bottom:10px} .dgl-name{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .dgl-name b{font-size:.9rem} .dgl-p{font-size:.78rem;font-weight:700;color:var(--roo-blue)} .dgl-d{font-size:.78rem;color:var(--roo-ink-soft);margin:4px 0 0;line-height:1.5} @media (max-width:700px){.dgl-row{grid-template-columns:repeat(2,1fr);gap:14px}} /* input fragment */ .dgi{margin:18px 0 0} .dgi-ui{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;border:1px solid var(--roo-line);border-radius:14px;padding:12px;background:#F7F9FF} .dgi-f{display:flex;flex-direction:column;gap:2px;border:1px solid var(--roo-line);border-radius:10px;background:#fff;padding:8px 12px;min-width:110px} .dgi-grow{flex:1;min-width:180px} .dgi-k{font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--roo-ink-soft)} .dgi-v{font-size:.85rem;font-weight:600;color:var(--roo-ink)} .dgi-btn{align-self:center;background:var(--roo-blue);color:#fff;font-size:.82rem;font-weight:700;border-radius:999px;padding:10px 18px;white-space:nowrap} /* anatomy of a finding */ .dga{margin:22px 0 6px} .dga-card{border:1px solid var(--roo-line);border-left:4px solid var(--roo-blue);border-radius:14px;background:#fff;padding:16px 18px;max-width:640px;overflow:clip} .dga-row{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--roo-line);font-size:.86rem;line-height:1.5;flex-wrap:wrap} .dga-row:last-child{border-bottom:0} .dga-meta{gap:22px} .dga-tag{flex:0 0 auto;font-size:.62rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--roo-blue);background:#EAF1FF;border-radius:6px;padding:2px 8px} .dga-conf{font-weight:700;color:#8a6d00} .dga-lim{color:var(--roo-ink-soft)} .dga-chk .dga-tag{color:#0B6E40;background:#E4F5EC} /* confidence scale */ .dgc{margin:20px 0 6px;max-width:640px} .dgc-bar{display:flex;border-radius:999px;overflow:clip;border:1px solid var(--roo-line)} .dgc-bar span{padding:8px 0;text-align:center;font-size:.75rem;font-weight:700;color:#fff} .dgc-hi{background:#159A66}.dgc-md{background:#C88712}.dgc-lo{background:#9AA6B8} .dgc-legend{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:10px;color:var(--roo-ink-soft)} /* rings */ .dgr{margin:20px 0 6px;max-width:520px}.dgr-svg{width:100%;height:auto} .dgr-dot{display:inline-block;width:10px;height:10px;border-radius:99px;margin-right:5px;vertical-align:-1px} /* freshness */ .dgf{margin:20px 0 6px} .dgf-line{display:flex;gap:14px;align-items:center;flex-wrap:wrap} .dgf-n{font-size:.78rem;color:var(--roo-ink-soft);line-height:1.5} .dgf-n b{color:var(--roo-ink)} .dgf-n i{display:block;width:10px;height:10px;border-radius:99px;background:var(--roo-blue);margin-bottom:6px} .dgf-arrow{color:var(--roo-ink-soft)} /* pipeline */ .dgp{margin:20px 0 6px} .dgp-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .dgp-chip{border:1px solid var(--roo-line);background:#F7F9FF;border-radius:999px;padding:7px 14px;font-size:.8rem;font-weight:600} .dgp-arrow{color:var(--roo-ink-soft)} /* why option icons + use-together */ .wo-ic{display:inline-flex;width:26px;height:26px;color:var(--roo-blue);vertical-align:-6px;margin-right:8px} .wo-ic svg{width:100%;height:100%} .wtog{margin:18px 0 0} .wtog-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;border:1px solid var(--roo-line);border-radius:14px;background:#F7F9FF;padding:14px 16px} .wtog-i{display:inline-flex;width:38px;height:38px;padding:8px;border:1px solid var(--roo-line);border-radius:10px;background:#fff;color:var(--roo-ink-soft)} .wtog-i svg{width:100%;height:100%} .wtog-arrow{color:var(--roo-ink-soft);font-size:1.1rem} .wtog-roo{font-weight:700;color:var(--roo-blue);line-height:1.3} .wtog-roo .tiny{color:var(--roo-ink-soft);font-weight:500} /* pricing minis */ .pmini{border:1px solid var(--roo-line);border-radius:12px;background:#F7F9FF;padding:12px;margin-bottom:14px;min-height:74px;display:flex;gap:14px;align-items:center;overflow:clip} .pm-score b{font-size:1.6rem;color:var(--roo-blue)} .pm-score span{font-size:.75rem;color:var(--roo-ink-soft)} .pm-rows{display:flex;flex-direction:column;gap:6px;flex:1} .pm-rows span{display:block;height:8px;border-radius:99px;background:#D7E4FD} .pm-nine{display:grid;grid-template-columns:repeat(3,14px);gap:5px} .pm-nine i{width:14px;height:14px;border-radius:4px;background:#1769FF;opacity:.85} .pm-nine i:nth-child(2n){opacity:.55} .pm-chips{display:flex;gap:6px} .pm-chips span{font-size:.66rem;font-weight:700;border:1px solid var(--roo-line);border-radius:99px;padding:3px 9px;background:#fff;color:var(--roo-ink-soft)} .pm-cols{display:flex;gap:10px;align-items:flex-end;flex:1} .pm-c{display:flex;gap:3px;align-items:flex-end} .pm-c i{display:block;width:9px;border-radius:3px 3px 0 0;background:#1769FF;opacity:.8} .pm-dim i{background:#9AA6B8} /* ==== V461 §16 part B ==== */ /* tools */ .hub-ic{display:inline-flex;width:24px;height:24px;color:var(--acc,#1769FF);vertical-align:-5px;margin-right:8px} .hub-ic svg{width:100%;height:100%} .tmini{display:flex;gap:12px;align-items:center;border:1px solid var(--roo-line);border-radius:12px;background:#F7F9FF;padding:10px 14px;margin:10px 0 12px;overflow:clip} .tm-k{font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--roo-ink-soft)} .tm-v{font-size:1.15rem;font-weight:700;color:var(--roo-blue)} .tm-s{font-size:.72rem;color:var(--roo-ink-soft);font-weight:500} .tm-bar{flex:1;height:8px;border-radius:99px;background:#D7E4FD;overflow:clip} .tm-bar i{display:block;height:100%;background:var(--roo-blue);border-radius:99px} .tm-rows{display:flex;flex-direction:column;gap:5px;flex:1} .tm-rows i{display:block;height:7px;border-radius:99px;background:#D7E4FD} .tm-cols{display:flex;gap:5px;align-items:flex-end} .tm-cols i{display:block;width:10px;border-radius:3px 3px 0 0;background:var(--roo-blue);opacity:.8} .tm-chip{font-size:.66rem;font-weight:700;border:1px solid var(--roo-line);border-radius:99px;padding:3px 9px;background:#fff;color:var(--roo-ink-soft);white-space:nowrap} /* about */ .dgae{margin:0 0 22px} .dgae-row{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border:1px solid var(--roo-line);border-radius:14px;background:#fff;padding:16px 18px} .dgae-pin{width:44px;height:44px;color:var(--roo-blue);flex:0 0 auto} .dgae-pin svg{width:100%;height:100%} .dgae-sigs{display:flex;gap:6px;flex-wrap:wrap;max-width:340px} .dgae-sigs span{font-size:.7rem;font-weight:700;border:1px solid var(--roo-line);border-radius:99px;padding:4px 10px;background:#F7F9FF;color:var(--roo-ink-soft)} .dgae-rep{border:1px solid var(--roo-line);border-left:4px solid var(--roo-blue);border-radius:12px;padding:10px 14px;min-width:150px} .dgae-rep b{font-size:.8rem;display:block;margin-bottom:7px} .dgae-rep i{display:block;height:7px;border-radius:99px;background:#D7E4FD;margin-top:5px} .dgau{margin:22px 0 0;max-width:420px} .dgau-svg{width:100%;height:auto;border:1px solid var(--roo-line);border-radius:14px;background:#F7F9FF} /* coverage */ .dgcf{margin:0 0 22px} .dgcf-lad{display:flex;flex-direction:column;gap:8px;margin-top:10px;max-width:560px} .dgcf-l{border:1px solid var(--roo-line);border-radius:12px;padding:10px 14px;font-size:.85rem;display:flex;flex-direction:column;gap:2px} .dgcf-l span{font-size:.78rem;color:var(--roo-ink-soft)} .dgcf-ok{border-left:4px solid #159A66} .dgcf-mid{border-left:4px solid #C88712} .dgcf-no{border-left:4px solid #9AA6B8} .dgly{margin:22px 0 0;max-width:460px;overflow:clip;position:relative} .dgly-stack{position:relative;height:150px} .dgly-l{position:absolute;left:calc(var(--i)*26px);top:calc(var(--i)*38px);right:calc((2 - var(--i))*26px);height:64px;border:1px solid var(--roo-line);border-radius:12px;background:rgba(23,105,255,calc(0.06 + var(--i)*0.05));display:flex;align-items:center;padding:0 16px} .dgly-l span{font-size:.78rem;font-weight:600;color:var(--roo-ink)} /* contact */ .ct-grid{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px;align-items:start;margin:0 0 22px} .ct-ill svg{width:100%;height:auto} @media (max-width:820px){.ct-grid{grid-template-columns:1fr}.ct-side{order:-1;max-width:260px}} /* glossary */ .gl-tools{margin:0 0 18px;display:flex;flex-direction:column;gap:12px} .gl-tools input[type="search"]{width:100%;max-width:460px;border:1px solid var(--roo-line);border-radius:10px;padding:10px 14px;font:inherit;font-size:.9rem} .gl-cats{display:flex;gap:8px;flex-wrap:wrap} .gl-cats button{font:inherit;font-size:.78rem;font-weight:600;border:1px solid var(--roo-line);background:#fff;border-radius:999px;padding:6px 14px;cursor:pointer;color:var(--roo-ink-soft)} .gl-cats button.on{background:var(--roo-blue);border-color:var(--roo-blue);color:#fff} .gl-az{display:flex;gap:4px;flex-wrap:wrap} .gl-az a{font-size:.75rem;font-weight:700;color:var(--roo-blue);border:1px solid var(--roo-line);border-radius:8px;min-width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-bottom-width:1px} .gl-az a:hover{background:#EAF1FF} .gl-minis{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin:0 0 8px} .gl-mini{margin:0;border:1px solid var(--roo-line);border-radius:14px;padding:14px 16px;background:#fff;overflow:clip} .gloss-term.gl-hide{display:none} /* ==== V461 fixes: enhanced selects inside dense tool tables + rail box-sizing ==== */ .sc-table .rsel-btn,.tfield .rsel-btn,.toolrow .rsel-btn{min-width:0;width:100%;padding:7px 9px} .sc-table{table-layout:fixed;width:100%} .editorial-grid>.rail{box-sizing:border-box;max-width:100%} /* ===================== Batch 1 shared additions (built on the V5.5 system) ===================== */ .skip-link{position:absolute;left:-999px;top:0;z-index:400;background:var(--roo-ink);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600} .skip-link:focus{left:0} main:focus{outline:none} .page-hero{padding:132px 0 20px;background:linear-gradient(180deg,#F7F9FF,#EDF2FF 60%,#F7F9FF)} .page-hero .wrap{max-width:var(--landing-max);margin:0 auto;padding:0 var(--gutter-desktop)} .page-hero .eyebrow{color:var(--roo-blue)} .page-hero h1{font-family:var(--font-display);font-size:clamp(30px,4vw,46px);font-weight:500;letter-spacing:-0.02em;line-height:1.1;margin:14px 0 0;max-width:20ch} .page-hero .lead{font-size:18px;line-height:1.6;color:var(--roo-ink-soft);max-width:64ch;margin:16px 0 0} .page-hero .crumb{font-size:13px;color:var(--roo-ink-soft)} .page-hero .crumb a{color:var(--roo-ink-soft)}.page-hero .crumb a:hover{color:var(--roo-blue)} /* Batch 1.2 (P0 §15 editorial grid): .prose used to centre itself independently of its ancestor (max-width:760px;margin:0 auto against the FULL VIEWPORT when used bare, or against whatever ad-hoc wrapper a page happened to add) — on any viewport wider than ~1000px that put the body column well right of the page-hero title above it, exactly the "wide left-aligned title, narrow centred column, looks accidental" pattern the brief calls out. .prose no longer centres itself: pages now nest it inside the SAME .wrap (1180/gutter, left-aligned) the hero already uses, via .editorial-grid below, so the body's left edge always lines up with the hero's left edge. */ .prose{max-width:760px;padding:8px 0 0;font-size:16.5px;line-height:1.72;color:#20304C} .prose.wide{max-width:var(--landing-max)} /* Shared editorial grid: one outer .wrap (matches the hero), a ~760px reading column, an optional sticky right rail (TOC) for longer pages. Falls back to a single column under 1100px. */ .editorial-grid{display:grid;grid-template-columns:minmax(0,760px) 1fr;gap:56px;align-items:start} .editorial-grid.no-rail{grid-template-columns:minmax(0,760px)} .editorial-body{max-width:760px} .editorial-rail{position:sticky;top:112px;align-self:start;min-width:0} @media(max-width:1099px){.editorial-grid{grid-template-columns:minmax(0,1fr);gap:0}.editorial-rail{display:none}} .h3-style{font-size:18px;font-weight:600;font-family:var(--font-display);letter-spacing:-0.01em;margin:0 0 8px} /* Batch 1.2-cv2 (A5): Sample Report nine-section cards with real rv-* preview visuals. Self-scoped (.rvcard, NOT .sheet) so home's @media .sheet rules can't distort a static grid. Reuses the unscoped base rv-* component styles from site.css.raw for the visuals themselves. */ .rvgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0 0 8px} @media(max-width:1023px){.rvgrid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:679px){.rvgrid{grid-template-columns:1fr}} .rvcard{position:relative;background:#fff;border:1px solid var(--roo-line);border-top:3px solid var(--acc,var(--roo-blue));border-radius:18px;overflow:hidden;display:flex;flex-direction:column} .rvcard-viz{position:relative;padding:34px 20px 16px;min-height:184px;display:flex;flex-direction:column;justify-content:center;gap:9px;border-bottom:1px solid #EEF2FA;background:linear-gradient(180deg,var(--accs,#F4F7FE) -40%,#fff 90%)} .rvcard-foot{padding:13px 20px 18px;background:#FCFDFF;flex:1} .rvcard-top{display:flex;align-items:center;gap:10px;margin-bottom:6px} .rvcard-num{font-family:var(--font-number);font-weight:700;font-size:12.5px;color:var(--acc,var(--roo-blue));letter-spacing:.1em} .rvcard-ic{display:inline-flex;width:20px;height:20px;color:var(--acc,var(--roo-blue))} .rvcard-ic svg{width:100%;height:100%} .rvcard h3{font-family:var(--font-display);font-weight:500;font-size:17.5px;margin:0 0 4px} .rvcard p{font-size:13.5px;line-height:1.5;color:var(--roo-ink-soft);margin:0} .rvcard .rv-facts{display:flex;flex-direction:column;gap:8px} .rvcard .rv-fact{display:flex;justify-content:space-between;gap:12px;font-size:13px;border-bottom:1px dashed #E6EBF4;padding-bottom:7px} .rvcard .rv-fact:last-child{border-bottom:0;padding-bottom:0} .rvcard .rv-fact span{color:var(--roo-ink-soft)} .rvcard .rv-fact b{font-weight:600;text-align:right} .rvcard .rv-verdict{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;color:#0E8F5E} .rvcard .rv-verdict i{width:9px;height:9px;border-radius:50%;background:#0E8F5E;flex:none} /* Batch 1.2-cv2 (C): /why-roocation/ components — option cards + fair comparison table. Table collapses to labelled stacked cards on small screens (no unlabelled sideways scroll). */ .why-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px} .why-jump a{display:inline-block;border:1px solid var(--roo-line);border-radius:999px;padding:7px 14px;font-size:13px;color:var(--roo-ink-soft);background:#fff;min-height:30px} .why-jump a:hover{border-color:var(--roo-blue);color:var(--roo-blue)} .why-opt{scroll-margin-top:110px;border:1px solid var(--roo-line);border-radius:16px;padding:22px 24px;margin:0 0 14px;background:#fff} .why-opt h3{font-family:var(--font-display);font-weight:500;font-size:19px;margin:0 0 8px} .why-opt p{margin:0 0 10px;color:var(--roo-ink-soft);font-size:15px;line-height:1.62} .why-opt-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:12px;padding-top:12px;border-top:1px dashed #E6EBF4;font-size:13.5px} .why-opt-meta span{color:var(--roo-ink-soft)} .why-opt-meta b{font-weight:600} .cmp-wrap{overflow:visible;margin:18px 0 6px} table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.55} .cmp th,.cmp td{padding:13px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #EEF2FA} .cmp thead th{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--roo-ink-soft);border-bottom:2px solid var(--roo-line)} .cmp tbody th[scope=row]{font-weight:600;width:15%;color:var(--roo-ink)} .cmp td.roo{background:#F4F8FF} .cmp thead th.roo{color:var(--roo-blue)} @media(max-width:860px){ .cmp thead{position:absolute;left:-9999px} table.cmp,.cmp tbody,.cmp tr,.cmp td,.cmp tbody th[scope=row]{display:block;width:100%} .cmp tr{border:1px solid var(--roo-line);border-radius:14px;margin:0 0 14px;overflow:hidden;background:#fff} .cmp tbody th[scope=row]{background:#F7F9FF;border-bottom:1px solid var(--roo-line);font-size:14.5px} .cmp td{border-bottom:1px dashed #EEF2FA} .cmp td:last-child{border-bottom:0} .cmp td::before{content:attr(data-col);display:block;font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--roo-ink-soft);margin-bottom:3px} .cmp td.roo::before{color:var(--roo-blue)} } .why-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 26px} .why-list li{position:relative;padding-left:26px;font-size:15px;line-height:1.55} .why-list li::before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;background:var(--roo-blue-soft,#EAF1FF) url('data:image/svg+xml;utf8,') center/9px no-repeat} @media(max-width:679px){.why-list{grid-template-columns:1fr}} .why-steps{counter-reset:ws;list-style:none;margin:16px 0 0;padding:0} .why-steps li{counter-increment:ws;position:relative;padding:0 0 16px 46px;font-size:15px;line-height:1.6} .why-steps li::before{content:counter(ws,decimal-leading-zero);position:absolute;left:0;top:-1px;font-family:var(--font-number);font-weight:700;font-size:14px;color:var(--roo-blue);letter-spacing:.06em} .why-steps li:not(:last-child)::after{content:"";position:absolute;left:11px;top:24px;bottom:4px;width:1px;background:#E6EBF4} /* Batch 1.2-cv2 (D): shared Free Tools shell + form primitives. Client-side only; no fake backend. */ .tool-shell{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:36px;align-items:start} @media(max-width:1023px){.tool-shell{grid-template-columns:1fr}} .tool-panel{background:#fff;border:1px solid var(--roo-line);border-radius:18px;padding:26px 28px} .tool-panel h2{font-family:var(--font-display);font-weight:500;font-size:21px;margin:0 0 16px} .tfield{margin:0 0 16px} .tfield label{display:block;font-size:13.5px;font-weight:600;margin:0 0 6px} .tfield .hint{font-weight:400;color:var(--roo-ink-soft);font-size:12.5px;margin-left:6px} .tfield input[type=number],.tfield input[type=text],.tfield select,.tfield textarea{width:100%;border:1px solid var(--roo-line);border-radius:10px;padding:10px 12px;font:inherit;font-size:15px;background:#fff;color:var(--roo-ink)} .tfield input:focus,.tfield select:focus,.tfield textarea:focus{outline:2px solid var(--roo-blue);outline-offset:1px} .tfield .terr{display:none;color:#B3261E;font-size:12.5px;margin-top:5px} .tfield.invalid input,.tfield.invalid select{border-color:#B3261E} .tfield.invalid .terr{display:block} .trow2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} @media(max-width:520px){.trow2{grid-template-columns:1fr}} .tool-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .tool-out{border:1px solid var(--roo-line);border-radius:18px;overflow:hidden} .tool-out-head{padding:16px 24px;background:var(--roo-navy,#07142B);color:#fff;font-family:var(--font-display);font-weight:500;font-size:18px} .tool-out-body{padding:20px 24px;background:#fff} .tres{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px dashed #E6EBF4} .tres:last-child{border-bottom:0} .tres .tk{font-size:14px;color:var(--roo-ink-soft);max-width:60%} .tres .tk b{display:block;color:var(--roo-ink);font-size:14.5px;font-weight:600} .tres .tv{font-family:var(--font-number);font-weight:700;font-size:20px;white-space:nowrap} .tres.muted .tv{color:var(--roo-ink-soft);font-weight:600;font-size:14.5px;font-family:inherit;white-space:normal;text-align:right} .tool-note{background:#F7F9FF;border:1px solid #E6EBF4;border-radius:14px;padding:16px 18px;font-size:13.5px;line-height:1.6;color:var(--roo-ink-soft);margin-top:18px} .tool-note b{color:var(--roo-ink)} .tassume{margin-top:16px;font-size:13.5px} .tassume summary{cursor:pointer;font-weight:600} .tassume ul{margin:10px 0 0;padding-left:20px;color:var(--roo-ink-soft);line-height:1.7} .tstate-empty{color:var(--roo-ink-soft);font-size:14.5px;padding:8px 0} /* checklist */ .ck-group{border:1px solid var(--roo-line);border-radius:14px;margin:0 0 14px;overflow:hidden} .ck-group h3{margin:0;background:#F7F9FF;border-bottom:1px solid var(--roo-line);font-size:15.5px;font-family:var(--font-display);font-weight:500} .ck-group h3 button{all:unset;display:flex;justify-content:space-between;align-items:center;width:100%;box-sizing:border-box;padding:13px 18px;cursor:pointer;min-height:44px} .ck-group h3 button::after{content:"−";font-size:18px;color:var(--roo-ink-soft)} .ck-group h3 button[aria-expanded=false]::after{content:"+"} .ck-group.collapsed .ck-item{display:none} .ck-progress{font-size:13.5px;font-weight:600;color:var(--roo-blue);margin:0 0 12px} .ck-item{display:flex;gap:12px;align-items:flex-start;padding:12px 18px;border-bottom:1px dashed #EEF2FA} /* v4 (P1 §7): on mobile the question reads full-width first; the tri-state controls move BELOW it so long tailored questions never squeeze into a narrow column beside two 44px buttons. */ @media(max-width:679px){ .ck-item{flex-direction:column;gap:10px;padding:14px 16px} .ck-item .ck-txt{order:0;width:100%;font-size:15px} .ck-item .ck-tri{order:1;width:100%;display:flex;gap:8px} .ck-item .ck-tri button{flex:1;text-align:center} } .ck-item:last-child{border-bottom:0} .ck-item .ck-txt{flex:1;font-size:14.5px;line-height:1.5} .ck-tri{display:flex;gap:4px;flex:none} .ck-tri button{border:1px solid var(--roo-line);background:#fff;border-radius:8px;font-size:12.5px;padding:11px 12px;min-height:44px;cursor:pointer;color:var(--roo-ink-soft)} .ck-tri button[aria-pressed=true]{border-color:var(--roo-blue);color:var(--roo-blue);background:#F0F5FF;font-weight:600} .ck-tri button.nc[aria-pressed=true]{border-color:#C88712;color:#C88712;background:#FBF4E4} .ck-note{width:100%;margin-top:8px;border:1px solid var(--roo-line);border-radius:8px;padding:7px 10px;font:inherit;font-size:13px;display:none} .ck-item.has-note .ck-note{display:block} .ck-addnote{border:0;background:none;color:var(--roo-blue);font-size:12.5px;cursor:pointer;padding:0;margin-top:6px} /* scorecard */ .sc-table{width:100%;border-collapse:collapse;font-size:14px} .sc-table th,.sc-table td{border:1px solid #E6EBF4;padding:10px 12px;text-align:left;vertical-align:top} .sc-table thead th{background:#F7F9FF;font-size:13px} .sc-table select{width:100%;border:1px solid var(--roo-line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13.5px} .sc-table textarea{width:100%;border:1px solid var(--roo-line);border-radius:8px;padding:7px 9px;font:inherit;font-size:13px;min-height:44px} .sc-good{background:#E4F5EC}.sc-mid{background:#FBF4E4}.sc-neu{background:#F3F5F9} .sc-sum{border:1px solid var(--roo-line);border-radius:14px;padding:18px 20px;margin-top:18px} .sc-sum h3{margin:0 0 10px;font-size:16px;font-family:var(--font-display);font-weight:500} .sc-sum ul{margin:0;padding-left:20px;line-height:1.7;font-size:14px;color:var(--roo-ink-soft)} .sc-hint{display:none;font-size:12.5px;color:var(--roo-ink-soft);margin:0 0 8px} @media(max-width:860px){ .sc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .sc-table{min-width:640px} .sc-table tbody th[scope=row],.sc-table thead th:first-child{position:sticky;left:0;background:#fff;z-index:2;box-shadow:2px 0 0 #E6EBF4} .sc-table thead th:first-child{background:#F7F9FF} .sc-hint{display:block} } /* tools hub */ .hub-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;border:1px solid var(--roo-line);border-left:4px solid var(--acc,var(--roo-blue));border-radius:16px;padding:22px 26px;margin:0 0 16px;background:#fff} .hub-card h3,.hub-card h2{font-family:var(--font-display);font-weight:500;font-size:20px;margin:0 0 6px} .hub-card p{margin:0;color:var(--roo-ink-soft);font-size:14.5px;line-height:1.6;max-width:62ch} .hub-card .hub-fit{font-size:13px;color:var(--roo-ink-soft);margin-top:8px} .hub-card .hub-fit b{color:var(--roo-ink)} .hub-card .hub-go{align-self:center} @media(max-width:679px){.hub-card{grid-template-columns:1fr}.hub-card .hub-go{justify-self:start}} @media print{ header.site-header,footer.site-footer,.tool-actions,.hub-card .hub-go,.mega,.drawer,.cta-row,.tool-panel .btn{display:none !important} .tool-shell{grid-template-columns:1fr} .tool-out{border:1px solid #999} body{background:#fff} .ck-note{display:block !important;border-style:dashed} } .prose h2{font-family:var(--font-display);font-size:26px;font-weight:500;color:var(--roo-ink);margin:44px 0 10px;letter-spacing:-0.01em} .prose h3{font-size:19px;font-weight:600;color:var(--roo-ink);margin:28px 0 8px} .prose p{margin:0 0 16px} .prose ul,.prose ol{margin:0 0 18px;padding-left:22px}.prose li{margin-bottom:8px} .prose a.inline,.prose p a,.prose li a{color:var(--roo-blue);font-weight:500;border-bottom:1px solid rgba(23,105,255,.3)} .prose strong{font-weight:600;color:var(--roo-ink)} .section-pad{padding:56px 0} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .info-card{background:#fff;border:1px solid var(--roo-line);border-radius:var(--radius-card,18px);padding:24px} .info-card h3,.info-card h2{font-size:18px;font-weight:600;font-family:var(--font-display);color:var(--roo-ink);margin:0 0 8px} .info-card p{font-size:14.5px;color:var(--roo-ink-soft);line-height:1.6;margin:0} .info-card .ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--accs,var(--roo-blue-soft));color:var(--acc,var(--roo-blue));margin-bottom:14px} .info-card .ic svg{width:23px;height:23px} .pcard-row{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--roo-line)} .pcard-row .n{font-family:var(--font-number);font-weight:700;font-size:14px;color:var(--roo-blue);letter-spacing:.1em;padding-top:4px} .pcard-row h3{font-size:19px;font-weight:600;font-family:var(--font-display);margin:0 0 6px} .pcard-row p{font-size:15px;color:var(--roo-ink-soft);line-height:1.6;margin:0} .callout{background:var(--roo-blue-soft);border:1px solid #CBDCFA;border-radius:16px;padding:20px 22px;font-size:15px;line-height:1.6;color:var(--roo-ink);margin:22px 0} .callout b{color:var(--roo-blue)} .note-limit{background:#FBF5E9;border:1px solid #F0E2C4;border-radius:12px;padding:14px 16px;font-size:13.5px;color:#7a5b1e;margin:16px 0} .evidence-list{display:flex;flex-direction:column;gap:14px;margin:18px 0} .ev-item{border:1px solid var(--roo-line);border-radius:14px;padding:18px 20px;background:#fff} .ev-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px;padding-bottom:12px;border-bottom:1px solid #EEF2FA} .ev-k{font-size:16px;font-weight:600;font-family:var(--font-display)} .ev-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px 24px} .ev-meta>div{display:flex;flex-direction:column;gap:3px} .ev-meta dt{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--roo-blue)} .ev-meta dd{margin:0;font-size:13px;color:var(--roo-ink);line-height:1.45} .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .form-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px} .form-field label{font-size:13px;font-weight:600;color:var(--roo-ink)} .form-field input,.form-field select,.form-field textarea{height:50px;border:1px solid var(--roo-line);border-radius:12px;padding:0 14px;font-size:15px;font-family:inherit;background:#fff;color:var(--roo-ink)} .form-field textarea{height:auto;padding:12px 14px;min-height:96px} .form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:2px solid var(--roo-blue);outline-offset:1px;border-color:var(--roo-blue)} .form-help{font-size:12.5px;color:var(--roo-ink-soft)} .form-note{font-size:13px;color:var(--roo-ink-soft);margin-top:4px} .form-msg{margin-top:14px;font-size:14px;padding:12px 15px;border-radius:11px;display:none} .form-msg.show{display:block} .form-msg.info{background:var(--roo-blue-soft);color:var(--roo-blue)} .form-msg.err{background:#FDEBEC;color:#C0342B} .pending-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(12px);background:var(--roo-ink);color:#fff;font-size:13px;font-weight:500;padding:11px 17px;border-radius:11px;box-shadow:0 16px 40px -12px rgba(0,0,0,.45);z-index:500;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:90vw;text-align:center} .pending-toast.show{opacity:1;transform:translateX(-50%) translateY(0)} [aria-current="page"]{color:var(--roo-blue)!important} .nav-link[aria-current="page"]{font-weight:600} .faq-min{max-width:760px;margin:0 auto} .tag-pill{display:inline-block;background:var(--roo-blue-soft);color:var(--roo-blue);border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;letter-spacing:.02em} @media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr}} @media(max-width:767px){.page-hero{padding-top:96px}.page-hero .wrap,.prose{padding-left:var(--gutter-mobile);padding-right:var(--gutter-mobile)}.ev-meta{grid-template-columns:1fr}} /* ===================== Article shell (from V5.5 article) ===================== */ /* ============================================================ ARTICLE LAYOUT ============================================================ */ .article-top{padding:120px var(--gutter-desktop) 0;max-width:calc(1180px + 2*var(--gutter-desktop));margin:0 auto} .breadcrumb{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--roo-ink-soft);margin-bottom:20px;flex-wrap:wrap} .breadcrumb a:hover{color:var(--roo-blue)} .breadcrumb .sep{color:#B9C4D8} .breadcrumb .current{color:var(--roo-ink)} .article-meta-top{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap} .cat-pill{display:inline-block;padding:6px 14px;border-radius:var(--radius-pill);background:var(--roo-blue-soft);color:var(--roo-blue);font-size:12.5px;font-weight:600} .meta-dot{font-size:13px;color:var(--roo-ink-soft)} .article-h1{font-size:clamp(30px,4vw,48px);line-height:1.1;font-weight:500;letter-spacing:-0.02em;max-width:20ch} /* C/D2 (V5.4): byline above the cover — "By Roocation Team", 34px avatar (desktop), tiny optional editorial line, ~22px gap. On mobile the avatar shrinks and the editorial line is removed (see the mobile block). */ .article-byline{display:flex;align-items:center;gap:11px;margin-top:22px;margin-bottom:2px} .byline-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--roo-deep-blue),var(--roo-blue));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-family:var(--font-display);font-size:13px;flex:none} .byline-info .bn{font-size:14.5px;font-weight:600;color:var(--roo-ink)} .byline-info .br{font-size:12px;color:var(--roo-ink-soft)} /* B1: article hero — breadcrumb spans the row, then 2 columns (text 56% / 16:9 media 44%) on desktop ≥1100px; stacks below 1100. B2: cover uses a relative path + a designed fallback (never a broken-image icon); it's the LCP image, so it is NOT lazy-loaded. */ .article-hero{margin-top:24px} .article-hero-text{min-width:0} .article-hero-media{margin:0} .cover-frame{margin:0;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:26px;background:#0A2D78;line-height:0} .cover-frame img{width:100%;height:auto;display:block} .cover-frame .cover-fallback{display:none;position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:linear-gradient(135deg,#04143F,#0A2D78 55%,#1769FF);line-height:1.3} .cover-frame .cover-fallback .cf-logo{width:160px;height:auto;filter:brightness(0) invert(1);opacity:.92} .cover-frame .cover-fallback .cf-label{font-size:12px;letter-spacing:0.03em;color:rgba(255,255,255,0.82)} .cover-frame.img-fallback .cover-fallback{display:flex} .cover-caption{font-size:12px;color:var(--roo-ink-soft);margin-top:10px;text-align:left;opacity:.8} /* P0.4: base (mobile-first) hero = single column, text then cover. The 2-col grid is desktop-only (see @media min-width:1100 at the foot of this file). */ /* body grid: article column + right TOC */ /* C1 (V5.4): article grid — total ~1180px content, body ~800px (65–80 char measure), TOC 292px, 88px gap. Sticky TOC aligns to the first paragraph (align-items:start). */ .article-shell{max-width:calc(1180px + 2*var(--gutter-desktop));margin:0 auto;padding:56px var(--gutter-desktop) 0;display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:88px;align-items:start} .article-body{max-width:820px;font-size:17px;line-height:1.75;color:#20304C} .article-body > *{margin-bottom:22px} .article-body .lead{font-size:20px;line-height:1.6;color:var(--roo-ink);font-weight:400} .article-body h2{font-size:27px;font-weight:500;color:var(--roo-ink);margin-top:44px;line-height:1.2;scroll-margin-top:20px} .article-body h3{font-size:20px;font-weight:600;color:var(--roo-ink);margin-top:32px;scroll-margin-top:20px} .article-body p{margin-bottom:20px} .article-body ul,.article-body ol{margin:0 0 22px;padding-left:22px} .article-body li{margin-bottom:9px} .article-body strong{font-weight:600;color:var(--roo-ink)} .article-body a.inline{color:var(--roo-blue);font-weight:500;border-bottom:1px solid rgba(23,105,255,0.3)} .article-body a.inline:hover{border-bottom-color:var(--roo-blue)} .pull-fact{border-left:3px solid var(--roo-blue);padding:6px 0 6px 20px;font-size:19px;line-height:1.5;color:var(--roo-ink);font-family:var(--font-display);font-weight:500} .article-disclaimer{margin-top:40px;padding-top:22px;border-top:1px solid var(--roo-line);font-size:13px;color:var(--roo-ink-soft);line-height:1.6} /* right-side sticky TOC (desktop). Batch 1.2 (P0 §14): minimal treatment — a plain heading + list with a clean active line (the .toc-rail a.active border-left rule below), NOT a filled rounded card/box around the whole rail (the brief's "no awkward rounded block plus curved edge"). */ .toc-rail{position:sticky;top:104px;align-self:start} .toc-inner{padding:0 0 0 2px} .toc-inner h4,.toc-inner .toc-label{font-size:12px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--roo-ink-soft);margin-bottom:14px} .toc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px} .toc-list a{display:block;padding:7px 12px;font-size:13.5px;line-height:1.4;color:var(--roo-ink-soft);transition:color .16s,background .16s,border-color .16s} .toc-list a.sub{padding-left:22px;font-size:13px} /* B3 — desktop rail: straight 3px blue active bar, no white capsule, no active background */ .toc-rail .toc-list a{border-left:3px solid transparent;border-radius:0} .toc-rail .toc-list a:hover{color:var(--roo-ink)} .toc-rail .toc-list a.active{color:var(--roo-blue);font-weight:600;border-left-color:var(--roo-blue);background:transparent} /* mobile disclosure keeps its approved behaviour (subtle blue active text) */ .toc-mobile .toc-list a.active{color:var(--roo-blue);font-weight:600} .toc-progress{height:3px;background:var(--roo-line);border-radius:2px;margin-top:16px;overflow:hidden} .toc-progress i{display:block;height:100%;width:0;background:var(--roo-blue);border-radius:2px;transition:width .1s linear} /* D3: mobile "On this page" — slim divider row (no card, not sticky) opens a bottom sheet */ .toc-mobile{display:none;margin:22px auto;max-width:820px} .toc-openrow{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 2px;border-top:1px solid var(--roo-line);border-bottom:1px solid var(--roo-line);font-size:14.5px;font-weight:600;color:var(--roo-ink);background:none;cursor:pointer} .toc-openrow .chev{width:18px;height:18px;color:var(--roo-blue);transition:transform .25s} .toc-openrow[aria-expanded="true"] .chev{transform:rotate(180deg)} .toc-scrim{position:fixed;inset:0;z-index:150;background:rgba(7,17,35,0.5);opacity:0;transition:opacity .3s ease} .toc-scrim.open{opacity:1} .toc-scrim[hidden]{display:none} .toc-sheet{position:fixed;left:0;right:0;bottom:0;z-index:151;background:#fff;border-radius:22px 22px 0 0;box-shadow:0 -18px 50px -20px rgba(6,26,74,0.4);transform:translateY(100%);transition:transform .34s var(--ease-header);max-height:80dvh;display:flex;flex-direction:column} .toc-sheet.open{transform:translateY(0)} .toc-sheet[hidden]{display:none} .toc-sheet-grab{display:flex;justify-content:center;padding:10px 0 2px;flex:none} .toc-sheet-grab span{width:42px;height:4px;border-radius:2px;background:var(--roo-line)} .toc-sheet-head{display:flex;align-items:center;justify-content:space-between;padding:6px 18px 12px;border-bottom:1px solid var(--roo-line);flex:none} .toc-sheet-title{font-family:var(--font-display);font-size:17px;font-weight:600;margin:0;color:var(--roo-ink)} .toc-sheet-x{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:var(--roo-ink-soft);background:var(--roo-canvas);flex:none} .toc-sheet-x svg{width:20px;height:20px} .toc-sheet-list{list-style:none;margin:0;padding:8px 12px calc(14px + env(safe-area-inset-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .toc-sheet-list a{display:block;padding:13px 14px;border-radius:11px;font-size:15px;color:var(--roo-ink);line-height:1.4;border-left:none} .toc-sheet-list a.active{background:var(--roo-blue-soft);color:var(--roo-blue);font-weight:600} .toc-scrim,.toc-sheet{transition:none} /* related + CTA + footer */ .related{max-width:calc(1180px + 2*var(--gutter-desktop));margin:72px auto 0;padding:56px var(--gutter-desktop);border-top:1px solid var(--roo-line)} .related h2{font-size:26px;font-weight:500;margin-bottom:28px} .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .rel-card{border:1px solid var(--roo-line);border-radius:20px;padding:24px;transition:transform .2s var(--ease-reveal),box-shadow .2s;display:block} .rel-card:hover{transform:translateY(-3px);box-shadow:0 16px 36px -20px rgba(6,26,74,0.2)} .rel-card .rmeta{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--roo-ink-soft);margin-bottom:10px} .rel-card .rmeta .cat{color:var(--roo-blue);font-weight:600} .rel-card h3{font-size:17px;font-weight:500;line-height:1.3} .rel-card p{font-size:13.5px;color:var(--roo-ink-soft);margin-top:8px;line-height:1.5} .article-cta{text-align:center;padding:80px var(--gutter-desktop);margin-top:24px;background:linear-gradient(165deg,#04143F,#082A77 45%,#1769FF);color:#fff} .article-cta h2{font-size:clamp(28px,3vw,40px);font-weight:500;color:#fff;max-width:640px;margin:0 auto;letter-spacing:-0.02em} .article-cta p{font-size:17px;color:rgba(255,255,255,0.88);margin:16px auto 0;max-width:520px} .article-cta .cta-row{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap} /* ========================================================================== P0.4 — RESTORED responsive contract (these blocks lost their @media wrappers during extraction and were applying globally). Gutters come from the :root --gutter-* remap in site.css.raw, so no per-element gutter rules are needed here. Desktop ≥1100: two-column hero + right sticky TOC. <1100: single column + mobile TOC. ========================================================================== */ @media(min-width:1100px){ /* two-column article hero: text 58% / 16:9 cover 42% */ .article-hero{display:grid;grid-template-columns:minmax(0,58fr) minmax(0,42fr);gap:72px;align-items:start} } @media(max-width:1099px){ /* TOC moves inline (On-this-page sheet); article body goes full width; hero already stacks (base is single-column) — text → cover with a ~24px gap. */ .article-shell{grid-template-columns:1fr;gap:0} .toc-rail{display:none} .toc-mobile{display:block} .article-hero-media{margin-top:24px} } @media(max-width:767px){ /* mobile type scale + gutters (gutters via :root remap); byline wraps, drop the editorial role line */ .article-top{padding-top:100px} .article-body{font-size:16px} .article-body .lead{font-size:18px} .byline-avatar{width:30px;height:30px;font-size:12px} .byline-info .br{display:none} .related-grid{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ .toc-scrim,.toc-sheet{transition:none} } /* supplemental */ .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} .crumb .sep{color:var(--roo-line);margin:0 2px} .price-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--roo-blue);color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:4px 12px;border-radius:999px} .price-card{position:relative}.price-best{font-size:13.5px;color:var(--roo-ink-soft);margin:8px 0 14px;min-height:38px} .cmp-matrix{width:100%;border-collapse:collapse;font-size:14px} .cmp-matrix th,.cmp-matrix td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--roo-line)} .cmp-matrix thead th{font-family:var(--font-display);font-weight:600;color:var(--roo-ink);background:#FBFCFF} .cmp-matrix th[scope=row]{font-weight:600;color:var(--roo-ink)} .cmp-matrix td{color:var(--roo-ink-soft)} .footer-tag{font-size:13.5px;color:var(--roo-ink-soft);line-height:1.55;margin:12px 0 0;max-width:36ch} .footer-col h4,.footer-col .footer-h{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--roo-ink-soft);margin:0 0 12px} .footer-col a{display:block;font-size:14px;color:var(--roo-ink);margin-bottom:9px} .footer-col a:hover{color:var(--roo-blue)} /* Batch 1.2 (P0 §17): four-group footer — brand + 4 columns (was brand + 3) */ .footer-top--4{grid-template-columns:1.15fr 1fr 1fr 1fr 1fr} @media(max-width:1099px){.footer-top--4{grid-template-columns:1fr 1fr 1fr}} @media(max-width:767px){.footer-top--4{grid-template-columns:1fr 1fr}} .footer-cookie-btn{display:block;font-size:14px;color:var(--roo-ink);margin-bottom:9px;text-align:left;padding:0;background:none;border:none;cursor:default;text-decoration:underline;text-decoration-color:var(--roo-line);text-underline-offset:3px} .footer-cookie-btn:hover{color:var(--roo-blue)} .footer-cookie-btn:focus-visible{outline:2px solid var(--roo-blue);outline-offset:2px;border-radius:3px} .footer-cookie-note{max-width:var(--landing-max);margin:-6px auto 0;font-size:11.5px;color:var(--roo-ink-soft);opacity:.75;line-height:1.5} .footer-social{display:inline-flex;gap:10px} .footer-social .soc-link{display:inline-flex;color:var(--roo-ink)} .article-hero-notext{padding:132px 0 8px} .article-hero-notext .wrap{max-width:820px;margin:0 auto;padding:0 var(--gutter-desktop)} /* ===================== Batch 1.1 tablet/overflow fixes ===================== */ /* the 3-up pricing row overflowed at 768 (only wrapped at <=767); stack it below 900 */ @media(max-width:900px){.price-grid{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}} /* ===================== Batch 1.1 content-parity styles ===================== */ /* glossary term list (migrated V25 glossary) */ .gloss-term{padding:18px 0;border-top:1px solid var(--roo-line)} .prose .gloss-term:first-of-type{border-top:1px solid var(--roo-line);margin-top:8px} .gloss-term h3,.gloss-term h2{font-size:18px;font-weight:600;color:var(--roo-ink);margin:0 0 6px} .gloss-term p{margin:0 0 6px} .gloss-note{font-size:14px;color:var(--roo-ink-soft);line-height:1.6} .gloss-note strong{color:var(--roo-ink)} /* prose spacing polish for the longer migrated pages */ .prose h2{scroll-margin-top:96px} .prose .info-card h3,.info-card h2{margin-top:0} .pcard-steps{margin:0 0 10px}