/* The two public membership pages — joining and paying. One sheet, so they cannot drift apart. */
:root { --paper:#F5F2EA; --card:#FFFDF8; --ink:#0F2029; --ink2:#3C4C55; --muted:#5F6E76;
	--line:rgba(15,32,41,.16); --accent:#1C8FD6; --green:#2D6A4F;
	--serif:'Instrument Serif',Georgia,serif; --sans:'Geist',system-ui,sans-serif; --mono:'Geist Mono',ui-monospace,monospace; }
*,*::before,*::after { box-sizing:border-box }
body { margin:0; background:var(--paper); color:var(--ink2); font-family:var(--sans); font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased }
.wrap { max-width:620px; margin:0 auto; padding:clamp(28px,6vh,64px) 20px 80px }
h1 { font-family:var(--serif); font-weight:400; color:var(--ink); font-size:clamp(32px,6vw,46px); line-height:1.08; margin:0 0 10px; text-wrap:balance }
.eyebrow { font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 16px }
.card { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; margin:22px 0 }
.says { background:var(--ink); color:#fff; border-radius:14px; padding:20px 22px; margin:0 0 22px }
.says b { display:block; font-family:var(--serif); font-size:26px; font-weight:400; line-height:1.2 }
.says span { display:block; color:rgba(255,255,255,.7); font-size:14px; margin-top:8px }
label { display:block; font-weight:600; color:var(--ink); margin:0 0 5px }
.f { margin-bottom:16px }
.f .hint { display:block; font-weight:400; font-size:13px; color:var(--muted); margin-top:4px }
input[type=text],input[type=email],select { width:100%; font:inherit; font-size:16px; padding:11px 13px; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--ink) }
input:focus,select:focus { outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent) }
.pick { display:grid; gap:10px }
.pick label { display:flex; gap:11px; align-items:flex-start; font-weight:500; background:#fff; border:1px solid var(--line); border-radius:11px; padding:13px 15px; cursor:pointer }
.pick label:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) }
.pick input { margin-top:4px }
.pick .n { font-weight:600; color:var(--ink) }
.pick .d { display:block; font-size:13.5px; color:var(--muted) }
button { font:inherit; font-weight:600; font-size:16px; background:var(--ink); color:#fff; border:0; border-radius:999px; padding:14px 26px; cursor:pointer; width:100% }
@media (hover: hover) {
	button:hover { background:#1B3846 }
}
.bad { background:#fcf0f1; border-left:3px solid #b32d2e; border-radius:0 8px 8px 0; padding:12px 16px; margin:0 0 20px; color:#7a1f21 }
.fine { font-size:13.5px; color:var(--muted) }
.done { text-align:center; padding:20px 0 }
.done .tick { width:54px; height:54px; border-radius:50%; background:var(--green); margin:0 auto 18px; display:grid; place-items:center }
.done .tick::after { content:''; width:18px; height:9px; border-left:3px solid #fff; border-bottom:3px solid #fff; transform:rotate(-45deg); margin-top:-4px }

/* Paying */
.rails { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 18px }
.rails a { display:block; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:11px; padding:12px 14px; color:var(--ink2) }
.rails a b { display:block; color:var(--ink); font-weight:600 }
.rails a span { font-size:13.5px; color:var(--muted) }
.rails a.on { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) }
.rails a:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
#pe { min-height:120px; margin:0 0 18px }
#pe-msg { color:#7a1f21; font-size:14px; margin:0 0 12px; min-height:1px }
button[disabled] { opacity:.6; cursor:progress }
.lines { width:100%; border-collapse:collapse; margin:0 0 6px; font-variant-numeric:tabular-nums }
.lines td { padding:6px 0; border-bottom:1px solid var(--line) }
.lines td:last-child { text-align:right }
.lines tr:last-child td { border-bottom:0; font-weight:600; color:var(--ink) }
.done .next { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin:18px auto 0; max-width:420px; font-size:15px }
.done .card-link { display:inline-block; margin-top:18px; background:var(--ink); color:#fff; text-decoration:none; font-weight:600; border-radius:999px; padding:12px 22px }
@media (max-width:420px) { .rails { grid-template-columns:1fr } }
/* 2.108.0: the offer as questions */
[data-choices] .ask { font-family:var(--serif); font-size:20px; margin:0 0 14px; color:var(--ink) }
[data-choices] .f label { display:block; font-weight:600; font-size:14px; margin-bottom:6px; color:var(--ink) }
[data-choices] select { appearance:none; -webkit-appearance:none; background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right:38px }
[data-choices] .says { margin:6px 0 18px }
.says em { display:inline-block; font-style:normal; font-size:12px; letter-spacing:.04em; text-transform:uppercase; background:rgba(255,255,255,.14); border-radius:99px; padding:2px 9px; margin-bottom:8px }
button[type=submit]:disabled { opacity:.5; cursor:not-allowed }
/* 2.108.2: whose offer this is */
.for { display:inline-block; font-size:14px; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:99px; padding:5px 12px; margin:-4px 0 16px }
.for b { color:var(--ink); font-weight:600 }
/* 2.109.4: joining, as one desktop form — sections on the left, the price and Continue held on the right */
.wrap--jn { max-width:1120px }
.jn-head { margin:0 0 18px }
.jn-head .eyebrow { margin-bottom:8px }
.jn-head h1 { font-size:clamp(30px,3.4vw,40px); margin:0 }
.jn { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:22px; align-items:start }
.jn-main { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:6px 24px }
.jn-sec { border:0; margin:0; padding:18px 0 16px; min-width:0 }
.jn-sec + .jn-sec { border-top:1px solid var(--line) }
.jn-sec legend { display:flex; align-items:center; gap:10px; float:left; width:100%; font-family:var(--serif); font-size:21px; color:var(--ink); margin:0 0 12px; padding:0 }
.jn-sec legend + * { clear:both }
.jn-sec legend span { display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; font-family:var(--mono); font-size:12px }
.jn-grid { display:grid; gap:12px 14px }
.jn-grid--2 { grid-template-columns:repeat(2,minmax(0,1fr)) }
.jn-grid--3 { grid-template-columns:repeat(3,minmax(0,1fr)) }
.jn .f { margin:0 }
.jn label { font-size:14px; font-weight:600; margin-bottom:5px }
.jn label i { font-style:normal; font-weight:400; color:var(--muted); margin-left:4px }
.jn input[type=text],.jn input[type=email],.jn select { padding:9px 12px; font-size:15px }
.jn .hint { font-size:13px; color:var(--muted); margin:8px 0 0 }
.jn .pick label { margin:0; padding:11px 13px; font-size:15px; line-height:1.35 }
.jn .pick .d { font-size:13px; font-weight:400; margin-top:2px }
.jn-sum { position:sticky; top:20px; background:var(--card); border:1px solid var(--line); border-radius:16px; padding:20px }
.jn-sum .eyebrow { margin:0 0 10px }
.jn-sum .says { margin:0 0 14px }
.jn-sum .fine { margin:10px 0 0; font-size:13px; line-height:1.45 }
.jn-sum .fine + .fine { margin-top:6px }
@media (max-width:860px) {
	.jn { grid-template-columns:minmax(0,1fr) }
	.jn-sum { position:static }
}
@media (max-width:620px) {
	.jn-grid--2,.jn-grid--3 { grid-template-columns:minmax(0,1fr) }
	.jn-main { padding:4px 18px }
}