.membership-page, .membership-confirmation { --member-navy:#102e63; --member-blue:#24519f; --member-mint:#58d9cc; --member-coral:#ff735c; --member-cream:#f7f1e7; color:#15233a; overflow:clip; }
.membership-page h1, .membership-page h2, .membership-status-card h1 { font-family:var(--display); font-weight:400; letter-spacing:-.065em; }
.membership-kicker { color:var(--member-blue); font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.membership-hero { position:relative; overflow:hidden; background:var(--member-navy); color:#fff; }
.membership-hero::before { content:""; position:absolute; inset:-20%; background:radial-gradient(circle at 74% 44%, rgba(88,217,204,.24), transparent 28%), radial-gradient(circle at 15% 100%, rgba(255,115,92,.16), transparent 32%); }
.membership-hero-inner { position:relative; min-height:650px; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(270px,.65fr); align-items:center; gap:clamp(48px,8vw,130px); padding-block:clamp(90px,10vw,140px); }
.membership-hero .membership-kicker { color:var(--member-mint); }
.membership-hero h1 { max-width:900px; margin:22px 0 28px; font-size:clamp(64px,8.8vw,132px); line-height:.86; }
.membership-hero h1 span { color:var(--member-mint); }
.membership-hero h1 + p { max-width:670px; color:#dce8fb; font-size:clamp(18px,1.8vw,25px); line-height:1.45; }
.membership-hero aside { width:min(100%,330px); aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; justify-self:end; border:1px solid rgba(255,255,255,.5); border-radius:50%; text-align:center; transform:rotate(4deg); box-shadow:inset 0 0 0 14px rgba(255,255,255,.04); }
.membership-hero aside strong { color:var(--member-mint); font-family:var(--display); font-size:104px; font-weight:400; line-height:.8; }
.membership-hero aside span { margin-top:18px; font-size:15px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.membership-hero aside p { margin-top:8px; color:#c6d4ea; font-size:13px; }
.membership-hero-line { position:relative; width:max-content; padding:15px 0; background:var(--member-coral); color:#111; font-size:14px; font-weight:900; letter-spacing:.1em; white-space:nowrap; animation:membership-line 28s linear infinite; }
@keyframes membership-line { to { transform:translateX(-50%); } }

.membership-content { padding-block:clamp(80px,10vw,145px); }
.membership-content > header { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.55fr); align-items:end; gap:40px; margin-bottom:50px; }
.membership-content > header .membership-kicker { grid-column:1/-1; }
.membership-content > header h2 { font-size:clamp(58px,8vw,110px); line-height:.82; }
.membership-content > header > p:last-child { color:#63728a; font-size:17px; line-height:1.55; }
.cafedet-join-flow { overflow:hidden; border:1px solid #dbe3ed; border-radius:32px; background:#fff; box-shadow:0 34px 90px rgba(16,46,99,.1); }
.cafedet-join-progress { min-height:58px; padding:12px clamp(22px,4vw,52px); display:flex; align-items:center; gap:14px; background:#f4f8fd; color:#718096; font-size:12px; font-weight:800; }
.cafedet-join-progress span { display:flex; align-items:center; gap:9px; }
.cafedet-join-progress b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#8da0b8; font-size:11px; }
.cafedet-join-progress span.is-active { color:var(--member-navy); }
.cafedet-join-progress span.is-active b { color:var(--member-navy); background:var(--member-coral); box-shadow:0 0 0 4px rgba(255,115,92,.14); }
.cafedet-join-progress span.is-done b { color:var(--member-navy); background:var(--member-mint); }
.cafedet-join-progress i { width:clamp(30px,6vw,90px); height:1px; background:#cbd8e7; }
.cafedet-join-stage[hidden] { display:none; }
.cafedet-join-stage:not([hidden]) { animation:cafedet-join-stage-in .24s ease-out both; }
@keyframes cafedet-join-stage-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.cafedet-join-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; padding:clamp(30px,5vw,52px); }
.cafedet-join-fields label { min-width:0; display:grid; gap:8px; }
.cafedet-join-fields label > span { color:var(--member-navy); font-size:13px; font-weight:800; }
.cafedet-join-fields input { width:100%; min-height:54px; padding:14px 16px; border:1px solid #cad6e5; border-radius:13px; background:#fbfdff; color:#15233a; font:inherit; font-size:16px; outline:0; transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }
.cafedet-join-fields input:focus { border-color:var(--member-blue); background:#fff; box-shadow:0 0 0 4px rgba(36,81,159,.12); }
.cafedet-join-validity { margin:0 clamp(30px,5vw,52px) clamp(30px,4vw,44px); padding:22px 24px; display:grid; gap:7px; border:1px solid #b9d7d2; border-radius:18px; background:#edf9f7; color:var(--member-navy); }
.cafedet-join-validity span { color:#24786d; font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.cafedet-join-validity strong { font-size:clamp(18px,2vw,24px); line-height:1.3; }
.cafedet-join-validity p { margin:0; color:#5b6f79; font-size:13px; line-height:1.5; }
.cafedet-join-next { padding:0 clamp(30px,5vw,52px) clamp(28px,4vw,42px); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cafedet-join-next small { color:#718096; font-size:12px; font-weight:800; }
.cafedet-join-next button { min-height:54px; padding:12px 24px; display:inline-flex; align-items:center; justify-content:center; gap:16px; border:0; border-radius:999px; color:#fff; background:var(--member-blue); font:inherit; font-size:14px; font-weight:900; cursor:pointer; }
.cafedet-join-next button:hover { background:var(--member-navy); }
.cafedet-join-next button:focus-visible { outline:3px solid var(--member-mint); outline-offset:3px; }
.cafedet-join-next svg { width:21px; }
.cafedet-join-next-split { padding-top:18px; }
.cafedet-join-next .cafedet-join-back { color:var(--member-blue); background:#fff; border:1px solid #b8c8dc; }
.cafedet-join-flow .cafedet-join-commitment { padding-top:clamp(28px,4vw,44px); }
.cafedet-join-flow .cafedet-join-commitment legend { display:grid; gap:6px; margin-bottom:24px; }
.cafedet-join-flow .cafedet-join-commitment legend > span { width:auto; height:auto; display:block; border:0; border-radius:0; color:var(--member-blue); font-size:11px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.cafedet-join-flow .cafedet-join-commitment legend > strong { font-size:clamp(21px,2.4vw,30px); line-height:1.2; letter-spacing:-.025em; }
.cafedet-join-flow .cafedet-join-commitment .membership-consents { grid-template-columns:repeat(2,minmax(0,1fr)); }
.cafedet-join-flow .cafedet-join-commitment .membership-consents label { min-height:0; padding:13px 14px; }
.membership-form-progress { display:flex; align-items:center; gap:18px; padding:24px clamp(22px,4vw,52px); background:#f4f8fd; color:#65748a; font-size:13px; font-weight:700; }
.membership-form-progress button { min-width:0; display:flex; align-items:center; gap:9px; padding:0; color:inherit; background:transparent; border:0; font:inherit; cursor:pointer; }
.membership-form-progress button:disabled { cursor:default; }
.membership-form-progress button > span { white-space:nowrap; }
.membership-form-progress strong { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--member-blue); color:#fff; font-size:12px; }
.membership-form-progress button:not(:last-child)::after { content:""; width:clamp(24px,5vw,90px); height:1px; margin-left:9px; background:#cbd8e7; }
.membership-form-progress button.is-active { color:var(--member-navy); }
.membership-form-progress button.is-active strong { background:var(--member-coral); color:var(--member-navy); box-shadow:0 0 0 5px rgba(255,115,92,.14); }
.membership-form-progress button.is-done strong { background:var(--member-mint); color:var(--member-navy); }
.cafedet-join-flow fieldset { min-width:0; margin:0; padding:clamp(30px,5vw,64px); border:0; border-bottom:1px solid #e1e7ef; }
.cafedet-join-flow fieldset[hidden], .membership-submit-panel[hidden] { display:none; }
.cafedet-join-flow fieldset:focus { outline:none; }
.cafedet-join-flow legend { width:100%; display:flex; align-items:center; gap:18px; margin-bottom:32px; color:var(--member-navy); }
.cafedet-join-flow legend > span { width:44px; height:44px; display:grid; place-items:center; border:1px solid #b8c8dc; border-radius:50%; color:var(--member-blue); font-size:12px; font-weight:800; }
.cafedet-join-flow legend div { display:grid; gap:4px; }
.cafedet-join-flow legend strong { font-family:var(--display); font-size:32px; font-weight:400; letter-spacing:-.035em; }
.cafedet-join-flow legend small { color:#78869a; font-size:13px; }
.membership-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
.membership-grid label { min-width:0; display:grid; gap:8px; }
.membership-grid label.wide { grid-column:1/-1; }
.membership-grid label > span { color:var(--member-navy); font-size:13px; font-weight:800; }
.membership-grid label em { color:#7a8799; font-size:11px; font-style:normal; font-weight:500; }
.membership-grid input { width:100%; min-height:54px; padding:14px 16px; border:1px solid #cad6e5; border-radius:13px; background:#fbfdff; color:#15233a; font:inherit; font-size:16px; outline:0; transition:border-color 180ms ease,box-shadow 180ms ease,background 180ms ease; }
.membership-grid input:focus { border-color:var(--member-blue); background:#fff; box-shadow:0 0 0 4px rgba(36,81,159,.12); }
.membership-honeypot { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.membership-consents { display:grid; gap:12px; }
.membership-consents label { min-height:58px; display:grid; grid-template-columns:24px 1fr; align-items:start; gap:14px; padding:16px; border:1px solid #d8e1ec; border-radius:14px; color:#36475f; cursor:pointer; transition:border-color 180ms ease,background 180ms ease; }
.membership-consents label:has(input:checked) { border-color:#5a8dcc; background:#f2f8ff; }
.membership-consents input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--member-blue); }
.membership-consents span { font-size:14px; line-height:1.55; }
.membership-signature { overflow:hidden; border:1px solid #c8d5e4; border-radius:18px; background:linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(0deg,#eef3f8 0,#eef3f8 1px,transparent 1px,transparent 28px); }
.membership-signature canvas { width:100%; height:210px; display:block; background:repeating-linear-gradient(0deg,transparent 0,transparent 27px,#edf2f7 28px); cursor:crosshair; touch-action:none; }
.membership-signature > div { min-height:50px; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:10px 16px; border-top:1px solid #dce4ed; background:#f7fafd; color:#68788d; font-size:12px; font-weight:700; }
.membership-signature button { min-height:36px; padding:6px 14px; border:1px solid #b9c8da; border-radius:999px; background:#fff; color:var(--member-blue); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.membership-step-actions { margin-top:28px; padding-top:20px; display:flex; align-items:center; justify-content:flex-end; gap:14px; border-top:1px solid #e1e7ef; }
.membership-step-actions > span { margin-right:auto; color:#718096; font-size:12px; font-weight:800; }
.membership-step-actions > button { min-height:48px; display:inline-flex; align-items:center; justify-content:center; gap:13px; padding:10px 20px; border:0; border-radius:999px; background:var(--member-blue); color:#fff; font:inherit; font-size:13px; font-weight:900; cursor:pointer; }
.membership-step-actions > button.is-back { color:var(--member-blue); background:#eef4fb; }
.membership-step-actions svg { width:20px; height:20px; }
.membership-submit-panel { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:28px; padding:clamp(28px,4vw,52px); background:var(--member-navy); color:#fff; }
.membership-submit-panel > div { display:grid; grid-template-columns:auto auto; align-items:end; justify-content:start; gap:4px 20px; }
.membership-submit-panel > div span { grid-column:1/-1; color:var(--member-mint); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.membership-submit-panel > div strong { font-family:var(--display); font-size:62px; font-weight:400; line-height:1; }
.membership-submit-panel > div small { max-width:170px; padding-bottom:7px; color:#bdcce1; line-height:1.4; }
.membership-submit-panel > button { min-height:62px; display:flex; align-items:center; justify-content:center; gap:14px; padding:16px 24px; border:0; border-radius:999px; background:var(--member-mint); color:#0d2c53; font:inherit; font-weight:900; cursor:pointer; transition:transform 180ms ease,background 180ms ease; }
.membership-submit-panel > button:hover:not(:disabled) { transform:translateY(-2px); background:#7be7dc; }
.membership-submit-panel > button:disabled { opacity:.58; cursor:wait; }
.membership-submit-panel svg { width:22px; height:22px; }
.membership-submit-panel .cafedet-join-back { min-height:48px; padding:10px 18px; border:1px solid #b8c8dc; border-radius:999px; color:var(--member-blue); background:#fff; font:inherit; font-size:13px; font-weight:900; cursor:pointer; }
.membership-form-message { min-height:0; margin:0; padding:0 clamp(22px,4vw,52px); background:var(--member-navy); color:#fff; font-size:14px; font-weight:700; }
.membership-form-message.is-visible { padding-bottom:20px; }
.membership-retry { margin:18px clamp(22px,4vw,52px) 0; min-height:48px; padding:12px 18px; border:1px solid var(--member-blue); border-radius:999px; background:#fff; color:var(--member-blue); font:inherit; font-weight:800; cursor:pointer; }
.membership-security { padding:24px clamp(22px,4vw,52px) 30px; color:#66758a; font-size:12px; line-height:1.55; }
.membership-privacy { padding-block:clamp(80px,9vw,130px); background:var(--member-cream); }
.membership-privacy .container { display:grid; grid-template-columns:130px minmax(0,1fr); gap:clamp(30px,7vw,100px); }
.membership-privacy .container > span { color:var(--member-blue); font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.membership-privacy h2 { font-size:clamp(54px,7vw,98px); line-height:.88; }
.membership-privacy p { max-width:760px; margin-top:28px; color:#5e665f; font-size:17px; line-height:1.65; }

.membership-confirmation { min-height:72vh; display:grid; place-items:center; padding:130px 20px 90px; background:linear-gradient(145deg,#edf8f7,#f6f8fc); }
.membership-status-card { width:min(100%,720px); padding:clamp(34px,6vw,72px); border:1px solid #d3dfeb; border-radius:32px; background:#fff; text-align:center; box-shadow:0 34px 90px rgba(16,46,99,.12); }
.membership-status-icon { width:74px; height:74px; display:grid; place-items:center; margin:0 auto 26px; border-radius:50%; background:#e9f0fa; color:var(--member-blue); font-family:var(--display); font-size:42px; }
.membership-status-card.is-paid .membership-status-icon { background:#dff8f3; color:#16715f; }
.membership-status-card h1 { margin:12px 0 20px; color:var(--member-navy); font-size:clamp(58px,8vw,92px); line-height:.9; }
.membership-status-card > p:not(.membership-kicker):not(.membership-reference) { max-width:520px; margin:18px auto 0; color:#5f6e82; line-height:1.6; }
.membership-reference { display:inline-flex; gap:8px; padding:9px 14px; border-radius:999px; background:#f0f5fb; color:#52627a; font-size:13px; }
.membership-status-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:30px; }
.membership-status-actions button, .membership-status-actions a { min-height:48px; display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; border:1px solid var(--member-blue); border-radius:999px; background:#fff; color:var(--member-blue); font:inherit; font-weight:800; cursor:pointer; }
.membership-status-actions button:first-child { background:var(--member-blue); color:#fff; }

@media (max-width:800px) {
  .membership-hero-inner { min-height:680px; grid-template-columns:1fr; align-content:center; padding-bottom:210px; }
  .membership-hero aside { position:absolute; right:20px; bottom:45px; width:170px; }
  .membership-hero aside strong { font-size:62px; }
  .membership-hero aside span { margin-top:10px; font-size:10px; }
  .membership-hero aside p { font-size:10px; }
  .membership-content > header { grid-template-columns:1fr; }
  .membership-content > header .membership-kicker { grid-column:auto; }
  .membership-form-progress { overflow-x:auto; }
  .membership-form-progress button:not(:last-child)::after { width:26px; }
  .membership-submit-panel { grid-template-columns:1fr; }
  .cafedet-join-fields { grid-template-columns:1fr; }
  .cafedet-join-flow .cafedet-join-commitment .membership-consents { grid-template-columns:1fr; }
}
@media (max-width:560px) {
  .membership-hero h1 { font-size:clamp(52px,15.5vw,68px); letter-spacing:-.075em; }
  .membership-hero h1 span { display:block; }
  .membership-content { padding-block:72px; }
  .membership-grid { grid-template-columns:1fr; }
  .membership-grid label.wide { grid-column:auto; }
  .cafedet-join-flow { margin-inline:-8px; border-radius:20px; }
  .cafedet-join-fields { padding:16px 16px 14px; gap:10px; }
  .cafedet-join-fields label { gap:5px; }
  .cafedet-join-fields input { min-height:46px; padding:10px 13px; }
  .cafedet-join-validity { margin:0 16px 14px; padding:13px 14px; gap:3px; }
  .cafedet-join-validity strong { font-size:16px; }
  .cafedet-join-validity p { display:none; }
  .cafedet-join-flow .cafedet-join-commitment { padding:16px; }
  .cafedet-join-flow .cafedet-join-commitment legend { margin-bottom:12px; }
  .cafedet-join-flow .cafedet-join-commitment legend > strong { font-size:19px; }
  .cafedet-join-progress { min-height:48px; padding:8px 14px; justify-content:space-between; font-size:9px; }
  .cafedet-join-progress b { width:24px; height:24px; }
  .cafedet-join-progress span { gap:5px; }
  .cafedet-join-progress span:not(.is-active):not(.is-done) { color:transparent; }
  .cafedet-join-progress span:not(.is-active):not(.is-done) b { color:#fff; }
  .cafedet-join-progress i { flex:1; min-width:16px; }
  .cafedet-join-next { padding:0 16px 16px; }
  .cafedet-join-next-split { padding-top:12px; }
  .cafedet-join-next-split small { display:none; }
  .cafedet-join-next-split .cafedet-join-back { min-width:0; }
  .cafedet-join-next button { min-width:140px; min-height:48px; }
  .cafedet-join-flow .cafedet-join-commitment .membership-consents { gap:6px; }
  .cafedet-join-flow .cafedet-join-commitment .membership-consents label { padding:8px 10px; font-size:11px; line-height:1.3; }
  .membership-submit-panel { grid-template-columns:auto 1fr; gap:14px; }
  .membership-submit-panel > div { grid-column:1/-1; grid-row:1; }
  .membership-submit-panel .cafedet-join-back { grid-column:1; grid-row:2; }
  .membership-submit-panel > button:last-child { grid-column:2; grid-row:2; }
  .membership-form-progress { justify-content:space-between; gap:6px; overflow:hidden; padding:16px; font-size:10px; }
  .membership-form-progress button { min-width:0; gap:5px; }
  .membership-form-progress button > span { white-space:normal; }
  .membership-form-progress strong { width:24px; height:24px; }
  .membership-form-progress button:not(:last-child)::after { display:none; }
  .cafedet-join-flow fieldset { padding:28px 18px; }
  .cafedet-join-flow legend strong { font-size:27px; }
  .membership-submit-panel { padding:26px 18px; }
  .membership-submit-panel > button { width:100%; }
  .membership-privacy .container { grid-template-columns:1fr; }
  .membership-signature canvas { height:180px; }
  .membership-step-actions { flex-wrap:wrap; }
  .membership-step-actions > span { order:-1; width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .membership-hero-line { animation:none; }
  .membership-submit-panel > button { transition:none; }
  .cafedet-join-stage:not([hidden]) { animation:none; }
}