/* CaskAid website (caskaid.uk) — the advert/landing page. The app itself is app.html. */
:root{
  --navy:#0F4C68; --navy-2:#0B3A50; --navy-3:#082B3C; --sky:#468CB2; --sky-soft:#E3EEF4;
  --text:#1C2B33; --muted:#516670; --faint:#83949A; --line:rgba(28,43,51,.12);
  --bg:#FFFFFF; --cream:#F6F1E7; --cream-2:#EFE6D4; --grey:#EEF2F4;
  --green:#2E7D4F; --green-soft:#E3F1E8; --amber:#B07C24; --amber-soft:#F7ECD8;
  --radius:18px; --shadow:0 18px 50px rgba(15,76,104,.16);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ margin:0; background:var(--bg); color:var(--text); font-family:'IBM Plex Sans', -apple-system, 'Segoe UI', Arial, sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
h1,h2,h3{ font-family:'Fraunces', Georgia, serif; line-height:1.15; margin:0; letter-spacing:-.01em; }
h1{ font-size:clamp(38px, 6vw, 64px); font-weight:700; }
h2{ font-size:clamp(30px, 4.2vw, 44px); font-weight:700; }
h3{ font-size:22px; font-weight:600; }
p{ margin:0 0 14px; }
a{ color:var(--navy); }
img{ max-width:100%; display:block; }
.wrap{ max-width:1160px; margin:0 auto; padding:0 24px; }
@media (max-width:600px){ .wrap{ padding:0 16px; } body{ font-size:16px; } }
.eyebrow{ font-size:13px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--amber); margin-bottom:12px; display:block; }
.lead{ font-size:clamp(18px, 2vw, 21px); color:var(--muted); max-width:640px; }
.center{ text-align:center; } .center .lead{ margin-left:auto; margin-right:auto; }
:focus-visible{ outline:3px solid var(--sky); outline-offset:3px; border-radius:6px; }
.skip{ position:absolute; left:-999px; top:8px; background:var(--navy); color:#fff; padding:8px 14px; border-radius:8px; z-index:100; }
.skip:focus{ left:8px; }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font:inherit; font-size:16px; font-weight:600; padding:14px 22px; border-radius:12px; text-decoration:none; border:2px solid transparent; cursor:pointer; transition:transform .15s, box-shadow .15s, background .15s; white-space:nowrap; }
.btn:hover{ transform:translateY(-1px); }
.btn.primary{ background:var(--navy); color:#fff; box-shadow:0 6px 18px rgba(15,76,104,.28); }
.btn.primary:hover{ background:var(--navy-2); }
.btn.ghost{ background:transparent; color:var(--navy); border-color:rgba(15,76,104,.3); }
.btn.ghost:hover{ border-color:var(--navy); }
.btn.light{ background:#fff; color:var(--navy); }
.btn.small{ padding:9px 15px; font-size:14.5px; border-radius:10px; }
.btn-row{ display:flex; gap:12px; flex-wrap:wrap; }
.note{ font-size:14px; color:var(--faint); margin-top:12px; }

/* Header */
.site-head{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); }
.site-head .wrap{ display:flex; align-items:center; gap:18px; height:70px; }
.site-head .logo img{ height:40px; width:auto; }
.site-nav{ display:flex; gap:22px; margin-left:auto; }
.site-nav a{ color:var(--text); text-decoration:none; font-size:15px; font-weight:500; }
.site-nav a:hover{ color:var(--navy); text-decoration:underline; text-underline-offset:4px; }
.head-cta{ display:flex; gap:8px; }
.menu-btn{ display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:10px; width:44px; height:44px; cursor:pointer; color:var(--text); }
@media (max-width:980px){
  .site-nav{ display:none; position:absolute; top:70px; left:0; right:0; background:#fff; flex-direction:column; gap:0; padding:8px 16px 16px; border-bottom:1px solid var(--line); box-shadow:0 12px 24px rgba(0,0,0,.08); }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:12px 4px; border-bottom:1px solid var(--line); font-size:17px; }
  .menu-btn{ display:inline-flex; align-items:center; justify-content:center; }
}
@media (max-width:420px){ .head-cta .btn.primary{ padding:9px 12px; font-size:14px; } }

/* Hero */
.hero{ position:relative; background:radial-gradient(900px 500px at 85% 10%, rgba(70,140,178,.18), transparent 60%), radial-gradient(700px 500px at 0% 100%, rgba(176,124,36,.10), transparent 60%), var(--cream); overflow:hidden; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; padding-top:70px; padding-bottom:80px; }
.hero h1 .accent{ color:var(--navy); font-style:italic; }
.hero .lead{ margin:20px 0 28px; }
.ticks{ list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 20px; font-size:15px; color:var(--muted); }
.ticks li::before{ content:'✓'; color:var(--green); font-weight:700; margin-right:7px; }
.hero-phones{ position:relative; height:600px; }
.hero-phones .phone{ position:absolute; }
.hero-phones .phone.a{ width:270px; right:150px; top:10px; transform:rotate(-4deg); z-index:2; }
.hero-phones .phone.b{ width:250px; right:0; top:70px; transform:rotate(5deg); }
@media (max-width:900px){
  .hero .wrap{ grid-template-columns:1fr; padding-top:44px; padding-bottom:56px; }
  .hero-phones{ height:auto; display:flex; justify-content:center; align-items:flex-start; gap:12px; }
  .hero-phones .phone, .hero-phones .phone.a, .hero-phones .phone.b{ position:relative; right:auto; top:auto; }
  .hero-phones .phone.a{ width:min(43vw, 250px); transform:rotate(-3deg); }
  .hero-phones .phone.b{ width:min(40vw, 230px); transform:rotate(3deg); margin-top:30px; }
  .phone{ border-radius:30px; padding:7px; } .phone img{ border-radius:24px; }
}

/* Phone frame */
.phone{ background:#10181D; border-radius:40px; padding:9px; box-shadow:var(--shadow), inset 0 0 0 2px #2A353C; }
.phone img{ border-radius:32px; width:100%; height:auto; aspect-ratio:390/844; object-fit:cover; object-position:top; background:var(--grey); }
.browser{ background:#fff; border-radius:14px; box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--line); }
.browser img{ display:block; width:100%; height:auto; }
.browser .bar{ height:34px; background:#EEF2F4; display:flex; align-items:center; gap:7px; padding:0 14px; border-bottom:1px solid var(--line); }
.browser .bar i{ width:10px; height:10px; border-radius:50%; background:#C9D3D8; }
.browser .bar span{ margin-left:10px; font-size:12px; color:var(--faint); background:#fff; border-radius:6px; padding:3px 10px; }

/* Sections */
section{ padding:96px 0; }
@media (max-width:700px){ section{ padding:64px 0; } }
.band-cream{ background:var(--cream); }
.band-grey{ background:var(--grey); }
.band-navy{ background:linear-gradient(160deg, var(--navy) 0%, var(--navy-3) 100%); color:#EAF2F6; }
.band-navy h2, .band-navy h3{ color:#fff; }
.band-navy .lead, .band-navy p{ color:#C8DAE3; }
.band-navy .eyebrow{ color:#E6B865; }

/* Pain points */
.pains{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; margin-top:44px; }
.pain{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; }
.pain .ico{ width:46px; height:46px; border-radius:12px; background:var(--amber-soft); color:var(--amber); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.pain h3{ font-size:19px; margin-bottom:8px; }
.pain p{ color:var(--muted); font-size:15.5px; margin:0; }
@media (max-width:800px){ .pains{ grid-template-columns:1fr; } }

/* Feature rows */
.feature{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center; padding:48px 0; }
.feature + .feature{ border-top:1px solid var(--line); }
.feature.flip .shot{ order:-1; }
.feature .shot{ display:flex; justify-content:center; }
.feature .shot .phone{ width:290px; }
.feature h3{ font-size:clamp(26px, 3vw, 34px); margin-bottom:14px; }
.feature p{ color:var(--muted); }
.bullets{ list-style:none; padding:0; margin:18px 0 0; }
.bullets li{ position:relative; padding-left:30px; margin:10px 0; }
.bullets li::before{ content:''; position:absolute; left:0; top:6px; width:18px; height:18px; border-radius:50%; background:var(--green-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%232E7D4F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
@media (max-width:860px){
  .feature{ grid-template-columns:1fr; gap:32px; padding:36px 0; }
  .feature.flip .shot{ order:0; }
  .feature .shot .phone{ width:min(76vw, 280px); }
}

/* Cask Marque */
.cm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
.cm-card{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); padding:26px; }
.cm-card .tag{ display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:20px; background:rgba(230,184,101,.18); color:#F0CB86; margin-bottom:12px; }
.cm-card h3{ margin-bottom:8px; }
.cm-card ul{ margin:12px 0 0; padding-left:20px; color:#C8DAE3; }
.cm-card li{ margin:5px 0; }
.report-row{ display:grid; grid-template-columns:1.35fr .65fr; gap:36px; align-items:center; margin-top:56px; }
.report-row .browser{ transform:perspective(1600px) rotateY(-4deg); }
.report-row .phone{ width:250px; margin:0 auto; }
.share-points{ display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:40px; }
.share-points div{ background:rgba(255,255,255,.06); border-radius:14px; padding:18px; font-size:15px; color:#C8DAE3; }
.share-points b{ display:block; color:#fff; font-size:16.5px; margin-bottom:4px; }
.disclaimer{ font-size:13px; color:#9FB8C4 !important; margin-top:28px; }
@media (max-width:900px){ .cm-grid, .report-row, .share-points{ grid-template-columns:1fr; } .report-row .browser{ transform:none; } }
/* On phones the wide desktop report is unreadable - show the phone version instead */
@media (max-width:700px){ .report-row{ margin-top:36px; } .report-row .browser{ display:none; } .report-row .phone{ width:min(290px, 82vw); } }

/* Extras grid */
.extras{ display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; margin-top:44px; }
.extra{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:22px; }
.extra .ico{ width:40px; height:40px; border-radius:11px; background:var(--sky-soft); color:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.extra h3{ font-family:'IBM Plex Sans', sans-serif; font-size:16.5px; font-weight:600; margin-bottom:6px; letter-spacing:0; }
.extra p{ font-size:14.5px; color:var(--muted); margin:0; }
@media (max-width:980px){ .extras{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:520px){ .extras{ grid-template-columns:1fr; } }

/* Pricing */
.plans{ display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:48px; align-items:stretch; }
.plan{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px; display:flex; flex-direction:column; }
.plan.featured{ border:2px solid var(--navy); box-shadow:var(--shadow); position:relative; }
.plan .badge{ position:absolute; top:-13px; left:30px; background:var(--navy); color:#fff; font-size:12.5px; font-weight:600; letter-spacing:.05em; padding:5px 12px; border-radius:20px; }
.plan h3{ font-size:24px; }
.plan .who{ color:var(--muted); font-size:15px; margin:4px 0 18px; }
.price{ font-family:'Fraunces', Georgia, serif; font-size:52px; font-weight:700; line-height:1; color:var(--text); }
.price small{ font-family:'IBM Plex Sans', sans-serif; font-size:15px; font-weight:500; color:var(--muted); }
.plan .bullets{ flex:1; margin-bottom:24px; font-size:15.5px; }
.plan.custom{ background:var(--navy); color:#EAF2F6; border-color:var(--navy); }
.plan.custom h3, .plan.custom .price{ color:#fff; }
.plan.custom .who, .plan.custom .bullets{ color:#C8DAE3; }
.plan.custom .price{ font-size:38px; }
.trial-strip{ margin-top:30px; background:var(--green-soft); border-radius:16px; padding:18px 22px; display:flex; gap:14px 28px; flex-wrap:wrap; justify-content:center; font-size:15.5px; color:#1F5A38; font-weight:500; }
@media (max-width:960px){ .plans{ grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto; } }

/* Groups & breweries */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px; }
.who-card{ background:#fff; border-radius:22px; padding:32px; border:1px solid var(--line); }
.who-card .ico{ width:52px; height:52px; border-radius:14px; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.who-card h3{ font-size:26px; margin-bottom:10px; }
.who-card p{ color:var(--muted); }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

/* Contact */
.contact{ display:grid; grid-template-columns:.8fr 1.2fr; gap:48px; align-items:start; }
.contact-aside p{ color:var(--muted); }
.contact-aside .mail{ font-size:20px; font-weight:600; }
.form{ background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px; box-shadow:0 10px 30px rgba(15,76,104,.08); }
.form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ margin-bottom:16px; }
.field label{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; }
.field label small{ font-weight:400; color:var(--faint); }
.field input, .field select, .field textarea{ width:100%; font:inherit; font-size:16px; color:var(--text); background:#FAFBFC; border:1.5px solid #CBD6DC; border-radius:11px; padding:12px 14px; }
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(15,76,104,.15); background:#fff; }
.check{ display:flex; gap:10px; align-items:flex-start; font-size:15px; margin:4px 0 18px; }
.check input{ width:20px; height:20px; margin-top:2px; accent-color:var(--navy); }
.hp{ position:absolute; left:-5000px; width:1px; height:1px; overflow:hidden; }
.form-msg{ margin-top:14px; font-size:15px; }
.form-msg.ok{ background:var(--green-soft); color:#1F5A38; padding:14px 16px; border-radius:12px; }
.form-msg.err{ color:#A13A22; }
.privacy-note{ font-size:13px; color:var(--faint); margin:12px 0 0; }
@media (max-width:860px){ .contact{ grid-template-columns:1fr; } .form .row{ grid-template-columns:1fr; gap:0; } .form{ padding:22px; } }

/* FAQ */
.faq{ max-width:820px; margin:40px auto 0; }
.faq details{ border-bottom:1px solid var(--line); padding:4px 0; }
.faq summary{ cursor:pointer; list-style:none; padding:18px 40px 18px 0; font-weight:600; font-size:17.5px; position:relative; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; position:absolute; right:6px; top:12px; font-size:26px; color:var(--navy); font-weight:400; }
.faq details[open] summary::after{ content:'–'; }
.faq details p{ color:var(--muted); padding:0 0 12px; margin:0; }

/* Final CTA + footer */
.final{ text-align:center; }
.final .btn-row{ justify-content:center; margin-top:28px; }
.site-foot{ background:var(--navy-3); color:#9FB8C4; padding:48px 0 36px; font-size:14.5px; }
.site-foot .wrap{ display:flex; gap:28px; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; }
.site-foot a{ color:#DCE9EF; text-decoration:none; }
.site-foot a:hover{ text-decoration:underline; }
.site-foot .cols{ display:flex; gap:48px; flex-wrap:wrap; }
.site-foot h4{ color:#fff; font-size:14px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.08em; }
.site-foot ul{ list-style:none; padding:0; margin:0; }
.site-foot li{ margin:6px 0; }
.site-foot .brand img{ height:44px; width:auto; background:#fff; border-radius:10px; padding:4px 8px; }
.site-foot .legal{ width:100%; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; margin-top:8px; font-size:13px; }
.code-banner{ background:var(--green); color:#fff; text-align:center; font-size:15px; padding:10px 16px; }

/* Reveal on scroll */
.anim .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.anim .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .anim .reveal{ opacity:1; transform:none; transition:none; } }

/* Social links in the footer */
.site-foot .social{ display:flex; gap:10px; margin-top:18px; }
.site-foot .social a{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.08); color:#DCE9EF; transition:background .15s, color .15s; }
.site-foot .social a:hover{ background:#fff; color:var(--navy-3); text-decoration:none; }
.site-foot .social a:focus-visible{ outline:3px solid #E6B865; outline-offset:2px; }
.site-foot .social svg{ width:20px; height:20px; }
@media (prefers-reduced-motion:reduce){ .site-foot .social a{ transition:none; } }

/* Cask pictures on the plans (drawn to scale), and the groups strip under them */
.plan .cask{ height:92px; display:flex; align-items:flex-end; margin:0 0 14px; }
.plan .cask img{ display:block; height:auto; }
.plan .cask img.pin{ width:76px; } .plan .cask img.firkin{ width:96px; } .plan .cask img.kilderkin{ width:121px; }
.plan-groups{ margin-top:20px; background:var(--navy); color:#C8DAE3; border-radius:22px; padding:24px 30px; display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap; }
.plan-groups h3{ color:#fff; font-size:22px; margin:0 0 4px; }
.plan-groups p{ margin:0; max-width:640px; font-size:15.5px; }
/* ---------- CoffeeAid add-on and the ChefAid sister app ---------- */
.aid-row{ display:grid; grid-template-columns:170px 1fr auto; gap:32px; align-items:center; }
.aid-row.two{ grid-template-columns:240px 1fr; }
.aid-coffee{ background:#FBF5EA; } .aid-coffee h2{ color:#4E2511; } .aid-coffee .eyebrow{ color:#7A4A2B; }
.aid-badge{ width:170px; background:#fff; border-radius:18px; padding:10px 14px; box-shadow:0 6px 18px rgba(78,37,17,.14); }
.aid-coffee-btn{ background:#4E2511; color:#fff; } .aid-coffee-btn:hover{ background:#3A1B0C; }
.aid-packs{ display:flex; flex-direction:column; gap:10px; min-width:230px; }
.aid-packs div{ background:#fff; border:1px solid #EADFCF; border-radius:12px; padding:10px 14px; display:flex; flex-direction:column; }
.aid-packs b{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#7A4A2B; }
.aid-packs .p{ font:700 26px 'Fraunces', Georgia, serif; color:#4E2511; } .aid-packs .p small{ font:400 14px 'IBM Plex Sans', sans-serif; color:#6E5A4A; }
.aid-packs span:last-child{ font-size:13.5px; color:#6E5A4A; }
.aid-sister{ background:#F3F6F1; } .aid-sister h2{ color:#0B5539; } .aid-sister .eyebrow{ color:#6E8C14; }
.aid-sister-logo{ width:240px; }
.aid-chef-btn{ background:#0B5539; color:#fff; } .aid-chef-btn:hover{ background:#08402B; }
.aid-sister .btn.ghost{ color:#0B5539; border-color:rgba(11,85,57,.3); }
@media (max-width:860px){ .aid-row, .aid-row.two{ grid-template-columns:1fr; text-align:center; gap:20px; } .aid-badge, .aid-sister-logo{ margin:0 auto; width:180px; } .aid-packs{ min-width:0; text-align:left; } .aid-sister .btn-row{ justify-content:center; } }

/* Sign in / free trial: always visible, phones included */
.head-cta .btn{ white-space:nowrap; }
.app-links{ margin:14px 0 0; font-size:15px; color:var(--muted); }
.app-links a{ font-weight:700; }
.site-nav .nav-app{ display:none; }
@media (max-width:980px){ .site-nav .nav-app{ display:block; font-weight:700; } }
@media (max-width:420px){ .head-cta{ gap:6px; } .head-cta .btn{ padding:8px 10px; font-size:13.5px; } .site-head .logo img{ height:32px; } }
.tour video{ width:100%; max-width:960px; margin:30px auto 0; border-radius:var(--radius); box-shadow:var(--shadow); background:#000; aspect-ratio:16/9; }

/* ---------- Pour-and-settle: brand animations (Oct 2026) ---------- */
/* Bubbles rising through the hero, like a freshly pulled pint */
.bubbles{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:0; }
.hero .wrap{ position:relative; z-index:1; }
.bubbles span{ position:absolute; bottom:-20px; width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9), rgba(176,124,36,.35) 60%, rgba(176,124,36,.15));
  box-shadow:0 0 0 1px rgba(176,124,36,.18); opacity:0; animation:rise 9s linear infinite; }
.bubbles span:nth-child(1){ left:4%;  animation-delay:0s;   animation-duration:10s; }
.bubbles span:nth-child(2){ left:11%; animation-delay:2.5s; width:6px; height:6px; }
.bubbles span:nth-child(3){ left:19%; animation-delay:5s;   animation-duration:12s; }
.bubbles span:nth-child(4){ left:27%; animation-delay:1s;   width:7px; height:7px; }
.bubbles span:nth-child(5){ left:36%; animation-delay:6.5s; animation-duration:11s; }
.bubbles span:nth-child(6){ left:44%; animation-delay:3.2s; width:5px; height:5px; }
.bubbles span:nth-child(7){ left:52%; animation-delay:7.8s; }
.bubbles span:nth-child(8){ left:58%; animation-delay:.6s;  width:12px; height:12px; animation-duration:13s; }
.bubbles span:nth-child(9){ left:64%; animation-delay:4.4s; width:6px; height:6px; }
.bubbles span:nth-child(10){ left:70%; animation-delay:8.6s; }
.bubbles span:nth-child(11){ left:76%; animation-delay:2s;   width:8px; height:8px; animation-duration:10.5s; }
.bubbles span:nth-child(12){ left:82%; animation-delay:5.6s; width:5px; height:5px; }
.bubbles span:nth-child(13){ left:88%; animation-delay:1.6s; animation-duration:12.5s; }
.bubbles span:nth-child(14){ left:93%; animation-delay:7s;   width:7px; height:7px; }
.bubbles span:nth-child(15){ left:48%; animation-delay:9.5s; width:4px; height:4px; }
.bubbles span:nth-child(16){ left:15%; animation-delay:11s;  width:9px; height:9px; }
@keyframes rise{
  0%{ transform:translate(0,0); opacity:0; }
  10%{ opacity:.85; }
  50%{ transform:translate(6px,-45vh); }
  90%{ opacity:.6; }
  100%{ transform:translate(-4px,-90vh); opacity:0; }
}
/* "sorted." gets an amber underline poured in once the page loads */
.hero h1 .accent{ position:relative; white-space:nowrap; }
.hero h1 .accent::after{ content:""; position:absolute; left:2%; right:2%; bottom:.04em; height:.12em; border-radius:99px;
  background:linear-gradient(90deg, var(--amber), #D9A441); transform:scaleX(0); transform-origin:left; animation:pourline 1s .5s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes pourline{ to{ transform:scaleX(1); } }
/* The phones float gently, out of step with each other */
.hero-phones .phone.a{ animation:floaty 7s ease-in-out infinite; }
.hero-phones .phone.b{ animation:floaty 8s 1.2s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ translate:0 0; } 50%{ translate:0 -10px; } }
/* Main buttons fill like a pint being poured when you point at them */
.btn.primary{ position:relative; overflow:hidden; isolation:isolate; }
.btn.primary::before{ content:""; position:absolute; left:0; right:0; bottom:0; height:0; z-index:-1;
  background:linear-gradient(180deg, #F4E7C5 0 10%, #C9902F 10% 100%); transition:height .45s cubic-bezier(.3,.7,.2,1); }
.btn.primary:hover::before, .btn.primary:focus-visible::before{ height:100%; }
.btn.primary:hover{ color:#1C2B33; }
/* Lighter page: extra features tucked behind a tap */
.more-panel{ margin-top:34px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; }
.more-panel > summary{ cursor:pointer; list-style:none; padding:18px 22px; font-weight:600; color:var(--navy); display:flex; justify-content:space-between; gap:12px; }
.more-panel > summary::-webkit-details-marker{ display:none; }
.more-panel > summary::after{ content:"+"; font-size:22px; line-height:1; color:var(--amber); transition:transform .2s; }
.more-panel[open] > summary::after{ transform:rotate(45deg); }
.more-panel > .feature{ padding:0 22px 28px; }
/* Halfway call to action */
.cta-strip{ background:var(--navy); color:#fff; padding:44px 0; }
.cta-strip .wrap{ display:flex; align-items:center; justify-content:space-between; gap:20px 40px; flex-wrap:wrap; }
.cta-strip h2{ color:#fff; font-size:clamp(24px,3vw,32px); margin:0; }
.cta-strip p{ margin:6px 0 0; color:rgba(255,255,255,.8); }
.cta-strip .btn-row{ margin:0; }
.cta-strip .btn.ghost{ color:#fff; border-color:rgba(255,255,255,.45); }
/* Phones: the two main choices stay one tap away */
.sticky-cta{ display:none; }
@media (max-width:760px){
  .sticky-cta{ display:flex; gap:8px; position:fixed; left:0; right:0; bottom:0; z-index:50; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background:rgba(255,255,255,.96); backdrop-filter:blur(8px); box-shadow:0 -6px 20px rgba(15,76,104,.12);
    transform:translateY(110%); transition:transform .3s ease; }
  .sticky-cta.show{ transform:none; }
  .sticky-cta .btn{ flex:1; padding:12px 10px; font-size:15px; }
}
@media (prefers-reduced-motion:reduce){
  .bubbles{ display:none; }
  .hero h1 .accent::after{ animation:none; transform:none; }
  .hero-phones .phone.a, .hero-phones .phone.b{ animation:none; }
  .btn.primary::before{ transition:none; }
  .sticky-cta{ transition:none; }
}
.cta-strip .btn.primary{ background:#E6B865; color:var(--navy-3); box-shadow:none; }
.cta-strip .btn.primary::before{ background:linear-gradient(180deg, #FFF6DD 0 10%, #F2CF7E 10% 100%); }
.cta-strip{ background:var(--navy-3); border-bottom:3px solid #E6B865; }