/* Toasty Answers — homepage experience.
 *
 * Two layers in every section:
 *   1. A complete static layout that works with JavaScript off and with
 *      prefers-reduced-motion. This is the default.
 *   2. Enhanced states, keyed on classes JavaScript adds only once it is
 *      running: `.ta-x-motion` on <html>, `.is-enhanced` on the journey.
 * If a script fails to load, the page stays on layer 1 rather than being
 * left half-hidden. Nothing starts invisible unless something is
 * guaranteed to reveal it.
 */

/* Re-declared so the Site Editor preview, which does not get the theme's
   :root, still has the palette. */
:root, .editor-styles-wrapper {
  --ta-paper: #FBF7F1; --ta-card: #FFFFFF; --ta-wash: #F2ECE3;
  --ta-ink: #1A1714; --ta-soot: #12100E;
  --ta-signal: #00A99A; --ta-deep: #00756B; --ta-glow: #5FD4C8; --ta-spark: #FF5C7A;
  --ta-rule: #E4DCD2; --ta-muted: #6B625A;
  --ta-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Kill WordPress's block gap between sections, but only BETWEEN them. An
   earlier `.ta-x-home > * { margin-block: 0 !important }` also flattened the
   hero's negative top margin, so the hero never slid under the header -- the
   bar floated over paper and never switched to its dark state. */
.ta-x-home > * + * { margin-block-start: 0 !important; }
.ta-x-home > * { margin-block-end: 0 !important; }

.ta-x-wrap { width: min(1140px, 100% - 2.5rem); margin-inline: auto; }

/* Safety net against sideways scrolling on phones. `clip`, not `hidden`:
   overflow-x:hidden makes the element a scroll container, which silently
   breaks position:sticky -- and the packet journey is built on sticky.
   This is a backstop, not the fix; the overflow it was added for (a
   non-breaking space welding two words into one 430px string) was fixed at
   the source. */
.ta-x-home { overflow-x: clip; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- shared type */

.ta-x-eyebrow {
  font: 600 .8125rem/1 Poppins, system-ui, sans-serif;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ta-deep); margin: 0 0 1.1rem;
}
[data-theme="dark"] .ta-x-eyebrow { color: var(--ta-glow); }

.ta-x-btn {
  display: inline-flex; align-items: center;
  background: var(--ta-signal); color: #04302B;
  font: 600 1.0625rem/1 Poppins, system-ui, sans-serif;
  padding: 1rem 1.7rem; border-radius: 999px; text-decoration: none;
  transition: transform .25s var(--ta-ease), background .25s ease, box-shadow .25s ease;
}
.ta-x-btn:hover { background: #17C2B2; transform: translateY(-2px); box-shadow: 0 14px 34px -12px rgba(0,169,154,.7); color: #04302B; }

.ta-x-more { color: var(--ta-deep); font-weight: 600; text-decoration: none; font-size: 1.0625rem; }
.ta-x-more:hover { text-decoration: underline; text-underline-offset: 3px; }
[data-theme="dark"] .ta-x-more { color: var(--ta-glow); }

.ta-x-sechead { margin-bottom: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
.ta-x-sechead h2 {
  font: 700 clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem)/.98 Poppins, system-ui, sans-serif;
  letter-spacing: -.045em; margin: 0; color: var(--ta-ink);
}
.ta-x-sechead p:not(.ta-x-eyebrow) {
  color: var(--ta-muted); font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem);
  max-width: 44ch; margin: 1.2rem 0 0; line-height: 1.5;
}
.ta-x-sechead--center { text-align: center; }
.ta-x-sechead--center p:not(.ta-x-eyebrow) { margin-inline: auto; }

/* ------------------------------------------------------------ reveal motion */

.ta-x-motion .ta-x-reveal:not(.is-in) { opacity: 0; transform: translateY(30px); }
.ta-x-motion .ta-x-reveal {
  transition: opacity 1s var(--ta-ease), transform 1s var(--ta-ease);
}
.ta-x-hero .ta-x-reveal:nth-child(2) { transition-delay: .08s; }
.ta-x-hero .ta-x-reveal:nth-child(3) { transition-delay: .2s; }
.ta-x-hero .ta-x-reveal:nth-child(4) { transition-delay: .3s; }
.ta-x-hero .ta-x-reveal:nth-child(5) { transition-delay: .42s; }

/* =========================================================================
   HERO
   ========================================================================= */

.ta-x-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  /* Slides up under the sticky header so the translucent bar sits on the
     dark scene instead of on a strip of paper. */
  padding: calc(var(--ta-header-h, 58px) + 3rem) 1.25rem 5.5rem;
  display: grid; place-items: center; text-align: center;
  background: var(--ta-soot); color: #F4EFE8;
}
.ta-x-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(0,169,154,.22) 0%, transparent 70%),
    radial-gradient(45% 40% at 85% 95%, rgba(255,92,122,.14) 0%, transparent 70%);
}
.ta-x-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; }
.ta-x-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 60% at 50% 46%, rgba(18,16,14,.6) 0%, rgba(18,16,14,0) 60%, rgba(18,16,14,.55) 100%);
}
.ta-x-hero__inner { position: relative; max-width: 1040px; }
/* Specific, and !important, because WordPress's layout CSS for the parent
   group also sets margins on its children and its stylesheet order is not
   something this file controls. */
.ta-x-home > .ta-x-hero { margin-top: calc(-1 * var(--ta-header-h, 58px)) !important; }

.ta-x-hero__title {
  font: 700 clamp(2.5rem, .9rem + 9.6vw, 9.2rem)/.9 Poppins, system-ui, sans-serif;
  letter-spacing: -.055em; margin: 0 0 1.8rem; color: #FBF7F1;
}
.ta-x-line { display: block; }
.ta-x-grad {
  background: linear-gradient(100deg, #5FD4C8 0%, #00A99A 30%, #FF5C7A 70%, #5FD4C8 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .1em;
  animation: ta-x-shimmer 9s ease-in-out infinite alternate;
}
@keyframes ta-x-shimmer { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

.ta-x-hero__sub {
  font-size: clamp(1.15rem, 1rem + .7vw, 1.55rem); line-height: 1.5;
  color: #B4ACA2; max-width: 38ch; margin: 0 auto 2.4rem;
}
.ta-x-hero__sub em { font-style: normal; color: #FBF7F1; }
.ta-x-hero__cta { display: flex; gap: 1.9rem; justify-content: center; align-items: center; flex-wrap: wrap; }

.ta-x-hero__stats {
  list-style: none; padding: 0; margin: 3rem 0 0;
  display: flex; gap: clamp(2rem, 1rem + 5vw, 5rem); justify-content: center;
}
.ta-x-hero__stats b {
  display: block; font: 600 clamp(2rem, 1.5rem + 1.8vw, 3rem)/1 Poppins, system-ui, sans-serif;
  letter-spacing: -.04em; color: #FBF7F1; font-variant-numeric: tabular-nums;
}
.ta-x-hero__stats span {
  display: block; margin-top: .5rem;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: #7E766D;
}

.ta-x-cue {
  position: absolute; left: 50%; bottom: 1.8rem; translate: -50% 0;
  width: 26px; height: 42px; border: 2px solid rgba(251,247,241,.3); border-radius: 14px;
}
.ta-x-cue i {
  position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--ta-glow);
  animation: ta-x-cue 1.9s var(--ta-ease) infinite;
}
@keyframes ta-x-cue { 0% { transform: translateY(0); opacity: 1; } 75% { transform: translateY(15px); opacity: 0; } 100% { opacity: 0; } }

/* =========================================================================
   STATEMENT
   ========================================================================= */

.ta-x-statement { background: var(--ta-paper); padding: clamp(7rem, 4rem + 12vw, 14rem) 0; }
.ta-x-statement__text {
  font: 600 clamp(2.1rem, 1.1rem + 3.9vw, 4.6rem)/1.1 Poppins, system-ui, sans-serif;
  letter-spacing: -.04em; color: var(--ta-ink); margin: 0; max-width: 15.5em;
}
/* Words are only split, and only dimmed, when motion is allowed and the
   script is running. Otherwise the sentence is just there, in full ink. */
.ta-x-w { transition: opacity .2s linear; }

/* =========================================================================
   THE PACKET JOURNEY
   ========================================================================= */

.ta-x-journey { position: relative; background: var(--ta-soot); color: #E9E4DC; }
.ta-x-journey__head { padding: clamp(5.5rem, 3rem + 7vw, 9rem) 0 3rem; text-align: center; }
.ta-x-journey__head h2 {
  font: 700 clamp(2.6rem, 1.3rem + 4.8vw, 5.4rem)/.98 Poppins, system-ui, sans-serif;
  letter-spacing: -.045em; color: #FBF7F1; margin: 0 auto 1.3rem; max-width: 14em;
}
.ta-x-journey__head p:not(.ta-x-eyebrow) {
  color: #9E958B; font-size: clamp(1.0625rem, 1rem + .45vw, 1.3rem);
  max-width: 42ch; margin: 0 auto; line-height: 1.5;
}
.ta-x-journey__foot { color: #6E665E; font-size: .8125rem; text-align: center; padding-bottom: 5rem; margin-top: 0; }

/* --- static layout (default) ------------------------------------------- */

.ta-x-journey__stage { display: grid; gap: 2.4rem; padding-bottom: 3rem; }
.ta-x-journey__viz { position: relative; }
.ta-x-journey__panels { list-style: none; margin: 0; padding: 0; display: grid; gap: 3rem; }
.ta-x-hop { border-left: 2px solid rgba(95,212,200,.35); padding-left: 1.5rem; }
.ta-x-dots, .ta-x-inspector { display: none; }

.ta-x-hop__meta {
  font: 600 .8125rem/1 Poppins, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ta-glow); margin: 0 0 .9rem;
}
.ta-x-hop__meta span { color: var(--ta-spark); margin-right: .7rem; }
.ta-x-hop h3 {
  font: 700 clamp(2rem, 1.3rem + 2.6vw, 3.4rem)/1 Poppins, system-ui, sans-serif;
  letter-spacing: -.04em; color: #FBF7F1; margin: 0 0 1.1rem;
}
.ta-x-hop > p:not(.ta-x-hop__meta) { color: #B4ACA2; font-size: 1.0938rem; line-height: 1.65; margin: 0 0 1.3rem; max-width: 44ch; }
.ta-x-hop__hdr {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem 1.2rem;
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: .8125rem;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: .9rem 1.1rem; margin: 0 0 .8rem;
}
.ta-x-hop__hdr dt { color: #6E665E; font-size: .6875rem; text-transform: uppercase; letter-spacing: .09em; }
.ta-x-hop__hdr dd { margin: .15rem 0 0; color: #E9E4DC; }
.ta-x-hop .ta-x-hop__changed { font-size: .875rem; color: var(--ta-glow); margin: 0 0 1.1rem; }

/* --- the diagram --------------------------------------------------------- */

.ta-x-topo { display: block; width: 100%; height: auto; overflow: visible; }
.ta-x-wire { fill: none; stroke: rgba(233,228,220,.18); stroke-width: 2.5; stroke-dasharray: 1 10; stroke-linecap: round; }
.ta-x-wire-lit {
  fill: none; stroke: url(#ta-x-litgrad); stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.ta-x-node__halo { fill: url(#ta-x-halo); opacity: 0; transition: opacity .5s ease; }
.ta-x-node__disc { fill: #1C1815; stroke: rgba(233,228,220,.16); stroke-width: 1.5; transition: fill .4s ease, stroke .4s ease; }
.ta-x-node__icon { fill: none; stroke: #6E665E; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease; }
.ta-x-node__label {
  fill: #6E665E; font: 600 16px Poppins, system-ui, sans-serif; letter-spacing: .14em;
  transition: fill .4s ease;
}
.ta-x-packet__core { fill: #FBF7F1; }

/* Without the script there is no travelling packet; every stop is shown lit
   so the diagram still reads as a finished route. */
.ta-x-journey:not(.is-enhanced) .ta-x-packet { display: none; }
.ta-x-journey:not(.is-enhanced) .ta-x-wire { stroke: rgba(95,212,200,.5); stroke-dasharray: none; }
.ta-x-journey:not(.is-enhanced) .ta-x-node__icon { stroke: var(--ta-glow); }
.ta-x-journey:not(.is-enhanced) .ta-x-node__label { fill: #B4ACA2; }

.ta-x-node.is-visited .ta-x-node__disc { stroke: rgba(0,169,154,.55); }
.ta-x-node.is-visited .ta-x-node__icon { stroke: rgba(95,212,200,.75); }
.ta-x-node.is-visited .ta-x-node__label { fill: #9E958B; }
.ta-x-node.is-active .ta-x-node__halo { opacity: 1; }
.ta-x-node.is-active .ta-x-node__disc { fill: #102B28; stroke: var(--ta-glow); stroke-width: 2; }
.ta-x-node.is-active .ta-x-node__icon { stroke: #FBF7F1; }
.ta-x-node.is-active .ta-x-node__label { fill: #FBF7F1; }

/* --- enhanced, pinned layout ------------------------------------------- */

.ta-x-journey.is-enhanced .ta-x-journey__track { height: calc(var(--hops, 6) * 85vh + 100vh); }
.ta-x-journey.is-enhanced .ta-x-journey__stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  padding: var(--ta-header-h, 58px) 0 0;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.28fr);
  align-items: center; gap: clamp(1.5rem, 1rem + 3vw, 4.5rem);
}
/* Panels stack in one grid cell, so the container is always as tall as the
   tallest hop -- no fixed height to tune, no overflow on long copy. */
.ta-x-journey.is-enhanced .ta-x-journey__panels { gap: 0; }
.ta-x-journey.is-enhanced .ta-x-hop {
  grid-area: 1 / 1; border: 0; padding: 0;
  opacity: 0; transform: translateY(22px);
  transition: opacity .5s ease, transform .6s var(--ta-ease);
  pointer-events: none; visibility: hidden;
}
.ta-x-journey.is-enhanced .ta-x-hop.is-active {
  opacity: 1; transform: none; pointer-events: auto; visibility: visible;
}
.ta-x-journey.is-enhanced .ta-x-hop__hdr,
.ta-x-journey.is-enhanced .ta-x-hop__changed {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ta-x-journey.is-enhanced .ta-x-dots { display: flex; gap: .45rem; margin-top: 2.2rem; }
.ta-x-dots i { width: 28px; height: 3px; border-radius: 2px; background: rgba(233,228,220,.14); transition: background .4s ease; }
.ta-x-dots i.is-on { background: var(--ta-glow); }

/* The inspector sits BELOW the diagram, never on top of it. The first
   version overlaid it on the bottom-right corner, which is exactly where the
   internet node sits -- so at stop five the active node was hidden under the
   panel describing it. Laid out as a strip of fields, the way packet headers
   are drawn in every textbook. */
.ta-x-journey.is-enhanced .ta-x-inspector {
  display: block; margin-top: 1.4rem;
  background: rgba(28,24,21,.7);
  border: 1px solid rgba(255,255,255,.09); border-radius: 16px;
  padding: .9rem 1rem 1rem;
  font-family: 'JetBrains Mono', Consolas, monospace; font-size: .78rem;
}
.ta-x-inspector__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .7rem; }
.ta-x-inspector__head span { color: #7E766D; text-transform: uppercase; letter-spacing: .12em; font-size: .6875rem; }
.ta-x-inspector__head b { color: var(--ta-glow); font-weight: 700; }
.ta-x-inspector dl {
  margin: 0; display: grid; gap: 1px;
  grid-template-columns: 1.25fr 1.25fr 1fr 1fr .55fr;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.08); border-radius: 10px; overflow: hidden;
}
.ta-x-inspector__row { background: #1A1714; padding: .55rem .65rem .6rem; min-width: 0; }
.ta-x-inspector dt { color: #6E665E; font-size: .625rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .25rem; }
.ta-x-inspector dd { margin: 0; color: #E9E4DC; overflow-wrap: anywhere; }
.ta-x-inspector dd.is-changed { animation: ta-x-flash 1.4s ease; }
@keyframes ta-x-flash { 0%, 35% { color: var(--ta-spark); text-shadow: 0 0 14px rgba(255,92,122,.6); } 100% { color: #E9E4DC; text-shadow: none; } }
.ta-x-inspector__changed { margin: .75rem 0 0; color: var(--ta-glow); font-size: .75rem; }

@media (max-width: 1180px) {
  .ta-x-inspector dl { grid-template-columns: 1fr 1fr; }
  .ta-x-inspector__row--ttl { grid-column: span 2; }
}

/* --- small screens: diagram on top, copy below, still pinned ----------- */

/* Small screens: diagram on top, copy below, still pinned -- but budgeted.
   A pinned stage taller than the screen is worse than no pinning at all:
   the end of each stop's copy and its link become unreachable, because
   scrolling advances the packet instead of revealing them. So on phones:
     - no top padding reserved for the header (it auto-hides while you
       scroll down through this section, which is the only direction you
       travel it in),
     - the inspector shows only the fields that actually change. Dst IP is
       identical at all six stops, and the MACs are too long for the width.
       Src IP and TTL carry the whole story: NAT, and the hop count. */
@media (max-width: 860px) {
  .ta-x-journey.is-enhanced .ta-x-journey__stage {
    grid-template-columns: 1fr; align-content: start;
    padding-top: .75rem; gap: .6rem;
  }
  .ta-x-journey.is-enhanced .ta-x-journey__viz { order: -1; }
  .ta-x-journey.is-enhanced .ta-x-inspector { margin-top: .4rem; padding: .65rem .75rem .7rem; font-size: .72rem; }
  .ta-x-inspector__head { margin-bottom: .5rem; }
  .ta-x-inspector__row--src_mac,
  .ta-x-inspector__row--dst_mac,
  .ta-x-inspector__row--dst_ip { display: none; }
  .ta-x-inspector dl { grid-template-columns: 1.6fr 1fr; }
  .ta-x-inspector__row--ttl { grid-column: auto; }
  .ta-x-inspector__changed { margin-top: .5rem; }
  .ta-x-journey.is-enhanced .ta-x-hop__meta { margin-bottom: .5rem; font-size: .75rem; }
  .ta-x-journey.is-enhanced .ta-x-hop h3 { font-size: clamp(1.55rem, 1.15rem + 2vw, 2.2rem); margin-bottom: .5rem; }
  .ta-x-journey.is-enhanced .ta-x-hop > p:not(.ta-x-hop__meta) { font-size: .9375rem; line-height: 1.55; margin-bottom: .7rem; }
  .ta-x-journey.is-enhanced .ta-x-dots { margin-top: .9rem; }
}
@media (max-width: 640px) {
  .ta-x-node__label { display: none; }
}

/* =========================================================================
   BENTO
   ========================================================================= */

.ta-x-bento-wrap { background: var(--ta-paper); padding: clamp(6rem, 3rem + 8vw, 10rem) 0; }

.ta-x-bento {
  display: grid; gap: 1.1rem;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: minmax(230px, auto);
}
.ta-x-tile {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 1.1rem;
  background: var(--ta-card); color: var(--ta-ink);
  border: 1px solid var(--ta-rule); border-radius: 30px;
  padding: clamp(1.5rem, 1rem + 1.4vw, 2.2rem);
  text-decoration: none;
  transition: transform .45s var(--ta-ease), box-shadow .45s var(--ta-ease), opacity 1s var(--ta-ease);
}
.ta-x-tile:hover { transform: translateY(-5px); box-shadow: 0 34px 70px -40px rgba(26,23,20,.5); color: var(--ta-ink); }
.ta-x-tile h3 {
  font: 700 clamp(1.45rem, 1.1rem + 1.3vw, 2.3rem)/1.06 Poppins, system-ui, sans-serif;
  letter-spacing: -.035em; margin: 0; color: inherit;
}
.ta-x-tile p { margin: 0; color: var(--ta-muted); line-height: 1.5; }
.ta-x-tile__k {
  font: 600 .75rem/1 Poppins, system-ui, sans-serif !important;
  letter-spacing: .15em; text-transform: uppercase; color: var(--ta-deep) !important;
  margin: 0 0 .7rem !important;
}
.ta-x-tile .ta-x-more { margin-top: auto; }

.ta-x-tile--guides { grid-column: span 4; grid-row: span 2; background: var(--ta-ink); color: #FBF7F1; border-color: transparent; }
.ta-x-tile--guides:hover { color: #FBF7F1; }
.ta-x-tile--guides .ta-x-tile__k, .ta-x-tile--guides .ta-x-more { color: var(--ta-glow) !important; }
.ta-x-tile--tools { grid-column: span 2; grid-row: span 2; }
.ta-x-tile--courses, .ta-x-tile--community, .ta-x-tile--yt { grid-column: span 2; }
.ta-x-tile--story, .ta-x-tile--reviews { grid-column: span 3; }

/* terminal */
.ta-x-term {
  position: relative; margin: 0; flex: 1;
  background: #0B0A09; border: 1px solid rgba(255,255,255,.07); border-radius: 18px;
  padding: 2.3rem 1.3rem 1.3rem;
  font: .8125rem/1.7 'JetBrains Mono', Consolas, monospace; color: #C9C1B7;
  white-space: pre-wrap; word-break: break-word; min-height: 15.5em;
}
.ta-x-term::before {
  content: ""; position: absolute; top: .9rem; left: 1rem; width: 10px; height: 10px; border-radius: 50%;
  background: var(--ta-spark); box-shadow: 17px 0 0 #E9C46A, 34px 0 0 var(--ta-signal);
}
.ta-x-term code { font: inherit; color: inherit; background: none; padding: 0; }
.ta-x-term .p { color: var(--ta-glow); }
.ta-x-term .o { color: #6E665E; }
.ta-x-term .caret {
  display: inline-block; width: .55em; height: 1.1em; margin-left: 1px;
  vertical-align: -2px; background: #FBF7F1; animation: ta-x-blink 1s steps(1) infinite;
}
@keyframes ta-x-blink { 50% { opacity: 0; } }

/* mask */
.ta-x-mask { display: flex; flex-direction: column; gap: .2rem; }
.ta-x-mask__big { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.ta-x-mask__big b {
  font: 700 clamp(3.2rem, 2rem + 3.4vw, 5rem)/1 Poppins, system-ui, sans-serif;
  letter-spacing: -.06em; color: var(--ta-ink); font-variant-numeric: tabular-nums;
}
.ta-x-mask__big span { font-weight: 600; color: var(--ta-muted); font-variant-numeric: tabular-nums; }
.ta-x-mask__cells { display: flex; gap: 7px; margin: 1.1rem 0 .7rem; }
.ta-x-mask__cells .oct { flex: 1; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.ta-x-mask__cells i { height: 38px; border-radius: 4px; background: var(--ta-wash); transition: background .35s ease; }
.ta-x-mask__cells i.on { background: var(--ta-signal); }
.ta-x-mask__dotted { font-family: 'JetBrains Mono', Consolas, monospace; color: var(--ta-ink) !important; font-size: 1rem; }

/* ring */
.ta-x-tile--courses { flex-direction: row; align-items: center; gap: 1.5rem; }
.ta-x-ring { width: 112px; flex: none; }
.ta-x-ring .seg { fill: none; stroke: var(--ta-signal); stroke-width: 10; stroke-linecap: round; transition: stroke .4s ease; transition-delay: calc(var(--i) * 90ms); }
.ta-x-ring text { font: 700 30px Poppins, system-ui, sans-serif; fill: var(--ta-ink); letter-spacing: -.04em; }
.ta-x-motion .ta-x-tile--courses:not(.is-in) .ta-x-ring .seg { stroke: var(--ta-wash); }

/* chat */
.ta-x-chat { display: flex; flex-direction: column; gap: .5rem; margin-top: auto; }
.ta-x-bubble {
  align-self: flex-start; max-width: 88%;
  background: var(--ta-wash); color: var(--ta-ink) !important;
  padding: .6rem .9rem; border-radius: 18px 18px 18px 5px; font-size: .9063rem;
  transition: opacity .5s ease, transform .55s var(--ta-ease);
}
.ta-x-bubble--r { align-self: flex-end; background: var(--ta-signal); color: #04302B !important; border-radius: 18px 18px 5px 18px; }
.ta-x-bubble:nth-child(1) { transition-delay: .25s; }
.ta-x-bubble:nth-child(2) { transition-delay: 1s; }
.ta-x-bubble:nth-child(3) { transition-delay: 1.8s; }
.ta-x-motion .ta-x-tile--community:not(.is-in) .ta-x-bubble { opacity: 0; transform: translateY(12px) scale(.96); }

/* youtube */
.ta-x-tile--yt { background: var(--ta-spark); border-color: transparent; color: #2A0B14; }
.ta-x-tile--yt:hover { color: #2A0B14; }
.ta-x-tile--yt .ta-x-tile__k { color: rgba(42,11,20,.7) !important; }
.ta-x-tile--yt p { color: rgba(42,11,20,.78); }
.ta-x-tile--yt .ta-x-more { color: #2A0B14; }
.ta-x-big b {
  font: 700 clamp(2.8rem, 2rem + 2.6vw, 4.2rem)/1 Poppins, system-ui, sans-serif;
  letter-spacing: -.055em; color: #2A0B14; font-variant-numeric: tabular-nums;
}

/* story */
.ta-x-tile--story { background: var(--ta-wash); flex-direction: row; align-items: flex-start; gap: 1.2rem; }
.ta-x-glyph { font: 700 7.5rem/.72 Poppins, system-ui, sans-serif; color: var(--ta-spark); flex: none; }

/* reviews */
.ta-x-spec { margin: auto 0 0; display: grid; gap: .1rem; font-family: 'JetBrains Mono', Consolas, monospace; font-size: .9375rem; }
.ta-x-spec div { display: flex; justify-content: space-between; padding: .6rem 0; border-top: 1px solid var(--ta-rule); }
.ta-x-spec dt { color: var(--ta-muted); }
.ta-x-spec dd { margin: 0; color: var(--ta-ink); font-weight: 700; }

@media (max-width: 980px) {
  .ta-x-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ta-x-tile--guides, .ta-x-tile--tools { grid-column: span 2; grid-row: auto; }
  .ta-x-tile--courses, .ta-x-tile--community, .ta-x-tile--yt, .ta-x-tile--story { grid-column: span 1; }
  .ta-x-tile--reviews { grid-column: span 2; }
}
@media (max-width: 620px) {
  .ta-x-bento { grid-template-columns: 1fr; }
  .ta-x-tile { grid-column: auto !important; }
  .ta-x-tile--courses, .ta-x-tile--story { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   CALCULATOR FEATURE
   ========================================================================= */

.ta-x-calc { background: var(--ta-wash); padding: clamp(6rem, 3rem + 8vw, 10rem) 0; }
.ta-x-calc__tool { max-width: 880px; margin: 0 auto; }
.ta-x-calc .ta-tool { border-radius: 26px; box-shadow: 0 50px 90px -55px rgba(26,23,20,.55); }

/* =========================================================================
   LATEST (block-rendered section between calc and bridge)
   ========================================================================= */

.ta-x-latest { background: var(--ta-paper); }
.ta-x-latest h2 {
  font: 700 clamp(2.2rem, 1.4rem + 3vw, 3.6rem)/1 Poppins, system-ui, sans-serif !important;
  letter-spacing: -.04em;
}

/* =========================================================================
   THE TWO HALVES
   ========================================================================= */

.ta-x-bridge { display: flex; min-height: 78vh; border-top: 1px solid var(--ta-rule); }
.ta-x-half {
  position: relative; overflow: hidden; flex: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: clamp(2.6rem, 2rem + 4vw, 5.5rem);
  text-decoration: none;
  transition: flex-grow .7s var(--ta-ease);
}
.ta-x-half h2 {
  font: 700 clamp(3.4rem, 1.6rem + 6.4vw, 8rem)/.9 Poppins, system-ui, sans-serif;
  letter-spacing: -.06em; margin: 0 0 1.2rem; color: inherit;
}
.ta-x-half p:not(.ta-x-eyebrow) { max-width: 30ch; font-size: 1.1875rem; line-height: 1.5; margin: 0 0 1.6rem; }
.ta-x-half--learn { background: var(--ta-paper); color: var(--ta-ink); }
.ta-x-half--learn p:not(.ta-x-eyebrow) { color: var(--ta-muted); }
.ta-x-half--learn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(26,23,20,.13) 1px, transparent 1px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 20%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 30% 20%, #000, transparent 75%);
}
.ta-x-half--solve { background: var(--ta-ink); color: #FBF7F1; isolation: isolate; }
.ta-x-half--solve::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 60% at 80% 10%, rgba(0,169,154,.28), transparent 70%);
}
.ta-x-half--solve p:not(.ta-x-eyebrow) { color: #B4ACA2; }
.ta-x-half--solve .ta-x-eyebrow, .ta-x-half--solve .ta-x-more { color: var(--ta-glow); }
.ta-x-half--learn:hover, .ta-x-half--solve:hover { color: inherit; }

@media (hover: hover) and (min-width: 781px) {
  .ta-x-bridge:hover .ta-x-half { flex-grow: .78; }
  .ta-x-bridge .ta-x-half:hover { flex-grow: 1.4; }
}
@media (max-width: 780px) {
  .ta-x-bridge { flex-direction: column; min-height: 0; }
  .ta-x-half { min-height: 56vh; }
}

/* =========================================================================
   REDUCED MOTION — layer 1 everywhere
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .ta-x-grad, .ta-x-cue i, .ta-x-term .caret { animation: none; }
  .ta-x-tile, .ta-x-half, .ta-x-btn { transition: none; }
  .ta-x-tile:hover { transform: none; }
}