:root {
  --bg: #07090c; /* Page background */
  --ink: #e6f0ea; /* Primary text */
  --accent: #3cffb0; /* Signal mint, primary actions */
  --muted: #9daaa3; /* Secondary text */
  --surface: #10151a; /* Product panels */
  --surface-raised: #171e24; /* Nested panels */
  --line: #2c363c; /* Dividers */
  --grid: #28312e; /* Decorative dot grid */
  --inverse: #062317; /* Text on mint */
  --transparent: transparent; /* Unfilled elements */
  --font-display: 'Geist', Arial, sans-serif; /* Display and body type */
  --font-body: 'Geist', Arial, sans-serif; /* Body type */
  --font-mono: 'Geist Mono', monospace; /* Technical labels */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button, a, input, select, summary { -webkit-tap-highlight-color: var(--transparent); }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; }
button, input, select { border-radius: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
.primary:focus-visible, .email-row button:focus-visible, .skip-link:focus-visible { outline-color: var(--ink); }
::selection { color: var(--bg); background: var(--accent); }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
h2 { font-size: clamp(40px, 5.5vw, 76px); line-height: 1.03; letter-spacing: -.04em; }
h3 { font-size: 26px; line-height: 1.15; letter-spacing: -.035em; }
svg { display: block; max-width: 100%; }
.wrap { width: min(100% - 40px, 1320px); margin-inline: auto; }
.section { padding-block: 80px; }
.eyebrow, .micro { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .055em; line-height: 1.6; }
.eyebrow { margin-bottom: 26px; text-transform: uppercase; display: flex; align-items: center; gap: 9px; }
.muted { color: var(--muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.skip-link { position: absolute; top: 10px; left: 20px; transform: translateY(-160%); z-index: 20; padding: 12px 18px; color: var(--inverse); background: var(--accent); }
.skip-link:focus { transform: translateY(0); }
.site-header { min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 9px; font-size: 30px; font-weight: 600; letter-spacing: -.07em; }
.brand svg { width: 33px; height: 33px; color: var(--accent); }
.brand-dot { font: 400 12.5px var(--font-mono); align-self: flex-start; margin-top: 11px; margin-left: -4px; }
.site-header nav { display: none; gap: 28px; font-size: 14px; }
.site-header nav a:hover, .footer nav a:hover { color: var(--accent); }
.nav-cta { font: 400 12.5px var(--font-mono); border-bottom: 1px solid var(--accent); padding-bottom: 4px; }
.nav-cta span { margin-left: 12px; color: var(--accent); }
.hero { padding-top: 38px; position: relative; }
.hero h1 { font-size: clamp(70px, 13vw, 140px); line-height: .91; letter-spacing: -.05em; margin-bottom: 28px; }
.hero h1 > span { color: var(--accent); }
.hero-description { max-width: 400px; color: var(--muted); font-size: 16px; line-height: 1.7; }
.actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 22px; margin-top: 30px; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 12px; font-weight: 600; padding: 15px 19px; border: 1px solid var(--line); transition: transform .2s; }
.button:hover { transform: translateY(-3px); }
.primary { background: var(--accent); color: var(--inverse); border-color: var(--accent); }
.primary:focus-visible { outline-offset: 5px; }
.secondary { background: var(--transparent); color: var(--ink); }
.text-link { font-size: 12px; border-bottom: 1px solid var(--muted); padding-bottom: 5px; }
.actions .text-link { margin-top: 12px; }
.hero-copy > .micro { margin-top: 22px; color: var(--muted); font-size: 12.5px; }
.hero-visual { min-width: 0; margin-top: 54px; padding: 28px 0 0; background-image: radial-gradient(var(--grid) 1px, var(--transparent) 1px); background-size: 16px 16px; }
.orbit-label { display: flex; justify-content: space-between; font: 400 12.5px var(--font-mono); color: var(--muted); padding-bottom: 18px; }
.dashboard { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; overflow: clip; }
.dashboard-head { padding: 16px 14px; display: flex; justify-content: space-between; gap: 6px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.dashboard-brand { color: var(--muted); }
.dashboard-brand strong { color: var(--ink); font-weight: 400; }
.connection { display: flex; align-items: center; gap: 5px; color: var(--accent); font: 400 12.5px var(--font-mono); }
.connection i { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }
.dashboard-tabs { display: flex; gap: 16px; margin: 0 14px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.dashboard-tabs > span { padding-block: 12px; }
.dashboard-tabs .current { border-bottom: 2px solid var(--accent); color: var(--ink); }
.tab-date { display: none; margin-left: auto; }
.metrics { display: grid; grid-template-columns: 1fr 1fr; margin: 22px 14px; }
.metrics > div { display: flex; flex-direction: column; gap: 5px; }
.metrics > div + div { border-left: 1px solid var(--line); padding-left: 22px; }
.metrics > div > span { font-size: 12.5px; color: var(--muted); }
.metrics strong { font-size: 34px; letter-spacing: -.06em; font-weight: 400; line-height: 1.15; }
.metrics strong > span { font-size: 12.5px; color: var(--muted); letter-spacing: 0; }
.metrics small { font: 400 12.5px var(--font-mono); color: var(--accent); }
.chart-header { display: flex; justify-content: space-between; font-size: 12.5px; margin: 24px 14px 12px; }
.chart-header strong { font-weight: 400; }
.chart-key { color: var(--accent); font-size: 12.5px; }
.chart { display: flex; gap: 8px; height: 176px; padding: 0 14px; }
.chart-axis { display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 21px; color: var(--muted); font: 400 12.5px var(--font-mono); }
.chart-bars { display: flex; flex: 1; gap: 9px; align-items: stretch; background: linear-gradient(var(--line) 1px, var(--transparent) 1px) 0 0 / 100% calc((100% - 21px) / 3); }
.bar-day { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.bar-day > span { font: 400 12.5px var(--font-mono); color: var(--muted); }
.bar { width: 100%; max-width: 40px; background: var(--accent); border-top: 1px solid var(--ink); transform-origin: bottom; opacity: .85; }
.bar-1 { height: 27%; }.bar-2 { height: 38%; }.bar-3 { height: 32%; }.bar-4 { height: 52%; }.bar-5 { height: 67%; }.bar-6 { height: 82%; }
.is-running .bar { animation: grow .85s cubic-bezier(.16,1,.3,1) both; }
.is-running .bar-2 { animation-delay: .1s; }.is-running .bar-3 { animation-delay: .2s; }.is-running .bar-4 { animation-delay: .3s; }.is-running .bar-5 { animation-delay: .4s; }.is-running .bar-6 { animation-delay: .5s; }
@keyframes grow { from { transform: scaleY(.03); opacity: .2; } to { transform: scaleY(1); opacity: .85; } }
.activity { display: flex; align-items: center; gap: 9px; margin: 22px 14px 14px; padding: 13px 0 0; border-top: 1px solid var(--line); }
.activity-icon { color: var(--accent); font-size: 20px; }
.activity > div { display: flex; flex-direction: column; gap: 4px; }
.activity strong { font: 400 12.5px var(--font-mono); }.activity div > span { font-size: 12.5px; color: var(--muted); }
.activity-badge { color: var(--accent); font: 400 12.5px var(--font-mono); margin-left: auto; border: 1px solid var(--line); padding: 4px; }
.terminal { margin-top: 12px; border: 1px solid var(--line); background: var(--bg); border-radius: 6px; padding: 14px; font: 400 12.5px/1.8 var(--font-mono); min-height: 116px; }
.terminal-head { display: flex; justify-content: space-between; color: var(--muted); margin-bottom: 11px; }
.terminal-head > span { display: flex; gap: 7px; align-items: center; }
.terminal-head i { width: 7px; height: 7px; border: 1px solid var(--muted); }
.replay { border: 0; padding: 0; background: var(--transparent); color: var(--muted); font: inherit; }
.replay:hover { color: var(--accent); }.terminal-prompt { color: var(--accent); }.terminal code { font: inherit; overflow-wrap: anywhere; }
.terminal-result { color: var(--muted); margin-top: 7px; min-height: 17px; }.terminal-result > span { color: var(--accent); }
.cursor { color: var(--accent); opacity: 0; }.is-typing .cursor { opacity: 1; animation: blink .8s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.visual-caption { display: flex; justify-content: space-between; gap: 12px; font: 400 12.5px var(--font-mono); color: var(--muted); margin-top: 15px; }
.hero-bottom { display: flex; justify-content: space-between; gap: 12px; padding: 30px 0 18px; margin-top: 32px; border-bottom: 1px solid var(--line); color: var(--muted); font: 400 12.5px var(--font-mono); }
.hero-bottom > span:last-child { display: none; }
.trust { padding-block: 34px 48px; border-bottom: 1px solid var(--line); }.trust h2 { font: 400 12.5px var(--font-mono); letter-spacing: 0; color: var(--muted); }
.wordmarks { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 30px; margin-top: 28px; color: var(--muted); }.wordmarks > span { font-size: 22px; letter-spacing: -.04em; line-height: 1; }.wordmark-cinder { font-weight: 600; }.wordmark-cinder > span { color: var(--accent); }.wordmarks .wordmark-fold { font: 500 22px var(--font-mono); }.wordmark-switch { font-weight: 600; }.wordmark-tandem { font-style: italic; }.wordmarks .wordmark-north { font: 500 22px var(--font-mono); }
.section-heading { margin-bottom: 34px; }.section-heading > p:last-child { margin-top: 24px; color: var(--muted); font-size: 16px; }
.bento { display: grid; gap: 12px; }.bento article { background: var(--surface); border: 1px solid var(--line); padding: 26px; min-width: 0; overflow: clip; }.card-top { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); margin-bottom: 32px; }.card-top > span:last-child { color: var(--accent); }
.bento h3 { margin-bottom: 18px; }.bento p { color: var(--muted); font-size: 15px; max-width: 350px; }.bento-main h3 { font-size: 40px; }.flow-graphic { margin-top: 48px; font: 400 12.5px var(--font-mono); }.flow-labels { display: grid; grid-template-columns: 1.2fr 2.4fr .6fr; gap: 8px; color: var(--muted); }.flow-labels > span { display: flex; flex-direction: column; gap: 6px; }.flow-labels strong { color: var(--ink); font-weight: 400; }.flow-track { display: flex; gap: 4px; margin-block: 12px; height: 45px; }.flow-track > span:nth-child(1) { flex: 1.2; background: var(--muted); }.flow-track > span:nth-child(2) { flex: 2.4; background: var(--accent); }.flow-track > span:nth-child(3) { flex: .6; background: var(--ink); }.flow-note { color: var(--accent); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }.flow-note > span:last-child { color: var(--muted); }
.repo-art { display: flex; align-items: center; justify-content: center; margin-bottom: 32px; padding-block: 12px; }.repo-art > span { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line); font: 400 12px var(--font-mono); }.repo-art > span + span::before { content: ''; }.repo-art .repo-hub { width: 76px; height: 76px; font-size: 52px; color: var(--accent); border-radius: 50%; margin-inline: 28px; position: relative; }.repo-hub::before, .repo-hub::after { content: ''; position: absolute; width: 28px; height: 1px; background: var(--line); top: 50%; }.repo-hub::before { right: 100%; }.repo-hub::after { left: 100%; }
.privacy-card h3 { margin-top: 40px; }.privacy-seal { display: inline-block; color: var(--accent); border: 1px solid var(--line); padding: 8px; font: 400 12.5px var(--font-mono); margin-top: 30px; }
.bento .bento-wide { background: var(--surface); display: grid; gap: 32px; }.bento-wide h3 { margin-top: 20px; }.brief-preview { border-left: 2px solid var(--accent); padding-left: 20px; }.brief-preview > .micro { color: var(--muted); }.brief-preview p { color: var(--ink); margin: 12px 0 18px; font-size: 17px; }.brief-preview strong { color: var(--accent); font-weight: 400; }.brief-footer { color: var(--muted); font: 400 12.5px var(--font-mono); }
.workflow { border-block: 1px solid var(--line); }.workflow-grid { display: grid; gap: 48px; }.section-description { color: var(--muted); font-size: 16px; margin: 24px 0; max-width: 390px; }.steps { list-style: none; padding: 0; margin: 0; }.steps li { display: flex; gap: 26px; padding-block: 28px; border-top: 1px solid var(--line); }.steps li:first-child { padding-top: 0; border-top: 0; }.step-number { font: 400 12px var(--font-mono); color: var(--accent); padding-top: 5px; }.steps h3 { font-size: 21px; }.steps p { color: var(--muted); font-size: 15px; margin-top: 12px; max-width: 380px; }.steps code { display: block; font: 400 12.5px var(--font-mono); color: var(--accent); margin-top: 20px; }
.story { display: grid; gap: 28px; }.story-meta > span { color: var(--muted); font: 400 12.5px var(--font-mono); }.story-body h2 { font-size: clamp(33px, 4.2vw, 58px); line-height: 1.2; letter-spacing: -.04em; }.story-bottom { display: flex; flex-wrap: wrap; gap: 32px; justify-content: space-between; margin-top: 38px; }.person { display: flex; align-items: center; gap: 12px; font-size: 14px; }.person strong { font-weight: 600; }.person p > span { color: var(--muted); }.avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface-raised); color: var(--accent); font: 400 12px var(--font-mono); }.story-number { display: flex; align-items: center; gap: 16px; }.story-number strong { font-size: 64px; font-weight: 400; line-height: 1; letter-spacing: -.06em; }.story-number strong > span { color: var(--accent); font-size: 28px; }.story-number p { color: var(--muted); font-size: 15px; }
.pricing { border-top: 1px solid var(--line); }.pricing-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 38px; }.pricing-heading > div > p { font-size: 15px; color: var(--muted); }.billing { gap: 0; margin-top: 22px; border: 1px solid var(--line); padding: 4px; }.billing button { padding: 9px 14px; background: var(--transparent); border: 0; color: var(--muted); font-size: 13px; }.billing button[aria-pressed="true"] { background: var(--surface-raised); color: var(--ink); }.billing button > span { color: var(--accent); font: 400 12.5px var(--font-mono); margin-left: 7px; }
.price-grid { display: grid; gap: 12px; }.price-card { border: 1px solid var(--line); padding: 28px; background: var(--surface); }.price-card > .micro, .price-top { color: var(--muted); font-size: 12.5px; }.price-top { display: flex; justify-content: space-between; }.price-top > span:last-child { color: var(--accent); }.price-card h3 { margin-top: 24px; }.price { display: flex; align-items: baseline; gap: 4px; margin-top: 25px; font-size: 14px; }.price > strong { font-size: 62px; line-height: 1; letter-spacing: -.055em; font-weight: 400; }.price-period { color: var(--muted); font-size: 14px; margin-top: 12px; }.price-card ul { list-style: none; padding: 24px 0; margin: 22px 0 0; border-top: 1px solid var(--line); font-size: 15px; }.price-card li { padding-block: 7px; }.price-card li::before { content: '+'; color: var(--accent); margin-right: 10px; }.price-card .button { width: 100%; font-size: 12px; }.featured { border-color: var(--accent); background: #0f1f1a; box-shadow: 0 0 0 1px var(--accent); }.pricing-note { font: 400 12.5px/1.8 var(--font-mono); color: var(--muted); margin-top: 24px; max-width: 660px; }
.faq { display: grid; gap: 34px; border-top: 1px solid var(--line); }.faq-list details { border-bottom: 1px solid var(--line); }.faq-list summary { cursor: pointer; list-style: none; font-size: 16px; padding: 22px 0; display: flex; justify-content: space-between; gap: 15px; }.faq-list summary::-webkit-details-marker { display: none; }.faq-list summary > span { color: var(--accent); font: 400 20px var(--font-mono); line-height: 1; }.faq-list details[open] summary > span { transform: rotate(45deg); }.faq-list details p { padding-bottom: 24px; color: var(--muted); font-size: 15px; max-width: 560px; }
.start { background: var(--surface); border-block: 1px solid var(--line); overflow: clip; }.start-grid { display: grid; gap: 40px; }.start h2 { font-size: clamp(80px, 10vw, 144px); line-height: .9; letter-spacing: -.05em; }.start h2 > span { color: var(--accent); }.signup { align-self: center; }.signup h3 { font-size: 25px; }.signup > p { color: var(--muted); font-size: 15px; margin-top: 12px; }.signup form { margin-top: 26px; }.signup label { display: block; font: 400 12.5px var(--font-mono); margin-bottom: 9px; }.email-row { display: flex; border-bottom: 1px solid var(--muted); margin-bottom: 25px; }.email-row input { min-width: 0; width: 100%; padding: 13px 0; border: 0; background: var(--transparent); color: var(--ink); font-size: 16px; }.email-row input::placeholder { color: var(--muted); }.email-row button { border: 0; width: 49px; flex-shrink: 0; background: var(--accent); color: var(--inverse); font-size: 25px; }.signup select { border: 1px solid var(--line); background: var(--bg); color: var(--ink); width: 100%; padding: 12px; font-size: 15px; }.form-note { font: 400 12.5px/1.8 var(--font-mono); color: var(--muted); margin-top: 18px; }.signup .signup-message { color: var(--accent); min-height: 24px; margin-top: 18px; font-size: 15px; }
.footer { padding-top: 44px; overflow: clip; }.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 28px 48px; }.footer-top > p { font-size: 15px; color: var(--muted); }.footer nav { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; font-size: 14px; }.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 13px 26px; border-top: 1px solid var(--line); margin-top: 40px; padding-top: 20px; font: 400 12.5px/1.8 var(--font-mono); color: var(--muted); }.footer-bottom .status-dot { margin-right: 4px; }.footer-word { font-size: clamp(100px, 27vw, 420px); font-weight: 600; line-height: 1; letter-spacing: -.05em; padding-block: 24px 0; display: flex; justify-content: space-between; }.footer-word > span { color: var(--accent); font-weight: 400; }
.js-control { display: none; }.js .replay { display: block; }.js .billing { display: inline-flex; }
@media (min-width: 600px) {
.wrap { width: min(100% - 72px, 1320px); }.section { padding-block: 100px; }.site-header nav { display: flex; }.hero { padding-top: 58px; }.hero h1 { font-size: 110px; }.hero-visual { padding: 32px 24px 18px; }.dashboard-head { padding: 18px 20px; }.dashboard-tabs { margin-inline: 20px; }.tab-date { display: block; }.metrics { margin: 28px 20px; }.chart-header { margin-inline: 20px; }.chart { padding-inline: 20px; height: 195px; }.chart-bars { gap: 20px; }.terminal { font-size: 12.5px; }.hero-bottom > span:last-child { display: block; }.wordmarks { justify-content: space-between; }.bento { grid-template-columns: 1fr 1fr; }.bento-main { grid-column: 1 / -1; }.bento .bento-wide { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: 25px; align-items: center; }.flow-labels > span { flex-direction: row; justify-content: space-between; }.price-grid { grid-template-columns: 1fr 1fr; }.price-card:last-child { grid-column: 1 / -1; }.hero-description { font-size: 16px; }.story-bottom { align-items: center; }
}
@media (min-width: 1000px) {
.wrap { width: min(100% - 112px, 1320px); }.site-header { min-height: 100px; }.brand { font-size: 34px; }.nav-cta { font-size: 12px; }.hero { display: grid; grid-template-columns: 1.05fr 1fr; column-gap: 28px; padding-top: 72px; }.hero h1 { font-size: clamp(110px, 9.8vw, 146px); }.hero .eyebrow { margin-bottom: 38px; }.hero-visual { margin-top: 24px; padding: 26px 16px 20px; align-self: center; }.hero-description { max-width: 410px; }.dashboard-head { font-size: 12.5px; }.dashboard-tabs { font-size: 12.5px; }.metrics strong { font-size: 42px; }.metrics small { font-size: 12.5px; }.chart { height: 210px; }.activity strong { font-size: 12.5px; }.terminal { font-size: 12.5px; }.hero-bottom { grid-column: 1 / -1; margin-top: 58px; }.trust { padding-block: 34px 52px; }.trust h2 { text-align: center; }.wordmarks { margin-top: 40px; }.wordmarks > span { font-size: 30px; }.wordmarks .wordmark-fold { font-size: 24px; }.wordmarks .wordmark-north { font-size: 17px; }.section { padding-block: 120px; }.section-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 30px; align-items: end; margin-bottom: 52px; }.section-heading .eyebrow { grid-column: 1 / -1; margin-bottom: 8px; }.section-heading > p:last-child { justify-self: end; padding-bottom: 7px; margin-top: 0; }.bento { grid-template-columns: 1.35fr 1fr 1fr; }.bento article { padding: 32px; }.bento-main { grid-column: auto; grid-row: span 2; }.bento-main h3 { font-size: 48px; }.bento-small { grid-column: span 1; }.bento .bento-wide { grid-column: 2 / -1; grid-template-columns: .9fr 1.1fr; }.bento-wide h3 { font-size: 22px; }.flow-graphic { margin-top: 72px; font-size: 12.5px; }.flow-labels > span { flex-direction: column; }.flow-track { height: 74px; }.repo-art { margin-bottom: 28px; padding-block: 0; }.repo-art .repo-hub { width: 62px; height: 62px; margin-inline: 20px; font-size: 44px; }.repo-hub::before, .repo-hub::after { width: 20px; }.privacy-card h3 { margin-top: 20px; }.privacy-seal { font-size: 12.5px; }.workflow-grid { grid-template-columns: 1fr 1fr; gap: 100px; }.steps li { gap: 40px; padding-block: 32px; }.steps h3 { font-size: 25px; }.story { grid-template-columns: 1fr 2.6fr; gap: 70px; }.story-meta .eyebrow { margin-top: 8px; }.story-bottom { margin-top: 45px; }.price-grid { grid-template-columns: 1fr 1fr 1fr; }.price-card:last-child { grid-column: auto; }.price-card { padding: 32px; }.price-card > .micro, .price-top > .micro { font-size: 12.5px; }.faq { grid-template-columns: 1fr 1.25fr; gap: 90px; }.faq-list summary { font-size: 16px; }.start-grid { grid-template-columns: 1.2fr 1fr; gap: 110px; }.footer-top nav { grid-template-columns: repeat(4, auto); gap: 28px; }.footer-top > p { margin-right: auto; }.footer { padding-top: 58px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
.popular { display: inline-block; align-self: flex-start; margin-top: 18px; padding: 5px 10px; background: var(--accent); color: var(--inverse); font: 500 12.5px var(--font-mono); letter-spacing: .055em; text-transform: uppercase; }
.price > span:first-child { font-size: 22px; align-self: flex-start; }
.billing button { padding: 12px 16px; min-height: 44px; }
.footer-word > span { font-size: .5em; align-self: flex-start; margin-top: .15em; }
.signup select { appearance: none; padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233cffb0' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.avatar { width: 52px; height: 52px; font-size: 14px; }
.person { font-size: 15px; }
@media (max-width: 599px) {
.site-header { flex-wrap: wrap; min-height: auto; padding-block: 14px; }
.site-header nav { display: flex; order: 3; width: 100%; gap: 20px; overflow-x: auto; }
.nav-cta { padding: 12px 0; }
}