/* Round 2 looks (04-11-2026): what the three looks share so they read as the same company as the app.
   Colours, type and corner radii are the app's own (content bank facts/08-design-language.md, from tokens.css). */
:root {
  --bg: #F3F5FB; --surface: #FFFFFF; --field: #EEF1F8; --step: #E6EAF3;
  --ink: #141824; --muted: #5C6577; --line: rgba(20,24,36,.10);
  --accent: #2C5BE0; --accent-ink: #FFFFFF; --accent-soft: rgba(44,91,224,.10); --btn: #2C5BE0;
  --genius: #6C5CE7; --genius-ink: #FFFFFF; --genius-soft: rgba(108,92,231,.12);
  --red: #DC2626; --green: #16A34A;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-soft: cubic-bezier(.32, .72, 0, 1);
  --gutter: clamp(16px, 4vw, 56px);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0B0E15; --surface: #161B26; --field: #0F131C; --step: #121722;
  --ink: #EAEDF4; --muted: #A3A9B6; --line: rgba(234,237,244,.10);
  --accent: #4E7DF2; --accent-soft: rgba(91,140,255,.16); --btn: #3A66E4;
  --genius: #8B7CF0; --genius-soft: rgba(139,124,240,.18);
  --green: #22C55E; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #0B0E15; --surface: #161B26; --field: #0F131C; --step: #121722;
  --ink: #EAEDF4; --muted: #A3A9B6; --line: rgba(234,237,244,.10);
  --accent: #4E7DF2; --accent-soft: rgba(91,140,255,.16); --btn: #3A66E4;
  --genius: #8B7CF0; --genius-soft: rgba(139,124,240,.18);
  --green: #22C55E; color-scheme: dark; }

* { box-sizing: border-box; }
/* Anything the page hides stays hidden, whatever display a component sets (the Product menu and the per-computer
   blocks broke without this, 05-11) */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 18px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
img, svg, iframe { max-width: 100%; }
h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.025em; }
p { margin: 0; }
/* The parts the browser draws carry the design too */
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
input, textarea { caret-color: var(--accent); }
html { scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) transparent; }

.wrap { width: min(1240px, 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Navigation: wordmark, a few plain links, one action */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: -0.02em; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
.nav-links { display: flex; gap: 24px; margin-left: 8px; font-size: 16px; color: var(--muted); }
.nav-links a { text-decoration: none; transition: color .18s ease; }
.nav-links a:hover { color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.theme-btn { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--step); color: var(--ink); cursor: pointer; transition: transform .16s var(--ease-out); }
.theme-btn:active { transform: scale(.94); }
.theme-btn svg { width: 18px; height: 18px; }
@media (max-width: 760px) { .nav-links { display: none; } }

/* Buttons: the app's blue; the press scales a touch (Emil Kowalski's rule: 0.97 on :active) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 24px; border: 0; border-radius: 14px;
  background: var(--btn); color: var(--accent-ink); font: 600 17px var(--font); text-decoration: none; cursor: pointer;
  transition: transform .16s var(--ease-out), background-color .2s ease; }
.btn:hover { background: color-mix(in srgb, var(--btn) 88%, #000); }
.btn:active { transform: scale(.97); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 12px; }
.link { color: var(--ink); font-weight: 600; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); transition: text-decoration-color .18s ease; }
.link:hover { text-decoration-color: currentColor; }

/* Keycaps, as the app draws them (never split across lines) */
kbd, .key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.9em; height: 1.75em; padding: 0 .5em; border-radius: .38em;
  background: var(--field); border: 1px solid var(--line); border-bottom-width: 3px; /* taste-skill-ignore: a keycap's edge, as the app draws keys */ font: 600 .82em/1 var(--font); color: var(--ink); white-space: nowrap; vertical-align: .08em; }
.keys { white-space: nowrap; }

/* The moving demos sit in frames; the frame itself is a fragment of the product (data-ui) */
.kit { display: block; width: 100%; border: 0; background: transparent; }

/* App icons (the same 18 as the current website), drawn from assets/apps/*.svg */
.app-ico { display: inline-grid; place-items: center; width: 28px; height: 28px; flex: none; }
.app-ico svg { width: 100%; height: 100%; display: block; }
.app-ico[data-app="notion"], .app-ico[data-app="chatgpt"], .app-ico[data-app="cursor"] { color: var(--ink); }
.app-ico[data-app="gmail"] { color: #EA4335; } .app-ico[data-app="word"] { color: #2B579A; } .app-ico[data-app="google-docs"] { color: #4285F4; }
.app-ico[data-app="outlook"] { color: #0078D4; } .app-ico[data-app="claude"] { color: #D4A574; } .app-ico[data-app="gemini"] { color: #8E75B2; }
.app-ico[data-app="windsurf"] { color: #00A88F; }

/* Mock-up note at the end of each look */
.look-end { padding-block: 72px 96px; color: var(--muted); font-size: 16px; }
.look-end span { display: block; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}