/* ============================================================================
   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 Pro, 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 Pro — the display serif behind every heading. Self-hosted because
   Butler isn't on Google Fonts. The family name is the release name; it also
   keeps this clear of the plain "Butler" that Halcyon used to serve, which is
   gone now (Halcyon moved to Google-hosted Newsreader) but would have collided
   if both stylesheets ever landed in one document.

   Pro ships Light through Black, but this theme deliberately serves ONE face.
   Every heading here was drawn against a single Roman weight — the 500/600/700
   declarations below were written knowing they would render Roman — so the
   whole 300–700 range maps to Roman and nothing is ever synthetically bolded.
   Turning on the real weights is a redesign, not a font swap: it would make
   every heading at 500+ visibly heavier across the whole site. Add the extra
   @font-face rules deliberately, with a visual pass, or not at all.

   Butler Pro © Fabian De Smet — https://www.fabiandesmet.com
   Licensed under the Butler Pro EULA v1.01, Desktop & Web (Standard), shipped
   beside the font files: /assets/tropic-arts/ButlerPro-EULA-v1-01.pdf. This
   license permits NO redistribution: it covers rendering on up to three
   Websites under 50k unique visitors/month each, and explicitly excludes
   editable templates and live text editing for unlicensed third parties. So
   this face must not be wired into a theme merchants can launch — and this is
   now the ONLY self-hosted face in the repo, which is the point: Halcyon's free
   Butler was retired to Newsreader so that this is the only one to reason about. Section F asks that any displayed credit read
   "Butler Pro Typeface © Fabian De Smet www.fabiandesmet.com"; the footer
   credit is what says it — see lib/typefaceCredits.ts. */
@font-face {
  font-family: "Butler Pro";
  src: url("/assets/tropic-arts/ButlerPro-Roman.woff2") format("woff2"),
    url("/assets/tropic-arts/ButlerPro-Roman.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 color 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-text: #6f5427; /* the darker step as a focus ring on the canvas —
                                readableInk in lib/brandOverrides.ts pushes it
                                wherever a brand accent leaves it faint */
  --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 Pro", Georgia, "Times New Roman", serif;
  --menu-ph-bg: var(--gray-100);
  --heading-font: "Butler Pro", 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 color 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);
}

/* ---------------------------------------------- Full-width CTA pills on phones
   Every CTA cluster in this theme is a row of shrink-to-fit pills, so on a
   phone a pair lands at two different widths and the stack reads ragged — a
   wide "EXPLORE TEMPLATES" sitting under a narrow "START BUILDING". Below
   560px each cluster becomes one column of equal, full-width pills, which is
   what the card CTAs (.ta-ph .ta2-btn, .ta-plan-cta, .svc-head .btn) and the
   template hero (.ta-template-hero-actions, a stretch column from 900px down)
   already do on their own.

   This block is the only place that treatment is declared — the per-section
   rules further down set padding, size and color and never width — so the
   selector list below is the roster. Deliberately NOT on it, because each one
   shares its row with something else that full width would break: .ta-nav-cta
   (beside the logo and the hamburger), the .ta-dhero-search submit (inside the
   search input), and .loc-nearme-btn / .loc-filter / .loc-unit-toggle /
   .preset-swatch (filter and color chips).
   ========================================================================= */
@media (max-width: 560px) {
  /* Pairs: stack, and stretch instead of center-shrinking. */
  .tropic-arts-site .ta-hero-cta,
  .tropic-arts-site .ta-ai-cta,
  .tropic-arts-site .ta-dm-cta,
  .tropic-arts-site .ta-suite-cta,
  .tropic-arts-site .ta-cta-actions,
  .tropic-arts-site .ta-phead-actions,
  .tropic-arts-site .ta-press-actions,
  .tropic-arts-site .ta-finalcta-actions {
    flex-direction: column;
    align-items: stretch;
  }
  /* The press "Compare every plan" link shares that column with no button; a
     stretched text link would draw its underline across the whole phone. */
  .tropic-arts-site .ta-press-actions .ta-press-link {
    align-self: flex-start;
  }
  /* The legacy collage hero centers a shrink-to-fit column; let it fill so the
     button inside it can, up to the 400px cap .hero-collage__content > * sets. */
  .tropic-arts-site .hero-collage__content-inner {
    width: 100%;
  }
  .tropic-arts-site .ta-hero-cta .ta2-btn,
  .tropic-arts-site .ta-ai-cta .ta2-btn,
  .tropic-arts-site .ta-dm-cta .ta2-btn,
  .tropic-arts-site .ta-suite-cta .ta2-btn,
  .tropic-arts-site .ta-cta-actions .ta2-btn,
  .tropic-arts-site .ta-phead-actions .ta2-btn,
  .tropic-arts-site .ta-press-actions .ta2-btn,
  .tropic-arts-site .ta-finalcta-actions .btn,
  /* Singles — one CTA closing a section, a card or a form. */
  .tropic-arts-site .ta-bento-brand-cta,
  .tropic-arts-site .ta-addon-cta,
  .tropic-arts-site .ta-feature-copy .btn,
  .tropic-arts-site .svc-care .btn,
  .tropic-arts-site .ta-news-row .ta2-btn,
  .tropic-arts-site .hero-collage__content .btn {
    width: 100%;
    /* .btn is an inline-flex with no justify-content of its own, so a stretched
       one would otherwise hold its label + chevron against the left edge. */
    justify-content: center;
  }
}

/* --------------------------------------------------------- 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;
  /* 36px from a 1000px viewport up, narrowing to 22px at 861. Just above the
     860px drawer breakpoint the bar is full: logo, links and actions need
     819px, and a 861px window with a classic scrollbar has 782 inside the
     bar's padding. With a fixed 36px the actions ran into the right gutter
     up to 897px and past the viewport edge up to 865px, so the page scrolled
     sideways. The drawer block below sets its own gap. */
  gap: clamp(20px, 10vw - 64px, 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).
   A plain link renders as a bare <a> — only a link with a menu gets a
   .nm-trigger — so both shapes are named, plus the drawer's mega toggle. */
.tropic-arts-site .ta-nav-links > li.is-active > a,
.tropic-arts-site .ta-nav-links > li.is-active .nm-trigger,
.tropic-arts-site .ta-nav-links > li.is-active .ta-mega-toggle {
  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 centers 6px apart. */
  margin: 4.5px auto;
  transition: all 0.2s;
}
/* Open, the bars fold into a ✕: the drawer covers the whole page, so this
   button is the one way back out and should say "close". The outer bars
   travel the 6px to the middle one's center, then cross. */
.tropic-arts-site .ta-nav[data-open="true"] .ta-nav-toggle .bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.tropic-arts-site .ta-nav[data-open="true"] .ta-nav-toggle .bar:nth-child(2) {
  opacity: 0;
}
.tropic-arts-site .ta-nav[data-open="true"] .ta-nav-toggle .bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}
@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;
    /* Below the bar's 1px bottom border, not over it: 100% is the inside of
       that border, while --ta-drawer-top (below) measures its outside edge, so
       starting inside it left the full-height drawer 1px short of the screen's
       bottom. */
    top: calc(100% + 1px);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ta-canvas);
    padding: 6px 0 calc(6px + env(safe-area-inset-bottom, 0px));
    /* Full screen: the drawer fills everything under the bar, down to the
       screen's bottom edge, rather than dropping a short list over the page.
       A phone has two bottoms. 100dvh stops where browser chrome begins — on
       iOS Safari that is ABOVE its floating toolbar — while 100lvh reaches the
       edge. So the box runs to lvh, and a bottom border in the drawer's own
       color covers the strip between the two: the page never shows through
       around the toolbar, and the scrolling area (which stops at the border)
       keeps every row reachable above it.
       Absolutely positioned inside the sticky .ta-nav, the drawer does NOT
       scroll with the page — with Platform expanded it runs far taller than a
       phone — so it scrolls itself; `contain` stops that scroll chaining out
       to the page when it hits either end.
       --ta-drawer-top is the bar's live distance from the top of the viewport,
       set by the Nav block while the drawer is open: the announcement bar above
       the nav scrolls away, so the bar is only at 0 once the page has moved. The
       plain bar height is the fallback if the script never runs. */
    height: calc(100vh - var(--ta-drawer-top, var(--ta-nav-h)));
    height: calc(100lvh - var(--ta-drawer-top, var(--ta-nav-h)));
    border-bottom: calc(100lvh - 100dvh) solid var(--ta-canvas);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    /* 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;
  }
  /* The drawer is as wide as the screen and scrolls, and its rows run its full
     width, so a focused link's or button's ring was cut off the sides. It is
     drawn inside the control instead. */
  .tropic-arts-site .ta-nav-links a:focus-visible,
  .tropic-arts-site .ta-nav-links button:focus-visible {
    outline-offset: -3px;
  }
  /* The main links are the drawer's top level, so they outrank the Platform
     items on size: at the bar's 14px they read smaller than their own
     sub-links, whose titles are 15px. */
  .tropic-arts-site .ta-nav-links > li > a,
  .tropic-arts-site .ta-nav-links > li > .nm-item > .nm-trigger,
  .tropic-arts-site .ta-nav-links .ta-mega-toggle {
    font-size: 20px;
    line-height: 1.3;
  }
  .tropic-arts-site .ta-nav-login {
    display: none;
  }
  /* The shared consent chrome (components/storefront/StorefrontConsent.tsx) is
     bottom-fixed at z-index 2147482999/2147483000 — above the drawer whatever
     the nav does — so it covered the menu's last rows, which on a phone is
     wherever the visitor happens to have scrolled to. Hide it while the drawer
     is up: the settings pill, and the first-run banner behind it, which is the
     same obstruction several times taller. Neither is dismissed and no
     decision is implied — closing the menu paints them straight back, and the
     preference center (its own modal, and unreachable with the menu open) is
     left alone.
     Both render OUTSIDE the .tropic-arts-site wrapper, so the nav's open state
     has to be read from a common ancestor — hence :has() on <body>, which the
     consent component's own stylesheet already relies on. */
  body:has(.tropic-arts-site .ta-nav[data-open="true"]) .ev-consent-reopen,
  body:has(.tropic-arts-site .ta-nav[data-open="true"]) .ev-consent-banner {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  /* The open state is named too: its own transition list outranks the bare
     .ta-nav-links selector, so the drawer still faded in without it. */
  .tropic-arts-site .ta-nav-links,
  .tropic-arts-site .ta-nav[data-open="true"] .ta-nav-links,
  .tropic-arts-site .ta-nav-toggle .bar {
    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 */
}
/* The phone drawer's disclosure button and overview row (see the ≤860px block
   below). The bar keeps its hover-revealed link. */
.tropic-arts-site .ta-mega-toggle,
.tropic-arts-site .ta-mega-overview {
  display: none;
}
/* 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-x: hidden; /* clip the essentials panel's right-edge bleed */
  /* Never taller than the room under the nav (100% is the nav's own height:
     it is the containing block), so on a short screen the panel scrolls
     rather than running off the bottom, out of reach of the sticky nav. */
  max-height: calc(100vh - 100%);
  max-height: calc(100dvh - 100%);
  overflow-y: auto;
}
.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 center 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.
   first-of-type, not first-child: the (hidden) overview <a> comes first. */
.tropic-arts-site .ta-mega-sec--wide {
  flex: 0 1 auto;
  margin-right: auto;
}
/* The /platform index's rule between Build and Grow, centered in the 56px gap
   and running the panel's full height like the Foundations panel's edge. */
.tropic-arts-site .ta-mega-sec + .ta-mega-sec--wide {
  margin-left: -28px;
  padding-left: 28px;
  border-left: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-mega-inner > .ta-mega-sec:first-of-type {
  margin-left: auto;
}
.tropic-arts-site .ta-mega-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* --body, as on the /platform index: 5.9:1 on the canvas and 5.5:1 on the
     gray panel, where --ta-muted was 3.2:1 and 2.9:1. */
  color: var(--body);
  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;
}
/* Flex, so a plan chip that doesn't fit wraps flush under the name. */
.tropic-arts-site .ta-mega-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  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(--body); /* clears 4.5:1, as the heads above */
  max-width: 30ch;
}
/* A tool's plan chip, the /platform index's .ta-topicmap-plan. */
.tropic-arts-site .ta-mega-badge {
  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;
  white-space: nowrap;
}
/* 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;
    max-height: none;
    overflow: visible;
  }
  /* No hover in the drawer, so the link that opens the panel on the bar gives
     way to the disclosure button NavMega renders beside it. */
  .tropic-arts-site .ta-nav-links .ta-mega-item > .nm-trigger {
    display: none;
  }
  .tropic-arts-site .ta-mega-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 12px 32px;
    background: none;
    border: 0;
    border-radius: 0;
    font-family: var(--body-font);
    font-weight: 500;
    color: var(--body);
    text-align: left;
    cursor: pointer;
  }
  /* The caret follows the disclosure — down when shut, up when open — nudged
     so the chevron's ink, not its rotated box, centers on the label. */
  .tropic-arts-site .ta-mega-toggle .nm-caret {
    width: 8px;
    height: 8px;
    margin: 0 0 0 11px;
    transform: translateY(-2px) rotate(45deg);
  }
  .tropic-arts-site .ta-mega-item.is-open > .ta-mega-toggle .nm-caret {
    transform: translateY(2px) rotate(225deg);
  }
  /* Shut until the toggle opens it. The panel animates its one row 0fr ↔ 1fr
     and .ta-mega-inner is the clipped grid item; nothing inside changes size
     with .is-open, so the height can't jump at either end. The inner's
     visibility trails the collapse, which takes the hidden links out of the
     tab order and the accessibility tree. Its open value is `inherit` rather
     than `visible`, so a closed drawer — which hides the panel — still hides
     it. The panel's own visibility step lasts the drawer's 0.26s fade-out, so
     an open section doesn't vanish while the rest of the drawer is fading. */
  .tropic-arts-site .ta-mega-item > .nm-panel.ta-mega {
    display: grid;
    grid-template-rows: 0fr;
    transition:
      grid-template-rows 0.3s var(--ease),
      visibility 0.26s;
  }
  .tropic-arts-site .ta-mega-item.is-open > .nm-panel.ta-mega {
    grid-template-rows: 1fr;
  }
  .tropic-arts-site .ta-mega-inner {
    flex-direction: column;
    /* The bar's centering auto margins would shrink-wrap a grid item. */
    margin-inline: 0;
    padding-inline: 0;
    gap: 0;
    min-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 0.3s;
  }
  .tropic-arts-site .ta-mega-item.is-open .ta-mega-inner {
    visibility: inherit;
    transition: visibility 0s;
  }
  /* The parent's own page (/platform), first in the open panel — the toggle
     above it no longer navigates. */
  .tropic-arts-site .ta-nav-links .ta-mega-overview {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--ta-accent-strong);
  }
  .tropic-arts-site .ta-mega-sec {
    padding-block: 12px 6px;
  }
  /* One left rail down the whole drawer. Every link in here is indented by
     `.ta-nav-links a { padding: 12px 32px }` — but a section heading is a <p>,
     so it got none of that and sat flush against the drawer's left edge, 32px
     left of the items it labels (and of the top-level links above it). Padding
     moves only the text: the <p> is still a full-width block, so its
     border-bottom stays the edge-to-edge section divider it already was. */
  .tropic-arts-site .ta-mega-head {
    padding-inline: 32px;
  }
  /* 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-of-type,
  .tropic-arts-site .ta-mega-sec--wide {
    margin-inline: 0;
  }
  /* Stacked, the heads' hairlines divide the sections: no Build | Grow rule. */
  .tropic-arts-site .ta-mega-sec + .ta-mega-sec--wide {
    margin-left: 0;
    padding-left: 0;
    border-left: 0;
  }
  .tropic-arts-site .ta-mega-sec--wide .ta-mega-items {
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
  }
  /* The tinted panel is just another stacked section here. Its desktop
     padding-inline is what pushed this one section's heading AND items 32px
     past the rest of the drawer (the items twice over — the 32px from the
     section plus their own link padding), so drop it: the heading rule above
     and the link padding already place both on the shared rail. */
  .tropic-arts-site .ta-mega-sec--panel {
    flex: initial;
    margin-right: 0;
    padding-inline: 0;
    background: transparent;
    border-left: none;
  }
  .tropic-arts-site .ta-mega-sec--panel::after {
    display: none;
  }
}
/* Keep the visibility step (instant now), drop only the motion. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-mega-item > .nm-panel.ta-mega,
  .tropic-arts-site .ta-mega-item .ta-mega-inner {
    transition: 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);
}
/* HeroShowcase waiting on the template feed. The frame holds the showcase's
   place, so nothing below it moves, but paints nothing. An empty window here
   flashed white on the charcoal band and then vanished, because the carousel
   that replaces it keeps each card transparent until its screenshot decodes.
   Hidden, not removed: the carousel reuses this element, and the observer that
   pauses it offscreen is attached here. */
.tropic-arts-site .ta-hero-frame.is-pending {
  visibility: hidden;
}
.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 {
  /* 980x560 at full width, and that SHAPE, not that height, when the frame is
     narrower: each template's hero shot is captured at exactly 7:4
     (scripts/capture-theme-shots.mjs, LARGE_H), so it fills the body with
     nothing cropped. A fixed 560px would crop the shot's sides wherever the
     frame is under 980px wide (764px in a 1024px window). */
  aspect-ratio: 7 / 4;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Plain surface, not a striped skeleton — each card stays hidden until its
     screenshot has decoded, 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;
}
/* The template's captured screenshot — the card's whole picture. Out of flow so
   the body's flex centering has no say in its size; the fill and the
   top-anchored crop come from `.ta-hero-frame-body img`. */
.tropic-arts-site .ta-hero-shot {
  position: absolute;
  inset: 0;
}
.tropic-arts-site .ta-hero-frame-link {
  position: absolute;
  inset: 0;
  z-index: 3;
}
/* The link covers the frame's screenshot, and the frame's `overflow: hidden`
   cut its ring down to the line under the address bar. So while the link has
   focus, the whole FRAME draws the browser's own focus ring around its rounded
   corners, and the link draws none. Chrome and Safari take the second
   `outline`, which is the ring they draw on a focused link; a browser without
   -webkit-focus-ring-color keeps `outline: auto`. A browser without `:has()`
   keeps the link's ring. */
.tropic-arts-site .ta-hero-frame:has(.ta-hero-frame-link:focus-visible) {
  outline: auto;
  outline: -webkit-focus-ring-color auto 1px;
  outline-offset: 2px;
}
.tropic-arts-site .ta-hero-frame:has(.ta-hero-frame-link:focus-visible) .ta-hero-frame-link {
  outline: none;
}
/* 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 screenshot 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; 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 screenshot has decoded, 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;
}
@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-card {
    transition: none;
  }
}
@media (max-width: 640px) {
  /* Phones keep a fixed, near-square body (7:4 would be under 200px tall here)
     and are served the taller card shot instead, which covers it with less
     cropped off the sides — HeroShowcase's <picture> switches at 641px.
     The ratio MUST go too: a ratio with a fixed height sizes the WIDTH from
     it (595px), and the frame clips that to the top-left of the shot. */
  .tropic-arts-site .ta-hero-frame-body {
    aspect-ratio: auto;
    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;
}
/* Crossfading stack (the Brand card's sample logos): the same box the single
   mockup fills (973x583), each logo centered inside the area the mockup's own
   logo covers. */
.tropic-arts-site .ta-bento-fade {
  position: relative;
  aspect-ratio: 973 / 583;
}
.tropic-arts-site .ta-bento-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.tropic-arts-site .ta-bento-slide.is-active {
  opacity: 1;
}
/* Both axes, deliberately (see components/ThemeImg). */
.tropic-arts-site .ta-bento-media .ta-bento-slide img {
  width: 64%;
  height: 58%;
  object-fit: contain;
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-bento-slide {
    transition: none;
  }
}
.tropic-arts-site .ta-bento-ph {
  display: block;
  width: 100%;
  height: 100%;
}
/* A card with a screen recording (BentoRecordingCard). The card fills a
   positioned cell that also holds the pause button, since a button can't sit
   inside the card's link. The video takes the images' exact 973:583 box, so
   the frames in a row stay level. */
.tropic-arts-site .ta-bento-cell {
  position: relative;
  display: flex;
}
.tropic-arts-site .ta-bento-cell > .ta-bento-card {
  flex: 1;
  min-width: 0;
}
.tropic-arts-site .ta-bento-media video {
  display: block;
  width: 100%;
  aspect-ratio: 973 / 583;
  object-fit: cover;
}
/* Pause / play, over the frame's bottom-right corner: the frame's inset (see
   .ta-bento-media) + the card's 1px border + 8px. The AI showcase's disc
   (.ta-ai-video-toggle), a size down for the smaller frame. */
.tropic-arts-site .ta-bento-video-toggle {
  position: absolute;
  right: calc(clamp(18px, 1.8vw, 24px) + 9px);
  bottom: calc(clamp(18px, 1.8vw, 24px) + 9px);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(26, 24, 22, 0.72);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.tropic-arts-site .ta-bento-video-toggle:hover {
  background: rgba(26, 24, 22, 0.9);
}
.tropic-arts-site .ta-bento-video-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ink);
}
/* Brand card: centered 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;
  }
}
/* Stacked: the pitch centered above a media window as wide as the content, the
   three points in a row beneath it, then the buttons. For a screen recording,
   which is unreadable at half width. The head matches .ta-suite-head, the
   section heading one band down. */
.tropic-arts-site .ta-ai--stacked .ta-ai-inner {
  display: block;
}
.tropic-arts-site .ta-ai-head {
  text-align: center;
  max-width: 680px;
  margin: 0 auto;
}
.tropic-arts-site .ta-ai--stacked .ta-ai-title {
  font-size: clamp(2rem, 3.6vw, 2.75rem);
  text-wrap: balance;
}
.tropic-arts-site .ta-ai--stacked .ta-ai-lead {
  max-width: 620px;
  margin-inline: auto;
}
.tropic-arts-site .ta-ai-stage {
  margin-top: clamp(36px, 5vw, 56px);
}
.tropic-arts-site .ta-ai--stacked .ta-ai-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: clamp(40px, 5vw, 60px);
}
.tropic-arts-site .ta-ai--stacked .ta-ai-cta {
  justify-content: center;
  margin-top: clamp(36px, 4vw, 52px);
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-ai--stacked .ta-ai-points {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* Media first: the same full-width window opens the band, and the pitch,
   points and buttons all follow it. */
.tropic-arts-site .ta-ai--media-first .ta-ai-stage {
  margin-top: 0;
}
.tropic-arts-site .ta-ai--media-first .ta-ai-head {
  margin-top: clamp(48px, 6vw, 76px);
}
/* The recording's window: the chat mock's chrome, with the name centered in
   caps like the showcase window in the next band. The body holds the frame's
   16:9 before the video loads, so nothing below it moves. */
.tropic-arts-site .ta-ai-frame--video .ta-ai-frame-bar {
  position: relative;
}
.tropic-arts-site .ta-ai-frame--video .ta-ai-frame-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tropic-arts-site .ta-ai-video {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ta-panel);
}
.tropic-arts-site .ta-ai-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Pause / play. A dark disc reads on both the light console and the dark bits
   of the recording; the focus ring pairs white with ink for the same reason. */
.tropic-arts-site .ta-ai-video-toggle {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(26, 24, 22, 0.72);
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}
.tropic-arts-site .ta-ai-video-toggle:hover {
  background: rgba(26, 24, 22, 0.9);
}
.tropic-arts-site .ta-ai-video-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--ink);
}
/* On a phone the recording is ~340px wide; a smaller disc covers less of it. */
@media (max-width: 560px) {
  .tropic-arts-site .ta-ai-video-toggle {
    right: 8px;
    bottom: 8px;
    width: 32px;
    height: 32px;
  }
}

/* ------------------------------------------- Suite breadth (one login, one bill) */
/* Sits between the AI showcase and the feature bento, both canvas-white, so it
   opens on the panel tone to break the run. The proof chips, the console tour
   and the capability columns share one measure, so their edges line up. */
.tropic-arts-site .ta-suite {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-suite-inner {
  --ta-suite-gutter: clamp(24px, 5vw, 72px);
  --ta-suite-measure: 1240px;
  /* Every tour screenshot is captured at this ratio (a 1280×800 window). */
  --ta-suite-ratio: 16 / 10;
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(84px, 10vw, 120px) var(--ta-suite-gutter);
}
.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;
  max-width: var(--ta-suite-measure);
  margin: clamp(32px, 4vw, 44px) auto 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);
}
/* Console tour: the tool list beside one browser frame (WAI-ARIA tabs, see
   SuiteTour). Nothing moves until a visitor picks a tool. */
.tropic-arts-site .ta-suite-tour {
  display: grid;
  grid-template-columns: clamp(196px, 17vw, 240px) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
  max-width: var(--ta-suite-measure);
  margin: clamp(36px, 5vw, 56px) auto 0;
}
.tropic-arts-site .ta-suite-tour.is-single {
  grid-template-columns: minmax(0, 1fr);
}
.tropic-arts-site .ta-suite-tabs {
  /* The chips' offsetLeft is measured against the strip when it scrolls. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tropic-arts-site .ta-suite-tab {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 11px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  /* --body, not --ta-muted: 5.5:1 on the panel tone against 2.95:1. */
  color: var(--body);
  font-family: var(--body-font);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.tropic-arts-site .ta-suite-tab .ta-mega-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
@media (hover: hover) {
  .tropic-arts-site .ta-suite-tab:hover {
    background: rgba(16, 19, 21, 0.04);
    color: var(--ink);
  }
}
/* The weight never changes with the selection, so nothing reflows. */
.tropic-arts-site .ta-suite-tab[aria-selected="true"] {
  background: var(--ta-canvas);
  border-color: var(--ta-hair);
  color: var(--ink);
  box-shadow:
    inset 3px 0 0 var(--ta-accent),
    0 6px 18px rgba(25, 24, 23, 0.05);
}
.tropic-arts-site .ta-suite-tab[aria-selected="true"] .ico-fill {
  opacity: 0.75;
}
.tropic-arts-site .ta-suite-tab:focus-visible {
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 2px;
}
.tropic-arts-site .ta-suite-panel {
  min-width: 0;
  border-radius: 18px;
}
.tropic-arts-site .ta-suite-panel:focus-visible {
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 6px;
}
/* The browser window — the same chrome as the hero and the domain shot. */
.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;
}
/* Every screenshot shares one ratio, so the body takes it and the frame never
   changes shape between tools. */
.tropic-arts-site .ta-suite-frame-body {
  position: relative;
  aspect-ratio: var(--ta-suite-ratio);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ta-canvas);
}
/* The shots stack. The picked one fades in over the one it replaces, which
   stays painted until the new image is in. */
.tropic-arts-site .ta-suite-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.tropic-arts-site .ta-suite-shot.is-prev {
  opacity: 1;
  visibility: visible;
  z-index: 1;
  transition: none;
}
.tropic-arts-site .ta-suite-shot.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
  transition:
    opacity 0.35s var(--ease),
    visibility 0s;
}
.tropic-arts-site .ta-suite-shot.is-empty {
  background: var(--ta-canvas);
}
/* 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-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
  transition: opacity 0.25s ease;
}
/* A shot fetched on demand stays clear until its image has loaded, so the one
   it replaces shows through instead of a half-drawn picture. */
.tropic-arts-site .ta-suite-shot[data-deferred] img:not(.is-loaded) {
  opacity: 0;
}
.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;
}
/* One line per tool under the frame, all stacked in one cell, so the section
   keeps its height whichever tool is picked. */
.tropic-arts-site .ta-suite-captions {
  display: grid;
  margin-top: 18px;
}
.tropic-arts-site .ta-suite-caption {
  grid-area: 1 / 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  opacity: 0;
  visibility: hidden;
}
.tropic-arts-site .ta-suite-caption.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s ease;
}
.tropic-arts-site .ta-suite-caption .ta-plan-badge {
  align-self: center;
}
.tropic-arts-site .ta-suite-caption-text {
  flex: 1 1 20rem;
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-soft);
}
.tropic-arts-site .ta-suite-caption-link {
  color: var(--ta-accent-strong);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
  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-suite-caption-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
.tropic-arts-site .ta-suite-caption-link:focus-visible {
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 3px;
}
/* Four capability columns, each item linked to its feature page where there
   is one. The underline marks a link without leaning on color. */
.tropic-arts-site .ta-suite-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: var(--ta-suite-measure);
  margin: clamp(40px, 5vw, 60px) auto 0;
}
.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-item {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ta-border);
  text-underline-offset: 4px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}
/* Inline-block, so the parent's underline doesn't run under the arrow, and
   zero-width, so the hidden arrow can never wrap onto a line of its own: the
   glyph just overflows to the right of the text. */
.tropic-arts-site .ta-suite-item-arrow {
  display: inline-block;
  width: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(3px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.tropic-arts-site .ta-suite-item:hover,
.tropic-arts-site .ta-suite-item:focus-visible {
  color: var(--ink);
  text-decoration-color: var(--ta-accent);
}
.tropic-arts-site .ta-suite-item:hover .ta-suite-item-arrow,
.tropic-arts-site .ta-suite-item:focus-visible .ta-suite-item-arrow {
  opacity: 1;
  transform: translateX(6px);
}
.tropic-arts-site .ta-suite-item:focus-visible {
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 3px;
}
.tropic-arts-site .ta-suite-note {
  max-width: var(--ta-suite-measure);
  margin: clamp(28px, 3vw, 36px) auto 0;
  text-align: center;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--body);
}
.tropic-arts-site .ta-suite-cta {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 3vw, 40px);
}
.tropic-arts-site .ta-suite-cta .ta2-btn {
  font-size: 0.8125rem;
  padding: 18px 36px;
}
/* Below 1025px the tools become a row of chips above a full-width frame. */
@media (max-width: 1024px) {
  .tropic-arts-site .ta-suite-tour {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .tropic-arts-site .ta-suite-tabs {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .tropic-arts-site .ta-suite-tab {
    width: auto;
    gap: 8px;
    padding: 8px 14px 8px 10px;
    border-color: var(--ta-border);
    border-radius: 999px;
    background: var(--ta-canvas);
    font-size: 0.875rem;
  }
  .tropic-arts-site .ta-suite-tab .ta-mega-ico {
    width: 18px;
    height: 18px;
  }
  /* The ring the template preset swatches use for their selected state. */
  .tropic-arts-site .ta-suite-tab[aria-selected="true"] {
    border-color: var(--ta-accent);
    box-shadow: 0 0 0 1px var(--ta-accent);
  }
}
@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;
  }
}
/* Phones: one row of chips that scrolls sideways, edge to edge. */
@media (max-width: 560px) {
  .tropic-arts-site .ta-suite-tabs {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--ta-suite-gutter);
    margin-inline: calc(-1 * var(--ta-suite-gutter));
    /* 4px of air keeps a chip's focus ring clear of the strip's clipped edge. */
    padding: 4px var(--ta-suite-gutter);
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 var(--ta-suite-gutter),
      #000 calc(100% - var(--ta-suite-gutter)),
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 var(--ta-suite-gutter),
      #000 calc(100% - var(--ta-suite-gutter)),
      transparent
    );
  }
  .tropic-arts-site .ta-suite-tabs::-webkit-scrollbar {
    display: none;
  }
  .tropic-arts-site .ta-suite-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}
@media (max-width: 520px) {
  .tropic-arts-site .ta-suite-grid {
    grid-template-columns: 1fr;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-suite-shot,
  .tropic-arts-site .ta-suite-shot.is-active,
  .tropic-arts-site .ta-suite-shot img,
  .tropic-arts-site .ta-suite-caption.is-active,
  .tropic-arts-site .ta-suite-tab,
  .tropic-arts-site .ta-suite-item,
  .tropic-arts-site .ta-suite-item-arrow {
    transition-duration: 0.01s;
    transition-delay: 0s;
  }
}

/* --------------------------------------------------------- Domain & mailbox */
/* Two columns with the media on the LEFT by default — the opposite side to the
   AI showcase's split layout, so the two never repeat each other. 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;
}
/* IndustryTemplates' live count line ("9 Home Services templates"). It sits
   INSIDE .ta-templates-head, so the selector is element-qualified to outrank
   `.ta-templates-head p` above — that rule owns the lead's 20px top margin and
   1.75 line-height, and at equal class weight it would win on the element. */
.tropic-arts-site .ta-templates-head p.ta-templates-count {
  font-size: 0.85rem;
  line-height: 1.5;
  font-weight: 500;
  color: var(--ta-muted);
  margin: 16px 0 0;
}
/* Same band with nothing to show — an industry nobody has a template for yet.
   Matches .ta-catalog-empty, which answers the same question on /templates. */
.tropic-arts-site .ta-templates-empty {
  color: var(--body);
  padding: 40px 0;
  text-align: center;
}
.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 gray 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. With no head (/pricing, under
   its page header) the switch opens the band at the section's own padding. */
.tropic-arts-site .ta-pricing-head + .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;
  }
}

/* ------------------------------------------------------------- IntroFilm */
/* The /about film. On "dark" the band is the film's own charcoal stage, so the
   frame runs into it with only a hairline; on the light grounds it sits as a
   rounded, shadowed screen. The pause disc is the recordings' own
   (.ta-ai-video-toggle), which needs this frame to be positioned. */
.tropic-arts-site .ta-film {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-film[data-band="panel"] {
  background: var(--ta-panel);
}
.tropic-arts-site .ta-film[data-band="dark"] {
  background: var(--ta-charcoal);
  border-bottom-color: transparent;
}
.tropic-arts-site .ta-film-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 104px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-film-head {
  max-width: 1240px;
  margin: 0 auto clamp(24px, 3vw, 36px);
  text-align: center;
}
.tropic-arts-site .ta-film-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 14px;
}
.tropic-arts-site .ta-film-title {
  font-family: var(--heading-font);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.6rem, 2.8vw, 2.25rem);
  line-height: 1.18;
  margin: 0;
  text-wrap: balance;
}
.tropic-arts-site .ta-film[data-band="dark"] .ta-film-eyebrow {
  color: var(--ta-accent-dark);
}
.tropic-arts-site .ta-film[data-band="dark"] .ta-film-title {
  color: var(--ta-canvas);
}
.tropic-arts-site .ta-film-frame,
.tropic-arts-site .ta-film-ph {
  position: relative;
  max-width: 1240px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
}
.tropic-arts-site .ta-film-frame {
  background: var(--ta-charcoal);
  box-shadow: 0 28px 64px -28px rgba(16, 19, 21, 0.5), 0 0 0 1px var(--ta-hair);
}
.tropic-arts-site .ta-film[data-band="dark"] .ta-film-frame {
  box-shadow: 0 0 0 1px rgba(251, 252, 252, 0.08);
}
.tropic-arts-site .ta-film-frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tropic-arts-site .ta-film-ph {
  display: grid;
  place-items: center;
  border: 1px dashed var(--ta-hair);
  color: var(--ta-muted);
  font-size: 14px;
}
@media (max-width: 560px) {
  .tropic-arts-site .ta-film-frame,
  .tropic-arts-site .ta-film-ph {
    border-radius: 10px;
  }
}

/* -------------------------------------------------------------- WhyBuilt */
/* The /about page's problem → answer ledger. Every band shares the About
   block's 5fr/6fr grid and gap, so each answer lines up under the About body
   copy above it. Problems are set small in sans; answers get the serif. */
.tropic-arts-site .ta-why {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-why-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-why-head,
.tropic-arts-site .ta-why-labels,
.tropic-arts-site .ta-why-row,
.tropic-arts-site .ta-why-close {
  display: grid;
  grid-template-columns: 5fr 6fr;
  column-gap: clamp(40px, 6vw, 80px);
}
.tropic-arts-site .ta-why-head {
  align-items: start;
}
.tropic-arts-site .ta-why-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-why-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;
  max-width: 16ch;
  text-wrap: balance;
}
.tropic-arts-site .ta-why-lead {
  line-height: 1.8;
  font-weight: 500;
  margin: 0;
  max-width: 54ch;
}
/* Column heads, and the per-row labels that stand in for them on a phone.
   The problem side takes the body gray, the answer side the accent. */
.tropic-arts-site .ta-why-labels {
  margin-top: clamp(56px, 7vw, 88px);
  padding-bottom: 16px;
}
.tropic-arts-site .ta-why-labels span,
.tropic-arts-site .ta-why-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
}
.tropic-arts-site .ta-why-labels span:last-child,
.tropic-arts-site .ta-why-built .ta-why-tag {
  color: var(--ta-accent);
}
.tropic-arts-site .ta-why-tag {
  margin: 0 0 10px;
}
.tropic-arts-site .ta-why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-why-row {
  border-top: 1px solid var(--ta-hair);
  padding-block: clamp(28px, 3.4vw, 44px);
}
.tropic-arts-site .ta-why-found h3 {
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 0;
}
.tropic-arts-site .ta-why-found p:not(.ta-why-tag) {
  font-size: 15px;
  line-height: 1.75;
  font-weight: 500;
  margin: 8px 0 0;
  max-width: 46ch;
}
.tropic-arts-site .ta-why-built h3 {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(1.35rem, 1.9vw, 1.6rem);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
}
.tropic-arts-site .ta-why-built p:not(.ta-why-tag) {
  line-height: 1.8;
  font-weight: 500;
  margin: 10px 0 0;
  max-width: 54ch;
}
.tropic-arts-site .ta-why-close {
  margin-top: clamp(48px, 6vw, 80px);
}
.tropic-arts-site .ta-why-close > div {
  grid-column: 2;
}
.tropic-arts-site .ta-why-close-text {
  font-family: var(--heading-font);
  font-weight: 400;
  color: var(--ink);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1.25;
  margin: 0;
  max-width: 30ch;
  text-wrap: balance;
}
.tropic-arts-site .ta-why-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-why-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
/* Desktop: the column heads carry the labels, so each half's own label is
   kept for screen readers only. */
@media (min-width: 821px) {
  .tropic-arts-site .ta-why-tag {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-why-head,
  .tropic-arts-site .ta-why-row,
  .tropic-arts-site .ta-why-close {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .ta-why-head {
    row-gap: 24px;
  }
  .tropic-arts-site .ta-why-labels {
    display: none;
  }
  .tropic-arts-site .ta-why-list {
    margin-top: clamp(40px, 8vw, 56px);
  }
  .tropic-arts-site .ta-why-built {
    margin-top: 24px;
  }
  .tropic-arts-site .ta-why-close > div {
    grid-column: 1;
  }
}

/* ------------------------------------------------------------- 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;
  }
}

/* -------------------------------------------------------------- Newsletter
   The "not ready yet" capture that follows the Closing CTA: a light strip
   between the ink CTA band and the charcoal footer, deliberately quieter than
   the CTA above it — smaller title, less padding, copy left and form right.
   Colors are the light-ground pairs: the input edge is --ta-muted (3.2:1,
   enough to find the field), fine print --body, links and the confirmation
   --ta-accent-strong. */
.tropic-arts-site .ta-news {
  background: var(--ta-canvas);
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-news-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(56px, 8vw, 88px) clamp(24px, 5vw, 72px);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.tropic-arts-site .ta-news-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-news-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
.tropic-arts-site .ta-news-body {
  margin: 14px 0 0;
  max-width: 48ch;
  line-height: 1.7;
  font-weight: 500;
}
.tropic-arts-site .ta-news-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Basis 160px, not wider: at 821px the form column is ~381px, and the row must
   hold input + gap + the "Subscribing…" button without wrapping. */
.tropic-arts-site .ta-news-input {
  flex: 1 1 160px;
  min-width: 0;
  height: 56px;
  padding: 0 20px;
  font-family: var(--body-font);
  /* 16px — anything smaller makes iOS Safari zoom the page on focus. */
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--ta-muted);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.tropic-arts-site .ta-news-input::placeholder {
  color: var(--body);
  opacity: 1;
}
/* A solid ring, the same one the button wears: a 1px border color change
   alone is too slight to find the caret by. Both wear --ta-accent-text, the
   darker step re-picked for the canvas: the step itself follows a merchant's
   brand accent, and a pale one rang at 2.63:1. */
.tropic-arts-site .ta-news-input:focus-visible {
  border-color: var(--ta-accent-text);
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 2px;
}
.tropic-arts-site .ta-news-input[aria-invalid="true"] {
  border-color: #a5361f;
}
.tropic-arts-site .ta-news-row .ta2-btn {
  flex: 0 0 auto;
  /* Wide enough for "Subscribing…", so the label swap doesn't resize the row. */
  min-width: 188px;
  height: 56px;
  padding: 0 32px;
  cursor: pointer;
}
.tropic-arts-site .ta-news-row .ta2-btn:focus-visible {
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 3px;
}
/* Busy, while the request runs. aria-disabled rather than disabled (see
   NewsletterForm), and it out-specifies .ta2-btn--fill:hover so the pointer
   still resting on the button doesn't repaint it gold mid-request. */
.tropic-arts-site .ta-news-row .ta2-btn[aria-disabled="true"] {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btn-ink);
  cursor: progress;
  opacity: 0.75;
}
.tropic-arts-site .ta-news-msg {
  margin: 12px 0 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ta-accent-strong);
}
.tropic-arts-site .ta-news-msg:empty {
  margin: 0;
}
.tropic-arts-site .ta-news-msg[data-state="ok"] {
  margin: 0;
  font-size: 1.0625rem;
}
/* Focus lands here only by script, after the row it replaced unmounts. */
.tropic-arts-site .ta-news-msg:focus {
  outline: none;
}
.tropic-arts-site .ta-news-msg[data-state="err"] {
  color: #a5361f;
}
.tropic-arts-site .ta-news-fine {
  margin: 14px 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--body);
}
.tropic-arts-site .ta-news-fine a {
  color: var(--ta-accent-strong);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tropic-arts-site .ta-news-fine a:hover {
  color: var(--ink);
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-news-inner {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------ 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 color 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 outside those two scopes a bare var(--accent) falls through to
     app/globals.css's console brown #8a5a2b, a color 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);
}
/* The track holds as many copies as the band needs (MarqueeTrack sets
   --marquee-copies) and each loop slides exactly one of them. */
@keyframes ta-scroll {
  to {
    transform: translateX(calc(-100% / var(--marquee-copies, 2)));
  }
}
/* Reduced motion: a still line of words, not a stopped marquee. Stopping the
   track alone (the `.ta-section *` rule below) froze its first frame: one word
   of six on a 320px phone, the rest clipped off by the band, and a short list
   showed its loop copy too, every word twice. So the loop's copies
   (`.ta-marquee-copy`, see WhyChoose in config/tropic-arts.tsx) are hidden, the
   edge fade comes off, and the words sit centered in rows, "A ▪ B ▪ C": the
   square leads each word but the first, so no row ends on one, and half the
   side padding puts it midway between two words. */
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .tropic-arts-site .ta-track {
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 10px;
  }
  .tropic-arts-site .ta-track .ta-marquee-copy {
    display: none;
  }
  .tropic-arts-site .ta-track span {
    max-width: 100%;
    padding-inline: 19px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .tropic-arts-site .ta-track span::after {
    order: -1;
  }
  .tropic-arts-site .ta-track span:first-child::after {
    display: none;
  }
}
/* A phone stacks them as a centered list, one word a line, with no squares. */
@media (prefers-reduced-motion: reduce) and (max-width: 560px) {
  .tropic-arts-site .ta-track {
    flex-direction: column;
    align-items: center;
    row-gap: 6px;
    text-align: center;
  }
  .tropic-arts-site .ta-track span::after {
    display: none;
  }
}
.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) --- */
/* "From the Studio" on the home page: the newest journal posts. The band and
   its centered head are the templates grid's (same padding, same 2.75rem
   serif), and so are the cards — a hairline-framed square cover that lifts on
   hover, the text sitting beneath it rather than boxed in a card. From 820px
   down the posts become a single list with the cover beside the text, since
   three across would squeeze the serif titles and two across would strand the
   third post on a row of its own; below 560px the cover goes back on top. */
.tropic-arts-site .ta-articles {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-articles-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-articles-head {
  text-align: center;
  max-width: 600px;
  margin: 0 auto clamp(40px, 6vw, 64px);
}
.tropic-arts-site .ta-articles-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-articles-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;
  text-wrap: balance;
}
.tropic-arts-site .ta-articles-lead {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
/* Tracks are always a third of the row, so one or two posts sit centered at
   the same width three would have rather than stretching to fill it. */
.tropic-arts-site .ta-articles-grid {
  --ta-articles-gap: 28px;
  display: grid;
  grid-template-columns: repeat(
    var(--ta-articles-cols, 3),
    calc((100% - 2 * var(--ta-articles-gap)) / 3)
  );
  justify-content: center;
  gap: 48px var(--ta-articles-gap);
}
.tropic-arts-site .ta-article {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.tropic-arts-site .ta-article:focus-visible {
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 6px;
}
.tropic-arts-site .ta-article--ph {
  pointer-events: none;
}
.tropic-arts-site .ta-article-cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--ta-hair);
  border-radius: 0;
  /* The panel gray is what shows under a lazy photo, or a post with none. */
  background: var(--ta-panel);
  transition: transform 0.25s ease;
}
.tropic-arts-site .ta-article:hover .ta-article-cover {
  transform: translateY(-4px);
}
.tropic-arts-site .ta-article-text {
  display: flex;
  flex-direction: column;
  margin-top: 20px;
}
/* The post's category — a per-card label, sized like .ta-card-kicker. */
.tropic-arts-site .ta-article-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ta-accent);
  margin: 0 0 10px;
}
.tropic-arts-site .ta-article-title {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink);
  font-size: 1.375rem;
  line-height: 1.3;
  margin: 0;
  transition: color 0.2s ease;
}
.tropic-arts-site .ta-article:hover .ta-article-title {
  color: var(--ta-accent-strong);
}
.tropic-arts-site .ta-article-meta {
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  margin-top: 12px;
}
.tropic-arts-site .ta-articles-foot {
  text-align: center;
  margin-top: 56px;
}
.tropic-arts-site .ta-articles-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-articles-foot a:hover {
  color: var(--body);
  border-color: var(--body);
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-article-cover {
    transition: none;
  }
  .tropic-arts-site .ta-article:hover .ta-article-cover {
    transform: none;
  }
}
@media (max-width: 820px) {
  .tropic-arts-site .ta-articles-grid {
    grid-template-columns: 1fr;
    max-width: 720px;
    margin-inline: auto;
    gap: 36px;
  }
  .tropic-arts-site .ta-article {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 28px;
    align-items: center;
  }
  .tropic-arts-site .ta-article-text {
    margin-top: 0;
  }
}
@media (max-width: 560px) {
  /* Back to the desktop column. align-items must be reset too: the centering
     from 820px down would otherwise shrink the cover — whose photo is
     absolutely positioned and gives it no width of its own — to nothing. */
  .tropic-arts-site .ta-article {
    display: flex;
    gap: 0;
    align-items: stretch;
  }
  .tropic-arts-site .ta-article-text {
    margin-top: 18px;
  }
}

/* ---------------------------------------------------------------- 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: this rule out-specifies
   .ta-eyebrow (0,2,1 vs 0,2,0), so an eyebrow <p> in the band would be
   quietly repainted 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;
}
/* The phone stack for these buttons lives with the other CTA clusters, in the
   "Full-width CTA pills on phones" block up in the Buttons section. */

/* ------------------------------------------------------------------ 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;
}
/* Social profiles: a centered row of circles under the links' divider, above
   the copyright. Colored for the charcoal the Lustre re-skin below gives the
   footer, and kept quiet like the footer's muted links: a white glyph on a
   faint white wash, until hover fills the circle with the brand gold the
   links hover to and turns the glyph charcoal. */
.tropic-arts-site .ta-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 2rem 0 0;
}
.tropic-arts-site .ta-footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(251, 252, 252, 0.1);
  color: var(--ta-canvas);
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.tropic-arts-site .ta-footer-social a:hover {
  background: var(--ta-accent-dark);
  color: var(--ta-charcoal);
}
.tropic-arts-site .ta-footer-social a:focus-visible {
  outline: 2px solid var(--ta-accent-dark);
  outline-offset: 3px;
}
.tropic-arts-site .ta-footer-social svg {
  width: 20px;
  height: 20px;
}
/* "Your Privacy Choices" — the last line of the page, centered under the
   copyright and the typeface credit (components/storefront/PrivacyChoices).
   The shared row supplies the centering and a button-chrome reset; the spacing,
   size, color and hover here match the footer's column links. */
.tropic-arts-site .ta-footer-privacy {
  padding-block: 0.875rem 1.75rem;
}
.tropic-arts-site .ta-footer-privacy .ev-privacy-choices {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-soft);
}
.tropic-arts-site .ta-footer-privacy .ev-privacy-choices:hover {
  color: var(--ta-accent-dark);
}
@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 behavior 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;
}
/* Subheading 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);
}

/* ---- The platform privacy policy (PlatformPrivacyPolicy) ----
   lib/platformPrivacy.ts is shared with the console's standalone page, so it is
   bare HTML — h2, p, ul/li, strong — with none of the classes above. These give
   those elements the same look as a PolicyDoc section, scoped to the wrapper so
   nothing else on the site moves. `p` and `a` already match through .sup-doc. */
.tropic-arts-site .sup-doc-html h2 {
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  color: var(--ink-soft);
  margin: 2.75rem 0 0.9rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.tropic-arts-site .sup-doc-html h3 {
  font-family: var(--heading-font);
  font-size: 1.15rem;
  color: var(--ink-soft);
  margin: 1.6rem 0 0.6rem;
}
.tropic-arts-site .sup-doc-html strong {
  color: var(--ink-soft);
}
.tropic-arts-site .sup-doc-html ul {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.tropic-arts-site .sup-doc-html li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--body);
  line-height: 1.7;
}
.tropic-arts-site .sup-doc-html li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ta-accent);
}
.tropic-arts-site .sup-doc-html li:last-child {
  margin-bottom: 0;
}

/* ============================================================
   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 centered 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 checkmark 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
   checking 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" color, 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 checked 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;
}
/* Also where a page turn lands (it is scrolled to the top and focused), so it
   clears the sticky top bar with a little air. */
.tropic-arts-site .ta-catalog-count {
  font-size: 0.85rem;
  color: var(--ta-muted);
  margin: 0 0 22px;
  scroll-margin-top: calc(var(--ta-nav-h) + 32px);
}
/* Focus lands here only so the next Tab starts on the new page; it isn't a
   control, so no ring around the whole line. */
.tropic-arts-site .ta-catalog-count:focus {
  outline: none;
}
/* The cards themselves are the press kit's template tiles (.ta-press-grid /
   .ta-press-tpl-*, in the Press kit section below), so the two pages share one
   layout: two across, one column from 640px down. One difference: the single
   link here always stays beside the name. The press kit lets that row wrap
   (it has two links to fit), which here would drop the link under the text
   for a template tagged with many industries, so the text wraps instead. */
.tropic-arts-site .ta-catalog-card .ta-press-tpl-meta {
  flex-wrap: nowrap;
}
.tropic-arts-site .ta-catalog-card .ta-press-tpl-meta > div {
  min-width: 0;
}
.tropic-arts-site .ta-catalog-card .ta-press-tpl-links {
  flex: none;
}
.tropic-arts-site .ta-catalog-empty {
  color: var(--body);
  padding: 40px 0;
  text-align: center;
}
/* A template with no screenshot yet falls back to a live frame, which lays the
   theme out at 4x its box (.ta-tpl-frame) — about 1600px in the home grid's
   three-up card, but up to ~3100px in this two-up one. From 1200px wide, 2.5x
   keeps it near the 1440px desktop the screenshots are taken at. */
@media (min-width: 1200px) {
  .tropic-arts-site .ta-catalog-card .ta-tpl-frame {
    width: 250%;
    height: 250%;
    transform: scale(0.4);
  }
}
/* Pager under the grid: Previous · page numbers · Next, drawn like the
   industry chips in the toolbar, with the current page filled in ink like the
   active chip. */
.tropic-arts-site .ta-catalog-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 32px;
  border-top: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-catalog-pager-pages {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tropic-arts-site .ta-catalog-pager-step,
.tropic-arts-site .ta-catalog-pager-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  font-family: var(--body-font);
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  color: var(--body);
  background: var(--ta-canvas);
  border: 1px solid var(--ta-border);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.tropic-arts-site .ta-catalog-pager-step {
  padding: 0 18px;
}
.tropic-arts-site .ta-catalog-pager-num {
  min-width: 40px;
  padding: 0 12px;
  font-variant-numeric: tabular-nums;
}
.tropic-arts-site .ta-catalog-pager-step:hover:not(:disabled),
.tropic-arts-site .ta-catalog-pager-num:hover:not(.is-active) {
  border-color: var(--ta-accent);
  color: var(--ta-accent-strong);
}
.tropic-arts-site .ta-catalog-pager-num.is-active {
  color: var(--ta-canvas);
  background: var(--ink);
  border-color: var(--ink);
  cursor: default;
}
.tropic-arts-site .ta-catalog-pager-step:disabled {
  opacity: 0.4;
  cursor: default;
}
.tropic-arts-site .ta-catalog-pager-gap {
  padding: 0 2px;
  color: var(--ta-muted);
}
@media (max-width: 560px) {
  /* Page numbers on a row of their own, Previous / Next side by side under
     them — the three together overrun a phone. */
  .tropic-arts-site .ta-catalog-pager-pages {
    order: -1;
    flex: 0 0 100%;
    justify-content: center;
  }
  .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 checkboxes 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 {
  position: relative; /* anchors the plan chip */
  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;
}
/* A plan chip sits level with the icon, at the card's top right. */
.tropic-arts-site .ta-topic-plan {
  position: absolute;
  top: 30px;
  right: 22px;
  font-size: 10px;
  padding: 3px 8px;
}
.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;
  }
}
/* The plan note under the groups, in either layout. */
.tropic-arts-site .ta-topics-note {
  max-width: 760px;
  margin: clamp(32px, 4vw, 44px) auto 0;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--body);
}
.tropic-arts-site .ta-topics-note a {
  color: var(--ta-accent-strong);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  white-space: nowrap;
}
.tropic-arts-site .ta-topics-note a:focus-visible {
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 3px;
}

/* The "map" layout: the Platform mega-menu's columns (.ta-mega-*) set on the
   page, in one hairline frame. The render sizes the columns through
   --ta-topicmap-cols, a double column for a group of more than five, and the
   last group takes the menu's gray panel. Below 1025px the groups stack. */
.tropic-arts-site .ta-topicmap {
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-topicmap-inner {
  max-width: var(--container);
  margin-inline: auto;
  border-inline: 0;
  padding: clamp(56px, 7vw, 84px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-topicmap-grid {
  display: grid;
  grid-template-columns: var(--ta-topicmap-cols, repeat(3, minmax(0, 1fr)));
  border: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-topicmap-sec {
  padding: 30px clamp(20px, 2.4vw, 32px) 34px;
}
.tropic-arts-site .ta-topicmap-sec + .ta-topicmap-sec {
  border-left: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-topicmap-sec:last-child:not(:first-child) {
  background: var(--ta-panel);
}
/* --body where the menu's heads use --ta-muted: that grey is 3.2:1 on the
   canvas and 2.9:1 on the gray panel, short of 4.5:1 for 11px text. */
.tropic-arts-site .ta-topicmap-head {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--body);
  margin: 0 0 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-topicmap-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.tropic-arts-site .ta-topicmap-sec.is-wide .ta-topicmap-items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 3vw, 44px);
}
.tropic-arts-site .ta-topicmap-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  text-decoration: none;
}
.tropic-arts-site .ta-topicmap-card:focus-visible {
  outline: 2px solid var(--ta-accent-text);
  outline-offset: 4px;
}
.tropic-arts-site .ta-topicmap-card:hover .ta-mega-ico .ico-fill {
  opacity: 0.75;
}
.tropic-arts-site .ta-topicmap-txt {
  display: block;
  min-width: 0;
}
/* Flex, so a chip that doesn't fit wraps flush under the name. */
.tropic-arts-site .ta-topicmap-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  transition: color 0.15s ease;
}
.tropic-arts-site .ta-topicmap-card:hover .ta-topicmap-title {
  color: var(--ta-accent-strong);
}
/* The menu's badge (.ta-mega-badge), carrying a plan. */
.tropic-arts-site .ta-topicmap-plan {
  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;
  white-space: nowrap;
}
/* --body, not the menu's --ta-muted, for the same 4.5:1 reason. */
.tropic-arts-site .ta-topicmap-desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--body);
}
@media (max-width: 1024px) {
  .tropic-arts-site .ta-topicmap-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .tropic-arts-site .ta-topicmap-sec + .ta-topicmap-sec {
    border-left: 0;
    border-top: 1px solid var(--ta-hair);
  }
  /* Stacked, every group has the width for two columns. */
  .tropic-arts-site .ta-topicmap-items {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 3vw, 44px);
  }
}
@media (max-width: 560px) {
  .tropic-arts-site .ta-topicmap-items,
  .tropic-arts-site .ta-topicmap-sec.is-wide .ta-topicmap-items {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tropic-arts-site .ta-topicmap-title {
    transition: none;
  }
}

/* --------------------------------- 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;
  }
}

/* ============================================================================
   Press kit (/press) — PressFacts, PressAssets, PressFounder, PressTemplates.
   A page people work FROM, so the furniture stays quiet: hairline fact rows,
   square tiles like the template cards, and small ghost buttons for the two
   actions (copy a text, download a file). `data-band` lets neighboring
   sections alternate canvas and panel. The template tiles (.ta-press-grid +
   .ta-press-tpl-*) also lay out the full /templates catalog (TemplatesCatalog),
   so a change here changes that page too.
   ========================================================================== */
.tropic-arts-site .ta-press {
  border-bottom: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
}
.tropic-arts-site .ta-press[data-band="panel"] {
  background: var(--ta-panel);
}
/* The page header links straight to #logos etc.; land the section below the
   sticky top bar rather than under it. */
.tropic-arts-site .ta-press[id] {
  scroll-margin-top: var(--ta-nav-h);
}
.tropic-arts-site .ta-press-inner {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(84px, 10vw, 120px) clamp(24px, 5vw, 72px);
}
.tropic-arts-site .ta-press-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-press-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-press-head {
  max-width: 640px;
  margin: 0 0 clamp(36px, 5vw, 56px);
}
.tropic-arts-site .ta-press-lead {
  line-height: 1.75;
  font-weight: 500;
  margin: 20px 0 0;
}
.tropic-arts-site .ta-press-body {
  line-height: 1.8;
  font-weight: 500;
  margin: 22px 0 0;
  max-width: 56ch;
}
.tropic-arts-site .ta-press-body + .ta-press-body {
  margin-top: 1.1em;
}
/* No align-items here: the phone roster near the top of this file stacks and
   stretches this row, and a later rule of equal weight would quietly undo it.
   The text link centers itself instead. */
.tropic-arts-site .ta-press-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin-top: 30px;
}
.tropic-arts-site .ta-press-actions .ta2-btn {
  padding: 13px 24px;
  font-size: 0.75rem;
  cursor: pointer;
}
.tropic-arts-site .ta-press-link {
  display: inline-block;
  align-self: center;
  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-press-link:hover {
  color: var(--ink);
  border-color: var(--ink);
}
/* Gray box + caption where an image hasn't been set yet. */
.tropic-arts-site .ta-press-ph {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
  color: var(--body);
  background: var(--ta-canvas);
  border: 1px dashed var(--ta-border);
  padding: 6px 12px;
  text-align: center;
}

/* --- PressFacts: prose left, a label/value list right. --- */
.tropic-arts-site .ta-press-facts-inner {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}
.tropic-arts-site .ta-press-rows {
  margin: 0;
  border-top: 1px solid var(--ta-hair);
}
.tropic-arts-site .ta-press-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 2.2fr;
  gap: 6px 32px;
  padding: 20px 0;
  border-bottom: 1px solid var(--ta-hair);
}
/* --body, not --ta-muted: the muted gray is ~3:1 at this size, too faint for a
   label someone reads to find the fact beside it. The 7px top pad sits the
   caps on the serif value's first line. */
.tropic-arts-site .ta-press-row dt {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
  padding-top: 7px;
}
.tropic-arts-site .ta-press-row dd {
  margin: 0;
  min-width: 0;
}
.tropic-arts-site .ta-press-row-value {
  display: block;
  font-family: var(--heading-font);
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.tropic-arts-site .ta-press-row-value a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ta-border);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease;
}
.tropic-arts-site .ta-press-row-value a:hover {
  text-decoration-color: currentColor;
}
.tropic-arts-site .ta-press-row-note {
  display: block;
  margin-top: 4px;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 500;
}

/* --- PressAssets / PressTemplates: the download grids. --- */
.tropic-arts-site .ta-press-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(36px, 5vw, 56px) clamp(20px, 3vw, 32px);
}
.tropic-arts-site .ta-press-grid[data-cols="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tropic-arts-site .ta-press-asset-media,
.tropic-arts-site .ta-press-tpl-media {
  display: block;
  position: relative;
  border: 1px solid var(--ta-hair);
  background: var(--ta-canvas);
  overflow: hidden;
  transition: transform 0.25s ease;
}
.tropic-arts-site a.ta-press-asset-media:hover,
.tropic-arts-site a.ta-press-tpl-media:hover {
  transform: translateY(-4px);
}
.tropic-arts-site .ta-press-asset-media img {
  display: block;
  width: 100%;
  height: auto;
}
/* A logo sits centered on a fixed panel of the ground it was drawn for. */
.tropic-arts-site .ta-press-asset[data-tone="light"] .ta-press-asset-media,
.tropic-arts-site .ta-press-asset[data-tone="dark"] .ta-press-asset-media {
  aspect-ratio: 2 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 13%;
}
.tropic-arts-site .ta-press-asset[data-tone="light"] .ta-press-asset-media {
  background: #fff;
}
.tropic-arts-site .ta-press-asset[data-tone="dark"] .ta-press-asset-media {
  background: var(--ta-charcoal);
  border-color: var(--ta-charcoal);
}
/* Nothing set yet: hold a box so the caption has somewhere to sit. */
.tropic-arts-site .ta-press-asset-media:has(.ta-press-ph) {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tropic-arts-site .ta-press-asset-meta {
  margin-top: 18px;
}
.tropic-arts-site .ta-press-asset-title,
.tropic-arts-site .ta-press-tpl-name {
  font-family: var(--heading-font);
  font-weight: 400;
  letter-spacing: 0;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--ink);
  margin: 0;
}
.tropic-arts-site .ta-press-asset-note {
  margin: 6px 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-weight: 500;
}
.tropic-arts-site .ta-press-dl,
.tropic-arts-site .ta-press-tpl-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 14px 0 0;
  font-size: 14px;
}
.tropic-arts-site .ta-press-dl-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--body);
}
.tropic-arts-site .ta-press-dl a,
.tropic-arts-site .ta-press-tpl-links a {
  color: var(--ta-accent-strong);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.2s ease;
}
.tropic-arts-site .ta-press-dl a:hover,
.tropic-arts-site .ta-press-tpl-links a:hover {
  color: var(--ink);
}

/* --- PressTemplates: the capture job's large shot is 1960x1120, so the box
       holds exactly that shape and nothing is cropped. A theme with only a
       card shot (~4:3) keeps its top — where the hero is. --- */
.tropic-arts-site .ta-press-tpl-media {
  aspect-ratio: 1960 / 1120;
  background: var(--ta-panel);
}
.tropic-arts-site .ta-press-tpl-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}
.tropic-arts-site .ta-press-tpl-media:has(.ta-press-ph) {
  display: flex;
  align-items: center;
  justify-content: center;
}
.tropic-arts-site .ta-press-tpl-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px 24px;
  margin-top: 16px;
}
.tropic-arts-site .ta-press-tpl-industry {
  margin: 4px 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 500;
}
.tropic-arts-site .ta-press-tpl-links {
  margin-top: 6px;
}
.tropic-arts-site .ta-press-foot {
  margin: clamp(40px, 5vw, 56px) 0 0;
}

/* --- PressFounder: portrait left, bio right. --- */
.tropic-arts-site .ta-press-founder-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.tropic-arts-site .ta-press-founder-media img {
  display: block;
  width: 100%;
  height: auto;
}
.tropic-arts-site .ta-press-founder-media:has(.ta-press-ph) {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ta-hair);
  background: var(--ta-panel);
}
.tropic-arts-site .ta-press-role {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--body);
}

@media (max-width: 820px) {
  .tropic-arts-site .ta-press-facts-inner,
  .tropic-arts-site .ta-press-founder-inner {
    grid-template-columns: 1fr;
  }
  .tropic-arts-site .ta-press-founder-media {
    max-width: 460px;
  }
  /* Three screenshots would leave an orphan in two columns — stack them. */
  .tropic-arts-site .ta-press-grid[data-cols="3"] {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 640px) {
  .tropic-arts-site .ta-press-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 560px) {
  /* Label above value once the row is too narrow for two columns. */
  .tropic-arts-site .ta-press-row {
    grid-template-columns: 1fr;
    padding: 18px 0;
  }
  .tropic-arts-site .ta-press-row dt {
    padding-top: 0;
  }
}

/* ============================================================================
   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)

   Color 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  .ta-news-eyebrow  .ta-press-eyebrow
             .ta-why-eyebrow  .ta-articles-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,
   .ta-article-tag.
   /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-privacy .ev-privacy-choices {
  color: var(--ta-muted-dark);
}
/* The toggle stays black-and-white on the charcoal: canvas white, with its
   cutouts showing the footer, while the label beside it is muted and golds on
   hover like every other footer link. In the link's muted color it read as a
   gray smudge rather than the symbol. */
.tropic-arts-site .ta-footer-privacy .ev-privacy-choices-icon {
  color: var(--ta-canvas);
}
.tropic-arts-site .ta-footer-divider {
  border-top-color: var(--ta-hair-dark);
}