/* Ace of Coins — Exposure Score. "Paper, not pixels." */
:root{
  --ground:#EEF0F3;      /* the desk */
  --paper:#FFFFFF;       /* the form */
  --ink:#1A1F26;
  --slate:#5A6673;
  --rule:#D3D8DE;
  --rule-strong:#AEB5BE;
  --green:#1D6A45;       /* the one button */
  --green-dark:#154F33;
  --red:#B5321F;         /* the stamp, nothing else */
  --focus:#2F6FD1;
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--serif);font-size:18px;line-height:1.5;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.page{max-width:1040px;margin:0 auto;padding:28px 20px 48px}
.masthead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:14px;border-bottom:1px solid var(--rule-strong);margin-bottom:28px;font-family:var(--sans);font-size:13px;color:var(--slate)}
.masthead .brand{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.masthead .geo{text-align:right}

.grid{display:grid;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:auto 1fr;column-gap:40px;align-items:start}
.form{grid-column:2;grid-row:1/3}
.lede-h1{grid-column:1}
.lede{grid-column:1}
.lede-h1{font-size:44px;line-height:1.08;font-weight:500;letter-spacing:-.02em;max-width:18ch;margin-bottom:18px}
.lede p{font-size:19px;line-height:1.55;color:var(--ink);max-width:52ch}
.lede p+p{margin-top:12px}

.gets{list-style:none;margin:18px 0 6px;max-width:52ch}
.gets li{position:relative;padding:7px 0 7px 34px;font-size:18px;line-height:1.45}
.gets li::before{content:"";position:absolute;left:0;top:11px;width:18px;height:18px;border:1.5px solid var(--ink);background:#fff}
.gets li::after{content:"";position:absolute;left:6px;top:13px;width:5px;height:10px;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.assure{font-family:var(--sans);font-size:13.5px;font-weight:600;letter-spacing:.01em;color:var(--ink);margin-top:14px}
.cred{margin-top:26px;padding-top:18px;border-top:1px solid var(--rule-strong);max-width:52ch;font-size:16px;line-height:1.55;color:var(--slate)}
.note{margin-top:34px;padding-top:22px;border-top:1px solid var(--rule-strong);display:grid;grid-template-columns:72px 1fr;gap:18px;align-items:start;max-width:540px}
.note .photo{width:72px;height:72px;border-radius:50%;overflow:hidden;background:#C9CFD6;display:flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;color:#fff;font-size:22px}
.note .photo img{width:100%;height:100%;object-fit:cover;display:block}
.note p{font-size:17px;line-height:1.5;color:#2E3740}
.note .sig{margin-top:10px;font-family:var(--sans);font-size:13px;color:var(--slate)}
.note .sig b{display:block;font-family:var(--serif);font-size:17px;color:var(--ink);font-weight:600}

/* the form */
.form{background:var(--paper);border:1px solid var(--ink);box-shadow:0 18px 40px -22px rgba(26,31,38,.5);padding:0 26px 22px;position:sticky;top:20px;overflow:hidden}
.form-head{display:flex;justify-content:space-between;align-items:center;font-family:var(--sans);font-size:13px;color:#C9D0D8;background:var(--ink);margin:0 -26px;padding:13px 20px}
.form-head b{font-family:var(--serif);font-weight:600;font-size:17px;color:#fff;letter-spacing:-.01em}
.progress{height:4px;background:#DADFE5;margin:0 -26px 20px}
.progress i{display:block;height:100%;background:var(--green);transition:width .3s ease}
.step{display:none}
.step.active{display:block}
.q{font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.hint{font-family:var(--sans);font-size:14px;color:var(--slate);margin-bottom:12px;line-height:1.45}

.opts{list-style:none;margin:4px 0 2px;display:grid;gap:8px}
.opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#F6F7F9;border:1.5px solid #D8DDE3;border-radius:4px;padding:12px 12px 12px 14px;font-family:var(--sans);font-size:15.5px;font-weight:500;line-height:1.35;color:var(--ink);cursor:pointer;transition:border-color .12s,background .12s}
.opt .lbl{flex:1}
.opt .chev{flex:none;width:8px;height:8px;border:solid #8A939D;border-width:0 2px 2px 0;transform:rotate(-45deg);margin-right:4px}
.opt:hover{border-color:var(--ink);background:#fff}
.opt:hover .chev{border-color:var(--ink)}
.opt .box{flex:none;width:18px;height:18px;border:1.5px solid var(--ink);background:#fff;position:relative;border-radius:2px}
.opt .box::after{content:"";position:absolute;left:5px;top:1px;width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);opacity:0}
.opt.sel .box{background:var(--ink)}
.opt.sel .box::after{opacity:1}
.opt.sel{border-color:var(--ink);background:#fff;font-weight:600}

.field{display:block;width:100%;font-family:var(--sans);font-size:17px;padding:13px 12px;border:1.5px solid var(--rule-strong);background:#fff;margin:8px 0 0;border-radius:0;color:var(--ink)}
.field::placeholder{color:#8A939D}
.field:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(47,111,209,.18)}
select.field{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231A1F26' stroke-width='1.8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.btn{display:block;width:100%;margin-top:16px;font-family:var(--sans);font-size:17px;font-weight:600;letter-spacing:.005em;background:var(--green);color:#fff;border:0;border-radius:3px;padding:16px;cursor:pointer}
.btn:hover{background:var(--green-dark)}
.btn[disabled]{background:#B9C2CB;cursor:not-allowed}
.err{font-family:var(--sans);color:var(--red);font-size:14px;margin:8px 0 0}
.consent{font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--slate);margin-top:14px}
.consent a{color:var(--ink)}
.fine{font-family:var(--sans);font-size:12px;color:var(--slate);margin-top:14px;line-height:1.5}

.foot{max-width:1040px;margin:0 auto;padding:0 20px 40px;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--slate)}
.foot p+p{margin-top:6px}
.foot a{color:var(--slate)}

/* results */
.result{background:var(--paper);border:1px solid var(--rule-strong);box-shadow:0 12px 32px -18px rgba(26,31,38,.35);padding:34px 32px;max-width:680px}
.stamp-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--rule);margin-bottom:22px}
.stamp{justify-self:end;transform:rotate(-4deg);border:3px solid var(--red);color:var(--red);padding:10px 16px 8px;text-align:center;font-family:var(--sans);font-weight:800;letter-spacing:.08em;line-height:1;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3.5px var(--red);mix-blend-mode:multiply;opacity:.92}
.stamp .big{display:block;font-size:52px;letter-spacing:-.02em;margin:2px 0 4px}
.stamp .lbl{display:block;font-size:11px}
.stamp .lvl{display:block;font-size:14px;margin-top:6px;padding-top:6px;border-top:2px solid var(--red)}
.result h2{font-size:22px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.result .lead-in{font-size:18px;color:#2E3740;line-height:1.5}
.gaps{list-style:none;margin:16px 0 26px}
.gaps li{padding:14px 0 14px 18px;border-left:2px solid var(--ink);border-bottom:1px solid var(--rule)}
.gaps li:last-child{border-bottom:0}
.gaps li b{display:block;font-size:19px;font-weight:500;letter-spacing:-.01em;margin-bottom:4px}
.gaps li span{font-size:16.5px;color:#2E3740;line-height:1.5}
.next{border-top:1px solid var(--ink);padding-top:18px}
.next h3{font-size:19px;font-weight:500;margin-bottom:8px}
.next p{font-size:17px;color:#2E3740;line-height:1.5}
.next .num{display:block;margin:12px 0;font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:.01em;color:var(--ink)}

@media (max-width:860px){
  .grid{grid-template-columns:1fr;grid-template-rows:auto;row-gap:22px}
  .lede-h1{grid-row:1;font-size:32px;max-width:none;margin-bottom:0}
  .form{position:static;grid-column:1;grid-row:2}
  .lede{grid-row:3;padding-top:4px}
  .lede p{font-size:17px}
}
@media (max-width:480px){
  body{font-size:17px}
  .page{padding:18px 14px 36px}
  .masthead{margin-bottom:16px;font-size:12px;padding-bottom:10px}
  .masthead .brand{font-size:18px;white-space:nowrap}
  .masthead > span:not(.brand){display:none}
  .lede-h1{font-size:27px}
  .form{padding:0 16px 16px}
  .form-head{margin:0 -16px;padding:12px 16px}
  .progress{margin:0 -16px 16px}
  .gets li{font-size:16.5px}
  .q{font-size:20px}
  .opt{font-size:15px;padding:12px 10px 12px 12px}
  .row{grid-template-columns:1fr}
  .note{grid-template-columns:56px 1fr;gap:14px}
  .note .photo{width:56px;height:56px;font-size:18px}
  .result{padding:24px 18px}
  .stamp-row{grid-template-columns:1fr}
  .stamp{justify-self:start;margin-top:4px}
  .stamp .big{font-size:44px}
}