/* ============================================================
   Swiss Army Knife — design system stylesheet
   SAK-21: UI redesign. No build pipeline. CSS custom properties
   from Stitch portal session ("Technical Precision").
   ============================================================ */

/* Fonts are self-hosted (SAK-64) — never load from Google's CDN, which would
   transmit every visitor's IP to Google (US) on each page render. woff2 files
   live in static/fonts/; regenerate the Material Symbols subset with
   scripts/fonts/subset-material-symbols.py. Paths are relative to this
   stylesheet so they resolve regardless of servlet context path. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/inter-400-da03732a27e16543f09d6a6a62b0cdd4.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/inter-500-51205681a1ba304816fc629e8989256b.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/inter-600-2ede57db1a3a5f41f40467e7a43a1dd4.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/space-grotesk-400-1a806675790eb1c83d376bb02292e37c.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/space-grotesk-600-49f2dd2d21322ac241e5c9b34da2121e.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/space-grotesk-700-f9e147a59a9381b7db65941ceac88e52.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/jetbrains-mono-400-caf0dfde4e448468f09b7bed230206a4.woff2') format('woff2')}
/* font-display:block (not swap) for the icon face: with swap, the ligature falls
   back to a system font during load and briefly shows the raw text ("delete_forever")
   even when the glyph exists. block keeps the icon invisible until the font loads. */
@font-face{font-family:'Material Symbols Outlined';font-style:normal;font-weight:100 700;font-display:block;src:url('/fonts/material-symbols-outlined-subset-e239e8807103bf54439f5b24ed92104a.woff2') format('woff2')}

:root {
  --surface:                   #fcf9f8;
  --surface-dim:               #dcd9d9;
  --surface-container-lowest:  #ffffff;
  --surface-container-low:     #f6f3f2;
  --surface-container:         #f0eded;
  --surface-container-high:    #eae7e7;
  --surface-container-highest: #e5e2e1;
  --on-surface:                #1c1b1b;
  --on-surface-variant:        #414751;
  --inverse-surface:           #313030;
  --inverse-on-surface:        #f3f0ef;
  --outline:                   #717882;
  --outline-variant:           #c0c7d2;
  --surface-variant:           #e5e2e1;
  --primary:                   #005792;
  --on-primary:                #ffffff;
  --primary-container:         #0f70b7;
  --on-primary-container:      #e7f0ff;
  --primary-fixed:             #d1e4ff;
  --on-primary-fixed:          #001d35;
  --tertiary:                  #824400;
  --tertiary-fixed:            #ffdcc3;
  --on-tertiary-fixed:         #2f1500;
  --error:                     #ba1a1a;
  --on-error:                  #ffffff;
  --error-container:           #ffdad6;
  --on-error-container:        #93000a;
  --background:                #fcf9f8;
  --on-background:             #1c1b1b;
  --font-headline: 'Space Grotesk', system-ui, sans-serif;
  --font-body:     'Inter', system-ui, sans-serif;
  --font-mono:     'JetBrains Mono', 'Menlo', monospace;
  --space-xs:  4px;  --space-sm:  8px;  --space-md:  16px;
  --space-lg:  24px; --space-xl:  32px; --space-2xl: 48px; --space-3xl: 64px;
  --radius-sm: .125rem; --radius-md: .25rem; --radius-lg: .5rem;
  --radius-xl: .75rem;  --radius-full: 9999px;
  --shadow-sm: 0 2px 8px rgba(28,27,27,.04),0 1px 2px rgba(28,27,27,.06);
  --shadow-md: 0 4px 20px rgba(28,27,27,.06),0 2px 6px rgba(28,27,27,.04);
  --sidebar-width: 256px; --header-height: 60px; --container-max: 1280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);font-size:16px;line-height:24px;
  color:var(--on-surface);background:var(--background);min-height:100dvh;
  -webkit-font-smoothing:antialiased}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
.btn-inline-link{background:none;border:0;padding:0;font:inherit;color:var(--primary);cursor:pointer;text-decoration:none}
.btn-inline-link:hover{text-decoration:underline}
.btn-inline-link:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
img{max-width:100%;height:auto}
.material-symbols-outlined{font-family:'Material Symbols Outlined',sans-serif;
  font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
  vertical-align:middle;line-height:1;user-select:none}

/* Typography */
.text-headline-xl{font-family:var(--font-headline);font-size:40px;line-height:48px;letter-spacing:-.02em;font-weight:700}
.text-headline-lg{font-family:var(--font-headline);font-size:32px;line-height:40px;letter-spacing:-.01em;font-weight:600}
.text-headline-md{font-family:var(--font-headline);font-size:24px;line-height:32px;font-weight:600}
.text-headline-sm{font-family:var(--font-headline);font-size:20px;line-height:28px;font-weight:600}
.text-body-lg{font-size:18px;line-height:28px}
.text-body-md{font-size:16px;line-height:24px}
.text-body-sm{font-size:14px;line-height:20px}
.text-label-md{font-size:12px;line-height:16px;letter-spacing:.05em;font-weight:600;text-transform:uppercase}
.text-code-md{font-family:var(--font-mono);font-size:14px;line-height:22px}

/* Auth shell */
.auth-shell{min-height:100dvh;display:flex;flex-direction:column;background:var(--surface-container-low)}
.auth-shell__header{padding:var(--space-md) var(--space-xl);background:var(--surface-container-lowest);border-bottom:1px solid var(--surface-container-high);display:flex;align-items:center;justify-content:space-between;gap:var(--space-md)}
.auth-shell__nav{display:flex;align-items:center;gap:var(--space-md)}
.auth-shell__nav a:not(.btn){color:var(--on-surface);text-decoration:none;font-weight:500}
.auth-shell__nav a:not(.btn):hover{text-decoration:underline}
.auth-main{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--space-xl) var(--space-md)}
.auth-main--top{align-items:flex-start;padding-top:var(--space-2xl)}
.auth-card{background:var(--surface-container-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:var(--space-2xl);width:100%;max-width:420px}
.auth-wide{width:100%;max-width:760px}

/* App shell */
.app-shell{display:flex;min-height:100dvh}
.app-sidebar{width:var(--sidebar-width);background:var(--surface-container-lowest);border-right:1px solid var(--surface-container-high);display:flex;flex-direction:column;position:fixed;left:0;top:0;height:100%;z-index:40;padding:var(--space-lg) 0}
.app-sidebar-toggle{display:none;background:transparent;border:0;padding:8px;margin-right:var(--space-xs);border-radius:var(--radius-md);color:var(--on-surface);cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.app-sidebar-toggle:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.app-sidebar-toggle .material-symbols-outlined{font-size:24px}
.app-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:35}
@media(max-width:1023px){
  .app-sidebar{transform:translateX(-100%);transition:transform .2s ease-out;width:min(280px,82vw)}
  body.has-mobile-nav-open .app-sidebar{transform:translateX(0);box-shadow:0 12px 32px rgba(28,27,27,.18)}
  body.has-mobile-nav-open{overflow:hidden}
  body.has-mobile-nav-open .app-sidebar-backdrop{display:block}
  .app-sidebar-toggle{display:inline-flex}
  .app-header{padding-left:var(--space-sm)}
}
@media(prefers-reduced-motion:reduce){.app-sidebar{transition:none}}
.app-sidebar__brand{display:flex;align-items:center;gap:var(--space-sm);padding:0 var(--space-lg) var(--space-xl);text-decoration:none}
.app-sidebar__brand:hover{text-decoration:none}
.sidebar-section-label{padding:var(--space-md) var(--space-lg) var(--space-xs);color:var(--outline);font-size:11px;letter-spacing:.07em;font-weight:600;text-transform:uppercase}
.sidebar-nav{list-style:none;padding:0 var(--space-sm);flex:1}
.sidebar-nav__item a{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);border-radius:var(--radius-md);color:var(--on-surface-variant);font-size:14px;font-weight:500;text-decoration:none;transition:background-color .15s,color .15s;white-space:nowrap}
.sidebar-nav__item a:hover{background:var(--surface-container-low);color:var(--on-surface);text-decoration:none}
.sidebar-nav__item a.active,.sidebar-nav__item a[aria-current="page"]{background:var(--primary-fixed);color:var(--primary);font-weight:600}
.sidebar-nav__item a .material-symbols-outlined{font-size:20px;flex-shrink:0}
.app-sidebar__footer{padding:var(--space-sm) var(--space-sm) 0;border-top:1px solid var(--surface-container-high);margin-top:var(--space-md)}
.app-header{position:sticky;top:0;height:var(--header-height);background:rgba(252,249,248,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--surface-container-high);z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-xl);gap:var(--space-md)}
.app-header__title{font-size:12px;font-weight:600;color:var(--on-surface-variant);text-transform:uppercase;letter-spacing:.05em}
.app-header__actions{display:flex;align-items:center;gap:var(--space-sm)}
.app-main{margin-left:var(--sidebar-width);flex:1;display:flex;flex-direction:column;min-height:100dvh}
@media(max-width:1023px){.app-main{margin-left:0}}
.app-content{flex:1;padding:var(--space-xl);max-width:var(--container-max);width:100%;margin:0 auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);border:1px solid transparent;border-radius:var(--radius-md);font-family:var(--font-body);font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s,box-shadow .15s,transform .1s;white-space:nowrap;user-select:none;padding:10px var(--space-lg);line-height:1}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
a:focus-visible,.btn-icon:focus-visible,details>summary:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.btn:active:not(:disabled){transform:scale(.98)}
.btn-primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn-primary:hover:not(:disabled){background:var(--primary-container);border-color:var(--primary-container);color:var(--on-primary);text-decoration:none}
.btn-secondary{background:var(--surface-container-high);color:var(--on-surface);border-color:var(--surface-container-high)}
.btn-secondary:hover:not(:disabled){background:var(--surface-container-highest);color:var(--on-surface);text-decoration:none}
.btn-ghost{background:transparent;color:var(--primary);border-color:var(--outline-variant)}
.btn-ghost:hover:not(:disabled){background:var(--primary-fixed);color:var(--primary);text-decoration:none}
.btn-danger{background:var(--error-container);color:var(--on-error-container);border-color:var(--error-container)}
.btn-danger:hover:not(:disabled){background:var(--error);color:var(--on-error);border-color:var(--error);text-decoration:none}
.btn-sm{padding:6px var(--space-md);font-size:11px}
.btn-lg{padding:14px var(--space-xl);font-size:13px}
.btn-full{width:100%}
.btn-icon{padding:var(--space-sm);border-radius:var(--radius-md);background:transparent;color:var(--on-surface-variant);border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;transition:background-color .15s,color .15s}
.btn-icon:hover{background:var(--surface-container-high);color:var(--on-surface)}
.btn-icon .material-symbols-outlined{font-size:20px}

/* Forms */
.form-group{display:flex;flex-direction:column;gap:var(--space-xs)}
.form-label{display:block;font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--on-surface-variant);text-transform:uppercase}
.form-control{display:block;width:100%;padding:10px var(--space-md);background:var(--surface-container-lowest);border:1px solid var(--outline-variant);border-radius:var(--radius-md);font-family:var(--font-body);font-size:16px;line-height:24px;color:var(--on-surface);transition:border-color .15s,box-shadow .15s;outline:none;appearance:none;-webkit-appearance:none}
.form-control::placeholder{color:var(--outline);opacity:.7}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(0,87,146,.12)}
.form-control.is-invalid{border-color:var(--error);box-shadow:0 0 0 3px rgba(186,26,26,.1)}
.form-hint{font-size:12px;color:var(--outline);line-height:1.5}
.form-error-text{font-size:12px;color:var(--error);line-height:1.5}
.form-check{display:flex;align-items:flex-start;gap:var(--space-sm);cursor:pointer}
.form-check__input{width:16px;height:16px;margin-top:3px;accent-color:var(--primary);cursor:pointer;flex-shrink:0}
.form-check__label{font-size:14px;color:var(--on-surface-variant);line-height:20px;cursor:pointer}

/* Alerts */
.alert{display:flex;align-items:flex-start;gap:var(--space-sm);padding:var(--space-md);border-radius:var(--radius-md);font-size:14px;line-height:20px;margin-bottom:var(--space-md)}
.alert .material-symbols-outlined{font-size:18px;margin-top:1px;flex-shrink:0}
.alert-danger{background:var(--error-container);color:var(--on-error-container)}
.alert-success{background:#dcfce7;color:#15803d}
.alert-warning{background:var(--tertiary-fixed);color:var(--on-tertiary-fixed)}
.alert-info{background:var(--primary-fixed);color:var(--on-primary-fixed)}

/* Cards */
.card{background:var(--surface-container-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.card__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--surface-container-high)}
.card__header-title{font-family:var(--font-headline);font-size:20px;line-height:28px;font-weight:600;color:var(--on-background)}
.card__body{padding:var(--space-xl)}
.card__footer{padding:var(--space-md) var(--space-xl);border-top:1px solid var(--surface-container-high);background:var(--surface-container-low);border-radius:0 0 var(--radius-lg) var(--radius-lg)}

/* Tables */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse}
.table th{padding:var(--space-sm) var(--space-lg);text-align:left;font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--on-surface-variant);text-transform:uppercase;background:var(--surface-container-low);border-bottom:1px solid var(--surface-container-high);white-space:nowrap}
.table td{padding:var(--space-md) var(--space-lg);font-size:14px;line-height:20px;color:var(--on-surface);border-bottom:1px solid var(--surface-container-high);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--surface-container-low)}

/* Code blocks */
.code-block{background:var(--inverse-surface);color:#c9d1d9;border-radius:var(--radius-lg);overflow:hidden}
.code-block__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.07)}
.code-block__filename{font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.35)}
.code-block__body{padding:var(--space-lg);overflow-x:auto}
.code-block pre{font-family:var(--font-mono);font-size:14px;line-height:22px;margin:0}
code{font-family:var(--font-mono);font-size:.875em;background:var(--surface-container-high);color:var(--on-surface);padding:1px 5px;border-radius:var(--radius-sm)}
.code-block code{background:none;color:inherit;padding:0}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:2px var(--space-sm);border-radius:var(--radius-full);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.badge__dot{width:6px;height:6px;border-radius:var(--radius-full);flex-shrink:0}
.badge-active{background:var(--primary-fixed);color:var(--on-primary-fixed)}
.badge-active .badge__dot{background:var(--primary)}
.badge-warning{background:var(--tertiary-fixed);color:var(--on-tertiary-fixed)}
.badge-warning .badge__dot{background:var(--tertiary)}
.badge-error{background:var(--error-container);color:var(--on-error-container)}
.badge-error .badge__dot{background:var(--error)}
.badge-neutral{background:var(--surface-container-high);color:var(--on-surface-variant)}
.badge-neutral .badge__dot{background:var(--outline)}

/* Page header */
.page-header{margin-bottom:var(--space-xl)}
.page-header__title{font-family:var(--font-headline);font-size:32px;line-height:40px;letter-spacing:-.01em;font-weight:600;color:var(--on-background)}
.page-header__subtitle{margin-top:var(--space-xs);color:var(--on-surface-variant);font-size:16px;line-height:24px}
.page-header__actions{display:flex;align-items:center;gap:var(--space-sm);margin-top:var(--space-md)}

/* Divider */
.divider{display:flex;align-items:center;gap:var(--space-md);color:var(--outline);font-size:11px;letter-spacing:.06em;font-weight:600;text-transform:uppercase}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--surface-container-high)}

/* Legal prose */
.legal-prose{font-size:16px;line-height:26px;color:var(--on-surface)}
.legal-prose h1,.legal-prose h2,.legal-prose h3{font-family:var(--font-headline);margin-top:var(--space-xl);margin-bottom:var(--space-md);color:var(--on-background)}
.legal-prose h1{font-size:28px;line-height:36px}
.legal-prose h2{font-size:22px;line-height:30px}
.legal-prose h3{font-size:18px;line-height:26px}
.legal-prose p{margin-bottom:var(--space-md)}
.legal-prose ul,.legal-prose ol{padding-left:var(--space-xl);margin-bottom:var(--space-md)}
.legal-prose li{margin-bottom:var(--space-xs)}
.legal-prose table{width:100%;border-collapse:collapse;margin:var(--space-md) 0 var(--space-lg);font-size:15px;line-height:22px}
.legal-prose thead th{text-align:left;font-weight:600;background:var(--surface-container-low);border-bottom:2px solid var(--surface-container-high);color:var(--on-background)}
.legal-prose th,.legal-prose td{padding:var(--space-sm) var(--space-md);border:1px solid var(--surface-container-high);vertical-align:top}
.legal-prose tbody tr:nth-child(even){background:var(--surface-container-lowest)}
.legal-prose table p{margin:0}
.legal-prose table p+p{margin-top:var(--space-xs)}
.legal-doc-card{background:var(--surface-container-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);margin-bottom:var(--space-lg);overflow:hidden}
.legal-doc-card__header{padding:var(--space-lg) var(--space-xl);border-bottom:1px solid var(--surface-container-high)}
.legal-doc-card__title{font-family:var(--font-headline);font-size:20px;line-height:28px;font-weight:600;color:var(--on-background)}
.legal-doc-card__title a{color:inherit;text-decoration:none}
.legal-doc-card__meta{margin-top:var(--space-xs);font-size:13px;color:var(--on-surface-variant)}
.legal-doc-card__body{padding:var(--space-xl)}
.legal-doc-card__footer{padding:var(--space-lg) var(--space-xl);background:var(--surface-container-low);border-top:1px solid var(--surface-container-high)}
details>summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--primary);list-style:none;display:flex;align-items:center;gap:var(--space-xs);padding:var(--space-sm) 0}
details>summary::before{content:'\25B6';font-size:10px;display:inline-block;transition:transform .2s}
details[open]>summary::before{transform:rotate(90deg)}
details>summary::-webkit-details-marker{display:none}
details[open]>.legal-prose{margin-top:var(--space-md)}

/* Brand logo */
.brand-logo{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none}
.brand-logo:hover{text-decoration:none}
.brand-logo__img{max-height:32px;width:auto}
.brand-logo__wordmark{font-family:var(--font-headline);font-weight:700;color:var(--primary);font-size:18px;letter-spacing:-.01em}

/* Footers */
.app-footer{padding:var(--space-lg) var(--space-xl);border-top:1px solid var(--surface-container-high);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md)}
.page-footer{padding:var(--space-lg) var(--space-xl);border-top:1px solid var(--surface-container-high);background:var(--surface-container-lowest);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md)}
.page-footer__copy{font-size:12px;color:var(--outline)}
.page-footer__seller{font-size:12px;color:var(--outline)}
.page-footer__links{display:flex;gap:var(--space-lg);list-style:none;flex-wrap:wrap}
.page-footer__links a{font-size:12px;color:var(--outline);text-decoration:none;transition:color .15s}
.page-footer__links a:hover{color:var(--primary)}

/* Utilities */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.text-center{text-align:center}
.text-right{text-align:right}
.text-primary{color:var(--primary)}
.text-muted{color:var(--on-surface-variant)}
.text-error{color:var(--error)}
.text-outline{color:var(--outline)}
.d-flex{display:flex}
.flex-col{flex-direction:column}
.align-center{align-items:center}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.flex-1{flex:1}
.gap-xs{gap:var(--space-xs)}.gap-sm{gap:var(--space-sm)}.gap-md{gap:var(--space-md)}.gap-lg{gap:var(--space-lg)}
.w-full{width:100%}
.mt-xs{margin-top:var(--space-xs)}.mt-sm{margin-top:var(--space-sm)}.mt-md{margin-top:var(--space-md)}.mt-lg{margin-top:var(--space-lg)}.mt-xl{margin-top:var(--space-xl)}
.mb-xs{margin-bottom:var(--space-xs)}.mb-sm{margin-bottom:var(--space-sm)}.mb-md{margin-bottom:var(--space-md)}.mb-lg{margin-bottom:var(--space-lg)}.mb-xl{margin-bottom:var(--space-xl)}

/* Public marketing pages (landing / pricing / waitlist) */
.hero{padding:var(--space-2xl) 0;text-align:center}
.hero__title{color:var(--on-background)}
.hero__subtitle{max-width:680px;margin-left:auto;margin-right:auto}
.hero__actions{display:flex;justify-content:center;gap:var(--space-md);flex-wrap:wrap}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-lg)}
.feature-card{background:var(--surface-container-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-xl)}
.feature-card__title{color:var(--on-background)}
.cycle-toggle{display:flex;gap:0;padding:4px;margin:0 auto var(--space-lg);background:var(--surface-container-high);border-radius:var(--radius-full);width:max-content;max-width:100%}
.cycle-toggle__option{padding:8px var(--space-lg);border-radius:var(--radius-full);font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--on-surface-variant);text-decoration:none;transition:background-color .15s,color .15s;white-space:nowrap}
.cycle-toggle__option:hover{color:var(--on-surface);text-decoration:none}
.cycle-toggle__option.is-selected,.cycle-toggle__option[aria-current="page"]{background:var(--primary);color:var(--on-primary)}
.cycle-toggle__option:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-lg);align-items:stretch}
.tier-card{background:var(--surface-container-lowest);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-xl);display:flex;flex-direction:column}
.tier-card__name{color:var(--on-background)}
.tier-card__amount{display:inline-block;color:var(--on-background)}
.tier-card__period{margin-left:var(--space-xs)}
.tier-card__bullets{list-style:none;padding:0;display:flex;flex-direction:column;gap:var(--space-sm);font-size:14px;line-height:20px;color:var(--on-surface-variant);flex:1}
.tier-card__bullets li{padding-left:var(--space-md);position:relative}
.tier-card__bullets li::before{content:'\2713';position:absolute;left:0;color:var(--primary);font-weight:700}
.tier-card__footer{margin-top:auto;display:flex;flex-direction:column;gap:var(--space-lg);padding-top:var(--space-lg)}
.waitlist-form{display:flex;flex-direction:column}

/* Usage dashboard (templates/app/usage.html) */
.usage-figure{font-family:var(--font-headline);font-size:48px;line-height:56px;font-weight:600;color:var(--on-background)}
.usage-figure__quota{color:var(--on-surface-variant);font-weight:400}
.usage-bar{height:12px;background:var(--surface-container-high);border-radius:var(--radius-full);overflow:hidden;margin-top:var(--space-md)}
.usage-bar__fill{height:100%;background:var(--primary);border-radius:var(--radius-full);transition:width .2s ease-out}
.usage-bar__fill.is-near-limit{background:var(--error,#b3261e)}