@charset "utf-8";

/*
 * Homepage art direction inspired by the approved Tabela concept.
 * Everything is scoped to .home-tabela so the documentation, comparison,
 * purchase, privacy, and support pages keep their established presentation.
 */

body.home-tabela {
  --tm-paper: #f6f6f1;
  --tm-paper-soft: #ecece6;
  --tm-card: #ffffff;
  --tm-ink: #101010;
  --tm-muted: #5b5b56;
  --tm-dark: #252525;
  --tm-dark-soft: #30302e;
  --tm-lime: #e6ff00;
  --tm-lime-deep: #d8ed19;
  --tm-line: rgba(16, 16, 16, 0.14);
  --tm-radius: clamp(1.25rem, 2vw, 1.9rem);
  --tm-shadow: 0 1.5rem 4rem rgba(30, 30, 24, 0.11);
  color: var(--tm-ink);
  background: var(--tm-paper);
}

body.home-tabela::before {
  display: none;
}

.home-tabela h1,
.home-tabela h2,
.home-tabela h3,
.home-tabela strong {
  color: var(--tm-ink);
}

.home-tabela p,
.home-tabela li {
  color: var(--tm-muted);
}

.home-tabela a {
  color: var(--tm-ink);
  text-decoration-color: rgba(16, 16, 16, 0.34);
}

.home-tabela a:hover {
  color: var(--tm-ink);
  text-decoration-color: currentColor;
}

.home-tabela a:focus-visible,
.home-tabela button:focus-visible {
  outline-color: #b9cf00;
}

/* Header */
.home-tabela .site-header {
  border-bottom-color: rgba(16, 16, 16, 0.08);
  background: rgba(246, 246, 241, 0.9);
  backdrop-filter: blur(1rem);
}

.home-tabela .header-row {
  width: min(78rem, calc(100% - 3rem));
  min-height: 4.8rem;
}

.home-tabela .brand {
  color: var(--tm-ink);
  font-size: 1.03rem;
  letter-spacing: -0.02em;
}

.home-tabela .brand-mark {
  display: block;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
}

.home-tabela .primary-nav {
  gap: 0.12rem;
  font-size: 0.84rem;
}

.home-tabela .primary-nav a {
  display: inline-flex;
  min-height: 2.35rem;
  align-items: center;
  padding: 0 0.72rem;
  border-radius: 999px;
  color: #383834;
  white-space: nowrap;
}

.home-tabela .primary-nav a:hover {
  background: #e7e7e0;
  color: var(--tm-ink);
}

.home-tabela .primary-nav .nav-trial {
  margin-left: 0.35rem;
  padding-inline: 1rem;
  background: var(--tm-dark);
  color: #fff;
}

.home-tabela .primary-nav .nav-trial:hover {
  background: #000;
  color: #fff;
}

.home-tabela .status-pill {
  margin-left: 0.28rem;
  border-color: rgba(16, 16, 16, 0.12);
  background: #fff;
  color: #41413d;
  letter-spacing: 0.035em;
}

.home-tabela .status-pill::before,
.home-tabela:root[data-release-state="public"] .status-pill::before {
  background: var(--tm-lime-deep);
  box-shadow: 0 0 0 0.2rem rgba(216, 237, 25, 0.2);
}

/* Shared homepage controls */
.home-tabela .eyebrow {
  color: #51514d;
  letter-spacing: 0.09em;
}

.home-tabela .button {
  min-height: 3.15rem;
  padding-inline: 1.25rem;
  border-radius: 999px;
}

.home-tabela .button-primary {
  border-color: var(--tm-dark);
  background: var(--tm-dark);
  box-shadow: none;
  color: #fff;
}

.home-tabela .button-primary:hover {
  background: #000;
  box-shadow: 0 0.8rem 1.8rem rgba(16, 16, 16, 0.18);
  color: #fff;
}

.home-tabela .button-secondary {
  border-color: var(--tm-line);
  background: #fff;
  color: var(--tm-ink);
}

.home-tabela .button-secondary:hover {
  border-color: rgba(16, 16, 16, 0.32);
  background: #fff;
}

/* Hero */
.tm-hero {
  position: relative;
  isolation: isolate;
  padding: clamp(3.5rem, 7vw, 6.5rem) 0 clamp(4.5rem, 7vw, 6.5rem);
}

/*
 * WebGL hero scene. It sits behind the copy and the screenshot, is masked
 * at the edges so it fades into the paper background, and never takes
 * pointer events. Empty until hero-three.js decides the device qualifies.
 */
.tm-hero-scene {
  position: absolute;
  z-index: -1;
  inset: -16% -6% 58% -6%;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: radial-gradient(ellipse 74% 74% at 50% 46%, #000 30%, transparent 88%);
  mask-image: radial-gradient(ellipse 74% 74% at 50% 46%, #000 30%, transparent 88%);
}

.tm-hero-scene[data-hero-scene-state="running"] {
  animation: tm-hero-scene-in 1.6s 0.15s ease-out forwards;
}

.tm-hero-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@keyframes tm-hero-scene-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.58;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-hero-scene {
    display: none;
  }
}

@media (max-width: 70rem) {
  .tm-hero-scene {
    display: none;
  }
}

.tm-hero-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(17rem, 0.65fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.tm-hero-heading .eyebrow {
  margin-bottom: 1.1rem;
}

.tm-hero h1 {
  max-width: 13ch;
  margin: 0;
  color: var(--tm-ink);
  font-size: clamp(3.5rem, 7.1vw, 6.65rem);
  font-weight: 820;
  letter-spacing: -0.06em;
  line-height: 0.96;
}

.tm-scribble {
  position: relative;
  z-index: 0;
  display: inline-block;
  white-space: nowrap;
}

.tm-scribble svg {
  position: absolute;
  z-index: -1;
  top: -20%;
  left: -7%;
  width: 114%;
  height: 145%;
  overflow: visible;
  pointer-events: none;
}

.tm-scribble path {
  fill: none;
  stroke: var(--tm-lime-deep);
  stroke-linecap: round;
  stroke-width: 7;
  vector-effect: non-scaling-stroke;
}

.tm-hero-side {
  padding-bottom: 0.35rem;
}

.tm-symbols {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 1.2rem;
}

.tm-symbols span {
  display: grid;
  width: 3.05rem;
  height: 3.05rem;
  place-items: center;
  border: 1px solid rgba(16, 16, 16, 0.08);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0.5rem 1.2rem rgba(20, 20, 16, 0.05);
  color: var(--tm-ink);
  font-size: 1.08rem;
  font-weight: 800;
}

.tm-hero-side .hero-deck {
  margin-bottom: 0.9rem;
  color: var(--tm-muted);
  font-size: 1.05rem;
  line-height: 1.55;
}

.tm-hero-side .hero-contrast {
  margin-bottom: 1.25rem;
  color: var(--tm-ink) !important;
  font-size: 0.98rem;
  line-height: 1.48;
}

.tm-hero-side .action-row {
  gap: 0.6rem;
}

.tm-hero-side .button {
  padding-inline: 1rem;
  font-size: 0.86rem;
}

.tm-hero-side .hero-trust {
  max-width: 27rem;
  margin: 0.9rem 0 0 !important;
  color: #686862 !important;
  font-size: 0.76rem !important;
}

.tm-hero-window {
  position: relative;
  isolation: isolate;
  margin-inline: auto;
}

.tm-hero-window::before,
.tm-hero-window::after {
  position: absolute;
  z-index: -1;
  border-radius: var(--tm-radius);
  content: "";
}

.tm-hero-window::before {
  inset: 7% -1.1rem -1.1rem 5%;
  transform: rotate(1.2deg);
  background: var(--tm-dark);
}

.tm-hero-window::after {
  top: -1.3rem;
  right: 8%;
  width: 10rem;
  height: 3rem;
  transform: rotate(4deg);
  border-radius: 0.55rem;
  background: var(--tm-lime);
}

.tm-hero-window .shot-frame {
  border: 1px solid rgba(16, 16, 16, 0.18);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
}

.tm-hero-window .shot-frame.has-chrome::before {
  height: 2rem;
  background:
    radial-gradient(circle at 1rem 50%, #ff5f57 0.26rem, transparent 0.28rem),
    radial-gradient(circle at 1.9rem 50%, #febc2e 0.26rem, transparent 0.28rem),
    radial-gradient(circle at 2.8rem 50%, #28c840 0.26rem, transparent 0.28rem),
    #f3f3ef;
}

[data-platform="windows"] .tm-hero-window .shot-frame.has-chrome::before {
  background:
    linear-gradient(currentColor, currentColor) calc(100% - 3.40rem) 62% / 0.6rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 2.00rem) 32% / 0.6rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 2.00rem) 68% / 0.6rem 1px no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 2.60rem) 50% / 1px 0.6rem no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 2.00rem) 50% / 1px 0.6rem no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) calc(100% - 0.90rem) 50% / 0.6rem 0.6rem no-repeat,
    linear-gradient(-45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) calc(100% - 0.90rem) 50% / 0.6rem 0.6rem no-repeat,
    #f3f3ef;
  color: rgba(16, 16, 16, 0.55);
}

.tm-window-tag {
  position: absolute;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.55rem;
  padding: 0 1.15rem;
  border: 1px solid rgba(16, 16, 16, 0.12);
  border-radius: 0.48rem;
  box-shadow: 0 0.8rem 1.8rem rgba(20, 20, 16, 0.12);
  color: var(--tm-ink);
  font-size: 0.84rem;
  font-style: italic;
  font-weight: 850;
}

.tm-window-tag-local {
  top: -1.1rem;
  left: 4%;
  transform: rotate(-4deg);
  background: #fff;
}

.tm-window-tag-price {
  right: 2.5%;
  /* Sits on the lower-right corner of the screenshot, not over the step rail
     below the window, so it never covers the last stage chip. */
  bottom: 4.2rem;
  transform: rotate(5deg);
  background: var(--tm-lime);
}

.tm-hero-details {
  display: grid;
  grid-template-columns: auto minmax(15rem, 0.8fr) minmax(19rem, 1.1fr);
  gap: 1.5rem 2.2rem;
  align-items: center;
  margin-top: 2.25rem;
}

.tm-hero-details .platform-support {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.tm-hero-details .platform-support li {
  border-color: var(--tm-line);
  background: #fff;
}

.tm-hero-details .platform-support li span {
  color: var(--tm-ink);
}

.tm-hero-details .hero-links,
.tm-hero-details .hero-caveat {
  margin: 0 !important;
  max-width: none;
  font-size: 0.82rem !important;
  line-height: 1.5 !important;
}

.tm-hero-details .hero-caveat {
  border-left-color: var(--tm-lime-deep);
  color: #696963 !important;
}

/* Bento */
.tm-bento-section {
  padding: 0 0 clamp(4.5rem, 8vw, 7.5rem);
}

.tm-bento-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(17rem, 0.55fr);
  gap: 2rem 4rem;
  align-items: end;
  margin-bottom: 2.2rem;
}

.tm-bento-heading h2 {
  max-width: 19ch;
  margin: 0;
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  letter-spacing: -0.05em;
}

.tm-bento-heading > p {
  margin: 0 0 0.25rem;
  font-size: 1.02rem;
  line-height: 1.55;
}

.tm-bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1rem;
}

.tm-tile {
  position: relative;
  min-width: 0;
  min-height: 24rem;
  overflow: hidden;
  padding: clamp(1.35rem, 2.2vw, 2rem);
  border: 1px solid rgba(16, 16, 16, 0.08);
  border-radius: var(--tm-radius);
  background: var(--tm-card);
}

.tm-tile h3 {
  max-width: 19ch;
  margin: 0 0 0.75rem;
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.tm-tile p {
  max-width: 37rem;
  line-height: 1.5;
}

.tm-tile a {
  font-size: 0.88rem;
  font-weight: 800;
  text-decoration: none;
}

.tm-tile a:hover {
  text-decoration: underline;
}

.tm-tile-kicker {
  margin: 0 0 0.75rem;
  color: #696963 !important;
  font-size: 0.69rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.tm-tile-board {
  grid-column: span 4;
  background: #fff;
}

.tm-tile-agents {
  grid-column: span 5;
  background: var(--tm-paper-soft);
}

.tm-tile-price {
  grid-column: span 3;
  background: var(--tm-dark);
  color: #fff;
}

.tm-tile-ai {
  grid-column: span 3;
  background: var(--tm-paper-soft);
}

.tm-tile-capture {
  grid-column: span 5;
  background: #fff;
}

.tm-tile-ownership {
  grid-column: span 4;
  background: var(--tm-lime);
}

.tm-tile-price h3,
.tm-tile-price .tm-tile-kicker {
  color: #fff !important;
}

.tm-tile-price > .tm-tile-note {
  margin: 1rem 0 0;
  color: #c8c8c1;
  font-size: 0.75rem;
}

.tm-tile-shot {
  position: absolute;
  right: -10%;
  bottom: -9%;
  left: 9%;
  margin: 0;
  transform: rotate(-2deg);
  border: 1px solid rgba(16, 16, 16, 0.12);
  border-radius: 0.9rem;
  background: #fff;
  box-shadow: 0 1rem 2.6rem rgba(20, 20, 16, 0.16);
  overflow: hidden;
}

.tm-tile-capture .tm-tile-shot {
  right: -5%;
  bottom: -12%;
  left: 22%;
  transform: rotate(1.5deg);
}

.tm-tile-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.tm-sticker {
  position: absolute;
  z-index: 2;
  top: 1.35rem;
  right: 1.2rem;
  padding: 0.42rem 0.78rem;
  transform: rotate(5deg);
  border-radius: 0.35rem;
  background: var(--tm-lime);
  box-shadow: 0 0.65rem 1.3rem rgba(20, 20, 16, 0.12);
  color: var(--tm-ink);
  font-size: 0.75rem;
  font-style: italic;
  font-weight: 850;
}

.tm-sticker-dark {
  transform: rotate(-5deg);
  background: var(--tm-dark);
  color: #fff;
}

.tm-proposals {
  display: grid;
  gap: 0.42rem;
  margin-top: 1.4rem;
  padding: 0.7rem;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.9rem 2rem rgba(20, 20, 16, 0.07);
}

.tm-proposals > div {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.65rem;
  border-radius: 0.7rem;
  color: #575752;
  font-size: 0.81rem;
}

.tm-proposals > div + div {
  border-top: 1px solid rgba(16, 16, 16, 0.07);
}

.tm-proposal-icon {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: #f0f0eb;
  color: var(--tm-ink);
  font-weight: 850;
}

.tm-proposals b {
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
  background: var(--tm-lime);
  font-size: 0.68rem;
}

.tm-proposals b.is-done {
  background: #e8e8e2;
}

.tm-receipt {
  margin-top: 1.25rem;
  padding: 1rem;
  transform: rotate(-1deg);
  border-radius: 0.45rem;
  background: #fff;
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.28);
  color: #282825;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.69rem;
}

.tm-receipt p,
.tm-receipt div {
  color: inherit;
}

.tm-receipt-title {
  margin: 0 0 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

.tm-receipt > div {
  display: flex;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.2rem 0;
}

.tm-receipt-total {
  margin-top: 0.6rem;
  padding-top: 0.7rem !important;
  border-top: 1px dashed #aaa;
  font-weight: 850;
}

.tm-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.35rem;
}

.tm-pills span {
  display: inline-flex;
  min-height: 2.3rem;
  align-items: center;
  padding: 0 0.82rem;
  border: 1px solid rgba(16, 16, 16, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
  color: var(--tm-ink);
  font-size: 0.75rem;
  font-weight: 750;
}

.tm-pills span::before {
  width: 0.42rem;
  height: 0.42rem;
  margin-right: 0.48rem;
  border-radius: 0.12rem;
  background: var(--tm-lime-deep);
  content: "";
}

.tm-ownership-list {
  display: grid;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}

.tm-ownership-list li {
  display: flex;
  gap: 0.55rem;
  align-items: center;
  color: var(--tm-ink);
  font-size: 0.88rem;
  font-weight: 750;
}

.tm-ownership-list li::before {
  display: grid;
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  place-items: center;
  border-radius: 50%;
  background: var(--tm-dark);
  color: #fff;
  content: "✓";
  font-size: 0.68rem;
}

/* Carry the same art direction through the preserved production sections. */
.home-tabela .proof-strip {
  border-color: rgba(16, 16, 16, 0.09);
  background: #fff;
}

.home-tabela .proof-grid {
  border-color: var(--tm-line);
  border-radius: var(--tm-radius);
}

.home-tabela .proof-grid article {
  background: #f8f8f4;
}

.home-tabela .proof-grid article + article {
  border-color: var(--tm-line);
}

.home-tabela .proof-mark {
  color: var(--tm-ink);
}

.home-tabela .comparison-section,
.home-tabela .section-soft {
  border-color: rgba(16, 16, 16, 0.07);
  background: var(--tm-paper-soft);
}

.home-tabela .comparison-table-wrap {
  border-color: var(--tm-line);
  border-radius: var(--tm-radius);
  box-shadow: none;
}

.home-tabela .comparison-table thead {
  background: var(--tm-dark);
}

.home-tabela .comparison-table thead th:nth-child(2) {
  background: #3a3a36;
  box-shadow: inset 0 -0.3rem 0 var(--tm-lime-deep);
}

.home-tabela .comparison-table tbody td:nth-child(2) {
  background: rgba(230, 255, 0, 0.13);
}

.home-tabela .control-room {
  background: var(--tm-dark);
  color: #f8f8f3;
}

/* Same leak as the release callout: `.home-tabela h1,h2,h3,strong` paints text
   near-black for the light page and lands on these dark panels too, making the
   section heading and every workflow step title invisible. Use an explicit
   light colour rather than `inherit`: the step titles sit inside a wrapper that
   has already inherited the muted body grey, so inheriting would only trade an
   invisible heading for an unreadable one. */
.home-tabela .control-room h2,
.home-tabela .control-room h3,
.home-tabela .control-room h4,
.home-tabela .control-room strong {
  color: #f8f8f3;
}

.home-tabela .control-room .eyebrow {
  color: var(--tm-lime);
}

.home-tabela .control-heading p:not(.eyebrow),
.home-tabela .workflow-rail p {
  color: #c8c8c0;
}

.home-tabela .workflow-rail {
  background: rgba(255, 255, 255, 0.14);
}

.home-tabela .workflow-rail li {
  background: var(--tm-dark-soft);
}

.home-tabela .workflow-rail li > span {
  background: var(--tm-lime);
  color: var(--tm-ink);
}

.home-tabela .feature-card,
.home-tabela .promise-card,
.home-tabela .page-card {
  border-color: rgba(16, 16, 16, 0.1);
  border-radius: var(--tm-radius);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: none;
}

.home-tabela .feature-card:hover,
.home-tabela .promise-card:hover {
  border-color: rgba(16, 16, 16, 0.25);
  box-shadow: 0 1rem 2rem rgba(20, 20, 16, 0.07);
}

.home-tabela .feature-icon,
.home-tabela .feature-card:nth-child(2) .feature-icon,
.home-tabela .feature-card:nth-child(3) .feature-icon,
.home-tabela .feature-card:nth-child(5) .feature-icon,
.home-tabela .feature-card:nth-child(6) .feature-icon {
  background: var(--tm-lime);
  color: var(--tm-ink);
}

.home-tabela .shot-frame,
.home-tabela .demo-frame {
  border-color: rgba(16, 16, 16, 0.13);
  border-radius: 1.05rem;
  box-shadow: 0 1rem 2.5rem -1.7rem rgba(20, 20, 16, 0.34);
}

.home-tabela .showcase li::before {
  background-color: rgba(216, 237, 25, 0.24);
  filter: saturate(0) contrast(1.4);
}

.home-tabela .showcase-caveat,
.home-tabela .hero-caveat {
  border-left-color: var(--tm-lime-deep);
}

.home-tabela .price-card {
  border-color: rgba(16, 16, 16, 0.15);
  border-radius: var(--tm-radius);
  background: #fff;
  box-shadow: none;
}

.home-tabela .price-eyebrow {
  color: #565650;
}

.home-tabela .price-includes li::before {
  color: #869600;
}

.home-tabela .campaign-faq details,
.home-tabela .not-right {
  border-color: var(--tm-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.72);
}

.home-tabela .release-callout {
  border-radius: var(--tm-radius);
  background: var(--tm-dark);
  box-shadow: none;
}

/* This callout is the one dark panel on an otherwise light page, so the
   page-wide `.home-tabela` text colours must not leak into it. They are just as
   specific as the base `.release-callout` rules but load later, which silently
   repainted the heading and body copy near-black on a near-black card. Restate
   the light-on-dark colours here, scoped to the callout. */
.home-tabela .release-callout h2,
.home-tabela .release-callout h3,
.home-tabela .release-callout p,
.home-tabela .release-callout strong,
.home-tabela .release-callout a:not(.button) {
  color: #fff;
}

.home-tabela .release-callout .eyebrow {
  color: var(--tm-lime);
}

.home-tabela .release-callout::after {
  border-color: rgba(230, 255, 0, 0.22);
  box-shadow: 0 0 0 4rem rgba(230, 255, 0, 0.045), 0 0 0 8rem rgba(230, 255, 0, 0.025);
}

.home-tabela .release-callout .button-primary {
  background: var(--tm-lime);
  color: var(--tm-ink);
}

/* `.home-tabela .button-secondary` paints a white pill for the light page. On
   this dark card that produced white text on a white background: a button that
   rendered as an empty capsule. Set background and border here too, not just
   colour, so the outline style survives. */
.home-tabela .release-callout .button-secondary {
  border-color: rgba(255, 255, 255, 0.38);
  background: transparent;
  color: #fff;
}

.home-tabela .release-callout .button-secondary:hover {
  border-color: rgba(255, 255, 255, 0.62);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.home-tabela .site-footer {
  border-top-color: rgba(16, 16, 16, 0.11);
  background: #ededE7;
}

/* Responsive layout */
@media (max-width: 76rem) {
  .home-tabela .status-pill {
    display: none;
  }

  .home-tabela .primary-nav a {
    padding-inline: 0.62rem;
  }

  .tm-hero-lead {
    grid-template-columns: minmax(0, 1.45fr) minmax(16rem, 0.65fr);
    gap: 2.5rem;
  }

  .tm-hero-details {
    grid-template-columns: 1fr 1fr;
  }

  .tm-hero-details .hero-caveat {
    grid-column: 1 / -1;
  }

  .tm-tile-board,
  .tm-tile-agents,
  .tm-tile-price,
  .tm-tile-ai,
  .tm-tile-capture,
  .tm-tile-ownership {
    grid-column: span 6;
  }
}

@media (max-width: 60rem) {
  .home-tabela .primary-nav a {
    padding-inline: 0.5rem;
    font-size: 0.78rem;
  }

  .home-tabela .primary-nav a[href="/resources/"] {
    display: none;
  }

  .tm-hero-lead,
  .tm-bento-heading {
    grid-template-columns: 1fr;
  }

  .tm-hero-lead {
    gap: 2rem;
  }

  .tm-hero h1 {
    max-width: 12ch;
    font-size: clamp(3.7rem, 9vw, 5.8rem);
  }

  .tm-hero-side {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1.4rem;
    align-items: start;
    max-width: 48rem;
  }

  .tm-symbols {
    grid-row: 1 / span 4;
    flex-direction: column;
    margin: 0;
  }

  .tm-hero-side .hero-deck,
  .tm-hero-side .hero-contrast,
  .tm-hero-side .action-row,
  .tm-hero-side .hero-trust {
    grid-column: 2;
  }

  .tm-bento-heading {
    gap: 0.8rem;
  }

  .tm-bento-heading > p {
    max-width: 43rem;
  }
}

@media (max-width: 46rem) {
  .home-tabela .header-row {
    width: calc(100% - 2.25rem);
  }

  .home-tabela .primary-nav a[href="/resources/"] {
    display: inline-flex;
  }

  .home-tabela .primary-nav .nav-trial {
    margin-left: 0;
    background: var(--tm-dark);
    color: #fff;
  }

  .home-tabela .primary-nav a {
    border-radius: 0.7rem;
    background: #fff;
    font-size: 0.88rem;
  }

  .tm-hero {
    padding-top: 2.8rem;
    /* The bento section that follows opens with its own heading spacing, so a
       full desktop-scale gap here just doubles the break on a phone. */
    padding-bottom: 3rem;
  }

  .tm-hero-lead {
    margin-bottom: 2.6rem;
  }

  .tm-hero h1 {
    max-width: 11ch;
    font-size: clamp(2.9rem, 14.2vw, 4.4rem);
    line-height: 0.98;
  }

  .tm-scribble svg {
    stroke-width: 5;
  }

  .tm-hero-side {
    display: block;
  }

  .tm-symbols {
    flex-direction: row;
    margin-bottom: 1rem;
  }

  .tm-symbols span {
    width: 2.55rem;
    height: 2.55rem;
    font-size: 0.95rem;
  }

  .tm-hero-side .hero-deck,
  .tm-hero-side .hero-contrast {
    font-size: 0.95rem;
  }

  .tm-hero-window::before {
    inset: 5% -0.55rem -0.75rem 4%;
  }

  .tm-hero-window::after {
    top: -0.7rem;
    right: 8%;
    width: 6rem;
    height: 1.8rem;
  }

  .tm-hero-window .shot-frame.has-chrome::before {
    height: 1.55rem;
    background:
      radial-gradient(circle at 0.75rem 50%, #ff5f57 0.2rem, transparent 0.22rem),
      radial-gradient(circle at 1.42rem 50%, #febc2e 0.2rem, transparent 0.22rem),
      radial-gradient(circle at 2.09rem 50%, #28c840 0.2rem, transparent 0.22rem),
      #f3f3ef;
  }

  [data-platform="windows"] .tm-hero-window .shot-frame.has-chrome::before {
    background:
      linear-gradient(currentColor, currentColor) calc(100% - 3.27rem) 62% / 0.46rem 1px no-repeat,
      linear-gradient(currentColor, currentColor) calc(100% - 1.87rem) 32% / 0.46rem 1px no-repeat,
      linear-gradient(currentColor, currentColor) calc(100% - 1.87rem) 68% / 0.46rem 1px no-repeat,
      linear-gradient(currentColor, currentColor) calc(100% - 2.33rem) 50% / 1px 0.46rem no-repeat,
      linear-gradient(currentColor, currentColor) calc(100% - 1.87rem) 50% / 1px 0.46rem no-repeat,
      linear-gradient(45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) calc(100% - 0.70rem) 50% / 0.46rem 0.46rem no-repeat,
      linear-gradient(-45deg, transparent calc(50% - 0.5px), currentColor calc(50% - 0.5px), currentColor calc(50% + 0.5px), transparent calc(50% + 0.5px)) calc(100% - 0.70rem) 50% / 0.46rem 0.46rem no-repeat,
      #f3f3ef;
    color: rgba(16, 16, 16, 0.55);
  }

  .tm-hero-window .shot-frame img {
    height: clamp(12.5rem, 61vw, 16rem);
    object-fit: cover;
    object-position: 67% 16%;
  }

  .tm-window-tag {
    min-height: 2rem;
    padding-inline: 0.72rem;
    font-size: 0.68rem;
  }

  .tm-window-tag-local {
    top: -0.75rem;
  }

  .tm-window-tag-price {
    right: 1%;
    bottom: -0.8rem;
  }

  .tm-hero-details {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 1.8rem;
  }

  .tm-hero-details .hero-caveat {
    grid-column: auto;
  }

  .tm-hero-details .platform-support {
    align-items: flex-start;
  }

  .tm-bento-section {
    /* Matches the tightened phone section rhythm rather than keeping a
       desktop-scale gap before the proof strip. */
    padding-bottom: 2.25rem;
  }

  /* The bento tiles carry the longest copy on the page, so a slightly tighter
     internal rhythm here recovers more height than trimming section gaps. */
  .tm-tile {
    padding: 1.5rem 1.35rem;
  }

  .tm-bento-heading {
    margin-bottom: 1.5rem;
  }

  .tm-bento-heading h2 {
    font-size: clamp(2rem, 9.5vw, 2.8rem);
  }

  .tm-bento-heading > p {
    font-size: 0.94rem;
  }

  .tm-bento {
    grid-template-columns: 1fr;
  }

  .tm-tile-board,
  .tm-tile-agents,
  .tm-tile-price,
  .tm-tile-ai,
  .tm-tile-capture,
  .tm-tile-ownership {
    grid-column: 1;
  }

  .tm-tile {
    min-height: 20rem;
  }

  .tm-tile-board,
  .tm-tile-capture {
    min-height: 24rem;
  }

  .tm-tile h3 {
    max-width: 21ch;
    font-size: clamp(1.45rem, 7vw, 1.85rem);
  }

  .tm-tile-shot {
    right: -12%;
    bottom: -7%;
    left: 7%;
  }

  .tm-tile-capture .tm-tile-shot {
    right: -10%;
    bottom: -8%;
    left: 13%;
  }

  .tm-proposals > div {
    grid-template-columns: 1.8rem minmax(0, 1fr) auto;
    gap: 0.48rem;
    padding-inline: 0.4rem;
    font-size: 0.74rem;
  }

  .tm-proposal-icon {
    width: 1.8rem;
    height: 1.8rem;
  }

  .home-tabela .proof-grid article:nth-child(3) {
    border-color: var(--tm-line);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-hero-window::before,
  .tm-hero-window::after,
  .tm-window-tag,
  .tm-tile-shot,
  .tm-receipt,
  .tm-sticker {
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   HERO SLIDESHOW
   Real product screens cycling in place. The slides are stacked on top of each
   other and cross-faded, so the frame never changes size and the page does not
   reflow as it advances.

   The no-JS baseline is the first slide alone: every slide ships in the markup,
   the first carries .is-current, and the rest are only hidden once enhance.js
   takes over. That keeps the hero honest if scripting fails.
--------------------------------------------------------------------------- */
.tm-slideshow {
  position: relative;
}

/* The stage holds the cross-fading slides plus the enhancement overlays
   (cursor, narration, progress). It is the positioning context for all three,
   so they track the screenshot, not the wider hero column. */
.tm-stage {
  position: relative;
}

.tm-slides {
  display: grid;
}

/* Every slide occupies the same grid cell, so the tallest one sets the height
   and the others cross-fade within it. */
.tm-slides > .tm-slide {
  grid-area: 1 / 1;
}

/* Baseline (no JS, or before enhance.js runs): show only the slide that ships
   marked .is-current, so the hero degrades to exactly one clean screenshot
   rather than nine stacked in the same cell. enhance.js then takes over the
   visibility with its own cross-fade rules below. */
.tm-slides > .tm-slide:not(.is-current) {
  opacity: 0;
}

.home-tabela .tm-slideshow .tm-slide {
  border: 1px solid rgba(16, 16, 16, 0.18);
  border-radius: var(--tm-radius);
  box-shadow: var(--tm-shadow);
}

/* Before enhancement, later slides simply stack; enhance.js sets this attribute
   and from then on only the current slide is visible. */
[data-hero-slideshow][data-enhanced] .tm-slide {
  opacity: 0;
  transition: opacity 0.9s ease, transform 0.9s ease;
  transform: scale(1.012);
  pointer-events: none;
}

[data-hero-slideshow][data-enhanced] .tm-slide.is-current {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.tm-slide-caption {
  position: absolute;
  z-index: 3;
  bottom: 0.85rem;
  left: 0.85rem;
  padding: 0.42rem 0.85rem;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 0.5rem 1.4rem rgba(20, 20, 16, 0.12);
  color: var(--tm-ink);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: -0.01em;
}

/* -----------------------------------------------------------------------
   Walkthrough overlays: cursor, narration, progress. All three are inert
   until enhance.js flips [data-enhanced], so the no-JS baseline is a single
   clean screenshot with none of this chrome painted.
----------------------------------------------------------------------- */
.tm-cursor,
.tm-narration,
.tm-progress {
  display: none;
}

[data-hero-slideshow][data-enhanced] .tm-cursor,
[data-hero-slideshow][data-enhanced] .tm-narration,
[data-hero-slideshow][data-enhanced] .tm-progress {
  display: block;
}

/* The faux pointer. It starts at the frame's centre and glides to whichever
   step chip is active, so a still screenshot reads as being worked through. */
.tm-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 1.35rem;
  height: 1.35rem;
  margin: -0.2rem 0 0 -0.2rem;
  pointer-events: none;
  transform: translate(50%, 50%);
  transition: transform 0.85s cubic-bezier(0.4, 0.02, 0.2, 1);
  filter: drop-shadow(0 0.15rem 0.35rem rgba(20, 20, 16, 0.35));
}

.tm-cursor::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border: 1.5px solid rgba(16, 16, 16, 0.75);
  /* An arrow pointer silhouette. */
  clip-path: polygon(0 0, 0 78%, 24% 58%, 44% 100%, 60% 92%, 40% 52%, 74% 50%);
}

/* The narration line. It sits above the step rail and reads like a caption a
   presenter would say out loud as the screen changes. It carries its own light
   pill so it stays legible whether it lands on the cream page or over the dark
   laptop-base decoration that bleeds below the window. */
.tm-narration {
  position: relative;
  z-index: 4;
  display: inline-block;
  margin: 1.1rem 0 0;
  padding: 0.45rem 0.85rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 0.5rem 1.4rem rgba(20, 20, 16, 0.12);
  color: var(--tm-ink);
  font-size: 0.92rem;
  font-weight: 650;
  line-height: 1.35;
  letter-spacing: -0.01em;
  opacity: 0;
  transform: translateY(0.35rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tm-narration.is-shown {
  opacity: 1;
  transform: none;
}

/* A per-slide progress bar. It fills once across a dwell, so the auto-advance
   is legible rather than a jump-cut a visitor cannot anticipate. */
.tm-progress {
  position: relative;
  height: 0.28rem;
  margin-top: 0.85rem;
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.1);
  overflow: hidden;
}

.tm-progress-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--tm-lime-deep);
  transform: scaleX(0);
  transform-origin: left center;
}

/* -----------------------------------------------------------------------
   Step rail. It reads as a workflow pipeline (Start → Capture → Write → …)
   and doubles as the control: each chip jumps to its stage. On no-JS it is
   still a labelled list of what the product does.
----------------------------------------------------------------------- */
.tm-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 1.35rem 0 0;
  padding: 0;
  list-style: none;
}

.tm-steps > li {
  display: flex;
  flex: 1 1 auto;
}

.tm-step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(16, 16, 16, 0.12);
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.7);
  color: var(--tm-ink);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 750;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.tm-step-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  border-radius: 999px;
  background: rgba(16, 16, 16, 0.1);
  color: var(--tm-ink);
  font-size: 0.72rem;
  font-weight: 850;
  transition: background 0.3s ease, color 0.3s ease;
}

.tm-step:hover {
  border-color: rgba(16, 16, 16, 0.28);
  background: #fff;
}

.tm-step.is-done .tm-step-index {
  background: rgba(16, 16, 16, 0.8);
  color: #fff;
}

.tm-step.is-current {
  border-color: var(--tm-lime-deep);
  background: var(--tm-lime);
  box-shadow: 0 0.55rem 1.4rem rgba(20, 20, 16, 0.14);
  transform: translateY(-1px);
}

.tm-step.is-current .tm-step-index {
  background: var(--tm-ink);
  color: #fff;
}

.tm-step:focus-visible {
  outline: 2px solid var(--tm-ink);
  outline-offset: 2px;
}

/* On a phone the rail becomes a horizontal filmstrip: still tappable, but it
   never wraps into a tall stack that crowds out the screenshot. */
@media (max-width: 46rem) {
  .tm-steps {
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin-top: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tm-steps::-webkit-scrollbar {
    display: none;
  }

  .tm-steps > li {
    flex: 0 0 auto;
  }

  .tm-step {
    font-size: 0.74rem;
    min-height: 2.25rem;
    padding: 0.42rem 0.6rem;
  }

  /* The narration and cursor rely on a pointer and on precise layout that a
     phone column does not give; keep the workflow legible without them. The
     [data-enhanced] guard matches the specificity that turned them on. */
  [data-hero-slideshow][data-enhanced] .tm-narration,
  [data-hero-slideshow][data-enhanced] .tm-cursor {
    display: none;
  }

  /* The decorative price sticker would land on the step rail in the shorter
     phone window; the $29 line in the hero details already carries the price. */
  .tm-window-tag-price {
    display: none;
  }

  /* The caption overlays the screenshot rather than sitting under it, so the
     slideshow costs the phone layout no extra height beyond the image itself. */
  .tm-slide-caption {
    bottom: 0.5rem;
    left: 0.5rem;
    padding: 0.3rem 0.6rem;
    font-size: 0.68rem;
  }
}

/* Motion is the whole point of this component, so when motion is unwelcome it
   becomes a single static screenshot with a readable, non-animating rail. */
@media (prefers-reduced-motion: reduce) {
  [data-hero-slideshow][data-enhanced] .tm-slide {
    transition: none;
    transform: none;
  }

  .tm-cursor {
    display: none;
  }

  .tm-narration {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .tm-progress-fill {
    transition: none;
  }

  .tm-step {
    transition: none;
  }
}

/* -----------------------------------------------------------------------
   Full-day story. The five scenes make the product's connected operating
   loop concrete without inventing a second interface. No JavaScript shows
   every scene in sequence; the small progressive enhancement turns the time
   rail into an accessible tab set.
----------------------------------------------------------------------- */
.tm-day-story {
  padding: 0 0 clamp(4.8rem, 8vw, 8rem);
}

.tm-day-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.55fr);
  gap: 2rem clamp(2rem, 6vw, 5.5rem);
  align-items: end;
  margin-bottom: 2rem;
}

.tm-day-heading h2 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.35rem, 4.7vw, 4.45rem);
  letter-spacing: -0.052em;
}

.tm-day-intro > p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.58;
}

.tm-day-intro-note {
  margin-top: 1rem !important;
  padding-left: 1rem;
  border-left: 0.28rem solid var(--tm-lime-deep);
  font-size: 0.85rem !important;
}

.tm-day-tabs {
  display: none;
}

.tm-day-story.is-enhanced .tm-day-tabs {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.55rem;
  margin: 0 0 0.8rem;
  padding: 0.55rem;
  border: 1px solid var(--tm-line);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.6);
}

.tm-day-story.is-enhanced .tm-day-tabs::before {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 8%;
  left: 8%;
  height: 1px;
  background: rgba(16, 16, 16, 0.13);
  content: "";
}

.tm-day-tabs button {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 4.2rem;
  place-content: center;
  gap: 0.05rem;
  padding: 0.55rem;
  border: 1px solid transparent;
  border-radius: 0.72rem;
  background: var(--tm-paper);
  color: var(--tm-ink);
  font: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tm-day-tabs button span {
  color: #74746e;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.045em;
}

.tm-day-tabs button strong {
  font-size: 0.88rem;
}

.tm-day-tabs button:hover {
  border-color: rgba(16, 16, 16, 0.22);
  background: #fff;
}

.tm-day-tabs button.is-current,
.tm-day-tabs button[aria-selected="true"] {
  border-color: var(--tm-dark);
  background: var(--tm-dark);
  box-shadow: 0 0.7rem 1.6rem rgba(16, 16, 16, 0.16);
  transform: translateY(-1px);
}

.tm-day-tabs button.is-current span,
.tm-day-tabs button.is-current strong,
.tm-day-tabs button[aria-selected="true"] span,
.tm-day-tabs button[aria-selected="true"] strong {
  color: #fff;
}

.tm-day-panels {
  display: grid;
  gap: 1rem;
}

.tm-day-panel {
  display: grid;
  grid-template-columns: minmax(19rem, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.7rem, 4vw, 4rem);
  align-items: center;
  min-height: 36rem;
  padding: clamp(1.3rem, 3vw, 2.5rem);
  border: 1px solid rgba(16, 16, 16, 0.08);
  border-radius: var(--tm-radius);
  background:
    radial-gradient(circle at 88% 5%, rgba(230, 255, 0, 0.26), transparent 15rem),
    var(--tm-paper-soft);
  overflow: hidden;
}

.tm-day-story.is-enhanced .tm-day-panel[hidden] {
  display: none;
}

.tm-day-story.is-enhanced .tm-day-panel.is-current {
  animation: tm-day-panel-in 260ms ease-out both;
}

@keyframes tm-day-panel-in {
  from {
    opacity: 0;
    transform: translateY(0.55rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.tm-day-copy {
  padding: clamp(0.3rem, 1.2vw, 1rem);
}

.tm-day-time {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
  color: #5f5f59 !important;
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.tm-day-time span {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  padding: 0 0.65rem;
  border-radius: 999px;
  background: var(--tm-dark);
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.035em;
}

.tm-day-copy h3 {
  max-width: 14ch;
  margin: 0 0 0.85rem;
  font-size: clamp(2rem, 3.2vw, 3.35rem);
  letter-spacing: -0.048em;
  line-height: 0.99;
}

.tm-day-copy > p:not(.tm-day-time, .tm-day-outcome) {
  max-width: 35rem;
  font-size: 0.98rem;
  line-height: 1.58;
}

.tm-day-flow {
  display: grid;
  gap: 0.42rem;
  margin: 1.55rem 0;
  padding: 0;
  list-style: none;
}

.tm-day-flow li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.7rem;
  align-items: start;
  padding: 0.7rem;
  border: 1px solid rgba(16, 16, 16, 0.08);
  border-radius: 0.72rem;
  background: rgba(255, 255, 255, 0.58);
}

.tm-day-flow li > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border: 1px solid rgba(16, 16, 16, 0.13);
  border-radius: 50%;
  background: #fff;
  color: #777771;
  font-size: 0.7rem;
  font-weight: 850;
}

.tm-day-flow li.is-done > span {
  border-color: var(--tm-dark);
  background: var(--tm-dark);
  color: #fff;
}

.tm-day-flow li.is-current {
  border-color: rgba(198, 216, 18, 0.72);
  background: rgba(230, 255, 0, 0.24);
}

.tm-day-flow li.is-current > span {
  border-color: var(--tm-lime-deep);
  background: var(--tm-lime);
  color: var(--tm-ink);
}

.tm-day-flow strong,
.tm-day-flow small {
  display: block;
}

.tm-day-flow strong {
  margin-bottom: 0.08rem;
  color: var(--tm-ink);
  font-size: 0.82rem;
}

.tm-day-flow small {
  color: #696963;
  font-size: 0.72rem;
  line-height: 1.4;
}

.tm-day-outcome {
  display: grid;
  gap: 0.12rem;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(16, 16, 16, 0.12);
}

.tm-day-outcome span {
  color: #72726c;
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.tm-day-outcome strong {
  max-width: 31rem;
  font-size: 0.91rem;
  line-height: 1.42;
}

.tm-day-visual {
  position: relative;
  min-width: 0;
  padding: 1.5rem 0.2rem 2.2rem;
}

.tm-day-visual::before {
  position: absolute;
  top: -5%;
  right: -8%;
  width: 14rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--tm-lime);
  opacity: 0.52;
  content: "";
}

.tm-day-shot {
  position: relative;
  z-index: 1;
  margin: 0;
  transform: rotate(1deg);
  border: 1px solid rgba(16, 16, 16, 0.18);
  border-radius: 1.05rem;
  background: #fff;
  box-shadow: 0 1.7rem 4rem rgba(20, 20, 16, 0.18);
  overflow: hidden;
}

.tm-day-shot::before {
  display: block;
  height: 1.85rem;
  background:
    radial-gradient(circle at 1rem 50%, #ff5f57 0.24rem, transparent 0.26rem),
    radial-gradient(circle at 1.85rem 50%, #febc2e 0.24rem, transparent 0.26rem),
    radial-gradient(circle at 2.7rem 50%, #28c840 0.24rem, transparent 0.26rem),
    #f3f3ef;
  content: "";
}

.tm-day-shot img {
  display: block;
  width: 100%;
  height: auto;
}

.tm-day-receipt,
.tm-day-approval,
.tm-day-status {
  position: absolute;
  z-index: 2;
  right: -0.6rem;
  bottom: -0.25rem;
  width: min(14rem, 46%);
  margin: 0;
  padding: 0.85rem;
  transform: rotate(-2deg);
  border: 1px solid rgba(16, 16, 16, 0.11);
  border-radius: 0.65rem;
  background: var(--tm-dark);
  box-shadow: 0 1rem 2.4rem rgba(16, 16, 16, 0.24);
  color: #fff;
}

.tm-day-receipt p {
  margin: 0 0 0.55rem;
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tm-day-receipt div {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.18rem 0;
  color: #d6d6d0;
  font-size: 0.68rem;
}

.tm-day-receipt b {
  color: #fff;
}

.tm-day-receipt-light,
.tm-day-receipt-close {
  background: #fff;
  color: var(--tm-ink);
}

.tm-day-receipt-light p,
.tm-day-receipt-light b,
.tm-day-receipt-close p,
.tm-day-receipt-close b {
  color: var(--tm-ink);
}

.tm-day-receipt-light div,
.tm-day-receipt-close div {
  color: #686862;
}

.tm-day-approval {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: 0.6rem;
  align-items: center;
  width: min(20rem, 64%);
  transform: rotate(-1deg);
  background: #fff;
  color: var(--tm-ink);
}

.tm-day-approval > span {
  display: grid;
  width: 2rem;
  height: 2rem;
  place-items: center;
  border-radius: 50%;
  background: var(--tm-lime);
  font-weight: 850;
}

.tm-day-approval small,
.tm-day-approval strong {
  display: block;
}

.tm-day-approval small {
  color: #72726c;
  font-size: 0.6rem;
}

.tm-day-approval strong {
  font-size: 0.75rem;
}

.tm-day-approval > b {
  padding: 0.28rem 0.52rem;
  border-radius: 999px;
  background: var(--tm-dark);
  color: #fff;
  font-size: 0.61rem;
}

.tm-day-status {
  display: grid;
  gap: 0.36rem;
  padding: 0.65rem;
  list-style: none;
  background: #fff;
}

.tm-day-status li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.55rem;
  border-radius: 0.45rem;
  background: #f1f1eb;
  color: #5e5e58;
  font-size: 0.66rem;
}

.tm-day-status b {
  color: var(--tm-ink);
}

.tm-day-status li:nth-child(2) {
  background: var(--tm-lime);
}

.tm-day-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1rem;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--tm-line);
  border-radius: 1rem;
  background: #fff;
}

.tm-day-cta > p {
  max-width: 48rem;
  margin: 0;
  font-size: 0.88rem;
}

.tm-day-cta .action-row {
  flex: none;
}

.tm-day-cta .button {
  min-height: 2.7rem;
  padding-inline: 1rem;
  font-size: 0.8rem;
}

@media (max-width: 64rem) {
  .tm-day-heading,
  .tm-day-panel {
    grid-template-columns: 1fr;
  }

  .tm-day-heading h2 {
    max-width: 20ch;
  }

  .tm-day-intro {
    max-width: 44rem;
  }

  .tm-day-panel {
    min-height: 0;
  }

  .tm-day-copy h3 {
    max-width: 19ch;
  }

  .tm-day-copy > p:not(.tm-day-time, .tm-day-outcome) {
    max-width: 48rem;
  }

  .tm-day-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .tm-day-flow li {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 46rem) {
  .tm-day-story {
    padding-bottom: 4.5rem;
  }

  .tm-day-heading {
    gap: 1.35rem;
  }

  .tm-day-heading h2 {
    font-size: clamp(2.1rem, 11vw, 3.2rem);
  }

  .tm-day-story.is-enhanced .tm-day-tabs {
    grid-template-columns: repeat(5, minmax(5rem, 1fr));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .tm-day-story.is-enhanced .tm-day-tabs::-webkit-scrollbar {
    display: none;
  }

  .tm-day-story.is-enhanced .tm-day-tabs::before {
    display: none;
  }

  .tm-day-tabs button {
    min-height: 3.75rem;
  }

  .tm-day-panel {
    gap: 1rem;
    padding: 1rem;
  }

  .tm-day-copy {
    padding: 0.25rem;
  }

  .tm-day-copy h3 {
    font-size: clamp(1.9rem, 9.5vw, 2.7rem);
  }

  .tm-day-flow {
    grid-template-columns: 1fr;
  }

  .tm-day-flow li {
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .tm-day-visual {
    padding: 0.6rem 0 3.5rem;
  }

  .tm-day-shot {
    transform: none;
  }

  .tm-day-shot::before {
    height: 1.55rem;
  }

  .tm-day-receipt,
  .tm-day-approval,
  .tm-day-status {
    right: 0.4rem;
    bottom: 0;
    width: min(15rem, 76%);
  }

  .tm-day-approval {
    width: min(19rem, 90%);
  }

  .tm-day-cta {
    display: grid;
    align-items: start;
  }

  .tm-day-cta .action-row {
    width: 100%;
  }

  .tm-day-cta .button {
    flex: 1 1 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tm-day-tabs button {
    transition: none;
  }

  .tm-day-story.is-enhanced .tm-day-panel.is-current {
    animation: none;
  }
}

@media print {
  .tm-day-tabs {
    display: none !important;
  }

  .tm-day-story.is-enhanced .tm-day-panel[hidden] {
    display: grid;
  }

  .tm-day-panel {
    break-inside: avoid;
  }
}