/* The plan grid, the monthly/yearly toggle and the compare table, shared by /pricing and the
   landing page. The markup comes from plancards.py; keep the two in step. */
.plans{--p-rule:rgba(255,255,255,.09);--p-dot:rgba(255,255,255,.14);--p-grey:#c9c9cc;--p-dim:#8a8a90;--p-blue:#0073ff;
  text-align:left;font-family:"DM Sans",sans-serif;font-size:15px;line-height:1.5}
.plans .prow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--p-rule);border-left:1px solid var(--p-rule)}
.plans .prow+.prow{margin-top:-1px}
.plans .pcol{padding:16px 16px 28px;border-right:1px solid var(--p-rule);border-bottom:1px solid var(--p-rule);position:relative;display:flex;flex-direction:column;min-width:0}
/* small dots where the rules cross */
.plans .pcol::before,.plans .pcol::after{content:"";position:absolute;top:-3px;width:5px;height:5px;border-radius:50%;background:#3a3a40;z-index:2}
.plans .pcol::before{left:-3px}
.plans .pcol::after{right:-3px}
.plans .lab{padding:22px 16px}
.plans .lab h3{font-family:"DM Sans",sans-serif;font-weight:400;font-size:36px;letter-spacing:-.02em;line-height:1.15;margin:0}
.plans .lab p{color:var(--p-dim);margin:12px 0 0;max-width:260px;font-size:15px}

.plans .tile{position:relative;height:200px;border-radius:18px;padding:20px 22px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;background:#16161a;border:1px solid rgba(255,255,255,.06)}
.plans .tile::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.plans .tile>*{position:relative;z-index:1}
.plans .tile .nm{font-size:24px;font-weight:400;letter-spacing:-.01em;line-height:1.2}
.plans .tile .who{color:var(--p-dim);font-size:14px;margin-top:2px}
.plans .pill{display:inline-block;margin-top:10px;font-size:12.5px;padding:1px 9px;border:1px solid rgba(255,255,255,.55);border-radius:999px;color:#fff}
.plans .tile .pr{font-size:19px;white-space:nowrap}
.plans .tile .pr .unit{font-size:14px;color:var(--p-grey);margin-left:4px}
.plans .tile .rt{font-size:13.5px;color:var(--p-dim);white-space:nowrap}
.plans .tile.blue{background:var(--p-blue);border-color:var(--p-blue)}
.plans .tile.blue::after{opacity:.5}
.plans .tile.blue .who,.plans .tile.blue .rt,.plans .tile.blue .pr .unit{color:rgba(255,255,255,.82)}

.plans .pbtn{height:46px;margin-top:16px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:15.5px;font-weight:500;background:#fff;color:#000;white-space:nowrap;padding:0 22px;text-decoration:none;transition:opacity .15s}
.plans .pbtn:hover{opacity:.88}
.plans .pbtn.blue{background:var(--p-blue);color:#fff}

.plans ul.pf{list-style:none;margin:34px 0 0;padding:0}
.plans ul.pf li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px dotted var(--p-dot);color:#e8e8ea;white-space:nowrap}
.plans ul.pf li:first-child{border-top:1px dotted var(--p-dot)}
.plans svg.i{width:17px;height:17px;flex:0 0 auto;stroke:var(--p-dim);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.plans .yr{margin-top:auto;padding-top:28px;font-size:17px;white-space:nowrap}
.plans .yr b{font-weight:400}
.plans .yr span{color:var(--p-dim);font-size:14px;margin-left:4px}

/* monthly / yearly: the white pill is the one selected */
.ptoggle{display:inline-flex;border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:4px;cursor:pointer;user-select:none;font-family:"DM Sans",sans-serif}
.ptoggle span{padding:8px 18px;border-radius:999px;font-size:14.5px;color:#8a8a90;white-space:nowrap}
.ptoggle span.on{background:#fff;color:#000}
.ptoggle b{color:#6db0ff;font-weight:500;margin-left:6px}
.ptoggle span.on b{color:#0073ff}

/* compare table: open rows, dotted lines, 1px column rules */
.cmpscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.cmp{width:100%;min-width:760px;border-collapse:collapse;border-top:1px solid rgba(255,255,255,.09);font-size:15px;text-align:left}
table.cmp th,table.cmp td{padding:16px;border-bottom:1px dotted rgba(255,255,255,.14);vertical-align:middle;font-weight:400}
table.cmp th+th,table.cmp td+td{border-left:1px solid rgba(255,255,255,.09)}
table.cmp th{color:#fff;font-size:17px}
table.cmp th:first-child{color:#8a8a90;font-size:13px}
table.cmp td.k{color:#c9c9cc;width:20%}

@media (max-width:1000px){
  .plans .prow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans .lab{grid-column:1/-1}
  .plans .lab h3 br{display:none}
}
@media (max-width:760px){
  .plans .prow{grid-template-columns:minmax(0,1fr)}
}