@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

/* =========================================================
   Skald Lab Ops — Plain CSS, no build chain required
   ========================================================= */

:root {
  --bg:           #f4f6f3;
  --surface:      #ffffff;
  --border:       #ddd9d0;
  --border-light: #eceae4;
  --text:         #1a1917;
  --muted:        #6b6760;
  --nav-bg:       #1c2e1a;
  --nav-text:     #d6e8d0;
  --nav-hover:    #ffffff;
  --primary:      #2a5c1f;
  --primary-dark: #1e4316;
  --accent:       #b84c1a;
  --skald:        #f58147;
  --lab:          #1e4316;
  --radius:       4px;
  /* Brand illustration palette — section accents, shapes, wipes */
  --c-mint:       #a8d8b9;
  --c-sky:        #a8d4f5;
  --c-sun:        #f5c842;
  --c-coral:      #ff6b4a;
  --c-olive:      #6b7c33;
  --c-lavender:   #b8a9dc;
  --c-ink:        #2d2a22;
  --c-cream:      #f5ede4;
  --shadow:       0 1px 3px rgba(0,0,0,0.08);
  --shadow-lift:  0 10px 24px rgba(24, 35, 22, 0.08);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       font-size: 15px; line-height: 1.5; background: var(--bg); color: var(--text); }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- Layout ---- */
.site-header {
  background: var(--nav-bg);
  padding: 0 1.5rem;
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  display: flex; align-items: center; gap: 2rem;
  max-width: 1400px; margin: 0 auto; height: 52px;
}
.site-title {
  color: var(--nav-text); font-weight: 700; font-size: 1.05rem;
  letter-spacing: 0.02em; white-space: nowrap;
}
.site-title:hover { color: var(--nav-hover); text-decoration: none; }

.main-nav { display: flex; gap: 0.25rem; }
.main-nav a {
  color: var(--nav-text); padding: 0.35rem 0.75rem; border-radius: var(--radius);
  font-size: 0.9rem; transition: background 0.15s;
}
.main-nav a:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }

.main-content {
  max-width: 1400px; margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
}

/* ---- Page header ---- */
.page-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.35rem; flex-wrap: wrap;
}
.page-header h1 { font-size: 1.65rem; font-weight: 750; margin-top: 0.1rem; letter-spacing: 0; }
.header-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: flex-start; }

.breadcrumb {
  display: inline-block; font-size: 0.85rem; color: var(--muted);
  margin-bottom: 0.2rem;
}
.breadcrumb::after { content: " /"; margin-right: 0.3rem; }
.breadcrumb:hover { color: var(--primary); }

/* ---- Two-column layout ---- */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }

/* ---- Cards ---- */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem;
  margin-bottom: 1rem; box-shadow: var(--shadow);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.75rem; gap: 0.5rem;
}
.card-header h2 { margin-bottom: 0; }
.card h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.75rem; color: var(--text); }

/* ---- Stat cards ---- */
.stat-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.5rem;
  flex: 1; min-width: 130px; box-shadow: var(--shadow);
}
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--primary); }
.stat-label { font-size: 0.82rem; color: var(--muted); margin-top: 0.2rem; }
.stat-card--link {
  display: block; text-decoration: none; cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stat-card--link:hover { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent); }
.stat-card--link .stat-label { color: var(--primary); }

/* ---- Current session banner ---- */
.current-session-banner {
  display: flex; align-items: center; gap: 0.75rem;
  background: var(--primary); color: #fff;
  border-radius: var(--radius); padding: 0.75rem 1.25rem;
  margin-bottom: 1rem; text-decoration: none; font-weight: 600;
  transition: opacity 0.15s;
}
.current-session-banner:hover { opacity: 0.88; }
.current-session-label {
  background: #fff; color: var(--primary);
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; border-radius: 3px; padding: 0.15rem 0.45rem;
  white-space: nowrap;
}
.current-session-cta { margin-left: auto; font-size: 0.9rem; opacity: 0.85; }

/* ---- Tables ---- */
.table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.table th {
  text-align: left; font-weight: 600; font-size: 0.8rem;
  color: var(--muted); border-bottom: 1px solid var(--border);
  padding: 0.4rem 0.6rem;
}
.table td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border-light); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: #f9f8f5; }
.row--inactive td { opacity: 0.5; }

.sub-note { font-size: 0.8rem; color: var(--muted); margin-top: 0.15rem; }
.actions { white-space: nowrap; text-align: right; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.45rem 1rem; border-radius: var(--radius); font-size: 0.875rem;
  font-weight: 500; cursor: pointer; border: none; white-space: nowrap;
  background: var(--primary); color: #fff; text-decoration: none !important;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.btn:hover { background: var(--primary-dark); color: #fff; transform: translateY(-1px); }
.btn--sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }
.btn--outline {
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary);
}
.btn--outline:hover { background: var(--primary); color: #fff; }
.btn--action { background: #1a5c3a; }
.btn--action:hover { background: #124229; }
.btn--warn { background: var(--accent); }
.btn--warn:hover { background: #8f3a14; }

/* ---- Badges ---- */
.badge {
  display: inline-block; padding: 0.2rem 0.55rem; border-radius: 99px;
  font-size: 0.75rem; font-weight: 600; white-space: nowrap;
}
.badge--sm { padding: 0.15rem 0.4rem; font-size: 0.7rem; }

/* Attendance states */
.badge--booked       { background: #dbeafe; color: #1e40af; }
.badge--checked_in   { background: #fef3c7; color: #92400e; }
.badge--completed    { background: #dcfce7; color: #166534; }
.badge--no_show      { background: #fee2e2; color: #991b1b; }
.badge--cancelled    { background: #f3f4f6; color: #4b5563; }

/* Project statuses */
.badge--not_started      { background: #f3f4f6; color: #4b5563; }
.badge--in_progress      { background: #dbeafe; color: #1e40af; }
.badge--needs_debugging  { background: #ffedd5; color: #9a3412; }

/* Membership types */
.badge--member    { background: #d1fae5; color: #065f46; }
.badge--day_pass  { background: #e0e7ff; color: #3730a3; }
.badge--inactive  { background: #f3f4f6; color: #6b7280; }

/* Project categories */
.badge--category-make    { background: #fce7f3; color: #9d174d; }
.badge--category-fix     { background: #ffedd5; color: #9a3412; }
.badge--category-explain { background: #ede9fe; color: #5b21b6; }
.badge--domain-build  { background: #dbeafe; color: #1e40af; }
.badge--domain-think  { background: #ede9fe; color: #5b21b6; }
.badge--domain-lead   { background: #d1fae5; color: #065f46; }

/* ---- Track tags ---- */
.track-tag {
  display: inline-block; padding: 0.15rem 0.5rem; border-radius: var(--radius);
  font-size: 0.78rem; font-weight: 500;
}
.track-tag--junior { background: #fef3c7; color: #78350f; }
.track-tag--senior { background: #ede9fe; color: #4c1d95; }
.track-tag--sm { font-size: 0.72rem; padding: 0.1rem 0.4rem; }

/* ---- Field list (detail pages) ---- */
.field-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; }
.field-list dt { font-weight: 600; font-size: 0.85rem; color: var(--muted); padding-top: 0.15rem; }
.field-list dd { margin: 0; }

/* ---- Forms ---- */
.form-card { max-width: 640px; }
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; font-size: 0.875rem; margin-bottom: 0.3rem; }
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="date"],
.field input[type="time"],
.field select,
.field textarea {
  width: 100%; padding: 0.58rem 0.7rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-size: 0.9rem; font-family: inherit;
  background: var(--surface); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 2px rgba(42,92,31,0.15);
}
.field--error input, .field--error select, .field--error textarea {
  border-color: #dc2626;
}
.field-error { display: block; color: #dc2626; font-size: 0.8rem; margin-top: 0.2rem; }
.field-help  { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 0.2rem; }
.form-errors { background: #fee2e2; border: 1px solid #fca5a5; border-radius: var(--radius);
               padding: 0.75rem 1rem; margin-bottom: 1rem; }
.form-actions { display: flex; gap: 0.5rem; margin-top: 1.25rem; }

/* Allow select and input fields without .field wrapper (inline forms) */
input[type="date"], input[type="time"] { font-family: inherit; }

/* ---- Messages ---- */
.messages { margin-bottom: 1rem; }
.message {
  padding: 0.65rem 1rem; border-radius: var(--radius);
  margin-bottom: 0.5rem; font-size: 0.9rem;
  background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7;
}
.message--error   { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.message--warning { background: #fef3c7; color: #92400e; border-color: #fcd34d; }

/* ---- Empty states ---- */
.empty { color: var(--muted); font-style: italic; padding: 0.5rem 0; }
.empty-state {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  background: var(--surface); border: 1px dashed var(--border);
  border-radius: var(--radius); padding: 1.35rem 1.5rem;
  color: var(--muted); margin-bottom: 1rem;
}
.empty-state strong { color: var(--text); font-size: 1rem; }

/* ---- Block item (dashboard) ---- */
.block-item {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--border-light);
}
.block-item:last-child { border-bottom: none; }
.block-item strong { flex: 1; }

/* ---- Booking overview ---- */
.booking-day-list {
  display: flex; flex-direction: column; gap: 1rem;
}
.booking-day-group {
  border: 1px solid var(--border-light);
  border-radius: var(--radius); background: #fbfaf6;
}
.booking-day-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.75rem 0.9rem; border-bottom: 1px solid var(--border-light);
}
.booking-day-header strong,
.booking-day-header span { display: block; }
.booking-day-header strong { font-size: 1rem; }
.booking-day-header span { color: var(--muted); font-size: 0.82rem; }
.booking-session-list {
  display: flex; flex-direction: column; gap: 0.65rem; padding: 0.75rem;
}
.booking-session-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.8rem;
}
.booking-session-main {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.75rem; margin-bottom: 0.75rem;
}
.booking-session-main h3 {
  font-size: 1rem; line-height: 1.25; margin-bottom: 0.12rem;
}
.booking-session-count {
  min-width: 86px; padding: 0.5rem 0.65rem;
  border: 1px solid var(--border-light); border-radius: var(--radius);
  background: #f7f5ef; text-align: center;
}
.booking-session-count strong,
.booking-session-count span { display: block; }
.booking-session-count strong { color: var(--primary); line-height: 1; }
.booking-session-count span { color: var(--muted); font-size: 0.75rem; margin-top: 0.12rem; }
.booking-child-list {
  display: flex; flex-wrap: wrap; gap: 0.45rem;
}
.booking-child-chip {
  display: inline-flex; align-items: center; gap: 0.45rem;
  max-width: 100%; padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-light); border-radius: var(--radius);
  background: #fcfbf8; font-size: 0.84rem;
}
.booking-child-chip a:first-child {
  color: var(--text); font-weight: 600;
}
.booking-child-chip .sub-note { margin-top: 0; }

/* ---- Portal family dashboard ---- */
.portal-summary {
  display: grid; grid-template-columns: repeat(3, minmax(140px, 180px)) minmax(280px, 1fr) minmax(240px, 0.85fr);
  gap: 0.85rem; margin-bottom: 1.15rem;
}
.summary-tile {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
}
.summary-value {
  display: block; font-size: 2rem; font-weight: 750;
  line-height: 1; color: var(--primary);
}
.summary-label {
  display: block; color: var(--muted); font-size: 0.78rem;
  font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
}
.summary-contact {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem;
  align-items: center;
}
.summary-contact .summary-label,
.summary-contact .muted { grid-column: 1; }
.summary-contact a { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.summary-next-session {
  display: flex; flex-direction: column; gap: 0.15rem;
}
.summary-next-session strong { font-size: 1.05rem; }
.family-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1rem; }
.family-card {
  margin-bottom: 0; position: relative; overflow: hidden;
  border-color: #d7d2c6; box-shadow: var(--shadow-lift);
}
.family-card::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--primary);
}
.family-card--junior::before { background: #d97706; }
.family-card--senior::before { background: #6d5bd0; }
.family-card-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 0.75rem; margin-bottom: 1rem;
}
.family-card-header h2 { font-size: 1.05rem; margin-bottom: 0.25rem; }
.family-card-header h2 a { color: var(--text); }
.family-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; color: var(--muted); font-size: 0.85rem; }
.family-status {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.75rem; padding: 0.25rem 0.55rem;
  border-radius: 999px; background: #e7f3e4; color: var(--primary-dark);
  border: 1px solid #c5dec0; font-size: 0.78rem; font-weight: 700;
  white-space: nowrap;
}
.family-status--attention {
  background: #fff4df; color: #8a3d0c; border-color: #eccb95;
}
.next-session {
  display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem;
  padding: 0.85rem; border: 1px solid #dedbd2;
  border-radius: var(--radius); background: #fbfaf6; margin-bottom: 0.75rem;
}
.next-session strong { font-size: 1rem; }
.next-session .badge { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.next-session--empty a { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
.family-card-stats {
  display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 0.75rem;
  margin-bottom: 0.8rem;
}
.family-card-stats div {
  border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 0.65rem 0.75rem; background: #fcfbf8;
}
.family-card-stats strong,
.family-card-stats span { display: block; }
.family-card-stats strong { color: var(--text); font-size: 0.95rem; line-height: 1.2; }
.family-card-stats span { color: var(--muted); font-size: 0.78rem; margin-top: 0.15rem; }
.family-booking-list {
  display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.35rem;
}
.family-booking-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center; gap: 0.6rem;
  padding: 0.65rem 0.7rem; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: #fff;
}
.family-booking-item div {
  display: flex; flex-direction: column; min-width: 0;
}
.family-booking-item strong { font-size: 0.9rem; }
.family-booking-item span:not(.badge) {
  color: var(--muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.family-card-actions { margin-top: 0.9rem; display: flex; gap: 0.5rem; justify-content: flex-end; flex-wrap: wrap; }

.child-profile-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem; margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
  position: relative; overflow: hidden;
}
.child-profile-header::before {
  content: ""; position: absolute; left: 0; top: 0; right: 0; height: 4px;
  background: var(--primary);
}
.child-profile-header--junior::before { background: #d97706; }
.child-profile-header--senior::before { background: #6d5bd0; }
.child-profile-header h2 {
  font-size: 1.35rem; line-height: 1.15; margin: 0.1rem 0 0.35rem;
}
.child-profile-metrics {
  display: grid; grid-template-columns: repeat(2, minmax(96px, 1fr));
  gap: 0.6rem; min-width: 220px;
}
.child-profile-metrics div {
  padding: 0.75rem; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: #fbfaf6;
}
.child-profile-metrics strong,
.child-profile-metrics span { display: block; }
.child-profile-metrics strong { font-size: 1.35rem; color: var(--primary); line-height: 1; }
.child-profile-metrics span { color: var(--muted); font-size: 0.78rem; margin-top: 0.2rem; }
.profile-session-list {
  display: flex; flex-direction: column; gap: 0.5rem;
}
.profile-session-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 0.75rem;
  padding: 0.7rem; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: #fff;
}
.profile-session-link {
  color: var(--text); text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.profile-session-link:hover {
  color: var(--text); text-decoration: none;
  border-color: #c9c2b5; box-shadow: var(--shadow); transform: translateY(-1px);
}
.profile-session-item div {
  display: flex; flex-direction: column; min-width: 0;
}
.profile-session-item strong { font-size: 0.92rem; }
.profile-session-item span:not(.badge) {
  color: var(--muted); font-size: 0.82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.session-detail-hero {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem; margin-bottom: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.session-detail-hero h2 {
  font-size: 1.35rem; margin: 0.1rem 0 0.35rem; line-height: 1.15;
}
.session-detail-meta {
  display: flex; gap: 0.45rem; flex-wrap: wrap;
}
.session-detail-meta span {
  display: inline-flex; align-items: center;
  padding: 0.22rem 0.5rem; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: #fbfaf6;
  color: var(--muted); font-size: 0.82rem; font-weight: 600;
}
.project-panel { max-width: 980px; }
.project-card-list {
  display: grid; gap: 0.75rem;
}
.project-card {
  padding: 0.9rem; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: #fff;
}
.project-card-main {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 0.75rem; margin-bottom: 0.45rem;
}
.project-card h3 {
  margin: 0.1rem 0 0; font-size: 1rem; line-height: 1.25;
}
.project-card p {
  margin: 0.45rem 0 0.75rem; color: var(--muted); line-height: 1.45;
}
.project-meta {
  padding-top: 0.65rem; border-top: 1px solid var(--border-light);
}

.portal-kicker {
  color: var(--muted); font-size: 0.76rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem;
}
.setup-state {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  padding: 0.75rem; margin-bottom: 1rem;
  border: 1px solid var(--border-light); border-radius: var(--radius);
  background: #fcfbf8;
}
.state-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 1.55rem; padding: 0.18rem 0.5rem;
  border-radius: 999px; border: 1px solid var(--border);
  background: #f3f4f6; color: #4b5563;
  font-size: 0.75rem; font-weight: 700; white-space: nowrap;
}
.state-pill--active { background: #dbeafe; color: #1e40af; border-color: #93c5fd; }
.state-pill--warning { background: #fff4df; color: #8a3d0c; border-color: #eccb95; }
.booking-selector {
  width: 100%; max-width: none; display: grid;
  grid-template-columns: minmax(260px, 420px) minmax(280px, 1fr);
  gap: 1rem; align-items: stretch; box-shadow: var(--shadow-lift);
}
.booking-selector .field { margin-bottom: 0; }
.selected-context {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.7rem 0.85rem; margin-top: 0; min-height: 100%;
  border: 1px solid var(--border-light); border-radius: var(--radius);
  background: #fbfaf6;
}
.selected-context > div {
  display: flex; flex-direction: column; gap: 0.1rem; min-width: 180px;
}
.selected-context strong { font-size: 1rem; }
.rule-strip,
.rule-list {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-bottom: 1rem;
}
.rule-strip span,
.rule-list span {
  display: inline-flex; align-items: center;
  padding: 0.28rem 0.55rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: #fcfbf8;
  color: var(--muted); font-size: 0.8rem; font-weight: 600;
}
.validation-panel {
  display: flex; flex-direction: column; gap: 0.25rem;
  margin-bottom: 1rem; padding: 0.75rem;
  background: #fee2e2; color: #991b1b;
  border: 1px solid #fca5a5; border-radius: var(--radius);
  font-size: 0.9rem;
}
.validation-panel strong { color: #7f1d1d; }

.session-list {
  display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 1rem;
  width: 100%; max-width: 980px;
}
.session-row {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto;
  align-items: center; gap: 1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0.85rem 1rem;
  box-shadow: var(--shadow); transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.session-row:hover {
  border-color: #c9c2b5; box-shadow: var(--shadow-lift); transform: translateY(-1px);
}
.session-row--disabled {
  background: #fbfaf8; color: var(--muted);
}
.session-row--disabled:hover {
  transform: none; box-shadow: var(--shadow); border-color: var(--border);
}
.session-date {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  min-height: 62px; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: #f7f5ef;
}
.session-date strong {
  color: var(--primary-dark); font-size: 0.86rem; text-transform: uppercase;
}
.session-date span {
  color: var(--text); font-size: 1rem; font-weight: 700;
}
.session-main h2 {
  margin: 0 0 0.3rem; font-size: 1rem; line-height: 1.25;
}
.session-meta {
  display: flex; gap: 0.45rem; flex-wrap: wrap; color: var(--muted); font-size: 0.83rem;
}
.session-meta span {
  display: inline-flex; align-items: center;
  padding: 0.18rem 0.45rem; border-radius: var(--radius);
  background: #f3f1ea; border: 1px solid var(--border-light);
}
.session-state { display: flex; justify-content: flex-end; }
.session-action { display: flex; justify-content: flex-end; min-width: 72px; }
.booking-confirm-card {
  max-width: 760px; box-shadow: var(--shadow-lift);
}
@media (max-width: 760px) {
  .portal-summary { grid-template-columns: 1fr 1fr; }
  .summary-next-session,
  .summary-contact { grid-column: 1 / -1; }
  .family-grid { grid-template-columns: 1fr; }
  .family-card-stats { grid-template-columns: 1fr; }
  .family-card-actions { justify-content: stretch; }
  .family-card-actions .btn { flex: 1; text-align: center; }
  .child-profile-header {
    align-items: stretch; flex-direction: column;
  }
  .child-profile-metrics {
    min-width: 0;
  }
  .session-detail-hero {
    align-items: flex-start; flex-direction: column;
  }
  .booking-selector { grid-template-columns: 1fr; }
  .session-row {
    grid-template-columns: 62px minmax(0, 1fr);
    align-items: start;
  }
  .session-state,
  .session-action {
    grid-column: 2; justify-content: flex-start;
  }
  .family-booking-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .family-booking-item .btn { justify-content: center; width: 100%; }
  .rule-strip,
  .rule-list { align-items: stretch; }
  .rule-strip span,
  .rule-list span { width: 100%; }
  .booking-session-main {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .booking-session-main .btn,
  .booking-session-count { width: 100%; }
  .booking-child-chip {
    width: 100%; justify-content: space-between;
  }
}

/* ---- Session Console ---- */
.console-selector { margin-bottom: 1rem; }
.selector-form .selector-fields {
  display: flex; align-items: flex-end; gap: 0.75rem; flex-wrap: wrap;
}
.selector-form .field { margin-bottom: 0; min-width: 160px; }
.selector-form .field input,
.selector-form .field select { padding: 0.45rem 0.65rem; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: 0.9rem; font-family: inherit; width: 100%; }

.console-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
  background: var(--nav-bg); color: var(--nav-text);
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  margin-bottom: 0.75rem;
}
.console-block-info { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.console-block-info strong { color: #fff; font-size: 1rem; }
.console-block-info .muted { color: #a0b89a; }
.console-capacity { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.console-capacity span { color: var(--nav-text); }

.console-member-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 0.6rem;
  box-shadow: var(--shadow); overflow: hidden;
}
.member-card--active  { border-left: 4px solid #f59e0b; }
.member-card--done    { border-left: 4px solid #22c55e; opacity: 0.75; }
.member-card--inactive { border-left: 4px solid #d1d5db; opacity: 0.6; }

.console-member-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1rem; gap: 0.75rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-light);
}
.console-member-name { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.console-member-name a { font-weight: 600; font-size: 1rem; }
.console-member-actions { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }

.inline-form { display: inline; }
.inline-form button { cursor: pointer; }

.console-projects { padding: 0.5rem 1rem 0.6rem; }
.console-projects--empty {
  padding: 0.5rem 1rem; display: flex; align-items: center; gap: 0.75rem;
}
.console-project-row {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 0.4rem 0; gap: 0.75rem; border-bottom: 1px solid var(--border-light);
}
.console-project-row:last-child { border-bottom: none; }
.project-info { display: flex; align-items: flex-start; gap: 0.5rem; flex-wrap: wrap; flex: 1; }
.project-title { font-weight: 500; font-size: 0.9rem; }
.next-step {
  display: block; width: 100%; font-size: 0.8rem; color: #1e40af;
  background: #eff6ff; padding: 0.2rem 0.4rem; border-radius: var(--radius);
  margin-top: 0.2rem;
}
.mentor-note {
  display: block; width: 100%; font-size: 0.8rem; color: var(--muted);
  margin-top: 0.15rem; font-style: italic;
}

/* ---- Login page ---- */
.login-shell {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 460px);
  gap: 1.25rem; align-items: stretch;
  max-width: 1080px; margin: 3.5rem auto 0;
}
.login-intro {
  display: flex; flex-direction: column; justify-content: center; gap: 1rem;
  min-height: 420px; padding: 2.25rem;
  background: linear-gradient(135deg, #21391d 0%, #315c26 56%, #a6461b 100%);
  color: #fff; border-radius: var(--radius); box-shadow: var(--shadow-lift);
}
.login-intro .portal-kicker { color: #dbe9d5; margin-bottom: 0; }
.login-intro h1 {
  max-width: 620px; font-size: 2.35rem; line-height: 1.08;
  font-weight: 780; letter-spacing: 0; color: #fff;
}
.login-intro p {
  max-width: 560px; color: #eef5eb; font-size: 1rem;
}
.login-benefits {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem;
}
.login-benefits span {
  display: inline-flex; align-items: center;
  padding: 0.38rem 0.6rem; border: 1px solid rgba(255,255,255,0.24);
  border-radius: var(--radius); background: rgba(255,255,255,0.1);
  color: #fff; font-size: 0.82rem; font-weight: 650;
}
.login-panel {
  display: flex; flex-direction: column; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-lift);
}
.login-heading { font-size: 1.45rem; font-weight: 750; margin-bottom: 0.65rem; letter-spacing: 0; }
.login-form .field { margin-bottom: 1rem; }
.login-form .btn { width: 100%; justify-content: center; margin-top: 0.5rem; }
.login-actions {
  display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1rem;
}
.oauth-button {
  display: flex; align-items: center; gap: 0.75rem;
  width: 100%; min-height: 48px; padding: 0.7rem 0.85rem;
  border: 1px solid #cfc9bd; border-radius: var(--radius);
  background: #fff; color: var(--text); text-decoration: none !important;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.oauth-button:hover {
  color: var(--text); border-color: #b9b1a2;
  box-shadow: var(--shadow); transform: translateY(-1px);
}
.oauth-button--facebook {
  background: #1877f2; border-color: #1877f2; color: #fff;
}
.oauth-button--facebook:hover { background: #1269d9; color: #fff; border-color: #1269d9; }
.oauth-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: #f4f6f3; color: var(--text); font-weight: 800;
  font-size: 0.9rem; flex: 0 0 auto;
}
.oauth-button--facebook .oauth-mark {
  background: #fff; color: #1877f2; font-family: Georgia, serif; font-size: 1.15rem;
}
.login-flow {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.35rem;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border-light);
}
.login-flow div {
  display: flex; flex-direction: column; gap: 0.2rem;
  padding: 0.55rem 0.45rem; border: 1px solid var(--border-light);
  border-radius: var(--radius); background: #fbfaf6; color: var(--muted);
  font-size: 0.76rem;
}
.login-flow strong {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; border-radius: 999px;
  background: var(--primary); color: #fff; font-size: 0.75rem;
}

@media (max-width: 760px) {
  .login-shell {
    grid-template-columns: 1fr; margin-top: 1rem;
  }
  .login-intro {
    min-height: auto; padding: 1.5rem;
  }
  .login-intro h1 {
    font-size: 1.75rem;
  }
  .login-panel {
    padding: 1.35rem;
  }
  .login-flow {
    grid-template-columns: repeat(2, 1fr);
  }
}

.auth-card .muted { margin-bottom: 1rem; }
.auth-provider {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin-bottom: 1rem; color: var(--muted); font-size: 0.85rem;
}
.auth-provider-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7rem; height: 1.7rem; border: 1px solid var(--border);
  border-radius: 50%; background: var(--surface); color: var(--text);
  font-weight: 700; font-size: 0.9rem;
}
.auth-actions { flex-direction: column; align-items: stretch; }
.auth-actions .btn { width: 100%; justify-content: center; }
.auth-debug {
  display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 0.75rem;
  margin: 1rem 0; padding: 0.75rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: #f9f8f5; font-size: 0.82rem;
}
.auth-debug dt { color: var(--muted); font-weight: 600; }
.auth-debug dd { overflow-wrap: anywhere; }

/* ---- Logout button in nav ---- */
.logout-form { margin-left: auto; }
.logout-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.3);
  color: var(--nav-text); padding: 0.3rem 0.75rem; border-radius: var(--radius);
  font-size: 0.875rem; cursor: pointer; transition: background 0.15s, color 0.15s;
}
.logout-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* =========================================================
   Skald Labportal home theme
   Scoped to body.skald-home / body.skald-landing only (set by
   portal/home.html and portal/landing.html) — every rule below is
   namespaced so the staff ops app and the rest of the guardian
   portal keep their current look.
   ========================================================= */
body.skald-home,
body.skald-landing {
  --bg:           var(--c-cream);
  --surface:      #ffffff;
  --border:       #e5dcce;
  --border-light: #efe7da;
  --text:         var(--c-ink);
  --muted:        #7a7060;
  --nav-bg:       var(--c-ink);
  --nav-text:     #e8dfd0;
  --nav-hover:    #ffffff;
  --primary:      var(--c-olive);
  --primary-dark: #55611f;
  --accent:       var(--c-coral);
  --skald:        var(--c-coral);
  --radius:       16px;
  --shadow:       0 4px 16px rgba(45,42,34,0.07);
  --shadow-lift:  0 14px 34px rgba(45,42,34,0.12);
  /* A storybook serif rather than a generic sans — Alegreya reads as
     "fairytale" without sacrificing legibility at body-text sizes, and
     has full Cyrillic support for the Bulgarian copy throughout. */
  font-family: 'Alegreya', Georgia, 'Times New Roman', serif;
}
body.skald-home h1,
body.skald-home h2,
body.skald-home h3 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
body.skald-home .page-header h1 {
  font-size: 2rem;
}

/* Header/nav only takes the Skald Lablook on the home page itself */
body.skald-home .site-header { background: var(--nav-bg); }
body.skald-home .site-title { font-weight: 900; letter-spacing: 0; }
body.skald-home .main-nav a:hover { background: rgba(255,255,255,0.14); }

body.skald-home .btn,
body.skald-landing .btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 0.55rem 1.25rem;
  transition: background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
body.skald-home .btn:hover,
body.skald-landing .btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
body.skald-home .btn--sm { padding: 0.4rem 0.85rem; }
body.skald-landing .btn--lg { padding: 0.85rem 1.75rem; font-size: 1.05rem; }
body.skald-landing .btn--block { width: 100%; justify-content: center; }
body.skald-landing .btn--white { background: #fff; color: var(--primary); }
body.skald-landing .btn--white:hover { background: #fff; color: var(--primary-dark); }
body.skald-landing .btn--on-dark { border-color: rgba(255,255,255,0.6); color: #fff; }
body.skald-landing .btn--on-dark:hover { background: rgba(255,255,255,0.12); color: #fff; }

body.skald-home .badge { border-radius: 999px; font-weight: 700; padding: 0.25rem 0.65rem; }

body.skald-home .summary-tile,
body.skald-home .family-card,
body.skald-home .empty-state {
  border-radius: 20px;
  border-color: var(--border);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.skald-home .family-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}
body.skald-home .summary-value { color: var(--primary); }
body.skald-home .family-status {
  background: #eaf0da; color: var(--primary-dark); border-color: #d3e0b8;
}
body.skald-home .family-status--attention {
  background: #ffe4d6; color: #b8461f; border-color: #ffc4a8;
}

/* Junior/senior accent colors, matching the Figma direction-card palette */
body.skald-home .family-card--junior::before { background: var(--c-mint); }
body.skald-home .family-card--senior::before { background: var(--c-lavender); }
body.skald-home .track-tag--junior { background: #a8d8b950; color: #2f5a3f; }
body.skald-home .track-tag--senior { background: #b8a9dc50; color: #453a72; }

body.skald-home .next-session,
body.skald-home .family-card-stats div,
body.skald-home .family-booking-item {
  border-radius: 14px;
  background: #fbf7f0;
  border-color: var(--border-light);
}

body.skald-home .empty-state {
  border-style: dashed;
  border-width: 2px;
  background: #fbf7f0;
  padding: 2rem;
  align-items: center;
  text-align: center;
}
body.skald-home .empty-state strong { font-size: 1.15rem; font-weight: 800; }

@media (max-width: 760px) {
  body.skald-home .page-header h1 { font-size: 1.6rem; }
}

/* =========================================================
   Skald Labpublic landing page (portal/landing.html)
   Scoped to body.skald-landing only.
   ========================================================= */
body.skald-landing { margin: 0; }
body.skald-landing h1, body.skald-landing h2, body.skald-landing h3, body.skald-landing h4 {
  font-weight: 900; letter-spacing: -0.02em; margin: 0 0 0.6rem;
}
body.skald-landing .landing-container {
  position: relative; z-index: 2; max-width: 1160px; margin: 0 auto; padding: 0 1.5rem;
}
body.skald-landing .landing-container--narrow { max-width: 760px; }

/* ---- Nav ---- */
body.skald-landing .landing-nav {
  position: sticky; top: 0; z-index: 100;
  background: white; padding: 1.35rem 0;
  transition: background 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
}
body.skald-landing .landing-nav.is-scrolled {
  background: white; backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(45,42,34,0.08); padding: 0.7rem 0;
}
body.skald-landing .landing-nav-inner {
  max-width: 1160px; margin: 0 auto; padding: 0 1.5rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
body.skald-landing .landing-logo {
  display: flex; align-items: center; gap: 0.6rem;
  font-weight: 900; font-size: 1.35rem; color: var(--text); text-decoration: none;
}
body.skald-landing .landing-logo:hover { text-decoration: none; }
body.skald-landing .landing-links { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; margin-right: 1.6rem; }
body.skald-landing .landing-links a { color: var(--text); font-weight: 600; font-size: 0.92rem; position: relative; }
body.skald-landing .landing-links a:hover { color: var(--accent); text-decoration: none; }
body.skald-landing .landing-links a.is-active, body.skald-landing .landing-mobile-menu a.is-active { color: var(--accent); }
body.skald-landing .landing-login-btn { background: var(--accent); flex-shrink: 0; }
body.skald-landing .landing-login-btn:hover { background: #e85a3c; }
body.skald-landing .landing-menu-toggle {
  display: none; flex-direction: column; gap: 5px; padding: 0.4rem;
  background: none; border: none; cursor: pointer;
}
body.skald-landing .landing-menu-toggle span {
  display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
body.skald-landing .landing-mobile-menu {
  display: none; flex-direction: column; gap: 0.9rem;
  padding: 1rem 1.5rem 1.35rem; background: rgba(245,237,228,0.98);
}
body.skald-landing .landing-mobile-menu.is-open { display: flex; }
body.skald-landing .landing-mobile-menu a { color: var(--text); font-weight: 600; }
body.skald-landing .landing-mobile-menu .btn { align-self: flex-start; }

/* ---- Hero ---- */
body.skald-landing .landing-hero {
  position: relative; overflow: hidden;
  padding: 3rem 1.5rem 4rem; text-align: center;
  background: linear-gradient(155deg, var(--c-cream) 0%, #EDE0D4 55%, #F0E8DE 100%);
}
body.skald-landing .landing-hero-inner { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; }
body.skald-landing .landing-hero-glow {
  position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 50%), rgba(107,124,51,0.09), transparent 65%);
}
body.skald-landing .landing-hero-title {
  font-size: clamp(2.6rem, 7vw, 4.6rem); line-height: 1.02; margin-bottom: 1.1rem;
}
body.skald-landing .landing-cycling-word { color: var(--primary); display: inline-block; }
body.skald-landing .landing-hero-sub {
  font-size: 1.15rem; color: var(--muted); font-weight: 600; line-height: 1.6;
  max-width: 520px; margin: 0 auto 2rem;
}
body.skald-landing .landing-hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-bottom: 2.5rem;
}

/* ---- Marquee ---- */
body.skald-landing .landing-marquee { overflow: hidden; background: var(--primary); padding: 0.85rem 0; }
/* Seamless infinite scroll: the track holds 4 literal copies of the same
   content (in landing.html) and moves by exactly one copy's width (25%
   of the total track) every cycle. Since all 4 copies are identical,
   the frame at -25% is pixel-for-pixel the same as the frame at 0%, so
   the loop restart is invisible — no JS measurement, no resize
   listener, nothing that can desync and show a blank gap. */
body.skald-landing .landing-marquee-track {
  display: flex; gap: 3rem; white-space: nowrap; width: max-content;
  animation: landing-marquee 56s linear infinite;
}
body.skald-landing .landing-marquee-track span { color: #fff; font-weight: 700; font-size: 0.85rem; letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 0.5rem; }
body.skald-landing .landing-marquee-track .marquee-icon {
  width: 2.2rem; height: 2.2rem; padding: 0.3rem; box-sizing: border-box;
  background: #fff; border-radius: 0.55rem; object-fit: contain; flex-shrink: 0;
}
/* This particular icon has a lot of built-in white margin around three
   small badges — object-fit:contain at chip size shrinks it into
   illegibility. Cropping in tighter (cover + a bit of extra zoom) instead
   of shrinking to fit keeps the badges readable; the chip's own
   border-radius clips an <img> directly, so the zoomed content still
   never draws outside the rounded white square. */
body.skald-landing .landing-marquee-track .marquee-icon--zoom {
  padding: 0.04rem;
  object-fit: cover;
  object-position: center 38%;
  transform: scale(1.22);
}
@keyframes landing-marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* ---- Sections ---- */
body.skald-landing .landing-section { position: relative; overflow: hidden; padding: 5rem 0; background: var(--bg); }
body.skald-landing .landing-section--dark { background: var(--text); color: #E8DFD0; }
body.skald-landing .landing-section--dark h2 { color: #fff; }
body.skald-landing .landing-section-head { text-align: center; max-width: 620px; margin: 0 auto 4.5rem; }
body.skald-landing .landing-section-head p { color: var(--muted); }
body.skald-landing .landing-section-head--light p { color: #a09888; }
body.skald-landing .landing-origin-note {
  display: inline-flex; align-items: center; gap: 1rem; text-align: left;
  margin-top: 1.5rem; padding: 1rem 1.4rem; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow);
}
body.skald-landing .landing-origin-mark { font-size: 1.6rem; color: var(--primary); flex-shrink: 0; }
body.skald-landing .landing-origin-note p { margin: 0; font-size: 0.9rem; color: var(--muted); line-height: 1.55; }
body.skald-landing .landing-origin-note strong { color: var(--skald); }

body.skald-landing .landing-opening { display: flex; justify-content: center; margin-bottom: 0.5rem; }
body.skald-landing .landing-opening-badge {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 0.6rem;
  margin: 0; padding: 0.7rem 1.4rem; border-radius: 999px;
  background: var(--nav-bg); color: #fff; border: 2px solid var(--skald);
  font-size: 1.05rem; font-weight: 700; line-height: 1.4;
  box-shadow: 0 8px 22px rgba(245, 129, 71, 0.28);
}
body.skald-landing .landing-opening-label {
  padding: 0.15rem 0.6rem; border-radius: 999px;
  background: var(--skald); color: var(--nav-bg);
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
}
body.skald-landing .landing-opening-date { color: var(--skald); font-weight: 800; white-space: nowrap; }
body.skald-landing .landing-opening-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--skald); flex-shrink: 0;
  animation: skald-opening-pulse 1.8s ease-out infinite;
}
@keyframes skald-opening-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245, 129, 71, 0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(245, 129, 71, 0); }
  100% { box-shadow: 0 0 0 0 rgba(245, 129, 71, 0); }
}

/* ---- Directions ---- */
body.skald-landing .landing-directions-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
}
body.skald-landing .direction-card {
  background: var(--surface); border-radius: 22px; border: 2px solid transparent;
  box-shadow: var(--shadow); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
body.skald-landing .direction-card[open] {
  border-color: var(--dc); box-shadow: var(--shadow-lift); transform: translateY(-2px);
}
body.skald-landing .direction-card summary { list-style: none; cursor: pointer; padding: 1.5rem; }
body.skald-landing .direction-card summary::-webkit-details-marker { display: none; }
body.skald-landing .direction-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
body.skald-landing .direction-icon {
  font-size: 1.6rem; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; background: color-mix(in srgb, var(--dc) 40%, transparent);
}
body.skald-landing .direction-age {
  font-size: 0.75rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px;
  background: color-mix(in srgb, var(--dc) 40%, transparent); color: var(--text);
}
body.skald-landing .direction-card h3 { font-size: 1.2rem; margin-bottom: 0.4rem; }
body.skald-landing .direction-card p { color: var(--muted); font-size: 0.92rem; line-height: 1.55; margin-bottom: 0.9rem; }
body.skald-landing .direction-toggle { font-size: 0.8rem; font-weight: 700; color: var(--primary); }
body.skald-landing .direction-card-more {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0 1.5rem 1.5rem;
}
body.skald-landing .direction-card-more .direction-card-detail {
  margin: 0 0 0.5rem; padding: 0.75rem 0.9rem; border-radius: 12px;
  border-left: 3px solid var(--dc); background: color-mix(in srgb, var(--dc) 18%, transparent);
  color: var(--text); font-size: 0.88rem;
}
body.skald-landing .direction-card-detail strong { color: var(--primary-dark); }
/* Equal heights per row, but only for the closed part: main.js stretches
   each summary to the tallest one in its row, and the grid doesn't stretch
   cards — so opening one card grows only that card, and its neighbour
   keeps its own closed size. The toggle line sits at the bottom of the
   summary so "Виж повече" lines up across the row. */
body.skald-landing .landing-directions-grid { align-items: start; }
body.skald-landing .direction-card summary { display: flex; flex-direction: column; }
body.skald-landing .direction-card summary .direction-toggle { margin-top: auto; }

/* Hover: lift and grow a little, outlined and glowing in the card's own
   colour (--dc, the same one behind its icon and age pill). */
@media (hover: hover) {
  body.skald-landing .direction-card:hover {
    transform: translateY(-4px) scale(1.03);
    border-color: var(--dc);
    box-shadow:
      0 14px 34px color-mix(in srgb, var(--dc) 65%, transparent),
      0 0 0 4px color-mix(in srgb, var(--dc) 35%, transparent);
  }
}

/* ---- Direction icons: a short one-off animation each time the card is
   hovered (or its summary is focused from the keyboard). Whatever state
   an animation ends on (light on, code written) holds while hovered. ---- */
body.skald-landing .direction-icon svg { display: block; overflow: visible; }
body.skald-landing .direction-icon svg * { transform-box: fill-box; transform-origin: center; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .direction-icon > * {
  animation: var(--icon-anim) both;
}
/* The whole icon tile grows while its animation plays so it's easy to
   see, then settles back to normal size (even if still hovered).
   --icon-total is how long that icon's animation runs in all. */
@keyframes direction-icon-grow {
  0%, 100% { transform: scale(1); }
  15%, 82% { transform: scale(1.3); }
}
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .direction-icon {
  animation: direction-icon-grow var(--icon-total) ease-in-out both;
}
body.skald-landing .direction-icon--robot    { --icon-total: 1.5s; }
body.skald-landing .direction-icon--web      { --icon-total: 1.6s; }
body.skald-landing .direction-icon--games    { --icon-total: 1.5s; }
body.skald-landing .direction-icon--software { --icon-total: 2.3s; }

/* Robotics: hops and sways, ears flap up and down, antenna light blinks
   on in red. */
@keyframes direction-icon-wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20% { transform: translateY(-5px) rotate(-10deg); }
  40% { transform: translateY(0) rotate(8deg); }
  60% { transform: translateY(-3px) rotate(-6deg); }
  80% { transform: translateY(0) rotate(4deg); }
}
@keyframes robot-ear-flap {
  0%, 100% { transform: rotate(0deg); }
  20%, 60% { transform: rotate(calc(30deg * var(--ear-dir))); }
  40%, 80% { transform: rotate(calc(-12deg * var(--ear-dir))); }
}
/* A big, bright red lamp with a two-layer glow so it reads clearly against
   the green head and tile. */
@keyframes robot-light-on {
  0%        { fill: var(--c-coral); transform: scale(1); filter: none; }
  15%, 45%  { fill: #ff1a1a; transform: scale(2.4); filter: drop-shadow(0 0 1.5px #ff0000) drop-shadow(0 0 4px rgba(255, 0, 0, 0.85)); }
  30%       { fill: var(--c-coral); transform: scale(1.2); filter: none; }
  60%, 100% { fill: #ff1a1a; transform: scale(2.4); filter: drop-shadow(0 0 1.5px #ff0000) drop-shadow(0 0 5px rgba(255, 0, 0, 0.9)); }
}
body.skald-landing .direction-icon--robot { --icon-anim: direction-icon-wave 1.1s ease-in-out; }
/* Each ear pivots where it meets the head; positive turns the left one up. */
body.skald-landing .direction-icon svg .robot-ear--left  { --ear-dir: 1;  transform-origin: 100% 100%; }
body.skald-landing .direction-icon svg .robot-ear--right { --ear-dir: -1; transform-origin: 0% 100%; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .robot-ear {
  animation: robot-ear-flap 1.1s ease-in-out both;
}
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .robot-light {
  animation: robot-light-on 1.1s linear both;
}

/* Web: the HTML / CSS / JS badges orbit once round the centre while staying
   upright, so their labels are readable the whole way round. Nothing is
   rotated: an animated angle (--orbit) moves each badge's position along
   the circle with cos()/sin().
   The badges are vector (inline SVG with real text), so they stay crisp
   at any zoom or hover scale — a shrunk-down raster can't. --bw/--bh are
   each badge's size in px, matching its viewBox. */
@property --orbit { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@keyframes web-badges-orbit { from { --orbit: 0deg; } to { --orbit: 360deg; } }
body.skald-landing .direction-icon--web { --icon-anim: web-badges-orbit 1.2s cubic-bezier(0.45, 0, 0.25, 1); }
body.skald-landing .web-badges { position: relative; display: block; width: 100%; height: 100%; --r: 12.5px; }
body.skald-landing .direction-icon .web-badge {
  position: absolute;
  width: calc(var(--bw) * 1px); height: calc(var(--bh) * 1px);
  left: calc(50% + cos(var(--a0) + var(--orbit)) * var(--r) - var(--bw) * 0.5px);
  top: calc(50% + sin(var(--a0) + var(--orbit)) * var(--r) - var(--bh) * 0.5px);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18));
}
body.skald-landing .web-badge text {
  font: 700 7px/1 Arial, Helvetica, sans-serif;
  text-anchor: middle; dominant-baseline: central;
  fill: #fff;
}
body.skald-landing .web-badge--js text { fill: #222; }
/* --a0: each badge's starting angle on the circle — top-left, top-right
   and bottom, a triangle like the original badge set. */
body.skald-landing .web-badge--html { --bw: 22; --bh: 12; --a0: 210deg; }
body.skald-landing .web-badge--css  { --bw: 19; --bh: 12; --a0: 330deg; }
body.skald-landing .web-badge--js   { --bw: 15; --bh: 12; --a0: 90deg; }

/* Games: the controller rumbles while the d-pad rocks, the two buttons
   get pressed in turn, the ring flashes and the spark on top jumps. */
@keyframes direction-icon-rumble {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  10%, 50%, 90% { transform: translate(-1.5px, 1px) rotate(-5deg); }
  30%, 70% { transform: translate(1.5px, -1px) rotate(5deg); }
}
@keyframes game-dpad-rock {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-1.5px); }
  50% { transform: translateX(1.5px); }
  75% { transform: translateY(1.5px); }
}
@keyframes game-btn-press {
  0%, 100% { fill: var(--c-ink); transform: scale(1); }
  35%, 60% { fill: var(--c-coral); transform: scale(0.7); }
  80% { fill: var(--c-coral); transform: scale(1.15); }
}
@keyframes game-ring-flash {
  0%, 100% { transform: scale(1); stroke-width: 1.5; }
  50% { transform: scale(1.35); stroke-width: 2.2; }
}
@keyframes game-spark-jump {
  0%, 50%, 100% { transform: translateY(0); }
  25%, 75% { transform: translateY(-3px); }
}
body.skald-landing .direction-icon--games { --icon-anim: direction-icon-rumble 0.6s linear; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .game-dpad { animation: game-dpad-rock 0.8s ease-in-out both; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .game-btn { animation: game-btn-press 0.45s ease-out both; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .game-btn--a { animation-delay: 0.1s; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .game-btn--b { animation-delay: 0.45s; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .game-ring { animation: game-ring-flash 0.4s ease-out 0.75s both; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .game-spark { animation: game-spark-jump 0.8s ease-in-out both; }

/* Software: the prompt clears and three lines of code type themselves out,
   one after another (for … / if … / print()), then the check mark pops —
   the program ran. The lines stay written while the card is hovered. */
@keyframes code-prompt-clear { to { opacity: 0; } }
@keyframes code-line-type    { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes code-check-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.4); }
  75% { transform: scale(0.9); }
}
body.skald-landing .direction-icon--software { --icon-anim: none; }
body.skald-landing .direction-icon svg .code-line { transform: scaleX(0); transform-origin: 0% 50%; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .code-prompt { animation: code-prompt-clear 0.15s ease-out both; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .code-line { animation: code-line-type 0.4s steps(6, end) both; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .code-line--1 { animation-delay: 0.15s; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .code-line--2 { animation-delay: 0.6s; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .code-line--3 { animation-delay: 1.05s; }
body.skald-landing .direction-card:is(:hover, :has(summary:focus-visible)) .code-check { animation: code-check-pop 0.45s ease-out 1.5s both; }

/* ---- Program ---- */

/* ---- Schedule ---- */

body.skald-landing .schedule-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9rem; }
body.skald-landing .schedule-day {
  background: var(--surface); border-radius: 16px; padding: 1rem; text-align: center;
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 0.5rem;
}
body.skald-landing .schedule-day h4 {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 0.3rem;
}
body.skald-landing .schedule-note { text-align: center; margin-top: 2rem; color: var(--muted); font-size: 0.88rem; }

/* Weekend-only schedule: two day cards, each holding two clickable
   half-day slots. The doubled class in these selectors keeps them
   winning over the generic .schedule-grid/.schedule-day column-count
   rules (including the responsive ones further down) regardless of
   source order, instead of depending on where in the file this sits. */
body.skald-landing .schedule-grid.schedule-grid--weekend {
  grid-template-columns: repeat(2, 1fr); max-width: 640px; margin: 0 auto; gap: 1.5rem;
}
body.skald-landing .schedule-day.schedule-day--weekend {
  padding: 1.5rem; gap: 0.75rem; text-align: left;
}
body.skald-landing .schedule-day--weekend h4 {
  font-size: 1rem; text-transform: none; letter-spacing: normal; color: var(--text); font-weight: 900; margin-bottom: 0.2rem;
}
body.skald-landing .schedule-slot {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.9rem 1.1rem; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--border);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.skald-landing .schedule-slot:hover {
  border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none;
}
body.skald-landing .schedule-slot-time { font-weight: 900; font-size: 1.05rem; color: var(--text); }
body.skald-landing .schedule-slot-detail { font-size: 0.8rem; color: var(--muted); }
@media (max-width: 560px) {
  body.skald-landing .schedule-grid.schedule-grid--weekend { grid-template-columns: 1fr; }
}

/* ---- Pricing ---- */
body.skald-landing .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
/* Equal-height cards: the grid already stretches its direct children (the
   .skald-reveal wrappers) to match row height — these two just carry that
   full height down through the wrapper divs so .pricing-card actually
   fills it. The card's own flex-column + .pricing-features{flex:1} then
   pushes any leftover room into the gap right after the last bullet,
   which lines up both cards' buttons at the same bottom edge. */
body.skald-landing .pricing-grid .skald-reveal,
body.skald-landing .pricing-grid .skald-reveal-inner { height: 100%; }
body.skald-landing .pricing-card {
  position: relative; border-radius: 22px; padding: 2rem; height: 100%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column;
}
body.skald-landing .pricing-card--highlight { background: var(--primary); border-color: transparent; }
body.skald-landing .pricing-sessions { font-size: 0.75rem; font-weight: 700; color: #a09888; margin-bottom: 0.3rem; }
body.skald-landing .pricing-card--highlight .pricing-sessions { color: rgba(255,255,255,0.7); }
body.skald-landing .pricing-card h3 { color: #e8e0d8; font-size: 1.2rem; }
body.skald-landing .pricing-card--highlight h3 { color: #fff; }
body.skald-landing .pricing-desc { color: #8a8070; font-size: 0.88rem; margin-bottom: 1.25rem; }
body.skald-landing .pricing-card--highlight .pricing-desc { color: rgba(255,255,255,0.75); }
body.skald-landing .pricing-amount { font-size: 2.75rem; font-weight: 900; color: #e8e0d8; margin-bottom: 1.25rem; }
body.skald-landing .pricing-card--highlight .pricing-amount { color: #fff; }
body.skald-landing .pricing-features { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; margin-bottom: 1.75rem; flex: 1; }
body.skald-landing .pricing-features li {
  font-size: 0.88rem; color: #a09888; padding-left: 1.35rem; position: relative;
}
body.skald-landing .pricing-card--highlight .pricing-features li { color: rgba(255,255,255,0.85); }
body.skald-landing .pricing-features li::before {
  content: "✓"; position: absolute; left: 0; color: var(--tc, var(--c-mint)); font-weight: 900;
}
body.skald-landing .pricing-card--highlight .pricing-features li::before { color: var(--c-sun); }
body.skald-landing .pricing-note { text-align: center; margin-top: 2rem; color: #a09888; font-size: 0.85rem; }

/* ---- Teachers ---- */
body.skald-landing .teachers-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
  max-width: 760px; margin: 0 auto;
}
/* Equal-height cards, same fix as the pricing cards: the grid already
   stretches its direct children to match row height — these carry that
   height down through the wrapper divs so the card can actually fill
   it, then the bio line absorbs the leftover space so the skill tags
   stay pinned to the bottom of every card regardless of bio length. */
body.skald-landing .teachers-grid .skald-reveal,
body.skald-landing .teachers-grid .skald-reveal-inner { height: 100%; }
body.skald-landing .teacher-card {
  background: var(--surface); border-radius: 22px; overflow: hidden;
  box-shadow: var(--shadow); border: 2px solid transparent; height: 100%;
  display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
body.skald-landing .teacher-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-4px); border-color: var(--tc); }
body.skald-landing .teacher-photo { height: 420px; background: color-mix(in srgb, var(--tc) 30%, transparent); }
body.skald-landing .teacher-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
body.skald-landing .teacher-photo-link { position: relative; display: block; text-decoration: none; }
body.skald-landing .teacher-photo-badge {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%);
  background: rgba(45,42,34,0.8); color: #fff; font-size: 0.7rem; font-weight: 700;
  padding: 0.3rem 0.75rem; border-radius: 999px; white-space: nowrap;
  transition: transform 0.2s ease, background 0.2s ease;
}
body.skald-landing .teacher-photo-link:hover .teacher-photo-badge {
  background: var(--text); transform: translateX(-50%) translateY(-2px);
}
body.skald-landing .teacher-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
body.skald-landing .teacher-body h3 { font-size: 1rem; margin-bottom: 0.15rem; }
body.skald-landing .teacher-role { color: var(--primary); font-size: 0.8rem; font-weight: 700; margin-bottom: 0.6rem; }
body.skald-landing .teacher-highlights {
  list-style: none; margin: 0 0 0.9rem; padding: 0;
  display: flex; flex-direction: column; gap: 0.4rem;
}
body.skald-landing .teacher-highlights li {
  position: relative; padding-left: 1rem;
  color: var(--muted); font-size: 0.82rem; line-height: 1.5;
}
body.skald-landing .teacher-highlights li::before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--tc);
}
body.skald-landing .teacher-bio { color: var(--muted); font-size: 0.82rem; line-height: 1.55; margin-bottom: 0.9rem; flex: 1; }
body.skald-landing .teacher-skills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
body.skald-landing .teacher-skills span {
  font-size: 0.72rem; font-weight: 600; padding: 0.2rem 0.5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--tc) 35%, transparent); color: var(--text);
}

/* ---- CTA + Footer ---- */
body.skald-landing .landing-cta { position: relative; overflow: hidden; background: var(--primary); padding: 5rem 0; text-align: center; color: #fff; }
body.skald-landing .landing-cta-inner { position: relative; z-index: 2; }
body.skald-landing .landing-cta h2 { color: #fff; font-size: 2.4rem; }
body.skald-landing .landing-cta p { color: rgba(255,255,255,0.8); font-size: 1.05rem; margin-bottom: 1.75rem; line-height: 1.6; }
body.skald-landing .landing-footer { background: #221e2a; color: #7a7060; padding: 3rem 0 0; }
/* The brand's dark green/blue read fine on light section backgrounds,
   but both go nearly invisible against a near-black footer — luminance
   this low is where the eye stops distinguishing hue at all. Brighter
   variants, scoped to just the footer, keep the same colors recognizable
   without touching how "Lab"/"Solutions" look anywhere else. */
body.skald-landing .landing-footer .lab-color { color: #5aa73f; }
body.skald-landing .landing-footer .solutions-color { color: #5b8ad6; }
/* "Skald Lab" / "Skald Solutions" here are real links (to the hero and
   to a mailto respectively) but should read as the same brand-colored
   text as everywhere else, not as an obvious blue underlined link. */
body.skald-landing .landing-footer-inline-link,
body.skald-landing .landing-footer-inline-link:hover { text-decoration: none; }
body.skald-landing .landing-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; padding-bottom: 2.5rem; }
body.skald-landing .landing-footer-grid .landing-logo { color: #fff; }
body.skald-landing .landing-footer-logos {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem; margin-bottom: 0.9rem;
}
/* The logo artwork (dark green + gold) has no light-background variant,
   so on the footer's near-black background its dark portions vanish and
   stray white highlight details in the art read as floating specks. A
   light chip behind it — matching how it already sits on the white nav —
   is what actually makes it legible here, not a color filter that would
   flatten the two-tone artwork. */
body.skald-landing .landing-logo--footer {
  display: inline-flex; background: var(--surface); border-radius: 12px; padding: 0.5rem 0.9rem;
}
body.skald-landing .landing-footer-parent-logo { display: block; }
body.skald-landing .landing-footer-grid > div > p { font-size: 0.85rem; line-height: 1.55; }
body.skald-landing .landing-footer-credit { font-size: 0.78rem; opacity: 0.75; margin-bottom: 0.5rem; }
body.skald-landing .landing-footer-grid h4 { color: #fff; font-size: 0.88rem; margin-bottom: 0.75rem; }
body.skald-landing .landing-footer-grid ul { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
body.skald-landing .landing-footer-grid ul a { color: #7a7060; font-size: 0.85rem; }
body.skald-landing .landing-footer-grid ul a:hover { color: var(--c-mint); text-decoration: none; }
body.skald-landing .landing-footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06); padding: 1rem 1.5rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; font-size: 0.75rem;
}
body.skald-landing .landing-footer-bottom > div,
body.skald-landing .landing-footer-bottom { max-width: 1160px; margin: 0 auto; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  body.skald-landing .landing-directions-grid,
  body.skald-landing .pricing-grid { grid-template-columns: 1fr; }
  body.skald-landing .teachers-grid { grid-template-columns: repeat(2, 1fr); }
  body.skald-landing .schedule-grid { grid-template-columns: repeat(3, 1fr); }
  body.skald-landing .landing-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  body.skald-landing .landing-links { display: none; }
  body.skald-landing .landing-nav-inner .landing-login-btn { display: none; }
  body.skald-landing .landing-menu-toggle { display: flex; }
  body.skald-landing .teachers-grid { grid-template-columns: 1fr; }
  body.skald-landing .schedule-grid { grid-template-columns: repeat(2, 1fr); }
  body.skald-landing .landing-footer-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Skald Lab landing page — decorative animation and scroll-reveal.
   Scoped to
   body.skald-landing, driven by static/js/main.js.
   ========================================================= */
@keyframes skald-float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-18px) rotate(4deg); }
  66% { transform: translateY(-8px) rotate(-3deg); }
}
@keyframes skald-float2 {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-26px) scale(1.04); }
}
@keyframes skald-float3 {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  40% { transform: translateX(14px) rotate(5deg); }
  80% { transform: translateX(-9px) rotate(-4deg); }
}
@keyframes skald-blob-morph {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
  25%  { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
  50%  { border-radius: 50% 60% 30% 60% / 30% 70% 50% 60%; }
  75%  { border-radius: 40% 60% 60% 30% / 70% 30% 60% 50%; }
}
@keyframes skald-spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

@keyframes skald-wiggle {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50% { transform: rotate(4deg) scale(1.08); }
}

/* ---- Background shapes ---- */
body.skald-landing .bg-shapes { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
body.skald-landing .bg-shape { position: absolute; }
/* Per-section decoration: size, position, colour and animation offset of
   each background shape. The doubled class outranks the .bg-shape--*
   animation shorthands so each shape keeps its own delay/direction. */
body.skald-landing .bg-shape.shape-hero-1 { width:360px; height:360px; top:-70px; right:-70px; opacity:0.1; }
body.skald-landing .bg-shape.shape-hero-2 { width:300px; height:300px; top:25%; left:-90px; opacity:0.25; background:radial-gradient(circle at 40% 40%, #c8b4a0, #ede0d4); }
body.skald-landing .bg-shape.shape-hero-3 { width:88px; height:88px; top:38%; right:9%; opacity:0.2; animation-delay:-2s; }
body.skald-landing .bg-shape.shape-hero-4 { width:210px; height:210px; bottom:14%; left:16%; opacity:0.12; border:2px solid var(--c-ink); border-radius:50%; animation-direction:reverse; }
body.skald-landing .bg-shape.shape-hero-5 { width:64px; height:64px; bottom:32%; right:19%; opacity:0.18; background:var(--c-sun); transform:rotate(18deg); animation-delay:-3s; }
body.skald-landing .bg-shape.shape-hero-6 { width:54px; height:54px; top:62%; left:7%; opacity:0.18; animation-delay:-5s; }
body.skald-landing .bg-shape.shape-directions-1 { width:320px; height:320px; top:-100px; right:-80px; opacity:0.15; background:var(--c-olive); }
body.skald-landing .bg-shape.shape-directions-2 { width:208px; height:208px; bottom:-40px; left:5%; opacity:0.1; background:var(--c-coral); border-radius:50%; animation-delay:-3s; }
body.skald-landing .bg-shape.shape-how-1 { width:384px; height:384px; top:-120px; left:-100px; opacity:0.1; background:var(--c-olive); }
body.skald-landing .bg-shape.shape-how-2 { width:224px; height:224px; bottom:-60px; right:-40px; opacity:0.08; background:var(--c-lavender); border-radius:50%; animation-delay:-4s; }
body.skald-landing .bg-shape.shape-schedule-1 { width:260px; height:260px; top:-60px; left:-60px; opacity:0.08; animation-direction:reverse; }
body.skald-landing .bg-shape.shape-schedule-2 { width:144px; height:144px; bottom:10%; right:5%; opacity:0.2; background:var(--c-sun); border-radius:50%; animation-delay:-4s; }
body.skald-landing .bg-shape.shape-pricing-1 { width:384px; height:384px; top:-120px; left:-100px; opacity:0.1; background:var(--c-olive); }
body.skald-landing .bg-shape.shape-pricing-2 { width:288px; height:288px; bottom:-80px; right:-60px; opacity:0.08; background:var(--c-coral); animation-delay:-5s; }
body.skald-landing .bg-shape.shape-pricing-3 { width:288px; height:288px; top:10%; right:8%; opacity:0.08; border:1.5px dashed var(--c-cream); border-radius:50%; }
body.skald-landing .bg-shape.shape-teachers-1 { width:224px; height:224px; top:5%; right:-4%; opacity:0.15; background:var(--c-olive); border-radius:50%; animation-delay:-2s; }
body.skald-landing .bg-shape.shape-teachers-2 { width:160px; height:160px; bottom:8%; left:-3%; opacity:0.12; background:var(--c-lavender); border-radius:50%; animation-delay:-6s; }
body.skald-landing .bg-shape.shape-teachers-3 { inset:0; background-image:radial-gradient(circle, rgba(107,124,51,0.06) 1px, transparent 1px); background-size:28px 28px; }
body.skald-landing .bg-shape.shape-contact-1 { width:320px; height:320px; top:-100px; right:10%; opacity:0.2; background:var(--c-sun); }
body.skald-landing .bg-shape.shape-contact-2 { width:240px; height:240px; bottom:-60px; left:5%; opacity:0.15; background:var(--c-coral); animation-delay:-4s; }
body.skald-landing .bg-shape.shape-contact-3 { width:500px; height:500px; top:50%; left:50%; transform:translate(-50%,-50%); opacity:0.08; border:2px dashed rgba(255,255,255,0.4); border-radius:50%; }
body.skald-landing .bg-shape.shape-contact-4 { width:80px; height:80px; top:20%; left:12%; opacity:0.15; animation-delay:-2s; }
body.skald-landing .bg-shape.shape-facts-1 { width:320px; height:320px; top:-90px; left:-80px; opacity:0.1; background:var(--c-olive); }
body.skald-landing .bg-shape.shape-facts-2 { width:220px; height:220px; bottom:-60px; right:-60px; opacity:0.12; background:var(--c-lavender); border-radius:50%; animation-delay:-3s; }
body.skald-landing .bg-shape.shape-facts-3 { width:260px; height:260px; top:10%; right:6%; opacity:0.07; border:1.5px dashed var(--c-cream); border-radius:50%; }
body.skald-landing .bg-shape.shape-facts-4 { width:90px; height:90px; bottom:14%; left:6%; opacity:0.12; background:var(--c-sun); transform:rotate(18deg); animation-delay:-2s; }
body.skald-landing .bg-shape.shape-gallery-1 { width:460px; height:460px; top:-150px; right:-120px; opacity:0.15; background:var(--c-olive); }
body.skald-landing .bg-shape.shape-gallery-2 { width:300px; height:300px; bottom:-70px; left:5%; opacity:0.1; background:var(--c-coral); border-radius:50%; animation-delay:-3s; }
body.skald-landing .bg-shape--blob { animation: skald-blob-morph 10s ease-in-out infinite; }
body.skald-landing .bg-shape--f1 { animation: skald-float1 6s ease-in-out infinite; }
body.skald-landing .bg-shape--f2 { animation: skald-float2 8s ease-in-out infinite; }
body.skald-landing .bg-shape--f3 { animation: skald-float3 7s ease-in-out infinite; }
body.skald-landing .bg-shape--spin { animation: skald-spin-slow 22s linear infinite; }
body.skald-landing .landing-origin-mark.is-wiggling { display: inline-block; animation: skald-wiggle 2.2s ease-in-out infinite; }

/* ---- Scroll-reveal ----
   A plain fade + gentle rise as content scrolls into view. Uses a CSS
   *animation* rather than a transition, on purpose: a transition triggered
   by adding/removing a class is unreliable to restart (the browser can
   coalesce a fast remove-then-add into nothing happening at all, which is
   what caused the "bump into place" on a repeat visit). An animation reset
   via the standard `animation: none` + reflow + clear trick restarts
   cleanly every time. */
@keyframes skald-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  /* `none`, not translateY(0): a transform left filled in keeps the
     revealed content on its own compositing layer, softening its text. */
  to   { opacity: 1; transform: none; }
}
body.skald-landing .skald-reveal > .skald-reveal-inner { opacity: 0; transform: translateY(16px); }
body.skald-landing .skald-reveal.is-visible > .skald-reveal-inner {
  animation: skald-fade-in 0.5s ease forwards;
}

/* CTA's three stacked actions (create profile / call / email) instead of
   the default side-by-side row — direct tel:/mailto: links, no popup, so
   tapping either on a phone goes straight to the dialer or mail app with
   the number/address already loaded. */
body.skald-landing .landing-hero-actions--stacked {
  flex-direction: column; align-items: stretch; max-width: 360px; margin-left: auto; margin-right: auto;
}
body.skald-landing .landing-hero-actions--stacked .btn { width: 100%; box-sizing: border-box; }

/* ---- Facts page: static cards ----
   Text + image, no present/click interaction — the presents live only
   in their own per-section spots elsewhere on the page. */
body.skald-landing .facts-heading {
  text-align: center; color: #fff; margin-bottom: 2.5rem;
  font-size: clamp(1.9rem, 4vw, 2.6rem);
  display: flex; align-items: center; justify-content: center; gap: 0.55rem;
}
body.skald-landing .facts-heading-mark {
  display: inline-block; font-size: 0.75em; color: var(--primary);
  animation: skald-wiggle 2.2s ease-in-out infinite;
}
body.skald-landing .facts-heading-accent { color: var(--primary); }
body.skald-landing .facts-cards-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
/* Same trick as the pricing/teacher grids: the grid already stretches each
   .skald-reveal wrapper to its row's height — carry that height down to the
   card so every card in a row is equally tall. The text's flex:1 then pins
   the "who" line and the link to the same bottom edge across the row. */
body.skald-landing .facts-cards-grid .skald-reveal,
body.skald-landing .facts-cards-grid .skald-reveal-inner { height: 100%; }
body.skald-landing .fact-card {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  border-radius: 18px; padding: 1.5rem; display: flex; flex-direction: column;
  height: 100%; box-sizing: border-box;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
body.skald-landing .fact-card.is-highlighted {
  animation: fact-card-glow 3.2s ease-in-out 1 forwards;
}
@keyframes fact-card-glow {
  0% {
    border-color: var(--fc, var(--c-mint));
    background: color-mix(in srgb, var(--fc, var(--c-mint)) 12%, rgba(255,255,255,0.06));
    box-shadow: 0 0 0 2px var(--fc, var(--c-mint)), 0 0 0 0 var(--fc, var(--c-mint));
  }
  18% { box-shadow: 0 0 0 2px var(--fc, var(--c-mint)), 0 0 46px 6px var(--fc, var(--c-mint)); }
  36% { box-shadow: 0 0 0 2px var(--fc, var(--c-mint)), 0 0 12px 0 var(--fc, var(--c-mint)); }
  54% { box-shadow: 0 0 0 2px var(--fc, var(--c-mint)), 0 0 40px 4px var(--fc, var(--c-mint)); }
  100% {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent;
  }
}
body.skald-landing .facts-back-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-bottom: 2rem; padding: 0.5rem 1.1rem; font-size: 0.85rem;
}
body.skald-landing .fact-card-image {
  width: 44px; height: 44px; margin-bottom: 1rem;
  padding: 9px; box-sizing: border-box; border-radius: 12px;
  background: color-mix(in srgb, var(--fc, var(--c-mint)) 25%, white);
}
/* Lighter than the page's 900-weight headings: at card size, white on dark,
   Alegreya Black's heavy strokes (plus the headings' tightened tracking)
   run together and read as blurry. */
body.skald-landing .fact-card-title {
  color: #fff; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.005em; line-height: 1.3;
  margin-bottom: 0.6rem;
}
body.skald-landing .fact-card-emoji {
  display: grid; place-items: center;
  font-size: 1.35rem; line-height: 1; padding: 0;
}
body.skald-landing .fact-card-text { color: #E8DFD0; font-size: 0.88rem; line-height: 1.6; flex: 1; margin-bottom: 1rem; }
body.skald-landing .fact-card-person {
  color: var(--c-cream); font-size: 0.8rem; line-height: 1.45; margin-bottom: 0.9rem;
  padding-top: 0.75rem; border-top: 1px solid rgba(255,255,255,0.1);
}
body.skald-landing .fact-card-person-label { color: var(--fc, var(--c-mint)); font-weight: 700; }
body.skald-landing .fact-card-link {
  color: var(--fc, var(--c-mint)); font-weight: 700; font-size: 0.82rem;
  display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 5px;
}
body.skald-landing .fact-card-link-question { text-decoration: underline; text-underline-offset: 2px; }
body.skald-landing .fact-card-link-tag { font-weight: 600; opacity: 0.7; }
@media (max-width: 900px) {
  body.skald-landing .facts-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  body.skald-landing .facts-cards-grid { grid-template-columns: 1fr; }
}

/* ---- Gallery page: real session photos with hover-out details ---- */
body.skald-landing .gallery-photo-grid { display: flex; flex-direction: column; gap: 1.75rem; }
body.skald-landing .gallery-photo-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 20px;
  overflow: hidden; box-shadow: var(--shadow); cursor: pointer;
}
body.skald-landing .gallery-photo-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
body.skald-landing .gallery-photo-wrap { position: relative; }
body.skald-landing .gallery-photo { display: block; width: 100%; height: auto; }
body.skald-landing .gallery-photo-ai-badge {
  position: absolute; top: 0.75rem; right: 0.75rem; z-index: 1;
  background: rgba(20,18,14,0.72); color: #fff; font-size: 0.72rem; font-weight: 700;
  padding: 0.32rem 0.7rem; border-radius: 999px; letter-spacing: 0.01em;
  backdrop-filter: blur(3px);
}
body.skald-landing .gallery-photo-bar {
  display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.5rem;
}
body.skald-landing .gallery-photo-icon {
  flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 12%, white);
  display: flex; align-items: center; justify-content: center;
}
body.skald-landing .gallery-photo-icon img { width: 1.3rem; height: 1.3rem; transition: transform 0.6s ease; }
body.skald-landing .gallery-photo-card:hover .gallery-photo-icon img,
body.skald-landing .gallery-photo-card:focus-within .gallery-photo-icon img,
body.skald-landing .gallery-photo-card.is-open .gallery-photo-icon img { transform: rotate(360deg); }
body.skald-landing .gallery-photo-title { font-size: 1.1rem; margin: 0; }
/* Collapsed by default; sliding the detail paragraph out on hover/focus
   (not just fading it) is what reads as the panel actually opening. */
body.skald-landing .gallery-photo-detail {
  max-height: 0; overflow: hidden; padding: 0 1.5rem;
  transition: max-height 0.45s ease, padding 0.45s ease;
}
body.skald-landing .gallery-photo-detail p { margin: 0 0 1.25rem; color: var(--muted); font-size: 0.92rem; line-height: 1.65; }
body.skald-landing .gallery-photo-card:hover .gallery-photo-detail,
body.skald-landing .gallery-photo-card:focus-within .gallery-photo-detail,
body.skald-landing .gallery-photo-card.is-open .gallery-photo-detail {
  max-height: 280px; padding: 0 1.5rem 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  body.skald-landing .bg-shape,
  body.skald-landing .landing-origin-mark.is-wiggling,
  body.skald-landing .landing-opening-dot { animation: none; }
  body.skald-landing .skald-reveal > .skald-reveal-inner { opacity: 1; transform: none; animation: none; }
  body.skald-landing .direction-icon,
  body.skald-landing .direction-icon * { animation: none !important; }
  body.skald-landing .direction-card:hover { transform: none; }
}
.skald-color {
 color: var(--skald);
}
.lab-color {
 color: var(--lab);
}
.solutions-color {
 color: #1d488a;
}
body.skald-landing .landing-how { margin-bottom: 0; max-width: 720px; }
body.skald-landing .landing-how p { font-size: 1.1rem; line-height: 1.75; color: #d8d0c4; }

body.skald-landing .landing-address { display: inline; font-style: normal; }
body.skald-landing .landing-map {
  margin: 2rem auto 0; max-width: 560px; border-radius: 18px; overflow: hidden;
  background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}
body.skald-landing .landing-map iframe { display: block; width: 100%; aspect-ratio: 16 / 10; border: 0; }
body.skald-landing .landing-map figcaption { padding: 0.9rem; background: var(--nav-bg); }