/* Hero «from chaos to order» cards (app/landing/sections/home/HeroFlow.tsx, data in
 * app/landing/data/hero-flow.ts). Loaded by HeroSection, so it ships wherever the hero does.
 *
 * Both faces ARE the classic marquee card (.hero_marquee_item and friends in landing.css), so
 * size, type, radius, border and the mobile scale-down all come from there. This file adds:
 *  - the split: every row holds two copies of its track, one per face, stacked in the same grid
 *    cell. Each copy sits in a FIXED half of the row (overflow:hidden, never moves): raw cards
 *    left of the centre line, records right of it. The cards move inside; the halves do not, so
 *    the boundary is the spine with no per-frame clip. (An earlier per-card clip-path driven
 *    every frame from JS painted stale in Chrome on some reloads: cards stuck half grey past the
 *    spine or missing.)
 *  - the BEFORE skin: the template's skeleton card (white, flat light-grey tile), the raw item
 *    drawn in place of the text (chat bubble, waveform, spreadsheet, receipt...), and a light
 *    grey «what is wrong» chip;
 *  - the blue done chip on the record (the classic chip's own colours), popping in just past the
 *    mark ([data-hf-pending] from the ticker; a transform/opacity transition, never a clip);
 *  - handwriting for `note` sources (self-hosted, OFL-1.1, from @fontsource 5.x: Aref Ruqaa for
 *    Arabic, Caveat for English; each locale's stack names only its own face, so a page loads one).
 * Scoped under .dsl, inside @layer landing like landing.css. Light-only, like the rest of the landing. */

@font-face {
  font-family: hf-ruqaa;
  src: url("/assets/aref-ruqaa-arabic-700-D30apH1C.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF,
    U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: hf-caveat;
  src: url("/assets/caveat-latin-600-zlTlWIYU.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@layer landing {
  /* ---------------------------------------------------------------- the split */
  /* Two copies of the row's track in one grid cell, each in a fixed half. The halves reach far
     above and below the row (padding inside, the same amount of negative margin outside) so the
     curved rows' tilted cards are never cut vertically. The inner box is the full row width,
     shifted for the right half, so both copies lay their cards out on the same x. Physical
     left/right: the marquee is pinned LTR in Arabic (landing-rtl.css). */
  .dsl .hero_marquee_layout.hf-row { display: grid; }
  .dsl .hf-half {
    grid-area: 1 / 1;
    width: 50%;
    overflow: hidden;
    margin-block: -8rem;
    padding-block: 8rem;
  }
  .dsl .hf-half.is-raw { justify-self: start; }
  .dsl .hf-half.is-done { justify-self: end; }
  .dsl .hf-half-inner { display: flex; width: 200%; }
  .dsl .hf-half.is-done .hf-half-inner { margin-left: -100%; }

  .dsl .hf-item {
    position: relative;
    flex: none;
    will-change: transform;
  }
  /* Only the moving card is a compositor layer; its faces paint into it (the classic
     .hero_marquee_item carries will-change:transform, which would make every face a layer too). */
  .dsl .hf-item .hero_marquee_item { will-change: auto; }
  /* In the raw copy the record still lays the card out, invisibly, so both copies size it alike. */
  .dsl .hf-half.is-raw .hf-order { visibility: hidden; }
  .dsl .hf-chaos {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
  }

  /* ---------------------------------------------------------------- BEFORE: the skeleton card */
  /* The template's own skeleton card (the classic marquee's left side): the same white card, border
     and soft shadow, a flat light-grey tile (--neutral--lightest) with a faint glyph, level along the
     row's curve. The text block is replaced by the raw item itself (.hf-art), drawn in the same
     light greys, each source keeping only a faint tint of where it came from (chat green, notebook
     yellow, missed-call red...). Sizes are in em off .hf-art, halved on phones like the classic tile. */
  /* Exactly the record's box (the record sizes the item), so the two cards overlap edge to edge and
     the grey tile turns into the tool tile on the same spot. The raw item flexes to the width left. */
  .dsl .hero_marquee_item.hf-raw {
    width: 100%;
    height: 100%;
    justify-content: flex-start;
    background-color: var(--tint--50);
  }
  .dsl .hf-raw-tile { display: grid; place-items: center; background-color: var(--neutral--lightest); }
  .dsl .hf-raw-tile svg { width: 1.45rem; height: 1.45rem; color: #cbcbcb; stroke-width: 1.75; }

  .dsl .hf-art {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: .3em;
    align-self: center;
    flex: 1;
    min-width: 0;
    font-size: 1rem;
    line-height: 1.2;
    color: #a3a3a3;
  }
  /* The card is laid out left-to-right in both locales (landing-rtl.css pins the marquee to LTR), so
     in Arabic the raw item hugs the tile from the far side, as the record's text block does. */
  [dir="rtl"] .dsl .hf-art { direction: rtl; align-items: flex-end; }
  .dsl .hf-meta { display: flex; align-items: center; gap: .5em; max-width: 100%; font-size: .62em; color: #bdbdbd; white-space: nowrap; }
  .dsl .hf-meta > span { overflow: hidden; text-overflow: ellipsis; }
  .dsl .hf-meta > .hf-chip { flex: none; }
  .dsl .hf-v { display: flex; align-items: center; max-width: 100%; white-space: nowrap; }

  /* chat bubble */
  .dsl .hf-bubble {
    gap: .45em;
    height: 2.05em;
    padding: 0 .75em;
    background: #f2f8f3;
    border: 1px solid #e4efe7;
    border-radius: .8em;
    border-start-start-radius: .2em;
  }
  .dsl .hf-bubble-text { overflow: hidden; text-overflow: ellipsis; font-size: .8em; font-weight: 500; color: #9d9d9d; }
  .dsl .hf-bubble-ticks { flex: none; width: .95em; height: .95em; color: #b8cad9; }

  /* missed calls: a notification with a second one peeking under it */
  .dsl .hf-call {
    gap: .45em;
    height: 2.05em;
    padding: 0 .8em;
    background: #fcf5f5;
    border: 1px solid #f4e6e6;
    border-radius: .65em;
    box-shadow: 0 .3em 0 -.12em #f6ecec;
  }
  .dsl .hf-call svg { flex: none; width: 1em; height: 1em; color: #e0adad; }
  .dsl .hf-call span { overflow: hidden; text-overflow: ellipsis; font-size: .8em; font-weight: 600; color: #a3a3a3; }

  /* spreadsheet: a green-tinted title bar, skeleton cells, one broken cell */
  .dsl .hf-sheet {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    height: 2.3em;
    overflow: hidden;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: .35em;
  }
  .dsl .hf-sheet-bar {
    display: block;
    overflow: hidden;
    padding: 0 .7em;
    font-size: .55em;
    font-weight: 600;
    line-height: 1.6;
    text-overflow: ellipsis;
    color: #97ad9e;
    background: #eaf3ed;
  }
  .dsl .hf-sheet-grid { display: grid; flex: 1; grid-template-columns: repeat(4, 1fr); }
  .dsl .hf-sheet-grid i {
    position: relative;
    font-style: normal;
    border-top: 1px solid #f2f2f2;
    border-inline-end: 1px solid #f2f2f2;
  }
  .dsl .hf-sheet-grid i::after {
    content: "";
    position: absolute;
    inset: .3em .35em;
    border-radius: 2px;
    background: var(--neutral--lightest);
  }
  .dsl .hf-sheet-grid i.is-err {
    display: grid;
    place-items: center;
    font-size: .5em;
    font-weight: 700;
    color: #d4a9a9;
    background: #fcf3f3;
  }
  .dsl .hf-sheet-grid i.is-err::after { content: none; }

  /* phone photos: two skeleton snapshots and a caption */
  .dsl .hf-photo { gap: .35em; height: 2.3em; }
  .dsl .hf-photo-thumb {
    flex: none;
    width: 2.9em;
    height: 2.15em;
    overflow: hidden;
    background: linear-gradient(#eef3f8, #e9ecf0);
    border: 2px solid #fff;
    border-radius: .3em;
    box-shadow: 0 1px 3px #00000014;
  }
  .dsl .hf-photo-thumb.is-2 { margin-inline-start: -1.1em; margin-block-start: .35em; }
  .dsl .hf-photo-thumb svg { display: block; width: 100%; height: 100%; fill: none; stroke: #cfd4da; stroke-width: 1.8; stroke-linecap: round; }
  .dsl .hf-photo-name { overflow: hidden; margin-inline-start: .35em; font-size: .78em; font-weight: 600; text-overflow: ellipsis; color: #a3a3a3; }

  /* sticky note: faint yellow, a folded top corner, handwriting */
  .dsl .hf-note {
    position: relative;
    overflow: hidden;
    height: 2.05em;
    padding-inline: .8em 1.3em;
    background: #fdf8e4;
    border: 1px solid #f3ecd1;
    border-radius: .3em;
    border-start-end-radius: 0;
  }
  .dsl .hf-note::after {
    content: "";
    position: absolute;
    top: -1px;
    right: -1px;
    width: .75em;
    height: .75em;
    background: linear-gradient(to bottom left, #fff 50%, #efe5c2 50%);
    border-bottom-left-radius: .18em;
  }
  [dir="rtl"] .dsl .hf-note::after {
    right: auto;
    left: -1px;
    background: linear-gradient(to bottom right, #fff 50%, #efe5c2 50%);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: .18em;
  }
  .dsl .hf-hand {
    font-family: hf-caveat, "Segoe Print", "Bradley Hand", cursive;
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1;
    color: #9a9a9a;
  }
  [dir="rtl"] .dsl .hf-hand {
    font-family: hf-ruqaa, "Noto Sans Arabic", serif;
    font-size: 1em;
    font-weight: 700;
  }
  .dsl .hf-hand s { text-decoration-thickness: 1.5px; text-decoration-color: #cfcfcf; }

  /* voice note: play, waveform (the played part faintly green), length */
  .dsl .hf-voice {
    gap: .45em;
    width: 100%;
    height: 2.05em;
    padding-inline: .3em .75em;
    background: #f2f8f3;
    border: 1px solid #e4efe7;
    border-radius: 1.1em;
  }
  .dsl .hf-voice-play { flex: none; display: grid; place-items: center; width: 1.5em; height: 1.5em; color: #b3b3b3; background: #fff; border-radius: 50%; }
  .dsl .hf-voice-play svg { width: .7em; height: .7em; fill: currentColor; }
  .dsl .hf-voice-wave { flex: 1; display: flex; align-items: center; gap: .12em; height: 1.1em; }
  .dsl .hf-voice-wave i { flex: 1; min-width: 1px; border-radius: 1px; background: #e2e2e2; }
  .dsl .hf-voice-wave i:nth-child(-n + 7) { background: #bcd8c4; }
  .dsl .hf-voice-dur { font-size: .62em; color: #b0b0b0; }

  /* thermal receipt slip, as wide as its words like the chat bubble: zigzag top and bottom edges
     (both long edges, so it never reads as a cropped card), the item, a dotted leader, the total */
  .dsl .hf-receipt {
    --zz: .42em;
    gap: .55em;
    height: 2.15em;
    padding-inline: .8em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Noto Sans Arabic", monospace;
    background: #f8f5ec;
    -webkit-mask:
      conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x,
      conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x;
    mask:
      conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x,
      conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x;
  }
  .dsl .hf-receipt-head { flex: 0 0 auto; font-size: .66em; font-weight: 700; color: #aaa59b; }
  /* Arabic has no monospace face here; the fallback spaces the letters apart. Words in the page's
     Arabic face, figures stay typewriter. */
  [dir="rtl"] .dsl .hf-receipt-head { font-family: "Noto Sans Arabic", sans-serif; font-size: .74em; }
  .dsl .hf-receipt-leader { flex: 0 1 3.2em; min-width: 1.2em; border-bottom: 2px dotted #e0dacd; transform: translateY(.25em); }
  .dsl .hf-receipt-total { flex: none; font-size: .74em; font-weight: 700; color: #9e9e9e; }

  /* scanned paper: a page with skeleton lines and a faint PDF tag */
  .dsl .hf-doc { gap: .55em; height: 2.3em; }
  .dsl .hf-doc-page {
    position: relative;
    flex: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .2em;
    width: 1.75em;
    height: 2.2em;
    padding: 0 .3em;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: .2em;
  }
  .dsl .hf-doc-page i { height: .16em; border-radius: 1px; background: var(--neutral--lightest); }
  .dsl .hf-doc-page i:nth-child(2) { width: 70%; }
  .dsl .hf-doc-page b {
    position: absolute;
    bottom: -.3em;
    inset-inline-end: -.6em;
    padding: .1em .35em;
    font-size: .38em;
    font-weight: 700;
    color: #d4a9a9;
    background: #fbf2f2;
    border-radius: .3em;
  }
  .dsl .hf-doc-name { overflow: hidden; font-size: .8em; font-weight: 600; text-overflow: ellipsis; color: #a3a3a3; }

  /* ---------------------------------------------------------------- chips */
  /* Same anatomy as the classic trend chip (.hero_marquee_rev_stat); the word needs a touch more
     size than "+12.5%" did to read in Arabic. */
  .dsl .hf-chip { white-space: nowrap; }
  .dsl .hf-chip .text-block { font-size: .5rem; }
  /* The done chip keeps the classic chip's own brand blue (.hero_marquee_rev_stat), owner 2026-10-02.
     It pops in once it has cleared the mark: HeroSection's ticker holds [data-hf-pending] on the
     record until then. Without the ticker (SSR, no JS) the chip simply shows. */
  .dsl .hf-chip.is-done {
    transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease-out;
  }
  .dsl [data-hf-pending] .hf-chip.is-done {
    transform: scale(.3);
    opacity: 0;
    transition: none;
  }
  .dsl .hf-chip.is-raw { color: #b0b0b0; background-color: #f5f5f5; border-color: var(--neutral--lightest); }

  /* ---------------------------------------------------------------- sizes + motion */
  @media screen and (max-width: 767px) {
    .dsl .hf-chip .text-block { font-size: .26rem; }
    .dsl .hf-art { font-size: .5rem; }
    .dsl .hf-raw-tile svg { width: .75rem; height: .75rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    /* landing.css forces the track to `running !important` from another CSS chunk, so this one wins
       on specificity (same layer, both !important), whatever order the two files load in. */
    .dsl .hero_marquee_component .hero_marquee_track { animation-play-state: paused !important; }
    .dsl .hf-chip.is-done { transition: none; }
  }
}
/**
 * Swiper 8.4.7
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: January 30, 2023
 */

@font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, 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');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-pointer-events{touch-action:pan-y}.swiper-pointer-events.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d,.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top,.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}/*
 * Desktop fallback fix for the GridSlider (perks carousel on the home page).
 *
 * `swiper/css` is a global, UNLAYERED stylesheet, so its `.swiper-wrapper { display: flex }`
 * and `.swiper-slide { width: 100% }` outrank every rule in `@layer landing` no matter how
 * specific — unlayered always beats layered. GridSlider only initialises Swiper at <=767px,
 * but its static fallback deliberately keeps the `swiper-wrapper` / `swiper-slide` classes
 * (they are the hooks the parity grid selects on, and dropping them would break SSR/hydration
 * parity). So on desktop, where Swiper never runs, those two declarations still applied and
 * beat the parity grid: six perk cards each stretched to the full 1280px container and laid
 * out in one flex row, leaving the section a mostly-empty 1395px tall and the second card
 * bleeding in at the viewport edge.
 *
 * This file is imported WITHOUT a layer on purpose. An unlayered rule at this specificity
 * beats swiper's unlayered one, which keeps the fix correct however the landing layer order
 * is arranged. Scoped to `:not(.swiper)` — the class Swiper adds to the container on init —
 * so the real mobile carousel keeps swiper's own layout untouched.
 */
.dsl .grid-slider_wrap:not(.swiper) > .grid-slider_list.swiper-wrapper {
  display: grid;
}

.dsl .grid-slider_wrap:not(.swiper) > .grid-slider_list > .grid-slider_item.swiper-slide {
  width: auto;
}