/* Monitive landing page · section layout. Shares tokens and components with pulse.css. */
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
html,body{overflow-x:hidden}
section.wrap{padding-top:120px}
.sec-head{display:flex;flex-direction:column;gap:18px;max-width:720px}
.kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:500}
.lede{font-size:20px;line-height:1.5;color:var(--ink-2)}
h2{font-size:56px}
.copy{display:flex;flex-direction:column;gap:28px}
.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;font-size:17px;line-height:1.5;color:var(--ink-2)}
.plain strong{color:var(--ink);font-weight:600}
.prose{display:flex;flex-direction:column;gap:18px;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:600px}
.grid>*,.steps li>*,.copy>*,.snippet{min-width:0}

/* Code block: the kit's, at a marketing size */
.code{margin:0;background:var(--surface-2);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:13px;line-height:1.6;color:var(--ink);white-space:pre;overflow-x:auto;font-variant-numeric:tabular-nums}
.code.lg{font-size:13px;padding:16px 18px;background:#fff;border:1.5px solid var(--border)}
.code .t{color:var(--ink-3)}
.code .k{color:var(--teal-700)}
.code .s{color:#B45309}
.code .n{color:#6D28D9}
.code .c{color:var(--ink-3)}
.code.chat .u{color:var(--ink-3)}
.code.chat .a{color:var(--teal-700)}

/* 1 · Hero: full-bleed. The flock canvas starts at 40 % of the content column and runs to the viewport edge. */
.hero{position:relative;overflow:hidden;min-height:max(640px,85vh);display:flex;align-items:center}
.hero__canvas{position:absolute;top:0;bottom:0;right:0;left:calc((100% - var(--max)) / 2 + var(--gutter) + (var(--max) - 2 * var(--gutter)) * .40);z-index:1}
.hero__inner{position:relative;z-index:2;width:100%;padding-top:40px;padding-bottom:56px}
.hero .copy{max-width:600px;gap:26px}
.hero h1{font-size:76px}
.hero .sub{font-size:20px;line-height:1.5;color:var(--ink-2);max-width:560px}
.hero .urlform{margin-top:6px}
.hero .micro{margin-top:-12px}
.hero .facts{margin-top:28px;padding-top:22px;border-top:1.5px solid var(--border-soft);max-width:600px;display:grid;grid-template-columns:auto auto;gap:10px 32px;justify-content:start}
.hero .facts span::before{content:none;margin:0}
/* Soft ground fade where the village meets the text column */
.hero__canvas::after{content:"";position:absolute;left:0;top:0;bottom:0;width:30%;background:linear-gradient(to right,var(--ground) 0,rgba(247,247,246,.85) 35%,rgba(247,247,246,0) 100%);z-index:3;pointer-events:none}

/* Pause control for the flock (WCAG 2.2.2). Ghost until hovered or focused. */
.flock-pause{position:absolute;right:20px;bottom:18px;z-index:4;height:28px;padding:0 10px;border:1.5px solid var(--border-strong);border-radius:999px;background:rgba(247,247,246,.85);color:var(--ink-3);font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;opacity:.55;transition:opacity .2s}
.flock-pause:hover,.flock-pause:focus-visible,.flock-pause[aria-pressed="true"]{opacity:1;color:var(--ink);border-color:var(--ink)}
.flock-pause[hidden]{display:none}

/* 2 · Know the feeling? */
.pains{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.pains li{background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:28px 28px 30px;display:flex}
.pains p{font-family:var(--display);font-weight:700;font-size:24px;line-height:1.2;letter-spacing:-.02em;color:var(--ink-3);text-wrap:pretty}
.pains strong{color:var(--ink);font-weight:800}

/* 3 · How it works */
.how .grid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:56px;align-items:center}
.steps{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:36px}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:16px;align-items:start}
.steps .num{font-size:13px;color:var(--ink-3);padding-top:8px;letter-spacing:.06em}
.steps h3{font-size:26px;margin-bottom:10px}
.steps p{font-size:17px;line-height:1.55;color:var(--ink-2);max-width:520px}
.steps .code{margin-top:16px;max-width:520px;white-space:pre-wrap}
.shot{margin:0;position:relative;width:calc(100% + 96px);max-width:none}
.shot img{display:block;width:100%;height:auto;border:1.5px solid var(--border);border-radius:14px;box-shadow:0 1px 2px rgba(22,24,28,.06),0 24px 48px -28px rgba(22,24,28,.35);background:#fff}
.shot figcaption{margin-top:12px;font-size:11px;letter-spacing:.04em;color:var(--ink-3);max-width:520px;line-height:1.6}

/* 4 · What's the catch? */
.catch .grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:start}
.catch .swift{height:128px;margin-top:8px}
.catch .copy{max-width:720px;gap:20px}
.catch .lede{font-size:22px;line-height:1.5;color:var(--ink)}

/* 5 · What it watches */
.watch .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:40px;margin-top:48px;position:relative}
.watch .col{display:flex;flex-direction:column;gap:18px}
.watch .swift{position:absolute;right:0;top:-150px;height:112px}

/* 6 · Already in your pipeline */
.pipe .grid{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:56px;align-items:start}
.pipe .dev{gap:18px}
.pipe .copy .swift{height:128px;margin-top:8px}
.snippets{display:flex;flex-direction:column;gap:20px;margin-top:8px}
.snippet{margin:0;display:flex;flex-direction:column;gap:8px}
.snippet figcaption{font-size:11px;letter-spacing:.06em;color:var(--ink-3)}
.snippet figcaption+pre+figcaption{margin-top:4px}

/* Request / response tabs in a snippet caption: the response is one click away instead of a second block. */
.snippet .tab{appearance:none;border:0;background:none;padding:0 2px;margin:0;font:inherit;font-size:11px;letter-spacing:.06em;color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:transparent}
.snippet .tab:hover{color:var(--ink)}
.snippet .tab.is-active{color:var(--ink);text-decoration-color:var(--ink)}
.snippet .sep{color:var(--ink-4);margin:0 4px}
.snippet [hidden]{display:none}

/* Docs line under the snippets */
.docs-line{margin-top:12px;font-size:14px;color:var(--ink-3)}
.docs-line a{font-family:var(--display);font-weight:700;color:var(--link)}
.copybtn{margin-left:10px;height:22px;padding:0 8px;border:1.5px solid var(--border);border-radius:999px;background:#fff;color:var(--ink-2);font-size:10.5px;letter-spacing:.04em;text-transform:none;cursor:pointer;vertical-align:middle}
.copybtn:hover{border-color:var(--ink);color:var(--ink)}
.snippet figcaption{display:flex;align-items:center}
.code .caret{display:inline-block;width:8px;height:1.1em;background:var(--ink);vertical-align:text-bottom;margin-left:1px;animation:blink 1s steps(1) infinite}
.code.typed-done .caret{display:none}
@keyframes blink{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.code .caret{display:none}}

/* 7 · Show your customers */
.show .grid{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:64px;align-items:center}
.statusmock{background:#fff;border:1.5px solid var(--border);border-radius:16px;padding:22px 24px;display:flex;flex-direction:column;gap:14px;max-width:520px;justify-self:end;width:100%}
.sm-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:12px;border-bottom:1.5px solid var(--border-soft)}
.sm-url{font-size:13px;color:var(--ink)}
.sm-badge{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#15803D;background:#DCFCE7;border-radius:999px;padding:4px 10px 4px 8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.up{background:#16A34A}
.sm-row{display:grid;grid-template-columns:96px 1fr 56px;gap:14px;align-items:center;font-size:14px}
.sm-row .pct{font-size:12px;color:var(--ink-3);text-align:right}
.strip{display:flex;gap:3px;height:18px}
.strip i{flex:1;background:#16A34A;border-radius:3px}
.strip i.d{background:#E0442C}
.sm-foot{font-size:12px;color:var(--ink-3);padding-top:4px}
.sm-badgeline{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1.5px solid var(--border-soft)}
.sm-badgeline>.mono{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.badge{display:inline-flex;font-size:11px;border-radius:4px;overflow:hidden;border:1px solid var(--border-strong)}
.badge-l{background:var(--surface-2);padding:3px 8px;color:var(--ink-2)}
.badge-r{background:#16A34A;color:#fff;padding:3px 8px}

/* 8 · Our story: the one inverted section. Ink ground, off-white type. */
.story{margin-top:140px;background:var(--ink);color:#F7F7F6;padding:120px 0 128px}
.story h2,.story h3{color:#F7F7F6}
.story .kicker{color:#B4B8BF}
.story .prose{color:#D4D4D1}
.story a{color:#FF828C}
.story .grid{display:grid;grid-template-columns:minmax(0,560px) minmax(0,1fr);gap:72px;align-items:start}
.numbers{display:flex;flex-wrap:wrap;gap:8px 0;font-size:11.5px;letter-spacing:0;white-space:nowrap;color:#B4B8BF;padding:18px 0;border-top:1px solid rgba(247,247,246,.18);border-bottom:1px solid rgba(247,247,246,.18)}
.numbers span::before{content:"·";margin:0 12px;color:#6B7079}
.numbers span:first-child::before{content:none;margin:0}
.quote{margin:8px 0 0;padding:0 0 0 24px;border-left:3px solid #F7F7F6;display:flex;flex-direction:column;gap:10px;max-width:600px}
.quote p{font-family:var(--display);font-weight:700;font-size:28px;line-height:1.15;letter-spacing:-.025em;color:#F7F7F6}
.quote footer{font-size:12px;letter-spacing:.04em;color:#B4B8BF}
/* Founder note: one real person. */
.founder{display:grid;grid-template-columns:72px 1fr;gap:20px;align-items:start;margin:8px 0 0;padding:22px 24px;border:1px solid rgba(247,247,246,.18);border-radius:16px;max-width:600px}
.portrait{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}
.founder-text{display:flex;flex-direction:column;gap:14px}
.founder-text p{font-size:17px;line-height:1.55;color:#D4D4D1}
.founder-text .sig{display:flex;align-items:baseline;gap:12px;color:#B4B8BF;font-size:12px}
.sig-name{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-.03em;color:#F7F7F6}

/* Prints on a table: four homepages, small, overlapping, each tilted a little. */
.prints{margin:0;position:relative;width:100%;min-height:640px;padding-top:8px}
.print{position:absolute;width:60%;background:#fff;padding:6px 6px 26px;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.35),0 18px 40px -18px rgba(0,0,0,.6)}
.print img{display:block;width:100%;aspect-ratio:1280/830;object-fit:cover;object-position:top;border:1px solid #E5E5E3}
.print span{position:absolute;left:10px;bottom:7px;font-size:11px;letter-spacing:.08em;color:#6B7079}
.p-2011{left:0;top:0;transform:rotate(-3.5deg);z-index:1}
.p-2012{left:14%;top:112px;transform:rotate(2deg);z-index:2}
.p-2014{left:27%;top:226px;transform:rotate(-1.5deg);z-index:3}
.p-now{left:40%;top:340px;transform:rotate(2.5deg);z-index:4}

/* 9 · Final call */
.final{padding-top:140px;padding-bottom:120px}
.final .grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:48px;align-items:center}
.final .swift{height:128px}
.final .copy{gap:24px}
.final h2{font-size:56px}
.final .micro{margin-top:-8px}

/* Footer */
.foot{padding:40px 32px 56px;border-top:1.5px solid var(--border)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:32px}
.foot .lockup{height:48px;margin-left:-10px;display:block}
.foot-line{font-size:14px;color:var(--ink-3);margin-top:4px}
.foot-legal{font-size:11px;letter-spacing:.04em;color:var(--ink-4);margin-top:8px}
.foot-links{list-style:none;margin:8px 0 0;padding:0;display:flex;gap:24px;font-size:14px;flex-wrap:wrap}
.foot-links a{color:var(--ink-2)}
.foot-voice{font-size:14px;color:var(--ink-3);margin-top:36px}
.foot-voice .mono{color:var(--ink-2)}

@media (max-width:700px){
  section.wrap{padding-top:80px}
  h2{font-size:40px}
  .lede{font-size:17px}
  .copy{gap:22px}
  .plain{font-size:16px}
  .prose{font-size:16px}
  .code{white-space:pre-wrap;overflow-wrap:anywhere}
  .hero{display:block;min-height:0}
  .hero__canvas{position:relative;left:auto;right:auto;height:290px;margin:0 0 4px}
  .hero__inner{padding-top:0;padding-bottom:48px}
  .hero h1{font-size:46px}
  .hero .sub{font-size:17px}
  .hero .facts{margin-top:24px;padding-top:18px;grid-template-columns:1fr;gap:6px}
  .hero__canvas::after{width:0}
  .pains{grid-template-columns:1fr;margin-top:28px;gap:12px}
  .pains li{padding:22px 22px 24px}
  .pains p{font-size:20px}
  .how .grid,.pipe .grid,.show .grid,.story .grid{grid-template-columns:1fr;gap:32px}
  .shot{width:calc(100% + 16px)}
  .shot img{border-radius:10px}
  .steps li{grid-template-columns:36px 1fr;gap:10px}
  .steps h3{font-size:22px}
  .steps .code{font-size:11.5px;padding:12px}
  .catch .grid{grid-template-columns:1fr;gap:16px}
  .catch .swift{height:96px;margin:0 0 0 -6px}
  .catch .lede{font-size:19px}
  .watch .grid{grid-template-columns:1fr;gap:36px;margin-top:32px}
  .watch .swift{position:static;height:96px;order:-1;margin:0 0 -8px -6px}
  .pipe .copy .swift{height:96px}
  .code.lg{font-size:12px;padding:14px}
  .statusmock{justify-self:stretch;max-width:none;padding:18px}
  .sm-row{grid-template-columns:72px 1fr 52px;gap:10px;font-size:13px}
  .strip{height:14px;gap:2px}
  .story{margin-top:96px;padding:80px 0 88px}
  .prints{min-height:0;height:400px;padding-top:0}
  .print{width:62%}
  .p-2011{left:0}.p-2012{left:12%;top:78px}.p-2014{left:24%;top:156px}.p-now{left:36%;top:234px}
  .quote p{font-size:24px}
  .founder{grid-template-columns:56px 1fr;gap:14px;padding:18px}
  .portrait{width:56px;height:56px}
  .flock-pause{top:250px;bottom:auto;right:12px;opacity:.8}
  .pains p{font-size:20px}
  .final{padding-top:96px;padding-bottom:80px}
  .final .grid{grid-template-columns:1fr;gap:16px}
  .final .swift{height:96px;margin-left:-6px}
  .final h2{font-size:40px}
  .foot{padding:32px 16px 48px}
  .foot-grid{flex-direction:column;gap:20px}
  .foot-links{gap:12px 20px}
  }
@media (max-width:700px){
  .numbers{flex-direction:column;gap:6px;white-space:normal}
  .numbers span::before{content:none;margin:0}
}

/* Phone menu sheet (theme addition) */
.nav{position:relative}
.menu-sheet{display:none}
@media (max-width:700px){
  .menu-sheet{position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1.5px solid var(--border);z-index:10}
  .nav.open .menu-sheet{display:block}
  .menu-sheet ul{list-style:none;margin:0;padding:12px 16px 16px;display:flex;flex-direction:column}
  .menu-sheet li+li{margin-top:4px}
  .menu-sheet a{display:flex;align-items:center;min-height:44px;font-size:16px;color:var(--ink-2);text-decoration:none}
  .menu-sheet a.signin{color:var(--link)}
}

/* Large screens (theme addition): wider column, bigger headline, and a wider hero copy column so the larger h1 still breaks to 3 lines. The hero canvas left recomputes from --max. */
@media (min-width:1600px){
  :root{--max:1280px}
  .hero h1{font-size:88px}
  .hero .copy{max-width:640px}
  .hero .sub{max-width:600px}
}