/* =====================================================
   SAVAGE SAINTS LOGIN PAGE
===================================================== */

:root{
  /* Core church colors */
  --login-forest:#174e3a;
  --login-forest-dark:#103c2c;
  --login-forest-deep:#092a20;

  /* Brighter greens */
  --login-emerald:#25865e;
  --login-emerald-light:#43b87d;
  --login-mint:#91d9b5;

  /* Gold and sunlight */
  --login-gold:#d6a83d;
  --login-gold-light:#f0cf73;
  --login-sun:#ffe6a5;

  /* Warm accents */
  --login-coral:#e98468;
  --login-peach:#f6b98f;
  --login-rose:#e9a8a5;

  /* Cool accents */
  --login-sky:#8bc9e8;
  --login-sky-light:#dff3fb;
  --login-teal:#4aa8a0;
  --login-lavender:#b9acd9;

  /* Neutrals */
  --login-cream:#fffaf2;
  --login-parchment:#f7ecd8;
  --login-linen:#f3e4ca;
  --login-white:#ffffff;

  /* Text */
  --login-ink:#26352d;
  --login-muted:#746955;

  /* States */
  --login-danger:#b84d43;
  --login-success:#2f8b5a;
}


/* =====================================================
   PAGE
===================================================== */


.account-auth-page{
  min-height:100vh;
  margin:0;

  color:var(--login-ink);

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(255,214,115,.42),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 14%,
      rgba(139,201,232,.32),
      transparent 28%
    ),
    radial-gradient(
      circle at 78% 86%,
      rgba(233,132,104,.18),
      transparent 26%
    ),
    radial-gradient(
      circle at 22% 88%,
      rgba(145,217,181,.2),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #fff9ec 0%,
      #fffdf8 38%,
      #f7f3e8 68%,
      #f5ead7 100%
    );
}


.account-auth-page{
  min-height:100vh;
  margin:0;

  display:flex;
  flex-direction:column;

  color:var(--login-ink);

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(255,214,115,.42),
      transparent 27%
    ),
    radial-gradient(
      circle at 90% 14%,
      rgba(139,201,232,.32),
      transparent 28%
    ),
    radial-gradient(
      circle at 78% 86%,
      rgba(233,132,104,.18),
      transparent 26%
    ),
    radial-gradient(
      circle at 22% 88%,
      rgba(145,217,181,.2),
      transparent 30%
    ),
    linear-gradient(
      145deg,
      #fff9ec 0%,
      #fffdf8 38%,
      #f7f3e8 68%,
      #f5ead7 100%
    );
}

.account-auth-main{
  position:relative;

  width:100%;
  min-height:calc(100vh - 120px);

  padding:56px 24px;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
  box-sizing:border-box;
}




/* =====================================================
   BACKGROUND DECORATION
===================================================== */


.account-auth-main::before,
.account-auth-main::after{
  content:"";
  position:absolute;

  border-radius:50%;

  pointer-events:none;

  filter:blur(4px);
}

.account-auth-main::before{
  width:380px;
  height:380px;

  top:-80px;
  left:-140px;

  background:
    radial-gradient(
      circle at 42% 38%,
      rgba(255,230,165,.85),
      rgba(246,185,143,.32) 36%,
      rgba(246,185,143,0) 72%
    );
}

.account-auth-main::after{
  width:430px;
  height:430px;

  right:-170px;
  bottom:-130px;

  background:
    radial-gradient(
      circle at 46% 44%,
      rgba(139,201,232,.5),
      rgba(185,172,217,.22) 38%,
      rgba(185,172,217,0) 72%
    );
}



/* =====================================================
   MAIN LOGIN BOX
===================================================== */

.account-auth-shell{
  position:relative;
  z-index:2;

  width:min(1180px, calc(100% - 16px));
  min-height:720px;

  display:grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(390px, .92fr);

  align-items:stretch;

  overflow:hidden;

  border:1px solid rgba(214,168,61,.46);
  border-radius:34px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(255,249,238,.94)
    );

  box-shadow:
    0 42px 90px rgba(68,45,18,.18),
    0 14px 34px rgba(37,134,94,.08),
    0 0 0 1px rgba(255,255,255,.72),
    inset 0 1px 0 rgba(255,255,255,.9);

  backdrop-filter:blur(20px);
}

.account-auth-shell::before{
  content:"";
  position:absolute;
  inset:10px;
  z-index:3;

  border:1px solid rgba(240,207,115,.27);
  border-radius:26px;

  pointer-events:none;
}


/* =====================================================
   LEFT STORY PANEL
===================================================== */

.account-auth-story{
  position:relative;
  min-width:0;
  overflow:hidden;

  background:
    radial-gradient(
      circle at 12% 10%,
      rgba(255,230,165,.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 18%,
      rgba(139,201,232,.18),
      transparent 30%
    ),
    radial-gradient(
      circle at 82% 88%,
      rgba(233,132,104,.15),
      transparent 31%
    ),
    linear-gradient(
      150deg,
      #174d39 0%,
      #227154 34%,
      #2a8a65 62%,
      #17604d 100%
    );
}

.account-auth-story::before{
  content:"";
  position:absolute;
  inset:0;

  opacity:.2;

  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:38px 38px;
}

.account-auth-story::after{
  content:"";
  position:absolute;

  width:440px;
  height:440px;

  right:-170px;
  bottom:-190px;

  border:1px solid rgba(255,225,146,.3);
  border-radius:50%;

  box-shadow:
    0 0 0 42px rgba(255,230,165,.055),
    0 0 0 84px rgba(139,201,232,.035),
    0 0 90px rgba(255,214,115,.12);
}

.account-auth-story-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.035),
      rgba(7,42,31,.13)
    );
}

.account-auth-story-content{
  position:relative;
  z-index:2;

  width:100%;
  min-height:100%;

  padding:48px 48px 42px;

  display:flex;
  flex-direction:column;
  justify-content:flex-start;

  box-sizing:border-box;

  color:#fff8e9;
}


/* =====================================================
   BRAND
===================================================== */

.account-auth-brand{
  display:inline-flex;
  align-items:center;
  gap:14px;

  width:fit-content;

  margin-bottom:34px;

  color:#f5eddb;
  text-decoration:none;
}

.account-auth-brand img{
  width:52px;
  height:52px;

  object-fit:contain;

  border-radius:14px;

  box-shadow:
    0 10px 24px rgba(0,0,0,.22),
    0 0 0 1px rgba(218,184,103,.22);
}

.account-auth-brand span{
  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.22rem;
  font-weight:700;
  letter-spacing:.02em;
}


/* =====================================================
   STORY TYPOGRAPHY
===================================================== */

.account-auth-kicker{
  margin:0 0 10px;

  color:#d9b86c;

  font-size:.7rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
}

.account-auth-story h1{
  max-width:540px;
  margin:0;

  color:#fbf6ea;

  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:clamp(3.2rem, 5vw, 4.75rem);
  font-weight:600;
  line-height:.92;
  letter-spacing:-.025em;
}

.account-auth-story-lead{
  max-width:590px;

  margin:20px 0 0;

  color:rgba(245,237,219,.76);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.92rem;
  font-weight:450;
  line-height:1.68;
}


/* =====================================================
   SCRIPTURE BOX
===================================================== */

.account-auth-scripture{
  position:relative;

  margin:24px 0 20px;
  padding:19px 22px 19px 24px;

  border-left:4px solid #ffd66d;
  border-radius:0 18px 18px 0;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.13),
      rgba(255,230,165,.055)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 10px 28px rgba(8,43,31,.1);
}

.account-auth-scripture::before{
  content:"“";
  position:absolute;

  top:-10px;
  left:12px;

  color:rgba(255,224,139,.24);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:4.4rem;
  line-height:1;
}

.account-auth-scripture p{
  position:relative;
  z-index:1;

  margin:0;

  color:#fff8e9;

  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.12rem;
  font-weight:600;
  line-height:1.46;
}

.account-auth-scripture cite{
  display:block;

  margin-top:10px;

  color:#ffe08a;

  font-size:.7rem;
  font-style:normal;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}


/* =====================================================
   STORY POINTS
===================================================== */

.account-auth-story-points{
  display:grid;
  gap:12px;
}

.account-auth-story-point{
  display:grid;
  grid-template-columns:30px minmax(0, 1fr);
  gap:12px;
  align-items:start;
}

.account-auth-story-icon{
  width:30px;
  height:30px;

  display:grid;
  place-items:center;

  border:1px solid rgba(218,184,103,.3);
  border-radius:50%;

  color:#d9b86c;
  background:rgba(255,255,255,.035);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05);

  font-size:.7rem;
}

.account-auth-story-point strong{
  display:block;

  color:#f4ecd9;

  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:.98rem;
  font-weight:700;
  letter-spacing:.01em;
}

.account-auth-story-point p{
  max-width:500px;

  margin:3px 0 0;

  color:rgba(245,237,219,.64);

  font-family:
    Inter,
    Arial,
    sans-serif;

  font-size:.74rem;
  font-weight:450;
  line-height:1.45;
}


/* =====================================================
   RIGHT LOGIN PANEL
===================================================== */

.account-auth-panel{
  position:relative;
  min-width:0;

  padding:34px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:
    radial-gradient(
      circle at top right,
      rgba(139,201,232,.2),
      transparent 34%
    ),
    radial-gradient(
      circle at bottom left,
      rgba(246,185,143,.18),
      transparent 34%
    ),
    radial-gradient(
      circle at 65% 65%,
      rgba(145,217,181,.12),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.98),
      rgba(255,248,235,.97)
    );
}

.account-auth-panel::before{
  content:"";
  position:absolute;
  inset:0;

  pointer-events:none;

  background:
    linear-gradient(
      90deg,
      rgba(214,168,61,.17),
      transparent 13%
    );
}

/* =====================================================
   LOGIN CARD
===================================================== */

.account-auth-card{
  position:relative;
  z-index:2;

  width:min(100%, 440px);

  padding:28px;

  box-sizing:border-box;

  border:1px solid rgba(214,168,61,.3);
  border-radius:26px;

  background:
    radial-gradient(
      circle at top right,
      rgba(223,243,251,.34),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      rgba(255,255,255,.96),
      rgba(255,249,239,.92)
    );

  box-shadow:
    0 26px 56px rgba(69,45,16,.12),
    0 8px 22px rgba(74,168,160,.07),
    inset 0 1px 0 rgba(255,255,255,.98);

  backdrop-filter:blur(14px);
}

.account-auth-card::before{
  content:"";
  position:absolute;
  inset:8px;

  border:1px solid rgba(240,207,115,.19);
  border-radius:20px;

  pointer-events:none;
}

.account-auth-card-kicker{
  color:#cf8d32;
}

.account-auth-card-header h2{
  color:#1b5d45;
}

.account-auth-card-header p{
  color:#776c59;
}


/* =====================================================
   AUTH MESSAGE
===================================================== */

.account-auth-message{
  position:relative;
  z-index:1;

  margin-bottom:14px;
  padding:12px 14px;

  border-radius:13px;

  font-size:.8rem;
  font-weight:800;
  line-height:1.45;
}

.account-auth-message.is-error{
  color:#7b241d;

  border:1px solid rgba(165,59,50,.25);
  background:rgba(165,59,50,.1);
}

.account-auth-message.is-success{
  color:#1e5d37;

  border:1px solid rgba(47,125,76,.25);
  background:rgba(47,125,76,.1);
}


/* =====================================================
   GOOGLE BUTTON
===================================================== */

.account-auth-google-button{
  position:relative;
  z-index:1;

  width:100%;
  min-height:50px;

  padding:11px 16px;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;

  border:1px solid rgba(74,168,160,.24);
  border-radius:15px;

  color:#205d49;

  background:
    linear-gradient(
      135deg,
      #ffffff,
      #f5fcff
    );

  box-shadow:
    0 8px 18px rgba(32,25,15,.07),
    0 0 0 1px rgba(255,255,255,.8),
    inset 0 1px 0 rgba(255,255,255,.95);

  font:inherit;
  font-size:.86rem;
  font-weight:900;

  cursor:pointer;

  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease;
}

.account-auth-google-button:hover{
  transform:translateY(-2px);

  border-color:rgba(139,201,232,.72);

  box-shadow:
    0 14px 28px rgba(74,168,160,.14),
    0 0 0 4px rgba(139,201,232,.1),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.account-auth-google-icon{
  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border-radius:8px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #4285f4 0%,
      #4aa8a0 45%,
      #34a853 100%
    );

  box-shadow:
    0 5px 12px rgba(66,133,244,.22);

  font-weight:900;
}



/* =====================================================
   DIVIDER
===================================================== */

.account-auth-divider{
  position:relative;
  z-index:1;

  margin:18px 0;

  display:flex;
  align-items:center;
  gap:12px;

  color:#9b8e78;

  font-size:.68rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.account-auth-divider::before,
.account-auth-divider::after{
  content:"";

  height:1px;
  flex:1;

  background:rgba(155,116,43,.18);
}


/* =====================================================
   FORM
===================================================== */

.account-auth-form{
  position:relative;
  z-index:1;

  display:grid;
  gap:15px;
}

.account-auth-field{
  display:grid;
  gap:7px;
}

.account-auth-field label,
.account-auth-label-row label{
  color:var(--login-forest);

  font-size:.76rem;
  font-weight:900;
  letter-spacing:.02em;
}

.account-auth-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.account-auth-label-row a{
  color:var(--login-gold);

  font-size:.7rem;
  font-weight:900;

  text-decoration:none;
}

.account-auth-label-row a:hover{
  text-decoration:underline;
}

.account-auth-input-wrap{
  position:relative;

  display:flex;
  align-items:center;

  border:1px solid rgba(22,63,43,.16);
  border-radius:15px;

  background:rgba(255,255,255,.92);

  box-shadow:
    0 8px 18px rgba(32,25,15,.055),
    inset 0 1px 0 rgba(255,255,255,.9);

  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.account-auth-input-wrap:focus-within{
  transform:translateY(-1px);

  border-color:rgba(200,155,60,.72);

  box-shadow:
    0 0 0 4px rgba(200,155,60,.11),
    0 10px 22px rgba(32,25,15,.08);
}

.account-auth-input-icon{
  width:44px;
  flex:0 0 44px;

  display:grid;
  place-items:center;

  color:var(--login-gold);

  font-size:.86rem;
  font-weight:900;
}

.account-auth-input-wrap input{
  width:100%;
  min-height:50px;

  padding:0 14px 0 0;

  border:0;
  outline:0;

  color:var(--login-ink);
  background:transparent;

  font:inherit;
  font-size:.86rem;
}

.account-auth-input-wrap input::placeholder{
  color:#aa9d87;
}

.account-auth-password-toggle{
  min-height:36px;

  margin-right:7px;
  padding:0 10px;

  border:0;
  border-radius:10px;

  color:var(--login-forest);
  background:rgba(22,63,43,.07);

  font:inherit;
  font-size:.68rem;
  font-weight:900;

  cursor:pointer;
}

.account-auth-password-toggle:hover{
  background:rgba(22,63,43,.12);
}

.account-auth-field-error{
  min-height:14px;

  color:var(--login-danger);

  font-size:.68rem;
  font-weight:800;
}


/* =====================================================
   CHECKBOX
===================================================== */

.account-auth-checkbox{
  display:flex;
  align-items:center;
  gap:10px;

  color:var(--login-muted);

  font-size:.75rem;
  font-weight:700;

  cursor:pointer;
}

.account-auth-checkbox input{
  position:absolute;

  opacity:0;
  pointer-events:none;
}

.account-auth-checkbox-mark{
  position:relative;

  width:19px;
  height:19px;
  flex:0 0 19px;

  border:1px solid rgba(22,63,43,.25);
  border-radius:6px;

  background:#fff;

  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.05);
}

.account-auth-checkbox input:checked +
.account-auth-checkbox-mark{
  border-color:var(--login-forest);
  background:var(--login-forest);
}

.account-auth-checkbox input:checked +
.account-auth-checkbox-mark::after{
  content:"";

  position:absolute;

  left:6px;
  top:3px;

  width:5px;
  height:9px;

  border:solid var(--login-cream);
  border-width:0 2px 2px 0;

  transform:rotate(45deg);
}


/* =====================================================
   SUBMIT BUTTON
===================================================== */

.account-auth-submit{
  position:relative;

  width:100%;
  min-height:52px;

  overflow:hidden;

  border:1px solid rgba(255,220,126,.72);
  border-radius:16px;

  color:#fffdf4;

  background:
    linear-gradient(
      135deg,
      #1d7253 0%,
      #2f9e6c 42%,
      #4ab580 72%,
      #2c8a65 100%
    );

  box-shadow:
    0 14px 28px rgba(37,134,94,.28),
    0 5px 14px rgba(74,168,160,.14),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -3px 0 rgba(11,75,51,.22);

  font:inherit;
  font-size:.86rem;
  font-weight:900;
  letter-spacing:.04em;

  cursor:pointer;

  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

.account-auth-submit::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      120deg,
      transparent 18%,
      rgba(255,255,255,.26) 48%,
      transparent 72%
    );

  transform:translateX(-120%);

  transition:transform .45s ease;
}

.account-auth-submit:hover{
  transform:translateY(-3px);

  filter:brightness(1.06) saturate(1.08);

  box-shadow:
    0 18px 34px rgba(37,134,94,.34),
    0 8px 20px rgba(139,201,232,.18),
    inset 0 1px 0 rgba(255,255,255,.3),
    inset 0 -3px 0 rgba(11,75,51,.2);
}

.account-auth-submit:hover::before{
  transform:translateX(120%);
}


/* =====================================================
   REGISTER CTA
===================================================== */

.account-register-card{
  position:relative;

  padding:24px;

  text-align:center;

  border:1px solid rgba(214,168,61,.25);
  border-radius:20px;

  background:
    radial-gradient(
      circle at top left,
      rgba(255,230,165,.38),
      transparent 38%
    ),
    radial-gradient(
      circle at bottom right,
      rgba(139,201,232,.2),
      transparent 38%
    ),
    linear-gradient(
      145deg,
      rgba(255,251,241,.98),
      rgba(249,241,225,.97)
    );

  box-shadow:
    0 14px 30px rgba(67,44,15,.09),
    0 5px 16px rgba(233,132,104,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
}

.account-register-card::before{
  content:"";
  position:absolute;
  inset:8px;

  border:1px solid rgba(240,207,115,.18);
  border-radius:14px;

  pointer-events:none;
}

.account-register-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:6px 16px;
  margin-bottom:14px;

  border:1px solid rgba(255,231,166,.62);
  border-radius:999px;

  color:#fff;

  background:
    linear-gradient(
      135deg,
      #d99145,
      #e98468 52%,
      #cf6f62
    );

  box-shadow:
    0 7px 16px rgba(233,132,104,.22),
    inset 0 1px 0 rgba(255,255,255,.26);

  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.account-register-card h3{
  color:#1b6048;
}

.account-register-card p{
  color:#746955;
}



/* =====================================================
   PREMIUM REGISTER BUTTON
===================================================== */


.account-register-button{
  position:relative;
  z-index:1;

  overflow:hidden;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  width:min(100%,300px);
  height:58px;

  padding:2px 22px 0;

  border:2px solid rgba(255,239,177,.98);
  border-radius:18px;

  color:#5a3908;

  text-decoration:none;

  font-family:
    "Cormorant Garamond",
    Georgia,
    "Times New Roman",
    serif;

  font-size:1.2rem;
  font-weight:700;
  line-height:1;
  letter-spacing:.015em;

  background:
    radial-gradient(
      circle at 50% 20%,
      rgba(255,255,255,.38),
      transparent 40%
    ),
    linear-gradient(
      180deg,
      #fff3b2 0%,
      #f9dc7a 26%,
      #edbd48 60%,
      #d59424 100%
    );

  box-shadow:
    0 18px 34px rgba(207,141,37,.34),
    0 7px 18px rgba(255,214,111,.28),
    0 0 24px rgba(255,224,132,.25),
    inset 0 3px 0 rgba(255,255,255,.5),
    inset 0 -5px 0 rgba(137,83,14,.2);

  text-shadow:
    0 1px 0 rgba(255,255,255,.8),
    0 1px 2px rgba(124,76,10,.12);

  cursor:pointer;

  transition:
    transform .18s ease,
    filter .18s ease,
    box-shadow .18s ease,
    letter-spacing .22s ease;
}

.account-register-button::before{
  content:"";
  position:absolute;

  left:8px;
  right:8px;
  top:6px;

  height:44%;

  border-radius:13px;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.7),
      rgba(255,255,255,.08)
    );

  pointer-events:none;
}

.account-register-button::after{
  content:"";
  position:absolute;

  top:0;
  bottom:0;
  left:-40%;

  width:22%;

  transform:skewX(-22deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.9),
      transparent
    );

  pointer-events:none;

  transition:left .55s ease;
}

.account-register-button:hover{
  transform:
    translateY(-3px)
    scale(1.025);

  filter:
    brightness(1.06)
    saturate(1.08);

  letter-spacing:.035em;

  box-shadow:
    0 24px 44px rgba(207,141,37,.42),
    0 10px 24px rgba(255,214,111,.34),
    0 0 32px rgba(255,224,132,.32),
    inset 0 3px 0 rgba(255,255,255,.58),
    inset 0 -5px 0 rgba(137,83,14,.18);
}

.account-register-button:hover::after{
  left:120%;
}

.account-register-button:active{
  transform:
    translateY(1px)
    scale(.985);

  box-shadow:
    0 9px 18px rgba(207,141,37,.3),
    0 3px 9px rgba(255,214,111,.18),
    inset 0 2px 0 rgba(255,255,255,.42),
    inset 0 -2px 0 rgba(137,83,14,.18);
}

.account-register-button:focus-visible{
  outline:0;

  box-shadow:
    0 0 0 4px rgba(255,221,115,.3),
    0 18px 34px rgba(207,141,37,.34),
    inset 0 3px 0 rgba(255,255,255,.5),
    inset 0 -5px 0 rgba(137,83,14,.2);
}





/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:980px){

  .account-auth-main{
    padding:44px 18px;
  }

  .account-auth-shell{
    max-width:720px;
    grid-template-columns:1fr;
  }

  .account-auth-story-content{
    padding:44px 38px 40px;
  }

  .account-auth-brand{
    margin-bottom:28px;
  }

  .account-auth-story-points{
    grid-template-columns:1fr;
  }

  .account-auth-panel{
    padding:36px;
  }

}

@media(max-width:700px){

  .account-auth-main{
    padding:26px 12px;
  }

  .account-auth-shell{
    border-radius:24px;
  }

  .account-auth-shell::before{
    inset:7px;
    border-radius:18px;
  }

  .account-auth-story-content{
    padding:38px 26px;
  }

  .account-auth-brand{
    margin-bottom:24px;
  }

  .account-auth-story h1{
    font-size:3rem;
  }

  .account-auth-panel{
    padding:28px 20px 34px;
  }

  .account-auth-card{
    padding:24px 20px;
    border-radius:22px;
  }

}

@media(max-width:460px){

  .account-auth-main{
    padding:18px 10px;
  }

  .account-auth-story-content{
    padding:32px 20px;
  }

  .account-auth-story-lead{
    font-size:.88rem;
  }

  .account-auth-scripture{
    padding:18px 18px 18px 22px;
  }

  .account-auth-panel{
    padding:22px 14px 28px;
  }

  .account-auth-card{
    padding:22px 16px;
  }

  .account-auth-card-header h2{
    font-size:2.05rem;
  }

}