/* ================================================================
   Phase pages (Phase 1 / 2 / 3): shared component layer on top of
   eud-glass.css. Load eud-glass.css BEFORE this file.
   Class prefix: p- (page-agnostic, shared by all three phase pages).
================================================================ */

/* ── Hero ── */
.p-hero.g-section--light { background: #FFFFFF; }
.p-hero-inner {
  max-width: 720px; margin: 0 auto; text-align: center;
  display: grid; justify-items: center; gap: 22px;
}
.p-hero-inner .g-eyebrow { justify-self: center; }
.p-hero-inner .g-title { margin: 0; font-size: clamp(36px, 4.4vw, 64px); } /* page title cap, same as .g-display */
.p-hero-inner .g-lead { margin: 0; text-align: center; }

/* ── Section header block (eyebrow + title + lead), left-aligned ── */
.p-head { display: grid; gap: 18px; max-width: 720px; margin: 0 0 clamp(36px, 5vw, 64px); }
.p-head .g-eyebrow { justify-self: start; }
.p-head .g-title { margin: 0; }
.p-head .g-lead { margin: 0; }

/* Centred variant, used above the phase-nav cards */
.p-center-eyebrow { display: flex; justify-content: center; margin: 0 0 8px; }

/* ── "What happens" steps grid ── */
.p-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.p-step { display: flex; flex-direction: column; gap: 14px; }
.p-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--g-red); color: #FFFFFF;
  font-family: 'Alexandria', sans-serif; font-weight: 700; font-size: 15px; flex-shrink: 0;
}
.p-step-title { margin: 0; font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: 18px; line-height: 1.3; color: var(--g-ink); }
.p-step-text { margin: 0; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 15px; line-height: 1.6; color: var(--g-grey); }

/* ── Deliverables grid ── */
.p-del-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.p-del-item {
  display: flex; align-items: flex-start; gap: 16px;
  background: #FFFFFF; border: 1px solid rgba(150,55,35,0.14); border-radius: 20px; padding: 24px;
  box-shadow: 0 20px 44px rgba(43,18,6,0.06);
}
.p-del-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: var(--g-red); display: grid; place-items: center;
}
.p-del-icon svg { width: 20px; height: 20px; color: #FFFFFF; }
.p-del-text strong { display: block; margin: 0 0 4px; font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: 16px; color: var(--g-ink); }
.p-del-text span { display: block; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.55; color: var(--g-grey); }

/* ── Feature callout (Phase 2: prototype). Red-gradient card, same
   formula as the nav's mega-menu feature tile, so nav and page content
   share one recognisable "signature" surface. ── */
.p-callout {
  display: flex; gap: clamp(24px, 3vw, 40px); align-items: flex-start;
  padding: clamp(28px, 3.4vw, 44px); border-radius: 28px; color: #FFFFFF;
  background: radial-gradient(circle at 85% 0%, rgba(255,178,122,0.45), transparent 60%),
              linear-gradient(150deg, var(--g-red), var(--g-red-dark));
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 30px 60px rgba(96,33,20,0.25);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.p-callout-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,0.14); display: grid; place-items: center; }
.p-callout-icon svg { width: 26px; height: 26px; color: #FFFFFF; }
.p-callout-title { margin: 14px 0 12px; font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.2; }
.p-callout-text { margin: 0; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,0.85); }

/* ── Pricing ── */
.p-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.p-price-card { display: flex; flex-direction: column; }
.p-price-tier { margin: 0 0 10px; font-family: 'DM Sans', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--g-red); }
.p-price-name { margin: 0 0 20px; font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: 20px; color: var(--g-ink); }
.p-price-divider { height: 1px; background: rgba(150,55,35,0.16); margin-bottom: 20px; }
.p-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.p-price-row-label { font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 14px; color: var(--g-grey); }
.p-price-row-val { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 16px; color: var(--g-ink); }
.p-price-total { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(150,55,35,0.16); }
.p-price-total-label { margin: 0 0 4px; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 13px; color: var(--g-grey); }
.p-price-total-val { margin: 0; font-family: 'Alexandria', sans-serif; font-weight: 700; font-size: 26px; color: var(--g-ink); }
.p-price-note { margin: 8px 0 0; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 12.5px; line-height: 1.5; color: rgba(71,70,70,0.72); }

/* Middle tier: red "signature" card. No .g-glass on purpose (avoids a
   specificity fight with .g-section--light .g-glass); this card supplies
   its own surface directly. */
.p-price-card--feature {
  border-radius: clamp(28px, 3vw, 44px); padding: clamp(28px, 3.4vw, 52px); color: #FFFFFF;
  background: radial-gradient(circle at 85% 0%, rgba(255,178,122,0.5), transparent 60%),
              linear-gradient(150deg, var(--g-red), var(--g-red-dark));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 26px 60px rgba(96,33,20,0.28);
}
.p-price-card--feature .p-price-tier,
.p-price-card--feature .p-price-row-label,
.p-price-card--feature .p-price-total-label { color: rgba(255,255,255,0.72); }
.p-price-card--feature .p-price-name,
.p-price-card--feature .p-price-row-val,
.p-price-card--feature .p-price-total-val { color: #FFFFFF; }
.p-price-card--feature .p-price-divider,
.p-price-card--feature .p-price-total { border-color: rgba(255,255,255,0.22); }
.p-price-card--feature .p-price-note { color: rgba(255,255,255,0.68); }

/* Enterprise tier: reuses g-card--dark (the one recurring dark-ink
   surface, the same token as the nav and the closing CTA card). */
.g-card--dark .p-price-tier { color: rgba(255,255,255,0.6); }
.g-card--dark .p-price-name,
.g-card--dark .p-price-row-val,
.g-card--dark .p-price-total-val { color: #FFFFFF; }
.g-card--dark .p-price-divider,
.g-card--dark .p-price-total { border-color: rgba(255,255,255,0.16); }
.g-card--dark .p-price-row-label,
.g-card--dark .p-price-total-label { color: rgba(255,255,255,0.6); }
.g-card--dark .p-price-note { color: rgba(255,255,255,0.5); }

/* ── Notes ("Good to know") ── */
.p-notes-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.p-note-card {
  background: #FFFFFF; border: 1px solid rgba(150,55,35,0.14); border-left: 4px solid var(--g-red);
  border-radius: 4px 18px 18px 4px; padding: 22px 24px;
}
.p-note-title { margin: 0 0 8px; font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: 16px; color: var(--g-ink); }
.p-note-text { margin: 0; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 14.5px; line-height: 1.6; color: var(--g-grey); }

/* ── Launch checklist (Phase 3), on a red section ── */
.p-checklist-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.p-check-item.g-card { padding: 22px; }
.p-check-item { display: flex; align-items: flex-start; gap: 16px; }
.p-check-tick { flex-shrink: 0; width: 28px; height: 28px; margin-top: 2px; border-radius: 50%; background: var(--g-red); display: grid; place-items: center; }
.p-check-tick svg { width: 14px; height: 14px; color: #FFFFFF; }
.p-check-title { margin: 0 0 4px; font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: 15.5px; color: var(--g-ink); }
.p-check-text { margin: 0; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 14px; line-height: 1.55; color: var(--g-grey); }

/* ── Optional add-ons (Phase 3) ── */
.p-addons-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.p-addon-item { background: #FFFFFF; border: 1px solid rgba(150,55,35,0.14); border-radius: 18px; padding: 24px 22px; }
.p-addon-plan { margin: 0 0 12px; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--g-red); }
.p-addon-title { margin: 0 0 12px; font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: 15px; color: var(--g-ink); }
.p-addon-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.p-addon-list li { position: relative; padding-left: 18px; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 14px; line-height: 1.5; color: var(--g-grey); }
.p-addon-list li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--g-red); }

/* ── Explore other phases ── */
.p-phase-nav-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 760px; margin: clamp(28px, 3vw, 40px) auto 0; }
.p-phase-nav-card {
  display: flex; align-items: center; gap: 18px; min-height: 44px;
  background: #FFFFFF; border: 1px solid rgba(150,55,35,0.16); border-radius: 20px; padding: 22px 24px;
  text-decoration: none; transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.p-phase-nav-card:hover, .p-phase-nav-card:focus-visible { background: var(--g-red); border-color: var(--g-red); transform: translateY(-3px); }
.p-phase-nav-card:hover .p-pnav-num, .p-phase-nav-card:hover .p-pnav-title, .p-phase-nav-card:hover .p-pnav-sub, .p-phase-nav-card:hover .p-pnav-arrow,
.p-phase-nav-card:focus-visible .p-pnav-num, .p-phase-nav-card:focus-visible .p-pnav-title, .p-phase-nav-card:focus-visible .p-pnav-sub, .p-phase-nav-card:focus-visible .p-pnav-arrow { color: #FFFFFF; }
.p-phase-nav-card:focus-visible { outline: 3px solid #FFD999; outline-offset: 3px; }
.p-pnav-num { font-family: 'Alexandria', sans-serif; font-weight: 700; font-size: 28px; line-height: 1; color: rgba(43,18,6,0.15); flex-shrink: 0; transition: color 0.25s ease; }
.p-pnav-content { flex: 1; min-width: 0; }
.p-pnav-title { margin: 0 0 3px; font-family: 'Alexandria', sans-serif; font-weight: 600; font-size: 16px; color: var(--g-ink); transition: color 0.25s ease; }
.p-pnav-sub { margin: 0; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 13.5px; color: var(--g-grey); transition: color 0.25s ease; }
.p-pnav-arrow { flex-shrink: 0; color: rgba(43,18,6,0.3); transition: color 0.25s ease; }
.p-pnav-arrow svg { width: 18px; height: 18px; display: block; }

/* ── CTA ── */
.p-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin-top: 36px; }
.p-fine { margin: 20px 0 0; text-align: center; font-family: 'Google Sans Flex', 'DM Sans', sans-serif; font-size: 13.5px; color: rgba(255,255,255,0.6); }

/* ── Tablet ── */
@media (max-width: 1040px) {
  .p-del-grid, .p-notes-grid, .p-checklist-grid, .p-phase-nav-grid, .p-price-grid { grid-template-columns: 1fr; }
  .p-callout { flex-direction: column; gap: 20px; }
  .p-phase-nav-grid { max-width: 520px; }
}

/* ── Phone (iPhone 16, 393 wide) ── */
@media (max-width: 520px) {
  .p-step, .p-check-item.g-card { padding: 20px; }
  .p-del-item { padding: 20px; }
  .p-note-card, .p-addon-item { padding: 20px; }
  .p-callout { padding: 24px; }
  .p-callout-icon { width: 48px; height: 48px; }
  .p-phase-nav-card { padding: 18px 20px; gap: 14px; }
  .p-pnav-num { font-size: 22px; }
}