/* Baraza: the collection page for svoltra, suara, sebito and senda.
   The family's bones (warm paper, Onest, the 4px scale, round actions, the gold dot, the top bar,
   the hero band with a curved bottom, the deep footer with a curved top) with Baraza's own face:
   plum and plum-black. Each app keeps its own colour on its own card. Light only, like the
   apps' public pages. */

@font-face { font-family: "Onest"; src: url("/fonts/Onest-Variable.woff2") format("woff2"); font-weight: 300 800; font-display: swap; }

:root {
  color-scheme: light;
  --surface: #f8f5ec;
  --surface-raised: #ffffff;
  --surface-sunken: #efeadc;
  --line: #e3dccb;
  --line-strong: #7d7564;
  --ink: #1e161c;
  --ink-muted: #54494f;

  --brand: #5b2a55;
  --brand-strong: #46203f;
  --brand-soft: #efdfec;
  --brand-bright: #c98bbd;
  --on-brand: #ffffff;

  --glow: #f5b52e;
  --on-glow: #2b1d04;
  --caution: #875708;

  --deep: #1d0f1b;
  --on-deep: #f6eef4;
  --on-deep-muted: #c4aebf;

  /* The four apps' own brand colours, used only on their own cards and marks. */
  --svoltra: #443f9c;
  --suara: #0c6170;
  --sebito: #2b3ee6;
  --senda: #17604a;

  --link: var(--brand);
  --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand);
  --shadow-sm: 0 1px 2px #1e161c0f, 0 1px 3px #1e161c0d;
  --shadow-md: 0 6px 16px -4px #1e161c1f, 0 2px 4px #1e161c14;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 72px;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 9999px;
  --duration-quick: 140ms;

  --font-sans: "Onest", system-ui, -apple-system, "Segoe UI", "Noto Sans", sans-serif;
  --w-page: 980px;
  --gutter: 20px;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0ms !important; } }
html, body { margin: 0; background: var(--surface); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
body { font-size: 16px; line-height: 26px; display: flex; flex-direction: column; min-height: 100dvh; overflow-x: clip; }
h1, h2, h3 { text-wrap: balance; font-weight: 650; margin: 0; letter-spacing: -.015em; }
p, li { text-wrap: pretty; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-xs); }
.skip { position: absolute; left: 12px; top: -60px; z-index: 30; padding: 8px 14px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); text-decoration: none; font-weight: 600; }
.skip:focus-visible { top: 12px; }
main { flex: 1; width: 100%; max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter); }

/* Marks */
.mark { display: inline-block; flex: none; }
.mark .stroke { fill: none; stroke: var(--brand); stroke-width: 5; stroke-linecap: round; }
.mark .dot { fill: var(--glow); }
.lockup { display: inline-flex; align-items: center; gap: .3em; line-height: 1; color: var(--ink); text-decoration: none; font-size: 23px; }
.lockup .word { font: 650 1em/1 var(--font-sans); letter-spacing: -.03em; transform: translateY(-.04em); }

/* 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-full); border: 1px solid transparent; font: 550 15px/20px var(--font-sans); text-decoration: none; white-space: nowrap; transition: background var(--duration-quick), border-color var(--duration-quick); }
.btn:active { transform: translateY(1px); }
.btn.primary { background: var(--brand); color: var(--on-brand); }
.btn.primary:hover { background: var(--brand-strong); }
.btn.sm { min-height: 32px; padding: 0 var(--space-4); font-size: 14px; }
.row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Top bar */
.site-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--space-4); min-height: 60px; padding: 12px max(var(--gutter), calc((100% - var(--w-page)) / 2 + var(--gutter))); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-crumbs { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-muted); padding-left: var(--space-4); border-left: 1px solid var(--line); min-width: 0; }
.site-crumbs a { color: inherit; text-decoration: none; }
.site-crumbs a:hover { color: var(--brand); }
.site-crumbs [aria-current] { color: var(--ink); font: 600 17px/1 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-spacer { flex: 1; }
.site-nav { display: flex; gap: 4px; }
.site-nav a { padding: 6px 12px; border-radius: var(--radius-full); text-decoration: none; color: var(--ink-muted); font-weight: 600; font-size: 14px; }
.site-nav a:hover { background: var(--surface-sunken); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--brand-strong); background: var(--brand-soft); }
@media (max-width: 720px) { .site-nav { display: none; } }
@media (max-width: 520px) { .site-crumbs > a, .site-crumbs > span[aria-hidden] { display: none; } .site-top .btn { display: none; } }

/* Hero band */
.site-hero { position: relative; overflow: hidden; margin-inline: calc(50% - 50vw); padding: clamp(40px, 6vw, 72px) calc(50vw - 50%) clamp(64px, 8vw, 96px); background: var(--brand); color: var(--on-brand); border-radius: 0 0 50% 50% / 0 0 48px 48px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.site-hero > :not(.site-hero-art) { position: relative; z-index: 1; }
.site-hero h1 { font: 650 clamp(34px, 4.6vw, 52px)/1.06 var(--font-sans); letter-spacing: -.025em; margin: 4px 0 0; max-width: 17ch; }
.site-lede { margin: 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.5; color: color-mix(in srgb, var(--on-brand) 84%, transparent); max-width: 58ch; }
.site-lede b { color: var(--on-brand); font-weight: 650; }
.site-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--radius-full); background: var(--glow); color: var(--on-glow); font: 600 13px var(--font-sans); }
.site-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--on-glow); }
.site-hero .row { margin-top: var(--space-2); }
.btn.light { background: var(--surface-raised); color: var(--brand-strong); }
.btn.light:hover { background: var(--surface); }
.btn.outline { background: transparent; color: var(--on-brand); border-color: color-mix(in srgb, var(--on-brand) 55%, transparent); }
.btn.outline:hover { background: color-mix(in srgb, var(--on-brand) 12%, transparent); }
.site-hero :focus-visible { box-shadow: 0 0 0 2px var(--brand), 0 0 0 4px var(--on-brand); }
.site-hero-art { position: absolute; right: calc(50vw - 50% + 8px); top: 50%; transform: translateY(-50%); z-index: 0; line-height: 0; }
.site-hero-art .mark { width: 220px; height: 220px; }
.site-hero-art .stroke { stroke: var(--on-brand); }
.site-disc .stroke { stroke: var(--brand); }
@media (max-width: 860px) { .site-hero-art { display: none; } }

/* Sections and cards */
.info-sec { display: grid; gap: var(--space-4); padding-top: var(--space-7); scroll-margin-top: 80px; }
.eyebrow { margin: 0 0 calc(var(--space-2) * -1); font: 500 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.info-sec > h2 { font: 650 clamp(26px, 2.6vw, 32px)/1.15 var(--font-sans); }
.info-sec > p { margin: 0; font-size: 17px; line-height: 28px; max-width: 68ch; }
.info-card { background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: clamp(16px, 2.4vw, 24px); display: grid; gap: var(--space-2); align-content: start; }
.info-card p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.info-card b { font: 650 17px/24px var(--font-sans); }
.info-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-4); }
.info-n { font: 650 30px/1 var(--font-sans); color: var(--brand); }
/* Cards take turns on a top edge: plum, gold, orchid, ink. */
.info-grid > li { border-top: 4px solid var(--brand); }
.info-grid > li:nth-child(4n + 2) { border-top-color: var(--glow); }
.info-grid > li:nth-child(4n + 2) .info-n { color: var(--caution); }
.info-grid > li:nth-child(4n + 3) { border-top-color: var(--brand-bright); }
.info-grid > li:nth-child(4n + 4) { border-top-color: var(--ink); }
.info-grid > li:nth-child(4n + 4) .info-n { color: var(--ink); }

/* The moments of a gathering, under the collection heading */
.moments { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.moments li { padding: 5px 14px; border-radius: var(--radius-full); background: var(--surface-raised); border: 1px solid var(--line); font-size: 14px; font-weight: 550; color: var(--ink-muted); }

/* The collection: four app cards, each in its own colour */
.apps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 720px) { .apps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app { --app: var(--brand); position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: clamp(20px, 2.8vw, 28px); background: var(--surface-raised); border: 1px solid var(--line); border-top: 4px solid var(--app); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-quick); }
.app:hover { box-shadow: var(--shadow-md); }
.app.svoltra { --app: var(--svoltra); }
.app.suara { --app: var(--suara); }
.app.sebito { --app: var(--sebito); }
.app.senda { --app: var(--senda); }
.app-head { display: flex; align-items: center; gap: var(--space-3); }
.app-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--app) 9%, var(--surface-raised)); flex: none; }
.app-icon svg { width: 40px; height: 40px; }
.app-name { font: 650 26px/1 var(--font-sans); letter-spacing: -.03em; color: var(--ink); }
.app-for { margin: 4px 0 0; font-size: 14px; line-height: 20px; color: var(--app); font-weight: 600; }
.app h3 { font: 650 20px/26px var(--font-sans); }
.app p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.app-go { margin-top: auto; padding-top: var(--space-2); }
.app-go a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--app); text-decoration: none; }
.app-go a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.app-go a:hover { text-decoration: underline; }
.app:has(a:focus-visible) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--app); }
.app-go a:focus-visible { box-shadow: none; }
.app-go svg { width: 16px; height: 16px; }

/* The name */
.info-name { grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.info-name h3 { font: 650 32px/1.1 var(--font-sans); letter-spacing: -.03em; }
.info-name .mark { width: 72px; height: 72px; }
.info-name i { font-style: italic; }
@media (max-width: 600px) { .info-name { grid-template-columns: 1fr; } }

/* Philosophy: one statement, three supports */
.statement { margin: 0; padding: clamp(24px, 4vw, 40px); border-radius: var(--radius-lg); background: var(--brand-soft); color: var(--brand-strong); font: 650 clamp(22px, 2.6vw, 30px)/1.25 var(--font-sans); letter-spacing: -.02em; text-wrap: balance; }
.trio { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 760px) { .trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Who it's for */
.people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-4); }
.aspire { margin: 0; padding: var(--space-4) var(--space-5); border-left: 4px solid var(--glow); background: var(--surface-raised); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-size: 17px; line-height: 28px; box-shadow: var(--shadow-sm); }

/* Closing band */
.closing { display: grid; gap: var(--space-4); justify-items: start; margin-top: var(--space-7); padding: clamp(28px, 5vw, 48px); border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.closing h2 { font: 650 clamp(28px, 3.4vw, 40px)/1.1 var(--font-sans); letter-spacing: -.025em; }
.closing ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.closing ul li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 12px 2px 0; border-radius: 50%; background: var(--brand-bright); }
.closing ul li:last-child::before { background: var(--glow); }
.closing .sign { margin: 0; font: 650 18px/1.3 var(--font-sans); color: var(--brand); }

/* Part of zennia */
.family { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); }
.family > li.here { box-shadow: inset 0 0 0 2px var(--brand), var(--shadow-sm); }
.family b { font-size: 20px; }
.info-card p.when { margin-top: auto; padding-top: var(--space-1); color: var(--ink); font-weight: 600; }
.info-here { display: inline-block; margin-left: 4px; padding: 1px 8px; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand); font-size: 12px; line-height: 18px; font-weight: 600; white-space: nowrap; }

/* Footer */
.site-footer { position: relative; overflow: clip; isolation: isolate; margin-top: 64px; padding: 48px 18px 24px; background: var(--deep); color: var(--on-deep); border-top-left-radius: 50% 48px; border-top-right-radius: 50% 48px; }
.site-footer :focus-visible { box-shadow: 0 0 0 2px var(--deep), 0 0 0 4px var(--on-deep); border-radius: 4px; }
.site-footer-art { position: absolute; z-index: 0; right: -110px; bottom: -150px; opacity: .08; pointer-events: none; line-height: 0; }
.site-footer-art .mark { width: 420px; height: 420px; }
.site-footer-art .stroke { stroke: var(--on-deep); }
.site-footer-art .dot { fill: var(--on-deep); }
.site-footer-inner { position: relative; z-index: 1; max-width: 980px; margin: 0 auto; }
.site-footer-grid { display: grid; gap: 32px; }
@media (min-width: 768px) { .site-footer-grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; } }
.site-footer-brand { display: grid; gap: 16px; align-content: start; }
.site-disc { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); }
.site-disc .mark { width: 36px; height: 36px; }
.site-tagline { font: 650 clamp(24px, 1.2vw + 19px, 30px)/1.15 var(--font-sans); letter-spacing: -.02em; max-width: 12em; margin: 0; text-wrap: balance; }
.site-footer-nav h2 { font: 600 12px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--on-deep-muted); margin: 0 0 12px; }
.site-footer-nav ul, .site-footer-legal { list-style: none; padding: 0; margin: 0; }
.site-footer-nav ul { display: grid; gap: 8px; }
.site-footer a { color: var(--on-deep); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 24px; border-top: 1px solid color-mix(in srgb, var(--on-deep) 25%, transparent); font-size: 14px; line-height: 20px; }
.site-footer-bottom p { margin: 0; }
.site-footer-legal { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* /history: eras, minor versions and releases on a timeline (after the apps). */
.hist-era { display: grid; gap: var(--space-4); padding-top: var(--space-7); }
.hist-erahead { display: flex; gap: var(--space-5); align-items: flex-start; }
.hist-erabig { font: 650 clamp(56px, 8vw, 88px)/0.9 var(--font-sans); color: var(--brand); letter-spacing: -0.03em; flex: none; }
.hist-erahead > div { display: grid; gap: var(--space-2); }
.hist-erahead h2 { font: 650 clamp(24px, 2.4vw, 30px)/1.15 var(--font-sans); }
.hist-erahead p { margin: 0; color: var(--ink-muted); }
.hist-minors, .hist-rels, .hist-changes { list-style: none; margin: 0; padding: 0; }
.hist-minors { display: grid; gap: var(--space-3); }
.hist-minor { background: var(--surface-raised); border: 1px solid var(--line); border-top: 4px solid var(--brand); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.hist-minor > details > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; border-radius: var(--radius-lg); }
.hist-minor > details > summary::-webkit-details-marker { display: none; }
.hist-minor > details > summary::after { content: "▾"; color: var(--ink-muted); transition: transform var(--duration-quick); }
.hist-minor > details:not([open]) > summary::after { transform: rotate(-90deg); }
.hist-minor summary b { font: 650 18px/24px var(--font-sans); }
.hist-tag { font: 600 13px/1 var(--font-sans); background: var(--brand-soft); color: var(--brand-strong); padding: 5px 9px; border-radius: var(--radius-full); flex: none; }
.hist-count { margin-left: auto; white-space: nowrap; color: var(--ink-muted); font-size: 14px; }
.hist-rels { position: relative; display: grid; border-left: 3px solid var(--brand-soft); margin: 0 var(--space-5) var(--space-4) calc(var(--space-5) + 8px); padding-left: var(--space-5); }
.hist-rels > li { position: relative; display: grid; gap: var(--space-2); padding: var(--space-3) 0; }
.hist-rels > li + li { border-top: 1px solid var(--line); }
.hist-rels > li::before { content: ""; position: absolute; left: calc(-1 * var(--space-5) - 9px); top: 18px; width: 15px; height: 15px; border-radius: 50%; background: var(--surface-raised); border: 3px solid var(--brand); }
.hist-rels > li.is-current::before { background: var(--glow); border-color: var(--glow); }
.hist-relhead { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.hist-relhead b { font: 650 17px/24px var(--font-sans); }
.hist-ver { font: 600 13px/1 var(--font-sans); background: var(--brand-soft); color: var(--brand-strong); padding: 4px 10px; border-radius: var(--radius-full); }
.is-current .hist-ver { background: var(--glow); color: var(--on-glow); }
.hist-current { font: 600 12px/1 var(--font-sans); padding: 4px 8px; border-radius: var(--radius-full); background: var(--brand); color: var(--on-brand); }
.hist-date { margin-left: auto; white-space: nowrap; color: var(--ink-muted); font-size: 14px; }
.hist-rels p { margin: 0; color: var(--ink-muted); }
.hist-changes { display: grid; gap: var(--space-2); }
.hist-changes li { position: relative; padding-left: var(--space-4); font-size: 16px; line-height: 25px; }
.hist-changes li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
@media (max-width: 600px) { .hist-erahead { flex-direction: column; gap: var(--space-2); } .hist-date { margin-left: 0; } .hist-rels { margin-right: var(--space-4); } }
.name-body { display: grid; gap: var(--space-2); }
.info-sec > p.statement, .info-sec > p.aspire { max-width: none; }

/* App pages (/svoltra, /suara, /sebito, /senda): the words from zennia.sg's tool pages, in Baraza's
   frame. The top bar, footer, type and neutrals stay Baraza; inside <main> the brand roles take the
   app's own colours, and the hero and the screens fade from Baraza's plum into the app's colour. */
.app-svoltra { --app: #443f9c; --app-strong: #322e78; --app-soft: #e7e5f6; --app-deep: #1d1a3c; --app-accent: #a8481f; }
.app-suara { --app: #0c6170; --app-strong: #094c58; --app-soft: #dcefef; --app-deep: #0f2a2e; --app-accent: #9b2d7f; }
.app-sebito { --app: #2b3ee6; --app-strong: #1e2db8; --app-soft: #e4e7ff; --app-deep: #14152b; --app-accent: #ff3d7f; }
.app-senda { --app: #17604a; --app-strong: #0f4a39; --app-soft: #d8efe5; --app-deep: #0e1b17; --app-accent: #f5b52e; }
.app-page main { --link: var(--app-strong); }

.app-hero {
  background-color: var(--app);
  background-image:
    radial-gradient(55% 80% at 88% 20%, color-mix(in srgb, var(--glow) 30%, transparent), transparent 70%),
    radial-gradient(45% 70% at 70% 110%, color-mix(in srgb, var(--app-accent) 40%, transparent), transparent 70%),
    linear-gradient(in oklch 115deg, var(--brand) 0%, var(--app) 72%, color-mix(in oklab, var(--app) 70%, var(--app-deep)) 100%);
}
.app-hero h1 { letter-spacing: -.035em; }
.app-hero .site-lede { max-width: 54ch; }
.app-hero .site-lede.app-purpose { color: var(--on-brand); font-weight: 600; }
.app-hero .btn.light { color: var(--app-strong); }
.app-hero-top { display: flex; align-items: center; gap: var(--space-3); }
.app-hero-mark { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--radius-md); background: var(--surface-raised); box-shadow: var(--shadow-md); }
.app-hero-mark svg { width: 38px; height: 38px; }
.app-host { color: color-mix(in srgb, var(--on-brand) 80%, transparent); font-size: 15px; padding-left: var(--space-2); }
.app-hero-art { position: absolute; right: calc(50vw - 50% + 8px); top: 50%; transform: translateY(-50%); z-index: 0; padding: 18px; border-radius: 50%; background: color-mix(in srgb, var(--on-brand) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-brand) 30%, transparent); }
.app-hero-disc { display: grid; place-items: center; width: 248px; aspect-ratio: 1; border-radius: 50%; background: var(--surface-raised); box-shadow: var(--shadow-md); }
.app-hero-disc .art { width: 78%; height: auto; }
.app-hero > :not(.app-hero-art) { max-width: min(100%, 600px); }
@media (max-width: 860px) { .app-hero-art { display: none; } .app-hero > :not(.app-hero-art) { max-width: none; } }

/* The scene's roles, in the app's colours */
.art .art-brand { stroke: var(--app); }
.art .art-line { stroke: var(--line-strong); }
.art .art-soft { fill: var(--app-soft); }
.art .art-fill-brand { fill: var(--app); }
.art .art-paper { fill: var(--surface-raised); }
.art .art-on-brand { stroke: var(--surface-raised); }
.art .art-glow { fill: var(--glow); }

/* In use: real screens, a browser window with a phone or a second window over its corner */
.screens { display: grid; gap: var(--space-3); margin: var(--space-2) 0 0; }
.screens-stage { position: relative; padding: var(--space-5) 16% var(--space-7) var(--space-5); border-radius: var(--radius-lg); background: radial-gradient(40% 60% at 100% 100%, color-mix(in srgb, var(--app-accent) 32%, transparent), transparent 70%), linear-gradient(in oklch 135deg, var(--brand) 0%, var(--app) 55%, var(--app-deep) 100%); }
@media (min-width: 768px) { .screens-stage { padding: var(--space-7) 15% var(--space-8) var(--space-7); } }
.screens-window { border-radius: var(--radius-md); overflow: hidden; background: var(--surface-raised); box-shadow: 0 24px 48px -12px #00000059, 0 4px 12px #00000026; }
.screens-window img, .screens-phone img { display: block; width: 100%; height: auto; }
.screens-bar { display: flex; align-items: center; gap: var(--space-3); height: 30px; padding: 0 var(--space-3); background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
.screens-dots { display: inline-flex; gap: 6px; }
.screens-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); opacity: .5; }
.screens-url { flex: 1; max-width: 22rem; margin-inline: auto; padding: 2px var(--space-3); border-radius: var(--radius-full); background: var(--surface-raised); color: var(--ink-muted); font-size: 12px; line-height: 16px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screens-phone { position: absolute; right: 2.5%; bottom: var(--space-4); width: 21.5%; min-width: 92px; max-width: 240px; padding: 5px; border-radius: 22%/10.5%; background: var(--ink); box-shadow: 0 24px 48px -12px #00000066; }
.screens-phone img { border-radius: 19%/9%; }
.screens-window-second { position: absolute; right: 3%; bottom: var(--space-5); width: 40%; }
.screens-window-second .screens-bar { height: 22px; }
.screens-window-second .screens-url { font-size: 10px; }
.screens-crop { aspect-ratio: 2160 / 1000; overflow: hidden; }
.screens-crop img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.screens-stage-phone { padding-right: 22%; }
@media (min-width: 768px) { .screens-stage-phone { padding-right: 21%; } }
.screens-stage-window { padding-bottom: 22%; }
@media (min-width: 768px) { .screens-stage-window { padding-bottom: 21%; } }
@media (max-width: 559.98px) { .screens-bar { height: 22px; } .screens-url { font-size: 10px; } .screens-window-second .screens-bar { display: none; } }
.screens figcaption { font-size: 14px; line-height: 20px; color: var(--ink-muted); text-wrap: pretty; }

/* Calm by design: three numbered cards */
.app-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
@media (min-width: 760px) { .app-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.app-cards > li { border-top: 4px solid var(--app); }
.app-n { font: 650 14px/1 var(--font-sans); letter-spacing: .08em; color: var(--app); }

/* Good to know */
.facts { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); margin: 0; }
.fact { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-5); border-radius: var(--radius-lg); border: 1px solid var(--line); border-top: 4px solid var(--app); background: linear-gradient(180deg, color-mix(in srgb, var(--app-soft) 60%, var(--surface-raised)), var(--surface-raised) 55%); box-shadow: var(--shadow-sm); }
.fact dt { font: 700 13px/16px var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--app-strong); }
.fact dd { margin: 0; font-size: 16px; line-height: 25px; text-wrap: pretty; }

/* Its siblings: one row per app, each in its own colour */
.siblings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--space-4); }
.sibling { --app: var(--brand); position: relative; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); background: var(--surface-raised); border: 1px solid var(--line); border-left: 4px solid var(--app); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: box-shadow var(--duration-quick); }
.sibling:hover { box-shadow: var(--shadow-md); }
.sibling:has(a:focus-visible) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--app); }
.sib-svoltra { --app: var(--svoltra); }
.sib-suara { --app: var(--suara); }
.sib-sebito { --app: var(--sebito); }
.sib-senda { --app: var(--senda); }
.sibling .app-icon { width: 48px; height: 48px; }
.sibling .app-icon svg { width: 34px; height: 34px; }
.sibling-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.sibling-text a { font: 650 20px/26px var(--font-sans); letter-spacing: -.02em; color: var(--ink); text-decoration: none; }
.sibling-text a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sibling-text a:focus-visible { box-shadow: none; }
.sibling-text > span:last-child { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.sibling-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.sibling-status { flex: none; padding: 2px 9px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--glow) 28%, var(--surface-raised)); color: var(--on-glow); font: 600 11px/18px var(--font-sans); letter-spacing: .06em; text-transform: uppercase; }