/* FlexTIM landing — "a document being interrogated"
   Paper white / ink / red-pen accent. No gradients. */

:root{
  --paper:#FDFDFB;
  --ink:#191A1C;
  --ink-2:#4A4D52;
  --pen:#C42B1F;
  --steel:#274A66;
  --highlight:#F6E7A2;
  --rule:#E3E2DC;
  --serif:"Newsreader", Georgia, serif;
  --sans:ui-sans-serif, -apple-system, "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  --hand:"Caveat", cursive;
  --col:880px;
}

*{box-sizing:border-box;}
::selection{background:var(--highlight);}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.col{max-width:var(--col);margin:0 auto;padding:0 24px;}
a{color:var(--steel);text-underline-offset:3px;}
a:hover{color:var(--pen);}
:focus-visible{outline:2px solid var(--pen);outline-offset:2px;}
em{font-style:italic;}
strong{font-weight:600;}

/* ---------- masthead ---------- */
.masthead{border-bottom:1px solid var(--rule);padding:14px 0;}
.course-code{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;
  color:var(--ink-2);margin:0;
}

/* ---------- hero ---------- */
.hero{padding:72px 0 40px;}
h1{
  font-family:var(--serif);font-weight:600;font-optical-sizing:auto;
  font-size:clamp(34px, 5.6vw, 58px);
  line-height:1.08;letter-spacing:-.015em;margin:0 0 22px;
  text-wrap:balance;
}
.hero-sub{
  font-size:21px;color:var(--ink-2);line-height:1.55;
  max-width:44em;margin:0 0 44px;
}

/* the signature: a specimen paragraph under the red pen */
.marked-up{
  margin:0 0 44px;padding:34px 38px 22px;
  border:1px solid var(--rule);background:#FFFFFF;
}
.specimen{
  font-family:var(--sans);font-size:17.5px;color:var(--ink-2);
  line-height:2.7;               /* generous leading so margin notes live between lines */
  margin:0 0 14px;max-width:40em;
}
.ann{
  position:relative;
  text-decoration:underline wavy var(--pen) 1.5px;
  text-underline-offset:4px;
  text-decoration-skip-ink:none;
}
.ann.circle{
  text-decoration:none;
  border:1.5px solid var(--pen);border-radius:999px;padding:0 .35em;
}
.ann::after{
  content:attr(data-note);
  position:absolute;left:0;
  font-family:var(--hand);font-size:19px;font-weight:600;
  color:var(--pen);line-height:1.1;
  width:max-content;max-width:56vw;
  transform:rotate(-1.6deg);
  opacity:0;
  animation:annIn .45s ease forwards;
}
.ann.up::after{top:-1.35em;}
.ann.down::after{bottom:-1.3em;}
.specimen .ann:nth-of-type(1)::after{animation-delay:.5s;}
.specimen .ann:nth-of-type(2)::after{animation-delay:1.1s;}
.specimen .ann:nth-of-type(3)::after{animation-delay:1.7s;}
.specimen .ann:nth-of-type(4)::after{animation-delay:2.3s;}
@keyframes annIn{from{opacity:0;transform:rotate(-1.6deg) translateY(4px);}
                 to{opacity:1;transform:rotate(-1.6deg) translateY(0);}}
@media (prefers-reduced-motion:reduce){
  .ann::after{animation:none;opacity:1;}
}
.marked-up figcaption{
  font-family:var(--mono);font-size:12px;color:var(--ink-2);
  letter-spacing:.02em;border-top:1px solid var(--rule);padding-top:12px;
}

/* ---------- CTA ---------- */
.btn{
  display:inline-block;
  font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:.04em;
  background:var(--ink);color:var(--paper);
  border:0;border-radius:3px;
  padding:14px 26px;cursor:pointer;text-decoration:none;
}
.btn:hover{background:var(--pen);color:#fff;}
.cta-note{font-size:14.5px;color:var(--ink-2);font-family:var(--sans);margin:10px 0 0;}

/* ---------- units (sections) ---------- */
.unit{padding:58px 0 26px;border-top:1px solid var(--rule);}
.unit-label{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pen);margin:0 0 14px;
}
h2{
  font-family:var(--serif);font-weight:600;
  font-size:clamp(26px, 3.6vw, 36px);line-height:1.15;
  letter-spacing:-.01em;margin:0 0 18px;text-wrap:balance;
}
.unit-lede{font-size:20px;color:var(--ink-2);max-width:42em;}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;}
.two-col p{margin:0 0 1em;}
@media (max-width:720px){.two-col{grid-template-columns:1fr;}}

/* ---------- the eight elements ---------- */
.elements{
  list-style:none;margin:28px 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--rule);border:1px solid var(--rule);
}
.elements li{background:var(--paper);padding:16px 16px 18px;}
.elements b{
  display:block;font-family:var(--serif);font-weight:600;font-size:18px;
  margin-bottom:4px;
}
.elements span{
  display:block;font-family:var(--sans);font-size:13.5px;
  color:var(--ink-2);line-height:1.45;
}
@media (max-width:860px){.elements{grid-template-columns:repeat(2,1fr);}}
@media (max-width:460px){.elements{grid-template-columns:1fr;}}
.proof-link{font-family:var(--sans);font-size:16.5px;}

/* ---------- interactive sample ---------- */
.try-passage{
  font-family:var(--sans);font-size:17.5px;line-height:2.1;color:var(--ink-2);
  background:#FFFFFF;border:1px solid var(--rule);padding:28px 32px;
  margin:0;max-width:44em;
}
.sent{
  font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;
  cursor:pointer;text-align:left;display:inline;
}
.sent:hover{background:var(--highlight);}
.sent.found{
  text-decoration:underline wavy var(--pen) 1.5px;text-underline-offset:4px;
  text-decoration-skip-ink:none;color:var(--ink);
}
.sent.found:hover{background:none;cursor:default;}
.sent.nope{background:#EFEFEC;}
.try-status{
  font-family:var(--mono);font-size:12px;letter-spacing:.06em;
  color:var(--ink-2);margin:14px 0 0;
}
.tf{display:flex;gap:12px;align-items:baseline;margin:10px 0 0;}
.tf-name{
  font-family:var(--hand);color:var(--pen);font-size:21px;font-weight:600;
  transform:rotate(-1.5deg);white-space:nowrap;
}
.tf-why{font-family:var(--sans);font-size:14.5px;color:var(--ink-2);}
.try-done{
  font-size:17px;margin:20px 0 0;padding:16px 20px;
  border-left:3px solid var(--pen);background:#FFFFFF;
}

/* ---------- provenance ---------- */
.rr-quote{
  margin:30px 0 0;padding:6px 0 6px 26px;
  border-left:3px solid var(--pen);
}
.rr-quote p{
  font-size:clamp(20px, 2.8vw, 26px);font-style:italic;line-height:1.4;
  margin:0 0 8px;
}
.rr-quote cite{
  font-family:var(--mono);font-style:normal;font-size:12px;color:var(--ink-2);
}

/* ---------- signup worksheet ---------- */
.signup{padding-bottom:80px;}
.worksheet{
  border:2px solid var(--ink);background:#FFFFFF;
  padding:34px 38px 30px;max-width:560px;
}
.worksheet h2{margin-bottom:24px;}
.hp{position:absolute;left:-9999px;}
.field{margin:0 0 22px;padding:0;border:0;}
.field label, .field legend{
  display:block;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:8px;padding:0;
}
.field input[type="email"]{
  width:100%;font-family:var(--sans);font-size:17px;color:var(--ink);
  background:var(--paper);border:1px solid var(--ink-2);border-radius:3px;
  padding:12px 14px;
}
.field input[type="email"]:focus{border-color:var(--pen);outline:none;}
.radio{
  display:flex;align-items:center;gap:10px;
  font-family:var(--sans);font-size:16.5px;color:var(--ink);
  text-transform:none;letter-spacing:0;
  margin:0 0 10px;cursor:pointer;
}
.radio input{accent-color:var(--pen);width:17px;height:17px;margin:0;}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding:34px 0 60px;}
footer p{
  font-family:var(--sans);font-size:13.5px;color:var(--ink-2);margin:0 0 6px;
}

/* ---------- thanks page ---------- */
.thanks{padding:110px 0 80px;}
.thanks .big-check{
  font-family:var(--hand);font-size:64px;color:var(--pen);
  display:block;margin-bottom:8px;transform:rotate(-4deg);
}