/* Beyond Care v142 — scrapbook build of the sign-up / purchase journey,
   matching the homepage, sign-in, Courses and For Organisations pages.
   Visual layer only: every ID, data attribute and form control is unchanged,
   so the GoCardless signup flow keeps working. Loaded after signup-v103.css. */
:root{
  --sb-board:#d8c2a3;
  --sb-ink:#151210;
  --sb-muted:#433b34;
  --sb-red:#d7181f;
  --sb-serif:'Vidaloka',Georgia,'Times New Roman',serif;
  --sb-body:Georgia,'Times New Roman',serif;
  --sb-sans:'Inter',Arial,sans-serif;
  --sb-hand:'Caveat','Segoe Print',cursive;
  --sb-shadow:drop-shadow(0 5px 8px rgba(70,48,25,.17));
}

/* ---------- collage board ---------- */
body.bc-signup{
  position:relative!important;
  background-color:var(--sb-board)!important;
  background-image:url('./assets/courses/v140/collage-bg.webp')!important;
  background-size:1672px auto!important;
  background-repeat:repeat-y!important;
  background-position:center top!important;
}
.sb-sprig{position:absolute;top:110px;width:96px;height:426px;z-index:0;pointer-events:none;mix-blend-mode:multiply;-webkit-mask-image:radial-gradient(closest-side,#000 62%,transparent);mask-image:radial-gradient(closest-side,#000 62%,transparent)}
.sb-sprig img{display:block;width:100%;height:100%}
.sb-sprig.left{left:0}
.sb-sprig.right{right:0;width:92px}
body.bc-signup main,body.bc-signup .bc-foot{position:relative;z-index:1}

/* ---------- paper + tape ---------- */
body.bc-signup .sb-paper{
  background:url('./assets/courses/v140/card-paper-a.webp') center/100% 100% no-repeat!important;
  border:0!important;border-radius:0!important;box-shadow:none!important;
  filter:var(--sb-shadow);
}
body.bc-signup .sb-paper.b{background-image:url('./assets/courses/v140/card-paper-b.webp')!important}
body.bc-signup .sb-paper.c{background-image:url('./assets/courses/v140/card-paper-c.webp')!important}
.sb-tape{position:absolute;width:86px;height:26px;background:linear-gradient(180deg,rgba(214,184,138,.8),rgba(196,163,113,.72));clip-path:polygon(0 8%,6% 0,14% 10%,22% 2%,100% 0,95% 18%,100% 34%,94% 52%,100% 70%,96% 86%,100% 100%,10% 96%,0 100%,5% 78%,0 60%,6% 40%,0 22%);z-index:2;pointer-events:none}
.sb-clip{position:absolute;top:-16px;right:34px;width:14px;height:40px;border:2px solid #6c665f;border-radius:8px;transform:rotate(8deg);z-index:2;pointer-events:none}
.sb-clip::after{content:'';position:absolute;left:2px;right:2px;top:6px;bottom:-2px;border:2px solid #6c665f;border-top:0;border-radius:0 0 6px 6px}

/* ---------- torn-paper header ---------- */
body.bc-signup .bc-masthead{
  position:relative!important;z-index:20!important;
  height:64px!important;border-bottom:0!important;
  background:#f4ecdf!important;
}
body.bc-signup .bc-masthead::after{content:'';position:absolute;left:0;right:0;top:100%;height:18px;background:url('./assets/organisations/v141/paper-edge.webp') center bottom/100% 100% no-repeat;pointer-events:none}
body.bc-signup a.wordmark{font-size:30px!important}
body.bc-signup .bc-nav-link{font-size:15px!important}

body.bc-signup main{padding:46px 0 34px!important}
body.bc-signup .bc-shell,body.bc-signup .bc-foot{width:min(calc(100% - 200px),1500px)!important}

/* ---------- hero: taped copy card + sketch ---------- */
body.bc-signup .bc-head{gap:28px!important;margin:0 0 30px!important;grid-template-columns:minmax(560px,52%) minmax(0,48%)!important}
body.bc-signup .bc-head-copy{position:relative!important;padding:48px 54px 50px 56px!important;transform:rotate(-.4deg)}
body.bc-signup .bc-head-copy .sb-tape{top:-10px;left:42%;transform:rotate(-4deg)}
body.bc-signup .bc-eyebrow{color:#2a2520!important;font-size:21px!important;letter-spacing:.1em!important}
body.bc-signup h1{font-size:clamp(46px,4.4vw,72px)!important;line-height:.96!important}
body.bc-signup h1 em{position:relative!important;width:max-content!important;max-width:100%!important}
body.bc-signup h1 em::after{content:'';position:absolute;left:2%;right:20%;bottom:-6px;height:3px;border-radius:3px;background:var(--sb-red);transform:rotate(-1.2deg)}
body.bc-signup .bc-lede{margin-top:30px!important;color:var(--sb-muted)!important;font:400 18px/1.48 var(--sb-body)!important}
body.bc-signup .bc-head-art{height:auto!important;justify-content:center!important}
body.bc-signup .bc-head-art img{max-height:300px!important;transform:rotate(1.5deg);filter:contrast(1.04)}

/* ---------- step rail on a paper strip ---------- */
body.bc-signup .bc-steps{
  width:max-content!important;max-width:100%!important;
  margin:0 0 30px!important;padding:16px 30px!important;border-bottom:0!important;
  background:url('./assets/courses/v140/card-paper-c.webp') center/100% 100% no-repeat!important;
  filter:var(--sb-shadow);transform:rotate(.3deg);
}
body.bc-signup .bc-steps li{color:#5e554d!important;font-size:15px!important}
body.bc-signup .bc-steps li::before{background:rgba(255,252,245,.6)!important;border-color:rgba(51,39,30,.3)!important}
body.bc-signup .bc-steps li[aria-current='step']{color:var(--sb-ink)!important}
body.bc-signup .bc-steps li[aria-current='step']::before{background:var(--sb-red)!important;border-color:var(--sb-red)!important}
body.bc-signup .bc-steps li.done::before{background:transparent!important;border-color:var(--sb-red)!important}

/* ---------- purchase card + summary ---------- */
body.bc-signup .bc-layout{gap:34px!important;grid-template-columns:minmax(0,1fr) 390px!important}
body.bc-signup .bc-card{position:relative!important;padding:46px 50px 48px!important}
body.bc-signup .bc-layout > .bc-card:first-child{transform:rotate(-.15deg)}
body.bc-signup .bc-card .sb-tape.one{top:-11px;left:10%;transform:rotate(-6deg)}
body.bc-signup .bc-card .sb-tape.two{top:-9px;right:14%;transform:rotate(9deg)}
body.bc-signup .bc-step-title{font-size:34px!important}
body.bc-signup .bc-step-title::after{content:'';display:block;width:64px;height:2px;margin-top:10px;background:var(--sb-red);transform:rotate(-2deg)}
body.bc-signup .bc-step-note{color:var(--sb-muted)!important;font-size:16px!important}

/* Account-type choices become taped paper tiles. */
body.bc-signup .bc-choices{gap:22px!important;margin-top:8px!important}
body.bc-signup .bc-choice{
  overflow:visible!important;cursor:pointer;
  padding:28px 24px 26px!important;
  border:0!important;border-radius:0!important;
  background:url('./assets/courses/v140/card-paper-a.webp') center/100% 100% no-repeat!important;
  filter:drop-shadow(0 4px 6px rgba(70,48,25,.15));
  transition:transform .2s ease,filter .2s ease;
}
body.bc-signup .bc-choice:nth-child(2){background-image:url('./assets/courses/v140/card-paper-c.webp')!important;transform:rotate(.4deg)}
body.bc-signup .bc-choice:nth-child(odd){transform:rotate(-.4deg)}
body.bc-signup .bc-choice:hover{transform:translateY(-3px) rotate(-.2deg)}
body.bc-signup .bc-choice:nth-child(1) .sb-tape{top:-11px;left:-14px;transform:rotate(-24deg)}
body.bc-signup .bc-choice:nth-child(2) .sb-tape{top:-10px;right:30px;transform:rotate(9deg)}
body.bc-signup .bc-choice:nth-child(3) .sb-tape{top:-11px;left:40%;transform:rotate(-5deg)}
body.bc-signup .bc-choice::before{font-size:26px!important}
body.bc-signup .bc-choice:has(input:checked){
  background-color:transparent!important;
  background-image:url('./assets/courses/v140/card-paper-b.webp')!important;
  box-shadow:none!important;
  outline:2px solid var(--sb-red);outline-offset:-7px;
  filter:drop-shadow(0 7px 10px rgba(120,30,20,.2));
}
body.bc-signup .bc-choice:has(input:checked)::after{
  content:'Selected'!important;top:22px!important;right:22px!important;
  font:600 21px/1 var(--sb-hand)!important;letter-spacing:.06em!important;
  transform:rotate(-4deg);
}
body.bc-signup .bc-choice:has(input:focus-visible){outline:2px solid var(--sb-red);outline-offset:3px}
body.bc-signup .bc-choice-name{font-size:22px!important}
body.bc-signup .bc-choice-copy{color:#3b342e!important;font-size:15px!important}

/* Fields sit on the paper like a form clipped into the scrapbook. */
body.bc-signup .bc-field input,
body.bc-signup .bc-field select,
body.bc-signup .bc-seatbtn{background:rgba(255,252,245,.62)!important;border-color:rgba(55,43,33,.28)!important}
body.bc-signup .bc-preset{background:rgba(255,252,245,.4)!important}
body.bc-signup .bc-preset:hover{border-color:var(--sb-red)!important;color:var(--sb-red)!important}
body.bc-signup .bc-cta{height:48px!important;padding:0 28px!important;border-radius:2px!important;font-size:16px!important;box-shadow:0 3px 8px rgba(120,20,20,.18)!important}
body.bc-signup .bc-cta:hover{background:#bf141a!important}

body.bc-signup .bc-summary{position:sticky!important;top:96px!important;padding:42px 36px 40px!important;transform:rotate(.6deg)}
body.bc-signup .bc-summary h2{font-size:22px!important}
body.bc-signup .bc-lines div{border-bottom-color:rgba(51,39,30,.16)!important}
body.bc-signup .bc-lines dt{color:#4f4740!important}
body.bc-signup .bc-total-value{font-size:58px!important}

body.bc-signup .bc-message{position:relative;z-index:2}
body.bc-signup .bc-done{padding:56px 60px!important;margin:0 auto!important}

/* ---------- footer strip ---------- */
body.bc-signup .bc-foot{padding:6px 0 40px!important;color:#4b443d!important}
body.bc-signup .bc-foot .sb-foot-strip{padding:24px 44px}
body.bc-signup .bc-foot p{padding-top:0!important;border-top:0!important;font:400 14px/1.45 var(--sb-body)!important}

/* ---------- responsive ---------- */
@media(max-width:1320px){
  body.bc-signup .bc-shell,body.bc-signup .bc-foot{width:min(calc(100% - 64px),1220px)!important}
  body.bc-signup .bc-head{grid-template-columns:minmax(470px,56%) 1fr!important}
  body.bc-signup .bc-layout{grid-template-columns:minmax(0,1fr) 340px!important}
  body.bc-signup .bc-choice,body.bc-signup .bc-choice:nth-child(n){transform:none}
}
@media(max-width:1100px){
  .sb-sprig{display:none}
}
@media(max-width:980px){
  body.bc-signup .bc-shell,body.bc-signup .bc-foot{width:min(calc(100% - 40px),900px)!important}
  body.bc-signup .bc-masthead{height:64px!important;padding:0!important}
  body.bc-signup .bc-head{grid-template-columns:1fr!important}
  body.bc-signup .bc-head-copy{transform:none}
  body.bc-signup .bc-head-art{justify-content:center!important}
  body.bc-signup .bc-head-art img{max-height:240px!important}
  body.bc-signup .bc-steps{width:auto!important;transform:none}
  body.bc-signup .bc-layout > .bc-card:first-child,body.bc-signup .bc-summary{transform:none}
  body.bc-signup .bc-summary{position:relative!important;top:auto!important}
  body.bc-signup .bc-layout{grid-template-columns:1fr!important}
}
@media(max-width:620px){
  body.bc-signup .bc-shell,body.bc-signup .bc-foot{width:calc(100% - 24px)!important}
  body.bc-signup a.wordmark{font-size:26px!important}
  body.bc-signup main{padding-top:30px!important}
  body.bc-signup .bc-head-copy{padding:36px 26px 38px!important}
  body.bc-signup .bc-eyebrow{font-size:18px!important;letter-spacing:.06em!important}
  body.bc-signup h1{font-size:44px!important}
  body.bc-signup h1 em{width:auto!important}
  body.bc-signup h1 em::after{display:none}
  body.bc-signup .bc-lede{font-size:16px!important}
  body.bc-signup .bc-steps{padding:14px 16px!important}
  body.bc-signup .bc-card{padding:36px 22px 32px!important}
  body.bc-signup .bc-summary{padding:36px 24px 32px!important}
  body.bc-signup .bc-choice{padding:24px 20px 22px!important}
  body.bc-signup .bc-done{padding:40px 24px!important}
  body.bc-signup .bc-foot .sb-foot-strip{padding:22px 24px}
}
@media(prefers-reduced-motion:reduce){body.bc-signup .bc-choice{transition:none}body.bc-signup .bc-choice:hover{transform:none}}