/* Responsive landing and onboarding overrides.
   Keep the hero art as a visual layer and render real HTML text above it. */

.landing-nav-accessible {
  height: auto;
  left: auto;
  opacity: 1;
  overflow: visible;
  padding: 12px clamp(16px, 4vw, 56px);
  pointer-events: auto;
  position: sticky;
  top: 0;
  width: auto;
}

.landing-nav {
  grid-template-columns: minmax(142px, 220px) minmax(0, 1fr) auto;
}

.landing-nav-actions {
  align-items: center;
  display: inline-flex;
  /* Wraps rather than overflowing. At 320px the nav's three columns need
     142px of brand plus ~226px of actions against 288px of content box, so
     something has to give - and dropping the language pill onto a second line
     keeps the wordmark at its designed size, which shrinking the brand column
     would not. */
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-end;
}

.landing-signin {
  display: none;
}

.language-switcher {
  align-items: center;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--theruka-line);
  border-radius: 999px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}

.language-switcher a {
  border-radius: 999px;
  color: var(--theruka-navy);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1;
  padding: 8px 9px;
  text-decoration: none;
}

.language-switcher a.active {
  background: var(--theruka-navy);
  color: #ffffff;
}

.landing-hero {
  isolation: isolate;
  min-height: calc(100svh - 78px);
  place-items: stretch;
}

.landing-hero-frame {
  inset: 0;
  position: absolute;
  z-index: -2;
}

.landing-hero-frame::after {
  background:
    linear-gradient(90deg, rgba(251, 247, 240, 0.99) 0%, rgba(251, 247, 240, 0.96) 39%, rgba(251, 247, 240, 0.44) 70%, rgba(251, 247, 240, 0.1) 100%),
    linear-gradient(180deg, rgba(251, 247, 240, 0.34) 0%, rgba(251, 247, 240, 0.08) 45%, rgba(6, 33, 63, 0.28) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.landing-hero-image {
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.landing-hero-content {
  align-self: center;
  clip: auto;
  clip-path: none;
  height: auto;
  max-width: min(640px, 92vw);
  overflow: visible;
  padding: clamp(42px, 7vw, 96px) clamp(22px, 6vw, 86px);
  position: relative;
  white-space: normal;
  width: auto;
  z-index: 2;
}

.landing-hero h1 {
  font-size: clamp(3rem, 7vw, 5.2rem);
}

.landing-hero-actions .landing-primary,
.landing-hero-actions .landing-secondary {
  min-width: 132px;
}

.landing-hotspot {
  display: none;
}

.onboarding-shell {
  min-height: 100svh;
}

.onboarding-shell::before {
  background:
    linear-gradient(90deg, rgba(251, 247, 240, 0.96) 0%, rgba(251, 247, 240, 0.88) 44%, rgba(251, 247, 240, 0.9) 100%),
    linear-gradient(180deg, rgba(251, 247, 240, 0.18) 0%, rgba(6, 33, 63, 0.16) 100%);
}

.onboarding-hero-image {
  object-fit: cover;
  object-position: center center;
}

.onboarding-brand {
  align-content: center;
  clip: auto;
  clip-path: none;
  display: grid;
  gap: 14px;
  height: auto;
  max-width: 640px;
  overflow: visible;
  position: relative;
  white-space: normal;
  width: auto;
  z-index: 2;
}

.onboarding-brand h1 {
  font-size: clamp(3rem, 6vw, 4.6rem);
}

.onboarding-next-steps {
  display: grid;
  gap: 14px;
  list-style: none;
  margin: 10px 0 0;
  max-width: 460px;
  padding: 0;
}

.onboarding-next-steps li {
  align-items: start;
  display: flex;
  gap: 12px;
}

.onboarding-next-step-index {
  align-items: center;
  background: #06213f;
  border-radius: 999px;
  color: #fff;
  display: flex;
  flex: 0 0 auto;
  font-size: 0.76rem;
  font-weight: 900;
  height: 24px;
  justify-content: center;
  margin-top: 2px;
  width: 24px;
}

.onboarding-next-steps strong {
  color: #06213f;
  display: block;
  font-size: 0.92rem;
}

.onboarding-next-steps small {
  color: #5f6d7c;
  font-size: 0.82rem;
  line-height: 1.4;
}

.onboarding-language-switcher {
  justify-self: start;
  margin-bottom: 4px;
}

.google-signin-host {
  display: grid;
  margin-top: 18px;
  width: 100%;
}

.google-auth-link {
  align-items: center;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
  color: #3c4043;
  display: inline-grid;
  font-family: Roboto, Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  gap: 12px;
  grid-template-columns: 22px minmax(0, 1fr);
  justify-content: center;
  line-height: 1;
  min-height: 46px;
  padding: 0 18px;
  text-align: center;
  text-decoration: none;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  width: 100%;
}

.google-auth-link:hover {
  background: #f8fafd;
  border-color: #c6dafc;
  box-shadow: 0 1px 3px rgba(66, 133, 244, 0.22);
}

.google-auth-link:focus-visible {
  outline: 3px solid rgba(66, 133, 244, 0.26);
  outline-offset: 3px;
}

.google-auth-icon {
  display: grid;
  height: 22px;
  place-items: center;
  width: 22px;
}

.google-auth-icon svg {
  display: block;
  height: 22px;
  width: 22px;
}

.google-auth-link span:last-child {
  justify-self: center;
}

/* --- Past / Decision / Future, on desktop ----------------------------------
   These were `display: none` above 900px because the hero photograph carried
   the same three labels painted into its lower half, and two copies of the
   same three words on one screen is worse than either alone.

   The photograph no longer has them, so the markup version is the only one
   left - and it is the better one: it is real text, so it is translated with
   the rest of the page (the switcher offers EN/ES/PT, and painted lettering
   only ever speaks English), and it cannot be cropped off by the frame the way
   the baked labels were.

   A row rather than the phone layout's stack: there is width here, and the
   three steps are a sequence read left to right. */
@media (min-width: 901px) {
  .landing-hero-steps {
    display: grid;
    /* Equal columns, not flex: the three labels are different lengths, and
       letting them size to their content made "Future" hang lower than the
       other two, which read as a rendering fault rather than a row. */
    gap: 16px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
  }

  .landing-hero-steps li {
    align-items: start;
    display: grid;
    gap: 8px;
    grid-template-columns: 26px 1fr;
  }

  .landing-hero-steps svg {
    background: rgba(6, 33, 63, 0.06);
    border-radius: 999px;
    color: #06213f;
    height: 26px;
    padding: 6px;
    width: 26px;
  }

  .landing-hero-steps span {
    display: grid;
    gap: 1px;
  }

  .landing-hero-steps strong {
    color: #06213f;
    font-size: 0.78rem;
  }

  .landing-hero-steps small {
    color: #5f6d7c;
    font-size: 0.7rem;
    line-height: 1.35;
  }

  /* The copy column widens to hold three columns of steps. Without this the
     row wraps to two lines and stops reading as one sequence.

     The block padding comes down with it. The steps add 64px to a column that
     was already sized to fill the hero, so at the stock 95px the row finished
     26px past the fold on a 900px-tall window - present in the markup, invisible
     to the reader, which is the same as not having added it. */
  .landing-hero-content {
    max-width: 660px;
    padding-block: clamp(36px, 4.5vw, 62px);
  }
}

@media (max-width: 900px) {
  .landing-nav {
    grid-template-columns: minmax(130px, 1fr) auto;
    min-height: 68px;
  }

  .landing-brand img {
    height: 40px;
    width: 154px;
  }

  .landing-nav-actions {
    display: inline-flex;
  }

  .landing-signin {
    display: none;
  }

  .language-switcher {
    display: inline-flex;
  }

  /* The hero in styles.css is the original full-viewport band: height 100dvh,
     max-height 100dvh, overflow hidden. This file re-sizes it to its content on
     a phone, where the copy, both buttons and the three steps are stacked - but
     releasing `height` alone left `max-height` in force, so the box grew to auto
     and was then capped back to one screen with `overflow: hidden` quietly
     cutting the rest off. On a 390x844 phone that clipped 542px: the reassurance
     line and all three steps. max-height has to go with it. */
  .landing-hero {
    height: auto;
    max-height: none;
    min-height: calc(100svh - 68px);
    padding: 0;
  }

  /* The photo has "Past/Decision/Future" labels baked into its lower half, and
     they are recreated as real, accessible markup in .landing-hero-steps - so the
     photo's copy has to be hidden here or the same three labels appear twice, once
     legibly and once as ghost text further down.
     The last stop is fully opaque for that reason. A translucent navy was not
     enough: the baked-in labels are light on dark, so they read straight through
     0.85. And the band cannot be cropped away instead - the hero is taller than
     the photo's aspect ratio on a phone, so object-fit: cover already shows the
     image's full height and object-position has nothing left to move. */
  .landing-hero-frame::after {
    background:
      linear-gradient(180deg, rgba(251, 247, 240, 0.9) 0%, rgba(251, 247, 240, 0.93) 30%, rgb(251, 247, 240) 48%, rgb(251, 247, 240) 100%);
  }

  /* The 52vh that used to sit under this was reserving room for the photo to show
     below the copy. The photo is covered on a phone now (see the frame gradient
     above), so that reservation is just an empty half-screen of canvas. */
  .landing-hero-content {
    align-self: start;
    padding: 34px 22px 40px;
  }

  .landing-hero h1 {
    font-size: clamp(2.45rem, 12vw, 3.8rem);
    max-width: 10ch;
  }

  .landing-hero p {
    font-size: 0.96rem;
    line-height: 1.55;
  }

  .landing-hero-actions {
    gap: 10px;
    margin-top: 20px;
  }

  .landing-hero-steps {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 22px 0 0;
    padding: 0;
  }

  .landing-hero-steps li {
    align-items: center;
    display: flex;
    gap: 10px;
  }

  .landing-hero-steps svg {
    background: rgba(6, 33, 63, 0.06);
    border-radius: 999px;
    color: #06213f;
    flex: 0 0 auto;
    height: 34px;
    padding: 8px;
    width: 34px;
  }

  .landing-hero-steps span {
    display: grid;
    gap: 1px;
  }

  .landing-hero-steps strong {
    color: #06213f;
    font-size: 0.86rem;
  }

  .landing-hero-steps small {
    color: #5f6d7c;
    font-size: 0.76rem;
  }

  .landing-hero-actions .landing-primary,
  .landing-hero-actions .landing-secondary {
    flex: 1 1 150px;
  }

  .onboarding-shell {
    align-items: stretch;
    display: grid;
    gap: 0;
    min-height: 100svh;
    padding: 76px 0 0;
  }

  .onboarding-shell::before {
    background: linear-gradient(180deg, rgba(251, 247, 240, 0.96) 0%, rgba(251, 247, 240, 0.76) 34%, rgba(251, 247, 240, 0.08) 62%, rgba(251, 247, 240, 0.98) 100%);
  }

  .onboarding-hero-image {
    object-position: 62% center;
  }

  .onboarding-brand {
    padding: 24px 22px 34vh;
  }

  .onboarding-brand h1 {
    font-size: clamp(2.35rem, 11vw, 3.6rem);
    max-width: 10ch;
  }

  .onboarding-panel {
    align-self: end;
    grid-column: 1;
    justify-self: stretch;
    margin: 0;
    padding: 24px 22px 30px;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .landing-nav {
    gap: 10px;
    padding: 10px 14px;
  }

  .landing-brand img {
    width: 136px;
  }

  .landing-hero-content {
    padding-inline: 18px;
  }

  .landing-hero-actions {
    display: grid;
  }
}

/* ---------------------------------------------------------------------------
   Trial offer
   Above the sign-in button, because it is the reason to use it. Rendered from
   the live plan catalog, so it disappears on its own when no plan offers a
   trial - see renderTrialOffer in onboarding.js.
   --------------------------------------------------------------------------- */

.trial-offer-host {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

/* `display: grid` above outranks the UA's `[hidden] { display: none }`, so
   without this the block keeps its margin when there is no trial to offer. */
.trial-offer-host[hidden] {
  display: none;
}

.trial-offer-button {
  background: linear-gradient(135deg, #14532d 0%, #1b6b3a 100%);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(20, 83, 45, 0.22);
  color: #ffffff;
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  text-align: center;
  text-decoration: none;
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.trial-offer-button:hover,
.trial-offer-button:focus-visible {
  box-shadow: 0 12px 28px rgba(20, 83, 45, 0.3);
  transform: translateY(-1px);
}

.trial-offer-button strong {
  font-size: 1.02rem;
  line-height: 1.35;
}

/* The three reassurances are the reason this converts, so they stay legible
   rather than becoming fine print. */
.trial-offer-button span {
  font-size: 0.85rem;
  opacity: 0.92;
}

.trial-offer-note {
  color: var(--muted, #71717a);
  font-size: 0.78rem;
  margin: 0;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Demo vs trial explainer
   Shown before the demo opens, when there is a trial to offer instead. Reuses
   .confirm-overlay / .confirm-panel from styles.css; this is only the content.
   --------------------------------------------------------------------------- */

.demo-explainer-panel {
  max-height: min(88vh, 760px);
  max-width: 560px;
  overflow-y: auto;
  text-align: left;
  width: min(560px, 100%);
}

.demo-explainer-title {
  margin: 0 0 8px;
}

.demo-explainer-intro {
  color: var(--muted, #71717a);
  line-height: 1.55;
  margin: 0 0 14px;
}

.demo-explainer-block {
  border-left: 3px solid var(--line, #d4d4d8);
  margin-bottom: 12px;
  padding: 2px 0 2px 12px;
}

/* The trial side is the recommendation, and the green matches the ring the
   recommended plan card already carries. */
.demo-explainer-block-trial {
  border-left-color: var(--theruka-green, #2f7d55);
}

.demo-explainer-block strong {
  display: block;
  margin-bottom: 4px;
}

.demo-explainer-block p {
  color: var(--muted, #71717a);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

/* "Nothing is deleted" is the sentence that decides whether somebody is willing
   to put real work in, so it does not get filed under fine print. */
.demo-explainer-afterwards {
  background: #f0f7f2;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 10px;
  padding: 10px 12px;
}

.demo-explainer-note {
  color: var(--muted, #71717a);
  font-size: 0.78rem;
  margin: 0 0 4px;
}

.demo-explainer-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.demo-explainer-trial-button {
  align-items: center;
  background: linear-gradient(135deg, #14532d 0%, #1b6b3a 100%);
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-weight: 600;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  text-decoration: none;
}

.demo-explainer-trial-button:hover,
.demo-explainer-trial-button:focus-visible {
  box-shadow: 0 8px 20px rgba(20, 83, 45, 0.28);
}