/* Lewis Real Estate · Agent Onboarding · Designed and built by ASEC Services */
:root{
  --navy:#021132; --navy-2:#0A1F4D; --gold:#BB933B; --gold-deep:#8A6A24; --gold-lite:#E4C987; --ivory:#F7F3EA;
  --bg:#FFFFFF; --ink:#0E1A33; --body:#2B3346; --muted:#5B6477; --line:rgba(2,17,50,.12);
  --glass:rgba(255,255,255,.78); --glass-strong:rgba(255,255,255,.94); --glass-edge:rgba(2,17,50,.10);
  --shadow:0 16px 40px -26px rgba(2,17,50,.30);
  --accent:#8A6A24; --chip:#F7F3EA; --orb-a:rgba(187,147,59,.07); --orb-b:rgba(10,31,77,.05);
  --ok:#2F6B45; --ok-bg:rgba(47,107,69,.12); --warn:#8A5A00; --warn-bg:rgba(187,147,59,.18); --stop:#9B2C2C;
  --serif:"Libre Caslon Text", Georgia, "Times New Roman", serif;
  --sans:"Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
/* Dark is opt-in only: the site is white by default on every device. */
:root[data-theme="dark"]{
  --bg:#040B1C; --ink:#F2ECDF; --body:#CDD2DE; --muted:#9AA3B8; --line:rgba(255,255,255,.10);
  --glass:rgba(16,30,64,.58); --glass-strong:rgba(18,34,72,.86); --glass-edge:rgba(255,255,255,.14); --shadow:0 18px 50px -20px rgba(0,0,0,.7);
  --accent:#E0BD6E; --chip:rgba(187,147,59,.15); --orb-a:rgba(187,147,59,.16); --orb-b:rgba(60,100,190,.18);
  --ok:#86CFA4; --ok-bg:rgba(134,207,164,.12); --warn:#E8C173; --warn-bg:rgba(187,147,59,.16); --stop:#F09A9A;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (max-width:640px){html{scroll-padding-top:104px}}
body{margin:0;background:var(--bg);color:var(--body);font:15.5px/1.65 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.locked{overflow:hidden}
a{color:var(--accent);text-underline-offset:3px}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:400;letter-spacing:-.01em;text-wrap:balance}
button{font:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:clamp(16px,4vw,40px)}
.label{font:600 11px/1.2 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.small{font-size:12.5px;color:var(--muted)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- glass ---------- */
.glass{position:relative;background:var(--glass);border:1px solid var(--glass-edge);border-radius:22px;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.5);-webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 72%,rgba(255,255,255,.1));mix-blend-mode:soft-light}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass{background:var(--glass-strong)}}
.field{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.field i{position:absolute;border-radius:50%;filter:blur(70px);animation:drift 26s var(--ease) infinite alternate}
.field i:nth-child(1){width:46vw;height:46vw;left:-12vw;top:20vh;background:var(--orb-a)}
.field i:nth-child(2){width:40vw;height:40vw;right:-12vw;top:60vh;background:var(--orb-b);animation-duration:32s}
@keyframes drift{to{transform:translate3d(6vw,-8vh,0) scale(1.15)}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 13.5px var(--sans);border-radius:999px;padding:10px 18px;cursor:pointer;border:1px solid transparent;text-decoration:none;transition:transform .3s var(--ease),background .3s,box-shadow .3s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn.gold{background:linear-gradient(135deg,#E4C987,#BB933B 55%,#8A6A24);color:#021132;box-shadow:0 8px 24px -10px rgba(187,147,59,.8)}
.btn.navy{background:var(--navy);color:var(--ivory)}
.btn.line{background:var(--glass-strong);border-color:var(--line);color:var(--ink)}
.btn.clear{background:transparent;color:inherit;border-color:currentColor}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.icon-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);background:var(--glass-strong);color:var(--ink);cursor:pointer;transition:transform .3s var(--ease)}
.icon-btn:hover{transform:translateY(-1px)}
.icon-btn svg{width:18px;height:18px}

/* ---------- intro doors ---------- */
.doors{position:fixed;inset:0;z-index:100;pointer-events:auto}
.door{position:absolute;top:0;bottom:0;width:50%;background:#fff;
  transition:transform 1.45s cubic-bezier(.62,.02,.18,1);will-change:transform;backface-visibility:hidden}
.door.l{left:0;z-index:2;box-shadow:inset -1px 0 0 rgba(187,147,59,.35)}
.door.r{right:0;box-shadow:inset 1px 0 0 rgba(187,147,59,.35)}
/* The seal sits on the seam but belongs to the left door, so the left door
   carries it away whole when the doors part. */
.door .seal{position:absolute;top:50%;left:100%;width:min(46vw,240px);height:auto;border-radius:50%;
  background:#fff;padding:10px;box-sizing:border-box;box-shadow:0 20px 54px -26px rgba(2,17,50,.6);
  opacity:0;transform:translate(-50%,-50%) scale(.92);animation:sealIn 1.1s var(--ease) .15s forwards}
@keyframes sealIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.doors .enter{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 8vh + var(--page-bottom,0px));transform:translateX(-50%);z-index:2;color:#021132;background:#fff;border:1px solid rgba(2,17,50,.15);opacity:0;animation:fadeIn .6s ease 1.1s forwards}
.doors .tag{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 8vh + 56px + var(--page-bottom,0px));text-align:center;z-index:2;font:600 11px var(--sans);letter-spacing:.3em;text-transform:uppercase;color:#8A6A24;opacity:0;animation:fadeIn .6s ease 1s forwards}
/* The left door carries the seal, and the seal hangs half its width past that
   door's edge. Moving the door only its own width leaves the seal sitting on
   screen when the layer is hidden, which reads as the doors vanishing rather
   than opening. The extra travel takes the seal right off the glass, and the
   longer duration keeps both doors moving at the same apparent speed. */
.doors.open .door.l{transform:translateX(calc(-102% - min(24vw,126px)));transition-duration:1.7s}
.doors.open .door.r{transform:translateX(102%)}
.doors.open .enter,.doors.open .tag{opacity:0!important;transition:opacity .35s}
/* Once the doors are travelling the page underneath is already live. Without
   this the layer keeps swallowing taps until it is hidden. */
.doors.open{pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .door{transition-duration:.45s}
  .doors.open .door.l{transition-duration:.5s}
}
.doors.gone{display:none}
@keyframes logoIn{to{opacity:1;transform:none}}
@keyframes fadeIn{to{opacity:1}}

/* ---------- top bar ---------- */
.bar{position:fixed;left:0;right:0;top:0;z-index:40;padding-top:env(safe-area-inset-top,0px);transition:background .4s,box-shadow .4s}
.bar .wrap{display:flex;align-items:center;gap:12px;height:68px}
.bar.solid{background:var(--glass-strong);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto;min-width:0;overflow:hidden}
.brand span{min-width:0;overflow:hidden}
.bar.solid .brand{color:var(--ink);text-shadow:none}
.brand img{width:40px;height:40px;border-radius:50%;background:#fff;padding:2px;flex:none;box-shadow:0 2px 10px -6px rgba(2,17,50,.5)}
.brand b{font:600 12.5px/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;max-width:100%}
.brand small{display:block;font:500 11.5px var(--sans);letter-spacing:.04em;opacity:.75;text-transform:none}
@media (max-width:520px){.brand small{display:none}.brand b{font-size:11px;letter-spacing:.1em}}
/* Below this the wordmark cannot fit whole beside the buttons, and a clipped
   name reads worse than none: the seal carries the brand on its own. */
@media (max-width:470px){.brand b{display:none}.brand{margin-right:6px;overflow:visible}}
@media (max-width:430px){.brand img{width:34px;height:34px}.bar .wrap{gap:8px}.bar .tool{padding:8px}}
.bar .tool{display:inline-flex;align-items:center;gap:8px;font:600 13px var(--sans);color:var(--ivory);background:rgba(2,17,50,.72);border:1px solid rgba(255,255,255,.34);padding:9px 14px;border-radius:999px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-decoration:none;box-shadow:0 6px 18px -8px rgba(2,17,50,.6);text-shadow:none;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.bar .tool:hover{background:var(--navy);border-color:var(--gold-lite);transform:translateY(-1px)}
.bar.solid .tool{color:var(--ivory);background:var(--navy);border-color:transparent;box-shadow:none}
.bar.solid .tool:hover{background:var(--navy-2);border-color:transparent}
.bar .tool svg{width:16px;height:16px}
@media (max-width:720px){.bar .tool span{display:none}.bar .tool{padding:9px}}
.savedot{font:500 12px var(--sans);color:var(--muted);opacity:.95;white-space:nowrap}
.bar.solid .savedot{color:var(--muted)}
@media (max-width:640px){.savedot{display:none}}

/* ---------- hero ---------- */
.hero{position:relative;min-height:min(100svh,920px);display:flex;align-items:flex-end;color:var(--body);overflow:hidden;isolation:isolate;background:var(--bg)}
.hero .scene{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:62% 50%;animation:kenburns 28s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
/* The photograph carries the hero. Only three things are shaded: a whisper at
   the top so the bar reads, a soft pull from the left behind the column of
   text, and the band at the foot where the words actually sit. */
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.26) 9%,rgba(255,255,255,0) 21%),linear-gradient(90deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.34) 38%,rgba(255,255,255,0) 68%),linear-gradient(0deg,var(--bg) 0%,rgba(255,255,255,.95) 24%,rgba(255,255,255,.82) 38%,rgba(255,255,255,.52) 52%,rgba(255,255,255,.18) 66%,rgba(255,255,255,0) 78%)}
.welcome{font:400 clamp(24px,3.2vw,40px)/1.15 var(--serif);color:var(--ink);margin:0 0 6px}
.welcome b{font-weight:600;color:var(--accent)}
.hero .grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,5vw,64px);align-items:end;padding-block:120px clamp(40px,7vw,80px);width:100%}
@media (max-width:900px){.hero .grid{grid-template-columns:1fr}
  .hero::before{background:linear-gradient(180deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.3) 10%,rgba(255,255,255,0) 24%),linear-gradient(0deg,var(--bg) 0%,rgba(255,255,255,.96) 30%,rgba(255,255,255,.88) 44%,rgba(255,255,255,.66) 58%,rgba(255,255,255,.24) 72%,rgba(255,255,255,0) 84%)}}
.hero .label{color:var(--accent)}
.hero h1{color:var(--ink);font-size:clamp(40px,6.4vw,82px);line-height:1.02;margin:14px 0 16px}
.hero h1 em{font-style:italic;background:linear-gradient(100deg,#BB933B,#8A6A24 40%,#D8B267 60%,#8A6A24);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sheen 7s linear infinite}
@keyframes sheen{to{background-position:-220% 0}}
.hero p.lede{font-size:clamp(16px,1.5vw,19px);max-width:50ch;color:var(--body);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{font:500 12.5px var(--sans);padding:7px 13px;border-radius:999px;background:rgba(255,255,255,.7);border:1px solid rgba(2,17,50,.12);color:var(--body);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.paths{display:grid;gap:14px}
.paths{position:relative}
.pathhead{display:inline-grid;gap:2px;padding:12px 20px 14px;border-radius:18px;background:var(--navy);box-shadow:0 14px 34px -18px rgba(2,17,50,.7);justify-self:start}
.pathlabel{font:600 11px var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lite)}
.paths h2{color:var(--ivory);font:400 clamp(24px,2.7vw,34px)/1.12 var(--serif);margin:0;letter-spacing:-.01em}
.path{all:unset;box-sizing:border-box;cursor:pointer;display:block;padding:22px 24px;border-radius:20px;color:var(--ink);background:rgba(255,255,255,.74);border:1px solid rgba(2,17,50,.10);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);transition:transform .5s var(--ease),background .4s,border-color .4s}
.path:hover{transform:translateY(-3px);background:rgba(255,255,255,.92);border-color:rgba(187,147,59,.5)}
.path:focus-visible{outline:2px solid var(--gold)}
.path[aria-pressed="true"]{background:linear-gradient(135deg,rgba(228,201,135,.42),rgba(255,255,255,.9));border-color:var(--gold)}
.path .k{font:600 11px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep)}
.path b{display:block;font:400 23px/1.2 var(--serif);margin:6px 0 4px}
.path .d{font-size:14px;opacity:.82}
.path .go{float:right;width:34px;height:34px;border-radius:50%;border:1.5px solid rgba(2,17,50,.25);display:grid;place-items:center;transition:all .35s var(--ease)}
.path:hover .go{transform:translateX(3px)}
.path[aria-pressed="true"] .go{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.scroll-cue{display:none;margin-top:16px;color:var(--accent);font:600 13px var(--sans);text-decoration:none}
.chosen .scroll-cue{display:inline-flex;gap:6px;align-items:center}

/* ---------- revealed content ---------- */
#journey-area{display:none}
.chosen #journey-area{display:block;animation:reveal .9s var(--ease) both}
@keyframes reveal{from{opacity:0;transform:translateY(40px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:clamp(40px,6vw,72px) 0 16px}
.section-title h2{font-size:clamp(28px,3.6vw,44px);margin:6px 0 0}
.section-title .label{color:var(--accent)}

/* journey */
.journey{padding:clamp(22px,3.4vw,36px);margin-top:28px;z-index:2}
.journey-top{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
@media (max-width:860px){.journey-top{grid-template-columns:1fr}}
.journey h2{font-size:clamp(26px,3vw,36px);margin:8px 0 6px}
.journey .label{color:var(--accent)}
.journey p{margin:0;color:var(--muted);max-width:52ch}
.nextup{padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--ivory);display:grid;gap:8px}
.nextup .label{color:var(--gold-lite)}
.nextup b{font:400 19px/1.3 var(--serif);color:var(--ivory)}
.nextup .meta{font-size:13px;color:rgba(247,243,234,.72)}
.nextup .row{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.road{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:30px}
.road::before{content:"";position:absolute;left:12.5%;right:12.5%;top:27px;height:3px;border-radius:3px;background:var(--line)}
.road .fill{position:absolute;left:12.5%;top:27px;height:3px;border-radius:3px;background:linear-gradient(90deg,#E4C987,#BB933B,#8A6A24);width:0;transition:width 1.2s var(--ease)}
.stop{position:relative;text-align:center;display:grid;justify-items:center;gap:6px;padding-inline:4px;text-decoration:none;color:inherit}
.stop .dot{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--glass-strong);border:2px solid var(--line);color:var(--muted);transition:all .6s var(--ease);position:relative;z-index:1}
.stop .dot svg{width:24px;height:24px}
.stop b{font:600 14px var(--sans);color:var(--ink)}
.stop span{font-size:12px;color:var(--muted)}
.stop .ring{position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.stop.done .dot{background:linear-gradient(135deg,#E4C987,#BB933B);border-color:transparent;color:var(--navy)}
.stop.here .dot{border-color:var(--gold);color:var(--accent);box-shadow:0 0 0 6px rgba(187,147,59,.15)}
.stop.here .ring{animation:pulse 2.2s ease-out infinite}
@keyframes pulse{0%{opacity:.8;transform:scale(.9)}100%{opacity:0;transform:scale(1.35)}}
@media (max-width:560px){
  .stop span{display:none}
  .stop .dot{width:46px;height:46px}
  .road::before,.road .fill{top:22px}
  /* Four stage names will not sit side by side on a phone without breaking
     mid-word, so the road scrolls sideways and each stop keeps its own room. */
  /* All four stages stay on screen. Names wrap between words, never inside one,
     and never scroll out of sight. */
  .road{grid-template-columns:repeat(4,1fr);margin-inline:-4px}
  .stop{padding-inline:3px}
  .stop b{font-size:11.5px;line-height:1.25;white-space:normal;overflow-wrap:normal;
          word-break:keep-all;hyphens:none}
}

/* stage groups and steps */
.stage-head{display:flex;align-items:center;gap:14px;margin:clamp(44px,6vw,72px) 0 6px}
.stage-head h2{margin:0;font-size:clamp(26px,3.2vw,38px)}
.stage-head .small{margin-left:auto}
@media (max-width:640px){
  .stage-head{flex-wrap:wrap;gap:10px;margin-top:clamp(32px,7vw,48px)}
  .stage-head .small{margin-left:0;flex:1 0 100%}
}
.step{display:grid;grid-template-columns:auto 1fr;gap:clamp(10px,2.4vw,28px);margin-top:22px}
@media (max-width:700px){.step{grid-template-columns:1fr}}
.numeral{font:400 clamp(48px,6.5vw,88px)/.85 var(--serif);color:var(--navy-2);white-space:nowrap;min-width:clamp(60px,9vw,110px);position:sticky;top:100px;align-self:start}
.step.is-done .numeral{color:var(--navy-2)}
@media (max-width:700px){.numeral{position:static;font-size:52px}}
.panel{padding:clamp(20px,3.2vw,34px)}
.panel header{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.panel .label{color:var(--accent)}
.panel h3{font-size:clamp(23px,2.8vw,32px);line-height:1.15;margin:8px 0 4px}
.panel p.lede{margin:0 0 4px;max-width:64ch;color:var(--muted);font-size:15.5px}
.pips{display:flex;gap:5px;align-items:center;padding:8px 12px;border-radius:999px;background:var(--chip)}
.pips i{width:9px;height:9px;border-radius:50%;background:var(--line);transition:all .4s var(--ease)}
.pips i.on{background:var(--gold)}
.pips b{font:600 12px var(--sans);color:var(--accent);margin-left:4px}
.pips.done{background:var(--ok-bg)}
.pips.done b{color:var(--ok)}
.time{font:500 12px var(--sans);color:var(--muted);display:inline-flex;align-items:center;gap:5px;margin-top:6px}
.tasks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:4px}
.task{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start;padding:11px 14px;border-radius:14px;cursor:pointer;transition:background .3s}
.task:hover{background:var(--chip)}
.task input{appearance:none;-webkit-appearance:none;margin:1px 0 0;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--gold);display:grid;place-items:center;cursor:pointer;transition:all .35s var(--ease);background:transparent}
.task input::after{content:"";width:6px;height:11px;border:solid var(--navy);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--ease);margin-top:-2px}
.task input:checked{background:linear-gradient(135deg,#E4C987,#BB933B)}
.task input:checked::after{transform:rotate(45deg) scale(1)}
.task input:checked+span{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--gold)}
.links{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.links a{font:600 13px var(--sans);padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--ink);background:var(--glass-strong);border:1px solid var(--line);transition:all .3s var(--ease)}
.links a:hover{border-color:var(--gold);transform:translateY(-1px)}
.links a::after{content:"↗";margin-left:6px;color:var(--accent)}
dl.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:10px;margin:16px 0 4px}
dl.facts div{padding:12px 14px;border-radius:14px;background:var(--chip);min-width:0;display:grid;align-content:start;gap:4px}
dl.facts dt{font:600 10.5px/1.35 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);overflow-wrap:break-word}
dl.facts dd{margin:0;min-width:0;font:600 clamp(13px,1.05vw,15px)/1.35 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:break-word;word-break:break-word;hyphens:none}
.note{margin:14px 0 4px;padding:13px 16px;border-radius:14px;border:1px solid rgba(187,147,59,.35);background:linear-gradient(135deg,rgba(228,201,135,.18),rgba(228,201,135,.04));font-size:14.5px}
.note.stop-note{border-color:rgba(155,44,44,.35);background:linear-gradient(135deg,rgba(155,44,44,.10),rgba(155,44,44,.02))}
.note.stop-note b{color:var(--stop)}
.tipline{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;margin-top:12px;font:600 12.5px var(--sans);color:var(--accent)}
ol.how{margin:14px 0 0;padding-left:22px;max-width:66ch}
ol.how li{margin:4px 0}
ol.how li::marker{font:400 14px var(--serif);color:var(--accent)}

/* forms */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px;margin-top:16px}
.form .full{grid-column:1/-1}
.form label,.fl{display:block;font:600 12px var(--sans);color:var(--muted);margin-bottom:6px}
select,input[type=text],input[type=email],input[type=tel],input[type=date],input[type=password],input[type=search],textarea{width:100%;font:15px var(--sans);color:var(--ink);background:var(--glass-strong);border:1px solid var(--line);border-radius:12px;padding:11px 13px;transition:border-color .3s,box-shadow .3s}
select:focus,input:focus,textarea:focus{border-color:var(--gold);box-shadow:0 0 0 4px rgba(187,147,59,.15);outline:none}
textarea{min-height:110px;resize:vertical}
.boardcard{margin-top:12px;padding:18px;border-radius:16px;background:var(--chip);display:grid;gap:4px;animation:rise .5s var(--ease)}
.boardcard h4{margin:0;font:400 20px var(--serif);color:var(--ink)}
.boardcard .meta{color:var(--muted);font-size:13.5px}
@keyframes rise{from{transform:translateY(6px);opacity:.4}to{transform:none;opacity:1}}
.preview{display:grid;grid-template-columns:150px 1fr;gap:22px;margin-top:20px;padding:22px;border-radius:18px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--ivory)}
@media (max-width:560px){.preview{grid-template-columns:1fr}}
.preview .photo{width:150px;max-width:100%;aspect-ratio:4/5;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.08);display:grid;place-items:center;text-align:center;font-size:12px;color:rgba(247,243,234,.6);border:1px solid rgba(255,255,255,.15)}
.preview .photo img{width:100%;height:100%;object-fit:cover}
.preview .label{color:var(--gold-lite)}
.preview h4{color:var(--ivory);font:400 26px var(--serif);margin:6px 0 2px}
.preview .m{font-size:13px;color:rgba(247,243,234,.7)}
.preview p{margin:10px 0 0;color:rgba(247,243,234,.88)}
.preview .broker{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.15);font-size:12.5px;color:rgba(247,243,234,.75)}
.preview .broker b{color:var(--gold-lite)}
.uploads{display:grid;gap:10px;margin-top:16px}
.up{display:grid;grid-template-columns:1fr auto;gap:10px 12px;align-items:center;padding:14px 16px;border-radius:16px;background:var(--chip)}
.up b{color:var(--ink)}
.up .small{display:block}
.up .files{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px}
.up .files:empty{display:none}
.up .files span{font:500 12px var(--sans);padding:4px 10px;border-radius:999px;background:var(--glass-strong);border:1px solid var(--line)}
.up .files .ok{color:var(--ok)}
.up .files .err{color:var(--stop)}
.filebtn{position:relative;overflow:hidden}
.filebtn input{position:absolute;inset:0;opacity:0;cursor:pointer}
.hp{position:absolute;left:-9999px}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.statusbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px;border-radius:16px;margin-top:16px;background:var(--ok-bg);color:var(--ok);font-weight:600}

/* directory */
.dirlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.dirlink{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;border-radius:16px;border:1px solid transparent;text-align:left;transition:background .3s,border-color .3s,transform .3s var(--ease)}
.dirlink .who{display:grid;gap:2px;min-width:0}
.dirlink:hover,.dirlink:focus-visible{background:var(--chip);border-color:var(--line);transform:translateX(2px)}
.dirlink b{display:block;font:400 18px var(--serif);color:var(--ink)}
.dirlink .who span{font-size:13px;color:var(--muted)}
.dirlink i{flex:none;color:var(--accent);display:grid;place-items:center;opacity:.5;transition:opacity .3s,transform .3s var(--ease)}
.dirlink:hover i{opacity:1;transform:translateX(3px)}

/* one person, opened from the list */
#person{z-index:85}
.personcard{position:relative;width:min(340px,100%);padding:22px 22px 26px;display:grid;justify-items:center;gap:4px;text-align:center;opacity:0;transform:translateY(18px) scale(.97);transition:all .45s var(--ease);background:var(--glass-strong)}
#person.on .personcard{opacity:1;transform:none}
.personcard .x{position:absolute;top:12px;right:12px}
.personcard .portrait{width:100%;aspect-ratio:1/1.12;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,var(--navy),var(--navy-2));display:grid;place-items:center;color:var(--gold-lite);font:400 54px var(--serif);border:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.personcard .portrait img{width:100%;height:100%;object-fit:cover}
.personcard h3{margin:16px 0 0;font-size:24px}
.personcard .role{font-size:13.5px;color:var(--muted);max-width:26ch}
.personcard .round{display:flex;gap:12px;margin-top:16px}
.personcard .round a{min-width:74px;padding:10px 6px 8px;border-radius:16px;display:grid;justify-items:center;gap:5px;background:var(--chip);color:var(--accent);border:1px solid var(--line);transition:transform .3s var(--ease),background .3s,border-color .3s}
.personcard .round a:hover{transform:translateY(-2px);background:var(--glass-strong);border-color:var(--gold)}
.personcard .round a svg{width:19px;height:19px}
.personcard .round a span{font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ink)}
.personcard .lines{margin-top:14px;display:grid;gap:4px;font-size:13px;line-height:1.6}
.personcard .lines a.plain{color:var(--accent);text-decoration:underline;text-underline-offset:3px;overflow-wrap:break-word}
.personcard .copynote{margin:12px 0 0;font-size:12px;line-height:1.55;color:var(--muted);background:var(--chip);border:1px solid var(--line);border-radius:12px;padding:9px 11px;max-width:100%;overflow-wrap:break-word}

/* stage navigation */
.stagenav{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin:34px 0 10px;padding-top:22px;border-top:1px solid var(--line)}
.stop.open .dot{border-color:var(--gold);box-shadow:0 0 0 5px rgba(187,147,59,.16)}
.stop.open b{color:var(--accent)}
.stop{cursor:pointer}

/* drawer, sheets, modal */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(2,17,50,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .4s}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;z-index:70;top:10px;right:10px;bottom:10px;width:min(360px,calc(100vw - 20px));padding:22px;overflow-y:auto;transform:translateX(calc(100% + 20px));transition:transform .55s var(--ease);background:var(--glass-strong)}
.drawer.on{transform:none}
.drawer h3{margin:0 0 4px;font-size:24px}
.drawer nav{display:grid;gap:2px;margin-top:14px}
.drawer .grp{font:600 10.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin:14px 0 4px}
.drawer nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;color:var(--ink);text-decoration:none;font-weight:500}
.drawer nav a:hover{background:var(--chip)}
.drawer nav a .st{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font:700 11px var(--sans);border:1.5px solid var(--line);color:var(--muted);flex:none}
.drawer nav a.done .st{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.drawer .foot{display:grid;gap:8px;margin-top:20px}
/* The panel itself scrolls, not the card inside it.
 *
 * The card used to carry max-height:100svh and its own scrollbar while the panel
 * centred it. A card taller than the screen then overflowed in both directions at
 * once: the top slid up out of reach and the last few rows sat below the fold with
 * nothing left to scroll. Short panels hid the fault; the reference library, with
 * twenty-one articles, did not. Scrolling the panel and centring the card with auto
 * margins keeps a short card in the middle and lets a tall one start at the top,
 * which is the one arrangement that never puts content out of reach. */
.modal{position:fixed;z-index:80;inset:0;display:flex;justify-content:center;
  padding:16px;
  padding-top:calc(16px + env(safe-area-inset-top,0px));
  padding-bottom:calc(16px + env(safe-area-inset-bottom,0px) + var(--page-bottom,0px));
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;pointer-events:none}
.modal > *{margin:auto;flex:0 0 auto}
.modal .box{width:min(980px,100%);padding:clamp(20px,3vw,34px);opacity:0;transform:translateY(20px) scale(.98);transition:all .45s var(--ease);background:var(--glass-strong)}
.modal.on{pointer-events:auto}
.modal.on .box{opacity:1;transform:none}
.modal .x{position:sticky;top:0;float:right;z-index:2}

/* help bot */
.helpfab{position:fixed;z-index:50;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 18px + var(--page-bottom,0px));display:flex;align-items:center;gap:10px;padding:12px 18px 12px 12px;border-radius:999px;border:0;cursor:pointer;color:#021132;background:linear-gradient(135deg,#E4C987,#BB933B 60%,#8A6A24);box-shadow:0 14px 34px -12px rgba(2,17,50,.55);font:600 14px var(--sans);transition:transform .35s var(--ease)}
.helpfab:hover{transform:translateY(-2px)}
/* On a phone the wide pill sat across whatever the agent was reading, so it
   shrinks to the seal alone and keeps its label for anything wider. */
@media (max-width:560px){
  .helpfab{gap:0;padding:8px;border-radius:50%;right:14px}
  .helpfab .lbl{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .helpfab .face{width:34px;height:34px}
  .helpfab .face img{width:30px;height:30px}
}
.helpfab .face{width:32px;height:32px;border-radius:50%;background:var(--ivory);display:grid;place-items:center}
.helpfab .face img{width:28px;height:28px}
.nudge{position:fixed;z-index:50;right:18px;bottom:calc(env(safe-area-inset-bottom,0px) + 80px + var(--page-bottom,0px));max-width:300px;padding:14px 16px;font-size:14px;color:var(--ink);animation:rise .5s var(--ease)}
@media (max-width:560px){.nudge{left:14px;right:70px;max-width:none}}
.nudge{background:var(--surface,#FFFFFF);border:1px solid var(--line);box-shadow:0 18px 44px -20px rgba(2,17,50,.55);-webkit-backdrop-filter:none;backdrop-filter:none}
:root[data-theme="dark"] .nudge{background:#0E1B36}
.nudge b{display:block;font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
.chat{position:fixed;z-index:75;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:min(390px,calc(100vw - 28px));height:min(600px,calc(100svh - 28px));display:flex;flex-direction:column;overflow:hidden;background:var(--glass-strong);transform:translateY(24px) scale(.97);opacity:0;pointer-events:none;transition:all .45s var(--ease)}
.chat.on{transform:none;opacity:1;pointer-events:auto}
/* On a phone the chat fills the screen, so the page behind it holds still
   and blurs instead of scrolling away under the panel. */
@media (max-width:640px){
  /* A sheet that sizes itself to the conversation. It starts small, grows as
     the conversation does, and never takes more than two thirds of the screen,
     so the agent can still see the step they were reading. */
  .chat{right:0;left:0;bottom:var(--page-bottom,0px);width:100%;height:auto;max-height:min(66svh,560px);
        border-radius:22px 22px 0 0;transform:translateY(100%);transition:transform .42s var(--ease),opacity .3s;
        padding-top:10px;box-shadow:0 -22px 60px -28px rgba(2,17,50,.75)}
  .chat.on{transform:none}
  .chat::before{content:"";position:absolute;top:5px;left:50%;transform:translateX(-50%);
                width:40px;height:4px;border-radius:4px;background:var(--line);z-index:3}
  .chat .msgs{flex:0 1 auto;align-content:start;max-height:38svh;padding:14px 16px;
              -webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .chat header{border-radius:18px 18px 0 0}
  body.chatting{overflow:hidden;position:fixed;left:0;right:0;width:100%}
  body.chatting .scrim{opacity:1;pointer-events:auto;z-index:70;
    background:rgba(2,17,50,.42);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
}
.chat header{display:flex;align-items:center;gap:10px;padding:14px 16px;background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--ivory)}
.chat header img{width:34px;height:34px;border-radius:50%;background:var(--ivory);padding:2px}
.chat header b{font:400 16px var(--serif)}
.chat header small{display:block;opacity:.7;font-size:12px}
.chat header .icon-btn{margin-left:auto;background:rgba(255,255,255,.1);color:var(--ivory);border-color:rgba(255,255,255,.2)}
.msgs{flex:1;overflow-y:auto;padding:16px;display:grid;gap:10px;align-content:start}
.msg{max-width:88%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.5;animation:rise .35s var(--ease)}
.msg.bot{background:var(--chip);color:var(--ink);border-bottom-left-radius:6px}
.msg.me{justify-self:end;background:var(--navy);color:var(--ivory);border-bottom-right-radius:6px}
.msg.bot a{color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1.5px;text-decoration-color:rgba(138,106,36,.45);overflow-wrap:break-word}
.msg.bot a:hover{text-decoration-color:currentColor}
.msg.bot a[target]::after{content:"\2197";font-size:.85em;margin-left:2px;opacity:.7}
:root[data-theme="dark"] .msg.bot a{color:var(--gold-lite);text-decoration-color:rgba(228,201,135,.5)}
.suggest{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.suggest button{font:500 12.5px var(--sans);padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--glass-strong);color:var(--ink);cursor:pointer}
.chat form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.chat form input{flex:1}

/* celebration */
.celebrate{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:16px;background:radial-gradient(circle at 50% 40%,rgba(10,31,77,.92),rgba(2,17,50,.97));color:var(--ivory);opacity:0;pointer-events:none;transition:opacity .6s}
.celebrate.on{opacity:1;pointer-events:auto}
.celebrate canvas{position:absolute;inset:0;width:100%;height:100%}
.celebrate .card{position:relative;text-align:center;max-width:620px;display:grid;justify-items:center;gap:12px}
.celebrate svg.art{width:min(300px,70vw);height:auto}
.celebrate h2{color:var(--ivory);font-size:clamp(34px,5vw,56px);margin:0;line-height:1.05}
.celebrate h2 em{color:var(--gold-lite)}
.celebrate p{margin:0;color:rgba(247,243,234,.82);max-width:48ch}
.celebrate .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.draw{stroke-dasharray:600;stroke-dashoffset:600;animation:draw 1.8s var(--ease) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.pop{transform-origin:center;transform:scale(0);animation:popin .6s var(--ease) forwards}
@keyframes popin{to{transform:scale(1)}}

/* finished banner */
.finished{display:none;margin-top:24px;padding:22px 24px;align-items:center;gap:18px;flex-wrap:wrap}
.finished.on{display:flex}
.finished .seal{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#E4C987,#BB933B);display:grid;place-items:center;color:var(--navy);flex:none}
.finished h3{margin:0;font-size:22px}
.finished p{margin:2px 0 0;color:var(--muted)}

/* footer */
footer.site{margin-top:90px;background:var(--navy);color:rgba(247,243,234,.78);padding-block:48px 90px;font-size:13.5px}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
@media (max-width:760px){footer.site .cols{grid-template-columns:1fr}}
footer.site b{color:var(--ivory)}
footer.site a{color:var(--gold-lite)}
footer.site .fine{margin-top:28px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:12px}
.eho{display:inline-flex;align-items:center;gap:8px}
.toast{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 80px);transform:translateX(-50%);z-index:95;padding:12px 18px;border-radius:999px;color:var(--ink);font:600 13px var(--sans);background:var(--glass-strong)}
.preview-flag{position:fixed;left:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:45;font:600 11px var(--sans);letter-spacing:.08em;padding:6px 10px;border-radius:999px;background:var(--navy);color:var(--gold-lite)}

.reveal-in{animation:reveal .8s var(--ease) both}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}

/* ---------- dark view: navy hero, gold numerals, no white anywhere ---------- */
:root[data-theme="dark"] .hero{color:var(--ivory);background:var(--navy)}
:root[data-theme="dark"] .hero::before{background:linear-gradient(180deg,rgba(2,17,50,.72) 0%,rgba(2,17,50,.3) 10%,rgba(2,17,50,0) 22%),linear-gradient(90deg,rgba(2,17,50,.78) 0%,rgba(2,17,50,.4) 38%,rgba(2,17,50,0) 68%),linear-gradient(0deg,var(--bg) 0%,rgba(2,17,50,.94) 24%,rgba(2,17,50,.82) 38%,rgba(2,17,50,.54) 52%,rgba(2,17,50,.2) 66%,rgba(2,17,50,0) 78%)}
@media (max-width:900px){:root[data-theme="dark"] .hero::before{background:linear-gradient(180deg,rgba(2,17,50,.8) 0%,rgba(2,17,50,.34) 12%,rgba(2,17,50,0) 26%),linear-gradient(0deg,var(--bg) 0%,rgba(2,17,50,.95) 30%,rgba(2,17,50,.86) 44%,rgba(2,17,50,.64) 58%,rgba(2,17,50,.24) 72%,rgba(2,17,50,0) 84%)}}
:root[data-theme="dark"] .welcome{color:var(--ivory)}
:root[data-theme="dark"] .welcome b{color:var(--gold-lite)}
:root[data-theme="dark"] .hero .label{color:var(--gold-lite)}
:root[data-theme="dark"] .hero h1{color:var(--ivory)}
:root[data-theme="dark"] .hero h1 em{background:linear-gradient(100deg,#E4C987,#BB933B 40%,#F4E2B4 60%,#BB933B);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
:root[data-theme="dark"] .hero p.lede{color:rgba(247,243,234,.86)}
:root[data-theme="dark"] .chips span{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:var(--ivory)}
:root[data-theme="dark"] .pathhead{background:rgba(2,17,50,.72);border:1px solid rgba(255,255,255,.18);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
:root[data-theme="dark"] .path{color:var(--ivory);background:rgba(10,20,45,.5);border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
:root[data-theme="dark"] .path:hover{background:rgba(255,255,255,.14);border-color:rgba(228,201,135,.5)}
:root[data-theme="dark"] .path[aria-pressed="true"]{background:linear-gradient(135deg,rgba(228,201,135,.3),rgba(187,147,59,.12));border-color:rgba(228,201,135,.75)}
:root[data-theme="dark"] .path .k{color:var(--gold-lite)}
:root[data-theme="dark"] .path .go{border-color:rgba(255,255,255,.45)}
:root[data-theme="dark"] .brand{color:var(--ivory)}
:root[data-theme="dark"] .brand img{background:var(--ivory)}
:root[data-theme="dark"] .bar.solid .brand{color:var(--ink)}
:root[data-theme="dark"] .numeral{color:var(--gold)}
:root[data-theme="dark"] .step.is-done .numeral{color:var(--gold)}
:root[data-theme="dark"] .doors .door{background:linear-gradient(160deg,#0B1B3A,#050D20)}
/* The wordmark is navy artwork, invisible on a navy door, so it is rendered
   in ivory for the dark view. */
:root[data-theme="dark"] .doors .seal{background:var(--ivory);box-shadow:0 20px 54px -22px rgba(0,0,0,.8)}
:root[data-theme="dark"] .doors .enter{background:var(--glass-strong);color:var(--ivory);border-color:rgba(255,255,255,.2)}

/* ---------- always-there contact ---------- */
.contactrow{display:flex;gap:8px;align-items:center;padding:10px 12px;border-top:1px solid var(--line);background:var(--chip)}
.contactrow span{font:600 11px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-right:auto}
.contactrow a{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--glass-strong);border:1px solid var(--line);color:var(--accent)}
.contactrow a:hover{border-color:var(--gold)}
.contactrow a svg{width:16px;height:16px}

/* ---------- text always stays inside its box ---------- */
body{overflow-wrap:break-word}
.panel,.glass,.journey,.step,.stage-head,.section-title{min-width:0}
.panel h3,.panel p.lede,.panel .note,.tasks span,.boardcard,.up,.nextup,.stop,.person,.dirlink,.msg{overflow-wrap:break-word}
.links a{max-width:100%;overflow-wrap:break-word}
.up{min-width:0}
.up b,.up .small{overflow-wrap:break-word;min-width:0}
.nextup b,.nextup .meta{overflow-wrap:break-word}
.stop span{max-width:100%;overflow-wrap:break-word}
.stop b{max-width:100%;overflow-wrap:normal;word-break:keep-all;hyphens:none}
.chips span{max-width:100%;overflow-wrap:break-word}
.personcard h3,.personcard .role,.personcard .lines,.personcard .copynote{overflow-wrap:break-word;max-width:100%}
.dirlink .who b,.dirlink .who span{overflow-wrap:break-word}
.welcome{overflow-wrap:break-word}
.hero h1{overflow-wrap:break-word}
.drawer nav a{overflow-wrap:break-word}
.linkhelp{margin:8px 0 0;font-size:12.5px;color:var(--muted);max-width:66ch;overflow-wrap:break-word}
.linkhelp a{color:var(--accent);font-weight:600}

/* ---------- the agreement: a document you can read, fill, initial and sign ---------- */
.agcard{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:16px 0 4px;padding:18px 20px;border-radius:18px;background:var(--chip);border:1px solid var(--line)}
.agcard .label{color:var(--accent)}
.agcard b{display:block;font:400 19px/1.3 var(--serif);color:var(--ink);margin:4px 0 2px}
.agcard .small{display:block;max-width:60ch}

.agree{position:fixed;inset:0;z-index:88;display:flex;flex-direction:column;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
.agree.on{opacity:1;pointer-events:auto}
.agree-top{display:flex;align-items:center;gap:14px;padding:14px clamp(14px,4vw,32px);padding-top:calc(env(safe-area-inset-top,0px) + 14px);background:var(--navy);color:var(--ivory);border-bottom:2px solid var(--gold)}
.agree-top b{font:400 16px var(--serif);display:block}
.agree-top small{opacity:.7;font-size:12px}
.agree-top .icon-btn{margin-left:auto;background:rgba(255,255,255,.1);color:var(--ivory);border-color:rgba(255,255,255,.22)}
.agree-doc{flex:1;overflow-y:auto;padding:clamp(16px,4vw,40px) clamp(14px,4vw,32px) 180px;scroll-behavior:smooth;scroll-padding-bottom:140px}
.agree-doc>*{max-width:820px;margin-inline:auto}
.doc-head{display:flex;align-items:center;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:10px}
.doc-head img{width:56px;height:56px;border-radius:50%;background:#fff;padding:3px;flex:none}
.doc-head h2{margin:2px 0;font-size:clamp(24px,3.2vw,34px)}
.doc-head .label{color:var(--accent)}
.signedbar{margin:14px auto;padding:12px 16px;border-radius:14px;background:var(--ok-bg);color:var(--ok);font-weight:600}
.signedbar a{color:inherit}
.art{padding:22px 0;border-bottom:1px solid var(--line)}
.art h3{font-size:clamp(19px,2.2vw,24px);margin:0 0 10px}
.art p{margin:0 0 10px;font-size:15.5px;line-height:1.7;color:var(--body);overflow-wrap:break-word}
.partylist{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:10px;margin:14px 0}
.partylist div{padding:12px 14px;border-radius:14px;background:var(--chip);min-width:0}
.partylist dt{font:600 10.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.partylist dd{margin:4px 0 0;font:600 15px var(--sans);color:var(--ink);overflow-wrap:break-word}
.fillme{all:unset;cursor:pointer;color:var(--accent);font-weight:600;border-bottom:1.5px dashed var(--gold)}
.initrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--chip)}
.initrow span{font-size:13.5px;color:var(--muted);margin-right:auto}
.initrow.on{background:var(--ok-bg)}
.initrow.on span{color:var(--ok);font-weight:600}
.initbox{min-width:88px;padding:10px 16px;border-radius:12px;border:1.5px dashed var(--gold);background:transparent;color:var(--accent);font:600 15px var(--sans);letter-spacing:.06em;cursor:pointer;transition:all .3s var(--ease)}
.initrow.on .initbox{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--glass-strong);font-family:var(--serif);font-size:18px}
.initbox:disabled{cursor:default;opacity:.85}
.sched{display:grid;gap:8px;margin-top:12px}
.schedrow{all:unset;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;padding:14px 16px;border-radius:14px;background:var(--chip);border:1px dashed var(--gold);transition:all .3s var(--ease)}
.schedrow:hover{background:var(--glass-strong)}
.schedrow.on{border-style:solid;border-color:var(--line)}
.schedrow .n{font:600 14px var(--sans);color:var(--ink)}
.schedrow .v{font-size:14px;color:var(--accent);overflow-wrap:break-word}
.schedrow.on .v{color:var(--body)}
.schedrow:disabled{cursor:default}
.ackline{display:flex;gap:12px;align-items:flex-start;margin:14px 0;font-size:14.5px;color:var(--body)}
.ackline input{appearance:none;-webkit-appearance:none;width:22px;height:22px;flex:none;border-radius:7px;border:1.5px solid var(--gold);display:grid;place-items:center;cursor:pointer;margin-top:1px}
.ackline input:checked{background:linear-gradient(135deg,#E4C987,#BB933B)}
.ackline input:checked::after{content:"";width:6px;height:11px;border:solid var(--navy);border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-2px}
.sigwrap{position:relative;margin-top:6px}
.sigwrap canvas{width:100%;height:clamp(140px,22vw,200px);border-radius:16px;border:1px solid var(--line);background:var(--glass-strong);touch-action:none;cursor:crosshair}
.sigwrap .btn{position:absolute;right:10px;bottom:10px}
.agree-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px clamp(14px,4vw,32px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px);border-top:1px solid var(--line);background:var(--glass-strong);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.agprog{font-size:13px;color:var(--muted);margin-right:auto}
.agprog b{color:var(--ink)}
.sheetbox{width:min(520px,100%);padding:clamp(20px,3vw,30px);opacity:0;transform:translateY(20px) scale(.98);transition:all .4s var(--ease);background:var(--glass-strong)}
#sheet.on .sheetbox{opacity:1;transform:none}
.sheetbox h3{margin:6px 0 2px;font-size:23px}
#sheet{z-index:92}

/* ---------- one way in: a single pulsing invitation ---------- */
.pathcta{display:grid;justify-items:start;gap:14px;align-content:end}
.pathbtn{all:unset;position:relative;box-sizing:border-box;cursor:pointer;display:grid;gap:4px;padding:26px 34px;border-radius:22px;background:linear-gradient(135deg,#E4C987,#BB933B 58%,#8A6A24);color:#021132;box-shadow:0 22px 50px -22px rgba(187,147,59,.9);transition:transform .35s var(--ease),box-shadow .35s}
.pathbtn:hover{transform:translateY(-2px);box-shadow:0 26px 60px -22px rgba(187,147,59,1)}
.pathbtn:focus-visible{outline:3px solid var(--navy);outline-offset:3px}
.pathbtn .t{font:400 clamp(20px,2.3vw,27px)/1.15 var(--serif)}
.pathbtn .s{font:500 13.5px var(--sans);opacity:.78}
.pathbtn .ring{position:absolute;inset:-6px;border-radius:26px;border:2px solid var(--gold);opacity:0;animation:cta 2.6s ease-out infinite}
.pathbtn.quiet{background:var(--glass-strong);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow);padding:18px 24px}
.pathbtn.quiet .ring{display:none}
.pathbtn.quiet .s{color:var(--accent);opacity:1;font-weight:600}
@keyframes cta{0%{opacity:.85;transform:scale(.97)}100%{opacity:0;transform:scale(1.12)}}
@media (prefers-reduced-motion: reduce){.pathbtn .ring{animation:none}}
:root[data-theme="dark"] .pathbtn.quiet{background:rgba(10,20,45,.6);color:var(--ivory);border-color:rgba(255,255,255,.18)}

.pathbox{width:min(720px,100%);padding:clamp(22px,3vw,34px);opacity:0;transform:translateY(20px) scale(.98);transition:all .45s var(--ease);background:var(--glass-strong)}
#paths.on .pathbox{opacity:1;transform:none}
#paths{z-index:86}
.pathpick{display:grid;gap:14px;margin-top:18px}
.pathpick .path{background:linear-gradient(135deg,var(--navy),var(--navy-2));color:var(--ivory);border:1px solid rgba(255,255,255,.14);box-shadow:0 18px 40px -26px rgba(2,17,50,.9)}
.pathpick .path:hover{background:linear-gradient(135deg,var(--navy-2),var(--navy));border-color:var(--gold)}
.pathpick .path .k{color:var(--gold-lite)}
.pathpick .path .go{border-color:rgba(255,255,255,.45)}
.pathpick .path[aria-pressed="true"]{border-color:var(--gold)}

/* ---------- reference library ---------- *
 * The guide answers when you know what to ask. This is the same material laid
 * out so you can look instead, and it stays useful after onboarding is done. */
#library{z-index:84}
.libsearch{margin:18px 0 4px}
.libsearch input{width:100%;box-sizing:border-box;font:500 15px var(--sans);color:var(--ink);
  background:var(--chip);border:1px solid var(--line);border-radius:14px;padding:13px 16px}
.libsearch input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.libcat{margin-top:22px}
.libcat .label{color:var(--accent);margin-bottom:8px}
.libitem{border-bottom:1px solid var(--line)}
.libitem:first-of-type{border-top:1px solid var(--line)}
.libitem summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:15px 4px;font:400 17px/1.3 var(--serif);color:var(--ink)}
.libitem summary::-webkit-details-marker{display:none}
.libitem summary:hover{color:var(--accent)}
.libitem summary i{flex:none;color:var(--accent);opacity:.5;display:grid;place-items:center;
  transform:rotate(90deg);transition:transform .3s var(--ease),opacity .3s}
.libitem[open] summary i{transform:rotate(-90deg);opacity:1}
.libitem summary span{min-width:0;overflow-wrap:break-word}
.libbody{padding:0 4px 18px;font-size:15px;line-height:1.7;color:var(--muted);max-width:74ch}
.libbody a{color:var(--accent);font-weight:600}
.libbody b{color:var(--ink)}
.linklike{all:unset;cursor:pointer;color:var(--accent);font:600 inherit;text-decoration:underline}
.linklike:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
.chatlib{padding:0 16px 10px;font-size:13px}
#library-inline p{color:var(--muted)}

/* Who to send it to — the directory tells you who works here, this tells you
   which of them wants your question. */
.routelist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.routelist li{padding:14px 18px;border-radius:16px;background:var(--chip);border:1px solid var(--line)}
.routelist b{display:block;font:400 17px var(--serif);color:var(--ink)}
.routelist p{margin:4px 0 8px;font-size:13.5px;line-height:1.6;color:var(--muted);max-width:62ch}
.routelist .go{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px}
.routelist .go a{color:var(--accent);font-weight:600;overflow-wrap:break-word}

/* Get to know you — three short blocks rather than one long wall of boxes. */
.subhead{margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.subhead:first-child{margin-top:8px;padding-top:0;border-top:0}
.subhead b{display:block;font:400 17px var(--serif);color:var(--ink)}
.subhead .small{display:block;margin-top:2px;max-width:58ch}
.subhead + .form{margin-top:12px}
/* v10: an admin's view-only look at someone's onboarding */
.viewas-bar{position:sticky;top:0;z-index:90;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;padding:10px 16px;background:#F9EEDA;color:#3a2a00;font:500 13.5px var(--sans);border-bottom:1px solid rgba(187,147,59,.6);text-align:center}
.viewas-bar .btn{padding:7px 12px;font-size:12.5px}

/* v10: set by assets/fit.js when a top bar is too full (see that file) */
header.fit-0 .savedot{display:none}
header.fit-1 .brand small{display:none}
header.fit-2 .brand b{display:none}
header.fit-3 .tool:has(svg) span{display:none}
header.fit-4 [data-fit="drop"]{display:none}
.brand b,.brand small{white-space:nowrap}
header .brand{flex:none}
header .brand b{overflow:visible;text-overflow:clip;max-width:none}
/* Gradient fills paint under their border (27 Oct 2026). With the default padding-box
   origin a gradient tiles into a transparent border and leaves a dark fringe at the ends. */
:root .btn,:root .path,:root .demoback,:root .stop .dot,:root .chk input,:root .task input,:root .helpfab{background-origin:border-box}