/* ============================================================
   Primitive tokens — generated from Figma Tailwind + Smith.ai exports.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

:host {
  /* Brand-neutral */
  --color-brand-neutral-50 : #FAFAF7;
  --color-brand-neutral-100: #F5F5F3;
  --color-brand-neutral-200: #E7E7E2;
  --color-brand-neutral-300: #D6D6CD;
  --color-brand-neutral-400: #A8A8A0;
  --color-brand-neutral-500: #85857A;
  --color-brand-neutral-600: #65655D;
  --color-brand-neutral-700: #4D4D47;
  --color-brand-neutral-800: #3A3A36;
  --color-brand-neutral-900: #282825;
  --color-brand-neutral-950: #1A1A18;

  /* Brand-beige */
  --color-brand-beige-50 : #FAF6F0;
  --color-brand-beige-100: #F5F0E7;
  --color-brand-beige-200: #E5DFD5;
  --color-brand-beige-300: #D6CFC2;
  --color-brand-beige-400: #C3BBAC;
  --color-brand-beige-500: #C2B69F;
  --color-brand-beige-600: #907F60;
  --color-brand-beige-700: #6C6251;
  --color-brand-beige-800: #4D422E;
  --color-brand-beige-900: #282115;
  --color-brand-beige-950: #1A150D;

  /* Brand-blue */
  --color-brand-blue-50 : #EBFAFF;
  --color-brand-blue-100: #D1EFFA;
  --color-brand-blue-200: #A8DDF0;
  --color-brand-blue-300: #7ECBE7;
  --color-brand-blue-400: #59B7D9;
  --color-brand-blue-500: #33A3CC;
  --color-brand-blue-600: #2684A6;
  --color-brand-blue-700: #186581;
  --color-brand-blue-800: #0F4457;
  --color-brand-blue-900: #083545;
  --color-brand-blue-950: #05232E;

  /* Brand-orange */
  --color-brand-orange-50 : #FFF0EB;
  --color-brand-orange-100: #FCE2D9;
  --color-brand-orange-200: #F8B7A0;
  --color-brand-orange-300: #F4855D;
  --color-brand-orange-400: #F0612D;
  --color-brand-orange-500: #C64110;
  --color-brand-orange-600: #A0340D;
  --color-brand-orange-700: #712509;
  --color-brand-orange-800: #4B1906;
  --color-brand-orange-900: #260C03;
  --color-brand-orange-950: #1A0802;

  /* Typography scale */
  --font-size-h1   : 2.25rem;
  --font-size-h2   : 1.875rem;
  --font-size-h3   : 1.5rem;
  --font-size-h4   : 1.25rem;
  --font-size-body : 1rem;
  --font-size-lead : 1.25rem;
  --font-size-large: 1.125rem;

  /* Shadow scale */
  --shadow-2xs: 0px 1px 3px 0px #1A1A1808;
  --shadow-xs : 0px 1px 3px 0px #1A1A1808;
  --shadow-2xl: 0px 1px 3px 0px #1A1A1821;
  --shadow-sm : 0px 1px 3px 0px #1A1A180D, 0px 1px 2px -1px #1A1A180D;
  --shadow-md : 0px 1px 3px 0px #1A1A180D, 0px 2px 4px -1px #1A1A180D;
  --shadow-lg : 0px 1px 3px 0px #1A1A180D, 0px 4px 6px -1px #1A1A180D;
  --shadow-xl : 0px 1px 3px 0px #1A1A180D, 0px 8px 10px -1px #1A1A180D;

}

/* ============================================================
   Semantic color tokens — generated from Figma Mode + Smith.ai exports.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

:host {
  --extra-transparent     : #FFFFFF00;
  --extra-backdrop-overlay: #3C3A4099;
  --extra-shadow-color    : #0000001A;
  --muted-foreground-card : #A8A8A0;
  --opacity-accent-10     : #FFFFFF1A;
  --opacity-accent-20     : #FFFFFF33;
  --opacity-accent-30     : #FFFFFF4D;
  --opacity-accent-40     : #FFFFFF66;
  --opacity-accent-50     : #FFFFFF80;
  --opacity-success-10    : #16A34A1A;
  --opacity-success-20    : #16A34A33;
  --opacity-success-30    : #16A34A4D;
  --opacity-success-40    : #16A34A66;
  --opacity-success-50    : #16A34A80;
  --opacity-info-10       : #59B7D91A;
  --opacity-info-20       : #59B7D933;
  --opacity-info-30       : #59B7D94D;
  --opacity-info-40       : #59B7D966;
  --opacity-info-50       : #59B7D980;
  --opacity-warning-10    : #E392191A;
  --opacity-warning-20    : #D9770633;
  --opacity-warning-30    : #D977064D;
  --opacity-warning-40    : #D9770666;
  --opacity-warning-50    : #D9770680;
  --opacity-error-10      : #E034341A;
  --opacity-error-20      : #E0343433;
  --opacity-error-30      : #E034344D;
  --opacity-error-40      : #E0343466;
  --opacity-error-50      : #E0343480;
  --opacity-neutral-10    : #2828251A;
  --opacity-neutral-20    : #28282533;
  --opacity-neutral-30    : #2828254D;
  --opacity-neutral-40    : #28282566;
  --opacity-neutral-50    : #28282580;
}


:host,
[data-scheme="light"] {
  --background                : #F5F0E7;
  --foreground                : #282825;
  --card                      : #FFFFFF;
  --card-foreground           : #282825;
  --popover                   : #F5F0E7;
  --popover-foreground        : #3A3A36;
  --primary                   : #C64110;
  --primary-foreground        : #F5F0E7;
  --secondary                 : #FAF6F0;
  --secondary-foreground      : #3A3A36;
  --muted                     : #E5DFD5;
  --muted-foreground          : #85857A;
  --accent                    : #FAF6F0;
  --accent-foreground         : #282825;
  --destructive               : #EF4444;
  --info                      : #59B7D9;
  --success                   : #16A34A;
  --warning                   : #D97706;
  --border                    : #D6CFC2;
  --input                     : #D6CFC2;
  --ring                      : #59B7D9;
  --chart-1                   : #F0612D;
  --chart-2                   : #59B7D9;
  --chart-3                   : #6366F1;
  --chart-4                   : #10B981;
  --chart-5                   : #EAB308;
  --sidebar                   : #E5DFD5;
  --sidebar-foreground        : #4D4D47;
  --sidebar-primary           : #F0612D;
  --sidebar-primary-foreground: #F5F0E7;
  --sidebar-accent            : #FAF6F0;
  --sidebar-accent-foreground : #1A1A18;
  --sidebar-border            : #D6CFC2;
  --sidebar-ring              : #3A3A36;
  --extra-muted-foreground    : #D6CFC2;
  --opacity-primary-10        : #C641101A;
  --opacity-primary-20        : #C6411033;
  --opacity-primary-30        : #C641104D;
  --opacity-primary-40        : #C6411066;
  --opacity-primary-50        : #C6411080;
  --opacity-secondary-10      : #FAF6F01A;
  --opacity-secondary-20      : #FAF6F033;
  --opacity-secondary-30      : #FAF6F04D;
  --opacity-secondary-40      : #FAF6F066;
  --opacity-secondary-50      : #FAF6F080;
  --divider: #D6CFC2;
}

[data-scheme="dark"] {
  --background                : #1A1A18;
  --foreground                : #F5F0E7;
  --card                      : #282825;
  --card-foreground           : #F5F0E7;
  --popover                   : #282825;
  --popover-foreground        : #FAF6F0;
  --primary                   : #F0612D;
  --primary-foreground        : #FAF6F0;
  --secondary                 : #1A1A18;
  --secondary-foreground      : #FAF6F0;
  --muted                     : #3A3A36;
  --muted-foreground          : #65655D;
  --accent                    : #3A3A36;
  --accent-foreground         : #FAF6F0;
  --destructive               : #DC2626;
  --info                      : #7ECBE7;
  --success                   : #16A34A;
  --warning                   : #D97706;
  --border                    : #3A3A36;
  --input                     : #3A3A36;
  --ring                      : #7ECBE7;
  --chart-1                   : #C64110;
  --chart-2                   : #7ECBE7;
  --chart-3                   : #818CF8;
  --chart-4                   : #6EE7B7;
  --chart-5                   : #FACC15;
  --sidebar                   : #000000;
  --sidebar-foreground        : #85857A;
  --sidebar-primary           : #C64110;
  --sidebar-primary-foreground: #FAF6F0;
  --sidebar-accent            : #282825;
  --sidebar-accent-foreground : #FFFFFF;
  --sidebar-border            : #282825;
  --sidebar-ring              : #65655D;
  --extra-muted-foreground    : #4D4D47;
  --opacity-primary-10        : #F0612D1A;
  --opacity-primary-20        : #F0612D33;
  --opacity-primary-30        : #F0612D4D;
  --opacity-primary-40        : #F0612D66;
  --opacity-primary-50        : #F0612D80;
  --opacity-secondary-10      : #2828251A;
  --opacity-secondary-20      : #28282533;
  --opacity-secondary-30      : #2828254D;
  --opacity-secondary-40      : #28282566;
  --opacity-secondary-50      : #28282580;
  --divider: #3A3A36;
}

/* ============================================================
   Responsive layout tokens — generated from Figma Responsive exports.
   Mobile-first: :root = mobile defaults; overridden at tablet (768px)
   and web (1280px) via media queries.
   DO NOT EDIT MANUALLY. To regenerate: npm run gen:tokens
   ============================================================ */

/* Mobile defaults */
:host {
  --layout-screen-size        : 360px;
  --layout-vertical-padding   : 32px;
  --layout-horizontal-padding : 16px;
  --layout-heading-size       : 24px;
  --layout-heading-line-height: 32px;
  --layout-section-spacing    : 48px;
  --layout-block-width        : 360px;
}

/* Tablet (≥768px) */
@media (min-width: 768px) {
  :host {
    --layout-screen-size        : 768px;
    --layout-vertical-padding   : 64px;
    --layout-horizontal-padding : 24px;
    --layout-heading-size       : 30px;
    --layout-heading-line-height: 36px;
    --layout-section-spacing    : 64px;
    --layout-block-width        : 768px;
  }
}

/* Web (≥1280px) */
@media (min-width: 1280px) {
  :host {
    --layout-screen-size        : 1280px;
    --layout-vertical-padding   : 96px;
    --layout-horizontal-padding : 32px;
    --layout-heading-size       : 36px;
    --layout-heading-line-height: 40px;
    --layout-section-spacing    : 96px;
    --layout-block-width        : 1440px;
  }
}

/* ============================================================
   Design Tokens
   Global CSS custom properties for color, typography, spacing,
   border-radius, and shadow. Import this file at the app or
   Storybook entry level so all components can consume the vars.

   Layer 1 — Primitives (brand palette + type scale): tokens/primitives.css  [generated]
   Layer 2 — Semantic colors + opacity scale:         tokens/colors.css       [generated]
   Layer 3 — Responsive layout vars:                  tokens/responsive.css   [generated]
   Layer 4 — Manual supplements below                 (not yet in Figma)
   ============================================================ */


/* ----------------------------------------------------------
   Manual Color Supplements — Light
   Tokens not (yet) exported from Figma; kept here manually.
   ---------------------------------------------------------- */
:host,
[data-scheme="light"] {

  /* Inverse-scheme tokens — exact values from the DARK scheme, used by
     components that intentionally render with the opposite scheme's colors
     (e.g. the XS dropdown popup shows dark-on-light-card). */
  --inv-popover:            #282825;  /* = dark --popover            */
  --inv-popover-foreground: #FAF9F0;  /* = dark --popover-foreground */
  --inv-accent:             #3A3A36;  /* = dark --accent             */

  --destructive-foreground: #FEF2F2;
  --info-foreground:        #ECFEFF;
  --success-foreground:     #F0FDF4;
  --warning-foreground:     #FFFDF5;

  /* Opacity vars not in Figma exports */
  --opacity-background-10: #F5F0E71A;
  --opacity-background-20: #F5F0E733;
  --opacity-background-30: #F5F0E74D;
  --opacity-background-40: #F5F0E766;
  --opacity-background-50: #F5F0E780;

  --opacity-inv-accent-10: #3A3A361A;
  --opacity-inv-accent-20: #3A3A3633;
  --opacity-inv-accent-30: #3A3A364D;
  --opacity-inv-accent-40: #3A3A3666;
  --opacity-inv-accent-50: #3A3A3680;

  --opacity-background-60:    #F5F0E799;
  --opacity-destructive-10:   #EF44441A;

}


/* ----------------------------------------------------------
   Manual Color Supplements — Dark
   ---------------------------------------------------------- */
[data-scheme="dark"] {

  /* Inverse-scheme tokens — exact values from the LIGHT scheme, used by
     components that intentionally render with the opposite scheme's colors
     (e.g. the XS dropdown popup shows light-on-dark-card). */
  --inv-popover:            #F7F5E8;  /* = light --popover            */
  --inv-popover-foreground: #3A3A36;  /* = light --popover-foreground */
  --inv-accent:             #FAF6F0;  /* = light --accent             */

  --destructive-foreground: #FEF2F2;
  --info-foreground:        #ECFEFF;
  --success-foreground:     #F0FDF4;
  --warning-foreground:     #FFFDF5;

  /* Opacity vars not in Figma exports */
  --opacity-background-10: #1A1A181A;
  --opacity-background-20: #1A1A1833;
  --opacity-background-30: #1A1A184D;
  --opacity-background-40: #1A1A1866;
  --opacity-background-50: #1A1A1880;

  --opacity-inv-accent-10: #FAF6F01A;
  --opacity-inv-accent-20: #FAF6F033;
  --opacity-inv-accent-30: #FAF6F04D;
  --opacity-inv-accent-40: #FAF6F066;
  --opacity-inv-accent-50: #FAF6F080;

  --opacity-background-60:    #1A1A1899;
  --opacity-destructive-10:   #DC26261A;

}


/* ----------------------------------------------------------
   Typography Tokens
   ---------------------------------------------------------- */
:host {
  --font-family-fallback: "II_Increments_Sans", "Iiincrementssans", sans-serif;
   --font-family-default:   var(--_typography---fonts--font-main, var(--font-family-fallback));

  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  --line-height-xs:   1rem;     /* 16px */
  --line-height-sm:   1.25rem;  /* 20px */
  --line-height-base: 1.5rem;   /* 24px */
}


/* ----------------------------------------------------------
   Border Radius Tokens
   ---------------------------------------------------------- */
:host {
  --radius-sm:   0.5rem;    /*  8px — rounded-lg  in Figma */
  --radius-md:   1rem;      /* 16px — rounded-2xl in Figma */
  --radius-lg:   1.5rem;    /* 24px — rounded-3xl in Figma */
  --radius-full: 9999px;    /* pill / fully rounded         */
}


/* ----------------------------------------------------------
   Spacing Tokens
   ---------------------------------------------------------- */
:host {
  --spacing-0:   0px;
  --spacing-px:  1px;
  --spacing-1:   0.25rem;   /*  4px */
  --spacing-1-5: 0.375rem;  /*  6px */
  --spacing-2:   0.5rem;    /*  8px */
  --spacing-3:   0.75rem;   /* 12px */
  --spacing-4:   1rem;      /* 16px */
  --spacing-5:   1.25rem;   /* 20px */
  --spacing-6:   1.5rem;    /* 24px */
}

/* ============================================================
   RichText — Component Styles
   Self-contained typography for structured content blocks.
   Covers all standard rich text elements.
   Design tokens are defined in src/tokens.css.
   ============================================================ */

.rich-text {
  color:       var(--foreground);
  font-family: var(--font-family-default);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
}


/* ---- Paragraphs ---- */

.rich-text p {
  margin: 0;
}

.rich-text p + p,
.rich-text * + p {
  margin-top: 1rem;
}


/* ---- Headings ---- */

.rich-text h1,
.rich-text h2,
.rich-text h3,
.rich-text h4,
.rich-text h5,
.rich-text h6 {
  color:       var(--foreground);
  font-family: var(--font-family-default);
  font-weight: var(--font-weight-bold);
  margin:      0;
}

/* Space between a heading and what follows it */
.rich-text h1 + *,
.rich-text h2 + *,
.rich-text h3 + *,
.rich-text h4 + *,
.rich-text h5 + *,
.rich-text h6 + * {
  margin-top: 0.5rem;
}

/* Space before a heading that has something above it */
.rich-text * + h1,
.rich-text * + h2,
.rich-text * + h3,
.rich-text * + h4,
.rich-text * + h5,
.rich-text * + h6 {
  margin-top: 1.5rem;
}

.rich-text h1 { font-size: var(--font-size-h1); line-height: 1.2;  }
.rich-text h2 { font-size: var(--font-size-h2); line-height: 1.25; }
.rich-text h3 { font-size: var(--font-size-h3); line-height: 1.3;  }
.rich-text h4 { font-size: var(--font-size-h4); line-height: 1.4;  }
.rich-text h5 { font-size: var(--font-size-base); line-height: var(--line-height-base); }
.rich-text h6 { font-size: var(--font-size-sm);   line-height: var(--line-height-sm);  }


/* ---- Lists ---- */

.rich-text ul,
.rich-text ol {
  font-size:    inherit;
  line-height:  inherit;
  margin:       0;
  padding-left: 1.25rem;
}

.rich-text li {
  font-size:   inherit;
  line-height: inherit;
}

.rich-text * + ul,
.rich-text * + ol {
  margin-top: 0.5rem;
}

.rich-text ul { list-style-type: disc;    }
.rich-text ol { list-style-type: decimal; }

.rich-text li + li {
  margin-top: 0.25rem;
}

/* Nested lists */
.rich-text li > ul,
.rich-text li > ol {
  margin-top: 0.25rem;
}


/* ---- Inline emphasis ---- */

.rich-text strong,
.rich-text b {
  font-weight: var(--font-weight-bold);
}

.rich-text em,
.rich-text i {
  font-style: italic;
}


/* ---- Links ---- */

.rich-text a {
  color:           var(--primary);
  font-weight:     var(--font-weight-medium);
  text-decoration: none;
}

.rich-text a:hover {
  text-decoration: underline;
}


/* ---- Blockquote ---- */

.rich-text blockquote {
  border-left: 3px solid var(--border);
  color:       var(--muted-foreground);
  margin:      0;
  padding-left: 1rem;
}

.rich-text * + blockquote {
  margin-top: 1rem;
}


/* ---- Inline code ---- */

.rich-text code {
  background-color: var(--muted);
  border-radius:    0.25rem;
  font-family:      ui-monospace, 'Cascadia Code', 'Source Code Pro', monospace;
  font-size:        0.875em;
  padding:          0.125em 0.375em;
}


/* ---- Code block ---- */

.rich-text pre {
  background-color: var(--muted);
  border-radius:    var(--radius-sm);
  margin:           0;
  overflow-x:       auto;
  padding:          1rem 1.25rem;
}

.rich-text * + pre {
  margin-top: 1rem;
}

/* Reset inline code styles when inside a pre block */
.rich-text pre code {
  background: none;
  font-size:  1em;
  padding:    0;
}


/* ---- Horizontal rule ---- */

.rich-text hr {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     1.5rem 0 0;
}


/* ---- Images ---- */

.rich-text img {
  display:   block;
  height:    auto;
  max-width: 100%;
}

/* ============================================================
   Accordion — Component Styles
   Design tokens are defined in src/tokens.css.

   Figma spec (node 2018:22972):
     Border radius : 12px (0.75rem)
     Trigger padding: 10px 12px 10px 16px (top right bottom left)
     Trigger gap   : 32px between icon / question / price / chevron
     Answer padding : 12px top · 12px right · 24px bottom · 16px left
     Idle bg       : transparent (no background)
     Hover bg      : var(--accent)   — warm off-white (#FAF6F0)
     Open bg       : var(--card)     — white
     Chevron       : 18 × 18px, rotates 180° when open
   ============================================================ */

/* ---- Outer wrapper ---- */
.accordion {
  border-radius: 0.75rem;  /* 12px */
  overflow:      hidden;
  transition:    background-color 150ms ease;
}

.accordion:hover {
  background-color: var(--accent);
}

.accordion[data-open] {
  background-color: var(--card);
}

/* Keep card bg even when hovered while open */
.accordion[data-open]:hover {
  background-color: var(--card);
}


/* ---- Trigger button ---- */
.accordion__trigger {
  align-items:  flex-start;
  background:   none;
  border:       none;
  cursor:       pointer;
  display:      flex;
  gap:          2rem;         /* 32px */
  padding:      0.625rem 0.75rem 0.625rem 1rem; /* 10px 12px 10px 16px */
  text-align:   left;
  width:        100%;
}

/* ---- Icon slot (16 × 16) ---- */
.accordion__icon {
  align-items:  center;
  color:        var(--foreground);
  display:      flex;
  flex-shrink:  0;
  height:       var(--line-height-base); /* 24px — vertically centers with text */
  width:        1rem;                    /* 16px */
}

.accordion__icon > * {
  display: block;
  height:  1rem;
  width:   1rem;
}

/* ---- Question text ---- */
.accordion__question {
  color:       var(--foreground);
  flex:        1 0 0;
  font-family: var(--font-family-default);
  font-size:   var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-base);
  min-width:   0;
}

/* ---- Price label (optional) ---- */
.accordion__price {
  color:        var(--muted-foreground); /* grey in idle; becomes foreground on hover/open */
  flex-shrink:  0;
  font-family:  var(--font-family-default);
  font-size:    var(--font-size-sm);   /* 14px */
  font-weight:  var(--font-weight-regular);
  line-height:  var(--line-height-sm); /* 20px */
  padding-top:  0.125rem;             /* 2px — nudge to align with bold question baseline */
  text-align:   right;
  white-space:  nowrap;
}

/* ---- Chevron ---- */
.accordion__chevron {
  align-items:     center;
  color:           var(--muted-foreground);
  display:         flex;
  flex-shrink:     0;
  height:          1.6875rem; /* 27px — Figma "Button area" height */
  justify-content: center;
}

.accordion__chevron-icon {
  display:    block;
  height:     1.125rem; /* 18px */
  transition: transform 220ms ease;
  width:      1.125rem;
}

/* Price becomes full foreground on hover and when open */
.accordion:hover .accordion__price,
.accordion[data-open] .accordion__price {
  color: var(--foreground);
}

.accordion[data-open] .accordion__chevron-icon {
  transform: rotate(180deg);
}


/* ---- Answer body — CSS grid height animation ---- */
.accordion__body-outer {
  display:            grid;
  grid-template-rows: 0fr;
  transition:         grid-template-rows 220ms ease;
}

.accordion[data-open] .accordion__body-outer {
  grid-template-rows: 1fr;
}

.accordion__body-inner {
  overflow: hidden;
}

/* Padding only — typography is handled by the RichText component.
   Top  : 2px — trigger already has pb:10px, together they form 12px gap (Figma gap-3)
   Right: 24px — matches outer pr:12px + answer pr:12px from Figma
   Bottom: 22px — matches outer pb:10px + answer pb:12px from Figma
   Left : 16px — aligns answer text with question text (Figma outer pl:16px + answer pl:0) */
.accordion__answer {
  padding: 0.125rem 1.5rem 1.375rem 1rem;
}