/* Clarity on the home page, "Announce + launch strip" (docs/design/clarity/brief.md). Loaded after site.css and
   home-story.css.
   Every selector names a .clarity- class (the header rules are scoped by .nav-links:has(.clarity-nav)), so with the
   clarity flag off (no Clarity markup on the page) nothing here matches and the home page renders as main does.
   Hover lives in @media (hover: hover) blocks only (studio P-in-01); focus-visible twins sit beside the base rules.
   Void's own tokens (--wrap, --gutter, --font, --mono, --muted, --soft) carry the page; Clarity's Frost Ice palette
   (docs/design/clarity/brief.md) colours only the Clarity parts.
   Contrast, measured with contrast.py on the painted ground under each line of text (measured on the mock: hide
   every glyph, take the brightest ground pixel under the words): the lowest
   pairs are dim #93A3B8 on the foot #121C26 6.70:1 and the lede #B9C6D6 on #15283C 8.65:1 (390 wide).
   Motion (once each, transform and opacity only, still under reduced motion, nothing hidden at rest):
     chip   the fan opens 480 ms; one light pass 100 ms + 500 ms = 600 ms
     deck   the three covers deal from one stack into the cascade, 560 ms + 2 x 40 ms = 640 ms
     row    the cards slide in 48 px, 420 ms plus 30 ms per card's place, the stagger capped at 180 ms, so 600 ms at
            most however many cards the row holds (they are drawn the whole time)
   Nothing loops, nothing autoplays. */

@font-face { font-family: "Michroma"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/michroma-400.woff2") format("woff2"); }

.clarity-nav, .clarity-menu, .clarity-chip, .clarity-strip {
  --clarity-ground: #0A0E15;
  --clarity-navy: #132440;
  --clarity-panel: #0E1622;
  --clarity-frame: rgba(143, 227, 255, 0.16);
  --clarity-ink: #EAF2F8;   /* 14.0:1 on the h2's ground #122337, 16.0:1 on the card #0E1622, 14.5:1 in the chip */
  --clarity-soft: #B9C6D6;  /* 8.7:1 on the lede's ground #15283C, 10.5:1 on #0E1622 */
  --clarity-dim: #93A3B8;   /* 6.7:1 on the foot's ground #121C26 */
  --clarity-ice: #8FE3FF;   /* 11.2:1 on #122237, 9.6:1 inside the outline button #192F41, 12.6:1 on #0E1622 */
  --clarity-ice-hi: #C4F1FF;
  --clarity-blue: #3F7BFF;
  --clarity-on-ice: #06121C; /* 13.1:1 on ice */
  --clarity-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ------------------------------------------------------------------ the "New" pill */
.clarity-new {
  display: inline-flex; align-items: center; flex: none; padding: 2px 8px; border-radius: 999px;
  background: var(--clarity-ice); color: var(--clarity-on-ice); font: 700 12px/1.3 var(--font); letter-spacing: 0;
}

/* --------------------------------------------------------------------------- nav */
/* "Clarity" in the nav's own link colour; the pill alone is ice (one accent in the row). */
.nav-links .clarity-nav { display: inline-flex; align-items: center; gap: 8px; }
/* The header keeps its row at every width it shows one today (720 up): the links and the filled "Open the Portal"
   stay in view on tablets, as on /commands and /updates. The fold into the menu at 720 to 900 is the owner's call
   (brief, "Where it is shown", amendment 2026-11-01); if he picks it, it is alt-header-fold.css, added after this file.
   At 960 and below the row is tight (measured on the mock), so there the pill steps out of sight ("New"
   stays in the link's accessible name) and the links take 9 px sides instead of 14. The nav is then 450 wide against
   451 (443 + its 8 px margin) without Clarity, so the logo stays whole down to 807 wide (808 without Clarity), and
   below that it narrows within 1 px of how it narrows today without Clarity (site.css, not this file). */
@media (max-width: 960px) {
  .nav-links .clarity-nav { gap: 0; }
  .nav-links .clarity-nav .clarity-new {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .nav-links:has(.clarity-nav) { gap: 2px; margin-right: 0; }
  .nav-links:has(.clarity-nav) a { padding-inline: 9px; }
}

/* ------------------------------------------------------------------ phone menu */
.nav-menu-panel .clarity-menu { display: grid; gap: 2px; }
.clarity-menu-row { display: inline-flex; align-items: center; gap: 8px; }
.clarity-menu-sub { color: var(--muted); font-size: 13px; font-weight: 400; line-height: 1.35; white-space: nowrap; } /* 7.1:1 on #0D1720 */

/* ------------------------------------------------------------- hero announcement */
/* An ice-rimmed pill above the headline: the band's three covers fanned like a hand of cards, "New", what it is. */
.clarity-chip {
  position: relative; display: inline-flex; align-items: center; gap: 10px; max-width: 100%;
  min-height: 56px; margin: 0 0 28px; padding: 6px 18px 6px 12px; border: 1px solid transparent; border-radius: 999px;
  background:
    linear-gradient(180deg, #0E1E2A, #0A1620) padding-box,
    linear-gradient(100deg, rgba(196, 241, 255, 0.95), rgba(63, 123, 255, 0.6) 48%, rgba(143, 227, 255, 0.28)) border-box;
  color: var(--clarity-ink); font: 600 15px/1.3 var(--font); text-decoration: none;
}
.clarity-chip:focus-visible { outline: 2px solid var(--clarity-ice); outline-offset: 3px; }
/* One pass of light across the chip: a band that moves (transform) inside a layer clipped to the pill. */
.clarity-sweep { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.clarity-sweep::before {
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(233, 251, 255, 0.3) 50%, transparent 62%);
}
.clarity-fan { position: relative; flex: none; width: 78px; height: 42px; }
.clarity-thumb {
  position: absolute; left: 13px; top: 6px; width: 52px; aspect-ratio: 16 / 9; overflow: hidden;
  border: 1px solid rgba(143, 227, 255, 0.55); border-radius: 5px; background: #0B1626;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.55); transform-origin: 50% 140%;
}
.clarity-thumb img { display: block; width: 100%; height: 100%; }
.clarity-thumb:nth-child(1) { transform: translateX(-9px) rotate(-12deg); }
.clarity-thumb:nth-child(2) { transform: translateX(0) rotate(-2deg); }
.clarity-thumb:nth-child(3) { transform: translateX(9px) rotate(8deg); }
.clarity-chip-text { min-width: 0; text-wrap: balance; }
.clarity-chip-arrow { flex: none; width: 18px; height: 18px; color: var(--clarity-ice); }

/* ------------------------------------------------------------------- the strip */
.clarity-strip {
  position: relative; isolation: isolate; overflow: hidden; padding-block: 64px 40px;
  border-top: 1px solid rgba(143, 227, 255, 0.12);
  background:
    linear-gradient(112deg, rgba(143, 227, 255, 0) 50%, rgba(143, 227, 255, 0.05) 66%, rgba(143, 227, 255, 0) 82%),
    linear-gradient(180deg, #0B1724 0%, #102036 34%, #0C1828 66%, var(--clarity-ground) 100%);
}
/* The horizon the section opens on: a hairline of ice, brightest over the deck. */
.clarity-strip::before {
  content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent 18%, rgba(196, 241, 255, 0.85) 66%, transparent 96%);
}
.clarity-head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 24px 40px; }
.clarity-intro { position: relative; z-index: 2; min-width: 0; }
.clarity-logo { display: block; width: 300px; height: auto; margin-bottom: 26px; }
.clarity-strip h2 {
  margin: 0; color: var(--clarity-ink); font: 700 44px/1.08 var(--font); letter-spacing: -0.024em; text-wrap: balance;
}
/* The second line in solid ice: the home hero's sky brand line, in Clarity's colour (no gradient text). */
.clarity-h2-line { display: block; color: var(--clarity-ice); }
.clarity-lede { margin: 18px 0 0; max-width: 46ch; color: var(--clarity-soft); font-size: 18px; line-height: 1.55; }
.clarity-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.clarity-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 22px;
  border: 1px solid transparent; border-radius: 12px; font: 600 16px/1.2 var(--font); white-space: nowrap; text-decoration: none;
}
.clarity-btn svg { flex: none; width: 18px; height: 18px; }
.clarity-btn-ice { background: var(--clarity-ice); color: var(--clarity-on-ice); }
.clarity-btn-line { border-color: rgba(143, 227, 255, 0.42); background: rgba(143, 227, 255, 0.05); color: var(--clarity-ice); }
.clarity-btn:focus-visible, .clarity-arrow:focus-visible { outline: 2px solid var(--clarity-ice); outline-offset: 3px; }

/* ---------------------------------------------------------------- the launch stage */
/* Three covers dealt in a cascade, front to back: Trend, Levels, Liquidity. Each card behind sits lower and to the
   right, far enough that its gradient title shows under the one in front; the cascade stands over a candle-city
   horizon and is lit by a blurred copy of the same art. Sizes are in cqw (the stage's own width). The stage runs on
   toward the window's right edge (at most 130 px past the wrap, so wide screens do not grow the band). */
.clarity-stage {
  --deck-x: 3cqw; --deck-y: 3cqw; --deck-w: 64cqw; --city-l: -41cqw; --city-b: -16cqw;
  position: relative; container-type: inline-size; aspect-ratio: 1.59;
  margin-right: calc(-1 * min(130px, max(var(--gutter), (100vw - var(--wrap)) / 2)));
  perspective: 1700px; perspective-origin: 18% 20%;
}
.clarity-ambient {
  position: absolute; z-index: 0; max-width: none; pointer-events: none;
  left: calc(var(--deck-x) - 0.25 * var(--deck-w)); top: calc(var(--deck-y) - 0.125 * var(--deck-w));
  width: calc(2 * var(--deck-w)); height: auto; opacity: 0.9;
}
.clarity-city {
  position: absolute; z-index: 0; pointer-events: none;
  left: var(--city-l); bottom: var(--city-b); width: 170cqw; aspect-ratio: 1600 / 560;
  background: url("/assets/img/clarity/home/clarity-city.svg") 0 0 / 100% 100% no-repeat;
  /* Two masks, both must pass: the floor's reflection fades out downward, and nothing of the city reaches left of the
     stage (the words and buttons sit there; P-vs-10). */
  --city-in: calc(-1 * var(--city-l));
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 92%), linear-gradient(90deg, transparent var(--city-in), #000 calc(var(--city-in) + 16cqw));
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 70%, transparent 92%), linear-gradient(90deg, transparent var(--city-in), #000 calc(var(--city-in) + 16cqw));
  mask-composite: intersect;
}
.clarity-deck {
  position: absolute; z-index: 1; left: var(--deck-x); top: var(--deck-y); width: var(--deck-w); aspect-ratio: 16 / 9;
  transform-style: preserve-3d; transform: rotateY(-13deg) rotateX(4deg) rotateZ(-0.5deg);
}
.clarity-deal {
  --i: 0;
  position: absolute; inset: 0; display: block; border-radius: 12px;
  transform: translate3d(calc(var(--i) * 24%), calc(var(--i) * 30% + var(--i) * var(--i) * 1%), calc(var(--i) * -60px)) rotateZ(calc(var(--i) * 1.2deg));
  box-shadow: 0 30px 50px -22px rgba(0, 0, 0, 0.92), 0 8px 18px rgba(0, 0, 0, 0.45);
}
.clarity-deal[data-i="1"] { --i: 1; }
.clarity-deal[data-i="2"] { --i: 2; }
.clarity-deal img { display: block; width: 100%; height: 100%; border-radius: inherit; }
/* Rim light: a 1px ice frame and a lit top edge on every card; a soft sheen on the front one. */
.clarity-deal::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(143, 227, 255, 0.42), inset 0 1px 0 rgba(233, 251, 255, 0.75);
}
.clarity-deal[data-i="0"]::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, rgba(234, 242, 248, 0.14) 0%, rgba(234, 242, 248, 0.03) 28%, rgba(234, 242, 248, 0) 44%);
}

/* ------------------------------------------------------------------- the row */
.clarity-row { position: relative; margin-top: 22px; }
/* The same light behind the row, faint, and a lit floor line under the cards. */
.clarity-row::before {
  content: ""; position: absolute; inset: -10% 0 0; pointer-events: none; opacity: 0.45;
  background: url("/assets/img/clarity/home/ambient.webp") 62% 40% / min(1500px, 140%) auto no-repeat;
}
.clarity-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(143, 227, 255, 0.5) 50%, transparent);
}
.clarity-track {
  --clarity-pad: max(var(--gutter), calc((100% - var(--wrap)) / 2));
  --card-w: clamp(272px, 34vw, 480px);
  position: relative; z-index: 1; display: flex; gap: 22px; margin: 0; padding: 14px var(--clarity-pad) 38px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--clarity-pad);
  scrollbar-width: none; list-style: none;
}
.clarity-track::-webkit-scrollbar { display: none; }
.clarity-item { display: flex; flex: 0 0 var(--card-w); scroll-snap-align: start; }
.clarity-card {
  position: relative; display: flex; flex-direction: column; width: 100%; overflow: hidden;
  border: 1px solid var(--clarity-frame); border-radius: 18px;
  background: linear-gradient(180deg, #121F31 0%, var(--clarity-panel) 55%);
  box-shadow: 0 30px 50px -26px rgba(0, 0, 0, 0.95);
  color: var(--clarity-ink); text-decoration: none;
}
/* Light catching the card's top edge. */
.clarity-card::before {
  content: ""; position: absolute; top: 0; left: 10%; right: 10%; z-index: 2; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(233, 251, 255, 0.8), transparent);
}
/* Focus (here) and hover (in the hover block below): an ice gradient rim (opacity), the art zooms 1.04 inside its
   clipped frame; the card never moves. */
.clarity-card::after {
  content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0;
  background: linear-gradient(135deg, rgba(196, 241, 255, 0.95), rgba(63, 123, 255, 0.7) 50%, rgba(143, 227, 255, 0.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.clarity-card:focus-visible { color: var(--clarity-ink); outline: 2px solid var(--clarity-ice); outline-offset: 3px; }
.clarity-card:focus-visible::after { opacity: 1; }

/* The art: each cover's chart area, exported at full resolution by tools/clarity/home_assets.py (no logo row, no baked title). */
.clarity-art { position: relative; display: block; aspect-ratio: 2.15; overflow: hidden; background: #0B1626; }
.clarity-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--op, 50%) 50%; }
.clarity-art::after {
  content: ""; position: absolute; inset: auto 0 0; height: 34%; pointer-events: none;
  background: linear-gradient(180deg, rgba(14, 22, 34, 0), rgba(14, 22, 34, 0.9));
}
/* Where each crop keeps its telling label when phones narrow it (Volume's POC tag, Structure's CHoCH, the level tags,
   the Zones tabs). */
.clarity-item[data-tool="momentum"], .clarity-item[data-tool="volume"], .clarity-item[data-tool="structure"] { --op: 0%; }
.clarity-item[data-tool="levels"], .clarity-item[data-tool="liquidity"], .clarity-item[data-tool="zones"], .clarity-item[data-tool="risk"] { --op: 100%; }

.clarity-meta { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px 64px 22px 22px; }
.clarity-go { position: absolute; right: 20px; bottom: 22px; width: 20px; height: 20px; color: var(--clarity-ice); }
.clarity-start {
  margin-left: 4px; padding: 1px 8px; border: 1px solid rgba(143, 227, 255, 0.45); border-radius: 999px;
  color: var(--clarity-ice); font: 600 12px/1.4 var(--font);
}
.clarity-step { display: inline-flex; align-items: center; gap: 8px; color: var(--clarity-ice); font: 500 13px/1.4 var(--mono); }
.clarity-step::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.clarity-name { margin-top: 2px; color: var(--clarity-ink); font: 400 22px/1.25 "Michroma", var(--font); letter-spacing: 0; }
.clarity-q { color: var(--clarity-soft); font-size: 16px; line-height: 1.45; }

.clarity-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.clarity-fine { max-width: 72ch; margin: 0; color: var(--clarity-dim); font-size: 14px; line-height: 1.5; }
.clarity-arrows { display: flex; align-items: center; gap: 10px; }
.clarity-arrows[hidden] { display: none; }
.clarity-progress { position: relative; width: 140px; height: 2px; margin-right: 8px; overflow: hidden; border-radius: 2px; background: rgba(143, 227, 255, 0.2); }
.clarity-progress span { position: absolute; inset: 0 auto 0 0; width: var(--clarity-w, 40%); translate: var(--clarity-x, 0) 0; border-radius: 2px; background: var(--clarity-ice); }
.clarity-arrow {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(143, 227, 255, 0.38);
  border-radius: 50%; background: rgba(143, 227, 255, 0.06); color: var(--clarity-ice); cursor: pointer;
}
.clarity-arrow:disabled { border-color: rgba(143, 227, 255, 0.16); color: var(--clarity-dim); cursor: default; }
.clarity-arrow svg { width: 18px; height: 18px; }

/* ------------------------------------------------------------------------- hover */
/* Hover only where the pointer can hover (studio P-in-01): on a phone a tapped card would otherwise keep its ice rim
   and zoomed art when the reader comes back with Back. The :focus-visible twins stay above, outside this block. */
@media (hover: hover) {
  .clarity-chip:hover { color: var(--clarity-ink); }
  .clarity-btn-ice:hover { background: var(--clarity-ice-hi); color: var(--clarity-on-ice); }
  .clarity-btn-line:hover { border-color: var(--clarity-ice); background: rgba(143, 227, 255, 0.1); color: var(--clarity-ice-hi); }
  .clarity-card:hover { color: var(--clarity-ink); }
  .clarity-card:hover::after { opacity: 1; }
  .clarity-arrow:hover:not(:disabled) { border-color: var(--clarity-ice); background: rgba(143, 227, 255, 0.12); }
}

/* ------------------------------------------------------------------------ motion */
/* home-clarity.js arms the deck and the row only when the strip starts below the fold and motion is allowed: the covers
   then wait in one stack and the cards 48 px to the right, all fully drawn, until the strip comes into view. */
.clarity-strip.is-armed:not(.is-in) .clarity-deal { transform: translate3d(0, 3%, calc(var(--i) * -12px)) rotateZ(calc(var(--i) * -2deg)); }
.clarity-strip.is-armed:not(.is-in) .clarity-deck { transform: rotateY(-26deg) rotateX(12deg) rotateZ(1.5deg) translate3d(4%, 8%, -60px); }
/* The card inside each item moves, never the item: the items are the row's snap points. */
.clarity-strip.is-armed:not(.is-in) .clarity-card { transform: translateX(48px); }
@media (prefers-reduced-motion: no-preference) {
  .clarity-sweep::before { animation: clarity-shine 500ms cubic-bezier(0.45, 0, 0.25, 1) 100ms both; }
  .clarity-thumb { animation: clarity-fan 480ms var(--clarity-ease) both; }
  .clarity-chip-arrow { transition: transform 200ms var(--clarity-ease); }
  .clarity-card::after { transition: opacity 200ms var(--clarity-ease); }
  .clarity-art img { transition: transform 360ms var(--clarity-ease); }
  .clarity-card:focus-visible .clarity-art img { transform: scale(1.04); }
  .clarity-go { transition: transform 200ms var(--clarity-ease); }
  .clarity-strip.is-in .clarity-deal { transition: transform 560ms var(--clarity-ease) calc(var(--i) * 40ms); }
  .clarity-strip.is-in .clarity-deck { transition: transform 560ms var(--clarity-ease); }
  /* --clarity-n is each item's place in the row (0, 1, 2 ...), set by home-clarity.js when it arms the strip, so the row
     takes any number of cards; the stagger stops growing after the sixth step. */
  .clarity-strip.is-in .clarity-card { transition: transform 420ms var(--clarity-ease) calc(min(var(--clarity-n, 0), 6) * 30ms); }
}
/* The moving parts of hover: only where the pointer can hover and motion is allowed. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .clarity-chip:hover .clarity-chip-arrow { transform: translateX(3px); }
  .clarity-card:hover .clarity-art img { transform: scale(1.04); }
  .clarity-card:hover .clarity-go { transform: translateX(4px); }
}
@keyframes clarity-shine { 0% { opacity: 1; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(100%); } }
@keyframes clarity-fan { from { transform: none; } }

/* ------------------------------------------------------------------- narrower */
@media (max-width: 1180px) {
  .clarity-strip h2 { font-size: 40px; }
  .clarity-logo { width: 260px; }
}
/* One column below 1024: the stage on top, full width, then the words. */
@media (max-width: 1023px) {
  .clarity-strip { padding-block: 40px 48px; }
  .clarity-head { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .clarity-stage {
    --deck-x: 17cqw; --deck-y: 2cqw; --deck-w: 46cqw; --city-l: -33cqw; --city-b: -17cqw;
    order: -1; aspect-ratio: 2.3; margin-inline: calc(-1 * var(--gutter)); perspective-origin: 40% 20%;
  }
  .clarity-intro { max-width: 680px; }
}
@media (max-width: 900px) {
  .clarity-strip h2 { font-size: 38px; }
}
@media (max-width: 640px) {
  .clarity-chip { margin-bottom: 22px; padding-right: 14px; }
  .clarity-strip { padding-block: 28px 44px; }
  .clarity-stage { --deck-x: 4cqw; --deck-y: 3cqw; --deck-w: 62cqw; --city-l: -40cqw; --city-b: -17cqw; aspect-ratio: 1.6; }
  .clarity-deal { border-radius: 8px; }
  .clarity-logo { width: 210px; margin-bottom: 18px; }
  .clarity-strip h2 { font-size: 30px; line-height: 1.12; }
  .clarity-lede { margin-top: 12px; font-size: 16px; }
  .clarity-act { margin-top: 22px; }
  .clarity-btn { flex: 1 1 100%; }
  .clarity-row { margin-top: 24px; }
  .clarity-track { --card-w: min(82vw, 340px); gap: 14px; padding-bottom: 36px; }
  .clarity-art { aspect-ratio: 1.75; }
  .clarity-meta { padding: 12px 52px 18px 18px; }
  .clarity-name { font-size: 20px; }
  .clarity-go { right: 18px; bottom: 18px; }
  .clarity-arrow { display: none; }
  .clarity-progress { width: 120px; margin-right: 0; }
}
/* 360 to 400 wide: a smaller fan and no arrow keep the chip to two lines. */
@media (max-width: 400px) {
  .clarity-chip { gap: 8px; padding-right: 16px; }
  .clarity-fan { width: 60px; }
  .clarity-thumb { left: 9px; width: 44px; }
  .clarity-thumb:nth-child(1) { transform: translateX(-8px) rotate(-14deg); }
  .clarity-thumb:nth-child(3) { transform: translateX(8px) rotate(9deg); }
  .clarity-chip-arrow { display: none; }
}