/* Revamp brand kit: the one stylesheet every Revamp surface starts from (marketing, landings, the sent page
   layer, onboarding, changes, the studio and the review tool). Taken from Martin's rebrand (home/v6,
   getrevamp.vercel.app): Geist, light #F4F4F4 on dark #201D1D, Revamp blue #2B66FA, the orange hand-written
   notes, small radii that round on hover. One change on purpose: no monospace anywhere, so the small
   uppercase labels Martin set in Geist Mono are set in Geist, uppercase, with open letterspacing.

   Use: <link rel="stylesheet" href="/assets/brand.css"> (or a relative path), then the classes below. */

@font-face { font-family: "Geist"; src: url("fonts/geist-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Scribble"; src: url("fonts/scribble.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --light: #F4F4F4; --dark: #201D1D; --black: #151313; --white: #fff;
  --n300: #EAEAEA; --n400: #E1E1E1; --n450: #D8D8D8; --n475: #B8B8B8; --n500: #817F7F; --n525: #4F4C4C; --n550: #393636; --n600: #312E2E; --n700: #2A2727;
  --blue: #2B66FA; --blue-d: #1F52D6; --blue-l: #8FB2FF; --orange: #FF5A1F; --note: #C83E0A;
  --ok: #1E9E62; --warn: #E8A317; --bad: #E5484D;
  --out: cubic-bezier(.625,.05,0,1); --soft: cubic-bezier(.16,1,.3,1);
  --pad: 1.875rem; --btn-h: 2.5rem; --r: .125rem; --r-card: .375rem;
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (max-width: 767px) { :root { --pad: 1rem; --btn-h: 3rem; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--light); color: var(--dark); font: 400 1rem/1.35 var(--font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body.dark { background: var(--dark); color: var(--light); }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: .25rem; }
.wrap { width: 100%; max-width: 100rem; margin: 0 auto; padding: 0 var(--pad); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* Type: the scale from home/v6 */
.h-xl, .h-l, .h-ml, .h-m, .h-s, .h-xs { font-weight: 500; font-feature-settings: "ss01"; margin: 0; }
.h-xl { font-size: clamp(3.25rem, 7vw, 6.25rem); line-height: .98; letter-spacing: -.06em; }
.h-l { font-size: clamp(2.75rem, 5.5vw, 5rem); line-height: 1; letter-spacing: -.055em; }
.h-ml { font-size: clamp(2.375rem, 4.3vw, 3.875rem); line-height: 1; letter-spacing: -.05em; }
.h-m { font-size: clamp(1.75rem, 2.8vw, 2.5rem); line-height: 1.05; letter-spacing: -.045em; }
.h-s { font-size: clamp(1.5625rem, 2.1vw, 1.875rem); line-height: 1.08; letter-spacing: -.04em; }
.h-xs { font-size: 1.25rem; line-height: 1.1; letter-spacing: -.03em; }
.p-l { font-size: 1.1875rem; line-height: 1.3; letter-spacing: -.02em; }
.p-m { font-size: 1rem; line-height: 1.35; }
.p-s { font-size: .875rem; line-height: 1.3; }
.muted { color: var(--n500); }
/* Labels: where the rebrand used Geist Mono, Geist in small caps-like uppercase */
.label { font-family: var(--font); font-size: .6875rem; line-height: 1.3; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.scrib { font-family: "Scribble", "Segoe Script", cursive; font-size: 1.5625rem; line-height: .9; letter-spacing: 0; font-weight: 400; color: var(--note); }
.chip { display: inline-block; padding: .05em .3em .1em; border-radius: var(--r); background: var(--n300); line-height: 1.15; }

/* Tags */
.tag { display: inline-flex; align-items: center; height: 1.25rem; padding: 0 .4rem; border-radius: var(--r); background: var(--n300); color: var(--dark); font-size: .625rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag.dark { background: var(--dark); color: var(--light); }
.tag.blue { background: var(--blue); color: #fff; }
.tag.ghost { background: rgba(255,255,255,.14); color: #fff; }
.tag.ok { background: #DDF3E8; color: #11643D; }
.tag.warn { background: #FBEFD3; color: #7A5200; }
.tag.bad { background: #FBE0E1; color: #9B1C20; }

/* Buttons: small radius that rounds on hover */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: var(--btn-h); padding: 0 1.125rem; border: 0; border-radius: var(--r); font-size: 1rem; font-weight: 500; letter-spacing: -.02em; white-space: nowrap; cursor: pointer; text-decoration: none; background: var(--dark); color: var(--light); transition: border-radius .5s var(--out), background-color .3s, color .3s, transform .5s var(--out); }
.btn:hover { border-radius: 1.25rem; }
.btn:active { transform: scale(.97); }
.btn.blue { background: var(--blue); color: #fff; }
.btn.white { background: #fff; color: var(--dark); }
.btn.light { background: var(--n300); color: var(--dark); }
.btn.grey { background: var(--n550); color: var(--light); }
.btn.line { background: transparent; color: inherit; box-shadow: inset 0 0 0 1px currentColor; }
.btn.sm { height: 2.25rem; padding: 0 .875rem; font-size: .9375rem; }
.btn.full { width: 100%; }
.btn[disabled] { opacity: .55; cursor: default; }

/* Fields */
.field { display: grid; gap: .375rem; }
.field > span { font-size: .875rem; color: var(--n525); }
.input, .field input, .field select, .field textarea { width: 100%; min-height: var(--btn-h); padding: .55rem .75rem; border: 1px solid var(--n450); border-radius: var(--r); background: #fff; color: var(--dark); font-size: 1rem; }
.field textarea { min-height: 6rem; resize: vertical; }
.input:focus, .field :is(input, select, textarea):focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(43,102,250,.18); }
body.dark .input, body.dark .field :is(input, select, textarea) { background: var(--n600); border-color: var(--n550); color: var(--light); }

/* Cards */
.card { background: #fff; border-radius: var(--r-card); padding: 1.5rem; }
.card.dark { background: var(--dark); color: var(--light); }
.card.blue { background: var(--blue); color: #fff; }
.card.grey { background: var(--n300); }

/* The logo: the blue mark and the lowercase wordmark */
.logo { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1.25rem; letter-spacing: -.05em; text-decoration: none; color: inherit; }
.logo::before { content: ""; width: 1.5rem; height: 1.5rem; flex: none; background: url("logo/mark-64.png") center / contain no-repeat; }

/* The dark pill bar the rebrand uses for navigation */
.pill { display: flex; align-items: center; gap: .25rem; padding: .25rem; border-radius: .375rem; background: var(--dark); color: var(--light); box-shadow: 0 0 0 1px rgba(244,244,244,.1), 0 10px 30px rgba(0,0,0,.18); }
.pill a, .pill button { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 .875rem; border-radius: var(--r); background: transparent; border: 0; color: inherit; text-decoration: none; font-size: .9375rem; cursor: pointer; }
.pill a:hover, .pill button:hover, .pill .on { background: var(--n550); }
.pill .cta { background: var(--blue); color: #fff; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }