/* Team Health Check — landing & coming-soon styles.
   Values are transferred verbatim from DESIGN/design_handoff_best_landing/reference/*.html.
   Every value present in tokens.css is referenced only as var(--thc-*); literals here are
   limited to geometry, chart data and values that have no corresponding custom property
   in tokens.css (documented in releases/handoff-conformance-v0.1.0.md). */

html{background:var(--thc-bg-page)}
body{margin:0;font-family:var(--thc-font-family);color:var(--thc-text-primary);background:var(--thc-bg-page);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:var(--thc-accent-cyan);text-decoration:none}
a:hover{color:var(--thc-accent-cyan-hover)}

/* ---- Buttons ---- */
.btn-secondary{font-size:var(--thc-cta-secondary-size);font-weight:var(--thc-font-weight-semibold);color:var(--thc-text-on-cyan);background:var(--thc-accent-cyan);border-radius:var(--thc-radius-12);padding:var(--thc-cta-secondary-padding);box-shadow:var(--thc-glow-cta-secondary)}
.btn-primary{font-size:var(--thc-cta-primary-size);font-weight:var(--thc-font-weight-semibold);color:var(--thc-text-primary);background:var(--thc-accent-cta);border-radius:var(--thc-radius-14);padding:var(--thc-cta-primary-padding);box-shadow:var(--thc-glow-cta-primary)}

/* Buttons keep their own text colour on hover (no colour change vs default) */
.btn-primary:hover,.btn-primary:active{color:var(--thc-text-primary)}
.btn-secondary:hover,.btn-secondary:active{color:var(--thc-text-on-cyan)}
.btn-primary:focus-visible,.btn-secondary:focus-visible{outline:var(--thc-space-2) solid var(--thc-accent-cyan);outline-offset:var(--thc-space-2)}

/* ---- Background neon waves ---- */
.wave-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:var(--thc-z-background)}
.wave-layer>div{position:absolute}
.wave-layer>div:nth-child(1){top:-22%;left:-25%;width:150%;height:70%;background:var(--thc-wave-1);animation:neonA var(--thc-dur-wave-1) var(--thc-ease-inout) infinite}
.wave-layer>div:nth-child(2){bottom:-26%;left:-20%;width:150%;height:78%;background:var(--thc-wave-2);animation:neonB var(--thc-dur-wave-2) var(--thc-ease-inout) infinite}
.wave-layer>div:nth-child(3){top:26%;left:-15%;width:140%;height:42%;background:var(--thc-wave-3);animation:neonA var(--thc-dur-wave-3) var(--thc-ease-inout) infinite reverse}

/* ---- Shell ----
   .cs-shell shares the landing .shell declarations (identical inline style in the reference)
   but must not receive the @media (max-width:700px) .shell override below: coming-soon.html
   has no such override in the reference — its own <style> block only overrides .cs-card and
   .cs-title at that breakpoint. */
.shell,.cs-shell{position:relative;z-index:var(--thc-z-content);min-height:100dvh;max-width:var(--thc-shell-max-width);margin:0 auto;padding:var(--thc-shell-padding);display:flex;flex-direction:column;gap:var(--thc-shell-gap)}

/* ---- Header / footer ---- */
header{flex-shrink:0;display:flex;align-items:center;gap:var(--thc-header-gap);background:var(--thc-surface-glass);border:var(--thc-border-width) solid var(--thc-surface-glass-border);border-radius:var(--thc-radius-20);padding:var(--thc-header-padding);backdrop-filter:var(--thc-backdrop-filter);-webkit-backdrop-filter:var(--thc-backdrop-filter)}
footer{flex-shrink:0;display:flex;align-items:center;gap:var(--thc-space-14);flex-wrap:wrap;background:var(--thc-surface-glass);border:var(--thc-border-width) solid var(--thc-surface-glass-border);border-radius:var(--thc-radius-20);padding:var(--thc-footer-padding);min-height:var(--thc-footer-min-height);backdrop-filter:var(--thc-backdrop-filter);-webkit-backdrop-filter:var(--thc-backdrop-filter)}
footer span{font-size:var(--thc-footnote-size);color:var(--thc-text-primary)}

header img{height:var(--thc-logo-height);width:auto;object-fit:contain;display:block;background:var(--thc-text-primary);border-radius:var(--thc-radius-8);padding:var(--thc-logo-padding)}
.brand{font-size:var(--thc-brand-size);font-weight:var(--thc-font-weight-semibold);letter-spacing:var(--thc-brand-letter-spacing);color:var(--thc-text-primary);white-space:nowrap}

/* Button pushed to the far end of a header that has no marquee to absorb the space */
.btn-home{margin-left:auto}

/* ---- Marquee ---- */
.nav-links{margin:0 auto;max-width:var(--thc-nav-max-width);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,black 12%,black 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,black 12%,black 88%,transparent 100%)}
.chip-marquee{display:flex;gap:var(--thc-chip-gap);width:max-content;animation:chipMarquee var(--thc-dur-marquee) var(--thc-ease-linear) infinite}
.chip{display:flex;align-items:center;gap:var(--thc-space-8);font-size:var(--thc-chip-size);font-weight:var(--thc-font-weight-medium);color:var(--thc-text-primary);background:var(--thc-surface-chip);border:var(--thc-border-width) solid var(--thc-surface-chip-border);border-radius:var(--thc-radius-pill);padding:var(--thc-chip-padding);white-space:nowrap}
.chip>span{width:var(--thc-chip-dot-size);height:var(--thc-chip-dot-size);flex-shrink:0;border-radius:var(--thc-radius-circle);background:var(--thc-accent-cyan);box-shadow:var(--thc-glow-chip-dot)}

/* ---- Hero ---- */
.hero{position:relative;flex:0 0 auto;width:100%;height:var(--thc-hero-height);display:flex;flex-direction:row-reverse;align-items:stretch;gap:var(--thc-hero-gap);border:var(--thc-border-width) solid var(--thc-surface-glass-border);border-radius:var(--thc-radius-30);padding:var(--thc-hero-padding);overflow:hidden;background:var(--thc-surface-glass);box-shadow:var(--thc-shadow-hero)}
.hero-photo{position:relative;flex:0 0 auto;height:100%;aspect-ratio:1584 / 672;width:auto;border-radius:var(--thc-radius-22);overflow:hidden;background:var(--thc-photo-placeholder)}
.hero-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-text{position:relative;flex:1 1 var(--thc-hero-text-flex-basis);min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--thc-hero-text-gap)}
.h1{margin:0;font-size:var(--thc-h1-size);line-height:var(--thc-h1-line-height);font-weight:var(--thc-font-weight-semibold);letter-spacing:var(--thc-h1-letter-spacing);color:var(--thc-text-primary);text-wrap:balance}
.hero-text p{margin:0;max-width:var(--thc-lead-max-width);font-size:var(--thc-lead-size);line-height:var(--thc-lead-line-height);color:var(--thc-text-secondary);text-wrap:pretty}
.cta-row{display:flex;gap:var(--thc-space-14);flex-wrap:wrap;align-items:center;margin-top:var(--thc-space-2)}
.cta-row span{font-size:var(--thc-footnote-size);color:var(--thc-text-secondary)}

/* ---- Card band ---- */
.band{display:grid;grid-template-columns:var(--thc-band-columns);gap:var(--thc-band-gap);flex-shrink:0}
.card{background:var(--thc-surface-glass);border:var(--thc-border-width) solid var(--thc-surface-glass-border);border-radius:var(--thc-radius-28);padding:var(--thc-card-padding);display:flex;flex-direction:column;gap:var(--thc-card-gap);backdrop-filter:var(--thc-backdrop-filter);-webkit-backdrop-filter:var(--thc-backdrop-filter)}
#chart{grid-column:span 2;gap:var(--thc-chart-card-gap)}
.card-title{font-size:var(--thc-card-caption-size);font-weight:var(--thc-font-weight-semibold);letter-spacing:var(--thc-card-caption-letter-spacing);text-transform:var(--thc-card-caption-transform);color:var(--thc-accent-cyan)}
.card-row{display:flex;gap:var(--thc-space-12);align-items:baseline}
.card-row span:last-child{font-size:var(--thc-card-body-size);line-height:var(--thc-card-body-line-height);color:var(--thc-text-primary)}
.step-number{font-size:var(--thc-card-caption-size);font-weight:var(--thc-font-weight-semibold);color:var(--thc-accent-cyan);flex-shrink:0}
.list-dot{width:var(--thc-list-dot-size);height:var(--thc-list-dot-size);flex-shrink:0;border-radius:var(--thc-radius-circle);background:var(--thc-accent-cyan);box-shadow:var(--thc-glow-list-dot)}
.role-row{display:flex;gap:var(--thc-space-8);align-items:baseline}
.role-name{font-size:var(--thc-card-body-size);line-height:var(--thc-card-body-line-height);font-weight:var(--thc-font-weight-semibold);color:var(--thc-text-primary);flex-shrink:0}
.role-row span:last-child{font-size:var(--thc-card-body-size);line-height:var(--thc-card-body-line-height);color:var(--thc-text-secondary)}

/* ---- Chart ---- */
.metric-row{display:flex;align-items:baseline;gap:var(--thc-space-10)}
#big-value{font-size:var(--thc-metric-size);font-weight:var(--thc-font-weight-semibold);letter-spacing:var(--thc-metric-letter-spacing);color:var(--thc-text-primary);font-variant-numeric:tabular-nums}
#big-value+span{font-size:var(--thc-metric-delta-size);font-weight:var(--thc-font-weight-semibold);color:var(--thc-accent-cyan)}
.chart-plot{position:relative;width:100%}
.chart-plot svg{width:100%;height:auto;overflow:visible;display:block}
.chart-line{filter:var(--thc-glow-chart-line);animation:lineDraw var(--thc-dur-chart-cycle) var(--thc-ease-linear) infinite}
.chart-dot{filter:var(--thc-glow-chart-dot);offset-path:path('M10,88 76,74 142,68 208,48 274,20');animation:dotMove var(--thc-dur-chart-cycle) var(--thc-ease-linear) infinite}
.chart-point-alert{filter:var(--thc-glow-alert-dot);opacity:0;animation:alertReveal var(--thc-dur-chart-cycle) var(--thc-ease-inout) infinite}

.chart-badge{position:absolute;display:flex;align-items:center;gap:var(--thc-space-6);border-radius:var(--thc-radius-pill);padding:var(--thc-badge-padding);font-size:var(--thc-badge-size);font-weight:var(--thc-font-weight-semibold);white-space:nowrap;opacity:0}
.chart-badge-dot{width:var(--thc-chip-dot-size);height:var(--thc-chip-dot-size);border-radius:var(--thc-radius-circle);flex-shrink:0}
.chart-badge-alert{top:56.923%;left:23.75%;transform:translate(-20%,18%);background:var(--thc-status-danger-bg);border:var(--thc-border-width) solid var(--thc-status-danger-border);color:var(--thc-status-danger-text);animation:alertReveal var(--thc-dur-chart-cycle) var(--thc-ease-inout) infinite}
.chart-badge-alert .chart-badge-dot{background:var(--thc-status-danger)}
.chart-badge-retro{top:0;left:0;background:var(--thc-status-info-bg);border:var(--thc-border-width) solid var(--thc-status-info-border);color:var(--thc-status-info-text);animation:retroReveal var(--thc-dur-chart-cycle) var(--thc-ease-inout) infinite}
.chart-badge-retro .chart-badge-dot{background:var(--thc-accent-cyan)}
.chart-badge-grow{top:0;left:0;background:var(--thc-status-success-bg);border:var(--thc-border-width) solid var(--thc-status-success-border);color:var(--thc-status-success-text);animation:growReveal var(--thc-dur-chart-cycle) var(--thc-ease-inout) infinite}
.chart-badge-grow .chart-badge-dot{background:var(--thc-status-success)}

.wave-val{position:absolute;font-size:var(--thc-chart-value-size);font-weight:var(--thc-font-weight-bold);letter-spacing:var(--thc-chart-value-letter-spacing);color:var(--thc-text-primary);white-space:nowrap;font-variant-numeric:tabular-nums}
.wave-val[data-i="0"]{top:58.46153846153847%;left:3.125%;transform:translate(-6%,-100%)}
.wave-val[data-i="1"]{top:47.69230769230769%;left:23.75%;transform:translate(-50%,-100%)}
.wave-val[data-i="2"]{top:43.07692307692308%;left:44.375%;transform:translate(-50%,-100%)}
.wave-val[data-i="3"]{top:27.692307692307693%;left:65%;transform:translate(-50%,-100%)}
.wave-val[data-i="4"]{top:6.153846153846154%;left:85.625%;transform:translate(-90%,-100%)}

.wave-axis{position:absolute;top:96%;font-size:var(--thc-chart-axis-size);font-weight:var(--thc-font-weight-medium);color:var(--thc-text-muted);white-space:nowrap}
.wave-axis[data-i="0"]{left:3.125%;transform:translateX(-6%)}
.wave-axis[data-i="1"]{left:23.75%;transform:translateX(-50%)}
.wave-axis[data-i="2"]{left:44.375%;transform:translateX(-50%)}
.wave-axis[data-i="3"]{left:65%;transform:translateX(-50%)}
.wave-axis[data-i="4"]{left:85.625%;transform:translateX(-90%)}

/* ---- Coming-soon page ---- */
.cs-card{flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:var(--thc-space-14);background:var(--thc-surface-glass);border:var(--thc-border-width) solid var(--thc-surface-glass-border);border-radius:var(--thc-radius-30);padding:var(--thc-card-padding);backdrop-filter:var(--thc-backdrop-filter);-webkit-backdrop-filter:var(--thc-backdrop-filter);box-shadow:var(--thc-shadow-hero)}
.cs-title{margin:0;font-size:clamp(var(--thc-space-28),3vh + .6vw,40px);line-height:var(--thc-h1-line-height);font-weight:var(--thc-font-weight-semibold);letter-spacing:var(--thc-h1-letter-spacing);color:var(--thc-text-primary);text-wrap:balance}
.cs-lead{margin:0;max-width:var(--thc-lead-max-width);font-size:clamp(14px,1.35vh + .2vw,15px);line-height:var(--thc-lead-line-height);color:var(--thc-text-secondary);text-wrap:pretty}

/* ---- Keyframes (verbatim, see specs/animations.md) ---- */
@keyframes chipMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes alertReveal{0%,24%{opacity:0}28%,44%{opacity:1}47%,100%{opacity:0}}
@keyframes retroReveal{0%,48%{opacity:0}52%,84%{opacity:1}87%,100%{opacity:0}}
@keyframes growReveal{0%,86%{opacity:0}91%,96%{opacity:1}100%{opacity:0}}
@keyframes lineDraw{0%,5%{stroke-dashoffset:420}25%,55%{stroke-dashoffset:352}90%,100%{stroke-dashoffset:145}}
@keyframes dotMove{0%,5%{offset-distance:0%;opacity:0}8%{opacity:1}25%,55%{offset-distance:24.6%;opacity:1}90%,100%{offset-distance:100%;opacity:1}}
@keyframes neonA{0%{filter:blur(60px);opacity:.55;transform:translate3d(-10%,0,0) rotate(-7deg) scaleY(1)}50%{filter:blur(150px);opacity:.95;transform:translate3d(9%,4%,0) rotate(-3deg) scaleY(1.3)}100%{filter:blur(60px);opacity:.55;transform:translate3d(-10%,0,0) rotate(-7deg) scaleY(1)}}
@keyframes neonB{0%{filter:blur(150px);opacity:.7;transform:translate3d(7%,0,0) rotate(6deg) scaleY(1.15)}50%{filter:blur(70px);opacity:1;transform:translate3d(-9%,-5%,0) rotate(11deg) scaleY(.9)}100%{filter:blur(150px);opacity:.7;transform:translate3d(7%,0,0) rotate(6deg) scaleY(1.15)}}

/* prefers-reduced-motion selectors target the classes that now carry the animations
   (the reference used [style*="lineDraw"]/[style*="dotMove"] attribute selectors because
   the animation was declared inline; here it is declared on .chart-line/.chart-dot). */
@media (prefers-reduced-motion:reduce){
  .chip-marquee{animation:none!important}
  .chart-line{animation:none!important;stroke-dashoffset:0!important}
  .chart-dot{animation:none!important;offset-distance:100%!important}
  [data-wave]{animation:none!important;filter:blur(110px)!important}
}

@media (max-width:700px){
  .shell{height:auto!important;min-height:0!important;padding-bottom:var(--thc-space-26)!important}
  .hero{gap:var(--thc-space-20)!important;width:100%!important;height:auto!important;flex-direction:column!important}
  .band{grid-template-columns:1fr!important;grid-template-rows:auto!important;flex:none!important}
  #chart{grid-column:span 1!important}
  .hero-photo{width:100%!important;height:auto!important}
  .nav-links{display:none!important}
  .h1{font-size:var(--thc-h1-size-mobile)!important}
  .cs-card{padding:var(--thc-space-26)!important}
  .cs-title{font-size:var(--thc-space-28)!important}
}