/* ══════════════════════════════════════════════════════════════
   État d'Âme · Welcome / landing page  (welcome.css)
   ──────────────────────────────────────────────────────────────
   Layered on top of css/dusk.css, which owns the shared visual
   language: the sky hero (.dusk-hero + .dusk-night/.dusk-stars/
   .dusk-disc), cards, buttons and the whole colour token set.
   Nothing in here redefines a dusk token. This file is layout,
   landing-only components, and the app mock-ups that let the page
   show real product surfaces without shipping screenshots of
   every screen.

   Sections, in source order:
     1  Shell & rhythm            8  Activity library
     2  Site header               9  Minigames
     3  Hero                     10  Planner showcase
     4  Four-index strip         11  Built for / roles
     5  Section furniture        12  Closing CTA & footer
     6  Device frames            13  Reveal motion
     7  How it works             14  Responsive & reduced motion
   ══════════════════════════════════════════════════════════════ */

/* ── 1 · Shell & rhythm ─────────────────────────────────────── */

:root {
  --wl-shell: 1160px;
  --wl-gutter: 30px;
  --wl-radius: 22px;
  --wl-section: 116px;

  /* One shadow recipe at three depths, so every raised surface
     on the page reads as the same material. */
  --wl-sh-1: 0 1px 2px rgba(58,45,39,.05), 0 10px 24px -18px rgba(58,45,39,.35);
  --wl-sh-2: 0 1px 3px rgba(58,45,39,.06), 0 22px 46px -28px rgba(58,45,39,.42);
  --wl-sh-3: 0 2px 6px rgba(58,45,39,.07), 0 44px 90px -44px rgba(58,45,39,.5);

  /* Planner block accents, lifted verbatim from the weekly planner's
     category picker so the mock-up can't drift from the real app. */
  --wl-cat-deep:     #de7556;
  --wl-cat-meetings: #eda55c;
  --wl-cat-admin:    #0b5f62;
  --wl-cat-personal: #aa90b8;
  --wl-cat-recovery: #b2af95;
}
html.dark {
  --wl-sh-1: 0 1px 2px rgba(0,0,0,.3), 0 10px 24px -18px rgba(0,0,0,.7);
  --wl-sh-2: 0 1px 3px rgba(0,0,0,.34), 0 22px 46px -28px rgba(0,0,0,.75);
  --wl-sh-3: 0 2px 6px rgba(0,0,0,.4), 0 44px 90px -44px rgba(0,0,0,.8);
  --wl-cat-deep:     #e08a6d;
  --wl-cat-meetings: #eeb277;
  --wl-cat-admin:    #4e9b9d;
  --wl-cat-personal: #bba6c8;
  --wl-cat-recovery: #c2bfa6;
}

html { scroll-behavior: smooth; }
body.wl { overflow-x: hidden; }

.wl-shell { width: min(100% - (var(--wl-gutter) * 2), var(--wl-shell)); margin-inline: auto; }

.wl-skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 11px 18px; border-radius: 12px;
  background: var(--dusk-pill); color: var(--dusk-pill-text);
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: top .2s var(--smooth);
}
.wl-skip:focus-visible { top: 12px; }

:where(.wl) a:focus-visible,
:where(.wl) button:focus-visible {
  outline: 2px solid var(--dusk-rust);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ── 2 · Site header ────────────────────────────────────────── */

.wl-header {
  position: fixed; z-index: 60; inset: 0 0 auto;
  transition: background .35s var(--smooth), border-color .35s var(--smooth),
              backdrop-filter .35s var(--smooth), box-shadow .35s var(--smooth);
  border-bottom: 1px solid transparent;
}
/* Transparent over the sky, then a frosted cream bar once the hero
   has scrolled past. js/welcome.js flips .is-stuck. */
.wl-header.is-stuck {
  background: rgba(250,246,241,.86);
  border-bottom-color: var(--dusk-line);
  box-shadow: var(--wl-sh-1);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
html.dark .wl-header.is-stuck { background: rgba(23,21,33,.86); }

.wl-header-inner {
  display: flex; align-items: center; gap: 26px;
  min-height: 76px;
}

.wl-wordmark {
  flex-shrink: 0;
  color: var(--sky-ink);
  font: 600 16px/1 'Source Serif 4', serif;
  letter-spacing: .13em; text-transform: uppercase; text-decoration: none;
  transition: color .35s var(--smooth);
}
.wl-header.is-stuck .wl-wordmark { color: var(--dusk-ink); }

.wl-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.wl-nav a {
  padding: 8px 13px; border-radius: 10px;
  color: rgba(248,238,231,.82); font-size: 13.5px; font-weight: 500; text-decoration: none;
  transition: color .2s, background .2s;
}
.wl-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.wl-header.is-stuck .wl-nav a { color: var(--dusk-copy); }
.wl-header.is-stuck .wl-nav a:hover { color: var(--dusk-ink); background: rgba(var(--dusk-rust-rgb),.09); }

/* Pushed to the right edge rather than relying on the nav to fill the row.
   The nav is display:none below 900px, so without this the wordmark and the
   actions packed to the left and left a gap down the right side on phones. */
.wl-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }

.wl-theme-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.14); color: var(--sky-ink);
  transition: background .2s, color .35s var(--smooth), transform .2s var(--spring);
}
.wl-theme-btn:hover { background: rgba(255,255,255,.24); }
.wl-theme-btn:active { transform: scale(.9); }
.wl-theme-btn .material-symbols-rounded { font-size: 19px; }
.wl-header.is-stuck .wl-theme-btn { background: rgba(var(--dusk-rust-rgb),.11); color: var(--dusk-ink); }

/* ── 3 · Hero ───────────────────────────────────────────────── */

.wl-hero.dusk-hero {
  padding: calc(150px + env(safe-area-inset-top)) var(--wl-gutter) 130px;
}
/* The shared disc is placed for an app hero's icon row; on a landing
   hero it needs to sit high and wide, clear of the headline. */
.wl-hero .dusk-disc {
  right: 8%; top: 96px; width: 92px; height: 92px;
  box-shadow: 0 0 76px rgba(242,181,126,.55);
}
html.dark .wl-hero .dusk-disc { box-shadow: 0 0 54px rgba(207,196,236,.45); }
.wl-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center; gap: 60px;
}

.wl-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--sky-eyebrow);
  font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
}
.wl-eyebrow::before {
  content: ''; width: 22px; height: 1px; background: currentColor; opacity: .55;
}

.wl-hero h1 {
  margin: 22px 0 0;
  max-width: 15ch;
  color: var(--sky-ink);
  font: 400 clamp(46px, 5.6vw, 78px)/1.02 'Source Serif 4', serif;
  letter-spacing: -.022em;
}
.wl-hero h1 em {
  font-style: italic;
  /* The four indices are the product's spine: the one place on the
     page where the headline is allowed to change colour. */
  color: #f0c39c;
}

.wl-hero-lede {
  margin-top: 22px; max-width: 52ch;
  color: var(--sky-copy); font-size: 16.5px; line-height: 1.62;
}

.wl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 26px; border: 1px solid transparent; border-radius: 999px;
  font-size: 15px; font-weight: 700; text-decoration: none; white-space: nowrap;
  transition: transform .25s var(--spring), box-shadow .25s var(--smooth),
              background .2s, border-color .2s, color .2s;
}
.wl-btn .material-symbols-rounded { font-size: 19px; transition: transform .25s var(--spring); }
.wl-btn:active { transform: scale(.97); }

.wl-btn-primary { background: #fdf3ea; color: #46302c; box-shadow: 0 16px 34px -16px rgba(20,10,18,.6); }
.wl-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -18px rgba(20,10,18,.66); }
.wl-btn-primary:hover .material-symbols-rounded { transform: translateX(3px); }

.wl-btn-ghost { border-color: rgba(255,255,255,.34); color: var(--sky-ink); }
.wl-btn-ghost:hover { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.09); }

/* Dark-pill variant for use down the cream part of the page. */
.wl-btn-ink { background: var(--dusk-pill); color: var(--dusk-pill-text); box-shadow: var(--wl-sh-2); }
.wl-btn-ink .material-symbols-rounded { color: var(--dusk-pill-icon); }
.wl-btn-ink:hover { transform: translateY(-2px); }
.wl-btn-ink:hover .material-symbols-rounded { transform: translateX(3px); }
.wl-btn-line { border-color: var(--dusk-line); color: var(--dusk-ink); background: var(--dusk-card); }
.wl-btn-line:hover { border-color: var(--dusk-rust); }

.wl-closing-card .wl-closing-signin {
  margin-top: 16px; max-width: 40ch; color: rgba(232,208,193,.86); font-size: 14px; line-height: 1.55;
}
.wl-closing-signin a {
  color: var(--sky-ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: rgba(240,195,156,.6);
  text-underline-offset: 3px;
}
.wl-closing-signin a:hover { text-decoration-color: currentColor; }

/* Hero art, a real screenshot in a phone shell, flanked by two
   floating cards lifted from surfaces elsewhere in the app. */
.wl-hero-art { position: relative; justify-self: center; }
/* Only the narrow layout hides the lede below the fold, so only it needs an
   affordance saying there is more. Wider screens never show this. */
.wl-scroll-cue { display: none; }
.wl-hero-art .wl-phone { transform: rotate(-2.2deg); }

.wl-float {
  position: absolute; z-index: 3;
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px 12px 12px; border-radius: 16px;
  background: var(--dusk-card); box-shadow: var(--wl-sh-3);
  white-space: nowrap;
  animation: wlFloat 7s ease-in-out infinite;
}
.wl-float-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px; flex-shrink: 0; border-radius: 11px;
  background: rgba(var(--wl-float-rgb, var(--dusk-rust-rgb)), .14);
  color: rgb(var(--wl-float-rgb, var(--dusk-rust-rgb)));
}
.wl-float-icon .material-symbols-rounded { font-size: 20px; font-variation-settings: 'FILL' 1; }
.wl-float strong { display: block; color: var(--dusk-ink); font-size: 13px; font-weight: 800; }
.wl-float span.wl-float-sub { display: block; margin-top: 1px; color: var(--dusk-muted); font-size: 11px; }

.wl-float-a { left: -58px; top: 15%; --wl-float-rgb: var(--dusk-amber-rgb); animation-delay: -1.4s; }
.wl-float-b { right: -46px; top: 45%; --wl-float-rgb: var(--dusk-green-rgb); animation-delay: -3.8s; }
.wl-float-c { left: -34px; bottom: 11%; --wl-float-rgb: var(--dusk-purple-rgb); animation-delay: -5.6s; }

@keyframes wlFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* ── 4 · Four-index strip ───────────────────────────────────── */

/* Rides up over the hero's cream wave so the sky and the body of the
   page are stitched together by one element rather than a hard seam. */
.wl-indices { position: relative; z-index: 4; margin-top: -66px; }
.wl-indices-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  border: 1px solid var(--dusk-line); border-radius: var(--wl-radius);
  background: var(--dusk-line); box-shadow: var(--wl-sh-3);
  overflow: hidden;
}
.wl-index { padding: 26px 24px 24px; background: var(--dusk-card); }
/* Name first. The index codes (ERI, ASI…) are the product's internal
   shorthand and mean nothing to someone meeting the four areas for the
   first time, so the public page shows the name with its colour dot. */
.wl-index-dot { flex-shrink: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--wl-i); }
.wl-index h3 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 6px; font: 400 22px/1.15 'Source Serif 4', serif;
}
.wl-index p { color: var(--dusk-copy); font-size: 13px; line-height: 1.55; }
.wl-i-eri  { --wl-i: var(--dusk-purple); }
.wl-i-asi  { --wl-i: var(--dusk-green); }
.wl-i-csfi { --wl-i: var(--dusk-blue); }
.wl-i-bsi  { --wl-i: var(--dusk-amber); }

/* ── 5 · Section furniture ──────────────────────────────────── */

.wl-section { padding: var(--wl-section) 0; }
.wl-section--tight { padding-top: 88px; }

.wl-head { max-width: 62ch; }
.wl-head--center { margin-inline: auto; text-align: center; }
.wl-head .wl-kicker {
  display: block;
  color: var(--dusk-rust);
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
}
.wl-head h2 {
  margin: 16px 0 0;
  font: 400 clamp(34px, 4vw, 50px)/1.08 'Source Serif 4', serif;
  letter-spacing: -.018em;
}
.wl-head p { margin-top: 18px; color: var(--dusk-copy); font-size: 16px; line-height: 1.66; }

.wl-rule { height: 1px; border: 0; background: var(--dusk-line); }

/* ── 6 · Device frames ──────────────────────────────────────── */

/* One phone shell used by the hero and the how-it-works steps. The
   inner aspect ratio matches the 375×880 captures in img/landing so
   screenshots seat flush with no letterboxing. */
.wl-phone {
  position: relative;
  width: 100%; max-width: 320px;
  padding: 9px;
  border: 1px solid var(--dusk-line); border-radius: 40px;
  background: linear-gradient(160deg, #fffdfa, #f2e7dc);
  box-shadow: var(--wl-sh-3);
}
html.dark .wl-phone { background: linear-gradient(160deg, #2b2738, #1c1926); }
.wl-phone-screen {
  position: relative; overflow: hidden;
  aspect-ratio: 375 / 812;
  border-radius: 32px; background: var(--dusk-bg);
}
.wl-phone-screen img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
/* Speaker notch, small, and purely decorative. */
.wl-phone::before {
  content: ''; position: absolute; z-index: 2; left: 50%; top: 19px;
  width: 62px; height: 5px; border-radius: 999px;
  background: rgba(58,45,39,.16); transform: translateX(-50%);
}
html.dark .wl-phone::before { background: rgba(255,255,255,.16); }

/* ── 7 · How it works ───────────────────────────────────────── */

.wl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px; margin-top: 62px; }
.wl-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.wl-step-art {
  position: relative; width: 100%;
  display: grid; place-items: center;
  padding: 34px 20px 0;
  border-radius: var(--wl-radius) var(--wl-radius) 0 0;
  background: linear-gradient(170deg, rgba(var(--dusk-rust-rgb), .1), rgba(var(--dusk-rust-rgb), 0));
}
.wl-step:nth-child(2) .wl-step-art { background: linear-gradient(170deg, rgba(var(--dusk-green-rgb), .13), rgba(var(--dusk-green-rgb), 0)); }
.wl-step:nth-child(3) .wl-step-art { background: linear-gradient(170deg, rgba(var(--dusk-purple-rgb), .13), rgba(var(--dusk-purple-rgb), 0)); }
/* Screens are cropped at the top of the phone so the three steps read
   as a filmstrip rather than three full, competing screenshots. */
.wl-step-art .wl-phone { max-width: 250px; margin-bottom: -70px; }
.wl-step-art .wl-phone-screen { aspect-ratio: 375 / 620; }

.wl-step-body { padding: 92px 8px 0; }
.wl-step-num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--dusk-line);
  color: var(--dusk-rust); font-size: 11px; font-weight: 800; letter-spacing: .04em;
}
.wl-step h3 { margin: 15px 0 8px; font: 400 25px/1.15 'Source Serif 4', serif; }
.wl-step p { color: var(--dusk-copy); font-size: 14.5px; line-height: 1.62; }

.wl-aside {
  display: flex; align-items: flex-start; gap: 15px;
  max-width: 720px; margin: 56px auto 0; padding: 20px 24px;
  border: 1px solid var(--dusk-line); border-radius: 16px;
  background: var(--dusk-card-2);
}
.wl-aside .material-symbols-rounded { flex-shrink: 0; margin-top: 1px; color: var(--dusk-rust); font-size: 21px; }
.wl-aside p { color: var(--dusk-copy); font-size: 14px; line-height: 1.62; }
.wl-aside strong { color: var(--dusk-ink); }

/* ── 8 · Activity library ───────────────────────────────────── */

.wl-band {
  border-block: 1px solid var(--dusk-line);
  background: var(--dusk-card-2);
}

.wl-lib-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.wl-count-block { flex-shrink: 0; }
.wl-count {
  display: flex; gap: 34px; justify-content: flex-end;
}
/* The library is not finished, and saying so is a better look than a
   number that quietly changes between visits. */
.wl-count-note {
  display: flex; align-items: flex-start; justify-content: flex-end; gap: 7px;
  max-width: 30ch; margin: 16px 0 0 auto; padding-top: 14px;
  border-top: 1px solid var(--dusk-line);
  color: var(--dusk-muted); font-size: 12px; line-height: 1.5; text-align: right;
}
.wl-count-note .material-symbols-rounded {
  order: 2; flex-shrink: 0; margin-top: 1px;
  color: var(--dusk-rust); font-size: 15px;
}
.wl-count > div { text-align: right; }
.wl-count b {
  display: block;
  color: var(--dusk-ink); font: 400 40px/1 'Source Serif 4', serif;
}
.wl-count span {
  display: block; margin-top: 6px;
  color: var(--dusk-muted); font-size: 11px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}

.wl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

/* Deliberately close to the real .act-card in activities.html: same
   dimension label, cadence chip, interaction label, duration and XP
   award, so what a visitor sees here is what they get after signup. */
.wl-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  padding: 20px 22px 18px;
  border: 1px solid var(--dusk-line); border-radius: 18px;
  background: var(--dusk-card); box-shadow: var(--wl-sh-1);
  transition: transform .3s var(--smooth), box-shadow .3s var(--smooth), border-color .3s;
}
.wl-card::before {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 3px;
  background: var(--wl-i, var(--dusk-rust)); opacity: .85;
}
.wl-card:hover { transform: translateY(-3px); box-shadow: var(--wl-sh-2); border-color: rgba(var(--dusk-rust-rgb), .3); }

.wl-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.wl-card-dim {
  color: var(--wl-i, var(--dusk-rust));
  font-size: 9.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.wl-cadence {
  margin-left: auto; padding: 3px 8px; border-radius: 999px;
  background: rgba(var(--dusk-rust-rgb), .1); color: var(--dusk-rust);
  font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.wl-card h3 { margin-bottom: 7px; font: 700 16px/1.25 'Albert Sans', sans-serif; color: var(--dusk-ink); }
.wl-card p {
  color: var(--dusk-copy); font-size: 13px; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.wl-card-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: auto; padding-top: 16px;
}
.wl-meta { display: flex; align-items: center; gap: 13px; color: var(--dusk-muted); font-size: 11.5px; }
.wl-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.wl-meta .material-symbols-rounded { font-size: 14px; }
.wl-xp {
  color: var(--dusk-rust); font-size: 11px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}

.wl-lib-foot { display: flex; justify-content: center; margin-top: 40px; }
.wl-empty { grid-column: 1 / -1; padding: 40px 0; color: var(--dusk-muted); text-align: center; }

/* ── 9 · Minigames ──────────────────────────────────────────── */

/* Two columns across the full 1160px shell put a single card at 569px
   wide and 634px tall, which is most of a laptop screen for one game.
   Narrowing the grid keeps the art legible (these are screenshots, and
   four across would shrink the Sorting Grove board past reading) while
   bringing the card back to a sensible size. The heading is centred so
   the narrower column reads as deliberate. */
.wl-games {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
  max-width: 860px; margin: 52px auto 0;
}
.wl-game {
  overflow: hidden; display: flex; flex-direction: column;
  border: 1px solid var(--dusk-line); border-radius: var(--wl-radius);
  background: var(--dusk-card); box-shadow: var(--wl-sh-1);
  transition: transform .35s var(--smooth), box-shadow .35s var(--smooth);
}
.wl-game:hover { transform: translateY(-4px); box-shadow: var(--wl-sh-2); }
/* 4:3, set by Fox's Sorting Grove: its board is deliberately phone-shaped
   (max-width 560px in sorting-grove.html) and anything wider crops the home
   tiles' artwork away. The three real captures are shot to fit exactly;
   Lantern Keeper's wider cover crops at the sides, where it has nothing. */
.wl-game-art { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #2a2436; }
.wl-game-art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .6s var(--smooth);
}
.wl-game:hover .wl-game-art img { transform: scale(1.045); }
/* The badge sits in the card body rather than over the art: these are
   real game screens, and every corner of them already holds the game's
   own HUD, an overlaid chip landed on top of it. */
.wl-game-badge {
  display: block; margin-bottom: 10px;
  color: var(--dusk-rust);
  font-size: 9.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.wl-game-body { display: flex; flex-direction: column; flex: 1; padding: 19px 21px 20px; }
.wl-game h3 { margin-bottom: 8px; font: 400 23px/1.12 'Source Serif 4', serif; }
.wl-game p { color: var(--dusk-copy); font-size: 13.5px; line-height: 1.6; }
.wl-game-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-top: auto; padding-top: 17px;
}

/* ── 10 · Planner showcase ──────────────────────────────────── */

.wl-planner-grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: center; gap: 70px;
}
.wl-list { display: grid; gap: 22px; margin-top: 38px; }
.wl-list li { display: flex; gap: 15px; list-style: none; }
.wl-list .material-symbols-rounded {
  display: grid; place-items: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 11px;
  background: rgba(var(--dusk-rust-rgb), .12); color: var(--dusk-rust); font-size: 19px;
}
.wl-list h3 { margin-bottom: 4px; font: 700 15px/1.3 'Albert Sans', sans-serif; }
.wl-list p { color: var(--dusk-copy); font-size: 14px; line-height: 1.6; }

/* A working recreation of the weekly planner's day view: sky header,
   energy curve, capacity control, week strip, blocks, view dock. */
.wl-planner {
  overflow: hidden;
  border: 1px solid var(--dusk-line); border-radius: 26px;
  background: var(--dusk-bg); box-shadow: var(--wl-sh-3);
}
.wl-planner-sky {
  position: relative; z-index: 0; isolation: isolate; overflow: hidden;
  padding: 24px 26px 30px;
  background:
    radial-gradient(140% 110% at 15% -20%, rgba(125,84,110,.62), rgba(125,84,110,0) 55%),
    radial-gradient(120% 100% at 95% -5%, rgba(238,180,137,.5), rgba(238,180,137,0) 52%),
    linear-gradient(168deg, #3e2d47 0%, #6e4550 55%, #a5624e 100%);
}
html.dark .wl-planner-sky {
  background:
    radial-gradient(120% 90% at 18% -12%, rgba(93,89,148,.5), rgba(93,89,148,0) 56%),
    radial-gradient(100% 85% at 92% 5%, rgba(123,91,133,.35), rgba(123,91,133,0) 55%),
    linear-gradient(168deg, #151627 0%, #25233b 53%, #443044 100%);
}
.wl-planner-sky::after {
  content: ''; position: absolute; z-index: 2; left: -20%; right: -20%; bottom: -26px; height: 34px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0; background: var(--dusk-bg);
}
.wl-planner-sun {
  position: absolute; right: 30px; top: 20px;
  width: 48px; height: 48px; border-radius: 50%;
  background: radial-gradient(circle at 35% 33%, #ffe6c5, #e9a86f);
  box-shadow: 0 0 34px rgba(233,168,111,.6);
}
html.dark .wl-planner-sun { background: radial-gradient(circle at 35% 33%, #f4f0ff, #cdc6e8); box-shadow: 0 0 30px rgba(205,198,232,.45); }
.wl-planner-date {
  color: var(--sky-eyebrow); font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
}
.wl-planner-sky h3 {
  margin: 9px 0 20px;
  color: var(--sky-ink); font: 400 27px/1.1 'Source Serif 4', serif;
}
.wl-energy { position: relative; height: 62px; }
.wl-energy svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wl-energy-now {
  position: absolute; left: 22%; top: -6px; bottom: 0;
  border-left: 1px dashed rgba(255,255,255,.45);
}
.wl-energy-now b {
  position: absolute; left: 50%; top: -14px; transform: translateX(-50%);
  color: rgba(255,255,255,.72); font-size: 8px; font-weight: 800; letter-spacing: .12em;
}
.wl-energy-axis {
  display: flex; justify-content: space-between; margin-top: 7px;
  color: rgba(232,208,193,.62); font-size: 9px; font-weight: 700; letter-spacing: .06em;
}
.wl-planner-note { margin-top: 14px; color: var(--sky-copy); font-size: 12.5px; line-height: 1.5; }

.wl-capacity-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 20px 0 9px;
}
.wl-capacity-row span {
  color: rgba(232,208,193,.72); font-size: 9px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
}
.wl-capacity-row b { color: #fdf3ea; font-size: 11px; font-weight: 700; }
.wl-capacity {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 3px; border-radius: 999px; background: rgba(255,255,255,.13);
}
.wl-capacity span {
  padding: 8px 0; border-radius: 999px; text-align: center;
  color: rgba(248,238,231,.72); font-size: 11px; font-weight: 700;
}
.wl-capacity span.is-on { background: #f4e3d6; color: #4b3735; }

.wl-planner-body { padding: 26px 26px 22px; }
.wl-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  padding-bottom: 16px; border-bottom: 1px solid var(--dusk-line);
}
.wl-week div { text-align: center; }
.wl-week i {
  display: block; margin-bottom: 8px;
  color: var(--dusk-muted); font-size: 9.5px; font-style: normal; font-weight: 800; letter-spacing: .08em;
}
.wl-week b {
  display: grid; place-items: center;
  width: 30px; height: 30px; margin: 0 auto; border-radius: 50%;
  color: var(--dusk-copy); font-size: 13px; font-weight: 600;
}
.wl-week .is-today b { background: var(--dusk-pill); color: var(--dusk-pill-text); }
.wl-week u {
  display: block; width: 4px; height: 4px; margin: 7px auto 0; border-radius: 50%;
  background: rgba(var(--dusk-rust-rgb), .55);
}
.wl-week .is-empty u { background: var(--dusk-line); }

.wl-day-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 22px 0 14px;
}
.wl-day-head h4 { font: 400 22px/1 'Source Serif 4', serif; }
.wl-day-head span { color: var(--dusk-muted); font-size: 11px; font-weight: 600; }

.wl-blocks { display: grid; gap: 9px; }
.wl-block {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 16px; border: 1px solid var(--dusk-line); border-radius: 14px;
  background: var(--dusk-card);
  border-left: 3px solid var(--wl-c);
}
.wl-block-time {
  flex-shrink: 0; width: 52px;
  color: var(--dusk-muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.wl-block-main { flex: 1; min-width: 0; }
.wl-block-main b { display: block; color: var(--dusk-ink); font-size: 13.5px; font-weight: 700; }
.wl-block-main span {
  display: block; margin-top: 2px;
  color: var(--wl-c); font-size: 9px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.wl-block .material-symbols-rounded { flex-shrink: 0; color: var(--wl-c); font-size: 18px; }
.wl-c-deep     { --wl-c: var(--wl-cat-deep); }
.wl-c-meetings { --wl-c: var(--wl-cat-meetings); }
.wl-c-admin    { --wl-c: var(--wl-cat-admin); }
.wl-c-personal { --wl-c: var(--wl-cat-personal); }
.wl-c-recovery { --wl-c: var(--wl-cat-recovery); }

.wl-planner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.wl-planner-actions > div {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--dusk-line); border-radius: 14px;
  background: var(--dusk-card);
}
.wl-planner-actions .wl-add { border-color: transparent; background: var(--dusk-pill); }
.wl-planner-actions .wl-add b { color: var(--dusk-pill-text); }
.wl-planner-actions .wl-add small { color: rgba(255,250,244,.62); }
.wl-planner-actions .wl-add .material-symbols-rounded { color: var(--dusk-pill-icon); }
.wl-planner-actions b { display: block; color: var(--dusk-ink); font-size: 12.5px; font-weight: 700; }
.wl-planner-actions small { display: block; margin-top: 1px; color: var(--dusk-muted); font-size: 10.5px; }
.wl-planner-actions .material-symbols-rounded { color: var(--dusk-muted); font-size: 19px; }

/* Day, week and month share one grid cell. The frame therefore sizes to
   the tallest view once and holds still while you switch between them, the alternative, showing one at a time, made the whole section jump. */
.wl-views { display: grid; }
.wl-view {
  grid-area: 1 / 1;
  visibility: hidden; opacity: 0;
  transition: opacity .28s var(--smooth);
}
.wl-view.is-on { visibility: visible; opacity: 1; }

.wl-dock {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  margin: 20px auto 0; padding: 5px; max-width: 330px;
  border: 1px solid var(--dusk-line); border-radius: 999px; background: var(--dusk-card);
  box-shadow: var(--wl-sh-1);
}
.wl-dock button {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 10px 0; border: 0; border-radius: 999px; background: transparent;
  color: var(--dusk-copy); font-size: 12.5px; font-weight: 700;
  transition: background .2s, color .2s;
}
.wl-dock button:hover:not(.is-on) { background: rgba(var(--dusk-rust-rgb), .09); color: var(--dusk-ink); }
.wl-dock button.is-on { background: var(--dusk-pill); color: var(--dusk-pill-text); }
.wl-dock button.is-on .material-symbols-rounded { color: var(--dusk-pill-icon); }
.wl-dock .material-symbols-rounded { font-size: 17px; }

/* ── Week bars in the sky ───────────────────────────────────── */

/* The real week view puts its seven bars in the sky rather than the body
   (.m-hero-week-bars in weekly_planner.html), so these match that: a
   translucent capsule track, a coloured fill rising from the floor, and
   the weekday letter beneath. */
/* Day is the tallest sky, so week and month would otherwise sit at the
   top of a large void. Centre them and the extra height reads as sky. */
.wl-planner-sky .wl-view[data-sky="week"],
.wl-planner-sky .wl-view[data-sky="month"] {
  display: flex; flex-direction: column; justify-content: center;
}

.wl-sky-bars {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px;
  align-items: end; height: 96px; margin: 16px 4px 4px;
}
.wl-sky-bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 96px; }
.wl-sky-track {
  position: relative; width: 18px; flex: 1; overflow: hidden; border-radius: 99px;
  background: rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.wl-sky-fill {
  position: absolute; inset: auto 0 0; border-radius: 99px;
  background: var(--wl-e); opacity: .95;
  box-shadow: 0 0 11px rgba(var(--wl-e-rgb), .38);
  transition: height .5s var(--smooth);
}
.wl-sky-bar small { color: #e4cabe; font-size: 8.5px; font-weight: 700; }
.wl-sky-bar.is-today small { position: relative; color: #fff8f2; text-shadow: 0 0 10px rgba(255,238,226,.85); }
.wl-sky-bar.is-today small::after {
  content: ''; position: absolute; left: 50%; bottom: -5px;
  width: 3px; height: 3px; border-radius: 50%;
  background: #fff8f2; box-shadow: 0 0 7px rgba(255,238,226,.9);
  transform: translateX(-50%);
}
.wl-sky-bar.is-today .wl-sky-track {
  background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,248,242,.5);
}

/* The planner's five-step energy scale, meter 0-4. */
.wl-e-0 { --wl-e: #b09883; --wl-e-rgb: 176,152,131; }
.wl-e-1, .wl-e-2 { --wl-e: #7d906c; --wl-e-rgb: 125,144,108; }
.wl-e-3 { --wl-e: #d9a35c; --wl-e-rgb: 217,163,92; }
.wl-e-4 { --wl-e: #b5674a; --wl-e-rgb: 181,103,74; }

/* ── Week & month body cards ────────────────────────────────── */

.wl-pcard {
  padding: 16px 16px 15px;
  border: 1px solid var(--dusk-line); border-radius: 17px; background: var(--dusk-card);
}
.wl-pcard + .wl-pcard { margin-top: 10px; }
.wl-pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.wl-pcard-head h4 {
  display: flex; align-items: center; gap: 7px;
  font: 400 19px/1.15 'Source Serif 4', serif;
}
.wl-pcard-head h4 .material-symbols-rounded { color: var(--dusk-purple); font-size: 18px; }
.wl-pcard-head > span { flex-shrink: 0; color: var(--dusk-muted); font-size: 11px; }
.wl-pcard-head > span b { color: var(--dusk-ink); font-size: 13px; font-weight: 800; }
.wl-pcard-kicker {
  display: block; margin-bottom: 3px;
  color: var(--dusk-muted);
  font-size: 8.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
}
.wl-pcard-note { margin-top: 12px; color: var(--dusk-muted); font-size: 11.5px; line-height: 1.5; }
.wl-day-state {
  flex-shrink: 0; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--dusk-line); background: var(--dusk-card-2);
  color: var(--dusk-copy); font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

/* One stacked bar of the week's hours, by category. */
.wl-load { display: flex; gap: 3px; height: 10px; margin-top: 14px; }
.wl-load i { border-radius: 99px; background: var(--wl-c); }
.wl-load-key {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px;
  color: var(--dusk-muted); font-size: 10.5px;
}
.wl-load-key span { display: inline-flex; align-items: center; gap: 5px; }
.wl-load-key i { width: 7px; height: 7px; border-radius: 50%; background: var(--wl-c); }

.wl-momentum { display: grid; gap: 10px; margin-top: 14px; }
.wl-momentum > div { display: flex; align-items: center; gap: 11px; }
.wl-momentum span { flex: 0 0 104px; color: var(--dusk-copy); font-size: 11.5px; }
.wl-momentum i { flex: 1; height: 6px; border-radius: 99px; background: var(--dusk-line); overflow: hidden; }
.wl-momentum u {
  display: block; height: 100%; border-radius: 99px;
  background: var(--dusk-green); text-decoration: none;
}
.wl-momentum b { flex-shrink: 0; color: var(--dusk-muted); font-size: 10.5px; font-weight: 800; }

/* ── Month heat grid ────────────────────────────────────────── */

.wl-pcard--month { display: flex; flex-direction: column; }
.wl-month-weekdays, .wl-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.wl-month-weekdays { margin-bottom: 6px; }
.wl-month-weekdays span {
  color: var(--dusk-muted);
  font-size: 8px; font-weight: 800; letter-spacing: .05em; text-align: center;
}
.wl-month-grid { flex: 1; grid-auto-rows: 1fr; }

/* Fill shade is the day's fullness, the planner's own five-step ramp. */
.wl-month-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 34px; padding: 4px 2px;
  border: 1px solid transparent; border-radius: 9px;
  background: var(--wl-heat); color: var(--dusk-ink);
}
.wl-month-day > b { font-size: 10.5px; font-weight: 700; }
.wl-month-day.is-outside { opacity: .22; }
.wl-month-day.is-today { border-color: var(--dusk-rust); }
.wl-month-day.is-selected {
  border-color: var(--dusk-pill); background: var(--dusk-pill); color: var(--dusk-pill-text);
  box-shadow: 0 4px 10px rgba(58,45,39,.18);
}
.wl-month-count {
  min-width: 13px; padding: 0 4px; border-radius: 999px;
  background: rgba(58,45,39,.08); color: var(--dusk-copy);
  font-size: 7.5px; font-weight: 800; line-height: 1.5;
}
.wl-month-day.is-selected .wl-month-count { background: rgba(255,255,255,.9); color: var(--dusk-ink); }
/* In night mode the ramp is far too bright to sit on a dark card, so it
   is mixed back down rather than restated as a second set of hexes. */
html.dark .wl-month-day {
  color: var(--dusk-ink);
  background: color-mix(in srgb, var(--wl-heat) 22%, var(--dusk-card));
}
html.dark .wl-month-count { background: rgba(255,255,255,.1); }

.wl-heat-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 12px; color: var(--dusk-muted); font-size: 8px;
}
.wl-heat-legend i { width: 13px; height: 7px; border-radius: 2px; background: #fbf8f3; }
.wl-heat-legend i:nth-of-type(2) { background: #f6ebdf; }
.wl-heat-legend i:nth-of-type(3) { background: #f1dac5; }
.wl-heat-legend i:nth-of-type(4) { background: #eabf9f; }
.wl-heat-legend i:nth-of-type(5) { background: #d99470; }
html.dark .wl-heat-legend i { filter: brightness(.55) saturate(.75); }

/* ── 11 · Built for / roles ─────────────────────────────────── */

.wl-roles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 980px; margin: 56px auto 0; }
.wl-role {
  display: flex; flex-direction: column;
  padding: 30px 28px 28px;
  border: 1px solid var(--dusk-line); border-radius: var(--wl-radius);
  background: var(--dusk-card);
  transition: transform .3s var(--smooth), box-shadow .3s var(--smooth), border-color .3s;
}
.wl-role:hover { transform: translateY(-3px); box-shadow: var(--wl-sh-2); border-color: rgba(var(--dusk-rust-rgb), .3); }
.wl-role-icon {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 14px;
  background: rgba(var(--wl-r), .13); color: rgb(var(--wl-r));
}
.wl-role-icon .material-symbols-rounded { font-size: 24px; }
.wl-role h3 { margin: 20px 0 9px; font: 400 25px/1.14 'Source Serif 4', serif; }
.wl-role > p { color: var(--dusk-copy); font-size: 14.5px; line-height: 1.62; }
.wl-role-scope { display: none; }
.wl-role-details { display: contents; }
.wl-role-expand { display: none; }
.wl-role ul { margin: 20px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.wl-role li {
  display: flex; align-items: flex-start; gap: 9px;
  color: var(--dusk-copy); font-size: 13.5px; line-height: 1.5;
}
.wl-role li .material-symbols-rounded { flex-shrink: 0; margin-top: 1px; color: rgb(var(--wl-r)); font-size: 16px; }
/* Both workspaces are desktop-first, so set that expectation before someone
   opens a member table on a phone. */
.wl-devices {
  display: flex; align-items: center; gap: 7px;
  /* auto, so the note and link line up across both cards. */
  margin-top: auto; padding-top: 22px;
  color: var(--dusk-muted); font-size: 12px; font-weight: 600;
}
.wl-devices .material-symbols-rounded { font-size: 16px; color: var(--dusk-copy); }
.wl-devices .material-symbols-rounded + .material-symbols-rounded { margin-left: -3px; }
.wl-devices > span:last-child { margin-left: 3px; }

/* A real control rather than a trailing text link: full width so the two
   cards end on the same shape, and outlined so it stays quiet next to the
   hero's filled buttons. Hover borrows each card's own accent via --wl-r. */
.wl-role-link {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin-top: 18px; padding: 12px 18px;
  border: 1px solid rgba(var(--wl-r), .28); border-radius: 999px;
  /* Tinted with the card's own accent at the same strength as the icon chip
     above it, so the two ends of the card rhyme. The label stays ink rather
     than accent: rust, green and purple all sit near 3.5-4.2:1 on white,
     which is short of 4.5:1 for text this size. The arrow carries the colour
     instead, where contrast is not load-bearing. */
  background: rgba(var(--wl-r), .10);
  color: var(--dusk-ink); font-size: 13.5px; font-weight: 700;
  text-decoration: none; white-space: nowrap;
  transition: border-color .2s, background .2s, transform .25s var(--spring);
}
.wl-role-link .material-symbols-rounded { color: rgb(var(--wl-r)); }
.wl-role-link:hover {
  border-color: rgba(var(--wl-r), .5);
  background: rgba(var(--wl-r), .17);
}
.wl-role-link:active { transform: scale(.98); }
.wl-role-link .material-symbols-rounded { font-size: 17px; transition: transform .25s var(--spring); }
.wl-role-link:hover .material-symbols-rounded { transform: translateX(3px); }
.wl-r-clin   { --wl-r: var(--dusk-green-rgb); }
.wl-r-org    { --wl-r: var(--dusk-purple-rgb); }

/* ── 12 · Closing CTA & footer ──────────────────────────────── */

.wl-closing { padding-bottom: var(--wl-section); }
.wl-closing-card {
  position: relative; z-index: 0; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; justify-content: space-between; gap: 44px; flex-wrap: wrap;
  padding: 66px 60px; border-radius: 30px;
  background:
    radial-gradient(120% 130% at 12% -10%, rgba(125,84,110,.6), rgba(125,84,110,0) 58%),
    radial-gradient(110% 120% at 92% 0%, rgba(238,180,137,.48), rgba(238,180,137,0) 55%),
    linear-gradient(150deg, #3e2d47 0%, #6e4550 55%, #a5624e 100%);
  box-shadow: var(--wl-sh-3);
}
html.dark .wl-closing-card {
  background:
    radial-gradient(120% 130% at 12% -10%, rgba(93,89,148,.52), rgba(93,89,148,0) 58%),
    radial-gradient(110% 120% at 92% 0%, rgba(123,91,133,.4), rgba(123,91,133,0) 55%),
    linear-gradient(150deg, #151627 0%, #25233b 53%, #443044 100%);
}
.wl-closing-card h2 {
  max-width: 17ch;
  color: var(--sky-ink); font: 400 clamp(32px, 3.8vw, 46px)/1.08 'Source Serif 4', serif;
  letter-spacing: -.018em;
}
.wl-closing-card h2 em { font-style: italic; color: #f0c39c; }
/* The two tours lead, because this page is read by practices and
   organizations who do not have an account yet. Signing in stays, as
   a sentence under them for the people who were sent here. */
.wl-closing-side { flex-shrink: 0; max-width: 460px; }
.wl-closing-actions { display: flex; flex-wrap: wrap; gap: 12px; flex-shrink: 0; }
.wl-closing-card p { margin-top: 16px; max-width: 44ch; color: var(--sky-copy); font-size: 15.5px; line-height: 1.6; }

.wl-footer { border-top: 1px solid var(--dusk-line); padding: 54px 0 46px; }
.wl-footer-inner {
  display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
}
.wl-footer-brand .wl-wordmark { color: var(--dusk-ink); }
.wl-footer-brand p { margin-top: 14px; max-width: 34ch; color: var(--dusk-copy); font-size: 13.5px; line-height: 1.62; }
.wl-footer-brand .wl-studio-link a { color: var(--dusk-rust); text-decoration: underline; text-underline-offset: 3px; }
.wl-footer h4 {
  margin-bottom: 15px;
  color: var(--dusk-muted); font: 800 10.5px/1 'Albert Sans', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
.wl-footer ul { list-style: none; display: grid; gap: 11px; }
.wl-footer ul a { color: var(--dusk-copy); font-size: 13.5px; text-decoration: none; }
.wl-footer ul a:hover { color: var(--dusk-rust); }
.wl-footer-base {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--dusk-line);
  color: var(--dusk-muted); font-size: 12.5px;
}

/* ── 13 · Reveal motion ─────────────────────────────────────── */

/* js/welcome.js adds .is-in as each block crosses the viewport. The
   start state only applies once the script has confirmed support, so
   content is never left invisible if the script fails to run. */
html.wl-reveal [data-reveal] {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--smooth), transform .7s var(--smooth);
}
html.wl-reveal [data-reveal].is-in { opacity: 1; transform: none; }

@keyframes wl-cue-nudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

@keyframes wl-cue-ring {
  0%   { transform: scale(1);    opacity: .55; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* The hero lede only reveals on the narrow layout, where it sits below the
   phone and out of first view. Wider screens show it beside the art as part
   of the first impression, so it must never start invisible there. */
@media (min-width: 621px) {
  html.wl-reveal .wl-hero-lede[data-reveal] { opacity: 1; transform: none; }
}

/* ── 14 · Responsive & reduced motion ───────────────────────── */

@media (max-width: 1080px) {
  :root { --wl-section: 92px; }
  .wl-hero-grid { gap: 40px; }
  .wl-hero-art .wl-phone { max-width: 280px; }
  .wl-float-a { left: -30px; }
  .wl-float-b { right: -22px; }
  .wl-float-c { left: -18px; }
  .wl-indices-grid { grid-template-columns: repeat(2, 1fr); }
  .wl-cards { grid-template-columns: repeat(2, 1fr); }
  .wl-planner-grid { gap: 44px; }
  .wl-roles { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .wl-nav { display: none; }
  .wl-hero.dusk-hero { padding-top: calc(126px + env(safe-area-inset-top)); padding-bottom: 110px; }
  /* One column leads with the product. The phone and its three insight cards
     move directly under the headline, so the first screen shows what Etat
     d'Ame actually looks like instead of a paragraph to read first.
     display:contents lifts the copy's children into the hero grid, which is
     what lets the art be ordered between the headline and the lede. Row gap
     drops to 0 because every copy element already carries its own margin-top
     and would otherwise be spaced twice. */
  .wl-hero-grid { grid-template-columns: 1fr; gap: 0; }
  .wl-hero-copy { display: contents; }
  .wl-hero h1 { max-width: none; order: 1; }
  .wl-hero-art { order: 2; margin: 40px auto 6px; }
  .wl-hero-lede { max-width: none; order: 3; }
  .wl-steps { grid-template-columns: 1fr; gap: 46px; max-width: 420px; margin-inline: auto; }
  .wl-games { grid-template-columns: 1fr; }
  .wl-planner-grid { grid-template-columns: 1fr; }
  .wl-planner { max-width: 520px; margin-inline: auto; }
  .wl-closing-card { padding: 46px 34px; }
  .wl-footer-inner { grid-template-columns: 1fr 1fr; }
  .wl-footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  :root { --wl-gutter: 20px; --wl-section: 72px; }
  .wl-header-inner { min-height: 66px; gap: 12px; }
  /* Tuck the sun into the gap between the header and the eyebrow, at the desktop size it sat behind the eyebrow's second line. */
  /* Tightened from the original 148px, which left a ~103px band of empty
     gradient above the headline. 130px keeps roughly 20px of clearance under
     the disc, which sits at 74-132px; at 108px the headline started at 130px
     and collided with it. */
  .wl-hero.dusk-hero { padding-top: calc(130px + env(safe-area-inset-top)); }
  .wl-hero .dusk-disc { right: 7%; top: 74px; width: 58px; height: 58px; box-shadow: 0 0 46px rgba(242,181,126,.5); }
  /* 9.6vw resolves to 36px at 375px, which is the largest size that still
     keeps "Your mind, mapped" whole on the first line; 37px tips it into a
     third line. The floor keeps the same break down to a 320px screen. */
  .wl-hero h1 { font-size: clamp(31px, 9.6vw, 52px); }
  .wl-indices { margin-top: -40px; }
  .wl-lib-head { gap: 26px; }
  .wl-count { gap: 24px; justify-content: flex-start; }
  .wl-count > div { text-align: left; }
  /* Counts go left-aligned here, so the note follows them. The block is
     flex-shrink:0 for the desktop row, which would let the note run off
     the screen once it is full width, so pin it to the container. */
  .wl-count-block { width: 100%; min-width: 0; }
  .wl-count-note {
    max-width: none; margin-left: 0;
    justify-content: flex-start; text-align: left;
  }
  .wl-count-note .material-symbols-rounded { order: 0; }
  .wl-cards { grid-template-columns: 1fr; }
  .wl-planner-sky, .wl-planner-body { padding-inline: 18px; }
  /* Keep the headline clear of the sun once the card is phone-width. */
  .wl-planner-sky h3 { padding-right: 58px; font-size: 23px; }
  .wl-planner-sun { right: 20px; top: 16px; width: 40px; height: 40px; }
  .wl-closing-card { padding: 38px 24px; border-radius: 24px; }
  .wl-closing-side { width: 100%; max-width: none; }
  .wl-closing-actions { width: 100%; flex-direction: column; }
  .wl-closing-card .wl-btn { width: 100%; }
  .wl-footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .wl-footer-base { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wl-float { animation: none; }
  .wl-view, .wl-sky-fill { transition: none; }
  html.wl-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
  .wl-scroll-cue, .wl-scroll-cue::after { animation: none; }
  .wl-scroll-cue::after { opacity: 0; }
  .wl-card:hover, .wl-game:hover, .wl-role:hover, .wl-btn:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   15 · Mobile density
   ──────────────────────────────────────────────────────────────
   The page runs to roughly seventeen screens on a phone, and most
   of that is images: three tall device frames in "how it works"
   and four 4:3 game covers stacked one under the other.

   Nothing is removed. The screenshots get smaller, the minigames
   become a snap carousel so four cards cost the height of one,
   the library shows four cards instead of six (the filters still
   reach the rest), and the copy that repeats what a heading
   already said steps aside.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  :root { --wl-section: 58px; }

  /* The four indices are short enough to pair up rather than run down
     the screen one per row. */
  .wl-indices-grid { grid-template-columns: 1fr 1fr; }
  .wl-index { padding: 20px 18px; }
  .wl-index h3 { font-size: 19px; }
  .wl-index p { font-size: 12px; }

  /* Hero: the phone is the tallest single element on the page. */
  /* 220 rather than 232: a 5% trim nobody reads as smaller, which buys the
     ~28px the cue needs to sit clear of the phone and still land inside the
     fold on an 812pt screen. Taking it from the hero padding instead would
     have put the headline back under the disc. */
  .wl-hero-art .wl-phone { max-width: 220px; }
  /* An ordinary gap now, not a viewport-sized push: the lede carries
     data-reveal, so it fades in on scroll instead of being held below the
     fold by margin alone. That keeps the first screen to the headline and the
     app without leaving a viewport of dead gradient on a tall phone. */
  /* Tight enough that the cue below it still lands inside the first screen on
     an 812pt phone. At 30px the cue sat at 783-831 and was cut by the fold. */
  .wl-hero-art { margin-bottom: 24px; }
  /* Filled rather than outlined. A hairline ring with dimmed ink on a dark
     gradient was almost invisible on a phone in daylight, which defeats the
     whole point of a cue. */
  .wl-scroll-cue {
    order: 3;
    position: relative;
    display: grid; place-items: center;
    width: 48px; height: 48px; margin: 0 auto 30px;
    color: #fff;
    border: 1px solid rgba(248,238,231,.5);
    border-radius: 50%;
    background: rgba(248,238,231,.16);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 22px rgba(24,14,20,.34);
    animation: wl-cue-nudge 1.7s var(--smooth) infinite;
    transition: opacity .45s var(--smooth);
  }
  .wl-scroll-cue .material-symbols-rounded { font-size: 27px; }
  /* A ring that expands and fades out of the button, so the cue reads as
     active even in a still frame or a screenshot. */
  .wl-scroll-cue::after {
    content: ''; position: absolute; inset: -1px;
    border: 1px solid rgba(248,238,231,.55); border-radius: 50%;
    animation: wl-cue-ring 1.7s var(--smooth) infinite;
  }
  .wl-scroll-cue.is-gone::after { animation: none; opacity: 0; }
  /* Stops the nudge as it leaves, so the fade is not fighting the keyframes. */
  .wl-scroll-cue.is-gone { opacity: 0; animation: none; pointer-events: none; }
  /* The cue takes slot 3, so the lede moves to slot 4. */
  .wl-hero-lede { order: 4; }

  /* The floating cards were dropped on phones because at their desktop
     size they ran off both edges. Shrunk and pulled in tight they fit
     over the handset, which is where they read best anyway. */
  .wl-float {
    gap: 8px;
    max-width: 166px;
    padding: 8px 11px 8px 8px;
    border-radius: 13px;
    white-space: normal;
  }
  .wl-float-icon { width: 27px; height: 27px; border-radius: 9px; }
  .wl-float-icon .material-symbols-rounded { font-size: 16px; }
  .wl-float strong { font-size: 10.5px; }
  .wl-float span.wl-float-sub { margin-top: 0; font-size: 9px; line-height: 1.3; }

  .wl-float-a { left: -12px; top: 7%; }
  .wl-float-b { right: -12px; top: 41%; }
  .wl-float-c { left: -6px; bottom: 5%; }
  .wl-hero-lede { font-size: 15.5px; }

  /* How it works: three device frames at 250px each were most of a
     screen apiece. Shrink them and close the gap they sit in. */
  .wl-step-art { padding-top: 24px; }
  /* 168px left the screenshots hard to read on a phone. The card is 288px
     wide with 20px of padding each side, so 210px still leaves breathing room
     while showing about 25% more of the app. */
  .wl-step-art .wl-phone { max-width: 210px; margin-bottom: -46px; }
  /* Matches the desktop frame. At 375/500 this window cropped the bottom 20%
     of the step screenshots, which cut the fourth score and the fourth skill
     off on phones only. The shots are authored at 375/620, so both frames now
     show the whole image. */
  .wl-step-art .wl-phone-screen { aspect-ratio: 375 / 620; }
  .wl-step-body { padding-top: 62px; }
  .wl-step h3 { font-size: 22px; }
  .wl-step p { font-size: 13.5px; }

  /* Minigames slide styling; the carousel mechanics are shared, below. */
  .wl-games { margin-top: 34px; }
  .wl-game:hover { transform: none; box-shadow: var(--wl-sh-1); }
  .wl-game-body { padding: 18px 18px 20px; }
  .wl-game h3 { font-size: 22px; }
  .wl-game p {
    font-size: 13px;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* Built for: these two cards retain their desktop content here. */
  .wl-role { padding: 24px 22px 22px; }
  .wl-role h3 { font-size: 22px; }
  .wl-role > p { font-size: 13.5px; }
  .wl-role li { font-size: 12.5px; }

  .wl-card p { -webkit-line-clamp: 2; }
  .wl-aside { margin-top: 34px; padding: 16px 18px; }
}

/* ══════════════════════════════════════════════════════════════
   16 · Mobile sliders
   ──────────────────────────────────────────────────────────────
   How-it-works and minigames become horizontal rows on a phone.
   The two role cards below remain a vertical stack.

   Nothing is hidden. Every card is still in the DOM and in source
   order, so a screen reader and a search engine walk all of them;
   the carousel is scroll position, not display. Dots are built by
   js/welcome.js only once the slider is actually horizontal, so
   with no script you get a plain scrollable row rather than a
   broken widget.
   ══════════════════════════════════════════════════════════════ */

.wl-dots { display: none; }

@media (max-width: 620px) {
  [data-slider] {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: 14px;
    /* Bleed to the screen edges so the next slide peeks in, which is
       what tells you the row moves before you touch it. */
    margin-inline: calc(var(--wl-gutter) * -1);
    padding: 4px var(--wl-gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Deliberately not touch-action:pan-x. That forbids vertical panning for
       any touch starting in the row rather than handing it to the page, so a
       downward drag on a slide did nothing at all. The row is left free to
       pan both ways; what makes vertical drags reach the page is having no
       vertical overflow to latch onto - see the reveal rule below. */
  }
  /* A slow drag starting on a screenshot would otherwise begin a native image
     drag and fight the row. */
  [data-slider] img { -webkit-user-drag: none; user-drag: none; }

  /* The reveal start-state shifts a card down 18px, and a transform counts
     toward scrollable overflow. Against 8px of bottom padding that left the
     row 10px vertically scrollable, so a downward drag scrolled those 10px
     and then stopped, with the page never moving. It could not clear on its
     own either: slides 2 and 3 sit off-screen horizontally, so the observer
     never fires for them and their offset is permanent.
     Inside a slider the reveal is a fade only. The row already moves. */
  html.wl-reveal [data-slider] > [data-reveal] { transform: none; }
  [data-slider]::-webkit-scrollbar { display: none; }
  [data-slider] > * { scroll-snap-align: center; }
  [data-slider].is-single { grid-auto-columns: 100%; }

  /* Touch already drags the track natively, and does it better than any
     script would. This is for a mouse or a pen, where the row otherwise
     looks draggable and is not. */
  [data-slider] { cursor: grab; }
  [data-slider].is-grabbing {
    cursor: grabbing;
    user-select: none; -webkit-user-select: none;
  }
  /* Stop a drag that ends over a card from following its link. */
  [data-slider].is-grabbing a,
  [data-slider].is-grabbing button { pointer-events: none; }
  /* Snapping fights an in-progress drag, so it is off until the release
     animation has finished. */
  [data-slider].is-free { scroll-snap-type: none; }

  /* Slides in a row have to be the same height or the dots jump. */
  .wl-steps > .wl-step { height: 100%; }

  .wl-dots {
    display: flex; justify-content: center; align-items: center; gap: 7px;
    margin-top: 18px;
  }
  .wl-dots button {
    width: 7px; height: 7px; padding: 0;
    border: 0; border-radius: 999px;
    background: var(--dusk-line);
    transition: width .25s var(--smooth), background .25s var(--smooth);
  }
  .wl-dots button[aria-current="true"] { width: 22px; background: var(--dusk-rust); }
}

/* The role choice is deliberately not a carousel: both paths stay visible,
   while each card has a compact summary and an optional disclosure. */
@media (max-width: 620px) {
  .wl-roles { grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
  .wl-role {
    position: relative; padding: 23px 23px 18px;
    overflow: hidden; cursor: default;
    border-color: var(--dusk-line); border-radius: 18px;
    box-shadow: 0 16px 34px -27px rgba(28, 18, 32, .55);
  }
  .wl-role::before {
    content: ''; position: absolute; inset: 0 auto 0 0; width: 4px;
    background: rgb(var(--wl-r));
  }
  .wl-r-clin { background: var(--dusk-card); }
  .wl-r-org { background: var(--dusk-card); }
  .wl-role-scope {
    display: block; order: 1;
    padding-right: 48px;
    color: rgb(var(--wl-r)); font-size: 10px; font-weight: 800;
    line-height: 1.4; letter-spacing: .15em; text-transform: uppercase;
  }
  .wl-role-icon {
    position: absolute; top: 18px; right: 20px;
    width: 34px; height: 34px; border-radius: 10px;
    background: rgba(var(--wl-r), .10);
  }
  .wl-role-icon .material-symbols-rounded { font-size: 19px; }
  .wl-role h3 { order: 2; margin: 22px 0 9px; font-size: 26px; line-height: 1.12; }
  .wl-role > p { order: 3; margin-bottom: 0; font-size: 13.5px; line-height: 1.6; }
  .wl-role-link {
    order: 4; justify-content: space-between;
    margin-top: 22px; padding: 13px 16px;
    border-color: transparent; border-radius: 10px;
    background: var(--dusk-pill); color: var(--dusk-pill-text);
    font-size: 13px;
  }
  .wl-role-link .material-symbols-rounded { color: var(--dusk-pill-icon); }
  .wl-role-link:hover { background: var(--dusk-pill); border-color: rgba(var(--wl-r), .6); }
  .wl-role-expand {
    order: 5;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; width: 100%; margin-top: 15px; padding: 12px 0 0;
    color: var(--dusk-copy); background: none; border: 0;
    border-top: 1px solid var(--dusk-line);
    text-align: left; font: 700 12px 'Albert Sans', sans-serif;
    cursor: pointer;
  }
  .wl-role-expand .material-symbols-rounded { color: rgb(var(--wl-r)); transition: transform .2s; }
  .wl-role-expand[aria-expanded="true"] .material-symbols-rounded { transform: rotate(180deg); }
  .wl-role-details { display: none; }
  .wl-role.is-expanded .wl-role-details { display: block; order: 6; }
  .wl-role-details ul { margin-top: 7px; }
  .wl-role-details .wl-devices { padding-top: 18px; }
  .wl-role:focus-within { outline: 2px solid rgb(var(--wl-r)); outline-offset: 3px; }
}

/* ══════════════════════════════════════════════════════════════
   17 · Planner frame on a phone
   ──────────────────────────────────────────────────────────────
   The mock stood 907px tall against roughly 742px of usable
   screen, so the bottom of the app, including the Day/Week/Month
   dock that makes it interactive, sat below the fold and most
   people would never have found it.

   Trimmed rather than scaled: a transform would soften the text
   and the screenshot-like crispness is the point. Padding, the
   energy curve and the block rows each give up a few pixels, and
   the two action tiles sit side by side instead of stacked.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  .wl-planner-sky { padding: 20px 18px 26px; }
  .wl-planner-sky h3 { margin: 7px 0 13px; font-size: 21px; }
  .wl-planner-sun { width: 34px; height: 34px; }
  .wl-energy { height: 46px; }
  .wl-energy-axis { margin-top: 5px; }
  .wl-planner-note { margin-top: 10px; font-size: 11.5px; }
  .wl-capacity-row { margin: 13px 0 6px; }
  .wl-capacity span { padding: 6px 0; font-size: 10.5px; }

  .wl-planner-body { padding: 18px 18px 16px; }
  .wl-week { padding-bottom: 12px; }
  .wl-week i { margin-bottom: 6px; }
  .wl-week b { width: 26px; height: 26px; font-size: 12px; }
  .wl-week u { margin-top: 5px; }
  .wl-day-head { margin: 15px 0 10px; }
  .wl-day-head h4 { font-size: 19px; }

  .wl-blocks { gap: 7px; }
  .wl-block { padding: 10px 13px; }
  .wl-block-main b { font-size: 12.5px; }

  .wl-planner-actions { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
  .wl-planner-actions > div { gap: 9px; padding: 10px 11px; }
  .wl-planner-actions .material-symbols-rounded { font-size: 17px; }

  .wl-dock { margin-top: 14px; padding: 4px; }
  .wl-dock button { padding: 9px 0; font-size: 11.5px; }

  /* The week bars and month grid follow the frame down. Month is the
     tallest of the three panels once Day is trimmed, so it sets the
     frame from here on and gets the closest shave: six rows of cells
     plus its legend and the selected-day card. */
  .wl-sky-bars { height: 84px; margin: 13px 2px 4px; }
  .wl-sky-bar { height: 84px; }

  .wl-pcard { padding: 13px 13px 12px; }
  .wl-pcard + .wl-pcard { margin-top: 8px; }
  .wl-pcard-head h4 { font-size: 17px; }
  .wl-pcard-note { margin-top: 9px; font-size: 11px; }

  .wl-month-weekdays { margin: 12px 0 4px; }
  .wl-month-weekdays, .wl-month-grid { gap: 4px; }
  .wl-month-day { min-height: 26px; gap: 2px; padding: 3px 2px; }
  .wl-month-day > b { font-size: 10px; }
  .wl-month-count { font-size: 7px; padding: 0 3px; }
  .wl-heat-legend { margin-top: 9px; }

  /* The selected-day card repeats what the Day view already shows, so
     on a phone it keeps its heading and loses the sentence. */
  .wl-selected-day .wl-pcard-note { display: none; }

  .wl-momentum { gap: 8px; margin-top: 11px; }
  .wl-load-key { gap: 5px 12px; margin-top: 10px; }
}

/* ══════════════════════════════════════════════════════════════
   18 · Activity library on a phone
   ──────────────────────────────────────────────────────────────
   The section is a fixed sample of six now, so it is the slider
   and the run-up to it that keep it inside one screen.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 620px) {
  /* Cards in a row have to match height or the dots shift as you swipe. */
  .wl-cards > .wl-card { height: 100%; }
  .wl-cards { margin: 22px 0 2px; }
  .wl-lib-foot { margin-top: 24px; }

  /* Trim the run-up so the whole section lands in roughly one screen. */
  .wl-lib-head { gap: 18px; }
  .wl-lib-head .wl-head p { font-size: 14.5px; }
  .wl-count b { font-size: 34px; }
  .wl-count-note { margin-top: 10px; padding-top: 10px; font-size: 11.5px; }
}

/* ══════════════════════════════════════════════════════════════
   16 · Screenshot lightbox
   ──────────────────────────────────────────────────────────────
   The step screenshots are small enough on a phone that the detail
   inside them is guesswork. Tapping one opens it near full height.
   The trigger affordances are added by script, so a visitor without
   JS is never offered a control that cannot do anything.
   ══════════════════════════════════════════════════════════════ */

.wl-step-art.is-zoomable { position: relative; cursor: zoom-in; }
.wl-step-art.is-zoomable:focus-visible { outline: 2px solid var(--dusk-rust); outline-offset: 6px; border-radius: 18px; }
.wl-zoom-badge {
  position: absolute; z-index: 3; right: 14px; top: 14px;
  display: grid; place-items: center; width: 30px; height: 30px;
  color: #fff; border-radius: 50%; background: rgba(41,30,38,.52);
  backdrop-filter: blur(6px); pointer-events: none;
}
.wl-zoom-badge .material-symbols-rounded { font-size: 17px; }

.wl-lightbox { position: fixed; z-index: 300; inset: 0; display: grid; place-items: center; padding: 18px; }
/* display:grid above outranks the browser's own [hidden] rule, so the closed
   state has to be written out or the overlay is open on arrival. */
.wl-lightbox[hidden] { display: none; }
.wl-lightbox-backdrop {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: rgba(28,20,26,.82);
  backdrop-filter: blur(10px); cursor: zoom-out;
}
.wl-lightbox-figure {
  position: relative; display: grid; justify-items: center; gap: 12px;
  max-width: min(420px, 100%); margin: 0;
}
.wl-lightbox-figure img {
  max-width: 100%; max-height: 78vh; border-radius: 22px;
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 28px 70px rgba(16,10,16,.5);
}
.wl-lightbox-figure figcaption {
  color: rgba(240,228,218,.9); font-size: 13px; font-weight: 600; text-align: center;
}
.wl-lightbox-close {
  position: absolute; z-index: 2; right: -6px; top: -44px;
  display: grid; place-items: center; width: 38px; height: 38px;
  color: #fff; border: 1px solid rgba(255,255,255,.24); border-radius: 50%;
  background: rgba(255,255,255,.12); cursor: pointer;
}
body.wl-lightbox-open { overflow: hidden; }

@media (max-width: 620px) {
  .wl-lightbox-figure img { max-height: 72vh; }
  .wl-lightbox-close { right: 0; top: -42px; }
}