/* The products as cards (plans.js), on the pricing page and in the pop-up panel any page can open. Blue is the fast,
   live layer (the Review Map and Review Explorer), gold the deep research (the Review Atlas), as on Review Explorer's
   "Where it fits"; Studio, the portal, is a band of its own under them, labelled in ink. Everything under .pl,
   .pl-studio and .pl-dialog, so nothing reaches another part of a page. */
.pl,.pl-studio,.pl-dialog{--night:#0b0f1a;--navy:#14223f;--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)}
/* One grid for the three cards, so each card's parts (its header, price, fine print, list, buttons) share rows with the
   others' and start level whatever their length: the groups and pairs step aside (display: contents), each label takes
   the row above its cards, and each card is five rows of the grid (subgrid). One card a row on a phone. */
.pl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:18px;font-family:var(--sans)}
.pl-group,.pl-pair{display:contents}
.is-live .pl-gl{grid-area:1/1/2/3}
.is-deep .pl-gl{grid-area:1/3/2/4}
.pl-card{grid-row:2/span 5;display:grid;grid-template-rows:subgrid;row-gap:0}
/* The two layers' labels over their cards (Travis, 7 Oct: "more prominent"). */
.pl-gl{margin:0 0 16px;padding-top:12px;border-top:3px solid var(--blue);display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline;font-size:15.5px;color:var(--muted)}
.pl-gl b{font-size:21px;line-height:1.2;font-weight:600;letter-spacing:-.015em;color:#2f5fae}
.is-deep .pl-gl{border-top-color:var(--gold)}
.is-deep .pl-gl b{color:#8a6510}
.pl.on-dark .pl-gl{color:var(--bone-soft)}
.pl.on-dark .pl-gl b{color:var(--blue-soft)}
.pl.on-dark .is-deep .pl-gl b{color:var(--gold-soft)}
.pl-card{min-width:0;border-radius:12px;padding:0 24px 24px;background:#fff;color:var(--ink);border-top:3px solid var(--blue);box-shadow:0 18px 40px rgba(11,15,26,.16)}
.pl-card.is-atlas{background:var(--night);color:var(--bone);border-top-color:var(--gold);box-shadow:0 18px 40px rgba(11,15,26,.32),inset 0 0 0 1px rgba(236,237,240,.09)}
/* The card's header: its name and what it is for, on a dark band of its own with a rule under it, level across the
   cards: night blue for the fast, live layer, night with a gold cast for the Atlas. */
.pl-head{margin:0 -24px 22px;padding:20px 24px 18px;background:linear-gradient(160deg,#1f3561 0%,var(--navy) 70%);color:#fff;border-bottom:1px solid rgba(84,134,224,.55);border-radius:9px 9px 0 0}
.is-atlas .pl-head{background:linear-gradient(160deg,#2a2412 0%,#14130f 75%);border-bottom-color:rgba(212,160,18,.45)}
.pl-name{display:flex;align-items:center;gap:10px}
.pl-ic svg{width:28px;height:28px;display:block}
.pl-card h3,.pl-studio h3{margin:0;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.015em;color:inherit}
.pl-for{margin:8px 0 0;font-size:15px;line-height:1.4;color:var(--bone-soft);text-wrap:pretty}
.pl-price small{display:block;font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--muted);line-height:1.3}
.pl-card .pl-price p{margin:2px 0 0;display:flex;align-items:baseline;gap:10px;color:inherit;font-size:inherit}
.pl-price b{font-size:40px;line-height:1.05;font-weight:500;letter-spacing:-.03em}
.pl-price s{font-size:22px;color:var(--bone-mute);text-decoration-thickness:2px}
.pl-price>span{display:block;margin-top:2px;font-size:14px;color:var(--muted)}
.is-atlas .pl-price small{color:var(--bone-mute)}
/* The panel's cards carry no fine print, so a paid price says its tax under it (every price on the site does). */
.pl-price>.pl-tax{font-size:13px;font-weight:400;color:var(--muted)}
.is-atlas .pl-price>.pl-tax{color:var(--bone-mute)}
.is-atlas .pl-price>span{color:var(--gold-soft);font-weight:600}
.pl-fine{margin:12px 0 18px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.pl-fine span{display:block;text-wrap:pretty}
.is-atlas .pl-fine{color:var(--bone-soft)}
.pl-plus{margin:0 0 8px;font-size:14.5px;font-weight:700;color:#2f5fae}
.pl-list{list-style:none;margin:0 0 22px;padding:0;border-top:1px solid var(--rule-soft)}
.pl-list li{position:relative;padding:9px 0 9px 22px;border-bottom:1px solid var(--rule-soft);font-size:14.5px;line-height:1.4;text-wrap:pretty}
.pl-list li:before{content:'';position:absolute;left:2px;top:15px;width:7px;height:7px;border:2px solid var(--blue);border-radius:50%}
.is-atlas .pl-list,.is-atlas .pl-list li{border-color:rgba(236,237,240,.12)}
.is-atlas .pl-list li:before{border-color:var(--gold)}
.pl-go{align-self:end;display:flex;flex-direction:column;align-items:stretch;gap:12px}
.pl-btn{display:flex;justify-content:center;align-items:center;box-sizing:border-box;background:var(--blue);color:#fff!important;font:700 15.5px var(--sans);padding:13px 18px;border-radius:6px;border:1px solid transparent;text-decoration:none;white-space:nowrap;box-shadow:0 8px 20px rgba(84,134,224,.3)}
.pl-btn:hover{background:#6a97e6}
.is-map .pl-btn{background:none;border-color:var(--blue);color:#2f5fae!important;box-shadow:none}
.is-map .pl-btn:hover{background:#eef3fc}
.is-atlas .pl-btn{background:var(--gold);color:var(--night)!important;box-shadow:0 8px 20px rgba(212,160,18,.22)}
.is-atlas .pl-btn:hover{background:var(--gold-soft)}
.pl-also{align-self:center;font-size:14px;font-weight:600;color:#2f5fae!important;text-decoration:underline;text-underline-offset:3px}
.is-atlas .pl-also{color:var(--gold-soft)!important}
.pl.is-compact .pl-price{margin-bottom:20px}
.pl.is-compact .pl-card{box-shadow:0 10px 26px rgba(11,15,26,.12)}
.pl.is-compact .pl-card.is-atlas{box-shadow:0 10px 26px rgba(11,15,26,.25)}

/* Studio: the portal, not a fourth product (Travis, 7 Oct). A night band of its own under the cards, whose top edge is
   the Map's blue running into the Atlas's gold, since what it holds is theirs. */
.pl-studio{margin-top:30px;font-family:var(--sans)}
.pl-st{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 250px;gap:18px 34px;align-items:center;padding:24px 26px;border-radius:12px;background:var(--night);color:var(--bone);box-shadow:0 18px 40px rgba(11,15,26,.22),inset 0 0 0 1px rgba(236,237,240,.09);overflow:hidden}
.pl-st:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--blue),var(--gold))}
.pl-st-say p{margin:8px 0 0;font-size:15px;line-height:1.45;color:var(--bone-soft);text-wrap:pretty}
.pl-st-say em{font-style:normal;color:var(--gold-soft);white-space:nowrap}
.pl-st-list{list-style:none;margin:0;padding:0}
.pl-st-list li{position:relative;padding:5px 0 5px 22px;font-size:14.5px;line-height:1.4;color:var(--bone)}
.pl-st-list li:before{content:'';position:absolute;left:2px;top:11px;width:7px;height:7px;border:2px solid var(--blue-soft);border-radius:50%}
.pl-st .pl-btn{background:none;border-color:rgba(236,237,240,.45);color:#fff!important;box-shadow:none}
.pl-st .pl-btn:hover{border-color:#fff;background:rgba(236,237,240,.08)}
.pl-st .pl-also{color:var(--bone-soft)!important}
.pl-studio.is-compact{margin-top:22px}
.pl-studio.is-compact .pl-st{grid-template-columns:minmax(0,1fr) 250px;padding:20px 24px}

@media(max-width:820px){
 .pl{display:flex;flex-direction:column;gap:18px}
 .pl-card{display:flex;flex-direction:column}
 .pl-go{margin-top:6px;align-self:stretch}
 .is-deep .pl-gl{margin-top:16px}
 .pl .pl-gl{margin-bottom:-4px}
 .pl.on-dark .is-deep .pl-gl{color:var(--muted)}
 .pl.on-dark .is-deep .pl-gl b{color:#8a6510}
 .pl-st,.pl-studio.is-compact .pl-st{grid-template-columns:minmax(0,1fr);padding:22px 20px}
}
@media(max-width:640px){.pl-price b{font-size:34px}.pl-card{padding:0 20px 22px}.pl-head{margin:0 -20px 18px;padding:18px 20px 14px}}

/* The pop-up panel */
.pl-dialog{border:0;padding:0;border-radius:14px;background:var(--paper);color:var(--ink);width:min(1080px,calc(100% - 32px));max-width:none;max-height:calc(100% - 32px);overflow:auto;box-shadow:0 30px 80px rgba(0,0,0,.45);font-family:var(--sans)}
.pl-dialog::backdrop{background:rgba(11,15,26,.62)}
.pl-dialog-in{position:relative;padding:28px 30px 26px}
.pl-x{position:absolute;right:12px;top:8px;background:none;border:0;padding:4px 10px;font:300 34px/1 var(--sans);color:var(--muted);cursor:pointer}
.pl-x:hover{color:var(--ink)}
.pl-k{margin:0 0 4px;font-size:14px;font-weight:600;color:#2f5fae}
.pl-dialog h2{margin:0 0 24px;padding-right:40px;font-size:30px;line-height:1.1;font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.pl-more{margin:22px 0 0;font-size:15.5px;font-weight:600}
.pl-more a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media(max-width:640px){.pl-dialog{width:calc(100% - 20px);max-height:calc(100% - 20px)}.pl-dialog-in{padding:22px 16px 20px}.pl-dialog h2{font-size:25px;margin-bottom:20px}}