/* VIDEO HERO - loaded only while VIDEO_HERO=on (tools/video_hero/apply.py).
   Geometry is berthascookbook.com's top section, measured at 1440 and 390:
   hero padding 60/78 (34/48 mobile), H1 60px/1.12 (38px), pill 17px bold
   10px 20px radius 999, video max 860 radius 12, play disc 96px, CTA max
   640 radius 14 padding 20 30 16, "see inside" 18px bold underlined.

   GROUND: the masthead band's own dark is #012B34 (sampled off the band's
   bottom rows). The hero sits one layer above it - the same teal family,
   ~8% lighter and a touch warmer - so header and hero read as two layers
   and never as one flat field. Soft vertical gradient + diagonal stripes. */
.vhero{
  --vh-top:#0F3E43; --vh-bot:#0B3338; --vh-cream:#F5F1E8; --vh-accent:#8FD1D9;
  --vh-red:#8C2818; --vh-red-hi:#A5361F; --vh-red-lo:#7A1F0E; --vh-arrow:#D7372F;
  position:relative;overflow:hidden;text-align:center;color:var(--vh-cream);
  padding:60px 16px 78px;
  background:
    repeating-linear-gradient(135deg,rgba(255,255,255,.028) 0 2px,rgba(255,255,255,0) 2px 11px),
    radial-gradient(1100px 520px at 72% -12%,rgba(143,209,217,.10),rgba(143,209,217,0) 62%),
    linear-gradient(180deg,var(--vh-top),var(--vh-bot));
  box-shadow:inset 0 10px 18px -12px rgba(0,0,0,.55);
}
.vhero-in{max-width:960px;margin:0 auto}
.vhero-h1{
  font-family:"Lora",Georgia,serif;font-weight:700;font-size:60px;line-height:1.12;
  letter-spacing:-.01em;text-transform:none;color:var(--vh-cream);
  max-width:860px;margin:0 auto 18px;text-wrap:balance;
}
.vhero-h1 em{font-style:italic;font-weight:700;color:var(--vh-accent)}
.vhero-sub{
  font-family:"Lora",Georgia,serif;font-size:19px;line-height:1.5;
  color:rgba(245,241,232,.85);max-width:640px;margin:0 auto 6px;text-wrap:balance;
}
.vhero .vh-short{display:none}
.vhero-arrow{color:var(--vh-arrow);font-size:22px;line-height:1.6;margin:14px 0 6px}
.vhero-pill{
  display:inline-flex;align-items:center;gap:9px;margin:0 0 12px;
  background:var(--vh-red);color:#fff;border-radius:999px;padding:10px 20px;
  font-family:"Lora",Georgia,serif;font-weight:700;font-size:17px;line-height:1.6;letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.vh-ico{display:inline-flex;flex:none}
.vhero-frame{position:relative;max-width:860px;margin:10px auto 26px}
.vhero-frame video{
  display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;
  border-radius:12px;border:1px solid rgba(143,209,217,.22);
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.vhero-play{
  position:absolute;inset:0 0 44px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  width:100%;padding:44px 0 0;border:0;border-radius:12px 12px 0 0;background:rgba(4,20,22,.16);cursor:pointer;
  font-family:Arial,Helvetica,sans-serif;
}
.vh-disc{
  width:96px;height:96px;border-radius:50%;background:var(--vh-red);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.5);
}
.vh-disc::after{content:"";display:block;margin-left:8px;border-style:solid;border-width:19px 0 19px 32px;border-color:transparent transparent transparent #fff}
.vhero-play b{color:#fff;font-size:18px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.vhero-play:focus-visible{outline:3px solid var(--vh-accent);outline-offset:3px}
.vhero.is-playing .vhero-play{display:none}
@media (prefers-reduced-motion:no-preference){
  .vh-disc{animation:vh-pulse 1.8s ease-in-out infinite}
  .vhero-arrow{animation:vh-bob 1.6s ease-in-out infinite}
}
@keyframes vh-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes vh-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.vhero-cta{
  display:block;max-width:640px;margin:0 auto;text-decoration:none;color:#fff;
  background:linear-gradient(180deg,var(--vh-red-hi),var(--vh-red-lo));
  font-family:"Lora",Georgia,serif;font-weight:700;font-size:27px;line-height:1.6;
  padding:20px 30px 16px;border-radius:14px;box-shadow:0 14px 36px rgba(0,0,0,.4);
}
.vhero-cta small{display:block;font-weight:400;font-size:18px;line-height:1.45;margin-top:6px;letter-spacing:.01em}
.vhero-cta:hover{filter:brightness(1.07)}
.vhero-cta:focus-visible,.vhero-see:focus-visible{outline:3px solid var(--vh-accent);outline-offset:3px}
.vhero-see{
  display:inline-block;margin:20px auto 4px;color:var(--vh-accent);
  font-family:"Lora",Georgia,serif;font-weight:700;font-size:18px;text-decoration:underline;text-underline-offset:3px;
}

@media (max-width:599.98px){
  .vhero{padding:34px 16px 48px}
  .vhero-h1{font-size:38px;line-height:1.12;margin-bottom:12px}
  .vhero-sub{font-size:16px;margin-bottom:16px}
  .vhero .vh-full{display:none}
  .vhero .vh-short{display:inline}
  .vhero-arrow{display:none}
  .vhero-pill{font-size:17px;padding:10px 20px;margin-bottom:4px}
  .vhero-frame{margin:10px auto 26px}
  /* mobile hides the control bar until the first play, so the overlay
     covers the whole frame */
  .vhero-play{inset:0;padding:0;border-radius:12px}
  .vhero-frame.no-bar .vhero-play{inset:0}
  .vh-disc{width:96px;height:96px}
  .vhero-cta{font-size:22px;padding:18px 18px 14px}
  .vhero-cta small{font-size:16px}
}

/* main carries padding-top:var(--sec) for the page's old first section;
   the video hero sits flush under the header band instead. */
body > main > .vhero:first-child{margin-top:calc(-1 * var(--sec))}
/* the page caps paragraphs at a ch-based max-width; the pill sizes to its text */
.vhero-pill{max-width:none}
@media (min-width:600px){.vhero-pill{white-space:nowrap}}
@media (max-width:599.98px){.vhero-pill{max-width:100%}}

/* ==================================================================
   FLYER_V2 (tools/flyer_v2), 2026-10-11. The Seasoned Cruiser's round,
   carried over value for value. Everything above this line is
   video-hero.css with its caption rules taken out.
   ================================================================== */

/* the italic line under the H1 - the Cruiser's .vsl-formerly (Bertha's
   ".formerly"): Lora italic 400, 19px under a 60px H1, cream at .8; on
   phones 16.8px under the 44px H1. On every width. */
.vhero-formerly{
  font-family:"Lora",Georgia,serif;font-style:italic;font-weight:400;font-size:19px;line-height:1.4;
  color:var(--vh-cream);opacity:.8;margin:4px auto 8px;max-width:none;
}
/* phones: the Cruiser's top. The name band goes; the sale strip is a fixed
   overlay, so the hero takes over the room the band reserved for it. */
@media (max-width:600px){
  .masthead{display:none}
  body > main > .vhero:first-child{margin-top:calc(-1 * var(--sec) + var(--urg-h,0px))}
}
@media (max-width:599.98px){
  .vhero-sub,.vhero-arrow{display:none}
  .vhero-h1{font-size:44px;line-height:1.1;margin-bottom:14px}
  .vhero-formerly{font-size:16.8px;margin:2px auto 12px}
}

/* ---- 04 STATS BAND: the Cruiser's .fb-omw (oldmexicanway.com's look).
   One compact centred group, no dividers, big serif numbers in Sharon's
   accent (--accent-lift, the hero's italic), a small label under each, a
   tighter band. Same four numbers, same labels, same dark ground.
   Phones: a centred 2 x 2, as on the Cruiser. ---- */
.factbar.fb-omw{background:var(--ink-deep);padding:34px 0}
.fb-omw .factgrid{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:0 44px;max-width:none;margin:0 auto}
.fb-omw .fact{flex:0 0 auto;min-width:0;padding:0;border:0;text-align:center}
.fb-omw .fact + .fact,.fb-omw .fact:nth-child(even){border-left:0}
.fb-omw .fact b{display:block;font-family:"Lora",Georgia,serif;font-weight:700;font-size:56px;line-height:1;color:var(--accent-lift)}
.fb-omw .fact span{display:block;font-family:"Lora",Georgia,serif;font-weight:400;font-size:16px;line-height:1.3;color:rgba(245,241,232,.82);letter-spacing:0;text-transform:none;margin:6px auto 0;max-width:none}
@media (max-width:640px){
  .factbar.fb-omw{padding:18px 0}
  .fb-omw .factgrid{display:grid;grid-template-columns:repeat(2,auto);justify-content:center;gap:12px 56px}
  .fb-omw .fact b{font-size:40px}
  .fb-omw .fact span{font-size:15px}
}

/* ---- 07 FAQ, OPEN: the Cruiser's (berthascookbook.com's). Every answer
   open, no accordion - the question in bold, the answer under it, one
   760px column; the question in the page serif, the answer in the body
   face. ---- */
#faq .wrap.narrow{width:min(760px,92vw)}
.fq{max-width:760px;margin:0 auto}
.fq-q{font-family:"Lora",Georgia,serif;font-weight:700;font-size:20px;line-height:1.45;color:var(--ink);margin:26px 0 0;max-width:none;text-transform:none;letter-spacing:0}
.fq-a{font-family:var(--body);font-size:18px;line-height:1.6;color:var(--ink-soft);margin:6px 0 0;max-width:none}
.fq-a a{color:var(--accent)}

/* ---- EVERY BUY BUTTON: the Seasoned Cruiser's final block, 1:1 (owner,
   2026-10-11; the Cruiser's is oldmexicanway.com's button, read off its
   computed CSS). A lighter warm top into the red (#C45E47 -> #8C2818), a warm
   glow in the button's own red (0 10px 30px, .5), a 1px light warm edge
   (#D0836C), a 2px lift with a stronger glow on hover (0 14px 38px, .6).
   On the hero CTA, the buy box, "Ready when you are", the exit modal and the
   sticky bar. No arrow except the final CTA, whose arrow is in its text.
   The Flyer's sticky button has no data-buy (it scrolls to #buy since
   VIDEO_HERO), so it is matched by #buybar. The green bundle button
   (.pairboth) is not one of these and stays green. ---- */
a.vhero-cta,a.btn.ep-btn[data-buy],#buybar a.btn.buybar-cta{background:#8C2818;background:linear-gradient(180deg,#C45E47,#8C2818);color:#fff;font-family:"Lora",Georgia,serif;font-weight:700;text-transform:none;letter-spacing:0;border:1px solid #D0836C;box-shadow:0 10px 30px rgba(140,40,24,.5);text-shadow:none;filter:none;transition:transform .15s ease,box-shadow .15s ease}
a.btn.ep-btn[data-buy],#buybar a.btn.buybar-cta{border-radius:10px}
a.vhero-cta:hover,a.vhero-cta:focus-visible,a.btn.ep-btn[data-buy]:hover,#buybar a.btn.buybar-cta:hover,a.btn.ep-btn[data-buy]:focus-visible,#buybar a.btn.buybar-cta:focus-visible{background:linear-gradient(180deg,#C45E47,#8C2818);color:#fff;filter:none;transform:translateY(-2px);box-shadow:0 14px 38px rgba(140,40,24,.6)}
a.vhero-cta:active,a.btn.ep-btn[data-buy]:active,#buybar a.btn.buybar-cta:active{background:linear-gradient(180deg,#C45E47,#8C2818);transform:translateY(-2px)}
a.btn.ep-btn[data-buy]::after,#buybar a.btn.buybar-cta::after{content:none}
#buy a.btn.ep-btn[data-buy=product],#lastcall a.btn.ep-btn[data-buy=ready]{font-size:29px;line-height:1.25;padding:22px 30px 20px}
#lastcall a.btn.ep-btn[data-buy=ready]{max-width:100%;white-space:normal;text-wrap:balance}
#xi a.btn.ep-btn[data-buy=exit],.xi a.btn.ep-btn[data-buy=exit]{font-size:24px;line-height:1.25;padding:18px 16px 16px}
#buybar a.btn.buybar-cta{font-size:17px;line-height:1.2;padding:14px 20px}
@media (max-width:640px){#buy a.btn.ep-btn[data-buy=product],#lastcall a.btn.ep-btn[data-buy=ready]{font-size:26px;padding:18px 18px 16px}}
@media (prefers-reduced-motion:reduce){a.vhero-cta,a.btn.ep-btn[data-buy],#buybar a.btn.buybar-cta{transition:none}a.vhero-cta:hover,a.btn.ep-btn[data-buy]:hover,#buybar a.btn.buybar-cta:hover{transform:none}}
/* the hero CTA's shape, the Cruiser's .vsl-cta: 29px / 1.25, 22 30 20,
   radius 14, the small line 18px / 1.5; phones 26px, 18 18 16, 16px */
.vhero-cta{font-size:29px;line-height:1.25;padding:22px 30px 20px;border-radius:14px}
.vhero-cta small{font-size:18px;line-height:1.5;margin-top:8px;text-wrap:balance}
@media (max-width:640px){
  .vhero-cta{font-size:26px;padding:18px 18px 16px}
  .vhero-cta small{font-size:16px}
}