/* ==========================================================================
   KREATED V2 — /pricing/ · TOP-LEVEL ROUTE
   Built 2026-08-31, when the Investment section moved off the homepage.

   Loads, in order:
     /styles.css              the ENTIRE pricing system (.invest, .offer,
                              .offer__x, .aftercol, .careline) plus the
                              warm-paper room tokens, unmodified
     /services/services.css   tokens, header, drawer, skip link
     /services/leaf.css       the shared top-level family — .shero, .crumb,
                              .close
     this file                only what the MOVE itself requires
     /footer.css              last, the single footer definition

   🚫 The pricing CSS is NOT forked. Every rule that draws an engagement row
   still lives in styles.css and is shared with nothing else now that the
   homepage no longer prints it. If a package changes, it changes in one place.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE HERO -> PAPER HANDOFF.
   The page opens in the dark leaf family and moves into the warm-paper room
   for the engagements. That change of ground is the point — it is the site's
   one tonal break and it now belongs to this route.

   ⚠ It is entered on the COLOUR ALONE. No hairline, no rounded container, no
   gradient band. That was the approved treatment on the homepage and it is
   preserved verbatim here. 🚫 Do not add a seam.
   -------------------------------------------------------------------------- */
.invest{margin-top:clamp(30px,4vw,58px)}

/* The hero glow is anchored to the TOP of the hero and its falloff is spent
   long before the hero's floor, so the dark side of the paper cut is quiet by
   the time it gets there. That is left alone deliberately: extending the box
   downward does nothing (measured — the gradient does not reach), and adding a
   SECOND source at the hero's foot would be inventing a light to justify a cut
   that already reads as deliberate. The cut is crisp, straight and full-width,
   which is what a controlled tonal change is supposed to look like. */
.shero::before{bottom:-8%}

/* The dark room the page returns to after the paper. Without this the close
   opened on flat ground and the second cut had the same unlit problem as the
   first. One source, entering at the boundary, using the family's royal. */
.close{position:relative;isolation:isolate}
.close::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  top:0;left:-6%;right:-6%;bottom:-40%;
  background:radial-gradient(72% 78% at 82% 0%,
    rgba(45,74,168,.30) 0%, rgba(45,74,168,.08) 44%, rgba(45,74,168,0) 74%);
}

/* --------------------------------------------------------------------------
   The H1's second line takes the family's Cormorant italic emphasis, the same
   device /services/ gives "in" and Web Design gives its ampersand. The word is
   "start", from the approved heading — it is not new copy.
   -------------------------------------------------------------------------- */
.pr__amp{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;
  font-weight:400;letter-spacing:-.01em}

/* --------------------------------------------------------------------------
   The engagements' own closing footnote sat directly above the homepage's FAQ.
   Here it is the last thing before the page leaves the paper, so it needs the
   room's floor under it rather than a section boundary.
   -------------------------------------------------------------------------- */
.invest > .wrap > :last-child{margin-bottom:0}

/* --------------------------------------------------------------------------
   RESPONSIVE — the family stylesheet and styles.css cover the engagement rows
   at every width; only the hero-to-paper gap needs to close up on a phone.
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  .invest{margin-top:clamp(20px,4vw,34px)}
}

/* --------------------------------------------------------------------------
   The two ruled headings under the engagements were <h3> on the homepage,
   below a section <h2>. Standing under this page's <h1> they had to become
   <h2>, which would otherwise inherit the document h2 size. They keep the
   micro-label appearance they were designed with.
   -------------------------------------------------------------------------- */
.aftercol__h{margin:0 0 18px;font:600 11px/1 'General Sans',system-ui;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(2,12,46,.60)}

/* --------------------------------------------------------------------------
   ⚠ .ilink IS BUILT FOR A DARK GROUND. leaf.css sets it to var(--white) with a
   cobalt underline, which is correct on every other route and invisible on this
   page's warm paper. The AEO block added on 2026-09-01 was the first inline
   link inside the paper room; it measured 1.14:1 until this rule existed.
   Same ink the room already uses for its own copy, same cobalt underline.
   -------------------------------------------------------------------------- */
.invest .ilink{color:var(--ink-on-room);border-bottom-color:var(--cobalt)}
.invest .ilink:hover{border-bottom-color:var(--cobalt-lift)}

/* ==========================================================================
   WHICH ONE IS YOU · WHAT MOVES THE NUMBER — added 2026-09-01
   Both sit inside the warm-paper room, so they take the room's ink rather
   than the site's interpolated tokens. They are ruled off the same way
   .aftercol is, at the same weight, because they are the same kind of object:
   quiet supporting matter under the four engagements, not a fifth offer.
   🚫 No panel, no card, no tint. The paper is the surface.
   ========================================================================== */
.choose{
  /* follows .offers, which ends in a hairline — see the note on .byp */
  padding-top:0;
  margin-top:clamp(36px,4vw,60px);
}
.movers{
  /* follows .choose, which does NOT end in a rule, so this one earns its own */
  border-top:1px solid var(--line-room);
  padding-top:22px;
  margin-top:clamp(36px,4vw,60px);
}
.choose__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,26px) clamp(28px,5vw,80px);
  counter-reset:choose;
}
/* the numeral is generated rather than typed so the order cannot drift out of
   step with the four engagements above it */
.choose__list li{
  counter-increment:choose;position:relative;
  padding:0 0 0 clamp(30px,2.6vw,40px);
  font-size:15px;line-height:1.6;color:rgba(2,12,46,.72);
}
.choose__list li::before{
  content:counter(choose,decimal-leading-zero);
  position:absolute;left:0;top:.15em;
  font:600 12px/1 'General Sans',system-ui;letter-spacing:.1em;
  color:var(--cobalt);
}
.choose__list li b{font-weight:600;color:var(--ink-on-room)}

.movers__list{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.5vw,20px) clamp(28px,5vw,80px)}
.movers__list li{
  padding:0 0 0 16px;position:relative;
  font-size:14.5px;line-height:1.6;color:rgba(2,12,46,.68);
}
/* a rule, not a bullet glyph: the room already uses hairlines to separate and
   a disc would be the only dot on the page */
.movers__list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:rgba(2,12,46,.44);
}
.movers__list li b{font-weight:600;color:var(--ink-on-room)}

.choose__note{
  margin:clamp(20px,2.2vw,30px) 0 0;max-width:62ch;
  /* .56 measured 4.31:1 on the warm paper. .60 is what every other quiet
     line in this room already uses, and it clears at 4.92:1. */
  font-size:13.5px;line-height:1.65;color:rgba(2,12,46,.60);
}

@media (max-width:900px){
  .choose__list,.movers__list{grid-template-columns:1fr}
}

/* ==========================================================================
   THE PACKAGES / INDIVIDUAL SERVICES SWITCHER — 2026-09-01
   --------------------------------------------------------------------------
   ⚠ NOT A SEGMENTED CONTROL. A pill-shaped two-up with a sliding highlight is
   the SaaS default and it would be the only piece of dashboard UI on the site.
   This is two editorial headings sitting on one rule, with the active one
   carrying full ink, a cobalt underline and a subtitle. It reads as a
   masthead choice, which is what it is.

   ⚠ THE ACTIVE STATE IS NOT COLOUR ALONE (WCAG 1.4.1). Three things change
   together: ink weight, the 2px cobalt rule under the active tab, and the
   subtitle, which is only rendered at full strength on the active side. A
   viewer who cannot distinguish the two inks still has the rule and the
   emphasis.
   ========================================================================== */
/* ⚠ Until pricing.js proves it is running, the tablist does not exist and both
   panels are open. This is the whole JS-off story and it lives in one place.
   🚫 Do not add `[hidden]` styling that would fight the attribute. */
.pswitch{display:none}
.invest.is-live .pswitch{display:block;margin:0 0 clamp(30px,3.6vw,52px)}

.pswitch__tabs{
  display:flex;gap:clamp(24px,3.4vw,52px);
  border-bottom:1px solid var(--line-room);
}
.pswitch__tab{
  appearance:none;background:none;border:0;cursor:pointer;
  padding:0 0 clamp(12px,1.4vw,18px);
  margin-bottom:-1px;                 /* the active rule sits ON the hairline */
  border-bottom:2px solid transparent;
  text-align:left;display:grid;gap:5px;
  /* ⚠ .60 is the floor on this warm paper: .52 measures 3.78:1, and at 560
     the tab name drops to 17px where the 3:1 large-text allowance no longer
     applies. Every quiet line in this room is .60 for the same reason. */
  color:rgba(2,12,46,.60);
  transition:color var(--t-hover),border-color var(--t-hover);
}
.pswitch__name{
  font:600 clamp(19px,1.8vw,26px)/1.1 'General Sans',system-ui;
  letter-spacing:-.022em;
}
.pswitch__sub{
  font:500 13px/1.4 'General Sans',system-ui;
  color:rgba(2,12,46,.60);        /* .46 measured 3.14:1 */
  transition:color var(--t-hover);
}
.pswitch__tab:hover{color:rgba(2,12,46,.78)}
.pswitch__tab[aria-selected="true"]{
  color:var(--ink-on-room);
  border-bottom-color:var(--cobalt);
}
.pswitch__tab[aria-selected="true"] .pswitch__sub{color:rgba(2,12,46,.78)}
.pswitch__tab:focus-visible{outline:2px solid var(--cobalt);outline-offset:4px;border-radius:3px}
.ppanel:focus{outline:none}

/* ---- group headings ------------------------------------------------------
   The catalog now has four package groups and three service groups, so the
   groups need to be findable without being loud. Name left, term right, on a
   hairline: the same object the .aftercol headings already are, one size up. */
.pgroup{
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  margin:clamp(44px,5vw,76px) 0 clamp(8px,1vw,16px);
  padding-bottom:14px;border-bottom:1px solid var(--line-room);
  font:600 clamp(15px,1.35vw,19px)/1.2 'General Sans',system-ui;
  letter-spacing:-.012em;color:var(--ink-on-room);
}
/* the first group under the switcher does not need the big gap above it */
.ppanel > .pgroup:first-child{margin-top:clamp(18px,2vw,30px)}
.pgroup span{
  flex:none;font:600 10.5px/1 'General Sans',system-ui;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(2,12,46,.60);
}
.pgroup--quiet{border-bottom:0;padding-bottom:0}

/* one-time / recurring, stated on every package row rather than only inside
   the disclosure — the distinction is the second thing a buyer needs and it
   should not require a click */
.offer__term{
  margin:-4px 0 0;font:600 10.5px/1 'General Sans',system-ui;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(2,12,46,.60);   /* .50 = 3.55:1 */
}

/* ==========================================================================
   INDIVIDUAL SERVICES
   Three short blocks per item, side by side on the desk and stacked on a
   phone. 🚫 Not cards: the same hairline-and-space language as everything
   else in this room.
   ========================================================================== */
.isvcs{border-top:1px solid var(--line-room)}
.isvc{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(18px,2.6vw,48px);
  padding:clamp(26px,3vw,42px) clamp(16px,1.6vw,28px);
  border-bottom:1px solid var(--line-room);
}
.isvc__head{display:grid;gap:10px;align-content:start}
.isvc__name{
  margin:0;font:600 clamp(22px,2.2vw,32px)/1.08 'General Sans',system-ui;
  letter-spacing:-.024em;color:var(--ink-on-room);
}
.isvc__price{
  margin:0;font:600 clamp(16px,1.4vw,20px)/1 'General Sans',system-ui;
  letter-spacing:-.01em;color:var(--cobalt);
}
.isvc__price--tbd{color:rgba(2,12,46,.60);font-weight:500}   /* .56 = 4.31:1 */
.isvc__body{display:grid;gap:clamp(14px,1.6vw,22px)}
.isvc__k{
  margin:0 0 5px;font:600 10.5px/1 'General Sans',system-ui;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(2,12,46,.60);
}
.isvc__body p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(2,12,46,.72);max-width:56ch}
/* the boundary note: the paragraph that stops a buyer purchasing the wrong
   thing. Ruled off and quieter, the same treatment .x__p--edge gets. */
.isvc__extra{
  grid-column:1 / -1;margin:clamp(6px,1vw,14px) 0 0;padding-top:16px;
  border-top:1px solid rgba(2,12,46,.12);
  font-size:13.5px;line-height:1.65;color:rgba(2,12,46,.6);max-width:92ch;
}
.isvc--soon{background:none}

/* ---- Build Your Package -------------------------------------------------- */
/* ⚠ NO border-top. .byp follows .isvcs, whose last row already ends in a
   hairline, so a second rule 100px below the first framed an empty band that
   read as a missing section. The same doubling was removed from .choose, which
   follows .offers. 🚫 Before adding a top rule to a block in this room, check
   what the block above it ends with. */
.byp{
  margin-top:clamp(44px,5vw,76px);padding-top:0;
}
.byp__lead{margin:14px 0 clamp(22px,2.4vw,30px);max-width:64ch;
  font-size:15px;line-height:1.65;color:rgba(2,12,46,.72)}
.byp__ctas{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
/* the room is warm paper, so the two buttons take the room's ink rather than
   the site's interpolated tokens */
.byp .btn--pill{background:var(--cobalt);color:#fff}
.byp .btn--ghost{border:1px solid rgba(2,12,46,.30);color:var(--ink-on-room);background:none}
.byp .btn--ghost:hover,.byp .btn--ghost:focus-visible{border-color:var(--cobalt)}
.byp__note{margin:clamp(18px,2vw,26px) 0 0;max-width:60ch;
  font-size:13px;line-height:1.6;color:rgba(2,12,46,.60)}

/* ---- terms --------------------------------------------------------------- */
.terms{margin-top:clamp(44px,5vw,76px);padding-top:26px;border-top:1px solid var(--line-room)}
.terms__list{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.6vw,22px) clamp(28px,5vw,80px)}
.terms__list li{padding:0 0 0 16px;position:relative;
  font-size:14.5px;line-height:1.6;color:rgba(2,12,46,.68)}
.terms__list li::before{content:'';position:absolute;left:0;top:.62em;
  width:7px;height:1px;background:rgba(2,12,46,.44)}
.terms__list li b{font-weight:600;color:var(--ink-on-room)}

/* ==========================================================================
   MOBILE
   The switcher must stay obvious and the two service walls must stay
   scannable. 🚫 Pricing itself is never hidden behind a tap — only the three
   explanation blocks stack, and they stack open.
   ========================================================================== */
@media (max-width:900px){
  .isvc{grid-template-columns:1fr;gap:16px}
  .isvc__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
  .isvc__price{flex:none}
  .terms__list{grid-template-columns:1fr}
}
@media (max-width:560px){
  .pswitch__tabs{gap:22px}
  .pswitch__name{font-size:17px}
  /* the subtitles are the first thing to go: at 360 they wrap to three lines
     each and turn a two-word choice into a paragraph */
  .pswitch__sub{display:none}
  .pgroup{font-size:15px}
  .pgroup span{font-size:9.5px;letter-spacing:.12em}
  .isvc__name{font-size:20px}
  .isvc__head{display:grid;gap:6px}
}

/* ⚠ THE MASTHEAD IS STICKY AND 91px TALL. Anything this page scrolls to
   programmatically — the tablist after a panel swap, an in-page link to a
   group, a deep link to one offer — lands UNDER it without this. It is not a
   detail: the switcher scrolling itself out of sight behind the header was the
   first thing that happened when the tabs were wired up.
   🚫 Do not remove this when adding new anchor targets to the page; add them
   to the list. */
.pswitch__tabs,.ppanel,.pgroup,.offer,.isvc,.byp,.terms,.choose,.movers{
  scroll-margin-top:calc(var(--head-h, 91px) + 18px);
}

/* ==========================================================================
   BUILD YOUR PACKAGE — 2026-09-01
   --------------------------------------------------------------------------
   Lives in the warm-paper room and takes the room's ink, exactly as .offer and
   .isvc do. 🚫 No cards, no dashboard chrome, no progress bars, no icon set,
   no checkmark confetti. A selectable row is the row it already was, with a
   real control on the left and a rule that lights when it is chosen.

   ⚠ THE SELECTED STATE IS NOT COLOUR ALONE (WCAG 1.4.1). Three things change
   together: the box fills, the left rule appears, and the name goes to full
   ink at 600. A viewer who cannot distinguish the inks still has two of them.
   ========================================================================== */
.byp__lead{margin:14px 0 clamp(22px,2.4vw,32px);max-width:64ch;
  font-size:15px;line-height:1.65;color:rgba(2,12,46,.72)}

.byp__layout{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);
  gap:clamp(28px,4vw,64px);align-items:start;
}

/* ---- groups -------------------------------------------------------------- */
.bg{border:0;padding:0;margin:0 0 clamp(30px,3.4vw,46px);min-width:0}
.bg__legend{display:block;width:100%;padding:0 0 12px;
  border-bottom:1px solid var(--line-room);margin-bottom:4px}
.bg__name{display:block;font:600 clamp(15px,1.3vw,18px)/1.2 'General Sans',system-ui;
  letter-spacing:-.012em;color:var(--ink-on-room)}
.bg__hint{display:block;margin-top:5px;font-size:13px;line-height:1.5;
  color:rgba(2,12,46,.60)}
.bg__clear{margin:10px 0 0}
.bg__clearbtn{appearance:none;background:none;border:0;padding:4px 0;cursor:pointer;
  font:500 12.5px/1 'General Sans',system-ui;color:rgba(2,12,46,.60);
  border-bottom:1px solid rgba(2,12,46,.28)}
.bg__clearbtn:hover{color:var(--ink-on-room);border-bottom-color:var(--cobalt)}
.bg__clearbtn:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}

/* ---- one selectable offer ------------------------------------------------ */
.bo{padding:14px 0 16px;border-bottom:1px solid rgba(2,12,46,.10);position:relative}
/* the left rule: the second, non-colour signal that a row is chosen */
.bo::before{content:'';position:absolute;left:-14px;top:12px;bottom:12px;width:2px;
  background:var(--cobalt);opacity:0;transition:opacity var(--t-hover)}
.bo.is-on::before{opacity:1}

.bo__pick{display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  padding:2px 0 2px 2px}
/* the real input stays in the accessibility tree and takes focus; it is drawn
   by .bo__box beside it. 🚫 Do not display:none it. */
.bo__input{position:absolute;opacity:0;width:20px;height:20px;margin:0;cursor:pointer}
.bo__box{flex:none;width:20px;height:20px;margin-top:1px;border-radius:5px;
  border:1.5px solid rgba(2,12,46,.34);background:rgba(255,255,255,.6);
  display:grid;place-items:center;transition:border-color var(--t-hover),background-color var(--t-hover)}
.bo__input[type=radio] + .bo__box{border-radius:50%}
.bo__box::after{content:'';width:8px;height:8px;border-radius:2px;
  background:var(--room);transform:scale(0);transition:transform var(--t-pill)}
.bo__input[type=radio] + .bo__box::after{border-radius:50%}
.bo.is-on .bo__box{background:var(--cobalt);border-color:var(--cobalt)}
.bo.is-on .bo__box::after{transform:scale(1)}
.bo__input:focus-visible + .bo__box{outline:2px solid var(--cobalt);outline-offset:3px}
.bo__pick:hover .bo__box{border-color:rgba(2,12,46,.55)}

.bo__text{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;min-width:0}
.bo__name{font:500 16px/1.3 'General Sans',system-ui;color:rgba(2,12,46,.86)}
.bo.is-on .bo__name{font-weight:600;color:var(--ink-on-room)}
.bo__price{font:600 13px/1.3 'General Sans',system-ui;color:var(--cobalt);white-space:nowrap}

.bo__detail{margin:7px 0 0 33px;max-width:62ch}
.bo__detail p{margin:0 0 4px;font-size:13.5px;line-height:1.55;color:rgba(2,12,46,.66)}
.bo__detail b{font-weight:600;color:rgba(2,12,46,.82)}
.bo__caveat{margin-top:7px !important;padding-top:7px;
  border-top:1px solid rgba(2,12,46,.10);font-size:12.5px !important;
  color:rgba(2,12,46,.60) !important}

/* ---- quantity — compact, and only where more than one is sensible -------- */
.bo__qty{display:flex;align-items:center;gap:8px;margin:11px 0 0 33px}
.bo__step{appearance:none;width:30px;height:30px;flex:none;cursor:pointer;
  border:1px solid rgba(2,12,46,.26);border-radius:7px;background:rgba(255,255,255,.6);
  font:500 16px/1 'General Sans',system-ui;color:var(--ink-on-room)}
.bo__step:hover{border-color:var(--cobalt)}
.bo__step:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.bo__num{width:56px;height:30px;text-align:center;
  border:1px solid rgba(2,12,46,.26);border-radius:7px;background:rgba(255,255,255,.6);
  font:600 14px/1 'General Sans',system-ui;color:var(--ink-on-room)}
.bo__num:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px}
.bo__unit{font-size:12.5px;color:rgba(2,12,46,.60)}

/* ---- per-row guidance ---------------------------------------------------- */
.bo__flag{margin:10px 0 0 33px;padding:8px 12px;border-radius:0 7px 7px 0;
  font-size:12.5px;line-height:1.5;max-width:58ch}
.bo__flag--included{border-left:2px solid var(--cobalt);
  background:rgba(2,12,46,.045);color:rgba(2,12,46,.74)}
.bo__flag--overlap,.bo__flag--note{border-left:2px solid rgba(2,12,46,.30);
  background:rgba(2,12,46,.035);color:rgba(2,12,46,.68)}
/* ⚠ .60 is this room's floor. The included state was .44 (2.96:1) and .55
   (4.17:1) — de-emphasis is not a licence to drop text below AA. The
   strike-through and the 'Included' word carry the meaning; the alpha was
   only ever reinforcing it. */
.bo.is-included .bo__price{color:rgba(2,12,46,.60);text-decoration:line-through}

/* ==========================================================================
   YOUR PROJECT — the summary
   ========================================================================== */
.byp__summary{position:sticky;top:calc(var(--head-h,91px) + 20px)}
.byp__sumin{border-top:2px solid var(--ink-on-room);padding-top:18px}
.byp__sumh{margin:0 0 14px;font:600 11.5px/1 'General Sans',system-ui;
  letter-spacing:.15em;text-transform:uppercase;color:rgba(2,12,46,.60)}
.byp__sumh:focus{outline:2px solid var(--cobalt);outline-offset:3px}
.bs__empty{margin:0;font-size:13.5px;line-height:1.6;color:rgba(2,12,46,.60)}

.bs__lines{list-style:none;margin:0 0 16px;padding:0}
.bs__line{display:grid;grid-template-columns:1fr auto;gap:4px 14px;
  padding:7px 0;border-bottom:1px solid rgba(2,12,46,.09);
  font-size:13.5px;line-height:1.4}
.bs__nm{color:rgba(2,12,46,.80)}
.bs__nm i{font-style:normal;color:rgba(2,12,46,.55)}
.bs__amt{font-weight:600;color:var(--ink-on-room);white-space:nowrap}
.bs__amt em{font-style:normal;font-weight:500;color:rgba(2,12,46,.60)}
.bs__note{grid-column:1 / -1;font-size:11.5px;color:rgba(2,12,46,.58)}
.bs__line.is-included .bs__nm{color:rgba(2,12,46,.60)}

.bs__total{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:12px 0 0;border-top:1px solid rgba(2,12,46,.16);margin-top:4px}
.bs__total--mo{border-top-width:1px;margin-top:10px}
.bs__tl{font:600 10.5px/1 'General Sans',system-ui;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(2,12,46,.60)}
.bs__tv{font:600 clamp(20px,1.8vw,26px)/1 'General Sans',system-ui;
  letter-spacing:-.02em;color:var(--ink-on-room)}
.bs__sub{margin:8px 0 0;font-size:12px;line-height:1.5;color:rgba(2,12,46,.60)}

/* ---- the fit verdict ----------------------------------------------------- */
.byp__verdict{margin:20px 0 0;padding:16px 0 0;border-top:1px solid rgba(2,12,46,.16)}
.bv__h{margin:0 0 7px;font:600 15px/1.25 'General Sans',system-ui;
  letter-spacing:-.014em;color:var(--ink-on-room)}
.bv__p{margin:0 0 10px;font-size:13px;line-height:1.55;color:rgba(2,12,46,.70)}
.bv__cmp{margin:0 0 10px}
.bv__cmp > div{display:flex;justify-content:space-between;gap:12px;
  padding:5px 0;font-size:13px;border-bottom:1px solid rgba(2,12,46,.09)}
.bv__cmp dt{color:rgba(2,12,46,.70)}
.bv__cmp dd{margin:0;font-weight:600;color:var(--ink-on-room)}
.bv__win dd{color:var(--cobalt)}
.bv__why{margin:0;font-size:12px;line-height:1.55;color:rgba(2,12,46,.60)}

.byp__go{margin-top:20px;width:100%;justify-content:center;
  background:var(--cobalt);color:#fff}
.byp__go[disabled]{opacity:.4;pointer-events:none}
.byp__terms{margin:14px 0 0;font-size:12px;line-height:1.55;color:rgba(2,12,46,.60)}

/* ==========================================================================
   MOBILE — the total must never be three screens away
   ========================================================================== */
.byp__bar{display:none}
@media (max-width:900px){
  .byp__layout{grid-template-columns:1fr;gap:clamp(24px,4vw,34px)}
  /* 🚫 not sticky on a phone: a sticky column plus a sticky bar plus a sticky
     masthead leaves almost no room to read. The bar carries the total. */
  .byp__summary{position:static}
  .bo__detail,.bo__qty,.bo__flag{margin-left:33px}
  .byp__bar{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    position:sticky;bottom:0;z-index:20;
    margin:clamp(24px,4vw,34px) calc(var(--gutter) * -1) 0;
    padding:12px var(--gutter);
    background:var(--room-deep,#EAE7DF);
    border-top:1px solid var(--line-room);
  }
  .byp__barcount{font:600 13px/1.3 'General Sans',system-ui;color:var(--ink-on-room)}
  .byp__barlink{flex:none;font:600 13px/1 'General Sans',system-ui;
    color:var(--cobalt);text-decoration:none;padding:9px 2px;
    border-bottom:1px solid var(--cobalt)}
  .byp__barlink:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
}
@media (max-width:560px){
  .bo__text{gap:3px 10px}
  .bo__detail{max-width:none}
  .bg__hint{font-size:12.5px}
}


/* ==========================================================================
   MOBILE REFINEMENTS — 2026-09-02. The Packages / Individual Services tabs are
   the primary control on this page and measured 33px on a phone.
   ========================================================================== */
@media (max-width:900px){
  .pswitch__tab{min-height:44px}
}

/* ==========================================================================
   REORGANIZED 2026-09-11 — owner: "the package builder is very low" and "a lot
   of scrolling to see everything". Four moves, all below.
   ========================================================================== */

/* 1. the two ways to buy, one click from the top */
.pr__ways{display:flex;flex-wrap:wrap;gap:12px;margin:clamp(20px,2.4vw,28px) 0 0}
@media (max-width:520px){ .pr__ways .btn{flex:1 1 100%;justify-content:center} }

/* 2. jump links on the Packages tab. Sticky under the header on wide screens
   so the reader can change group without scrolling back up. */
.pjump{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 clamp(8px,1vw,14px);
  padding:12px 0;background:var(--room, #F4F5FA);border-bottom:1px solid var(--line-room)}
.pjump a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;
  border:1px solid rgba(2,12,46,.16);border-radius:999px;
  font:500 13.5px/1 'General Sans',system-ui;color:var(--ink-on-room);text-decoration:none;
  transition:border-color var(--t-hover),color var(--t-hover)}
.pjump a:hover,.pjump a:focus-visible{border-color:var(--accent);color:var(--accent);outline:none}
@media (min-width:900px){
  .pjump{position:sticky;top:var(--head-h,91px);z-index:5}
}
@media (max-width:899px){
  /* one scrolling row rather than four wrapped lines of chips */
  .pjump{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .pjump::-webkit-scrollbar{display:none}
  .pjump a{flex:none}
}
/* a jumped-to heading lands below the header AND the sticky row, not under them */
.ppanel .pgroup[id]{scroll-margin-top:calc(var(--head-h,91px) + 76px)}
@media (max-width:899px){ .ppanel .pgroup[id]{scroll-margin-top:calc(var(--head-h,91px) + 18px)} }

/* 3. the static price list under the builder, collapsed */
.plist{margin:clamp(40px,4.6vw,64px) 0 0;border-top:1px solid var(--line-room)}
.plist__sum{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  padding:18px 0;cursor:pointer;list-style:none;
  font:600 clamp(15px,1.35vw,19px)/1.2 'General Sans',system-ui;color:var(--ink-on-room)}
.plist__sum::-webkit-details-marker{display:none}
.plist__sum span{flex:none;font:600 10.5px/1 'General Sans',system-ui;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(2,12,46,.60)}
.plist__sum::after{content:'+';flex:none;margin-left:12px;font-weight:400;font-size:22px;
  line-height:1;color:var(--accent)}
.plist[open] > .plist__sum::after{content:'\2212'}
.plist__sum:hover,.plist__sum:focus-visible{color:var(--accent);outline:none}
.plist > .pgroup:first-of-type{margin-top:8px}

/* 4. builder rows: name, price and one line. "What it can do", "Good fit if"
   and any term appear once the row is picked, which is when they matter; the
   one-line summary is enough to choose by. This took the builder from about
   6,100px to a fraction of it.
   ⚠ Hidden with display:none only because they are repeated in full on the
   Packages tab and in the price list below — nothing is withheld. */
.bo__does,.bo__fit,.bo__caveat{display:none}
.bo.is-on .bo__does,.bo.is-on .bo__fit,.bo.is-on .bo__caveat{display:block}
.bo{padding:11px 0 12px}
.bo__detail{margin-top:4px}
/* two columns of options per group on wide screens: the rows are now short
   enough to sit side by side, which halves the picker's height. The legend is
   the fieldset's rendered legend, so it is not a grid item and spans on its own;
   the "Clear …" link is told to span. align-items:start so picking a row (which
   reveals its detail) does not stretch its neighbour. */
@media (min-width:1100px){
  .bg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:30px;align-items:start}
  .bg > .bg__clear{grid-column:1 / -1}
}
/* 5. tighter package cards, on this page only (styles.css is shared with the
   homepage). Same three columns and the same hierarchy; less air. Each card
   was ~330px, most of it padding around a 56px name. */
.ppanel .offer{padding:clamp(20px,2.2vw,32px) clamp(16px,1.6vw,28px)}
.ppanel .offer--ml{padding-top:clamp(20px,2.2vw,32px)}
.ppanel .offer__name{font-size:clamp(28px,2.7vw,42px);margin-bottom:8px}
.ppanel .offer__no{margin-bottom:4px;font-size:17px}
.ppanel .offer__scope{padding-top:clamp(14px,1.4vw,22px)}
.ppanel .offer__go{padding-top:clamp(12px,1.3vw,20px);gap:10px}
.pr__ways{margin-top:clamp(26px,3vw,36px)}
/* the collapsed "what's included" panel is a grid row of zero height, but it
   still earned a full row gap: an empty band under every closed card. Above
   900px the three columns only need the column gap; .x__inner already carries
   its own margin when the panel opens. Below 900px the columns stack and need
   the row gap, so this does not apply there. */
@media (min-width:901px){ .ppanel .offer{row-gap:0} }