/* THULS pre-launch — brand ink sampled from the icon artwork */
@font-face{font-family:"Inter";src:url("/fonts/inter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/inter-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --ink:#2A2623;
  --ink-soft:#6B635C;
  --rule:#D8D2CB;
  --bg:#FFFFFF;
  --measure:56ch;
  /* Aktiv Grotesk sits first so licensing it later is a one-line swap */
  --sans:"Aktiv Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-weight:400;
  font-size:clamp(15px,1.05vw,17px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;min-height:100vh;min-height:100svh;
}
a{color:inherit}
img,svg{max-width:100%;height:auto;display:block}

.shell{
  flex:1 0 auto;width:100%;max-width:1080px;margin:0 auto;
  padding:clamp(2.5rem,6vw,4.5rem) clamp(1.25rem,5vw,2.5rem) clamp(2rem,4vw,3rem);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}

.wordmark{width:clamp(150px,17vw,205px);margin:0 auto clamp(2rem,4.5vw,3.25rem)}
.wordmark img{width:100%}

.hero{width:clamp(190px,23vw,250px);margin:0 auto clamp(1.75rem,3.5vw,2.5rem)}
.hero img{width:100%}

.lede{max-width:var(--measure);margin:0 auto;text-wrap:balance}
.lede p{margin:0}

/* Signup */
.signup{margin:clamp(1.75rem,3.5vw,2.5rem) auto 0;width:min(100%,340px)}
.field{display:flex;flex-direction:column;gap:.75rem}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Caps and letter-spacing belong to the placeholder only. Applying them to the
   input itself renders whatever the visitor types in uppercase, which looks like
   the form is altering their address. */
input[type=email]{
  font:inherit;font-size:.875rem;
  color:var(--ink);text-align:center;
  width:100%;padding:.95rem 1rem;background:transparent;
  border:1px solid var(--ink);border-radius:0;
}
input[type=email]::placeholder{
  color:var(--ink-soft);opacity:1;
  font-size:.8125rem;letter-spacing:.13em;text-transform:uppercase;
}
input[type=email]:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

button{
  font:inherit;font-size:.8125rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--ink);border:1px solid var(--ink);border-radius:0;
  padding:.95rem 1rem;cursor:pointer;transition:opacity .15s ease;
}
button:hover{opacity:.82}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.consent{
  margin:.9rem auto 0;max-width:38ch;
  font-size:.6875rem;line-height:1.6;letter-spacing:.01em;color:var(--ink-soft);
}
.consent a{color:var(--ink-soft);text-underline-offset:2px}

.status{margin:1rem auto 0;max-width:38ch;font-size:.8125rem;line-height:1.6}
.status:empty{margin:0}
.status[data-tone=err]{color:#8A2B20}

/* Footer */
.site-foot{
  flex-shrink:0;width:100%;max-width:1080px;margin:0 auto;
  padding:0 clamp(1.25rem,5vw,2.5rem) clamp(1.75rem,4vw,2.75rem);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(.75rem,4vw,2rem);flex-wrap:wrap;
  font-size:.6875rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
}
.site-foot a{text-decoration:none;text-underline-offset:3px;white-space:nowrap}
.site-foot a:hover,.site-foot a:focus-visible{text-decoration:underline}
/* Four items. space-between divides the free space into three equal gaps,
   with the first flush left and the last flush right, so the footer still
   aligns to the page margins as drawn in the Canva frame. */

/* Legal pages */
.doc{
  flex:1 0 auto;width:100%;max-width:720px;margin:0 auto;
  padding:clamp(2.5rem,6vw,4rem) clamp(1.25rem,5vw,2.5rem) clamp(2rem,4vw,3rem);
  text-align:left;
}
.doc .wordmark{margin-left:0;margin-right:auto;width:clamp(120px,13vw,150px)}
.doc h1{font-size:1.4rem;font-weight:600;letter-spacing:.01em;margin:0 0 1.75rem}
.doc h2{font-size:.9375rem;font-weight:600;margin:2.25rem 0 .5rem}
.doc p,.doc li{margin:0 0 .85rem;color:var(--ink)}
.doc ul{padding-left:1.1rem;margin:0 0 .85rem}
.doc .meta{color:var(--ink-soft);font-size:.8125rem;border-top:1px solid var(--rule);padding-top:1.25rem;margin-top:2.5rem}
.doc a{text-underline-offset:2px}

@media (max-width:560px){
  .site-foot{
    display:grid;grid-template-columns:repeat(2,1fr);
    gap:.9rem 1rem;justify-items:center;text-align:center;
  }
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* Confirmation page call to action */
.ig-cta{
  display:block;text-align:center;text-decoration:none;
  font-size:.8125rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:#fff;background:var(--ink);border:1px solid var(--ink);
  padding:.95rem 1rem;transition:opacity .15s ease;
}
.ig-cta:hover{opacity:.82}
.ig-cta:focus-visible{outline:2px solid var(--ink);outline-offset:2px}