/* Custom Styles */

/* ==========================================================================
   Lingomelo :: Library
   Tokens below are measured from the live brand at lingomelo.com, so the
   members area at app.lingomelo.com reads as the same product.
   Class names are emitted by sections/products.liquid + snippets/library_card.liquid.
   ========================================================================== */

/* --- Brand tokens ------------------------------------------------------- */
:root {
  /* Build stamp. Check which build is live from the browser console:
     getComputedStyle(document.documentElement).getPropertyValue('--sk-build') */
  --sk-build: "lm-site5";

  /* Surfaces */
  --sk-cream:     #f0eeeb;   /* page background */
  --sk-cream-2:   #e7e4df;   /* alternate band */
  --sk-white:     #ffffff;   /* cards, header */

  /* Brand greens */
  --sk-teal:      #144443;   /* primary, headings, filled pills */
  --sk-teal-deep: #144443;   /* dark sections */
  --sk-teal-ink:  #0f3534;   /* the brand hero's bottom stop */
  --sk-teal-mid:  #1c6a67;   /* eyebrows, small accents */
  --sk-lime:      #ff7f46;   /* accent, primary CTA on dark */
  --sk-lime-dim:  #f26a2e;   /* lime hover */

  /* Text */
  --sk-ink:       #1d1d1d;   /* body copy, card titles */
  --sk-muted:     #5e5b57;   /* meta, secondary copy (warm, not grey-blue) */
  --sk-line:      #e1ded9;   /* hairlines */

  /* Status */
  --sk-coral:     #e56666;   /* the brand's badge red */
  --sk-done:      #1f8a5f;

  /* Shape: the brand is fully rounded. 24px cards, pill everything else. */
  --sk-r:         16px;
  --sk-r-sm:      10px;
  --sk-r-pill:    9999px;
  /* Lingomelo additions */
  --sk-on-accent:   #1d1d1d;   /* text on the orange: 6.7:1 (white was 2.5:1, unreadable) */
  --sk-accent-soft: #ffb892;   /* orange used as text on the dark green (4.5:1+) */
  --sk-star:        #fec132;   /* rating stars */
  --sk-red:         linear-gradient(9deg, #c3130a, #d92b22);   /* header / card pill CTA */
  --sk-night:       #080b11;   /* footer */
  --sk-r-btn:       10px;

  --sk-shadow:    0 1px 2px rgba(20,68,67,.04), 0 6px 20px rgba(20,68,67,.06);
  --sk-shadow-lg: 0 2px 4px rgba(20,68,67,.05), 0 18px 44px rgba(20,68,67,.12);

  --sk-gap: 24px;
  --sk-max: 1260px;
}

/* --- Guard against the theme's sticky-header script ---------------------- */
/* scripts.js runs $("header").addClass("header--fixed") on every scroll, and
   .header--fixed is position:fixed;z-index:9999;top:0. The Library markup uses
   a section element so this never matches, but if the markup is ever changed
   back to a header element this keeps the page from pinning. */
.sk-library .header--fixed,
.sk-dash.header--fixed {
  position: relative !important;   /* relative, not static: .sk-dash needs a
                                      containing block for its glow layers */
  top: auto !important;
  z-index: auto !important;
  box-shadow: none !important;
}

/* --- Page shell --------------------------------------------------------- */
.sk-library {
  background: var(--sk-cream);
  color: var(--sk-ink);
  font-family: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 96px;
}
.sk-library *, .sk-library *::before, .sk-library *::after { box-sizing: border-box; }
.sk-wrap { max-width: var(--sk-max); margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .sk-wrap { padding: 0 40px; } }

/* --- Dashboard header --------------------------------------------------- */
/* The brand gets its depth from a tonal gradient plus two large blurred
   colour glows (teal 25% / blur 120px, lime 10% / blur 110px), painted on the
   live site with absolutely positioned divs. Same result, built as layered
   radial-gradients so no extra DOM and no pseudo-elements are needed. */
.sk-dash {
  position: relative;
  overflow: hidden;
  background-color: var(--sk-teal-deep);
  background-image:
    radial-gradient(58% 52% at 50% -12%, rgba(44,122,117,.42), transparent 68%),
    radial-gradient(30% 46% at -4% 34%, rgba(255,127,70,.13), transparent 70%),
    linear-gradient(to bottom, var(--sk-teal-deep) 0%, var(--sk-teal-deep) 46%, #0f3534 100%);
  background-repeat: no-repeat;
  color: #fff;
  padding: 56px 0 0;
}
.sk-dash__top {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 34px;
}
@media (min-width: 900px) {
  .sk-dash__top {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 48px;
    padding-bottom: 42px;
  }
}
.sk-dash__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sk-accent-soft);
  margin: 0 0 12px;
}
.sk-dash__title {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.06;
  font-weight: 600;
  letter-spacing: -.028em;
  margin: 0 0 14px;
  color: #fff;
}
.sk-dash__sub {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255,255,255,.78);
  margin: 0;
  max-width: 52ch;
}

/* Stats */
.sk-stats {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 28px;
  flex-shrink: 0;
  justify-content: start;
}
@media (min-width: 900px) { .sk-stats { gap: 40px; } }
.sk-stat__n {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--sk-accent-soft);
}
.sk-stat__l {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-top: 5px;
}

/* --- Continue learning -------------------------------------------------- */
.sk-resume {
  display: grid;
  gap: 20px;
  padding-bottom: 44px;
}
@media (min-width: 900px) { .sk-resume { grid-template-columns: 1.55fr 1fr; gap: 24px; align-items: stretch; } }

.sk-resume__card {
  display: flex;
  flex-direction: column;
  background: var(--sk-white);
  border-radius: var(--sk-r);
  overflow: hidden;
  box-shadow: var(--sk-shadow-lg);
  text-decoration: none;
  color: inherit;
  transition: transform .18s ease;
}
@media (min-width: 560px) { .sk-resume__card { flex-direction: row; align-items: stretch; } }

.sk-resume__media {
  position: relative;
  flex-shrink: 0;
  background: var(--sk-cream-2);
  aspect-ratio: 16 / 9;
}
@media (min-width: 560px) { .sk-resume__media { width: 236px; aspect-ratio: auto; } }
.sk-resume__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-resume__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: var(--sk-lime);
  display: grid;
  place-items: center;
  box-shadow: 0 4px 18px rgba(15,53,52,.32);
}
.sk-resume__play svg { width: 18px; height: 18px; fill: var(--sk-teal); margin-left: 3px; }

.sk-resume__body {
  flex: 1;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.sk-resume__status {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sk-teal-mid);
  margin: 0 0 9px;
}
.sk-resume__course { font-size: 13px; font-weight: 400; color: var(--sk-muted); margin: 0 0 5px; }
.sk-resume__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: -.01em;
  color: var(--sk-ink);
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-resume__meter { display: flex; align-items: center; gap: 12px; }
.sk-resume__meter .sk-bar { flex: 1; }
.sk-resume__pct { font-size: 13px; font-weight: 600; color: var(--sk-teal); flex-shrink: 0; }

/* --- Quick actions ------------------------------------------------------ */
.sk-actions { display: grid; gap: 12px; align-content: stretch; }
.sk-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--sk-r-sm);
  text-decoration: none;
  color: #fff;
  transition: background .16s ease, border-color .16s ease;
  flex: 1;
}
.sk-action:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.38); color: #fff; }
/* The brand's primary CTA on dark is lime with teal text. */
.sk-action--primary { background: var(--sk-lime); border-color: var(--sk-lime); color: var(--sk-on-accent); }
.sk-action--primary:hover { background: var(--sk-lime-dim); border-color: var(--sk-lime-dim); color: var(--sk-on-accent); }
.sk-action__icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.13);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sk-action--primary .sk-action__icon { background: rgba(20,68,67,.12); }
.sk-action__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sk-action__t { display: block; font-size: 15px; font-weight: 600; line-height: 1.3; }
.sk-action__d { display: block; font-size: 13px; line-height: 1.4; opacity: .72; margin-top: 3px; }

/* --- Progress bar ------------------------------------------------------- */
.sk-bar { height: 6px; border-radius: var(--sk-r-pill); background: var(--sk-line); overflow: hidden; }
.sk-bar__fill {
  height: 100%;
  border-radius: var(--sk-r-pill);
  background: var(--sk-teal);
  transition: width .4s ease;
}
.sk-bar__fill--done { background: var(--sk-done); }

/* --- First-login orientation --------------------------------------------- */
/* A dark card carrying the same depth recipe as the dashboard, so it reads as
   a deliberate moment rather than a dismissible beige notice. Numbers are real
   typography, not badges. No connector rules between steps. */
.sk-orient {
  position: relative;
  overflow: hidden;
  background-color: var(--sk-teal-deep);
  background-image:
    radial-gradient(46% 60% at 88% -10%, rgba(44,122,117,.5), transparent 68%),
    radial-gradient(30% 70% at -2% 108%, rgba(255,127,70,.14), transparent 70%),
    linear-gradient(to bottom, var(--sk-teal-deep), var(--sk-teal-ink));
  background-repeat: no-repeat;
  border-radius: var(--sk-r-lg);
  box-shadow: var(--sk-shadow-lg);
  color: #fff;
  padding: 34px 26px;
  margin: 48px 0 0;
}
@media (min-width: 900px) { .sk-orient { padding: 44px 44px 40px; } }

.sk-orient__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 34px;
}
.sk-orient__eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--sk-accent-soft);
  margin: 0 0 12px;
}
.sk-orient__title {
  font-size: clamp(23px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -.026em;
  line-height: 1.14;
  color: #fff;
  margin: 0 0 10px;
}
.sk-orient__sub {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.66);
  margin: 0;
  max-width: 56ch;
}

.sk-orient__steps {
  display: grid;
  gap: 26px 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}
@media (min-width: 620px) { .sk-orient__steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .sk-orient__steps { grid-template-columns: repeat(5, 1fr); gap: 28px; } }

.sk-orient__step {
  display: grid;
  gap: 7px;
  align-content: start;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.sk-orient__num {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--sk-accent-soft);
  line-height: 1;
}
.sk-orient__label {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.012em;
  line-height: 1.32;
  color: #fff;
}
.sk-orient__note {
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,.58);
}

.sk-orient__close {
  flex-shrink: 0;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--sk-r-pill);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.82);
  padding: 9px 18px;
  margin: 0;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.sk-orient__close:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.34);
  color: #fff;
}

/* --- Toolbar: search + path pills ---------------------------------------- */
.sk-toolbar { padding: 52px 0 0; }
.sk-toolbar__row {
  display: flex; flex-direction: column; gap: 16px; margin-bottom: 22px;
}
@media (min-width: 900px) {
  .sk-toolbar__row { flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
}
.sk-toolbar__title {
  font-size: 30px; font-weight: 600; letter-spacing: -.02em;
  margin: 0; color: var(--sk-teal);
}
.sk-toolbar__count { font-size: 15px; font-weight: 400; color: var(--sk-muted); margin-left: 12px; }

.sk-search { position: relative; flex-shrink: 0; width: 100%; }
@media (min-width: 900px) { .sk-search { width: 320px; } }
.sk-search__input {
  width: 100%; height: 48px;
  padding: 0 40px 0 44px;
  font: inherit; font-size: 15px;
  color: var(--sk-ink);
  background: var(--sk-white);
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-pill);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.sk-search__input::placeholder { color: var(--sk-muted); }
/* Suppress the native search clear control: the theme ships its own. */
.sk-search__input::-webkit-search-cancel-button,
.sk-search__input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.sk-search__input:focus { border-color: var(--sk-teal-mid); box-shadow: 0 0 0 4px rgba(44,122,117,.12); }
.sk-search__icon {
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: none; stroke: var(--sk-muted); stroke-width: 2;
  pointer-events: none;
}
.sk-search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--sk-cream-2); color: var(--sk-muted);
  cursor: pointer; display: none; place-items: center;
  font-size: 16px; line-height: 1;
}
.sk-search.is-filled .sk-search__clear { display: grid; }

/* Pills match the brand's course tabs exactly: filled teal when active,
   white with the card shadow when not. */
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 20px;
  font: inherit; font-size: 14px; font-weight: 600;
  color: var(--sk-ink);
  background: var(--sk-white);
  border: 0;
  border-radius: var(--sk-r-pill);
  box-shadow: var(--sk-shadow);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.sk-chip__n {
  font-size: 12px; font-weight: 700;
  color: var(--sk-muted);
  background: var(--sk-cream-2);
  border-radius: var(--sk-r-pill);
  padding: 1px 8px;
}
.sk-chip[aria-pressed="true"] { background: var(--sk-teal); color: #fff; }
.sk-chip[aria-pressed="true"] .sk-chip__n { background: rgba(255,255,255,.18); color: #fff; }

/* --- Path groups --------------------------------------------------------- */
.sk-group { padding-top: 48px; }
.sk-group__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.sk-group__title {
  font-size: 21px; font-weight: 600; letter-spacing: -.02em;
  margin: 0; color: var(--sk-teal);
}
.sk-group__n { font-size: 14px; font-weight: 400; color: var(--sk-muted); }

.sk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sk-gap);
}

/* --- Course card --------------------------------------------------------- */
.sk-card {
  display: flex;
  flex-direction: column;
  background: var(--sk-white);
  border: 0;
  border-radius: var(--sk-r);
  overflow: hidden;
  box-shadow: var(--sk-shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  height: 100%;
}
.sk-card { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1); }
.sk-card__media { text-decoration: none; }
.sk-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--sk-cream-2);
  overflow: hidden;
}
.sk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.sk-card__tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 12px; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--sk-teal);
  background: rgba(255,255,255,.95);
  border-radius: var(--sk-r-pill);
  padding: 6px 12px;
}
.sk-card__done {
  position: absolute; top: 12px; right: 12px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--sk-done);
  display: grid; place-items: center;
}
.sk-card__done svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 2.6; fill: none; }

.sk-card__body { flex: 1; display: flex; flex-direction: column; padding: 20px; }
.sk-card__title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.375;
  letter-spacing: -.01em;
  color: var(--sk-ink);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-card__title a { color: inherit; text-decoration: none; }
.sk-card__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--sk-muted);
  margin: 0 0 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sk-card__foot { margin-top: auto; }
.sk-card__meter {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--sk-line);
}
.sk-card__meter .sk-bar { flex: 1; }
.sk-card__pct {
  font-size: 12px; font-weight: 700; color: var(--sk-teal);
  flex-shrink: 0; min-width: 30px; text-align: right;
}
.sk-card__btn {
  display: block; width: 100%;
  height: 44px; line-height: 44px;
  text-align: center;
  font-size: 14px; font-weight: 600;
  color: #fff;
  background: var(--sk-teal);
  border-radius: var(--sk-r-pill);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
/* Lime is the brand's single hero CTA. A grid of 89 lime buttons drowns it,
   so every card button is teal and lime is the hover reward. */
.sk-card--notstarted .sk-card__btn { background: var(--sk-teal); color: #fff; }

/* --- Empty state --------------------------------------------------------- */
.sk-empty {
  display: none;
  text-align: center;
  padding: 72px 20px;
  background: var(--sk-white);
  border-radius: var(--sk-r);
  box-shadow: var(--sk-shadow);
  margin-top: 36px;
}
.sk-empty.is-shown { display: block; }
.sk-empty__t { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 0 0 8px; color: var(--sk-teal); }
.sk-empty__d { font-size: 15px; color: var(--sk-muted); margin: 0 0 22px; }
.sk-empty__btn {
  display: inline-block; height: 46px; line-height: 46px; padding: 0 26px;
  font: inherit; font-size: 15px; font-weight: 600;
  color: var(--sk-on-accent); background: var(--sk-lime);
  border: 0; border-radius: var(--sk-r-pill); cursor: pointer; text-decoration: none;
}
.sk-empty__btn:hover { background: var(--sk-lime-dim); }

.sk-is-hidden { display: none !important; }

/* --- Visually hidden ----------------------------------------------------- */
.sk-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- Staging wrapper ------------------------------------------------------ */
/* Cards render flat into #sk-source, then library_js moves them into path
   groups. Without JS the flat list is still a usable grid. */
#sk-source {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--sk-gap);
  padding-top: 32px;
}
#sk-source:not(:has(.sk-card)) { display: block; padding-top: 0; }

/* ==========================================================================
   Lingomelo :: Log in
   Two panels: brand on the left, form on the right. Collapses to the form
   alone on mobile with a compact brand strip above it.
   ========================================================================== */

.sk-auth {
  background: var(--sk-cream);
  color: var(--sk-ink);
  font-family: 'Noto Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.sk-auth *, .sk-auth *::before, .sk-auth *::after { box-sizing: border-box; }

.sk-auth__grid { display: grid; grid-template-columns: 1fr; min-height: 78vh; }
@media (min-width: 900px) {
  .sk-auth__grid { grid-template-columns: 1.05fr 1fr; min-height: calc(100vh - 80px); }
  .sk-auth__grid--solo { grid-template-columns: 1fr; }
}

/* --- Brand panel --------------------------------------------------------- */
.sk-auth__brand {
  background: var(--sk-teal-deep);
  color: #fff;
  display: flex;
  padding: 36px 24px;
}
@media (min-width: 900px) { .sk-auth__brand { padding: 64px 56px; } }
.sk-auth__brandinner {
  display: flex;
  flex-direction: column;
  gap: 28px;
  justify-content: space-between;
  width: 100%;
  max-width: 520px;
  margin-left: auto;
}
@media (min-width: 900px) { .sk-auth__brandinner { gap: 48px; } }
.sk-auth__brandlogo { width: 190px; height: auto; display: block; }
.sk-auth__brandtitle {
  font-size: 28px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 14px;
}
@media (min-width: 900px) { .sk-auth__brandtitle { font-size: 38px; } }
.sk-auth__brandbody {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255,255,255,.76);
  margin: 0;
  max-width: 46ch;
}
.sk-auth__points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; }
.sk-auth__points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.45;
  color: rgba(255,255,255,.9);
}
.sk-auth__points svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 1px;
  padding: 4px;
  border-radius: 50%;
  background: var(--sk-lime);
  stroke: var(--sk-on-accent);
  stroke-width: 3.2;
  fill: none;
}
.sk-auth__footnote { font-size: 13px; color: rgba(255,255,255,.55); margin: 0; }

/* --- Form panel ---------------------------------------------------------- */
.sk-auth__panel { display: flex; align-items: center; justify-content: center; padding: 44px 20px 64px; }
@media (min-width: 900px) { .sk-auth__panel { padding: 64px 48px; } }
.sk-auth__form { width: 100%; max-width: 420px; }
.sk-auth__logo { margin-bottom: 26px; }
.sk-auth__logo img { max-width: 100%; height: auto; display: block; }
.sk-auth__eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--sk-teal-mid);
  margin: 0 0 10px;
}
.sk-auth__title {
  font-size: 34px; font-weight: 600;
  line-height: 1.1; letter-spacing: -.02em;
  color: var(--sk-teal);
  margin: 0 0 10px;
}
.sk-auth__sub { font-size: 16px; line-height: 1.55; color: var(--sk-muted); margin: 0 0 30px; }

.sk-auth__alert {
  background: #fdeaea;
  color: #8e2b2b;
  border-radius: var(--sk-r-sm);
  padding: 13px 16px;
  font-size: 14px;
  line-height: 1.45;
  margin-bottom: 20px;
}

.sk-field { margin-bottom: 18px; }
.sk-field__label {
  display: block;
  font-size: 14px; font-weight: 600;
  color: var(--sk-ink);
  margin-bottom: 7px;
}
.sk-field__input {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  font: inherit;
  font-size: 16px;
  color: var(--sk-ink);
  background: #fff;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-r-sm);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.sk-field__input::placeholder { color: #a9a294; }
.sk-field__input:focus { border-color: var(--sk-teal-mid); box-shadow: 0 0 0 4px rgba(44,122,117,.12); }

.sk-auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 4px 0 26px;
}
.sk-check { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.sk-check__box {
  width: 18px; height: 18px;
  margin: 0;
  accent-color: var(--sk-teal);
  cursor: pointer;
  flex-shrink: 0;
}
.sk-check__label { font-size: 14px; color: var(--sk-ink); }
.sk-auth__link { font-size: 14px; font-weight: 600; color: var(--sk-teal-mid); text-decoration: none; }
.sk-auth__link:hover { color: var(--sk-teal); text-decoration: underline; }

.sk-auth__btn {
  display: block;
  width: 100%;
  height: 52px;
  font: inherit;
  font-size: 16px; font-weight: 600;
  color: #fff;
  background: var(--sk-teal);
  border: 0;
  border-radius: var(--sk-r-pill);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.sk-auth__btn:hover { background: var(--sk-lime); color: var(--sk-on-accent); }

.sk-auth__help { font-size: 14px; color: var(--sk-muted); margin: 24px 0 0; text-align: center; }
.sk-auth__help a { color: var(--sk-teal-mid); font-weight: 600; text-decoration: none; }
.sk-auth__help a:hover { text-decoration: underline; }

/* --- Premium detail ------------------------------------------------------ */
.sk-library ::selection { background: var(--sk-lime); color: var(--sk-on-accent); }
.sk-library :focus-visible {
  outline: 2px solid var(--sk-teal-mid);
  outline-offset: 3px;
  border-radius: 6px;
}
.sk-library {  -moz-osx-font-smoothing: grayscale; }
@media (prefers-reduced-motion: reduce) {
  .sk-library *, .sk-auth * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Lingomelo :: shared block components
   These classes are emitted by sections/section.liquid and its block snippets,
   so everything here lands on /courses, the homepage, about, pricing and the
   37 course sales pages at once.

   Block radius is NOT set here: block_styles.liquid writes
   `#block-{id} .block { border-radius: ... }`, an id selector this file cannot
   outrank. That value lives in config/settings_data.json instead.
   ========================================================================== */

/* The theme's shadows are neutral black. The brand tints its shadow with the
   teal, which is most of why its cards look expensive rather than cheap. */
.box-shadow-small {
  -webkit-box-shadow: 0 1px 2px rgba(20,68,67,.04), 0 3px 10px rgba(20,68,67,.05);
          box-shadow: 0 1px 2px rgba(20,68,67,.04), 0 3px 10px rgba(20,68,67,.05);
}
.box-shadow-medium {
  -webkit-box-shadow: 0 1px 2px rgba(20,68,67,.04), 0 6px 20px rgba(20,68,67,.06);
          box-shadow: 0 1px 2px rgba(20,68,67,.04), 0 6px 20px rgba(20,68,67,.06);
}
.box-shadow-large {
  -webkit-box-shadow: 0 2px 6px rgba(20,68,67,.05), 0 24px 56px rgba(20,68,67,.13);
          box-shadow: 0 2px 6px rgba(20,68,67,.05), 0 24px 56px rgba(20,68,67,.13);
}

/* Course cards: same silhouette and motion as the brand's own cards. */
.card { transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1); }
.card:hover { transform: translateY(-3px); }
.card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.card__body { padding: 22px; }
.card__text {
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: -.008em;
  color: var(--sk-muted);
  margin-bottom: 1.15rem;
}

/* Course titles inside a card are authored as heading tags, so without this
   they inherit the PAGE heading scale: h5 is 20px, h3 is 30px. In a 270px
   column that overflows and the theme's word-break chops words mid-syllable.
   Card headings get a card-sized scale instead. */
.card__text h1,
.card__text h2,
.card__text h3,
.card__text h4,
.card__text h5,
.card__text h6 {
  font-size: 17px;
  line-height: 1.34;
  letter-spacing: -.016em;
  font-weight: 600;
  color: var(--sk-ink);
  margin: 0 0 12px;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: none;
}

.card__text p { font-size: 14px; line-height: 1.5; color: var(--sk-muted); margin: 0 0 .5rem; }
.card__text p:last-child { margin-bottom: 0; }
.card__text strong, .card__text b { font-weight: 600; color: var(--sk-ink); }

/* The bullet lists are course facts: hours, students, level. Quiet them down
   so the title carries the card. */
/* Three short facts read cleaner as a tight stack than as a bulleted list. */
.card__text ul { list-style: none; margin: 0; padding-left: 0; }
.card__text ol { margin: 0; padding-left: 17px; }
.card__text li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--sk-muted);
  margin-bottom: 4px;
  word-break: normal;
  overflow-wrap: break-word;
}
.card__text li:last-child { margin-bottom: 0; }
.card__text li::marker { color: var(--sk-line); }
.card__footer { font-size: 14px; font-weight: 500; color: var(--sk-muted); }
.card__button {
  border-radius: var(--sk-r-pill) !important;
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background-color .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1);
}

/* Section headings on block-built pages: the brand's tight, confident scale. */
.section h1, .section h2, .section h3, .section h4 {
  letter-spacing: -.024em;
  font-weight: 600;
}
.section h2 { line-height: 1.12; }

/* Buttons everywhere on block-built pages. The editor still owns the colour;
   only the shape and weight are normalised to the brand. */
.section .btn {
  font-weight: 600;
  letter-spacing: -.005em;
  transition: background-color .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1),
              border-color .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1);
}
.section .btn:hover { filter: none; transform: translateY(-1px); }
.section .btn:active { transform: translateY(0); }

/* Card grids align regardless of the section's "Equal Height Blocks" setting.
   Ragged button baselines are the single biggest reason a card grid reads as
   unfinished. */
.block-type--card { display: flex; }
.block-type--card > .block { width: 100%; display: flex; }
.block-type--card .card { height: 100%; width: 100%; flex-direction: column; }
.block-type--card .card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.block-type--card .card__text { flex: 1 1 auto; }
.block-type--card .card__button { margin-top: auto; margin-bottom: 0; }
.block-type--card .card__footer { margin-top: 14px; margin-bottom: 0; }

/* Emoji section headings sit better with a touch of air after them. */
.block-type--text h1, .block-type--text h2, .block-type--text h3 { letter-spacing: -.024em; }

/* The theme's grid sets .col-3 to a flat 25% from 768px upward, so between
   tablet and small laptop four course cards squeeze to roughly 150px wide and
   every title breaks mid-word. Card columns relax to two-up until there is
   genuinely room for four. Only card blocks are touched: other col-3 content
   (icons, logos, short text) is fine at 25%. */
@media (min-width: 768px) and (max-width: 1199px) {
  .block-type--card.col-3 { width: 50%; }
}
@media (min-width: 768px) and (max-width: 899px) {
  .block-type--card.col-4 { width: 50%; }
}

/* ==========================================================================
   Lingomelo :: homepage sections
   sk_hero, sk_course_grid, sk_features, sk_gallery, sk_band.
   Structure mirrors lingomelo.com: dark gradient hero with glow layers and
   a stats row, then cream sections with the brand card, then a dark CTA.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 52px; padding: 0 28px;
  font-family: 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 16px; font-weight: 600; letter-spacing: -.005em;
  border-radius: var(--sk-r-pill);
  border: 1px solid transparent;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .18s cubic-bezier(.4,0,.2,1), color .18s cubic-bezier(.4,0,.2,1),
              border-color .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.sk-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .18s ease; }
.sk-btn:hover { transform: translateY(-1px); text-decoration: none; }
.sk-btn:hover svg { transform: translateX(3px); }
.sk-btn--lime { background: var(--sk-lime); color: var(--sk-on-accent) !important; box-shadow: 0 8px 26px rgba(255,127,70,.28); }
.sk-btn--lime:hover { background: var(--sk-lime-dim); color: var(--sk-on-accent) !important; }
.sk-btn--teal { background: var(--sk-teal); color: #fff !important; box-shadow: 0 8px 24px rgba(20,68,67,.2); }
.sk-btn--teal:hover { background: var(--sk-lime); color: var(--sk-on-accent) !important; }
.sk-btn--ghost { background: transparent; color: #fff !important; border-color: rgba(255,255,255,.28); }
.sk-btn--ghost:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); color: #fff !important; }
.sk-btn--outline { background: #fff; color: var(--sk-teal) !important; border-color: var(--sk-line); }
.sk-btn--outline:hover { border-color: var(--sk-teal); color: var(--sk-teal) !important; }

/* --- Hero ---------------------------------------------------------------- */
.skh {
  position: relative;
  overflow: hidden;
  background-color: var(--sk-teal-deep);
  background-image:
    radial-gradient(62% 56% at 50% -16%, rgba(44,122,117,.46), transparent 68%),
    radial-gradient(28% 46% at -4% 38%, rgba(255,127,70,.14), transparent 70%),
    radial-gradient(24% 40% at 104% 70%, rgba(44,122,117,.30), transparent 70%),
    linear-gradient(to bottom, var(--sk-teal-deep) 0%, var(--sk-teal-deep) 48%, var(--sk-teal-ink) 100%);
  background-repeat: no-repeat;
  color: #fff;
  font-family: 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.skh__inner { text-align: center; padding-top: 112px; padding-bottom: 104px; }
@media (max-width: 767px) { .skh__inner { padding-top: 68px; padding-bottom: 64px; } }
.skh__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sk-accent-soft); margin: 0 0 22px;
}
.skh__title {
  font-size: clamp(38px, 6.2vw, 74px);
  font-weight: 600; line-height: 1.03; letter-spacing: -.032em;
  color: #fff; margin: 0 auto 24px; max-width: 16ch;
}
.skh-accent { color: var(--sk-accent-soft); }
.skh__sub {
  font-size: clamp(17px, 1.6vw, 20px); line-height: 1.55;
  color: rgba(255,255,255,.74);
  max-width: 58ch; margin: 0 auto;
}
.skh__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 38px; }
.skh__stats {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 18px 56px; margin: 56px 0 0; padding: 0;
}
@media (max-width: 560px) { .skh__stats { gap: 18px 30px; } }
.skh__stat { margin: 0; text-align: center; }
.skh__num {
  font-size: clamp(28px, 3vw, 38px); font-weight: 700; line-height: 1.05;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
  color: #fff; margin: 0;
}
.skh__label { font-size: 14px; line-height: 1.4; color: rgba(255,255,255,.62); margin: 6px 0 0; max-width: 22ch; }

/* --- Generic section ----------------------------------------------------- */
.sks { padding: 92px 0; font-family: 'Noto Sans', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
@media (max-width: 767px) { .sks { padding: 60px 0; } }
.sks--cream { background: transparent; }
.sks--band  { background: var(--sk-cream-2); }
.sks--white { background: #fff; }
.sks__head { text-align: center; max-width: 760px; margin: 0 auto 52px; }
@media (max-width: 767px) { .sks__head { margin-bottom: 36px; } }
.sks__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sk-teal-mid); margin: 0 0 14px;
}
.sks__title {
  font-size: clamp(30px, 3.8vw, 46px); font-weight: 600; line-height: 1.1;
  letter-spacing: -.026em; color: var(--sk-teal); margin: 0;
}
.sks__sub { font-size: 17px; line-height: 1.6; color: var(--sk-muted); margin: 16px auto 0; max-width: 60ch; }
.sks__more { text-align: center; margin-top: 44px; }

/* --- Course grid --------------------------------------------------------- */
.skg { display: grid; gap: 24px; grid-template-columns: 1fr; }
@media (min-width: 560px)  { .skg { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px)  { .skg { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .skg { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.skc {
  display: flex; flex-direction: column;
  background: #fff; border-radius: var(--sk-r); overflow: hidden;
  box-shadow: var(--sk-shadow);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.skc:hover { transform: translateY(-4px); box-shadow: var(--sk-shadow-lg); }
.skc__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sk-cream-2); }
.skc__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.skc:hover .skc__media img { transform: scale(1.045); }
.skc__badge {
  position: absolute; top: 12px; right: 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  color: #fff; background: var(--sk-coral);
  border-radius: var(--sk-r-pill); padding: 6px 12px;
}
.skc__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 20px; }
.skc__title { font-size: 18px; font-weight: 600; line-height: 1.34; letter-spacing: -.016em; margin: 0 0 8px; }
.skc__title a { color: var(--sk-ink); text-decoration: none; }
.skc__title a:hover { color: var(--sk-teal-mid); }
.skc__desc {
  font-size: 14px; line-height: 1.52; color: var(--sk-muted); margin: 0 0 20px;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.skc__btn {
  margin-top: auto;
  display: block; text-align: center;
  height: 44px; line-height: 44px;
  font-size: 14px; font-weight: 600;
  color: #fff !important; background: var(--sk-teal);
  border-radius: var(--sk-r-pill); text-decoration: none;
  transition: background-color .18s ease, color .18s ease;
}
.skc__btn:hover { background: var(--sk-lime); color: var(--sk-on-accent) !important; text-decoration: none; }

/* --- Features ------------------------------------------------------------ */
.skf { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .skf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .skf { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.skf__item {
  background: #fff; border-radius: var(--sk-r); box-shadow: var(--sk-shadow);
  padding: 30px 28px;
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
.skf__item:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow-lg); }
.skf__icon {
  display: inline-grid; place-items: center;
  width: 54px; height: 54px; border-radius: 16px;
  background: var(--sk-cream-2); font-size: 26px; line-height: 1;
  margin-bottom: 20px;
}
.skf__title { font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: -.018em; color: var(--sk-teal); margin: 0 0 10px; }
.skf__text { font-size: 15px; line-height: 1.6; color: var(--sk-muted); margin: 0; }

/* --- Gallery ------------------------------------------------------------- */
/* Natural fit keeps each screenshot's own shape, laid out as a masonry of
   columns so reviews of different lengths pack without ragged gaps. */
.skgal--natural { column-gap: 20px; column-count: 1; }
@media (min-width: 560px) { .skgal--natural { column-count: 2; } }
@media (min-width: 900px) { .skgal--natural.skgal--3 { column-count: 3; } .skgal--natural.skgal--4 { column-count: 3; } }
@media (min-width: 1200px) { .skgal--natural.skgal--4 { column-count: 4; } }
.skgal--natural .skgal__item { break-inside: avoid; margin-bottom: 20px; }
.skgal--cover { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .skgal--cover.skgal--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .skgal--cover.skgal--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.skgal--cover .skgal__item { aspect-ratio: 4 / 3; }
.skgal--cover .skgal__item img { height: 100%; object-fit: cover; }
.skgal__item {
  display: block; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: var(--sk-shadow);
  transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s cubic-bezier(.4,0,.2,1);
}
a.skgal__item:hover { transform: translateY(-3px); box-shadow: var(--sk-shadow-lg); }
.skgal__item img { width: 100%; height: auto; display: block; }

/* --- Content band -------------------------------------------------------- */
.skb { padding: 44px 0; font-family: 'Noto Sans', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.skb__card { text-align: center; border-radius: 28px; padding: 64px 28px; }
@media (min-width: 768px) { .skb__card { padding: 84px 64px; } }
.skb__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 14px; }
.skb__title { font-size: clamp(30px, 3.8vw, 46px); font-weight: 600; line-height: 1.1; letter-spacing: -.026em; margin: 0 auto; max-width: 20ch; }
.skb__text { font-size: 17px; line-height: 1.65; margin: 20px auto 0; max-width: 62ch; }
.skb__card .sk-btn { margin-top: 34px; }

.skb--light .skb__card { background: #fff; box-shadow: var(--sk-shadow); }
.skb--light .skb__eyebrow { color: var(--sk-teal-mid); }
.skb--light .skb__title { color: var(--sk-teal); }
.skb--light .skb__text { color: var(--sk-muted); }

.skb--dark { padding-bottom: 96px; }
.skb--dark .skb__card {
  position: relative; overflow: hidden;
  background-color: var(--sk-teal-deep);
  background-image:
    radial-gradient(52% 60% at 88% -14%, rgba(44,122,117,.5), transparent 68%),
    radial-gradient(34% 64% at -4% 110%, rgba(255,127,70,.16), transparent 70%),
    linear-gradient(to bottom, var(--sk-teal-deep), var(--sk-teal-ink));
  background-repeat: no-repeat;
  box-shadow: var(--sk-shadow-lg);
}
.skb--dark .skb__eyebrow { color: var(--sk-accent-soft); }
.skb--dark .skb__title { color: #fff; }
.skb--dark .skb__text { color: rgba(255,255,255,.72); }

/* The body carries .background-light, and the theme paints
   `.background-light h1..h6 { color: <heading colour> }` (0-1-1), which
   outranks a single class. Headings on the dark surfaces need one more class. */
.skh .skh__title { color: #fff; }
.skh .skh__title .skh-accent { color: var(--sk-accent-soft); }
.skb.skb--dark .skb__title { color: #fff; }
.skb.skb--light .skb__title,
.sks .sks__title { color: var(--sk-teal); }
.sks .skf__title { color: var(--sk-teal); }
.sks .skc__title a { color: var(--sk-ink); }

/* Balanced line breaks on display headings, so a short last word is never
   left alone on its own line. */
.skh__title, .sks__title, .skb__title, .skf__title, .skc__title { text-wrap: balance; }
.skh__sub, .sks__sub, .skb__text { text-wrap: pretty; }

/* On a phone three stats stacked one per row spend a full screen on three
   numbers. Keep them three-across and let the labels wrap. */
@media (max-width: 560px) {
  .skh__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; margin-top: 44px; }
  .skh__num { font-size: 26px; }
  .skh__label { font-size: 12px; max-width: none; }
}

/* ==========================================================================
   Login: responsive
   Measured on a 375x812 phone: the 397px brand panel sat above the form, so
   the password field started at 795px and the Sign in button at 913px, below
   the fold. Below 900px the form now comes first and the brand panel follows
   as supporting content.
   ========================================================================== */
@media (max-width: 899px) {
  .sk-auth__grid { display: flex; flex-direction: column; min-height: 0; }
  .sk-auth__panel { order: 1; padding: 32px 20px 44px; align-items: flex-start; }
  .sk-auth__brand { order: 2; padding: 40px 20px 44px; }
  .sk-auth__brandinner { max-width: 560px; margin: 0 auto; gap: 22px; }
  .sk-auth__brandlogo { display: none; }            /* the site header already carries it */
  .sk-auth__brandtitle { font-size: 24px; }
  .sk-auth__form { max-width: 480px; margin: 0 auto; }
  .sk-auth__title { font-size: 30px; }
  .sk-auth__sub { margin-bottom: 24px; }
}
/* "Keep me signed in" and "Forgot password?" collide on the narrowest phones. */
.sk-auth__row { flex-wrap: wrap; row-gap: 12px; }

/* ==========================================================================
   Footer: the login brand-panel style, site-wide
   footer.footer (0-1-1) outranks the theme's inline `.footer { background-color }`
   (0-1-0), so this holds whatever the footer's saved background setting is.
   ========================================================================== */
footer.footer {
  position: relative;
  overflow: hidden;
  background-color: var(--sk-teal-deep);
  background-image:
    radial-gradient(48% 90% at 100% -20%, rgba(44,122,117,.45), transparent 68%),
    radial-gradient(30% 90% at -4% 120%, rgba(255,127,70,.12), transparent 70%),
    linear-gradient(to bottom, var(--sk-teal-deep), var(--sk-teal-ink));
  background-repeat: no-repeat;
  color: rgba(255,255,255,.72);
  font-family: 'Noto Sans', ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
footer.footer .footer__content { padding: 56px 0 44px; }
@media (max-width: 767px) { footer.footer .footer__content { padding: 44px 0 36px; } }

/* The footer logo is a dark wordmark image; render it white on the dark band. */
footer.footer .logo__image { filter: brightness(0) invert(1); opacity: .95; }
footer.footer .logo__text { color: #fff; }

footer.footer .footer__block,
footer.footer p,
footer.footer span { color: rgba(255,255,255,.72); }
footer.footer a.link-list__link {
  color: rgba(255,255,255,.82);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: color .16s ease;
}
footer.footer a.link-list__link:hover { color: var(--sk-accent-soft); text-decoration: none; }
footer.footer .copyright { color: rgba(255,255,255,.6); font-size: 14px; }   /* .5 measured 4.7:1, too close to AA */
footer.footer .social-icons a,
footer.footer .social-icons .fa,
footer.footer .social-icons svg { color: rgba(255,255,255,.82); fill: currentColor; }
footer.footer .social-icons a:hover .fa,
footer.footer .social-icons a:hover svg { color: var(--sk-accent-soft); }

/* Mobile: stack and centre, so the three blocks never cramp side by side. */
@media (max-width: 767px) {
  footer.footer .footer__container { flex-direction: column; align-items: center; text-align: center; gap: 18px; }
  footer.footer .footer__block { width: 100%; justify-content: center; text-align: center; }
  footer.footer .link-list__links { justify-content: center; }
}

/* Inline field errors on the password pages. #b3261e on white is 6.4:1. */
.sk-field__error { font-size: 13px; line-height: 1.45; color: #b3261e; margin: 7px 0 0; }

/* Footer links measured 18px tall: too small to hit with a thumb. The visible
   text is unchanged; the hit area grows to 44px. */
footer.footer a.link-list__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
}

/* ==========================================================================
   Heading colours, pinned to their surface
   The site background is cream, so <body> carries .background-light, and the
   theme paints `.background-light h1..h6` teal at specificity 0-1-1. That beat
   every single-class heading colour here and turned the headings on the dark
   panels teal-on-teal. Every heading in these components is pinned at 0-2-0.
   ========================================================================== */
/* On dark surfaces */
.sk-library .sk-dash__title,
.sk-library .sk-orient__title,
.sk-auth .sk-auth__brandtitle,
.skh .skh__title,
.skb--dark .skb__title { color: #fff; }
.skh .skh__title .skh-accent { color: var(--sk-accent-soft); }

/* On cream */
.sk-auth .sk-auth__title,
.sk-library .sk-toolbar__title,
.sk-library .sk-group__title,
.sks .sks__title,
.skb--light .skb__title,
.sks .skf__title { color: var(--sk-teal); }

/* On white cards */
.sk-library .sk-resume__title,
.sk-library .sk-card__title,
.sks .skc__title { color: var(--sk-ink); }

/* The primary action is teal text on lime; at .72 opacity its subtitle
   measured 4.1:1. On lime it needs to be nearly solid. */
.sk-library .sk-action--primary .sk-action__d { opacity: .9; }

/* ==========================================================================
   Lingomelo :: contact page (sk_contact)
   Values measured from lingomelo.com/contact-us:
   hero band #e7e4df, 64px vertical padding, h1 30px (48px from 768px) / 600,
   intro 18/28 #5e5b57 max 672px; cards grid max 768px, 20px gap, two columns
   from 640px; card white, radius 16, padding 28, shadow-sm + 5% hairline;
   card title 18/700 ink; text 16/24 muted; link 16/600 teal-mid.
   ========================================================================== */
.skct { font-family: 'Noto Sans', ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.skct__hero { background: var(--sk-cream-2); }
.skct__heroinner { text-align: center; padding-top: 64px; padding-bottom: 64px; }
.skct__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sk-teal-mid); margin: 0 0 14px;
}
.skct .skct__title {
  font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em;
  color: var(--sk-teal); margin: 0; text-wrap: balance;
}
@media (min-width: 768px) { .skct .skct__title { font-size: 48px; line-height: 48px; } }
.skct__sub {
  font-size: 18px; line-height: 28px; color: var(--sk-muted);
  max-width: 672px; margin: 16px auto 0; text-wrap: pretty;
}

.skct__body { padding-top: 56px; padding-bottom: 56px; }
.skct__grid { display: grid; gap: 20px; grid-template-columns: 1fr; max-width: 768px; margin: 0 auto; }
@media (min-width: 640px) { .skct__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skct__card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.05);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
}
.skct .skct__cardtitle { font-size: 18px; line-height: 1.4; font-weight: 700; letter-spacing: -.02em; color: var(--sk-ink); margin: 0; }
.skct__cardtext { font-size: 16px; line-height: 24px; color: var(--sk-muted); margin: 8px 0 0; }
.skct__link {
  display: inline-block; margin-top: 16px;
  font-size: 16px; font-weight: 600; color: var(--sk-teal-mid); text-decoration: none;
  word-break: break-word;
}
.skct__link:hover { color: var(--sk-teal); text-decoration: underline; text-underline-offset: 3px; }
/* The reference contact page uses a 24px side gutter on phones (cards measure
   327px at 375px); the shared .sk-wrap uses 16px. Scoped to this page only. */
@media (max-width: 767px) {
  .skct .sk-wrap { padding-left: 24px; padding-right: 24px; }
}

/* A course card with no destination is a plain card: it must not lift, zoom
   or show a pointer, or it reads as a link that does nothing. */
.skc.skc--static,
.skc.skc--static:hover { transform: none; box-shadow: var(--sk-shadow); cursor: default; }
.skc.skc--static:hover .skc__media img { transform: none; }
.skc--static .skc__desc { margin-bottom: 0; }

/* Login alignment. Both halves line up with the site header: the brand copy
   starts on the same left edge as the header logo and the form ends on the
   same right edge as the header's Log In link. The header uses Encore's
   .container (max 1340px, 20px gutter under 768px, 40px above), so the same
   gutter is rebuilt here from the section's own width (cqw), not 100vw, which
   would include the scrollbar. Both blocks sit on one vertical centre, and the
   footnote stays under the points instead of being pushed to the bottom. */
.sk-auth { container-type: inline-size; --sk-gutter: 20px; }
@media (min-width: 768px) { .sk-auth { --sk-gutter: 40px; } }
.sk-auth__panel { padding-left: var(--sk-gutter); padding-right: var(--sk-gutter); }
.sk-auth__brand { padding-left: var(--sk-gutter); padding-right: var(--sk-gutter); }
.sk-auth__brandinner { margin: 0; max-width: 560px; }
@media (max-width: 899px) {
  .sk-auth__panel { justify-content: flex-start; }
  .sk-auth__form { max-width: 480px; margin: 0; }
}
@media (min-width: 900px) {
  .sk-auth { --sk-edge: calc(max(0px, (100cqw - 1340px) / 2) + var(--sk-gutter)); }
  .sk-auth__brand {
    align-items: center; justify-content: flex-start;
    padding: 64px 56px 64px 40px;
    padding-left: var(--sk-edge);
  }
  .sk-auth__brandinner { justify-content: center; gap: 28px; max-width: 460px; margin: 0; }
  .sk-auth__panel {
    align-items: center; justify-content: flex-end;
    padding: 64px 40px 64px 56px;
    padding-right: var(--sk-edge);
  }
  .sk-auth__form { max-width: 420px; margin: 0; }
  /* No brand panel: the form is the whole page, so centre it. */
  .sk-auth__grid--solo .sk-auth__panel { justify-content: center; padding-left: var(--sk-edge); }
}

/* ==========================================================================
   Library: card interaction
   Each card was three links to the same course (image, title, button), so the
   card lifted over areas that did nothing, and four different hover effects
   (lift, image zoom, title colour, button colour) fired on different parts.
   Now the title link covers the whole card and one hover state drives
   everything: a 2px lift, a deeper shadow, a slow image zoom and the button
   turning lime. Hover only applies on devices that can hover, so a tap on a
   phone never leaves a card stuck in its hover state.
   ========================================================================== */
.sk-card { position: relative; cursor: pointer; }
.sk-card__link { color: inherit; text-decoration: none; }
.sk-card__link:hover, .sk-card__link:focus { color: inherit; text-decoration: none; }
/* Transparent hit area, the standard stretched link. Not decorative. */
.sk-card__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.sk-card__btn { cursor: pointer; }

/* Safari drops the rounded corners while a scaled image animates inside a
   transformed card. The media clips itself so the corners never flash. */
.sk-card__media {
  border-radius: var(--sk-r) var(--sk-r) 0 0;
  clip-path: inset(0 round var(--sk-r) var(--sk-r) 0 0);
  transform: translateZ(0);
}
.sk-card__media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }

.sk-card { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s cubic-bezier(.2,.7,.2,1); }
.sk-library .sk-card .sk-card__btn { transition: background-color .18s ease, color .18s ease; }

@media (hover: hover) and (pointer: fine) {
  .sk-card:hover { transform: translateY(-2px); box-shadow: var(--sk-shadow-lg); }
  .sk-card:hover .sk-card__media img { transform: scale(1.03); }
  /* Beats the section's editor colours, which print later with !important. */
  .sk-library .sk-card:hover .sk-card__btn,
  .sk-library .sk-card.sk-card--notstarted:hover .sk-card__btn {
    background: var(--sk-lime);
    color: var(--sk-on-accent) !important;
  }
  .sk-resume__card { transition: box-shadow .22s ease, transform .22s cubic-bezier(.2,.7,.2,1); }
  .sk-resume__card:hover { transform: translateY(-2px); box-shadow: 0 2px 6px rgba(20,68,67,.06), 0 28px 64px rgba(20,68,67,.16); }
  .sk-chip:not([aria-pressed="true"]):hover { background: var(--sk-cream-2); }
}
/* Press feedback everywhere, including touch. */
.sk-card:active { transform: translateY(0); box-shadow: var(--sk-shadow); transition-duration: .08s; }

/* Keyboard: the ring goes round the whole card, not the title text. */
.sk-library .sk-card__link:focus-visible { outline: none; }
.sk-library .sk-card:focus-within {
  outline: 2px solid var(--sk-teal-mid);
  outline-offset: 3px;
}
.sk-library .sk-card:focus-within:not(:has(:focus-visible)) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  .sk-card:hover, .sk-resume__card:hover { transform: none; }
  .sk-card:hover .sk-card__media img { transform: none; }
}


/* ==========================================================================
   Library: phones
   Measured at 375px: the path chips wrapped into a five-row wall, and every
   course was a full-width card with a 16:9 image, about 470px each, so a
   50-course library was over 23,000px of scrolling. On phones the chips
   become one swipeable row and each course is a compact row (thumbnail left,
   title, progress and action right), roughly 110px per course.
   ========================================================================== */
@media (max-width: 767px) {
  .sk-toolbar { padding-top: 40px; }
  .sk-group { padding-top: 32px; }
  .sk-group__head { margin-bottom: 14px; }
  .sk-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin: 0 -16px;
    padding: 4px 16px 12px;
    scroll-padding: 0 16px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sk-chips::-webkit-scrollbar { display: none; }
  .sk-chip { flex-shrink: 0; }
}

@media (max-width: 599px) {
  .sk-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .sk-card {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    column-gap: 14px;
    align-items: start;
    padding: 12px;
    border-radius: 18px;
    height: auto;
  }
  .sk-card__media {
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    clip-path: inset(0 round 12px);
  }
  .sk-card__done { top: 6px; right: 6px; width: 22px; height: 22px; }
  .sk-card__done svg { width: 12px; height: 12px; }
  .sk-card__body { padding: 1px 2px 1px 0; }
  .sk-card__title { font-size: 15px; line-height: 1.35; -webkit-line-clamp: 3; margin-bottom: 8px; }
  .sk-card__desc { display: none; }
  .sk-card__meter { padding-top: 0; border-top: 0; margin-bottom: 6px; gap: 8px; }
  .sk-card__pct { font-size: 11.5px; min-width: 0; }
  /* The whole row is the link, so the action reads as a label, not a button. */
  .sk-library .sk-card .sk-card__btn,
  .sk-library .sk-card.sk-card--notstarted .sk-card__btn {
    display: inline-block; width: auto; height: auto;
    line-height: 1.4; padding: 0;
    text-align: left;
    font-size: 13px; font-weight: 600;
    background: none !important;
    color: var(--sk-teal-mid) !important;
  }
  .sk-card:active { background: var(--sk-cream); }
}

/* ==========================================================================
   Library: resume card + link hover
   Encore's base CSS sets `a:hover { filter: brightness(115%) }` and
   `a { transition: all .1s }` on every link. The resume card and the quick
   actions are whole-card links, so hovering washed out the image, the grey
   text and the progress track. No link in the Library uses that filter now;
   each component has its own hover.
   The resume thumbnail was cropped edge to edge into a near-square, cutting
   the lesson slide's text. It is now an inset 16:9 frame, the slide's own
   shape, so nothing is cropped.
   ========================================================================== */
.sk-library a,
.sk-library a:hover,
.sk-library a:focus { filter: none; }
.sk-library a { transition-property: color, background-color, border-color, box-shadow, transform; transition-duration: .18s; }

@media (min-width: 560px) {
  .sk-resume__card { align-items: center; }
  .sk-resume__media {
    width: 44%;
    max-width: 340px;
    aspect-ratio: 16 / 9;
    margin: 14px 0 14px 14px;
    border-radius: 14px;
    overflow: hidden;
    clip-path: inset(0 round 14px);
    box-shadow: inset 0 0 0 1px rgba(20,68,67,.06);
    align-self: center;
  }
}
@media (max-width: 559px) {
  .sk-resume__media { margin: 12px 12px 0; border-radius: 14px; overflow: hidden; clip-path: inset(0 round 14px); }
}
.sk-resume__media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.sk-resume__play { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s ease; }
.sk-resume__meter .sk-bar { background: var(--sk-cream-2); }
.sk-resume__pct { font-weight: 700; }

@media (hover: hover) and (pointer: fine) {
  .sk-resume__card:hover .sk-resume__media img { transform: scale(1.03); }
  .sk-resume__card:hover .sk-resume__play { transform: scale(1.08); box-shadow: 0 8px 26px rgba(15,53,52,.38); }
  .sk-resume__card:hover .sk-resume__title { color: var(--sk-teal); }
}
.sk-resume__card:active { transform: translateY(0); transition-duration: .08s; }
.sk-resume__card:focus-visible { outline: 2px solid var(--sk-lime); outline-offset: 4px; }
/* Lesson slides are often white: a hairline frame keeps the thumbnail's edge
   visible on the white card, and the play button moves to the corner so it
   never sits on top of the slide's text. */
.sk-resume__media { outline: 1px solid rgba(20,68,67,.12); outline-offset: -1px; background: var(--sk-cream); }
.sk-resume__play {
  inset: auto auto 12px 12px;
  margin: 0;
  width: 44px; height: 44px;
}
.sk-resume__play svg { width: 16px; height: 16px; }
.sk-resume__media { outline: 0; padding: 6px; background: var(--sk-cream-2); }
.sk-resume__media img { border-radius: 9px; }
.sk-resume__play { inset: auto auto 16px 16px; }
/* Same brightness filter on the other custom components: each has its own
   hover already, and the filter washes out images and brand colours. */
a.sk-btn:hover, a.skc__btn:hover, a.skc__media:hover, a.skgal__item:hover,
a.skct__link:hover, a.sk-auth__link:hover { filter: none; }

/* ==========================================================================
   Lingomelo brand layer
   Measured from www.lingomelo.com: Noto Sans with 700 headings and normal
   tracking, flat deep green (#144443) hero and review bands, warm cream
   (#f0eeeb) page, orange CTA (#ff7f46, 10px corners, white text), red
   gradient pill on course cards, yellow stars (#fec132), near-black footer
   (#080b11). Everything above this block is the shared component system;
   this block only changes how the brand looks.
   ========================================================================== */

/* --- Type: bold headings, normal tracking. :not(#_) lifts specificity over
   the pinned heading colour rules without touching their colours. -------- */
:is(.sk-library, .sk-auth, .skh, .sks, .skb, .skct) :is(h1, h2, h3, h4, h5, h6):not(#_) {
  font-weight: 700;
  letter-spacing: -.01em;
}
.skh__title:not(#_) { letter-spacing: -.015em; line-height: 1.2; }

/* --- Buttons: the orange CTA is 10px, not a pill. ----------------------- */
.sk-btn, .sk-auth__btn, .sk-empty__btn, .skb__card .sk-btn { border-radius: var(--sk-r-btn); }
.sk-btn--lime { box-shadow: none; }
.sk-auth__btn { background: var(--sk-lime); color: var(--sk-on-accent); }
.sk-auth__btn:hover { background: var(--sk-lime-dim); color: var(--sk-on-accent); }
.sk-btn--outline { border-radius: var(--sk-r-btn); }

/* Course cards carry the red gradient pill, as on lingomelo.com/courses.
   On phones the card is a compact row and the action is a text label, so it
   takes the brand red as text instead (5.6:1 on white). */
@media (min-width: 600px) {
  .sk-library .sk-card .sk-card__btn,
  .sk-library .sk-card.sk-card--notstarted .sk-card__btn {
    background: #c9180e var(--sk-red);
    color: #fff !important;
    font-weight: 600;
  }
}
@media (max-width: 599px) {
  .sk-library .sk-card .sk-card__btn,
  .sk-library .sk-card.sk-card--notstarted .sk-card__btn { color: #d1160c !important; }
}
@media (hover: hover) and (pointer: fine) and (min-width: 600px) {
  .sk-library .sk-card:hover .sk-card__btn,
  .sk-library .sk-card.sk-card--notstarted:hover .sk-card__btn {
    background: #a8100a linear-gradient(9deg, #a8100a, #c4231b);
    color: #fff !important;
  }
}
.skc__btn { background: #c9180e var(--sk-red) !important; color: #fff !important; border-radius: var(--sk-r-pill); }

/* --- Flat green, like the brand hero (no glow layers). ------------------ */
.skh, .sk-dash, .skb--dark .skb__card, .sk-auth__brand {
  background-image: linear-gradient(to bottom, var(--sk-teal-deep), var(--sk-teal-ink)) !important;
}

/* --- Hero: split layout with the brand's photo collage ------------------ */
.skh__points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 10px; }
.skh__points li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: rgba(255,255,255,.9); }
.skh__points svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; fill: none; stroke: var(--sk-lime); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.skh--split .skh__eyebrow { letter-spacing: .02em; text-transform: none; font-size: 15px; color: #fff; }
.skh--split .skh__eyebrow { color: var(--sk-star); }
@media (min-width: 900px) {
  .skh--split .skh__inner {
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 56px; align-items: center; text-align: left;
    padding-top: 72px; padding-bottom: 72px;
  }
  .skh--split .skh__title { margin-left: 0; max-width: 17ch; font-size: clamp(40px, 4vw, 54px); }
  .skh--split .skh__sub { margin-left: 0; }
  .skh--split .skh__ctas { justify-content: flex-start; }
  .skh--split .skh__stats { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); justify-content: start; gap: 18px 40px; margin-top: 36px; }
  .skh--split .skh__stat { text-align: left; }
}
.skh__media img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
@media (max-width: 899px) {
  .skh--split .skh__points { max-width: 460px; margin-left: auto; margin-right: auto; text-align: left; }
  .skh__media { margin-top: 40px; }
  .skh__media img { max-width: 280px; }
}

/* --- Section heads: sentence case, no tracking on eyebrows -------------- */
.sks__eyebrow { letter-spacing: .06em; }

/* --- Cards: non-link cards don't lift (lifting says "click me"). --------- */
.skf__item:hover { transform: none; box-shadow: var(--sk-shadow); }
.skf__item, .skgal__item, .skc, .sk-card { border-radius: var(--sk-r); }

/* --- Captioned photo row ("How we get you fluent faster") --------------- */
.skgal--captioned.skgal--cover .skgal__item { aspect-ratio: auto; display: flex; flex-direction: column; }
.skgal--captioned.skgal--cover .skgal__item img { aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.skgal__cap { padding: 22px 24px 26px; }
.skgal__title:not(#_) { font-size: 20px; line-height: 1.3; color: var(--sk-ink); margin: 0 0 8px; }
.skgal__text { font-size: 15px; line-height: 1.6; color: var(--sk-muted); margin: 0; }
@media (max-width: 899px) { .skgal--captioned.skgal--cover { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; } }

/* --- Dark surface (review wall on the brand green) ---------------------- */
.sks--dark { background: var(--sk-teal-deep); }
.sks--dark .sks__title:not(#_) { color: #fff; }
.sks--dark .sks__eyebrow { color: var(--sk-star); }
.sks--dark .sks__sub { color: rgba(255,255,255,.74); }

/* --- Reviews ------------------------------------------------------------ */
.skf--reviews { align-items: start; }
.skf__review { margin: 0; padding: 26px 26px 24px; border-radius: var(--sk-r-sm); }
.skf__stars { display: block; color: var(--sk-star); font-size: 19px; letter-spacing: 3px; line-height: 1; margin-bottom: 14px; }
.skf__quote { margin: 0 0 18px; padding: 0; border: 0; font-size: 15px; line-height: 1.65; color: var(--sk-ink); font-style: normal; }
.skf__name { font-size: 15px; font-weight: 700; color: var(--sk-ink); }
@media (min-width: 980px) { .skf--reviews { column-count: 3; column-gap: 24px; display: block; } .skf--reviews .skf__review { break-inside: avoid; margin-bottom: 24px; } }
@media (min-width: 640px) and (max-width: 979px) { .skf--reviews { column-count: 2; column-gap: 20px; display: block; } .skf--reviews .skf__review { break-inside: avoid; margin-bottom: 20px; } }

/* --- Footer: near-black, as on lingomelo.com ---------------------------- */
footer.footer { background-color: var(--sk-night) !important; background-image: none !important; }

/* --- Library ------------------------------------------------------------ */
.sk-dash .sk-stat__n:not(#_) { color: #fff; }
.sk-chip[aria-pressed="true"] { background: var(--sk-teal); }

/* The guarantee card sits on cream, as on lingomelo.com; the orange CTA carries it. */
.skb--light .skb__card { border-radius: var(--sk-r); }
/* Lingomelo has one primary button colour: orange. */
.sk-btn--teal { background: var(--sk-lime); color: var(--sk-on-accent) !important; box-shadow: none; }
.sk-btn--teal:hover { background: var(--sk-lime-dim); color: var(--sk-on-accent) !important; }

/* ==========================================================================
   Readability pass (full audit, pixel-sampled contrast incl. hover states)
   ========================================================================== */
/* Stars are a graphic on white cards: gold that reaches 3:1 (the brand's
   #fec132 was 1.6:1 on white). */
.skf__stars { color: #c98500; }

/* Image blocks show their text on hover over a translucent overlay, so the
   text sat on whatever part of the photo was behind it (2.7:1 measured).
   The text now carries its own solid chip, readable on any image. */
.image__overlay-text {
  background: rgba(20, 68, 67, .94);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--sk-r-btn);
}
.image__overlay-text *, .image__overlay-text a { color: #fff !important; }

/* Theme greys below AA on white. */
.blog-post-optin__disclaimer-text { color: var(--sk-muted) !important; }
.sk-card__pct { font-size: 12px !important; }

/* Tap targets: text links that sat 22 to 26px tall on phones. */
.announcement__link, .blog-listing__more, .sidebar-categories__link, .skct__link {
  display: inline-block; padding-top: 9px; padding-bottom: 9px;
}
.sk-auth__link { display: inline-block; padding: 10px 0; margin: -10px 0; }
footer.footer .social-icons__icon, .social-icons__icon { min-width: 40px; display: inline-flex; align-items: center; justify-content: center; }
.sk-check { min-height: 40px; }
.sk-check__box { width: 20px; height: 20px; }
/* The overlay text is often a heading, and the page-level heading colour
   outranks one class: pin it white on its chip. */
.image__overlay .image__overlay-text:not(#_),
.image__overlay .image__overlay-text:not(#_) * { color: #fff !important; }
/* Some image blocks keep their overlay always on (set per block in the page
   content). Centred, the text chip sat on top of the picture's own content
   (review screenshots). It now sits at the bottom edge as a compact label. */
.image__overlay { align-items: flex-end; padding-bottom: 14px; }
.image__overlay-text { font-size: 14px; line-height: 1.3; padding: 8px 14px; }
.image__overlay-text :is(h1, h2, h3, h4, h5, h6, p) { font-size: 14px !important; line-height: 1.3; margin: 0; }

/* Header: logo left, account right. The menu blocks were removed (Lingomelo's
   menus are full, Skillademia's were empty), and the stretched menu block was
   what pushed "Log In" / the account menu to the right edge. Without it the
   account block sat right next to the logo. */
.header__content--desktop .header__container { align-items: center; }
.header__content--desktop .header__block--user { margin-left: auto !important; margin-right: 0 !important; text-align: right; }
.header__content--desktop .header__block--logo { margin-right: 0; }