/* ReadMyLove landing — the one stylesheet for the public landing (/ and /id/).
   ---------------------------------------------------------------------------
   Loaded after styles.css and depends only on the :root tokens defined there
   (colours, --font-*, --space-*, --r-*, --shadow-*). Every layout class on the
   landing is namespaced .landing-*; the auth card reuses the shared form
   components from styles.css (.auth-tabs, .auth-field, .btn-auth-submit,
   .btn-oauth, .auth-or, .auth-forgot-link, .auth-captcha) because the password
   reset view uses the same components.

   Selectors are prefixed with #view-auth so the landing wins over the app's
   generic element rules (.view p, .view h2 …) without !important and without
   a second layer of overrides. Legacy landing blocks were removed from
   styles.css when this file became the source of truth.

   Breakpoints: desktop · ≤900px (tablet, hero stacks) · ≤640px (phone) ·
   ≤380px (small phone, compact header + form padding). */

#view-auth {
  --landing-max: 1120px;      /* layout column: hero, grids, offer, footer */
  --landing-read: 760px;      /* reading width: the demo, and FAQ answers */
  --landing-gutter: clamp(16px, 4vw, 40px);
  --landing-line: rgba(91, 42, 134, .14);
  --landing-line-strong: rgba(91, 42, 134, .22);
  --landing-muted: var(--txt-2);
  color: var(--txt-1);
  background: var(--bg);
  font-family: var(--font-ui);
}

/* ── Header: one system, progressively simplified at smaller widths ────── */
#view-auth .landing-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  background: var(--header-bg);
  /* A thin gold rule and no shadow: the header sits on the page like good
     stationery rather than floating above it like an app panel. */
  border-bottom: 1px solid var(--header-line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

#view-auth .landing-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: var(--space-6);
  width: min(100%, calc(var(--landing-max) + 2 * var(--landing-gutter)));
  min-height: 72px;
  margin-inline: auto;
  padding-inline: var(--landing-gutter);
}

#view-auth .landing-header__brand {
  color: inherit;   /* tanpa ini ia mewarisi biru tautan bawaan browser */
  display: inline-flex;
  align-items: center;
  flex: 0 1 auto;
  min-width: 0;
  text-decoration: none;
}

#view-auth .landing-header__brand img {
  display: block;
  width: auto;
  height: 36px;
}

#view-auth .landing-header__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  margin-left: auto;
}

#view-auth .landing-header__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 2px;
  color: var(--txt-1);
  font-family: var(--font-disp);   /* the hero headline's face, so header and hero read as one */
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t1) var(--ease);
}

#view-auth .landing-header__nav a::after {
  content: "";
  position: absolute;
  bottom: 7px;
  left: 50%;
  width: 16px;
  margin-left: -8px;
  height: 2px;
  background: rgb(var(--gold-line-rgb));   /* a short gold mark; purple stays for action */
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--t1) var(--ease);
}

#view-auth .landing-header__nav a:hover,
#view-auth .landing-header__nav a:focus-visible {
  color: var(--accent);
}

#view-auth .landing-header__nav a:hover::after,
#view-auth .landing-header__nav a:focus-visible::after { transform: scaleX(1); }

#view-auth .landing-header__actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--space-2);
  margin-left: var(--space-2);
  padding-left: var(--space-4);
  border-left: 1px solid var(--header-line);
}


/* ── Page rhythm ─────────────────────────────────────────────────────────── */
#view-auth .landing {
  width: min(100%, calc(var(--landing-max) + 2 * var(--landing-gutter)));
  margin-inline: auto;
  padding: 0 var(--landing-gutter) var(--space-7);
}

#view-auth .landing-section {
  padding-block: clamp(40px, 4.5vw, 56px);
  scroll-margin-top: 80px;   /* anchor targets land below the sticky header */
}

#view-auth .landing-eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
}

#view-auth .landing-section__title {
  max-width: 640px;
  margin: 0 0 var(--space-4);
  font-family: var(--font-disp);
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -.02em;
}

#view-auth .landing-section__lead {
  max-width: 620px;
  margin: 0;
  color: var(--landing-muted);
  font-size: 16px;
  line-height: 1.7;
}

/* ── Buttons: one primary colour, one shape ──────────────────────────────── */
#view-auth .landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--control-radius);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease), border-color var(--t1) var(--ease);
}

#view-auth .landing-btn--primary {
  color: var(--surface);
  background: var(--accent);
  box-shadow: none;
}

#view-auth .landing-btn--primary:hover,
#view-auth .landing-btn--primary:focus-visible { background: var(--accent-h); }

#view-auth .landing-btn--ghost {
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border-hi);
}

#view-auth .landing-btn--ghost:hover,
#view-auth .landing-btn--ghost:focus-visible { color: var(--accent-h); background: var(--bg-2); border-color: var(--accent); }

#view-auth .landing-btn--light { color: var(--accent-h); background: var(--surface); }

#view-auth .landing-btn--light:hover,
#view-auth .landing-btn--light:focus-visible { background: var(--bg-2); }

#view-auth .landing-btn--compact {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 14px;
  box-shadow: none;
}

#view-auth :where(a, button, summary):focus-visible {
  outline: 3px solid rgba(91, 42, 134, .24);
  outline-offset: 3px;
}

#view-auth input:focus-visible { outline: 0; }

/* ── Hero: message and action left, permanent auth form right ──────────── */
#view-auth .landing-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
  align-items: start;
  column-gap: clamp(40px, 7vw, 88px);
  min-height: min(720px, calc(100dvh - 72px));
  padding-block: var(--space-8);
}

#view-auth .landing-hero__title {
  max-width: 720px;
  margin: 0 0 var(--space-5);
  font-family: var(--font-disp);
  font-size: clamp(40px, 4.6vw, 62px);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.035em;
}

#view-auth .landing-hero__title span { display: block; color: var(--accent); }

#view-auth .landing-hero__lead {
  max-width: 560px;
  margin: 0 0 var(--space-6);
  color: var(--landing-muted);
  font-size: 17px;
  line-height: 1.7;
}

#view-auth .landing-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

#view-auth .landing-hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-5) 0 0;
  padding: 0;
  color: var(--landing-muted);
  font-size: 13px;
  line-height: 1.5;
  list-style: none;
}

#view-auth .landing-hero__proof li::before {
  content: "✓";
  margin-right: 6px;
  color: var(--accent);
  font-weight: 700;
}

#view-auth .landing-hero__proof b { color: var(--txt-1); }

/* The original credibility artwork already contains Diany, her 25+ years,
   certification badge, and the product context. Keep the whole composition
   visible directly after the hero copy instead of rebuilding it from pieces. */
#view-auth .landing-hero__visual {
  width: 100%;
  margin: var(--space-7) 0 0;
  overflow: hidden;
  background: #f7f0f8;
  border: 1px solid var(--landing-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}

#view-auth .landing-hero__visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Demo: copy and consultation share the full page grid ───────────────── */
#view-auth .landing-demo {
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(40px, 6vw, 72px);
}

#view-auth .landing-demo__head {
  width: 100%;
  margin: var(--space-4) 0 0;
  text-align: left;
}

#view-auth .landing-demo__head .landing-section__title,
#view-auth .landing-demo__head .landing-section__lead { margin-inline: 0; }
#view-auth .landing-demo__head .landing-section__lead { margin-top: var(--space-3); }

#view-auth .landing-demo__points {
  display: grid;
  gap: 10px;
  margin: var(--space-5) 0 0;
  padding: var(--space-4) 0 0;
  border-top: 1px solid var(--landing-line);
  color: var(--txt-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  list-style: none;
}

#view-auth .landing-demo__points li {
  position: relative;
  padding-left: 20px;
}

#view-auth .landing-demo__points li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #2E7D5A;
}

#view-auth .consult-preview {
  width: 100%;
  margin-inline: 0;
  overflow: hidden;
  color: var(--txt-1);
  background: var(--surface);
  border: 1px solid var(--landing-line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}

#view-auth .consult-preview__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 56px;
  padding: 0 var(--space-5);
  color: var(--surface);
  background: var(--accent-h);
}

#view-auth .consult-preview__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-disp);
  font-size: 15px;
  font-weight: 700;
}

#view-auth .consult-preview__brand i { color: var(--landing-gold); font-style: normal; font-size: 12px; }

#view-auth .consult-preview__secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, .78);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

#view-auth .consult-preview__secure i {
  width: 7px;
  height: 7px;
  background: #9EE0B9;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(158, 224, 185, .14);
}

#view-auth .consult-preview__body { padding: var(--space-5); }

#view-auth .consult-preview__context {
  display: flex;
  align-items: center;
  gap: 11px;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
}

#view-auth .consult-preview__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  color: var(--surface);
  background: var(--accent);
  border-radius: 50%;
  font-family: var(--font-disp);
  font-weight: 700;
}

#view-auth .consult-preview__context > div { display: flex; flex-direction: column; min-width: 0; }
#view-auth .consult-preview__context strong { font-size: 13px; line-height: 1.25; }
#view-auth .consult-preview__context small { margin-top: 2px; color: var(--txt-2); font-size: 12px; line-height: 1.3; }

#view-auth .consult-preview__online {
  margin-left: auto;
  padding: 5px 8px;
  color: #2E6B4B;
  background: #EAF7F0;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* The conversation is sized by its content: the stage stacks the "thinking"
   card and the answer in one grid cell, so the tallest state (the answer)
   sets the height and nothing reserves empty space. */
#view-auth .consult-preview__conversation {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-top: var(--space-5);
}

#view-auth .consult-preview p {
  max-width: none;
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
}

#view-auth .consult-preview__bubble {
  align-self: flex-end;
  max-width: 82%;
  padding: 11px 14px;
  color: var(--surface);
  background: var(--accent);
  border-radius: 15px 15px 4px 15px;
  opacity: 1;
  transform: none;
}

#view-auth .consult-preview__bubble > span {
  display: block;
  margin-bottom: 3px;
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#view-auth .consult-preview__stage { display: grid; }
#view-auth .consult-preview__stage > * { grid-area: 1 / 1; align-self: stretch; }

/* The stage is as tall as the answer card. The thinking card fills the same
   box: a header row (spark, label, dots) and three quiet skeleton rows below
   that stand in for the insight being written, so nothing reads as empty. */
#view-auth .consult-preview__thinking {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px 10px;
  padding: 12px 14px;
  overflow: hidden;
  color: var(--txt-2);
  background: var(--bg-2);
  border: 1px solid var(--landing-line);
  border-radius: 14px 14px 14px 4px;
  opacity: 0;
  transform: translateY(7px);
  animation: consultThinking 10s var(--ease) infinite;
}

#view-auth .consult-preview__thinking::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 38%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-150%);
  animation: consultScan 1.8s ease-in-out infinite;
}

#view-auth .consult-preview__spark {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--accent-gold);
  background: #FFF9E9;
  border-radius: 50%;
  font-size: 12px;
}

#view-auth .consult-preview__thinking > div { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#view-auth .consult-preview__thinking strong { color: var(--txt-1); font-size: 12px; line-height: 1.35; }
#view-auth .consult-preview__thinking small { margin-top: 2px; color: var(--txt-2); font-size: 12px; line-height: 1.35; }
#view-auth .consult-preview__dots { position: relative; z-index: 1; display: flex; flex: none; gap: 3px; }
#view-auth .consult-preview__dots i {
  width: 4px;
  height: 4px;
  background: var(--accent);
  border-radius: 50%;
  animation: consultDot 1.1s ease-in-out infinite;
}
#view-auth .consult-preview__dots i:nth-child(2) { animation-delay: .14s; }
#view-auth .consult-preview__dots i:nth-child(3) { animation-delay: .28s; }

#view-auth .consult-preview__skeleton {
  grid-column: 1 / -1;
  display: grid;
  align-self: stretch;
  align-content: space-evenly;
  gap: 10px;
  min-height: 0;
}

#view-auth .consult-preview__skeleton i {
  display: block;
  height: 10px;
  background: var(--accent-dim);
  border-radius: 6px;
}

#view-auth .consult-preview__skeleton i:nth-child(1) { width: 92%; }
#view-auth .consult-preview__skeleton i:nth-child(2) { width: 74%; }
#view-auth .consult-preview__skeleton i:nth-child(3) { width: 56%; }

#view-auth .consult-preview__answer {
  padding: var(--space-4);
  background: var(--bg-2);
  border: 1px solid var(--landing-line);
  border-radius: 15px 15px 15px 4px;
  opacity: 0;
  transform: translateY(12px);
  animation: consultAnswer 10s var(--ease) infinite;
}

#view-auth .consult-preview__answer-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#view-auth .consult-preview__answer-head > span {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  color: var(--surface);
  background: var(--accent);
  border-radius: 9px;
  font-size: 10px;
}

#view-auth .consult-preview__answer-head > div { display: flex; flex-direction: column; }
#view-auth .consult-preview__answer-head strong { font-size: 13px; line-height: 1.25; }
#view-auth .consult-preview__answer-head small { margin-top: 2px; color: var(--txt-2); font-size: 12px; }
#view-auth .consult-preview__answer > p { color: var(--txt-2); }

#view-auth .consult-preview__next {
  margin-top: var(--space-3);
  padding: 10px 12px;
  background: rgba(255, 255, 255, .8);
  border-left: 3px solid var(--accent-gold);
  border-radius: 0 9px 9px 0;
  opacity: 0;
  transform: translateX(-5px);
  animation: consultNext 10s var(--ease) infinite;
}

#view-auth .consult-preview__next > span {
  display: block;
  margin-bottom: 2px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#view-auth .consult-preview__next p { color: var(--txt-1); font-size: 13px; font-weight: 600; }

#view-auth .consult-preview__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px var(--space-3);
  min-height: 44px;
  padding: 10px var(--space-5);
  color: var(--txt-2);
  background: var(--bg);
  border-top: 1px solid rgba(91, 42, 134, .24);   /* firmer than --landing-line: this edge sits on white */
  font-size: 12px;
  font-weight: 600;
}

#view-auth .consult-preview__footer span { display: inline-flex; align-items: center; gap: 5px; }
#view-auth .consult-preview__footer i { color: #2E7D5A; font-style: normal; }

@keyframes consultThinking {
  0%, 36% { opacity: 1; transform: translateY(0); }
  46%, 100% { opacity: 0; transform: translateY(7px); }
}
@keyframes consultAnswer {
  0%, 36% { opacity: 0; transform: translateY(10px); }
  46%, 100% { opacity: 1; transform: translateY(0); }
}
@keyframes consultNext {
  0%, 48% { opacity: 0; transform: translateX(-5px); }
  58%, 100% { opacity: 1; transform: translateX(0); }
}
@keyframes consultScan {
  0% { transform: translateX(-150%); }
  65%, 100% { transform: translateX(360%); }
}
@keyframes consultDot {
  0%, 60%, 100% { opacity: .25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-2px); }
}

/* ── Benefits: compact outcome cards ───────────────────────────────────── */
#view-auth .landing-benefits__grid,
#view-auth .landing-steps__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

#view-auth .landing-benefits__grid { gap: var(--space-4); }

#view-auth .landing-benefit {
  min-height: 100%;
  padding: var(--space-5);
  background: var(--bg-2);
  border: 1px solid var(--landing-line);
  border-radius: var(--r-lg);
}

#view-auth .landing-benefit__num,
#view-auth .landing-step__num {
  display: grid;
  place-items: center;
  color: var(--accent-gold);
  font-family: var(--font-disp);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

#view-auth .landing-benefit__num {
  justify-items: start;
  width: 28px;
  margin-bottom: var(--space-4);
  padding-bottom: 8px;
  color: var(--accent-gold);
  border-bottom: 2px solid var(--accent-gold);
}

#view-auth .landing-benefit h3,
#view-auth .landing-step h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-disp);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
}

#view-auth .landing-benefit p,
#view-auth .landing-step p {
  margin: 0;
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.65;
}

/* ── Steps: a connected process, not a second set of cards ─────────────── */
#view-auth .landing-steps__list { gap: 0; }

#view-auth .landing-step {
  position: relative;
  padding: 0 var(--space-6);
}

#view-auth .landing-step:first-child { padding-left: 0; }
#view-auth .landing-step:last-child { padding-right: 0; }

#view-auth .landing-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 19px;
  right: -16px;
  left: 48px;
  height: 1px;
  background: var(--landing-line-strong);
}

#view-auth .landing-step__num {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  color: var(--accent);
  background: var(--bg);
  border: 1px solid var(--landing-line-strong);
  border-radius: 50%;
}

/* ── Offer: the one large surface on the page ────────────────────────────── */
#view-auth .landing-offer__card {
  position: relative;
  overflow: hidden;
  /* The pitch reads down the left with the CTA beside its headline, and the
     three facts run across the bottom. Stacked in one column the card left its
     whole right half empty at desktop width. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow ."
    "title   cta"
    "lead    cta"
    "facts   facts";
  column-gap: clamp(24px, 4vw, 56px);
  align-items: start;
  padding: clamp(28px, 5vw, 56px);
  color: var(--surface);
  background: var(--accent-h);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}

#view-auth .landing-offer__card .landing-eyebrow { color: var(--landing-gold); }
#view-auth .landing-offer__card .landing-section__title { color: var(--surface); }
#view-auth .landing-offer__card .landing-section__lead { color: rgba(255, 255, 255, .82); }

#view-auth .landing-offer__card > .landing-eyebrow { grid-area: eyebrow; }
#view-auth .landing-offer__card > .landing-section__title { grid-area: title; }
#view-auth .landing-offer__card > .landing-section__lead { grid-area: lead; }
#view-auth .landing-offer__card > .landing-btn {
  grid-area: cta;
  align-self: center;
  justify-self: end;
  margin: 0;
  white-space: nowrap;
}

#view-auth .landing-offer__facts {
  display: grid;
  grid-area: facts;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}

#view-auth .landing-offer__facts li {
  padding: var(--space-4) 0 0;
  border-top: 1px solid rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  line-height: 1.5;
}

#view-auth .landing-offer__facts strong {
  display: block;
  margin-bottom: 4px;
  color: var(--landing-gold);
  font-family: var(--font-disp);
  font-size: 22px;
  font-weight: 700;
}

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
/* FAQ spans the layout column like the sections above it: one question per
   full-width row, while each answer wraps at the reading width. */
#view-auth .landing-faq__list {
  margin-top: var(--space-5);
  border-top: 1px solid var(--landing-line);
}

#view-auth .landing-faq__item { border-bottom: 1px solid var(--landing-line); }

#view-auth .landing-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: 64px;
  padding: var(--space-4) 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
  margin-inline: -12px;
  padding-inline: 12px;
  border-radius: var(--r-sm);
  transition: color var(--t1), background var(--t1);
}

/* Sampai di sini baris FAQ adalah satu-satunya kontrol yang tidak berubah
   sama sekali saat disentuh kursor. Wash-nya melebar 12px lewat margin
   negatif, jadi kotak kontennya tidak bergeser sedikit pun. */
#view-auth .landing-faq__item summary:hover,
#view-auth .landing-faq__item summary:focus-visible { color: var(--accent); background: var(--accent-dim); }

#view-auth .landing-faq__item summary::-webkit-details-marker { display: none; }

#view-auth .landing-faq__item summary::after {
  content: "+";
  flex: none;
  color: var(--accent);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--t2) var(--ease);
}

#view-auth .landing-faq__item[open] summary::after { transform: rotate(45deg); }

#view-auth .landing-faq__item p {
  max-width: var(--landing-read);
  margin: 0;
  padding: 0 0 var(--space-5);
  color: var(--landing-muted);
  font-size: 15px;
  line-height: 1.7;
}

#view-auth .landing-faq__item a { color: var(--accent); }

#view-auth .landing-faq__more {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: var(--space-3);
  color: var(--accent);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

#view-auth .landing-faq__more:hover { text-decoration: underline; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
#view-auth .landing-footer {
  width: 100%;
  padding-block: var(--space-7);
  border-top: 1px solid var(--landing-line);
  font-size: 13px;
}

#view-auth .landing-footer__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  gap: var(--space-5) var(--space-7);
  width: min(100%, calc(var(--landing-max) + 2 * var(--landing-gutter)));
  margin-inline: auto;
  padding-inline: var(--landing-gutter);
}

#view-auth .landing-footer__brand img {
  display: block;
  width: auto;
  height: 30px;
}

#view-auth .landing-footer__brand p,
#view-auth .landing-footer__legal {
  max-width: none;
  margin: var(--space-2) 0 0;
  color: var(--txt-2);
  font-size: 12px;
  line-height: 1.5;
}

#view-auth .landing-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-1);
}

#view-auth .landing-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-2);
  color: var(--txt-2);
  text-decoration: none;
}

#view-auth .landing-footer__links a:hover { color: var(--accent); }

#view-auth .landing-footer__legal {
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

/* ── Auth: a permanent primary action in the hero ───────────────────────── */
#view-auth .landing-auth {
  position: relative;
  align-self: start;
  width: 100%;
  scroll-margin-top: 96px;
}

#view-auth #auth-form-anchor { scroll-margin-top: 96px; }

#view-auth .landing-auth__card {
  position: relative;
  width: 100%;
  padding: var(--space-6) var(--space-5) var(--space-5);
  background: var(--surface);
  border: 1px solid var(--landing-line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-soft);
}

#view-auth .landing-auth__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 var(--space-3);
  padding: 6px 10px;
  color: var(--accent);
  background: var(--bg-2);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
}

#view-auth .landing-auth__title {
  margin: 0 0 4px;
  font-family: var(--font-disp);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.02em;
}

#view-auth .landing-auth__sub {
  margin: 0 0 var(--space-3);
  color: var(--landing-muted);
  font-size: 14px;
  line-height: 1.5;
}

/* Names the reading method right where people decide to sign up. */
#view-auth .landing-auth__method {
  display: flex;
  gap: 8px;
  margin: 0 0 var(--space-5);
  padding: 10px 12px;
  color: var(--txt-2);
  background: var(--bg-2);
  border-radius: var(--r-md);
  font-size: 12.5px;
  line-height: 1.5;
}

#view-auth .landing-auth__method > span { color: var(--accent); font-weight: 700; }
#view-auth .landing-auth__method b { color: var(--txt-1); font-weight: 600; }

#view-auth .landing-auth__note {
  margin: var(--space-4) 0 0;
  color: var(--txt-2);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

/* The auth controls are shared with the password-reset view, whose older
   visual language is deliberately left untouched. Inside the landing form
   they use the same type, radius and interaction grammar as the page. */
#view-auth .landing-auth .auth-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 4px;
  margin-bottom: var(--space-5);
  padding: 4px;
  background: var(--bg-2);
  border: 1px solid var(--landing-line);
  border-radius: var(--control-radius);
}

#view-auth .landing-auth .auth-tab {
  /* 44px is the smallest target a thumb hits reliably; these were 40px. */
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  color: var(--txt-2);
  background: transparent;
  border: 0;
  border-radius: calc(var(--control-radius) - 4px);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#view-auth .landing-auth .auth-tab.active {
  color: var(--accent);
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(39, 24, 47, .1);
}
#view-auth .landing-auth .auth-tab:hover:not(.active) { color: var(--txt-1); }

#view-auth .landing-auth .auth-field { gap: 6px; margin-bottom: var(--space-4); }

#view-auth .landing-auth .auth-field label {
  color: var(--txt-1);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

#view-auth .landing-auth .auth-input-icon { color: var(--txt-2); }

#view-auth .landing-auth .auth-input-with-icon input {
  min-height: 48px;
  padding-block: 11px;
  color: var(--txt-1);
  background: var(--surface);
  border-color: var(--border);
  border-radius: var(--control-radius);
}

#view-auth .landing-auth .auth-input-with-icon input::placeholder,
#view-auth .landing-auth .auth-input-with-icon input::-webkit-input-placeholder,
#view-auth .landing-auth .auth-input-with-icon input::-moz-placeholder { color: var(--txt-2); }

#view-auth .landing-auth .auth-input-with-icon input:focus {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

#view-auth .landing-auth .btn-auth-submit,
#view-auth .landing-auth .btn-oauth {
  min-height: 48px;
  border-radius: var(--control-radius);
  font-size: 14px;
}

#view-auth .landing-auth .btn-auth-submit {
  padding: 0 var(--space-4);
  background: var(--accent);
  letter-spacing: 0;
  text-transform: none;
  transition: background-color var(--t1) var(--ease);
}

#view-auth .landing-auth .btn-auth-submit:hover:not(:disabled) { background: var(--accent-h); transform: none; }
#view-auth .landing-auth .auth-forgot-link { color: var(--accent); letter-spacing: 0; }

/* reCAPTCHA is injected at a fixed 304px (164px compact). When the card's
   content box is narrower than that, zoom the widget down: zoom scales the
   layout box too, so the form height follows and nothing touches the padding. */
#view-auth .landing-auth #auth-captcha-wrap { container-type: inline-size; }
#view-auth .landing-auth .auth-captcha { max-width: 100%; overflow: hidden; }
@container (max-width: 303px) {
  #view-auth .landing-auth .auth-captcha > div { zoom: .93; }
}

/* ── Desktop: one page scroller, with a sticky signup column ──────────── */
@media (min-width: 901px) {
  #view-auth .landing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(400px, 36vw, 464px);
    gap: clamp(32px, 3vw, 48px);
  }

  #view-auth .landing-scroll {
    min-width: 0;
    padding-right: clamp(8px, 1.5vw, 20px);
  }

  #view-auth .landing-hero {
    display: block;
    min-height: 0;
    padding-block: var(--space-7);
  }

  #view-auth .landing-hero__copy { max-width: 640px; }
  #view-auth .landing-hero__title { font-size: clamp(40px, 4vw, 54px); }

  #view-auth .landing-section { padding-block: clamp(32px, 3.75vw, 48px); }
  #view-auth .landing-section__title { font-size: clamp(30px, 3.3vw, 40px); }

  #view-auth .landing-demo { display: block; }
  #view-auth .landing-demo__head,
  #view-auth .consult-preview { width: 100%; margin-inline: 0; }
  #view-auth .landing-demo__head { margin-bottom: var(--space-6); }

  #view-auth .landing-benefits__grid,
  #view-auth .landing-steps__list { grid-template-columns: 1fr; }

  #view-auth .landing-benefit { padding: var(--space-5); }

  #view-auth .landing-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--space-4);
    padding: 0 0 var(--space-5);
  }

  #view-auth .landing-step:last-child { padding-bottom: 0; }
  #view-auth .landing-step__num { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  #view-auth .landing-step h3,
  #view-auth .landing-step p { grid-column: 2; }
  #view-auth .landing-step:not(:last-child)::after {
    top: 48px;
    right: auto;
    bottom: 8px;
    left: 19px;
    width: 1px;
    height: auto;
  }

  #view-auth .landing-offer__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "lead" "cta" "facts";
  }
  #view-auth .landing-offer__card > .landing-btn { justify-self: start; margin-top: var(--space-5); }
  #view-auth .landing-offer__facts { grid-template-columns: 1fr; gap: var(--space-4); }

  #view-auth .landing-auth {
    position: sticky;
    top: var(--landing-auth-top, 85px);
    margin-top: 12px;
  }

  #view-auth .landing-auth__card {
    padding: var(--space-5);
  }

  #view-auth .landing-auth__eyebrow { margin-bottom: var(--space-2); }
  #view-auth .landing-auth__method { margin-bottom: var(--space-4); }
  #view-auth .landing-auth .auth-tabs { margin-bottom: var(--space-4); }
  #view-auth .landing-auth .auth-field { margin-bottom: 12px; }
  #view-auth .landing-auth .auth-or { margin-block: 10px; }
  #view-auth .landing-auth .auth-forgot-link { min-height: 36px; margin-top: 4px; }
  #view-auth .landing-auth__note { margin-top: var(--space-2); }
}

@media (min-width: 901px) and (max-height: 820px) {
  #view-auth .landing-auth__card { padding: 16px 20px; }
  #view-auth .landing-auth__eyebrow,
  #view-auth .landing-auth__note { display: none; }
  #view-auth .landing-auth__sub { margin-bottom: 8px; }
  #view-auth .landing-auth__method { padding: 8px 10px; }
  #view-auth .landing-auth__method,
  #view-auth .landing-auth .auth-tabs { margin-bottom: 12px; }
  #view-auth .landing-auth .auth-field { margin-bottom: 8px; }
  #view-auth .landing-auth .auth-input-with-icon input,
  #view-auth .landing-auth .btn-auth-submit,
  #view-auth .landing-auth .btn-oauth { min-height: 44px; }
  #view-auth .landing-auth .auth-forgot-link { min-height: 32px; }
}

/* ── Tablet ≤900px: return to one natural document flow ────────────────── */
@media (max-width: 900px) {
  #view-auth .landing {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: visible;
  }

  #view-auth .landing-scroll { display: contents; }
  #view-auth .landing-scroll > * { order: 4; }
  #view-auth .landing-scroll > .landing-hero { order: 1; }
  #view-auth .landing > .landing-auth { order: 2; margin-bottom: var(--space-6); }

  #view-auth .landing-hero {
    grid-template-columns: 1fr;
    row-gap: var(--space-7);
    min-height: 0;
    padding-block: var(--space-7);
  }

  #view-auth .landing-auth { align-self: center; justify-self: center; width: min(100%, 560px); }

  #view-auth .landing-demo { display: block; }
  #view-auth .landing-demo__head,
  #view-auth .consult-preview {
    width: 100%;
    margin-inline: 0;
  }
  #view-auth .landing-demo__head { margin-bottom: var(--space-7); }

  #view-auth .landing-section__title { max-width: none; }

  #view-auth .landing-footer__inner { grid-template-columns: 1fr auto; align-items: center; }
  #view-auth .landing-footer__brand { grid-column: 1; grid-row: 1; }
  #view-auth .landing-footer__legal { grid-column: 2; grid-row: 1; }
  #view-auth .landing-footer__links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
}

/* ── Narrow tablet ≤800px: cards stack and steps become a timeline ──────── */
@media (max-width: 800px) {
  #view-auth .landing-benefits__grid,
  #view-auth .landing-steps__list { grid-template-columns: 1fr; }

  #view-auth .landing-benefits__grid { gap: var(--space-4); }

  #view-auth .landing-step {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: var(--space-4);
    padding: 0 0 var(--space-5);
  }

  #view-auth .landing-step:last-child { padding-bottom: 0; }
  #view-auth .landing-step__num { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  #view-auth .landing-step h3,
  #view-auth .landing-step p { grid-column: 2; }

  #view-auth .landing-step:not(:last-child)::after {
    top: 48px;
    right: auto;
    bottom: 8px;
    left: 19px;
    width: 1px;
    height: auto;
  }
}

@media (max-width: 720px) {
  /* Below this the headline and the CTA start fighting for the same line. */
  #view-auth .landing-offer__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "eyebrow" "title" "lead" "cta" "facts";
  }
  #view-auth .landing-offer__card > .landing-btn { justify-self: start; margin-top: var(--space-5); }
  /* Dua tautan section ini muat sampai sekitar 720px; di bawahnya mereka
     mulai berebut ruang dengan CTA, dan keduanya tetap terjangkau lewat
     tombol "See how it works" di hero. */
  #view-auth .landing-header__nav { display: none; }
  #view-auth .landing-header__actions { margin-left: auto; padding-left: 0; border-left: 0; }

  #view-auth .landing-offer__facts { grid-template-columns: 1fr; gap: var(--space-5); }
}

/* With auth living in the page instead of the navbar, the compact header can
   stay on one line even on narrow phones. */
@media (max-width: 520px) {
  #view-auth .landing-header__inner {
    flex-wrap: nowrap;
    padding-block: 8px;
  }

  #view-auth .landing-header__brand {
    flex-basis: auto;
    justify-content: flex-start;
  }

  #view-auth .landing-header__actions {
    display: flex;
    width: auto;
    margin-left: auto;
  }

  #view-auth .landing-section,
  #view-auth .landing-auth { scroll-margin-top: 120px; }
}

/* ── Phone ≤640px ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  #view-auth .landing-header__inner { min-height: 62px; gap: var(--space-3); }
  #view-auth .landing-header__brand img { height: 32px; }
  #view-auth .landing-header .landing-btn--compact { min-height: 44px; padding: 0 14px; font-size: 13px; }

  #view-auth .landing { padding-bottom: var(--space-6); }
  #view-auth .landing-section { padding-block: var(--space-5); }

  #view-auth .landing-hero {
    row-gap: var(--space-5);
    padding-block: var(--space-5);
  }

  #view-auth .landing-hero__title { margin-bottom: var(--space-4); font-size: clamp(32px, 9vw, 38px); }
  #view-auth .landing-hero__lead { margin-bottom: var(--space-5); font-size: 16px; }
  #view-auth .landing-hero__actions { flex-direction: column; align-items: stretch; gap: var(--space-2); }
  #view-auth .landing-hero__proof { flex-direction: column; gap: 6px; margin-top: var(--space-4); }
  #view-auth .landing-hero__visual { margin-top: var(--space-5); border-radius: var(--r-lg); }
  #view-auth .landing-auth { width: 100%; }

  #view-auth .landing-benefit {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--space-3);
    padding: var(--space-4);
  }

  #view-auth .landing-benefit__num {
    grid-column: 1;
    grid-row: 1 / span 2;
    margin: 0;
  }

  #view-auth .landing-benefit h3,
  #view-auth .landing-benefit p { grid-column: 2; }

  #view-auth .landing-demo__head { margin-bottom: var(--space-5); text-align: left; }
  #view-auth .consult-preview__body { padding: var(--space-4); }
  #view-auth .consult-preview__topbar { padding-inline: var(--space-4); }
  #view-auth .consult-preview__bubble { max-width: 92%; }
  #view-auth .consult-preview__footer { padding-inline: var(--space-4); }

  #view-auth .landing-offer__card { padding: var(--space-5) var(--space-4); }
  #view-auth .landing-offer__facts { gap: var(--space-3); margin-block: var(--space-5); }
  #view-auth .landing-offer__facts li { padding-top: var(--space-3); }
  #view-auth .landing-offer__card .landing-btn { width: 100%; }

  #view-auth .landing-faq__item summary { min-height: 56px; padding-block: var(--space-3); }

  #view-auth .landing-footer__inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-3);
  }
  #view-auth .landing-footer__links,
  #view-auth .landing-footer__brand,
  #view-auth .landing-footer__legal { grid-column: 1; grid-row: auto; }
  #view-auth .landing-footer__links { justify-content: flex-start; margin-inline: calc(var(--space-2) * -1); }

  #view-auth .landing-auth { padding: 0; }
  #view-auth .landing-auth__card { padding: var(--space-5) var(--space-4) var(--space-4); }
}

/* ── Small phone ≤380px: keep the header on one row and the captcha inside ─ */
@media (max-width: 380px) {
  #view-auth .landing-header__inner { gap: var(--space-2); padding-inline: 12px; }
  #view-auth .landing-header__brand img { height: 30px; }
  #view-auth .landing-header .landing-btn--compact { padding: 0 12px; }
  #view-auth .landing { padding-inline: 12px; }
  #view-auth .landing-hero__title { font-size: 32px; }
  #view-auth .landing-auth { padding: 0; }
  #view-auth .landing-auth__card { padding-inline: 12px; }
}

/* ── Reduced motion: the demo shows its finished state, nothing animates ── */
@media (prefers-reduced-motion: reduce) {
  #view-auth .landing-btn,
  #view-auth .landing-auth,
  #view-auth .landing-auth__card,
  #view-auth .landing-faq__item summary::after { transition: none; }

  #view-auth .consult-preview__bubble,
  #view-auth .consult-preview__answer,
  #view-auth .consult-preview__next {
    opacity: 1;
    transform: none;
    animation: none;
  }

  #view-auth .consult-preview__thinking { display: none; }
  #view-auth .consult-preview__dots i { animation: none; }
}

/* Phones: the benefit numeral and its gold rule stay together at the top of
   the card. Spanning both rows, the numeral centred itself and left its rule
   at the bottom edge, as if they were two separate marks. */
@media (max-width: 640px) {
  #view-auth .landing-benefit__num { align-self: start; margin-top: 3px; }
}
@media (pointer: coarse) {
  #view-auth .landing-footer__links a { min-width: 44px; justify-content: center; }
}