/*
 * The landing page (issue #1666, LP1 — PRD #1664).
 *
 * Everything above the first blank marker is the stylesheet of the design file
 * `docs/design/landing/DropshipSA-Landing.dc.html`, copied over unchanged. The
 * design puts nearly every rule in an inline `style` attribute, so this file
 * only holds what an inline attribute can not say: the keyframes, the media
 * queries, and the `:hover`, `:active` and `::before` states.
 *
 * TWO changes to the copy, and nothing else:
 *
 *  1. `header a[href="#login"]` and `header a[href="#signup"]` became
 *     `header a[data-lp]`. The design's links were fragments; the real ones are
 *     the login and register routes, so a selector on the address would no
 *     longer match anything.
 *  2. The block at the end. The design added its `:hover` and `::before` rules
 *     as `style-hover=` and `style-before=` attributes, which no browser reads.
 *     They are real rules now, keyed by `data-lx`, and carry `!important`
 *     because they have to beat the inline `style` of the same element.
 *  3. The two blocks below (issue #1668, LP3). The three fonts, and the one
 *     rule the `<picture>` tags need. Both are read before anything else.
 *
 * This file is loaded by `themes/altum/views/index/landing.php` and by nothing
 * else.
 */

/* ---------------------------------------------------------------------------
 * THE FONTS (issue #1668, LP3 — PRD #1664).
 *
 * The design asked Google for all three. Google is now cut out: the files sit
 * in `themes/altum/assets/fonts/` and this server sends them. That is one less
 * company that learns who reads our homepage, one less DNS lookup and one less
 * TLS handshake on a Saudi phone network — and the same files the panel already
 * uses, so a visitor who signs up has them in cache.
 *
 * `font-display: swap` on every one: the words are drawn straight away in the
 * fallback face and are redrawn when the file lands. The text is never
 * invisible.
 *
 * TAJAWAL HAS NO 600. The design asks for 600 on 112 elements. The browser then
 * takes the next weight up, which is 700 — exactly what it did while Google was
 * serving the same three files. Nothing about the page changes.
 *
 * `custom.css` also pulls Tajawal from Google, with an `@import` on its first
 * line. THAT FILE IS NOT TOUCHED — the panel and every other page are built on
 * it. The homepage simply stops loading it; see `landing_page_stylesheets()`.
 * ------------------------------------------------------------------------- */
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/tajawal-400.woff2') format('woff2')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/tajawal-500.woff2') format('woff2')}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/tajawal-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2')}

/* ---------------------------------------------------------------------------
 * THE PICTURES (issue #1668, LP3).
 *
 * Every picture the repo has is served as WebP with the PNG behind it, so each
 * `<img>` sits inside a `<picture>` now. A `<picture>` draws a box of its own,
 * and that box would break the design: the images that fill their card use
 * `height:100%`, the hero panel is a grid item with an `order`, and both read
 * the element ABOVE them. `display:contents` makes the `<picture>` draw no box
 * at all, so the `<img>` keeps the exact parent it had before this slice and
 * every one of those rules still means what it meant.
 *
 * AND THE `<source>` HAS TO BE HIDDEN. Once the `<picture>` draws no box, its
 * children are laid out by the grandparent — and the `<source>` is one of them.
 * In the shipping section that handed a whole grid column to an empty element
 * and pushed the picture down onto a second row, 246px taller than the design.
 * Hiding it changes nothing about which file the browser picks: a `<source>` is
 * only read, never drawn.
 * ------------------------------------------------------------------------- */
picture{display:contents}
picture > source{display:none}

*{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{margin:0;background:#FFFBF7;color:#303030;font-family:'Tajawal',system-ui,sans-serif;font-size:17px;line-height:1.75;overflow-x:hidden}
  a{color:#C23934;text-decoration:none}
  a:hover{text-decoration:underline;color:#FD3F0F}
  ::selection{background:#FED7CB;color:#303030}
  :focus-visible{outline:3px solid rgba(253,63,15,.4);outline-offset:2px;border-radius:6px}
  summary{cursor:pointer;list-style:none}
  summary::-webkit-details-marker{display:none}
  summary [data-pm]::after{content:"+"}
  details[open] summary [data-pm]::after{content:"−"}
  [data-cols]{display:grid;gap:16px;grid-template-columns:1fr}
  @media(min-width:768px){[data-cols="2"],[data-cols="3"],[data-cols="4"]{grid-template-columns:1fr 1fr}}
  @media(min-width:1050px){[data-cols="3"]{grid-template-columns:repeat(3,1fr)}[data-cols="4"]{grid-template-columns:repeat(4,1fr)}}
  [data-giftspacer]{display:none}
  @media(min-width:768px){[data-giftspacer]{display:block}}
  [data-gallery]{display:grid;grid-template-columns:repeat(2,1fr)}
  @media(min-width:600px){[data-gallery]{grid-template-columns:repeat(3,1fr)}}
  [data-hero],[data-split]{display:grid;gap:32px;grid-template-columns:1fr}
  @media(min-width:1050px){[data-hero]{grid-template-columns:7fr 5fr;align-items:center;gap:56px}[data-split]{grid-template-columns:1fr 1fr;align-items:start;gap:40px}}
  @media(min-width:1050px){[data-mobile-only]{display:none!important}}
  @media(max-width:1049px){[data-desktop-only]{display:none!important}}
  header nav a,header a[data-lp]{white-space:nowrap}
  @media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
  @keyframes priceFadeY{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  @keyframes priceFadeM{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

  @keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

  html[data-smooth]{scroll-behavior:smooth}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
  @keyframes driftA{0%{transform:translate3d(0,0,0) scale(1)}33%{transform:translate3d(-6%,4%,0) scale(1.08)}66%{transform:translate3d(5%,-3%,0) scale(.96)}100%{transform:translate3d(0,0,0) scale(1)}}
  @keyframes driftB{0%{transform:translate3d(0,0,0) scale(1)}40%{transform:translate3d(7%,-5%,0) scale(1.1)}75%{transform:translate3d(-4%,5%,0) scale(.94)}100%{transform:translate3d(0,0,0) scale(1)}}
  @keyframes gridPan{0%{background-position:0 0}100%{background-position:64px 64px}}
  @keyframes hueSlide{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
  @keyframes ringSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
  @keyframes softPulse{0%,100%{box-shadow:0 0 0 0 rgba(253,63,15,.5)}70%{box-shadow:0 0 0 10px rgba(253,63,15,0)}}
  @keyframes sheenSweep{0%{transform:translateX(-130%)}100%{transform:translateX(130%)}}
  [data-rv]{opacity:0;transform:translateY(22px);transition:opacity 700ms cubic-bezier(.2,.7,.2,1),transform 700ms cubic-bezier(.2,.7,.2,1),box-shadow 350ms cubic-bezier(.2,.7,.2,1),border-color 300ms}
  [data-rv="in"]{opacity:1;transform:none}
  [data-lift]{transition:opacity 700ms cubic-bezier(.2,.7,.2,1),transform 380ms cubic-bezier(.2,.7,.2,1),box-shadow 380ms cubic-bezier(.2,.7,.2,1),border-color 300ms}
  [data-lift]:hover{transform:translateY(-5px);box-shadow:0 24px 42px -28px rgba(48,20,10,.6)}
  a[data-cta]{position:relative;overflow:hidden;isolation:isolate;will-change:transform}
  a[data-cta]::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.42) 50%,transparent 64%);transform:translateX(-130%);pointer-events:none}
  a[data-cta]:hover::after{animation:sheenSweep 720ms cubic-bezier(.2,.7,.2,1) both}
  a[data-cta]:hover{transform:translateY(-2px)}
  a[data-cta]:active{transform:translateY(0)}
  [data-navlink]{position:relative;transition:color 200ms}
  [data-navlink]::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:2px;border-radius:2px;background:#FD3F0F;transform:scaleX(0);transform-origin:inherit;transition:transform 280ms cubic-bezier(.2,.7,.2,1)}
  [data-navlink]:hover::after,[data-navlink][data-active]::after{transform:scaleX(1)}
  [data-navlink]:hover,[data-navlink][data-active]{text-decoration:none;color:#26221F}
  [data-jstep]{transition:opacity 460ms ease,transform 460ms cubic-bezier(.2,.7,.2,1)}
  [data-journey][data-playing] [data-jstep]:not([data-on]){opacity:.86}
  [data-journey]:hover [data-jstep]{opacity:1}
  [data-jstep][data-on]{transform:translateY(-3px)}
  [data-jicon]{transition:transform 460ms cubic-bezier(.2,.7,.2,1),background-color 460ms ease,border-color 460ms ease,box-shadow 460ms ease}
  [data-jstep][data-on] [data-jicon]{transform:scale(1.09);background:#FFE2D3!important;border-color:#FD3F0F!important;box-shadow:0 0 0 7px rgba(253,63,15,.12)}
  [data-jchip]{transition:transform 420ms cubic-bezier(.2,.7,.2,1),box-shadow 420ms ease,border-color 420ms ease}
  [data-jstep][data-on] [data-jchip]{transform:translateY(-3px);border-color:#FD3F0F!important;box-shadow:0 8px 18px -12px rgba(253,63,15,.8),0 0 0 3px rgba(253,63,15,.10)}
  [data-jstep][data-on] [data-jnum]{animation:softPulse 1.4s cubic-bezier(.2,.7,.2,1) 1}
  [data-jdot]{transition:opacity 300ms ease}
  [data-journey]:not([data-playing]) [data-jdot]{opacity:0}
  [data-jend]{transition:box-shadow 520ms ease,border-color 420ms ease}
  [data-jend][data-on]{border-color:#FD3F0F!important;box-shadow:0 0 0 8px rgba(253,63,15,.10),0 14px 28px -18px rgba(253,63,15,.9)}
  [data-jrail]{transition:background 500ms ease}
  [data-zoomwrap]{overflow:hidden}
  [data-zoomwrap] img{transition:transform 800ms cubic-bezier(.2,.7,.2,1),filter 500ms ease}
  [data-zoomwrap]:hover img{transform:scale(1.05);filter:saturate(1.06)}
  [data-themethumb]{transition:transform 380ms cubic-bezier(.2,.7,.2,1),box-shadow 380ms cubic-bezier(.2,.7,.2,1),border-color 300ms}
  [data-themethumb]:hover{transform:translateY(-7px) scale(1.015);box-shadow:0 26px 46px -28px rgba(48,20,10,.62);border-color:#F9C9B4;z-index:2}
  [data-gallery] > *{transition:transform 380ms cubic-bezier(.2,.7,.2,1),box-shadow 380ms cubic-bezier(.2,.7,.2,1)}
  [data-gallery] > *:hover{transform:translateY(-5px);box-shadow:0 22px 40px -28px rgba(48,20,10,.55);z-index:2}
  [data-scroller] tbody tr{transition:background-color 260ms ease}
  [data-scroller] tbody tr:hover{background-color:rgba(255,255,255,.045)}
  [data-tl] [data-node]{transition:box-shadow 320ms ease,transform 320ms cubic-bezier(.2,.7,.2,1)}
  [data-tl]:hover [data-node]{box-shadow:0 0 0 3px #FFFBF7,0 0 0 9px rgba(253,63,15,.16)}
  summary [data-pm]{display:inline-block;transition:transform 300ms cubic-bezier(.2,.7,.2,1),color 200ms}
  details[open] summary [data-pm]{transform:rotate(180deg);color:#FD3F0F}
  details summary:hover{color:#C23934}
  footer a{transition:color 200ms ease,opacity 200ms ease}
  footer a:hover{color:#C23934}
  [data-chip]{transition:transform 260ms cubic-bezier(.2,.7,.2,1),box-shadow 260ms ease}
  [data-chip]:hover{transform:translateY(-2px);box-shadow:0 10px 20px -14px rgba(48,20,10,.5)}
  details summary{transition:color 200ms}
  details[open] summary{color:#26221F}
  img,svg{max-width:100%}
  main [id]{scroll-margin-top:78px}
  [data-scroller]{-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  [data-menu] > div{animation:riseIn 150ms cubic-bezier(.2,.7,.2,1) both}
  @media(max-width:1049px){
    [data-jreplay]{min-height:44px!important;padding-inline:18px!important}
    footer a{min-height:40px;display:inline-flex;align-items:center}
    input[type="range"]{height:38px}
    [data-herovis]{min-height:0!important;display:grid;gap:20px;justify-items:center}
    [data-hv-panel]{position:relative!important;top:auto!important;inset-inline-end:auto!important;order:2;width:100%!important;height:clamp(170px,44vw,250px)!important}
    [data-hv-phone]{order:1;width:min(216px,60%)!important;margin-inline:auto!important}
  }
  @media(max-width:820px){
    [data-tlrail]{inset-inline-start:12px!important}
    [data-node]{inset-inline-start:-18px!important}
    [data-tl]{padding-inline-start:28px!important}
    [data-tlcap] > div{inset-inline-start:-19px!important}
  }
  @media(max-width:700px){
    [data-swipehint]{display:none!important}
    [data-scroller]{overflow:visible!important;border:0!important;padding:0!important;box-shadow:none!important;background:transparent!important;margin-top:20px!important}
    [data-scroller] table{display:block!important;width:100%!important;min-width:0!important;font-size:16px!important}
    [data-scroller] thead{display:none!important}
    [data-scroller] tbody{display:flex!important;flex-direction:column;gap:10px}
    [data-scroller] tr{display:block!important;background:#FFFFFF!important;border:1px solid #ECE9E2!important;border-radius:14px!important;padding:4px 0 6px!important;box-shadow:0 1px 2px rgba(48,48,48,.05)}
    [data-scroller] td{display:flex!important;align-items:center;justify-content:space-between;gap:14px;padding:8px 14px!important;background:transparent!important;border:0!important;border-radius:0!important;font-size:16px!important;text-align:start}
    [data-scroller] td::before{content:attr(data-col);flex:0 0 auto;font-size:14px;font-weight:600;color:#78716C}
    [data-scroller] td[data-head]{display:block!important;font-size:17px!important;font-weight:700!important;color:#26221F!important;padding:12px 14px 10px!important;border-bottom:1px solid #F2EFE9!important;margin-bottom:4px!important}
    [data-scroller] td[data-head]::before{content:none}
    [data-scroller] td[data-best]{background:#FFF4EF!important;margin:0 6px!important;border-radius:10px!important;padding:10px!important}
    [data-scroller] td[data-best]::before{color:#B3400F}
    [data-scroller] td span{text-align:end}
  }
  @media(max-width:700px){
    [data-calcrow]{flex-wrap:wrap!important;gap:4px 12px!important}
    [data-billcard]{padding:20px 16px 16px!important}
    [data-billgrid]{gap:10px 6px!important;font-size:15px!important;grid-template-columns:1fr 78px 62px!important}
    [data-bill]{min-width:0!important;max-width:none!important;width:100%!important;font-size:13px!important;padding:4px 6px!important;line-height:1.4}
    [data-billgrid]:last-of-type [data-bill]{font-size:15px!important;padding:9px 6px!important}
    [data-flowarrow]{flex:1 0 100%!important;padding:0!important}
    [data-flowarrow] span{display:block;transform:rotate(-90deg)}
  }
  @media(max-width:600px){
    [data-themethumb="3"]{display:none!important}
    [data-tlrail],[data-node],[data-tlcap]{display:none!important}
    [data-tl]{padding-inline-start:0!important}
    [data-pad]{padding-inline:18px!important}
  }
  @media(max-width:380px){
    [data-pad]{padding-inline:14px!important}
  }

/* ---- the design's style-hover / style-active / style-before, as real rules ---- */
[data-lx="1"]:hover{background:#E5350C !important}
[data-lx="2"]:hover{background:#FFF4EF !important;text-decoration:none !important}
[data-lx="3"]:hover{background:#E5350C !important;text-decoration:none !important}
[data-lx="4"]:active{background:#C23934 !important;transform:translateY(1px) !important}
[data-lx="5"]:hover{background:rgba(15,13,12,.4) !important}
[data-lx="6"]::before{content:'✗' !important;color:#A63A4B !important;font-weight:700 !important;margin-inline-end:10px !important}
[data-lx="7"]::before{content:'✓' !important;color:#0E7A54 !important;font-weight:700 !important;margin-inline-end:10px !important}
[data-lx="8"]:hover{background:#FFF4EF !important;border-color:#FD3F0F !important;transform:translateY(-1px) !important}
[data-lx="9"]:active{background:#C23934 !important}
[data-lx="10"]:hover{background:#FF5A2E !important}
[data-lx="11"]:hover{background:#FFFFFF !important}
[data-lx="12"]:hover{background:#F7F5F0 !important}
[data-lx="13"]:hover{background:#FFF4EF !important}
[data-lx="14"]:active{background:#FED7CB !important}