/* Lexhy — Felix-inspired product editorial direction */
:root,
:root[data-theme="dark"] {
  color-scheme: light;
  --paper:#F8F8F6;
  --card:#FFFFFF;
  --night:#F8F8F6;
  --night-2:#E8EBE7;
  --ink:#102D26;
  --stone:#65736E;
  --line:#DDE3DF;
  --burgundy:#173D33;
  --teal:#1E6A58;
  --ochre:#88734A;
  --brand:#173D33;
  --pp-cover:#173D33;
  --pp-page:#FFFFFF;
  --pp-ink:#102D26;
  --pp-muted:#6F7B77;
  --pp-line:#DDE3DF;
  --pp-tint:#F1F4F2;
  --pp-stamp:#173D33;
  --pp-stamp2:#1E6A58;
  --pp-pend:#88734A;
  --night-ink:#102D26;
  --night-stone:#65736E;
  --night-line:#DDE3DF;
  --night-brand:#173D33;
  --night-burgundy:#173D33;
  --night-teal:#1E6A58;
  --night-ochre:#88734A;
  --display:"Lora",Georgia,"Times New Roman",serif;
  --body:"Nunito Sans",Arial,sans-serif;
  --mono:"Nunito Sans",Arial,sans-serif;
  --gut:clamp(22px,4.5vw,64px);
}

body {
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.65;
}

h1,h2,h3 {
  font-weight:400;
  letter-spacing:0;
  line-height:1.08;
}

h1 { font-size:clamp(54px,6.2vw,82px); }
h2 { font-size:clamp(38px,4.2vw,56px); }
h3 { letter-spacing:0; }

.eyebrow {
  margin-bottom:18px;
  color:var(--burgundy);
  font-size:10px;
  font-weight:600;
  letter-spacing:.16em;
}

.lede { line-height:1.75; }
.band {
  padding-block:clamp(96px,11vw,160px);
  border-top:1px solid var(--line);
}
.wrap { max-width:1100px; }

header {
  top:env(safe-area-inset-top,0px);
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  color:var(--ink);
  border-color:var(--line);
  backdrop-filter:blur(14px);
}
.hbar {
  min-height:64px;
  padding-block:10px;
}
.mark { gap:12px; }
.mark svg { width:27px;height:27px;color:var(--ink); }
.mark svg g[stroke] { stroke:var(--paper); }
.wordmark {
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;
  font-weight:700;
  letter-spacing:.1em;
}
nav { gap:4px; }
nav a {
  color:var(--stone);
  padding:8px 11px;
  border-radius:4px;
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
}
nav a:hover { color:var(--ink); }
nav a.cta {
  border-color:var(--ink);
  background:var(--ink);
  color:var(--card);
  padding:9px 16px;
  letter-spacing:0;
  text-transform:none;
}
nav a.cta:hover { background:transparent;color:var(--ink); }

.hero {
  min-height:calc(100svh - 64px);
  display:flex;
  align-items:flex-start;
  background:var(--paper);
  color:var(--ink);
  padding-block:clamp(76px,10vw,136px) 0;
}
.hero .wrap { width:100%;text-align:center; }
.hero h1 {
  max-width:16ch;
  margin-inline:auto;
  color:var(--ink);
}
.hero .sub {
  max-width:62ch;
  margin:28px auto 0;
  color:var(--stone);
  font-size:clamp(16px,1.45vw,19px);
  font-weight:400;
  line-height:1.65;
}
.hero .sub b { color:var(--ink);font-weight:500; }
.btns { margin-top:30px;gap:12px;align-items:center;justify-content:center; }
.btn {
  min-height:44px;
  display:inline-flex;
  align-items:center;
  border-radius:5px;
  padding:11px 20px;
  background:var(--ink);
  border-color:var(--ink);
  color:var(--card);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  transition:background-color .25s,color .25s,border-color .25s;
}
.btn:hover { background:transparent;color:var(--ink); }
.btn.ghost {
  min-height:44px;
  padding:11px 20px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--ink);
}
.btn.ghost:hover { color:var(--burgundy);border-color:var(--burgundy); }

.clocks {
  margin-top:clamp(64px,8vw,100px);
  border-color:var(--line);
}
.cl { padding:16px 12px 22px;border-color:var(--line);text-align:left; }
.cl:first-child { padding-left:0; }
.cl .city,.cl .s { color:var(--stone);letter-spacing:.16em; }
.cl .t { font-size:21px; }
.pip { background:var(--stone); }
.pip.on { background:var(--burgundy);animation:none; }

.cols { margin-top:54px;gap:52px; }
.cols .h { font-size:21px;letter-spacing:0; }
.cols p { line-height:1.75; }

#app.band { background:#EEF2EF!important; }
#app > .wrap > .eyebrow,
#app > .wrap > h2,
#app > .wrap > .lede { text-align:center;margin-inline:auto; }
#app > .wrap > h2 { max-width:17ch; }
#app > .wrap > .lede { max-width:68ch; }
.demo { margin-top:68px;gap:64px;align-items:start; }
.feat { padding-block:24px 28px; }
.feat .n { letter-spacing:.19em; }
.feat .play { border-radius:4px;background:var(--burgundy); }
.feat h3 { margin-top:14px; }
.feat p { line-height:1.75; }
.phone { max-width:460px; }
.try {
  gap:10px;
  color:var(--teal);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
}
.livedot {
  width:11px;
  height:11px;
  background:var(--teal);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 16%,transparent);
  animation:demo-blink 1.15s ease-in-out infinite;
}
.shell {
  border-radius:12px;
  padding:10px;
  background:var(--ink);
  box-shadow:0 28px 70px color-mix(in srgb,var(--ink) 18%,transparent);
}
.shell iframe { border-radius:5px; }

.pp { border-radius:8px;box-shadow:0 24px 54px color-mix(in srgb,var(--ink) 14%,transparent); }
.spread { border-radius:1px; }
.stamp,.relied li::before,.gate,.gate .tag,.egate input { border-radius:4px; }

.band.dark {
  background:var(--ink);
  color:var(--card);
  border-color:color-mix(in srgb,var(--card) 18%,transparent);
}
.band.dark h2,.band.dark h3 { color:var(--card); }
.band.dark .lede,.band.dark .notes p,.band.dark ul.plain li,.band.dark .egate label,.band.dark .egate .fine { color:#B6C2BD; }
.band.dark .eyebrow { color:#8EBBAC; }
.band.dark .gate .rule,.band.dark ul.plain li b { color:var(--card); }
.band.dark .gate .det,.band.dark .gate .no { color:#B6C2BD; }

.gate { border-radius:6px; }
.mem article { padding-block:30px; }
.mem .fm { font-size:24px;letter-spacing:0; }
.tests > div { border-top:1px solid var(--burgundy); }
.egate input { border:1px solid color-mix(in srgb,var(--card) 24%,transparent);background:transparent;padding-inline:13px; }
.egate input:focus { outline:0;border-color:var(--card); }

footer { padding-block:64px;border-color:var(--line); }
footer .co { font-family:var(--body);font-size:16px;font-weight:700;letter-spacing:.1em; }

@media (min-width:920px) {
  .demo { grid-template-columns:minmax(0,1fr) minmax(420px,460px); }
  .phone { position:sticky;top:88px; }
  .shell iframe { height:min(760px,78vh); }
}

@media (max-width:640px) {
  .hbar { min-height:64px;gap:10px; }
  .mark svg { width:26px;height:26px; }
  .wordmark { font-size:16px; }
  nav { flex-wrap:nowrap; }
  nav a:not(.cta) { display:none; }
  nav a.cta { font-size:10px;padding:8px 11px;white-space:nowrap; }
  .hero {
    min-height:calc(100svh - 64px);
    align-items:flex-start;
    padding-top:clamp(72px,18vw,104px);
  }
  .hero h1 { font-size:clamp(45px,12.8vw,60px);line-height:1.04; }
  .hero .sub { margin-top:26px;font-size:16px;line-height:1.62; }
  .btns { margin-top:28px;gap:10px; }
  .clocks {
    margin-top:54px;
    grid-template-columns:repeat(3,minmax(118px,1fr));
    overflow-x:auto;
  }
  .cl { padding-left:12px;min-width:118px; }
  .band { padding-block:80px; }
  .cols { grid-template-columns:1fr;gap:34px; }
  footer .note { margin-left:0;text-align:left; }
}

@media (prefers-reduced-motion:no-preference) {
  .hero .eyebrow,.hero h1,.hero .sub,.hero .btns {
    animation:editorial-rise .5s both cubic-bezier(.22,.7,.3,1);
  }
  .hero h1 { animation-delay:.07s; }
  .hero .sub { animation-delay:.14s; }
  .hero .btns { animation-delay:.21s; }
}
@keyframes editorial-rise { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:none; } }
@keyframes demo-blink {
  0%,100% { opacity:1;transform:scale(1);box-shadow:0 0 0 4px color-mix(in srgb,var(--teal) 16%,transparent); }
  50% { opacity:.25;transform:scale(.72);box-shadow:0 0 0 8px transparent; }
}

@media (prefers-reduced-motion:reduce) {
  .livedot { animation:none; }
}