/*
 * Primer 2026 design tokens for code components.
 *
 * Code components render inside a shadow root. CSS custom properties inherit
 * through it, so each token reads the matching Webflow variable from the
 * "Primer 2026" collection and falls back to the same literal value. That way
 * a component looks right both on the Webflow page and in the local playground.
 *
 * Fluid type and spacing are literal clamp() values: the Webflow API rejected
 * clamp() for size variables, so the p26-* classes in Webflow use these same
 * values directly. Keep both in sync.
 */
:host,
.p26-root {
  /* Color: aliases of existing brand variables */
  --p26-text-strong: var(--_primer-2026---color--text--strong, #20292c);
  --p26-text-default: var(--_primer-2026---color--text--default, #475a61);
  --p26-text-inverse: var(--_primer-2026---color--text--inverse, #ffffff);
  --p26-surface-base: var(--_primer-2026---color--surface--base, #ffffff);
  --p26-surface-subtle: var(--_primer-2026---color--surface--subtle, #f3f5f6);
  --p26-surface-hover: var(--_primer-2026---color--surface--hover, #f7f9fa);
  --p26-surface-inverse: var(--_primer-2026---color--surface--inverse, #262155);
  --p26-border: var(--_primer-2026---color--border--default, rgba(138, 159, 169, 0.32));
  --p26-accent: var(--_primer-2026---color--accent--primary, #6e37ff);
  --p26-accent-strong: var(--_primer-2026---color--accent--strong, #3c327b);
  --p26-accent-soft: var(--_primer-2026---color--accent--soft, #a8a6ff);
  --p26-accent-blue: var(--_primer-2026---color--accent--blue, #3366ff);
  --p26-highlight: var(--_primer-2026---color--highlight, #ffd966);
  --p26-focus: var(--_primer-2026---color--focus-ring, #0b89fd);

  /* Type */
  --p26-font-display: var(--_primer-2026---font--display, EightiesComeback), Georgia, serif;
  --p26-font-body: var(--_primer-2026---font--body, Rubik), Arial, sans-serif;
  --p26-type-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --p26-type-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
  --p26-type-body: var(--_primer-2026---type--body, 1rem);
  --p26-type-small: var(--_primer-2026---type--small, 0.875rem);

  /* Space and shape */
  --p26-space-2xs: var(--_primer-2026---space--2xs, 0.25rem);
  --p26-space-xs: var(--_primer-2026---space--xs, 0.5rem);
  --p26-space-sm: var(--_primer-2026---space--sm, 1rem);
  --p26-space-md: var(--_primer-2026---space--md, 1.5rem);
  --p26-space-lg: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --p26-radius-sm: var(--_primer-2026---radius--sm, 8px);
  --p26-radius-md: var(--_primer-2026---radius--md, 12px);
  --p26-radius-lg: var(--_primer-2026---radius--lg, 20px);

  /* Motion */
  --p26-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --p26-duration-fast: 160ms;
  --p26-duration-base: 320ms;
}

/* Option H theme, inside the code components' shadow roots. Every rule hangs off
   .th-h (set by ThemeScope only when the theme is on), so it is inert by default.
   Ported verbatim from the preview kit (primer-website-design/assets/preview/theme). */
.th-h {
  --h-ink: #15131A;
  --h-body: #4A4654;
  --h-line: rgba(21, 19, 26, 0.10);
  --h-brand: linear-gradient(115deg, #4D8BF3 0%, #F2C945 38%, #F1A136 50%, #DA2333 68%, #835798 90%);
}

/* Hero question box: the brand gradient as its glow and ring */
.th-h .p26-prompt__glow { background: var(--h-brand) !important; opacity: .55; }
.th-h .p26-prompt__card { border: 1.5px solid transparent !important; background: linear-gradient(#fff, #fff) padding-box, var(--h-brand) border-box !important; }
.th-h .p26-prompt__submit { background: #15131A !important; }

/* Product stages: drifting fields of brand-gradient light over a faint grid */
@keyframes h-drift { 0% { background-position: 0% 0%, 100% 0%, 100% 100%, 0 0, 0 0; } 100% { background-position: 35% 25%, 65% 20%, 70% 65%, 0 0, 0 0; } }
.th-h .p26-journey-visual, .th-h .p26-demo--plan, .th-h .p26-demo--improve, .th-h .p26-report-wrap {
  background: radial-gradient(55% 65% at 18% 22%, var(--h-a) 0%, transparent 72%), radial-gradient(50% 60% at 88% 18%, var(--h-b) 0%, transparent 72%), radial-gradient(60% 70% at 72% 95%, var(--h-c) 0%, transparent 72%),
    linear-gradient(rgba(21,19,26,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(21,19,26,.04) 1px, transparent 1px), #F6F1EA !important;
  background-size: 170% 170%, 170% 170%, 170% 170%, 40px 40px, 40px 40px !important;
  animation: h-drift 16s ease-in-out infinite alternate;
  border-radius: 20px !important;
}
.th-h .p26-journey-visual { --h-a: rgba(77,139,243,0.77); --h-b: rgba(131,87,152,0.51); --h-c: rgba(242,201,69,0.48); }
.th-h .p26-demo--plan { --h-a: rgba(77,139,243,0.71); --h-b: rgba(131,87,152,0.54); --h-c: rgba(242,201,69,0.42); }
.th-h .p26-demo--improve { --h-a: rgba(241,161,54,0.71); --h-b: rgba(218,35,51,0.44); --h-c: rgba(77,139,243,0.37); }
.th-h .jv--build { --h-a: rgba(77,139,243,0.77); --h-b: rgba(131,87,152,0.51); --h-c: rgba(242,201,69,0.48); }
.th-h .jv--inspect { --h-a: rgba(242,201,69,0.82); --h-b: rgba(77,139,243,0.44); --h-c: rgba(241,161,54,0.51); }
.th-h .jv--validate { --h-a: rgba(241,161,54,0.77); --h-b: rgba(218,35,51,0.41); --h-c: rgba(242,201,69,0.58); }
.th-h .jv--reach, .th-h .jv--stages { --h-a: rgba(218,35,51,0.51); --h-b: rgba(131,87,152,0.58); --h-c: rgba(77,139,243,0.44); }
.th-h .p26-report-wrap { --h-a: rgba(131,87,152,0.44); --h-b: rgba(77,139,243,0.37); --h-c: rgba(241,161,54,0.41); padding: 28px !important; box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .th-h .p26-journey-visual, .th-h .p26-demo--plan, .th-h .p26-demo--improve, .th-h .p26-report-wrap { animation: none; } }

/* Customer stories: white cards, ink type */
.th-h .cs-card { background: #FFFFFF !important; border: 1px solid rgba(21,19,26,.10) !important; border-radius: 24px !important; box-shadow: 0 30px 70px -40px rgba(21,19,26,.35) !important; }
.th-h .cs-metric dt { color: #15131A !important; }
.th-h .cs-quote, .th-h .cs-name, .th-h .cs-summary { color: #15131A !important; }
.th-h .cs-metric dd, .th-h .cs-role { color: #4A4654 !important; }
/* The kit set the link ink, but here it is a filled button: H buttons on paper are near-black pills */
.th-h .cs-link { background: #15131A !important; color: #F4F4F5 !important; border-radius: 999px !important; }
.th-h .cs-link:hover { background: #2A2C38 !important; }
.th-h .cs-btn { border-radius: 999px !important; }
/* Story cards: a full-height side panel (big photo, or a dark stat panel when no large photo exists) */
.th-h .cs-card { display: grid !important; grid-template-columns: 300px minmax(0, 1fr) !important; grid-template-rows: auto 1fr auto !important; column-gap: 36px !important; padding: 0 !important; overflow: hidden !important; }
.th-h .cs-card > .h-side { grid-column: 1; grid-row: 1 / -1; min-height: 100%; position: relative; }
.th-h .cs-card > .cs-card__top, .th-h .cs-card > .cs-card__main, .th-h .cs-card > .cs-card__foot { grid-column: 2; padding-right: 36px !important; }
.th-h .cs-card > .cs-card__top { padding-top: 32px !important; }
.th-h .cs-card > .cs-card__foot { padding-bottom: 32px !important; }
.th-h .cs-card__main { display: flex !important; flex-direction: column !important; gap: 20px !important; }
.th-h .cs-metrics { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; border-top: 1px solid rgba(21,19,26,.10); padding-top: 20px; }
.th-h .cs-metric { border: 0 !important; padding: 0 !important; margin: 0 !important; }
.th-h .h-side img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.th-h .h-side.is-stat { background: #15131A; color: #F4F4F5; display: flex; flex-direction: column; justify-content: flex-end; padding: 32px; box-sizing: border-box; gap: 8px; overflow: hidden; }
.th-h .h-side.is-stat::before { content: ""; position: absolute; left: -20%; right: -20%; top: -30%; height: 70%; background: var(--h-brand); filter: blur(60px); opacity: .35; }
.th-h .h-side.is-stat b { position: relative; font-family: EightiesComeback, Georgia, serif; font-weight: 600; font-size: 64px; line-height: 1; }
.th-h .h-side.is-stat span { position: relative; font-size: 14px; color: #B4B8C4; }
.th-h .cs-card.h-has-photo .cs-photo { display: none !important; }
.th-h .cs-name { font-size: 17px !important; }
/* Phones: no room for the side panel; keep the card's own layout and padding */
@media (max-width: 767px) {
  .th-h .cs-card { display: flex !important; padding: 24px !important; }
  .th-h .cs-card > .h-side { display: none; }
  .th-h .cs-card > .cs-card__top, .th-h .cs-card > .cs-card__main, .th-h .cs-card > .cs-card__foot { padding: 0 !important; }
  .th-h .cs-card.h-has-photo .cs-photo { display: block !important; }
  .th-h .cs-metrics { grid-template-columns: 1fr 1fr !important; }
}

/* Realistic content inside the demos: real-looking ad creatives and profile photos */
.th-h .plan-ads { gap: 6px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.th-h .plan-ad.h-real { width: auto !important; height: auto !important; aspect-ratio: 4 / 5 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; overflow: hidden !important; position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-end !important; background-size: cover !important; background-position: center !important; box-shadow: 0 8px 20px -10px rgba(21,19,26,.45) !important; }
.th-h .plan-ad.h-real::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%); }
.th-h .plan-ad.h-real > span { position: relative; color: #FFFFFF !important; padding: 0 8px; text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.th-h .plan-ad.h-real .plan-ad__brand { font-size: 9px !important; font-weight: 600 !important; opacity: .85; letter-spacing: .02em; }
.th-h .plan-ad.h-real .plan-ad__headline { font-size: 10px !important; line-height: 1.25 !important; font-weight: 500 !important; padding-bottom: 8px !important; margin-top: 2px; }
.th-h .app-avatar.h-real { color: transparent !important; background-size: cover !important; background-position: center !important; border: 0 !important; }

/* Data flow: one audience matched across channels ("Reach buyers…") */
@keyframes h-drift-l { 0% { background-position: 0% 0%, 100% 0%, 100% 100%, 0 0, 0 0; } 100% { background-position: 35% 25%, 65% 20%, 70% 65%, 0 0, 0 0; } }
.th-h .h-flow { position: absolute; inset: 0; border-radius: 20px;
  background: radial-gradient(45% 55% at 20% 25%, rgba(218,35,51,.44) 0%, transparent 70%), radial-gradient(40% 50% at 85% 20%, rgba(131,87,152,.54) 0%, transparent 70%), radial-gradient(50% 60% at 75% 90%, rgba(77,139,243,.40) 0%, transparent 70%),
    linear-gradient(rgba(21,19,26,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(21,19,26,.04) 1px, transparent 1px), #F6F1EA;
  background-size: 170% 170%, 170% 170%, 170% 170%, 40px 40px, 40px 40px; animation: h-drift-l 16s ease-in-out infinite alternate; padding: 40px; box-sizing: border-box; display: flex; flex-direction: column; gap: 24px; font-family: Rubik, sans-serif; color: var(--h-ink); text-align: left; }
.th-h .h-flow p { margin: 0; }
.th-h .h-flow__label { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--h-body); }
.th-h .h-reach { display: grid; grid-template-columns: 180px 1fr 230px; align-items: center; flex: 1; }
.th-h .h-node { background: var(--h-ink); color: #F4F4F5; border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 6px; }
.th-h .h-node b { font-weight: 500; font-size: 17px; }
.th-h .h-node span { font-size: 12px; color: #B4B8C4; }
.th-h .h-reach svg { width: 100%; height: 360px; display: block; }
.th-h .h-path { fill: none; stroke: url(#h-grad); stroke-width: 2.5; stroke-dasharray: 6 10; animation: h-flow 1.6s linear infinite; }
@keyframes h-flow { to { stroke-dashoffset: -32; } }
.th-h .h-channels { display: flex; flex-direction: column; justify-content: space-between; height: 360px; }
.th-h .h-ch { background: #FFFFFF; border: 1px solid var(--h-line); border-radius: 12px; padding: 10px 12px; display: grid; grid-template-columns: 1fr auto; row-gap: 8px; font-size: 13px; }
.th-h .h-ch em { font-style: normal; color: var(--h-body); }
.th-h .h-bar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #EFEBE6; overflow: hidden; }
.th-h .h-bar i { display: block; height: 100%; border-radius: 3px; background: var(--h-brand); transform-origin: left; animation: h-grow 2.4s cubic-bezier(.2,.7,.2,1) infinite alternate; }
/* Narrow slots (phones): the kit's fixed columns clip, so tighten them */
@container (max-width: 480px) {
  .th-h .h-flow { padding: 22px; gap: 16px; }
  .th-h .h-reach { grid-template-columns: 104px 1fr 150px; }
  .th-h .h-node { padding: 12px; border-radius: 12px; }
  .th-h .h-node b { font-size: 14px; }
  .th-h .h-ch { font-size: 11px; padding: 8px 9px; }
  .th-h .h-reach svg, .th-h .h-channels { height: 300px; }
}
@keyframes h-grow { from { transform: scaleX(0.15); } to { transform: scaleX(1); } }

/* Account timeline (dark), "Audiences for every buyer stage" */
.th-h .h-flow--dark { animation: none; background: #16171E; color: #F4F4F5; border: 1px solid rgba(255,255,255,0.10); padding: 0; gap: 0; box-shadow: 0 40px 100px -40px rgba(0,0,0,0.6); }
.th-h .h-acct { display: flex; align-items: center; gap: 12px; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 13px; color: #B4B8C4; }
.th-h .h-acct__mark { width: 28px; height: 28px; border-radius: 8px; background: #2A2C38; color: #F4F4F5; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500; }
.th-h .h-acct b { color: #F4F4F5; font-weight: 500; }
.th-h .h-acct em { margin-left: auto; font-style: normal; padding: 4px 10px; border-radius: 999px; background: rgba(181,152,255,0.16); color: #D9CCFF; }
.th-h .h-tl { flex: 1; display: grid; grid-template-columns: 22px 1fr; gap: 18px; padding: 30px 30px 30px 26px; }
.th-h .h-tl__rail { position: relative; width: 2px; margin-left: 10px; background: rgba(255,255,255,0.08); }
.th-h .h-tl__rail i { position: absolute; inset: 0; background: linear-gradient(180deg, #4D8BF3, #F1A136 45%, #835798); transform-origin: top; animation: h-rail 8s linear infinite; }
@keyframes h-rail { 0% { transform: scaleY(0); } 70%, 90% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.th-h .h-tl__events { display: flex; flex-direction: column; justify-content: space-between; }
.th-h .h-ev { opacity: 0; animation: h-tick 8s ease-out infinite; }
@keyframes h-tick { 0% { opacity: 0; transform: translateY(8px); } 5%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.th-h .h-ev__date { font-size: 12px; color: #8C91A0; }
.th-h .h-ev__title { margin-top: 4px !important; font-size: 16px; color: #F4F4F5; }
.th-h .h-ev__note { margin-top: 6px !important; font-size: 13px; color: #B4B8C4; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.th-h .h-chip { padding: 3px 10px; border-radius: 999px; font-size: 12px; color: #F4F4F5; border: 1px solid rgba(255,255,255,0.14); }
.th-h .h-chip.p { background: rgba(77,139,243,0.22); }
.th-h .h-chip.v { background: rgba(241,161,54,0.22); }
.th-h .h-chip.x { background: rgba(131,87,152,0.30); }
@media (prefers-reduced-motion: reduce) { .th-h .h-flow, .th-h .h-path, .th-h .h-bar i, .th-h .h-tl__rail i { animation: none; } .th-h .h-ev { animation: none; opacity: 1; } }

/* Then/now pair at "Ask what's working" */
.th-h .h-thennow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; max-width: 960px; margin: 8px auto 48px; text-align: left; font-family: Rubik, sans-serif; }
.th-h .h-thennow figure { margin: 0; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; }
.th-h .h-thennow img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-h .h-q { margin: 0; font-family: EightiesComeback, Georgia, serif; font-weight: 600; font-size: 30px; line-height: 1.15; color: var(--h-ink); }
.th-h .h-attr { margin: 12px 0 0; font: 14px Rubik, sans-serif; color: var(--h-body); }
.th-h .h-now { margin: 20px 0 0; display: inline-flex; align-items: center; gap: 8px; font: 500 12px Rubik, sans-serif; letter-spacing: 0.1em; color: var(--h-ink); }
.th-h .h-now::before { content: ""; width: 28px; height: 4px; border-radius: 2px; background: var(--h-brand); }
@media (max-width: 767px) { .th-h .h-thennow { grid-template-columns: 1fr; } }

/* Pricing */
.th-h .p26-pricing { --p26-accent: #15131A; --p26-accent-strong: #15131A; --pr-accent: #15131A; --p26-accent-soft: rgba(21,19,26,.32); --p26-surface-inverse: #15131A; --pr-line: rgba(21,19,26,.10); --pr-soft: #F6F1EA; --pr-900: #15131A; --pr-700: #4A4654; }
.th-h .pr-card, .th-h .pr-chooser, .th-h .pr-table-wrap, .th-h .pr-addon { border-radius: 20px !important; box-shadow: 0 30px 70px -40px rgba(21,19,26,.35); }
.th-h .pr-btn { border-radius: 999px !important; }
.th-h .pr-addon { background: #FFFFFF !important; }
.th-h .pr-table .is-hi { background: #FBF8F4 !important; }
.th-h .pr-table thead .is-hi { background: #F6F1EA !important; color: #15131A !important; }
.th-h .pr-choice { position: relative; }
.th-h .pr-choice.is-sel { background: #FBF8F4 !important; box-shadow: none !important; }
.th-h .pr-choice.is-sel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--h-brand); }
.th-h .pr-fcard.is-open { border-color: rgba(21,19,26,.24) !important; }
/* Connections and Plays directories */
.th-h .cn-pill:hover, .th-h .pl-pill:hover { border-color: rgba(21,19,26,.32) !important; }
.th-h .cn-pill[aria-pressed="true"], .th-h .pl-pill[aria-pressed="true"] { background: #15131A !important; border-color: #15131A !important; color: #F4F4F5 !important; }
.th-h .cn-search:focus-within, .th-h .pl-search:focus-within { border-color: #15131A !important; box-shadow: 0 0 0 3px rgba(21,19,26,.12) !important; }
.th-h .cn-card, .th-h .pl-card { border-color: var(--h-line) !important; border-radius: 20px !important; }
.th-h .cn-card.is-link:hover, .th-h .pl-card:hover { border-color: rgba(21,19,26,.24) !important; box-shadow: 0 30px 70px -40px rgba(21,19,26,.35) !important; }
.th-h .cn-match b, .th-h .cn-via, .th-h .cn-more, .th-h .cn-reset, .th-h .pl-more, .th-h .pl-reset, .th-h .pl-stat b { color: #15131A !important; }
.th-h .pl-channel { color: #4A4654 !important; }
.th-h .pl-stat { background: #F6F1EA !important; }
/* Customers: bold tiles mapped onto the H palette */
.th-h .p26-customers { --cu-900: #15131A; --cu-700: #4A4654; --cu-line: rgba(21,19,26,.10); }
.th-h [data-tone="violet"], .th-h [data-tone="indigo"], .th-h [data-tone="blue"] { --bg: #16171E; }
.th-h [data-tone="sun"] { --bg: #F2C945; --fg: #15131A; }
.th-h [data-tone="lilac"] { --bg: #F6F1EA; --fg: #15131A; }
.th-h [data-tone="sky"] { --bg: #FFFFFF; --fg: #15131A; }
.th-h .cu-feature, .th-h .cu-poster { background: #0A0B10 !important; }
.th-h .cu-play { color: #15131A !important; }
.th-h .cu-tab[aria-selected="true"] { border-color: #15131A !important; box-shadow: inset 0 0 0 1px #15131A !important; }
.th-h .cu-pill:hover { border-color: rgba(21,19,26,.32) !important; }
.th-h .cu-pill[aria-pressed="true"] { background: #15131A !important; border-color: #15131A !important; color: #F4F4F5 !important; }

/* Made-up company logos, ad photos and thumbnails inside product demos */
.th-h .h-logo { color: transparent !important; padding: 0 !important; overflow: hidden; }
.th-h .h-logo svg { width: 64%; height: 64%; display: block; }
.th-h .jv-rs-img.h-real, .th-h .h-thumb { background-size: cover !important; background-position: center !important; }
.th-h .h-thumb { display: inline-block; flex: none; width: 2.2em; height: 2.2em; border-radius: 0.35em; box-shadow: 0 0 0 1px rgba(21,19,26,.08); vertical-align: middle; margin-right: 0.5em; }
.th-h .jv-at-thumb { display: block; width: 2.6em; height: 1.9em; margin: 0 auto; border-radius: 0.35em; background-size: cover; background-position: center; box-shadow: 0 6px 14px -8px rgba(21,19,26,.5), 0 0 0 1px rgba(21,19,26,.08); }
.th-h .jv-dg-name .h-thumb { width: 1.5em; height: 1.5em; margin-right: 0.4em; border-radius: 0.25em; }