/* ==========================================================================
   The Ideal Card — 2026-11 design: homepage inline styles, part A
   The prototype's inline style="" attributes for the sections from SHOP THE
   RANGE to TRANSIT (resources/views/marketing/partials/home/*.blade.php),
   moved into classes with their values verbatim (var(--x) → var(--tc-x)).
   Where an extracted design rule sets the same property, the class is
   compounded so it still wins, as the inline style did. The prototype's
   light-theme / small-screen patches keyed on [style*="…"] are re-created
   against these classes. Load after home-sections.css.
   ========================================================================== */

/* ---------- Shared section shells ---------- */
.tc-block.tc-shop-section {
  padding-top: 64px;
  position: relative;
  z-index: 3;
  background: var(--tc-canvas);
}
.tc-cat-section,
.tc-wild-section,
.tc-transit-section {
  position: relative;
  z-index: 3;
}
.tc-modes-section,
.tc-showcase-section,
.tc-analytics-section {
  border-top: 1px solid var(--tc-line);
}
.tc-h2.tc-value-h2,
.tc-h2.tc-how-h2,
.tc-h2.tc-modes-h2,
.tc-h2.tc-showcase-h2,
.tc-h2.tc-analytics-h2,
.tc-h2.tc-eco-h2,
.tc-h2.tc-wild-h2,
.tc-h2.tc-transit-h2 {
  margin-top: 8px;
}
.tc-value-head.tc-value-head-c,
.tc-how-head.tc-how-head-c,
.tc-eco-head.tc-eco-head-c {
  text-align: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.tc-modes-head,
.tc-showcase-head,
.tc-analytics-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 56px;
}
.tc-lede.tc-modes-lede,
.tc-lede.tc-analytics-lede {
  margin: 24px auto 0;
}
.tc-shop-more,
.tc-wild-more {
  text-align: center;
  margin-top: 40px;
}

/* ---------- SHOP THE RANGE / SHOP BY CATEGORY ---------- */
.tc-shop-head .tc-section-label.tc-shop-label {
  text-align: left;
  margin-bottom: 12px;
}
.tc-shop-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 8px 0 32px;
}
.tc-shop-chip {
  cursor: pointer;
}
/* Active chip: the prototype wrote these inline (markup + filter script). */
.tc-pill-kicker.tc-shop-chip.tc-active {
  background: var(--tc-ink);
  color: var(--tc-canvas);
  border-color: var(--tc-ink);
}
.tc-product-card .tc-p-tag.tc-p-tag-soon {
  background: color-mix(in srgb, var(--tc-pop) 15%, var(--tc-canvas-2));
  color: var(--tc-pop);
  border: 1px solid color-mix(in srgb, var(--tc-pop) 30%, var(--tc-line));
}
[data-theme="light"] .tc-p-tag-soon {
  color: #3f6212 !important;
}

/* ---------- SIDE-FRAME ---------- */
.tc-block.tc-sf-section {
  padding-top: clamp(80px, 10vw, 128px);
  padding-bottom: clamp(80px, 10vw, 128px);
}
.tc-sf-device-inner {
  position: relative;
  display: inline-block;
}
.tc-phone.tc-sf-phone {
  max-width: 240px;
}
.tc-phone-content.tc-sf-content {
  padding: 30px 16px 14px;
}
.tc-phone-content .tc-p-avatar.tc-sf-avatar {
  background: linear-gradient(135deg, var(--tc-pop), #a3d43e);
  width: 40px;
  height: 40px;
}
.tc-phone-content .tc-p-name.tc-sf-name {
  font-size: 12px;
}
.tc-phone-content .tc-p-handle.tc-sf-handle {
  font-size: 10px;
}
.tc-phone-content .tc-p-btn.tc-sf-btn-first {
  margin-top: 8px;
}
.tc-phone-content .tc-p-btn.tc-sf-save {
  background: var(--tc-accent);
  color: var(--tc-ink);
  border-color: var(--tc-accent);
  text-align: center;
  font-weight: 600;
}

/* ---------- ICON-LINE-BLOCK ---------- */
.tc-block-lg.tc-il-section {
  padding-top: clamp(80px, 10vw, 140px);
  padding-bottom: clamp(80px, 10vw, 140px);
  position: relative;
  overflow: hidden;
}
.tc-il-numeral {
  top: -80px;
  right: -40px;
}
.tc-il-orb {
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--tc-accent) 0%, transparent 65%);
  top: -120px;
  left: -140px;
}
.tc-il-seed {
  margin: clamp(72px, 10vw, 128px) auto 0;
  display: flex;
  justify-content: center;
}

/* ---------- VALUE CARDS ---------- */
.tc-value-section {
  position: relative;
  overflow: hidden;
}
.tc-value-orb {
  width: 640px;
  height: 640px;
  background: radial-gradient(circle, var(--tc-accent-deep) 0%, transparent 60%);
  bottom: -180px;
  right: -180px;
}
.tc-value-ray {
  top: 20%;
  left: -50%;
}
.tc-lede.tc-value-lede {
  margin: 40px auto 0;
  text-align: center;
}

/* ---------- HOW IT WORKS ---------- */
.tc-phone-content.tc-how-pc-center {
  justify-content: center;
}
.tc-how-center {
  text-align: center;
}
.tc-how-s1-label {
  font-family: var(--tc-font-mono);
  font-size: 9px;
  color: var(--tc-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  margin-bottom: 12px;
}
.tc-how-s1-title {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--tc-ink);
  letter-spacing: -0.02em;
}
.tc-how-s1-bar {
  width: 24px;
  height: 2px;
  background: var(--tc-accent);
  margin: 8px auto;
}
.tc-how-ring {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
  border: 1.5px solid var(--tc-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tc-how-ring-inner {
  width: 32px;
  height: 32px;
  border: 1.5px solid var(--tc-accent);
  border-radius: 50%;
  opacity: 0.5;
}
.tc-how-s3-title {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 11px;
  color: var(--tc-ink);
  margin-bottom: 4px;
}
.tc-how-s3-sub {
  font-family: var(--tc-font-mono);
  font-size: 8px;
  color: var(--tc-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tc-phone-content.tc-how-pc-s4 {
  padding: 24px 12px 12px;
}
.tc-how-s4-label {
  font-family: var(--tc-font-mono);
  font-size: 8px;
  color: var(--tc-ink-3);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}
.tc-how-s4-value {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--tc-ink);
  letter-spacing: -0.02em;
  margin-bottom: 12px;
}
.tc-how-bars {
  display: flex;
  align-items: end;
  gap: 3px;
  height: 44px;
}
/* Bars stay class-less <span>s, as in the prototype. */
.tc-how-bars > span {
  flex: 1;
  background: var(--tc-accent);
  border-radius: 2px;
}
.tc-how-bars > span:nth-child(1) {
  opacity: 0.35;
  height: 40%;
}
.tc-how-bars > span:nth-child(2) {
  opacity: 0.5;
  height: 65%;
}
.tc-how-bars > span:nth-child(3) {
  opacity: 0.4;
  height: 50%;
}
.tc-how-bars > span:nth-child(4) {
  opacity: 0.75;
  height: 88%;
}
.tc-how-bars > span:nth-child(5) {
  opacity: 0.6;
  height: 72%;
}
.tc-how-bars > span:nth-child(6) {
  opacity: 0.9;
  height: 100%;
}
.tc-how-bars > span:nth-child(7) {
  opacity: 0.55;
  height: 60%;
}
.tc-how-strip {
  border-top: 1px solid var(--tc-line);
  margin-top: 72px;
  padding-top: 48px;
}
.tc-how-strip-head {
  text-align: center;
  margin-bottom: 32px;
}
.tc-how-strip-h3 {
  margin-top: 12px;
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.02em;
}
.tc-how-moves {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: stretch;
}
.tc-how-move {
  padding: 20px 16px;
  border: 1px solid var(--tc-line);
  border-radius: 12px;
  text-align: center;
}
.tc-how-move-num {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.tc-how-move-t {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.tc-how-move-d {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-ink-3);
  margin-top: 6px;
}

/* ---------- TEN MODES ---------- */
.tc-modes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1px;
  background: var(--tc-line);
  border: 1px solid var(--tc-line);
  border-radius: 16px;
  overflow: hidden;
}
.tc-modes-cell {
  background: var(--tc-canvas);
  padding: 28px 24px;
}
.tc-modes-num {
  font-family: var(--tc-font-mono);
  font-size: 10px;
  color: var(--tc-accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.tc-modes-name {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin-top: 8px;
}
.tc-modes-desc {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-ink-3);
  margin-top: 6px;
  line-height: 1.5;
}

/* ---------- PROFILE SHOWCASE ---------- */
.tc-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
/* Compounded: the inline transition beat .tc-fx-stagger > *. */
.tc-showcase-grid .tc-showcase-card {
  text-decoration: none;
  color: inherit;
  display: block;
  border: 1px solid var(--tc-line);
  border-radius: 20px;
  padding: 32px 28px;
  background: var(--tc-card, var(--tc-canvas));
  transition: border-color 200ms ease;
}
.tc-showcase-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}
.tc-showcase-avatar-1 {
  background: linear-gradient(135deg, #6744da, #c7ff3b);
}
.tc-showcase-avatar-2 {
  background: linear-gradient(135deg, #c7ff3b, #6744da);
}
.tc-showcase-avatar-3 {
  background: linear-gradient(135deg, #6744da, #241663);
}
.tc-showcase-name {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.tc-showcase-role {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-ink-2);
  margin-top: 4px;
}
.tc-showcase-handle {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-accent);
  margin-top: 14px;
}

/* ---------- ANALYTICS PREVIEW ---------- */
.tc-analytics-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}
.tc-analytics-stat {
  padding: 24px;
  border: 1px solid var(--tc-line);
  border-radius: 14px;
}
.tc-analytics-label {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-ink-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tc-analytics-value {
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.02em;
  margin-top: 8px;
}
.tc-analytics-delta {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-pop);
  margin-top: 4px;
}
[data-theme="light"] .tc-analytics-delta {
  color: #3f6212 !important;
}
.tc-analytics-delta-muted {
  font-family: var(--tc-font-mono);
  font-size: 12px;
  color: var(--tc-ink-2);
  margin-top: 4px;
}
.tc-analytics-panel {
  padding: 32px;
  border: 1px solid var(--tc-line);
  border-radius: 14px;
}
.tc-analytics-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 20px;
}
.tc-analytics-range {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  color: var(--tc-ink-3);
}
.tc-analytics-devices {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
/* Label + percentage stay class-less <span>s, as in the prototype. */
.tc-analytics-device-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--tc-font-display);
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
}
.tc-analytics-track {
  height: 8px;
  background: var(--tc-line);
  border-radius: 4px;
  overflow: hidden;
}
.tc-analytics-fill {
  height: 100%;
  border-radius: 4px;
}
.tc-analytics-fill-iphone {
  width: 44%;
  background: var(--tc-accent);
}
.tc-analytics-fill-android {
  width: 26%;
  background: var(--tc-accent);
  opacity: 0.75;
}
.tc-analytics-fill-qr {
  width: 20%;
  background: var(--tc-pop);
}
.tc-analytics-fill-other {
  width: 10%;
  background: var(--tc-ink-3);
}

/* ---------- THEMES MARQUEE ---------- */
.tc-wrap.tc-themes-head {
  text-align: center;
  margin-bottom: 32px;
}
.tc-section-label.tc-themes-label {
  color: var(--tc-accent);
}
.tc-marquee-track.tc-themes-track {
  animation-duration: 55s;
}

/* ---------- ECOSYSTEM ---------- */
.tc-lede.tc-eco-lede {
  margin-top: 24px;
  margin-left: auto;
  margin-right: auto;
}
.tc-eco-card .tc-e-name.tc-eco-name {
  margin-top: 8px;
}
/* Pre-reveal pose; the reveal script swaps in data-target-transform.
   Compounded to beat .tc-eco-bio etc. and .tc-fx.tc-on (inline did). The
   prototype's inline opacity:0 also beat .tc-eco-card.tc-fx-eco.tc-on, which
   left the cards invisible forever; it is kept here at a specificity that
   lets the .tc-on reveal win, as that rule intends. */
.tc-eco-stage .tc-eco-card.tc-eco-start {
  transform: rotate(0) translate(0, 60px);
}
.tc-eco-card.tc-eco-start {
  opacity: 0;
}

/* ---------- PULL QUOTE ---------- */
.tc-serif.tc-quote-accent {
  color: var(--tc-accent);
}

/* ---------- TRANSIT ---------- */
.tc-ugc-head.tc-transit-head {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.tc-transit-lede {
  margin: 18px auto 0;
  max-width: 640px;
  color: var(--tc-ink-2);
  font-size: 17px;
  line-height: 1.55;
}
.tc-transit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 44px;
}
.tc-transit-card {
  padding: 28px;
  border: 1px solid var(--tc-line);
  border-radius: 18px;
  background: var(--tc-card);
}
.tc-transit-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tc-accent) 12%, transparent);
  color: var(--tc-accent);
  margin-bottom: 18px;
}
.tc-transit-icon.tc-transit-icon-pop {
  background: color-mix(in srgb, var(--tc-pop) 14%, transparent);
  color: var(--tc-pop);
}
[data-theme="light"] .tc-transit-icon-pop {
  color: #3f6212 !important;
}
.tc-transit-title {
  font-weight: 600;
  font-size: 17px;
  margin-bottom: 6px;
}
.tc-transit-sub {
  font-family: var(--tc-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--tc-ink-3);
  text-transform: uppercase;
}
.tc-transit-note {
  text-align: center;
  margin-top: 32px;
  font-family: var(--tc-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  color: var(--tc-ink-3);
  text-transform: uppercase;
}

/* ---------- Small screens (prototype patched these inline grids by [style*]) ---------- */
@media (max-width: 600px) {
  .tc-how-moves {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tc-analytics-devices {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .tc-modes-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 400px) {
  .tc-how-moves {
    grid-template-columns: 1fr !important;
  }
  .tc-modes-grid {
    grid-template-columns: 1fr !important;
  }
}