/* v14 pricing (from v12) -- one price, no tiers. Loaded after site.css/v2.css.
   The section is one twelve-column spread that every block obeys:
     cols 1-2   a quiet rail of small tracked labels (the eyebrow, "what the
                price includes") -- nothing else ever sits there;
     cols 3-8   the primary column: the heading and the six includes, which are
                the two blocks the rail labels;
     cols 1-8   the blocks with no rail label -- the price, the comparison line
                -- hang at the true left margin, and the drawing runs 1-12;
     cols 9-12  the secondary column, everything secondary in reading order:
                the lead, the after-pilot line, then the ask, the three terms
                and the comparison line hung off one hairline.
   The call to action closes the spread on its own, under the last rule.
   Three rules set the rhythm: one above the price, one under the drawing
   (so price + drawing read as a single object), one above the closing band.
   The drawing itself is generated in scratchpad/pricingart/gen_pricing_art.mjs
   and included as views/v12/pricing-art.php; it spans all twelve columns, so
   its left edge is the price's left edge and its right edge is the section's. */

.pricing-section{--pr-band:clamp(30px,3.4vw,50px);--pr-band-lg:clamp(38px,4.3vw,62px)}

.pr-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:clamp(14px,1.7vw,24px);
  grid-template-areas:
    "eye eye ttl ttl ttl ttl ttl ttl led led led led"
    "r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1 "
    "prc prc prc prc prc prc prc prc aft aft aft aft"
    "art art art art art art art art art art art art"
    "r2  r2  r2  r2  r2  r2  r2  r2  r2  r2  r2  r2 "
    "inc inc lst lst lst lst lst lst asd asd asd asd"
    "r3  r3  r3  r3  r3  r3  r3  r3  r3  r3  r3  r3 "
    "cta cta cta cta cta cta cta cta cta cta cta cta";
}
.pr-grid>*{min-width:0}

/* ---------------------------------------------------------------- the rail */
.pr-eyebrow{grid-area:eye;align-self:start;padding-top:11px;margin:0}
.pr-includes-title{grid-area:inc;align-self:start;margin-top:var(--pr-band);padding:2px 0 0;border:0;font-size:10px;font-weight:700;letter-spacing:1.8px;line-height:1.6;color:#5a6368}

/* ------------------------------------------------------------- the heading */
.pr-title{grid-area:ttl;margin:0}
.pr-lead{grid-area:led;align-self:start;margin:0;padding-top:9px;max-width:none;font-size:clamp(14px,1.08vw,16px);line-height:1.75;color:#586269}

/* --------------------------------------------------------------- the rules */
.pr-rule{height:0;border-top:1px solid #dfe2dc}
.pr-rule-major{border-top-color:#bac1b7}
.pr-rule-1{grid-area:r1;margin-top:var(--pr-band-lg)}
.pr-rule-2{grid-area:r2;margin-top:clamp(18px,2.1vw,30px)}
.pr-rule-3{grid-area:r3;margin-top:var(--pr-band-lg)}

/* --------------------------------------------------------------- the price */
.price-figure{grid-area:prc;display:flex;align-items:flex-end;gap:clamp(12px,1.4vw,20px);margin:clamp(26px,2.8vw,40px) 0 0}
.price-amount{display:block;font-size:clamp(70px,9.9vw,148px);line-height:.84;font-weight:500;letter-spacing:-.045em;color:var(--ink)}
.price-unit{display:block;padding-bottom:9px}
.price-unit-main{display:block;font-size:clamp(14px,1.15vw,17px);font-weight:600;line-height:1.35;letter-spacing:-.2px;color:#414c52}
.price-unit-sub{display:block;margin-top:7px;font-size:10px;font-weight:700;letter-spacing:1.9px;color:#7e8887}
.price-after{grid-area:aft;align-self:end;margin:clamp(26px,2.8vw,40px) 0 0;padding-bottom:12px;font-size:13px;line-height:1.8;color:#667077}

/* ------------------------------------------------------------ the drawing */
.pm-figure{grid-area:art;margin:clamp(22px,2.5vw,34px) 0 0}
.pm-plot{display:block;width:100%;height:auto}
.pm-plot-narrow{display:none}
.pm-plot text{font-family:Arial,Helvetica,sans-serif;font-weight:700}
.pm-key{display:flex;flex-wrap:wrap;align-items:center;gap:9px clamp(20px,2.4vw,34px);margin-top:15px;font-size:10px;font-weight:700;letter-spacing:1.7px;line-height:1.6;text-transform:uppercase;color:#7e8887}
.pm-k{display:inline-flex;align-items:center;gap:9px}
.pm-sw{display:inline-block;flex:none}
.pm-sw-patrol{width:3px;height:11px;border-radius:1.5px;background:#c2662a}
.pm-sw-check{width:7px;height:7px;border-radius:50%;background:#5a86ad}
.pm-k-note{margin-left:auto;color:#a5aca8;letter-spacing:1.4px}

/* the drawing carries a wide layout and a phone layout; each is sized so its
   own labels land near 9px on the screens it is shown on */
.pm-plot-wide .pm-hour,.pm-plot-wide .pm-night{font-size:8px}
.pm-plot-wide .pm-sum{font-size:9px}
.pm-plot-narrow .pm-hour,.pm-plot-narrow .pm-night{font-size:6px}
.pm-plot-narrow .pm-sum{font-size:6.5px}

/* -------------------------------------------------------------- the lists */
.price-list{grid-area:lst;margin:var(--pr-band) 0 0;padding:0;list-style:none}
.price-list li{position:relative;padding:16px 0 16px 26px;border-bottom:1px solid #e0e3dd;font-size:13px;line-height:1.75;color:#646d72}
/* no rule above the first item: the rail label, the first item and the
   first line of the aside all start on the same line */
.price-list li:first-child{padding-top:0}
.price-list li:first-child:before{top:1px}
.price-list li:before{content:"\2713";position:absolute;left:0;top:17px;font-size:11px;line-height:1;color:#b05a1d}
.price-list strong{display:block;margin-bottom:5px;font-size:14px;font-weight:600;line-height:1.5;letter-spacing:-.2px;color:var(--ink)}

/* the secondary column: the ask and the three terms, hung off one hairline */
.pr-aside{grid-area:asd;margin-top:var(--pr-band);padding-left:clamp(16px,1.6vw,24px);border-left:1px solid #dfe2dc}
.pr-aside .price-ask{margin:0;padding:0;border:0;font-size:12px;line-height:1.85;color:#6a747a}
.pr-aside .pilot-terms{margin:26px 0 0;padding:0;border:0;max-width:none;font-size:12px;line-height:1.85;color:#6d777d}
.pr-aside .pilot-terms p+p{margin-top:15px}
.pr-aside .pilot-terms strong{font-weight:600;color:#3f4a51}

/* ------------------------------------------------------- the closing band */
.pr-aside .pr-scale{margin:26px 0 0;max-width:none;font-size:11.5px;line-height:1.85;color:#838c88}
.pr-cta{grid-area:cta;align-self:start;justify-self:start;margin-top:clamp(20px,2.2vw,30px)}

/* the wide drawing shrinks with the column, so its labels are stepped back up
   in user units; the steps keep every label between 8.5px and 10px on screen */
@media(max-width:1280px){.pm-plot-wide .pm-hour,.pm-plot-wide .pm-night{font-size:9px}.pm-plot-wide .pm-sum{font-size:10px}}
@media(max-width:1120px){.pm-plot-wide .pm-hour,.pm-plot-wide .pm-night{font-size:10px}.pm-plot-wide .pm-sum{font-size:11px}}
@media(max-width:1024px){.pm-plot-wide .pm-hour,.pm-plot-wide .pm-night{font-size:11px}.pm-plot-wide .pm-sum{font-size:12px}}

/* ------------------------------------------- the rail folds away at 1000px */
@media(max-width:1000px){
  .pr-grid{
    grid-template-areas:
      "eye eye eye eye eye eye eye eye eye eye eye eye"
      "ttl ttl ttl ttl ttl ttl ttl led led led led led"
      "r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1 "
      "prc prc prc prc prc prc prc aft aft aft aft aft"
      "art art art art art art art art art art art art"
      "r2  r2  r2  r2  r2  r2  r2  r2  r2  r2  r2  r2 "
      "inc inc inc inc inc inc inc inc inc inc inc inc"
      "lst lst lst lst lst lst lst asd asd asd asd asd"
      "r3  r3  r3  r3  r3  r3  r3  r3  r3  r3  r3  r3 "
      "cta cta cta cta cta cta cta cta cta cta cta cta";
  }
  .pr-eyebrow{padding-top:0;margin-bottom:clamp(18px,2.4vw,26px)}
  .pr-lead{padding-top:7px}
  .price-list,.pr-aside{margin-top:clamp(16px,2vw,22px)}
}
@media(max-width:900px){.pm-plot-wide .pm-hour,.pm-plot-wide .pm-night{font-size:12.5px}.pm-plot-wide .pm-sum{font-size:13.5px}}
@media(max-width:820px){.pm-plot-wide .pm-hour,.pm-plot-wide .pm-night{font-size:14px}.pm-plot-wide .pm-sum{font-size:15px}}
@media(max-width:700px){.pm-plot-wide .pm-hour,.pm-plot-wide .pm-night{font-size:16px}.pm-plot-wide .pm-sum{font-size:16px}}
@media(max-width:760px){
  .pr-lead{font-size:14px}
  .price-after{font-size:12px;padding-bottom:8px}
}

/* --------------------------------------------- one column, and the phone
   layout of the drawing: the wide band would be 80px tall here, so the
   generator's taller variant takes over */
@media(max-width:620px){
  .pr-grid{
    grid-template-areas:
      "eye eye eye eye eye eye eye eye eye eye eye eye"
      "ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl"
      "led led led led led led led led led led led led"
      "r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1 "
      "prc prc prc prc prc prc prc prc prc prc prc prc"
      "aft aft aft aft aft aft aft aft aft aft aft aft"
      "art art art art art art art art art art art art"
      "r2  r2  r2  r2  r2  r2  r2  r2  r2  r2  r2  r2 "
      "inc inc inc inc inc inc inc inc inc inc inc inc"
      "lst lst lst lst lst lst lst lst lst lst lst lst"
      "asd asd asd asd asd asd asd asd asd asd asd asd"
      "r3  r3  r3  r3  r3  r3  r3  r3  r3  r3  r3  r3 "
      "cta cta cta cta cta cta cta cta cta cta cta cta";
  }
  .pr-lead{padding-top:0;margin-top:18px}
  .price-figure{margin-top:26px;gap:13px}
  .price-amount{letter-spacing:-.035em}
  .price-after{margin-top:20px;padding-bottom:0}
  .pm-figure{margin-top:26px}
  .pr-aside{margin-top:30px}
  .price-list li{font-size:12.5px;padding-left:24px}
  .price-list strong{font-size:13px}
  .pr-aside .pr-scale{font-size:11px}
  .pr-cta{margin-top:22px}
}
@media(max-width:620px){.pm-plot-wide{display:none}.pm-plot-narrow{display:block}}
@media(max-width:540px){.pm-plot-narrow .pm-hour,.pm-plot-narrow .pm-night{font-size:7px}.pm-plot-narrow .pm-sum{font-size:7.5px}}
@media(max-width:470px){.pm-plot-narrow .pm-hour,.pm-plot-narrow .pm-night{font-size:8px}.pm-plot-narrow .pm-sum{font-size:8.5px}}
@media(max-width:410px){.pm-plot-narrow .pm-hour,.pm-plot-narrow .pm-night{font-size:9px}.pm-plot-narrow .pm-sum{font-size:9.5px}}
@media(max-width:380px){.pm-key{gap:8px 18px;font-size:9px;letter-spacing:1.4px}}
@media(max-width:360px){.pm-plot-narrow .pm-hour,.pm-plot-narrow .pm-night{font-size:10.5px}.pm-plot-narrow .pm-sum{font-size:11px}}


/* ======================================================================
   v14: the receipt (replaces the includes list and the month chart),
   the free-pilot strip right above the button, the small print under it.
   ====================================================================== */
.pa-grid{grid-template-areas:
  "eye eye ttl ttl ttl ttl ttl ttl led led led led"
  "r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1 "
  "prc prc prc prc prc prc rcp rcp rcp rcp rcp rcp"
  "plt plt plt plt plt plt plt plt plt plt plt plt"
  "cta cta cta cta cta cta cta cta cta cta cta cta"
  "fin fin fin fin fin fin fin fin fin fin fin fin"}
.pa-price{grid-area:prc;align-self:center}
.pa-price .price-figure{margin-top:0}
.pa-note{margin:26px 0 0;font-size:16px;line-height:1.7;color:#586269}

/* the receipt */
.pa-receipt{grid-area:rcp;justify-self:center;width:min(100%,460px);margin:clamp(34px,3.4vw,50px) 0 12px}
.rc{position:relative;background:#fffdf8;padding:34px 34px 28px;font-family:"Courier New",Consolas,"Lucida Console",monospace;color:#2a3035;transform:rotate(-1deg);box-shadow:0 1px 1px rgba(0,0,0,.05),0 26px 50px -24px rgba(28,34,38,.35)}
.rc::after{content:"";position:absolute;left:0;right:0;bottom:-12px;height:12px;background:linear-gradient(-45deg,transparent 8.5px,#fffdf8 0) 0 0/17px 12px repeat-x,linear-gradient(45deg,transparent 8.5px,#fffdf8 0) 0 0/17px 12px repeat-x}
.rc p{margin:0}
.rc-brand{text-align:center;font-size:19px;font-weight:700;letter-spacing:.34em}
.rc .rc-sub{margin-top:6px;text-align:center;font-size:11px;letter-spacing:.2em;color:#6c7479}
.rc-lines{list-style:none;margin:18px 0 0;padding:12px 0;border-top:1px dashed #b3b9b4;border-bottom:1px dashed #b3b9b4}
.rc-lines li{display:flex;align-items:baseline;gap:8px;font-size:14px;line-height:2}
.rc-lines li span{flex:none}
.rc-lines li i{flex:1;min-width:12px;border-bottom:2px dotted #cdd1cc;transform:translateY(-4px)}
.rc-lines li b{flex:none;font-weight:400;color:#8a4a12}
.rc .rc-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:16px;font-size:16px;font-weight:700;letter-spacing:.06em}
.rc-total b{font-size:30px;letter-spacing:-.02em}
.rc-vat{text-align:right;font-size:11px;letter-spacing:.2em;color:#6c7479}
.rc .rc-pilot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px dashed #b3b9b4;font-size:17px;font-weight:700;letter-spacing:.04em;color:#c2560a}
.rc-pilot b{font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em;color:#e8600a}
.rc .rc-foot{margin-top:22px;text-align:center;font-size:11px;letter-spacing:.22em;color:#6c7479}

/* the free-pilot strip */
.plt{grid-area:plt;display:grid;grid-template-columns:1fr 1fr .85fr;margin-top:var(--pr-band-lg)}
.plt-seg{position:relative;padding:22px clamp(14px,2vw,30px) 0 0}
.plt-seg::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:#b9bfbb}
.plt-free::before{background:var(--orange)}
.plt-paid::before{background:var(--ink)}
.plt-exit::before{background:repeating-linear-gradient(90deg,#aab1b1 0 12px,transparent 12px 19px)}
.plt-seg::after{content:"";position:absolute;left:-1px;top:-5px;width:14px;height:14px;border-radius:50%;box-sizing:border-box;background:var(--paper);border:3px solid var(--ink)}
.plt-free::after{border-color:var(--orange);background:var(--orange)}
.plt-k{margin:0;font-size:10px;font-weight:700;letter-spacing:1.8px;line-height:1.6;color:#7e8887}
.plt-v{margin:6px 0 0;font-size:clamp(24px,2.3vw,34px);font-weight:500;line-height:1.1;letter-spacing:-.03em;color:var(--ink)}
.plt-free .plt-v{color:#b3500d}
.plt-n{margin:8px 0 0;max-width:300px;font-size:13px;line-height:1.65;color:#667077}
.pricing-section .plt+.pr-cta{margin-top:clamp(26px,2.6vw,36px)}

/* the small print, under the button */
.pr-fine{grid-area:fin;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.2vw,34px);margin-top:clamp(40px,4.4vw,64px);padding-top:clamp(16px,1.8vw,22px);border-top:1px solid #dfe2dc}
.pr-fine p{margin:0;font-size:12px;line-height:1.8;color:#6d777d}
.pr-fine strong{font-weight:600;color:#3f4a51}

@media(max-width:1000px){
  .pa-grid{grid-template-areas:
    "eye eye eye eye eye eye eye eye eye eye eye eye"
    "ttl ttl ttl ttl ttl ttl ttl led led led led led"
    "r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1 "
    "prc prc prc prc prc prc prc rcp rcp rcp rcp rcp"
    "plt plt plt plt plt plt plt plt plt plt plt plt"
    "cta cta cta cta cta cta cta cta cta cta cta cta"
    "fin fin fin fin fin fin fin fin fin fin fin fin"}
  .pr-fine{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pa-grid{grid-template-areas:
    "eye eye eye eye eye eye eye eye eye eye eye eye"
    "ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl ttl"
    "led led led led led led led led led led led led"
    "r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1  r1 "
    "prc prc prc prc prc prc prc prc prc prc prc prc"
    "rcp rcp rcp rcp rcp rcp rcp rcp rcp rcp rcp rcp"
    "plt plt plt plt plt plt plt plt plt plt plt plt"
    "cta cta cta cta cta cta cta cta cta cta cta cta"
    "fin fin fin fin fin fin fin fin fin fin fin fin"}
  .pa-note{margin-top:18px;font-size:15px}
  .plt{grid-template-columns:1fr}
  .plt-seg{padding:0 0 22px 26px}
  .plt-seg::before{left:5px;right:auto;top:0;bottom:0;width:4px;height:auto}
  .plt-exit::before{background:repeating-linear-gradient(180deg,#aab1b1 0 12px,transparent 12px 19px)}
  .plt-seg::after{left:0;top:0}
  .plt-v{margin-top:4px}
}
@media(max-width:620px){
  .pa-receipt{margin-top:30px}
  .rc{transform:none;padding:26px 20px 22px}
  .rc-lines li{font-size:13px}
  .rc-total b{font-size:26px}
  .rc .rc-pilot{font-size:15px}
  .rc-pilot b{font-size:34px}
}