/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/tokens.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/*
 * Caddy Design Tokens
 *
 * Source of truth: Figma variables (ABC Diatype type system + brand palette).
 *
 * Breakpoint: single mobile/desktop split at max-width: 899.98px
 * (source of truth: lib/breakpoints.ts). CSS custom properties are NOT usable
 * inside @media conditions, so each module repeats the literal (899.98px).
 */

:root {
  color-scheme: light;

  /* ─── Colors ─── */

  /* Grey Scale */
  --color-grey-50: #fafafa;
  --color-grey-100: #e2e2e2;
  --color-grey-150: #d9d9d9;
  --color-grey-200: #c9c9c9;
  --color-grey-300: #b1b1b1;
  --color-grey-400: #989898;
  --color-grey-500: #808080;
  --color-grey-600: #676767;
  --color-grey-700: #4f4f4f;
  --color-grey-800: #363636;

  /* Neutral & iMessage */
  --color-neutral-50: #f8f7f4;
  --color-white: #ffffff;
  --color-imessage: #e3e2e1;

  /* Caddy Brand Colors */
  --color-off-white: #f4f1ec;
  --color-black: #1e1e1e;
  --color-lavender: #c8b3d3;
  --color-marigold: #c9742a;
  --color-pistachio: #bed599;
  --color-maroon: #40242b;
  --color-mint: #e8f5e5;
  --color-navy: #254b84;
  --color-pine: #457958;
  --color-butter: #f9f2ae;
  --color-rose: #c29b92;
  --color-mist: #ddebf6;
  --color-cornflower: #96c5f9;
  --color-chestnut: #a96948;
  --color-sky: #4ebaff;

  /* Brand Gradients (setup avatar editor swatches, Figma 7057-7219) */
  --gradient-forest: linear-gradient(180deg, #7cb98e, #030303);
  --gradient-wildfire: linear-gradient(143.529deg, #b6ffc4 1.3303%, #ff0000 99.835%);
  --gradient-dusk: linear-gradient(180deg, #f0dede, #1f1c1f);
  --gradient-meadow: linear-gradient(180deg, #7cb98e, #ffff00);
  --gradient-bloom: linear-gradient(180deg, #ff3662, #e2e8ff);
  --gradient-abyss: linear-gradient(
    167.49deg,
    #e9f4f5 7.39%,
    #95cadb 22.86%,
    #134b60 58.31%,
    #010205 90.92%
  );
  --gradient-forge: linear-gradient(180deg, #959595, #ff8400);
  --gradient-iris: linear-gradient(180deg, #b3d1bc, #542168);

  /* ─── Typography ─── */

  --font-family: 'ABC Diatype', -apple-system, system-ui, sans-serif;

  /* H1 — Display */
  --font-h1-size: 64px;
  --font-h1-lh: 68.48px;
  --font-h1-tracking: -1.28px;

  /* H2 — Section heading */
  --font-h2-size: 36px;
  --font-h2-lh: 42px;
  --font-h2-tracking: -0.6px;

  /* H3 — Subheading */
  --font-h3-size: 24px;
  --font-h3-lh: 34px;
  --font-h3-tracking: -0.5px;

  /* P1 — Body */
  --font-p1-size: 16px;
  --font-p1-lh: 24px;
  --font-p1-tracking: 0.3px;

  /* P2 — Small body */
  --font-p2-size: 14px;
  --font-p2-lh: 20px;
  --font-p2-tracking: 0.5px;

  /* ─── Layout ─── */

  --margin: 60px;
  --gutter: 40px;
  --max-width: 1440px;
  --content-max-width: 1320px;

  /* ─── Radii ─── */

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 80px;

  /* ─── Button ─── */

  --button-radius: 80px;
  --button-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
  --button-inset-shadow: inset 0px 3px 0px rgba(255, 255, 255, 0.25);

  /* ─── Z-index ─── */

  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-sticky: 200;
  --z-modal: 1000;
}

/*!***************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/tokens-compat.css ***!
  \***************************************************************************************************************************************************************************************************************************************************************************/
/*
 * App / dashboard compatibility tokens.
 *
 * The "design system overhaul" rewrote tokens.css from scratch for the new
 * Figma landing palette, but the app shell (dashboard home/settings),
 * onboarding, use-cases, and every `components/ui/*` module still reference the
 * previous token names (--color-bg-card, --space-*, --font-heading-*, etc.).
 * Without them those surfaces render unstyled.
 *
 * This shim re-declares those token names so all of that UI works again, while
 * mapping the *visual* tokens (text, surfaces, borders, font) onto the new
 * palette so the dashboard matches the new style. Structural tokens (spacing,
 * radii, shadows, type sizes, transitions) keep their original values so the
 * existing layouts stay pixel-correct.
 *
 * Tokens already defined in tokens.css (--radius-sm/md/lg/pill, --color-grey-*,
 * --font-family, z-index base/raised/overlay/modal, etc.) are intentionally NOT
 * redeclared here — the new values win.
 *
 * Theming: on signed-in app routes the "app-theme bridge" block at the bottom
 * re-points these semantic names at the marketing --theme-* variant layer
 * (html[data-app-theme]); the light-dark() values in :root remain as the
 * resolved fallback for surfaces without the bridge (setup, dev pages).
 */

:root {
  /* ───────── Brand / accent (functional action color) ───────── */
  --color-brand: #615cf5;
  --color-brand-hover: #5753dc;
  --color-brand-pressed: #4e4ac4;
  --color-focus-ring: color-mix(in srgb, var(--color-brand) 30%, transparent);

  /* ───────── Text → landing palette (light/dark match the marketing site) ───────── */
  --color-text-primary: light-dark(var(--color-black), var(--color-off-white));
  --color-text-secondary: light-dark(rgba(30, 30, 30, 0.72), rgba(244, 241, 236, 0.72));
  --color-text-tertiary: light-dark(rgba(30, 30, 30, 0.5), rgba(244, 241, 236, 0.5));
  --color-text-disabled: light-dark(rgba(30, 30, 30, 0.32), rgba(244, 241, 236, 0.32));
  --color-rail-icon-inactive: var(--color-grey-500);

  --color-text-inverse: #ffffff;
  --color-text-inverse-secondary: rgba(255, 255, 255, 0.7);
  --color-text-inverse-tertiary: rgba(255, 255, 255, 0.5);

  /* ───────── Black / white overlay primitives ───────── */
  --color-dark-900: rgba(30, 30, 30, 0.9);
  --color-dark-800: rgba(30, 30, 30, 0.8);
  --color-dark-700: rgba(30, 30, 30, 0.7);
  --color-dark-600: rgba(30, 30, 30, 0.6);
  --color-dark-500: rgba(30, 30, 30, 0.5);
  --color-dark-400: rgba(30, 30, 30, 0.4);
  --color-dark-300: rgba(30, 30, 30, 0.3);
  --color-dark-250: rgba(30, 30, 30, 0.25);
  --color-dark-200: rgba(30, 30, 30, 0.2);
  --color-dark-150: rgba(30, 30, 30, 0.15);
  --color-dark-100: rgba(30, 30, 30, 0.1);
  --color-dark-75: rgba(30, 30, 30, 0.075);
  --color-dark-50: rgba(30, 30, 30, 0.05);
  --color-dark-0: rgba(30, 30, 30, 0);

  --color-light-900: rgba(255, 255, 255, 0.9);
  --color-light-800: rgba(255, 255, 255, 0.8);
  --color-light-700: rgba(255, 255, 255, 0.7);
  --color-light-600: rgba(255, 255, 255, 0.6);
  --color-light-500: rgba(255, 255, 255, 0.5);
  --color-light-400: rgba(255, 255, 255, 0.4);
  --color-light-300: rgba(255, 255, 255, 0.3);
  --color-light-250: rgba(255, 255, 255, 0.25);
  --color-light-200: rgba(255, 255, 255, 0.2);
  --color-light-150: rgba(255, 255, 255, 0.15);
  --color-light-100: rgba(255, 255, 255, 0.1);
  --color-light-50: rgba(255, 255, 255, 0.05);
  --color-light-0: rgba(255, 255, 255, 0);

  /* ───────── Borders (off-white at low alpha in dark) ───────── */
  --color-border-div: light-dark(rgba(30, 30, 30, 0.08), rgba(244, 241, 236, 0.12));
  --color-border-subtle: light-dark(rgba(30, 30, 30, 0.12), rgba(244, 241, 236, 0.2));
  --color-border-hairline: light-dark(rgba(30, 30, 30, 0.08), rgba(244, 241, 236, 0.1));

  /* ───────── Surfaces → landing White (light) / Black (dark) ───────── */
  --color-bg-card: light-dark(#ffffff, var(--color-black));
  --color-bg-secondary: light-dark(var(--color-grey-50), #262626);
  --color-bg-page: light-dark(var(--color-neutral-50), var(--color-black));
  --color-bg-elevated: light-dark(#ffffff, #2a2a2a);

  /* ───────── Interaction overlays (flip to light overlays in dark) ───────── */
  --color-interaction-tertiary-default: light-dark(
    rgba(30, 30, 30, 0.05),
    rgba(255, 255, 255, 0.06)
  );
  --color-interaction-tertiary-hover: light-dark(rgba(30, 30, 30, 0.1), rgba(255, 255, 255, 0.1));
  --color-interaction-tertiary-pressed: light-dark(
    rgba(30, 30, 30, 0.16),
    rgba(255, 255, 255, 0.16)
  );

  /* ───────── Status accents (lighter counterparts keep AA on dark) ───────── */
  --color-green: light-dark(#0a841f, #4ade80);
  --color-red: light-dark(#e53935, #f87171);
  --color-red-surface: light-dark(#fef2f2, rgba(248, 113, 113, 0.12));
  --color-red-strong: light-dark(#b91c1c, #fca5a5);
  --color-red-border: light-dark(#fecaca, rgba(248, 113, 113, 0.3));

  /* ───────── iMessage bubbles ───────── */
  --color-imessage-blue: #468cf7;
  --color-imessage-gray: light-dark(#e9e9eb, #3b3b3d);
  /* Received-bubble text: dark on the light bubble, off-white on the dark one. */
  --color-imessage-text: light-dark(#1a1a1a, var(--color-off-white));

  /* ───────── Radii (only the ones missing from tokens.css) ───────── */
  --radius-xs: 4px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-row: 18px;

  /* ───────── Spacing (4px base) ───────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ───────── Shadows (light values) ───────── */
  --shadow-xs: 0 2px 4px rgba(16, 15, 12, 0.06);
  --shadow-sm: 0 2px 8px rgba(16, 15, 12, 0.08);
  --shadow-md: 0 2px 8px rgba(16, 15, 12, 0.12);
  --shadow-card: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(16, 15, 12, 0.06);
  --shadow-ui-frame: 0 8px 12px rgba(30, 31, 33, 0.15);
  --shadow-card-floating: 0 4px 24px rgba(0, 0, 0, 0.1);
  --shadow-dock-rest: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-dock-hover: 0 6px 14px rgba(0, 0, 0, 0.18);
  --shadow-cta-rest: 0 10px 22px rgba(0, 0, 0, 0.18);
  --shadow-cta-hover: 0 14px 28px rgba(0, 0, 0, 0.22);
  --shadow-pill-system: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(16, 15, 12, 0.05);
  --shadow-bar-glass: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 -2px 16px rgba(16, 15, 12, 0.04);

  /* ───────── Typography → new font, original sizes ───────── */
  --font-family-sans: var(--font-family);
  --font-family-mono: ui-monospace, monospace;

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

  --font-heading-lg-size: 32px;
  --font-heading-lg-line-height: 40px;
  --font-heading-lg-tracking: -0.8px;

  --font-heading-md-size: 24px;
  --font-heading-md-line-height: 30px;
  --font-heading-md-tracking: -0.48px;

  --font-heading-sm-size: 20px;
  --font-heading-sm-line-height: 26px;
  --font-heading-sm-tracking: -0.4px;

  --font-body-lg-size: 18px;
  --font-body-lg-line-height: 27px;
  --font-body-lg-tracking: -0.36px;

  --font-body-md-size: 15px;
  --font-body-md-line-height: 24px;
  --font-body-md-tracking: -0.3px;

  --font-body-sm-size: 13px;
  --font-body-sm-line-height: 18px;
  --font-body-sm-tracking: -0.26px;

  /* ───────── Transitions ───────── */
  --transition-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring-ios: cubic-bezier(0.32, 0.72, 0, 1);

  /* ───────── Z-index (only the one missing from tokens.css) ───────── */
  --z-toast: 2000;
}

/*
 * ───────── App-theme bridge ─────────
 *
 * On signed-in app routes (html[data-app-theme], set by the no-flash script in
 * app/layout.tsx) the old semantic names above are re-pointed at the marketing
 * --theme-* layer, so every compat consumer (components/ui/*, the app shell,
 * the dashboard pages) follows the picked color variant without per-file
 * edits. Surfaces come from the app-density ramp in theme-modes.css
 * (--theme-app-surface/-2). Login/setup are untouched (no data-app-theme).
 *
 * This block is the temporary seam: as dashboard surfaces are rewritten
 * against --theme-* directly, entries here lose their consumers and the block
 * shrinks toward deletion.
 */
html[data-app-theme] {
  /* Brand/action accent follows the variant accent (was #615cf5 purple). */
  --color-brand: var(--theme-accent);
  --color-brand-hover: color-mix(in srgb, var(--theme-accent) 92%, var(--theme-text));
  --color-brand-pressed: color-mix(in srgb, var(--theme-accent) 84%, var(--theme-text));
  --color-focus-ring: color-mix(in srgb, var(--theme-accent) 40%, transparent);

  --color-text-primary: var(--theme-text);
  --color-text-secondary: color-mix(in srgb, var(--theme-text) 72%, transparent);
  --color-text-tertiary: color-mix(in srgb, var(--theme-text) 50%, transparent);
  --color-text-disabled: color-mix(in srgb, var(--theme-text) 32%, transparent);

  --color-border-div: color-mix(in srgb, var(--theme-text) 8%, transparent);
  --color-border-subtle: color-mix(in srgb, var(--theme-text) 12%, transparent);
  --color-border-hairline: color-mix(in srgb, var(--theme-text) 8%, transparent);

  --color-bg-page: var(--theme-bg);
  --color-bg-card: var(--theme-app-surface);
  --color-bg-secondary: var(--theme-app-surface-2);
  --color-bg-elevated: var(--theme-app-surface);

  --color-interaction-tertiary-default: color-mix(in srgb, var(--theme-text) 5%, transparent);
  --color-interaction-tertiary-hover: color-mix(in srgb, var(--theme-text) 10%, transparent);
  --color-interaction-tertiary-pressed: color-mix(in srgb, var(--theme-text) 16%, transparent);

  --color-imessage-blue: var(--theme-imessage-sent-bg);
  --color-imessage-gray: var(--theme-imessage-received-bg);
  --color-imessage-text: var(--theme-imessage-received-text);
}

/*!*************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/theme-modes.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Caddy marketing color modes.
 *
 * A semantic --theme-* layer consumed by the public marketing surfaces.
 *   • data-color-variant  → primitives (bg / text / accent), one per palette
 *   • data-color-mode      → shared derivation logic (default | dark | fill | mono)
 * Both are set on <html> by the no-flash script in app/layout.tsx and kept in
 * sync by ColorThemeProvider. Variant primitives are declared first, then mode
 * derivations (which come later in source order so they win at equal specificity).
 *
 * Scope: marketing components read --theme-* directly. The signed-in app
 * ((app) routes) participates too: the no-flash script sets data-app-theme
 * there, which switches on the app-density derivations below
 * (--theme-app-surface/-2/-pill, the mono text override) and the compat-token
 * bridge in tokens-compat.css that re-points the old semantic names at this
 * layer. Marketing-only side effects (the marketing bg transition) stay gated
 * behind html[data-marketing].
 */

:root {
  /* ── Default (White) primitives ── */
  --theme-bg: var(--color-neutral-50);
  --theme-text: var(--color-black);
  /* Derive from --theme-text (not a fixed black) so muted text stays legible in
     every mode — e.g. off-white at 62% on the dark backgrounds. */
  --theme-text-muted: color-mix(in srgb, var(--theme-text) 62%, transparent);
  --theme-accent: var(--color-pistachio);
  --theme-on-accent: var(--color-black);

  /* CTA / buttons */
  --theme-cta-bg: var(--theme-accent);
  --theme-cta-text: var(--theme-on-accent);
  --theme-cta-secondary-bg: color-mix(in srgb, var(--theme-text) 12%, var(--theme-bg));
  --theme-cta-secondary-text: var(--theme-text);

  /* Nav + logo. On scroll the nav is a soft top-down gradient (not a near-opaque
     fill) paired with a progressive blur in Nav.module.css — the Figma scroll
     treatment. White gradient for light / mono / color-fill; dark overrides it
     to black below. */
  --theme-nav-bg: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.08) 75.5%,
    rgba(255, 255, 255, 0) 100%
  );
  --theme-logo: var(--theme-text);

  /* iMessage bubbles — the blue "sent" bubble is a constant iOS blue. */
  --theme-imessage-received-bg: #e9e9eb;
  --theme-imessage-received-text: var(--color-black);
  --theme-imessage-sent-bg: #0b93f6;
  --theme-imessage-sent-text: #ffffff;

  /* Shared surfaces + FAQ/footer (light logic; dark/mono override below) */
  --theme-surface: color-mix(in srgb, var(--theme-text) 5%, var(--theme-bg));
  --theme-rule: color-mix(in srgb, var(--theme-text) 10%, transparent);
  --theme-faq-text: var(--theme-text);
  --theme-faq-text-muted: var(--theme-text-muted);
  --theme-faq-expand: color-mix(in srgb, var(--theme-text) 80%, transparent);
  /* FAQ toggle pill — Figma uses a mid grey (#cdc9c9) on the light surface; ~20%
     of the text colour over the bg lands there while staying theme-driven. */
  --theme-toggle-bg: color-mix(in srgb, var(--theme-text) 20%, var(--theme-bg));
  --theme-toggle-icon: var(--theme-text);
  --theme-footer-bg: var(--theme-surface);
  --theme-footer-text: var(--theme-text);
  --theme-footer-text-muted: var(--theme-text-muted);

  /* TextSection app-icon glyph + linework. Default/white and Color Fill keep
     the original neutral grey; Dark + Mono override below (off-white / accent
     at 60% and 30% per the designer's spec). */
  --theme-graphic-icon: var(--color-grey-200);
  --theme-graphic-line: var(--color-grey-200);
}

/* ════════════════ Variant primitives ════════════════ */

/* ── Dark mode ── */
html[data-color-variant='black'] {
  --theme-bg: var(--color-black);
  --theme-text: var(--color-off-white);
  --theme-accent: var(--color-lavender);
  --theme-on-accent: var(--color-black);
}

/* ── Color Fill mode (black text on a filled pastel; each has its own CTA) ── */
/* Color Fill app-icon glyph + linework use the variant color multiplied by
   itself (var(--color-x) with mix-blend-mode: multiply) as a solid hex, so the
   icons read as a richer shade of the fill — solid avoids overlap seams. */
html[data-color-variant='butter'] {
  --theme-bg: var(--color-butter);
  --theme-text: var(--color-black);
  --theme-accent: var(--color-pine);
  --theme-on-accent: var(--color-off-white);
  /* Butter needs a darker iMessage bubble (designer flag) */
  --theme-imessage-received-bg: #e7d893;
  --theme-imessage-received-text: var(--color-black);
  --theme-graphic-icon: #f3e677;
  --theme-graphic-line: #f3e677;
}
html[data-color-variant='lavender'] {
  --theme-bg: var(--color-lavender);
  --theme-text: var(--color-black);
  --theme-accent: var(--color-pine);
  --theme-on-accent: var(--color-off-white);
  --theme-graphic-icon: #9d7eaf;
  --theme-graphic-line: #9d7eaf;
}
html[data-color-variant='cornflower'] {
  --theme-bg: var(--color-cornflower);
  --theme-text: var(--color-black);
  --theme-accent: var(--color-navy);
  --theme-on-accent: var(--color-off-white);
  --theme-graphic-icon: #5898f3;
  --theme-graphic-line: #5898f3;
}
html[data-color-variant='mint'] {
  --theme-bg: var(--color-mint);
  --theme-text: var(--color-black);
  --theme-accent: var(--color-pine);
  --theme-on-accent: var(--color-off-white);
  /* Mint is near-white, so its self-multiply (#d3ebce) is barely visible.
     Darkened a step further (toward a soft mint-green) so the icons read. */
  --theme-graphic-icon: #a8cba0;
  --theme-graphic-line: #a8cba0;
}

/* ── Mono Color mode (light bg; the color "takes over all the text") ── */
html[data-color-variant='orange'] {
  --theme-bg: var(--color-neutral-50);
  --theme-accent: var(--color-marigold);
}

/* ════════════════ Mode derivations ════════════════ */

html[data-color-mode='dark'] {
  /* FAQ/footer surfaces lift the dark bg with an off-white overlay; the
     +/- toggle picks up the accent (e.g. lavender on pine). */
  --theme-surface: color-mix(in srgb, var(--color-off-white) 9%, var(--theme-bg));
  --theme-rule: color-mix(in srgb, var(--color-off-white) 16%, transparent);
  --theme-faq-expand: color-mix(in srgb, var(--theme-text) 80%, transparent);
  --theme-toggle-bg: var(--theme-accent);
  --theme-toggle-icon: var(--color-black);
  /* Solid (mixed into the bg, not transparent) so overlapping glyph paths don't
     double up alpha at their joints. */
  --theme-graphic-icon: color-mix(in srgb, var(--color-off-white) 60%, var(--theme-bg));
  --theme-graphic-line: color-mix(in srgb, var(--color-off-white) 30%, var(--theme-bg));
  /* Dark renders show a single accent pill treatment (e.g. lavender on pine)
     rather than a separate neutral-gray secondary. */
  --theme-cta-secondary-bg: var(--theme-accent);
  --theme-cta-secondary-text: var(--theme-on-accent);
  /* Dark nav: a faint black top-down gradient in place of the white one. */
  --theme-nav-bg: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
}

html[data-color-mode='mono'] {
  --theme-text: var(--theme-accent);
  --theme-text-muted: color-mix(in srgb, var(--theme-accent) 70%, transparent);
  --theme-rule: color-mix(in srgb, var(--theme-accent) 20%, transparent);
  --theme-faq-text: var(--theme-accent);
  --theme-faq-text-muted: color-mix(in srgb, var(--theme-accent) 70%, transparent);
  --theme-faq-expand: var(--theme-accent);
  --theme-toggle-bg: color-mix(in srgb, var(--theme-accent) 14%, var(--theme-bg));
  --theme-toggle-icon: var(--theme-accent);
  /* Solid (mixed into the bg, not transparent) so overlapping glyph paths don't
     double up alpha at their joints. */
  --theme-graphic-icon: color-mix(in srgb, var(--theme-accent) 60%, var(--theme-bg));
  --theme-graphic-line: color-mix(in srgb, var(--theme-accent) 30%, var(--theme-bg));
  --theme-logo: var(--theme-accent);
  --theme-cta-bg: var(--theme-accent);
  --theme-cta-text: var(--color-neutral-50);
}

/* ════════════════ App-density derivations (signed-in app only) ════════════════ */

/*
 * Dense UI (settings rows, cards, sheets) can't sit directly on the marketing
 * --theme-surface (text@5% over bg) — too little separation for card-on-page
 * layering, and unreadable on the saturated fill variants. These three tokens
 * give app routes their own surface ramp per mode; the compat bridge in
 * tokens-compat.css maps the old semantic names onto them.
 */
html[data-app-theme] {
  /* default + mono (light neutrals): white cards on the cream page. */
  --theme-app-surface: #ffffff;
  --theme-app-surface-2: color-mix(in srgb, var(--theme-text) 4%, var(--theme-bg));
  --theme-app-pill: color-mix(in srgb, var(--theme-text) 7%, var(--theme-bg));
}
html[data-app-theme][data-color-mode='dark'] {
  --theme-app-surface: color-mix(in srgb, var(--color-off-white) 6%, var(--theme-bg));
  --theme-app-surface-2: color-mix(in srgb, var(--color-off-white) 10%, var(--theme-bg));
  --theme-app-pill: color-mix(in srgb, var(--color-off-white) 9%, var(--theme-bg));
}
html[data-app-theme][data-color-mode='fill'] {
  /* Fill variants: cards lift toward white so dense text sits on a
     near-neutral while the pastel stays as the page chrome. */
  --theme-app-surface: color-mix(in srgb, #ffffff 72%, var(--theme-bg));
  --theme-app-surface-2: color-mix(in srgb, #ffffff 45%, var(--theme-bg));
  --theme-app-pill: color-mix(in srgb, var(--theme-text) 8%, var(--theme-bg));
}
html[data-app-theme][data-color-mode='mono'] {
  /* Mono lets the accent "take over all the text" on marketing display
     surfaces; in dense app UI that reads as all-orange body copy. Keep body
     text ink and let the accent color the controls (toggles, pills, active
     states) instead. */
  --theme-text: var(--color-black);
  --theme-text-muted: color-mix(in srgb, var(--color-black) 62%, transparent);
}

/* ════════════════ Document-level side effects (marketing only) ════════════════ */

html[data-marketing],
html[data-marketing] body {
  background: var(--theme-bg);
  /* Fade the document/overscroll background in lockstep with .page and the
     sections (all 0.4s) so switching variants doesn't snap the canvas while
     the content crossfades, which read as a seam/flash at the scroll edges.
     Honors prefers-reduced-motion (forced near-instant in globals.css). */
  transition: background-color 0.4s ease;
}
/* Dark applies document-wide (marketing AND app) so every light-dark() value,
   native form control, and scrollbar resolves dark on the Black variant. The
   setup flow opts back out with a scoped `color-scheme: light` on its root. */
html[data-color-mode='dark'] {
  color-scheme: dark;
}

/*!******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./components/landing/landing-fonts.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: 'ABC Diatype';
  src: url('/fonts/abc-diatype/ABCDiatype-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ABC Diatype';
  src: url('/fonts/abc-diatype/ABCDiatype-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./app/globals.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
/*
 * Global styles — resets, base typography, reusable utility classes.
 * Tokens come from ./tokens.css (imported ahead of this file in app/layout.tsx).
 *
 * The typography utility classes defined here (.text-heading-lg-medium, etc.)
 * are intended to be consumed from CSS Modules via `composes: foo from global;`
 * or applied directly via className when mixing with module classes.
 */

/* ----- Modern CSS reset (tuned) ----- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

html {
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-p1-size);
  line-height: var(--font-p1-lh);
  letter-spacing: var(--font-p1-tracking);
  color: var(--color-black);
  background: var(--color-neutral-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*
 * Overscroll background — the area you see when you elastic-scroll
 * past the top/bottom of the page (iOS Safari rubber-band, macOS
 * trackpad bounce, Chrome on Android pull-down). Both the document
 * element and the body need a matching colour because different
 * browsers paint the overscroll region from different sources.
 *
 * Marketing routes paint --theme-bg via theme-modes.css. App-shell
 * routes paint the same variant canvas here so overscroll matches the
 * page on every picked color scheme.
 */
html {
  background: var(--color-neutral-50);
}

html[data-app-shell],
html[data-app-shell] body {
  background: var(--theme-bg);
}

/*
 * Authenticated routes mount the recovery banner above AppShell. Keep both in
 * one viewport-height column so the shell fills the space left by the banner
 * instead of adding another full viewport below it.
 */
html[data-app-theme] #app-root {
  display: flex;
  height: 100dvh;
  flex-direction: column;
  overflow: clip;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

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

ul,
ol {
  list-style: none;
}

:focus {
  outline: none;
}

html:not([data-input-modality='pointer']) :focus-visible {
  outline: 1px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
}

html[data-input-modality='pointer'] :focus,
html[data-input-modality='pointer'] :focus-visible {
  outline: none !important;
}

/* ----- Typography utility classes (composable from CSS Modules) -----
 * Usage in a .module.css file:
 *   .title { composes: text-h1 from global; color: var(--color-text); }
 *
 * These are responsive — mobile sizes apply below 900px.
 */

.text-h1 {
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.8px;
  font-weight: 700;
}

.text-h2 {
  font-size: 30px;
  line-height: 36px;
  letter-spacing: -0.5px;
  font-weight: 700;
}

.text-h3 {
  font-size: 20px;
  line-height: 29px;
  letter-spacing: -0.4px;
  font-weight: 700;
}

.text-h3-regular {
  font-size: 20px;
  line-height: 29px;
  letter-spacing: -0.4px;
  font-weight: 400;
}

.text-p1 {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: 0.3px;
  font-weight: 400;
}

.text-p2 {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  font-weight: 400;
}

@media (min-width: 900px) {
  .text-h1 {
    font-size: 64px;
    line-height: 68.48px;
    letter-spacing: -1.28px;
  }

  .text-h2 {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -0.6px;
  }

  .text-h3 {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: -0.5px;
  }

  .text-h3-regular {
    font-size: 24px;
    line-height: 34px;
    letter-spacing: -0.5px;
  }
}

/*
 * Shared `breathe` keyframe — a subtle 1.5% scale loop used by hero CTA
 * pills (homepage "Text Caddy" sign-in pill, onboarding "Continue in
 * iMessage"). Lives globally so both surfaces resolve the same
 * definition by name; CSS Modules fall back to global keyframes when no
 * local one is found, so `animation: breathe ...` in any module file
 * matches this rule.
 */
@keyframes breathe {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.015);
  }
}

/* Screen-reader-only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 899.98px) {
  html[data-mobile-sheet-presenting],
  html[data-mobile-sheet-presenting] body {
    background: #000;
  }
}

/* ----- View Transitions API ----- *
 * App-shell tab nav (Home/Settings) tags the `<AppCard>` body
 * with `view-transition-name: app-card-body`. These
 * pseudo-element rules tune the crossfade so it feels snappy rather
 * than mushy. They have to live globally because CSS Modules can't
 * compile non-class-anchored selectors. Browsers without the API just
 * skip the pseudo-elements entirely; navigation falls back to an
 * instant swap. */
::view-transition-old(app-card-body),
::view-transition-new(app-card-body) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}

/*
 * App-shell chrome (desktop header / mobile tab bar) opts out of the
 * crossfade entirely. Without this, the browser snapshots both the old
 * and new chrome (each with a different active tab) into the default
 * `root` group and crossfades them — which reads as a flash of the
 * active-tab color and the bar's surface. The named element still
 * participates in the transition lifecycle, but the old/new
 * pseudo-elements skip animation and snap to the new state.
 */
::view-transition-old(app-header),
::view-transition-new(app-header),
::view-transition-old(bottom-tabs),
::view-transition-new(bottom-tabs) {
  animation: none;
}

/* ----- prefers-reduced-motion -----
 * Users who have reduced-motion enabled in their OS get near-instant
 * transitions and no keyframe animations. Covers every transition + @keyframes
 * declared anywhere in the app (Button, Toggle, Card, ChatBubble typing
 * indicator, etc.). Preserve scrolling behavior so the
 * system scroll feels normal.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/*!*********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/ui/ClickyPillButton.module.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************************************/
.ClickyPillButton_button__AOx_7 {
  /* Neutral by default — the page accent (--color-brand → --theme-accent on
     colored variants) melts into accent-tinted surfaces; call sites opt into
     color (e.g. red for destructive) via accentColor. */
  --clicky-pill-color: var(--color-text-primary);

  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-family);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.ClickyPillButton_button__AOx_7:disabled {
  cursor: default;
  opacity: 0.74;
}

.ClickyPillButton_sm__0GNUz {
  min-height: 30px;
  gap: var(--space-1);
  padding: 6px 11px;
  font-size: var(--font-body-sm-size);
  line-height: var(--font-body-sm-line-height);
  letter-spacing: var(--font-body-sm-tracking);
}

.ClickyPillButton_md__p4UpO {
  min-height: 36px;
  gap: 6px;
  padding: 7px 15px;
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  letter-spacing: var(--font-body-md-tracking);
}

.ClickyPillButton_lg__5j8Bp {
  width: 100%;
  min-height: 48px;
  gap: var(--space-2);
  font-size: var(--font-body-md-size);
  line-height: var(--font-body-md-line-height);
  letter-spacing: var(--font-body-md-tracking);
}

.ClickyPillButton_soft__PW_qv {
  border: 1px solid color-mix(in srgb, var(--clicky-pill-color) 8%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--clicky-pill-color) 10%, transparent) 0%,
    color-mix(in srgb, var(--clicky-pill-color) 7%, transparent) 100%
  );
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.08)),
    0 1px 1px rgba(0, 0, 0, 0.03);
  color: var(--clicky-pill-text-color, var(--clicky-pill-color));
}

.ClickyPillButton_soft__PW_qv:hover {
  border-color: color-mix(in srgb, var(--clicky-pill-color) 14%, transparent);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--clicky-pill-color) 13%, transparent) 0%,
    color-mix(in srgb, var(--clicky-pill-color) 9%, transparent) 100%
  );
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.66), rgba(255, 255, 255, 0.1)),
    0 1px 3px rgba(0, 0, 0, 0.05);
}

.ClickyPillButton_soft__PW_qv:active {
  transform: scale(0.985);
  box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.06),
    0 1px 1px rgba(0, 0, 0, 0.03);
}

.ClickyPillButton_solid__tvqRi {
  border: 1px solid color-mix(in srgb, var(--clicky-pill-color) 72%, white 28%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--clicky-pill-color) 82%, white 18%) 0%,
    color-mix(in srgb, var(--clicky-pill-color) 92%, white 8%) 100%
  );
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.72)),
    inset 0 -1px 0 light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.08)),
    0 1px 2px rgba(0, 0, 0, 0.1);
  color: var(--clicky-pill-text-color, var(--color-bg-card));
}

.ClickyPillButton_solid__tvqRi:hover {
  border-color: color-mix(in srgb, var(--clicky-pill-color) 76%, white 24%);
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--clicky-pill-color) 80%, white 20%) 0%,
    color-mix(in srgb, var(--clicky-pill-color) 90%, white 10%) 100%
  );
  box-shadow:
    inset 0 1px 0 light-dark(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.78)),
    inset 0 -1px 0 light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)),
    0 1px 4px rgba(0, 0, 0, 0.12);
}

.ClickyPillButton_solid__tvqRi:active {
  transform: translateY(0.5px) scale(0.998);
  box-shadow:
    inset 0 1px 2px light-dark(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)),
    0 1px 1px rgba(0, 0, 0, 0.08);
}

.ClickyPillButton_icon__v4WR_ {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.ClickyPillButton_label__nlZzt {
  min-width: 0;
}

.ClickyPillButton_iconOnly__fjULL.ClickyPillButton_sm__0GNUz {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  gap: 0;
}

.ClickyPillButton_iconOnly__fjULL .ClickyPillButton_label__nlZzt {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ClickyPillButton_mobileIcon__nwEp0 {
  display: none;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

@media (max-width: 899.98px) {
  .ClickyPillButton_hasMobileIcon__4buSM.ClickyPillButton_sm__0GNUz {
    width: 30px;
    height: 30px;
    min-height: 30px;
    padding: 0;
    gap: 0;
  }

  .ClickyPillButton_hasMobileIcon__4buSM .ClickyPillButton_icon__v4WR_,
  .ClickyPillButton_hasMobileIcon__4buSM .ClickyPillButton_label__nlZzt {
    display: none;
  }

  .ClickyPillButton_hasMobileIcon__4buSM .ClickyPillButton_mobileIcon__nwEp0 {
    display: inline-flex;
  }
}

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

  .ClickyPillButton_soft__PW_qv:active,
  .ClickyPillButton_solid__tvqRi:active {
    transform: none;
  }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../../node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[2]!../../node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[5].use[3]!./components/ui/SitewideBanner.module.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************************/
/*
 * Public-site recovery strip — theme-token surface so it reads on every
 * marketing color variant. Signed-in recovery is owned by AppRecoveryBanner.
 */

.SitewideBanner_banner__oURZ0 {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 10px var(--margin);
  background: color-mix(in srgb, var(--theme-accent) 22%, var(--theme-bg));
  border-bottom: 1px solid color-mix(in srgb, var(--theme-text) 10%, transparent);
}

.SitewideBanner_content__1GacD {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.SitewideBanner_message__gM96P {
  color: var(--color-text-primary);
  margin: 0;
}

@media (max-width: 899.98px) {
  .SitewideBanner_banner__oURZ0 {
    padding: calc(10px + env(safe-area-inset-top, 0px)) 30px 10px;
  }
}