/* chibomi.com — the app's own design system on the web (app/DESIGN.md): light native chrome, ink, one pink;
   the Studio's dark glass, cream and gold where the chibi stands. Gabarito for the wordmark and titles, the system
   sans for everything else. Shared by every page. */
:root {
  color-scheme: light;
  --ground: #FAF9FC; --surface: #FFFFFF; --fill: #F2F0F7; --fill-strong: #E8E5F0; --hairline: #E6E3EE;
  --ink: #17131F; --ink2: #6A6577; --ink3: #A29DAD;
  --pink: #F42C7A; --pink-deep: #C4145F; --pink-pressed: #A80F50; --pink-wash: #FFE8F1;
  --lilac: #6847F0; --lilac-wash: #EFEAFF; --gold: #FFC532;
  --night: #0B0A10; --night-soft: #1C1A24; --cream: #ECE5D8; --cream-muted: #B9AF9E; --studio-gold: #D3BC8E;
  --panel: rgba(14,12,22,.82); --glass: rgba(255,255,255,.10); --scrim: rgba(0,0,0,.55);
  --r-chip: 999px; --r-tile: 12px; --r-card: 16px; --r-hero: 24px; --r-panel: 22px;
  --display: "Gabarito", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --text: -apple-system, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --shadow: 0 10px 30px rgba(23,19,31,.12), 0 2px 6px rgba(23,19,31,.06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.45 var(--text); overflow-x: clip; }
::selection { background: var(--pink-wash); color: var(--pink-deep); }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 8px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
.wrap { width: min(100% - 40px, 1120px); margin: 0 auto; }

/* ---- header / footer: the app's top row --------------------------------------------------------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; }
.wordmark img { height: 24px; width: auto; }
.top nav { display: flex; align-items: center; gap: 10px; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 10px; border-radius: var(--r-chip); white-space: nowrap;
        background: var(--surface); border: 1px solid var(--hairline); font: 600 15px/1 var(--text); color: var(--ink); }
.pill img { width: 22px; height: 22px; }
.pill:hover { background: var(--fill); }
.badge { display: inline-flex; align-items: center; gap: 9px; min-height: 52px; padding: 8px 18px 8px 14px; border-radius: var(--r-card);
         background: var(--ink); color: #fff; font: 600 15px/1.05 var(--text); white-space: nowrap; transition: background .18s ease-out, transform .18s ease-out; }
.badge svg { width: 22px; height: 26px; flex: none; }
.badge small { display: block; font: 500 11px/1 var(--text); opacity: .82; margin-bottom: 3px; letter-spacing: .1px; }
.badge b { display: block; font: 700 17px/1 var(--text); letter-spacing: -.2px; }
a.badge:hover { background: #2A2534; transform: translateY(-1px); }
.badge.sm { min-height: 40px; padding: 6px 12px 6px 10px; border-radius: var(--r-tile); }
.badge.sm svg { width: 17px; height: 20px; } .badge.sm small { font-size: 11px; margin-bottom: 2px; } .badge.sm b { font-size: 14px; }
.badge.soon { position: relative; }
.badge.soon::after { content: "soon"; position: absolute; top: -9px; right: -6px; background: var(--pink-deep); color: #fff; font: 700 10px/1 var(--text); padding: 4px 7px; border-radius: var(--r-chip); letter-spacing: .2px; }
.btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 20px; border-radius: var(--r-card); border: 0;
       font: 600 17px/1 var(--text); letter-spacing: -.2px; cursor: pointer; transition: background .15s ease-out; }
.btn.primary { background: var(--pink-deep); color: #fff; } .btn.primary:hover { background: var(--pink-pressed); }
.btn.secondary { background: var(--fill); color: var(--ink); } .btn.secondary:hover { background: var(--fill-strong); }
.btn.plus { background: var(--lilac); color: #fff; } .btn.plus:hover { filter: brightness(.92); }
footer { border-top: 1px solid var(--hairline); margin-top: 72px; padding: 36px 0 44px; }
footer .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; }
footer nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 15px/1.4 var(--text); color: var(--ink2); }
footer nav a:hover { color: var(--ink); }
footer .fine { margin-top: 18px; font: 500 13px/1.5 var(--text); color: var(--ink2); }

/* ---- type ------------------------------------------------------------------------------------- */
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 5.2vw, 60px); line-height: 1.02; font-weight: 900; letter-spacing: -.03em; }
h2 { font-size: clamp(28px, 3.4vw, 38px); line-height: 1.08; }
h3 { font-size: 22px; line-height: 1.2; }
.lede { font: 400 19px/1.45 var(--text); color: var(--ink2); max-width: 34ch; text-wrap: pretty; }
p { margin: 0; }
.muted { color: var(--ink2); } .fine, .caption { font: 500 13px/1.5 var(--text); color: var(--ink2); }
.stack > * + * { margin-top: 12px; }

/* ---- prose pages (support, privacy, terms, thanks) ------------------------------------------------ */
.prose { max-width: 68ch; padding: 24px 0 8px; }
.prose h1 { font-size: clamp(32px, 4vw, 40px); margin-bottom: 8px; }
.prose h2 { font-size: 22px; margin: 34px 0 8px; }
.prose p, .prose li { color: var(--ink); line-height: 1.55; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 20px; margin: 8px 0; }
.prose a { color: var(--pink-deep); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose .note { background: var(--fill); color: var(--ink2); border-radius: var(--r-card); padding: 12px 14px; font: 500 15px/1.45 var(--text); margin-top: 14px; }
.prose .meta { color: var(--ink2); font: 500 14px/1.4 var(--text); margin-bottom: 20px; }

/* ---- phone frame ---------------------------------------------------------------------------------- */
.phone { position: relative; width: 300px; max-width: 100%; aspect-ratio: 1206 / 2622; background: var(--night); border-radius: 46px; padding: 9px;
         box-shadow: 0 24px 50px rgba(23,19,31,.22), 0 4px 10px rgba(23,19,31,.10), inset 0 0 0 2px #2A2534; }
.phone > img, .phone > .screen { width: 100%; height: 100%; object-fit: cover; border-radius: 38px; background: var(--night); overflow: hidden; }
.phone { overflow: hidden; }
@media (max-width: 860px) { .top .badge { display: none; } }
.phone.sm { width: 236px; border-radius: 38px; padding: 7px; } .phone.sm > img, .phone.sm > .screen { border-radius: 31px; } 

/* ---- scrollers: the browser's own surfaces carry the palette ------------------------------------------ */
.scroller { scrollbar-width: thin; scrollbar-color: var(--pink) var(--fill); }
.scroller::-webkit-scrollbar { height: 8px; } .scroller::-webkit-scrollbar-track { background: var(--fill); border-radius: 999px; }
.scroller::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 999px; }

/* ---- the Studio register on the web (2026-09-15): night ground, the scene, dark glass, cream, gold ------------- */
:root { --gold-line: rgba(211,188,142,.55); --glass-strong: rgba(255,255,255,.16); --studio-ink: #1E1B27; }
body.studio { background: var(--night); color: var(--cream); }
body.studio ::selection { background: rgba(211,188,142,.35); color: #fff; }
body.studio :focus-visible { outline-color: var(--studio-gold); }
.studio .top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; width: min(100% - 40px, 1120px); }
.studio .wordmark img { height: 24px; }
.glass { background: var(--panel); border: 1px solid var(--gold-line); border-radius: var(--r-panel); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.chip.glass { display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: var(--r-chip); background: var(--glass); border: 0; color: var(--cream); font: 600 14px/1 var(--text); letter-spacing: -.1px; cursor: pointer; transition: background .15s ease-out; }
.chip.glass:hover { background: var(--glass-strong); }
.chip.glass[aria-selected="true"] { background: var(--cream); color: var(--studio-ink); }
.badge.cream { background: var(--cream); color: var(--studio-ink); } .badge.cream small { opacity: .7; }
.badge.cream.soon::after { background: var(--studio-gold); color: var(--studio-ink); }
.studio h1, .studio h2, .studio h3 { color: #fff; }
.studio .lede { color: var(--cream-muted); }
.studio .caption, .studio .fine { color: var(--cream-muted); }
.studio .gold { color: var(--studio-gold); font: 600 11px/1 var(--text); letter-spacing: .4px; text-transform: uppercase; }
.studio .floor { border-top: 1px solid var(--gold-line); }
.studio footer { border-top-color: rgba(211,188,142,.25); }
.studio footer nav, .studio footer .fine { color: var(--cream-muted); } .studio footer nav a:hover { color: var(--cream); }
.rtile { position: relative; aspect-ratio: 1; border-radius: var(--r-tile); overflow: hidden; background: linear-gradient(45deg, #513E86, #8F73C6); }
.rtile.starter { background: linear-gradient(45deg, #31507A, #5C86B8); } .rtile.premium { background: linear-gradient(45deg, #8A5E2B, #CFA157); }
.rtile img { width: 100%; height: 100%; object-fit: cover; }
.rtile .strip { position: absolute; left: 0; right: 0; bottom: 0; height: 20px; background: var(--scrim); color: var(--cream); font: 700 11px/20px var(--text); text-align: center; letter-spacing: .1px; }