:root{
    color-scheme: light;
    --ink: #2B2420;
    --ink-soft: #5C5044;
    --paper: #FBF4E9;
    --paper-raised: #F1E6D4;
    --clay: #C1602F;
    --clay-ink: #FFFFFF;
    --moss: #55684A;
    --gold: #D89A3F;
    --line: #D8CBB5;
  }

  *{ box-sizing: border-box; }
  html{ -webkit-text-size-adjust: 100%; }
  body{
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: "Work Sans", -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    overflow-x: clip;
  }

  h1, h2, h3{
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "SOFT" 0, "WONK" 0;
    font-variant-ligatures: no-common-ligatures;
    font-weight: 600;
    line-height: 1.08;
    margin: 0 0 0.4em 0;
    color: var(--ink);
  }

  a{ color: inherit; }

  .wrap{
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 20px;
  }

  /* ---------- header ---------- */
  header.site{
    padding: 28px 0 18px;
    border-bottom: 1px solid var(--line);
  }
  .site-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
  }
  .brand{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    text-decoration: none;
  }
  .brand-logo{
    display: block;
    width: 236px;
    height: auto;
  }
  .brand small{
    display: block;
    max-width: 340px;
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: 2px;
  }
  nav.site-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 0.88rem;
    font-weight: 500;
  }
  nav.site-nav a{
    text-decoration: none;
    color: var(--ink-soft);
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
  }
  nav.site-nav a:hover{ color: var(--clay); border-bottom-color: var(--clay); }

  .footer-mark{
    display: block;
    width: 64px;
    height: auto;
    margin: 0 auto 18px;
  }


  /* ---------- contact form ---------- */
  .lead-form{
    max-width: 620px;
    margin: 30px auto 0;
    text-align: left;
  }
  .field-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .field{ margin-bottom: 16px; }
  .field label{
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 6px;
  }
  .field label .opt{
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: none;
    opacity: 0.7;
  }
  .field input, .field select, .field textarea{
    width: 100%;
    font-family: inherit;
    font-size: 0.98rem;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 3px;
    padding: 12px 13px;
  }
  .field textarea{ min-height: 110px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus{
    outline: none;
    border-color: var(--clay);
    box-shadow: 0 0 0 3px rgba(193, 96, 47, 0.16);
  }
  .field input[aria-invalid="true"], .field select[aria-invalid="true"]{
    border-color: #A8342A;
    background: #FBEDE9;
  }
  /* honeypot: off-screen rather than display:none, which some bots skip */
  .hp{
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .form-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 6px;
  }
  .lead-form .btn{ border: 1px solid var(--clay); cursor: pointer; }
  .lead-form .btn[disabled]{ opacity: 0.55; cursor: default; transform: none; }
  .form-note{
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin: 14px 0 0;
  }
  .form-msg{
    margin: 16px 0 0;
    padding: 13px 15px;
    border-radius: 3px;
    font-size: 0.95rem;
    border: 1px solid var(--line);
    background: var(--paper-raised);
  }
  .form-msg[data-tone="ok"]{
    border-color: var(--moss);
    background: #EDF1E8;
    color: #33402C;
  }
  .form-msg[data-tone="bad"]{
    border-color: #A8342A;
    background: #FBEDE9;
    color: #7E2A22;
  }
  .form-msg:empty{ display: none; }

  @media (max-width: 620px){
    .field-row{ grid-template-columns: 1fr; gap: 0; }
  }

  /* ---------- trail divider ---------- */
  .trail{
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto;
    max-width: 1080px;
    padding: 0 20px;
  }
  .trail::before, .trail::after{
    content: "";
    flex: 1;
    height: 0;
    border-top: 3px dashed var(--line);
  }
  .trail svg{ width: 22px; height: 22px; color: var(--gold); flex-shrink: 0; }

  /* ---------- hero ---------- */
  .hero{
    padding: 56px 0 60px;
  }
  .hero-grid{
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 46px;
    align-items: center;
  }
  .kicker{
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--moss);
    margin-bottom: 14px;
  }
  .hero h1{
    font-size: clamp(1.9rem, 4.6vw, 2.9rem);
    max-width: 15ch;
  }
  .hero h1 em{
    font-style: normal;
    color: var(--clay);
  }
  .hero p.sub{
    font-size: 1.05rem;
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 18px 0 28px;
  }
  .cta-row{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
  }
  .btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--clay);
    color: var(--clay-ink);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 14px 24px;
    border-radius: 3px;
    border: 1px solid var(--clay);
    transition: transform 0.15s ease, opacity 0.15s ease;
  }
  .btn:hover{ transform: translateY(-1px); opacity: 0.92; }
  .btn.ghost{
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
  }
  .btn.ghost:hover{ border-color: var(--clay); color: var(--clay); }

  /* hero video placeholder */
  .video-frame{
    position: relative;
    border: 2px solid var(--ink);
    background: var(--paper-raised);
    aspect-ratio: 9 / 13;
    max-width: 340px;
    margin: 0 auto;
    padding: 14px;
    box-shadow: 8px 8px 0 var(--line);
  }
  .hero-writeup{
    max-width: 340px;
    margin: 22px auto 0;
    text-align: left;
  }
  .hero-writeup h2{
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
    color: var(--ink);
    margin: 0 0 8px;
  }
  .hero-writeup p{
    margin: 0;
    color: var(--ink-soft);
  }
  .video-inner{
    height: 100%;
    width: 100%;
    border: 1px dashed var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
    padding: 20px;
    position: relative;
    background:
      repeating-linear-gradient(135deg, transparent 0 12px, var(--line) 12px 13px);
    background-color: transparent;
  }
  .play-btn{
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--clay);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 0 rgba(0,0,0,0.15);
    flex-shrink: 0;
  }
  .play-btn svg{ width: 22px; height: 22px; color: var(--clay-ink); margin-left: 3px; }
  .video-caption{
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--paper);
    padding: 6px 12px;
    border: 1px solid var(--line);
  }
  .video-tag{
    position: absolute;
    top: -12px;
    left: 14px;
    background: var(--gold);
    color: var(--ink);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1px solid var(--ink);
  }

  .was-price{
    display: inline-block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ink-soft, #777);
    opacity: 0.7;
    margin-right: 6px;
  }

  /* ---------- hero benefit list ---------- */
  .hero-benefits{
    list-style: none;
    margin: 0 0 28px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
  }
  .hero-benefits li{
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.96rem;
    color: var(--ink);
    line-height: 1.4;
  }
  .hero-benefits li svg{
    width: 18px;
    height: 18px;
    color: var(--clay);
    flex-shrink: 0;
    margin-top: 3px;
  }

  /* ---------- hero button fine print ---------- */
  .cta-fineprint{
    flex-basis: 100%;
    width: 100%;
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--ink-soft);
  }

  /* ---------- standalone break line ---------- */
  .break-line{
    border: 0;
    padding: 46px 0;
  }
  .break-line p{
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "SOFT" 0, "WONK" 0;
    font-variant-ligatures: no-common-ligatures;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.6vw, 2.4rem);
    line-height: 1.22;
    color: var(--ink);
    max-width: 24ch;
    margin: 0 auto;
    text-align: center;
  }

  /* ---------- home footer tagline ---------- */
  footer.site .footer-tagline{
    font-family: "Fraunces", Georgia, serif;
    font-variation-settings: "SOFT" 0, "WONK" 0;
    font-variant-ligatures: no-common-ligatures;
    font-weight: 600;
    font-size: 1.15rem;
    color: var(--ink);
    margin: 0 0 14px;
  }

  /* ---------- section shell ---------- */
  section{ padding: 62px 0; }
  .section-head{
    max-width: 56ch;
    margin-bottom: 40px;
  }
  .section-head .kicker{ margin-bottom: 10px; }
  .section-head h2{ font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
  .section-head p{ color: var(--ink-soft); margin-top: 12px; }

  /* ---------- benefits ---------- */
  .benefits-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px 34px;
  }
  .benefit{
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .benefit svg{ width: 22px; height: 22px; color: var(--moss); flex-shrink: 0; margin-top: 3px; }
  .benefit h3{ font-size: 1.05rem; margin-bottom: 5px; }
  .benefit p{ color: var(--ink-soft); font-size: 0.94rem; max-width: 42ch; }
  @media (max-width: 640px){
    .benefits-grid{ grid-template-columns: 1fr; }
  }

  /* ---------- benefits: single-column check list ---------- */
  #benefits .benefit-list{
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    text-align: left;
  }
  #benefits .benefit-list li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.98rem;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  #benefits .benefit-list li svg{
    width: 18px;
    height: 18px;
    color: var(--clay);
    flex-shrink: 0;
    margin-top: 4px;
  }
  #benefits .benefit-list li strong{
    color: var(--ink);
    font-weight: 700;
  }

  /* ---------- centered single "Get Your First Video" button row ---------- */
  .deal-cta-row{
    display: flex;
    justify-content: center;
    margin: 36px 0 8px;
  }
  .cta-row .btn.deal-btn + .btn.ghost{ /* keeps side-by-side pairing readable */ }

  /* ---------- pillars ---------- */
  .pillar{
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 22px;
    padding: 30px 0;
    border-bottom: 1px dashed var(--line);
    align-items: start;
  }
  .pillar:first-of-type{ border-top: 1px dashed var(--line); }
  .pillar-num{
    font-family: "Fraunces", serif;
    font-size: 2.4rem;
    font-weight: 500;
    color: var(--line);
    line-height: 1;
  }
  .pillar-icon{
    width: 40px;
    height: 40px;
    color: var(--clay);
    margin-bottom: 14px;
  }
  .pillar h3{ font-size: 1.25rem; margin-bottom: 8px; }
  .pillar p{ color: var(--ink-soft); max-width: 60ch; }

  /* ---------- how it works ---------- */
  .steps{
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  .step{
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: 20px;
  }
  .step-marker{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .step-dot{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Fraunces", serif;
    font-weight: 600;
    font-size: 1.05rem;
    background: var(--paper);
    flex-shrink: 0;
  }
  .step-line{
    width: 2px;
    flex: 1;
    background: repeating-linear-gradient(var(--line), var(--line) 6px, transparent 6px, transparent 12px);
    margin: 6px 0;
  }
  .step-body{ padding-bottom: 34px; }
  .step-body h3{ font-size: 1.1rem; margin-bottom: 6px; }
  .step-body p{ color: var(--ink-soft); max-width: 58ch; }
  .step:last-child .step-line{ display: none; }

  /* ---------- founding offer ---------- */
  .founding{
    background: var(--paper-raised);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .notice{
    position: relative;
    border: 1px dashed var(--ink);
    background: var(--paper);
    padding: 34px 30px;
    max-width: 720px;
    margin: 0 auto;
  }
  .pin{
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--clay);
    border: 2px solid var(--paper);
  }
  .notice h2{ text-align: center; font-size: clamp(1.4rem, 3vw, 1.9rem); }
  .notice p{ color: var(--ink-soft); margin: 16px 0; }
  .notice ul{
    margin: 20px 0;
    padding-left: 0;
    list-style: none;
  }
  .notice li{
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
    color: var(--ink);
  }
  .notice li svg{ width: 18px; height: 18px; color: var(--moss); flex-shrink: 0; margin-top: 3px; }
  .notice-cta{ text-align: center; margin-top: 26px; }
  .fineprint{
    text-align: center;
    font-size: 0.82rem;
    color: var(--ink-soft);
    margin-top: 14px;
  }

  /* ---------- footer ---------- */
  footer.site{
    padding: 60px 0 40px;
    text-align: center;
  }
  footer.site h2{ font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
  footer.site p.lead{ color: var(--ink-soft); max-width: 42ch; margin: 12px auto 26px; }
  .contact-email{
    display: inline-block;
    font-family: "Fraunces", serif;
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--clay);
    text-decoration: none;
    border-bottom: 2px solid var(--clay);
    padding-bottom: 3px;
    margin-bottom: 20px;
  }
  .contact-alt{
    color: var(--ink-soft);
    font-size: 0.92rem;
    margin-bottom: 36px;
  }
  .contact-alt strong{ color: var(--ink); }
  footer.site .legal{
    font-size: 0.78rem;
    color: var(--ink-soft);
    border-top: 1px solid var(--line);
    padding-top: 22px;
    margin-top: 10px;
  }

  /* ---------- responsive ---------- */
  @media (max-width: 860px){
    .hero-grid{ grid-template-columns: 1fr; }
    .video-frame{ max-width: 300px; }
    .hero p.sub{ max-width: 100%; }
  }
  @media (max-width: 560px){
    .wrap, .trail{ padding-left: 16px; padding-right: 16px; }
    header.site{ padding: 20px 0 16px; }
    .site-row{ flex-direction: column; align-items: flex-start; }
    nav.site-nav{ gap: 12px 16px; font-size: 0.82rem; }
    .hero{ padding: 40px 0 44px; }
    .pillar{ grid-template-columns: 56px 1fr; gap: 14px; padding: 24px 0; }
    .pillar-num{ font-size: 1.7rem; }
    section{ padding: 46px 0; }
    .notice{ padding: 28px 18px; }
    .video-frame{ box-shadow: 5px 5px 0 var(--line); }
  }

/* ==========================================================================
   Service page components. Deliberately NOT the home page's card system:
   Larry's standing note is that one repeated rounded-card-with-accent-rail
   pattern across every page reads as AI generated. These use a split panel, a
   ruled shot list, a plain platform row and a checklist instead.
   ========================================================================== */

.page-hero{ padding: 48px 0 44px; }
.page-hero h1{
  font-size: clamp(1.8rem, 4.4vw, 2.7rem);
  max-width: 17ch;
}
.page-hero h1 em{ font-style: normal; color: var(--clay); }
.page-hero p.sub{
  font-size: 1.06rem;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 18px 0 26px;
}
.crumb{
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 22px 0 0;
}
.crumb a{ color: var(--ink-soft); }
.crumb a:hover{ color: var(--clay); }

/* split panel: the problem on one side, the answer on the other */
.split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);
  background: var(--paper-raised);
}
.split > div{ padding: 30px 32px; }
.split > div + div{ border-left: 2px solid var(--ink); }
.split h3{
  font-size: 1.15rem;
  margin-bottom: 10px;
}
.split .tag{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.split .tag.bad{ color: #9C4A34; }
.split .tag.good{ color: var(--moss); }
.split p{ margin: 0; color: var(--ink-soft); }

/* ruled shot list */
.shots{ margin: 26px 0 0; padding: 0; list-style: none; }
.shots li{
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.shots li:last-child{ border-bottom: 1px solid var(--line); }
.shots .n{
  font-family: "Fraunces", serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
  padding-top: 2px;
}
.shots h3{ font-size: 1.05rem; margin: 0 0 6px; }
.shots p{ margin: 0; color: var(--ink-soft); font-size: 0.97rem; }

/* platform row */
.platforms{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.platforms li{
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 17px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper-raised);
}

/* checklist */
.checks{ margin: 20px 0 0; padding: 0; list-style: none; }
.checks li{
  position: relative;
  padding: 0 0 0 30px;
  margin-bottom: 13px;
  color: var(--ink-soft);
}
.checks li::before{
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 9px; height: 9px;
  background: var(--clay);
  border-radius: 2px;
}

.sister{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 24px;
}
.sister a{
  display: block;
  border: 1px solid var(--line);
  padding: 20px 22px;
  text-decoration: none;
  background: var(--paper-raised);
}
.sister a:hover{ border-color: var(--clay); }
.sister .lbl{
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--moss);
  margin-bottom: 7px;
}
.sister strong{
  font-family: "Fraunces", serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
}

@media (max-width: 760px){
  .split{ grid-template-columns: 1fr; }
  .split > div + div{ border-left: 0; border-top: 2px solid var(--ink); }
  .sister{ grid-template-columns: 1fr; }
  .shots li{ grid-template-columns: 44px 1fr; gap: 14px; }
}

.pillar-more{ margin: 14px 0 0; }
.pillar-more a{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--clay);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.pillar-more a:hover{ border-bottom-color: var(--clay); }
nav.site-nav a.here{ color: var(--clay); border-bottom-color: var(--clay); }

/* ---------- main nav dropdown ----------
   Built on <details>/<summary> rather than a hover menu: hover menus do not
   work on touch, and this is keyboard accessible with no extra markup. */
.nav-drop{ position: relative; }
.nav-drop > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink-soft);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.nav-drop > summary::-webkit-details-marker{ display: none; }
.nav-drop > summary::after{
  content: "";
  width: 6px; height: 6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.15s ease;
}
.nav-drop[open] > summary::after{ transform: translateY(1px) rotate(-135deg); }
.nav-drop > summary:hover,
.nav-drop[open] > summary{ color: var(--clay); border-bottom-color: var(--clay); }
.nav-menu{
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 30;
  min-width: 190px;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 4px 4px 0 var(--line);
  padding: 6px 0;
}
.nav-menu a{
  display: block;
  padding: 9px 16px;
  white-space: nowrap;
  border-bottom: 0;
}
.nav-menu a:hover{ background: var(--paper-raised); color: var(--clay); }
/* The menu sits 10px below the summary, and that gap is outside the <details>
   box, so a mouse travelling down to it would fire mouseleave and close the
   menu before it arrived. This bridges the gap. Pseudo-elements count as part
   of their element for hover, so the pointer never actually leaves. */
@media (hover: hover) and (pointer: fine){
  .nav-drop[open]::before{
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 190px;
    height: 12px;
  }
}

/* ---------- standout line ---------- */
.standout{
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--paper-raised);
  padding: 40px 0;
}
.standout p{
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-variant-ligatures: no-common-ligatures;
  font-weight: 600;
  font-size: clamp(1.25rem, 2.7vw, 1.8rem);
  line-height: 1.3;
  color: var(--ink);
  max-width: 30ch;
  margin: 0 auto;
  text-align: center;
}
.standout .mark{
  display: block;
  width: 44px;
  height: auto;          /* the img carries width/height attrs; without this it stretches */
  margin: 0 auto 18px;
}

@media (max-width: 560px){
  .nav-drop{ position: static; }
  .nav-menu{ position: static; box-shadow: none; margin-top: 8px; }
}

/* ---------- real sample videos ----------
   Source clips are vertical 1080x1920. Served straight from Pages as H.264
   mp4, re-encoded from the originals in video-src/ (see the session note).
   poster + preload="metadata" so the page paints a still immediately and the
   visitor only pays for the video if they press play. */
.vid{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--ink);
  object-fit: cover;
}
.video-frame.has-vid{
  aspect-ratio: auto;
  padding: 10px;
}
.video-frame.has-vid .vid{ border: 1px solid var(--line); }

.video-row{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 26px;
  margin: 28px 0 0;
  max-width: 720px;
}
.vid-card{ margin: 0; }
.vid-card figcaption{
  margin-top: 11px;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.45;
}
.vid-card figcaption strong{
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-variant-ligatures: no-common-ligatures;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
}

/* a single sample on a service page, next to its own copy */
.vid-single{
  max-width: 300px;
  margin: 26px 0 0;
}

/* ---------- sample band, directly under the hero on a service page ----------
   Full-width band, but the clip inside it is 9:16, so a literally full-bleed
   video would be absurdly tall. The band spans the page and pairs the clip with
   its title and description so the width is used rather than left empty. */
.sample-band{
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  background: var(--paper-raised);
  padding: 34px 0;
}
.sample-band .wrap{
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 34px;
  align-items: center;
}
.sample-band .vid{ border: 1px solid var(--line); }
.sample-band .kicker{ margin-bottom: 10px; }
.sample-band h2{
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  margin-bottom: 10px;
}
.sample-band p{
  margin: 0;
  color: var(--ink-soft);
  max-width: 54ch;
}
.sample-band figure{ margin: 0; }

@media (max-width: 760px){
  .sample-band .wrap{
    grid-template-columns: 1fr;
    gap: 22px;
    max-width: 330px;
  }
}

/* ---------- mobile menu ----------
   Seven top level items wrapped onto three rows on a phone, taking 223px of a
   664px screen, pushing the h1 47% down and the buttons off the first screen
   entirely. Below 760px they collapse behind a button. Desktop is untouched. */
.nav-toggle{ display: none; }

@media (max-width: 760px){
  .nav-toggle{
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 10px 15px;
    font: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ink);
    background: var(--paper-raised);
    border: 1px solid var(--line);
    border-radius: 3px;
    cursor: pointer;
  }
  .nav-toggle[aria-expanded="true"]{ border-color: var(--clay); color: var(--clay); }
  .nav-toggle-bars{
    width: 17px;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
  }

  nav.site-nav{
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 14px;
    border-top: 1px solid var(--line);
  }
  nav.site-nav.open{ display: flex; }

  /* 44px minimum touch height, up from 23px */
  nav.site-nav > a,
  .nav-drop > summary{
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 2px 0;
    border-bottom: 1px solid var(--line);
    font-size: 0.95rem;
  }
  .nav-drop{ width: 100%; position: static; }
  .nav-drop > summary{ justify-content: space-between; }
  .nav-menu{
    position: static;
    border: 0;
    box-shadow: none;
    background: transparent;
    min-width: 0;
    padding: 0;
  }
  .nav-menu a{
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 2px 0 2px 16px;
    border-bottom: 1px solid var(--line);
  }
}

/* Header on a phone: brand and menu button share one row instead of stacking.
   Stacking them cost ~55px of the first screen for no benefit. This overrides
   the older max-width:560px rule that set the row to a column, so it must stay
   after it in the file. */
@media (max-width: 760px){
  .site-row{
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  .brand{ flex: 1 1 auto; min-width: 0; }
  .brand-logo{ width: 196px; }
  .brand small{ max-width: 260px; }
  .nav-toggle{ flex: 0 0 auto; }
  header.site{ padding: 16px 0 14px; }
}

/* Phones only: drop the tagline from the header. At 11.5px it is fine print
   almost nobody reads on a phone, and keeping it forced the menu button onto a
   second row, costing ~95px of the first screen and pushing the call to action
   below the fold. The logo still carries the name, and the tagline stays on
   tablet and desktop. */
@media (max-width: 560px){
  .brand small{ display: none; }
  .brand-logo{ width: 182px; }
}

/* Touch targets: these two sat at 25px and 15px tall on a phone. Padding gets
   them to 44px without moving anything visually, since the extra height is
   transparent. */
@media (max-width: 760px){
  .pillar-more a{ padding: 10px 0; }
  .crumb{ margin-top: 26px; }
  .crumb a{ display: inline-block; padding: 14px 0; }
}

/* ---------- pricing ----------
   Hard borders and a flat grid, matching the split panel and shot list used
   elsewhere. Deliberately not the rounded-card-with-accent-rail look. */
.entry-offer{
  border: 2px solid var(--ink);
  background: var(--paper-raised);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 26px;
  align-items: center;
  padding: 28px 30px;
  margin-top: 26px;
}
.entry-offer h3{ font-size: 1.3rem; margin-bottom: 8px; }
.entry-offer p{ margin: 0; color: var(--ink-soft); max-width: 52ch; }
.entry-price{ text-align: right; white-space: nowrap; }
.entry-price .big{
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-variant-ligatures: no-common-ligatures;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--clay);
}
.entry-price .then{
  display: block;
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-top: 7px;
}

.tiers{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 26px;
  border: 1px solid var(--line);
}
.tier{
  padding: 26px 24px 28px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}
.tier:last-child{ border-right: 0; }
.tier.pick{
  background: var(--paper-raised);
  border: 2px solid var(--ink);
  margin: -1px;
}
.tier-tag{
  display: inline-block;
  align-self: flex-start;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--gold);
  color: #3B2A12;
  padding: 4px 9px;
  margin-bottom: 12px;
}
.tier h3{ font-size: 1.15rem; margin-bottom: 4px; }
.tier .count{ font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 16px; }
.tier .price{
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-variant-ligatures: no-common-ligatures;
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--ink);
}
.tier .price span{
  font-family: "Work Sans", sans-serif;
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--ink-soft);
}
.tier .each{ font-size: 0.82rem; color: var(--ink-soft); margin: 9px 0 18px; }
.tier .btn{ margin-top: auto; justify-content: center; }

.includes{
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 24px;
}
.price-note{ font-size: 0.9rem; color: var(--ink-soft); margin-top: 18px; }

table.addons{
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  max-width: 520px;
}
table.addons th, table.addons td{
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-size: 0.95rem;
}
table.addons th{
  font-family: "Work Sans", sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
table.addons th:last-child, table.addons td:last-child{ text-align: right; }
table.addons td:last-child{ white-space: nowrap; font-weight: 600; }

/* FAQ: full-width question, answer under it. Deliberately not .shots, whose
   first grid column is a number and squeezes a sentence into 8 characters. */
.faq{
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  max-width: 78ch;
}
.faq li{ padding: 22px 2px; border-bottom: 1px solid var(--line); }
.faq h3{ font-size: 1.08rem; margin: 0 0 8px; }
.faq p{ margin: 0; color: var(--ink-soft); }

.price-peek + .cta-row{ margin-top: 24px; }

/* home page teaser */
.price-peek{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.price-peek div{
  border: 1px solid var(--line);
  background: var(--paper-raised);
  padding: 18px 20px;
}
.price-peek strong{
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--ink);
  margin-bottom: 4px;
}
.price-peek span{ font-size: 0.88rem; color: var(--ink-soft); }

@media (max-width: 860px){
  .tiers{ grid-template-columns: 1fr; }
  .tier{ border-right: 0; border-bottom: 1px solid var(--line); }
  .tier:last-child{ border-bottom: 0; }
  .tier.pick{ margin: 0; }
  .entry-offer{ grid-template-columns: 1fr; gap: 16px; }
  .entry-price{ text-align: left; }
}

/* ---------- first-video deal emphasis ---------- */
.btn.deal-btn{
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
  padding: 14px 26px;
  line-height: 1.1;
}
.btn.deal-btn .deal-words{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 600;
}
.btn.deal-btn .deal-prices{
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.btn.deal-btn .was{
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.72;
  text-decoration: line-through;
}
.btn.deal-btn .now{
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 0, "WONK" 0;
  font-variant-ligatures: no-common-ligatures;
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
}
.deal-savings{
  display: block;
  margin-top: 10px;
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.cta-row .deal-savings{ flex-basis: 100%; }

/* price-peek: highlight first-video deal box */
.price-peek .deal-box{
  border: 2px solid var(--gold);
  background: var(--paper-raised);
}
.price-peek .deal-box .was-price{
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft, #777);
  opacity: 0.85;
  text-decoration: line-through;
  margin-right: 6px;
}
.price-peek .deal-box strong{
  font-size: 2.6rem;
  color: var(--clay);
}
.price-peek .deal-box .deal-savings{
  font-size: 0.95rem;
  margin-top: 6px;
  color: var(--ink);
  font-weight: 800;
}

/* pricing page entry-price */
.entry-price .was-price{
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink-soft, #777);
  opacity: 0.85;
  text-decoration: line-through;
  margin-right: 6px;
}
.entry-price .big{ font-size: 3.2rem; font-weight: 700; }
.entry-price .deal-savings{
  font-size: 1rem;
  margin-top: 8px;
}

/* ---------- pricing hero still ----------
   A frame lifted from one of the sample videos, cropped clear of the client
   branding that frame carried. The image's own background is the same cream as
   the page, so a hairline border is what stops it dissolving into the page. */
.page-hero .hero-split{
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 52px;
  align-items: center;
}
.hero-still{ margin: 0; }
.hero-still img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--paper-raised);
}

@media (max-width: 900px){
  .page-hero .hero-split{ grid-template-columns: 1fr; gap: 30px; }
  .hero-still{ max-width: 340px; }
}

/* ---------- sticky header on mobile only ----------
   Phones only (<=760px): pin the header to the top of the viewport while the
   visitor scrolls. Desktop is untouched. This block is at the END of the file
   so it overrides the earlier header.site rules. The --paper background stops
   page content showing through the header while scrolling; the existing
   border-bottom from header.site is kept. body/html use overflow-x: clip
   (not hidden) above, so position: sticky still works and horizontal scroll
   stays prevented. */
@media (max-width: 760px){
  header.site{
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--paper);
  }

  /* An open mobile menu that is taller than the screen can still scroll inside
     the pinned header instead of being clipped off. ~80px accounts for the
     sticky header height. Tapping a link still navigates and closes the menu. */
  nav.site-nav.open{
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  /* Same-page #anchor jumps (Get Started, Get Your First Video, nav dropdown
     links, etc.) must not land with the target hidden behind the sticky
     header. ~80px matches the sticky header height. */
  html{ scroll-padding-top: 80px; }
}

/* ---------- mobile-only hero reorder (<=860px) ----------
   On phones the hero already stacks to one column. This moves the video frame
   so it sits directly below the h1, between the heading and the p.sub, without
   touching the HTML (the video element is NOT duplicated and div#sample keeps
   its id). Both hero column wrappers become display: contents so their children
   participate directly in the single-column .hero-grid; order places them.
   Desktop (>860px) is unaffected: this whole block is inside the media query. */
@media (max-width: 860px){
  /* dissolve the two column wrappers so their children are grid items */
  .hero-grid > div,
  .hero-grid > div#sample{ display: contents; }

  /* remove the grid row gap; use per-item margins instead so there are no
     big empty gaps between the reordered text items */
  .hero-grid{ row-gap: 0; }

  .hero-grid .kicker{ order: 1; }
  .hero-grid h1{ order: 2; }
  .hero-grid .video-frame{ order: 3; margin: 24px auto; }
  .hero-grid p.sub{ order: 4; }
  .hero-grid .hero-benefits{ order: 5; }
  .hero-grid .cta-row{ order: 6; }
  /* on service pages the write-up stays below the buttons row */
  .hero-grid .hero-writeup{ order: 7; }
}