/* North 440 Systems - assets/styles.css */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg, video { max-width: 100%; }
[hidden] { display: none !important; }

:root {
    color-scheme: light;
    /* Precious metals: soft gold, silver, onyx, with cyan in the rose-gold slot */
    --ground: #f2eee8;
    --card: #fbf9f5;
    --card-2: #efeae1;
    --ink: #3a3a3c;
    --ink-soft: #49494b;
    --muted: #646466;
    --silver: #8e8e90;
    --gold: #d1bfa7;
    --accent: #17707e;
    --accent-hi: #0f5b67;
    --accent-fill: #6fc3cd;
    --on-accent: #232325;
    --flag: #8a6f4e;
    --device: #c3c8c9;
    --device-2: #a9afb0;
    --accent-fill-hi: #55b1bd;
    --tile-ink-bg: #49494b;
    --tile-ink-fg: #f6f3ee;
    --tile-ink-fg-soft: #c5c0b7;
    --tile-accent-bg: #6fc3cd;
    --tile-accent-fg: #232325;
    --tile-accent-fg-soft: #2f4a4f;
    --hair: rgba(73, 73, 75, 0.14);
    --hair-2: rgba(73, 73, 75, 0.22);
    --shadow: 0 1px 2px rgba(73, 73, 75, 0.06), 0 8px 28px rgba(73, 73, 75, 0.10);
    --shadow-sm: 0 1px 3px rgba(73, 73, 75, 0.13);
    --nav-bg: rgba(242, 238, 232, 0.74);
    --seg-track: rgba(73, 73, 75, 0.08);

    --f-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    --f-plate: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --micro: 0.7rem;
    --body: 1.0625rem;
    --t-sub: clamp(1.15rem, 1rem + 0.8vw, 1.5rem);
    --t-sec: clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    --t-hero: clamp(2.7rem, 1.7rem + 5vw, 5.5rem);

    --r-sm: 10px;
    --r-md: 16px;
    --r-lg: 22px;
    --gap: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  }

  * { box-sizing: border-box; }

  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--f-ui);
    font-size: var(--body);
    line-height: 1.6;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { margin: 0; text-wrap: balance; letter-spacing: -0.032em; line-height: 1.06; font-weight: 600; }
  p { margin: 0; text-wrap: pretty; }
  li { text-wrap: pretty; }

  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; text-underline-offset: 3px; }
  a:focus-visible, button:focus-visible {
    outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px;
  }

  .wrap { max-width: 1040px; margin-inline: auto; padding-inline: clamp(20px, 5vw, 44px); }

  .eyebrow {
    font-family: var(--f-mono); font-size: var(--micro); letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--muted); font-weight: 500;
  }

  /* ============ sticky translucent nav ============ */

  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--nav-bg);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid var(--hair);
  }

  .topbar-inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem 1.5rem; padding-block: 0.7rem; flex-wrap: wrap;
  }

  .brand {
    font-family: var(--f-plate); font-size: 0.82rem; font-weight: 900;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
    background: none; border: 0; padding: 0; cursor: pointer;
  }
  .brand span { font-weight: 800; color: var(--muted); }

  /* segmented control */
  .seg {
    display: inline-flex; gap: 2px; padding: 3px;
    background: var(--seg-track); border-radius: 999px;
  }
  .seg button {
    font-family: var(--f-ui); font-size: 0.8rem; font-weight: 500;
    letter-spacing: -0.005em; color: var(--ink-soft);
    background: transparent; border: 0; border-radius: 999px;
    padding: 0.42rem 0.95rem; cursor: pointer;
  }
  .seg button:hover { color: var(--ink); }
  .seg button[aria-current="page"] {
    background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
  }

  /* ============ buttons ============ */

  .btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: var(--f-ui); font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em;
    background: var(--accent-fill); color: var(--on-accent);
    border: 0; border-radius: 999px; padding: 0.78rem 1.5rem; cursor: pointer;
  }
  .btn:hover { background: var(--accent-fill-hi); }

  .btn-plain {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-family: var(--f-ui); font-size: 0.95rem; font-weight: 500;
    color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer;
  }
  .btn-plain:hover { text-decoration: underline; text-underline-offset: 3px; }
  .btn-plain .chev { font-size: 1.05em; line-height: 1; }

  .btn-row { display: flex; flex-wrap: wrap; gap: 1.25rem 1.75rem; align-items: center; }

  /* ============ hero ============ */

  .hero { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem) clamp(2.5rem, 2rem + 3vw, 4rem); text-align: center; }

  .plate {
    display: inline-block; position: relative;
    border: 4px solid var(--ink); border-radius: var(--r-sm);
    background: var(--card); padding: 0.7rem 1.1rem 0.55rem;
    margin-bottom: 1.75rem; box-shadow: var(--shadow-sm);
  }
  .plate::after {
    content: ""; position: absolute; inset: 3px;
    border: 1px solid var(--gold); border-radius: 6px; pointer-events: none;
  }
  .plate .cardinal {
    font-family: var(--f-plate); font-size: 0.6rem; font-weight: 800;
    letter-spacing: 0.4em; text-indent: 0.4em; color: var(--ink); display: block;
  }
  .plate .num {
    font-family: var(--f-plate); font-size: 2.5rem; font-weight: 900;
    letter-spacing: -0.045em; line-height: 0.9; color: var(--ink);
    display: block; font-variant-numeric: tabular-nums;
  }

  .hero h1 { font-size: var(--t-hero); font-weight: 700; letter-spacing: -0.04em; }
  .hero .sub {
    font-size: var(--t-sub); color: var(--muted); font-weight: 400;
    max-width: 30ch; margin: 1.15rem auto 0; letter-spacing: -0.015em; line-height: 1.4;
  }
  .hero .btn-row { justify-content: center; margin-top: 2.25rem; }

  /* ============ sections ============ */

  section { padding-block: var(--gap); }
  section + section { padding-top: 0; }

  .sec-head { margin-bottom: 2.25rem; }
  .sec-head h2 { font-size: var(--t-sec); font-weight: 600; }
  .sec-head .eyebrow { display: block; margin-bottom: 0.6rem; }
  .sec-head .intro { margin-top: 0.9rem; color: var(--muted); max-width: 54ch; font-size: var(--t-sub); line-height: 1.45; letter-spacing: -0.015em; }

  .lead { max-width: 30ch; font-size: var(--t-sec); font-weight: 600; line-height: 1.12; }
  .lead-body { max-width: 56ch; color: var(--muted); margin-top: 1.25rem; display: grid; gap: 1rem; }
  .lead-body strong { color: var(--ink); font-weight: 600; }

  /* ============ cards ============ */

  .grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 1.1rem; }

  .card {
    background: var(--card); border-radius: var(--r-lg);
    padding: clamp(1.6rem, 3vw, 2.1rem); box-shadow: var(--shadow);
    display: grid; align-content: start; gap: 0.6rem;
  }
  .card h3 { font-size: 1.35rem; font-weight: 600; }
  .card p { color: var(--muted); font-size: 0.98rem; }
  .card .stack, .card ul { color: var(--muted); }
  .card ul { margin: 0.35rem 0 0; padding-left: 1.1rem; font-size: 0.93rem; display: grid; gap: 0.3rem; }

  /* ============ bento grid ============ */

  .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }

  .bento-cell {
    background: var(--card); border-radius: var(--r-lg);
    padding: clamp(1.5rem, 3vw, 2.1rem); box-shadow: var(--shadow);
    display: grid; align-content: start; gap: 0.5rem;
  }

  .bento-cell .val {
    font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; color: var(--ink);
  }
  .bento-cell p { color: var(--muted); font-size: 0.95rem; }

  .b-lead { grid-column: span 2; grid-row: span 2; align-content: space-between; gap: 1.5rem; }
  /* a phrase, not a number: smaller than the old "Two weeks" so two lines fit
     the tile without crowding the sentence underneath */
  .b-lead .val { font-size: clamp(2rem, 1.5rem + 2vw, 3.1rem); }
  .b-lead p { font-size: 1.05rem; max-width: 26ch; }

  .b-sm { grid-column: span 1; }
  .b-sm .val { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.6rem); }

  .b-mid { grid-column: span 2; }
  .b-mid .val { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.95rem); }

  /* filled metal tiles: onyx and cyan as solid fields, not just text colors */
  .bento-cell.tile-ink { background: var(--tile-ink-bg); box-shadow: none; }
  .bento-cell.tile-ink .val { color: var(--tile-ink-fg); }
  .bento-cell.tile-ink p { color: var(--tile-ink-fg-soft); }

  .bento-cell.tile-accent { background: var(--tile-accent-bg); box-shadow: none; }
  .bento-cell.tile-accent .val { color: var(--tile-accent-fg); }
  .bento-cell.tile-accent p { color: var(--tile-accent-fg-soft); }

  @media (max-width: 900px) {
    .bento { grid-template-columns: repeat(2, 1fr); }
    .b-lead { grid-column: span 2; grid-row: span 1; }
    .b-sm { grid-column: span 1; }
    .b-mid { grid-column: span 2; }
  }

  @media (max-width: 560px) {
    .bento { grid-template-columns: 1fr; }
    .b-lead, .b-sm, .b-mid { grid-column: span 1; }
  }

  /* ============ work entries ============ */

  .entry {
    background: var(--card); border-radius: var(--r-lg);
    padding: clamp(1.6rem, 3vw, 2.1rem); box-shadow: var(--shadow);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
    gap: 0.6rem 2.5rem; align-items: start; margin-bottom: 1.1rem;
  }
  .entry:last-child { margin-bottom: 0; }
  .entry h3 { font-size: 1.45rem; font-weight: 600; }
  .entry .kind {
    font-family: var(--f-mono); font-size: var(--micro); letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 0.45rem;
  }
  .entry p { color: var(--ink-soft); font-size: 0.99rem; }
  .stack { font-family: var(--f-mono); font-size: 0.75rem; color: var(--muted); margin-top: 0.8rem; line-height: 1.8; }

  .group-head { margin: 2.75rem 0 1rem; }
  .group-head:first-of-type { margin-top: 0; }
  .group-head h3 { font-size: 1.05rem; font-weight: 600; color: var(--ink); }
  .group-head p { color: var(--muted); font-size: 0.95rem; max-width: 56ch; margin-top: 0.35rem; }

  .note {
    margin-top: 1.75rem; font-size: 0.95rem; color: var(--muted); max-width: 60ch;
    background: var(--card-2); border-radius: var(--r-md); padding: 1.15rem 1.35rem;
    border-left: 3px solid var(--gold);
  }

  /* ============ cta band ============ */

  .cta {
    background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow);
    padding: clamp(2rem, 4vw, 3.25rem); text-align: center;
    display: grid; gap: 1rem; justify-items: center;
  }
  .cta h2 { font-size: var(--t-sec); font-weight: 600; max-width: 18ch; }
  .cta p { color: var(--muted); max-width: 46ch; font-size: 1.02rem; }
  .cta .btn-row { justify-content: center; margin-top: 0.6rem; }

  /* ============ contact ============ */

  .contact { background: var(--card); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: clamp(1.75rem, 4vw, 2.6rem); display: grid; gap: 1.2rem; max-width: 56ch; }
  .contact h2 { font-size: 1.45rem; font-weight: 600; }
  .contact p { color: var(--muted); font-size: 0.99rem; }
  .contact .lines { display: grid; gap: 0.65rem; font-size: 1.02rem; }
  .contact .where { font-size: 0.88rem; color: var(--muted); }

  .todo {
    font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--flag);
    border: 1px dashed var(--flag); border-radius: 999px;
    padding: 0.18rem 0.55rem; white-space: nowrap;
  }

  footer {
    border-top: 1px solid var(--hair); margin-top: var(--gap);
    padding-block: 1.9rem 3rem;
    display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
    font-size: 0.8rem; color: var(--muted);
  }

  @media (max-width: 760px) {
    .entry { grid-template-columns: 1fr; gap: 0.3rem; }
    .topbar-inner { justify-content: center; padding-block: 0.6rem; }
    .seg { width: 100%; justify-content: center; }
    .seg button { padding-inline: 0.75rem; }
  }

  @media (prefers-reduced-motion: no-preference) {
    .btn, .btn-plain, .seg button, .chip, a {
      transition: background-color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                  color 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .btn:active, .seg button:active { transform: scale(0.97); }

    .card, .bento-cell {
      transition: transform 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
                  box-shadow 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    }
    .card:hover, .bento-cell:hover {
      transform: translateY(-3px);
      box-shadow: 0 2px 4px rgba(73, 73, 75, 0.08), 0 16px 40px rgba(73, 73, 75, 0.15);
    }
  }

  /* ============ anchor-based nav and buttons ============ */

  a.brand { text-decoration: none; }
  a.brand:hover { text-decoration: none; }

  .seg a {
    font-family: var(--f-ui); font-size: 0.8rem; font-weight: 500;
    letter-spacing: -0.005em; color: var(--ink-soft);
    background: transparent; border-radius: 999px;
    padding: 0.42rem 0.95rem; text-decoration: none; white-space: nowrap;
  }
  .seg a:hover { color: var(--ink); text-decoration: none; }
  .seg a[aria-current="page"] {
    background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm);
  }

  a.btn, a.btn-plain { text-decoration: none; }
  a.btn:hover { text-decoration: none; }
  a.btn-plain:hover { text-decoration: underline; text-underline-offset: 3px; }
  a.btn:focus-visible { border-radius: 999px; }

  footer a { color: var(--muted); }
  footer a:hover { color: var(--accent); }


  /* ============ nav grouping + contact pill ============ */

  .navset { display: flex; align-items: center; gap: 0.6rem 0.85rem; flex-wrap: wrap; }

  a.talk {
    font-family: var(--f-ui); font-size: 0.8rem; font-weight: 500;
    letter-spacing: -0.005em; background: var(--accent-fill); color: var(--on-accent);
    border-radius: 999px; padding: 0.45rem 1rem;
    text-decoration: none; white-space: nowrap;
  }
  a.talk:hover { background: var(--accent-fill-hi); text-decoration: none; }
  a.talk:focus-visible { border-radius: 999px; }

  /* the sticky bar would otherwise cover the top of #contact when jumped to */
  #contact { scroll-margin-top: 5rem; }

  @media (max-width: 760px) {
    .navset { gap: 0.5rem; }
    a.talk { padding: 0.4rem 0.8rem; }
  }

  /* Below this the bar cannot hold brand + segments + pill on one line, and a
     two-row sticky header costs vertical space on every scroll. The pill goes:
     the hero CTA is already on screen and #contact is one tap from the segments. */
  @media (max-width: 560px) {
    a.talk { display: none; }
    .topbar-inner { flex-wrap: nowrap; gap: 0.75rem; }
    .brand { font-size: 0.76rem; letter-spacing: 0.06em; white-space: nowrap; }
    .seg button, .seg a { padding: 0.4rem 0.8rem; }
  }


  /* ============ who we work with ============ */

  .who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem 2.5rem; }

  .who-item { border-top: 2px solid var(--ink); padding-top: 0.9rem; }
  .who-item h3 { font-size: 1.2rem; font-weight: 600; margin-bottom: 0.35rem; }
  .who-item p { color: var(--muted); font-size: 0.97rem; }

  .who-note {
    margin-top: 2.25rem; padding-top: 1.3rem; border-top: 1px solid var(--hair);
    color: var(--ink-soft); font-size: 1.05rem; max-width: 64ch; line-height: 1.55;
  }

  @media (max-width: 820px) { .who { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 560px) { .who { grid-template-columns: 1fr; } }

  /* ============ how it fits: two lanes, not a tree ============ */
  /* An org-chart tree said hierarchy, which is the wrong message: North 440 runs
     alongside what is already there. Two lanes between the same two endpoints say
     that, and cost four rules instead of twenty connector segments. */

  .fits { margin: 0; }

  .fits-track { display: flex; align-items: center; gap: 1rem; }

  .fits-end {
    font-family: var(--f-mono); font-size: var(--micro);
    letter-spacing: 0.14em; text-transform: uppercase;
    background: var(--tile-ink-bg); color: var(--tile-ink-fg);
    padding: 0.55rem 0.95rem; border-radius: 8px; white-space: nowrap;
  }

  .fits-rule { flex: 1; height: 2px; background: var(--silver); position: relative; }
  .fits-rule::after {
    content: ""; position: absolute; right: -1px; top: 50%;
    transform: translateY(-50%);
    border-top: 5px solid transparent; border-bottom: 5px solid transparent;
    border-left: 7px solid var(--silver);
  }

  .lane {
    display: grid; grid-template-columns: 14rem minmax(0, 1fr);
    gap: 0.6rem 1.75rem; align-items: center;
    padding: 1.15rem 0; border-top: 1px solid var(--hair);
  }
  .lane:first-of-type { margin-top: 1.6rem; border-top: 1px solid var(--silver); }
  .lane:last-of-type { border-bottom: 1px solid var(--silver); }

  .lane-label {
    font-family: var(--f-mono); font-size: var(--micro);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }

  .lane-items { display: flex; flex-wrap: wrap; gap: 0.45rem; }

  .tag {
    font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.03em;
    background: var(--card-2); color: var(--ink-soft);
    border-radius: 6px; padding: 0.4rem 0.65rem; white-space: nowrap;
  }
  .tag-ours { background: var(--tile-accent-bg); color: var(--tile-accent-fg); font-weight: 500; }

  .fits figcaption {
    margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hair);
    color: var(--ink-soft); font-size: 1.02rem; max-width: 60ch; line-height: 1.55;
  }

  @media (max-width: 680px) {
    .lane { grid-template-columns: 1fr; gap: 0.6rem; align-items: start; }
    .fits-end { font-size: 0.6rem; padding: 0.45rem 0.7rem; letter-spacing: 0.08em; }
    .fits-track { gap: 0.6rem; }
  }

  /* ============ pillars ============ */
  /* one-word labels, so the word carries the card and the sentence sits under it */

  .pillar h3 {
    font-size: 1.15rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--accent);
  }
  .pillar p { font-size: 1.08rem; color: var(--ink); line-height: 1.45; }

  /* the secondary hero CTA jumps here, so clear the sticky bar */
  #build { scroll-margin-top: 5rem; }

  /* ============ hero mark, outline button ============ */

  .hero-mark { display: block; margin-bottom: 1.4rem; }

  .btn-outline {
    background: transparent; color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--silver);
  }
  .btn-outline:hover { background: var(--card); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

  /* ============ lead: three short lines ============ */

  .maybe { font-size: 1.1rem; line-height: 1.8; color: var(--muted); }

  /* ============ pillar deliverables ============ */

  .pillar ul {
    list-style: none; margin: 0.9rem 0 0; padding: 0;
    display: grid; gap: 0;
  }
  .pillar li {
    font-size: 1.02rem; color: var(--ink);
    padding: 0.55rem 0; border-top: 1px solid var(--hair);
  }

  /* ============ selected work teaser ============ */

  .teaser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }

  .teaser-item {
    display: grid; gap: 0.3rem; align-content: start;
    padding: 1.1rem 0; border-top: 2px solid var(--ink);
    text-decoration: none;
  }
  .teaser-item:hover { text-decoration: none; }
  .teaser-item:hover .t-name { color: var(--accent); }

  .t-name { font-size: 1.2rem; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; }
  .t-kind {
    font-family: var(--f-mono); font-size: var(--micro);
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  }
  .teaser-more { margin-top: 1.5rem; }

  /* ============ sign-off ============ */

  .signoff {
    font-size: var(--t-sec); font-weight: 600; letter-spacing: -0.03em;
    line-height: 1.05; color: var(--ink);
  }
  .signoff-sub {
    font-size: var(--t-sub); color: var(--muted); font-weight: 400;
    letter-spacing: -0.012em; margin-top: 0.5rem;
    /* 216 and 440 are the whole line, so let the digits sit evenly */
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 680px) {
    .teaser { grid-template-columns: 1fr; gap: 0; }
  }

  /* ============ device trio ============ */
  /* Inline SVG rather than screenshots: the CSP blocks external images, PNGs of three
     devices would outweigh the entire rest of the page, and vectors stay sharp on a 4K
     display. Geometry follows real proportions -- a 14" MacBook, an 11" iPad portrait
     and an iPhone are roughly 31 : 17.8 : 7.2 wide -- so the trio reads as a family. */

  .devices { margin: 0 0 clamp(2rem, 1.5rem + 2vw, 3rem); }
  .devices svg { display: block; width: 100%; height: auto; max-width: 820px; }

  .dev-body   { fill: var(--device); stroke: var(--device-2); stroke-width: 1; }
  .dev-base   { fill: var(--device-2); }
  .dev-lip    { fill: var(--device); }
  .dev-shadow { fill: url(#n440-shadow); }
  .sh-in      { stop-color: #49494b; stop-opacity: 0.20; }
  .sh-out     { stop-color: #49494b; stop-opacity: 0; }
  .dev-groove { fill: var(--device-2); }
  .dev-notch  { fill: var(--ink); fill-opacity: 0.82; }


  /* ============ screen contents ============ */
  /* The app UI depicted inside the devices. Its own palette on purpose: this is a
     product being shown, not the North 440 brand, and navy chrome with pastel shift
     blocks is what scheduling software actually looks like.

     Everything is a shape. At render size the laptop screen is about 480 CSS px wide,
     so real text would land at 3-4px and be illegible anyway -- and abstracting the
     content is also what makes this safe to publish: no names, no figures, no client. */

  .ui-page       { fill: #ffffff; }
  .ui-rail       { fill: #f4f5f7; }
  .ui-card       { fill: #f7f8fa; }
  .ui-head       { fill: #eef0f3; }
  .ui-rowalt     { fill: #fafbfc; }
  .ui-rowline    { fill: #ffffff; }
  .ui-gridline   { fill: #e3e6ea; }

  .ui-navy       { fill: #1b2d52; }
  .ui-navy2      { fill: #2d4474; }
  .ui-onnavy     { fill: #ffffff; fill-opacity: 0.92; }
  .ui-onnavy-dim { fill: #ffffff; fill-opacity: 0.45; }
  .ui-gold       { fill: #e7c65a; }
  .ui-alert      { fill: #d8574b; }
  .ui-cyan       { fill: #4aa8bc; }
  .ui-cyan-soft  { fill: #cfe7ec; }
  .ui-mark       { fill: #dfe3e9; }

  .ui-text        { fill: #1b2d52; fill-opacity: 0.32; }
  .ui-textstrong  { fill: #1b2d52; fill-opacity: 0.62; }
  .ui-label       { fill: #1b2d52; fill-opacity: 0.18; }
  .ui-navlink     { fill: #2d4474; fill-opacity: 0.75; }
  .ui-icon        { fill: #1b2d52; fill-opacity: 0.30; }

  .ui-ink-card    { fill: #33373d; }
  .ui-oninky      { fill: #ffffff; fill-opacity: 0.90; }
  .ui-oninky-dim  { fill: #ffffff; fill-opacity: 0.45; }

  /* shift blocks */
  .sh-red        { fill: #f2d7d7; }
  .sh-red-ink    { fill: #9c4a46; fill-opacity: 0.55; }
  .sh-green      { fill: #d8e7d2; }
  .sh-green-ink  { fill: #47663c; fill-opacity: 0.55; }
  .sh-blue       { fill: #d3e1f2; }
  .sh-blue-ink   { fill: #3d5c86; fill-opacity: 0.55; }
  .sh-grey       { fill: #e4e6e9; }
  .sh-off        { fill: #fbe6e4; }
  .sh-off-ink    { fill: #b0554e; fill-opacity: 0.5; }
  .sh-gold       { fill: #f0dfae; }
  .sh-gold-ink   { fill: #8a6f2e; fill-opacity: 0.55; }
  .ui-closed     { fill: #f2f3f5; }

  /* role group pills */
  .grp-red   { fill: #d8574b; fill-opacity: 0.80; }
  .grp-green { fill: #4a7a3c; fill-opacity: 0.80; }
  .grp-blue  { fill: #3d6ca8; fill-opacity: 0.80; }
  .grp-red-ink { fill: #ffffff; fill-opacity: 0.70; }