/* Install guide (instruction.html): hero, scroll-synced steps with a sticky phone, FAQ, CTA */
@layer pages {
  main.guide-page { padding: 0; }

  /* ───────── Hero ───────── */
  .guide-hero {
    border-block-end: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    & .wrap-5xl { padding-block: 2.5rem; @media (width >= 768px) { padding-block: 3.5rem; } }
    & .badge { margin-block-end: 1rem; color: var(--muted-foreground); }
    & h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; @media (width >= 768px) { font-size: 1.875rem; } }
    & p { max-inline-size: 36rem; margin-block-start: .75rem; font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
    & .btn { margin-block-start: 1.5rem; }
  }

  /* ───────── Steps + sticky phone ───────── */
  .steps-section { padding-block: 2.5rem; @media (width >= 768px) { padding-block: 4rem; } }
  .steps-layout {
    display: flex;
    justify-content: space-between;
    gap: 4rem;
    @media (width >= 1024px) { gap: 6rem; }
  }
  .steps {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    inline-size: 100%;
    @media (width >= 768px) { gap: 4rem; }
    @media (width >= 1024px) { inline-size: 50%; }
  }
  .step {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    scroll-margin-block-start: 6rem;
    @media (width >= 1024px) { min-block-size: 60vh; justify-content: center; }

    & .step-head { display: flex; align-items: center; gap: .75rem; }
    & .num {
      display: grid;
      place-items: center;
      flex-shrink: 0;
      inline-size: 2.25rem;
      aspect-ratio: 1;
      border-radius: 50%;
      background: var(--muted);
      color: var(--muted-foreground);
      font-size: .875rem;
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      transition: background-color .3s var(--ease), color .3s var(--ease);
    }
    & .rule { flex: 1; block-size: 1px; background: color-mix(in oklch, var(--border) 60%, transparent); }
    & h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.025em; @media (width >= 768px) { font-size: 1.5rem; } }
    & p { margin-block-start: .5rem; font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
    & p strong { font-weight: 600; color: var(--foreground); }

    &.is-active .num { background: var(--brand); color: white; }

    /* Inline phones on small screens; the sticky stage takes over at ≥1024px */
    & .inline-shots { margin-block-start: .25rem; @media (width >= 1024px) { display: none; } }
  }

  .phone-stage {
    position: sticky;
    inset-block-start: 6rem;
    display: none;
    block-size: 600px;
    inline-size: 50%;
    @media (width >= 1024px) { display: block; }

    & > .scene {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      opacity: 0;
      scale: .97;
      pointer-events: none;
      transition: opacity .3s var(--ease), scale .3s var(--ease);
      &.is-active { opacity: 1; scale: 1; pointer-events: auto; }
    }
  }

  .shots { display: flex; align-items: center; justify-content: center; gap: .75rem; }

  /* ───────── Phone mockup (all CSS) ───────── */
  .phone {
    --w: 15rem;
    position: relative;
    inline-size: var(--w);
    padding: .375rem;
    border: 1px solid var(--border);
    border-radius: 1.75rem;
    background: var(--muted);
    box-shadow: var(--shadow-sm);
    transition: translate .2s var(--ease), border-color .2s, box-shadow .2s;
    @media (width < 640px) { --w: 13rem; }

    &:hover { translate: 0 -2px; border-color: color-mix(in oklch, var(--foreground) 20%, transparent); box-shadow: var(--shadow-md); }
    .shots.two & { --w: 10rem; @media (width < 640px) { --w: 8.5rem; } }
  }
  .screen {
    position: relative;
    aspect-ratio: 9 / 19.5;
    overflow: hidden;
    border-radius: 1.4rem;
    background: oklch(98% 0 0);
    color: oklch(20% 0 0);
    font-size: calc(var(--w) * .052);
    container-type: inline-size;
    text-align: start;

    /* status bar */
    &::before {
      content: "9:41";
      position: absolute;
      inset: 0 0 auto;
      padding: 3cqi 6cqi;
      font-size: 4.2cqi;
      font-weight: 600;
    }
    &.dark { background: oklch(18% .01 260); color: white; }
    &.dim::after { content: ""; position: absolute; inset: 0; background: oklch(0% 0 0 / .45); }
  }

  /* shared bits inside screens */
  .m-url {
    position: absolute; inset: 12cqi 5cqi auto; block-size: 9cqi;
    display: flex; align-items: center; padding-inline: 4cqi;
    border-radius: 99px; background: oklch(93% 0 0); font-size: 4cqi; color: oklch(45% 0 0);
  }
  .m-logo {
    position: absolute; inset-block-start: 36cqi; inset-inline: 0; margin-inline: auto;
    inline-size: 26cqi; aspect-ratio: 1; border-radius: 7cqi;
    background: linear-gradient(135deg, var(--brand), color-mix(in oklch, var(--brand), black 25%));
  }
  .m-title { position: absolute; inset: 68cqi 0 auto; text-align: center; font-size: 6cqi; font-weight: 700; }
  .m-lines { position: absolute; inset: 80cqi 14cqi auto; display: grid; gap: 3cqi; }
  .m-lines span { block-size: 3cqi; border-radius: 99px; background: oklch(88% 0 0); }
  .m-lines span:last-child { inline-size: 60%; justify-self: center; }
  .m-btn {
    position: absolute; inset: auto 12cqi 70cqi; block-size: 13cqi;
    display: grid; place-items: center; border-radius: 99px;
    background: var(--brand); color: white; font-size: 4.6cqi; font-weight: 600;
  }
  /* pulsing tap target */
  :where(.tap) { position: relative; }   /* zero specificity: absolute-positioned targets keep theirs */
  .tap::after {
    content: ""; position: absolute; inset: -2cqi; border-radius: inherit;
    border: 1cqi solid color-mix(in oklch, var(--brand) 70%, white);
    animation: tap 1.6s ease-out infinite;
  }
  @keyframes tap { from { opacity: 1; scale: .96; } to { opacity: 0; scale: 1.12; } }

  .m-sheet {
    position: absolute; inset: auto 3cqi 3cqi; z-index: 1;
    padding: 7cqi 6cqi 5cqi; border-radius: 6cqi;
    background: white; color: oklch(20% 0 0);
    & b { display: block; font-size: 5.2cqi; }
    & small { display: block; margin-block-start: 2cqi; font-size: 3.8cqi; line-height: 1.45; color: oklch(45% 0 0); }
    & .row { display: flex; justify-content: flex-end; gap: 3cqi; margin-block-start: 6cqi; font-size: 4.2cqi; font-weight: 600; }
    & .row span { padding: 2.5cqi 4cqi; border-radius: 99px; color: oklch(40% .1 250); }
    & .row .tap { background: oklch(94% .03 250); }
    & .ic { inline-size: 9cqi; aspect-ratio: 1; margin-block-end: 3cqi; border-radius: 50%; background: oklch(93% .05 70); }
    &.center { text-align: center; & .ic { margin-inline: auto; } & .row { justify-content: center; } }
  }

  .m-notif {
    position: absolute; inset: 14cqi 4cqi auto; z-index: 1;
    padding: 5cqi; border-radius: 5cqi; background: white; color: oklch(20% 0 0);
    box-shadow: 0 3cqi 8cqi oklch(0% 0 0 / .25);
    & .top { display: flex; align-items: center; gap: 3cqi; font-size: 3.6cqi; color: oklch(45% 0 0); }
    & .top i { inline-size: 5cqi; aspect-ratio: 1; border-radius: 50%; background: var(--brand); }
    & b { display: block; margin-block-start: 3cqi; font-size: 4.6cqi; }
    & small { display: block; font-size: 3.8cqi; color: oklch(45% 0 0); }
    & .open { display: inline-block; margin-block-start: 4cqi; padding: 2cqi 5cqi; border-radius: 99px; background: oklch(94% .03 250); color: oklch(40% .1 250); font-size: 4cqi; font-weight: 600; }
  }
  .m-shade { position: absolute; inset: 0; background: linear-gradient(oklch(25% .01 260), oklch(18% .01 260)); }
  .m-tiles { position: absolute; inset: 50cqi 6cqi auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5cqi; }
  .m-tiles i { aspect-ratio: 1; border-radius: 50%; background: oklch(100% 0 0 / .12); }

  .m-installer { position: absolute; inset: 22cqi 8cqi auto; text-align: center; & .m-logo { position: static; margin-block-end: 5cqi; } & b { font-size: 5.5cqi; } }

  /* Final "you're all set" card */
  .done-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    inline-size: 100%;
    max-inline-size: 20rem;
    aspect-ratio: 4 / 5;
    margin-inline: auto;
    padding: 2rem;
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    border-radius: 1rem;
    background: var(--background);
    box-shadow: var(--shadow-sm);
    text-align: center;

    & .burst {
      display: grid; place-items: center; inline-size: 3.5rem; aspect-ratio: 1; border-radius: 50%;
      background: color-mix(in oklch, var(--brand) 10%, transparent); color: var(--brand);
      & .icon { inline-size: 1.5rem; block-size: 1.5rem; }
    }
    & b { font-size: 1rem; font-weight: 600; }
    & p { margin-block-start: .25rem; font-size: .875rem; color: var(--muted-foreground); }
    & .ok { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 500; color: var(--brand); }
  }

  /* Enlarged screenshot */
  .zoom {
    inset: 0; margin: auto; padding: 0; border: 0; background: transparent;
    max-inline-size: 100vw; max-block-size: 100dvb;
    opacity: 0; scale: .96;
    transition: opacity .2s var(--ease), scale .2s var(--ease), overlay .2s allow-discrete, display .2s allow-discrete;
    &[open] { display: grid; place-items: center; opacity: 1; scale: 1; @starting-style { opacity: 0; scale: .96; } }
    &::backdrop { background: oklch(0% 0 0 / .8); }
    & .phone { --w: min(22rem, 80vw, 38dvb); &:hover { translate: none; } }
    & .zoom-close { position: fixed; inset: 1rem 1rem auto auto; color: white; &:hover { background: oklch(100% 0 0 / .12); } }
  }

  /* ───────── FAQ + CTA sections (the accordion and box live in components/landing.css) ───────── */
  .faq-section {
    border-block-start: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    background: color-mix(in oklch, var(--muted) 30%, transparent);
    & .wrap-3xl { padding-block: 3rem; @media (width >= 768px) { padding-block: 4rem; } }
    & .intro { @media (width >= 768px) { text-align: center; } }
    & h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; @media (width >= 768px) { font-size: 1.875rem; } }
    & .intro p { margin-block-start: .75rem; font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
  }
  .cta-section { padding-block: 3rem; @media (width >= 768px) { padding-block: 4rem; } }
}