/* Ported from the prototype's how.css — kept in the 'legacy' cascade layer so Tailwind utilities can override it. */
@layer legacy {
/* =========================================================
   الأترجة — كيف تعمل الأترجة
   ---------------------------------------------------------
   Two references, adapted to the brand:

   HERO — clipcut.framer.ai
     a light editorial hero: big centred headline over a bowed
     wall of media cards in 3D; the dark section below rises
     wall of media cards in 3D, then a straight dark section.

   JOURNEY — makro.framer.website ("Financial insight, finally
   simple." → "Master your cash flow."), measured at 1440:
     · a centred headline, then a 4:3 card (804×603 there, 24px
       radius) holding an app screen on a soft gradient frame
     · the card pins; once it has been pinned a short while the
       layout switches: the card glides from the centre to the
       end side and the step list slides in ~160px from the
       start side while it fades up (a timed move, not scrubbed)
     · the active step carries a 2px bar that fills over ~5.5s,
       then the next step takes over and the screen cross-fades
     · a solid accent pill with a dark square arrow under the list
   ========================================================= */

.hw-page{
  /* one identity for the whole site: these only point at the brand
     tokens in shared.css / hero3.css, they never define new colours */
  --hw-forest:  var(--bg-mid);
  --hw-night:   var(--bg);
  --hw-ink:     var(--u-forest);
  --hw-ivory:   var(--u-ivory);
  --hw-gold:    var(--u-gold);
  --hw-gold-l:  var(--gold-light);
  --hw-gold-d:  var(--gold-deep);
  --hw-sage:    var(--u-sage);
  --hw-sage-s:  var(--atmo-halaqat);
  --hw-sand:    var(--atmo-manahij);
  --hw-muted:   var(--u-ink-2);

  /* the card's glide: slow out of the centre, soft landing */
  --hw-glide: cubic-bezier(.7,0,.18,1);
  --hw-out:   cubic-bezier(.2,.7,.2,1);
  --hw-step-dur: 5.6s;
}

/* every sprite icon gets a sane box; contexts below resize them */
svg:where(:has(> use[href^="#i-"])){ width:1em; height:1em; flex:none; }


/* =========================================================
   1 — HERO (light)
   ---------------------------------------------------------
   From clipcut.framer.ai, measured at 1440: a centred 70px
   headline, then a wall of 12 media cards set 30° apart on the
   inside of a cylinder under a 500px perspective. Seen from
   inside, the outer cards come forward (318×500 there) and the
   middle ones fall back (121×172), so the wall bows toward the
   viewer. Here: 7 cards, warm cream ground, the dark journey
   section starting straight and full width below.
   ========================================================= */

.lh{
  --lh-bg:   #F6F1E5;
  --lh-ink:  var(--u-forest);
  --lh-sub:  #56665F;
  --sy:      0;            /* scroll progress through the hero, 0 → 1 (how.js) */

  --ws:1;                  /* card stage scale for this viewport (how.js) */

  position:relative;
  overflow:hidden;
  isolation:isolate;
  color:var(--lh-ink);
  background:var(--lh-bg);
}

/* ---- the quiet background ---- */
.lh-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.lh-glow{ position:absolute; border-radius:50%; filter:blur(90px); }
.lh-glow--gold{
  width:860px; height:520px;
  top:60px; left:50%; margin-left:-430px;
  background:radial-gradient(closest-side, rgba(212,175,90,.30), rgba(212,175,90,0));
  transform:translate3d(0, calc(var(--sy) * 90px), 0);
}
.lh-glow--sage-a, .lh-glow--sage-b{
  width:620px; height:520px;
  bottom:-120px;
  background:radial-gradient(closest-side, rgba(168,199,181,.42), rgba(168,199,181,0));
}
.lh-glow--sage-a{ right:-160px; transform:translate3d(0, calc(var(--sy) * -60px), 0); }
.lh-glow--sage-b{ left:-160px;  transform:translate3d(0, calc(var(--sy) * -40px), 0); }

/* vertical depth: ivory at the top, a warmer beige where the cards sit */
.lh-depth{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, #FBF8F0 0%, #F7F1E4 38%, #F2EAD8 72%, #EFE6D2 100%);
}
/* corner blooms — a muted gold light on the start side, sage on the end side */
.lh-glow--corner-r{
  width:720px; height:620px;
  top:-260px; right:-220px;
  background:radial-gradient(closest-side, rgba(226,196,124,.38), rgba(226,196,124,0));
  transform:translate3d(0, calc(var(--sy) * 50px), 0);
}
.lh-glow--corner-l{
  width:680px; height:600px;
  top:-220px; left:-240px;
  background:radial-gradient(closest-side, rgba(183,208,190,.40), rgba(183,208,190,0));
  transform:translate3d(0, calc(var(--sy) * 30px), 0);
}
/* the faintest deep-green tint, low and to one side, for weight */
.lh-glow--forest{
  width:900px; height:380px;
  bottom:120px; left:50%; margin-left:-450px;
  background:radial-gradient(closest-side, rgba(18,60,53,.07), rgba(18,60,53,0));
  filter:blur(70px);
}
/* soft light falling from above the headline */
.lh-rays{
  position:absolute; inset:-10% 0 auto; height:80%;
  opacity:.55;
  background:
    conic-gradient(from 180deg at 50% -8%,
      transparent 0deg 160deg,
      rgba(255,250,236,.75) 170deg,
      transparent 176deg,
      rgba(255,250,236,.55) 184deg,
      transparent 190deg,
      transparent 200deg 360deg);
  -webkit-mask-image:linear-gradient(180deg, #000 20%, transparent 85%);
          mask-image:linear-gradient(180deg, #000 20%, transparent 85%);
  filter:blur(18px);
}
/* light dust (drawn by how.js) */
.lh-dust{ position:absolute; inset:0; width:100%; height:100%; }

.lh-grain{
  position:absolute; inset:0;
  opacity:.07;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.lh-vignette{
  position:absolute; inset:0;
  background:radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(120,98,52,.10) 100%);
}

/* ---- copy ---- */
.lh-inner{
  position:relative; z-index:2;
  max-width:980px;
  margin:0 auto;
  padding:34px 24px 0;
  text-align:center;
  transform:translate3d(0, calc(var(--sy) * -40px), 0);
  opacity:calc(1 - var(--sy) * .6);
}

.lh-eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0;
  padding:7px 16px;
  border-radius:99px;
  font-size:14px; font-weight:600;
  letter-spacing:.2px;
  color:var(--gold-deep);
  background:rgba(255,255,255,.55);
  border:1px solid rgba(176,143,62,.22);
}
.lh-eyebrow-dot{ width:6px; height:6px; border-radius:50%; background:var(--u-gold); box-shadow:0 0 0 3px rgba(212,175,90,.18); }

.lh-title{
  margin:22px 0 0;
  font-size:clamp(38px, 4.7vw, 68px);
  line-height:1.24;
  font-weight:700;
  letter-spacing:-1.6px;
  color:var(--lh-ink);
}
.lh-title > span{ display:block; }

.lh-lead{
  max-width:600px;
  margin:24px auto 0;
  font-size:clamp(16px, 1.3vw, 19px);
  line-height:1.95;
  font-weight:400;
  color:var(--lh-sub);
}

.lh-actions{ display:flex; justify-content:center; flex-wrap:wrap; gap:12px; margin-top:32px; }

.lh-btn{
  display:inline-flex; align-items:center; gap:14px;
  height:56px;
  padding-inline:26px 7px;
  border-radius:99px;
  font-size:16.5px; font-weight:600;
  color:var(--u-ivory);
  background:var(--u-forest);
  box-shadow:0 16px 34px -22px rgba(18,60,53,.9);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.lh-btn-ico{
  width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--u-forest);
  background:linear-gradient(140deg, var(--gold-light), var(--u-gold));
  transition:transform .4s var(--hw-out);
}
.lh-btn-ico svg{ width:17px; height:17px; }
.lh-btn:hover{ background:#0E322C; transform:translateY(-2px); }
.lh-btn:hover .lh-btn-ico{ transform:translateX(-4px); }

.lh-btn2{
  display:inline-flex; align-items:center;
  height:56px; padding:0 26px;
  border-radius:99px;
  font-size:16.5px; font-weight:600;
  color:var(--u-forest);
  background:rgba(255,255,255,.5);
  border:1px solid rgba(18,60,53,.18);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.lh-btn2:hover{ border-color:var(--u-gold); background:rgba(255,255,255,.85); transform:translateY(-2px); }

.lh-help{ margin:26px 0 0; font-size:13.5px; color:#7B8983; }

/* entrance: fade up, small travel */
.lh-up{
  opacity:0;
  transform:translateY(22px);
  animation:lh-up .7s var(--hw-out) forwards;
  animation-delay:var(--d, 0s);
}
@keyframes lh-up{ to{ opacity:1; transform:none; } }

/* =========================================================
   the card wall — a bowed cylinder, seen from inside
   ========================================================= */

/* a fixed 1440-wide stage scaled to the viewport, so the 3D
   arrangement keeps its proportions at every width */
/* the card layer: its own ground so it reads apart from the airy background */
.lh-strip{
  position:relative; z-index:1;
  margin-top:30px;
  padding-bottom:34px;
}
.lh-plinth{
  position:absolute;
  inset:calc(120px * var(--ws)) 0 0;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(232,221,196,0) 0%, rgba(232,221,196,.55) 38%, rgba(226,214,186,.75) 100%);
}
/* a soft contact shadow under the wall */
.lh-plinth::before{
  content:"";
  position:absolute;
  left:8%; right:8%;
  top:calc(250px * var(--ws));
  height:120px;
  border-radius:50%;
  background:radial-gradient(closest-side, rgba(18,60,53,.16), rgba(18,60,53,0));
  filter:blur(18px);
}
/* a hairline of light across the ground */
.lh-plinth::after{
  content:"";
  position:absolute;
  left:12%; right:12%;
  top:calc(330px * var(--ws));
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(176,143,62,.35), transparent);
}

.lh-wallbox{
  position:relative; z-index:1;
  height:calc(400px * var(--ws));
  transform:translate3d(0, calc(var(--sy) * 120px), 0);
  pointer-events:none;
}
.lh-wall{
  position:absolute;
  top:0; left:50%;
  width:1440px; height:400px;
  margin-left:-720px;
  transform:scale(var(--ws));
  transform-origin:50% 0;
  perspective:720px;
  perspective-origin:50% 32%;
}
.lh-ring{
  position:absolute;
  left:50%; top:46px;
  width:0; height:0;
  transform-style:preserve-3d;
  transform:translateZ(400px);
}
.lh-slot{
  --R:860px;
  position:absolute;
  left:-130px; top:0;
  width:260px; height:344px;
  transform-style:preserve-3d;
  transform:rotateY(var(--a)) translateZ(calc(var(--R) * -1));
}
.lh-par{
  width:100%; height:100%;
  transform:translate3d(0, calc(var(--sy) * var(--sp, 0px)), 0);
}
.lh-float{
  width:100%; height:100%;
  opacity:0;
  animation:
    lh-rise 1s var(--hw-out) calc(.45s + var(--i) * .09s) forwards,
    lh-float var(--fd, 7s) ease-in-out calc(1.5s + var(--i) * .09s) infinite alternate;
}
@keyframes lh-rise { from{ opacity:0; transform:translateY(60px); } to{ opacity:1; transform:none; } }
@keyframes lh-float{ from{ transform:none; } to{ transform:translateY(-12px); } }

.lh-card{
  position:relative;
  width:100%; height:100%;
  border-radius:22px;
  overflow:hidden;
  background:#FFFDF8;
  border:1px solid rgba(18,60,53,.08);
  box-shadow:0 22px 44px -30px rgba(18,60,53,.45);
  pointer-events:auto;
  cursor:default;
  transition:transform .6s var(--hw-out), box-shadow .6s var(--hw-out);
}
.lh-card:hover{ transform:translateY(-10px) scale(1.03); box-shadow:0 34px 60px -30px rgba(18,60,53,.55); }

/* floating label above a card */
.lh-tag{
  position:absolute; z-index:3;
  top:14px; right:14px;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px;
  border-radius:99px;
  font-size:12px; font-weight:600;
  color:var(--u-forest);
  background:var(--sand-tag, #F3E3B8);
  box-shadow:0 8px 18px -12px rgba(18,60,53,.6);
}
.lh-tag::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-deep); }

/* ---- card contents (drawn at 260×344) ---- */
.lh-card .pad{ padding:18px; display:flex; flex-direction:column; gap:10px; height:100%; }
.lh-card small{ font-size:11px; color:#83908A; }
.lh-card b{ font-weight:600; }
.lh-k{ font-size:11px; font-weight:600; color:var(--gold-deep); }
.lh-h{ font-size:17px; font-weight:600; line-height:1.4; color:var(--u-forest); }
.lh-who{ display:flex; align-items:center; gap:8px; font-size:12.5px; }
.lh-who img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.lh-meta{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.lh-meta div{ display:flex; flex-direction:column; gap:2px; padding:9px 10px; border-radius:11px; background:#F5F0E4; font-size:12px; }
.lh-seats{ display:flex; align-items:center; gap:8px; margin-top:auto; font-size:12px; }
.lh-seats i{ display:flex; gap:3px; }
.lh-seats i span{ width:9px; height:9px; border-radius:3px; background:#E6DFCD; }
.lh-seats i span.on{ background:var(--u-sage); }
.lh-pbtn{ display:flex; align-items:center; justify-content:center; height:38px; border-radius:11px; font-size:12.5px; font-weight:600; color:var(--u-ivory); background:var(--u-forest); }
.lh-bar{ height:6px; border-radius:99px; background:#ECE6D6; overflow:hidden; }
.lh-bar i{ display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(to left, var(--u-gold), #C9B06A); }
.lh-ls{ display:flex; flex-direction:column; gap:6px; }
.lh-ls span{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:10px; font-size:12px; background:#F7F3EA; }
.lh-ls span i{ width:18px; height:18px; flex:none; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:10px; font-weight:600; color:var(--gold-deep); border:1.5px solid #DCCFA9; }
.lh-ls span.done i{ color:var(--u-gold); background:var(--u-forest); border-color:var(--u-forest); }
.lh-ls span.now{ background:#F3E9CF; font-weight:600; }
.lh-ls span.now i{ color:var(--u-forest); background:var(--u-gold); border-color:var(--u-gold); }
.lh-ls svg{ width:11px; height:11px; stroke-width:2.8; }

/* photo cards */
.lh-photo > img{ width:100%; height:100%; object-fit:cover; }
.lh-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(7,31,26,.7), rgba(7,31,26,0) 52%); }
.lh-cap{ position:absolute; z-index:1; inset:auto 16px 16px; color:#fff; }
.lh-cap b{ display:block; font-size:15px; }
.lh-cap small{ color:rgba(255,255,255,.78); font-size:12px; }

/* live session */
.lh-live{ position:absolute; z-index:2; top:14px; left:14px; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:99px; font-size:11px; font-weight:600; color:#fff; background:rgba(7,31,26,.6); }
.lh-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#E0533D; animation:hw-blink 1.6s ease infinite; }
.lh-tiles{ position:absolute; z-index:2; inset:auto 14px 62px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.lh-tiles span{ aspect-ratio:4/3; border-radius:9px; overflow:hidden; border:2px solid rgba(255,255,255,.8); }
.lh-tiles img{ width:100%; height:100%; object-fit:cover; }

/* teacher */
.lh-tch{ height:150px; overflow:hidden; }
.lh-tch img{ width:100%; height:100%; object-fit:cover; object-position:50% 20%; }
.lh-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.lh-chips span{ padding:4px 10px; border-radius:99px; font-size:11px; background:var(--atmo-halaqat); color:var(--u-forest); }

/* library */
.lh-libimg{ height:112px; overflow:hidden; }
.lh-libimg img{ width:100%; height:100%; object-fit:cover; }
.lh-lrow{ display:flex; align-items:center; gap:10px; font-size:12px; }
.lh-lrow i{ width:30px; height:30px; flex:none; border-radius:9px; display:grid; place-items:center; }
.lh-lrow i svg{ width:15px; height:15px; }
.lh-lrow .c1{ color:#8A6A25; background:var(--atmo-manahij); }
.lh-lrow .c2{ color:#2F6B4F; background:var(--atmo-halaqat); }
.lh-lrow .c3{ color:var(--u-forest); background:#EFEBE0; }
.lh-lrow small{ display:block; }

/* dashboard */
.lh-next{ display:flex; flex-direction:column; gap:4px; padding:12px; border-radius:13px; color:var(--u-ivory); background:var(--u-forest); font-size:12px; }
.lh-next small{ color:rgba(248,245,237,.65); }
.lh-next b{ font-size:14px; }
.lh-prog{ display:flex; align-items:center; gap:12px; }
.lh-prog svg{ width:58px; height:58px; transform:rotate(-90deg); flex:none; }
.lh-prog circle{ fill:none; stroke:#ECE6D6; stroke-width:7; }
.lh-prog circle.v{ stroke:var(--u-gold); stroke-linecap:round; stroke-dasharray:138.2; stroke-dashoffset:44.2; }
.lh-prog b{ font-size:22px; }

/* ---- the journey chips under the wall ---- */
.lh-steps{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center; gap:14px;
  width:max-content; max-width:calc(100% - 32px);
  margin:18px auto 0;
  padding:9px 20px;
  list-style:none;
  border-radius:99px;
  font-size:14.5px; font-weight:500;
  color:var(--u-forest);
  background:rgba(255,253,247,.72);
  border:1px solid rgba(18,60,53,.09);
  box-shadow:0 14px 30px -22px rgba(18,60,53,.5);
  -webkit-backdrop-filter:blur(10px);
          backdrop-filter:blur(10px);
}
.lh-steps li{ display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
.lh-steps svg{ width:16px; height:16px; color:var(--gold-deep); }
.lh-steps .sep{ width:6px; height:6px; transform:rotate(45deg); border-radius:1px; background:var(--u-gold); opacity:.7; }

/* ---- the hero's end: spacing, then a quiet hairline with a star ---- */
.lh-end{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:18px;
  max-width:1240px;
  margin:0 auto;
  padding:26px 24px 30px;
}
.lh-end-line{ flex:1; height:1px; background:linear-gradient(to var(--edge, right), rgba(176,143,62,.42), rgba(176,143,62,0)); }
.lh-end-line:last-child{ --edge:left; }
.lh-end-dot{ width:5px; height:5px; border-radius:50%; background:var(--gold-deep); opacity:.55; }



/* ---- shared buttons/labels used further down the page ---- */
.hw-label{
  display:inline-flex; align-items:center; gap:9px;
  margin:0;
  padding:8px 16px;
  border-radius:99px;
  font-size:14px; font-weight:500;
  color:var(--hw-gold-l);
  background:rgba(212,175,90,.12);
  border:1px solid rgba(212,175,90,.3);
}
.hw-label svg{ width:13px; height:13px; color:var(--hw-gold); animation:spark-turn 14s linear infinite; }

.hw-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:34px; }

.hw-pill{
  display:inline-flex; align-items:center; gap:16px;
  height:58px;
  padding-inline:26px 7px;
  border:0;
  border-radius:99px;
  font-family:inherit; font-size:16.5px; font-weight:600; line-height:1;
  color:var(--hw-forest);
  background:var(--hw-ivory);
  cursor:pointer;
  box-shadow:0 18px 40px -20px rgba(0,0,0,.6);
  transition:background .35s var(--ease), transform .35s var(--ease);
}
.hw-pill-ico{
  width:44px; height:44px;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--hw-gold);
  background:var(--hw-forest);
  transition:transform .45s var(--hw-out);
}
.hw-pill-ico svg{ width:16px; height:16px; }
.hw-pill:hover{ background:#fff; transform:translateY(-2px); }
.hw-pill:hover .hw-pill-ico{ transform:translateX(-4px) scale(1.06); }

.hw-ghost{
  display:inline-flex; align-items:center;
  height:58px;
  padding:0 28px;
  border-radius:99px;
  font-size:16.5px; font-weight:600;
  color:var(--hw-ivory);
  border:1px solid rgba(248,243,231,.32);
  background:rgba(248,243,231,.05);
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.hw-ghost:hover{ border-color:var(--hw-gold); background:rgba(248,243,231,.1); transform:translateY(-2px); }

@keyframes hw-khatam{ to{ transform:rotate(360deg); } }



/* =========================================================
   2–5 — THE JOURNEY
   ========================================================= */

/* the dark section starts straight and full width under the hero —
   no overlap, no curve */
.hw-how{
  position:relative;
  z-index:3;
  padding:110px 0 40px;
  color:var(--hw-ivory);
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(168,199,181,.08), transparent 70%),
    var(--hw-forest);
}

.hw-intro{ max-width:920px; margin:0 auto; padding:0 24px; text-align:center; }

.hw-badge{
  display:inline-flex; align-items:center; gap:10px;
  margin:0;
  padding-block:5px; padding-inline:5px 18px;
  border-radius:99px;
  font-size:15px; font-weight:500;
  background:rgba(248,243,231,.07);
  border:1px solid rgba(248,243,231,.12);
}
.hw-badge-ico{
  width:30px; height:30px; border-radius:50%;
  display:grid; place-items:center;
  color:var(--hw-forest); background:var(--hw-ivory);
}
.hw-badge-ico svg{ width:16px; height:16px; }

.hw-h2{
  margin:22px 0 0;
  font-size:clamp(34px, 4.3vw, 58px);
  line-height:1.28;
  font-weight:500;
  letter-spacing:-1px;
  color:var(--hw-ivory);
}
.hw-h2.dark{ color:var(--hw-ink); }
.hw-sub{
  max-width:600px;
  margin:20px auto 0;
  font-size:clamp(16px, 1.25vw, 18.5px);
  line-height:1.9;
  font-weight:300;
  color:rgba(248,243,231,.68);
}
.hw-sub.dark{ color:#53635C; }

/* --- segmented role control --- */
.hw-switch{
  position:relative;
  display:inline-grid;
  grid-template-columns:1fr 1fr;
  margin-top:38px;
  padding:5px;
  border-radius:99px;
  background:rgba(248,243,231,.06);
  border:1px solid rgba(248,243,231,.12);
}
.hw-switch button{
  position:relative; z-index:1;
  display:flex; align-items:center; justify-content:center; gap:9px;
  min-width:158px; height:50px;
  padding:0 22px;
  border:0; border-radius:99px;
  background:none;
  font:inherit; font-size:16px; font-weight:600;
  color:rgba(248,243,231,.7);
  cursor:pointer;
  transition:color .45s var(--ease);
}
.hw-switch button svg{ width:18px; height:18px; }
.hw-switch button[aria-selected="true"]{ color:var(--hw-forest); }
.hw-switch-thumb{
  position:absolute;
  top:5px; bottom:5px; right:5px;
  width:calc(50% - 5px);
  border-radius:99px;
  background:linear-gradient(140deg, var(--hw-gold-l), var(--hw-gold) 55%, var(--hw-gold-d));
  box-shadow:0 10px 26px -12px rgba(212,175,90,.9);
  transition:transform .6s var(--hw-glide);
}
.hw-how[data-role="teacher"] .hw-switch-thumb{ transform:translateX(-100%); }

/* role-bound copy */
.hw-how[data-role="student"] [data-role-text="teacher"],
.hw-how[data-role="teacher"] [data-role-text="student"],
.hw-how[data-role="student"] [data-role-list="teacher"],
.hw-how[data-role="teacher"] [data-role-list="student"]{ display:none; }

/* --- the pinned stage --- */
.hw-track{
  position:relative;
  /* pin + the glide-in stretch + one stretch of scroll per step (how.js reads the same numbers) */
  height:calc(100vh + 240px + 5 * 65vh);
  max-width:1320px;
  margin:70px auto 0;
  padding:0 40px;
}
.hw-pin{
  position:sticky; top:0;
  height:100vh;
  display:flex; align-items:center;
  container-type:inline-size;
}
.hw-stage{
  --cw:min(800px, 63cqw, calc((100vh - 120px) * 4 / 3));
  position:relative;
  width:100%;
  height:calc(var(--cw) * .75);
}

.hw-card{
  position:absolute; left:0; top:0;
  width:var(--cw);
  aspect-ratio:4/3;
  border-radius:26px;
  overflow:hidden;
  isolation:isolate;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.75), 0 0 0 1px rgba(248,243,231,.08);
  transform:translateX(calc((100cqw - var(--cw)) / 2));
  scale:var(--hw-s, 1);
  transition:transform 1.1s var(--hw-glide);
  will-change:transform, scale;
}
.hw-stage.is-side .hw-card{ transform:translateX(0); }

.hw-frame{
  position:absolute; inset:0;
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(243,233,216,.95) 0%, rgba(243,233,216,0) 62%),
    radial-gradient(60% 55% at 0% 100%, rgba(176,143,62,.85) 0%, rgba(176,143,62,0) 66%),
    radial-gradient(70% 70% at 100% 100%, rgba(18,60,53,.9) 0%, rgba(18,60,53,0) 70%),
    linear-gradient(165deg, #DDE6DC 0%, #A8C7B5 42%, #6E8E7B 100%);
}
.hw-frame::after{
  content:"";
  position:absolute; inset:-20%;
  background:radial-gradient(40% 35% at 50% 50%, rgba(255,255,255,.35), transparent 70%);
  transform:translate3d(calc(var(--hw-p, 0) * 18%), calc(var(--hw-p, 0) * -10%), 0);
  mix-blend-mode:soft-light;
}

.hw-fit{
  position:absolute;
  left:8%; right:8%; top:10.8%;
  aspect-ratio:800/560;
}

/* --- the step column --- */
.hw-steps{
  position:absolute; right:0; top:50%;
  width:calc(100cqw - var(--cw) - 72px);
  display:flex; flex-direction:column;
  opacity:0;
  transform:translate(150px, -50%);
  pointer-events:none;
  transition:opacity .7s ease, transform 1.1s var(--hw-glide);
}
.hw-stage.is-side .hw-steps{
  opacity:1; transform:translate(0, -50%); pointer-events:auto;
  transition-delay:.14s;
}

.hw-steps-head{ margin-bottom:16px; }
.hw-h3{ margin:0; font-size:clamp(26px, 2.4vw, 34px); font-weight:500; letter-spacing:-.6px; line-height:1.3; }
.hw-steps-sub{ margin:10px 0 0; font-size:15px; line-height:1.8; font-weight:300; color:rgba(248,243,231,.62); }

.hw-role-flip{
  display:inline-flex; align-items:center; gap:8px;
  margin-top:12px; padding:0;
  border:0; background:none;
  font:inherit; font-size:13.5px; font-weight:500;
  color:var(--hw-gold);
  cursor:pointer;
}
.hw-role-flip svg{ width:15px; height:15px; transition:transform .35s var(--hw-out); }
.hw-role-flip:hover svg{ transform:translateX(-4px); }

.hw-list{ list-style:none; margin:0; padding:0; }
.hw-list.is-swap{ animation:hw-swap .7s var(--hw-out) both; }
@keyframes hw-swap{ from{ opacity:0; transform:translateY(14px); } }

.hw-step button{
  position:relative;
  display:block;
  width:100%;
  padding-block:10px;
  padding-inline:24px 0;
  border:0; background:none;
  font:inherit; color:inherit;
  text-align:right;
  cursor:pointer;
}
.hw-step-bar{
  position:absolute;
  inset-block:0; inset-inline-start:0;
  width:2px;
  border-radius:2px;
  background:rgba(248,243,231,.13);
  overflow:hidden;
}
.hw-step-bar i{
  position:absolute; inset:0 0 auto 0;
  height:0;
  background:linear-gradient(to bottom, var(--hw-gold-l), var(--hw-gold));
}
.hw-step.is-active .hw-step-bar i{ animation:hw-fill var(--hw-step-dur) linear forwards; }
.hw-stage.is-held .hw-step.is-active .hw-step-bar i{ animation-play-state:paused; }
.hw-step.is-static .hw-step-bar i{ animation:none; height:100%; }
/* desktop: scroll drives the fill instead of the clock */
.hw-stage.is-scrub .hw-step.is-active .hw-step-bar i{ animation:none; height:calc(var(--fill, 0) * 100%); }
@keyframes hw-fill{ to{ height:100%; } }

.hw-step-n{
  display:block;
  font-size:11.5px; font-weight:600;
  letter-spacing:1.4px;
  color:rgba(212,175,90,.55);
  transition:color .4s ease;
}
.hw-step-t{
  display:block;
  font-size:clamp(18px, 1.55vw, 22px);
  font-weight:500;
  line-height:1.4;
  color:rgba(248,243,231,.4);
  transition:color .4s ease;
}
.hw-step-d{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .6s var(--hw-out);
}
.hw-step-d > span{
  min-height:0;
  overflow:hidden;
  font-size:15px; line-height:1.8; font-weight:300;
  color:rgba(248,243,231,.66);
  opacity:0;
  transition:opacity .45s ease;
}
.hw-step button:hover .hw-step-t{ color:rgba(248,243,231,.72); }
.hw-step.is-active .hw-step-n{ color:var(--hw-gold); }
.hw-step.is-active .hw-step-t{ color:var(--hw-ivory); }
.hw-step.is-active .hw-step-d{ grid-template-rows:1fr; }
.hw-step.is-active .hw-step-d > span{ opacity:1; transition-delay:.15s; padding-top:4px; }
.hw-step button:focus-visible{ outline:2px solid var(--hw-gold); outline-offset:4px; border-radius:8px; }

/* makro's solid pill with the dark square arrow */
.hw-cta-lime{
  align-self:flex-start;
  margin-top:26px;
  display:inline-flex; align-items:center; gap:16px;
  height:62px;
  padding-inline:7px 28px;
  border-radius:18px;
  font-size:17px; font-weight:600;
  color:var(--hw-forest);
  background:linear-gradient(140deg, var(--hw-gold-l), var(--hw-gold) 60%, var(--hw-gold-d));
  box-shadow:0 0 0 4px rgba(212,175,90,.18), 0 18px 40px -20px rgba(212,175,90,.8);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.hw-cta-lime-ico{
  width:48px; height:48px; border-radius:13px;
  display:grid; place-items:center;
  color:var(--hw-gold-l);
  background:var(--hw-forest);
  transition:transform .45s var(--hw-out);
}
.hw-cta-lime-ico svg{ width:20px; height:20px; }
.hw-cta-lime:hover{ transform:translateY(-2px); box-shadow:0 0 0 6px rgba(212,175,90,.22), 0 22px 44px -20px rgba(212,175,90,.9); }
.hw-cta-lime:hover .hw-cta-lime-ico{ transform:translateX(-5px); }


/* =========================================================
   APP MOCKUP — drawn at 800×560 and scaled to fit (--k)
   ========================================================= */

.app{
  position:absolute; left:0; top:0;
  width:800px; height:560px;
  transform:scale(var(--k, 1));
  transform-origin:0 0;
  display:grid;
  grid-template-columns:62px 1fr;
  direction:rtl;
  border-radius:18px;
  overflow:hidden;
  font-size:12px;
  color:var(--hw-ink);
  background:#FCFBF7;
  box-shadow:0 30px 60px -30px rgba(7,31,26,.55), 0 0 0 1px rgba(255,255,255,.7) inset;
  user-select:none;
}
.app i{ font-style:normal; }
.app b{ font-weight:600; }
.app small{ font-size:10.5px; color:#8A958F; }
.app img{ display:block; }

.app-side{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding:18px 0 16px;
}
.app-logo{ width:30px; height:30px; margin-bottom:22px; color:var(--hw-gold); }
.app-logo svg{ width:100%; height:100%; }
.app-nav{
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center;
  color:#9AA59F;
  transition:background .5s var(--hw-out), color .5s var(--hw-out), transform .5s var(--hw-out);
}
.app-nav svg{ width:18px; height:18px; }
.app-nav.is-on{ color:var(--hw-ink); background:#EBDDB5; transform:scale(1.06); }
.app-me{ width:34px; height:34px; margin-top:auto; border-radius:50%; object-fit:cover; border:2px solid #EBDDB5; }

.app-main{
  position:relative;
  margin:10px; margin-inline-start:0;
  border-radius:14px;
  background:#F2F0E8;
  overflow:hidden;
}

.scr{
  position:absolute; inset:0;
  padding:22px 24px;
  opacity:0; visibility:hidden;
  transform:translateY(12px) scale(.992);
  transition:opacity .55s ease, transform .8s var(--hw-out), visibility 0s linear .55s;
}
.scr.is-on{
  opacity:1; visibility:visible; transform:none;
  transition:opacity .6s ease .1s, transform .8s var(--hw-out) .1s, visibility 0s;
}
.scr .a{ opacity:0; transform:translateY(10px); }
.scr.is-on .a{
  animation:hw-a .65s var(--hw-out) forwards;
  animation-delay:calc(.16s + var(--ai, 0) * .055s);
}
@keyframes hw-a{ to{ opacity:1; transform:none; } }

.scr-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.scr-head h4{ margin:0; font-size:25px; font-weight:500; letter-spacing:-.4px; line-height:1.25; }
.scr-head p{ display:flex; align-items:center; gap:6px; margin:4px 0 0; font-size:11.5px; color:#7C8A84; }
.dot{ width:8px; height:8px; border-radius:50%; background:var(--hw-sage); }
.dot.live{ background:#D9533F; animation:hw-blink 1.6s ease infinite; }
@keyframes hw-blink{ 50%{ opacity:.35; } }

.scr-tools{ display:flex; align-items:center; gap:8px; }
.fld{
  display:inline-flex; align-items:center; gap:8px;
  height:34px; padding:0 14px;
  border-radius:99px;
  font-size:11.5px; color:#7C8A84;
  background:#fff; border:1px solid #E8E3D6;
}
.fld svg{ width:14px; height:14px; }
.ico-btn{
  width:34px; height:34px; border-radius:50%;
  display:grid; place-items:center;
  background:#fff; border:1px solid #E8E3D6;
}
.ico-btn svg{ width:16px; height:16px; }
.ico-btn.dark{ background:var(--hw-ink); border-color:var(--hw-ink); color:var(--hw-gold); }

.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.chips.sm{ margin:0; gap:5px; }
.chip{ padding:6px 13px; border-radius:99px; font-size:11.5px; background:#fff; border:1px solid #E5E0D2; }
.chips.sm .chip{ padding:4px 10px; font-size:10.5px; }
.chip.on{ color:var(--hw-ivory); background:var(--hw-ink); border-color:var(--hw-ink); }
.chip.add{ border-style:dashed; color:#8A958F; }

.tile{
  display:flex; flex-direction:column; gap:6px;
  padding:14px;
  border-radius:12px;
  background:#fff;
  border:1px solid #ECE7DA;
}
.tile b{ font-size:13.5px; }
.muted{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:#7C8A84; }
.muted svg{ width:13px; height:13px; }

.bar{ display:block; height:6px; border-radius:99px; background:#EEEADF; overflow:hidden; }
.bar i{ display:block; height:100%; width:var(--w); border-radius:inherit; background:linear-gradient(to left, var(--hw-gold), #C9B06A); }
.bar.warn i{ background:#E3A35A; }
.scr.is-on .bar i{ animation:hw-bar 1.3s var(--hw-out) .45s both; }
@keyframes hw-bar{ from{ width:0; } }

.btn-app{
  display:inline-flex; align-items:center; justify-content:center;
  height:38px; padding:0 18px;
  border-radius:10px;
  font-size:12.5px; font-weight:600;
  color:var(--hw-ivory); background:var(--hw-ink);
}
.btn-app.ghost{ color:var(--hw-ink); background:#fff; border:1px solid #E5E0D2; }
.btn-app.full{ width:100%; margin-top:4px; }
.btn-app.sm{ height:30px; padding:0 13px; font-size:11px; }

.row{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:9px; background:#F7F4EC; font-size:11.5px; }
.row svg{ width:16px; height:16px; color:var(--hw-gold-d); }
.row img{ width:24px; height:24px; border-radius:50%; object-fit:cover; }
.box{ width:18px; height:18px; flex:none; border-radius:5px; display:grid; place-items:center; border:1.5px solid #D9D3C4; }
.box.on{ background:var(--hw-ink); border-color:var(--hw-ink); color:var(--hw-gold); }
.box svg{ width:12px; height:12px; stroke-width:2.8; }

/* s1 explore */
.ex-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.ex{ padding:8px; border-radius:14px; background:#fff; border:1px solid #ECE7DA; }
.ex figure{ position:relative; margin:0; height:150px; border-radius:10px; overflow:hidden; }
.ex figure img{ width:100%; height:100%; object-fit:cover; }
.tag{ position:absolute; top:8px; right:8px; padding:3px 9px; border-radius:99px; font-size:10px; font-weight:600; background:rgba(255,255,255,.92); color:var(--hw-ink); }
.ex b{ display:block; margin:10px 4px 2px; font-size:13.5px; }
.ex > small{ display:block; padding:0 4px; }
.ex-foot{ display:flex; align-items:center; gap:6px; margin:10px 4px 2px; padding-top:8px; border-top:1px solid #F0ECE2; }
.mini-av{ width:22px; height:22px; border-radius:50%; overflow:hidden; }
.mini-av img{ width:100%; height:100%; object-fit:cover; }
.ex-foot em{ margin-inline-start:auto; padding:2px 8px; border-radius:99px; font-style:normal; font-size:10px; background:var(--hw-sage-s); }
.ex-more{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }
.row-tile{ flex-direction:row; align-items:center; gap:12px; padding:12px 14px; }
.row-tile small{ min-width:52px; }
.row-tile b{ margin-inline-start:auto; font-size:12.5px; }
.stack{ display:flex; }
.stack img{ width:28px; height:28px; border-radius:50%; object-fit:cover; border:2px solid #fff; margin-inline-start:-8px; }
.stack img:first-child{ margin-inline-start:0; }
.lib-ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--hw-sand); color:var(--hw-gold-d); }
.lib-ico svg{ width:16px; height:16px; }

/* s2 detail */
.dt{ display:grid; grid-template-columns:230px 1fr; gap:14px; }
.dt-img{ margin:0; height:316px; border-radius:14px; overflow:hidden; }
.dt-img img{ width:100%; height:100%; object-fit:cover; }
.dt-meta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; align-content:start; }
.dt-meta .wide{ grid-column:span 2; }
.lvl{ display:flex; gap:4px; }
.lvl i{ width:24px; height:6px; border-radius:99px; background:#EEEADF; }
.lvl i.on{ background:var(--hw-gold); }
.who{ display:flex; align-items:center; gap:8px; }
.who img{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.who b{ display:block; font-size:12.5px; }
.dt-cta{ display:flex; gap:8px; margin-top:14px; }

/* s3 join */
.jn{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.jn-form{ padding:20px; gap:10px; }
.jn-form label, .pf-form label, .cr-form label{ display:flex; flex-direction:column; gap:6px; }
.jn-t{ font-size:16px !important; margin-bottom:2px; }
.inp{
  display:flex; align-items:center; gap:6px;
  min-height:36px; padding:0 12px;
  border-radius:9px;
  font-size:12px;
  background:#FBFAF6; border:1px solid #E5E0D2;
}
.inp svg{ width:14px; height:14px; color:#8A958F; }
.inp.ltr{ direction:ltr; justify-content:flex-end; }
.inp.area{ padding:10px 12px; line-height:1.75; }
.jn-ok{ align-items:center; justify-content:center; text-align:center; padding:24px; gap:8px; }
.jn-ok > b{ font-size:17px !important; }
.ok-ring{
  width:68px; height:68px; margin-bottom:6px;
  border-radius:50%;
  display:grid; place-items:center;
  color:var(--hw-ink);
  background:var(--hw-sage-s);
  box-shadow:0 0 0 8px rgba(168,199,181,.18);
}
.ok-ring svg{ width:32px; height:32px; stroke-width:2.4; }
.scr.is-on .ok-ring{ animation:hw-okpop .7s var(--hw-out) .6s both; }
@keyframes hw-okpop{ from{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.1); opacity:1; } }
.jn-sum{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-top:12px; }
.jn-sum div{ padding:10px; border-radius:10px; background:#F6F3EA; display:flex; flex-direction:column; gap:3px; }

/* s4 live */
.lv{ display:grid; grid-template-columns:1fr 210px; gap:12px; }
.lv-stage{ position:relative; height:430px; border-radius:14px; overflow:hidden; background:#1B2B27; }
.lv-stage > img{ width:100%; height:100%; object-fit:cover; }
.lv-stage::after{ content:""; position:absolute; inset:50% 0 0; background:linear-gradient(to top, rgba(7,31,26,.75), transparent); }
.lv-name{ position:absolute; z-index:1; right:14px; bottom:66px; padding:4px 10px; border-radius:99px; font-size:11.5px; color:#fff; background:rgba(0,0,0,.35); }
.lv-tiles{ position:absolute; z-index:1; top:12px; left:12px; display:flex; flex-direction:column; gap:8px; }
.lv-tiles span{ width:84px; height:62px; border-radius:10px; overflow:hidden; border:2px solid rgba(255,255,255,.75); }
.lv-tiles span.me{ border-color:var(--hw-gold); }
.lv-tiles img{ width:100%; height:100%; object-fit:cover; }
.lv-ctrl{ position:absolute; z-index:1; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.lv-ctrl i{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.92); }
.lv-ctrl i svg{ width:16px; height:16px; }
.lv-ctrl i.end{ width:auto; padding:0 16px; border-radius:99px; font-size:11px; font-weight:600; color:#fff; background:#C9483A; }
.lv-side{ display:flex; flex-direction:column; gap:12px; }
.pill-live{ display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:99px; font-size:11px; font-weight:600; color:#B33B2B; background:#FCE9E6; }
.pill-live::before{ content:""; width:7px; height:7px; border-radius:50%; background:currentColor; animation:hw-blink 1.6s ease infinite; }

/* s5 / t4 dashboards */
.db{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.db .courses, .db .att{ grid-column:span 2; }
.big{ font-size:32px !important; font-weight:500 !important; letter-spacing:-1px; line-height:1.1; }
.big span{ font-size:18px; color:#8A958F; }
.up{ font-size:11px; color:#3F8F5F; }
.tile.next{ background:var(--hw-ink); border-color:var(--hw-ink); color:var(--hw-ivory); }
.tile.next small{ color:rgba(248,243,231,.6); }
.tile.next .muted{ color:rgba(248,243,231,.75); }
.tile.next .btn-app{ align-self:flex-start; margin-top:auto; color:var(--hw-forest); background:var(--hw-gold); }
.tile.ring{ display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:10px; }
.tile.ring small{ grid-column:span 2; }
.ring-svg{ width:76px; height:76px; transform:rotate(-90deg); }
.ring-svg circle{ fill:none; stroke:#EEEADF; stroke-width:7; }
.ring-svg .v{ stroke:var(--hw-gold); stroke-linecap:round; stroke-dasharray:163.4; stroke-dashoffset:calc(163.4 * (1 - var(--p))); }
.scr.is-on .ring-svg .v{ animation:hw-ring-v 1.5s var(--hw-out) .4s both; }
@keyframes hw-ring-v{ from{ stroke-dashoffset:163.4; } }
.ring-v{ font-size:30px !important; font-weight:500 !important; }
.ring-v span{ font-size:16px; color:#8A958F; }
.week{ display:flex; gap:4px; margin-top:auto; }
.week i{ width:18px; height:18px; border-radius:5px; background:#EEEADF; }
.week i.on{ background:var(--hw-sage); }
.crs{ display:grid; grid-template-columns:96px 1fr 36px; align-items:center; gap:10px; padding:6px 0; font-size:11.5px; }
.crs em{ font-style:normal; font-size:11px; color:#7C8A84; text-align:left; }
.tasks{ gap:8px; }
.att-row{ display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:10px; padding:6px 0; font-size:12px; border-bottom:1px solid #F2EEE4; }
.att-row:last-child{ border-bottom:0; }
.att-row img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }

/* t1 profile */
.pct{ padding:7px 13px; border-radius:99px; font-size:11.5px; color:#7C8A84; background:#fff; border:1px solid #E8E3D6; }
.pct b{ color:var(--hw-ink); }
.pf{ display:grid; grid-template-columns:220px 1fr; gap:14px; }
.pf-card{ align-items:center; text-align:center; padding:22px 16px; }
.pf-card > img{ width:88px; height:88px; margin-bottom:6px; border-radius:50%; object-fit:cover; border:3px solid #EBDDB5; }
.pf-card > b{ font-size:15px !important; }
.pf-stats{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; margin-top:12px; }
.pf-stats div{ display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:10px; background:#F6F3EA; }
.pf-stats b{ font-size:18px !important; }
.pf-form{ display:flex; flex-direction:column; gap:10px; }
.pf-form label, .cr-form label{ padding:12px 14px; border-radius:12px; background:#fff; border:1px solid #ECE7DA; }
.tl{ display:flex; align-items:center; gap:8px; font-size:11.5px; }
.tl i{ width:8px; height:8px; border-radius:50%; background:var(--hw-gold); box-shadow:0 0 0 3px rgba(212,175,90,.2); }

/* t2 create */
.cr{ display:grid; grid-template-columns:1fr 230px; gap:14px; }
.cr-form{ display:flex; flex-direction:column; gap:10px; }
.seg{ display:flex; padding:3px; border-radius:9px; background:#F2EFE6; }
.seg i{ flex:1; padding:6px; border-radius:7px; text-align:center; font-size:11.5px; }
.seg i.on{ background:#fff; box-shadow:0 2px 6px -2px rgba(18,60,53,.2); font-weight:600; }
.seg i.off{ opacity:.4; }
.days{ display:flex; gap:5px; }
.days i{ padding:5px 9px; border-radius:8px; font-size:10.5px; border:1px solid #E5E0D2; }
.days i.on{ color:#fff; background:var(--hw-ink); border-color:var(--hw-ink); }
.cr-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.inp.step{ justify-content:space-between; }
.inp.step i{ width:22px; height:22px; border-radius:6px; display:grid; place-items:center; background:#F2EFE6; }
.cr-prev{ gap:8px; }
.cr-prev figure{ position:relative; margin:0; height:150px; border-radius:10px; overflow:hidden; }
.cr-prev figure img{ width:100%; height:100%; object-fit:cover; }

/* t3 students */
.st{ display:grid; grid-template-columns:1fr 220px; gap:12px; }
.st-list{ padding:4px 14px; gap:0; }
.st-row{ display:grid; grid-template-columns:30px 1fr auto 104px; align-items:center; gap:10px; padding:11px 0; border-bottom:1px solid #F2EEE4; }
.st-row:last-child{ border-bottom:0; }
.st-row img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.st-row span{ font-size:12.5px; font-weight:600; }
.st-row small{ text-align:left; }
.st-row em{ padding:3px 9px; border-radius:99px; font-style:normal; font-size:10px; }
em.ok{ color:#2F6B4F; background:var(--hw-sage-s); }
em.new{ color:#8A6A25; background:var(--hw-sand); }
em.warn{ color:#B4532F; background:#FBE7DF; }
.cal{ display:grid; grid-template-columns:52px 1fr; gap:8px; align-items:stretch; margin-top:4px; }
.cal-d{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px; border-radius:9px; font-size:10px; color:#8A958F; background:#F6F3EA; }
.cal-d b{ font-size:16px !important; color:var(--hw-ink); }
.cal-e{ display:flex; align-items:center; padding:10px; border-radius:9px; font-size:11px; background:var(--hw-sage-s); border-inline-start:3px solid var(--hw-sage); }
.cal-e.alt{ background:var(--hw-sand); border-color:var(--hw-gold); }

/* t5 progress */
.pg{ display:grid; grid-template-columns:1.3fr 1fr; gap:12px; }
.pg-next{ grid-column:span 2; }
.pg-bars .crs{ grid-template-columns:24px 44px 1fr 36px; }
.pg-bars .crs img{ width:24px; height:24px; border-radius:50%; object-fit:cover; }
.heat{ display:grid; grid-template-columns:repeat(14, 1fr); gap:4px; margin:4px 0 6px; }
.heat i{ aspect-ratio:1; border-radius:3px; background:#EEEADF; }
.heat i[data-l="1"]{ background:#D7E6DC; }
.heat i[data-l="2"]{ background:var(--hw-sage); }
.heat i[data-l="3"]{ background:#5F8F78; }
.scr.is-on .heat i{ animation:hw-a .4s var(--hw-out) both; animation-delay:calc(.3s + var(--hi) * 8ms); opacity:0; }


/* =========================================================
   shared content width
   ========================================================= */

.hw-wrap{ max-width:var(--max); margin:0 auto; padding:0 34px; }



/* 7 — FAQ: moved to faq.css (shared with contact.html) */


/* =========================================================
   scroll reveal
   ========================================================= */

.hw-up{
  opacity:0;
  transform:translateY(30px);
  transition:opacity .9s var(--hw-out), transform .9s var(--hw-out);
  transition-delay:var(--d, 0s);
}
.hw-up.is-seen{ opacity:1; transform:none; }


/* =========================================================
   RESPONSIVE
   ========================================================= */


/* tablet: four cards on a tighter arc */
@media (max-width:1100px){
  .lh-slot[data-n="1"], .lh-slot[data-n="4"], .lh-slot[data-n="7"]{ display:none; }
  .lh-slot[data-n="2"]{ --a:-40deg; }
  .lh-slot[data-n="3"]{ --a:-14deg; }
  .lh-slot[data-n="5"]{ --a:14deg; }
  .lh-slot[data-n="6"]{ --a:40deg; }
}

/* below this the pinned glide has no room: card on top, steps under it */
@media (max-width:980px){
  .hw-how{ padding-top:70px; }
  .hw-track{ height:auto; margin-top:48px; padding:0 24px 40px; }
  .hw-pin{ position:static; height:auto; display:block; }
  .hw-stage{ --cw:100cqw; height:auto; }
  .hw-card{ position:relative; width:100%; transform:none !important; scale:1 !important; border-radius:22px; }
  .hw-steps{
    position:static; width:100%; height:auto;
    margin-top:30px;
    opacity:1; transform:none; pointer-events:auto;
  }
  .hw-cta-lime{ margin-top:26px; }
}

/* phone: the wall flattens into a swipeable row */
@media (max-width:640px){
  .lh-inner{ padding-top:20px; }
  .lh-title{ letter-spacing:-.8px; }
  .lh-actions{ flex-direction:column; align-items:stretch; }
  .lh-btn, .lh-btn2{ justify-content:center; }
  .lh-btn{ justify-content:space-between; }
  .lh-grain{ display:none; }

  .lh-wallbox{
    height:auto; margin:36px 0 0;
    transform:none !important;
    pointer-events:auto;
  }
  .lh-wall{ position:static; width:auto; height:auto; margin:0; transform:none; perspective:none; }
  .lh-ring{
    position:static; width:auto; height:auto;
    transform:none;
    display:flex; gap:12px;
    padding:0 18px 8px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .lh-ring::-webkit-scrollbar{ display:none; }
  .lh-slot, .lh-slot[data-n]{
    display:block !important;
    position:static; flex:none;
    width:230px; height:304px;
    transform:none;
    scroll-snap-align:center;
  }
  .lh-par{ transform:none !important; }
  .lh-card .pad{ padding:16px; }

  .hw-how{ padding-top:76px; }
  .lh-steps{ gap:9px; padding:8px 14px; font-size:13px; }
  .lh-steps svg{ display:none; }
  .lh-plinth::before, .lh-plinth::after{ display:none; }
  .lh-plinth{ inset:40% 0 0; }
  .hw-wrap{ padding:0 18px; }
  .hw-switch button{ min-width:0; padding:0 18px; }
  .hw-track{ padding:0 16px 30px; }
  .hw-actions{ gap:10px; }
  .hw-pill, .hw-ghost{ height:54px; font-size:15.5px; }
}

@media (prefers-reduced-motion:reduce){
  .lh-up, .lh-float, .hw-up{ opacity:1 !important; transform:none !important; animation:none !important; }
  .lh-par, .lh-wallbox, .lh-inner, .lh-glow{ transform:none !important; }
  .lh-inner{ opacity:1 !important; }
  .hw-card, .hw-steps, .scr{ transition-duration:.01s !important; }
  .scr .a, .scr.is-on .a{ opacity:1; transform:none; animation:none; }
}

}