/* The onboarding pages: the connect page's palette (navy, ink, gold, blue) on system type, because the policy of
   these pages allows no font and no asset from another origin. 16px is the smallest type on the page: a partner
   reads an agreement here. */
:root{--navy:#0b1a2e;--ink:#eaf1fb;--mute:rgba(234,241,251,.72);--gold:#e4c877;--blue:#78beff;--card:rgba(255,255,255,.04);--line:rgba(255,255,255,.14);--field:rgba(255,255,255,.07);--red:#ffb3b3;--green:#9fe3b8;--paper:#fff;--paper-ink:#16202b}
*{box-sizing:border-box}
html,body{margin:0;background:var(--navy);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.55}
/* the pages show and hide blocks with the hidden attribute only (no inline style under the policy); it wins over
   every display rule below */
[hidden]{display:none !important}
header{padding:40px 6vw 20px;border-bottom:1px solid var(--line)}
.kicker .kmark{width:28px;height:28px;vertical-align:-9px;margin-right:10px;color:var(--blue)}
.kicker{font-size:16px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);font-weight:500}
h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:clamp(30px,4.5vw,48px);line-height:1.1;margin:.3em 0 .2em;letter-spacing:.01em}
.lead{max-width:760px;font-size:18px;color:var(--mute);margin:.2em 0 0}
main{padding:20px 6vw 80px;max-width:900px}
h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:26px;margin:40px 0 8px}
h3{font-size:16px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:24px 0 8px}
p{margin:.55em 0}
a{color:var(--blue)}
.small{font-size:16px;color:var(--mute)}
.mono{font-family:ui-monospace,Menlo,monospace;overflow-wrap:anywhere}
footer{padding:28px 6vw 48px;border-top:1px solid var(--line);color:var(--mute);font-size:16px}

/* the one region every answer of the API is written to; the screen reader hears it */
.message{min-height:1.5em;margin:12px 0 0;padding:0}
.message.is-error{color:var(--red)}
.message.is-ok{color:var(--green)}

fieldset{border:1px solid var(--line);border-radius:14px;padding:18px 22px 22px;margin:22px 0;background:var(--card)}
legend{padding:0 8px;font-family:Georgia,"Times New Roman",serif;font-size:22px}
.field{margin:14px 0}
.field > label, .field > .label{display:block;font-weight:500;margin-bottom:6px}
.hint{display:block;font-size:16px;color:var(--mute);margin:4px 0 0}
input[type=text],input[type=email],input[type=tel],select{display:block;width:100%;max-width:560px;font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
select{appearance:auto}
select option{color:var(--paper-ink);background:var(--paper)}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,select:focus,button:focus,a:focus,.text:focus,input[type=checkbox]:focus,input[type=radio]:focus{outline:2px solid var(--gold);outline-offset:2px}
input[readonly]{color:var(--mute)}
input[aria-invalid=true],select[aria-invalid=true]{border-color:var(--red)}
/* a control and its label share one line and the label wraps BESIDE the control, never under it; the example line
   sits under the label at the label's own indent (David 10-26-26, two iPhone shots: a wrapped label had dropped the
   radio or checkbox onto a line of its own, and the examples indented unevenly). A two-column grid, not a wrapping
   flex row, so the geometry is the same at 390 px and on a desktop. */
.tick{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:10px;row-gap:4px;align-items:start;margin:12px 0;padding:2px 0;cursor:pointer}
.tick > input{grid-column:1;grid-row:1;margin:3px 0 0;width:18px;height:18px;accent-color:var(--gold)}
.tick > span:not(.hint){grid-column:2;grid-row:1;min-width:0;overflow-wrap:break-word}
.tick > .hint{grid-column:2;grid-row:2;margin:0}
.error{color:var(--red);margin:6px 0 0;font-size:16px}
.row{border:1px solid var(--line);border-radius:10px;padding:12px 16px 16px;margin:12px 0}
.row .field{margin:10px 0}
.row-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.row-head .label{font-weight:600;color:var(--gold)}
.actions{margin:18px 0 0;display:flex;gap:12px;flex-wrap:wrap;align-items:center}

button{font:inherit;font-size:16px;border-radius:8px;padding:10px 18px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink)}
button.primary{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:600}
button.danger{border-color:var(--red);color:var(--red)}
button[disabled]{opacity:.5;cursor:not-allowed}
button.linklike{border:0;padding:0;background:none;color:var(--blue);text-decoration:underline}

/* the pinned text, on paper: the same shapes as the public terms page (one element per line) */
.text{background:var(--paper);color:var(--paper-ink);border-radius:10px;padding:1rem 1.25rem;max-height:60vh;overflow:auto;line-height:1.6}
.text h1{font-family:inherit;font-size:1.5rem;line-height:1.3;margin:0 0 .25rem;letter-spacing:0}
.text h2{font-family:inherit;font-size:1.05rem;margin:1.6rem 0 .35rem;font-weight:600}
.text p{margin:.55rem 0}
.text ul{margin:.55rem 0;padding-left:1.25rem}
.text li{margin:.3rem 0}
.text .version{color:#4a5563;margin-top:0}
.text .check{padding-left:.25rem}
.summary{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 22px}
.summary h2{font-size:22px;margin:0 0 8px}
.summary ul{padding-left:1.1em;margin:.3em 0}
.summary li{margin:.4em 0}
.summary p{margin:.4em 0}
.sentinel{height:1px}

/* the onboarding record as the agreement page shows it */
.record dt{font-weight:600;margin-top:12px;color:var(--gold)}
.record dd{margin:2px 0 0;overflow-wrap:anywhere}
.record ul{margin:.2em 0;padding-left:1.1em}
.record li{margin:.3em 0}

.receipt-line{margin:14px 0}
.state{font-size:22px;margin:16px 0}
.key{font-family:ui-monospace,Menlo,monospace;font-size:16px;background:var(--paper);color:var(--paper-ink);border-radius:10px;padding:14px 16px;margin:4px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;user-select:all}
@media (max-width:600px){header{padding:28px 5vw 16px}main{padding:16px 5vw 60px}fieldset{padding:14px 14px 18px}legend{font-size:20px}.row{padding:12px 12px 14px}#intake .actions{flex-direction:column;align-items:stretch}#intake .actions button{width:100%}#intake .actions .small{text-align:center}.text{max-height:55vh}}
@media print{.text{max-height:none;overflow:visible}}

/* the two gates of the sign button as visible steps, and calls to action a reader cannot miss (David 10-09-26) */
.steps{margin:24px 0 8px}
.steplist{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:12px}
.step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:10px}
.step-no{flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);font-weight:600;display:flex;align-items:center;justify-content:center}
.step.done{border-color:var(--gold)}
.step.done .step-no{background:var(--gold);color:var(--navy)}
.step-state{display:block;margin-top:6px;color:var(--gold);font-weight:600}
.cta{display:inline-block;margin-top:10px;padding:10px 16px;border:1px solid var(--gold);border-radius:8px;color:var(--gold);font-weight:600;text-decoration:none}
.cta:hover{background:rgba(228,200,119,.12)}
button.primary.big{font-size:18px;padding:14px 24px;width:100%;max-width:420px}
.gate-note{font-weight:600;margin:10px 0 0}
@media (max-width:600px){button.primary.big{max-width:none}}

/* the mark in the kicker animates once on load (David 10-09-26: the animated logo belongs on these pages too); the
   same sequence as the app shell's theme.css: the M strokes draw node to node, the inner lines reach the core, the
   core blooms, then it rests. The policy allows no inline style, so the rules live here. Reduced motion: the resting
   mark. Classes inside the SVG: m-stroke s1..s4, m-inner, m-node n1..n4, m-halo, m-core. */
.mark-anim.play .m-stroke{stroke-dasharray:36;animation:m-draw-loop 7s cubic-bezier(.22,1,.36,1) infinite}
.mark-anim.play .m-stroke.s2{animation-delay:.12s}
.mark-anim.play .m-stroke.s3{animation-delay:.24s}
.mark-anim.play .m-stroke.s4{animation-delay:.36s}
.mark-anim.play .m-inner{stroke-dasharray:30;animation:m-draw-inner-loop 7s cubic-bezier(.22,1,.36,1) infinite}
.mark-anim.play .m-node{transform-origin:center;transform-box:fill-box;animation:m-pop .4s cubic-bezier(.22,1,.36,1) both,m-pulse 7s ease-in-out 1.2s infinite}
.mark-anim.play .m-node.n2{animation-delay:.12s,1.32s}
.mark-anim.play .m-node.n3{animation-delay:.24s,1.44s}
.mark-anim.play .m-node.n4{animation-delay:.36s,1.56s}
.mark-anim.play .m-core{transform-origin:center;transform-box:fill-box;animation:m-bloom .5s cubic-bezier(.22,1,.36,1) .8s both,m-breathe 3.5s ease-in-out 1.3s infinite}
.mark-anim.play .m-halo{transform-origin:center;transform-box:fill-box;animation:m-halo .9s ease-out .8s both,m-halo-breathe 3.5s ease-in-out 1.7s infinite}
@keyframes m-draw-loop{0%{stroke-dashoffset:36}9%{stroke-dashoffset:0}90%{stroke-dashoffset:0}100%{stroke-dashoffset:36}}
@keyframes m-draw-inner-loop{0%,7%{stroke-dashoffset:30}15%{stroke-dashoffset:0}90%{stroke-dashoffset:0}100%{stroke-dashoffset:30}}
@keyframes m-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes m-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
@keyframes m-bloom{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes m-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes m-halo{0%{opacity:0;transform:scale(.6)}60%{opacity:.5}100%{opacity:.16;transform:scale(1)}}
@keyframes m-halo-breathe{0%,100%{opacity:.14;transform:scale(1)}50%{opacity:.26;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){.mark-anim.play .m-stroke,.mark-anim.play .m-inner,.mark-anim.play .m-node,.mark-anim.play .m-core,.mark-anim.play .m-halo{animation:none}}