/* =====================================================================
   aw2b-page.css — page layer for the Agent Week 2 interactive-demo page.

   Loads AFTER aw2-design.css (tokens, reset, the aw2-* primitives) and
   AFTER aw2b-demo.css (the phone and the app screens). Everything here is
   prefixed .b- so it can never collide with either.

   Two things this file owns that the demo module deliberately does not:
     • the phone's --scale per breakpoint, and
     • the bezel-off treatment below 720px. A 402x874 phone drawn inside a
       390px phone is a picture of a phone. On a real handset the chrome
       comes off and the app screen fills a rounded card, which is what it
       should have looked like all along.
   ===================================================================== */

html, body { background: var(--cd-black); }
body {
  font-family: var(--cd-font);
  color: var(--cd-text-primary);
  margin: 0;
  overflow-x: hidden;
}

.b-cyan { color: var(--cd-accent); }

/* ---------------------------------------------------------- announce ---- */
.b-announce {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 10px var(--aw2-gutter);
  background: rgba(0, 210, 255, 0.08);
  border-bottom: 1px solid var(--cd-accent-stroke);
  font-size: var(--aw2-fs-fine);
  color: var(--cd-text-secondary);
  text-align: center;
  line-height: 1.35;
}
.b-announce b { color: var(--cd-text-primary); font-weight: 500; }
.b-announce__dot {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: var(--cd-accent);
  box-shadow: 0 0 0 4px rgba(0, 210, 255, 0.16);
}

/* --------------------------------------------------------------- nav ---- */
.b-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--cd-stroke-hair);
}
.b-nav__inner {
  max-width: var(--aw2-measure-wide);
  margin-inline: auto;
  padding: 10px var(--aw2-gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.b-nav__logo { height: 26px; width: auto; display: block; }

/* -------------------------------------------------------------- hero ---- */
.b-hero { position: relative; padding-block: clamp(2rem, 7vw, 4rem) 0; overflow: hidden; }
.b-hero__glow {
  position: absolute; inset: 0;
  background: var(--cd-hero-glow);
  pointer-events: none;
}
.b-hero__grid {
  position: relative;
  max-width: var(--aw2-measure-wide);
  margin-inline: auto;
  padding-inline: var(--aw2-gutter);
  display: grid;
  gap: clamp(2rem, 6vw, 3.5rem);
}
.b-hero__copy > * + * { margin-top: var(--cd-space-5); }
.b-hero__copy .aw2-hero { margin-block: 0; }

/* ------------------------------------------------------------- demo ----- */
.b-demo { position: relative; }
.b-demo__caption {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 6px 12px;
  margin-bottom: var(--cd-space-4);
}
.b-demo__live {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 12px;
  border: 1px solid var(--cd-accent-stroke);
  border-radius: var(--cd-radius-pill);
  background: var(--cd-accent-tint);
  font-size: var(--aw2-fs-fine);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--cd-accent);
}
.b-demo__live i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cd-accent);
  animation: bPulse 2.2s var(--cd-ease) infinite;
}
@keyframes bPulse {
  0%, 100% { opacity: 1;   box-shadow: 0 0 0 0   rgba(0, 210, 255, 0.55); }
  60%      { opacity: 0.5; box-shadow: 0 0 0 7px rgba(0, 210, 255, 0);    }
}
.b-demo__hint { font-size: var(--aw2-fs-fine); color: var(--cd-text-tertiary); }

/* The phone is 430x902 at scale 1. Below 720px the bezel comes off — see
   the bezel-off block further down — and --scale stops applying. */
.aw2-demo__stage { --scale: 1; }

/* ------------------------------------------------------------ credit ---- */
.b-cred {
  max-width: var(--aw2-measure-wide);
  margin: clamp(2rem, 6vw, 3rem) auto 0;
  padding: var(--cd-space-7) var(--aw2-gutter);
  border-top: 1px solid var(--cd-stroke-hair);
  display: grid; grid-template-columns: repeat(3, 1fr);
  text-align: center;
}
.b-cred__cell + .b-cred__cell { border-left: 1px solid var(--cd-stroke-hair); }
.b-cred__n {
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1;
}
.b-cred__n span { color: var(--cd-accent); }
.b-cred__l {
  margin-top: 6px;
  font-size: var(--aw2-fs-fine);
  color: var(--cd-text-tertiary);
  line-height: 1.25;
}

/* --------------------------------------------------------------- icp ---- */
.b-icp {
  position: relative; overflow: hidden;
  padding-block: var(--aw2-section-y);
  border-block: 1px solid var(--cd-stroke-hair);
  text-align: center;
}
.b-icp__glow {
  position: absolute; inset: 0;
  background: radial-gradient(90% 60% at 50% 50%, rgba(0, 210, 255, 0.10), transparent 65%);
  pointer-events: none;
}
.b-icp .aw2-wrap { position: relative; max-width: 44rem; }
.b-icp__h {
  font-size: var(--aw2-fs-h2);
  font-weight: 500; line-height: 1.12; letter-spacing: -0.025em;
  text-wrap: balance; margin: 0;
}
.b-icp__sub {
  margin: var(--cd-space-5) 0 var(--cd-space-7);
  color: var(--cd-text-secondary);
  font-size: var(--aw2-fs-body);
  line-height: 1.5;
}
.b-icp__sub b { color: var(--cd-text-primary); font-weight: 500; }

/* ---------------------------------------------------------- benefits ---- */
.b-benefits { display: grid; gap: var(--cd-space-4); }
.b-benefit {
  padding: var(--cd-space-7) var(--cd-space-6);
  border: 1px solid var(--cd-stroke-soft);
  border-radius: var(--cd-radius-lg);
  background: var(--cd-card-gradient);
}
.b-benefit__ic { display: block; width: 30px; height: 30px; color: var(--cd-accent); }
.b-benefit__ic svg { width: 100%; height: 100%; }
.b-benefit__t {
  margin: var(--cd-space-4) 0 var(--cd-space-2);
  font-size: var(--aw2-fs-h3); font-weight: 500; letter-spacing: -0.015em;
}
.b-benefit__d { margin: 0; color: var(--cd-text-tertiary); font-size: var(--aw2-fs-small); line-height: 1.5; }

/* ---------------------------------------------------------- features ---- */
.b-feat + .b-feat { margin-top: clamp(2.5rem, 9vw, 4rem); }
.b-feat__kick {
  font-size: var(--aw2-fs-fine);
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cd-accent);
  margin-bottom: var(--cd-space-3);
}
.b-feat .aw2-h2 { margin: 0 0 var(--cd-space-4); }
.b-feat .aw2-body { margin: 0; color: var(--cd-text-secondary); }

/* Deep link into the demo. Deliberately NOT a primary button — it competes
   with the trial CTA otherwise, and it is a navigation, not a conversion. */
.b-seeit {
  margin-top: var(--cd-space-5);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--cd-accent-stroke);
  border-radius: var(--cd-radius-pill);
  background: var(--cd-accent-tint);
  color: var(--cd-accent);
  font-family: inherit; font-size: var(--aw2-fs-small); font-weight: 500;
  cursor: pointer;
  transition: background var(--cd-dur) var(--cd-ease), transform var(--cd-dur-fast) var(--cd-ease);
}
.b-seeit:hover { background: rgba(0, 210, 255, 0.20); }
.b-seeit:active { transform: scale(0.98); }
.b-seeit svg { width: 16px; height: 16px; }

.b-cta-inline { margin-block: clamp(2.5rem, 9vw, 4rem); }
/* .b-feat spaces itself with the adjacent-sibling rule above, which an
   inline CTA between two features breaks. Restate it across the CTA. */
.b-cta-inline + .b-feat { margin-top: clamp(2.5rem, 9vw, 4rem); }

/* -------------------------------------------------------- authority ---- */
.b-auth { display: grid; gap: var(--cd-space-8); }
.b-auth__img {
  width: 100%; height: auto; display: block;
  border-radius: var(--cd-radius-xl);
  border: 1px solid var(--cd-stroke-soft);
}
.b-auth__copy > * + * { margin-top: var(--cd-space-5); }
.b-auth__copy .aw2-body { color: var(--cd-text-secondary); }

/* ---------------------------------------------------------- reviews ---- */
.b-reviews { display: grid; gap: var(--cd-space-4); }
.b-review {
  margin: 0;
  padding: var(--cd-space-7) var(--cd-space-6);
  border: 1px solid var(--cd-stroke-soft);
  border-radius: var(--cd-radius-lg);
  background: var(--cd-card-gradient);
}
.b-review__stars { color: var(--cd-accent); font-size: 14px; letter-spacing: 2px; }
.b-review__t {
  margin: var(--cd-space-3) 0 var(--cd-space-3);
  font-size: var(--aw2-fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: -0.015em;
}
.b-review__b { margin: 0; color: var(--cd-text-secondary); font-size: var(--aw2-fs-small); line-height: 1.55; }
.b-review__by {
  margin-top: var(--cd-space-4);
  font-size: var(--aw2-fs-fine); color: var(--cd-text-muted);
  letter-spacing: 0.04em; text-transform: uppercase;
}

/* ---------------------------------------------------------- pricing ---- */
.b-plan__head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--cd-space-4);
  margin-bottom: var(--cd-space-6);
}
.b-plan__name { font-size: var(--aw2-fs-h3); font-weight: 500; letter-spacing: -0.015em; }
.b-plan__price { margin-top: 4px; color: var(--cd-text-tertiary); font-size: var(--aw2-fs-small); }
.b-plan__price b {
  font-size: clamp(1.75rem, 8vw, 2.25rem); font-weight: 500; letter-spacing: -0.03em;
  color: var(--cd-text-primary); margin-right: 6px;
}
.b-list { list-style: none; margin: 0; padding: 0; }
.b-list li {
  position: relative;
  padding: 9px 0 9px 30px;
  font-size: var(--aw2-fs-small);
  color: var(--cd-text-secondary);
  line-height: 1.4;
}
.b-list li::before {
  content: ""; position: absolute; left: 0; top: 12px;
  width: 17px; height: 10px;
  border-left: 2px solid var(--cd-accent);
  border-bottom: 2px solid var(--cd-accent);
  transform: rotate(-45deg) scale(0.85);
  transform-origin: center;
}
.b-list--bonus li span {
  float: right; margin-left: 10px;
  color: var(--cd-text-muted); font-size: var(--aw2-fs-fine);
}
.b-plan__bonus-h {
  margin: var(--cd-space-6) 0 var(--cd-space-3);
  font-size: var(--aw2-fs-fine); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cd-accent);
}
.b-plan .aw2-btn { margin-top: var(--cd-space-7); }

/* ------------------------------------------------------------ close ---- */
.b-close {
  position: relative; overflow: hidden;
  padding-block: var(--aw2-section-y);
  border-top: 1px solid var(--cd-stroke-hair);
}
.b-close__glow {
  position: absolute; inset: 0;
  background: radial-gradient(90% 70% at 50% 100%, rgba(0, 210, 255, 0.14), transparent 65%);
  pointer-events: none;
}
.b-close .aw2-wrap { position: relative; }

/* ----------------------------------------------------------- footer ---- */
.b-footer {
  padding: var(--cd-space-9) var(--aw2-gutter) calc(var(--cd-space-9) + 96px);
  border-top: 1px solid var(--cd-stroke-hair);
  text-align: center;
}
.b-footer__logo { height: 24px; width: auto; opacity: 0.55; margin-bottom: var(--cd-space-5); }
.b-footer .aw2-fine + .aw2-fine { margin-top: var(--cd-space-3); }
.b-dock-note { margin: 6px 0 0; font-size: var(--aw2-fs-fine); color: var(--cd-text-tertiary); text-align: center; }

.b-noscript {
  padding: 20px; text-align: center;
  background: var(--cd-accent); color: #001417; font-weight: 500;
}

/* =====================================================================
   THE PHONE, PER BREAKPOINT
   ===================================================================== */

/* --- Below 720px: bezel off, and the screen gets SHORTER, not smaller. ----
   Two problems the obvious approach creates.

   A 402pt phone drawn inside a 390px phone reads as a picture of a phone,
   and scaling it down to fit makes the app type unreadable — which is the
   whole point of the section. So the frame, the island and the side buttons
   come off and the screen becomes a rounded card at gutter width. The app
   keeps its true 402pt metrics; the card scales them, so nothing inside
   has to be re-laid-out.

   That alone leaves an 874pt-tall card taller than the viewport, which puts
   the tab bar — the one control the page is asking people to press — below
   the fold. So on a handset the SCREEN is shortened rather than the phone
   scaled: the pages are inset:0 and the tab bar is pinned to the bottom of
   .screen, so a shorter screen simply shows less of a scrollable app, with
   the tabs still on it. 200px is the caption above plus room to see that
   the page continues past the phone. */
@media (max-width: 719px) {
  .aw2-demo__stage {
    --w: min(100%, 402px);
    --s: calc(var(--w) / 402);
    --h: min(874px, calc(100svh - 200px));
    width: 100%;
    height: calc(var(--h) * var(--s));
    display: block;
  }
  .aw2-demo__stage .phone-scaler {
    width: var(--w);
    margin-inline: auto;
    transform: scale(var(--s));
    transform-origin: top center;
  }
  .b-demo .phone {
    width: 402px;
    height: var(--h);
    padding: 0;
    border-radius: 28px;
    box-shadow: 0 24px 60px -18px rgba(0, 0, 0, 0.85),
                inset 0 0 0 1px var(--cd-stroke-soft);
  }
  .b-demo .phone::after { display: none; }   /* side buttons */
  .b-demo .screen       { border-radius: 28px; }
  .b-demo .ap-coach     { padding-bottom: 78px; }
}

/* svh is what makes the height rule behave on iOS Safari as the address bar
   collapses. Older engines get vh, which is a slightly taller card — the
   tab bar can then sit just under the fold on the very first paint. */
@supports not (height: 100svh) {
  @media (max-width: 719px) {
    .aw2-demo__stage { --h: min(874px, calc(100vh - 240px)); }
  }
}

/* --- 720px and up: the phone as a device, beside the copy. --------------
   Same rule as the handset, for the same reason: at 0.86 an 874pt phone is
   752px tall, which drops the tab bar off the bottom of a laptop screen. The
   SCREEN shortens instead of the phone shrinking further, so the app type
   stays at full size and the tabs stay reachable.

   --inv is 1/--scale. The screen has to be scaled-height ≤ the space we have,
   i.e. --h ≤ available / scale, and calc() will multiply by a unitless custom
   property but dividing by one is not reliable across engines. --reserve is
   the chrome above the phone (announce + nav + caption) plus enough room
   below it to show the page keeps going. */
@media (min-width: 720px) {
  .aw2-demo__stage {
    --scale: 0.78;
    --inv: 1.282;
    --reserve: 230px;
    --h: min(874px, calc((100svh - var(--reserve)) * var(--inv)));
    height: calc(var(--h) * var(--scale));
  }
  .b-demo .phone { height: var(--h); }
  .b-hero__grid { grid-template-columns: 1fr; justify-items: center; }
  .b-hero__copy { max-width: 40rem; text-align: center; }
  .b-benefits { grid-template-columns: repeat(2, 1fr); }
  .b-reviews  { grid-template-columns: repeat(3, 1fr); }
}

@supports not (height: 100svh) {
  @media (min-width: 720px) {
    .aw2-demo__stage { --h: min(874px, calc((100vh - var(--reserve)) * var(--inv))); }
  }
}

@media (min-width: 1000px) {
  .aw2-demo__stage {
    --scale: 0.86;
    --inv: 1.163;
    --reserve: 290px;
  }
  .b-hero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: start;
  }
  .b-hero__copy { text-align: left; max-width: none; }
  .b-benefits { grid-template-columns: repeat(4, 1fr); }
  .b-auth {
    grid-template-columns: 320px minmax(0, 1fr);
    align-items: center;
  }
  .aw2-section .aw2-wrap,
  .b-icp .aw2-wrap { max-width: var(--aw2-measure-wide); }
  .b-feat { max-width: 46rem; }
}

/* ------------------------------------------------------ reduced motion ---
   aw2-design.css already flattens every animation and transition globally
   with !important. These are the states that must survive that: nothing
   here may depend on a transition to become visible. */
@media (prefers-reduced-motion: reduce) {
  .b-demo__live i { animation: none; opacity: 1; }
}

/* =====================================================================
   TAB BAR — restyled dark.

   The source repurposed Apple's App Store tab bar, so it was light grey
   with a blue active state. Sitting under a black app screen that reads as
   a different app. It is now the app's own dark bar with the cyan accent,
   and the "tap me" pulse follows.
   ===================================================================== */
.b-demo .tabbar {
  background: rgba(10, 10, 10, 0.94);
  border-top: 1px solid var(--cd-stroke-hair);
  height: 78px;
  padding: 9px 6px 0;
}
.b-demo .tab {
  color: var(--cd-text-muted);
  font-family: var(--cd-font);
  transition: color var(--cd-dur) var(--cd-ease);
}
.b-demo .tab .t-label { font-size: 10px; font-weight: 500; letter-spacing: 0.02em; }
.b-demo .tab svg { width: 23px; height: 23px; }
.b-demo .tab.active { color: var(--cd-accent); }
.b-demo .tab:hover { color: var(--cd-text-secondary); }
.b-demo .tab.active:hover { color: var(--cd-accent); }

/* Restate the source's staggered pulse in the accent, gated twice:
     .is-live   — an invitation to tap something off screen is just jitter.
     :not(.has-tapped) — once someone HAS tapped a tab the invitation is
                  answered, and a second glowing cyan icon beside the real
                  active tab just reads as two active tabs. */
@keyframes bNavPulse {
  0%, 4%  { transform: scale(1);   color: rgba(255, 255, 255, 0.40); filter: none; }
  13%     { transform: scale(1.2); color: var(--cd-accent); filter: drop-shadow(0 0 8px rgba(0, 210, 255, 0.85)); }
  24%     { transform: scale(1);   color: rgba(255, 255, 255, 0.40); filter: none; }
  100%    { transform: scale(1);   color: rgba(255, 255, 255, 0.40); filter: none; }
}
.b-demo.is-live:not(.has-tapped) .tab[data-page="page-home"]  svg { animation: bNavPulse 8s var(--cd-ease) 0s infinite; }
.b-demo.is-live:not(.has-tapped) .tab[data-page="page-fuel"]  svg { animation: bNavPulse 8s var(--cd-ease) 2s infinite; }
.b-demo.is-live:not(.has-tapped) .tab[data-page="page-plan"]  svg { animation: bNavPulse 8s var(--cd-ease) 4s infinite; }
.b-demo.is-live:not(.has-tapped) .tab[data-page="page-coach"] svg { animation: bNavPulse 8s var(--cd-ease) 6s infinite; }
.b-demo .tab.active svg { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .b-demo .tab svg { animation: none !important; }
}

/* The Vault opens on an empty transcript and types into it. Anchoring the
   column to the bottom, the way a real messenger does, means the first
   message rises off the composer instead of appearing at the top of a tall
   empty panel. */
.b-demo .coach-scroll { display: flex; flex-direction: column; justify-content: flex-end; }

/* .aw2-eyebrow--marked is a flex row (the accent dash is a ::before), so
   text-align on an .aw2-center parent does not move it. Centre the row. */
.aw2-center > .aw2-eyebrow--marked,
.aw2-center   .aw2-eyebrow--marked { justify-content: center; }