/* Arch Security · coming soon */

@font-face{
  font-family:"Figtree Variable";
  font-style:normal;
  font-weight:300 900;
  font-display:swap;
  src:url("figtree-latin-wght.woff2") format("woff2-variations"), url("figtree-latin-wght.woff2") format("woff2");
}

:root{
  --bg:#f5f6f9;
  --ink:#1d1f26;
  --ink-2:#4a4f5c;
  --muted:#7a7f8e;
  --line:#d5d9e2;
  --line-strong:#b9bfcc;
  --navy:#15213a;
  --navy-2:#0b1527;
  --rust:#b4532f;
  --error:#b8401f;
  --sans:"Figtree Variable", Figtree, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.5;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(180,83,47,.16);color:var(--ink)}

/* ---------- backdrop ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bg::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(56% 48% at 50% 42%, #ffffff 0%, rgba(255,255,255,.6) 45%, rgba(255,255,255,0) 75%),
    radial-gradient(46% 26% at 50% 104%, rgba(180,83,47,.07), transparent 72%);
}
.bg svg{position:absolute;left:50%;bottom:0;width:max(1200px,120vw);height:auto;transform:translateX(-50%)}
.bg path{fill:none;stroke:rgba(21,33,58,.065);stroke-width:1;vector-effect:non-scaling-stroke}
.bg path:nth-child(2){stroke:rgba(21,33,58,.048)}
.bg path:nth-child(3){stroke:rgba(21,33,58,.034)}

/* ---------- layout ---------- */
.frame{
  position:relative;z-index:1;
  min-height:100vh;min-height:100svh;
  display:grid;grid-template-rows:1fr auto;
}
.hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:72px 24px 40px;
}
.eyebrow{
  margin-bottom:26px;
  font-size:12.5px;font-weight:600;line-height:1;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rust);
}
h1{
  font-weight:400;
  font-size:clamp(56px,8vw,106px);line-height:1;letter-spacing:-.045em;
  color:var(--ink);text-wrap:balance;
}
.sub{
  margin-top:24px;max-width:35rem;
  font-size:clamp(16px,1.2vw,17.5px);line-height:1.6;color:var(--ink-2);
  text-wrap:pretty;
}
.sub span{display:block}

/* ---------- form ---------- */
.signup{margin-top:34px;width:100%;max-width:440px}
.field{display:flex;gap:10px}
.field input{
  flex:1;min-width:0;height:48px;padding:0 16px;
  font:inherit;font-size:16px;color:var(--ink);caret-color:var(--rust);
  background:#fff;border:1px solid var(--line);border-radius:8px;outline:0;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  transition:border-color .15s, box-shadow .15s;
}
.field input::placeholder{color:#9297a4}
.field input:hover{border-color:var(--line-strong)}
.field input:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(21,33,58,.1)}
.field input[aria-invalid="true"]{border-color:var(--error);box-shadow:0 0 0 4px rgba(184,64,31,.1)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 22px;border:0;border-radius:8px;cursor:pointer;white-space:nowrap;
  font:inherit;font-size:15.5px;font-weight:500;letter-spacing:-.005em;color:#fff;background:var(--navy);
  box-shadow:0 1px 2px rgba(16,24,40,.14), inset 0 1px 0 rgba(255,255,255,.08);
  transition:background-color .15s, transform .1s;
}
.btn:hover{background:var(--navy-2)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.btn[disabled]{opacity:.7;cursor:progress}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.status{margin-top:12px;font-size:14px;color:var(--ink-2)}
.status:empty{display:none}
.status[data-kind="error"]{color:var(--error)}
.signup.is-done .field{display:none}
.signup.is-done .status{
  display:inline-flex;align-items:center;gap:10px;margin-top:0;
  height:48px;font-size:16px;color:var(--ink);
}
.signup.is-done .status::before{
  content:"";width:20px;height:20px;border-radius:50%;flex:none;
  background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.2l2.6 2.6L14 7.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.foot{padding:20px 24px 26px;text-align:center;font-size:12.5px;color:var(--muted)}

/* ---------- entrance ---------- */
@media (prefers-reduced-motion:no-preference){
  .hero > *{animation:rise .8s cubic-bezier(.2,.7,.2,1) both}
  .hero > :nth-child(2){animation-delay:.06s}
  .hero > :nth-child(3){animation-delay:.12s}
  .hero > :nth-child(4){animation-delay:.18s}
  .foot{animation:fade 1s .35s both}
}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .hero{padding:56px 16px 32px}
  .eyebrow{font-size:11.5px;letter-spacing:.18em;margin-bottom:20px}
  h1{font-size:clamp(48px,14vw,58px)}
  .sub{margin-top:18px}
  .sub span{display:inline}
  .signup{margin-top:28px}
  .field{flex-direction:column;gap:10px}
  .field input{flex:none}
  .field input,.btn{height:50px}
  .foot{padding:16px 16px 22px}
}
@media (max-height:640px) and (min-width:641px){
  .hero{padding-top:32px;padding-bottom:16px}
  .eyebrow{margin-bottom:18px}
  .signup{margin-top:24px}
}