/* OQLIS site: the rules every page shares (nav capsule, grade, mark, app-frame, picker) */
/* the evening grade (tech only, chosen on load or by the nav's button, never by scrolling): the same
   palette turned over, the mark's own teal as the accent (3:1 and more on the dark ground) */
html[data-grade="evening"] {
  --p-bg: #111615; --p-surface: #1b201f; --p-ink: #f2f4f4; --p-muted: #9ba09f;
  --p-accent: #2aa79a; --p-accent-ink: #0b0f0e; --p-action: #2aa79a; --p-action-ink: #0b0f0e;
  --p-inv-bg: #f6f7f7; --p-inv-surface: #eceeee; --p-inv-ink: #111615; --p-inv-muted: #656969;
  --p-inv-accent: #239185; --p-inv-accent-ink: #111111; --p-inv-action: #239185; --p-inv-action-ink: #111111;
  color-scheme: dark;
}
  /* the client's mark: in the nav, inline in the h1, in the footer */
  .nav__logo, .footer__mark { gap: 10px; }
  .brand-mark { display: block; flex: none; width: 28px; height: 28px; }
  .footer__mark .brand-mark { width: 48px; height: 48px; }
  .hero--centred .hero__lead { color: var(--ink); }
  .hero--centred h1 .brand-inline { display: inline-block; width: .8em; height: .8em; vertical-align: -.08em; margin-inline: .04em; }

  /* the hero window (inside the visual): OQLIS Create, the list of chats beside the open one */
  .ow { background: #fff; color: #16191a; border-radius: 14px; overflow: hidden; font: 400 14px/1.45 var(--font-text);
        box-shadow: 0 0 0 1px rgb(17 22 21 / .1), 0 30px 60px -30px rgb(17 22 21 / .35); }
  .ow__bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: #f1f3f3; font-size: 13px; color: #5c6262; }
  .ow__bar b { color: #16191a; font-weight: 500; }
  .ow__bar .sp { flex: 1; }
  .ow__bar img { width: 16px; height: 16px; }
  .ow__dots { display: flex; gap: 6px; } .ow__dots i { width: 10px; height: 10px; border-radius: 50%; background: #dfe2e2; }
  .ow__body { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 420px; }
  .ow__list { border-right: 1px solid rgb(17 22 21 / .08); padding: 10px; display: grid; align-content: start; gap: 2px; }
  .ow__q { height: 32px; margin-bottom: 6px; border-radius: 8px; background: #f1f3f3; display: flex; align-items: center; padding: 0 10px; color: #6a7070; font-size: 13px; }
  .ow__t { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; font-size: 13px; }
  .ow__t.is-on { background: #eef6f5; }
  .ow__t b { font-weight: 500; color: #16191a; } .ow__t span { color: #5f6565; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .ow__chat { display: grid; gap: 10px; align-content: start; padding: 16px 20px; min-width: 0; }
  .ow__me { justify-self: end; max-width: 82%; padding: 10px 14px; border-radius: 16px 16px 6px 16px; background: #16191a; color: #f6f7f7; }
  .ow__tool { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #5f6565; }
  .ow__tool img { width: 16px; height: 16px; }
  .ow__bot { max-width: 88%; padding: 10px 14px; border-radius: 16px 16px 16px 6px; background: #f1f3f3; }
  .ow__bot small { display: inline; margin-left: 8px; font-size: 13px; color: #5f6565; white-space: nowrap; }
  .ow__acts { display: flex; gap: 8px; }
  .ow__acts span { height: 30px; padding: 0 12px; border-radius: var(--r-btn); display: inline-flex; align-items: center; font-size: 13px; font-weight: 500; background: var(--action); color: var(--action-ink); }
  .ow__acts span + span { background: #e1e2e2; color: #16191a; }
  /* a short screen (1024x768): the exchange stands whole above the fade */
  @media (max-height: 820px) { .ow__tool, .ow__t:nth-of-type(n+4) { display: none; } .ow__chat { gap: 8px; padding-top: 12px; } }
  @media (max-width: 639px) {
    .ow__body { grid-template-columns: 1fr; } .ow__list { display: none; }
    .ow__chat { padding: 12px 14px; font-size: 13px; } .ow__bar .sp ~ span { display: none; } .ow__tool { display: none; }
  }

  /* app-frame (sections-library.md, app-frame: the whole recipe) */
  .app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
  .app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
  .app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
  .app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
  .app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
  @media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
  @media (max-width: 1023px) {
    .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
    .app > .app__pane--list { max-height: 252px; }
    .app > .app__pane--list::after { display: none; }
    .app .ui-win__side { display: none; }
    .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
    .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
  }
  @media (max-width: 639px) {
    .app.ui { grid-template-rows: minmax(0, 1fr); }
    .app > .app__pane--list { display: none; }
    .app > .app__pane + .app__pane { border-top: 0; }
  }

  /* the dealt grounds keep the section box (backgrounds.md: a ground never changes a section's height) */
  main > section.section.section:is(.bg-halo, .bg-band) { min-height: calc(var(--h, 1) * 100svh); padding: var(--padt) 0 calc(var(--padb) + var(--bar)); display: block; }
  /* the band's grain tile (backgrounds.css --g-noise-soft) makes Chrome request /%23n (a 404): the band keeps its tones without it */
  #gateway.bg-band { --g-noise-soft: none; }
  /* every tab panel one height, so the section never changes when a tab is chosen */
  .tab-panels { min-height: 4.8em; }
  /* the plan beside the statement takes the rest of the screen */
  #approvals .panel { --p-h: 280px; height: 100%; }

  /* the split frames run lower where the split stacks, so each section stays one screen */
  @media (min-width: 1024px) { :is(#perspectives, #gateway) .frame--split { --ratio: 100%; } }
  @media (min-width: 640px) and (max-width: 1023px) { :is(#perspectives, #gateway) .frame--split { --ratio: 60%; } }
  @media (max-width: 639px) { :is(#perspectives, #gateway) .frame--split { --ratio: 72%; } }

  /* one --p-h per card group */
  #agents .panel { --p-h: clamp(280px, 22vw + 8px, 336px); }
  @media (min-width: 640px) and (max-width: 1023px) { #agents .panel { --p-h: calc(100svh - 600px); } }
  @media (max-width: 639px) { #agents .panel { --p-h: 216px; } }
  /* as from 1024 (system.css), the second screen's cards run down to its foot on a tablet */
  @media (min-width: 640px) and (max-width: 1023px) { #agents > .wrap > .grid:last-child { align-self: stretch; } }
  .faq-icons { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-3); }
  .menu-card .panel { --p-h: 200px; }

  /* the perspectives: each panel's last line, who it is for */
  .persp__who { font: 500 var(--t-small)/1.4 var(--font-mono); color: var(--muted); }
  /* Discover's screen (inside the visual): the product's Add a connection picker, every source it offers */
  .conn-pick__body { padding: 10px 12px 14px; display: grid; gap: 6px; }
  .conn-pick__group { font-size: 11px; line-height: 16px; font-weight: 500; color: var(--u-muted); margin-top: 4px; }
  .conn-pick__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .conn-pick__grid li { display: flex; align-items: center; gap: 6px; min-width: 0; height: 28px; padding: 0 6px 0 3px; border-radius: max(6px, var(--u-r3)); }
  .conn-pick__logo { width: 22px; height: 22px; border-radius: 6px; }
  .conn-pick__logo :is(img, svg) { width: 14px; height: 14px; }
  .conn-pick__logo--none { color: var(--u-muted); }
  .conn-pick__logo--none svg { fill: none; stroke: currentColor; stroke-width: 2; }
  .conn-pick__name { font-size: 11.5px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  @media (max-width: 599px) { .conn-pick__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

  /* the grade button in the nav's actions: the menu button's look, kept in the bar at every width */
  .nav__actions { display: flex; align-items: center; gap: var(--s-2); }
  .nav__grade {
    display: inline-grid; place-items: center; flex: none; width: var(--btn-h); height: var(--btn-h);
    border-radius: var(--r-btn); border: 1px solid var(--line-strong); background: transparent; color: var(--ink); cursor: pointer;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  .nav__grade:hover { background: color-mix(in oklab, var(--bg) 88%, var(--ink)); }
  .nav__grade:active { transform: translateY(1px); }
  .nav__grade:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
  .nav__grade-sun, html[data-grade="evening"] .nav__grade-moon { display: none; }
  html[data-grade="evening"] .nav__grade-sun { display: block; }
  @media (max-width: 1023px) { .nav:not(.is-open) .nav__actions > .nav__grade { display: inline-grid; } .nav.is-open .nav__grade { display: none; } }

  /* the menu as DeepSeek Harness has it (the client's ask, over the kit's opaque full-width bar): at the top
     of the page a clear bar across the wrap; once the page scrolls, it draws in to a 980px capsule of
     liquid glass that floats 8px below the top, the words centred in it, its buttons rounded */
  .nav { background: transparent; border-bottom: 0; box-shadow: none; pointer-events: none; }
  .nav.is-open { background: var(--bg); }
  .nav__bar, .nav.is-open .nav__links { pointer-events: auto; }
  .nav__bar {
    position: relative; height: calc(var(--nav) - 16px); margin-top: 8px; border-radius: 999px;
    width: min(100% - 2 * var(--gut), var(--container)); padding-inline: 0;
    transition: width .65s cubic-bezier(.22, 1, .36, 1), padding .65s cubic-bezier(.22, 1, .36, 1);
  }
  .nav.is-scrolled .nav__bar, .nav.is-open .nav__bar { width: min(100% - 2 * var(--gut), 980px); padding-inline: 16px 6px; }
  /* the glass: behind the bar, fading in as it draws in */
  .nav__bar::before {
    content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; pointer-events: none;
    background: rgb(250 251 251 / .78); border: 1px solid rgb(17 22 21 / .08);
    -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 10px 30px -14px rgb(17 22 21 / .28);
    opacity: 0; visibility: hidden; transition: opacity .4s ease-in-out, visibility 0s .4s;
  }
  html[data-grade="evening"] .nav__bar::before {
    background: rgb(27 32 31 / .78); border-color: rgb(255 255 255 / .1);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .12), 0 10px 30px -14px rgb(0 0 0 / .6);
  }
  .nav.is-scrolled .nav__bar::before, .nav.is-open .nav__bar::before { opacity: 1; visibility: visible; transition: opacity .4s ease-in-out, visibility 0s; }
  /* rounded controls, as in the capsule */
  .nav__link { border-radius: 999px; }
  .nav__actions .btn { height: 36px; padding-inline: 16px; font-size: 14px; border-radius: 999px; }
  .nav__grade, .nav__toggle { width: 36px; height: 36px; border-radius: 999px; }
  /* the Product panel hangs under the capsule as a rounded card of the same glass, near solid */
  .nav__menu {
    top: calc(100% + 8px); border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
    background: color-mix(in oklab, var(--bg) 94%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
    box-shadow: 0 18px 40px -20px rgb(17 22 21 / .35);
  }
  @media (max-width: 1023px) {
    .nav__bar { height: calc(var(--nav) - 8px); margin-top: 4px; }
    .nav.is-scrolled .nav__bar, .nav.is-open .nav__bar { padding-inline: 12px 6px; }
    .nav__actions .btn { height: 40px; } .nav__grade, .nav__toggle { width: 40px; height: 40px; }
  }
  @media (prefers-reduced-motion: reduce) { .nav__bar, .nav__bar::before { transition: none; } }
  @media (prefers-reduced-transparency: reduce) { .nav__bar::before, .nav__menu { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; } }

  /* home: why customers choose OQLIS, four linked reasons, then a customer's words beside one number */
  .why__item { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .why__item:hover { transform: translateY(-2px); border-color: var(--line-strong); }
  .why__item b { font-weight: 500; font-size: var(--t-card); margin-top: var(--s-3); }
  .why__item > span:last-child { color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
  .why__ico { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in oklab, var(--action) 14%, transparent); color: var(--action); }
  .why__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .why__proof { margin-top: var(--s-9); }
  .why__proof blockquote { font-size: clamp(20px, .7vw + 15px, 26px); }
  .why__proof .person { margin-top: var(--s-5); }
  @media (max-width: 1023px) { .why .why__item { grid-column: auto / span 6; } }
  @media (max-width: 639px) { .why .why__item { grid-column: 1 / -1; } }

  /* home: customers, their logos on white tiles, then three stories each with its number */
  .cust-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-6); }
  .cust-row li { height: 80px; display: grid; place-items: center; padding: 12px 18px; border-radius: var(--r-md); background: #fff; border: 1px solid rgb(17 22 21 / .08); }
  .cust-row img { max-width: 100%; max-height: 48px; object-fit: contain; }
  @media (max-width: 1023px) { .cust-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .proof { margin-top: var(--s-6); }
  .proof__card { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none;
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
  .proof__card:hover { transform: translateY(-2px); border-color: var(--line-strong); }
  .proof__card .t-stat { margin-top: var(--s-3); font-size: clamp(32px, 1vw + 24px, 44px); }
  @media (max-width: 1023px) { .proof .proof__card { grid-column: 1 / -1; } }

  /* home on a phone: the reasons and the customers each take two screens */
  @media (max-width: 639px) {
    #why, #customers:has(.proof) { --h: 2; }
    #perspectives:has(.tabs) { --h: 2; }
  }

  /* the perspectives' own colours, as the product's switch shows them (web/admin/src/styles/tokens.css: --tone-*) */
  :root { --pc-view: #2f6fd6; --pc-create: #c8457f; --pc-discover: #13907a; --pc-orchestrate: #b8741a; --pc-control: #c8503a; }
  html[data-grade="evening"] { --pc-view: #6aa8ff; --pc-create: #ef7fb0; --pc-discover: #43c3a8; --pc-orchestrate: #e6a24a; --pc-control: #f2836b; }
  [data-pc="view"] { --pc: var(--pc-view); }
  [data-pc="create"] { --pc: var(--pc-create); }
  [data-pc="discover"] { --pc: var(--pc-discover); }
  [data-pc="orchestrate"] { --pc: var(--pc-orchestrate); }
  [data-pc="control"] { --pc: var(--pc-control); }
  .pc-ico { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; flex: none;
    color: var(--pc); background: color-mix(in oklab, var(--pc) 14%, transparent); }
  .pc-ico svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }


/* home, your data: connect, model, use */
.steps3 { margin-top: var(--s-8); }
.steps3 .card { display: grid; grid-template-rows: auto auto auto 1fr; gap: var(--s-2); }
.steps3 h3 { font-size: var(--t-h4, 1.25rem); }
.steps3__k { font: 500 var(--t-label)/1.4 var(--font-mono); color: var(--pc); }
.steps3__pic { padding: 12px; margin-top: var(--s-4); align-self: end; background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--pc) 10%, #fff), #fff 60%); }
.steps3__dot { background: var(--pc) !important; width: 10px !important; height: 10px !important; min-width: 0 !important; border-radius: 50% !important; align-self: center; }
.engs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.eng { display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; border: 1px solid rgb(17 22 21 / .08); border-radius: 8px; font-size: 12px; color: #3d4343; background: #fff; white-space: nowrap; overflow: hidden; }
.eng img { width: 16px; height: 16px; flex: none; }
.eng--more { color: #6a7070; justify-content: center; }
.steps3 .m-row img { width: 20px; height: 20px; }
@media (max-height: 820px) and (min-width: 1024px) { .steps3 .m-rows .m-row:nth-child(4), .engs .eng:nth-child(n+10):not(.eng--more) { display: none; } .steps3 { margin-top: var(--s-6); } }
@media (max-width: 1023px) { .steps3 .card { grid-column: span 12; } }

/* the source chip in the hero window bar */
.ow__src { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 999px; background: #fff; color: #3d4343; font: 400 12px/1 var(--font-mono); }
.ow__src img { width: 14px; height: 14px; }
@media (max-width: 639px) { .ow__bar .ow__src { display: none; } }

/* home, the enterprise OS: questions in, the harness, assets out, all standing on the data platform */
.osd { margin-top: var(--s-8); padding: var(--s-7); border-radius: var(--r-lg); background: radial-gradient(80% 70% at 50% 0%, color-mix(in oklab, var(--pc-create) 12%, var(--surface)), var(--surface) 70%); border: 1px solid var(--line); }
.osd__row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.1fr) 40px minmax(0, 1fr); align-items: center; gap: var(--s-4); }
.osd__k { display: flex; align-items: center; gap: 8px; font: 500 var(--t-label)/1.4 var(--font-mono); color: var(--muted); margin-bottom: var(--s-2); }
.osd__col, .osd__core { display: grid; gap: 8px; align-content: center; }
.osd__q { padding: 10px 14px; border-radius: 14px 14px 14px 4px; background: var(--bg); border: 1px solid var(--line); font-size: var(--t-small); }
.osd__arrow svg { width: 40px; height: 12px; fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.osd__core { padding: var(--s-5); border-radius: var(--r-md); background: #16191a; color: #eef0f0; box-shadow: 0 30px 60px -36px rgb(0 0 0 / .55); }
.osd__core .osd__k { color: #a7b0b0; }
.osd__s { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: rgb(255 255 255 / .07); font-size: var(--t-small); }
.osd__s::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); flex: none; }
.osd__a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--pc); font-size: var(--t-small); font-weight: 500; }
.osd__a em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--pc); }
.osd__ground { display: grid; grid-template-columns: repeat(3, 1fr); width: 36%; margin: 0 auto; height: 28px; }
.osd__ground i { justify-self: center; width: 2px; background: repeating-linear-gradient(to bottom, var(--pc-discover) 0 4px, transparent 4px 8px); }
.osd__base { display: grid; grid-template-columns: auto repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); background: color-mix(in oklab, var(--pc) 12%, var(--bg)); border: 1px solid color-mix(in oklab, var(--pc) 30%, transparent); }
.osd__base .osd__k { margin: 0; color: var(--pc); }
.osd__b { display: grid; gap: 2px; font-weight: 500; font-size: var(--t-small); }
.osd__b em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 12px; }
.osd__link { font-size: var(--t-small); white-space: nowrap; }
@media (max-height: 820px) and (min-width: 1024px) { .osd { margin-top: var(--s-6); padding: var(--s-5); } .osd__s, .osd__a, .osd__q { padding-block: 7px; } .osd__ground { height: 18px; } }
@media (max-width: 1023px) {
  .osd__row { grid-template-columns: minmax(0, 1fr); }
  .osd__arrow { justify-self: center; transform: rotate(90deg); }
  .osd__base { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .osd__base .osd__k, .osd__link { grid-column: 1 / -1; }
}
@media (max-width: 639px) { .osd { padding: var(--s-4); } .osd__q:nth-child(n+4), .osd__a:nth-child(n+4) { display: none; } .osd__base { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 1023px) { #data { --h: 2; } }
@media (max-width: 639px) { #os { --h: 2; } .steps3 .card:not(:first-child) .steps3__pic { display: none; } }

/* the Product menu: the stack on the left, then a column for each layer */
.mm { row-gap: var(--s-5); }
.mm__k { display: flex; align-items: center; gap: 8px; }
.mm__k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--layer); }
[data-layer="harness"] { --layer: var(--pc-create); }
[data-layer="data"] { --layer: var(--pc-discover); }
[data-layer="run"] { --layer: var(--ink); }
.mm__col a { padding: 6px 0; }
.mm__stack { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mm__stack:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.mm__layer { display: grid; gap: 1px; padding: 10px 12px; border-radius: 10px; font-weight: 500; font-size: 14px; border-left: 3px solid var(--layer); background: var(--bg); }
.mm__layer em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--muted); }
.mm__layer--h { --layer: var(--pc-create); } .mm__layer--d { --layer: var(--pc-discover); } .mm__layer--r { --layer: var(--ink); }
.mm__more { margin-top: 4px; font-size: var(--t-small); font-weight: 500; color: var(--action); }
.mm__more::after { content: " \2192"; }
/* the Perspectives menu: five coloured doors and a sixth to compare them */
.mpm { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.mp { display: grid; gap: 6px; align-content: start; padding: 14px; border-radius: 16px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; background: linear-gradient(180deg, color-mix(in oklab, var(--pc, var(--ink)) 9%, transparent), transparent 70%); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.mp:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--pc, var(--ink)) 45%, transparent); }
.mp b { font-weight: 500; margin-top: 4px; }
.mp > span:last-child { font-size: 13px; line-height: 1.4; color: var(--muted); }
.mp--all { background: var(--surface); align-content: end; }
.mp--all b::after { content: " \2192"; }
@media (max-width: 1023px) {
  .nav.is-open .mm__stack { display: none; }
  .nav.is-open .mm__col { grid-column: 1 / -1; }
  .nav.is-open .mpm { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .nav.is-open .mp { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; border: 0; border-radius: 0; padding: 8px 0; background: none; }
  .nav.is-open .mp .pc-ico { grid-row: span 2; width: 32px; height: 32px; }
  .nav.is-open .mp b { margin: 0; }
  .nav.is-open .mp--all { display: none; }
}

/* a chapter label above a home heading: which layer of the stack this section shows */
.chap { display: flex; align-items: center; gap: 8px; margin-bottom: var(--s-3); font: 500 var(--t-label)/1.4 var(--font-mono); letter-spacing: .02em; color: var(--muted); }
.chap::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--layer, var(--ink)); }
[data-layer="roles"] { --layer: conic-gradient(var(--pc-view) 0 20%, var(--pc-create) 0 40%, var(--pc-discover) 0 60%, var(--pc-orchestrate) 0 80%, var(--pc-control) 0); }
.next-row { margin-top: var(--s-8); }
@media (max-width: 1023px) { .next-row > * { grid-column: span 12 !important; } .next-row { row-gap: var(--s-3); } }

/* the questions: three columns of three */
.faq-cols { margin-top: var(--s-8); }
.faq-cols .faq__item h3 { font-size: var(--t-body); }
.faq-cols .faq__item p { color: var(--muted); font-size: var(--t-small); line-height: 1.55; }
@media (max-height: 820px) and (min-width: 1024px) { .faq-cols { margin-top: var(--s-6); } .faq-cols .faq__item { padding-block: var(--s-4); } }
@media (max-width: 1023px) { .faq-cols > .faq { grid-column: span 12; } .faq-cols > .faq + .faq > .faq__item:first-child { padding-top: var(--s-5); } }

@media (max-width: 639px) { .faq-cols > .faq:first-child > .faq__item:nth-child(3), .faq-cols > .faq:nth-child(3) > .faq__item:nth-child(n+2) { display: none; } }
@media (min-width: 640px) and (max-width: 1023px) { #os { --h: 2; } }
@media (max-height: 820px) and (min-width: 1024px) {
  #os .t-lead { font-size: 17px; }
  .osd { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); }
  .osd__s, .osd__a, .osd__q { padding-block: 5px; }
  .osd__core { padding: var(--s-4); gap: 6px; }
  .osd__col, .osd__core { gap: 6px; }
  .osd__k { margin-bottom: 2px; }
  .osd__ground { height: 14px; }
  .osd__base { padding-block: var(--s-3); }
}
@media (max-height: 820px) and (min-width: 1024px) { .osd__b em { display: none; } .osd__ground { height: 10px; } }
/* the map's parts are doors to their pages */
a.osd__a, a.osd__core, a.osd__b { color: inherit; text-decoration: none; transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
a.osd__a:hover { transform: translateX(3px); border-color: var(--pc); }
a.osd__core { display: grid; color: #eef0f0; }
a.osd__core:hover { transform: translateY(-2px); box-shadow: 0 36px 70px -36px rgb(0 0 0 / .65); }
a.osd__b:hover { color: var(--pc); }
.osd__row:has(a.osd__a:hover) .osd__arrow svg, .osd__row:has(a.osd__core:hover) .osd__arrow svg { stroke: var(--action); }
.osd__arrow svg { transition: stroke var(--dur) var(--ease); }
/* a page's last section on a phone: its closing cards and next steps take two screens rather than run under the footer */
@media (max-width: 639px) { main > section:last-child { --h: 2; } }
html[data-grade="evening"] .osd__core { border: 1px solid rgb(255 255 255 / .12); background: #0f1312; }
/* a perspective page says which layer of the stack it belongs to */
.kicker__layer { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; padding-left: 10px; border-left: 1px solid var(--line-strong); color: var(--muted); text-decoration: none; font-weight: 400; }
.kicker__layer::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--layer); }
.kicker__layer:hover { color: var(--ink); }
/* text on tinted grounds keeps 4.5:1: perspective colours mixed toward the ink for small type */
.osd__a em { color: color-mix(in oklab, var(--pc) 62%, var(--ink)); }
.osd__base .osd__k { color: color-mix(in oklab, var(--pc) 55%, var(--ink)); }
.osd__k { color: color-mix(in oklab, var(--muted) 70%, var(--ink)); }
#why .person .muted { color: color-mix(in oklab, var(--muted) 60%, var(--ink)); }
/* the map's three columns share one top line; the arrows sit level with the harness */
.osd__row { align-items: start; }
.osd__arrow { align-self: center; }
@media (max-width: 639px) { #faq .faq-icons { display: none; } }
.faq-cols .faq__item p { color: color-mix(in oklab, var(--muted) 65%, var(--ink)); }
@media (max-width: 639px) { .hero .pill > span:first-child { display: none; } .engs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .engs .eng:nth-child(n+7):not(.eng--more) { display: none; } }

/* evening: a band is a deep tone with light words, never a pale slab on a dark page */
html[data-grade="evening"] .bg-band {
  --tone: #17211f; --tone-ink: #eef1f0;
  --muted: color-mix(in oklab, var(--tone-ink) 72%, var(--tone));
  --accent: var(--p-accent); --accent-ink: var(--p-accent-ink);
  --surface: #1f2b29; --card: #1c2725;
  --action: var(--tone-ink); --action-ink: var(--tone);
  --g-hi: color-mix(in oklab, var(--tone) 90%, white);
}
/* UI fragments: placeholders and small times at 4.5:1 in both grades; initials light on their dark disc at night */
.ui-chat__ph, .ui-note__title time { color: color-mix(in oklab, var(--u-soft, #6b6b6b) 62%, var(--u-ink, #111)); }
html[data-grade="evening"] .ui-avatar { color: oklch(0.9 0.05 var(--h)); }

/* evening: inside a white product window the perspective colours keep their day shades, so coloured words stay readable on white */
html[data-grade="evening"] :is([data-pc="view"] :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow), :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow) [data-pc="view"], :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow)[data-pc="view"]) { --pc: #2f6fd6; }
html[data-grade="evening"] :is([data-pc="create"] :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow), :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow) [data-pc="create"], :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow)[data-pc="create"]) { --pc: #c8457f; }
html[data-grade="evening"] :is([data-pc="discover"] :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow), :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow) [data-pc="discover"], :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow)[data-pc="discover"]) { --pc: #13907a; }
html[data-grade="evening"] :is([data-pc="orchestrate"] :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow), :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow) [data-pc="orchestrate"], :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow)[data-pc="orchestrate"]) { --pc: #b8741a; }
html[data-grade="evening"] :is([data-pc="control"] :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow), :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow) [data-pc="control"], :is(.mw, .pw, .host, .dstack .dlayer, .m-phone, .ow)[data-pc="control"]) { --pc: #c8503a; }
/* evening: the current perspective's pill keeps white words on a deep shade of its colour */
html[data-grade="evening"] .p-sw a[aria-current="page"] { background: color-mix(in oklab, var(--pc) 58%, #000); border-color: transparent; }

/* the hero window: a shared project, people and the assistant in one conversation beside its documents */
.ow__avs { display: flex; }
.ow__avs i, .ow__who i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font: 600 10px/1 var(--font-text); font-style: normal;
  background: oklch(0.9 0.05 var(--h)); color: oklch(0.38 0.08 var(--h)); box-shadow: 0 0 0 2px #f1f3f3; }
.ow__avs i + i { margin-left: -6px; }
.ow__ai { background: #16191a !important; } .ow__ai img { width: 12px; height: 12px; }
.ow__tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.ow__tabs span { padding: 4px 8px; border-radius: 999px; font-size: 11.5px; color: #5f6565; background: #f1f3f3; }
.ow__tabs span.is-on { background: #16191a; color: #fff; }
.ow__k { font: 500 11px/1.3 var(--font-mono); color: #5f6565; margin: 6px 4px 4px; }
.ow__doc { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; font-size: 13px; }
.ow__doc b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow__ty { flex: none; width: 46px; text-align: center; padding: 2px 0; border-radius: 5px; font: 600 10px/1.4 var(--font-text); font-style: normal; color: #fff; }
.ow__ty--sl { background: #95600f; } .ow__ty--sh { background: #13805f; } .ow__ty--dc { background: #2f6fd6; } .ow__ty--ml { background: #c8457f; }
.ow__who { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #5f6565; margin-top: 2px; }
.ow__who i { width: 20px; height: 20px; font-size: 9px; box-shadow: none; }
.ow__them { justify-self: start; max-width: 86%; padding: 9px 13px; border-radius: 4px 16px 16px 16px; background: #eef3fb; }
@media (max-height: 820px) { .ow__chat .ow__who:first-child { display: none; } .ow__doc:nth-of-type(n+6) { display: none; } }
@media (max-width: 639px) { .ow__avs { display: none; } .ow__chat .ow__who { display: none; } }

/* home, three questions: each answered, with a small proof */
[data-layer="work"] { --layer: var(--pc-view); }
.q3 { margin-top: var(--s-8); }
.q3__c { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: var(--s-3); --c-pad: var(--s-6); border-top: 3px solid var(--layer) !important; }
.q3__n { font: 500 var(--t-label)/1 var(--font-mono); color: var(--muted); }
.q3__c h3 { font-size: var(--t-card); font-weight: 500; }
.q3__c > p:not(.q3__n) { color: var(--muted); font-size: var(--t-small); line-height: 1.55; }
.q3__pic { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border-radius: 12px; background: #fff; border: 1px solid rgb(17 22 21 / .08); min-height: 56px; }
.q3__sug { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #16191a; }
.q3__sug s { color: #9b2c22; } .q3__sug b { color: #17655c; font-weight: 600; }
.q3__sug em { font-style: normal; padding: 3px 8px; border-radius: 999px; background: #eff1f1; }
.q3__sug em:first-of-type { background: #1c776d; color: #fff; }
.q3__logos img { width: 22px; height: 22px; }
.q3__c .link { font-size: var(--t-small); }
/* home, the workspace: six doors */
.suite { margin-top: var(--s-8); row-gap: var(--gutter); }
.suite__t { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); row-gap: 4px; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--ink); text-decoration: none;
  background: linear-gradient(160deg, color-mix(in oklab, var(--pc) 8%, transparent), transparent 60%); transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.suite__t:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--pc) 45%, var(--line)); }
.suite__ico { grid-row: span 2; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--pc); background: color-mix(in oklab, var(--pc) 14%, transparent); }
.suite__ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.suite__t b { font-weight: 500; font-size: var(--t-card); }
.suite__t > span:nth-child(3) { color: var(--muted); font-size: var(--t-small); line-height: 1.5; }
@media (max-height: 820px) and (min-width: 1024px) { .q3, .suite { margin-top: var(--s-6); } .q3__c { --c-pad: var(--s-5); } .suite__t { padding: var(--s-4); } }
@media (max-width: 1023px) { .q3 > *, .suite > * { grid-column: span 12 !important; } .suite > * { grid-column: span 6 !important; } #questions { --h: 2; } }
@media (max-width: 639px) { #work { --h: 2; } }
@media (max-width: 639px) { .suite > * { grid-column: span 12 !important; } .q3__c > p:not(.q3__n) { font-size: 14px; } }
.mm__os { display: flex; align-items: baseline; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--surface); color: var(--ink); text-decoration: none; font-size: var(--t-small); transition: background var(--dur) var(--ease); }
.mm__os b { font-weight: 500; } .mm__os span { color: var(--muted); }
.mm__os::after { content: "\2192"; margin-left: auto; color: var(--action); }
.mm__os:hover { background: color-mix(in oklab, var(--surface) 80%, var(--ink)); }
@media (max-width: 1023px) { .nav.is-open .mm__os { display: none; } }
/* each workspace door shows a glimpse of the real thing */
.suite__t { grid-template-rows: auto 1fr auto; }
.suite__t > span:nth-child(3) { grid-column: 2; }
.sp-pic { grid-column: 1 / -1; margin-top: var(--s-4); display: grid; gap: 6px; padding: 10px; border-radius: 10px; background: #fff; color: #16191a; border: 1px solid rgb(17 22 21 / .08); font-size: 12px; line-height: 1.35; min-height: 74px; align-content: center; }
.sp-row { display: flex; align-items: center; gap: 8px; }
.sp-row i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font: 600 9px/1 var(--font-text); font-style: normal; background: oklch(0.9 0.05 var(--h)); color: oklch(0.38 0.08 var(--h)); }
.sp-row em { margin-left: auto; font-style: normal; color: #5c6262; }
.sp-row b { font-weight: 500; }
.sp-draft { color: #5c6262; } .sp-draft em { color: #8a5a12; background: #fbefdc; padding: 2px 8px; border-radius: 999px; }
.sp-b { justify-self: start; max-width: 92%; padding: 6px 10px; border-radius: 4px 12px 12px 12px; background: #eef3fb; }
.sp-b--me { justify-self: end; border-radius: 12px 4px 12px 12px; background: #f1f3f3; }
.sp-b u { text-decoration: none; color: #1f4e9c; background: #e8f0fd; border-radius: 3px; padding: 0 2px; }
.sp-doc { font-family: Georgia, serif; font-size: 12.5px; }
.sp-doc s { color: #9b2c22; } .sp-doc ins { text-decoration: none; color: #17655c; background: #e3f3f0; border-radius: 3px; padding: 0 2px; }
.sp-acc { display: flex; gap: 6px; justify-content: flex-end; font-family: var(--font-text); }
.sp-acc em { font-style: normal; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eff1f1; } .sp-acc em:first-child { background: #1c776d; color: #fff; }
.sp-sh { grid-template-columns: 1.2fr 1fr .8fr; gap: 0; padding: 0; overflow: hidden; }
.sp-sh i { font-style: normal; padding: 5px 8px; border-right: 1px solid rgb(17 22 21 / .07); border-bottom: 1px solid rgb(17 22 21 / .07); font-variant-numeric: tabular-nums; }
.sp-sh i:nth-child(-n+3) { background: #f4f5f5; color: #5c6262; font-weight: 500; }
.sp-sh i.on { box-shadow: inset 0 0 0 2px #13805f; background: #effaf6; }
.sp-sl { grid-template-columns: 1.3fr 1fr; gap: 0; padding: 0; overflow: hidden; aspect-ratio: 16 / 6; }
.sp-sl__l { padding: 10px; display: grid; gap: 5px; align-content: start; } .sp-sl__l b { font: 500 13px/1.2 Georgia, serif; color: #1c2b4a; }
.sp-sl__l i { height: 5px; border-radius: 3px; background: #e4e7ec; width: 90%; } .sp-sl__l i + i { width: 60%; }
.sp-sl__r { background: #1c2b4a; display: flex; align-items: end; gap: 5px; padding: 10px; }
.sp-sl__r i { flex: 1; border-radius: 2px 2px 0 0; background: #6d84b5; } .sp-sl__r i.on { background: #e9b949; }
@media (max-height: 820px) and (min-width: 1024px) { .sp-pic { margin-top: var(--s-3); min-height: 0; padding: 8px; } .sp-row:nth-child(2), .sp-b--me { display: none; } .sp-sh i:nth-child(n+7) { display: none; } }
@media (max-width: 639px) { .suite__t:nth-child(n+3) .sp-pic { display: none; } }
.sp-doc { display: block; } .sp-doc .sp-acc { margin-top: 8px; }

/* the hero: the workspace, its apps down a rail, one pane open at a time */
.ws__body { grid-template-columns: 150px minmax(0, 1fr); }
.ws__rail { display: grid; align-content: start; gap: 2px; padding: 10px 8px; border-right: 1px solid rgb(17 22 21 / .08); background: #fafbfb; }
.ws__tab { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: #3d4343; font: 500 13px var(--font-text); text-align: left; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.ws__tab svg { width: 17px; height: 17px; fill: none; stroke: var(--tc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ws__tab:hover { background: #eff1f1; color: #16191a; }
.ws__tab[aria-selected="true"] { background: #fff; color: #16191a; box-shadow: 0 0 0 1px rgb(17 22 21 / .08), 0 2px 6px -3px rgb(17 22 21 / .2); }
.ws__tab:focus-visible { outline: 2px solid var(--tc); outline-offset: 1px; }
.ws__note { margin: 12px 8px 0; font: 400 11px/1.4 var(--font-mono); color: #5f6565; }
.ws__pane { min-width: 0; }
.ws__pane[hidden] { display: none; }
.ws__in { display: grid; gap: 12px; align-content: start; padding: 16px 20px; }
.ws__h { display: flex; align-items: center; gap: 10px; } .ws__h b { font-weight: 500; }
.ws__src { margin-left: auto; font-size: 12px; color: #5f6565; }
.ws__mail { font-size: 13.5px; line-height: 1.55; color: #1f2a37; }
.ws__draft { border: 1px dashed rgb(17 22 21 / .2); background: #fff; }
.ws .m-slide { max-width: 380px; }
@media (max-height: 820px) { .ws .sh > span:nth-child(n+21) { display: none; } .ws .docp h4, .ws__note { display: none; } }
@media (max-width: 1023px) { .ws__body { grid-template-columns: 120px minmax(0, 1fr); } .ws__note { display: none; } }
@media (max-width: 639px) {
  .ws__body { grid-template-columns: minmax(0, 1fr); }
  .ws__rail { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid rgb(17 22 21 / .08); padding: 6px; }
  .ws__tab { height: 32px; padding: 0 9px; font-size: 12px; flex: none; }
  .ws__in { padding: 12px 14px; }
  .ws .sg { display: none; }
}

/* the hero's three promises, one quiet line under the buttons */
.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: var(--s-5); font: 500 var(--t-label)/1.4 var(--font-mono); }
.trust a { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.trust a::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--action); }
.trust a:hover { color: var(--ink); }
/* the gateway: three promises */
.sov { display: grid; gap: 0; }
.sov li { display: grid; gap: 4px; padding: var(--s-4) 0; border-top: 1px solid var(--line); }
.sov li:last-child { border-bottom: 1px solid var(--line); }
.sov b { font-weight: 500; }
.sov span { color: var(--muted); font-size: var(--t-small); line-height: 1.55; }
@media (max-height: 820px) and (min-width: 1024px) { .trust { margin-top: var(--s-4); } .sov li { padding: var(--s-3) 0; } #gateway .t-lead { display: none; } }
@media (max-width: 639px) { .trust { display: none; } }

/* home, the platform switcher: one promise, the parts as pills, one open at a time */
.pf__head { display: grid; justify-items: center; text-align: center; }
.pf__chap { justify-content: center; }
.pf__head h2 { max-width: 18ch; }
.pf__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: var(--s-7); }
.pf__pill { height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 15px var(--font-text); cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pf__pill:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.pf__pill[aria-selected="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pf__pill:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.pf__panes { margin-top: var(--s-8); }
.pf__pane[hidden] { display: none; }
.pf__text { display: grid; gap: var(--s-4); justify-items: start; align-content: center; }
.pf__text h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(26px, 1.2vw + 18px, 36px); line-height: 1.12; letter-spacing: var(--display-tracking); }
.pf__text p { color: var(--muted); }
.pf__pic { border-radius: var(--r-lg); padding: 28px; min-height: 380px; display: grid; place-items: center;
  background: radial-gradient(120% 100% at 90% 0%, color-mix(in oklab, var(--pc) 22%, var(--surface)), var(--surface) 62%); }
.pf__pic > * { width: 100%; max-width: 560px; }
/* the platform pane's own picture: the layers, the base dark */
.stk { display: grid; gap: 8px; }
.stk__l { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: #fff; color: #16191a; border: 1px solid rgb(17 22 21 / .08); border-left: 4px solid var(--layer); font-size: 13px; }
.stk__l b { font-weight: 500; font-size: 15px; } .stk__l span { color: #5f6565; }
.stk__l--base { background: #16191a; color: #eef0f0; border-color: transparent; border-left-color: #2aa79a; } .stk__l--base span { color: #a7b0b0; }
@media (max-height: 820px) and (min-width: 1024px) { .pf__pills { margin-top: var(--s-5); } .pf__panes { margin-top: var(--s-6); } .pf__pic { min-height: 0; padding: 20px; } .pf__pill { height: 38px; padding: 0 16px; font-size: 14px; } .pf__pic .mw__body { gap: 8px; } }
@media (max-width: 1023px) { .pf__pane > * { grid-column: span 12 !important; } .pf__pic { margin-top: var(--s-5); } }
@media (max-width: 639px) {
  .pf__pills { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; margin-inline: calc(-1 * var(--gut, 24px)); padding: 2px var(--gut, 24px); scrollbar-width: none; }
  .pf__pill { flex: none; height: 38px; padding: 0 14px; font-size: 14px; }
  .pf__pic { padding: 14px; min-height: 0; }
  .pf__head { text-align: left; justify-items: start; } .pf__chap { justify-content: flex-start; }
}
/* every pane holds its place in one cell, so the section keeps the tallest pane's height and never jumps
   when a pill is chosen; hidden panes stay out of sight and out of the accessibility tree */
.pf__panes { display: grid; }
.pf__pane { grid-area: 1 / 1; }
.pf__pane[hidden] { display: grid !important; visibility: hidden; pointer-events: none; }
@media (max-height: 820px) and (min-width: 1024px) { .pf__pic > * { zoom: .7; } .pf__panes { margin-top: var(--s-5); } .pf__head h2 { font-size: clamp(32px, 3vw, 40px); } .pf__chap { display: none; } .pf__text { gap: var(--s-3); } }
@media (min-width: 640px) and (max-width: 1023px) {
  .pf__pane > .pf__text { grid-column: 1 / span 5 !important; }
  .pf__pane > .pf__pic { grid-column: 6 / span 7 !important; margin-top: 0; padding: 14px; min-height: 0; }
  .pf__pic > * { zoom: .72; }
  .pf__text h3 { font-size: 24px; } .pf__text p { font-size: 15px; }
}
@media (max-width: 639px) { #platform { --h: 2; } }