/* ============ CANDY-CLAY DESIGN SYSTEM ============ */
:root{
  --candy-teal:#17B8CE; --candy-teal-deep:#0E93A8;
  --clay-cream:#F2D3B3; --clay-shadow:#D9AE85;
  --choc:#5A3A22; --choc-deep:#432A16;
  --orange:#FFA424; --green:#3ECF6A; --pink:#FF5FA2;
  --purple:#8A5CF6; --red:#F4483A;
  --glass:rgba(255,255,255,.55); --ink:#22303C; --cloud:#FFF8EF;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Nunito',sans-serif;font-size:17px;line-height:1.6;color:var(--ink);background:var(--candy-teal);overflow-x:hidden}
h1,h2,h3,.baloo{font-family:'Baloo 2',cursive}
img{max-width:100%;display:block;height:auto}
section{padding:88px 24px}
.wrap{max-width:1150px;margin:0 auto}

/* ---------- jelly + glass components ---------- */
.jelly{display:inline-block;font-family:'Baloo 2';font-weight:700;font-size:19px;color:#fff;
  text-decoration:none;text-align:center;padding:15px 34px;border-radius:16px;cursor:pointer;border:none;
  transition:transform .12s ease-out, box-shadow .12s ease-out;position:relative}
.jelly:active{transform:translateY(3px)}
.jelly-orange{background:linear-gradient(180deg,#FFC163 0%,var(--orange) 55%,#F08900 100%);
  border-bottom:5px solid #C46E00;box-shadow:0 8px 20px rgba(255,164,36,.4)}
.jelly-orange:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(255,164,36,.55)}
.jelly-orange:active{border-bottom-width:2px}
.jelly-teal{background:linear-gradient(180deg,#4ED4E6 0%,var(--candy-teal) 55%,#0E93A8 100%);
  border-bottom:5px solid #0A7385;box-shadow:0 8px 20px rgba(23,184,206,.4)}
.jelly-teal:hover{transform:translateY(-2px)}
.jelly-teal:active{border-bottom-width:2px}
.glassbtn{display:inline-block;font-family:'Baloo 2';font-weight:700;font-size:19px;color:var(--ink);
  text-decoration:none;padding:15px 34px;border-radius:16px;cursor:pointer;
  background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1.5px solid rgba(255,255,255,.8);border-bottom:4px solid rgba(180,180,180,.55);
  transition:transform .12s, background .12s}
.glassbtn:hover{background:rgba(255,255,255,.68);transform:translateY(-2px)}
.glassbtn:active{transform:translateY(2px);border-bottom-width:2px}
.glasscard{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1.5px solid rgba(255,255,255,.8);border-bottom:4px solid rgba(180,180,180,.45);
  border-radius:22px;box-shadow:0 6px 16px rgba(0,40,50,.10), 0 24px 48px rgba(0,40,50,.10)}
.badge{display:inline-block;font-family:'Baloo 2';font-weight:700;font-size:12px;letter-spacing:1.2px;
  text-transform:uppercase;color:#fff;padding:6px 14px;border-radius:999px}

/* ---------- nav ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.5);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1.5px solid rgba(255,255,255,.7);transition:padding .25s, box-shadow .25s}
nav .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 24px}
nav.scrolled .wrap{padding:8px 24px}
nav.scrolled{box-shadow:0 6px 20px rgba(0,40,50,.15)}
.brand{display:flex;align-items:center;gap:10px;font-family:'Baloo 2';font-weight:800;font-size:21px;color:var(--choc);text-decoration:none}
.brand span.logo{font-size:26px;filter:drop-shadow(0 3px 3px rgba(0,0,0,.15))}
.navlinks{display:flex;gap:28px;align-items:center}
.navlinks a{font-weight:800;color:var(--ink);text-decoration:none;font-size:15.5px}
.navlinks a:hover{color:var(--candy-teal-deep)}
.navlinks a.navcta{background:linear-gradient(180deg,#FFEBA6,#FFCB3C 48%,#E8A400);color:#5A3A22;
  padding:9px 16px;border-radius:12px;box-shadow:0 4px 12px rgba(230,166,0,.45);border-bottom:3px solid #B77F00;transition:transform .12s;font-weight:800}
.navlinks a.navcta:hover{color:#5A3A22;transform:translateY(-2px)}
@media(max-width:820px){.navlinks a.navcta{display:inline-block}}
nav .jelly{padding:10px 22px;font-size:16px}
@media(max-width:820px){.navlinks a.hideable{display:none}}

/* ---------- hero ---------- */
.hero{min-height:100vh;display:flex;align-items:center;text-align:center;
  background:radial-gradient(ellipse 90% 70% at 50% 18%, #2BD0E4 0%, var(--candy-teal) 45%, var(--candy-teal-deep) 100%);
  padding-top:130px;position:relative}
.hero-img{width:min(740px,92vw);margin:0 auto 8px;animation:bob 4s ease-in-out infinite;
  border-radius:30px;box-shadow:0 10px 24px rgba(0,40,50,.22), 0 40px 90px rgba(0,40,50,.28);
  border:6px solid rgba(255,255,255,.5)}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero h1{font-size:clamp(34px,5.4vw,58px);font-weight:800;color:#fff;line-height:1.12;
  text-shadow:0 3px 0 rgba(67,42,22,.55), 0 10px 24px rgba(0,40,50,.35);margin:18px 0 12px}
.hero p.sub{max-width:680px;margin:0 auto 30px;color:#EAFBFF;font-size:19px;font-weight:700;
  text-shadow:0 2px 6px rgba(0,60,70,.3)}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:20px}
.pricehint{color:#D8F7FC;font-weight:800;font-size:15px;letter-spacing:.3px}
.trustrow{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px;padding-bottom:50px}
.trustrow span{color:#fff;font-weight:800;font-size:14.5px;background:rgba(0,60,70,.25);
  padding:7px 16px;border-radius:999px;backdrop-filter:blur(6px)}

/* ---------- ticker ---------- */
.ticker{background:var(--choc);overflow:hidden;padding:13px 0;white-space:nowrap}
.ticker-track{display:inline-block;animation:tick 38s linear infinite;font-family:'Baloo 2';
  font-weight:700;color:var(--clay-cream);font-size:16.5px}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track b{color:#FFC163;margin:0 14px}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- tools ---------- */
.tools{background:var(--cloud)}
.sect-head{text-align:center;max-width:640px;margin:0 auto 54px}
.sect-head h2{font-size:clamp(30px,4vw,42px);color:var(--choc);font-weight:800;line-height:1.15}
.sect-head p{margin-top:10px;font-weight:700;color:#6b5540}
.toolgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:950px){.toolgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.toolgrid{grid-template-columns:1fr}}
.tool{position:relative;padding:30px 26px 26px;transition:transform .18s ease-out}
.tool:hover{transform:translateY(-6px)}
.tool .blob{width:78px;height:78px;border-radius:26px;display:flex;align-items:center;justify-content:center;
  font-size:38px;margin-bottom:16px;
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.14), inset 0 6px 10px rgba(255,255,255,.5), 0 8px 18px rgba(0,40,50,.18);
  transition:transform .18s}
.tool:hover .blob{transform:rotate(-5deg) scale(1.06)}
.tool h3{font-size:22px;color:var(--choc);margin-bottom:6px}
.tool p{font-size:15.5px;font-weight:700;color:#4d5d6b}
.b-teal{background:linear-gradient(160deg,#5FDBEA,#17B8CE)} .b-purple{background:linear-gradient(160deg,#AC8BFF,#8A5CF6)}
.b-pink{background:linear-gradient(160deg,#FF8FBE,#FF5FA2)} .b-orange{background:linear-gradient(160deg,#FFC163,#FFA424)}
.b-red{background:linear-gradient(160deg,#FF7A6E,#F4483A)} .b-green{background:linear-gradient(160deg,#7BE59B,#3ECF6A)}

/* ---------- showcase ---------- */
.show{background:linear-gradient(180deg,var(--candy-teal-deep),#0B7E91)}
.show .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
@media(max-width:900px){.show .wrap{grid-template-columns:1fr}}
.screenframe{border-radius:24px;overflow:hidden;border:8px solid var(--clay-cream);
  box-shadow:0 10px 24px rgba(0,30,40,.3), 0 40px 80px rgba(0,30,40,.35);position:relative;
  animation:floaty 6s ease-in-out infinite;transition:transform .35s ease, box-shadow .35s ease}
.screenframe:hover{transform:translateY(-6px) scale(1.015);
  box-shadow:0 16px 32px rgba(0,30,40,.34), 0 54px 100px rgba(255,164,36,.28)}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.screenframe{animation:none}}
.screenframe img{transition:opacity .4s}
.shotdots{display:flex;gap:10px;justify-content:center;margin-top:18px}
.shotdots button{width:14px;height:14px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer}
.shotdots button.on{background:var(--orange);border-color:var(--orange)}
.show h2{color:#fff;font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.15;margin-bottom:14px}
.show p{color:#D8F7FC;font-weight:700;margin-bottom:24px}
.shotcap{color:#BFF0F8;font-weight:800;text-align:center;margin-top:10px;font-family:'Baloo 2'}

/* ---------- steps ---------- */
.steps{background:var(--cloud)}
.stepgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
@media(max-width:820px){.stepgrid{grid-template-columns:1fr}}
.step{text-align:center;padding:34px 26px}
.stepnum{width:56px;height:56px;margin:0 auto 16px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2';font-weight:800;font-size:24px;color:#fff;
  background:linear-gradient(180deg,#FFC163,var(--orange));border-bottom:4px solid #C46E00;
  box-shadow:0 8px 16px rgba(255,164,36,.4)}
.step h3{color:var(--choc);font-size:21px;margin-bottom:8px}
.step p{font-weight:700;color:#4d5d6b;font-size:15.5px}

/* ---------- testimonials ---------- */
.talk{background:var(--candy-teal);overflow-x:clip}
.talkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:950px){.talkgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.talkgrid{grid-template-columns:1fr}}
.quote{padding:26px}
.quote p{font-weight:800;font-size:16.5px;color:var(--ink)}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:16px}
.avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(160deg,#FBE3C8,var(--clay-cream));border-bottom:3px solid var(--clay-shadow);
  box-shadow:0 4px 10px rgba(0,40,50,.18)}
.who b{font-family:'Baloo 2';color:var(--choc)} .who small{display:block;font-weight:700;color:#5d6d7b;font-size:12.5px}
.campnote{text-align:center;color:#D8F7FC;font-weight:700;font-size:13px;margin-top:22px}
/* video testimonials */
.vidgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:28px}
@media(max-width:950px){.vidgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vidgrid{grid-template-columns:1fr}}
.vidcard{position:relative;z-index:1;border-radius:20px;overflow:hidden;background:#0a1f24;
  box-shadow:0 10px 26px rgba(0,40,50,.32);border:3px solid rgba(255,255,255,.28);cursor:pointer;
  transition:box-shadow .3s ease}
.vidcard.lit{box-shadow:0 30px 80px rgba(0,18,26,.7);border-color:rgba(255,255,255,.55)}
/* full-screen frosted backdrop behind the opened (lightboxed) clip */
.vidbackdrop{position:fixed;inset:0;z-index:1000;opacity:0;pointer-events:none;
  background:rgba(6,26,31,.5);backdrop-filter:blur(10px) saturate(.9);-webkit-backdrop-filter:blur(10px) saturate(.9);
  transition:opacity .35s ease}
.vidbackdrop.on{opacity:1;pointer-events:auto;cursor:pointer}
.vidcard video{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#000}
.vidcard .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(0,20,25,.05),rgba(0,20,25,.35));transition:opacity .2s;pointer-events:none}
.vidcard.lit .play{opacity:0}
.play .disc{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:26px;color:#fff;background:linear-gradient(180deg,#FFC163,var(--orange));
  border-bottom:4px solid #C46E00;box-shadow:0 8px 18px rgba(0,40,50,.4)}
.vidcap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;
  padding:22px 14px 12px;background:linear-gradient(0deg,rgba(3,20,24,.85),rgba(3,20,24,0));
  pointer-events:none}
.flag{width:30px;height:20px;border-radius:4px;flex:0 0 30px;display:block;
  box-shadow:0 1px 3px rgba(0,0,0,.5);outline:1px solid rgba(255,255,255,.35);outline-offset:-1px}
.vidcap b{font-family:'Baloo 2';color:#fff;font-size:16px;line-height:1.05}
.vidcap small{display:block;color:#CFEFF6;font-weight:700;font-size:12px}

/* ---------- pricing ---------- */
.pricing{background:var(--cloud)}
.pricegrid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:center}
@media(max-width:900px){.pricegrid{grid-template-columns:1fr;max-width:430px;margin:0 auto}}
.plan{padding:36px 30px;text-align:center;position:relative}
.plan h3{font-size:19px;letter-spacing:1.6px;text-transform:uppercase;color:#6b5540}
.plan .price{font-family:'Baloo 2';font-weight:800;font-size:56px;color:var(--choc);line-height:1.05;margin:10px 0 2px}
.plan .per{font-weight:800;color:#8a94a0;margin-bottom:20px}
.plan ul{list-style:none;margin:0 0 26px;text-align:left}
.plan li{font-weight:700;font-size:15.5px;padding:7px 0;color:#3d4d5c}
.plan li::before{content:"✅";margin-right:9px}
.plan.hero-plan{transform:scale(1.06);border:3px solid var(--orange);z-index:2}
@media(max-width:900px){.plan.hero-plan{transform:scale(1)}}
@media(max-width:760px){.contactgrid{grid-template-columns:1fr!important}
  .freetoolgrid{grid-template-columns:1fr!important}
  .about .glasscard{grid-template-columns:1fr!important}
  .about .avatar{margin:0 auto}}
.ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg,#FF7A6E,var(--red));
  border-bottom:3px solid #B32517}
.checkout-note{text-align:center;margin-top:26px;font-weight:700;color:#6b5540;font-size:14px}

/* ---------- faq ---------- */
.faq{background:linear-gradient(180deg,var(--candy-teal),var(--candy-teal-deep))}
.faq details{margin-bottom:14px;padding:4px 24px;overflow:hidden}
.faq summary{font-family:'Baloo 2';font-weight:700;font-size:18px;color:var(--choc);cursor:pointer;
  padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{width:34px;height:34px;flex:0 0 34px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  font-size:20px;color:#fff;background:linear-gradient(180deg,#FFC163,var(--orange));
  border-bottom:3px solid #C46E00;transition:transform .2s}
.faq details[open] .plus{transform:rotate(45deg)}
.faq details p{padding:0 0 18px;font-weight:700;color:#3d4d5c}

/* ---------- final + footer ---------- */
.final{background:radial-gradient(ellipse 80% 70% at 50% 30%, #2BD0E4 0%, var(--candy-teal-deep) 100%);text-align:center}
.final h2{color:#fff;font-size:clamp(30px,4.4vw,46px);font-weight:800;line-height:1.15;
  text-shadow:0 3px 0 rgba(67,42,22,.5), 0 10px 24px rgba(0,40,50,.35);max-width:760px;margin:0 auto 28px}
.final .small{color:#D8F7FC;font-weight:800;margin-top:16px}
footer{background:var(--choc-deep);color:var(--clay-cream);padding:44px 24px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;align-items:center}
footer a{color:var(--clay-cream);text-decoration:none;font-weight:800;margin-left:22px}
footer a:hover{color:#FFC163}
footer .fbrand{font-family:'Baloo 2';font-weight:800;font-size:19px}
footer .copy{width:100%;text-align:center;font-size:13px;font-weight:700;color:#B79877;margin-top:8px}

/* ---------- reveal (BULLETPROOF: content is ALWAYS visible; the entrance is a
   purely additive one-shot animation. If app.js is missing/stale/broken — e.g.
   a bad deploy from another window — nothing is ever hidden. Never make .reveal
   opacity:0 by default again.) ---------- */
.reveal{opacity:1;transform:none}
.reveal.in{animation:revealUp .5s ease-out}
@keyframes revealUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.reveal.in{opacity:1;transform:none;animation:none}
}


/* ---------- campaign wall: 39 clips, so scroll inside the block ----------
   Without this the page grows forever. Hovering the wall scrolls the clips in place;
   overscroll-behavior stops it from stealing the page scroll at the top and bottom.

   SAFARI: the scroll box must NOT be the grid itself. WebKit under-reports the scroll
   height of an element that is both `display:grid` and the scroll container, so the last
   row is unreachable — you could scroll in Chrome but never get to Kenya and Tibet in
   Safari. Splitting the two roles (.vidscroll scrolls, .vidgrid lays out) is the fix, and
   it is the same layout in every browser. Do not merge them back. */
.vidscroll{max-height:min(78vh,860px);overflow-y:auto;overscroll-behavior:contain;
  padding-right:6px;scroll-behavior:smooth}
.vidgrid{align-content:start;grid-auto-rows:max-content;
  padding-bottom:4px}          /* breathing room so the last row is never flush-clipped */
/* NO -webkit-overflow-scrolling:touch here. On iOS it makes position:fixed descendants behave
   as absolute and get clipped to the scroll box, so tapping a card did not expand it. It is
   also obsolete: iOS 13+ does momentum scrolling by default. */
.vidscroll::-webkit-scrollbar{width:10px}
.vidscroll::-webkit-scrollbar-track{background:rgba(0,0,0,.12);border-radius:99px}
.vidscroll::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#FFE39A,#FF9AC6 60%,#FF5FA2);
  border-radius:99px;border:2px solid transparent;background-clip:padding-box}
/* a lifted card must not be clipped by the scrolling box */
.vidgrid .vidcard.lit{position:relative;z-index:1001}
/* Turn the inner scroll off on NARROW *or* SHORT viewports. A phone in landscape is about
   844x390: too wide for a max-width rule, but 78vh of 390px is a 304px letterbox holding
   3,700px of cards. Height is the dimension that actually matters here. */
@media(max-width:600px),(max-height:700px){.vidscroll{max-height:none;overflow:visible}}
/* ---------- flexbox `gap` fallback: the nav ran together on older Macs ----------
   Safari only supports `gap` in FLEXBOX from 14.1 (Big Sur, 2021). Before that it is ignored
   outright, so on an older iMac every nav item collapsed flush against its neighbour:
   "WatchPricingFAQAboutContact". Measured on the live site: 7 gaps of 28px became 7 of 0px,
   and the nav lost 196px of spacing.

   There is NO reliable @supports test for this. Safari 13 DOES support `gap` in grid, so
   `@supports (gap:1px)` returns true on exactly the browsers that are broken. So instead of
   detecting, margins do the spacing for everyone and `gap` is dropped. Modern browsers render
   identically; old ones simply work.

   Non-wrapping rows: `> * + *` is an exact equivalent of gap.
   Wrapping rows: margin on the children, no negative margin on the container, which leaves a
   few px of trailing space rather than risking a shifted footer. */
.navlinks{gap:0}          .navlinks > * + *{margin-left:28px}
.brand{gap:0}             .brand > * + *{margin-left:10px}
.shotdots{gap:0}          .shotdots > * + *{margin-left:10px}
.quote .who{gap:0}        .quote .who > * + *{margin-left:12px}
.vidcap{gap:0}            .vidcap > * + *{margin-left:10px}
.navdrop-menu a{gap:0}    .navdrop-menu a > * + *{margin-left:12px}
.cta-row{gap:0}           .cta-row > *{margin:0 16px 16px 0}
.trustrow{gap:0}          .trustrow > *{margin:0 22px 22px 0}
footer .wrap{gap:0}       footer .wrap > *{margin:0 20px 20px 0}
.tdlist{gap:0}            .tdlist > *{margin:0 8px 8px 0}

/* ---------- Core Web Vitals: kill layout shift (CLS) on video cards + hero ----------
   The card itself must reserve the 16:9 box. Before styles.css parses, a <video> with no
   width/height is 300x150, so the page jumped when the poster loaded. Intrinsic attributes
   now cover that; these rules cover the rest, including engines without aspect-ratio. */
.vidcard{aspect-ratio:16/9}
.vidcard video{height:100%}
@supports not (aspect-ratio:16/9){
  .vidcard{height:0;padding-top:56.25%}
  .vidcard video{position:absolute;top:0;left:0;height:100%}
}
/* 100vh changes when the mobile URL bar hides, which reflows the hero. svh is stable;
   browsers without svh keep the 100vh above. */
.hero{min-height:100svh}
/* poster must not resize the box while it decodes */
.vidcard video[poster]{background-size:cover;background-position:center}
/* ---------- clickable tool cards (link, keep the existing hover lift) ---------- */
a.glasscard.tool{text-decoration:none;color:inherit;display:block;cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease}
a.glasscard.tool:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,20,25,.18)}
a.glasscard.tool h3{text-decoration:none}

/* ---------- centered, symmetric footer (now just Contact + Privacy) ---------- */
footer .wrap{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
footer .fbrand{margin:0}
footer a{margin:0 11px}

/* ---------- nav "Tools" dropdown ---------- */
.navdrop{position:relative;display:inline-block}
.navdrop-top{font-weight:800;color:var(--ink);text-decoration:none;font-size:15.5px;cursor:pointer}
.navdrop-top:hover{color:var(--candy-teal-deep)}
/* invisible bridge so the cursor can travel from "Tools" to the menu without losing hover */
.navdrop::after{content:"";position:absolute;left:0;top:100%;width:100%;height:18px}
.navdrop-menu{position:absolute;top:100%;left:0;margin-top:12px;background:#FFF8EF;border-radius:16px;
  box-shadow:0 18px 46px rgba(0,20,25,.20);padding:8px;min-width:236px;display:none;flex-direction:column;z-index:80}
.navdrop:hover .navdrop-menu,.navdrop-menu:hover{display:flex}
.navdrop-menu a{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;font-size:14px;
  font-weight:800;color:var(--ink);text-decoration:none;white-space:nowrap}
.navdrop-menu a:hover{background:rgba(14,147,168,.10);color:var(--candy-teal-deep)}
/* homepage card icons + tool-page (tdrow) images — real app art, card-style */
img.blob{object-fit:cover}
.tdrow img.blob.tdimg{width:104px;min-width:104px;max-width:104px;height:104px;flex:0 0 104px;object-fit:cover;border-radius:24px;
  box-shadow:0 8px 22px rgba(0,20,25,.16)}
@media(max-width:600px){.tdrow img.blob.tdimg{width:92px;min-width:92px;max-width:92px;height:92px;flex-basis:92px;margin:0 auto}}
/* ---------- tool landing-page prose ---------- */
.toolprose{max-width:840px;margin:0 auto}
.toolprose .lead{font-size:18.5px;line-height:1.62;margin:0 auto 26px;color:#2b3a48}
.toolprose h2{font-size:26px;color:var(--choc);margin:36px 0 12px;line-height:1.2}
.toolprose h3{font-size:19px;color:var(--choc);margin:24px 0 8px}
.toolprose p{font-size:16px;line-height:1.66;margin-bottom:14px;color:#3d4d5c}
.toolprose ul{margin:0 0 16px 22px}
.toolprose li{font-size:16px;line-height:1.6;margin-bottom:7px;color:#3d4d5c}
.toolprose a{color:var(--candy-teal-deep);font-weight:800}
.toolprose .toolrel{text-align:center;margin-top:32px;font-weight:800;color:#3d4d5c}
.tool-disc{margin-top:30px;font-size:13.5px;line-height:1.56;color:#6b5d49;background:#FFF7E6;
  border-left:4px solid #E6A817;border-radius:12px;padding:14px 16px}
@media(max-width:820px){
  .navlinks .navdrop.hideable{display:block}
  .navdrop-top{display:block;padding:13px 4px;border-bottom:1px solid rgba(0,0,0,.06)}
  .navdrop-menu{position:static;display:flex;box-shadow:none;margin:2px 0 2px 14px;padding:0;min-width:0;background:none}
  .navdrop-menu a{padding:10px 4px;font-size:15px;border-bottom:1px solid rgba(0,0,0,.05)}
}
/* ---------- per-page hero band ---------- */
.pagehero{padding:124px 24px 44px;text-align:center;
  background:radial-gradient(ellipse 90% 120% at 50% 0%, #2BD0E4 0%, var(--candy-teal) 60%, var(--candy-teal-deep) 100%)}
.pagehero h1{font-size:clamp(30px,5vw,48px);font-weight:800;color:#fff;line-height:1.14;
  text-shadow:0 3px 0 rgba(67,42,22,.5), 0 10px 22px rgba(0,40,50,.3)}
.pagehero p{margin:12px auto 0;max-width:640px;font-weight:700;color:#EAFBFF;font-size:16.5px}
.navlinks a[aria-current="page"]{color:var(--candy-teal-deep);text-decoration:underline;text-underline-offset:5px}
/* ---------- hamburger / mobile menu ---------- */
.navtoggle{display:none;background:none;border:0;font-size:27px;line-height:1;color:var(--choc);cursor:pointer;padding:4px 8px}
@media(max-width:820px){
  .navtoggle{display:block}
  /* the menu is taller than the screen on small phones — without its own scroll the last
     items (About, Contact) are unreachable and the page just scrolls behind it. */
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    padding:8px 18px 16px;box-shadow:0 14px 26px rgba(0,40,50,.2);display:none;
    max-height:calc(100vh - 62px);max-height:calc(100dvh - 62px);
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 4px;border-bottom:1px solid rgba(0,0,0,.06);font-size:17px}
  .navlinks a.hideable{display:block}
  .navlinks a.navcta,.navlinks a.jelly{text-align:center;margin-top:8px;border-bottom:0}
}
/* ---------- full-page videos (the two instructional landing pages) ----------
   In phone landscape the 16:9 video was rendering taller than the whole viewport and sitting
   below the fold, so rotating showed page content instead of the video. Cap it to the screen. */
.tools .wrap > .vidcard{max-width:720px;margin:0 auto;cursor:pointer}
.tools .wrap > .vidcard.lit{max-width:none}
@media(orientation:landscape) and (max-height:640px){
  .pagevid{width:auto;max-width:100%;max-height:calc(100vh - 20px);max-height:calc(100dvh - 20px)}
}
/* ---------- tool detail rows (Tools page) ---------- */
.tdrow{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start;padding:30px 32px;margin-bottom:22px}
.tdrow .blob{width:74px;height:74px;border-radius:22px;font-size:36px;flex:0 0 74px;margin:0}
.tdbody h3{color:var(--choc);font-size:23px;margin-bottom:8px}
.tdbody p{font-weight:700;color:#3d4d5c;margin-bottom:14px}
.tdlist{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.tdlist li{font-weight:800;font-size:13px;color:var(--choc);background:rgba(255,255,255,.6);
  border:1.5px solid rgba(0,0,0,.06);padding:6px 12px;border-radius:999px}
@media(max-width:600px){.tdrow{grid-template-columns:1fr;text-align:center}
  .tdrow .blob{margin:0 auto}.tdlist{justify-content:center}}