/* Meowdar landing page. The app's own sticker look: yellow ground, ink
   outlines, offset ink shadows, Lilita One display (黄油体 in Chinese).
   Bands: hero yellow → how blue → Old Friends ink → more yellow → price,
   privacy and FAQ on paper → closing orange → footer ink.
   Font licences: /assets/meowdar-fonts-OFL.txt. */
@font-face{font-family:'Lilita One';src:url('/assets/meowdar-lilita.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Nunito;src:url('/assets/meowdar-nunito.woff') format('woff');font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Meowdar Chinese';src:url('/assets/meowdar-zcool.woff') format('woff');font-weight:400;font-style:normal;font-display:swap}
:root{color-scheme:light;--ground:#FFE14D;--ink:#141210;--orange:#FF7A1A;--paper:#FFFBEC;--white:#FFFFFF;--copy:#3A3128;--muted:#4E4436;--blue:#9FD8FF;--blue-copy:#1F2A33;--cream:#F2E6D8;--cream-2:#CFC3B5;--display:'Lilita One',ui-rounded,-apple-system,sans-serif;--body:Nunito,ui-rounded,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--gutter:clamp(20px,4.5vw,64px)}
:root:lang(zh-Hans){--display:'Lilita One','Meowdar Chinese','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;--body:-apple-system,BlinkMacSystemFont,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans SC',sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--body);font-size:18px;line-height:1.55;font-weight:600;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
h1,h2{font-family:var(--display);font-weight:400;text-wrap:balance}
:lang(zh-Hans) h1,:lang(zh-Hans) h2,:lang(zh-Hans) h3{letter-spacing:.01em;word-break:keep-all;overflow-wrap:anywhere}
::selection{background:var(--orange);color:var(--ink)}
a:focus-visible,summary:focus-visible{outline:3px solid var(--ink);outline-offset:4px;border-radius:8px}
.dark a:focus-visible{outline-color:var(--ground)}
.wrap{width:100%;max-width:1440px;margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
.skip{position:absolute;left:16px;top:-80px;z-index:30;padding:10px 18px;border-radius:12px;background:var(--ink);color:var(--ground);font-weight:900;text-decoration:none}
.skip:focus{top:12px}

/* Header */
.top{display:flex;align-items:center;gap:32px;min-height:92px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand img{width:46px;height:46px;border-radius:12px;border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.brand span{font-family:'Lilita One',var(--display);font-size:30px;line-height:1}
.page-nav{margin-left:auto;display:flex;gap:28px;font-weight:800;font-size:16px}
.page-nav a,.menu-panel a{text-decoration:none;padding:12px 0}
.page-nav a:hover,.menu-panel a:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
.lang{display:flex;border:3px solid var(--ink);border-radius:999px;background:var(--white);padding:3px;font-weight:900;font-size:14px}
.lang a{text-decoration:none;padding:8px 14px;border-radius:999px;min-height:38px;display:grid;place-items:center}
.lang a[aria-current]{background:var(--ink);color:var(--ground)}
.menu{display:none;position:relative}
.menu summary{list-style:none;width:46px;height:46px;border:3px solid var(--ink);border-radius:12px;background:var(--white);display:grid;place-items:center;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:56px;z-index:20;min-width:210px;display:flex;flex-direction:column;padding:10px 18px;background:var(--white);border:3px solid var(--ink);border-radius:18px;box-shadow:5px 5px 0 var(--ink);font-weight:800}

/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,6fr);grid-template-areas:"head scene" "body scene";column-gap:40px;align-items:center;padding-block:12px 80px}
.hero-head{grid-area:head;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:26px}
.hero-body{grid-area:body;align-self:start;display:flex;flex-direction:column;align-items:flex-start;gap:24px;margin-top:26px}
.chip{display:inline-flex;align-items:center;background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:7px 18px;font-weight:900;font-size:15px;line-height:1.3;box-shadow:3px 3px 0 var(--ink)}
.hero h1{font-size:clamp(44px,7.5vw,108px);line-height:.92}
.hero h1 span{display:block}
.lead{max-width:34em;font-size:clamp(18px,1.55vw,22px);line-height:1.5;font-weight:700;color:var(--copy)}
.cta-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px 28px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:70px;padding:8px 32px;border-radius:22px;background:var(--ink);color:var(--ground);font-family:var(--display);font-size:clamp(21px,1.8vw,26px);line-height:1.1;text-align:center;text-decoration:none;box-shadow:6px 6px 0 var(--orange)}
a.btn:hover{transform:translate(-1px,-1px);box-shadow:7px 7px 0 var(--orange)}
a.btn:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--orange)}
.btn-soon{box-shadow:none;border:3px dashed var(--orange)}
.btn-soon::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--orange);flex-shrink:0}
.text-link{font-weight:900;font-size:18px;text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;padding:12px 0}
.facts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 18px;font-size:15px;font-weight:800;color:var(--muted)}
.facts li{display:flex;align-items:center;gap:8px}
.facts li::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.scene-wrap{grid-area:scene;width:100%;max-width:600px;justify-self:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.scene{position:relative;width:100%;aspect-ratio:600/520}
.dist{position:absolute;left:50%;top:0;width:58%;transform:translateX(-50%);overflow:visible}
.dist text,.word text{font-family:'Lilita One',var(--display);fill:var(--white);stroke:var(--ink);stroke-linejoin:round;paint-order:stroke fill}
.dist .unit{fill:var(--ink);stroke:none}
:lang(zh-Hans) .word text{font-family:var(--display)}
.cat{position:absolute;width:46.5%;height:auto}
.scene .cat{top:38%}
.cat-l{left:0;transform:rotate(7deg)}
.cat-r{right:0;transform:scaleX(-1) rotate(7deg)}
.sticker{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(8px 8px 0 var(--ink))}
.sticker.cat-r{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(-8px 8px 0 var(--ink))}
.bubble{position:absolute;z-index:2;left:50%;color:var(--ink);background:var(--white);border:4px solid var(--ink);border-radius:18px;padding:.15em .55em;box-shadow:6px 6px 0 var(--ink);font-family:var(--display);line-height:1.15;white-space:nowrap}
.scene .bubble{top:31%;transform:translateX(-50%) rotate(-5deg);font-size:clamp(22px,2.8vw,40px)}
.stages{list-style:none;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;font-weight:900;font-size:16px;line-height:1.2}
.stages li{padding:8px 16px;border-radius:999px;border:3px solid var(--ink)}
.stages .done{background:var(--ink);color:var(--ground)}
.stages .now{background:var(--orange);box-shadow:3px 3px 0 var(--ink)}
.stages .next{border-style:dashed}

/* Shared section type */
.band{padding-block:clamp(64px,8vw,112px)}
.band-blue{background:var(--blue);color:var(--ink)}
.band-ink{background:var(--ink);color:var(--cream)}
.band-paper{background:var(--paper)}
.band-orange{background:var(--orange)}
.eyebrow{display:inline-block;background:var(--white);border:3px solid var(--ink);border-radius:999px;padding:6px 16px;font-weight:900;font-size:15px;line-height:1.3;box-shadow:3px 3px 0 var(--ink)}
.dark .eyebrow{background:transparent;border-color:var(--ground);color:var(--ground);box-shadow:none}
.section-title{font-size:clamp(38px,5vw,72px);line-height:1;max-width:15em;margin-top:22px}
.section-intro{max-width:40em;margin-top:20px;font-size:clamp(17px,1.4vw,20px);font-weight:700;color:var(--blue-copy)}

/* How it works */
.steps{list-style:none;padding:0;margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;counter-reset:step}
.step{display:flex;flex-direction:column;gap:18px;counter-increment:step}
.panel{position:relative;aspect-ratio:400/330;background:var(--white);border:4px solid var(--ink);border-radius:28px;box-shadow:8px 8px 0 var(--ink);overflow:hidden}
.panel-pay{background:var(--ground)}
.panel .dist{left:6%;top:5%;width:46%;transform:none}
.panel .word{position:absolute;left:6%;top:7%;width:58%;overflow:visible}
.tag{position:absolute;right:5%;top:7%;padding:6px 14px;border-radius:999px;background:var(--ink);color:var(--ground);font-weight:900;font-size:15px;line-height:1.2}
.tag-hot{background:var(--orange);color:var(--ink);border:2.5px solid var(--ink)}
.panel .bubble{top:38%;transform:translateX(-50%) rotate(-5deg);font-size:clamp(20px,2.1vw,32px);border-width:3px;box-shadow:4px 4px 0 var(--ink)}
.panel .cat{bottom:4%;width:44%}
.panel-far .cat{width:32%;bottom:8%}
.panel-far .cat-l{left:4%;transform:none}
.panel-far .cat-r{right:4%;transform:scaleX(-1)}
.panel-pay .cat-l{left:7%;transform:rotate(-6deg)}
.panel-pay .cat-r{right:7%;transform:scaleX(-1) rotate(-6deg)}
.step h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.1vw,30px);line-height:1.1;display:flex;align-items:center;gap:12px}
.step h3::before{content:counter(step);flex-shrink:0;width:38px;height:38px;border-radius:50%;background:var(--ink);color:var(--ground);display:grid;place-items:center;font-size:20px}
.step p{font-size:17px;font-weight:700;color:var(--blue-copy)}
.note{max-width:52em;margin-top:40px;font-size:16px;font-weight:700;color:var(--blue-copy)}

/* Old Friends */
.friends{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center}
.friends h2{color:var(--ground)}
.friends-text{display:flex;flex-direction:column;align-items:flex-start}
.friends-text>p{max-width:34em;margin-top:24px;font-size:clamp(18px,1.5vw,21px);font-weight:700}
.points{list-style:none;padding:0;margin-top:28px;display:flex;flex-direction:column;gap:14px;max-width:36em}
.points li{display:flex;gap:14px;font-size:17px;font-weight:700}
.points li::before{content:'';flex-shrink:0;width:14px;height:14px;margin-top:6px;border-radius:50%;background:var(--ground)}
.tip{margin-top:30px;max-width:36em;padding:16px 20px;border:3px dashed var(--cream-2);border-radius:18px;font-size:16px;font-weight:700;color:var(--cream-2)}
.lock{position:relative;justify-self:center;width:min(340px,100%)}
.lock-phone{background:var(--white);border-radius:58px;padding:10px;box-shadow:12px 12px 0 var(--orange)}
.lock-screen{aspect-ratio:320/620;border-radius:48px;background:var(--ground);color:var(--ink);display:flex;flex-direction:column;align-items:center;padding:14px 14px 26px}
.island{width:118px;height:34px;border-radius:20px;background:var(--ink)}
.lock-date{margin-top:30px;font-weight:800;font-size:17px}
.lock-time{font-family:'Lilita One',var(--display);font-size:96px;line-height:1}
.notes{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:10px}
.notif{display:flex;align-items:center;gap:10px;background:var(--white);border:2.5px solid var(--ink);border-radius:20px;padding:11px 12px}
.notif>img:first-child{width:34px;height:34px;border-radius:8px}
.notif>img:last-child{width:40px;height:40px}
.notif div{flex:1;min-width:0;font-size:14px;font-weight:700;line-height:1.35}
.notif b{font-weight:900;display:block}
.notif-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.notif-head b{min-width:0}
.notif-head span{color:#6B6253;font-size:12px;white-space:nowrap}
.lock .bubble{left:auto;right:-16%;top:43%;transform:rotate(6deg);font-size:40px;box-shadow:6px 6px 0 var(--orange)}
.lock .cat{left:-34%;top:32%;width:52%;transform:rotate(-10deg)}
.lock .sticker{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(8px 8px 0 var(--orange))}

/* More to play with */
.cards{margin-top:48px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.card{display:flex;flex-direction:column;gap:16px;background:var(--white);border:4px solid var(--ink);border-radius:28px;padding:26px;box-shadow:8px 8px 0 var(--ink)}
.card h3{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1}
.card p{font-size:17px;font-weight:700;color:var(--copy)}
.card-art{min-height:150px;display:flex;align-items:center;justify-content:center}
.tiles{display:flex;justify-content:center}
.tiles img{width:min(84px,19.5%);height:auto;margin-inline:-6px;border-radius:20px;box-shadow:4px 4px 0 var(--ink)}
.tiles img:nth-child(odd){transform:rotate(-6deg)}
.tiles img:nth-child(even){transform:rotate(5deg) translateY(10px)}
.chips{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.chips li{padding:8px 16px;border:3px solid var(--ink);border-radius:999px;font-weight:900;font-size:15px;background:var(--ground)}
.chips li:nth-child(even){background:var(--blue)}
.rules{list-style:none;padding:0;width:100%;display:flex;flex-direction:column;gap:8px}
.rules li{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:14px;font-weight:800}
.rules span{padding:5px 12px;border:2.5px solid var(--ink);border-radius:999px;background:var(--white)}
.rules .then{background:var(--ink);color:var(--ground)}
.rules .then::before{content:'→ '}
.rules-note{font-size:14px!important;color:var(--muted)!important}

/* Price, privacy, FAQ */
.plans{margin-top:44px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;max-width:1000px}
.plan{border:4px solid var(--ink);border-radius:28px;padding:30px;background:var(--white);box-shadow:8px 8px 0 var(--ink)}
.plan-paid{background:var(--ground)}
.plan h3{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1}
.plan ul{list-style:none;padding:0;margin-top:18px;display:flex;flex-direction:column;gap:10px}
.plan li{display:flex;gap:12px;font-size:17px;font-weight:800}
.plan li::before{content:'';flex-shrink:0;width:18px;height:10px;margin-top:6px;border-left:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:rotate(-45deg)}
.price-note{margin-top:24px;font-size:16px;font-weight:700;color:var(--muted)}
.privacy{margin-top:clamp(64px,7vw,96px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 48px;align-items:start;border-top:4px solid var(--ink);padding-top:40px}
.privacy h2{font-size:clamp(32px,3.6vw,52px);line-height:1.05}
.privacy p{font-size:18px;font-weight:700;color:var(--copy)}
.privacy .text-link{display:inline-block;margin-top:14px;font-size:17px}
.faq{margin-top:clamp(64px,7vw,96px)}
.faq h2{font-size:clamp(38px,5vw,72px);line-height:1}
.faq-grid{margin-top:40px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 56px}
.qa h3{font-size:20px;font-weight:900;line-height:1.3}
.qa p{margin-top:8px;font-size:17px;font-weight:600;color:var(--copy);line-height:1.6}

/* Closing and footer */
.closing{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.closing-text{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.closing h2{font-size:clamp(40px,5.2vw,76px);line-height:1}
.closing-text>p{font-size:20px;font-weight:800}
.closing .btn{box-shadow:6px 6px 0 var(--ink)}
.closing .btn-soon{box-shadow:none;border-color:var(--ink)}
.closing .btn-soon::before{background:var(--ground)}
.closing-art{position:relative;aspect-ratio:600/380;width:100%;max-width:560px;justify-self:center}
.closing-art .cat{bottom:0;width:48%}
.closing-art .cat-l{left:2%;transform:rotate(-6deg)}
.closing-art .cat-r{right:2%;transform:scaleX(-1) rotate(-6deg)}
.closing-art .bubble{top:2%;transform:translateX(-50%) rotate(4deg);font-size:clamp(26px,3vw,44px)}
.site-foot{background:var(--ink);color:var(--cream);padding-block:36px calc(36px + env(safe-area-inset-bottom,0px));font-size:15px;font-weight:700}
.foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.foot a{text-decoration:none;padding:10px 0}
.foot a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-brand{color:var(--white);font-weight:900}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 24px;margin-left:auto}
.foot small{width:100%;font-size:13px;color:var(--cream-2)}

@media (prefers-reduced-motion:no-preference){
  .hero .bubble{animation:grr 1.8s ease-in-out infinite}
  @keyframes grr{0%,100%{transform:translateX(-50%) rotate(-5deg)}50%{transform:translateX(-50%) rotate(-2deg) scale(1.04)}}
}
@media (max-width:1100px){
  .cards{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cards .card:last-child{grid-column:1/-1}
}
@media (max-width:899px){
  .page-nav{display:none}
  .menu{display:block}
  .top{gap:10px;min-height:72px}
  .top .lang{margin-left:auto}
  .brand img{width:38px;height:38px}
  .brand span{font-size:25px}
  .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "scene" "body";padding-block:4px 64px}
  .hero-head{gap:16px}
  .hero h1{font-size:min(64px,14.4vw);line-height:.95}
  .scene-wrap{margin-top:16px;gap:16px}
  .hero-body{margin-top:24px;gap:18px;width:100%}
  .cta-row{width:100%}
  .btn{width:100%;padding-inline:18px;font-size:20px}
  .steps,.friends,.closing,.privacy{grid-template-columns:minmax(0,1fr)}
  .friends{gap:48px}
  .lock{width:min(360px,100%)}
  .lock .bubble{font-size:28px;right:-2%;top:40%}
  .lock .cat{left:-4%;top:30%;width:36%}
  .lock-screen{aspect-ratio:320/540}
  .faq-grid{grid-template-columns:minmax(0,1fr)}
  .closing-art{order:-1}
}
@media (max-width:640px){
  body{font-size:17px}
  .cards,.plans{grid-template-columns:minmax(0,1fr)}
  .cards .card:last-child{grid-column:auto}
  .stages{gap:5px;font-size:13px}
  .stages li{padding:6px 10px;border-width:2.5px}
  .chip,.eyebrow{font-size:13px;padding:5px 13px}
  .sticker{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(5px 5px 0 var(--ink))}
  .sticker.cat-r{filter:drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(-5px 5px 0 var(--ink))}
  .bubble{border-width:3px;box-shadow:4px 4px 0 var(--ink)}
  .panel,.card,.plan{border-width:3px;box-shadow:5px 5px 0 var(--ink)}
  .card,.plan{padding:22px}
  .lock-time{font-size:72px}
}