/* =========================================================
   TOE BEANS DESIGN SYSTEM
   CREATE ACCOUNT PAGE

   Final page-specific composition.

   Shared navigation, page canvas, primary cards,
   primary buttons, typography foundation, colors,
   radii, borders, shadows and theme behavior come
   from the canonical Toe Beans design system.
   ========================================================= */


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

.ds-create-account-page {
  width:
    100%;
}


.ds-create-account-shell {
  width:
    min(
      1280px,
      calc(100% - 40px)
    );

  margin:
    0 auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.ds-create-account-intro {
  max-width:
    760px;

  margin:
    0 auto var(--ds-space-6);

  text-align:
    center;
}


.ds-create-account-eyebrow {
  margin:
    0 0 var(--ds-space-2);

  color:
    var(--ds-primary);

  font-size:
    12px;

  font-weight:
    900;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}


.ds-create-account-intro h1 {
  max-width:
    700px;

  margin:
    0 auto;

  color:
    var(--ds-text);

  font-size:
    clamp(
      40px,
      4.6vw,
      56px
    );

  line-height:
    1.04;

  letter-spacing:
    -0.04em;
}


.ds-create-account-description {
  max-width:
    650px;

  margin:
    var(--ds-space-3) auto 0;

  color:
    var(--ds-muted);

  font-size:
    17px;

  line-height:
    1.55;
}


.ds-create-account-question {
  margin:
    var(--ds-space-4) 0 0;

  color:
    var(--ds-text);

  font-size:
    20px;

  line-height:
    1.32;
}


/* =========================================================
   ACCOUNT CHOICES
   ========================================================= */

.ds-create-account-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap:
    var(--ds-space-4);
}


.ds-create-account-option {
  min-width:
    0;

  min-height:
    285px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    stretch;
}


.ds-create-account-option-icon {
  width:
    54px;

  height:
    54px;

  margin-bottom:
    var(--ds-space-3);

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

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

  border-radius:
    var(--ds-radius-md);

  background:
    var(--ds-surface-alt);

  color:
    var(--ds-primary);
}


.ds-create-account-option-icon .ds-icon {
  width:
    26px;

  height:
    26px;
}


.ds-create-account-option h2 {
  margin:
    0;

  color:
    var(--ds-text);

  font-size:
    20px;

  line-height:
    1.34;
}


.ds-create-account-option p {
  margin:
    var(--ds-space-2) 0 var(--ds-space-4);

  color:
    var(--ds-muted);

  font-size:
    15px;

  line-height:
    1.6;
}


.ds-create-account-option .ds-button {
  width:
    100%;

  min-height:
    50px;

  margin-top:
    auto;

  padding-left:
    var(--ds-space-2);

  padding-right:
    var(--ds-space-2);

  font-size:
    14px;

  white-space:
    nowrap;
}


/* =========================================================
   EXISTING ACCOUNT
   ========================================================= */

.ds-create-account-login {
  margin-top:
    var(--ds-space-5);

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  flex-wrap:
    wrap;

  gap:
    5px;

  font-size:
    15px;
}


.ds-create-account-login-copy {
  color:
    var(--ds-muted);
}


.ds-create-account-login-link {
  color:
    var(--ds-primary);

  font-weight:
    800;

  text-decoration:
    none;
}


.ds-create-account-login-link:hover {
  text-decoration:
    underline;
}


.ds-create-account-login-link:focus-visible {
  outline:
    2px solid var(--ds-primary);

  outline-offset:
    3px;

  border-radius:
    var(--ds-radius-sm);
}


/* =========================================================
   SUPPORTING INFORMATION
   ========================================================= */

.ds-create-account-info {
  max-width:
    1080px;

  margin:
    var(--ds-space-7) auto 0;

  padding-top:
    var(--ds-space-5);

  border-top:
    1px solid var(--ds-border);
}


.ds-create-account-info-heading {
  margin:
    0 0 var(--ds-space-3);

  color:
    var(--ds-muted);

  font-size:
    16px;

  font-weight:
    800;

  letter-spacing:
    0.02em;

  text-align:
    center;
}


.ds-create-account-info-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  gap:
    var(--ds-space-4);
}


.ds-create-account-info-item {
  min-width:
    0;

  padding:
    var(--ds-space-4) var(--ds-space-4);

  border-left:
    1px solid var(--ds-border);
}


.ds-create-account-info-item:first-child {
  border-left:
    0;
}


.ds-create-account-info-item h3 {
  margin:
    0 0 4px;

  color:
    var(--ds-text);

  font-size:
    15px;
}


.ds-create-account-info-item p {
  margin:
    0;

  color:
    var(--ds-muted);

  font-size:
    14px;

  line-height:
    1.55;
}


/* =========================================================
   SUPPORT FOOTER
   ========================================================= */
/* =========================================================
   RESPONSIVE
   ========================================================= */