/* =============================================================================
   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); }

/* Autopay discount nudge on the account page: tinted-orange fill with an
   orange border and orange text/icon. */
.daylight-autopay-promo {
  border: 1px solid var(--daylight-orange);
  background-color: rgb(246 111 0 / 0.12);
  color: var(--daylight-orange);
}
.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;
}

/* Empty-state variant: centered prompt + action with comfortable padding
   (the base panel's 4px vertical padding is meant for stacked rows). */
.daylight-info-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 24px;
  text-align: center;
}

.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);
}

/* Floating menu that holds .daylight-select-option rows, e.g. the nav job
   switcher. Solid surface with the same border as the outline selector, so the
   panel reads as part of the selector rather than the translucent page card. */
.daylight-select-menu {
  min-width: 240px;
  padding: 8px;
  border: 1px solid var(--dl-border);
  border-radius: 12px;
  background-color: var(--dl-nav-bg);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 12px 32px rgb(0 0 0 / 0.22);
}
/* The rows float over the hero image, so they need a solid fill and the same
   cream text as the rest of the portal — the shared translucent option style is
   only legible on the solid page cards it's used on elsewhere. */
.daylight-select-menu .daylight-select-option {
  background-color: var(--dl-bg);
  color: var(--dl-fg);
  text-decoration: none;
}
.daylight-select-menu .daylight-select-option-active {
  /* Secondary tint composited over the solid base stays fully opaque. */
  background-image: linear-gradient(var(--dl-secondary), var(--dl-secondary));
}

/* -----------------------------------------------------------------------------
   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-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;
  cursor: pointer;
}
.daylight .daylight-welcome-link:hover {
  opacity: 0.8;
}

.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;
}

/* 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; }

/* -----------------------------------------------------------------------------
   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;
}
/* The hero is a photo, so v2 buttons on it take the photo-theme tokens. */
.daylight-login-bg {
  --dl-primary: #FFF7E9;
  --dl-on-primary: #1A0800;
  --dl-secondary: rgb(255 247 233 / 0.1);
  --dl-on-secondary: #FFF7E9;
  --dl-border: rgb(255 247 233 / 0.12);
}
.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-textarea {
  height: auto;
  min-height: 120px;
  padding-top: 12px;
  padding-bottom: 12px;
  resize: vertical;
}
.daylight-login-divider {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: rgba(255, 247, 233, 0.55);
}
.daylight-login-divider::before,
.daylight-login-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(255, 247, 233, 0.2);
}
.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;
}

/* Coming Soon (pre-launch portal) — same hero shell as login, tighter stack */
a.daylight-login-btn {
  text-decoration: none;
}
.daylight-coming-soon {
  gap: 16px;
}
.daylight-coming-soon-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 247, 233, 0.6);
  text-align: center;
  margin: 0;
}
.daylight-coming-soon-copy {
  max-width: 380px;
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 247, 233, 0.75);
  margin: 0;
}
.daylight-coming-soon-support {
  font-size: 14px;
  text-align: center;
  color: rgba(255, 247, 233, 0.5);
  margin: 0;
}
.daylight-coming-soon-support a {
  color: #FFF7E9;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 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);
}

/* -----------------------------------------------------------------------------
   Billing portal — Home milestone timeline
   Phase nodes down the left with a connector line; each phase carries its
   customer steps in a tinted panel.
   ----------------------------------------------------------------------------- */
.daylight-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.daylight-timeline-phase {
  position: relative;
  display: flex;
  gap: 16px;
  padding-bottom: 32px;
}
.daylight-timeline-phase:last-child {
  padding-bottom: 0;
}
.daylight-timeline-phase::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 4px;
  width: 2px;
  background-color: var(--dl-divider);
}
.daylight-timeline-phase:last-child::before {
  display: none;
}
.daylight-timeline-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--dl-primary);
  color: var(--dl-on-primary);
}
.daylight-timeline-phase-current .daylight-timeline-marker {
  background-color: transparent;
  border: 2px solid var(--dl-primary);
}
.daylight-timeline-phase-current .daylight-timeline-marker::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--dl-primary);
}
.daylight-timeline-phase-upcoming .daylight-timeline-marker {
  background-color: transparent;
  border: 2px solid var(--dl-divider);
}
.daylight-timeline-content {
  flex: 1;
  min-width: 0;
  padding-top: 3px;
}
.daylight-timeline-title {
  margin: 0;
  font-size: 16px;
  color: var(--dl-fg);
}
.daylight-timeline-phase-upcoming .daylight-timeline-title {
  color: var(--dl-fg-muted);
}
.daylight-timeline-panel {
  margin-top: 12px;
  padding-top: 4px;
  padding-bottom: 4px;
}
.daylight-timeline-step-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid var(--dl-fg-quiet);
  color: transparent;
}
.daylight-timeline-step-marker-done {
  border-color: transparent;
  background-color: var(--dl-pill-success);
  color: var(--dl-pill-success-fg);
}

/* Inline (content-width) variant of the v2 button, e.g. the Home tab's
   next-action card on desktop. */
@media (min-width: 768px) {
  .daylight-btn-v2-inline {
    width: auto;
    padding: 0 28px;
  }
}


.daylight-setup-progress { margin-bottom: 28px; }
.daylight-setup-progress ol { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.daylight-setup-progress li { flex: 1; min-width: 0; font-size: 13px; line-height: 1.3; color: var(--dl-fg-muted); }
.daylight-setup-progress-line { display: block; height: 3px; margin-bottom: 10px; background: var(--dl-border-strong); border-radius: 4px; }
.daylight-setup-progress .is-reached .daylight-setup-progress-line { background: var(--dl-fg); }
.daylight-setup-progress [aria-current="step"] { font-weight: 600; color: var(--dl-fg); }
.daylight-setup-progress-dark li { color: #FFF7E9; }
.daylight-setup-progress-dark .daylight-setup-progress-line { background: rgb(255 247 233 / 0.35); }
.daylight-setup-welcome-copy { max-width: 480px; font-size: 17px; line-height: 1.5; color: #FFF7E9; margin: 0 0 24px; }
.daylight-welcome-subtext, .daylight-welcome-note, .daylight-welcome-link { color: #765E46; }
.daylight-setup-summary { padding: 20px; margin-bottom: 24px; border: 1px solid var(--dl-border-strong); border-radius: 10px; background: var(--dl-secondary); color: var(--dl-fg); }
.daylight-setup-summary > * + * { margin-top: 10px; }
.daylight-setup-price-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; font-size: 15px; }
.daylight-setup-price-row strong { font-family: var(--daylight-font-display); font-size: 30px; line-height: 1.2; font-weight: 400; }
.daylight-setup-price-row strong span { font-family: var(--daylight-font-sans); font-size: 15px; }
.daylight-setup-note { font-size: 14px; line-height: 1.5; color: var(--dl-fg-muted); }
.daylight-setup-terms { display: flex; flex-wrap: wrap; gap: 14px 28px; padding-top: 8px; }
.daylight-setup-terms dt { font-size: 12px; color: var(--dl-fg-muted); }
.daylight-setup-terms dd { margin-top: 3px; font-size: 14px; }
.daylight-setup-details { border-top: 1px solid var(--dl-border-strong); padding: 16px 0; color: var(--dl-fg); }
.daylight-setup-details summary { cursor: pointer; font-size: 15px; line-height: 1.5; min-height: 32px; }
.daylight-setup-details summary > span { display: block; margin-left: 18px; color: var(--dl-fg-muted); font-size: 13px; }
.daylight-setup-details > p { margin-top: 12px; font-size: 14px; line-height: 1.5; }
.daylight-setup-details[open] > summary { margin-bottom: 16px; }
.daylight-setup-equipment > div { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; font-size: 14px; }
.daylight-setup-equipment dt { color: var(--dl-fg-muted); }
.daylight-setup-equipment dd { text-align: right; }
.daylight-setup-documents { padding: 8px 0 24px; }
.daylight-setup-documents h2 { margin-bottom: 8px; }
.daylight .daylight-setup-document-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; border-bottom: 1px solid var(--dl-divider); font-size: 14px; text-decoration: none; }
.daylight-setup-document-link > span:last-child { display: flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 3px; }
.daylight-setup-review-help { margin-top: 16px; text-align: center; }
.daylight-setup-support { margin-top: 18px; font-size: 14px; line-height: 1.6; text-align: center; color: #765E46; }
.daylight-setup-support a { white-space: nowrap; }
.daylight-bank-explainer p { font-size: 15px; line-height: 1.5; }
.daylight-bank-help { margin: 20px 16px 0; }
.daylight-password-help { margin-top: 12px; color: var(--dl-fg-muted); font-size: 13px; line-height: 1.5; }
.daylight-password-help ul { list-style: disc; padding-left: 18px; }
.daylight-password-help li + li { margin-top: 3px; }
.daylight-password-field { display: flex; align-items: center; padding-right: 2px; border: 1px solid var(--dl-input-border); border-radius: var(--daylight-radius-sm); background: var(--dl-input-bg); }
.daylight-password-field .daylight-input { flex: 1; min-width: 0; height: 48px; padding: 0 12px; border: 0; border-radius: var(--daylight-radius-sm); color: var(--dl-fg); }
.daylight-password-field:has(input[aria-invalid="true"]) { border-color: var(--daylight-warning); }
.daylight-password-field:focus-within { outline: 2px solid var(--dl-fg); outline-offset: 2px; }
.daylight-welcome-bg .daylight-password-field :is(input, button):focus-visible { outline: none; }
.daylight-password-toggle { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--daylight-radius-sm); background: transparent; color: var(--dl-fg); cursor: pointer; }
.daylight-password-toggle:hover, .daylight-password-toggle:focus-visible { background: var(--dl-secondary); }
.daylight-password-icon { display: block; width: 20px; height: 20px; }
.daylight-password-toggle [hidden] { display: none !important; }
.daylight-agreement { margin: 28px 0 24px; color: var(--dl-fg); }
.daylight-agreement > h2 { margin-bottom: 12px; }
.daylight-agreement-topic { border-top: 1px solid var(--dl-border-strong); }
.daylight-agreement-topic:last-child { border-bottom: 1px solid var(--dl-border-strong); }
.daylight-agreement-topic > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; padding: 16px 0; list-style: none; cursor: pointer; font-size: 15px; line-height: 1.5; font-weight: 500; }
.daylight-agreement-topic > summary::-webkit-details-marker { display: none; }
.daylight-agreement-chevron { display: block; flex: none; width: 20px; height: 20px; transition: transform 150ms ease; }
.daylight-agreement-icon { display: block; width: 20px; height: 20px; }
.daylight-agreement-topic[open] > summary .daylight-agreement-chevron { transform: rotate(180deg); }
.daylight-agreement-copy { display: flex; flex-direction: column; gap: 16px; padding: 0 32px 20px 0; }
.daylight-payment-bank { margin: 18px 0 24px; }
.daylight-welcome-bg :is(a, button, input, summary):focus-visible { outline: 2px solid #4C2806; outline-offset: 4px; }
.daylight-welcome-bg .daylight-input { scroll-margin-top: 24px; }
@media (max-width: 480px) {
  .daylight-welcome-heading { font-size: 30px; line-height: 1.12; }
  .daylight-setup-progress li { font-size: 12px; }
  .daylight-setup-summary { padding: 16px; }
  .daylight-setup-price-row strong { font-size: 28px; }
  .daylight-setup-terms { gap: 12px 20px; }
  .daylight-timeline-panel .daylight-font-mono { white-space: normal; }
}


.daylight-autopay-feature {
  margin-bottom: 24px;
  padding: 22px;
  border: 2px solid var(--dl-border-strong);
  border-radius: 12px;
  background: var(--dl-secondary);
  color: var(--dl-fg);
  transition: border-color 150ms ease, background-color 150ms ease;
}
.daylight-autopay-feature:has(input:checked) { border-color: var(--daylight-orange); background: #FFF0DF; }
.daylight-autopay-feature-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.daylight-autopay-recommended { padding: 5px 10px; border-radius: 6px; background: var(--dl-pill-neutral); color: var(--dl-fg); font-size: 12px; font-weight: 600; transition: background-color 150ms ease; }
.daylight-autopay-feature:has(input:checked) .daylight-autopay-recommended { background: #FFD6AE; }
.daylight-autopay-feature-copy { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--dl-fg-muted); }
.daylight-autopay-enable { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 10px 16px; margin-top: 18px; border: 1px solid var(--dl-border-strong); border-radius: 8px; background: var(--dl-card); cursor: pointer; font-size: 15px; font-weight: 500; transition: border-color 150ms ease; }
.daylight-autopay-switch { display: inline-flex; align-items: center; position: relative; width: 48px; height: 44px; flex-shrink: 0; }
.daylight-autopay-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.daylight-autopay-switch-track { display: block; width: 48px; height: 28px; padding: 3px; border-radius: 20px; background: var(--dl-toggle-track); transition: background-color 150ms ease; }
.daylight-autopay-switch-track > span { display: block; width: 22px; height: 22px; background: var(--dl-card); border-radius: 50%; transition: transform 150ms ease; }
.daylight-autopay-switch input:checked + .daylight-autopay-switch-track { background: var(--daylight-orange); }
.daylight-autopay-switch input:checked + .daylight-autopay-switch-track > span { transform: translateX(20px); }
.daylight-autopay-switch input:focus-visible + .daylight-autopay-switch-track { outline: 2px solid var(--dl-fg); outline-offset: 4px; }
.daylight-autopay-enable-label { display: flex; align-items: center; gap: 12px; }
.daylight-autopay-enable-label small { font-size: 13px; font-weight: 400; color: var(--dl-fg-muted); }
.daylight-autopay-feature:has(input:checked) .daylight-autopay-enable { border-color: #C45B00; }
.daylight-autopay-estimates { margin-top: 20px; }
.daylight-autopay-project { border-top: 1px solid var(--dl-border-strong); padding-top: 18px; transition: border-color 150ms ease; }
.daylight-autopay-feature:has(input:checked) .daylight-autopay-project { border-color: #EAC9A8; }
.daylight-autopay-project + .daylight-autopay-project { margin-top: 24px; }
.daylight-autopay-address { margin-bottom: 10px; font-size: 16px; font-weight: 500; }
.daylight-autopay-estimate-label { font-size: 14px; line-height: 1.5; color: var(--dl-fg-muted); }
.daylight-autopay-amount { margin-top: 6px; font-family: var(--daylight-font-display); font-size: 48px; line-height: 1; letter-spacing: -0.02em; font-weight: 400; font-variant-numeric: proportional-nums; color: var(--dl-fg); overflow-wrap: anywhere; transition: color 150ms ease; }
.daylight-autopay-unit { margin-left: 6px; font-family: var(--daylight-font-sans); font-size: 17px; letter-spacing: 0; color: var(--dl-fg-muted); }
.daylight-autopay-feature:has(input:checked) .daylight-autopay-amount { color: #9B4100; }
.daylight-autopay-comparison { margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--dl-fg-muted); }
.daylight-autopay-signed-note { margin-top: 14px; font-size: 12px; line-height: 1.5; color: var(--dl-fg-muted); }
[data-controller~="welcome-autopay"] [hidden] { display: none !important; }
@media (max-width: 480px) {
  .daylight-autopay-feature { padding: 16px; }
  .daylight-autopay-amount { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .daylight-autopay-feature,
  .daylight-autopay-feature :is(.daylight-autopay-recommended, .daylight-autopay-enable, .daylight-autopay-project, .daylight-autopay-amount, .daylight-autopay-switch-track, .daylight-autopay-switch-track > span),
  .daylight-agreement-chevron { transition: none; }
}

/* Customer Ray uses the existing portal palette, surfaces, and compact actions. */
.customer-ray { --ray-viewport: 100dvh; --ray-top: 0px; font: 15px/1.5 "Aeonik Pro", sans-serif; color: var(--dl-fg); }
.customer-ray [hidden] { display: none !important; }
.customer-ray :is(button, a) { -webkit-tap-highlight-color: transparent; }
.customer-ray button { cursor: pointer; font: inherit; }
.customer-ray button:disabled { opacity: .5; cursor: default; }
.customer-ray :is(button, a):focus-visible, .customer-tour :is(button, a):focus-visible { outline: 2px solid var(--dl-fg); outline-offset: 3px; }
.customer-ray .daylight-btn-v2, .customer-tour .daylight-btn-v2 { width: auto; height: 44px; min-height: 44px; padding: 0 14px; border-radius: 4px; font: 500 15px/1 "Aeonik Pro", sans-serif; }
.customer-ray .daylight-btn-v2-primary, .customer-tour .daylight-btn-v2-primary { background: var(--dl-primary); color: var(--dl-on-primary); }
.customer-ray .daylight-btn-v2-secondary, .customer-tour .daylight-btn-v2-secondary { background: var(--dl-secondary); color: var(--dl-on-secondary); border-color: var(--dl-border); }
.customer-ray-launcher { position: fixed; z-index: 65; right: 24px; bottom: calc(20px + env(safe-area-inset-bottom)); display: inline-flex; gap: 10px; min-width: 0; height: 48px !important; min-height: 48px !important; padding: 6px 14px 6px 6px !important; border: 0; border-radius: 4px !important; box-shadow: 0 4px 20px rgb(26 8 0 / .16); }
.customer-ray-avatar { display: block; flex: none; width: 32px; height: 32px; object-fit: cover; border-radius: 50%; background: #FFF7E9; }
.customer-ray-panel { position: fixed; z-index: 70; right: 24px; bottom: calc(16px + env(safe-area-inset-bottom)); width: min(480px, calc(100vw - 32px)); height: min(740px, calc(var(--ray-viewport) - 32px - env(safe-area-inset-bottom))); min-height: min(220px, calc(var(--ray-viewport) - 32px)); display: flex; flex-direction: column; background: var(--dl-card); border: 1px solid var(--dl-border-strong); border-radius: 24px; box-shadow: 0 12px 50px rgb(26 8 0 / .2); overflow: hidden; }
.daylight[data-theme="photo"] .customer-ray-panel, html[data-theme-hint="photo"] .customer-ray-panel { background: #21160F; }
.customer-ray-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 12px 14px 20px; border-bottom: 1px solid var(--dl-divider); flex: none; }
.customer-ray-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.customer-ray-heading { min-width: 0; }
.customer-ray-identity h2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 18px/1.2 "Aeonik Pro", sans-serif; margin: 0; }
.customer-ray-controls { display: flex; align-items: center; gap: 0; flex: none; }
.customer-ray-controls button { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--dl-fg); }
.customer-ray-controls button:hover { background: var(--dl-secondary); }
.customer-ray-controls svg, .customer-ray-control-icon { display: block; flex: none; width: 20px; height: 20px; }
.customer-ray-project { margin-top: 3px; color: var(--dl-fg-muted); font-size: 12px; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.customer-ray-scope { margin: 0 22px; font-size: 13px; color: var(--dl-fg-muted); }
.customer-ray-scope:not(:empty) { padding-top: 12px; padding-bottom: 4px; }
.customer-ray-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; scrollbar-gutter: stable; }
.customer-ray-empty { display: flex; flex-direction: column; justify-content: center; min-height: 100%; padding: 28px 0 8px; text-align: center; }
.customer-ray-empty-art { position: relative; isolation: isolate; flex: none; width: 80px; height: 80px; margin: 0 auto 20px; }
.customer-ray-empty-art::before { position: absolute; z-index: -1; inset: -8px; border-radius: 50%; background: color-mix(in srgb, var(--dl-primary) 30%, transparent); filter: blur(24px); content: ""; }
.customer-ray-empty-avatar { position: relative; width: 80px; height: 80px; box-shadow: 0 10px 15px -3px color-mix(in srgb, var(--dl-primary) 20%, transparent), 0 4px 6px -4px color-mix(in srgb, var(--dl-primary) 20%, transparent); }
.customer-ray-empty h3 { margin: 0 0 10px; font: 400 30px/1.15 "Feature Deck", serif; letter-spacing: -.02em; }
.customer-ray-empty > p { max-width: 280px; margin: 0 auto 24px; color: var(--dl-fg-muted); font-size: 14px; line-height: 1.5; }
.customer-ray-prompts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 8px; }
.customer-ray-prompts .customer-ray-prompt { justify-content: flex-start; width: 100%; min-height: 44px; text-align: left; white-space: normal; }
.customer-ray-composer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.customer-ray .customer-ray-composer-actions a { display: inline-flex; align-items: center; min-height: 36px; color: var(--dl-fg-muted); font-size: 13px; text-decoration: underline; }
.customer-ray-direct-help { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; font-size: 13px; color: var(--dl-fg-muted); }
.customer-ray-direct-help a { display: inline-flex; align-items: center; min-height: 36px; color: inherit; text-decoration: underline; }
.customer-ray-message { display: flex; align-items: flex-start; gap: 8px; padding-top: 22px; overflow-wrap: anywhere; }
.customer-ray-message-column { min-width: 0; flex: 1; }
.customer-ray-message-user { justify-content: flex-end; }
.customer-ray-message-user .customer-ray-message-column { display: flex; flex-direction: column; align-items: flex-end; flex: 0 1 auto; max-width: 88%; }
.customer-ray-message-avatar { display: block; flex: none; width: 28px; height: 28px; margin-top: 1px; object-fit: cover; border-radius: 50%; pointer-events: none; }
.customer-ray-message-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 28px; margin-bottom: 4px; }
.customer-ray-speaker { color: var(--dl-fg-muted); font-size: 12px; font-weight: 500; }
.customer-ray-progress { color: var(--dl-fg-muted); font-size: 13px; animation: customer-ray-progress-in .18s ease-out; }
.customer-ray-progress [data-ray-progress-dots] { display: inline-block; width: 1em; padding-left: 2px; }
.customer-ray-progress[data-working="true"] [data-ray-progress-dots] { animation: customer-ray-progress-dots 1.2s steps(3, end) infinite; }
.customer-ray-message-user .customer-ray-message-text { display: inline-block; white-space: pre-wrap; padding: 12px 16px; background: var(--dl-secondary); color: var(--dl-on-secondary); border-radius: 12px 12px 4px 12px; }
@keyframes customer-ray-progress-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes customer-ray-progress-dots { 0% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) { .customer-ray-progress, .customer-ray-progress [data-ray-progress-dots] { animation: none !important; } }
.customer-ray-message-text { white-space: normal; line-height: 1.6; }
.customer-ray-message-text :is(p, ul, ol, h3, h4, blockquote) { margin: 0 0 10px; }
.customer-ray-message-text > :last-child, .customer-ray-message-text blockquote > :last-child { margin-bottom: 0; }
.customer-ray-message-text :is(h3, h4) { font: inherit; font-weight: 600; }
.customer-ray-message-text :is(ul, ol) { padding-left: 22px; }
.customer-ray-message-text ul { list-style: disc; }
.customer-ray-message-text ol { list-style: decimal; }
.customer-ray-message-text li + li { margin-top: 4px; }
.customer-ray-message-text blockquote { padding-left: 12px; border-left: 2px solid var(--dl-border-strong); color: var(--dl-fg-muted); }
.customer-ray-message a { color: inherit; text-decoration: underline; }
.customer-ray-card { margin-top: 14px; padding: 16px; background: var(--dl-input-bg); border: 1px solid var(--dl-input-border); border-radius: 12px; }
.customer-ray-card h3 { margin: 0 0 10px; font-size: 16px; font-weight: 500; }
.customer-ray-card p { margin: 8px 0; }
.customer-ray-card > a { display: inline-flex; align-items: center; min-height: 36px; padding-top: 6px; color: var(--dl-fg-muted); }
.customer-ray-card .customer-ray-card-primary { margin-top: 12px; }
.customer-ray-data-row { display: flex; justify-content: space-between; gap: 16px; margin: 8px 0; font-size: 13px; }
.customer-ray-data-row strong { font-weight: 500; text-align: right; }
.customer-ray-energy { width: 100%; font-size: 12px; border-collapse: collapse; }
.customer-ray-energy :is(th,td) { padding: 6px 0; border-bottom: 1px solid var(--dl-divider); text-align: left; }
.customer-ray-energy :is(th,td):last-child { text-align: right; }
.customer-ray-text-button, .customer-ray-composer-actions button, .customer-ray-subheader button, .customer-ray-recovery button { min-height: 36px; padding: 6px 4px; border: 0; background: transparent; color: var(--dl-fg); font-size: 13px; text-decoration: underline; }
.customer-ray-answer-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin-top: 4px; }
.customer-ray-byline-button { display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--dl-fg-muted); }
.customer-ray-byline-button svg { display: block; width: 16px; height: 16px; }
.customer-ray-byline-button:hover, .customer-ray-byline-button:focus-visible, .customer-ray-byline-button[aria-pressed="true"] { color: var(--dl-fg); background: var(--dl-secondary); }
@media (max-width: 640px) { .customer-ray-byline-button { width: 44px; height: 44px; } }
.customer-ray-composer-wrap { flex: none; padding: 8px 16px 8px; }
.customer-ray-status { color: var(--dl-fg-muted); font-size: 13px; }
.customer-ray-status:not(:empty), .customer-ray-error:not(:empty) { padding: 6px 4px; }
.customer-ray-error { margin: 0; color: var(--dl-fg); font-size: 13px; }
.customer-ray-composer { display: flex; align-items: flex-end; gap: 8px; padding: 6px; border: 1px solid var(--dl-input-border); border-radius: var(--daylight-radius-sm); background: var(--dl-input-bg); }
.customer-ray-composer:focus-within { border-color: var(--dl-fg); }
.customer-ray-composer:has(textarea:focus-visible) { outline: 2px solid var(--dl-fg); outline-offset: 2px; }
.customer-ray-composer textarea { flex: 1; min-width: 0; max-height: 150px; min-height: 44px; resize: none; box-sizing: border-box; appearance: none; padding: 10px 8px; border: none; border-radius: inherit; outline: none; background: transparent; color: var(--dl-fg); font: inherit; line-height: 24px; overflow-y: auto; }
.customer-ray-composer textarea:focus { outline: none; box-shadow: none; }
.customer-ray-composer textarea::placeholder { color: var(--dl-fg-muted); }
.customer-ray-send { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 4px; background: var(--dl-primary); color: var(--dl-on-primary); }
.customer-ray-send svg { display: block; width: 20px; height: 20px; }
.customer-ray-disclaimer { margin: 8px 0 0; color: var(--dl-fg-muted); font-size: 11px; line-height: 1.4; text-align: center; }
.customer-ray-composer-actions { min-height: 36px; }
.customer-ray-composer-actions a { margin-left: auto; }
.customer-ray-history { flex: 1; min-height: 0; overflow-y: auto; padding: 8px 22px 20px; }
.customer-ray-panel:has(.customer-ray-history:not([hidden])) .customer-ray-messages { display: none; }
.customer-ray-subheader { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.customer-ray-subheader h3 { font-size: 16px; font-weight: 500; }
.customer-ray-history-item { display: flex; flex-direction: column; width: 100%; min-height: 64px; gap: 4px; padding: 12px; border: 0; border-bottom: 1px solid var(--dl-divider); background: none; color: inherit; text-align: left; overflow-wrap: anywhere; }
.customer-ray-history-item:hover, .customer-ray-history-item:focus-visible { background: var(--dl-secondary); }
.customer-ray-history-item strong { font-weight: 500; }
.customer-ray-history-item span { color: var(--dl-fg-muted); font-size: 12px; }
.customer-ray-report { max-height: 38%; overflow-y: auto; padding: 16px 22px; border-top: 1px solid var(--dl-divider); }
.customer-ray-report label { display: block; margin-bottom: 8px; font-size: 13px; }
.customer-ray-report textarea { width: 100%; box-sizing: border-box; appearance: none; padding: 8px; border: 1px solid var(--dl-input-border); border-radius: var(--daylight-radius-sm); background: var(--dl-input-bg); color: inherit; }
.customer-ray-report textarea:focus-visible { outline: 2px solid var(--dl-fg); outline-offset: 2px; }
.customer-ray-report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.customer-ray-report-actions .daylight-btn-v2 { flex: 1 1 auto; }
.customer-ray-page-space { min-height: 640px; }
.customer-ray-page .customer-ray-panel { width: min(760px, calc(100vw - 48px)); left: 50%; right: auto; transform: translateX(-50%); }
@media (max-width: 640px) {
  .customer-ray-launcher { right: 16px; bottom: calc(14px + env(safe-area-inset-bottom)); }
  .customer-ray-panel, .customer-ray-page .customer-ray-panel { top: var(--ray-top); right: 0; bottom: auto; left: 0; width: 100%; height: var(--ray-viewport); min-height: 0; max-height: var(--ray-viewport); border-radius: 0; transform: none; padding-top: env(safe-area-inset-top); }
  .customer-ray-header { padding: 10px 12px 10px 16px; }
  .customer-ray-controls .customer-ray-popout { display: none; }
  .customer-ray-composer-wrap { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .customer-ray-composer textarea, .customer-ray-report textarea { font-size: 16px; }
  .customer-ray-empty { padding-top: 16px; }
}
@media (prefers-reduced-motion: reduce) { .customer-ray *, .customer-ray *::before, .customer-ray *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.daylight:has(> .customer-ray) > main { padding-bottom: 88px; }

/* Ray's guide follows the persistent portal navigation and uses compact surfaces. */
.customer-portal-tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.customer-portal-tabs::-webkit-scrollbar { display: none; }
.customer-portal-tabs .daylight-tab { flex: none; white-space: nowrap; transition: color 180ms ease, opacity 180ms ease, border-color 180ms ease; }
.daylight .daylight-tab.customer-tour-tab-active { color: var(--daylight-orange); opacity: 1; }
.customer-tour, .customer-tour-banner, .customer-tour-welcome { font: 15px/1.5 "Aeonik Pro", sans-serif; color: var(--dl-fg); }
.customer-tour [hidden], .customer-tour-banner[hidden] { display: none !important; }
.customer-tour-banner, .customer-tour-bubble, .customer-tour-welcome { border: 1px solid var(--dl-border-strong); border-radius: 24px; background: var(--dl-card); padding: 20px; color: var(--dl-fg); box-shadow: 0 8px 32px rgb(26 8 0 / .14); }
.customer-tour-welcome { width: min(420px, calc(100vw - 32px)); margin: auto; }
.customer-tour-welcome::backdrop { background: rgb(26 8 0 / .42); }
.customer-tour-welcome h2 { margin: 16px 0 8px; font: 400 32px/1.1 "Feature Deck", serif; }
.customer-tour-welcome p { margin: 12px 0 16px; }
.customer-tour > .customer-tour-banner { position: fixed; z-index: 67; top: 20px; left: 50%; width: min(420px, calc(100vw - 32px)); transform: translateX(-50%); }
[data-customer-tour-intro] > .customer-tour-banner { margin-bottom: 24px; max-width: 680px; }
.customer-tour-bubble { position: relative; width: min(320px, calc(100vw - 32px)); max-height: calc(var(--ray-viewport, 100dvh) - 32px); overflow: visible; will-change: opacity, translate; }
.customer-tour-bubble-content { max-height: calc(var(--ray-viewport, 100dvh) - 64px); overflow-y: auto; will-change: opacity, transform; }
.daylight[data-theme="photo"] :is(.customer-tour-banner, .customer-tour-bubble, .customer-tour-welcome), html[data-theme-hint="photo"] :is(.customer-tour-banner, .customer-tour-bubble, .customer-tour-welcome) { background: #21160F; }
.customer-tour .customer-ray-avatar { width: 28px; height: 28px; }
.customer-tour-welcome .customer-ray-avatar { width: 32px; height: 32px; }
.customer-tour-identity { display: flex; align-items: center; gap: 10px; font-weight: 500; }
.customer-tour-progress { margin-left: auto; color: var(--dl-fg-muted); font-size: 13px; font-weight: 400; }
.customer-tour-bubble h2 { margin: 14px 0 6px; font: 400 24px/1.15 "Feature Deck", serif; }
.customer-tour-bubble [data-tour-title] { outline: none; }
.customer-tour-bubble p, .customer-tour-banner p { margin: 10px 0 14px; }
.customer-tour-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.customer-tour-actions .daylight-btn-v2 { flex: 0 1 auto; }
.customer-tour-quiet { min-height: 36px; padding: 6px 4px; border: 0; background: transparent; color: var(--dl-fg-muted); font: 13px/1 "Aeonik Pro", sans-serif; text-decoration: underline; }
.customer-tour-actions button:disabled { opacity: .45; cursor: default; }
.customer-tour-bubble [data-popper-arrow] { position: absolute; width: 10px; height: 10px; pointer-events: none; }
.customer-tour-bubble [data-popper-arrow]::before { position: absolute; inset: 0; display: block; content: ""; background: var(--dl-card); border: 1px solid var(--dl-border-strong); transform: rotate(45deg); }
.daylight[data-theme="photo"] .customer-tour-bubble [data-popper-arrow]::before, html[data-theme-hint="photo"] .customer-tour-bubble [data-popper-arrow]::before { background: #21160F; }
.customer-tour-bubble[data-popper-placement^="bottom"] > [data-popper-arrow] { top: -6px; }
.customer-tour-bubble[data-popper-placement^="bottom"] > [data-popper-arrow]::before { border-right: 0; border-bottom: 0; }
.customer-tour-bubble[data-popper-placement^="top"] > [data-popper-arrow] { bottom: -6px; }
.customer-tour-bubble[data-popper-placement^="top"] > [data-popper-arrow]::before { border-top: 0; border-left: 0; }
.customer-tour-bubble[data-popper-placement^="left"] > [data-popper-arrow] { right: -6px; }
.customer-tour-bubble[data-popper-placement^="left"] > [data-popper-arrow]::before { border-left: 0; border-bottom: 0; }
.customer-tour-bubble[data-popper-placement^="right"] > [data-popper-arrow] { left: -6px; }
.customer-tour-bubble[data-popper-placement^="right"] > [data-popper-arrow]::before { border-top: 0; border-right: 0; }
@media (prefers-reduced-motion: reduce) { .customer-tour-bubble, .customer-tour [data-tour-motion] { will-change: auto; } .customer-portal-tabs .daylight-tab { transition: none; } }