/* ============================================================================
   Iron Fort — shared auth design system (/signup/ and /login/)

   Split layout: the form on the left, the product story on the right.
   Palette mirrors goironfort.com (navy #050D1F / blue #2563EB).

   NOTE ON !important: theme.min.css pins .btn-primary, .form-label and
   input:focus with !important of its own. The flags below are the minimum
   needed to win those specific fights — don't add more.
   ========================================================================== */

:root {
  --paw-primary:    #2563eb;
  --paw-primary-dk: #1d4ed8;
  --paw-primary-bg: rgba(37,99,235,.06);
  --paw-primary-bd: rgba(37,99,235,.20);
  --paw-success:    #16a34a;
  --paw-success-bg: rgba(22,163,74,.07);
  --paw-success-bd: rgba(22,163,74,.20);
  --paw-success-tk: #15803d;
  --paw-warning:    #f59e0b;
  --paw-aws:        #ff9900;
  --paw-danger:     #dc2626;
  --paw-danger-bg:  rgba(220,38,38,.06);
  --paw-danger-bd:  rgba(220,38,38,.18);
  --paw-navy:       #050d1f;
  --paw-navy-2:     #0c1a36;
  --paw-border:     #e5e7eb;
  --paw-border-lt:  #f0f2f5;
  --paw-surface-2:  #f9fafb;
  --paw-text:       #111827;
  --paw-text-2:     #4b5563;
  --paw-text-3:     #9ca3af;
  --paw-radius:     14px;
  --paw-radius-sm:  10px;
  --paw-shadow-sm:  0 1px 2px rgba(16,24,40,.05);
  --paw-t:          200ms cubic-bezier(.4,0,.2,1);
  --paw-font:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* theme.min.css pads the body and shrinks the base font size */
html, body { margin:0 !important; padding:0 !important; }
body {
  background:#fff; min-height:100vh; font-family:var(--paw-font);
  font-size:15px; line-height:1.6; color:var(--paw-text);
  -webkit-font-smoothing:antialiased;
}
.ifa-split *, .ifa-split *::before, .ifa-split *::after { box-sizing:border-box; }

/* ── Split shell ─────────────────────────────────────────────────────────── */
.ifa-split { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr); min-height:100vh; }

/* Both columns centre vertically via `margin:auto` on the inner block rather
   than `align-items:center`. Auto margins collapse to 0 once the content is
   taller than the column, so a long form never has its top clipped out of
   reach — which is exactly what centred flex items do. */
.ifa-main { display:flex; align-items:flex-start; justify-content:center; padding:56px 48px; background:#fff; }
.ifa-main-inner { width:100%; max-width:820px; margin:auto; display:flex; flex-direction:column; }

.ifa-brand { display:inline-flex; align-items:center; margin-bottom:34px; }
.ifa-brand img { height:30px; width:auto; }

.ifa-head { margin-bottom:24px; }
.ifa-head h1 { font-size:27px; line-height:1.22; font-weight:800; letter-spacing:-.021em; color:var(--paw-text); margin:0 0 8px; }
.ifa-head p  { font-size:14px; color:var(--paw-text-2); margin:0; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.ifa-field { margin-bottom:20px; }
.ifa-split .form-label { font-size:13px !important; font-weight:600 !important; color:var(--paw-text) !important; margin-bottom:7px; }
.ifa-split .form-control, .ifa-split .form-select {
  font-family:var(--paw-font); font-size:14.5px; color:var(--paw-text);
  border:1.5px solid var(--paw-border); border-radius:var(--paw-radius-sm);
  padding:11px 14px; background:#fff; transition:border-color var(--paw-t), box-shadow var(--paw-t);
  box-shadow:var(--paw-shadow-sm); width:100%;
}
.ifa-split .form-control::placeholder { color:#b6bcc7; }
.ifa-split .form-control:focus, .ifa-split .form-select:focus {
  border-color:var(--paw-primary) !important; box-shadow:0 0 0 3.5px var(--paw-primary-bg) !important; outline:none;
}
.ifa-split .form-control.is-invalid { border-color:var(--paw-danger) !important; }
.ifa-split .form-control-sm, .ifa-split .form-select-sm { font-size:13.5px; padding:8px 11px; }
.ifa-split .form-text { font-size:12.5px; color:var(--paw-text-3); margin-top:7px; }
.ifa-split .invalid-feedback { font-size:12.5px; color:var(--paw-danger); }
.ifa-split .form-check-input:checked { background-color:var(--paw-primary); border-color:var(--paw-primary); }
.ifa-split .form-check-input:focus { box-shadow:0 0 0 3.5px var(--paw-primary-bg); border-color:var(--paw-primary); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.ifa-split .btn {
  font-family:var(--paw-font); font-size:14px; font-weight:600; border-radius:var(--paw-radius-sm);
  padding:11px 20px; transition:all var(--paw-t); display:inline-flex; align-items:center; justify-content:center;
  text-transform:none; letter-spacing:0;   /* theme.min.css uppercases every .btn */
}
.ifa-split .btn-primary { background:var(--paw-primary) !important; border-color:var(--paw-primary) !important; color:#fff !important; box-shadow:0 1px 2px rgba(37,99,235,.24); }
.ifa-split .btn-primary:hover:not(:disabled) { background:var(--paw-primary-dk) !important; border-color:var(--paw-primary-dk) !important; }
.ifa-split .btn-primary:disabled { background:#c2cfe8 !important; border-color:#c2cfe8 !important; box-shadow:none; opacity:1; }
.ifa-split .btn-lg { padding:13px 22px; font-size:15px; }
.ifa-split .btn-outline-secondary { background:#fff; border:1.5px solid var(--paw-border); color:var(--paw-text-2); }
.ifa-split .btn-outline-secondary:hover:not(:disabled) { background:var(--paw-surface-2); border-color:#d3d8e0; color:var(--paw-text); }
.ifa-split .btn-outline-primary { background:#fff; border:1.5px solid var(--paw-primary-bd); color:var(--paw-primary); }
.ifa-split .btn-outline-primary:hover { background:var(--paw-primary-bg); border-color:var(--paw-primary); }
.ifa-split .btn-link { padding:0; border:none; }

.ifa-split .alert { border-radius:var(--paw-radius-sm); font-size:13.5px; padding:11px 14px; margin-bottom:18px; }
.ifa-split .alert-danger { background:var(--paw-danger-bg); border:1px solid var(--paw-danger-bd); color:#b91c1c; }
.ifa-split .alert-success { background:var(--paw-success-bg); border:1px solid var(--paw-success-bd); color:var(--paw-success-tk); }
.ifa-split .alert-info, .ifa-split .alert-warning { background:#fffbeb; border:1px solid #fcd34d; color:#92400e; }

.ifa-link { color:var(--paw-primary); font-weight:600; text-decoration:none; }
.ifa-link:hover { text-decoration:underline; color:var(--paw-primary-dk); }
.ifa-signin { font-size:13.5px; color:var(--paw-text-3); text-decoration:none; }
.ifa-signin strong { color:var(--paw-primary); }
.ifa-signin:hover strong { text-decoration:underline; }

/* ── Left-column footer ──────────────────────────────────────────────────── */
.ifa-foot { padding-top:40px; font-size:12px; color:var(--paw-text-3); display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ifa-foot a { color:var(--paw-text-3); font-weight:600; text-decoration:none; }
.ifa-foot a:hover { color:var(--paw-text-2); }

/* ── Right panel: the product story ──────────────────────────────────────── */
.ifa-aside {
  position:relative; overflow:hidden; color:#e8edf7;
  background:
    radial-gradient(900px 480px at 82% -8%, rgba(37,99,235,.30), transparent 62%),
    radial-gradient(680px 420px at 6% 104%, rgba(8,145,178,.22), transparent 60%),
    linear-gradient(160deg, var(--paw-navy-2) 0%, var(--paw-navy) 62%);
  padding:56px 52px;
  display:flex; align-items:flex-start;
  /* Stay put while a long left column scrolls. */
  position:sticky; top:0; align-self:start; height:100vh; overflow-y:auto;
}
.ifa-aside::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(circle at 50% 40%, #000, transparent 78%);
  mask-image:radial-gradient(circle at 50% 40%, #000, transparent 78%);
}
.ifa-aside-inner { position:relative; z-index:1; width:100%; max-width:620px; margin:auto; }

.ifa-eyebrow {
  /* block-level flex, not inline-flex: an inline box would add half-leading
     above the pill and push the panel out of line with the left column. */
  display:flex; width:fit-content; align-items:center; gap:7px; font-size:11px; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em; color:#93b4fb;
  background:rgba(37,99,235,.14); border:1px solid rgba(96,165,250,.28);
  padding:5px 12px; border-radius:20px; margin-bottom:26px;
}
.ifa-aside-title { font-size:40px; line-height:1.14; font-weight:800; letter-spacing:-.028em; color:#fff; margin:0 0 18px; }
.ifa-aside-title em { font-style:normal; color:#60a5fa; }
/* Sizes track the wider panel — at 620px, 14.5px prose runs past a comfortable
   measure, so the body copy steps up with it. */
.ifa-aside-lead { font-size:15.5px; line-height:1.65; color:#a9b6cd; margin:0 0 34px; }

.ifa-points { list-style:none; margin:0 0 34px; padding:0; display:flex; flex-direction:column; gap:19px; }
.ifa-point { display:flex; gap:13px; align-items:flex-start; }
.ifa-point-ico {
  flex-shrink:0; width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:12px; color:#60a5fa; background:rgba(96,165,250,.13); border:1px solid rgba(96,165,250,.24); margin-top:1px;
}
.ifa-point-t { font-size:14.5px; font-weight:700; color:#fff; margin-bottom:3px; }
.ifa-point-d { font-size:13.5px; line-height:1.6; color:#98a6bf; }

.ifa-aside-foot { border-top:1px solid rgba(255,255,255,.09); padding-top:24px; }

/* AWS Qualified Software credential. The badge artwork is dark navy, so it
   sits on a light tile to stay legible against the panel — the badge itself
   is never recoloured or reshaped, per AWS brand guidelines. */
.ifa-aside-badge {
  display:flex; align-items:center; gap:13px; margin-bottom:16px;
  padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
}
.ifa-aside-badge-tile { flex-shrink:0; background:#fff; border-radius:9px; padding:5px; line-height:0; }
.ifa-aside-badge-tile img { width:44px; height:44px; display:block; }
.ifa-aside-badge-t { font-size:13px; font-weight:700; color:#fff; margin-bottom:2px; }
.ifa-aside-badge-d { font-size:12px; line-height:1.55; color:#98a6bf; }
.trust-badges { display:flex; gap:7px; flex-wrap:wrap; margin-bottom:16px; }
.trust-badge {
  display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:#c3cfe4;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11); padding:5px 11px; border-radius:20px;
}
.trust-badge--aws { color:#ffc46b; background:rgba(255,153,0,.10); border-color:rgba(255,153,0,.26); }
.ifa-aside-note { font-size:12.5px; line-height:1.6; color:#8492ab; margin:0; }
.ifa-aside-note strong { color:#c3cfe4; font-weight:600; }

/* ── AWS Marketplace card (login + signup step 1) ────────────────────────── */
.ifa-aws {
  margin-top:28px; padding:18px; border:1px solid #fbdcae; border-radius:var(--paw-radius);
  background:linear-gradient(180deg, #fffcf7 0%, #fff7ec 100%);
}
.ifa-aws-top { display:flex; align-items:flex-start; gap:14px; margin-bottom:14px; }
/* Official AWS Qualified Software badge (FTR). Ships at 120x120 — never
   stretch or recolour it; AWS brand guidelines require it be used unmodified. */
.ifa-aws-badge { width:60px; height:60px; flex-shrink:0; display:block; }
.ifa-aws-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.ifa-aws-title { font-size:13.5px; font-weight:700; color:#5c4320; }
.ifa-aws-tag {
  font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  color:#8a5a09; background:rgba(255,153,0,.14); border:1px solid rgba(255,153,0,.32);
  padding:2px 8px; border-radius:10px;
}
.ifa-aws-copy { font-size:12.5px; line-height:1.6; color:#7a5b30; margin:0; }
.ifa-split .ifa-aws-btn {
  width:100%; background:var(--paw-aws); border:1px solid #e88a00; color:#1a2433;
  font-weight:700; box-shadow:0 1px 2px rgba(255,153,0,.3);
}
.ifa-split .ifa-aws-btn:hover { background:#f08c00; border-color:#d97f00; color:#1a2433; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1100px) {
  .ifa-aside { padding:48px 40px; }
  .ifa-aside-title { font-size:31px; }
}
@media (max-width:900px) {
  .ifa-split { grid-template-columns:1fr; }
  .ifa-main { padding:32px 22px 34px; }
  .ifa-aside { padding:44px 26px; position:static; height:auto; overflow:visible; }
  .ifa-aside-inner { max-width:512px; }
  .ifa-aside-title { font-size:28px; }
  .ifa-foot { padding-top:32px; }
  .ifa-head h1 { font-size:24px; }
}