@import "https://assets.elements.dev/assets/app/shared/styles/page.b88d3eb9ac682825.css";

/* One vertical rhythm for the page: every band has the same space above and
   below its content, and every heading the same space under it, so the
   sections read as equals and nothing sits closer to one neighbour than the
   other. */
.home-page {
  --home-band: var(--space-20);
  --home-head: var(--space-8);
  --home-group: var(--space-10);
}

@media (max-width: 700px) {
  .home-page {
    --home-band: var(--space-14);
    --home-group: var(--space-8);
  }
}

.home-shell {
  max-width: var(--container-marketing);
  margin: 0 auto;
  padding: 0 var(--space-8);
}

/* The hero is a size container so the headline can size itself to it. */
.home-hero {
  padding: var(--space-16) 0 0;
  container-type: inline-size;
}

.home-h1 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  /* Two lines everywhere: "on your machines." is about 8em wide, so the
     size never exceeds 12% of the hero's width (12cqi), which keeps that
     line whole on any phone and at any text zoom. */
  font-size: min(clamp(2.25rem, 9vw, 5.5rem), 12cqi);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 var(--space-5);
  color: var(--ink);
}

.home-lede {
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 var(--space-8);
  max-width: 36em;
}

/* Two equal columns sized to the wider button, so both buttons are the
   same width. */
.home-cta {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.home-cta-button {
  justify-content: center;
  text-align: center;
  min-width: 14rem;
}

.home-phrase {
  white-space: nowrap;
}

/* Accent and italic so "your" reads before the sentence around it, with a
   slow glimmer that never leaves the blue. background-clip: text clips the
   italic's last letter, so the padding widens the box and the margin gives
   the space back. */
.home-accent {
  font-style: italic;
  background-image:
    linear-gradient(102deg,
      var(--accent) 0%,
      var(--accent) 38%,
      #3f8cc9 47%,
      var(--accent) 56%,
      var(--accent) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  padding-right: 0.1em;
  margin-right: -0.1em;
  animation: home-glimmer 7s ease-in-out infinite;
}

@keyframes home-glimmer {
  0%   { background-position: 115% 50%; }
  55%  { background-position: -15% 50%; }
  100% { background-position: -15% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .home-accent {
    animation: none;
    background-image: none;
    -webkit-text-fill-color: var(--accent);
  }
}

/* One size for every section heading on the page. */
.home-h2 {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(1.625rem, 3.5vw, 2rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--home-head);
  color: var(--ink);
}

/* What's in Elements and the licence: one full-width band on the tint, the
   column matching the page's. */
.home-specs {
  padding: var(--home-band) var(--space-8);
  background: var(--bg-soft);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.home-terms {
  margin-top: var(--home-group);
  padding-top: var(--home-group);
  border-top: 1px solid var(--rule-soft);
}

.home-parts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-10) var(--space-12);
  margin: var(--space-8) 0 0;
}

.home-part dt {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  font-weight: var(--weight-bold);
  color: var(--ink);
  margin: 0 0 var(--space-2);
}

.home-part dd {
  font-size: 1.0625rem;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}

@media (max-width: 700px) {
  .home-specs {
    padding: var(--home-band) var(--space-5);
  }

  .home-parts-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }
}

/* Every band on the page has the same space above and below its content:
   --space-12, or --space-10 on a phone. The shells add none of their own, so
   nothing stacks onto a band's bottom edge. */
.home-community {
  padding: var(--home-band) 0;
}

@media (max-width: 700px) {
  .home-community {
    padding: var(--home-band) 0;
  }
}

/* The concerns band runs full width on the tint; its inner column lines up
   with the page's. */
.home-problems {
  padding: var(--home-band) var(--space-8);
  background: var(--bg-soft);
  border-top: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.home-band-inner {
  max-width: calc(var(--container-marketing) - 2 * var(--space-8));
  margin: 0 auto;
}

/* The promises title is the longest heading, so it wraps balanced. */
.home-problems-title {
  text-wrap: balance;
}

@media (max-width: 700px) {
  .home-problems {
    padding: var(--home-band) var(--space-5);
  }
}

.home-why-lede + .home-why-lede {
  margin-top: var(--space-4);
}

.home-why-lede {
  font-size: 1.1875rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
  max-width: 40em;
}

.home-why-title {
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
  margin: var(--home-group) 0 var(--space-6);
}

.home-why {
  margin-top: 0;
}

.home-why-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-12);
  padding: var(--space-6) 0;
  border-top: 1px solid var(--rule-soft);
}

.home-why-row.is-head {
  padding: 0 0 var(--space-3);
  border-top: 0;
  font-size: 1.0625rem;
  font-weight: var(--weight-bold);
  color: var(--ink-dim);
}

.home-why-row.is-head .is-with {
  color: var(--accent);
}

.home-why-quote {
  font-size: 1.1875rem;
  font-weight: var(--weight-bold);
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.4;
  color: var(--ink);
}

.home-why-answer {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* On a phone the two sides stack, each row reading problem then answer,
   and the headings go: a row's own order says which is which. */
@media (max-width: 640px) {
  .home-why-row {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
  }

  .home-why-row.is-head {
    display: none;
  }

  .home-why-row:nth-child(2) {
    border-top: 0;
    padding-top: 0;
  }
}

/* Right-aligned under the list, where the eye ends up after the last row,
   the same place as "Read our history" under the letter. */
.home-link {
  display: block;
  width: fit-content;
  margin: var(--space-10) 0 0 auto;
  font-size: 0.9375rem;
  color: var(--accent);
  text-decoration: none;
}

.home-link:hover {
  color: var(--link-hover);
}

@media (max-width: 700px) {
  .home-shell {
    padding: 0 var(--space-5);
  }

  .home-hero {
    padding-top: var(--space-10);
  }
}

.home-loud {
  font-style: italic;
  font-weight: inherit;
  color: var(--ink);
}

/* The VS Code screenshot's slot, right under the hero: what the product
   looks like comes before anything that argues for it. */
.home-shots {
  margin: var(--space-12) 0 var(--home-band);
}

.home-shot-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* The caption carries the point of each still, so it reads at body size in
   full ink, a step heavier than the text around it. */
.home-shot-cap {
  font-size: 1.0625rem;
  font-weight: var(--weight-medium, 500);
  line-height: 1.5;
  color: var(--ink);
}

/* On a phone the caption and the controls each get the full width: side by
   side the caption wrapped into a narrow column. The controls drop under it
   and stay on the right, where they sit on a wider screen. */
@media (max-width: 640px) {
  .home-shot-foot {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .home-shot-nav {
    align-self: flex-end;
  }
}

/* Arrows and dots in one small row beside the caption, outside the image,
   so nothing sits on top of the screenshot. */
.home-shot-nav {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

.home-shot-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--rule);
  cursor: pointer;
}

.home-shot-dot.is-on {
  background-color: var(--accent);
}

.home-shot-arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}

/* Hover only where there is one: on a touch screen a tap leaves :hover
   stuck on the button until the next tap elsewhere. */
@media (hover: hover) {
  .home-shot-arrow:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--ink) 8%, transparent);
  }
}

.home-shot-arrow svg {
  width: 16px;
  height: 16px;
}

/* Each still comes in a light and a dark capture; the page shows the one
   that matches its theme. */
.home-shot {
  display: block;
  overflow: hidden;
  border-radius: 10px;
  outline: 1px solid var(--rule);
  outline-offset: -1px;
  cursor: zoom-in;
  touch-action: pan-y;
}

.home-shot-img,
.home-shot-img img {
  display: block;
  width: 100%;
  height: auto;
}

.home-shot-img.is-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-shot-img.is-light {
    display: none;
  }

  :root:not([data-theme="light"]) .home-shot-img.is-dark {
    display: block;
  }
}

:root[data-theme="dark"] .home-shot-img.is-light {
  display: none;
}

:root[data-theme="dark"] .home-shot-img.is-dark {
  display: block;
}

/* The light editor's white runs into the page with no edge, so a hairline
   draws it; on the dark page the ring is light instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-shot {
    outline: 1px solid rgba(255, 255, 255, 0.14);
    outline-offset: -1px;
  }
}

:root[data-theme="dark"] .home-shot {
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
}

/* The letter is a personal note, not another section of the pitch. It sits
   on the page ground between the tinted specs band and the dark close, so
   both of its edges are set by the bands around it. */
/* The letter sits on the section headlines' pale tint, without their grid,
   which fought the body text, so it reads as its own note rather than one
   more point under No lock-in. */
.home-note {
  padding: var(--home-band) var(--space-8);
  background-color: color-mix(in srgb, var(--accent) 4%, var(--bg));
  background-image:
    radial-gradient(56rem 26rem at 92% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
}

.home-note-inner {
  max-width: calc(var(--container-marketing) - 2 * var(--space-8));
  margin: 0 auto;
}

@media (max-width: 700px) {
  .home-note {
    padding: var(--home-band) var(--space-5);
  }
}

.home-note-story {
  margin: var(--space-8) 0 0;
  font-size: 0.9375rem;
  text-align: right;
}

.home-note-story a {
  color: var(--accent);
  text-decoration: none;
}

.home-note-story a:hover {
  color: var(--link-hover);
}

/* The close. The one dark band on the page, centred, with the category set
   at display size and the hero's ask under it. */
.home-finale {
  padding: var(--home-band) var(--space-6);
  background: #08090B;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  color: #F2F7FB;
  text-align: center;
}

/* Held to the page's content column like every band above it, so at this
   size it wraps into two balanced lines rather than running past the panels. */
.home-finale-title {
  max-width: calc(var(--container-marketing) - 2 * var(--space-8));
  text-wrap: balance;
  margin: 0 auto var(--space-6);
  font-size: clamp(2.625rem, 7.5vw, 4.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #F2F7FB;
}

.home-finale-say {
  max-width: 700px;
  margin: 0 auto var(--space-8);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: #A8B6C6;
}

@media (max-width: 700px) {
  .home-finale {
    padding: var(--home-band) var(--space-5);
  }
}

/* Dark mode: one ground for the whole page. A lifted band on near-black
   picks up a cast and reads as patchy paint, so in dark the bands keep the
   page colour and a faint full-width hairline marks where each one starts
   and ends. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .home-page :is(.home-problems, .home-specs) {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.08);
  }

  :root:not([data-theme="light"]) .home-page .home-finale {
    background: transparent;
  }
}

:root[data-theme="dark"] .home-page :is(.home-problems, .home-specs) {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.08);
}

:root[data-theme="dark"] .home-page .home-finale {
  background: transparent;
}

/* The closing band runs to the footer. The page wrapper's bottom padding sat
   under it in the page colour, which in dark mode read as more of the band
   and pushed its content off centre. */
.home-page .page-chrome-main {
  padding-bottom: 0;
}

/* On a phone the two hero buttons stack, so they run the full width at the
   same size instead of two ragged widths. */
@media (max-width: 640px) {
  .home-cta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* The zoom view: the still as large as the window allows, with the page's
   own caption row under it, controls in the same places. A click on the
   backdrop or Esc closes. */
.home-zoom {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--space-8) var(--space-6);
  background: #04080E;
  outline: none;
  cursor: zoom-out;
}

.home-zoom-fig {
  margin: 0;
  width: min(100%, calc((100vh - 8rem) * 1.374));
  cursor: default;
}

.home-zoom-shot {
  overflow: hidden;
  border-radius: 12px;
  outline: 1px solid rgba(255, 255, 255, 0.14);
  outline-offset: -1px;
  touch-action: pan-y;
}

.home-zoom .home-shot-cap {
  font-size: 1.1875rem;
  color: #E6EDF3;
}

.home-zoom .home-shot-foot {
  margin-top: var(--space-4);
}

.home-zoom .home-shot-arrow {
  color: #C9D4DF;
}

.home-zoom-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #C9D4DF;
  cursor: pointer;
}

@media (hover: hover) {
  .home-zoom-close:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.08);
  }
}

.home-zoom-close svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 700px) {
  .home-zoom {
    padding: var(--space-6) var(--space-3);
  }
}

/* The acts. Each part of the page opens on a full-width band: a pale ground
   lit by soft glows of the accent and violet over a faint grid, with a large
   left-aligned headline in the column the content below uses. Mixed from the
   theme's own colours, so it stays airy in light and dark. */
.home-act {
  position: relative;
  padding: var(--home-band) var(--space-8);
  background-color: color-mix(in srgb, var(--accent) 4%, var(--bg));
  background-image:
    radial-gradient(56rem 26rem at 92% -10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  border-top: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
  overflow: hidden;
}

/* The grid on its own layer, masked so it fades out toward the edges and
   the bottom instead of running hard to the screen edge. */
.home-act::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 6%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 70% 0%, #000 30%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 90% at 70% 0%, #000 30%, transparent 100%);
  pointer-events: none;
}

.home-act-inner {
  position: relative;
}

/* The headline rises in as its band scrolls into view. CSS only, and off
   for anyone who asks for reduced motion. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .home-act-inner {
      animation: home-act-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% entry 70%;
    }
  }
}

@keyframes home-act-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.home-act-inner {
  max-width: calc(var(--container-marketing) - 2 * var(--space-8));
  margin: 0 auto;
}

.home-act-title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: var(--ink);
}

.home-act-sub {
  margin: var(--space-5) 0 0;
  max-width: 34rem;
  font-size: clamp(1.125rem, 2vw, 1.3125rem);
  line-height: 1.45;
  color: var(--ink-soft);
}

.home-page .home-problems,
.home-page .product-tour :is(.session, .session.is-alt, .consequence) {
  background: none;
  border: 0;
}

/* Without bands between them, two sections' paddings stacked into a gap
   twice the one between points. The break between sections is now one
   gap, a step larger than the gap between points. */
.home-page .product-tour :is(.session, .consequence):has(+ :is(.session, .consequence)) {
  padding-bottom: 0;
}

.home-page .product-tour :is(.session, .consequence) + :is(.session, .consequence) {
  padding-top: var(--space-14);
}

@media (max-width: 700px) {
  .home-page .product-tour :is(.session, .consequence) + :is(.session, .consequence) {
    padding-top: var(--space-8);
  }
}

/* The band already ends the space above the content, so the section under
   it starts close. */
.home-act + .home-problems,
.home-act + .home-shell .home-community,
.home-act + .product-tour > .session:first-child,
.home-act + .session {
  padding-top: var(--space-12);
}

@media (max-width: 700px) {
  .home-act {
    padding: var(--home-band) var(--space-5);
  }
}

/* The home feed's rank numbers start on the text edge, not indented in a
   right-aligned gutter, so the feed lines up with the headline above it. */
.home-community .feed-row {
  grid-template-columns: auto minmax(0, 1fr);
}

.home-community .feed-rank {
  text-align: left;
}

/* The feed's own top margin and first row padding added to the band's gap;
   take them back out so the first post sits as far below the band as the
   first heading does under the others. */
.home-act + .home-shell .home-community {
  padding-top: calc(var(--space-12) - 8px);
}

.home-act + .home-shell .home-community .feed {
  margin-top: 0;
}