/* kolispace.com's own look (spec docs/superpowers/specs/2026-11-14-kolispace-website-design.md). An editorial page:
   Instrument Serif for headings, Inter for the rest, frosted glass panels, and the app itself shown in dark app windows
   (the demos run inside one). DARK by default (owner, 2026-11-14), the app's own colours; LIGHT when the header's
   switch says so (`data-theme="light"` on <html>, set before the page draws by the script in its <head>). The shared
   tokens and header are nodestra.css's (also used by account.kolispace.com); this page redefines them per theme, and
   `.appwin` puts the app's dark ones back inside a window in both. */

/* The theme tokens, the glass, the header, the light/dark switch and the buttons are the shared look: _shared/nodestra.css. */

/* ── Type ─────────────────────────────────────────────────────────────────── */
section.block { padding: 72px 0; }
.eyebrow { text-align: center; margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-strong); }
h2.section { text-align: center; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 50px); line-height: 1.05; letter-spacing: -.01em; margin: 0 0 12px; }
h2.section em, .hero3 h1 em { font-style: italic; color: var(--accent-strong); }
p.section-sub { text-align: center; color: var(--muted); margin: 0 auto 36px; max-width: 620px; font-size: 16.5px; }
.badge {
  display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--accent-strong);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 24px;
}
.cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero3 { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; padding: 72px 0 40px; }
.hero3 h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 5.6vw, 70px); line-height: .98; letter-spacing: -.015em; margin: 0 0 20px; }
.hero3 h1 em { display: block; }
.hero3 .lead { color: var(--muted); font-size: 18px; max-width: 470px; margin: 0 0 30px; }
.hero3-stage { position: relative; padding: 26px 0 30px; }
.hero-win { transform: perspective(1600px) rotateY(-9deg) rotateX(3deg); transform-origin: left center; animation: win-float 10s ease-in-out infinite; }
@keyframes win-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.float-card { position: absolute; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; font-size: 13px; color: var(--text); white-space: nowrap; }
.float-card b { font-weight: 700; }
.float-card .ic { color: var(--accent-strong); }
.float-a { left: -34px; bottom: 6px; animation: card-float 8s ease-in-out infinite; }
.float-b { right: -14px; top: 0; animation: card-float 9s ease-in-out infinite reverse; }
@keyframes card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.mini-ring { width: 28px; height: 28px; transform: rotate(-90deg); }
.mini-ring circle { fill: none; stroke: var(--ring-track); stroke-width: 5; }
.mini-ring .fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 58.6 88; }

/* ── App windows: the app's own dark look, framed ─────────────────────────── */
.appwin {
  --bg: #0b0e13; --surface: #12161d; --surface2: #161b23;
  --border: rgba(148, 163, 184, 0.10); --border-strong: rgba(148, 163, 184, 0.20);
  --text: #e6ecf4; --muted: #8fa0b5; --dim: #7f8ca0;
  --accent: #5b9bd1; --accent-strong: #85b9e4; --accent-soft: rgba(91, 155, 209, 0.14); --accent-contrast: #070a0f;
  color: var(--text); background: linear-gradient(180deg, #11151c, #0b0e13); text-align: left;
  border-radius: 16px; border: 1px solid var(--appwin-edge); overflow: hidden;
  box-shadow: 0 50px 100px -40px var(--drop), 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.appwin .btn-ghost { background: rgba(255, 255, 255, 0.03); color: var(--text); }
.appwin .btn-primary { box-shadow: none; }
.appwin-bar { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.02); }
.appwin-dots { display: flex; gap: 6px; }
.appwin-dots i { width: 11px; height: 11px; border-radius: 50%; background: #3a404b; }
.appwin-dots i:first-child { background: #f87171; }
.appwin-dots i:nth-child(2) { background: #fbbf24; }
.appwin-dots i:last-child { background: #4ade80; }
.appwin-title { flex: 1; text-align: center; font-size: 12.5px; color: var(--dim); font-weight: 600; margin-right: 50px; }
.appwin-body { display: grid; grid-template-columns: 178px 1fr; min-height: 320px; }
.appwin-side { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--border); background: rgba(255, 255, 255, 0.015); }
.appwin-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; padding: 4px 8px 12px; }
.appwin-brand img { width: 20px; height: 20px; border-radius: 5px; }
.side-item {
  display: flex; align-items: center; gap: 9px; height: 34px; padding: 0 10px; border-radius: 9px; border: 0;
  background: transparent; color: var(--muted); font-family: inherit; font-weight: 500; font-size: 13.5px; line-height: 1; text-align: left; cursor: default;
}
.side-item.on { background: var(--accent-soft); color: var(--text); }
.appwin-main { padding: 18px; min-width: 0; }

/* The hero's dashboard, drawn small */
.hw-day { margin: 0; color: var(--dim); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hw-hello { margin: 2px 0 14px; font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.hw-hello span { color: var(--accent-strong); }
.hw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hw-card { border-radius: 12px; border: 1px solid var(--border); background: var(--surface); padding: 12px; }
.hw-wide { grid-column: 1 / -1; }
.hw-card-title { margin: 0 0 8px; font-size: 11px; color: var(--dim); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hw-row { margin: 6px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hw-row i { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-strong); }
.hw-row.done { color: var(--dim); text-decoration: line-through; }
.hw-row.done i { background: var(--accent); border-color: var(--accent); }
.hw-big { margin: 0; font-size: 17px; font-weight: 700; }
.hw-dim { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.hw-map { width: 100%; height: 76px; }
.hw-map path { fill: none; stroke: rgba(133, 185, 228, .45); stroke-width: 1.5; }
.hw-map rect { fill: var(--surface2); stroke: var(--border-strong); }
.hw-map rect.root { fill: var(--accent); stroke: none; }

/* ── Try it: the app's own window ─────────────────────────────────────────────
   Inside .try-app everything is the app: its tokens (--ns-*, dark or light with the page), its Editorial look
   ([data-look="editorial"]) and its module stylesheets, all from demos/app-look.css, which apps/sync-shared.mjs copies
   from the app. This part only draws the window around them: the app's sidebar and top bar, and where things sit. */
.try-win { background: var(--ns-canvas-bg); }
.try-win .appwin-bar { background: var(--ns-chrome-bg); border-bottom-color: var(--ns-border-strong); }
.try-win .appwin-title { color: var(--ns-text-muted); margin-right: 0; }
.try-win .btn-ghost { background: transparent; color: var(--ns-text); border-color: var(--ns-border-strong); }
.try-reset { margin-left: auto; }
.try-app {
  position: relative; display: grid; grid-template-columns: 212px minmax(0, 1fr); height: 600px;
  background: var(--ns-canvas-bg); color: var(--ns-text); font-family: var(--ns-font); font-size: 14px; line-height: 1.5;
  text-align: left; -webkit-font-smoothing: antialiased;
}
.try-app *, .try-app *::before, .try-app *::after { box-sizing: border-box; }
.try-app button, .try-app input, .try-app textarea { font: inherit; color: inherit; }
.try-app textarea { resize: none; overflow: auto; }
.try-app :focus-visible { outline: 2px solid var(--ns-focus); outline-offset: 2px; }
.try-app h1, .try-app h2, .try-app h3 { font-family: var(--ns-font-display); letter-spacing: -0.015em; }

/* The app's sidebar: the mark and name, the APPS label, the tabs; the open one marked by weight and a rule. */
.try-side { display: flex; flex-direction: column; padding: 18px 10px; border-right: 1px solid var(--ns-border-strong); min-width: 0; }
.try-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; letter-spacing: -0.02em; padding: 2px 12px 22px; }
.try-brand img { width: 26px; height: 26px; object-fit: contain; }
.try-brand .mark-on-light { display: none; }
:root[data-theme="light"] .try-brand .mark-on-light { display: inline-block; }
:root[data-theme="light"] .try-brand .mark-on-dark { display: none; }
.try-side-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ns-text-muted); padding: 0 12px 8px; }
.try-tablist { display: flex; flex-direction: column; gap: 2px; }
.try-tablist [role="tab"] {
  position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border: 0; border-radius: 0;
  background: none; color: var(--ns-text-secondary); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer;
}
.try-tablist [role="tab"]:hover { color: var(--ns-text); }
.try-tablist [role="tab"][aria-selected="true"] { color: var(--ns-text); font-weight: 700; }
.try-tablist [role="tab"][aria-selected="true"]::before { content: ""; position: absolute; left: 0; top: 0; width: 2px; height: 100%; background: var(--ns-text); }

/* The app's top bar: the open tab's icon and name. */
.try-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.try-top { display: flex; align-items: center; gap: 12px; height: 62px; flex: 0 0 auto; padding: 0 24px; border-bottom: 1px solid var(--ns-border-strong); }
.try-top-ic { display: inline-flex; color: var(--ns-text); }
.try-top-title { font-size: 18px; font-weight: 700; letter-spacing: -0.021em; }
.try-panel { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.try-panel > .demo { height: 100%; }
.demo[hidden] { display: none; }
.try-loading { color: var(--ns-text-muted); text-align: center; padding: 160px 0; margin: 0; }
.try-panel .td { overflow-y: auto; }
.try-panel .fc-edit, .try-panel .fc-practice { overflow-y: auto; min-height: 0; }
/* The app's dialog opens inside its window here, not over the whole page. */
.try-app .nsdlg-overlay { position: absolute; z-index: 30; }
/* Cards are dragged with a finger too. */
.try-app .kb-card { touch-action: none; user-select: none; -webkit-user-select: none; }
/* The app's columns are 264px; this window is narrower than the app, so three share its width (up to that). */
.try-app .kb-col { width: auto; flex: 1 1 0; min-width: 190px; max-width: 264px; }

/* The Nodemap's canvas: the app's 16 px line grid, moving with the map (nodemap.js sets its size and position). */
.nm { position: relative; height: 100%; }
.nm-canvas {
  position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; outline: none;
  background-color: var(--ns-canvas-bg);
  background-image: linear-gradient(var(--ns-border) 1px, transparent 1px), linear-gradient(90deg, var(--ns-border) 1px, transparent 1px);
  background-size: 16px 16px;
}
.nm-canvas:active { cursor: grabbing; }
.nm-world, .nm-lines { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.nm-lines { width: 1px; height: 1px; overflow: visible; pointer-events: none; }
.nm-lines path { fill: none; stroke: #b1b1b7; stroke-opacity: .75; stroke-width: 2; }
.nm .mind-node { position: absolute; transform: translate(-50%, -50%); }
.nm .mind-card { user-select: none; -webkit-user-select: none; touch-action: none; white-space: nowrap; }
.nm-controls {
  position: absolute; left: 14px; bottom: 14px; z-index: 5; display: flex; flex-direction: column; gap: 2px; padding: 3px;
  border: 1px solid var(--ns-border-strong); border-radius: var(--ns-radius); background: var(--ns-surface-bg);
}

/* ── Features ─────────────────────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.feature { padding: 22px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 18px 40px -30px var(--drop); transition: transform .2s ease, box-shadow .2s ease; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.feature-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); margin-bottom: 14px; }
.feature:nth-child(3n+2) .feature-ic { background: var(--violet-soft); color: var(--violet); }
.feature:nth-child(3n) .feature-ic { background: var(--green-soft); color: var(--green); }
.feature h3 { margin: 0 0 6px; font-size: 16px; }
.feature p { margin: 0; color: var(--muted); font-size: 14px; }

/* ── Pricing (copy unchanged) ─────────────────────────────────────────────── */
h2.section + .section-sub { margin-bottom: 36px; }
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; max-width: 800px; margin: 0 auto; }
.price-card { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-radius: 22px; padding: 32px; text-align: center; display: flex; flex-direction: column; box-shadow: var(--shadow-soft); }
.price-card-cloud { box-shadow: 0 18px 40px -30px var(--drop); }
.price-card .plan { font-size: 12.5px; color: var(--accent-strong); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.price-card-cloud .plan { color: var(--muted); }
.price-card .amt { font-family: var(--serif); font-size: 52px; font-weight: 400; margin: 8px 0; }
.price-card .amt small { font-family: "Inter", sans-serif; font-size: 15px; color: var(--muted); font-weight: 500; }
.price-card ul { flex: 1; text-align: left; color: var(--muted); font-size: 14.5px; padding: 0; margin: 18px 0 22px; list-style: none; }
.price-card li, .plan-card li { padding: 6px 0 6px 26px; position: relative; }
/* The tick is lucide's check, drawn as a mask in the accent colour (never a text character standing in for an icon). */
.price-card li::before, .plan-card li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 16px; height: 16px; background: var(--accent-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* The app, then the cloud plans drawn from the cloud's own list (site.js). */
.price-app { max-width: 400px; margin: 0 auto; }
.price-note { margin: 0 0 4px; font-size: 13px; color: var(--muted); }
.price-foot { margin-top: 22px; font-size: 13.5px; }
.cloud-plans { max-width: 980px; margin: 48px auto 0; }
.cloud-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.cloud-title { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.1; margin: 0; }
.cloud-sub { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.cycle { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; }
.cycle-btn {
  height: 28px; padding: 0 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.cycle-btn[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px var(--drop); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.plan-card { border-radius: 18px; padding: 22px; display: flex; flex-direction: column; }
.plan-card .plan { font-size: 12.5px; color: var(--accent-strong); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.plan-card .amt { font-family: var(--serif); font-size: 40px; font-weight: 400; margin: 6px 0 2px; }
.plan-card .amt small { font-family: "Inter", sans-serif; font-size: 14px; color: var(--muted); font-weight: 500; }
.plan-card ul { flex: 1; list-style: none; padding: 0; margin: 12px 0 18px; color: var(--muted); font-size: 14px; }
.plan-loading { grid-column: 1 / -1; text-align: center; color: var(--muted); margin: 18px 0; }
.dim { color: var(--dim); }
.card { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow-soft); }
.download { text-align: center; }

/* ── What's new ───────────────────────────────────────────────────────────── */
.news { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin: 22px auto 0; }
.news-item { padding: 20px 22px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.news-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.news-title { font-family: var(--serif); font-size: 24px; line-height: 1.1; }
.news-version { font-size: 12px; color: var(--accent-strong); font-weight: 700; }
.news-date { margin-left: auto; font-size: 12px; color: var(--muted); }
.news-item ul { list-style: none; margin: 0; padding: 0; }
.news-item li { display: flex; gap: 10px; align-items: flex-start; margin: 6px 0; color: var(--muted); font-size: 14.5px; }
.news-tag { flex: 0 0 auto; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; margin-top: 2px; border: 1px solid; }
.news-new .news-tag { color: var(--green); border-color: currentColor; }
.news-improve .news-tag { color: var(--blue-tag); border-color: currentColor; }
.news-fix .news-tag { color: var(--amber); border-color: currentColor; }

/* ── Questions ────────────────────────────────────────────────────────────── */
details { background: var(--glass); border: 1px solid var(--glass-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px; padding: 15px 18px; margin-bottom: 9px; }
summary { cursor: pointer; font-weight: 600; font-size: 15px; }
details p { color: var(--muted); font-size: 14px; margin: 10px 0 2px; }
footer.site { color: var(--dim); }
footer.site a { color: var(--muted); }

/* ── Smaller screens ──────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .hero3 { grid-template-columns: 1fr; padding: 44px 0 10px; gap: 30px; text-align: center; }
  .hero3 .lead { margin: 0 auto 26px; }
  .cta { justify-content: center; }
  .hero-win { transform: none; }
  .float-a { left: 6px; }
  .float-b { right: 6px; }
}
@media (max-width: 760px) {
  .appwin-body { grid-template-columns: 1fr; }
  .hero-win .appwin-side { display: none; }
  /* On a phone the app's tabs sit in a row above the tab, the open one underlined. */
  .try-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 640px; }
  .try-side { flex-direction: row; padding: 0 8px; border-right: 0; border-bottom: 1px solid var(--ns-border-strong); overflow-x: auto; scrollbar-width: none; }
  .try-side::-webkit-scrollbar { display: none; }
  .try-brand, .try-side-label { display: none; }
  .try-tablist { flex-direction: row; gap: 0; }
  .try-tablist [role="tab"] { flex: 0 0 auto; height: 46px; gap: 8px; padding: 0 12px; }
  .try-tablist [role="tab"][aria-selected="true"]::before { top: auto; bottom: 0; width: 100%; height: 2px; }
  .try-top { height: 52px; padding: 0 16px; }
  .try-app .td, .try-app .kb, .try-app .fc { padding: 14px 14px; }
  .try-app .kb-col { min-width: 158px; }
}
@media (max-width: 620px) {
  section.block { padding: 44px 0; }
  .appwin-main { padding: 12px; }
  .price-card { padding: 24px; }
  .news-date { margin-left: 0; }
  .float-card { font-size: 12px; padding: 8px 10px; }
  .hw-grid { grid-template-columns: 1fr; }
  .hw-wide { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-win, .float-a, .float-b { animation: none; }
  .feature { transition: none; }
}


/* ── Round 2: the story, a closer look, how it works (plan 2026-11-14-website-round-2) ─────────────────────────── */
.story-points, .how-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.story-point, .how-card { padding: 24px; border-radius: 18px; }
.story-point h3, .how-card h3 { margin: 14px 0 6px; font-size: 17px; }
.story-point p, .how-card p { margin: 0; color: var(--muted); font-size: 14.5px; }
.story-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-strong); }

.showcase { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr); align-items: center; gap: 52px; margin: 76px 0; }
.showcase:nth-of-type(even) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.8fr); }
.showcase:nth-of-type(even) .showcase-text { order: 2; }
.showcase-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-strong); }
.showcase-text h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 3.2vw, 40px); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 12px; }
.showcase-text > p { color: var(--muted); font-size: 16.5px; margin: 0 0 16px; }
.showcase-points { list-style: none; padding: 0; margin: 0; color: var(--muted); font-size: 14.5px; }
.showcase-points li { padding: 5px 0 5px 26px; position: relative; }
.showcase-points li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 16px; height: 16px; background: var(--accent-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.showcase-win { margin: 0; }
.showcase-win img { display: block; width: 100%; height: auto; }

/* A bigger first screen. */
.hero3 { min-height: calc(100vh - 66px); padding: 64px 0 56px; }
.hero3 h1 { font-size: clamp(50px, 7vw, 92px); }

@media (max-width: 900px) {
  .showcase, .showcase:nth-of-type(even) { grid-template-columns: 1fr; gap: 22px; margin: 52px 0; }
  .showcase:nth-of-type(even) .showcase-text { order: 0; }
  .hero3 { min-height: 0; }
}

/* ── A calm place: the nature band (photo: Unsplash, free licence; hosted here) ───────────────────────────────── */
.calm { position: relative; height: min(74vh, 680px); min-height: 380px; overflow: hidden; margin: 24px 0 8px; isolation: isolate; }
.calm-photo {
  position: absolute; inset: -14% 0; background: url("/img/calm-hills.webp") center 58% / cover no-repeat;
  will-change: transform; z-index: -2;
}
.calm::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, var(--bg) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 55%, rgba(5, 8, 12, .55) 82%, var(--bg) 100%);
}
.calm-inner { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 12%; }
.calm-line {
  margin: 0; font-family: var(--serif); font-size: clamp(40px, 6.4vw, 84px); line-height: 1; letter-spacing: -.015em;
  color: #ffffff; text-shadow: 0 2px 30px rgba(0, 0, 0, .45);
}
.calm-line em { display: block; font-style: italic; color: #cfe3f6; }
.calm-sub { margin: 14px 0 0; max-width: 480px; font-size: 17px; color: rgba(255, 255, 255, .88); text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }

/* Things fade in as they come into view (site.js adds .reveal, then .in). */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .calm-photo { transform: none !important; }
}

/* ── The first screen on a photo: sunrise over a sea of clouds (owner, 2026-11-14: "a beautiful thing" for
   "Plan, think and write, in one calm place"). Unsplash, free licence; hosted here (img/sea-of-clouds*.webp).
   The photo drifts and zooms very slowly, a soft light breathes where the sun comes up, and a veil in the page's own
   colour keeps the words readable: dark on the dark page, light on the light one, and it fades into the page below. */
.hero-scene { position: relative; isolation: isolate; overflow: hidden; }
.hero-photo {
  position: absolute; inset: 0; z-index: -3;
  background: url("/img/sea-of-clouds.webp") 62% 46% / cover no-repeat;
  transform-origin: 70% 40%; animation: hero-drift 48s ease-in-out infinite alternate;
}
@keyframes hero-drift {
  from { transform: scale(1.06) translate3d(-1%, 0, 0); }
  to { transform: scale(1.16) translate3d(1.2%, -1.4%, 0); }
}
/* The light at the sunrise, breathing. */
.hero-scene::before {
  content: ""; position: absolute; z-index: -2; width: 70vmax; height: 70vmax; right: -18vmax; top: -12vmax; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 196, 140, .30), rgba(255, 170, 120, .10) 38%, transparent 66%);
  animation: hero-glow 12s ease-in-out infinite alternate;
}
@keyframes hero-glow { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
/* The veil: strongest behind the words on the left, gone on the right, and the bottom melting into the page. */
.hero-scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--bg) 70%, transparent) 0%, transparent 16%, transparent 64%, var(--bg) 100%),
    linear-gradient(100deg, color-mix(in srgb, var(--bg) 86%, transparent) 0%, color-mix(in srgb, var(--bg) 58%, transparent) 38%, color-mix(in srgb, var(--bg) 8%, transparent) 72%, transparent 100%);
}
.hero-scene .hero3 .lead { color: var(--text); opacity: .86; }
.hero-scene .badge { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
@media (max-width: 960px) {
  .hero-photo { background-image: url("/img/sea-of-clouds-phone.webp"); background-position: 60% 40%; }
  /* The words are centred over the picture here: an even veil, stronger at the top where they are. */
  .hero-scene::after {
    background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 78%, transparent) 0%, color-mix(in srgb, var(--bg) 52%, transparent) 46%, color-mix(in srgb, var(--bg) 30%, transparent) 70%, var(--bg) 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo, .hero-scene::before { animation: none; }
}