@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fonts/BricolageGrotesque-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-stretch: 75% 100%;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('/fonts/Figtree-latin.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

/*
  Warnai Plus purchase page. One loud thing: a fan of paint chips, one per
  thing Plus adds, each in its own season's colours. Everything else is
  quiet type on white, so price, steps and the transfer amount read first.
*/
:root {
  --paper: #ffffff;
  --wash: #f5f5f6;
  --ink: #16161a;
  --soft: #63636a;
  --line: #e4e4e8;
  --focus: #4f5bd5;
  --ok: #0f7b4b;
  --warn: #a14d00;
  --bad: #b3122f;
  --insta: linear-gradient(45deg, #feda75 0%, #fa7e1e 22%, #d62976 50%, #962fbf 76%, #4f5bd5 100%);
  --sale: linear-gradient(45deg, #00e0ff 0%, #2f7bff 24%, #8b2cf5 50%, #e6007e 76%, #ff5a36 100%);
  --natal: linear-gradient(45deg, #f6d06f 0%, #e0a526 18%, #c8102e 46%, #8b0f2a 70%, #14532d 100%);
  --lebaran: linear-gradient(45deg, #f6dc8c 0%, #d4a017 22%, #0f8a5f 52%, #0b5d4a 76%, #123a6b 100%);
  --blibli: linear-gradient(45deg, #b8f2e6 0%, #2ec4b6 24%, #0096c7 54%, #0353a4 80%, #1b2a6b 100%);
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.55 'Figtree', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  border-top: 4px solid transparent;
  border-image: var(--insta) 1;
}

a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.display {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-variation-settings: 'wdth' 75;
  letter-spacing: -0.03em;
  line-height: 0.92;
}

/* --- Top bar --------------------------------------------------------------------------- */
.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.brand { display: flex; align-items: baseline; gap: 8px; text-decoration: none; }
.brand .display { font-size: 28px; }
.brand span:last-child { font-weight: 700; color: var(--soft); }
.lang { display: flex; padding: 3px; border-radius: 10px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.lang button { height: 30px; padding: 0 11px; border: 0; border-radius: 7px; background: none; color: var(--soft); font-weight: 700; font-size: 13px; cursor: pointer; }
.lang button[aria-pressed='true'] { background: var(--paper); color: var(--ink); box-shadow: 0 0 0 1px var(--line); }

/* --- Hero --------------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 48px 0 72px; }
.hero h1 { margin: 0; font-size: clamp(52px, 8vw, 104px); }
.lede { margin: 22px 0 0; max-width: 34ch; font-size: 19px; color: var(--soft); }
.price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 30px 0 0; }
.price b { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 85; font-size: 44px; letter-spacing: -0.02em; line-height: 1; }
.price span { color: var(--soft); font-weight: 600; }
.cta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; height: 50px; padding: 0 26px;
  border: 0; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 800; font-size: 16px;
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: #34343a; }
.btn:disabled { opacity: .55; cursor: progress; }
.btn.ghost { background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { background: var(--wash); }
.btn.small { height: 38px; padding: 0 14px; font-size: 14px; border-radius: 10px; }
.cta small { color: var(--soft); font-size: 14px; max-width: 28ch; }

/* The fan of paint chips */
.fan { position: relative; height: 440px; }
.chip {
  position: absolute; left: 50%; bottom: 20px; width: 168px; height: 340px; margin-left: -84px;
  border-radius: 14px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -16px rgba(20, 20, 30, .35);
  transform-origin: 50% 92%; transform: rotate(var(--r)); overflow: hidden;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.chip { background: var(--paint); }
/* Names run down the left edge from the top, like book spines: the strip of
   each chip the next one never covers (the bottoms overlap at the pivot) */
.chip b, .chip em {
  position: absolute; left: 12px; top: 16px; writing-mode: vertical-rl;
  color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); white-space: nowrap;
}
.chip b { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 75; font-size: 30px; line-height: 1; letter-spacing: -.01em; }
.chip em { left: 46px; font-style: normal; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .92); }
.chip:nth-child(1) { --r: -25.5deg; --paint: var(--blibli); }
.chip:nth-child(2) { --r: -8.5deg; --paint: var(--lebaran); }
.chip:nth-child(3) { --r: 8.5deg; --paint: var(--natal); }
.chip:nth-child(4) { --r: 25.5deg; --paint: var(--sale); }
.fan:hover .chip:nth-child(1) { --r: -33deg; }
.fan:hover .chip:nth-child(2) { --r: -11deg; }
.fan:hover .chip:nth-child(3) { --r: 11deg; }
.fan:hover .chip:nth-child(4) { --r: 33deg; }
/* One orchestrated moment: the fan opens on load */
@keyframes fan-open { from { transform: rotate(0deg); } }
.chip { animation: fan-open .9s cubic-bezier(.2, .8, .2, 1) .15s backwards; }

/* --- Sections --------------------------------------------------------------------------------- */
section { padding: 64px 0; border-top: 1px solid var(--line); }
h2 { margin: 0 0 28px; font-size: clamp(36px, 5vw, 56px); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.compare h3 { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.compare h3 span { color: var(--soft); font-weight: 600; }
.compare ul { margin: 0; padding: 0; list-style: none; }
.compare li { padding: 11px 0; border-top: 1px solid var(--line); }
.compare .plus li::before { content: '+'; display: inline-block; width: 1.3em; font-weight: 800; }
.compare .free li { color: var(--soft); }

/* Steps: a real sequence, so numbered */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0 0 40px; padding: 0; list-style: none; counter-reset: s; }
.steps li { counter-increment: s; }
.steps li::before { content: counter(s); display: block; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 75; font-size: 56px; line-height: 1; margin-bottom: 8px; }
.steps b { display: block; font-size: 18px; margin-bottom: 4px; }
.steps p { margin: 0; color: var(--soft); }

/* Order form and result */
.order { max-width: 560px; padding: 28px; border-radius: 18px; background: var(--wash); box-shadow: inset 0 0 0 1px var(--line); }
.order h3 { margin: 0 0 6px; font-size: 22px; }
.order > p { margin: 0 0 18px; color: var(--soft); }
.field { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 700; font-size: 14px; }
.field input { height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); font-weight: 500; font-size: 16px; }
.field input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(79, 91, 213, .18); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { margin: 0 0 12px; color: var(--bad); font-weight: 700; font-size: 14px; }
.error:empty { display: none; }
.closed { color: var(--warn); font-weight: 700; }

.pay { display: grid; gap: 16px; }
.amount { padding: 18px 20px; border-radius: 14px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.amount small { display: block; color: var(--soft); font-weight: 700; font-size: 13px; }
.amount-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.amount-row b { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 85; font-size: 40px; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.amount-row b mark { background: none; color: inherit; box-shadow: inset 0 -0.32em 0 #feda75; }
.amount p { margin: 6px 0 0; font-size: 14px; color: var(--soft); }
.facts { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.facts dt { color: var(--soft); }
.facts dd { margin: 0; font-weight: 700; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.copy { padding: 2px 8px; border: 0; border-radius: 6px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 12px; font-weight: 700; cursor: pointer; }
.copy:hover { background: var(--wash); }
.note { margin: 0; padding: 12px 14px; border-radius: 12px; background: #fff7e0; color: #5c4400; font-size: 14px; }
.link-box { display: flex; gap: 8px; }
.link-box input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); font-size: 13px; }

/* FAQ */
.faq { max-width: 760px; }
.faq details { border-top: 1px solid var(--line); }
.faq summary { padding: 16px 0; font-weight: 700; font-size: 18px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 24px; line-height: 1; color: var(--soft); }
.faq details[open] summary::after { content: '−'; }
.faq p { margin: 0 0 18px; color: var(--soft); max-width: 66ch; }

footer { padding: 32px 0 48px; border-top: 1px solid var(--line); color: var(--soft); font-size: 14px; }

/* --- Order page ------------------------------------------------------------------------------------- */
.status { display: flex; gap: 0; margin: 0 0 28px; padding: 0; list-style: none; }
.status li { flex: 1; padding-top: 10px; border-top: 4px solid var(--line); color: var(--soft); font-weight: 700; font-size: 14px; }
.status li + li { margin-left: 6px; }
.status li.done { border-top-color: var(--ink); color: var(--ink); }
.status li.now { border-image: var(--insta) 1; color: var(--ink); }

.keycard { border-radius: 18px; overflow: hidden; box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px rgba(20, 20, 30, .35); }
.keycard-paint { position: relative; padding: 26px 24px 36px; background: var(--insta); color: #fff; }
.keycard-paint::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px;
  background: linear-gradient(90deg, #feda75 0 20%, #fa7e1e 20% 40%, #d62976 40% 60%, #962fbf 60% 80%, #4f5bd5 80%); }
.keycard-paint small { font-weight: 700; opacity: .9; }
.keycard-paint p { margin: 6px 0 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-variation-settings: 'wdth' 75;
  font-size: clamp(26px, 5vw, 40px); line-height: 1.05; letter-spacing: .01em; user-select: all; text-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
.keycard-foot { padding: 18px 20px 22px; display: grid; gap: 14px; background: var(--paper); }
.keycard-foot ol { margin: 0; padding-left: 20px; color: var(--soft); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0; padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; font-weight: 700; transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: 24px; }
  .fan { height: 380px; order: -1; }
  .chip { width: 140px; height: 290px; margin-left: -70px; }
  .compare, .steps { grid-template-columns: 1fr; }
  .compare { gap: 32px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .fan { height: 320px; }
  .chip { width: 116px; height: 240px; margin-left: -58px; }
  .chip b { font-size: 22px; left: 8px; }
  .chip em { left: 34px; font-size: 11px; }
  .order { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .chip { animation: none; transition: none; }
  .toast { transition: none; }
}

.muted { margin: 0; color: var(--soft); }
.order-page .lede { margin-bottom: 28px; }
.order-page h1 { margin: 28px 0 0; font-size: clamp(48px, 7vw, 80px); }
.order-page .lede { max-width: 52ch; }

/* --- Privacy (long text) ------------------------------------------------------------------- */
.legal { max-width: 68ch; padding: 24px 0 72px; }
.legal h1 { margin: 0; font-size: clamp(48px, 7vw, 80px); }
.legal .updated { margin: 12px 0 28px; color: var(--soft); font-weight: 600; }
.legal h2 { margin: 36px 0 10px; font-family: 'Figtree', system-ui, sans-serif; font-size: 20px; font-weight: 800; letter-spacing: 0; }
.legal p, .legal li { color: #2e2e34; }
.legal ul { padding-left: 20px; }
.legal li { margin: 6px 0; }
.legal code { font-size: .9em; padding: 1px 5px; border-radius: 5px; background: var(--wash); }
footer a { color: var(--ink); font-weight: 700; margin-left: 8px; }