/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
   * Hallmark · macrostructure: Workbench · variant: split hero + existing product tour
   * Scope: landing-page refresh
   * Theme: existing Signal / Night · nav: N1b + mobile disclosure · footer: Ft2
   * Audience: developers running multiple coding agents · tone: direct and technical
   */
  /* one ink on paper. --ink carries everything; --sig marks live state. signal = light, night = dark */
  :root, [data-theme="signal"] { --paper: #F1EFE9; --ink: #16130F; --sig: #FF4400; --sig-ink: #B83200; --on-ink: #F1EFE9; --blend: multiply; --grain: .22; --field: var(--ink); --field-dot: var(--paper); }
  [data-theme="night"]  { --paper: #0B0B0B; --ink: #EDEDEA; --sig: #7BE36F; --sig-ink: var(--sig); --on-ink: #0B0B0B; --blend: overlay; --grain: .14; --field: #151514; --field-dot: var(--ink); }
  :root {
    --ink-2: color-mix(in srgb, var(--ink) 62%, var(--paper));
    --ink-3: color-mix(in srgb, var(--ink) 62%, var(--paper));
    --rule: color-mix(in srgb, var(--ink) 20%, var(--paper));
    --wash: color-mix(in srgb, var(--ink) 5%, var(--paper));
    --display: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
    --mono: 'Fragment Mono', ui-monospace, Menlo, monospace;
    --sans: 'Geist', system-ui, sans-serif;
    --max: 1320px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { overflow-x: clip; scroll-padding-top: 84px; }
  body { background: var(--paper); color: var(--ink); font: 400 15px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4 { min-width: 0; overflow-wrap: anywhere; font-style: normal; }
  ::selection { background: var(--ink); color: var(--paper); }
  :focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip { position: fixed; top: 8px; left: 8px; padding: 12px 18px; background: var(--ink); color: var(--on-ink); z-index: 30; transform: translateY(-160%); }
  .skip:focus { transform: none; }
  .mono, .lbl, .btn, nav, .fig, .idx { font-family: var(--mono); }
  .lbl { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
  .wrap { max-width: var(--max); margin: 0 auto; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); }

  /* strip + nav */
  .strip { border-bottom: 1px solid var(--rule); text-align: center; padding: 8px 16px; font: 12px var(--mono); }
  .strip a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .site-nav { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
  .site-nav .wrap { display: flex; align-items: stretch; height: 64px; border-left: 0; border-right: 0; }
  .brand { display: flex; align-items: center; gap: 10px; padding: 0 20px; border-right: 1px solid var(--rule); font: 500 26px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; }
  .brand svg { display: block; }
  .tabs { display: flex; }
  .tabs a { display: flex; align-items: center; gap: 18px; padding: 0 16px; border-right: 1px solid var(--rule); font-size: 11.5px; text-transform: uppercase; }
  .tabs a span { color: var(--ink-3); }
  .tabs a:hover { background: var(--wash); }
  .site-nav .right { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; }
  .btn { display: inline-flex; justify-content: center; align-items: center; gap: 8px; height: 44px; padding: 0 14px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; border: 1px solid var(--ink); background: none; color: var(--ink); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
  .btn:active, .copy:active { transform: translateY(1px); }
  .btn:hover, .btn.solid { background: var(--ink); color: var(--on-ink); }
  .btn.solid:hover { background: none; color: var(--ink); }
  .btn.ghost { border-color: var(--rule); }
  .btn.ghost:hover { border-color: var(--ink); }
  .mode { width: 44px; padding: 0; font-size: 18px; }
  .mobile-menu { display: none; }
  .mobile-menu summary { list-style: none; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .menu-links { position: absolute; left: 0; right: 0; top: 100%; padding: 12px 20px 20px; background: var(--paper); border-bottom: 1px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
  .menu-links a { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 12px; white-space: nowrap; }

  /* hero */
  .hero { padding: 64px 40px 0; }
  .hero-intro { display: grid; grid-template-columns: 1.25fr 1fr; gap: 48px; align-items: end; padding-bottom: 44px; }
  .hero .lbl { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
  .hero .lbl::before { content: ''; width: 7px; height: 7px; flex: none; background: var(--sig); }
  .hero h1 { font: 300 clamp(80px, 10.6vw, 152px)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; margin-top: 24px; }
  .hero p { max-width: 420px; font-size: 18px; line-height: 1.65; text-wrap: pretty; }
  .hero .cta { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }
  .hero .hero-note { margin-top: 16px; font: 11px/1.6 var(--mono); color: var(--ink-2); }
  .copy { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--on-ink); font: 12px var(--mono); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
  .copy:hover { background: none; color: var(--ink); }
  .copy .d { opacity: .6; }
  .copy .ok { display: none; }
  .copy.done .ok { display: inline; } .copy.done .cp { display: none; }
  .copy:disabled { cursor: wait; opacity: .6; }
  .field { position: relative; margin: 0 -40px; height: 300px; background: var(--field); border-top: 1px solid var(--rule); overflow: hidden; }
  .field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .field .cap { position: absolute; left: 20px; bottom: 16px; font: 11px var(--mono); color: var(--field-dot); text-transform: uppercase; }
  .field .cap.r { left: auto; right: 16px; }
  .field button.cap { bottom: 0; min-height: 44px; padding: 0 8px; border: 0; background: var(--field); cursor: pointer; }
  .field button.cap:focus-visible { outline-color: var(--field-dot); outline-offset: -4px; }
  .agent-strip { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin: 0 -40px; padding: 20px 28px; font: 12px var(--mono); }
  .agent-strip .strip-label { color: var(--ink-2); }

  /* sections */
  section { border-top: 1px solid var(--rule); }
  .head { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 72px 28px 40px; align-items: end; }
  .head h2 { font: 300 clamp(56px, 7vw, 104px)/1 var(--display); text-transform: uppercase; }
  .head p { font-size: 17px; max-width: 480px; justify-self: end; text-wrap: pretty; color: var(--ink-2); }
  .head p b { font-weight: 400; color: var(--ink); }
  .fig { display: block; font-size: 10.5px; text-transform: uppercase; color: var(--ink-3); padding: 12px 14px 0; }

  /* app mock (fig 1) */
  .mock { border-top: 1px solid var(--rule); display: grid; grid-template-columns: 220px 1fr 280px; height: 600px; }
  .mock > * { min-width: 0; }
  .side { border-right: 1px solid var(--rule); font-size: 13px; overflow: hidden; }
  .side .search { margin: 12px; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--rule); font: 11.5px var(--mono); color: var(--ink-3); }
  .side .search kbd { margin-left: auto; font: inherit; }
  .grp { display: flex; align-items: center; gap: 8px; padding: 12px 14px 4px; font: 10.5px var(--mono); text-transform: uppercase; color: var(--ink-3); }
  .sw { width: 10px; height: 10px; flex: none; border: 1px solid var(--ink); }
  .sw.solid { background: var(--ink); }
  .sw.hatch { background: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 3px); }
  .sw.dots { background: radial-gradient(var(--ink) 0.8px, transparent 1px) 0 0/3px 3px; }
  .sw.open { background: none; }
  .row { display: flex; align-items: center; gap: 8px; padding: 5px 14px; }
  .row.sel { background: var(--ink); color: var(--on-ink); }
  .row em { margin-left: auto; font: normal 10.5px var(--mono); opacity: .55; }
  .row .st { width: 6px; height: 6px; flex: none; border: 1px solid currentColor; }
  .row .st.busy { background: var(--sig); border-color: var(--sig); }
  .row.sel .st.busy { background: var(--on-ink); border-color: var(--on-ink); }
  .stage { position: relative; background: radial-gradient(var(--rule) 1px, transparent 1.2px) 0 0/24px 24px; }
  .stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .toast { position: absolute; left: 16px; right: 16px; bottom: 18px; transform: translateY(8px); opacity: 0; transition: opacity .2s ease-out, transform .2s ease-out; font: 12px/1.5 var(--mono); background: var(--paper); border: 1px solid var(--ink); padding: 8px 12px; }
  .toast.show { opacity: 1; transform: none; }
  .detail { border-left: 1px solid var(--rule); padding: 16px; font-size: 13px; overflow: hidden; }
  .detail h4 { font: 300 34px/.9 var(--display); text-transform: uppercase; }
  .detail .k { margin-top: 6px; font: 11px var(--mono); color: var(--ink-3); }
  .detail .lbl { display: block; margin: 18px 0 8px; font-size: 10.5px; color: var(--ink-3); }
  .chip { display: inline-flex; align-items: center; gap: 6px; font: 11.5px var(--mono); padding: 3px 8px; border: 1px solid var(--rule); margin: 0 4px 6px 0; }
  .note { padding: 9px 10px; border: 1px solid var(--ink); font-size: 12.5px; line-height: 1.45; }
  .note b { display: block; font: 10.5px var(--mono); text-transform: uppercase; margin-bottom: 3px; }
  .md { color: var(--ink-2); line-height: 1.55; font-size: 12.5px; }
  .md p { margin-bottom: 6px; } .md strong { font-weight: 400; color: var(--ink); }
  .md ul { padding-left: 14px; } .md code { font: 11.5px var(--mono); color: var(--ink); }

  /* desktop app mock (fig 1) */
  .appwin { margin: 12px 28px 0; border: 1px solid var(--ink); display: grid; grid-template-columns: 236px 1fr; height: 560px; background: var(--paper); }
  .appwin > * { min-width: 0; }
  .aw-side { border-right: 1px solid var(--rule); display: flex; flex-direction: column; font-size: 13px; }
  .aw-head { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--rule); }
  .aw-head b { font: 500 20px/1 var(--display); text-transform: uppercase; }
  .aw-tree { flex: 1; padding: 8px 0; overflow: hidden; }
  .aw-tree .grp { padding: 10px 12px 3px; }
  .aw-wt { display: flex; align-items: center; gap: 6px; padding: 4px 12px 2px 26px; font: 11px var(--mono); color: var(--ink-2); }
  .aw-wt::before { content: '⎇'; color: var(--ink-3); }
  .aw-tree .row { padding: 4px 12px 4px 40px; font-size: 12.5px; transition: background-color .15s ease-out, color .15s ease-out; }
  .aw-tree .row.fk { padding-left: 54px; }
  .aw-tree .row.fk::before { content: '⑂'; font: 10.5px var(--mono); opacity: .6; margin-right: -2px; }
  .aw-tree .row.new { animation: rowin .3s ease-out; }
  @keyframes rowin { from { opacity: 0; transform: translateX(-6px); } }
  .aw-foot { border-top: 1px solid var(--rule); padding: 10px 12px; font: 11px var(--mono); text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; }
  .aw-main { display: grid; grid-template-rows: 40px 34px 1fr 26px; }
  .aw-top { display: flex; align-items: center; gap: 8px; padding: 0 10px; border-bottom: 1px solid var(--rule); font: 11.5px var(--mono); }
  .aw-top .chip { margin: 0; }
  .aw-top .r { margin-left: auto; display: flex; gap: 6px; }
  .aw-top .r span { border: 1px solid var(--rule); padding: 3px 8px; }
  .aw-top .r .sg { border-color: var(--sig); }
  .aw-launch { display: flex; border-bottom: 1px solid var(--rule); font: 11px var(--mono); }
  .aw-launch span { display: flex; align-items: center; gap: 6px; padding: 0 12px; border-right: 1px solid var(--rule); color: var(--ink-2); transition: background-color .15s ease-out, color .15s ease-out; }
  .aw-launch span kbd { font: inherit; color: var(--ink-3); }
  .aw-launch span.on { background: var(--ink); color: var(--on-ink); } .aw-launch span.on kbd { color: inherit; opacity: .6; }
  .aw-term { position: relative; background: var(--wash); overflow: hidden; }
  .aw-term .term { padding: 20px 22px; font-size: 12px; }
  .aw-bar { display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border-top: 1px solid var(--rule); font: 10.5px var(--mono); color: var(--ink-3); }
  .cols3.feat > div { padding: 22px 22px 28px; }
  .cols3.feat h3 { padding: 0; }
  .cols3.feat p { margin-top: 8px; color: var(--ink-2); font-size: 15px; text-wrap: pretty; }
  .cols3.feat ol { list-style: none; margin-top: 14px; font-size: 13.5px; }
  .cols3.feat li { display: grid; grid-template-columns: 30px 1fr; padding: 3px 0; color: var(--ink-2); }
  .cols3.feat li .idx { font-size: 11.5px; color: var(--ink-3); padding-top: 2px; }

  /* feature grid */
  .grid2 { display: grid; grid-template-columns: 1fr 1fr; }
  .cell { border-top: 1px solid var(--rule); min-width: 0; }
  .cell:nth-child(odd) { border-right: 1px solid var(--rule); }
  .demo { position: relative; height: 340px; overflow: hidden; }
  .demo canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
  .txt { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; padding: 22px 22px 30px; }
  .txt h3 { font: 400 20px/1.2 var(--sans); }
  .txt h3 .idx { font-size: 20px; color: var(--ink-3); margin-right: 6px; }
  .txt p { margin-top: 10px; font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
  .txt ol { list-style: none; font-size: 13.5px; padding-top: 4px; }
  .txt li { display: grid; grid-template-columns: 30px 1fr; padding: 4px 0; color: var(--ink-2); }
  .txt li .idx { font-size: 11.5px; color: var(--ink-3); padding-top: 2px; }

  .term { position: absolute; inset: 0; padding: 30px 26px; font: 12.5px/1.8 var(--mono); }
  .term .ln { opacity: 0; transition: opacity .2s ease-out; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
  .term .ln.on { opacity: 1; }
  .d2 { color: var(--ink-3); } .sg { color: var(--sig-ink); }
  .caret { display: inline-block; width: 7px; height: 14px; background: var(--ink); vertical-align: -2px; animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  .chat { position: absolute; inset: 0; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
  .msg { max-width: 82%; padding: 8px 11px; border: 1px solid var(--rule); font-size: 13.5px; line-height: 1.45; opacity: 0; transform: translateY(6px); transition: opacity .2s ease-out, transform .2s ease-out; display: none; background: var(--paper); }
  .msg.on { opacity: 1; transform: none; }
  .msg.r { align-self: flex-end; border-color: var(--ink); }
  .msg .who { display: flex; align-items: center; gap: 6px; font: 10.5px var(--mono); text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
  .msg .who b { font-weight: 400; color: var(--ink); }
  .msg code { font: 12px var(--mono); }
  .find { position: absolute; inset: 0; padding: 26px; }
  .find .bar { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border: 1px solid var(--ink); font: 13.5px var(--mono); }
  .find .bar kbd { margin-left: auto; font: 11px var(--mono); color: var(--ink-3); }
  .find ul { list-style: none; margin-top: 8px; border: 1px solid var(--rule); }
  .find li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 13.5px; border-top: 1px solid var(--rule); transition: opacity .15s ease-out; }
  .find li:first-child { border-top: 0; }
  .find li em { margin-left: auto; font: normal 11px var(--mono); color: var(--ink-3); }
  .find li.out { opacity: .2; }
  .find li.hit { background: var(--ink); color: var(--on-ink); } .find li.hit em { color: inherit; opacity: .6; } .find li.hit .sw { border-color: var(--on-ink); }
  .find mark { background: none; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

  /* agents table */
  table { width: 100%; border-collapse: collapse; font-size: 14px; }
  th, td { text-align: left; padding: 12px 28px; border-top: 1px solid var(--rule); }
  th { font: 10.5px var(--mono); text-transform: uppercase; color: var(--ink-3); font-weight: 400; }
  td.c, th.c { text-align: center; padding-left: 8px; padding-right: 8px; }
  td .y { display: inline-block; width: 9px; height: 9px; background: var(--ink); }
  td .n { display: inline-block; width: 9px; height: 9px; border: 1px solid var(--rule); }
  td .via { font: 10.5px var(--mono); color: var(--ink-3); margin-left: 6px; }
  tr:hover td { background: var(--wash); }

  /* cli */
  .cols3 { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--rule); }
  .cols3 > div { min-width: 0; }
  .cols3 > div + div { border-left: 1px solid var(--rule); }
  .cols3 h3 { font: 400 15px var(--sans); padding: 18px 20px 0; }
  .cols3 h3 span { color: var(--ink-3); }
  pre { margin: 14px 20px 24px; padding: 18px; background: var(--wash); border: 1px solid var(--rule); font: 12.5px/1.8 var(--mono); overflow-x: auto; min-height: 236px; }
  pre .c { color: var(--ink-3); }

  /* status rows */
  .rows > div { display: grid; grid-template-columns: 120px 260px 1fr; gap: 20px; padding: 16px 28px; border-top: 1px solid var(--rule); align-items: baseline; }
  .rows .tag { font: 11px var(--mono); text-transform: uppercase; }
  .rows .tag.soon { color: var(--sig-ink); }
  .rows h4 { font: 400 16px var(--sans); }
  .rows p { color: var(--ink-2); font-size: 14.5px; }

  /* final */
  .final { padding: 72px 28px 64px; }
  .final h2 { font: 300 clamp(64px, 9vw, 128px)/1 var(--display); text-transform: uppercase; }
  .final > p { margin-top: 24px; max-width: 560px; color: var(--ink-2); font-size: 17px; }
  .install-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
  .install-option { min-width: 0; padding-top: 20px; border-top: 1px solid var(--ink); }
  .install-option h3 { font: 400 22px var(--sans); }
  .install-option p { margin-top: 12px; color: var(--ink-2); font-size: 15px; }
  .install-option .requirements { font: 11px/1.7 var(--mono); }
  .install-option pre { margin: 20px 0 16px; min-height: 0; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.85; }
  .install-option .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
  .text-link { display: inline-flex; align-items: center; min-height: 44px; font: 11.5px var(--mono); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
  .copy-status { min-height: 24px; font-size: 13px; color: var(--ink-2); margin-top: 16px; }
  footer .wrap { display: flex; align-items: center; gap: 24px; padding: 18px 28px; font: 11.5px var(--mono); text-transform: uppercase; color: var(--ink-2); border-top: 1px solid var(--rule); }
  footer .r { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px 20px; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
  footer a:hover { color: var(--ink); }

  /* grain */
  .grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 90; pointer-events: none; opacity: var(--grain); mix-blend-mode: var(--blend);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.5 -.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }



  /* agent logos: ink at rest, brand colour on hover */
  .agent { display: inline-flex; align-items: center; gap: 10px; }
  .logo { display: inline-flex; flex: none; width: 18px; height: 18px; }
  .logo:empty { display: none; }
  .logo svg { width: 100%; height: 100%; }
  .logo svg [fill] { transition: fill .2s ease-out; }
  :is(.agent, #matrix tr):not(:hover) .logo svg [fill]:not([fill="none"]) { fill: currentColor; }
  .agent-strip .logo { width: 20px; height: 20px; }
  td .logo { margin-right: 10px; vertical-align: -4px; }

  @media (max-width: 1000px) {
    .tabs { display: none; }
    .mobile-menu { display: block; }
    .hero { padding: 48px 24px 0; }
    .hero-intro { gap: 24px; }
    .hero h1 { font-size: clamp(80px, 11vw, 112px); }
    .hero p { font-size: 16px; }
    .field, .agent-strip { margin-inline: -24px; }
    .mock { grid-template-columns: 1fr; height: 460px; } .side, .detail { display: none; }
    .appwin { grid-template-columns: 1fr; margin: 12px 12px 0; height: 460px; } .aw-side { display: none; } .aw-launch span:nth-child(n+4) { display: none; }
    .head { grid-template-columns: 1fr; padding: 56px 20px 28px; } .head p { justify-self: start; }
    .grid2, .cols3 { grid-template-columns: 1fr; } .cell:nth-child(odd) { border-right: 0; } .cols3 > div + div { border-left: 0; border-top: 1px solid var(--rule); }
    .txt { grid-template-columns: 1fr; }
    th, td { padding: 10px 10px; } .hide-sm { display: none; }
    .rows > div { grid-template-columns: 1fr; gap: 4px; padding: 14px 20px; }
    .site-nav .right > a.ghost:not(.blog-link) { display: none; }
  }
  @media (max-width: 560px) {
    .site-nav .right > a.blog-link { display: none; }
    .install-options { gap: 24px; }
  }
  @media (max-width: 640px) {
    .site-nav .wrap { height: 60px; }
    .brand { padding-inline: 12px; gap: 8px; font-size: 24px; }
    .site-nav .right { gap: 4px; padding-inline: 8px; }
    .site-nav .right .btn { padding-inline: 10px; }
    .mobile-menu summary { width: 44px; padding-inline: 0; }
    .hero { padding: 36px 20px 0; }
    .hero-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; padding-bottom: 32px; }
    .hero h1 { margin-top: 20px; font-size: clamp(78px, 18vw, 112px); }
    .hero .cta { gap: 8px; }
    .hero .cta .btn { padding-inline: 12px; }
    .field, .agent-strip { margin-inline: -20px; }
    .field { height: 220px; }
    .field .cap { left: 12px; font-size: 9px; }
    .field .cap.r { right: 4px; }
    .agent-strip { justify-content: flex-start; gap: 12px 20px; padding: 20px; font-size: 11px; }
    .agent-strip .strip-label { flex-basis: 100%; }
    .head h2 { font-size: clamp(52px, 12vw, 72px); }
    .head p { font-size: 16px; }
    .aw-bar span:last-child, .aw-top .r span:first-child { display: none; }
    .aw-launch span { padding-inline: 8px; }
    .aw-term .term { padding: 20px 12px; font-size: 10.5px; }
    .find { padding: 20px 12px; }
    .find li { gap: 6px; padding-inline: 8px; font-size: 12px; }
    .find li em { font-size: 9px; }
    th, td { padding: 12px 8px; font-size: 12px; }
    th { font-size: 9px; }
    td .via { display: block; margin: 4px 0 0; font-size: 9px; }
    .final { padding: 56px 20px 40px; }
    .install-options { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .install-option pre { font-size: 11px; padding: 14px; }
    footer .wrap { flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 16px 20px; }
    footer .r { width: 100%; margin-left: 0; justify-content: space-between; gap: 8px; }
  }
  /* logo: the two nodes orbit the link and trade places, tumbling as they go */
  .brand .orbit { transform-box: view-box; transform-origin: 11px 11px; transform: rotate(var(--turn, 0deg)); transition: transform .8s cubic-bezier(.68, -.3, .32, 1.3); }
  .brand .node { transform-box: fill-box; transform-origin: center; transform: rotate(calc(var(--turn, 0deg) * -.5)); transition: transform .8s cubic-bezier(.68, -.3, .32, 1.3); }
  .brand .link { stroke-dasharray: 7; }
  .brand.spin .link { animation: relink .8s ease-out; }
  @keyframes relink { 0%, 35% { stroke-dashoffset: 7; } }

  /* headline lines rise out of a mask on load */
  .hero h1 .line { display: block; overflow: hidden; padding-bottom: .04em; }
  .hero h1 .line > span { display: inline-block; animation: rise 1s cubic-bezier(.2, .75, .2, 1) both; }
  .hero h1 .line + .line > span { animation-delay: .12s; }
  @keyframes rise { from { transform: translateY(105%); } }

  /* sections fade up as they scroll in, siblings staggered */
  [data-motion="playing"] .rv { opacity: 0; transform: translateY(20px); transition: opacity .7s ease-out, transform .8s cubic-bezier(.2, .75, .2, 1); transition-delay: var(--d, 0s); }
  [data-motion="playing"] .rv.in { opacity: 1; transform: none; }

  /* nav tabs: hairline underline slides in from the left */
  .tabs a { position: relative; }
  .tabs a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ink); transform: scaleX(0); transform-origin: right; transition: transform .25s ease-out; }
  .tabs a:hover::after, .tabs a:focus-visible::after { transform: scaleX(1); transform-origin: left; }

  [data-motion="paused"] *, [data-motion="paused"] *::before, [data-motion="paused"] *::after { animation-play-state: paused !important; }
  @media (prefers-reduced-motion: reduce) { *, .grain { animation: none !important; transition: none !important; } }

  /* subpages: the first section's heading is the page title */
  .head h1 { font: 300 clamp(56px, 7vw, 104px)/1 var(--display); text-transform: uppercase; }
  .page-first .head { padding-top: 88px; }
  .tabs a[aria-current="page"] { background: var(--wash); }
  .tabs a[aria-current="page"]::after { transform: scaleX(1); }

  /* home: three doors into the product, one line each */
  .parts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); }
  .part { display: flex; flex-direction: column; gap: 18px; min-height: 360px; padding: 40px 28px 32px; transition: background-color .2s ease-out; }
  .part + .part { border-left: 1px solid var(--rule); }
  .part h2 { font: 300 clamp(40px, 4.2vw, 64px)/1 var(--display); text-transform: uppercase; }
  .part p { max-width: 34ch; color: var(--ink-2); }
  .part .more { margin-top: auto; font: 11.5px/1 var(--mono); text-transform: uppercase; letter-spacing: .04em; }
  .part .more span { display: inline-block; transition: transform .25s cubic-bezier(.2, .75, .2, 1); }
  .part:hover { background: var(--wash); }
  .part:hover .more span, .part:focus-visible .more span { transform: translateX(6px); }

  /* subpages: where to go next */
  .next { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 40px 28px; border-top: 1px solid var(--rule); }
  .next a.go { font: 300 clamp(32px, 3.4vw, 48px)/1 var(--display); text-transform: uppercase; }
  .next a.go span { display: inline-block; transition: transform .25s cubic-bezier(.2, .75, .2, 1); }
  .next a.go:hover span { transform: translateX(8px); }

  @media (max-width: 1000px) {
    .parts { grid-template-columns: 1fr; }
    .part { min-height: 0; padding: 32px 20px; }
    .part + .part { border-left: 0; border-top: 1px solid var(--rule); }
    .page-first .head { padding-top: 56px; }
    .next { padding: 32px 20px; }
  }

  /* Download for macOS */
  .btn.mac { height: 52px; gap: 10px; padding: 0 20px 0 16px; font-size: 13px; text-transform: none; letter-spacing: 0; }
  .btn.mac .apple { width: 18px; height: 18px; flex: none; fill: currentColor; margin-top: -3px; transition: transform .2s ease-out; }
  .btn.mac:hover .apple { transform: translateY(-2px) rotate(-8deg); }
  .hero .cta .btn { height: 52px; }
  @media (prefers-reduced-motion: reduce) { .btn.mac:hover .apple { transform: none; } }