:root{
  --ink:#1d2430;
  --muted:#5c6673;
  --rule:#dfe3e8;
  --paper:#ffffff;
  --wash:#f6f7f9;
  --accent:#2f4f7f;
  --accent-dark:#243d63;
  --good:#1d6b4f;
  --bad:#9b2c2c;
  --radius:6px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--wash);
  color:var(--ink);
  font:17px/1.65 Georgia,"Times New Roman",serif;
}

main{
  max-width:46rem;
  margin:0 auto;
  padding:2.5rem 1rem 4rem;
}

/* ---------------------------------------------------------------- heading */

.masthead{margin:0 0 1.75rem}

.eyebrow{
  margin:0 0 .5rem;
  font:600 .72rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
}

h1{
  margin:0 0 .6rem;
  font-size:1.85rem;
  line-height:1.2;
  font-weight:700;
  letter-spacing:-.01em;
}

.study{
  margin:0;
  font-style:italic;
  color:var(--muted);
  font-size:1.02rem;
  line-height:1.5;
}

/* ----------------------------------------------------------------- panels */

.panel{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem;
  margin:0 0 1.25rem;
}

.panel h2{
  margin:1.6rem 0 .6rem;
  font-size:1.12rem;
  line-height:1.3;
  letter-spacing:.01em;
}
.panel h2:first-child{margin-top:0}

.panel h3{
  margin:0 0 .3rem;
  font-size:1rem;
  font-weight:700;
}

.panel p{margin:0 0 .85rem}
.panel p:last-child{margin-bottom:0}

a{color:var(--accent)}
a:hover{color:var(--accent-dark)}

/* ------------------------------------------------------------------- form */

fieldset{
  border:0;
  border-bottom:1px solid var(--rule);
  margin:0 0 1.15rem;
  padding:0 0 1rem;
}
fieldset:last-of-type{border-bottom:0;padding-bottom:0;margin-bottom:0}
fieldset.bad{
  background:#fdf6f6;
  border-bottom-color:#e9cfcf;
  padding:.8rem .9rem;
  border-radius:var(--radius);
}

legend{
  padding:0 0 .3rem;
  font-weight:700;
  font-size:1rem;
  line-height:1.45;
}

.choice{
  display:flex;
  gap:.6rem;
  align-items:flex-start;
  padding:.4rem 0;
  cursor:pointer;
}
.choice input{
  margin:.42rem 0 0;
  flex:0 0 auto;
  width:1rem;height:1rem;
  accent-color:var(--accent);
}
.choice span{flex:1}

input[type=text],
input[type=email]{
  width:100%;
  margin-top:.65rem;
  padding:.62rem .7rem;
  font:16px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--ink);
  background:#fff;
  border:1px solid #c4cad2;
  border-radius:var(--radius);
}
input[type=text]:focus,
input[type=email]:focus,
button:focus{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

.submit-note{
  margin:1.2rem 0 1.1rem;
  padding-top:1rem;
  border-top:1px solid var(--rule);
  color:var(--muted);
  font-size:.95rem;
}

button{
  font:600 .95rem/1 system-ui,-apple-system,"Segoe UI",sans-serif;
  padding:.72rem 1.2rem;
  border-radius:var(--radius);
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  cursor:pointer;
}
button:hover{background:var(--accent-dark);border-color:var(--accent-dark)}
button.secondary{
  background:#fff;
  color:var(--accent);
}
button.secondary:hover{background:#f0f3f8;color:var(--accent-dark)}
button.done{background:var(--good);border-color:var(--good);color:#fff}

.primary{min-width:10rem}

/* ----------------------------------------------------------------- result */

.flash{
  background:#f3f7ff;
  border:1px solid #cfdcf2;
  border-radius:var(--radius);
  padding:.8rem .9rem;
  font-size:.96rem;
}

.code-line{
  font:600 1.02rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
  letter-spacing:.01em;
}

.link-card{
  border:1px solid var(--rule);
  border-radius:var(--radius);
  padding:1rem 1rem .9rem;
  margin:1rem 0;
  background:#fcfdfe;
}
.link-card .who{
  color:var(--muted);
  font-size:.93rem;
  margin-bottom:.7rem;
}

.link-row{display:flex;gap:.5rem;align-items:stretch}
.link-row input{
  margin-top:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.86rem;
}
.link-row button{flex:0 0 auto;padding:.6rem .95rem}

.keep{
  margin-top:1.2rem;
  padding:.85rem .9rem;
  background:#fffaf0;
  border:1px solid #efe0c4;
  border-radius:var(--radius);
  font-size:.96rem;
}

.email-box{
  margin-top:1.5rem;
  padding-top:1.2rem;
  border-top:1px solid var(--rule);
}
.email-form{
  display:flex;
  gap:.5rem;
  align-items:stretch;
  margin-top:.3rem;
}
.email-form input{margin-top:0;flex:1}
.email-form button{flex:0 0 auto;white-space:nowrap}

.sent{
  background:#f1f8f4;
  border:1px solid #c9e3d5;
  border-radius:var(--radius);
  padding:.8rem .9rem;
}
.sent-again{font-size:.94rem;color:var(--muted)}

.questions,
.questions-panel p{color:var(--muted);font-size:.96rem}
.questions{margin-top:1.4rem;padding-top:1rem;border-top:1px solid var(--rule)}

.error{
  margin:.45rem 0 .3rem;
  color:var(--bad);
  font:600 .92rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;
}

.sr-only{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------------ small */

@media (max-width:34rem){
  body{font-size:16px}
  main{padding:1.75rem .85rem 3rem}
  .panel{padding:1.2rem 1rem}
  h1{font-size:1.5rem}
  .link-row,.email-form{flex-direction:column}
  .link-row button,.email-form button{width:100%}
}