/* ============================================================================
   TROPIC ARTS — theme stylesheet (loaded by config/tropic-arts.tsx root.render).
   Ported from the source static site (tropic-arts-website). Everything is scoped
   under `.tropic-arts-site` so it never leaks into the Puck editor chrome.
   Re-skin by editing the tokens on `.tropic-arts-site`; the section rules read
   from them. Headings are Butler Roman, self-hosted via the @font-face below;
   body (Manrope) comes from the Google <link> added in root.render. Cart is OFF
   for this theme — no cart tokens needed.
   ========================================================================== */

/* Butler Roman — the display serif behind every heading. Self-hosted because
   Butler isn't on Google Fonts. Declared under its own family name rather than
   plain "Butler" so it can never collide with Halcyon's Light/Medium pair if
   both stylesheets ever land in one document. Butler Roman is a single-weight
   face, so the whole 300–700 range maps to it: the theme's 300/400/500 headings
   all render true Roman and nothing is ever synthetically bolded.

   Butler (free version) © Fabian De Smet — https://www.fabiandesmet.com
   Licensed under the Butler EULA v2.00, included in full beside the font files:
   /assets/tropic-arts/Butler-EULA-v2-00.pdf. The licence permits redistribution
   only free of charge and UNMODIFIED, with the licence included and a clear
   reference and link to the official site displayed — the visible credit is a
   product surface, not something this comment satisfies. */
@font-face {
  font-family: "Butler Roman";
  src: url("/assets/tropic-arts/Butler-Free-Rmn.woff2") format("woff2"),
    url("/assets/tropic-arts/Butler-Free-Rmn.woff") format("woff");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* <ThemeImg> emits each asset's intrinsic width/height so the browser reserves
   the box before the photo loads. Those attributes are author-origin
   presentational hints, one per axis: a rule that sets only a width overrides
   that hint and leaves the height hint standing, both axes go definite, and the
   rule's own aspect-ratio is then ignored — the photo renders at its full pixel
   height (a 1600x1197 asset came out 504x1197). Handing the height back to the
   ratio is what every sizing rule below already assumes. A rule that wants a
   real height still wins on specificity, and an unstyled image is unaffected:
   its width hint stays, so the box is still reserved before load. */
img {
  height: auto;
}

.tropic-arts-site {
  /* Design tokens — the whole theme reads from these. */
  /* Lustre-style re-skin: neutral gray/black/white + a GOLD accent.

     The accent is the Tropic Arts gold, #c9a96e — but that colour carries only
     ~2.2:1 on this theme's near-white canvas, so one value cannot serve both
     grounds. The accent tokens are therefore named for the GROUND they belong
     to, and using the wrong pair is the one way to get this wrong:

       --ta-accent*       LIGHT grounds. #8a6a33 is 4.9:1 on the canvas and
                          5.0:1 under white text, so it works as text and as a
                          fill; --ta-accent-strong (#6f5427, 6.9:1) is the
                          darker step for inline links, hovers and badge fills.
       --ta-accent-dark*  DARK grounds. The brand gold itself, 8.3:1 on the
                          charcoal. Never put this on a light section.

     --ta-accent is also the slot lib/brandOverrides.ts writes a merchant's
     brand accent into, so every light-ground accent follows the brand. */
  --ta-accent: #8a6a33; /* light-ground accent (brand-override slot) */
  --ta-accent-strong: #6f5427; /* darker step — links, hovers, fills */
  --ta-accent-wash: #f4ecdc; /* pale accent fill — badges, chat bubbles */
  --ta-accent-wash-ink: #6f5427; /* text on --ta-accent-wash */
  --ta-accent-dark: rgb(var(--ta-accent-dark-rgb)); /* brand gold — dark grounds */
  --ta-accent-dark-rgb: 201, 169, 110; /* ...as a triplet, for rgba() mixes */
  --ta-accent-dark-lit: #d6b87e; /* lighter brand gold — hovers/glyphs on dark */
  --btn-ink: #fff; /* text on any accent-filled button/badge — see readableInk
                      in lib/brandOverrides.ts, which flips it for a pale
                      brand accent (the literal only holds for THIS ramp) */
  --ink: #101315; /* charcoal — dark sections + primary button fill */
  --btn: var(--ink); /* primary button/CTA fill — overridable via brand colors */
  --ink-soft: #14181a; /* headings on light */
  --body: #5b6467; /* body copy (muted) */
  --cream: #f5f4f3; /* light panel gray */
  --line: rgba(16, 19, 21, 0.1); /* hairlines */
  --gray-100: #f5f4f3; /* nav / menu hover */
  --gray-50: #f5f4f3;
  --paper: #fbfcfc; /* off-white surface */
  /* Shared nav dropdown / mega-menu (components/storefront/nav-menu.css). */
  --menu-bg: var(--paper);
  --menu-fg: var(--ink);
  --menu-muted: var(--body);
  --menu-accent: var(--ta-accent);
  --menu-border: var(--line);
  --menu-hover-bg: var(--gray-100);
  --menu-radius: 0px;
  --menu-heading-font: "Butler Roman", Georgia, "Times New Roman", serif;
  --menu-ph-bg: var(--gray-100);
  --heading-font: "Butler Roman", Georgia, "Times New Roman", serif;
  --body-font: "Manrope", system-ui, -apple-system, sans-serif;
  --container: 1720px;
  --edge: clamp(24px, 5vw, 72px);
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* --- Marketing redesign (v2), re-skinned to Lustre neutrals + gold.
     Accent tokens live in the ramp up top; these are the surfaces. --- */
  --ta-canvas: #fbfcfc; /* page + card surface */
  --ta-hair: rgba(16, 19, 21, 0.1); /* section hairlines */
  --ta-muted: #8a9092; /* captions / fine print */
  --ta-border: rgba(16, 19, 21, 0.18); /* ghost-button + input outlines */
  --ta-panel: #f5f4f3; /* browser-chrome bar / inset panels */
  --ta-nav-h: 90px; /* top-bar height */

  /* Dark-section tokens (hero / closing CTA / footer / dark heroes). */
  --ta-charcoal: #101315; /* dark-section background */
  --ta-charcoal-lit: #181c1e; /* one step up — hover lift on dark cards */
  --ta-hair-dark: rgba(251, 252, 252, 0.12); /* hairlines on dark */
  --ta-muted-dark: rgba(251, 252, 252, 0.55); /* body text on dark */

  font-family: var(--body-font);
  color: var(--body);
  background: var(--ta-canvas);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tropic-arts-site * {
  box-sizing: border-box;
}
.tropic-arts-site h1,
.tropic-arts-site h2,
.tropic-arts-site h3,
.tropic-arts-site h4 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0;
  color: var(--ink-soft);
}
.tropic-arts-site h1 {
  font-size: clamp(2.25rem, 5vw, 3rem);
}
.tropic-arts-site h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
}
.tropic-arts-site h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}
.tropic-arts-site h4 {
  font-size: 1.375rem;
}
.tropic-arts-site p {
  margin: 0 0 1em;
  font-weight: 500;
}
.tropic-arts-site a {
  color: inherit;
  text-decoration: none;
}
.tropic-arts-site img {
  max-width: 100%;
  display: block;
}

/* Shared layout helpers. */
.tropic-arts-site .ta-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}
/* Content sections get hairline side borders, like the source .section-container. */
.tropic-arts-site .ta-bordered {
  border-inline: 0;
}

/* Buttons — dark uppercase pill with a chevron that slides on hover. */
.tropic-arts-site .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: 10px;
  padding: 18px 36px;
  background: var(--btn);
  color: var(--btn-ink);
  font-family: var(--body-font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
}
.tropic-arts-site .btn:hover {
  background: var(--ta-accent-strong);
  color: var(--btn-ink);
}
.tropic-arts-site .btn svg {
  transition: transform 0.3s ease;
}
.tropic-arts-site .btn:hover svg {
  transform: translateX(4px);
}
.tropic-arts-site .btn.btn-gold {
  background: var(--ta-accent);
}
.tropic-arts-site .btn.btn-gold:hover {
  background: var(--ta-accent-strong);
}

/* Gold pill badge ("Boardwalk Theme", "From the Studio"). */
.tropic-arts-site .ta-badge {
  display: inline-block;
  background: var(--ta-accent);
  color: var(--btn-ink);
  font-family: var(--body-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 0.35em 0.7em;
  border-radius: 0;
  margin-bottom: 1rem;
}

/* ===========================================================================
   MARKETING REDESIGN (v2) — announcement · nav · hero
   Full-bleed sections wrap their content in a 1200px column with 1px left/right
   hairlines, matching the reference (tropic-arts-website marketing homepage).
   ========================================================================= */
@keyframes ta-fade {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Shared pill buttons used across the v2 sections. */
.tropic-arts-site .ta2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body-font);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 18px 36px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
/* --btn, not --ink: this is a CTA fill, so it follows a merchant's brand
   accent the same way .btn does. --btn defaults to var(--ink), so the base
   theme is unchanged. The dark-ground variants below (.ta-hero-cta,
   .ta-cta[data-tone="ink"]) deliberately stay inverted white-on-dark — a
   brand colour there would sit under var(--ink) text. */
.tropic-arts-site .ta2-btn--fill {
  background: var(--btn);
  color: var(--btn-ink);
  border: 1px solid var(--btn);
}
.tropic-arts-site .ta2-btn--fill:hover {
  background: var(--ta-accent-strong);
  border-color: var(--ta-accent-strong);
  color: var(--btn-ink);
}
.tropic-arts-site .ta2-btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ta-border);
}
.tropic-arts-site .ta2-btn--ghost:hover {
  /* inverts into the solid fill, so it follows --btn too */
  background: var(--btn);
  color: var(--btn-ink);
  border-color: var(--btn);
}

/* --------------------------------------------------------- Announcement bar */
.tropic-arts-site .ta-announce {
  background: var(--ink);
  color: var(--ta-canvas);
  text-align: center;
  font-size: 13px;
  padding: 10px 24px;
  letter-spacing: 0.02em;
}
.tropic-arts-site .ta-announce a {
  color: var(--ta-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tropic-arts-site .ta-announce a:hover {
  color: #7fd0b0;
}

/* --------------------------------------------------------------------- Nav */
/* The __header chrome renders in its own wrapper tree (body › div.tropic-arts-
   site › [Puck zone div] › header.ta-nav), and those wrappers are only as tall
   as the bar — so they become the sticky nav's containing block and it scrolls
   away instantly. display:contents dissolves just the wrappers that contain the
   nav (via :has), so the header joins the page's scroll context and pins to the
   top on every page. Boxes go away, DOM ancestry doesn't, so the scoped rules +
   inherited --ta-* tokens still apply. */
.tropic-arts-site:has(.ta-nav),
.tropic-arts-site:has(.ta-nav) div:has(.ta-nav) {
  display: contents;
}
/* In the Puck editor the display:contents above dissolves Puck's drag wrapper,
   leaving no box to click — so the header can't be selected (only via Outline).
   When editing, the Nav block adds `.is-editing`: restore the wrapper box and
   drop the sticky positioning so the header sits in flow and is clickable. */
.tropic-arts-site:has(.ta-nav.is-editing) div:has(.ta-nav.is-editing) {
  display: block;
}
.tropic-arts-site .ta-nav.is-editing {
  position: static;
}
.tropic-arts-site .ta-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 252, 252, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-nav-inner {
  /* NOT positioned: the mega panel anchors to the sticky .ta-nav (full
     document width) so its full-bleed background can't overshoot the
     viewport — see .nm-panel.ta-mega. */
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--ta-nav-h);
  padding-inline: 32px;
}

.tropic-arts-site .ta-brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.tropic-arts-site .ta-brand img {
  height: var(--ta-logo-h, 70px);
  width: auto;
  max-width: 460px;
  object-fit: contain;
  display: block;
}
.tropic-arts-site .ta-brand .ta-brand-text {
  font-family: var(--heading-font);
  font-size: 1.4rem;
  color: var(--ink);
}
.tropic-arts-site .ta-nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.tropic-arts-site .ta-nav-links a {
  font-family: var(--body-font);
  font-weight: 500;
  color: var(--body);
  text-decoration: none;
  transition: color 0.2s ease;
}
.tropic-arts-site .ta-nav-links a:hover {
  color: var(--ink);
}
/* Active-nav: the top-level link for the current page (or its mega parent). */
.tropic-arts-site .ta-nav-links > li.is-active .nm-trigger {
  color: var(--ink);
  font-weight: 600;
}
.tropic-arts-site .ta-nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.tropic-arts-site .ta-nav-login {
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.tropic-arts-site .ta-nav-login:hover {
  color: var(--body);
}
.tropic-arts-site .ta-nav-cta {
  font-size: 14px;
  padding: 11px 22px;
}
.tropic-arts-site .ta-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
  order: 3;
}
.tropic-arts-site .ta-nav-toggle .bar {
  display: block;
  width: 18px;
  height: 1.5px;
  border-radius: 999px;
  background: var(--ink);
  /* display:block parent -> adjacent margins collapse to 4.5px,
     putting bar centres 6px apart. */
  margin: 4.5px auto;
  transition: all 0.2s;
}
@media (max-width: 860px) {
  .tropic-arts-site .ta-nav-toggle {
    display: block;
  }
  /* Fit logo + CTA + hamburger on narrow screens (the wide wordmark logo
     otherwise overflows and forces horizontal scroll). Tighten the padding
     and gap, and scale the logo down as the viewport narrows. */
  .tropic-arts-site .ta-nav-inner {
    gap: 10px;
    padding-inline: clamp(12px, 3.5vw, 32px);
  }
  .tropic-arts-site .ta-brand {
    min-width: 0; /* let the logo shrink instead of overflowing */
  }
  .tropic-arts-site .ta-brand img {
    height: clamp(20px, 5.5vw, var(--ta-logo-h, 40px));
    max-width: 100%;
  }
  .tropic-arts-site .ta-nav-cta {
    padding: 9px 14px;
    font-size: 13px;
  }
  .tropic-arts-site .ta-nav-links {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ta-canvas);
    border-bottom: 1px solid var(--ta-hair);
    padding: 6px 0;
    /* Always mounted so it can animate both ways: fade in + slide down on open,
       fade out + slide up on close. Visibility flips after the fade-out so the
       hidden menu isn't focusable/clickable. */
    display: flex;
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity 0.26s var(--ease),
      transform 0.26s var(--ease),
      visibility 0s linear 0.26s;
  }
  .tropic-arts-site .ta-nav[data-open="true"] .ta-nav-links {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity 0.26s var(--ease),
      transform 0.26s var(--ease),
      visibility 0s linear 0s;
  }
  /* The mega-menu panel becomes an always-open accordion at this width
     (shared nav-menu.css re-asserts visibility:visible / pointer-events:auto).
     Inside a CLOSED drawer that escapes the drawer's own visibility:hidden and
     overlaps the page below the nav, swallowing clicks (e.g. the feature-card
     arrows). Keep it hidden until the drawer is actually open. */
  .tropic-arts-site .ta-nav:not([data-open="true"]) .ta-nav-links .nm-panel {
    visibility: hidden;
    pointer-events: none;
  }
  .tropic-arts-site .ta-nav-links a {
    padding: 12px 32px;
  }
  .tropic-arts-site .ta-nav-login {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-nav-links {
    transition: none;
  }
}

/* ------------------------------------------------------- Platform mega-menu
   Reuses the shared .nm-item/.nm-trigger/.nm-caret/.nm-panel (reveal, caret,
   hover-bridge, mobile accordion); only the grouped-columns layout is ours. */
/* Full-height nav links: a taller hit area removes the dead zone between a link
   and its mega panel, and (by making the trigger a flexbox) the .nm-caret span
   becomes a sized flex item so it renders as a chevron, not a stray line. */
.tropic-arts-site .ta-nav-links {
  align-self: stretch;
  align-items: stretch;
}
.tropic-arts-site .ta-nav-links > li {
  display: flex;
  align-items: stretch;
}
.tropic-arts-site .ta-nav-links > li > a,
.tropic-arts-site .ta-nav-links .nm-trigger {
  display: flex;
  align-items: center;
}
.tropic-arts-site .ta-nav-links .nm-item {
  display: flex;
  align-items: stretch;
}
.tropic-arts-site .ta-nav-links .nm-caret {
  margin-top: 0;
}
.tropic-arts-site .ta-mega-item {
  position: static; /* the sticky .ta-nav is the panel's containing block */
}
/* Panel background spans the full nav width (the nav's box always equals the
   document width, so — unlike a 100vw + -50vw margin breakout, which is
   scrollbar-width too wide and caused horizontal scroll — it can never poke
   past the viewport); the grid of links inside stays page-width + centered.
   left/right anchoring keeps transform free for the reveal animation. */
.tropic-arts-site .nm-panel.ta-mega {
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
  margin-top: 0; /* flush against the nav — no gap */
  padding: 0;
  border-inline: 0;
  border-radius: 0;
  overflow: hidden; /* clip the essentials panel's right-edge bleed */
}
.tropic-arts-site .ta-mega-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 32px;
  display: flex;
  gap: 56px; /* matches the grow grid's column gap — one rhythm across all three */
  align-items: stretch;
}
.tropic-arts-site .ta-mega-sec {
  padding-block: 30px 34px;
}
/* The copy in a card is only ~285px wide, so on a 1720px container a stretched
   `flex: 1` column strands ~200px of dead space beside every item — reading as a
   hole in the middle of the panel. Instead the columns stay content-width and
   the auto margins centre the whole build+grow cluster in the space left of the
   pinned essentials panel, so the slack sits outside the items, not between
   them. Both collapse to nothing once the row is actually full. */
.tropic-arts-site .ta-mega-sec--wide {
  flex: 0 1 auto;
  margin-right: auto;
}
.tropic-arts-site .ta-mega-inner > .ta-mega-sec:first-child {
  margin-left: auto;
}
.tropic-arts-site .ta-mega-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ta-muted);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-mega-items {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tropic-arts-site .ta-mega-sec--wide .ta-mega-items {
  display: grid;
  /* Wide enough for a card's icon + the 30ch blurb, so capping the track never
     costs a line of wrapping. */
  grid-template-columns: repeat(2, minmax(0, 286px));
  gap: 22px 56px;
}
.tropic-arts-site .ta-mega-card {
  display: block;
  text-decoration: none;
}
/* Items with an icon: icon + text side by side. */
.tropic-arts-site .ta-mega-card--ico {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.tropic-arts-site .ta-mega-card-txt {
  display: block;
  min-width: 0;
}
/* Two-tone icons: soft gold accent under deep-green linework (logo palette). */
.tropic-arts-site .ta-mega-ico {
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  margin-top: 1px;
}
.tropic-arts-site .ta-mega-ico .ico-fill {
  fill: var(--ta-accent-dark);
  opacity: 0.4;
  stroke: none;
  transition: opacity 0.15s ease;
}
.tropic-arts-site .ta-mega-ico .ico-line {
  fill: none;
  stroke: var(--ta-accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tropic-arts-site .ta-mega-card:hover .ta-mega-ico .ico-fill {
  opacity: 0.75;
}
.tropic-arts-site .ta-mega-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.15s ease;
}
.tropic-arts-site .ta-mega-card:hover .ta-mega-title {
  color: var(--ta-accent-strong);
}
.tropic-arts-site .ta-mega-desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ta-muted);
  max-width: 30ch;
}
.tropic-arts-site .ta-mega-badge {
  display: inline-block;
  margin-left: 8px;
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ta-accent-wash-ink);
  background: var(--ta-accent-wash);
  padding: 2px 6px;
  border-radius: 0;
  vertical-align: middle;
}
/* Tinted "essentials" panel that bleeds to the right viewport edge. */
.tropic-arts-site .ta-mega-sec--panel {
  position: relative;
  flex: 0 0 clamp(220px, 20vw, 280px);
  margin-right: -32px;
  padding: 30px 32px 34px;
  background: #f5f4f3;
  border-left: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-mega-sec--panel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 100%;
  width: 50vw;
  background: #f5f4f3;
}
@media (max-width: 860px) {
  /* Back to the inline accordion — undo the full-width + panel treatment. */
  .tropic-arts-site .nm-panel.ta-mega {
    left: auto;
    right: auto;
    width: 100%;
    margin-left: 0;
    overflow: visible;
  }
  .tropic-arts-site .ta-mega-inner {
    flex-direction: column;
    padding-inline: 0;
    gap: 0;
  }
  .tropic-arts-site .ta-mega-sec {
    padding-block: 12px 6px;
  }
  /* Stacked accordion: the desktop auto margins would shrink-to-fit and
     right-align each section, and the columns fill the width again. */
  .tropic-arts-site .ta-mega-inner > .ta-mega-sec:first-child,
  .tropic-arts-site .ta-mega-sec--wide {
    margin-inline: 0;
  }
  .tropic-arts-site .ta-mega-sec--wide .ta-mega-items {
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }
  .tropic-arts-site .ta-mega-sec--panel {
    flex: initial;
    margin-right: 0;
    padding-inline: 32px;
    background: transparent;
    border-left: none;
  }
  .tropic-arts-site .ta-mega-sec--panel::after {
    display: none;
  }
}
@media (max-width: 520px) {
  .tropic-arts-site .ta-mega-sec--wide .ta-mega-items {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------- Hero */
.tropic-arts-site .ta-hero {
  border-bottom: 1px solid var(--ta-hair);
  /* Clip (not hidden, which would break the sticky nav's containing block)
     keeps any edge bleed off-screen. */
  overflow-x: clip;
}
.tropic-arts-site .ta-hero-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(64px, 9vw, 110px) clamp(24px, 5vw, 72px) 0;
  text-align: center;
}
.tropic-arts-site .ta-hero-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.08;
  margin: 0 auto;
  max-width: 760px;
  text-wrap: balance;
  animation: ta-fade 0.7s ease both;
}
.tropic-arts-site .ta-hero-lede {
  max-width: 560px;
  margin: 28px auto 0;
  line-height: 1.75;
  font-weight: 500;
  animation: ta-fade 0.7s 0.1s ease both;
}
.tropic-arts-site .ta-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 38px;
  animation: ta-fade 0.7s 0.18s ease both;
}
.tropic-arts-site .ta-hero-cta .ta2-btn {
  font-size: 0.8125rem;
  padding: 18px 36px;
}
.tropic-arts-site .ta-hero-note {
  font-size: 13px;
  margin: 18px 0 0;
  color: var(--ta-muted);
}
.tropic-arts-site .ta-hero-visual {
  position: relative;
  margin: 72px auto 0;
  max-width: 980px;
}
.tropic-arts-site .ta-hero-frame {
  position: relative;
  border: 1px solid var(--ta-hair);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 -20px 60px rgba(25, 24, 23, 0.05);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-hero-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-hero-frame-bar span {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: #c9cdcc;
}
.tropic-arts-site .ta-hero-frame-body {
  height: 560px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Plain surface, not a striped skeleton — each card stays hidden until its
     preview iframe has loaded, then fades in (see .ta-hero-card). */
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-hero-frame-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.tropic-arts-site .ta-hero-ph {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: #8a9092;
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 8px 14px;
  border-radius: 0;
}

/* --- Rotating template showcase: each carousel card is a browser frame with
       the three window dots top-left and the template name centered in the
       chrome bar. --- */
.tropic-arts-site .ta-hero-frame-bar {
  position: relative;
}
/* Out-specify the generic window-dot rule (`.ta-hero-frame-bar span`) and the
   circle-restore sweep — the name label is also a span in the bar. */
.tropic-arts-site .ta-hero-frame-bar .ta-hero-frame-name {
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ta-muted);
  white-space: nowrap;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tropic-arts-site .ta-hero-frame-body {
  position: relative;
}
/* Each card's live preview fades in over the striped skeleton once its
   iframe has painted. */
.tropic-arts-site .ta-hero-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  z-index: 1;
  background: var(--ta-canvas);
  transition: opacity 0s linear 0.85s;
}
.tropic-arts-site .ta-hero-layer.is-active {
  opacity: 1;
  z-index: 2;
  transition: opacity 0.8s ease;
}
/* Hero-size live preview: ~1400px virtual viewport scaled into the ~980px
   frame (don't reuse .ta-tpl-frame — its 400%/0.25 assumes a small card). */
.tropic-arts-site .ta-hero-layer-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 142.86%;
  height: 142.86%;
  border: 0;
  transform: scale(0.7);
  transform-origin: top left;
  pointer-events: none;
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-hero-frame-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* Hero carousel: one card per template, sliding right-to-left one step at a
   time with a pause between steps. Each card keeps its own website as it
   moves (no crossfades, no blur). The center card is full-size; flanking
   cards are slightly smaller, scaled from the BOTTOM edge so their top edges
   sit lower than the middle card. Cards are placed purely by transform from
   a wrapped slot index (--rel), so nothing ever moves in the DOM (iframes
   would reload); the section's overflow-x clip trims the offscreen cards. */
.tropic-arts-site .ta-hero-carousel {
  position: relative;
}
.tropic-arts-site .ta-hero-card {
  --s: 0.94;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transform: translateX(calc(var(--rel) * (100% + 28px))) scale(var(--s));
  transform-origin: center bottom;
  /* Hidden until its preview iframe loads, then fades in (.is-ready). */
  opacity: 0;
  transition: transform 0.7s ease, opacity 0.6s ease;
}
.tropic-arts-site .ta-hero-card.is-ready {
  opacity: 1;
}
.tropic-arts-site .ta-hero-card:first-child {
  /* stays in flow — gives .ta-hero-visual its height */
  position: relative;
}
.tropic-arts-site .ta-hero-card.is-center {
  --s: 1;
  z-index: 2;
}
.tropic-arts-site .ta-hero-card.no-anim {
  /* the wrap-around hop between the two offscreen slots */
  transition: none;
}
.tropic-arts-site .ta-hero-card.is-warming {
  /* Warm-up: every card is stacked in the CENTER slot (--rel: 0) so the frames
     that will be parked offscreen spend a moment in the viewport and load their
     lazy imagery there — see HERO_WARMUP_MS in config/tropic-arts.tsx. Only the
     card on top is shown; the rest are transparent behind it.

     Transform transitions OFF, opacity kept: the cards must JUMP to their slots
     when the stack breaks up, not fly out of the center, which would drag the
     two offscreen ones straight across the visible ones. The fade-in the card
     already has is unaffected. */
  transition: opacity 0.6s ease;
}
@media (min-width: 768px) {
  .tropic-arts-site .ta-hero-visual {
    /* leave room beside the center card so the flanking cards read */
    max-width: min(980px, calc(100vw - 260px));
  }
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-hero-layer,
  .tropic-arts-site .ta-hero-layer.is-active,
  .tropic-arts-site .ta-hero-card {
    transition: none;
  }
}
@media (max-width: 640px) {
  .tropic-arts-site .ta-hero-frame-body {
    height: 340px;
  }
}

/* ------------------------------------------------------------ Value pillars */
.tropic-arts-site .ta-pillars {
  --pil-hair: var(--ta-hair);
  border-bottom: 1px solid var(--pil-hair);
}
.tropic-arts-site .ta-pillars-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.tropic-arts-site .ta-pillar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  padding: 38px 28px;
  border-left: 1px solid var(--pil-hair);
}
.tropic-arts-site .ta-pillar:first-child {
  border-left: none;
}
.tropic-arts-site .ta-pillar-title {
  font-family: var(--body-font);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.tropic-arts-site .ta-pillar-note {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--ta-muted);
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-pillars-inner {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Second row starts a fresh left edge and gains a top hairline. */
  .tropic-arts-site .ta-pillar:nth-child(odd) {
    border-left: none;
  }
  .tropic-arts-site .ta-pillar:nth-child(n + 3) {
    border-top: 1px solid var(--pil-hair);
  }
}
@media (max-width: 520px) {
  .tropic-arts-site .ta-pillars-inner {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .ta-pillar {
    border-left: none;
  }
  .tropic-arts-site .ta-pillar:nth-child(n + 2) {
    border-top: 1px solid var(--pil-hair);
  }
}
/* Strips with three or fewer pillars balance across three columns on desktop
   instead of leaving an empty cell in the fixed four-up grid. */
@media (min-width: 821px) {
  .tropic-arts-site .ta-pillars-inner:not(:has(.ta-pillar:nth-child(4))) {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* Dark tone: a taller charcoal band that reads as one region with the hero
   above it. Recolors the dividers to the on-dark hairline and lightens text. */
.tropic-arts-site .ta-pillars[data-tone="dark"] {
  --pil-hair: var(--ta-hair-dark);
  background: var(--ta-charcoal);
}
.tropic-arts-site .ta-pillars[data-tone="dark"] .ta-pillar {
  padding-block: clamp(54px, 6.5vw, 82px);
}
.tropic-arts-site .ta-pillars[data-tone="dark"] .ta-pillar-title {
  color: var(--ta-canvas);
}
.tropic-arts-site .ta-pillars[data-tone="dark"] .ta-pillar-note {
  color: var(--ta-muted-dark);
}

/* -------------------------------------------------------------- Feature row */
.tropic-arts-site .ta-frow {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-frow-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
.tropic-arts-site .ta-frow-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-frow-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.2vw, 2.625rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-frow-body {
  line-height: 1.75;
  font-weight: 500;
  margin: 22px 0 0;
  max-width: 460px;
}
.tropic-arts-site .ta-frow-link {
  display: inline-block;
  margin-top: 26px;
  color: var(--ta-accent-strong);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--ta-accent-strong);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tropic-arts-site .ta-frow-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
/* A large, responsive product shot: natural aspect ratio, scales to the
   column width (no fixed-height crop), with a soft even shadow. */
.tropic-arts-site .ta-frow-media img {
  display: block;
  width: 100%;
  height: auto;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
/* Empty slots (feature rows without an image, e.g. other pages) keep the
   framed placeholder box so the caption has somewhere to sit. */
.tropic-arts-site .ta-frow-media:has(.ta-frow-ph) {
  border: 1px solid var(--ta-hair);
  height: 340px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    -45deg,
    var(--ta-panel) 0 14px,
    #e4e8e8 14px 28px
  );
}
.tropic-arts-site .ta-frow-ph {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: #8a9092;
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 8px 14px;
  border-radius: 0;
}
/* Image left: swap the two cells (text moves to the right column). */
.tropic-arts-site .ta-frow[data-side="left"] .ta-frow-text {
  order: 2;
}
.tropic-arts-site .ta-frow[data-side="left"] .ta-frow-media {
  order: 1;
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-frow-inner {
    grid-template-columns: 1fr;
  }
  /* Stack text above image regardless of desktop side. */
  .tropic-arts-site .ta-frow[data-side="left"] .ta-frow-text,
  .tropic-arts-site .ta-frow[data-side="left"] .ta-frow-media {
    order: 0;
  }
}

/* ------------------------------------------------------------ Feature cards
   Horizontal carousel of gray-outlined white cards (image on top), flowing
   edge-to-edge with prev/next arrows. */
.tropic-arts-site .ta-cards {
  border-bottom: 1px solid var(--ta-hair);
  padding-block: clamp(64px, 9vw, 104px);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-cards-head {
  max-width: var(--container);
  margin: 0 auto clamp(28px, 4vw, 44px);
  padding-inline: clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-cards-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-cards-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.2vw, 2.625rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-cards-viewport {
  position: relative;
}
/* The scroller: edge-to-edge, snapping. The inline padding aligns the first
   card with the page container and lets the last card rest at the right edge;
   scroll-padding keeps snapped cards off the container edge. */
.tropic-arts-site .ta-cards-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: clamp(24px, 5vw, 72px);
  padding: 6px clamp(24px, 5vw, 72px);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tropic-arts-site .ta-cards-track::-webkit-scrollbar {
  display: none;
}
.tropic-arts-site .ta-card {
  flex: 0 0 clamp(288px, 40vw, 550px);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--ta-canvas);
  border: 1px solid var(--ta-border);
  border-radius: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}
.tropic-arts-site a.ta-card:hover {
  box-shadow: 0 18px 44px rgba(16, 19, 21, 0.12);
  transform: translateY(-4px);
  border-color: var(--ta-accent-strong);
}
.tropic-arts-site .ta-card-media {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ta-panel);
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.tropic-arts-site .ta-card-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #8a9092;
}
.tropic-arts-site .ta-card-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(22px, 2.4vw, 30px);
}
.tropic-arts-site .ta-card-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 12px;
}
.tropic-arts-site .ta-card-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: 1.375rem;
  line-height: 1.2;
  margin: 0 0 12px;
}
.tropic-arts-site .ta-card-body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: var(--body);
  margin: 0;
}
.tropic-arts-site .ta-card-link {
  /* auto top margin pins the link to the bottom of the (equal-height) card;
     the min gap keeps it off the body when the copy is long. */
  margin-top: auto;
  padding-top: 20px;
  font-size: 13px;
  color: var(--ta-accent-strong);
  border-bottom: 1px solid var(--ta-accent-strong);
  padding-bottom: 2px;
  align-self: flex-start;
}
.tropic-arts-site a.ta-card:hover .ta-card-link {
  color: var(--ink);
  border-color: var(--ink);
}
/* Prev/next arrows — circular, overlaid at the vertical center of the card
   media. Hidden unless the track overflows; each disables at its end. */
.tropic-arts-site .ta-cards-arrow {
  position: absolute;
  top: calc((clamp(288px, 40vw, 550px) * 10 / 16) / 2 + 6px);
  transform: translateY(-50%);
  z-index: 3;
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ta-border);
  border-radius: 50%;
  background: var(--ta-canvas);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(16, 19, 21, 0.12);
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.tropic-arts-site .ta-cards-viewport.has-nav .ta-cards-arrow {
  display: flex;
}
.tropic-arts-site .ta-cards-arrow--prev {
  left: clamp(10px, 2.5vw, 34px);
}
.tropic-arts-site .ta-cards-arrow--next {
  right: clamp(10px, 2.5vw, 34px);
}
.tropic-arts-site .ta-cards-arrow:hover:not(:disabled) {
  background: var(--ink);
  color: var(--ta-canvas);
}
.tropic-arts-site .ta-cards-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------ Feature split
   Full-width, edge-to-edge split section: an image column beside a padded
   text card, alternating side + background tone down the page. The two
   columns are equal height (grid stretch), so the image always matches the
   height of the text card next to it and crops with object-fit: cover. */
.tropic-arts-site .ta-split {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-split[data-tone="panel"] {
  background: var(--ta-panel);
}
.tropic-arts-site .ta-split-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  /* Padded like the AI showcase: the row sits inside the section with room
     above and below, so the image never touches the top/bottom edges. */
  padding: clamp(72px, 9vw, 116px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: stretch;
}
.tropic-arts-site .ta-split-media {
  position: relative;
  overflow: hidden;
  min-height: 400px;
  /* A contained, floating frame — rounded corners + a soft even shadow,
     matching the browser-frame mock in the AI showcase. */
  border-radius: 6px;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  background: repeating-linear-gradient(
    -45deg,
    var(--ta-panel) 0 14px,
    #e4e8e8 14px 28px
  );
}
.tropic-arts-site .ta-split-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tropic-arts-site .ta-split-ph {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: #8a9092;
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 8px 14px;
}
.tropic-arts-site .ta-split-text {
  display: flex;
  align-items: center;
}
.tropic-arts-site .ta-split-text-inner {
  max-width: 520px;
}
.tropic-arts-site .ta-split-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-split-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.2vw, 2.625rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-split-body {
  line-height: 1.75;
  font-weight: 500;
  margin: 22px 0 0;
}
.tropic-arts-site .ta-split-link {
  display: inline-block;
  margin-top: 26px;
  color: var(--ta-accent-strong);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--ta-accent-strong);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tropic-arts-site .ta-split-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
/* Image side: order the two grid cells (default DOM order is media, text). */
.tropic-arts-site .ta-split[data-side="left"] .ta-split-media {
  order: 1;
}
.tropic-arts-site .ta-split[data-side="left"] .ta-split-text {
  order: 2;
}
.tropic-arts-site .ta-split[data-side="right"] .ta-split-media {
  order: 2;
}
.tropic-arts-site .ta-split[data-side="right"] .ta-split-text {
  order: 1;
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-split-inner {
    grid-template-columns: 1fr;
    padding: clamp(48px, 9vw, 72px) clamp(24px, 6vw, 40px);
    gap: clamp(28px, 6vw, 44px);
  }
  /* Stack the image above the text regardless of desktop side. */
  .tropic-arts-site .ta-split[data-side] .ta-split-media {
    order: 1;
  }
  .tropic-arts-site .ta-split[data-side] .ta-split-text {
    order: 2;
  }
  .tropic-arts-site .ta-split-media {
    min-height: 280px;
  }
}

/* ------------------------------------------------------------ Feature bento
   A grid of light capability cards — text + link on top, image below.
   3-up on desktop, 2-up on tablet, 1-up on mobile. The Tropic Arts brand card
   leads in the DOM (so it comes first on tablet + mobile); desktop drops it
   into the middle row as a full-width band. */
.tropic-arts-site .ta-bento {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-bento-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(72px, 9vw, 116px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-bento-head {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.tropic-arts-site .ta-bento-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-bento-heading {
  font-family: var(--heading-font);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.2vw, 2.625rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 1.6vw, 24px);
}
/* Card: text block on top, image pinned to the bottom, in a rounded frame. */
.tropic-arts-site .ta-bento-card {
  display: flex;
  flex-direction: column;
  background: var(--ta-canvas);
  border: 1px solid var(--ta-hair);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.tropic-arts-site a.ta-bento-card:hover {
  border-color: var(--ta-border);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
.tropic-arts-site .ta-bento-card-body {
  padding: clamp(24px, 2vw, 32px) clamp(24px, 2vw, 32px) clamp(20px, 1.6vw, 26px);
}
.tropic-arts-site .ta-bento-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Light on the dark card fill. */
  color: rgba(255, 255, 255, 0.5);
  margin: 0 0 12px;
}
.tropic-arts-site .ta-bento-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ta-canvas);
  font-size: clamp(1.35rem, 1.7vw, 1.6rem);
  line-height: 1.2;
  margin: 0;
}
.tropic-arts-site .ta-bento-body {
  line-height: 1.7;
  font-weight: 500;
  font-size: 0.95rem;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.7);
}
.tropic-arts-site .ta-bento-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--ta-canvas);
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
  padding-bottom: 2px;
  transition: opacity 0.2s ease;
}
.tropic-arts-site a.ta-bento-card:hover .ta-bento-link {
  opacity: 0.6;
}
/* The transparent card mockups sit on a floating white box on the dark card. */
.tropic-arts-site .ta-bento-media {
  margin: auto clamp(18px, 1.8vw, 24px) clamp(18px, 1.8vw, 24px);
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}
.tropic-arts-site .ta-bento-media img {
  width: 100%;
  height: auto;
  display: block;
}
.tropic-arts-site .ta-bento-ph {
  display: block;
  width: 100%;
  height: 100%;
}
/* Brand card: centred logo + tagline + CTA, on a light panel to set it apart. */
.tropic-arts-site .ta-bento-brand {
  background: var(--ta-panel);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.tropic-arts-site .ta-bento-brand-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 580px;
  padding: clamp(40px, 5vw, 60px) clamp(24px, 4vw, 48px);
}
.tropic-arts-site .ta-bento-brand-logo {
  height: 40px;
  width: auto;
  margin-bottom: 22px;
}
.tropic-arts-site .ta-bento-brand-heading {
  font-family: var(--heading-font);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-bento-brand-sub {
  line-height: 1.7;
  font-weight: 500;
  margin: 16px 0 0;
  max-width: 460px;
}
.tropic-arts-site .ta-bento-brand-cta {
  margin-top: 26px;
}
/* Tablet: two columns. The brand card leads (DOM-first), then the features. */
@media (min-width: 641px) {
  .tropic-arts-site .ta-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Desktop: three columns. Row-major fill puts the brand card top-left, then
   the five features across the two rows. */
@media (min-width: 1024px) {
  .tropic-arts-site .ta-bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* -------------------------------------------------------------- AI showcase */
.tropic-arts-site .ta-ai {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-ai-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
.tropic-arts-site .ta-ai-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-ai-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.2vw, 2.625rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-ai-lead {
  line-height: 1.75;
  font-weight: 500;
  margin: 22px 0 0;
  max-width: 480px;
}
.tropic-arts-site .ta-ai-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tropic-arts-site .ta-ai-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tropic-arts-site .ta-ai-point .ta-mega-ico {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.tropic-arts-site .ta-ai-point-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tropic-arts-site .ta-ai-point-title {
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.tropic-arts-site .ta-ai-point-body {
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--body);
  max-width: 44ch;
}
.tropic-arts-site .ta-ai-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
/* The base .ta2-btn ships with no padding/size — each context supplies its own.
   Match the hero CTAs so these pills aren't squished in the narrower column. */
.tropic-arts-site .ta-ai-cta .ta2-btn {
  font-size: 0.8125rem;
  padding: 18px 36px;
}
/* Chat + preview mock — reuses the hero browser-chrome look. */
.tropic-arts-site .ta-ai-frame {
  border: 1px solid var(--ta-hair);
  /* Matches .ta-hero-frame — the two windows on this page read as one device. */
  border-radius: 18px;
  overflow: hidden;
  background: var(--ta-canvas);
  box-shadow: 0 24px 60px rgba(25, 24, 23, 0.07);
}
.tropic-arts-site .ta-ai-frame-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-ai-dot {
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: #c9cdcc;
}
.tropic-arts-site .ta-ai-frame-title {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ta-muted);
}
.tropic-arts-site .ta-ai-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
}
.tropic-arts-site .ta-ai-msg {
  max-width: 82%;
  padding: 12px 15px;
  border-radius: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 500;
}
.tropic-arts-site .ta-ai-msg--assistant {
  align-self: flex-start;
  background: var(--ta-accent-wash);
  color: var(--ta-accent-wash-ink);
  border-bottom-left-radius: 4px;
}
.tropic-arts-site .ta-ai-msg--you {
  align-self: flex-end;
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.tropic-arts-site .ta-ai-preview {
  height: 340px;
  border-top: 1px solid var(--ta-hair);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-ai-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.tropic-arts-site .ta-ai-preview-ph {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #8a9092;
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 7px 12px;
  border-radius: 0;
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-ai-inner {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------- Suite breadth (one login, one bill) */
/* Sits between the dark pillar strip and the AI showcase, so it opens on the
   panel tone to break the run of canvas-white sections. */
.tropic-arts-site .ta-suite {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-suite-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-suite-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.tropic-arts-site .ta-suite-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-suite-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-suite-lead {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
/* Three proof chips — the headline claim, restated as facts. */
.tropic-arts-site .ta-suite-proofs {
  list-style: none;
  margin: clamp(32px, 4vw, 44px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.tropic-arts-site .ta-suite-proof {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px 22px;
  background: var(--ta-canvas);
  border: 1px solid var(--ta-hair);
  /* Same 18px frame as the bento cards further down the page. */
  border-radius: 18px;
}
.tropic-arts-site .ta-suite-proof .ta-mega-ico {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-top: 1px;
}
.tropic-arts-site .ta-suite-proof-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tropic-arts-site .ta-suite-proof-title {
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.tropic-arts-site .ta-suite-proof-note {
  font-size: 0.85rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--body);
}
/* Showcase window — the same browser chrome as the hero and the domain shot,
   holding a stack of storefront screenshots that crossfade. Capped at the
   hero's 980px so the two windows on this page read at one scale. */
.tropic-arts-site .ta-suite-media {
  margin-top: clamp(36px, 5vw, 56px);
  max-width: 980px;
  margin-inline: auto;
}
.tropic-arts-site .ta-suite-frame {
  position: relative;
  border: 1px solid var(--ta-hair);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ta-canvas);
  box-shadow: 0 24px 60px rgba(25, 24, 23, 0.07);
}
.tropic-arts-site .ta-suite-frame-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-suite-frame-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9cdcc;
}
/* Out-specifies the dot rule above — the name is a span in the bar too. */
.tropic-arts-site .ta-suite-frame-bar .ta-suite-frame-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ta-muted);
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The slides share one aspect, so the body takes it and nothing is cropped.
   The hatched ground only shows through the empty state. */
.tropic-arts-site .ta-suite-frame-body {
  position: relative;
  aspect-ratio: 1223 / 779;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ta-canvas);
}
/* Fade in UP: the incoming slide rises into place while the outgoing one only
   fades. The transform on the resting state is delayed past the fade so a
   slide that has just left doesn't visibly slide back down before it hides. */
.tropic-arts-site .ta-suite-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: 1;
  transform: translateY(18px);
  transition:
    opacity 0.9s ease,
    transform 0s linear 0.9s;
}
.tropic-arts-site .ta-suite-slide.is-active {
  opacity: 1;
  z-index: 2;
  transform: translateY(0);
  transition:
    opacity 0.9s ease,
    transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Both axes, deliberately — ThemeImg emits width/height hints, and a rule that
   sets only one of them leaves the other standing (see components/ThemeImg). */
.tropic-arts-site .ta-suite-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-suite-slide {
    transition: none;
    transform: none;
  }
}
.tropic-arts-site .ta-suite-ph {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #8a9092;
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 7px 12px;
}
/* Four capability columns — the old home-page checklist, now icon-headed. */
.tropic-arts-site .ta-suite-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: clamp(40px, 5vw, 60px);
}
.tropic-arts-site .ta-suite-group-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin: 0 0 16px;
}
.tropic-arts-site .ta-suite-group-head .ta-mega-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.tropic-arts-site .ta-suite-group-title {
  font-family: var(--body-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ta-accent);
}
.tropic-arts-site .ta-suite-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
}
.tropic-arts-site .ta-suite-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--ink-soft);
}
.tropic-arts-site .ta-suite-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 4vw, 52px);
}
.tropic-arts-site .ta-suite-cta .ta2-btn {
  font-size: 0.8125rem;
  padding: 18px 36px;
}
@media (max-width: 900px) {
  .tropic-arts-site .ta-suite-proofs {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-suite-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
  }
}
@media (max-width: 520px) {
  .tropic-arts-site .ta-suite-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------- Domain & mailbox */
/* Two columns with the media on the LEFT by default, so it mirrors the AI
   showcase further up the page instead of repeating it. The text column stays
   first in the DOM — the swap is an `order` on wide screens only, which leaves
   the small-screen stack reading heading-first. */
.tropic-arts-site .ta-dm {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-dm-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(40px, 6vw, 72px);
  align-items: center;
}
@media (min-width: 821px) {
  .tropic-arts-site .ta-dm[data-side="left"] .ta-dm-media {
    order: -1;
  }
}
.tropic-arts-site .ta-dm-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-dm-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.2vw, 2.625rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-dm-lead {
  line-height: 1.75;
  font-weight: 500;
  margin: 22px 0 0;
  max-width: 520px;
}
.tropic-arts-site .ta-dm-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.tropic-arts-site .ta-dm-point {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.tropic-arts-site .ta-dm-point .ta-mega-ico {
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  margin-top: 2px;
}
.tropic-arts-site .ta-dm-point-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tropic-arts-site .ta-dm-point-title {
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink);
}
.tropic-arts-site .ta-dm-point-body {
  font-size: 0.9rem;
  line-height: 1.65;
  font-weight: 500;
  color: var(--body);
  max-width: 46ch;
}
.tropic-arts-site .ta-dm-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}
.tropic-arts-site .ta-dm-cta .ta2-btn {
  font-size: 0.8125rem;
  padding: 18px 36px;
}
/* The shot sits in the same browser chrome as the hero's showcase cards —
   rounded shell, hairline bar, three dots, centered name. The shell clips, so
   only it carries a radius. */
.tropic-arts-site .ta-dm-frame {
  border: 1px solid var(--ta-hair);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ta-canvas);
  box-shadow: 0 24px 60px rgba(25, 24, 23, 0.07);
}
.tropic-arts-site .ta-dm-frame-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-dm-frame-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9cdcc;
}
/* Out-specifies the dot rule above — the name is a span in the bar too. */
.tropic-arts-site .ta-dm-frame-bar .ta-dm-frame-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ta-muted);
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tropic-arts-site .ta-dm-frame-body {
  height: clamp(280px, 32vw, 420px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-dm-frame-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.tropic-arts-site .ta-dm-ph {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #8a9092;
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 7px 12px;
}
/* The sample address under the frame — monospace so it reads as an address
   rather than as more marketing copy. */
.tropic-arts-site .ta-dm-address {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 14px 0 0;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--ta-muted);
}
.tropic-arts-site .ta-dm-address .ta-mega-ico {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-dm-inner {
    grid-template-columns: 1fr;
  }
}

/* ----------------------------------------------------------- Templates grid */
.tropic-arts-site .ta-templates {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-templates-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-templates-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.tropic-arts-site .ta-templates-head h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-templates-head p {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
.tropic-arts-site .ta-templates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.tropic-arts-site .ta-tpl-card {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tropic-arts-site .ta-tpl-card--ph {
  pointer-events: none;
}
/* The box tracks the SHOT'S aspect ratio, not a fixed height.
   `.ta-tpl-media` used to be `height: 300px`, which only matched the captured
   screenshot at the one card width the capture was sized for (408px on a
   1440px desktop → 408/300 = 1.36, exactly the shot's 900x662). At any other
   width the card's aspect drifted while the image's did not, and `object-fit:
   cover` ate the difference: at a 420px viewport the card is 372x300 = 1.24, so
   the shot scaled to 405px wide inside a 370px box and lost ~18px off EACH
   SIDE — enough to clip a theme's nav logo and the left edge of its hero copy.
   With the ratio pinned there is no crop at any width. Keep this in step with
   OUT_W/OUT_H in scripts/capture-theme-shots.mjs. */
.tropic-arts-site .ta-tpl-media {
  position: relative;
  border: 1px solid var(--ta-hair);
  border-radius: 0;
  aspect-ratio: 900 / 662;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* A flat panel grey behind the shot/iframe — stripes competed with the very
     designs the card exists to show. */
  background: var(--ta-panel);
  transition: transform 0.25s ease;
}
.tropic-arts-site .ta-tpl-card:hover .ta-tpl-media {
  transform: translateY(-4px);
}
.tropic-arts-site .ta-tpl-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Live theme preview: the iframe renders the site at ~4× the card width, then
   scales down to fill the card — so it always shows a desktop-width render of
   the real page (mirrors the Sites-console thumbnail technique). */
.tropic-arts-site .ta-tpl-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 400%;
  height: 400%;
  border: 0;
  transform: scale(0.25);
  transform-origin: top left;
  pointer-events: none;
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-tpl-ph {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: #8a9092;
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 6px 12px;
  border-radius: 0;
  text-align: center;
}
.tropic-arts-site .ta-tpl-new {
  position: absolute;
  top: 12px;
  left: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ta-accent-wash);
  color: var(--ta-accent-wash-ink);
  padding: 4px 10px;
  border-radius: 0;
}
.tropic-arts-site .ta-tpl-meta {
  margin-top: 14px;
}
.tropic-arts-site .ta-tpl-name {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.375rem;
  letter-spacing: 0;
  color: var(--ink);
}
.tropic-arts-site .ta-templates-foot {
  text-align: center;
  margin-top: 52px;
}
.tropic-arts-site .ta-templates-foot a {
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tropic-arts-site .ta-templates-foot a:hover {
  color: var(--body);
  border-color: var(--body);
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-templates-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .tropic-arts-site .ta-templates-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------------------------------- Below the fold */
/* One template's page scrolling inside a browser window, beside the list of
   what a page actually ships. The catalog above sells on first screens; this
   section is the rest of the page. The strip inside the window is moved by PAGE
   scroll from config/tropic-arts.tsx (BelowFoldSection) — everything here is
   the frame it travels inside. */
.tropic-arts-site .ta-fold {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-fold-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(40px, 5vw, 72px);
  align-items: start;
}
/* Scroll runway. The strip travels its whole height across the section's
   transit, so the section's height IS the scrub's pace: at its natural ~880px
   a ten-screen page flies past at 1.7x the reader's own scrolling. This buys
   back a rate close to the source site's (~1.2x), and both columns stick so the
   extra height reads as a held moment rather than an empty band.

   `align-items: start` above is load-bearing — a stretched grid item is exactly
   as tall as its track, which leaves sticky nothing to move within. Nothing
   between here and the page root may set `overflow` for the same reason.

   Desktop only: the single-column stack below pins nothing, and 175vh of
   runway on a phone is a scroll through an empty screen. */
@media (min-width: 901px) {
  .tropic-arts-site .ta-fold-inner {
    min-height: 175vh;
  }
  .tropic-arts-site .ta-fold-copy,
  .tropic-arts-site .ta-fold-stage {
    position: sticky;
    top: clamp(64px, 12vh, 120px);
  }
}

/* --- copy, with the scroll-depth rail --- */
.tropic-arts-site .ta-fold-copy {
  position: relative;
  padding-left: 30px;
  max-width: 560px;
}
.tropic-arts-site .ta-fold-rail {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--ta-hair);
  overflow: hidden;
}
/* Fills with the window's scroll depth — the section's argument, drawn. scaleY
   rather than height, so the per-scroll write stays on the compositor and never
   asks for layout. */
.tropic-arts-site .ta-fold-rail-fill {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(var(--ta-accent), var(--ta-accent-wash));
  transform: scaleY(0);
  transform-origin: top;
}
.tropic-arts-site .ta-fold-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-fold-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-fold-lead {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
.tropic-arts-site .ta-fold-list {
  list-style: none;
  margin: clamp(26px, 3vw, 34px) 0 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.tropic-arts-site .ta-fold-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  font-weight: 500;
}
.tropic-arts-site .ta-fold-item .ta-mega-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin-top: -1px;
}

/* --- the window --- */
.tropic-arts-site .ta-fold-frame {
  position: relative;
  border: 1px solid var(--ta-hair);
  border-radius: 18px;
  overflow: hidden;
  background: var(--ta-canvas);
  box-shadow: 0 -20px 60px rgba(25, 24, 23, 0.05);
}
.tropic-arts-site .ta-fold-frame-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
/* Circles, like the hero window's dots (which the square-everything sweep
   restores further down) — not the squared-off default. */
.tropic-arts-site .ta-fold-frame-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c9cdcc;
}
/* Out-specify the dot rule — the label is a span in the same bar. */
.tropic-arts-site .ta-fold-frame-bar .ta-fold-frame-name {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ta-muted);
  white-space: nowrap;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The viewport the page travels through. Its height is what decides how much
   of the site is legible at once — deep enough to read a section, short enough
   that the section itself doesn't run away with the home page. */
.tropic-arts-site .ta-fold-screen {
  position: relative;
  overflow: hidden;
  height: clamp(400px, 44vw, 620px);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-fold-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform;
}
/* Both axes, deliberately — ThemeImg emits width/height hints, and a rule that
   sets only one of them leaves the other standing (see components/ThemeImg). */
.tropic-arts-site .ta-fold-strip img {
  display: block;
  width: 100%;
  height: auto;
}
.tropic-arts-site .ta-fold-ph {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
  color: var(--ta-muted);
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 8px 14px;
  white-space: nowrap;
}
.tropic-arts-site .ta-fold-caption {
  margin: 14px 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--ta-muted);
}
@media (max-width: 900px) {
  .tropic-arts-site .ta-fold-inner {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .ta-fold-copy {
    max-width: none;
  }
  .tropic-arts-site .ta-fold-screen {
    height: clamp(300px, 74vw, 420px);
  }
}

/* ---------------------------------------------------------------- Pricing */
.tropic-arts-site .ta-pricing {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-pricing-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-pricing-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.tropic-arts-site .ta-pricing-head h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-pricing-head p {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
.tropic-arts-site .ta-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: stretch;
}
.tropic-arts-site .ta-plan {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ta-hair);
  border-radius: 18px;
  padding: 36px 32px;
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-plan[data-featured="true"] {
  border-color: var(--ta-accent);
  box-shadow: 0 20px 50px rgba(92, 122, 52, 0.08);
}
.tropic-arts-site .ta-plan-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 28px;
}
.tropic-arts-site .ta-plan-name {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  letter-spacing: 0;
  color: var(--ink);
}
.tropic-arts-site .ta-plan-badge {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ta-accent-wash);
  color: var(--ta-accent-wash-ink);
  padding: 4px 10px;
  border-radius: 0;
  white-space: nowrap;
}
.tropic-arts-site .ta-plan-price {
  margin-top: 22px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.tropic-arts-site .ta-plan-amount {
  font-family: var(--heading-font);
  font-size: 2.75rem;
  letter-spacing: 0;
  color: var(--ink);
  line-height: 1;
}
.tropic-arts-site .ta-plan-suffix {
  font-size: 14px;
  color: var(--body);
}
/* "billed monthly / yearly" under the amount. Rendered as a nbsp on the tiers
   that cost the same either way (the free trial), so flipping the switch never
   shifts the cards. */
.tropic-arts-site .ta-plan-note {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ta-muted);
  margin: 8px 0 0;
}
.tropic-arts-site .ta-plan-blurb {
  font-size: 14px;
  line-height: 1.7;
  margin: 16px 0 24px;
}
/* The switch sits between the section head and the plan cards; the head's own
   bottom margin already opens the gap above it. */
.tropic-arts-site .ta-pricing .ta-billing {
  margin-top: calc(clamp(40px, 6vw, 64px) * -0.45);
}
.tropic-arts-site .ta-plan-perks {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
  flex: 1;
}
.tropic-arts-site .ta-plan-perks li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--ink-soft);
}
.tropic-arts-site .ta-check {
  color: var(--ta-accent);
  font-weight: 700;
  flex: 0 0 auto;
}
/* Pricing-plan checkmarks — green (the feature-checklist keeps blue). */
.tropic-arts-site .ta-pricing .ta-check {
  color: var(--ta-accent);
}
.tropic-arts-site .ta-plan-cta {
  width: 100%;
  padding: 13px 0;
  font-size: 14px;
}

/* Pricing grid — stack tiers on narrow viewports. */
@media (max-width: 900px) {
  .tropic-arts-site .ta-pricing-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-inline: auto;
  }
}

/* ----------------------------------------------------------------- About */
.tropic-arts-site .ta-about {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-about-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: start;
}
.tropic-arts-site .ta-about-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-about-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  line-height: 1.14;
  margin: 0;
}
.tropic-arts-site .ta-about-title span {
  display: block;
}
.tropic-arts-site .ta-about-body p {
  line-height: 1.8;
  font-weight: 500;
  margin: 0 0 1.1em;
  max-width: 54ch;
}
.tropic-arts-site .ta-about-body p:last-of-type {
  margin-bottom: 0;
}
.tropic-arts-site .ta-about-link {
  display: inline-block;
  margin-top: 24px;
  color: var(--ta-accent-strong);
  text-decoration: none;
  font-size: 14px;
  border-bottom: 1px solid var(--ta-accent-strong);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tropic-arts-site .ta-about-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-about-inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ------------------------------------------------------------- Closing CTA */
.tropic-arts-site .ta-cta {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-cta-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(72px, 11vw, 120px) clamp(24px, 5vw, 72px);
  text-align: center;
}
.tropic-arts-site .ta-cta-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2.25rem, 4.4vw, 3.25rem);
  line-height: 1.12;
  margin: 0 auto;
  max-width: 680px;
  text-wrap: balance;
}
.tropic-arts-site .ta-cta-body {
  max-width: 520px;
  margin: 22px auto 0;
  line-height: 1.75;
  font-weight: 500;
}
.tropic-arts-site .ta-cta-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 36px;
}
.tropic-arts-site .ta-cta-actions .ta2-btn {
  font-size: 0.8125rem;
  padding: 18px 36px;
}
.tropic-arts-site .ta-cta-note {
  font-size: 13px;
  margin: 18px 0 0;
  color: var(--ta-muted);
}
/* Ink (dark) variant — bookends the dark announcement bar. */
.tropic-arts-site .ta-cta[data-tone="ink"] {
  background: var(--ink);
  border-bottom-color: rgba(255, 255, 255, 0.1);
}
.tropic-arts-site .ta-cta[data-tone="ink"] .ta-cta-inner {
  border-inline-color: rgba(255, 255, 255, 0.1);
}
.tropic-arts-site .ta-cta[data-tone="ink"] .ta-cta-title {
  color: var(--ta-canvas);
}
.tropic-arts-site .ta-cta[data-tone="ink"] .ta-cta-body {
  color: rgba(251, 252, 252, 0.82);
}
.tropic-arts-site .ta-cta[data-tone="ink"] .ta-cta-note {
  color: rgba(251, 252, 252, 0.55);
}
.tropic-arts-site .ta-cta[data-tone="ink"] .ta2-btn--fill {
  background: var(--ta-canvas);
  color: var(--ink);
  border-color: var(--ta-canvas);
}
.tropic-arts-site .ta-cta[data-tone="ink"] .ta2-btn--fill:hover {
  background: var(--ta-accent-strong);
  border-color: var(--ta-accent-strong);
  color: var(--btn-ink);
}
.tropic-arts-site .ta-cta[data-tone="ink"] .ta2-btn--ghost {
  color: var(--ta-canvas);
  border-color: rgba(255, 255, 255, 0.4);
}
.tropic-arts-site .ta-cta[data-tone="ink"] .ta2-btn--ghost:hover {
  border-color: var(--ta-canvas);
}
/* Site-collage backdrop (home's closing band): the old home hero's slow
   two-row site marquee — tilted, rows drifting in opposite directions —
   behind a centered charcoal card. Reuses the hero collage's
   ta-scrollLeft/ta-scrollRight keyframes. */
.tropic-arts-site .ta-cta--collage {
  position: relative;
  overflow: hidden;
}
.tropic-arts-site .ta-cta-collage {
  position: absolute;
  inset: -140px -100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  transform: rotate(-8deg);
  pointer-events: none;
}
.tropic-arts-site .ta-cta-collage-row {
  display: flex;
  gap: 24px;
  width: max-content;
}
.tropic-arts-site .ta-cta-collage-row--left {
  animation: ta-scrollLeft 150s linear infinite;
}
.tropic-arts-site .ta-cta-collage-row--right {
  animation: ta-scrollRight 165s linear infinite;
}
.tropic-arts-site .ta-cta-tile {
  flex: 0 0 auto;
  width: 320px;
  height: 430px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
.tropic-arts-site .ta-cta-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Scrim between the marquee and the card, so the tiles read as background. */
.tropic-arts-site .ta-cta--collage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(16, 19, 21, 0.5);
}
.tropic-arts-site .ta-cta--collage .ta-cta-inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(96px, 13vw, 150px);
}
.tropic-arts-site .ta-cta-card {
  max-width: 760px;
  margin-inline: auto;
  padding: clamp(40px, 6vw, 64px) clamp(28px, 5vw, 56px);
  background: var(--ta-charcoal);
  border: 1px solid var(--ta-hair-dark);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-cta-collage-row {
    animation: none;
  }
}

/* ------------------------------------------------------------ Page header */
.tropic-arts-site .ta-phead {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-phead-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(64px, 9vw, 110px) clamp(24px, 5vw, 72px) clamp(48px, 7vw, 72px);
  text-align: center;
}
.tropic-arts-site .ta-phead-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
/* Clickable breadcrumb trail (replaces the eyebrow on support pages). Wears the
   eyebrow's treatment exactly — same 12px / 600 / 0.12em / 18px — since it sits
   in the eyebrow's slot; inline-flex here is load-bearing, unlike on an eyebrow:
   a trail has real children to space. Centered where the header is centered
   (PageHeader, SupportSearch). */
.tropic-arts-site .ta-crumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 18px;
}
.tropic-arts-site .ta-crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.tropic-arts-site .ta-crumbs a {
  color: var(--ta-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
.tropic-arts-site .ta-crumbs a:hover {
  color: var(--ta-accent-strong);
  text-decoration: underline;
}
.tropic-arts-site .ta-crumb-cur {
  color: var(--ta-muted);
}
.tropic-arts-site .ta-crumb-sep {
  color: var(--ta-border);
  font-weight: 400;
}
.tropic-arts-site .ta-phead-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2.5rem, 5vw, 3.75rem);
  line-height: 1.08;
  margin: 0 auto;
  max-width: 760px;
  text-wrap: balance;
}
.tropic-arts-site .ta-phead-sub {
  max-width: 560px;
  margin: 24px auto 0;
  line-height: 1.75;
  font-weight: 500;
}
.tropic-arts-site .ta-phead-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
}
.tropic-arts-site .ta-phead-actions .ta2-btn {
  font-size: 0.8125rem;
  padding: 18px 36px;
}

/* ------------------------------------------------------ Feature checklist */
.tropic-arts-site .ta-incl {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-incl-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-incl-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(36px, 5vw, 56px);
}
.tropic-arts-site .ta-incl-head h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-incl-head p {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
.tropic-arts-site .ta-incl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.tropic-arts-site .ta-incl-title {
  font-family: var(--body-font);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 16px;
}
.tropic-arts-site .ta-incl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  font-size: 14px;
}
.tropic-arts-site .ta-incl-list li {
  display: flex;
  gap: 10px;
  align-items: baseline;
  color: var(--ink-soft);
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-incl-grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
  }
}
@media (max-width: 520px) {
  .tropic-arts-site .ta-incl-grid {
    grid-template-columns: 1fr;
  }
}
/* A checklist with only two groups centers them as a pair instead of
   left-aligning in the four-up grid the fuller home-page version uses. */
@media (min-width: 821px) {
  .tropic-arts-site .ta-incl-grid:not(:has(.ta-incl-group:nth-child(3))) {
    grid-template-columns: repeat(2, minmax(0, max-content));
    justify-content: center;
    column-gap: clamp(64px, 9vw, 140px);
  }
}

/* -------------------------------------------------------- How it works */
.tropic-arts-site .ta-steps {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-steps-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-steps-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.tropic-arts-site .ta-steps-head h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-steps-head p {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
.tropic-arts-site .ta-steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.tropic-arts-site .ta-step {
  padding-top: 22px;
  border-top: 2px solid var(--ta-hair);
}
.tropic-arts-site .ta-step-num {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  color: var(--ta-accent);
}
.tropic-arts-site .ta-step-title {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: 0;
  color: var(--ink);
  margin: 14px 0 0;
}
.tropic-arts-site .ta-step-body {
  line-height: 1.7;
  font-weight: 500;
  font-size: 14px;
  margin: 12px 0 0;
  max-width: 34ch;
}
@media (max-width: 720px) {
  .tropic-arts-site .ta-steps-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ---------------------------------------------------------- Pricing table */
.tropic-arts-site .ta-ptable {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-ptable-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-ptable-head-txt {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(32px, 4vw, 48px);
}
.tropic-arts-site .ta-ptable-head-txt h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-ptable-head-txt p {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
/* --- Monthly / yearly switch (sits between the head text and the table) --- */
.tropic-arts-site .ta-billing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto clamp(28px, 3.5vw, 40px);
}
.tropic-arts-site .ta-billing-switch {
  display: inline-flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--ta-border);
  border-radius: 999px;
  background: var(--ta-panel);
}
.tropic-arts-site .ta-billing-opt {
  appearance: none;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--body-font);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 22px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.tropic-arts-site .ta-billing-opt:hover {
  color: var(--ink);
}
/* The selected period reads as a filled pill — same --btn slot the CTAs use,
   so a merchant's brand colour carries through. */
.tropic-arts-site .ta-billing-opt.is-on {
  background: var(--btn);
  color: var(--btn-ink);
}
.tropic-arts-site .ta-billing-opt.is-on:hover {
  color: var(--btn-ink);
}
.tropic-arts-site .ta-billing-save {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ta-accent-wash-ink);
  background: var(--ta-accent-wash);
  padding: 6px 12px;
}
.tropic-arts-site .ta-ptable-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Room above the grid for the chip to straddle the top border. */
  padding-top: 22px;
}
.tropic-arts-site .ta-ptable-grid {
  display: grid;
  grid-template-columns: 1.7fr repeat(3, minmax(158px, 1fr));
  min-width: 840px;
  border: 1px solid var(--ta-hair);
  /* Blue accent line across the top; the chip sits centered on it. */
  border-top: 2px solid var(--ta-accent-strong);
  border-radius: 0;
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-pc {
  padding: 15px 22px;
  border-bottom: 1px solid var(--ta-hair);
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--body);
}
.tropic-arts-site .ta-pfeat {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--ta-panel);
}
/* Vertical lines between every column (label + the three plans). Group bars
   span the full width, so they break the lines into per-section runs. */
.tropic-arts-site .ta-pc:not(.ta-pfeat):not(.ta-ph-corner) {
  border-left: 1px solid var(--ta-hair);
}
/* Center the ✓ / — / short values in the plan columns. */
.tropic-arts-site .ta-pc:not(.ta-pfeat):not(.ta-ph) {
  justify-content: center;
  text-align: center;
}
.tropic-arts-site .ta-pfeat small {
  display: block;
  font-weight: 500;
  font-size: 0.76rem;
  color: var(--ta-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.tropic-arts-site .ta-pgroup {
  grid-column: 1 / -1;
  padding: 13px 22px;
  background: #e4e8e8;
  border-bottom: 1px solid var(--ta-hair);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ta-muted);
}
.tropic-arts-site .ta-ph {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  padding: 24px 22px;
}
.tropic-arts-site .ta-ph-corner {
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-ph-name {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.5rem;
  color: var(--ink);
  line-height: 1.1;
}
.tropic-arts-site .ta-ph-sub {
  font-size: 0.75rem;
  color: var(--ta-muted);
  font-weight: 500;
  /* Reserve two lines so every plan's price lands on the same row. */
  min-height: 2.9em;
  line-height: 1.4;
}
.tropic-arts-site .ta-ph-price {
  margin-top: 4px;
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.tropic-arts-site .ta-ph-price b {
  font-family: var(--heading-font);
  font-size: 2.75rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  color: var(--ink);
}
/* Small, raised currency mark — sits at the top-left of the amount. */
.tropic-arts-site .ta-ph-cur {
  font-family: var(--body-font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  align-self: flex-start;
  margin-top: 0.22em;
}
.tropic-arts-site .ta-ph-suf {
  font-size: 13px;
  color: var(--body);
}
/* "billed monthly / yearly" under the amount. Always emitted (as a nbsp on the
   free tier) so every CTA stays on the same line and nothing jumps when the
   period switch is flipped. --body, not --ta-muted: this is billing terms, not
   decoration, and --ta-muted only reaches 3.15:1 on the canvas. */
.tropic-arts-site .ta-ph-note {
  font-size: 12px;
  font-weight: 500;
  color: var(--body);
  line-height: 1.3;
}
.tropic-arts-site .ta-ph .ta2-btn {
  margin-top: 12px;
  width: 100%;
  font-size: 0.8rem;
  padding: 11px 14px;
}
/* Chip straddles the table's top border, centered over its column. */
.tropic-arts-site .ta-pbadge {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--ta-accent-strong);
  color: var(--btn-ink);
  padding: 5px 14px;
  border-radius: 0;
  z-index: 3;
}
.tropic-arts-site .ta-yes {
  color: var(--ta-accent); /* pricing-table checkmarks */
  font-weight: 700;
}
.tropic-arts-site .ta-no {
  color: var(--ta-border);
}
.tropic-arts-site .ta-pval {
  color: var(--ink-soft);
}
/* Rounded corners on the corner cells (grid has no overflow clip, so the chip
   can straddle the top); the last row drops its divider. */
.tropic-arts-site .ta-corner-tl {
  border-top-left-radius: 15px;
}
.tropic-arts-site .ta-corner-tr {
  border-top-right-radius: 15px;
}
.tropic-arts-site .ta-corner-bl {
  border-bottom-left-radius: 15px;
}
.tropic-arts-site .ta-corner-br {
  border-bottom-right-radius: 15px;
}
.tropic-arts-site .ta-row-end {
  border-bottom: none;
}
.tropic-arts-site .ta-ptable-hint {
  text-align: center;
  font-size: 12px;
  color: var(--ta-muted);
  margin: 16px 0 0;
}
.tropic-arts-site .ta-ptable-note {
  text-align: center;
  font-size: 12px;
  color: var(--ta-muted);
  margin: 10px auto 0;
  max-width: 620px;
  line-height: 1.6;
}
/* The grid fits without scrolling on wider screens — hide the hint there. */
@media (min-width: 900px) {
  .tropic-arts-site .ta-ptable-hint {
    display: none;
  }
}

/* ------------------------------------------------------------ Pricing add-ons
   One-time services below the plan table. Shares the table's canvas + hairline
   language so the two read as one page, not two bolted-together sections. */
.tropic-arts-site .ta-paddons {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-paddons-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(64px, 8vw, 96px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-paddons-head {
  text-align: center;
  max-width: 620px;
  margin: 0 auto clamp(32px, 4vw, 48px);
}
.tropic-arts-site .ta-paddons-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-paddons-head h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  line-height: 1.15;
  margin: 0;
}
.tropic-arts-site .ta-paddons-lead {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
.tropic-arts-site .ta-paddons-grid {
  display: grid;
  gap: 24px;
  max-width: 1080px;
  margin-inline: auto;
}
.tropic-arts-site .ta-addon {
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  padding: clamp(28px, 3.5vw, 44px);
  background: var(--ta-canvas);
  border: 1px solid var(--ta-hair);
  border-top: 2px solid var(--ta-accent-strong);
  border-radius: 15px;
}
.tropic-arts-site .ta-addon-name {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.tropic-arts-site .ta-addon-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 14px 0 0;
}
.tropic-arts-site .ta-addon-price b {
  font-family: var(--heading-font);
  font-size: 2.75rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ink);
}
.tropic-arts-site .ta-addon-cur {
  font-family: var(--body-font);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  align-self: flex-start;
  margin-top: 0.22em;
}
.tropic-arts-site .ta-addon-suf {
  font-size: 13px;
  color: var(--body);
}
.tropic-arts-site .ta-addon-blurb {
  font-size: 0.9375rem;
  line-height: 1.7;
  font-weight: 500;
  margin: 16px 0 0;
}
.tropic-arts-site .ta-addon-cta {
  margin-top: 24px;
  padding: 15px 30px;
  font-size: 0.75rem;
}
.tropic-arts-site .ta-addon-lists {
  display: grid;
  gap: 28px;
  align-content: start;
}
/* --body rather than the --ta-muted these small caps would normally take: at
   11px it only clears AA against the card on the darker ink. */
.tropic-arts-site .ta-addon-list h4 {
  font-family: var(--body-font);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
  margin: 0 0 14px;
}
.tropic-arts-site .ta-addon-inc,
.tropic-arts-site .ta-addon-exc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tropic-arts-site .ta-addon-inc li,
.tropic-arts-site .ta-addon-exc li {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* The exclusions read quieter than the inclusions, but they are the part a buyer
   is most likely to be surprised by — so they step down to --body, not to the
   sub-AA --ta-muted. The dash carries the "not included" signal instead. */
.tropic-arts-site .ta-addon-exc li {
  color: var(--body);
}
.tropic-arts-site .ta-paddons-note {
  text-align: center;
  font-size: 12px;
  color: var(--body);
  margin: 24px auto 0;
  max-width: 620px;
  line-height: 1.6;
}
/* Two columns once there's room: the offer on the left, what's in/out on the
   right. The lists split in two only on the widest step. */
@media (min-width: 760px) {
  .tropic-arts-site .ta-addon {
    grid-template-columns: minmax(260px, 0.9fr) 1.1fr;
    align-items: start;
  }
}
@media (min-width: 1100px) {
  .tropic-arts-site .ta-addon-lists {
    grid-template-columns: 1.15fr 1fr;
    gap: 36px;
  }
}

/* ------------------------------------------------------------- HeroCollage */
.tropic-arts-site .hero-collage {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 600px;
  max-height: 960px;
  overflow: hidden;
  background: var(--cream);
}
.tropic-arts-site .hero-collage__rows {
  position: absolute;
  inset: -10% -5%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  transform: rotate(-8deg) scale(1.15);
  transform-origin: center center;
}
.tropic-arts-site .hero-collage__row {
  display: flex;
  gap: 20px;
  width: max-content;
  will-change: transform;
}
.tropic-arts-site .hero-collage__row--left {
  animation: ta-scrollLeft 150s linear infinite;
}
.tropic-arts-site .hero-collage__row--right {
  animation: ta-scrollRight 165s linear infinite;
}
@keyframes ta-scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
@keyframes ta-scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}
.tropic-arts-site .hero-collage__tile {
  flex-shrink: 0;
  width: 380px;
  height: 520px;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15);
}
.tropic-arts-site .hero-collage__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.tropic-arts-site .hero-collage__content {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  bottom: 0;
  width: 33%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  padding: 3.5rem 3rem;
  background: rgba(255, 255, 255, 0.68);
  -webkit-backdrop-filter: blur(40px) saturate(150%);
  backdrop-filter: blur(40px) saturate(150%);
}
.tropic-arts-site .hero-collage__content-inner {
  align-self: center;
}
.tropic-arts-site .hero-collage__content > * {
  max-width: 400px;
}
.tropic-arts-site .hero-collage__content::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -80px;
  width: 80px;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.68),
    rgba(255, 255, 255, 0.45) 30%,
    rgba(255, 255, 255, 0.18) 60%,
    transparent 100%
  );
  pointer-events: none;
}
.tropic-arts-site .hero-collage__title {
  font-family: var(--heading-font);
  font-size: clamp(2.25rem, 4vw, 3.5rem);
  color: var(--ink);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.tropic-arts-site .hero-collage__subtitle {
  font-family: var(--body-font);
  font-size: clamp(0.9rem, 1.25vw, 1.05rem);
  color: rgba(66, 66, 74, 0.8);
  line-height: 1.6;
  margin-bottom: 2.25rem;
  font-weight: 400;
}
.tropic-arts-site .hero-collage:hover .hero-collage__row {
  animation-play-state: paused;
}
@media (max-width: 991.98px) {
  .tropic-arts-site .hero-collage {
    height: auto;
    max-height: none;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  .tropic-arts-site .hero-collage__content {
    position: relative;
    width: 100%;
    top: auto;
    left: auto;
    bottom: auto;
    padding: 6rem 2rem 3rem;
    align-items: center;
    text-align: center;
    background: var(--cream);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .tropic-arts-site .hero-collage__content::after {
    display: none;
  }
  .tropic-arts-site .hero-collage__title {
    max-width: 560px;
  }
  .tropic-arts-site .hero-collage__subtitle {
    max-width: 440px;
  }
  .tropic-arts-site .hero-collage__rows {
    position: relative;
    inset: auto;
    height: 720px;
    transform: rotate(-8deg) scale(1.25);
    flex-shrink: 0;
  }
  .tropic-arts-site .hero-collage__tile {
    width: 240px;
    height: 330px;
    border-radius: 0;
  }
  .tropic-arts-site .hero-collage__row--left {
    animation-duration: 60s;
  }
  .tropic-arts-site .hero-collage__row--right {
    animation-duration: 66s;
  }
}
@media (max-width: 575.98px) {
  .tropic-arts-site .hero-collage__content {
    padding: 3rem 1.5rem 2.5rem;
  }
  .tropic-arts-site .hero-collage__rows {
    height: 660px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .hero-collage__row {
    animation: none !important;
  }
}

/* ----------------------------------------------------------------- Feature */
.tropic-arts-site .ta-feature {
  overflow: hidden;
}
.tropic-arts-site .ta-feature-inner {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 8vw, 96px);
}
.tropic-arts-site .ta-feature-inner.img-left {
  grid-template-columns: 58% 42%;
}
.tropic-arts-site .ta-feature-inner.img-left .ta-feature-copy {
  order: 2;
}
.tropic-arts-site .ta-feature-copy h2 {
  margin-bottom: 1.5rem;
  color: var(--ink-soft);
}
.tropic-arts-site .ta-feature-copy h2.xl {
  font-size: clamp(2.5rem, 5vw, 4rem);
}
.tropic-arts-site .ta-feature-copy p {
  margin-bottom: 1.25rem;
}
.tropic-arts-site .ta-feature-media img {
  width: 100%;
}
.tropic-arts-site .ta-feature-media.plain img,
.tropic-arts-site .ta-feature-media.shadow img {
  border-radius: 0;
}
.tropic-arts-site .ta-feature-media.shadow img {
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
.tropic-arts-site .ta-feature-media.bleed img {
  width: calc(100% + ((100vw - 100%) / 2));
  max-width: none;
  border-radius: 0;
}
@media (max-width: 900px) {
  .tropic-arts-site .ta-feature-inner,
  .tropic-arts-site .ta-feature-inner.img-left {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .ta-feature-inner.img-left .ta-feature-copy {
    order: 0;
  }
  .tropic-arts-site .ta-feature-media.bleed img {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
  }
}

/* ---------------------------------------------------------------- TextBand */
.tropic-arts-site .ta-textband-inner {
  padding-block: clamp(40px, 6vw, 80px);
}
.tropic-arts-site .ta-textband h2 {
  margin-bottom: 1.5rem;
}
.tropic-arts-site .ta-textband-body {
  max-width: 52ch;
}

/* ----------------------------------------------------------------- Divider */
/* Full container-width row (no side padding) so the hr meets the side borders
   of the framed content sections above/below it. */
.tropic-arts-site .ta-divider-row {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}
.tropic-arts-site .ta-divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--line);
}

/* ----------------------------------------------- WhyChoose (.ta-section) --- */
.tropic-arts-site .ta-section {
  --accent: var(--ta-accent-dark);
  --accent-soft: rgba(var(--ta-accent-dark-rgb), 0.22);
  --accent-faint: rgba(var(--ta-accent-dark-rgb), 0.1);
  --accent-faint2: rgba(var(--ta-accent-dark-rgb), 0.07);
  --marquee-dur: 34s;
  --white: #fbfcfc;
  --gray: #b1b1b1;
  --hair: rgba(255, 255, 255, 0.08);

  position: relative;
  overflow: hidden;
  background: var(--ta-charcoal);
  padding: clamp(80px, 10vw, 120px) clamp(40px, 6vw, 72px)
    clamp(88px, 11vw, 128px);
  font-family: var(--body-font);
  color: var(--white);
}
.tropic-arts-site .ta-aurora {
  position: absolute;
  inset: -30% -10% auto;
  height: 150%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
      40% 50% at 20% 30%,
      var(--accent-faint),
      transparent 70%
    ),
    radial-gradient(38% 48% at 80% 62%, var(--accent-faint2), transparent 70%);
  animation: ta-drift 24s ease-in-out infinite alternate;
}
@keyframes ta-drift {
  from {
    transform: translate3d(-4%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(6%, 3%, 0) scale(1.14);
  }
}
.tropic-arts-site .ta-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}
.tropic-arts-site .ta-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* The dark-ground gold by name, NOT the scoped `--accent` alias. .ta-section
     and .studio both alias --accent to this exact token, so nothing changes
     there — but the Newsletter band (.ta-finalcta) sets no such scope, and a
     bare var(--accent) falls through to app/globals.css's console brown
     #8a5a2b, a colour belonging to no theme. */
  color: var(--ta-accent-dark);
  font-weight: 600;
  margin: 0 0 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.tropic-arts-site .ta-title {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.04;
  letter-spacing: 0.2px;
  margin: 0;
  color: var(--white);
  max-width: 14ch;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s var(--ease) 0.08s, transform 0.8s var(--ease) 0.08s;
}
.tropic-arts-site .ta-section.in-view .ta-eyebrow,
.tropic-arts-site .ta-section.in-view .ta-title {
  opacity: 1;
  transform: none;
}
.tropic-arts-site .ta-marquee {
  overflow: hidden;
  margin: 44px 0 70px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 24px 0;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 11%,
    #000 89%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 11%,
    #000 89%,
    transparent
  );
  opacity: 0;
  transition: opacity 1s var(--ease) 0.25s;
}
.tropic-arts-site .ta-section.in-view .ta-marquee {
  opacity: 1;
}
.tropic-arts-site .ta-track {
  display: flex;
  width: max-content;
  animation: ta-scroll var(--marquee-dur) linear infinite;
}
.tropic-arts-site .ta-track span {
  font-family: var(--heading-font);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  color: var(--white);
  padding: 0 38px;
  display: inline-flex;
  align-items: center;
  gap: 38px;
  white-space: nowrap;
}
.tropic-arts-site .ta-track span::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 0;
  /* Named token, not the scoped `--accent` alias. .ta-section aliases --accent
     to exactly this, so nothing changes here — but the selector above promises
     no ancestry, and outside that scope a bare var(--accent) resolves to
     app/globals.css's console brown #8a5a2b instead of failing loudly. */
  background: var(--ta-accent-dark);
}
.tropic-arts-site .ta-track .ta-muted {
  color: transparent;
  -webkit-text-stroke: 0.6px var(--gray);
}
@keyframes ta-scroll {
  to {
    transform: translateX(-50%);
  }
}
.tropic-arts-site .ta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--hair);
  border: 1px solid var(--hair);
}
.tropic-arts-site .ta-cell {
  /* Same ground as the section it sits in. This read used to be a scoped
     `--bg` alias, which meant a descendant depending on ancestry the selector
     never required — outside .ta-section it fell through to app/globals.css's
     light cream #faf7f2, a dark card gone light under its own white text.
     That alias is deleted; the named token has no such requirement. */
  background: var(--ta-charcoal);
  padding: 38px 30px 42px;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease),
    background 0.5s var(--ease);
  transition-delay: calc(var(--d) * 90ms + 0.35s);
}
.tropic-arts-site .ta-section.in-view .ta-cell {
  opacity: 1;
  transform: none;
}
.tropic-arts-site .ta-cell:hover {
  background: var(--ta-charcoal-lit);
}
.tropic-arts-site .ta-ico-wrap {
  display: block;
  margin-bottom: 24px;
}
.tropic-arts-site .ta-ico {
  width: 34px;
  height: 34px;
  display: block;
  /* Named token — see .ta-track span::after above for why. */
  stroke: var(--ta-accent-dark);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  animation: ta-float 6s ease-in-out infinite;
}
.tropic-arts-site .ta-cell:nth-child(2) .ta-ico {
  animation-delay: -1.5s;
}
.tropic-arts-site .ta-cell:nth-child(3) .ta-ico {
  animation-delay: -3s;
}
.tropic-arts-site .ta-cell:nth-child(4) .ta-ico {
  animation-delay: -4.5s;
}
@keyframes ta-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
}
.tropic-arts-site .ta-feat-title {
  font-family: var(--body-font);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--white);
  letter-spacing: 0.01em;
  margin: 0 0 10px;
}
.tropic-arts-site .ta-body {
  color: var(--gray);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 1000px) {
  .tropic-arts-site .ta-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .tropic-arts-site .ta-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-section * {
    animation: none !important;
  }
  .tropic-arts-site .ta-eyebrow,
  .tropic-arts-site .ta-title,
  .tropic-arts-site .ta-marquee,
  .tropic-arts-site .ta-cell {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------ Studio */
.tropic-arts-site .studio {
  --white: #fbfcfc;
  --gray: #8a8987;
  --gray-d: #b1b1b1;
  --accent: var(--ta-accent-dark);
  --accent-soft: rgba(var(--ta-accent-dark-rgb), 0.22);
  --accent-faint: rgba(var(--ta-accent-dark-rgb), 0.1);
  --accent-faint2: rgba(var(--ta-accent-dark-rgb), 0.07);
  --hair: rgba(255, 255, 255, 0.08);

  position: relative;
  overflow: hidden;
  background: var(--ta-charcoal);
  min-height: 760px;
  font-family: var(--body-font);
  color: var(--white);
}
.tropic-arts-site .studio-aurora {
  position: absolute;
  inset: -30% -10% auto;
  height: 160%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(
      40% 50% at 18% 32%,
      var(--accent-faint),
      transparent 70%
    ),
    radial-gradient(40% 50% at 82% 64%, var(--accent-faint2), transparent 70%);
  animation: ta-studio-drift 24s ease-in-out infinite alternate;
}
@keyframes ta-studio-drift {
  from {
    transform: translate3d(-4%, 0, 0) scale(1);
  }
  to {
    transform: translate3d(6%, 3%, 0) scale(1.14);
  }
}
.tropic-arts-site .studio-inner {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(80px, 10vw, 120px) clamp(40px, 6vw, 72px);
  min-height: 760px;
  display: flex;
  align-items: center;
}
.tropic-arts-site .studio-copy {
  max-width: 480px;
  position: relative;
  padding-left: 30px;
}
.tropic-arts-site .studio-progress {
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--hair);
  border-radius: 0;
  overflow: hidden;
}
.tropic-arts-site .studio-progress i {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 0;
  /* Named tokens — .studio's --accent / --accent-soft aliases resolve to
     exactly these. The last bare var(--accent) in the file. */
  background: linear-gradient(
    var(--ta-accent-dark),
    rgba(var(--ta-accent-dark-rgb), 0.22)
  );
}
.tropic-arts-site .studio-eyebrow {
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Named token, like .ta-eyebrow above — .studio's --accent alias resolves to
     the same gold, but the name says which ground this belongs to. */
  color: var(--ta-accent-dark);
  font-weight: 600;
  margin: 0 0 18px;
}
.tropic-arts-site .studio-h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1.08;
  letter-spacing: 0.2px;
  margin: 0 0 26px;
  color: var(--white);
}
.tropic-arts-site .studio-p {
  color: var(--gray-d);
  font-size: 15px;
  line-height: 1.7;
  font-weight: 400;
  margin: 0 0 20px;
  max-width: 46ch;
}
.tropic-arts-site .studio-copy > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.tropic-arts-site .studio.in-view .studio-copy > * {
  opacity: 1;
  transform: none;
}
.tropic-arts-site .studio.in-view .studio-copy > *:nth-child(2) {
  transition-delay: 0.05s;
}
.tropic-arts-site .studio.in-view .studio-copy > *:nth-child(3) {
  transition-delay: 0.12s;
}
.tropic-arts-site .studio.in-view .studio-copy > *:nth-child(4) {
  transition-delay: 0.18s;
}
.tropic-arts-site .studio.in-view .studio-copy > *:nth-child(5) {
  transition-delay: 0.24s;
}
.tropic-arts-site .studio-stage {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 52%;
  z-index: 1;
  pointer-events: none;
}
.tropic-arts-site .device {
  position: absolute;
  top: 64px;
  bottom: -72px;
  right: max(48px, calc((100vw - 1280px) / 2));
  width: 520px;
  pointer-events: auto;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.7),
    0 0 0 1px rgba(255, 255, 255, 0.05);
  will-change: transform;
}
.tropic-arts-site .device-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.tropic-arts-site .sf-strip {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  padding-top: 82px;
  will-change: transform;
}
.tropic-arts-site .sf-card {
  position: relative;
  width: 100%;
  background: #fff;
}
.tropic-arts-site .sf-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tropic-arts-site .sf-chrome {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 5;
}
.tropic-arts-site .sf-announce {
  background: var(--ta-charcoal);
  color: #fff;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 9px 10px;
  font-weight: 500;
}
.tropic-arts-site .sf-announce a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tropic-arts-site .sf-nav {
  background: #fff;
  height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid #ececec;
}
.tropic-arts-site .sf-nav .left,
.tropic-arts-site .sf-nav .right {
  display: flex;
  align-items: center;
  gap: 14px;
}
.tropic-arts-site .sf-nav .right {
  justify-content: flex-end;
}
.tropic-arts-site .sf-brand {
  font-family: var(--heading-font);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: 0.16em;
  color: #111;
  text-align: center;
}
.tropic-arts-site .sf-ico {
  width: 19px;
  height: 19px;
  stroke: #1a1a1a;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.tropic-arts-site .sf-bag {
  position: relative;
}
.tropic-arts-site .sf-badge {
  position: absolute;
  top: -7px;
  right: -8px;
  background: var(--ta-charcoal);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  width: 15px;
  height: 15px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tropic-arts-site .sf-hero {
  height: 1100px;
}
.tropic-arts-site .sf-hero .sf-img {
  height: 100%;
  object-position: 50% 0%;
}
.tropic-arts-site .sf-hero .cap {
  position: absolute;
  left: 24px;
  bottom: 54px;
  z-index: 3;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.tropic-arts-site .sf-hero .cap .k {
  font-family: var(--heading-font);
  font-style: italic;
  font-size: 19px;
  font-weight: 400;
  opacity: 0.95;
}
.tropic-arts-site .sf-hero .cap .t {
  font-family: var(--heading-font);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.05;
  margin-top: 2px;
}
.tropic-arts-site .sf-hero .cap .ex {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  font-family: var(--body-font);
}
.tropic-arts-site .sf-hero .dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  display: flex;
  gap: 7px;
  justify-content: center;
  z-index: 3;
}
.tropic-arts-site .sf-hero .dots i {
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: rgba(255, 255, 255, 0.45);
}
.tropic-arts-site .sf-hero .dots i.on {
  background: #fff;
}
.tropic-arts-site .device::after {
  content: "";
  position: absolute;
  left: 0;
  top: 82px;
  width: 100%;
  height: 26px;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(#fff, rgba(255, 255, 255, 0));
}
.tropic-arts-site .device-glass {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  border-radius: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
@media (max-width: 1180px) {
  .tropic-arts-site .studio {
    display: flex;
    flex-direction: column;
    padding: 72px 0;
  }
  .tropic-arts-site .studio-inner {
    min-height: 0;
    padding: 0 40px 8px;
  }
  .tropic-arts-site .studio-stage {
    position: relative;
    width: 100%;
    max-width: 520px;
    height: 600px;
    margin: 8px auto 0;
  }
  .tropic-arts-site .device {
    top: 50%;
    bottom: auto;
    left: 50%;
    right: auto;
    width: 100%;
    height: 600px;
    transform: translate(-50%, -50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .studio-aurora {
    animation: none;
  }
  .tropic-arts-site .studio-copy > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* --------------------------------------------------- Articles (Journal) --- */
.tropic-arts-site .ta-articles-inner {
  padding-block: 0;
}
.tropic-arts-site .ta-articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.tropic-arts-site .ta-article {
  padding: clamp(40px, 6vw, 96px) 2rem;
  display: flex;
  flex-direction: column;
}
.tropic-arts-site .ta-article + .ta-article {
  border-left: 1px solid var(--line);
}
.tropic-arts-site .ta-article-cover {
  /* Wraps the <CoverImg> that replaced this box's background-image; the
     background-color below is still the placeholder under a lazy photo. */
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--gray-50);
  margin-bottom: 1.25rem;
}
.tropic-arts-site .ta-article h3 {
  margin: 0 0 0.5rem;
  color: var(--ink-soft);
}
.tropic-arts-site .ta-article-excerpt {
  margin-bottom: 1.5rem;
  flex: 1;
}
.tropic-arts-site .ta-article .btn {
  align-self: flex-start;
}
.tropic-arts-site .ta-articles-empty {
  padding: clamp(40px, 6vw, 80px) 2rem;
  color: var(--body);
  text-align: center;
}
@media (max-width: 900px) {
  .tropic-arts-site .ta-articles-grid {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .ta-article {
    padding: 2rem;
  }
  .tropic-arts-site .ta-article + .ta-article {
    border-left: none;
    border-top: 1px solid var(--line);
  }
}

/* ---------------------------------------------------------------- FinalCTA */
.tropic-arts-site .ta-finalcta {
  background: var(--ink);
  padding-block: clamp(56px, 9vw, 110px);
  text-align: center;
}
.tropic-arts-site .ta-finalcta h2 {
  color: #fff;
  margin-bottom: 1rem;
}
/* Body copy in the band. The :not() matters: the Newsletter block puts its
   eyebrow in here as a <p> too, and this rule out-specifies .ta-eyebrow
   (0,2,1 vs 0,2,0) — it was quietly repainting that eyebrow as body copy,
   white at 400 with a 28px gap. An eyebrow is not body copy; say so here
   rather than adding a second .ta-eyebrow declaration to fight it. */
.tropic-arts-site .ta-finalcta p:not(.ta-eyebrow) {
  color: rgba(255, 255, 255, 0.85);
  max-width: 620px;
  margin: 0 auto 1.75rem;
  font-weight: 400;
}
.tropic-arts-site .ta-finalcta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
@media (max-width: 560px) {
  .tropic-arts-site .ta-finalcta-actions {
    flex-direction: column;
    align-items: center;
  }
}

/* ------------------------------------------------------------------ Footer */
.tropic-arts-site .ta-footer {
  background: #fff;
}
.tropic-arts-site .ta-footer-brand {
  display: inline-flex;
  padding-block: clamp(40px, 6vw, 72px) 0.75rem;
}
.tropic-arts-site .ta-footer-brand img {
  height: 40px;
  width: auto;
}
.tropic-arts-site .ta-footer-divider {
  margin: 0;
  border: none;
  border-top: 1px solid var(--line);
}
.tropic-arts-site .ta-footer-cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1.5rem;
  padding-block: 2rem clamp(40px, 6vw, 72px);
}
.tropic-arts-site .ta-footer-col h6 {
  font-family: var(--body-font);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin: 0 0 0.75rem;
}
.tropic-arts-site .ta-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tropic-arts-site .ta-footer-col a {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ink-soft);
  padding-bottom: 0.25rem;
  line-height: 1.3;
}
.tropic-arts-site .ta-footer-col a:hover {
  /* dark ground — --ta-accent is the light-section deep gold and would go muddy */
  color: var(--ta-accent-dark);
}
.tropic-arts-site .ta-footer-copy {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--body);
  padding-block: 1.25rem;
}
@media (max-width: 760px) {
  .tropic-arts-site .ta-footer-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ===========================================================================
   Boardwalk page — TemplateHero, FeatureGrid, outline button
   ========================================================================= */

/* Gold outline button variant (source .btn-outline-gold). */
.tropic-arts-site .btn.btn-outline {
  background: transparent;
  color: var(--ta-accent);
  box-shadow: inset 0 0 0 1px var(--ta-accent);
}
.tropic-arts-site .btn.btn-outline:hover {
  background: var(--ta-accent);
  color: var(--btn-ink);
}

/* ------------------------------------------------------------ TemplateHero */
.tropic-arts-site .ta-template-hero {
  overflow: hidden;
}
.tropic-arts-site .ta-template-hero-inner {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 8vw, 96px);
}
.tropic-arts-site .ta-template-hero-copy h2.xl {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: 1.5rem;
}
.tropic-arts-site .ta-template-hero-copy p {
  margin-bottom: 1.25rem;
}
.tropic-arts-site .ta-template-hero-media img {
  width: 100%;
  border-radius: 0;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}

/* Preset picker (ported from the source theme pages). */
.tropic-arts-site .preset-picker {
  margin-bottom: 1.5rem;
}
.tropic-arts-site .preset-picker__label {
  font-family: var(--body-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.tropic-arts-site .preset-picker__options {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.tropic-arts-site .preset-swatch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--body-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.3s ease;
}
.tropic-arts-site .preset-swatch:hover {
  border-color: var(--ta-accent);
}
.tropic-arts-site .preset-swatch--active {
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 1px var(--ta-accent);
  background: #fbfcfc;
}
.tropic-arts-site .preset-swatch__dot {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 0;
  border: 1px solid rgba(25, 24, 23, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}
.tropic-arts-site .theme-preview-img {
  transition: opacity 0.25s ease;
}
.tropic-arts-site .theme-preview-img.is-swapping {
  opacity: 0;
}

/* Stacked button + doc-links column. */
.tropic-arts-site .ta-template-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 320px;
}
.tropic-arts-site .ta-template-hero-actions .btn {
  justify-content: center;
}
.tropic-arts-site .ta-template-hero-docs {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  padding-top: 0.5rem;
}
.tropic-arts-site .ta-template-hero-docs a {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.tropic-arts-site .ta-template-hero-docs a:hover {
  color: var(--ta-accent);
}
@media (max-width: 900px) {
  .tropic-arts-site .ta-template-hero-inner {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .ta-template-hero-actions {
    max-width: none;
  }
}

/* ------------------------------------------------------------- FeatureGrid */
.tropic-arts-site .ta-featuregrid-inner {
  padding-block: clamp(40px, 6vw, 80px);
}
.tropic-arts-site .ta-featuregrid-head {
  max-width: 64ch;
  margin-bottom: 2.5rem;
}
.tropic-arts-site .ta-featuregrid-head h2 {
  margin-bottom: 1rem;
}
.tropic-arts-site .ta-featuregrid-lead {
  margin: 0;
}
.tropic-arts-site .ta-featuregrid-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 2.5rem;
}
.tropic-arts-site .ta-featuregrid-cell h4 {
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.tropic-arts-site .ta-featuregrid-cell p {
  font-size: 0.875rem;
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 900px) {
  .tropic-arts-site .ta-featuregrid-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .tropic-arts-site .ta-featuregrid-grid {
    grid-template-columns: 1fr;
  }
}

/* ===========================================================================
   Services page — ported from the source, ANIMATIONS STRIPPED (no drifting
   bands, no scroll-reveal, no globe, no SVG arrow motion). Static throughout.
   ========================================================================= */

/* Shared section head + light section padding. */
.tropic-arts-site .svc-section-head {
  max-width: 660px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.tropic-arts-site .svc-section-lead {
  margin: 0 auto;
  max-width: 620px;
}

/* ---- Formats hero (dark, static gradient) ---- */
.tropic-arts-site .svc-formats {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
      900px 480px at 50% -10%,
      #181c1e 0%,
      rgba(38, 38, 51, 0) 60%
    ),
    linear-gradient(180deg, #131719 0%, var(--ta-charcoal) 100%);
}
.tropic-arts-site .svc-formats-inner,
.tropic-arts-site .svc-process-inner {
  padding-block: clamp(48px, 7vw, 80px);
}
.tropic-arts-site .svc-formats h2,
.tropic-arts-site .svc-process h2 {
  color: var(--ta-canvas);
}
.tropic-arts-site .svc-hero-head {
  max-width: 820px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.tropic-arts-site .svc-hero-title {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(2.25rem, 4.5vw, 3rem);
  color: var(--ta-canvas);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.tropic-arts-site .svc-crumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1.75rem;
  font-size: 0.875rem;
  color: #6e6e78;
}
.tropic-arts-site .svc-crumb a {
  color: #8d8d96;
}
.tropic-arts-site .svc-crumb a:hover {
  color: var(--ta-canvas);
}
.tropic-arts-site .svc-crumb-sep {
  color: #4a4a55;
}
.tropic-arts-site .svc-crumb span {
  color: var(--ta-accent-dark); /* on the dark .svc-formats band */
}
.tropic-arts-site .svc-fmt-lede {
  color: #aeb3b2;
  max-width: 640px;
  margin: 0 auto;
  font-weight: 400;
}
.tropic-arts-site .svc-fmt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}
.tropic-arts-site .svc-fmt-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--ta-accent-dark-rgb), 0.22);
  border-radius: 0;
  padding: 30px 28px 32px;
  height: 100%;
}
.tropic-arts-site .svc-fmt-card h3 {
  color: var(--ta-canvas);
  font-size: 1.5rem;
  margin-bottom: 10px;
}
.tropic-arts-site .svc-fmt-card p {
  color: #a5abaa;
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 0;
}
.tropic-arts-site .svc-fmt-icon {
  width: 52px;
  height: 52px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ta-accent-dark-rgb), 0.12);
  border: 1px solid rgba(var(--ta-accent-dark-rgb), 0.3);
  color: var(--ta-accent-dark-lit);
  margin-bottom: 18px;
}
.tropic-arts-site .svc-fmt-icon svg {
  width: 26px;
  height: 26px;
}

/* ---- Comparison chart ---- */
.tropic-arts-site .svc-compare-section,
.tropic-arts-site .svc-addons-section,
.tropic-arts-site .svc-faq-section {
  padding-block: clamp(48px, 7vw, 80px);
}
.tropic-arts-site .svc-compare-wrap {
  position: relative;
}
.tropic-arts-site .svc-compare-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-top: 28px;
}
.tropic-arts-site .svc-grid {
  display: grid;
  grid-template-columns: 1.9fr repeat(3, minmax(170px, 1fr));
  min-width: 760px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
}
.tropic-arts-site .svc-corner-tl { border-top-left-radius: 15px; }
.tropic-arts-site .svc-corner-tr { border-top-right-radius: 15px; }
.tropic-arts-site .svc-corner-bl { border-bottom-left-radius: 15px; }
.tropic-arts-site .svc-corner-br { border-bottom-right-radius: 15px; }
.tropic-arts-site .svc-cell {
  padding: 16px 22px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  font-family: var(--body-font);
  font-size: 0.875rem;
  color: #5a5a5a;
  background: #fff;
}
.tropic-arts-site .svc-cell.svc-row-end {
  border-bottom: none;
}
.tropic-arts-site .svc-feat {
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-weight: 600;
  color: var(--ink-soft);
  background: #fbfcfc;
  border-right: 1px solid #eee;
}
.tropic-arts-site .svc-feat small {
  display: block;
  font-weight: 500;
  font-size: 0.78rem;
  color: #a3a3a3;
  margin-top: 5px;
  line-height: 1.5;
}
.tropic-arts-site .svc-group {
  grid-column: 1 / -1;
  padding: 14px 22px;
  background: var(--gray-50);
  border-bottom: 1px solid #eee;
  font-family: var(--body-font);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a3a3a3;
}
.tropic-arts-site .svc-head {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 26px 22px 24px;
  border-bottom: 1px solid #eee;
  background: #fff;
}
.tropic-arts-site .svc-head .svc-tier {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.5rem;
  color: var(--ink-soft);
  line-height: 1.1;
}
.tropic-arts-site .svc-head .svc-tier-sub {
  font-size: 0.75rem;
  color: #a3a3a3;
  font-weight: 500;
  min-height: 2.4em;
  line-height: 1.4;
}
.tropic-arts-site .svc-head .svc-price {
  margin-top: 6px;
  font-family: var(--body-font);
  color: var(--ink-soft);
}
.tropic-arts-site .svc-head .svc-price b {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: 0;
}
.tropic-arts-site .svc-head .svc-price .svc-from {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a3a3a3;
  font-weight: 600;
  margin-bottom: 2px;
}
.tropic-arts-site .svc-head .btn {
  margin-top: 12px;
  width: 100%;
  justify-content: center;
  padding: 11px 18px;
  font-size: 0.75rem;
}
.tropic-arts-site .svc-head .btn.svc-btn-ghost {
  background: #fff;
  color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px #d4d7d6;
}
.tropic-arts-site .svc-head .btn.svc-btn-ghost:hover {
  background: var(--ink-soft);
  color: #fff;
}
.tropic-arts-site .svc-grid .is-popular {
  background: #f5f4f3;
}
.tropic-arts-site .svc-grid .svc-head.is-popular {
  position: relative;
  border-top: 3px solid var(--ta-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ta-accent) 35%, transparent);
}
.tropic-arts-site .svc-badge-pop {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  background: var(--ta-accent);
  color: var(--btn-ink);
  font-family: var(--body-font);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--ta-accent) 40%, transparent);
  white-space: nowrap;
}
.tropic-arts-site .svc-yes,
.tropic-arts-site .svc-no {
  display: inline-flex;
  align-items: center;
}
.tropic-arts-site .svc-yes::before {
  content: "✓";
  color: var(--ta-accent);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
.tropic-arts-site .svc-no::before {
  content: "—";
  color: #d4d7d6;
  font-size: 1rem;
  line-height: 1;
}
.tropic-arts-site .svc-val {
  color: var(--ink-soft);
  font-weight: 600;
}
.tropic-arts-site .svc-scrollhint {
  display: none;
  text-align: center;
  font-family: var(--body-font);
  font-size: 0.75rem;
  color: #a3a3a3;
  margin-top: 14px;
}
.tropic-arts-site .svc-compare-disclaimer {
  text-align: center;
  font-size: 0.875rem;
  color: #a3a3a3;
  max-width: 720px;
  margin: 1.5rem auto 0;
}
@media (max-width: 799.98px) {
  .tropic-arts-site .svc-scrollhint {
    display: block;
  }
}

/* ---- Add-ons ---- */
.tropic-arts-site .svc-addons-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 1.5rem;
  align-items: start;
}
.tropic-arts-site .svc-care {
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ta-accent);
  border-radius: 0;
  padding: 34px 34px 36px;
  height: 100%;
}
.tropic-arts-site .svc-care h3 {
  font-size: 1.625rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.tropic-arts-site .svc-care__price {
  font-family: var(--body-font);
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.tropic-arts-site .svc-care__price b {
  font-size: 1.5rem;
  font-weight: 700;
}
.tropic-arts-site .svc-care__price span {
  color: #a3a3a3;
  font-weight: 500;
  font-size: 0.875rem;
}
.tropic-arts-site .svc-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
}
.tropic-arts-site .svc-checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
  font-family: var(--body-font);
  font-size: 0.9rem;
  color: #5a5a5a;
  line-height: 1.5;
}
.tropic-arts-site .svc-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--ta-accent);
  font-weight: 700;
  font-size: 1.05rem;
}
.tropic-arts-site .svc-addon-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tropic-arts-site .svc-addon-item {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 24px 26px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
}
.tropic-arts-site .svc-addon-ico {
  width: 46px;
  height: 46px;
  min-width: 46px;
  border-radius: 0;
  background: #f5f4f3;
  color: var(--ta-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tropic-arts-site .svc-addon-ico svg {
  width: 24px;
  height: 24px;
}
.tropic-arts-site .svc-addon-item h4 {
  font-size: 1.125rem;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.tropic-arts-site .svc-addon-item p {
  font-size: 0.875rem;
  color: var(--body);
  margin-bottom: 6px;
  line-height: 1.6;
}
.tropic-arts-site .svc-addon-price {
  font-family: var(--body-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ta-accent);
}

/* ---- Process (dark, static gradient) ---- */
.tropic-arts-site .svc-process {
  position: relative;
  overflow: hidden;
  background: radial-gradient(
      900px 480px at 50% -10%,
      #181c1e 0%,
      rgba(38, 38, 51, 0) 60%
    ),
    linear-gradient(180deg, #131719 0%, var(--ta-charcoal) 100%);
}
.tropic-arts-site .svc-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}
.tropic-arts-site .svc-step {
  padding: 28px 26px 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--ta-accent-dark-rgb), 0.22);
  border-radius: 0;
  height: 100%;
}
.tropic-arts-site .svc-step__big {
  display: block;
  font-family: var(--body-font);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  color: rgba(var(--ta-accent-dark-rgb), 0.45);
  margin-bottom: 12px;
  user-select: none;
}
.tropic-arts-site .svc-step h3 {
  font-size: 1.375rem;
  color: var(--ta-canvas);
  margin-bottom: 8px;
}
.tropic-arts-site .svc-step p {
  font-size: 0.875rem;
  margin-bottom: 0;
  color: #a5abaa;
  line-height: 1.65;
}

/* ---- FAQ (controlled rows — SvcFaqRow in config/tropic-arts.tsx) ----
   Was a native <details> until the answer needed to animate: the browser drops
   the content the instant `open` goes away, so a closing transition never runs.
   `.svc-faq-q` is now a <button>, hence the UA styling reset on it. */
.tropic-arts-site .faq-accordion {
  max-width: 760px;
  margin: 0 auto;
}
.tropic-arts-site .svc-faq-item {
  border-bottom: 1px solid var(--line);
}
.tropic-arts-site .svc-faq-item > .svc-faq-q {
  display: block;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 1.1rem 2rem 1.1rem 0;
  position: relative;
  text-align: left;
  font-family: var(--body-font);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.tropic-arts-site .svc-faq-item > .svc-faq-q::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ta-accent);
  line-height: 1;
}
.tropic-arts-site .svc-faq-item.is-open > .svc-faq-q::after {
  content: "–";
}
/* Panel: height (grid 0fr→1fr) + fade + a small slide, so the answer drops in
   on open and lifts away on close. `visibility` steps at the end of the close
   so a collapsed answer leaves the tab order and the a11y tree the way
   <details> used to — FaqList's `.ta-faq-a-wrap` has no such step because it
   was never a <details> and so never had that behaviour to preserve. */
.tropic-arts-site .svc-faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.28s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;
}
.tropic-arts-site .svc-faq-item.is-open .svc-faq-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition:
    grid-template-rows 0.3s ease,
    opacity 0.28s ease 0.04s,
    transform 0.3s ease,
    visibility 0s;
}
/* The clipped grid item. `min-height: 0` opts out of the automatic minimum size
   so the track can really reach 0; the answer's padding stays inside the clip
   and identical in both states, or the panel jumps by that much before the
   transition starts. */
.tropic-arts-site .svc-faq-clip {
  overflow: hidden;
  min-height: 0;
}
.tropic-arts-site .svc-faq-answer {
  padding: 0 2rem 1.25rem 0;
}
/* Drop the motion but KEEP the visibility step — `transition: none` would
   strand visibility mid-close and leave a collapsed answer reachable by tab. */
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .svc-faq-panel {
    transform: none;
    transition:
      opacity 0.01s linear,
      visibility 0s linear 0.01s;
  }
  .tropic-arts-site .svc-faq-item.is-open .svc-faq-panel {
    transform: none;
    transition:
      opacity 0.01s linear,
      visibility 0s;
  }
}
.tropic-arts-site .svc-faq-answer p {
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0 0 0.75rem;
}
.tropic-arts-site .svc-faq-answer p:last-child {
  margin-bottom: 0;
}

@media (max-width: 900px) {
  .tropic-arts-site .svc-addons-grid {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .svc-steps-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .tropic-arts-site .svc-fmt-grid {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .svc-steps-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================================
   SUPPORT / POLICY pages (/support). Plain, readable long-form prose — no
   animations. The dark header band reuses the Services hero classes
   (.svc-formats / .svc-hero-*); only the meta line, the prose body, and the
   contact card are unique here. Scoped under .tropic-arts-site like the rest.
   ========================================================================== */
.tropic-arts-site .sup-hero-meta {
  margin: 0 0 1.1rem;
  font-family: var(--body-font);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* the support header band reuses .svc-formats, so this sits on dark */
  color: var(--ta-accent-dark);
}

/* ---- Long-form policy body ---- */
.tropic-arts-site .sup-doc {
  background: var(--paper);
}
.tropic-arts-site .sup-doc-inner {
  padding-block: clamp(48px, 7vw, 88px);
}
.tropic-arts-site .sup-doc-body {
  max-width: 760px;
  margin-inline: auto;
}
.tropic-arts-site .sup-section {
  margin-bottom: 2.75rem;
}
.tropic-arts-site .sup-section:last-child {
  margin-bottom: 0;
}
.tropic-arts-site .sup-section-title {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: var(--ink-soft);
  margin-bottom: 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.tropic-arts-site .sup-section:first-child .sup-section-title {
  border-top: none;
  padding-top: 0;
}
/* Sub-heading inside a section (rendered from a "### " line). */
.tropic-arts-site .sup-subhead {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 1.6rem 0 0.6rem;
}
.tropic-arts-site .sup-doc p {
  color: var(--body);
  font-size: 1rem;
  line-height: 1.75;
  margin: 0 0 1rem;
}
.tropic-arts-site .sup-doc p:last-child {
  margin-bottom: 0;
}
.tropic-arts-site .sup-doc a {
  color: var(--ta-accent);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--ta-accent) 45%, transparent);
}
.tropic-arts-site .sup-doc a:hover {
  border-bottom-color: var(--ta-accent);
}
.tropic-arts-site .sup-list {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.tropic-arts-site .sup-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--body);
  line-height: 1.7;
}
.tropic-arts-site .sup-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 0;
  background: var(--ta-accent);
}
.tropic-arts-site .sup-list li:last-child {
  margin-bottom: 0;
}

/* ---- Contact card ---- */
.tropic-arts-site .sup-contact {
  margin-top: 3rem;
  padding: 28px 30px;
  background: var(--gray-50);
  border: 1px solid var(--line);
  border-radius: 0;
}
.tropic-arts-site .sup-contact-title {
  font-size: 1.25rem;
  color: var(--ink-soft);
  margin-bottom: 0.75rem;
}
.tropic-arts-site .sup-contact p {
  margin: 0 0 0.25rem;
}
.tropic-arts-site .sup-contact-name {
  font-weight: 600;
  color: var(--ink-soft);
}
.tropic-arts-site .sup-contact-url {
  color: var(--body);
}

/* ============================================================
   Locations blocks (shared storefront components) — matched to Tropic Arts.
   Re-establishes the shared block's container + spacing at higher specificity
   (matching the sibling themes' scoped overrides) and maps fonts + colors to
   the theme tokens (Newsreader headings, gold accent).
   ============================================================ */
.tropic-arts-site .loc-section,
.tropic-arts-site .loc-detail {
  --loc-heading-font: var(--heading-font);
  /* The open/closed pill is meta type: body face, not the display serif. This
     theme sets no --cart-font-body, so name the family here. */
  --loc-body-font: var(--body-font);
  --loc-accent: var(--ta-accent);
  --loc-border: var(--line);
  --loc-muted: var(--body);
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .loc-heading,
.tropic-arts-site .loc-card-name,
.tropic-arts-site .loc-detail h1 {
  font-family: var(--heading-font);
  font-weight: 400;
}
.tropic-arts-site .loc-heading { margin-bottom: 12px; }
.tropic-arts-site .loc-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .loc-head { margin-bottom: 34px; }
.tropic-arts-site .loc-toolbar { margin-bottom: 28px; }
.tropic-arts-site .loc-card { background: var(--paper); }
.tropic-arts-site .loc-card-body { padding: 18px 22px 22px; }
.tropic-arts-site .loc-card-actions { margin-top: 12px; }
.tropic-arts-site .loc-tag { padding: 3px 11px; }
.tropic-arts-site .loc-nearme-btn { padding: 8px 16px; }
.tropic-arts-site .loc-filter button { padding: 7px 14px; }
.tropic-arts-site .loc-unit-toggle button { padding: 6px 12px; }
.tropic-arts-site .loc-within select { padding: 5px 8px; }
.tropic-arts-site .loc-map-empty { padding: 40px; }
.tropic-arts-site .loc-empty { padding: 40px; }
.tropic-arts-site .loc-detail-hero { margin-bottom: 30px; }
.tropic-arts-site .loc-detail-head { margin-bottom: 8px; }
.tropic-arts-site .loc-week td { padding: 9px 0; }
.tropic-arts-site .loc-contact { margin-top: 20px; }
.tropic-arts-site .loc-section-title { margin: 24px 0 10px; }
/* Put back the accent locations.css gives these two anchors — the card's
   "Directions" row and the detail page's phone/email/site list. The blanket
   `.tropic-arts-site a { color: inherit }` up top ties `.loc-card-actions a` at
   (0,1,1) and wins on load order, so they were coming out body ink. NOT
   .loc-card-link: that is the stretched card-name link, meant to inherit. */
.tropic-arts-site .loc-card-actions a,
.tropic-arts-site .loc-contact a { color: var(--loc-accent); }

/* ==================== v2 · Dark "services page" sections ==================
   /domains carries two sections ported from the old standalone services page:
   the globe hero (.ta-dhero, from .svc-formats) and the process flow
   (.ta-flow, from .svc-process — further down this file). Both keep the
   SOURCE page's palette rather than the rest of the marketing site's green:
   this plum-charcoal ground, the drifting band spectrum below, and gold trim.
   That gold is what the artwork was drawn in — the globe canvas paints in
   GOLD 201,169,110 / IVORY, and the flow lines carry gold arrow images — so a
   green frame fought its own contents.
   Both mix the brand gold at many alphas, so they read --ta-accent-dark-rgb
   (the triplet) rather than the hex token. */
.tropic-arts-site .ta-dhero,
.tropic-arts-site .ta-flow {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 480px at 50% -10%, #262633 0%, rgba(38, 38, 51, 0) 60%),
    linear-gradient(180deg, #17171d 0%, #101014 100%);
  border-bottom: 1px solid var(--ta-hair);
}
/* drifting color bands (behind everything, full section width). Shared by
   both dark sections — the hero runs all four, the flow the source's three. */
.tropic-arts-site .ta-dhero-bands,
.tropic-arts-site .ta-flow-bands {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.tropic-arts-site .ta-dband {
  position: absolute;
  left: -25%;
  width: 150%;
  height: 30%;
  /* elliptical, like the source — a square band blurs into a hard-edged slab */
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.5;
  will-change: transform;
  transform: rotate(var(--tilt, -4deg));
  animation: taDbandDrift var(--dur, 26s) ease-in-out infinite alternate;
}
@keyframes taDbandDrift {
  from {
    transform: translate3d(-3.5%, 0, 0) rotate(var(--tilt, -4deg));
  }
  to {
    transform: translate3d(3.5%, -2%, 0) rotate(var(--tilt, -4deg));
  }
}
/* band palette — the source services-page set: teal, wine, indigo, amber.
   All four are distinct: dropping wine/amber onto the teal+indigo pair (as an
   earlier pass did) collapses the spectrum into two colors. */
.tropic-arts-site .ta-dband--teal {
  top: 12%;
  --tilt: -5deg;
  --dur: 26s;
  background: linear-gradient(
    90deg,
    rgba(14, 79, 87, 0) 0%,
    #0e4f57 30%,
    #186a6a 62%,
    rgba(14, 79, 87, 0) 100%
  );
}
.tropic-arts-site .ta-dband--wine {
  top: 34%;
  --tilt: 3deg;
  --dur: 32s;
  animation-delay: -9s;
  background: linear-gradient(
    90deg,
    rgba(90, 34, 54, 0) 0%,
    #5a2236 32%,
    #6e2f3a 64%,
    rgba(90, 34, 54, 0) 100%
  );
}
.tropic-arts-site .ta-dband--indigo {
  top: 53%;
  --tilt: -3deg;
  --dur: 23s;
  animation-delay: -15s;
  background: linear-gradient(
    90deg,
    rgba(40, 52, 96, 0) 0%,
    #283460 30%,
    #3a4a86 60%,
    rgba(40, 52, 96, 0) 100%
  );
}
.tropic-arts-site .ta-dband--amber {
  top: 73%;
  --tilt: 4deg;
  --dur: 36s;
  animation-delay: -22s;
  opacity: 0.4;
  background: linear-gradient(
    90deg,
    rgba(74, 51, 21, 0) 0%,
    #4a3315 32%,
    #6b4a1e 64%,
    rgba(74, 51, 21, 0) 100%
  );
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-dband {
    animation: none;
  }
}
.tropic-arts-site .ta-dhero-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(64px, 9vw, 104px) clamp(24px, 5vw, 72px) clamp(56px, 8vw, 88px);
}
.tropic-arts-site .ta-dhero-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.tropic-arts-site .ta-dhero-eyebrow {
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Dark ground — the dark half of the accent ramp, not --ta-accent. */
  color: var(--ta-accent-dark);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-dhero-title {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ta-canvas);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-dhero-lede {
  font-size: 0.98rem;
  line-height: 1.75;
  color: rgba(244, 239, 230, 0.72);
  max-width: 620px;
  margin: 0 auto;
}
/* availability search (stubbed) */
.tropic-arts-site .ta-dhero-search {
  display: flex;
  gap: 10px;
  max-width: 540px;
  margin: 28px auto 0;
}
.tropic-arts-site .ta-dhero-search input {
  flex: 1;
  min-width: 0;
  font-family: var(--body-font);
  font-size: 0.95rem;
  color: var(--ta-canvas);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(var(--ta-accent-dark-rgb), 0.28);
  /* softened with the cards — the source page has no search field to copy */
  border-radius: 10px;
  padding: 13px 22px;
  outline: none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.tropic-arts-site .ta-dhero-search input::placeholder {
  color: rgba(244, 239, 230, 0.38);
}
.tropic-arts-site .ta-dhero-search input:focus {
  border-color: rgba(var(--ta-accent-dark-rgb), 0.6);
  background: rgba(255, 255, 255, 0.08);
}
.tropic-arts-site .ta-dhero-search button {
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 600;
  color: #17171d;
  background: rgb(var(--ta-accent-dark-rgb));
  border: 1px solid rgb(var(--ta-accent-dark-rgb));
  border-radius: 10px;
  padding: 13px 30px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.tropic-arts-site .ta-dhero-search button:hover {
  background: var(--ta-accent-dark-lit);
  border-color: var(--ta-accent-dark-lit);
}
.tropic-arts-site .ta-dhero-stub {
  font-size: 0.85rem;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.66);
  max-width: 540px;
  margin: 14px auto 0;
}
.tropic-arts-site .ta-dhero-stub b {
  color: var(--ta-accent-dark-lit);
  font-weight: 600;
}
/* Live availability results (components/DomainSearch.tsx).
   That component ships a LIGHT default palette because two of its three mounts
   are the console; this hero is the dark one. It sets its own `--ds-*` on
   `.ds-wrap`, so an ancestor cannot override them — the extra `.ds-wrap` here is
   what wins on specificity. Only the tokens change; no rule is duplicated. */
.tropic-arts-site .ta-dhero-results {
  max-width: 620px;
  margin: 18px auto 0;
}
/* Only the RESULT ROWS go left. The status lines ("Checking availability…",
   "Every name we checked is taken") are siblings of the list, not part of it,
   and they belong to the centred hero above them — left-aligning the whole
   container stranded them under the left edge of the search field. */
.tropic-arts-site .ta-dhero-results .ds-list {
  text-align: left;
}
.tropic-arts-site .ta-dhero-results .ds-wrap {
  --ds-ink: rgb(var(--ta-ivory-rgb, 244, 239, 230));
  --ds-muted: rgba(244, 239, 230, 0.62);
  --ds-line: rgba(244, 239, 230, 0.18);
  --ds-card: rgba(244, 239, 230, 0.05);
  /* The console green is unreadable on this ground; the theme's own lit accent
     carries "available" here. */
  --ds-ok: var(--ta-accent-dark-lit);
  --ds-no: rgba(244, 239, 230, 0.45);
  --ds-warn: rgb(var(--ta-accent-dark-rgb));
}
.tropic-arts-site .ta-dhero-results .ds-badge-ok {
  background: rgba(201, 169, 110, 0.16);
}
.tropic-arts-site .ta-dhero-results .ds-badge-no {
  background: rgba(244, 239, 230, 0.08);
}
/* globe + flanking cards */
.tropic-arts-site .ta-dhero-row {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 440px) 1fr;
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
}
.tropic-arts-site .ta-dhero-globe {
  position: relative;
}
.tropic-arts-site .ta-dhero-globe canvas {
  display: block;
  margin: 0 auto;
}
.tropic-arts-site .ta-dhero-glow {
  position: absolute;
  inset: 10%;
  /* a circular halo behind a round globe — 0 would square off the blur */
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(var(--ta-accent-dark-rgb), 0.16) 0%,
    rgba(var(--ta-accent-dark-rgb), 0) 65%
  );
  filter: blur(10px);
  pointer-events: none;
}
.tropic-arts-site .ta-dhero-cap {
  font-family: var(--heading-font);
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(var(--ta-accent-dark-rgb), 0.85);
  text-align: center;
  margin: 18px 0 0;
}
.tropic-arts-site .ta-dcard {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--ta-accent-dark-rgb), 0.22);
  border-radius: 18px;
  padding: 30px 28px 32px;
  backdrop-filter: blur(4px);
  transition: border-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.tropic-arts-site .ta-dcard:hover {
  border-color: rgba(var(--ta-accent-dark-rgb), 0.55);
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}
.tropic-arts-site .ta-dcard-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--ta-accent-dark-rgb), 0.12);
  border: 1px solid rgba(var(--ta-accent-dark-rgb), 0.3);
  color: var(--ta-accent-dark-lit);
  margin-bottom: 18px;
}
.tropic-arts-site .ta-dcard-icon svg {
  width: 26px;
  height: 26px;
}
.tropic-arts-site .ta-dcard h3 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ta-canvas);
  margin: 0 0 10px;
}
.tropic-arts-site .ta-dcard p {
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(244, 239, 230, 0.6);
  margin: 0;
}
@media (max-width: 1023px) {
  .tropic-arts-site .ta-dhero-row {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
  .tropic-arts-site .ta-dhero-globe {
    order: -1;
  }
}
@media (max-width: 519px) {
  .tropic-arts-site .ta-dhero-search {
    flex-direction: column;
  }
  .tropic-arts-site .ta-dhero-search button {
    align-self: center;
  }
}

/* ============================ v2 · StepsFlow ==============================
   "How we work" process section ported from the old services page
   (.svc-process): glass step cards with big gold numbers over flowing gold
   bezier lines ridden by gold-arrow images (SMIL animateMotion). Dark like
   the source — the ground, the bands and the --ta-accent-dark-rgb* trim come from the
   shared rule up in `v2 · Dark "services page" sections`, so this section and
   the globe hero read as one pair on /domains. The glass cards sit over the
   gold lines, which is what the backdrop-filter is for. */
.tropic-arts-site .ta-flow-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.tropic-arts-site .ta-flow-inner {
  position: relative;
  z-index: 1;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(64px, 9vw, 104px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-flow-head {
  max-width: 640px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
/* Plain eyebrow, matching .ta-suite-kicker — the home page runs one eyebrow
   treatment and this section is the only dark one carrying it. The source's
   gold pill is gone; the brand gold moves from the fill to the type, where
   --ta-accent-dark clears 6.7:1 across this section's ground (8.5:1 on the
   gradient's floor, 6.7:1 at the radial's lightest point up top). The
   light-ground --ta-accent belongs to the other three and is unreadable here. */
.tropic-arts-site .ta-flow-chip {
  display: block;
  font-family: var(--body-font);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent-dark);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-flow-head h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: 0;
  color: var(--ta-canvas);
  margin: 0 0 14px;
}
.tropic-arts-site .ta-flow-lede {
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(244, 239, 230, 0.72);
  margin: 0;
}
.tropic-arts-site .ta-flow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
/* glass card — barely-there white so the gold lines blur through, same as
   the source's .svc-step */
.tropic-arts-site .ta-flow-card {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 30px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--ta-accent-dark-rgb), 0.22);
  border-radius: 18px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
}
.tropic-arts-site .ta-flow-card:hover {
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
  transform: translateY(-4px);
  border-color: rgba(var(--ta-accent-dark-rgb), 0.55);
}
.tropic-arts-site .ta-flow-big {
  display: block;
  font-family: var(--body-font);
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: rgba(var(--ta-accent-dark-rgb), 0.45);
  margin-bottom: 12px;
  user-select: none;
}
.tropic-arts-site .ta-flow-card h3 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 1.375rem;
  color: var(--ta-canvas);
  margin: 0 0 8px;
}
.tropic-arts-site .ta-flow-card p {
  font-size: 0.875rem;
  line-height: 1.65;
  color: rgba(244, 239, 230, 0.6);
  margin: 0;
}

/* ============================ v2 · TemplatesCatalog ======================
   Full template catalog (/templates). Reuses the .ta-tpl-* card styles from
   the home TemplatesGrid; adds an industry filter bar, a sort control, and a
   responsive 3-column grid. */
.tropic-arts-site .ta-catalog {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-catalog-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 72px) clamp(84px, 10vw, 120px);
}
/* Two stacked rows — industry chips + sort above, feature checkboxes below —
   sharing one rule for the padding, margin and closing hairline. */
.tropic-arts-site .ta-catalog-toolbar {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-bottom: 24px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-catalog-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 24px;
}
.tropic-arts-site .ta-catalog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tropic-arts-site .ta-catalog-chip {
  font-family: var(--body-font);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--body);
  background: var(--ta-canvas);
  border: 1px solid var(--ta-border);
  border-radius: 10px;
  padding: 7px 15px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.tropic-arts-site .ta-catalog-chip:hover {
  border-color: var(--ta-accent);
  color: var(--ta-accent-strong);
}
.tropic-arts-site .ta-catalog-chip.is-active {
  color: var(--ta-canvas);
  background: var(--ink);
  border-color: var(--ink);
}
.tropic-arts-site .ta-catalog-sort {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  white-space: nowrap;
}
.tropic-arts-site .ta-catalog-sort span {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ta-muted);
}
.tropic-arts-site .ta-catalog-sort select {
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--ta-canvas);
  border: 1px solid var(--ta-border);
  border-radius: 0;
  padding: 8px 30px 8px 13px;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c5c5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
.tropic-arts-site .ta-catalog-sort select:focus {
  outline: none;
  border-color: var(--ta-accent);
}
/* Feature filters. The tick is the console's green/white check circle
   (.status-radio / .status-dot in app/console.css) reproduced here — same 20px
   ring, same 4x8 white check — so a capability looks the same whether you're
   ticking it on a theme's settings card or filtering the public catalog by it.
   The green is a LITERAL on purpose: it is the platform's "on" colour, not the
   theme's accent, so it must survive a merchant's brand override (which repaints
   --ta-accent) rather than follow it. */
.tropic-arts-site .ta-catalog-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
}
.tropic-arts-site .ta-catalog-features-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ta-muted);
}
.tropic-arts-site .ta-catalog-feature {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--body);
  transition: color 0.2s ease;
}
.tropic-arts-site .ta-catalog-feature:hover,
.tropic-arts-site .ta-catalog-feature.is-on {
  color: var(--ink);
}
.tropic-arts-site .ta-catalog-feature input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tropic-arts-site .ta-catalog-featdot {
  position: relative;
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #c7ccd6;
  background: #fff;
  transition: background 120ms ease, border-color 120ms ease;
}
.tropic-arts-site .ta-catalog-feature:hover .ta-catalog-featdot {
  border-color: #9aa2af;
}
/* Outranks the :hover ring above on its own (equal class count, one extra
   element selector), so a ticked box stays green under the cursor. */
.tropic-arts-site .ta-catalog-feature input:checked + .ta-catalog-featdot {
  background: #1f7a3d;
  border-color: #1f7a3d;
}
.tropic-arts-site .ta-catalog-feature input:checked + .ta-catalog-featdot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -55%) rotate(45deg);
}
.tropic-arts-site .ta-catalog-feature input:focus-visible + .ta-catalog-featdot {
  box-shadow: 0 0 0 3px rgba(31, 122, 61, 0.32);
}
.tropic-arts-site .ta-catalog-clear {
  font-family: var(--body-font);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--body);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--ta-border);
  border-radius: 0;
  padding: 0 0 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.tropic-arts-site .ta-catalog-clear:hover {
  color: var(--ta-accent-strong);
  border-color: var(--ta-accent);
}
.tropic-arts-site .ta-catalog-note {
  font-size: 0.85rem;
  color: var(--ta-muted);
  margin: -14px 0 26px;
}
.tropic-arts-site .ta-catalog-count {
  font-size: 0.85rem;
  color: var(--ta-muted);
  margin: 0 0 22px;
}
/* Three columns, not auto-fill. `minmax(300px, 1fr)` packed FOUR cards into
   the 1576px content box, which reads busier than the home TemplatesGrid and
   shrinks each preview well below the width its shot was captured at. Fixed
   tracks with the same 820/560 breakpoints keep both grids in step. */
.tropic-arts-site .ta-catalog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.tropic-arts-site .ta-catalog-empty {
  color: var(--body);
  padding: 40px 0;
  text-align: center;
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .tropic-arts-site .ta-catalog-grid {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .ta-catalog-toolbar-row {
    justify-content: flex-start;
  }
  /* Once the checkboxes wrap, an inline "FEATURES" leaves the first row short
     and the list ragged — give the label its own line and let the ticks start
     flush with each other. */
  .tropic-arts-site .ta-catalog-features-label {
    flex: 0 0 100%;
  }
}

/* =========================== v2 · Support hub ============================
   SupportSearch (live site-search hero), TopicCards (two-tone MegaIcon
   cards), and FaqList (controlled rows — FaqItem, never a native <details>)
   for /support and the support topic pages. */
.tropic-arts-site .ta-support {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-support-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px) clamp(48px, 6vw, 72px);
  text-align: center;
}
.tropic-arts-site .ta-support-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 18px;
}
.tropic-arts-site .ta-support-title {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.12;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 16px;
}
.tropic-arts-site .ta-support-lede {
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--body);
  max-width: 560px;
  margin: 0 auto;
}
.tropic-arts-site .ta-support-search {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 620px;
  margin: 30px auto 0;
}
.tropic-arts-site .ta-support-ico {
  position: absolute;
  left: 20px;
  width: 19px;
  height: 19px;
  color: var(--ta-muted);
  pointer-events: none;
}
.tropic-arts-site .ta-support-search input {
  width: 100%;
  font-family: var(--body-font);
  font-size: 0.98rem;
  color: var(--ink);
  background: var(--ta-canvas);
  border: 1px solid var(--ta-border);
  border-radius: 0;
  padding: 15px 24px 15px 50px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.tropic-arts-site .ta-support-search input::placeholder {
  color: var(--ta-muted);
}
.tropic-arts-site .ta-support-search input:focus {
  border-color: var(--ta-accent);
  box-shadow: 0 0 0 3px rgba(92, 122, 52, 0.12);
}
.tropic-arts-site .ta-support-note {
  font-size: 0.8rem;
  color: var(--ta-muted);
  margin: 12px 0 0;
}
/* live results */
.tropic-arts-site .ta-support-results {
  max-width: 620px;
  margin: 14px auto 0;
  text-align: left;
}
.tropic-arts-site .ta-support-results ul {
  list-style: none;
  margin: 0;
  padding: 6px;
  background: var(--ta-canvas);
  border: 1px solid var(--ta-hair);
  border-radius: 0;
  box-shadow: 0 14px 38px rgba(66, 66, 74, 0.08);
}
.tropic-arts-site .ta-support-results a {
  display: grid;
  grid-template-columns: 74px 1fr;
  grid-template-areas: "type title" "type sub";
  align-items: center;
  column-gap: 14px;
  padding: 11px 14px;
  border-radius: 0;
  text-decoration: none;
  transition: background 0.15s ease;
}
.tropic-arts-site .ta-support-results a:hover {
  background: var(--ta-panel);
}
.tropic-arts-site .ta-support-type {
  grid-area: type;
  justify-self: start;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ta-accent-wash-ink);
  background: var(--ta-accent-wash);
  border-radius: 0;
  padding: 3px 9px;
}
.tropic-arts-site .ta-support-rtitle {
  grid-area: title;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.tropic-arts-site .ta-support-rsub {
  grid-area: sub;
  font-size: 0.78rem;
  color: var(--ta-muted);
}
.tropic-arts-site .ta-support-hint {
  font-size: 0.88rem;
  color: var(--body);
  text-align: center;
  padding: 14px;
  margin: 0;
}

/* ------------------------------- TopicCards ------------------------------ */
.tropic-arts-site .ta-topics {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-topics-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(56px, 8vw, 88px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-topics-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(36px, 5vw, 52px);
}
.tropic-arts-site .ta-topics-head h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}
.tropic-arts-site .ta-topics-head p {
  line-height: 1.75;
  margin: 16px 0 0;
}
.tropic-arts-site .ta-topics-group {
  margin-bottom: clamp(40px, 5.5vw, 60px);
}
.tropic-arts-site .ta-topics-group:last-child {
  margin-bottom: 0;
}
.tropic-arts-site .ta-topics-group-head {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: clamp(20px, 2.6vw, 28px);
}
.tropic-arts-site .ta-topics-group-title {
  flex: 0 0 auto;
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}
.tropic-arts-site .ta-topics-rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--ta-hair);
}
.tropic-arts-site .ta-topics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.tropic-arts-site .ta-topic-card {
  display: block;
  text-decoration: none;
  background: var(--ta-canvas);
  border: 1px solid var(--ta-hair);
  border-radius: 0;
  padding: 26px 24px 24px;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tropic-arts-site .ta-topic-card:hover {
  border-color: var(--ta-accent);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(66, 66, 74, 0.09);
}
.tropic-arts-site .ta-topic-card .ta-mega-ico {
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
}
.tropic-arts-site .ta-topic-card h3 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 8px;
}
.tropic-arts-site .ta-topic-card p {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--body);
  margin: 0 0 14px;
}
.tropic-arts-site .ta-topic-more {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ta-accent-strong);
}
@media (max-width: 900px) {
  .tropic-arts-site .ta-topics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 560px) {
  .tropic-arts-site .ta-topics-grid {
    grid-template-columns: 1fr;
  }
}

/* --------------------------------- FaqList ------------------------------- */
.tropic-arts-site .ta-faq {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-faq-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-faq-head {
  text-align: center;
  max-width: 560px;
  margin: 0 auto clamp(32px, 4vw, 44px);
}
.tropic-arts-site .ta-faq-head h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  letter-spacing: 0;
  color: var(--ink);
  margin: 0;
}
.tropic-arts-site .ta-faq-head p {
  line-height: 1.75;
  margin: 16px 0 0;
}
.tropic-arts-site .ta-faq-list {
  max-width: 760px;
  margin-inline: auto;
  border-top: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-faq-item {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--heading-font);
  font-size: 1.15rem;
  letter-spacing: 0;
  color: var(--ink);
  padding: 20px 4px;
}
/* plus that morphs to a minus when open — transform-centered on even pixels so
   the two strokes always meet cleanly (the old margin-auto/1.6px version could
   render a lopsided "+"). */
.tropic-arts-site .ta-faq-mark {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}
.tropic-arts-site .ta-faq-mark::before,
.tropic-arts-site .ta-faq-mark::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  border-radius: 0;
  background: var(--ta-accent-strong);
  transition: transform 0.25s ease;
}
.tropic-arts-site .ta-faq-mark::before {
  transform: translate(-50%, -50%);
}
.tropic-arts-site .ta-faq-mark::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.tropic-arts-site .ta-faq-item.is-open .ta-faq-mark::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
/* answer region — fades in + slides down on open, fades out + slides up on
   close. grid-rows 0fr↔1fr animates the height; translateY does the slide. */
.tropic-arts-site .ta-faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.3s ease, opacity 0.28s ease;
}
.tropic-arts-site .ta-faq-item.is-open .ta-faq-a-wrap {
  grid-template-rows: 1fr;
  opacity: 1;
}
.tropic-arts-site .ta-faq-a-inner {
  overflow: hidden;
  transform: translateY(-8px);
  transition: transform 0.3s ease;
}
.tropic-arts-site .ta-faq-item.is-open .ta-faq-a-inner {
  transform: translateY(0);
}
.tropic-arts-site .ta-faq-a {
  padding: 2px 4px 22px;
  max-width: 640px;
}
.tropic-arts-site .ta-faq-a p {
  font-size: 0.92rem;
  line-height: 1.75;
  color: var(--body);
  margin: 0 0 12px;
}
.tropic-arts-site .ta-faq-a p:last-child {
  margin-bottom: 0;
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-faq-a-wrap,
  .tropic-arts-site .ta-faq-a-inner,
  .tropic-arts-site .ta-faq-mark::before,
  .tropic-arts-site .ta-faq-mark::after {
    transition: none;
  }
}

/* =========================== v2 · SupportArticle =========================
   Long-form support article: sticky "In this article" TOC beside a body of
   sections (intro prose, numbered steps, FAQ accordion, note callouts). TOC
   active state + gold left-border ported from the old article-toc component. */
.tropic-arts-site .ta-art {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-art-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 72px) clamp(48px, 7vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}
/* sticky TOC — a DIRECT grid item so its containing block is the tall grid area
   (not its own short content box), giving it room to travel; align-self:start
   keeps it content-height so it can actually stick below the sticky nav. */
.tropic-arts-site .ta-art-toc {
  position: sticky;
  top: 92px;
  align-self: start;
}
.tropic-arts-site .ta-art-toc-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-muted);
  margin: 0 0 14px;
}
.tropic-arts-site .ta-art-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tropic-arts-site .ta-art-toc li {
  margin-bottom: 2px;
}
.tropic-arts-site .ta-art-toc a {
  display: block;
  padding: 7px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--body);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.tropic-arts-site .ta-art-toc a:hover {
  color: var(--ink);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-art-toc a.is-active {
  color: var(--ink);
  font-weight: 600;
  border-left-color: var(--ta-accent);
  background: var(--ta-panel);
}
/* body */
.tropic-arts-site .ta-art-sec {
  scroll-margin-top: 96px;
  padding-bottom: 34px;
  margin-bottom: 34px;
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-art-sec:last-child {
  border-bottom: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}
/* A section that ends in a FAQ accordion already closes with the last item's
   own border — drop the section's redundant divider so they don't stack. */
.tropic-arts-site .ta-art-sec:has(.ta-art-faq) {
  border-bottom: 0;
  padding-bottom: 0;
}
.tropic-arts-site .ta-art-sec h2 {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  letter-spacing: 0;
  color: var(--ink);
  margin: 0 0 14px;
}
.tropic-arts-site .ta-art-sec > p {
  font-size: 0.96rem;
  line-height: 1.8;
  color: var(--body);
  margin: 0 0 14px;
  max-width: 680px;
}
/* numbered steps — green counter chips */
.tropic-arts-site .ta-art-steps {
  list-style: none;
  counter-reset: ta-step;
  margin: 20px 0 0;
  padding: 0;
  max-width: 680px;
}
.tropic-arts-site .ta-art-steps li {
  counter-increment: ta-step;
  position: relative;
  padding: 5px 0 5px 48px;
  margin-bottom: 16px;
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--body);
  min-height: 32px;
}
.tropic-arts-site .ta-art-steps li::before {
  content: counter(ta-step);
  position: absolute;
  left: 0;
  top: 2px;
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: var(--ta-accent-wash);
  color: var(--ta-accent-wash-ink);
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
}
/* note / tip callout */
.tropic-arts-site .ta-art-note {
  background: var(--ta-panel);
  border: 1px solid var(--ta-hair);
  border-left: 3px solid var(--ta-accent);
  border-radius: 0;
  padding: 14px 18px;
  margin: 22px 0 0;
  max-width: 680px;
}
.tropic-arts-site .ta-art-note p {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 8px;
}
.tropic-arts-site .ta-art-note p:last-child {
  margin-bottom: 0;
}
/* FAQ inside an article — tighten the shared accordion spacing a touch */
.tropic-arts-site .ta-art-faq {
  margin-top: 8px;
  border-top: 1px solid var(--ta-hair);
}
/* Prev / next pager — sits under the article body; hidden unless a link is set. */
.tropic-arts-site .ta-art-pager {
  display: flex;
  gap: 16px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-art-pager-link {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  padding: 16px 20px;
  border: 1px solid var(--ta-hair);
  border-radius: 0;
  text-decoration: none;
  transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.tropic-arts-site .ta-art-pager-link:hover {
  border-color: var(--ta-accent);
  transform: translateY(-2px);
}
.tropic-arts-site .ta-art-pager-next {
  text-align: right;
}
.tropic-arts-site .ta-art-pager-link span {
  font-size: 0.78rem;
  color: var(--ta-accent-strong);
  font-weight: 600;
}
.tropic-arts-site .ta-art-pager-link strong {
  font-family: var(--heading-font);
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--ink-soft);
}
/* On small screens the TOC un-sticks and sits above the body as a jump list. */
@media (max-width: 860px) {
  .tropic-arts-site .ta-art-inner {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .tropic-arts-site .ta-art-toc {
    position: static;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ta-hair);
  }
  .tropic-arts-site .ta-art-pager {
    flex-direction: column;
  }
}

/* ============================================================================
   Eyebrows — ONE treatment, declared per class, never overridden from here.

   The Lustre re-skin's eyebrow block used to sit at this spot: it re-declared
   a LIST of eyebrow classes as inline-flex with 0.3em tracking and a
   currentColor ::before rule line (plus a symmetric ::after on the centered
   ones). It is gone, and nothing should replace it — a late override list made
   every per-class rule above a lie, since editing one appeared to do nothing.

   Every section eyebrow now declares the same thing itself, once, beside the
   section it belongs to:

       font-size: 12px;  font-weight: 600;  letter-spacing: 0.12em;
       text-transform: uppercase;  margin: 0 0 18px;   (and nothing else)

   Colour is the ONE thing that varies, and it follows the GROUND, not the
   class: --ta-accent (#8a6a33) on light sections, --ta-accent-dark (#c9a96e)
   on dark ones. Putting the light token on a dark ground is ~2:1.

     light   .ta-suite-kicker (the reference)  .ta-ai-kicker  .ta-about-eyebrow
             .ta-dm-kicker  .ta-frow-kicker  .ta-split-kicker  .ta-phead-eyebrow
             .ta-support-eyebrow  .ta-cards-eyebrow  .ta-bento-eyebrow
             .ta-paddons-eyebrow  .loc-eyebrow (overrides the shared block)
     dark    .ta-flow-chip  .ta-dhero-eyebrow  .ta-eyebrow  .studio-eyebrow
             (the last two read --accent, aliased to the dark gold by their
             own section scope)

   NOT eyebrows, despite the names — per-CARD labels inside a grid, which keep
   their own smaller, muted treatment: .ta-card-kicker, .ta-bento-kicker.
   /journal and /search are shared routes styled from lib/themeTokens.ts, not
   from here; their caps eyebrow is already plain.
   ========================================================================== */

/* Restore true circles — the square-everything sweep must not flatten dots,
   round badges, glows, and list-marker bullets. */
.tropic-arts-site .ta-hero-frame-bar span,
.tropic-arts-site .ta-ai-dot,
.tropic-arts-site .ta-track span::after,
.tropic-arts-site .sf-badge,
.tropic-arts-site .sf-hero .dots i,
.tropic-arts-site .preset-swatch__dot,
.tropic-arts-site .sup-list li::before,
.tropic-arts-site .ta-dband,
.tropic-arts-site .ta-dhero-glow,
.tropic-arts-site .ta-art-steps li::before {
  border-radius: 50%;
}

/* ============================================================================
   Lustre re-skin — dark accent sections (charcoal + green accents).
   Kept to a few bands (hero, closing CTA, footer) so content pages stay light.
   ========================================================================== */

/* --- Hero: charcoal band; the framed showcase stays light, like a Lustre
       product shot floating on a dark ground. --- */
.tropic-arts-site .ta-hero {
  background: var(--ta-charcoal);
}
.tropic-arts-site .ta-hero-title {
  color: var(--ta-canvas);
}
.tropic-arts-site .ta-hero-lede {
  color: var(--ta-muted-dark);
}
.tropic-arts-site .ta-hero-note {
  color: var(--ta-muted-dark);
}
.tropic-arts-site .ta-hero-cta .ta2-btn--fill {
  background: var(--ta-canvas);
  color: var(--ink);
  border-color: var(--ta-canvas);
}
.tropic-arts-site .ta-hero-cta .ta2-btn--fill:hover {
  background: var(--ta-accent-strong);
  border-color: var(--ta-accent-strong);
  color: var(--btn-ink);
}
.tropic-arts-site .ta-hero-cta .ta2-btn--ghost {
  color: var(--ta-canvas);
  border-color: rgba(251, 252, 252, 0.4);
}
.tropic-arts-site .ta-hero-cta .ta2-btn--ghost:hover {
  background: var(--ta-canvas);
  color: var(--ink);
  border-color: var(--ta-canvas);
}

/* --- Footer: charcoal with green link hover --- */
.tropic-arts-site .ta-footer {
  background: var(--ta-charcoal);
}
.tropic-arts-site .ta-footer-col h6 {
  color: var(--ta-canvas);
}
.tropic-arts-site .ta-footer-col a {
  color: var(--ta-muted-dark);
}
.tropic-arts-site .ta-footer-col a:hover {
  color: var(--ta-accent-dark);
}
.tropic-arts-site .ta-footer-copy {
  color: var(--ta-muted-dark);
}
.tropic-arts-site .ta-footer-divider {
  border-top-color: var(--ta-hair-dark);
}