/* ==========================================================================
   Cards
   --------------------------------------------------------------------------
   Card-level layout for the auth screens, replacing the Webflow classes each
   card shipped with. Geometry (position, size) is ported 1:1 from the
   pre-rebrand Webflow rules in hollaco-auth.css — this file exists to keep
   that geometry while moving colour onto --hc-* semantic roles.

   Linked LAST (after Webflow's own stylesheets) so the handful of Webflow
   framework classes a card still carries (w-form, w-input, w-button,
   w-inline-block) lose the cascade to the classes here, the same way the
   card's own Webflow classes already won over those framework defaults
   before this rebrand touched anything. No !important, no inflated
   selectors — just normal cascade order.

   Semantic colour roles only — see hollaco-portfolio coding-conventions.
   Position/size values are literal px, ported from the Webflow rules they
   replace, because the geometry gate checks exact boxes, not tokens.
   ========================================================================== */

/* ---------- SignIn card ---------- */

.hc-card {
  background-color: var(--hc-color-background-default);
  border-radius: var(--hc-border-radius-xs);
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  align-items: stretch;
  width: 510px;
  min-width: 510px;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .hc-card {
    height: auto;
  }
}

/* Between 480px and 767px the card would otherwise overflow past the right
   edge (fixed 510px wide, min-width 430px on the content pane) — this lets
   it shrink to fit and keeps the side gutters even. Ported from the
   post-export fix in hollaco-auth.css (search "shrink to fit"), not from
   the original Webflow rule, which this overrides. */
@media screen and (max-width: 767px) {
  .hc-card {
    width: 100%;
    max-width: 510px;
    min-width: 0;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
  }
}

/* min-width is deliberately left alone here — the 767px breakpoint's fix
   rule above already set it to 0 and, being later in this same file, keeps
   winning down through this width too. Restating min-width: auto here (as
   the original Webflow rule did) would only re-introduce the overflow the
   fix rule exists to prevent. */
@media screen and (max-width: 479px) {
  .hc-card {
    flex: 0 auto;
    height: auto;
  }
}

/* Dead markup: the toaster is permanently display:none in the source
   Webflow CSS with no rule anywhere that un-hides it, and no script in
   web/js/ reaches into it. Hiding the outer wrapper is enough — nothing
   inside needs its own styling. */
.hc-card__toaster {
  display: none;
}

/* Three nested wrappers between the card root and its padded content —
   ported as-is from section-style-3 / container-8 / section-style-4. */
.hc-card__frame {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

@media screen and (max-width: 991px) {
  .hc-card__frame {
    width: 100%;
  }
}

@media screen and (max-width: 767px) {
  .hc-card__frame {
    justify-content: flex-start;
    align-items: center;
    height: auto;
    display: flex;
  }
}

@media screen and (max-width: 479px) {
  .hc-card__frame {
    align-self: stretch;
    align-items: flex-start;
    padding-bottom: 0;
    display: flex;
  }
}

.hc-card__surface {
  background-color: var(--hc-color-background-default);
  border-top-left-radius: var(--hc-border-radius-xs);
  border-top-right-radius: var(--hc-border-radius-xs);
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 510px;
  height: 630px;
  min-height: 630px;
  display: flex;
}

@media screen and (max-width: 991px) {
  .hc-card__surface {
    height: auto;
    min-height: 700px;
  }
}

/* Same "shrink to fit" fix as .hc-card at this breakpoint — see the note
   there. It targets this element too in the source. */
@media screen and (max-width: 767px) {
  .hc-card__surface {
    width: 100%;
    max-width: 510px;
    min-width: 0;
    min-height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* width/min-width are deliberately absent here: the 767px fix rule above
   sets both, and in the source stylesheet that fix rule is appended after
   every breakpoint block (including this one), so it always wins down
   through 479px too. Restating width: auto here would win instead — cards.css
   defines this same fix earlier in the file rather than after everything
   else, so leaving these two properties out is what makes this block match
   what actually reaches the browser in the source order it was ported from. */
@media screen and (max-width: 479px) {
  .hc-card__surface {
    align-self: stretch;
  }
}

.hc-card__content {
  background-color: var(--hc-color-background-default);
  border-radius: var(--hc-border-radius-xs);
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 510px;
  min-width: 430px;
  height: 100%;
  min-height: 695px;
  padding: 40px 56px;
  display: flex;
  position: static;
}

@media screen and (max-width: 991px) {
  .hc-card__content {
    min-height: 700px;
  }
}

@media screen and (max-width: 767px) {
  .hc-card__content {
    width: 100%;
    max-width: 510px;
    min-width: 0;
    min-height: auto;
    padding: 20px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* width/min-width omitted for the same reason as .hc-card__surface above —
   the 767px fix rule wins them at every width down to 479px in the source
   order this was ported from. */
@media screen and (max-width: 479px) {
  .hc-card__content {
    align-self: stretch;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
}

/* ---------- Header: logo + "Sign in" title ---------- */

.hc-card__header {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 8px;
  display: flex;
}

@media screen and (max-width: 479px) {
  .hc-card__header {
    margin-left: 5px;
  }
}

/* width and margin-top both carry forward from the source heading-1 rule —
   its font/colour declarations target text this element never holds
   directly (the visible text is .hc-card__title, one level down) so they
   were dead weight in the original CSS too. */
.hc-card__header-row {
  width: 100%;
  margin-top: 16px;
}

/* Hidden on desktop — the page header carries the logo there instead.
   Shown from 991px down, where that header disappears. */
.hc-card__logo-wrap {
  display: none;
}

@media screen and (max-width: 991px) {
  .hc-card__logo-wrap {
    align-self: flex-start;
    height: 34px;
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .hc-card__logo-wrap {
    align-self: flex-start;
    width: auto;
  }
}

@media screen and (max-width: 991px) {
  .hc-card__logo {
    margin-top: 10px;
  }
}

.hc-card__title {
  color: var(--hc-color-content-heading);
  letter-spacing: -1px;
  width: 100%;
  margin-top: 0;
  margin-bottom: 8px;
  font-family: Inter, sans-serif;
  font-size: 36px;
  font-weight: 600;
  line-height: 54px;
}

/* ---------- Main: new-user row + the magic-link email form ---------- */

.hc-card__main {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: 478.69px;
  display: flex;
}

.hc-card__form {
  grid-row-gap: 21.01px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.hc-card__form-body {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  min-height: 69px;
}

.hc-card__newuser {
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

@media screen and (max-width: 767px), screen and (max-width: 479px) {
  .hc-card__newuser {
    margin-bottom: 20px;
  }
}

.hc-card__newuser-text {
  color: var(--hc-color-content-caption);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 27px;
}

.hc-card__newuser-cta {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

/* content-brand, not --hc-color-link: one link colour on the card, and
   this is the same role base.css's bare `a { }` rule already defaults
   every unstyled anchor to. Underline stays — "Create an account" is an
   inline link inside the sentence "New user? Create an account", exactly
   the case that rule's underline exists to protect (brand teal is only
   1.98:1 against body text). */
.hc-card__newuser-link {
  color: var(--hc-color-content-brand);
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 27px;
  text-decoration: underline;
}

.hc-card__field-row {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.hc-card__field {
  flex-flow: column;
  align-items: stretch;
  width: 100%;
  padding-top: 4px;
  padding-bottom: 8px;
  display: flex;
}

/* Dead markup: a loading spinner image with no rule anywhere that shows it
   and no script in web/js/ that reaches into it (signin_validator.js builds
   its own spinner via ::after instead — see hc-components.css's .hc-ld). */
.hc-card__spinner {
  display: none;
  position: absolute;
  inset: 641px 34% 0% auto;
}

.hc-card__field-form {
  flex-flow: column;
  display: flex;
}

@media screen and (max-width: 479px) {
  .hc-card__field-form {
    align-items: stretch;
  }
}

/* Ported as-is rather than reusing the vendored .hc-field__label: that
   class leaves margin-bottom unset, and hollaco-auth.css's bare `p { }`
   rule (margin-bottom: 10px) then shows through with nothing to beat it,
   pushing the input down 7px. field-label always zeroed it explicitly. */
.hc-card__field-label {
  align-items: center;
  margin-bottom: 0;
  padding-bottom: 5px;
  padding-right: 5px;
  font-size: 12px;
  font-weight: 400;
  display: inline-flex;
}

/* The box model (width, height, padding) stays w-input's — see the file
   banner. Only the colour/radius text-field used to own comes from here. */
.hc-card__field-input {
  border: 1px solid var(--hc-color-border-default);
  color: var(--hc-color-content-default);
  border-radius: var(--hc-border-radius-xs);
}

/* Same trade as .hc-card__field-input: box model stays w-button's, this
   class only supplies the parts button-style/continue used to own. The
   border is the same colour as the background — its job is the extra 2px
   of box height (baseline height 38 = 7+20+7 padding/line-height + 2×2
   border), not a visible edge.

   background-brand-strong / content-on-brand-strong is the primary-CTA
   pair, not background-brand: the label is bold 14px, which does not meet
   WCAG's "large text" threshold (14pt bold = 18.66px), so it owes the full
   4.5:1 a text-carrying fill needs — background-brand alone is 4.27:1 and
   fails that. This is deliberately teal, not .blue: .blue (--hc-color-
   blue-900) is the Style Center's legacy variant for properties still
   mid-migration, and auth's own sign-in button is exactly what plan 2 is
   migrating. */
.hc-card__cta {
  background-color: var(--hc-color-background-brand-strong);
  border: var(--hc-border-width-md) solid var(--hc-color-background-brand-strong);
  border-radius: var(--hc-border-radius-round);
  color: var(--hc-color-content-on-brand-strong);
  align-self: flex-end;
  max-width: 120px;
  padding: 7px var(--hc-spacing-md);
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: var(--hc-font-weight-bold);
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.hc-card__cta:active {
  background-color: var(--hc-color-background-brand-strong-active);
  border-color: var(--hc-color-background-brand-strong-active);
}

@media screen and (max-width: 479px) {
  .hc-card__cta {
    margin-top: 20px;
  }
}

/* ---------- "Or" divider ---------- */

.hc-card__divider-wrap {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-bottom: 10px;
  display: flex;
}

@media screen and (max-width: 479px) {
  .hc-card__divider-wrap {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

.hc-card__divider {
  grid-column-gap: 8.5px;
  grid-row-gap: 8.5px;
  text-align: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 23px;
  margin-top: 24px;
  margin-bottom: 10px;
  font-size: 17px;
  font-weight: 300;
  line-height: 23px;
  display: flex;
}

.hc-card__divider-rule {
  border-bottom: 1px solid var(--hc-color-border-subtle);
  flex: 1;
  width: 100px;
  height: 1px;
}

.hc-card__divider-text {
  font-size: 15px;
  font-weight: 500;
}

/* ---------- SSO stack ---------- */

.hc-card__sso-wrap {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  padding-top: 0;
  display: flex;
}

@media screen and (max-width: 479px) {
  .hc-card__sso-wrap {
    justify-content: flex-start;
    align-items: center;
    height: auto;
    display: flex;
  }
}

/* Same class on both the outer wrapper and the inner stack in the source
   markup — two identical flex columns, one nested in the other. */
.hc-card__sso-stack {
  grid-row-gap: 16px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

/* Same class on all three provider buttons in the source, google/facebook/
   apple included — the near-identical padding values living on sibling
   classes elsewhere in hollaco-auth.css (button-style-2, button-style-4)
   belong to other cards' provider counts, not per-provider variants of
   this one.

   text-decoration: none overrides base.css's bare `a { }` rule, which
   underlines every anchor by default — correct for an inline link in body
   copy (brand teal is only 1.98:1 against body text and needs a second
   cue) but wrong here: this anchor's boundary is a full-width bordered
   button, not text, so the underline is noise. */
.hc-card__sso-btn {
  background-color: var(--hc-color-background-default);
  border: var(--hc-border-width-md) solid var(--hc-color-border-subtle);
  border-radius: var(--hc-border-radius-round);
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 32px;
  min-height: 56px;
  padding: 17px 97.09px 17px 97.08px;
  text-decoration: none;
  display: flex;
}

@media screen and (max-width: 479px) {
  .hc-card__sso-btn {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    display: flex;
  }
}

.hc-card__sso-content {
  justify-content: center;
  align-items: center;
  width: 100%;
  padding-left: 12px;
  display: flex;
}

@media screen and (max-width: 767px) {
  .hc-card__sso-content {
    width: auto;
  }
}

.hc-card__sso-icon {
  overflow: hidden;
}

.hc-card__sso-apple-icon {
  justify-content: flex-start;
  align-items: flex-start;
  width: 37px;
  height: 24px;
  display: flex;
  overflow: hidden;
}

.hc-card__sso-apple-icon-fill {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 37px;
  height: 24px;
  padding-left: 15.2373px;
  padding-right: 2.23725px;
  display: flex;
  overflow: hidden;
}

.hc-card__sso-label {
  color: var(--hc-color-content-caption);
  text-align: center;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Inter, sans-serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 19px;
}

@media screen and (max-width: 767px) {
  .hc-card__sso-label--google {
    justify-content: center;
    display: flex;
  }
}

@media screen and (max-width: 479px) {
  .hc-card__sso-label--google {
    white-space: nowrap;
    flex: 0 auto;
    justify-content: flex-start;
    align-items: center;
    width: auto;
  }
}

@media screen and (max-width: 991px) {
  .hc-card__sso-label--facebook {
    flex: 1;
  }
}

@media screen and (max-width: 767px) {
  .hc-card__sso-label--facebook {
    width: auto;
  }
}

@media screen and (max-width: 991px) {
  .hc-card__sso-label--apple {
    display: block;
  }
}

/* ---------- Footer ---------- */

.hc-card__footer {
  border-bottom-right-radius: var(--hc-border-radius-xs);
  border-bottom-left-radius: var(--hc-border-radius-xs);
  flex-direction: column;
  justify-content: flex-start;
  align-self: auto;
  align-items: flex-start;
  width: auto;
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
}

@media screen and (max-width: 991px) {
  .hc-card__footer {
    align-self: stretch;
    padding-top: 20px;
    display: flex;
  }
}

@media screen and (max-width: 767px) {
  .hc-card__footer {
    background-color: transparent;
    justify-content: flex-start;
    align-self: flex-start;
    align-items: flex-start;
    width: 100%;
    margin-left: 0;
    margin-right: auto;
    padding-top: 32px;
    padding-bottom: 20px;
    display: flex;
    position: static;
  }
}

@media screen and (max-width: 479px) {
  .hc-card__footer {
    align-self: auto;
    margin-top: 0;
    padding-top: 40px;
    padding-bottom: 40px;
    padding-left: 10px;
    display: block;
    position: static;
  }
}

.hc-card__footer-row {
  flex-flow: row;
  justify-content: space-between;
  align-items: flex-start;
  width: auto;
  padding-top: 0;
  padding-left: 0;
  padding-right: 40px;
  display: flex;
}

@media screen and (max-width: 991px) {
  .hc-card__footer-row {
    padding-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .hc-card__footer-row {
    flex-flow: row;
    padding-top: 0;
    padding-left: 20px;
  }
}

@media screen and (max-width: 479px) {
  .hc-card__footer-row {
    padding-left: 10px;
  }
}

/* The source rule (link-style-4) also set color: #d81111 here, but the
   only content is the .hc-card__footer-link child, which sets its own
   colour and always wins — this wrapper's colour is inherited by nothing
   and was never visible. Dropped rather than carried forward as a token
   with no effect.

   text-decoration: underline was also dropped, deliberately — do not port it
   back from the Webflow source. text-decoration propagates to descendants and
   cannot be cancelled by them, except into an atomic inline box, so this
   wrapper's underline would beat .hc-card__footer-link's `text-decoration:
   none` below on every browser that respects the CSS Text Decoration spec.
   It looks like it works today only because the anchor is display:
   inline-block via Webflow's w-inline-block class; that class is removed in
   Plan 4, and this underline must not still be here when it goes. */
.hc-card__footer-link-wrap {
  flex: 0 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding-left: 0;
  font-weight: 500;
  display: block;
}

/* content-brand, not --hc-color-link — same one-link-colour reasoning as
   .hc-card__newuser-link. Underline turned off: unlike "Create an account",
   this link stands alone as its own row, not inline inside a sentence, so
   base.css's non-colour cue isn't needed here. */
.hc-card__footer-link {
  color: var(--hc-color-content-brand);
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16.1px;
  text-decoration: none;
  position: static;
}

@media screen and (max-width: 991px) {
  .hc-card__footer-link {
    padding-left: 0;
  }
}

@media screen and (max-width: 767px) {
  .hc-card__footer-link {
    padding-left: 10px;
  }
}

@media screen and (max-width: 479px) {
  .hc-card__footer-link {
    padding-bottom: 10px;
    padding-left: 0;
  }
}