/* Beyond Care v103 — editorial purchase journey.
   Visual-only rebuild of signup.html. IDs/data attributes remain unchanged so
   the existing GoCardless/signup flow continues to work. */
:root{
  --bc103-paper:#f7f1e8;
  --bc103-card:#faf6ee;
  --bc103-ink:#11100f;
  --bc103-muted:#4a433c;
  --bc103-red:#d7181f;
  --bc103-line:rgba(51,39,30,.18);
  --bc103-serif:'Vidaloka',Georgia,'Times New Roman',serif;
  --bc103-sans:'Inter',Arial,sans-serif;
  --bc103-hand:'Caveat','Segoe Print',cursive;
}

body.bc-signup{
  background-color:var(--bc103-paper)!important;
  background-image:url('./assets/diary-paper-texture.jpg')!important;
  background-size:1536px auto!important;
  background-repeat:repeat-y!important;
  background-position:center top!important;
  color:var(--bc103-ink)!important;
  font-family:var(--bc103-serif)!important;
  letter-spacing:0!important;
}
body.bc-signup .bc-shell{
  width:min(calc(100% - 180px),1740px)!important;
  max-width:none!important;
  margin:0 auto!important;
  padding:0!important;
}

/* Header — same proportion and typography as the public site, but deliberately
   distraction-free during checkout. */
body.bc-signup .bc-masthead{
  height:65px!important;
  padding:0!important;
  border-bottom:1px solid rgba(52,40,30,.14)!important;
  background:rgba(249,245,237,.86)!important;
  display:flex!important;
  align-items:center!important;
}
body.bc-signup .bc-masthead-inner{height:100%!important;display:flex!important;align-items:center!important}
body.bc-signup a.wordmark{
  color:var(--bc103-ink)!important;
  font:400 31px/1 var(--bc103-serif)!important;
  letter-spacing:-.025em!important;
  text-decoration:none!important;
  position:relative!important;
}
body.bc-signup a.wordmark span{color:inherit!important;font:inherit!important;position:relative!important}
body.bc-signup a.wordmark span::after{
  content:'';position:absolute;left:2px;bottom:-10px;width:45px;height:2px;
  background:var(--bc103-red);transform:rotate(-3deg);
}
body.bc-signup .bc-nav{margin-left:auto!important}
body.bc-signup .bc-nav-link{
  color:var(--bc103-ink)!important;text-decoration:none!important;
  font:400 14px/1 var(--bc103-serif)!important;
}
body.bc-signup .bc-nav-link:hover{color:var(--bc103-red)!important}

body.bc-signup main{padding:22px 0 42px!important}

/* Intro becomes a proper editorial hero rather than a narrow form heading. */
body.bc-signup .bc-head{
  max-width:none!important;
  min-height:285px!important;
  margin:0 0 8px!important;
  display:grid!important;
  grid-template-columns:minmax(560px,43%) minmax(0,57%)!important;
  align-items:center!important;
  gap:34px!important;
}
body.bc-signup .bc-head-copy{padding:16px 0 12px!important;position:relative!important;z-index:2!important}
body.bc-signup .bc-eyebrow{
  display:inline-block!important;
  margin:0 0 25px!important;
  color:var(--bc103-ink)!important;
  font:600 19px/1 var(--bc103-hand)!important;
  letter-spacing:.14em!important;
  text-transform:uppercase!important;
  position:relative!important;
}
body.bc-signup .bc-eyebrow::after{
  content:'';position:absolute;left:0;bottom:-10px;width:210px;height:2px;
  background:var(--bc103-red);transform:rotate(-.8deg);
}
body.bc-signup h1{
  margin:0!important;
  max-width:730px!important;
  font:400 clamp(58px,4.25vw,78px)/.98 var(--bc103-serif)!important;
  letter-spacing:-.042em!important;
  color:var(--bc103-ink)!important;
}
body.bc-signup h1 em{
  display:block!important;
  margin-top:4px!important;
  color:var(--bc103-red)!important;
  font-style:italic!important;
  font-weight:400!important;
}
body.bc-signup .bc-lede{
  margin:26px 0 0!important;
  max-width:690px!important;
  color:#3e3832!important;
  font:400 17px/1.5 Georgia,'Times New Roman',serif!important;
}
body.bc-signup .bc-head-art{
  min-width:0!important;height:250px!important;
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  pointer-events:none!important;overflow:visible!important;
}
body.bc-signup .bc-head-art img{
  display:block!important;
  width:min(100%,820px)!important;height:auto!important;max-height:245px!important;
  object-fit:contain!important;object-position:right center!important;
  background:transparent!important;mix-blend-mode:multiply!important;
}

/* Progress rail: editorial and integrated, not app-like. */
body.bc-signup .bc-steps{
  counter-reset:bcstep!important;
  display:flex!important;align-items:center!important;gap:0!important;
  margin:0 0 18px!important;padding:0 0 15px!important;
  border-bottom:1px solid var(--bc103-line)!important;
  list-style:none!important;
}
body.bc-signup .bc-steps li{
  position:relative!important;
  min-width:180px!important;
  display:flex!important;align-items:center!important;gap:10px!important;
  color:#746c64!important;
  font:400 14px/1 var(--bc103-serif)!important;
}
body.bc-signup .bc-steps li::before{
  content:counter(bcstep)!important;counter-increment:bcstep!important;
  width:27px!important;height:27px!important;border-radius:50%!important;
  display:grid!important;place-items:center!important;
  border:1px solid rgba(51,39,30,.22)!important;background:rgba(250,246,238,.55)!important;
  color:#6d655e!important;font:400 13px/1 var(--bc103-serif)!important;
}
body.bc-signup .bc-steps li:not(:last-child)::after{
  content:''!important;width:58px!important;height:1px!important;margin-left:13px!important;
  background:rgba(51,39,30,.18)!important;
}
body.bc-signup .bc-steps li[aria-current='step']{color:var(--bc103-ink)!important}
body.bc-signup .bc-steps li[aria-current='step']::before{
  background:var(--bc103-red)!important;border-color:var(--bc103-red)!important;color:#fff!important;
}
body.bc-signup .bc-steps li.done::before{
  background:transparent!important;border-color:var(--bc103-red)!important;color:var(--bc103-red)!important;
}

/* Main purchase frame. */
body.bc-signup .bc-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 385px!important;
  gap:26px!important;
  align-items:start!important;
}
body.bc-signup .bc-card{
  padding:30px 32px!important;
  border:1px solid rgba(64,48,36,.15)!important;
  border-radius:5px!important;
  background:rgba(250,246,238,.76)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  box-shadow:0 7px 18px rgba(57,43,31,.045)!important;
}
body.bc-signup .bc-step-title{
  margin:0 0 8px!important;
  color:var(--bc103-ink)!important;
  font:400 31px/1.08 var(--bc103-serif)!important;
  letter-spacing:-.025em!important;
}
body.bc-signup .bc-step-note{
  margin:0 0 24px!important;
  max-width:860px!important;
  color:#514941!important;
  font:400 15px/1.48 Georgia,'Times New Roman',serif!important;
}

/* Step one intentionally uses the width: three routes, three editorial panels. */
body.bc-signup .bc-choices{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
  margin:0!important;
}
body.bc-signup .bc-choice{
  position:relative!important;
  min-height:230px!important;
  display:flex!important;flex-direction:column!important;
  padding:24px 22px 21px!important;
  border:1px solid rgba(64,48,36,.16)!important;
  border-radius:4px!important;
  background:rgba(255,255,255,.16)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
body.bc-signup .bc-choice::before{
  content:'01';
  display:block;margin:0 0 22px;color:var(--bc103-red);
  font:400 22px/1 var(--bc103-serif);
}
body.bc-signup .bc-choice:nth-child(2)::before{content:'02'}
body.bc-signup .bc-choice:nth-child(3)::before{content:'03'}
body.bc-signup .bc-choice:has(input:checked){
  border-color:var(--bc103-red)!important;
  box-shadow:inset 0 0 0 1px rgba(215,24,31,.12)!important;
  background:rgba(255,255,255,.28)!important;
}
body.bc-signup .bc-choice:has(input:checked)::after{
  content:'Selected';position:absolute;right:18px;top:20px;
  color:var(--bc103-red);font:500 11px/1 var(--bc103-sans);letter-spacing:.08em;text-transform:uppercase;
}
body.bc-signup .bc-choice-name{
  display:block!important;
  color:var(--bc103-ink)!important;
  font:400 20px/1.13 var(--bc103-serif)!important;
  letter-spacing:-.02em!important;
}
body.bc-signup .bc-choice-price{
  display:block!important;
  margin:12px 0 0!important;
  color:var(--bc103-red)!important;
  white-space:normal!important;
  font:600 13px/1.35 var(--bc103-sans)!important;
  letter-spacing:0!important;
}
body.bc-signup .bc-choice-copy{
  display:block!important;
  margin:14px 0 0!important;
  color:#514941!important;
  font:400 14px/1.48 Georgia,'Times New Roman',serif!important;
}
body.bc-signup .bc-choice-compare{display:none!important}

/* Fields keep the same function but inherit the calmer editorial geometry. */
body.bc-signup [data-panel='details']{max-width:790px!important}
body.bc-signup .bc-fields{gap:16px!important;margin-bottom:24px!important}
body.bc-signup .bc-field label{
  margin:0 0 7px!important;color:#2f2a26!important;
  font:400 15px/1.2 var(--bc103-serif)!important;
}
body.bc-signup .bc-field .hint{color:#766e66!important;font:400 12.5px/1.45 var(--bc103-sans)!important}
body.bc-signup .bc-field input,
body.bc-signup .bc-field select{
  height:50px!important;border:1px solid rgba(55,43,33,.23)!important;border-radius:3px!important;
  background:rgba(255,255,255,.36)!important;color:var(--bc103-ink)!important;
  font:400 15px/1 var(--bc103-sans)!important;
}
body.bc-signup .bc-field input:focus,
body.bc-signup .bc-field select:focus{border-color:var(--bc103-red)!important;box-shadow:0 0 0 2px rgba(215,24,31,.08)!important}
body.bc-signup .bc-seatbtn{
  width:50px!important;height:50px!important;border-radius:3px!important;
  background:rgba(255,255,255,.25)!important;border-color:rgba(55,43,33,.23)!important;
}
body.bc-signup .bc-preset{
  padding:7px 13px!important;border-radius:3px!important;background:transparent!important;
  border-color:rgba(55,43,33,.20)!important;color:#403a35!important;
}

/* Summary reads like a companion editorial panel, not a floating SaaS card. */
body.bc-signup .bc-summary{position:sticky!important;top:82px!important;padding:28px 28px 30px!important}
body.bc-signup .bc-summary h2{
  display:inline-block!important;position:relative!important;
  margin:0 0 31px!important;color:var(--bc103-ink)!important;
  font:600 18px/1 var(--bc103-hand)!important;
  letter-spacing:.10em!important;text-transform:uppercase!important;
}
body.bc-signup .bc-summary h2::after{
  content:'';position:absolute;left:0;bottom:-10px;width:148px;height:2px;
  background:var(--bc103-red);transform:rotate(-1deg);
}
body.bc-signup .bc-lines{gap:0!important;margin:0 0 22px!important}
body.bc-signup .bc-lines div{
  display:grid!important;grid-template-columns:1fr minmax(120px,1.05fr)!important;
  gap:18px!important;align-items:start!important;
  padding:11px 0!important;border-bottom:1px solid rgba(51,39,30,.12)!important;
  font-size:14px!important;
}
body.bc-signup .bc-lines dt{color:#5b534c!important;font:400 13px/1.35 var(--bc103-sans)!important}
body.bc-signup .bc-lines dd{margin:0!important;color:var(--bc103-ink)!important;text-align:right!important;font:400 14px/1.3 var(--bc103-serif)!important}
body.bc-signup .bc-total{padding-top:19px!important;border-top:0!important}
body.bc-signup .bc-total-label{margin:0 0 7px!important;color:#5d554e!important;font:400 13px/1 var(--bc103-sans)!important}
body.bc-signup .bc-total-value{
  margin:0!important;color:var(--bc103-ink)!important;
  font:400 54px/.94 var(--bc103-serif)!important;letter-spacing:-.035em!important;
}
body.bc-signup .bc-total-value small{
  display:block!important;margin-top:8px!important;color:#544c45!important;
  font:400 12px/1.35 var(--bc103-sans)!important;letter-spacing:0!important;
}
body.bc-signup .bc-summary-note{margin:20px 0 0!important;color:#736b63!important;font:400 12px/1.48 var(--bc103-sans)!important}

body.bc-signup .bc-actions{gap:16px!important}
body.bc-signup .bc-cta{
  height:49px!important;padding:0 27px!important;border:1px solid var(--bc103-red)!important;border-radius:4px!important;
  background:var(--bc103-red)!important;color:#fff!important;box-shadow:none!important;
  font:400 15px/1 var(--bc103-serif)!important;letter-spacing:0!important;
}
body.bc-signup .bc-cta:hover{background:#c7151c!important;box-shadow:none!important;transform:translateY(-1px)!important}
body.bc-signup .bc-back{color:#3f3933!important;font:400 14px/1 var(--bc103-serif)!important}
body.bc-signup .bc-arrow{width:18px!important;height:18px!important}

body.bc-signup .bc-message{border-radius:3px!important;font:400 14px/1.45 var(--bc103-sans)!important}
body.bc-signup .bc-done{max-width:900px!important}
body.bc-signup .bc-done h2{font:400 46px/1 var(--bc103-serif)!important}
body.bc-signup .bc-foot{
  width:min(calc(100% - 180px),1740px)!important;
  padding:8px 0 34px!important;color:#6f675f!important;
  font:400 12.5px/1.45 var(--bc103-sans)!important;
}
body.bc-signup .bc-foot p{margin:0!important;padding-top:16px!important;border-top:1px solid rgba(51,39,30,.14)!important}
body.bc-signup .bc-foot a{color:var(--bc103-red)!important}

@media(max-width:1320px){
  body.bc-signup .bc-shell{width:min(calc(100% - 84px),1220px)!important}
  body.bc-signup .bc-head{grid-template-columns:minmax(470px,46%) 1fr!important}
  body.bc-signup h1{font-size:60px!important}
  body.bc-signup .bc-layout{grid-template-columns:minmax(0,1fr) 340px!important}
  body.bc-signup .bc-choices{grid-template-columns:1fr!important}
  body.bc-signup .bc-choice{min-height:0!important}
  body.bc-signup .bc-choice::before{margin-bottom:12px!important}
}
@media(max-width:980px){
  body.bc-signup .bc-shell{width:min(calc(100% - 40px),900px)!important}
  body.bc-signup .bc-masthead{height:auto!important;padding:16px 0!important}
  body.bc-signup .bc-head{grid-template-columns:1fr!important;min-height:auto!important;gap:8px!important}
  body.bc-signup .bc-head-art{height:auto!important;justify-content:flex-start!important;margin:0 0 10px!important}
  body.bc-signup .bc-head-art img{width:min(100%,760px)!important;max-height:none!important}
  body.bc-signup .bc-layout{grid-template-columns:1fr!important}
  body.bc-signup .bc-summary{position:static!important}
  body.bc-signup .bc-steps li{min-width:auto!important;flex:1!important}
  body.bc-signup .bc-steps li:not(:last-child)::after{display:none!important}
}
@media(max-width:620px){
  body.bc-signup .bc-shell{width:calc(100% - 28px)!important}
  body.bc-signup main{padding-top:10px!important}
  body.bc-signup .bc-head-copy{padding-top:8px!important}
  body.bc-signup h1{font-size:49px!important}
  body.bc-signup .bc-lede{font-size:15px!important}
  body.bc-signup .bc-card{padding:22px 18px!important}
  body.bc-signup .bc-step-title{font-size:27px!important}
  body.bc-signup .bc-steps{gap:8px!important}
  body.bc-signup .bc-steps li{font-size:12px!important;gap:6px!important}
  body.bc-signup .bc-steps li::before{width:23px!important;height:23px!important;font-size:11px!important}
  body.bc-signup .bc-choice-name{font-size:18px!important}
  body.bc-signup .bc-cta{width:100%!important;justify-content:center!important}
  body.bc-signup .bc-actions{flex-direction:column-reverse!important;align-items:stretch!important}
  body.bc-signup .bc-foot{width:calc(100% - 28px)!important}
}
