/* Home — the hero: headline column, the TikTok phone mockup, the app card.

   The phone is the biggest single component on the site and none of it is used
   anywhere else. Its markup in index.html is frozen by
   backend/scripts/build_hero_slides.py; the CSS is not. */

/* ── Hero ───────────────────────────────────────────────────── */

.hero { position: relative; padding-top: clamp(110px, 13vw, 168px); padding-bottom: var(--gap); overflow: hidden; }
.hero > * { position: relative; }

.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 4.6vw, 72px); align-items: center; }

/* Sized off the longest line, not .h1's generic cap: the payoff runs 19 characters
   against a 1.08fr column, and at 78px it wrapped mid-phrase and broke the swash. */
.hero__title { margin-top: 22px; font-size: clamp(34px, 4.3vw, 58px); }
/* the signature: a hand-drawn marker stroke under the payoff line */
.swash { position: relative; display: inline-block; white-space: nowrap; }
.swash svg { position: absolute; left: -1.5%; bottom: -.16em; width: 103%; height: .34em; overflow: visible; }
.swash path { fill: none; stroke: var(--blue-deep); stroke-width: 15; stroke-linecap: round; opacity: .95;
  stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: draw 1.1s ease-out .55s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.hero__sub { margin: clamp(20px, 2.4vw, 28px) 0 0; max-width: 40ch; }

.console {
  margin-top: clamp(24px, 3vw, 34px);
  background: #fff; border: 1px solid var(--line-ctl); border-radius: 999px;
  padding: 7px 7px 7px 22px; display: flex; align-items: center; gap: 14px; max-width: 540px;
  box-shadow: 0 10px 30px -18px rgba(25,27,30,.28);
}
/* The field is the input; the typed URL is a ghost lying on top of it. Both are laid
   out the same way — one flex row, centred — so the ghost's first character sits where
   the real caret will be and the swap on focus doesn't move the text. */
.console__field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; overflow: hidden; }
.console__input {
  flex: 1; min-width: 0; font: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.5;
  color: var(--ink); background: none; border: 0; border-radius: 0; padding: 0; margin: 0; appearance: none;
}
.console__input:focus { outline: none; } /* the whole console takes the ring instead, below */
.console__ghost { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; white-space: nowrap; }
/* Two conditions, and the focused one is CSS rather than the class hero.js also sets:
   focus is a state the stylesheet can read for itself, and a browser that hands out
   focus without firing the event (a background tab restoring one) would otherwise leave
   the animation typing across the visitor's own caret. `is-live` covers the other half
   — a field holding text that nobody is currently in. */
.console:focus-within .console__ghost,
.console.is-live .console__ghost { display: none; }
.console__scheme { font-size: 14.5px; line-height: 1.5; color: var(--ink-50); flex: none; }
.console__typed { font-size: 14.5px; line-height: 1.5; font-weight: 600; white-space: nowrap; }
.console__caret { display: inline-block; width: 2px; height: 1.05em; background: var(--blue-deep); margin-left: 2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* The input has no border of its own, so the focus ring belongs to the pill around it —
   without this a keyboard user tabs into an invisible control. */
.console:focus-within { border-color: var(--blue-deep); box-shadow: 0 0 0 3px rgba(21,99,242,.16), 0 10px 30px -18px rgba(25,27,30,.28); }

/* Reserves no space when empty: an error that pushes the note and the phone down the
   page on first paste is worse than the mistake it reports. */
.console__error { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--cross); max-width: 540px; }
.console__error:empty { display: none; }

/* The tick and the line of text are flex items, so before `flex: 1` below, a note too
   long for one line wrapped as a whole block and left the tick stranded on a line of
   its own. It shows up as soon as the copy grows. Top alignment (plus a 2px optical
   nudge) keeps the tick against the FIRST line of a two-line note, where a checkmark
   belongs. */
.hero__note { margin: 16px 0 0; font-size: 14.5px; color: var(--ink-70); display: flex; align-items: flex-start; gap: 9px; }
.hero__note > span:not(.hero__tick) { flex: 1; min-width: 0; }
.hero__watch { margin: 18px 0 0; font-size: 15px; font-weight: 700; }
.hero__watch a { color: var(--blue-deep); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.hero__tick { width: 18px; height: 18px; border-radius: 50%; background: var(--green); color: var(--ink); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; margin-top: 2px; }

/* One width for the frame and the row beneath it. They were two independent
   min(100%, 300px) declarations, which is a drift waiting to happen — the app card
   is meant to sit flush under the phone and nothing enforced it.
   The phone is the tallest thing in the hero, so on a short window it takes what
   the viewport can spare rather than pushing the app card and its arrow below the
   fold: 362px is everything else in the column (the section's padding, the dots,
   the card) and 375/812 turns the height that leaves into a width. 268px is the
   ceiling; below 240 the chrome's smallest labels stop reading as words. The flat
   declaration comes first as the fallback for engines without svh. */
.phone-wrap { --phone-w: 268px; }
.phone-wrap { --phone-w: clamp(240px, calc((100svh - 362px) * 375 / 812 + 18px), 268px); }

/* phone with real TikTok chrome, showing a real generated slide */
.phone {
  width: min(100%, var(--phone-w, 268px)); margin-inline: auto;
  background: var(--ink); border-radius: 38px; padding: 9px;
  box-shadow: 0 30px 70px -30px rgba(25,27,30,.5);
  position: relative;
}
/* 375x812 — the reference capture's own screen size. The chrome below is measured
   off that PNG in its pixels, so the frame has to carry its aspect or every offset
   drifts; --u converts one reference pixel into a share of the rendered width. */
.phone__screen {
  position: relative; width: 100%; aspect-ratio: 375/812;
  border-radius: 30px; overflow: hidden; background: #000;
  container-type: inline-size;
  /* Horizontal drags are the screen's (takeover.js reads them as swipes); vertical ones
     stay with the page, or a finger that lands on a phone can't scroll past it. */
  touch-action: pan-y;
  --u: calc(100cqw / 375);
  font-family: var(--sans);
}
.phone__screen img { width: 100%; height: 100%; object-fit: cover; }
/* Eight real slides crossfading in place, one per app on the account. Six static
   dots asked the visitor to infer "slideshow"; actually advancing proves it before
   they read a word. Stacked layers rather than one swapped src, so the change is a
   fade and never a flash of empty — only the first carries its bytes in the markup,
   the rest are hydrated from data-src (see the hero block in main.js). */
.phone__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.phone__slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .phone__slide { transition: none; } }
/* Chrome geometry follows the in-app reference capture
   (frontend/src/components/molecules/TikTokOverlay/tiktok-home.png): status bar and
   feed tabs at the top, action rail bottom-right, caption block bottom-left above the
   slideshow dots, tab bar across the foot. Drawn in CSS rather than dropped in as that
   PNG so the caption and handle can change with the slide. */
.phone__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.10) 11%, rgba(0,0,0,0) 22%),
    linear-gradient(to top, rgba(0,0,0,.62) 10.4%, rgba(0,0,0,.34) 20%, rgba(0,0,0,.08) 38%, rgba(0,0,0,0) 55%);
}
.phone__screen svg { fill: currentColor; display: block; }

/* Status bar — clock baseline at ref y17-28, 27/20 side margins. */
.phone__status {
  position: absolute; top: calc(16 * var(--u)); left: calc(32 * var(--u)); right: calc(20 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; font-size: calc(14 * var(--u)); font-weight: 600; letter-spacing: .01em; line-height: 1;
}
.phone__statusR { display: flex; align-items: center; gap: calc(5 * var(--u)); }
/* These three were the last part of the chrome still sized in absolute px — the
   width="17"/"16"/"24" attributes in the markup — so they alone did not follow the
   frame. At a 240px phone that drew a 24px battery next to an 8px clock. Same
   N-reference-px x --u rule as every other offset in this block; the attributes
   stay as the no-CSS fallback, and their viewBox numbers are the reference sizes. */
.phone__statusR svg { height: auto; }
.phone__statusR svg:nth-of-type(1) { width: calc(17 * var(--u)); }
.phone__statusR svg:nth-of-type(2) { width: calc(16 * var(--u)); }
.phone__statusR svg:nth-of-type(3) { width: calc(24 * var(--u)); }

/* Top bar — LIVE shortcut and search flank the tabs, all on one row at ref y55. */
.phone__top {
  position: absolute; top: calc(52 * var(--u)); left: calc(14 * var(--u)); right: calc(14 * var(--u));
  display: flex; align-items: center; justify-content: space-between;
  color: #fff; text-shadow: 0 calc(1 * var(--u)) calc(6 * var(--u)) rgba(0,0,0,.4);
}
.phone__live { display: grid; justify-items: center; gap: calc(1 * var(--u)); }
.phone__live svg { width: calc(22 * var(--u)); height: calc(22 * var(--u)); }
.phone__live b { font-size: calc(8 * var(--u)); font-weight: 800; letter-spacing: .04em; line-height: 1; }
.phone__search svg { width: calc(23 * var(--u)); height: calc(23 * var(--u)); }

.phone__tabs {
  display: flex; align-items: center; gap: calc(16 * var(--u));
  font-size: calc(15 * var(--u)); line-height: 1.15;
  color: rgba(255,255,255,.7); font-weight: 500;
}
/* The active tab carries a short underline; Following badges a red dot. */
.phone__tabs .on { position: relative; color: #fff; font-weight: 700; }
.phone__tabs .on::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(-7 * var(--u)); width: calc(26 * var(--u)); height: calc(2.5 * var(--u));
  border-radius: calc(2 * var(--u)); background: #fff;
}
.phone__tabs .phone__badge { position: relative; }
.phone__tabs .phone__badge::after {
  content: ''; position: absolute; right: calc(-4 * var(--u)); top: calc(-1 * var(--u));
  width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #FE2C55;
}

/* Action rail — items centred on ref x344. Five stops now: the capture's order is
   avatar, heart, comment, bookmark, share, sound disc; the bookmark was missing
   before, which is the kind of gap a reader spots without being able to name it. */
.phone__rail {
  position: absolute; right: calc(1 * var(--u)); bottom: calc(100 * var(--u));
  display: grid; justify-items: center; color: #fff; width: calc(60 * var(--u));
  filter: drop-shadow(0 calc(1 * var(--u)) calc(4 * var(--u)) rgba(0,0,0,.32));
}
.phone__avatar { position: relative; display: block; width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin-bottom: calc(28 * var(--u)); }
.phone__avatar img { width: 100%; height: 100%; border-radius: 50%; border: calc(1.5 * var(--u)) solid #fff; object-fit: cover; background: #191b1e; }
.phone__avatar i {
  position: absolute; left: 50%; bottom: calc(-9 * var(--u)); transform: translateX(-50%);
  width: calc(19 * var(--u)); height: calc(19 * var(--u)); border-radius: 50%;
  background: #FE2C55; color: #fff; font-style: normal; font-weight: 700;
  font-size: calc(14 * var(--u)); line-height: calc(18 * var(--u)); text-align: center;
}
.phone__act { display: grid; justify-items: center; font-size: calc(12 * var(--u)); font-weight: 600; line-height: 1; }
.phone__act svg { width: calc(33 * var(--u)); height: calc(33 * var(--u)); }
.phone__act b { font-weight: 600; margin-top: calc(6 * var(--u)); }
.phone__act + .phone__act { margin-top: calc(16 * var(--u)); }
/* The sound disc rides lower than the rail rhythm — 30 ref px below the share count. */
.phone__disc {
  width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin-top: calc(30 * var(--u));
  border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(150deg, #2e2e2e, #0b0b0b 62%);
  animation: discSpin 5s linear infinite;
}
.phone__disc img { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; object-fit: cover; }
@keyframes discSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .phone__disc { animation: none; } }

/* Caption block — ref left margin 12, handle at y644, caption 15/18, sound row to y713. */
.phone__info { position: absolute; left: calc(12 * var(--u)); right: calc(74 * var(--u)); bottom: calc(99 * var(--u)); }
.phone__meta { margin: 0; font-size: calc(15 * var(--u)); font-weight: 700; line-height: calc(17 * var(--u)); color: #fff; }
.phone__cap {
  margin: calc(8 * var(--u)) 0 0; font-family: var(--post); font-weight: 400;
  font-size: calc(15 * var(--u)); line-height: calc(18 * var(--u)); color: #fff;
}
.phone__music { margin: calc(5 * var(--u)) 0 0; display: flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(14 * var(--u)); line-height: 1; color: #fff; }
.phone__music svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); flex: none; }

/* ── Taking the phone over ──────────────────────────────────── */

/* Two arrows inside the screen, on both phones the site has: the hero's slideshow and
   every post in the formats section (assets/js/takeover.js builds them). A visitor gets
   them by hovering the screen, by tapping it or by tabbing into it, and whatever clock
   the phone runs stops for as long as they have it.

   Reference units like everything else in here: the screen's own --u, so they hold their
   place in a 268px phone and a 240px one. `--arrow-y` is where they are CENTRED, which
   has to clear the action rail beside them — and the two phones do not agree on where
   that starts, because the hero's icons carry counts and the formats section's carry
   none (it shows no invented numbers for apps that aren't customers). Measured: the rail
   starts at ref y384 on a formats phone and at y312 on the hero's, so the default sits
   in the middle of the picture and the hero's override sits above its avatar. Centred
   rather than topped so that growing the disc for a finger, below, moves neither. */
.phone__arrow {
  position: absolute; top: var(--arrow-y, calc(346 * var(--u))); transform: translateY(-50%);
  width: calc(38 * var(--u)); height: calc(38 * var(--u));
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  /* A hairline ring and a soft shadow as well as the fill: the disc alone vanished into
     the dark half of a picture (a car interior, a night shot) and washed out on the
     bright half. The ring is what makes it an object on top of a photograph. */
  background: rgba(12, 12, 14, .5); color: #fff; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease-out, background .2s ease-out;
}
.phone__arrow svg { width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
.phone__arrow--prev { left: calc(9 * var(--u)); }
.phone__arrow--next { right: calc(9 * var(--u)); }
.phone__arrow:hover { background: rgba(12, 12, 14, .78); }
.phone__screen.is-hot .phone__arrow { opacity: 1; pointer-events: auto; }
/* A white ring: these sit on a photograph, and the page's own focus colour can land on
   the same tone as whatever is behind them. */
.phone__arrow:focus-visible { opacity: 1; pointer-events: auto; outline: 2px solid #fff; outline-offset: 2px; }

/* A finger needs a bigger disc than a cursor does, and it has no hover state to find one
   with: on a touch screen these only appear once the visitor has already tapped or
   swiped the picture, so they are confirmation that they have the wheel rather than
   decoration over a marketing shot. 56 reference px is about 33 real ones in a 240px
   phone — well past the 24px floor, and as much of a 222px-wide screen as a control can
   take without becoming the subject of it. */
@media (pointer: coarse) {
  .phone__arrow { width: calc(56 * var(--u)); height: calc(56 * var(--u)); }
  .phone__arrow svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); }
  .phone__arrow--prev { left: calc(6 * var(--u)); }
  .phone__arrow--next { right: calc(6 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) { .phone__arrow { transition: none; } }

/* The hero's own centre. An id because the markup it names is checked byte-for-byte by
   build_hero_slides.py (see site/README.md) — a class added to that div is a line the
   check no longer recognises. */
#heroPhone { --arrow-y: calc(274 * var(--u)); }

/* Slideshow dots — outside the frame, above it. They belong to the page (they say
   "this is advancing"), not to the screenshot, so they take page ink rather than
   the white-on-video TikTok draws inside the screen. */
.phone__dots { display: flex; justify-content: center; gap: 7px; margin-bottom: 14px; }
.phone__dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(25,27,30,.22); transition: background .3s ease, transform .3s ease; }
.phone__dots i.on { background: var(--ink); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .phone__dots i { transition: none; } }

/* Tab bar — opaque black from ref y728 to the foot, five equal columns, icons at
   y734-755 with their labels under them, home indicator at y799. */
.phone__nav {
  position: absolute; left: 0; right: 0; bottom: 0; height: calc(84 * var(--u));
  display: grid; grid-template-columns: repeat(5, 1fr); align-content: start;
  padding-top: calc(2 * var(--u)); background: #000; color: rgba(255,255,255,.6);
}
.phone__nav span { display: grid; justify-items: center; font-size: calc(10 * var(--u)); font-weight: 600; line-height: 1; }
.phone__nav svg { width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin-bottom: calc(4 * var(--u)); }
.phone__nav .on { color: #fff; }
/* TikTok's create button: a white pill flanked by its cyan and red offsets. */
.phone__plus { position: relative; align-self: center; }
.phone__plus i {
  display: block; width: calc(43 * var(--u)); height: calc(28 * var(--u));
  border-radius: calc(8 * var(--u)); background: #fff;
  box-shadow: calc(-3.5 * var(--u)) 0 0 calc(-1 * var(--u)) #25F4EE, calc(3.5 * var(--u)) 0 0 calc(-1 * var(--u)) #FE2C55;
}
.phone__plus b {
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #191b1e; font-size: calc(18 * var(--u)); font-weight: 700; line-height: 1;
}
.phone__home {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(9 * var(--u));
  width: calc(134 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(3 * var(--u)); background: #fff;
}

/* The app behind the post — a quiet row under the frame, not a second card
   competing with the phone. Fixed height and a reserved icon box so it never
   reflows as the slideshow swaps apps. */
.appcard {
  width: min(100%, var(--phone-w, 268px)); margin: 16px auto 0;
  display: flex; align-items: center; gap: 12px;
}
/* The hairline is load-bearing, not decoration: App Store artwork is delivered on
   whatever background the maker chose, and two of these eight are white to the
   edge (Feel is a rose on pure white). On a white page those have no silhouette at
   all — the icon reads as a fragment floating next to the name. The border is what
   gives every icon the same squircle, whatever its artwork does. Inset rather than
   a real border so it never eats 2px of a 48px icon or shifts the row. */
.appcard__icon {
  width: 48px; height: 48px; flex: none; border-radius: 12px;
  object-fit: cover; background: var(--line);
  box-shadow: inset 0 0 0 1px var(--line-ctl);
}
.appcard__text { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.appcard__name { font-size: 15px; font-weight: 800; color: var(--ink); line-height: 1.2; }
/* Two reserved lines rather than one clipped one: the arrow takes 40px of a 268px
   row, which leaves the subtitle too little to hold a line like "Daily affirmations,
   gently delivered" — every one of the eight would ellipsis. The height is fixed
   for the reason the row always had one: the slideshow swaps apps every 2.6s and
   must never reflow the column under the phone. */
.appcard__sub {
  font-style: normal; font-size: 13px; line-height: 1.3; color: var(--ink-50);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; height: calc(2 * 1.3 * 13px);
}
/* The visitor's own handle on the slideshow. Round, like the frame it sits under;
   --line-ctl rather than --line because this is an interactive boundary and 1.4.11
   wants 3:1. Hover, focus ring and the reduced-motion stop all come from the
   global rules at the head of this file. */
.appcard__next {
  flex: none; width: 40px; height: 40px; padding: 0;
  border-radius: 50%; border: 1px solid var(--line-ctl);
  background: #fff; color: var(--ink);
  display: grid; place-items: center; box-shadow: var(--shadow);
}
.appcard__next svg { width: 16px; height: 16px; fill: currentColor; display: block; }

/* ── Breakpoints ─────────────────────────────────────────────── */

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  /* Stacked, the phone no longer has to share a screenful with the copy beside
     it, so it goes back to full size and scrolls to like everything else. */
  .phone-wrap { --phone-w: 268px; }
}
@media (max-width: 720px) {
  .hero__title .swash { white-space: normal; }
  /* The hero phone is a desktop picture. On a phone it was a second phone a full
     screen tall between the paste field and the rest of the page, and the formats
     section already shows the same TikTok frame further down. Scoped to the hero:
     example.html has a .phone-wrap of its own. hero.js skips the slideshow at this
     width and index.html keeps slide 1 from downloading, so it costs nothing. */
  .hero__grid .phone-wrap { display: none; }
  /* The phone scale (base.css --m-*). The field goes to 16px: below that iOS Safari
     zooms the page when it is tapped, and the ghost URL lying on it has to match. */
  .hero__title { margin-top: 16px; }
  .hero__sub { margin-top: 16px; }
  .console__input, .console__scheme, .console__typed { font-size: var(--m-lede); }
  .console__error { font-size: var(--m-small); }
  .hero__note { font-size: var(--m-small); }
  /* The console used to vanish here, leaving only the button: it was a decorative
     typing animation, and a phone has no room to run one beside a CTA — the field
     clipped to "https://apps". Now that it takes a real paste it has to survive, so it
     stacks instead: field on its own row at full width, button beneath it, still sized
     like the primary CTA it also is. Nothing types into it on a phone (hero.js leaves a
     short static hint), so the caret has nothing to mark. */
  .console { flex-direction: column; align-items: stretch; gap: 12px; background: none; border: 0; box-shadow: none; padding: 0; }
  /* Stacked, the outer pill would be a box drawn around two things that already look
     like themselves, so the card moves INTO the field — which is the half that has to
     read as tappable. The button below it is already unmistakable. */
  .console__field { background: #fff; border: 1px solid var(--line-ctl); border-radius: 999px; padding: 15px 22px; box-shadow: 0 10px 30px -18px rgba(25,27,30,.28); }
  .console:focus-within { border-color: transparent; box-shadow: none; }
  .console__field:focus-within { border-color: var(--blue-deep); box-shadow: 0 0 0 3px rgba(21,99,242,.16); }
  .console__caret { display: none; }
  /* The hint is an overlay (inset: 0) and the field just gained 22px of side padding,
     so the hint has to take the same inset or it starts on the border while the text
     you type starts 22px in. */
  .console__ghost { inset: 0 22px; }
  .console .btn { width: 100%; justify-content: center; padding: 15px 24px; font-size: 15px; }
  /* A 44px tap target: the link was 21px tall. The padding comes out of the margin
     above so the line sits where it did. */
  .hero__watch { margin-top: 8px; }
  .hero__watch a { display: inline-block; padding-block: 10px; }
}