/* Home page only. Shared pieces live in styles.css. */

/* --- hero --- */
.hero__art .window { aspect-ratio: 4 / 3; }

/* --- fit simulator: clock strip with absolutely placed blocks --- */
.fit__strip { display: block; height: 70px; }
.fit__blk { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 10px; border-right: 2px solid var(--inset); border-radius: 0; will-change: left, width; }
.fit__blk span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fit__blk.p1 { background: var(--p1); color: #fff; }
.fit__blk.p2 { background: var(--p2); color: #2a1c00; }
.fit__blk.p3 { background: var(--p3); color: #06222e; }
.fit__blk.p4 { background: var(--p4); color: #1b1d20; }
.fit__after { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--danger-soft) 0 6px, transparent 6px 12px); pointer-events: none; }
.fit__day-end { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--danger); z-index: 3; }
.fit__day-end span { position: absolute; bottom: -20px; left: 4px; font-family: var(--mono); font-size: 0.62rem; color: var(--danger); white-space: nowrap; }
.fit__meter { position: relative; height: 12px; border-radius: 999px; background: var(--inset); margin-top: 26px; overflow: visible; }
.fit__meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.fit__meter b { position: absolute; top: 0; bottom: 0; border-radius: 0 999px 999px 0; background: var(--danger); }
.fit__meter u { position: absolute; top: -6px; bottom: -6px; width: 0; border-left: 2px dashed var(--ink); }
.fit__meter span { position: absolute; top: 18px; font-family: var(--mono); font-size: 0.62rem; color: var(--faint); transform: translateX(-50%); white-space: nowrap; letter-spacing: 0.04em; }
.fit__clock { padding-top: 22px; padding-bottom: 6px; }

/* --- bento pieces --- */
.strip__d { transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.strip__d.is-now { box-shadow: inset 0 0 0 1.5px var(--ink); }
.hiddenrow { opacity: 0.4; filter: grayscale(1); }
.hiddenrow.is-shown { opacity: 1; filter: none; }
.js .energy .curve { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .energy .area { opacity: 0; }
.js .energy .energy__dot { opacity: 0; }
.no-gsap .energy .curve { stroke-dashoffset: 0 !important; }
.no-gsap .energy .area, .no-gsap .energy .energy__dot { opacity: 1 !important; }
.capbar .cap { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed var(--ink); z-index: 2; }
.capbar i { position: relative; }
.chain .tk { transition: opacity 0.4s; }
.chain #chain-ring { cursor: pointer; }
.tk .tick-flash { animation: none; }
.dnd .tk { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.dnd .tk.is-lifted { opacity: 0.25; }
.dnd__ghost { box-shadow: var(--shadow-lg) !important; transform: rotate(-1.5deg); }
.filterrow { display: flex; align-items: center; gap: 12px; }
.filterrow.is-match { box-shadow: inset 0 0 0 1.5px var(--accent-line); }
.estmore { color: var(--accent-text); }

/* --- finale: ink disc --- */
.finale__disc { background: var(--ink); }
.finale__inner { color: var(--canvas); }
.finale__inner .h2 { color: var(--canvas); }
.finale__inner .lead { color: var(--canvas); opacity: 0.72; }
.finale .btn--primary { background: var(--canvas); color: var(--ink); }
.finale .btn--ghost { background: color-mix(in srgb, var(--canvas) 16%, transparent); color: var(--canvas); }
.finale__ring .ring-fill { fill: var(--accent); }
.finale__ring .tick { stroke: #fff; }
.finale__ring .ring-draw { stroke: var(--ink); }
.js .finale__inner { visibility: hidden; }
.no-gsap .finale__inner, .js.no-gsap .finale__inner { visibility: visible; }

/* --- chat demo --- */
.js .chat [data-step] { opacity: 0; transform: translateY(12px); }
.no-gsap .chat [data-step] { opacity: 1 !important; transform: none !important; }
.proposal .done-line { display: none; font-size: 0.88rem; color: var(--ok); font-weight: 600; }
.proposal.is-accepted .done-line, .proposal.is-declined .done-line { display: block; }
.proposal.is-accepted .proposal__btns, .proposal.is-declined .proposal__btns { display: none; }
.proposal.is-declined .done-line { color: var(--muted); }

/* --- tour image aspect per step --- */
.device { transition: none; }

.graph__foot i.s { background: #f2b544; }
.fit__ticks { position: relative; height: 14px; }
.fit__ticks span { position: absolute; }

.evid__copy .btn, .agent__copy .btn { justify-self: start; }
.agent__copy .h2 { font-size: clamp(2rem, 3.9vw, 3.5rem); }
.evid__copy .h2 { font-size: clamp(2.2rem, 4.4vw, 4rem); }

@media (max-width: 1080px) {
  .fit__panel { order: -1; position: sticky; top: 72px; z-index: 5; padding: 14px; gap: 10px; }
  .fit__stats, .fit__reset, .fit__top span { display: none; }
  .fit__verdict { min-height: 0; padding: 12px 14px; }
  .fit__verdict b { font-size: 1rem; }
  .fit__strip { height: 48px; }
}

/* platforms on phones: the picture sits above the words */
@media (max-width: 900px) {
  .hpanel { grid-template-rows: minmax(0, 40%) minmax(0, 1fr); gap: 14px; padding: 16px; }
  .hpanel__art { display: grid; min-height: 0; overflow: hidden; border-radius: 16px; }
  .hpanel__art img { width: 100%; height: 100%; max-height: none; object-fit: cover; object-position: top; border-radius: 0; box-shadow: none; }
  .hpanel__copy { justify-content: flex-start; overflow: hidden; }
  .hpanel ul { display: none; }
}

/* hero images */
.hero__art .window { aspect-ratio: 2000 / 1125; }
.hero__phone { position: absolute; z-index: 3; left: -3.5%; bottom: -18%; width: 19%; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.28)); }
.hero__phone img { width: 100%; border-radius: 13% / 6%; }
@media (max-width: 900px) { .hero__phone { display: block; width: 26%; left: -2%; bottom: -10%; } }

/* platform panels */
.hpanel__art { min-height: 0; }
.hpanel__art img { max-height: 100%; max-width: 100%; }
.wstack { display: grid; gap: 14px; width: 100%; }
.wstack img { width: 100%; border-radius: 26px; box-shadow: var(--shadow-md), 0 0 0 1px var(--line-soft); }
.watch { width: min(230px, 70%); aspect-ratio: 4 / 5; border-radius: 52px; background: #0b0b0c; box-shadow: 0 0 0 7px #2a2b2d, 0 0 0 8px rgba(255,255,255,0.18), var(--shadow-lg); padding: 24px 18px 18px; display: grid; gap: 8px; align-content: start; color: #f2f2f2; }
.watch b { font-size: 1.05rem; letter-spacing: -0.02em; color: var(--stage-accent); }
.watch .tk { background: #1c1c1e; color: #f2f2f2; padding: 8px 10px; font-size: 0.72rem; border-radius: 12px; gap: 8px; }
.watch .ring { width: 14px; height: 14px; }
.watch__add { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; justify-self: center; padding: 7px 12px; border-radius: 999px; background: #2a2b2d; font-size: 0.7rem; font-weight: 600; }
.watch__add svg { width: 12px; height: 12px; }
.hpanel__art:has(.watch) { place-items: center; }

.f1 { left: 22%; top: -7%; right: auto; } .f2 { right: 3%; top: -4%; left: auto; } .f3 { right: 30%; top: 62%; left: auto; } .f4 { right: 1.5%; top: 80%; left: auto; } .f5 { left: 26%; top: 92%; right: auto; }