/* =========================================================
   DAVY+ PORTAL
   ========================================================= */


:root {

  --bg: #080b10;
  --bg-soft: #0d1118;

  --card: #111720;
  --card-soft: #151c26;

  --text: #f6f7f9;

  --muted: #9ea9b8;
  --muted-2: #6e7886;

  --accent: #e5a00d;
  --accent-light: #ffbd27;

  --line: rgba(255, 255, 255, 0.085);
  --line-strong: rgba(255, 255, 255, 0.13);

  --shadow:
    0 26px 90px rgba(0, 0, 0, 0.42);

  --radius: 24px;

}


/* =========================================================
   RESET
   ========================================================= */


* {
  box-sizing: border-box;
}


html {
  min-height: 100%;
  background: var(--bg);
}


body {

  margin: 0;

  min-height: 100vh;

  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;

  color: var(--text);

  background:

    radial-gradient(
      circle at 50% -10%,
      rgba(229, 160, 13, 0.14),
      transparent 34rem
    ),

    radial-gradient(
      circle at 10% 30%,
      rgba(255, 255, 255, 0.025),
      transparent 26rem
    ),

    var(--bg);

  display: grid;

  place-items: center;

  padding: 34px 18px;

}


/* =========================================================
   MAIN SHELL
   ========================================================= */


.shell {

  width: min(
    720px,
    100%
  );

}


/* =========================================================
   DAVY+ BRAND
   ========================================================= */


.brand {

  text-align: center;

  margin-bottom: 24px;

}


.brand-logo {

  display: block;

  width: min(
    430px,
    88vw
  );

  height: auto;

  max-height: 160px;

  margin: 0 auto;

  object-fit: contain;

}


.brand-subtitle {

  margin-top: -5px;

  color: var(--muted);

  font-size: 0.92rem;

  letter-spacing: 0.025em;

}


/* =========================================================
   PORTAL CARD
   ========================================================= */


.portal-card {

  position: relative;

  overflow: hidden;

  border:
    1px solid
    var(--line);

  border-radius:
    var(--radius);

  background:

    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.025),
      transparent 20%
    ),

    var(--card);

  box-shadow:
    var(--shadow);

}


/*
  Thin gold light across
  the top of the card
*/

.portal-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 2px;

  background:

    linear-gradient(
      90deg,
      transparent,
      var(--accent),
      transparent
    );

  opacity: 0.8;

}


/* =========================================================
   TOP BAR
   ========================================================= */


.topbar {

  min-height: 62px;

  padding:
    13px
    22px;

  border-bottom:
    1px solid
    var(--line);

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

  background:
    rgba(
      255,
      255,
      255,
      0.012
    );

}


.topbar-left {

  display: flex;

  align-items: center;

  gap: 12px;

  min-width: 0;

}


.notice-logo {

  width: 38px;
  height: 38px;

  flex:
    0
    0
    auto;

  border-radius:
    10px;

  object-fit:
    cover;

  box-shadow:
    0 4px 14px
    rgba(
      0,
      0,
      0,
      0.35
    );

}


.topbar-text {

  min-width: 0;

}


.topbar-title {

  font-size:
    0.9rem;

  font-weight:
    760;

  white-space:
    nowrap;

}


.topbar-meta {

  color:
    var(--muted);

  font-size:
    0.82rem;

  white-space:
    nowrap;

}


.topbar-mobile-date {

  display: none;

  margin-top:
    2px;

  color:
    var(--muted);

  font-size:
    0.72rem;

}


/* =========================================================
   NOTICE CONTENT
   ========================================================= */


.content {

  padding:
    clamp(
      28px,
      6vw,
      48px
    );

}


.eyebrow {

  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    12px;

  color:
    var(--accent-light);

  font-size:
    0.76rem;

  font-weight:
    850;

  letter-spacing:
    0.13em;

  text-transform:
    uppercase;

}


h1 {

  margin:
    0;

  max-width:
    620px;

  font-size:
    clamp(
      1.9rem,
      6vw,
      2.8rem
    );

  line-height:
    1.06;

  letter-spacing:
    -0.045em;

}


.notice-date {

  margin-top:
    12px;

  color:
    var(--muted);

  font-size:
    0.88rem;

}


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


.message {

  margin:
    30px
    0
    28px;

  color:
    #dce1e7;

  font-size:
    1.02rem;

  line-height:
    1.72;

}


.message p {

  margin:
    0
    0
    16px;

}


.message p:last-child {

  margin-bottom:
    0;

}


/* =========================================================
   INFORMATION BOX
   ========================================================= */


.info-box {

  margin:
    0
    0
    28px;

  padding:
    16px
    17px;

  border:
    1px solid
    var(--line);

  border-radius:
    14px;

  background:
    var(--card-soft);

  display:
    flex;

  align-items:
    flex-start;

  gap:
    12px;

  color:
    #c8d0da;

  line-height:
    1.48;

  font-size:
    0.9rem;

}


.info-symbol {

  width:
    22px;

  height:
    22px;

  flex:
    0
    0
    auto;

  display:
    grid;

  place-items:
    center;

  margin-top:
    1px;

  border:
    1px solid
    rgba(
      229,
      160,
      13,
      0.35
    );

  border-radius:
    50%;

  color:
    var(--accent);

  font-size:
    0.78rem;

  font-weight:
    850;

}


/* =========================================================
   CONTINUE BUTTON
   ========================================================= */


.primary-button {

  appearance:
    none;

  width:
    100%;

  min-height:
    60px;

  padding:
    16px
    22px;

  border:
    0;

  border-radius:
    14px;

  background:

    linear-gradient(
      180deg,
      var(--accent-light),
      var(--accent)
    );

  color:
    #111;

  font:
    inherit;

  font-weight:
    850;

  cursor:
    pointer;

  box-shadow:

    0
    10px
    30px
    rgba(
      229,
      160,
      13,
      0.14
    );

  transition:

    transform
    0.15s
    ease,

    filter
    0.15s
    ease,

    box-shadow
    0.15s
    ease;

}


.primary-button:hover {

  filter:
    brightness(
      1.06
    );

  transform:
    translateY(
      -1px
    );

  box-shadow:

    0
    14px
    34px
    rgba(
      229,
      160,
      13,
      0.20
    );

}


.primary-button:active {

  transform:
    translateY(
      0
    );

}


.primary-button:focus-visible {

  outline:
    3px solid
    rgba(
      255,
      189,
      39,
      0.45
    );

  outline-offset:
    4px;

}


.button-check {

  margin-right:
    4px;

}


.ack-note {

  margin-top:
    14px;

  text-align:
    center;

  color:
    var(--muted);

  font-size:
    0.78rem;

  line-height:
    1.5;

}


/* =========================================================
   RETURNING USER VIEW
   ========================================================= */


.returning-view {

  display:
    none;

  position:
    relative;

  padding:
    58px
    34px;

  text-align:
    center;

}


.returning
.notice-view {

  display:
    none;

}


.returning
.returning-view {

  display:
    block;

}


.returning-icon {

  position:
    relative;

  width:
    72px;

  height:
    72px;

  margin:
    0 auto
    20px;

}


.returning-icon img {

  display:
    block;

  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  border-radius:
    18px;

}


.check-badge {

  position:
    absolute;

  top:
    48px;

  left:
    calc(
      50% + 17px
    );

  width:
    27px;

  height:
    27px;

  display:
    grid;

  place-items:
    center;

  border:
    3px solid
    var(--card);

  border-radius:
    50%;

  background:
    var(--accent);

  color:
    #111;

  font-size:
    0.8rem;

  font-weight:
    900;

}


.returning-view h2 {

  margin:
    0;

  font-size:
    1.6rem;

  letter-spacing:
    -0.03em;

}


.returning-view p {

  margin:
    9px
    0
    0;

  color:
    var(--muted);

  line-height:
    1.5;

}


/* =========================================================
   REDIRECT PROGRESS BAR
   ========================================================= */


.progress {

  width:
    160px;

  height:
    3px;

  margin:
    24px
    auto
    0;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    rgba(
      255,
      255,
      255,
      0.08
    );

}


.progress-bar {

  width:
    100%;

  height:
    100%;

  background:
    var(--accent);

  transform-origin:
    left center;

  animation:
    progressLoad
    1.15s
    linear
    forwards;

}


@keyframes progressLoad {

  from {

    transform:
      scaleX(
        0
      );

  }

  to {

    transform:
      scaleX(
        1
      );

  }

}


/* =========================================================
   FOOTER
   ========================================================= */


.footer-row {

  margin-top:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  flex-wrap:
    wrap;

  color:
    var(--muted-2);

  font-size:
    0.77rem;

}


.footer-dot {

  width:
    3px;

  height:
    3px;

  border-radius:
    50%;

  background:
    var(--muted-2);

}


/* =========================================================
   MOBILE
   ========================================================= */


@media
(max-width: 540px) {

  body {

    padding:
      22px
      13px;

  }


  .brand {

    margin-bottom:
      16px;

  }


  .brand-logo {

    width:
      min(
        360px,
        92vw
      );

    max-height:
      120px;

  }


  .brand-subtitle {

    margin-top:
      -7px;

    font-size:
      0.84rem;

  }


  .portal-card {

    border-radius:
      20px;

  }


  .topbar {

    padding:
      12px
      16px;

  }


  .notice-logo {

    width:
      36px;

    height:
      36px;

  }


  .topbar-meta {

    display:
      none;

  }


  .topbar-mobile-date {

    display:
      block;

  }


  .content {

    padding:
      27px
      22px
      24px;

  }


  h1 {

    font-size:
      clamp(
        1.75rem,
        9vw,
        2.25rem
      );

  }


  .notice-date {

    display:
      none;

  }


  .message {

    margin-top:
      25px;

    font-size:
      0.98rem;

    line-height:
      1.66;

  }


  .info-box {

    font-size:
      0.86rem;

  }


  .primary-button {

    min-height:
      58px;

    padding:
      15px
      14px;

    font-size:
      0.93rem;

  }


  .returning-view {

    padding:
      48px
      24px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */


@media
(prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {

    animation-duration:
      0.001ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.001ms !important;

  }

}