/* Formelle — Create Account (Auth 02) — extends auth.css.
   Shares .auth-screen / .auth-header / .auth-card / .auth-field /
   .auth-submit / .auth-eyebrow with the Sign In screen so the two feel
   like the same product; everything in this file is unique to this
   screen's two-column layout (plan summary + signup form). */

/* Reference shows the hero photo MUCH fainter here than on Sign In (it's
   basically a watermark behind flat cream panels, not the hero focus) —
   a heavier wash on the same background layer, not a different photo. */
.auth-screen.auth-screen--muted::before {
  background-image:
    /* FIX (client-reported, 2026-09-27): this page's two-column content
       is taller than the fixed 100vh auth.css caps the photo layer to
       (any short-ish browser window, or the stacked mobile/tablet
       layout, easily exceeds one viewport here) — past that cap the
       photo just stopped with a hard, messy edge, because overriding
       background-image here for the extra wash also dropped auth.css's
       base rule's own fade-to-page-background layer along with it.
       Re-adding that same fade (painted on top, first in the list, same
       as the base rule) so any overflow past the cap blends into the
       plain background instead of cutting off — no other layer, crop,
       or position touched. */
    linear-gradient(to bottom, rgba(245, 243, 241, 0) 80%, var(--color-page-bg) 100%),
    linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)),
    url('/assets/hero-background.jpg');
}

/* FIX (client-reported, 2026-09-25): was `68% 22%`, an off-center crop
   originally tuned to match this screen's Figma reference. On the actual
   built page the client is now viewing it on, that horizontal 68% anchor
   crops the photo so the two-model shot sits shifted toward the right
   half of the frame, with visibly more plain/faded space on the left —
   reported directly as "background image should be in center of the
   screen". Centered horizontally (kept the existing 22% vertical anchor,
   which frames the models' heads/torsos correctly and isn't part of the
   complaint) so the photo now sits centered same as Sign In's default. */
.auth-screen--signup::before {
  background-position: center 22%;
}

/* Two columns: left = plan context copy, right = the signup card itself.
   They start at the same top offset (not vertically centered on each
   other — the reference lines up "← Plans" with the card's top edge). */
.auth-hero--split {
  align-items: flex-start;
  justify-content: center;
  gap: 64px;
  padding-top: 36px;
  padding-bottom: 40px;
}

.signup-intro {
  flex: 1 1 420px;
  max-width: 460px;
  padding-top: 6px; /* optical alignment with the card's inner padding */
}

/* Billing/VAT + free-trial line on each of the three plan cards
   (.account-plan-card is the shared component from account.css — its
   own price/period/meta rules are untouched; this just adds one more
   small line, scoped to this page only, so Overview/Change Plan's use
   of the same card elsewhere is unaffected). Same weight/color pairing
   the old single-plan summary used for its trial callout. */
.account-plan-card__trial {
  font-size: 9px;
  font-weight: 700;
  color: var(--color-eyebrow);
  margin: 4px 0 0;
}

.back-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  margin-bottom: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.7);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}

.signup-heading {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 14px;
}

.signup-copy {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-link-muted);
  margin: 0 0 32px;
  max-width: 380px;
}

.plan-summary-card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  box-shadow: 0 12px 32px -16px rgba(32, 32, 32, 0.1);
  padding: 26px 28px 22px;
  max-width: 380px;
}

.plan-summary-card .auth-eyebrow {
  margin: 0 0 14px;
}

.plan-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 6px;
}

.plan-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 14px;
}

.plan-price {
  font-size: 40px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1;
}

.plan-period {
  font-size: 13px;
  color: var(--color-link-muted);
}

.plan-meta {
  font-size: 13px;
  color: var(--color-link-muted);
  margin: 0 0 10px;
}

.plan-trial {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-eyebrow);
  margin: 0 0 16px;
}

.plan-note {
  font-size: 12px;
  color: var(--color-link-muted);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Wraps .signup-card together with the page-caption line below it, so
   that line sits UNDER the card (outside its box/border) while staying
   inside .auth-hero--split as a single flex item — the caption no longer
   lives inside the card's own padding, and no longer sits outside
   <section> either (client feedback, 2026-09-27, matched against the
   Figma reference: the caption is centered under the card, not inside
   its border, and not on the plain background below the whole section).
   No fixed width here on purpose — .signup-card's own 535px (below) sets
   this column's size, exactly as it did when .signup-card was itself the
   direct flex item. */
.signup-card-col {
  display: flex;
  flex-direction: column;
}

/* The signup card reuses .auth-card's glass treatment, just a touch
   narrower content column than Sign In's since it carries an extra
   field + checkbox + footer row. */
.signup-card {
  width: 535px;
  height: auto;
  padding: 40px 44px 32px;
}

.signup-card-title {
  font-size: 24px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 6px;
}

.signup-card-subtitle {
  font-size: 13px;
  color: var(--color-link-muted);
  margin: 0 0 28px;
}

.auth-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 24px;
  cursor: pointer;
}

.auth-checkbox-row input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  flex-shrink: 0;
  box-sizing: border-box;
  border-radius: 6px;
  border: 1.5px solid #c9c5d1;
  background-color: #ffffff;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

/* Checked state: #9E94AB fill (var(--color-eyebrow)) + a white checkmark, matching
   the same hand-drawn tick shape already used on the payment-confirmed screen
   (`<polyline points="4 12 9 17 20 6"/>` in views/checkout/payment-confirmed.ejs)
   so this reuses an established icon rather than drawing a new one. Native
   checkboxes can't hold a child <svg>, so it's embedded as a background-image. */
.auth-checkbox-row input[type="checkbox"]:checked {
  background-color: var(--color-eyebrow); /* #9E94AB */
  border-color: var(--color-eyebrow);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='4 12 9 17 20 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 10px;
}

.auth-checkbox-label {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-link-muted);
}

/* Re-added (client instruction, 2026-09-24 — supersedes the earlier
   "remove the links" request): Terms of Service / Privacy Policy inside
   this label are real links again, opening in a new tab. Same rule that
   existed before it was removed. */
.auth-checkbox-label a {
  color: var(--color-text);
  text-decoration: underline;
}

.signup-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  font-size: 13px;
}

.signup-footer-row span {
  color: var(--color-link-muted);
}

.signup-footer-row a {
  font-weight: 600;
  color: var(--color-text);
}

.page-caption {
  text-align: center;
  font-size: 12px;
  color: var(--color-link-muted);
  /* Top gap added now that this sits directly under .signup-card inside
     .signup-card-col (previously this was a full-width line below the
     whole section, so it never needed its own top spacing). */
  margin: 20px 0 28px;
}

/* Stacked layout: same breakpoint logic as Sign In — plan card, then
   signup card, centered as a single column once they'd otherwise collide. */
@media (max-width: 1140px) {
  .auth-hero--split {
    flex-direction: column;
    align-items: center;
    padding: 32px 20px 28px;
    gap: 28px;
  }
  .signup-intro {
    max-width: 480px;
    width: 100%;
    text-align: left;
  }
  .signup-card {
    width: 100%;
    max-width: 480px;
  }
}

@media (max-width: 480px) {
  .auth-header {
    padding: 0 16px;
  }
  .auth-header__label {
    font-size: 10px;
    letter-spacing: 0.08em;
  }
  .signup-heading {
    font-size: 26px;
  }
  .signup-card {
    padding: 28px 20px 24px;
  }
  .plan-summary-card {
    padding: 22px 20px 18px;
  }
  .plan-price {
    font-size: 32px;
  }
  .auth-field input {
    font-size: 16px; /* stop iOS auto-zoom, same fix as Sign In */
  }
}

@media (max-width: 360px) {
  .signup-footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
}