/* =============================================================================
   Daylight Design System
   Source of truth: https://github.com/Numbered-com/daylight (marketing repo)

   Scoped, self-contained stylesheet. All classes are prefixed `daylight-` and
   design tokens are scoped under `.daylight` so this file can be loaded
   alongside the global basecoat styles without conflict.

   Usage: wrap a region with `<div class="daylight">...</div>` to pick up the
   typography + color defaults, then apply `daylight-*` classes as needed.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Fonts (paths relative to this file at /static/css/daylight.css)
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: "Feature Deck";
  src: url("../fonts/FeatureDeck/FeatureDeck-Regular.f75d140d9669.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-Regular.fd8b9319b807.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-RegularItalic.6f07f32cc0b9.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-Medium.ee077a23e285.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-MediumItalic.1bd49a79eff3.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-Bold.91fca4ec943e.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aeonik Pro";
  src: url("../fonts/AeonikPro/AeonikPro-BoldItalic.9f0cb1e5b6db.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "ABC Social Mono";
  src: url("../fonts/ABCSocialMono/ABCSocialMono-Regular.2d79d35152b4.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "ABC Social Mono";
  src: url("../fonts/ABCSocialMono/ABCSocialMono-Bold.f317d7986f6c.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* -----------------------------------------------------------------------------
   Design tokens (scoped to .daylight)
   Colors mirror packages/config/tailwind/preset/colors.js
   ----------------------------------------------------------------------------- */
.daylight {
  /* Primary palette */
  --daylight-orange: #F66F00;
  --daylight-orange-dark: #EF6910;
  --daylight-orange-light: #FF9900;
  --daylight-orange-20: #FF8A04;
  --daylight-orange-10: #FFA224;
  --daylight-beige: #FFF7E9;
  --daylight-beige-dark: #DACAB6;
  --daylight-beige-30: #F0E5CF;
  --daylight-beige-20: #F7EED9;
  --daylight-black: #111111;
  --daylight-black-lighter: #1E1E1E;
  --daylight-offwhite: #FFFEFB;
  --daylight-grey: #A09B93;
  --daylight-grey-txt: #514E4A;
  --daylight-white: #FFFFFF;

  /* Secondary palette (marketing values) */
  --daylight-yellow: #FFD700;
  --daylight-brown: #4C2806;
  --daylight-purple: #C8B2FF;
  --daylight-purple-dark: #321F61;
  --daylight-blue: #BED5FF;
  --daylight-blue-dark: #1D3E86;

  /* Status */
  --daylight-red: #FF0000;
  --daylight-red-light: #FF2B0080;
  --daylight-warning: #FF7300;

  /* Overlays */
  --daylight-overlay-black: rgba(0, 0, 0, 0.15);
  --daylight-overlay-white: rgba(255, 255, 255, 0.30);
  --daylight-glass-bg: rgba(0, 0, 0, 0.11);
  --daylight-card-border: rgba(30, 30, 30, 0.10);
  --daylight-glass-border: rgba(255, 255, 255, 0.32);
  --daylight-white-32: rgba(255, 255, 255, 0.32);
  --daylight-input-border: rgba(28, 28, 28, 0.15);

  /* Typography */
  --daylight-font-sans: "Aeonik Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --daylight-font-mono: "ABC Social Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --daylight-font-display: "Feature Deck", "Playfair Display", Georgia, serif;

  /* Radius */
  --daylight-radius-sm: 4px;       /* marketing spec */
  --daylight-radius-panel: 6px;
  --daylight-radius-card: 16px;

  /* Motion — durations */
  --daylight-duration-hover: 150ms;
  --daylight-duration-fast: 100ms;
  --daylight-duration-base: 300ms;
  --daylight-duration-slow: 1000ms;
  --daylight-duration-reveal: 1000ms;

  /* Motion — full easing library from marketing preset */
  --daylight-ease-default: cubic-bezier(0.4, 0, 0.2, 1);

  --daylight-ease-quad-in: cubic-bezier(0.26, 0, 0.6, 0.2);
  --daylight-ease-cubic-in: cubic-bezier(0.4, 0, 0.68, 0.06);
  --daylight-ease-quart-in: cubic-bezier(0.52, 0, 0.74, 0);
  --daylight-ease-quint-in: cubic-bezier(0.64, 0, 0.78, 0);
  --daylight-ease-sine-in: cubic-bezier(0.32, 0, 0.6, 0.36);
  --daylight-ease-expo-in: cubic-bezier(0.66, 0, 0.86, 0);
  --daylight-ease-circ-in: cubic-bezier(0.54, 0, 1, 0.44);
  --daylight-ease-back-in: cubic-bezier(0.6, -0.28, 0.735, 0.045);

  --daylight-ease-quad-out: cubic-bezier(0.4, 0.8, 0.74, 1);
  --daylight-ease-cubic-out: cubic-bezier(0.34, 1.02, 0.68, 1);
  --daylight-ease-quart-out: cubic-bezier(0.26, 1.04, 0.54, 1);
  --daylight-ease-quint-out: cubic-bezier(0.22, 1.1, 0.48, 1);
  --daylight-ease-sine-out: cubic-bezier(0.4, 0.64, 0.68, 1);
  --daylight-ease-expo-out: cubic-bezier(0.16, 1.08, 0.38, 0.98);
  --daylight-ease-circ-out: cubic-bezier(0, 0.56, 0.46, 1);
  --daylight-ease-back-out: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --daylight-ease-quad-inout: cubic-bezier(0.48, 0.04, 0.52, 0.96);
  --daylight-ease-cubic-inout: cubic-bezier(0.66, 0, 0.34, 1);
  --daylight-ease-quart-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --daylight-ease-quint-inout: cubic-bezier(0.84, 0, 0.16, 1);
  --daylight-ease-sine-inout: cubic-bezier(0.36, 0, 0.64, 1);
  --daylight-ease-expo-inout: cubic-bezier(0.9, 0, 0.1, 1);
  --daylight-ease-circ-inout: cubic-bezier(0.88, 0.14, 0.12, 0.86);
  --daylight-ease-back-inout: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  --daylight-ease-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Base typography inside a .daylight region */
  font-family: var(--daylight-font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--daylight-grey-txt);
}

/* -----------------------------------------------------------------------------
   Typography — numeric size scale (matches marketing preset/fonts.js)
   ----------------------------------------------------------------------------- */
.daylight-text-7 { font-size: 7px; }
.daylight-text-8 { font-size: 8px; }
.daylight-text-9 { font-size: 9px; }
.daylight-text-10 { font-size: 10px; }
.daylight-text-11 { font-size: 11px; }
.daylight-text-12 { font-size: 12px; line-height: 1.5; letter-spacing: -0.02em; }
.daylight-text-13 { font-size: 13px; }
.daylight-text-14 { font-size: 14px; line-height: 1.4; }
.daylight-text-20 { font-size: 20px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-22 { font-size: 22px; line-height: 0.95; }
.daylight-text-28 { font-size: 28px; line-height: 0.95; }
.daylight-text-30 { font-size: 30px; line-height: 1.15; }
.daylight-text-35 { font-size: 35px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-36 { font-size: 36px; line-height: 1.15; letter-spacing: -0.02em; }
.daylight-text-40 { font-size: 40px; line-height: 1.16; }
.daylight-text-45 { font-size: 45px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-50 { font-size: 50px; line-height: 1.15; }
.daylight-text-55 { font-size: 55px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-60 { font-size: 60px; line-height: 0.95; }
.daylight-text-70 { font-size: 70px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-75 { font-size: 75px; line-height: 0.95; }
.daylight-text-85 { font-size: 85px; line-height: 1.16; letter-spacing: -0.02em; }
.daylight-text-100 { font-size: 100px; line-height: 0.95; }
.daylight-text-120 { font-size: 120px; line-height: 0.95; }

/* Font family utilities */
.daylight-font-sans { font-family: var(--daylight-font-sans); }
.daylight-font-mono { font-family: var(--daylight-font-mono); }
.daylight-font-display { font-family: var(--daylight-font-display); }

/* Font weight utilities */
.daylight-font-regular { font-weight: 400; }
.daylight-font-medium { font-weight: 500; }
.daylight-font-bold { font-weight: 700; }

/* Font style utilities */
.daylight-italic { font-style: italic; }

/* -----------------------------------------------------------------------------
   Semantic type presets (higher-level composition)
   ----------------------------------------------------------------------------- */
.daylight-display {
  font-family: var(--daylight-font-display);
  font-weight: 400;
  font-size: clamp(40px, 6vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.daylight-display-section {
  font-family: var(--daylight-font-display);
  font-weight: 400;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.daylight-title {
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 32px;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.daylight-title-sm {
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.16;
  letter-spacing: -0.02em;
}

.daylight-body {
  font-family: var(--daylight-font-sans);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
}

.daylight-body-sm {
  font-family: var(--daylight-font-sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.4;
}

/* Mono labels — always uppercase per brand */
.daylight-label-mono {
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.daylight-label-mono-lg {
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.35;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* -----------------------------------------------------------------------------
   Buttons — port of packages/ui/components/button/Button.tsx
   Shared: aeonik-pro medium, h-50, px-24, rounded-sm, text-12.
   Hover pattern: slow graceful return (1000ms) + snappy hover (100ms).
   ----------------------------------------------------------------------------- */
.daylight-btn-primary,
.daylight-btn-secondary,
.daylight-btn-gradient {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 12px;
  height: 50px;
  padding: 0 24px;
  background: transparent;
  border: 0;
  border-radius: var(--daylight-radius-sm);
  cursor: pointer;
  text-decoration: none;
  overflow: clip;
  outline: none;
  transition-property: background-color, color, opacity;
  transition-duration: var(--daylight-duration-slow);
  transition-timing-function: var(--daylight-ease-expo-out);
}

.daylight-btn-primary:hover,
.daylight-btn-secondary:hover,
.daylight-btn-gradient:hover {
  transition-duration: var(--daylight-duration-fast);
}

.daylight-btn-primary:focus-visible,
.daylight-btn-secondary:focus-visible,
.daylight-btn-gradient:focus-visible,
.daylight-btn-classic-underlined:focus-visible,
.daylight-btn-underlined:focus-visible,
.daylight-btn-solid-underlined:focus-visible {
  outline: 2px solid var(--daylight-black);
  outline-offset: 4px;
}

.daylight-btn-primary { background: var(--daylight-black); color: var(--daylight-white); }
.daylight-btn-secondary { background: var(--daylight-beige); color: var(--daylight-black); }

.daylight-btn-gradient {
  color: var(--daylight-white);
  background: linear-gradient(135deg, var(--daylight-orange) 0%, var(--daylight-orange-light) 50%, var(--daylight-yellow) 100%);
  background-size: 200% 200%;
  animation: daylight-gradient-shift 8s var(--daylight-ease-expo-inout) infinite;
}

@keyframes daylight-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Underlined link-style buttons */
.daylight-btn-classic-underlined {
  display: inline-flex;
  align-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.daylight-btn-underlined {
  position: relative;
  display: inline-block;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0 0 2px;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  text-decoration: none;
}
.daylight-btn-underlined::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 500ms var(--daylight-ease-expo-out);
  will-change: transform;
}
.daylight-btn-underlined:hover::after,
.daylight-btn-underlined:focus-visible::after {
  transform: scaleX(1);
}

.daylight-btn-solid-underlined {
  position: relative;
  display: inline-block;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0 0 4px;
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
}
.daylight-btn-solid-underlined::before,
.daylight-btn-solid-underlined::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  will-change: transform;
}
.daylight-btn-solid-underlined::before {
  transform-origin: right;
  transition: transform var(--daylight-duration-slow) var(--daylight-ease-expo-out);
  transition-delay: 75ms;
}
.daylight-btn-solid-underlined::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--daylight-duration-slow) var(--daylight-ease-expo-out);
}
.daylight-btn-solid-underlined:hover::before {
  transform: scaleX(0);
  transition-delay: 0ms;
}
.daylight-btn-solid-underlined:hover::after {
  transform: scaleX(1);
  transition-delay: 75ms;
}

/* Disabled state (shared) */
.daylight-btn-primary:disabled,
.daylight-btn-primary[aria-disabled="true"],
.daylight-btn-secondary:disabled,
.daylight-btn-secondary[aria-disabled="true"],
.daylight-btn-gradient:disabled,
.daylight-btn-gradient[aria-disabled="true"],
.daylight-btn-classic-underlined:disabled,
.daylight-btn-underlined:disabled,
.daylight-btn-solid-underlined:disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

/* -----------------------------------------------------------------------------
   Checkbox — port of packages/ui/components/checkbox/Checkbox.tsx
   Markup:
     <label class="daylight-checkbox">
       <input type="checkbox" class="daylight-checkbox-input">
       <span class="daylight-checkbox-visual"></span>
       <span>Label text</span>
     </label>
   ----------------------------------------------------------------------------- */
.daylight-checkbox {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  text-align: left;
  font-family: var(--daylight-font-sans);
  font-weight: 300;
  font-size: 12px;
  color: var(--daylight-black);
}

.daylight-checkbox:has(.daylight-checkbox-input:disabled) {
  pointer-events: none;
  cursor: auto;
  opacity: 0.6;
}

.daylight-checkbox-input {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.daylight-checkbox-visual {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--daylight-black);
  border-radius: var(--daylight-radius-sm);
  color: var(--daylight-black);
  transition: background-color var(--daylight-duration-base) var(--daylight-ease-quart-out),
              border-color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-checkbox-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M2 6L5 9L10 3" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 62%;
  opacity: 0;
  transition: opacity var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-checkbox-input:checked + .daylight-checkbox-visual {
  background-color: var(--daylight-black);
  border-color: rgba(255, 255, 255, 0.4);
}
.daylight-checkbox-input:checked + .daylight-checkbox-visual::after {
  opacity: 1;
}
.daylight-checkbox-input:focus-visible + .daylight-checkbox-visual {
  outline: 2px solid var(--daylight-black);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Toggle — port of packages/ui/components/toggle/Toggle.tsx
   Markup:
     <label class="daylight-toggle">
       <input type="checkbox" class="daylight-toggle-input">
       <span class="daylight-toggle-visual"></span>
     </label>
   ----------------------------------------------------------------------------- */
.daylight-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  color: var(--daylight-black);
}

.daylight-toggle:has(.daylight-toggle-input:disabled) {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

.daylight-toggle-input {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.daylight-toggle-visual {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 16px;
  flex-shrink: 0;
  border: 1px solid var(--daylight-black);
  border-radius: 9999px;
  background: transparent;
  transition: background-color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-toggle-visual::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 1px;
  width: 12px;
  height: 12px;
  background: var(--daylight-white);
  border: 1px solid var(--daylight-black);
  border-radius: 9999px;
  transform: translateX(0);
  transform-origin: center;
  transition: transform var(--daylight-duration-base) var(--daylight-ease-quart-out);
  will-change: transform;
}

.daylight-toggle-input:checked + .daylight-toggle-visual {
  background: var(--daylight-black);
}
.daylight-toggle-input:checked + .daylight-toggle-visual::after {
  transform: translateX(20px);
}
.daylight-toggle-input:focus-visible + .daylight-toggle-visual {
  outline: 2px solid var(--daylight-black);
  outline-offset: 3px;
}

/* -----------------------------------------------------------------------------
   Input / TextArea — port of packages/ui/components/inputOrTextArea
   Underline-only style, Aeonik Pro 14px, h-49.
   ----------------------------------------------------------------------------- */
.daylight-input,
.daylight-textarea {
  display: block;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--daylight-input-border);
  border-radius: 0;
  font-family: var(--daylight-font-sans);
  font-weight: 400;
  font-size: 14px;
  color: #1C1C1C;
  outline: none;
  transition: border-color var(--daylight-duration-base) var(--daylight-ease-quart-out),
              color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-input {
  height: 49px;
  padding: 0;
}

.daylight-textarea {
  min-height: 100px;
  padding: 12px 0;
  resize: none;
  field-sizing: content;
}

.daylight-input:focus,
.daylight-textarea:focus {
  border-bottom-color: var(--daylight-black);
}

.daylight-input::placeholder,
.daylight-textarea::placeholder {
  color: var(--daylight-grey);
}

.daylight-input:disabled,
.daylight-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.daylight-input[aria-invalid="true"],
.daylight-textarea[aria-invalid="true"] {
  border-bottom-color: var(--daylight-warning);
  color: var(--daylight-warning);
}

.daylight-label {
  display: block;
  font-family: var(--daylight-font-sans);
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  color: var(--daylight-grey);
  margin-bottom: 4px;
  transition: color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-input:focus ~ .daylight-label,
.daylight-textarea:focus ~ .daylight-label {
  color: var(--daylight-black);
}

/* -----------------------------------------------------------------------------
   Select — port of packages/ui/components/select/Select.tsx (simplified)
   ----------------------------------------------------------------------------- */
.daylight-select {
  position: relative;
  display: inline-block;
}

.daylight-select select,
select.daylight-select {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 46px;
  padding: 0 40px 0 16px;
  background-color: transparent;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" fill="none"><path d="M2 4L6 8L10 4" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
  background-repeat: no-repeat;
  background-position: center right 16px;
  background-size: 12px;
  border: 1px solid var(--daylight-black);
  border-radius: 0;
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--daylight-black);
  cursor: pointer;
  outline: none;
  transition: color var(--daylight-duration-base) var(--daylight-ease-quart-out),
              border-color var(--daylight-duration-base) var(--daylight-ease-quart-out);
}

.daylight-select select:focus,
select.daylight-select:focus {
  outline: 1px solid var(--daylight-black);
  outline-offset: -1px;
}

/* -----------------------------------------------------------------------------
   Spinner — port of packages/ui/components/spinner/Spinner.tsx
   ----------------------------------------------------------------------------- */
.daylight-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: daylight-rotate 0.8s linear infinite;
}

/* -----------------------------------------------------------------------------
   Tag — port of packages/ui/components-lib/tag/Tag.tsx
   ----------------------------------------------------------------------------- */
.daylight-tag {
  position: relative;
  display: inline-block;
  width: max-content;
  padding: 8px 10px;
  border: 1px solid var(--daylight-white-32);
  border-radius: var(--daylight-radius-sm);
  font-family: var(--daylight-font-sans);
  font-size: 14px;
  line-height: 1.4;
}

@media (min-width: 1024px) {
  .daylight-tag {
    font-size: 12px;
  }
}

/* -----------------------------------------------------------------------------
   Badges (mono, uppercase)
   ----------------------------------------------------------------------------- */
.daylight-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--daylight-font-mono);
  font-weight: 400;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: var(--daylight-radius-sm);
  white-space: nowrap;
  border: 1px solid transparent;
}

.daylight-badge-orange { background-color: var(--daylight-orange); color: var(--daylight-white); }
.daylight-badge-black { background-color: var(--daylight-black); color: var(--daylight-white); }
.daylight-badge-yellow { background-color: var(--daylight-yellow); color: var(--daylight-black); }
.daylight-badge-beige { background-color: var(--daylight-beige-30); color: var(--daylight-black); }
.daylight-badge-outline {
  background-color: transparent;
  color: var(--daylight-black);
  border-color: var(--daylight-card-border);
}

/* -----------------------------------------------------------------------------
   Cards & Panels
   ----------------------------------------------------------------------------- */
.daylight-card {
  background-color: var(--daylight-beige-20);
  border: 1px solid var(--daylight-card-border);
  border-radius: var(--daylight-radius-panel);
  padding: 32px;
}

.daylight-card-photo {
  border-radius: var(--daylight-radius-card);
  overflow: hidden;
}

.daylight-card-glass {
  background-color: var(--daylight-glass-bg);
  border: 1px solid var(--daylight-glass-border);
  border-radius: var(--daylight-radius-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 32px;
}

/* -----------------------------------------------------------------------------
   Divider
   ----------------------------------------------------------------------------- */
.daylight hr {
  border: 0;
  border-top: 1px solid var(--daylight-card-border);
  margin: 0;
  height: 0;
}

/* -----------------------------------------------------------------------------
   Color utilities
   ----------------------------------------------------------------------------- */
.daylight-bg-orange { background-color: var(--daylight-orange); }
.daylight-bg-orange-dark { background-color: var(--daylight-orange-dark); }
.daylight-bg-orange-light { background-color: var(--daylight-orange-light); }
.daylight-bg-beige { background-color: var(--daylight-beige); }
.daylight-bg-beige-20 { background-color: var(--daylight-beige-20); }
.daylight-bg-beige-30 { background-color: var(--daylight-beige-30); }
.daylight-bg-beige-dark { background-color: var(--daylight-beige-dark); }
.daylight-bg-black { background-color: var(--daylight-black); }
.daylight-bg-black-lighter { background-color: var(--daylight-black-lighter); }
.daylight-bg-offwhite { background-color: var(--daylight-offwhite); }
.daylight-bg-white { background-color: var(--daylight-white); }
.daylight-bg-yellow { background-color: var(--daylight-yellow); }
.daylight-bg-purple { background-color: var(--daylight-purple); }
.daylight-bg-purple-dark { background-color: var(--daylight-purple-dark); }
.daylight-bg-blue { background-color: var(--daylight-blue); }
.daylight-bg-blue-dark { background-color: var(--daylight-blue-dark); }
.daylight-bg-brown { background-color: var(--daylight-brown); }
.daylight-bg-red { background-color: var(--daylight-red); }
.daylight-bg-warning { background-color: var(--daylight-warning); }

.daylight-text-orange { color: var(--daylight-orange); }
.daylight-text-orange-dark { color: var(--daylight-orange-dark); }
.daylight-text-black { color: var(--daylight-black); }
.daylight-text-black-lighter { color: var(--daylight-black-lighter); }
.daylight-text-white { color: var(--daylight-white); }
.daylight-text-grey { color: var(--daylight-grey); }
.daylight-text-grey-txt { color: var(--daylight-grey-txt); }
.daylight-text-yellow { color: var(--daylight-yellow); }
.daylight-text-purple { color: var(--daylight-purple); }
.daylight-text-purple-dark { color: var(--daylight-purple-dark); }
.daylight-text-blue { color: var(--daylight-blue); }
.daylight-text-blue-dark { color: var(--daylight-blue-dark); }
.daylight-text-brown { color: var(--daylight-brown); }
.daylight-text-red { color: var(--daylight-red); }
.daylight-text-warning { color: var(--daylight-warning); }

.daylight-border-black { border-color: var(--daylight-black); }
.daylight-border-beige-dark { border-color: var(--daylight-beige-dark); }
.daylight-border-card { border-color: var(--daylight-card-border); }
.daylight-border-warning { border-color: var(--daylight-warning); }

/* -----------------------------------------------------------------------------
   Animations — keyframes from marketing preset/keyframes.js
   ----------------------------------------------------------------------------- */
@keyframes daylight-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes daylight-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@keyframes daylight-rotate {
  to { transform: rotate(360deg); }
}

@keyframes daylight-fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes daylight-translate {
  0% { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

/* Animation utilities (match marketing preset/animation.js) */
.daylight-animate-blink { animation: 0.125s steps(1) 3 daylight-blink; }
.daylight-animate-blink-invisible { animation: 0.125s steps(1) 4 daylight-blink; }
.daylight-animate-marquee { animation: linear infinite daylight-marquee; }
.daylight-animate-rotate { animation: 10s linear infinite daylight-rotate; }
.daylight-animate-fade-in { animation: 1s cubic-bezier(0.075, 0.82, 0.165, 1) daylight-fade-in forwards; }
.daylight-animate-translate { animation: 1s var(--daylight-ease-expo-out) daylight-translate; }

/* -----------------------------------------------------------------------------
   Links inside a .daylight region
   ----------------------------------------------------------------------------- */
.daylight a {
  color: inherit;
  text-decoration: underline;
  transition: opacity var(--daylight-duration-hover) var(--daylight-ease-default);
}

.daylight a:hover {
  opacity: 0.6;
}

.daylight a.daylight-btn-primary,
.daylight a.daylight-btn-secondary,
.daylight a.daylight-btn-gradient,
.daylight a.daylight-btn-underlined,
.daylight a.daylight-btn-solid-underlined {
  text-decoration: none;
}
.daylight a.daylight-btn-primary:hover,
.daylight a.daylight-btn-secondary:hover,
.daylight a.daylight-btn-gradient:hover {
  opacity: 0.85;
}

/* -----------------------------------------------------------------------------
   Misc utilities
   ----------------------------------------------------------------------------- */
.daylight-uppercase { text-transform: uppercase; }
.daylight-lowercase { text-transform: lowercase; }
.daylight-tracking-tight { letter-spacing: -0.02em; }
.daylight-tracking-wide { letter-spacing: 0.05em; }

.daylight-rounded-sm { border-radius: var(--daylight-radius-sm); }
.daylight-rounded-panel { border-radius: var(--daylight-radius-panel); }
.daylight-rounded-card { border-radius: var(--daylight-radius-card); }
.daylight-rounded-full { border-radius: 9999px; }

.daylight-scrollbar-hide {
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.daylight-scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* -----------------------------------------------------------------------------
   Billing portal — semantic token layer
   Maps the Next.js customer portal palette onto the .daylight scope.
   ----------------------------------------------------------------------------- */
.daylight {
  --dl-bg: #FFF7E9;
  --dl-fg: #4C2806;
  --dl-fg-muted: rgb(76 40 6 / 0.7);
  --dl-fg-subtle: rgb(76 40 6 / 0.55);
  --dl-fg-quiet: rgb(76 40 6 / 0.4);
  --dl-border: rgb(76 40 6 / 0.1);
  --dl-border-strong: rgb(76 40 6 / 0.16);
  --dl-divider: rgb(76 40 6 / 0.08);
  --dl-card: #FFFDF7;
  --dl-card-border: rgb(76 40 6 / 0.06);
  --dl-primary: #1A0800;
  --dl-on-primary: #FFF7E9;
  --dl-secondary: rgb(76 40 6 / 0.06);
  --dl-on-secondary: #4C2806;
  --dl-pill-success: #C7E8CF;
  --dl-pill-success-fg: #2D5B37;
  --dl-pill-neutral: rgb(76 40 6 / 0.08);
  --dl-pill-neutral-fg: #4C2806;
  --dl-input-bg: rgb(76 40 6 / 0.04);
  --dl-input-border: rgb(76 40 6 / 0.12);
  --dl-toggle-track: rgb(76 40 6 / 0.18);
  --dl-toggle-thumb: #FFF7E9;
  --dl-toggle-track-on: #F66F00;
  --dl-toggle-thumb-on: #FFF7E9;
  --dl-nav-bg: #FFF7E9;
  --dl-seg-bg: rgb(76 40 6 / 0.04);
  --dl-seg-border: rgb(76 40 6 / 0.08);
  --dl-seg-active-bg: #1A0800;
  --dl-seg-fg: rgb(76 40 6 / 0.55);
  --dl-seg-active-fg: #FFF7E9;
}

.daylight[data-theme="photo"],
html[data-theme-hint="photo"] .daylight {
  --dl-bg: #1A0800;
  --dl-fg: #FFF7E9;
  --dl-fg-muted: rgb(255 247 233 / 0.7);
  --dl-fg-subtle: rgb(255 247 233 / 0.55);
  --dl-fg-quiet: rgb(255 247 233 / 0.4);
  --dl-border: rgb(255 247 233 / 0.12);
  --dl-border-strong: rgb(255 247 233 / 0.2);
  --dl-divider: rgb(255 247 233 / 0.14);
  --dl-card: rgb(10 5 0 / 0.45);
  --dl-card-border: rgb(255 247 233 / 0.2);
  --dl-primary: #FFF7E9;
  --dl-on-primary: #1A0800;
  --dl-secondary: rgb(255 247 233 / 0.1);
  --dl-on-secondary: #FFF7E9;
  --dl-pill-success: rgb(199 232 207 / 0.2);
  --dl-pill-success-fg: #DFF0E2;
  --dl-pill-neutral: rgb(255 247 233 / 0.14);
  --dl-pill-neutral-fg: #FFF7E9;
  --dl-input-bg: rgb(10 5 0 / 0.4);
  --dl-input-border: rgb(255 247 233 / 0.2);
  --dl-toggle-track: rgb(255 247 233 / 0.22);
  --dl-toggle-thumb: #FFF7E9;
  --dl-toggle-track-on: #F66F00;
  --dl-toggle-thumb-on: #FFF7E9;
  --dl-nav-bg: rgb(26 8 0 / 0.75);
  --dl-seg-bg: rgb(255 247 233 / 0.14);
  --dl-seg-border: rgb(255 247 233 / 0.2);
  --dl-seg-active-bg: #FFF7E9;
  --dl-seg-fg: rgb(255 247 233 / 0.65);
  --dl-seg-active-fg: #1A0800;
}

.daylight[data-theme="photo"],
html[data-theme-hint="photo"] .daylight {
  position: relative;
  background: transparent;
}

.daylight[data-theme="photo"]::before,
html[data-theme-hint="photo"] .daylight::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../images/photo-hero.25e99c7c6136.jpg");
  background-size: cover;
  background-position: center;
  z-index: -2;
  pointer-events: none;
}

.daylight[data-theme="photo"]::after,
html[data-theme-hint="photo"] .daylight::after {
  content: "";
  position: fixed;
  inset: 0;
  background-color: rgb(10 5 0 / 0.55);
  z-index: -1;
  pointer-events: none;
}

/* -----------------------------------------------------------------------------
   Billing portal — theme toggle
   ----------------------------------------------------------------------------- */
.daylight-theme-toggle {
  display: inline-flex;
  gap: 2px;
  border-radius: 10px;
  border: 1px solid var(--dl-seg-border);
  background-color: var(--dl-seg-bg);
  padding: 3px;
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
}

.daylight-theme-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: none;
  background: transparent;
  color: var(--dl-seg-fg);
  cursor: pointer;
  transition: background-color 150ms, color 150ms;
}

.daylight-theme-toggle-btn[aria-checked="true"] {
  background-color: var(--dl-seg-active-bg);
  color: var(--dl-seg-active-fg);
}

.daylight-theme-toggle-btn:hover:not([aria-checked="true"]) {
  opacity: 0.7;
}

.daylight .daylight-logo-photo { display: none; }
.daylight[data-theme="photo"] .daylight-logo-light,
html[data-theme-hint="photo"] .daylight .daylight-logo-light { display: none; }
.daylight[data-theme="photo"] .daylight-logo-photo,
html[data-theme-hint="photo"] .daylight .daylight-logo-photo { display: inline; }

.daylight {
  background-color: var(--dl-bg);
  transition: background-color 300ms ease;
}

.daylight .daylight-card-v2,
.daylight .daylight-card-v2-tight,
.daylight .daylight-info-panel,
.daylight .daylight-pill,
.daylight .daylight-switch,
.daylight .daylight-theme-toggle,
.daylight .daylight-theme-toggle-btn {
  transition: background-color 300ms ease, border-color 300ms ease, color 300ms ease;
}

/* -----------------------------------------------------------------------------
   Billing portal — nav
   ----------------------------------------------------------------------------- */
.daylight-nav {
  background-color: var(--dl-nav-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
}

/* -----------------------------------------------------------------------------
   Billing portal — card v2
   ----------------------------------------------------------------------------- */
.daylight-card-v2 {
  background-color: var(--dl-card);
  border-radius: 24px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 24px 20px 28px;
}
@media (min-width: 768px) {
  .daylight-card-v2 {
    padding: 48px 48px 40px;
  }
}
.daylight-card-v2-tight {
  background-color: var(--dl-card);
  border-radius: 24px;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  padding: 24px 20px;
}
@media (min-width: 768px) {
  .daylight-card-v2-tight {
    padding: 32px 40px;
  }
}

/* -----------------------------------------------------------------------------
   Billing portal — info rows (key/value inside tinted panels)
   ----------------------------------------------------------------------------- */
.daylight-info-panel {
  background-color: var(--dl-input-bg);
  border: 1px solid var(--dl-input-border);
  border-radius: 12px;
  padding: 4px 24px;
}

.daylight-info-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
}
.daylight-info-row-label {
  font-family: var(--daylight-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--dl-fg-muted);
}
.daylight-info-row-value {
  text-align: right;
  font-family: var(--daylight-font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--dl-fg);
}

/* -----------------------------------------------------------------------------
   Billing portal — pills (status badges)
   ----------------------------------------------------------------------------- */
.daylight-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--daylight-radius-sm);
  font-family: var(--daylight-font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
.daylight-pill-success {
  background-color: var(--dl-pill-success);
  color: var(--dl-pill-success-fg);
}
.daylight-pill-neutral {
  background-color: var(--dl-pill-neutral);
  color: var(--dl-pill-neutral-fg);
}

/* -----------------------------------------------------------------------------
   Billing portal — buttons v2
   ----------------------------------------------------------------------------- */
.daylight-btn-v2 {
  appearance: none;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px;
  height: 56px;
  border-radius: var(--daylight-radius-sm);
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 15px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.daylight-btn-v2:hover { opacity: 0.85; }
.daylight-btn-v2:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.daylight-btn-v2-primary {
  background-color: var(--dl-primary);
  color: var(--dl-on-primary);
}
.daylight-btn-v2-secondary {
  background-color: var(--dl-secondary);
  color: var(--dl-on-secondary);
  border: 1px solid var(--dl-border);
}

/* -----------------------------------------------------------------------------
   Billing portal — divider
   ----------------------------------------------------------------------------- */
.daylight-divider {
  height: 1px;
  width: 100%;
  background-color: var(--dl-divider);
}

/* -----------------------------------------------------------------------------
   Billing portal — toggle switch v2
   ----------------------------------------------------------------------------- */
.daylight-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 12px;
  background-color: var(--dl-toggle-track);
  cursor: pointer;
  transition: background-color 200ms ease;
}
.daylight-switch[aria-checked="true"] {
  background-color: var(--dl-toggle-track-on);
}
.daylight-switch-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--dl-toggle-thumb);
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: transform 200ms ease;
}
.daylight-switch[aria-checked="true"] .daylight-switch-thumb {
  transform: translateX(20px);
  background-color: var(--dl-toggle-thumb-on);
}

/* -----------------------------------------------------------------------------
   Billing portal — savings bar chart
   ----------------------------------------------------------------------------- */
.daylight-savings-bar-track {
  height: 8px;
  border-radius: 9999px;
  background-color: var(--dl-secondary);
  overflow: hidden;
}
.daylight-savings-bar-fill {
  height: 100%;
  border-radius: 9999px;
  background-color: var(--daylight-orange);
  transition: width 700ms cubic-bezier(0.16, 1.08, 0.38, 0.98);
}

/* -----------------------------------------------------------------------------
   Billing portal — pay modal overlay
   ----------------------------------------------------------------------------- */
.daylight-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  padding: 24px 20px;
  background-color: rgba(0, 0, 0, 0.4);
}
.daylight-modal-overlay[aria-hidden="true"] {
  display: none;
}

/* -----------------------------------------------------------------------------
   Billing portal — selectable option
   ----------------------------------------------------------------------------- */
.daylight-select-option {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--dl-input-border);
  background-color: var(--dl-input-bg);
  text-align: left;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.daylight-select-option:hover { opacity: 0.85; }
.daylight-select-option-active {
  background-color: var(--dl-secondary);
  border-color: var(--dl-border-strong);
}

/* -----------------------------------------------------------------------------
   Billing portal — section header
   ----------------------------------------------------------------------------- */
.daylight-section-title {
  color: var(--dl-fg);
  font-size: 24px;
  line-height: 28px;
  letter-spacing: -0.02em;
}

/* -----------------------------------------------------------------------------
   Billing portal — tab bar
   ----------------------------------------------------------------------------- */
.daylight .daylight-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  padding: 10px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  color: var(--dl-fg);
  transition: opacity 150ms ease, border-color 150ms ease;
}
.daylight .daylight-tab:hover {
  opacity: 0.65;
  border-bottom-color: var(--dl-fg);
}
.daylight .daylight-tab-active {
  border-bottom-color: var(--dl-fg);
}
.daylight .daylight-tab-active:hover {
  opacity: 1;
}
.daylight .daylight-tab-disabled {
  cursor: default;
  pointer-events: none;
}
.daylight .daylight-tab-disabled:hover {
  opacity: 1;
  border-bottom-color: transparent;
}

/* -----------------------------------------------------------------------------
   Billing portal — display xl
   ----------------------------------------------------------------------------- */
.daylight-display-xl {
  font-family: var(--daylight-font-display);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dl-fg);
}
@media (min-width: 768px) {
  .daylight-display-xl {
    font-size: 56px;
  }
}

/* -----------------------------------------------------------------------------
   Billing portal — display large
   ----------------------------------------------------------------------------- */
.daylight-display-lg {
  font-family: var(--daylight-font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dl-fg);
}
.daylight-display-section-sm {
  font-family: var(--daylight-font-display);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dl-fg);
  padding-bottom: 8px;
}
@media (min-width: 768px) {
  .daylight-display-section-sm {
    font-size: 26px;
  }
}

/* -----------------------------------------------------------------------------
   Billing portal — stat box (system page 2x2 grid)
   ----------------------------------------------------------------------------- */
.daylight-stat-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
}
@media (min-width: 768px) {
  .daylight-stat-box {
    padding: 32px;
  }
}
.daylight-stat-value {
  font-family: var(--daylight-font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--dl-fg);
  padding-top: 12px;
}
@media (min-width: 768px) {
  .daylight-stat-value {
    font-size: 48px;
    padding-top: 16px;
  }
}
.daylight-stat-border-left {
  border-left: 1px solid var(--dl-divider);
}
.daylight-stat-border-top {
  border-top: 1px solid var(--dl-divider);
}

/* -----------------------------------------------------------------------------
   Billing portal — subtle link (pagination, footer)
   ----------------------------------------------------------------------------- */
.daylight-link-subtle {
  font-family: var(--daylight-font-mono);
  color: var(--dl-fg);
  text-decoration: none;
  transition: opacity 150ms ease;
}
.daylight-link-subtle:hover {
  opacity: 0.7;
}
.daylight-link-muted {
  font-family: var(--daylight-font-mono);
  color: var(--dl-fg-quiet);
}

/* -----------------------------------------------------------------------------
   Billing portal — outline button
   ----------------------------------------------------------------------------- */
.daylight-btn-outline {
  appearance: none;
  background: none;
  border: 1px solid var(--dl-border);
  border-radius: 4px;
  padding: 6px 12px;
  color: var(--dl-fg);
  cursor: pointer;
  font-family: var(--daylight-font-mono);
  font-size: 14px;
  font-weight: 500;
  transition: opacity 150ms ease;
}
.daylight-btn-outline:hover {
  opacity: 0.7;
}

/* -----------------------------------------------------------------------------
   Billing portal — icon button (clickable icon with hover)
   ----------------------------------------------------------------------------- */
.daylight-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dl-fg-quiet);
  transition: opacity 150ms ease;
}
.daylight-icon-btn:hover {
  opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   Billing portal — color utilities (theme-aware)
   ----------------------------------------------------------------------------- */
.daylight-color-fg { color: var(--dl-fg); }
.daylight-color-fg-muted { color: var(--dl-fg-muted); }
.daylight-color-fg-quiet { color: var(--dl-fg-quiet); }

/* -----------------------------------------------------------------------------
   Billing portal — pill variant: primary
   ----------------------------------------------------------------------------- */
.daylight-pill-primary {
  background-color: var(--dl-primary);
  color: var(--dl-on-primary);
}

/* -----------------------------------------------------------------------------
   Billing portal — section header (spacing above content)
   ----------------------------------------------------------------------------- */
.daylight-section-header {
  margin-bottom: 24px;
  padding-left: 4px;
}

/* -----------------------------------------------------------------------------
   Billing portal — footer
   ----------------------------------------------------------------------------- */
.daylight-footer-border {
  border-top: 1px solid var(--dl-divider);
}
.daylight .daylight-footer-link {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  color: var(--dl-fg);
  text-decoration: none;
  transition: opacity 150ms ease;
}
.daylight .daylight-footer-link:hover {
  opacity: 0.7;
}
.daylight-footer-copyright {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  color: var(--dl-fg);
  opacity: 0.6;
}

/* -----------------------------------------------------------------------------
   Billing portal — serif font utility
   ----------------------------------------------------------------------------- */
.daylight-font-serif {
  font-family: var(--daylight-font-display);
}

/* -----------------------------------------------------------------------------
   Welcome flow
   ----------------------------------------------------------------------------- */
.daylight-welcome-bg {
  background-color: #FFF7E9;
}

.daylight-welcome-card {
  background-color: #FFFFFF;
  border-radius: 16px;
  padding: 20px 16px;
}
@media (min-width: 768px) {
  .daylight-welcome-card {
    padding: 40px;
  }
}

.daylight-welcome-btn {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 4px;
  font-family: var(--daylight-font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 150ms ease;
}
.daylight-welcome-btn:hover {
  opacity: 0.85;
}
.daylight-welcome-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.daylight-welcome-btn-dark {
  background-color: #1A0800;
  color: #FFF7E9;
}
.daylight-welcome-btn-light {
  background-color: #FFF7E9;
  color: #111111;
}

.daylight a.daylight-welcome-btn,
.daylight a.daylight-btn-v2 {
  text-decoration: none;
}
.daylight a.daylight-welcome-btn-dark {
  color: #FFF7E9;
}
.daylight a.daylight-btn-v2-primary {
  color: var(--dl-on-primary);
}
.daylight a.daylight-btn-v2-secondary {
  color: var(--dl-on-secondary);
}

.daylight-welcome-back-btn {
  display: inline-flex;
  height: 44px;
  align-items: center;
  gap: 6px;
  padding: 0 18px;
  border-radius: 4px;
  border: 1px solid #4C28061A;
  background-color: #4C28060F;
  color: #4C2806;
  font-size: 14px;
  font-weight: 500;
  font-family: var(--daylight-font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: opacity 150ms ease;
}
.daylight .daylight-welcome-back-btn {
  text-decoration: none;
}

.daylight .daylight-welcome-logo-link {
  text-decoration: none;
  color: inherit;
}
.daylight-welcome-back-btn:hover {
  opacity: 0.8;
}

.daylight-welcome-heading {
  font-family: var(--daylight-font-display);
  font-size: 36px;
  line-height: 38px;
  letter-spacing: -0.02em;
  color: #4C2806;
}

.daylight-welcome-subtext {
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.02em;
  color: #4C28068C;
}

.daylight-welcome-section-title {
  font-size: 18px;
  font-weight: 500;
  color: #4C2806;
}

.daylight-welcome-panel {
  border-radius: 12px;
  background-color: #4C28060A;
  border: 1px solid #4C28061F;
  padding: 4px 24px;
}

.daylight-welcome-spec-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.daylight-welcome-spec-label {
  flex-shrink: 0;
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4C28068C;
}
.daylight-welcome-spec-value {
  text-align: right;
  font-size: 14px;
  font-weight: 500;
  color: #4C2806;
}

.daylight-welcome-doc {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background-color: #4C28060A;
  border-radius: 8px;
}
.daylight-welcome-doc-icon {
  flex-shrink: 0;
  opacity: 0.4;
}
.daylight-welcome-doc-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: #4C2806;
}
.daylight-welcome-doc-download {
  flex-shrink: 0;
  color: #4C2806;
  opacity: 0.7;
}

.daylight-welcome-note {
  font-size: 13px;
  letter-spacing: -0.02em;
  color: #4C28068C;
}

.daylight-welcome-link {
  font-size: 14px;
  color: #4C28068C;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  letter-spacing: -0.02em;
}
.daylight .daylight-welcome-link:hover {
  opacity: 0.8;
}

.daylight-welcome-hero {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  height: 192px;
  margin-bottom: 32px;
}
@media (min-width: 768px) {
  .daylight-welcome-hero {
    height: 382px;
  }
}
.daylight-welcome-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.daylight-welcome-hero-overlay {
  position: absolute;
  inset: 0;
  display: none;
  background: linear-gradient(180deg, rgba(30,15,5,0.7) 0%, rgba(30,15,5,0.35) 30%, rgba(30,15,5,0.05) 55%, transparent 70%);
}
@media (min-width: 768px) {
  .daylight-welcome-hero-overlay {
    display: block;
  }
}
.daylight-welcome-hero-title {
  position: absolute;
  display: none;
  font-family: var(--daylight-font-display);
  font-size: 54px;
  line-height: 54px;
  letter-spacing: -0.02em;
  color: #FAF5E8;
  left: 32px;
  right: 32px;
  top: 40px;
}
@media (min-width: 768px) {
  .daylight-welcome-hero-title {
    display: block;
  }
}

.daylight-welcome-autopay-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-radius: 12px;
  background-color: #FFF7E9;
  padding: 20px 24px;
}
.daylight-welcome-autopay-label {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: #4C2806;
}
.daylight-welcome-autopay-detail {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4C28068C;
}

.daylight-welcome-bank-icon {
  display: flex;
  justify-content: center;
  padding: 8px 0 36px 0;
  color: #4C2806;
}

.daylight-welcome-tips-heading {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 30px;
  color: #4C2806;
  padding-bottom: 28px;
}

.daylight-welcome-tip-card {
  flex: 1;
  border-radius: 12px;
  background-color: #FFF7E9;
  padding: 24px;
}
.daylight-welcome-tip-label {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4C2806;
  display: block;
  padding-bottom: 14px;
}
.daylight-welcome-tip-text {
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 21px;
  color: #4C2806;
}

.daylight-welcome-tip-heading {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 21px;
  color: #4C2806;
  padding-bottom: 6px;
}

.daylight-welcome-support-card {
  border-radius: 12px;
  background-color: #4C28060A;
  padding: 20px 24px;
  margin-bottom: 20px;
}
.daylight-welcome-support-label {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #4C28068C;
  display: block;
  padding-bottom: 8px;
}
.daylight-welcome-support-text {
  font-size: 15px;
  letter-spacing: -0.02em;
  line-height: 21px;
  color: #4C2806;
}

.daylight-welcome-divider {
  height: 1px;
  background-color: #4C28061F;
  margin: 28px 0 24px 0;
}

/* Step indicator (welcome flow) */
.daylight-step-bar {
  position: relative;
  height: 3px;
  flex: 1;
  overflow: hidden;
}
.daylight-step-bar-dark { background-color: rgba(255, 247, 233, 0.16); }
.daylight-step-bar-light { background-color: rgba(76, 40, 6, 0.16); }
.daylight-step-bar-fill {
  position: absolute;
  inset: 0;
}
.daylight-step-bar-fill-dark { background-color: #FFF7E9; }
.daylight-step-bar-fill-light { background-color: #4C2806; }
.daylight-step-label {
  flex: 1;
  text-align: center;
  font-family: var(--daylight-font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
}
.daylight-step-label-dark { color: rgba(255, 247, 233, 0.3); }
.daylight-step-label-light { color: #4C2806; }

/* Step 1: dark splash */
.daylight-welcome-splash {
  position: relative;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  padding-bottom: env(safe-area-inset-bottom);
  background-size: cover;
  background-position: center;
}
.daylight-welcome-splash-overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(10, 4, 0, 0.6);
}
.daylight-welcome-splash-title {
  font-family: var(--daylight-font-display);
  font-size: 40px;
  color: #FFF7E9;
  letter-spacing: -0.02em;
  line-height: 1.05;
  padding-bottom: 20px;
}
.daylight-welcome-splash-glass {
  width: 100%;
  overflow: hidden;
  border-radius: 24px;
  background-color: rgba(8, 3, 0, 0.45);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 247, 233, 0.08);
  box-shadow: 0 8px 48px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 247, 233, 0.06);
}
.daylight-welcome-splash-stepper-label {
  font-family: var(--daylight-font-mono);
  font-size: 12px;
  color: rgba(255, 247, 233, 0.45);
}
.daylight-welcome-splash-step-text {
  font-size: 15px;
  color: rgba(255, 247, 233, 0.88);
}
.daylight-welcome-splash-arrow {
  color: rgba(255, 247, 233, 0.4);
}
.daylight-welcome-splash-step-num {
  font-family: var(--daylight-font-mono);
  font-size: 11px;
  color: rgba(255, 247, 233, 0.31);
}
.daylight-welcome-splash-step-label {
  font-size: 13px;
  color: rgba(255, 247, 233, 0.82);
  line-height: 1.2;
  text-align: center;
}

.daylight-welcome-spinner {
  width: 16px;
  height: 16px;
  border-color: #FFF7E9;
  border-right-color: transparent;
}

.daylight-welcome-error {
  color: #B91C1C;
  font-size: 14px;
  text-align: center;
  margin-top: 12px;
}

.dl-delay-1 { animation-delay: 0.08s; }

.daylight-welcome-hero-house {
  object-position: center calc(85% + 60px);
}

/* -----------------------------------------------------------------------------
   Login / Verify (customer portal)
   ----------------------------------------------------------------------------- */
.daylight-login-bg {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  background-color: #0D0A07;
  background-image: url("../images/login-hero.25e99c7c6136.jpg");
  background-size: cover;
  background-position: center;
}
.daylight-login-overlay {
  position: absolute;
  inset: 0;
  background-color: rgb(10 4 0 / 0.6);
}
.daylight-login-logo {
  position: absolute;
  left: 20px;
  top: 20px;
}
@media (min-width: 768px) {
  .daylight-login-logo {
    left: 48px;
    top: 32px;
  }
}
.daylight-login-form {
  position: relative;
  z-index: 1;
  display: flex;
  width: 100%;
  max-width: 440px;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 768px) {
  .daylight-login-form {
    padding-left: 0;
    padding-right: 0;
  }
}
.daylight-login-heading {
  font-family: var(--daylight-font-display);
  text-align: center;
  font-size: 40px;
  color: #FFF7E9;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
@media (min-width: 768px) {
  .daylight-login-heading {
    font-size: 56px;
  }
}
.daylight-login-heading-sm {
  font-size: 28px;
}
@media (min-width: 768px) {
  .daylight-login-heading-sm {
    font-size: 36px;
  }
}
.daylight-login-fields {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 10px;
}
.daylight-login-error {
  font-size: 14px;
  color: #FF6B6B;
  text-align: center;
  margin: 0;
}
.daylight-login-input {
  height: 48px;
  width: 100%;
  border-radius: 4px;
  padding-left: 16px;
  padding-right: 16px;
  font-size: 15px;
  font-family: var(--daylight-font-body);
  background-color: #17100A;
  border: 1px solid rgba(255, 247, 233, 0.2);
  color: #FFF7E9;
  outline: none;
  box-sizing: border-box;
}
.daylight-login-input::placeholder {
  color: rgba(255, 247, 233, 0.4);
}
.daylight-login-input:focus {
  border-color: rgba(255, 247, 233, 0.4);
}
.daylight-login-btn {
  display: flex;
  height: 48px;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 500;
  font-family: var(--daylight-font-body);
  background-color: #FFFFFF;
  color: #1A0800;
  border: none;
  cursor: pointer;
}
.daylight-login-btn:hover {
  background-color: #F5F0EA;
}
.daylight-login-btn-arrow {
  display: inline-block;
  transform: translateX(-4px);
  opacity: 0;
  transition: all 0.2s ease-out;
}
.daylight-login-btn:hover .daylight-login-btn-arrow {
  transform: translateX(0);
  opacity: 1;
}

/* OTP digit inputs */
.daylight-login-otp-row {
  display: flex;
  gap: 6px;
}
@media (min-width: 768px) {
  .daylight-login-otp-row {
    gap: 10px;
  }
}
.daylight-login-otp-digit {
  height: 48px;
  width: 44px;
  border-radius: 4px;
  border: 1px solid rgba(255, 247, 233, 0.2);
  text-align: center;
  font-family: var(--daylight-font-display);
  font-size: 20px;
  background-color: #17100A;
  color: #FFF7E9;
  outline: none;
  box-sizing: border-box;
}
@media (min-width: 768px) {
  .daylight-login-otp-digit {
    height: 56px;
    width: 60px;
    font-size: 24px;
  }
}
.daylight-login-otp-digit:focus {
  border-color: rgba(255, 247, 233, 0.7);
}

/* Resend link */
.daylight-login-description {
  font-size: 15px;
  color: rgba(255, 247, 233, 0.7);
  text-align: center;
  line-height: 1.5;
  margin: 0 0 24px;
}
.daylight-login-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
}
.daylight-login-resend-label {
  color: rgba(255, 247, 233, 0.55);
}
.daylight-login-resend-btn {
  background: none;
  border: none;
  padding: 0;
  color: #FFF7E9;
  font-size: 14px;
  font-family: var(--daylight-font-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.daylight-login-resend-btn:hover {
  opacity: 0.8;
}

/* -----------------------------------------------------------------------------
   Daylight — alert overrides
   Scoped overrides for basecoat .alert components inside .daylight context.
   ----------------------------------------------------------------------------- */
.daylight .alert,
.daylight .alert-destructive {
  background-color: var(--dl-card);
  border-color: var(--dl-border);
  border-radius: 10px;
  box-shadow: 0 4px 24px rgb(0 0 0 / 0.08);
}
.daylight .alert {
  color: var(--dl-fg);
}
.daylight .alert h2 {
  color: var(--dl-fg);
}
.daylight .alert-destructive,
.daylight .alert-destructive h2 {
  color: #B91C1C;
}
.daylight .alert section,
.daylight .alert-destructive section {
  color: var(--dl-fg-muted);
}
.daylight .alert .btn-sm-icon-ghost,
.daylight .alert-destructive .btn-sm-icon-ghost {
  color: var(--dl-fg-quiet);
}
.daylight .alert .btn-sm-icon-ghost:hover,
.daylight .alert-destructive .btn-sm-icon-ghost:hover {
  background-color: var(--dl-secondary);
}
