/* ============================================================ Amira forms */

.af{
  --af-ink:#262626;
  --af-paper:#fff;
  --af-wash:#F9F8F5;
  --af-rule:rgba(38,38,38,.13);
  --af-rule-soft:rgba(38,38,38,.07);
  --af-muted:rgba(38,38,38,.56);
  --af-body:rgba(38,38,38,.76);
  --af-green:#25C756;
  --af-forest:#1B923F;
  --af-mint:#E8F9ED;
  --af-lilac:#F4EBF6;
  --af-err:#B3261E;
  --af-field:#fff;
  --af-field-ink:#262626;
  --af-r-sm:10px;
  --af-r-md:16px;
  --af-r-pill:999px;
  --af-gutter:clamp(1.5rem,5vw,5rem);
  --af-inset:clamp(.75rem,1.5vw,1.25rem);
  --af-radius:clamp(18px,1.9vw,30px);

  /* f-* drive the drifting wash behind a light form. */
  --f-lilac:#DDADFD;
  --f-green:#25C756;
  --f-purple:#9226A7;

  position:relative;
  min-height:calc(100vh - var(--af-inset) * 2);
  margin:var(--af-inset);
  border-radius:var(--af-radius);
  background:var(--af-wash);
  overflow:clip;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(1.5rem,5vh,4rem) var(--af-gutter);
  color:var(--af-ink);
  font-family:"DM Sans",system-ui,-apple-system,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

/* A form sitting inside another page, rather than being the page. */
.af.is-panel{min-height:0;margin:0;padding:clamp(1.5rem,4vw,2.5rem)}

/* ---- the dark theme -------------------------------------------------
   site-v2's .ink: a charcoal gradient with a pale lavender wash, drifting.
   The fields stay on warm paper rather than going transparent, because a
   dark input on a dark panel reads as decoration and people do not type in
   it. That is the demo panel's own answer, kept. */
.af.is-ink{
  --af-ink:#fff;
  --af-paper:transparent;
  --af-rule:rgba(255,255,255,.3);
  --af-rule-soft:rgba(255,255,255,.14);
  --af-muted:rgba(255,255,255,.68);
  --af-body:rgba(255,255,255,.78);
  --af-field:#F4F2EE;
  --af-field-ink:#262626;
  background:
    radial-gradient(120% 140% at 86% 6%, rgba(221,173,253,.2) 0%, rgba(221,173,253,0) 58%),
    linear-gradient(160deg,#2E2E2E 0%,#262626 54%,#1B1B1B 100%);
  animation:afInkDrift 52s ease-in-out infinite alternate;
}
@keyframes afInkDrift{
  from{background-position:0% 0%,0% 0%}
  to{background-position:14% 8%,0% 0%}
}
.af.is-ink .af-field,.af.is-ink .af-grid{display:none}

/* ---- the card ---- */
.af-card{width:min(560px,100%);position:relative;z-index:1}
.af h1,.af .af-h{
  margin:0 0 .5rem;font-weight:500;
  font-size:clamp(1.75rem,3.4vw,2.6rem);
  letter-spacing:-.028em;line-height:1.12;text-wrap:balance;color:var(--af-ink);
}
.af.is-panel h1,.af.is-panel .af-h{font-size:clamp(1.25rem,2.4vw,1.625rem)}
.af .af-sub{
  margin:0 0 2rem;font-size:clamp(1.0625rem,1.5vw,1.1875rem);
  line-height:1.52;color:var(--af-body);
}
.af.is-panel .af-sub{font-size:1rem;margin-bottom:1.5rem}

/* The progress rule. One <i> per step, .on for the ones reached. A form with
   one step still gets one, because it is the mark at the top of the card and
   not a claim about how long this will take. */
.af-steps{display:flex;gap:.375rem;margin-bottom:2rem}
.af-steps i{height:2px;flex:1;border-radius:2px;background:var(--af-rule);
  transition:background .3s ease}
.af-steps i.on{background:var(--af-ink)}

/* ---- fields ---- */
.af label{display:block;font-size:.9375rem;font-weight:500;
  margin:1.25rem 0 .4375rem;color:var(--af-ink)}
.af.is-ink label{font-size:.75rem;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;color:var(--af-muted)}
.af .af-hint{margin:.4375rem 0 0;font-size:.875rem;color:var(--af-muted);line-height:1.45}
.af input[type=text],.af input[type=email],.af input[type=tel],
.af input[type=password],.af select,.af textarea{
  width:100%;box-sizing:border-box;padding:.8125rem .9375rem;
  font:400 1.0625rem/1.3 "DM Sans",system-ui,sans-serif;color:var(--af-field-ink);
  background:var(--af-field);border:1px solid var(--af-rule);
  border-radius:var(--af-r-sm);transition:border-color .2s ease;
}
.af.is-ink input,.af.is-ink select,.af.is-ink textarea{font-size:.9375rem;padding:.6875rem .8125rem}
.af textarea{min-height:7rem;resize:vertical}
.af input::placeholder{color:rgba(38,38,38,.42)}
.af input:focus,.af select:focus,.af textarea:focus{outline:0;border-color:var(--af-ink)}
.af.is-ink input:focus,.af.is-ink select:focus{outline:2px solid rgba(255,255,255,.5);outline-offset:1px}
.af-row{display:grid;gap:0 1rem;grid-template-columns:1fr}
@media(min-width:560px){.af-row{grid-template-columns:1fr 1fr}}

/* ---- buttons ---- */
.af button,.af .af-btn{
  display:inline-flex;align-items:center;gap:.625rem;cursor:pointer;
  background:var(--af-ink);color:var(--af-wash);border:0;
  border-radius:var(--af-r-pill);padding:.9375rem 1.5rem;
  font:500 .9375rem/1 "DM Sans",system-ui,sans-serif;margin-top:2rem;
  transition:background .3s ease,color .3s ease;
}
.af button:hover:not(:disabled),.af .af-btn:hover{background:var(--af-green);color:#262626}
.af button:disabled{opacity:.45;cursor:not-allowed}
.af.is-ink button{background:#fff;color:#141414}
.af.is-ink button:hover:not(:disabled){background:var(--af-green);color:#141414}
.af .af-back{background:transparent;color:var(--af-muted);
  border:1px solid var(--af-rule);margin-right:.5rem}
.af .af-back:hover:not(:disabled){background:transparent;color:var(--af-ink);
  border-color:var(--af-ink)}

/* ---- notices, errors, checkboxes ---- */
.af .af-note{margin:1.75rem 0 0;padding:1rem 1.125rem;border-radius:var(--af-r-md);
  background:var(--af-lilac);font-size:.9375rem;line-height:1.55;color:#262626}
.af.is-ink .af-note{background:rgba(255,255,255,.07);color:var(--af-body)}
.af .af-err{color:var(--af-err);font-size:.9375rem;font-weight:500;
  margin-top:1rem;min-height:1.25rem}
.af.is-ink .af-err{color:#FFB4AB}
.af .af-check{display:flex;gap:.625rem;align-items:flex-start;margin:.875rem 0;font-size:1rem}
.af .af-check input{margin-top:.1875rem;width:1.125rem;height:1.125rem;
  accent-color:var(--af-forest);flex:none}
.af .af-check label{margin:0;font-weight:400;font-size:1rem;text-transform:none;letter-spacing:0}

/* ---- the typeahead ---- */
.af .af-results{margin-top:.375rem;border:1px solid var(--af-rule);
  border-radius:var(--af-r-sm);background:var(--af-field);overflow:hidden;
  max-height:15rem;overflow-y:auto}
.af .af-results div{padding:.6875rem .9375rem;cursor:pointer;font-size:.9375rem;
  color:#262626;border-bottom:1px solid var(--af-rule-soft)}
.af .af-results div:last-child{border-bottom:0}
.af .af-results div:hover{background:var(--af-mint)}
.af .af-results .af-none{cursor:default;color:var(--af-muted)}
.af .af-results .af-none:hover{background:transparent}
.af .af-chosen{display:flex;align-items:center;gap:.75rem;margin-top:.5rem;
  padding:.6875rem .9375rem;border-radius:var(--af-r-sm);
  background:var(--af-mint);font-size:.9375rem;color:#262626}
.af .af-link{background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:500 .875rem/1 "DM Sans",system-ui,sans-serif;color:var(--af-forest);
  text-decoration:underline}
.af .af-link:hover{background:none;color:#262626}

/* ---- the atmosphere behind a light form ---- */
.af .af-field{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:clip}
.af .af-field i{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
  translate:-50% -50%;display:block}
.af .af-field b{display:block;width:100%;height:100%;border-radius:50%;
  background:radial-gradient(closest-side,var(--c) 0%,transparent 70%);
  opacity:var(--o);filter:blur(42px);
  animation:afDrift var(--dur) ease-in-out var(--dl) infinite alternate}
@keyframes afDrift{
  from{translate:0 0;scale:1}
  to{translate:var(--mx) var(--my);scale:var(--ms)}
}
.af .af-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%}
@media(prefers-reduced-motion:reduce){
  .af .af-field b,.af.is-ink{animation:none}
}

.af .af-hidden{display:none}
.af .af-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  clip-path:inset(50%);white-space:nowrap}