/* Flintty website: shared styles for every page (index.html, privacy.html). */

/* Fonts are served from this site, never from a font CDN, so a visit sends nothing to a third party.
   All three are under the SIL Open Font License; the texts are next to the files. */
@font-face {
  font-family: 'Geist';
  src: url('fonts/geist-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Big Shoulders Display';
  src: url('fonts/big-shoulders-display-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Code';
  src: url('fonts/google-sans-code-latin.woff2') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #0f1115;
  --ink: #f2ede6;
  --ink-2: rgba(242, 237, 230, 0.74);
  --ink-3: rgba(242, 237, 230, 0.62);
  --line: rgba(242, 237, 230, 0.10);
  --accent: #ff8a4c;
  --accent-ink: #1a0d05;
  --accent-text: #ff9d66;
  --footer: #140c07;
  --sans: 'Geist', system-ui, -apple-system, sans-serif;
  --mono: 'Google Sans Code', ui-monospace, Menlo, monospace;
  --display: 'Big Shoulders Display', Impact, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); }
a:hover { color: #ffc29e; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
.contents { display: contents; }
.mono { font-family: var(--mono); }
.strong { color: var(--ink); }

.page { width: 100%; min-height: 100vh; overflow-x: hidden; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(15, 17, 21, 0.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(242, 237, 230, 0.08); }
.site-nav { padding-top: 14px; padding-bottom: 14px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 19px; letter-spacing: -0.01em; }
.site-logo:hover { color: var(--ink); }
.site-links { display: flex; gap: 22px; margin-left: auto; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.site-links a { color: var(--ink-2); text-decoration: none; }
.site-links a:hover { color: var(--ink); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 12px; background: var(--accent); color: var(--accent-ink); text-decoration: none; font-weight: 600; border-radius: 10px; }
.btn:hover { color: var(--accent-ink); background: #ff9d66; }
.btn-small { margin-left: auto; font-size: 14px; padding: 11px 18px; border-radius: 8px; min-height: 44px; }

/* Footer */
.site-footer { background: var(--footer); padding: 40px 0; }
.site-footer-row { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; font-size: 14px; color: rgba(242, 237, 230, 0.66); }
.site-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.site-footer-links a { color: var(--ink-2); }

/* A page of plain text, such as the privacy page */
.prose { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vw, 96px) clamp(16px, 4vw, 48px); font-size: 17px; line-height: 1.7; color: rgba(242, 237, 230, 0.82); }
.prose h1 { margin: 0 0 24px; font-family: var(--display); font-weight: 900; font-size: clamp(48px, 8vw, 88px); line-height: 0.9; text-transform: uppercase; color: var(--ink); }
.prose h2 { margin: 40px 0 8px; font-size: 22px; font-weight: 600; color: var(--ink); }
.prose p, .prose ul { margin: 0 0 16px; }
.prose li { margin-bottom: 6px; }
.eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }

/* Live window demo */
.ft-side, .ft-panes, .ft-panel { display: flex; }
.ft-show-sm { display: none; }
.ft-pbtn { color: var(--w-textTertiary); background: transparent; }
.ft-pbtn:hover { color: var(--w-textSecondary); }
.ft-pbtn[aria-pressed="true"] { color: var(--w-accent); background: var(--w-fillSelected); }
.ft-pbtn[data-panel="store"][aria-pressed="true"] { background: transparent; }
.theme-pick { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 16px 8px 8px; border-radius: 12px; border: 2px solid rgba(242, 237, 230, 0.12); background: rgba(242, 237, 230, 0.04); color: var(--ink); font-family: var(--sans); font-size: 15px; cursor: pointer; }
.theme-swatch { flex: none; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.theme-swatch > span { width: 12px; height: 12px; border-radius: 50%; }
/* "Make it yours": the theme buttons with a small copy of the window beside them (under them on a phone). */
.theme-row { display: flex; flex-wrap: wrap; gap: 32px; align-items: center; }
.theme-picks { flex: 1 1 360px; display: flex; flex-wrap: wrap; gap: 10px; align-content: flex-start; }
.theme-preview { flex: 1 1 420px; min-width: 0; display: flex; gap: 8px; padding: 10px; border-radius: 14px; background: var(--w-frame); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.07); font-family: var(--sans); font-size: 13px; transition: background-color .2s; }
.tp-side { width: 196px; flex-shrink: 0; display: flex; flex-direction: column; gap: 10px; padding: 2px; }
.tp-area { border-radius: 10px; background: var(--w-fillArea); border: 1px solid var(--w-separator); padding: 6px 4px 4px; display: flex; flex-direction: column; gap: 2px; }
.tp-row { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 6px 0 8px; border-radius: 7px; color: var(--w-textSecondary); }
.tp-lit { background: var(--w-fillSelected); color: var(--w-textPrimary); }
.tp-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tp-pane { flex: 1; min-width: 0; padding: 14px 16px; border-radius: 10px; background: var(--w-bg); font-family: var(--mono); font-size: 12px; line-height: 1.75; overflow: hidden; transition: background-color .2s; }
.tp-pane > div { white-space: pre-wrap; }
@media (prefers-reduced-motion: reduce) { .theme-preview, .tp-pane { transition: none; } }
@media (max-width: 420px) { .tp-side { width: 150px; } .tp-pane { font-size: 11px; padding: 12px; } }
.theme-pick[aria-pressed="true"] { border-color: var(--accent); }
.ft-line { white-space: pre-wrap; min-height: 22px; }

/* The feature grid under "Make it yours": every card the same height, key chips lined up at the bottom. */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.feature { padding: 22px; border-radius: 14px; background: rgba(242, 237, 230, 0.04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.feature strong { font-size: 18px; font-weight: 600; }
.feature span { font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.key { align-self: flex-start; font-family: var(--mono); font-size: 13px; padding: 4px 9px; border-radius: 6px; background: rgba(242, 237, 230, 0.08); border: 1px solid rgba(242, 237, 230, 0.16); border-bottom-width: 2px; color: var(--ink); }
.feature .key, .feature .key-slot { margin-top: auto; }
.feature .key-slot { display: block; height: 28px; }

/* "Let the agents work": a card per feature, its key chip at the bottom. */
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.card { background: rgba(242, 237, 230, 0.04); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.card h3 { margin: 0; font-size: 22px; font-weight: 600; }
.card p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.card .key { margin-top: auto; }

/* "Teach it what to notice": the kinds of skill. */
.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.kind { padding: 24px; border-radius: 14px; background: rgba(242, 237, 230, 0.04); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.kind-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-text); }
.kind strong { font-size: 19px; font-weight: 600; }
.kind > span:last-child { font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* "The mouse is optional": one row per shortcut. */
.shortcuts { flex: 2 1 480px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.shortcut { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(242, 237, 230, 0.04); border: 1px solid rgba(242, 237, 230, 0.09); }
.shortcut > span { font-size: 15px; color: rgba(242, 237, 230, 0.86); }
.shortcut .key { align-self: center; white-space: nowrap; }

/* FAQ: every answer open on a wide screen; on a phone the questions fold (site.js closes them). */
.faq { flex: 2 1 520px; display: flex; flex-direction: column; }
.faq-item { border-top: 1px solid rgba(242, 237, 230, 0.14); }
.faq-item summary { display: block; padding: 22px 0 8px; font-size: 19px; font-weight: 600; list-style: none; cursor: default; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-answer { padding-bottom: 22px; font-size: 16px; line-height: 1.65; color: rgba(242, 237, 230, 0.78); }
.faq-answer p { margin: 0; }
.faq-answer p + p { padding-top: 10px; }

/* Phones show only the hero, the FAQ and the closing: a phone can't install a Mac app, so the
   feature sections wait for the visit from a Mac. */
.phone-only { display: none; }
@media (max-width: 760px) {
  .phone-hide { display: none !important; }
  .phone-only { display: block; }
}

/* Phones: the same page, packed tighter so it reads in a few thumbs instead of fifteen screens. */
@media (max-width: 760px) {
  .card-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .card { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; align-items: center; padding: 14px; border-radius: 12px; }
  .card svg { width: 22px; height: 22px; grid-row: 1 / span 2; align-self: start; margin-top: 2px; }
  .card h3 { font-size: 17px; grid-column: 2; }
  .card p { font-size: 15px; line-height: 1.5; grid-column: 2 / span 2; }
  .card .key { grid-column: 3; grid-row: 1; margin: 0; }

  .home section > .wrap { gap: 28px !important; }
  .agent-hero { gap: 28px !important; padding: 20px !important; }
  .agent-hero h3 { font-size: 24px !important; }
  .agent-hero dl { gap: 12px 14px !important; font-size: 15px !important; }
  .agent-dock { display: none !important; }

  .kind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kind { padding: 16px; gap: 6px; }
  .kind-label { font-size: 11px; }
  .kind strong { font-size: 16px; line-height: 1.3; }
  .kind > span:last-child { font-size: 14px; line-height: 1.5; }

  .shortcuts { gap: 0; }
  .shortcut { padding: 10px 2px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }

  /* Theme buttons scroll sideways in one row, bleeding to the screen edges. */
  .theme-picks { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * clamp(16px, 4vw, 48px)); padding: 0 clamp(16px, 4vw, 48px) 4px; scroll-padding: 0 clamp(16px, 4vw, 48px); scroll-snap-type: x proximity; }
  .theme-picks::-webkit-scrollbar { display: none; }
  .theme-pick { flex: none; white-space: nowrap; scroll-snap-align: start; }
  .theme-row { gap: 20px; }

  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 8px; }
  .feature { padding: 14px; gap: 6px; border-radius: 12px; }
  .feature strong { font-size: 15px; line-height: 1.3; }
  .feature span { font-size: 13px; line-height: 1.45; }
  .feature .key { font-size: 12px; }
  .feature .key-slot { display: none; }

  .faq-item summary { position: relative; padding: 18px 32px 18px 0; font-size: 17px; line-height: 1.35; cursor: pointer; }
  .faq-item summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s; }
  .faq-item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
  .faq-answer { padding-bottom: 18px; font-size: 15px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) { .faq-item summary::after { transition: none; } }
/* A group's top tab trades its icon for a fold chevron while pointed at or focused. */
.ft-chev { display: none; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; cursor: pointer; align-items: center; justify-content: center; }
.ft-group:hover .ft-chev, .ft-group:focus-within .ft-chev { display: flex; }
.ft-group:hover .ft-icon, .ft-group:focus-within .ft-icon { display: none !important; }
#spark { cursor: pointer; }

/* The hero's spark: the cursor blinks twice, then flashes white-hot under a warm haze. */
.run0 .fs-cursor { animation: fs-blink0 1s steps(1, end) both, fs-hot0 .9s ease-out 1s both; }
.run1 .fs-cursor { animation: fs-blink1 1s steps(1, end) both, fs-hot1 .9s ease-out 1s both; }
.run0 .fs-haze { animation: fs-haze0 1.8s ease-out 1s both; }
.run1 .fs-haze { animation: fs-haze1 1.8s ease-out 1s both; }
@keyframes fs-blink0 { 0%, 100% { opacity: 1 } 25%, 75% { opacity: .15 } 50% { opacity: 1 } }
@keyframes fs-blink1 { 0%, 100% { opacity: 1 } 25%, 75% { opacity: .15 } 50% { opacity: 1 } }
@keyframes fs-hot0 { 0% { fill: #ffffff; filter: drop-shadow(0 0 22px #ffc890) } 100% { fill: #ededed; filter: none } }
@keyframes fs-hot1 { 0% { fill: #ffffff; filter: drop-shadow(0 0 22px #ffc890) } 100% { fill: #ededed; filter: none } }
@keyframes fs-haze0 { 0% { opacity: 0 } 12% { opacity: 1 } 100% { opacity: 0 } }
@keyframes fs-haze1 { 0% { opacity: 0 } 12% { opacity: 1 } 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .run0 *, .run1 * { animation: none !important; } }

.ft-chips { display: none; }
@media (max-width: 760px) {
  .ft-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; padding: 10px 0 0 10px; }
  .ft-chip { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px;
    background: transparent; color: var(--w-textSecondary); font-family: 'Geist', sans-serif; font-size: 14px; cursor: pointer; }
  .ft-chip[aria-selected="true"] { background: var(--w-fillSelected); color: var(--w-textPrimary); }
  .ft-body { min-height: 0 !important; }
  .ft-side { display: none; }
  .ft-panes { flex-direction: column; }
  .ft-panel { display: none; }
  .ft-hide-sm { display: none; }
  .ft-show-sm { display: inline; }
}

/* Release notes: a hero with the latest release on a card, then one article per release.
   The markup between the latest/releases markers is written by scripts/release-notes.swift. */
.site-links a[aria-current="page"], .site-footer-links a[aria-current="page"] { color: var(--ink); }
.release-hero { padding: clamp(56px, 9vw, 112px) 0 clamp(40px, 6vw, 72px); background: radial-gradient(900px 500px at 85% 100%, rgba(255, 138, 76, 0.16), transparent 70%), var(--bg); border-bottom: 1px solid var(--line); }
.release-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 40px; }
.release-hero-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.release-hero-text h1 { margin: 0; font-family: var(--display); font-weight: 900; font-size: clamp(72px, 12vw, 168px); line-height: 0.84; text-transform: uppercase; color: var(--ink); }
.release-hero-text p { margin: 0; max-width: 520px; font-size: 18px; line-height: 1.6; color: var(--ink-2); }

.release-latest { flex: 0 1 340px; min-width: 260px; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; border-radius: 18px; text-decoration: none; color: var(--ink); background: rgba(255, 138, 76, 0.08); border: 1px solid rgba(255, 138, 76, 0.35); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35); transition: border-color .15s, background-color .15s; }
.release-latest:hover { color: var(--ink); border-color: var(--accent); background: rgba(255, 138, 76, 0.12); }
.release-latest-label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.release-latest-version { font-family: var(--display); font-weight: 900; font-size: 72px; line-height: 0.9; }
.release-latest-headline { font-size: 16px; line-height: 1.5; color: var(--ink-2); }

.release-list { padding: clamp(24px, 4vw, 48px) 0 clamp(64px, 9vw, 120px); }
.release { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: 48px; padding: clamp(32px, 5vw, 56px) 0; border-bottom: 1px solid var(--line); scroll-margin-top: 80px; }
.release:last-child { border-bottom: 0; }
.release > :not(.release-head) { grid-column: 2; }
.release-head { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 6px; }
.release-version { margin: 0; font-family: var(--display); font-weight: 900; font-size: 56px; line-height: 0.9; }
.release-version a { color: var(--ink); text-decoration: none; }
.release-version a:hover { color: var(--accent-text); }
.release-head time { font-family: var(--mono); font-size: 13px; color: var(--ink-3); }
.release-headline { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.3; font-weight: 500; color: var(--ink); }
.release h3 { margin: 24px 0 10px; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-text); }
.release ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.release li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.65; color: rgba(242, 237, 230, 0.80); }
.release li::before { content: ""; position: absolute; left: 2px; top: 0.7em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.release li strong { color: var(--ink); font-weight: 600; }
.release code { font-family: var(--mono); font-size: 0.9em; padding: 1px 6px; border-radius: 5px; background: rgba(242, 237, 230, 0.08); color: var(--ink); }

@media (max-width: 760px) {
  .release { grid-template-columns: minmax(0, 1fr); }
  .release > :not(.release-head) { grid-column: 1; }
  .release-head { grid-row: auto; position: static; flex-direction: row; align-items: baseline; gap: 14px; margin-bottom: 12px; }
  .release-version { font-size: 44px; }
  .release-latest { flex-basis: 100%; }
}