/* The pricing page (pricing-page.js; TASK-183), in Review Explorer's language: a night-blue band, paper sections,
   white cards for the fast, live layer and a night card for the deep research. The cards and Studio's band are
   plans.css's. Everything under .pr, so nothing reaches another page. */
.pr{--night:#0b0f1a;--navy:#14223f;--navy-2:#0d1529;--bone:#ecedf0;--bone-soft:#b9c0cf;--bone-mute:#8e96a8;--blue:#5486e0;--blue-soft:#9cbcf5;--gold:#d4a012;--gold-soft:#e0b04a;--paper:#f4f1ea;--panel:#fbf9f3;--ink:#15161a;--muted:#6b6d72;--rule:#cfcbbf;--rule-soft:#e2ded3;--sans:var(--font-display,Atlas,'DM Sans',-apple-system,'Segoe UI',sans-serif);--gut:36px;
 background:var(--paper);color:var(--ink);font:16px/1.55 var(--sans);min-height:70vh}
.pr h1,.pr h2,.pr h3{font-family:var(--sans);letter-spacing:-.025em;text-wrap:balance;font-weight:500}
.pr p,.pr li,.pr td{text-wrap:pretty}
.pr a{color:inherit}
.pr-in{max-width:1240px;margin:0 auto;padding:0 var(--gut)}
.pr-boot{min-height:70vh;background:linear-gradient(180deg,var(--navy) 0,var(--navy-2) 420px,var(--paper) 420px)}
.pr-k{margin:0 0 6px;font-size:14px;font-weight:600;color:#2f5fae;letter-spacing:.01em}

/* ---- the band, and the cards rising out of it ---- */
.pr-hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-2) 100%);color:var(--bone);padding:50px 0 200px;position:relative;overflow:hidden}
.pr-hero:before{content:'';position:absolute;right:-180px;top:-200px;width:620px;height:620px;border:1px solid rgba(84,134,224,.16);border-radius:50%}
.pr-hero:after{content:'';position:absolute;right:-60px;top:-80px;width:380px;height:380px;border:1px solid rgba(84,134,224,.12);border-radius:50%}
.pr-hero>*{position:relative;z-index:1}
.pr-ak{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--blue-soft)}
.pr-hero h1{font-size:48px;line-height:1.06;margin:0 0 16px;color:#fff;font-weight:400;max-width:820px}
.pr-lead{margin:0;font-size:17px;color:var(--bone-soft);max-width:760px}
.pr-plans{margin-top:-160px;position:relative;z-index:1;padding-bottom:10px}

/* ---- the cascade: one chart in the cards' own dress, ticks filling in from the Review Map to the Review Atlas ---- */
.pr-vs{padding:68px 0 24px}
.pr-vs h2,.pr-faq h2{font-size:34px;line-height:1.1;margin:0 0 10px}
.pr-vs-lead{margin:0 0 28px;font-size:17px;color:#3a3c42;max-width:780px}
.pr-chart{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 22px 50px rgba(11,15,26,.13);border:1px solid #e4dfd2}
.pr-table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:15px;line-height:1.4}
/* The corner stands with the product headers: the same night, the chart's own headline in it. */
.pr-corner{width:34%;padding:22px 26px;vertical-align:bottom;text-align:left;background:linear-gradient(170deg,#18213a 0%,var(--night) 85%);color:#fff;box-shadow:inset -1px 0 0 rgba(236,237,240,.08)}
.pr-corner b{display:block;font-size:25px;line-height:1.15;font-weight:500;letter-spacing:-.02em}
.pr-corner span{display:block;margin-top:6px;font-size:14.5px;color:var(--bone-soft)}
.pr-groups th{padding:9px 16px;font-size:14px;font-weight:700;letter-spacing:.01em;text-align:center}
.pr-groups th.is-live{background:#0f1a33;color:var(--blue-soft);box-shadow:inset 0 3px 0 var(--blue)}
.pr-groups th.is-deep{background:#191509;color:var(--gold-soft);box-shadow:inset 0 3px 0 var(--gold)}
.pr-names th{padding:16px 16px 18px;text-align:center;vertical-align:top;color:#fff;background:linear-gradient(170deg,#1f3561 0%,var(--navy) 80%)}
.pr-names th.is-atlas{background:linear-gradient(170deg,#2a2412 0%,#14130f 80%)}
.pr-names th+th{box-shadow:inset 1px 0 0 rgba(236,237,240,.08)}
.pr-ic svg{width:28px;height:28px;display:block;margin:0 auto 8px}
.pr-names b{display:block;font-size:19px;font-weight:600;letter-spacing:-.015em}
.pr-names small{display:block;margin-top:3px;font-size:14px;color:var(--bone-soft)}
.pr-names .is-atlas small{color:var(--gold-soft);font-weight:600}
.pr-names small.pr-tax{margin-top:1px;font-size:12.5px;font-weight:400;color:var(--bone-mute)}
.pr-names s{color:var(--bone-mute);font-weight:400}
/* Best for: the row that answers the corner's question, so it reads first. */
.pr-best th,.pr-best td{padding:18px 18px;font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);border-bottom:2px solid var(--ink);vertical-align:middle}
.pr-table tbody tr.pr-best th[scope=row]{text-align:left;padding-left:26px;background:#dfe7f6;color:#1f3561;font-size:18px;font-weight:700;letter-spacing:-.01em;box-shadow:inset 4px 0 0 var(--blue)}
.pr-best td{text-align:center;background:#eef3fb}
.pr-best td.is-atlas{background:#f8edcd}
.pr-band th{padding:22px 26px 10px;text-align:left;font-size:16px;font-weight:700;letter-spacing:-.01em;background:#faf8f3;border-top:1px solid #ebe6d9;border-bottom:1px solid #ebe6d9}
.pr-table tbody th[scope=row]{text-align:left;font-weight:400;padding:13px 16px 13px 26px;color:#2c2e33;vertical-align:middle}
.pr-table tbody td{padding:11px 16px;text-align:center;vertical-align:middle;color:#2c2e33}
.pr-table tbody tr:not(.pr-band):not(.pr-best)+tr:not(.pr-band) th,.pr-table tbody tr:not(.pr-band):not(.pr-best)+tr:not(.pr-band) td{border-top:1px solid #efebe1}
.pr-table tbody td.is-atlas{background:rgba(212,160,18,.07)}
.pr-table tbody .pr-best td.is-atlas{background:#f8edcd}
.pr-yes{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--blue);box-shadow:0 3px 8px rgba(84,134,224,.3)}
.pr-yes svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.is-atlas .pr-yes{background:var(--gold);box-shadow:0 3px 8px rgba(212,160,18,.3)}
.is-atlas .pr-yes svg{stroke:#1b1606}
.pr-note{display:block;margin-top:4px;font-size:13.5px;line-height:1.35;color:#3a3c42}
.pr-note.is-part{margin:0;font-weight:600;color:#2f5fae}
.pr-no{color:#c9c3b5;font-size:18px}
.pr-ready th{font-weight:600!important}
.pr-ready td{font-size:14.5px}
.pr-cta td{padding:18px 16px 22px;border-top:1px solid #efebe1}
.pr-btn{display:flex;justify-content:center;align-items:center;box-sizing:border-box;padding:12px 14px;border-radius:6px;border:1px solid transparent;font:700 15px var(--sans);text-decoration:none;white-space:nowrap;background:var(--blue);color:#fff!important}
.pr-btn:hover{background:#6a97e6}
.pr-btn.is-map{background:none;border-color:var(--blue);color:#2f5fae!important}
.pr-btn.is-map:hover{background:#eef3fc}
.pr-btn.is-atlas{background:var(--gold);color:var(--night)!important}
.pr-btn.is-atlas:hover{background:var(--gold-soft)}
.pr-table s{font-weight:400}

/* ---- questions: three groups in a card, and the way in beside them ---- */
.pr-faq{padding:60px 0 72px}
.pr-faq-in{display:grid;grid-template-columns:330px minmax(0,1fr);gap:48px;align-items:start}
.pr-faq-side{position:sticky;top:24px}
.pr-faq-lead{margin:0;color:var(--muted);font-size:15px}
.pr-faq-lead a,.pr-faq details a{text-decoration:underline;text-underline-offset:3px}
.pr-faq-cta{margin-top:26px;padding:20px 22px 22px;border-radius:12px;background:linear-gradient(160deg,#1f3561 0%,var(--navy) 75%);color:#fff;box-shadow:0 14px 34px rgba(11,15,26,.18)}
.pr-faq-cta b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em}
.pr-faq-cta p{margin:6px 0 16px;font-size:14.5px;color:var(--bone-soft)}
.pr-faq-cta .pr-btn.is-map{background:#fff;border-color:#fff;color:#1f3561!important}
.pr-faq-cta .pr-btn.is-map:hover{background:#e3ebf8}
.pr-faq-list{background:#fff;border-radius:14px;border:1px solid #e4dfd2;box-shadow:0 22px 50px rgba(11,15,26,.1);padding:8px 30px 14px}
.pr-faq-group h3{margin:22px 0 4px;font-size:14px;font-weight:700;letter-spacing:.02em;color:#2f5fae}
.pr-faq-group+.pr-faq-group{border-top:1px solid #ebe6d9;margin-top:10px}
.pr-faq details{border-bottom:1px solid #efebe1}
.pr-faq-group details:last-child{border-bottom:0}
.pr-faq summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;font-size:16.5px;font-weight:600;line-height:1.35}
.pr-faq summary::-webkit-details-marker{display:none}
.pr-faq summary:hover span{color:#2f5fae}
.pr-faq summary i{flex:none;position:relative;width:28px;height:28px;border-radius:50%;border:1.5px solid #cfc9ba;transition:background .15s,border-color .15s}
.pr-faq summary i:before,.pr-faq summary i:after{content:'';position:absolute;left:50%;top:50%;width:11px;height:1.8px;margin:-.9px 0 0 -5.5px;background:#6b6d72;border-radius:1px}
.pr-faq summary i:after{transform:rotate(90deg);transition:transform .15s}
.pr-faq details[open] summary i{background:var(--blue);border-color:var(--blue)}
.pr-faq details[open] summary i:before,.pr-faq details[open] summary i:after{background:#fff}
.pr-faq details[open] summary i:after{transform:rotate(0)}
.pr-faq details p{margin:-2px 46px 18px 0;color:#3a3c42;font-size:15.5px;line-height:1.55}
@media(prefers-reduced-motion:reduce){.pr-faq summary i,.pr-faq summary i:after{transition:none}}

@media(max-width:900px){.pr-faq-in{grid-template-columns:minmax(0,1fr);gap:22px}.pr-faq-side{position:static}.pr-corner{width:28%}.pr-corner b{font-size:21px}}
@media(max-width:820px){.pr-plans{margin-top:-170px}}
@media(max-width:760px){
 .pr{--gut:16px}
 .pr-hero{padding:34px 0 180px}
 .pr-hero h1{font-size:34px}
 .pr-lead{font-size:16px}
 .pr-vs{padding-top:44px}
 .pr-vs h2,.pr-faq h2{font-size:28px}
 .pr-faq-list{padding:4px 18px 10px}
 .pr-faq details p{margin-right:0}
}
/* A phone: the names once at the head, then each row's question across the top and its three answers under it. */
@media(max-width:640px){
 .pr-table,.pr-table thead,.pr-table tbody{display:block}
 .pr-table tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
 .pr-table tr.pr-groups{display:none}
 .pr-names th{padding:12px 6px 14px}
 .pr-names b{font-size:14px}
 .pr-names small{font-size:12px}
 .pr-ic svg{width:22px;height:22px;margin-bottom:6px}
 .pr-table tr.pr-band{display:block}
 .pr-band th{display:block;padding:18px 14px 8px}
 .pr-table tbody th[scope=row]{grid-column:1/-1;padding:9px 12px;font-size:14.5px;font-weight:600;text-align:center;color:var(--ink);background:#f4f1ea;border-top:1px solid #e4dfd2!important;border-bottom:1px solid #ebe6d9}
 .pr-table tbody td{padding:12px 6px 14px;border-top:0!important}
 .pr-table tbody tr.pr-best th[scope=row]{padding:10px 12px;border-bottom:0;font-size:16px;text-align:center}
 .pr-best td{font-size:13.5px;padding:6px 8px 14px}
 .pr-note{font-size:12.5px}
 .pr-cta td:first-child{display:none}
 .pr-cta td{padding:14px 5px 16px;border-top:1px solid #efebe1}
 .pr-btn{font-size:13px;padding:10px 4px;white-space:normal;text-align:center}
}
