[data-r~="lang-label"] { display: none; }
[data-r~="h1-space"] { display: none; }
[data-r~="burger"] { display: none; }

/* Responsive layer for the Banify site.
   Media queries cannot be expressed inline, so the layout hooks live here and
   are attached to elements as data-r="..." attributes. Desktop rendering is
   untouched: every rule below sits inside a max-width query. */

/* ---------- Tablet and below ---------- */
@media (max-width: 1100px) {
  /* logo margin, nav gap and inset hold until they collide (see 1000px) */
  [data-r~="hero"] { padding-left: 48px !important; }
}

@media (max-width: 960px) {
  /* Every multi-column grid becomes a single column */
  [data-r~="grid"] { grid-template-columns: minmax(0, 1fr) !important; }
  [data-r~="grid"] > * { min-width: 0; }
  /* Single column: the contents rail sits above the text; pinned it would
     slide over the policy as you read. */
  aside[data-r~="toc"] { position: static !important; max-height: none !important; overflow: visible !important; }
  /* Alternating feature sections swap sides with inline order on desktop.
     Once the grid is a single column that order would put the demo above the
     heading that introduces it, so reading order is restored here. */
  [data-r~="flip-text"], [data-r~="flip-demo"] { order: 0 !important; }
  /* Featured apps alternate image side on desktop (some via order, some via
     source order). Stacked, every app reads the same: text, then image. */
  [data-r~="stack-media"] { order: 2 !important; }
  /* Rows that relied on side-by-side space wrap instead */
  [data-r~="row"] { flex-wrap: wrap !important; }
  /* Fixed-height media blocks become fluid */
  [data-r~="media"] { height: auto !important; min-height: 0 !important; aspect-ratio: 16 / 10; }
  [data-r~="frame"] { height: clamp(300px, 62vw, 560px) !important; }
}

/* ---------- Header: burger + full-screen panel (Asmodee pattern) ---------- */
/* Nav gap scales with the room available, so it never wraps and never
   collapses further than it has to. 46px authored inline is the ceiling. */
@media (min-width: 861px){
  header[data-menu] [data-r~="nav"]{ gap: clamp(22px, calc(4.6vw - 4px), 46px) !important; }
}

@media (max-width: 1000px) {
  [data-r~="logo"] { margin-left: 0 !important; }
  [data-r~="nav"] { margin-inline-end: 0 !important; }
}

@media (max-width: 860px) {
  /* Black strip: Language on the left, Contact us on the right */
  [data-r~="hdr-strip"] {
    height: auto !important;
    min-height: 44px;
    padding: 6px 20px !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: #101010;
    color: #fff;
  }
  [data-r~="hdr-tag"], [data-r~="hdr-mid"] { display: none !important; }
  [data-r~="hdr-right"] { width: 100%; justify-content: space-between; gap: 12px !important; }
  [data-r~="hdr-right"] > label { order: -1; }
  [data-r~="hdr-div"] { display: none !important; }
  [data-r~="lang-icon"] { display: none !important; }
  [data-r~="lang-label"] { display: inline; font-weight: 700; color: #fff; }
  [data-r~="hdr-strip"] label, [data-r~="hdr-strip"] select { color: #fff !important; }
  [data-r~="hdr-strip"] a { color: #fff !important; text-decoration: underline; min-height: 44px; display: inline-flex; align-items: center; }

  /* backdrop-filter would trap the fixed panel inside the header box */
  [data-menu] { backdrop-filter: none !important; }

  /* White bar: logo left, burger right */
  [data-r~="hdr-main"] {
    height: 68px !important;
    padding: 0 16px 0 20px !important;
    gap: 12px !important;
  }
  [data-r~="logo"] { margin-left: 0 !important; }
  [data-r~="logo"] img { height: 44px !important; }
  [data-r~="burger"] { display: inline-flex !important; position: relative; z-index: 62; }

  /* The nav becomes the yellow panel */
  [data-r~="nav"] {
    position: fixed !important;
    inset: 44px 0 0 0;
    z-index: 60;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 76px 20px 40px !important;
    background: #FFC20E !important;
    overflow-y: auto;
    font-size: 26px !important;
  }
  [data-menu="open"] [data-r~="nav"] { display: flex !important; }
  [data-menu="open"] [data-r~="burger"] { position: fixed; top: 52px; inset-inline-end: 14px; color: #101010; }

  [data-r~="nav"] > a {
    padding: 22px 0 !important;
    border-bottom: 1px solid rgba(16, 16, 16, .28) !important;
    border-top: 0 !important;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: #101010 !important;
    min-height: 44px;
  }
  [data-r~="nav"] > a:first-child { border-top: 1px solid rgba(16, 16, 16, .28) !important; }

}

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  /* Section gutters tighten */
  [data-r~="sec"] { padding-left: 20px !important; padding-right: 20px !important; }
  [data-r~="hero"] { padding: 32px 20px 0 20px !important; }

  /* The slider headline scales to the device instead of holding 48.66px */
  [data-r~="h1"] {
    font-size: clamp(28px, 8.4vw, 40px) !important;
    line-height: 1.05 !important;
    letter-spacing: -0.02em !important;
    max-width: none !important;
  }
  /* Oversized display type gets a sane phone ceiling */
  [data-r~="display"] { font-size: clamp(30px, 9vw, 46px) !important; max-width: none !important; }

  /* Every interactive control reaches the 44px minimum */
  [data-r~="tap"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
  }
  /* Links that sit inside running text stay inline */
  p [data-r~="tap"], li [data-r~="tap"], span [data-r~="tap"], label [data-r~="tap"] {
    min-height: 0;
    display: inline;
  }
  /* Pill buttons keep their generous height */
  [data-r~="pill"] { min-height: 48px; }


  /* Long measures collapse to the available width */
  [data-r~="sec"] p { max-width: 100% !important; }

  /* The vertical slide counter sits in the 26px gutter, which the phone
     gutter no longer leaves room for; the top progress bar still shows it. */
  [data-r~="hero-count"] { display: none !important; }
  /* Floating captions overlap the corner of their media box — fine with
     the room a desktop-height image has, but on a phone the image is
     short (16/10 aspect ratio below) and the badge still ends up
     covering most of it even stacked. Just hide it on small screens. */
  [data-r~="badge"] { display: none !important; }
  /* About: "We are / word / badge" holds one row by scaling down */
  [data-r~="words-row"] > [data-words-bubble] { font-size: 20px !important; padding: 9px 13px 11px !important; margin-inline-end: -18px !important; margin-block-end: 30px !important; }
  [data-r~="words-word"] { font-size: clamp(40px, 12vw, 64px) !important; }
  /* Data tables stack: each row becomes a block, each cell carries its
     column name from data-label. */
  [data-r~="tbl-head"] { display: none !important; }
  [data-r~="tbl-row"] { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
  [data-r~="tbl-row"] > * { border-inline-start: 0 !important; overflow-wrap: anywhere; min-width: 0; }
  [data-r~="tbl-row"] > [data-label]::before { content: attr(data-label); display: block; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(16,16,16,.72); margin-bottom: 2px; }

  /* Trim the tall hero bottom padding on small screens */
  [data-r~="hero-cta"] { padding-bottom: 64px !important; }
}

@media (max-width: 480px) {
  [data-r~="nav"] { font-size: 15px !important; gap: 4px 14px !important; }
  [data-r~="logo"] img { height: 44px !important; }
  [data-r~="hdr-strip"] { font-size: 14px !important; }
}

/* ---------- Page-specific adjustments ---------- */

/* ---- Testimonial arc wheel -------------------------------------------
   Cards sit on one circle: a shared transform-origin below them, and only
   rotate() differs per card. Reach is R·sin(15°), the rotated half-width is
   (w/2)cos15 + (h/2)sin15, and the arrows live in the gap between the centre
   and side cards — so card size, origin distance, slab size AND arrow offset
   are one interdependent set. Each tier below is a solved set; changing any
   single value on its own either buries an arrow, overlaps the slab, or
   clips the outer corners.
     authored (>1220px): 272x376 @1753 -> reach 405, free span 74, 40px arrow at +-188
   Slab margin is NOT a constant: the clip-path insets up to 3% of the slab
   box, so a bigger slab needs a bigger margin to keep the same visible
   thickness of torn black. The frame is now deliberately heavy: a 324 box
   at a 26px margin shows 16.3px at the worst vertex. Margin scales with the
   card, and its ceiling is the arrow: slab half-width must stay under the
   arrow's inner edge (offset - arrow width).
*/
[data-r~="test-row"] { min-height: 490px !important; }

/* 248x342 @1601 -> reach 370, outer 534, free span 68, 40px arrow at +-172.
   Holds the previous full-size arc for widths below the 1223px the authored
   272x376 needs, so nothing shrinks. */
@media (max-width: 1220px) {
  [data-r~="test-card"] { width: 248px !important; height: 342px !important; margin: -171px 0 0 -124px !important; transform-origin: 50% 1601px !important; }
  [data-r~="test-slab"] { width: 296px !important; height: 390px !important; margin: -195px 0 0 -148px !important; }
  [data-r~="test-arrow"]:first-of-type { inset-inline-start: calc(50% - 192px) !important; }
  [data-r~="test-arrow"]:last-of-type { inset-inline-end: calc(50% - 192px) !important; }
  [data-r~="test-row"] { min-height: 420px !important; }
}

/* 224x308 @1506 -> reach 350, outer 498, free span 78, 40px arrow at +-163.
   The authored 248x342 needs a 1118px document; this holds the previous
   full-size arc for the widths just below that, so nothing shrinks. */
@media (max-width: 1120px) {
  [data-r~="test-card"] { width: 224px !important; height: 308px !important; margin: -154px 0 0 -112px !important; transform-origin: 50% 1506px !important; }
  [data-r~="test-slab"] { width: 260px !important; height: 344px !important; margin: -172px 0 0 -130px !important; }
  [data-r~="test-arrow"] { width: 44px !important; height: 44px !important; margin-top: -22px !important; }
  [data-r~="test-arrow"]:first-of-type { inset-inline-start: calc(50% - 183px) !important; }
  [data-r~="test-arrow"]:last-of-type { inset-inline-end: calc(50% - 183px) !important; }
  [data-r~="test-row"] { min-height: 390px !important; }
}

/* 200x276 @1297 -> reach 300, outer 432, free span 56, 40px arrow at +-140.
   Sized to the widest card that still clears a 909px document at this tier.
   Slab keeps the desktop tier's 12px margin: the clip-path insets up to 3%,
   so a thinner margin lets the torn edge vanish behind the card entirely.
   56px is free between slab half-width (112) and card near edge (167.7),
   which fits the same 40px arrow as every other tier. */
@media (max-width: 1060px) {
  [data-r~="test-card"] { width: 200px !important; height: 276px !important; margin: -138px 0 0 -100px !important; transform-origin: 50% 1297px !important; }
  [data-r~="test-slab"] { width: 232px !important; height: 308px !important; margin: -154px 0 0 -116px !important; }
  [data-r~="test-arrow"] { width: 40px !important; height: 40px !important; margin-top: -20px !important; }
  [data-r~="test-arrow"]:first-of-type { inset-inline-start: calc(50% - 160px) !important; }
  [data-r~="test-arrow"]:last-of-type { inset-inline-end: calc(50% - 160px) !important; }
  [data-r~="test-row"] { min-height: 350px !important; }
}

/* Below this the three-card arc cannot fit without clipping, so the
   composition changes rather than shrinking: the centre card alone, back at
   full size. The authored arrow offset (+-172) clears the 124px slab and
   still fits a 375px viewport, so it needs no override here. */
@media (max-width: 890px) {
  [data-r~="test-card"][data-mid="false"] { display: none !important; }
  [data-r~="test-card"] { width: 224px !important; height: 308px !important; margin: -154px 0 0 -112px !important; transform-origin: 50% 1506px !important; }
  [data-r~="test-slab"] { width: 260px !important; height: 344px !important; margin: -172px 0 0 -130px !important; }
  [data-r~="test-arrow"] { width: 44px !important; height: 44px !important; margin-top: -22px !important; }
  [data-r~="test-arrow"]:first-of-type { inset-inline-start: calc(50% - 176px) !important; }
  [data-r~="test-arrow"]:last-of-type { inset-inline-end: calc(50% - 176px) !important; }
  [data-r~="test-row"] { min-height: 380px !important; }
}

/* At 320px the row is only 256px wide, so the 890px tier's +-172 arrow
   offset lands off-screen and overflow:hidden shaves each circle. Shrink
   the whole single-card group so the arrows come back inside. */
@media (max-width: 344px) {
  [data-r~="test-card"] { width: 176px !important; height: 242px !important; margin: -121px 0 0 -88px !important; }
  [data-r~="test-slab"] { width: 204px !important; height: 270px !important; margin: -135px 0 0 -102px !important; }
  [data-r~="test-arrow"] { width: 36px !important; height: 36px !important; margin-top: -18px !important; }
  [data-r~="test-arrow"]:first-of-type { inset-inline-start: calc(50% - 141px) !important; }
  [data-r~="test-arrow"]:last-of-type { inset-inline-end: calc(50% - 141px) !important; }
  [data-r~="test-row"] { min-height: 300px !important; }
}

/* Drifting Banify marks — decoration only. Hold them still when the visitor
   has asked for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  [data-px] { transform: none !important; }
}

/* ---- Condensed header on scroll ---------------------------------------
   header-scroll.js sets data-scrolled on header[data-menu] past 60px.
   Authored state: 110px bar, 86px wordmark. Condensed: 82px / 62px.
   These rules are the whole effect — without them the script still sets the
   attribute but nothing changes, so do not drop them when editing this file. */
header[data-menu] [data-r~="hdr-main"],
header[data-menu] [data-r~="logo"] img,
header[data-menu] [data-r~="hdr-strip"] {
  transition: height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s linear 0s;
}
header[data-menu][data-scrolled] [data-r~="hdr-main"] { height: 82px !important; }
header[data-menu][data-scrolled] [data-r~="logo"] img { height: 62px !important; }
/* Asmodee hides the utility strip entirely once condensed — collapse its
   height and fade it rather than display:none, so it animates both ways. */
header[data-menu] [data-r~="hdr-strip"] { overflow: hidden; }
header[data-menu][data-scrolled] [data-r~="hdr-strip"] {
  height: 0 !important;
  opacity: 0;
  /* a 0-height box with overflow:hidden still leaves its link and language
     select in the tab order, focusable with no visible focus ring anywhere
     on screen. visibility removes the whole subtree from it. */
  visibility: hidden;
  transition: height .28s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s linear .28s;
  /* the ≤860px block props this box open with min-height and padding, and
     its links carry a 44px tap target — height alone will not collapse it */
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
header[data-menu][data-scrolled] [data-r~="hdr-strip"] a,
header[data-menu][data-scrolled] [data-r~="hdr-strip"] label,
header[data-menu][data-scrolled] [data-r~="hdr-strip"] select {
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* the strip's black wrapper carries a 1px border that would survive the
   collapse as a hairline above the white bar */
header[data-menu] > div:first-child { transition: border-bottom-width .28s cubic-bezier(.4,0,.2,1); }
header[data-menu][data-scrolled] > div:first-child { border-bottom-width: 0 !important; }
header[data-menu][data-scrolled] { box-shadow: 0 2px 14px rgba(16,16,16,.1); }

@media (prefers-reduced-motion: reduce) {
  header[data-menu] [data-r~="hdr-main"],
  header[data-menu] [data-r~="logo"] img,
  header[data-menu] [data-r~="hdr-strip"] { transition: none; }
  header[data-menu][data-scrolled] [data-r~="hdr-strip"] { display: none; }
}

/* ---- Sticky contents rail ---------------------------------------------
   The policy pages pin the TOC for the whole document, so a long rail
   (the referral policy runs 37 items ≈ 1380px) would pin taller than the
   viewport with its lower entries permanently unreachable. Cap it to the
   space below the sticky offset and let it scroll inside itself; the
   shorter 11–14 item rails sit under the cap, so auto never engages. */
aside[data-r~="toc"] {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Legal pages: the English-precedence note only makes sense on a translation. */
[data-r~="legal-note"] { display: none; }
html[lang]:not([lang="en"]):not([lang^="en-"]) [data-r~="legal-note"] { display: block; }

/* ---- Burger-menu widths: About opening + footer, centred (Asmodee pattern) ---- */
@media (max-width: 860px) {
  /* About hero: one-line "We are banify" over the photo grid, lede below.
     The drifting marks and the "Built for merchants" tag are desktop-only. */
  [data-r~="deco-a"], [data-r~="deco-b"], [data-r~="merch-tag"] { display: none !important; }
  [data-r~="about-hero"] { min-height: 420px !important; padding: 20px 20px 84px !important; }
  [data-r~="about-h1"] br { display: none; }
  [data-r~="about-h1"] [data-r~="h1-space"] { display: inline; }
  [data-r~="display"][data-r~="about-h1"] { font-size: clamp(38px, 13.4vw, 60px) !important; line-height: 1 !important; letter-spacing: -.035em !important; white-space: nowrap; }
  [data-r~="about-lede"] { margin: 18px auto 0 !important; font-size: 17px !important; line-height: 1.35 !important; font-weight: 600 !important; }

  /* Footer: logo centred on the stripes, everything below centred */
  footer [data-r~="foot-logo"] { left: 50% !important; right: auto !important; inset-inline-start: auto; transform: translateX(-50%) rotate(-3deg) !important; }
  footer [data-r~="grid"] { text-align: center; justify-items: center; gap: 32px !important; }
  footer [data-r~="grid"] p { margin-inline: auto !important; }
  footer [data-r~="grid"] div[style*="display:flex"] { justify-content: center; }
  footer ul { justify-items: center; }
  footer [data-r~="foot-bottom"] { flex-direction: column !important; justify-content: center !important; gap: 6px !important; text-align: center; }
}