/* boxpage.css: layout shared by the three box pages and Inside a box. The
   look itself (tokens, type, buttons, badges, the line accents) is pp.css. */

/* nav.js paints a fixed texture behind every page, so main declares its own
   ground. It declares no z-index: the header must outrank it. */
body > main{background:var(--white);}
body > footer.ppfoot{margin-top:0;}
[hidden]{display:none !important;}

/* ---- the head: where she is, the box, its price, the photo ---- */
.bp-head{padding-block:20px 40px; border-bottom:1px solid var(--rule);}
.bp-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px; align-items:center;}
.bp-grid > *{min-width:0;}
@media (max-width:820px){ .bp-grid{grid-template-columns:1fr; gap:24px;} .bp-head{padding-block:8px 32px;} }

.crumbs ol{list-style:none; margin:0 0 18px; padding:0; display:flex; flex-wrap:wrap; align-items:center;
  font-family:var(--ui); font-size:.9rem; color:var(--muted);}
.crumbs li + li::before{content:"\203A"; margin:0 8px; color:var(--muted);}
.crumbs a{display:inline-block; padding:10px 0; color:var(--muted); text-underline-offset:3px;}
.crumbs [aria-current]{color:var(--plum); font-weight:600;}

.bp-kind{font-family:var(--ui); font-weight:600; font-size:1rem; color:var(--muted); margin:0 0 4px;}
.bp-lede{font-size:1.22rem; line-height:1.5; margin:18px 0 0; max-width:36ch;}

/* The plan's colour sits beside its name badge, never alone. */
.bp-price{position:relative; margin-top:26px; padding:2px 0 2px 22px;}
.bp-price::before{content:""; position:absolute; left:0; top:0; bottom:0; width:6px; border-radius:3px; background:var(--accent);}
.bp-price .price{margin:8px 0 0; max-width:none; line-height:1.1;}
.bp-price .price small{display:block; margin-top:6px; font-size:1rem; line-height:1.45;}

.bp-photo{margin:0;}
.bp-photo img{width:100%; height:auto; border-radius:18px; background:var(--cream);}

/* ---- the body: one measure wide ---- */
.bp-body{padding-block:52px 64px;}
.bp-main{max-width:680px;}
.bp-main h2{font-size:clamp(1.65rem, 3.6vw, 2.2rem); margin:48px 0 14px;}
.bp-main > h2:first-child{margin-top:0;}
@media (max-width:600px){ .bp-body{padding-block:36px 48px;} .bp-main h2{margin-top:40px;} }

.bp-list{list-style:none; margin:0; padding:0; border-top:1px solid var(--rule);}
.bp-list li{padding:14px 0; border-bottom:1px solid var(--rule);}

/* Numbered because it IS a sequence: the order the build page asks in. */
.bp-steps{list-style:none; counter-reset:step; margin:0; padding:0;}
.bp-steps li{counter-increment:step; display:grid; grid-template-columns:34px minmax(0,1fr); gap:0 14px; align-items:center; padding:10px 0;}
.bp-steps li::before{content:counter(step); width:32px; height:32px; border-radius:50%; background:var(--rose-light);
  color:var(--plum); font-family:var(--ui); font-weight:700; font-size:1rem; display:flex; align-items:center; justify-content:center;}

/* The terms that come with the box, set apart and read before the button. */
.bp-terms{margin:36px 0 0; padding:20px 22px; background:var(--cream); border-left:4px solid var(--gold); border-radius:0 14px 14px 0;}
.bp-terms p{margin:0; max-width:none;}
.bp-terms p + p{margin-top:12px;}

.bp-cta{margin-top:28px; min-height:52px; padding-inline:32px; font-size:1.05rem;}
@media (max-width:600px){ .bp-cta{display:flex; width:100%;} }

/* ---- the other boxes ---- */
.bp-others{background:var(--cream); padding-block:36px 56px;}
.bp-other{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0; padding:16px 0;
  border-top:1px solid rgba(74,33,56,.12); max-width:none;}
.bp-other:last-child{border-bottom:1px solid rgba(74,33,56,.12);}
.bp-other .btn{min-height:44px;}

/* ---- Inside a box: the three boxes side by side ---- */
.cmp{border-top:1px solid var(--rule); margin-top:8px;}
.cmp-row{position:relative; display:grid; grid-template-columns:200px minmax(0,1fr) auto; gap:8px 24px; align-items:center;
  padding:22px 0 22px 24px; border-bottom:1px solid var(--rule);}
.cmp-row::before{content:""; position:absolute; left:0; top:18px; bottom:18px; width:6px; border-radius:3px; background:var(--accent);}
.cmp-row .price{font-size:1.5rem; margin:6px 0 0; max-width:none;}
.cmp-row p{margin:0;}
.cmp-row .btn{white-space:nowrap; min-height:44px;}
@media (max-width:820px){ .cmp-row{grid-template-columns:1fr;} .cmp-row .btn{justify-self:start;} }
.cmp-note{font-family:var(--ui); font-size:.92rem; color:var(--muted); margin:14px 0 0;}