/* ==========================================================================
   PRODUCT PAGE HERO — stacked. Shared across all /products/* pages.
   ========================================================================== */
.ph-hero{position:relative;overflow:hidden;background:var(--color-bg);padding:4rem 0 0;color:var(--color-ink);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
.ph-hero *,.ph-hero *::before,.ph-hero *::after{box-sizing:border-box;margin:0;padding:0;}
.ph-hero a{color:var(--color-accent);text-decoration:none;}
.ph-hero a:hover{color:var(--color-ink);}
.ph-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(214,206,194,.95) 1px,transparent 1px) 0 0/1.375rem 1.375rem;
  -webkit-mask-image:linear-gradient(180deg,#000 0,transparent 62%);mask-image:linear-gradient(180deg,#000 0,transparent 62%);
}
.ph-copy,.ph-media{position:relative;z-index:1;}
.ph-copy{position:relative;max-width:74.5rem;margin:0 auto;padding:0 1.5rem;display:grid;gap:1.25rem;justify-items:center;text-align:center;}
.ph-hero.is-left .ph-copy{justify-items:start;text-align:left;}
.ph-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--color-accent);}
.ph-eyebrow::before{content:"";width:.4375rem;height:.4375rem;border-radius:1px;background:var(--color-orange);transform:rotate(45deg);}
.ph-h1{font-size:3.25rem;font-weight:800;line-height:1.06;letter-spacing:-.035em;text-wrap:balance;max-width:52rem;color:var(--color-ink);}
.ph-lead{font-size:1.125rem;line-height:1.6;color:var(--color-muted);max-width:44rem;text-wrap:pretty;}
.ph-actions{display:flex;flex-wrap:wrap;gap:.875rem;margin-top:.5rem;}
.ph-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:inherit;font-size:1rem;font-weight:600;line-height:1;padding:1rem 1.4rem;border-radius:12px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .15s;}
.ph-btn svg{width:1rem;height:1rem;}
.ph-btn.is-primary{background:var(--color-ink);color:#fff;border-color:var(--color-ink);box-shadow:0 10px 24px -14px rgba(28,25,23,.55);}
.ph-btn.is-primary:hover{background:#000;color:#fff;transform:translateY(-1px);}
.ph-btn.is-primary .arr{transition:transform .15s;}
.ph-btn.is-primary:hover .arr{transform:translateX(3px);}
.ph-btn.is-secondary{background:#fff;color:var(--color-ink);border-color:var(--color-line);}
.ph-btn.is-secondary:hover{border-color:var(--color-orange);color:var(--color-accent);}
.ph-btn.is-secondary .play{width:1.375rem;height:1.375rem;border-radius:50%;display:grid;place-items:center;background:var(--color-orange);color:var(--color-ink);flex:none;}
.ph-btn.is-secondary .play svg{width:.625rem;height:.625rem;}
.ph-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;}
.ph-trust{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:.875rem;font-weight:500;color:var(--color-muted);}
.ph-trust .sep{width:.25rem;height:.25rem;border-radius:50%;background:var(--color-line);}
.ph-media{position:relative;max-width:80rem;margin:3.25rem auto 0;padding:0 2.5rem;}
.ph-shot{
  position:relative;height:30rem;overflow:hidden;
  border:1px solid var(--color-line);border-bottom:0;border-radius:14px 14px 0 0;
  background:var(--color-bg-soft);
  box-shadow:0 2px 6px rgba(28,25,23,.05),0 30px 60px -40px rgba(120,53,15,.4);
}
.ph-shot img{width:80rem;min-width:80rem;max-width:none;height:auto;border-radius:13px 13px 0 0;}
.ph-shot.is-empty{
  background:repeating-linear-gradient(135deg,transparent 0 11px,rgba(231,226,218,.9) 11px 12px),linear-gradient(180deg,#fff,var(--color-bg-soft));
  border-style:dashed;border-bottom:0;display:grid;place-items:center;
}
.ph-shot.is-empty img{display:none;}
.ph-shot.is-empty::after{
  content:attr(data-empty-label);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--color-accent);background:#FFF3EA;border:1px solid rgba(194,65,12,.22);border-radius:200px;padding:.55rem 1.1rem;
}
@media (max-width:1200px){
  .ph-h1{font-size:2.875rem;}
  .ph-shot{height:26rem;}
}
@media (max-width:1024px){
  .ph-hero{padding-top:3.25rem;}
  .ph-media{margin-top:2.75rem;}
  .ph-shot{height:24rem;}
}
@media (max-width:768px){
  .ph-copy,.ph-hero.is-left .ph-copy{justify-items:center;text-align:center;}
  .ph-h1{font-size:2.25rem;}
  .ph-lead{font-size:1.0625rem;}
  .ph-actions{justify-content:center;}
  .ph-trust{justify-content:center;}
  .ph-media{padding:0;max-width:none;}
  .ph-shot{height:19rem;border-radius:0;border-left:0;border-right:0;}
  .ph-shot img{width:60rem;min-width:60rem;border-radius:0;}
}
/* Phones: the hero shot is a fixed 60-80rem image cropped by a fixed-height
   frame — a desktop "peek" that cuts off mid-content on a phone. Let the whole
   shot scale to fit the width instead, so the full product visual is visible. */
@media (max-width:560px){
  .ph-shot{height:auto;}
  .ph-shot img{width:100%;min-width:0;max-width:100%;height:auto;}
}
@media (prefers-reduced-motion:reduce){.ph-btn{transition:none;}}

/* ==========================================================================
   POST-HERO DARK SECTION — gives contrast between hero and first content block.
   Apply .ph-post-hero to the first <section> after the hero.
   ========================================================================== */
.ph-post-hero{background:var(--color-ink) !important;color:#fff !important;position:relative;overflow:hidden;}
.ph-post-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(80% 50% at 50% 0%,rgba(194,65,12,.12),transparent 65%);}
.ph-post-hero h2,.ph-post-hero h3,.ph-post-hero b,.ph-post-hero strong{color:#fff !important;}
.ph-post-hero p,.ph-post-hero span:not([class]){color:rgba(255,255,255,.7) !important;}
.ph-post-hero .pp-lead{color:rgba(255,255,255,.65) !important;}
.ph-post-hero .pp-kicker,.ph-post-hero .pp-kdot{color:var(--color-accent) !important;}
.ph-post-hero .pp-bullet{color:rgba(255,255,255,.85) !important;}
.ph-post-hero .pp-bullet svg{color:var(--color-accent) !important;}

/* ==========================================================================
   TRIAL CTA BAND — shared across all /products/* pages.
   ========================================================================== */
.tcta-band{position:relative;overflow:hidden;background:var(--color-ink);border-radius:28px;padding:6.5rem 2rem 6.75rem;text-align:center;color:#fff;}
.tcta-band::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(90% 60% at 50% -8%,rgba(194,65,12,.30),transparent 60%),radial-gradient(70% 55% at 88% 118%,rgba(255,115,30,.20),transparent 60%),radial-gradient(60% 55% at 6% 112%,rgba(255,115,30,.12),transparent 60%);}
.tcta-inner{position:relative;z-index:1;max-width:44rem;margin:0 auto;padding:0;}
.tcta-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:600;letter-spacing:.01em;color:var(--color-accent);margin-bottom:1.5rem;}
.tcta-eyebrow .spark{font-size:.9rem;line-height:1;}
.tcta-band h2{font-size:3.5rem;font-weight:800;line-height:1.04;letter-spacing:-.04em;color:#fff;text-wrap:balance;}
.tcta-sub{font-size:1.1875rem;font-weight:400;line-height:1.55;color:#cdcdcd;margin:1.5rem auto 0;max-width:38rem;text-wrap:pretty;}
.tcta-actions{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;margin-top:2.5rem;}
.tcta-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:1.0625rem;line-height:1;padding:1.0625rem 1.625rem;border-radius:12px;border:1px solid transparent;transition:background .15s ease,border-color .15s ease,transform .15s ease;font-family:inherit;cursor:pointer;text-decoration:none;}
.tcta-btn svg{width:1.125rem;height:1.125rem;flex:none;}
.tcta-btn.is-primary{background:#fff;color:var(--color-ink);box-shadow:0 10px 30px -12px rgba(0,0,0,.5);}
.tcta-btn.is-primary:hover{background:#f2f5ff;transform:translateY(-1px);}
.tcta-btn.is-primary .arrow{transition:transform .15s ease;}
.tcta-btn.is-primary:hover .arrow{transform:translateX(3px);}
.tcta-btn.is-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.tcta-btn.is-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.7);color:#fff;}
.tcta-micro{display:inline-flex;align-items:center;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-top:2rem;font-size:.875rem;font-weight:500;color:rgba(255,255,255,.55);}
.tcta-micro .sep{width:.25rem;height:.25rem;border-radius:50%;background:rgba(255,255,255,.32);flex:none;}
.tcta-section{padding:0 0 5rem;display:block;background:#fff;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
.tcta-section .tcta-container{max-width:74.5rem;margin:0 auto;padding:0 1.5rem;}
@media (max-width:760px){
  .tcta-band{padding:4.5rem 1.5rem 4.75rem;border-radius:22px;}
  .tcta-band h2{font-size:2.5rem;}
  .tcta-sub{font-size:1.0625rem;}
}
@media (max-width:480px){
  .tcta-band h2{font-size:2rem;}
  .tcta-actions{flex-direction:column;align-items:stretch;}
  .tcta-btn{width:100%;}
}