/* ==========================================================================
   Vellox · /storeiq/ — page-only styles (every selector starts with .page-storeiq).
   Shared components come from site.css; this file only adds what StoreIQ needs:
    1. Hero: app-icon kicker, the trial note, the theme toggle over the band, the
       IQ Assistant panel lifted off the dashboard
    2. Screens follow the theme toggle (site.js sets data-tema on each scope)
    3. Feature stage: lede + bullets, then the screen; IQ Assistant in portrait
    4. „Ce mai primești”: the packing photo with StoreIQ's revenue card lifted off it
    5. Night band: platform rows (official Google Play badge), the two phones
    6. The privacy close
    7. Without JavaScript: every feature panel shows, the JS-only switches hide
   ========================================================================== */

.page-storeiq {
  /* StoreIQ's own app grounds, so a frame blends into the screenshot it holds */
  --siq-app: #EEF3F1;
  --siq-app-dark: #0F1817;
  --siq-bar-dark: #15211F;
  /* Hero: size and drop of the lifted IQ Assistant panel (the caption starts after it) */
  --siq-lw: 29%;
  --siq-lb: -9%;
}
@media (min-width: 760px) and (max-width: 1099.98px) {
  .page-storeiq { --siq-lw: 36%; --siq-lb: -12%; }
}

/* 1. Hero ------------------------------------------------------------------- */
.page-storeiq .siq-kicker { gap: 10px; padding: 5px 16px 5px 5px; }
.page-storeiq .siq-kicker::before { display: none; }
.page-storeiq .siq-kicker img { flex: none; width: 30px; height: 30px; border-radius: 9px; box-shadow: 0 2px 8px rgb(20 13 51 / .35); }
.page-storeiq .siq-kicker strong { font-weight: 720; }
.page-storeiq .siq-hero__note { margin-left: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--on-dark); }
/* The theme switch sits on the band, right above the screen it changes. From 1100px it hangs in
   the empty right end of the copy row, so the screen starts high enough to rise in on load. */
.page-storeiq .siq-hero__bar { position: relative; z-index: 3; display: flex; justify-content: flex-end; margin-bottom: var(--s4); }
@media (min-width: 1100px) {
  .page-storeiq .siq-hero__bar { position: absolute; right: 0; top: -66px; margin: 0; }
}
.page-storeiq .siq-toggle { background: var(--paper); box-shadow: 0 1px 2px rgb(20 13 51 / .18), 0 16px 34px -14px rgb(20 13 51 / .6); }
.page-storeiq .siq-hero__view { background: var(--siq-app); }
.page-storeiq .siq-assist .crop { border-radius: var(--r-md); background: var(--paper); box-shadow: 0 0 0 1px rgb(22 18 31 / .07); }
/* The caption runs beside the lifted panel, never under it */
@media (min-width: 760px) {
  .page-storeiq .siq-hero .phero__cap { margin-left: calc(var(--siq-lw) - 3% + 28px); }
}
/* Narrow phones: the two title lines flow together instead of breaking into five short ones */
@media (max-width: 519.98px) {
  .page-storeiq .siq-hero .phero__title .ln { display: inline; }
}
/* Phones: the switch moves under the phone, so the phone rises into the first screen */
@media (max-width: 759.98px) {
  .page-storeiq .siq-hero__media { display: flex; flex-direction: column; }
  .page-storeiq .siq-hero__bar { order: 1; justify-content: center; margin: 22px 0 0; }
  .page-storeiq .siq-hero .phero__cap { order: 2; }
  .page-storeiq .siq-hero__note { margin: 4px 0 0; text-align: center; }
}

/* 2. Screens follow the theme toggle ---------------------------------------- */
.page-storeiq .siq-frame,
.page-storeiq .siq-frame :is(.frame__bar, .frame__addr) { transition: background-color var(--t-swap) ease, color var(--t-swap) ease, border-color var(--t-swap) ease; }
.page-storeiq [data-tema="dark"] .siq-frame,
.page-storeiq [data-tema="dark"] .siq-frame .frame__bar { background: var(--siq-bar-dark); border-bottom-color: rgb(255 255 255 / .07); }
.page-storeiq [data-tema="dark"] .siq-frame .frame__addr { background: rgb(255 255 255 / .09); color: var(--on-dark-2); }
.page-storeiq [data-tema="dark"] :is(.siq-frame .crop, .siq-hero__view) { background: var(--siq-app-dark); }
.page-storeiq [data-tema="dark"] .siq-assist .crop { background: var(--siq-bar-dark); box-shadow: 0 0 0 1px rgb(255 255 255 / .08); }
@media (max-width: 759.98px) {
  .page-storeiq [data-tema="dark"] .frame--adapt.siq-frame { background: #0F0B1E; }   /* keep the phone bezel of site.css */
}

/* 3. Feature stage ------------------------------------------------------------- */
.page-storeiq .siq-feats .stage__panels { margin-top: clamp(24px, 1.6vw + 12px, 40px); }
.page-storeiq .siq-feat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-areas: "lede list" "media media";
  align-items: start;
  gap: var(--s5) clamp(32px, 4vw, 64px);
}
.page-storeiq .siq-feat__lede { grid-area: lede; max-width: 25em; font-size: var(--fs-lede); line-height: 1.45; color: var(--fg); text-wrap: pretty; }
.page-storeiq .siq-feat__list { grid-area: list; }
.page-storeiq .siq-feat__list > li:first-child { padding-top: 4px; }
.page-storeiq .siq-feat__list > li:first-child::before { top: 6px; }
.page-storeiq .siq-feat__note { grid-area: note; }
.page-storeiq .siq-feat__media { grid-area: media; min-width: 0; margin-top: var(--s2); }
/* Portrait screenshot (IQ Assistant): text left, screen right */
.page-storeiq .siq-feat--tall {
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "lede media" "list media" "note media";
  grid-template-rows: auto auto 1fr;
}
.page-storeiq .siq-feat--tall .siq-feat__media { width: min(100%, 400px); justify-self: center; margin-top: 0; }
@media (max-width: 899.98px) {
  .page-storeiq .siq-feat {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "lede" "list" "media";
    grid-template-rows: none;
    row-gap: var(--s4);
  }
  .page-storeiq .siq-feat--tall { grid-template-areas: "lede" "list" "note" "media"; }
  .page-storeiq .siq-feat__list > li:first-child { padding-top: 14px; }
  .page-storeiq .siq-feat__list > li:first-child::before { top: 16px; }
}
/* The features toggle mirrors the hero one (same "tema" group). On phones it would sit right
   above the tab pills and read as a second row of tabs, so there the hero toggle alone is shown. */
@media (min-width: 760px) {
  .page-storeiq .siq-head { flex-wrap: nowrap; }
  .page-storeiq .siq-head .section-head__text { flex: 1 1 auto; min-width: 0; }
  .page-storeiq .siq-theme-aside { flex: none; }
}
@media (max-width: 759.98px) {
  .page-storeiq .siq-theme-aside { display: none; }
  .page-storeiq .siq-feat__media { margin-inline: -8px; }    /* a little more width for small UI text */
}

/* 4. „Ce mai primești”: photo + the revenue card, in the page's theme ---------- */
.page-storeiq .siq-more__media { margin: 0; }
.page-storeiq .siq-venit { display: grid; }
.page-storeiq .siq-venit img { width: 100%; }

/* 5. Night band: platforms + the two phones ------------------------------------ */
@media (min-width: 900px) {
  .page-storeiq .siq-apps .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.page-storeiq .siq-platforms { margin-top: var(--s6); container-type: inline-size; }
.page-storeiq .siq-platforms > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--s3) var(--s5);
  padding-block: 18px;
  border-top: 1px solid var(--on-dark-line);
}
.page-storeiq .siq-platforms > li:last-child { border-bottom: 1px solid var(--on-dark-line); }
.page-storeiq .siq-platforms__name { min-width: 0; }
.page-storeiq .siq-platforms__title { display: block; font-size: 1.125rem; font-weight: 660; font-stretch: var(--wd-ui); line-height: 1.3; color: var(--on-dark); }
.page-storeiq .siq-platforms__text { display: block; margin-top: 2px; font-size: .9375rem; line-height: 1.5; color: var(--on-dark-2); }
.page-storeiq .siq-platforms > li > :last-child { justify-self: start; }
@container (min-width: 480px) {
  .page-storeiq .siq-platforms > li { grid-template-columns: minmax(0, 1fr) auto; }
  .page-storeiq .siq-platforms > li > :last-child { justify-self: end; }
}
/* Official badge: the PNG carries transparent clear space above and below the badge
   (29 of 250 px each side); negative margins keep the row as tall as a button. */
.page-storeiq .siq-badge { display: inline-flex; border-radius: 10px; }
.page-storeiq .siq-badge img { width: auto; height: 62px; margin-block: -7px; }
/* Two phones, light and dark, staggered; on wide screens they drift apart as the band scrolls */
.page-storeiq .siq-duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(16px, 2.6vw, 36px);
  width: min(100%, 580px);
  margin-inline: auto;
}
.page-storeiq .siq-duo__item { min-width: 0; margin: 0; }
.page-storeiq .siq-duo__item--low { margin-top: clamp(40px, 6vw, 88px); }
.page-storeiq .siq-duo .phone { --phone-w: 100%; }
.page-storeiq .siq-duo .caption { margin-top: 14px; text-align: center; }

/* 6. The privacy close ---------------------------------------------------------- */
.page-storeiq .siq-close__head { display: grid; justify-items: center; max-width: 46rem; margin-inline: auto; text-align: center; }
.page-storeiq .siq-close__icon { width: 64px; height: 64px; margin-bottom: 26px; border-radius: 17px; box-shadow: 0 2px 4px rgb(42 27 110 / .12), 0 18px 36px -16px rgb(42 27 110 / .45); }
.page-storeiq .siq-close__head .lede { margin-top: 18px; }
.page-storeiq .siq-close__list { max-width: 980px; margin: clamp(36px, 2.4vw + 20px, 56px) auto 0; }
.page-storeiq .siq-close__cta { justify-content: center; margin-top: clamp(32px, 2vw + 20px, 48px); }
@media (max-width: 519.98px) {
  .page-storeiq .siq-close__cta .link { align-self: center; }
}

/* 7. Without JavaScript: every feature panel is shown; the switches that need JS hide */
html:not(.js) .page-storeiq [data-toggle] { display: none; }
html:not(.js) .page-storeiq .siq-stage .ruler-tabs { display: none; }
html:not(.js) .page-storeiq .siq-stage .tab-panel[hidden] { display: block !important; margin-top: var(--s8); }