:root{
  --ink:#101a29;
  --ink-soft:#4a5768;
  --paper:#eceff4;
  --card:#ffffff;
  --rule:#c9d2de;
  --rule-soft:#e2e7ee;
  --mark:#f4d564;
  --mark-deep:#c99c14;
  --flag:#8c2f26;
  --maxw:70rem;
  --pad:clamp(1.25rem,4vw,2.5rem);
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.01em;
  margin:0;
}

h1{font-size:clamp(2.15rem,5.4vw,3.6rem)}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
h3{font-size:1.125rem;line-height:1.3}

p{margin:0 0 1rem;max-width:62ch}

a{color:var(--ink);text-decoration-color:var(--mark-deep);text-underline-offset:.18em}
a:hover{text-decoration-color:var(--ink)}

:focus-visible{outline:3px solid var(--flag);outline-offset:3px}

.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}

.band{padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(3rem,7vw,5.5rem)}
.band-line{border-top:1px solid var(--rule)}
.band-white{background:var(--card)}

/* ---------- header ---------- */
.masthead{
  border-bottom:1px solid var(--rule);
  background:var(--card);
}
.masthead .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding-top:1rem;
  padding-bottom:1rem;
}
.wordmark{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1.3rem;
  font-weight:600;
  text-decoration:none;
  letter-spacing:-.01em;
}
.wordmark span{
  background:linear-gradient(transparent 62%,var(--mark) 62%);
  padding-bottom:.05em;
}
.masthead nav{display:flex;gap:1.4rem;font-size:.95rem}
.masthead nav a{text-decoration:none;color:var(--ink-soft);white-space:nowrap}
.masthead nav a:hover{color:var(--ink)}

@media (max-width:40rem){
  .masthead .wrap{flex-direction:column;align-items:flex-start;gap:.6rem}
  .masthead nav{gap:1.1rem;font-size:.875rem;flex-wrap:wrap}
}

/* ---------- hero ---------- */
.hero{padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:clamp(2.5rem,5vw,4rem)}
.hero h1{max-width:17ch}
.hero .lede{
  font-size:clamp(1.1rem,2.2vw,1.3rem);
  color:var(--ink-soft);
  max-width:54ch;
  margin-top:1.4rem;
}

/* ---------- signup ---------- */
.signup{margin-top:2rem;max-width:34rem}
.signup-row{display:flex;flex-wrap:wrap;gap:.6rem}
.signup input[type=email]{
  flex:1 1 15rem;
  font:inherit;
  padding:.8rem .95rem;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--card);
  color:var(--ink);
}
.signup input[type=email]::placeholder{color:#95a1b1}
.btn{
  font:inherit;
  font-weight:600;
  padding:.8rem 1.5rem;
  border:1px solid var(--ink);
  border-radius:2px;
  background:var(--ink);
  color:#fff;
  cursor:pointer;
  text-decoration:none;
  display:inline-block;
}
.btn:hover{background:#000}
.fineprint{font-size:.875rem;color:var(--ink-soft);margin-top:.7rem}
.hidden{position:absolute;left:-9999px}

/* ---------- transform panel ---------- */
.transform{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--rule);
  border:1px solid var(--rule);
  margin-top:clamp(2.5rem,5vw,3.5rem);
}
@media (min-width:52rem){.transform{grid-template-columns:1fr 1fr}}
.panel{background:var(--card);padding:clamp(1.25rem,3vw,1.9rem)}
.panel-head{
  font-size:.85rem;
  color:var(--ink-soft);
  margin:0 0 1rem;
  padding-bottom:.6rem;
  border-bottom:1px solid var(--rule-soft);
}
.notes{
  font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  font-size:.85rem;
  line-height:1.7;
  color:var(--ink-soft);
  white-space:pre-wrap;
  margin:0;
}
.abstract h4{
  font-family:"IBM Plex Sans",sans-serif;
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.02em;
  margin:1.1rem 0 .25rem;
  color:var(--mark-deep);
}
.abstract h4:first-child{margin-top:0}
.abstract p{font-size:.92rem;line-height:1.55;margin:0;max-width:none}
.abstract sup{font-size:.7em;color:var(--flag)}
.refline{
  margin-top:1.4rem;
  padding-top:.8rem;
  border-top:1px solid var(--rule-soft);
  font-size:.8rem;
  color:var(--ink-soft);
}

/* ---------- steps ---------- */
.steps{list-style:none;margin:2.5rem 0 0;padding:0;counter-reset:s;display:grid;gap:1.75rem}
@media (min-width:52rem){.steps{grid-template-columns:repeat(3,1fr);gap:2.5rem}}
.steps li{counter-increment:s;padding-top:1rem;border-top:2px solid var(--ink)}
.steps li::before{
  content:counter(s);
  font-family:"Source Serif 4",Georgia,serif;
  font-size:1rem;
  color:var(--ink-soft);
  display:block;
  margin-bottom:.5rem;
}
.steps h3{margin-bottom:.4rem}
.steps p{font-size:.95rem;color:var(--ink-soft);margin:0}

/* ---------- feature list ---------- */
.features{list-style:none;margin:2.5rem 0 0;padding:0;display:grid;gap:1.6rem}
@media (min-width:44rem){.features{grid-template-columns:1fr 1fr;gap:1.6rem 3rem}}
.features li{padding-left:1.4rem;position:relative}
.features li::before{
  content:"";
  position:absolute;
  left:0;top:.62em;
  width:.55rem;height:.55rem;
  background:var(--mark);
  border:1px solid var(--mark-deep);
}
.features strong{display:block;font-weight:600}
.features span{color:var(--ink-soft);font-size:.95rem}

/* ---------- pricing ---------- */
.prices{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:2.5rem}
@media (min-width:52rem){.prices{grid-template-columns:repeat(3,1fr)}}
.price{background:var(--card);padding:1.75rem}
.price .amt{
  font-family:"Source Serif 4",Georgia,serif;
  font-size:2.4rem;
  line-height:1;
  display:block;
  margin-bottom:.35rem;
}
.price .unit{font-size:.9rem;color:var(--ink-soft);display:block;margin-bottom:1rem}
.price p{font-size:.95rem;color:var(--ink-soft);margin:0}
.price-mark .amt{background:linear-gradient(transparent 66%,var(--mark) 66%);display:inline-block}

/* ---------- notice ---------- */
.notice{
  border:1px solid var(--flag);
  border-left-width:5px;
  background:var(--card);
  padding:clamp(1.25rem,3vw,2rem);
  margin-top:2.5rem;
}
.notice h3{margin-bottom:.6rem}
.notice ul{margin:.8rem 0 0;padding-left:1.1rem;color:var(--ink-soft);font-size:.95rem}
.notice li{margin-bottom:.35rem}

/* ---------- faq ---------- */
.faq{margin-top:2.5rem;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule);padding:1.1rem 0}
.faq summary{
  cursor:pointer;
  font-weight:600;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--ink-soft);font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:.85rem 0 0;color:var(--ink-soft);font-size:.97rem}

/* ---------- prose pages ---------- */
.prose{max-width:44rem}
.prose h2{margin:2.5rem 0 .75rem;font-size:1.4rem}
.prose h2:first-of-type{margin-top:1.5rem}
.prose ul{padding-left:1.2rem;color:var(--ink-soft)}
.prose li{margin-bottom:.4rem}
.prose .updated{color:var(--ink-soft);font-size:.9rem}

/* ---------- footer ---------- */
.colophon{
  border-top:1px solid var(--rule);
  background:var(--card);
  padding-top:2.5rem;
  padding-bottom:2.5rem;
  font-size:.9rem;
  color:var(--ink-soft);
}
.colophon .wrap{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between}
.colophon a{color:var(--ink-soft)}
.colophon nav{display:flex;gap:1.25rem;flex-wrap:wrap}
.colophon p{margin:0;max-width:30rem}

/* ---------- centred small pages ---------- */
.slim{max-width:34rem;padding-top:clamp(4rem,12vw,8rem);padding-bottom:clamp(4rem,12vw,8rem)}
.slim h1{font-size:clamp(1.9rem,5vw,2.8rem);margin-bottom:1rem}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}