/* =========================================================
   TOE BEANS DESIGN SYSTEM
   HOMEPAGE

   Production homepage presentation.

   This file may use only design-system tokens and reusable
   design-system foundations.

   Navbar/account presentation remains owned by:
     ds-navbar.css
     ds-account-menu.css
   ========================================================= */


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




.ds-home-main {
  width:
    min(
      var(--ds-content-width),
      calc(100% - 40px)
    );

  margin:
    0 auto;

  padding:
    var(--ds-space-8)
    0
    80px;
}


/* =========================================================
   HERO
   ========================================================= */

.ds-home-hero {
  width:
    min(
      var(--ds-content-width),
      calc(100% - 40px)
    );

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    minmax(260px, 0.8fr)
    minmax(0, 1.2fr);

  align-items:
    center;

  gap:
    var(--ds-space-9);

  padding:
    var(--ds-space-8)
    0
    var(--ds-space-9);
}


.ds-home-hero-logo {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;
}


.ds-home-hero-logo img {
  display:
    block;

  width:
    min(
      100%,
      370px
    );

  height:
    auto;

  object-fit:
    contain;
}


.ds-home-hero-copy {
  min-width:
    0;
}


.ds-home-eyebrow,
.ds-home-kicker {
  margin:
    0
    0
    var(--ds-space-3);

  color:
    var(--ds-primary);

  font-size:
    14px;

  font-weight:
    800;

  letter-spacing:
    0.04em;
}


.ds-home-hero h1 {
  max-width:
    760px;

  margin:
    0;

  color:
    var(--ds-heading);

  font-size:
    clamp(
      38px,
      5vw,
      62px
    );

  line-height:
    1.04;

  letter-spacing:
    -0.03em;
}


.ds-home-hero-text {
  max-width:
    700px;

  margin:
    var(--ds-space-5)
    0
    0;

  color:
    var(--ds-text);

  font-size:
    18px;

  line-height:
    1.65;
}


/* =========================================================
   HERO ACTIONS
   ========================================================= */

.ds-home-actions {
  display:
    flex;

  flex-wrap:
    wrap;

  align-items:
    center;

  gap:
    var(--ds-space-3);

  margin-top:
    var(--ds-space-6);
}


.ds-home-hero-actions {
  display:
    grid;

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

  width:
    100%;

  max-width:
    620px;
}


.ds-home-hero-actions
.ds-button {
  width:
    100%;

  min-width:
    0;

  min-height:
    46px;

  padding:
    11px
    12px;

  white-space:
    nowrap;

  text-decoration:
    none;
}


/* =========================================================
   BENEFITS
   ========================================================= */

.ds-home-benefits {
  display:
    flex;

  flex-wrap:
    wrap;

  gap:
    var(--ds-space-3)
    var(--ds-space-5);

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

  color:
    var(--ds-muted);

  font-size:
    14px;

  font-weight:
    700;
}


.ds-home-benefit {
  display:
    inline-flex;

  align-items:
    center;

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


.ds-home-benefit .ds-icon {
  color:
    var(--ds-success);
}





/* =========================================================
   CONTENT SECTIONS
   ========================================================= */

.ds-home-section {
  margin-top:
    var(--ds-space-7);

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

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

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

  background:
    var(--ds-surface);

  box-shadow:
    var(--ds-shadow-sm);
}


.ds-home-section:first-child {
  margin-top:
    0;
}


.ds-home-section-heading {
  max-width:
    720px;

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

  text-align:
    center;
}


.ds-home-section-heading h2 {
  margin:
    0;

  color:
    var(--ds-heading);

  font-size:
    clamp(
      28px,
      4vw,
      38px
    );

  line-height:
    1.15;
}


.ds-home-intro {
  max-width:
    680px;

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

  color:
    var(--ds-muted);

  font-size:
    17px;

  line-height:
    1.65;
}


/* =========================================================
   FEATURE / INFO GRIDS
   ========================================================= */

.ds-home-grid {
  display:
    grid;

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

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


.ds-home-info-card {
  min-width:
    0;

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

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

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

  background:
    var(--ds-surface-soft);
}


.ds-home-info-card h3 {
  margin:
    var(--ds-space-3)
    0
    var(--ds-space-2);

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


.ds-home-info-card p {
  margin:
    0;

  color:
    var(--ds-muted);

  line-height:
    1.6;
}


/* =========================================================
   FEATURE ICONS

   CSS/SVG-style visual containers replace corrupted emoji
   characters from the legacy page.
   ========================================================= */

.ds-home-icon {
  width:
    46px;

  height:
    46px;

  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);

  font-size:
    20px;

  font-weight:
    900;

  line-height:
    1;
}


.ds-home-icon-centered {
  margin:
    0 auto
    var(--ds-space-3);
}


/* =========================================================
   CALLOUT
   ========================================================= */

.ds-home-callout {
  text-align:
    center;
}


.ds-home-callout
.ds-home-actions {
  justify-content:
    center;
}


/* =========================================================
   SETTINGS MODAL HOST

   Keeps existing JS behavior while moving its colors and
   presentation onto design-system tokens.
   ========================================================= */

.ds-home-settings-modal {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    grid;

  place-items:
    center;

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


.ds-home-settings-modal.hidden {
  display:
    none;
}


.ds-home-settings-backdrop {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(0, 0, 0, 0.52);
}


.ds-home-settings-card {
  position:
    relative;

  z-index:
    1;

  width:
    min(
      680px,
      calc(100vw - 32px)
    );

  max-height:
    90vh;

  overflow-y:
    auto;

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

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

  background:
    var(--ds-surface);

  color:
    var(--ds-text);

  box-shadow:
    var(--ds-shadow-lg);
}


.ds-home-settings-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    var(--ds-space-5);

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

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

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

  background:
    var(--ds-surface-soft);
}


.ds-home-settings-row h3 {
  margin:
    0
    0
    var(--ds-space-1);
}


.ds-home-settings-row p {
  margin:
    0;

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


/* =========================================================
   FOOTER
   ========================================================= */
/* =========================================================
   SESSION VISIBILITY

   The current session type is placed on <html> synchronously
   in <head> before stylesheet rendering.

   Use that state here as well as in the navbar so homepage
   session-specific content has its correct geometry on the
   first painted frame.

   site-navbar.js may continue adding/removing .hidden after
   initialization; it is no longer responsible for first-paint
   geometry.
   ========================================================= */


/* Runtime visibility */
.session-logged-out.hidden,
.session-logged-in.hidden {
  display:
    none;
}


/* First-paint: signed-out visitors do not see logged-in UI. */
html[data-tb-navbar-session="signed-out"]
.session-logged-in {
  display:
    none;
}


/* First-paint: signed-in users do not see logged-out UI. */
html[data-tb-navbar-session="user"]
.session-logged-out,
html[data-tb-navbar-session="partner"]
.session-logged-out {
  display:
    none;
}


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