/* The styles the pages of Cronum Work's modules share (public/work/<module>/): the frame, the tour, the
   examples, the plans and the footer. Each page keeps inline only what is its own (its colours and its
   picture of the app), after this file. Published with a fingerprint by scripts/i18n.js (README.md). */
/* Fonts come from this site (assets/fonts/, SIL OFL), never from Google, which would see the visitor's IP */
@font-face { font-family: 'Geist'; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/geist/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; }
@font-face { font-family: 'Geist'; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/geist/geist-latin.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 Mono'; font-weight: 500; font-display: swap; src: url(/assets/fonts/geist-mono/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; }
@font-face { font-family: 'Geist Mono'; font-weight: 500; font-display: swap; src: url(/assets/fonts/geist-mono/geist-mono-latin.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: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-grotesk/space-grotesk-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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; }
@font-face { font-family: 'Space Grotesk'; font-weight: 700; font-display: swap; src: url(/assets/fonts/space-grotesk/space-grotesk-latin.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; }
/* A module's page (brand/README.md): the frame is Cronum Work's, cream and ink with its logo and its
   ultramarine for what belongs to all of Work (the plans band); inside, the module's colour rules,
   as it does inside the app. Yolk only as the dot of "now". Light and dark, like /work/.
   --mod is the module's colour, --mod-strong the one cream text sits on, --mod-ink the one for
   accents and buttons in each theme (ink text on it in the dark). */
:root {
  --yolk: #FFC21A;
  --ink: #16130E;
  --cream: #FFF7E6;
  --stone-dark: #B8AE9F;
  --work-on-dark: #8C9BFF;

  --bg: #FFF7E6;
  --surface: #FFFFFF;
  --fg: #16130E;
  --fg-dim: rgb(22 19 14 / .72);
  --rule: rgb(22 19 14 / .14);
  --work: #2438B8;
  --on-work: #FFF7E6;
  --accent: var(--mod-strong);
  --on-accent: #FFF7E6;
  --accent-wash: color-mix(in srgb, var(--mod) 12%, transparent);
  --panel: #16130E;
  --shadow: 0 22px 40px -26px rgb(22 19 14 / .45);

  --display: 'Space Grotesk', system-ui, sans-serif;
  --sans: 'Geist', system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, monospace;
  --app: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 1.5a2.5 2.5 0 0 0-2.5 2.5v4a2.5 2.5 0 0 0 5 0V4A2.5 2.5 0 0 0 8 1.5ZM3.5 7.5a4.5 4.5 0 0 0 9 0M8 12v2.5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16130E;
    --surface: #1F1B15;
    --fg: #FFF7E6;
    --fg-dim: rgb(255 247 230 / .72);
    --rule: rgb(255 247 230 / .14);
    --work: #8C9BFF;
    --on-work: #16130E;
    --accent: var(--mod-on-dark);
    --on-accent: #16130E;
    --accent-wash: color-mix(in srgb, var(--mod-on-dark) 14%, transparent);
    --panel: #1F1B15;
    --shadow: 0 22px 40px -26px rgb(0 0 0 / .9);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); min-height: 100%; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; /* the AI glow bleeds past the gutter on phones */
}
img, svg { display: block; max-width: 100%; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.rise { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); }

/* ---------- Top bar: Cronum Work's logo, then the module ---------- */
.top {
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
.top.stuck { background: color-mix(in srgb, var(--bg) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: var(--rule); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 18px; }
.crumb { display: flex; align-items: center; gap: 14px; flex: none; color: var(--fg); text-decoration: none; }
.crumb > a:first-child { display: block; color: inherit; }
.logo { height: 30px; width: auto; color: var(--fg); }
.logo-mark { display: none; width: 32px; height: 32px; }
/* "Cronum Work › Tasks": the module belongs to Work */
.crumb-sep { flex: none; width: 9px; height: 16px; color: var(--fg-dim); }
.mod-name { display: flex; align-items: center; gap: 9px; color: var(--fg); font: 700 21px/1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.mod-name img { width: 30px; height: 30px; }
.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 26px); font-weight: 500; font-size: 15px; white-space: nowrap; }
.nav a:not(.btn) { color: var(--fg); text-decoration: none; }
.nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { padding: 10px 16px; font-size: 14px; }
.menu-btn { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 2px solid var(--fg); border-radius: 50%; background: transparent; color: var(--fg); cursor: pointer; }
.menu-btn svg { width: 18px; height: 18px; }
.menu-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
@media (max-width: 1060px) {
  .nav .sec-link { display: none; }
  .menu-btn { display: grid; }
}
/* Side menu: the bar keeps the logo, the sign-up button and this menu's button */
.drawer { position: fixed; inset: 0; z-index: 60; visibility: hidden; transition: visibility 0s .3s; }
.drawer.open { visibility: visible; transition-delay: 0s; }
.drawer-scrim { position: absolute; inset: 0; background: rgb(22 19 14 / .5); opacity: 0; transition: opacity .3s ease; }
.drawer.open .drawer-scrim { opacity: 1; }
.drawer-panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  width: min(320px, 84vw);
  padding: 16px 24px 24px;
  background: var(--panel);
  color: var(--cream);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.drawer.open .drawer-panel { transform: none; }
.drawer-panel a { padding: 16px 0; border-bottom: 1px solid rgb(255 247 230 / .14); color: inherit; font: 600 24px/1.1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.drawer-panel a:hover, .drawer-panel a:focus-visible { color: var(--mod-on-dark); }
.drawer-panel .drawer-mods { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 0; border: 0; }
.drawer-mods a { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border: 1px solid rgb(255 247 230 / .2); border-radius: 999px; font: 500 14px/1 var(--sans); letter-spacing: 0; }
.drawer-mods img { width: 18px; height: 18px; }
.drawer-close { align-self: flex-end; display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px; padding: 0; border: 2px solid rgb(255 247 230 / .3); border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.drawer-close svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  .drawer-scrim, .drawer-panel { transition-duration: .01s; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  .top-in { padding-block: 12px; gap: 12px; }
  .top .logo { display: none; }
  .logo-mark { display: block; }
  .crumb { gap: 10px; }
  .mod-name { font-size: 19px; }
  .mod-name img { width: 26px; height: 26px; }
  .nav { gap: 10px; }
  .nav .signin { display: none; }
  .nav .btn { padding: 8px 13px; font-size: 13px; }
}
@media (max-width: 480px) {
  /* The icon alone says the module; the button and the menu need the room */
  .mod-name span { display: none; }
  .nav .btn { min-width: 0; white-space: normal; line-height: 1.1; text-align: center; }
}
@media (min-width: 1061px) {
  .drawer { display: none; }
}

/* Buttons: a pill in the module's colour, or an outline one beside it */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font: 600 16px/1 var(--sans);
  text-decoration: none;
  transition: transform .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn.ghost { border-color: var(--fg); background: transparent; color: var(--fg); }
.btn svg { width: 16px; height: 16px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
/* A wash of the module's colour behind the hero, fading into the page */
.hero::before { content: ""; position: absolute; inset: -20% -10% 0; background: radial-gradient(55% 60% at 80% 42%, var(--accent-wash), transparent 70%); pointer-events: none; }
.hero-body { position: relative; z-index: 1; padding-block: clamp(32px, 6vw, 80px) clamp(40px, 6vw, 72px); }
@media (min-width: 901px) {
  .hero-copy { max-width: calc(100% - clamp(300px, 34vw, 440px)); }
}
.label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font: 600 12px/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.label img { width: 26px; height: 26px; flex: none; }
.label b { color: var(--fg); font-weight: 600; }
h1 {
  margin: 0;
  max-width: 13ch;
  font: 700 clamp(44px, 7vw, 86px)/0.95 var(--display);
  letter-spacing: -0.05em;
}
.nb { white-space: nowrap; }
/* keeps the full stop with the highlight when the line wraps */
/* inline-block: the box is as tall as the line, not the font, so it never covers the line above */
h1 em {
  display: inline-block;
  margin-top: .1em;
  font-style: normal;
  line-height: .9;
  color: var(--on-accent);
  background: var(--accent);
  padding: 0 .1em .04em;
  border-radius: .14em;
}
.lede { margin: 26px 0 0; max-width: 48ch; font-size: clamp(18px, 2vw, 21px); color: var(--fg-dim); }
.facts { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 22px 0 0; padding: 0; list-style: none; font-size: 14.5px; font-weight: 500; }
.facts li { display: inline-flex; align-items: center; gap: 7px; }
.facts li::before { content: ""; width: 12px; height: 7px; margin-top: -3px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

.hero-art {
  position: absolute;
  right: max(8px, calc((100vw - 1120px) / 2));
  top: 50%;
  width: clamp(300px, 31vw, 410px);
  translate: 0 -50%;
  pointer-events: none;
  /* The icon, then a short chat under it: nothing overlaps, so both bubbles read */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hero-icon { width: 54%; align-self: center; margin-bottom: 14px; rotate: 7deg; filter: drop-shadow(0 34px 40px rgb(22 19 14 / .32)); }
.hero-icon img { width: 100%; height: auto; animation: float 7s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-12px) rotate(-2deg); } }
.hb { position: relative; max-width: 88%; margin: 0; padding: 12px 16px; border-radius: 18px; font-size: 15.5px; line-height: 1.4; box-shadow: 0 18px 32px -18px rgb(22 19 14 / .65); }
.hb-you { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--surface); color: var(--fg); font-weight: 500; }
.hb-bot { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--ink); color: var(--cream); }
@media (prefers-color-scheme: dark) {
  .hb-bot { background: #2D2721; }
}
.hb-bot small { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: var(--stone-dark); }
.hb-bot small img { width: 16px; height: 16px; }
@media (max-width: 900px) {
  .hero-art { display: none; }
}

/* ---------- Tour: the app, with what each part does ---------- */
.tour { padding-block: clamp(8px, 2vw, 24px) clamp(64px, 9vw, 112px); }
.tour-head { margin-bottom: clamp(28px, 4vw, 48px); }
.sec-title { margin: 0 0 12px; font: 700 clamp(30px, 4.4vw, 48px)/1.05 var(--display); letter-spacing: -0.04em; }
.sec-intro { margin: 0; max-width: 56ch; color: var(--fg-dim); font-size: 17px; }
.tour-stage { --pin: 26px; position: relative; width: min(1320px, 100% - 32px); margin-inline: auto; }
.callouts { margin: 0; padding: 0; list-style: none; }
.callouts li { position: relative; }
.c-top { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.c-top b { font: 700 18px/1.15 var(--display); letter-spacing: -0.02em; }
/* The pins and their numbers: the module's colour, ringed in cream so they stand out on the picture */
.cn, .pin {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--mod-strong);
  color: var(--cream);
  font: 700 13px/1 var(--display);
}
.callouts p:not(.c-top) { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--fg-dim); }
@media (min-width: 1180px) {
  .tour-stage { display: grid; grid-template-columns: 186px minmax(0, 1fr) 186px; gap: 34px; }
  .shot { grid-column: 2; grid-row: 1; }
  .callouts { grid-row: 1; display: flex; flex-direction: column; justify-content: space-between; padding-block: 0 5%; }
  .callouts.l { grid-column: 1; text-align: right; }
  .callouts.l .c-top { flex-direction: row-reverse; }
  .callouts.r { grid-column: 3; }
}
@media (max-width: 1179px) {
  .callouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 24px; margin-top: 28px; }
  .callouts + .callouts { margin-top: 20px; }
  .arrows { display: none; }
}
@media (max-width: 760px) {
  .callouts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .callouts { grid-template-columns: 1fr; gap: 16px; }
}

/* The arrows from each note to its pin, drawn by script once the layout is known */
.arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 5; }
.arrows path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.arrows .halo { stroke: color-mix(in srgb, var(--bg) 85%, transparent); stroke-width: 6; }
.arrows .line { stroke: var(--fg); stroke-width: 2; }
.arrows .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s cubic-bezier(.6, 0, .3, 1); transition-delay: var(--d, 0s); }
.arrows .head { opacity: 0; transition: opacity .2s ease; transition-delay: calc(var(--d, 0s) + .7s); }
.tour-stage.seen .arrows .draw { stroke-dashoffset: 0; }
.tour-stage.seen .arrows .head { opacity: 1; }

/* The picture: a computer window and a phone, drawn in HTML so it stays sharp
   and translates. The app is drawn light in both themes, like a screenshot.
   Everything inside scales with the picture: 1em is 1% of its width. */
.shot { position: relative; min-width: 0; container-type: inline-size; }
.shot-in p { margin: 0; }
.shot-in i { font-style: normal; }
.pin { position: absolute; z-index: 4; width: var(--pin); height: var(--pin); margin: calc(var(--pin) / -2) 0 0 calc(var(--pin) / -2); box-shadow: 0 0 0 3px var(--cream), 0 6px 12px -4px rgb(22 19 14 / .55); transform: scale(0); transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); transition-delay: var(--d, 0s); }
.tour-stage.seen .pin { transform: none; }
.win-bar { display: flex; align-items: center; height: 3.6em; padding: 0 1.6em; border-radius: 1.4em 1.4em 0 0; background: #ebe5e0; border-bottom: 1px solid #ddd4cd; }
.win-bar .lights { display: flex; gap: .6em; }
.win-bar .lights i { width: 1.1em; height: 1.1em; border-radius: 50%; background: #ff5f57; }
.win-bar .lights i:nth-child(2) { background: #febc2e; }
.win-bar .lights i:nth-child(3) { background: #28c840; }
.win-url { margin: 0 auto; padding: .35em 1.6em; border-radius: .8em; background: #fff; font-size: 1.2em; color: #675e58; transform: translateX(-2.4em); }
.ph-status b { font-size: 1.2em; }
.ph-island { position: absolute; left: 50%; top: .9em; width: 7.4em; height: 2.2em; margin-left: -3.7em; border-radius: 2em; background: #000; }
.ph-bars { display: flex; align-items: flex-end; gap: .25em; }
.ph-bars i { width: .45em; height: .7em; border-radius: .2em; background: #1f1a17; }
.ph-bars i:nth-child(2) { height: 1em; }
.ph-bars i:nth-child(3) { height: 1.3em; }
@media (max-width: 600px) {
  .pin { font-size: 11px; }
}

/* ---------- Examples: the dark AI panel ---------- */
.ai-sec { padding-block: 8px clamp(56px, 8vw, 96px); }
.ai {
  /* Its glow runs down the sides in bands of colour, as on /work/ */
  --flow: repeating-linear-gradient(180deg, #6B8CFF 0, #A77BFF 420px, #FF6FA0 840px, #39C6E8 1260px, #6B8CFF 1680px);
  position: relative; /* no stacking context, so the glow sits behind it */
  padding: clamp(24px, 5vw, 56px);
  border: 2px solid transparent;
  border-radius: 32px;
  color: var(--cream);
  background:
    radial-gradient(90% 40% at 100% 0%, color-mix(in srgb, var(--mod) 30%, transparent), transparent 60%) padding-box,
    radial-gradient(80% 40% at 0% 100%, rgb(123 63 228 / .16), transparent 60%) padding-box,
    linear-gradient(var(--panel), var(--panel)) padding-box,
    var(--flow) border-box;
}
.ai::before, .ai::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: var(--flow);
  filter: blur(22px);
  opacity: .7;
}
.ai::after { inset: -18px; filter: blur(56px); opacity: .45; }
@media (max-width: 640px) {
  /* Keep the glow inside the 16px gutter so the screen edge does not cut it */
  .ai::before { inset: -2px; filter: blur(8px); }
  .ai::after { inset: -4px; filter: blur(14px); opacity: .6; }
}
.ai-head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(28px, 5vw, 64px); align-items: end; }
@media (max-width: 860px) {
  .ai-head { grid-template-columns: 1fr; }
}
.ai-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  font: 600 12px/1.2 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--stone-dark);
}
.ai-label svg { width: 18px; height: 18px; }
.ai-text {
  background: linear-gradient(90deg, #6B8CFF, #A77BFF, #FF6FA0, #FF8A5C, #FFC21A, #6B8CFF) 0 0 / 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.ai h2 { margin: 0; font: 700 clamp(32px, 4.4vw, 48px)/1.02 var(--display); letter-spacing: -0.04em; }
.ai-intro { margin: 0; font-size: 17px; color: var(--stone-dark); max-width: 44ch; }

.demo { margin-top: clamp(32px, 5vw, 52px); }
.demo-bar { display: flex; align-items: stretch; gap: 10px; }
.demo-tabs { flex: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.demo-tab {
  position: relative;
  overflow: hidden;
  padding: 14px 16px 16px;
  border: 1px solid rgb(255 247 230 / .14);
  border-radius: 16px;
  background: rgb(255 247 230 / .03);
  color: var(--cream);
  text-align: left;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.demo-tab:hover { background: rgb(255 247 230 / .07); }
.demo-tab[aria-selected="true"] { border-color: rgb(255 247 230 / .4); background: rgb(255 247 230 / .1); }
.demo-tab:focus-visible { outline: 2px solid var(--mod-on-dark); outline-offset: 2px; }
.demo-tab b { display: block; margin-top: 9px; font: 700 19px/1.1 var(--display); letter-spacing: -0.02em; }
.demo-tab s { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #6B8CFF, #A77BFF, #FF6FA0, #FF8A5C, #FFC21A); transform: scaleX(var(--p, 0)); transform-origin: left; }
.demo-tab[aria-selected="false"] s { transform: scaleX(0); }
.demo-pause {
  flex: none;
  width: 46px;
  border: 1px solid rgb(255 247 230 / .14);
  border-radius: 16px;
  background: rgb(255 247 230 / .03);
  color: var(--cream);
  cursor: pointer;
}
.demo-pause:hover { background: rgb(255 247 230 / .08); }
.demo-pause:focus-visible { outline: 2px solid var(--mod-on-dark); outline-offset: 2px; }
.demo-pause svg { width: 16px; height: 16px; margin: auto; }
/* Its name in words, one for each state, so the translations carry both */
.demo-pause .i-play, .demo-pause .l-play, .demo-pause[aria-pressed="true"] .i-pause, .demo-pause[aria-pressed="true"] .l-pause { display: none; }
.demo-pause[aria-pressed="true"] .i-play { display: block; }
.demo-pause[aria-pressed="true"] .l-play { display: inline; }
@media (max-width: 860px) {
  .demo-tabs { grid-template-columns: 1fr 1fr; }
  .demo-tab b { font-size: 17px; }
}

.demo-scene { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(14px, 2.4vw, 28px); margin-top: 14px; }
@media (max-width: 860px) {
  .demo-scene { grid-template-columns: 1fr; }
  .chat-window { height: 430px; }
  .mini { height: 340px; }
}

.chat-window { display: flex; flex-direction: column; height: 500px; overflow: hidden; border: 1px solid rgb(255 247 230 / .1); border-radius: 22px; background: rgb(255 247 230 / .04); }
.chat-top { display: flex; align-items: center; gap: 9px; margin: 0; padding: 14px 18px; border-bottom: 1px solid rgb(255 247 230 / .08); font: 600 14.5px/1 var(--sans); }
.chat-top small { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--stone-dark); }
.chat-top small svg { width: 16px; height: 16px; }
.chat-view { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 48px); mask: linear-gradient(transparent, #000 48px); }
.chat-log { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 14px; font-size: 15.5px; line-height: 1.45; }
.chat-log p { margin: 0; }
.you, .bot { max-width: 88%; padding: 11px 15px; border-radius: 18px; }
.you { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--cream); color: var(--ink); font-weight: 500; }
.bot { align-self: flex-start; border-bottom-left-radius: 4px; background: rgb(255 247 230 / .1); }
.you.voice::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 7px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--mic) center / contain no-repeat; mask: var(--mic) center / contain no-repeat; opacity: .6; }
.calls { display: flex; flex-wrap: wrap; gap: 6px; }
.call {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 12px 5px 5px;
  border: 1px dashed rgb(255 247 230 / .3);
  border-radius: 999px;
  font: 500 13px/1 var(--mono);
  color: var(--stone-dark);
  overflow-wrap: anywhere;
}
.call img { width: 22px; height: 22px; flex: none; }
.call::after { content: "✓"; color: #7ED69B; font-weight: 600; }
.calls.run .call::after { content: ""; width: 10px; height: 10px; border: 2px solid rgb(255 247 230 / .25); border-top-color: var(--cream); border-radius: 50%; animation: turn .7s linear infinite; }
@keyframes turn { to { transform: rotate(1turn); } }
.day { display: flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .04em; color: var(--stone-dark); }
.day::before, .day::after { content: ""; flex: 1; height: 1px; background: rgb(255 247 230 / .12); }
.typing-dots { display: inline-flex; gap: 4px; padding: 15px 16px; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--stone-dark); animation: dot 1s ease-in-out infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; }
.typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 30% { transform: translateY(-4px); opacity: 1; } 0%, 60%, 100% { opacity: .45; } }
.chat-log > .off { display: none; }
.chat-log > .in { animation: msg-in .4s cubic-bezier(.2, .7, .2, 1); }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px); } }

.composer { display: flex; align-items: center; gap: 10px; min-height: 50px; margin: 0 14px 14px; padding: 8px 8px 8px 16px; border: 1px solid rgb(255 247 230 / .12); border-radius: 18px; background: rgb(255 247 230 / .06); }
.composer-in { flex: 1; min-width: 0; max-height: 44px; overflow: hidden; font-size: 15px; line-height: 22px; }
.composer-in:empty::before { content: attr(data-ph); color: rgb(255 247 230 / .4); }
.composer.typing .composer-in::after { content: ""; display: inline-block; width: 2px; height: 17px; margin-left: 1px; vertical-align: -3px; background: var(--mod-on-dark); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.composer-send { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: rgb(255 247 230 / .14); color: var(--cream); transition: background .2s ease; }
.composer.typing .composer-send { background: var(--cream); color: var(--ink); }
.composer-send svg { width: 16px; height: 16px; }
.voice-scene .composer-send { background: rgb(255 247 230 / .14); }
.voice-scene .composer.typing .composer-send { background: #D97757; color: var(--cream); animation: listen 1.2s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 7px rgb(217 119 87 / .25); } }

/* Gemini CLI: a terminal, not a chat */
.term { background: rgb(0 0 0 / .32); font-family: var(--mono); }
.term .chat-log { gap: 12px; font: 500 13.5px/1.55 var(--mono); }
.term .you, .term .bot { max-width: none; padding: 0; border-radius: 0; background: none; }
.term .you { align-self: stretch; color: var(--cream); font-weight: 500; }
.term .you::before { content: "> "; color: var(--mod-on-dark); }
.term .bot { color: #E9E1D2; }
.term .bot::before { content: "✦ "; color: #A77BFF; }
.term .call { padding: 0; border: 0; font-size: 12.5px; }
.term .call img { display: none; }
.term .call::before { content: "⏺"; color: #7ED69B; font-size: 10px; }
.term .calls { flex-direction: column; gap: 4px; }
.term .composer { border-radius: 10px; font-family: var(--mono); }
.term .composer::before { content: ">"; color: var(--mod-on-dark); }
.term .composer-in { font-size: 13.5px; }
.term .composer-send { display: none; }
.mini p { margin: 0; }
.mini i { font-style: normal; }
.mini-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid #ebe5e0; background: #fff; font-size: 14px; }
.mini-bar img { width: 22px; height: 22px; }
.mini-live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 12px; color: #675e58; }
.mini-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #3aab5c; }
.mini-live.flash::before { animation: live 1s ease; }
@keyframes live { 30% { box-shadow: 0 0 0 6px rgb(58 171 92 / .25); } }
.mini-view { position: relative; flex: 1; min-height: 0; overflow: hidden; padding: 16px 16px 40px; -webkit-mask: linear-gradient(#000 88%, transparent); mask: linear-gradient(#000 88%, transparent); }
.is-off { display: none !important; }
.pop { animation: pop .5s cubic-bezier(.2, .9, .3, 1.25) both, fresh 2.6s ease both; animation-delay: var(--k, 0s); }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }

/* ---------- Features ---------- */
.sec { padding-block: clamp(48px, 8vw, 96px); }
.sec .sec-intro { margin-bottom: 32px; }
.feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.feats li { padding: 24px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); }
.feats svg { width: 42px; height: 42px; padding: 10px; border-radius: 13px; background: var(--accent-wash); color: var(--accent); }
.feats h3 { margin: 16px 0 6px; font: 700 20px/1.15 var(--display); letter-spacing: -0.02em; }
.feats p { margin: 0; color: var(--fg-dim); font-size: 15.5px; }
@media (max-width: 980px) {
  .feats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .feats { grid-template-columns: 1fr; }
}

/* ---------- Better together: the other three modules ---------- */
.together { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.together a {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 24px;
  border-radius: 24px;
  color: var(--cream);
  text-decoration: none;
  background: linear-gradient(135deg, rgb(255 255 255 / .16), rgb(255 255 255 / 0) 60%), var(--c);
  box-shadow: var(--shadow);
  transition: transform .2s ease;
}
.together a:hover { transform: translateY(-4px); }
.together a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.together img { width: 52px; height: 52px; filter: drop-shadow(0 8px 14px rgb(0 0 0 / .28)); }
.together h3 { margin: 18px 0 6px; font: 700 24px/1.05 var(--display); letter-spacing: -0.03em; }
.together p { margin: 0 0 18px; font-size: 16px; font-weight: 500; line-height: 1.45; }
.together span { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; font: 500 13px/1.2 var(--mono); opacity: .85; }
.together span svg { width: 14px; height: 14px; }
.all-work { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; color: var(--fg); font-weight: 600; text-decoration: underline; text-decoration-color: var(--work); text-underline-offset: 4px; }
.all-work svg { width: 14px; height: 14px; }
@media (max-width: 860px) {
  .together { grid-template-columns: 1fr; }
}

/* ---------- Connect: Cronum Work's one connector ---------- */
.connect-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: clamp(22px, 3vw, 32px); border-radius: 28px; background: var(--panel); color: var(--cream); }
.connect-box h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font: 700 22px/1.2 var(--display); letter-spacing: -0.02em; }
.connect-box h3 svg { width: 30px; height: 30px; }
.connect-box p { margin: 0; color: var(--stone-dark); }
.conn-code { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 14px; background: rgb(255 247 230 / .07); }
.conn-code code { flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap; font: 500 15px/1.6 var(--mono); scrollbar-width: thin; }
.conn-code button, .conn-link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--work-on-dark);
  color: var(--ink);
  font: 600 13px/1 var(--sans);
  text-decoration: none;
  cursor: pointer;
}
.conn-code button .l-done, .conn-code button.done .l-copy { display: none; }
.conn-code button.done .l-done { display: inline; }
.conn-link svg { width: 14px; height: 14px; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: step; }
.steps li { counter-increment: step; padding: 24px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); font-size: 17px; }
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font: 700 17px/1 var(--display);
}
.steps q { display: block; margin-top: 8px; font-weight: 500; }
@media (max-width: 860px) {
  .steps { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .connect-box { grid-template-columns: minmax(0, 1fr); }
  .conn-link { justify-self: start; }
}

/* ---------- FAQ ---------- */
.faq { max-width: 820px; border-top: 2px solid var(--fg); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font: 700 clamp(19px, 2.2vw, 23px)/1.2 var(--display);
  letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 500; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0 0 22px; max-width: 62ch; color: var(--fg-dim); font-size: 17px; }
.faq a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--accent); }

/* ---------- Closing ---------- */
.closing { padding-block: clamp(56px, 9vw, 112px); }
.closing-card { display: grid; grid-template-columns: auto 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: 32px; background: var(--surface); box-shadow: var(--shadow); }
.closing-card > img { width: clamp(88px, 12vw, 148px); height: auto; rotate: -6deg; filter: drop-shadow(0 18px 24px rgb(22 19 14 / .3)); }
.closing h2 { max-width: 18ch; margin: 0; font: 700 clamp(34px, 5vw, 60px)/1 var(--display); letter-spacing: -0.05em; }
.closing .sec-intro { margin-top: 16px; }
.closing .ctas { margin-top: 26px; }
@media (max-width: 640px) {
  .closing-card { grid-template-columns: 1fr; }
}

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 25;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 12px 24px -12px rgb(22 19 14 / .6);
  cursor: pointer;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.to-top.on { opacity: 1; transform: none; pointer-events: auto; }
.to-top svg { width: 20px; height: 20px; }
.to-top:focus-visible { outline: 3px solid var(--fg); outline-offset: 3px; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--rule); }
footer .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 28px;
  font-size: 14px;
  color: var(--fg-dim);
}
.sig { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.sig strong { font-weight: 600; color: var(--fg); }
.sig svg { width: 20px; height: 20px; color: var(--fg); }
.langs { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.langs a { color: var(--fg-dim); text-decoration: none; }
.langs a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.langs a[aria-current] { color: var(--fg); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .rise, .ai-text, .hero-icon img, .pop { animation: none; }
  .btn, .top, .to-top, .pin, .arrows .draw, .arrows .head, .together a { transition: none; }
}