:root {
    --paper: #F5F4F2;
    --surface: #FFFFFF;
    --surface-2: #FAFAF9;
    --ink: #1A1714;
    --muted: #635C55;
    --line: #E7E3DE;
    --build: #D9531E;
    --build-soft: #F4813F;
    --build-tint: rgba(217, 83, 30, 0.09);
    --focus: #2F5BEA;
    --iq: #C0102A;
    --ok: #0E9053;
    --maxw: 1080px;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #100E0C;
      --surface: #191614;
      --surface-2: #1E1A17;
      --ink: #F1EDE9;
      --muted: #A39A91;
      --line: #2C2724;
      --build: #FF8A50;
      --build-soft: #FFA778;
      --build-tint: rgba(255, 138, 80, 0.12);
      --focus: #6486FF;
      --iq: #E4243B;
      --ok: #14AE66;
    }
  }

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
  body {
    margin: 0;
    color: var(--ink);
    background-color: var(--paper);
    background-image:
      radial-gradient(58% 46% at 2% -4%, rgba(244, 129, 63, 0.24), transparent 62%),
      radial-gradient(52% 48% at 100% 3%, rgba(217, 83, 30, 0.16), transparent 62%),
      radial-gradient(56% 52% at 70% 102%, rgba(244, 129, 63, 0.14), transparent 66%);
    background-repeat: no-repeat;
    background-size: 100% 1500px;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .wrap {
    width: 100%; max-width: var(--maxw); margin: 0 auto;
    padding-left: max(28px, env(safe-area-inset-left));
    padding-right: max(28px, env(safe-area-inset-right));
  }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
  .eyebrow {
    font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted);
  }
  .bu { color: var(--build); }

  /* ---- top bar ---- */
  header.bar {
    position: sticky; top: 0; z-index: 30;
    background: color-mix(in srgb, var(--paper) 84%, transparent);
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--line);
  }
  /* Three groups, and the middle one is the only elastic thing in the row.
     The lockup and the buttons hold their size; the navigation gets whatever
     is between them, centred. Nothing here is free to overlap its neighbour,
     which is what the old row did once it ran short. */
  .bar .wrap { display: flex; align-items: center; height: 72px; gap: 28px; }
  .brandwrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  /* Never squeezed. It was shrinkable, and a shrinking flex item with
     white-space:nowrap does not wrap, it overflows: the wordmark ran out
     underneath the pill sitting next to it. */
  .mark {
    display: flex; align-items: center; gap: 10px; flex-shrink: 0;
    font-weight: 800; font-size: 26px; letter-spacing: -0.03em;
    text-decoration: none; white-space: nowrap;
  }
  .mark img, .mark svg { width: 38px; height: 38px; flex-shrink: 0; }
  .dot { color: var(--build); font-size: 1.2em; line-height: 0; }
  .brand-tag {
    flex-shrink: 0;
    font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em;
    color: var(--build); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    border: 1px solid color-mix(in srgb, var(--build) 45%, transparent);
    background: color-mix(in srgb, var(--build) 12%, transparent);
  }
  /* The pill is the first thing to go. It is a claim rather than a control,
     and the row has two of those and six destinations ahead of it. */
  @media (max-width: 1150px) { .brand-tag { display: none; } }
  /* Centred in the space the two fixed groups leave, rather than pushed up
     against one of them. */
  nav.top { display: flex; justify-content: center; gap: 20px; margin: 0 auto; min-width: 0; }
  nav.top a { font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; text-decoration: none; color: var(--muted); white-space: nowrap; }
  nav.top a:hover { color: var(--ink); }
  nav.top a[aria-current="page"] { color: var(--build); }
  @media (max-width: 1020px) { nav.top { display: none; } }
  /* Sign in loses its border: two bordered buttons plus a filled one is three
     competing weights in a strip that only has one thing worth pressing. */
  .topcta { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-shrink: 0; }
  .topcta .signin > summary { border-color: transparent; padding-left: 10px; padding-right: 10px; }
  .topcta .signin[open] > summary,
  .topcta .signin > summary:hover { border-color: var(--line); }

  /* The lockup steps down with the viewport. Each step is below the one above
     it, which sounds obvious and was not true: these were written for a 34px
     wordmark and were setting it to 38 at 900px, so it grew as the window got
     smaller. */
  @media (max-width: 900px) {
    .bar .wrap { height: 66px; gap: 16px; }
    .mark { font-size: 24px; gap: 9px; }
    .mark img, .mark svg { width: 34px; height: 34px; }
  }
  @media (max-width: 620px) {
    .bar .wrap { height: 62px; }
    .mark { font-size: 22px; gap: 8px; }
    .mark img, .mark svg { width: 31px; height: 31px; }
  }
  @media (max-width: 380px) {
    .mark { font-size: 20px; }
    .mark img, .mark svg { width: 28px; height: 28px; }
  }

  /* ---- burger ---- */
  /* A <details> rather than a script: it opens, closes and is keyboard
     reachable with no JavaScript, and the header should not depend on a
     bundle having loaded to be usable. */
  .burger { display: none; position: relative; }
  .burger > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center;
    justify-content: center; width: 42px; height: 42px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surface);
  }
  .burger > summary::-webkit-details-marker { display: none; }
  .burger .lines, .burger .lines::before, .burger .lines::after {
    display: block; width: 17px; height: 2px; background: var(--ink); border-radius: 2px;
  }
  .burger .lines { position: relative; }
  .burger .lines::before, .burger .lines::after { content: ""; position: absolute; left: 0; }
  .burger .lines::before { top: -5.5px; }
  .burger .lines::after { top: 5.5px; }
  .burger[open] > summary { border-color: color-mix(in srgb, var(--build) 50%, var(--line)); }
  .burger .menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
    min-width: 232px; padding: 8px; border-radius: 14px;
    border: 1px solid var(--line); background: var(--surface);
    box-shadow: 0 20px 48px -28px rgba(0,0,0,.6);
    display: flex; flex-direction: column; gap: 2px;
  }
  .burger .menu a {
    display: block; padding: 10px 12px; border-radius: 9px; text-decoration: none;
    font-family: var(--mono); font-size: 13px; letter-spacing: 0.03em; color: var(--ink);
  }
  .burger .menu .sep { height: 1px; background: var(--line); margin: 6px 4px; }
  .burger .menu a.cta { font-family: var(--sans); font-weight: 600; color: var(--build); }
  /* Sign in is a choice of environment, not a single destination. A lone link
     sent everybody to production and left sandbox reachable only by typing the
     address, which is the sort of thing that gets a demo run against live data. */
  .burger .menu a.env { display: flex; align-items: center; gap: 11px; }
  .envpick { position: relative; display: inline-block; }
  .envpick > summary { list-style: none; cursor: pointer; }
  .envpick > summary::-webkit-details-marker { display: none; }
  .envpick[open] > summary { border-color: color-mix(in srgb, var(--build) 55%, var(--line)); }
  .envpick > summary .caret { transition: transform .18s; }
  .envpick[open] > summary .caret { transform: rotate(180deg); }
  .envmenu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 40;
    min-width: 248px; padding: 8px; border-radius: 14px;
    border: 1px solid var(--line); background: var(--surface);
    box-shadow: 0 20px 48px -28px rgba(0,0,0,.6);
    display: flex; flex-direction: column; gap: 2px;
  }
  .envmenu a {
    display: flex; align-items: center; gap: 11px; padding: 9px 12px;
    border-radius: 9px; text-decoration: none; color: var(--ink);
  }
  .envmenu a:hover { background: color-mix(in srgb, var(--build) 12%, transparent); }
  .envdot { width: 9px; height: 9px; border-radius: 999px; flex: none; }
  .envtxt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .envtxt b { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
  .envtxt small { font-family: var(--mono); font-size: 11px; color: var(--muted); }
  .menulabel {
    font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--muted); padding: 8px 12px 4px;
  }
  @media (max-width: 1020px) { .burger { display: block; } }
  /* Below this the lockup, both buttons and the burger do not fit in 375px,
     and the header pushed the whole page sideways. Both buttons are already
     inside the burger menu, so the duplicates go rather than the menu. */
  @media (max-width: 620px) { .topcta .early { display: none; } }
  @media (max-width: 460px) { .topcta .signin { display: none; } }
  /* The lockup holds its size and the navigation gives way instead. Letting it
     shrink is what put the wordmark underneath the pill: a nowrap flex item
     that is allowed to shrink does not wrap, it overflows its own box. */
  .bar .wrap { min-width: 0; }
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 14.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
    padding: 10px 18px; border-radius: 10px; border: 1px solid transparent;
    background: var(--build); color: #FFFFFF;
    transition: transform .18s, box-shadow .22s, background .22s, border-color .22s;
  }
  .btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--build) 85%, transparent); }
  .btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
  .btn.ghost:hover { border-color: color-mix(in srgb, var(--build) 55%, var(--line)); box-shadow: none; }
  .btn.lg { font-size: 16px; padding: 14px 24px; border-radius: 12px; }

  /* ---- hero ---- */
  .hero { padding-top: clamp(40px, 7vw, 82px); padding-bottom: clamp(18px, 3vw, 34px); }
  h1 {
    font-size: clamp(38px, 6.6vw, 70px); line-height: 1.03; letter-spacing: -0.035em;
    font-weight: 800; margin: 22px 0 0; text-wrap: balance; max-width: 17ch;
  }
  h1 .accent { color: var(--build); }
  .sub { margin: 26px 0 0; font-size: clamp(17px, 2.2vw, 20px); color: var(--muted); max-width: 58ch; line-height: 1.55; }
  .cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
  .microcopy { font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; color: var(--muted); margin: 20px 0 0; }

  /* ---- flow strip ---- */
  .flow {
    display: flex; align-items: stretch; flex-wrap: wrap; gap: 10px;
    margin-top: 48px; padding: 20px; border: 1px solid var(--line);
    border-radius: 16px; background: var(--surface);
  }
  .flow .step { flex: 1 1 150px; min-width: 0; }
  .flow .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: var(--build); }
  .flow .t { font-size: 15px; line-height: 1.3; font-weight: 600; margin-top: 6px; letter-spacing: -0.01em; }
  .flow .d { font-size: 13.5px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
  .flow .arrow { align-self: center; color: var(--build); opacity: .5; font-size: 18px; }
  @media (max-width: 820px) { .flow .arrow { display: none; } .flow .step { flex-basis: 45%; } }
  @media (max-width: 460px) { .flow .step { flex-basis: 100%; } }

  /* ---- sections ---- */
  section { padding: clamp(54px, 8vw, 92px) 0; border-top: 1px solid var(--line); }
  .sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 40px; }
  .sec-head h1, .sec-head h2 { font-size: clamp(24px, 3.2vw, 34px); line-height: 1.12; letter-spacing: -0.028em; font-weight: 800; margin: 0; text-wrap: balance; }
  .sec-head p { margin: 0; color: var(--muted); font-size: 15px; max-width: 42ch; text-align: right; }
  @media (max-width: 700px) { .sec-head { flex-direction: column; gap: 10px; } .sec-head p { text-align: left; } }

  /* ---- value cards ---- */
  .grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  @media (max-width: 820px) { .grid3 { grid-template-columns: 1fr; } }
  .card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 28px 26px; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s, border-color .28s;
  }
  /* A whole card that is one link. Inherits colour rather than taking the
     link blue, since the thing that says it is clickable is the lift on the
     card, not the text turning a different colour. */
  /* Contact form. Labels above fields rather than beside them: a label to the
     left of an input wraps badly at every width a phone actually is. */
  .fieldrow { margin-bottom: 18px; }
  .fieldrow label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; }
  .fieldrow input, .fieldrow select, .fieldrow textarea {
    width: 100%; box-sizing: border-box; padding: 11px 13px; border-radius: 10px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    font-family: var(--sans); font-size: 15px;
  }
  .fieldrow textarea { resize: vertical; min-height: 110px; }
  .fieldrow input:focus, .fieldrow select:focus, .fieldrow textarea:focus {
    outline: none; border-color: var(--build);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--build) 18%, transparent);
  }
  .fieldrow small { display: block; margin-top: 5px; font-size: 12.5px; color: var(--muted); }
  /* Off screen rather than display:none, which some bots check for before
     deciding whether a field is a trap. */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .formstatus { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
  .formstatus.bad { color: var(--build); }

  a.navcard { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
  a.navcard .more { margin-top: 14px; font-family: var(--mono); font-size: 12px; color: var(--build); }
  .card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--build) 45%, var(--line)); box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--build) 70%, transparent); }
  .card .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--build); }
  .card h3 { margin: 12px 0 8px; font-size: 19px; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
  .card p { margin: 0; font-size: 15px; color: var(--muted); line-height: 1.55; }

  /* ---- split ---- */
  .split { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
  @media (max-width: 860px) { .split { grid-template-columns: 1fr; gap: 30px; } }
  .split h1, .split h2 { font-size: clamp(24px, 3.4vw, 36px); letter-spacing: -0.03em; font-weight: 800; margin: 10px 0 0; line-height: 1.08; text-wrap: balance; }
  .split p.lede { margin: 18px 0 0; color: var(--muted); font-size: 16.5px; line-height: 1.6; }
  ul.checks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 13px; }
  ul.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; }
  ul.checks svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 2px; color: var(--build); }

  /* ---- quote mock ---- */
  .mock { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px -40px rgba(0,0,0,.55); }
  .mock .head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
  .mock .head .t { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
  .mock .head .s { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .mock table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
  .mock th { text-align: left; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding: 12px 18px 8px; }
  .mock th.r, .mock td.r { text-align: right; }
  .mock td { padding: 9px 18px; border-top: 1px solid var(--line); }
  .mock td .conf { font-family: var(--mono); font-size: 10px; color: var(--muted); display: block; margin-top: 2px; }
  .mock tr.low td { background: var(--build-tint); }
  .mock tr.low td .conf { color: var(--build); }
  .mock .tot { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-top: 1px solid var(--line); background: var(--surface-2); }
  .mock .tot .l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
  .mock .tot .v { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
  .mock .note { padding: 13px 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); display: flex; gap: 9px; align-items: flex-start; }
  .mock .note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; color: var(--build); }

  /* ---- trades ---- */
  .trades { display: flex; flex-wrap: wrap; gap: 9px; }
  .trade { font-family: var(--mono); font-size: 12px; letter-spacing: 0.03em; color: var(--muted); border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 7px 14px; }

  /* ---- pricing ---- */
  .price-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 32px; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; }
  @media (max-width: 760px) { .price-card { grid-template-columns: 1fr; } }
  .price-card .amount { font-size: clamp(30px, 4.4vw, 42px); font-weight: 800; letter-spacing: -0.035em; }
  .price-card .amount small { font-size: 15px; font-weight: 500; color: var(--muted); letter-spacing: 0; }

  /* ---- faq ---- */
  .faq { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
  .faq details { background: var(--surface); }
  .faq summary { cursor: pointer; list-style: none; padding: 20px 24px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary::after { content: "+"; font-family: var(--mono); font-size: 19px; color: var(--build); flex-shrink: 0; }
  .faq details[open] summary::after { content: "\2212"; }
  .faq p { margin: 0; padding: 0 24px 22px; color: var(--muted); font-size: 15px; line-height: 1.6; max-width: 70ch; }
  .faq p a { color: var(--build); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--build) 40%, transparent); }
  .faq p a:hover { border-bottom-color: var(--build); }

  /* ---- closer ---- */
  #start { background: linear-gradient(180deg, var(--build-tint), transparent 40%); }
  .closer { text-align: center; }
  .closer h1, .closer h2 { font-size: clamp(28px, 4.6vw, 46px); letter-spacing: -0.035em; font-weight: 800; margin: 0 auto; max-width: 20ch; line-height: 1.06; text-wrap: balance; }
  .closer p { color: var(--muted); font-size: 17px; margin: 20px auto 0; max-width: 52ch; }
  .closer .cta { justify-content: center; }

  /* ---- footer ---- */
  footer.foot { border-top: 1px solid var(--line); padding: 30px 0 44px; }
  footer.foot .wrap { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; justify-content: space-between; }
  /* On a phone the legal line and the suite list were both wrapping mid
     sentence into each other. Stacked, left aligned, with the separators
     dropped so each item is its own line rather than a run-on. */
  @media (max-width: 720px) {
    footer.foot .wrap { flex-direction: column; align-items: flex-start; gap: 16px; }
    footer.foot .legal { display: flex; flex-wrap: wrap; gap: 6px 14px; line-height: 1.9; }
    footer.foot .legal .sep { display: none; }
    .suite { gap: 8px 12px; line-height: 1.9; }
  }
  footer.foot .legal { font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: 0.03em; }
  footer.foot .legal a { text-decoration: none; border-bottom: 1px solid transparent; }
  footer.foot .legal a:hover { border-bottom-color: currentColor; }
  .suite { font-family: var(--mono); font-size: 12px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
  .suite a { text-decoration: none; border-bottom: 1px solid transparent; }
  .suite a:hover { border-bottom-color: currentColor; }
  .c-cook { color: #C08A12; } .c-endit { color: #8A5A2B; } .c-land { color: #0E9053; } .c-sell { color: #3C68E0; }
  @media (prefers-color-scheme: dark) { .c-cook { color: #F9C23C; } .c-endit { color: #C88F54; } .c-land { color: #14AE66; } .c-sell { color: #7BA2FF; } }
  .iqbadge { background: var(--iq); color: #FFFFFF; padding: 0 4px; border-radius: 4px; font-weight: 800; }

  /* reveal */
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .reveal { opacity: 1; transform: none; transition: none; }
    .card, .btn { transition: none; }
  }