/* ─── /app — Editorial apothecary redesign ────────────────────────────
 * Aesthetic direction: editorial magazine layouts with apothecary
 * precision — asymmetric type, painterly atmospheres, drifting
 * decorative elements, brand-teal as the only chromatic accent.
 * Generous negative space, deliberate hierarchy, motion that drifts
 * rather than slides.
 * ──────────────────────────────────────────────────────────────────── */

:root {
  --ap-grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.06 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
}

/* ── Hero amplification ─────────────────────────────────────────────── */
.app-hero-stage {
  position: relative;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
  text-align: left;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px);
}
/* iter75: collapse hero stage to single column on mobile so the
   phone has room to render — at <=700px it was sharing a 2-col
   grid with the copy column, ending up ~120px wide and invisible. */
@media (max-width: 700px) {
  .app-hero-stage {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
  }
  .app-hero-stage h1,
  .app-hero-stage p.lead { text-align: center; }
  .app-hero-stage p.lead { margin-left: auto; margin-right: auto; }
  .app-hero-stage .app-hero-meta { justify-content: center; }
  .app-hero-stage .app-hero-phone {
    max-width: 320px;
    margin: 0 auto;
  }
}
.app-hero-stage > .app-hero-copy { position: relative; z-index: 2; }
.app-hero-stage .eyebrow { display: inline-block; margin-bottom: 14px; }
.app-hero-stage h1 {
  text-align: left;
  font-size: clamp(40px, 5.4vw + 0.5rem, 78px);
  margin: 0 0 22px;
  text-wrap: balance;
}
.app-hero-stage p.lead {
  text-align: left;
  margin: 0 0 28px;
  max-width: 36ch;
}
.app-hero-stage .brand-hero-cta {
  margin-bottom: 18px;
}
.app-hero-meta {
  display: flex;
  gap: clamp(20px, 2.5vw, 40px);
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
  font-size: 0.92rem;
  color: #4A5071;
  font-family: var(--display);
  font-weight: 500;
}
.app-hero-meta strong { color: #15161A; font-weight: 700; }
.app-hero-meta .sep {
  display: inline-block;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(15, 18, 38, 0.22);
  vertical-align: middle;
}

/* The phone art column */
.app-hero-phone {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.app-hero-phone img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  filter: drop-shadow(0 24px 60px rgba(20, 21, 26, 0.18))
          drop-shadow(0 8px 16px rgba(15, 148, 139, 0.15));
  animation: appPhoneFloat 7s ease-in-out infinite;
}
@keyframes appPhoneFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-12px) rotate(1deg); }
}

/* Drifting little mascots — same tardigrade SVG family as the hero */
.app-hero-drift {
  position: absolute;
  pointer-events: none;
  width: 72px; height: 72px;
  opacity: 0.85;
  filter: drop-shadow(0 6px 12px rgba(20,21,26,0.16));
}
.app-hero-drift img { width: 100%; height: 100%; object-fit: contain; }
.app-hero-drift.d-1 { top: 10%; left: 4%; animation: appDriftSway 11s ease-in-out infinite; }
.app-hero-drift.d-2 { bottom: 12%; right: 6%; width: 60px; height: 60px; animation: appDriftSway 13s ease-in-out infinite -3s; opacity: 0.75; }
@keyframes appDriftSway {
  0%, 100% { transform: translate(0, 0) rotate(-3deg); }
  50%      { transform: translate(8px, -12px) rotate(3deg); }
}

/* Override the centred .brand-hero text-alignment when the stage layout
   is in play */
.brand-hero .app-hero-stage,
.brand-hero .app-hero-stage h1,
.brand-hero .app-hero-stage p.lead {
  text-align: left;
}

/* ── Section base ────────────────────────────────────────────────────── */
.ap-section {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0;
  isolation: isolate;
}
.ap-section .container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(16px, 3vw, 48px);
}
.ap-section .eyebrow {
  display: inline-block;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal-deep, #086E66);
  margin-bottom: 16px;
}
.ap-section h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(32px, 3.5vw + 0.5rem, 56px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: #1F2025;
  margin: 0 0 22px;
  text-wrap: balance;
  max-width: 16ch;
}
.ap-section h2 em {
  font-style: italic;
  color: var(--teal-deep, #086E66);
  font-weight: 500;
  letter-spacing: -0.025em;
}
.ap-section .lede {
  font-size: clamp(17px, 1.15vw, 20px);
  line-height: 1.5;
  color: #4A5071;
  max-width: 56ch;
  margin: 0 0 clamp(48px, 6vw, 80px);
}

/* ── Five surfaces — staggered editorial gallery ─────────────────────── */
.ap-surfaces {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(24px, 3vw, 48px);
  row-gap: clamp(64px, 8vw, 110px);
}
.ap-surface {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ap-surface .ap-surface-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1470 / 2970;
  background: linear-gradient(180deg, #F8E8DD 0%, #FFFFFF 100%);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 460ms cubic-bezier(.2, .9, .3, 1), box-shadow 460ms ease;
  box-shadow: 0 10px 30px -10px rgba(20, 21, 26, 0.18);
}
.ap-surface .ap-surface-frame img {
  width: 100%; height: 100%;
  display: block;
  object-fit: contain;
  transition: transform 460ms cubic-bezier(.2, .9, .3, 1);
}
.ap-surface:hover .ap-surface-frame {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px -10px rgba(20, 21, 26, 0.25), 0 0 0 1px rgba(15, 148, 139, 0.2);
}
.ap-surface:hover .ap-surface-frame img {
  transform: scale(1.02);
}
.ap-surface .ap-surface-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--teal-deep, #086E66);
}
.ap-surface .ap-surface-label span:first-child {
  font-family: var(--serif, "Domine", "Georgia", serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(15, 18, 38, 0.42);
}
.ap-surface h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0;
  color: #15161A;
}
.ap-surface p {
  font-size: 15px;
  line-height: 1.55;
  color: #4A5071;
  margin: 0;
}
/* Staggered grid spans for editorial asymmetry */
.ap-surface.s-1 { grid-column: 1 / span 4; transform: translateY(0); }
.ap-surface.s-2 { grid-column: 6 / span 4; transform: translateY(40px); }
.ap-surface.s-3 { grid-column: 1 / span 4; transform: translateY(-20px); }
.ap-surface.s-4 { grid-column: 6 / span 4; transform: translateY(20px); }
.ap-surface.s-5 { grid-column: 9 / span 4; transform: translateY(-60px); }
@media (max-width: 900px) {
  .ap-surfaces { grid-template-columns: repeat(6, 1fr); row-gap: 56px; }
  .ap-surface.s-1, .ap-surface.s-3 { grid-column: 1 / span 3; transform: none; }
  .ap-surface.s-2, .ap-surface.s-4 { grid-column: 4 / span 3; transform: none; }
  .ap-surface.s-5 { grid-column: 2 / span 4; transform: none; }
}
@media (max-width: 600px) {
  .ap-surfaces { grid-template-columns: 1fr; }
  .ap-surface { grid-column: 1 / -1 !important; }
}

/* ── Features — asymmetric card matrix ───────────────────────────────── */
.ap-features {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(20px, 2vw, 32px);
}
.ap-feature {
  position: relative;
  padding: clamp(24px, 3vw, 40px);
  background: white;
  border-radius: 18px;
  box-shadow: 0 1px 0 rgba(20, 21, 26, 0.06), 0 12px 40px -10px rgba(20, 21, 26, 0.10);
  transition: transform 280ms cubic-bezier(.2, .9, .3, 1), box-shadow 280ms ease;
  overflow: hidden;
}
.ap-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ap-grain);
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: multiply;
}
.ap-feature > * { position: relative; z-index: 1; }
.ap-feature:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(20, 21, 26, 0.06), 0 20px 50px -10px rgba(20, 21, 26, 0.18);
}
.ap-feature .ap-feature-num {
  font-family: var(--serif, "Domine", "Georgia", serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 400;
  color: var(--teal-deep, #086E66);
  opacity: 0.55;
  margin-bottom: 14px;
}
.ap-feature h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 1.4vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  color: #15161A;
}
.ap-feature p {
  font-size: 15px;
  line-height: 1.55;
  color: #4A5071;
  margin: 0;
}
/* Feature card sizing: 2 big + 2 medium + 4 small */
.ap-feature.f-big-1 { grid-column: 1 / span 7; padding: clamp(32px, 4vw, 56px); }
.ap-feature.f-big-1 h3 { font-size: clamp(26px, 2vw, 36px); }
.ap-feature.f-big-2 { grid-column: 8 / span 5; background: linear-gradient(135deg, #086E66 0%, #0F948B 100%); color: white; }
.ap-feature.f-big-2::before { mix-blend-mode: overlay; opacity: 0.18; }
.ap-feature.f-big-2 .ap-feature-num { color: rgba(255, 255, 255, 0.55); }
.ap-feature.f-big-2 h3 { color: white; }
.ap-feature.f-big-2 p { color: rgba(255, 255, 255, 0.86); }
.ap-feature.f-med-1 { grid-column: 1 / span 6; }
.ap-feature.f-med-2 { grid-column: 7 / span 6; }
.ap-feature.f-sm   { grid-column: span 3; }
@media (max-width: 900px) {
  .ap-features { grid-template-columns: repeat(2, 1fr); }
  .ap-feature.f-big-1, .ap-feature.f-big-2,
  .ap-feature.f-med-1, .ap-feature.f-med-2,
  .ap-feature.f-sm { grid-column: span 2; }
}
@media (max-width: 540px) {
  .ap-features { grid-template-columns: 1fr; }
  .ap-feature { grid-column: 1 / -1 !important; }
}

/* ── Spec definition list (Requirements) ──────────────────────────── */
.ap-spec {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(20, 21, 26, 0.08);
  border-radius: 14px;
  overflow: hidden;
}
.ap-spec > div {
  padding: clamp(20px, 2vw, 28px);
  background: white;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ap-spec dt {
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep, #086E66);
}
.ap-spec dd {
  margin: 0;
  font-family: var(--display);
  font-size: 17px;
  font-weight: 600;
  color: #15161A;
  letter-spacing: -0.01em;
}
@media (max-width: 720px) { .ap-spec { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .ap-spec { grid-template-columns: 1fr; } }

/* ── Pricing ─────────────────────────────────────────────────────────── */
.ap-pricing-shell {
  position: relative;
  padding: clamp(64px, 8vw, 110px) clamp(16px, 3vw, 48px);
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F5F0 100%);
  border-radius: 28px;
  overflow: hidden;
}
.ap-pricing-shell::before {
  content: "";
  position: absolute;
  top: -30%; left: -10%; right: -10%;
  height: 60%;
  background: radial-gradient(60% 80% at 50% 50%, rgba(15, 148, 139, 0.10), transparent 70%);
  pointer-events: none;
}
.ap-pricing-shell h2 { text-align: center; max-width: none; margin-left: auto; margin-right: auto; }
.ap-pricing-shell .eyebrow { display: block; text-align: center; }
.ap-pricing-shell .lede { text-align: center; margin-left: auto; margin-right: auto; }
.ap-plans {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2vw, 32px);
  max-width: 820px;
  margin: clamp(40px, 5vw, 64px) auto 0;
  position: relative;
  z-index: 1;
}
.ap-plan {
  position: relative;
  background: white;
  border: 1px solid rgba(20, 21, 26, 0.08);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 44px);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 280ms ease, box-shadow 280ms ease;
}
.ap-plan:hover { transform: translateY(-4px); box-shadow: 0 20px 50px -10px rgba(20, 21, 26, 0.14); }
.ap-plan.is-recommended {
  border-color: var(--teal-deep, #086E66);
  background: linear-gradient(180deg, #FFFFFF 0%, #F0FAF7 100%);
}
.ap-plan .ap-plan-badge {
  position: absolute;
  top: -14px; left: 50%; transform: translateX(-50%);
  background: var(--teal-deep, #086E66);
  color: white;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}
.ap-plan .ap-plan-name {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-deep, #086E66);
  margin-bottom: 4px;
}
.ap-plan .ap-plan-price {
  font-family: var(--display);
  font-size: clamp(40px, 4vw, 56px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #15161A;
  line-height: 1;
}
.ap-plan .ap-plan-price small {
  font-size: 0.4em;
  font-weight: 500;
  color: #4A5071;
  letter-spacing: 0;
  margin-left: 4px;
}
.ap-plan .ap-plan-sub {
  font-size: 14px;
  color: #4A5071;
  margin-bottom: 24px;
}
.ap-plan .ap-plan-cta {
  display: inline-block;
  width: 100%;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  text-align: center;
  transition: transform 160ms ease, background 160ms ease;
}
.ap-plan .ap-plan-cta.is-primary {
  background: #15161A;
  color: white;
}
.ap-plan .ap-plan-cta.is-secondary {
  background: white;
  color: #15161A;
  border: 1px solid rgba(20, 21, 26, 0.16);
}
.ap-plan .ap-plan-cta:hover { transform: translateY(-1px); }
.ap-plan .ap-plan-cta.is-primary:hover { background: #000; }
.ap-pricing-shell .ap-pricing-foot {
  text-align: center;
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 14px;
  color: #4A5071;
  position: relative;
  z-index: 1;
}
@media (max-width: 640px) { .ap-plans { grid-template-columns: 1fr; } }

/* ── FAQ ───────────────────────────────────────────────────────────────── */
.ap-faq {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ap-faq details {
  border-bottom: 1px solid rgba(20, 21, 26, 0.10);
  padding: 22px 0;
  transition: padding 200ms ease;
}
.ap-faq details:last-of-type { border-bottom: 0; }
.ap-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(17px, 1.2vw, 20px);
  color: #15161A;
  position: relative;
}
.ap-faq summary::-webkit-details-marker { display: none; }
.ap-faq summary::after {
  content: "+";
  flex-shrink: 0;
  width: 28px; height: 28px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(15, 148, 139, 0.10);
  color: var(--teal-deep, #086E66);
  font-size: 18px;
  font-weight: 500;
  transition: transform 220ms cubic-bezier(.2, .9, .3, 1), background 220ms ease;
}
.ap-faq details[open] summary::after {
  content: "−";
  transform: rotate(360deg);
  background: var(--teal-deep, #086E66);
  color: white;
}
.ap-faq details p {
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.6;
  color: #4A5071;
  max-width: 64ch;
}

/* ── Final CTA — cloud-grass bleed ───────────────────────────────────── */
.ap-final {
  position: relative;
  margin-top: clamp(60px, 8vw, 100px);
  padding: clamp(80px, 12vw, 160px) clamp(16px, 3vw, 48px);
  background: linear-gradient(180deg, #D2E5FF 0%, #E5E1F5 30%, #F8E8DD 60%, #ABD9B0 100%);
  border-radius: 32px;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.ap-final::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/img/clouds-sky.jpg");
  background-size: cover;
  background-position: center;
  opacity: 0.9;
  z-index: -1;
  border-radius: inherit;
}
.ap-final .ap-final-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
}
.ap-final h2 {
  text-align: center;
  margin: 0 auto 22px;
  font-size: clamp(40px, 5vw + 0.5rem, 72px);
  max-width: 14ch;
}
.ap-final p.lede {
  text-align: center;
  margin: 0 auto 36px;
}
.ap-final-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}
.ap-final-cta-row .brand-hero-cta { margin: 0; }
.ap-final-tardigrade {
  position: absolute;
  width: 90px; height: 90px;
  bottom: 8%;
  left: 8%;
  opacity: 0.85;
  filter: drop-shadow(0 6px 12px rgba(20,21,26,0.16));
  animation: appDriftSway 9s ease-in-out infinite;
}
.ap-final-tardigrade.right {
  left: auto; right: 8%; bottom: 12%;
  animation-delay: -4s;
  width: 70px; height: 70px;
}
.ap-final-tardigrade img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 600px) {
  .ap-final-tardigrade { width: 60px; height: 60px; }
  .ap-final-tardigrade.right { width: 50px; height: 50px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .app-hero-phone img,
  .app-hero-drift,
  .ap-final-tardigrade { animation: none !important; }
}

/* ── iter70: cream-paper final CTA (replaces cloud-grass bleed) ──── */
.ap-final.ap-final--paper {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF6 50%, #F5F2EA 100%);
  border: 1px solid rgba(15, 148, 139, 0.16);
  box-shadow: 0 24px 64px -16px rgba(14, 30, 30, 0.10);
}
.ap-final.ap-final--paper::before { display: none; }

/* ── iter70: interactive phone tour ──────────────────────────────── */
.app-phone-tour {
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.app-phone-tour img {
  position: relative;
  z-index: 0;
}

.app-hero-hint {
  font-family: var(--serif, "Domine", Georgia, serif);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--teal-deep, #086E66);
  opacity: 0.75;
}

/* Hotspot — small numbered dot with a pulsing teal halo */
.app-hot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  z-index: 4;
  outline: none;
}
.app-hot .app-hot-num {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--teal-deep, #086E66);
  color: #fff;
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(7, 86, 79, 0.30),
              0 0 0 2px rgba(255, 255, 255, 0.95);
  transition: transform 220ms cubic-bezier(.2, .9, .3, 1);
}
.app-hot::before,
.app-hot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 2px solid rgba(15, 148, 139, 0.50);
  z-index: 1;
  pointer-events: none;
  animation: appHotPulse 2.4s ease-out infinite;
}
.app-hot::after { animation-delay: 1.2s; }
@keyframes appHotPulse {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(2.6); opacity: 0;   }
}
.app-hot:hover .app-hot-num,
.app-hot.is-active .app-hot-num,
.app-hot:focus-visible .app-hot-num {
  transform: scale(1.18);
  background: #07564F;
}
.app-hot.is-active::before,
.app-hot.is-active::after { animation: none; opacity: 0; }
.app-hot:focus-visible .app-hot-num {
  box-shadow: 0 2px 6px rgba(7, 86, 79, 0.30),
              0 0 0 2px #fff,
              0 0 0 5px rgba(15, 148, 139, 0.45);
}

/* Tooltip card — appears beside the active hotspot */
.app-tooltip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 200ms ease, transform 200ms ease, left 320ms cubic-bezier(.2, .9, .3, 1), top 320ms cubic-bezier(.2, .9, .3, 1);
  max-width: 260px;
  min-width: 220px;
  background: #1F2025;
  color: #E8E5DE;
  font-family: var(--display);
  font-size: 13px;
  line-height: 1.5;
  padding: 14px 16px;
  border-radius: 12px;
  box-shadow: 0 20px 50px -10px rgba(20, 21, 26, 0.40),
              0 8px 18px rgba(20, 21, 26, 0.20);
}
.app-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.app-tooltip strong {
  display: block;
  font-family: var(--display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(191, 227, 224, 0.86);
  margin: 0 0 4px;
}
.app-tooltip h4 {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 6px;
}
.app-tooltip em {
  font-family: var(--serif, "Domine", Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: rgba(191, 227, 224, 0.94);
}
/* Tooltip arrow */
.app-tooltip::before {
  content: "";
  position: absolute;
  width: 12px; height: 12px;
  background: #1F2025;
  transform: rotate(45deg);
  border-radius: 2px;
}
.app-tooltip[data-side="left"]::before  { right: -5px;  top: 50%; margin-top: -6px; }
.app-tooltip[data-side="right"]::before { left:  -5px;  top: 50%; margin-top: -6px; }
.app-tooltip[data-side="top"]::before   { bottom: -5px; left: 50%; margin-left: -6px; }
.app-tooltip[data-side="bottom"]::before{ top:    -5px; left: 50%; margin-left: -6px; }

@media (max-width: 700px) {
  /* On mobile, anchor tooltip below the phone instead of beside it */
  .app-tooltip {
    position: static;
    margin: 14px auto 0;
    max-width: none;
    opacity: 1;
    transform: none;
    transition: none;
    display: none;
  }
  .app-tooltip.is-visible { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .app-hot::before, .app-hot::after { animation: none; opacity: 0.5; }
  .app-tooltip { transition: opacity 0ms; }
}

/* ── iter71: scroll-tied sticky phone storytelling ──────────────── */

.ap-surfaces-section .container { position: relative; }

.ap-tour {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  margin-top: clamp(40px, 5vh, 64px);
}

/* Sticky phone column */
.ap-tour-phone {
  position: sticky;
  top: clamp(80px, 12vh, 120px);
  align-self: start;
  display: grid;
  grid-template-columns: auto 32px;
  gap: 18px;
  align-items: center;
  /* Constrain phone height to a sensible viewport-fit so it doesn't
     overshoot when the visitor zooms in. */
  height: min(82vh, 720px);
}

.ap-tour-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.ap-tour-screen {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 520ms cubic-bezier(.2, .9, .3, 1),
              transform 520ms cubic-bezier(.2, .9, .3, 1);
  transform: scale(0.985);
  will-change: opacity, transform;
  pointer-events: none;
}
.ap-tour-screen img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  filter: drop-shadow(0 28px 60px rgba(20, 21, 26, 0.18))
          drop-shadow(0 10px 20px rgba(15, 148, 139, 0.10));
}
.ap-tour-screen.is-active {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Progress rail (right of phone in desktop layout) */
.ap-tour-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 60%;
  position: relative;
}
.ap-tour-rail::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: rgba(14, 30, 30, 0.10);
  border-radius: 999px;
}
.ap-tour-rail::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 12px;
  width: 2px;
  height: var(--rail-fill, 0%);
  background: linear-gradient(180deg, #0F948B 0%, #086E66 100%);
  border-radius: 999px;
  transition: height 320ms cubic-bezier(.2, .9, .3, 1);
}
.ap-tour-rail li {
  position: relative;
  z-index: 1;
  width: 32px;
  display: grid;
  place-items: center;
}
.ap-tour-rail li span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1.5px solid rgba(14, 30, 30, 0.16);
  color: var(--ink-mute, #6E707A);
  font-family: var(--display);
  font-weight: 700;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  transition: background 220ms ease, border-color 220ms ease,
              color 220ms ease, transform 220ms cubic-bezier(.2,.9,.3,1);
}
.ap-tour-rail li.is-active span {
  background: var(--teal-deep, #086E66);
  border-color: var(--teal-deep, #086E66);
  color: #FFFFFF;
  transform: scale(1.18);
  box-shadow: 0 4px 10px -2px rgba(15, 148, 139, 0.4);
}
.ap-tour-rail li.is-passed span {
  background: rgba(15, 148, 139, 0.16);
  border-color: rgba(15, 148, 139, 0.32);
  color: var(--teal-deep, #086E66);
}

/* Text column — each block fills enough height to give the user a
   moment with the phone before the next screen swaps in. */
.ap-tour-text {
  display: flex;
  flex-direction: column;
  /* Each block needs vertical space so the IntersectionObserver gets
     a clear active block. The total height of this column drives the
     scroll length of the section. */
}
.ap-tour-block {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 0;
  transition: opacity 320ms ease;
  opacity: 0.42;
}
.ap-tour-block.is-active {
  opacity: 1;
}
.ap-tour-block:first-child { min-height: 60vh; }
.ap-tour-block:last-child  { min-height: 60vh; padding-bottom: 80px; }

.ap-tour-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--teal-deep, #086E66);
  margin-bottom: 14px;
}
.ap-tour-label span:first-child {
  font-family: var(--serif, "Domine", Georgia, serif);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  color: rgba(15, 18, 38, 0.42);
}
.ap-tour-block h3 {
  font-family: var(--display);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: #15161A;
  text-wrap: balance;
}
.ap-tour-block p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
  color: #4A5071;
  margin: 0;
  max-width: 38ch;
}

/* Mobile fallback — single column, each block gets a static phone above */
@media (max-width: 880px) {
  .ap-tour { grid-template-columns: 1fr; gap: 24px; }
  .ap-tour-phone {
    position: static;
    height: 380px;
    grid-template-columns: 1fr;
    margin-bottom: 0;
  }
  .ap-tour-rail { display: none; }
  .ap-tour-block {
    min-height: auto;
    opacity: 1;
    padding: 32px 0;
  }
  /* On mobile, each text block shows its own phone above. We do this
     by cloning the active screen between blocks via JS — but for
     fallback when JS is off, stack a single tour-phone before the
     text column. */
}

@media (prefers-reduced-motion: reduce) {
  .ap-tour-screen { transition: opacity 0ms; }
  .ap-tour-rail::after { transition: none; }
  .ap-tour-rail li span { transition: none; }
  .ap-tour-block { transition: none; opacity: 1; }
}