/* /pricing-a and /pricing-b (pricing/build_pricing.py). Oct 16 (owner: "let's design our pricing page, two versions, one
   where we show pricing plans and the other where we don't ... maintain the existing design style"; references
   monaco.com/pricing and clay.com/pricing). The landing page's world on a fluid page, as the legal pages are: parchment
   #f0ece3 and the grained #241e17 sections, HW Cigars for titles and figures, Neue Montreal for text, the painting gold as
   the one accent, slight corners (5px), the page's faint vertical grid rules, the torn paper edge into every dark band.
   Motion is the landing page's reveal plan, value for value (js/reveal-plan.json): a rise of 36px over 1s with its fade
   over .6s on cubic-bezier(.22,1,.36,1), triggered at 88% of the viewport, 60ms between siblings; headings rise letter by
   letter out of their line masks (900ms, 16ms a letter, 100ms a line, 112% and 4deg, cubic-bezier(.16,1,.3,1)). */
@font-face{font-display:swap;font-family:"HW Cigars";src:url(../assets/fonts/HWCigarsTRIAL-Regular.woff2) format("woff2");font-weight:400}
@font-face{font-display:swap;font-family:"HW Cigars";src:url(../assets/fonts/HWCigarsTRIAL-Light.woff2) format("woff2");font-weight:300}
@font-face{font-display:swap;font-family:"Neue Montreal";src:url(../assets/fonts/PPNeueMontreal-Regular.woff2) format("woff2");font-weight:400}
@font-face{font-display:swap;font-family:"Neue Montreal";src:url(../assets/fonts/PPNeueMontrealText-Book.woff2) format("woff2");font-weight:450}
@font-face{font-display:swap;font-family:"Sohne";src:url(../assets/fonts/Sohne-Buch-latin.woff2) format("woff2");font-weight:400}
@font-face{font-display:swap;font-family:"Sohne";src:url(../assets/fonts/Sohne-Kraftig-latin.woff2) format("woff2");font-weight:500}

:root{--ink:#261b1b;--text:rgba(38,27,27,.78);--muted:rgba(38,27,27,.56);--rule:rgba(38,27,27,.12);--paper:#f0ece3;--sheet:#f7f4ee;
  --gold:#c9a86a;--gilt:#a87f3c;--dark:#201a15;--night:#241e17;--grid:rgba(136,128,118,.096);--on-dark:#f0ece3;--on-dark-2:rgba(240,236,227,.66);--rule-dark:rgba(240,236,227,.12);
  --f-display:"HW Cigars",Georgia,serif;--f-body:"Neue Montreal",Helvetica,Arial,sans-serif;--f-ui:"Sohne",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --ease-out:cubic-bezier(.22,1,.36,1);--ease-char:cubic-bezier(.16,1,.3,1);--ease-fade:cubic-bezier(.33,1,.68,1);--ease-in-out:cubic-bezier(.65,0,.35,1);
  --r:5px;--bar:calc(64px * var(--s,1))}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--bar) + 24px);scrollbar-gutter:stable;overflow-x:hidden}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;overflow-x:clip;background:var(--paper);color:var(--text);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
:focus,:focus-visible{outline:none}
a{color:inherit}
img{display:block;max-width:100%}
.pr-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.pr-skip{position:absolute;left:16px;top:-60px;z-index:30;padding:8px 14px;border-radius:4px;background:var(--ink);color:var(--paper);font-size:14px;text-decoration:none}
.pr-skip:focus{top:12px}
/* Oct 16: the content sits on the landing page's grid, so the header's logo and menu line up with it: 111 to 1393 of the
   1512 design px on a desktop (--s, HEAD_JS in build_pricing.py), the phone canvas's 20px margins below 1024 (centred,
   as the landing page sets a tablet) */
.pr-wrap{width:calc(1282px * var(--s,1));margin-left:calc(111px * var(--s,1))}
html[data-layout="m"] .pr-wrap{width:calc(353px * var(--s,1));margin-left:calc(var(--mx,0px) + 20px * var(--s,1))}
.pr-eyebrow{margin:0 0 18px;font-size:13px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.5}
.pr-dark .pr-eyebrow{color:var(--on-dark)}
.pr-h2{margin:0;font:400 clamp(32px,3.4vw,50px)/1.05 var(--f-display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.pr-dark .pr-h2{color:var(--on-dark)}
.pr-lede{margin:22px 0 0;max-width:34em;font-size:18px;line-height:1.55;color:var(--text);text-wrap:pretty}
.pr-dark .pr-lede{color:var(--on-dark-2)}

/* the page's grid: the landing page's two faint 2px rules, on the content's margins (1512 design px: x 67 and 1448) */
.pr-main{position:relative}
.pr-rules{position:absolute;inset:0;pointer-events:none;z-index:0}
.pr-rules::before,.pr-rules::after{content:"";position:absolute;top:0;bottom:0;width:2px;background:rgba(136,128,118,.096)}
/* (Oct 16) on the torn edges' grid (the landing page's tears draw their rules at 69 and 1450 design px), so a rule runs
   on unbroken from the parchment through each torn edge and down the dark bands */
.pr-rules::before{left:calc(69px * var(--s,1))}
.pr-rules::after{left:calc(1450px * var(--s,1))}
html[data-layout="m"] .pr-rules{display:none}
.pr-sec{position:relative;z-index:1}

/* ── header: the landing page's own (sections/s01.css .nav, m01.css .nav), at its design-px places times --s. Each layout's
   header is the "page" js/nav.js measures (window.__page): 1512 or 393 design px wide, so the menu opens on it exactly.
   Below the hero, the landing page's sticky bar and menu (sections/nav.css) take over. ── */
.pr-hdr{--k:var(--s,1);position:absolute;top:0;z-index:20;display:none;justify-content:space-between;color:var(--ink)}
html:not([data-layout="m"]) .pr-hdr--d,html[data-layout="m"] .pr-hdr--m{display:flex}
.pr-hdr--d{left:0;width:calc(1512px * var(--k));height:calc(80px * var(--k));padding:calc(44px * var(--k)) calc(119px * var(--k)) 0 calc(111px * var(--k));align-items:center}
.pr-hdr--m{left:var(--mx,0px);width:calc(393px * var(--k));height:calc(68px * var(--k));padding:calc(12px * var(--k)) calc(12px * var(--k)) calc(12px * var(--k)) calc(20px * var(--k));align-items:center}
.pr-hdr__brand{display:flex;align-items:center;transition:opacity .2s var(--ease-fade)}
.pr-hdr__brand:hover{opacity:.75}
.pr-hdr__brand img{display:block;max-width:none}
.pr-hdr--d .pr-hdr__brand{height:calc(36px * var(--k))}
.pr-hdr--d .pr-hdr__brand img{width:calc(147.53px * var(--k));height:calc(32px * var(--k))}
.pr-hdr--m .pr-hdr__brand{height:calc(32px * var(--k))}
.pr-hdr--m .pr-hdr__brand img{width:calc(129.09px * var(--k));height:calc(28px * var(--k))}
.pr-hdr__menu{position:relative;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s var(--ease-fade)}
.pr-hdr__menu:hover{opacity:.6}
.pr-hdr--d .pr-hdr__menu{width:calc(62px * var(--k));height:calc(20px * var(--k))}
.pr-hdr--d .pr-hdr__menu img{position:absolute;left:0;top:calc(-2px * var(--k));width:calc(62px * var(--k));height:calc(22px * var(--k));max-width:none}
.pr-hdr--d .pr-hdr__menu::before{content:"";position:absolute;inset:calc(-12px * var(--k)) calc(-8px * var(--k))}   /* (a bigger target) */
.pr-hdr--m .pr-hdr__menu{width:calc(44px * var(--k));height:calc(44px * var(--k));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(6px * var(--k))}
.pr-hdr--m .pr-hdr__menu i{display:block;width:calc(22px * var(--k));height:calc(2px * var(--k));background:#201a14}
.pr-hdr a:focus-visible,.pr-hdr button:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
.pr-hdr [data-quiet-focus]{outline:none}

/* the site's dark CTA (legal.css .lg-cta, sections/nav.css .sbar__btn): taupe to ink, bevel, grain, gilt label, the glow */
@property --cta-h{syntax:"<number>";inherits:false;initial-value:0}
.pr-cta{--cta-h:0;--cta-bloom:cubic-bezier(.35,.55,.25,1);
  position:relative;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;border-radius:var(--r);overflow:hidden;isolation:isolate;text-decoration:none;cursor:pointer;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;font:inherit;
  border:1.4px solid rgb(171 149 137);
  background:linear-gradient(119.05deg,rgba(179,159,149,var(--cta-h)) 0%,rgba(80,67,63,var(--cta-h)) 45%,rgba(60,50,50,var(--cta-h)) 100%),linear-gradient(119.05deg,#ab9589 0%,#3a2c28 45%,#261b1b 100%);
  box-shadow:inset 1.12px 1.12px 2.24px 0 #ecded7,inset -1.12px -1.12px 4.2px 0 rgba(18,10,9,.8),
    0 calc(3px * (.4 + .6 * var(--cta-h))) calc(8px * (.6 + .4 * var(--cta-h))) 0 rgba(61,42,20,calc(.3 * var(--cta-h))),
    0 0 calc(14px * (.7 + .3 * var(--cta-h))) calc(-2px - 4.2px * (1 - var(--cta-h))) rgba(236,176,74,calc(.8 * var(--cta-h)));
  transition:transform .2s var(--ease-out),--cta-h .55s var(--cta-bloom)}
.pr-cta::before,.pr-cta::after{content:"";position:absolute;inset:0;z-index:-1;mix-blend-mode:overlay;background:url(../assets/shared/btn-noise-1.webp) 0 0/173.217px 173.217px;opacity:.45;pointer-events:none}
.pr-cta::after{background-image:url(../assets/shared/btn-noise-2.webp);opacity:.25}
.pr-cta span{position:relative;font-size:14px;line-height:1;white-space:nowrap;color:#f0d9a0;filter:drop-shadow(0 .56px 1.12px rgba(0,0,0,.25))}   /* solid, as the homepage's (.sbar__label) */
@media (hover:hover) and (pointer:fine){.pr-cta:hover{--cta-h:1;transition:transform .2s var(--ease-out),--cta-h .6s var(--cta-bloom)}}
.pr-cta:focus-visible{--cta-h:1}
.pr-cta:active{--cta-h:1;transform:scale(.97);transition:transform .1s var(--ease-out),--cta-h .32s var(--cta-bloom)}
.pr-cta--lg{height:48px;padding:0 28px}
.pr-cta--lg span{font-size:15px}
/* the quiet one: ink hairline on paper, filled on hover */
.pr-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:var(--r);border:1px solid rgba(38,27,27,.28);
  background:transparent;color:var(--ink);font:inherit;font-size:14px;line-height:1;text-decoration:none;cursor:pointer;
  transition:background-color .3s var(--ease-fade),color .3s var(--ease-fade),border-color .3s var(--ease-fade),transform .2s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pr-btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}}
.pr-btn:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pr-btn:active{transform:scale(.97)}
.pr-link{color:var(--ink);font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:rgba(38,27,27,.3);text-underline-offset:4px;transition:text-decoration-color .2s ease}
.pr-link:hover,.pr-link:focus-visible{text-decoration-color:var(--ink)}

/* ── hero ── */
.pr-hero{padding:calc(80px * var(--s,1) + 66px) 0 0}   /* Oct 21 (owner: "the top padding in the hero section of the pricing page can be reduced quite a bit, measure it nicely"): the eyebrow sat 106px under the header (184 at 1512); now 66 under it (146), where the landing page's first line sits under the same header (its pill, 150) */
.pr-title{margin:0;font:400 clamp(42px,4.6vw,68px)/1 var(--f-display);letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
/* Oct 16 (owner: "the alignment and hierarchy here on these two looks weird, refer to Mobbin"): one centred stack, as the
   landing page's own hero and Mobbin's best pricing heads set it (Oku and Monologue in a serif, Aside, Homerun): the label,
   the title, its line under it, then the control the plans answer to, right above them */
.pr-hero .pr-eyebrow{text-align:center;margin-bottom:20px}
.pr-hero__row{display:flex;flex-direction:column;align-items:center;text-align:center}
.pr-hero__side{flex:none;width:100%;max-width:540px;margin-top:22px}
.pr-hero__side .pr-lede{margin:0 auto;text-wrap:balance}
.pr-hero__acts{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 26px;margin-top:30px}
/* the logo row: the landing page's (s01.css .logos): the line centred above, 28 design px, then the marquee, two strips of
   1320 x 30.5 with a logo's gap (115) between them, a strip every 40s, under the Figma edge fade */
.pr-logos{display:flex;flex-direction:column;align-items:center;gap:calc(28px * var(--s,1));margin-top:128px}
.pr-logos p{margin:0;font-size:14px;line-height:1.28;color:rgba(38,27,27,.7);text-align:center;white-space:nowrap}
.pr-logos__cell{position:relative;width:100%;height:calc(30.5px * var(--s,1));overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 9.1346%,#000 85%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 9.1346%,#000 85%,transparent 100%)}
.pr-logos__track{display:flex;width:max-content;animation:pr-marquee 40s linear infinite;will-change:transform}
.pr-logos__cell:hover .pr-logos__track,.pr-logos__cell.is-off .pr-logos__track{animation-play-state:paused}
.pr-logos__track img{flex:none;width:calc(1320px * var(--s,1));height:calc(30.5px * var(--s,1));max-width:none;margin-right:calc(115px * var(--s,1))}
@keyframes pr-marquee{to{transform:translateX(calc(-1435px * var(--s,1)))}}
/* the phone's (m01.css): 818.4 x 18.91 strips, 71.3 apart, every 28s, across the whole canvas */
html[data-layout="m"] .pr-logos{gap:calc(14px * var(--s,1));margin-top:72px}
html[data-layout="m"] .pr-logos p{font-size:13px;line-height:16px}
html[data-layout="m"] .pr-logos__cell{width:calc(393px * var(--s,1));height:calc(40px * var(--s,1));margin:0 calc(-20px * var(--s,1));
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 calc(64px * var(--s,1)),#000 calc(100% - 64px * var(--s,1)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 calc(64px * var(--s,1)),#000 calc(100% - 64px * var(--s,1)),transparent 100%)}
html[data-layout="m"] .pr-logos__track{position:absolute;left:calc(20px * var(--s,1));top:calc(10.545px * var(--s,1));animation-name:pr-marquee-m;animation-duration:28s}
html[data-layout="m"] .pr-logos__track img{width:calc(818.4px * var(--s,1));height:calc(18.91px * var(--s,1));margin-right:calc(71.3px * var(--s,1))}
@keyframes pr-marquee-m{to{transform:translateX(calc(-889.7px * var(--s,1)))}}
@media (prefers-reduced-motion:reduce){.pr-logos__track{animation:none!important}}

/* billing: two choices in one slight-cornered case, the chosen one on a raised sheet */
.pr-bill{display:inline-flex;position:relative;padding:4px;border-radius:7px;background:rgba(38,27,27,.06)}
.pr-bill button{position:relative;z-index:1;height:36px;padding:0 16px;border:0;border-radius:var(--r);background:none;color:var(--muted);font:inherit;font-size:14px;cursor:pointer;transition:color .3s var(--ease-fade)}
.pr-bill button[aria-pressed="true"]{color:var(--ink)}
.pr-bill__thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;border-radius:var(--r);background:#faf8f3;box-shadow:0 1px 2px rgba(61,42,20,.12),0 0 0 1px rgba(230,195,138,.35);
  transition:transform .5s var(--ease-out),width .5s var(--ease-out)}
.pr-bill__tag{margin-left:8px;font-size:12px;color:var(--gilt)}

/* ── plans ── */
.pr-plans{padding:64px 0 0}
.pr-plans__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;border-radius:var(--r);background:var(--sheet);   /* no overflow clip: the people list drops over the card (the head clips itself) */
  box-shadow:0 0 0 1px rgba(38,27,27,.08),0 1px 0 rgba(38,27,27,.04),0 24px 48px -34px rgba(36,30,23,.45)}
.plan.is-rec{box-shadow:0 0 0 1px rgba(201,168,106,.7),0 1px 0 rgba(38,27,27,.04),0 28px 56px -32px rgba(61,42,20,.5)}
/* the plan's glass: the testimonial cards' textures (assets/fx), cropped past their torn edges, under a soft shade */
.plan__glass{position:relative;min-height:176px;padding:24px 26px 22px;display:flex;flex-direction:column;justify-content:flex-end;color:#f6f1e7;isolation:isolate;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.pr-fx{position:absolute;inset:-14% -10%;z-index:-2;background-position:center;background-size:cover;background-repeat:no-repeat;pointer-events:none}
.plan__glass::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,14,10,0) 18%,rgba(20,14,10,.34) 100%)}
.plan--green .plan__glass{background:#3f7466}
.plan--purple .plan__glass{background:#735388}
.plan--brown .plan__glass{background:#7f5849}
.plan__tag{position:absolute;top:18px;right:18px;margin:0;padding:6px 9px;border-radius:3px;background:rgba(20,14,10,.32);font-size:11.5px;line-height:1;letter-spacing:.07em;text-transform:uppercase;color:#f3dca6}
.plan__name{margin:0;font:400 40px/1 var(--f-display);letter-spacing:-.02em}
.plan__for{margin:8px 0 0;font-size:15px;line-height:1.4;color:rgba(246,241,231,.86)}
.plan__body{display:flex;flex-direction:column;flex:1;padding:26px 26px 30px}
.plan__price{display:flex;align-items:baseline;gap:10px;margin:0;color:var(--ink)}
.plan__amt{position:relative;display:inline-flex;overflow:hidden;font:400 52px/1 var(--f-display);letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums}
.plan__amt>span{display:block}
.plan__amt>span.is-out{position:absolute;left:0;top:0}
.plan__per{font-size:15px;color:var(--muted)}
.plan__note{margin:10px 0 0;min-height:1.5em;font-size:14px;line-height:1.5;color:var(--muted)}
.plan__each{margin:4px 0 0;font-size:14px;color:var(--gilt)}
.plan__vol{display:block;margin:22px 0 0}
.plan__vol>span:first-child{display:block;margin:0 0 8px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* the people a month (Oct 16, owner: "custom dropdown instead of default dropdown"): the field is the old select's, value
   for value; its list is a sheet of the card's paper that drops 6px under it, each choice with its price and its cost a
   person, the chosen one marked with the page's gilt lozenge (.pr-checks), the one under the pointer or the arrows lit
   with a wash of the gold */
.pr-dd{position:relative}
.pr-dd__btn{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:11px 15px 11px 14px;border:1px solid rgba(38,27,27,.18);border-radius:var(--r);background:#fbfaf6;color:var(--ink);font-size:15px;line-height:1;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;transition:border-color .25s var(--ease-fade),box-shadow .25s var(--ease-fade)}
@media (hover:hover) and (pointer:fine){.pr-dd__btn:hover{border-color:rgba(38,27,27,.34)}}
.pr-dd__btn:focus-visible{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,168,106,.22)}
.pr-dd.is-open .pr-dd__btn{border-color:rgba(168,127,60,.6)}
.pr-dd__chev{flex:none;fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:transform .32s var(--ease-out)}
.pr-dd.is-open .pr-dd__chev{transform:rotate(180deg)}
.pr-dd__list{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:5px;list-style:none;border-radius:var(--r);background:#fbfaf6;
  box-shadow:0 0 0 1px rgba(38,27,27,.1),0 16px 36px -12px rgba(36,30,23,.3),0 3px 8px -2px rgba(36,30,23,.08);
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .16s var(--ease-fade),transform .16s var(--ease-fade),visibility 0s linear .16s}
.pr-dd.is-open .pr-dd__list{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .26s var(--ease-fade),transform .26s var(--ease-out),visibility 0s}
.pr-dd__opt{display:grid;grid-template-columns:9px minmax(0,1fr) auto;column-gap:11px;row-gap:3px;align-items:baseline;padding:11px 12px 11px 11px;border-radius:3px;line-height:1.25;color:var(--text);cursor:pointer;transition:background-color .18s var(--ease-fade),color .18s var(--ease-fade)}
.pr-dd__opt i{grid-row:1/span 2;align-self:center;justify-self:center;width:5px;height:5px;background:var(--gilt);transform:rotate(45deg) scale(.4);opacity:0;transition:opacity .2s var(--ease-fade),transform .32s var(--ease-out)}
.pr-dd__opt[aria-selected="true"]{color:var(--ink)}
.pr-dd__opt[aria-selected="true"] i{opacity:1;transform:rotate(45deg)}
.pr-dd__opt.is-act{background:rgba(201,168,106,.13);color:var(--ink)}
.pr-dd__n{font-size:15px}
.pr-dd__p{font-size:15px;font-variant-numeric:lining-nums tabular-nums;text-align:right;color:var(--ink)}
.pr-dd__e{grid-column:2/span 2;font-size:13px;color:var(--muted)}
.plan__field{display:flex;align-items:center;height:44px;padding:0 14px;border:1px dashed rgba(38,27,27,.2);border-radius:var(--r);font-size:15px;color:var(--text)}
.plan__act{margin-top:24px}
.plan__act>*{width:100%}
.plan .pr-btn{height:48px;font-size:15px}
.plan__inc{margin:30px 0 14px;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pr-checks{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.pr-checks li{position:relative;padding-left:22px;font-size:15px;line-height:1.45;color:var(--text)}
/* Oct 16 (owner: "hate the icons here"): no ticks; each line is marked with a small gilt lozenge */
.pr-checks li::before{content:"";position:absolute;left:2px;top:calc(.725em - 2.5px);width:5px;height:5px;background:var(--gilt);transform:rotate(45deg)}
.pr-fine{margin:26px 0 0;text-align:center;font-size:13.5px;color:var(--muted)}

/* ── the gift: the product's campaign screen (the footer card's, sections/s14.html), in its own Söhne ── */
.pr-gift{padding:150px 0 0}
.pr-two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center}
.pr-ledger{border-radius:8px;background:#fdfcf9;color:#1c1917;font-family:var(--f-ui);box-shadow:0 0 0 1px rgba(28,25,23,.07),0 2px 4px rgba(28,25,23,.04),0 36px 70px -40px rgba(36,30,23,.55);overflow:hidden}
.pr-ledger__head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;border-bottom:1px solid rgba(28,25,23,.08)}
.pr-ledger__t{margin:0;font-size:15px;font-weight:500;letter-spacing:-.01em}
.pr-ledger__s{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#6b665e}
.pr-ledger__s::before{content:"";width:7px;height:7px;border-radius:50%;background:#c9a86a}
.pr-ledger__cols,.pr-ledger__row{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.6fr) 64px 48px;gap:16px;align-items:center;padding:0 22px}
.pr-ledger__cols{height:36px;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:#9c968d;border-bottom:1px solid rgba(28,25,23,.06)}
.pr-ledger__row{min-height:68px;border-bottom:1px solid rgba(28,25,23,.06);font-size:13.5px}
.pr-ledger__p{display:flex;align-items:center;gap:11px;min-width:0}
.pr-ledger__p img{flex:none;width:30px;height:30px;border-radius:50%}
.pr-ledger__p b,.pr-ledger__g b{display:block;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-ledger__p small,.pr-ledger__g small{display:block;font-size:12px;color:#6b665e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-ledger__g{display:flex;align-items:center;gap:11px;min-width:0}
.pr-ledger__g img{flex:none;width:34px;height:34px;border-radius:4px;background:#f1ede6}
.pr-ledger__n{font-variant-numeric:tabular-nums;text-align:right}
.pr-ledger__d{color:#6b665e;text-align:right}
.pr-ledger__foot{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 22px;background:#f7f4ee}
.pr-ledger__sum{font-size:13.5px;color:#1c1917}
.pr-ledger__sum span{color:#6b665e}
.pr-ledger__go{height:32px;padding:0 14px;border-radius:5px;background:#1c1917;color:#f7f4ee;font-size:12.5px;display:inline-flex;align-items:center}

/* ── dark bands: grain, torn in at the top and out at the bottom (the landing page's tear fallbacks, assets/tears) ── */
.pr-dark{position:relative;z-index:1;background:var(--night);color:var(--on-dark-2)}
/* Oct 16 (owner: "the blending is off here, if you look carefully you can see a sharp cut"): the dark bands are the landing
   page's own sheet, value for value, so their torn edges (its tear shader, and the static ones made from it) meet them
   with no step: #241e17 under the shared grain tile (black, alpha per px, unblended, at the size the shader draws it on this fluid page), and the
   page's two rules running on down them, as the landing page's .grid-rule does over its dark sections */
.pr-dark::before,.pr-end::before{content:"";position:absolute;inset:0;pointer-events:none;image-rendering:pixelated;
  background:linear-gradient(var(--grid),var(--grid)) calc(69px * var(--s,1)) 0/2px 100% no-repeat,linear-gradient(var(--grid),var(--grid)) calc(1450px * var(--s,1)) 0/2px 100% no-repeat,url(../assets/shared/grain.webp) 0 0/128px 128px}
html[data-layout="m"] .pr-dark::before,html[data-layout="m"] .pr-end::before{background:url(../assets/shared/grain.webp) 0 0/128px 128px}
.pr-tear{position:absolute;left:0;right:0;height:clamp(110px,19vw,290px);pointer-events:none;background:url(../assets/tears/s14.webp) center bottom/100% 100% no-repeat}
.pr-tear--top{bottom:100%;margin-bottom:-2px}
.pr-tear--bot{top:100%;margin-top:-2px;transform:scaleY(-1);background-image:url(../assets/tears/s07.webp)}
html[data-layout="m"] .pr-tear--top{background-image:url(../assets/tears/m14.webp)}   /* the phone's own edges (no rules on them) */
html[data-layout="m"] .pr-tear--bot{background-image:url(../assets/tears/m07.webp)}
/* the live edges (Oct 16, owner: "this is not animating like the homepage"): the landing page's tear shader
   (shaders/tear.js), mounted by the page script on an edge of its own where each static one hangs, as /manifesto does
   (its .ms-tl). The static edge stays for reduced motion and without WebGL2, and until the live one has drawn */
.pr-tl{position:absolute;left:0;right:0;height:clamp(110px,19vw,290px);pointer-events:none}
.pr-tl--top{bottom:100%;margin-bottom:-2px}
.pr-tl--bot{top:100%;margin-top:-2px}
.pr-tl>.tear-canvas{position:absolute;left:0;top:0;width:100%;height:100%;transform:scaleY(-1);opacity:0;transition:opacity .5s var(--ease-fade)}
.pr-tl.tear-live>.tear-canvas{opacity:1}
.pr-tl.tear-live+.pr-tear{visibility:hidden;transition:visibility 0s .5s}
.pr-dark>.pr-wrap{position:relative}

/* every plan: the three steps, the landing page's step cards as stills (assets/s04/rive posters) */
.pr-steps{margin-top:230px;padding:140px 0 150px}
.pr-steps__head{display:flex;align-items:flex-end;justify-content:space-between;gap:48px}
.pr-steps__head .pr-lede{max-width:26em;margin:0}
.pr-steps__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:64px}
.pr-step{margin:0}
.pr-step__img{aspect-ratio:1232/1080;border-radius:var(--r);overflow:hidden;background:#17120e;box-shadow:0 0 0 1px rgba(201,168,106,.18)}
.pr-step__img img{width:100%;height:100%;object-fit:cover}
.pr-step figcaption{margin-top:22px}
.pr-step__n{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.pr-step__t{display:block;margin-top:8px;font:400 28px/1.1 var(--f-display);letter-spacing:-.01em;color:var(--on-dark)}
.pr-step__p{display:block;margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--on-dark-2)}

/* ── compare ── */
.pr-compare{padding:270px 0 0}   /* (room under the dark band's torn edge) */
.pr-compare__head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.pr-cmp{margin-top:44px;border-top:1px solid var(--rule)}
.pr-cmp>summary{list-style:none;display:flex;justify-content:center;padding:26px 0;cursor:pointer}
.pr-cmp>summary::-webkit-details-marker{display:none}
.pr-cmp>summary .pr-btn::after{content:"";width:7px;height:7px;margin-left:4px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .4s var(--ease-out)}
.pr-cmp[open]>summary .pr-btn::after{transform:translateY(2px) rotate(-135deg)}
.pr-cmp__body{overflow:hidden}
.pr-table{width:100%;border-collapse:collapse;font-size:15px}
.pr-table th,.pr-table td{padding:0 16px;height:54px;border-bottom:1px solid var(--rule);text-align:center;vertical-align:middle;font-weight:400}
.pr-table th:first-child,.pr-table td:first-child{padding-left:0;text-align:left;color:var(--text);width:40%}
.pr-table thead th{position:sticky;top:0;z-index:2;height:76px;background:var(--paper);font:400 24px/1 var(--f-display);color:var(--ink);letter-spacing:-.01em}
.pr-table thead th small{display:block;margin-top:6px;font:400 13px/1 var(--f-body);color:var(--muted);letter-spacing:0}
.pr-table tbody th{height:64px;padding-top:22px;text-align:left;vertical-align:bottom;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);opacity:.5}
.pr-table .y{display:inline-block;width:6px;height:6px;background:var(--gilt);transform:rotate(45deg);vertical-align:middle}
.pr-table .n{display:inline-block;width:10px;height:1px;background:rgba(38,27,27,.3);vertical-align:middle}
.pr-table td:not(:first-child){color:var(--ink)}

/* ── what they said: the testimonial cards' glass (sections/s11) ── */
.pr-said{padding:160px 0 0}
.pr-said__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:56px}
.pr-q{position:relative;display:flex;flex-direction:column;justify-content:space-between;min-height:340px;margin:0;padding:26px 26px 24px;border-radius:4.27px;overflow:hidden;isolation:isolate;color:#f6f1e7}
.pr-q::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(20,14,10,0) 40%,rgba(20,14,10,.28) 100%)}
.pr-q--blue{background:#4b5a86}.pr-q--green{background:#3f7466}.pr-q--brown{background:#7f5849}
.pr-q blockquote{margin:0;font:450 26px/1.18 var(--f-body);letter-spacing:-.02em;text-wrap:balance}
.pr-q figcaption{display:flex;align-items:center;gap:12px;margin-top:40px;font-size:14px;line-height:1.3}
.pr-q figcaption img{flex:none;width:38px;height:38px;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.4)}
.pr-q figcaption small{display:block;font-size:12.5px;color:rgba(246,241,231,.78)}

/* ── questions: the title beside the list (Monaco's), each answer opening on the site's ease ── */
.pr-faq{padding:170px 0 0}
.pr-faq__grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:72px;align-items:start}
.pr-faq__head{position:sticky;top:calc(var(--bar) + 40px)}
.pr-faq__list{border-top:1px solid var(--rule)}
.pr-faq details{border-bottom:1px solid var(--rule)}
.pr-faq summary{list-style:none;position:relative;display:block;padding:24px 48px 24px 0;font-size:19px;line-height:1.35;color:var(--ink);cursor:pointer}
.pr-faq summary::-webkit-details-marker{display:none}
.pr-faq summary::before,.pr-faq summary::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:1.4px;background:var(--ink);transition:transform .5s var(--ease-out),opacity .3s ease}
.pr-faq summary::after{transform:rotate(90deg)}
.pr-faq details[open] summary::after{transform:rotate(0);opacity:0}
.pr-faq summary:hover{color:var(--gilt)}
.pr-faq__a{overflow:hidden}
.pr-faq__a p{margin:0;padding:0 48px 26px 0;max-width:38em;font-size:16.5px;line-height:1.6;color:var(--text)}

/* ── the end: the landing page's footer painting, the Wanderer above the fog ── */
.pr-end{position:relative;z-index:1;margin-top:260px;padding-bottom:96px;text-align:center;color:var(--on-dark);background:var(--night)}
.pr-end__in{position:relative;margin:0 auto;padding:110px 24px 72px;max-width:760px}
.pr-end .pr-h2{color:#fbf6ec;font-size:clamp(38px,4.2vw,62px)}
.pr-end p{margin:20px auto 0;max-width:30em;font-size:18px;line-height:1.5;color:var(--on-dark-2);text-wrap:balance}   /* (owner: "make the subtext breaking symmetric"): a line a sentence (build_pricing.py end()), each balanced if it wraps */
.pr-end .pr-cta{margin-top:34px}
/* Turner's Venice (the landing page's s02 plate), as the manifesto sets it: a wide plate with a gilt hairline */
.pr-end__plate{position:relative;margin:0;aspect-ratio:2000/908;box-shadow:0 18px 52px rgba(0,0,0,.5),0 3px 10px rgba(0,0,0,.32)}
.pr-end__plate .pic{position:absolute;left:2.2%;top:5%;width:95.6%;height:90%;object-fit:cover;object-position:50% 52%}
.pr-end__plate .gold{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* the glass wordmark (js/glass-mark.js): a WebGL canvas on the painting's own box, under the frame, shown once it is built.
   Without WebGL, the word's outline frosted on the painting, clipped to it, moved by the same scroll */
.pr-end__plate .glass{position:absolute;left:2.2%;top:5%;width:95.6%;height:90%;opacity:0;pointer-events:none;transition:opacity .35s var(--ease-fade)}
.pr-end__plate.is-glass .glass{opacity:1}
/* Oct 17 (owner: "the bottom footer frame on pricing pages show the image first and then there's some delay and then
   the frame appears"): the painting and its frame are two lazy images, so whichever came in first showed first. They
   now wait for each other (the page script marks the plate .is-ready once both are loaded and decoded) and come in as
   one, the glass with them */
.pr-end__plate>img,.pr-end__plate>.pr-glass__clip{transition:opacity .5s var(--ease-fade)}
html.pr-js .pr-end__plate:not(.is-ready)>img,html.pr-js .pr-end__plate:not(.is-ready)>.pr-glass__clip,html.pr-js .pr-end__plate:not(.is-ready)>.glass{opacity:0}
.pr-glass__clip{position:absolute;left:2.2%;top:5%;width:95.6%;height:90%;overflow:hidden;pointer-events:none}
.pr-glass__src{display:none;position:absolute;left:11%;top:0;width:78%;height:auto;fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.6);stroke-width:.06;filter:drop-shadow(0 4px 10px rgba(20,14,10,.3))}
.no-glass .pr-glass__src{display:block}
/* Oct 21: the outline stands in for the glass until it is ready (js/glass-mark.js), then fades as the glass comes in */
.pr-end__plate .pr-glass__src{display:block;transition:opacity .5s var(--ease-fade)}
.pr-end__plate.is-glass .pr-glass__src{opacity:0}
/* Oct 21, later (owner: "Daymaker doesn't load up in the stylized manner like it should at first and looks flat/unloaded"):
   the word in glass at rest, baked from the live effect (assets/pricing/glass-rest-*.webp), on the painting's own box. It
   comes in with the painting and the frame (.is-ready above), so the plate is never seen without the glass; the live glass
   then fades in over it at rest (the same picture). With the still there the outline never shows */
.pr-end__plate .pr-glass__rest{position:absolute;left:2.2%;top:5%;width:95.6%;height:90%}
.pr-end__plate .pr-glass__rest~.pr-glass__clip{display:none}
/* the painting under it is only the live glass's source: hidden, so it never shows through the still while the plate
   fades in (the still's painting is the glass's, 3% nearer). Should the still fail, js/glass-mark.js removes it and the
   painting and the outline show again */
.pr-end__plate:has(>.pr-glass__rest)>.pic{visibility:hidden}

/* ── footer ── Oct 21 (owner: "this footer on the pricing page looks ugly ... use the above picture frame to subtly reveal
   the section below which has footer links as a parallax effect", after storeyarchitecture.co.uk): a sheet of the page's
   paper held at the foot of the screen, under the end band, so the band with its framed painting and its torn foot lifts
   off it as the page ends; the links drift up into place as they are uncovered (the page's scroll, on the compositor).
   The sheet is fixed but seen only through its own slot at the end of the page (.pr-foot, clipped, as tall as the sheet:
   the page script sets it), so no section above can show it; where the sheet would not fit the screen (a phone, a short
   window) it is an ordinary footer. The links are the landing page's (build_pricing.py foot_cols). */
.pr-end{z-index:1}
.pr-tear--foot{z-index:2}
.pr-foot{position:relative;background:var(--paper);color:var(--ink);font-size:15px;line-height:1.4}
.pr-foot.is-reveal{clip-path:inset(0)}
.pr-foot.is-reveal .pr-foot__sheet{position:fixed;left:0;right:0;bottom:0;background-color:var(--paper)}
.pr-foot__sheet{background:var(--paper);padding:clamp(150px,17vw,250px) 0 40px}   /* (Oct 21, owner: "weird grain effect gets added here, it's a bug": the dark sections' grain tile read as speckle on paper; plain paper, as the landing footer) */
.pr-foot__in{display:grid;grid-template-columns:minmax(160px,1fr) auto;grid-template-areas:"brand cols" "end end";gap:56px 48px;align-items:start}
.pr-foot__brand{grid-area:brand;display:inline-block;width:max-content;transition:opacity .2s var(--ease-fade)}
.pr-foot__brand img{display:block;width:148px;height:auto}
.pr-foot__cols{grid-area:cols;display:grid;grid-template-columns:repeat(4,max-content);gap:0 clamp(40px,5vw,88px)}
.pr-foot__h{margin:0 0 14px;font-size:13px;letter-spacing:.01em;color:var(--muted)}
.pr-foot__col ul{margin:0;padding:0;list-style:none;display:grid;gap:9px}
.pr-foot__col a{display:block;color:var(--ink);text-decoration:none;opacity:.63;transition:opacity .2s var(--ease-fade)}
/* Oct 21 (owner: the home page footer's hover on these links): js/flip.js splits them; at rest the label in the footer's
   63%, and the copy rolling in from below in the full ink, as on the landing (s14.css .s14-col a.is-flip) */
.pr-foot__col a.is-flip{opacity:1;color:color-mix(in srgb,var(--ink) 63%,transparent);--flip-ink:var(--ink)}
.pr-foot__end{grid-area:end;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-top:18px;border-top:1px solid var(--rule)}
.pr-foot__c{margin:0;font-size:13px;color:var(--muted)}
.pr-foot__ai{display:flex;align-items:center;gap:14px;margin-left:auto}
.pr-foot__ai p{margin:0;font-size:13px;color:var(--muted)}
.pr-foot__set{display:flex;align-items:center}
.pr-foot__set a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-12px 0;transition:opacity .2s var(--ease-fade)}
.pr-foot__set a img{display:block;width:20px;height:20px}
.pr-foot__ai+.pr-foot__set{padding-left:14px;border-left:1px solid var(--rule)}
@media (hover:hover){.pr-foot__col a:hover,.pr-foot__brand:hover,.pr-foot__set a:hover{opacity:.55}.pr-foot__col a.is-flip:hover{opacity:1}}
.pr-foot a:focus-visible{outline:2px solid var(--gilt);outline-offset:3px;border-radius:2px}
@supports (animation-timeline:scroll()){@media (prefers-reduced-motion:no-preference){
  .pr-foot.is-reveal .pr-foot__in{animation:pr-foot-in linear both;animation-timeline:scroll(root block);animation-range:calc(100% - var(--pr-fh, 70vh)) 100%}
}}
@keyframes pr-foot-in{from{translate:0 64px;opacity:.35}to{translate:0 0;opacity:1}}
@media (max-width:860px){
  .pr-foot__in{grid-template-columns:1fr;grid-template-areas:"brand" "cols" "end";gap:36px}
  .pr-foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .pr-foot__end{flex-direction:column;align-items:flex-start}
  .pr-foot__ai{margin-left:0}
  .pr-foot__ai+.pr-foot__set{padding-left:0;border-left:0}
}

/* ── version B: no plans ── */
.pr-promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:72px}
.pr-promise{padding:26px 26px 28px;border-radius:var(--r);background:var(--sheet);box-shadow:0 0 0 1px rgba(38,27,27,.08),0 20px 40px -32px rgba(36,30,23,.4)}
.pr-promise svg{display:block;width:26px;height:26px;color:var(--gilt)}
.pr-promise h3{margin:20px 0 0;font:400 26px/1.1 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.pr-promise p{margin:10px 0 0;font-size:15.5px;line-height:1.55;color:var(--text)}
.pr-incl{margin-top:230px;padding:150px 0 160px}
/* Oct 16: what every campaign includes, as a catalogue of the landing page's objects (assets/pricing, from its hero, s02
   and s04 art): two columns of lots between hairlines, each piece lit on the dark band, its numeral in gold, its label
   in the display face. A piece lifts a little under the pointer. */
.pr-lots{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule-dark)}
.pr-lot{display:grid;grid-template-columns:minmax(0,216px) minmax(0,1fr);gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--rule-dark)}
.pr-lot:nth-child(odd){padding-right:44px;border-right:1px solid var(--rule-dark)}
.pr-lot:nth-child(even){padding-left:44px}
.pr-lot__obj{position:relative;margin:0;height:196px;display:flex;align-items:center;justify-content:center;isolation:isolate}
.pr-lot__obj::before{content:"";position:absolute;inset:-6px 0;z-index:-1;pointer-events:none;
  background:radial-gradient(48% 44% at 50% 54%,rgba(236,214,170,.15),rgba(236,214,170,.05) 48%,rgba(236,214,170,0) 74%)}
.pr-lot__obj img{display:block;width:var(--w);max-width:100%;height:auto;
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.5)) drop-shadow(0 2px 3px rgba(0,0,0,.35));transition:transform .9s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.pr-lot:hover .pr-lot__obj img{transform:translateY(-6px) rotate(-1.2deg)}}
.pr-lot__n{display:block;font:400 19px/1 var(--f-display);letter-spacing:.04em;color:var(--gold)}
.pr-lot h3{margin:12px 0 0;font:400 27px/1.12 var(--f-display);letter-spacing:-.01em;color:var(--on-dark);text-wrap:balance}
.pr-lot p{margin:10px 0 0;font-size:15.5px;line-height:1.5;color:var(--on-dark-2);text-wrap:pretty}
.pr-incl .pr-steps__grid{margin-top:120px}
.pr-budget{padding:270px 0 0}
.pr-ledger3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:56px;border-radius:var(--r);background:var(--sheet);box-shadow:0 0 0 1px rgba(38,27,27,.08),0 28px 56px -40px rgba(36,30,23,.45)}
.pr-ledger3>div{padding:34px 32px 36px}
.pr-ledger3>div+div{border-left:1px solid var(--rule)}
.pr-ledger3 small{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pr-ledger3 strong{display:block;margin-top:18px;font:400 46px/1 var(--f-display);letter-spacing:-.03em;color:var(--ink);font-variant-numeric:lining-nums}
.pr-ledger3 b{display:block;margin-top:22px;font-weight:400;font-size:16px;color:var(--ink)}
.pr-ledger3 p{margin:6px 0 0;font-size:15px;line-height:1.55;color:var(--text)}
/* the planner: people x the cap per gift, the most a campaign can spend on gifts */
.pr-plan{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:24px;border-radius:var(--r);overflow:hidden;box-shadow:0 0 0 1px rgba(38,27,27,.08),0 28px 56px -40px rgba(36,30,23,.45)}
.pr-plan__in{padding:36px 36px 40px;background:var(--sheet)}
.pr-plan__in h3{margin:0;font:400 30px/1.1 var(--f-display);letter-spacing:-.01em;color:var(--ink)}
.pr-plan__in>p{margin:10px 0 0;font-size:15.5px;color:var(--text)}
.pr-range{display:block;margin-top:34px}
.pr-range__top{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.pr-range__top span{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.pr-range__top output{font:400 30px/1 var(--f-display);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.pr-range input{--p:30%;display:block;width:100%;height:28px;margin:12px 0 0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.pr-range input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gilt) var(--p),rgba(38,27,27,.14) var(--p))}
.pr-range input::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gilt) var(--p),rgba(38,27,27,.14) var(--p))}
.pr-range input::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9.5px;border-radius:50%;background:#fbfaf6;box-shadow:0 0 0 1px rgba(168,127,60,.7),0 2px 6px rgba(61,42,20,.22);transition:transform .2s var(--ease-out)}
.pr-range input::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:#fbfaf6;box-shadow:0 0 0 1px rgba(168,127,60,.7),0 2px 6px rgba(61,42,20,.22)}
.pr-range input:active::-webkit-slider-thumb{transform:scale(1.12)}
.pr-range input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px rgba(168,127,60,.9),0 0 0 5px rgba(201,168,106,.24)}
.pr-range__ends{display:flex;justify-content:space-between;margin-top:4px;font-size:12.5px;color:var(--muted)}
.pr-plan__out{position:relative;padding:36px 36px 40px;background:var(--dark);color:var(--on-dark-2);display:flex;flex-direction:column}
.pr-plan__out::before{content:"";position:absolute;inset:0;background:url(../assets/shared/grain.webp) 0 0/128px 128px;opacity:.5;mix-blend-mode:overlay;pointer-events:none}
.pr-plan__out>*{position:relative}
.pr-plan__out small{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark-2)}
.pr-plan__total{display:block;margin-top:16px;font:400 60px/1 var(--f-display);letter-spacing:-.03em;color:var(--on-dark);font-variant-numeric:lining-nums tabular-nums}
.pr-plan__lines{margin:28px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule-dark)}
.pr-plan__lines li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--rule-dark);font-size:15px}
.pr-plan__lines li span:last-child{color:var(--on-dark)}
.pr-plan__out .pr-cta{margin-top:auto;align-self:flex-start}
.pr-plan__out p{margin:20px 0 26px;font-size:14px;line-height:1.5}

/* ── reveal (the landing page's plan) ── */
@media (prefers-reduced-motion:no-preference){
  html.pr-js [data-rv]{opacity:0;transform:translateY(36px)}
  html.pr-js [data-rv].is-in{opacity:1;transform:none;transition:opacity .6s var(--ease-fade) var(--d,0ms),transform 1s var(--ease-out) var(--d,0ms)}
  html.pr-js [data-rv="pop"]{transform:translateY(24px) scale(.92)}
  html.pr-js [data-rv="pop"].is-in{transform:none;transition:opacity .5s var(--ease-fade) var(--d,0ms),transform .9s var(--ease-out) var(--d,0ms)}
  /* letters: each line a mask, each letter rising out of it */
  .pr-split .ln{display:block;overflow:hidden;padding:0 .04em .14em;margin:0 -.04em -.14em}
  .pr-split .ch{display:inline-block;will-change:transform}
  html.pr-js .pr-split.is-split:not(.is-in) .ch{opacity:0;transform:translateY(112%) rotate(4deg)}
  html.pr-js .pr-split.is-split.is-in .ch{transition:opacity .45s var(--ease-fade) calc(var(--l) * 100ms + var(--c) * 16ms),transform .9s var(--ease-char) calc(var(--l) * 100ms + var(--c) * 16ms)}
  html.pr-js .pr-split:not(.is-split){opacity:0}
}
.pr-split .w{white-space:nowrap}

/* ── narrower ── */
@media (max-width:1100px){
  .pr-plans__grid,.pr-said__grid{gap:14px}
  .plan__body,.plan__glass{padding-left:22px;padding-right:22px}
  .plan__amt{font-size:46px}
  .pr-two{gap:48px}
  .pr-ledger__cols,.pr-ledger__row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr) 56px 40px;gap:12px;padding:0 16px}
}
@media (max-width:1023px){
  .pr-hero{padding-top:calc(68px * var(--s,1) + 28px)}   /* (Oct 21: the phone's 52 under its 68px header to 28) */
  .pr-hero__side{margin-top:18px}
  .pr-hero__acts{margin-top:26px}
  .pr-plans__grid,.pr-said__grid,.pr-steps__grid,.pr-promises,.pr-ledger3,.pr-plan{grid-template-columns:minmax(0,1fr)}
  .pr-ledger3>div+div{border-left:0;border-top:1px solid var(--rule)}
  .pr-two,.pr-faq__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .pr-lots{grid-template-columns:minmax(0,1fr);margin-top:48px}
  .pr-lot,.pr-lot:nth-child(odd),.pr-lot:nth-child(even){grid-template-columns:116px minmax(0,1fr);gap:22px;padding:22px 0;border-right:0}
  .pr-lot__obj{height:118px}
  .pr-lot__obj img{width:calc(var(--w) * .62)}
  .pr-lot h3{font-size:22px}
  .pr-lot p{font-size:14.5px}
  .pr-incl .pr-steps__grid{margin-top:72px}
  .pr-faq__head{position:static}
  .pr-steps__head,.pr-compare__head{flex-direction:column;align-items:flex-start;gap:20px}
  .pr-gift,.pr-said,.pr-faq{padding-top:110px}
  .pr-compare,.pr-budget{padding-top:190px}
  .pr-steps,.pr-incl{margin-top:110px;padding:110px 0}
  .pr-cmp__body{overflow-x:auto}
  .pr-table{min-width:620px}
  .pr-table thead th{position:static}
  .pr-ledger__cols{display:none}
  .pr-ledger__row{grid-template-columns:minmax(0,1fr) 54px;padding:12px 16px;gap:8px 12px}
  .pr-ledger__g{grid-column:1;grid-row:2}
  .pr-ledger__n{grid-column:2;grid-row:1}
  .pr-ledger__d{grid-column:2;grid-row:2}
  .pr-end{margin-top:170px;padding-bottom:56px}
  .plan__amt{font-size:46px}
  .pr-faq summary{font-size:17.5px}
}
@media (prefers-reduced-motion:reduce){
  .pr-bill__thumb,.pr-dd__list,.pr-dd.is-open .pr-dd__list,.pr-dd__chev,.pr-dd__opt i{transition:none}
}