/* ————————————————————————————————————————————
   REAVANT — pricing (REA-1106, reavant-pricing-v36).
   Loads after occupiers.css and inherits its tokens, typefaces and chrome
   (nav, drawer, details, night band, footer). Only this page's own furniture
   is defined here.

   Two deliberate departures from occupiers.css, both because that sheet is
   tuned for the tenants page rather than for this one:
     · the questions section is #questions, not #faq — occupiers.css dresses
       #faq in the mauve dusk ramp and the fluorescent + markers that carry
       the tenants page into its closing band;
     · the closing band's gradient and accents are reset below, because the
       tenants page's band is built to blend out of that same mauve ramp.
———————————————————————————————————————————— */

/* ———————————————— hero ———————————————— */
.price-hero{
  position:relative;overflow:hidden;background:var(--paper);
  padding:clamp(72px,8vw,110px) 0 clamp(64px,8vw,104px);
}
.price-hero::before{ /* ledger ruling, fading out */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(to bottom,transparent 0 35px,rgba(46,26,71,.05) 35px 36px);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 82%);
          mask-image:linear-gradient(to bottom,#000 0%,transparent 82%);
}
.price-hero .in{position:relative;max-width:840px}
.price-hero .eyebrow{display:block;margin-bottom:18px}
.price-hero h1{
  font-size:clamp(2.6rem,5vw,4.1rem);line-height:1.05;
  font-weight:500;letter-spacing:-.02em;margin:18px 0 20px;
}
.price-hero h1 .ital{font-style:italic;color:var(--brass-deep)}
.price-hero .sub{font-size:1.08rem;line-height:1.6;color:var(--ink-soft);max-width:64ch}

/* ———————————————— billing period ————————————————
   Pure CSS. The radios live at body level, ahead of the hero, so the general
   sibling combinator reaches both the pill and every price inside it. */
.term-radio{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bill-wrap{
  display:flex;justify-content:center;position:relative;z-index:1;
  margin-top:clamp(36px,5vw,56px);
}
.bill{
  display:inline-flex;align-items:center;gap:4px;width:max-content;
  border:1px solid var(--ink);border-radius:999px;background:var(--cream);padding:5px;
}
.bill label{
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.9rem;font-weight:500;color:var(--ink-soft);
  border-radius:999px;padding:11px 22px;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.bill label:hover{color:var(--ink)}
.bill .save{
  font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brass-deep);margin-left:9px;
}
#term-monthly:checked ~ .price-hero label[for="term-monthly"],
#term-6m:checked ~ .price-hero label[for="term-6m"]{
  background:var(--ink);color:var(--cream);box-shadow:0 2px 8px -3px rgba(46,26,71,.5);
}
#term-monthly:checked ~ .price-hero label[for="term-monthly"] .save,
#term-6m:checked ~ .price-hero label[for="term-6m"] .save{color:var(--brass-light)}
#term-monthly:focus-visible ~ .price-hero label[for="term-monthly"],
#term-6m:focus-visible ~ .price-hero label[for="term-6m"]{outline:2px solid var(--brass);outline-offset:3px}

/* only the selected period's figure is shown */
.p-6m{display:none}
#term-6m:checked ~ .price-hero .p-mo{display:none}
#term-6m:checked ~ .price-hero .p-6m{display:inline}

/* ———————————————— the three plans ———————————————— */
.plans{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin-top:clamp(40px,5vw,64px);position:relative;z-index:1;
}
.plan{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:30px 28px 32px;
  box-shadow:0 18px 40px -30px rgba(46,26,71,.35);
}
.plan.pick{border-color:var(--ink)}
.plan-k{
  display:block;margin-bottom:16px;min-height:1em;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-soft);
}
.plan-k b{color:var(--brass-deep);font-weight:400}
.plan-p{
  display:flex;align-items:baseline;min-height:2.8rem;
  font-family:var(--serif);font-size:2.8rem;line-height:1;font-weight:500;letter-spacing:-.02em;
}
.plan-p small{
  font-family:var(--sans);font-size:.9rem;font-weight:400;
  color:var(--ink-soft);letter-spacing:0;margin-left:6px;
}
.plan-p.talk{font-size:2.1rem;align-items:center}
.plan-c{
  margin:14px 0 20px;padding-bottom:20px;min-height:118px;
  border-bottom:1px solid var(--line);
}
.plan-c b{display:block;font-family:var(--mono);font-size:.95rem;letter-spacing:-.01em;color:var(--ink)}
.plan-c span{display:block;font-size:.86rem;color:var(--ink-soft);margin-top:5px}
.plan ul{list-style:none;margin:0 0 26px;padding:0}
.plan li{position:relative;padding:0 0 11px 22px;font-size:.92rem;line-height:1.5;color:var(--ink-soft)}
.plan li::before{ /* drawn tick, so no glyph and no icon font */
  content:'';position:absolute;left:2px;top:8px;width:5px;height:8px;
  border:solid var(--brass);border-width:0 1.5px 1.5px 0;transform:rotate(42deg);
}
.plan .btn{margin-top:auto;text-align:center}
/* the third plan asks for a conversation, not a card payment, so its CTA
   steps back to an outline */
.plan .btn.ghost{background:none;color:var(--ink);border-color:var(--ink)}
.plan .btn.ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--cream);box-shadow:none}

@media(max-width:980px){
  .plans{grid-template-columns:1fr}
  .plan-c{min-height:0}
  .plan-p{min-height:0}
}

/* ———————————————— pricing questions ———————————————— */
.price-faq{
  background:var(--cream);border-top:1px solid var(--line);
  padding:clamp(64px,8vw,110px) 0;
}

/* ———————————————— closing band ————————————————
   occupiers.css builds this band to fade out of the tenants page's mauve FAQ
   ramp; here it sits under a cream section, so it takes the plain plum ramp
   the design asks for, and its accents follow the page's brass. */
.night{background:linear-gradient(180deg,var(--plum-light) 0%,var(--plum) 46%,var(--plum-deep) 100%)}
.night::before{display:none}
/* padding-block only: the shorthand would wipe out .wrap's 28px gutter and
   push the heading, button and proof line flush against the screen edge on
   phones. occupiers.css carries the same warning over its own rule. */
.night .cta-block{
  padding-top:clamp(84px,10vw,128px);
  padding-bottom:clamp(64px,7vw,96px);
}
.night .eyebrow{color:var(--brass-light)}
.night h2.big .ital{color:var(--brass-light)}