/* Product additions to design.css (design package 13f8266). Loaded after design.css and
   tokens-a11y.css. Every visual deviation from the package is listed in
   docs/ui-revamp/design-13f8266/DEVIATIONS.md with its reason. */

@font-face{font-family:'Geist';src:url('/static/rw/fonts/Geist-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/static/rw/fonts/GeistMono-Variable.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}

html,body{height:100%}
body{background:#F4F4F6;-webkit-font-smoothing:antialiased}
.rw-root{min-height:100%}

/* Accessible orange: white text on the button fill (deviation D1). */
.rw-root .rw-btn-orange{background:var(--rw-a11y-btn-orange) !important}
.rw-root .rw-btn-orange:hover{background:var(--rw-a11y-btn-orange-hover) !important}
.rw-root .rw-in::placeholder,.rw-root .rw-input::placeholder{color:var(--rw-a11y-text-placeholder)}

/* Skip link and screen-reader text. */
.rw-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:#0B0B0D;color:#FFFFFF;font:500 14px 'Geist',system-ui,sans-serif;text-decoration:none}
.rw-skip:focus{top:12px}

/* Focus that is moved by the page (headings after a route change) shows no ring for a mouse user. */
.rw-root [tabindex="-1"]:focus{outline:none}

/* A short note while a section module loads or fails. */
.rw-note{margin:0;font-size:15px;color:#45454F}

/* Shell (deviation D3): the account block shows at the end of the page only where the sidebar
   is a top bar, so a phone visitor can always see who is signed in and sign out. */
.rw-phone-account{display:none}
@container rw (max-width: 900px){.rw-phone-account{display:flex}}
.rw-rawmain{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.rw-rows>li{list-style:none}
/* Domains table (UX review C2): the selected row as data, a visible focus inside a row, calmer rows. */
.rw-tr[data-selected="true"]{background:#FFF6F1;box-shadow:inset 3px 0 0 #FF5A1F}
.rw-tr:focus-within{background:#FCFCFD}
.rw-tr[data-selected="true"]:focus-within{background:#FFF6F1}
.rw-th [role="columnheader"]{text-align:left}
/* Report question rows (UX review C3): a quiet hover and a visible keyboard focus. */
.rw-qrow:hover{background:#FCFCFD}
.rw-qrow:focus-visible{outline:2px solid #C2410C;outline-offset:-2px;border-radius:inherit}

/* Sheet inside the scrim must not pass its clicks to the scrim's close handler (overlay.js
   compares the event target), and the dialog keeps its width on narrow screens. */
.rw-scrim>.rw-sheet{position:relative}
.rw-dscrim>.rw-dlg{flex:0 0 auto}

/* Toasts: inline in the design; here a fixed pill at the bottom centre, above the phone tab bar. */
.rw-toastpos{position:fixed;left:0;right:0;bottom:24px;z-index:70;display:flex;justify-content:center;pointer-events:none;padding:0 16px}
.rw-toastpos>*{pointer-events:auto}
@container rw (max-width: 900px){.rw-toastpos{bottom:96px}}
@media (prefers-reduced-motion: reduce){.rw-rise{animation:none}}
@container rw (max-width: 900px){.rw-sidenav{display:none}}

/* Touch targets (deviation D13): the product keeps 44 by 44 px controls on phones, as the dashboard
   did before this design. The package draws 38 to 40 px controls; only their box grows. */
@container rw (max-width: 900px){
.rw-main .rw-btn,.rw-main button,.rw-main a.rw-btn{min-height:44px;min-width:44px}
.rw-main .rw-linkbtn,.rw-main a.rw-link{min-height:44px;display:inline-flex;align-items:center}
.rw-tabbar a{min-height:44px}
}
.rw-phone-account a{min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center}
/* The legal links get their own row on the phone; their 44px targets need no extra row gap. */
.rw-phone-account .rw-sidelegal{flex:1 1 100%;row-gap:0}

/* Reduced motion: package 13f8266 section 11 stops or simplifies every animation under this
   preference. Inline styles carry some transitions, so 1 rule covers every element of the page. */
@media (prefers-reduced-motion: reduce){.rw-root *,.rw-root *::before,.rw-root *::after{animation:none !important;transition:none !important}}

/* Scrolling areas keep wheel, touch and keyboard scrolling but draw no scrollbar track or thumb
   (owner, 19 Oct). The sidebar's own rule is in shell.css. Focus rings are unaffected. */
.rw-scroll,.rw-wzscroll,.rw-wzctx-in,.rw-sheetbody,.rw-dscrim{scrollbar-width:none;-ms-overflow-style:none}
.rw-scroll::-webkit-scrollbar,.rw-wzscroll::-webkit-scrollbar,.rw-wzctx-in::-webkit-scrollbar,.rw-sheetbody::-webkit-scrollbar,.rw-dscrim::-webkit-scrollbar{display:none;width:0;height:0}

/* Help and legal (owner, 21 Oct 2026): 1 small "?" at the bottom right; its menu lists support and
   every legal link. Above the phone tab bar below 900px. */
.rw-help{position:fixed;right:16px;bottom:16px;z-index:40;display:flex;flex-direction:column;align-items:flex-end;gap:8px;font-family:'Geist',ui-sans-serif,system-ui,sans-serif}
.rw-help-btn{width:32px;height:32px;border-radius:999px;border:1px solid #E2E2E7;background:#FFFFFF;color:#45454F;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px -8px rgba(11,11,13,0.35)}
.rw-help-btn:hover,.rw-help-btn[aria-expanded="true"]{color:#0B0B0D;border-color:#C9C9D1}
.rw-help-btn:focus-visible,.rw-help-link:focus-visible{outline:2px solid #C2410C;outline-offset:2px}
.rw-help-panel{width:240px;max-height:calc(100vh - 96px);overflow:auto;padding:10px;border-radius:16px;background:#FFFFFF;border:1px solid #ECECF0;box-shadow:0 30px 60px -20px rgba(11,11,13,0.35)}
.rw-help-panel[hidden]{display:none}
.rw-help-panel ul{list-style:none;margin:0 0 6px;padding:0}
.rw-help-head{margin:6px 8px 4px;font-size:12px;font-weight:600;color:#6B6B76}
.rw-help-link{display:flex;align-items:center;min-height:36px;padding:0 8px;border-radius:10px;font-size:14px;color:#0B0B0D;text-decoration:none}
.rw-help-link:hover{background:#F4F4F6}
@media (max-width: 900px){.rw-help{bottom:92px;right:12px}}
.rw-help[hidden]{display:none}
/* Room at the end of a page, so its last row scrolls clear of the button. */
.rw-scroll::after{content:"";display:block;height:56px}
@media print{.rw-help{display:none}}

/* Dropdowns (owner, 21 Oct 2026): 1 look for every select. The closed field everywhere; the open list
   too where the browser supports customizable selects (appearance: base-select), else the native
   list. Keyboard and screen reader behaviour stay the browser's own. */
select,select.rw-in,.rw-wd-field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-color:#FFFFFF;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:16px 16px;padding-right:42px;border-radius:12px;color:#0B0B0D;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;transition:border-color .15s,box-shadow .15s}
select:hover{border-color:#A1A1AA}
select:focus-visible{outline:2px solid #FF5A1F;outline-offset:2px}
@supports (appearance: base-select){
select,select.rw-in,.rw-wd-field select{appearance:base-select;background-image:none;display:inline-flex;align-items:center}
select::picker-icon{content:"";width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B6B76' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center/16px 16px no-repeat;transition:rotate .15s}
select:open::picker-icon{rotate:180deg}
::picker(select){appearance:base-select;margin-top:6px;padding:6px;border:1px solid #ECECF0;border-radius:14px;background:#FFFFFF;box-shadow:0 24px 48px -18px rgba(11,11,13,0.3);font-family:'Geist',ui-sans-serif,system-ui,sans-serif}
select option{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:10px;font-size:14.5px;color:#0B0B0D;white-space:normal;cursor:pointer}
select option::checkmark{display:none}
select option:hover,select option:focus-visible{background:#F4F4F6;outline:none}
select option:checked{background:#FFF1EA;color:#9A3412;font-weight:500}
}
@media (prefers-reduced-motion: reduce){select::picker-icon{transition:none}}

/* Centred moments (owner, 21 Oct 2026): a confirmed payment and the first visit. */
.rw-celebrate{position:relative;width:440px;overflow:hidden;text-align:center;border-radius:28px;box-shadow:0 0 0 6px rgba(255,255,255,0.35),0 60px 120px -40px rgba(11,11,13,.55)}
.rw-celebrate-glow{position:absolute;inset:0 0 auto 0;height:190px;background:radial-gradient(120% 90% at 50% 0%,#FFB37A 0%,#FF8A4C 32%,rgba(255,138,76,0.25) 62%,rgba(255,255,255,0) 82%);pointer-events:none}
.rw-celebrate-glow::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,0.35) 42%,rgba(255,255,255,0) 54%)}
.rw-celebrate-spark{position:absolute;width:4px;height:4px;border-radius:999px;background:#FFFFFF;box-shadow:0 0 8px 2px rgba(255,255,255,0.8);animation:rw-twinkle 2.4s ease-in-out infinite}
.rw-celebrate-spark:nth-child(2){animation-delay:.6s}.rw-celebrate-spark:nth-child(3){animation-delay:1.2s}.rw-celebrate-spark:nth-child(4){animation-delay:1.8s}
@keyframes rw-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
.rw-celebrate-close{position:absolute;right:14px;top:14px;z-index:2;width:34px;height:34px;border-radius:999px;border:0;background:rgba(255,255,255,0.7);color:#3F3F46;display:flex;align-items:center;justify-content:center;cursor:pointer}
.rw-celebrate-close:hover{background:#FFFFFF}
.rw-celebrate-close:focus-visible{outline:2px solid #C2410C;outline-offset:2px}
.rw-celebrate-body{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:44px 32px 8px}
.rw-celebrate-tile{width:88px;height:88px;border-radius:26px;background:linear-gradient(150deg,#FFFFFF,#FFF1EA);display:flex;align-items:center;justify-content:center;box-shadow:0 24px 40px -16px rgba(226,68,12,0.75),inset 0 0 0 1px rgba(255,255,255,0.9);margin-bottom:8px;animation:rw-pop .45s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes rw-pop{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:none}}
.rw-celebrate-eyebrow{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:#FFF1EA;color:#9A3412;font-size:12.5px;font-weight:600}
.rw-celebrate-title{margin:0;font-size:26px;line-height:1.15;letter-spacing:-0.03em;font-weight:600;color:#0B0B0D;overflow-wrap:anywhere}
.rw-celebrate-text{margin:0;max-width:340px;font-size:15px;line-height:1.55;color:#45454F}
.rw-celebrate-facts{margin:8px 0 0;width:100%;box-sizing:border-box;display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 16px;padding:14px 16px;border-radius:16px;background:#FAFAFB;border:1px solid #F0F0F3;text-align:left;font-size:14px}
.rw-celebrate-facts dt{color:#6B6B76}.rw-celebrate-facts dd{margin:0;font-weight:500;color:#18181B;overflow-wrap:anywhere}
.rw-celebrate-steps{list-style:none;margin:8px 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}
.rw-celebrate-steps li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;background:#FAFAFB;border:1px solid #F0F0F3;font-size:14.5px;color:#27272A}
.rw-celebrate-steps li span{flex:0 0 auto;width:26px;height:26px;border-radius:999px;background:linear-gradient(150deg,#FF8A4C,#FF5A1F 55%,#E2440C);color:#FFFFFF;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.rw-celebrate-foot{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:20px 28px 28px;margin-top:12px;border-top:1px solid #F0F0F3;background:#FCFCFD}
@media (max-width: 520px){.rw-celebrate{width:100%}.rw-celebrate-foot>*{flex:1 1 100%}}
@media (prefers-reduced-motion: reduce){.rw-celebrate-spark,.rw-celebrate-tile{animation:none}}

/* Report readability (owner, 21 Oct 2026). Notes fold into 1 strip under the header. */
.rw-notes{border-radius:18px;background:#FFFBF0;border:1px solid #F4E2B0}
.rw-notes-sum{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 16px;cursor:pointer}
.rw-notes-sum::-webkit-details-marker{display:none}
.rw-notes-sum:focus-visible{outline:2px solid #C2410C;outline-offset:2px;border-radius:16px}
.rw-notes-lead{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:#7A5600}
.rw-notes-chips{display:inline-flex;flex-wrap:wrap;gap:6px;flex:1 1 280px;min-width:0}
.rw-notes-chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:#FFF1CC;color:#6B4A00;font-size:12.5px;font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rw-notes-more{display:inline-flex;align-items:center;gap:4px;margin-left:auto;font-size:13.5px;font-weight:500;color:#7A5600}
.rw-notes-close{display:none}
.rw-notes[open] .rw-notes-open{display:none}.rw-notes[open] .rw-notes-close{display:inline}
.rw-notes[open] .rw-notes-more svg{transform:rotate(180deg)}
.rw-notes-body{display:flex;flex-direction:column;gap:10px;padding:0 12px 12px}
/* Question rows: the most serious result reads first; the badge of a contradiction is solid. */
article[data-q][data-tone="problem"] .rw-qrow{background:linear-gradient(90deg,#FFF5F6,#FFFFFF 60%) !important}
article[data-q][data-tone="attention"] .rw-qrow{background:linear-gradient(90deg,#FFFBEE,#FFFFFF 60%) !important}
article[data-q][data-tone="problem"] [data-part="outcome"] .rw-verdict{background:#C8102E !important;color:#FFFFFF !important}
article[data-q][data-tone="problem"] [data-part="outcome"] .rw-verdict svg *{stroke:#FFFFFF}

/* Plan cards (owner, 21 Oct 2026): soft glow, large price, glossy action, facts with icons. */
.rw-plan{position:relative;flex:1 1 260px;min-width:0;display:flex;flex-direction:column;overflow:hidden;border-radius:26px;background:#FAFAFB;box-shadow:0 1px 0 rgba(255,255,255,0.9) inset,0 0 0 1px #ECECF0,0 24px 50px -36px rgba(11,11,13,0.35)}
.rw-plan[aria-current="true"]{box-shadow:0 0 0 2px #FF5A1F,0 24px 50px -30px rgba(255,90,31,0.6)}
/* The glow covers the card and fades to nothing inside it: no straight edge anywhere. */
.rw-plan-glow{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(70% 30% at 25% 0%,rgba(139,163,255,0.38),rgba(139,163,255,0) 100%),radial-gradient(55% 24% at 85% 6%,rgba(255,180,120,0.28),rgba(255,180,120,0) 100%)}
.rw-plan[data-featured="true"] .rw-plan-glow{background:radial-gradient(75% 34% at 50% 0%,rgba(255,170,90,0.55),rgba(255,170,90,0) 100%),radial-gradient(45% 22% at 12% 10%,rgba(255,90,31,0.30),rgba(255,90,31,0) 100%),radial-gradient(45% 22% at 88% 10%,rgba(255,138,76,0.30),rgba(255,138,76,0) 100%)}
.rw-plan[data-plan="business"] .rw-plan-glow{background:radial-gradient(70% 30% at 75% 0%,rgba(168,139,255,0.36),rgba(168,139,255,0) 100%),radial-gradient(55% 24% at 15% 6%,rgba(255,196,110,0.32),rgba(255,196,110,0) 100%)}
.rw-plan-top{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px 24px 22px}
.rw-plan-name{margin:0;font-size:19px;font-weight:600;letter-spacing:-0.02em;color:#0B0B0D}
.rw-plan[data-featured="true"] .rw-plan-name{background:linear-gradient(90deg,#E2440C,#FF8A4C 55%,#C2410C);-webkit-background-clip:text;background-clip:text;color:transparent}
.rw-plan-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;background:#FFF1EA;color:#9A3412;font-size:12px;font-weight:600}
.rw-plan-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rw-plan-amount{font-size:40px;line-height:1;font-weight:600;letter-spacing:-0.04em;color:#0B0B0D}
.rw-plan-per{font-size:14px;line-height:1.3;color:#5B5B66}
.rw-plan-cta.rw-btn-ink{background:linear-gradient(180deg,#2A2A30,#0B0B0D) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.18),0 10px 20px -10px rgba(11,11,13,0.6)}
.rw-plan-current{display:flex;align-items:center;justify-content:center;gap:8px;height:46px;border-radius:999px;background:#FFFFFF;box-shadow:inset 0 0 0 1px #FAD3BF;font-size:14.5px;font-weight:600;color:#C2410C}
.rw-plan-rest{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:14px;padding:20px 24px 24px;border-top:1px solid #EFEFF2}
.rw-plan-facts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.rw-plan-facts li{display:flex;align-items:center;gap:12px;font-size:15px;color:#18181B}
.rw-plan-facts li svg{flex:0 0 auto;color:#45454F}
.rw-plan-notes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.45;color:#6B6B76}
/* The plan cards share 1 grid on wide screens (subgrid), so every top part and divider line up. */
@media (min-width: 900px){
.rw-swipe:has(> .rw-plan){display:grid !important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));grid-template-rows:auto auto}
.rw-swipe > .rw-plan{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:0}
}
