/*
 * Spyne Design OS tokens v2.1.0
 * GENERATED. Do not edit. Edit kernel/tokens.json and run `npm run build`.
 * Authority: kernel/SOURCE-OF-TRUTH.md
 * Figma: WhiruQHsdVqXKh9BbV9sM6 (Spyne Design System), node 289-3
 *
 * LIGHT MODE ONLY. semantic.color has exactly one mode. There is no dark theme
 * and no token path to one; inventing dark values produces something that looks
 * plausible and matches nothing.
 */

:root {

  /* SEMANTIC COLOUR - components reference ONLY these */

  /* semantic / surface */
  --spyne-surface-bg-canvas: #FAFAFF;  /* App canvas on non-house-style screens. */
  --spyne-surface-bg-default: #FFFFFF;  /* Cards, panels, tables. Also the house-style PAGE background. */
  --spyne-surface-bg-raised: #FFFFFF;  /* A surface above another surface. */
  --spyne-surface-bg-overlay: #FFFFFF;  /* Popover and menu bodies. */
  --spyne-surface-bg-sunken: #F1F1F5;  /* Table header strip, inset well. */
  --spyne-surface-bg-disabled: #F1F1F5;  /* Disabled control fill. */
  --spyne-surface-bg-wash: #F1F1F5;  /* House-style tinted PARENT card that holds white children. Not the page. */
  --spyne-surface-bg-blob: #AB92E8;  /* The signature blob. 12-20% opacity, 90-260px blur, bleeding off the edge, clipped. */
  --spyne-surface-bg-brand: #522EBF;  /* THE brand colour. Solid primary CTA, active states, brand chrome. */
  --spyne-surface-bg-brand-hover: #44259E;  /* Hover on a solid brand fill. */
  --spyne-surface-bg-brand-pressed: #371E7E;  /* Pressed on a solid brand fill. */
  --spyne-surface-bg-brand-subtle: #F1EDFB;  /* Soft brand wash: selected row, icon tile fill, soft badge. */
  --spyne-surface-bg-brand-subtle-hover: #E4DCF8;
  --spyne-surface-bg-brand-subtle-pressed: #C9B9F0;
  --spyne-surface-bg-accent: #6843CC;
  --spyne-surface-bg-accent-subtle: #F1EDFB;
  --spyne-surface-bg-selected: #F1EDFB;
  --spyne-surface-bg-selected-hover: #E4DCF8;
  --spyne-surface-bg-selected-pressed: #C9B9F0;
  --spyne-surface-bg-success: #008743;  /* Solid success fill. Corrected from 600 for contrast: white text was 3.34:1. */
  --spyne-surface-bg-success-subtle: #EBFAF3;
  --spyne-surface-bg-danger: #D92D20;
  --spyne-surface-bg-danger-subtle: #FFF5F5;
  --spyne-surface-bg-info: #0369A1;  /* Solid info fill. Corrected from 600 for contrast: white text was 4.10:1. */
  --spyne-surface-bg-info-subtle: #F0F9FF;
  --spyne-surface-bg-pending: #F97316;
  --spyne-surface-bg-pending-subtle: #FFF7ED;
  --spyne-surface-bg-hot-subtle: #FFF9F8;  /* Hot-lead row or card wash. */
  --spyne-surface-bg-inverse-strong: #111015;  /* SMALL inverted elements inside a light screen: floating bar, media well, dark hero card, tooltip */
  --spyne-surface-bg-product-instant: #C026D3;
  --spyne-surface-bg-product-create: #E8174A;
  --spyne-surface-bg-product-publish: #3A1EF5;
  --spyne-surface-bg-product-promote: #ED6A16;

  /* semantic / text */
  --spyne-text-default: #262C42;  /* Headings, values, body copy. */
  --spyne-text-subtle: #4C495D;  /* House-style body copy. */
  --spyne-text-muted: #68657A;  /* Captions, timestamps, helper strings. Corrected from #86839A: it was 3.67:1 and carried every ca */
  --spyne-text-disabled: #AAA8BD;  /* Disabled label only. WCAG-exempt: darkening it would make disabled look enabled. */
  --spyne-text-inverse: #FFFFFF;  /* Copy on a dark accent. NOT for a dark-themed screen. */
  --spyne-text-brand: #522EBF;
  --spyne-text-brand-strong: #371E7E;  /* Copy sitting ON a brand-wash surface. Grey on lavender reads as a rendering fault. */
  --spyne-text-brand-muted: #6843CC;  /* Secondary copy on a brand-wash surface. Corrected from brand/400 (4.51:1). */
  --spyne-text-brand-inverse: #C9B9F0;
  --spyne-text-accent: #522EBF;
  --spyne-text-success: #008743;  /* Corrected from success/700 at 4.62 to 800-equivalent. Now 6.57:1. */
  --spyne-text-danger: #B42318;
  --spyne-text-info: #0369A1;
  --spyne-text-pending: #C2410C;
  --spyne-text-hot: #C4320A;
  --spyne-text-on-brand: #FFFFFF;
  --spyne-text-on-success: #FFFFFF;
  --spyne-text-on-danger: #FFFFFF;
  --spyne-text-on-info: #FFFFFF;
  --spyne-text-on-pending: #262C42;  /* Amber needs dark ink, not white. */

  /* semantic / icon */
  --spyne-icon-default: #4C495D;
  --spyne-icon-subtle: #86839A;
  --spyne-icon-muted: #86839A;  /* Corrected from gray/400 (2.32:1). Now shares a value with subtle; the roles stay distinct in cas */
  --spyne-icon-disabled: #AAA8BD;  /* WCAG-exempt. */
  --spyne-icon-inverse: #FFFFFF;
  --spyne-icon-brand: #522EBF;
  --spyne-icon-accent: #6843CC;
  --spyne-icon-success: #00A251;
  --spyne-icon-danger: #D92D20;
  --spyne-icon-info: #0284C7;
  --spyne-icon-pending: #EA580C;
  --spyne-icon-hot: #C4320A;
  --spyne-icon-on-brand: #FFFFFF;
  --spyne-icon-on-pending: #262C42;

  /* semantic / border */
  --spyne-border-default: #E1E3E9;  /* Dividers and card hairlines ONLY. 1.28:1 by design. NEVER a control's only outline. */
  --spyne-border-subtle: #F1F1F5;  /* House-style card hairline, or omit it entirely and let the shadow separate. */
  --spyne-border-strong: #C4C2D1;
  --spyne-border-control: #86839A;  /* The visible boundary of an INTERACTIVE control: input, select, checkbox, radio, toggle track. Mu */
  --spyne-border-disabled: #E1E3E9;
  --spyne-border-brand: #522EBF;
  --spyne-border-accent: #6843CC;
  --spyne-border-selected: #522EBF;
  --spyne-border-focus: #6843CC;  /* Focus ring tint. Retinted from #818CF8, which was off-token AND failed 1.4.11 at 2.98:1. Now 6.4 */
  --spyne-border-focus-subtle: #C9B9F0;
  --spyne-border-success: #00A251;
  --spyne-border-danger: #D92D20;
  --spyne-border-info: #0284C7;
  --spyne-border-pending: #F97316;
  --spyne-border-hot: #FDE1DB;
  --spyne-border-texture: #E1E3E9;  /* Dot grid, diagonal stripes, concentric rings. Always at 45-55% opacity. */

  /* semantic / overlay */
  --spyne-overlay-default: #1F1E2A;  /* THE elevation ink. One colour for every shadow in the system. */
  --spyne-overlay-strong: #000000;
  --spyne-overlay-backdrop: rgb(20 16 40 / 0.35);  /* Modal scrim. Pair with the backdrop-blur effect (2px). */
  --spyne-overlay-backdrop-light: rgb(255 255 255 / 0.25);  /* Light scrim. Pair with backdrop-blur. */

  /* semantic / chart */
  --spyne-chart-1: #522EBF;
  --spyne-chart-2: #00A251;
  --spyne-chart-3: #F59E0B;
  --spyne-chart-4: #0EA5E9;
  --spyne-chart-5: #F04438;
  --spyne-chart-gauge-good: #0A9D63;
  --spyne-chart-gauge-warn: #F5A623;
  --spyne-chart-gauge-bad: #E0392E;

  /* PRIMITIVE RAMPS - documentation only. NEVER reference these from a component: */

  /* a primitive is still a variable, so binding to one passes a naive coverage */

  /* check while missing every re-skin and every accessibility fix. */
  --spyne-color-brand-50: #F1EDFB;
  --spyne-color-brand-100: #E4DCF8;
  --spyne-color-brand-200: #C9B9F0;
  --spyne-color-brand-300: #AB92E8;
  --spyne-color-brand-400: #8460D9;
  --spyne-color-brand-500: #6843CC;
  --spyne-color-brand-600: #522EBF;
  --spyne-color-brand-700: #44259E;
  --spyne-color-brand-800: #371E7E;
  --spyne-color-brand-900: #291661;
  --spyne-color-brand-950: #1A0E40;
  --spyne-color-gray-50: #FAFAFF;
  --spyne-color-gray-100: #F1F1F5;
  --spyne-color-gray-200: #E1E3E9;
  --spyne-color-gray-300: #C4C2D1;
  --spyne-color-gray-400: #AAA8BD;
  --spyne-color-gray-500: #86839A;
  --spyne-color-gray-600: #68657A;
  --spyne-color-gray-700: #4C495D;
  --spyne-color-gray-800: #343241;
  --spyne-color-gray-900: #262C42;
  --spyne-color-gray-950: #1F1E2A;
  --spyne-color-success-50: #EBFAF3;
  --spyne-color-success-600: #00A251;
  --spyne-color-success-700: #008743;
  --spyne-color-success-800: #006C36;
  --spyne-color-success-950: #00351A;
  --spyne-color-danger-50: #FFF5F5;
  --spyne-color-danger-600: #D92D20;
  --spyne-color-danger-700: #B42318;
  --spyne-color-danger-950: #450505;
  --spyne-color-info-50: #F0F9FF;
  --spyne-color-info-600: #0284C7;
  --spyne-color-info-700: #0369A1;
  --spyne-color-info-950: #082F49;
  --spyne-color-pending-50: #FFF7ED;
  --spyne-color-pending-500: #F97316;
  --spyne-color-pending-600: #EA580C;
  --spyne-color-pending-700: #C2410C;
  --spyne-color-pending-950: #431407;
  --spyne-color-hot-50: #FFF9F8;
  --spyne-color-hot-200: #FDE1DB;
  --spyne-color-hot-600: #C4320A;
  --spyne-color-hot-700: #A32908;
  --spyne-color-ink-900: #111015;
  --spyne-color-chart-1: #522EBF;
  --spyne-color-chart-2: #00A251;
  --spyne-color-chart-3: #F59E0B;
  --spyne-color-chart-4: #0EA5E9;
  --spyne-color-chart-5: #F04438;
  --spyne-color-viz-good: #0A9D63;
  --spyne-color-viz-warn: #F5A623;
  --spyne-color-viz-bad: #E0392E;
  --spyne-color-product-instant: #C026D3;
  --spyne-color-product-create: #E8174A;
  --spyne-color-product-publish: #3A1EF5;
  --spyne-color-product-promote: #ED6A16;
  --spyne-color-base-white: #FFFFFF;
  --spyne-color-base-black: #000000;

  /* TYPE FAMILIES */
  --spyne-font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
  --spyne-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* TYPE STYLES - 18 canonical. ASSIGN A STYLE, never type a fontSize. */
  --spyne-display-size: 48px;
  --spyne-display-weight: 700;
  --spyne-display-line-height: 56px;
  --spyne-display-lg-size: 40px;
  --spyne-display-lg-weight: 700;
  --spyne-display-lg-line-height: 48px;
  --spyne-heading-h1-size: 36px;
  --spyne-heading-h1-weight: 700;
  --spyne-heading-h1-line-height: 44px;
  --spyne-display-md-size: 32px;
  --spyne-display-md-weight: 700;
  --spyne-display-md-line-height: 40px;
  --spyne-heading-h2-size: 30px;
  --spyne-heading-h2-weight: 600;
  --spyne-heading-h2-line-height: 38px;
  --spyne-heading-h2-lg-size: 26px;
  --spyne-heading-h2-lg-weight: 600;
  --spyne-heading-h2-lg-line-height: 34px;
  --spyne-heading-h3-size: 24px;
  --spyne-heading-h3-weight: 600;
  --spyne-heading-h3-line-height: 32px;
  --spyne-heading-h4-size: 20px;
  --spyne-heading-h4-weight: 600;
  --spyne-heading-h4-line-height: 28px;
  --spyne-title-lg-size: 18px;
  --spyne-title-lg-weight: 600;
  --spyne-title-lg-line-height: 28px;
  --spyne-body-lg-size: 18px;
  --spyne-body-lg-weight: 500;
  --spyne-body-lg-line-height: 28px;
  --spyne-title-md-size: 16px;
  --spyne-title-md-weight: 600;
  --spyne-title-md-line-height: 24px;
  --spyne-body-md-size: 16px;
  --spyne-body-md-weight: 500;
  --spyne-body-md-line-height: 24px;
  --spyne-body-sm-size: 14px;
  --spyne-body-sm-weight: 500;
  --spyne-body-sm-line-height: 20px;
  --spyne-code-md-size: 14px;
  --spyne-code-md-weight: 400;
  --spyne-code-md-line-height: 20px;
  --spyne-caption-size: 12px;
  --spyne-caption-weight: 500;
  --spyne-caption-line-height: 16px;
  --spyne-code-sm-size: 12px;
  --spyne-code-sm-weight: 400;
  --spyne-code-sm-line-height: 16px;
  --spyne-caption-xs-size: 10px;
  --spyne-caption-xs-weight: 500;
  --spyne-caption-xs-line-height: 14px;
  --spyne-micro-size: 8px;
  --spyne-micro-weight: 500;
  --spyne-micro-line-height: 12px;

  /* HOUSE-STYLE TYPE ROLES - body is 14 REGULAR; 16 is a card title */
  --spyne-house-eyebrow-size: 10px;
  --spyne-house-eyebrow-weight: 500;
  --spyne-house-eyebrow-tracking: 0.9px;
  --spyne-house-hero-size: 28px;
  --spyne-house-hero-weight: 700;
  --spyne-house-hero-tracking: -0.6px;
  --spyne-house-section-size: 20px;
  --spyne-house-section-weight: 700;
  --spyne-house-section-tracking: -0.3px;
  --spyne-house-card-title-size: 16px;
  --spyne-house-card-title-weight: 700;
  --spyne-house-body-size: 14px;
  --spyne-house-body-weight: 400;
  --spyne-house-body-line-height: 20px;
  --spyne-house-caption-size: 12px;
  --spyne-house-caption-weight: 400;
  --spyne-house-hero-metric-size: 40px;
  --spyne-house-hero-metric-weight: 800;
  --spyne-house-hero-metric-tracking: -1.2px;
  --spyne-house-wordmark-size: 48px;
  --spyne-house-wordmark-weight: 800;

  /* RADIUS - by role. Bind the token; never type the number. */
  --spyne-radius-control-xs: 4px;  /* Badge, Lead Chip, priority and count chips, BULK/QUICK tags. Anything that LABELS something. */
  --spyne-radius-control-sm: 8px;  /* 32px icon tile. */
  --spyne-radius-control-md: 12px;  /* BUTTON, input, filter chip, 40-56px icon tile. The CTA is a 12px rounded rectangle, never a pill */
  --spyne-radius-control-lg: 16px;
  --spyne-radius-container-sm: 8px;
  --spyne-radius-container-md: 12px;
  --spyne-radius-container-lg: 16px;  /* Card, Metric Card. */
  --spyne-radius-container-xl: 20px;  /* Large panel, nested house-style tile. */
  --spyne-radius-container-2xl: 32px;  /* Outer house-style shell. */
  --spyne-radius-dialog: 24px;  /* Modal. */
  --spyne-radius-pill: 9999px;  /* Toggle and slider TRACKS, progress fills, removable filter chips (VIN x), Floating Select, day-s */

  /* SPACE */
  --spyne-space-control-sm: 40px;
  --spyne-space-control-md: 44px;
  --spyne-space-control-lg: 48px;
  --spyne-space-scale-none: 0;
  --spyne-space-scale-xs: 8px;
  --spyne-space-scale-sm: 12px;
  --spyne-space-scale-md: 16px;
  --spyne-space-scale-lg: 24px;
  --spyne-space-scale-xl: 32px;
  --spyne-space-scale-2xl: 48px;
  --spyne-space-section-sm: 48px;
  --spyne-space-section-md: 64px;
  --spyne-space-section-lg: 80px;
  --spyne-space-section-xl: 96px;
  --spyne-space-section-2xl: 128px;
  --spyne-space-house-card-padding: 24px;
  --spyne-space-house-card-padding-max: 28px;
  --spyne-space-house-card-gap: 20px;

  /* GRADIENTS - shared styles. NEVER inline: an inline gradient does not */

  /* update when the style does, which is exactly how drift happened before. */
  --spyne-gradient-brand: linear-gradient(135deg, #4612C6 0%, #AA91E9 100%);  /* THE hero CTA fill. appearance=primary is the Button set's DEFAULT variant. Roughly ONE per scree */
  --spyne-gradient-brand-hover: linear-gradient(135deg, #350D96 0%, #7E5FD0 100%);
  --spyne-gradient-brand-spectrum: linear-gradient(135deg, #5BBFF6 0%, #7F6AF2 40%, #B651D7 70%, #ED8939 100%);  /* Wordmark, hero numerals. */
  --spyne-gradient-brand-wash: linear-gradient(100deg, #FFFFFF 0%, #F1EDFB 100%);  /* Hero and promo BANNER background. A surface, not a CTA. */
  --spyne-gradient-card-wash: linear-gradient(135deg, #FFFFFF 0%, #F1EDFB 100%);  /* House-style card fill. */
  --spyne-gradient-hero-wash: linear-gradient(160deg, #FFFFFF 0%, #F1EDFB 100%);
  --spyne-gradient-page-wash: linear-gradient(180deg, #FFFFFF 0%, #F1F1F5 100%);  /* Inner panel fill. NOT the page: the page is white. */
  --spyne-gradient-danger: linear-gradient(135deg, #FF6A63 0%, #E7322F 100%);
  --spyne-gradient-warm: linear-gradient(135deg, #7F6AF2 0%, #B651D7 33%, #E83E54 66%, #ED8939 100%);  /* Emphasis, deliberately louder than brand. Rare. Not a Button variant. */
  --spyne-gradient-pro: linear-gradient(135deg, #7A3DF0 0%, #4600F2 100%);  /* PRO / premium badge. The only sanctioned surviving use of #4600F2. */
  --spyne-gradient-avatar: linear-gradient(135deg, #F2994A 0%, #B24592 50%, #5B247A 100%);

  /* ELEVATION - one ink (#1F1E2A). panel = ON the page, lg = ABOVE the page. */
  --spyne-shadow-none: none;
  --spyne-shadow-sm: 0 1px 2px 0 rgb(31 30 42 / 0.07);  /* Resting: button, input, table row. */
  --spyne-shadow-md: 0 1px 0 0 rgb(31 30 42 / 0.07), 0 3px 1px -1px rgb(31 30 42 / 0.07), 0 4px 6px -2px rgb(31 30 42 / 0.20);  /* Low lift. Currently unused; an available tier, not a mistake. */
  --spyne-shadow-panel: 0 2px 8px 0 rgb(31 30 42 / 0.06), 0 8px 24px -4px rgb(31 30 42 / 0.04);  /* A card sitting ON the canvas. */
  --spyne-shadow-lg: 0 4px 6px -2px rgb(31 30 42 / 0.12), 0 8px 16px -4px rgb(31 30 42 / 0.20);  /* Floating ABOVE content: menu, dropdown, popover, tooltip. */
  --spyne-shadow-xl: 0 8px 16px -4px rgb(31 30 42 / 0.16), 0 12px 20px -8px rgb(31 30 42 / 0.24), 0 20px 24px -8px rgb(31 30 42 / 0.20);  /* Modal, floating control. */
  --spyne-shadow-floating: 0 20px 50px -34px rgb(31 30 42 / 0.45);  /* Dramatic lifted card: marketing hero, agent card, welcome modal. Heavier than xl on purpose. */
  --spyne-shadow-drawer: -16px 0 46px 0 rgb(31 30 42 / 0.20);  /* Side-entering drawer. Casts horizontally because the edge it leaves is vertical. Mirror x for a  */
  --spyne-shadow-brand-glow: 0 14px 30px -12px rgb(104 67 204 / 0.50);  /* Brand glow under a hero CTA. THE ONLY shadow allowed a colour other than the elevation ink. */
  --spyne-shadow-card: 0 2px 8px 0 rgb(31 30 42 / 0.04), 0 12px 32px -8px rgb(31 30 42 / 0.06);  /* House-style card. */
  --spyne-shadow-card-lifted: 0 4px 12px -2px rgb(31 30 42 / 0.05), 0 20px 48px -12px rgb(31 30 42 / 0.08);  /* White tile nested on a washed parent. */
  --spyne-shadow-shell: 0 8px 24px -4px rgb(31 30 42 / 0.04), 0 32px 80px -24px rgb(31 30 42 / 0.07);  /* Outer house-style shell. */
  --spyne-shadow-focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px rgb(104 67 204 / 0.40);  /* Keyboard focus. */
  --spyne-shadow-focus-ring-raised: 0 1px 2px 0 rgb(31 30 42 / 0.07), 0 0 0 2px #FFFFFF, 0 0 0 4px rgb(104 67 204 / 0.40);  /* Focus on a control that already has resting elevation. */
  --spyne-shadow-backdrop-blur: 2px;  /* Background blur, paired with an overlay backdrop on a modal scrim. */

  /* HOUSE STYLE - the signature blob */
  --spyne-blob-corner-opacity: 0.14;
  --spyne-blob-card-opacity: 0.16;
  --spyne-blob-blur: 160px;
  --spyne-blob-blur-min: 90px;
  --spyne-blob-blur-max: 260px;

  /* MOTION - 150ms on hover and focus is the whole motion design */
  --spyne-duration-instant: 100ms;
  --spyne-duration-fast: 150ms;
  --spyne-duration-base: 200ms;
  --spyne-duration-slow: 300ms;
  --spyne-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --spyne-ease-exit: cubic-bezier(0.4, 0, 1, 1);

  /* MEDIA - vehicles are 4:3 cover, always */
  --spyne-aspect-vehicle: 4 / 3;
  --spyne-aspect-thumb: 1 / 1;
  --spyne-aspect-wide: 16 / 9;
  --spyne-thumb-table: 56px;
  --spyne-thumb-avatar: 32px;
  --spyne-media-fit: cover;
  --spyne-media-radius: 12px;
  --spyne-media-placeholder: #F1F1F5;

  /* BRAND - the mark is an image. `.spyne-wordmark` is display type, NOT the logo. */
  --spyne-brand-appbar-height: 60px;
  --spyne-brand-mark-height: 24px;
  --spyne-brand-icon-size: 28px;

  /* CTA - heights. Radius is control-md (12). A rounded rectangle, never a pill. */
  --spyne-btn-sm-height: 40px;
  --spyne-btn-md-height: 44px;
  --spyne-btn-lg-height: 48px;
}
/*
 * Spyne Design OS - Component Kit v2
 * ------------------------------------------------------------------
 * Depends on: spyne-tokens.css (generated from kernel/tokens.json)
 * Authority:  kernel/SOURCE-OF-TRUTH.md
 *
 * THE HOUSE STYLE, in five rules:
 *   1. The page is WHITE with a purple blob in each top corner.
 *   2. Two levels of card depth: a washed parent holding white children.
 *   3. Blobs, not gradients-across-the-card. 14-20% opacity, 90-260px blur.
 *   4. Single-hue. Every blob is brand purple.
 *   5. Shadows are wide, diffuse and nearly invisible.
 *
 * LIGHT MODE ONLY. There is no dark theme and no token path to one.
 *
 * DO NOT EDIT IN A CONSUMER REPO. Run `npx spyne-design sync`.
 */

/* ==================================================================
   1. FOUNDATION
   ================================================================== */

.spyne-app {
  background: var(--spyne-surface-bg-default);      /* WHITE. Rule 1. */
  color: var(--spyne-text-default);
  font-family: var(--spyne-font-sans);
  font-size: var(--spyne-house-body-size);          /* 14 */
  font-weight: var(--spyne-house-body-weight);      /* 400 */
  line-height: var(--spyne-house-body-line-height);
  -webkit-font-smoothing: antialiased;
}

/* Positioning root for the corner blobs. Clips them. */
.spyne-page {
  position: relative;
  overflow: hidden;
  padding: 32px var(--spyne-space-scale-lg) var(--spyne-space-scale-xl);
  min-height: 100%;
}
.spyne-page > * { position: relative; z-index: 1; }

/*
 * THE SIGNATURE BLOB. Rule 3.
 * If you can see where it ends, it is too strong. The first attempt used
 * brand/400 at 35-45% and read as purple circles.
 */
.spyne-blob {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  background: var(--spyne-surface-bg-blob);
  filter: blur(var(--spyne-blob-blur));
  opacity: var(--spyne-blob-corner-opacity);
  width: 420px;
  height: 420px;
}
.spyne-blob--tl { top: -180px; left: -140px; }
.spyne-blob--tr { top: -200px; right: -160px; }
.spyne-blob--sm { width: 260px; height: 260px; filter: blur(var(--spyne-blob-blur-min)); }
.spyne-blob--lg { width: 560px; height: 560px; filter: blur(var(--spyne-blob-blur-max)); }
.spyne-blob--card { opacity: var(--spyne-blob-card-opacity); }

/* Vertical rhythm. 20px between cards is the house gap. */
.spyne-stack { display: flex; flex-direction: column; gap: var(--spyne-space-house-card-gap); }
.spyne-stack--tight { gap: var(--spyne-space-scale-md); }
.spyne-row { display: flex; align-items: center; gap: var(--spyne-space-scale-sm); flex-wrap: wrap; }

/* ---- type roles ---- */

.spyne-eyebrow {
  display: block;
  font-size: var(--spyne-house-eyebrow-size);          /* 10 */
  font-weight: var(--spyne-house-eyebrow-weight);      /* 500 */
  letter-spacing: var(--spyne-house-eyebrow-tracking); /* 0.9px */
  text-transform: uppercase;
  color: var(--spyne-text-muted);
}
.spyne-eyebrow--mono { font-family: var(--spyne-font-mono); }

.spyne-hero-title {
  font-size: var(--spyne-house-hero-size);             /* 28 */
  font-weight: var(--spyne-house-hero-weight);         /* 700 */
  letter-spacing: var(--spyne-house-hero-tracking);
  line-height: 1.2;
  color: var(--spyne-text-default);
  margin: 0;
  text-wrap: balance;
}
/* The recurring house device: mute one line of a big headline. */
.spyne-hero-title em { font-style: normal; color: var(--spyne-text-muted); }

.spyne-section-title {
  font-size: var(--spyne-house-section-size);          /* 20 */
  font-weight: var(--spyne-house-section-weight);      /* 700 */
  letter-spacing: var(--spyne-house-section-tracking);
  color: var(--spyne-text-default);
  margin: 0;
}
.spyne-card-title {
  font-size: var(--spyne-house-card-title-size);        /* 16 */
  font-weight: var(--spyne-house-card-title-weight);    /* 700 */
  color: var(--spyne-text-default);
  margin: 0;
}
.spyne-body    { font-size: var(--spyne-house-body-size); font-weight: 400; line-height: var(--spyne-house-body-line-height); color: var(--spyne-text-subtle); margin: 0; }
.spyne-caption { font-size: var(--spyne-house-caption-size); font-weight: 400; color: var(--spyne-text-muted); margin: 0; }
.spyne-metric  { font-size: var(--spyne-house-hero-metric-size); font-weight: var(--spyne-house-hero-metric-weight); letter-spacing: var(--spyne-house-hero-metric-tracking); line-height: 1; color: var(--spyne-text-default); font-variant-numeric: tabular-nums; }
.spyne-metric--brand { color: var(--spyne-text-brand); }

.spyne-wordmark {
  font-size: var(--spyne-house-wordmark-size);
  font-weight: var(--spyne-house-wordmark-weight);
  background: var(--spyne-gradient-brand-spectrum);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* VIN, stock number, RO number. The only mono in the product. */
.spyne-identifier {
  font-family: var(--spyne-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--spyne-caption-size);
  color: var(--spyne-text-muted);
}

/* ==================================================================
   2. SURFACES - two levels of depth (Rule 2)
   ================================================================== */

/* Outer shell: washed, holds white children. */
.spyne-shell {
  position: relative;
  overflow: hidden;
  border-radius: var(--spyne-radius-container-2xl);   /* 32 */
  background: var(--spyne-surface-bg-wash);
  box-shadow: var(--spyne-shadow-shell);
  padding: var(--spyne-space-house-card-padding);
}

/* Card: white or washed, sits on the page. */
.spyne-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--spyne-radius-container-xl);    /* 20 */
  background: var(--spyne-surface-bg-default);
  border: 1px solid var(--spyne-border-subtle);
  box-shadow: var(--spyne-shadow-card);
  padding: var(--spyne-space-house-card-padding);
}
.spyne-card--wash   { background: var(--spyne-gradient-card-wash); }
.spyne-card--dialog { border-radius: var(--spyne-radius-dialog); }   /* 24 */
.spyne-card--flush  { padding: 0; }
/* No hairline under a title block: separation is space. */
.spyne-card__header { display: flex; flex-direction: column; gap: 6px; border-bottom: none; }

/* Nested white tile on a washed parent. */
.spyne-tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--spyne-radius-container-xl);    /* 20 */
  background: var(--spyne-surface-bg-default);
  box-shadow: var(--spyne-shadow-card-lifted);
  padding: var(--spyne-space-scale-lg);
}

/* Panel: the workhorse container for a heading plus a table or list. */
.spyne-panel {
  border-radius: var(--spyne-radius-container-lg);    /* 16 */
  border: 1px solid var(--spyne-border-subtle);
  background: var(--spyne-surface-bg-default);
  box-shadow: var(--spyne-shadow-panel);
  overflow: hidden;
}
.spyne-panel__header      { padding: var(--spyne-space-scale-lg); }
.spyne-panel__footer      { border-top: 1px solid var(--spyne-border-subtle); padding: var(--spyne-space-scale-md) var(--spyne-space-scale-lg) var(--spyne-space-scale-lg); }
.spyne-panel__footer-row  { border-top: 1px solid var(--spyne-border-subtle); padding: var(--spyne-space-scale-md) var(--spyne-space-scale-lg); }

/* Hero / promo banner. gradient-brand-wash is a SURFACE, not a CTA. */
.spyne-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--spyne-radius-container-2xl);
  background: var(--spyne-gradient-brand-wash);
  padding: 32px;
}
.spyne-hero__content { position: relative; z-index: 1; }

/* ==================================================================
   3. BUTTONS - 12px rounded rectangles. NEVER pills. NEVER black.
   The default primary IS the gradient, and it is ~one per screen.
   ================================================================== */

.spyne-btn,
[class^="spyne-btn-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--spyne-radius-control-md);      /* 12 */
  font-family: inherit;
  font-size: var(--spyne-body-sm-size);               /* 14 */
  font-weight: var(--spyne-body-sm-weight);           /* 500 */
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--spyne-duration-fast) var(--spyne-ease-standard),
              border-color var(--spyne-duration-fast) var(--spyne-ease-standard),
              filter var(--spyne-duration-fast) var(--spyne-ease-standard);
}

.spyne-btn--sm { height: var(--spyne-btn-sm-height); padding-inline: 14px; }
.spyne-btn--md,
[class^="spyne-btn-"]:not(.spyne-btn--sm):not(.spyne-btn--lg) { height: var(--spyne-btn-md-height); padding-inline: 18px; }
.spyne-btn--lg { height: var(--spyne-btn-lg-height); padding-inline: 22px; font-size: var(--spyne-body-md-size); }

/* The hero action. ONE per screen: it earns attention because it is scarce. */
.spyne-btn-primary {
  background: var(--spyne-gradient-brand);
  color: var(--spyne-text-on-brand);
  border-color: transparent;
}
.spyne-btn-primary:hover { background: var(--spyne-gradient-brand-hover); }
.spyne-btn-primary--glow { box-shadow: var(--spyne-shadow-brand-glow); }

/* Other primary-weight actions: inline, repeated, dense lists. */
.spyne-btn-primary-solid {
  background: var(--spyne-surface-bg-brand);
  color: var(--spyne-text-on-brand);
}
.spyne-btn-primary-solid:hover  { background: var(--spyne-surface-bg-brand-hover); }
.spyne-btn-primary-solid:active { background: var(--spyne-surface-bg-brand-pressed); }

/* Branded alternative: white with a 1.5px gradient border. */
.spyne-btn-secondary {
  background:
    linear-gradient(var(--spyne-surface-bg-default), var(--spyne-surface-bg-default)) padding-box,
    var(--spyne-gradient-brand) border-box;
  border: 1.5px solid transparent;
  color: var(--spyne-text-brand);
}
.spyne-btn-secondary:hover { filter: brightness(0.98); }

/* Neutral alternative: recedes. */
.spyne-btn-secondary-neutral {
  background: var(--spyne-surface-bg-default);
  border-color: var(--spyne-border-default);
  color: var(--spyne-text-default);
}
.spyne-btn-secondary-neutral:hover { background: var(--spyne-surface-bg-sunken); }

.spyne-btn-ghost { background: transparent; color: var(--spyne-text-brand); }
.spyne-btn-ghost:hover { background: var(--spyne-surface-bg-brand-subtle); }

.spyne-btn-link {
  display: inline-flex; align-items: center; gap: 4px;
  height: auto; padding: 0; border: none; background: none;
  font-family: inherit; font-size: var(--spyne-body-sm-size); font-weight: 500;
  color: var(--spyne-text-brand); cursor: pointer;
}
.spyne-btn-link:hover { text-decoration: underline; }

[class^="spyne-btn-"]:disabled {
  background: var(--spyne-surface-bg-disabled);
  color: var(--spyne-text-disabled);
  border-color: var(--spyne-border-disabled);
  cursor: not-allowed;
  filter: none;
}
[class^="spyne-btn-"]:focus-visible { outline: none; box-shadow: var(--spyne-shadow-focus-ring); }

/* ==================================================================
   4. BADGE - static label, rounded rectangle at 4px (NOT a pill)
   ================================================================== */

.spyne-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: var(--spyne-radius-control-xs);      /* 4 */
  border: 1px solid transparent;
  padding: 3px 7px;
  font-size: var(--spyne-caption-size);               /* 12 */
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}
.spyne-badge--neutral { background: var(--spyne-surface-bg-sunken);         color: var(--spyne-text-subtle);  border-color: var(--spyne-border-default); }
.spyne-badge--brand   { background: var(--spyne-surface-bg-brand-subtle);   color: var(--spyne-text-brand);   border-color: var(--spyne-border-focus-subtle); }
.spyne-badge--success { background: var(--spyne-surface-bg-success-subtle); color: var(--spyne-text-success); border-color: var(--spyne-border-success); }
.spyne-badge--danger  { background: var(--spyne-surface-bg-danger-subtle);  color: var(--spyne-text-danger);  border-color: var(--spyne-border-danger); }
.spyne-badge--info    { background: var(--spyne-surface-bg-info-subtle);    color: var(--spyne-text-info);    border-color: var(--spyne-border-info); }
.spyne-badge--pending { background: var(--spyne-surface-bg-pending-subtle); color: var(--spyne-text-pending); border-color: var(--spyne-border-pending); }
.spyne-badge--hot     { background: var(--spyne-surface-bg-hot-subtle);     color: var(--spyne-text-hot);     border-color: var(--spyne-border-hot); }

/* Solid emphasis. Amber takes dark ink, never white. */
.spyne-badge--solid.spyne-badge--brand   { background: var(--spyne-surface-bg-brand);   color: var(--spyne-text-on-brand);   border-color: transparent; }
.spyne-badge--solid.spyne-badge--success { background: var(--spyne-surface-bg-success); color: var(--spyne-text-on-success); border-color: transparent; }
.spyne-badge--solid.spyne-badge--danger  { background: var(--spyne-surface-bg-danger);  color: var(--spyne-text-on-danger);  border-color: transparent; }
.spyne-badge--solid.spyne-badge--info    { background: var(--spyne-surface-bg-info);    color: var(--spyne-text-on-info);    border-color: transparent; }
.spyne-badge--solid.spyne-badge--pending { background: var(--spyne-surface-bg-pending); color: var(--spyne-text-on-pending); border-color: transparent; }

/* Count variant. */
.spyne-badge--count { min-width: 20px; justify-content: center; font-variant-numeric: tabular-nums; font-weight: 600; }

/* Leading icon inside a badge. Sized to the 12px label, not the icon default. */
.spyne-badge__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; flex-shrink: 0;
}
.spyne-badge__icon > svg,
.spyne-badge__icon .material-symbols-outlined { width: 14px; height: 14px; font-size: 14px; line-height: 1; }

/* ==================================================================
   5. CHIP - interactive filter. 12px to match the buttons.
   A PILL only when it is dismissible or a track (see .spyne-pill).
   ================================================================== */

.spyne-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--spyne-radius-control-md);      /* 12 */
  border: 1px solid var(--spyne-border-default);
  background: var(--spyne-surface-bg-default);
  padding: 6px 12px;
  font-family: inherit;
  font-size: var(--spyne-caption-size);
  font-weight: 500;
  color: var(--spyne-text-subtle);
  cursor: pointer;
  transition: border-color var(--spyne-duration-fast) var(--spyne-ease-standard),
              background-color var(--spyne-duration-fast) var(--spyne-ease-standard);
}
.spyne-chip:hover { border-color: var(--spyne-border-strong); }
.spyne-chip[aria-pressed="true"],
.spyne-chip--active {
  background: var(--spyne-surface-bg-brand-subtle);
  border-color: var(--spyne-border-brand);
  color: var(--spyne-text-brand);
  font-weight: 600;
}
.spyne-chip__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--spyne-radius-control-xs);
  background: var(--spyne-surface-bg-sunken);
  font-size: var(--spyne-micro-size); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.spyne-chip:focus-visible { outline: none; box-shadow: var(--spyne-shadow-focus-ring); }

/* Dismissible filter chip and control tracks: THESE are pills. */
.spyne-pill {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--spyne-radius-pill);
  border: 1px solid var(--spyne-border-brand);
  background: var(--spyne-surface-bg-default);
  padding: 4px 10px;
  font-size: var(--spyne-caption-size); font-weight: 500;
  color: var(--spyne-text-brand);
  cursor: pointer;
}

/* ==================================================================
   6. ICON TILE / EYEBROW / METRIC BLOCK / LIST ROW
   Layer names matter: override by NAME, not by index.
   ================================================================== */

.spyne-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--spyne-radius-control-md);      /* 12 at 40-56 */
  background: var(--spyne-surface-bg-brand-subtle);
  border: 1px solid color-mix(in srgb, var(--spyne-border-focus-subtle) 70%, transparent);
  color: var(--spyne-icon-brand);
}
.spyne-icon-tile--32 { width: 32px; height: 32px; border-radius: var(--spyne-radius-control-sm); }  /* 8 at 32 */
.spyne-icon-tile--48 { width: 48px; height: 48px; }
.spyne-icon-tile--56 { width: 56px; height: 56px; border-radius: var(--spyne-radius-pill); }        /* circle for status */

/* Product identity tiles. Accent = identity ONLY, never a CTA. */
.spyne-icon-tile--instant { background: var(--spyne-surface-bg-product-instant); color: #fff; border-color: transparent; }
.spyne-icon-tile--create  { background: var(--spyne-surface-bg-product-create);  color: #fff; border-color: transparent; }
.spyne-icon-tile--publish { background: var(--spyne-surface-bg-product-publish); color: #fff; border-color: transparent; }
.spyne-icon-tile--promote { background: var(--spyne-surface-bg-product-promote); color: #fff; border-color: transparent; }

.spyne-metric-block { display: flex; flex-direction: column; gap: 4px; }
.spyne-metric-block__label   { font-size: var(--spyne-house-eyebrow-size); font-weight: 500; letter-spacing: var(--spyne-house-eyebrow-tracking); text-transform: uppercase; color: var(--spyne-text-muted); }
.spyne-metric-block__value   { font-size: var(--spyne-heading-h3-size); font-weight: 800; line-height: 1.1; color: var(--spyne-text-default); font-variant-numeric: tabular-nums; }
.spyne-metric-block__caption { font-size: var(--spyne-house-caption-size); color: var(--spyne-text-muted); }
.spyne-metric-block--brand .spyne-metric-block__value { color: var(--spyne-text-brand); }

.spyne-list-row {
  display: flex; align-items: center; gap: var(--spyne-space-scale-sm);
  width: 100%; text-align: left;
  border-radius: var(--spyne-radius-container-md);
  border: none;
  background: var(--spyne-surface-bg-default);
  box-shadow: var(--spyne-shadow-card-lifted);
  padding: var(--spyne-space-scale-md);
  font-family: inherit;
  cursor: pointer;
  transition: box-shadow var(--spyne-duration-fast) var(--spyne-ease-standard);
}
.spyne-list-row--compact { padding: 10px var(--spyne-space-scale-sm); }
.spyne-list-row__main     { min-width: 0; flex: 1 1 auto; }
.spyne-list-row__name     { font-size: var(--spyne-house-body-size); font-weight: 600; color: var(--spyne-text-default); }
.spyne-list-row__meta     { font-size: var(--spyne-house-caption-size); color: var(--spyne-text-muted); margin-top: 2px; }
.spyne-list-row__trailing { margin-left: auto; flex-shrink: 0; }
.spyne-list-row:focus-visible { outline: none; box-shadow: var(--spyne-shadow-focus-ring); }

/* ==================================================================
   7. LOCKED PATTERN: METRIC CARD
   411x178. Reproduce EXACTLY. Change ONLY the text, the numbers, the
   icon and the blob hue. If two generations look different, that is a bug.
   ================================================================== */

.spyne-kpi-card {
  position: relative;
  width: 411px;
  max-width: 100%;
  height: 178px;
  background: var(--spyne-surface-bg-default);
  border: 1px solid var(--spyne-border-subtle);
  border-radius: var(--spyne-radius-container-lg);    /* 16 */
  padding: var(--spyne-space-scale-lg);               /* 20 */
  overflow: hidden;
  box-shadow: var(--spyne-shadow-card);
  --kpi-hue: #C1A7FF;                                /* purple is the default */
  --kpi-glow: rgb(139 107 232 / 0.30);
  --kpi-ink: var(--spyne-text-brand);
}
.spyne-kpi-card--gold { --kpi-hue: #DBBB55; --kpi-glow: rgb(219 184 85 / 0.30); --kpi-ink: #A16207; }
.spyne-kpi-card--pink { --kpi-hue: #DB559F; --kpi-glow: rgb(219 85 159 / 0.30);  --kpi-ink: #BE2A6E; }

/* Soft right-side tint. Figma 150px layer-blur @16% ~= CSS blur(75px) @.32 */
.spyne-kpi-card__tint {
  position: absolute; right: -64px; top: 60px;
  width: 188px; height: 188px; border-radius: 50%;
  background: var(--kpi-hue);
  filter: blur(75px); opacity: 0.32; pointer-events: none;
}
/* Layer 1: white halo, bleeding off the TOP edge. */
.spyne-kpi-card__halo {
  position: absolute; right: -20px; top: -12px;
  width: 149px; height: 149px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0));
  pointer-events: none;
}
/* Layer 2: coloured glow. This is the colour at the corner. */
.spyne-kpi-card__glow {
  position: absolute; right: 2px; top: 8px;
  width: 103px; height: 103px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--kpi-glow), transparent);
  filter: blur(6px); pointer-events: none;
}
/* Layer 3: white plate the icon sits on. */
.spyne-kpi-card__plate {
  position: absolute; right: 4px; top: 10px;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 255 255 / 0.95) 55%, rgb(255 255 255 / 0));
  pointer-events: none;
}
/* Layer 4: the icon. 40px line icon, or a ~110px illustrated icon. */
.spyne-kpi-card__icon {
  position: absolute; right: 34px; top: 40px;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--kpi-ink);
}
/* An illustrated icon brings its own halo, so it REPLACES layers 1-3. */
.spyne-kpi-card--illustrated .spyne-kpi-card__halo,
.spyne-kpi-card--illustrated .spyne-kpi-card__glow,
.spyne-kpi-card--illustrated .spyne-kpi-card__plate { display: none; }
.spyne-kpi-card--illustrated .spyne-kpi-card__icon {
  right: -2px; top: -6px; width: 110px; height: 110px;
}

.spyne-kpi-card__head { position: relative; display: flex; align-items: center; gap: 8px; }
.spyne-kpi-card__title { font-size: var(--spyne-heading-h4-size); color: var(--spyne-text-default); }
.spyne-kpi-card__title span { font-weight: 500; }
.spyne-kpi-card__title b    { font-weight: 800; }
.spyne-kpi-card__info { color: var(--spyne-icon-muted); font-size: var(--spyne-body-sm-size); display: inline-flex; }

.spyne-kpi-card__value {
  position: relative;
  font-size: var(--spyne-display-lg-size);            /* 40 */
  font-weight: 800;
  letter-spacing: -1.2px;
  color: var(--spyne-text-default);
  margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.spyne-kpi-card__unit { font-size: var(--spyne-heading-h4-size); font-weight: 800; margin-left: 4px; }
.spyne-kpi-card__div  { position: relative; border: 0; border-top: 1px solid var(--spyne-border-subtle); margin: 14px 0 10px; }
.spyne-kpi-card__legend {
  position: relative;
  display: flex; justify-content: space-between; gap: var(--spyne-space-scale-sm);
  font-size: var(--spyne-house-caption-size); color: var(--spyne-text-muted);
}
.spyne-kpi-card__legend b { color: var(--spyne-text-default); margin-left: 4px; }
.spyne-kpi-card__legend i {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 6px; vertical-align: -1px;
}

/* ==================================================================
   8. TABS - line tabs and segmented. Never a generic Tabs component.
   ================================================================== */

.spyne-line-tabs {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  column-gap: var(--spyne-space-scale-lg); row-gap: 4px;
  border-bottom: 1px solid var(--spyne-border-subtle);
  margin-bottom: var(--spyne-space-house-card-gap);
}
.spyne-line-tabs--tight { margin-bottom: var(--spyne-space-scale-md); }
.spyne-line-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 2px 10px;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: var(--spyne-house-body-size);
  font-weight: 500;
  color: var(--spyne-text-muted);
  background: none; border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--spyne-duration-fast) var(--spyne-ease-standard),
              border-color var(--spyne-duration-fast) var(--spyne-ease-standard);
}
.spyne-line-tab:hover { color: var(--spyne-text-default); }
/* Inline parenthetical count: All(3,834), with no space before the paren. */
.spyne-line-tab__label { display: inline-flex; align-items: baseline; gap: 0; white-space: nowrap; }
.spyne-line-tab__count { font-variant-numeric: tabular-nums; font-weight: inherit; color: inherit; }

.spyne-line-tab--active,
.spyne-line-tab[aria-selected="true"] {
  font-weight: 700;
  color: var(--spyne-text-brand);
  border-bottom-color: var(--spyne-border-brand);
}
.spyne-line-tab:focus-visible { outline: none; box-shadow: var(--spyne-shadow-focus-ring); border-radius: var(--spyne-radius-control-sm); }

.spyne-segmented {
  display: inline-flex; align-items: stretch;
  border: 1px solid var(--spyne-border-default);
  border-radius: var(--spyne-radius-control-md);
  background: var(--spyne-surface-bg-default);
  overflow: hidden;
}
.spyne-segmented__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: var(--spyne-space-control-sm);          /* 40 */
  padding: 0 14px;
  font-family: inherit; font-size: var(--spyne-house-body-size); font-weight: 500;
  color: var(--spyne-text-muted);
  background: transparent; border: none; cursor: pointer;
  transition: background-color var(--spyne-duration-fast) var(--spyne-ease-standard),
              color var(--spyne-duration-fast) var(--spyne-ease-standard);
}
.spyne-segmented__btn:not(:last-child) { border-right: 1px solid var(--spyne-border-default); }
.spyne-segmented__btn[aria-pressed="true"] {
  background: var(--spyne-surface-bg-brand-subtle);
  color: var(--spyne-text-brand);
  font-weight: 600;
}
.spyne-segmented__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--spyne-icon-muted); flex-shrink: 0; }
.spyne-segmented__dot--live { background: var(--spyne-icon-success); }

/* ==================================================================
   9. FORM CONTROLS - border/control, never border/default
   ================================================================== */

.spyne-input, .spyne-select {
  min-height: var(--spyne-space-control-sm);
  padding: 0 12px;
  border-radius: var(--spyne-radius-control-md);
  border: 1px solid var(--spyne-border-control);      /* NOT border-default: 1.4.11 */
  background: var(--spyne-surface-bg-default);
  font-family: inherit;
  font-size: var(--spyne-house-body-size);
  color: var(--spyne-text-default);
  transition: border-color var(--spyne-duration-fast) var(--spyne-ease-standard),
              box-shadow var(--spyne-duration-fast) var(--spyne-ease-standard);
}
.spyne-select { appearance: none; padding-right: 32px; cursor: pointer; font-weight: 500; }
.spyne-input::placeholder { color: var(--spyne-text-muted); }
.spyne-input:focus, .spyne-select:focus {
  outline: none;
  border-color: var(--spyne-border-focus);
  box-shadow: var(--spyne-shadow-focus-ring);
}
.spyne-select-wrap { position: relative; display: inline-block; }
.spyne-select-wrap__chevron { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--spyne-icon-muted); }

.spyne-checkbox {
  appearance: none;
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: var(--spyne-radius-control-sm);      /* soft square, not a circle */
  border: 1px solid var(--spyne-border-control);
  background: var(--spyne-surface-bg-default);
  cursor: pointer;
  display: inline-grid; place-content: center;
  transition: background-color var(--spyne-duration-fast) var(--spyne-ease-standard),
              border-color var(--spyne-duration-fast) var(--spyne-ease-standard);
}
.spyne-checkbox:checked { background: var(--spyne-surface-bg-brand); border-color: var(--spyne-surface-bg-brand); }
.spyne-checkbox:checked::after {
  content: ""; width: 12px; height: 12px; background: #fff;
  clip-path: path("M2.2,6.4 L4.9,9.1 L10.2,3.4 L9.0,2.2 L4.9,6.7 L3.4,5.2 Z");
}
.spyne-checkbox:focus-visible { outline: none; box-shadow: var(--spyne-shadow-focus-ring); }
.spyne-checkbox:disabled { opacity: 0.5; cursor: not-allowed; }

/* Toggle: the TRACK is a pill, because it is a control. */
.spyne-toggle {
  appearance: none; position: relative;
  width: 40px; height: 22px; flex-shrink: 0;
  border-radius: var(--spyne-radius-pill);
  background: var(--spyne-surface-bg-sunken);
  border: 1px solid var(--spyne-border-control);
  cursor: pointer;
  transition: background-color var(--spyne-duration-fast) var(--spyne-ease-standard);
}
.spyne-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--spyne-shadow-sm);
  transition: transform var(--spyne-duration-fast) var(--spyne-ease-standard);
}
.spyne-toggle:checked { background: var(--spyne-surface-bg-brand); border-color: var(--spyne-surface-bg-brand); }
.spyne-toggle:checked::after { transform: translateX(18px); }
.spyne-toggle:focus-visible { outline: none; box-shadow: var(--spyne-shadow-focus-ring); }

/* Progress: fill is a pill. */
.spyne-progress { height: 6px; border-radius: var(--spyne-radius-pill); background: var(--spyne-surface-bg-sunken); overflow: hidden; }
.spyne-progress__fill { height: 100%; border-radius: var(--spyne-radius-pill); background: var(--spyne-gradient-brand); }

/* ==================================================================
   10. TABLE - one table style
   ================================================================== */

.spyne-table { width: 100%; border-collapse: collapse; font-size: var(--spyne-house-body-size); color: var(--spyne-text-default); }
.spyne-table thead tr { background: var(--spyne-surface-bg-sunken); border-bottom: 1px solid var(--spyne-border-subtle); }
.spyne-table th {
  padding: 10px var(--spyne-space-scale-md);
  text-align: left; vertical-align: middle;
  font-size: var(--spyne-house-caption-size);
  font-weight: 600;
  color: var(--spyne-text-muted);
  white-space: nowrap;
}
.spyne-table tbody tr { border-bottom: 1px solid var(--spyne-border-subtle); background: var(--spyne-surface-bg-default); transition: background-color var(--spyne-duration-fast) var(--spyne-ease-standard); }
.spyne-table tbody tr:hover { background: var(--spyne-surface-bg-brand-subtle); }
.spyne-table tbody tr:last-child { border-bottom: none; }
.spyne-table td { padding: var(--spyne-space-scale-sm) var(--spyne-space-scale-md); vertical-align: middle; }
.spyne-table__meta { font-size: var(--spyne-house-caption-size); color: var(--spyne-text-muted); font-variant-numeric: tabular-nums; }
.spyne-table__num  { text-align: right; font-variant-numeric: tabular-nums; }
.spyne-table-scroll { overflow-x: auto; }

.spyne-row-selected { background: var(--spyne-surface-bg-selected) !important; }
.spyne-row-hot      { background: var(--spyne-surface-bg-hot-subtle) !important; }
.spyne-row-accent-danger  { box-shadow: inset 3px 0 0 var(--spyne-border-danger); }
.spyne-row-accent-pending { box-shadow: inset 3px 0 0 var(--spyne-border-pending); }

/* ==================================================================
   11. MEDIA - fixed aspect boxes. Vehicles are 4:3 cover, always.
   ================================================================== */

.spyne-media { position: relative; overflow: hidden; border-radius: var(--spyne-media-radius); background: var(--spyne-media-placeholder); }
.spyne-media > img, .spyne-media > video, .spyne-media__img {
  width: 100%; height: 100%; object-fit: var(--spyne-media-fit); display: block;
}
.spyne-media--vehicle     { aspect-ratio: var(--spyne-aspect-vehicle); }
.spyne-media--thumb       { aspect-ratio: var(--spyne-aspect-thumb); }
.spyne-media--wide        { aspect-ratio: var(--spyne-aspect-wide); }
.spyne-media--table-thumb { width: var(--spyne-thumb-table); aspect-ratio: var(--spyne-aspect-vehicle); flex-shrink: 0; }
.spyne-avatar { width: var(--spyne-thumb-avatar); height: var(--spyne-thumb-avatar); border-radius: var(--spyne-radius-pill); overflow: hidden; flex-shrink: 0; background: var(--spyne-media-placeholder); }
.spyne-avatar > img { width: 100%; height: 100%; object-fit: cover; }

/*
 * APP BAR + BRAND LOCKUP
 *
 * Shipped because a Dealer OS screen went out with no Spyne mark in the header
 * at all. The library held seven brand assets and not one was reachable from a
 * component, so a prototype either set the brand name as type or left the
 * top-left empty. An unbranded header is the fastest way for a screen to stop
 * reading as Spyne.
 *
 * The mark is an IMAGE. `.spyne-wordmark` above sets the word Spyne as gradient
 * type for a display headline and is NOT the logo; a header uses
 * assets/images/brand/spyne-logo.svg through .spyne-brand__mark.
 */
.spyne-appbar {
  display: flex;
  align-items: center;
  gap: var(--spyne-space-scale-lg);
  height: var(--spyne-brand-appbar-height);
  padding: 0 var(--spyne-space-scale-lg);
  background: var(--spyne-surface-bg-default);
  border-bottom: 1px solid var(--spyne-border-subtle);
}
.spyne-appbar__spacer  { flex: 1 1 auto; }
.spyne-appbar__actions { display: flex; align-items: center; gap: var(--spyne-space-scale-sm); }

/* The lockup. Also usable standalone in a sidebar or a footer. */
.spyne-brand { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; text-decoration: none; }
.spyne-brand__mark { height: var(--spyne-brand-mark-height); width: auto; display: block; }
.spyne-brand__icon { height: var(--spyne-brand-icon-size); width: var(--spyne-brand-icon-size); display: block; }

/* Product name beside the mark: "Dealer OS", "Studio". Never the word Spyne. */
.spyne-brand__product {
  font-size: var(--spyne-body-sm-size);
  font-weight: 500;
  color: var(--spyne-text-subtle);
  padding-left: 10px;
  border-left: 1px solid var(--spyne-border-subtle);
}

/*
 * BEFORE / AFTER. The strongest move available to any Spyne screen: it is the
 * product argument in one glance, with no copy.
 */
.spyne-before-after { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; border-radius: var(--spyne-media-radius); overflow: hidden; }
.spyne-before-after figure { margin: 0; position: relative; }
.spyne-before-after figcaption {
  position: absolute; top: 8px; left: 8px;
  border-radius: var(--spyne-radius-control-xs);
  padding: 2px 7px;
  background: rgb(17 16 21 / 0.66);
  color: #fff;
  font-size: var(--spyne-house-eyebrow-size);
  font-weight: 500;
  letter-spacing: var(--spyne-house-eyebrow-tracking);
  text-transform: uppercase;
}

/* Illustrated icon slot. Minimum render 48px; below that use a flat UI icon. */
.spyne-illus { display: inline-block; width: 110px; height: 110px; }
.spyne-illus svg { width: 100%; height: 100%; display: block; }
.spyne-illus--sm { width: 64px; height: 64px; }
.spyne-illus--lg { width: 160px; height: 160px; }

/* ==================================================================
   12. TEXTURES - border/texture at 45-55%
   ================================================================== */

.spyne-texture { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; }
/* Dot grid: 2px dots on a 14px lattice. INSIDE a clipped card. */
.spyne-texture--dots {
  background-image: radial-gradient(var(--spyne-border-texture) 1px, transparent 1px);
  background-size: 14px 14px;
}
/* Diagonal stripes: 1px at -35deg on a 12px pitch. NEVER inside a card. */
.spyne-texture--stripes {
  background-image: repeating-linear-gradient(-35deg, var(--spyne-border-texture) 0 1px, transparent 1px 12px);
}
/* Concentric rings: 1px on a 70px step. Behind a hero field or centred CTA. */
.spyne-texture--rings {
  background-image: repeating-radial-gradient(circle at 50% 50%, var(--spyne-border-texture) 0 1px, transparent 1px 70px);
}

/* ==================================================================
   13. OVERLAY - dark tooltip / popover on a light page
   ================================================================== */

.spyne-dark-panel {
  background: var(--spyne-surface-bg-inverse-strong);
  color: var(--spyne-text-inverse);
  border-radius: var(--spyne-radius-container-md);
  padding: 12px 14px;
  box-shadow: var(--spyne-shadow-lg);
  font-size: var(--spyne-house-caption-size);
  max-width: 320px;
}
.spyne-dark-panel__title { font-size: var(--spyne-house-caption-size); font-weight: 600; margin-bottom: 6px; }
.spyne-dark-panel__meta  { color: rgb(255 255 255 / 0.66); }
.spyne-dark-panel__label {
  font-size: var(--spyne-house-eyebrow-size);
  font-weight: var(--spyne-house-eyebrow-weight);
  letter-spacing: var(--spyne-house-eyebrow-tracking);
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.55);
}
.spyne-dark-panel__well {
  background: rgb(255 255 255 / 0.07);
  border-radius: var(--spyne-radius-control-sm);
  padding: 8px 10px;
  margin-top: 8px;
}

.spyne-backdrop {
  position: fixed; inset: 0;
  background: var(--spyne-overlay-backdrop);
  backdrop-filter: blur(var(--spyne-shadow-backdrop-blur));
}
.spyne-modal {
  border-radius: var(--spyne-radius-dialog);
  background: var(--spyne-surface-bg-default);
  box-shadow: var(--spyne-shadow-xl);
  padding: 28px;
}
.spyne-drawer {
  border-radius: var(--spyne-radius-container-xl) 0 0 var(--spyne-radius-container-xl);
  background: var(--spyne-surface-bg-default);
  box-shadow: var(--spyne-shadow-drawer);
}

/* ==================================================================
   14. STATES - designed, not defaulted
   ================================================================== */

.spyne-empty { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; }
.spyne-empty__icon  { color: var(--spyne-icon-muted); opacity: 0.6; }
.spyne-empty__title { font-size: var(--spyne-house-card-title-size); font-weight: 700; color: var(--spyne-text-default); }
.spyne-empty__body  { font-size: var(--spyne-house-body-size); color: var(--spyne-text-muted); max-width: 44ch; }

.spyne-skeleton {
  background: var(--spyne-surface-bg-sunken);
  border-radius: var(--spyne-radius-control-sm);
  animation: spyne-pulse 1.5s var(--spyne-ease-standard) infinite;
}
@keyframes spyne-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .spyne-skeleton { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==================================================================
   15. RESPONSIVE
   ================================================================== */

@media (max-width: 760px) {
  .spyne-page { padding: var(--spyne-space-scale-lg) var(--spyne-space-scale-md) var(--spyne-space-scale-xl); }
  .spyne-kpi-card { width: 100%; height: auto; }
  .spyne-blob { width: 300px; height: 300px; }
  .spyne-before-after { grid-template-columns: 1fr; }
}
/* Spyne free tools. Layout and craft after the AI receptionist landing; colour, radius and shadow from the Spyne kit tokens. Light only. */
html, body { background: var(--spyne-surface-bg-default); color-scheme: light; }
body { margin: 0; font-family: var(--spyne-font-sans); color: var(--spyne-text-default); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
*, *::before, *::after { box-sizing: border-box; }
a { color: var(--spyne-text-brand); text-decoration: none; }
a:hover { color: var(--spyne-text-brand-strong); }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
:focus-visible { outline: 2px solid var(--spyne-border-focus); outline-offset: 2px; }
.ft-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ft-wrap { max-width: 1240px; margin: 0 auto; padding-inline: clamp(16px, 5vw, 64px); }
.ft-mono { font-family: var(--spyne-font-mono); font-variant-numeric: tabular-nums; }
.ft-num-tab { font-variant-numeric: tabular-nums; }

/* ---------- nav ---------- */
.ft-nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--spyne-surface-bg-default); border-bottom: 1px solid var(--spyne-border-subtle); }
.ft-nav__in { height: 68px; display: flex; align-items: center; gap: 28px; }
.ft-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--spyne-text-default); font-size: 14px; font-weight: 600; white-space: nowrap; }
.ft-brand img { height: 28px; width: auto; }
.ft-brand__sep { width: 1px; height: 20px; background: var(--spyne-border-default); }
.ft-nav__links { display: flex; gap: 24px; flex: 1; justify-content: center; font-size: 14px; font-weight: 500; }
.ft-nav__links a { color: var(--spyne-text-subtle); }
.ft-nav__links a:hover { color: var(--spyne-text-default); }
@media (max-width: 960px) { .ft-nav__links { display: none; } .ft-nav__in { justify-content: space-between; } }

/* sample dealer website chrome */
.ft-dnav { border-bottom: 1px solid var(--spyne-border-subtle); background: var(--spyne-surface-bg-default); }
.ft-dnav__in { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-block: 10px; }
.ft-dnav__name { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; }
.ft-dnav__links { display: flex; gap: 20px; margin-left: auto; font-size: 14px; font-weight: 500; }
.ft-dnav__links a { color: var(--spyne-text-subtle); }
.ft-dnav__links a[aria-current="page"] { color: var(--spyne-text-default); font-weight: 600; }
.ft-strip { background: var(--spyne-surface-bg-pending-subtle); color: var(--spyne-text-pending); font-size: 12px; font-weight: 500; }
.ft-strip .ft-wrap { display: flex; gap: 8px; align-items: center; min-height: 34px; flex-wrap: wrap; }

/* ---------- hero ---------- */
.ft-hero { position: relative; overflow: hidden; isolation: isolate; }
.ft-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ft-glow { position: absolute; border-radius: 50%; }
.ft-glow--violet { width: 720px; height: 560px; left: -300px; bottom: -330px; background: var(--spyne-color-brand-500); opacity: 0.42; filter: blur(110px); }
.ft-glow--peach { width: 440px; height: 380px; left: -200px; top: 26%; background: var(--spyne-color-hot-200); opacity: 0.55; filter: blur(100px); }
.ft-glow--floor { width: 1100px; height: 360px; left: 18%; bottom: -290px; background: var(--spyne-color-brand-300); opacity: 0.4; filter: blur(110px); }
.ft-glow--corner { width: 560px; height: 460px; right: -220px; top: -260px; background: var(--spyne-surface-bg-blob); opacity: var(--spyne-blob-corner-opacity); filter: blur(140px); }
.ft-gridlines { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.7; }
.ft-hero__in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 56px 72px; }
.ft-hero--wide .ft-hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.ft-hero--center .ft-hero__in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
@media (max-width: 1000px) { .ft-hero__in, .ft-hero--wide .ft-hero__in { grid-template-columns: 1fr; gap: 36px; padding-block: 36px 48px; } }
.ft-copy { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ft-hero--center .ft-copy { align-items: center; }
.ft-eyebrow { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; font-size: 14px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--spyne-text-brand); }
.ft-hero--center .ft-eyebrow { align-self: center; }
.ft-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--spyne-surface-bg-brand); flex: none; }
.ft-dot::before, .ft-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--spyne-surface-bg-brand); opacity: 0.45; animation: ftRipple 2s cubic-bezier(.2, 0, .1, 1) infinite; }
.ft-dot::after { animation-delay: 1s; }
@keyframes ftRipple { 0% { transform: scale(1); opacity: 0.45; } 100% { transform: scale(3.2); opacity: 0; } }
.ft-h1 { margin: 0; font-size: 48px; line-height: 1.2; font-weight: 500; letter-spacing: -1.2px; color: var(--spyne-text-default); text-wrap: balance; }
.ft-h1 strong { font-weight: 800; }
@media (max-width: 640px) { .ft-h1 { font-size: 32px; letter-spacing: -0.6px; } }
.ft-lead { margin: 0; font-size: 18px; line-height: 1.6; color: var(--spyne-text-subtle); max-width: 56ch; }
@media (max-width: 640px) { .ft-lead { font-size: 16px; } }
.ft-assure { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14px; color: var(--spyne-text-subtle); }
.ft-assure span { display: inline-flex; align-items: center; gap: 6px; }
.ft-assure svg { color: var(--spyne-text-success); }

/* input bar (the landing's website field) */
.ft-bar { display: flex; align-items: center; gap: 8px; max-width: 580px; background: var(--spyne-surface-bg-default); border-radius: 16px; padding: 6px 6px 6px 18px; border: 1px solid var(--spyne-border-control); box-shadow: var(--spyne-shadow-md); flex-wrap: wrap; }
.ft-bar:focus-within { border-color: var(--spyne-border-focus); box-shadow: var(--spyne-shadow-focus-ring); }
.ft-bar > svg { color: var(--spyne-icon-brand); flex: none; }
.ft-bar input { flex: 1 1 200px; min-width: 0; height: 46px; border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 500; color: var(--spyne-text-default); }
.ft-bar input:focus { outline: 2px solid transparent; }
.ft-bar input::placeholder { color: var(--spyne-text-muted); }
@media (max-width: 520px) { .ft-bar { padding: 6px; } .ft-bar > svg { display: none; } .ft-bar input { padding-left: 10px; } .ft-bar .spyne-btn { width: 100%; } }

/* multi-field form card */
.ft-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; max-width: 600px; background: var(--spyne-surface-bg-default); border-radius: 20px; padding: 20px; border: 1px solid var(--spyne-border-subtle); box-shadow: var(--spyne-shadow-md); }
.ft-form--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ft-form__wide { grid-column: 1 / -1; }
.ft-form__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@media (max-width: 560px) { .ft-form, .ft-form--3 { grid-template-columns: 1fr; } }
.ft-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ft-field label, .ft-label { font-size: 12px; font-weight: 600; color: var(--spyne-text-muted); }
.ft-field .spyne-input, .ft-field .spyne-select { width: 100%; height: 44px; border: 1px solid var(--spyne-border-control); }
.ft-field .spyne-select-wrap { display: block; }
.ft-field__hint { font-size: 12px; color: var(--spyne-text-muted); }
.ft-inline { display: flex; align-items: center; gap: 8px; }
.ft-inline .spyne-input { flex: 1; }
.ft-prefix { position: relative; }
.ft-prefix > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--spyne-text-muted); font-weight: 500; }
.ft-prefix .spyne-input { padding-left: 26px; }
input[type="range"] { accent-color: var(--spyne-surface-bg-brand); width: 100%; }

/* dropzone */
.ft-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; max-width: 600px; padding: 22px; border-radius: 20px; background: var(--spyne-surface-bg-default); border: 1.5px dashed var(--spyne-border-brand); box-shadow: var(--spyne-shadow-md); }
.ft-drop.is-over { background: var(--spyne-surface-bg-brand-subtle); }
.ft-drop__main { flex: 1 1 220px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ft-drop__title { font-size: 16px; font-weight: 700; }
.ft-drop__note { font-size: 12px; color: var(--spyne-text-muted); }
.ft-drop__files { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; }
.ft-drop__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ft-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 10px; background: var(--spyne-surface-bg-sunken); font-size: 12px; font-weight: 500; }

/* ---------- stage (hero right column) ---------- */
.ft-stage { position: relative; min-height: 470px; border-radius: 28px; overflow: hidden; background: var(--spyne-surface-bg-wash); box-shadow: var(--spyne-shadow-shell); isolation: isolate; }
.ft-stage__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.ft-stage__photo--top { height: 100%; }
.ft-stage__shade { display: none; }
.ft-float { position: absolute; z-index: 2; background: var(--spyne-surface-bg-default); border-radius: 16px; box-shadow: var(--spyne-shadow-floating); padding: 14px 16px; max-width: 78%; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.ft-float--tl { left: 22px; top: 22px; }
.ft-float--tr { right: 22px; top: 22px; }
.ft-float--bl { left: 22px; bottom: 22px; }
.ft-float--br { right: 22px; bottom: 22px; }
.ft-float--ml { left: 22px; top: 44%; }
.ft-float--mr { right: 22px; top: 40%; }
.ft-float--wide { left: 22px; right: 22px; bottom: 22px; max-width: none; }
.ft-float__k { font-size: 10px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; color: var(--spyne-text-muted); }
.ft-float__v { font-size: 24px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ft-float__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
@media (max-width: 640px) {
  .ft-stage { min-height: 0; display: flex; flex-direction: column; gap: 10px; padding: 200px 14px 14px; }
  .ft-stage__photo { height: 210px; }
  .ft-stage__shade { display: none; }
  .ft-float { position: static; max-width: none; }
}

/* agent stage: the landing's cut-out portrait over a warm glow */
.ft-stage--agent { background: var(--spyne-color-hot-50); min-height: 500px; }
.ft-agent__warm { position: absolute; left: 50%; top: 10px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; background: var(--spyne-color-hot-200); filter: blur(36px); opacity: 0.9; z-index: -1; }
.ft-agent__word { position: absolute; left: 0; right: 0; top: 64px; z-index: 0; display: flex; flex-direction: column; align-items: center; font-size: 64px; line-height: 0.95; font-weight: 600; letter-spacing: -2.4px; color: var(--spyne-text-inverse); white-space: nowrap; }
.ft-agent__img { position: absolute; z-index: 1; left: 50%; bottom: -6px; width: 470px; max-width: none; margin-left: -235px; }
.ft-agent__cool { position: absolute; z-index: 1; left: 50%; bottom: -170px; width: 640px; height: 300px; margin-left: -320px; border-radius: 50%; background: var(--spyne-color-brand-300); filter: blur(50px); opacity: 0.55; }
@media (max-width: 640px) { .ft-stage--agent { min-height: 420px; padding: 0; display: block; } .ft-agent__img { width: 380px; margin-left: -190px; } .ft-agent__word { font-size: 48px; } .ft-stage--agent .ft-float { position: absolute; max-width: 78%; } }

/* ---------- phone ---------- */
.ft-phonewrap { display: flex; justify-content: center; }
.ft-phone { position: relative; width: 320px; height: 640px; border-radius: 54px; background: var(--spyne-surface-bg-inverse-strong); padding: 6px; box-shadow: var(--spyne-shadow-xl); flex: none; }
.ft-phone__screen { position: relative; width: 100%; height: 100%; border-radius: 48px; overflow: hidden; background: var(--spyne-color-hot-50); display: flex; flex-direction: column; isolation: isolate; }
.ft-phone__island { position: absolute; top: 12px; left: 50%; width: 96px; height: 28px; margin-left: -48px; border-radius: 999px; background: var(--spyne-surface-bg-inverse-strong); z-index: 9; }
.ft-phone__bar { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 52px 16px 10px; background: var(--spyne-surface-bg-default); border-bottom: 1px solid var(--spyne-border-subtle); }
.ft-phone__bar img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 1px solid var(--spyne-border-subtle); }
.ft-phone__who { display: flex; flex-direction: column; min-width: 0; }
.ft-phone__name { font-size: 14px; font-weight: 600; }
.ft-phone__meta { font-size: 12px; color: var(--spyne-text-muted); display: inline-flex; align-items: center; gap: 5px; }
.ft-live { width: 7px; height: 7px; border-radius: 50%; background: var(--spyne-surface-bg-success); display: inline-block; }
.ft-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 14px 10px; background: var(--spyne-surface-bg-default); scrollbar-width: thin; }
.ft-msg { max-width: 84%; padding: 10px 13px; font-size: 13px; line-height: 1.45; animation: ftPop .28s cubic-bezier(.2, 0, .1, 1) both; }
.ft-msg--agent { align-self: flex-start; background: var(--spyne-surface-bg-default); border: 1px solid var(--spyne-border-subtle); border-radius: 18px 18px 18px 6px; color: var(--spyne-text-default); }
.ft-msg--me { align-self: flex-end; background: var(--spyne-surface-bg-brand); color: var(--spyne-text-on-brand); border-radius: 18px 18px 6px 18px; }
.ft-msg--sys { align-self: center; font-size: 12px; color: var(--spyne-text-muted); padding: 2px 8px; }
.ft-msg--card { align-self: stretch; max-width: none; background: var(--spyne-surface-bg-success-subtle); border: 1px solid var(--spyne-border-success); border-radius: 16px; color: var(--spyne-text-default); }
.ft-typing { display: inline-flex; gap: 4px; padding: 12px 13px; }
.ft-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--spyne-icon-brand); animation: ftBlink 1.2s infinite; }
.ft-typing i:nth-child(2) { animation-delay: .15s; } .ft-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ftBlink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes ftPop { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
.ft-sugg { display: flex; flex-direction: column; gap: 6px; padding: 0 14px 8px; background: var(--spyne-surface-bg-default); }
.ft-sugg button { text-align: left; padding: 9px 12px; border-radius: 14px; border: 1px solid var(--spyne-border-subtle); background: var(--spyne-surface-bg-default); font-size: 12px; font-weight: 500; color: var(--spyne-text-subtle); cursor: pointer; }
.ft-sugg button:hover { border-color: var(--spyne-border-brand); color: var(--spyne-text-brand); }
.ft-compose { display: flex; align-items: center; gap: 6px; padding: 8px 12px 22px; background: var(--spyne-surface-bg-default); }
.ft-compose input { flex: 1; min-width: 0; height: 42px; border-radius: 999px; border: 1px solid var(--spyne-border-control); padding: 0 14px; font: inherit; font-size: 14px; }
.ft-compose input:focus { outline: none; border-color: var(--spyne-border-focus); box-shadow: var(--spyne-shadow-focus-ring); }
.ft-send { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--spyne-surface-bg-brand); color: var(--spyne-text-on-brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ft-send:disabled { background: var(--spyne-surface-bg-sunken); color: var(--spyne-text-disabled); cursor: default; }

/* phone: agent home + call */
.ft-ph-home { position: absolute; inset: 0; display: flex; flex-direction: column; }
.ft-ph-home .ft-agent__warm { top: 20px; width: 470px; height: 470px; margin-left: -235px; }
.ft-ph-home .ft-agent__word { top: 112px; font-size: 52px; letter-spacing: -2px; }
.ft-ph-home .ft-agent__img { width: 430px; margin-left: -215px; bottom: 72px; }
.ft-ph-home .ft-agent__cool { bottom: -200px; }
.ft-ph-actions { position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 12px; padding-inline: 18px; }
.ft-ph-actions .spyne-btn { height: 52px; padding-inline: 26px; font-size: 16px; }
.ft-round { width: 52px; height: 52px; border-radius: 50%; border: 1px solid var(--spyne-border-subtle); background: var(--spyne-surface-bg-default); color: var(--spyne-text-brand); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ft-round--end { background: var(--spyne-surface-bg-danger); border-color: transparent; color: var(--spyne-text-on-danger); }
.ft-round[aria-pressed="true"] { background: var(--spyne-surface-bg-inverse-strong); color: var(--spyne-text-inverse); }
.ft-call { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; padding: 58px 18px 26px; gap: 14px; background: var(--spyne-color-hot-50); text-align: center; animation: ftFade .22s both; }
@keyframes ftFade { from { opacity: 0; } to { opacity: 1; } }
.ft-call__face { position: relative; width: 104px; height: 104px; }
.ft-call__face img { position: relative; z-index: 1; width: 104px; height: 104px; border-radius: 50%; object-fit: cover; border: 3px solid var(--spyne-surface-bg-default); }
.ft-ring { position: absolute; inset: 0; border-radius: 50%; background: var(--spyne-color-brand-200); animation: ftRing 2s cubic-bezier(.2, 0, .1, 1) infinite; }
.ft-ring--2 { animation-delay: 1s; }
@keyframes ftRing { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(1.7); opacity: 0; } }
.is-quiet .ft-ring { animation: none; opacity: 0; }
.ft-call__name { font-size: 18px; font-weight: 700; }
.ft-call__status { font-size: 12px; color: var(--spyne-text-muted); font-variant-numeric: tabular-nums; }
.ft-call__lines { flex: 1; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; overflow: hidden; text-align: left; }
.ft-call__line { font-size: 13px; line-height: 1.45; padding: 9px 12px; border-radius: 14px; background: var(--spyne-surface-bg-default); border: 1px solid var(--spyne-border-subtle); animation: ftPop .28s both; }
.ft-call__line b { display: block; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--spyne-text-muted); margin-bottom: 2px; }
.ft-call__line--me { background: var(--spyne-surface-bg-brand-subtle); border-color: var(--spyne-border-focus-subtle); }
.ft-call__ctrls { display: flex; gap: 16px; justify-content: center; }

/* ---------- sections ---------- */
.ft-section { padding-block: 72px; }
.ft-section--tint { background: var(--spyne-surface-bg-canvas); border-block: 1px solid var(--spyne-border-subtle); }
.ft-section--tight { padding-block: 40px 72px; }
.ft-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; margin: 0 auto 40px; max-width: 760px; }
.ft-head--left { align-items: flex-start; text-align: left; margin-left: 0; }
.ft-kicker { display: inline-flex; align-items: center; gap: 6px; background: var(--spyne-surface-bg-brand-subtle); color: var(--spyne-text-brand); font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; }
.ft-h2 { margin: 0; font-size: 36px; line-height: 1.25; font-weight: 600; letter-spacing: -0.8px; text-wrap: balance; }
@media (max-width: 640px) { .ft-h2 { font-size: 28px; } .ft-section { padding-block: 48px; } }
.ft-sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--spyne-text-subtle); max-width: 62ch; }

/* report: washed parent, white children */
.ft-report { position: relative; overflow: hidden; border-radius: 32px; background: var(--spyne-surface-bg-wash); box-shadow: var(--spyne-shadow-shell); padding: 24px; display: flex; flex-direction: column; gap: 20px; }
@media (max-width: 640px) { .ft-report { padding: 14px; border-radius: 24px; } }
.ft-report__top { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ft-report__title { margin: 0; flex: 1 1 340px; font-size: 24px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.3; text-wrap: balance; }
.ft-report__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-tile { position: relative; background: var(--spyne-surface-bg-default); border-radius: 20px; box-shadow: var(--spyne-shadow-card-lifted); padding: 20px; min-width: 0; }
.ft-tile--flush { padding: 0; overflow: hidden; }
.ft-tile__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin: 0 0 14px; font-size: 16px; font-weight: 700; }
.ft-tile--flush .ft-tile__h { padding: 18px 20px 0; }
.ft-tile__note { font-size: 12px; font-weight: 400; color: var(--spyne-text-muted); }
.ft-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 16px; }
.ft-stat { display: flex; flex-direction: column; gap: 6px; }
.ft-stat__label { font-size: 12px; font-weight: 600; color: var(--spyne-text-muted); }
.ft-stat__value { font-size: 36px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ft-stat__value--spectrum { background: var(--spyne-gradient-brand-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-stat__value--danger { color: var(--spyne-text-danger); }
.ft-stat__value--success { color: var(--spyne-text-success); }
.ft-stat__sub { font-size: 12px; color: var(--spyne-text-muted); }
.ft-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 20px; align-items: start; }
.ft-cols--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ft-caption { font-size: 12px; color: var(--spyne-text-muted); margin: 0; }
.ft-p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--spyne-text-subtle); }
.ft-loading { display: flex; flex-direction: column; gap: 12px; }
.ft-loading__row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--spyne-text-muted); }
.ft-loading__row.is-done { color: var(--spyne-text-default); }
.ft-loading__row.is-now { color: var(--spyne-text-brand); font-weight: 600; }
.ft-spin { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--spyne-border-subtle); border-top-color: var(--spyne-border-brand); animation: ftSpin .8s linear infinite; flex: none; }
@keyframes ftSpin { to { transform: rotate(360deg); } }
.ft-rise { animation: ftRise .32s cubic-bezier(.2, 0, .1, 1) both; }
@keyframes ftRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* bars */
.ft-bars { display: flex; flex-direction: column; gap: 14px; }
.ft-barrow { display: flex; flex-direction: column; gap: 6px; }
.ft-barrow__top { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.ft-barrow__top b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ft-track { height: 10px; border-radius: 999px; background: var(--spyne-surface-bg-sunken); overflow: hidden; }
.ft-fill { height: 100%; border-radius: 999px; background: var(--spyne-surface-bg-brand); }
.ft-fill--hot { background: var(--spyne-color-hot-600); }
.ft-fill--success { background: var(--spyne-surface-bg-success); }
.ft-fill--pending { background: var(--spyne-surface-bg-pending); }
.ft-fill--muted { background: var(--spyne-border-strong); }

/* check rows */
.ft-checks { display: flex; flex-direction: column; gap: 10px; }
.ft-check { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--spyne-surface-bg-default); border: 1px solid var(--spyne-border-subtle); }
.ft-check__ic { width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ft-check__ic--ok { background: var(--spyne-surface-bg-success-subtle); color: var(--spyne-text-success); }
.ft-check__ic--bad { background: var(--spyne-surface-bg-danger-subtle); color: var(--spyne-text-danger); }
.ft-check__ic--warn { background: var(--spyne-surface-bg-pending-subtle); color: var(--spyne-text-pending); }
.ft-check__ic--info { background: var(--spyne-surface-bg-brand-subtle); color: var(--spyne-text-brand); }
.ft-check__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ft-check__t { font-size: 14px; font-weight: 600; }
.ft-check__n { font-size: 12px; color: var(--spyne-text-muted); }
.ft-check__r { margin-left: auto; font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* key / value */
.ft-kv { display: flex; flex-direction: column; }
.ft-kv__row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--spyne-border-subtle); font-size: 14px; }
.ft-kv__row:last-child { border-bottom: 0; }
.ft-kv__k { color: var(--spyne-text-muted); }
.ft-kv__v { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }

/* heat map */
.ft-heat { width: 100%; border-collapse: separate; border-spacing: 4px; min-width: 640px; }
.ft-heat th { font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--spyne-text-muted); text-align: center; padding: 4px; }
.ft-heat th:first-child { text-align: left; }
.ft-heat td { padding: 0; }
.ft-heat__c { display: block; padding: 7px 4px; border-radius: 8px; text-align: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ft-heat__c--0 { background: var(--spyne-surface-bg-sunken); color: var(--spyne-text-subtle); }
.ft-heat__c--1 { background: var(--spyne-color-brand-100); color: var(--spyne-text-brand-strong); }
.ft-heat__c--2 { background: var(--spyne-color-brand-300); color: var(--spyne-text-brand-strong); }
.ft-heat__c--3 { background: var(--spyne-surface-bg-brand); color: var(--spyne-text-on-brand); }
.ft-scroll { overflow-x: auto; }

/* code / generated text */
.ft-codebox { border-radius: 14px; background: var(--spyne-surface-bg-sunken); border: 1px solid var(--spyne-border-subtle); overflow: hidden; }
.ft-codebox__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--spyne-border-subtle); font-size: 12px; font-weight: 600; color: var(--spyne-text-muted); background: var(--spyne-surface-bg-default); }
.ft-code { margin: 0; padding: 14px 18px 16px; font-family: var(--spyne-font-sans); font-size: 14px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--spyne-text-default); }
.ft-code--mono { font-family: var(--spyne-font-mono); font-size: 12px; }
.ft-copybtn { position: absolute; top: 10px; right: 10px; }

/* chat transcript (in reports) */
.ft-chat { display: flex; flex-direction: column; gap: 8px; }
.ft-chat .ft-msg { animation: none; max-width: 86%; }
.ft-chat .ft-msg--agent { background: var(--spyne-surface-bg-wash); }

/* vehicle / photo blocks */
.ft-vehicle { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: center; }
.ft-vehicle img { width: 180px; height: 120px; object-fit: cover; border-radius: 14px; }
@media (max-width: 520px) { .ft-vehicle { grid-template-columns: 1fr; } .ft-vehicle img { width: 100%; height: 170px; } }
.ft-photo { width: 100%; border-radius: 16px; object-fit: cover; }

/* timeline */
.ft-tl { display: flex; flex-direction: column; gap: 0; }
.ft-tl__row { display: grid; grid-template-columns: 90px 18px minmax(0, 1fr); gap: 10px; align-items: start; padding-bottom: 14px; }
.ft-tl__t { font-size: 12px; font-weight: 600; color: var(--spyne-text-muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.ft-tl__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--spyne-surface-bg-brand); margin-top: 4px; outline: 4px solid var(--spyne-surface-bg-brand-subtle); }
.ft-tl__dot--muted { background: var(--spyne-border-strong); outline: 4px solid var(--spyne-surface-bg-sunken); }
.ft-tl__dot--danger { background: var(--spyne-surface-bg-danger); outline: 4px solid var(--spyne-surface-bg-danger-subtle); }
.ft-tl__b { font-size: 14px; } .ft-tl__b span { display: block; font-size: 12px; color: var(--spyne-text-muted); }

/* how it works */
.ft-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 28px; }
.ft-step { display: flex; flex-direction: column; gap: 12px; }
.ft-art { position: relative; height: 200px; border-radius: 16px; background: var(--spyne-surface-bg-wash); border: 1px solid var(--spyne-border-subtle); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.ft-art__k { font-size: 10px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; color: var(--spyne-text-muted); display: flex; justify-content: space-between; gap: 8px; }
.ft-num { position: absolute; right: 14px; bottom: -16px; width: 34px; height: 34px; border-radius: 50%; background: var(--spyne-surface-bg-brand); color: var(--spyne-text-on-brand); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; outline: 4px solid var(--spyne-surface-bg-default); }
.ft-section--tint .ft-num { outline: 4px solid var(--spyne-surface-bg-canvas); }
.ft-step h3 { margin: 6px 0 0; font-size: 16px; font-weight: 600; }
.ft-step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--spyne-text-subtle); }
.ft-mini { background: var(--spyne-surface-bg-default); border-radius: 10px; box-shadow: var(--spyne-shadow-md); padding: 8px 10px; font-size: 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ft-mini--col { flex-direction: column; align-items: flex-start; gap: 2px; }
.ft-mini--brand { outline: 1.5px solid var(--spyne-border-brand); outline-offset: -1.5px; }
.ft-mini--ok { background: var(--spyne-surface-bg-success-subtle); color: var(--spyne-text-success); font-weight: 600; box-shadow: none; justify-content: flex-start; }
.ft-mini b { font-weight: 600; }
.ft-mini small { font-size: 10px; color: var(--spyne-text-muted); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }

/* dark panel CTA */
.ft-dark { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: var(--spyne-surface-bg-inverse-strong); color: var(--spyne-text-inverse); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; padding: 52px; }
@media (max-width: 900px) { .ft-dark { grid-template-columns: 1fr; padding: 28px; gap: 28px; } }
.ft-dark__blob { position: absolute; z-index: -1; width: 560px; height: 560px; border-radius: 50%; background: var(--spyne-color-brand-600); opacity: 0.5; left: -260px; top: -160px; filter: blur(70px); }
.ft-dark__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.ft-dark__copy h2 { margin: 0; font-size: 30px; line-height: 1.25; font-weight: 600; letter-spacing: -0.6px; text-wrap: balance; }
.ft-dark__copy p { margin: 0; font-size: 16px; line-height: 1.6; color: color-mix(in srgb, var(--spyne-text-inverse) 68%, transparent); max-width: 46ch; }
.ft-dark__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ft-dark__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ft-dark__tile { border-radius: 16px; padding: 20px; background: color-mix(in srgb, var(--spyne-surface-bg-default) 7%, transparent); border: 1px solid color-mix(in srgb, var(--spyne-surface-bg-default) 12%, transparent); display: flex; flex-direction: column; gap: 8px; }
.ft-dark__num { font-size: 30px; font-weight: 600; letter-spacing: -0.6px; color: var(--spyne-color-brand-300); font-variant-numeric: tabular-nums; }
.ft-dark__lbl { font-size: 12px; line-height: 1.5; color: color-mix(in srgb, var(--spyne-text-inverse) 68%, transparent); }
.ft-dark__agent { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px; border-radius: 20px; background: color-mix(in srgb, var(--spyne-surface-bg-default) 7%, transparent); border: 1px solid color-mix(in srgb, var(--spyne-surface-bg-default) 12%, transparent); }
.ft-dark__agent img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.ft-dark__note { font-size: 12px; color: color-mix(in srgb, var(--spyne-text-inverse) 55%, transparent); }

/* hub */
.ft-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 40px 0 8px; }
.ft-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.ft-card { display: flex; flex-direction: column; border-radius: 20px; background: var(--spyne-surface-bg-default); border: 1px solid var(--spyne-border-subtle); box-shadow: var(--spyne-shadow-card); overflow: hidden; color: var(--spyne-text-default); transition: box-shadow .14s cubic-bezier(.2, 0, .1, 1), transform .14s cubic-bezier(.2, 0, .1, 1); }
.ft-card:hover { color: var(--spyne-text-default); box-shadow: var(--spyne-shadow-card-lifted); transform: translateY(-2px); }
.ft-card__art { position: relative; height: 150px; overflow: hidden; background: var(--spyne-surface-bg-wash); border-bottom: 1px solid var(--spyne-border-subtle); padding: 16px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ft-card__art img.ft-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ft-card__art .ft-mini { position: relative; }
.ft-card__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.ft-card__name { font-size: 16px; font-weight: 700; display: flex; align-items: baseline; gap: 8px; }
.ft-card__n { font-size: 12px; font-weight: 600; color: var(--spyne-text-muted); font-variant-numeric: tabular-nums; }
.ft-card__job { font-size: 14px; line-height: 1.55; color: var(--spyne-text-subtle); margin: 0; }
.ft-card__foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.ft-group-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 44px 0 16px; }
.ft-group-h h2 { margin: 0; font-size: 20px; font-weight: 700; }
.ft-group-h span { font-size: 12px; color: var(--spyne-text-muted); }
.ft-empty { text-align: center; padding: 40px; color: var(--spyne-text-muted); }

/* faq */
.ft-faq { display: flex; flex-direction: column; gap: 10px; max-width: 860px; margin: 0 auto; }
.ft-faq details { border-radius: 16px; border: 1px solid var(--spyne-border-subtle); background: var(--spyne-surface-bg-default); padding: 16px 18px; }
.ft-faq summary { cursor: pointer; font-size: 16px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.ft-faq summary::-webkit-details-marker { display: none; }
.ft-faq summary::after { content: "+"; color: var(--spyne-text-brand); font-weight: 700; }
.ft-faq details[open] summary::after { content: "–"; }
.ft-faq p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--spyne-text-subtle); }

/* footer */
.ft-foot { border-top: 1px solid var(--spyne-border-subtle); padding-block: 28px 40px; }
.ft-foot__in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; justify-content: space-between; font-size: 12px; color: var(--spyne-text-muted); }
.ft-foot img { height: 22px; width: auto; }
.ft-poweredby { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--spyne-text-muted); }
.ft-poweredby img { height: 18px; width: auto; }

/* misc */
.ft-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ft-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .ft-split { grid-template-columns: 1fr; } }
.ft-qr { width: 168px; height: 168px; image-rendering: pixelated; border-radius: 12px; border: 1px solid var(--spyne-border-subtle); background: var(--spyne-surface-bg-default); padding: 10px; }
.ft-swatch { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.ft-pick { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; border: 1px solid var(--spyne-border-subtle); background: var(--spyne-surface-bg-default); cursor: pointer; font-size: 12px; font-weight: 600; color: var(--spyne-text-subtle); }
.ft-pick[aria-pressed="true"] { border-color: var(--spyne-border-brand); background: var(--spyne-surface-bg-brand-subtle); color: var(--spyne-text-brand); }
.ft-pick svg { width: 30px; height: 30px; }
.ft-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--spyne-surface-bg-inverse-strong); color: var(--spyne-text-inverse); padding: 10px 16px; border-radius: 12px; font-size: 14px; box-shadow: var(--spyne-shadow-lg); animation: ftRise .2s both; }

@media (prefers-reduced-motion: reduce) {
  .ft-dot::before, .ft-dot::after, .ft-ring, .ft-typing i, .ft-spin { animation: none; }
  .ft-rise, .ft-msg, .ft-call, .ft-call__line, .ft-toast { animation: none; }
  .ft-card { transition: none; }
}
[data-stage-live] { display: flex; flex-direction: column; gap: 8px; }
.ft-stage__photo[src*="dealership-building"], .ft-card__photo[src*="dealership-building"] { object-position: center 40%; }

/* ---------- end-to-end additions: validation, notices, sample files ---------- */
.ft-err { display: flex; align-items: flex-start; gap: 8px; margin: 10px 0 0; max-width: 580px; font-size: 14px; line-height: 20px; color: var(--spyne-text-danger); }
.ft-err[hidden] { display: none; }
.ft-err svg { flex: none; margin-top: 2px; }
.ft-drop .ft-err { width: 100%; margin: 0; }
.ft-bar input[aria-invalid="true"] { color: var(--spyne-text-danger); }
.ft-drop__hint { font-size: 12px; color: var(--spyne-text-muted); }
.ft-drop__hint b { font-weight: 600; color: var(--spyne-text-default); }
.ft-file small { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--spyne-text-muted); margin-left: 2px; }
.ft-drop__sample { display: flex; flex-wrap: wrap; gap: 16px; width: 100%; padding-top: 4px; }
.ft-linkbtn { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--spyne-text-brand); cursor: pointer; }
.ft-linkbtn:hover { text-decoration: underline; }
.ft-linkbtn:focus-visible { outline: 2px solid var(--spyne-border-brand); outline-offset: 2px; border-radius: 4px; }
.ft-notice { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; line-height: 20px; background: var(--spyne-surface-bg-sunken); color: var(--spyne-text-default); }
.ft-notice svg { flex: none; margin-top: 2px; }
.ft-notice--danger { background: var(--spyne-surface-bg-danger-subtle); color: var(--spyne-text-danger); }
.ft-notice--success { background: var(--spyne-surface-bg-success-subtle); }
.ft-notice--success svg { color: var(--spyne-text-success); }
.ft-notice--info svg { color: var(--spyne-text-brand); }
.ft-dnav__links a:not([href]) { cursor: default; }

/* Anything carrying the hidden attribute stays hidden, whatever display a class gives it. */
[hidden] { display: none !important; }
.ft-kv__row--long { flex-direction: column; gap: 4px; }
.ft-kv__row--long .ft-kv__v { text-align: left; font-weight: 400; line-height: 20px; }

/* Reports scroll into view below the sticky header, not under it. */
#report, .ft-report { scroll-margin-top: 88px; }

/* Paid-agent pitch under a free result */
.ft-agentpitch { display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 24px; align-items: center; padding: 24px 28px; border-radius: 20px; background: var(--spyne-surface-bg-brand-subtle); border: 1px solid var(--spyne-border-subtle); }
.ft-agentpitch__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 20px; }
.ft-agentpitch__list li { display: flex; gap: 8px; align-items: flex-start; }
.ft-agentpitch__list svg { flex: none; margin-top: 2px; color: var(--spyne-text-brand); }
.ft-agentpitch__cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
@media (max-width: 900px) { .ft-agentpitch { grid-template-columns: 1fr; padding: 20px; } }
.ft-notice--pending { background: var(--spyne-surface-bg-pending-subtle, var(--spyne-surface-bg-sunken)); }
.ft-notice--pending svg { color: var(--spyne-text-pending, var(--spyne-text-brand)); }

/* ==================================================================
   Market mode (served by reception-start at /tools): the account in the
   nav, the free-run counter, and the house dialog for sign-up and gates.
   Ported from reception-start's split-dialog.css; tokens only.
   ================================================================== */

/* ---------- nav: log in and sign up, or the account chip ---------- */
.ft-acct { display: flex; align-items: center; gap: 8px; flex: none; min-width: 0; }
.ft-acct__wrap { position: relative; }
.ft-acct__chip { display: inline-flex; align-items: center; gap: 10px; max-width: 260px; padding: 4px 10px 4px 4px; border: 1px solid var(--spyne-border-default); border-radius: var(--spyne-radius-control-md); background: var(--spyne-surface-bg-default); box-shadow: var(--spyne-shadow-sm); font-family: inherit; color: var(--spyne-text-default); cursor: pointer; }
.ft-acct__chip:hover { border-color: var(--spyne-border-strong); }
.ft-acct__chip:focus-visible { outline: none; box-shadow: var(--spyne-shadow-focus-ring); }
.ft-acct__av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--spyne-radius-control-sm); background: var(--spyne-surface-bg-brand-subtle); color: var(--spyne-text-brand-strong); font-size: var(--spyne-caption-size); font-weight: 700; }
.ft-acct__who { display: flex; flex-direction: column; min-width: 0; text-align: left; line-height: 1.3; }
.ft-acct__who b, .ft-acct__who small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-acct__who b { font-size: var(--spyne-caption-size); font-weight: 600; }
.ft-acct__who small { font-size: var(--spyne-caption-xs-size); color: var(--spyne-text-muted); }
.ft-acct__chev { flex: none; color: var(--spyne-icon-muted); transform: rotate(-90deg); }
.ft-acct__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; display: flex; flex-direction: column; min-width: 200px; padding: 6px; border: 1px solid var(--spyne-border-subtle); border-radius: var(--spyne-radius-container-md); background: var(--spyne-surface-bg-overlay); box-shadow: var(--spyne-shadow-lg); }
.ft-acct__menu a, .ft-acct__menu button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 0; border-radius: var(--spyne-radius-control-sm); background: none; font-family: inherit; font-size: var(--spyne-body-md-size); font-weight: 500; color: var(--spyne-text-default); text-align: left; cursor: pointer; }
.ft-acct__menu a:hover, .ft-acct__menu button:hover, .ft-acct__menu a:focus-visible, .ft-acct__menu button:focus-visible { outline: none; background: var(--spyne-surface-bg-sunken); color: var(--spyne-text-default); }
.ft-acct__menu svg { color: var(--spyne-icon-muted); }
@media (max-width: 560px) {
  .ft-nav--mkt .ft-nav__in { gap: 12px; }
  .ft-nav--mkt .ft-brand__sep, .ft-nav--mkt .ft-brand > span:last-child { display: none; }
  .ft-nav--mkt .ft-acct [class^="spyne-btn-"] { padding-inline: 14px; }
  .ft-acct__who, .ft-acct__chev { display: none; }
  .ft-acct__chip { padding: 4px; }
}

/* ---------- the free-run counter on a tool page ---------- */
.ft-meter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ft-meter__chip { cursor: default; }
.ft-meter__chip:hover { border-color: var(--spyne-border-default); }
.ft-meter__chip.spyne-chip--active:hover { border-color: var(--spyne-border-brand); }
.ft-meter__chip svg { flex: none; }

/* ---------- the house dialog: a picture on one side, the ask on the other ---------- */
html.ft-dlg-open { overflow: hidden; }
/* flex + margin:auto (never place-items:center) so a tall dialog scrolls instead of stranding its button. */
.ft-dlg { position: fixed; inset: 0; z-index: 80; display: flex; padding: calc(16px + env(safe-area-inset-top, 0px)) 16px calc(16px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; background: var(--spyne-overlay-backdrop); }
.ft-dlg__box { position: relative; width: 100%; max-width: 880px; margin: auto; overflow: hidden; border-radius: var(--spyne-radius-dialog); background: var(--spyne-surface-bg-default); box-shadow: var(--spyne-shadow-xl); animation: ftRise .2s both; }
.ft-sd { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 560px; }

.ft-sd__art { position: relative; overflow: hidden; background: var(--spyne-surface-bg-inverse-strong); }
.ft-sd__grid { position: absolute; inset: 0; display: grid; gap: 4px; }
.ft-sd__grid[data-count='1'] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.ft-sd__grid[data-count='2'] { grid-template-columns: 1fr; grid-template-rows: 1.55fr 1fr; }
.ft-sd__grid[data-count='3'] { grid-template-columns: 1fr 1fr; grid-template-rows: 1.55fr 1fr; }
.ft-sd__grid[data-count='3'] .ft-sd__cell--lead { grid-column: span 2; }
.ft-sd__cell { overflow: hidden; background: var(--spyne-surface-bg-sunken); }
.ft-sd__cell img { width: 100%; height: 100%; object-fit: cover; }
.ft-sd__cell--lead img { object-position: center 18%; }
/* A card on a photograph gets its own ground, at the foot, clear of the logo band. */
.ft-sd__proof { position: absolute; left: 16px; right: 16px; bottom: 100px; padding: 14px 16px; border-radius: var(--spyne-radius-container-lg); background: var(--spyne-surface-bg-default); box-shadow: var(--spyne-shadow-lg); }
.ft-sd__proofh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.ft-sd__eyebrow { font-size: var(--spyne-house-eyebrow-size); font-weight: var(--spyne-house-eyebrow-weight); letter-spacing: var(--spyne-house-eyebrow-tracking); text-transform: uppercase; color: var(--spyne-text-muted); }
.ft-sd__chip { padding: 2px 8px; border-radius: var(--spyne-radius-control-sm); background: var(--spyne-surface-bg-success-subtle); color: var(--spyne-text-success); font-size: var(--spyne-caption-xs-size); font-weight: 700; white-space: nowrap; }
.ft-sd__chip--warn { background: var(--spyne-surface-bg-pending-subtle); color: var(--spyne-text-pending); }
.ft-sd__row { display: flex; align-items: center; gap: 10px; padding: 4px 0; font-size: var(--spyne-house-body-size); font-weight: 600; }
.ft-sd__row span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-sd__dot { flex: none; width: 8px; height: 8px; border-radius: var(--spyne-radius-pill); background: var(--spyne-icon-success); }
.ft-sd__dot--confirm { background: var(--spyne-icon-pending); }
.ft-sd__note { margin: 8px 0 0; font-size: var(--spyne-caption-xs-size); color: var(--spyne-text-muted); }
.ft-sd__logos { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px; background: var(--spyne-surface-bg-inverse-strong); }
.ft-sd__logosl { display: block; font-size: var(--spyne-house-eyebrow-size); font-weight: 700; letter-spacing: var(--spyne-house-eyebrow-tracking); text-transform: uppercase; color: var(--spyne-text-inverse); opacity: 0.7; }
.ft-sd__logosr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: 14px; margin-top: 10px; }
/* Every mark normalised to white: several are drawn in white and vanish otherwise. */
.ft-sd__logosr img { width: 100%; max-height: 22px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.9; }

.ft-sd__action { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 32px; }
.ft-sd__body { display: flex; flex-direction: column; flex: 1; }
.ft-sd__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: var(--spyne-radius-control-sm); background: transparent; color: var(--spyne-icon-muted); cursor: pointer; }
.ft-sd__close:hover { background: var(--spyne-surface-bg-sunken); }
.ft-sd__close:focus-visible { outline: none; box-shadow: var(--spyne-shadow-focus-ring); }
.ft-sd__title { margin: 0; padding-right: 36px; font-size: var(--spyne-heading-h2-lg-size); line-height: var(--spyne-heading-h2-lg-line-height); font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
.ft-sd__lead { margin: 8px 0 0; font-size: var(--spyne-house-body-size); line-height: var(--spyne-house-body-line-height); color: var(--spyne-text-muted); }
.ft-sd__lead b { color: var(--spyne-text-default); }
.ft-sd__terms { color: var(--spyne-text-default); }
.ft-sd__label { margin: 18px 0 0; font-size: var(--spyne-house-eyebrow-size); font-weight: 700; letter-spacing: var(--spyne-house-eyebrow-tracking); text-transform: uppercase; color: var(--spyne-text-muted); }
.ft-sd__benefits { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ft-sd__label + .ft-sd__benefits { margin-top: 10px; }
.ft-sd__benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: var(--spyne-house-body-size); line-height: 1.4; }
.ft-sd__benefits svg { flex: none; margin-top: 2px; color: var(--spyne-icon-success); }
.ft-sd__does { margin: 8px 0 0; padding-left: 42px; display: flex; flex-direction: column; gap: 6px; font-size: var(--spyne-house-body-size); line-height: 1.4; color: var(--spyne-text-subtle); }
.ft-sd__form { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.ft-sd__opt { font-weight: 400; }
.ft-sd__code { letter-spacing: 0.4em; font-size: var(--spyne-title-lg-size); }
.ft-sd__preview { margin-top: 14px; }
.ft-sd__err { margin: 0; }
/* The way in, and it should look like it: full width, tall, real contrast. */
.ft-sd__go { justify-content: center; width: 100%; margin-top: 18px; }
[class^="spyne-btn-"].ft-sd__go { height: 52px; }
.ft-sd__form .ft-sd__go { margin-top: 4px; }
.ft-sd__later { align-self: center; margin-top: 8px; }
.ft-sd__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin: auto 0 0; padding-top: 16px; font-size: var(--spyne-caption-size); color: var(--spyne-text-muted); text-align: center; }
.ft-sd__foot .ft-linkbtn { font-size: var(--spyne-caption-size); }
.ft-sd__foot .ft-linkbtn:disabled { color: var(--spyne-text-muted); font-weight: 500; cursor: default; text-decoration: none; }
.ft-sd__ok { color: var(--spyne-text-success); background: var(--spyne-surface-bg-success-subtle); margin-bottom: 16px; }

@media (max-width: 820px) {
  .ft-sd { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  /* On a phone the picture is a band and the proof card comes off: no room for it. */
  .ft-sd__art { height: 200px; }
  .ft-sd__proof { display: none; }
  .ft-sd__logos { padding: 10px 16px; }
  .ft-sd__logosr { margin-top: 6px; }
  .ft-sd__action { padding: 24px 20px; }
  .ft-sd__title { font-size: var(--spyne-heading-h3-size); line-height: var(--spyne-heading-h3-line-height); }
}
@media (prefers-reduced-motion: reduce) { .ft-dlg__box { animation: none; } }