:root{
    --cream:#F5EEDF; --cream-light:#FAF5E9; --cream-deep:#ECE2CC;
    --paper:#FCFAF4; --paper-edge:#DDD2BB;
    --ink:#2C2925; --ink-soft:#5C544A; --ink-faint:#8F8678;
    --navy:#1F3D52; --navy-deep:#15293A; --navy-soft:#335A75;
    --coral:#B7423B; --coral-deep:#913028;
    --gold:#A38347; --sage:#5C7E5A;
    --rule:#D9CDB4; --rule-faint:#E8DEC9;
    --serif:"EB Garamond","Adobe Garamond Pro",Garamond,"Times New Roman",serif;
    --ui:"Geist","Inter",-apple-system,sans-serif;
    --mono:"Geist Mono","JetBrains Mono","SF Mono",Menlo,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{font-size:16px}
  body{
    font-family:var(--ui); color:var(--ink); background:var(--cream);
    min-height:100vh; -webkit-font-smoothing:antialiased;
  }
  /* paper grain */
  body::before{
    content:""; position:fixed; inset:0; pointer-events:none; z-index:0; opacity:.35;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.17 0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .frame{position:relative; z-index:1; max-width:1180px; margin:0 auto; padding:0 28px 64px}

  /* ── masthead ─────────────────────────────── */
  header{
    display:flex; align-items:baseline; justify-content:space-between;
    padding:30px 4px 18px; border-bottom:3px double var(--rule);
  }
  .wordmark{font-family:var(--serif); font-weight:600; font-size:1.35rem; letter-spacing:.14em; color:var(--navy)}
  .wordmark em{font-style:normal; color:var(--coral)}
  .masthead-sub{font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--ink-soft)}
  .safety-strip{
    display:flex; gap:26px; justify-content:center; flex-wrap:wrap;
    padding:11px 0 13px; border-bottom:1px solid var(--rule);
    font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  }
  .safety-strip span{display:flex; align-items:center; gap:8px}
  .safety-strip svg{flex:none}

  /* ── layout ───────────────────────────────── */
  .stage{display:grid; grid-template-columns:216px minmax(0,1fr) 252px; gap:34px; padding-top:34px}
  @media (max-width:980px){ .stage{grid-template-columns:1fr} .rail,.ledger{display:none} }

  /* left rail */
  .rail{position:sticky; top:24px; align-self:start}
  .rail-title{font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint); margin:4px 0 16px}
  .step-link{
    display:flex; gap:12px; align-items:baseline; padding:9px 2px; cursor:pointer;
    border-bottom:1px solid var(--rule-faint); user-select:none;
  }
  .step-link .no{font-family:var(--serif); font-style:italic; font-size:1.05rem; color:var(--ink-faint); width:18px; flex:none}
  .step-link .nm{font-size:.86rem; color:var(--ink-soft)}
  .step-link .tick{margin-left:auto; opacity:0; transition:opacity .25s}
  .step-link.done .tick{opacity:1}
  .step-link.active .no{color:var(--coral)}
  .step-link.active .nm{color:var(--ink); font-weight:600}
  .step-link.locked{cursor:default; opacity:.45}
  .rail-note{margin-top:22px; font-family:var(--serif); font-style:italic; font-size:.9rem; line-height:1.5; color:var(--ink-faint)}

  /* center panel */
  .panel{
    background:var(--paper); border:1px solid var(--paper-edge); border-radius:3px;
    box-shadow:0 1px 0 var(--paper-edge), 0 14px 34px -22px rgba(21,41,58,.35);
    padding:44px 52px 40px; min-height:560px;
  }
  @media (max-width:700px){ .panel{padding:30px 22px} }
  .step{display:none; animation:rise .45s ease both}
  .step.on{display:block}
  @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

  .kicker{font-size:.7rem; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:10px}
  h1{font-family:var(--serif); font-weight:500; font-size:2.05rem; line-height:1.15; color:var(--navy); margin-bottom:8px}
  .lede{font-family:var(--serif); font-size:1.08rem; line-height:1.55; color:var(--ink-soft); max-width:56ch; margin-bottom:30px}
  .lede strong{color:var(--ink)}

  /* forms */
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px 22px}
  @media (max-width:700px){ .grid2{grid-template-columns:1fr} }
  .field{display:flex; flex-direction:column; gap:6px}
  .field.full{grid-column:1/-1}
  label{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
  input[type=text],input[type=email],select,textarea{
    font-family:var(--ui); font-size:.95rem; color:var(--ink);
    background:var(--cream-light); border:1px solid var(--rule); border-radius:2px;
    padding:11px 12px; outline:none; transition:border-color .2s, box-shadow .2s;
  }
  textarea{resize:vertical; line-height:1.5}
  input:focus,select:focus,textarea:focus{border-color:var(--navy-soft); box-shadow:0 0 0 3px rgba(51,90,117,.12)}
  .hint{font-size:.8rem; color:var(--ink-faint); line-height:1.45}

  /* regulated notice */
  .regulated{
    display:none; margin-top:20px; padding:16px 18px; border:1px solid var(--gold);
    border-left:4px solid var(--gold); background:var(--cream-light); border-radius:2px;
  }
  .regulated.on{display:block; animation:rise .4s ease both}
  .regulated b{font-family:var(--serif); font-size:1.02rem; color:var(--navy)}
  .regulated p{font-size:.86rem; color:var(--ink-soft); line-height:1.5; margin-top:6px}

  /* provider cards */
  .providers{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:26px}
  @media (max-width:700px){ .providers{grid-template-columns:1fr} }
  .prov{
    border:1px solid var(--rule); border-radius:3px; background:var(--cream-light);
    padding:20px; cursor:pointer; text-align:center; transition:all .2s;
  }
  .prov:hover{border-color:var(--navy-soft)}
  .prov.sel{border-color:var(--navy); background:var(--paper); box-shadow:0 0 0 1px var(--navy), 0 8px 20px -14px rgba(21,41,58,.5)}
  .prov .glyph{font-family:var(--serif); font-size:1.7rem; color:var(--navy); margin-bottom:6px}
  .prov .pn{font-weight:600; font-size:.95rem}
  .prov .ps{font-size:.78rem; color:var(--ink-faint); margin-top:3px}
  .scopes{border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:18px 2px; margin-bottom:24px}
  .scopes h3{font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--navy); margin-bottom:12px}
  .scope{display:flex; gap:11px; align-items:flex-start; padding:6px 0; font-size:.9rem; color:var(--ink-soft)}
  .scope svg{flex:none; margin-top:2px}
  .scope.never{color:var(--ink)}
  .scope.never .strike{text-decoration:line-through; text-decoration-color:var(--coral); text-decoration-thickness:2px}
  .scope.never b{color:var(--coral-deep)}

  /* taxonomy */
  .tax{border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin-bottom:8px}
  .tax-row{display:flex; align-items:center; gap:14px; padding:14px 16px; background:var(--paper); border-bottom:1px solid var(--rule-faint)}
  .tax-row:last-child{border-bottom:none}
  .tax-dot{width:9px; height:9px; border-radius:50%; flex:none}
  .tax-name input{font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--navy); background:transparent; border:none; border-bottom:1px dashed transparent; padding:2px 0; width:180px}
  .tax-name input:hover,.tax-name input:focus{border-bottom-color:var(--rule); outline:none}
  .tax-desc{font-size:.8rem; color:var(--ink-faint); flex:1; min-width:0}
  .lock{margin-left:auto; display:flex; align-items:center; gap:6px; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); flex:none}
  .subs{padding:10px 16px 14px 39px; background:var(--cream-light); border-bottom:1px solid var(--rule-faint); display:flex; flex-wrap:wrap; gap:8px; align-items:center}
  .chip{
    display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
    border:1px solid var(--rule); background:var(--paper); font-size:.8rem; color:var(--ink-soft);
  }
  .chip .x{cursor:pointer; color:var(--ink-faint); font-size:.85rem; line-height:1}
  .chip .x:hover{color:var(--coral)}
  .chip-add{
    border:1px dashed var(--navy-soft); background:transparent; color:var(--navy-soft);
    cursor:pointer; font-size:.8rem; padding:5px 11px; border-radius:999px; font-family:var(--ui);
  }
  .chip-add:hover{background:rgba(51,90,117,.06)}

  /* rules table */
  .tablewrap{overflow-x:auto; margin-bottom:6px}
  .rules{width:100%; min-width:520px; border-collapse:collapse}
  .rules th{font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); text-align:left; padding:8px 8px; border-bottom:2px solid var(--rule); white-space:nowrap}
  .rules td{padding:12px 8px; border-bottom:1px solid var(--rule-faint); font-size:.9rem; vertical-align:middle}
  .rules td:first-child{font-family:var(--serif); font-weight:600; color:var(--navy); font-size:1rem}
  .rules .rd{font-size:.78rem; color:var(--ink-faint); font-family:var(--ui); font-weight:400; display:block; margin-top:2px}
  /* toggle */
  .tg{position:relative; display:inline-block; width:38px; height:21px; vertical-align:middle}
  .tg input{opacity:0; width:0; height:0}
  .tg i{position:absolute; inset:0; background:var(--cream-deep); border:1px solid var(--rule); border-radius:999px; transition:.2s; cursor:pointer}
  .tg i::after{content:""; position:absolute; width:15px; height:15px; left:2px; top:2px; border-radius:50%; background:var(--paper); border:1px solid var(--rule); transition:.2s}
  .tg input:checked + i{background:var(--sage); border-color:var(--sage)}
  .tg input:checked + i::after{transform:translateX(17px); border-color:var(--sage)}
  .tg input:disabled + i{opacity:.45; cursor:not-allowed}
  .noSend{
    margin-top:18px; padding:14px 18px; border:1px solid var(--rule); border-radius:2px;
    background:var(--cream-light); display:flex; gap:12px; align-items:flex-start;
  }
  .noSend p{font-size:.86rem; color:var(--ink-soft); line-height:1.5}
  .noSend b{color:var(--coral-deep)}

  /* teach */
  .consent{
    margin-top:20px; padding:16px 18px; border:1px solid var(--rule); border-radius:2px; background:var(--cream-light);
    display:flex; gap:14px; align-items:flex-start;
  }
  .consent .txt b{font-family:var(--serif); font-size:1rem; color:var(--navy)}
  .consent .txt p{font-size:.84rem; color:var(--ink-soft); line-height:1.5; margin-top:4px}
  .sigcard{
    margin-top:20px; border:1px solid var(--rule); border-radius:3px; background:var(--paper); padding:16px 18px;
  }
  .sigcard .sc-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
  .sigcard h4{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft)}
  .sigcard .found{font-size:.74rem; color:var(--sage); display:flex; gap:6px; align-items:center}
  .sigbody{font-family:var(--serif); font-size:.95rem; line-height:1.5; color:var(--ink); border-left:3px solid var(--rule); padding-left:14px}
  .sigbody .s1{font-weight:600; color:var(--navy)}
  .sigbody .s2{font-size:.85rem; color:var(--ink-soft)}

  /* shadow / review */
  .bundle{display:grid; grid-template-columns:200px 1fr; gap:0; border:1px solid var(--rule); border-radius:3px; overflow:hidden; margin:22px 0}
  @media (max-width:700px){ .bundle{grid-template-columns:1fr} }
  .ftree{background:var(--navy-deep); color:#cdd9e2; font-family:var(--mono); font-size:.72rem; line-height:1.9; padding:16px 10px; white-space:nowrap; overflow-x:auto}
  .ftree .dir{color:#8fa8ba}
  .ftree .f{cursor:pointer; display:block; padding:0 6px; border-radius:2px}
  .ftree .f:hover{background:rgba(255,255,255,.07)}
  .ftree .f.sel{background:var(--coral); color:#fff}
  .fview{background:var(--navy); color:#e8eef2; font-family:var(--mono); font-size:.76rem; line-height:1.75; padding:16px 18px; overflow-x:auto; white-space:pre}
  .fview .c{color:#7f99ab} .fview .k{color:#e8c987} .fview .v{color:#fff}
  .gate{border:1px solid var(--rule); border-radius:3px; background:var(--cream-light); padding:18px 20px; margin-top:22px}
  .gate h3{font-family:var(--serif); font-size:1.08rem; font-weight:600; color:var(--navy); margin-bottom:10px}
  .gate li{list-style:none; display:flex; gap:10px; align-items:flex-start; padding:5px 0; font-size:.87rem; color:var(--ink-soft); line-height:1.45}
  .gate li svg{flex:none; margin-top:2px}
  .digestrow{display:flex; gap:14px; margin-top:10px; flex-wrap:wrap}
  .radio{
    display:flex; gap:9px; align-items:center; border:1px solid var(--rule); border-radius:2px;
    background:var(--cream-light); padding:11px 16px; cursor:pointer; font-size:.88rem;
  }
  .radio input{accent-color:var(--coral)}
  .radio.sel{border-color:var(--navy); background:var(--paper)}

  /* nav */
  .nav{display:flex; justify-content:space-between; align-items:center; margin-top:36px; padding-top:22px; border-top:1px solid var(--rule)}
  .btn{
    font-family:var(--ui); font-size:.86rem; letter-spacing:.06em; cursor:pointer; border-radius:2px;
    padding:12px 26px; border:1px solid transparent; transition:all .2s;
  }
  .btn-primary{background:var(--coral); color:#fff; border-color:var(--coral-deep); box-shadow:0 2px 0 var(--coral-deep)}
  .btn-primary:hover{background:var(--coral-deep)}
  .btn-primary:active{transform:translateY(1px); box-shadow:none}
  .btn-ghost{background:transparent; color:var(--ink-soft); border-color:var(--rule)}
  .btn-ghost:hover{border-color:var(--ink-faint)}
  .btn-oauth{
    background:var(--navy); color:#fff; border-color:var(--navy-deep); box-shadow:0 2px 0 var(--navy-deep);
    display:inline-flex; gap:10px; align-items:center; font-size:.9rem;
  }
  .btn-oauth:hover{background:var(--navy-deep)}
  .btn[disabled]{opacity:.4; cursor:not-allowed}

  /* right ledger */
  .ledger{position:sticky; top:24px; align-self:start}
  .ledger-card{border:1px solid var(--paper-edge); background:var(--paper); border-radius:3px; padding:20px 20px 16px; box-shadow:0 10px 26px -20px rgba(21,41,58,.4)}
  .ledger h3{font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--navy); padding-bottom:10px; border-bottom:3px double var(--rule); margin-bottom:12px}
  .li{display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px solid var(--rule-faint); font-size:.8rem}
  .li:last-child{border-bottom:none}
  .li .lk{color:var(--ink-faint)}
  .li .lv{color:var(--ink); text-align:right; font-weight:500; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .li .lv.tbd{color:var(--ink-faint); font-weight:400; font-style:italic; font-family:var(--serif)}
  .ledger-note{margin-top:14px; font-family:var(--serif); font-style:italic; font-size:.86rem; line-height:1.5; color:var(--ink-faint)}
  .ledger-note b{color:var(--coral); font-style:normal}

  footer{margin-top:40px; text-align:center; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint)}
  footer .rule{width:64px; height:3px; border-top:3px double var(--rule); margin:0 auto 12px}