/* ============================================================
   PODRELAY · APPLE DESIGN LAYER
   Loaded last on every public page (never on the client portal,
   which shares palette.css). Re-skins the homepage and every
   seo-pages.css page through one token set.

   Specificity: seo-pages.css scopes service pages with
   html:has(link[rel=canonical]...) selectors. Every component
   rule here is prefixed with html:not(#ap), which carries an id
   weight, so this layer wins on order alone without !important.

   Motion: CSS easings below are real springs sampled into
   linear() (damping / response, Apple's two parameters).
   Gesture-driven motion lives in apple.js, not in CSS.
   ============================================================ */

:root{
  --ap-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI Variable Text","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --ap-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,"Helvetica Neue",Arial,sans-serif;
  --ap-mono:ui-monospace,"SF Mono",SFMono-Regular,"Cascadia Mono",Menlo,Consolas,monospace;

  --ap-bg:#FFFFFF;
  --ap-bg-alt:#F5F5F7;
  --ap-tile:#F5F5F7;
  --ap-tile-on-alt:#FFFFFF;
  /* Greys: two steps for readable text, hierarchy comes from size and weight.
     text-2 is 5.99:1 on white and 5.50:1 on #F5F5F7; text-3 is 5.07 / 4.66.
     #86868B (3.6:1) is decorative only: separators and disabled states. */
  --ap-text:#1D1D1F;
  --ap-text-2:#636366;
  --ap-text-3:#6E6E73;
  --ap-text-deco:#86868B;
  --ap-hair:rgba(0,0,0,.1);
  --ap-hair-strong:rgba(0,0,0,.16);
  /* Outlines that identify a control (fields, slider thumb): 3.26:1 on white. */
  --ap-control-stroke:#8E8E93;
  /* Two golds. FILL sits behind dark text (8.4-10:1) and is never used as
     text on light. INK is the text gold: 5.24:1 on white, 4.81:1 on grey. */
  /* Light mode runs a richer, less yellow shade of the same gold (hue 37 vs
     40), the way Apple shifts one accent's shade between appearances. Dark
     text on every stop stays 5.69-8.63:1. Dark mode keeps the brighter gold. */
  --ap-gold:#E8960F;
  --ap-gold-grad:linear-gradient(135deg,#E8960F 0%,#F3AC38 48%,#D48406 100%);
  --ap-gold-ink:#9A5F00;
  --ap-gold-ink-strong:#8A5300;
  --ap-gold-ink-grad:linear-gradient(135deg,#B07100 0%,#9A5F00 55%,#8F5800 100%);
  --ap-control-fill:#B87A06;
  --ap-gold-tint:rgba(232,150,15,.12);
  --ap-on-gold:#1D1D1F;
  --ap-pass:#1E8E5A;
  --ap-flag:#C8372D;

  /* Materials: weight encodes hierarchy. Chrome is light, sheets are thicker. */
  --ap-material:rgba(255,255,255,.72);
  --ap-material-thick:rgba(250,250,252,.88);
  --ap-material-edge:rgba(255,255,255,.6);
  --ap-popover-solid:#FFFFFF;
  --ap-nav-surface:#F8F6F1;
  --ap-blur:saturate(180%) blur(20px);
  --ap-blur-thick:saturate(180%) blur(30px);
  --ap-scrim:rgba(0,0,0,.32);

  --ap-shadow-sm:0 1px 2px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);
  --ap-shadow-lg:0 2px 6px rgba(0,0,0,.05),0 24px 60px -12px rgba(0,0,0,.18);

  --ap-r-xs:8px;
  --ap-r-sm:12px;
  --ap-r:18px;
  --ap-r-lg:28px;
  --ap-pill:980px;

  --ap-maxw:1080px;
  --ap-maxw-wide:1240px;
  --ap-gutter:max(22px,env(safe-area-inset-left));
  --ap-sec:clamp(4.5rem,10vw,8.5rem);

  /* damping 1.0, response 0.4 (default UI) */
  --ap-spring:linear(0,.065,.197,.343,.483,.601,.697,.774,.833,.877,.911,.935,.953,.967,.976,.983,.988,.992,.994,.996,.997,.998,.999,.999,1);
  --ap-spring-dur:.62s;
  /* damping 1.0, response 0.6 (large surfaces arriving) */
  --ap-spring-slow:linear(0,.059,.184,.325,.46,.578,.675,.753,.815,.862,.898,.925,.945,.96,.971,.979,.985,.989,.992,.994,.996,.997,.998,.999,1);
  --ap-spring-slow-dur:.89s;
  --ap-ease-fallback:cubic-bezier(.22,1,.36,1);

  /* Legacy tokens read by seo-pages.css, contact.css and site.js output.
     --amber also colors the masked logo mark, so it follows the shade too. */
  --amber:var(--ap-gold);
  --gold:var(--ap-gold-grad);
  --primary:var(--ap-gold);
  --action-background:var(--ap-gold);
  --background:var(--ap-bg);
  --foreground:var(--ap-text);
  --card:var(--ap-bg);
  --card-foreground:var(--ap-text);
  --popover:var(--ap-material-thick);
  --secondary:var(--ap-bg-alt);
  --muted-surface:var(--ap-bg-alt);
  --muted-foreground:var(--ap-text-2);
  --border:var(--ap-hair);
  --input:var(--ap-control-stroke);
  --link:var(--ap-gold-ink);
  --accent:var(--ap-gold-tint);
  --ring:var(--ap-gold-ink);
  --header-background:var(--ap-material);
  --shadow-md:var(--ap-shadow-sm);
  --font-sans:var(--ap-font);
  --font-serif:var(--ap-font);
  --font-mono:var(--ap-font);
  --display:var(--ap-font-display);
  --body:var(--ap-font);
  --mono:var(--ap-font);
  --serif:var(--ap-font);
  --max:var(--ap-maxw);
  --gutter:var(--ap-gutter);
}
@supports not (transition-timing-function:linear(0,1)){
  :root{ --ap-spring:var(--ap-ease-fallback); --ap-spring-slow:var(--ap-ease-fallback); --ap-spring-dur:.5s; --ap-spring-slow-dur:.7s }
}
:root[data-theme="dark"]{
  --ap-bg:#000000;
  --ap-bg-alt:#101011;
  --ap-tile:#1C1C1E;
  --ap-tile-on-alt:#1C1C1E;
  --ap-text:#F5F5F7;
  --ap-text-2:#A1A1A6;
  --ap-text-3:#86868B;
  --ap-text-deco:#6E6E73;
  --ap-hair:rgba(255,255,255,.12);
  --ap-hair-strong:rgba(255,255,255,.2);
  --ap-control-stroke:#8E8E93;
  /* Dark mode keeps the original, brighter gold for fills. */
  --ap-gold:#F4A915;
  --ap-gold-grad:linear-gradient(135deg,#F4A915 0%,#FFBD38 48%,#E99A08 100%);
  /* On black the bright gold already reads at 10.5-12.6:1, so text uses it. */
  --ap-gold-ink:#F4B53A;
  --ap-gold-ink-strong:#F4B53A;
  --ap-gold-ink-grad:var(--ap-gold-grad);
  --ap-control-fill:#F4A915;
  --ap-gold-tint:rgba(244,169,21,.14);
  --ap-pass:#30D158;
  --ap-flag:#FF6961;
  --ap-material:rgba(22,22,23,.72);
  --ap-material-thick:rgba(30,30,32,.86);
  --ap-material-edge:rgba(255,255,255,.08);
  --ap-popover-solid:#1C1C1E;
  --ap-nav-surface:#242321;
  --ap-scrim:rgba(0,0,0,.5);
  --ap-shadow-sm:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.3);
  --ap-shadow-lg:0 2px 6px rgba(0,0,0,.4),0 24px 60px -12px rgba(0,0,0,.7);
  --popover:var(--ap-material-thick);
}

/* Theme changes ease rather than flash (no abrupt brightness jumps). */
html{ transition:background-color .35s ease }
body{ transition:background-color .35s ease,color .35s ease }

/* ============================================================
   BASE TYPOGRAPHY
   Tracking is size-specific: negative as type grows, ~0 at body.
   ============================================================ */
html:not(#ap){ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-padding-top:100px }
html:not(#ap) body{
  background:var(--ap-bg);
  color:var(--ap-text);
  font-family:var(--ap-font);
  font-size:1.0625rem;
  line-height:1.47;
  letter-spacing:-.011em;
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
html:not(#ap) body :is(a,button,summary,input,label,[role="button"]){ touch-action:manipulation; -webkit-tap-highlight-color:transparent }
:where(*,*::before,*::after){ box-sizing:border-box }
html:not(#ap) body{ margin:0; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; overflow-x:clip }
html:not(#ap) body > main{ flex:1 0 auto }
:where(a){ color:inherit; text-decoration:none }
html:not(#ap) p{ color:var(--ap-text-2) }
html:not(#ap) strong{ color:var(--ap-text); font-weight:600 }
html:not(#ap) ::selection{ background:rgba(244,169,21,.32); color:inherit }
html:not(#ap) :focus-visible{ outline:2px solid var(--ap-gold-ink); outline-offset:3px; border-radius:6px }

html:not(#ap) :is(h1,h2,h3,h4){
  font-family:var(--ap-font-display);
  color:var(--ap-text);
  text-transform:none;
  font-stretch:100%;
  text-wrap:balance;
}
html:not(#ap) h1{
  font-size:clamp(2.5rem,6.2vw,4.5rem);
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:700;
}
html:not(#ap) h2{
  font-size:clamp(2rem,4.6vw,3.5rem);
  line-height:1.07;
  letter-spacing:-.028em;
  font-weight:700;
}
html:not(#ap) h3{ font-size:1.3125rem; line-height:1.2; letter-spacing:-.018em; font-weight:600 }
html:not(#ap) :is(h1,h2) em{
  font-family:inherit; font-style:normal; font-weight:inherit;
  font-size:inherit; letter-spacing:inherit; text-transform:none;
  animation:none;
  color:var(--ap-gold-ink);
}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
  /* Text gold, not fill gold: the bright gradient measured 1.5:1 as text. */
  html:not(#ap) :is(h1,h2) em{
    background:var(--ap-gold-ink-grad); background-size:100% 100%;
    -webkit-background-clip:text; background-clip:text;
    color:transparent; -webkit-text-fill-color:transparent;
  }
}

/* ============================================================
   BUTTONS · pill shape, feedback on press (pointer-down)
   ============================================================ */
html:not(#ap) body :is(.button,.btn,.pi-btn,.ap-btn),
html:not(#ap) body a[href="https://cal.com/podrelay/30min"]:is(.btn,.button,.pi-btn){
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  min-height:44px;
  padding:.7rem 1.35rem;
  border:0;
  border-radius:var(--ap-pill);
  font-family:var(--ap-font);
  font-size:1.0625rem;
  font-weight:500;
  letter-spacing:-.011em;
  line-height:1.15;
  text-transform:none;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  box-shadow:none;
  filter:none;
  transform:none;
  background:var(--ap-tile);
  color:var(--ap-text);
  transition:transform .32s var(--ap-spring),background-color .2s ease,color .2s ease,box-shadow .2s ease;
}
html:not(#ap) body :is(.button.primary,.btn--solid,.pi-btn--solid,.ap-btn--gold),
html:not(#ap) body a[href="https://cal.com/podrelay/30min"]:is(.btn,.button,.pi-btn){
  background:var(--ap-gold-grad); background-size:100% 100%;
  color:var(--ap-on-gold);
  font-weight:600;
}
html:not(#ap) body :is(.btn--ghost,.ap-btn--ghost){
  background:transparent;
  color:var(--ap-gold-ink);
  box-shadow:inset 0 0 0 1px currentColor;
}
html:not(#ap) body :is(.button,.btn,.pi-btn,.ap-btn):hover,
html:not(#ap) body a[href="https://cal.com/podrelay/30min"]:is(.btn,.button,.pi-btn):hover{
  transform:none;
  filter:brightness(1.04);
  background-position:0 0;
}
html:not(#ap) body :is(.button,.btn):not(.primary):not(.btn--solid):not([href^="https://cal.com"]):hover{ background-color:var(--ap-hair) }
/* Instant response the moment it is pressed, not on release. */
html:not(#ap) body :is(.button,.btn,.pi-btn,.ap-btn):active,
html:not(#ap) body a[href="https://cal.com/podrelay/30min"]:is(.btn,.button,.pi-btn):active{
  transform:scale(.96);
  transition:transform .1s ease-out;
}
html:not(#ap) body :is(.btn--lg,.ap-btn--lg){ min-height:52px; padding:.85rem 1.7rem; font-size:1.0625rem }
html:not(#ap) body :is(.button,.btn) svg{ width:15px; height:15px; flex:0 0 15px; transform:none }

/* Text link with chevron: Apple's secondary CTA */
html:not(#ap) .ap-link{
  display:inline-flex; align-items:center; gap:.2em;
  color:var(--ap-gold-ink);
  font-size:1.0625rem; font-weight:400; letter-spacing:-.011em;
  text-decoration:none;
}
html:not(#ap) .ap-link::after{
  content:""; width:.42em; height:.42em; margin-left:.12em;
  border-right:1.6px solid currentColor; border-top:1.6px solid currentColor;
  transform:rotate(45deg);
  transition:transform .32s var(--ap-spring);
}
html:not(#ap) .ap-link:hover{ text-decoration:underline; text-underline-offset:.18em }
html:not(#ap) .ap-link:hover::after{ transform:translateX(2px) rotate(45deg) }
html:not(#ap) .ap-link:active{ opacity:.6 }

/* ============================================================
   HEADER · floating capsule, centered navigation
   ============================================================ */
html:not(#ap) .site-header{
  position:sticky; top:16px; z-index:120;
  width:calc(100% - 48px); max-width:920px;
  margin:16px auto;
  /* Opaque ivory/charcoal keeps scrolling text from showing through. */
  background:var(--ap-nav-surface);
  border:1px solid var(--ap-hair);
  border-radius:var(--ap-pill);
  box-shadow:0 2px 3px rgba(0,0,0,.02),0 12px 36px -16px rgba(0,0,0,.18);
  transition:box-shadow .3s ease,background-color .3s ease;
}
html:not(#ap) .site-header.is-scrolled{ box-shadow:0 2px 4px rgba(0,0,0,.04),0 16px 40px -16px rgba(0,0,0,.22) }
html:not(#ap) .site-header::after{ display:none }
html:not(#ap) .site-header .header-inner{
  height:58px;
  max-width:none;
  display:flex; align-items:center; gap:.5rem;
  padding-inline:20px;
  margin-inline:auto;
}
html:not(#ap) :is(.brand,.wordmark){
  display:inline-flex; align-items:center; gap:.5rem;
  margin-right:auto;
  font-family:var(--ap-font-display);
  font-size:1.0625rem; font-weight:500;
  letter-spacing:.02em;
  color:var(--ap-text);
  white-space:nowrap;
}
html:not(#ap) :is(.brand,.wordmark) :is(.brand-name,span){ color:var(--ap-text) }
html:not(#ap) :is(.brand,.wordmark) strong{ font-weight:700 }
html:not(#ap) :is(.mark,.wordmark-glyph){ display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px }
html:not(#ap) :is(.mark,.wordmark-glyph) img{ width:100%; height:100%; object-fit:contain }
html:not(#ap) .site-header .brand{ margin-right:1rem; font-size:1rem }
html:not(#ap) .site-header .mark{ width:26px; height:26px; flex-basis:26px }

html:not(#ap) .header-nav{
  display:flex; align-items:center; gap:.5rem; flex:1; min-width:0;
  margin-left:0;
  font-family:var(--ap-font);
  font-size:.875rem; font-weight:400;
  letter-spacing:-.006em;
  text-transform:none;
  color:var(--ap-text);
}
html:not(#ap) .header-links{ display:flex; align-items:center; justify-content:center; flex:1; gap:.125rem; min-width:0 }
html:not(#ap) .header-links > a,
html:not(#ap) .service-menu summary{
  display:inline-flex; align-items:center; gap:.35rem;
  min-height:44px; padding:0 .55rem;
  border-radius:var(--ap-pill);
  color:var(--ap-text-2);
  opacity:1;
  transition:opacity .2s ease,background-color .2s ease;
}
html:not(#ap) .header-links > a:hover,
html:not(#ap) .service-menu summary:hover,
html:not(#ap) .service-menu[open] summary,
html:not(#ap) .header-links > a[aria-current]{ opacity:1; color:var(--ap-text); background:var(--ap-hair) }
html:not(#ap) .header-links > a:active,
html:not(#ap) .service-menu summary:active{ opacity:.55; transition:none }
html:not(#ap) body .header-nav a.button[href]{ min-height:40px; padding:.55rem 1.125rem; font-size:.8125rem; margin-left:.25rem; white-space:nowrap }
/* Client login stays reachable but quiet; the gold button is for prospects. */
html:not(#ap) .header-login{
  display:inline-flex; align-items:center;
  min-height:44px; padding:0 .55rem;
  border-radius:var(--ap-pill);
  color:var(--ap-text-2); text-decoration:none; white-space:nowrap;
  transition:opacity .2s ease,background-color .2s ease;
}
html:not(#ap) .header-login:hover{ color:var(--ap-text); background:var(--ap-hair) }
html:not(#ap) .header-login:active{ opacity:.55; transition:none }

/* Services menu structure. This used to come only from seo-pages.css, which
   the homepage does not load, so there the panel fell into the header flow. */
html:not(#ap) .service-menu{ position:relative }
html:not(#ap) .service-menu summary{ list-style:none; cursor:pointer; -webkit-user-select:none; user-select:none }
html:not(#ap) .service-menu summary::-webkit-details-marker{ display:none }
html:not(#ap) .service-menu summary::after{
  content:""; display:inline-block; flex:0 0 auto;
  border:solid currentColor;
}
html:not(#ap) .service-menu-panel{
  position:absolute; z-index:130;
  overflow:visible; text-align:left; text-transform:none; letter-spacing:0;
}
/* Invisible bridge over the gap, so moving the mouse from "Services" down
   into the panel never counts as leaving it. */
html:not(#ap) .service-menu-panel::before{ content:""; position:absolute; left:0; right:0; top:-14px; height:14px }
html:not(#ap) .service-menu-panel :is(a span,b,small){ display:block }
html:not(#ap) .service-menu summary::after{
  width:5px; height:5px; border-width:0 1.4px 1.4px 0;
  transform:rotate(45deg) translateY(-2px);
  transition:transform .4s var(--ap-spring);
}
html:not(#ap) .service-menu[open] summary::after{ transform:rotate(225deg) translate(-2px,-1px) }
/* With apple.js the popover closes on a spring while <details> is still
   open, so the chevron and highlight follow intent, not the attribute. */
html:not(#ap) .service-menu summary[aria-expanded="false"]::after{ transform:rotate(45deg) translateY(-2px) }
html:not(#ap) .service-menu[open] summary[aria-expanded="false"]{ background:transparent; color:var(--ap-text-2); opacity:1 }

/* Popover: anchored to its trigger, scales out from it. */
html:not(#ap) .service-menu-panel{
  top:calc(100% + 12px); left:50%;
  width:340px;
  padding:.4rem;
  transform:translateX(-50%);
  transform-origin:50% 0;
  border:0;
  border-radius:var(--ap-r);
  /* Solid, not glass: the panel sits inside the header, which is already a
     blurred material, and a nested backdrop-filter cannot see the page. A
     translucent panel let the hero text show straight through it. */
  background:var(--ap-nav-surface);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  box-shadow:var(--ap-shadow-lg),inset 0 0 0 .5px var(--ap-hair);
}
html:not(#ap) .service-menu-panel a{
  display:block; padding:.75rem .9rem;
  border-radius:var(--ap-r-sm);
  color:var(--ap-text);
}
html:not(#ap) .service-menu-panel a::before{ display:none }
html:not(#ap) .service-menu-panel a:hover{ background:var(--ap-hair) }
html:not(#ap) .service-menu-panel a:active{ background:var(--ap-hair-strong) }
html:not(#ap) .service-menu-panel b{ font-family:var(--ap-font); font-size:.9375rem; font-weight:600; letter-spacing:-.01em; color:var(--ap-text) }
html:not(#ap) .service-menu-panel small{ font-family:var(--ap-font); font-size:.8125rem; color:var(--ap-text-2); margin-top:.1rem }
/* The two options, what both include, then the comparison */
html:not(#ap) .service-menu-panel a.service-menu-compare{
  margin-top:.35rem; padding-block:.8rem;
  border-top:1px solid var(--ap-hair); border-radius:0 0 var(--ap-r-sm) var(--ap-r-sm);
}
html:not(#ap) .service-menu-panel a.service-menu-compare b{ font-size:.875rem; color:var(--ap-gold-ink) }

/* Service pages: which option this page is, and the way to the other one */
html:not(#ap) .hero .plan-fit{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem .6rem;
  max-width:42rem; margin:1.75rem auto 0;
  font-family:var(--ap-font); font-size:.875rem; color:var(--ap-text-2);
}
html:not(#ap) .plan-fit-k{ font-weight:500 }
html:not(#ap) .plan-fit-chip{
  display:inline-flex; align-items:center; gap:.4rem; padding:.35rem .8rem;
  border-radius:999px; background:var(--ap-gold-tint); color:var(--ap-text); font-weight:500;
}
html:not(#ap) .plan-fit-chip svg{ flex:none; width:14px; height:14px; color:var(--ap-gold-ink) }
html:not(#ap) .hero .plan-fit a{ color:var(--ap-gold-ink); font-weight:500 }
html:not(#ap) .hero .plan-fit a:hover{ text-decoration:underline }

/* Theme toggle injected by site.js */
html:not(#ap) .pi-theme-toggle{
  width:36px; height:36px; flex:0 0 36px; padding:8px;
  border:0; border-radius:50%;
  background:transparent; color:var(--ap-text);
  opacity:.82;
  transition:opacity .2s ease,background-color .2s ease,transform .32s var(--ap-spring);
}
html:not(#ap) .pi-theme-toggle:hover{ opacity:1; background:var(--ap-hair); border:0 }
html:not(#ap) .pi-theme-toggle:active{ transform:scale(.88); transition:transform .1s ease-out }
html:not(#ap) .pi-theme-toggle svg{ width:19px; height:19px }

/* Menu button + sheet (injected by apple.js, mobile only) */
html:not(#ap) .ap-menu-btn{ display:none }
html:not(#ap) .ap-sheet,html:not(#ap) .ap-scrim{ display:none }
@media (max-width:1024px){
  html:not(#ap){ scroll-padding-top:96px }
  html:not(#ap) .site-header{ top:10px; width:calc(100% - 20px); max-width:540px; margin-block:10px }
  html:not(#ap) .site-header .header-inner{ height:58px; padding-inline:14px; gap:.25rem }
  html:not(#ap) .site-header .brand{ margin-right:auto; font-size:1rem; gap:.4rem }
  html:not(#ap) .site-header .mark{ width:26px; height:26px; flex-basis:26px }
  html:not(#ap) :is(.header-links,.header-login){ display:none }
  html:not(#ap) .header-nav{ flex:0 0 auto; gap:.25rem; margin-left:auto }
  html:not(#ap) body .header-nav a.button[href]{ min-height:40px; padding:.55rem 1rem; font-size:.8125rem; margin-left:0 }
  html:not(#ap) .ap-menu-btn{
    display:inline-grid; place-items:center;
    width:40px; height:40px; flex:0 0 40px; margin-right:0;
    border:0; border-radius:50%; background:transparent; color:var(--ap-text);
    cursor:pointer;
  }
  html:not(#ap) .ap-menu-btn:active{ background:var(--ap-hair) }
  html:not(#ap) .ap-menu-btn i{
    position:absolute; width:17px; height:1.5px; border-radius:2px; background:currentColor;
    transition:transform .45s var(--ap-spring);
  }
  html:not(#ap) .ap-menu-btn{ position:relative }
  html:not(#ap) .ap-menu-btn i:first-child{ transform:translateY(-3.5px) }
  html:not(#ap) .ap-menu-btn i:last-child{ transform:translateY(3.5px) }
  html:not(#ap) .ap-menu-btn[aria-expanded="true"] i:first-child{ transform:rotate(45deg) }
  html:not(#ap) .ap-menu-btn[aria-expanded="true"] i:last-child{ transform:rotate(-45deg) }

  html:not(#ap) .ap-scrim{
    display:block; position:fixed; inset:0; z-index:110;
    background:var(--ap-scrim);
    opacity:0; pointer-events:none;
  }
  html:not(#ap) .ap-sheet{
    display:block; position:fixed; z-index:115;
    left:10px; right:10px; top:10px;
    max-width:540px; margin-inline:auto;
    padding:74px 24px 1.25rem;
    max-height:calc(100dvh - 20px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--ap-nav-surface);
    border:1px solid var(--ap-hair);
    border-radius:32px;
    box-shadow:var(--ap-shadow-lg);
    transform:translateY(-105%);
    visibility:hidden;
    touch-action:pan-y;
    will-change:transform;
  }
  html:not(#ap) .ap-sheet.is-live{ visibility:visible }
  html:not(#ap) .ap-sheet nav{ display:grid }
  html:not(#ap) .ap-sheet h2{
    margin:.9rem 0 .25rem; padding:0 .25rem;
    font-family:var(--ap-font); font-size:.75rem; font-weight:500;
    letter-spacing:0; color:var(--ap-text-3);
  }
  html:not(#ap) .ap-sheet h2:first-child{ margin-top:0 }
  html:not(#ap) .ap-sheet nav a:not(.button){
    display:flex; align-items:center; min-height:46px; padding:0 .25rem;
    font-family:var(--ap-font-display);
    font-size:1.5rem; font-weight:600; letter-spacing:-.022em;
    color:var(--ap-text);
    border-radius:var(--ap-r-xs);
  }
  html:not(#ap) .ap-sheet nav a:not(.button):active{ opacity:.5 }
  html:not(#ap) .ap-sheet nav a.ap-sheet-sm{ font-size:1.0625rem; font-weight:500; min-height:40px; letter-spacing:-.011em }
  html:not(#ap) body .ap-sheet a.button[href]{ width:100%; min-height:48px; margin-top:1rem }
  html:not(#ap) .ap-sheet-grip{
    display:block; width:36px; height:5px; margin:1rem auto 0;
    border-radius:3px; background:var(--ap-hair-strong); touch-action:none;
  }
  /* Theme switch inside the sheet. Only shown on the narrowest phones, where
     the header toggle is moved out of the bar so the row fits (see below). */
  html:not(#ap) .ap-sheet-theme{
    display:none; align-items:center; justify-content:space-between; gap:1rem;
    width:100%; min-height:44px; margin-top:.75rem; padding:0 .25rem;
    border:0; border-top:1px solid var(--ap-hair); background:transparent;
    font:500 1.0625rem/1.2 var(--ap-font); letter-spacing:-.011em; color:var(--ap-text);
    cursor:pointer;
  }
  html:not(#ap) .ap-sheet-theme svg{ width:20px; height:20px }
  html:not(#ap) .site-header{ z-index:120 }
  /* Never stack two light materials: while the sheet is open the bar goes
     clear and the sheet's own material sits behind the header row. */
  html.ap-menu-open:not(#ap) .site-header{
    background:transparent; border-color:transparent; box-shadow:none;
  }
}

/* ============================================================
   SUB-PAGE LAYOUT (seo-pages.css components)
   ============================================================ */
html:not(#ap) .container{ max-width:var(--ap-maxw); padding-inline:var(--ap-gutter) }

html:not(#ap) main > section{ border:0 }
html:not(#ap) body:not(.ap-home) main > section:nth-of-type(even):not(.hero){ background:var(--ap-bg-alt) }
html:not(#ap) body:not(.ap-home) main > section:nth-of-type(even) :is(.card,.faq details,.shift-cell,.rail-block,.post,.aside:not(.split > .aside)){ background:var(--ap-tile-on-alt) }

html:not(#ap) .hero{
  padding:clamp(3.5rem,9vw,7rem) 0 clamp(3rem,7vw,5.5rem);
  border:0;
  text-align:center;
  background:var(--ap-bg);
}
html:not(#ap) .hero :is(h1,.lede,.crumbs,.eyebrow,.hero-actions,.post-meta,.proof-strip-source,.image-disclaimer){ margin-inline:auto }
html:not(#ap) .hero h1{ max-width:18ch; margin-bottom:1.25rem }
html:not(#ap) .hero .lede{
  max-width:42rem;
  font-size:clamp(1.1875rem,2.2vw,1.5rem);
  line-height:1.38; letter-spacing:-.016em;
  color:var(--ap-text-2);
  margin-bottom:2rem;
}
html:not(#ap) .hero-actions{ justify-content:center; gap:.75rem 1.25rem; align-items:center }
html:not(#ap) .crumbs{
  justify-content:center;
  font-family:var(--ap-font); font-size:.8125rem; letter-spacing:-.006em; text-transform:none;
  color:var(--ap-text-3); margin-bottom:1.5rem;
}
html:not(#ap) .crumbs a{ color:var(--ap-text-2) }
html:not(#ap) .crumbs a:hover{ color:var(--ap-gold-ink) }
html:not(#ap) .eyebrow{
  justify-content:center;
  font-family:var(--ap-font); font-size:1.0625rem; font-weight:600;
  letter-spacing:-.011em; text-transform:none;
  color:var(--ap-gold-ink); margin-bottom:.75rem;
}
html:not(#ap) .eyebrow::before{ display:none }
html:not(#ap) .post-meta{ display:flex; justify-content:center; gap:.5rem; font-size:.875rem; color:var(--ap-text-3) }

html:not(#ap) .proof-strip{
  margin:3rem auto 0; max-width:52rem;
  grid-template-columns:repeat(3,1fr);
  border:0; border-radius:0; background:none; box-shadow:none; overflow:visible;
}
html:not(#ap) .proof-item{ padding:.25rem 1rem; border:0; border-left:1px solid var(--ap-hair); text-align:center }
html:not(#ap) .proof-item:first-child{ border-left:0 }
html:not(#ap) .proof-item b{
  font-family:var(--ap-font-display); font-size:clamp(1.75rem,3.6vw,2.5rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.1; color:var(--ap-text);
  font-variant-numeric:tabular-nums;
}
html:not(#ap) .proof-item span{ display:block; margin-top:.3rem; font-size:.875rem; line-height:1.35; color:var(--ap-text-2) }
html:not(#ap) .proof-strip-source{ max-width:40rem; margin-top:1.25rem; font-family:var(--ap-font); font-size:.75rem; letter-spacing:0; line-height:1.5; color:var(--ap-text-3) }
html:not(#ap) .proof-strip-source a{ color:var(--ap-gold-ink); border:0; font-weight:500 }
html:not(#ap) .proof-strip-source a:hover{ text-decoration:underline }

html:not(#ap) .editorial-visual{
  margin-top:clamp(2.5rem,6vw,4.5rem);
  border:0; border-radius:var(--ap-r-lg);
  background:var(--ap-tile);
  box-shadow:var(--ap-shadow-lg);
}
html:not(#ap) .editorial-visual::before{ background:linear-gradient(0deg,rgba(0,0,0,.55),transparent 28%); box-shadow:none }
html:not(#ap) .editorial-visual img{ filter:none; transition:transform 1.2s var(--ap-spring-slow) }
html:not(#ap) .editorial-visual:hover img{ transform:scale(1.012); filter:none }
/* Captions sit on their own dark pill so they stay legible over any image:
   over the light dashboard the bare gradient left white text at 3.01:1. */
html:not(#ap) .visual-caption{
  font-family:var(--ap-font); font-size:.75rem; letter-spacing:0; text-transform:none;
  left:1rem; right:auto; bottom:1rem; max-width:calc(100% - 2rem);
  padding:.4rem .8rem; border-radius:var(--ap-pill);
  background:rgba(0,0,0,.62); color:#FFFFFF;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
@media (prefers-reduced-transparency:reduce){ html:not(#ap) .visual-caption{ background:rgba(0,0,0,.85) } }
html:not(#ap) .visual-caption::before{ background:var(--ap-gold) }
html:not(#ap) .image-disclaimer{ max-width:40rem; font-family:var(--ap-font); font-size:.75rem; letter-spacing:0; color:var(--ap-text-3) }
html:not(#ap) .image-disclaimer::before{ color:var(--ap-text-2) }

html:not(#ap) .section{ padding:var(--ap-sec) 0; border:0 }
html:not(#ap) .section-head{ max-width:44rem; margin:0 auto clamp(2.25rem,5vw,3.5rem); text-align:center }
html:not(#ap) .section-head > p{ font-size:1.1875rem; line-height:1.42; letter-spacing:-.016em; margin-inline:auto }
html:not(#ap) .section-head h2{ margin-bottom:.75rem }

html:not(#ap) .grid{ gap:1.25rem }
html:not(#ap) .card{
  padding:2rem 1.75rem 2.1rem;
  border:0; border-radius:var(--ap-r-lg);
  background:var(--ap-tile);
  box-shadow:none;
  transition:transform .6s var(--ap-spring),box-shadow .6s var(--ap-spring);
}
html:not(#ap) .card::before{ display:none }
html:not(#ap) .card:hover{ transform:scale(1.012); border:0; box-shadow:var(--ap-shadow-sm) }
html:not(#ap) .card h3{ margin-bottom:.5rem }
html:not(#ap) .card p{ font-size:1rem; line-height:1.47 }
html:not(#ap) .card .label{
  font-family:var(--ap-font); font-size:.875rem; font-weight:600;
  letter-spacing:-.006em; text-transform:none; color:var(--ap-gold-ink);
  margin-bottom:.6rem;
}

/* Editorial split: image tile beside long-form prose */
html:not(#ap) .split{ column-gap:clamp(2rem,5vw,4.5rem) }
html:not(#ap) .split::before{
  border:0 !important; border-radius:var(--ap-r-lg);
  background-color:var(--ap-tile);
  box-shadow:none; top:88px;
  transition:transform .8s var(--ap-spring-slow);
}
html:not(#ap) .split:hover::before{ transform:none; box-shadow:none }
/* The panel images are all 1672x941. Matching the frame to them removes the
   grey letterbox bands that a 1.45:1 frame left above and below. */
html:not(#ap) .split::before{ aspect-ratio:1672/941 }
/* Service pages: the image panel is sticky, and a sticky grid item may travel
   the whole grid, so it slid over the full-width related-links row while
   scrolling. Two columns up, that row lives under the prose in the text
   column instead, where the image can never reach it. */
@media (min-width:781px){
  html:not(#ap):has(link[rel="canonical"][href^="https://www.podrelay.io/podcast-"]) .split > .aside,
  html:not(#ap) .service-editorial .split > .aside{ grid-column:2; grid-row:2 }
}
html:not(#ap) .prose h2{ font-size:clamp(1.6rem,3vw,2.25rem); line-height:1.12; letter-spacing:-.024em; margin-top:3rem }
html:not(#ap) .prose h2::before{ display:none }
html:not(#ap) .split .prose h2{ font-size:clamp(1.6rem,3vw,2.25rem); padding-top:0 }
html:not(#ap) .prose h2:first-child{ margin-top:0 }
html:not(#ap) .prose h3{ font-size:1.25rem; letter-spacing:-.016em; margin:2rem 0 .5rem }
html:not(#ap) :is(.prose p,.prose li,.split .prose p,.split .prose li){ font-size:1.0625rem; line-height:1.6; letter-spacing:-.011em; color:var(--ap-text-2) }
html:not(#ap) .prose li::before{ top:.68em; width:5px; height:5px; background:var(--ap-text-3) }
/* Links inside running text are underlined. Gold ink and body grey are almost
   the same lightness (1.03:1), so color alone cannot mark a link (WCAG 1.4.1).
   Navigation, buttons and standalone links stay clean. */
html:not(#ap) main :is(p,.prose li,.faq li) > a:not([class]),
html:not(#ap) .prose p > a:not(.button):not(.text-link),
html:not(#ap) .text-link{
  color:var(--ap-gold-ink);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:.2em; text-decoration-color:currentColor;
}
html:not(#ap) main :is(p,.prose li,.faq li) > a:not([class]):hover,
html:not(#ap) .prose p > a:not(.button):not(.text-link):hover,
html:not(#ap) .text-link:hover{ text-decoration-thickness:2px }

html:not(#ap) .split .aside{ border-top:1px solid var(--ap-hair) }
html:not(#ap) :is(.split .aside h2,.rail .aside h2,.aside h2,.rail-label){
  font-family:var(--ap-font); font-size:.75rem; font-weight:600;
  letter-spacing:0; text-transform:none; color:var(--ap-text-3);
}
html:not(#ap) .rail-label::before{ display:none }
html:not(#ap) .split .aside a,html:not(#ap) .aside a{ font-family:var(--ap-font); font-size:.9375rem; color:var(--ap-gold-ink); border:0 }
html:not(#ap) .split .aside a::before{ display:none }
html:not(#ap) .split .aside a:hover{ color:var(--ap-gold-ink); text-decoration:underline; text-underline-offset:.18em }

html:not(#ap) .rail-block{ border:0; border-radius:var(--ap-r); background:var(--ap-tile); padding:1.25rem }
html:not(#ap) .toc a{ font-size:.875rem; color:var(--ap-text-2); border-radius:var(--ap-r-xs) }
html:not(#ap) .toc a::before{ font-family:var(--ap-font); color:var(--ap-text-3); font-variant-numeric:tabular-nums }
html:not(#ap) .toc a:hover{ background:var(--ap-hair); color:var(--ap-text) }
html:not(#ap) .toc a.is-active{ color:var(--ap-text); font-weight:600 }
html:not(#ap) .toc a.is-active::after{ background:var(--ap-gold) }
html:not(#ap) .readbar{ height:2px; background:var(--ap-gold) }

html:not(#ap) .prose--indexed h2{ font-size:clamp(1.6rem,3vw,2.1rem); padding-top:0; letter-spacing:-.024em }
html:not(#ap) .prose--indexed h2::before{ display:none }
html:not(#ap) .prose--indexed h2::after{ position:static; display:block; order:-1; margin-bottom:.4rem; font-family:var(--ap-font); font-size:.875rem; font-weight:600; letter-spacing:0; color:var(--ap-gold-ink) }
html:not(#ap) .prose--indexed h2{ display:flex; flex-direction:column }

html:not(#ap) .pull{ border-left:3px solid var(--ap-gold); padding-left:1.5rem }
html:not(#ap) .pull p{ font-family:var(--ap-font-display); font-weight:600; font-size:clamp(1.4rem,2.6vw,1.85rem); line-height:1.25; letter-spacing:-.022em; color:var(--ap-text) }
html:not(#ap) .pull cite{ font-family:var(--ap-font); font-size:.8125rem; letter-spacing:0; text-transform:none; color:var(--ap-text-3) }
html:not(#ap) .callout{ border:0; border-radius:var(--ap-r); background:var(--ap-gold-tint); padding:1.35rem 1.5rem }
html:not(#ap) .callout::before{ display:none }
html:not(#ap) .callout b{ font-family:var(--ap-font); font-size:.875rem; letter-spacing:0; text-transform:none; color:var(--ap-gold-ink-strong) }
html:not(#ap) .callout p{ color:var(--ap-text) }

html:not(#ap) .shift-cell{ border:0; border-radius:var(--ap-r-lg); background:var(--ap-tile); padding:1.75rem; transition:transform .6s var(--ap-spring) }
html:not(#ap) .shift-cell::before{ display:none }
html:not(#ap) .shift-cell:hover{ transform:scale(1.012); border:0; box-shadow:none }
html:not(#ap) .shift-k{ font-family:var(--ap-font); font-size:.875rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--ap-text-2) }
html:not(#ap) :is(.shift-from,.shift-to){ font-family:var(--ap-font-display) }
html:not(#ap) .shift-to{ color:var(--ap-text); font-weight:700; letter-spacing:-.03em }
html:not(#ap) .shift-note{ border-top-color:var(--ap-hair); font-size:.875rem; color:var(--ap-text-2) }
html:not(#ap) .shift-badge{ border:0; border-radius:var(--ap-pill); padding:.25rem .65rem; font-family:var(--ap-font); font-size:.75rem; letter-spacing:0; background:var(--ap-gold-tint); color:var(--ap-gold-ink-strong) }

html:not(#ap) .phases{ border:0; border-radius:var(--ap-r); background:var(--ap-tile); gap:0 }
html:not(#ap) .phase{ border-color:var(--ap-hair) }
html:not(#ap) .phase:hover{ background:var(--ap-hair) }
html:not(#ap) .phase-n{ font-family:var(--ap-font); font-size:.75rem; letter-spacing:0; color:var(--ap-gold-ink); font-weight:600 }
html:not(#ap) .phase-t{ font-size:1rem; letter-spacing:-.012em }

html:not(#ap) .founder-intro{ border:0; border-radius:var(--ap-r); background:var(--ap-tile); margin:0 auto 2rem; text-align:left }
html:not(#ap) .founder-monogram{ border:0; border-radius:50%; background:var(--ap-gold-grad); color:var(--ap-on-gold); font-family:var(--ap-font) }
html:not(#ap) .founder-identity small{ font-family:var(--ap-font); letter-spacing:0; text-transform:none; font-size:.8125rem }
html:not(#ap) .founder-intro p{ border-left-color:var(--ap-hair) }

html:not(#ap) .proof-showcase{ background:var(--ap-bg-alt) }
html:not(#ap) .proof-showcase .section-head p{ border-left:0; padding-left:0 }
html:not(#ap) .proof-visual{ border:0; border-radius:var(--ap-r-lg); background:var(--ap-tile-on-alt); box-shadow:none; padding:.75rem; transition:transform .6s var(--ap-spring) }
html:not(#ap) .proof-visual::before{ display:none }
html:not(#ap) .proof-visual:hover{ transform:scale(1.01); box-shadow:var(--ap-shadow-sm) }
html:not(#ap) .proof-visual img{ border:0; border-radius:var(--ap-r) }

/* FAQ: hairline list; the panel height is a native, interruptible transition */
html:not(#ap) .faq{ gap:0; max-width:52rem; margin-inline:auto; border-top:1px solid var(--ap-hair) }
html:not(#ap) .faq details{
  padding:0; border:0; border-bottom:1px solid var(--ap-hair);
  border-radius:0; background:transparent !important; box-shadow:none;
}
html:not(#ap) .faq details[open]{ border-color:var(--ap-hair); background:transparent }
html:not(#ap) .faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.35rem 0; font-family:var(--ap-font-display);
  font-size:1.1875rem; font-weight:600; letter-spacing:-.018em; line-height:1.3;
  color:var(--ap-text);
}
html:not(#ap) .faq summary::before{ display:none }
html:not(#ap) .faq summary::after{
  content:""; flex:0 0 12px; width:12px; height:12px;
  background:
    linear-gradient(currentColor,currentColor) center/12px 1.6px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.6px 12px no-repeat;
  color:var(--ap-text-2);
  transition:transform .5s var(--ap-spring);
}
html:not(#ap) .faq details[open] summary::after{ transform:rotate(135deg) }
html:not(#ap) .faq summary:active{ opacity:.6 }
html:not(#ap) .faq p{ padding:0 2.5rem 1.5rem 0; margin:0; font-size:1.0625rem; line-height:1.55; animation:none }
@supports selector(::details-content){
  html:not(#ap){ interpolate-size:allow-keywords }
  html:not(#ap) .faq details::details-content{
    block-size:0; overflow:clip; opacity:0;
    transition:block-size var(--ap-spring-dur) var(--ap-spring),opacity .3s ease,content-visibility var(--ap-spring-dur) allow-discrete;
  }
  html:not(#ap) .faq details[open]::details-content{ block-size:auto; opacity:1 }
}

html:not(#ap) .cta{
  padding:var(--ap-sec) 0;
  text-align:center;
  background:var(--ap-bg) !important;
}
html:not(#ap) .cta h2{ max-width:18ch; margin-inline:auto }
html:not(#ap) .cta p{ font-size:1.1875rem; letter-spacing:-.016em; max-width:36rem; margin-bottom:2rem }
html:not(#ap) .cta-response,html:not(#ap) .pi-sticky-note{
  font-family:var(--ap-font); font-size:.8125rem; letter-spacing:-.006em; text-transform:none; color:var(--ap-text-3);
}

/* Blog index */
html:not(#ap) .post-list{ gap:1.25rem }
html:not(#ap) .post{
  overflow:hidden; border:0; border-radius:var(--ap-r-lg);
  background:var(--ap-tile); box-shadow:none;
  transition:transform .6s var(--ap-spring),box-shadow .6s var(--ap-spring);
}
html:not(#ap) .post:hover{ transform:scale(1.012); border:0; box-shadow:var(--ap-shadow-lg) }
html:not(#ap) .post:active{ transform:scale(.99); transition:transform .12s ease-out }
html:not(#ap) .post-figure{ margin-bottom:1.25rem }
html:not(#ap) .post-tag{
  top:.9rem; left:.9rem; border:0; border-radius:var(--ap-pill);
  padding:.3rem .7rem; font-family:var(--ap-font); font-size:.75rem; font-weight:600;
  letter-spacing:0; text-transform:none;
  background:var(--ap-material); -webkit-backdrop-filter:var(--ap-blur); backdrop-filter:var(--ap-blur);
  color:var(--ap-text);
}
html:not(#ap) .post-body{ padding:0 1.5rem 1.5rem }
html:not(#ap) .post h3{ font-size:1.3125rem; letter-spacing:-.02em }
html:not(#ap) .post p{ font-size:1rem }
html:not(#ap) .post-more{ font-family:var(--ap-font); font-size:.9375rem; font-weight:500; letter-spacing:-.006em; text-transform:none; color:var(--ap-gold-ink) }
html:not(#ap) .post-arrow{ display:none }
html:not(#ap) .post-more::after{ content:""; width:.38em; height:.38em; margin-left:.35em; border-right:1.6px solid currentColor; border-top:1.6px solid currentColor; transform:rotate(45deg) }
html:not(#ap) .post-date{ font-family:var(--ap-font); font-size:.8125rem; letter-spacing:0; color:var(--ap-text-3) }
html:not(#ap) .post-date i{ display:none }

/* ============================================================
   FOOTER · Apple-style quiet, small and dense
   ============================================================ */
html:not(#ap) .site-footer{
  --foreground:var(--ap-text); --muted-foreground:var(--ap-text-2); --text:var(--ap-text); --faint:var(--ap-text-3);
  --soft:var(--ap-hair); --line:var(--ap-hair); --card:var(--ap-bg-alt); --link:var(--ap-gold-ink);
  max-width:none; width:100%;
  margin:0; padding:2.5rem 0 2rem;
  border:0; border-radius:0;
  background:var(--ap-bg-alt);
  color:var(--ap-text-2);
  font-size:.75rem; line-height:1.4;
}
html:not(#ap) .footer-seam{ display:none }
html:not(#ap) .site-footer .container{ width:100%; max-width:var(--ap-maxw); margin-inline:auto; padding-inline:var(--ap-gutter) }
html:not(#ap) .site-footer ul{ margin:0; padding:0; list-style:none }
html:not(#ap) .site-footer li{ display:block }
html:not(#ap) .footer-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2rem 1.5rem;
}
html:not(#ap) .footer-brand{ grid-column:1/-1 }
@media (min-width:768px){ html:not(#ap) .footer-grid{ grid-template-columns:repeat(4,minmax(0,1fr)) } }
@media (min-width:1100px){ html:not(#ap) .footer-grid{ grid-template-columns:1.5fr repeat(4,minmax(0,1fr)) } html:not(#ap) .footer-brand{ grid-column:auto } }
html:not(#ap) .footer-col a{ display:inline-flex; align-items:center }
html:not(#ap) .site-footer :is(.brand,.wordmark){ font-size:.9375rem; color:var(--ap-text) }
html:not(#ap) .site-footer :is(.brand,.wordmark) strong{ color:var(--ap-text) }
html:not(#ap) .footer-copy{ margin-top:.75rem; max-width:32ch; font-size:.75rem; line-height:1.45; color:var(--ap-text-2) }
html:not(#ap) .footer-legal{ margin-top:1rem; font-family:var(--ap-font); font-size:.75rem; letter-spacing:0; color:var(--ap-text-3) }
html:not(#ap) .footer-col h3{
  margin:0 0 .65rem; font-family:var(--ap-font); font-size:.75rem; font-weight:600;
  letter-spacing:-.003em; text-transform:none; color:var(--ap-text);
}
html:not(#ap) .footer-col a{
  padding-block:.28rem; gap:.4rem;
  font-family:var(--ap-font); font-size:.75rem; letter-spacing:-.003em;
  color:var(--ap-text-2);
}
html:not(#ap) .footer-col a:hover{ color:var(--ap-text); text-decoration:underline; text-underline-offset:.18em }
html:not(#ap) .footer-col a svg{ width:13px; height:13px; flex-basis:13px }
html:not(#ap) .footer-note{ display:block; margin-top:0; font-family:var(--ap-font); font-size:.6875rem; letter-spacing:0; color:var(--ap-text-3) }
/* Footer columns arrive with a plain fade, not a blurred fall. */
html:not(#ap) .footer-grid > .motion-item{ transform:none; filter:none; transition:opacity .6s ease; transition-delay:calc(var(--motion-i,0) * 60ms) }

/* ============================================================
   STICKY MOBILE CTA · floating translucent bar
   ============================================================ */
html:not(#ap) .pi-sticky-cta{
  left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px));
  padding:.55rem .55rem .55rem 1.1rem;
  border:0; border-radius:var(--ap-pill);
  background:var(--ap-material-thick);
  -webkit-backdrop-filter:var(--ap-blur-thick); backdrop-filter:var(--ap-blur-thick);
  box-shadow:var(--ap-shadow-lg),inset 0 0 0 .5px var(--ap-hair);
  transform:translateY(calc(100% + 24px));
  transition:transform var(--ap-spring-dur) var(--ap-spring);
}
html:not(#ap) .pi-sticky-cta.in{ transform:none }
html:not(#ap) body .pi-sticky-cta a.pi-btn[href]{ min-height:40px; padding:.5rem 1.1rem; font-size:.9375rem }

/* Contact dialog: a sheet that materializes from slightly smaller */
html:not(#ap) .pi-contact-dialog{
  border:0; border-radius:var(--ap-r-lg);
  background:var(--ap-material-thick);
  -webkit-backdrop-filter:var(--ap-blur-thick); backdrop-filter:var(--ap-blur-thick);
  box-shadow:var(--ap-shadow-lg),inset 0 0 0 .5px var(--ap-hair);
  font-family:var(--ap-font); color:var(--ap-text);
}
html:not(#ap) .pi-contact-dialog[open]{ animation:apMaterialize var(--ap-spring-dur) var(--ap-spring) both }
html:not(#ap) .pi-contact-dialog::backdrop{ background:var(--ap-scrim); -webkit-backdrop-filter:none; backdrop-filter:none }
@keyframes apMaterialize{ from{ opacity:0; transform:scale(.96) } to{ opacity:1; transform:none } }
html:not(#ap) .pi-contact-heading h2{ font-family:var(--ap-font-display); font-size:1.75rem; letter-spacing:-.025em }
html:not(#ap) .pi-contact-close{ border:0; background:var(--ap-hair); width:32px; height:32px; flex-basis:32px; padding:7px }
/* Field outlines must be findable: 3.26:1 instead of 1.45:1 (WCAG 1.4.11). */
html:not(#ap) .pi-contact-form :is(input,textarea){ border:0; border-radius:var(--ap-r-sm); background:var(--ap-bg); box-shadow:inset 0 0 0 1px var(--ap-control-stroke) }
html:not(#ap) .pi-contact-recipient strong{ color:var(--ap-gold-ink) }
html:not(#ap) .hero .lede em{ color:var(--ap-gold-ink) }
html:not(#ap) .pi-contact-form :is(input,textarea):focus{ outline:0; box-shadow:inset 0 0 0 2px var(--ap-gold-ink) }
html:not(#ap) :is(.pi-contact-primary,.pi-contact-copy){ border:0; border-radius:var(--ap-pill); min-height:44px }
html:not(#ap) .pi-contact-copy{ background:var(--ap-hair) }
html:not(#ap) :is(.pi-contact-primary,.pi-contact-copy):active{ transform:scale(.97) }

/* ============================================================
   REVEAL · only hidden once apple.js has proved it can un-hide
   ============================================================ */
html.ap-js:not(#ap) .ap-reveal{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .7s ease,transform var(--ap-spring-slow-dur) var(--ap-spring-slow);
  transition-delay:var(--ap-d,0s);
}
html.ap-js:not(#ap) .ap-reveal.is-in{ opacity:1; transform:none }

/* Visually hidden, still read by screen readers. */
.ap-sr{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}

/* Small inline links (footnotes, sources): pad the hit area to 24px tall
   without moving the text (WCAG 2.5.8). */
html:not(#ap) main :is(.ap-footnote,.proof-strip-source,.image-disclaimer) a{ padding-block:4px }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Keep the compact capsule readable on phones; the theme control remains
   available in the menu sheet when it no longer fits in the header. */
@media (max-width:440px){
  html:not(#ap) .site-header .pi-theme-toggle{ display:none }
  html:not(#ap) .ap-sheet-theme{ display:flex }
}
@media (max-width:379px){
  :root{ --ap-gutter:max(16px,env(safe-area-inset-left)) }
  html:not(#ap) .site-header .header-inner{ padding-inline:10px }
  html:not(#ap) body .header-nav a.button[href]{ padding:.4rem .8rem }
}
@media (max-width:780px){
  html:not(#ap) .proof-strip{ grid-template-columns:1fr; gap:1.25rem }
  html:not(#ap) .proof-item{ border-left:0 }
  html:not(#ap) .grid{ grid-template-columns:1fr }
  html:not(#ap) .faq p{ padding-right:0 }
  html:not(#ap) .split::before{ position:relative; top:auto }
}

/* ============================================================
   ACCESSIBILITY SIGNALS
   Reduced motion keeps feedback, swaps movement for cross-fades.
   ============================================================ */
/* ============================================================
   CONSISTENCY PASS (12 Oct 2026)
   ============================================================ */

/* Text pages (About, legal, 404): one centered reading column. The two-track
   grid kept an empty 238px rail on the right once the related links moved
   under the prose, so the copy hugged the left edge of the page. */
html:not(#ap):not(:has(link[rel="canonical"][href^="https://www.podrelay.io/podcast-"])) body:not(.ap-home) .split{
  grid-template-columns:minmax(0,46rem); justify-content:center;
}
html:not(#ap):not(:has(link[rel="canonical"][href^="https://www.podrelay.io/podcast-"])) body:not(.ap-home) .split > .prose{ max-width:none }

/* Section heads read the same everywhere: centered title, centered line under it */
html:not(#ap) .proof-showcase .section-head{ display:block; max-width:44rem; margin-inline:auto; text-align:center }
html:not(#ap) .proof-showcase .section-head h2{ max-width:none; margin:0 0 .75rem }
html:not(#ap) .proof-showcase .section-head p{ margin-inline:auto }

/* Proof strips made of words, not numbers: a step down so a short phrase
   stays on one line instead of breaking mid-word */
html:not(#ap) .proof-strip--words .proof-item b{ font-size:clamp(1.25rem,2.1vw,1.5rem); letter-spacing:-.02em; text-wrap:balance }

/* Two white sections in a row read as a hole. Halve the seam where the FAQ
   runs into the closing call to action. */
html:not(#ap) .ap-home #faq{ padding-bottom:calc(var(--ap-sec) * .5) }
html:not(#ap) .ap-home #faq + #contact{ padding-top:calc(var(--ap-sec) * .5) }
html:not(#ap) body:not(.ap-home) main > section:nth-of-type(odd):not(.hero) + section.cta{ padding-top:0 }

/* Cards whose title is a link: the whole card is the target */
html:not(#ap) .card:has(> h3 > a.text-link){ position:relative }
html:not(#ap) .card > h3 > a.text-link::after{ content:""; position:absolute; inset:0; border-radius:inherit }
html:not(#ap) .card:has(> h3 > a.text-link):active{ transform:scale(.99); transition:transform .12s ease-out }

/* Touch: standalone links get a 44px-tall hit area without moving anything */
@media (pointer:coarse){
  html:not(#ap) :is(.ap-link,.plan-fit a,.sample-download,.scenario-next a,.brand){ padding-block:.65rem; margin-block:-.65rem }
}

@media (prefers-reduced-motion:reduce){
  html:not(#ap) *,html:not(#ap) *::before,html:not(#ap) *::after{ scroll-behavior:auto !important }
  html.ap-js:not(#ap) .ap-reveal{ transform:none; transition:opacity .3s ease }
  html:not(#ap) :is(.card,.post,.shift-cell,.proof-visual):hover{ transform:none }
  html:not(#ap) .editorial-visual:hover img{ transform:none }
  html:not(#ap) .pi-sticky-cta{ transition:opacity .2s ease }
  html:not(#ap) .pi-contact-dialog[open]{ animation:apFade .2s ease both }
  @keyframes apFade{ from{ opacity:0 } to{ opacity:1 } }
}
@media (prefers-reduced-transparency:reduce){
  :root{ --ap-material:var(--ap-bg); --ap-material-thick:var(--ap-bg); --ap-blur:none; --ap-blur-thick:none }
}
@media (prefers-contrast:more){
  :root{ --ap-text-2:#3A3A3C; --ap-text-3:#4A4A4E; --ap-hair:rgba(0,0,0,.4); --ap-material:var(--ap-bg); --ap-material-thick:var(--ap-bg); --ap-blur:none; --ap-blur-thick:none }
  :root[data-theme="dark"]{ --ap-text-2:#D1D1D6; --ap-text-3:#C7C7CC; --ap-hair:rgba(255,255,255,.45) }
  html:not(#ap) :is(.card,.post,.shift-cell,.rail-block,.callout,.service-menu-panel,.ap-sheet){ box-shadow:inset 0 0 0 1px var(--ap-hair) }
}