/* Approved desktop intro; retain the existing phone/tablet composition. */
.preview-layout { display:none; }
html.desktop-fitted.responsive-index body.section3-preview main#main-content.desktop-fitted.responsive-index > #intro.panel {
  --ink:#292929;--muted:#59566a;--line:rgba(41,41,41,.17);
  & .section-stage {
    position:absolute;top:calc(var(--index-header-height,var(--header-height)) + 32px);bottom:28px!important;
    left:50%;width:var(--index-frame);height:auto;max-height:none;min-height:0;
    display:block;overflow:visible;transform:translateX(-50%);margin:0;padding:0;
  }
  & .section-body {display:block;position:static;width:100%;height:100%;min-height:0;margin:0;padding:0}
  & .section-content {display:block;position:static;width:100%;height:100%;min-height:0;margin:0;padding:0}
  & .preview-layout {display:grid;grid-template-rows:minmax(390px,1fr) auto;gap:40px;width:100%;height:100%;position:static;transform:none;margin:0;padding:0;max-width:none}
  & .preview-invitation {align-self:center;text-align:center;display:flex;flex-direction:column;align-items:center;padding:20px 0 14px}
  & #intro-desktop-title {font:400 clamp(72px,7.4vw,112px)/1.03 var(--serif);letter-spacing:-.055em;white-space:nowrap;transform:none;margin:0}
  & #intro-desktop-title em {font-weight:400}
  & .preview-copy {max-width:650px;margin:26px 0 0;font:300 20px/1.6 var(--sans);letter-spacing:-.02em;text-wrap:pretty;color:var(--ink)}
  & .preview-cta {display:inline-flex;align-items:center;justify-content:center;gap:16px;min-height:57px;padding:15px 28px;border:0;border-radius:999px;background:var(--ink);color:#fff;margin-top:30px;font:500 15px/1.4 var(--sans);transition:background .3s;text-decoration:none}
  & .preview-cta span:last-child {font-size:20px;font-weight:300}
  & .preview-cta:hover {background:#414141}
  & .preview-steps {list-style:none;padding:28px 0 32px;margin:0;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px}
  & .preview-steps li {display:flex;gap:17px;align-items:baseline;min-width:0}
  & .preview-number {flex:none;font:300 13px/1.5 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
  & .preview-steps h2 {font:500 18px/1.5 var(--sans);letter-spacing:-.02em;margin:0 0 8px;transform:none}
  & .preview-steps p {font:300 16px/1.6 var(--sans);color:var(--muted);text-wrap:pretty;margin:0}
  & .preview-meta {display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--line);padding-top:25px}
  & .preview-stats {display:flex;gap:44px;margin:0}
  & .preview-stats > div {display:flex;align-items:baseline;gap:12px}
  & .preview-stats dt {font:400 30px/1.2 var(--serif);letter-spacing:-.035em}
  & .preview-stats dd {margin:0;font:300 13px/1.55 var(--sans);color:var(--muted)}
  & .preview-next {display:flex;gap:18px;align-items:center;font:300 14px/1.5 var(--sans);min-height:44px}
  & .preview-next span:last-child {font-size:20px}
  & .preview-next:hover span:first-child {text-decoration:underline;text-underline-offset:5px}
}
/* The approved hero shares the exact desktop frame used by the other sections.
   Its headline centres in the remaining upper space, above the lower group. */
html.desktop-fitted.responsive-index body.section3-preview main#main-content.desktop-fitted.responsive-index > #intro.panel {
  & .section-stage {
    top:var(--desktop-fit-top);bottom:auto!important;left:50%;
    /* Shared 1080px body: 20px stage inset, 32px bottom inset,
       plus 6px to align our 44px next-link centre with the other 32px links. */
    width:1600px;height:1034px!important;min-height:0;max-height:none;padding:0;margin:0;
    transform:translateX(-50%) scale(var(--desktop-fit-scale));transform-origin:50% 0;
    display:block;overflow:visible;
  }
  & .section-stage .section-body, & .section-stage .section-content {
    width:100%;height:100%;padding:0;margin:0;display:block;
  }
  & .preview-layout {position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:0;height:100%;width:100%;padding:0;margin:0;transform:none;}
  & .preview-invitation {
    position:static;align-self:stretch;justify-content:center;
    transform:none;padding:0;margin:0;
    margin-top:calc((var(--index-header-height,var(--header-height)) - var(--desktop-fit-top)) / var(--desktop-fit-scale));
  }
  & #intro-desktop-title {font-size:144.283px;line-height:1.03;white-space:nowrap;}
  & #intro-desktop-title em {display:inline;}
  & .preview-lower {position:static;min-width:0;}
  & .preview-copy {width:max-content;max-width:none;margin:26px 0 0;text-align:center;font-size:20px;line-height:1.6;white-space:nowrap;text-wrap:nowrap;}
  & .preview-steps {padding:28px 0;gap:48px;grid-template-columns:repeat(3,minmax(0,1fr));}
  & .preview-steps li {gap:17px;align-items:flex-start;}
  & .preview-number {margin-top:3.75px;}
  & .preview-step-content {min-width:0;flex:1;}
  & .preview-step-heading {display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:27px;}
  & .preview-steps h2 {font-size:18px;line-height:1.5;margin:0;}
  & .preview-steps p {font-size:16px;line-height:1.6;margin-top:12px;min-height:57px;display:flex;align-items:center;}
  /* Extend the pill left by its inset, aligning its text with Meet while preserving the right edge. */
  & .preview-cta {flex:none;margin:12px 0 0 -20px;height:57px;min-height:57px;box-sizing:border-box;padding:0 20px;gap:36px;font-size:16px;white-space:nowrap;}
  & .preview-meta {padding-top:25px;gap:30px;}
  & .preview-stats {gap:44px;}
  & .preview-stats > div {display:flex;align-items:baseline;gap:12px;}
  & .preview-stats dt {font-size:30px;}
  & .preview-stats dd {font-size:13px;margin:0;}
}

/* Exact live timing: each step fades for 1s, starting at 1s, 2s and 3s.
   Both shared dividers draw across the same three-second sequence. */
@media (prefers-reduced-motion: no-preference) {
  html.desktop-fitted.responsive-index body.section3-preview main#main-content.desktop-fitted.responsive-index > #intro.panel .preview-steps[data-intro-reveal] {
    & li { --step-delay: 1000ms; }
    & li:nth-child(2) { --step-delay: 2000ms; }
    & li:nth-child(3) { --step-delay: 3000ms; }
    & li > * { opacity: 0; }
  }
  html.desktop-fitted.responsive-index body.section3-preview main#main-content.desktop-fitted.responsive-index > #intro.panel .preview-steps[data-intro-reveal="playing"] {
    & li > * { animation: intro-step-reveal 1s ease-in-out var(--step-delay) both; }
  }
}

/* The shared top and bottom lines use the live left-to-right line animation,
   spanning all three one-second steps without changing layout. */
@media (prefers-reduced-motion: no-preference) {
  html.desktop-fitted.responsive-index body.section3-preview main#main-content.desktop-fitted.responsive-index > #intro.panel {
    & .preview-steps[data-intro-reveal],
    & .preview-steps[data-intro-reveal] + .preview-meta {
      position:relative; border-top-color:transparent;
      &::before {
        content:''; position:absolute; left:0; right:0; top:-1px; height:1px;
        background:var(--line); transform-origin:left center; transform:scaleX(0);
        pointer-events:none;
      }
    }
    & .preview-steps[data-intro-reveal="playing"]::before,
    & .preview-steps[data-intro-reveal="playing"] + .preview-meta::before {
      animation:intro-step-line 3s linear 1s both;
    }
  }
}

html.desktop-fitted.responsive-index body.section3-preview main#main-content.desktop-fitted.responsive-index > #intro.panel {
  & .section-content > .intro-message, & .section-meta { display:none; }
}