/* ds: fonts */
/* Clickorio typefaces.
   Display: Plus Jakarta Sans (geometric-humanist, warm apertures) — substitute for the
   wordmark's proprietary geometric sans. Body/UI: Inter.
   Served from Google Fonts; swap these @import lines for self-hosted @font-face rules
   if the real display face (woff2) is supplied. */
.clk-about{--font-display:"Plus Jakarta Sans","Inter",system-ui,sans-serif;--font-sans:"Inter",system-ui,-apple-system,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,monospace}

/* ds: colors */
/* Clickorio color system — sampled from the supplied logo files.
   Brand purple #482870, cursor indigo #24249C, arc coral #FC786C.
   Every neutral is plum-tinted; nothing here is a cool grey or a pure black. */
.clk-about{
  /* ---- brand ramp ---- */
  --purple-950:#1B0F2B;
  --purple-900:#2A1642;
  --purple-800:#3A1F5C;
  --purple-700:#482870; /* brand primary — sampled from logo lockup background */
  --purple-600:#5C3689;
  --purple-500:#7247A5;
  --purple-400:#8460A8; /* inner cursor highlight in the mark */
  --purple-200:#C9B6DE;
  --purple-100:#E4D8EF;
  --purple-050:#F1EAF8;

  --indigo-700:#1C1C7E;
  --indigo-600:#24249C; /* cursor arrow */
  --indigo-400:#5B5BC9;
  --indigo-050:#E7E7F6;

  --coral-600:#E0503F;
  --coral-400:#FC786C; /* arc accent */
  --coral-200:#FFC0B8;
  --coral-050:#FFEDEA;

  /* ---- plum-tinted neutral ladder ---- */
  --ink-950:#171021;
  --ink-900:#241A31;
  --ink-800:#332843;
  --ink-600:#5A5266;
  --ink-400:#8A8194;
  --ink-200:#C4BCCE;
  --ink-100:#E3DEEA;
  --ink-050:#F4F1F8;
  --white-warm:#FBFAFD;

  /* ---- semantic surfaces ---- */
  --canvas:var(--white-warm);
  --canvas-soft:var(--ink-050);
  --canvas-tint:var(--purple-050);
  --canvas-inverse:var(--purple-700);
  --canvas-ink:var(--ink-950);

  /* ---- semantic text ---- */
  --ink:var(--ink-950);
  --ink-soft:var(--ink-900);
  --ink-mid:var(--ink-800);
  --body:var(--ink-600);
  --body-mid:var(--ink-400);
  --mute:var(--ink-200);
  --on-primary:var(--white-warm);
  --on-inverse:var(--white-warm);
  --on-inverse-mute:var(--purple-200);

  /* ---- semantic action ---- */
  --primary:var(--purple-700);
  --primary-hover:var(--purple-800);
  --primary-press:var(--purple-900);
  --primary-soft:var(--purple-050);
  --accent:var(--coral-400);
  --accent-hover:var(--coral-600);
  --accent-soft:var(--coral-050);
  --link:var(--purple-700);
  --link-hover:var(--purple-900);

  /* ---- borders ---- */
  --border-strong:var(--ink-950);
  --border:var(--ink-100);
  --border-mute:var(--ink-050);
  --border-brand:var(--purple-700);
  --focus-ring:var(--indigo-600);

  /* ---- status (intentional addition: the dashboard surfaces need it) ---- */
  --success:#1F7A5C;--success-soft:#E4F2ED;
  --warning:#B4661A;--warning-soft:#FBEEDF;
  --danger:#C0392F;--danger-soft:#FBE9E7;
  --info:var(--indigo-600);--info-soft:var(--indigo-050);
}

/* ds: typography */
/* Clickorio type scale.
   Display sizes are set in --font-display at weight 500; everything else is Inter.
   Sizes / line-heights / tracking are literal — do not snap to a grid. */
.clk-about{
  --fs-display-xl:56px;--lh-display-xl:56px;--ls-display-xl:0px;
  --fs-display-lg:48px;--lh-display-lg:48px;--ls-display-lg:0px;
  --fs-display-md:32px;--lh-display-md:36px;--ls-display-md:1px;
  --fs-display-sub-lg:48px;--lh-display-sub-lg:49.92px;--ls-display-sub-lg:0px;
  --fs-display-sub-md:32px;--lh-display-sub-md:40px;--ls-display-sub-md:0px;
  --fs-display-sub-sm:24px;--lh-display-sub-sm:30px;--ls-display-sub-sm:-0.6px;
  --fs-display-xs:20px;--lh-display-xs:25px;--ls-display-xs:-0.5px;
  --fs-body-lg:20px;--lh-body-lg:30px;--ls-body-lg:-0.2px;
  --fs-body-md:18px;--lh-body-md:27px;--ls-body-md:0px;
  --fs-body-sm:16px;--lh-body-sm:24px;--ls-body-sm:0px;
  --fs-caption:14px;--lh-caption:21px;--ls-caption:0px;
  --fs-eyebrow:14px;--lh-eyebrow:14px;--ls-eyebrow:1px;
  --fs-button-md:18px;--lh-button-md:27px;--ls-button-md:0px;
  --fs-button-sm:14.4px;--lh-button-sm:14.4px;--ls-button-sm:0.144px;

  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */

  /* composed roles */
  --type-display-xl:var(--fw-medium) var(--fs-display-xl)/var(--lh-display-xl) var(--font-display);
  --type-display-lg:var(--fw-medium) var(--fs-display-lg)/var(--lh-display-lg) var(--font-display);
  --type-display-md:var(--fw-medium) var(--fs-display-md)/var(--lh-display-md) var(--font-display);
  --type-eyebrow:var(--fw-medium) var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-display);
  --type-display-sub-lg:var(--fw-medium) var(--fs-display-sub-lg)/var(--lh-display-sub-lg) var(--font-sans);
  --type-display-sub-md:var(--fw-regular) var(--fs-display-sub-md)/var(--lh-display-sub-md) var(--font-sans);
  --type-display-sub-sm:var(--fw-semibold) var(--fs-display-sub-sm)/var(--lh-display-sub-sm) var(--font-sans);
  --type-display-xs:var(--fw-bold) var(--fs-display-xs)/var(--lh-display-xs) var(--font-sans);
  --type-body-lg:var(--fw-regular) var(--fs-body-lg)/var(--lh-body-lg) var(--font-sans);
  --type-body-md:var(--fw-regular) var(--fs-body-md)/var(--lh-body-md) var(--font-sans);
  --type-body-md-strong:var(--fw-semibold) var(--fs-body-md)/var(--lh-body-md) var(--font-sans);
  --type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body-sm) var(--font-sans);
  --type-body-sm-strong:var(--fw-semibold) var(--fs-body-sm)/var(--lh-body-sm) var(--font-sans);
  --type-caption:var(--fw-regular) var(--fs-caption)/var(--lh-caption) var(--font-sans);
  --type-button-md:var(--fw-semibold) var(--fs-button-md)/var(--lh-button-md) var(--font-sans);
  --type-button-sm:var(--fw-bold) var(--fs-button-sm)/var(--lh-button-sm) var(--font-sans);
}

/* ds: spacing */
/* 4px base unit. */
.clk-about{
  --space-xxs:2px;--space-xs:4px;--space-sm:8px;--space-md:12px;--space-lg:16px;
  --space-xl:24px;--space-2xl:32px;--space-3xl:48px;--space-4xl:64px;--space-5xl:96px;
  --section-y:var(--space-4xl);--section-x:var(--space-xl);
  --card-pad:var(--space-xl);
  --container:1280px;--container-narrow:768px;
  --bp-tablet:768px;--bp-desktop:1024px;
}

/* ds: radius */
/* 12px is the signature radius — buttons and cards share it. Never pills for CTAs. */
.clk-about{--radius-none:0px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-pill:9999px;--radius-full:9999px}

/* ds: elevation */
/* Elevation is carried mostly by surface contrast, not shadow.
   Shadows are plum-tinted and low-contrast; never neutral black. */
.clk-about{
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border);
  --shadow-sm:0 1px 2px rgba(23,16,33,.06),0 1px 1px rgba(23,16,33,.04);
  --shadow-md:0 4px 12px rgba(23,16,33,.08),0 1px 3px rgba(23,16,33,.05);
  --shadow-lg:0 16px 40px rgba(23,16,33,.12),0 2px 6px rgba(23,16,33,.06);
  --shadow-focus:0 0 0 3px rgba(36,36,156,.28);
}

/* ds: motion */
/* Short, flat, confident. No bounce, no spring, no long fades. */
.clk-about{
  --dur-instant:80ms; /* @kind other */
  --dur-fast:140ms; /* @kind other */
  --dur-base:200ms; /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */
  --ease-in-out:cubic-bezier(.4,0,.2,1); /* @kind other */
  --transition-ui:color var(--dur-fast) var(--ease-standard),background-color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard),transform var(--dur-instant) var(--ease-standard); /* @kind other */
}

/* ds: theme-light */
/* Light theme scope — the counterpart to .theme-dark.
   Add `class="theme-light"` to a section and every component inside it re-skins to the
   light palette. Same token NAMES as the dark scope, so no component code changes:
   the purple ramp is re-declared with values that stay legible as text on light grounds
   (--purple-400 is a text-safe #5C3689 here, not the pale violet used on dark). */
.clk-about{
  --purple-700:#482870; /* @kind color */
  --purple-600:#5C3689; /* @kind color */
  --purple-500:#7247A5; /* @kind color */
  --purple-400:#5C3689; /* @kind color */
  --purple-200:#C9B6DE; /* @kind color */
  --purple-100:#E4D8EF; /* @kind color */
  --purple-050:#F1EAF8; /* @kind color */

  --canvas:#FBFAFD; /* @kind color */
  --canvas-soft:#F4F1F8; /* @kind color */
  --canvas-tint:#F1EAF8; /* @kind color */
  --canvas-ink:#171021; /* @kind color */
  --canvas-inverse:#482870; /* @kind color */
  --surface-card:#FFFFFF; /* @kind color */
  --surface-card-hi:#FBFAFD; /* @kind color */

  --ink:#171021; /* @kind color */
  --ink-soft:#241A31; /* @kind color */
  --ink-mid:#332843; /* @kind color */
  --body:#5A5266; /* @kind color */
  --body-mid:#625C70; /* @kind color */
  --mute:#6B6479; /* @kind color */
  --on-primary:#FBFAFD; /* @kind color */
  --on-inverse:#FBFAFD; /* @kind color */
  --on-inverse-mute:#C9B6DE; /* @kind color */
  --on-brand-text:#482870; /* @kind color */

  --primary:#482870; /* @kind color */
  --primary-hover:#3A1F5C; /* @kind color */
  --primary-press:#2A1642; /* @kind color */
  --primary-soft:#F1EAF8; /* @kind color */
  --accent:#E0503F; /* @kind color */
  --accent-hover:#C9402F; /* @kind color */
  --accent-soft:#FFEDEA; /* @kind color */
  --link:#482870; /* @kind color */
  --link-hover:#2A1642; /* @kind color */

  --border:#E3DEEA; /* @kind color */
  --border-strong:#171021; /* @kind color */
  --border-mute:#F4F1F8; /* @kind color */
  --border-brand:#482870; /* @kind color */
  --focus-ring:#24249C; /* @kind color */

  --success:#1F7A5C;--success-soft:#E4F2ED; /* @kind color */
  --warning:#B4661A;--warning-soft:#FBEEDF; /* @kind color */
  --danger:#C0392F;--danger-soft:#FBE9E7; /* @kind color */
  --info:#24249C;--info-soft:#E7E7F6; /* @kind color */

  --shadow-sm:0 1px 2px rgba(23,16,33,.06); /* @kind shadow */
  --shadow-md:0 6px 20px rgba(23,16,33,.08),0 1px 3px rgba(23,16,33,.05); /* @kind shadow */
  --shadow-lg:0 20px 52px rgba(23,16,33,.12),0 2px 6px rgba(23,16,33,.06); /* @kind shadow */
  --shadow-focus:0 0 0 3px rgba(36,36,156,.22); /* @kind shadow */

  --gradient-brand:linear-gradient(118deg,#5B2E9E 0%,#8B3FA8 42%,#D9615F 78%,#FC786C 100%); /* @kind color */
  --gradient-veil:radial-gradient(60% 60% at 50% 0%,rgba(72,40,112,.06) 0%,rgba(251,250,253,0) 70%); /* @kind color */
}

/* ds: base */
/* Minimal element defaults so a bare page already reads as Clickorio. */
html{-webkit-font-smoothing:antialiased;text-size-adjust:100%}
.clk-about{margin:0;background:var(--canvas);color:var(--body);font:var(--type-body-md);letter-spacing:var(--ls-body-md);text-wrap:pretty}
.clk-about h1, .clk-about h2, .clk-about h3, .clk-about h4, .clk-about h5, .clk-about h6{margin:0;color:var(--ink);font-family:var(--font-display);font-weight:var(--fw-medium)}
.clk-about h1{font:var(--type-display-xl)}
.clk-about h2{font:var(--type-display-lg)}
.clk-about h3{font:var(--type-display-md);letter-spacing:var(--ls-display-md)}
.clk-about h4{font:var(--type-display-sub-sm);letter-spacing:var(--ls-display-sub-sm);font-family:var(--font-sans)}
.clk-about p{margin:0}
.clk-about a{color:var(--link);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;transition:var(--transition-ui)}
.clk-about a:hover{color:var(--link-hover);text-decoration-thickness:2px}
.clk-about strong{font-weight:var(--fw-semibold);color:var(--ink)}
.clk-about code, .clk-about kbd, .clk-about pre{font-family:var(--font-mono);font-size:.9em}
.clk-about::selection{background:var(--purple-100);color:var(--ink)}
.clk-about:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.clk-about hr{border:0;border-top:1px solid var(--border)}


/* page */

html{scroll-behavior:smooth}
body{background:#FAF8FD;margin:0;overflow-x:hidden}
.clk-about{color:#4A3D5C;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.clk-about a{color:#482870}
.clk-about a:hover{color:#2A1642}
.clk-about :focus-visible{outline:3px solid #24249C;outline-offset:3px;border-radius:6px}
.clk-btn{white-space:nowrap}
.clk-arrow{transition:transform 220ms cubic-bezier(.22,1,.36,1)}
.clk-btn:hover .clk-arrow{transform:translateX(4px)}
@keyframes clkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes clkMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes clkSpin{to{transform:rotate(360deg)}}
@keyframes clkPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.2);opacity:0}}
@keyframes clkShimmer{0%{transform:translateX(-120%) skewX(-18deg)}22%,100%{transform:translateX(320%) skewX(-18deg)}}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}}


/* runtime */

    .sc-placeholder{background:color-mix(in srgb,currentColor 8%,transparent);
      border:1px solid color-mix(in srgb,currentColor 50%,transparent);
      border-radius:2px;box-sizing:border-box;overflow:hidden}
    @keyframes sc-shine{0%{background-position:100% 50%}100%{background-position:0% 50%}}
    html.sc-dc-streaming .sc-placeholder,
    html.sc-dc-streaming .sc-interp.sc-missing{position:relative;
      background:color-mix(in srgb,currentColor 5%,transparent);
      border-color:transparent}
    html.sc-dc-streaming .sc-placeholder::before,
    html.sc-dc-streaming .sc-interp.sc-missing::before{content:'';
      position:absolute;inset:0;pointer-events:none;
      background:linear-gradient(90deg,rgba(217,119,87,0) 25%,rgba(247,225,211,.95) 37%,rgba(217,119,87,0) 63%);
      background-size:400% 100%;animation:sc-shine 1.4s ease infinite}
    html.sc-dc-streaming .sc-placeholder:nth-child(n+9 of .sc-placeholder)::before,
    html.sc-dc-streaming .sc-interp.sc-missing:nth-child(n+9 of .sc-interp.sc-missing)::before{animation:none;
      background:color-mix(in srgb,currentColor 8%,transparent)}
    .sc-placeholder-error{padding:4px 8px;font:11px/1.4 ui-monospace,monospace;
      color:color-mix(in srgb,currentColor 70%,transparent);word-break:break-word}
    .sc-interp.sc-missing{display:inline-block;width:2em;height:1em;overflow:hidden;
      vertical-align:text-bottom;background:rgba(255,255,255,.3);border:1px solid rgba(0,0,0,.5);
      border-radius:2px;box-sizing:border-box;color:transparent;
      user-select:none}
    .sc-interp.sc-unresolved{font-family:ui-monospace,monospace;font-size:.85em;
      color:color-mix(in srgb,currentColor 50%,transparent);
      background:color-mix(in srgb,currentColor 10%,transparent);border-radius:3px;
      padding:0 3px}
    .sc-host.sc-has-error{position:relative}
    .sc-logic-error{position:absolute;top:8px;left:8px;z-index:2147483647;max-width:60ch;
      padding:6px 10px;background:#b00020;color:#fff;font:12px/1.4 ui-monospace,monospace;
      border-radius:4px;white-space:pre-wrap;pointer-events:none}
    /* Mirrors PRINT_BASELINE_CSS in apps/web deck-stage-export.ts — keep both
       in sync until dc-runtime regains a build step. */
    @media print {
      @page { margin: 0.5cm; }
      figure, table { break-inside: avoid; }
      #dc-root, #dc-root > .sc-host { height: auto; }
      *, *::before, *::after {
        print-color-adjust: exact; -webkit-print-color-adjust: exact;
        backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
        animation-delay: -99s !important; animation-duration: .001s !important;
        animation-iteration-count: 1 !important; animation-fill-mode: both !important;
        animation-play-state: running !important; transition-duration: 0s !important;
      }
    }
  
/* ── behaviour the design handled in React, done here in CSS ─────────────── */

/* The logo strip holds still while it is being read. */
.clk-about [data-clk-marquee-wrap]:hover [data-clk-marquee],
.clk-about [data-clk-marquee]:focus-within { animation-play-state: paused; }

/* The team card lifts a little under the pointer. */
.clk-about [data-clk-team] { transition: transform 300ms cubic-bezier(.22,1,.36,1); }
@media (hover: hover) {
  .clk-about [data-clk-team]:hover { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .clk-about [data-clk-marquee] { animation: none; }
  .clk-about [data-clk-team] { transition: none; }
}