/* Schibsted Grotesk (OFL): the one self-hosted face. It carries the brand
   lockup and the site-chrome headings; body text stays on system-ui, so no
   webfont sits on the critical text path. Instanced down to what we render:
   weight stays variable across 600..700 (the only weights used), served
   pre-subset by Google's own splitter (latin + latin-ext). Served from
   /static/fonts/ by stable name with an immutable 1y cache, so the url needs
   no hash -- a glyph/design change needs a new filename to bust that cache. */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/static/fonts/schibsted-grotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("/static/fonts/schibsted-grotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --background: var(--color-zinc-100);
  --foreground: var(--color-zinc-900);
  --muted: var(--color-zinc-300);
  --muted-foreground: var(--color-zinc-700);
  --border: var(--color-zinc-300);
  /* unavailable option chips: lighter than --muted-foreground so the label
     reads as clearly muted, not just-as-dark-as-available. zinc-600 sits at
     ~7:1 on the chip (matching the dark-mode treatment) — the lightest step
     that still clears the 4.5:1 AA floor; zinc-500 drops to ~4.4:1. */
  --unavailable-foreground: var(--color-zinc-600);
  --surface: var(--color-zinc-50);
  --surface-foreground: var(--color-zinc-900);
  /* violet-700 clears WCAG AA in light mode both as link text on the page
     background (6.62:1) and under --primary-foreground on the buy button
     (6.64:1); dark mode's violet-400 clears it too (6.22 / 5.36). */
  --primary: var(--color-violet-700);
  --primary-foreground: var(--color-violet-50);
  /* hover shifts primary one step toward the theme's far end instead of
     fading it, so the hovered surface stays opaque over any background */
  --primary-hover: var(--color-violet-800);
  /* selected-state fill: primary's quiet sibling, so selection doesn't
     compete with primary action buttons */
  --primary-muted: var(--color-violet-100);
  --primary-muted-foreground: var(--color-violet-900);
  --accent: var(--color-zinc-200);
  --accent-foreground: var(--color-zinc-900);
  --ring: var(--color-violet-500);
  --destructive: var(--color-red-600);
  --destructive-foreground: var(--color-red-50);
  --success: var(--color-emerald-600);
  --success-foreground: var(--color-emerald-50);
  --warning: var(--color-amber-500);
  --warning-foreground: var(--color-amber-950);
  /* Stripe's wordmark, the one colour here that is not ours to pick: their
     brand guidelines forbid recolouring the mark and sanction exactly two
     treatments, brand purple and reversed white, so this token switches
     between those two rather than tracking --primary like everything else.
     Purple on light, where it clears AA on the --surface panel it sits in;
     white on dark, where the same purple manages only ~3.2:1 against that
     panel and the mark has to hold up as a word inside a sentence. */
  --stripe-mark: #635bff;
  /* The saving badge. It cannot ride --primary-muted like the app's other
     chips: that token is violet-950 in dark mode, darker than the --surface
     it sits on, so the badge reads as a hole punched in the card rather than
     something highlighted. This pair stays a step lighter than its
     surroundings in both themes. */
  --saving: var(--color-violet-100);
  --saving-foreground: var(--color-violet-900);

  /* Capability accents. Three hues, one per secret link, reused wherever that
     link's concept comes back in the landing page's Free and Premium lists.
     A colour here therefore says WHICH POWER rather than decorating a row:
     violet is the edit link and the builder behind it, cyan the results link
     and the numbers read through it, terracotta the share link and everything
     that puts a form in front of someone.

     Matched OKLCH lightness AND matched absolute chroma (50%/0.09 here,
     72%/0.108 in dark). Matched absolute chroma, not a matched fraction of
     each hue's gamut, is what stops violet running away with it: violet's
     gamut is about three times cyan's at this lightness, so equal fractions
     would not be equal colour. The price is a muted set — dusty violet, deep
     teal, terracotta — which is the register this page argues in anyway.

     Deliberately quieter than --primary. That token means "action", on buttons
     and links; these mean "which capability". Keeping the two visibly apart is
     what stops an accent icon reading as something you can click.

     Each hue against its own --accent-tint fill on --background: edit 4.92:1,
     results 4.62:1, share 4.94:1. Bare on --background: 5.63, 5.31, 5.66. On
     --surface: 5.93, 5.59, 5.97. All clear the 3:1 an icon needs, and no pair
     sits closer than 89 units of sRGB distance, which is what keeps the three
     tellable apart at the 20-24px they render at. */
  --accent-edit: oklch(50% 0.09 293);
  --accent-results: oklch(50% 0.09 224);
  --accent-share: oklch(50% 0.09 41);
  /* Fill and hairline for an accent's own container, as percentages fed to
     color-mix so one rule serves all three hues. Dark needs more of both: the
     same 10% over zinc-900 is almost nothing, where over zinc-100 it reads. */
  --accent-tint: 10%;
  --accent-line: 28%;

  /* Referenced five times as var(--danger, #b91c1c) and never defined, so
     every one of those rendered the raw fallback: right shade in light, an
     unthemed near-black-red on the dark surface. --destructive is the token
     that already means this, in both themes, with its ratios documented. */
  --danger: var(--destructive);

  /* Selection. violet-200 under the page's own text, rather than the UA blue,
     which is the one colour on the page nobody chose. 12.75:1 here, 9.28:1
     for the dark pair. */
  --selection: var(--color-violet-200);
  --selection-foreground: var(--color-zinc-900);

  /* Card lift. One treatment, styled honestly per theme rather than derived:
     in light, --surface (zinc-50) is lighter than the page, so a 1px shadow is
     what reads as raised; in dark, --surface is darker than its own border and
     a shadow reads as nothing, so the light comes from an inner top highlight
     instead. --shadow-xs is not a new idiom on this page — the checked billing
     segment already uses it. */
  --card-lift: var(--shadow-xs);

  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SF Mono, SF Mono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace;
  /* display face for the brand lockup and site-chrome headings; falls back
     to the body stack before the webfont swaps in, and everywhere a glyph
     isn't covered. Deliberately NOT applied to h1-h6 globally: form content
     (editor canvas, fill pages) is the creator's document, not our brand. */
  --font-display: "Schibsted Grotesk", var(--font-sans);

  /* icons */
  --icon-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M9.198 6.59c0-2.336 1.563-4.549 2.805-4.59c1.242.041 2.802 2.254 2.802 4.59v1.148c0 2.54 3.346 4.221 4.187 5.328c.378.475.372 1.913.401 2.541a.38.38 0 0 1-.39.393h-3.906l-.684.819a.4.4 0 0 1-.337.181H9.927a.4.4 0 0 1-.337-.181L8.906 16H5a.38.38 0 0 1-.39-.393c.029-.628.023-2.066.4-2.541c.842-1.107 4.188-2.787 4.188-5.328z'/%3E%3Cpath stroke='currentColor' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M12 22s1-1.425 1-2.137c0-.713-.533-.863-1-.863s-1 .15-1 .863C11 20.575 12 22 12 22ZM9.198 6.59c0-2.336 1.563-4.549 2.805-4.59c1.242.041 2.802 2.254 2.802 4.59v1.148c0 2.54 3.346 4.221 4.187 5.328c.378.475.372 1.913.401 2.541a.38.38 0 0 1-.39.393h-3.906l-.684.819a.4.4 0 0 1-.337.181H9.927a.4.4 0 0 1-.337-.181L8.906 16H5a.38.38 0 0 1-.39-.393c.029-.628.023-2.066.4-2.541c.842-1.107 4.188-2.787 4.188-5.328z'/%3E%3C/g%3E%3C/svg%3E");
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cg clip-path='url(%23SVGHcSWxdhd)'%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='1.5' d='M3 12H1m22 0h-2m-9 9v2m0-22v2M5.636 18.364l-1.414 1.414M19.778 4.222l-1.414 1.414m-12.728 0L4.222 4.222m15.556 15.556l-1.414-1.414M18 12a6 6 0 1 1-12 0a6 6 0 0 1 12 0Z'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='SVGHcSWxdhd'%3E%3Cpath fill='%23fff' d='M0 0h24v24H0z'/%3E%3C/clipPath%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M10.41 13.28C7.332 10.205 6.716 5.693 8.357 2c-1.23.41-2.256 1.23-3.281 2.256a10.4 10.4 0 0 0 0 14.768c4.102 4.102 10.46 3.897 14.562-.205c1.026-1.026 1.846-2.051 2.256-3.282c-3.896 1.436-8.409.82-11.486-2.256'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10.41 13.28C7.332 10.205 6.716 5.693 8.357 2c-1.23.41-2.256 1.23-3.281 2.256a10.4 10.4 0 0 0 0 14.768c4.102 4.102 10.46 3.897 14.562-.205c1.026-1.026 1.846-2.051 2.256-3.282c-3.896 1.436-8.409.82-11.486-2.256'/%3E%3C/g%3E%3C/svg%3E");
  --icon-monitor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M19.6 4H4.4A2.4 2.4 0 0 0 2 6.4v8.2A2.4 2.4 0 0 0 4.4 17h15.2a2.4 2.4 0 0 0 2.4-2.4V6.4A2.4 2.4 0 0 0 19.6 4'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M9 20h6M4.4 4h15.2A2.4 2.4 0 0 1 22 6.4v8.2a2.4 2.4 0 0 1-2.4 2.4H4.4A2.4 2.4 0 0 1 2 14.6V6.4A2.4 2.4 0 0 1 4.4 4'/%3E%3C/g%3E%3C/svg%3E");
  --icon-layers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M12 3L3 8l9 5l9-5z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='m3 12l9 5l9-5M3 16l9 5l9-5M3 8l9-5l9 5l-9 5z'/%3E%3C/g%3E%3C/svg%3E");
  --icon-bar-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M13.4 2h-2.8A1.6 1.6 0 0 0 9 3.6V22h6V3.6A1.6 1.6 0 0 0 13.4 2'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M2 22h20M9 8.6A1.6 1.6 0 0 0 7.4 7H4.6A1.6 1.6 0 0 0 3 8.6V22m6 0V3.6A1.6 1.6 0 0 1 10.6 2h2.8A1.6 1.6 0 0 1 15 3.6V22m6 0v-8.4a1.6 1.6 0 0 0-1.6-1.6h-2.8a1.6 1.6 0 0 0-1.6 1.6'/%3E%3C/g%3E%3C/svg%3E");
  --icon-direction: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='m12 3l7 18l-7-4.093L5 21z'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='m12 3l7 18l-7-4.093L5 21z'/%3E%3C/g%3E%3C/svg%3E");
  --icon-shield-verified: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M12.113 21.98a.33.33 0 0 1-.226 0C10.917 21.64 4 18.94 4 11.252V4.304a.4.4 0 0 1 .303-.389l7.6-1.903a.4.4 0 0 1 .194 0l7.6 1.903a.4.4 0 0 1 .303.389v6.948c0 7.765-6.916 10.397-7.887 10.729'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m8 12l3 3l5-7M4 11.252c0 7.687 6.918 10.387 7.887 10.728q.113.04.226 0C13.084 21.65 20 19.018 20 11.253V4.304a.4.4 0 0 0-.303-.389l-7.6-1.903a.4.4 0 0 0-.194 0l-7.6 1.903A.4.4 0 0 0 4 4.304z'/%3E%3C/g%3E%3C/svg%3E");
  --icon-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M3.2 4h17.6c.66 0 1.2.54 1.2 1.2v12.4c0 1.32-1.08 2.4-2.4 2.4H4.4C3.08 20 2 18.92 2 17.6V5.2C2 4.54 2.54 4 3.2 4'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m5 7.06 6.87 5.89c.07.06.19.06.26 0L19 7.06M3.2 4h17.6c.66 0 1.2.54 1.2 1.2v12.4c0 1.32-1.08 2.4-2.4 2.4H4.4C3.08 20 2 18.92 2 17.6V5.2C2 4.54 2.54 4 3.2 4'/%3E%3C/svg%3E");
  --icon-copyright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-width='1.5' d='M15.33 10.238C14.876 8.865 13.795 8 12.227 8C10.164 8 8.66 9.643 8.66 12s1.503 4 3.567 4c1.568 0 2.65-.865 3.103-2.238M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10s10-4.477 10-10Z'/%3E%3C/g%3E%3C/svg%3E");
  --icon-window: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M18.6 3H5.4A2.4 2.4 0 0 0 3 5.4v13.2A2.4 2.4 0 0 0 5.4 21h13.2a2.4 2.4 0 0 0 2.4-2.4V5.4A2.4 2.4 0 0 0 18.6 3'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M3 12h18m-9 9V3M5.4 3h13.2A2.4 2.4 0 0 1 21 5.4v13.2a2.4 2.4 0 0 1-2.4 2.4H5.4A2.4 2.4 0 0 1 3 18.6V5.4A2.4 2.4 0 0 1 5.4 3'/%3E%3C/g%3E%3C/svg%3E");
  /* MODIFIED from the stock Sargam glyph: the area under the line, at the
     same .16 fill-opacity every other icon here carries. Stock insights is
     the one stroke-only icon in this set, and since these render as CSS masks
     (alpha channel, so a .16 fill survives as a 16%-alpha region), that made
     it the only hollow icon on a page where its neighbours all have a tinted
     body — optically lighter than mail and globe either side of it in the
     plan's grid. The added path is the existing polyline closed down to the
     axis it already draws: (6,14) (10,10) (14,14) (21,7) then along y=21. */
  --icon-insights: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M6 14l4-4l4 4l7-7v14H6z'/%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21 21H3.8a.8.8 0 0 1-.8-.8V3m3 11l4-4l4 4l7-7'/%3E%3C/svg%3E");
  --icon-globe-detailed: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10'/%3E%3Cpath stroke='currentColor' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M22 12c0 5.523-4.477 10-10 10m10-10c0-5.523-4.477-10-10-10m10 10H2m10 10C6.477 22 2 17.523 2 12m10 10l.66-.31c2.1-2.71 3.34-6.14 3.34-9.78s-1.22-7-3.27-9.69L12 2m0 20l-.73-.31A15.94 15.94 0 0 1 8 12c0-3.64 1.24-7.07 3.34-9.78L12 2M2 12C2 6.477 6.477 2 12 2m7.14 17c-1.82-1.85-4.34-3-7.14-3s-5.33 1.15-7.14 3M19.14 5C17.33 6.85 14.8 8 12 8S6.68 6.85 4.86 5'/%3E%3C/g%3E%3C/svg%3E");
  --icon-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cg fill='none'%3E%3Cpath fill='currentColor' fill-opacity='.16' fill-rule='evenodd' d='M15 3a6 6 0 1 1-2.001 11.658l-5.76 5.764a1.994 1.994 0 0 1-2.817 0L3 19l1.458-1.458l1.85-.184l.227-1.893l1.895-.228l.227-1.894l1.219-1.219A6 6 0 0 1 15 3m0 4a2 2 0 1 0 0 4a2 2 0 0 0 0-4' clip-rule='evenodd'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M15 15a6 6 0 1 0-5.124-2.876l-1.22 1.22l-.226 1.893l-1.894.227l-.228 1.894l-1.85.184L3 19l1.422 1.422a1.99 1.99 0 0 0 2.817 0l5.76-5.764c.626.222 1.3.342 2.001.342'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M15 11a2 2 0 1 0 0-4a2 2 0 0 0 0 4'/%3E%3C/g%3E%3C/svg%3E");
  --icon-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M18.6 9h-7.2A2.4 2.4 0 0 0 9 11.4v7.2a2.4 2.4 0 0 0 2.4 2.4h7.2a2.4 2.4 0 0 0 2.4-2.4v-7.2A2.4 2.4 0 0 0 18.6 9'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M6 15h-.6C4.07 15 3 13.93 3 12.6V5.4C3 4.07 4.07 3 5.4 3h7.2C13.93 3 15 4.07 15 5.4V6m-3.6 3h7.2a2.4 2.4 0 0 1 2.4 2.4v7.2a2.4 2.4 0 0 1-2.4 2.4h-7.2A2.4 2.4 0 0 1 9 18.6v-7.2A2.4 2.4 0 0 1 11.4 9'/%3E%3C/svg%3E");
  --icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24'%3E%3C!-- Icon from Sargam Icons by Abhimanyu Rana - https://github.com/planetabhi/sargam-icons/blob/main/LICENSE.txt --%3E%3Cpath fill='currentColor' fill-opacity='.16' d='M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2'/%3E%3Cpath stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='1.5' d='M12 16h.008M12 8v5m10-1c0-5.523-4.477-10-10-10S2 6.477 2 12s4.477 10 10 10 10-4.477 10-10'/%3E%3C/svg%3E");

  --scale-0: 1rem;
  --scale-1: 1.125rem;
  --scale-2: 1.25rem;
  --scale-3: 1.5rem;
  --scale-4: 1.875rem;
  --scale-5: 2.25rem;
  --scale-6: 3rem;
  --scale-7: 3.75rem;
  --scale-8: 4.5rem;
  --scale-9: 6rem;
  --scale-10: 8rem;
  --scale-000: 0.75rem;
  --scale-00: 0.875rem;
  --scale-fluid-0: clamp(0.875rem, 0.8rem + 0.25vw, 1rem);
  --scale-fluid-1: clamp(1rem, 0.925rem + 0.25vw, 1.125rem);
  --scale-fluid-2: clamp(1.125rem, 1.05rem + 0.25vw, 1.25rem);
  --scale-fluid-3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --scale-fluid-4: clamp(1.5rem, 1.275rem + 0.75vw, 1.875rem);
  --scale-fluid-5: clamp(1.875rem, 1.65rem + 0.75vw, 2.25rem);
  /* landing-hero display size: steeper slope than the content scales, which
     stay conservative because they size creator documents, not our chrome */
  --scale-fluid-6: clamp(2.25rem, 1.8rem + 1.5vw, 3rem);
  --scale-fluid-7: clamp(3rem, 2.55rem + 1.5vw, 3.75rem);
  --scale-fluid-8: clamp(3.75rem, 3.3rem + 1.5vw, 4.5rem);
  --scale-fluid-9: clamp(4.5rem, 3.6rem + 3vw, 6rem);
  --scale-fluid-10: clamp(6rem, 4.8rem + 4vw, 8rem);
  --scale-fluid-000: clamp(0.625rem, 0.55rem + 0.25vw, 0.75rem);
  --scale-fluid-00: clamp(0.75rem, 0.675rem + 0.25vw, 0.875rem);
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;
  --line-none: 1;
  --line-xs: 1.125;
  --line-sm: 1.275;
  --line-md: 1.5;
  --line-lg: 1.625;
  --line-xl: 2;
  --letter-xs: -0.05em;
  --letter-sm: -0.025em;
  --letter-none: 0em;
  --letter-lg: 0.025em;
  --letter-xl: 0.05em;
  --prose-xs: 45ch;
  --prose-sm: 55ch;
  --prose-md: 65ch;
  --prose-lg: 75ch;
  --prose-xl: 85ch;
  --size-1: 4px;
  --size-2: 8px;
  --size-3: 12px;
  --size-4: 16px;
  --size-5: 20px;
  --size-6: 24px;
  --size-7: 28px;
  --size-8: 32px;
  --size-9: 36px;
  --size-10: 40px;
  --size-11: 44px;
  --size-12: 48px;
  --size-14: 56px;
  --size-16: 64px;
  --size-20: 80px;
  --size-24: 96px;
  --size-28: 112px;
  --size-32: 128px;
  --size-36: 144px;
  --size-40: 160px;
  --size-44: 176px;
  --size-48: 192px;
  --size-52: 208px;
  --size-56: 224px;
  --size-60: 240px;
  --size-64: 256px;
  --size-72: 288px;
  --size-80: 320px;
  --size-96: 384px;
  --size-px: 1px;
  --size-full: 100%;
  --size-screen: 100vw;
  --size-min: min-content;
  --size-max: max-content;
  --width-xs: 480px;
  --width-sm: 640px;
  --width-md: 768px;
  --width-lg: 1024px;
  --width-xl: 1280px;
  --ratio-square: 1/1;
  --ratio-portrait: 3/4;
  --ratio-landscape: 4/3;
  --ratio-tall: 2/3;
  --ratio-wide: 3/2;
  --ratio-widescreen: 16/9;
  --ratio-golden: 1.618/1;
  --radius-100: 100%;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  --blur-xs: blur(4px);
  --blur-sm: blur(8px);
  --blur-md: blur(16px);
  --blur-lg: blur(24px);
  --blur-xl: blur(40px);
  --layer-1: 10;
  --layer-2: 20;
  --layer-3: 30;
  --layer-4: 40;
  --layer-5: 50;
  --layer-below: -1;
  --layer-top: 2147483647;
  --shadow-xs: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 4px 6px -2px rgba(0, 0, 0, 0.1),
    0 2px 4px -2px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 12px 16px -4px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-lg: 0 20px 24px -4px rgba(0, 0, 0, 0.1),
    0 8px 8px -4px rgba(0, 0, 0, 0.04);
  --shadow-xl: 0 24px 48px -12px rgba(0, 0, 0, 0.25);
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --color-red-50: oklch(97.1% 0.013 17.38);
  --color-red-100: oklch(93.6% 0.032 17.717);
  --color-red-200: oklch(88.5% 0.062 18.334);
  --color-red-300: oklch(80.8% 0.114 19.571);
  --color-red-400: oklch(70.4% 0.191 22.216);
  --color-red-500: oklch(63.7% 0.237 25.331);
  --color-red-600: oklch(57.7% 0.245 27.325);
  --color-red-700: oklch(50.5% 0.213 27.518);
  --color-red-800: oklch(44.4% 0.177 26.899);
  --color-red-900: oklch(39.6% 0.141 25.723);
  --color-red-950: oklch(25.8% 0.092 26.042);
  --color-orange-50: oklch(98% 0.016 73.684);
  --color-orange-100: oklch(95.4% 0.038 75.164);
  --color-orange-200: oklch(90.1% 0.076 70.697);
  --color-orange-300: oklch(83.7% 0.128 66.29);
  --color-orange-400: oklch(75% 0.183 55.934);
  --color-orange-500: oklch(70.5% 0.213 47.604);
  --color-orange-600: oklch(64.6% 0.222 41.116);
  --color-orange-700: oklch(55.3% 0.195 38.402);
  --color-orange-800: oklch(47% 0.157 37.304);
  --color-orange-900: oklch(40.8% 0.123 38.172);
  --color-orange-950: oklch(26.6% 0.079 36.259);
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
  --color-lime-50: oklch(98.6% 0.031 120.757);
  --color-lime-100: oklch(96.7% 0.067 122.328);
  --color-lime-200: oklch(93.8% 0.127 124.321);
  --color-lime-300: oklch(89.7% 0.196 126.665);
  --color-lime-400: oklch(84.1% 0.238 128.85);
  --color-lime-500: oklch(76.8% 0.233 130.85);
  --color-lime-600: oklch(64.8% 0.2 131.684);
  --color-lime-700: oklch(53.2% 0.157 131.589);
  --color-lime-800: oklch(45.3% 0.124 130.933);
  --color-lime-900: oklch(40.5% 0.101 131.063);
  --color-lime-950: oklch(27.4% 0.072 132.109);
  --color-green-50: oklch(98.2% 0.018 155.826);
  --color-green-100: oklch(96.2% 0.044 156.743);
  --color-green-200: oklch(92.5% 0.084 155.995);
  --color-green-300: oklch(87.1% 0.15 154.449);
  --color-green-400: oklch(79.2% 0.209 151.711);
  --color-green-500: oklch(72.3% 0.219 149.579);
  --color-green-600: oklch(62.7% 0.194 149.214);
  --color-green-700: oklch(52.7% 0.154 150.069);
  --color-green-800: oklch(44.8% 0.119 151.328);
  --color-green-900: oklch(39.3% 0.095 152.535);
  --color-green-950: oklch(26.6% 0.065 152.934);
  --color-emerald-50: oklch(97.9% 0.021 166.113);
  --color-emerald-100: oklch(95% 0.052 163.051);
  --color-emerald-200: oklch(90.5% 0.093 164.15);
  --color-emerald-300: oklch(84.5% 0.143 164.978);
  --color-emerald-400: oklch(76.5% 0.177 163.223);
  --color-emerald-500: oklch(69.6% 0.17 162.48);
  --color-emerald-600: oklch(59.6% 0.145 163.225);
  --color-emerald-700: oklch(50.8% 0.118 165.612);
  --color-emerald-800: oklch(43.2% 0.095 166.913);
  --color-emerald-900: oklch(37.8% 0.077 168.94);
  --color-emerald-950: oklch(26.2% 0.051 172.552);
  --color-teal-50: oklch(98.4% 0.014 180.72);
  --color-teal-100: oklch(95.3% 0.051 180.801);
  --color-teal-200: oklch(91% 0.096 180.426);
  --color-teal-300: oklch(85.5% 0.138 181.071);
  --color-teal-400: oklch(77.7% 0.152 181.912);
  --color-teal-500: oklch(70.4% 0.14 182.503);
  --color-teal-600: oklch(60% 0.118 184.704);
  --color-teal-700: oklch(51.1% 0.096 186.391);
  --color-teal-800: oklch(43.7% 0.078 188.216);
  --color-teal-900: oklch(38.6% 0.063 188.416);
  --color-teal-950: oklch(27.7% 0.046 192.524);
  --color-cyan-50: oklch(98.4% 0.019 200.873);
  --color-cyan-100: oklch(95.6% 0.045 203.388);
  --color-cyan-200: oklch(91.7% 0.08 205.041);
  --color-cyan-300: oklch(86.5% 0.127 207.078);
  --color-cyan-400: oklch(78.9% 0.154 211.53);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-600: oklch(60.9% 0.126 221.723);
  --color-cyan-700: oklch(52% 0.105 223.128);
  --color-cyan-800: oklch(45% 0.085 224.283);
  --color-cyan-900: oklch(39.8% 0.07 227.392);
  --color-cyan-950: oklch(30.2% 0.056 229.695);
  --color-sky-50: oklch(97.7% 0.013 236.62);
  --color-sky-100: oklch(95.1% 0.026 236.824);
  --color-sky-200: oklch(90.1% 0.058 230.902);
  --color-sky-300: oklch(82.8% 0.111 230.318);
  --color-sky-400: oklch(74.6% 0.16 232.661);
  --color-sky-500: oklch(68.5% 0.169 237.323);
  --color-sky-600: oklch(58.8% 0.158 241.966);
  --color-sky-700: oklch(50% 0.134 242.749);
  --color-sky-800: oklch(44.3% 0.11 240.79);
  --color-sky-900: oklch(39.1% 0.09 240.876);
  --color-sky-950: oklch(29.3% 0.066 243.157);
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
  --color-indigo-50: oklch(96.2% 0.018 272.314);
  --color-indigo-100: oklch(93% 0.034 272.788);
  --color-indigo-200: oklch(87% 0.065 274.039);
  --color-indigo-300: oklch(78.5% 0.115 274.713);
  --color-indigo-400: oklch(67.3% 0.182 276.935);
  --color-indigo-500: oklch(58.5% 0.233 277.117);
  --color-indigo-600: oklch(51.1% 0.262 276.966);
  --color-indigo-700: oklch(45.7% 0.24 277.023);
  --color-indigo-800: oklch(39.8% 0.195 277.366);
  --color-indigo-900: oklch(35.9% 0.144 278.697);
  --color-indigo-950: oklch(25.7% 0.09 281.288);
  --color-violet-50: oklch(96.9% 0.016 293.756);
  --color-violet-100: oklch(94.3% 0.029 294.588);
  --color-violet-200: oklch(89.4% 0.057 293.283);
  --color-violet-300: oklch(81.1% 0.111 293.571);
  --color-violet-400: oklch(70.2% 0.183 293.541);
  --color-violet-500: oklch(60.6% 0.25 292.717);
  --color-violet-600: oklch(54.1% 0.281 293.009);
  --color-violet-700: oklch(49.1% 0.27 292.581);
  --color-violet-800: oklch(43.2% 0.232 292.759);
  --color-violet-900: oklch(38% 0.189 293.745);
  --color-violet-950: oklch(28.3% 0.141 291.089);
  --color-purple-50: oklch(97.7% 0.014 308.299);
  --color-purple-100: oklch(94.6% 0.033 307.174);
  --color-purple-200: oklch(90.2% 0.063 306.703);
  --color-purple-300: oklch(82.7% 0.119 306.383);
  --color-purple-400: oklch(71.4% 0.203 305.504);
  --color-purple-500: oklch(62.7% 0.265 303.9);
  --color-purple-600: oklch(55.8% 0.288 302.321);
  --color-purple-700: oklch(49.6% 0.265 301.924);
  --color-purple-800: oklch(43.8% 0.218 303.724);
  --color-purple-900: oklch(38.1% 0.176 304.987);
  --color-purple-950: oklch(29.1% 0.149 302.717);
  --color-fuchsia-50: oklch(97.7% 0.017 320.058);
  --color-fuchsia-100: oklch(95.2% 0.037 318.852);
  --color-fuchsia-200: oklch(90.3% 0.076 319.62);
  --color-fuchsia-300: oklch(83.3% 0.145 321.434);
  --color-fuchsia-400: oklch(74% 0.238 322.16);
  --color-fuchsia-500: oklch(66.7% 0.295 322.15);
  --color-fuchsia-600: oklch(59.1% 0.293 322.896);
  --color-fuchsia-700: oklch(51.8% 0.253 323.949);
  --color-fuchsia-800: oklch(45.2% 0.211 324.591);
  --color-fuchsia-900: oklch(40.1% 0.17 325.612);
  --color-fuchsia-950: oklch(29.3% 0.136 325.661);
  --color-pink-50: oklch(97.1% 0.014 343.198);
  --color-pink-100: oklch(94.8% 0.028 342.258);
  --color-pink-200: oklch(89.9% 0.061 343.231);
  --color-pink-300: oklch(82.3% 0.12 346.018);
  --color-pink-400: oklch(71.8% 0.202 349.761);
  --color-pink-500: oklch(65.6% 0.241 354.308);
  --color-pink-600: oklch(59.2% 0.249 0.584);
  --color-pink-700: oklch(52.5% 0.223 3.958);
  --color-pink-800: oklch(45.9% 0.187 3.815);
  --color-pink-900: oklch(40.8% 0.153 2.432);
  --color-pink-950: oklch(28.4% 0.109 3.907);
  --color-rose-50: oklch(96.9% 0.015 12.422);
  --color-rose-100: oklch(94.1% 0.03 12.58);
  --color-rose-200: oklch(89.2% 0.058 10.001);
  --color-rose-300: oklch(81% 0.117 11.638);
  --color-rose-400: oklch(71.2% 0.194 13.428);
  --color-rose-500: oklch(64.5% 0.246 16.439);
  --color-rose-600: oklch(58.6% 0.253 17.585);
  --color-rose-700: oklch(51.4% 0.222 16.935);
  --color-rose-800: oklch(45.5% 0.188 13.697);
  --color-rose-900: oklch(41% 0.159 10.272);
  --color-rose-950: oklch(27.1% 0.105 12.094);
  --color-slate-50: oklch(98.4% 0.003 247.858);
  --color-slate-100: oklch(96.8% 0.007 247.896);
  --color-slate-200: oklch(92.9% 0.013 255.508);
  --color-slate-300: oklch(86.9% 0.022 252.894);
  --color-slate-400: oklch(70.4% 0.04 256.788);
  --color-slate-500: oklch(55.4% 0.046 257.417);
  --color-slate-600: oklch(44.6% 0.043 257.281);
  --color-slate-700: oklch(37.2% 0.044 257.287);
  --color-slate-800: oklch(27.9% 0.041 260.031);
  --color-slate-900: oklch(20.8% 0.042 265.755);
  --color-slate-950: oklch(12.9% 0.042 264.695);
  --color-gray-50: oklch(98.5% 0.002 247.839);
  --color-gray-100: oklch(96.7% 0.003 264.542);
  --color-gray-200: oklch(92.8% 0.006 264.531);
  --color-gray-300: oklch(87.2% 0.01 258.338);
  --color-gray-400: oklch(70.7% 0.022 261.325);
  --color-gray-500: oklch(55.1% 0.027 264.364);
  --color-gray-600: oklch(44.6% 0.03 256.802);
  --color-gray-700: oklch(37.3% 0.034 259.733);
  --color-gray-800: oklch(27.8% 0.033 256.848);
  --color-gray-900: oklch(21% 0.034 264.665);
  --color-gray-950: oklch(13% 0.028 261.692);
  --color-zinc-50: oklch(98.5% 0 0);
  --color-zinc-100: oklch(96.7% 0.001 286.375);
  --color-zinc-200: oklch(92% 0.004 286.32);
  --color-zinc-300: oklch(87.1% 0.006 286.286);
  --color-zinc-400: oklch(70.5% 0.015 286.067);
  --color-zinc-500: oklch(55.2% 0.016 285.938);
  --color-zinc-600: oklch(44.2% 0.017 285.786);
  --color-zinc-700: oklch(37% 0.013 285.805);
  --color-zinc-800: oklch(27.4% 0.006 286.033);
  --color-zinc-900: oklch(21% 0.006 285.885);
  --color-zinc-950: oklch(14.1% 0.005 285.823);
  --color-neutral-50: oklch(98.5% 0 0);
  --color-neutral-100: oklch(97% 0 0);
  --color-neutral-200: oklch(92.2% 0 0);
  --color-neutral-300: oklch(87% 0 0);
  --color-neutral-400: oklch(70.8% 0 0);
  --color-neutral-500: oklch(55.6% 0 0);
  --color-neutral-600: oklch(43.9% 0 0);
  --color-neutral-700: oklch(37.1% 0 0);
  --color-neutral-800: oklch(26.9% 0 0);
  --color-neutral-900: oklch(20.5% 0 0);
  --color-neutral-950: oklch(14.5% 0 0);
  --color-stone-50: oklch(98.5% 0.001 106.423);
  --color-stone-100: oklch(97% 0.001 106.424);
  --color-stone-200: oklch(92.3% 0.003 48.717);
  --color-stone-300: oklch(86.9% 0.005 56.366);
  --color-stone-400: oklch(70.9% 0.01 56.259);
  --color-stone-500: oklch(55.3% 0.013 58.071);
  --color-stone-600: oklch(44.4% 0.011 73.639);
  --color-stone-700: oklch(37.4% 0.01 67.558);
  --color-stone-800: oklch(26.8% 0.007 34.298);
  --color-stone-900: oklch(21.6% 0.006 56.043);
  --color-stone-950: oklch(14.7% 0.004 49.25);
  --color-mauve-50: oklch(98.5% 0 0);
  --color-mauve-100: oklch(96% 0.003 325.6);
  --color-mauve-200: oklch(92.2% 0.005 325.62);
  --color-mauve-300: oklch(86.5% 0.012 325.68);
  --color-mauve-400: oklch(71.1% 0.019 323.02);
  --color-mauve-500: oklch(54.2% 0.034 322.5);
  --color-mauve-600: oklch(43.5% 0.029 321.78);
  --color-mauve-700: oklch(36.4% 0.029 323.89);
  --color-mauve-800: oklch(26.3% 0.024 320.12);
  --color-mauve-900: oklch(21.2% 0.019 322.12);
  --color-mauve-950: oklch(14.5% 0.008 326);
  --color-olive-50: oklch(98.8% 0.003 106.5);
  --color-olive-100: oklch(96.6% 0.005 106.5);
  --color-olive-200: oklch(93% 0.007 106.5);
  --color-olive-300: oklch(88% 0.011 106.6);
  --color-olive-400: oklch(73.7% 0.021 106.9);
  --color-olive-500: oklch(58% 0.031 107.3);
  --color-olive-600: oklch(46.6% 0.025 107.3);
  --color-olive-700: oklch(39.4% 0.023 107.4);
  --color-olive-800: oklch(28.6% 0.016 107.4);
  --color-olive-900: oklch(22.8% 0.013 107.4);
  --color-olive-950: oklch(15.3% 0.006 107.1);
  --color-mist-50: oklch(98.7% 0.002 197.1);
  --color-mist-100: oklch(96.3% 0.002 197.1);
  --color-mist-200: oklch(92.5% 0.005 214.3);
  --color-mist-300: oklch(87.2% 0.007 219.6);
  --color-mist-400: oklch(72.3% 0.014 214.4);
  --color-mist-500: oklch(56% 0.021 213.5);
  --color-mist-600: oklch(45% 0.017 213.2);
  --color-mist-700: oklch(37.8% 0.015 216);
  --color-mist-800: oklch(27.5% 0.011 216.9);
  --color-mist-900: oklch(21.8% 0.008 223.9);
  --color-mist-950: oklch(14.8% 0.004 228.8);
  --color-taupe-50: oklch(98.6% 0.002 67.8);
  --color-taupe-100: oklch(96% 0.002 17.2);
  --color-taupe-200: oklch(92.2% 0.005 34.3);
  --color-taupe-300: oklch(86.8% 0.007 39.5);
  --color-taupe-400: oklch(71.4% 0.014 41.2);
  --color-taupe-500: oklch(54.7% 0.021 43.1);
  --color-taupe-600: oklch(43.8% 0.017 39.3);
  --color-taupe-700: oklch(36.7% 0.016 35.7);
  --color-taupe-800: oklch(26.8% 0.011 36.5);
  --color-taupe-900: oklch(21.4% 0.009 43.1);
  --color-taupe-950: oklch(14.7% 0.004 49.3);
  --color-black: #000;
  --color-white: #fff;
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-page-width: var(--width-xl);
  --grid-page-gutter: 5vw;
  --grid-page-main: 2 / 3;
  --grid-page: minmax(var(--grid-page-gutter), 1fr) minmax(0, var(--grid-page-width)) minmax(var(--grid-page-gutter), 1fr);
}


html,
html.light {
  color-scheme: light;
}

html.dark {
  --background: var(--color-zinc-900);
  --foreground: var(--color-zinc-200);
  --muted: var(--color-zinc-700);
  --muted-foreground: var(--color-zinc-400);
  --border: var(--color-zinc-700);
  /* dark chips already read as muted at zinc-400, so keep the prior value */
  --unavailable-foreground: var(--color-zinc-400);
  --surface: var(--color-zinc-800);
  --surface-foreground: var(--color-zinc-200);
  --primary: var(--color-violet-400);
  --primary-foreground: var(--color-violet-950);
  --primary-hover: var(--color-violet-300);
  --primary-muted: var(--color-violet-950);
  --primary-muted-foreground: var(--color-violet-200);
  --accent: var(--color-zinc-700);
  --accent-foreground: var(--color-zinc-100);
  --ring: var(--color-violet-400);
  --destructive: var(--color-red-400);
  --destructive-foreground: var(--color-red-950);
  --success: var(--color-emerald-400);
  --success-foreground: var(--color-emerald-950);
  --warning: var(--color-amber-400);
  --warning-foreground: var(--color-amber-950);
  /* the reversed mark, Stripe's other sanctioned treatment (see :root) */
  --stripe-mark: #fff;
  /* violet-900 sits above --surface here, where violet-100/950 would sink */
  --saving: var(--color-violet-900);
  --saving-foreground: var(--color-violet-100);

  /* The accents step up in both lightness and chroma to hold a dark page. Each
     against its own --accent-tint fill on --background: edit 5.51:1, results
     5.83:1, share 5.50:1. Bare on --background: 6.93, 7.36, 6.88. On --surface:
     5.82, 6.18, 5.78. Tint and hairline both go up: 10% of a hue over zinc-900
     is almost nothing where over zinc-100 it reads. */
  --accent-edit: oklch(72% 0.108 293);
  --accent-results: oklch(72% 0.108 224);
  --accent-share: oklch(72% 0.108 41);
  --accent-tint: 14%;
  --accent-line: 32%;

  --selection: var(--color-violet-900);
  --selection-foreground: var(--color-violet-100);

  /* Light from inside the top edge rather than a shadow under the card: on a
     --surface darker than its own border, a drop shadow reads as nothing. 18%
     white lands at #4e4e51, clearly above the zinc-700 border at #3f3f46 —
     below that the highlight and the border are the same line. */
  --card-lift: inset 0 1px 0 oklch(100% 0 0 / 0.18);

  color-scheme: dark;
}

/* System theme uses media query setting same variables as dark theme.

   Selected on the absence of a THEME class rather than the absence of any class
   at all. html:not([class]), html[class=""] was the earlier form and it meant
   any script that ever added an unrelated class to the root element turned dark
   mode off for every visitor on the system setting, silently and site-wide —
   which is exactly what a landing-page reveal class did. This form matches
   everything the old pair matched and cannot be broken from the outside.

   No conflict with html.dark: where the class is present, both :not() tests
   fail and this block simply does not apply. */
@media (prefers-color-scheme: dark) {

  html:not(.light):not(.dark) {
    --background: var(--color-zinc-900);
    --foreground: var(--color-zinc-200);
    --muted: var(--color-zinc-700);
    --muted-foreground: var(--color-zinc-400);
    --border: var(--color-zinc-700);
    /* dark chips already read as muted at zinc-400, so keep the prior value */
    --unavailable-foreground: var(--color-zinc-400);
    --surface: var(--color-zinc-800);
    --surface-foreground: var(--color-zinc-200);
    --primary: var(--color-violet-400);
    --primary-foreground: var(--color-violet-950);
    --primary-hover: var(--color-violet-300);
    --primary-muted: var(--color-violet-950);
    --primary-muted-foreground: var(--color-violet-200);
    --accent: var(--color-zinc-700);
    --accent-foreground: var(--color-zinc-100);
    --ring: var(--color-violet-400);
    --destructive: var(--color-red-400);
    --destructive-foreground: var(--color-red-950);
    --success: var(--color-emerald-400);
    --success-foreground: var(--color-emerald-950);
    --warning: var(--color-amber-400);
    --warning-foreground: var(--color-amber-950);
    /* the reversed mark, Stripe's other sanctioned treatment (see :root) */
    --stripe-mark: #fff;
    /* violet-900 sits above --surface here, where violet-100/950 would sink */
    --saving: var(--color-violet-900);
    --saving-foreground: var(--color-violet-100);

    /* see html.dark for the ratios; kept in step with it by hand */
    --accent-edit: oklch(72% 0.108 293);
    --accent-results: oklch(72% 0.108 224);
    --accent-share: oklch(72% 0.108 41);
    --accent-tint: 14%;
    --accent-line: 32%;

    --selection: var(--color-violet-900);
    --selection-foreground: var(--color-violet-100);

    --card-lift: inset 0 1px 0 oklch(100% 0 0 / 0.18);

    color-scheme: dark;
  }
}

/* reset
   https://www.joshwcomeau.com/css/custom-css-reset/
*/

/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Increase line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

/* reset end */

html,
body {
  color: var(--foreground);
  background-color: var(--background);
  font-family: var(--font-sans);
}

::selection {
  background-color: var(--selection);
  color: var(--selection-foreground);
}

/* The site chrome styled no focus state, so the brand lockup and the theme
   button fell back to the UA ring while everything below them wore --ring: one
   keyboard pass, two ring designs. Stated here rather than per component so
   anything added to the chrome later inherits it. */
.site-header :focus-visible,
.site-footer :focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* the site footer sticks to the viewport bottom on short pages: chrome pads
   itself (not body), so pages with their own header (.editor-header) keep
   their spacing untouched */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.icon {
  --icon: none;
  --icon-size: 1.25em;
  display: inline-block;
  width: var(--icon-size);
  height: var(--icon-size);
  background-color: currentColor;
  flex-shrink: 0;
  /* optical baseline for icons sitting inline with text; ignored in flex */
  vertical-align: -0.25em;
  mask: var(--icon) no-repeat center / 100% 100%;
  -webkit-mask: var(--icon) no-repeat center / 100% 100%;
}

.theme-switcher {
  .theme-button {
    display: inline-flex;
    padding: var(--size-2);
    cursor: pointer;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border);
    background-color: var(--surface);
    color: var(--muted-foreground);
    transition: background-color 0.1s var(--ease-out-quad),
      color 0.1s var(--ease-out-quad),
      transform 0.12s var(--ease-in-out-quad);

    &:hover {
      background-color: var(--accent);
      color: var(--accent-foreground);
    }

    /* Nothing in the chrome acknowledged a press. Transform only, so the
       neighbouring lockup never shifts. */
    &:active {
      transform: translateY(1px);
    }
  }

  /* glyph follows the theme class on <html>; no class = system */
  .theme-icon {
    --icon-size: 1em;
    --icon: var(--icon-monitor);
  }

  :root.light & .theme-icon {
    --icon: var(--icon-sun);
  }

  :root.dark & .theme-icon {
    --icon: var(--icon-moon);
  }
}

/* Site chrome ------------------------------------------------------------ */

/* Brand-left, controls-right header for public pages (landing). Classed so
   it never leaks onto the editor's own .editor-header. */
.site-header {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  padding: var(--size-5);
}

.site-header .theme-switcher {
  margin-inline-start: auto;
}

/* brand lockup, leftmost in the header: glyph mark + wordmark. No pill —
   it should read as the site's name, not another control */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2);
  margin-inline-end: var(--size-2);
  /* the wordmark reads as a logotype: the display face, bold, tightened */
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-sm);
  color: var(--foreground);
  text-decoration: none;
}

/* Sized in em so the one inlined component fits the header, the fill footer,
   and the license wordmark alike; coloured --primary so the mark carries the
   brand while wordmark text stays foreground. */
.logo-mark {
  inline-size: 1.05em;
  block-size: 1.05em;
  flex-shrink: 0;
  color: var(--primary);
}

/* the header lockup gets the full-size mark, taller than its text line */
.brand .logo-mark {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* Stripe's wordmark, used inline as a trust badge in place of the word
   "Stripe". Sized in em like .logo-mark, for the same reason: one inlined
   component that fits whatever text it lands in.

   The viewBox is cropped flush to the glyph bounds, and those bounds run from
   the ascenders down to the descender of the "p", so the box is the wordmark's
   full vertical extent rather than its cap height. That makes the box a poor
   thing to size directly: what has to match the text is the ink above the
   baseline, which is 81.9% of the box (the other 18.1% is the descender).

   Matched to the surrounding x-height the mark reads short, because the
   sentence around it carries capitals and ascenders that set the line's
   apparent height. Matched to the full box at ~1em it overshoots and, in a
   face this heavy, reads as a dense blob rather than a word. 0.92em puts its
   ascender at 0.753em, landing on system-ui's own ascender, so the wordmark
   and the text next to it top out together.

   The baseline offset is that same 18.1% applied to the height. Change one and
   the other has to follow, or the mark stops sitting on the baseline. */
.stripe-wordmark {
  display: inline-block;
  inline-size: auto;
  block-size: 0.92em;
  vertical-align: -0.167em;
  /* the cropped viewBox sits flush to the first glyph, losing the left
     side-bearing a letter normally carries; this puts it back, so the gap
     after the preceding word reads as a space rather than a collision. */
  margin-inline-start: 0.1em;
  color: var(--stripe-mark);
}

/* Quiet utility footer: everything centered and muted, links brightening on
   hover; margin-block-start auto bottoms it on short pages (flex body). */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--size-4);
  margin-block-start: auto;
  padding: var(--size-10) var(--size-5) var(--size-5);
  font-size: var(--scale-00);
  color: var(--muted-foreground);

  nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-4);
  }

  a {
    color: var(--muted-foreground);

    &:hover {
      color: var(--foreground);
    }
  }
}