/* Plupiko website. Tokens come from the LQUID design system (Figma, Blue mode). */

@font-face { font-family: "Nunito"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fonts/nunito-regular.woff") format("woff"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/nunito-semibold.woff") format("woff"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fonts/nunito-bold.woff") format("woff"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/nunito-extrabold.woff") format("woff"); }

:root {
  color-scheme: light;
  --canvas: #f2efe6;
  --surface: #ffffff;
  --text: #2c2228;
  --text-2: #776363;
  --text-on-dark: #ffffff;
  --link: #19627f;
  --success: #60a378;
  --border: #ede7e3;
  --track: rgba(44, 34, 40, 0.08);
  --sky: #badef2;
  --water: #3abbf3;
  --navy: #10475c;
  --gold-200: #fee092;
  --gold-300: #ffe760;
  --gold-400: #fbc434;
  --grass: #b8d18b;
  --leaf-400: #92bd94;
  --leaf-800: #2e5a40;
  --sand-300: #dec09e;

  --tile-water-bg: #e0f6ff; --tile-water-fg: #2aa9e1;
  --tile-peach-bg: #ffe8dc; --tile-peach-fg: #c77a62;
  --tile-gold-bg: #fee092;  --tile-gold-fg: #a14d18;
  --tile-rose-bg: #f1e4dd;  --tile-rose-fg: #db3352;
  --tile-purple-bg: #ebd7f0; --tile-purple-fg: #7b4a9e;
  --tile-leaf-bg: #edfcf3;  --tile-leaf-fg: #3f7a56;

  --shadow-card: 0 2px 8px rgba(43, 33, 41, 0.06);
  --shadow-float: 0 6px 20px -2px rgba(43, 33, 41, 0.16);

  --gutter: 20px;
  --section-gap: 112px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--text);
  font-family: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: var(--link); }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; border-radius: 8px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  padding: 10px 16px; border-radius: 12px;
  background: var(--surface); color: var(--text); font-weight: 700; text-decoration: none;
  box-shadow: var(--shadow-float);
}
.skip-link:focus { top: 16px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: calc(1200px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- type */

h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.13; font-weight: 800; letter-spacing: -0.015em; }
h2 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.18; font-weight: 800; letter-spacing: -0.01em; }
h3 { font-size: 22px; line-height: 28px; font-weight: 700; }
.lead { font-size: 20px; line-height: 30px; color: var(--text-2); }
.overline { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--link); }

@media (max-width: 759px) {
  .lead { font-size: 18px; line-height: 27px; }
}

/* ---------- small parts */

.icon { width: 24px; height: 24px; flex: none; }

.tile {
  display: inline-grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
}
.tile .icon { width: 22px; height: 22px; }
.tile-xs { width: 24px; height: 24px; border-radius: 8px; }
.tile-xs .icon { width: 15px; height: 15px; }
.tile-water { background: var(--tile-water-bg); color: var(--tile-water-fg); }
.tile-peach { background: var(--tile-peach-bg); color: var(--tile-peach-fg); }
.tile-gold { background: var(--tile-gold-bg); color: var(--tile-gold-fg); }
.tile-rose { background: var(--tile-rose-bg); color: var(--tile-rose-fg); }
.tile-purple { background: var(--tile-purple-bg); color: var(--tile-purple-fg); }
.tile-leaf { background: var(--tile-leaf-bg); color: var(--tile-leaf-fg); }

.card { background: var(--surface); border-radius: 28px; box-shadow: var(--shadow-card); }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; line-height: 18px; font-weight: 600; white-space: nowrap;
}
.tag-free { background: var(--tile-leaf-bg); color: var(--tile-leaf-fg); }
.tag-pro { background: var(--tile-gold-bg); color: var(--tile-gold-fg); }
.tag-soon { background: var(--border); color: var(--text-2); }
.tag-test { background: var(--gold-200); color: var(--tile-gold-fg); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }

.badge {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  width: 180px; height: 60px; border-radius: 13px;
  background: #000; color: #fff; border: 1px solid #a6a6a6;
  text-decoration: none; flex: none;
}
.badge-l1 { font-size: 11px; line-height: 13px; font-weight: 600; }
.badge-l2 { font-size: 24px; line-height: 26px; font-weight: 700; }
.badge.is-soon .badge-l1 { font-size: 10px; }
.badge-sm { width: 140px; height: 47px; border-radius: 10px; }
.badge-sm .badge-l1 { font-size: 9px; line-height: 10px; }
.badge-sm .badge-l2 { font-size: 19px; line-height: 21px; }

.check-list li, .trust li { display: flex; align-items: flex-start; gap: 10px; }
.check-list .icon, .trust .icon { color: var(--success); }

.text-link { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; text-decoration: none; }
.text-link .icon { width: 18px; height: 18px; }

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 16px;
  background: var(--water); color: #fff; font-weight: 700; text-decoration: none;
}

/* ---------- header */

.site-header { padding-block: 24px; }
.header-row { display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-size: 24px; line-height: 32px; font-weight: 800; }
.logo img { width: 44px; height: 44px; border-radius: 11px; }
.main-nav { display: flex; gap: 36px; margin-left: auto; }
.main-nav a { color: var(--text-2); font-size: 16px; line-height: 22px; font-weight: 600; text-decoration: none; }
.main-nav a:hover { color: var(--text); }
.header-actions { display: flex; align-items: center; gap: 24px; }

.lang { position: relative; }
.lang summary {
  display: flex; align-items: center; gap: 6px; cursor: pointer; list-style: none;
  padding: 8px 14px 8px 12px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 16px; line-height: 22px; font-weight: 600;
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary .icon { width: 18px; height: 18px; color: var(--text-2); }
.lang .lang-chevron { width: 14px; height: 14px; transform: rotate(90deg); transition: transform 0.15s; }
.lang[open] .lang-chevron { transform: rotate(-90deg); }
.lang-short { display: none; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 20;
  width: 240px; padding: 8px; border-radius: 24px;
  background: var(--surface); box-shadow: var(--shadow-float);
}
.lang-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 16px;
  color: var(--text); text-decoration: none; font-size: 15px; line-height: 20px; font-weight: 600;
}
.lang-menu a > span:first-child { flex: 1; }
.lang-menu a:hover { background: var(--canvas); }
.lang-menu a[aria-current] { background: var(--tile-water-bg); color: var(--tile-water-fg); font-weight: 700; }
.lang-code { font-size: 13px; color: var(--text-2); }
.lang-menu a[aria-current] .lang-code { color: inherit; }
.lang-check { width: 16px; height: 16px; }

@media (max-width: 1079px) { .main-nav { display: none; } .header-actions { margin-left: auto; } }
@media (max-width: 759px) {
  .site-header { padding-block: 16px; }
  .header-badge { display: none; }
  .lang-name { display: none; }
  .lang-short { display: inline; }
  .lang summary { padding-right: 10px; }
}

/* ---------- sections */

.section { margin-top: var(--section-gap); }
.section-head { display: flex; flex-direction: column; gap: 14px; }
.section-head.center { align-items: center; text-align: center; max-width: 720px; margin-inline: auto; }
.section-head.start { align-items: flex-start; }

@media (max-width: 759px) { :root { --section-gap: 72px; } }

/* ---------- hero */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 64px; align-items: center;
  padding-top: 32px;
}
.hero-text { display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px 8px 12px; border-radius: 999px; background: var(--surface);
  font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-2);
}
.hero-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.hero-note { font-size: 15px; line-height: 22px; color: var(--text-2); }
.trust { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--text-2); }
.trust .icon { width: 18px; height: 18px; }

.hero-scene {
  position: relative; aspect-ratio: 560 / 640; border-radius: 40px; overflow: hidden;
  background: #fef4e1;
}
.scene-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.scene-phone { position: absolute; width: 53%; left: 30.6%; top: 11.25%; filter: drop-shadow(0 6px 20px rgba(43, 33, 41, 0.16)); }
.scene-pomi { position: absolute; width: 34%; left: 1.4%; bottom: 1.9%; }

@media (max-width: 1079px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .hero-scene { max-width: 560px; width: 100%; justify-self: center; }
}
@media (max-width: 759px) {
  .hero { padding-top: 8px; }
  .hero-text { gap: 22px; }
  .hero-scene { aspect-ratio: 350 / 440; border-radius: 32px; }
  .scene-phone { width: 61%; left: 27.4%; top: 10.9%; }
  .scene-pomi { width: 35%; left: 1%; bottom: 2.3%; }
}

/* ---------- features */

.feature-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.feature { display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 32px; }
.feature p { color: var(--text-2); }

@media (max-width: 1079px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .feature-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 32px; }
  .feature { padding: 24px 24px 26px; gap: 12px; }
}

/* ---------- showcase */

.showcase {
  display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 48px; align-items: end;
  padding: 72px 72px 0; border-radius: 48px; background: var(--sky); overflow: hidden;
}
.showcase-text { display: flex; flex-direction: column; gap: 28px; padding-bottom: 72px; }
.check-list { display: flex; flex-direction: column; gap: 14px; }
.showcase-phones { position: relative; height: 560px; }
.showcase-phones img { position: absolute; width: 51.25%; filter: drop-shadow(0 6px 20px rgba(43, 33, 41, 0.16)); }
.phone-a { left: 0; top: 24px; }
.phone-b { right: 0; top: 72px; }

@media (max-width: 1079px) {
  .showcase { grid-template-columns: 1fr; padding: 48px 40px 0; }
  .showcase-text { padding-bottom: 0; }
  .showcase-phones { width: 100%; max-width: 560px; justify-self: center; height: auto; aspect-ratio: 1; }
  .phone-a { top: 4.3%; }
  .phone-b { top: 12.9%; }
}
@media (max-width: 759px) {
  .showcase { padding: 40px 24px 0; border-radius: 36px; gap: 32px; }
}

/* ---------- seasons */

.season-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.season { overflow: hidden; border-radius: 32px; display: flex; flex-direction: column; }
.season-art { position: relative; aspect-ratio: 282 / 240; overflow: hidden; background: var(--sky); }
.season-art.is-empty { background: var(--sky); }
.season-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.season-pomi { position: absolute; height: 77%; width: auto; left: 50%; bottom: 2%; transform: translateX(-50%); }
.season-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 24px 24px; }

@media (max-width: 1079px) { .season-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .season-grid { gap: 12px; margin-top: 32px; }
  .season { border-radius: 24px; }
  .season-art { aspect-ratio: 169 / 150; }
  .season-pomi { height: 85%; }
  .season-meta { flex-direction: column; align-items: flex-start; padding: 12px 14px 16px; }
  .season-meta h3 { font-size: 17px; line-height: 23px; font-weight: 600; }
}

/* ---------- bottles */

.shelf { margin-top: 48px; padding: 48px 48px 40px; border-radius: 40px; }
.bottles { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); row-gap: 28px; }
.bottles li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.bottle-art {
  width: 100%; height: 164px; display: flex; align-items: flex-end; justify-content: center;
  border-bottom: 14px solid var(--sand-300); margin-bottom: 10px;
}
.bottle-art img { max-height: 150px; max-width: 86%; width: auto; }
.bottles li:first-child .bottle-art { border-bottom-left-radius: 7px; }
.bottles li:last-child .bottle-art { border-bottom-right-radius: 7px; }
.bottle-name { font-size: 13px; line-height: 18px; font-weight: 600; padding-inline: 4px; }

@media (max-width: 1079px) { .bottles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .shelf { margin-top: 32px; padding: 28px 16px 24px; border-radius: 32px; }
  .bottles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bottle-art { height: 130px; border-bottom-width: 10px; }
  .bottle-art img { max-height: 120px; }
  .bottle-name { min-height: 36px; display: flex; align-items: center; }
}

/* ---------- privacy */

.privacy-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 64px; align-items: center;
  padding: 64px; border-radius: 48px; background: var(--navy); color: var(--text-on-dark);
}
.privacy-text { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.privacy-text .lead { color: rgba(255, 255, 255, 0.82); }
.privacy-text .text-link { color: var(--gold-300); }
.privacy-points { display: flex; flex-direction: column; gap: 12px; }
.privacy-points li { display: flex; gap: 14px; padding: 18px 20px; border-radius: 24px; background: rgba(255, 255, 255, 0.08); }
.privacy-points .icon { color: var(--grass); width: 22px; height: 22px; }
.privacy-points h3 { font-size: 15px; line-height: 20px; }
.privacy-points p { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, 0.78); margin-top: 4px; }

@media (max-width: 1079px) { .privacy-card { grid-template-columns: 1fr; gap: 32px; padding: 48px 40px; } }
@media (max-width: 759px) { .privacy-card { padding: 40px 24px 32px; border-radius: 36px; gap: 28px; } }

/* ---------- support */

.support { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 64px; align-items: start; }
.support-contact { display: flex; flex-direction: column; gap: 24px; }
.email-card { display: flex; align-items: center; gap: 16px; padding: 20px 24px 20px 20px; text-decoration: none; color: var(--text); }
.email-card > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.email-label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text-2); }
.email-address { font-size: 22px; line-height: 28px; font-weight: 700; color: var(--link); overflow-wrap: anywhere; }
.faq { display: flex; flex-direction: column; gap: 12px; }
.faq-item { display: flex; flex-direction: column; gap: 8px; padding: 22px 28px 24px; border-radius: 24px; background: var(--surface); }
.faq-item p { color: var(--text-2); }

@media (max-width: 1079px) { .support { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 759px) { .faq-item { padding: 18px 22px 20px; } }

/* ---------- final cta */

.final-cta { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; margin-top: var(--section-gap); padding-bottom: 96px; }

/* ---------- footer */

.site-footer { position: relative; height: 240px; margin-top: 40px; }
.footer-hill { position: absolute; inset: 0; width: 100%; height: 100%; }
.hill-back { fill: var(--leaf-400); }
.hill-front { fill: var(--grass); }
.footer-pomi { position: absolute; z-index: 1; width: 124px; top: -38px; right: max(60px, calc((100% - 1200px) / 2 + 40px)); }
.footer-bar { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.copyright { display: flex; align-items: center; gap: 10px; color: var(--leaf-800); font-size: 15px; line-height: 20px; font-weight: 600; }
.copyright img { width: 28px; height: 28px; border-radius: 7px; }
.footer-nav { display: flex; gap: 12px 28px; flex-wrap: wrap; }
.footer-nav a { color: var(--leaf-800); font-size: 15px; line-height: 20px; font-weight: 700; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }

@media (max-width: 759px) {
  .site-footer { height: 250px; }
  .footer-pomi { width: 96px; top: -20px; right: 20px; }
  .footer-row { flex-direction: column; align-items: flex-start; }
  .footer-nav { gap: 12px 20px; }
}

/* ---------- legal and support pages */

.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 48px; padding-bottom: 48px; }
.page-head .lead { max-width: 720px; }
.updated { color: var(--text-2); }
.notice { padding: 12px 16px; border-radius: 16px; background: var(--tile-water-bg); color: var(--link); font-weight: 600; }
.segmented { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--track); }
.segmented a { padding: 8px 18px; border-radius: 999px; color: var(--text-2); text-decoration: none; font-size: 15px; line-height: 20px; font-weight: 600; }
.segmented a[aria-current] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }

.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 144px; }
.toc { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 4px; }
.toc .overline { color: var(--text-2); margin-bottom: 4px; }
.toc a { display: block; padding: 9px 14px; border-radius: 14px; color: var(--text-2); text-decoration: none; font-size: 15px; line-height: 20px; font-weight: 600; }
.toc a:hover { background: var(--tile-water-bg); color: var(--tile-water-fg); }

.prose { padding: 56px; border-radius: 36px; }
.prose > * + * { margin-top: 14px; }
.prose h2 { font-size: 24px; line-height: 32px; font-weight: 700; margin-top: 40px; scroll-margin-top: 24px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 19px; line-height: 26px; margin-top: 24px; }
.prose p, .prose li { font-size: 17px; line-height: 28px; color: var(--text-2); }
.prose strong { color: var(--text); }
.prose ul { display: flex; flex-direction: column; gap: 10px; padding-left: 4px; }
.prose ul li { position: relative; padding-left: 20px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 11px; width: 7px; height: 7px; border-radius: 50%; background: var(--water); }
.prose .callout { display: flex; gap: 16px; padding: 22px 24px; border-radius: 24px; background: var(--tile-water-bg); }
.prose .callout .tile { background: var(--surface); }
.prose .callout h2 { font-size: 22px; line-height: 28px; margin: 0 0 6px; }
.prose .callout p { color: var(--text-2); }
.owner { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px 20px; border-radius: 18px; background: var(--canvas); }
.owner.is-test { background: var(--gold-200); border: 1.5px dashed var(--gold-400); }
.owner p { color: var(--text); margin: 0; }
.owner .tag { margin-top: 6px; }

.support-layout { display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 64px; align-items: start; padding-bottom: 144px; }

@media (max-width: 1079px) {
  .legal-layout, .support-layout { grid-template-columns: 1fr; gap: 24px; }
  .toc { display: none; }
}
@media (max-width: 759px) {
  .page-head { padding-top: 24px; padding-bottom: 28px; gap: 12px; }
  .legal-layout, .support-layout { padding-bottom: 96px; }
  .prose { padding: 28px 22px 32px; border-radius: 28px; }
  .prose .callout { flex-direction: column; padding: 20px; }
}

/* ---------- 404 */

.not-found { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; padding-top: 48px; padding-bottom: 96px; }
.not-found img { width: 186px; }
.not-found .lead { max-width: 520px; }