/* Approved: purple grain outside, one card, state-colored chart + white copy. */
html[data-concept="stoic"] {
  --hero-display: 44px;
  --hero-title: 24px;
  --hero-body: 15px;
  --hero-caption: 12px;
  --stoic-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='.18'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
html[data-concept="stoic"] .site-header {
  height: 96px;
  margin-bottom: -96px;
  background: transparent;
}
html[data-concept="stoic"] .site-header .wrap {
  width: min(1200px, 100% - 80px);
  height: 96px;
  padding: 0 8px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-concept="stoic"] .site-header.is-scrolled .wrap {
  height: 72px;
  padding-inline: 24px;
  border-radius: 24px;
  background: #f3edfaed;
}
html[data-concept="stoic"] .hero {
  min-height: 100svh;
  padding: 130px 0 64px;
  /* One clean color transition, without grain or a milky bottom wash. */
  background: linear-gradient(to bottom, #cec2f1, #e5dff4 75%);
}
html[data-concept="stoic"] .hero > .sky { display: none; }
html[data-concept="stoic"] .hero > .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  width: min(1200px, 100% - 80px);
  min-height: 550px;
  overflow: hidden;
  border-radius: 32px;
  background: #fff;
  box-shadow: none;
}
html[data-concept="stoic"] .hero .hero-copy {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 48px 52px 0;
  text-align: left;
}
html[data-concept="stoic"] .hero .eyebrow {
  margin: 0;
  color: #705780;
  font-size: var(--hero-caption);
  font-weight: 500;
  letter-spacing: .1em;
}
html[data-concept="stoic"] .hero h1 {
  max-width: 7em;
  margin-top: 16px;
  margin-inline: 0;
  color: #302936;
  font-family: var(--sans);
  font-size: var(--hero-display);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.045em;
  text-wrap: initial;
}
html[data-concept="stoic"] .hero .hero-copy .hero-lead {
  max-width: 27em;
  margin: 22px 0 0;
  font-size: var(--hero-body);
  line-height: 1.85;
  color: #534b5e;
}
html[data-concept="stoic"] .hero h1 span { display: block; }
html[data-concept="stoic"] .hero h1 span:last-child { color: #79619e; }
html[data-concept="stoic"] .hero .lead-group { display: block; }
html[data-concept="stoic"] .hero .lead-value { margin-top: 12px; color: #534b5e; }
html[data-concept="stoic"] .hero .hero-lead > br { display: none; }
html[data-concept="stoic"] .hero .phrase { display: inline-block; max-width: 100%; }
html[data-concept="stoic"] .hero .hero-foot {
  grid-column: 2;
  grid-row: 2;
  align-items: flex-start;
  margin: 0;
  padding: 24px 52px 92px;
}
html[data-concept="stoic"] .hero .hero-actions .btn {
  font-family: var(--sans);
  font-size: var(--hero-body);
  min-height: 48px;
  min-width: 160px;
  padding-inline: 30px;
  border-radius: 14px;
}
html[data-concept="stoic"] .hero .hero-foot .hero-note {
  justify-content: flex-start;
  margin-top: 12px;
  font-size: var(--hero-caption);
  text-align: left;
  color: #8b8491;
}
html[data-concept="stoic"] .hero .day-card {
  --chart-color: #70509e;
  --chart-wash: #e8dcff;
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 38px 0 30px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  isolation: isolate;
  background: var(--chart-wash);
  transition: background-color .7s ease;
}
html[data-concept="stoic"] .hero .day-card::before {
  content: none;
}
html[data-concept="stoic"] .day-card:has(.cat[data-state="high"]) {
  --chart-color: #4d713c;
  --chart-wash: #e3f1d2;
}
html[data-concept="stoic"] .day-card:has(.cat[data-state="low"]) {
  --chart-color: #99622f;
  --chart-wash: #ffe5c5;
}
html[data-concept="stoic"] .day-card:has(.cat[data-state="rest"]) {
  --chart-color: #985274;
  --chart-wash: #ffe0ed;
}
html[data-concept="stoic"] .hero .readout {
  padding: 0 38px;
  gap: 12px;
  align-items: center;
}
html[data-concept="stoic"] .hero .readout > div:first-child {
  display: grid;
  grid-template-columns: max-content max-content;
  align-items: baseline;
  column-gap: 12px;
  min-width: 0;
}
html[data-concept="stoic"] .hero .readout-time {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--sans);
  font-size: var(--hero-caption);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  opacity: 1;
}
html[data-concept="stoic"] .hero .readout-state {
  grid-column: 1;
  grid-row: 1;
  margin-top: 0;
  font-size: var(--hero-title);
  font-weight: 600;
  letter-spacing: -.035em;
}
html[data-concept="stoic"] .hero .readout-tip {
  grid-column: 1 / -1;
  margin-top: 10px;
  font-size: var(--hero-body);
  line-height: 1.65;
  opacity: 1;
}
html[data-concept="stoic"] .hero .today-score {
  width: 120px;
  display: grid;
  grid-template-columns: max-content max-content;
  column-gap: 4px;
  padding: 14px 16px 12px;
  border: 1px solid #ffffff66;
  border-radius: 18px;
  background: #ffffff40;
  box-shadow: none;
  text-align: left;
  color: inherit;
}
html[data-concept="stoic"] .hero .today-score span {
  grid-column: 1 / -1;
  font-size: var(--hero-caption);
  letter-spacing: .02em;
  white-space: nowrap;
  opacity: 1;
}
html[data-concept="stoic"] .hero .today-score b {
  font-family: var(--sans);
  font-weight: 600;
  display: inline-block;
  margin-top: 7px;
  font-size: var(--hero-display);
  letter-spacing: -.045em;
}
html[data-concept="stoic"] .hero .today-score em {
  font-size: var(--hero-caption);
  font-weight: 500;
  opacity: 1;
  margin-left: 0;
  align-self: end;
  padding-bottom: 3px;
  white-space: nowrap;
}
html[data-concept="stoic"] .hero .chart { margin: 30px 24px 0; }
html[data-concept="stoic"] #chart-svg text {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  letter-spacing: .01em;
}
html[data-concept="stoic"] #chart-svg .period-label { font-size: var(--hero-caption); font-weight: 500; }
html[data-concept="stoic"] #chart-svg .time-tick { font-size: var(--hero-caption); opacity: 1; }
html[data-concept="stoic"] .hero .cat { width: 84px; min-width: 0; }
/* Keep the original character; separate its soft volume from the chart plane. */
html[data-concept="stoic"] #hero-cat::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 86%;
  width: 58%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #49305b38 0%, #49305b18 42%, #49305b00 74%);
  transform: translate(-50%, -30%);
  opacity: .8;
  pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
html[data-concept="stoic"] #hero-cat .cat-body { translate: 0 -2px; }
html[data-concept="stoic"] #hero-cat img {
  filter: drop-shadow(-.5px -1px .65px #fff6)
    drop-shadow(0 2px 1.5px #49305b24)
    drop-shadow(2px 7px 5px #49305b25);
}
html[data-concept="stoic"] .chart[data-demo-moving] #hero-cat .cat-body,
html[data-concept="stoic"] .chart[data-dragging] #hero-cat .cat-body { translate: 0 -6px; }
html[data-concept="stoic"] .chart[data-demo-moving] #hero-cat::before,
html[data-concept="stoic"] .chart[data-dragging] #hero-cat::before {
  transform: translate(-50%, -20%) scale(1.18);
  opacity: .48;
}
@media (hover: hover) and (pointer: fine) {
  html[data-concept="stoic"] #hero-cat:hover .cat-body { translate: 0 -5px; }
  html[data-concept="stoic"] #hero-cat:hover::before {
    transform: translate(-50%, -20%) scale(1.12);
    opacity: .55;
  }
}
/* Show a repeated press-and-drag demonstration until the visitor takes over. */
.cat-drag-gesture { display: none; }
html[data-concept="stoic"] .cat-drag-gesture {
  position: absolute;
  top: 56%;
  left: 48%;
  display: block;
  width: 36px;
  height: 40px;
  pointer-events: none;
  color: #55465f;
  opacity: 0;
  filter: drop-shadow(0 2px 3px #39205222);
  transform-origin: 35% 12%;
  transform: translate(8px, 12px) scale(1.06);
  transition: opacity .25s ease, transform .25s ease;
}
html[data-concept="stoic"] .cat-drag-gesture svg { width: 36px; height: 40px; }
html[data-concept="stoic"] .gesture-contact { opacity: 0; }
html[data-concept="stoic"] .chart[data-demo-ready] .cat-drag-gesture { opacity: 1; }
html[data-concept="stoic"] .chart[data-demo-moving] .cat-drag-gesture {
  transform: translate(0, 0) scale(.97);
}
html[data-concept="stoic"] .chart[data-demo-moving] .gesture-contact {
  animation: stoic-touch .7s both;
}
html[data-concept="stoic"] .chart[data-demo-moving] .cat-body {
  animation: none;
  translate: 0 -3px;
}
@keyframes stoic-touch {
  0% { opacity: .6; r: 4; }
  100% { opacity: 0; r: 10; }
}
html[data-concept="stoic"] .cat-body { transition: translate .2s ease; }
html[data-concept="stoic"] .chart[data-explored] .cat-drag-gesture { display: none; }
html[data-concept="stoic"] .chart[data-dragging] { cursor: grabbing; }
html[data-concept="stoic"] .chart[data-dragging] .cat-body { translate: 0 -4px; }
@media (hover: hover) and (pointer: fine) {
  html[data-concept="stoic"] .cat { pointer-events: auto; }
  html[data-concept="stoic"] .cat:hover .cat-body { translate: 0 -3px; }
}
html[data-concept="stoic"] #chart-svg [stroke="#7962c7"],
html[data-concept="stoic"] #chart-svg [stroke="#b9abe3"] {
  stroke: var(--chart-color);
  transition: stroke .7s ease;
}
html[data-concept="stoic"] #chart-svg [stroke="#b9abe3"] { opacity: .75; }
html[data-concept="stoic"] .hero .chart-caption {
  padding: 20px 38px 0;
  color: #63596d;
  font-size: var(--hero-caption);
  gap: 10px;
  justify-content: flex-end;
  flex-direction: row;
}
html[data-concept="stoic"] .hero .legend { gap: 18px; opacity: 1; }
html[data-concept="stoic"] .hero .legend i { width: 7px; height: 7px; border-radius: 50%; border-color: #78668e26; }
html[data-concept="stoic"] .site-header .site-nav {
  gap: 24px;
  font-size: var(--hero-body);
  font-weight: 500;
  line-height: 1.4;
}
html[data-concept="stoic"] .site-header .site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
  white-space: nowrap;
}
html[data-concept="stoic"] .site-header .btn { font-family: var(--sans); font-size: var(--hero-body); }
html[data-concept="stoic"] .hero .num { font-family: var(--sans); }
@media (max-width: 1050px) {
  html[data-concept="stoic"] { --hero-display: 36px; }
  html[data-concept="stoic"] .site-header .wrap,
  html[data-concept="stoic"] .hero > .wrap { width: calc(100% - 48px); }
  html[data-concept="stoic"] .hero .hero-copy { padding: 40px 32px 0; }
  html[data-concept="stoic"] .hero .hero-foot { padding: 28px 32px 40px; }
  html[data-concept="stoic"] .hero .readout { padding-inline: 26px; }
  html[data-concept="stoic"] .hero .chart { margin-inline: 24px; }
  html[data-concept="stoic"] .hero .chart-caption { padding-inline: 26px; flex-wrap: wrap; }
}
@media (max-width: 760px) {
  html[data-concept="stoic"] { --hero-title: 22px; --hero-body: 14px; --hero-caption: 11px; }
  html[data-concept="stoic"] .site-header { height: 80px; margin-bottom: -80px; }
  html[data-concept="stoic"] .site-header .wrap { height: 80px; width: calc(100% - 40px); padding: 0; }
  html[data-concept="stoic"] .site-header .site-nav a { display: none; }
  html[data-concept="stoic"] .hero { padding: 102px 0 40px; }
  html[data-concept="stoic"] .hero > .wrap {
    width: calc(100% - 32px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    border-radius: 24px;
  }
  html[data-concept="stoic"] .hero .hero-copy { grid-column: 1; grid-row: 1; padding: 36px 28px 0; }
  html[data-concept="stoic"] .hero h1 { margin-top: 16px; }
  html[data-concept="stoic"] .hero .hero-copy .hero-lead { margin-top: 20px; }
  html[data-concept="stoic"] .hero .hero-foot { grid-column: 1; grid-row: 2; padding: 24px 28px 32px; }
  html[data-concept="stoic"] .hero .day-card { grid-column: 1; grid-row: 3; padding: 30px 0 26px; }
  html[data-concept="stoic"] .hero .readout { padding-inline: 24px; }
  html[data-concept="stoic"] .hero .readout > div:first-child { column-gap: 8px; }
  html[data-concept="stoic"] .hero .readout-tip { margin-top: 8px; }
  html[data-concept="stoic"] .hero .chart { margin: 26px 18px 0; }
  html[data-concept="stoic"] .hero .today-score { width: 96px; padding: 10px 11px; border-radius: 14px; }
  html[data-concept="stoic"] .hero .cat { width: 70px; }
  html[data-concept="stoic"] .hero .chart-caption { padding: 14px 24px 0; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-concept="stoic"] #hero-cat::before { transition: none; }
  html[data-concept="stoic"] .hero #chart #hero-cat .cat-body { translate: none; }
  html[data-concept="stoic"] .hero .day-card,
  html[data-concept="stoic"] #chart-svg [stroke],
  html[data-concept="stoic"] .cat-drag-gesture,
  html[data-concept="stoic"] .cat-body { transition: none; }
  html[data-concept="stoic"] .cat-drag-gesture,
  html[data-concept="stoic"] .gesture-contact { animation: none; }
  html[data-concept="stoic"] .cat-drag-gesture { transform: none; }
}