/* Toupas design tokens: the one source for colour, type, spacing, radii, shadows and motion,
   used by toupas.com (packages/site) and the panel (packages/web). The "Paper" theme: white
   ground, warm greys, one blue accent, Geist for everything. Change a value here, not in a page.

   Geist (SIL Open Font License, fonts/GEIST-LICENSE.txt) is served from our own files, so no
   page loads anything from another site. The two files split Latin and Latin Extended (₹). */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/geist-latin.19f9c92546.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url('/assets/geist-latin-ext.824f485b5d.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Type. One family; code uses the system's monospace, not a second web font. */
  --font-sans: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;   /* 13px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md: 1.0625rem;   /* 17px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: 1.375rem;    /* 22px */
  --text-2xl: 1.75rem;    /* 28px */
  --text-3xl: 2.25rem;    /* 36px */
  --text-4xl: 2.75rem;    /* 44px */
  --text-display: clamp(2.75rem, 7vw, 5.5rem);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.55;
  --tracking-display: -0.04em;
  --tracking-heading: -0.025em;

  /* Spacing, on a 4px step. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Shape. */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 999px;

  /* Layout. */
  --width-page: 1180px;
  --width-text: 760px;
  --width-app: 960px;
  --gutter: 24px;

  /* Motion. */
  --duration-fast: 120ms;
  --duration-normal: 200ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Colour: Paper, light. */
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f6f2;       /* bands, sidebars, table heads */
  --color-surface: #ffffff;         /* cards */
  --color-surface-raised: #fbfaf7;  /* card footers, window bars */
  --color-surface-sunken: #f4f4f5;  /* code, chat bubbles, hover fills: a neutral grey */
  --color-text: #17171a;
  --color-text-muted: #5c5b55;      /* body copy on white: 6.6:1 */
  --color-text-faint: #6f6e67;      /* small labels: 5.2:1 */
  --color-border: #e4e2da;
  --color-border-subtle: #edebe4;
  --color-border-strong: #dad8cf;
  --color-border-dashed: #c9c7bd;
  --color-dot: #d6d4cb;             /* the hero's dot pattern */
  --color-accent: #2449d8;
  --color-accent-hover: #1a36a8;
  --color-accent-soft: #eef2fe;
  --color-on-accent: #ffffff;
  --color-ink: #17171a;             /* dark cards and the primary dark button */
  --color-on-ink: #f6f5f1;
  --color-on-ink-muted: #b9b8b0;
  --color-ok: #1f9d55;              /* dots and icons */
  --color-ok-text: #2c6e47;
  --color-ok-soft: #e6f5ec;
  --color-ok-border: #cdebd8;
  --color-warn: #a16207;
  --color-warn-soft: #fdf3dc;
  --color-danger: #c2372b;
  --color-danger-soft: #fdecea;
  --color-focus: #2449d8;
  /* App tiles: a soft fill each app gets from its name, with --color-text on top. */
  --color-tile-1: #e8eefd;
  --color-tile-2: #ffe9cc;
  --color-tile-3: #ddf3e4;
  --color-tile-4: #efe5fb;
  --color-tile-5: #fde4ea;

  /* Elevation. */
  --shadow-sm: 0 1px 2px rgba(23, 23, 26, 0.04);
  --shadow-md: 0 1px 2px rgba(23, 23, 26, 0.04), 0 8px 24px rgba(23, 23, 26, 0.06);
  --shadow-lg: 0 1px 2px rgba(23, 23, 26, 0.04), 0 20px 50px rgba(23, 23, 26, 0.10);
  --shadow-xl: 0 30px 70px rgba(23, 23, 26, 0.10);

  color-scheme: light;
}

/* Paper, dark: the same roles, for people whose system is set to dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #141413;
    --color-bg-subtle: #1a1a18;
    --color-surface: #1d1d1b;
    --color-surface-raised: #222220;
    --color-surface-sunken: #262624;
    --color-text: #ededea;
    --color-text-muted: #a8a7a0;
    --color-text-faint: #96958e;
    --color-border: #2e2e2b;
    --color-border-subtle: #262624;
    --color-border-strong: #3a3a36;
    --color-border-dashed: #4a4a45;
    --color-dot: #34342f;
    --color-accent: #7f9cff;
    --color-accent-hover: #a3b8ff;
    --color-accent-soft: #1f2741;
    --color-on-accent: #0f1120;
    --color-ink: #ededea;
    --color-on-ink: #141413;
    --color-on-ink-muted: #55544f;
    --color-ok: #4cc47f;
    --color-ok-text: #7fd9a3;
    --color-ok-soft: #16271d;
    --color-ok-border: #234a33;
    --color-warn: #e0b04f;
    --color-warn-soft: #2b2416;
    --color-danger: #ff7b6e;
    --color-danger-soft: #2e1a18;
    --color-focus: #7f9cff;
    --color-tile-1: #1f2741;
    --color-tile-2: #33261a;
    --color-tile-3: #16271d;
    --color-tile-4: #2a2138;
    --color-tile-5: #36202a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}

/* toupas.com (plan M8.5), the Paper theme. Every colour, size and radius comes from the design
   tokens (packages/shared/styles/tokens.css), which the build puts in front of this file. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-hover); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
code, pre { font-family: var(--font-code); font-size: 0.875em; }
code { background: var(--color-surface-sunken); padding: 0.1em 0.4em; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
pre { background: var(--color-surface-sunken); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); overflow-x: auto; line-height: 1.5; }
pre code { background: none; padding: 0; overflow-wrap: normal; }
h1, h2, h3 { line-height: var(--leading-snug); font-weight: var(--weight-semibold); }
h1 { font-size: var(--text-4xl); letter-spacing: var(--tracking-heading); line-height: var(--leading-tight); margin: 0 0 var(--space-4); }
h2 { font-size: var(--text-2xl); letter-spacing: var(--tracking-heading); margin: var(--space-12) 0 var(--space-3); }
h3 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); }
.muted { color: var(--color-text-muted); }
.wrap { max-width: var(--width-page); margin: 0 auto; padding: 0 var(--gutter); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md);
  font: inherit; font-size: var(--text-base); font-weight: var(--weight-semibold);
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); color: var(--color-on-accent); }
.btn-ink { background: var(--color-ink); color: var(--color-on-ink); }
.btn-ink:hover { color: var(--color-on-ink); opacity: 0.9; }
.btn-outline { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }
.btn-outline:hover { color: var(--color-text); border-color: var(--color-text-faint); }
.btn svg { flex: none; }

/* Header and footer */
header.site .wrap { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--color-text); text-decoration: none; font-weight: var(--weight-semibold); font-size: 1.1875rem; }
.brand:hover { color: var(--color-text); }
.brand svg { flex: none; }
header.site nav { display: flex; align-items: center; gap: var(--space-6); flex-wrap: wrap; font-size: 0.9375rem; }
header.site nav a:not(.btn) { color: var(--color-text-muted); text-decoration: none; }
header.site nav a:not(.btn):hover, header.site nav a[aria-current] { color: var(--color-text); }
header.site nav .btn { min-height: 40px; padding: 0 var(--space-4); font-size: 0.9375rem; font-weight: var(--weight-medium); }
footer.site { border-top: 1px solid var(--color-border-subtle); color: var(--color-text-muted); font-size: var(--text-sm); }
footer.site .wrap { padding-top: var(--space-6); padding-bottom: var(--space-10); display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; }
footer.site p { margin: 0; }
footer.site nav { display: flex; gap: var(--space-5); flex-wrap: wrap; }
footer.site nav a { color: var(--color-text-muted); }

/* Text pages: docs, pricing, policies */
main.page { max-width: var(--width-text); margin: 0 auto; padding: var(--space-12) var(--gutter) var(--space-20); }
.lead { font-size: var(--text-lg); line-height: var(--leading-normal); color: var(--color-text-muted); }
.note { color: var(--color-text-muted); margin-top: 0; }
.crumbs { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.table { overflow-x: auto; margin: var(--space-4) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
table { border-collapse: collapse; width: 100%; font-size: 0.9375rem; }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); }
tr:last-child td { border-bottom: 0; }
th { color: var(--color-text-faint); font-weight: var(--weight-semibold); font-size: var(--text-sm); background: var(--color-bg-subtle); }
tr:target { background: var(--color-accent-soft); }
.prices td.price { white-space: nowrap; font-weight: var(--weight-semibold); }
.currency { display: inline-flex; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); overflow: hidden; margin: var(--space-2) 0; }
.currency button { border: 0; background: var(--color-surface); color: var(--color-text); font: inherit; padding: var(--space-2) var(--space-4); min-height: 40px; cursor: pointer; }
.currency button[aria-pressed="true"] { background: var(--color-ink); color: var(--color-on-ink); }
.doclist { list-style: none; padding: 0; border-top: 1px solid var(--color-border); }
.doclist li { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 2px; }
.doclist a { font-weight: var(--weight-semibold); text-decoration: none; }

/* The message for a coding agent, in a chat-style box */
.composer { width: 100%; max-width: 720px; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); margin: var(--space-6) 0; }
.composer-label { margin: 0; padding: var(--space-5) var(--space-6) var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em; }
.composer-text { margin: 0; padding: 0 var(--space-6) var(--space-5); font-size: var(--text-lg); line-height: 1.45; overflow-wrap: anywhere; }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6); border-top: 1px solid var(--color-border-subtle); background: var(--color-surface-raised); border-radius: 0 0 var(--radius-xl) var(--radius-xl); }
.composer-bar .btn { margin-left: auto; }
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-xs); color: var(--color-text-muted); }
.chip { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: var(--radius-full); padding: 4px 10px; }
.caret { display: inline-block; width: 2px; height: 1.1em; vertical-align: -0.18em; margin-left: 3px; background: var(--color-text); animation: blink 1.1s steps(1) infinite; }

/* Home: hero */
.hero { position: relative; overflow: hidden; }
.hero-dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(var(--color-dot) 1.2px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 60% 70% at 50% 40%, #000 15%, transparent 72%);
}
.hero-main { position: relative; max-width: 900px; margin: 0 auto; padding: var(--space-24) var(--gutter) var(--space-16); text-align: center; display: flex; flex-direction: column; align-items: center; }
.pill { margin: 0 0 var(--space-6); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 10px; background: var(--color-surface); border: 1px solid var(--color-border); padding: 6px 12px; border-radius: var(--radius-full); }
.live-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ok); display: inline-block; }
.live-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--color-ok); animation: ring 1.8s ease-out infinite; }
.display { margin: 0; font-size: var(--text-display); line-height: 1; letter-spacing: var(--tracking-display); }
.display .live { position: relative; white-space: nowrap; color: var(--color-accent); }
.display .live svg { position: absolute; left: -2%; bottom: -0.16em; width: 104%; height: 0.24em; overflow: visible; }
.display .live path { stroke: var(--color-accent); opacity: 0.35; stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 1.2s 0.4s var(--ease-out) forwards; }
.hero .lead { margin: var(--space-6) 0 0; max-width: 600px; }
.hero .composer { margin: var(--space-10) 0 0; }
.hero-alt { margin: var(--space-5) 0 0; font-size: 0.9375rem; color: var(--color-text-muted); }

.journey { position: relative; max-width: 1000px; margin: 0 auto; padding: 0 var(--gutter) var(--space-24); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-4); }
.journey-card { flex: 1 1 260px; min-width: 0; max-width: 320px; border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.journey-card p { margin: 0; }
.journey-card strong { display: block; margin-top: var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.journey-from { background: var(--color-bg-subtle); border: 1px dashed var(--color-border-dashed); }
.journey-from p { color: var(--color-text-faint); text-decoration: line-through; }
.journey-to { background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-md); }
.journey-to p { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.journey-arrow { flex: 0 1 180px; display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--color-accent); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.journey-arrow .flow { stroke-dasharray: 6 8; animation: flow 1s linear infinite; }

/* Home: sections */
.section { padding: var(--space-20) 0; }
.band { background: var(--color-bg-subtle); border-top: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8) var(--space-8) var(--space-8); }
.card h3 { margin: var(--space-4) 0 var(--space-2); font-size: var(--text-xl); }
.card p { margin: 0; color: var(--color-text-muted); }
.tag { display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-accent); background: var(--color-accent-soft); border-radius: var(--radius-full); padding: 4px 10px; }
.tag-ok { color: var(--color-ok-text); background: var(--color-ok-soft); }
.split { display: flex; flex-wrap: wrap; gap: var(--space-12); }
.split > h2 { flex: 1 1 300px; min-width: 0; margin: 0; font-size: var(--text-3xl); line-height: 1.15; }
.features { flex: 2 1 560px; min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: var(--space-10); }
.features div { padding: var(--space-5) 0; border-top: 1px solid var(--color-border); }
.features h3 { margin: 0 0 var(--space-1); font-size: 1.125rem; }
.features p { margin: 0; font-size: 0.9375rem; color: var(--color-text-muted); }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.plan { border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: var(--space-8); }
.plan p { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; }
.plan .amount { margin: 6px 0 10px; font-size: 2.125rem; font-weight: var(--weight-semibold); letter-spacing: -0.02em; color: var(--color-text); }
.plan .per { font-size: 0.9375rem; font-weight: var(--weight-regular); color: var(--color-text-muted); }
.plan-ink { background: var(--color-ink); border-color: var(--color-ink); }
.plan-ink p, .plan-ink .per { color: var(--color-on-ink-muted); }
.plan-ink .amount { color: var(--color-on-ink); }
.plans-note { margin: var(--space-5) 0 0; font-size: 0.9375rem; color: var(--color-text-muted); }
.home-agents { padding-bottom: var(--space-16); }

@keyframes blink { 50% { opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } }
@keyframes flow { to { stroke-dashoffset: -14; } }
@media (prefers-reduced-motion: reduce) {
  .caret, .live-dot::after, .journey-arrow .flow { animation: none; }
  .display .live path { animation: none; stroke-dashoffset: 0; }
}

@media (max-width: 560px) {
  h1 { font-size: var(--text-3xl); }
  main.page { padding-top: var(--space-8); }
  .hero-main { padding-top: var(--space-16); }
  .composer-text { font-size: var(--text-md); }
  .composer-bar { padding-left: var(--space-4); }
  .composer-bar .btn { width: 100%; }
  .journey-arrow { flex-basis: 100%; }
  .card, .plan { padding: var(--space-6); }
}