/* =========================================================
   RECORDA — site styles
   White page, dark navy text. Mint for soft sections and tape.
   Navy for buttons and links. REC red for the record dot only.
   ========================================================= */
:root{
  --white:#FFFFFF; --tint:#F2F9F3; --mint:#B3DEB7; --mint-d:#6FA77A; --mint-l:#E4F3E6;
  --navy:#4A4C87; --navy-d:#373970; --ink:#2B2D4A; --soft:#5D6078;
  --line:#E2E9E3; --taupe:#AEB8B1; --night:#1E2036; --rec:#E4572E; --stamp:#F29A4B;
  --lilac:#CFD0EC;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', 'Helvetica Neue', Arial, sans-serif;
  --cam:'DM Mono', ui-monospace, Menlo, monospace;
  --hand:'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
  --header-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --spring:cubic-bezier(.2,.9,.25,1.15);
}
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px); -webkit-text-size-adjust:100%; }
html.menu-open{ overflow:hidden; }
body{ margin:0; font-family:var(--sans); font-size:17px; line-height:1.65; color:var(--ink); background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:clip; }
h1,h2,h3,p,ul,ol,figure,fieldset,legend,blockquote{ margin:0; padding:0; }
fieldset{ border:0; min-width:0; }
img,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; }
:focus-visible{ outline:3px solid var(--navy); outline-offset:3px; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-60px; background:var(--ink); color:#fff; padding:10px 16px; z-index:200; border-radius:4px; }
.skip:focus{ top:12px; }
.hide{ display:none !important; }

/* ---------- Layout ---------- */
.sec{ padding:104px 24px; position:relative; }
.white{ background:var(--white); } .tint{ background:var(--tint); } .mint{ background:var(--mint); }
.navy{ background:var(--navy); color:#fff; }
.in{ max-width:1140px; margin:0 auto; }
.narrow{ max-width:780px; margin:0 auto; }
.head{ display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center; max-width:680px; margin:0 auto 56px; }
.stack{ display:flex; flex-direction:column; gap:20px; }
.center{ text-align:center; align-items:center; }
.split{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.08fr); gap:56px; align-items:center; }
.three{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.note{ text-align:center; margin-top:36px; }

/* ---------- Type ---------- */
.h1{ font-family:var(--serif); font-weight:600; font-size:clamp(2.55rem,5.6vw,4.4rem); line-height:1.03; letter-spacing:-.018em; text-wrap:balance; }
.h2{ font-family:var(--serif); font-weight:600; font-size:clamp(2rem,4.2vw,3rem); line-height:1.08; letter-spacing:-.012em; text-wrap:balance; }
.h3{ font-family:var(--serif); font-weight:600; font-size:1.42rem; line-height:1.22; }
.h1 em, .h2 em, .h3 em{ font-style:italic; font-weight:500; color:var(--navy); }
.navy .h2, .navy .h1{ color:#fff; } .navy .h2 em, .navy .h1 em{ color:var(--mint); }
.lead{ font-size:1.2rem; max-width:540px; color:var(--soft); }
.navy .lead, .navy p{ color:#E6E7F5; }
.soft{ color:var(--soft); }
.small{ font-size:.95rem; color:var(--soft); }
.center .lead, .head .lead{ margin-left:auto; margin-right:auto; }
.eyebrow{ display:inline-flex; align-items:center; gap:10px; font:500 .8rem/1.3 var(--cam); letter-spacing:.18em; text-transform:uppercase; color:var(--soft); }
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--rec); flex:none; animation:blink 1.6s steps(1) infinite; }
.hand{ font-family:var(--hand); font-weight:600; }

/* ---------- Buttons ---------- */
.btns{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 14px; }
.center .btns{ justify-content:center; }
.btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; text-align:center; min-height:54px; padding:14px 32px; border-radius:999px; background:var(--navy); border:1.5px solid var(--navy); color:#fff; font:600 1rem/1.2 var(--sans); text-decoration:none; cursor:pointer; white-space:nowrap; transition:background .2s, border-color .2s, color .2s, transform .25s var(--ease), box-shadow .25s; }
.btn:hover{ background:var(--navy-d); border-color:var(--navy-d); transform:translateY(-2px); box-shadow:0 14px 26px -14px rgba(55,57,112,.75); }
.btn:active{ transform:translateY(0); box-shadow:none; }
.btn.line{ background:#fff; color:var(--navy); }
.btn.line:hover{ background:var(--navy); color:#fff; }
.btn.light{ background:#fff; border-color:#fff; color:var(--navy); }
.btn.light:hover{ background:var(--mint); border-color:var(--mint); color:var(--ink); }
.btn .arr{ transition:transform .25s var(--ease); }
.btn:hover .arr{ transform:translateX(4px); }
.link{ display:inline-flex; align-items:center; min-height:44px; font-weight:600; color:var(--ink); text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1.5px; text-decoration-color:var(--mint-d); transition:text-underline-offset .2s; }
.link:hover{ text-underline-offset:8px; }

/* ---------- Logo ---------- */
.logo{ display:inline-flex; align-items:center; gap:10px; margin-right:auto; font:600 1.5rem/1 var(--serif); letter-spacing:-.01em; color:var(--navy); text-decoration:none; white-space:nowrap; }
.logo em{ font-style:italic; font-weight:500; }
.logo .mark{ width:38px; height:auto; flex:none; overflow:visible; }
.mark .heart{ fill:var(--heart, var(--navy)); }
.mark .recdot{ fill:var(--rec); animation:blink 1.6s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ---------- Header ---------- */
/* No backdrop-filter here: it would trap the full-screen mobile menu inside the header bar */
.site-header{ position:sticky; top:0; z-index:90; background:#fff; border-bottom:1px solid var(--line); }
.hbar{ max-width:1140px; margin:0 auto; height:var(--header-h); padding:0 24px; display:flex; align-items:center; gap:24px; }
.hbar > .logo, .hbar > .ig, .hbar > .hbtn, .menu summary{ position:relative; z-index:2; }
.nav{ display:flex; gap:28px; }
.nav a{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink); text-decoration:none; font-weight:500; background:linear-gradient(var(--mint-d),var(--mint-d)) left bottom/0 2px no-repeat; transition:background-size .3s var(--ease); }
.nav a:hover, .nav a[aria-current="page"]{ background-size:100% 2px; }
.ig{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; transition:background .2s; }
.ig:hover{ background:var(--tint); }
.ig img{ width:22px; height:22px; }
.hbtn{ min-height:46px; padding:10px 24px; font-size:.95rem; }

/* ---------- Mobile menu ---------- */
.menu{ display:none; }
.menu summary{ list-style:none; cursor:pointer; width:46px; height:46px; display:flex; align-items:center; justify-content:center; border-radius:50%; }
.menu summary::-webkit-details-marker{ display:none; }
.menu .x{ display:none; } .menu[open] .x{ display:block; } .menu[open] .burger{ display:none; }
.menu:not([open]) .panel{ display:none; }
.panel{ position:fixed; inset:0; z-index:1; overflow-y:auto; padding:calc(var(--header-h) + 28px) 28px 36px; display:flex; flex-direction:column; gap:28px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(18px) saturate(1.1); backdrop-filter:blur(18px) saturate(1.1); animation:fade .3s ease both; }
.panel nav{ display:flex; flex-direction:column; }
.panel nav a{ display:flex; align-items:center; gap:14px; font:600 clamp(2rem,9vw,2.6rem)/1.15 var(--serif); color:var(--ink); text-decoration:none; padding:12px 0; border-bottom:1px solid var(--line); animation:rise .5s var(--ease) both; animation-delay:calc(var(--i) * 60ms + 80ms); }
.panel nav a[aria-current="page"]::before{ content:""; width:10px; height:10px; border-radius:50%; background:var(--rec); flex:none; }
.panel .btn{ width:100%; animation:rise .5s var(--ease) both; animation-delay:.36s; }
.pmeta{ display:flex; flex-direction:column; gap:4px; animation:rise .5s var(--ease) both; animation-delay:.42s; }
.pmeta a{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); font-weight:500; text-decoration:none; }
.pmeta img{ width:22px; height:22px; }
.pmeta .cam{ font:500 .9rem/1 var(--cam); letter-spacing:.04em; color:var(--soft); margin-top:8px; }
@keyframes fade{ from{ opacity:0; } }
@keyframes rise{ from{ opacity:0; transform:translateY(14px); } }

/* =========================================================
   HERO + LIVE VIEWFINDER
   ========================================================= */
.hero{ padding-top:64px; padding-bottom:88px; overflow:hidden; }
.hero::before{ content:""; position:absolute; z-index:0; right:-12%; top:-20%; width:62%; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, var(--mint-l), rgba(228,243,230,0)); pointer-events:none; }
.hero > *{ position:relative; z-index:1; }
.kicker{ display:flex; align-items:center; gap:10px; font:500 .8rem/1.3 var(--cam); letter-spacing:.14em; text-transform:uppercase; color:var(--soft); }
.kicker::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--rec); flex:none; animation:blink 1.6s steps(1) infinite; }
.bens{ list-style:none; display:grid; grid-template-columns:repeat(2,minmax(0,max-content)); gap:12px 26px; }
.bens li{ display:flex; align-items:center; gap:10px; font-weight:500; font-size:.98rem; }
.bens li::before{ content:""; flex:none; width:24px; height:24px; border-radius:50%; background:var(--mint-l) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%234A4C87' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; box-shadow:inset 0 0 0 1px var(--mint); }
.bens li.big{ grid-column:1 / -1; }
.bens li.big b{ color:var(--navy); }

/* The camcorder screen */
.vf{ position:relative; width:100%; aspect-ratio:4/3; border-radius:26px; background:var(--night); padding:14px; box-shadow:0 40px 70px -40px rgba(30,32,54,.55), 0 0 0 1px rgba(30,32,54,.06); isolation:isolate; }
.vf-screen{ position:relative; width:100%; height:100%; border-radius:16px; overflow:hidden; background:#222; }
.vf-reel{ position:absolute; inset:-2%; animation:handheld 9s ease-in-out infinite; }
@keyframes handheld{ 0%,100%{ transform:translate(0,0) rotate(0); } 25%{ transform:translate(-.6%,.4%) rotate(-.25deg); } 50%{ transform:translate(.4%,-.5%) rotate(.2deg); } 75%{ transform:translate(.5%,.3%) rotate(-.1deg); } }
.clip{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; }
.clip.on{ opacity:1; }
.clip video, .clip img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
/* Placeholder "footage" until real clips are added */
.ph{ position:absolute; inset:0; overflow:hidden; background:linear-gradient(160deg, var(--a,#F4D3B5) 0%, var(--b,#C9A6A0) 48%, var(--c,#4E5A6B) 100%); }
.ph::before{ content:""; position:absolute; inset:-15%;
  background:
   radial-gradient(circle at 20% 30%, rgba(255,255,255,.55), transparent 7%),
   radial-gradient(circle at 70% 20%, rgba(255,240,210,.5), transparent 9%),
   radial-gradient(circle at 55% 62%, rgba(255,255,255,.35), transparent 11%),
   radial-gradient(circle at 84% 72%, rgba(255,214,170,.45), transparent 8%),
   radial-gradient(circle at 32% 78%, rgba(255,255,255,.28), transparent 6%),
   radial-gradient(circle at 12% 58%, rgba(255,230,200,.4), transparent 5%);
  filter:blur(2px); animation:drift 14s ease-in-out infinite alternate; }
.ph::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.42)); }
.ph span{ position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:1; text-align:center; font:600 clamp(1.5rem,3vw,2.2rem)/1.1 var(--hand); color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.35); padding:0 12px; }
@keyframes drift{ from{ transform:translate3d(-3%,2%,0) scale(1); } to{ transform:translate3d(3%,-2%,0) scale(1.1); } }
/* On-screen camcorder text */
.osd{ position:absolute; inset:0; z-index:2; pointer-events:none; font:500 clamp(.72rem,1.25vw,.95rem)/1 var(--cam); letter-spacing:.08em; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.55); }
.osd::before{ content:""; position:absolute; inset:18px;
  background:
   linear-gradient(#fff,#fff) top left/22px 2px no-repeat, linear-gradient(#fff,#fff) top left/2px 22px no-repeat,
   linear-gradient(#fff,#fff) top right/22px 2px no-repeat, linear-gradient(#fff,#fff) top right/2px 22px no-repeat,
   linear-gradient(#fff,#fff) bottom left/22px 2px no-repeat, linear-gradient(#fff,#fff) bottom left/2px 22px no-repeat,
   linear-gradient(#fff,#fff) bottom right/22px 2px no-repeat, linear-gradient(#fff,#fff) bottom right/2px 22px no-repeat; opacity:.85; }
.osd > span{ position:absolute; }
.osd .rec{ top:34px; left:38px; display:flex; align-items:center; gap:8px; }
.osd .rec::before{ content:""; width:11px; height:11px; border-radius:50%; background:var(--rec); animation:blink 1s steps(1) infinite; }
.osd .tc{ margin-left:6px; opacity:.92; }
.osd .bat{ top:34px; right:38px; display:flex; align-items:center; gap:9px; }
.osd .bat::after{ content:""; width:24px; height:12px; border:2px solid currentColor; border-radius:2px; padding:1px; box-sizing:border-box; background:linear-gradient(90deg, currentColor 0 70%, transparent 0) content-box; }
.osd .who{ left:38px; bottom:34px; text-transform:uppercase; transition:opacity .4s; }
.osd .stamp{ right:38px; bottom:34px; color:var(--stamp); }
.osd .zoom{ left:50%; top:34px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; opacity:.85; }
.osd .zoom i{ position:relative; width:70px; height:2px; background:rgba(255,255,255,.7); }
.osd .zoom i::after{ content:""; position:absolute; top:-4px; left:30%; width:2px; height:10px; background:#fff; animation:zoom 7s ease-in-out infinite; }
@keyframes zoom{ 0%,100%{ left:22%; } 50%{ left:58%; } }
/* Turn-on flash when the viewfinder appears */
.vf.power .vf-screen{ animation:power 1.1s ease both; }
@keyframes power{ 0%{ filter:brightness(2.4) contrast(.4) blur(4px); } 35%{ filter:brightness(.55) blur(1px); } 100%{ filter:none; } }
.vf-note{ margin-top:14px; text-align:center; font-size:.85rem; color:var(--soft); }
.vf-tag{ position:absolute; z-index:3; right:-16px; top:-22px; transform:rotate(5deg); background:#fff; padding:10px 16px 8px; box-shadow:0 14px 30px -14px rgba(30,32,54,.45); font:600 1.35rem/1 var(--hand); color:var(--navy); }
.vf-tag::before{ content:""; position:absolute; top:-10px; left:50%; width:58px; height:20px; margin-left:-29px; background:var(--mint); opacity:.9; transform:rotate(4deg); }

/* =========================================================
   SCROLLING TAPE STRIP
   ========================================================= */
.strip{ position:relative; padding:34px 0; overflow:hidden; background:var(--white); }
.strip-band{ position:relative; background:var(--navy); padding:26px 0; box-shadow:0 24px 40px -30px rgba(30,32,54,.6); }
.strip-band::before, .strip-band::after{ content:""; position:absolute; left:0; right:0; height:10px; background:repeating-linear-gradient(90deg, #fff 0 12px, transparent 12px 26px); opacity:.95; }
.strip-band::before{ top:8px; } .strip-band::after{ bottom:8px; }
.strip-track{ display:flex; align-items:center; gap:14px; width:max-content; animation:marquee 46s linear infinite paused; will-change:transform; backface-visibility:hidden; }
.strip-track.go{ animation-play-state:running; }
.strip-track.go.off{ animation-play-state:paused; }
@media (hover:hover){ .strip:hover .strip-track.go{ animation-play-state:paused; } }
@keyframes marquee{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
.frame{ position:relative; flex:none; width:190px; aspect-ratio:16/10; border-radius:6px; overflow:hidden; }
.frame .ph span{ font-size:1.3rem; }
.frame .tcode{ position:absolute; z-index:2; left:8px; bottom:6px; font:500 .72rem/1 var(--cam); color:var(--stamp); text-shadow:0 0 3px rgba(0,0,0,.6); }
.strip-note{ flex:none; width:200px; text-align:center; font:600 1.75rem/1.05 var(--hand); color:var(--mint); padding:0 6px; }
.strip-note::after{ content:"♥"; display:block; font-size:1rem; margin-top:4px; color:var(--rec); font-family:var(--sans); }

/* =========================================================
   STEPS + SPEED
   ========================================================= */
.steps3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; counter-reset:s; }
.step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 28px; display:flex; flex-direction:column; gap:10px; transition:transform .35s var(--ease), box-shadow .35s; }
.step:hover{ transform:translateY(-6px); box-shadow:0 26px 40px -30px rgba(43,45,74,.45); }
.n6{ font:italic 500 3rem/1 var(--serif); color:var(--mint-d); letter-spacing:-.02em; }
.when{ align-self:flex-start; margin-top:6px; font:500 .78rem/1.2 var(--cam); letter-spacing:.06em; text-transform:uppercase; color:var(--navy); background:var(--mint-l); padding:7px 12px; border-radius:999px; }
.step-ico{ width:46px; height:46px; color:var(--navy); }

.bar-lbl{ display:flex; justify-content:space-between; gap:12px; font-size:.95rem; margin-bottom:8px; color:#E6E7F5; }
.bar-lbl b{ color:#fff; font-weight:600; white-space:nowrap; }
.bar{ height:16px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.bar i{ display:block; height:100%; width:var(--w); border-radius:999px; background:rgba(255,255,255,.4); transform-origin:left; }
.bar.us i{ background:var(--mint); }
.rv-ready .bars .bar i{ transform:scaleX(0); transition:transform 1.4s var(--ease) .2s; }
.rv-ready .bars.shown .bar i{ transform:scaleX(1); }
.rv-ready .bars.shown .bar.us i{ transition-delay:.9s; }
/* ---------- Videographer vs. your guests ---------- */
.vs{ overflow:hidden; }
.vs::before{ content:""; position:absolute; right:-140px; top:-140px; width:420px; height:420px; border-radius:50%; background:rgba(179,222,183,.10); pointer-events:none; }
.vs .eyebrow{ color:var(--mint); }
.duels{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; max-width:1000px; margin:0 auto 26px; }
.duel{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:22px; padding:26px 28px; display:flex; flex-direction:column; gap:16px; }
.duel-q{ font:500 .78rem/1.3 var(--cam); letter-spacing:.14em; text-transform:uppercase; color:var(--mint) !important; }
.duel-win{ align-self:flex-start; font:600 1.5rem/1 var(--hand); color:var(--ink) !important; background:var(--mint); padding:7px 14px 5px; border-radius:6px; transform:rotate(-2deg); }
.vs-table{ position:relative; max-width:1000px; margin:30px auto 0; background:#fff; color:var(--ink); border-radius:24px; box-shadow:0 30px 60px -40px rgba(0,0,0,.55); padding:0 0 4px; }
.vs-row{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,1fr) minmax(0,1.12fr); }
.vs-row > p{ margin:0; display:flex; gap:12px; align-items:center; padding:20px 24px; color:var(--ink) !important; border-top:1px solid var(--line); }
.vs-row svg{ flex:none; width:24px; height:24px; border-radius:50%; padding:4px; }
.vs-lbl{ font:600 1.02rem/1.3 var(--serif); }
.vs-them{ color:var(--soft) !important; }
.vs-them svg{ color:#9A9DB3; background:#EEF0F4; }
/* The Recorda column: one raised mint column with a navy outline */
.vs-row > .vs-us{ position:relative; background:var(--tint); font-weight:500; border-left:2px solid var(--navy); border-right:2px solid var(--navy); margin:0 18px 0 0; border-top-color:#DCEBDD; }
.vs-us svg{ color:var(--navy); background:var(--mint); }
.vs-row:last-child > .vs-us{ border-bottom:2px solid var(--navy); border-radius:0 0 20px 20px; margin-bottom:-22px; padding-bottom:30px; box-shadow:0 26px 34px -26px rgba(43,45,74,.5); }
.vs-table{ margin-bottom:22px; }
/* Header row */
.vs-headrow > p{ border-top:0; padding-top:30px; padding-bottom:24px; align-items:flex-end; }
.vs-headrow .vs-lbl{ font:500 .76rem/1.3 var(--cam); letter-spacing:.14em; text-transform:uppercase; color:var(--soft) !important; }
.vs-headrow .vs-them > span:last-child, .vs-headrow .vs-logo{ display:flex; flex-direction:column; gap:4px; font:600 1.25rem/1.15 var(--serif); }
.vs-logo > span{ white-space:nowrap; }
.vs-headrow .vs-them > span:last-child{ color:var(--soft); }
.vs-headrow small{ font:500 .9rem/1.2 var(--sans); color:var(--soft); }
.vs-hico{ flex:none; width:46px; height:46px; border-radius:14px; display:flex; align-items:center; justify-content:center; }
.vs-hico svg{ width:28px; height:auto; padding:0; border-radius:0; background:none !important; }
.vs-them .vs-hico{ background:#EEF0F4; color:#8D90A8; }
.vs-them .vs-hico svg{ color:#8D90A8; }
.vs-headrow > .vs-us{ background:var(--mint); border-top:2px solid var(--navy); border-radius:20px 20px 0 0; margin-top:-22px; padding-top:44px; }
.vs-us .vs-hico{ background:#fff; }
.vs-us .vs-hico svg{ width:32px; color:var(--navy); }
.vs-logo{ color:var(--navy); }
.vs-logo em{ font-style:italic; font-weight:500; color:var(--navy); }
.vs-headrow .vs-us small{ color:var(--ink); font-weight:600; }
.vs-pick{ position:absolute; top:-15px; left:50%; transform:translateX(-50%) rotate(-2deg); background:var(--navy); color:#fff; font:600 1.3rem/1 var(--hand); padding:7px 16px 5px; border-radius:6px; white-space:nowrap; box-shadow:0 8px 16px -10px rgba(0,0,0,.5); }
.vs-row:not(.vs-headrow):hover > p{ background:#FAFBFD; }
.vs-row:not(.vs-headrow):hover > .vs-us{ background:#E8F5EA; }
.vs-foot{ display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; margin-top:36px; }
.vs-foot p{ color:#E6E7F5; }
.vs-src{ font-size:.8rem; color:#B9BCDA !important; max-width:560px; }

/* =========================================================
   CAMCORDER PRINTS POLAROIDS
   ========================================================= */
.board{ position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px 26px; margin-top:26px; }
.pol{ position:relative; background:#fff; padding:12px 12px 16px; box-shadow:0 18px 34px -18px rgba(43,45,74,.35); transform:rotate(var(--r,0deg)); transition:transform .4s var(--ease), box-shadow .4s; }
.pol:hover{ transform:rotate(0) scale(1.04); box-shadow:0 26px 44px -20px rgba(43,45,74,.45); z-index:2; }
.pol .tape{ position:absolute; top:-12px; left:50%; width:92px; height:26px; margin-left:-46px; background:var(--tc,var(--mint)); opacity:.88; transform:rotate(-3deg); }
.pol .tape::before, .pol .tape::after{ content:""; position:absolute; top:0; bottom:0; width:6px; background:repeating-linear-gradient(180deg, transparent 0 3px, rgba(255,255,255,.7) 3px 5px); }
.pol .tape::before{ left:-3px; } .pol .tape::after{ right:-3px; }
.pol .pic{ position:relative; aspect-ratio:1; overflow:hidden; background:#E8EDE9; }
.pol .pic .ph, .pol .pic video, .pol .pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pol .pic .ph span{ font-size:1.25rem; opacity:0; }
.pol .ds{ position:absolute; z-index:2; right:9px; bottom:7px; font:500 .8rem/1 var(--cam); color:var(--stamp); text-shadow:0 0 4px rgba(0,0,0,.5); }
.pol .cap{ margin-top:10px; text-align:center; font:600 1.65rem/1.05 var(--hand); color:var(--navy); }
.pol .by{ margin-top:4px; text-align:center; font:500 .7rem/1.3 var(--cam); letter-spacing:.1em; text-transform:uppercase; color:var(--soft); }
/* Polaroids drop onto the board and "develop" as you scroll to them */
.js .board .pol{ opacity:0; transform:translateY(-40px) rotate(calc(var(--r,0deg) * -2)) scale(.94); }
.js .board .pol.out{ opacity:1; transform:rotate(var(--r,0deg)); transition:transform 1s var(--spring), opacity .5s ease; }
.js .board .pol.out:hover{ transform:rotate(0) scale(1.04); transition:transform .4s var(--ease); }
.js .board .pol .pic > *:first-child{ opacity:0; transition:opacity 2.4s ease .8s; }
.js .board .pol.out .pic > *:first-child{ opacity:1; }
.moments-note{ text-align:center; margin-top:40px; font-size:.9rem; color:var(--soft); }

/* =========================================================
   PACKAGES
   ========================================================= */
.founding{ max-width:620px; margin:0 auto 40px; text-align:center; background:#fff; border:2px dashed var(--navy); border-radius:18px; padding:16px 22px; display:flex; flex-direction:column; gap:4px; }
.founding-title{ font:600 1.3rem/1.25 var(--serif); color:var(--navy); }
.founding p:not(.founding-title){ color:var(--soft); font-size:.98rem; }
.pkgs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; max-width:980px; margin:0 auto; align-items:stretch; }
.pk{ position:relative; background:#fff; border:1.5px solid var(--line); border-radius:26px; padding:38px 34px 32px; display:flex; flex-direction:column; transition:transform .35s var(--ease), box-shadow .35s; }
.pk:hover{ transform:translateY(-6px); box-shadow:0 30px 50px -36px rgba(43,45,74,.5); }
.pk.best{ border:2px solid var(--navy); box-shadow:0 26px 50px -34px rgba(74,76,135,.55); }
.pk-badge{ position:absolute; top:-15px; left:34px; background:var(--navy); color:#fff; font:600 .82rem/1 var(--sans); padding:8px 14px; border-radius:999px; }
.pk-tag{ font:500 .76rem/1.3 var(--cam); letter-spacing:.12em; text-transform:uppercase; color:var(--mint-d); }
.pk-name{ font:600 1.9rem/1.15 var(--serif); margin-top:6px; }
.pk-name em{ font-style:italic; font-weight:500; color:var(--navy); }
.pk-for{ color:var(--soft); margin-top:4px; }
.cams{ display:inline-flex; align-self:flex-start; align-items:center; gap:8px; margin:18px 0 20px; padding:7px 14px; border-radius:999px; background:var(--mint-l); box-shadow:inset 0 0 0 1px var(--mint); font-weight:600; font-size:.95rem; }
.cams svg{ width:24px; height:auto; color:var(--navy); }
.pk-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; }
.pk-price b{ font:600 3.4rem/1 var(--serif); letter-spacing:-.02em; }
.pk-was{ color:var(--soft); }
.pk-was s, .optprice s{ text-decoration-thickness:2px; text-decoration-color:var(--rec); }
.pk-save{ align-self:flex-start; margin:10px 0 22px; padding:4px 11px; border-radius:8px; background:var(--mint-l); color:#2E6B3A; font-weight:600; font-size:.92rem; }
.pk .checks{ margin-bottom:28px; flex:1; }
.pk .checks li.plus{ font-weight:600; }
.pk .btn{ width:100%; margin-top:auto; }
.pk-foot{ text-align:center; margin-top:30px; display:flex; flex-direction:column; gap:4px; font-size:.95rem; color:var(--soft); }

/* ---------- Lists ---------- */
.checks{ list-style:none; display:flex; flex-direction:column; gap:12px; }
.checks li{ position:relative; padding-left:34px; }
.checks li::before{ content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%234A4C87' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat; }

/* ---------- Covered ---------- */
.cover{ background:#fff; border-radius:22px; padding:30px 28px; display:flex; flex-direction:column; gap:10px; transition:transform .35s var(--ease); }
.cover:hover{ transform:translateY(-4px); }
.cover-ico{ width:48px; height:48px; border-radius:14px; background:var(--mint-l); display:flex; align-items:center; justify-content:center; color:var(--navy); }
.cover-ico svg{ width:26px; height:26px; }

/* ---------- Story ---------- */
.story{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:100px; align-items:center; max-width:980px; margin:0 auto; }
.story-pics{ position:relative; max-width:360px; margin:0 auto 40px; width:100%; }
.story .pol{ width:100%; }
.story .pol-small{ position:absolute; width:46%; right:-13%; bottom:-15%; z-index:2; }
.story-pics > .pol:first-child .cap{ text-align:left; padding-left:6px; }
.story .pol-small .cap{ font-size:1.3rem; }
.pol .pic picture, .pol .pic picture img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.maker{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); max-width:980px; }
.maker .pol{ max-width:380px; width:100%; margin:0 auto; }
.maker .pol .pic{ aspect-ratio:4/5; }
.story .pol .pic{ aspect-ratio:4/5; }
.story .pol .pic img{ object-position:50% 20%; }
.story .sig{ font:600 2.2rem/1 var(--hand); color:var(--navy); }
.bigquote{ max-width:640px; margin:64px auto 0; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.bigquote::before{ content:""; width:56px; height:2px; background:var(--mint-d); margin-bottom:12px; }
.bigquote blockquote{ font:italic 500 clamp(1.6rem,3.4vw,2.2rem)/1.3 var(--serif); color:var(--navy); text-wrap:balance; }
.bigquote figcaption{ font:600 1.6rem/1 var(--hand); color:var(--navy); }

/* ---------- FAQ ---------- */
.faq{ border-bottom:1px solid var(--line); }
.faq details{ border-top:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; position:relative; padding:22px 48px 22px 0; font-weight:600; font-size:1.06rem; transition:color .2s; }
.faq summary:hover{ color:var(--navy); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; position:absolute; right:4px; top:50%; width:32px; height:32px; margin-top:-16px; border-radius:50%; background:var(--mint-l); display:flex; align-items:center; justify-content:center; font-size:1.4rem; font-weight:400; line-height:1; color:var(--navy); transition:transform .3s var(--ease), background .2s; }
.faq details[open] summary::after{ transform:rotate(45deg); background:var(--mint); }
.faq details > p{ padding:0 48px 24px 0; color:var(--soft); }
.faq details[open] > p{ animation:rise .4s var(--ease); }
.faqgroup{ display:flex; flex-direction:column; gap:16px; margin-bottom:56px; }

/* ---------- Film embed ---------- */
.film{ position:relative; aspect-ratio:16/9; width:100%; background:var(--night); border-radius:20px; overflow:hidden; }
.film button{ position:absolute; inset:0; width:100%; height:100%; border:0; background:transparent; color:#fff; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; font:600 1rem var(--sans); }
.film img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.film button::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(30,32,54,.05) 40%, rgba(30,32,54,.55)); }
.film button:hover img{ transform:scale(1.03); }
.film .play, .film .cap{ z-index:2; }
.film .play{ position:relative; width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; transition:transform .25s var(--ease); }
.film button:hover .play{ transform:scale(1.08); }
.film .play{ width:86px; height:86px; box-shadow:0 0 0 10px rgba(255,255,255,.25); }
.film .play::after{ content:""; margin-left:6px; border-style:solid; border-width:14px 0 14px 22px; border-color:transparent transparent transparent var(--navy); }
.film .cap{ position:relative; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.film iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.filmwrap{ position:relative; max-width:960px; margin:0 auto; }
.filmsec .film{ border-radius:22px; box-shadow:0 40px 70px -40px rgba(30,32,54,.55); border:10px solid var(--night); }
.film .cap{ font:600 1.6rem/1 var(--hand); }
.film-tag{ position:absolute; z-index:3; left:-14px; top:-18px; transform:rotate(-5deg); background:#fff; padding:8px 16px 6px; box-shadow:0 12px 26px -14px rgba(30,32,54,.45); font:600 1.35rem/1 var(--hand); color:var(--navy); }
.film-tag::before{ content:""; position:absolute; top:-10px; left:50%; width:54px; height:18px; margin-left:-27px; background:var(--mint); opacity:.9; transform:rotate(3deg); }
.film-yt{ text-align:center; margin-top:14px; font-size:.92rem; }
.film-yt a{ color:var(--soft); text-underline-offset:4px; }
.film-note{ margin-top:30px; }
.frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
video.lv{ background:#222; }

/* ---------- Testimonials (hidden until real ones are added) ---------- */
.quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; }
.quote{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px; display:flex; flex-direction:column; gap:16px; }
.quote blockquote{ font:500 1.2rem/1.45 var(--serif); }
.quote blockquote::before{ content:"“"; display:block; font:600 3rem/.6 var(--serif); color:var(--mint-d); margin-bottom:10px; }
.quote figcaption{ font-weight:600; }
.quote figcaption span{ display:block; font-weight:400; font-size:.92rem; color:var(--soft); }

/* ---------- Package builder ---------- */
.builder{ display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:32px; align-items:start; }
.bsteps{ display:flex; flex-direction:column; gap:22px; }
.bstep{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px; }
.bstep legend{ float:left; width:100%; display:flex; align-items:center; gap:14px; margin-bottom:6px; font:600 1.45rem/1.2 var(--serif); }
.bstep legend + *{ clear:both; }
.bhint{ clear:both; color:var(--soft); margin-bottom:18px; }
.bnum{ width:34px; height:34px; border-radius:50%; background:var(--mint); color:var(--ink); font:600 1rem/1 var(--sans); display:inline-flex; align-items:center; justify-content:center; flex:none; }
.opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.opt{ position:relative; display:block; cursor:pointer; }
.opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.optbody{ position:relative; display:flex; flex-direction:column; gap:6px; height:100%; padding:20px 52px 20px 20px; border:1.5px solid var(--line); border-radius:16px; background:#fff; transition:border-color .2s, background .2s, box-shadow .2s, transform .25s var(--ease); }
.opt:hover .optbody{ border-color:var(--navy); transform:translateY(-2px); }
.optbody::after{ content:""; position:absolute; top:20px; right:18px; width:22px; height:22px; border:1.5px solid var(--taupe); border-radius:50%; background:#fff; transition:all .2s; }
.opt input:checked + .optbody{ border-color:var(--navy); background:var(--tint); box-shadow:inset 0 0 0 1px var(--navy); }
.opt input:checked + .optbody::after{ border-color:var(--navy); background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.opt input:focus-visible + .optbody{ outline:3px solid var(--navy); outline-offset:3px; }
.optname{ font:600 1.25rem/1.25 var(--serif); }
.optprice{ font-weight:600; }
.optprice s{ margin-left:6px; font-weight:400; color:var(--soft); }
.optcams{ align-self:flex-start; font:500 .74rem/1.2 var(--cam); letter-spacing:.08em; text-transform:uppercase; color:var(--navy); background:var(--mint-l); padding:5px 9px; border-radius:999px; }
.optbody .small{ font-size:.92rem; }
.days{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 20px; margin-top:12px; padding:18px; border:1.5px dashed var(--taupe); border-radius:14px; }
.stepper{ display:flex; align-items:center; gap:6px; }
.stepper button{ width:44px; height:44px; border-radius:50%; border:1.5px solid var(--ink); background:#fff; color:var(--ink); font:600 1.4rem/1 var(--sans); cursor:pointer; transition:background .2s; }
.stepper button:hover{ background:var(--mint-l); }
.stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.stepper output{ min-width:2ch; text-align:center; font:600 1.4rem/1 var(--serif); }
.bsum{ position:sticky; top:calc(var(--header-h) + 20px); background:#fff; border:2px solid var(--navy); border-radius:22px; padding:28px; display:flex; flex-direction:column; gap:16px; }
.bsum .lines{ list-style:none; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); padding-top:14px; }
.bsum .lines li{ display:flex; justify-content:space-between; gap:12px; }
.bsum .lines li span:last-child{ font-weight:600; white-space:nowrap; }
.total{ display:flex; justify-content:space-between; align-items:baseline; border-top:2px solid var(--ink); padding-top:14px; }
.total strong{ font:600 2.6rem/1 var(--serif); }
.total strong.bump{ animation:bump .35s var(--ease); }
@keyframes bump{ 40%{ transform:scale(1.06); } }
.bsum .btn{ width:100%; }
.bsum .pk-save{ margin:0; }
.bbar{ display:none; }
.label{ font-weight:600; font-size:.95rem; color:var(--soft); }
.inc{ gap:9px; font-size:.95rem; }
.inc li{ padding-left:30px; } .inc li::before{ width:20px; height:20px; top:2px; background-size:13px; }
.guar{ font-size:.92rem; padding:14px 16px; border-radius:12px; background:var(--mint-l); }
.picked{ background:#fff; border:2px solid var(--navy); border-radius:14px; padding:16px 18px; }

/* ---------- How-it-works page ---------- */
.steplist .row{ display:grid; grid-template-columns:80px minmax(0,1fr); gap:24px; padding:34px 0; border-top:1px solid var(--line); }
.steplist .row:last-child{ border-bottom:1px solid var(--line); }
.moments{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.moment{ background:#fff; border-radius:20px; padding:26px; display:flex; flex-direction:column; gap:6px; transition:transform .3s var(--ease); }
.moment:hover{ transform:translateY(-4px); }
.kit{ background:#fff; border:1px solid var(--line); border-radius:24px; padding:34px; }

/* ---------- Forms ---------- */
.form{ display:flex; flex-direction:column; gap:16px; }
.field{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.field label{ font-weight:600; font-size:.95rem; }
.field input, .field textarea{ font:inherit; color:var(--ink); background:#fff; border:1.5px solid var(--taupe); border-radius:12px; padding:13px 16px; min-height:52px; width:100%; transition:border-color .2s, box-shadow .2s; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(74,76,135,.18); }
.field textarea{ min-height:130px; resize:vertical; }

/* ---------- Footer ---------- */
.site-footer{ background:var(--night); color:#fff; padding:76px 24px 32px; }
.fgrid{ max-width:1140px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; }
.fcol{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.flabel{ font:500 .78rem/1.3 var(--cam); letter-spacing:.14em; text-transform:uppercase; color:var(--mint); margin-bottom:4px; }
.site-footer a:not(.btn){ color:#fff; text-decoration:none; min-height:32px; display:inline-flex; align-items:center; }
.site-footer a:not(.btn):hover{ text-decoration:underline; text-underline-offset:4px; }
.site-footer .logo{ color:#fff; font-size:1.7rem; margin:0 0 6px; --heart:var(--mint); }
.site-footer p{ color:#D5D7EA; }
.site-footer .btn{ margin-top:10px; background:var(--mint); border-color:var(--mint); color:var(--ink); }
.site-footer .btn:hover{ background:#fff; border-color:#fff; }
.fbottom{ max-width:1140px; margin:56px auto 0; padding-top:24px; border-top:1px solid #34375A; font-size:.9rem; color:#AEB1CF; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; }
.fbottom .cam{ font:500 .9rem/1 var(--cam); color:var(--mint); letter-spacing:.06em; }

/* ---------- Simple text pages ---------- */
.prose{ max-width:720px; margin:0 auto; display:flex; flex-direction:column; gap:18px; }
.prose h2{ font:600 1.5rem/1.2 var(--serif); margin-top:18px; }
.prose .checks{ gap:10px; }
.prose a{ color:var(--navy); }
.pagehero{ padding-top:76px; padding-bottom:64px; background:var(--tint); overflow:hidden; }
.pagehero::after{ content:""; position:absolute; right:-6%; bottom:-40%; width:340px; aspect-ratio:1; border-radius:50%; background:radial-gradient(closest-side, rgba(179,222,183,.55), rgba(179,222,183,0)); pointer-events:none; }
.pagehero > *{ position:relative; z-index:1; }

/* ---------- Sticky "Book now" bar on phones ---------- */
.stickycta{ display:none; }

/* ---------- One gentle nudge on the main button ---------- */
.nudge{ animation:nudge 1.6s var(--ease) 2.4s 2; }
@keyframes nudge{ 0%{ box-shadow:0 0 0 0 rgba(74,76,135,.45); } 70%{ box-shadow:0 0 0 14px rgba(74,76,135,0); } 100%{ box-shadow:0 0 0 0 rgba(74,76,135,0); } }

/* ---------- Scroll reveal (only when JS is running) ---------- */
.rv-ready .rv{ opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease); transition-delay:var(--d,0ms); }
.rv-ready .rv.shown{ opacity:1; transform:none; }
.rv-ready .vf.rv{ transform:translateY(22px) scale(.97); }
.rv-ready .vf.rv.shown{ transform:none; }


/* =========================================================
   PACKAGES PAGE: steps, package cards, add-ons
   ========================================================= */
.flow{ list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:8px 6px; margin-top:6px; }
.flow li{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 8px; border-radius:999px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); font-weight:600; font-size:.92rem; }
.flow li span{ width:24px; height:24px; border-radius:50%; background:var(--mint); display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; }
.flow li + li::before{ content:""; width:14px; height:2px; background:var(--taupe); margin-left:-14px; margin-right:2px; display:none; }
#build .founding{ margin-bottom:34px; }
.pkopts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; margin-top:6px; }
.pkopt{ position:relative; display:block; cursor:pointer; }
.pkopt input{ position:absolute; opacity:0; width:1px; height:1px; }
.pkcard{ position:relative; display:flex; flex-direction:column; height:100%; padding:30px 24px 22px; border:1.5px solid var(--line); border-radius:22px; background:#fff; transition:border-color .2s, box-shadow .3s, transform .3s var(--ease), background .2s; }
.pkopt:hover .pkcard{ transform:translateY(-3px); border-color:var(--navy); }
.pkopt input:checked + .pkcard{ border:2px solid var(--navy); background:var(--tint); box-shadow:0 22px 40px -30px rgba(74,76,135,.7); padding:29.5px 23.5px 21.5px; }
.pkopt input:focus-visible + .pkcard{ outline:3px solid var(--navy); outline-offset:3px; }
.pkcard .pk-badge{ top:-13px; left:22px; }
.pkc-name{ font:600 1.55rem/1.15 var(--serif); margin-top:4px; }
.pkc-name em{ font-style:italic; font-weight:500; color:var(--navy); }
.pkcard .cams{ margin:14px 0 14px; font-size:.88rem; }
.pkcard .pk-price b{ font-size:2.6rem; }
.pkcard .checks{ margin:16px 0 20px; gap:10px; flex:1; }
.pkcard .checks .li{ position:relative; display:block; padding-left:30px; font-size:.95rem; }
.pkcard .checks .li::before{ content:""; position:absolute; left:0; top:2px; width:20px; height:20px; border-radius:50%; background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%234A4C87' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.pkcard .checks .li.plus{ font-weight:600; }
.pick{ display:flex; align-items:center; justify-content:center; min-height:46px; border-radius:999px; border:1.5px solid var(--navy); color:var(--navy); font-weight:600; transition:background .2s, color .2s; }
.pick-yes{ display:none; }
.pkopt input:checked + .pkcard .pick{ background:var(--navy); color:#fff; }
.pkopt input:checked + .pkcard .pick-no{ display:none; }
.pkopt input:checked + .pkcard .pick-yes{ display:inline-flex; align-items:center; gap:8px; }
.pkopt input:checked + .pkcard .pick-yes::before{ content:""; width:16px; height:16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4.5 10.5l3.5 3.5 7.5-8' fill='none' stroke='%23FFFFFF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; }
.kitbox{ margin-top:18px; padding:18px 20px; border-radius:16px; background:var(--tint); }
.kitlist{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.kitlist li{ background:#fff; border-radius:999px; padding:6px 12px; font-size:.88rem; box-shadow:inset 0 0 0 1px var(--line); }

.addons{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.addon{ position:relative; display:block; }
.addon input{ position:absolute; opacity:0; width:1px; height:1px; }
.addon-card{ position:relative; display:flex; flex-direction:column; height:100%; background:#fff; padding:10px 10px 14px; box-shadow:0 14px 28px -18px rgba(43,45,74,.4), 0 0 0 1px var(--line); border-radius:4px; transform:rotate(var(--r,0deg)); transition:transform .35s var(--ease), box-shadow .3s; }
.addon:nth-child(1) .addon-card{ --r:-1.5deg; } .addon:nth-child(2) .addon-card{ --r:1.2deg; } .addon:nth-child(3) .addon-card{ --r:-1deg; }
.addon-card::before{ content:""; position:absolute; z-index:2; top:-11px; left:50%; width:74px; height:22px; margin-left:-37px; background:var(--mint); opacity:.88; transform:rotate(-3deg); }
.addon:nth-child(2) .addon-card::before{ background:var(--lilac); }
.addon:hover .addon-card{ transform:rotate(0) translateY(-4px); }
.addon.on .addon-card{ box-shadow:0 0 0 2px var(--navy), 0 20px 34px -20px rgba(74,76,135,.6); transform:rotate(0); }
.addon input:focus-visible + .addon-card{ outline:3px solid var(--navy); outline-offset:4px; }
.addon-pic{ position:relative; display:block; aspect-ratio:1; overflow:hidden; background:var(--mint-l); }
.addon-pic img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.addon-art{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; color:var(--navy); background:radial-gradient(circle at 30% 25%, #fff, var(--mint-l) 70%); }
.addon-art svg{ width:52%; height:auto; }
.addon-cap{ font:600 1.25rem/1.05 var(--hand); color:var(--navy); text-align:center; padding:0 8px; }
.addon-body{ display:flex; flex-direction:column; gap:6px; padding:12px 4px 0; flex:1; }
.addon-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.addon-name{ font:600 1.2rem/1.2 var(--serif); }
.addon-price{ font-weight:600; color:var(--navy); white-space:nowrap; }
.addon-body .small{ font-size:.88rem; flex:1; }
.addon-btn{ width:100%; background:#fff; cursor:pointer; font-family:var(--sans); margin-top:8px; display:flex; align-items:center; justify-content:center; min-height:42px; border-radius:999px; border:1.5px solid var(--navy); color:var(--navy); font-weight:600; font-size:.92rem; transition:background .2s, color .2s; }
.addon-btn .added{ display:none; }
.addon.on .addon-card .addon-btn{ background:var(--navy); color:#fff; }
.addon.on .addon-card .add{ display:none; }
.addon.on .addon-card .added{ display:inline-flex; align-items:center; gap:6px; }
.addon.on .addon-card .added::before{ content:"✓"; }
@media (max-width:1000px){ .addons{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:760px){
  .pkopts{ grid-template-columns:1fr; gap:22px; }
  .addons{ grid-template-columns:1fr; gap:22px; }
  .addon-card{ flex-direction:row; gap:14px; align-items:stretch; }
  .addon-pic{ width:42%; flex:none; aspect-ratio:auto; min-height:150px; }
  .addon-art svg{ width:62%; } .addon-cap{ font-size:1.05rem; }
  .addon-body{ padding:4px 2px 0 0; }
  .kitlist li{ font-size:.84rem; }
}
@media (max-width:360px){ .addon-card{ flex-direction:column; } .addon-pic{ width:100%; aspect-ratio:4/3; min-height:0; } }


/* ---------- Package cards (centred, Captured-style but ours) ---------- */
.pgrid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px; max-width:960px; margin:0 auto; align-items:stretch; }
.pcard{ position:relative; display:flex; flex-direction:column; background:#fff; border:1.5px dashed #B9BBD9; border-radius:24px; transition:transform .35s var(--ease), box-shadow .35s, border-color .3s; }
.pcard:hover{ transform:translateY(-5px); box-shadow:0 30px 50px -38px rgba(43,45,74,.55); }
.pcard.best{ border:2px solid var(--navy); }
.pcard.in{ border:2px solid var(--navy); box-shadow:0 26px 46px -34px rgba(74,76,135,.7); }
.pc-sticker{ position:absolute; z-index:3; top:-18px; left:28px; background:#fff; border:1.5px solid var(--navy); color:var(--navy); font:600 1.45rem/1 var(--hand); padding:6px 14px 4px; border-radius:999px; transform:rotate(-4deg); }
.pcard.best .pc-sticker{ left:auto; right:28px; transform:rotate(4deg); background:var(--navy); color:#fff; }
.pc-photo{ position:relative; margin:30px 30px 0; aspect-ratio:16/10; background:#fff; padding:10px 10px 0; box-shadow:0 14px 26px -18px rgba(43,45,74,.45), 0 0 0 1px var(--line); transform:rotate(-1deg); }
.pcard.best .pc-photo{ transform:rotate(1deg); }
.pc-photo .tape{ position:absolute; z-index:2; top:-11px; left:50%; width:84px; height:22px; margin-left:-42px; background:var(--mint); opacity:.88; transform:rotate(-3deg); }
.pcard.best .pc-photo .tape{ background:var(--lilac); }
.pc-art, .pc-photo img{ position:absolute; left:10px; right:10px; top:10px; bottom:0; width:calc(100% - 20px); height:calc(100% - 10px); object-fit:cover; }
.pc-art{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; overflow:hidden; background:linear-gradient(160deg, var(--a) 0%, var(--b) 52%, var(--c) 100%); }
.pc-art::before{ content:""; position:absolute; inset:-10%; background:radial-gradient(circle at 20% 30%, rgba(255,255,255,.5), transparent 8%), radial-gradient(circle at 75% 22%, rgba(255,240,210,.45), transparent 10%), radial-gradient(circle at 60% 70%, rgba(255,255,255,.3), transparent 12%); filter:blur(2px); animation:drift 14s ease-in-out infinite alternate; }
.pc-cams{ position:relative; display:flex; gap:12px; color:var(--navy); }
.pc-cams svg{ width:76px; height:auto; filter:drop-shadow(0 8px 12px rgba(30,32,54,.25)); }
.pc-cap{ position:relative; font:600 1.6rem/1 var(--hand); color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.35); }
.pc-body{ display:flex; flex-direction:column; flex:1; padding:22px 30px 30px; }
.pc-name{ font:600 1.75rem/1.15 var(--serif); margin-top:4px; }
.pc-price{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 10px; margin-top:10px; }
.pc-price b{ font:600 2.9rem/1 var(--serif); letter-spacing:-.02em; }
.pc-price > span{ font:500 .8rem/1 var(--cam); letter-spacing:.1em; color:var(--soft); }
.pc-price s{ color:var(--soft); text-decoration-thickness:2px; text-decoration-color:var(--rec); }
.pcard .pk-save{ margin:10px 0 0; }
.pcard .pk-for{ margin:14px 0 16px; }
.pcard .checks{ margin-bottom:26px; flex:1; gap:10px; }
.pcard .checks li{ font-size:.97rem; }
.pcard .checks li.plus{ font-weight:600; }
.pc-add{ width:100%; margin-top:auto; }
.pc-add-yes{ display:none; }
.pcard.in .pc-add{ background:var(--mint); border-color:var(--mint); color:var(--ink); }
.pcard.in .pc-add-no{ display:none; }
.pcard.in .pc-add-yes{ display:inline-flex; align-items:center; gap:8px; }
.pcard.in .pc-add-yes::before{ content:"✓"; }
.pk-proof{ text-align:center; margin-top:30px; }
#build .kitbox{ max-width:960px; margin:34px auto 0; text-align:center; }
#build .kitlist{ justify-content:center; }
#extras .addons{ max-width:1000px; margin:0 auto; }

/* ---------- Booqable (only shows when SETTINGS.booqable.on is true) ---------- */
.bq-only{ display:none; }
.bq-on .bq-only{ display:block; }
.bq-dates{ max-width:760px; margin:0 auto 44px; }
.bq-tip{ text-align:center; background:var(--tint); border-radius:16px; padding:14px 18px; color:var(--ink); font-size:.98rem; }
/* Booqable's own button inside our cards */
.bq-on .pcard .booqable-product-button{ margin-top:auto; }
.bq-on .addon .booqable-product-button{ margin-top:8px; }
.booqable-product-button input[type="number"]{ display:none !important; }   /* 1 kit per booking, no quantity box needed */
.booqable-product-button .bq-fallback{ width:100%; }

/* ---------- My booking drawer ---------- */
.cart-scrim{ position:fixed; inset:0; z-index:140; background:rgba(30,32,54,.35); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); animation:fade .25s ease both; }
.cart{ position:fixed; z-index:150; top:12px; right:12px; bottom:12px; width:min(410px, calc(100vw - 24px)); background:#fff; border-radius:24px; box-shadow:0 30px 70px -20px rgba(30,32,54,.45); display:flex; flex-direction:column; overflow:hidden; transform:translateX(calc(100% + 30px)); transition:transform .45s var(--ease), visibility 0s linear .45s; visibility:hidden; }
.cart.open{ transform:none; visibility:visible; transition:transform .45s var(--ease), visibility 0s; }
.cart-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 18px 18px 24px; background:var(--navy); color:#fff; }
.cart-title{ font:500 .82rem/1 var(--cam); letter-spacing:.16em; text-transform:uppercase; display:flex; align-items:center; gap:10px; }
.cart-title::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--rec); animation:blink 1.4s steps(1) infinite; }
.cart-x{ width:42px; height:42px; border-radius:50%; border:0; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cart-x:hover{ background:rgba(255,255,255,.22); }
.cart-body{ flex:1; overflow-y:auto; padding:18px 18px 8px; display:flex; flex-direction:column; gap:12px; }
.cart-empty{ padding:26px 10px; text-align:center; color:var(--soft); }
.cart-items{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.cart-item{ display:grid; grid-template-columns:56px minmax(0,1fr) auto; gap:12px; align-items:center; padding:12px; border-radius:16px; background:var(--tint); animation:rise .35s var(--ease) both; }
.cart-thumb{ width:56px; height:56px; border-radius:12px; background:#fff; display:flex; align-items:center; justify-content:center; color:var(--navy); overflow:hidden; }
.cart-thumb svg{ width:34px; height:auto; }
.cart-thumb img{ width:100%; height:100%; object-fit:cover; }
.cart-iname{ font-weight:600; line-height:1.25; }
.cart-imeta{ font-size:.85rem; color:var(--soft); display:flex; align-items:center; gap:6px; }
.cart-imeta::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--mint-d); }
.cart-iright{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.cart-iprice{ font-weight:600; white-space:nowrap; }
.cart-rm{ border:0; background:none; color:var(--soft); font:500 .82rem var(--sans); cursor:pointer; text-decoration:underline; text-underline-offset:3px; padding:2px 0; }
.cart-rm:hover{ color:var(--rec); }
.cart-days{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px; border:1.5px dashed var(--taupe); border-radius:16px; }
.cart-days .small{ font-size:.84rem; }
.cart-more{ display:block; padding:12px 14px; border-radius:14px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); color:var(--navy); font-weight:600; font-size:.92rem; text-decoration:none; }
.cart-more:hover{ background:var(--tint); }
.cart-foot{ padding:16px 20px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; background:#fff; }
.cart-save{ align-self:flex-start; background:var(--mint-l); color:#2E6B3A; font-weight:600; font-size:.88rem; padding:4px 10px; border-radius:8px; }
.cart-sub{ display:flex; justify-content:space-between; align-items:baseline; }
.cart-sub span{ font-weight:600; }
.cart-sub strong{ font:600 2.2rem/1 var(--serif); }
.cart-sub strong.bump{ animation:bump .35s var(--ease); }
.cart-foot .btn{ width:100%; }
.cart-foot .small{ font-size:.84rem; text-align:center; }
.cart-fab{ position:fixed; z-index:120; right:18px; bottom:calc(18px + env(safe-area-inset-bottom)); display:inline-flex; align-items:center; gap:10px; padding:10px 20px 10px 10px; border:0; border-radius:999px; background:var(--night); color:#fff; font:600 .95rem var(--sans); cursor:pointer; box-shadow:0 16px 34px -14px rgba(30,32,54,.7); animation:rise .4s var(--ease) both; }
.cart-fab b{ color:var(--mint); }
.cart-fab-n{ width:30px; height:30px; border-radius:50%; background:var(--mint); color:var(--ink); display:inline-flex; align-items:center; justify-content:center; }
.cart-fab[hidden]{ display:none; }
html.cart-on{ overflow:hidden; }
@media (max-width:760px){
  .pgrid{ grid-template-columns:minmax(0,1fr); gap:40px; }
  .pc-photo{ margin:28px 18px 0; }
  .pc-body{ padding:20px 20px 24px; }
  .pc-price b{ font-size:2.5rem; }
  .cart{ top:auto; left:0; right:0; bottom:0; width:100%; max-height:88vh; border-radius:24px 24px 0 0; transform:translateY(105%); }
  .cart-fab{ left:12px; right:12px; justify-content:center; }
}

/* =========================================================
   Tablet
   ========================================================= */
@media (max-width:1000px){
  .three, .moments{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .fgrid{ grid-template-columns:1fr 1fr; }
  .builder{ grid-template-columns:1fr; }
  .bsum{ position:static; }
  .bbar{ position:fixed; left:0; right:0; bottom:0; z-index:80; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); background:var(--night); color:#fff; transform:translateY(110%); transition:transform .35s var(--ease); }
  .bbar.show{ transform:none; }
  .bbar strong{ font:600 1.6rem/1 var(--serif); }
  .bbar a{ color:#fff; font-weight:600; min-height:44px; display:inline-flex; align-items:center; text-underline-offset:4px; }
  .split{ grid-template-columns:1fr; gap:44px; }
  .hero .split > :last-child{ max-width:640px; width:100%; margin:0 auto; }
  .duels{ grid-template-columns:1fr; }
  .board{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 22px; max-width:640px; margin-left:auto; margin-right:auto; }
  .story{ grid-template-columns:1fr; gap:40px; text-align:center; }
  .story .stack{ align-items:center; }
  .story-pics{ max-width:min(300px, 74vw); margin-bottom:56px; }
  .story .pol-small{ right:-10%; }
  .maker{ grid-template-columns:1fr; }
}
@media (max-width:860px){
  :root{ --header-h:64px; }
  .nav, .hbar > .ig{ display:none; }
  .menu{ display:block; }
  .hbar{ gap:12px; padding:0 14px 0 20px; }
  .logo{ font-size:1.3rem; }
  .logo .mark{ width:32px; }
  .hbtn{ padding:8px 16px; font-size:.88rem; min-height:44px; }
}
/* =========================================================
   Phone
   ========================================================= */
@media (max-width:760px){
  body{ font-size:16px; }
  .sec{ padding:72px 20px; }
  .hero{ padding-top:36px; padding-bottom:64px; }
  .head{ margin-bottom:38px; }
  .three, .steps3, .moments, .opts{ grid-template-columns:1fr; }
  .three, .steps3{ gap:14px; }
  .step{ padding:24px 22px; }
  .n6{ font-size:2.4rem; }
  .steplist .row{ grid-template-columns:52px minmax(0,1fr); gap:16px; padding:26px 0; }
  .btns .btn{ flex:1 1 auto; }
  .bens{ grid-template-columns:1fr; gap:10px; }
  .vf{ border-radius:20px; padding:10px; }
  .vf-screen{ border-radius:12px; }
  .osd::before{ inset:12px; }
  .osd .rec, .osd .bat{ top:24px; } .osd .rec, .osd .who{ left:26px; } .osd .bat, .osd .stamp{ right:26px; } .osd .who, .osd .stamp{ bottom:24px; }
  .osd .zoom{ display:none; }
  .vf-tag{ right:-4px; top:-18px; font-size:1.15rem; }
  .frame{ width:150px; } .strip-note{ width:160px; font-size:1.45rem; }
  .strip-band{ padding:22px 0; }
  .duel{ padding:22px 20px; }
  .vs-table{ padding:0 0 2px; margin-top:34px; }
  .vs-row{ grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
  .vs-row > .vs-lbl{ grid-column:1 / -1; padding:16px 16px 6px; border-top:1px solid var(--line); font:500 .72rem/1.3 var(--cam) !important; letter-spacing:.12em; text-transform:uppercase; color:var(--navy) !important; }
  .vs-row > .vs-them, .vs-row > .vs-us{ border-top:0; padding:6px 10px 16px 16px; font-size:.9rem; gap:8px; align-items:flex-start; }
  .vs-row > .vs-us{ border:0; border-radius:12px; margin:0 10px 12px 0; padding:10px 12px !important; box-shadow:inset 0 0 0 1px #D3E9D5; }
  .vs-row:last-child > .vs-us{ border:0; border-radius:12px; margin-bottom:14px; padding-bottom:10px !important; box-shadow:inset 0 0 0 1px #D3E9D5; }
  .vs-row svg{ width:20px; height:20px; padding:3px; }
  .vs-headrow > .vs-lbl{ display:none; }
  .vs-headrow > p{ flex-direction:column; align-items:flex-start; padding:22px 12px 16px 16px !important; gap:8px; }
  .vs-headrow > .vs-us{ border:2px solid var(--navy); border-radius:16px; margin:-16px 10px 8px 0; padding:30px 12px 14px !important; box-shadow:none; }
  .vs-headrow .vs-them > span:last-child, .vs-headrow .vs-logo{ font-size:1.02rem; }
  .vs-logo > span{ white-space:normal; }
  .vs-headrow small{ font-size:.8rem; }
  .vs-hico{ width:38px; height:38px; border-radius:11px; }
  .vs-pick{ font-size:1.05rem; top:-13px; }
  .printer{ width:170px; }
  .board{ gap:28px 14px; }
  .pol{ padding:8px 8px 12px; }
  .pol .cap{ font-size:1.3rem; }
  .pol .by{ font-size:.6rem; letter-spacing:.06em; }
  .pol .tape{ width:64px; height:20px; margin-left:-32px; top:-9px; }
  .pkgs{ grid-template-columns:1fr; gap:30px; }
  .pk{ padding:34px 22px 24px; }
  .pk-badge{ left:22px; }
  .pk-price b{ font-size:2.9rem; }
  .bstep, .bsum{ padding:24px 18px; }
  .bstep legend{ font-size:1.25rem; }
  .form .btn{ width:100%; }
  .fgrid{ grid-template-columns:1fr; gap:32px; }
  .site-footer{ padding:56px 20px 28px; }
  .site-footer .btn{ width:100%; }
  .kit{ padding:24px 20px; }
  .stickycta{ position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom)); z-index:80; display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 10px 10px 18px; border-radius:999px; background:var(--night); color:#fff; box-shadow:0 12px 30px -12px rgba(30,32,54,.6);
    transform:translateY(140%); transition:transform .35s var(--ease); }
  .stickycta.show{ transform:none; }
  .stickycta span{ font-size:.9rem; line-height:1.25; }
  .stickycta strong{ display:block; font:600 1.15rem/1.1 var(--serif); }
  .stickycta .btn{ min-height:46px; padding:10px 22px; font-size:.95rem; flex:none; background:var(--mint); border-color:var(--mint); color:var(--ink); }
  .menu-open .stickycta{ display:none; }
  .quote{ padding:22px; }
  .bigquote{ margin-top:44px; }
}
@media (max-width:430px){
  .hbar{ gap:8px; padding:0 8px 0 16px; }
  .logo{ font-size:1.12rem; gap:7px; }
  .logo .mark{ width:28px; }
  .hbtn{ padding:8px 14px; font-size:.84rem; }
  .menu summary{ width:44px; height:44px; }
  .kicker{ font-size:.68rem; letter-spacing:.08em; gap:8px; }
  .osd{ font-size:.62rem; letter-spacing:.05em; }
  .osd .bat::after{ display:none; }
}
@media (max-width:400px){
  .hbar{ gap:6px; padding:0 6px 0 14px; }
  .logo{ font-size:1rem; gap:6px; }
  .logo .mark{ width:25px; }
  .hbtn{ padding:8px 12px; font-size:.8rem; }
  .pol .by{ display:none; }
}
@media (max-width:359px){ .hbar > .hbtn{ display:none; } }
.menu-open .hbar > .hbtn{ visibility:hidden; }
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
  html{ scroll-behavior:auto; }
  .rv-ready .rv{ opacity:1; transform:none; }
  .js .board .pol{ opacity:1; transform:rotate(var(--r,0deg)); }
  .js .board .pol .pic > *:first-child{ opacity:1; }
  .rv-ready .bars .bar i{ transform:none; }
}

/* Booqable link mode: one clean Book now button per package */
.bq-link .pcard .pc-add{ margin-top:auto; width:100%; justify-content:center; }
.addon-note{ margin:10px 0 0; font-size:.86rem; font-weight:600; color:var(--navy); display:flex; align-items:center; gap:6px; }
.addon-note::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--mint); box-shadow:0 0 0 2px var(--navy) inset; }

/* Booqable buttons: our card already shows the price, so hide Booqable's
   own price/period/stock lines and make its button match the site. */
.booqable-product-button [class*="price" i]:not(:has(button)),
.booqable-product-button [class*="period" i]:not(:has(button)),
.booqable-product-button [class*="availab" i]:not(:has(button)),
.booqable-product-button [class*="stock" i]:not(:has(button)){ display:none !important; }
.booqable-product-button button{ background:var(--navy) !important; border-color:var(--navy) !important; color:#fff !important; border-radius:999px !important; width:100% !important; min-height:52px; font-weight:600 !important; }
.booqable-product-button button:hover{ filter:brightness(1.1); }

/* Phones: keep package photos straight and centred inside the card */
@media (max-width:760px){
  .pc-photo, .pcard.best .pc-photo{ transform:none; margin:28px 16px 0; }
  .pcard:hover{ transform:none; }
}
/* Phones with Booqable on: leave room on the right for Booqable's round cart button */
@media (max-width:760px){
  .bq-on .stickycta{ right:84px; }
}
/* Never let Booqable's widget push a package card wider than the screen */
.pcard, .pc-body{ min-width:0; max-width:100%; }
.booqable-product-button{ max-width:100%; min-width:0; overflow:hidden; }
.booqable-product-button *{ max-width:100% !important; box-sizing:border-box; }
html{ overflow-x:hidden; }
/* Phones: keep everything inside the screen, even with Booqable's widgets */
@media (max-width:760px){
  .addons{ grid-template-columns:minmax(0,1fr); }
  .addon, .addon-card, .addon-body{ min-width:0; max-width:100%; }
  .addon-body{ flex:1; }
  .addon-card{ --r:0deg !important; }
  .pc-photo, .pcard.best .pc-photo{ align-self:center; width:calc(100% - 32px); max-width:calc(100% - 32px); margin:28px auto 0; }
}

/* Best-practice pass: easier-to-read small text and bigger tap areas on phones */
.when, .duel-q{ font-size:.84rem; }
.kitlist li{ font-size:.95rem; }
.site-footer a:not(.btn){ min-height:44px; }
.fcol{ gap:2px; }
.hbar > .logo{ min-height:44px; }
@media (max-width:760px){
  .kitlist li{ font-size:.92rem; }
  .vs-row > .vs-lbl{ font-size:.8rem !important; }
}
@media (max-width:430px){
  .kicker{ font-size:.74rem; letter-spacing:.06em; }
  .hbtn{ font-size:.9rem; }
}
@media (max-width:400px){ .hbtn{ font-size:.86rem; } }
.site-footer a:not(.btn){ min-width:44px; }
.kicker, h1, h2, .h2{ text-wrap:balance; }
/* Recorda: the name is shorter, so the logo can be a little bigger */
.hbar > .logo{ font-size:1.75rem; }
.hbar > .logo .mark{ width:42px; }
@media (max-width:860px){ .hbar > .logo{ font-size:1.5rem; } .hbar > .logo .mark{ width:34px; } }