/* ==========================================================================
   Loay Motawie — public site design system
   Ported from the "Loay Landing Bright" design. One token set and one
   component set shared by the marketing pages and the auth pages, so the
   registration link, login and signup screens look like the same product
   as the landing page.
   ========================================================================== */

:root {
  /* Brand */
  --ls-navy: #14304F;
  --ls-blue: #1F7AE0;
  --ls-cyan: #7FE9F2;
  --ls-amber: #F5A524;

  /* Surfaces */
  --ls-page: #FFFFFF;
  --ls-tint: #EEF3FB;
  --ls-tint-deep: #DCE8F8;
  --ls-field: #F5F7FB;
  --ls-white: #FFFFFF;

  /* Ink */
  --ls-ink: #14304F;
  --ls-ink-2: #5A6B80;
  --ls-ink-3: #7A8798;
  --ls-ink-4: #98A4B5;

  /* Lines */
  --ls-line: #EDF0F5;
  --ls-line-2: #DCE6F5;
  --ls-line-3: #E7ECF3;

  /* Elevation */
  --ls-shadow-sm: 0 20px 40px -30px rgba(20, 48, 79, .4);
  --ls-shadow-md: 0 30px 60px -34px rgba(20, 48, 79, .45);
  --ls-shadow-lg: 0 40px 80px -50px rgba(20, 48, 79, .55);
  --ls-shadow-btn: 0 16px 30px -14px rgba(31, 122, 224, .95);

  /* Rhythm */
  --ls-radius: 24px;
  --ls-radius-lg: 32px;
  --ls-gutter: 40px;
  --ls-max: 1280px;
}

/* --------------------------------------------------------------- reset -- */

.ls-scope,
.ls-scope * { box-sizing: border-box; }

body.ls-body {
  margin: 0;
  background: var(--ls-page);
  color: var(--ls-ink);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ls-body a { color: var(--ls-blue); text-decoration: none; transition: color .18s ease; }
.ls-body a:hover { color: var(--ls-navy); }
.ls-body h1, .ls-body h2, .ls-body h3, .ls-body h4 { margin: 0; letter-spacing: -.025em; font-weight: 800; }
.ls-body p { margin: 0; }
.ls-body img { max-width: 100%; }
.ls-body input, .ls-body button, .ls-body select, .ls-body textarea { font-family: inherit; }
.ls-body input::placeholder, .ls-body textarea::placeholder { color: var(--ls-ink-4); }

/* Nothing on this site is meant to scroll sideways. A single overflowing child
   used to widen the whole page, which clipped every line of text and pushed the
   hero portrait off-screen on phones. */
html, body.ls-body { max-width: 100%; overflow-x: hidden; }

/* Grid and flex children default to min-width:auto, so one long unbreakable
   word or a nowrap label can force a track wider than the screen. Opt every
   layout container's children out of that. */
.ls-hero__grid > *,
.ls-split > *,
.ls-grid > *,
.ls-footer__grid > *,
.ls-cta-bar > *,
.ls-social-proof > *,
.ls-lesson > *,
.ls-auth__slab > * { min-width: 0; }

.ls-shell { display: flex; min-height: 100vh; flex-direction: column; }
.ls-main { flex: 1; }
.ls-wrap { max-width: var(--ls-max); margin: 0 auto; padding-inline: var(--ls-gutter); }

/* Sections sit in rounded tinted slabs inset from the page edge. */
.ls-slab {
  margin: 22px;
  border-radius: var(--ls-radius-lg);
  background: var(--ls-tint);
  padding: 54px 60px;
  position: relative;
  overflow: hidden;
}
.ls-slab--navy { background: var(--ls-navy); color: var(--ls-white); }
.ls-section { padding: 74px var(--ls-gutter) 0; }
.ls-section--tight { padding-top: 48px; }

/* -------------------------------------------------------------- header -- */

.ls-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ls-line);
}
.ls-header__inner {
  max-width: var(--ls-max);
  margin: 0 auto;
  padding: 14px var(--ls-gutter);
  display: flex;
  align-items: center;
  gap: 38px;
}
.ls-header__logo { height: 42px; width: auto; display: block; }
.ls-nav { display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 500; }
.ls-nav a { color: var(--ls-ink-2); }
.ls-nav a:hover, .ls-nav a.is-active { color: var(--ls-navy); font-weight: 600; }
.ls-header__actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.ls-body .ls-header__login {
  font-size: 15px; font-weight: 700; color: var(--ls-navy);
  padding: 11px 18px; border-radius: 100px;
  border: 1.5px solid var(--ls-line-2);
  display: inline-flex; align-items: center; gap: 8px;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.ls-body .ls-header__login:hover { border-color: var(--ls-blue); background: var(--ls-tint); color: var(--ls-blue); }

/* The primary header action gets a live gradient and a lift so it reads as the
   thing to press, on desktop and on the mobile drawer alike. */
.ls-body .ls-header__actions .ls-btn--primary {
  background: linear-gradient(135deg, var(--ls-blue) 0%, #1560C4 55%, var(--ls-navy) 100%);
  box-shadow: 0 12px 26px -12px rgba(31, 122, 224, .95);
  padding: 12px 26px;
}
.ls-body .ls-header__actions .ls-btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px -12px rgba(20, 48, 79, .8);
}
.ls-body .ls-header__actions .ls-btn--primary:active { transform: translateY(0); }

.ls-burger {
  display: none;
  margin-left: auto;
  border: 1px solid var(--ls-line-2);
  background: var(--ls-white);
  color: var(--ls-navy);
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 17px;
  cursor: pointer;
}

/* ------------------------------------------------------------- buttons -- */

.ls-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: none;
  border-radius: 100px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 700;
  padding: 17px 30px;
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  text-align: center;
}
/* These must out-rank `.ls-body a`, which is also (0,1,1). An anchor styled as
   a button was inheriting the link colour and rendering blue-on-blue. */
.ls-body .ls-btn--primary { background: var(--ls-blue); color: var(--ls-white); box-shadow: var(--ls-shadow-btn); }
.ls-body .ls-auth__card .ls-btn--block { min-height: 58px; font-size: 17px; }
.ls-body .ls-btn--primary:hover { background: var(--ls-navy); color: var(--ls-white); }
.ls-body .ls-btn--soft { background: var(--ls-tint); color: var(--ls-navy); }
.ls-body .ls-btn--soft:hover { background: var(--ls-blue); color: var(--ls-white); }
.ls-body .ls-btn--ghost { background: var(--ls-white); color: var(--ls-navy); border: 1px solid var(--ls-line-3); }
.ls-body .ls-btn--ghost:hover { border-color: var(--ls-blue); background: #F8FAFD; color: var(--ls-navy); }
.ls-body .ls-play { color: var(--ls-navy); }
.ls-body .ls-social { color: var(--ls-white); }
.ls-body .ls-social--filled { color: var(--ls-navy); }
.ls-body .ls-social:hover { color: var(--ls-navy); }
.ls-body .ls-auth__tab { color: var(--ls-ink-3); }
.ls-body .ls-auth__tab.is-active,
.ls-body .ls-auth__tab[aria-selected="true"] { color: var(--ls-navy); }
.ls-body .ls-lesson__cta { color: var(--ls-white); }
.ls-btn--sm { font-size: 15px; padding: 12px 24px; }
.ls-btn--block { width: 100%; }

/* --------------------------------------------------------------- atoms -- */

.ls-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ls-white);
  border: 1px solid var(--ls-line-2);
  border-radius: 100px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ls-blue);
}
.ls-eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: block; }
.ls-eyebrow--plain { border: none; }
.ls-eyebrow--onnavy { background: transparent; border: none; padding: 0; color: var(--ls-cyan); }

.ls-chip {
  background: var(--ls-white);
  border: 1px solid var(--ls-line-2);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ls-navy);
}

.ls-card {
  background: var(--ls-white);
  border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius);
  padding: 28px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ls-card--lift:hover { border-color: var(--ls-blue); transform: translateY(-4px); box-shadow: var(--ls-shadow-sm); }
.ls-card--flat { border: none; border-radius: 16px; padding: 16px 18px; }

.ls-lead { font-size: 17px; font-weight: 500; line-height: 1.6; color: var(--ls-ink-2); }
.ls-muted { color: var(--ls-ink-3); font-weight: 500; }

.ls-h1 { font-size: 46px; line-height: 1.08; }
.ls-h2 { font-size: 38px; line-height: 1.14; }
.ls-h2--xl { font-size: 40px; }
.ls-stat-value { font-size: 44px; font-weight: 800; letter-spacing: -.03em; color: var(--ls-blue); }
.ls-h3 { font-size: 23px; }
.ls-section-head { text-align: center; max-width: 640px; margin: 0 auto; }
.ls-section-bar {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; margin-bottom: 30px; flex-wrap: wrap;
}
.ls-section-bar > * { min-width: 0; }
.ls-section-head p { margin-top: 14px; }

.ls-code-badge {
  width: 54px; height: 54px;
  border-radius: 16px;
  background: var(--ls-navy);
  color: var(--ls-cyan);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800;
}

.ls-icon-tile {
  width: 62px; height: 62px;
  margin: 0 auto;
  border-radius: 20px;
  background: var(--ls-tint);
  color: var(--ls-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}

.ls-tick { color: var(--ls-blue); font-size: 12px; flex: none; }

/* ---------------------------------------------------------------- hero -- */

.ls-hero { padding: 52px 60px 44px; }
.ls-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; position: relative; }
.ls-hero h1 { font-size: 60px; line-height: 1.03; letter-spacing: -.03em; margin-top: 24px; }
.ls-hero h1 .ls-accent { color: var(--ls-blue); }
.ls-hero__lead { font-size: 17.5px; margin-top: 22px; max-width: 450px; }
.ls-hero__cta { display: flex; align-items: center; gap: 20px; margin-top: 32px; flex-wrap: wrap; }

.ls-play {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15.5px; font-weight: 700; color: var(--ls-navy);
}
.ls-play__dot {
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--ls-white); border: 1px solid var(--ls-line-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: var(--ls-blue);
}

.ls-social-proof { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.ls-avatars { display: flex; }
.ls-avatars span {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid var(--ls-tint); display: block;
}
.ls-avatars span + span { margin-left: -12px; }
.ls-avatars .a1 { background: #CBD9EC; }
.ls-avatars .a2 { background: #B9CCE6; }
.ls-avatars .a3 { background: #A6BEDF; }
.ls-avatars .a4 {
  background: var(--ls-navy); color: var(--ls-cyan);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
}
.ls-stars { font-size: 13px; letter-spacing: .06em; color: var(--ls-amber); }

.ls-portrait {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  /* Tall enough that the outer ring is never clipped by the slab. */
  min-height: 600px;
  min-width: 0; max-width: 100%;
}
.ls-portrait__ring,
.ls-portrait__ring--2,
.ls-portrait__disc {
  position: absolute; border-radius: 50%;
  inset: 0; margin: auto;
}
.ls-portrait__ring { width: 500px; height: 500px; border: 1px solid rgba(31, 122, 224, .28); }
.ls-portrait__ring--2 { width: 570px; height: 570px; border: 1px dashed rgba(31, 122, 224, .18); }
.ls-portrait__disc { width: 430px; height: 430px; background: var(--ls-tint-deep); }
.ls-portrait__img {
  position: relative; z-index: 2;
  height: 540px; width: auto; max-width: 100%; display: block;
  filter: drop-shadow(0 26px 34px rgba(20, 48, 79, .28));
}

/* Transparent on desktop so the floats position against .ls-portrait; becomes
   a real scrolling row on phones. */
.ls-hero__stats { display: contents; }

.ls-float {
  position: absolute; z-index: 3; right: 0;
  background: var(--ls-white);
  border-radius: 18px;
  padding: 14px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 20px 40px -22px rgba(20, 48, 79, .5);
}
.ls-float__icon {
  width: 36px; height: 36px; border-radius: 11px;
  background: #E7F0FD; color: var(--ls-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex: none;
}
.ls-float__value { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.ls-float__label { font-size: 12.5px; font-weight: 600; color: var(--ls-ink-3); white-space: nowrap; }
.ls-float--1 { top: 26px; }
.ls-float--2 { top: 122px; }
.ls-float--3 { top: 218px; }

.ls-boards {
  position: relative; margin-top: 34px;
  background: var(--ls-white);
  border-radius: 22px; padding: 26px 36px;
  box-shadow: var(--ls-shadow-sm);
}
.ls-boards__title { text-align: center; font-size: 13.5px; font-weight: 700; color: var(--ls-ink-4); letter-spacing: .04em; }
.ls-boards__row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-top: 18px;
  font-size: 19px; font-weight: 700; color: #46586E;
}

/* ------------------------------------------------------------- content -- */

.ls-grid { display: grid; gap: 26px; }
.ls-grid--6 { grid-template-columns: repeat(6, 1fr); }
.ls-grid--3 { grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ls-grid--2 { grid-template-columns: 1fr 1fr; gap: 16px; }
.ls-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ls-split { display: grid; grid-template-columns: .82fr 1.18fr; gap: 48px; align-items: center; }
.ls-split--even { grid-template-columns: 1fr 1fr; }

.ls-feature { text-align: center; }
.ls-feature h4 { font-size: 16px; font-weight: 700; margin: 16px 0 6px; letter-spacing: -.01em; }
.ls-feature p { font-size: 13.5px; font-weight: 500; line-height: 1.5; color: var(--ls-ink-3); }

.ls-lesson {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--ls-line); border-radius: 14px; padding: 12px;
}
.ls-lesson__level {
  width: 86px; height: 58px; border-radius: 10px;
  background: var(--ls-navy); flex: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--ls-cyan); font-size: 15px; font-weight: 800;
}
.ls-lesson__board { font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .6); }
.ls-lesson__title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ls-lesson__meta { font-size: 12.5px; font-weight: 600; color: var(--ls-ink-3); margin-top: 4px; }
.ls-lesson__cta { background: var(--ls-blue); color: var(--ls-white); font-size: 12.5px; font-weight: 700; padding: 9px 16px; border-radius: 100px; white-space: nowrap; }

.ls-search {
  display: flex; align-items: center; gap: 12px;
  background: var(--ls-field); border: 1px solid var(--ls-line-3);
  border-radius: 12px; padding: 12px 16px;
  font-size: 14.5px; color: var(--ls-ink-4); font-weight: 500;
}
.ls-topic { font-size: 14px; font-weight: 600; padding: 11px 14px; border-radius: 10px; color: var(--ls-ink-3); }
.ls-topic.is-active { background: var(--ls-tint); color: var(--ls-navy); font-weight: 700; }

.ls-social {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .32);
  color: var(--ls-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.ls-social:hover { background: var(--ls-white); color: var(--ls-navy); }
.ls-social--filled { background: var(--ls-cyan); color: var(--ls-navy); border: none; }
.ls-social--filled:hover { background: var(--ls-white); }

.ls-cta-bar {
  background: var(--ls-white); border: 1px solid var(--ls-line);
  border-radius: 28px; padding: 40px 44px;
  display: flex; align-items: center; gap: 40px;
  box-shadow: 0 30px 60px -40px rgba(20, 48, 79, .5);
}
.ls-cta-bar__icon {
  width: 72px; height: 72px; border-radius: 22px;
  background: var(--ls-tint); color: var(--ls-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; flex: none;
}

/* -------------------------------------------------------------- footer -- */

.ls-footer { padding: 70px var(--ls-gutter) 30px; }
.ls-footer__grid { max-width: var(--ls-max); margin: 0 auto; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 44px; }
.ls-footer__title { font-size: 15px; font-weight: 800; margin-bottom: 14px; }
.ls-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 500; }
.ls-footer__links a { color: var(--ls-ink-2); display: flex; align-items: center; gap: 10px; min-height: 24px; }
.ls-footer__links a:hover { color: var(--ls-navy); }
.ls-footer__links i { color: var(--ls-blue); width: 16px; }
.ls-footer__social { display: flex; gap: 10px; margin-top: 16px; }
.ls-footer__social a {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--ls-tint); color: var(--ls-navy);
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.ls-footer__social a:hover { background: var(--ls-blue); color: var(--ls-white); }
.ls-footer__bar {
  max-width: var(--ls-max); margin: 36px auto 0;
  padding-top: 20px; border-top: 1px solid var(--ls-line);
  font-size: 13.5px; font-weight: 600; color: var(--ls-ink-3);
}

/* ---------------------------------------------------------------- auth -- */

.ls-auth { padding: 22px; }
.ls-auth__slab {
  border-radius: var(--ls-radius-lg);
  background: var(--ls-tint);
  padding: 44px 40px;
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 440px); gap: 40px;
  align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.ls-auth__slab::before {
  content: ''; position: absolute;
  width: 560px; height: 560px; border-radius: 50%;
  background: #E0EBFA; left: -160px; bottom: -180px;
}
.ls-auth__card {
  position: relative;
  background: var(--ls-white);
  border-radius: 26px;
  padding: 44px 48px;
  box-shadow: var(--ls-shadow-lg);
  max-width: 560px; width: 100%;
}
.ls-auth__logo { height: 46px; width: auto; display: block; margin-bottom: 22px; }
.ls-auth__tabs { display: flex; background: #F1F4FA; border-radius: 100px; padding: 5px; margin-bottom: 30px; }
.ls-auth__tab {
  flex: 1; border: none; cursor: pointer;
  padding: 15px; border-radius: 100px;
  font-size: 15.5px; font-weight: 700;
  background: transparent; color: var(--ls-ink-3);
  text-align: center; transition: background .18s ease, color .18s ease;
}
.ls-auth__tab.is-active,
.ls-auth__tab[aria-selected="true"] { background: var(--ls-white); color: var(--ls-navy); box-shadow: 0 4px 12px -6px rgba(20, 48, 79, .5); }
.ls-auth__pane { padding-top: 6px; }
/* `.ls-body h1` and `.ls-body p` reset margins at the same specificity, so the
   heading block needs the same weight or it collapses onto the first field. */
.ls-body .ls-auth__title { font-size: 34px; line-height: 1.2; margin: 0 0 10px; }
.ls-body .ls-auth__sub { font-size: 15.5px; font-weight: 500; color: var(--ls-ink-3); margin: 0 0 30px; line-height: 1.55; }
.ls-auth__aside { position: relative; }
.ls-body .ls-auth__aside h2 { font-size: 40px; line-height: 1.06; letter-spacing: -.03em; margin: 16px 0 0; }
.ls-auth__perks { display: flex; flex-direction: column; gap: 12px; margin-top: 30px; max-width: 420px; }
.ls-auth__perk {
  display: flex; align-items: center; gap: 12px;
  background: var(--ls-white); border-radius: 16px; padding: 16px 18px;
  font-size: 15px; font-weight: 600;
}
.ls-auth__perk span {
  width: 32px; height: 32px; border-radius: 10px;
  background: var(--ls-tint); color: var(--ls-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; flex: none;
}
.ls-auth__footnote { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 26px; }
.ls-auth__portrait {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  margin-bottom: -18px;
}
.ls-auth__portrait::before {
  content: ''; position: absolute; bottom: 18px;
  width: 250px; height: 250px; border-radius: 50%;
  background: var(--ls-tint-deep);
}
.ls-auth__portrait img {
  position: relative; height: 300px; width: auto; display: block;
  filter: drop-shadow(0 20px 26px rgba(20, 48, 79, .24));
}
.ls-auth__divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.ls-auth__divider span:first-child,
.ls-auth__divider span:last-child { height: 1px; background: var(--ls-line-3); flex: 1; display: block; }
.ls-auth__divider em { font-size: 12.5px; font-weight: 700; color: var(--ls-ink-3); font-style: normal; }
.ls-auth__switch { text-align: center; font-size: 14.5px; font-weight: 500; color: var(--ls-ink-3); margin-top: 22px; }
.ls-auth__switch a { font-weight: 700; }
.ls-auth__banner {
  display: flex; align-items: center; gap: 14px;
  background: #E7F0FD; border: 1px solid var(--ls-line-2);
  border-radius: 16px; padding: 16px 18px; margin-bottom: 22px;
}
.ls-auth__banner i { font-size: 22px; color: var(--ls-blue); flex: none; }
.ls-auth__banner-label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--ls-ink-3); font-weight: 700; }
.ls-auth__banner-name { display: block; font-size: 16px; font-weight: 800; color: var(--ls-navy); }

/* --------------------------------------------------------------- forms -- */

.ls-field { display: block; margin-bottom: 20px; }
.ls-field__label { display: block; font-size: 13.5px; font-weight: 700; color: var(--ls-ink-2); margin-bottom: 9px; letter-spacing: .01em; }
.ls-field__label--row { display: flex; justify-content: space-between; align-items: baseline; }
.ls-input {
  width: 100%;
  padding: 16px 18px;
  min-height: 56px;
  font-size: 16px; font-weight: 500;
  color: var(--ls-ink);
  background: var(--ls-field);
  border: 1px solid var(--ls-line-3);
  border-radius: 14px;
  outline: none;
  transition: border-color .18s ease, background .18s ease;
}
.ls-input:focus { border-color: var(--ls-blue); background: var(--ls-white); }
textarea.ls-input { min-height: 140px; resize: vertical; line-height: 1.55; }
select.ls-input { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ls-ink-3) 50%), linear-gradient(135deg, var(--ls-ink-3) 50%, transparent 50%); background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.ls-password { position: relative; display: block; }
.ls-password .ls-input { padding-right: 52px; }
.ls-password__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: none; background: transparent;
  color: var(--ls-ink-3); cursor: pointer; border-radius: 12px; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
}
.ls-password__toggle:hover { color: var(--ls-blue); background: var(--ls-field); }

.ls-auth__pane[hidden], [data-auth-pane][hidden] { display: none; }

.ls-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ls-phone-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; }
.ls-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; font-weight: 500; color: var(--ls-ink-2);
  line-height: 1.5; margin-bottom: 24px;
}
.ls-consent input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--ls-blue); flex: none; }
.ls-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ls-level {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  cursor: pointer; padding: 14px 10px; border-radius: 14px;
  border: 1px solid var(--ls-line-3); background: var(--ls-field); color: var(--ls-navy);
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.ls-level strong { font-size: 16px; font-weight: 800; }
.ls-level small { font-size: 12px; font-weight: 600; opacity: .72; }
.ls-level input { position: absolute; opacity: 0; pointer-events: none; }
.ls-level:has(input:checked) { border-color: var(--ls-blue); background: var(--ls-blue); color: var(--ls-white); }

/* ------------------------------------------------------------- alerts --- */

.ls-alert {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
  font-size: 14.5px; font-weight: 600; line-height: 1.45;
}
.ls-alert i { margin-top: 2px; }
.ls-alert--success { background: #E7F7EE; color: #17663E; }
.ls-alert--error   { background: #FDECEC; color: #A32222; }
.ls-alert--warning { background: #FEF4E3; color: #8A5A08; }
.ls-alert--info    { background: #E7F0FD; color: #14304F; }

/* -------------------------------------------------------------- prose -- */

.ls-prose { font-size: 16.5px; line-height: 1.75; color: var(--ls-ink-2); font-weight: 500; }
.ls-prose h2 { font-size: 26px; margin: 34px 0 12px; color: var(--ls-ink); }
.ls-prose h3 { font-size: 20px; margin: 26px 0 10px; color: var(--ls-ink); }
.ls-prose p { margin-bottom: 16px; }
.ls-prose ul { margin: 0 0 18px; padding-left: 22px; }
.ls-prose li { margin-bottom: 8px; }

.ls-faq { border: 1px solid var(--ls-line); border-radius: 18px; padding: 20px 22px; background: var(--ls-white); }
.ls-faq + .ls-faq { margin-top: 12px; }
.ls-faq summary { font-size: 16.5px; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after { content: '+'; color: var(--ls-blue); font-weight: 800; }
.ls-faq[open] summary::after { content: '−'; }
.ls-faq p { margin-top: 12px; font-size: 15.5px; font-weight: 500; color: var(--ls-ink-2); line-height: 1.6; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1180px) {
  .ls-hero h1 { font-size: 48px; }
  .ls-portrait__img { height: 440px; }
  .ls-portrait__ring { width: 420px; height: 420px; }
  .ls-portrait__ring--2 { width: 480px; height: 480px; }
  .ls-portrait__disc { width: 360px; height: 360px; }
  .ls-grid--6 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  :root { --ls-gutter: 20px; }

  /* --- header: logo + burger, everything else folds into a drawer --- */
  .ls-header__inner { padding: 12px var(--ls-gutter); gap: 12px; }
  .ls-header__logo { height: 38px; }
  .ls-nav, .ls-header__actions { display: none; }
  .ls-burger { display: inline-flex; align-items: center; justify-content: center; }
  .ls-header.is-open .ls-header__inner { flex-wrap: wrap; gap: 0; }
  .ls-header.is-open .ls-nav,
  .ls-header.is-open .ls-header__actions {
    display: flex; flex-direction: column; align-items: stretch;
    width: 100%; gap: 4px; margin: 0; padding: 10px 0 4px;
    border-top: 1px solid var(--ls-line);
  }
  .ls-header.is-open .ls-nav a {
    padding: 13px 12px; font-size: 16px; border-radius: 12px;
    color: var(--ls-navy); font-weight: 600;
  }
  .ls-header.is-open .ls-nav a:active { background: var(--ls-tint); }
  .ls-header.is-open .ls-header__actions { padding: 8px 0 14px; gap: 8px; }
  .ls-header.is-open .ls-header__login { padding: 13px 12px; }
  .ls-header.is-open .ls-btn { width: 100%; }

  /* --- layout --- */
  .ls-slab { margin: 12px; padding: 34px 20px; border-radius: 24px; }
  .ls-hero { padding: 30px 20px 26px; }
  .ls-hero__grid, .ls-split, .ls-split--even { grid-template-columns: 1fr; gap: 30px; }
  .ls-section { padding: 46px var(--ls-gutter) 0; }
  .ls-h1, .ls-h2, .ls-h2--xl, .ls-hero h1 { font-size: 34px; }
  .ls-stat-value { font-size: 36px; }
  .ls-slab--navy { padding: 34px 22px !important; }
  .ls-grid--3 { grid-template-columns: 1fr; }
  .ls-grid--4 { grid-template-columns: 1fr 1fr; }
  .ls-cta-bar { flex-direction: column; text-align: center; gap: 20px; padding: 30px 22px; }
  .ls-cta-bar > div[style*="text-align: right"] { text-align: center !important; width: 100%; }
  .ls-footer { padding: 48px var(--ls-gutter) 24px; }
  .ls-footer__grid { grid-template-columns: 1fr 1fr; gap: 28px; }

  /* --- boards strip scrolls instead of cramming --- */
  .ls-boards { padding: 20px 18px; }
  .ls-boards__row {
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    min-width: 0; max-width: 100%;
    gap: 22px; font-size: 15px; padding-bottom: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ls-boards__row::-webkit-scrollbar { display: none; }

  /* Every width that gets the touch drawer also gets thumb-sized targets. */
  .ls-footer__links a { min-height: 44px; }
  .ls-play { min-height: 48px; }
  .ls-section a[href]:not(.ls-btn):not(.ls-card):not(.ls-lesson__cta) {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .ls-header__inner > a { display: inline-flex; align-items: center; min-height: 44px; }
  .ls-social { width: 46px; height: 46px; }
  .ls-footer__social a { width: 44px; height: 44px; }
  .ls-boards__row span { white-space: nowrap; }

  /* --- auth: the form comes first, the pitch supports it underneath --- */
  .ls-auth { padding: 12px; }
  .ls-auth__slab {
    grid-template-columns: 1fr; padding: 22px 16px; min-height: 0;
    gap: 26px; border-radius: 24px;
  }
  .ls-auth__slab::before { width: 320px; height: 320px; left: -120px; bottom: -140px; }
  .ls-auth__card { order: 0; padding: 26px 20px; max-width: none; border-radius: 22px; }
  .ls-auth__slab { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
  .ls-auth__aside { order: 1; text-align: center; }
  .ls-body .ls-auth__aside h2 { font-size: 26px; margin: 8px 0 0; }
  .ls-auth__aside .ls-lead { font-size: 15.5px; margin: 10px auto 0; }
  .ls-auth__perks { margin: 18px auto 0; gap: 8px; }
  .ls-auth__perk { padding: 12px 14px; font-size: 14px; text-align: left; }
  .ls-auth__perk span { width: 26px; height: 26px; border-radius: 8px; font-size: 11px; }
  .ls-auth__footnote { display: none; }
  .ls-auth__logo { height: 40px; margin-bottom: 18px; }
  .ls-body .ls-auth__title { font-size: 26px; }
  .ls-body .ls-auth__sub { font-size: 14.5px; margin-bottom: 20px; }
}

@media (max-width: 640px) {
  .ls-hero h1 { font-size: 30px; }
  .ls-hero__lead { font-size: 16px; margin-top: 18px; }
  .ls-h1, .ls-h2, .ls-h2--xl { font-size: 26px; }
  .ls-stat-value { font-size: 32px; }
  .ls-h3 { font-size: 20px; }
  .ls-lead { font-size: 15.5px; }
  .ls-grid, .ls-grid--6, .ls-grid--2, .ls-grid--4 { grid-template-columns: 1fr; gap: 14px; }

  .ls-footer__grid { grid-template-columns: 1fr; gap: 24px; }
  .ls-card { padding: 22px 18px; }
  .ls-section-head p { font-size: 15.5px; }

  /* The stat cards drop below the portrait as a scrollable strip so they never
     sit on top of the instructor's face, and the decorative rings step aside. */
  .ls-portrait {
    flex-direction: column; gap: 16px; min-height: 0;
    background: radial-gradient(circle at 50% 42%, var(--ls-tint-deep) 0 42%, transparent 42%);
  }
  .ls-portrait__ring, .ls-portrait__ring--2, .ls-portrait__disc { display: none; }
  .ls-portrait__img { height: 300px; }

  .ls-hero__stats {
    display: flex; gap: 10px; width: 100%;
    min-width: 0; max-width: 100%;
    overflow-x: auto; padding-bottom: 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ls-hero__stats::-webkit-scrollbar { display: none; }
  .ls-float {
    position: static; right: auto; left: auto; top: auto; bottom: auto;
    padding: 12px 14px; flex: 0 0 auto;
    box-shadow: 0 12px 24px -18px rgba(20, 48, 79, .5);
  }

  /* Stack the calls to action instead of letting a full-width button share a
     row with the play link — that combination is what widened the page. */
  .ls-hero__cta {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 12px; width: 100%;
  }
  .ls-btn { width: 100%; max-width: 100%; padding: 15px 22px; font-size: 15.5px; }
  .ls-btn--sm { padding: 13px 20px; }
  .ls-play { justify-content: center; width: 100%; }

  .ls-social-proof { margin-top: 26px; gap: 12px; }
  .ls-social-proof > div:last-child { flex: 1 1 180px; }

  /* Copy must wrap to the screen, never to a desktop measure. */
  .ls-hero__lead, .ls-lead, .ls-section-head, .ls-auth__aside .ls-lead { max-width: 100%; }
  .ls-hero h1, .ls-h2, .ls-h3 { overflow-wrap: anywhere; }
  .ls-boards__title { font-size: 12.5px; }

  /* --- forms are the whole point of the auth screens: size them for thumbs -- */
  .ls-field-row, .ls-levels { grid-template-columns: 1fr; }
  .ls-phone-row { grid-template-columns: 108px 1fr; gap: 8px; }
  .ls-field { margin-bottom: 18px; }
  .ls-field__label { font-size: 14px; margin-bottom: 8px; }
  /* 16px keeps iOS Safari from zooming the viewport on focus. */
  .ls-input {
    font-size: 16px;
    padding: 16px 18px;
    min-height: 58px;
    border-radius: 16px;
  }
  select.ls-input { background-position: calc(100% - 20px) 24px, calc(100% - 14px) 24px; }
  textarea.ls-input { min-height: 150px; }
  .ls-consent { font-size: 15px; gap: 12px; margin-bottom: 26px; align-items: center; }
  .ls-consent input { width: 22px; height: 22px; margin: 0; }
  .ls-level { padding: 16px 10px; }

  .ls-auth { padding: 8px; }
  .ls-auth__slab { padding: 16px 10px; gap: 22px; }
  .ls-auth__card { padding: 26px 18px; border-radius: 20px; }
  .ls-body .ls-auth__title { font-size: 30px; }
  .ls-body .ls-auth__sub { font-size: 15px; margin-bottom: 24px; }
  .ls-auth__tabs { padding: 5px; margin-bottom: 24px; }
  .ls-auth__tab { padding: 14px 8px; font-size: 15px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
  .ls-auth__card .ls-btn { min-height: 54px; font-size: 16px; }
  .ls-auth__switch { font-size: 15px; margin-top: 24px; }
  .ls-auth__banner { padding: 14px 16px; }

  .ls-lesson { flex-wrap: wrap; gap: 10px; }
  .ls-lesson__level { width: 64px; height: 46px; font-size: 13px; }
  .ls-lesson__title { font-size: 14.5px; }
  .ls-lesson__cta { margin-left: auto; }
  .ls-faq summary { font-size: 15.5px; }
  .ls-prose { font-size: 15.5px; }
  .ls-prose h2 { font-size: 22px; }

  /* Comfortable thumb targets on every interactive chip/social/icon. */
  .ls-social { width: 46px; height: 46px; }
  .ls-footer__social a { width: 44px; height: 44px; }
  .ls-chip { padding: 9px 14px; }
}

/* Notch and home-indicator safe areas. */
@supports (padding: max(0px)) {
  .ls-header__inner { padding-left: max(var(--ls-gutter), env(safe-area-inset-left));
                      padding-right: max(var(--ls-gutter), env(safe-area-inset-right)); }
  .ls-footer { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .ls-auth { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .ls-body *, .ls-body *::before, .ls-body *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   MOBILE APP SHELL
   Ported from the "Loay Mobile" design: sticky header with circular actions,
   a full-screen navy menu, horizontal card rails instead of squeezed grids,
   52–56px thumb targets, and a bottom tab bar. Everything here is scoped to
   phone widths — the desktop layout is untouched.
   ========================================================================== */

.ls-header__mobile { display: none; margin-left: auto; align-items: center; gap: 8px; }

.ls-round-btn {
  width: 44px; height: 44px; border-radius: 50%;
  border: none; background: var(--ls-tint); color: var(--ls-navy);
  font-size: 16px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; transition: background .18s ease, color .18s ease;
}
.ls-body .ls-round-btn { color: var(--ls-navy); }
.ls-round-btn--ghost { background: var(--ls-white); border: 1px solid var(--ls-line-3); }
.ls-round-btn--onnavy { background: transparent; border: 1px solid rgba(255, 255, 255, .3); }
.ls-body .ls-round-btn--onnavy { color: var(--ls-white); }

/* ------------------------------------------------------- full-screen menu -- */
.ls-menu { display: none; }
.ls-menu[hidden] { display: none !important; }

/* ------------------------------------------------------------- tab bar ----- */
.ls-tabbar { display: none; }

/* ------------------------------------------------------ home stat tiles ---- */
.ls-stat-tiles { display: none; }

/* --------------------------------------------------- extra button skins ---- */
.ls-body .ls-btn--cyan { background: var(--ls-cyan); color: var(--ls-navy); }
.ls-body .ls-btn--cyan:hover { background: var(--ls-white); color: var(--ls-navy); }
.ls-body .ls-btn--outline-light { background: transparent; color: var(--ls-white); border: 1px solid rgba(255, 255, 255, .34); }
.ls-body .ls-btn--outline-light:hover { background: rgba(255, 255, 255, .12); color: var(--ls-white); }

@media (max-width: 1024px) {
  .ls-header__mobile { display: flex; }
  .ls-burger { display: none !important; }
  /* The inline dropdown is replaced by the full-screen sheet. */
  .ls-header.is-open .ls-nav,
  .ls-header.is-open .ls-header__actions { display: none; }

  .ls-menu:not([hidden]) {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 200;
    background: var(--ls-navy); color: var(--ls-white);
    padding: max(22px, env(safe-area-inset-top)) 20px max(28px, env(safe-area-inset-bottom));
    overflow-y: auto;
  }
  .ls-menu__top { display: flex; align-items: center; justify-content: space-between; }
  .ls-menu__links { display: flex; flex-direction: column; margin-top: 26px; }
  .ls-body .ls-menu__links a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 17px 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
    color: var(--ls-white); font-size: 26px; font-weight: 800; letter-spacing: -.025em;
  }
  .ls-menu__links i { font-size: 14px; color: var(--ls-cyan); }
  .ls-menu__actions { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
  .ls-menu__foot { margin-top: auto; padding-top: 28px; }
  .ls-menu__foot-label {
    font-size: 11px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ls-cyan);
  }
  .ls-menu__social { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
  .ls-body .ls-menu__social a {
    width: 48px; height: 48px; border-radius: 50%;
    background: rgba(255, 255, 255, .1); color: var(--ls-white);
    display: flex; align-items: center; justify-content: center; font-size: 17px;
  }
  .ls-menu__contact { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .55); margin-top: 16px; }
}

@media (max-width: 640px) {
  /* Room for the tab bar so it never covers the last control. */
  .ls-shell { padding-bottom: 78px; }

  /* --- bottom tab bar --- */
  .ls-tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
    background: rgba(255, 255, 255, .96); backdrop-filter: blur(12px);
    border-top: 1px solid var(--ls-line);
    padding: 8px 8px max(8px, env(safe-area-inset-bottom));
  }
  .ls-body .ls-tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; height: 52px; border-radius: 14px;
    color: var(--ls-ink-4); font-size: 11px; font-weight: 700; min-height: 52px;
  }
  .ls-tabbar i { font-size: 17px; }
  .ls-body .ls-tabbar a.is-active { color: var(--ls-blue); background: #F3F7FD; }

  /* --- header --- */
  .ls-header__inner { padding: 10px 16px; }
  .ls-header__logo { height: 32px; }

  /* --- hero: tighter slab, thumb-height CTA --- */
  .ls-slab { margin: 12px; padding: 22px 20px; border-radius: 26px; }
  .ls-hero { padding: 22px 20px 0; }
  .ls-hero h1 { font-size: 31px; line-height: 1.06; }
  .ls-hero__lead { font-size: 15px; line-height: 1.55; margin-top: 12px; }
  .ls-hero__cta { margin-top: 18px; }
  .ls-body .ls-hero__cta .ls-btn { height: 54px; font-size: 16px; }
  .ls-eyebrow { font-size: 11px; padding: 7px 13px; }

  /* Floating chips sit over the portrait like the mobile design. */
  .ls-portrait { min-height: 320px; gap: 0; justify-content: flex-end; }
  .ls-hero__stats {
    position: absolute; inset: 0; display: block;
    overflow: visible; pointer-events: none; padding: 0;
  }
  .ls-float {
    position: absolute; padding: 10px 13px; border-radius: 14px;
    box-shadow: 0 14px 26px -16px rgba(20, 48, 79, .5);
  }
  .ls-float--1 { left: 0; right: auto; top: 18px; }
  .ls-float--2 { display: none; }
  .ls-float--3 { right: 0; left: auto; top: 96px; }
  .ls-float__icon { width: 30px; height: 30px; border-radius: 9px; font-size: 11px; }
  .ls-float__value { font-size: 15px; }
  .ls-float__label { font-size: 11px; font-weight: 700; }

  /* --- stat tiles --- */
  .ls-stat-tiles { display: flex; gap: 10px; margin-top: 14px; }
  .ls-stat-tiles > div {
    flex: 1; border: 1px solid var(--ls-line); border-radius: 16px;
    padding: 12px 8px; text-align: center; background: var(--ls-white);
  }
  .ls-stat-tiles strong { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
  .ls-stat-tiles span { display: block; font-size: 11px; font-weight: 700; color: var(--ls-ink-3); margin-top: 2px; }

  /* --- card rails: scroll sideways instead of stacking into a long column --- */
  .ls-section .ls-grid--6,
  .ls-section .ls-grid--3 {
    display: flex; gap: 10px; overflow-x: auto;
    padding: 4px 0 8px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .ls-section .ls-grid--6::-webkit-scrollbar,
  .ls-section .ls-grid--3::-webkit-scrollbar { display: none; }
  .ls-section .ls-grid--6 > * { flex: none; width: 152px; scroll-snap-align: start; }
  .ls-section .ls-grid--3 > * { flex: none; width: 268px; scroll-snap-align: start; }

  .ls-grid--6 .ls-feature {
    text-align: left; border: 1px solid var(--ls-line);
    border-radius: 18px; padding: 14px; background: var(--ls-white);
  }
  .ls-grid--6 .ls-icon-tile { width: 40px; height: 40px; border-radius: 12px; font-size: 15px; margin: 0; }
  .ls-grid--6 .ls-feature h4 { font-size: 14.5px; margin: 12px 0 4px; }
  .ls-grid--6 .ls-feature p { font-size: 12.5px; line-height: 1.45; }

  .ls-section-head { text-align: left; }
  .ls-section-bar { gap: 6px; margin-bottom: 16px; align-items: baseline; }
  .ls-section-bar > * { flex: 1 1 100%; }
  .ls-h2, .ls-h2--xl { font-size: 22px; }
  .ls-section-head p, .ls-lead { font-size: 14px; }

  /* --- CTA card --- */
  .ls-cta-bar { text-align: center; padding: 22px 20px; border-radius: 26px; }
  .ls-cta-bar__icon { margin: 0 auto; width: 56px; height: 56px; border-radius: 18px; font-size: 20px; }
  .ls-body .ls-cta-bar .ls-btn { height: 54px; }

  /* --- footer collapses to the mobile design's centred mark --- */
  .ls-footer { padding: 26px 20px 20px; text-align: center; }
  .ls-footer__grid { grid-template-columns: 1fr; gap: 22px; }
  .ls-footer__social { justify-content: center; }
  .ls-footer__links a { justify-content: center; }
  .ls-footer p { margin-inline: auto; }

  /* --- auth: portrait above a white sheet with a rounded top edge --- */
  .ls-auth { padding: 0; }
  .ls-auth__slab {
    padding: 0; border-radius: 0; gap: 0; background: var(--ls-tint);
    grid-template-columns: minmax(0, 1fr);
  }
  .ls-auth__slab::before { display: none; }
  .ls-auth__aside { order: -1; padding: 14px 20px 0; text-align: left; }
  .ls-auth__aside .ls-auth__perks { display: none; }
  .ls-auth__portrait { margin-top: 4px; }
  .ls-auth__portrait::before { width: 180px; height: 180px; bottom: 12px; }
  .ls-auth__portrait img { height: 210px; }
  .ls-auth__portrait { margin-bottom: -12px; }
  .ls-auth__card {
    order: 0; margin-top: -12px;
    border-radius: 30px 30px 0 0;
    padding: 26px 20px 40px;
    box-shadow: 0 -20px 40px -30px rgba(20, 48, 79, .4);
  }
  .ls-body .ls-auth__card .ls-btn--block { height: 56px; }
}

/* ------------------------------------------------------ studio credit ----- */

/* Sits above the footer on every page, including the auth screens which drop
   the footer entirely. */
.ls-studio-bar {
  padding: 26px var(--ls-gutter) 30px;
  display: flex; justify-content: center;
  border-top: 1px solid var(--ls-line);
  background: linear-gradient(180deg, var(--ls-white) 0%, var(--ls-tint) 100%);
}
.ls-body .ls-powered {
  display: inline-flex; align-items: center; gap: 16px;
  background: var(--ls-white);
  border: 1px solid var(--ls-line-2);
  border-radius: 100px;
  padding: 12px 22px 12px 12px;
  color: var(--ls-navy);
  box-shadow: 0 16px 34px -26px rgba(20, 48, 79, .6);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ls-body .ls-powered:hover {
  border-color: var(--ls-blue); transform: translateY(-2px);
  box-shadow: 0 22px 40px -24px rgba(20, 48, 79, .55); color: var(--ls-navy);
}
.ls-powered__tile {
  width: 46px; height: 46px; border-radius: 14px; flex: none;
  background: #000; display: grid; place-items: center; overflow: hidden;
}
.ls-powered__logo { width: 44px; height: 44px; display: block; border-radius: 12px; }
.ls-powered__text { display: flex; flex-direction: column; line-height: 1.15; }
.ls-powered__kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ls-ink-4);
}
.ls-powered__name { font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--ls-navy); }
.ls-powered__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ls-blue);
  padding-left: 16px; border-left: 1px solid var(--ls-line);
}
.ls-powered__cta i { font-size: 11px; }

/* The mark is artwork on black, so it sits in a dark tile on purpose. */
.ls-studio-mark {
  width: 220px; height: 220px; border-radius: 40px;
  background: #000; display: grid; place-items: center;
  box-shadow: 0 30px 60px -30px rgba(20, 48, 79, .6);
  overflow: hidden;
}
.ls-studio-mark img { width: 180px; height: 180px; display: block; border-radius: 24px; }

/* --------------------------------------------------- contact channels ----- */

.ls-body .ls-channel {
  display: flex; align-items: center; gap: 14px;
  background: var(--ls-white); border: 1px solid var(--ls-line);
  border-radius: var(--ls-radius); padding: 18px 20px;
  color: var(--ls-ink); min-height: 92px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.ls-body .ls-channel:hover {
  border-color: var(--ls-blue); transform: translateY(-3px);
  box-shadow: var(--ls-shadow-sm); color: var(--ls-ink);
}
.ls-channel__icon {
  width: 52px; height: 52px; border-radius: 16px; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.ls-channel__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ls-channel__label {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ls-ink-4);
}
.ls-channel__value {
  font-size: 16px; font-weight: 800; color: var(--ls-navy);
  margin-top: 2px; overflow-wrap: anywhere;
}
.ls-channel__hint { font-size: 12.5px; font-weight: 500; color: var(--ls-ink-3); margin-top: 2px; }
.ls-channel__go { color: var(--ls-ink-4); font-size: 13px; flex: none; }
.ls-body .ls-channel:hover .ls-channel__go { color: var(--ls-blue); }

@media (max-width: 640px) {
  .ls-footer__bar { justify-content: center; text-align: center; }
  .ls-studio-bar { padding: 20px 16px 24px; }
  .ls-body .ls-powered { width: 100%; justify-content: center; padding: 12px 16px; gap: 12px; }
  .ls-powered__cta { padding-left: 12px; font-size: 12.5px; }
  .ls-powered__name { font-size: 18px; }
  .ls-studio-mark { width: 168px; height: 168px; border-radius: 32px; }
  .ls-studio-mark img { width: 136px; height: 136px; }
  .ls-body .ls-channel { padding: 16px; min-height: 84px; }
}