/* ============================================================
   Pawpal landing (index) — "Fun Illustrated" style.
   Self-contained: does NOT depend on legal.css. The legal /
   support pages keep their own legal.css and are untouched.
   Palette #fff8ee cream · coral #ff6b4a · flat art + 2px ink
   outlines · pill buttons · chunky hard offset shadows.
   ============================================================ */

:root {
  --bg:        #fef8ec;   /* warm cream (matched to mascot art bg) */
  --peach:     #ffe9d6;
  --mint:      #e3f4ee;
  --white:     #fffdf8;
  --ink:       #2d2a26;   /* outline / text */
  --ink-70:    #5b544c;
  --coral:     #ff6b4a;
  --sun:       #ffc24b;
  --teal:      #2bb3a3;
  --berry:     #7b4ddb;
  --sky:       #4aa8ff;

  --ff-d: 'Fredoka', 'Jua', 'Noto Sans KR', system-ui, sans-serif;
  --ff-b: 'Nunito', 'Noto Sans KR', system-ui, sans-serif;

  --maxw: 1080px;
  --px:   clamp(20px, 5vw, 48px);
  --sh:   4px 4px 0 var(--ink);       /* diagonal card shadow */
  --sh-b: 0 4px 0 var(--ink);         /* chunky button shadow */
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* , *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body.home {
  font-family: var(--ff-b); color: var(--ink); background: var(--bg);
  line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; border-radius: 6px; }

.skip-link {
  position: fixed; left: 14px; top: 10px; z-index: 1000;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: var(--white); text-decoration: none;
  font-family: var(--ff-b); font-weight: 800; font-size: 13px;
  transform: translateY(-180%); transition: transform .2s var(--bounce);
}
.skip-link:focus { transform: translateY(0); }
.lp-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--px); }

/* ── Nav ─────────────────────────────────────────────────── */
nav {
  position: fixed; inset: 0 0 auto 0; z-index: 500; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--px);
  background: rgba(254,248,236,.86);
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border-bottom: 2px solid var(--ink);
}
.nav-logo {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  font-family: var(--ff-d); font-weight: 600; font-size: 20px; color: var(--ink);
}
.nav-logo img { width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--ink); }
.nav-right { display: flex; align-items: center; gap: 12px; }

/* Language switcher (markup from legal.js) */
.lang-sw { position: relative; }
.lang-btn {
  display: flex; align-items: center; gap: 7px; min-height: 42px;
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px;
  padding: 6px 14px; color: var(--ink); cursor: pointer;
  font-family: var(--ff-b); font-weight: 700; font-size: 13px;
  box-shadow: var(--sh-b); transition: transform .18s var(--bounce), box-shadow .18s var(--bounce);
}
.lang-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.lang-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.lang-btn svg { width: 10px; height: 6px; transition: transform .2s; }
.lang-btn.open svg { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 150px;
  background: var(--white); border: 2px solid var(--ink); border-radius: 16px;
  padding: 7px; display: none; z-index: 100; box-shadow: var(--sh);
}
.lang-menu.open { display: block; }
.lang-menu button {
  display: block; width: 100%; min-height: 42px; padding: 9px 14px;
  background: none; border: none; border-radius: 10px; cursor: pointer;
  font-family: var(--ff-b); font-weight: 700; font-size: 14px; color: var(--ink);
  text-align: left; transition: background-color .15s;
}
.lang-menu button:hover, .lang-menu button.active { background: var(--peach); }

/* ── Shared section bits ─────────────────────────────────── */
.lp-section { padding: clamp(64px, 9vw, 116px) 0; position: relative; }
.lp-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-b); font-weight: 800; font-size: 12px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ink);
  background: var(--sun); border: 2px solid var(--ink); border-radius: 999px;
  padding: 7px 15px; box-shadow: var(--sh-b);
}
.lp-kicker svg { width: 15px; height: 15px; }
.lp-kicker--teal { background: var(--teal); color: var(--white); }
.lp-kicker--coral { background: var(--coral); color: var(--white); }
.lp-h2 {
  font-family: var(--ff-d); font-weight: 600;
  font-size: clamp(28px, 4.6vw, 44px); line-height: 1.15;
  letter-spacing: -.01em; color: var(--ink);
  margin-top: 18px; max-width: 20ch; word-break: keep-all; text-wrap: balance;
}
.lp-sub {
  font-family: var(--ff-b); font-size: clamp(15px, 1.8vw, 17px);
  color: var(--ink-70); margin-top: 12px; max-width: 46ch; word-break: keep-all;
}
.lp-center { text-align: center; }
.lp-center .lp-kicker { margin: 0 auto; }
.lp-center .lp-h2, .lp-center .lp-sub { margin-left: auto; margin-right: auto; }

/* ── Hero ────────────────────────────────────────────────── */
.lp-hero {
  position: relative; max-width: var(--maxw); margin: 0 auto;
  padding: calc(68px + clamp(36px, 6vw, 72px)) var(--px) clamp(40px, 6vw, 80px);
  display: grid; grid-template-columns: 1.02fr .98fr; align-items: center;
  gap: clamp(24px, 5vw, 64px);
}
.lp-hero-copy { max-width: 540px; }
.lp-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--ff-b); font-weight: 800; font-size: 12px;
  letter-spacing: .5px; text-transform: uppercase; color: var(--ink);
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px;
  padding: 8px 15px; box-shadow: var(--sh-b);
}
.lp-eyebrow .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); border: 2px solid var(--ink); }
.lp-h1 {
  font-family: var(--ff-d); font-weight: 700;
  font-size: clamp(38px, 6.4vw, 66px); line-height: 1.08;
  letter-spacing: -.015em; color: var(--ink); margin-top: 20px; word-break: keep-all;
}
.lp-hl {
  display: inline-block; color: var(--white); background: var(--coral);
  border: 2px solid var(--ink); border-radius: 999px;
  padding: 0 .34em; transform: rotate(-1.5deg); line-height: 1.15;
}
.lp-hl--teal { background: var(--teal); }
.lp-lead {
  font-size: clamp(16px, 1.9vw, 18px); color: var(--ink-70);
  margin-top: 20px; max-width: 42ch; word-break: keep-all;
}
.lp-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 30px; }
.lp-store {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 13px 24px; border-radius: 999px;
  background: var(--coral); color: var(--white);
  border: 2px solid var(--ink); box-shadow: var(--sh-b);
  font-family: var(--ff-b); text-decoration: none; cursor: default;
  transition: transform .2s var(--bounce), box-shadow .2s var(--bounce);
}
.lp-store:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--ink); }
.lp-store:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.lp-store svg { width: 24px; height: 24px; flex: none; }
.lp-store .s1 { display: block; font-size: 10px; font-weight: 700; letter-spacing: .4px; opacity: .9; }
.lp-store .s2 { display: block; font-size: 17px; font-weight: 800; letter-spacing: .2px; line-height: 1.1; }
.lp-meta { font-family: var(--ff-b); font-size: 13px; font-weight: 600; color: var(--ink-70); line-height: 1.55; }

/* Full-column flex box: the phone stays centred while .lp-float chips are
   positioned against the whole column, which keeps them clear of the screen. */
.lp-hero-media {
  position: relative; justify-self: center;
  display: flex; justify-content: center; width: 100%;
}
/* Blob behind the phone, same geometry as the showcase phones. */
.lp-hero-media::before {
  content: ""; position: absolute; z-index: 0;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(392px, 86vw); height: 84%;
  background: var(--sun); border: 2px solid var(--ink);
  border-radius: 46% 54% 52% 48% / 55% 48% 52% 45%;
}
/* The clip is cropped to screen content only (350x762, the real 0.46 screen
   aspect) so the site's own bezel frames it — the source clip's device frame
   left black wedges outside its 68px corner radius. */
.lp-phone--hero { width: min(300px, 72vw); }
.lp-phone video {
  display: block; width: 100%; height: auto;
  border-radius: 32px; background: var(--peach);
}
/* Hangs off the bottom-left frame edge: over the screen it reads as covering
   the UI, and the bottom-right is taken by the .lp-float--br chip. */
.lp-vbtn {
  position: absolute; z-index: 4; left: -16px; bottom: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; padding: 0; cursor: pointer;
  background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 50%; box-shadow: var(--sh-b);
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce);
}
.lp-vbtn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.lp-vbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.lp-vbtn svg { width: 17px; height: 17px; }
.lp-vbtn .ic-play { display: none; }
.lp-vbtn.paused .ic-pause { display: none; }
.lp-vbtn.paused .ic-play { display: block; }
/* decorative floating chips */
.lp-float {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px;
  padding: 8px 14px; box-shadow: var(--sh-b);
  font-family: var(--ff-b); font-weight: 800; font-size: 13px; color: var(--ink);
}
.lp-float svg { width: 16px; height: 16px; }
.lp-float .heart { color: var(--coral); }
.lp-float--tl { top: 6%; left: -4%; transform: rotate(-4deg); }
.lp-float--br { bottom: 10%; right: -2%; transform: rotate(3deg); }
.lp-float--br .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); border: 2px solid var(--ink); }

/* ── Steps ───────────────────────────────────────────────── */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 42px; }
.lp-step {
  background: var(--white); border: 2px solid var(--ink); border-radius: 24px;
  padding: 28px 24px; box-shadow: var(--sh);
  transition: transform .22s var(--bounce), box-shadow .22s var(--bounce);
}
.lp-step:hover { transform: translateY(-6px); box-shadow: 6px 10px 0 var(--ink); }
.lp-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 14px;
  border: 2px solid var(--ink); box-shadow: var(--sh-b);
  font-family: var(--ff-d); font-weight: 700; font-size: 20px; color: var(--white);
  margin-bottom: 18px;
}
.lp-step-num.c1 { background: var(--coral); }
.lp-step-num.c2 { background: var(--teal); }
.lp-step-num.c3 { background: var(--berry); }
.lp-step h3 { font-family: var(--ff-d); font-weight: 600; font-size: 20px; color: var(--ink); margin-bottom: 8px; word-break: keep-all; }
.lp-step p { font-family: var(--ff-b); font-size: 15px; color: var(--ink-70); word-break: keep-all; }

/* ── Showcase ────────────────────────────────────────────── */
.lp-shows { display: grid; gap: clamp(40px, 7vw, 84px); margin-top: 50px; }
.lp-show { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(28px, 6vw, 72px); }
.lp-show:nth-child(even) .lp-show-media { order: 2; }
.lp-show-media { display: flex; justify-content: center; position: relative; }
/* colored blob behind the phone */
.lp-show-media::before {
  content: ""; position: absolute; z-index: 0; width: 78%; height: 82%;
  border-radius: 46% 54% 52% 48% / 55% 48% 52% 45%;
  border: 2px solid var(--ink);
}
.lp-show:nth-child(1) .lp-show-media::before { background: var(--sun); }
.lp-show:nth-child(2) .lp-show-media::before { background: var(--sky); }
.lp-show:nth-child(3) .lp-show-media::before { background: var(--teal); }
.lp-phone {
  position: relative; z-index: 1; width: min(258px, 64vw);
  padding: 8px; border-radius: 40px;
  background: var(--ink); border: 2px solid var(--ink);
  box-shadow: var(--sh);
}
.lp-phone img { display: block; width: 100%; height: auto; border-radius: 32px; background: var(--peach); }
.lp-show-text { max-width: 440px; }
.lp-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-b); font-weight: 800; font-size: 12px;
  letter-spacing: .6px; text-transform: uppercase; color: var(--ink);
  background: var(--white); border: 2px solid var(--ink); border-radius: 999px;
  padding: 6px 13px; box-shadow: var(--sh-b); margin-bottom: 14px;
}
.lp-tag svg { width: 15px; height: 15px; }
.lp-tag.c-coral { color: var(--coral); }
.lp-tag.c-sky { color: var(--sky); }
.lp-tag.c-teal { color: var(--teal); }
.lp-show-text h3 { font-family: var(--ff-d); font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; color: var(--ink); word-break: keep-all; }
.lp-show-text p { font-family: var(--ff-b); font-size: 16px; color: var(--ink-70); margin-top: 12px; word-break: keep-all; }

/* ── Screenshot gallery ──────────────────────────────────── */
.lp-shots-scroll {
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; padding: 44px 0 12px;
  scrollbar-color: var(--ink) var(--peach); scrollbar-width: thin;
}
.lp-shots-scroll::-webkit-scrollbar { height: 10px; }
.lp-shots-scroll::-webkit-scrollbar-track { background: var(--peach); border-radius: 999px; }
.lp-shots-scroll::-webkit-scrollbar-thumb { background: var(--ink); border-radius: 999px; }
/* max-content + auto margins centre the row while it still fits, then let it
   scroll once six shots outgrow the viewport. */
.lp-shots { display: flex; width: max-content; margin: 0 auto; gap: 18px; padding: 0 var(--px); }
.lp-shot { flex: 0 0 auto; width: min(228px, 56vw); scroll-snap-align: center; }
.lp-shot img {
  display: block; width: 100%; height: auto;
  border: 2px solid var(--ink); border-radius: 24px; box-shadow: var(--sh);
  background: var(--peach);
}

/* ── Trust ───────────────────────────────────────────────── */
.lp-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; }
.lp-card {
  background: var(--white); border: 2px solid var(--ink); border-radius: 24px;
  padding: 26px 22px; box-shadow: var(--sh);
  transition: transform .22s var(--bounce), box-shadow .22s var(--bounce);
}
.lp-card:hover { transform: translateY(-6px); box-shadow: 6px 10px 0 var(--ink); }
.lp-card-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 14px; color: var(--white);
  border: 2px solid var(--ink); box-shadow: var(--sh-b); margin-bottom: 16px;
}
.lp-card-ic svg { width: 23px; height: 23px; }
.lp-card:nth-child(1) .lp-card-ic { background: var(--coral); }
.lp-card:nth-child(2) .lp-card-ic { background: var(--teal); }
.lp-card:nth-child(3) .lp-card-ic { background: var(--berry); }
.lp-card:nth-child(4) .lp-card-ic { background: var(--sky); }
.lp-card h3 { font-family: var(--ff-d); font-weight: 600; font-size: 17px; color: var(--ink); margin-bottom: 7px; word-break: keep-all; }
.lp-card p { font-family: var(--ff-b); font-size: 14px; color: var(--ink-70); word-break: keep-all; }

/* ── CTA band ────────────────────────────────────────────── */
.lp-band-wrap { padding: 0 var(--px) clamp(40px, 6vw, 72px); }
.lp-band {
  max-width: var(--maxw); margin: 0 auto; position: relative;
  background: var(--peach); border: 2px solid var(--ink); border-radius: 36px;
  box-shadow: var(--sh);
  display: grid; grid-template-columns: 1.3fr .7fr; align-items: center;
  gap: clamp(24px, 5vw, 56px); padding: clamp(36px, 5vw, 60px) clamp(28px, 5vw, 64px);
  overflow: hidden;
}
.lp-band h2 { font-family: var(--ff-d); font-weight: 700; font-size: clamp(26px, 3.8vw, 40px); line-height: 1.12; color: var(--ink); word-break: keep-all; }
.lp-band p { font-family: var(--ff-b); font-size: 15px; font-weight: 600; color: var(--ink-70); margin-top: 12px; word-break: keep-all; }
.lp-band .lp-actions { margin-top: 24px; }
.lp-band-illus { justify-self: center; }
.lp-band-illus img { width: min(240px, 60vw); height: auto; display: block; }
.lp-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.lp-links a {
  display: inline-flex; align-items: center; min-height: 42px; padding: 9px 18px;
  border-radius: 999px; background: var(--white); border: 2px solid var(--ink);
  box-shadow: var(--sh-b); font-family: var(--ff-b); font-weight: 700; font-size: 13px;
  color: var(--ink); text-decoration: none;
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce);
}
.lp-links a:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }
.lp-links a:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }

/* ── Footer ──────────────────────────────────────────────── */
footer {
  background: var(--mint); border-top: 2px solid var(--ink);
  padding: 36px var(--px);
}
.footer-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-family: var(--ff-b); font-weight: 600; font-size: 13px; color: var(--ink-70);
}
.footer-links { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-links a {
  padding: 8px 15px; border-radius: 999px; background: var(--white);
  border: 2px solid var(--ink); color: var(--ink); text-decoration: none;
  font-weight: 700; box-shadow: var(--sh-b);
  transition: transform .18s var(--bounce), box-shadow .18s var(--bounce);
}
.footer-links a:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink); }

/* ── Reveal on scroll (opt-in via .js) ───────────────────── */
.js .lp-reveal { opacity: 0; transform: translateY(24px) scale(.97); }
.js .lp-reveal.in {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .55s var(--bounce);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; text-align: center; padding-top: calc(68px + 36px); }
  .lp-hero-copy { max-width: 620px; margin: 0 auto; }
  .lp-lead { margin-left: auto; margin-right: auto; }
  .lp-actions { justify-content: center; }
  .lp-hero-media { order: -1; margin-bottom: 6px; }
  .lp-steps { grid-template-columns: 1fr; }
  .lp-show { grid-template-columns: 1fr; text-align: center; gap: 26px; }
  .lp-show:nth-child(even) .lp-show-media { order: 0; }
  .lp-show-media { order: -1; }
  .lp-show-text { max-width: 520px; margin: 0 auto; }
  .lp-tag { }
  .lp-trust { grid-template-columns: repeat(2, 1fr); }
  .lp-band { grid-template-columns: 1fr; text-align: center; }
  .lp-band .lp-actions, .lp-links { justify-content: center; }
  .lp-band-illus { order: -1; }
}
@media (max-width: 560px) {
  .lp-float { display: none; }
  .lp-trust { grid-template-columns: 1fr; }
  .lp-store { flex: 1 1 auto; justify-content: center; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .js .lp-reveal { opacity: 1; transform: none; transition: none; }
  .lp-step, .lp-card, .lp-store, .lp-links a, .footer-links a, .lang-btn, .lp-vbtn { transition: none; }
  .lp-shots-scroll { scroll-snap-type: none; }
}