/* Woofit - Sunny Arcade
   Palette: cream #FFF4E2 / ink #33241A / orange #FF7A1A-#FFA624 / sun #FFC93C / teal #00877C */
:root{
  --cream:#FFF4E2; --ink:#33241A; --muted:#8A6B4F; --white:#fff;
  --orange:#FF7A1A; --orange-lt:#FFA624; --sun:#FFC93C; --teal:#00877C; --teal-bg:#D9F5F1;
  --peach:#FFE1B8; --border:2.5px solid var(--ink); --r:26px; --shadow:0 5px 0 var(--ink);
  --head:'Baloo 2','Trebuchet MS',system-ui,sans-serif;
  --body:'Nunito','Segoe UI',system-ui,-apple-system,sans-serif;
  --wrap:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body{margin:0;background:var(--cream);color:var(--ink);font:600 17px/1.6 var(--body);text-wrap:pretty}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-family:var(--head);font-weight:800;margin:0;line-height:1.08}
h1{font-size:clamp(38px,7.4vw,66px)}
h2{font-size:clamp(27px,4.6vw,42px)}
h3{font-size:clamp(20px,2.4vw,25px)}
p{margin:0}
a{color:var(--teal);text-decoration:none}
a:hover{color:#005F57;text-decoration:underline}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(16px,4vw,28px)}
.skip{position:absolute;left:-9999px;top:0;background:var(--white);border:var(--border);border-radius:0 0 12px 0;padding:10px 16px;font-weight:800;z-index:80}
.skip:focus{left:0}
.muted{color:var(--muted)}
section{padding:clamp(40px,6vw,64px) 0}
.lede{font-size:clamp(16px,2vw,19px);color:var(--muted);margin-top:14px;max-width:56ch}

/* buttons */
.btn{display:inline-block;font:800 clamp(16px,1.6vw,19px)/1 var(--head);padding:16px 26px;border:var(--border);border-radius:999px;box-shadow:0 5px 0 var(--ink);background:var(--white);color:var(--ink);text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(1px);box-shadow:0 4px 0 var(--ink);color:var(--ink)}
.btn-primary{background:linear-gradient(180deg,var(--orange-lt),var(--orange));color:#fff;text-shadow:0 1px 0 rgba(51,36,26,.35)}
.btn-primary:hover{color:#fff}
.btn-sm{font-size:15px;padding:11px 18px;box-shadow:0 4px 0 var(--ink)}
.btn.is-soon{cursor:default;opacity:.95}
.btn.is-soon:hover{transform:none}
.pills{display:flex;flex-wrap:wrap;gap:9px;margin-top:22px;list-style:none;padding:0}
.pill{background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:6px 13px;font:800 12.5px var(--body);box-shadow:0 2px 0 var(--ink)}
.pill-peach{background:var(--peach);box-shadow:none}
.tag{display:inline-flex;align-items:center;gap:7px;background:var(--teal-bg);border:2px solid var(--teal);border-radius:999px;padding:5px 13px;font:800 12px var(--body);letter-spacing:.06em;color:var(--teal);text-transform:uppercase}

/* header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,244,226,.86);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:var(--border)}
.head-inner{display:flex;align-items:center;gap:14px;padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto;color:var(--ink);text-decoration:none;font:800 26px var(--head)}
.brand:hover{color:var(--ink);text-decoration:none}
.brand img{border-radius:7px}
.brand-light{color:var(--cream)}
.nav-desk{display:flex;align-items:center;gap:22px;font:800 14px var(--body)}
.nav-desk a{color:var(--ink)}
.head-actions{display:flex;align-items:center;gap:12px}
.lang{font:800 13.5px var(--body);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:7px 13px;background:var(--white)}
.lang:hover{color:var(--ink);text-decoration:none;background:var(--peach)}
.burger{display:none;flex-direction:column;gap:4px;align-items:center;justify-content:center;width:46px;height:46px;background:var(--white);border:var(--border);border-radius:14px;box-shadow:0 3px 0 var(--ink);cursor:pointer}
.burger span{display:block;width:20px;height:2.5px;background:var(--ink);border-radius:2px}
.menu{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;background:rgba(255,244,226,.72);backdrop-filter:blur(22px) saturate(1.4);-webkit-backdrop-filter:blur(22px) saturate(1.4)}
.menu[hidden]{display:none}
.menu-top{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
.menu-close{width:46px;height:46px;background:var(--white);border:var(--border);border-radius:14px;font:800 24px var(--head);color:var(--ink);cursor:pointer;line-height:1}
.menu-links{display:flex;flex-direction:column;gap:2px;padding-top:18px}
.menu-links a{font:800 clamp(24px,7vw,30px) var(--head);color:var(--ink);padding:8px 0}
.menu-foot{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto;padding-bottom:34px}
.menu-foot .btn{width:100%;text-align:center}
@media (max-width:900px){
  .nav-desk,.head-actions{display:none}
  .burger{display:flex}
}

/* hero */
.hero{padding-bottom:0;overflow:hidden}
.hero-grid{display:flex;flex-wrap:wrap;gap:clamp(24px,4vw,56px);align-items:flex-end}
.hero-copy{flex:1 1 460px;min-width:0;padding-bottom:clamp(30px,5vw,56px)}
.hero-copy h1{margin-top:16px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.phones{flex:1 1 min(100%,520px);display:flex;gap:clamp(10px,2vw,20px);align-items:flex-end;justify-content:center;min-width:0}
.phone{flex:1 1 58%;max-width:300px;min-width:0;aspect-ratio:1/2;border-radius:32px 32px 0 0;overflow:hidden;box-shadow:0 -3px 0 rgba(51,36,26,.12)}
.phone-sm{flex:1 1 40%;max-width:210px;aspect-ratio:1/2.05;border-radius:22px 22px 0 0;box-shadow:none}
.phone img{width:139%;max-width:none;margin:-108% 0 0 -19.5%}

/* ticker strip */
.strip{background:var(--ink);color:var(--cream);border-top:var(--border);border-bottom:var(--border);padding:20px 0}
.strip ul{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;margin:0;padding:0;list-style:none;font:800 15px var(--body)}

/* loop */
.loop{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-top:32px;padding:0;list-style:none}
.loop li{background:var(--white);border:var(--border);border-radius:22px;box-shadow:var(--shadow);padding:22px}
.loop .n{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;background:var(--sun);border:var(--border);border-radius:13px;font:800 20px var(--head)}
.loop h3{margin-top:12px}
.loop p{margin-top:6px;font-size:15px;color:var(--muted)}

/* feature cards with screenshots */
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:22px;margin-top:30px}
.card{flex:1 1 300px;max-width:430px;background:var(--white);border:var(--border);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.card-txt{padding:24px 24px 0}
.card-txt p{margin-top:8px;font-size:15px;color:var(--muted)}
.shot{flex:1;min-height:0;aspect-ratio:1/1.05;width:100%;margin-top:20px;overflow:hidden;position:relative}
.shot img{width:133%;max-width:none;margin:-84% 0 0 -16.5%}
.shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(255,255,255,0),#fff);pointer-events:none}
.card-wide{flex:1 1 100%;max-width:none}

/* photo strip */
.photos{position:relative;height:clamp(190px,26vw,280px);margin-top:22px;overflow:hidden}
.photos figure{position:absolute;top:0;height:100%;width:24%;margin:0;overflow:hidden;border-left:3px solid #fff;box-shadow:-8px 0 22px rgba(51,36,26,.3);transition:left .45s cubic-bezier(.22,1,.36,1),transform .45s cubic-bezier(.22,1,.36,1)}
.photos figure img{width:100%;height:100%;object-fit:cover}
.photos figure:nth-child(1){left:0;z-index:1}
.photos figure:nth-child(2){left:15.2%;z-index:2}
.photos figure:nth-child(3){left:30.4%;z-index:3}
.photos figure:nth-child(4){left:45.6%;z-index:4}
.photos figure:nth-child(5){left:60.8%;z-index:5}
.photos figure:nth-child(6){left:76%;z-index:6}
@media (hover:hover){
  .photos figure:hover{width:34%;z-index:20;box-shadow:-10px 0 30px rgba(51,36,26,.38)}
  .photos figure:hover ~ figure{transform:translateX(12%)}
}

/* badges */
.panel{background:var(--white);border:var(--border);border-radius:28px;box-shadow:var(--shadow);padding:clamp(22px,3.4vw,34px) clamp(18px,3vw,30px)}
.panel-split{display:flex;flex-wrap:wrap;gap:26px;align-items:center;justify-content:space-between}
.panel-split>div:first-child{flex:1 1 380px;max-width:460px}
.badge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(76px,1fr));gap:14px;flex:1 1 240px;min-width:0;max-width:520px;width:100%;margin:0;padding:0;list-style:none}
.badge-grid figure{margin:0;text-align:center}
.badge-grid img{width:100%;max-width:86px;aspect-ratio:1;margin:0 auto}
.badge-grid figcaption{font:800 11px var(--body);margin-top:4px}
.rarity{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px;padding:0;list-style:none;font:800 10.5px var(--body);letter-spacing:.06em}
.rarity li{border:2px solid var(--ink);border-radius:999px;padding:4px 10px}
.rarity li:last-child{background:var(--sun)}

/* gallery */
.gallery{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;padding:0;list-style:none}
.gallery img{width:clamp(132px,42vw,206px);border:2px solid var(--ink);border-radius:14px;box-shadow:0 3px 0 var(--ink)}

/* about */
.about{background:var(--white);border:var(--border);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-wrap:wrap}
.about-img{flex:1 1 420px;min-width:min(100%,300px);position:relative;min-height:clamp(240px,42vw,360px)}
.about-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about-txt{flex:1 1 460px;min-width:0;padding:clamp(24px,4vw,38px) clamp(20px,3.4vw,36px)}
.about-txt h2{margin-top:14px}
.about-txt p{margin-top:14px;font-size:16px;color:#5C4632}
.kicker{display:inline-flex;background:var(--ink);color:var(--cream);border-radius:999px;padding:5px 12px;font:800 11.5px var(--body);letter-spacing:.07em;text-transform:uppercase}

/* plus */
.plus{background:linear-gradient(180deg,var(--sun),var(--orange-lt));border:var(--border);border-radius:28px;box-shadow:var(--shadow);padding:clamp(26px,4vw,40px) clamp(20px,3.4vw,34px)}
.plus h2{max-width:20ch}
.plus-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:22px;padding:0;list-style:none;font-weight:700}
.plus-list li{background:rgba(255,255,255,.92);border:2px solid var(--ink);border-radius:16px;padding:14px 16px}
.plus .note{margin-top:18px;font-size:14px;color:#6E4A0E;max-width:70ch}

/* faq */
.faq{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;margin-top:26px}
.faq details{background:var(--white);border:var(--border);border-radius:20px;padding:18px 22px}
.faq summary{font:800 17px var(--head);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;font-size:20px}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:8px;font-size:15px;color:var(--muted)}

/* final cta */
.final{background:linear-gradient(180deg,var(--orange-lt),var(--orange));border:var(--border);border-radius:30px;box-shadow:0 6px 0 var(--ink);padding:clamp(32px,5vw,52px) clamp(20px,3.4vw,34px);text-align:center}
.final h2{color:#fff;text-shadow:0 2px 0 rgba(51,36,26,.3);font-size:clamp(30px,5.4vw,50px)}
.final p{color:rgba(255,255,255,.94);font-weight:700;margin-top:12px}
.final .btn{margin-top:22px;background:var(--cream)}

/* documents (legal/support) */
.doc{max-width:860px}
.doc h1{font-size:clamp(32px,5vw,46px)}
.doc .updated{font:700 13px var(--body);color:var(--muted);margin-top:12px}
.doc h2{font-size:clamp(21px,2.6vw,24px);margin-top:34px}
.doc p,.doc li{font-size:16px;color:#5C4632;margin-top:10px}
.doc ul{padding-left:22px}
.doc-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:34px}
.doc-cards article{background:var(--white);border:var(--border);border-radius:22px;box-shadow:var(--shadow);padding:22px 24px}
.doc-cards h2{margin-top:0;font-size:19px}
.doc-cards p{font-size:14.5px;line-height:1.65}

/* footer */
.site-foot{background:var(--ink);color:rgba(255,244,226,.78);border-top:var(--border);margin-top:20px}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:30px;padding-top:40px;padding-bottom:40px}
.foot-grid a{display:block;color:rgba(255,244,226,.8);font:700 13.5px var(--body);margin-top:9px}
.foot-grid a:hover{color:#fff}
.foot-h{font:800 11px var(--body);letter-spacing:.08em;color:rgba(255,244,226,.5);text-transform:uppercase}
.foot-tag{font-size:13px;margin-top:10px;max-width:30ch}
.foot-bar{border-top:1px solid rgba(255,244,226,.15);font:600 12px var(--body);color:rgba(255,244,226,.55);padding:16px 0}

/* avatar transform */
.avatar{background:linear-gradient(180deg,var(--sun),var(--orange-lt));border:var(--border);border-radius:28px;box-shadow:var(--shadow);padding:clamp(24px,3.6vw,36px) clamp(20px,3vw,32px);display:flex;flex-wrap:wrap;gap:clamp(20px,3vw,34px);align-items:center;justify-content:space-between}
.avatar-copy{flex:1 1 380px;min-width:0;max-width:520px}
.avatar-copy h2{margin-top:14px}
.avatar-copy p{margin-top:12px;color:#6E4A0E}
.avatar-row{flex:1 1 380px;display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,18px)}
.avatar-row figure{margin:0;text-align:center}
.avatar-row .frame{width:clamp(110px,24vw,168px);aspect-ratio:1;border:var(--border);border-radius:24px;overflow:hidden;background:var(--cream);position:relative}
.avatar-row .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.avatar-row .frame.round{border-radius:50%;background:#fff}
.avatar-row .frame.round img{object-fit:contain;padding:10%}
.avatar-row figcaption{font:800 12px var(--body);margin-top:8px;color:#6E4A0E;text-transform:uppercase;letter-spacing:.05em}
.avatar-arrow{font:800 clamp(24px,3vw,34px) var(--head);color:var(--ink)}

/* plans */
.plans{display:flex;flex-wrap:wrap;gap:20px;margin-top:28px;align-items:stretch}
.plan{flex:1 1 300px;max-width:520px;background:var(--white);border:var(--border);border-radius:var(--r);box-shadow:var(--shadow);padding:clamp(22px,3vw,28px);display:flex;flex-direction:column}
.plan h3{font-size:clamp(21px,2.4vw,25px)}
.plan .price{font:800 clamp(28px,3.4vw,38px) var(--head);margin-top:6px}
.plan .price small{font:800 15px var(--body);color:var(--muted);display:block;margin-top:4px}
.plan ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;font-weight:700;font-size:15.5px;flex:1}
.plan li::before{content:"\2713";color:var(--teal);font-weight:800;margin-right:8px}
.plan .btn{margin-top:22px;text-align:center}
.plan-dark{background:var(--ink);color:var(--cream);box-shadow:0 5px 0 #8A6B4F;position:relative}
.plan-dark .price small{color:rgba(255,244,226,.6)}
.plan-dark li::before{color:var(--sun)}
.plan-flag{position:absolute;top:-14px;right:20px;background:var(--sun);border:var(--border);border-radius:999px;padding:4px 12px;font:800 11.5px var(--body);letter-spacing:.06em;color:var(--ink);text-transform:uppercase}

/* kicker must stay cream on ink wherever it sits */
p.kicker,.about-txt p.kicker,.avatar-copy p.kicker{color:var(--cream)}
/* avatar source photo: blurred fill behind a soft-masked cut-out, as in the mockup */
.avatar-row .frame .blur{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(6px);transform:scale(1.12)}
.avatar-row .frame .cut{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;-webkit-mask:radial-gradient(circle at 50% 52%,#000 40%,transparent 72%);mask:radial-gradient(circle at 50% 52%,#000 40%,transparent 72%)}
.plan .price .amount{display:block}
.plan .per{font:800 16px var(--body);color:var(--muted)}
.plan-dark .per{color:rgba(255,244,226,.65)}
.plan .save{font:700 12.5px var(--body);color:var(--muted);margin-top:6px;display:block}
.plan-dark .save{color:rgba(255,244,226,.6)}