/* ==========================================================================
   HOMEPAGE HERO · "DEVICE DISPLAY" — owner-approved option 05 of the hero study
   (2026-10-07).
   Appearance only: every rule is scoped to the hero (#hx). Content, wording,
   order, links, tabs and the audit form's behaviour are unchanged.
   Part 1 = the settled audit-form width shared by every study option.
   Part 2 = the Device Display design (the work shown on a light tablet; on
   phones a phone-shaped device).
   Linked last in <head> of index.html; delete that one line to undo.
   ========================================================================== */

/* ---- Part 1 · settled audit form (study _base.css) ---------------------- */
/* ==========================================================================
   SHARED BASE for options 01–10 (loaded before each option's own CSS).
   Owner's direction 2026-10-07: the headline stays exactly as live (heavy,
   live size and left/right extent) — nothing here touches .hx-label or .hx-h1.
   The audit form keeps the "settled" proportions the owner liked: about 0.56
   of the headline's letters instead of the live 877px strip, 58px instead of
   64px, one soft shadow. Phones keep the live form (owner-approved Straddle).
   ========================================================================== */
@media (min-width: 761px) {
  html body #hx.hx.hx.hx form#hxForm { --fh: 58px; width: min(100%, clamp(560px, calc(var(--ink-l, 1131px) * .56), 680px)); }
  html body #hx.hx.hx.hx form#hxForm:not(.tr-open) {
    padding: 6px; border-radius: 15px;
    box-shadow: 0 0 0 1px rgba(15, 30, 58, .08), 0 1px 2px rgba(16, 42, 90, .05), 0 14px 30px -18px rgba(16, 42, 90, .30);
  }
  html body #hx.hx.hx.hx form#hxForm:not(.tr-open):focus-within {
    box-shadow: 0 0 0 1px rgba(15, 30, 58, .08), 0 14px 30px -18px rgba(16, 42, 90, .30), 0 0 0 2px rgba(7, 96, 198, .6);
  }
  html body #hx.hx.hx.hx form#hxForm .hx-fix { font-size: 17px; padding-left: 16px; }
  html body #hx.hx.hx.hx form#hxForm #hxSite { font-size: 17px; }
  html body #hx.hx.hx.hx form#hxForm > button { padding: 0 24px; gap: 9px; border-radius: 10px; font-size: 16px; font-weight: 700; }
  html body #hx.hx.hx.hx form#hxForm > button .hx-arw { width: 16px; height: 16px; }
}
@media (min-width: 761px) and (max-width: 1100px) {
  html body #hx.hx.hx.hx form#hxForm { --fh: 56px; width: min(100%, max(500px, calc(var(--ink-l, 800px) * .66))); }
}
@media (pointer: coarse) and (min-width: 761px) { html body #hx.hx.hx.hx form#hxForm > button { min-height: 44px; } }

/* ---- Part 2 · Device Display (study 05.css) ----------------------------- */
/* ==========================================================================
   HERO OPTION 05 · DEVICE DISPLAY — round 5c (full hero transformation)
   One idea: the proof is presented ON A DEVICE, like a flagship product page.
   · Backdrop: a calm studio — bright cool white under the header, a soft pearl
     (#EEF2F7) behind the device, fading back to pure white before the hero ends,
     with a soft elliptical floor glow under the device.
   · The device is ONE object, made of real materials:
       – a cool silver METAL BAND (#DCE1E8 → #CDD3DC) with a 1px bright chamfer
         on its outer edge, a darker outer line, a top highlight and a brushed
         specular sweep; a tight contact shadow plus two long studio drops;
       – a uniform bezel (20px desktop) holding one precise camera LENS
         (8px flat dark-silver ring with an inner dot) — the only ornament;
       – the SCREEN (radius 22 = 42 − 20): white glass with a darker 1px inner
         lip, a soft inner shadow and a faint diagonal sheen across the
         upper-left of its app bar.
   · The app on the screen: a pearl app bar (title row "Our Work." + the line
     "Real results…", then the eight categories as toolbar items — icon above
     title above sub-line). The CHOSEN item is a raised solid-white key inset in
     its column; resting items sit flat in slate ink; hover previews the exact
     same plate. Below it the seven cards sit on the white screen.
   · One inner screen padding (--dd-p) is shared by the title, the key plates
     and the card row, so the chosen key's left edge = the first card's edge.
   · Radius family: body 42 / screen 22 / keys 14 / cards 14 / photos 10.
   · Tablets: the same device, narrower, with a compact 4×2 bar.
     Phones: the work becomes a PHONE — radius 32, 8px bezel, screen 24,
     a dark punch-hole camera and two side buttons.
   Blue only on the audit button and the headline's "customers.".
   Untouched: .hx-h1 typography/width, form step 2 (.tr-open / .as-open
   internals), content and behaviour.
   ========================================================================== */

/* ---------- tokens ---------- */
html body #hx.hx.hx.hx {
  --dd-top: #FBFCFE;                 /* studio: bright cool white under the header */
  --dd-pearl: #EEF2F7;               /* studio: soft pearl behind the device */
  --dd-m1: #E3E7ED; --dd-m2: #DCE1E8; --dd-m3: #CDD3DC;   /* the metal band */
  --dd-edge: #B7BFCB;                /* the band's outer line */
  --dd-bar: #F2F4F8;                 /* the app bar on the screen */
  --dd-ink: #121A26;                 /* chosen title, focus ring */
  --dd-ink2: #273140;                /* resting titles, captions */
  --dd-slate: #566172;               /* sub-lines, arrows */
  --dd-sh: 22, 30, 44;               /* neutral shadow tint — never blue */
  --dd-bz: 20px;                     /* bezel */
  --dd-r: 42px;                      /* body radius (screen = r − bz = 22) */
  --dd-p: 16px;                      /* ONE inner screen padding: title, key plates, cards */
  --dd-kin: 8px;                     /* a key plate's inset inside its column */
  --dd-rk: 14px;                     /* keys + cards */
  --dd-rp: 10px;                     /* photos */
  --dd-lane: var(--lane);            /* the device's side line */
  --field: var(--dd-top);            /* phone Straddle: the key's seat is cut from the studio */
  --k3-focus: var(--dd-ink);         /* the site's focus colour, neutral inside the hero */

  /* the device: chamfer + top highlight (inset), outer line, contact, two studio drops */
  --dd-body-sh:
    inset 0 0 0 1px rgba(255, 255, 255, .82), inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1.5px 0 rgba(var(--dd-sh), .07),
    0 0 0 1px var(--dd-edge),
    0 3px 2px -1px rgba(var(--dd-sh), .26),
    0 14px 22px -12px rgba(var(--dd-sh), .30),
    0 30px 40px -30px rgba(var(--dd-sh), .40);
  /* the screen's glass edge: a darker inner lip where the glass meets the metal, a soft inner shade */
  --dd-glass: inset 0 0 0 1px rgba(var(--dd-sh), .22), inset 0 1px 4px rgba(var(--dd-sh), .10);
  /* the raised white key */
  --dd-key: 0 0 0 1px rgba(var(--dd-sh), .07), 0 1px 2px rgba(var(--dd-sh), .10), 0 4px 10px -3px rgba(var(--dd-sh), .13),
            0 12px 22px -12px rgba(var(--dd-sh), .26);
  /* cards on the white screen */
  --dd-card: 0 0 0 1px rgba(var(--dd-sh), .075), 0 1px 2px rgba(var(--dd-sh), .05), 0 8px 18px -12px rgba(var(--dd-sh), .22);
  --dd-card-h: 0 0 0 1px rgba(var(--dd-sh), .09), 0 2px 4px rgba(var(--dd-sh), .06), 0 18px 32px -16px rgba(var(--dd-sh), .32);
  --dd-chip: 0 1px 2px rgba(var(--dd-sh), .16), 0 4px 10px -4px rgba(var(--dd-sh), .26);
  --dd-ring: 0 0 0 2px #fff, 0 0 0 4px rgba(18, 26, 38, .85);
  /* the metal, as background layers (the brushed sweep over the band) */
  --dd-metal:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .34) 24%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, .26) 76%, rgba(255, 255, 255, 0) 100%) border-box,
    linear-gradient(180deg, var(--dd-m1) 0, var(--dd-m2) 38%, var(--dd-m3) 100%) border-box;
}

/* ---------- the studio backdrop (+ the floor glow under the device) ---------- */
html body #hx.hx.hx.hx .s4 {
  position: relative; border-bottom: 0;
  background:
    radial-gradient(ellipse 40% 26px at 50% calc(100% - var(--dd-floor, 40px)), rgba(var(--dd-sh), .10), rgba(var(--dd-sh), 0) 74%),
    linear-gradient(180deg, var(--dd-top) 0, #F7F9FC 28%, var(--dd-pearl) 52%, var(--dd-pearl) 74%, #F8FAFC calc(100% - 26px), #FFFFFF calc(100% - 8px));
}
html body #hx.hx.hx.hx .s4-field { background: transparent; border-bottom: 0; }
html body #hx.hx.hx.hx .hx-label { color: #1E2734; }
html body #hx.hx.hx.hx .hx-micro b { color: var(--dd-ink); }

/* ==========================================================================
   DESKTOP + TABLET (761px and wider)
   ========================================================================== */
@media (min-width: 761px) {
  html body #hx.hx.hx.hx .s4 { padding-bottom: 58px; --dd-floor: 44px; }
  html body #hx.hx.hx.hx .s4-field { padding-bottom: 30px; }
  html body #hx.hx.hx.hx .hx-micro { color: #4D5767; }

  /* AUDIT FORM — a white field lit by the studio; the blue button the one colour */
  html body #hx.hx.hx.hx form#hxForm:not(.tr-open) {
    border: 0; border-radius: 16px; background: #fff;
    box-shadow: 0 0 0 1px rgba(var(--dd-sh), .07), 0 1px 2px rgba(var(--dd-sh), .05),
                0 10px 22px -12px rgba(var(--dd-sh), .20), 0 26px 48px -30px rgba(var(--dd-sh), .26);
  }
  html body #hx.hx.hx.hx form#hxForm:not(.tr-open):focus-within {
    box-shadow: 0 0 0 1px rgba(var(--dd-sh), .07), 0 10px 22px -12px rgba(var(--dd-sh), .20), 0 0 0 2px rgba(18, 26, 38, .6);
  }
  html body #hx.hx.hx.hx form#hxForm:not(.tr-open) .hx-fix { background: #fff; }
  html body #hx.hx.hx.hx form#hxForm:not(.tr-open) > button {
    border-radius: 11px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(7, 60, 130, .28), 0 8px 18px -8px rgba(7, 96, 198, .55);
  }
  html body #hx.hx.hx.hx form#hxForm:not(.tr-open) > button:focus-visible { outline: 2px solid var(--dd-ink); outline-offset: 3px; }

  /* THE DEVICE — the padding is the metal bezel, the content box is the white screen */
  html body #hx.hx.hx.hx .s4-card {
    position: relative; margin: 0 var(--dd-lane); padding: var(--dd-bz); overflow: visible;
    border: 0; border-radius: var(--dd-r);
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto;
    background: linear-gradient(#fff, #fff) content-box, var(--dd-metal);
    box-shadow: var(--dd-body-sh);
  }
  /* the app bar's pearl tint, with the glass sheen: a faint diagonal light across its upper-left (under the keys) */
  html body #hx.hx.hx.hx .s4-card::before {
    content: ""; display: block; position: absolute; z-index: 0; pointer-events: none;
    grid-row: 1 / 3; grid-column: 1 / -1; inset: 0;
    border-radius: calc(var(--dd-r) - var(--dd-bz)) calc(var(--dd-r) - var(--dd-bz)) 0 0;
    background:
      linear-gradient(112deg, rgba(255, 255, 255, 0) 3%, rgba(255, 255, 255, .78) 10%, rgba(255, 255, 255, .5) 14%, rgba(255, 255, 255, 0) 23%),
      var(--dd-bar);
    box-shadow: none; transform: none; opacity: 1; width: auto; height: auto;
  }
  /* the glass edge of the screen + the camera lens. One overlay the size of the body whose transparent
     border is the bezel: its inset shadow sits exactly on the screen edge (a darker inner lip + a soft
     inner shade) and its background draws the lens centred in the top bezel — a flat dark-silver ring
     with an inner dot (8px). */
  html body #hx.hx.hx.hx .s4-card::after {
    content: ""; display: block; position: absolute; z-index: 3; pointer-events: none; inset: 0;
    box-sizing: border-box; border: var(--dd-bz) solid transparent; border-radius: var(--dd-r);
    background: radial-gradient(circle at 50% calc(var(--dd-bz) / 2), #121820 0 1.2px, #3A4350 1.7px 2.7px, #8D96A4 3.2px 4px, rgba(141, 150, 164, 0) 4.6px) border-box no-repeat;
    box-shadow: var(--dd-glass);
    transform: none; opacity: 1; width: auto; height: auto;
  }

  /* ---- the app bar: a title row, then eight toolbar items ---- */
  html body #hx.hx.hx.hx .s4-card > .mw-eye { display: none; }
  html body #hx.hx.hx.hx .s4-card > .mw-head {
    display: block; position: relative; z-index: 1; grid-row: 1; grid-column: 1; margin: 0; padding: 13px 16px 0 var(--dd-p);
    border-radius: 0; background: transparent;
    font-size: 18px; font-weight: 750; line-height: 24px; letter-spacing: -.02em; color: var(--dd-ink); text-align: left; white-space: nowrap;
  }
  html body #hx.hx.hx.hx .s4-card > .mw-head .mw-dot { color: var(--dd-ink); }
  html body #hx.hx.hx.hx .s4-card > .mw-why {
    display: block; position: relative; z-index: 1; grid-row: 1; grid-column: 2; align-self: end; margin: 0; padding: 0 var(--dd-p) 1px 0;
    border-radius: 0; background: transparent;
    font-size: 14px; font-weight: 450; line-height: 20px; color: #4D5767; text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  html body #hx.hx.hx.hx .s4-tabs {
    position: relative; z-index: 1; grid-row: 2; grid-column: 1 / -1;
    height: auto; margin: 0; padding: 8px calc(var(--dd-p) - var(--dd-kin)) 10px; border: 0; border-radius: 0; box-shadow: none;
    background: transparent;
    grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto auto;
    column-gap: 0; row-gap: 0; align-items: stretch;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab {
    position: relative; isolation: isolate; z-index: 0; grid-row: 1 / span 3;
    display: grid; grid-template-rows: subgrid; grid-template-columns: auto; justify-content: stretch;
    align-content: start; justify-items: center; row-gap: 0; min-width: auto;
    padding: 12px calc(var(--dd-kin) + 8px) 13px; border: 0; border-radius: var(--dd-rk); background: transparent; box-shadow: none;
    text-align: center; transform: none; transition: transform .12s ease;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab::after { content: none; display: none; }
  /* the plate: inset inside its column, the same shape for hover and for the chosen key */
  html body #hx.hx.hx.hx .s4-tabs .hx-tab::before {
    content: ""; display: block; position: absolute; z-index: -1; inset: 0 var(--dd-kin); border-radius: var(--dd-rk);
    background: transparent; box-shadow: none; clip-path: none; transform: none; opacity: 1;
    transition: background-color .2s ease, box-shadow .2s ease;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-ti {
    grid-row: 1; display: grid; place-items: center; width: 28px; height: 28px; margin: 0 0 8px;
    background: none; box-shadow: none; border: 0;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-ti svg { width: 26px; height: 26px; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tt { display: contents; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tt b {
    grid-row: 2; align-self: end; max-width: none; font-size: 15px; font-weight: 650; line-height: 20px; letter-spacing: -.01em;
    color: var(--dd-ink2); white-space: nowrap; text-align: center; transition: color .2s ease;
  }
  /* every sub-line on exactly two balanced lines, so all keys read the same */
  html body #hx.hx.hx.hx .s4-tabs .hx-tt small {
    grid-row: 3; align-self: start; max-width: min(100%, 9.6em); margin: 3px 0 0; font-size: 13px; font-weight: 400; line-height: 17px;
    color: var(--dd-slate); white-space: normal; text-wrap: balance; text-align: center;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:nth-child(-n+2) .hx-tt small { width: min-content; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:nth-child(3) .hx-tt small { max-width: 6.4em; }

  /* THE CHOSEN ITEM (declared after ::before): a raised solid-white key */
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] { transform: none; background: transparent; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"]::before { inset: 0 var(--dd-kin); background: #fff; box-shadow: var(--dd-key); }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"]::after { content: none; display: none; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] .hx-tt b { color: var(--dd-ink); font-weight: 750; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] .hx-tt small { color: #414B5A; }
  /* keyboard focus: a neutral ink ring around the plate */
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:focus-visible { outline: 0; box-shadow: none; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:focus-visible::before { box-shadow: var(--dd-ring); }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"]:focus-visible::before { box-shadow: var(--dd-key), var(--dd-ring); }
  /* a key presses down under the finger */
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:not([aria-selected="true"]):active { transform: translateY(2px); }

  /* ---- the screen's content: seven cards on white ---- */
  html body #hx.hx.hx.hx #hxPanel,
  html body #hx.hx.hx.hx #hxPanel.hw-on {
    grid-row: 3; grid-column: 1 / -1; min-width: 0;
    margin: 0; padding: 14px var(--dd-p) var(--dd-p); border: 0; border-radius: 0 0 calc(var(--dd-r) - var(--dd-bz)) calc(var(--dd-r) - var(--dd-bz));
    background: transparent; box-shadow: none;
  }
  html body #hx.hx.hx.hx #hxPanel[data-cur="all"] .hx-rail { height: auto; padding: 6px 6px 18px; margin: -6px -6px -18px; }
  html body #hx.hx.hx.hx .hx-track.is-doors { height: auto; gap: 8px; grid-auto-columns: calc((100cqw - 48.5px) / 7); }

  html body #hx.hx.hx.hx .hx-door {
    position: relative; height: auto; gap: 0; padding: 4px; border: 0; border-radius: var(--dd-rk);
    background: #fff; box-shadow: var(--dd-card); transition: transform .2s ease, box-shadow .2s ease;
  }
  html body #hx.hx.hx.hx .hx-door .hx-ph { flex: none; min-height: 0; margin: 0; aspect-ratio: 10 / 7; border-radius: var(--dd-rp); }
  html body #hx.hx.hx.hx .hx-door .hx-badge {
    left: 8px; bottom: 8px; width: 30px; height: 30px; border-radius: 9px; background: #fff; box-shadow: var(--dd-chip);
  }
  html body #hx.hx.hx.hx .hx-door .hx-badge svg { width: 17px; height: 17px; }
  html body #hx.hx.hx.hx .hx-door .hx-dv {
    position: relative; flex: 1 1 auto; display: block; height: auto; min-height: 0; margin: 0; padding: 10px 2px 7px 7px;
    border: 0; background: transparent; white-space: normal; text-wrap: balance;
    font-size: 13.5px; font-weight: 650; line-height: 18px; letter-spacing: -.01em; color: var(--dd-ink2);
  }
  html body #hx.hx.hx.hx .hx-door .hx-dv .hx-arw {
    position: static; display: inline-block; width: 12px; height: 12px; margin: 0 0 0 4px; padding: 0; vertical-align: -1px;
    border-radius: 0; background: none; box-shadow: none; color: var(--dd-slate); transform: none;
    transition: color .2s ease, transform .2s ease;
  }

  /* panel arrows (other tabs): small white keys */
  html body #hx.hx.hx.hx .hx-nav button { border: 0; background: #fff; color: var(--dd-ink); box-shadow: var(--dd-key); transform: translate(10px, -50%); }
  html body #hx.hx.hx.hx .hx-nav button + button { transform: translate(-10px, -50%); }

  /* other tabs: their cards become the same white cards on the screen */
  html body #hx.hx.hx.hx #hxPanel .hw-t { background: #fff; border-radius: var(--dd-rk); box-shadow: var(--dd-card); }
  html body #hx.hx.hx.hx #hxPanel .hw-t .hw-tx { border-top: 0; background: transparent; }
  html body #hx.hx.hx.hx #hxPanel .hw-t .hw-tx::before { background: transparent; box-shadow: none; }
  html body #hx.hx.hx.hx #hxPanel .hw-c { border-color: transparent; background: #fff; box-shadow: var(--dd-card); }
  html body #hx.hx.hx.hx #hxPanel .hw-more { background: #fff; color: var(--dd-ink); box-shadow: var(--dd-card); }
  html body #hx.hx.hx.hx #hxPanel .hw-end { background: #fff; box-shadow: 0 -6px 0 0 #fff, 0 22px 0 0 #fff; }
  html body #hx.hx.hx.hx #hxPanel .hw-end::before { background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 60%); }
  html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i { background: #fff !important; box-shadow: var(--dd-card) !important; }
}

/* hover (fine pointers): the same plate as the chosen key, faint; a card lifts */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:not([aria-selected="true"]):hover::before {
    background: rgba(255, 255, 255, .78); box-shadow: 0 0 0 1px rgba(var(--dd-sh), .06), 0 1px 2px rgba(var(--dd-sh), .05);
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:not([aria-selected="true"]):hover .hx-tt b { color: var(--dd-ink); }
  html body #hx.hx.hx.hx .hx-door:hover { transform: translateY(-2px); box-shadow: var(--dd-card-h); }
  html body #hx.hx.hx.hx .hx-door:hover .hx-dv { color: var(--dd-ink); }
  html body #hx.hx.hx.hx .hx-door:hover .hx-dv .hx-arw { color: var(--dd-ink); transform: translateX(2px); }
  html body #hx.hx.hx.hx #hxPanel .hw-t:hover { box-shadow: var(--dd-card-h); }
}
html body #hx.hx.hx.hx .hx-door:focus-visible { outline: 0; box-shadow: var(--dd-ring); }

/* other tabs, every width: links and arrows in ink/slate, no underlines */
html body #hx.hx.hx.hx #hxPanel .hw-tx b { text-decoration: none; }
html body #hx.hx.hx.hx #hxPanel .hw-tx::after { background: #4D5767; }
html body #hx.hx.hx.hx #hxPanel .hw-mg { color: var(--dd-ink); }
html body #hx.hx.hx.hx #hxPanel .hw-mono { background: var(--dd-bar); color: var(--dd-ink2); box-shadow: inset 0 0 0 1px rgba(var(--dd-sh), .06); }
/* the position bar reads as the device's own scroll indicator: a slate thumb in a pale track */
html body #hx.hx.hx.hx #hxPanel .mw-bar::before { background: #E9ECF1; box-shadow: none; }
html body #hx.hx.hx.hx #hxPanel .mw-bar i { background: #A3ACB9; box-shadow: none; border: 0; }

/* ==========================================================================
   WIDTHS
   ========================================================================== */
/* 1321–1439: a touch less inset so the cards keep their size */
@media (min-width: 1321px) and (max-width: 1439px) {
  html body #hx.hx.hx.hx { --dd-p: 14px; --dd-kin: 7px; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab { padding-inline: calc(var(--dd-kin) + 6px); }
  html body #hx.hx.hx.hx .hx-door .hx-dv { padding-inline: 5px 0; font-size: 13.5px; line-height: 17px; letter-spacing: -.015em; }
  html body #hx.hx.hx.hx .hx-door .hx-dv .hx-arw { width: 11px; height: 11px; margin-left: 3px; }
}
/* 1101–1320: the same device, a little tighter; captions on two shared lines */
@media (min-width: 1101px) and (max-width: 1320px) {
  html body #hx.hx.hx.hx { --dd-r: 40px; --dd-bz: 18px; --dd-p: 14px; --dd-kin: 6px; }
  /* equal columns, but a column never shrinks below its one-line title (1fr = minmax(auto, 1fr)) */
  html body #hx.hx.hx.hx .s4-tabs { grid-template-columns: repeat(8, 1fr); }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab { padding: 12px calc(var(--dd-kin) + 4px) 13px; }
  html body #hx.hx.hx.hx .s4-tabs .hx-ti { display: grid; margin-bottom: 8px; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tt small { font-size: 12.5px; line-height: 16.5px; }
  html body #hx.hx.hx.hx .hx-track.is-doors { gap: 8px; grid-auto-columns: calc((100cqw - 48.5px) / 7); }
  html body #hx.hx.hx.hx .hx-door .hx-ph { aspect-ratio: auto; height: 112px; }
}
/* tablets (761–1100): the same device, narrower; titles only (as live) in a compact 4×2 bar —
   icon beside title, so the bar stays lighter than the proof */
@media (min-width: 761px) and (max-width: 1100px) {
  html body #hx.hx.hx.hx { --dd-r: 34px; --dd-bz: 14px; --dd-p: 12px; --dd-kin: 5px; }
  html body #hx.hx.hx.hx .s4 { padding-bottom: 56px; --dd-floor: 42px; }
  html body #hx.hx.hx.hx .s4-field { padding-bottom: 30px; }
  html body #hx.hx.hx.hx .s4-card > .mw-head { grid-column: 1 / -1; padding: 12px var(--dd-p) 0; font-size: 17px; }
  html body #hx.hx.hx.hx .s4-card > .mw-why { display: none; }
  html body #hx.hx.hx.hx .s4-tabs {
    padding: 6px calc(var(--dd-p) - var(--dd-kin)) 8px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto; row-gap: 2px;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab {
    grid-row: 1; grid-template-rows: none; grid-template-columns: auto auto; justify-content: center; align-items: center;
    column-gap: 8px; padding: 10px calc(var(--dd-kin) + 8px);
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:nth-child(n+5) { grid-row: 2; }
  html body #hx.hx.hx.hx .s4-tabs .hx-ti { display: grid; grid-row: auto; width: 24px; height: 24px; margin: 0; }
  html body #hx.hx.hx.hx .s4-tabs .hx-ti svg { width: 22px; height: 22px; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tt b { grid-row: auto; align-self: center; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tt small { display: none; }
  html body #hx.hx.hx.hx #hxPanel, html body #hx.hx.hx.hx #hxPanel.hw-on { padding: 12px var(--dd-p) var(--dd-p); }
  html body #hx.hx.hx.hx .hx-track.is-doors { gap: 6px; grid-auto-columns: calc((100cqw - 36.5px) / 7); }
  html body #hx.hx.hx.hx .hx-door { padding: 3px; border-radius: 12px; }
  html body #hx.hx.hx.hx .hx-door .hx-ph { aspect-ratio: auto; height: 96px; border-radius: 9px; }
  html body #hx.hx.hx.hx .hx-door .hx-badge { left: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 8px; }
  html body #hx.hx.hx.hx .hx-door .hx-badge svg { width: 15px; height: 15px; }
}
/* small tablets (761–919) */
@media (min-width: 761px) and (max-width: 919px) {
  html body #hx.hx.hx.hx .s4-tabs .hx-tab { column-gap: 6px; padding-inline: calc(var(--dd-kin) + 4px); }
  html body #hx.hx.hx.hx .hx-door .hx-ph { height: 88px; }
}
/* captions where one line no longer holds them all (761–1365): one shared block per row.
   The arrow sits in the same bottom-right spot of every card (it can never strand on a line of its own),
   and the text measure (≤ 6.95em) makes every caption break the same way: "View all / landing pages". */
@media (min-width: 761px) and (max-width: 1365px) {
  html body #hx.hx.hx.hx .hx-door .hx-dv {
    min-height: calc(2 * 17px + 15px); max-width: none; padding: 8px max(20px, calc(100% - 5px - 6.95em)) 7px 5px;
    font-size: 13.5px; line-height: 17px; letter-spacing: -.015em; text-wrap: wrap;
  }
  html body #hx.hx.hx.hx .hx-door .hx-dv .hx-arw { position: absolute; right: 7px; bottom: 10px; width: 11px; height: 11px; margin: 0; }
}
/* below ~995 'landing pages' needs a third line: the shared block holds three */
@media (min-width: 761px) and (max-width: 994px) {
  html body #hx.hx.hx.hx .hx-door .hx-dv { min-height: calc(3 * 17px + 15px); }
}

/* ==========================================================================
   PHONES (760px and narrower) — the work becomes a PHONE inside the page
   ========================================================================== */
@media (max-width: 760px) {
  html body #hx.hx.hx.hx { --dd-r: 32px; --dd-bz: 8px; --dd-pm: 14px; --dd-sp: 14px; --dd-p: 8px; }
  html body #hx.hx.hx.hx .s4 { padding-bottom: 48px; --dd-floor: 34px; }
  html body #hx.hx.hx.hx .s4 {
    background:
      radial-gradient(ellipse 40% 20px at 50% calc(100% - var(--dd-floor)), rgba(var(--dd-sh), .10), rgba(var(--dd-sh), 0) 74%),
      linear-gradient(180deg, var(--dd-top) 0, var(--dd-top) 30%, var(--dd-pearl) 50%, var(--dd-pearl) 84%, #F8FAFC calc(100% - 22px), #FFFFFF calc(100% - 6px));
  }
  html body #hx.hx.hx.hx .s4-field { padding-bottom: 30px; }

  /* the Straddle field: white, a soft studio shadow; its white key seated in the studio (--field) */
  html body #hx.hx.hx.hx form#hxForm:not(.tr-open) {
    width: calc(100% + 2 * (18px - var(--dd-pm)));   /* the field shares the phone's edges (it is centred) */
    --as-sf: 0 0 0 1px rgba(var(--dd-sh), .07), 0 1px 2px rgba(var(--dd-sh), .05), 0 14px 30px -14px rgba(var(--dd-sh), .24);
    --as-ring: 0 0 0 2px rgba(18, 26, 38, .55);
    background: #fff;
  }

  /* THE PHONE — the padding is the metal bezel, the content box the screen */
  html body #hx.hx.hx.hx .s4-card {
    position: relative; margin: 0 var(--dd-pm); padding: var(--dd-bz); overflow: visible;
    border: 0; border-radius: var(--dd-r);
    background: linear-gradient(#fff, #fff) content-box, var(--dd-metal);
    box-shadow: var(--dd-body-sh);
  }
  /* two side buttons on the right edge of the body */
  html body #hx.hx.hx.hx .s4-card::before {
    content: ""; display: block; position: absolute; z-index: 0; pointer-events: none;
    top: 104px; right: -3px; left: auto; bottom: auto; width: 3px; height: 30px; margin: 0; border-radius: 0 2px 2px 0;
    background: #C3CAD4; box-shadow: 0 42px 0 0 #C3CAD4;
    transform: none; opacity: 1;
  }
  /* the screen's glass edge + a dark, flat punch-hole camera at its top centre */
  html body #hx.hx.hx.hx .s4-card::after {
    content: ""; display: block; position: absolute; z-index: 3; pointer-events: none; inset: 0;
    box-sizing: border-box; border: var(--dd-bz) solid transparent; border-radius: var(--dd-r);
    background: radial-gradient(circle at 50% calc(var(--dd-bz) + 15px), #161C25 0 3.4px, #2E3641 3.9px 4.3px, rgba(46, 54, 65, 0) 4.9px) border-box no-repeat;
    box-shadow: var(--dd-glass);
    transform: none; opacity: 1; width: auto; height: auto;
  }
  /* the app's title block, with air below the camera */
  html body #hx.hx.hx.hx .mw-eye { margin-top: 34px; padding: 0 var(--dd-sp); color: #4D5767; }
  html body #hx.hx.hx.hx .mw-head { color: var(--dd-ink); padding-inline: var(--dd-sp); }
  html body #hx.hx.hx.hx .mw-head .mw-dot { color: var(--dd-ink); }
  html body #hx.hx.hx.hx .mw-why { color: #4D5767; padding: 0 var(--dd-sp) 14px; }

  /* the toolbar zone: 4×2 items on the pearl tint, inset by the screen padding; the chosen one a raised white key */
  html body #hx.hx.hx.hx .s4-tabs {
    margin: 0; padding: 6px var(--dd-p); background: var(--dd-bar); border: 0; border-radius: 0; box-shadow: none;
    grid-template-rows: repeat(6, auto); row-gap: 0; column-gap: 0;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab {
    position: relative; isolation: isolate; z-index: 0;
    grid-row: span 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr);
    justify-items: center; align-content: start; row-gap: 0; padding: 11px 2px 12px;
    background: transparent; box-shadow: none; border: 0; border-radius: 12px; transform: none;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:nth-child(n+5) { grid-row: 4 / span 3; margin-top: 0; }
  html body #hx.hx.hx.hx .s4-tabs .mw-t { display: contents; }
  html body #hx.hx.hx.hx .s4-tabs .mw-i { grid-row: 1; margin-bottom: 6px; }
  html body #hx.hx.hx.hx .s4-tabs .mw-n { grid-row: 2; align-self: end; max-width: 100%; color: var(--dd-ink2); }
  html body #hx.hx.hx.hx .s4-tabs .mw-c { grid-row: 3; align-self: start; max-width: 100%; margin-top: 2px; color: var(--dd-slate); }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab::after { content: none; display: none; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab::before {
    content: ""; display: block; position: absolute; z-index: -1; inset: 0; border-radius: 12px;
    background: transparent; box-shadow: none; transition: background-color .2s ease, box-shadow .2s ease;
  }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] { transform: none; background: transparent; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"]::before { inset: 0; background: #fff; box-shadow: var(--dd-key); }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"]::after { content: none; display: none; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] .mw-n { color: var(--dd-ink); font-weight: 800; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab[aria-selected="true"] .mw-c { color: #414B5A; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab:focus-visible { outline: 0; box-shadow: var(--dd-ring); }

  /* the screen's content: the live 2-up swipe rail, clipped by the screen */
  html body #hx.hx.hx.hx #hxPanel,
  html body #hx.hx.hx.hx #hxPanel.hw-on {
    margin: 0; padding: 14px 0 14px calc(var(--dd-p) + 4px); border: 0; background: transparent; box-shadow: none;
    border-radius: 0 0 calc(var(--dd-r) - var(--dd-bz)) calc(var(--dd-r) - var(--dd-bz)); overflow: hidden;
  }
  html body #hx.hx.hx.hx #hxPanel[data-cur="all"] .hx-rail { height: auto; padding: 4px 4px 14px; margin: -4px -4px -14px; }
  html body #hx.hx.hx.hx .hx-track.is-doors { height: auto; }
  html body #hx.hx.hx.hx .hx-door {
    position: relative; height: auto; gap: 0; padding: 4px; border: 0; border-radius: var(--dd-rk);
    background: #fff; box-shadow: var(--dd-card);
  }
  html body #hx.hx.hx.hx .hx-door .hx-ph { flex: none; min-height: 0; max-height: none; height: 104px; margin: 0; aspect-ratio: auto; border-radius: var(--dd-rp); }
  html body #hx.hx.hx.hx .hx-door .hx-badge { left: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 8px; background: #fff; box-shadow: var(--dd-chip); }
  html body #hx.hx.hx.hx .hx-door .hx-dv {
    position: relative; display: block; flex: 1 1 auto; height: auto; min-height: 0; margin: 0; padding: 9px 6px 6px 7px;
    border: 0; background: transparent; white-space: normal; text-wrap: balance;
    font-size: 13px; font-weight: 650; line-height: 17px; letter-spacing: -.01em; color: var(--dd-ink2);
  }
  html body #hx.hx.hx.hx .hx-door .hx-dv .hx-arw {
    position: static; display: inline-block; width: 12px; height: 12px; margin: 0 0 0 4px; padding: 0; vertical-align: -1px;
    border-radius: 0; background: none; box-shadow: none; color: var(--dd-slate); transform: none;
  }
  html body #hx.hx.hx.hx #hxPanel .hw-t { background: #fff; border-radius: var(--dd-rk); box-shadow: var(--dd-card); }
  html body #hx.hx.hx.hx #hxPanel .hw-t .hw-tx { border-top: 0; background: transparent; }
  html body #hx.hx.hx.hx #hxPanel .hw-t .hw-tx::before { background: transparent; box-shadow: none; }
  html body #hx.hx.hx.hx #hxPanel .hw-c { border-color: transparent; background: #fff; box-shadow: var(--dd-card); }
  html body #hx.hx.hx.hx #hxPanel .hw-end { background: #fff; }
  html body #hx.hx.hx.hx #hxPanel .hw-more { background: #fff; color: var(--dd-ink); box-shadow: var(--dd-card); }
  html body #hx#hx#hx#hx#hx#hx#hx#hx#hx#hx .gah .mp-row > .mp-i { background: #fff !important; box-shadow: var(--dd-card) !important; }
}
/* narrow phones: the live column recipe needs the full width, so the phone sits closer to the page edge */
@media (max-width: 389px) {
  html body #hx.hx.hx.hx { --dd-sp: 12px; --dd-pm: 12px; }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab { padding: 10px 1px 11px; }
}
@media (max-width: 350px) {
  html body #hx.hx.hx.hx { --dd-pm: 6px; --dd-bz: 6px; --dd-r: 28px; --dd-sp: 10px; --dd-p: 6px; }
  html body #hx.hx.hx.hx .s4-card::before { top: 92px; height: 26px; box-shadow: 0 36px 0 0 #C3CAD4; }
  /* the live ≤350 recipe re-balanced so 'Brands We've' and 'Lead-Focused' keep their own line */
  html body #hx.hx.hx.hx .s4-tabs { grid-template-columns: 73.5px 80.5px minmax(0, 1fr) minmax(0, 1fr); }
  html body #hx.hx.hx.hx .s4-tabs .hx-tab { padding-inline: 0; }
}