/* The website of the platform (DEC-131). Script-free pages built on the platform theme: theme/app.min.css is Web's own UBold file ("saas" skin, copied by Platform.Site.csproj),
   and this layer only reads its --theme-* variables. No CDN; the platform font is bundled locally (OFL, see ../fonts/OFL.txt). */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype')}
html[data-skin]{--theme-body-font-family:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif;--theme-font-family-secondary:'IBM Plex Sans Arabic',Tahoma,Arial,sans-serif}

/* ---- UBold Landing rules the Starterkit CSS leaves out (verbatim: .reference/ubold/wwwroot/css/app.css). Keep them in step with the reference, never restyle them. ---- */
.section-custom {
  padding: 48px 16px;
  padding: 3rem 1rem;
}

@media (min-width: 992px) {
  .section-custom {
    padding: 6.5rem 0;
  }
}
.section-footer {
  background-color: #1e1f27;
  color: #858f9b;
}
.section-footer .nav-link {
  color: inherit;
  font-size: 14px;
  font-weight: var(--theme-font-weight-medium);
}
.section-footer .nav-link:hover {
  color: #6658dd;
}


/* ---- The website's own layer (about page, shared parts) on --theme-* variables ---- */
.icon{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.125em;flex:none}
.siaa-logo{height:34px;width:auto;color:var(--theme-body-color)}
.siaa-logo-dot{fill:var(--theme-primary)}
.section-footer .siaa-logo{height:38px;color:#fff}
.section-footer .siaa-logo-dot{fill:color-mix(in srgb,var(--theme-primary) 55%,#fff)}
.fs-base{font-size:var(--theme-body-font-size)}
/* The navbar opens below 992px from a checkbox: no script is sent (the technique Platform.Site uses). */
.main-nav-toggle:checked ~ .navbar-collapse{display:block}
.main-nav-toggle:focus-visible ~ .navbar-toggler{outline:3px solid var(--theme-primary);outline-offset:2px}

/* ======================================================================================================================================================================
   The landing (DEC-131, second pass: custom, not UBold components). A dark hero where the product floats, a strip of business types that drifts, numbers that count up while
   they scroll into view, feature cards whose icons drop in, and a connector that draws itself. All motion is CSS: keyframes for what floats, scroll-driven animations
   (animation-timeline) for what answers the scroll. Rule of this file: the resting state of every element is its FINAL state; a start state exists only inside a keyframe or inside
   an @supports block, so a browser without a feature, or a visitor who asks for less motion, sees the whole page complete.
   ====================================================================================================================================================================== */
:root{
  --lp-night:#14132b; --lp-line:rgba(255,255,255,.09);
  --lp-brand:#6658dd; --lp-brand-soft:#a79fee; --lp-tint:#efedfc; --lp-paper:#faf9ff;
  --lp-ink:#16152b; --lp-muted:#5a5873; --lp-rule:#e6e3f4;
  --lp-mint:#19b88a; --lp-mint-tint:#e1f6ef; --lp-radius:20px;
  --lp-shadow:0 1px 2px rgba(20,19,43,.06),0 26px 50px -26px rgba(20,19,43,.45);
  --lp-dir:1;
}
html[dir=rtl]{--lp-dir:-1}
html{scroll-behavior:smooth;scroll-padding-top:5rem}
body{background:var(--lp-paper);color:var(--lp-ink)}

/* header: always dark, so it reads over the dark hero and over the light sections */
.lp-nav{background:rgba(20,19,43,.86);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--lp-line)}
.lp-nav .siaa-logo{color:#fff}
.lp-nav .siaa-logo-dot{fill:var(--lp-brand-soft)}
.lp-nav .nav-link{color:rgba(255,255,255,.78)}
.lp-nav .nav-link:hover,.lp-nav .nav-link:focus-visible{color:#fff}
.lp-nav .btn-light{background:rgba(255,255,255,.1);border-color:transparent;color:#fff}
.lp-nav .btn-light:hover{background:rgba(255,255,255,.18)}
.lp-nav .navbar-toggler{border-color:rgba(255,255,255,.3)}
.lp-nav .navbar-toggler-icon{filter:invert(1)}
@media (max-width:991.98px){.lp-nav .navbar-collapse{padding-block:.75rem}}

/* ---- hero ---- */
.lp-hero{position:relative;overflow-x:clip;background:var(--lp-night);color:#fff;padding-block:clamp(2.5rem,6vw,5rem) clamp(3.5rem,7vw,6.5rem)}
.lp-hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lp-glow{position:absolute;border-radius:50%;filter:blur(72px);will-change:transform}
.lp-glow--a{width:36rem;height:36rem;inset-block-start:-12rem;inset-inline-end:-8rem;background:radial-gradient(circle,rgba(102,88,221,.9),transparent 66%);opacity:.65;animation:lp-drift 19s ease-in-out infinite alternate}
.lp-glow--b{width:30rem;height:30rem;inset-block-end:-14rem;inset-inline-start:-8rem;background:radial-gradient(circle,rgba(25,184,138,.55),transparent 66%);opacity:.35;animation:lp-drift 23s ease-in-out -7s infinite alternate-reverse}
.lp-slots{position:absolute;inset:0;background-image:linear-gradient(var(--lp-line) 1px,transparent 1px);background-size:100% 4.14rem;-webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%);mask-image:linear-gradient(to bottom,#000,transparent 88%)}
.lp-hero-grid{position:relative;display:grid;gap:3.5rem;align-items:center}
@media (min-width:992px){.lp-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:2rem}}
.lp-kicker{display:inline-block;margin:0 0 1.1rem;padding:.35rem .9rem;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.07);color:var(--lp-brand-soft);font-size:.82rem;font-weight:600}
.lp-hero h1{margin:0 0 1.25rem;color:#fff;font-size:clamp(2.1rem,4.7vw,3.7rem);font-weight:700;line-height:1.3;text-wrap:balance}
.lp-accent{display:inline;color:var(--lp-brand-soft);white-space:nowrap;background:linear-gradient(var(--lp-brand),var(--lp-brand)) no-repeat 100% 100%/100% .16em;padding-block-end:.1em;animation:lp-underline 1s .7s cubic-bezier(.2,.7,.2,1) backwards}
html[dir=ltr] .lp-accent{background-position:0 100%}
html[lang=en] .lp-hero h1{font-size:clamp(2rem,4vw,3.3rem);line-height:1.2}
.lp-lead{max-width:34rem;margin:0 0 1.75rem;color:rgba(255,255,255,.78);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.95}
.lp-cta{display:flex;flex-wrap:wrap;gap:.75rem}
.lp-btn{display:inline-flex;align-items:center;gap:.6rem;border-radius:14px;font-weight:600;padding-inline:1.5rem;transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease}
.lp-btn:hover{transform:translateY(-2px)}
.lp-btn.btn-primary{box-shadow:0 14px 28px -12px rgba(102,88,221,.9)}
.lp-btn--ghost{border:1px solid rgba(255,255,255,.28);color:#fff;background:transparent}
.lp-btn--ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.lp-arrow{display:inline-grid;transition:transform .2s ease}
.lp-btn:hover .lp-arrow{transform:translateX(calc(var(--lp-dir) * -4px))}
.lp-facts{display:flex;flex-wrap:wrap;gap:.6rem 1.25rem;margin:1.75rem 0 .9rem;padding:0;list-style:none;color:rgba(255,255,255,.86);font-size:.92rem}
.lp-facts li{display:inline-flex;align-items:center;gap:.45rem}
.lp-facts .icon{color:var(--lp-mint);font-size:1.1rem}
.lp-note{margin:0;color:rgba(255,255,255,.55);font-size:.8rem}
/* the hero text arrives one line after another */
.lp-in{animation:lp-in .8s cubic-bezier(.2,.7,.2,1) backwards}
.lp-d0{animation-delay:0s}.lp-d1{animation-delay:.08s}.lp-d2{animation-delay:.16s}.lp-d3{animation-delay:.24s}.lp-d4{animation-delay:.32s}.lp-d5{animation-delay:.4s}

/* ---- the stage: the product, floating ---- */
.lp-stage{position:relative;display:grid;gap:1rem;min-width:0}
.lp-card{background:#fff;color:var(--lp-ink);border-radius:var(--lp-radius);box-shadow:var(--lp-shadow);min-width:0}
.lp-card h2{margin:0;color:var(--lp-ink);font-size:.95rem;font-weight:700}
.lp-card-head{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;margin-block-end:.9rem}
.lp-card-head span{color:var(--lp-muted);font-size:.82rem}
.lp-card-note{margin:.7rem 0 0;color:var(--lp-muted);font-size:.74rem}
.lp-card--board{padding:1.1rem 1.2rem}
.lp-board-scroll{overflow-x:auto}
.lp-card--ledger{padding:1rem 1.15rem}
.lp-card--ledger ul{margin:.5rem 0 0;padding:0;list-style:none}
.lp-card--ledger li{display:flex;justify-content:space-between;gap:1rem;align-items:center;padding-block:.5rem;border-block-start:1px solid var(--lp-rule);font-size:.86rem}
.lp-card--ledger li b{display:block;font-weight:600}
.lp-card--ledger li small{color:var(--lp-muted);font-size:.74rem}
.lp-amount{white-space:nowrap;font-weight:700;font-variant-numeric:tabular-nums}
.lp-amount small{font-weight:400}
.lp-amount--minus{color:#c0392b}
.lp-card--toast{display:flex;gap:.75rem;align-items:center;padding:.75rem 1rem;border-radius:16px;font-size:.84rem}
.lp-card--toast b{display:block}
.lp-card--toast small{color:var(--lp-muted);font-size:.74rem}
.lp-toast-ic{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:12px;background:var(--lp-mint-tint);color:var(--lp-mint);font-size:1.15rem}
.lp-card--package{display:grid;justify-items:center;gap:.1rem;padding:1rem 1.1rem;text-align:center}
.lp-card--package b{font-size:1.3rem;line-height:1.2}
.lp-card--package span{font-size:.82rem;font-weight:600}
.lp-card--package small{color:var(--lp-muted);font-size:.72rem}
.lp-ring{width:4.5rem;height:4.5rem;transform:rotate(-90deg);margin-block-end:.4rem}
.lp-ring circle{fill:none;stroke-width:3.4}
.lp-ring-bg{stroke:var(--lp-tint)}
.lp-ring-fg{stroke:var(--lp-brand);stroke-linecap:round;stroke-dasharray:70 100;animation:lp-ring 1.8s 1s cubic-bezier(.2,.7,.2,1) backwards}
.lp-chip{display:none;place-items:center;position:absolute;width:3rem;height:3rem;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:1.35rem;box-shadow:0 14px 30px -14px rgba(0,0,0,.7)}
@media (min-width:992px){
  .lp-stage{display:block;min-height:37.5rem}
  .lp-card{position:absolute}
  .lp-card--board{inset-block-start:3.7rem;inset-inline:0 3.2rem;animation:lp-float 9s ease-in-out infinite;--r:-.6deg}
  .lp-card--ledger{inset-block-end:0;inset-inline-start:-1.5rem;width:16rem;animation:lp-float 11s -3s ease-in-out infinite;--r:.8deg;z-index:2}
  .lp-card--toast{inset-block-start:0;inset-inline-end:-.5rem;width:15.5rem;animation:lp-float 7s -1.5s ease-in-out infinite;--r:1.2deg;z-index:3}
  .lp-card--package{inset-block-end:2.4rem;inset-inline-end:-.75rem;width:10.5rem;animation:lp-float 10s -5s ease-in-out infinite;--r:-1.5deg;z-index:2}
  .lp-chip{display:grid;animation:lp-bob 6s ease-in-out infinite}
  .lp-chip--1{inset-block-start:-1rem;inset-inline-start:2rem;animation-delay:-1s}
  .lp-chip--2{inset-block-start:11rem;inset-inline-start:-2.8rem;animation-delay:-3s;animation-duration:7.5s}
  .lp-chip--3{inset-block-end:9rem;inset-inline-end:-2.2rem;animation-delay:-2s;animation-duration:8s}
  .lp-chip--4{inset-block-end:-1.2rem;inset-inline-start:42%;animation-delay:-4s}
}

/* ---- strip of business types, drifting ---- */
.lp-marquee{overflow:hidden;padding-block:1.4rem;background:#fff;border-block-end:1px solid var(--lp-rule);-webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent)}
.lp-track{display:flex;width:max-content;animation:lp-marquee 48s linear infinite}
.lp-marquee:hover .lp-track{animation-play-state:paused}
.lp-set{display:flex;gap:.85rem;margin:0;padding:0 .85rem 0 0;list-style:none}
html[dir=rtl] .lp-set{padding:0 0 0 .85rem}
.lp-pill{display:inline-flex;align-items:center;gap:.65rem;padding:.55rem 1.1rem .55rem .6rem;border:1px solid var(--lp-rule);border-radius:999px;background:var(--lp-paper);color:var(--lp-ink);font-weight:600;font-size:.95rem;white-space:nowrap}
html[dir=rtl] .lp-pill{padding:.55rem .6rem .55rem 1.1rem}
.lp-pill-ic{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--lp-tint);color:var(--lp-brand);font-size:1.05rem}

/* ---- numbers that count while they scroll in ---- */
.lp-stats{background:var(--lp-paper);padding-block:clamp(2.5rem,5vw,4rem) 0}
.lp-stats-grid{display:grid;gap:1.5rem}
@media (min-width:768px){.lp-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-stats p{display:grid;justify-items:center;gap:.2rem;margin:0;text-align:center}
.lp-stats small{color:var(--lp-muted);font-size:.95rem}
@property --lp-n{syntax:'<integer>';inherits:false;initial-value:0}
.lp-count{--lp-n:var(--lp-to);counter-reset:lp-n var(--lp-n);color:var(--lp-brand);font-size:clamp(2.8rem,6vw,4.4rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.lp-count::before{content:counter(lp-n)}
.lp-count--16{--lp-to:16}.lp-count--8{--lp-to:8}.lp-count--2{--lp-to:2}

/* ---- sections ---- */
.lp-section{padding-block:clamp(3.5rem,7vw,6rem);background:var(--lp-paper)}
.lp-section--tint{background:#f2f0fc}
.lp-section--flush{padding-block-start:0}
.lp-head{max-width:40rem;margin-block-end:2.75rem}
.lp-head h2{margin:0 0 .7rem;color:var(--lp-ink);font-size:clamp(1.65rem,3.3vw,2.45rem);font-weight:700;line-height:1.35;text-wrap:balance}
.lp-head p{margin:0;color:var(--lp-muted);font-size:1.05rem;line-height:1.9}
.lp-head--side{margin-block-end:0}

/* feature cards: four groups of four tools; the icons fall in */
.lp-bento{display:grid;gap:1.25rem}
@media (min-width:992px){.lp-bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-group{padding:clamp(1.3rem,2.6vw,2rem);border:1px solid var(--lp-rule);border-radius:var(--lp-radius);background:#fff;transition:transform .25s ease,box-shadow .25s ease}
.lp-group:hover{transform:translateY(-4px);box-shadow:var(--lp-shadow)}
.lp-group h3{margin:0 0 .35rem;font-size:1.3rem;font-weight:700}
.lp-group header p{margin:0 0 1.4rem;color:var(--lp-muted);font-size:.92rem}
.lp-group--night{background:var(--lp-night);border-color:transparent;color:#fff}
.lp-group--night h3{color:#fff}
.lp-group--night header p,.lp-group--night .lp-feat p{color:rgba(255,255,255,.68)}
.lp-group--tint{background:var(--lp-tint);border-color:transparent}
.lp-group--mint{background:var(--lp-mint-tint);border-color:transparent}
.lp-feats{display:grid;gap:1.15rem 1.5rem;margin:0;padding:0;list-style:none}
@media (min-width:576px){.lp-feats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lp-feat{display:flex;gap:.9rem;align-items:flex-start}
.lp-feat h4{margin:0 0 .15rem;font-size:1rem;font-weight:700}
.lp-feat p{margin:0;color:var(--lp-muted);font-size:.88rem;line-height:1.7}
.lp-ic{display:grid;place-items:center;flex:none;width:2.9rem;height:2.9rem;border-radius:15px;background:var(--lp-tint);color:var(--lp-brand);font-size:1.45rem}
.lp-group--tint .lp-ic,.lp-group--mint .lp-ic{background:#fff}
.lp-group--mint .lp-ic{color:#0f8f6b}
.lp-group--night .lp-ic{background:rgba(255,255,255,.1);color:var(--lp-brand-soft)}

/* business types */
.lp-types{display:grid;gap:1rem}
@media (min-width:576px){.lp-types{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1200px){.lp-types{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-type{display:flex;flex-direction:column;gap:.55rem;padding:1.35rem;border:1px solid var(--lp-rule);border-radius:var(--lp-radius);background:#fff;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.lp-type:hover{transform:translateY(-5px);border-color:var(--lp-brand-soft);box-shadow:var(--lp-shadow)}
.lp-type h3{margin:.4rem 0 0;font-size:1.1rem;font-weight:700}
.lp-type p{margin:0;color:var(--lp-muted);font-size:.9rem;line-height:1.75}
.lp-tags{display:flex;flex-wrap:wrap;gap:.35rem;margin-block-start:auto;padding-block-start:.5rem}
.lp-tag{padding:.2rem .6rem;border-radius:999px;background:var(--lp-tint);color:var(--lp-brand);font-size:.74rem;font-weight:600}

/* five steps joined by a line that draws itself */
.lp-steps{position:relative;display:grid;gap:2rem;margin:0;padding:0;list-style:none}
@media (min-width:992px){.lp-steps{grid-template-columns:repeat(5,minmax(0,1fr));gap:1.5rem}}
.lp-step{position:relative;z-index:1}
.lp-step h3{margin:1rem 0 .35rem;font-size:1.05rem;font-weight:700}
.lp-step p{margin:0;color:var(--lp-muted);font-size:.9rem;line-height:1.75}
.lp-step-n{display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;background:var(--lp-brand);color:#fff;font-size:1.15rem;font-weight:700;box-shadow:0 0 0 .55rem var(--lp-paper),0 14px 24px -10px rgba(102,88,221,.8)}
@media (min-width:992px){
  /* from the centre of the first disc to the centre of the fifth: four columns and four gaps */
  .lp-steps::before,.lp-steps::after{content:"";position:absolute;inset-block-start:1.5rem;inset-inline-start:1.5rem;width:calc(80% + 1.2rem);height:2px}
  .lp-steps::before{background:repeating-linear-gradient(to right,var(--lp-rule) 0 8px,transparent 8px 16px)}
  .lp-steps::after{background:var(--lp-brand);transform-origin:left center}
  html[dir=rtl] .lp-steps::after{transform-origin:right center}
}

/* later + FAQ + closing */
.lp-later{display:grid;gap:1.75rem;padding:clamp(1.5rem,4vw,2.75rem);border-radius:var(--lp-radius);background:var(--lp-tint)}
@media (min-width:992px){.lp-later{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:3rem}}
.lp-later h2{margin:0 0 .6rem;font-size:1.6rem;font-weight:700}
.lp-later p{margin:0;color:var(--lp-muted);line-height:1.9}
.lp-later ul{margin:0;padding:0;list-style:none;display:grid;gap:.75rem}
.lp-later li{display:grid;padding:.9rem 1.1rem;border-radius:14px;background:#fff}
.lp-later li span{color:var(--lp-muted);font-size:.84rem}
.lp-faq-grid{display:grid;gap:2rem}
@media (min-width:992px){.lp-faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:3rem}}
.lp-faq{border-block-end:1px solid var(--lp-rule)}
.lp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1.05rem;cursor:pointer;list-style:none;font-weight:600}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary .icon{width:1.25rem;height:1.25rem;color:var(--lp-brand);transition:transform .25s ease}
.lp-faq[open] summary .icon{transform:rotate(45deg)}
.lp-faq p{margin:0;padding-block-end:1.1rem;color:var(--lp-muted);line-height:1.9}
.lp-closing{position:relative;overflow:hidden;padding:clamp(2rem,6vw,4.25rem);border-radius:28px;background:var(--lp-night);color:#fff}
.lp-closing>h2,.lp-closing>p,.lp-closing>.lp-cta{position:relative}
.lp-closing h2{max-width:34rem;margin:0 0 .9rem;color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);font-weight:700;line-height:1.35;text-wrap:balance}
.lp-closing p{max-width:34rem;margin:0 0 1.6rem;color:rgba(255,255,255,.78);line-height:1.9}
.lp-glow--c{width:26rem;height:26rem;inset-block-start:-9rem;inset-inline-end:-5rem;background:radial-gradient(circle,rgba(102,88,221,.85),transparent 66%);opacity:.7;animation:lp-drift 17s ease-in-out infinite alternate}
.lp-chip--5{display:grid;inset-block-start:2rem;inset-inline-end:5rem;animation:lp-bob 6.5s -2s ease-in-out infinite}
.lp-chip--6{display:grid;inset-block-end:2rem;inset-inline-end:11rem;animation:lp-bob 8s -4s ease-in-out infinite}
@media (max-width:767.98px){.lp-chip--5,.lp-chip--6{display:none}}

/* ---- the day board inside the hero card ---- */
.board{display:grid;min-width:19rem;grid-template-columns:2.8rem repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(9,1.85rem);column-gap:.45rem;row-gap:.22rem}
.lane-h{grid-row:1;font-weight:600;font-size:.78rem;line-height:1;color:var(--lp-muted);padding-block-end:.5rem}
.l1{grid-column:2}.l2{grid-column:3}.l3{grid-column:4}
.track{grid-row:2 / 11;background:repeating-linear-gradient(to bottom,var(--lp-rule) 0,var(--lp-rule) 1px,transparent 1px,transparent 4.14rem)}
.hour{grid-column:1;font-size:.72rem;line-height:1;color:var(--lp-muted);align-self:start;padding-block-start:.1rem;font-variant-numeric:tabular-nums}
.blk{border-radius:10px;padding:.35rem .5rem;display:flex;flex-direction:column;gap:.1rem;min-width:0;overflow:hidden;font-size:.74rem;line-height:1.3}
.blk b{font-weight:600;font-size:.76rem}
.blk i{font-style:normal;font-size:.66rem;opacity:.9;font-variant-numeric:tabular-nums}
.blk.done{background:var(--lp-mint-tint);color:#0b6f53}
.blk.in{background:var(--lp-tint);color:#4b3fc0;outline:1.5px solid var(--lp-brand);outline-offset:-1.5px}
.blk.booked{background:#fff;border:1px solid var(--lp-rule);color:var(--lp-ink)}
.blk.free{border:1.5px dashed var(--lp-rule);color:var(--lp-muted);align-items:center;justify-content:center;font-size:.7rem}
.blk.one{flex-direction:row;align-items:center;gap:.5rem;padding-block:.1rem}
.blk.one b{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk.one i{display:none}
.r2-3{grid-row:2 / 3}.r2-4{grid-row:2 / 4}.r3-6{grid-row:3 / 6}.r4-7{grid-row:4 / 7}.r5-7{grid-row:5 / 7}.r7-8{grid-row:7 / 8}.r7-9{grid-row:7 / 9}.r8-9{grid-row:8 / 9}.r9-10{grid-row:9 / 10}.r9-11{grid-row:9 / 11}.h2{grid-row:2}.h4{grid-row:4}.h6{grid-row:6}.h8{grid-row:8}.h10{grid-row:10}
@media (max-width:34rem){.board{grid-template-columns:2.3rem repeat(3,minmax(0,1fr));column-gap:.3rem}.blk{padding:.3rem .35rem}.blk b{font-size:.7rem}.blk i{display:none}.hour{font-size:.66rem}}
/* a free slot of the board is taken a moment after the page opens (the product doing its job) */
.blk.free.l1{animation:lp-taken 1.2s 2.6s ease-out backwards}

/* ---- keyframes ---- */
@keyframes lp-in{from{opacity:0;transform:translateY(1.4rem)}}
@keyframes lp-underline{from{background-size:0% .16em}}
@keyframes lp-ring{from{stroke-dasharray:0 100}}
@keyframes lp-float{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}
@keyframes lp-bob{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-12px) rotate(4deg)}}
@keyframes lp-drift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(calc(var(--lp-dir) * -3rem),2.5rem,0) scale(1.12)}}
@keyframes lp-marquee{from{transform:translateX(0)}to{transform:translateX(calc(var(--lp-dir) * -50%))}}
@keyframes lp-taken{from{background:var(--lp-brand);color:var(--lp-brand);border-color:var(--lp-brand)}}
@keyframes lp-rise{from{opacity:0;transform:translateY(2.6rem) scale(.97)}to{opacity:1;transform:none}}
@keyframes lp-drop{from{opacity:0;transform:translateY(-1.8rem) rotate(-14deg) scale(.55)}62%{opacity:1;transform:translateY(.3rem) rotate(3deg) scale(1.07)}to{opacity:1;transform:none}}
@keyframes lp-count{from{--lp-n:0}to{--lp-n:var(--lp-to)}}
@keyframes lp-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lp-parallax{to{translate:0 -7rem}}

/* ---- what answers the scroll: only where the browser can do it ---- */
@supports (animation-timeline:view()){
  .lp-reveal{animation:lp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 52%}
  .lp-drop{animation:lp-drop linear both;animation-timeline:view();animation-range:entry 4% entry 74%}
  .lp-count{animation:lp-count linear both;animation-timeline:view();animation-range:entry 8% cover 42%}
  .lp-steps::after{animation:lp-line linear both;animation-timeline:view();animation-range:entry 25% cover 52%}
  .lp-hero .lp-glow--a{animation:lp-drift 19s ease-in-out infinite alternate,lp-parallax linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 70vh}
  .lp-hero .lp-chip--1,.lp-hero .lp-chip--3{animation:lp-bob 6s ease-in-out infinite,lp-parallax linear both;animation-timeline:auto,scroll(root);animation-range:normal,0 70vh}
}

/* a visitor who asks for less motion gets the finished page, still */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}