@font-face {
    font-family: "Manrope";
    src: url("fonts/manrope-latin-ext-wght-normal.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
    unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  @font-face {
    font-family: "Manrope";
    src: url("fonts/manrope-latin-wght-normal.woff2") format("woff2");
    font-weight: 200 800; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  :root{
    --bg:#0b0e14; --panel:#111827; --soft:#0f131b;
    --panel-border:rgba(255,255,255,.09); --line:#1f2634;
    --fg:#f8fafc; --dim:#cbd2dc; --muted:#9ba5b4; --faint:#828c9d;
    --accent:#fbc711; --accent-hover:#ddaf0f; --on-accent:#645007;
    --accent-container:#4b3c05; --on-accent-container:#fde694;
    --shadow-panel:0 1px 2px rgba(0,0,0,.35),0 8px 24px -16px rgba(0,0,0,.6);
    --radius:.875rem; --panel-radius:1.375rem;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--fg);font-family:"Manrope",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}
  a{color:inherit}
  a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
  img{max-width:100%;display:block;height:auto}
  p,li{text-wrap:pretty}
  h1,h2,h3{text-wrap:balance;margin:0}
  .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
  /* Stays with you down the page: the two studios and the apps are the
     only places to go, and hunting back up for them is a reason to leave. */
  header{padding:18px 0;position:sticky;top:0;z-index:20;
         background:rgba(11,14,20,.86);backdrop-filter:saturate(140%) blur(10px);
         border-bottom:1px solid transparent}
  @supports not (backdrop-filter:blur(10px)){ header{background:var(--bg)} }
  header.stuck{border-bottom-color:var(--line)}
  .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:19px;letter-spacing:-0.01em}
  .brand svg{width:32px;height:32px;flex:none}
  header .row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
  header nav{display:flex;gap:24px;font-size:15px;font-weight:600}
  header nav a{text-decoration:none;color:var(--dim)}
  header nav a:hover{color:var(--fg)}

  .hero{padding:56px 0 48px}
  .hero h1{font-size:clamp(34px,5.5vw,58px);font-weight:800;letter-spacing:-0.02em;line-height:1.08;max-width:16em}
  .hero p.lead{margin:22px 0 0;max-width:42em;color:var(--dim);font-size:18px}
  .studios{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:44px 0 0}
  .panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:var(--panel-radius);box-shadow:var(--shadow-panel)}
  .studio-card{padding:32px;display:flex;flex-direction:column;gap:14px;text-decoration:none;color:inherit;transition:transform .2s ease,border-color .2s ease}
  .studio-card:hover{transform:translateY(-3px);border-color:var(--accent)}
  .studio-tag{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .studio-card h2{font-size:26px;font-weight:800;letter-spacing:-0.01em}
  .studio-card p{margin:0;color:var(--dim);font-size:15px}
  .studio-card .go{margin-top:6px;font-weight:700;font-size:14px;color:var(--accent)}

  section{padding:56px 0}
  section h2{font-size:clamp(26px,3.6vw,36px);font-weight:700;letter-spacing:-0.01em;margin-bottom:12px}
  p.intro{margin:0 0 28px;max-width:44em;color:var(--dim);font-size:17px}

  /* The two sites, as they look today */
  .shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
  .shot{overflow:hidden;text-decoration:none;color:inherit;display:block}
  .shot .bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--panel-border)}
  .shot .bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:block}
  .shot img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
  .shot .cap{padding:14px 18px 16px;font-size:14px;color:var(--dim);display:flex;justify-content:space-between;gap:12px}
  .shot .cap b{color:var(--fg)}
  .shot .cap span{color:var(--accent);font-weight:700;white-space:nowrap}

  /* How we work */
  .how{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
  .how .panel{padding:24px}
  .how h3{font-size:17px;font-weight:600;margin-bottom:8px}
  .how p{margin:0;color:var(--dim);font-size:15px}
  .num{display:inline-block;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;letter-spacing:.08em;color:var(--on-accent-container);background:var(--accent-container);padding:3px 9px;border-radius:999px;margin-bottom:14px}

  /* Websites band: one big photograph, one panel of plain facts */
  .split{display:grid;grid-template-columns:3fr 2fr;gap:20px;align-items:stretch}
  .split .photo{overflow:hidden;min-height:320px}
  .split .photo img{width:100%;height:100%;object-fit:cover}
  .split .facts{padding:28px}
  .split .facts h3{font-size:22px;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px}
  .price{font-size:15px;color:var(--dim);margin:0 0 18px}
  .price b{color:var(--fg);font-size:17px}
  ul.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;color:var(--dim)}
  ul.ticks li{display:flex;gap:10px;align-items:flex-start}
  ul.ticks svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--accent)}
  .gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}
  .gallery figure{margin:0;overflow:hidden}
  .gallery img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top}
  .gallery figcaption{padding:12px 16px 14px;font-size:14px;color:var(--dim)}
  .gallery figcaption b{color:var(--fg);display:block}

  /* Tools grid */
  .tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
  .tool{overflow:hidden;text-decoration:none;color:inherit;display:flex;flex-direction:column;transition:border-color .2s ease}
  a.tool:hover{border-color:var(--accent)}
  .tool img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top}
  .tool .t{padding:14px 16px 16px;font-size:14px;color:var(--dim)}
  .tool .t b{color:var(--fg);display:block;font-size:15px;margin-bottom:2px}
  .cta{display:inline-block;margin-top:28px;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:16px;text-decoration:none;padding:14px 22px;border-radius:var(--radius)}
  .cta:hover{background:var(--accent-hover)}

  /* About */
  .about{display:grid;grid-template-columns:2fr 3fr;gap:20px;align-items:stretch}
  .about .photo{overflow:hidden;min-height:280px}
  .about .photo img{width:100%;height:100%;object-fit:cover}
  .about .text{padding:28px}
  .about .text p{margin:0 0 14px;color:var(--dim);font-size:16px}
  .about .text p:last-child{margin-bottom:0}
  .about .text b{color:var(--fg)}
  .facts-row{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
  .facts-row div{background:var(--soft);border:1px solid var(--panel-border);border-radius:var(--radius);padding:14px 16px;font-size:14px;color:var(--dim)}
  .facts-row b{display:block;color:var(--fg);font-size:18px;font-weight:700;letter-spacing:-0.01em}

  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
           clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .skip{position:absolute;left:-999px;top:16px;background:var(--accent);color:var(--on-accent);font-weight:700;padding:10px 14px;border-radius:var(--radius);z-index:10;text-decoration:none}
  .skip:focus{left:16px}
  footer{border-top:1px solid var(--line);padding:28px 0 0;color:var(--faint);font-size:14px}
  footer .row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center;padding-bottom:24px}
  footer nav{display:flex;gap:18px;flex-wrap:wrap}
  footer nav a{color:var(--faint);text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
  footer nav a:hover{color:var(--dim)}
  .sub-foot{border-top:1px solid var(--line);padding:22px 0 32px;font-size:13px}
  .sub-foot .wrap{display:block}
  /* The date and the legal pages read as one line of small print, which is
     what they are - not a paragraph with a menu parked beside it. */
  .last-line{display:flex;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;
             align-items:center;margin-top:10px}
  .last-line p{margin:0}
  .sub-foot p{margin:0;line-height:1.7}
  .sub-foot a{color:var(--faint)}
  .sub-foot nav a{color:var(--dim);text-decoration:none;font-weight:600}
  .sub-foot nav a:hover{color:var(--fg)}

  @media (max-width:820px){
    .split,.about{grid-template-columns:1fr}
    .gallery{grid-template-columns:1fr 1fr}
  }
  @media (max-width:640px){
    header .row{flex-direction:column;align-items:flex-start}
    .gallery{grid-template-columns:1fr}
    section{padding:44px 0}
  }
  @media (prefers-reduced-motion: reduce){ .studio-card,.tool{transition:none} .studio-card:hover{transform:none} }

  /* --- the hero, rebuilt as a sales page rather than an index ----------- */
  .hero{padding:64px 0 24px}
  .hero h1{font-size:clamp(38px,6.4vw,72px);max-width:13em;line-height:1.04}
  .hero .lead{font-size:19px;max-width:40em}
  .hero .lead b{color:var(--fg)}
  .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:30px 0 0}
  .btn{display:inline-flex;align-items:center;min-height:52px;padding:0 24px;
       border-radius:var(--radius);font-weight:700;font-size:16px;text-decoration:none}
  .btn-primary{background:var(--accent);color:var(--on-accent)}
  .btn-primary:hover{background:var(--accent-hover)}
  .btn-quiet{border:1px solid var(--panel-border);color:var(--fg)}
  .btn-quiet:hover{border-color:var(--accent)}
  .three{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
         gap:16px;margin:40px 0 0}
  .three .panel{padding:22px 24px}
  .three b{display:block;font-size:15px;font-weight:800;letter-spacing:-0.01em;
           color:var(--accent);margin-bottom:6px}
  .three p{margin:0;color:var(--dim);font-size:15px}

  /* --- what you are used to, beside what happens here ------------------- */
  .compare{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .compare .panel{padding:28px}
  .compare h3{font-size:16px;font-weight:700;letter-spacing:.02em;margin-bottom:16px}
  .compare .them h3{color:var(--faint)}
  .compare .us h3{color:var(--accent)}
  .compare ul{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:15px}
  .compare li{display:flex;gap:10px;align-items:flex-start;color:var(--dim)}
  .compare .mark{flex:none;width:18px;margin-top:2px;text-align:center;font-weight:700}
  .compare .them .mark{color:var(--faint)}
  .compare .us .mark{color:var(--accent)}
  .sources{margin:18px 0 0;font-size:13px;color:var(--faint);max-width:52em}
  .sources a{color:var(--faint)}

  /* --- prices, said plainly rather than hidden behind a form ----------- */
  .prices{display:grid;grid-template-columns:1fr 1fr;gap:20px}
  .prices .panel{padding:30px;display:flex;flex-direction:column;gap:12px}
  .prices .tag{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:12px;
               letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  .prices h3{font-size:24px;font-weight:800;letter-spacing:-0.01em}
  .prices .fig{font-size:40px;font-weight:800;letter-spacing:-0.02em;line-height:1}
  .prices .fig span{font-size:16px;font-weight:600;color:var(--muted);letter-spacing:0}
  .prices p{margin:0;color:var(--dim);font-size:15px}
  .prices .go{margin-top:auto;padding-top:8px;font-weight:700;font-size:15px;color:var(--accent)}

  .closing{padding:64px 0 72px}
  .closing .panel{padding:40px;text-align:center}
  .closing h2{margin-bottom:10px}
  .closing p{margin:0 auto 26px;color:var(--dim);font-size:17px;max-width:40em}
  .closing .hero-cta{justify-content:center}

  /* Four cards, never three-then-one: a lopsided last row is the thing a
     bento exists to avoid. Two rows of two, or one row of four on a wide
     screen, or a single column on a phone - every row always full. */
  .how{grid-template-columns:repeat(2,1fr)}
  @media (min-width:1160px){ .how{grid-template-columns:repeat(4,1fr)} }
  @media (max-width:700px){ .how{grid-template-columns:1fr} }


  /* --- the hero's right-hand half: spreadsheet becomes software --------- */
  .hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
             gap:44px;align-items:center}
  .hero-grid .hero-copy{min-width:0}
  .hero-grid .hero-copy h1{max-width:none}
  .demo{min-width:0}
  .demo-frame{background:var(--panel);border:1px solid var(--panel-border);
              border-radius:var(--panel-radius);box-shadow:var(--shadow-panel);
              overflow:hidden}
  .demo-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;
            border-bottom:1px solid var(--panel-border);background:var(--soft)}
  .demo-bar i{width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
  .demo-name{margin-left:6px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
             font-size:12px;color:var(--faint);white-space:nowrap;overflow:hidden;
             text-overflow:ellipsis}
  .demo-stage{position:relative;min-height:326px}
  .demo-view{padding:16px 16px 18px}
  .demo-view[hidden]{display:none}

  /* the spreadsheet */
  .sheet{width:100%;border-collapse:collapse;font-size:12.5px;
         font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--dim)}
  .sheet th,.sheet td{border:1px solid var(--line);padding:7px 8px;text-align:left;
                      white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet th{background:var(--soft);color:var(--faint);font-weight:600;font-size:11px}
  .sheet td.cash{text-align:right}
  .sheet td.bad{color:#ff8f7a}
  .sheet td.empty{color:var(--line)}
  .sheet-tabs{display:flex;gap:6px;margin-top:12px;font-size:11px;
              font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;color:var(--faint)}
  .sheet-tabs span{padding:4px 9px;border:1px solid var(--line);border-bottom:none;
                   border-radius:6px 6px 0 0}
  .sheet-tabs span.on{color:var(--fg);background:var(--soft)}

  /* what it becomes */
  .app-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
            margin-bottom:12px}
  .app-head h3{font-size:16px;font-weight:700;letter-spacing:-0.01em}
  .app-head span{font-size:12px;color:var(--faint)}
  .app-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
  .app-stats div{background:var(--soft);border:1px solid var(--panel-border);
                 border-radius:10px;padding:9px 10px}
  .app-stats b{display:block;font-size:17px;font-weight:800;letter-spacing:-0.01em;color:var(--fg)}
  .app-stats small{font-size:11px;color:var(--faint)}
  .app-rows{display:grid;gap:7px}
  .app-row{display:flex;align-items:center;gap:10px;background:var(--soft);
           border:1px solid var(--panel-border);border-radius:10px;padding:9px 11px;
           font-size:13px;color:var(--dim)}
  .app-row .who{flex:1;min-width:0;color:var(--fg);font-weight:600;
                white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .app-row .when{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
                 font-size:11.5px;color:var(--faint);white-space:nowrap}
  .pill{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap}
  .pill-ok{background:rgba(75,174,79,.16);color:#8fd992}
  .pill-wait{background:var(--accent-container);color:var(--on-accent-container)}
  .pill-bad{background:rgba(243,66,54,.16);color:#ff9b8d}

  /* the ask, under the frame */
  .demo-ask{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
  .demo-ask .say{font-size:14px;color:var(--muted);margin-right:2px}
  .chip{font:inherit;font-size:13.5px;font-weight:700;color:var(--fg);cursor:pointer;
        background:transparent;border:1px solid var(--panel-border);
        border-radius:999px;padding:9px 15px;min-height:40px}
  .chip:hover{border-color:var(--accent)}
  .chip[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);
                             border-color:var(--accent)}
  .demo-note{margin:12px 0 0;font-size:13px;color:var(--faint);max-width:34em}

  /* the assembly: rows arrive one after another, and never for somebody
     who has asked their machine to stop moving things. */
  .app-row,.app-stats div{animation:land .34s ease both}
  @keyframes land{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    .app-row,.app-stats div{animation:none}
  }

  @media (max-width:980px){
    .hero-grid{grid-template-columns:1fr;gap:32px}
    .demo-stage{min-height:0}
  }


  /* --- our own apps: why there are no client logos, beside the promise -- */
  /* Both sides finish level. The card is the shorter of the two, so it
     stretches and spreads its own contents rather than sitting in a box
     with a gap under the last line. */
  .apps-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
             gap:24px;align-items:stretch;margin-bottom:28px}
  .apps-head .intro{margin-bottom:14px}
  .apps-head .intro:last-child{margin-bottom:0}
  .vow{padding:26px 28px;display:flex;flex-direction:column}
  .vow h3{font-size:16px;font-weight:700;letter-spacing:-0.01em;margin-bottom:16px}
  .vow ul{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:12px;font-size:14.5px;
          align-content:space-between;flex:1}
  .vow li{display:flex;gap:11px;align-items:flex-start;color:var(--dim)}
  .vow .no{flex:none;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
           font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
           color:var(--on-accent);background:var(--accent);border-radius:999px;
           padding:2px 8px;margin-top:2px}
  .vow p{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--panel-border);
         font-size:13.5px;color:var(--faint)}
  @media (max-width:900px){ .apps-head{grid-template-columns:1fr} }


  /* --- the footer, the same shape as Sitemorphic's --------------------- */
  .foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
             gap:32px 40px;padding-bottom:36px}
  .foot-brand .foot-mark{display:block;width:44px;margin-bottom:16px}
  .foot-brand svg{width:44px;height:44px;display:block}
  .foot-brand p{margin:0;max-width:30em;font-size:14px;line-height:1.7}
  .foot-brand b{color:var(--fg)}
  .foot-h{margin:0 0 12px;font-weight:700;color:var(--fg);font-size:14px}
  .foot-small{margin:10px 0 0;font-size:12px;color:var(--faint);line-height:1.6}
  .foot-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
              gap:24px 32px;align-content:start}
  .foot-links nav{display:flex;flex-direction:column;gap:2px;font-size:14px}
  .foot-links nav a{color:var(--faint);text-decoration:none;
                    display:inline-flex;align-items:center;min-height:38px}
  .foot-links nav a:hover{color:var(--fg)}

  /* The joke that proves the point: a button that will not be caught,
     because there is no cookie behind it to accept. */
  .cookie-game{position:relative;height:140px}
  .cookie-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
              transition:left .18s ease,top .18s ease;
              background:var(--accent);color:var(--on-accent);border:none;
              padding:9px 15px;border-radius:999px;font:inherit;font-weight:700;
              font-size:13px;white-space:nowrap;cursor:pointer}
  @media (prefers-reduced-motion:reduce){ .cookie-btn{transition:none} }

  @media (max-width:820px){ .compare,.prices{grid-template-columns:1fr} }

/* ===== the rest of the site =========================================== *
 * Everything above was written for the front page. These rules are what
 * the other pages need on top of it, and nothing here overrides them.    */

/* The nav is now a real site menu rather than two links, so it wraps
   instead of pushing the page wide, and the current page says so. */
header nav{flex-wrap:wrap;gap:8px 20px}
/* The menu is a disclosure, so a phone gets a header it can see past. On a
   wide screen the summary is gone and the links show whether it is open or
   not, which is why the display rule is set explicitly rather than left to
   the browser's own hiding. */
/* On a wide screen the wrapper gets out of the way entirely, so the links
   sit in the header's own row exactly as they did before it existed. */
.menu{display:contents}
/* A closed <details> now hides its contents through ::details-content, which
   is zero-sized whatever the child's display says. On a wide screen the menu
   is never closed in any meaningful sense, so that box is told to get out of
   the way too. Browsers without the pseudo-element ignore it and the plain
   display rule below is enough for them. */
.menu::details-content{content-visibility:visible;block-size:auto;display:contents}
.menu summary{display:none}
.menu > nav{display:flex}
header nav a{padding:8px 0;border-bottom:2px solid transparent}
header nav a[aria-current="page"]:not(.cta-sm){color:var(--fg);border-bottom-color:var(--accent)}
header .cta-sm{background:var(--accent);color:var(--on-accent);font-weight:700;
               padding:9px 16px;border-radius:999px;text-decoration:none;
               white-space:nowrap;border-bottom:none}
header .cta-sm:hover{background:var(--accent-hover);color:var(--on-accent)}

/* An inside page opens with its title and one sentence, not a hero. */
.page-head{padding:52px 0 8px}
.page-head h1{font-size:clamp(32px,5vw,52px);font-weight:800;letter-spacing:-0.02em;
              line-height:1.08;max-width:16em}
.page-head p{margin:18px 0 0;max-width:44em;color:var(--dim);font-size:18px}
.page-head p b{color:var(--fg)}

/* Legal and other plain-prose pages */
main.legal{padding:40px 0 64px}
.legal .panel{padding:36px;max-width:760px}
.legal h1{font-size:clamp(30px,4.5vw,40px);font-weight:700;letter-spacing:-0.02em;margin-bottom:10px}
.legal p.lead{font-size:18px;color:var(--dim);margin:0 0 28px}
.legal h2{font-size:19px;font-weight:600;margin:26px 0 8px}
.legal p,.legal li{margin:0 0 12px;color:var(--dim);font-size:16px;max-width:65ch}
.legal ul{padding-left:20px;margin:0 0 12px}
.legal a{color:var(--fg);text-decoration-color:var(--accent)}

/* Questions and answers: open and close with no script behind them. */
.qa{display:grid;gap:12px;max-width:860px}
.qa details{background:var(--panel);border:1px solid var(--panel-border);
            border-radius:var(--radius);padding:0 20px}
.qa summary{cursor:pointer;font-weight:700;font-size:16px;padding:16px 0;
            list-style:none;display:flex;justify-content:space-between;gap:16px;
            align-items:flex-start;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";color:var(--accent);font-weight:800;font-size:20px;
                   line-height:1;flex:none;margin-top:2px}
.qa details[open] summary::after{content:"\2212"}
.qa details[open] summary{border-bottom:1px solid var(--panel-border)}
.qa p{margin:14px 0;color:var(--dim);font-size:15.5px;max-width:65ch}
.qa h2{font-size:20px;font-weight:700;margin:28px 0 4px}
.qa h2:first-child{margin-top:0}

/* The contact form. The portal wires it up; the field names are fixed. */
.form-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:20px;
           align-items:start}
form.enquiry{padding:30px;display:grid;gap:18px}
form.enquiry .field{display:grid;gap:6px}
form.enquiry label{font-weight:600;font-size:15px}
form.enquiry input,form.enquiry textarea{font:inherit;width:100%;color:var(--fg);
  background:var(--soft);border:1px solid var(--panel-border);
  border-radius:var(--radius);padding:13px 15px}
form.enquiry textarea{resize:vertical;min-height:150px}
form.enquiry input:focus-visible,form.enquiry textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}
form.enquiry button{justify-self:start;background:var(--accent);color:var(--on-accent);
  border:none;font:inherit;font-weight:700;font-size:16px;padding:0 26px;
  min-height:52px;border-radius:var(--radius);cursor:pointer}
form.enquiry button:hover{background:var(--accent-hover)}
form.enquiry .hp{position:absolute;left:-9999px}
form.enquiry .note{margin:0;font-size:13.5px;color:var(--faint)}
.aside-stack{display:grid;gap:16px}
.aside-stack .panel{padding:24px}
.aside-stack h3{font-size:16px;font-weight:700;margin-bottom:8px}
.aside-stack p{margin:0 0 10px;color:var(--dim);font-size:15px}
.aside-stack p:last-child{margin-bottom:0}
.aside-stack a{color:var(--fg);text-decoration-color:var(--accent)}
@media (max-width:860px){ .form-grid{grid-template-columns:1fr} }

/* Work: client sites and our own apps, in the same grid. */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.cards .panel{overflow:hidden;display:flex;flex-direction:column;
              text-decoration:none;color:inherit}
a.panel.card:hover{border-color:var(--accent)}
.cards img{width:100%;aspect-ratio:8/5;object-fit:cover;object-position:top}
.cards .body{padding:18px 20px 22px}
.cards .body b{display:block;font-size:16px;color:var(--fg);margin-bottom:4px}
.cards .body p{margin:0;font-size:14.5px;color:var(--dim)}
.cards .body .where{display:block;margin-top:10px;font-size:13px;color:var(--accent);
                    font-weight:700}

/* What people said. Three, with a face, because an unattributed quote is
   worth nothing. */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.quotes .panel{padding:26px;display:flex;flex-direction:column;gap:16px}
.quotes blockquote{margin:0;font-size:15.5px;color:var(--dim)}
.quotes figcaption{display:flex;align-items:center;gap:12px;margin-top:auto}
.quotes img{width:44px;height:44px;border-radius:50%;flex:none}
.quotes b{display:block;font-size:15px}
.quotes span{font-size:13px;color:var(--faint)}

/* A row of plain numbers under a heading. */
.figures{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;
         margin-top:24px}
.figures .panel{padding:20px 22px}
.figures b{display:block;font-size:26px;font-weight:800;letter-spacing:-0.02em}
.figures span{font-size:14px;color:var(--dim)}

/* Numbered steps down the page. */
.steps{display:grid;gap:16px;max-width:860px}
.steps .panel{padding:24px 26px;display:grid;grid-template-columns:auto 1fr;
              gap:6px 20px;align-items:start}
.steps .n{grid-row:span 2;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
          font-size:13px;font-weight:700;color:var(--on-accent);background:var(--accent);
          border-radius:999px;padding:4px 11px}
.steps h3{font-size:18px;font-weight:700;letter-spacing:-0.01em}
.steps p{margin:0;color:var(--dim);font-size:15.5px}
@media (max-width:560px){ .steps .panel{grid-template-columns:1fr} .steps .n{grid-row:auto;justify-self:start} }

/* Two halves of what we do, each with its own list. */
.halves{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.halves .panel{padding:30px;display:flex;flex-direction:column;gap:14px}
.halves h3{font-size:24px;font-weight:800;letter-spacing:-0.01em}
.halves .fig{font-size:32px;font-weight:800;letter-spacing:-0.02em;line-height:1}
.halves .fig span{font-size:15px;font-weight:600;color:var(--muted);letter-spacing:0}
.halves p{margin:0;color:var(--dim);font-size:15.5px}
.halves ul.ticks{margin-top:4px}
@media (max-width:820px){ .halves{grid-template-columns:1fr} }

/* The comparison table on the pricing page. */
.costs{width:100%;border-collapse:collapse;max-width:720px;font-size:15.5px}
.costs caption{text-align:left;color:var(--faint);font-size:14px;padding-bottom:12px}
.costs th,.costs td{border-bottom:1px solid var(--line);padding:14px 12px;text-align:left}
.costs th{color:var(--faint);font-weight:600;font-size:13px;text-transform:uppercase;
          letter-spacing:.05em}
.costs td:last-child{text-align:right;font-weight:700;white-space:nowrap}
.costs tr.mine td{color:var(--fg)}
.costs tr.mine td:last-child{color:var(--accent)}

/* The scope picker's tick list. A whole row is the target, never the box. */
.picks{display:grid;gap:2px}
.pick{display:flex;align-items:center;gap:12px;min-height:44px;cursor:pointer;
      font-size:15.5px;color:var(--dim)}
.pick:hover{color:var(--fg)}
.pick input{width:1.125rem;height:1.125rem;flex:none;accent-color:var(--accent);
            cursor:pointer}
#scope-list:empty{display:none}

@media (max-width:760px){
  header{padding:12px 0}
  header .row{flex-direction:row;align-items:center;flex-wrap:nowrap}
  .brand{font-size:17px;gap:8px;min-width:0}
  .brand svg{width:28px;height:28px}
  .menu{display:block;position:relative}
  .menu summary{display:inline-flex;align-items:center;gap:9px;list-style:none;
                cursor:pointer;font-weight:700;font-size:15px;min-height:44px;
                padding:0 16px;border:1px solid var(--panel-border);
                border-radius:999px}
  .menu summary::-webkit-details-marker{display:none}
  /* Three bars, then a cross. Both are characters rather than drawn boxes,
     so there is no geometry to go wrong at a size nobody tested. */
  .menu summary::after{content:"\2261";font-size:20px;line-height:1}
  .menu[open] summary::after{content:"\00d7";font-size:22px}
  .menu:not([open])::details-content{content-visibility:hidden;block-size:0}
  .menu[open]::details-content{content-visibility:visible;block-size:auto}
  .menu:not([open]) > nav{display:none}
  .menu[open] > nav{position:absolute;right:0;top:calc(100% + 10px);z-index:30;
                    flex-direction:column;align-items:stretch;gap:2px;
                    min-width:210px;padding:10px 14px;background:var(--panel);
                    border:1px solid var(--panel-border);
                    border-radius:var(--panel-radius);
                    box-shadow:var(--shadow-panel)}
  .menu[open] > nav a{padding:11px 4px;border-bottom:none;min-height:44px;
                      display:flex;align-items:center}
  .menu[open] > nav a[aria-current="page"]:not(.cta-sm){color:var(--accent)}
  .menu[open] > nav .cta-sm{justify-content:center;margin-top:8px}
}

/* On a narrow phone the mock spreadsheet is wider than the frame it sits in.
   It scrolls inside its own box rather than being silently cut off at the
   edge, and the page itself still never scrolls sideways. */
.demo-view{overflow-x:auto}