/*
! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
*/

/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box;
  /* 1 */
  border-width: 0;
  /* 2 */
  border-style: solid;
  /* 2 */
  border-color: currentColor;
  /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -moz-tab-size: 4;
  /* 3 */
  -o-tab-size: 4;
     tab-size: 4;
  /* 3 */
  font-family: nunito-sans, sans-serif;
  /* 4 */
  font-feature-settings: normal;
  /* 5 */
  font-variation-settings: normal;
  /* 6 */
  -webkit-tap-highlight-color: transparent;
  /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0;
  /* 1 */
  line-height: inherit;
  /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0;
  /* 1 */
  color: inherit;
  /* 2 */
  border-top-width: 1px;
  /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ff-nuvo-mono-web-pro, monospace;
  /* 1 */
  font-feature-settings: normal;
  /* 2 */
  font-variation-settings: normal;
  /* 3 */
  font-size: 1em;
  /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0;
  /* 1 */
  border-color: inherit;
  /* 2 */
  border-collapse: collapse;
  /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-feature-settings: inherit;
  /* 1 */
  font-variation-settings: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  font-weight: inherit;
  /* 1 */
  line-height: inherit;
  /* 1 */
  letter-spacing: inherit;
  /* 1 */
  color: inherit;
  /* 1 */
  margin: 0;
  /* 2 */
  padding: 0;
  /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button;
  /* 1 */
  background-color: transparent;
  /* 2 */
  background-image: none;
  /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/

dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1;
  /* 1 */
  color: #9ca3af;
  /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/

:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  /* 1 */
  vertical-align: middle;
  /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */

[hidden] {
  display: none;
}

*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

.container {
  width: 100%;
}

@media (min-width: 480px) {
  .container {
    max-width: 480px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}

@media (min-width: 976px) {
  .container {
    max-width: 976px;
  }
}

@media (min-width: 1440px) {
  .container {
    max-width: 1440px;
  }
}

.pointer-events-none {
  pointer-events: none;
}

.visible {
  visibility: visible;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-x-0 {
  left: 0px;
  right: 0px;
}

.bottom-0 {
  bottom: 0px;
}

.bottom-16 {
  bottom: 4rem;
}

.bottom-auto {
  bottom: auto;
}

.right-\[-180px\] {
  right: -180px;
}

.top-0 {
  top: 0px;
}

.top-20 {
  top: 5rem;
}

.top-auto {
  top: auto;
}

.z-0 {
  z-index: 0;
}

.z-10 {
  z-index: 10;
}

.z-20 {
  z-index: 20;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.z-50 {
  z-index: 50;
}

.z-\[51\] {
  z-index: 51;
}

.col-span-2 {
  grid-column: span 2 / span 2;
}

.m-10 {
  margin: 2.5rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-20 {
  margin-bottom: 5rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-40 {
  margin-bottom: 10rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-3 {
  margin-left: 0.75rem;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-20 {
  margin-top: 5rem;
}

.flex {
  display: flex;
}

.hidden {
  display: none;
}

.h-64 {
  height: 16rem;
}

.h-\[33px\] {
  height: 33px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-\[200px\] {
  max-height: 200px;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-full {
  max-height: 100%;
}

.min-h-full {
  min-height: 100%;
}

.w-10 {
  width: 2.5rem;
}

.w-64 {
  width: 16rem;
}

.w-\[179px\] {
  width: 179px;
}

.w-\[200px\] {
  width: 200px;
}

.w-full {
  width: 100%;
}

.max-w-\[1200px\] {
  max-width: 1200px;
}

.max-w-\[600px\] {
  max-width: 600px;
}

.max-w-screen-md {
  max-width: 768px;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink {
  flex-shrink: 1;
}

.translate-y-full {
  --tw-translate-y: 100%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-90 {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.cursor-pointer {
  cursor: pointer;
}

.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

.resize {
  resize: both;
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-nowrap {
  flex-wrap: nowrap;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-10 {
  gap: 2.5rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.self-end {
  align-self: flex-end;
}

.overflow-auto {
  overflow: auto;
}

.overflow-visible {
  overflow: visible;
}

.overflow-y-auto {
  overflow-y: auto;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.border {
  border-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l-2 {
  border-left-width: 2px;
}

.border-gray {
  --tw-border-opacity: 1;
  border-color: rgb(230 230 230 / var(--tw-border-opacity));
}

.border-gray-light {
  --tw-border-opacity: 1;
  border-color: rgb(240 240 240 / var(--tw-border-opacity));
}

.bg-gray-light {
  --tw-bg-opacity: 1;
  background-color: rgb(240 240 240 / var(--tw-bg-opacity));
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-yellow {
  --tw-bg-opacity: 1;
  background-color: rgb(255 200 44 / var(--tw-bg-opacity));
}

.p-2 {
  padding: 0.5rem;
}

.p-8 {
  padding: 2rem;
}

.px-10 {
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-32 {
  padding-bottom: 8rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pr-2 {
  padding-right: 0.5rem;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-32 {
  padding-top: 8rem;
}

.pt-44 {
  padding-top: 11rem;
}

.pt-60 {
  padding-top: 15rem;
}

.text-center {
  text-align: center;
}

.font-section-title {
  font-family: paradigm-pro, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-5xl {
  font-size: 3rem;
  line-height: 1;
}

.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}

.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}

.font-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.font-light {
  font-weight: 300;
}

.text-gray-dark {
  --tw-text-opacity: 1;
  color: rgb(39 52 68 / var(--tw-text-opacity));
}

.text-purple-dark {
  --tw-text-opacity: 1;
  color: rgb(114 68 145 / var(--tw-text-opacity));
}

.opacity-0 {
  opacity: 0;
}

.opacity-70 {
  opacity: 0.7;
}

.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-up {
  --tw-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  --tw-shadow-colored: 0px 5px 15px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.outline {
  outline-style: solid;
}

.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
          backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* Markdown Styles */

.md h1, .md h2, .md h3, .md h4 {
}

.md h1 {
  font-size: var(--typo-subheader-size);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 1rem;
}

.md h1.cli-header {
  margin: 0 0 4rem;
}

.md h1.cli-header code {
  padding: 0.3rem 0.8rem 0.4rem;
  background-color: rgba(36, 37, 47, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5rem;
  color: rgba(255, 255, 255, 1);
  -webkit-text-fill-color: rgba(255, 255, 255, 1);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
  display: inline-block;
  line-height: 1.2;
}

.md h2 {
  font-weight: 700;
  font-size: 1.5rem;
}

.md h2.cli-subheader {
  margin: 0 0 1rem;
}

.md h3, .md h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.md p:not(:empty) {
  margin: 0 0 2rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.8);
}

.md a.cli-header-link,
.md a.docs-section-anchor {
  scroll-margin-top: 100px;
}

.md a.cli-header-link:hover {
  text-decoration: none;
}

.md blockquote {
  margin: 2rem 0;
  padding-left: 2rem;
  font-style: italic;
  color: var(--color-typography-secondary);
  border-left: 2px solid var(--color-primary-cta-highlight);
}

.md blockquote p:not(:empty) {
  padding: 0;
}

#docs .md blockquote,
#cli .md blockquote {
  border: 1px solid rgba(254, 131, 0, 0.4);
  background-color: rgba(264, 131, 0, 0.1);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
}

#docs .md blockquote p:last-child,
#cli .md blockquote p:last-child {
  margin: 0;
}

.md code {
  background-color: rgba(36, 37, 47, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0.5rem;
  padding: 0.1rem 0.28rem 0.2rem;
  margin: 0;
  color: rgba(255, 255, 255, 1);
}

.md pre code {
  background-color: rgba(36, 37, 47, 0.4);
  margin: 0 0 2rem;
  padding: 1.5rem;
}

.md ul {
  display: flex;
  list-style-type: disc;
  flex-direction: column;
  line-height: 2.5;
  color: rgba(255, 255, 255, 0.8);
}

.md ul li {
  margin-bottom: 1rem;
  padding-left: 1rem;
  list-style-position: inside;
}

.md ul li:last-child {
  margin-bottom: 0;
}

.md a {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(167 106 207 / var(--tw-text-opacity));
}

.md a:hover {
  text-decoration-line: underline;
}

/* Product tour page — page-level layout. Frame + annotation styles: added in Task 2. */

.product-page {
  width: 100%;
  overflow-x: clip;
  /* The width every frame is laid out at before fit() scales it. Lives here,
     not on .product-frame, because the stacked breakpoint sizes the column
     from it as well, and the two have to be the same number to line up. */
  --pf-dw: 33.5rem;
  /* #product is the nav's anchor target; clear the fixed nav on jump.
     Matches the offset used for docs headings in markdown.css. */
  scroll-margin-top: 100px;
}

/* ============ Callout marker positions ============ */

/* Every numbered marker is placed as a percentage of its frame — x across the
   width, y down the height. These are the knobs: nudge a value to move a marker.
   Grouped by section; the number matches the badge shown on the frame. The
   wiring rules below feed each variable to its marker — no need to touch those. */

.product-page {
  /* Editor — "A powerful, dynamic editor for your website." */
  --m-editor-1-x: 34%;
  --m-editor-1-y: 9.6%;
  --m-editor-2-x: 42%;
  --m-editor-2-y: 76%;
  --m-editor-3-x: 75%;
  --m-editor-3-y: 66%;
  --m-editor-4-x: 68.1%;
  --m-editor-4-y: 20.9%;
  /* Prompt — "Describe what you want: Get real websites." */
  --m-prompt-1-x: 97%;
  --m-prompt-1-y: 21%;
  --m-prompt-2-x: 97%;
  --m-prompt-2-y: 56%;
  --m-prompt-3-x: 64%;
  --m-prompt-3-y: 88.5%;
  /* Settings — "Your site, your settings." (1 GitHub, 2 deploys, 3 DNS) */
  --m-settings-1-x: 42%;
  --m-settings-1-y: 26%;
  --m-settings-2-x: 68%;
  --m-settings-2-y: 50%;
  --m-settings-3-x: 73%;
  --m-settings-3-y: 78%;
  /* Media — "Media that just works." */
  --m-media-1-x: 94.7%;
  --m-media-1-y: 32.8%;
  --m-media-2-x: 94.7%;
  --m-media-2-y: 59.5%;
  --m-media-3-x: 73%;
  --m-media-3-y: 76.7%;
  /* History — "Every change, tracked forever." */
  --m-history-1-x: 94.7%;
  --m-history-1-y: 35.2%;
  --m-history-2-x: 94.7%;
  --m-history-2-y: 72.6%;
  --m-history-3-x: 76.7%;
  --m-history-3-y: 84%;
}

/* Wiring: feed each frame's markers from the variables above. */

.product-frame--shell .callout-marker[data-callout="1"] {
  --cx: var(--m-editor-1-x);
  --cy: var(--m-editor-1-y);
}

.product-frame--shell .callout-marker[data-callout="2"] {
  --cx: var(--m-editor-2-x);
  --cy: var(--m-editor-2-y);
}

.product-frame--shell .callout-marker[data-callout="3"] {
  --cx: var(--m-editor-3-x);
  --cy: var(--m-editor-3-y);
}

.product-frame--shell .callout-marker[data-callout="4"] {
  --cx: var(--m-editor-4-x);
  --cy: var(--m-editor-4-y);
}

.product-frame--prompt .callout-marker[data-callout="1"] {
  --cx: var(--m-prompt-1-x);
  --cy: var(--m-prompt-1-y);
}

.product-frame--prompt .callout-marker[data-callout="2"] {
  --cx: var(--m-prompt-2-x);
  --cy: var(--m-prompt-2-y);
}

.product-frame--prompt .callout-marker[data-callout="3"] {
  --cx: var(--m-prompt-3-x);
  --cy: var(--m-prompt-3-y);
}

.product-frame--settings .callout-marker[data-callout="1"] {
  --cx: var(--m-settings-1-x);
  --cy: var(--m-settings-1-y);
}

.product-frame--settings .callout-marker[data-callout="2"] {
  --cx: var(--m-settings-2-x);
  --cy: var(--m-settings-2-y);
}

.product-frame--settings .callout-marker[data-callout="3"] {
  --cx: var(--m-settings-3-x);
  --cy: var(--m-settings-3-y);
}

.product-frame--media .callout-marker[data-callout="1"] {
  --cx: var(--m-media-1-x);
  --cy: var(--m-media-1-y);
}

.product-frame--media .callout-marker[data-callout="2"] {
  --cx: var(--m-media-2-x);
  --cy: var(--m-media-2-y);
}

.product-frame--media .callout-marker[data-callout="3"] {
  --cx: var(--m-media-3-x);
  --cy: var(--m-media-3-y);
}

.product-frame--history .callout-marker[data-callout="1"] {
  --cx: var(--m-history-1-x);
  --cy: var(--m-history-1-y);
}

.product-frame--history .callout-marker[data-callout="2"] {
  --cx: var(--m-history-2-x);
  --cy: var(--m-history-2-y);
}

.product-frame--history .callout-marker[data-callout="3"] {
  --cx: var(--m-history-3-x);
  --cy: var(--m-history-3-y);
}

/* Give the two masthead lines a little breathing room so the "you"
   descenders don't collide with the "build" ascenders. Scoped to the
   product hero so the homepage's identical hero is unaffected. */

.product-hero .hero-line-2 {
  margin-top: 0.12em;
}

/* On phones the shared hero sizing leaves the hero message small and
   floating in the masthead. Let it fill the width like the frames below —
   trim the padding and push the viewport-relative sizes up. The rem caps are
   unchanged, so the desktop hero stays exactly as it is. Scoped to
   .product-hero so the homepage masthead is untouched. */

@media (max-width: 768px) {
  .product-hero .hero-message {
    padding: 0 0.25rem;
  }
}

.product-section {
  width: 100%;
  max-width: 1200px;
  margin: 8rem auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: center;
}

.product-section.frame-left {
  direction: rtl;
}

.product-section.frame-left > * {
  direction: ltr;
}

.product-copy {
  max-width: 32rem;
}

.product-cta {
  margin-top: 4rem;
}

/* On the homepage the tour is a mid-page band rather than a whole page: tighten
   the leading and trailing gaps so it reads as one run of sections between the
   prompt CTA above and the benefit row below. */

.product-page > .product-section:first-of-type {
  margin-top: 4rem;
}

.product-page > .product-section:last-of-type {
  margin-bottom: 4rem;
}

@media (max-width: 768px) {
  .product-section {
    /* minmax(0, …) — not a bare 1fr — so the single column can shrink below
       the frame's fixed design width. Otherwise the frame's min-content pins
       the column at --pf-dw (536px), overflowing the phone and clipping the
       copy; here it lets the column match the viewport so the copy wraps and
       fit() scales the frame down with zoom. */
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    margin: 5rem auto;
    /* Stacked, the copy, the frame and the legend are one column, so the
       column stops at the width the frame stops at. Without this the section
       kept growing while the frame held at --pf-dw and margin-inline centered
       it, so from 601px up the frame drifted right while the copy above and
       the legend below stayed on the left edge. Capping here keeps all three
       on one edge and centers the section instead, which is what every other
       band on the site already does. */
    max-width: calc(var(--pf-dw) + 4rem);
  }

  .product-section.frame-left {
    direction: ltr;
  }
}

/* ============ Product frames: editor design tokens (scoped) ============ */

.product-frame {
  --pf-canvas: #13111c;
  --pf-panel: #1c1c1c;
  --pf-panel-2: #121212;
  --pf-glass: rgba(255, 255, 255, 0.06);
  --pf-glass-strong: rgba(255, 255, 255, 0.1);
  --pf-hairline: rgba(255, 255, 255, 0.1);
  --pf-text: #f5f5f5;
  --pf-text-dim: #cccccc;
  --pf-cta: linear-gradient(180deg, #fe8300 0%, #ff3c00 100%);
  --pf-unsynced: rgba(254, 131, 0, 1);
  --pf-ok: #00d676;
  --pf-warn: #ffbf00;
  --pf-err: #ff3c00;
  --pf-violet: rgba(139, 92, 246, 1);
  --pf-teal: #7ec8b8;
  --pf-purple: #b87fd4;
  position: relative;
  border-radius: 1rem;
  background: var(--pf-canvas);
  border: 1px solid var(--pf-hairline);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  color: var(--pf-text);
  font-family:
    system-ui,
    -apple-system,
    "SF Pro",
    sans-serif;
  font-size: 0.8125rem;
  overflow: hidden;
  isolation: isolate;
  /* Frames are laid out at a fixed design width and scaled as a whole to fit
     their column (zoom set by the fit() script). Because the internal layout
     never reflows, the callout markers — pinned in % of the frame — stay
     aligned to their targets at every window size. --pf-dw matches the widest
     column, so zoom is 1 at the largest layout and only ever scales down. */
  width: var(--pf-dw, 33.5rem);
  margin-inline: auto;
  zoom: var(--pf-zoom, 1);
}

/* Ambient glow behind a frame's content (product signature) */

.product-frame-glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 120%;
  background: radial-gradient(
    circle at 30% 20%,
    rgba(255, 0, 150, 0.25) 0%,
    rgba(0, 200, 255, 0.18) 35%,
    rgba(0, 255, 100, 0.12) 55%,
    transparent 70%
  );
  filter: blur(40px);
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* Frosted panel + chrome primitives reused across frames */

.pf-glass {
  background: var(--pf-glass);
  border: 1px solid var(--pf-hairline);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  border-radius: 0.5rem;
}

.pf-cta {
  background: var(--pf-cta);
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  font-weight: 700;
  padding: 0 1rem;
  height: 2.25rem;
  box-shadow: 0 0 12px rgba(255, 60, 0, 0.2);
}

.pf-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 999px;
  margin-right: 0.4rem;
}

.pf-dot.ok {
  background: var(--pf-ok);
}

.pf-dot.warn {
  background: var(--pf-warn);
}

.pf-dot.err {
  background: var(--pf-err);
}

.pf-toggle {
  width: 2.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: var(--pf-violet);
  position: relative;
}

.pf-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 1rem;
  height: 1rem;
  border-radius: 999px;
  background: #fff;
}

.pf-input {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--pf-hairline);
  border-radius: 0.375rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  color: var(--pf-text);
  display: flex;
  align-items: center;
}

.pf-unsynced {
  color: var(--pf-unsynced);
}

/* ============ Annotated callouts ============ */

.product-frame-wrap {
  position: relative;
}

.callout-marker {
  position: absolute;
  left: var(--cx);
  top: var(--cy);
  transform: translate(-50%, -50%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 999px;
  background: var(--pf-cta, linear-gradient(180deg, #fe8300, #ff3c00));
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid rgba(0, 0, 0, 0.6);
  box-shadow:
    0 0 0 3px rgba(255, 131, 0, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.5);
  cursor: default;
  z-index: 4;
}

.callout-marker.callout-active {
  box-shadow:
    0 0 0 5px rgba(255, 131, 0, 0.45),
    0 2px 10px rgba(0, 0, 0, 0.6);
}

/* A ring that radiates outward from the active marker on an infinite loop.
   Kept to a modest scale so it never clips against the frame's overflow. */

.callout-marker.callout-active::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 999px;
  border: 2px solid rgba(255, 131, 0, 0.6);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .callout-marker.callout-active::after {
    animation: callout-radiate 1.6s ease-out infinite;
  }
}

@keyframes callout-radiate {
  0% {
    transform: scale(0.9);
    opacity: 0.85;
  }

  100% {
    transform: scale(1.85);
    opacity: 0;
  }
}

.callout-legend {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.callout-item {
  color: var(--color-typography-secondary);
  font-size: 0.95rem;
  line-height: 1.4;
  padding-left: 0.25rem;
  cursor: default;
}

.callout-item b {
  display: inline-grid;
  place-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
  border-radius: 999px;
  background: rgba(255, 131, 0, 0.18);
  color: var(--color-primary-cta-highlight);
  font-size: 0.75rem;
}

.callout-item.callout-active {
  color: var(--color-typography-primary);
}

/* Spotlight the active callout on hover: the targeted region stays in full
   color while the rest of the frame dims and desaturates. No outline — the
   contrast does the pointing. Everything reverts on mouse-out.

   Each rule dims the "off-path" branches — direct children (of the frame, or
   of any element that contains the active target) that neither are nor contain
   the active target. Dimming the top of each off-path branch lets the filter
   cascade to its descendants without compounding, and keeps the active
   target's whole ancestor chain in full color. Markers are dimmed separately
   so their reveal-delayed opacity transition never gates the hover response. */

.product-frame.is-focusing
  > :not(:has(.callout-active)):not(.callout-active):not(.callout-marker),
.product-frame.is-focusing
  :has(.callout-active)
  > :not(:has(.callout-active)):not(.callout-active):not(.callout-marker) {
  filter: grayscale(0.92) brightness(0.6);
  opacity: 0.5;
}

.product-frame.is-focusing .callout-marker:not(.callout-active) {
  filter: grayscale(0.85) brightness(0.5);
}

/* ============ Reveal / draw-in animations ============ */

@media (prefers-reduced-motion: no-preference) {
  .product-frame {
    opacity: 0;
    transform: translateY(30px);
    transition:
      opacity 0.7s ease-out,
      transform 0.7s ease-out;
  }

  /* Reveal (opacity/transform) carries the staggered delay; hover properties
     (box-shadow, color) transition with no delay so hover responds instantly. */

  .callout-marker {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
    transition:
      opacity 0.35s ease-out calc(0.5s + var(--i, 1) * 0.12s),
      transform 0.35s ease-out calc(0.5s + var(--i, 1) * 0.12s),
      box-shadow 0.15s ease-out,
      filter 0.18s ease-out;
  }

  /* Spotlight dim/undim fades in and out with no reveal delay. Applied to
     every frame element except the markers, whose transition is tuned above. */

  .product-frame *:not(.callout-marker) {
    transition:
      filter 0.28s ease-out,
      opacity 0.28s ease-out;
  }

  .callout-item {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 0.4s ease-out calc(0.5s + var(--i, 1) * 0.12s),
      transform 0.4s ease-out calc(0.5s + var(--i, 1) * 0.12s),
      color 0.15s ease-out;
  }

  .product-section.is-visible .product-frame {
    opacity: 1;
    transform: none;
  }

  .product-section.is-visible .callout-marker {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .product-section.is-visible .callout-item {
    opacity: 1;
    transform: none;
  }
}

/* ============ Responsive: callouts on mobile ============ */

@media (max-width: 768px) {
  .product-frame {
    font-size: 0.7rem;
  }

  /* Keep the numbered markers visible at every size — they scale with the
     frame's zoom and are the link to the numbered legend below. */

  .callout-item b {
    background: rgba(255, 131, 0, 0.18);
  }
}

/* ============ Frame 1 (Hero — full editor shell): scoped shell primitives ============ */

.product-frame--shell {
  padding: 1.75rem;
}

/* The editor UI as a floating window, framed by the canvas stage like the
   other visuals (which float a glass card on the padded canvas). */

.pf-window {
  aspect-ratio: 16 / 10;
  display: flex;
  flex-direction: column;
  border-radius: 0.5rem;
  border: 1px solid var(--pf-hairline);
  background: var(--pf-canvas);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

.pf-chrome {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--pf-hairline);
  background: var(--pf-panel-2);
  flex: 0 0 auto;
}

.pf-chrome-btn {
  font-size: 0.7rem;
  color: var(--pf-text-dim);
  background: var(--pf-glass);
  border: 1px solid var(--pf-hairline);
  border-radius: 0.375rem;
  padding: 0.3rem 0.6rem;
  white-space: nowrap;
}

.pf-mode-toggle {
  display: flex;
  gap: 0.15rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--pf-hairline);
  border-radius: 999px;
  padding: 0.15rem;
  margin-left: 0.25rem;
}

.pf-mode-toggle span {
  font-size: 0.7rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  color: var(--pf-text-dim);
  white-space: nowrap;
}

.pf-mode-toggle span.on {
  background: var(--pf-violet);
  color: #fff;
}

.pf-chrome-right {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.pf-status {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  color: var(--pf-text-dim);
  white-space: nowrap;
}

.pf-body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(3.75rem, 0.42fr) minmax(0, 1fr) minmax(
      0,
      1.15fr
    );
}

.pf-sidebar {
  border-right: 1px solid var(--pf-hairline);
  padding: 0.75rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  overflow: hidden;
}

.pf-sidebar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--pf-text-dim);
  padding: 0.4rem 0.6rem;
  border-radius: 999px;
}

.pf-sidebar-item b {
  font-weight: 600;
  font-size: 0.65rem;
  opacity: 0.75;
}

.pf-sidebar-item.active {
  background: var(--pf-purple);
  color: #1c1030;
  font-weight: 600;
}

.pf-sidebar-item.active b {
  color: #1c1030;
  opacity: 0.7;
}

.pf-panel {
  margin: 0.75rem;
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.pf-field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pf-field label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pf-text-dim);
}

.pf-preview {
  background: var(--pf-panel-2);
  display: grid;
  place-items: center;
  padding: 1rem;
  overflow: hidden;
}

/* Desktop website preview: a browser window wrapping a wireframe layout.
   Everything is a neutral skeleton block so it reads as "your live site"
   without inventing fake content. */

.pf-browser {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--pf-panel);
  border: 1px solid var(--pf-hairline);
  border-radius: 0.6rem;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.pf-browser-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem;
  background: var(--pf-panel-2);
  border-bottom: 1px solid var(--pf-hairline);
}

.pf-browser-dot {
  width: 0.4rem;
  height: 0.4rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.pf-browser-url {
  flex: 1 1 auto;
  margin-left: 0.4rem;
  height: 0.7rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--pf-hairline);
}

.pf-browser-page {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.65rem 0.7rem;
  overflow: hidden;
  background: linear-gradient(
    180deg,
    rgba(139, 92, 246, 0.07),
    transparent 45%
  );
}

.pf-wire-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pf-wire-logo {
  width: 1.8rem;
  height: 0.5rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pf-violet), var(--pf-teal));
}

.pf-wire-navlinks {
  display: flex;
  gap: 0.35rem;
}

.pf-wire-navlinks span {
  width: 1.1rem;
  height: 0.35rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
}

.pf-wire-hero {
  display: grid;
  grid-template-columns: 1fr 0.9fr;
  align-items: center;
  gap: 0.6rem;
}

.pf-wire-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.pf-wire-line {
  height: 0.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
}

.pf-wire-line--title {
  height: 0.6rem;
  width: 85%;
  background: rgba(255, 255, 255, 0.24);
}

.pf-wire-line--short {
  width: 60%;
}

.pf-wire-btn {
  margin-top: 0.25rem;
  width: 2.4rem;
  height: 0.7rem;
  border-radius: 0.25rem;
  background: var(--pf-cta);
}

.pf-wire-hero-art {
  height: 3rem;
  border-radius: 0.4rem;
  border: 1px solid var(--pf-hairline);
  background: linear-gradient(
    150deg,
    rgba(139, 92, 246, 0.4),
    rgba(0, 200, 255, 0.25) 60%,
    rgba(0, 255, 100, 0.15)
  );
}

.pf-wire-cards {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}

.pf-wire-card {
  height: 1.6rem;
  border-radius: 0.35rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--pf-hairline);
}

@media (max-width: 768px) {
  .pf-body {
    grid-template-columns: minmax(4.5rem, 0.6fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .pf-panel {
    margin: 0.5rem;
    padding: 0.6rem;
    gap: 0.5rem;
  }
}

/* ============ Frame 2 (Prompt + 3-up template chooser): scoped primitives ============ */

.product-frame--prompt {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.pf-prompt-card {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.pf-prompt-textarea {
  min-height: 4rem;
  padding: 0.75rem 0.85rem;
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--pf-hairline);
  color: var(--pf-text-dim);
  font-size: 0.85rem;
  line-height: 1.5;
}

.pf-prompt-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.pf-attach-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--pf-text-dim);
  background: var(--pf-glass);
  border: 1px dashed var(--pf-hairline);
  border-radius: 999px;
  padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  white-space: nowrap;
}

.pf-chip-icon {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--pf-teal);
}

.pf-chip:nth-child(2) .pf-chip-icon {
  background: var(--pf-violet);
}

.pf-chip:nth-child(3) .pf-chip-icon {
  background: var(--pf-purple);
}

.pf-generate-btn {
  white-space: nowrap;
}

/* The gallery, as a strip. Six is enough to read as "there are more of these"
   without becoming a grid, which would take the height the screen below it
   needs. One is ringed, because the step this illustrates is the picking. */

.pf-tile-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.5rem;
}

.pf-tile {
  aspect-ratio: 4 / 3;
  border-radius: 0.35rem;
  background: var(--pf-panel-2);
  border: 1px solid var(--pf-hairline);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  opacity: 0.55;
  min-width: 0;
}

.pf-tile--active {
  opacity: 1;
  border-color: var(--pf-violet);
  box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.4);
}

.pf-tile-header {
  height: 0.25rem;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(139, 92, 246, 0.6),
    rgba(0, 200, 255, 0.4)
  );
}

.pf-tile-body {
  flex: 1;
  border-radius: 0.2rem;
  background: rgba(255, 255, 255, 0.07);
}

/* The title sits tight to the strip it names, so the two are one group rather
   than two things a frame-wide gap has separated. */

.pf-choose {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.pf-frame-title {
  margin: 0;
  text-align: center;
  font-family: "Build", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1.1;
  color: var(--pf-text);
  font-feature-settings: "ss01" on;
}

.pf-optional-label {
  align-self: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.6rem;
  color: var(--pf-text-dim);
  opacity: 0.75;
}

.pf-generate-btn {
  align-self: center;
}

@media (max-width: 768px) {
  .product-frame--prompt {
    padding: 1rem;
    gap: 1.25rem;
  }

  /* Four tiles rather than six: below this they stop reading as sites and
     start reading as texture. */

  .pf-tile-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pf-tile:nth-child(n + 5) {
    display: none;
  }
}

/* ============ Frame 3 (Schema-driven content editor): scoped primitives ============ */

.product-frame--content {
  padding: 1.75rem;
}

.pf-content-form {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.pf-content-fields {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-bottom: 0.9rem;
  min-width: 0;
}

.pf-fields-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  min-width: 0;
}

.pf-fields-row .pf-field {
  min-width: 0;
}

.pf-select {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--pf-hairline);
  border-radius: 0.375rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  color: var(--pf-text);
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
}

.pf-select-caret {
  color: var(--pf-text-dim);
  font-size: 0.6rem;
  margin-left: 0.5rem;
}

.pf-field--unsynced {
  border-left: 2px solid var(--pf-unsynced);
  padding-left: 0.6rem;
}

.pf-field--unsynced label {
  display: flex;
  align-items: center;
}

.pf-field--unsynced .pf-dot {
  background: var(--pf-unsynced);
}

.pf-markdown {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--pf-hairline);
  border-bottom: 1px solid var(--pf-hairline);
  min-width: 0;
}

.pf-markdown-toolbar {
  display: flex;
  gap: 0.35rem;
}

.pf-md-btn {
  width: 1.6rem;
  height: 1.6rem;
  display: grid;
  place-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--pf-text-dim);
  background: var(--pf-glass);
  border: 1px solid var(--pf-hairline);
  border-radius: 0.375rem;
}

.pf-md-btn--link {
  font-size: 0.6rem;
}

.pf-markdown-body {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--pf-hairline);
  border-radius: 0.5rem;
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.pf-md-line {
  color: var(--pf-text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0;
}

.pf-md-line strong {
  color: var(--pf-text);
  font-weight: 700;
}

.pf-md-list {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--pf-text-dim);
  font-size: 0.8rem;
  line-height: 1.5;
}

.pf-unsynced-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
  border-left: 2px solid var(--pf-unsynced);
  padding-left: 0.6rem;
  min-width: 0;
}

.pf-unsynced-flag {
  display: flex;
  align-items: center;
  font-size: 0.75rem;
  color: var(--pf-unsynced);
}

.pf-unsynced-bar .pf-dot {
  background: var(--pf-unsynced);
}

.pf-unsynced-actions {
  display: flex;
  gap: 0.9rem;
}

.pf-text-link {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: default;
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 768px) {
  .product-frame--content {
    padding: 1rem;
  }

  .pf-content-form {
    padding: 0.75rem;
    gap: 0.6rem;
  }

  .pf-fields-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ============ Frame 4 (Media/image editor): scoped primitives ============ */

.product-frame--media {
  padding: 1.75rem;
}

.pf-media-card {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.pf-dropzone {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.9rem;
  border: 1px dashed var(--pf-hairline);
  border-radius: 0.5rem;
  background: rgba(0, 0, 0, 0.2);
  min-width: 0;
}

.pf-thumb {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 0.375rem;
  background: linear-gradient(135deg, var(--pf-teal), var(--pf-violet));
}

.pf-dropzone-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.pf-dropzone-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pf-text);
}

.pf-dropzone-sub {
  font-size: 0.7rem;
  color: var(--pf-text-dim);
}

.pf-upload-progress {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.pf-progress-track {
  height: 0.5rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--pf-hairline);
  overflow: hidden;
}

.pf-progress-fill {
  position: relative;
  height: 100%;
  border-radius: 999px;
  background: var(--pf-cta);
  overflow: hidden;
}

.pf-progress-label {
  font-size: 0.7rem;
  color: var(--pf-text-dim);
}

.pf-media-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pf-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  color: var(--pf-text-dim);
  background: var(--pf-glass);
  border: 1px solid var(--pf-hairline);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  white-space: nowrap;
}

.pf-badge--cdn {
  color: var(--pf-ok);
  border-color: rgba(0, 214, 118, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .pf-progress-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.35),
      transparent
    );
    background-size: 200% 100%;
    animation: pf-progress-shimmer 1.8s linear infinite;
  }
}

@keyframes pf-progress-shimmer {
  from {
    background-position: 200% 0;
  }

  to {
    background-position: -200% 0;
  }
}

@media (max-width: 768px) {
  .product-frame--media {
    padding: 1rem;
  }

  .pf-media-card {
    padding: 0.75rem;
    gap: 0.75rem;
  }

  .pf-dropzone {
    flex-wrap: wrap;
  }
}

/* ============ Frame 5 (Site settings + deploys + DNS): scoped primitives ============ */

.product-frame--settings {
  padding: 1.75rem;
}

.pf-settings-card {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.pf-settings-overview {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-width: 0;
}

.pf-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-width: 0;
}

.pf-settings-site {
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--pf-text);
  min-width: 0;
}

.pf-settings-live {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--pf-ok);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.pf-settings-label {
  color: var(--pf-text-dim);
  font-size: 0.75rem;
  flex-shrink: 0;
}

.pf-settings-value {
  color: var(--pf-text);
  font-size: 0.8rem;
  text-align: right;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-dns {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
  padding-top: 0.9rem;
  border-top: 1px solid var(--pf-hairline);
}

.pf-dns-title,
.pf-deploys-title {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--pf-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pf-dns-row {
  display: grid;
  grid-template-columns: 2.75rem 2.75rem minmax(0, 1fr);
  gap: 0.4rem;
  align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  min-width: 0;
}

.pf-dns-type {
  color: var(--pf-teal);
  font-weight: 600;
}

.pf-dns-host {
  color: var(--pf-text-dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pf-dns-value {
  color: var(--pf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.pf-deploys {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--pf-hairline);
  min-width: 0;
}

.pf-deploy-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.pf-deploy-date {
  color: var(--pf-text-dim);
  font-size: 0.7rem;
  width: 2.75rem;
  flex-shrink: 0;
}

.pf-deploy-msg {
  color: var(--pf-text);
  font-size: 0.78rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-deploy-row .pf-dot {
  margin-right: 0;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .product-frame--settings {
    padding: 1rem;
  }

  .pf-settings-card {
    padding: 0.75rem;
    gap: 0.75rem;
  }
}

/* ============ Frame 6 (Version history panel): scoped primitives ============ */

.product-frame--history {
  padding: 1.75rem;
}

.pf-history-panel {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.pf-history-header {
  display: flex;
  align-items: center;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pf-hairline);
}

.pf-history-title {
  font-weight: 700;
  color: var(--pf-text);
  font-size: 0.9rem;
}

.pf-history-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.pf-history-group-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--pf-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pf-change-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  /* Keep the warn dots in the same column as the ok dots below (dot at the
     commit rows' 0.1rem inset), but let the glass highlight breathe to the
     left of the dot: pull the row left and pad it back so the dot holds its
     x while the background extends past it. */
  padding: 0.45rem 0.1rem 0.45rem 0.5rem;
  margin-left: -0.4rem;
  border-radius: 0.25rem;
  background: var(--pf-glass);
}

.pf-change-row .pf-dot {
  flex-shrink: 0;
}

.pf-change-desc {
  color: var(--pf-text);
  font-size: 0.78rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-commit-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.4rem 0.1rem;
  border-bottom: 1px solid var(--pf-hairline);
}

.pf-commit-row:last-child {
  border-bottom: none;
}

.pf-commit-row .pf-dot {
  flex-shrink: 0;
  margin-right: 0;
}

.pf-commit-date {
  color: var(--pf-text-dim);
  font-size: 0.7rem;
  width: 2.5rem;
  flex-shrink: 0;
}

.pf-commit-msg {
  color: var(--pf-text);
  font-size: 0.78rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-revert-btn {
  flex-shrink: 0;
  background: transparent;
  color: var(--pf-text-dim);
  border: 1px solid var(--pf-hairline);
  border-radius: 0.375rem;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  cursor: default;
}

@media (max-width: 768px) {
  .product-frame--history {
    padding: 1rem;
  }

  .pf-history-panel {
    padding: 0.75rem;
    gap: 0.75rem;
  }
}

/* ============ Frame 7 (Publish modal): scoped primitives ============ */

.product-frame--publish {
  min-height: 26rem;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.pf-publish-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding-bottom: 0.9rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--pf-hairline);
  min-width: 0;
  opacity: 0.6;
}

.pf-publish-topbar-label {
  font-size: 0.7rem;
  color: var(--pf-text-dim);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-publish-backdrop {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 0.75rem;
  min-width: 0;
}

.pf-publish-modal {
  width: 100%;
  max-width: 24rem;
  min-width: 0;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.pf-publish-header {
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--pf-hairline);
}

.pf-publish-title {
  font-weight: 700;
  color: var(--pf-text);
  font-size: 0.9rem;
}

.pf-publish-changes {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}

.pf-publish-change-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border-radius: 0.25rem;
  background: var(--pf-glass);
}

.pf-publish-change-desc {
  color: var(--pf-text);
  font-size: 0.78rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pf-publish-undo {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--pf-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: default;
}

.pf-publish-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.pf-publish-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--pf-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pf-publish-textarea {
  height: 3.5rem;
  align-items: flex-start;
  padding-top: 0.5rem;
  white-space: normal;
  line-height: 1.4;
  min-width: 0;
}

.pf-publish-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}

.pf-publish-cancel {
  flex-shrink: 0;
  background: transparent;
  color: var(--pf-text-dim);
  border: 1px solid var(--pf-hairline);
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0 1rem;
  height: 2.25rem;
  cursor: default;
}

@media (max-width: 768px) {
  .product-frame--publish {
    padding: 1rem;
    min-height: 24rem;
  }

  .pf-publish-modal {
    padding: 0.85rem;
    gap: 0.65rem;
    max-width: none;
  }
}

/* ============ Closing CTA (Section 8): finale spacing/centering polish ============ */

.product-cta.build-section {
  margin-top: 10rem;
  max-width: 52rem;
}

:root {
  /* Colors */
  --color-main-bg: rgba(0, 0, 0, 1);
  --color-typography-primary: rgba(255, 255, 255, 1);
  --color-typography-secondary: rgba(255, 255, 255, 0.7);
  --color-primary-cta-highlight: rgba(254, 131, 0, 1);
  --color-primary-cta-shadow: rgba(255, 60, 0, 1);
  --color-secondary-interactive: rgba(25, 162, 138, 1);
  --color-transparent-border: rgba(255, 255, 255, 0.2);
  /* Typography */
  --typo-subheader-size: 3rem;
  --typo-body-size: 1rem;
  --typo-body-size-large: 1.25rem;
  --typo-body-weight: 600;
  /* Element Styling */
  --style-double-border:
    0 0 0 2px var(--color-main-bg), 0 0 0 6px var(--color-transparent-border);
}

@font-face {
  font-family: "Ameda";

  font-style: normal;

  font-weight: 400;

  src: url("/fonts/ameda.woff2") format("woff2");
}

@font-face {
  font-family: "Build";

  font-style: normal;

  font-weight: 700;

  src: url("/fonts/build-bold.otf") format("opentype");
}

html,
body {
  margin: 0;
  height: 100%;
  background-color: var(--color-main-bg);
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--color-typography-primary);
}

.md a {
  color: var(--color-secondary-interactive);
  font-weight: 400;
}

.emphasized {
  color: var(--color-primary-cta-highlight);
}

#nav {
  z-index: 9998;
  /* Full-bleed bar, 1200px content: the blur and shadow must reach the
     viewport edges, otherwise they cut off over non-black sections. */
  padding-inline: max(4rem, calc((100% - 1200px) / 2));
}

.nav-text {
  font-size: var(--typo-body-size);
  font-weight: var(--typo-body-weight);
}

.nav-text-cta {
  font-size: var(--typo-body-size);
  font-weight: var(--typo-body-weight);
  background-color: rgba(254, 131, 0, 0.15);
  transition: background-color 0.3s ease-in-out;
  border-radius: 0.5rem;
}

.nav-text-cta a {
  display: block;
  color: var(--color-primary-cta-highlight);
  padding: 0.5rem 0.9rem;
}

.nav-text-cta:hover {
  background-color: rgba(254, 131, 0, 0.35);
}

.nav-active,
.nav-text:hover {
  background: linear-gradient(45deg, #ef476f, #ffd166, #06d6a0, #118ab2);
  background-size: 300% 300%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: moveColors 10s infinite ease-in-out;
}

.hero-message,
h1,
.manifesto h2:last-of-type {
  background: radial-gradient(
    circle at var(--hero-mouse-x, 50%) var(--hero-mouse-y, 50%),
    #ef476f 0%,
    #ffd166 25%,
    #06d6a0 50%,
    #118ab2 75%,
    #ef476f 100%
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: moveColors 10s infinite ease-in-out;
  -webkit-mask-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 30%,
    rgba(255, 255, 255, 0.6) 100%
  );
  mask-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 30%,
    rgba(255, 255, 255, 0.6) 100%
  );
}

#header {
  position: relative;
}

#header::before {
  content: "";
  position: absolute;
  top: 5rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(1400px, 100vw);
  height: 900px;
  background: radial-gradient(
    circle,
    rgba(6, 214, 160, 0.2),
    rgba(17, 138, 178, 0.15),
    transparent 60%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.hero-comp {
  width: 100%;
  max-width: 60rem;
  height: auto;
  margin-bottom: 2rem;
}

.hero-message {
  position: relative;
  z-index: 1;
  font-family: "Build", system-ui, sans-serif;
  font-size: 7.5rem;
  line-height: 0.8;
  text-align: center;
  font-weight: 700;
  font-feature-settings: "ss01" on;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  overflow: visible;
  transform-style: preserve-3d;
  will-change: transform;
  cursor: default;
}

.hero-line-1 {
  font-size: clamp(1.5rem, 5vw, var(--typo-subheader-size));
  display: block;
}

.hero-line-2 {
  font-size: clamp(3rem, 18vw, 11rem);
  display: block;
  padding-bottom: 0.15em;
  line-height: 0.75;
}

.build-section {
  width: 100%;
  max-width: 52rem;
  /* Closer to the hero above than to what follows: "Build yours right now"
     answers "websites for everyone", so the two belong together. */
  margin: 4rem auto 6rem;
  padding: 0 2rem;
  text-align: center;
}

.build-heading {
  font-family: "Build", system-ui, sans-serif;
  font-size: var(--typo-subheader-size);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-typography-primary);
  /* No bottom margin: the space under this line is set by .template-mosaic's
     own top margin, which has to cancel the rows' padding first. Two margins
     would collapse against each other and the result would not be either. */
  margin: 0;
  font-feature-settings: "ss01" on;
}

.build-description {
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--color-typography-secondary);
  margin: 0 0 3rem;
  line-height: 1.6;
}

/* `hidden` has to be spelled out because a class selector outranks the UA's
   [hidden] rule */

.template-mosaic[hidden] {
  display: none;
}

/* Two rows drifting against each other, the treatment the professional
   template uses for testimonials. Full-bleed on purpose: held inside the 52rem
   column this reads as a ticker, and across the viewport it reads as a wall of
   sites going past, which is the whole reason to move them.

   Escapes the column with the standard 100vw trick rather than being moved out
   of .build-section, so the heading and the link above and below it keep their
   places in the section's flow. */

.template-mosaic {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  /* Both cancel the outer padding, so what is left is the gap you actually
     see: 4rem above, matching the space over the heading, and 3rem below,
     which keeps the link tied to the band whose overflow it names. */
  margin-top: calc(4rem - var(--band-pad-outer));
  margin-bottom: calc(3rem - var(--band-pad-outer));
  text-align: left;
}

/* The curve. The band is treated as a screen wrapping around the viewer: flat
   ahead of you, and curling toward you at both ends, so the tiles out at the
   sides are nearer the camera and render larger. src/index.ts turns each tile
   to face you by an amount set by where it currently is, which is why this has
   to be driven per frame rather than declared here - a tile's place in the row
   is what decides its transform, and that changes constantly.

   --curve-depth is how far the ends come forward, as a FRACTION of the row's
   width rather than a length, and --curve-turn how far they turn to face you.
   Both are read by the script; tune them here.

   A fraction because everything here scales with the display: the tiles, the
   camera distance below, and this. Held at fixed pixels while the row grew,
   the same camera covered an ever wider field - a 35deg half-angle at 1280px
   became 62deg at 3400px, and tiles out at the edges stretched half again as
   wide as they were tall. Proportions keep the geometry identical at every
   size, so a bigger display gets a bigger version of the same picture rather
   than a more distorted one. */

.template-mosaic {
  --curve-depth: 0.132;
  --curve-turn: 34deg;
  /* The rows carry padding so the curve has somewhere to grow into. That is
     scaffolding, not spacing - left to set the gaps it made them a function of
     the curve, so the space under the heading ran from 82px to 153px across
     the widths while the space above it stayed at 64px.

     The outer padding is cancelled by the margins below, so the gaps around
     the bands are stated here and hold at every width. The inner padding is
     the gap between the two bands, and it is proportional: fixed, it was 76px
     whether the tiles were 149px wide or 431px, which read as a chasm on a
     small window and a seam on a large one. */
  --band-pad-outer: clamp(2.5rem, 5vw, 7rem);
  --band-pad-inner: clamp(0.9rem, 1.3vw, 1.9rem);
  /* A tile's size lives here rather than on .template-tile because the height
     reserved below is computed from it. One set of numbers, so the space the
     mosaic asks for while it is still empty is the space its tiles end up
     taking. The breakpoints further down override --tile-w, not the tile. */
  --tile-w: clamp(15rem, 16.7vw, 28rem);
  --tile-name: clamp(0.875rem, 1vw, 1.15rem);
  --tile-gap: 0.625rem;
  /* Hold the bands' height from the first paint. The catalog comes over the
     network, so without this the CTA below rendered up under the heading and
     was thrown the height of the mosaic down the page when the tiles landed -
     a flash of the wrong layout, and up to 0.15 of layout shift.

     Both rows measure the same: their two paddings, a 4:3 thumbnail, the gap
     under it and one line of name. src/index.ts collapses this again if the
     catalog never arrives, so a dead editor costs an empty band for as long
     as the request takes and nothing after that. */
  min-height: calc(
    2 *
      (
        var(--band-pad-outer) + var(--band-pad-inner) + var(--tile-w) * 0.75 +
          var(--tile-gap) + 1.3 * var(--tile-name)
      )
  );
  /* That padding is scaffolding for the curve, not part of the band, and the
     negative margin above deliberately pulls the link below into it. Left
     interactive, the empty space swallowed every click meant for "Browse all
     templates" and paused the drift whenever the pointer came near it - the
     bands sit in a stacking context of their own (the translate), so they
     take the hit even though the link comes after them. Only the track opts
     back in, and hover-to-pause is unaffected: a pointer over a tile still
     puts :hover on the row above it. */
  pointer-events: none;
}

/* The mask is what keeps this from reading as content that has been cut off:
   tiles arrive and leave rather than appearing and vanishing at a hard edge. */

.marquee-row {
  /* Proportional, so the field of view is the same at every width: the row is
     100vw, and this is 0.625 of it - the 900px that looked right at 1440. */
  perspective: 62.5vw;
  overflow: hidden;
  /* Room for what draws outside a tile: the frame's ring, the hover scale, and
     the curve, which grows the tiles out at the sides by about a quarter.
     Without it overflow:hidden clipped the top edge of every thumbnail. */
  padding: var(--band-pad-inner) 0;
  /* The names grow with the tiles, or a 14px label under a 428px thumbnail
     reads as a caption that got left behind. */
  font-size: var(--tile-name);
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
  mask-image: linear-gradient(
    90deg,
    transparent,
    #000 20%,
    #000 80%,
    transparent
  );
}

/* No `gap` here on purpose. With a gap, a track of 2N tiles is 2N tiles plus
   2N-1 gaps, so half of it is half a gap short of one pass and the loop drifts
   out of alignment. Carrying the spacing on the tiles themselves makes the
   track exactly 2N whole units, and -50% exactly one pass. */

.marquee-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  pointer-events: auto;
  transform-style: preserve-3d;
  /* The duration is overwritten by src/index.ts once the track is filled: the
     keyframe moves a percentage of the track, so holding one duration would
     make a longer catalog drift faster. This is the no-JS floor. */
  animation: template-drift 90s linear infinite;
}

.marquee-track.reverse {
  animation-direction: reverse;
}

/* Each band's vanishing point sits on the edge it shares with the other one,
   so a tile coming toward the camera grows AWAY from its neighbour rather than
   into it. Centred origins made both bands swell toward the middle, closing
   the gap between them from 103px to 33px out at the sides - they read as
   bending into each other. Now the pair opens out.

   Which is also why the padding below is lopsided: the growth all goes to the
   outer edge, so that is the only side that needs room for it. Measured, not
   guessed - the top band was overflowing its row by 16px above and nothing
   below, and the bottom band by 19px below and nothing above. A wide viewport
   puts more tiles at full extension, so this is set from the worst case out at
   3000px rather than the first width it happened to look right at.

   It is sized for --curve-depth above: raise the depth and this has to follow,
   or the tops come off again. */

.marquee-row:first-child {
  perspective-origin: 50% 100%;
  padding-top: var(--band-pad-outer);
}

.marquee-row:last-child {
  perspective-origin: 50% 0%;
  padding-bottom: var(--band-pad-outer);
}

/* Pausing on hover is not decoration here: every tile is a link, and reaching
   for one that is still moving is a fight. Taken from the same treatment. */

.marquee-row:hover .marquee-track,
.marquee-row:focus-within .marquee-track {
  animation-play-state: paused;
}

@keyframes template-drift {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

/* Standing still, the row has to stay reachable, so it becomes something you
   can push along yourself rather than a strip with its end cut off. */

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none;
  }

  .marquee-row {
    overflow-x: auto;
    perspective: none;
  }

  /* No curve when nothing moves. Its whole job is to make a moving band read
     as wrapping past you; frozen, it is just warped thumbnails. */

  .template-tile {
    transform: none !important;
  }
}

.template-tile {
  /* Grows with the display. The floor is the size this was designed at, so
     nothing at or below 1440px changes; above it the tiles get bigger rather
     than the row merely fitting more of them. */
  flex: 0 0 var(--tile-w);
  /* The same width again, as a definite one. The basis alone is enough in
     Blink, but WebKit sizes the max-content track from each tile's intrinsic
     content instead, and the widest thing in a tile is a 2560px thumbnail. The
     track laid out at 12 x 2576px = 30912px rather than 12 x 160px = 1920px,
     which is a band of mostly empty space whose -50% keyframe then travels
     sixteen times as far in the same duration: on iPhone the tiles tore past
     and the curve, fed a track box that wide, pinned every visible tile at the
     clamp and blew it up until the second band was off screen. Chrome's device
     mode is still Blink, so it never showed any of this. */
  width: var(--tile-w);
  /* A flex item will not shrink below its content, and the name above is one
     unbroken line, so "Professional Template" made its tile 149px wide where
     every other tile was 144 - and the 4:3 thumbnail turned those 5px into 4
     more of height, which the whole row then took. The tile is exactly the
     width it is told to be, and the name ellipsizes inside it. */
  min-width: 0;
  margin-right: 1rem;
  /* Set per frame by the curve; the tile's own box never moves, only the face
     it presents. */
  transform-style: preserve-3d;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--tile-gap);
  text-decoration: none;
  opacity: 0.72;
  transition: opacity 200ms ease;
}

.template-tile:hover,
.template-tile:focus-visible {
  opacity: 1;
}

.template-tile-shot {
  display: block;
  position: relative;
  transform-origin: center;
  /* The editor captures thumbnails at 2560x1920, so the box is 4:3 and the
     image never has to be letterboxed or cropped to fit it. That 2560 is also
     the tile's intrinsic width, which is why .template-tile has to state a
     definite width above. */
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 0.375rem;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 1px var(--color-transparent-border);
  transition:
    box-shadow 200ms ease,
    transform 200ms ease;
}

/* The site's own framing idiom, borrowed rather than invented: the same double
   ring --style-double-border draws elsewhere, tightened to this scale. The
   thumbnail comes with it - growing the ring alone read as the frame swelling
   around a picture that stayed put. */

.template-tile:hover .template-tile-shot,
.template-tile:focus-visible .template-tile-shot {
  transform: scale(1.06);
  box-shadow:
    0 0 0 2px var(--color-main-bg),
    0 0 0 4px var(--color-transparent-border);
}

/* Lifted over its neighbours while it is scaled, or the tile after it in the
   row paints over the edge it just grew into. */

.template-tile:hover,
.template-tile:focus-visible {
  position: relative;
  z-index: 1;
}

.template-tile:focus-visible {
  outline: none;
}

.template-tile:focus-visible .template-tile-shot {
  box-shadow:
    0 0 0 2px var(--color-main-bg),
    0 0 0 4px var(--color-secondary-interactive);
}

.template-tile-shot img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: top center;
     object-position: top center;
}

/* Thumbnails only exist once the gallery ships, and a template whose shot has
   not been captured should still be pickable. The frame stays, the broken
   image goes. */

.template-tile.no-shot .template-tile-shot img {
  display: none;
}

.template-tile-name {
  font-size: inherit;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-typography-secondary);
  transition: color 200ms ease;
  /* One line, always. A name that wrapped made its tile taller, its row
     taller than the height the mosaic reserves, and - since the catalog is
     shuffled - the two rows different heights on some loads and not others.
     "Professional Template" wrapped at 9rem tiles, so this is the phone
     widths in practice. Truncating is the smaller loss: the tile is a link to
     the gallery, where the name is written out in full. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.template-tile:hover .template-tile-name,
.template-tile:focus-visible .template-tile-name {
  color: var(--color-typography-primary);
}

.browse-templates {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-primary-cta-highlight);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
}

.browse-templates:hover,
.browse-templates:focus-visible {
  color: var(--color-primary-cta-shadow);
}

/* The arrow moves, the words do not: the whole control sliding would read as
   the page shifting rather than as a direction. */

.browse-templates-arrow {
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.browse-templates:hover .browse-templates-arrow {
  transform: translateX(3px);
}

/* Fades out at both ends rather than ruling a line across the column: it
   separates two ways forward from each other without cutting the section in
   half. */

.build-divider {
  height: 1px;
  width: min(16rem, 55%);
  margin: 3rem auto 0;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-transparent-border) 30%,
    var(--color-transparent-border) 70%,
    transparent
  );
}

@media (prefers-reduced-motion: reduce) {
  .template-tile,
  .template-tile-shot,
  .template-tile-name,
  .browse-templates-arrow {
    transition: none;
  }

  /* The ring still marks what is hovered; the growing does not. */

  .template-tile:hover .template-tile-shot,
  .template-tile:focus-visible .template-tile-shot {
    transform: none;
  }
}

.pricing-page {
  width: 100%;
}

.pricing-hero {
  position: relative;
  width: 100%;
  padding: 14rem 2rem 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4rem;
  overflow: hidden;
}

.pricing-hero::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(
    circle,
    rgba(6, 214, 160, 0.2),
    rgba(17, 138, 178, 0.15),
    transparent 60%
  );
  filter: blur(30px);
  pointer-events: none;
  z-index: 0;
}

.pricing-hero-content {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

h1.pricing-title {
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.05;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

.pricing-title-line:first-child {
  display: block;
  white-space: nowrap;
  font-size: clamp(1.5rem, 5vw, var(--typo-subheader-size));
}

.pricing-title-line-secondary {
  display: block;
  white-space: nowrap;
  font-size: clamp(3rem, 18vw, 11rem);
  line-height: 0.75;
  padding-bottom: 0.15em;
  background: radial-gradient(
    circle at var(--hero-mouse-x, 50%) var(--hero-mouse-y, 50%),
    #ef476f 0%,
    #ffd166 25%,
    #06d6a0 50%,
    #118ab2 75%,
    #ef476f 100%
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: moveColors 10s infinite ease-in-out;
}

.pricing-tagline {
  font-size: var(--typo-body-size-large);
  color: var(--color-typography-secondary);
  margin: 1.5rem 0 0;
}

/* Pricing tiers */

.pricing-tiers {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 68rem;
  /* Breathing room above the group and before the wave below. Uneven
     because the hero's gap above is 4rem while its padding below is
     10rem, and the featured tier's overhang eats 1.25rem of each. */
  margin: 3rem auto 2rem;
  display: grid;
  /* 1.18 rather than 1.08: the featured tier pads 3.25rem on every side
     against the others' 2rem, so it needs the extra column width to keep
     more usable text width than its neighbours, not less. */
  grid-template-columns: 1fr 1.18fr 1fr;
  align-items: stretch;
  gap: 1.5rem;
}

.pricing-tier {
  position: relative;
  display: flex;
}

/* The featured tier reads larger via grid geometry rather than a
   transform, which would resample its text and glow edge. */

.pricing-tier-featured {
  margin: -1.25rem 0;
}

/* 3.25rem is the base 2rem plus the 1.25rem this panel overhangs. The
   vertical value is load-bearing: without it the extra height shifts the
   content out of line with the neighbours — riding high at the top, CTA
   sitting low at the bottom. The horizontal value simply matches it so
   the inset reads even on all four sides; the column above is widened to
   pay for it. The box grows; the content area does not. */

.pricing-tier-featured .pricing-tier-content {
  padding: 3.25rem;
}

.pricing-tier .glowverlay {
  z-index: 1;
  border-radius: 1.5rem;
}

.pricing-tier-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 2rem;
  text-align: left;
  border-radius: 1.5rem;
  border: 1px solid var(--color-transparent-border);
  background: rgba(20, 20, 20, 0.9);
  box-shadow: var(--style-double-border);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.pricing-tier-icon {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  background: linear-gradient(
    135deg,
    rgba(6, 214, 160, 0.15),
    rgba(17, 138, 178, 0.15)
  );
  color: var(--color-secondary-interactive);
}

.pricing-tier-name {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-typography-primary);
  margin: 0;
}

.pricing-tier-audience {
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-typography-secondary);
  margin: 0.35rem 0 0;
  /* Reserve two lines so a tier whose audience wraps doesn't push its
     price and feature list below the others. 3em = 2 lines at the
     1.5 line-height above, and em keeps it correct as the font-size
     changes across breakpoints. */
  min-height: 3em;
}

.pricing-tier-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin: 1.5rem 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-tier-price-amount {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1;
  color: var(--color-secondary-interactive);
}

.pricing-tier-price-term {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-typography-secondary);
}

.pricing-tier-features {
  flex: 1;
  margin-bottom: 2rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-typography-secondary);
}

.pricing-tier-features ul {
  margin: 0;
  padding-left: 1.5rem;
  list-style: none;
}

.pricing-tier-features li {
  position: relative;
  margin-bottom: 0.6rem;
  padding-left: 0.5rem;
}

.pricing-tier-features li::before {
  content: "•";
  position: absolute;
  left: -1rem;
  color: var(--color-secondary-interactive);
  font-weight: bold;
}

.pricing-limits-trigger {
  align-self: center;
  font-size: 0.95rem;
  color: var(--color-secondary-interactive);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.pricing-limits-popover {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.5rem;
  margin: auto;
  border: 1px solid var(--color-transparent-border);
  border-radius: 1rem;
  color: var(--color-typography-primary);
  background: var(--color-main-bg);
  box-shadow: var(--style-double-border);
  text-align: left;
}

.pricing-limits-popover::backdrop {
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
          backdrop-filter: blur(4px);
}

.pricing-limits-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pricing-limits-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.pricing-limits-close {
  flex: 0 0 auto;
  line-height: 1;
  font-size: 1.5rem;
  color: var(--color-typography-secondary);
}

.pricing-limits-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-typography-secondary);
}

.pricing-limits-body ul {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.pricing-limits-body li {
  margin-bottom: 0.6rem;
}

.pricing-limits-body p {
  margin-bottom: 1rem;
}

.pricing-limits-body p:last-child {
  margin-bottom: 0;
}

/* Descendant selector so these win over .primary-cta, which is
   defined later in this file at equal class specificity. */

.pricing-tier .pricing-cta {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pricing-cta-secondary {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  color: var(--color-typography-primary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--color-transparent-border);
  box-shadow: var(--style-double-border);
  transition:
    background-color 0.2s ease-in-out,
    border-color 0.2s ease-in-out,
    transform 0.1s ease-in-out;
}

.pricing-cta-secondary:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.35);
}

.pricing-cta-secondary:active {
  transform: scale(0.95);
}

@media (max-width: 900px) {
  .pricing-tiers {
    grid-template-columns: 1fr;
    max-width: 32rem;
    gap: 2rem;
    margin: 1.5rem auto 1rem;
  }

  /* Stacked: no column to widen and no neighbours to rise above. */

  .pricing-tier-featured {
    margin: 0;
  }

  .pricing-tier-featured .pricing-tier-content {
    padding: 2rem;
  }

  /* Stacked, so there is nothing to align against — the reserved second
     line would just be a gap under the one-line audiences. */

  .pricing-tier-audience {
    min-height: 0;
  }
}

/* Still three across here, but the columns are narrow enough that the
   longest audience wraps to three lines rather than two. */

@media (min-width: 901px) and (max-width: 1328px) {
  .pricing-tier-audience {
    min-height: 4.5em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-cta-secondary {
    transition: none;
  }

  .pricing-tier .glowverlay,
  .pricing-tier-featured.glow-container:before {
    animation: none;
  }
}

.glow-container {
  position: relative;
}

.glow-container:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 103%;
  height: 103%;
  background: radial-gradient(
    circle,
    rgba(255, 0, 150, 1),
    rgba(0, 200, 255, 1),
    rgba(0, 255, 100, 1)
  );
  background-size: 200% 200%;
  transform: translate(-50%, -50%) scale(1);
  border-radius: 1.5rem 1.5rem 1rem 1rem;
  filter: blur(20px);
  animation: glowPulse 5s infinite alternate ease-in-out;
  z-index: 1;
}

@property --blob-x {
  syntax: "<percentage>";

  inherits: false;

  initial-value: 0%;
}

@property --blob-y {
  syntax: "<percentage>";

  inherits: false;

  initial-value: 0%;
}

@property --blob-size {
  syntax: "<percentage>";

  inherits: false;

  initial-value: 0%;
}

@property --blob-x-2 {
  syntax: "<percentage>";

  inherits: false;

  initial-value: 0%;
}

@property --blob-y-2 {
  syntax: "<percentage>";

  inherits: false;

  initial-value: 0%;
}

@property --blob-size-2 {
  syntax: "<percentage>";

  inherits: false;

  initial-value: 0%;
}

.glowverlay {
  opacity: 0;
  transition: opacity 2s ease-out;
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(
    circle at 30% 40%,
    rgba(255, 0, 150, 0.9) 0%,
    rgba(0, 200, 255, 0.7) 30%,
    rgba(0, 255, 100, 0.45) 55%,
    transparent 70%
  );
  background-size: 200% 200%;
  filter: blur(30px);
  mix-blend-mode: screen;
  pointer-events: none;
  animation:
    blobCoords 16s linear infinite,
    blobCoords2 8s linear infinite,
    blobPulse 6s ease-in-out infinite;
  z-index: 3;
  -webkit-mask-image: radial-gradient(
    circle at var(--blob-x-2) var(--blob-y-2),
    rgba(0, 0, 0, 0) var(--blob-size-2),
    rgba(0, 0, 0, 1) calc(var(--blob-size-2) + 40%)
  );
  mask-image: radial-gradient(
    circle at var(--blob-x-2) var(--blob-y-2),
    rgba(0, 0, 0, 0) var(--blob-size-2),
    rgba(0, 0, 0, 1) calc(var(--blob-size-2) + 40%)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
}

.glowverlay.showing {
  opacity: 0.4;
}

@keyframes blobPulse {
  0% {
    background-size: 200%;
  }

  50% {
    background-size: 210%;
  }

  100% {
    background-size: 200%;
  }
}

@keyframes blobCoords {
  0% {
    --blob-x: 29%;
    --blob-y: 48%;
    --blob-size: 36%;
  }

  10% {
    --blob-x: 40%;
    --blob-y: 52%;
    --blob-size: 42%;
  }

  20% {
    --blob-x: 54%;
    --blob-y: 60%;
    --blob-size: 46%;
  }

  30% {
    --blob-x: 66%;
    --blob-y: 55%;
    --blob-size: 50%;
  }

  40% {
    --blob-x: 74%;
    --blob-y: 46%;
    --blob-size: 48%;
  }

  50% {
    --blob-x: 70%;
    --blob-y: 56%;
    --blob-size: 44%;
  }

  60% {
    --blob-x: 58%;
    --blob-y: 64%;
    --blob-size: 40%;
  }

  70% {
    --blob-x: 45%;
    --blob-y: 68%;
    --blob-size: 38%;
  }

  80% {
    --blob-x: 34%;
    --blob-y: 62%;
    --blob-size: 35%;
  }

  90% {
    --blob-x: 31%;
    --blob-y: 54%;
    --blob-size: 36%;
  }

  100% {
    --blob-x: 29%;
    --blob-y: 48%;
    --blob-size: 36%;
  }
}

@keyframes blobCoords2 {
  0% {
    --blob-x-2: 55%;
    --blob-y-2: 85%;
    --blob-size-2: 24%;
  }

  10% {
    --blob-x-2: 63%;
    --blob-y-2: 76%;
    --blob-size-2: 28%;
  }

  20% {
    --blob-x-2: 72%;
    --blob-y-2: 62%;
    --blob-size-2: 34%;
  }

  30% {
    --blob-x-2: 77%;
    --blob-y-2: 49%;
    --blob-size-2: 40%;
  }

  40% {
    --blob-x-2: 75%;
    --blob-y-2: 38%;
    --blob-size-2: 46%;
  }

  50% {
    --blob-x-2: 66%;
    --blob-y-2: 34%;
    --blob-size-2: 50%;
  }

  60% {
    --blob-x-2: 58%;
    --blob-y-2: 41%;
    --blob-size-2: 46%;
  }

  70% {
    --blob-x-2: 48%;
    --blob-y-2: 52%;
    --blob-size-2: 40%;
  }

  80% {
    --blob-x-2: 42%;
    --blob-y-2: 66%;
    --blob-size-2: 34%;
  }

  90% {
    --blob-x-2: 49%;
    --blob-y-2: 77%;
    --blob-size-2: 29%;
  }

  100% {
    --blob-x-2: 55%;
    --blob-y-2: 85%;
    --blob-size-2: 24%;
  }
}

.onboarding-start-container {
  display: flex;
  flex-direction: column;
  border: 4px solid rgba(255, 255, 255, 0.65);
  border-radius: 1rem;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.15);
  max-width: 40rem;
  width: 100%;
  margin: 0 auto 2rem;
}

.textarea-container {
  position: relative;
  z-index: 3;
  background: rgba(0, 0, 0, 0.85);
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
  padding: 1rem;
}

.textarea-container textarea {
  width: 100%;
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1rem;
  font-family: system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  position: relative;
  z-index: 4;
}

.textarea-container textarea::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.textarea-container textarea::placeholder {
  color: rgba(255, 255, 255, 0.5);
  opacity: 1;
}

.drag-drop-container {
  border-top: 1px solid rgba(128, 128, 128, 1);
  background: rgba(255, 255, 255, 0.1);
}

.onboarding-start-container .drag-drop-container {
  background: rgba(0, 0, 0, 0.7);
  z-index: 2;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
}

#drag-drop-area {
  position: relative;
  z-index: 3;
  padding: 1rem;
}

.drag-drop-instructions {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 auto;
  padding-left: 1.5rem;
  background: transparent url(/img/icons/icon-files.svg) no-repeat center left;
  cursor: pointer;
}

.generate-button-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

.primary-cta {
  display: inline-block;
  text-shadow:
    0 -1px 0 rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255, 255, 255, 0.23);
  box-shadow:
    0 0 0 2px #000,
    0 0 0 6px rgba(255, 255, 255, 0.2);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border-radius: 0.5rem;
  padding: 0.5rem 1.5rem;
  background: linear-gradient(180deg, #fe8300 0%, #ff3c00 100%);
  background-clip: padding-box;
  background-size: cover;
  background-position: 50%;
  transition: transform 0.1s ease-in-out;
  border: none;
  color: white;
  cursor: pointer;
}

.primary-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.primary-cta:hover {
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 1),
    0 0 0 6px rgba(255, 255, 255, 0.3),
    0 4px 12px rgba(255, 60, 0, 0.3);
}

.primary-cta:active {
  transform: scale(0.95);
}

.lower-container {
  width: 100%;
  padding: 12rem 0;
  background: #2da082 url("/img/wave-pattern.svg") repeat-x top;
  .contact-container {
    margin: 0 auto;
    max-width: 30rem;
    /* Tailwind's preflight makes this border-box globally, so the
       horizontal padding added at <=1328px was being subtracted from
       the 30rem instead of sitting outside it — leaving 22rem of
       content and wrapping the section title. content-box keeps 30rem
       of actual content at every breakpoint. */
    box-sizing: content-box;
  }
}

.contact-container .section-title {
  text-align: center;
}

.connect-grid {
  margin: 4rem auto 4rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  justify-items: center;
  align-items: center;
}

.connect-item {
  width: 100%;
  max-width: 6.25rem;
  height: auto;
}

.section-content a.email-link {
  display: block;
  color: var(--color-typography-primary);
  font-size: var(--typo-body-size);
  font-weight: var(--typo-body-weight);
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  text-align: center;
  padding-left: 2.5rem;
  background: transparent url(/img/email-icon.svg) left center no-repeat;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

.section-content a.email-link:hover {
  opacity: 1;
}

.animated-path {
  fill: url(#animatedGradient-gs);
  transition: fill 0.3 ease;
}

.animated-svg {
  margin: 0 auto;
}

.animated-svg:hover .animated-path {
  fill: url(#animatedGradient);
}

@keyframes moveColors {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.primary-cta-container {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto 2.5rem;
}

.docs-container {
  min-height: 100%;
}

.docs-cta {
  display: block;
  font-size: var(--typo-body-size);
  font-weight: var(--typo-body-weight);
  padding-left: 2.5rem;
  background: transparent url(/img/icon-docs.svg) left center no-repeat;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

.docs-cta:hover {
  opacity: 1;
}

/* Outlined icon CTA: an icon, a label, a hairline box that brightens on hover.
   Shared by the manifesto link and the Claude Code launcher. */

.manifesto-cta,
.build-alt-cta {
  font-family: inherit;
  font-size: var(--typo-body-size);
  font-weight: var(--typo-body-weight);
  padding: 1rem 2rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0.5rem;
  width: -moz-fit-content;
  width: fit-content;
  margin: 0 auto;
  transition: border-color 0.3s ease-in-out;
}

.manifesto-cta:hover,
.build-alt-cta:hover,
.build-alt-cta:focus-visible {
  border-color: rgba(255, 255, 255, 1);
}

.manifesto-cta {
  display: block;
  /* Clears the background-image icon sitting at left 2rem. */
  padding-left: 4.5rem;
  background: transparent url(/img/icon-docs.svg) left 2rem center no-repeat;
}

/* Demo video. Sits directly under the hero, inside the hero's own ambient glow —
   it needs no second glow of its own. The frame is the site's existing double-ring
   token plus the product frames' drop shadow, so it reads as part of the same
   family as the tour below it. */

.demo-video {
  width: 100%;
  max-width: 1200px;
  margin: 4rem auto 0;
  padding: 0 2rem;
}

.demo-video-frame {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow:
    var(--style-double-border),
    0 24px 60px rgba(0, 0, 0, 0.5);
}

.demo-video-player {
  display: block;
  width: 100%;
  height: auto;
  /* Reserve the slot before metadata loads so the page doesn't jump. */
  aspect-ratio: 16 / 9;
  background: var(--color-main-bg);
}

/* The poster-only still fills the 16:9 slot; the <video> keeps its default
   contain so a non-16:9 file letterboxes on black rather than cropping. */

.demo-video-still {
  -o-object-fit: cover;
     object-fit: cover;
}

.demo-video-caption {
  margin: 1rem 0 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
}

.benefit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem 3rem;
  width: 100%;
}

/* Feature Card Styling */

.benefit {
  --benefit-radius: 1.5rem;
  position: relative;
  cursor: default;
  padding: 2.5rem;
  border-radius: var(--benefit-radius);
  border: 1px solid var(--color-transparent-border);
  background: rgba(20, 20, 20, 0.25);
  -webkit-backdrop-filter: blur(16px);
          backdrop-filter: blur(16px);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.05),
    0 8px 32px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.15s ease-out,
    box-shadow 0.3s ease-out,
    border-color 0.3s ease-out;
  transform-style: preserve-3d;
  will-change: transform;
}

.benefit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--benefit-radius);
  background: radial-gradient(
    ellipse at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(6, 214, 160, 0.15) 0%,
    rgba(17, 138, 178, 0.08) 40%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease-out;
  pointer-events: none;
  z-index: 0;
}

.benefit:hover::before {
  opacity: 1;
}

.benefit:hover {
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1),
    0 20px 40px rgba(0, 0, 0, 0.4),
    0 0 60px rgba(6, 214, 160, 0.1);
}

/* Glare/shine effect layer */

.benefit::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--benefit-radius);
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 50%,
    transparent 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
  z-index: 1;
}

.benefit:hover::after {
  opacity: 1;
}

.benefit .section-title,
.benefit .section-content {
  position: relative;
  z-index: 2;
}

/* Compact benefit row. By the time the reader reaches this, four elaborate product
   frames have already had their turn — so the closing argument is the still thing on
   the page: same glass card, a quarter of the size, no tilt and no glare layer.
   Scoped as a modifier because showcase.liquid still uses the full-size cards. */

.benefit-grid--compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  max-width: 1200px;
  margin: 8rem auto;
  padding: 0 2rem;
}

.benefit-grid--compact .benefit {
  --benefit-radius: 1rem;
  padding: 1.5rem;
}

/* The diagonal glare reads as a smudge at this size. */

.benefit-grid--compact .benefit::after {
  display: none;
}

.benefit-grid--compact .section-title {
  font-size: 1.5rem;
  line-height: 1.15;
  margin: 0 0 0.75rem;
  /* Four across, one title wraps to two lines and the rest don't — reserving the
     second line keeps all four bodies starting on the same baseline. Released
     below, where the columns are wide enough that every title fits on one line. */
  min-height: 2.3em;
}

.benefit-grid--compact .section-content {
  font-size: 0.9375rem;
  line-height: 1.55;
}

.benefit-grid--compact .section-content p {
  margin: 0 0 0.75rem;
}

.benefit-grid--compact .section-content p:last-child {
  margin-bottom: 0;
}

@media (max-width: 1100px) {
  .benefit-grid--compact {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benefit-grid--compact .section-title {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .benefit-grid--compact {
    grid-template-columns: minmax(0, 1fr);
    margin: 5rem auto;
  }
}

.section-title {
  font-family: "Build", system-ui, sans-serif;
  font-size: var(--typo-subheader-size);
  font-weight: 700;
  line-height: 1.1;
  margin: 0 0 2rem;
  font-feature-settings: "ss01" on;
}

.section-content {
  font-size: var(--typo-body-size-large);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.section-content a {
  color: var(--color-secondary-interactive);
}

.section-content p {
  margin: 0 0 2rem;
}

.pricing-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12rem 6rem;
  width: 100%;
}

.pricing-container .pricing-sticker {
  width: 100%;
}

.footer {
  background-color: #2da082;
  padding-bottom: 6rem;
  color: var(--color-typography-secondary);
  text-align: center;
}

.footer .copyright {
  margin-bottom: 1rem;
}

.footer-mark {
  display: block;
  margin: 0 auto 2rem;
  opacity: 0.5;
  transition: opacity 0.3s ease-in-out;
}

.footer-mark:hover {
  opacity: 1;
}

.manifesto {
  padding: 15rem 0 6rem;
}

.manifesto .hero-message {
  text-align: left;
  max-width: 48rem;
  padding: 0 2.5rem;
}

.manifesto .md p:not(:empty) {
  font-size: var(--typo-body-size-large);
  line-height: 1.7;
  font-weight: 400;
  margin-bottom: 1.5rem;
}

.manifesto .md h1,
.manifesto .md h2 {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  -webkit-text-fill-color: var(--color-typography-primary);
  color: var(--color-typography-primary);
}

.manifesto .md h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 3.5rem 0 1.5rem;
}

.manifesto .md h2 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.3;
  margin: 3rem 0 1.25rem;
}

.manifesto .md p:first-of-type {
  font-size: 1.375rem;
  line-height: 1.65;
  font-weight: 400;
  margin-bottom: 2rem;
}

.manifesto .md strong {
  font-weight: 600;
  color: rgba(255, 255, 255, 0.95);
}

.image-aside {
  color: var(--color-typography-secondary);
  font-size: var(--typo-body-size-large);
  display: block;
  text-align: center;
  margin-top: 2rem;
}

.manifesto h2:last-of-type {
  font-family: "Build", system-ui, sans-serif;
  font-size: 4.5rem;
  margin: 4rem 0 5rem;
  font-weight: 700;
  line-height: 1.1;
  font-feature-settings: "ss01" on;
  /* Re-apply rainbow gradient for signature */
  background: radial-gradient(
    circle at var(--hero-mouse-x, 50%) var(--hero-mouse-y, 50%),
    #ef476f 0%,
    #ffd166 25%,
    #06d6a0 50%,
    #118ab2 75%,
    #ef476f 100%
  );
  background-size: 200% 200%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: moveColors 10s infinite ease-in-out;
}

.side-nav-item-active {
  background: var(--color-secondary-interactive);
  border-radius: 0.5rem;
}

.side-nav-item:hover {
  color: var(--color-secondary-interactive);
}

.side-nav-item.side-nav-item-active:hover {
  color: var(--color-typography-primary);
}

.side-nav-sections {
  display: flex;
  flex-direction: column;
  margin: -0.25rem 0 0.75rem 1.25rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--color-transparent-border);
}

.side-nav-subitem {
  display: block;
  padding: 0.3rem 0.5rem;
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--color-typography-secondary);
}

.side-nav-subitem:hover {
  color: var(--color-secondary-interactive);
}

.mobile-nav-sections {
  display: flex;
  flex-direction: column;
  margin: 0 2rem 0.5rem;
  padding-left: 1rem;
  border-left: 1px solid var(--color-transparent-border);
}

.mobile-nav-subitem {
  display: block;
  padding: 0.4rem 0.5rem;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--color-typography-secondary);
}

.md a.docs-section-anchor {
  color: var(--color-typography-primary);
  margin: 2rem 0 0;
}

.cli-options code,
.cli-arguments code {
  width: -moz-fit-content;
  width: fit-content;
}

#docs-sidebar {
  height: -moz-fit-content;
  height: fit-content;
  max-height: calc(100vh - 100px - 2rem);
  position: sticky;
  top: 100px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Scrollable nav surfaces keep their scrollbars hidden */

#docs-sidebar,
#docs-selector,
#mobile-menu {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#docs-sidebar::-webkit-scrollbar,
#docs-selector::-webkit-scrollbar,
#mobile-menu::-webkit-scrollbar {
  display: none;
}

.logo-text {
  font-family: "citizen", sans-serif;
  font-style: normal;
  border-color: rgb(123, 186, 177);
  margin: 0.2em;
}

.logo-icon > * {
  display: block;
  position: absolute;
}

.logo-icon .color {
  display: none;
}

#logo:hover .color {
  display: block;
}

#mobile-menu {
  background-color: rgba(0, 0, 0, 0);
  z-index: 9999;
}

#mobile-menu .mobile-nav-item {
  font-weight: 600;
  text-align: center;
  margin: 0.5rem 0;
}

#mobile-menu .mobile-nav-item a {
  padding: 0.5rem 0;
  display: block;
}

#mobile-menu .mobile-nav-item-cta {
  background: linear-gradient(
    180deg,
    var(--color-primary-cta-highlight) 0%,
    var(--color-primary-cta-shadow) 100%
  );
  border-radius: 0.5rem;
  margin: 1rem 4rem;
}

#mobile-menu .mobile-nav-item-cta a {
  display: block;
  color: var(--color-typography-primary);
  padding: 1rem 0.9rem;
}

.modal-backdrop {
  position: fixed;
  -webkit-backdrop-filter: grayscale(1) blur(4px);
          backdrop-filter: grayscale(1) blur(4px);
  inset: 0;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 9997;
}

.nav-left,
.nav-right {
  display: block;
  height: 1.5rem;
  width: 1.5rem;
}

.nav-left {
  background: transparent url(/img/nav-left.svg) no-repeat;
}

.nav-right {
  background: transparent url(/img/nav-right.svg) no-repeat;
}

.nav-disabled {
  opacity: 0.5;
}

/* Responsive */

@media only screen {
  .docs-cta,
  .section-content a.email-link {
    opacity: 1;
  }
}

@media (max-width: 1328px) {
  #nav {
    padding: 1.25rem 4rem;
  }

  .docs-container {
    padding: 8rem 4rem;
  }

  .hero-message {
    font-size: clamp(3rem, 14vw, 7.5rem);
    line-height: 1;
    padding: 0 2rem;
  }

  .demo-video {
    padding: 0 4rem;
  }

  .benefit-grid:not(.benefit-grid--compact),
  .pricing-container {
    padding: 0 4rem;
    gap: 3rem 2rem;
  }

  .contact-container {
    padding: 0 4rem;
  }

  .pricing-hero {
    padding: 10rem 4rem 8rem;
  }
}

@media (max-width: 928px) {
  #header {
    padding-top: 10rem;
  }

  #header-ctas {
    margin-top: 3rem;
  }

  .hero-message {
    font-size: clamp(2.5rem, 12vw, 7.5rem);
    padding: 0 1.5rem;
  }

  .benefit-grid:not(.benefit-grid--compact),
  .pricing-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .benefit {
    padding: 2rem;
  }

  .section-title {
    font-size: 2.25rem;
    margin: 0 0 1rem;
  }
}

@media (max-width: 768px) {
  #nav,
  #docs-nav {
    padding: 1.25rem 2rem;
  }

  #docs-nav {
    display: flex;
    justify-content: space-between;
  }

  .hero-message {
    font-size: clamp(2rem, 11vw, 7.5rem);
    padding: 0 1rem;
  }

  .demo-video {
    padding: 0 1rem;
  }

  .md h1.cli-header {
    font-size: 6vw;
  }

  .manifesto {
    padding-top: 8rem;
  }

  .manifesto .hero-message {
    font-size: 16vw;
  }

  .manifesto-body {
    padding: 0 2rem;
  }

  .manifesto .md h1 {
    font-size: 2rem;
    margin: 2.5rem 0 1.25rem;
  }

  .manifesto .md h2 {
    font-size: 1.5rem;
    margin: 2.5rem 0 1rem;
  }

  .manifesto .md p:first-of-type {
    font-size: 1.25rem;
  }

  .manifesto h2:last-of-type {
    font-size: 3rem;
    margin: 3rem 0 4rem;
  }

  .docs-container {
    padding: 8rem 2rem 2rem;
  }

  /* Smaller tiles rather than fewer: the row carries as many as it carries,
     and every template still goes past. Set on the mosaic because the height
     it reserves is computed from this. */

  .template-mosaic {
    --tile-w: 11rem;
  }

  .benefit-grid:not(.benefit-grid--compact),
  .pricing-container {
    padding: 0 2rem;
  }

  .contact-container {
    padding: 0 2rem;
  }

  .pricing-hero {
    padding: 8rem 2rem 6rem;
    gap: 3rem;
  }

  .pricing-tier-content {
    padding: 1.75rem;
  }

  .pricing-tier-icon {
    width: 2.5rem;
    height: 2.5rem;
  }

  .pricing-tier-icon svg {
    width: 20px;
    height: 20px;
  }

  .pricing-tier-name {
    font-size: 1.15rem;
  }

  .pricing-tier-audience {
    font-size: 0.8rem;
  }

  .pricing-tier-price-amount {
    font-size: 2.5rem;
  }

  .pricing-tier-price-term {
    font-size: 1rem;
  }

  .pricing-tier-features {
    font-size: 0.875rem;
  }

  .connect-grid {
    margin: 1.5rem auto;
    max-width: 26.75rem;
    gap: 0.8rem;
  }

  .connect-item {
    transform: scale(0.65);
  }

  .footer {
    margin-top: 0;
    padding: 4rem;
  }
}

/* Legal */

.legal {
  padding: 4rem 0;
}

.legal .nav-top {
  margin-bottom: 4rem;
}

.legal h1 {
  color: var(--color-heading);
  position: relative;
  font-family: "Ameda", system-ui, sans-serif;
  font-size: 7.5rem;
  line-height: 9rem;
  text-align: center;
}

.legal h2 {
  font-size: 2rem;
  font-weight: 600;
  margin: 3rem 0 2rem;
  text-align: left;
}

.legal ul,
.legal ol {
  padding-left: 2rem;
  margin-bottom: 1rem;
  text-align: left;
}

/* Build with Claude launcher */

.bwc-panel {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  padding: 2rem;
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: var(--style-double-border);
}

/* No min-height: the widget is rendered with appearance "interaction-only", so
   it occupies nothing unless Turnstile decides to show a challenge, and a
   reserved box would just be a gap under the button. */

.bwc-turnstile {
  display: flex;
  justify-content: center;
}

.bwc-modal {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  padding: 2rem;
  border: none;
  border-radius: 1rem;
  text-align: left;
  color: var(--color-typography-primary);
  background: #111;
  box-shadow: var(--style-double-border);
}

/* A dialog is display:none until opened, so this must not be a bare display
   rule - it applies only while open. */

.bwc-modal[open] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.bwc-modal::backdrop {
  background: rgba(0, 0, 0, 0.7);
}

.bwc-modal-title {
  font-family: "Build", system-ui, sans-serif;
  font-size: 1.75rem;
  line-height: 1.1;
  margin: 0;
}

.bwc-modal-subtitle {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0;
}

.bwc-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  font-size: 1.5rem;
  line-height: 1;
  border-radius: 50%;
  color: var(--color-typography-secondary);
  border: 1px solid var(--color-transparent-border);
}

.bwc-launch[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.bwc-error {
  margin-top: 1rem;
  color: var(--color-primary-cta-highlight);
}

.bwc-note {
  color: var(--color-typography-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.bwc-note a {
  font-weight: 700;
  --tw-text-opacity: 1;
  color: rgb(167 106 207 / var(--tw-text-opacity));
}

.bwc-note a:hover {
  text-decoration-line: underline;
}

.bwc-steps {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bwc-step;
}

.bwc-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  counter-increment: bwc-step;
}

.bwc-button-cols {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.bwc-step-title {
  margin: 0;
  font-weight: 600;
}

.bwc-step-title::before {
  content: counter(bwc-step) ". ";
  color: var(--color-typography-secondary);
}

/* Stepped through already: still readable and still actionable, just no longer
   the thing being asked for. */

.bwc-step.done .bwc-step-title::before {
  content: "\2713 ";
  color: var(--color-secondary-interactive);
}

.bwc-step.done .bwc-note,
.bwc-step.done .bwc-permission {
  /* Room for the inline screenshot when the sentence wraps. */
  line-height: 2;
}

.bwc-permission-shot {
  display: inline-block;
  vertical-align: middle;
  height: 1.75rem;
  width: auto;
  margin-left: 0.25rem;
  border-radius: 0.5rem;
}

.bwc-connector {
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  color: var(--color-typography-primary);
  border: 1px solid var(--color-transparent-border);
  transition: border-color 0.15s ease;
}

.bwc-connector:hover {
  border-color: var(--color-typography-secondary);
}

.bwc-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--color-typography-secondary);
}

.bwc-check label {
  cursor: pointer;
}

/* Matches the toggles in the editor. */

.switch {
  display: inline-block;
  position: relative;
  width: 50px;
  height: 28px;
  flex-shrink: 0;
}

.switch input {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.slider {
  position: absolute;
  z-index: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--color-transparent-border);
  cursor: pointer;
  transition: 0.2s ease;
}

.slider::before {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background-color: var(--color-typography-secondary);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: 0.2s ease;
}

input:checked + .slider {
  background: rgba(167, 106, 207, 0.5);
  border-color: rgba(167, 106, 207, 0.4);
}

input:checked + .slider::before {
  transform: translateX(22px);
  background-color: var(--color-typography-primary);
}

.switch input:focus-visible + .slider {
  outline: 2px solid var(--color-typography-secondary);
  outline-offset: 2px;
}

.slider.round {
  border-radius: 28px;
}

.slider.round::before {
  border-radius: 50%;
}

.bwc-open {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-weight: 600;
  color: var(--color-main-bg);
  background: var(--color-primary-cta-highlight);
}

.bwc-open[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.bwc-launched {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-transparent-border);
}

/* Beats .bwc-launched on specificity, so [hidden] still hides it. */

.bwc-launched[hidden] {
  display: none;
}

.bwc-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  /* A URL has no spaces to break at, and the dialog is narrow on a phone. */
  overflow-wrap: anywhere;
}

.bwc-copy-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* A peer of the copy button, not a second CTA: same height, no border, so the
   two read as ways out of the same dialog rather than a ranked pair. */

.bwc-cloud {
  display: inline-flex;
  align-items: center;
  padding: 0.625rem 0.5rem;
  color: var(--color-secondary-interactive);
  font-size: 0.9rem;
}

.bwc-cloud:hover {
  text-decoration: underline;
}

.bwc-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  border-radius: 0.5rem;
  color: var(--color-typography-primary);
  border: 1px solid var(--color-transparent-border);
  transition:
    border-color 0.15s ease,
    color 0.15s ease;
}

.bwc-copy:hover {
  border-color: var(--color-typography-secondary);
}

.bwc-copy.copied {
  color: var(--color-secondary-interactive);
  border-color: var(--color-secondary-interactive);
}

/* One icon at a time: the check replaces the clipboard on success. */

.bwc-copy-check,
.bwc-copy.copied .bwc-copy-icon {
  display: none;
}

.bwc-copy.copied .bwc-copy-check {
  display: block;
}

.bwc-copy-status {
  min-height: 1.25rem;
  margin: 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-typography-secondary);
}

.bwc-details {
  text-align: left;
  margin-top: 1rem;
}

.bwc-details summary {
  cursor: pointer;
  color: var(--color-secondary-interactive);
}

.build-alt {
  margin: 2rem 0 1rem;
  font-size: var(--typo-body-size);
  color: var(--color-typography-secondary);
  line-height: 1.6;
}

/* A real <button> (it opens a dialog) wearing the outlined-CTA look. Flex with a
   1rem gap reproduces the manifesto link's icon-to-label spacing, which its
   background-image + padding-left achieves a different way. */

.build-alt-cta {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: none;
  color: var(--color-primary-cta-highlight);
  cursor: pointer;
}

/* cursor: progress, matching what the button used to show: the disable lasts for
   the Turnstile round-trip, so it means "working", not "unavailable". */

.build-alt-cta[disabled] {
  opacity: 0.6;
  cursor: progress;
  border-color: rgba(255, 255, 255, 0.5);
}

.build-alt-mark {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.build-with-claude {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 52rem;
  margin: 0 auto;
  /* Clears the fixed nav. */
  padding: 12rem 2rem 8rem;
  text-align: center;
}

.bwc-title {
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  line-height: 1;
  padding-bottom: 0.1em;
}

@media (max-width: 768px) {
  .build-with-claude {
    padding-top: 8rem;
  }
}

.link-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.5rem;
  letter-spacing: 0.25em;
  word-break: break-all;
  margin: 0.5rem 0 1.5rem;
}

.link-code-label {
  margin: 0;
}

.link-fineprint {
  margin-top: 2rem;
  max-width: 52ch;
}

/* Phones. Placed here rather than beside the other mosaic rules because the
   override at 768px lives further up the file: an earlier rule at equal
   specificity would lose to it at every width this one cares about. */

@media (max-width: 520px) {
  .template-mosaic {
    --tile-w: 9rem;
  }

  .marquee-row {
    /* Less of the row is on screen, so the fade has to be shorter or it eats
       the tiles it is supposed to be revealing. */
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent,
      #000 10%,
      #000 90%,
      transparent
    );
    mask-image: linear-gradient(
      90deg,
      transparent,
      #000 10%,
      #000 90%,
      transparent
    );
  }
}

.last\:border-b-0:last-child {
  border-bottom-width: 0px;
}

.hover\:right-2:hover {
  right: 0.5rem;
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mb-40 {
    margin-bottom: 10rem;
  }

  .md\:mt-20 {
    margin-top: 5rem;
  }

  .md\:mt-40 {
    margin-top: 10rem;
  }

  .md\:block {
    display: block;
  }

  .md\:flex {
    display: flex;
  }

  .md\:grid {
    display: grid;
  }

  .md\:min-h-20 {
    min-height: 5rem;
  }

  .md\:max-w-\[1200px\] {
    max-width: 1200px;
  }

  .md\:scale-100 {
    --tw-scale-x: 1;
    --tw-scale-y: 1;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:justify-center {
    justify-content: center;
  }

  .md\:rounded-lg {
    border-radius: 0.5rem;
  }

  .md\:border {
    border-width: 1px;
  }

  .md\:border-gray {
    --tw-border-opacity: 1;
    border-color: rgb(230 230 230 / var(--tw-border-opacity));
  }

  .md\:bg-white {
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
  }

  .md\:px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .md\:pt-20 {
    padding-top: 5rem;
  }

  .md\:opacity-60 {
    opacity: 0.6;
  }
}

@media (min-width: 976px) {
  .lg\:flex {
    display: flex;
  }

  .lg\:hidden {
    display: none;
  }
}

.\[\&\.showing\]\:pointer-events-auto.showing {
  pointer-events: auto;
}

.\[\&\.showing\]\:translate-y-0.showing {
  --tw-translate-y: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.\[\&\.showing\]\:opacity-100.showing {
  opacity: 1;
}