/* ==========================================================================
   TuneDance frontend — the track everyone else already has.

   Second problem section, and it needs to feel different from the grind above
   it or the page starts to drone. Three ways it does:

   - Ground goes back to near-white. The grind is the one tinted band; coming
     out of it into clean white is what makes the orange and the red land.
   - The number is the section. It is set larger than the words around it,
     sits on an orange marker, and climbs to 9,054 the first time it is seen.
     A printed figure states a fact; a figure that arrives by counting says the
     meter is still running.
   - The eyebrow carries the grind's red, so the two problem sections read as
     one argument continuing rather than two unrelated complaints.
   ========================================================================== */

.overused {
  position: relative;
  isolation: isolate;
  /* clip, not hidden: hidden makes this section a scroll container, and the
     media slot's position:sticky then pins to that instead of the viewport,
     which is to say it does not pin at all. clip contains the blurred
     pseudo-elements just the same. */
  overflow: clip;
  padding: clamp(62px, 7.4vw, 118px) 24px clamp(62px, 7.4vw, 116px);
  /* Warm white at the top, where the orange count sits, easing into the
     TuneDance green by the bottom so the licensing bill sits on a cool wash
     and the section hands off into the green turn below without a seam. */
  background:
    radial-gradient(120% 60% at 50% 0%, #ffffff 0%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #fbfaf8 0%, #fbfaf8 38%, #f4f9f6 70%, #f4faf6 100%);
  color: var(--on-stage);
  text-align: center;
}

/* A pool of the sea green behind the photo column, low in the section, so the
   cool wash has a source rather than being a flat tint. */
.overused::after {
  content: "";
  position: absolute;
  right: -6%;
  bottom: 6%;
  width: min(760px, 70%);
  height: 42%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50% 50% at 60% 50%, rgba(53, 160, 116, 0.2) 0%, transparent 72%);
  filter: blur(70px);
}

/* One warm pool only, sitting under the number, so the orange has something to
   stand on instead of floating on flat white. */
.overused::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 4%;
  width: min(900px, 94%);
  height: 46%;
  transform: translateX(-50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(50% 60% at 50% 50%, rgba(255, 150, 26, 0.18) 0%, transparent 74%);
  filter: blur(64px);
}

.overused__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

.overused__eyebrow {
  margin: 0 auto clamp(12px, 1.6vw, 20px);
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #9d2a1c;
}

.overused__heading {
  position: relative;
  z-index: 1;
  margin: 0 auto clamp(38px, 4.6vw, 66px);
  max-width: 1100px;
  font-size: clamp(27px, 4.1vw, 56px);
  font-weight: 900;
  line-height: 1.14;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* A marker pass, not a filled block. At 1.34em on a hard gradient rectangle it
   was a slab: it out-weighed the sentence it belongs to, forced the line to
   break around it, and ran to the edge of the measure.

   Now it matches the language the rest of the page speaks - the same swept
   shape used on ONE in the grind and on Expensive in the money headline, in
   this section's orange. Painted behind the text so the ink stays full black
   on top rather than sitting in a tinted box. */
.overused__count {
  position: relative;
  display: inline-block;
  padding: 0.02em 0.2em 0.08em;
  margin-right: -0.06em;
  color: #17110a;
  font-size: 1.1em;
  line-height: 1;
  transform: rotate(-1.2deg);
}

.overused__count::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.02em;
  right: -0.02em;
  top: 0.04em;
  bottom: -0.02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9 C 40 4, 92 6.5, 140 4.5 C 168 3.4, 186 5, 197.5 7 L 196 36 C 150 39.5, 96 37, 52 39 C 30 40, 14 38.5, 3 36.5 Z' fill='%23ffa41f'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* tabular figures: without them the number changes width on every frame while
   it counts and the whole heading twitches. */
.overused__count-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* A breath as it lands, once. */
.overused__count-num.is-settled {
  display: inline-block;
  animation: overused-land 420ms cubic-bezier(0.2, 0.9, 0.25, 1) 1;
}

@keyframes overused-land {
  0%   { transform: scale(1.055); }
  100% { transform: scale(1); }
}

/* --- Reserved media ------------------------------------------------------ */

.overused__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.4vw, 16px);
  position: sticky;
  top: clamp(24px, 7vh, 84px);
  aspect-ratio: 4 / 3;
  min-width: 0;
  padding: 20px;
  margin: 0;
  border-radius: var(--radius-lg);
  background: radial-gradient(62% 72% at 50% 50%, rgba(26, 30, 38, 0.07) 0%, transparent 76%);
}

.overused__slot-play {
  width: clamp(30px, 3.4vw, 44px);
  height: auto;
  fill: none;
  stroke: rgba(26, 30, 38, 0.32);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.overused__slot-note {
  margin: 0;
  max-width: 38ch;
  font-size: clamp(10px, 1.1vw, 12px);
  font-weight: 700;
  line-height: 1.65;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(26, 30, 38, 0.4);
}

/* --- Body ---------------------------------------------------------------- */

/* Copy left, media right. The slot used to sit full width between the headline
   and this copy, which pushed the two apart and left the media with nothing to
   be next to. */
.overused__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 66px);
  margin-bottom: clamp(40px, 5vw, 72px);
  text-align: left;
}

.overused__body {
  min-width: 0;
  text-align: left;
}

.overused__body p {
  margin: 0 0 16px;
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.62;
  /* solid, not alpha: 0.78 over this near-white ground composited to a grey
     that read as disabled text rather than as body copy */
  color: #3d434d;
}

/* The same marker pass the grind section puts on its prices - ported exactly,
   not re-invented: a swept shape with edges that rise and fall and ends that
   are not square, rather than a rounded rectangle. Used generously here, on
   whole phrases, because that is where life in a block of prose comes from. */
.overused__hl {
  position: relative;
  z-index: 0;
  display: inline;
  font-weight: 700;
  color: #191c22;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 44' preserveAspectRatio='none'%3E%3Cpath d='M2.5 9 C 40 4, 92 6.5, 140 4.5 C 168 3.4, 186 5, 197.5 7 L 196 36 C 150 39.5, 96 37, 52 39 C 30 40, 14 38.5, 3 36.5 Z' fill='%23ffc233'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.06em 0.18em;
}

/* The quoted search terms. Ink and weight, no box - they sit inside sentences
   that already carry a highlighter, and two marks in one line is noise. */
.overused__kw {
  font-weight: 800;
  color: #17202e;
}

.overused__body p.overused__lead {
  font-size: clamp(18px, 2.1vw, 26px);
  font-weight: 700;
  letter-spacing: -0.022em;
  color: var(--on-stage);
}

/* An actual aside - the narrator leaning in. Set in the marker hand, in the
   section's orange, tilted the way a note in a margin lands. It is the one
   line here that is voice rather than argument, so it is the one line set in
   something other than Inter. */
.overused__body p.overused__aside {
  margin: clamp(22px, 2.6vw, 32px) 0 clamp(18px, 2.2vw, 26px);
  font-family: 'Permanent Marker', cursive;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #e0800f;
  transform: rotate(-1.4deg);
  transform-origin: left center;
}

/* The hard stop in the middle of the argument. */
.overused__body p.overused__verdict {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.3vw, 15px);
  margin: clamp(24px, 3vw, 38px) 0;
  font-size: clamp(20px, 2.5vw, 33px);
  font-weight: 900;
  line-height: 1.24;
  letter-spacing: -0.028em;
  color: var(--on-stage);
}

.overused__x {
  flex: 0 0 auto;
  width: clamp(22px, 2.4vw, 32px);
  height: auto;
  fill: none;
  stroke: #e0301b;
  stroke-width: 3.2;
  stroke-linecap: round;
}

/* --- Licensing ------------------------------------------------------------

   Layout and words untouched: argument left, booth photo pinned right, the
   warning under both. The redesign is the treatment inside the column. It
   ran four highlighter marks, and the figures grew inside a sentence set in
   the same grey as everything around them. Now there is no marker in this
   block at all. The three cost lines sit between hairlines like rows on a
   bill, the key phrase in each is bold ink until the last, which goes red,
   and the figures climb in the same red. Red is the one colour here and it
   means money.
   -------------------------------------------------------------------------- */

.overused__cols {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  margin-bottom: clamp(34px, 4.2vw, 60px);
  text-align: left;
}

.overused__col {
  position: relative;
  z-index: 0;
  min-width: 0;
}

.overused__col p { margin: 0; }

/* A dollar sign the height of the cost rows, ghosted behind them at the right
   edge of the column: the block's subject, printed once, faint, under all of
   it. */
.overused__col::before {
  content: "$";
  position: absolute;
  z-index: -1;
  right: -0.04em;
  top: 42%;
  font-size: clamp(220px, 26vw, 400px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  color: rgba(224, 48, 27, 0.055);
  pointer-events: none;
  user-select: none;
}

/* --- The seam ------------------------------------------------------------ */

.overused__rule {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 24px);
  max-width: 1000px;
  margin: 0 auto clamp(46px, 5.4vw, 80px);
}

.overused__rule-line {
  flex: 1 1 0;
  height: 1px;
}

/* Each half fades toward the outer edge so the rule has no hard ends. */
.overused__rule-line:first-child {
  background: linear-gradient(90deg, transparent, rgba(26, 30, 38, 0.22));
}

.overused__rule-line:last-child {
  background: linear-gradient(90deg, rgba(26, 30, 38, 0.22), transparent);
}

.overused__rule-wave {
  flex: 0 0 auto;
  width: clamp(72px, 7vw, 96px);
  height: auto;
}

/* The words to be answered get a stroke of marker under them: a rough,
   hand-pulled line in the section's orange, drawn as a path so its ends and
   weight vary the way a real one does. */
.overused__ask-mark {
  position: relative;
  white-space: nowrap;
}

.overused__ask-mark::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.06em;
  bottom: -0.16em;
  height: 0.24em;
  z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cpath d='M4 14 C 50 8, 110 11, 196 6' fill='none' stroke='%23ffa41f' stroke-width='7' stroke-linecap='round'/%3E%3Cpath d='M12 19 C 70 14, 130 17, 180 13' fill='none' stroke='%23ffa41f' stroke-width='4.5' stroke-linecap='round' opacity='0.7'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.overused__col p.overused__ask {
  position: relative;
  z-index: 0;
  max-width: 18ch;
  font-size: clamp(30px, 4.3vw, 60px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #17202e;
  text-wrap: balance;
}

.overused__col p.overused__jump {
  margin-top: clamp(16px, 2vw, 26px);
  font-size: clamp(18px, 1.9vw, 25px);
  line-height: 1.35;
  letter-spacing: -0.015em;
  color: #3d434d;
}

.overused__jump-from {
  font-weight: 700;
  color: #17202e;
}

.overused__jump-to {
  font-weight: 900;
  color: #e0301b;
}

/* The loudest line, flat red: at this size a gradient just makes the second
   word look faded. */
.overused__col p.overused__shout {
  margin: clamp(10px, 1.2vw, 16px) 0 clamp(26px, 3.2vw, 44px);
  font-size: clamp(36px, 5vw, 70px);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.045em;
  color: #e0301b;
}

/* The three cost lines: hairlines between them, not a box around them. */
.overused__col p.overused__row {
  padding: clamp(16px, 2vw, 24px) 0;
  border-top: 1px solid rgba(26, 30, 38, 0.14);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.55;
  color: #3d434d;
}

.overused__col p.overused__row--last { border-bottom: 1px solid rgba(26, 30, 38, 0.14); }

.overused__cost {
  font-weight: 800;
  color: #17202e;
}

/* The last row is where the argument tips over, so its cost goes red. */
.overused__cost--top { color: #e0301b; }

/* The figures sentence. The words are the words; the figures inside it climb,
   each a size up on the last, so the escalation is visible before it is read.
   Set on a taller line so the biggest one has room without the sentence
   feeling broken. */
.overused__col p.overused__pay {
  position: relative;
  z-index: 0;
  margin-top: clamp(26px, 3.2vw, 44px);
  font-size: clamp(16px, 1.45vw, 19px);
  line-height: 1.55;
  color: #3d434d;
}

/* A pool of the money red under the figures, the way the orange pool sits
   under the download count at the top: the numbers stand on something. */
.overused__col p.overused__pay::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -8%;
  top: -40%;
  width: 78%;
  height: 150%;
  pointer-events: none;
  background: radial-gradient(50% 55% at 40% 45%, rgba(224, 48, 27, 0.13) 0%, transparent 72%);
  filter: blur(28px);
}

.overused__col p.overused__pay strong {
  white-space: nowrap;
  font-weight: 900;
  font-size: 1.3em;
  letter-spacing: -0.02em;
  color: #17202e;
}

.overused__sum {
  display: inline-block;
  vertical-align: baseline;
  line-height: 1;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -0.04em;
  white-space: nowrap;
  color: #e0301b;
}

/* The digits count up as they arrive, like the download figure above: the
   dollar sign stays put and only the number climbs. Tabular so it does not
   twitch, and the sign sits a touch smaller so the figure reads as one. */
.overused__sum [data-count-to] { display: inline-block; }

/* The biggest figure gets a marker ring: a hand-pulled ellipse in the orange,
   drawn open at the start the way a real circle around a number ends up. */
.overused__sum--ring { position: relative; }

.overused__sum--ring::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.18em;
  right: -0.16em;
  top: -0.22em;
  bottom: -0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cpath d='M118 8 C 60 2, 6 22, 8 52 C 10 84, 80 98, 130 92 C 178 86, 198 62, 190 40 C 182 18, 140 6, 96 10' fill='none' stroke='%23ffa41f' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.overused__sum:nth-of-type(1) { font-size: 1.7em; opacity: 0.62; }
.overused__sum:nth-of-type(2) { font-size: 2.3em; opacity: 0.82; }
.overused__sum:nth-of-type(3) { font-size: 3.1em; }

/* The photo, exactly as it sat before: a third of the column, pinned so it
   accompanies the argument rather than setting the height of it, tilted the
   couple of degrees the page's markers sit at. */
.overused__photo {
  max-width: 320px;
  position: sticky;
  top: clamp(24px, 7vh, 84px);
  margin: clamp(6px, 1vw, 14px) 0 0;
  transform: rotate(2.2deg);
}

/* The decoration hangs off the photo on the left and above it: the line
   starts behind the photo's foot and climbs out past its top right, so it
   reads as a chart the photo is standing in front of. */
.overused__deco {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 0;
  width: 100%;
  height: auto;
  overflow: visible;
  pointer-events: none;
}

.overused__photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* lifted off the page a little: flat, it read as pasted in */
  box-shadow: 0 26px 48px -22px rgba(26, 30, 38, 0.42), 0 2px 6px rgba(26, 30, 38, 0.08);
}

/* A price sticker on the corner of the photo: one glyph, no words, in the
   money red, tilted against the photo's own tilt. */
.overused__sticker {
  position: absolute;
  z-index: 2;
  right: -18px;
  top: -18px;
  display: grid;
  place-items: center;
  width: clamp(48px, 4.4vw, 62px);
  height: clamp(48px, 4.4vw, 62px);
  border-radius: 50%;
  background: #e0301b;
  color: #fff;
  font-size: clamp(24px, 2.3vw, 32px);
  font-weight: 900;
  line-height: 1;
  transform: rotate(-12deg);
  box-shadow: 0 8px 18px -6px rgba(224, 48, 27, 0.55);
}

/* The consequence. A rule down the left in the money red, nothing else: it is
   the warning at the bottom of the bill, not a callout. */
/* A block with the glyph hung in its left padding, not a flex row: as a flex
   row the paragraph's inline children became separate items and the bold
   phrase broke out of the sentence. */
.overused__coda {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding-left: calc(clamp(26px, 2.6vw, 34px) + clamp(14px, 1.8vw, 22px));
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.6;
  text-align: left;
  color: #3d434d;
}

.overused__coda strong { font-weight: 800; color: #17202e; }

/* The warning glyph does what the red rule did, in the same red, and says
   what kind of line this is before it is read. */
.overused__coda-icon {
  position: absolute;
  left: 0;
  top: 0.1em;
  width: clamp(26px, 2.6vw, 34px);
  height: auto;
  fill: none;
  stroke: #e0301b;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (max-width: 860px) {
  .overused__intro {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .overused__slot {
    position: static;
    aspect-ratio: 16 / 10;
  }

  .overused__cols { grid-template-columns: 1fr; gap: 30px; }

  .overused__photo {
    position: static;
    max-width: 340px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .overused__slot { min-height: 150px; }
  .overused__verdict { align-items: flex-start; }
  .overused__col p.overused__ask { max-width: none; }
}