/* Summit Glow Skin Check: brand layer, from the Summit Glow Design System.
   Copyright (c) 2026 Septiandi Rahman, PT. Rayo Oksa Kencana.
   Madison Sauvage: H0 only, once per screen. Playfair Display stands in for
   The Seasons (headers, sentence case). Poppins for everything else. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Poppins:wght@300;400;500;600;700&display=swap');
@font-face { font-family: 'Madison Sauvage'; src: url('../fonts/MadisonSauvage.woff2') format('woff2'); font-display: swap; }

:root {
  --brown-900: #4a3120;
  --brown-950: #33210f;
  --brown-700: #5d4030;
  --beige-300: #e6d6bf;
  --sand-100: #f5efe6;
  --card-warm: #ede6db;
  --gold-500: #b68a63;
  --gold-300: #d8b994;
  --green-600: #11965d;
  --green-700: #0d7a4a;
  --white: #ffffff;
  --ink: var(--brown-900);
  --ink-2: rgba(74, 49, 32, .74);
  --ink-3: rgba(74, 49, 32, .6);
  --on-dark: #fbf7f1;
  --on-dark-2: rgba(251, 247, 241, .78);
  --on-dark-3: rgba(251, 247, 241, .6);
  --hair: rgba(74, 49, 32, .12);
  --hair-dark: rgba(255, 255, 255, .16);
  --h0: 'Madison Sauvage', 'Playfair Display', serif;
  --serif: 'The Seasons', 'Playfair Display', Georgia, serif;
  --sans: 'Poppins', system-ui, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --shadow-md: 0 10px 30px rgba(74, 49, 32, .12);
  --shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body { font-family: var(--sans); color: var(--ink); background: var(--sand-100); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img, svg, canvas, video { display: block; max-width: 100%; }
button, input { font: inherit; color: inherit; }
::selection { background: var(--gold-500); color: var(--white); }
input { caret-color: var(--gold-500); }
html { scrollbar-color: var(--gold-500) transparent; scrollbar-width: thin; }
a { color: inherit; text-underline-offset: 4px; }
.num { font-variant-numeric: tabular-nums lining-nums; }

/* Primary action: the one green in the system. */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 9999px; cursor: pointer;
  background: var(--green-700); color: var(--white); text-decoration: none;
  font: 600 1rem/1.2 var(--sans); box-shadow: 0 10px 24px -12px rgba(51, 33, 15, .45);
  transition: transform .5s var(--ease), background .3s, box-shadow .5s var(--ease), opacity .3s;
}
.cta:hover { background: #0a6a40; transform: scale(1.02); }
.cta:focus-visible, .link:focus-visible, .ghost:focus-visible { outline: 2px solid var(--gold-500); outline-offset: 4px; }
.cta[disabled] { opacity: .5; pointer-events: none; box-shadow: none; }
.ghost { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 9999px;
  border: 1px solid var(--beige-300); background: var(--white); color: var(--ink); font: 600 .95rem/1 var(--sans); text-decoration: none; cursor: pointer;
  box-shadow: 0 2px 8px rgba(74, 49, 32, .06); transition: transform .5s var(--ease), border-color .3s; }
.ghost:hover { transform: scale(1.02); border-color: var(--gold-500); }
.link { background: none; border: 0; padding: 8px 2px; font: 600 .95rem/1 var(--sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

/* Letters that decode into place (Mill reference). */
.scramble { display: inline-block; white-space: pre-wrap; }
.scramble .g { display: inline-block; }
.scramble .g.wild { color: var(--gold-500); }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ico { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}