/* BiliMind · Daylight 2 — base: reset, type, the frame, primitives.
   Layout rule: the page is a framed column with hairline rails (.frame). Sections (.sec) stack inside it,
   each opened by a hairline with a small + at both rails. Content fills cells (.cells) edge to edge,
   so nothing floats in empty paper. Big moments break out as rounded sheets (.sheet). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color 0.4s var(--ease-soft), color 0.4s var(--ease-soft);
}
::selection { background: var(--hi); color: #1f1c17; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; border-radius: 6px; }

/* ── type ─────────────────────────────────────────────────────── */
.display {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: clamp(46px, 5.8vw, 94px); line-height: 0.98; letter-spacing: -0.038em;
  text-wrap: balance; margin: 0;
}
.h2 {
  font-family: var(--font-display); font-weight: 600; font-optical-sizing: auto;
  font-size: clamp(36px, 4.3vw, 62px); line-height: 1.02; letter-spacing: -0.034em;
  text-wrap: balance; margin: 0;
}
.h2 .mute, .display .mute { color: var(--ink-3); }
.h3 { font-family: var(--font-display); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.h4 { font-size: 17px; line-height: 1.3; font-weight: 680; letter-spacing: -0.015em; }
.lede { font-size: 17.5px; line-height: 1.6; color: var(--ink-2); max-width: 48ch; text-wrap: pretty; }
.body { font-size: 15px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.small { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.cite { font-size: 12px; color: var(--ink-3); }
.cite i { font-style: italic; }

/* the highlighter sweep: add .on to draw it */
.hl {
  background-image: linear-gradient(100deg, transparent 0.4%, var(--hl-mark) 1.6%, var(--hl-mark) 97%, transparent 99.2%);
  background-repeat: no-repeat; background-size: 0% 70%; background-position: 0 75%;
  padding: 0 0.08em; margin: 0 -0.04em; border-radius: 0.18em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1s var(--ease), color 0.6s var(--ease-soft);
}
.hl.on, .hl.static { background-size: 100% 70%; }
.hl.on, .hl.static { color: #1f1c17; }

/* a word set in a little pill, Shelf-style: <span class="pillword" style="--c:var(--leaf-soft)">finally</span> */
.pillword { display: inline-block; padding: 0 0.16em 0.04em; margin: 0 0.02em; border-radius: 0.22em; background: var(--c, var(--hi)); line-height: 1.02; }

/* ── the frame ────────────────────────────────────────────────── */
.frame { position: relative; max-width: var(--frame); margin-inline: auto; border-inline: 1px solid var(--line); }
.sec { position: relative; border-top: 1px solid var(--line); padding: 104px 56px; }
.sec.tight { padding-block: 72px; }
.sec.flush { padding: 0; }
.sec::before, .sec::after {
  content: ''; position: absolute; top: -6px; width: 11px; height: 11px; z-index: 2; pointer-events: none;
  background: linear-gradient(var(--ink-4), var(--ink-4)) center / 1px 100% no-repeat, linear-gradient(var(--ink-4), var(--ink-4)) center / 100% 1px no-repeat;
}
.sec::before { left: -6px; }
.sec::after { right: -6px; }
.sec.no-cross::before, .sec.no-cross::after { display: none; }
/* fine dotted paper inside a section, LearnHouse-style */
.dotted { background-image: radial-gradient(var(--line-2) 1px, transparent 1.2px); background-size: 18px 18px; background-position: -1px -1px; }

/* section head: heading left, lede + link right; fills the width instead of a centred island */
.sec-head { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; margin-bottom: 56px; }
.sec-head .h2 { margin-top: 18px; }
.sec-head .side { display: grid; gap: 18px; justify-items: start; padding-bottom: 6px; }
.sec-head.center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec-head.center .side { justify-items: center; }
.sec-head.center .lede { margin-inline: auto; }

/* cells: hairline grid, content edge to edge */
.cells { display: grid; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.cells > * { background: var(--paper); min-width: 0; }
.cell { position: relative; padding: 32px; overflow: hidden; }
.bleed { margin-inline: -56px; } /* cells that run rail to rail */

/* rounded full-width sheets for the big moments */
.sheet { position: relative; margin: 10px; border-radius: var(--r-2xl); overflow: clip; isolation: isolate; }

/* ── primitives ───────────────────────────────────────────────── */
.tag {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 9px; border-radius: 9px;
  background: var(--card); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1);
  font-size: 13px; font-weight: 650; color: var(--ink-2); white-space: nowrap;
}
.tag svg { width: 14px; height: 14px; stroke-width: 2.1; color: var(--c, var(--ink-3)); }
.tag .sq { width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: var(--c, var(--hi)); color: #1f1c17; }
.tag .sq svg { width: 11px; height: 11px; color: inherit; stroke-width: 2.4; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 999px; font-weight: 650; font-size: 15px; letter-spacing: -0.005em; white-space: nowrap;
  transition: transform 0.25s var(--ease), background-color 0.25s, box-shadow 0.25s, color 0.25s;
}
.btn:active { transform: scale(0.97); }
.btn-ink { background: var(--ink); color: var(--on-ink); box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, var(--shadow-1); }
.btn-ink:hover { background: color-mix(in oklab, var(--ink) 86%, var(--paper)); }
.btn-soft { background: var(--card); color: var(--ink); box-shadow: 0 0 0 1px var(--line-2), var(--shadow-1); }
.btn-soft:hover { background: var(--card-2); }
.btn-ghost { color: var(--ink-2); }
.btn-ghost:hover { background: var(--wash-2); color: var(--ink); }
.btn-hi { background: var(--hi); color: #1f1c17; }
.btn-hi:hover { background: var(--hi-2); }
.btn-sm { height: 34px; padding: 0 14px; font-size: 14px; gap: 6px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16.5px; }
.btn svg { width: 16px; height: 16px; stroke-width: 2.1; }
.btn-sm svg { width: 14px; height: 14px; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 15px; color: var(--ink); }
.link svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.link:hover svg { transform: translateX(3px); }

.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ink-2); transition: background-color 0.2s, color 0.2s, transform 0.2s var(--ease); }
.icon-btn:hover { background: var(--wash-2); color: var(--ink); }
.icon-btn svg { width: 17px; height: 17px; stroke-width: 1.9; }

.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--wash-2); white-space: nowrap; }
.chip svg { width: 13px; height: 13px; stroke-width: 2.1; }
.chip.leaf { background: var(--leaf-soft); color: var(--leaf-ink); }
.chip.sky { background: var(--sky-soft); color: var(--sky-ink); }
.chip.hi { background: var(--hi-soft); color: var(--hi-ink); }
.chip.rose { background: var(--rose-soft); color: var(--rose-ink); }
.chip.lilac { background: var(--lilac-soft); color: var(--lilac-ink); }
.chip.apricot { background: var(--apricot-soft); color: var(--apricot-ink); }
.kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 650; color: var(--ink-2); background: var(--card); box-shadow: 0 0 0 1px var(--line-2), 0 1.5px 0 var(--line-2); }
.dot { width: 8px; height: 8px; border-radius: 99px; flex: none; background: var(--c, var(--leaf)); }

/* an icon in a soft rounded square; --c / --t pick the colour pair */
.ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--c, var(--hi-soft)); color: var(--t, var(--hi-ink)); }
.ico svg { width: 19px; height: 19px; stroke-width: 2; }
.ico.sm { width: 30px; height: 30px; border-radius: 9px; }
.ico.sm svg { width: 15px; height: 15px; }

/* people: <span class="av" data-person="madina" style="--a:var(--rose-soft);--t:var(--rose-ink)">MK</span>
   base.js swaps in the painted avatar when it loads; initials stay as the fallback. */
.av {
  --s: 32px; width: var(--s); height: var(--s); flex: none; border-radius: 999px; display: inline-grid; place-items: center;
  font-size: calc(var(--s) * 0.36); font-weight: 700; letter-spacing: -0.01em; color: var(--t, var(--ink-2)); background: var(--a, var(--wash-2)) center / cover;
  box-shadow: 0 0 0 2px var(--card);
}
.av.has-photo { color: transparent; }
.av.xs { --s: 20px; } .av.sm { --s: 26px; } .av.md { --s: 40px; } .av.lg { --s: 52px; }
.faces { display: inline-flex; align-items: center; }
.faces .av + .av { margin-left: calc(var(--s) * -0.3); }
.faces .more { margin-left: 6px; font-size: 12.5px; font-weight: 650; color: var(--ink-3); }

/* cards and app surfaces */
.card { background: var(--card); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.card.lift { box-shadow: 0 0 0 1px var(--line), var(--shadow-3); }
.win { background: var(--card); border-radius: 16px; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-3); overflow: hidden; }
.win-bar { height: 38px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--card-2); }
.win-bar .lights { display: flex; gap: 6px; }
.win-bar .lights i { width: 10px; height: 10px; border-radius: 99px; background: var(--paper-3); }
.win-bar .url { margin: 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px; border-radius: 7px; background: var(--wash); font-size: 12px; color: var(--ink-3); }
.win-bar .url svg { width: 11px; height: 11px; }

/* the assistant's glow (voice-glow reference): .glow + .is-focus | .is-listening | .is-thinking */
@property --glow-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: ''; position: absolute; z-index: -1; left: 5%; right: 5%; bottom: -4px; height: 72%; border-radius: inherit;
  background: conic-gradient(from var(--glow-a) at 50% 100%, var(--hi), var(--apricot), var(--rose), var(--lilac), var(--sky), var(--leaf), var(--hi));
  filter: blur(24px); opacity: 0; transform: translateY(12%) scaleY(0.7);
  transition: opacity 0.6s var(--ease-soft), transform 0.8s var(--ease);
  animation: glow-turn 6s linear infinite;
}
.glow.is-listening::before, .glow.is-thinking::before, .glow.is-focus::before, .glow.always::before { opacity: 0.55; transform: translateY(18%) scaleY(1); }
.glow.is-thinking::before { animation-duration: 2.4s; opacity: 0.75; }
.glow.is-listening::before { animation: glow-turn 3.5s linear infinite, glow-breathe 1.4s var(--ease-soft) infinite alternate; }
@keyframes glow-turn { to { --glow-a: 360deg; } }
@keyframes glow-breathe { from { filter: blur(18px); opacity: 0.45; } to { filter: blur(28px); opacity: 0.85; } }
.think-dots { display: inline-flex; gap: 4px; align-items: center; }
.think-dots i { width: 6px; height: 6px; border-radius: 99px; background: var(--ink-3); animation: tdot 1.2s var(--ease-soft) infinite; }
.think-dots i:nth-child(2) { animation-delay: 0.15s; }
.think-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.4; } 40% { transform: translateY(-4px); opacity: 1; } }

.theme-switch { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--wash-2); }
.theme-switch button { width: 30px; height: 26px; border-radius: 999px; display: grid; place-items: center; color: var(--ink-3); transition: background-color 0.25s, color 0.25s; }
.theme-switch button svg { width: 14px; height: 14px; stroke-width: 2; }
.theme-switch button[aria-pressed='true'] { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }

/* ── motion hooks (base.js) ───────────────────────────────────── */
.js [data-r] { opacity: 0; transform: translateY(22px); }
.js [data-split] .w { display: inline-block; opacity: 0; transform: translateY(0.42em); }
.js [data-split] .w.in { opacity: 1; transform: none; transition: opacity 0.8s var(--ease), transform 1s var(--ease); }

/* ── phones ───────────────────────────────────────────────────── */
/* the app's own window: every mock on the page uses this header, so they read as one product */
.appwin { position: relative; display: flex; flex-direction: column; background: var(--card); border-radius: 18px; box-shadow: 0 0 0 1px var(--line), 0 2px 6px rgb(70 50 20 / 0.06), 0 30px 60px -24px rgb(70 50 20 / 0.3); overflow: hidden; font-size: 13.5px; color: var(--ink); }
.ui-h { flex: none; display: flex; align-items: center; gap: 7px; height: 46px; padding: 0 14px; border-bottom: 1px solid var(--line); font-size: 13px; white-space: nowrap; }
.ui-cv { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--line); }
.ico-cv { display: grid; place-items: center; background: var(--wash-2); color: var(--ink-2); box-shadow: none; }
.ico-cv svg { width: 13px; height: 13px; }
.ui-crumb { color: var(--ink-3); font-weight: 560; }
.ui-sep { width: 13px; height: 13px; color: var(--ink-4); flex: none; }
.ui-h b { font-weight: 680; letter-spacing: -0.01em; }
.ui-r { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 560; color: var(--ink-3); }
.ui-r svg { width: 13px; height: 13px; }
.ui-r.good { color: var(--leaf-ink); font-weight: 650; }
.grow { flex: 1; }

@media (max-width: 900px) {
  .sec { padding: 80px 28px; }
  .bleed { margin-inline: -28px; }
  .sec-head { grid-template-columns: 1fr; gap: 20px; margin-bottom: 40px; }
}
@media (max-width: 640px) {
  .frame { border-inline: 0; }
  .sec { padding: 64px max(18px, env(safe-area-inset-left, 0px)) 64px max(18px, env(safe-area-inset-right, 0px)); }
  .sec::before, .sec::after { display: none; }
  .bleed { margin-inline: -18px; }
  .cell { padding: 24px 20px; }
  .sheet { margin: 6px; border-radius: 24px; }
  .lede { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}