/* ==========================================================================
   Vellox · /assets/css/pages/index.css · the homepage ("Violet in motion")
   Home-only sections. Tokens, header, footer, closing call to action, buttons and the
   domain checker's result rows come from site.css; the pin, reveals and the gradient from
   motion.css / motion.js; the choreography from /assets/js/pages/index.js.

    1. Hero + tour        4. Pillars (bento)     7. Three steps
    2. Figures band       5. Domain checker      8. Motion-only states, print
    3. Two ways           6. StoreIQ band
   Breakpoints: phone < 760 · tablet 760–1023 · desktop >= 1024 (pinned tour) · wide >= 1680
   ========================================================================== */

/* Crop window: shows one card of a real screenshot (no extra file). Inline vars: the card's
   box in the 1x image (px). The <img> keeps its own srcset. */
.cw { --iw: 1192; position: relative; display: block; overflow: hidden; aspect-ratio: var(--w) / var(--h); background: #fff; }
.cw > img {
  position: absolute; display: block; max-width: none; height: auto;
  width: calc(var(--iw) / var(--w) * 100%);
  left: calc(var(--x) / var(--w) * -100%);
  top: calc(var(--y) / var(--h) * -100%);
}


/* 1. Hero + tour --------------------------------------------------------------------------
   One section, three layouts:
   A. .is-tour-on (motion, >= 1024 wide, 620–1500 tall): the pin is the viewport. The band is a
      curtain over the stage; the copy fades, the screen rises from its hero pose into place,
      then the steps take the left column. Each step has its colour (ground, plate, title).
   B. >= 1024 without the pin (reduced motion, very short or tall windows, no JS): the headline
      across the band, then the steps as tabs beside the screen.
   C. < 1024: the headline, then the screens as a swipeable row (phones on phones), dots and
      the current caption under it.
   ------------------------------------------------------------------------------------------ */
.ht {
  --c: var(--indigo); --c-ink: var(--indigo); --tint: #EEF0FF;
  --side-w: clamp(244px, 20vw, 300px);
  --col-gap: clamp(36px, 4vw, 72px);
  --stage-pad: clamp(24px, 4.6vh, 56px);
  position: relative; isolation: isolate;
  color: #fff;
}
.ht[data-step="1"] { --c: var(--violet); --c-ink: var(--violet-700); --tint: #F3F0FF; }
.ht[data-step="2"] { --c: var(--coral); --c-ink: #B03E1B; --tint: #FFF1EB; }
.ht[data-step="3"] { --c: var(--pink); --c-ink: #BE2767; --tint: #FFEFF6; }
.ht[data-step="4"] { --c: var(--sun); --c-ink: #845000; --tint: #FFF6E0; }

.ht__pin { position: relative; }
.ht__ground { position: absolute; inset: 0; z-index: -2; background: var(--violet-50); }
html.js-ui .ht__ground { background: var(--tint); transition: background-color .8s var(--ease); }
.ht__band {
  position: absolute; inset: 0 0 auto 0; z-index: -1;
  height: var(--band-h, 760px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--skew, 160px)), 0 100%);
  background: var(--indigo);
}
.ht__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  --gradient-1: #2F23A8; --gradient-2: #3B2DBF; --gradient-3: #6B4EFF; --gradient-4: #FF5FA2; --gradient-5: #FFC23D;
  background-color: var(--indigo);
  background-image: linear-gradient(var(--fallback-angle, 135deg), #2F23A8 0%, #3B2DBF 18%, #5038E6 36%, #6B4EFF 52%, #E95BB7 68%, #FF6E8E 78%, #FFB547 100%);
}
/* A soft shade along the header and behind the headline keeps white text AA on every colour */
.ht__band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgb(20 13 51 / .3) 0, rgb(20 13 51 / 0) 160px),
    linear-gradient(100deg, rgb(20 13 51 / .3) 0, rgb(20 13 51 / .16) 52%, rgb(20 13 51 / 0) 76%);
}
/* The canvas and the shade carry the band's cut themselves (see site.css: composited children) */
.ht__band > *, .ht__band::after { clip-path: inherit; }

.ht__grid { position: relative; display: grid; grid-template-areas: "copy" "stage" "side"; padding-top: var(--header-h); }
.ht__copy { grid-area: copy; position: relative; z-index: 3; padding: clamp(32px, 6vw, 84px) 0 clamp(36px, 4.6vw, 64px); }
.ht__stage { grid-area: stage; min-width: 0; }
.ht__side { grid-area: side; min-width: 0; }

.ht__title {
  max-width: 13em;
  font-size: clamp(2.6rem, .5rem + 6.2vw, 6.5rem);
  font-weight: 780;
  font-stretch: var(--wd-display, 114%);
  letter-spacing: -.034em;
  line-height: 1.06;                 /* the comma under ș / ț never reaches the next line */
  color: #fff;
  text-wrap: balance;
}
.ht__lede {
  max-width: 35em; margin-top: clamp(18px, 1.9vw, 28px);
  font-size: clamp(1.125rem, 1rem + .5vw, 1.4375rem); line-height: 1.5;
  color: #fff;
  text-shadow: 0 1px 14px rgb(20 13 51 / .28);
}
.ht__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: clamp(24px, 2.4vw, 36px); }
.ht__copy :focus-visible { outline-color: #fff; }
.ht__copy .btn:focus-visible { box-shadow: 0 0 0 3px var(--indigo), 0 0 0 5.5px #fff; }

/* Screens: a browser frame (tablet, desktop) or a phone (phones). The bar shows the real address. */
.ht__lift { position: relative; }
.ht__enter { position: relative; z-index: 1; }
/* Large screens: the screen rises into its hero pose from the first paint (CSS only, so the
   largest image never waits for a script) */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  html:not(.rm) .ht__enter { animation: home-rise 1s cubic-bezier(.16, 1, .3, 1) .08s both; transform-origin: 50% 100%; }
}
@keyframes home-rise { from { opacity: 0; transform: perspective(1600px) translate3d(0, 70px, 0) rotateX(10deg); } }
.ht__plate { display: none; }
.ht__frame { position: relative; }
.scr { margin: 0; min-width: 0; }
.scr__shot { position: relative; overflow: hidden; background: #fff; border-radius: 14px; box-shadow: var(--sh-frame); }
.scr__bar {
  display: flex; align-items: center; justify-content: center;
  height: var(--bar-h); padding: 0 16px;
  background: linear-gradient(#FDFCFF, #F7F5FE); border-bottom: 1px solid #ECE8F7;
}
.scr__addr {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  height: 24px; padding: 0 12px; border-radius: 999px; background: #EFECF9;
  font-size: .75rem; font-weight: 500; line-height: 24px; color: #6E6982; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.scr__addr::before {
  content: ""; flex: none; width: 9px; height: 11px;
  background: currentColor; opacity: .75;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2 4.5V3.2a2.5 2.5 0 0 1 5 0v1.3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='.5' y='4.5' width='8' height='6' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2 4.5V3.2a2.5 2.5 0 0 1 5 0v1.3' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Crect x='.5' y='4.5' width='8' height='6' rx='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.scr__screen { position: relative; }
.scr__view, .scr__view img { display: block; width: 100%; }
.scr__view img { transition: filter .5s var(--ease); }
/* The veil: while real UI is lifted off a screen, the screen steps back (never a glow) */
.scr__screen::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgb(240 236 255 / .2); opacity: 0;
  transition: opacity .5s var(--ease);
}
.ht.is-entered[data-co-state] .scr.is-current .scr__screen::after { opacity: 1; }
.ht.is-entered[data-co-state] .scr.is-current .scr__view img { filter: saturate(.72) brightness(.97); }
.mlift { display: none; }

/* Captions and the note live in the side column (under the dots on phones) */
.ht__caps { display: grid; gap: 14px; }
.hcap { font-size: .9375rem; line-height: 1.5; color: var(--slate); text-wrap: pretty; }
.hcap__name { display: block; margin-bottom: 2px; font-size: 1.0625rem; font-weight: 680; font-stretch: 106%; color: var(--ink); }
.hcap__link { white-space: nowrap; }
html.js-ui .ht__caps { gap: 0; }
html.js-ui .hcap { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility 0s linear .25s; }
html.js-ui .hcap.is-current { opacity: 1; visibility: visible; transition: opacity .45s var(--ease) .12s, visibility 0s; }
.ht__note { font-size: .8125rem; line-height: 1.45; color: var(--slate); }

/* Lifted real UI. --x/--y/--w: the card's own box in the 1192 × 936 content capture (%), so a
   card starts exactly on its source and then lifts straight towards the viewer, scaled from
   its own centre: the lifted copy always covers its source (no double image). */
.co-layer { display: none; }
.co {
  position: absolute; display: block; max-width: none;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: auto;
  border-radius: 9px;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: var(--o, 50% 50%);
  filter: drop-shadow(0 1px 1px rgb(42 27 110 / .08)) drop-shadow(0 6px 10px rgb(42 27 110 / .1));
  transition: opacity .25s var(--ease), transform .45s var(--ease), filter .3s var(--ease), visibility 0s linear .45s;
  will-change: transform;
}
.co--kpi     { --x: 2.52;  --y: 11.38; --w: 22.74; --s: 1.24; --ty: -8px; }
.co--mix     { --x: 67.29; --y: 46.90; --w: 30.20; --s: 1.1;  --ty: -10px; --d: .22s; }
.co--ora     { --x: 50.68; --y: 36.70; --w: 46.81; --s: 1.05; --ty: -6px; --o: 60% 70%; --d: .34s; }
.co--desc    { --x: 34.61; --y: 22.33; --w: 14.76; --s: 1.34; --tx: -10%; --ty: -12px; --d: .14s; z-index: 2; }
.co--click   { --x: 50.68; --y: 22.33; --w: 14.76; --s: 1.34; --tx: 10%;  --ty: -12px; --d: .22s; z-index: 2; }
.co--flux    { --x: 23.24; --y: 47.60; --w: 40.94; --s: 1.14; --ty: -10px; --d: .14s; }
.co--perf    { --x: 67.29; --y: 16.72; --w: 30.20; --s: 1.1;  --ty: -10px; --d: .26s; }
.co--aria    { --x: 22.39; --y: 64.53; --w: 41.28; --s: 1.2;  --ty: -8px; --d: .14s; z-index: 2; }
.co--andrei  { --x: 4.44;  --y: 73.24; --w: 29.95; --s: 1.2;  --ty: -4px; --d: .3s; }
.co--contrib { --x: 2.52;  --y: 42.20; --w: 63.42; --s: 1.06; --ty: -10px; --d: .14s; }
.co--rezumat { --x: 67.29; --y: 42.20; --w: 30.20; --s: 1.12; --ty: -10px; --d: .26s; z-index: 2; }

/* Lift states (index.js sets data-co-state: hero | 0–4) */
.ht[data-co-state="hero"] .co[data-co~="hero"],
.ht[data-co-state="0"] .co[data-co~="0"],
.ht[data-co-state="1"] .co[data-co~="1"],
.ht[data-co-state="2"] .co[data-co~="2"],
.ht[data-co-state="3"] .co[data-co~="3"],
.ht[data-co-state="4"] .co[data-co~="4"] {
  opacity: 1; visibility: visible;
  transform: translate3d(var(--tx, 0), var(--ty, -8px), 0) scale(var(--s, 1.12));
  filter: drop-shadow(0 2px 3px rgb(42 27 110 / .16)) drop-shadow(0 26px 34px rgb(42 27 110 / .3));
  transition:
    opacity .3s var(--ease) var(--d, .12s),
    transform .8s cubic-bezier(.2, 1.02, .3, 1) var(--d, .12s),
    filter .6s var(--ease) calc(var(--d, .12s) + .5s),
    visibility 0s;
}
/* Before the hero has entered, nothing is lifted yet */
html.mo .ht:not(.is-entered) .co { opacity: 0 !important; transition: none !important; }
/* Without JS: the hero card is lifted while no other screen is chosen */
html:not(.js-ui) .ht:not(:has(.scr:target)) .co[data-co~="hero"] {
  opacity: 1; visibility: visible;
  transform: translate3d(var(--tx, 0), var(--ty, -8px), 0) scale(var(--s, 1.12));
}

/* --- C. Phones and tablets: the screens become a swipeable row --------------------------- */
@media (max-width: 1023.98px) {
  .ht { --band-h: calc(var(--header-h) + var(--copy-h, 440px) + clamp(170px, 26vw, 260px)); --skew: clamp(56px, 12vw, 110px); }
  /* the copy runs the full width here: an even shade behind it, none behind the screens */
  .ht__band::after { background: linear-gradient(180deg, rgb(20 13 51 / .3) 0, rgb(20 13 51 / .16) 150px, rgb(20 13 51 / .16) 62%, rgb(20 13 51 / 0) 86%); }
  .ht__enter { display: contents; }            /* no entrance gate: the first screen paints at once */
  .ht__frame {
    --scr-w: min(78vw, 640px);
    display: flex; gap: 18px;
    margin-inline: calc(-1 * var(--gutter));
    padding: 10px calc(50% + var(--gutter) - var(--scr-w) / 2) 34px;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .ht__frame::-webkit-scrollbar { display: none; }
  .ht__frame:focus-visible { outline-offset: -6px; border-radius: 24px; }
  .scr { flex: 0 0 auto; width: var(--scr-w); scroll-snap-align: center; transform-origin: 50% 60%; }
  .ht__side { display: grid; justify-items: center; gap: 16px; padding-bottom: clamp(56px, 8vw, 88px); color: var(--ink); text-align: center; }
  .ht__rail { display: none; }
  .ht__steps { display: flex; justify-content: center; gap: 2px; }
  .tstep__go { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; }
  .tstep__go::before {
    content: ""; width: 8px; height: 8px; border-radius: 8px; background: var(--slate-2, #8A859C);
    transition: width .3s var(--ease), background-color .3s var(--ease);
  }
  .tstep.is-current .tstep__go::before { width: 26px; background: var(--c); }
  .tstep__ico { display: none; }
  .tstep__title, .tstep__desc { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ht__caps { max-width: 32em; }
  .ht__note { max-width: 30em; }
  /* depth that follows the swipe (index.js writes --d, the distance from the centre in screens) */
  html.js-ui .ht__frame .scr {
    transform: perspective(1100px) rotateY(calc(var(--d, 0) * -16deg)) scale(calc(1 - var(--ad, 0) * .1));
    opacity: calc(1 - var(--ad, 0) * .3);
  }
}
@media (max-width: 759.98px) {
  .ht { --band-h: calc(var(--header-h) + var(--copy-h, 430px) + 240px); --skew: 64px; }
  .ht__canvas { --fallback-angle: 174deg; }
  .ht__title { font-stretch: 108%; letter-spacing: -.03em; }
  .ht__actions { flex-direction: column; align-items: stretch; gap: 4px; }
  .ht__actions .btn--light { width: 100%; }
  /* the second action is a text link under the main button */
  .ht__more.btn {
    align-self: flex-start; min-height: 44px; padding: 0 2px;
    background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
    font-weight: 620; color: #fff;
    text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .25em; text-decoration-color: rgb(255 255 255 / .55);
  }
  .ht__more.btn:hover { background: none; text-decoration-color: #fff; }
  .ht__more.btn:focus-visible { box-shadow: none; outline: 2.5px solid #fff; outline-offset: 2px; }
  .ht__frame { --scr-w: 252px; }
  .scr__shot {
    overflow: visible; padding: 7px; border-radius: 40px; background: #0F0B1E;
    box-shadow: inset 0 0 0 1.5px #3A3354, 0 2px 4px rgb(20 13 51 / .12), 0 30px 50px -24px rgb(42 27 110 / .55);
  }
  .scr__bar { display: none; }
  .scr__view img, .scr__screen::after { border-radius: 33px; }
  /* one real card lifts off the centred phone when the row settles */
  .mlift {
    display: block; position: absolute; z-index: 2; pointer-events: none;
    left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%); height: calc(var(--h) * 1%);
    overflow: hidden; border-radius: 7px; background: #fff;
    opacity: 0; transform: translate3d(0, 0, 0) scale(1);
    transition: opacity .2s var(--ease), transform .35s var(--ease), box-shadow .3s var(--ease);
  }
  .mlift img { position: absolute; display: block; max-width: none; height: auto; width: calc(10000% / var(--w)); left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); }
  .scr.is-lift .mlift {
    opacity: 1; transform: translate3d(0, -6px, 0) scale(1.2);
    box-shadow: 0 2px 4px rgb(20 13 51 / .18), 0 20px 30px -12px rgb(20 13 51 / .55);
    transition: opacity .2s var(--ease), transform .75s cubic-bezier(.2, 1.02, .3, 1), box-shadow .5s var(--ease) .35s;
  }
  .scr.is-lift .scr__screen::after { opacity: 1; }
  .scr.is-lift .scr__view img { filter: saturate(.72) brightness(.96); }
}

/* --- B. Large screens without the pin: the headline across the band, then the steps beside
   the screen (tabs) -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .ht:not(.is-tour-on) { --band-h: calc(var(--header-h) + var(--copy-h, 520px) + 250px); --skew: 200px; }
  .ht:not(.is-tour-on) .ht__grid {
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-areas: "copy copy" "side stage";
    column-gap: var(--col-gap);
    padding-bottom: clamp(80px, 7vw, 120px);
  }
  .ht:not(.is-tour-on) .ht__side { align-self: start; padding-top: clamp(220px, 17vw, 300px); }
  .ht:not(.is-tour-on) .ht__frame { display: grid; }
  .ht:not(.is-tour-on) .scr { grid-area: 1 / 1; visibility: hidden; }
  /* without JS: the first screen, or the one in the address (#ecran-…) */
  .ht:not(.is-tour-on):not(:has(.scr:target)) .scr:first-child,
  .ht:not(.is-tour-on) .scr:target { visibility: visible; }
  /* with JS: the chosen screen */
  html.js-ui .ht:not(.is-tour-on) .scr { visibility: hidden !important; }
  html.js-ui .ht:not(.is-tour-on) .scr.is-current { visibility: visible !important; }
  .ht:not(.is-tour-on) .ht__plate { display: block; --plate: 1; }
}

/* --- A + B: the frame, the plate and the steps on large screens ------------------------------ */
@media (min-width: 1024px) {
  .co-layer {
    display: block; position: absolute; z-index: 4; pointer-events: none;
    left: 0; right: 0; top: var(--bar-h); aspect-ratio: 1192 / 936;
  }
  .ht__plate {
    position: absolute; inset: 0; z-index: 0;
    border-radius: 28px; background: var(--c);
    opacity: var(--plate, 0);
    transform: translate3d(calc(var(--plate, 0) * 26px), calc(var(--plate, 0) * 26px), 0) rotate(calc(var(--plate, 0) * -2deg));
    transition: background-color .8s var(--ease);
  }
  .ht__side { position: relative; color: var(--ink); }
  .ht__steps { position: relative; display: grid; gap: 4px; }
  .tstep { position: relative; }
  .tstep:nth-child(1) { --sc: var(--indigo); --sc-tint: #E3E6FF; --sc-ink: var(--indigo); --sc-on: #fff; }
  .tstep:nth-child(2) { --sc: var(--violet); --sc-tint: var(--violet-tint); --sc-ink: var(--violet-700); --sc-on: #fff; }
  .tstep:nth-child(3) { --sc: var(--coral); --sc-tint: var(--coral-tint); --sc-ink: #B03E1B; --sc-on: var(--night); }
  .tstep:nth-child(4) { --sc: var(--pink); --sc-tint: var(--pink-tint); --sc-ink: #BE2767; --sc-on: var(--night); }
  .tstep:nth-child(5) { --sc: var(--sun); --sc-tint: var(--sun-tint); --sc-ink: #845000; --sc-on: var(--night); }
  .tstep__go {
    position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; align-items: center;
    min-height: 50px; padding: 5px 10px 5px 5px; margin-left: -5px; border-radius: 16px;
    text-decoration: none; color: var(--slate);
    transition: background-color .25s var(--ease);
  }
  .tstep__go:hover { background: rgb(22 18 31 / .04); }
  .tstep__ico {
    display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
    background: var(--sc-tint); color: var(--sc-ink);
    transition: background-color .35s var(--ease), color .35s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
  }
  .tstep__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .tstep__title {
    display: block; white-space: nowrap;
    font-size: clamp(1.5rem, .78rem + 1.12vw, 2rem); font-weight: 760; font-stretch: 104%; letter-spacing: -.022em; line-height: 1.12;
    color: var(--ink-2);
    transform: scale(.6); transform-origin: 0 50%;
    transition: transform .5s var(--ease), color .35s var(--ease);
  }
  .tstep__desc {
    grid-column: 2; display: block; max-height: 0; opacity: 0; overflow: hidden;
    font-size: clamp(1.0625rem, .95rem + .3vw, 1.1875rem); line-height: 1.35; color: var(--ink-2);
    text-wrap: balance;
    transition: max-height .5s var(--ease), opacity .35s var(--ease);
  }
  .tstep.is-current .tstep__title { transform: none; color: var(--sc-ink); }
  .tstep.is-current .tstep__desc { max-height: 2.8em; opacity: 1; transition: max-height .5s var(--ease), opacity .45s var(--ease) .15s; }
  .tstep.is-current .tstep__ico { background: var(--sc); color: var(--sc-on); transform: scale(1.08); box-shadow: 0 10px 22px -10px var(--sc); }
  .tstep.is-done .tstep__ico { box-shadow: inset 0 0 0 1.5px var(--sc); }
  .ht__rail { position: absolute; left: 19px; top: 30px; width: 2px; height: var(--rail-h, 260px); border-radius: 2px; background: rgb(22 18 31 / .08); }
  .ht__rail-fill {
    position: absolute; inset: 0; border-radius: inherit;
    background: linear-gradient(var(--indigo), var(--violet) 25%, var(--coral) 50%, var(--pink) 75%, var(--sun));
    transform-origin: 50% 0; transform: scaleY(var(--tour-progress, 0));
  }
  .ht:not(.is-tour-on) .ht__rail { display: none; }
  .ht__caps { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgb(22 18 31 / .1); }
  html.js-ui .hcap__name { display: none; }
  .ht__note { margin-top: 18px; max-width: 26em; }
}

/* --- A. Pinned ---------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .ht.is-tour-on .ht__pin { height: 100vh; }
  .ht.is-tour-on .ht__band { inset: 0; height: auto; clip-path: polygon(0 0, 100% 0, 100% var(--br, 60%), 0 var(--bl, 82%)); }
  .ht.is-tour-on .ht__grid {
    height: 100%;
    grid-template-columns: var(--side-w) minmax(0, 1fr);
    grid-template-areas: "side stage";
    column-gap: var(--col-gap);
    align-items: center;
  }
  .ht.is-tour-on .ht__copy {
    grid-area: auto; position: absolute; z-index: 3;
    top: var(--header-h); left: var(--gutter); right: var(--gutter);
    padding: clamp(24px, 6.4vh, 84px) 0 0;
  }
  .ht.is-tour-on .ht__stage { display: flex; justify-content: center; align-items: center; height: 100%; padding-block: var(--stage-pad); }
  .ht.is-tour-on .ht__lift { width: min(100%, calc((100vh - var(--header-h) - 2 * var(--stage-pad) - var(--bar-h)) * 1.2735)); }
  .ht.is-tour-on .ht__plate { display: block; }
  .ht.is-tour-on .ht__side { opacity: var(--side-o, 0); pointer-events: none; }
  .ht.is-tour-on.is-steps .ht__side { pointer-events: auto; }
  .ht.is-tour-on.is-steps .ht__copy { pointer-events: none; }
  /* screens: the new one fades in over the old, which stays opaque underneath (no dip) */
  .ht.is-tour-on .scr[data-tour-screen] { transform: none; transition: opacity 0s linear .5s, visibility 0s linear .5s; }
  .ht.is-tour-on .scr[data-tour-screen].is-active { z-index: 2; transition: opacity .5s var(--ease), visibility 0s; }
  .ht.is-tour-on .scr .scr__view img { transform: scale(1.01); transition: transform .9s var(--ease), filter .5s var(--ease); }
  .ht.is-tour-on .scr.is-active .scr__view img { transform: none; }
}
@media (min-width: 1680px) {
  .ht__title { font-size: 6.75rem; }
}


/* 2. Figures: the flat violet statement band --------------------------------------------- */
.figs { padding-block: clamp(80px, 5vw + 44px, 124px) clamp(52px, 3vw + 28px, 84px); }
.figs__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
@media (min-width: 760px) { .figs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px clamp(40px, 7vw, 120px); } }
.fig { position: relative; display: grid; align-content: start; padding-top: 26px; border-top: 1px solid rgb(255 255 255 / .3); container-type: inline-size; }
.fig::before { content: ""; position: absolute; left: 0; top: -2px; width: 56px; height: 4px; border-radius: 4px; background: var(--tick, #fff); }
.fig--1 { --tick: var(--sun); }
.fig--2 { --tick: var(--coral); }
.fig--3 { --tick: var(--pink); }
.fig--4 { --tick: #fff; }
.fig__num {
  display: block; width: max-content; max-width: 100%;
  font-size: clamp(3.5rem, 1.1rem + 6.4vw, 8.25rem);
  font-size: min(clamp(3.5rem, 1.1rem + 6.4vw, 8.25rem), 20cqi);
  font-weight: 800; font-stretch: 78%;
  letter-spacing: -.018em; line-height: .94;
  font-variant-numeric: lining-nums tabular-nums;
  white-space: nowrap; color: #fff;
}
.fig__label { display: block; max-width: 22em; margin-top: 18px; font-size: clamp(1.0625rem, .98rem + .32vw, 1.3125rem); font-weight: 620; line-height: 1.35; color: #fff; }
.fig__date { display: block; margin-top: 6px; font-size: .9375rem; line-height: 1.4; color: #fff; }

/* The 21 modules. Default (no JS, reduced motion): the chips wrap. With motion: one row that
   slides sideways only while the page scrolls (scroll-linked, never on its own). */
.mods {
  display: flex; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter));
  margin: clamp(56px, 5vw, 88px) auto 0; padding-inline: var(--gutter);
}
.mods__track { display: flex; flex-wrap: wrap; gap: 10px; }
.mods__track--clone { display: none; }
html.js-mods .mods {
  max-width: none; padding-inline: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
html.js-mods .mods__track { flex: none; flex-wrap: nowrap; padding: 6px 10px 18px 0; will-change: transform; }
html.js-mods .mods__track--clone { display: flex; }
.mod {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  height: 46px; padding: 0 20px 0 16px; border-radius: 999px;
  background: #fff; color: var(--ink);
  box-shadow: 0 1px 2px rgb(20 13 51 / .2), 0 12px 24px -16px rgb(20 13 51 / .7);
  font-size: .96875rem; font-weight: 600; font-stretch: 104%; white-space: nowrap;
}
.mod::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--violet)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dot, var(--violet)) 20%, transparent); }
.mod--email { --dot: var(--violet); }
.mod--sms { --dot: var(--coral); }
.mod--ai { --dot: var(--pink); }
.mod--data { --dot: var(--sun); }
.mod--grow { --dot: var(--indigo); }
@media (max-width: 759.98px) { .mod { height: 42px; padding: 0 16px 0 14px; font-size: .90625rem; } .mods__track { gap: 8px; } }


/* 3. Two ways to work ---------------------------------------------------------------------- */
.ways { padding-block: var(--sec) calc(var(--sec) * .62); color: var(--fg); overflow-x: clip; }
html:not(.mo-bg) .ways { background: #fff; }
.ways__grid { display: grid; gap: 56px; }
@media (min-width: 1024px) {
  .ways__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 5vw, 96px); align-items: center; }
}
.ways .lede { margin-top: 18px; }
.who { display: grid; gap: 10px; margin-top: clamp(28px, 3vw, 40px); }
.who__steps { display: none; }
.who__row {
  display: grid; gap: 14px; padding: 16px; border-radius: 22px; background: #fff;
  box-shadow: inset 0 0 0 1px var(--line), var(--sh-1);
  cursor: pointer;
  transition: box-shadow .35s var(--ease), opacity .35s var(--ease);
}
.who__row.is-selected { box-shadow: inset 0 0 0 2px var(--violet), 0 22px 44px -26px rgb(107 78 255 / .55); }
html.js-ui .who__row:not(.is-selected) .who__bar { background: var(--violet-100); color: var(--violet-700); box-shadow: none; }
html.js-ui .who__row:not(.is-selected) .who__cell { background: var(--mist, #FAF9FF); }
html.js-ui .who__row:not(.is-selected):hover { box-shadow: inset 0 0 0 1px var(--line-2), var(--sh-2); }
.who__mode {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; row-gap: 2px;
  padding: 2px; border: 0; background: none; text-align: left; color: var(--ink);
}
.who__radio { grid-row: span 2; width: 20px; height: 20px; margin-top: 2px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--line-field, #847E9C); transition: box-shadow .3s var(--ease); }
.who__mode[aria-pressed="true"] .who__radio { box-shadow: inset 0 0 0 6px var(--violet); }
.who__name { font-size: 1.125rem; font-weight: 700; font-stretch: 106%; letter-spacing: -.01em; }
.who__sub { font-size: .9375rem; color: var(--slate); }
.who__bar {
  display: flex; align-items: center; min-height: 56px; padding: 14px 18px; border-radius: 14px;
  background: var(--violet); color: #fff; font-weight: 620; line-height: 1.3;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .18);
  transition: background-color .35s var(--ease), color .35s var(--ease);
}
.who__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.who__cell { display: grid; gap: 4px; align-content: start; padding: 12px 14px; border-radius: 14px; background: var(--violet-50); font-size: .9375rem; font-weight: 560; line-height: 1.3; color: var(--ink); }
.who__step { font-size: .75rem; font-weight: 640; color: var(--violet-700); }
@media (min-width: 760px) {
  .who__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 0 18px; font-size: .8125rem; font-weight: 640; color: var(--fg-2); }
  .who__cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .who__cell { font-size: .875rem; padding: 12px; min-height: 76px; }
  .who__step { display: none; }
}
.ways__detail { display: grid; gap: 28px; margin-top: 28px; }
html.js-ui .ways__detail { gap: 0; }
html.js-ui .ways__pane { grid-area: 1 / 1; }
.ways__lead { max-width: 30em; margin-bottom: 22px; font-size: 1.125rem; font-weight: 560; line-height: 1.45; color: var(--fg); }
.ways [data-when] { transition: opacity .4s var(--ease), transform .5s var(--ease); }
.ways [data-when].is-off { opacity: 0; pointer-events: none; }
.ways__pane.is-off { transform: translateY(6px); }

/* The photo runs off the right edge (the page's full-bleed moment); real UI, readable, on it */
.ways__visual { position: relative; padding-bottom: clamp(120px, 11vw, 160px); }
.ways__photo { overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 4 / 3.3; box-shadow: var(--sh-photo); }
.ways__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 32%; }
.ways__shots { position: absolute; left: 0; bottom: 0; display: grid; gap: 16px; width: min(70%, 400px); }
.ways__shot { margin: 0; }
html.js-ui .ways__shots { gap: 0; }
html.js-ui .ways__shot { grid-area: 1 / 1; align-self: end; }
.ways__shot--sms { width: 78%; }
.ways__card { border-radius: 16px; box-shadow: 0 0 0 1px rgb(22 18 31 / .06), 0 2px 4px rgb(42 27 110 / .08), 0 34px 60px -28px rgb(42 27 110 / .5); }
.ways__shot .cap { margin-top: 12px; max-width: 32em; font-size: .875rem; line-height: 1.45; color: var(--fg-2); }
@media (min-width: 1024px) {
  .ways__visual { margin-right: calc(-1 * max(var(--gutter), (100vw - var(--max)) / 2)); }
  .ways__photo { margin-left: 12%; aspect-ratio: auto; height: clamp(440px, 38vw, 620px); border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: 0 40px 80px -44px rgb(42 27 110 / .5); }
  .ways__shots { left: -4%; }
  html.js-unmask .ways__photo[data-unmask] { clip-path: inset(calc(var(--unmask, 0) * 16%) 0 calc(var(--unmask, 0) * 16%) calc(var(--unmask, 0) * 10%) round calc(var(--r-xl) + var(--unmask, 0) * 12px) 0 0 calc(var(--r-xl) + var(--unmask, 0) * 12px)); }
}
@media (max-width: 759.98px) {
  .ways__visual { padding-bottom: 140px; }
  .ways__shots { left: 4%; width: 92%; }
}


/* 4. Pillars (bento) ----------------------------------------------------------------------- */
.pil { padding-block: calc(var(--sec) * .9) calc(var(--sec) * .62); color: var(--fg); }
html:not(.mo-bg) .pil { background: var(--violet-50); }
.pil__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 48px; margin-bottom: clamp(36px, 2.4vw + 20px, 60px); }
.pil__head h2 { max-width: 13em; }
.pil__aside { padding-bottom: .5em; }
.bento { display: grid; gap: 16px; }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
  .tile--email { grid-column: span 5; }
  .tile--sms { grid-column: span 7; }
  .tile--ai { grid-column: span 7; }
  .tile--data { grid-column: span 5; }
}
.tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: clamp(440px, 34vw, 540px);
  border-radius: var(--r-xl);
  color: var(--ink);
  box-shadow: 0 1px 2px rgb(42 27 110 / .05);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.tile:hover { transform: translateY(-6px); box-shadow: 0 34px 64px -36px rgb(42 27 110 / .55); }
.tile__text { position: relative; z-index: 2; display: grid; gap: 10px; justify-items: start; max-width: 27rem; padding: clamp(26px, 2.6vw, 36px); }
.tile__title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); font-weight: 740; font-stretch: 110%; letter-spacing: -.024em; line-height: 1.08; }
.tile__title a { text-decoration: none; color: inherit; }
.tile__title a::after { content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; }
.tile__title a:focus-visible { outline: 0; }
.tile:has(.tile__title a:focus-visible) { outline: 2.5px solid var(--violet); outline-offset: 4px; }
.tile__desc { font-size: 1rem; line-height: 1.5; color: var(--tile-fg-2, var(--slate)); max-width: 24em; }
.tile__art { position: relative; flex: 1; min-height: 230px; }
.art { position: absolute; display: block; max-width: none; height: auto; border-radius: 12px; }
img.art { filter: var(--sh-float); }
.cw.art { box-shadow: 0 0 0 1px rgb(22 18 31 / .05), 0 2px 4px rgb(42 27 110 / .08), 0 22px 36px -18px rgb(42 27 110 / .38); }
.tile .art { transition: transform .7s var(--ease); }
.tile:hover .art--pas, .tile:hover .art--aria, .tile:hover .art--venit { transform: translate3d(0, -6px, 0); }
.tile:hover .art--rec, .tile:hover .art--phone, .tile:hover .art--scor { transform: translate3d(0, -10px, 0); }

.tile--email { background: #ECE6FF; }
.tile--email .art--rec { right: 7%; top: 0; width: min(52%, 270px); }
.tile--email .art--pas { left: 7%; bottom: 12%; width: min(86%, 400px); }

.tile--sms { background: var(--peach); --tile-fg-2: #6B4A42; }
.tile--sms .tile__art { min-height: 300px; }
.tile--sms .art--phone { right: 9%; top: -18%; width: min(36%, 236px); border-radius: 0; }
@media (min-width: 900px) { .tile--sms .tile__text { max-width: 54%; } .tile--sms .art--phone { top: -60%; } }
.tile--sms .art--ana { left: 6%; bottom: 150px; width: min(56%, 372px); }
.tile--sms .art--aria { left: 13%; bottom: 30px; width: min(58%, 384px); }

.tile--ai { background: var(--night); color: #fff; --tile-fg-2: rgb(255 255 255 / .88); justify-content: flex-end; }
.tile__photo { position: absolute; inset: 0; z-index: 0; }
.tile__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 45% 36%; transition: transform 1.2s var(--ease); }
.tile--ai:hover .tile__photo img { transform: scale(1.03); }
.tile__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(20 13 51 / .84) 0%, rgb(20 13 51 / .5) 30%, rgb(20 13 51 / 0) 58%); }
.tile--ai .tile__art { position: absolute; inset: 0; z-index: 1; }
.tile--ai .art--apel { right: 5%; bottom: 7%; width: min(30%, 236px); }
.tile--ai :focus-visible, .tile--ai:has(.tile__title a:focus-visible) { outline-color: #fff; }

/* Analiză & date: the sun of the colour key */
.tile--data { background: var(--sun-tint); --tile-fg-2: #6E4400; }
.tile--data::before { content: ""; position: absolute; right: -60px; bottom: -60px; z-index: -1; width: 240px; height: 240px; border-radius: 50%; background: var(--sun); opacity: .5; }
.tile--data .art--venit { left: 7%; bottom: 14%; width: min(48%, 214px); }
.tile--data .art--scor { right: 7%; top: 2%; width: min(50%, 230px); }
.pil__note { margin-top: 20px; font-size: .8125rem; color: var(--fg-2); }
@media (max-width: 899.98px) {
  .tile { min-height: 0; }
  .tile__art { min-height: 240px; }
  .tile--email .tile__art { min-height: 290px; }
  .tile--email .art--rec { width: min(56%, 240px); }
  .tile--sms .tile__art { min-height: 330px; }
  .tile--sms .art--phone { top: 2%; right: 6%; width: 150px; }
  .tile--sms .art--ana { left: 6%; bottom: 128px; width: 74%; }
  .tile--sms .art--aria { left: 10%; bottom: 20px; width: 80%; }
  .tile--ai { min-height: 0; justify-content: flex-start; }
  .tile--ai .tile__photo { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3.3; }
  .tile--ai .tile__photo::after { background: linear-gradient(0deg, rgb(20 13 51 / .5) 0%, rgb(20 13 51 / 0) 34%); }
  .tile--ai .tile__art { inset: 0 0 auto 0; aspect-ratio: 4 / 3.3; }
  .tile--ai .art--apel { right: 4%; bottom: 5%; top: auto; width: 44%; max-width: 220px; }
  .tile--ai .tile__text { padding-top: 22px; max-width: none; }
  .tile--data .tile__art { min-height: 270px; }
  .tile--data .art--venit { width: min(52%, 200px); }
  .tile--data .art--scor { width: min(52%, 210px); }
}


/* 5. Domain checker (home layout; result rows from site.css) ------------------------------- */
.dc { padding-block: calc(var(--sec) * .9) var(--sec); color: var(--fg); }
html:not(.mo-bg) .dc { background: #fff; }
.dc__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) { .dc__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(48px, 6vw, 104px); align-items: center; } }
.dc .lede { margin-top: 18px; }
.dc__help { margin-top: 28px; max-width: 30em; padding-top: 24px; border-top: 1px solid var(--fg-line); font-size: 1rem; line-height: 1.6; color: var(--fg-2); }
.dc__panel {
  padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-xl);
  background: #fff; color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line), 0 2px 4px rgb(42 27 110 / .04), 0 40px 80px -44px rgb(42 27 110 / .45);
}
.dc__panel .dc-label { display: block; margin-bottom: 10px; font-size: .9375rem; font-weight: 640; }
.dc__panel .dc-form__row {
  display: flex; gap: 8px; padding: 6px; border-radius: 999px;
  background: var(--violet-50); box-shadow: inset 0 0 0 1.5px var(--line-field, #847E9C);
  transition: box-shadow .2s var(--ease), background-color .2s var(--ease);
}
.dc__panel .dc-form__row:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--violet), 0 0 0 5px rgb(107 78 255 / .14); }
.dc__panel .dc-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding-left: 14px; }
.dc__panel .dc-field__icon { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--slate); stroke-width: 1.4; }
.dc__panel .dc-input { width: 100%; min-width: 0; height: 48px; border: 0; background: transparent; font-size: 1.0625rem; color: var(--ink); outline: 0; }
.dc__panel .dc-input::placeholder { color: var(--placeholder, #6E6982); opacity: 1; }
.dc__panel .dc-input[aria-invalid="true"] { color: var(--bad); }
.dc__panel .dc-out { margin-top: 18px; }
@media (max-width: 559.98px) {
  .dc__panel .dc-form__row { flex-direction: column; border-radius: 22px; }
  .dc__panel .dc-field { padding: 0 6px 0 12px; }
  .dc__panel .dc-submit { width: 100%; }
}


/* 6. StoreIQ: the night band ----------------------------------------------------------------
   It keeps its own ground. With motion it opens from a rounded card to the full width as it
   arrives (index.js drives --siq-in / --siq-r), the phone rises and the chart slides in. */
.siq {
  position: relative; isolation: isolate;
  padding-block: var(--sec) calc(var(--sec) * .72); color: #fff;
  --fg: #fff; --fg-2: rgb(255 255 255 / .78); --fg-line: rgb(255 255 255 / .16);
}
.siq::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--night);
  clip-path: inset(0 var(--siq-in, 0px) round var(--siq-r, 0px));
}
.siq :focus-visible { outline-color: #fff; }
.siq .btn:focus-visible { box-shadow: 0 0 0 3px var(--night), 0 0 0 5.5px #fff; }
.siq ::selection { background: #fff; color: var(--night); }
.siq__grid { display: grid; gap: 56px; }
@media (min-width: 1024px) { .siq__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(48px, 5vw, 88px); align-items: center; } }
.siq h2 { font-size: clamp(2.125rem, 1.25rem + 2.4vw, 3.5rem); color: #fff; }
.siq__brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; font-size: 1rem; color: var(--fg-2); }
.siq__brand img { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 6px 18px -8px rgb(0 0 0 / .5); }
.siq__brand strong { color: #fff; font-weight: 700; }
.siq .lede { margin-top: 18px; color: var(--fg-2); }
.siq__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin: 30px 0; padding-top: 24px; border-top: 1px solid var(--fg-line); }
.siq__amount { font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.375rem); font-weight: 760; font-stretch: 112%; letter-spacing: -.025em; color: #fff; }
.siq__note { font-size: 1rem; color: var(--fg-2); }
.siq .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5); }
.siq .btn--ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }
.siq__visual { margin: 0; }
.siq__stage { position: relative; padding: 0 0 clamp(36px, 4vw, 60px); margin-left: 6%; }
.siq__photo { overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 3 / 2.15; box-shadow: 0 50px 100px -50px rgb(0 0 0 / .7); }
.siq__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 42%; }
.siq__phone { position: absolute; right: 5%; top: -9%; width: 33%; }
.siq__pace { position: absolute; left: -9%; bottom: 0; width: 64%; }
.siq__swap { display: grid; overflow: hidden; border-radius: 22px; box-shadow: 0 0 0 1px rgb(255 255 255 / .08), 0 40px 70px -30px rgb(0 0 0 / .75), 0 8px 18px -8px rgb(0 0 0 / .4); background: #0E1A1F; }
.siq__pace .siq__swap { border-radius: 14px; background: #fff; }
.siq__swap img { grid-area: 1 / 1; width: 100%; transition: opacity .45s var(--ease); }
.siq [data-theme="dark"] img[data-when="light"], .siq [data-theme="light"] img[data-when="dark"] { opacity: 0; }
.siq__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; margin-top: 22px; }
.siq__cap { flex: 1 1 24em; max-width: 36em; font-size: .875rem; line-height: 1.5; color: var(--fg-2); }
.siq__toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / .08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .22); }
.siq__tbtn { height: 40px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgb(255 255 255 / .82); font-size: .875rem; font-weight: 620; transition: background-color .25s var(--ease), color .25s var(--ease); }
.siq__tbtn:hover { color: #fff; }
.siq__tbtn[aria-pressed="true"] { background: #fff; color: var(--deep); box-shadow: 0 4px 10px -4px rgb(0 0 0 / .4); }
@media (max-width: 759.98px) {
  .siq__stage { margin-left: 0; padding-bottom: 0; }
  .siq__phone { width: 40%; right: 4%; top: -12%; }
  .siq__pace { display: none; }                 /* too small to read on a phone */
  .siq__swap { border-radius: 16px; }
}


/* 7. Three steps --------------------------------------------------------------------------- */
.how { padding-block: var(--sec) calc(var(--sec) * .55); color: var(--fg); }
html:not(.mo-bg) .how { background: #fff; }
.how__grid { display: grid; gap: 48px; }
@media (min-width: 1024px) { .how__grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(48px, 7vw, 120px); align-items: center; } }
.how__photo { overflow: hidden; border-radius: var(--r-xl); aspect-ratio: 4 / 4.6; max-width: 520px; box-shadow: var(--sh-photo); }
.how__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
@media (max-width: 1023.98px) { .how__photo { aspect-ratio: 4 / 3.4; max-width: none; } }
.how__steps { position: relative; display: grid; gap: 30px; margin-top: clamp(32px, 3vw, 48px); --p: 1; }
.how__steps::before, .how__steps::after { content: ""; position: absolute; left: 23px; top: 50px; bottom: 50px; width: 2px; border-radius: 2px; background: var(--fg-line); }
.how__steps::after { background: linear-gradient(var(--violet), var(--pink)); transform-origin: 50% 0; transform: scaleY(var(--p)); }
.hstep { position: relative; display: grid; gap: 6px; padding-left: 76px; min-height: 48px; }
.hstep__n {
  position: absolute; left: 0; top: -4px; z-index: 1;
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: #fff; color: var(--violet-700);
  box-shadow: inset 0 0 0 2px var(--violet), 0 8px 20px -10px rgb(107 78 255 / .6);
  font-size: 1.125rem; font-weight: 760; font-stretch: 112%;
}
.hstep__title { color: var(--fg); }
.hstep__text { max-width: 30em; color: var(--fg-2); }


/* 8. Motion-only states, print ------------------------------------------------------------- */
/* Photos open from a smaller window as they scroll in: more cinematic on this page */
html.js-unmask .page-acasa [data-unmask]:not(.ways__photo) { clip-path: inset(calc(var(--unmask, 0) * 16%) calc(var(--unmask, 0) * 10%) round calc(var(--r-xl) + var(--unmask, 0) * 14px)); }
html.js-unmask .page-acasa [data-unmask] img { transform: scale(calc(1 + var(--unmask, 0) * .12)); }

@media print {
  .ht__band, .ht__ground, .ht__plate, .co-layer, .mlift, .mods { display: none !important; }
  .ht, .ht__title, .ht__lede { color: var(--ink); }
  .figs, .figs * { color: var(--ink) !important; background: none !important; }
}