/* bentokai.com home page (see src/home.php).
   Design option 5a of the Claude Design project, with option 1a's module grid.

   Two palettes on purpose:
   - The mosaic band (.bk-stage-wrap) is FIXED dark in every theme. It is an
     art-directed picture of the product and the box colours carry meaning
     (blue is always "the active thing"), so it does not read the shell's
     light/dark tokens and must not be "fixed" to.
   - Everything below it (.bk-sec) uses the shell's own tokens from
     public/index.php, so it follows the auto/light/dark switcher. */

/* Inter, self-hosted, split into a Latin subset plus the untouched upstream
   file behind the complement range: the common case never downloads the
   scripts it will not draw. Ranges copied verbatim from app.css; regenerate
   with scripts/build_font_subsets.py, never by hand (the two ranges must not
   overlap, or the shared codepoints fall to the 344 KB file). */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter/InterVariable-latin.woff2') format('woff2');
  unicode-range: U+0000-017F,U+0192,U+01FA-01FF,U+0218-021B,U+0237,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2190-2193,U+2212,U+2215,U+2318,U+2325,U+21E7,U+FEFF,U+FFFD,U+2265;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('/assets/fonts/inter/InterVariable.woff2') format('woff2');
  unicode-range: U+0180-0191,U+0193-01C3,U+01C5-01F9,U+0200-0217,U+021C-0236,U+0238-0254,U+0256-027B,U+027E-0284,U+0286-0290,U+0292-02A4,U+02A6-02BA,U+02BD-02C5,U+02C7-02D9,U+02DB,U+02DD-0303,U+0306-0307,U+0309-030A,U+030C,U+030F,U+0313,U+0315,U+031B,U+0323,U+0326-0328,U+032C,U+0337-0338,U+0342-0343,U+0346-036F,U+0374-0376,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03D7,U+03DC-03DD,U+03F0-03F6,U+03F9-03FA,U+03FC-0479,U+0480-049D,U+04A0-04FF,U+052F,U+0E3F,U+2070-2071,U+2074-208E,U+2090-209C,U+20A0-20AB,U+20AD-20AF,U+20B1-20B5,U+20B8-20BA,U+20BC-20C0,U+2100-2101,U+2103,U+2105-2106,U+2109,U+2113,U+2116-2117,U+211E-2121,U+2126,U+212A-212B,U+212E,U+2132,U+213B,U+214D,U+2150-217F,U+2194-2199,U+21A9-21AA,U+21B0-21B1,U+21BA-21BB,U+21D0,U+21D2,U+21D4,U+2202,U+2205-2206,U+220F,U+2211,U+221A,U+221E,U+222B,U+2236,U+2248,U+2260,U+2264,U+2295-2298,U+2713,U+2717,U+2764;
}

/* Clash Grotesk is tracked OPEN on this site: +.015em, the same value the shell
   uses for its h1 and .foot-head. The design file drew every Clash line with the
   tight negative tracking a display face usually gets (-.02em to -.03em), which
   left the home as the one page contradicting the rest of bentokai.com. This
   widens each headline by roughly .045em per character, so re-run the one-line
   check on the rotating phrases after touching it: they sit in a window with
   overflow hidden and a phrase that wraps is silently truncated. */

/* ---------------------------------------------------------------- layout */

.bk-home main.wrap { max-width: none; padding: 0; }
/* The shell styles prose links for the legal pages: underline, link colour, a
   tint on hover. On the home every link is a control, so each states its own
   colours at a specificity that clears `.wrap a:hover`. Do not do this with a
   blanket `background: none` on `.wrap a` — that also erases the white primary
   button, leaving blue text on the blue hero. */
.bk-home main.wrap a { text-decoration: none; }
.bk-home main.wrap a.bk-btn-white,
.bk-home main.wrap a.bk-btn-white:hover { background: #fff; color: #0073FF; }
.bk-home main.wrap a.bk-btn-ghost { background: none; color: #fff; }
.bk-home main.wrap a.bk-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

.bk-stage-wrap { background: #0B1220; }
/* The tray stops growing at 1600 and centres. Full bleed, every box kept scaling
   with the viewport, so on a large monitor the whole thing inflated and no ceiling
   on the hero alone could hold: capping the hero while its neighbours kept growing
   just re-created the inversion (past ~1900 a 460-capped hero is the NARROWEST box
   on the page). Bounding the tray fixes every proportion at once, and 1600 is close
   to the 1380 canvas the design was drawn on. `.bk-sec` keeps its own narrower 1380
   measure: both are centred, so the inset stays symmetric. */
.bk-stage { display: flex; flex-direction: column; gap: 8px; padding: 8px;
  max-width: 1600px; margin: 0 auto; }
.bk-row-top, .bk-row-bot { display: flex; gap: 8px; height: 388px; }

/* The boxes size by flex-grow, so widening one narrows its neighbours instead
   of pushing the row wider. The content is absolutely positioned so a box
   that is mid-transition never changes the row's height. */
.bk-box {
  position: relative; min-width: 0; border-radius: 18px; overflow: hidden;
  cursor: grab; outline: none;
  transition: flex-grow .45s cubic-bezier(.2,.85,.2,1), box-shadow .3s ease, opacity .2s ease;
}
.bk-box-in {
  position: absolute; inset: 0; padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
/* The hero is FIXED: a constant share of the row, and it never moves. `flex: 4 1 0`
   made it a share of what was LEFT once the boxes had grown, so hovering
   Facturación shrank it from 502 to 353 at 1440. Taking it out of the growth
   competition (no grow, no shrink, a percentage basis) means a hovered box now
   steals width from its sibling box only, and the headline panel is never the
   thing that gives.

   35.3%, not 33.3%: box-sizing is border-box and the boxes' basis is 0, so under
   the old 4:5:3 the hero's own 28px padding was a floor it contributed BEFORE any
   growth. The percentage tracks the widths that produced closely at the sizes that
   matter and drifts a little at the bottom, where the gaps are a bigger share of
   the row: 559 vs 560 at 1920, 497 vs 502 at 1440, 441 vs 448 at 1280, 350 vs 363
   at 1024, and 340 at 981 where min-width takes over.

   It still scales with the tray, which is the point of the earlier cap work: the
   hero must not stay pinned while its neighbours grow, or past ~1700 it becomes
   the narrowest box on the page. min-width and max-width stay as guards; neither
   binds in the row layout at any width the tray allows. */
.bk-hero {
  container-type: inline-size;
  flex: 0 0 35.3%; min-width: 340px; max-width: 720px;
  box-sizing: border-box; border-radius: 18px;
  background: #0073FF; color: #fff; padding: 28px;
  display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
}

.bk-b1 { flex: 5 1 0; }
.bk-b2 { flex: 3 1 0; }
.bk-b3, .bk-b4, .bk-b5, .bk-b6 { flex: 1 1 0; }

.bk-box:hover, .bk-box:focus-visible {
  box-shadow: 0 20px 40px -22px rgba(0,0,0,.75);
}
.bk-box:focus-visible { outline: 2px solid #7CBBFF; outline-offset: -2px; }
.bk-b1:hover, .bk-b1:focus-visible { flex-grow: 11; }
.bk-b2:hover, .bk-b2:focus-visible { flex-grow: 9; }
.bk-b3:hover, .bk-b3:focus-visible, .bk-b4:hover, .bk-b4:focus-visible,
.bk-b5:hover, .bk-b5:focus-visible, .bk-b6:hover, .bk-b6:focus-visible { flex-grow: 3; }

/* Drag feedback. .is-dragging is the box being carried, .is-over its target. */
.bk-box.is-dragging { opacity: .4; cursor: grabbing; }
.bk-box.is-over { box-shadow: 0 0 0 3px #0073FF inset, 0 20px 40px -22px rgba(0,0,0,.75); }

/* The drag affordance: a 2x3 dot grid, drawn as one repeating gradient. */
.bk-grip {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 9px; height: 15px; opacity: .42; pointer-events: none;
  background-image: radial-gradient(circle at 1.5px 1.5px, #94A3B8 1.5px, transparent 1.6px);
  background-size: 6px 6px;
}

/* --------------------------------------------------------------- palettes */

.bk-b1, .bk-b3, .bk-b5 { background: #fff; }
.bk-b2 { background: #E8F4FF; }
.bk-b4 { background: #141C38; }
.bk-b6 { background: #D2EAFF; }

.bk-b1 .bk-box-in, .bk-b3 .bk-box-in, .bk-b5 .bk-box-in { color: #0B1220; }
.bk-b2 .bk-box-in, .bk-b6 .bk-box-in { color: #0B2438; }
.bk-b4 .bk-box-in { color: #fff; }

/* ------------------------------------------------------------------- hero */

.bk-eyebrow {
  margin: 0; font: 600 11px/1 Inter, system-ui, sans-serif;
  color: #B0D9FF; letter-spacing: .18em; text-transform: uppercase;
}
/* The headline sizes off the HERO, not the viewport. Its box is sized by the flex
   algorithm, so between 980 and 1240 the hero sits at its 340px min-width while a
   viewport-based font-size stayed at 38px — the headline then wrapped, and inside
   the rotator's overflow:hidden window that means silently truncated. Opening the
   tracking to .015em is what exposed it. A container query ties the two together,
   so no breakpoint can put a too-big headline in a too-small box again.
   The plain font-size above it is the fallback for a browser without cqw. */
.bk-h1 {
  font-family: 'Clash Grotesk', Inter, system-ui, sans-serif;
  font-size: 38px;
  font-size: clamp(26px, 10cqw, 44px);
  font-weight: 600; line-height: 1.02; letter-spacing: .015em;
  margin: 0; color: #fff;
}
/* The headline's second line cycles through three phrases, lifted from design
   option 1c: a one-line window with overflow hidden, scrolled by whole thirds.
   Sized in em so it follows the h1 through every breakpoint rather than needing
   a pixel height per media query. The window is a little taller than the h1's own
   1.02 line-height so descenders are not clipped (French 'jongler', Catalan
   'tancament'), which is why the design used a 60px box for a 54px face.
   #D2EAFF, not 1c's #BADFFF: on this blue that is 3.46:1 against 3.08:1, and
   large-text contrast has no margin to spare at 3.0. */
.bk-rot { display: block; overflow: hidden; height: 1.16em; }
.bk-rot-in { display: block; animation: bkCycle 9s cubic-bezier(.7,0,.3,1) infinite; }
.bk-rot-in > span { display: block; height: 1.16em; line-height: 1.16; color: #D2EAFF; }

.bk-lede {
  font: 400 15.5px/1.55 Inter, system-ui, sans-serif; letter-spacing: -.011em;
  color: #D2EAFF; margin: 14px 0 0; text-wrap: pretty;
}
.bk-hero-cta { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.bk-btn {
  padding: 13px 20px; border-radius: 11px; text-decoration: none;
  font: 600 14.5px/1 Inter, system-ui, sans-serif; letter-spacing: -.012em;
  transition: transform .2s ease, background .2s ease;
}
.bk-btn-white { background: #fff; color: #0073FF; }
.bk-btn-white:hover { transform: translateY(-2px); color: #0073FF; }
.bk-btn-ghost { border: 1px solid rgba(255,255,255,.45); color: #fff; font-weight: 500; }
.bk-btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ------------------------------------------------------- shared box parts */

.bk-num {
  margin: 0; font: 600 10.5px/1 Inter, system-ui, sans-serif;
  color: #98A1B1; letter-spacing: .16em; text-transform: uppercase;
}
.bk-b2 .bk-num, .bk-b6 .bk-num { color: #4E86B0; }
.bk-b4 .bk-num { color: #7E8AA0; }
.bk-title {
  font-family: 'Clash Grotesk', Inter, system-ui, sans-serif;
  font-size: 24px; font-weight: 600; line-height: 1.1; letter-spacing: .015em;
  margin: 0; color: inherit;
}
.bk-foot, .bk-hint {
  margin: auto 0 0; font: 500 12px/1.4 Inter, system-ui, sans-serif;
  color: #98A1B1; text-wrap: pretty;
}
.bk-b2 .bk-foot, .bk-b6 .bk-foot { color: #3E77A8; }
.bk-b4 .bk-foot { color: #7E8AA0; }
.bk-hint { margin: 0; font-size: 11.5px; }

.bk-rows { display: flex; flex-direction: column; gap: 7px; }
.bk-row {
  display: flex; align-items: center; gap: 9px;
  background: #F7F8FB; border: 1px solid #EAECF2; border-radius: 11px; padding: 11px 12px;
}
.bk-b2 .bk-row { background: #fff; border-color: #D2EAFF; }
.bk-row.is-dark { background: rgba(255,255,255,.05); border-color: transparent; }
.bk-row.is-done, .bk-row.is-open { background: #EFF8FF; border-color: #D2EAFF; }
.bk-row-t {
  font: 500 12.5px/1.25 Inter, system-ui, sans-serif; color: inherit;
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-dot-av { width: 24px; height: 24px; border-radius: 50%; background: #B8DDFF; flex: none; }
.bk-dot-av.is-on { background: #0073FF; animation: bkPulse 3s ease-in-out infinite; }
.bk-bar { height: 7px; flex: 1; background: #DCEEFF; border-radius: 4px; }
.bk-bar.is-on { background: #B8DDFF; }
.bk-tick { width: 8px; height: 8px; border-radius: 50%; background: #C8CDD8; flex: none; }
.bk-row.is-done .bk-tick { background: #0073FF; }
.bk-row.is-open .bk-tick { background: #8A7A2E; }

.bk-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bk-chip {
  font: 600 10.5px/1 Inter, system-ui, sans-serif; color: #5B6474;
  background: #F1F3F8; padding: 8px 11px; border-radius: 999px;
}
.bk-chip.is-on { color: #0073FF; background: #DCEEFF; }
.bk-b2 .bk-chip { background: #fff; border: 1px solid #D2EAFF; color: #4E86B0; }
.bk-b2 .bk-chip.is-on { background: #0073FF; border-color: #0073FF; color: #fff; }

.bk-kpis { display: flex; gap: 10px; }
.bk-kpi { flex: 1; min-width: 0; border-radius: 12px; padding: 13px; background: #F7F8FB; border: 1px solid #EAECF2; }
.bk-kpi span {
  display: block; font: 600 9.5px/1 Inter, system-ui, sans-serif;
  color: #98A1B1; letter-spacing: .14em; text-transform: uppercase;
}
.bk-kpi b {
  display: block; margin-top: 9px; white-space: nowrap;
  font-family: 'Clash Grotesk', Inter, system-ui, sans-serif;
  font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: .015em; color: #0B1220;
}
.bk-kpi-soft { background: #EFF8FF; border-color: transparent; }
.bk-kpi-soft span { color: #4E86B0; }
.bk-kpi-soft b { color: #0B2438; }
.bk-kpi-white { background: #fff; border-color: transparent; }
.bk-kpi-white span { color: #4E86B0; }
.bk-kpi-white b { color: #0B2438; }
.bk-kpi-blue { background: #0073FF; border-color: transparent; }
.bk-kpi-blue span { color: #B0D9FF; }
.bk-kpi-blue b { color: #fff; }

/* ------------------------------------------------- 01 Facturación (rows) */

.bk-invs { display: flex; flex-direction: column; gap: 8px; }
.bk-inv {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%;
  background: #F7F8FB; border: 1px solid #EAECF2; border-radius: 12px; padding: 12px 13px;
  font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, background .2s ease;
}
.bk-inv:hover { border-color: #A8D5FF; background: #EFF8FF; }
.bk-inv:focus-visible { outline: 2px solid #0073FF; outline-offset: 2px; }
.bk-inv-av { width: 26px; height: 26px; border-radius: 8px; background: #E7ECF5; flex: none; }
.bk-inv-name {
  font: 500 13.5px/1 Inter, system-ui, sans-serif; color: #0B1220;
  flex: 1; min-width: 80px;
}
.bk-inv-amt { font: 600 13.5px/1 Inter, system-ui, sans-serif; color: #0B1220; white-space: nowrap; }
.bk-pill {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font: 600 10.5px/1 Inter, system-ui, sans-serif; padding: 6px 9px; border-radius: 999px;
}
.bk-pill svg { width: 10px; height: 10px; }
.bk-pill-open { color: #8A7A2E; background: #FBF3D6; }
.bk-pill-paid { color: #fff; background: #0073FF; }
.bk-inv .bk-pill-paid { display: none; }
.bk-inv[aria-pressed="true"] .bk-pill-open { display: none; }
.bk-inv[aria-pressed="true"] .bk-pill-paid { display: inline-flex; animation: bkPop .3s ease both; }

/* --------------------------------------------------------- 03 Gastos */

.bk-tickets { display: grid; grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 8px; }
.bk-ticket { height: 96px; border-radius: 12px; background: #F7F8FB; border: 1px solid #EAECF2; }
.bk-ticket.is-scan {
  background: linear-gradient(100deg, #F7F8FB 30%, #E4F2FF 50%, #F7F8FB 70%);
  background-size: 420px 100%; animation: bkSweep 1.8s linear infinite;
}
.bk-ticket.is-add {
  background: #EFF8FF; border: 1px dashed #A8D5FF;
  display: grid; place-items: center;
  font: 500 20px/1 Inter, system-ui, sans-serif; color: #0073FF;
}

/* ---------------------------------------------------- 04 Contabilidad */

/* The four PGC accounts one issued invoice touches. Highlighted: the bank
   account the payment lands in, which is the entry the app posts for you. */
.bk-accs { display: flex; gap: 5px; }
.bk-accs span {
  flex: 1; min-width: 0; height: 40px; border-radius: 9px;
  background: rgba(255,255,255,.06); display: grid; place-items: center;
  font: 500 12px/1 Inter, system-ui, sans-serif; color: #7E8AA0;
}
.bk-accs span.is-on {
  background: #0073FF; color: #fff; font-weight: 600;
  animation: bkPulse 2.6s ease-in-out infinite;
}
.bk-bal { margin: 0; font: 600 11px/1 Inter, system-ui, sans-serif; color: #0073FF; letter-spacing: .04em; }

/* --------------------------------------------------------- 05 Impuestos */

.bk-due {
  background: #F7F8FB; border: 1px solid #EAECF2; border-radius: 13px; padding: 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  animation: bkFloat 6s ease-in-out infinite;
}
.bk-due-k {
  flex: 1; min-width: 70px;
  font: 600 9.5px/1.3 Inter, system-ui, sans-serif; color: #98A1B1;
  letter-spacing: .14em; text-transform: uppercase;
}
.bk-due-v {
  font-family: 'Clash Grotesk', Inter, system-ui, sans-serif;
  font-size: 20px; font-weight: 600; line-height: 1; letter-spacing: .015em; color: #0B1220;
}
.bk-due-line {
  width: 100%; height: 3px; border-radius: 2px; background: #0073FF;
  transform-origin: left; animation: bkDraw 1.6s cubic-bezier(.5,0,.2,1) both;
}
.bk-due-d { font: 600 11px/1 Inter, system-ui, sans-serif; color: #0073FF; }

/* --------------------------------------------------------- 06 Tesorería */

.bk-bars { display: flex; align-items: flex-end; gap: 6px; flex: 1; min-height: 54px; }
.bk-bars i {
  flex: 1; background: #A8D5FF; border-radius: 5px; transform-origin: bottom;
  animation: bkBreathe 4s ease-in-out infinite;
}
.bk-bars i.is-mid { background: #7CBBFF; }
.bk-bars i.is-on { background: #0073FF; }

/* --------------------------------------------------------------- live region */

.bk-live {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* -------------------------------------------- themed sections below the band */

.bk-sec { padding: 60px 44px; max-width: 1380px; margin: 0 auto; }
.bk-sec-hd {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.bk-sec-hd h2 {
  font-family: 'Clash Grotesk', Inter, system-ui, sans-serif;
  font-size: 40px; font-weight: 600; line-height: 1.04; letter-spacing: .015em;
  margin: 0; color: var(--ink);
}
.bk-sec-more {
  font: 600 14.5px/1 Inter, system-ui, sans-serif; color: var(--link); text-decoration: none;
}
.bk-sec-more:hover { color: var(--link-hover); }
.bk-sec-eyebrow {
  font: 600 10.5px/1 Inter, system-ui, sans-serif;
  color: var(--foot-muted); letter-spacing: .18em; text-transform: uppercase;
}

.bk-cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.bk-card {
  background: var(--pop-bg); border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  transition: transform .25s ease, box-shadow .25s ease;
}
.bk-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px -18px rgba(15,40,110,.35); }
.bk-card-ic {
  width: 34px; height: 34px; border-radius: 11px; background: var(--link-tint);
  display: grid; place-items: center; color: var(--link);
}
.bk-card-ic svg { width: 19px; height: 19px; }
.bk-card h3 {
  font: 600 16px/1.2 Inter, system-ui, sans-serif; margin: 16px 0 0; color: var(--ink);
}
.bk-card p { font: 400 13.5px/1.5 Inter, system-ui, sans-serif; color: var(--lede); margin: 7px 0 0; }

.bk-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 28px; }
.bk-step { background: var(--thead); border-radius: 18px; padding: 26px; }
.bk-step-n { font: 600 13px/1 Inter, system-ui, sans-serif; color: var(--link); }
.bk-step h3 {
  font-family: 'Clash Grotesk', Inter, system-ui, sans-serif;
  font-size: 22px; font-weight: 600; line-height: 1.15; letter-spacing: .015em;
  margin: 14px 0 0; color: var(--ink);
}
.bk-step p { font: 400 14.5px/1.55 Inter, system-ui, sans-serif; color: var(--lede); margin: 8px 0 0; }

/* ------------------------------------------------------------- animations */

@keyframes bkPulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes bkPop { from { transform: scale(.82); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes bkSweep { from { background-position: -420px 0; } to { background-position: 420px 0; } }
@keyframes bkBreathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.88); } }
@keyframes bkFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes bkDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes bkCycle {
  0%, 26%  { transform: translateY(0); }
  33%, 59% { transform: translateY(-33.333%); }
  66%, 92% { transform: translateY(-66.666%); }
  100%     { transform: translateY(0); }
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 1240px) {
  .bk-row-top, .bk-row-bot { height: 360px; }
  .bk-sec { padding: 52px 28px; }
  .bk-sec-hd h2 { font-size: 34px; }
  .bk-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  /* Below this the tray stops being a row of competing widths: every box gets
     its own full-width slot, content flows normally, and hover-widen and drag
     are both off (there is nothing to steal width from, and no touch story). */
  .bk-row-top, .bk-row-bot { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); height: auto; }
  /* min-width belongs to the row layout only: at 320px it made the hero wider
     than the viewport and the whole page scrolled sideways. */
  .bk-hero { grid-column: 1 / -1; min-width: 0; max-width: none;
    padding: 32px 26px; gap: 20px; justify-content: flex-start; }
  .bk-box { min-height: 340px; }
  .bk-box, .bk-b1, .bk-b2, .bk-b3, .bk-b4, .bk-b5, .bk-b6 { flex: none; cursor: default; }
  .bk-box:hover, .bk-box:focus-visible { flex-grow: 0; }
  .bk-box-in { position: static; }
  .bk-grip { display: none; }
  .bk-steps { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .bk-row-top, .bk-row-bot { grid-template-columns: minmax(0, 1fr); }
  .bk-stage { padding: 6px; gap: 6px; }
  .bk-row-top, .bk-row-bot { gap: 6px; }
  .bk-box { min-height: 0; }
  .bk-sec { padding: 44px 20px; }
  .bk-sec-hd h2 { font-size: 28px; }
  .bk-cards { grid-template-columns: minmax(0, 1fr); }
  .bk-kpis { flex-wrap: wrap; }
  .bk-kpi { min-width: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .bk-box, .bk-btn, .bk-card, .bk-inv { transition: none; }
  .bk-dot-av.is-on, .bk-ticket.is-scan, .bk-accs span.is-on, .bk-bars i,
  .bk-due, .bk-due-line, .bk-inv[aria-pressed="true"] .bk-pill-paid, .bk-rot-in {
    animation: none;
  }
}