/*
The tokens were read off the Figma nodes. The design file has neither colour styles nor
variables — get_styles returned empty collections — so the values are derived from the
actual nodes and pinned here. Any new value from the design goes here, not inline.
*/

:root {
  --ink: #09213b;
  --ink-hover: #0d2e52;
  --accent: #5899b0;
  --surface: #ffffff;

  /*
  The page canvas. In the design renders it is not white: an even, light blue-white
  #f6fcfd with a soft sweep of light across the upper part of the first screen.
  --surface stays pure white — that is the colour of cards (the header), not of the canvas.
  */
  --page-bg: #f6fcfd;

  /*
  ── Background: aurora ───────────────────────────────────────────────────────

  For three rounds the background was built from gradients — first blobs, then arcs of
  ring-shaped radial gradients. The CEO read the result as "a blurred line of no
  particular shape", and that was not a matter of tuning. A gradient is a monotone ramp:
  it can only fade away smoothly and evenly on both sides. The reference render has a
  thread with a hard edge on one side and a wide soft wedge on the other, and no
  combination of stops produces that, because it is not a drawn line at all.

  What the render shows is a caustic — the fold of a smoothly warped field of light. Both
  the crest and the flanks come from one and the same surface, which is why they can be
  sharp and soft at once. So the background is now built the way a caustic is: soft
  parallel bands of light are warped by an SVG turbulence filter, and where the warp
  compresses a band its ramp is squeezed into a hard-edged thread, while where it stretches
  one the band opens into a broad faint wash.

  The tokens below describe the bands. The warp itself lives in header.php: filter
  primitives take plain numbers and cannot read custom properties.
  */

  /*
  The thread colour, and how deep it goes. In the reference the field is #f7fdfd and the
  core of a thread #e7f7fc — sixteen levels of red, six of green, one of blue. Everything
  is contained in --aurora-ink and the two alphas; the profile stops below are fractions
  of those alphas, so the whole effect gets lighter or heavier from two numbers.
  */
  --aurora-ink: 200 234 248;
  --aurora-weave-1-a: 0.32;
  --aurora-weave-2-a: 0.2;

  /*
  Band geometry. --aurora-period is the distance between two threads; the stops are
  absolute px inside that period.

  The profile is deliberately lopsided — it climbs to the core over some 30px and comes
  back down over 200. A symmetric band survives the warp as a symmetric band, and a
  symmetric band is exactly the blurred stripe we are trying to get away from. The lopsided
  one folds the way a caustic folds: a crest on the steep side, a wedge of shading opening
  off the shallow one, and the two swapping over as the warp turns the band around.

  The core is narrow on purpose. Compression in the warp is what gives a thread its visible
  width, so anything wide here comes out of the filter as a stripe rather than a thread.
  */
  --aurora-period: 720px;
  --aurora-halo-in: 250px;
  --aurora-knee-in: 355px;
  --aurora-core-in: 400px;
  --aurora-core-out: 424px;
  --aurora-knee-out: 490px;
  --aurora-halo-out: 610px;

  /*
  Two families, at an angle to each other. One family alone warps into a set of parallel
  threads; it takes a second one crossing it to get the junctions and closed cells the
  reference is made of. The second is fainter and coarser so the picture keeps a lead.

  The angles are those of the gradient axis, so the threads themselves run across them: at
  155deg family 1 rises to the right at about 25 degrees, like the main band of light in
  the render.
  */
  --aurora-weave-1-angle: 155deg;
  --aurora-weave-2-angle: 42deg;
  --aurora-weave-2-period: 980px;

  /*
  Phase. The two families cross wherever their stripes happen to line up, and that crossing
  is the loudest thing in the frame, so its position is a composition decision rather than
  an accident. Shifting one family along its own normal slides the crossing along the
  other. It is set here to put the busy part of the net in the upper half, as in the
  render, and to leave the text column quiet.

  Measured from the top-left of the visible frame rather than of the layer: the layer
  overhangs by --aurora-pad, and background.css adds that pad back in. Without it, retuning
  the pad silently reshuffles the whole composition.
  */
  --aurora-weave-1-phase-x: 0px;
  --aurora-weave-1-phase-y: 0px;
  --aurora-weave-2-phase-x: 360px;
  --aurora-weave-2-phase-y: -400px;

  --aurora-h: 900px;

  /*
  Slack around the bands, and it has to be generous.

  Two things eat into it. The displacement samples up to half its scale away from every
  point (the offset is scale × (channel − 0.5)), and past the edge of the source there is no
  colour to sample. And the bands travel a full period over a cycle, which drags the layer's
  own edge across the frame — at 320px it arrived a third of the way in near the end of the
  cycle and the threads quietly thinned out over the top of the page for several seconds.
  Nothing tore, because the band layer is filled with the canvas colour, so the failure was
  invisible in any single screenshot and only showed up when frames from across a whole
  cycle were put side by side.

  So: pad > longest drift + half the warp. The drift here is 728px (family 2, 980 × 0.743)
  and half the warp is 215, hence 960.
  */
  --aurora-pad: 960px;

  /*
  A cycle is one full period of travel along the band normal, so the last frame is
  identical to the first and the animation can run linear and infinite with no turn in it.
  An ease or an alternate stalls at the ends, and that stall is what makes a loop read as
  a trick.

  The acceptance criterion is stated in time rather than in numbers: two frames three
  seconds apart have to differ visibly. At 34s a band covers some 60px in that window,
  and because the warp magnifies the change where it compresses, the threads themselves
  move further than that.

  The two periods are not multiples of one another: with multiples the families fall back
  into the same relative phase every cycle and the crossings pulse in unison.
  */
  --aurora-dur-1: 34s;
  --aurora-dur-2: 47s;

  /*
  Grain. The whole picture lives inside about a dozen levels of one channel, so its ramps
  run for hundreds of px and the 8-bit steps in them show up as banding. A couple of per
  cent of noise breaks the step edge without being seen as texture.
  */
  --aurora-grain: 0.025;

  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /*
  The headings in the design are set in GT Flexa Trial — the trial version of a commercial
  Grilli Type face. It cannot be used in production; the client has no web licence yet.
  Until one is bought we substitute DM Sans. Swapping in the licensed font is one edit here.
  */
  --font-display: var(--font-sans);

  --fs-nav: 20px;
  --ls-nav: 1px;
  --fs-cta: 15px;
  --ls-cta: 2px;
  --lh-tight: 22.48px;

  --header-inset: 40px;
  --header-top: 32px;
  --header-height: 100px;
  --header-radius: 24px;
  --header-padding-x: 24px;
  --nav-gap: 40px;

  --logo-width: 138px;

  /*
  The burger in the design is two full-width 52px lines, 8px between their centres.
  The lines are drawn in pure black rather than --ink: in the design export the logo gives
  09213b while the lines give 000000. Kept as a separate token so it can be changed in one
  line if the designer confirms it was an oversight.
  */
  --burger-ink: #000000;
  --burger-width: 52px;
  --burger-bar: 3px;
  --burger-gap: 5px;
  --burger-hit-y: 16px;

  --cta-height: 43px;
  --cta-padding-x: 24px;
  --radius-pill: 1000px;

  --shadow-panel: 0 6px 24px rgb(9 33 59 / 12%);

  /*
  The header shadow is calibrated against the reference hero-desktop-ref.png: below the
  bottom edge of the card the background drops to #c9cfcf and returns to the canvas after
  roughly 175px.
  */
  --shadow-header: 0 10px 26px rgb(0 0 0 / 16%), 0 30px 78px rgb(0 0 0 / 19%);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 240ms;

  /* ── Block 02 "Hero" ─────────────────────────────────────────────────────── */

  /*
  The 1440 design frame is centred inside 1920 (240 on each side). Below 1440 the column
  falls back to --page-inset, so the header and the hero shift together.
  */
  --page-inset: 40px;
  --page-max: 1440px;

  /*
  248 and not 250: DM Sans's half-leading lifts the line, and at 248 the cap height of
  "Engineered" lands on the design's 257 and the bottom of the heading on 570.
  */
  --hero-top: 248px;
  --hero-bottom: 120px;
  --hero-col: 752px;
  --hero-gap: clamp(32px, 9.7vw, 140px);

  --hero-media-w: clamp(280px, 36.7vw, 529px);
  --hero-media-ratio: 529 / 625;
  --hero-media-radius: 38px;

  /*
  The colour of the dark heading segments was taken from the rendered frame: #0a223c,
  which is --ink. For this node Figma reports #272c42 — that is the "dominant" fill of
  mixed text, not the actual colour. A separate token is kept in case the designer
  confirms Figma's version.
  */
  --heading-ink: var(--ink);

  /*
  In the design a tone changes weight as well as colour: dark segments are set bold and
  accent ones light. DM Sans is variable, so the whole range is in one file.
  */
  --fw-display-dark: 700;
  --fw-display-accent: 300;

  --fs-hero-title: clamp(44px, 5.69vw, 82px);
  --ls-hero-title: -0.0244em;
  --lh-hero-title: 0.963;

  --fs-hero-lead: 18px;
  --ls-hero-lead: 0.9px;
  --lh-hero-lead: 23.4px;
  --hero-lead-w: 509px;
  --hero-title-gap: 32px;

  --hero-btn-gap: 16px;
  --hero-btn-solid-w: 234px;
  --hero-btn-solid-h: 43px;
  --hero-btn-outline-w: 207px;
  --hero-btn-outline-h: 45px;
  --fs-hero-btn: 13px;
  --ls-hero-btn: 2px;
  --hero-btn-outline-border: rgb(9 33 59 / 30%);

  --badge-w: 106px;
  --badge-h: 59px;

  /*
  The badge corner is a squircle, not a border-radius. In assets/img/WEIGHT.svg the plate
  is defined by a contour whose rounding starts 17.61px before the corner with control
  points at 3.11px: that is Figma's corner smoothing applied on top of radius 10. A plain
  border-radius: 10px gives a noticeably sharper corner — that is exactly why the badge
  "read as flat" next to the original.

  --badge-radius stays: it is that same radius 10 from Figma, and it works as the fallback
  wherever clip-path: path() is unsupported (in that case the clip-path line is dropped
  entirely and a rounded rectangle remains).

  The contour is copied from WEIGHT.svg verbatim. The mobile one is recomputed at the same
  proportions from radius 8 (see the 700px block) rather than scaled from the desktop one:
  a 73×34 badge is not a proportional reduction of 106×59.
  */
  --badge-radius: 10px;
  --badge-clip: path("M0 17.6692C0 3.11862 3.1083 0 17.6108 0H88.3807C102.883 0 105.991 3.11862 105.991 17.6692V41.3308C105.991 55.8814 102.883 59 88.3807 59H17.6108C3.1083 59 0 55.8814 0 41.3308V17.6692Z");

  /*
  The hairline edge around the badge. It is not in the Figma export — this is the client's
  decision, not a discrepancy with the design: without it the glass badge loses its
  boundary over light areas of the photo and over the overhang past its edge, where the
  page canvas sits underneath.

  The edge cannot be drawn with border or an inset box-shadow: both are built on a rounded
  rectangle, while the badge is clipped by a squircle. The squircle starts curving 17.6px
  before the corner, whereas radius 10 runs straight until 10px — along that stretch
  clip-path would cut the edge away, and it would disappear at all four corners.

  So the edge is a ring: a single contour with two subpaths under the evenodd rule — the
  outer squircle and the same squircle shrunk by the edge thickness. The inner contour is
  produced by moving each side inward by --badge-border-w rather than by scaling: scaling
  would make the edge thickness drift apart along the two axes at the corners.
  */
  --badge-border-w: 1px;
  --badge-border-color: rgb(255 255 255 / 55%);
  --badge-ring-clip: path(
    evenodd,
    "M0 17.6692C0 3.11862 3.1083 0 17.6108 0H88.3807C102.883 0 105.991 3.11862 105.991 17.6692V41.3308C105.991 55.8814 102.883 59 88.3807 59H17.6108C3.1083 59 0 55.8814 0 41.3308V17.6692Z M1 18.6692C1 4.11862 4.1083 1 18.6108 1H87.3807C101.883 1 104.991 4.11862 104.991 18.6692V40.3308C104.991 54.8814 101.883 58 87.3807 58H18.6108C4.1083 58 1 54.8814 1 40.3308V18.6692Z"
  );

  /*
  In the SVG the dot sits at x=12, not 8: the previous padding pushed it right to the edge.
  */
  --badge-pad-l: 12px;
  /*
  The right padding is larger than the left and does not scale with the badge: the badge
  overhangs the edge of the photo, while in the design the text stops exactly at that
  boundary — otherwise the white letters slide onto the light page background and vanish.
  */
  --badge-pad-r: 17px;
  --badge-dot: 10px;

  /*
  The glow around the dot: an even 4px ring, white, no blur. A box-shadow with spread and
  zero blur reproduces it exactly; a blurred shadow would give a soft halo that is not part
  of the intent.

  NOTE: the markup deliberately departs from the export here. In WEIGHT.svg itself this
  glow is not visible at all — not because it is absent, but because of how Figma exports
  shadows: the shadow is drawn on a separate copy of the shape with fill-opacity="0.01",
  and full opacity is restored by a feColorMatrix with a multiplier of 127. But the
  feMorphology in that filter takes in="SourceAlpha", i.e. those same 0.01 before the
  restore, so the resulting alpha of the ring works out to 0.18 x 0.01 = 0.0018. Measured:
  in the side-by-side (design/preview/badge-compare.html) the SVG gives exactly the same
  pixel inside the ring band as the plate around it — there is no ring there, not by a
  single level.

  What is used here is the design's intent (white, 18%, 4px spread) rather than the literal
  rendering of the export. If it is decided to match the export, zero the alpha on this line.
  */
  --badge-dot-ring: 4px;
  --badge-dot-ring-color: rgb(255 255 255 / 18%);

  --fs-badge-value: 20px;
  --ls-badge-value: 2px;
  --fs-badge-label: 12px;
  --ls-badge-label: 1.68px;
  --badge-gap: 4px;

  /*
  Frosted glass. Both values were read from assets/img/WEIGHT.svg and ENERGY.svg — the
  Figma export of the badges: fill-opacity 0.23 on the plate and backdrop-filter
  blur(27.3px) on the foreignObject. The SVGs themselves do not go into the markup: they
  contain zero text nodes, every digit is converted to outlines — no counter, no editing.
  */
  --badge-bg: rgb(255 255 255 / 23%);
  --badge-blur: 27.3px;

  /*
  The badges float over the photo along a closed path across two axes rather than bobbing
  vertically: at this amplitude single-axis motion reads as a shiver, two-axis motion reads
  as free drifting. The badges' periods differ and are not multiples of one another, else
  after a few cycles they fall into phase and start moving in lockstep.

  The amplitude was raised from 4px: the old one was thinner than a line of text and did
  not read at all.
  */
  --badge-float-x: 7px;
  --badge-float-y: 11px;
  --badge-float-dur-tr: 24s;
  --badge-float-dur-bl: 31s;
  --badge-float-delay-bl: -11s;

  /*
  The entrance: the badge fades in while settling from an enlargement to its own size.
  Scale and offset are split across different properties (scale and translate) rather than
  gathered into one transform — otherwise the entrance and the float cannot run at the same
  time: two animations on one property do not compose, the last one wins.

  The badges have different delays so they do not pop in together as one movement.

  Why the zoom-out was not readable at 1.15, and why three numbers changed rather than one:

  - The travel was too short. 1.15 on a 106px badge is 16px of width across the whole
    entrance — comparable to the float amplitude, so it read as part of the drifting.
  - The fade and the zoom shared one duration and one easing. --badge-in-ease is heavily
    front-loaded (by a third of the way it is already ~85% done), so nearly the whole
    zoom happened while the badge was still almost transparent. What was left to see by
    the time it became opaque was the last few percent.

  So the fade and the zoom are now two animations on two properties with their own
  durations: opacity is done early and the scale keeps settling in plain sight, on an
  easing that spreads the motion across the middle of the interval instead of spending it
  up front. They compose because they touch different properties — the same reason the
  float can run alongside them.
  */
  --badge-in-scale: 1.45;
  --badge-in-dur: 1800ms;
  --badge-in-fade-dur: 620ms;
  --badge-in-delay-tr: 700ms;
  --badge-in-delay-bl: 1150ms;
  --badge-in-ease: cubic-bezier(0.16, 0.72, 0.24, 1);
  --badge-in-zoom-ease: cubic-bezier(0.33, 0, 0.2, 1);

  /*
  The chart line over the photo. It used to be baked into the default photo and travelled
  away with it whenever the client replaced the picture; now it is its own SVG layer.
  The geometry was taken from the reference render, in the photo's 529x625 coordinate system.
  */
  --chart-stroke: 1.2px;
  --chart-len: 306;

  /*
  The line travels with the left-hand badge (see --badge-bl-*): the two read as one object.
  The shift is the same amount the badge moved — up and to the right — so the distance
  between the end of the line and the badge stays exactly as accepted.

  It moves on the translate property, because the crop knob already occupies scale on this
  same layer and one transform cannot hold both without them evicting each other.
  */
  --chart-shift-x: 12px;
  --chart-shift-y: -12px;

  /*
  Scene timing. The order is defined here and not in the script: photo -> heading segment
  by segment -> description -> buttons -> badges -> line. Every step is measured from the
  same zero, the moment the hero entered the viewport, so the storyboard can be read
  straight off the numbers:

      0      photo
      150    first heading segment, then one every --hero-in-title-step
      700    right-hand badge (and its counter)
      1000   description
      1150   left-hand badge (and its counter)
      1250   buttons
      2500   chart line, dots follow as it passes them
      5500   scene over

  The badges moved up from 1700 and 2350. They used to land after the last of the text and
  read as the tail of the scene; they belong to the first impression, which is why they now
  overlap the description and the buttons instead of queuing behind them. The overlap is
  not a collision: the text is the left column and the badges are the right one, and the
  two columns play as two parallel tracks rather than one list.

  What did not change is the pace. The scene is still ~5.5s end to end, and no single step
  got faster — only the order was rearranged, and the badges' own entrance got longer
  (see --badge-in-dur), not shorter.
  */
  --chart-start-delay: 2500ms;
  --chart-line-dur: 3000ms;
  --chart-dot-dur: 620ms;
  --count-dur: 3000ms;

  /*
  The photo has its own entrance, ahead of the rest of the scene: the card arrives first
  and the badges then surface on top of it. The easing shared by the whole scene is the
  same one the badges use.
  */
  --hero-in-ease: var(--badge-in-ease);
  --hero-in-photo-dur: 1500ms;
  --hero-in-photo-delay: 0ms;
  --hero-in-photo-shift: 28px;
  --hero-in-photo-scale: 1.04;

  /*
  Text. The heading segments come in one after another with a step of --hero-in-title-step;
  the step is multiplied by the segment's ordinal number, which the render loop stamps on
  it, so a fifth and a sixth segment pick up the same stagger by themselves.
  */
  --hero-in-text-dur: 1000ms;
  --hero-in-text-shift: 16px;
  --hero-in-title-delay: 150ms;
  --hero-in-title-step: 220ms;
  --hero-in-lead-delay: 1000ms;
  --hero-in-actions-delay: 1250ms;

  /*
  Three-dimensionality of the photograph. The constant idle sway runs on the rotate
  property, the cursor tilt on transform: two different properties, so they compose instead
  of evicting one another (the same scheme the badges use with translate and scale).

  The amplitudes are in single degrees: this is a medical clinic, the card has to look
  alive, not spin. The perspective is set on the wrapper — the smaller it is, the harder
  the lines converge; 1100px on a 529px card gives noticeable but calm depth.
  */
  --hero-perspective: 1100px;
  --hero-sway-x: 1.1deg;
  --hero-sway-y: 1.4deg;
  --hero-sway-dur: 22s;

  --hero-tilt-x: 3.2deg;
  --hero-tilt-y: 4.2deg;

  /*
  Following is short, the return is long: while the cursor is inside, the card must not
  lag behind it, and once the cursor leaves it has to come back on its own, without a jerk.
  */
  --hero-tilt-follow: 160ms;
  --hero-tilt-return: 900ms;

  /*
  Cropping of the default photo. The file hero-default.jpg has blur baked into it in the
  top-right and bottom-left corners — the smudges left when the original badges were painted
  out while cutting the frame from a screenshot of the design. CSS has nothing to do with
  it, and the only cure is replacing the file: a clean original has been requested from the
  client.

  Cropping does not cure it either, and here is why — the numbers were measured on the file
  itself (1058x1251). The right-hand smudge occupies the last 188px of the width (17.8%),
  the bottom-left one the last 166px of the height (13.3%). Zoom is uniform, so to cut 17.8%
  off the right you must also cut 17.8% vertically, and that is 222px.

  What that breaks was checked on the live page, not reasoned about:

  - The chart polyline is anchored to the body in the shot: it runs across the chest along
    the chain. That means it has to be scaled together with the photo, otherwise it slides
    off the chest and onto the face. Its lowest point sits at 542 in the 625 frame system,
    and with the origin at the top edge it already leaves the bottom boundary and disappears
    from a zoom of 1.16.
  - Putting the origin at the bottom edge preserves the chest and the chart but cuts the
    top: the model's head is clipped, and the bottom-left smudge comes back as well — it is
    at the bottom, i.e. on the side this variant preserves.
  - A zoom large enough for both smudges (1.22) throws the chart out of frame and makes the
    portrait noticeably larger than the accepted one.

  So the zoom is left at 1: the frame is exactly as accepted and the chart sits where it
  does in the reference. Changing an accepted composition in order to half-hide a defect in
  the source file is not a trade in the design's favour.

  The only real fix is the clean original; it has been requested from the client. The tokens
  below are kept as a working knob: if it is decided to hide the smudges at the cost of the
  frame, that is an edit of two numbers rather than of the markup. The default origin is the
  bottom-left corner because, of all the options, only it preserves the chest with the chain
  and the chart's anchoring.
  */
  --hero-photo-zoom: 1;
  --hero-photo-origin: 0% 100%;

  /*
  Badge offsets from the photo's corners; the right one deliberately overhangs the edge.

  The left-hand badge (ENERGY) sat too close to the corner of the photo and was moved a
  little up and to the right. The chart moves with it by the same amount, see
  --chart-shift-*: the line and that badge read as one object, the badge sitting at the
  end of the graph, so moving one of them alone would break the pair.
  */
  --badge-tr-top: 69px;
  --badge-tr-right: -19px;
  --badge-bl-left: 40px;
  --badge-bl-bottom: 26px;
}

/* Mobile values were read from node 1072:685 (frame 390): header 350x66, inset 20, radius 24. */
@media (max-width: 900px) {
  :root {
    --header-inset: 20px;
    --header-top: 40px;
    --header-height: 66px;
    --header-radius: 24px;
    --header-padding-x: 24px;
    --logo-width: 82px;

    /* The mobile frame inset, shared by the header and the hero. */
    --page-inset: 20px;

    /*
    The bands are not rescaled proportionally to the width. A 720px period on a 390 screen
    would put half a thread on the page and read as a plain diagonal wash, so the whole
    net is drawn about twice as fine — one junction and the cells around it fit the frame,
    which is what the mobile render shows. The warp in header.php is scaled to match; the
    two have to move together, or the bands either stay straight or fold into mud.
    */
    --aurora-h: 620px;

    /* Longest drift here is 386px (520 × 0.743) and half the warp is 114. */
    --aurora-pad: 520px;

    --aurora-period: 380px;
    --aurora-halo-in: 132px;
    --aurora-knee-in: 187px;
    --aurora-core-in: 211px;
    --aurora-core-out: 224px;
    --aurora-knee-out: 259px;
    --aurora-halo-out: 322px;
    --aurora-weave-2-period: 520px;

    --aurora-weave-2-phase-x: 190px;
    --aurora-weave-2-phase-y: -211px;
  }
}

/*
The hero collapses to one column earlier than the header turns into a burger: up to 700 two
columns still fit, while the mobile sizes (photo 350x335, badges 73x34) would give tiny
badges over a full-width photo on a tablet. The design does not describe the tablet — in
between, the fluid desktop values apply.
*/
@media (max-width: 700px) {
  :root {
    --hero-top: 124px;
    --hero-bottom: 96px;
    --hero-gap: 24px;

    --hero-media-w: 100%;
    --hero-media-ratio: 350 / 335;
    --hero-media-radius: 20.4px;

    --fs-hero-title: 40px;
    --ls-hero-title: -0.02825em;
    --lh-hero-title: 1.075;

    --fs-hero-lead: 16px;
    --ls-hero-lead: 0.8px;
    --lh-hero-lead: 20.16px;
    --hero-lead-w: 330px;
    --hero-title-gap: 24px;

    --hero-btn-gap: 8px;
    --hero-btn-solid-h: 45px;
    --hero-btn-outline-h: 45px;

    --badge-w: 73px;
    --badge-h: 34px;

    /*
    The contour is recomputed rather than scaled: 73x34 is not a proportional reduction of
    106x59, and scaling the desktop path would make the corners drift apart along the axes.
    It uses the mobile radius of 8 and the same smoothing as WEIGHT.svg (corner reach
    1.7611 of the radius, control point 0.3108 of the radius).
    */
    --badge-radius: 8px;
    --badge-clip: path("M0 14.1354C0 2.4949 2.4866 0 14.0886 0H58.9114C70.5134 0 73 2.4949 73 14.1354V19.8646C73 31.5051 70.5134 34 58.9114 34H14.0886C2.4866 34 0 31.5051 0 19.8646V14.1354Z");
    --badge-ring-clip: path(
      evenodd,
      "M0 14.1354C0 2.4949 2.4866 0 14.0886 0H58.9114C70.5134 0 73 2.4949 73 14.1354V19.8646C73 31.5051 70.5134 34 58.9114 34H14.0886C2.4866 34 0 31.5051 0 19.8646V14.1354Z M1 15.1354C1 3.4949 3.4866 1 15.0886 1H57.9114C69.5134 1 72 3.4949 72 15.1354V18.8646C72 30.5051 69.5134 33 57.9114 33H15.0886C3.4866 33 1 30.5051 1 18.8646V15.1354Z"
    );

    --badge-pad-l: 8.3px;
    --badge-dot: 5.8px;
    --badge-dot-ring: 2.3px;

    /* The float amplitude shrinks with the badge — 11px on a 34px height would be a jump. */
    --badge-float-x: 4px;
    --badge-float-y: 6px;
    --fs-badge-value: 11.6px;
    --ls-badge-value: 1.38px;
    --fs-badge-label: 6.96px;
    --ls-badge-label: 1.16px;
    --badge-gap: 2.8px;

    --badge-tr-top: 25px;
    --badge-tr-right: -6px;
    --badge-bl-left: 4px;
    --badge-bl-bottom: 0px;

    /*
    The desktop nudge of the left badge does not apply here: on mobile the photo is a wide
    350x335 crop, the badge sits in a different place relative to it, and the line is cut
    by the same crop. Shifting the line here would move it away from the body in the shot,
    which is the one thing it is anchored to.
    */
    --chart-shift-x: 0px;
    --chart-shift-y: 0px;
  }
}