/* Basepoint Works · pricing.css — the Pricing page only (site.css holds the shell, tokens and every shared scene).
   Sections: opener + bench strip · tier stack + live previews · every site includes · rates table · the math (calculator +
   hill window) · advertising (sample ad builder) · talk to us (form). Base rules = the finished static page; anything
   hidden or moving is scoped under .eng (motion on). Phones (<768) get plain vertical cards and no sticky tiers. */

:root{--pt:.25s;--pt3:.45s}

/* ---------- shared bits for this page: section frame, chips ---------- */
.ptiers,.prates,.pmath,.pads,.ptalk{padding:clamp(60px,10vh,124px) var(--gut);max-width:calc(var(--max) + 2 * var(--gut));margin:0 auto}
.ptiers h2,.prates h2,.pmath h2,.pads h2,.ptalk h2{font-size:var(--fs-h2)}
/* phones: tighter section rhythm (no half-empty screens between chapters) */
@media (max-width:767px){.ptiers,.prates,.pmath,.pads,.ptalk{padding-block:clamp(52px,8vh,72px)}.ptalk{padding-bottom:0}}

.chip-group{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--hair-2);border-radius:999px;background:rgba(20,22,24,.55);color:var(--paper);font-size:14px;font-weight:500;line-height:1.1;cursor:pointer;
  transition:background-color var(--pt),border-color var(--pt),color var(--pt),transform var(--pt3) var(--ease)}
@media (hover:hover){.chip:hover{border-color:var(--amber);color:var(--amber-hi)}}
.chip:active{transform:scale(.97)}
.check{position:relative;display:inline-flex}
.check__input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.check__input:focus-visible + .chip{outline:2px solid var(--amber);outline-offset:3px}
@media (hover:hover){.check__input:hover + .chip{border-color:var(--amber);color:var(--amber-hi)}}
.chip.is-on,.check.is-on .chip,.check__input:checked + .chip{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.chip--static{cursor:default}
@media (hover:hover){.chip--static:hover{border-color:var(--hair-2);color:var(--body)}}

/* ---------- 00 · opener: straight numbers + the bench strip ---------- */
/* no pin: the opener is one screen and #tiers follows straight on (scene "ptitle" in pricing.js lifts and half-fades
   the copy as it scrolls away), so there is never a blank screen between them */
.eng .sc--title.ptitle{height:auto}
/* HUD datum (desktop) and, with Motion off / no JS, a still of the cube where the travelling cube would stand */
.ptitle__datum{position:absolute;top:calc(var(--hdr-h) + 18px);right:var(--gut);z-index:2;margin:0;text-shadow:0 0 14px var(--ink-0),0 0 5px var(--ink-0),0 0 2px var(--ink-0)}
.ptitle__poster{display:none}
html:not(.eng) .ptitle__poster{display:block;position:absolute;z-index:1;right:max(var(--gut),9vw);top:46%;width:clamp(240px,25vw,420px);height:auto;transform:translateY(-50%);pointer-events:none;
  -webkit-mask-image:radial-gradient(closest-side,#000 72%,transparent 99%);mask-image:radial-gradient(closest-side,#000 72%,transparent 99%)}
@media (max-width:767px){
  .ptitle__datum{display:none}
  html:not(.eng) .ptitle__poster{right:6vw;top:calc(var(--hdr-h) - 4px);width:min(34vw,150px);transform:none}
}
/* shorter phones: the opener copy fills the screen, so the cube (travelling or still) would sit on the kicker; it stays
   out of the opener there (it appears again nowhere else on this page) */
@media (max-width:767px) and (max-height:819px){
  .eng #orb{visibility:hidden}
  html:not(.eng) .ptitle__poster{display:none}
}
.ptitle .stage{padding-top:calc(var(--hdr-h) + clamp(24px,6vh,64px))}
.ptitle__grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(0deg,transparent 0 79px,rgba(244,241,234,.05) 79px 80px),repeating-linear-gradient(90deg,transparent 0 79px,rgba(244,241,234,.05) 79px 80px);
  -webkit-mask-image:radial-gradient(70% 70% at 72% 40%,#000 0%,transparent 75%);mask-image:radial-gradient(70% 70% at 72% 40%,#000 0%,transparent 75%)}
.ptitle__jump{flex-wrap:wrap;gap:4px 12px}
.ptitle__jump a{display:inline-flex;align-items:center;min-height:44px;color:var(--body);transition:color var(--pt)}
@media (hover:hover){.ptitle__jump a:hover{color:var(--amber)}}
.ptitle__jump span{color:var(--mist)}
.ptitle__h{font-size:clamp(50px,min(9vw,15.5vh),140px)}
.ptitle__ctas{display:flex;flex-wrap:wrap;gap:10px}
.bench{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px;margin-top:clamp(22px,5vh,56px);max-width:1200px}
.bench__item{position:relative;padding:16px 0 12px;border-top:1px solid var(--hair-2)}
.bench__item::before{content:"";position:absolute;left:0;top:-4px;width:7px;height:7px;background:var(--amber);box-shadow:0 0 12px rgba(242,169,59,.55)}
.bench__fig{overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;font-size:clamp(36px,4.8vw,76px);font-weight:300;line-height:1;letter-spacing:-.035em;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap}
.bench__rise{display:inline-block;transition:transform 1.05s var(--ease) calc(.55s + var(--n,0) * .09s)}
.eng.is-loading .bench__rise{transform:translate3d(0,108%,0);animation:ld-show 0s 9.2s forwards}
.bench__cur{margin-right:2px;font-size:.46em;color:var(--amber);vertical-align:.72em}
.bench__cap{margin-top:10px;color:var(--body)}
@media (min-width:768px){.bench{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}}
.bench{transition:opacity .9s .62s,transform 1s .62s var(--ease)}
.eng.is-loading .bench{opacity:0;transform:translateY(16px);animation:ld-show 0s 9.2s forwards}
@media (max-width:767px){
  .ptitle .stage{padding-top:calc(var(--hdr-h) + 12px)}
  .ptitle .title__kicker{margin-bottom:6px}
  .ptitle .title__lede{margin-top:12px;font-size:16px}
  .ptitle .title__row{margin-top:16px}
  .ptitle__ctas .btn{min-height:46px;padding:0 16px;font-size:14.5px}
  .bench{margin-top:20px}
  .bench__item{padding:12px 0 10px}
  .bench__fig{font-size:clamp(34px,10vw,44px)}
  .bench__cap{margin-top:6px;font-size:11.5px;letter-spacing:.1em}
}
@media (max-width:767px) and (max-height:700px){
  .ptitle .title__lede{font-size:15px;line-height:1.45}
  .bench__fig{font-size:32px}
}

/* ---------- 01 · tiers: sticky stacking cards; each card = copy column + live preview ---------- */
.ptiers{padding-bottom:clamp(36px,6vh,72px)}
.eng .ptiers{padding-top:clamp(44px,7vh,90px)}
/* amber corner ticks frame each live preview (desktop / tablet) */
@media (min-width:768px){
  .ptier__pv{position:relative}
  .ptier__pv::after{content:"";position:absolute;inset:-10px;pointer-events:none;opacity:.5;--c:var(--amber);--l:10px;
    background:
      linear-gradient(var(--c),var(--c)) left top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left top/1px var(--l) no-repeat,
      linear-gradient(var(--c),var(--c)) right top/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right top/1px var(--l) no-repeat,
      linear-gradient(var(--c),var(--c)) left bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) left bottom/1px var(--l) no-repeat,
      linear-gradient(var(--c),var(--c)) right bottom/var(--l) 1px no-repeat,linear-gradient(var(--c),var(--c)) right bottom/1px var(--l) no-repeat}
}
.ptiers__head{margin-bottom:clamp(28px,5vh,56px)}
/* text measures on this page are in em, not ch: the fallback face's "0" is ~14% narrower than Geist's, so ch boxes
   narrowed and rewrapped until the web font swapped in (sections above a #talk / #math landing changed height) */
.ptiers__lede{margin-top:16px;font-size:clamp(16px,1.3vw,19px);color:var(--body);max-width:29.2em}
.ptiers__kicker{margin-top:22px;color:var(--body)}
.ptier{gap:22px;align-items:center}
.ptier__copy{display:flex;flex-direction:column;gap:14px;min-width:0}
.tier__top .ptier__name{font-size:11px;white-space:nowrap}
.tier .ptier__list{grid-template-columns:minmax(0,1fr);gap:0;margin:4px 0 6px;border-top:1px solid var(--hair)}
.tier .ptier__list li{padding:10px 0;border-bottom:1px solid var(--hair);font-size:15px;line-height:1.45;color:var(--paper)}
.ptier__cta{align-self:flex-start;margin-top:6px}
.ptier__pv{min-width:0}
.tier--full .ptier__name{color:var(--amber-hi)}
@media (min-width:768px){
  .ptier{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);column-gap:clamp(24px,3.6vw,60px)}
  .ptier .tier__price{font-size:clamp(48px,5.6vw,92px)}
}
/* phones: plain vertical cards (the stack scene sees non-sticky cards and stops scaling); the preview sits under the price */
@media (max-width:767px){
  .eng .ptier{position:relative;top:auto}
  .ptier__copy{display:contents}
  .ptier__pv{order:1}
  .tier .ptier__list{order:2}
  .ptier__cta{order:3;justify-self:start;margin-top:0}
  .tier__top .ptier__name{font-size:12px}
}
/* short desktop windows: a sticky card taller than the window would hide its own bottom */
@media (min-width:768px) and (max-height:640px){.eng .ptier{position:relative;top:auto}}

/* ---------- tier previews (v3 widgets, v4 skin) ---------- */
.pv{min-width:0}
.pv__screen{position:relative;height:17rem;overflow:hidden;border:1px solid var(--hair-2);border-radius:18px;background:#0f1113;color:var(--body);font-size:13px;line-height:1.35;box-shadow:0 30px 60px -36px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.04)}
.pv--starter .pv__screen{display:flex;flex-direction:column}
.pv__bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--amber);color:var(--on-amber)}
.pv__logo{width:42px;height:8px;border-radius:2px;background:rgba(26,19,7,.5)}
.pv__call{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;background:var(--on-amber);color:var(--amber)}
.pv__call svg{display:block}
.pv__line{display:block;width:100%;height:6px;border-radius:3px;background:#2a2e33}
.pv__call .pv__line--num{width:46px;height:5px;background:rgba(242,169,59,.75)}
.pv__line--short{width:55%}
.pv__line--title{width:70%;height:10px;background:#3b4046}
.pv__hero{display:grid;gap:8px;align-content:center;min-height:84px;padding:14px 12px;background:linear-gradient(135deg,#1e2124,#15171a);border-bottom:1px solid var(--hair)}
.pv__hero--full{flex:1;border:0;border-radius:10px;padding:16px 14px}
.pv__rows{display:grid;gap:9px;padding:12px}
.pv__panel .pv__rows{padding:4px 0}
.pv__row{display:flex;align-items:center;gap:8px}
.pv__dot{flex:none;width:6px;height:6px;border:1px solid var(--mist)}
.pv__strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:minmax(0,1fr);gap:4px;height:62px;margin-top:auto;padding:0 12px 12px}
.pv__strip img,.pv__gallery img{width:100%;height:100%;min-height:0;object-fit:cover;border-radius:6px}
.pv__tabs{position:relative;display:flex;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--hair);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 20px),rgba(0,0,0,.35));mask-image:linear-gradient(90deg,#000 calc(100% - 20px),rgba(0,0,0,.35))}
.pv__tabs::-webkit-scrollbar{display:none}
.pv__tab{flex:none;min-height:44px;min-width:44px;padding:0 9px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mist);white-space:nowrap;transition:color var(--pt)}
.pv__tab[aria-selected="true"]{color:var(--paper)}
@media (hover:hover){.pv__tab:hover{color:var(--paper)}}
.pv__tab:focus-visible{outline-offset:-4px}
.pv__tabline{position:absolute;left:0;bottom:0;height:2px;width:100px;background:var(--amber);transform:translateX(var(--x,0px)) scaleX(var(--k,0));transform-origin:left;pointer-events:none;transition:transform var(--pt3) var(--ease)}
.pv__panels{position:relative;height:calc(100% - 45px)}
/* the panels share one cell: the outgoing one fades out over the incoming one (never a blank frame between them) */
.pv__panel{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:12px;overflow:hidden}
.pv__panel--bleed{padding:0}
.pv__panel:focus-visible{outline-offset:-3px;border-radius:0 0 18px 18px}
@keyframes pv-fade{from{opacity:0;transform:translate3d(0,6px,0)}to{opacity:1;transform:none}}
@keyframes pv-out{to{opacity:0;transform:translate3d(0,-4px,0)}}
.eng .pv.is-live .pv__panel.is-on{animation:pv-fade 260ms var(--ease) 40ms both}
.eng .pv__panel.is-out{z-index:1;pointer-events:none;animation:pv-out 150ms ease forwards}
/* Standard · Home: a real hero photo under an ink gradient, the sketch lines and the Call now pill over it */
.pv__hero--img{position:relative;overflow:hidden;align-content:end;padding:18px 16px;background:#15171a;isolation:isolate}
.pv__hero-img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.pv__hero--img::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,17,19,.05) 20%,rgba(15,17,19,.55) 58%,rgba(15,17,19,.94))}
.pv__hero--img .pv__line{background:rgba(244,241,234,.5)}
.pv__hero--img .pv__line--title{width:62%;height:12px;background:rgba(244,241,234,.92)}
.pv__hero--img .pv__line--short{width:40%}
.pv__hero--img .pv__line:not(.pv__line--title){max-width:78%}
/* Standard · Services: each row is a service with its own photo */
.pv__svc{gap:10px}
.pv__svc .pv__row{gap:12px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.pv__svc .pv__row:last-child{border-bottom:0;padding-bottom:0}
.pv__thumb{flex:none;width:44px;height:44px;border-radius:8px;object-fit:cover}
.pv__svc-txt{flex:1;display:grid;gap:7px;min-width:0}
.pv__svc .pv__line--title{height:8px}
.pv__pill,.pv__send{display:inline-flex;align-items:center;justify-content:center;width:fit-content;padding:0 12px;border-radius:999px;background:var(--amber);color:var(--on-amber);font-size:11.5px;font-weight:600;line-height:1}
.pv__pill{min-height:24px;margin-top:4px}
.pv__send{min-height:40px;padding:0 16px;cursor:pointer;transition:background-color var(--pt)}
.pv__send:focus-visible{background:var(--amber-hi)}
@media (hover:hover){.pv__send:hover{background:var(--amber-hi)}}
@media (pointer:coarse){.pv__send{min-height:44px}}
.pv__sent{display:flex;align-items:center;min-height:40px;color:var(--amber)}
.pv__about{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px;align-items:start;padding-top:4px}
.pv__avatar{width:64px;height:64px;border-radius:10px;background:linear-gradient(135deg,#343a40,#1b1e21)}
.pv__about-txt{display:grid;gap:8px;padding-top:4px}
.pv__gallery{flex:1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;min-height:0}
.pv__contact{flex:1;display:grid;grid-template-columns:1.3fr 1fr;gap:8px;min-height:0}
.pv__form{display:grid;gap:6px;align-content:start}
.pv__field{display:flex;align-items:center;min-height:28px;padding:4px 8px;border:1px solid var(--hair-2);border-radius:8px;color:var(--mist);font-size:12px}
.pv__field--tall{min-height:44px;align-items:flex-start}
.pv__map{position:relative;border-radius:10px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0 13px,#262a2e 13px 14px),repeating-linear-gradient(90deg,transparent 0 13px,#262a2e 13px 14px),#16181b}
.pv__map::before{content:"";position:absolute;left:-10%;right:-10%;top:58%;height:7px;background:#2c3035;transform:rotate(-14deg)}
.pv__mappin{position:absolute;left:56%;top:40%;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--amber);transform:rotate(45deg);box-shadow:0 0 0 5px rgba(242,169,59,.18),0 0 14px rgba(242,169,59,.5)}
.pv__ba{--x:50%;position:relative;height:100%;overflow:hidden}
.pv__ba-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pv__ba-img--after{clip-path:inset(0 0 0 var(--x))}
.pv__ba-handle{position:absolute;top:0;bottom:0;left:var(--x);width:2px;margin-left:-1px;background:var(--paper);pointer-events:none}
.pv__ba-handle::after{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 3px rgba(20,22,24,.55);transition:box-shadow var(--pt)}
@media (hover:hover){.pv__ba:hover .pv__ba-handle::after{box-shadow:0 0 0 3px rgba(20,22,24,.55),0 0 0 11px rgba(242,169,59,.22)}}
.pv__ba-range{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
.pv__ba-range:focus-visible + .pv__ba-handle::after{outline:2px solid var(--paper);outline-offset:3px}
.pv__ba-tag{position:absolute;top:8px;z-index:1;padding:3px 8px;border-radius:999px;background:rgba(20,22,24,.78);color:var(--paper);font-size:11px;pointer-events:none}
.pv__ba-tag--l{left:8px}.pv__ba-tag--r{right:8px}
.pv__reviews{position:relative;flex:1;min-height:0;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 10%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 10%,#000 78%,transparent)}
.pv__reviews-track{display:grid;gap:10px}
.eng .pv__reviews-track{animation:pv-drift 30s linear infinite}
@keyframes pv-drift{to{transform:translateY(-50%)}}
.pv__review{display:grid;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.pv__stars{color:var(--amber);font-size:12px;line-height:1;letter-spacing:.15em}
.pv__note{color:var(--mist);font-size:11px}
.pv__est,.pv__step{display:grid;gap:10px;align-content:start}
.pv__step-label{color:var(--mist)}
.pv__chips,.tier .pv__integrations{display:flex;flex-wrap:wrap;gap:6px}
.pv__chips .chip{min-height:40px;padding:0 14px;font-size:13px}
@media (pointer:coarse){.pv__chips .chip{min-height:44px}}
.pv__done{font-size:14px;line-height:1.45;color:var(--paper)}
.pv__qa{display:flex;justify-content:space-between;gap:8px;padding:11px 0;border-bottom:1px solid var(--hair);color:var(--paper);font-size:13.5px}
.pv__qa::after{content:"";flex:none;align-self:center;width:10px;height:1px;background:var(--hair-2)}
.tier .pv__integrations{margin:12px 0 0}
.tier .pv__integrations li{display:inline-flex;min-height:0;padding:5px 11px;border-style:dashed;border-radius:999px;background:transparent;color:var(--body);font-size:12.5px}
.tier .pv__integrations li::before{display:none}
@media (min-width:768px){
  .pv__screen{height:20rem}
  .pv--starter .pv__strip{height:86px}
}
@media (min-width:1024px){.pv__screen{height:22rem}.pv--starter .pv__strip{height:96px}}

/* ---------- every site includes ---------- */
/* one contained strip under the Full card (same glass as the tiers): the label, then four benchmarks with amber ticks */
.includes{position:relative;margin-top:clamp(18px,3vh,28px);padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,36px);border:1px solid rgba(244,241,234,.12);border-radius:24px;
  background:linear-gradient(180deg,rgba(32,35,39,.9),rgba(19,21,24,.93));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.includes::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(242,169,59,.7),transparent)}
.includes__lbl{margin-bottom:16px;color:var(--amber)}
.includes__list{display:grid;gap:12px}
.includes__item{position:relative;padding-left:20px;font-size:clamp(15.5px,1.15vw,17px);line-height:1.45;color:var(--paper)}
.includes__tick{position:absolute;left:0;top:.5em;width:7px;height:7px;background:var(--amber);box-shadow:0 0 12px rgba(242,169,59,.55)}
@media (min-width:768px){.includes__list{grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.7fr);gap:20px 28px}}
@media (min-width:1024px){
  .includes{display:grid;grid-template-columns:minmax(150px,.9fr) minmax(0,5fr);column-gap:28px;align-items:start}
  .includes__lbl{margin:0;padding-top:.3em}
}

/* ---------- 02 · the rest of the menu: rates table + how pricing works ---------- */
.prates{display:grid;gap:28px;padding-top:clamp(40px,7vh,90px);padding-bottom:clamp(36px,6vh,80px)}
.prates__panel{margin-top:clamp(24px,4vh,40px);padding:6px clamp(16px,2.4vw,34px) 4px;border:1px solid var(--hair);border-radius:28px;background:var(--ink-1)}
.ptable{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ptable caption{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ptable th,.ptable td{padding:18px 18px 18px 0;text-align:left;vertical-align:baseline;border-bottom:1px solid var(--hair)}
.ptable thead th{padding-block:22px 10px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);border-bottom-color:var(--hair-2)}
.ptable tbody th{font-size:clamp(16px,1.4vw,20px);font-weight:400;color:var(--paper)}
@media (min-width:768px){.ptable tbody th{white-space:nowrap}}
.ptable tbody tr{background:linear-gradient(var(--amber),var(--amber)) left bottom/0 1px no-repeat;transition:background-size .6s var(--ease-io),background-color var(--pt)}
@media (hover:hover){.ptable tbody tr:hover{background-size:100% 1px;background-color:rgba(242,169,59,.05)}}
.ptable tbody tr:last-child th,.ptable tbody tr:last-child td{border-bottom:0}
.ptable__price{font-size:clamp(24px,2.6vw,40px);font-weight:300;letter-spacing:-.03em;line-height:1;color:var(--paper);white-space:nowrap;transition:color var(--pt)}
@media (hover:hover){.ptable tbody tr:hover .ptable__price,.ptable tbody tr:hover th{color:var(--amber)}}
.ptable__terms{font-size:14.5px;line-height:1.5;color:var(--body)}
.prates__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.prates__aside{position:relative;overflow:hidden;align-self:start;display:flex;flex-direction:column;padding:clamp(22px,2.4vw,32px);border:1px solid var(--hair);border-radius:24px;background:linear-gradient(160deg,rgba(242,169,59,.1),rgba(242,169,59,0) 60%),var(--ink-1)}
.prates__h{color:var(--amber)}
.prates__aside>:not(.prates__topo){position:relative}
/* contour lines rising from the card's corner: the site's terrain language, drawn with one gradient */
.prates__topo{position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(ellipse 120% 100% at 86% 118%,transparent 0 23px,rgba(242,169,59,.2) 23px 24px);
  -webkit-mask-image:radial-gradient(85% 75% at 86% 100%,#000 15%,transparent 78%);mask-image:radial-gradient(85% 75% at 86% 100%,#000 15%,transparent 78%)}
.prates__p{margin-top:12px;font-size:clamp(18px,1.6vw,22px);line-height:1.4;font-weight:300;color:var(--paper)}
.prates__link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:10px}
@media (max-width:599px){
  .ptable th,.ptable td{padding:14px 10px 14px 0}
  .ptable th:last-child,.ptable td:last-child{padding-right:0}
  .ptable tbody th{font-size:15px}
  .ptable__price{font-size:22px}
  .ptable__terms{font-size:13.5px}
}
@media (min-width:1024px){
  .prates{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(32px,4vw,64px);align-items:stretch}
  /* the card runs the full height of the table (top of the panel to its foot), its link at the bottom: no empty column */
  .prates__aside{align-self:stretch;margin:calc(37px + clamp(34px,4.6vw,72px) + clamp(24px,4vh,40px)) 0 76px}
  .prates__link{margin-top:auto}
}

/* ---------- 03 · the math: calculator + hill window ---------- */
.pmath{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.pmath__kicker{margin:-8px 0 14px;color:var(--body)}
.pmath__lede{margin-top:18px;font-size:clamp(16px,1.3vw,19px);color:var(--body);max-width:30.5em}
.pmath__ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.pmath__ctas .btn{white-space:normal;text-align:left;min-height:52px;padding-block:10px}

/* hill window: visual only. Phones/tablets: a sticky strip under the header; desktop: a sticky panel beside the calculator */
.pmath__tool{display:grid;gap:16px;min-width:0}
.hill{position:sticky;top:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));z-index:3;display:grid;grid-template-columns:118px minmax(0,1fr);align-items:center;height:124px;padding:0 18px 0 4px;
  border:1px solid var(--hair-2);border-radius:22px;background:#1d2023;box-shadow:0 24px 60px -6px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.35)}
.hill__head,.hill__tag,.jobs,.hill__lines{display:none}
.hill__plot{--s:.3;position:relative;width:118px;height:118px}
.hill__svg{display:block;width:100%;height:100%;overflow:visible}
.hill__grid path{fill:none;stroke:rgba(244,241,234,.06);stroke-width:1;vector-effect:non-scaling-stroke}
.hill__topo ellipse{fill:none;stroke:rgba(244,241,234,.07);stroke-width:.8}
/* a survey dial: 120 minor ticks + 12 amber majors on one ring */
.hill__dial{fill:none;stroke:rgba(244,241,234,.2);stroke-width:.8}
@media (max-width:1023px){.hill__topo ellipse,.hill__dial{stroke-width:3}}
.hill__dial--major{stroke:rgba(242,169,59,.6)}
.hill__empty{font-size:15px;line-height:1.35;color:var(--body);max-width:14.6em}
.hill__fee{fill:none;stroke:rgba(244,241,234,.55);stroke-width:1.2;stroke-dasharray:5 6;vector-effect:non-scaling-stroke}
.hill__rings{transform:scale(var(--k,.12));transition:transform .7s var(--ease)}
.hill__rings circle{fill:rgba(242,169,59,.035);stroke:rgba(242,169,59,.42);stroke-width:1;vector-effect:non-scaling-stroke}
.hill__rings .hill__edge{fill:rgba(242,169,59,.06);stroke:var(--amber);stroke-width:1.6}
.hill__mark{fill:var(--amber);filter:drop-shadow(0 0 6px rgba(242,169,59,.8))}
.eng .hill:not(.is-set) .hill__breathe{animation:hill-breathe 4.8s var(--ease-io) 2}
@keyframes hill-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.hill__fig{font-size:clamp(34px,10vw,46px);font-weight:300;line-height:1;letter-spacing:-.04em;color:var(--paper);font-variant-numeric:tabular-nums;white-space:nowrap;transition:color var(--pt)}
.hill__fig.is-up{color:var(--amber)}
.hill__tag{position:absolute;padding:4px 9px;border-radius:999px;background:rgba(20,22,24,.82);font-size:11px;letter-spacing:.12em;white-space:nowrap;pointer-events:none}
.hill__tag--fee{left:50%;top:calc(50% + var(--rf,64) * var(--s) * 1px + 10px);transform:translateX(-50%)}
.hill__tag--you{left:50%;top:50%;color:var(--body);
  transform:translate3d(calc(-100% - min(var(--r,140) * var(--s) * .72px, var(--pw,400px) / 2 - var(--tw,0px))),calc(-1 * var(--r,140) * var(--s) * .72px - 12px),0);
  transition:transform .6s var(--ease)}
.hill__tag-val{color:var(--amber);font-weight:500}
/* motion off: interaction-driven slides snap instead of animating */
.still .hill__rings,.still .hill__tag--you,.still .pv__tabline,.still .ad__img,.still .pv__ba-handle::after{transition:none}
.jobs__txt{text-align:center;color:var(--body)}
.jobs__grid{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:288px;margin:10px auto 0}
.jobs__grid i{display:block;width:9px;height:9px;background:var(--amber);box-shadow:0 0 8px rgba(242,169,59,.45);clip-path:inset(0 calc((1 - var(--f,1)) * 100%) 0 0)}
.eng .jobs__grid i{animation:bp-sq 420ms var(--ease) both;animation-delay:calc(var(--j,0) * 25ms)}
@keyframes bp-sq{from{opacity:0;transform:scale(0) rotate(45deg)}to{opacity:1;transform:none}}
.hill__line{font-size:15.5px;color:var(--body)}
.hill__cmp{margin-top:4px;font-size:15.5px;color:var(--amber)}

.calc{padding:clamp(20px,2.6vw,34px);border:1px solid var(--hair);border-radius:28px;background:var(--ink-1)}
.calc__title{font-size:clamp(22px,1.9vw,28px);font-weight:300;line-height:1.2;letter-spacing:-.02em}
.calc__note{margin-top:8px;font-size:15px;color:var(--mist)}
.calc__field{margin-top:24px}
.calc__row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.calc__lbl{display:flex;flex-direction:column;gap:4px;color:var(--body)}
.calc__hint{font-size:11px;color:var(--mist);letter-spacing:.1em}
.calc__numbox{position:relative;display:inline-flex;align-items:center;flex:none;height:46px;width:116px;padding:0 14px;border:1px solid var(--hair-2);border-radius:999px;background:#0f1113;transition:border-color var(--pt),box-shadow var(--pt)}
@media (hover:hover){.calc__numbox:hover{border-color:rgba(244,241,234,.36)}}
.calc__numbox:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,169,59,.16)}
.calc__prefix,.calc__suffix{font-family:var(--mono);font-size:14px;color:var(--mist)}
.calc__prefix{margin-right:4px}
.calc__suffix{margin-left:4px}
.calc__num{flex:1;min-width:0;width:100%;height:100%;border:0;background:none;color:var(--paper);font-family:var(--mono);font-size:16px;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.calc__num:focus,.calc__num:focus-visible{outline:none}
.calc__num::-webkit-inner-spin-button,.calc__num::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* range: amber round thumb on a hairline; main script writes --p (0-100%) */
.range{display:block;width:100%;height:44px;margin-top:4px;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.range:focus-visible{outline-offset:0;border-radius:999px}
.range::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--amber) var(--p,0%),rgba(244,241,234,.22) var(--p,0%))}
.range::-moz-range-track{height:3px;border-radius:2px;background:rgba(244,241,234,.22)}
.range::-moz-range-progress{height:3px;border-radius:2px;background:var(--amber)}
.range::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9.5px;border:0;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--ink-1),0 0 0 5px rgba(242,169,59,.5);transition:box-shadow var(--pt),transform var(--pt) var(--ease)}
.range::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px var(--ink-1),0 0 0 5px rgba(242,169,59,.5);transition:box-shadow var(--pt),transform var(--pt) var(--ease)}
.range:hover::-webkit-slider-thumb,.range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--ink-1),0 0 0 5px var(--amber),0 0 0 12px rgba(242,169,59,.16)}
.range:hover::-moz-range-thumb,.range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--ink-1),0 0 0 5px var(--amber),0 0 0 12px rgba(242,169,59,.16)}
.range:active::-webkit-slider-thumb{transform:scale(1.12);background:var(--amber-hi)}
.range:active::-moz-range-thumb{transform:scale(1.12);background:var(--amber-hi)}
.calc__out{display:block;margin-top:24px;padding-top:18px;border-top:1px solid var(--hair);font-size:16.5px;line-height:1.5;color:var(--body)}
/* the prompt lives in the hill panel / phone strip; the output keeps it for screen readers and folds while empty */
.calc__empty{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.calc__out:has(>.calc__empty:not([hidden])){margin-top:0;padding-top:0;border-top:0}
.calc__x{color:var(--paper);font-weight:500;font-variant-numeric:tabular-nums}
.calc__cmp{display:block;margin-top:6px;color:var(--amber)}
.calc__foot{margin-top:18px;font-size:11px;letter-spacing:.12em}
.calc__after{margin-top:12px;font-size:15px}
/* < 1024: focused calculator controls land above the strip held at the foot of the screen, not under it */
@media (max-width:1023px){.calc input{scroll-margin:calc(var(--hdr-h) + 16px) 0 170px}}
/* phone landscape: too short for a sticky strip */
@media (max-width:1023px) and (max-height:560px){.hill{position:relative;top:auto}}
@media (min-width:768px) and (max-width:1023px){.hill{height:140px;grid-template-columns:134px minmax(0,1fr)}.hill__plot{width:134px;height:134px}.hill__fig{font-size:52px}}
@media (min-width:1024px){
  .calc__sentence,.calc__cmp{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important}
  .pmath{grid-template-columns:repeat(12,minmax(0,1fr));gap:44px 24px;align-items:start}
  .pmath__copy{grid-column:1 / 7;grid-row:1}
  .pmath__tool{display:contents}
  .calc{grid-column:1 / 7;grid-row:2}
  .hill{grid-column:7 / 13;grid-row:1 / 3;align-self:start;top:calc(var(--hdr-h) + 24px);bottom:auto;display:flex;flex-direction:column;align-items:stretch;gap:0;
    height:min(720px,calc(100vh - var(--hdr-h) - 48px));min-height:540px;padding:20px 24px 24px;border-color:var(--hair);border-radius:28px;
    background:radial-gradient(60% 50% at 50% 42%,rgba(242,169,59,.07),transparent 70%),var(--ink-1);box-shadow:none}
  .hill__head{display:flex;justify-content:space-between;gap:12px;color:var(--mist)}
  .hill__empty{max-width:none;margin-top:6px;text-align:center;font-size:clamp(20px,1.8vw,27px);font-weight:300;letter-spacing:-.015em;color:var(--paper)}
  .hill__plot{flex:1 1 auto;width:auto;height:auto;min-height:200px}
  .hill__svg{position:absolute;inset:0}
  .hill__tag{display:block}
  .hill__tag[hidden]{display:none}
  .hill__fig{text-align:center;font-size:clamp(56px,5.6vw,96px);margin-top:4px}
  .jobs{display:block;margin-top:12px}
  .jobs[hidden]{display:none}
  .hill__lines{display:block;margin-top:12px;text-align:center}
}

/* ---------- 04 · advertising: the sample-ad builder ---------- */
.pads{display:flex;flex-direction:column}
.pads__copy{display:contents}
.pads__lede{margin-top:16px;font-size:clamp(16px,1.3vw,19px);color:var(--body);max-width:29.2em}
.adpick{margin-top:30px}
.adpick__lbl{margin-bottom:14px;color:var(--body)}
.adpick__place{margin-top:10px}
.pads__device{order:2;position:relative;display:grid;justify-items:center;gap:36px;min-width:0;margin-top:40px;padding:clamp(28px,5vw,64px) clamp(12px,3vw,40px) 0}
.pads__media{position:absolute;left:0;right:0;top:0;height:min(68%,620px);border-radius:28px;overflow:hidden;background:#0d0e10}
.pads__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,22,24,.1),rgba(20,22,24,.35) 60%,var(--ink-0))}
.pads__price{order:4;margin-top:40px;max-width:32rem;padding:clamp(22px,2.4vw,32px);border:1px solid var(--hair);border-radius:24px;background:linear-gradient(160deg,rgba(242,169,59,.1),rgba(242,169,59,0) 60%),var(--ink-1)}
.pads__h{color:var(--amber)}
.pads__p{margin:12px 0 20px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;font-weight:300;color:var(--paper)}
@media (min-width:1024px){
  .pads{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:start}
  .pads__copy{display:block;grid-column:1;grid-row:1}
  .pads__device{grid-column:2;grid-row:1;margin-top:0}
  .adpick{margin-top:40px}
  .pads__price{margin-top:44px}
}

/* phone frame + Meta-style ad (the ad keeps Meta's neutral greys and the system font on purpose) */
.adphone{position:relative;z-index:1;width:min(328px,100%);padding:9px;border:1px solid var(--hair-2);border-radius:46px;background:linear-gradient(160deg,#2b2f34,#111315 38%,#0b0c0d);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 40px 90px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(244,241,234,.1)}
.ad{--fb-bg:#18191A;--fb-card:#242526;--fb-hover:#3A3B3C;--fb-btn:#4E4F50;--fb-text:#E4E6EB;--fb-muted:#B0B3B8;--fb-line:#3E4042;
  position:relative;overflow:hidden;border-radius:37px;background:var(--fb-bg);color:var(--fb-text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.35;letter-spacing:0}
.ad__status{display:flex;align-items:center;justify-content:space-between;padding:13px 28px 7px;font-size:12px;font-weight:600}
.ad__status-icons i{position:relative;display:block;width:20px;height:10px;border:1px solid currentColor;border-radius:3px}
.ad__status-icons i::after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:70%;border-radius:1px;background:currentColor}
.ad__feed{background:var(--fb-card)}
.ad__head{display:flex;align-items:center;gap:8px;padding:12px 12px 8px}
.ad__avatar{flex:none;width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#6a6e73,#3a3d41)}
.ad__who{display:grid;min-width:0;line-height:1.3}
.ad__name,.ad__headline,.ad__cta,.ad__social span{font-weight:600}
.ad__sponsored,.ad__domain,.ad__desc,.ad__menu,.ad__social span{color:var(--fb-muted)}
.ad__sponsored{display:inline-flex;align-items:center;gap:4px;font-size:12px}
.ad__globe{display:inline-block}
.ad__menu{margin-left:auto;letter-spacing:.1em}
.ad__text{padding:0 12px 10px;font-size:13.5px}
.ad__media{aspect-ratio:4 / 5;overflow:hidden;background:var(--fb-hover) center/cover no-repeat}
.ad__link-copy{align-content:center}
.ad__img{width:100%;height:100%;object-fit:cover;clip-path:inset(0 0 0 0);transition:clip-path 340ms var(--ease-io)}
.ad__link{display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--fb-hover)}
.ad__link-copy{flex:1;display:grid;gap:1px;min-width:0}
/* the longest preset's link block (domain + a two-line headline + description) is reserved before the first paint, so the
   ad card never grows above #talk after a ?start=…#talk landing; pricing.js reserve() refines it if a headline wraps more */
.js .ad__feed .ad__link-copy{min-height:calc(11px * 1.35 + 14px * 1.25 * 2 + 12px * 1.35 + 2px)}
.ad__domain{font-size:11px;text-transform:uppercase;letter-spacing:.02em}
.ad__headline{font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.ad__desc{font-size:12px}
.ad__cta{flex:none;padding:8px 12px;border-radius:6px;background:var(--fb-btn);font-size:13px;white-space:nowrap}
.ad__reacts{display:flex;align-items:center;padding:8px 12px 6px}
.ad__react{width:16px;height:16px;border:2px solid var(--fb-card);border-radius:50%;background:#5d6064}
.ad__react--love{margin-left:-5px;background:#80848a}
.ad__social{display:grid;grid-template-columns:repeat(3,1fr);margin:0 12px;padding-bottom:6px;border-top:1px solid var(--fb-line)}
.ad__social span{padding:9px 0;text-align:center;font-size:13px}
.ad :is(.ad__text,.ad__headline,.ad__desc,.ad__cta,.ad__overlay-text){transition:opacity 160ms ease}
.ad.is-swap-img .ad__img{clip-path:inset(0 100% 0 0);transition:none}
.ad.is-swap-txt :is(.ad__text,.ad__headline,.ad__desc,.ad__cta,.ad__overlay-text){opacity:0;transition-duration:110ms}
.ad__story{position:relative;aspect-ratio:9 / 16;overflow:hidden;background:#000 center/cover no-repeat;color:#fff}
.ad__story .ad__img{position:absolute;inset:0}
.ad__story::after{content:"";position:absolute;inset:38% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.84));pointer-events:none}
.ad__segs{position:absolute;top:10px;left:12px;right:12px;z-index:2;display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.ad__segs i{display:block;height:2px;border-radius:1px;background:rgba(255,255,255,.35)}
.ad__segs i:first-child{background:linear-gradient(90deg,#fff 60%,rgba(255,255,255,.35) 60%)}
.ad__story-head{position:absolute;top:22px;left:12px;right:12px;z-index:2;display:flex;align-items:center;gap:8px;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.ad__story-head .ad__avatar{width:30px;height:30px}
.ad__story-head .ad__sponsored{color:rgba(255,255,255,.85)}
.ad__overlay{position:absolute;left:16px;right:16px;bottom:78px;z-index:2;font-size:15.5px;line-height:1.4;font-weight:600;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.ad__story-cta{position:absolute;left:50%;bottom:16px;z-index:2;display:grid;justify-items:center;gap:2px;transform:translateX(-50%);font-size:13px;font-weight:600}
.ad__chev{width:10px;height:10px;margin-top:4px;border:solid #fff;border-width:2px 0 0 2px;transform:rotate(45deg)}
.ad:not([data-place="story"]) .ad__story,.ad[data-place="story"] .ad__feed{display:none}
/* Feed <-> Story: the post fades and settles out, the format switches unseen, the new one rises in (opacity/transform) */
.eng .ad__feed,.eng .ad__story{transition:opacity .3s var(--ease),transform .42s var(--ease)}
.eng .ad.is-flip .ad__feed,.eng .ad.is-flip .ad__story{opacity:0;transform:translate3d(0,10px,0) scale(.985);transition-duration:.14s,.14s;transition-timing-function:ease}
.eng .ad.is-flip-in .ad__feed,.eng .ad.is-flip-in .ad__story{opacity:0;transform:translate3d(0,-8px,0) scale(.985);transition:none}
.still .ad :is(.ad__img,.ad__text,.ad__headline,.ad__desc,.ad__cta,.ad__overlay-text){opacity:1;clip-path:none;transition:none}

/* what we track: a small funnel chart inside the price card (four bars on one baseline, no numbers); the bars light
   140 ms apart on every switch (transform/colour only) */
.adtrack{margin:4px 0 24px;padding-top:18px;border-top:1px solid var(--hair)}
.adtrack__lbl{margin-bottom:14px;color:var(--body)}
.adtrack__list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:start}
.adtrack__item{display:grid;gap:9px;min-width:0}
.adtrack__bar{position:relative;display:block;height:56px;border-bottom:1px solid var(--hair-2)}
.adtrack__bar::before,.adtrack__bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:100%;transform:scaleY(var(--w,1));transform-origin:50% 100%;transition:opacity .45s var(--ease)}
.adtrack__bar::before{border-top:1px solid rgba(244,241,234,.22);background:linear-gradient(180deg,rgba(244,241,234,.07),rgba(244,241,234,0))}
.adtrack__bar::after{opacity:0;border-top:2px solid var(--amber-hi);background:linear-gradient(180deg,rgba(242,169,59,.42),rgba(242,169,59,.12) 70%,rgba(242,169,59,.04))}
.adtrack__txt{font-size:11px;line-height:1.35;letter-spacing:.08em;color:var(--mist);transition:color .45s var(--ease)}
.adtrack__item.is-lit .adtrack__bar::after{opacity:1}
.adtrack__item.is-lit .adtrack__txt{color:var(--paper)}
.still .adtrack__bar::before,.still .adtrack__bar::after,.still .adtrack__txt{transition:none}

/* ---------- 05 · talk to us: the form, the 7-tick datum, the contact aside, the wordmark ---------- */
.ptalk{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;padding-bottom:0}
.ptalk__head h2{max-width:13.2em}
.ptalk__main{min-width:0}
.ptalk__datum{display:flex;justify-content:space-between;height:1px;margin:0 28px 20px;background:repeating-linear-gradient(90deg,var(--hair-2) 0 4px,transparent 4px 9px)}
.ptalk__datum i{display:block;width:7px;height:7px;margin-top:-3px;border:1px solid var(--hair-2);background:var(--ink-1);transition:background-color var(--pt),border-color var(--pt),box-shadow var(--pt)}
.ptalk__datum i.is-on{border-color:var(--amber);background:var(--amber);box-shadow:0 0 12px rgba(242,169,59,.6)}
.ptalk__form{position:relative;padding:clamp(20px,3vw,40px);border:1px solid var(--hair);border-radius:28px;background:var(--ink-1)}
.form__grid{display:grid;gap:16px}
@media (min-width:768px){.form__grid{grid-template-columns:1fr 1fr}}
.field{position:relative;display:flex;flex-direction:column}
.field__input{width:100%;min-height:58px;padding:24px 18px 8px;border:1px solid var(--hair-2);border-radius:16px;background:#0f1113;color:var(--paper);font:inherit;font-size:16px;line-height:1.3;transition:border-color var(--pt),box-shadow var(--pt),background-color var(--pt);-webkit-appearance:none;appearance:none}
.field--select .field__input{padding-right:42px;background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%),linear-gradient(135deg,var(--mist) 50%,transparent 50%);background-position:calc(100% - 22px) 52%,calc(100% - 17px) 52%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}
.field--select option{background:var(--ink-1);color:var(--paper)}
@media (hover:hover){.field__input:hover{border-color:rgba(244,241,234,.36)}}
.field__input:focus,.field__input:focus-visible{outline:none;border-color:var(--amber);box-shadow:0 0 0 3px rgba(242,169,59,.16);background-color:#121416}
.field__label{position:absolute;left:19px;top:19px;color:var(--mist);font-size:16px;line-height:1.2;pointer-events:none;transform-origin:left top;transition:transform var(--pt) var(--ease),color var(--pt)}
.field__input:focus + .field__label,.field__input:not(:placeholder-shown) + .field__label,.field--select .field__label{transform:translateY(-11px) scale(.74);color:var(--body)}
.field__input:focus + .field__label{color:var(--amber)}
.field__input[aria-invalid="true"]{border-color:var(--amber-hi);box-shadow:0 0 0 3px rgba(255,208,138,.12)}
.field__req{color:var(--amber)}
.field__opt{margin-left:4px;font-size:.85em;color:var(--mist)}
.field__err{margin-top:7px;padding-left:4px;font-size:14px;color:var(--amber-hi)}
.field__help{margin-top:7px;padding-left:4px;font-size:13.5px;color:var(--mist)}
.form__set{grid-column:1 / -1;min-width:0;margin-top:8px;border:0}
.form__legend{margin-bottom:12px;padding:0;font-size:15.5px;font-weight:500;color:var(--paper)}
.form__hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:28px}
.form__note{font-size:14px;color:var(--mist)}
.form__req-note{margin:-4px 0 16px}
.form__status{margin-top:14px;font-size:15px;line-height:1.5;color:var(--paper)}
.form__status:empty{margin:0}
.form__compose{margin-top:14px;padding:16px;border:1px dashed rgba(242,169,59,.6);border-radius:18px;background:rgba(242,169,59,.05)}
.form__compose-lbl{color:var(--body)}
.form__pre{max-height:240px;margin:10px 0 12px;padding:12px 14px;overflow:auto;border-radius:12px;background:#0f1113;color:var(--paper);font-family:var(--mono);font-size:13px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}
.form__sent{padding:clamp(24px,3.4vw,44px);display:grid;gap:12px;justify-items:start;border:1px solid rgba(242,169,59,.6);border-radius:28px;background:linear-gradient(160deg,rgba(242,169,59,.14),rgba(242,169,59,0) 60%),var(--ink-1);color:var(--paper)}
.form__sent-mark{display:flex;align-items:center;gap:10px;color:var(--amber)}
.form__sent-mark i{display:block;width:7px;height:7px;background:var(--amber);box-shadow:0 0 12px rgba(242,169,59,.6)}
.form__sent-title{font-size:clamp(34px,4.2vw,64px);font-weight:300;letter-spacing:-.035em;line-height:1.02;color:var(--paper)}
.form__sent-title:focus{outline:none}
.form__sent-body{margin-bottom:8px;max-width:23.9em;color:var(--body);font-size:clamp(16px,1.3vw,19px)}
.eng .form__sent:not([hidden]){animation:bp-sent-in 500ms var(--ease) both}
@keyframes bp-sent-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ptalk__aside{display:flex;flex-direction:column;align-items:flex-start}
.ptalk__email,.ptalk__phone{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);border-radius:6px;transition:color var(--pt)}
.ptalk__email{font-size:clamp(17px,1.5vw,21px);text-decoration:underline;text-decoration-color:rgba(242,169,59,.6);text-underline-offset:5px}
.ptalk__phone{font-size:clamp(30px,3vw,46px);font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
@media (hover:hover){.ptalk__email:hover,.ptalk__phone:hover{color:var(--amber)}}
.ptalk__promise{margin-top:10px;max-width:24em;font-size:16px;color:var(--body)}
.ptalk__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ptalk__mark{grid-column:1 / -1;margin-top:clamp(40px,10vh,120px)}
/* the wordmark's full-bleed ink base (site.css) fades the light and the card glow out above it: the mark box clips only
   below (where the wordmark rises from), never along its top edge, so there is no hard seam (static clip, no per-frame cost) */
.sc--cta .ptalk__mark{overflow:visible;clip-path:inset(-40vh -100vw 0 -100vw)}
.ptalk__mark::before{top:-12vh}
@media (max-width:767px){.ptalk__datum{margin-inline:16px}.form__actions .btn--big{width:100%}}
@media (min-width:1024px){
  .ptalk{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(32px,4vw,64px);align-items:start}
  .ptalk__head{grid-column:1 / -1}
  .ptalk__main{grid-column:1}
  .ptalk__aside{grid-column:2;padding-top:56px}
}
/* phones: information-carrying mono is readable; very narrow phones keep all five preview tabs in reach */
@media (max-width:767px){
  .pv__tab{font-size:11px}
  .pv__note,.pv__ba-tag{font-size:11px}
  .calc__hint{font-size:11.5px}
  .calc__foot{font-size:11px}
}
@media (max-width:380px){.pv__tab{padding:0 7px;letter-spacing:.06em}}
/* Full tier · Estimate: the request is one centred card in the screen (no dead space under the chips), with a
   three-step amber progress rule along its top edge (transform only) */
#pv-full-p3{justify-content:center}
.pv__est{position:relative;width:100%;max-width:440px;margin-inline:auto;padding:22px 18px 18px;border:1px solid var(--hair);border-radius:14px;background:linear-gradient(180deg,rgba(244,241,234,.035),rgba(244,241,234,0) 70%);overflow:hidden}
.pv__est::before,.pv__est::after{content:"";position:absolute;left:0;right:0;top:0;height:2px}
.pv__est::before{background:var(--hair)}
.pv__est::after{background:var(--amber);transform:scaleX(.3333);transform-origin:0 50%;transition:transform .5s var(--ease)}
.pv__est[data-step="2"]::after{transform:scaleX(.6667)}
.pv__est[data-step="3"]::after{transform:none}
.still .pv__est::after{transition:none}
@media (max-width:767px){.pv__est{padding:18px 14px 14px}}

/* =====================================================================================================
   Effects stage (Relay reference): the light streams into the cube in the opener; tiers, the rates panel, the
   estimate and the hill read as dark-glass product UI (a browser window on every preview, check marks, an
   instrument bar, glowing sliders with a scale); the close is one amber card holding the heading and the form,
   beside a dark glass contact panel. Strands, accent type and the amber palette come from site.css / fibers.js.
   ===================================================================================================== */

/* ---------- opener: the jump links sit in one glass pill (the "open beta" chip of the reference) ---------- */
.ptitle__jump{display:inline-flex;width:fit-content;max-width:100%;padding:0 18px 0 14px;border:1px solid var(--hair-2);border-radius:999px;background:rgba(20,22,24,.55);gap:0 12px}
.ptitle__jump::before{border-radius:50%;width:7px;height:7px}
@media (max-width:399px){.ptitle__jump{padding:0 12px 0 11px;gap:0 8px;letter-spacing:.1em}}

/* ---------- glass: one recipe for every product card on the page ---------- */
.ptier,.prates__panel,.calc,.ptalk__aside{border-color:rgba(244,241,234,.12);box-shadow:0 50px 100px -60px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.prates__panel,.calc{position:relative;background:linear-gradient(180deg,rgba(32,35,39,.9),rgba(19,21,24,.93))}
.prates__aside,.pads__price{border-color:rgba(244,241,234,.12);background:linear-gradient(160deg,rgba(242,169,59,.11),rgba(242,169,59,0) 60%),linear-gradient(180deg,rgba(32,35,39,.9),rgba(19,21,24,.93));box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
/* the amber hairline along the top edge of a glass card */
.ptier::before,.prates__panel::before,.calc::before,.hill::before,.ptalk__aside::before{content:"";position:absolute;left:12%;right:12%;top:-1px;height:1px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(242,169,59,.7),transparent)}
/* tiers stay opaque: the next card slides over the last one */
.ptier{background:linear-gradient(180deg,#212428,#191b1e 45%,#15171a)}
.tier--full.ptier{background:linear-gradient(160deg,rgba(242,169,59,.14),rgba(242,169,59,0) 55%),linear-gradient(180deg,#212428,#15171a);border-color:rgba(242,169,59,.45)}
.tier--full.ptier::before{left:5%;right:5%;background:linear-gradient(90deg,transparent,var(--amber-hi),transparent)}

/* ---------- tiers: check marks; the button holds the foot of the card, full width ---------- */
.tier .ptier__list li::before{width:5px;height:9px;margin:.28em 5px 0 4px;background:none;border:solid var(--amber);border-width:0 1.6px 1.6px 0;transform:rotate(42deg)}
.ptier__cta{align-self:stretch;justify-content:center;margin-top:auto}
@media (min-width:768px){.ptier__copy{align-self:stretch;gap:16px}}
@media (max-width:767px){.tier .ptier__cta{justify-self:stretch}}

/* ---------- tier previews: each sketch sits in a browser window; the address follows the open tab ---------- */
.ptier .pv{position:relative;border:1px solid rgba(244,241,234,.14);border-radius:18px;overflow:hidden;background:#0f1113;box-shadow:0 40px 80px -40px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.05)}
.ptier .pv__screen{border:0;border-radius:0;box-shadow:none}
.pv__chrome{display:flex;align-items:center;gap:6px;height:34px;padding:0 12px;border-bottom:1px solid var(--hair);background:linear-gradient(180deg,#1e2125,#16181b)}
.pv__chrome>i{flex:none;width:7px;height:7px;border-radius:50%;background:rgba(244,241,234,.16)}
.pv__chrome>i:first-child{background:var(--amber);box-shadow:0 0 8px rgba(242,169,59,.6)}
.pv__url{flex:0 1 260px;min-width:0;margin:0 auto;padding:4px 11px;border-radius:999px;background:rgba(244,241,234,.06);color:var(--body);font-size:11px;letter-spacing:.04em;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tier .pv__integrations{margin:0;padding:10px 12px;border-top:1px solid var(--hair);background:#131518}

/* ---------- the estimate: an instrument bar, glowing sliders, a scale under each ---------- */
.calc__bar{display:flex;align-items:center;gap:14px;margin:calc(-1 * clamp(20px,2.6vw,34px)) calc(-1 * clamp(20px,2.6vw,34px)) clamp(18px,2.4vw,26px);padding:13px clamp(18px,2.2vw,26px);border-bottom:1px solid var(--hair)}
.calc__app{display:flex;align-items:center;gap:10px;margin-right:auto;font-size:14px;color:var(--paper);white-space:nowrap}
.calc__app i{width:9px;height:9px;background:var(--amber);box-shadow:0 0 12px rgba(242,169,59,.75)}
.calc__live{display:flex;align-items:center;gap:7px;color:var(--amber);white-space:nowrap}
.calc__live b{width:6px;height:6px;border-radius:50%;background:var(--amber);box-shadow:0 0 10px rgba(242,169,59,.9)}
.eng .calc__live b{animation:ui-live 1.8s var(--ease-io) infinite}
.calc .range::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,#B8741C,var(--amber-hi) var(--p,0%),rgba(244,241,234,.13) var(--p,0%))}
.calc .range::-moz-range-track{height:4px;background:rgba(244,241,234,.13)}
.calc .range::-moz-range-progress{height:4px;background:linear-gradient(90deg,#B8741C,var(--amber-hi))}
.calc .range::-webkit-slider-thumb{margin-top:-9px;box-shadow:0 0 0 4px #1c1f22,0 0 0 5px rgba(242,169,59,.6),0 0 22px 3px rgba(242,169,59,.5)}
.calc .range::-moz-range-thumb{box-shadow:0 0 0 4px #1c1f22,0 0 0 5px rgba(242,169,59,.6),0 0 22px 3px rgba(242,169,59,.5)}
.calc .range:hover::-webkit-slider-thumb,.calc .range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #1c1f22,0 0 0 5px var(--amber),0 0 0 12px rgba(242,169,59,.16),0 0 26px 4px rgba(242,169,59,.6)}
.calc .range:hover::-moz-range-thumb,.calc .range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px #1c1f22,0 0 0 5px var(--amber),0 0 0 12px rgba(242,169,59,.16),0 0 26px 4px rgba(242,169,59,.6)}
/* the hill panel: the same glass (opaque: on phones it is a sticky strip over the calculator) */
.hill{background:linear-gradient(180deg,#202327,#191b1e);border-color:rgba(244,241,234,.14)}
@media (min-width:1024px){.hill{background:radial-gradient(60% 50% at 50% 42%,rgba(242,169,59,.08),transparent 70%),linear-gradient(180deg,rgba(32,35,39,.94),rgba(19,21,24,.96));border-color:rgba(244,241,234,.12);box-shadow:0 50px 100px -60px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}}

/* ---------- 05 · the close: the amber card (heading + form) beside a dark glass contact panel ---------- */
.ptalk__card{position:relative;min-width:0;padding:clamp(22px,3.6vw,52px);border-radius:28px;color:var(--on-amber);transform-origin:50% 0;
  background:radial-gradient(rgba(26,19,7,.12) 1px,transparent 1.4px) 0 0/24px 24px,linear-gradient(160deg,#F6B651,var(--amber) 45%,#E99A2C);
  box-shadow:0 70px 140px -70px rgba(242,169,59,.5),0 40px 80px -50px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.35)}
.eng .ptalk__card{will-change:transform}
.ptalk__card .ptalk__head{margin-bottom:clamp(22px,3.4vh,36px)}
.ptalk__card .eyebrow{color:rgba(26,19,7,.74);text-shadow:none}
.ptalk__card .eyebrow::before{background:var(--on-amber)}
.ptalk__card .eyebrow:has(.eyebrow__hud)::after{background:linear-gradient(90deg,rgba(26,19,7,.32),rgba(26,19,7,.08))}
.ptalk__card .eyebrow__hud{color:rgba(26,19,7,.66)}
.ptalk__card .eyebrow__hud::before{border-color:var(--on-amber)}
.ptalk__card h2{max-width:12.5em;color:var(--on-amber);font-size:var(--fs-h2)}
.ptalk__card h2 em{color:var(--on-amber)}
.ptalk__card ::selection{background:var(--on-amber);color:var(--amber)}
.ptalk__card :focus-visible{outline-color:var(--on-amber)}
/* the 7-tick datum in dark ink */
.ptalk__card .ptalk__datum{margin:0 0 22px;background:repeating-linear-gradient(90deg,rgba(26,19,7,.32) 0 4px,transparent 4px 9px)}
.ptalk__card .ptalk__datum i{border-color:rgba(26,19,7,.5);background:#F0A53A}
.ptalk__card .ptalk__datum i.is-on{border-color:var(--on-amber);background:var(--on-amber);box-shadow:none}
/* the form: paper fields, dark ink */
.ptalk__card .ptalk__form{padding:0;border:0;border-radius:0;background:none}
.ptalk__card .field__input{background-color:#FFF8EC;border-color:rgba(26,19,7,.16);color:var(--on-amber)}
@media (hover:hover){.ptalk__card .field__input:hover{border-color:rgba(26,19,7,.42)}}
.ptalk__card .field__input:focus,.ptalk__card .field__input:focus-visible{border-color:var(--on-amber);box-shadow:0 0 0 3px rgba(26,19,7,.2);background-color:#fff}
.ptalk__card .field__label{color:rgba(26,19,7,.62)}
.ptalk__card .field__input:focus + .field__label,.ptalk__card .field__input:not(:placeholder-shown) + .field__label,.ptalk__card .field--select .field__label{color:rgba(26,19,7,.72)}
.ptalk__card .field__input:focus + .field__label{color:var(--on-amber)}
.ptalk__card .field--select .field__input{background-image:linear-gradient(45deg,transparent 50%,rgba(26,19,7,.7) 50%),linear-gradient(135deg,rgba(26,19,7,.7) 50%,transparent 50%)}
.ptalk__card .field__input[aria-invalid="true"]{border-color:#8A2B0B;box-shadow:0 0 0 3px rgba(138,43,11,.18)}
.ptalk__card .field__err{color:#4F1300;font-weight:500}
.ptalk__card .field__req{color:var(--on-amber)}
.ptalk__card .field__opt{color:rgba(26,19,7,.66)}
.ptalk__card .field__help,.ptalk__card .form__note{color:rgba(26,19,7,.78)}
.ptalk__card .form__legend,.ptalk__card .form__status,.ptalk__card .tlink{color:var(--on-amber)}
.ptalk__card .form__status{font-weight:500}
.ptalk__card .chip{background:rgba(255,248,236,.32);border-color:rgba(26,19,7,.28);color:var(--on-amber)}
@media (hover:hover){.ptalk__card .check__input:hover + .chip{border-color:var(--on-amber);color:var(--on-amber);background:rgba(255,248,236,.55)}}
.ptalk__card .check__input:checked + .chip,.ptalk__card .check.is-on .chip{background:var(--on-amber);border-color:var(--on-amber);color:var(--amber-hi)}
.ptalk__card .check__input:focus-visible + .chip{outline-color:var(--on-amber)}
.ptalk__card .btn--amber{background:var(--on-amber);color:var(--amber-hi)}
@media (hover:hover){.ptalk__card .btn--amber:hover{background:#30230F;color:#FFE3B5}}
@media (hover:hover) and (pointer:fine){.eng .ptalk__card .btn--amber::before{background:#30230F}} /* the shared hover sweep is dark on this dark button (a pale sweep hid the cream label) */
.ptalk__card .btn--ghost{border-color:rgba(26,19,7,.36);color:var(--on-amber);background:rgba(255,248,236,.26)}
@media (hover:hover){.ptalk__card .btn--ghost:hover{border-color:var(--on-amber);color:var(--on-amber)}}
.ptalk__card .form__compose{border-color:rgba(26,19,7,.45);background:rgba(255,248,236,.3)}
.ptalk__card .form__compose-lbl{color:rgba(26,19,7,.78)}
.ptalk__card .form__pre{background:#FFF8EC;color:var(--on-amber)}
.ptalk__card .form__sent{padding:0;border:0;border-radius:0;background:none;color:var(--on-amber)}
.ptalk__card .form__sent-mark{color:var(--on-amber)}
.ptalk__card .form__sent-mark i{background:var(--on-amber);box-shadow:none}
.ptalk__card .form__sent-title{color:var(--on-amber)}
.ptalk__card .form__sent-body{color:rgba(26,19,7,.8)}
/* the contact panel: dark glass, the Basepoint tile, contour lines rising from its corner */
.ptalk__aside{position:relative;overflow:hidden;padding:clamp(22px,2.6vw,34px);border:1px solid rgba(244,241,234,.12);border-radius:28px;
  background:linear-gradient(180deg,rgba(32,35,39,.9),rgba(18,20,23,.94))}
.ptalk__aside>:not(.ptalk__topo){position:relative}
.ptalk__topo{position:absolute;inset:0;pointer-events:none;
  background:repeating-radial-gradient(ellipse 120% 100% at 100% 0%,transparent 0 23px,rgba(242,169,59,.16) 23px 24px);
  -webkit-mask-image:radial-gradient(80% 60% at 100% 0%,#000 10%,transparent 75%);mask-image:radial-gradient(80% 60% at 100% 0%,#000 10%,transparent 75%)}
/* the quickest actions sit at the top (the number, the email, Call / Text); the survey mark fills the space below */
.ptalk__topo{font-style:normal}
.ptalk__id{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.ptalk__pin{flex:none;width:9px;height:9px;background:var(--amber);box-shadow:0 0 0 5px rgba(242,169,59,.12),0 0 14px rgba(242,169,59,.6)}
.ptalk__id .mono{line-height:1.7;color:var(--body)}
.ptalk__aside .ptalk__email{margin-top:2px}
.ptalk__aside .ptalk__btns{margin-top:18px}
.ptalk__aside .ptalk__promise{margin-top:22px}
@media (min-width:1024px){
  .ptalk__card{grid-column:1}
  .ptalk__aside{grid-column:2;align-self:stretch;padding-top:clamp(22px,2.6vw,34px)}
  .ptalk__aside .ptalk__promise{margin-top:auto;padding-top:24px;border-top:1px solid var(--hair)}
}
/* after a send the card is short, so the panel drops its survey mark (no crowding) */
.ptalk:has(.form__sent:not([hidden])) .ptalk__topo{display:none}
/* desktop: the panel runs the height of the card, so its middle holds the survey mark: contour rings round one amber point,
   centred in the panel (owner, 2026-10-05); the fade keeps the faint rings clear of the number and the Call / Text row */
@media (min-width:1024px){
  .ptalk__topo{background:repeating-radial-gradient(ellipse 100% 70% at 50% 50%,transparent 0 21px,rgba(242,169,59,.14) 21px 22px);
    -webkit-mask-image:radial-gradient(64% 24% at 50% 50%,#000 25%,transparent 82%);mask-image:radial-gradient(64% 24% at 50% 50%,#000 25%,transparent 82%)}
  .ptalk__topo::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;background:var(--amber);box-shadow:0 0 0 7px rgba(242,169,59,.12),0 0 24px rgba(242,169,59,.7)}
}
@media (max-width:767px){.ptalk__card{padding:22px 18px 24px;border-radius:24px}.ptalk__card .ptalk__datum{margin-inline:6px}.ptalk__aside{border-radius:24px}}

/* ---------- round 2 polish ---------- */
/* opener: the bench strip keeps clear of the Scroll cue's column (1280x720 had the cue inside the caption row) */
@media (min-width:1024px){.ptitle .bench{max-width:min(1200px,calc(100% - 120px))}}
@media (min-width:1024px) and (max-height:640px){.ptitle .title__cue{display:none}}
/* Estimate steps rise in on every step change (the hidden step leaves with its panel) */
.eng .pv__est .pv__step.is-on{animation:pv-fade 260ms var(--ease) both}
/* hovers (mouse, Motion on): chips and preview tabs lift 1px; a tier's corner ticks close in round its preview */
@media (hover:hover) and (pointer:fine){
  .eng .chip:not(.chip--static),.eng .pv__tab{transition:background-color var(--pt),border-color var(--pt),color var(--pt),transform var(--pt3) var(--ease)}
  .eng .chip:not(.chip--static):hover,.eng .check__input:hover + .chip,.eng .pv__tab:hover{transform:translate3d(0,-1px,0)}
  .eng .chip:active{transform:scale(.97)}
  .eng .ptier__pv::after{transition:transform .6s var(--ease),opacity .6s var(--ease)}
  .eng .ptier:hover .ptier__pv::after{transform:scale(.985);opacity:.9}
}
/* phones: information-carrying mono at 12px */
@media (max-width:767px){
  .bench__cap,.adpick__lbl,.adtrack__txt,.includes__lbl,.calc__lbl,.pmath__kicker,.ptiers__kicker,.prates__h,.pads__h,.ptalk__id .mono,.hill__head{font-size:12px}
  .pv__note,.pv__ba-tag,.calc__foot,.calc__scale,.calc__hint{font-size:11.5px}
  .tier__top .ptier__name{font-size:12px}
}
/* phones: the preview window is shorter, so the four service rows tighten to fit it */
@media (max-width:767px){.pv__svc{gap:8px}.pv__svc .pv__row{gap:10px;padding-bottom:8px}.pv__thumb{width:34px;height:34px;border-radius:7px}.pv__svc-txt{gap:6px}}
/* phones: the remaining information labels at 12px, and every tap target at least 44px tall */
@media (max-width:767px){
  .ptitle__jump{font-size:12px;letter-spacing:.08em}
  .pv__step-label,.pv__note,.pv__sent,.adtrack__lbl,.ptable caption,.ptable thead th,.calc__hint,.calc__foot,.form__compose-lbl,.form__sent-mark{font-size:12px}
  .ptalk__card .chip,.form .chip{min-height:44px}
  .calc__after .tlink{display:inline-flex;align-items:center;min-height:44px}
  .form__note .tlink{display:inline-block;padding:13px 0;margin:-13px 0}
}
@media (max-width:359px){.ptitle__jump{font-size:11px;letter-spacing:.06em}}

/* ---------- round 3 ---------- */
/* opener: the bench strip keeps to the left 60% on desktop, so the light and the cube own the right side and no strand
   bundle crosses a price label */
@media (min-width:1024px){.ptitle .bench{max-width:min(880px,60vw)}}

/* Starter preview: a real hero photo under an ink gradient (like Standard's Home tab), three labelled sections, the strip */
.pv__hero--starter{flex:1 1 auto;min-height:0;border-bottom:0;padding:14px 14px 12px;gap:7px}
.pv__hero--starter .pv__pill{margin-top:2px}
.pv__sects{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:11px 12px 10px}
.pv__sect{display:grid;gap:6px;align-content:start;min-width:0;padding-top:8px;border-top:1px solid rgba(242,169,59,.45)}
.pv__sect-l{font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pv__sect .pv__line{height:5px}
.pv--starter .pv__strip{margin-top:0}
@media (max-width:767px){.pv__sects{grid-template-columns:repeat(3,auto);justify-content:space-between;gap:8px;padding:9px 12px 8px}.pv__sect{min-width:56px}.pv__sect .pv__line--short{display:none}.pv__sect-l{overflow:visible}}

/* the hill: the prompt and the figure share one cell and cross-fade; the jobs row and the lines keep reserved rows, so
   the first input changes content without moving the plot, the dial or the calculator (transform/opacity only) */
.hill__empty,.hill__fig{transition:opacity .35s var(--ease),transform .45s var(--ease),color var(--pt)}
.hill.is-set .hill__empty{opacity:0;transform:translate3d(0,-6px,0)}
.hill:not(.is-set) .hill__fig{opacity:0;transform:translate3d(0,8px,0)}
.hill__line{transition:opacity .35s var(--ease)}
.hill:not(.is-set) .hill__line{opacity:0}
@media (max-width:1023px){.hill__plot{grid-area:1/1}.hill__empty,.hill__fig{grid-area:1/2}}
@media (min-width:1024px){
  .hill{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(200px,1fr) auto auto auto}
  .hill__head{grid-row:1}
  .hill__plot{grid-row:2;min-height:0}
  .hill__empty,.hill__fig{grid-row:3;grid-column:1;align-self:center}
  .hill__empty{margin-top:4px}
  .jobs{grid-row:4;min-height:58px;opacity:0;visibility:hidden;transition:opacity .35s var(--ease),visibility 0s .35s}
  .jobs.is-on{opacity:1;visibility:visible;transition:opacity .35s var(--ease)}
  .hill__lines{grid-row:5;min-height:calc(4 * 1.5 * 15.5px + 8px)}
  .hill__line,.hill__cmp{line-height:1.5}
  /* desktop: the output carries words for screen readers only, so it never takes (or changes) room */
  .calc__out,.calc__out:has(>.calc__empty:not([hidden])){margin-top:0;padding-top:0;border-top:0}
}
/* phones / tablets: the result line has its room from the start (a dim "About $0 …" placeholder), so the footnote and
   the link never jump when the first slider moves */
@media (max-width:1023px){
  .calc__out,.calc__out:has(>.calc__empty:not([hidden])){min-height:calc(4 * 1.5em + 6px + 19px);margin-top:24px;padding-top:18px;border-top:1px solid var(--hair)}
  .calc__sentence{display:block;transition:opacity .35s var(--ease)}
  .calc:not(.is-set) .calc__sentence{opacity:.4}
}
.still .hill,.still .hill__empty,.still .hill__fig,.still .hill__line,.still .jobs,.still .calc__sentence{transition:none}

/* the live dots composite (opacity only, own layer) */
.calc__live b{display:block;will-change:opacity}

/* no dead band between the ad builder and the closing card */
.pads{padding-bottom:clamp(36px,6vh,72px)}
.ptalk{padding-top:clamp(44px,7vh,88px)}
@media (max-width:767px){.pads{padding-bottom:36px}.ptalk{padding-top:40px}}

/* narrow phones: all five preview tabs fit the window (no clipped CONTAC / FA) */
@media (max-width:479px){.pv__tab{padding:0 6px;letter-spacing:.04em}}
@media (max-width:389px){.pv__tab{padding:0 5px;letter-spacing:.02em}}
@media (max-width:419px){.calc__out,.calc__out:has(>.calc__empty:not([hidden])){min-height:calc(5 * 1.5em + 6px + 19px)}}

/* the header goes ink-solid over the amber card (site.js measures every .amb band; this one is an empty marker the size
   of the card, so the see-through bar never turns olive over it) */
.ptalk__card>.ptalk__amb{position:absolute;inset:0;padding:0;background:none;pointer-events:none}
.eng .ptalk__card>.ptalk__amb{will-change:auto}

/* wide desktop: the contact fields run three across, so a #talk landing shows the heading, every field and Send it */
@media (min-width:1200px){.ptalk__card .form__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- round 4 ---------- */
/* opener: while it scrolls away each row fades as it nears the header (pricing.js), so nothing ghosts under the bar; the
   intro's opacity transitions are switched off for that scrub only */
.ptitle .title__copy.is-scrub>*{transition:none}
/* phones: the remaining 11px labels at 12px (preview tabs, the sample site's pill, the ad's domain) */
@media (max-width:767px){
  .pv__tab{font-size:12px}
  .pv__pill{font-size:12px}
  .ad__domain{font-size:12px}
  .js .ad__feed .ad__link-copy{min-height:calc(12px * 1.35 + 14px * 1.25 * 2 + 12px * 1.35 + 2px)}
}
@media (max-width:479px){.pv__tab{padding:0 5px;letter-spacing:.02em}}
@media (max-width:389px){.pv__tab{padding:0 4px;letter-spacing:0}}

/* ---------- phones and touch screens: nothing pins, nothing sticks (2026-10-05; same test as site.js BP4.touchy(): no fine pointer) ----------
   The tier cards flow as a plain list (site.css), and the hill window sits in the flow under the calculator instead of
   holding at the foot of the screen (the calculator's own sentence carries the number there) */
@media not all and (hover:hover) and (pointer:fine){
  .eng .hill{position:relative;top:auto;bottom:auto} /* (motion on only: Motion off keeps its old layout) */
}