/* #plan: the single plan, the package switcher, the compare matrix, the totals, the phone cards and the email panel. */
/* ---------- 7. the plan ---------- */
.plan{padding-top:calc(var(--hh) + 40px);padding-bottom:20px}
.plan .lede{max-width:40em}
.obj{margin:26px 0 0;max-width:46em;font:400 19px/1.65 var(--sans);color:var(--ink2)}
.obj-by{margin:12px 0 0;font:500 14px var(--sans);color:var(--grey)}
.ledger{margin-top:40px;border-top:2px solid var(--ink)}
.lh,.lr{display:grid;grid-template-columns:minmax(0,3.2fr) minmax(0,1.6fr) minmax(0,1.6fr) minmax(0,1.5fr) minmax(0,1.5fr);column-gap:20px;align-items:baseline}
.lh{padding:12px 0;border-bottom:1px solid var(--line2);font:600 13px var(--sans);color:var(--grey);position:sticky;top:var(--hh);background:var(--bg);z-index:3}
.lr{padding:20px 0;border-bottom:1px solid var(--line);font:400 15px/1.45 var(--sans);color:var(--text)}
.lr .n{font:600 20px/1.25 var(--disp);color:var(--ink);letter-spacing:-.01em}
.lr .n small{display:block;margin-top:4px;font:400 14px var(--sans);color:var(--grey);letter-spacing:0}
.lr .r,.lh .r{text-align:right;font-variant-numeric:tabular-nums}
.lr .r{font-weight:600;color:var(--ink)}
.lr .r.big{font:600 20px var(--disp)}
.plg{margin-top:50px}
.plg h3{margin:0 0 6px;font:600 24px/1.2 var(--disp)}
.plg .lr .n{font-size:18px}
.plg .lr .ex-l a{color:var(--grey);font-size:14px;text-decoration:underline;text-underline-offset:3px}
.plg .lr .ex-l a:hover{color:var(--red)}
/* the tailored plan fits one screen: heading, commentary and the button on the left; the table and its totals on the right */
.pl-g{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7.6fr);column-gap:clamp(36px,4.4vw,72px);align-items:center}
.pl-i{margin:16px 0 0;font:400 17px/1.55 var(--sans);color:var(--text);max-width:24em}
.pl-n{margin:22px 0 0;padding-left:16px;border-left:3px solid var(--red);font:600 clamp(18px,1.45vw,21px)/1.4 var(--disp);color:var(--ink2);max-width:22em}
.pl-r{min-width:0}
.pl-h .ask{margin-top:30px}
@media (min-width:960px){
  .plan.pl1{min-height:100vh;padding-top:calc(var(--hh) + 22px);padding-bottom:26px;display:flex;flex-direction:column;justify-content:center}
  .pl1 .ledger{margin-top:0}
  .pl1 .lh{position:static;padding:8px 0;font-size:13px}
  .pl1 .lr{padding:clamp(5px,1.05vh,11px) 0;font-size:clamp(13.5px,1.02vw,15px);line-height:1.35;column-gap:14px}
  .pl1 .lr .n{font-size:clamp(16.5px,1.28vw,19px)}
  .pl1 .lr .n small{margin-top:1px;font-size:13px}
  .pl1 .lr .r.big{font-size:clamp(16.5px,1.28vw,19px)}
  .pl1 .lh,.pl1 .lr{grid-template-columns:minmax(0,3fr) minmax(0,1.8fr) minmax(0,1.4fr) minmax(0,1.5fr) minmax(0,1.3fr)}
}
@media (min-width:960px){
  .plan.pl1{padding-right:max(var(--m),80px)}
}
@media (min-width:960px) and (max-height:920px){
  .plan.pl1{padding-top:calc(var(--hh) + 12px);padding-bottom:18px}
  .pl1 .lr{padding:4px 0}
  .pl1 .lr .n small{display:none}
  .tot{margin-top:14px;padding-top:12px;gap:6px}
  .tot .pk b{font-size:38px}
  .tot .rc b{font-size:27px}
}
.nl-n{margin:22px 0 0;display:flex;align-items:baseline;gap:12px}
.nl-n b{font:600 44px/1 var(--disp);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.01em}
.nl-n span{font:500 15px var(--sans);color:var(--grey)}
/* the build label: at the foot of the page (static, after the last section) wherever it could land on something: touch screens, and screens under 760px high, where a fixed corner label
   met the hubs counter, the recommendation caption, "Send by email" and the Jump button. It floats in the corner only with a fine pointer and 760px or more of height (and 960px of width:
   narrower windows have always had it at the foot, as the mockup's phone does) */
.ver{display:block;padding:10px var(--m) 18px;font:500 13px var(--sans);color:var(--grey);pointer-events:none}
@media (pointer:fine) and (min-height:760px) and (min-width:960px){.ver{position:fixed;left:14px;bottom:3px;z-index:40;padding:0;line-height:13px}}
/* the totals sit under the table, at its right: the rate card total, then the package price (its figure blurred until it is asked for) */
.tot{display:grid;justify-items:end;gap:8px;margin-top:22px;padding-top:16px;border-top:2px solid var(--ink)}
.tot .rc,.tot .pk{display:flex;align-items:baseline;gap:18px}
.tot .rc span,.tot .pk span{font:500 15px var(--sans);color:var(--grey)}
.tot .pk span{color:var(--ink);font-weight:600}
.tot .rc b{display:inline-block;position:relative;transform-origin:100% 100%;font:600 32px/1 var(--disp);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.tot .rc b em{font-style:normal}
.tot .pk b{display:block;font:700 46px/1 var(--disp);color:var(--red);font-variant-numeric:lining-nums tabular-nums}
.pkb{all:unset;box-sizing:border-box;cursor:pointer;display:inline-block;padding:4px 8px;margin:-4px -8px;border-radius:4px}
.pkb:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.bl{filter:blur(10px);transition:filter .25s;user-select:none}
.pkb:hover .bl{filter:blur(7px)}
.tot p.sv{margin:0;text-align:right;font:400 15px/1.5 var(--sans);color:var(--text)}
.tot p.sv b{color:var(--red);font-weight:650}
.js .tot.rev .sv{opacity:0;visibility:hidden}
#reveal.jig{animation:jig 1.1s ease-in-out}
@keyframes jig{0%,100%{transform:translate(0,0) rotate(0)}12%{transform:translate(-2px,0) rotate(-1.6deg)}26%{transform:translate(2px,0) rotate(1.4deg)}40%{transform:translate(-1.5px,0) rotate(-1deg)}54%{transform:translate(1.5px,0) rotate(.8deg)}70%{transform:translate(-1px,0) rotate(-.4deg)}}
.js .ask .agree{display:none}
.js .ask .agree.on{display:flex}   /* the way on, once the price is asked for (plan/reveal.js) */
#plan [hidden]{display:none!important}   /* the script hides a line, the comparison, the single view and a revealed price's twin with `hidden`: the rules above set a display of their own */
#reveal{display:none}
.js #reveal{display:inline-flex}
.ask .agree{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.ask{margin-top:44px;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
@media (max-width:959px){
  .pl-g{display:block}
  .pl-r{margin-top:30px}
  .ver{padding:10px 20px 18px}
  .plan{padding-top:calc(var(--hh) + 14px);padding-bottom:20px}
  .lh{display:none}
  .lr{grid-template-columns:1fr auto;row-gap:2px;padding:16px 0}
  .lr .n{grid-column:1/-1;margin-bottom:4px}
  .lr .hide-m{display:none}
  .lr .r.big{font-size:18px}
  .tot .rc b{font-size:26px}
  .tot .pk b{font-size:34px}
  .tot .rc,.tot .pk{width:100%;justify-content:space-between}
}

/* ---------- 7b. the plan with packages: a switcher, one package in detail, or all of them side by side ---------- */
.pk .pl-g{align-items:start}
.pk-sw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;align-items:stretch}
.pk-o,.pm-b{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.pk-o{padding:14px 16px 14px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px var(--line2);transition:box-shadow .25s var(--e)}
.pk-n{display:flex;align-items:center;gap:9px;font:600 clamp(18px,1.4vw,21px)/1.2 var(--disp);color:var(--ink);letter-spacing:-.01em}
.pk-s{font:400 13px/1.4 var(--sans);color:var(--grey)}
.pk-rd{flex:none;width:15px;height:15px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2);background:transparent;transition:background .25s var(--e),box-shadow .25s var(--e)}
.pk-o:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pk-o[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.pk-o[aria-checked="true"] .pk-rd,.pm-b.on .pk-rd{background:var(--red);box-shadow:0 0 0 3px var(--hl)}
.pk-o:focus-visible,.pm-b:focus-visible,.pk-cmp:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.pk-cmp{all:unset;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:10px;max-width:160px;padding:0 18px;border-radius:10px;font:600 14.5px/1.25 var(--sans);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line2);transition:background .25s var(--e),color .25s var(--e),box-shadow .25s var(--e)}
.pk-cmp svg{flex:none}
.pk-cmp:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pk-cap{display:none;align-self:center;font:500 15px/1.4 var(--sans);color:var(--grey)}
.pk-sw.cmp{grid-template-columns:minmax(0,1fr) auto}
.pk-sw.cmp .pk-o{display:none}
.pk-sw.cmp .pk-cap{display:block}
.pk-sw.cmp .pk-cmp{grid-column:auto;height:42px}
.pk-cmp[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.pk-v{margin-top:clamp(14px,2.2vh,22px)}
.pk .pl-t .lh,.pk .pl-t .lr{margin:0 -10px;padding-left:10px;padding-right:10px}
.pk .pl-t .lr{border-radius:3px}
.pk .pl-t [data-c]{border-radius:3px}
.pm{border-top:0}
.pm-r{display:grid;grid-template-columns:minmax(0,2.1fr) repeat(3,minmax(0,1.5fr))}
.pm-c{display:flex;align-items:center;justify-content:center;padding:clamp(6px,1.15vh,11px) 10px;border-bottom:1px solid var(--line);font:400 clamp(13.5px,1.02vw,15px)/1.3 var(--sans);color:var(--grey);text-align:center;font-variant-numeric:tabular-nums}
.pm-c.pm-k{justify-content:flex-start;text-align:left;padding-left:0;font:600 clamp(15px,1.15vw,17px)/1.25 var(--disp);color:var(--ink)}
.pm-c.sel{background:rgba(200,16,46,.055)}   /* the tint marks the chosen package, not a recommended one */
.pm-c.chg{color:var(--ink);font-weight:650}
.pm-c.no{color:var(--faint)}
.pm-hd .pm-c{padding:0;border-bottom:2px solid var(--ink);align-items:stretch}
.pm-hd .pm-h.sel{box-shadow:inset 0 3px 0 var(--red)}
.pm-b{width:100%;align-items:center;text-align:center;padding:26px 8px 12px;gap:3px;transition:background .2s}
.pm-b .pk-n{justify-content:center}
.pm-b:hover{background:rgba(20,22,26,.045)}
.pm-b .pk-s{font-size:13px}

.pm-f .pm-c{border-bottom:0}
.pm-t .pm-c{border-top:2px solid var(--ink);padding-top:clamp(9px,1.5vh,14px)}
.pm-t .pm-k,.pm-p .pm-k,.pm-s .pm-k{font:500 15px var(--sans);color:var(--grey)}
.pm-p .pm-k{color:var(--ink);font-weight:600}
.pm .rcv{display:block;font:700 clamp(24px,2.1vw,31px)/1 var(--disp);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}   /* the rate card total is bold black, the same size as the package price, and never struck through */
.pm .pkv{display:block;font:700 clamp(24px,2.1vw,31px)/1 var(--disp);color:var(--red);font-variant-numeric:lining-nums tabular-nums}
.pm-s .pkv{font:650 clamp(13.5px,1vw,15px)/1.3 var(--sans)}
.pm-n{margin:10px 0 0;font:400 13px/1.4 var(--sans);color:var(--grey)}
.pcs{display:none}
@media (min-width:960px) and (max-width:1179px){
  .pk-sw{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pk-cmp{grid-column:1/-1;max-width:none;height:40px}
}
@media (min-width:960px){
  .plan.pl1.pk{justify-content:flex-start;padding-top:calc(var(--hh) + clamp(36px,5.6vh,64px))}
  .pk-s{min-height:2.8em}
}
@media (min-width:960px) and (max-height:920px){
  .plan.pl1.pk{padding-top:calc(var(--hh) + clamp(30px,4.6vh,44px))}
  .pk-o{padding:11px 15px 11px}
  .pk-s{font-size:13px}
  .pm-c{padding-top:5px;padding-bottom:5px}
  .pm-b{padding-bottom:8px}
  .pk .tot p.sv{font-size:13px;line-height:1.45}
  .pk .tot p.sv br{display:none}
  .pk .tot p.sv b::after{content:" "}
}
@media (min-width:960px) and (max-height:820px){
  .plan.pl1.pk{padding-top:calc(var(--hh) + 34px);padding-bottom:14px}
  .pk-v{margin-top:18px}
  .pk-o{padding:9px 14px 9px}
  .pk-n{font-size:18px}
  .pk-s{min-height:0}
  .pk .pl-t .lr{padding-top:4px;padding-bottom:4px}
  .pk .lh{padding:6px 0}
  .pk .tot{margin-top:14px;padding-top:11px;gap:5px}
  .pk .tot .rc b{font-size:24px}
  .pk .tot .pk b{font-size:33px}
  .pm-b .pk-s{font-size:13px}
}
@media (max-width:959px){
  .pk-sw{grid-template-columns:1fr;gap:12px}
  .pk-o{padding:14px 16px}
  .pk-o .pk-s{min-height:0}
  .pk-cmp{max-width:none;height:50px}
  .pk-v{margin-top:20px}
  .pk .pl-t .lh,.pk .pl-t .lr{margin:0;padding-left:0;padding-right:0}
  .pm,.pm-n{display:none}
  .pcs{display:grid;gap:18px}
  .pc{position:relative;padding:0 0 4px;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line2)}
  .pc.sel{box-shadow:inset 0 0 0 2px var(--red)}
  .pc .pm-b{width:100%;align-items:flex-start;text-align:left;padding:16px 18px 10px}
  .pc .pm-b .pk-n{justify-content:flex-start}
  .pc ul{list-style:none;margin:0;padding:0 18px}
  .pc li{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-top:1px solid var(--line);font:400 14.5px/1.35 var(--sans);color:var(--text)}
  .pc li b{flex:none;font-weight:600;color:var(--ink);text-align:right}
  .pc-t{margin:6px 18px 12px;padding-top:12px;border-top:2px solid var(--ink);display:grid;gap:6px}
  .pc-t>div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
  .pc-t span{font:500 14px var(--sans);color:var(--grey)}
  .pc-p span{color:var(--ink);font-weight:600}
  .pc .rcv{font:700 26px/1 var(--disp);color:var(--ink)}
  .pc .pkv{font:700 26px/1 var(--disp);color:var(--red)}
  .pc-s .pkv{font:650 14.5px/1.3 var(--sans)}
}

/* ---------- 7c. packages most expensive first, arrows, the two actions under the package price, and the email panel that slides in beside the package view ---------- */
.plan.pk{--fig:clamp(30px,2.75vw,40px);--emw:clamp(400px,34vw,470px);--emg:clamp(28px,2.6vw,40px);overflow-x:clip}
.pk .pl-h,.pk .pl-r{min-width:0}
.pm .rcv,.pm-p .pkv{font-size:clamp(20px,1.8vw,26px)}
.pk.em-open .pm .rcv,.pk.em-open .pm-p .pkv{font-size:clamp(19px,1.6vw,23px)}
/* the switcher's fourth cell: the two arrows over the compare button */
.pk-side{display:grid;grid-template-rows:1fr 1fr;gap:6px;min-width:150px;max-width:160px}
.pk-ar{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.pk-a{all:unset;box-sizing:border-box;display:grid;place-items:center;min-height:34px;border-radius:10px;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--line2);transition:box-shadow .25s var(--e),background .25s var(--e),color .25s var(--e),opacity .25s}
.pk-a:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.pk-a:active{background:var(--ink);color:#fff}
.pk-a:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.pk-a[aria-disabled="true"]{opacity:.32;cursor:default;pointer-events:none}
.pk-side .pk-cmp{max-width:none;width:100%;height:auto;min-height:34px;padding:0 10px;font-size:14px}
.pk-sw.cmp .pk-ar{display:none}
.pk-sw.cmp .pk-side{grid-template-rows:auto;max-width:none}
.pk-sw.cmp .pk-side .pk-cmp{height:42px}
@media (min-width:960px) and (max-width:1179px){
  .pk-side{grid-column:1/-1;grid-template-rows:auto;grid-template-columns:104px minmax(0,1fr);max-width:none}
  .pk-sw.cmp .pk-side{grid-column:auto;grid-template-columns:auto}
  .pk-side .pk-cmp{height:40px}
}
.pm-b{padding-top:16px}
/* the totals: the rate card total and the package price side by side, the same size; under the price, what you save and the two actions */
.plan.pk .tot{grid-template-columns:auto auto;justify-content:end;justify-items:end;align-items:end;column-gap:clamp(28px,3.4vw,56px);row-gap:6px;margin-top:clamp(10px,1.8vh,18px);padding-top:clamp(10px,1.6vh,16px)}
.plan.pk .tot .rc,.plan.pk .tot .pk{display:grid;gap:4px;justify-items:end;align-items:end}
.plan.pk .tot .rc{grid-column:1;grid-row:1}
.plan.pk .tot .pk{grid-column:2;grid-row:1}
.plan.pk .tot .sv{grid-column:2;grid-row:2;max-width:23em}
.plan.pk .tot .pk-ac{grid-column:2;grid-row:3}
.plan.pk .tot .rc span,.plan.pk .tot .pk span{font:600 14px/1.2 var(--sans);color:var(--ink)}
.plan.pk .tot .rc b{display:block;transform:none;font:700 var(--fig)/1 var(--disp);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.plan.pk .tot .pk b{display:block;font:700 var(--fig)/1 var(--disp);color:var(--red);font-variant-numeric:lining-nums tabular-nums}
.pk-ac{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:4px}
.pk-ac .btn,.pm-a .btn,.pc-a .btn,.pc-q .btn{justify-content:center;white-space:nowrap}
.pk-ac .btn{height:44px;padding:0 22px;font-size:15px}
.btn.sm{height:36px;padding:0 12px;font-size:13.5px}
.btn[aria-pressed="true"]{box-shadow:0 0 0 3px var(--hl)}
.btn.o[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.js .tot.rev .pk-ac{opacity:0;visibility:hidden}
.pm-a .pm-c{border-bottom:0;padding-top:12px;padding-bottom:4px}
.pm-a .pm-c.pm-k{justify-content:flex-start}
.pm-a .btn.sm{width:100%;min-width:0}
.pm-a .pm-c.pm-k .btn{width:auto;padding:0 14px}
.pk-all .pm-a .pm-c,.pk-all .pc-a,.pk-all .pc-q{transition:opacity .6s var(--e) .5s}
.js .pk.pre .pm-a .pm-c,.js .pk.pre .pc-a,.js .pk.pre .pc-q{opacity:0;visibility:hidden}
.pc-a,.pc-q{display:none}
/* the email panel: part of the plan page, on its right. The package view moves left (the heading column folds away) and the panel slides in; closing reverses both. */
.em{display:none}
@media (min-width:960px){
  .pk .pl-g{position:relative;grid-template-columns:4fr 7.6fr;transition:grid-template-columns .62s var(--e),column-gap .62s var(--e),padding-right .62s var(--e)}
  .pk .pl-h{overflow:hidden;padding:8px;margin:-8px;transition:opacity .3s var(--e),visibility 0s}
  .pk .pl-hi{width:var(--hw,auto)}   /* --hw is the heading column's own width, set by the script, so its words do not re-wrap while the column folds away */
  .pk.em-open .pl-g{grid-template-columns:0fr 1fr;column-gap:0;padding-right:calc(var(--emw) + var(--emg))}
  .pk.em-open .pl-h{opacity:0;visibility:hidden;transition:opacity .25s var(--e),visibility 0s .25s}
  .em{display:block;position:absolute;top:0;right:0;bottom:0;width:var(--emw);transform:translateX(calc(100% + 160px));opacity:0;visibility:hidden;transition:transform .62s var(--e),opacity .35s var(--e) .1s,visibility 0s .62s}
  .pk.em-open .em{transform:none;opacity:1;visibility:visible;transition:transform .62s var(--e),opacity .4s var(--e) .12s,visibility 0s}
  .em-in{display:flex;flex-direction:column;height:100%}
  .em-msg{flex:1;min-height:0}
  .em-msg textarea{flex:1;min-height:120px}
}
.em-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 clamp(8px,1.4vh,14px)}
.em-hd h3{margin:0;font:600 clamp(20px,1.6vw,24px)/1.2 var(--disp);letter-spacing:-.01em;color:var(--ink)}
.em-x{all:unset;box-sizing:border-box;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--soft);color:var(--ink);cursor:pointer;transition:background .25s var(--e),color .25s var(--e),transform .3s var(--e)}
.em-x:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.em-x:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.em-pr{min-height:0;padding-top:6px;padding-bottom:6px}
.em-sg{display:flex;gap:6px;flex:1;min-width:0}
.em-sb{all:unset;box-sizing:border-box;flex:1 1 0;min-width:0;padding:7px 6px;border-radius:8px;text-align:center;font:600 13.5px/1.2 var(--sans);color:var(--ink);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line2);transition:background .2s,color .2s,box-shadow .2s}
.em-sb:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.em-sb[aria-checked="true"]{background:var(--ink);color:#fff;box-shadow:none}
.em-sb:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.fin-pr[hidden]{display:none}
.em .fin-act{flex-wrap:wrap;gap:8px 14px;padding:10px 14px 10px 18px}
.em .fin-act .btn{height:42px}
.em .fin-row{padding:0 18px;min-height:40px}
.em .fin-row b{white-space:normal;overflow:visible;text-overflow:clip;padding:6px 0}
.em .fin-msg textarea{padding:12px 18px;font-size:14.5px}
.em .fin-act small{flex:1 1 150px}
/* whilst it is open the package view is compact: the Size column folds away and the switcher loses its descriptions */
.pk.em-open .pl-t .lh,.pk.em-open .pl-t .lr{grid-template-columns:minmax(0,3fr) minmax(0,2.2fr) minmax(0,1.45fr) minmax(0,1.25fr)}
.pk.em-open .pl-t .lh>:nth-child(2),.pk.em-open .pl-t .lr>:nth-child(2){display:none}
/* on a screen that is not tall, the Size column folds away so that every line is one line and the totals, the saving and the two actions fit beneath the table */
@media (min-width:960px) and (max-height:920px){
  .pk .pl-t .lh,.pk .pl-t .lr{grid-template-columns:minmax(0,3fr) minmax(0,2.2fr) minmax(0,1.45fr) minmax(0,1.25fr)}
  .pk .pl-t .lh>:nth-child(2),.pk .pl-t .lr>:nth-child(2){display:none}
}
.pk.em-open .pk-s{display:none}
.pk.em-open .pm-b .pk-s{display:none}
@media (prefers-reduced-motion:reduce){.pk .pl-g,.pk .pl-h,.em,.pk.em-open .em,.pk.em-open .pl-h{transition:none}}
/* phones: the same panel is a sheet that comes up from the bottom, over the package view */
@media (max-width:959px){
  .pk-side{grid-template-rows:auto;grid-template-columns:104px minmax(0,1fr);max-width:none}
  .pk-sw.cmp .pk-side{grid-template-columns:auto}
  .pk-side .pk-cmp{height:50px;max-width:none}
  .pk-a{min-height:50px}
  .plan.pk{--fig:30px}
  .plan.pk .tot{grid-template-columns:1fr;justify-items:stretch;row-gap:8px}
  .plan.pk .tot .rc,.plan.pk .tot .pk{display:flex;justify-content:space-between;align-items:baseline;gap:12px;width:100%}
  .plan.pk .tot .rc,.plan.pk .tot .pk,.plan.pk .tot .sv,.plan.pk .tot .pk-ac{grid-column:1;grid-row:auto}
  .plan.pk .tot .sv{max-width:none}
  .pk-ac{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .pk-ac .btn{padding:0 10px;height:50px;font-size:15px}
  .pc-a{display:block;padding:4px 18px 16px}
  .pc-a .btn{width:100%;height:50px}
  .pc-q{display:block;margin-top:-4px}
  .pc-q .btn{width:100%;height:50px}
  .em{display:block;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:70;max-height:88vh;max-height:88dvh;overflow:auto;overscroll-behavior:contain;padding:14px 14px calc(14px + env(safe-area-inset-bottom));background:var(--bg);border-radius:18px 18px 0 0;box-shadow:0 -1px 0 var(--line2),0 -14px 44px rgba(20,22,26,.2);transform:translateY(106%);visibility:hidden;transition:transform .5s var(--e),visibility 0s .5s}
  .pk.em-open .em{transform:none;visibility:visible;transition:transform .5s var(--e),visibility 0s}
  .em-in{display:block}
  .em-msg textarea{min-height:150px;height:150px}
  .em .fin-row{align-items:center;padding:6px 14px}
  .em .fin-row label{width:56px}
  .em .fin-act{padding:10px 12px}
  .em .fin-act small{display:none}
  .pk.em-open{padding-bottom:min(78dvh,620px)}
}

/* the real package price and saving written beside each blurred stand-in: only the still page (no scripts) shows them, see still.css; with scripts the client reveals the figure itself */
.js b.pkr{display:none!important}

/* ---------- touch (brief 7.2): 44x44 targets with 8px between; a field is 16px so a phone does not zoom on focus ---------- */
@media (pointer:coarse){
  .pkb{padding:7px 8px;margin:-7px -8px}
  .pk-side,.pk-ar{gap:8px}
  .pk-a,.pk-cmp,.pk-side .pk-cmp{min-height:44px}
  .btn.sm{height:44px}
  .pm-hd .pm-b{width:calc(100% - 8px);margin-left:auto;margin-right:auto}
  .em-x{width:44px;height:44px}
  .em-sg{gap:10px}
  .em-sb{display:flex;align-items:center;justify-content:center;min-height:44px}
  .em .fin-act .btn{height:44px}
}
@media (pointer:coarse),(max-width:959px){.em .fin-msg textarea{font-size:16px}}
/* the sheet clears a notch at the sides as well as the home bar underneath */
@media (max-width:959px){.em{padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}}
@media (min-width:960px){@supports (height:100dvh){.plan.pl1{min-height:100dvh}}}

/* a window under 700px high: the tailored plan (the switcher, the table, the totals and the two actions) stays on one screen */
@media (min-width:960px) and (max-height:699px){
  .plan.pl1.pk{padding-top:calc(var(--hh) + 8px);padding-bottom:6px}
  .pk-v{margin-top:8px}
  .pk-o{padding:6px 14px}
  .pk-n{font-size:17px}
  .pk-s{font-size:13px;line-height:1.3}
  .pk .pl-t .lr{padding-top:1px;padding-bottom:1px}
  .pk .lh{padding:3px 0}
  .pk .tot{margin-top:6px;padding-top:6px;row-gap:3px}
  .plan.pk .tot .sv{grid-column:1/-1;max-width:none}
  .plan.pk{--fig:28px}
  .pk .tot .pk b{font-size:30px}
  .pk .tot .rc b{font-size:22px}
  .pk-ac{margin-top:0}
  .pk-ac .btn{height:40px}
}