/* SeePet website — static, no third-party resources. */
:root{
  --ink:#151B26;--ink-2:#3A4352;--muted:#667085;--line:#E8E4DE;--bg:#FFFFFF;--bg-2:#FAF7F3;--bg-3:#F3EEE8;
  --coral:#F2603D;--coral-2:#FF8A5B;--coral-soft:#FFF1EC;--teal:#0E9F8E;--teal-2:#14B8A6;--teal-soft:#E8F7F5;--honey:#F5B83D;--violet:#6F5BEA;--red:#E5484D;
  --navy:#0F1724;--coral-ink:#C9401F;--btn:#D04425;--teal-ink:#086A5F;--r:20px;--r-lg:28px;--w:1180px;
  --shadow-s:0 1px 2px rgba(16,24,40,.05);--shadow:0 1px 2px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.08);--shadow-l:0 30px 80px rgba(16,24,40,.18);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}a{color:inherit}
h1,h2,h3{margin:0 0 .5em;line-height:1.12;letter-spacing:-.022em;font-weight:800}
h1{font-size:clamp(38px,5.4vw,64px)}h2{font-size:clamp(30px,3.6vw,44px)}h3{font-size:20px;letter-spacing:-.01em}
p{margin:0 0 1em;color:var(--ink-2)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:6px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--coral-ink)}
.eyebrow .i{width:16px;height:16px}
.lead{font-size:clamp(18px,1.6vw,20px);color:var(--ink-2);max-width:560px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:16px;text-decoration:none;border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}
.btn .i{width:19px;height:19px}.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--btn);color:#fff;box-shadow:0 8px 20px rgba(208,68,37,.26)}.btn-primary:hover{background:#B93A1C;box-shadow:0 12px 26px rgba(242,96,61,.34)}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}.btn-ghost:hover{border-color:#CFC7BD}
.btn-dark{background:var(--ink);color:#fff}.btn-soon{background:var(--bg-3);color:#545D6E;cursor:default}.btn-soon:hover{transform:none}
.btn small{font-weight:600;opacity:.75;font-size:12px}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--line)}
.top .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;text-decoration:none;letter-spacing:-.01em}.brand img{width:34px;height:34px;border-radius:9px}
.nav{display:flex;gap:26px;margin-left:auto;font-size:15px;font-weight:600}.nav a{text-decoration:none;color:var(--ink-2)}.nav a:hover{color:var(--ink)}
.top-actions{display:flex;align-items:center;gap:12px}
.lang{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;text-decoration:none;color:var(--ink-2);padding:7px 11px;border:1px solid var(--line);border-radius:999px}.lang .i{width:15px;height:15px}
.top .btn{padding:10px 16px;font-size:14px}

/* hero */
.hero{position:relative;overflow:hidden;background:radial-gradient(1200px 520px at 85% -10%,#FFE6DC 0,rgba(255,230,220,0) 60%),radial-gradient(900px 500px at -10% 30%,#E3F6F3 0,rgba(227,246,243,0) 60%),var(--bg)}
.hero .wrap{display:grid;grid-template-columns:1fr 1.2fr;gap:56px;align-items:center;padding-top:72px;padding-bottom:88px}
.hero h1 span{background:linear-gradient(90deg,var(--coral),#F0845E 45%,var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 22px}
.trust{display:flex;flex-wrap:wrap;gap:10px 20px;list-style:none;padding:0;margin:0;font-size:14px;font-weight:600;color:var(--ink-2)}
.trust li{display:flex;align-items:center;gap:7px}.trust .i{width:17px;height:17px;color:var(--teal)}
.stage{position:relative}
.mac{position:relative;border-radius:14px;background:#fff;box-shadow:var(--shadow-l);border:1px solid rgba(16,24,40,.08);overflow:hidden;transform:perspective(1600px) rotateY(-6deg) rotateX(2deg);transform-origin:left center}
.mac-bar{display:flex;gap:7px;padding:11px 14px;background:#F5F3F0;border-bottom:1px solid var(--line)}.mac-bar i{width:11px;height:11px;border-radius:50%;background:#E0DBD4}
.mac-bar i:nth-child(1){background:#FF5F57}.mac-bar i:nth-child(2){background:#FEBC2E}.mac-bar i:nth-child(3){background:#28C840}
.phone{position:absolute;right:-34px;bottom:-64px;width:176px;aspect-ratio:9/19;border-radius:38px;background:#0B0F16;padding:9px;box-shadow:var(--shadow-l);border:1px solid #2A303B}
.phone .screen{position:relative;height:100%;border-radius:30px;overflow:hidden;background:linear-gradient(160deg,#2B3A55 0%,#5B4B7A 55%,#A2617A 100%);color:#fff;padding:44px 10px 10px}
.phone .notch{position:absolute;top:9px;left:50%;transform:translateX(-50%);width:76px;height:22px;border-radius:12px;background:#0B0F16}
.phone .clock{text-align:center;font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1}.phone .date{text-align:center;font-size:11px;opacity:.85;margin:4px 0 16px}
.note{display:flex;gap:8px;align-items:flex-start;background:rgba(255,255,255,.88);color:var(--ink);border-radius:16px;padding:9px 10px;margin-bottom:7px;box-shadow:0 4px 14px rgba(0,0,0,.18);font-size:11px;line-height:1.35}
.note img{width:22px;height:22px;border-radius:6px;flex:none}.note b{display:block;font-size:11.5px}.note span{color:var(--ink-2)}
.note .tag{margin-left:auto;font-weight:800;font-size:10px;padding:2px 6px;border-radius:99px;background:var(--teal-soft);color:var(--teal-ink);white-space:nowrap}
.note .tag.mid{background:#FFF4DE;color:#8A5600}.note .tag.hi{background:#FDECEC;color:var(--red)}

/* motion */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
  .js .reveal.in{opacity:1;transform:none}
  .js .reveal.d1{transition-delay:.1s}.js .reveal.d2{transition-delay:.2s}.js .reveal.d3{transition-delay:.3s}
  .phone .note{animation:pop .6s cubic-bezier(.2,.9,.3,1.2) both}.phone .note:nth-of-type(1){animation-delay:.8s}.phone .note:nth-of-type(2){animation-delay:1.6s}.phone .note:nth-of-type(3){animation-delay:2.4s}
  @keyframes pop{from{opacity:0;transform:translateY(-14px) scale(.96)}to{opacity:1;transform:none}}
  .float{animation:float 7s ease-in-out infinite}@keyframes float{50%{transform:translateY(-8px)}}
  .packet{animation:travel 2.4s linear infinite}@keyframes travel{from{left:0}to{left:calc(100% - 10px)}}
  .bar i{animation:grow 1.2s ease both}@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  .marquee .track{animation:scroll 40s linear infinite}@keyframes scroll{to{transform:translateX(-50%)}}
  .ring-pulse{animation:pulse 2s ease-in-out infinite}@keyframes pulse{50%{box-shadow:0 0 0 10px rgba(229,72,77,0)}}
}

/* works-with */
.works{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.works .wrap{display:flex;align-items:center;gap:28px;padding-top:22px;padding-bottom:22px}
.works p{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.marquee{overflow:hidden;flex:1;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee .track{display:flex;gap:44px;width:max-content}.marquee span{display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--ink-2);white-space:nowrap;font-size:16px}.marquee .i{width:18px;height:18px;color:var(--muted)}

/* sections */
section{scroll-margin-top:80px}
.sec{padding:110px 0}.sec.alt{background:var(--bg-2)}.sec-head{max-width:720px;margin:0 auto 56px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 28px;box-shadow:var(--shadow-s)}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:26px;right:28px;font-size:13px;font-weight:800;color:#C9C1B6;letter-spacing:.05em}
.ico{display:inline-grid;place-items:center;width:52px;height:52px;border-radius:15px;margin-bottom:18px}.ico .i{width:26px;height:26px}
.ico.coral{background:var(--coral-soft);color:var(--coral)}.ico.teal{background:var(--teal-soft);color:var(--teal)}.ico.violet{background:#F0EEFE;color:var(--violet)}.ico.honey{background:#FEF5E2;color:#B97C08}
.step p,.feat p{font-size:16px;margin:0}

.split{display:grid;grid-template-columns:1fr 1.15fr;gap:72px;align-items:center}
.split.rev{grid-template-columns:1.15fr 1fr}.split.rev .split-media{order:-1}
.shot{border-radius:16px;overflow:hidden;box-shadow:var(--shadow-l);border:1px solid rgba(16,24,40,.08);background:#fff}
.checks{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:12px}
.checks li{display:flex;gap:12px;align-items:flex-start;font-size:16px;color:var(--ink-2)}.checks li b{color:var(--ink)}
.checks .i{width:20px;height:20px;margin-top:3px;color:var(--teal)}

/* risk ladder */
.ladder{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow)}
.lvl{display:grid;grid-template-columns:48px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--line)}.lvl:first-of-type{border-top:0;padding-top:4px}
.lvl .badge{display:grid;place-items:center;width:48px;height:48px;border-radius:50%}.lvl .badge .i{width:24px;height:24px}
.lvl b{display:block;font-size:16px}.lvl span{font-size:14px;color:var(--muted)}
.lvl .score{font-weight:800;font-size:13px;padding:5px 10px;border-radius:99px}
.l-ok .badge{background:var(--teal-soft);color:var(--teal)}.l-ok .score{background:var(--teal-soft);color:var(--teal-ink)}
.l-mid .badge{background:#FEF5E2;color:#B97C08}.l-mid .score{background:#FEF5E2;color:#8A5600}
.l-call .badge{background:var(--coral-soft);color:var(--coral)}.l-call .score{background:var(--coral-soft);color:#AD3418}
.l-hi .badge{background:#FDECEC;color:var(--red);box-shadow:0 0 0 0 rgba(229,72,77,.4)}.l-hi .score{background:#FDECEC;color:#B4262B}
.sounds{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.sounds span{display:inline-flex;align-items:center;gap:6px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;padding:6px 12px;font-size:13px;font-weight:600}.sounds .i{width:15px;height:15px;color:var(--coral)}

/* day timeline */
.day{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px 28px;box-shadow:var(--shadow);margin-top:48px}
.day-h{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}.day-h b{font-size:16px}.day-h .legend{margin-left:auto;display:flex;gap:14px;font-size:13px;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:6px}.legend span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.bar{display:flex;height:40px;border-radius:12px;overflow:hidden;background:var(--bg-3)}.bar i{display:block;height:100%;transform-origin:left}
.bar .e{background:var(--honey)}.bar .a{background:var(--teal-2)}.bar .r{background:#7FD3C8}.bar .w{background:#B8B0F6}
.w1{flex:3}.w2{flex:1}.w3{flex:.35}.w4{flex:.75}.w5{flex:4}.w6{flex:2}.w7{flex:1.5}.w8{flex:.3}.w9{flex:3}.w10{flex:5}.w11{flex:1}.w12{flex:2.1}
.axis{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:8px}
.c-e{--c:var(--honey)}.c-a{--c:var(--teal-2)}.c-r{--c:#7FD3C8}.c-w{--c:#B8B0F6}

/* grid features */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 26px;box-shadow:var(--shadow-s);transition:box-shadow .2s,transform .2s}
.feat:hover{box-shadow:var(--shadow);transform:translateY(-2px)}.feat h3{font-size:18px}
.pill-beta{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:99px;background:#F0EEFE;color:#5442D6;margin-left:6px;vertical-align:3px}

/* phone camera */
.pc{display:grid;grid-template-columns:.9fr 1.1fr;gap:72px;align-items:center}
.pc .phone{position:relative;right:auto;bottom:auto;margin:0 auto;width:250px}
.pc .phone .screen{background:linear-gradient(180deg,#2F2A28,#1C1917);padding:0}
.pc .phone .cam{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.9}
.pc .phone .ov{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 18px;background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);text-align:center}
.pc .phone .ov small{display:block;font-size:10px;opacity:.8}.pc .phone .pin{font-size:30px;font-weight:800;letter-spacing:.18em;margin:6px 0}
.pc .phone .live{position:absolute;top:44px;left:12px;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;background:rgba(14,159,142,.9);padding:4px 9px;border-radius:99px}
.pc .phone .live::before{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
.numbered{list-style:none;padding:0;margin:24px 0 0;counter-reset:n;display:grid;gap:14px}
.numbered li{counter-increment:n;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start;font-size:16px;color:var(--ink-2)}
.numbered li::before{content:counter(n);display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;font-weight:800;font-size:14px}
.numbered b{color:var(--ink)}

/* security (dark) */
.dark{background:var(--navy);color:#E9EDF3}.dark h2{color:#fff}.dark p{color:#AEB8C6}.dark .eyebrow{color:#5EEAD4}
.sec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sec-item{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:24px}
.sec-item .i{width:26px;height:26px;color:#5EEAD4;margin-bottom:14px}.sec-item h3{color:#fff;font-size:17px}.sec-item p{font-size:15px;margin:0}
.flow{display:grid;grid-template-columns:1fr 1.1fr 1fr 1.1fr 1fr;align-items:center;gap:10px;margin-top:44px;padding:24px;border-radius:var(--r-lg);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.node{text-align:center;padding:16px 10px;border-radius:16px;background:rgba(255,255,255,.06)}.node .i{width:28px;height:28px;color:#fff;margin:0 auto 8px;display:block}
.node b{display:block;color:#fff;font-size:15px}.node span{font-size:12px;color:#AEB8C6}
.link{position:relative;height:2px;background:rgba(255,255,255,.18);border-radius:2px}.link span{position:absolute;top:10px;left:0;right:0;text-align:center;font-size:11px;color:#5EEAD4;font-weight:700;white-space:nowrap}
.packet{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:#5EEAD4;box-shadow:0 0 12px #5EEAD4}

/* faq */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line);padding:6px 0}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;list-style:none;font-weight:700;font-size:18px;padding:16px 0}
.faq summary::-webkit-details-marker{display:none}.faq summary .i{color:var(--muted);transition:transform .2s}.faq details[open] summary .i{transform:rotate(180deg)}
.faq details p{margin:0 0 18px;font-size:16px}

/* download */
.dl{position:relative;overflow:hidden;border-radius:32px;background:linear-gradient(135deg,#D9482A 0%,#C2410C 60%,#A8361A 100%);color:#fff;padding:64px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.dl h2{color:#fff}.dl p{color:rgba(255,255,255,.9)}.dl img{width:100%;max-width:340px;margin-left:auto;filter:drop-shadow(0 20px 40px rgba(0,0,0,.18))}
.dl .btn-primary{background:#fff;color:var(--coral-ink);box-shadow:none}.dl .btn-primary:hover{background:#FFF1EC}.dl .btn-soon{background:rgba(255,255,255,.18);color:#fff}
.dl .req{font-size:13px;opacity:.85;margin-top:14px;display:flex;align-items:center;gap:8px}.dl .req .i{width:16px;height:16px}

/* footer */
footer{border-top:1px solid var(--line);padding:40px 0 56px;font-size:14px;color:var(--muted)}
footer .wrap{display:flex;flex-wrap:wrap;gap:20px 40px;align-items:center}footer .brand{font-size:17px;color:var(--ink)}footer .brand img{width:28px;height:28px}
footer nav{display:flex;gap:22px;margin-left:auto;flex-wrap:wrap}footer a{text-decoration:none}footer a:hover{color:var(--ink)}
.fine{width:100%;font-size:13px}

/* legal pages */
.legal{max-width:780px;margin:0 auto;padding:64px 24px 96px}.legal h1{font-size:40px}.legal h2{font-size:22px;margin-top:40px}
.legal p,.legal li{color:var(--ink-2);font-size:16px}.legal .meta{color:var(--muted);font-size:14px}
.notfound{min-height:70vh;display:grid;place-items:center;text-align:center;padding:40px 24px}.notfound img{width:260px;margin:0 auto 20px}

@media (max-width:1000px){
  .hero .wrap,.split,.split.rev,.pc,.dl{grid-template-columns:1fr}.split.rev .split-media{order:0}
  .mac{transform:none}.phone{right:8px;bottom:-30px;width:170px}
  .steps,.grid3,.sec-grid{grid-template-columns:1fr}.flow{grid-template-columns:1fr;gap:18px}.link{height:28px;width:2px;margin:0 auto}.link span{top:6px;left:12px;text-align:left}
  .nav{display:none}.dl{padding:40px 28px}.sec{padding:80px 0}.works .wrap{flex-direction:column;align-items:flex-start;gap:12px}.marquee{width:100%}
}
@media (max-width:560px){body{font-size:16px}.top .btn span{display:none}.hero .wrap{padding-top:40px}.phone{display:none}.trust{gap:8px 14px}}

/* =====================================================================================
   Design v2 — matches the SeePet Mac app: Pip the cat, "lamp-lit living room" palette,
   Fredoka display type, soft clay buttons.
   ===================================================================================== */
@font-face{font-family:"Fredoka";src:url("/assets/fonts/fredoka-latin-wght-normal.woff2") format("woff2-variations");font-weight:300 700;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fredoka";src:url("/assets/fonts/fredoka-latin-ext-wght-normal.woff2") format("woff2-variations");font-weight:300 700;font-display:swap;
  unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --ink:#23264A;--ink-2:#454B6E;--muted:#5F6787;--line:#DDE3F3;--bg:#FFFFFF;--bg-2:#F3F6FD;--bg-3:#E7ECFA;--sky:#EDF1FB;
  --lamp:#4F5BD5;--lamp-deep:#3A44B0;--lamp-2:#6E78E8;--mint:#24B58E;--mint-deep:#178F70;--butter:#F4B63F;--berry:#D9416B;--fur:#FF9248;
  --coral:var(--lamp);--coral-2:var(--lamp-2);--coral-soft:#ECEEFD;--coral-ink:var(--lamp-deep);--btn:var(--lamp);
  --teal:var(--mint);--teal-2:#2EC79E;--teal-soft:#E3F7F0;--teal-ink:#0F7559;--honey:var(--butter);--violet:#8B7CF0;--red:var(--berry);--navy:#1C1F3F;
  --display:"Fredoka",ui-rounded,"SF Pro Rounded",-apple-system,sans-serif;
  --shadow:0 1px 2px rgba(35,38,74,.04),0 14px 34px -12px rgba(35,38,74,.16);--shadow-l:0 34px 80px -24px rgba(35,38,74,.35);
}
h1,h2,h3,.brand,.btn,.step::before,.lvl .score,.faq summary,.numbered li::before,.pc .phone .pin,.phone .clock{font-family:var(--display)}
h1,h2,h3{font-weight:600;letter-spacing:-.012em}
h1{font-size:clamp(40px,5.4vw,66px);line-height:1.05}
.brand{font-weight:600}
.eyebrow{color:var(--lamp);background:var(--coral-soft);padding:6px 12px;border-radius:99px;letter-spacing:.04em}
.dark .eyebrow{background:rgba(94,234,212,.12)}
:focus-visible{outline-color:var(--lamp)}

/* clay buttons: a solid lower edge that presses down */
.btn{font-weight:600;border-radius:18px}
.btn-primary{background:var(--lamp);color:#fff;box-shadow:0 5px 0 var(--lamp-deep),0 16px 26px -12px rgba(79,91,213,.7)}
.btn-primary:hover{background:#5A66E0;box-shadow:0 6px 0 var(--lamp-deep),0 18px 30px -12px rgba(79,91,213,.75)}
.btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 var(--lamp-deep),0 8px 16px -10px rgba(79,91,213,.6)}
.btn-ghost{background:#fff;border:1.5px solid var(--line);box-shadow:0 4px 0 var(--line)}.btn-ghost:hover{border-color:#C9D1EA}
.btn-ghost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn-soon{background:var(--bg-3);color:var(--muted)}
.top .btn{border-radius:14px}
.top .btn-primary{box-shadow:0 4px 0 var(--lamp-deep)}
.signin{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:14px;text-decoration:none;color:var(--ink);padding:8px 14px;border-radius:14px;border:1.5px solid var(--line);background:#fff}
.signin:hover{border-color:#C9D1EA}.signin .i{width:17px;height:17px;color:var(--lamp)}
.signin.on .av{display:grid;place-items:center;width:22px;height:22px;border-radius:8px;background:linear-gradient(135deg,#FFA766,#FF9248);color:#fff;font-size:12px;font-family:var(--display)}

/* hero: lamp-lit room, Pip in front of the Mac */
.hero{background:radial-gradient(1100px 560px at 88% -12%,#DCE1FB 0,rgba(220,225,251,0) 62%),radial-gradient(900px 520px at -12% 34%,#E0F5EE 0,rgba(224,245,238,0) 60%),linear-gradient(180deg,#FFFFFF 0%,var(--sky) 100%)}
.hero h1 span{background:linear-gradient(90deg,var(--lamp) 0%,#7A6CF0 45%,var(--mint) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.trust .i{color:var(--mint)}
.mac{border-radius:18px;border:1px solid rgba(35,38,74,.08)}
.mac-bar{background:#F4F6FC;border-bottom-color:var(--line)}
.hero-pip{position:absolute;left:-74px;bottom:-58px;width:230px;aspect-ratio:220/180;z-index:3;filter:drop-shadow(0 18px 22px rgba(35,38,74,.22))}
.hero-pip .pip{position:absolute;inset:0}
.phone .screen{background:linear-gradient(165deg,#2C3170 0%,#4F5BD5 55%,#8E7CF0 100%)}
.note .tag{background:var(--teal-soft);color:var(--teal-ink)}

/* sections */
.works{background:var(--bg-2);border-color:var(--line)}
.sec.alt{background:var(--bg-2)}
.step,.feat,.ladder,.day{border-radius:28px;border-color:var(--line);box-shadow:var(--shadow)}
.step::before{color:#B7C0E8}
.ico{border-radius:18px}
.ico.coral{background:var(--coral-soft);color:var(--lamp)}.ico.teal{background:var(--teal-soft);color:var(--mint-deep)}
.ico.violet{background:#F0EEFE;color:#6F5BEA}.ico.honey{background:#FEF5E2;color:#B97C08}
.shot{border-radius:20px;border-color:rgba(35,38,74,.08)}
.checks .i{color:var(--mint)}
.l-call .badge,.l-call .score{background:var(--coral-soft);color:var(--lamp-deep)}
.sounds .i{color:var(--lamp)}
.numbered li::before{background:var(--lamp);box-shadow:0 3px 0 var(--lamp-deep)}
.dark{background:radial-gradient(900px 500px at 80% 0%,#2E3480 0,rgba(46,52,128,0) 60%),var(--navy)}
.faq summary{font-weight:500;font-size:19px}
.dl{background:radial-gradient(700px 400px at 90% 0%,#7A84F0 0,rgba(122,132,240,0) 60%),linear-gradient(135deg,#4F5BD5 0%,#3A44B0 100%);border-radius:36px}
.dl .btn-primary{background:#fff;color:var(--lamp-deep);box-shadow:0 5px 0 #C9D0F0}.dl .btn-primary:hover{background:#F3F5FF}
.dl-pip{position:relative;width:100%;max-width:330px;aspect-ratio:220/180;margin-left:auto;border-radius:32px;
  background:radial-gradient(120% 90% at 30% 15%,#FFFFFF 0%,#E7ECFA 62%,#D3DBF5 100%);box-shadow:0 30px 60px -24px rgba(16,20,70,.55),inset 0 -24px 0 #CBD3F1}
footer{background:#fff}

/* ===================================== account page ===================================== */
.acct-page{min-height:calc(100vh - 68px);background:linear-gradient(180deg,#FFFFFF 0%,var(--sky) 100%)}
.auth{display:grid;grid-template-columns:minmax(340px,1fr) 1fr;min-height:calc(100vh - 68px)}
.auth[hidden],.dash[hidden]{display:none}
.auth-art{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:56px;color:#fff;
  background:radial-gradient(120% 80% at 20% 0%,#7A84F0 0%,#4F5BD5 48%,#3A44B0 100%)}
.auth-art::before{content:"";position:absolute;width:560px;height:560px;right:-200px;top:-180px;border-radius:50%;background:rgba(255,255,255,.07)}
.auth-art::after{content:"";position:absolute;width:320px;height:320px;left:-130px;bottom:-130px;border-radius:50%;background:rgba(36,181,142,.22)}
.auth-stage{position:relative;z-index:1;width:min(400px,100%);aspect-ratio:220/180;margin:0 auto 34px;border-radius:40px;
  background:radial-gradient(120% 90% at 30% 15%,#FFFFFF 0%,#E7ECFA 62%,#D3DBF5 100%);box-shadow:0 30px 60px -24px rgba(16,20,70,.55),inset 0 -28px 0 #CBD3F1}
.auth-art h2{position:relative;z-index:1;color:#fff;font-size:clamp(30px,3vw,40px);margin:0 0 10px}
.auth-art p{position:relative;z-index:1;color:#E4E7FF;margin:0;max-width:30em}
.auth-side{display:grid;place-items:center;padding:56px 24px}
.auth-card{width:min(440px,100%);display:flex;flex-direction:column;gap:12px}
.auth-card h1{font-size:clamp(32px,3.2vw,40px);margin:0}
.auth-card .sub{margin:-2px 0 10px;color:var(--muted)}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:18px;background:var(--bg-2);border:1px solid var(--line);margin-bottom:6px}
.tabs button{display:flex;align-items:center;justify-content:center;gap:8px;border:0;background:none;border-radius:14px;padding:11px 8px;
  font:600 15px var(--display);color:var(--muted);cursor:pointer;transition:background .15s,color .15s,box-shadow .15s}
.tabs button .i{width:18px;height:18px}
.tabs button[aria-selected=true]{background:#fff;color:var(--lamp);box-shadow:0 2px 8px -2px rgba(35,38,74,.18)}
.field{display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;border-radius:18px;background:#fff;border:1.5px solid #C9D1EA;transition:border-color .15s,box-shadow .15s}
.field:focus-within{border-color:var(--lamp);box-shadow:0 0 0 4px rgba(79,91,213,.16)}
.field>.i{width:20px;height:20px;color:var(--muted)}.field:focus-within>.i{color:var(--lamp)}
.field input,.field select,.field textarea{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ink);height:100%;padding:0}
.field textarea{padding:14px 0;resize:vertical;min-height:80px}
.field.area{height:auto;align-items:flex-start}.field.area>.i{margin-top:17px}
.field input::placeholder,.field textarea::placeholder{color:#8A92AE}
.eye{border:0;background:none;padding:6px;border-radius:10px;color:var(--muted);cursor:pointer;display:grid}.eye:hover{background:var(--bg-2);color:var(--ink)}
.hint{margin:-4px 6px 0;font-size:13px;color:var(--muted)}
.err{margin:0;padding:11px 14px;border-radius:14px;background:#FCE3EA;color:#A3204A;font-size:15px;font-weight:500}
.okmsg{margin:0;padding:11px 14px;border-radius:14px;background:var(--teal-soft);color:var(--teal-ink);font-size:15px;font-weight:500}
.go{justify-content:center;height:56px;font-size:17px;margin-top:6px}
.switch{text-align:center;color:var(--muted);font-size:15px;margin:6px 0 0}.switch a{color:var(--lamp);font-weight:600;text-decoration:none}
.note-priv{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;padding:13px 15px;border-radius:16px;background:var(--teal-soft);color:var(--ink-2);font-size:14px;line-height:1.5}
.note-priv .i{width:19px;height:19px;color:var(--mint-deep);margin-top:2px}
.shake{animation:shake .38s ease-in-out}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
.busy{position:relative;pointer-events:none;opacity:.8}
.busy::after{content:"";width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(255,255,255,.45);border-top-color:#fff;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.dash{padding:48px 0 96px}
.dash-head{display:flex;align-items:center;gap:22px;margin-bottom:30px;flex-wrap:wrap}
.dash-pip{position:relative;width:150px;aspect-ratio:220/180;border-radius:28px;flex:none;
  background:radial-gradient(120% 90% at 30% 15%,#FFFFFF 0%,#E3F7F0 62%,#C9EDDF 100%);box-shadow:var(--shadow),inset 0 -18px 0 #BFE8D7}
.dash-head h1{font-size:clamp(32px,3.6vw,46px);margin:0}
.dash-head p{margin:4px 0 0;color:var(--muted)}
.dash-head .actions{margin-left:auto;display:flex;gap:10px}
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;align-items:start}
.panel{background:#fff;border:1px solid var(--line);border-radius:28px;padding:26px;box-shadow:var(--shadow)}
.panel h2{display:flex;align-items:center;gap:10px;font-size:22px;margin:0 0 18px}.panel h2 .i{color:var(--lamp)}
.panel h2 .count{font:600 13px var(--font);color:var(--lamp);background:var(--coral-soft);border-radius:99px;padding:3px 10px}
.pets{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.pet{position:relative;display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:22px;background:var(--bg-2);border:1.5px solid transparent;text-align:left;
  cursor:pointer;font:inherit;color:inherit;transition:transform .15s,border-color .15s,box-shadow .15s}
.pet:hover{transform:translateY(-2px);border-color:#C9D1EA;box-shadow:var(--shadow)}
.pet .ava{display:grid;place-items:center;width:56px;height:56px;border-radius:20px;color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1)}
.pet .ava .i{width:28px;height:28px}
.pet b{font:600 19px var(--display)}.pet small{color:var(--muted);font-size:14px;line-height:1.4}
.pet .edit{position:absolute;top:14px;right:14px;width:20px;height:20px;color:#9AA2C0}
.pet.add{align-items:center;justify-content:center;min-height:170px;border:2px dashed #C9D1EA;background:none;color:var(--lamp);font:600 16px var(--display)}
.pet.add .i{width:30px;height:30px}
.empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:10px 0 4px;margin:0}
.side{display:grid;gap:22px}
.profile{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.profile .av{display:grid;place-items:center;width:56px;height:56px;border-radius:20px;background:linear-gradient(135deg,#FFA766,#FF9248);color:#fff;font:600 26px var(--display);flex:none}
.profile b{display:block;font:600 19px var(--display)}.profile span{color:var(--muted);font-size:14px;word-break:break-all}
.stack{display:grid;gap:10px}
.btn-line{justify-content:center;background:#fff;border:1.5px solid var(--line);color:var(--ink);box-shadow:0 3px 0 var(--line);font-size:15px;padding:12px 16px}
.btn-line:hover{border-color:#C9D1EA}.btn-line .i{color:var(--lamp)}
.btn-danger{justify-content:center;background:none;border:1.5px solid rgba(217,65,107,.35);color:var(--berry);font-size:15px;padding:12px 16px}
.btn-danger:hover{background:rgba(217,65,107,.06)}.btn-danger .i{color:var(--berry)}
.apps p{font-size:15px;margin:0 0 14px}.apps .btn{width:100%;justify-content:center}
details.more summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);padding:4px 0}
details.more summary::-webkit-details-marker{display:none}details.more summary .i{width:18px;height:18px;color:var(--lamp)}
details.more[open] summary{margin-bottom:12px}
dialog.sheet{border:0;border-radius:30px;padding:0;width:min(560px,94vw);box-shadow:0 40px 90px rgba(16,20,60,.35);color:var(--ink)}
dialog.sheet::backdrop{background:rgba(28,31,63,.45);backdrop-filter:blur(4px)}
dialog.sheet form{padding:26px;display:grid;gap:12px}
dialog.sheet header{display:flex;align-items:center;gap:12px;margin-bottom:4px}
dialog.sheet header h2{margin:0;font-size:24px;flex:1}
.x{border:0;background:var(--bg-2);border-radius:12px;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.species{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.species label{cursor:pointer}.species input{position:absolute;opacity:0;pointer-events:none}
.species span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:16px;border:1.5px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);background:#fff;transition:all .15s}
.species span .i{width:24px;height:24px}
.species input:checked+span{border-color:var(--lamp);color:var(--lamp);background:var(--coral-soft);box-shadow:0 0 0 3px rgba(79,91,213,.12)}
.species input:focus-visible+span{outline:3px solid var(--lamp);outline-offset:2px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatches label{cursor:pointer}.swatches input{position:absolute;opacity:0}
.swatches span{display:block;width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:inset 0 -3px 0 rgba(0,0,0,.12)}
.swatches input:checked+span{outline:3px solid var(--ink);outline-offset:3px}
.swatches input:focus-visible+span{outline:3px solid var(--lamp);outline-offset:3px}
.lbl{font-size:13px;font-weight:600;color:var(--muted);margin:4px 4px -4px}
.sheet footer{display:flex;gap:10px;margin-top:8px}.sheet footer .btn{flex:1;justify-content:center}
.sheet footer .del{flex:none}
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-weight:600;
  transition:all .25s;z-index:99;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%)}
@media (max-width:900px){.auth{grid-template-columns:1fr}.auth-art{display:none}.dash-grid{grid-template-columns:1fr}.dash-head .actions{margin-left:0}}
@media (max-width:560px){.species{grid-template-columns:repeat(3,1fr)}.row2{grid-template-columns:1fr}.hero-pip{width:150px;left:-10px;bottom:-40px}}

/* Pip the cat (same drawing as the Mac app) */
.pip{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.pip .fur{fill:var(--fur)}.pip .ear{stroke:var(--fur);stroke-width:8;stroke-linejoin:round}
.pip .ear-in{fill:#FFC3B8}.pip .belly{fill:#FFE6CC}.pip .paw{fill:#FFB27E}
.pip .stripe{fill:none;stroke:#E7702E;stroke-width:4;stroke-linecap:round}
.pip .blush{fill:#FF6F8E;opacity:.32}
.pip .eyes ellipse{fill:#23264A}.pip .glint{fill:#fff}
.pip .eyes.shut,.pip .brows,.pip .mouth{fill:none;stroke:#23264A;stroke-width:3.4;stroke-linecap:round}
.pip .mouth{stroke-width:2.6}.pip .nose{fill:#FF6F8E}
.pip .whisk{stroke:#23264A;stroke-width:1.8;stroke-linecap:round;opacity:.35}
.pip .p-tail{fill:none;stroke:var(--fur);stroke-width:15;stroke-linecap:round}
.pip .p-shadow{fill:#23264A;opacity:.10}
.pip .p-door rect{fill:#B7C0E8}.pip .p-door .p-door-in{fill:#C9D0F0}.pip .p-door circle{fill:#F4B63F}
.pip .p-bowl path{fill:#24B58E}.pip .p-bowl circle{fill:#B5642A}
.pip .p-zzz text{fill:#4F5BD5;font-weight:600;font-size:22px}
.pip .p-waves path{fill:none;stroke:#4F5BD5;stroke-width:4;stroke-linecap:round}
.pip .p-bang rect{fill:#D9416B}.pip .p-bang path{stroke:#fff;stroke-width:6;stroke-linecap:round}
.pip .p-heart{fill:#FF6F8E}
.pip .eyes.big,.pip .eyes.shut,.pip .brows,.pip .p-door,.pip .p-bowl,.pip .p-zzz,.pip .p-waves,.pip .p-bang,.pip .p-heart{display:none}
.pip .p-tail{transform-origin:150px 146px}.pip .p-head{transform-origin:110px 120px}.pip .p-body{transform-origin:110px 168px}
.pip .p-ear.l{transform-origin:86px 58px}.pip .p-ear.r{transform-origin:134px 58px}.pip .blinker{transform-origin:110px 84px}
.pip .p-cat,.pip .p-head,.pip .p-ear{transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.pip .p-body{animation:pip-breathe 3.6s ease-in-out infinite}
.pip .blinker{animation:pip-blink 5s infinite}
.pip .p-tail{animation:pip-sway 2.8s ease-in-out infinite}
@keyframes pip-breathe{50%{transform:scale(1.025,.985)}}
@keyframes pip-blink{0%,94%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
@keyframes pip-sway{50%{transform:rotate(-12deg)}}
.pip[data-mood=happy] .p-heart{display:block;animation:pip-float-up 3.2s ease-in infinite}
.pip[data-mood=happy] .p-tail{animation-duration:1.4s}
.pip[data-mood=sleep] .eyes.open{display:none}.pip[data-mood=sleep] .eyes.shut{display:block}
.pip[data-mood=sleep] .p-zzz{display:block}.pip[data-mood=sleep] .p-zzz text{animation:pip-float-up 3s ease-in infinite}
.pip[data-mood=sleep] .p-zzz text:nth-child(2){animation-delay:1s}.pip[data-mood=sleep] .p-zzz text:nth-child(3){animation-delay:2s}
.pip[data-mood=sleep] .p-head{transform:rotate(-8deg) translate(-2px,10px)}
.pip[data-mood=sleep] .p-tail{animation:none;transform:rotate(18deg)}
.pip[data-mood=sleep] .p-body{animation-duration:5s}
.pip[data-mood=eat] .p-bowl{display:block}.pip[data-mood=eat] .p-head{transform:rotate(14deg) translate(10px,14px)}
.pip[data-mood=eat] .eyes.open{display:none}.pip[data-mood=eat] .eyes.shut{display:block}
.pip[data-mood=eat] .p-head{animation:pip-nom .9s ease-in-out infinite}
@keyframes pip-nom{50%{translate:0 3px}}
.pip[data-mood=away] .p-door{display:block;transform:translateX(-14px)}.pip[data-mood=away] .p-cat{transform:translateX(34px)}
.pip[data-mood=away] .p-head{animation:pip-peek 3.5s ease-in-out infinite}
@keyframes pip-peek{0%,100%{translate:0 0}50%{translate:-6px 0}}
.pip .frown{display:none;fill:none;stroke:#23264A;stroke-width:2.6;stroke-linecap:round}
.pip[data-mood=worried] .brows,.pip[data-mood=alert] .frown,.pip[data-mood=worried] .frown{display:block}
.pip[data-mood=worried] .mouth,.pip[data-mood=alert] .mouth{display:none}
.pip[data-mood=worried] .p-ear.l{transform:rotate(-14deg)}.pip[data-mood=worried] .p-ear.r{transform:rotate(14deg)}
.pip[data-mood=worried] .p-tail{animation-duration:4.5s}
.pip[data-mood=call] .p-waves{display:block;animation:pip-pulse-waves 1.2s ease-in-out infinite}
.pip[data-mood=call] .p-head{transform:rotate(-10deg)}.pip[data-mood=call] .p-ear.r{transform:rotate(-10deg) translateY(-3px)}
@keyframes pip-pulse-waves{50%{opacity:.25}}
.pip[data-mood=alert] .eyes.open{display:none}.pip[data-mood=alert] .eyes.big{display:block}
.pip[data-mood=alert] .p-bang{display:block;animation:pip-pop 1s ease-in-out infinite}
.pip[data-mood=alert] .p-ear.l{transform:rotate(-26deg)}.pip[data-mood=alert] .p-ear.r{transform:rotate(26deg)}
.pip[data-mood=alert] .p-tail{animation:pip-bristle .35s ease-in-out infinite}
@keyframes pip-pop{50%{transform:scale(1.08);transform-origin:181px 34px}}
@keyframes pip-bristle{50%{transform:rotate(-6deg)}}
.pip[data-mood=look] .p-head{animation:pip-look 4s ease-in-out infinite}
@keyframes pip-look{0%,100%{transform:rotate(0)}30%{transform:rotate(-9deg)}65%{transform:rotate(9deg)}}
@keyframes pip-float-up{0%{opacity:0;translate:0 10px}20%{opacity:1}100%{opacity:0;translate:4px -26px}}
@media (prefers-reduced-motion:reduce){.pip *{animation:none!important;transition:none!important}}
.swatches .sw0{--c:#FF9248}.swatches .sw1{--c:#4F5BD5}.swatches .sw2{--c:#24B58E}.swatches .sw3{--c:#F4B63F}.swatches .sw4{--c:#D9416B}.swatches .sw5{--c:#8B5E3C}.swatches .sw6{--c:#23264A}
.nf-pip{margin:0 auto 22px;width:220px}
[hidden]{display:none!important}
dialog.sheet footer{border:0;padding:0;background:none;font-size:inherit;color:inherit}
.signin{white-space:nowrap}
@media (max-width:560px){.signin span:not(.av){display:none}.signin{padding:8px 10px}.auth-side{place-items:start center;padding:28px 18px}.top .wrap{gap:12px}.top-actions{gap:8px;margin-left:auto}}

/* header nav: right after the logo, uppercase (lang-aware, so Turkish gets İ / I correctly) */
.top .nav{margin-left:20px;gap:24px;font-size:13.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}
.top .nav a{padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.top .nav a:hover{color:var(--lamp);border-bottom-color:var(--lamp)}
.top .top-actions{margin-left:auto}

/* ===================================== credits / KitKat ===================================== */
.kk{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 85% 0%,#FFE7D3 0,rgba(255,231,211,0) 60%),radial-gradient(800px 480px at -10% 40%,#E3F7F0 0,rgba(227,247,240,0) 60%),linear-gradient(180deg,#FFFFFF 0%,var(--sky) 100%)}
.kk-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;padding-top:72px;padding-bottom:96px}
.kk h1 span{background:linear-gradient(90deg,#FF9248 0%,#E7702E 40%,var(--lamp) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.free{display:flex;gap:16px;align-items:flex-start;margin:26px 0 18px;padding:20px 22px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);max-width:560px}
.free-ico{display:grid;place-items:center;flex:none;width:52px;height:52px;border-radius:18px;background:linear-gradient(135deg,#FFA766,#FF9248);color:#fff;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.free-ico .i{width:26px;height:26px}
.free b{display:block;font:600 20px var(--display);color:var(--ink);margin-bottom:4px}.free p{margin:0;font-size:16px}
.sign{font:500 18px var(--display);color:var(--muted);margin:0}
.kk-photo{position:relative;justify-self:center;width:min(460px,100%)}
.polaroid{position:relative;background:#fff;padding:14px 14px 0;border-radius:28px;box-shadow:var(--shadow-l);transform:rotate(-2.5deg);transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.polaroid:hover{transform:rotate(0) scale(1.01)}
.polaroid img{width:100%;height:auto;border-radius:18px;aspect-ratio:796/770;object-fit:cover}
.polaroid .cap{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:14px 8px 16px}
.polaroid .cap b{font:600 26px var(--display);color:var(--ink)}
.polaroid .cap span{font-size:14px;font-weight:700;color:#C2410C;background:#FFF1E6;padding:5px 11px;border-radius:99px}
.kk-tags{position:absolute;top:-16px;right:-22px;display:flex;flex-direction:column;align-items:flex-end;gap:8px;transform:rotate(4deg)}
.kk-tags span{background:var(--ink);color:#fff;font:600 14px var(--display);padding:7px 13px;border-radius:99px;box-shadow:0 8px 18px -8px rgba(35,38,74,.5)}
.kk-tags span:nth-child(2){background:var(--berry)}.kk-tags span:nth-child(3){background:var(--mint)}
.kk-pip{position:absolute;left:-86px;bottom:-56px;width:170px;aspect-ratio:220/180;filter:drop-shadow(0 14px 18px rgba(35,38,74,.2))}
.kk-pip .pip{position:absolute;inset:0}
.potm{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.potm-card{margin:0;background:#fff;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s}
.potm-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:var(--shadow-l)}
.potm-card .ph{position:relative;aspect-ratio:1;overflow:hidden}
.potm-card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.potm-card:hover img{transform:scale(1.04)}
.potm-card .smp{position:absolute;top:14px;left:14px;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--muted);padding:4px 10px;border-radius:99px}
.potm-card figcaption{display:flex;flex-direction:column;gap:2px;padding:16px 20px 20px}
.potm-card b{font:600 22px var(--display);color:var(--ink)}
.potm-card figcaption>span{color:var(--ink-2);font-size:15px}
.potm-card small{display:flex;align-items:center;gap:6px;margin-top:8px;color:var(--muted);font-size:13.5px;font-weight:600}
.potm-card small .i{width:15px;height:15px;color:var(--fur)}
.potm-note{text-align:center;color:var(--muted);font-size:14px;margin:22px 0 0}
.share{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:40px;padding:28px 32px;border-radius:28px;
  background:radial-gradient(600px 300px at 100% 0%,#7A84F0 0,rgba(122,132,240,0) 60%),linear-gradient(135deg,#4F5BD5,#3A44B0);color:#fff}
.share h3{color:#fff;font-size:24px;margin:0 0 4px}.share p{color:#E4E7FF;margin:0}
.share .btn-primary{background:#fff;color:var(--lamp-deep);box-shadow:0 5px 0 #C9D0F0;flex:none}
@media (max-width:1000px){.kk-grid{grid-template-columns:1fr;gap:56px}.potm{grid-template-columns:1fr 1fr}.kk-pip{left:-20px;width:130px}.kk-tags{right:-6px}.share{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){.potm{grid-template-columns:1fr}}
.kk-pip{left:-132px;bottom:-40px;width:150px}
.polaroid .cap{padding-left:12px}
@media (max-width:1000px){.kk-pip{left:auto;right:-10px;bottom:-70px;width:120px}}

/* usage guide video (How it works) */
.guide{max-width:980px;margin:64px auto 0}
.guide-frame{position:relative;border-radius:28px;overflow:hidden;background:#1C1F3F;box-shadow:var(--shadow-l);border:6px solid #fff;outline:1px solid var(--line)}
.guide video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#EDF1FB}
.guide figcaption{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:20px;text-align:center}
.guide figcaption b{display:inline-flex;align-items:center;gap:10px;font:600 22px var(--display);color:var(--ink)}
.guide figcaption b .i{width:20px;height:20px;color:#fff;background:var(--lamp);border-radius:50%;padding:5px;box-sizing:content-box;fill:#fff}
.guide figcaption span{color:var(--muted);font-size:16px}
.guide figcaption em{font-style:normal;font-size:13px;color:var(--muted);background:var(--bg-2);border:1px solid var(--line);border-radius:99px;padding:3px 10px;margin-top:4px}

/* legal pages: justified text */
.legal p,.legal li{text-align:justify;text-justify:inter-word;hyphens:auto;-webkit-hyphens:auto}
/* footer: Mave Digital link under the footer menu */
.foot-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.foot-right nav{margin-left:0}
.maker{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--lamp)!important;font-size:14px}
.maker .i{width:16px;height:16px}
.maker:hover{text-decoration:underline}
@media (max-width:700px){.foot-right{margin-left:0;align-items:flex-start}}
.forgot{align-self:flex-end;margin:-4px 6px 0;font-size:14px;font-weight:600;color:var(--lamp);text-decoration:none}
.forgot:hover{text-decoration:underline}