/* Sulat Club design tokens (from the Sulat Club design system) */
:root {
  --paper: #fbf8ff;
  --paper-raised: #ffffff;
  --paper-sunk: #f1ecfb;
  --ink: #241a3f;
  --ink-muted: #5e5578;
  --line: #ddd5ee;
  --line-strong: #7e71a6;
  --ube: #5a3db5;
  --on-ube: #ffffff;
  --ube-deep: #3b2580;
  --on-ube-deep: #ffffff;
  --ube-soft: #ece5ff;
  --mango: #ffb81c;
  --on-mango: #241a3f;
  --mango-soft: #fff1cc;
  --pandan: #1a7049;
  --on-pandan: #ffffff;
  --gumamela: #bf2d47;
  --on-gumamela: #ffffff;
  --focus: #5a3db5;
  --shadow-sticker: 0 3px 0 #241A3F;
  --shadow-card: 0 1px 0 #DDD5EE, 0 10px 28px rgba(36,26,63,0.08);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: Figtree, "Segoe UI", system-ui, sans-serif;
  --font-hand: Caveat, "Segoe Print", "Comic Sans MS", cursive;
}
.display-xl { font-family: var(--font-display); font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -0.02em; }
.display-l { font-family: var(--font-display); font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.015em; }
.heading-2 { font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.01em; }
.heading-3 { font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; }
.word { font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 800; }
.body-l { font-family: var(--font-body); font-size: 19px; line-height: 30px; font-weight: 400; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 26px; font-weight: 400; }
.body-strong { font-family: var(--font-body); font-size: 16px; line-height: 26px; font-weight: 700; }
.small { font-family: var(--font-body); font-size: 14px; line-height: 20px; font-weight: 500; }
.label { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.08em; }
.note { font-family: var(--font-hand); font-size: 28px; line-height: 32px; font-weight: 700; }
.note-sm { font-family: var(--font-hand); font-size: 21px; line-height: 24px; font-weight: 700; }

/* Sulat Club components. Every color, space and radius comes from tokens.css. */
.sc { font-family: var(--font-body); color: var(--ink); }
.sc *:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Button */
.sc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 700 16px/1 var(--font-body); padding: 14px 22px; border-radius: var(--radius-pill); border: 2px solid var(--line-strong); background: var(--paper-raised); color: var(--ink); text-decoration: none; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.sc-btn:hover { transform: translateY(-1px); }
.sc-btn:active { transform: translateY(2px); box-shadow: none; }
.sc-btn--primary { background: var(--mango); color: var(--on-mango); border-color: var(--on-mango); box-shadow: var(--shadow-sticker); }
.sc-btn--ube { background: var(--ube); color: var(--on-ube); border-color: var(--ube); }
.sc-btn--lg { font-size: 18px; padding: 18px 28px; }
.sc-btn__price { font-weight: 500; opacity: .85; }
@media (prefers-reduced-motion: reduce) { .sc-btn { transition: none; } .sc-btn:hover, .sc-btn:active { transform: none; } }

/* Stamp: a perforated label */
.sc-stamp { position: relative; display: inline-block; font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; padding: 7px 12px; background: var(--ube); color: var(--on-ube); border-radius: 2px; }
.sc-stamp::after { content: ""; position: absolute; inset: -1px; border: 3px dotted var(--paper); border-radius: 2px; pointer-events: none; }
.sc-stamp--mango { background: var(--mango); color: var(--on-mango); }
.sc-stamp--gumamela { background: var(--gumamela); color: var(--on-gumamela); }
.sc-stamp--pandan { background: var(--pandan); color: var(--on-pandan); }

/* Logo lockup */
.sc-logo { display: inline-flex; align-items: center; gap: var(--space-3); text-decoration: none; color: var(--ink); }
.sc-logo img { height: 48px; width: auto; transform: rotate(-4deg); }
.sc-logo__word { font: 800 28px/1 var(--font-display); letter-spacing: -0.02em; }
.sc-logo__word b { color: var(--ube); font-weight: 800; }
.sc-logo__tag { display: block; font: 500 13px/16px var(--font-body); color: var(--ink-muted); letter-spacing: 0; margin-top: 4px; }
.sc-logo--lg img { height: 88px; }
.sc-logo--lg .sc-logo__word { font-size: 52px; }

/* Air-mail band */
.sc-airmail { height: 10px; background: repeating-linear-gradient(-45deg, var(--ube) 0 10px, var(--paper) 10px 16px, var(--mango) 16px 26px, var(--paper) 26px 32px); }

/* Word card */
.sc-word { display: grid; gap: var(--space-1); padding: var(--space-6); background: var(--ube-soft); border-radius: var(--radius-md); color: var(--ink); min-width: 0; }
.sc-word__eyebrow { font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ube); }
.sc-word__term { font: 800 30px/34px var(--font-display); letter-spacing: -0.01em; }
.sc-word__say { font: 500 14px/20px var(--font-body); color: var(--ink-muted); }
.sc-word__mean { font: 400 16px/26px var(--font-body); }

/* Plan card */
.sc-plan { position: relative; display: grid; gap: var(--space-4); align-content: start; padding: var(--space-8) var(--space-6); background: var(--paper-raised); border: 2px solid var(--line); border-radius: var(--radius-lg); color: var(--ink); min-width: 0; }
.sc-plan--featured { border-color: var(--ink); box-shadow: var(--shadow-sticker); }
.sc-plan__badge { position: absolute; top: -14px; left: var(--space-6); }
.sc-plan__name { font: 700 22px/28px var(--font-display); }
.sc-plan__price { font: 800 48px/52px var(--font-display); letter-spacing: -0.02em; }
.sc-plan__price small { font: 500 16px/26px var(--font-body); color: var(--ink-muted); letter-spacing: 0; }
.sc-plan__list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); font: 400 16px/24px var(--font-body); }
.sc-plan__list li { display: grid; grid-template-columns: 20px 1fr; gap: var(--space-2); }
.sc-plan__list li::before { content: ""; width: 14px; height: 8px; margin-top: 6px; border-left: 3px solid var(--pandan); border-bottom: 3px solid var(--pandan); transform: rotate(-45deg); }
.sc-plan__fine { font: 500 14px/20px var(--font-body); color: var(--ink-muted); }

/* Lakbay's note */
.sc-note { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4) var(--space-6); background: var(--mango-soft); border-radius: var(--radius-md); color: var(--ink); transform: rotate(-1deg); max-width: 520px; }
.sc-note img { width: 64px; height: auto; }
.sc-note__text { font: 700 28px/32px var(--font-hand); }
.sc-note__sig { display: block; font: 700 21px/24px var(--font-hand); color: var(--ube); margin-top: var(--space-1); }
@media (prefers-reduced-motion: reduce) { .sc-note { transform: none; } }

/* Page basics */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--ube)}a:hover{color:var(--ube-deep)}
h1,h2,h3{text-wrap:balance}
details summary{cursor:pointer;list-style:none}
details summary::-webkit-details-marker{display:none}
details[open] summary span[aria-hidden="true"]{transform:rotate(45deg)}
.skip{position:absolute;left:-9999px}.skip:focus{left:16px;top:16px;z-index:10;background:var(--paper-raised);padding:8px 12px;border-radius:6px}
.form-msg{flex-basis:100%;margin:0;font-size:14px;line-height:20px;color:var(--ink-muted)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
@media (max-width: 560px){ header nav a:not(.sc-btn){display:none} }