/* =====================================================================
   HOMEROOM — Home Tutoring Booking Platform
   Core stylesheet: design tokens, base, components, animation utilities
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. DESIGN TOKENS
   --------------------------------------------------------------------- */
:root{
  /* Brand palette */
  --ink:            #1B2A4A;   /* deep navy — primary */
  --ink-700:        #263B63;
  --ink-100:        #E8ECF4;
  --marigold:       #E8A33D;   /* warm accent */
  --marigold-600:   #D48F27;
  --marigold-100:   #FBEBD2;
  --sage:           #6B8F71;   /* secondary */
  --sage-600:       #56765C;
  --sage-100:       #E4EDE5;
  --paper:          #FAF7F1;   /* warm background */
  --paper-deep:     #F2EDE3;
  --surface:        #FFFFFF;
  --text:           #232532;
  --text-muted:     #666B7A;
  --text-soft:      #8A8F9C;
  --line:           #E7E1D5;
  --danger:         #C0503E;
  --success:        #4C8B5C;

  /* Constant brand-navy used for solid "ink band" sections/elements
     (hero bands, CTA bands, page-hero, skip-link, auth visual).
     Deliberately NOT redefined in dark-mode.css: these pair with a
     hardcoded white/near-white text color, so the band itself must
     stay a fixed dark navy in both themes or the text disappears. */
  --ink-solid:      #1B2A4A;

  /* Typography */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Radius / shadow */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 26px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 10px rgba(27,42,74,.06);
  --shadow-md: 0 10px 30px rgba(27,42,74,.10);
  --shadow-lg: 0 24px 60px rgba(27,42,74,.16);

  /* Motion */
  --ease: cubic-bezier(.22,.85,.32,1);
  --dur-fast: .22s;
  --dur-med: .45s;
  --dur-slow: .8s;

  /* Layout */
  --container: 1220px;
  --header-h: 84px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* Scoped (not on html/body) so it can't interfere with the sticky header,
   which sits outside <main> — this just stops off-screen [data-reveal]
   elements (translateX before they scroll into view) from creating any
   real horizontal scroll. */
main{ overflow-x:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent; }
button{ font-family:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,h5{ margin:0; font-family:var(--font-display); color:var(--ink); font-weight:600; letter-spacing:-.01em; }
p{ margin:0; }

.container{ max-width:var(--container); margin:0 auto; padding:0 24px; }
@media (max-width:640px){ .container{ padding:0 18px; } }

:focus-visible{ outline:3px solid var(--marigold); outline-offset:3px; border-radius:4px; }

/* skip link */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--ink-solid); color:#fff; padding:10px 18px; border-radius:0 0 8px 0; z-index:999; }
.skip-link:focus{ left:0; }

/* ---------------------------------------------------------------------
   2. TYPE SCALE
   --------------------------------------------------------------------- */
.h-display{ font-size:clamp(2.6rem,5vw,4.4rem); line-height:1.04; }
.h1{ font-size:clamp(2.1rem,3.6vw,3.2rem); line-height:1.08; }
.h2{ font-size:clamp(1.7rem,2.6vw,2.35rem); line-height:1.15; }
.h3{ font-size:1.35rem; line-height:1.3; }
.lede{ font-size:1.15rem; line-height:1.6; color:var(--text-muted); }
.eyebrow{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-weight:700; font-size:.8rem; color:var(--sage-600); }
.eyebrow::before{ content:''; width:20px; height:2px; background:var(--marigold); border-radius:2px; }

/* signature underline squiggle — the ONE recurring flourish */
.underline-flourish{ position:relative; display:inline-block; }
.underline-flourish svg{ position:absolute; left:0; right:0; bottom:-.14em; width:100%; height:.32em; }

/* ---------------------------------------------------------------------
   3. BUTTONS
   --------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; border-radius:var(--r-pill); font-weight:700; font-size:.95rem;
  border:2px solid transparent; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--ink); color:#fff; box-shadow:var(--shadow-sm); }
.btn-primary:hover{ background:var(--ink-700); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-accent{ background:var(--marigold); color:var(--ink); box-shadow:var(--shadow-sm); }
.btn-accent:hover{ background:var(--marigold-600); box-shadow:var(--shadow-md); transform:translateY(-2px); }
.btn-outline{ background:transparent; border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:#fff; transform:translateY(-2px); }
.btn-ghost{ background:var(--ink-100); color:var(--ink); }
.btn-ghost:hover{ background:var(--sage-100); color:var(--sage-600); }
.btn-sm{ padding:9px 18px; font-size:.85rem; }
.btn-block{ width:100%; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; transform:none !important; }

/* ---------------------------------------------------------------------
   4. HEADER
   --------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:200; width:100%;
  background:rgba(250,247,241,.7); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:background var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
  animation: headerSlideIn .5s var(--ease) both;
}
.site-header.is-scrolled{ background:rgba(250,247,241,.94); box-shadow:var(--shadow-sm); border-color:var(--line); }
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:var(--header-h); gap:16px; }

.logo{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--ink); flex-shrink:0; transition:transform var(--dur-fast) var(--ease); }
.logo:hover{ transform:translateY(-1px); }
.logo .logo-mark{ width:38px; height:38px; border-radius:12px; background:var(--marigold); display:flex; align-items:center; justify-content:center; color:var(--ink); font-family:var(--font-display); font-weight:700; transition:transform var(--dur-fast) var(--ease); }
.logo:hover .logo-mark{ transform:rotate(-6deg) scale(1.06); }

.main-nav{ display:flex; align-items:center; gap:4px; flex-wrap:nowrap; }
.main-nav > li{ position:relative; }
nav[aria-label="Primary"]{ min-width:0; }
.nav-link{ display:flex; align-items:center; gap:6px; padding:10px 16px; border-radius:var(--r-pill); font-weight:600; font-size:.94rem; color:var(--ink); transition:background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nav-link:hover, .nav-link.is-active{ background:var(--ink-100); }
.nav-link .caret{ width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform var(--dur-fast) var(--ease); }
.has-dropdown:hover .caret{ transform:rotate(225deg); margin-top:3px; }

.dropdown-panel{
  position:absolute; top:calc(100% + 10px); left:0; min-width:190px; background:var(--surface);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:8px; border:1px solid var(--line);
  opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast);
}
.has-dropdown:hover .dropdown-panel, .has-dropdown:focus-within .dropdown-panel{ opacity:1; visibility:visible; transform:translateY(0); }
.dropdown-panel a{ display:block; padding:10px 14px; border-radius:var(--r-sm); font-size:.92rem; font-weight:600; color:var(--text); }
.dropdown-panel a:hover{ background:var(--paper-deep); color:var(--ink); }

.header-actions{ display:flex; align-items:center; gap:10px; flex-shrink:0; position:relative; z-index:5; }
.icon-toggle{ width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:var(--surface); display:flex; align-items:center; justify-content:center; transition:background var(--dur-fast), transform var(--dur-fast); flex-shrink:0; }
.icon-toggle:hover{ background:var(--paper-deep); transform:translateY(-2px); }
.icon-toggle svg{ width:19px; height:19px; }

.hamburger{
  display:none; width:44px; height:44px; min-width:44px; min-height:44px; border-radius:50%;
  border:1px solid var(--line); background:var(--surface); align-items:center; justify-content:center;
  flex-direction:column; gap:4px; position:relative; z-index:5; touch-action:manipulation;
  -webkit-tap-highlight-color:transparent; transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.hamburger:active{ background:var(--paper-deep); transform:scale(.94); }
.hamburger span{ width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s cubic-bezier(.2,.9,.3,1), opacity .15s ease; pointer-events:none; }
.hamburger.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hamburger.is-open span:nth-child(2){ opacity:0; }
.hamburger.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.mobile-nav{
  position:fixed; top:var(--header-h); right:0; left:0; width:100%;
  max-height:min(80vh, calc(100vh - var(--header-h) - 16px));
  background:var(--surface); z-index:195;
  border-radius:0 0 22px 22px;
  box-shadow:0 24px 60px rgba(20,25,40,.22);
  transform:translateY(-10px); opacity:0; transform-origin:top center;
  transition:transform .24s cubic-bezier(.2,.9,.3,1), opacity .2s ease, visibility .24s;
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 16px 22px;
  pointer-events:none; visibility:hidden;
}
.mobile-nav.is-open{ transform:translateY(0) !important; opacity:1; pointer-events:auto; visibility:visible; }
.mobile-nav-backdrop{
  position:fixed; top:var(--header-h); left:0; right:0; bottom:0; z-index:190;
  background:rgba(15,20,38,.32);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .2s ease, visibility .2s;
}
.mobile-nav-backdrop.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.mobile-nav a{ display:block; padding:11px 4px; font-weight:700; font-size:1.02rem; border-bottom:1px solid var(--line); color:var(--ink); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.mobile-has-dropdown{ border-bottom:1px solid var(--line); }
.mobile-has-dropdown > .mobile-drop-trigger{ display:flex; align-items:center; justify-content:space-between; border-bottom:0; }
.mobile-has-dropdown > .mobile-drop-trigger .caret{ width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-2px; transition:transform .2s ease; }
.mobile-has-dropdown.is-open > .mobile-drop-trigger .caret{ transform:rotate(225deg); margin-top:2px; }
.mobile-dropdown-panel{ max-height:0; overflow:hidden; transition:max-height .22s ease; }
.mobile-has-dropdown.is-open .mobile-dropdown-panel{ max-height:120px; }
.mobile-dropdown-panel a{ border-bottom:0; padding:9px 4px 9px 16px; font-weight:600; font-size:.95rem; color:var(--text-muted); }
.mobile-dropdown-panel a:last-child{ padding-bottom:12px; }
.mobile-nav .mobile-sub{ padding-left:16px; }
.mobile-nav .mobile-sub a{ font-weight:600; font-size:.95rem; color:var(--text-muted); }
.mobile-actions{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-top:14px; }
.mobile-nav a.btn-mobile-login{ display:inline-flex; width:auto; min-width:150px; padding:12px 30px; border-bottom:0; }
.mobile-toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:6px 4px 14px; border-bottom:1px solid var(--line); }
.mobile-toggle-label{ font-weight:700; font-size:.85rem; color:var(--text-muted); }
.mobile-nav-minimal a{ border-bottom:0; }

@media (max-width:1080px){
  .main-nav{ display:none !important; }
  .hamburger{ display:flex !important; }
}
@media (max-width:480px){
  .header-actions .btn{ display:none; } /* Login moves into the mobile menu only once space is genuinely tight */
}
@media (max-width:400px){
  .header-actions .icon-toggle{ display:none; }
}

/* ---------------------------------------------------------------------
   5. HERO / DECORATIVE SHAPES
   --------------------------------------------------------------------- */
.hero{ position:relative; padding:64px 0 40px; overflow:hidden; }
.decor{ position:absolute; z-index:0; pointer-events:none; }
.decor-blob{ border-radius:50%; filter:blur(2px); opacity:.55; }
.float-slow{ animation:floatY 7s ease-in-out infinite; }
.float-slow-rev{ animation:floatY 8.5s ease-in-out infinite reverse; }
.spin-slow{ animation:spinSlow 26s linear infinite; }
@keyframes floatY{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-16px) } }
@keyframes spinSlow{ from{ transform:rotate(0) } to{ transform:rotate(360deg) } }
@keyframes headerSlideIn{ from{ transform:translateY(-100%); opacity:0; } to{ transform:translateY(0); opacity:1; } }

.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; position:relative; z-index:1; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; gap:36px; } }

.hero-media{ position:relative; }
.hero-media img{ border-radius:var(--r-lg); box-shadow:var(--shadow-lg); }
.hero-badge{
  position:absolute; background:var(--surface); border-radius:var(--r-md); box-shadow:var(--shadow-md);
  padding:14px 18px; display:flex; align-items:center; gap:12px; font-weight:700; font-size:.85rem;
}
.hero-badge .badge-icon{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; }

.trust-row{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px; }
@media (max-width:560px){
  .hero-badge{
    position:static !important; margin:10px 0 0; animation:none !important;
    display:inline-flex; max-width:100%;
  }
}
.avatar-stack{ display:flex; }
.avatar-stack img{ width:38px; height:38px; border-radius:50%; border:3px solid var(--paper); margin-left:-12px; object-fit:cover; }
.avatar-stack img:first-child{ margin-left:0; }
.stars{ color:var(--marigold); letter-spacing:2px; }

/* ---------------------------------------------------------------------
   6. SECTIONS / CARDS
   --------------------------------------------------------------------- */
.section{ padding:88px 0; }
.section-tight{ padding:56px 0; }
.cta-section{ padding:24px 0 96px; }
@media (max-width:720px){ .cta-section{ padding:12px 0 64px; } }
.section-head{ max-width:640px; margin-bottom:48px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.section-alt{ background:var(--surface); }
.section-ink{ background:var(--ink-solid); color:#fff; }
.section-ink h2, .section-ink h3{ color:#fff; }
.section-ink .lede{ color:rgba(255,255,255,.72); }

.grid{ display:grid; gap:26px; }
.grid-2{ grid-template-columns:repeat(2,1fr); }
.grid-3{ grid-template-columns:repeat(3,1fr); }
.grid-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:960px){ .grid-3,.grid-4{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .grid-2,.grid-3,.grid-4{ grid-template-columns:1fr; } }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:26px; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:transparent; }

/* subject chip cards */
.subject-card{ text-align:left; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden; }
.subject-icon{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:1.4rem; transition:background var(--dur-med) var(--ease), transform var(--dur-med) var(--ease); }
.subject-card .count{ color:var(--text-soft); font-size:.85rem; font-weight:600; }
.subject-card h3{ transition:color var(--dur-fast) var(--ease); }
.subject-icon svg{ transition:stroke var(--dur-med) var(--ease); }
.subject-card::after{
  content:''; position:absolute; left:26px; right:26px; bottom:0; height:3px; border-radius:3px 3px 0 0;
  background:var(--marigold); transform:scaleX(0); transform-origin:left; transition:transform var(--dur-med) var(--ease);
}
.subject-card:hover, .subject-card:focus-visible{
  transform:translateY(-8px); box-shadow:0 22px 44px rgba(232,163,61,.22); border-color:var(--marigold);
}
.subject-card:hover .subject-icon, .subject-card:focus-visible .subject-icon{ background:var(--marigold) !important; transform:rotate(-8deg) scale(1.1); }
.subject-card:hover .subject-icon svg, .subject-card:focus-visible .subject-icon svg{ stroke:#fff; }
.subject-card:hover h3, .subject-card:focus-visible h3{ color:var(--marigold-600); }
.subject-card:hover::after, .subject-card:focus-visible::after{ transform:scaleX(1); }
.subject-card:active{ transform:translateY(-3px) scale(.98); }

/* stat block */
.stat{ text-align:center; }
.stat .num{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3rem); font-weight:700; color:var(--ink); }
.section-ink .stat .num{ color:var(--marigold); }
.stat .label{ color:var(--text-muted); font-weight:600; font-size:.92rem; }
.section-ink .stat .label{ color:rgba(255,255,255,.65); }

/* tutor card */
.tutor-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); display:flex; flex-direction:column; }
.tutor-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.tutor-media{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.tutor-media img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.tutor-card:hover .tutor-media img{ transform:scale(1.08); }
.verified-pill{ position:absolute; top:12px; left:12px; background:var(--sage); color:#fff; font-size:.72rem; font-weight:700; padding:5px 11px; border-radius:var(--r-pill); display:inline-flex; align-items:center; gap:5px; }
.verified-pill svg{ width:13px; height:13px; }
.rate-pill{ position:absolute; top:12px; right:12px; background:rgba(255,255,255,.92); color:var(--ink); font-size:.78rem; font-weight:700; padding:6px 12px; border-radius:var(--r-pill); }
.tutor-body{ padding:20px; display:flex; flex-direction:column; gap:10px; flex:1; }
.tutor-subjects{ display:flex; gap:6px; flex-wrap:wrap; }
.tag{ background:var(--paper-deep); color:var(--ink); font-size:.75rem; font-weight:700; padding:5px 11px; border-radius:var(--r-pill); }
.tutor-rating{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:.88rem; color:var(--ink); }
.tutor-rating .stars{ font-size:.85rem; }
.tutor-actions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; padding-top:6px; }
.tutor-actions .btn{ flex:1 1 116px; }

/* testimonial */
.testimonial-card{ background:var(--surface); border-radius:var(--r-lg); padding:32px; box-shadow:var(--shadow-sm); }
.testimonial-quote{ font-family:var(--font-display); font-size:1.2rem; line-height:1.5; color:var(--ink); }
.testimonial-person{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.testimonial-person img{ width:46px; height:46px; border-radius:50%; object-fit:cover; }

/* FAQ */
.faq-item{ border-bottom:1px solid var(--line); }
.faq-q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 4px; background:none; border:0; text-align:left; font-family:var(--font-display); font-size:1.08rem; color:var(--ink); }
.faq-q .plus{ width:26px; height:26px; border-radius:50%; border:1px solid var(--line); position:relative; flex-shrink:0; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast); }
.faq-q .plus::before, .faq-q .plus::after{ content:''; position:absolute; background:var(--ink); top:50%; left:50%; }
.faq-q .plus::before{ width:10px; height:2px; transform:translate(-50%,-50%); }
.faq-q .plus::after{ width:2px; height:10px; transform:translate(-50%,-50%); transition:opacity var(--dur-fast); }
.faq-item.is-open .plus{ background:var(--marigold); transform:rotate(180deg); }
.faq-item.is-open .plus::after{ opacity:0; }
.faq-a{ max-height:0; overflow:hidden; transition:max-height var(--dur-med) var(--ease), padding var(--dur-med); color:var(--text-muted); line-height:1.7; padding:0 4px; }
.faq-item.is-open .faq-a{ padding-bottom:22px; }

/* CTA band */
.cta-band{ background:var(--ink-solid); border-radius:var(--r-lg); padding:0; position:relative; overflow:hidden; color:#fff; }
.cta-band h2{ color:#fff; }
.cta-band .lede{ color:rgba(255,255,255,.72); }
.cta-band-grid{ display:grid; grid-template-columns:1.1fr 1fr; align-items:stretch; gap:0; position:relative; z-index:1; }
.cta-band-grid > div:first-child{ padding:48px 56px; display:flex; flex-direction:column; justify-content:center; }
.cta-band-media{
  position:relative; overflow:hidden; min-height:280px;
  animation:floatY 7s ease-in-out infinite;
}
.cta-band-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .7s var(--ease);
}
.cta-band-media::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(105deg, var(--ink-solid) 0%, rgba(27,42,74,.35) 22%, rgba(27,42,74,0) 45%);
}
.cta-band:hover .cta-band-media img{ transform:scale(1.07); }
.cta-band-media.img-fallback{ display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04)); }
.cta-band-media.img-fallback::before{
  content:''; width:64px; height:64px; border-radius:50%;
  background:var(--marigold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A4A' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/32px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B2A4A' stroke-width='2'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/32px no-repeat;
}
@media (max-width:720px){
  .cta-band-grid{ grid-template-columns:1fr; text-align:center; }
  .cta-band-grid > div:first-child{ padding:36px 24px 32px; align-items:center; }
  .cta-band-media{ order:-1; min-height:200px; animation:none; }
}

/* footer */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.82); padding:72px 0 28px; }
.site-footer h4{ color:#fff; font-family:var(--font-body); font-size:.95rem; margin-bottom:16px; }
.site-footer a{ color:rgba(255,255,255,.7); transition:color var(--dur-fast); }
.site-footer a:hover{ color:var(--marigold); }
.site-footer .text-muted{ color:rgba(255,255,255,.5); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-grid li{ margin-bottom:10px; font-size:.92rem; }
.footer-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:.85rem; color:rgba(255,255,255,.55); }
.social-row{ display:flex; gap:10px; margin-top:16px; }
.social-row a{ width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.social-row a:hover{ background:var(--marigold); color:var(--ink-solid); }
.newsletter-form{ display:flex; gap:8px; margin-top:6px; max-width:340px; }
.newsletter-form input{ flex:1; border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.06); padding:11px 16px; color:#fff; }
.newsletter-form input::placeholder{ color:rgba(255,255,255,.5); }

/* ---------------------------------------------------------------------
   7. FORMS
   --------------------------------------------------------------------- */
.field{ margin-bottom:18px; }
.field label{ display:block; font-weight:700; font-size:.88rem; margin-bottom:8px; color:var(--ink); }
.field .hint{ font-size:.78rem; color:var(--text-soft); margin-top:6px; }
.field .error-msg{ font-size:.8rem; color:var(--danger); margin-top:6px; display:none; font-weight:600; }
.field.has-error .error-msg{ display:block; }
.field.has-error input, .field.has-error select, .field.has-error textarea{ border-color:var(--danger); }
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=date],input[type=search],input[type=number],select,textarea{
  width:100%; padding:13px 16px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface); color:var(--text); font-family:inherit; font-size:.95rem; transition:border-color var(--dur-fast), box-shadow var(--dur-fast);
}
input:focus,select:focus,textarea:focus{ border-color:var(--ink); box-shadow:0 0 0 4px var(--ink-100); outline:none; }
input::placeholder, textarea::placeholder{ color:var(--text-soft); opacity:1; }
.input-group{ position:relative; }
.input-group svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:18px; height:18px; color:var(--text-soft); }
.input-group input{ padding-left:44px; }
.checkbox-row{ display:flex; align-items:flex-start; gap:10px; font-size:.9rem; color:var(--text-muted); }
.checkbox-row input{ width:18px; height:18px; margin-top:2px; accent-color:var(--ink); }
.form-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:40px; box-shadow:var(--shadow-sm); }
.auth-split{ display:grid; grid-template-columns:1fr 1fr; min-height:calc(100vh - var(--header-h)); }
@media (max-width:900px){
  .auth-split{ grid-template-columns:1fr; }
  .auth-visual{ order:-1; height:240px; min-height:0; }
  .auth-visual-overlay{ display:none; }
}
@media (max-width:520px){ .auth-visual{ height:180px; } }
.auth-visual{ position:relative; background:var(--ink-solid); overflow:hidden; }
.auth-form-side{ display:flex; align-items:center; justify-content:center; padding:40px 24px; }
@media (max-width:520px){ .auth-form-side{ padding:28px 20px 40px; } }
.divider-or{ display:flex; align-items:center; gap:14px; color:var(--text-soft); font-size:.85rem; margin:22px 0; }
.divider-or::before,.divider-or::after{ content:''; flex:1; height:1px; background:var(--line); }
.social-auth{ display:flex; gap:10px; }
.social-auth button{ flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border-radius:var(--r-sm); border:1.5px solid var(--line); background:var(--surface); font-weight:700; font-size:.88rem; }
.social-auth button:hover{ background:var(--paper-deep); }

/* ---------------------------------------------------------------------
   8. FILTER / FIND-TUTOR PAGE
   --------------------------------------------------------------------- */
.page-hero{ background:var(--ink-solid); color:#fff; padding:52px 0 40px; position:relative; overflow:hidden; }
.page-hero h1{ color:#fff; }
.page-hero .lede{ color:rgba(255,255,255,.72); }
.breadcrumbs{ display:flex; align-items:center; gap:8px; font-size:.85rem; color:rgba(255,255,255,.6); margin-bottom:16px; }
.breadcrumbs a{ color:rgba(255,255,255,.85); }
.breadcrumbs .sep{ opacity:.5; }
.back-to-dashboard-link{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:18px; padding:8px 16px;
  border-radius:var(--r-pill); background:rgba(255,255,255,.12); color:#fff; font-weight:700; font-size:.85rem;
  transition:background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.back-to-dashboard-link:hover{ background:var(--marigold); color:var(--ink); transform:translateX(-2px); }
.back-to-dashboard-link.on-light{ background:var(--ink-100); color:var(--ink); }
.back-to-dashboard-link.on-light:hover{ background:var(--marigold); color:var(--ink); }

.search-bar-wrap{ background:var(--surface); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); padding:10px; display:flex; gap:8px; margin-top:-32px; position:relative; z-index:5; }
.search-bar-wrap .input-group{ flex:1; min-width:0; }
.search-bar-wrap input{ border:0; padding:14px 16px 14px 44px; }
.search-bar-wrap input:focus{ box-shadow:none; }
@media (max-width:640px){
  .search-bar-wrap{ flex-direction:column; }
  .search-bar-wrap select, .search-bar-wrap > .btn{ width:100%; }
}

.filter-layout{ display:grid; grid-template-columns:270px 1fr; gap:32px; align-items:start; }
@media (max-width:900px){ .filter-layout{ grid-template-columns:1fr; } }
.filter-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; position:sticky; top:calc(var(--header-h) + 20px); }
.filter-group{ padding:16px 0; border-bottom:1px solid var(--line); }
.filter-group:last-child{ border-bottom:0; }
.filter-group h4{ font-family:var(--font-body); font-size:.9rem; margin-bottom:12px; }
.filter-option{ display:flex; align-items:center; gap:9px; font-size:.9rem; color:var(--text-muted); padding:6px 0; cursor:pointer; }
.filter-option input{ width:16px; height:16px; accent-color:var(--ink); }
.filter-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip-btn{ padding:7px 14px; border-radius:var(--r-pill); border:1.5px solid var(--line); font-size:.82rem; font-weight:700; color:var(--text-muted); background:var(--surface); transition:all var(--dur-fast); }
.chip-btn.is-active, .chip-btn:hover{ border-color:var(--ink); color:var(--ink); background:var(--ink-100); }
.results-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; flex-wrap:wrap; gap:10px; }
.results-count{ font-weight:700; color:var(--ink); }
.range-slider{ width:100%; accent-color:var(--ink); }

/* ---------------------------------------------------------------------
   9. TUTOR DETAILS
   --------------------------------------------------------------------- */
.profile-header{ display:flex; gap:26px; align-items:center; flex-wrap:wrap; }
.profile-avatar{ width:120px; height:120px; border-radius:28px; object-fit:cover; box-shadow:var(--shadow-md); }
.profile-tabs{ display:flex; gap:6px; border-bottom:1px solid var(--line); margin:36px 0 28px; overflow-x:auto; }
.profile-tab{ padding:12px 20px; font-weight:700; color:var(--text-muted); border-bottom:3px solid transparent; white-space:nowrap; }
.profile-tab.is-active{ color:var(--ink); border-color:var(--marigold); }
.review-row{ display:flex; gap:16px; padding:20px 0; border-bottom:1px solid var(--line); }
.review-row img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.availability-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
@media (max-width:560px){
  .availability-grid{
    grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:68px;
    overflow-x:auto; padding-bottom:10px; scroll-snap-type:x proximity;
  }
  .availability-grid .avail-day{ scroll-snap-align:start; }
}
.avail-day{ text-align:center; }
.avail-day .d{ font-size:.72rem; color:var(--text-soft); font-weight:700; margin-bottom:6px; }
.avail-slot{ border-radius:8px; padding:6px 4px; font-size:.68rem; font-weight:700; margin-bottom:5px; background:var(--sage-100); color:var(--sage-600); }
.avail-slot.busy{ background:var(--paper-deep); color:var(--text-soft); }
.sticky-book{ position:sticky; top:calc(var(--header-h) + 20px); }

/* ---------------------------------------------------------------------
   10. BOOKING FLOW
   --------------------------------------------------------------------- */
.booking-shell{ display:grid; grid-template-columns:260px 1fr; gap:40px; }
@media (max-width:900px){ .booking-shell{ grid-template-columns:1fr; } }
.step-rail{ display:flex; flex-direction:column; gap:4px; }
.step-rail-h{ display:none; }
.step-item{ display:flex; align-items:center; gap:12px; padding:12px 10px; border-radius:var(--r-sm); color:var(--text-soft); font-weight:700; font-size:.88rem; }
.step-item .dot{ width:26px; height:26px; border-radius:50%; border:2px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.75rem; flex-shrink:0; transition:all var(--dur-fast); }
.step-item.is-active{ color:var(--ink); background:var(--ink-100); }
.step-item.is-active .dot{ background:var(--ink); border-color:var(--ink); color:#fff; }
.step-item.is-done .dot{ background:var(--sage); border-color:var(--sage); color:#fff; }
.step-item.is-done{ color:var(--sage-600); }
@media (max-width:900px){
  .step-rail{ flex-direction:row; overflow-x:auto; gap:0; }
  .step-item{ flex-direction:column; text-align:center; font-size:.7rem; gap:6px; min-width:78px; }
}
.booking-panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:36px; min-height:420px; }
.booking-nav{ display:flex; justify-content:space-between; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.select-card{ border:1.5px solid var(--line); border-radius:var(--r-md); padding:18px; cursor:pointer; transition:all var(--dur-fast); display:flex; gap:14px; align-items:center; }
.select-card:hover{ border-color:var(--ink); }
.select-card.is-selected{ border-color:var(--ink); background:var(--ink-100); }
.select-card input{ accent-color:var(--ink); width:18px; height:18px; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; text-align:center; }
.calendar-grid .cal-h{ font-size:.72rem; font-weight:700; color:var(--text-soft); padding-bottom:6px; }
.calendar-grid button{ aspect-ratio:1; border-radius:10px; border:1px solid var(--line); background:var(--surface); font-weight:700; color:var(--text); transition:all var(--dur-fast); }
.calendar-grid button:hover:not(:disabled){ border-color:var(--ink); }
.calendar-grid button.is-selected{ background:var(--ink); color:#fff; border-color:var(--ink); }
.calendar-grid button:disabled{ opacity:.28; }
.time-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media (max-width:640px){ .time-grid{ grid-template-columns:repeat(2,1fr); } }
.time-slot{ padding:12px; border-radius:var(--r-sm); border:1.5px solid var(--line); font-weight:700; font-size:.88rem; text-align:center; transition:all var(--dur-fast); }
.time-slot:hover{ border-color:var(--ink); }
.time-slot.is-selected{ background:var(--ink); color:#fff; border-color:var(--ink); }
.summary-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px dashed var(--line); font-size:.94rem; }
.summary-row.total{ font-weight:800; font-size:1.1rem; color:var(--ink); border-bottom:0; }
.pay-method{ display:flex; align-items:center; gap:14px; border:1.5px solid var(--line); border-radius:var(--r-md); padding:16px; margin-bottom:12px; cursor:pointer; }
.pay-method.is-selected{ border-color:var(--ink); background:var(--ink-100); }
.confirm-check{ width:84px; height:84px; border-radius:50%; background:var(--sage-100); color:var(--sage-600); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; animation:popIn .5s var(--ease); }
@keyframes popIn{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }

/* ---------------------------------------------------------------------
   11. DASHBOARD
   --------------------------------------------------------------------- */
.dash-body{ background:var(--paper); }
.dash-app{ min-height:100vh; display:flex; flex-direction:column; }
.dash-header{
  position:sticky; top:0; z-index:210; height:64px; flex-shrink:0;
  display:flex; align-items:center; gap:16px; padding:0 20px;
  background:rgba(250,247,241,.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line); box-shadow:var(--shadow-sm);
  animation: headerSlideIn .5s var(--ease) both;
}
.dash-header .logo{ font-size:1.15rem; }
.dash-header-actions{ display:flex; align-items:center; gap:10px; margin-inline-start:auto; }
.dash-logout-btn{ display:inline-flex; align-items:center; gap:8px; }
.dash-menu-toggle{ display:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--surface); align-items:center; justify-content:center; flex-shrink:0; }
.dash-menu-toggle svg{ width:18px; height:18px; }
.dash-shell{ flex:1; display:grid; grid-template-columns:264px 1fr; min-height:0; }
.dash-sidebar-backdrop{ display:none; }
@media (max-width:960px){
  .dash-shell{ grid-template-columns:1fr; }
  .dash-menu-toggle{ display:flex; }
  .dash-sidebar{
    position:fixed; top:64px; bottom:0; left:0; width:280px; max-width:82vw;
    transform:translateX(-100%); transition:transform var(--dur-med) var(--ease);
    z-index:220; overflow-y:auto; box-shadow:var(--shadow-lg); pointer-events:none;
    flex-direction:column; display:flex; gap:0; border-right:1px solid var(--line);
  }
  .dash-sidebar.is-open{ transform:translateX(0) !important; pointer-events:auto; }
  .dash-sidebar .dash-nav-title{ display:block; }
  .dash-sidebar .dash-nav{ flex-direction:column; overflow-x:visible; }
  .dash-sidebar-backdrop{
    display:block; position:fixed; top:64px; right:0; bottom:0; left:0; background:rgba(17,21,31,.45);
    z-index:215; opacity:0; visibility:hidden; transition:opacity var(--dur-fast) var(--ease), visibility var(--dur-fast);
  }
  .dash-sidebar-backdrop.is-open{ opacity:1; visibility:visible; }
  .dash-logout-label{ display:none; }
  .dash-logout-btn{ padding:9px; }
}
@media (max-width:520px){
  .dash-header{ padding:0 14px; gap:10px; }
  .dash-header .logo{ font-size:0; }
  .dash-header .logo .logo-mark{ font-size:1.1rem; }
  .dash-main{ padding:20px 16px; }
}
.dash-sidebar{ background:var(--surface); border-right:1px solid var(--line); padding:26px 16px; }
.dash-profile-mini{ display:flex; align-items:center; gap:12px; padding:10px 10px 22px; }
.dash-profile-mini img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.dash-nav-title{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); font-weight:700; margin:18px 10px 8px; }
.dash-nav a{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r-sm); font-weight:700; font-size:.9rem; color:var(--text-muted); white-space:nowrap; }
.dash-nav a:hover{ background:var(--paper-deep); color:var(--ink); }
.dash-nav a.is-active{ background:var(--ink); color:#fff; }
.dash-nav a svg{ width:18px; height:18px; flex-shrink:0; }
.dash-main{ padding:32px; max-width:100%; overflow-x:hidden; }
.dash-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:14px; }
.dash-section{ display:none; }
.dash-section.is-active{ display:block; animation:fadeUp .4s var(--ease); }
.kpi-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:22px; display:flex; flex-direction:column; gap:8px; }
.kpi-card .kpi-icon{ width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:6px; }
.kpi-card .kpi-num{ font-family:var(--font-display); font-size:1.7rem; color:var(--ink); }
.kpi-card .kpi-label{ color:var(--text-muted); font-size:.85rem; font-weight:600; }
.data-table{ width:100%; border-collapse:collapse; }
.data-table th{ text-align:left; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); padding:12px 14px; border-bottom:1px solid var(--line); }
.data-table td{ padding:16px 14px; border-bottom:1px solid var(--line); font-size:.9rem; }
.data-table tr:last-child td{ border-bottom:0; }
.table-scroll{ overflow-x:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); }
.status-badge{ padding:5px 12px; border-radius:var(--r-pill); font-size:.75rem; font-weight:700; display:inline-block; }
.status-upcoming{ background:var(--ink-100); color:var(--ink); }
.status-completed{ background:var(--sage-100); color:var(--sage-600); }
.status-paid{ background:var(--sage-100); color:var(--sage-600); }
.status-pending{ background:var(--marigold-100); color:var(--marigold-600); }
.status-cancelled{ background:#F5E2DE; color:var(--danger); }
.notif-item{ display:flex; gap:14px; padding:16px; border-radius:var(--r-md); align-items:flex-start; }
.notif-item.unread{ background:var(--ink-100); }
.notif-dot{ width:38px; height:38px; border-radius:50%; background:var(--surface); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.material-card{ display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--r-md); }
.material-icon{ width:44px; height:44px; border-radius:10px; background:var(--marigold-100); color:var(--marigold-600); display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* ---------------------------------------------------------------------
   12. MODAL / TOAST
   --------------------------------------------------------------------- */
.modal-overlay{ position:fixed; inset:0; background:rgba(27,42,74,.5); backdrop-filter:blur(3px); z-index:500; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; visibility:hidden; transition:opacity var(--dur-fast) var(--ease); }
.modal-overlay.is-open{ opacity:1; visibility:visible; }
.modal-box{ background:var(--surface); border-radius:var(--r-lg); padding:32px; max-width:460px; width:100%; box-shadow:var(--shadow-lg); transform:scale(.92) translateY(10px); transition:transform var(--dur-fast) var(--ease); max-height:88vh; overflow-y:auto; }
.modal-overlay.is-open .modal-box{ transform:scale(1) translateY(0); }
.modal-close{ width:34px; height:34px; border-radius:50%; background:var(--paper-deep); display:flex; align-items:center; justify-content:center; float:right; }
.toast-stack{ position:fixed; bottom:24px; right:24px; z-index:600; display:flex; flex-direction:column; gap:10px; }
.toast{ background:var(--ink); color:#fff; padding:14px 20px; border-radius:var(--r-sm); box-shadow:var(--shadow-lg); font-weight:600; font-size:.9rem; display:flex; align-items:center; gap:10px; animation:toastIn .35s var(--ease); }
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:translateY(0) } }

/* ---------------------------------------------------------------------
   13. SCROLL-REVEAL ANIMATION UTILITIES
   --------------------------------------------------------------------- */
[data-reveal]{ opacity:0; transition:opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); will-change:transform,opacity; }
[data-reveal="up"]{ transform:translateY(28px); }
[data-reveal="left"]{ transform:translateX(-32px); }
[data-reveal="right"]{ transform:translateX(32px); }
[data-reveal="scale"]{ transform:scale(.94); }
[data-reveal].is-visible{ opacity:1; transform:none; }

@keyframes fadeUp{ from{ opacity:0; transform:translateY(10px) } to{ opacity:1; transform:translateY(0) } }

/* stagger children helper (JS sets --d) */
[data-reveal]{ transition-delay:var(--d,0ms); }

/* ---------------------------------------------------------------------
   14. UTILITIES
   --------------------------------------------------------------------- */
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.gap-8{ gap:8px; } .gap-12{ gap:12px; } .gap-16{ gap:16px; }
.mt-8{ margin-top:8px;} .mt-16{ margin-top:16px;} .mt-24{ margin-top:24px;} .mt-32{ margin-top:32px;}
.mb-8{ margin-bottom:8px;} .mb-16{ margin-bottom:16px;} .mb-24{ margin-bottom:24px;}
.text-center{ text-align:center; }
.text-muted{ color:var(--text-muted); }
.w-full{ width:100%; }
.hidden{ display:none !important; }
.badge-dot{ width:9px; height:9px; border-radius:50%; background:var(--danger); display:inline-block; }

/* icon system */
.icon{ width:20px; height:20px; flex-shrink:0; }
.icon-sm{ width:16px; height:16px; }
.icon-lg{ width:28px; height:28px; }
.subject-icon svg{ width:24px; height:24px; stroke:var(--ink); }
.star-row{ display:inline-flex; gap:2px; vertical-align:middle; }
.star-ic svg{ width:14px; height:14px; fill:none; stroke:var(--line); stroke-width:1.5; }
.star-ic.is-filled svg{ fill:var(--marigold); stroke:var(--marigold); }
.verified-pill svg, .verified-badge-inline svg{ width:13px; height:13px; }
.check-list{ display:grid; gap:12px; list-style:none; padding:0; margin:0; }
.check-list li{ display:flex; align-items:flex-start; gap:10px; color:var(--text-muted); font-size:.92rem; }
.check-list li svg{ width:18px; height:18px; flex-shrink:0; margin-top:2px; color:var(--sage-600); }

/* 404 / coming soon */
.error-page, .soon-page{ min-height:calc(100vh - var(--header-h)); display:flex; align-items:center; justify-content:center; text-align:center; position:relative; overflow:hidden; padding:60px 20px; }
.error-num{ font-family:var(--font-display); font-size:clamp(6rem,18vw,11rem); line-height:1; color:var(--ink); position:relative; }
.countdown-row{ display:flex; gap:14px; justify-content:center; margin:32px 0; flex-wrap:wrap; }
.countdown-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 22px; min-width:88px; box-shadow:var(--shadow-sm); }
.countdown-box .n{ font-family:var(--font-display); font-size:2rem; color:var(--ink); }
.countdown-box .l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); font-weight:700; }