:root{
  --pink:#D6338A; --purple:#8E4A9E; --ink:#211D24; --paper:#FFFFFF; --bg:#F7F4F8; --line:#E7DFEA; --muted:#6A616F;
  --display:'Bebas Neue','Arial Narrow',Impact,sans-serif; --body:'Source Sans 3',-apple-system,'Segoe UI',system-ui,sans-serif;
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.4;display:flex;flex-direction:column;overflow:hidden;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
#screen{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-top:var(--sat)}
#screen.fit{overflow:hidden;display:flex;flex-direction:column}
#tabs{flex:none;display:grid;grid-template-columns:repeat(5,1fr);background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding-bottom:var(--sab)}
#tabs[hidden]{display:none}
#tabs button{border:0;background:none;padding:9px 0 7px;font-size:11px;font-weight:700;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
#tabs button[aria-current=page]{color:var(--pink)}
#tabs svg,.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wm{font-family:var(--display);line-height:.84;letter-spacing:.01em;display:inline-block;font-size:30px}
.wm small{display:block;font-size:.42em;letter-spacing:.08em}
.wm .e{color:var(--pink)}
.pad{padding:16px}
.top{display:flex;justify-content:space-between;align-items:flex-end;padding:12px 18px 8px;flex:none}
.round{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0}
h2.sec{font-family:var(--display);font-weight:400;font-size:30px;letter-spacing:.03em;margin:0 0 10px;line-height:1}
h2.sec b{color:var(--pink);font-weight:400}
.tag{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pink)}
.muted{color:var(--muted);font-size:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:13px 20px;font-weight:700;cursor:pointer;background:var(--pink);color:#fff;text-decoration:none;text-align:center}
.btn.alt{background:none;color:var(--ink);border:2px solid var(--ink)}
.btn.ghost{background:none;color:var(--muted);border:1px solid var(--line)}
.btn.block{display:flex;width:100%}
.btn.sm{padding:9px 14px;font-size:14px;border-radius:12px}

/* HOME: one screen, no page scroll. Hero takes the space left over. */
.home{flex:1;min-height:0;display:flex;flex-direction:column;gap:10px;padding:0 14px 10px}
.hero{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}
.slides{flex:1;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;scrollbar-width:none;border-radius:28px}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:center;border:0;padding:0;border-radius:28px;position:relative;overflow:hidden;cursor:pointer;text-align:left;color:#fff;
  background:linear-gradient(150deg,var(--pink),var(--purple))}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(33,29,36,0) 30%,rgba(33,29,36,.78))}
.slide .in{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:20px;display:flex;flex-direction:column;gap:6px}
.slide .kick{align-self:flex-start;background:rgba(255,255,255,.2);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:999px;padding:4px 12px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.slide h3{font-family:var(--display);font-weight:400;font-size:clamp(32px,9vw,44px);line-height:.95;letter-spacing:.02em;margin:0;text-wrap:balance}
.slide p{margin:0;opacity:.9;font-size:15px}
.slide .go{align-self:flex-start;margin-top:6px;background:#fff;color:var(--ink);border-radius:12px;padding:9px 16px;font-weight:700;font-size:14px}
.dots{display:flex;justify-content:center;gap:6px;flex:none;height:8px}
.dots i{width:6px;height:6px;border-radius:50%;background:var(--line);transition:all .2s}
.dots i.on{width:18px;border-radius:4px;background:var(--pink)}
.tiles{flex:none;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tile{border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:10px 4px;display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:700;cursor:pointer;text-decoration:none;color:var(--ink)}
.tile .ico{color:var(--pink)}
.ad{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);background:var(--paper);border-radius:18px;padding:9px 12px;text-decoration:none;color:inherit;min-height:52px}
.ad .lab{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;display:block}
.ad b{font-size:15px;display:block;line-height:1.15}
.ad img{height:34px;max-width:90px;object-fit:contain}

/* lists and detail */
.card{background:var(--paper);border:1px solid var(--line);border-radius:20px;padding:14px;width:100%;text-align:left;cursor:pointer;display:block}
.item{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border:0;border-bottom:1px solid var(--line);background:none;width:100%;text-align:left;cursor:pointer}
.item .dot{width:52px;height:52px;border-radius:14px;flex:none;background:linear-gradient(135deg,var(--purple),var(--pink));overflow:hidden}
.item .dot img{width:100%;height:100%;object-fit:cover}
.h3{font-weight:700;font-size:17px;line-height:1.2;display:block}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.cover{aspect-ratio:3/4;border-radius:6px;background:var(--paper);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;box-shadow:3px 4px 0 var(--line);position:relative}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover i{display:block;height:7%;background:linear-gradient(90deg,var(--pink),var(--purple));flex:none}
.cover .wm{font-size:clamp(18px,6vw,28px);margin:8% 8% 0}
.cover .ph{flex:1;margin:8%;border-radius:2px}
.back{border:0;background:none;color:var(--pink);font-weight:700;cursor:pointer;padding:0 0 10px;font-size:16px}
.body p{margin:0 0 14px}
.list-gap{display:flex;flex-direction:column;gap:14px}
.hero-in{background:linear-gradient(160deg,var(--pink),var(--purple));color:#fff;padding:36px 22px 28px}
.hero-in .wm{font-size:58px}.hero-in .wm .e{color:#fff}
.hero-in p{margin:14px 0 0;font-size:17px}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.field label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.field input,.field select{border:1px solid var(--line);border-radius:12px;padding:13px;background:var(--paper);width:100%;font-size:16px}
.check{display:flex;gap:10px;align-items:flex-start;margin:4px 0 14px;font-size:14px}
.check input{margin-top:3px;width:18px;height:18px;accent-color:var(--pink)}
.err{color:#B3261E;font-weight:600;font-size:14px;min-height:20px;margin:0 0 8px}
.supp{display:flex;flex-wrap:wrap;gap:8px}
.supp a{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink);text-decoration:none}
.steps{padding-left:20px;margin:0 0 16px}.steps li{margin-bottom:8px}
#notice{position:fixed;z-index:50;left:12px;right:12px;top:calc(var(--sat) + 8px);background:var(--ink);color:#fff;border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.3);transform:translateY(-160%);transition:transform .35s}
#notice.on{transform:none}
#notice b{display:block;font-size:14px}#notice span{font-size:14px;opacity:.9}
@media (prefers-reduced-motion:reduce){#notice,.dots i{transition:none}.slides{scroll-behavior:auto}}
@media (max-height:640px){.tile{padding:7px 4px}.tile .ico{width:18px;height:18px}}

/* iPad and larger: side rail instead of bottom tabs, two-column no-scroll home, readable column widths */
@media (min-width:768px){
  body{flex-direction:row}
  #tabs{order:-1;width:104px;flex:none;grid-template-columns:1fr;grid-auto-rows:min-content;align-content:start;gap:6px;border-top:0;border-right:1px solid var(--line);padding:calc(var(--sat) + 20px) 8px var(--sab)}
  #tabs button{padding:12px 0;border-radius:16px;font-size:12px}
  #tabs button[aria-current=page]{background:rgba(214,51,138,.1)}
  .top{padding:20px 28px 10px}
  .wm{font-size:36px}
  .pad{max-width:780px;margin-inline:auto;padding:24px 28px}
  .grid2.eds{grid-template-columns:repeat(3,1fr);gap:22px}
  .home{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;gap:14px;padding:0 28px 28px}
  .hero{grid-row:1/-1;grid-column:1}
  .home>:not(.hero){grid-column:2}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .tile{padding:20px 8px;font-size:14px;border-radius:22px}
  .tile .ico{width:26px;height:26px}
  .slide .in{padding:32px}.slide h3{font-size:clamp(40px,6vw,64px)}.slide p{font-size:17px}
  .ad{padding:14px 16px;border-radius:22px}
  #screen>form{max-width:520px;margin-inline:auto;width:100%}
  .hero-in{padding:56px 28px 36px;text-align:center}
}
@media (min-width:768px) and (max-height:700px){.tile{padding:12px 8px}}

.slide .kick.new{background:var(--pink);color:#fff}
.slide img{object-position:center top}
.head-img{width:100%;max-height:260px;object-fit:cover;border-radius:18px;margin-bottom:12px;display:block}
.inline-img{width:100%;max-height:320px;object-fit:cover;border-radius:18px;margin:6px 0 16px;display:block}
@media (min-width:768px){.head-img{max-height:340px}.inline-img{max-height:420px}}

.ad .logo{height:38px;max-width:150px;object-fit:contain;object-position:left center;display:block;margin:3px 0}
.logos{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.logo-card{background:#fff;border:1px solid var(--line);border-radius:16px;height:68px;padding:10px;display:grid;place-items:center;text-decoration:none;color:var(--ink);font-weight:700;font-size:13px;text-align:center}
.logo-card img{max-width:100%;max-height:44px;object-fit:contain}

.welcome-h{font-family:var(--display);font-weight:400;font-size:34px;line-height:1.1;margin:14px 0 0;text-transform:uppercase;letter-spacing:.02em;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.legal{margin:22px 0 0;padding:0 22px 22px;font-size:11px;line-height:1.4;color:var(--muted);text-align:center}
@media (min-width:768px){.welcome-h{font-size:38px}}
.slide.empty{cursor:default;background:linear-gradient(160deg,var(--pink),var(--purple))}.slide.empty::after{display:none}
@media (min-width:768px){#screen{max-width:1180px;margin-inline:auto}}
.wm-img{display:block;height:30px;width:auto;max-width:100%}
.hero-in .wm-img{height:56px}
.cover .wm-img{width:70%;height:auto;margin:8% 8% 0}
@media (min-width:768px){.wm-img{height:38px}.hero-in .wm-img{height:76px;margin-inline:auto}}

.legal .elf{display:block;width:120px;height:auto;margin:0 auto 10px}

.hero-in.welcome{position:relative;overflow:hidden}
.welcome .tilt{display:inline-block;background:#fff;color:var(--charcoal,#211D24);font-family:var(--display);font-size:22px;letter-spacing:.04em;text-transform:uppercase;padding:4px 12px;margin-top:18px;transform:rotate(-3deg)}
.welcome .bar{display:inline-block;padding:4px 16px 2px 22px;margin-left:-22px;line-height:1.08;text-wrap:balance}
.welcome .b2{background:#211D24;color:#fff;font-size:1.12em}
.welcome p{max-width:46ch}
@media (min-width:768px){.welcome-h{align-items:center}.welcome .bar{margin-left:0;padding-left:22px}.welcome .tilt{margin-top:22px}.welcome p{margin-inline:auto}}

.welcome .wm-img{position:absolute;top:18px;right:18px;height:30px!important;width:auto;margin:0!important}
.welcome .tilt{position:relative;z-index:2;margin-top:34px;margin-bottom:-12px;margin-left:-4px}
.welcome .welcome-h{margin-top:0}
.welcome .b2{padding-top:14px}
@media (min-width:768px){.welcome .wm-img{top:26px;right:28px;height:38px!important}.welcome .tilt{margin-top:40px}}

.legal{margin:36px 0 0;padding:0 22px max(24px,env(safe-area-inset-bottom,0px));border-top:4px solid var(--pink);background:#fff;text-align:center;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:8px}
.legal .elf{margin:22px auto 4px}
.legal .pp{color:var(--pink);font-weight:600;text-decoration:none}
.legal .pp:hover{text-decoration:underline}

#tabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
.tiles{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
@media (min-width:768px){#tabs{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr}.tiles{grid-auto-flow:row;grid-auto-columns:auto;grid-template-columns:1fr 1fr}}
.line .thumb{width:44px;height:58px;border-radius:6px;object-fit:cover;background:var(--line);flex:none;margin-right:12px}
@media (min-width:768px){
  #tabs{width:132px;gap:10px;padding-top:calc(var(--sat) + 28px)}
  #tabs button{padding:16px 0 14px;gap:8px;font-size:14px;letter-spacing:.02em}
  #tabs svg{width:34px;height:34px;stroke-width:1.8}
  .tile .ico{width:34px;height:34px}
}