/* ============================================================
   spainspang — brand layer, landing page, and lesson breathing room
   Loaded after the core styles so it can refine presentation without
   disturbing the activity engine or course content model.
   ============================================================ */

/* ---- Brand refinements ------------------------------------------- */
.brand-mark,
.landing-brand-mark {
  background:
    radial-gradient(circle at 28% 18%, rgba(255,255,255,.95) 0 7%, transparent 8%),
    linear-gradient(140deg, #ff6b81 0%, #ff9f43 43%, #7c5cff 100%);
  box-shadow:
    0 10px 28px rgba(111,74,255,.22),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -8px 18px rgba(126,72,255,.08);
}
.brand-mark::after {
  inset: 8px 7px;
  border-radius: 9px;
  background: linear-gradient(180deg,
    transparent 0 28%,
    rgba(255,255,255,.95) 28% 43%,
    transparent 43% 58%,
    rgba(255,255,255,.95) 58% 73%,
    transparent 73%);
}

/* ---- Landing shell ----------------------------------------------- */
body.onboarding {
  overflow-x: hidden;
}

.landing-onb {
  display: block;
  min-height: 100dvh;
  padding: 0;
}

.landing-page {
  position: relative;
  width: min(calc(100% - 2rem), 1180px);
  margin-inline: auto;
  padding: 20px 0 72px;
}

.landing-page::before,
.landing-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  width: min(44vw, 580px);
  aspect-ratio: 1;
  border-radius: 50%;
  filter: blur(18px);
  opacity: .55;
  pointer-events: none;
}
.landing-page::before {
  left: -16vw;
  top: 7vh;
  background: radial-gradient(circle, rgba(255,110,138,.30), rgba(255,173,72,.10) 48%, transparent 72%);
}
.landing-page::after {
  right: -18vw;
  top: 28vh;
  background: radial-gradient(circle, rgba(112,94,255,.25), rgba(80,174,255,.08) 48%, transparent 72%);
}

.landing-nav {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 10px 6px;
}

.landing-nav-end {
  display: inline-flex;
  align-items: center;
  gap: clamp(10px, 2vw, 20px);
}

/* One quiet link. The public navigation is the brand, Pricing, and the way in
   — nothing else earns a place there. */
.landing-navlink {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--t-sm);
  color: var(--ink-700);
  text-decoration: none;
  padding: 6px 4px;
  border-radius: 8px;
  transition: color var(--d-fast, .18s) var(--e-out, ease);
}
.landing-navlink:hover { color: var(--accent-deep); }

.landing-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.035em;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
}

.landing-brand-mark {
  width: 36px;
  height: 36px;
  border-radius: 12px;
}

.landing-course-pill,
.landing-proof span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 13px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(255,255,255,.54);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 8px 24px rgba(35,29,83,.06);
  color: var(--ink-700);
  font-size: var(--t-xs);
  font-weight: 800;
}

/* ---- Hero --------------------------------------------------------- */
.landing-hero {
  min-height: min(760px, calc(100dvh - 82px));
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(420px, .98fr);
  align-items: center;
  gap: clamp(46px, 7vw, 94px);
  padding: clamp(42px, 8vh, 90px) 6px clamp(70px, 10vh, 110px);
}

.landing-copy {
  position: relative;
  z-index: 3;
  max-width: 640px;
}

.landing-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.54);
  border: 1px solid rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  color: #6b4fe8;
  font-family: var(--font-display);
  font-size: var(--t-xs);
  font-weight: 900;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.landing-kicker::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b81, #ffaf45);
  box-shadow: 0 0 0 5px rgba(255,107,129,.10);
}

.landing-copy h1 {
  margin: 0;
  max-width: 10.5ch;
  font-size: clamp(3.35rem, 7.2vw, 6.6rem);
  line-height: .94;
  letter-spacing: -.075em;
  color: #17143c;
  text-wrap: balance;
}

.landing-copy h1 span {
  display: inline;
  background: linear-gradient(110deg, #ff5f78 0%, #ff9e3d 40%, #7a58ff 87%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-lede {
  max-width: 57ch;
  margin: 26px 0 0;
  color: var(--ink-700);
  font-size: clamp(1.08rem, 1.8vw, 1.28rem);
  line-height: 1.65;
}

.landing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.landing-primary {
  min-width: 168px;
  background: linear-gradient(135deg, #ff5f78 0%, #f47b4d 43%, #7558ff 100%);
  box-shadow:
    0 18px 42px rgba(110,75,255,.20),
    0 8px 24px rgba(255,95,120,.15),
    inset 0 1px 0 rgba(255,255,255,.4);
}

.landing-secondary {
  background: rgba(255,255,255,.58);
  border-color: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(18px) saturate(1.45);
  backdrop-filter: blur(18px) saturate(1.45);
}

.landing-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.landing-proof span {
  min-height: 30px;
  padding-inline: 11px;
  background: rgba(255,255,255,.40);
  box-shadow: none;
}

/* ---- Apple-glass lesson preview ---------------------------------- */
.landing-visual-wrap {
  position: relative;
  min-height: 590px;
  display: grid;
  place-items: center;
  perspective: 1100px;
}

.landing-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(1px);
  pointer-events: none;
}
.landing-orb-a {
  width: 310px;
  height: 310px;
  right: 3%;
  top: 2%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.92), rgba(255,110,138,.34) 32%, rgba(255,174,64,.18) 60%, transparent 74%);
}
.landing-orb-b {
  width: 360px;
  height: 360px;
  left: 0;
  bottom: 0;
  background: radial-gradient(circle at 58% 42%, rgba(255,255,255,.86), rgba(114,91,255,.28) 34%, rgba(64,172,255,.13) 62%, transparent 74%);
}

.landing-visual {
  position: relative;
  z-index: 2;
  width: min(100%, 470px);
  padding: 17px;
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.70), rgba(255,255,255,.38));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow:
    0 40px 90px rgba(36,28,96,.16),
    0 12px 36px rgba(255,106,129,.09),
    inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
  backdrop-filter: blur(34px) saturate(1.7);
  transform: rotateY(-4deg) rotateX(1.5deg);
}

.landing-visual::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 33px;
  pointer-events: none;
  background: linear-gradient(158deg, rgba(255,255,255,.5), transparent 35% 72%, rgba(255,255,255,.22));
}

.lv-top {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 0 8px 10px;
  color: var(--ink-600);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
}
.lv-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff647d;
  box-shadow: 0 0 0 5px rgba(255,100,125,.10);
}
.lv-progress {
  color: #7558e8;
}

.lv-card {
  position: relative;
  z-index: 1;
  border-radius: 23px;
  border: 1px solid rgba(255,255,255,.80);
  background: rgba(255,255,255,.66);
  box-shadow: 0 13px 32px rgba(32,28,78,.08), inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

.lv-explain {
  display: grid;
  gap: 4px;
  padding: 24px;
  margin-bottom: 13px;
  background: linear-gradient(135deg, rgba(255,239,242,.80), rgba(255,249,231,.68));
}
.lv-label {
  color: #ce3d58;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.lv-explain strong {
  color: #8d1f39;
  font-family: var(--font-display);
  font-size: 2.15rem;
  line-height: 1.1;
}
.lv-explain > span:last-child {
  color: var(--ink-600);
  font-size: 13px;
}

.lv-question {
  display: grid;
  gap: 12px;
  padding: 20px;
  margin-bottom: 13px;
  color: var(--ink-900);
  font-family: var(--font-display);
  font-weight: 900;
}
.lv-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.lv-options span {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(35,28,85,.10);
  background: rgba(255,255,255,.76);
  color: var(--ink-700);
  font-size: 13px;
}
.lv-options span.is-picked {
  color: #5f45dc;
  border-color: rgba(113,86,255,.28);
  background: rgba(124,92,255,.10);
  box-shadow: inset 0 0 0 1px rgba(124,92,255,.08);
}

.lv-memory {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "label art" "text art";
  align-items: center;
  column-gap: 16px;
  row-gap: 4px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(244,241,255,.78), rgba(236,249,255,.68));
}
.lv-memory .lv-label {
  grid-area: label;
  color: #6b50d7;
}
.lv-memory > span:last-child {
  grid-area: text;
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 800;
}
.lv-mini-art {
  grid-area: art;
  width: 94px;
  height: 70px;
  position: relative;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.32));
  border: 1px solid rgba(255,255,255,.84);
  overflow: hidden;
}
.lv-mini-art i {
  position: absolute;
  display: block;
  border-radius: 50%;
}
.lv-mini-art i:nth-child(1) {
  width: 34px; height: 34px; left: 14px; bottom: 11px;
  background: linear-gradient(135deg, #ff7b8e, #ffac51);
}
.lv-mini-art i:nth-child(2) {
  width: 30px; height: 30px; right: 13px; top: 10px;
  background: linear-gradient(135deg, #7a5dff, #67b8ff);
}
.lv-mini-art i:nth-child(3) {
  width: 12px; height: 12px; right: 25px; bottom: 10px;
  background: #ffd55f;
}

.landing-word {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.64);
  border: 1px solid rgba(255,255,255,.86);
  box-shadow: 0 15px 35px rgba(41,31,92,.10), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(22px) saturate(1.55);
  backdrop-filter: blur(22px) saturate(1.55);
  color: var(--ink-800);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -.02em;
  animation: spang-float 5.5s ease-in-out infinite;
}
.landing-word-one { left: -2%; top: 17%; color: #ca3e59; }
.landing-word-two { right: -2%; top: 42%; color: #6a4cdb; animation-delay: -1.8s; }
.landing-word-three { left: 4%; bottom: 10%; color: #295f9b; animation-delay: -3.1s; }
@keyframes spang-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-9px) rotate(1deg); }
}

/* ---- How it works ------------------------------------------------- */
.landing-how {
  position: relative;
  overflow: hidden;
  padding: clamp(30px, 5vw, 62px);
  border-radius: 34px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.46));
  border-color: rgba(255,255,255,.82);
  box-shadow: 0 28px 70px rgba(38,31,86,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.landing-how::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -130px;
  top: -140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,153,77,.18), rgba(121,87,255,.08) 56%, transparent 72%);
  pointer-events: none;
}

.landing-how-head {
  max-width: 720px;
}
.landing-how-head h2 {
  margin: 4px 0 12px;
  font-size: clamp(2rem, 4.2vw, 3.6rem);
  letter-spacing: -.055em;
  line-height: 1.04;
  text-wrap: balance;
}
.landing-how-head .muted {
  max-width: 62ch;
  font-size: 1.04rem;
  line-height: 1.65;
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(28px, 4vw, 44px);
}

.landing-feature {
  min-height: 210px;
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 12px 30px rgba(33,27,78,.05);
}
.landing-feature .lf-num {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  margin-bottom: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(255,255,255,.48));
  border: 1px solid rgba(255,255,255,.9);
  color: #7958e8;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(67,52,140,.08);
}
.landing-feature h3 {
  margin: 0 0 8px;
  font-size: 1.2rem;
}
.landing-feature p {
  margin: 0;
  color: var(--ink-600);
  font-size: .95rem;
  line-height: 1.58;
}

.landing-end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(48px, 8vw, 92px) 8px 12px;
}
.landing-end h2 {
  margin: 3px 0 0;
  font-size: clamp(1.9rem, 4vw, 3.3rem);
  letter-spacing: -.05em;
}

/* ---- Refined setup wizard ---------------------------------------- */
.onb-card-refined {
  border-radius: 30px;
  background: linear-gradient(145deg, rgba(255,255,255,.76), rgba(255,255,255,.52));
  border-color: rgba(255,255,255,.84);
  box-shadow: 0 30px 80px rgba(35,29,83,.13), inset 0 1px 0 rgba(255,255,255,.95);
}
.onb-card-refined .onb-steps {
  max-width: 210px;
}
.onb-card-refined .pick {
  border-width: 1px;
  border-color: rgba(31,26,75,.10);
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 22px rgba(38,31,82,.05), inset 0 1px 0 rgba(255,255,255,.85);
}
.onb-card-refined .pick:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, transparent);
  box-shadow: 0 14px 30px rgba(38,31,82,.08), 0 0 0 4px var(--accent-wash);
}
.onb-body > .illus {
  margin-block: 10px 8px;
}
.onb-flow-list {
  gap: 18px;
}
.onb-flow-line {
  padding: 4px 0;
}

/* ---- Lessons: more breathing room ------------------------------- */
/* The content model intentionally groups several teaching blocks before the
   next activity. Give each block enough air that an illustration never reads
   as glued to the rule, memory trick, or question beside it. */
.blk > .stream-item + .stream-item {
  margin-top: clamp(1.65rem, 3.2vw, 2.85rem);
}

.blk-section + .stream-item {
  margin-top: clamp(1.2rem, 2.4vw, 2rem) !important;
}

.hook {
  gap: clamp(var(--s4), 3vw, var(--s6));
}

.vocabgrid {
  gap: clamp(var(--s4), 2.6vw, var(--s5));
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}

.vocab {
  gap: var(--s3);
  padding: var(--s4);
  border-radius: 22px;
}

.vocab .illus {
  margin-bottom: 4px;
  border-radius: 18px;
}

.rulecard,
.trick,
.culture,
.act {
  margin-inline: 0;
}

/* The generic MULTIPLE CHOICE label is now removed in JS. When a custom
   activity label remains, keep it subtle so the question is still primary. */
.act-kind {
  opacity: .78;
  font-size: 10px;
  letter-spacing: .115em;
}

/* ---- Responsive --------------------------------------------------- */
@media (max-width: 960px) {
  .landing-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 36px;
    padding-top: 56px;
  }
  .landing-copy {
    max-width: 760px;
  }
  .landing-copy h1 {
    max-width: 12ch;
  }
  .landing-visual-wrap {
    width: min(100%, 660px);
    justify-self: center;
    min-height: 560px;
  }
  .landing-feature-grid {
    grid-template-columns: 1fr;
  }
  .landing-feature {
    min-height: 0;
  }
  .landing-feature .lf-num {
    margin-bottom: 16px;
  }
}

@media (max-width: 620px) {
  .landing-page {
    width: min(calc(100% - 1.25rem), 1180px);
    padding-top: 8px;
  }
  .landing-nav {
    min-height: 56px;
    padding-inline: 2px;
  }
  .landing-hero {
    padding: 34px 2px 64px;
  }
  .landing-copy h1 {
    font-size: clamp(3rem, 15vw, 4.4rem);
    line-height: .96;
    letter-spacing: -.068em;
  }
  .landing-lede {
    margin-top: 20px;
    font-size: 1.03rem;
  }
  .landing-actions {
    display: grid;
  }
  .landing-actions .btn {
    width: 100%;
  }
  .landing-proof {
    gap: 6px;
  }
  .landing-proof span {
    font-size: 10px;
  }
  .landing-visual-wrap {
    min-height: 470px;
  }
  .landing-visual {
    width: calc(100% - 22px);
    padding: 12px;
    border-radius: 28px;
    transform: none;
  }
  .landing-visual::after {
    border-radius: 27px;
  }
  .landing-word {
    min-height: 36px;
    padding-inline: 12px;
    border-radius: 13px;
    font-size: 12px;
  }
  .landing-word-one { left: -1%; top: 13%; }
  .landing-word-two { right: -1%; top: 48%; }
  .landing-word-three { left: 0; bottom: 4%; }
  .landing-orb-a { width: 230px; height: 230px; }
  .landing-orb-b { width: 250px; height: 250px; }
  .lv-explain strong { font-size: 1.75rem; }
  .lv-memory { grid-template-columns: 1fr auto; }
  .lv-mini-art { width: 78px; height: 60px; }
  .landing-how {
    padding: 27px 20px;
    border-radius: 28px;
  }
  .landing-how-head h2 {
    font-size: 2.1rem;
  }
  .landing-end {
    display: grid;
    padding-top: 58px;
  }
  .landing-end .btn {
    width: 100%;
  }
  .blk > .stream-item + .stream-item {
    margin-top: 1.65rem;
  }
  .vocabgrid {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-word {
    animation: none;
  }
  .landing-visual {
    transform: none;
  }
}


/* The same offer appears before the landing hero and above the plans. */
.promo-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  margin: 14px 0 0;
  border: 1px solid rgba(255,255,255,.9);
  border-radius: var(--r-lg);
  background: linear-gradient(115deg, rgba(255,93,115,.13), rgba(255,197,49,.09) 45%, rgba(123,92,255,.14));
  box-shadow: var(--sh-1), inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  color: var(--ink-800);
}
.promo-spark {
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 15px;
  color: var(--c-coral-d);
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 white;
}
.promo-copy { flex: 1; min-width: 0; }
.promo-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1rem, 2vw, 1.12rem);
  font-weight: 900;
  line-height: 1.4;
}
.promo-details {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  margin: 6px 0 0;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--ink-700);
}
.promo-code {
  padding: 3px 10px;
  border: 1px dashed rgba(81,76,133,.35);
  border-radius: 8px;
  background: rgba(255,255,255,.78);
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--ink-800);
  user-select: all;
  -webkit-user-select: all;
}
.promo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.78);
  color: var(--ink-800);
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.promo-link:hover { background: white; color: var(--c-violet-d); }
.promo-link:focus-visible { outline: 3px solid var(--c-violet-d); outline-offset: 3px; }
.pricing-view > .promo-banner { margin: 0 0 32px; }
@media (max-width: 600px) {
  .promo-banner { flex-wrap: wrap; gap: 12px; padding: 16px; }
  .promo-spark { display: none; }
  .promo-copy { flex-basis: 100%; }
  .promo-link { min-height: 44px; }
}