/* Active Timers and Schedule – the start page. Builds on app.css (colours, buttons, cards, fields). */
body.home {
  background:
    radial-gradient(70rem 34rem at 85% -12rem, color-mix(in srgb, var(--accent) 26%, transparent), transparent 70%),
    radial-gradient(40rem 26rem at -10% 10rem, color-mix(in srgb, var(--ok) 9%, transparent), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.home-top, .home-main { width: min(70rem, 100% - 2rem); margin: 0 auto; }
.home-top { display: flex; align-items: center; gap: .3rem; padding: 1rem 0; }
/* Active LED's logo (white letters, for the dark page) with the service's name under it, a little smaller. */
.home-top .brand { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.home-top .logo { height: 1.6rem; width: auto; display: block; }
.home-top .brand .name { font-size: .88rem; font-weight: 600; letter-spacing: .03em; color: var(--muted); }
.home-main { flex: 1; padding: 1.5rem 0 3rem; display: grid; gap: 3.5rem; align-content: start; }

/* ---------- the pitch, the little stage screen and the two ways in */
.intro {
  display: grid; gap: 2rem 3rem; align-items: center;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-areas: "pitch demo" "ways ways" "terms terms";
}
.pitch { grid-area: pitch; }
.eyebrow {
  display: inline-block; margin: 0 0 1.1rem; padding: .25rem .8rem; border-radius: 99px; font-size: .85rem; font-weight: 600;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.home h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); line-height: 1.05; letter-spacing: -.025em; font-weight: 800; margin: 0 0 1rem; }
.home .lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin: 0; max-width: 34rem; }
.ai-card { display: flex; align-items: center; gap: .9rem; margin-top: 1.4rem; padding: .8rem 1rem; max-width: 34rem; border-radius: var(--radius); text-decoration: none;
  color: var(--muted); font-size: .95rem; line-height: 1.45; border: 1px solid color-mix(in srgb, #8b5cf6 50%, var(--line)); background: color-mix(in srgb, #8b5cf6 9%, var(--panel)); transition: border-color .2s, background .2s; }
.ai-card:hover, .ai-card:focus-visible { border-color: #8b5cf6; background: color-mix(in srgb, #8b5cf6 16%, var(--panel)); }
.ai-card strong { color: var(--text); }
.ai-card .more { color: var(--accent); font-weight: 600; white-space: nowrap; text-decoration: underline; }
.ai-card .more::after { content: " →"; }
@media (max-width: 30rem) { .ai-card { flex-direction: column; align-items: flex-start; gap: .6rem; } }

.demo { grid-area: demo; margin: 0; }
.demo figcaption { margin-top: .7rem; text-align: center; color: var(--muted); font-size: .88rem; }
.screen {
  --glow: var(--ok);
  container-type: inline-size; position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  display: grid; place-items: center; border-radius: 14px; background: #000; color: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 0 0 6px #0a0b0e, 0 0 0 7px var(--line), 0 1.5rem 5rem -1.5rem color-mix(in srgb, var(--glow) 55%, transparent);
  transition: box-shadow .6s;
}
.screen[data-phase=yellow] { --glow: var(--yellow); }
.screen[data-phase=red], .screen[data-phase=over] { --glow: var(--red); }
.d-top { position: absolute; inset: 5cqw 6cqw auto; display: flex; justify-content: space-between; gap: 4cqw; font-size: 4.2cqw; color: #c9ced8; white-space: nowrap; }
.d-top span:first-child { overflow: hidden; text-overflow: ellipsis; }
.d-clock { font-size: 31cqw; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; transition: color .3s; }
.screen[data-phase=yellow] .d-clock { color: var(--yellow); }
.screen[data-phase=red] .d-clock, .screen[data-phase=over] .d-clock { color: var(--red); }
.d-msg { position: absolute; inset: auto 6cqw 5cqw; padding: 1.6cqw 3cqw; border-radius: 2cqw; background: #fff; color: #000; font-size: 5cqw; font-weight: 700; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .screen[data-phase=over] .d-clock { animation: demo-blink 1s steps(1) infinite; }
}
@keyframes demo-blink { 50% { opacity: .35; } }

.ways { grid-area: ways; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; align-items: stretch; }
.way { margin: 0; padding: 1.6rem; align-content: start; background: color-mix(in srgb, var(--panel) 88%, transparent); }
.way h2 { font-size: 1.45rem; letter-spacing: -.01em; }
.way.guest { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); background: linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--panel)), var(--panel) 60%); }
.way.guest .big { margin-top: .6rem; }
.ticks { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .45rem; color: var(--muted); font-size: .93rem; }
.ticks li { padding-left: 1.6rem; position: relative; }
.ticks li::before { content: "✓"; position: absolute; left: .1rem; color: var(--ok); font-weight: 700; }
.tag { margin: 0; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.way.guest .tag { color: var(--accent); }
.intro .terms { grid-area: terms; margin: -.8rem 0 0; }

/* ---------- what it does */
.features h2 { font-size: 1.45rem; text-transform: none; letter-spacing: -.01em; color: var(--text); margin: 0 0 1.3rem; }
.features ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1.4rem 2rem; }
.features li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .9rem; align-items: start; }
.features svg {
  width: 2.5rem; height: 2.5rem; padding: .55rem; border-radius: 10px; background: var(--raised); border: 1px solid var(--line);
  fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.features svg .c-ok { fill: var(--ok); stroke: none; }
.features svg .c-yellow { fill: var(--yellow); stroke: none; }
.features svg .c-red { fill: var(--red); stroke: none; }
.features h3 { margin: 0 0 .15rem; font-size: 1rem; }
.features p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.45; }

/* ---------- what Active LED offers beyond the timer */
.about { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.6rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.about h2 { font-size: 1.45rem; text-transform: none; letter-spacing: -.01em; color: var(--text); margin: 0 0 .3rem; }
.about p { margin: 0; color: var(--muted); }

/* ---------- narrower screens: one column, the ways in before the demo */
@media (max-width: 54rem) {
  .intro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pitch" "ways" "terms" "demo"; gap: 1.6rem; }
  .intro .terms { margin: -.6rem 0 0; }
  .demo { width: min(30rem, 100%); justify-self: center; }
  .home-main { padding-top: .8rem; gap: 2.6rem; }
}
@media (max-width: 40rem) {
  .ways { grid-template-columns: minmax(0, 1fr); }
  .way { padding: 1.2rem; }
  .home-top .logo { height: 1.3rem; }
  .home-top .brand .name { font-size: .76rem; letter-spacing: .01em; }
  .home-top .wide-only { display: none; }   /* the API link is in the footer too */
}