/* The sample sites in the Industries section (home page and /v2). One set of parts (top bar, menu, headline,
   intro, two buttons, small facts, photo, a floating card) laid out and art-directed per industry, the way that
   kind of business would want its site to look. Sizes are in cqw, so each sample scales as one picture.
   direct.js fills the parts and sets data-trade on #trade-panel. */
.ts {
  --t: #2c4eb8;
  --t-bg: #fbfaf7;
  --t-ink: #10151f;
  --t-soft: color-mix(in srgb, var(--t-ink) 66%, transparent);
  --ts-font: 'Instrument Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --ts-ui: var(--product, Inter), ui-sans-serif, system-ui, sans-serif;
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  container-type: inline-size;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-areas: "top top" "nav nav" "body img";
  background: var(--t-bg);
  color: var(--t-ink);
  font-family: var(--ts-ui);
  transition: background 0.4s;
}
.ts [hidden] { display: none !important; }
.ts-top { grid-area: top; position: relative; z-index: 1; display: flex; justify-content: center; padding: 0.9cqw 3.6cqw; background: var(--t); color: var(--t-bg); font-size: 1.4cqw; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }
.ts-nav { grid-area: nav; position: relative; z-index: 1; display: flex; align-items: center; gap: 2.6cqw; padding: 2.3cqw 3.6cqw; border-bottom: 1px solid color-mix(in srgb, var(--t-ink) 8%, transparent); }
.ts-logo { margin-right: auto; display: inline-flex; align-items: center; gap: 1.1cqw; font: var(--ts-logo-weight, 600) 2.3cqw/1 var(--ts-font); letter-spacing: var(--ts-track, -0.02em); white-space: nowrap; }
.ts-logo i { flex: none; width: 2.6cqw; height: 2.6cqw; border-radius: 0.7cqw; background: var(--t); }
.ts-links { display: flex; gap: 2.4cqw; color: var(--t-soft); font-size: 1.55cqw; white-space: nowrap; }
.ts-links i { font-style: normal; }
.ts-cta { padding: 1.15cqw 2cqw; border-radius: 99px; background: var(--t-ink); color: var(--t-bg); font-size: 1.6cqw; font-weight: 600; white-space: nowrap; }
.ts-body { grid-area: body; position: relative; z-index: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.7cqw; padding: 3cqw 3cqw 4cqw 3.6cqw; }
.ts-kick { color: var(--t); font-size: 1.45cqw; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.ts-h { font: var(--ts-weight, 400) var(--ts-size, 5.4cqw)/1.03 var(--ts-font); letter-spacing: var(--ts-track, -0.03em); text-wrap: balance; }
.ts-sub { max-width: 38cqw; color: var(--t-soft); font-size: 1.7cqw; line-height: 1.4; }
.ts-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2cqw; margin-top: 0.6cqw; }
.ts-btn, .ts-btn2 { padding: 1.35cqw 2.4cqw; border-radius: 99px; font-size: 1.7cqw; font-weight: 600; white-space: nowrap; }
.ts-btn { background: var(--t); color: #fff; }
.ts-btn2 { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 40%, transparent); color: var(--t-ink); }
.ts-chips { display: flex; flex-wrap: wrap; gap: 0.8cqw 2.2cqw; margin-top: 0.4cqw; color: var(--t-soft); font-size: 1.35cqw; }
.ts-chips i { display: inline-flex; align-items: center; gap: 0.7cqw; font-style: normal; white-space: nowrap; }
.ts-chips i::before { content: ""; width: 0.8cqw; height: 0.8cqw; border-radius: 50%; background: var(--t); }
.ts-img { grid-area: img; position: relative; display: block; overflow: hidden; margin: 0 3.6cqw 3.6cqw 0; border-radius: 1.6cqw; background: color-mix(in srgb, var(--t-ink) 10%, transparent); }
.ts-img canvas, .ts-photo { position: absolute; inset: 0; width: 100%; height: 100%; }
.ts-photo { object-fit: cover; opacity: 0; transition: opacity 0.35s ease; }
.ts-photo.on { opacity: 1; }
.ts-img::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ts-card { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: 0.3cqw; padding: 1.5cqw 2cqw; border-radius: 1.3cqw; background: #fff; color: #14161a; box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.18); font-size: 1.35cqw; line-height: 1.3; }
.ts-card b { font-size: 1.75cqw; font-weight: 700; }
.ts-card span { color: #5b6170; }
/* Switching industries fades the whole sample out and back in. */
.trade .ts > * { transition: opacity 0.2s ease; }
.trade.fade .ts > * { opacity: 0; }

/* Accent phrases ({braces} in a headline in direct.js) are styled per industry. */
.ts-h em { font-style: inherit; }

/* The working part of each page (w in TRADES): a white card with a title, a select or a field, chips, rows,
   a progress bar and a button, in the industry's accent (--w-accent, with --w-on for text on it). */
.ts-w { --w-accent: var(--t); --w-on: #fff; position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 1cqw; width: 25cqw; padding: 1.8cqw; border-radius: 1.6cqw; background: #fff; color: #10151f; box-shadow: 0 0 0 1px rgba(16, 21, 31, 0.06), 0 1.4cqw 4cqw rgba(16, 21, 31, 0.22); font: 500 1.3cqw/1.3 var(--ts-ui); letter-spacing: -0.005em; }
.ts-w .w-h { font-size: 1.6cqw; font-weight: 700; letter-spacing: -0.015em; }
.ts-w :is(.w-sel, .w-field) { display: flex; align-items: center; justify-content: space-between; padding: 1cqw 1.2cqw; border: 1px solid #e3e5ea; border-radius: 0.9cqw; }
.ts-w .w-sel::after { content: "\25BE"; color: #8a909c; }
.ts-w .w-field { color: #8a909c; font-weight: 400; }
.ts-w .w-chips { display: flex; flex-wrap: nowrap; gap: 0.6cqw; }
.ts-w .w-chips i { flex: 1; text-align: center; padding: 0.75cqw 0.8cqw; border: 1px solid #e3e5ea; border-radius: 0.8cqw; font-style: normal; white-space: nowrap; }
.ts-w .w-chips i.on { border-color: var(--w-accent); background: var(--w-accent); color: var(--w-on); }
.ts-w .w-row { display: flex; justify-content: space-between; gap: 1cqw; padding-top: 0.9cqw; border-top: 1px solid #eef0f3; }
.ts-w .w-h + .w-row { padding-top: 0; border-top: 0; }
.ts-w .w-row span:last-child { color: #5b6170; }
.ts-w .w-bar { display: block; height: 0.7cqw; border-radius: 99px; background: #eef0f3; overflow: hidden; }
.ts-w .w-bar i { display: block; width: var(--p, 0); height: 100%; border-radius: inherit; background: var(--w-accent); }
.ts-w .w-note { color: #5b6170; font-size: 1.15cqw; }
.ts-w .w-btn { display: grid; place-items: center; padding: 1.1cqw; border-radius: 0.9cqw; background: var(--w-accent); color: var(--w-on); font-weight: 700; }
/* Status pills that start with a dot */
.trade:is([data-trade="electric"], [data-trade="dental"], [data-trade="agency"]) .ts-kick { display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.65cqw 1.4cqw; border-radius: 99px; letter-spacing: 0.01em; text-transform: none; font-size: 1.35cqw; font-weight: 500; }
.trade:is([data-trade="electric"], [data-trade="dental"], [data-trade="agency"]) .ts-kick::before { content: ""; width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0.45cqw rgba(34, 197, 94, 0.18); }

/* Electrician: graphite and electric yellow, Space Grotesk, a slim emergency line, and a same-day booking picker
   on the photo instead of a phone-only hero */
.trade[data-trade="electric"] .ts { --t: #ffd23f; --t-bg: #0b0f14; --t-ink: #f3f5f8; --t-soft: rgba(243, 245, 248, 0.66); --ts-font: 'Space Grotesk', var(--ts-ui); --ts-weight: 700; --ts-size: 6.1cqw; --ts-track: -0.045em; grid-template-columns: 1.08fr 1fr; }
.trade[data-trade="electric"] .ts-top { background: #151b24; color: var(--t); font-weight: 500; }
.trade[data-trade="electric"] .ts-nav { border-color: rgba(255, 255, 255, 0.08); }
.trade[data-trade="electric"] .ts-logo { font-size: 2.2cqw; letter-spacing: -0.03em; }
.trade[data-trade="electric"] .ts-logo i { border-radius: 0.6cqw; }
.trade[data-trade="electric"] :is(.ts-cta, .ts-btn, .ts-btn2) { border-radius: 0.9cqw; }
.trade[data-trade="electric"] :is(.ts-cta, .ts-btn) { background: var(--t); color: #0b0f14; }
.trade[data-trade="electric"] .ts-kick { background: rgba(255, 255, 255, 0.06); color: var(--t-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.trade[data-trade="electric"] .ts-h { line-height: 0.98; }
.trade[data-trade="electric"] .ts-h em { color: var(--t); }
.trade[data-trade="electric"] .ts-btn2 { color: var(--t-ink); }
.trade[data-trade="electric"] .ts-img { margin: 2cqw 3.6cqw 3.6cqw 0; border-radius: 1.4cqw; }
.trade[data-trade="electric"] .ts-w { --w-on: #0b0f14; left: 46%; bottom: 6.5cqw; width: 27cqw; }

/* Law firm: warm paper and ink, Instrument Serif with an italic phrase in bronze, Geist for everything else, and
   the practice areas as a menu on the photo */
.trade[data-trade="law"] .ts { --t: #8a6a47; --t-bg: #f5f2ec; --t-ink: #15171c; --t-soft: #5e6068; --ts-font: 'Instrument Serif', Georgia, serif; --ts-ui: Geist, var(--product, Inter), ui-sans-serif, system-ui, sans-serif; --ts-size: 7.4cqw; --ts-track: -0.025em; --ts-logo-weight: 400; grid-template-columns: 1.1fr 1fr; }
.trade[data-trade="law"] .ts-nav { border-color: rgba(21, 23, 28, 0.08); }
.trade[data-trade="law"] .ts-logo { font-size: 2.6cqw; letter-spacing: -0.01em; }
.trade[data-trade="law"] .ts-logo i { border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 0.25cqw var(--t-ink); }
.trade[data-trade="law"] :is(.ts-cta, .ts-btn) { background: var(--t-ink); color: #fff; }
.trade[data-trade="law"] .ts-kick { color: var(--t-soft); font-weight: 500; letter-spacing: 0.14em; }
.trade[data-trade="law"] .ts-h { line-height: 0.96; }
.trade[data-trade="law"] .ts-h em { font-style: italic; color: var(--t); }
.trade[data-trade="law"] .ts-btn2 { box-shadow: none; padding-inline: 0.8cqw; }
.trade[data-trade="law"] .ts-btn2::after { content: " \2192"; }
.trade[data-trade="law"] .ts-chips i::before { content: "\2713"; width: auto; height: auto; border-radius: 0; background: none; color: var(--t); font-weight: 700; }
.trade[data-trade="law"] .ts-img { margin: 2cqw 3.6cqw 3.6cqw 0; border-radius: 1.4cqw; }
.trade[data-trade="law"] .ts-w { --w-accent: var(--t-ink); left: 47.5%; bottom: 6.5cqw; width: 23cqw; }
.trade[data-trade="law"] .ts-w .w-row span:last-child { color: var(--t); font-weight: 700; }

/* Accountant: fintech-clean white and emerald, Manrope, and this year's return as a progress card on the photo */
.trade[data-trade="tax"] .ts { --t: #0e9f6e; --t-bg: #f6f8f7; --t-ink: #0b1b17; --t-soft: #52605c; --ts-font: 'Manrope', var(--ts-ui); --ts-ui: 'Manrope', var(--product, Inter), ui-sans-serif, system-ui, sans-serif; --ts-weight: 800; --ts-size: 5.9cqw; --ts-track: -0.05em; --ts-logo-weight: 800; grid-template-columns: 1.05fr 1fr; }
.trade[data-trade="tax"] .ts-nav { border: 0; }
.trade[data-trade="tax"] .ts-logo { font-size: 2.1cqw; letter-spacing: -0.04em; }
.trade[data-trade="tax"] .ts-logo i { border-radius: 0.7cqw; }
.trade[data-trade="tax"] :is(.ts-cta, .ts-btn) { background: var(--t-ink); color: #fff; }
.trade[data-trade="tax"] .ts-kick { padding: 0.65cqw 1.4cqw; border-radius: 99px; background: #ddf3ea; color: #0b6b4b; letter-spacing: 0.01em; text-transform: none; font-size: 1.35cqw; font-weight: 700; }
.trade[data-trade="tax"] .ts-h { line-height: 1; }
.trade[data-trade="tax"] .ts-h em { color: var(--t); }
.trade[data-trade="tax"] .ts-btn2 { box-shadow: none; padding-inline: 0.8cqw; }
.trade[data-trade="tax"] .ts-btn2::after { content: " \2192"; }
.trade[data-trade="tax"] .ts-img { margin: 2cqw 3.6cqw 3.6cqw 0; border-radius: 1.6cqw; }
.trade[data-trade="tax"] .ts-w { left: 46.5%; bottom: 6cqw; width: 24cqw; }
.trade[data-trade="tax"] .ts-w .w-row:not(:last-of-type) span:last-child { color: var(--t); font-weight: 700; }
.trade[data-trade="tax"] .ts-w .w-row:not(:last-of-type) span:last-child::before { content: "\2713  "; }

/* Dental clinic: warm white and calm teal, Plus Jakarta Sans, today's hours as a live pill and a day-and-time
   booking picker on the photo */
.trade[data-trade="dental"] .ts { --t: #2f8f83; --t-bg: #f7f5f1; --t-ink: #102a2d; --t-soft: #56676a; --ts-font: 'Plus Jakarta Sans', var(--ts-ui); --ts-ui: 'Plus Jakarta Sans', var(--product, Inter), ui-sans-serif, system-ui, sans-serif; --ts-weight: 800; --ts-size: 5.8cqw; --ts-track: -0.045em; --ts-logo-weight: 800; }
.trade[data-trade="dental"] .ts-nav { border: 0; }
.trade[data-trade="dental"] .ts-logo { font-size: 2.1cqw; letter-spacing: -0.03em; }
.trade[data-trade="dental"] .ts-logo i { border-radius: 50%; }
.trade[data-trade="dental"] :is(.ts-cta, .ts-btn) { background: var(--t); color: #fff; }
.trade[data-trade="dental"] .ts-kick { background: #e3f0ec; color: #1f5f57; }
.trade[data-trade="dental"] .ts-h { line-height: 1.02; }
.trade[data-trade="dental"] .ts-h em { color: var(--t); }
.trade[data-trade="dental"] .ts-img { margin: 1.4cqw 3.6cqw 3.6cqw 0; border-radius: 2.6cqw; }
.trade[data-trade="dental"] .ts-w { left: 46%; bottom: 6cqw; width: 26cqw; }

/* Landscaper: the garden is the page (inset, rounded), a floating white menu, Bricolage Grotesque and a free-estimate
   form floating on the photo */
.trade[data-trade="yard"] .ts { --t: #d4e26b; --t-bg: #f3f0e6; --t-ink: #fbfaf5; --t-soft: rgba(251, 250, 245, 0.86); --ts-font: 'Bricolage Grotesque', var(--ts-ui); --ts-weight: 700; --ts-size: 6.9cqw; --ts-track: -0.045em; --ts-logo-weight: 700; grid-template-columns: 1fr; grid-template-areas: "top" "nav" "body"; }
.trade[data-trade="yard"] .ts-img { position: absolute; inset: 1.2cqw; margin: 0; border-radius: 1.8cqw; }
.trade[data-trade="yard"] .ts-img::after { background: linear-gradient(180deg, rgba(16, 32, 22, 0.3) 0%, rgba(16, 32, 22, 0) 30%, rgba(16, 32, 22, 0.15) 50%, rgba(16, 32, 22, 0.9) 100%); }
.trade[data-trade="yard"] .ts-nav { margin: 2.6cqw 2.6cqw 0; padding: 1cqw 1cqw 1cqw 2.2cqw; border: 0; border-radius: 99px; background: #fff; color: #13261c; box-shadow: 0 0.6cqw 2cqw rgba(0, 0, 0, 0.15); }
.trade[data-trade="yard"] .ts-links { color: rgba(19, 38, 28, 0.7); }
.trade[data-trade="yard"] .ts-logo { font-size: 2.2cqw; letter-spacing: -0.03em; }
.trade[data-trade="yard"] .ts-logo i { border-radius: 50% 0; background: #4f7a3a; }
.trade[data-trade="yard"] .ts-cta { background: #13261c; color: #fff; }
.trade[data-trade="yard"] .ts-body { justify-content: flex-end; max-width: 58cqw; padding: 0 4.4cqw 4.6cqw; }
.trade[data-trade="yard"] .ts-kick { color: var(--t); letter-spacing: 0.12em; }
.trade[data-trade="yard"] .ts-h { line-height: 0.95; }
.trade[data-trade="yard"] .ts-h em { color: var(--t); }
.trade[data-trade="yard"] :is(.ts-btn, .ts-btn2) { border-radius: 99px; }
.trade[data-trade="yard"] .ts-btn { background: #fbfaf5; color: #13261c; }
.trade[data-trade="yard"] .ts-btn2 { color: #fff; }
.trade[data-trade="yard"] .ts-w { --w-accent: #1f3a28; right: 4.4cqw; top: 15cqw; width: 27cqw; }

/* Salon: blush and terracotta, a light Outfit headline with an Instrument Serif italic, an arched photo and the
   services menu with prices on it */
.trade[data-trade="salon"] .ts { --t: #b5654e; --t-bg: #f6eee8; --t-ink: #1e1916; --t-soft: #6e625b; --ts-font: 'Outfit', var(--ts-ui); --ts-ui: 'Outfit', var(--product, Inter), ui-sans-serif, system-ui, sans-serif; --ts-weight: 300; --ts-size: 6.9cqw; --ts-track: -0.045em; --ts-logo-weight: 500; grid-template-columns: 1.15fr 0.85fr; }
.trade[data-trade="salon"] .ts-nav { border-color: rgba(30, 25, 22, 0.1); }
.trade[data-trade="salon"] .ts-links { order: -1; flex: 1; font-size: 1.3cqw; letter-spacing: 0.14em; text-transform: uppercase; }
.trade[data-trade="salon"] .ts-logo { margin: 0; flex: none; font-size: 2cqw; letter-spacing: 0.32em; text-transform: uppercase; }
.trade[data-trade="salon"] .ts-logo i { display: none; }
.trade[data-trade="salon"] .ts-cta { flex: 1; text-align: right; padding: 0; border-radius: 0; background: none; color: var(--t-ink); font-size: 1.3cqw; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; }
.trade[data-trade="salon"] .ts-kick { color: var(--t); letter-spacing: 0.24em; font-weight: 500; }
.trade[data-trade="salon"] .ts-h { line-height: 0.98; }
.trade[data-trade="salon"] .ts-h em { font: italic 400 1.1em/0.9 'Instrument Serif', Georgia, serif; letter-spacing: -0.02em; color: var(--t); }
.trade[data-trade="salon"] .ts-btn { background: var(--t-ink); color: #fff; }
.trade[data-trade="salon"] .ts-btn2 { box-shadow: none; padding-inline: 0.8cqw; text-decoration: underline; text-underline-offset: 0.5cqw; }
.trade[data-trade="salon"] .ts-img { margin: 1.6cqw 4.4cqw 3.6cqw 0; border-radius: 50cqw 50cqw 1.6cqw 1.6cqw; }
.trade[data-trade="salon"] .ts-w { --w-accent: var(--t-ink); left: 49%; bottom: 6cqw; width: 22cqw; }

/* Agency: near-black and acid lime, Unbounded, an availability pill, and the work as three captioned tiles */
.trade[data-trade="agency"] .ts { --t: #c8ff4d; --t-bg: #0b0b0c; --t-ink: #f5f5f2; --t-soft: rgba(245, 245, 242, 0.62); --ts-font: 'Unbounded', var(--ts-ui); --ts-weight: 600; --ts-size: 5.3cqw; --ts-track: -0.04em; --ts-logo-weight: 600; grid-template-columns: 1fr; grid-template-rows: auto auto auto minmax(0, 1fr); grid-template-areas: "top" "nav" "body" "img"; }
.trade[data-trade="agency"] .ts-nav { border-color: rgba(255, 255, 255, 0.08); }
.trade[data-trade="agency"] .ts-logo { font-size: 1.9cqw; letter-spacing: -0.03em; }
.trade[data-trade="agency"] .ts-logo i { border-radius: 50%; }
.trade[data-trade="agency"] :is(.ts-cta, .ts-btn) { background: var(--t); color: #0b0b0c; }
.trade[data-trade="agency"] .ts-body { gap: 1.5cqw; padding: 1.6cqw 3.6cqw 2.6cqw; }
.trade[data-trade="agency"] .ts-kick { background: rgba(255, 255, 255, 0.06); color: var(--t-ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); }
.trade[data-trade="agency"] .ts-h { line-height: 1.02; max-width: 80cqw; }
.trade[data-trade="agency"] .ts-h em { color: var(--t); }
.trade[data-trade="agency"] .ts-sub { display: none; }
.trade[data-trade="agency"] .ts-btn2 { color: var(--t-ink); }
.trade[data-trade="agency"] .ts-img { margin: 0 3.6cqw 7.4cqw; border-radius: 1.2cqw; -webkit-mask: linear-gradient(90deg, #000 0 32.6%, transparent 32.6% 33.7%, #000 33.7% 66.3%, transparent 66.3% 67.4%, #000 67.4%); mask: linear-gradient(90deg, #000 0 32.6%, transparent 32.6% 33.7%, #000 33.7% 66.3%, transparent 66.3% 67.4%, #000 67.4%); }
.trade[data-trade="agency"] .ts-w { left: 3.6cqw; right: 3.6cqw; bottom: 8.6cqw; width: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.1%; padding: 0 1.2cqw; border-radius: 0; background: none; box-shadow: none; }
.trade[data-trade="agency"] .ts-w .w-tile { justify-self: start; padding: 0.6cqw 1.1cqw; border-radius: 99px; background: rgba(11, 11, 12, 0.72); color: #fff; font-style: normal; font-size: 1.2cqw; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* Real estate: clean white and ink, Onest with a grey second tone, a location pill, Buy/Rent/Sell tabs over the
   search bar and a just-listed card on the photo */
.trade[data-trade="home"] .ts { --t: #0b1220; --t-bg: #ffffff; --t-ink: #0b1220; --t-soft: #667085; --ts-font: 'Onest', var(--ts-ui); --ts-ui: 'Onest', var(--product, Inter), ui-sans-serif, system-ui, sans-serif; --ts-weight: 700; --ts-size: 6cqw; --ts-track: -0.05em; --ts-logo-weight: 700; grid-template-columns: 1.05fr 1fr; }
.trade[data-trade="home"] .ts-nav { border-color: #eaecf0; }
.trade[data-trade="home"] .ts-logo { font-size: 2.1cqw; letter-spacing: -0.04em; }
.trade[data-trade="home"] .ts-logo i { border-radius: 0.6cqw; }
.trade[data-trade="home"] .ts-cta { background: var(--t-ink); color: #fff; }
.trade[data-trade="home"] .ts-body > * { order: 2; }
.trade[data-trade="home"] .ts-kick { order: 0; display: inline-flex; align-items: center; gap: 0.8cqw; padding: 0.65cqw 1.4cqw; border-radius: 99px; background: #f2f4f7; color: var(--t-ink); letter-spacing: 0.01em; text-transform: none; font-size: 1.35cqw; font-weight: 500; }
.trade[data-trade="home"] .ts-kick::before { content: ""; width: 0.8cqw; height: 0.8cqw; border-radius: 50% 50% 50% 0; background: var(--t-ink); transform: rotate(-45deg); }
.trade[data-trade="home"] .ts-h { order: 1; line-height: 1; }
.trade[data-trade="home"] .ts-h em { color: #98a2b3; }
.trade[data-trade="home"] .ts-sub { order: 1; }
.trade[data-trade="home"] .ts-chips { order: 2; gap: 0.4cqw; margin: 0.6cqw 0 -0.6cqw; color: var(--t-soft); font-size: 1.35cqw; font-weight: 600; }
.trade[data-trade="home"] .ts-chips i { padding: 0.5cqw 1.2cqw; border-radius: 99px; }
.trade[data-trade="home"] .ts-chips i::before { display: none; }
.trade[data-trade="home"] .ts-chips i:first-child { background: var(--t-ink); color: #fff; }
.trade[data-trade="home"] .ts-actions { order: 3; flex-direction: row-reverse; flex-wrap: nowrap; width: 100%; max-width: 42cqw; padding: 0.6cqw; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px #eaecf0, 0 0.8cqw 2.4cqw rgba(16, 24, 40, 0.08); }
.trade[data-trade="home"] .ts-btn { background: var(--t-ink); }
.trade[data-trade="home"] .ts-btn2 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; box-shadow: none; color: #98a2b3; font-weight: 400; text-align: left; }
.trade[data-trade="home"] .ts-img { margin: 2cqw 3.6cqw 3.6cqw 0; border-radius: 1.6cqw; }
.trade[data-trade="home"] .ts-card { left: 47%; bottom: 6.5cqw; gap: 0.6cqw; padding: 1.6cqw 2cqw; border-radius: 1.4cqw; }
.trade[data-trade="home"] .ts-card b { align-self: flex-start; padding: 0.3cqw 0.9cqw; border-radius: 99px; background: #ecfdf3; color: #067647; font-size: 1.05cqw; letter-spacing: 0.08em; text-transform: uppercase; }
.trade[data-trade="home"] .ts-card span { color: var(--t-ink); font-size: 1.75cqw; font-weight: 700; letter-spacing: -0.02em; }

/* On phones the sample is shown small: keep the headline, one button and the photo, so what remains stays legible. */
@container (max-width: 480px) {
  .trade[data-trade] :is(.ts-links, .ts-chips, .ts-sub, .ts-kick, .ts-card, .ts-w) { display: none; }
  .trade:not([data-trade="home"]) .ts-btn2 { display: none; }
}

/* "Made with Hyperdesk": the badge in the corner of a site we made, in Hyperdesk's own type whatever the sample */
.ts-made { position: absolute; right: 2.4cqw; bottom: 2.4cqw; z-index: 4; display: inline-flex; align-items: center; gap: max(0.9cqw, 5px); padding: max(1.05cqw, 5px) max(1.4cqw, 7px); border-radius: max(0.9cqw, 5px); background: #fff; color: #29251e; box-shadow: 0 0 0 1px rgba(25, 22, 16, 0.08), 0 0.6cqw 2cqw rgba(25, 22, 16, 0.18); font: 600 max(1.6cqw, 8px)/1 var(--body, Inter), ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; white-space: nowrap; }
.ts-made img { display: block; width: auto; height: max(2.15cqw, 10px); }