/* Homepage composition; shared components live in styles.css. */
@font-face {
  font-family: "OpenAI Sans";
  src: url("assets/fonts/openai-sans-semibold.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}
.home-v2 {
  --home-ink: var(--text-primary);
  --bench-bar: var(--btn-bg);
  /* Cool slate, not --text-muted: that token is a warm gray and reads dirty beside the blue bar. */
  --bench-bar-alt: #b7c1d0;
  --bench-axis: #c9ced6;
  --home-hero-border: var(--border);
  --home-hero-title: var(--text-primary);
  --home-hero-body: var(--text-body);
  --home-hero-accent: var(--blue);
  --home-hero-slide-shadow: 0 25px 60px rgba(26, 39, 68, 0.14);
  --home-hero-primary-bg: var(--btn-bg);
  --home-hero-primary-hover: var(--btn-hover);
}
[data-theme="dark"] .home-v2 {
  --bench-bar: var(--blue);
  --bench-bar-alt: #3c4b60;
  --bench-axis: #33404f;
  --home-hero-border: #27405f;
  --home-hero-title: #f7f9fc;
  --home-hero-body: #bdc9da;
  --home-hero-accent: #72aef0;
  --home-hero-slide-shadow: 0 25px 60px #0003;
  --home-hero-primary-bg: #4a8ed4;
  --home-hero-primary-hover: #62a2e2;
}
.home-v2 h2 em,
.home-v2 h1 em {
  font-weight: inherit;
}

/* Layout and shared surfaces */
.home-v2 .home-section-inner {
  max-width: 1200px;
  margin: 0 auto;
}
/* Legacy sections carry a 1200px box with 48px gutters (1104 of content); the reworked homepage measures 1200 of content. */
.home-v2 .how-inner,
.home-v2 .security-inner,
.home-v2 .faq-inner {
  max-width: 1296px;
}

/* Shared artwork frames; opaque cards reveal the image only around their edges. */
.home-v2 .services-layout,
.home-v2 .how-example-panes,
.home-v2 .bench-cols,
.home-v2 .run-compare-frame {
  --frame-image: url("assets/home/services-frame.webp");
  background: #dce0dc var(--frame-image) center / cover;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
[data-theme="dark"] .home-v2 .services-layout,
[data-theme="dark"] .home-v2 .how-example-panes,
[data-theme="dark"] .home-v2 .bench-cols,
[data-theme="dark"] .home-v2 .run-compare-frame {
  --frame-image: url("assets/home/services-frame-dark.webp");
  background-color: #1c2b3b;
}
.home-v2 .bench-cols,
.home-v2 .run-compare-frame {
  --frame-image: url("assets/home/benchmark-frame.webp");
}
[data-theme="dark"] .home-v2 .bench-cols,
[data-theme="dark"] .home-v2 .run-compare-frame {
  --frame-image: url("assets/home/benchmark-frame-dark.webp");
}
.home-v2 .services-col,
.home-v2 .bench-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}
[data-theme="dark"] .home-v2 .services-col,
[data-theme="dark"] .home-v2 .bench-col {
  background: var(--surface-raised);
}

/* Hero */
.home-v2 .hero {
  max-width: none;
  min-height: clamp(580px, calc(100svh - 150px), 760px);
  box-sizing: border-box;
  padding: 84px max(48px, calc((100% - 1104px) / 2)) 92px;
  margin-top: 68px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 72px;
  align-items: center;
  text-align: left;
  background: #f2f4f5;
  color: var(--home-hero-title);
  border-bottom: 1px solid var(--home-hero-border);
  overflow: hidden;
}
.home-v2 .hero-bg {
  inset: 0;
  width: 100%;
  transform: none;
  background:
    linear-gradient(
      90deg,
      rgba(232, 240, 248, 0.32),
      rgba(232, 240, 248, 0.08) 70%
    ),
    url("assets/home/hero-glass-light.webp") center / cover no-repeat;
}
[data-theme="dark"] .home-v2 .hero {
  background: #09131f;
}
[data-theme="dark"] .home-v2 .hero-bg {
  background: url("assets/home/hero-glass-dark.webp") right center / auto 100%
    no-repeat;
}
.home-v2 .hero-bg::before,
.home-v2 .hero-bg::after {
  display: none;
}
.home-v2 .hero h1 {
  font-size: clamp(44px, 5.8vw, 72px);
  line-height: 0.96;
  letter-spacing: -0.035em;
  color: var(--home-hero-title);
  margin: 0 0 30px;
}
.home-v2 .hero h1 span {
  color: var(--home-hero-accent);
}
.home-v2 .hero p {
  font-size: 18px;
  line-height: 1.65;
  max-width: 500px;
  margin: 0 0 32px;
  color: var(--home-hero-body);
  text-wrap: pretty;
}
.home-v2 .hero-actions {
  justify-content: flex-start;
  margin: 0;
  flex-wrap: wrap;
  gap: 12px;
}
.home-v2 .hero-actions .btn-primary {
  background: var(--home-hero-primary-bg);
  color: var(--btn-text);
}
.home-v2 .hero-actions .btn-primary:hover {
  background: var(--home-hero-primary-hover);
}
.hero-build {
  position: relative;
  left: auto;
  top: auto;
  width: min(100%, 540px);
  container-type: inline-size;
  z-index: 1;
  justify-self: end;
  --t-flight: 0s;
  --t-impact: 0s;
  --t-exit: 3.8s;
}
.hero-build .slide-deck {
  width: calc(100% - 30px);
  --mock-slide-bg: #fff;
  --mock-border: #e0e0dc;
  --mock-slide-shadow: rgba(0, 0, 0, 0.06);
  --flow-ghost-bg: #f6f7f9;
  --flow-ghost-border: #dfe3e9;
  --flow-sel-line: rgba(58, 124, 195, 0.6);
  --flow-sel-handle: #fff;
  --flow-copy-bar: #dfe3e9;
  --flow-image-bg: #f2f5f8;
  --flow-image-glyph: #b6c2cf;
  --flow-delta: #1f9254;
  --text-primary: #1a2744;
  --text-secondary: #55554f;
  --text-muted: #a0a09a;
  --blue: #3a7cc3;
  --border: #e4e4e0;
  --surface-raised: #fafaf8;
}
.hero-build .ppt-slide {
  box-shadow: var(--home-hero-slide-shadow);
}

/* What we do */
.home-v2 .what-we-do {
  padding: 96px 48px;
  background: var(--bg);
  scroll-margin-top: 70px;
}
.home-v2 .wwd-head .section-title {
  max-width: 42ch;
  margin: 16px 0 0;
}
.home-v2 .wwd-head > p {
  max-width: 62ch;
  margin: 22px 0 0;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.75;
}
/* 1px gaps over a --border ground draw the dividers; each door paints its own background back over it. */
.home-v2 .wwd-doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin-top: 56px;
  background: var(--border);
  border: 1px solid var(--border);
}
.home-v2 .wwd-door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 36px;
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.2s;
}
.home-v2 .wwd-door:hover {
  background: var(--bg-alt);
}
.home-v2 .wwd-door h3 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 500;
  color: var(--text-primary);
  margin: 0 0 12px;
}
.home-v2 .wwd-door-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 32px;
  color: var(--blue);
}
.home-v2 .wwd-door-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.home-v2 .wwd-door p {
  margin: 0 0 26px;
  color: var(--text-body);
  line-height: 1.7;
}
.home-v2 .wwd-door > .btn-text {
  margin-top: auto;
}
/* The tools card carries two routes, so the stack — not a lone link — takes the floor. */
.home-v2 .wwd-door-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: auto;
}

/* Slide comparison and gallery */
.comparison-section {
  padding: 90px 40px 80px;
  background: var(--bg-alt);
  color: var(--home-ink);
  scroll-margin-top: 70px;
}
.comparison-heading {
  max-width: 1200px;
  margin: 0 auto 34px;
}
.comparison-heading h2,
.gallery-section h2 {
  font-family: var(--serif);
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.025em;
  margin: 12px 0 0;
}
.profile-marquee {
  overflow: hidden;
  margin: 44px -40px 0;
  padding: 22px 0 48px;
}
.profile-marquee-track {
  display: flex;
  width: max-content;
  animation: profileMarquee 111s linear infinite;
}
.profile-marquee-track:has(button:hover),
.profile-marquee:focus-within .profile-marquee-track {
  animation-play-state: paused;
}
/* Once the script takes the track over it drives the offset itself, so the CSS loop has to go or the
   two fight each other; the keyframes stay as the no-JS fallback. */
.profile-marquee.is-scrubbable {
  cursor: grab;
}
.profile-marquee.is-scrubbable .profile-marquee-track {
  animation: none;
  transform: translateX(calc(var(--marquee-offset, 0px) * -1));
}
.profile-marquee.is-dragging {
  cursor: grabbing;
}
.profile-marquee.is-dragging button {
  cursor: grabbing;
}
.profile-marquee-set {
  display: flex;
  flex: none;
  gap: 18px;
  padding-right: 18px;
}
.profile-marquee button {
  flex: none;
  width: clamp(260px, 25vw, 360px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.profile-marquee button:hover,
.profile-marquee button:focus-visible {
  position: relative;
  z-index: 1;
  transform: scale(1.025);
}
.profile-marquee img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #fff;
  box-shadow: 0 10px 28px #0002;
}
@keyframes profileMarquee {
  to {
    transform: translateX(-50%);
  }
}
.provider-comparison {
  max-width: 1200px;
  margin: 0 auto;
}
.comparison-lead {
  max-width: 68ch;
  margin: 22px 0 0;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.75;
}
.compare-caption {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 20px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.65;
}
.compare-caption p {
  max-width: 46ch;
  margin: 0;
}
.compare-caption p:last-child {
  max-width: 28ch;
  text-align: right;
}
.compare-caption span {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary);
  font-weight: 500;
}
.compare-companies {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 1200px;
  margin: -14px auto 24px;
}
.compare-companies button {
  padding: 7px 16px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  font: 500 14px/1.2 var(--sans);
  color: var(--text-body);
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    color 0.15s ease,
    background-color 0.15s ease;
}
.compare-companies button:hover {
  color: var(--text-primary);
  border-color: var(--text-muted);
}
.compare-companies button.active {
  border-color: var(--blue);
  background: var(--blue);
  color: #fff;
}
.compare-controls {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.compare-brand {
  display: flex;
  align-items: center;
}
.compare-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 13px;
  color: var(--text-body);
}
.compare-hint svg {
  display: block;
}
.provider-toggle {
  display: flex;
}
.provider-toggle button {
  display: grid;
  place-items: center;
  min-width: 96px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}
.provider-toggle button.active {
  border-color: var(--blue);
}
.provider-toggle .provider-claude-wrap {
  position: relative;
  display: block;
  width: 76px;
  aspect-ratio: 690 / 148;
}
.provider-toggle .provider-claude-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.provider-toggle .provider-claude-glyph {
  display: none;
}
.provider-toggle .provider-chatgpt {
  font:
    600 15px/1 "OpenAI Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  letter-spacing: -0.015em;
  color: #000;
}
[data-theme="dark"] .provider-toggle .provider-chatgpt {
  color: #fff;
}
[data-theme="dark"] .slide-compare {
  --compare-rule: #4a8ed4;
  --compare-stage: url("assets/home/compare-stage-dark.webp");
  --compare-stage-wash: linear-gradient(
    90deg,
    #0a142799,
    #0a14273d 58%,
    #0a142773
  );
  --compare-stage-foil-wash: linear-gradient(90deg, #04091473, #040914a6);
  /* Dark already mutes the artwork; draining its hue on top just reads murky. */
  --compare-foil-desaturate: transparent;
  --compare-frame-shadow: 0 18px 44px #00000059;
}
/* The wordmark ships near-black, so dark mode inverts the lettering and lays the untouched orange glyph
   beside it. The two clips must not overlap: at this size the glyph is mostly antialiased pixels, and
   orange composited over an inverted white copy leaves white fringing on every spike. */
[data-theme="dark"] .provider-toggle .provider-claude-logo {
  clip-path: inset(0 0 0 25%);
  filter: brightness(0) invert(1);
}
[data-theme="dark"] .provider-toggle .provider-claude-glyph {
  display: block;
  clip-path: inset(0 75% 0 0);
}
.slide-compare {
  --split: 55%;
  --compare-rule: #12285b;
  --compare-pad-x: clamp(14px, 16vw, 232px);
  --compare-pad-y: clamp(40px, 3.6vw, 52px);
  --compare-stage: url("assets/home/compare-stage-light.webp");
  --compare-stage-wash: linear-gradient(
    90deg,
    #ffffffb3,
    #ffffffa6 58%,
    #ffffffb3
  );
  --compare-stage-foil-wash: linear-gradient(90deg, #e4e4e0d9, #e4e4e0cc);
  --compare-frame-shadow: 0 18px 40px #1a27442e;
  position: relative;
  overflow: hidden;
  padding: var(--compare-pad-y) var(--compare-pad-x);
  /* The wash keeps the artwork from competing with the slide sitting on top of it. */
  background:
    var(--compare-stage-wash),
    var(--compare-stage) center / cover no-repeat;
  /* Inset ring, not a border: overflow clips children to the padding box, so a real border would
     cut the divider a pixel short of the card's edge. */
  box-shadow: inset 0 0 0 1px var(--border);
  border-radius: 16px;
}
.slide-compare-frame {
  aspect-ratio: 16 / 9;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--compare-frame-shadow);
}
.slide-compare-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* Padding repeated, not inherited: percentage padding on an absolute child would resolve against the parent's padding box. */
/* Its own wash over the same artwork: the stage shifts tone as the split moves, which is what tells
   you the thing is draggable. inset:0 matches the parent's padding box, so the artwork stays continuous.
   The flat grey layer blends in `saturation` mode, draining the artwork's blue on the assistant half only —
   brand colour stays on editide's side, and the hue break lands exactly on the divider. */
.slide-compare-foil {
  position: absolute;
  inset: 0;
  padding: var(--compare-pad-y) var(--compare-pad-x);
  clip-path: inset(0 0 0 var(--split));
  background:
    var(--compare-stage-foil-wash),
    linear-gradient(
      var(--compare-foil-desaturate, #8a8a86),
      var(--compare-foil-desaturate, #8a8a86)
    ),
    var(--compare-stage) center / cover no-repeat;
  background-blend-mode: normal, saturation, normal;
}
/* Full-bleed transparent range: pointer drag, click-to-jump, and keyboard all come free. */
.slide-compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: ew-resize;
}
.slide-compare-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1px;
  height: 100%;
  background: transparent;
}
.slide-compare-range::-moz-range-thumb {
  width: 1px;
  height: 100%;
  border: 0;
  background: transparent;
}
.slide-compare-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--split);
  width: 3px;
  translate: -1px 0;
  background: var(--compare-rule);
  pointer-events: none;
}
.slide-compare-handle {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  border: 2px solid #fff;
  background: var(--compare-rule);
  color: #fff;
  box-shadow: 0 6px 20px #00000040;
}
.slide-compare-range:focus-visible
  ~ .slide-compare-divider
  .slide-compare-handle {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
/* Which half is whose only reads if the label sits on the slide. Each badge is clipped to its own
   side, so it disappears at the same moment its slide does. */
.compare-badge-clip {
  position: absolute;
  inset: 0;
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
  pointer-events: none;
}
.compare-badge {
  position: absolute;
  top: clamp(11px, 1.2vw, 16px);
  padding: 5px 12px;
  border-radius: 999px;
  background: #ffffffeb;
  box-shadow: 0 2px 10px #00000024;
  color: #12285b;
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
}
.compare-badge-base {
  left: clamp(11px, 1.2vw, 18px);
}
.compare-badge-foil {
  right: clamp(11px, 1.2vw, 18px);
  color: #55554f;
}
.provider-editide-logo {
  width: 84px;
  height: auto;
}
.gallery-section {
  padding: 90px 40px 90px;
  background: var(--bg);
  color: var(--home-ink);
  scroll-margin-top: 70px;
}
.gallery-section .comparison-heading {
  text-align: center;
}
.compare-footnote {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
}
.image-expand {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--text-body);
  font: 13px var(--sans);
  cursor: zoom-in;
  opacity: 0.7;
  transition:
    opacity 0.18s ease,
    color 0.18s ease;
}
.image-expand svg {
  display: block;
}
.image-expand:hover,
.image-expand:focus-visible {
  opacity: 1;
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.slide-dialog {
  width: min(1500px, 94vw);
  max-width: 94vw;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
  background: transparent;
  margin: auto;
  max-height: 94vh;
}
.slide-dialog::backdrop {
  background: #071219e6;
  backdrop-filter: blur(3px);
}
.slide-dialog form {
  position: absolute;
  top: 0;
  right: 0;
}
.slide-dialog button {
  background: #0b1626b3;
  color: #fff;
  border: 0;
  padding: 8px 12px;
  cursor: pointer;
  font: 12px var(--sans);
  border-bottom-left-radius: 10px;
}
.slide-dialog button:hover,
.slide-dialog button:focus-visible {
  background: #0b1626;
}
.slide-dialog img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 94vh;
  object-fit: contain;
}

/* Offerings */
.home-v2 .home-offerings {
  border-block: 1px solid var(--border);
}
/* Three labels on a shared hairline, the active one underlined — no fill, no box. */
.home-v2 .offer-tabs {
  display: flex;
  gap: 40px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 56px;
}
.home-v2 .offer-tab {
  position: relative;
  border: 0;
  background: none;
  padding: 0 0 16px;
  cursor: pointer;
  font: 500 15px/1.2 var(--sans);
  letter-spacing: 0.01em;
  color: var(--text-secondary);
  transition: color 0.2s;
}
.home-v2 .offer-tab::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  height: 2px;
  background: var(--blue);
  opacity: 0;
  transition: opacity 0.2s;
}
.home-v2 .offer-tab:hover,
.home-v2 .offer-tab.active {
  color: var(--text-primary);
}
.home-v2 .offer-tab.active::after {
  opacity: 1;
}
.home-v2 .offer-panel {
  display: none;
}
.home-v2 .offer-panel.active {
  display: block;
}
.home-v2 .home-offerings .how-inner {
  text-align: left;
}
/* Tool-call directory and stacked samples. */
.home-v2 .how-examples {
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 64px;
  max-width: none;
}
.home-v2 .how-example-list {
  gap: 0;
}
.home-v2 .how-example-item {
  position: relative;
  border-inline-start: none;
  padding-inline-start: 0;
  border-top: 1px solid var(--border);
  padding-bottom: 28px;
}
.home-v2 .how-example-item:last-child {
  border-bottom: 1px solid var(--border);
}
.home-v2 .how-example-item::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 2px;
  background: var(--text-primary);
  opacity: 0;
  transition: opacity 0.2s;
}
.home-v2 .how-example-item.active::before {
  opacity: 1;
}
/* Tight above the name, tighter still between name and note, generous below — the row reads as one
   block hanging off its rule rather than an evenly padded box. */
.home-v2 .how-example-btn,
.home-v2 .how-example-item:first-child .how-example-btn {
  padding: 20px 0 12px;
}
.home-v2 .how-example-name {
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
}
.home-v2 .how-example-item.active .how-example-note {
  padding-bottom: 12px;
}
.home-v2 .how-example-note p {
  max-width: 46ch;
}
.home-v2 #panel-how-it-works .how-outro {
  margin-top: 32px;
}

.home-v2 .how-example-panes {
  min-width: 0;
  padding: 28px 20px;
}
.home-v2 .how-example-pane,
.home-v2 .how-example-pane .code-block {
  min-width: 0;
}
[data-theme="light"] .home-v2 .how-example-pane .code-block {
  background: var(--surface);
}
.home-v2 .services-layout {
  --svc-slab: var(--navy);
  --svc-slab-text: #fff;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin-top: 48px;
  padding: 36px 24px;
}
[data-theme="dark"] .home-v2 .services-layout {
  --svc-slab: #24344f;
  --svc-slab-text: var(--text-primary);
}
/* One subtitle treatment for all three panel heads; the title above already carries the 20px gap. */
.home-v2 .offer-sub {
  max-width: 58ch;
  margin: 0;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.75;
  text-wrap: balance;
}
/* The head follows its panel's axis: the add-in panel is a centered video composition, the other two are left-flush. */
.home-v2 .how-head-center {
  text-align: center;
}
.home-v2 .how-head-center .offer-sub {
  margin-inline: auto;
}
.home-v2 .services-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.home-v2 .services-col-title {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.012em;
  color: var(--text-primary);
  margin: 12px 0 0;
}
.home-v2 .services-col > p {
  margin: 12px 0 0;
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.65;
}
.home-v2 .services-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 0;
  margin: 28px 0 0;
}
.home-v2 .services-steps li {
  position: relative;
  display: grid;
  grid-template-columns: 29px 1fr;
  gap: 16px;
  align-items: start;
}
/* The path has to stop at the last numeral, so each rule spans one gap rather than running behind the list. */
.home-v2 .services-steps li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 14px;
  top: 29px;
  bottom: -28px;
  width: 1px;
  background: var(--border);
}
[data-theme="dark"] .home-v2 .services-steps li:not(:last-child)::before {
  background: var(--border-light);
}
.home-v2 .services-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  border-radius: 999px;
  /* Composite the tint over solid bg so the connecting rule stays behind the numeral (--blue-pale is translucent in dark). */
  background: linear-gradient(var(--blue-pale), var(--blue-pale)), var(--bg);
  color: var(--blue);
  font: 600 15px/1 var(--sans);
}
/* The 12%-alpha --blue-pale all but disappears on the dark panel, so the disc gets an opaque tint. */
[data-theme="dark"] .home-v2 .services-number {
  background: #1c2f4a;
  color: var(--blue-bright);
}
.home-v2 .services-steps h4 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-primary);
  margin: 4px 0 0;
}
.home-v2 .services-steps p {
  margin: 6px 0 0;
  color: var(--text-secondary);
  font-size: 16px;
  line-height: 1.6;
}
/* The table rounds through a wrapper: overflow on the table itself does not clip its own corners. */
.home-v2 .services-table-wrap {
  margin: 28px 0 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.home-v2 .services-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.home-v2 .services-table th {
  padding: 12px 16px;
  text-align: left;
  background: var(--svc-slab);
  color: var(--svc-slab-text);
  font: 600 12px/1 var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.home-v2 .services-table td {
  padding: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-body);
  font-size: 16px;
  line-height: 1.5;
  vertical-align: top;
}
.home-v2 .services-table th:first-child,
.home-v2 .services-table td:first-child {
  width: 200px;
}
.home-v2 .services-table td:first-child {
  font-weight: 500;
  color: var(--text-primary);
}
.home-v2 .services-table tbody tr:nth-child(even) {
  background: var(--bg-alt);
}
/* Both CTAs sit on the column floor, so the shorter side does not leave its button stranded mid-panel. */
.home-v2 .services-col > .btn-text {
  margin-top: auto;
  padding-top: 36px;
  align-self: flex-start;
}
/* The demo webms carry alpha, so the artwork goes behind the video itself — a wrapper would only
   frame the frame. The wash keeps the PowerPoint chrome inside the video legible over the texture. */
.home-v2 #panel-add-in .demo-carousel-viewport video {
  --addin-stage: url("assets/home/addin-stage-light.webp");
  --addin-stage-wash: linear-gradient(
    180deg,
    #ffffffd9,
    #ffffffbf 50%,
    #ffffffd9
  );
  background:
    var(--addin-stage-wash),
    var(--addin-stage) center / cover no-repeat;
  box-shadow: 0 18px 44px -12px #0000004d;
}
[data-theme="dark"] .home-v2 #panel-add-in .demo-carousel-viewport video {
  --addin-stage: url("assets/home/addin-stage-dark.webp");
  --addin-stage-wash: linear-gradient(
    180deg,
    #0a1427e6,
    #0a1427cc 50%,
    #0a1427e6
  );
}

/* Benchmark */
.home-v2 .home-benchmark {
  padding: 96px 48px;
  background: var(--bg-alt);
}
.home-v2 .vs-head .section-title {
  margin: 16px 0 0;
}
.home-v2 .vs-head > p {
  max-width: 60ch;
  margin: 20px 0 0;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.75;
}
.home-v2 .run-compare {
  margin: 40px 0 0;
}
.home-v2 .run-compare-frame {
  padding: 36px 24px;
  box-shadow: none;
}
.home-v2 .run-compare-grid {
  gap: 16px;
  background: transparent;
}
.home-v2 .run-pane {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.home-v2 .run-transport {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
[data-theme="dark"] .home-v2 .run-pane,
[data-theme="dark"] .home-v2 .run-transport {
  background: var(--surface-raised);
}
.home-v2 .vs-footer {
  margin-top: 20px;
}
/* The charts are the second beat of the same answer, not a second section — a rule separates them. */
.home-v2 .bench-panel {
  margin-top: 88px;
  padding-top: 88px;
  border-top: 1px solid var(--border);
}
.home-v2 .bench-head .section-title {
  max-width: 54ch;
  margin: 16px 0 0;
}
.home-v2 .bench-head > p {
  max-width: 65ch;
  margin: 20px 0 0;
  color: var(--text-body);
  font-size: 17px;
  line-height: 1.75;
}
.home-v2 .bench-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 56px;
  padding: 36px 24px;
}
.home-v2 .bench-col {
  container-type: inline-size;
}
.home-v2 .bench-footer {
  margin-top: 24px;
}
.home-v2 .benchmark-method {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 44px 0 0;
}

.home-v2 .bench-deltas {
  margin-top: 20px;
}
.home-v2 .bench-delta-value {
  text-align: center;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}

.home-v2 .bench-logo-claude {
  width: 54px;
  height: auto;
}
.home-v2 .bench-logo-wrap {
  position: relative;
  display: block;
  max-width: 100%;
}
.home-v2 .bench-logo-claude-glyph {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The Claude wordmark ships black, so dark mode inverts the lettering and lays the untouched glyph beside it.
   The two clips must not overlap: at this size the glyph is mostly antialiased pixels, and orange composited
   over an inverted white copy leaves white fringing on every spike. */
[data-theme="dark"] .home-v2 .bench-logo-claude {
  clip-path: inset(0 0 0 25%);
  filter: brightness(0) invert(1);
}
[data-theme="dark"] .home-v2 .bench-logo-claude-glyph {
  display: block;
  clip-path: inset(0 75% 0 0);
}
.home-v2 .bench-logo-chatgpt {
  font:
    600 clamp(9px, 2.75cqw, 14px)/1 "OpenAI Sans",
    var(--sans);
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

/* Bars and keys are separate grids so one axis rule can run under all four columns. The middle track
   is a fixed gutter splitting the two model pairs; the third bar is placed past it explicitly. */
.home-v2 .bench-chart {
  margin-top: 28px;
}
.home-v2 .bench-plots,
.home-v2 .bench-keys,
.home-v2 .bench-deltas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) 26px repeat(
      2,
      minmax(0, 1fr)
    );
  gap: 22px;
}
.home-v2 .bench-plot.is-group-start,
.home-v2 .bench-key.is-group-start {
  grid-column: 4;
}
.home-v2 .bench-delta-value.is-group-start {
  grid-column: 4;
}
.home-v2 .bench-plots {
  position: relative;
}
.home-v2 .bench-plots::after {
  content: "";
  position: absolute;
  left: -20px;
  right: -20px;
  bottom: 0;
  height: 1px;
  background: var(--bench-axis);
}
.home-v2 .bench-plot {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  height: 170px;
}
.home-v2 .bench-plot strong {
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.home-v2 .bench-plot i {
  height: var(--h);
  background: var(--bench-bar-alt);
}
.home-v2 .bench-plot.is-editide i {
  background: var(--bench-bar);
}
.home-v2 .bench-keys {
  padding-top: 16px;
}
.home-v2 .bench-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  text-align: center;
}
.home-v2 .bench-key .bench-logo-claude {
  width: clamp(30px, 9.8cqw, 50px);
}
.home-v2 .bench-key.is-code .bench-logo-claude {
  width: clamp(38px, 12.9cqw, 66px);
}
.home-v2 .bench-key.is-code .bench-logo-chatgpt {
  font-size: clamp(11px, 3.33cqw, 17px);
}
.home-v2 .bench-key-mode.is-editide {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--text-muted);
}
.home-v2 .bench-logo-editide {
  width: clamp(28px, 9cqw, 46px);
  height: auto;
}

/* Responsive */
@media (max-width: 1000px) {
  .home-v2 .hero {
    min-height: 560px;
    gap: 36px;
    padding: 68px 48px 76px;
  }
}
@media (max-width: 900px) {
  .home-v2 .wwd-doors {
    grid-template-columns: 1fr;
  }
  .home-v2 .bench-cols {
    grid-template-columns: 1fr;
    margin-top: 40px;
  }
  .home-v2 .how-examples {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}
@media (max-width: 700px) {
  .home-v2 .hero {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 64px 24px 72px;
    background: #f2f4f5;
  }
  .home-v2 .hero-bg {
    background:
      linear-gradient(
        180deg,
        rgba(232, 240, 248, 0.32),
        rgba(232, 240, 248, 0.08) 70%
      ),
      url("assets/home/hero-glass-mobile-light.webp") center bottom / cover
        no-repeat;
  }
  [data-theme="dark"] .home-v2 .hero {
    background: #09131f;
  }
  [data-theme="dark"] .home-v2 .hero-bg {
    background:
      linear-gradient(
        180deg,
        #09131f 0%,
        rgba(9, 19, 31, 0.96) 30%,
        rgba(9, 19, 31, 0.16) 68%
      ),
      url("assets/home/hero-glass-mobile-dark.webp") center bottom / cover
        no-repeat;
  }
  .home-v2 .hero h1 {
    /* The hard break after "work," only holds if the line fits; scale with the viewport on narrow phones. */
    font-size: min(46px, 12vw);
  }
  .hero-build {
    width: min(calc(100% - 24px), 430px);
    margin: 36px 12px 0;
    justify-self: start;
  }
  .comparison-section {
    padding: 55px 24px 45px;
  }
  .comparison-heading {
    margin-bottom: 28px;
  }
  .profile-marquee {
    margin-inline: -24px;
  }
  .profile-marquee button {
    width: 240px;
  }
  .gallery-section {
    padding: 55px 24px 50px;
  }
  .provider-comparison {
    margin-top: 0;
  }
  .comparison-lead {
    font-size: 16px;
  }
  .compare-caption {
    flex-direction: column;
    gap: 16px;
    margin-top: 18px;
  }
  .compare-caption p,
  .compare-caption p:last-child {
    max-width: none;
    text-align: left;
  }
  .compare-companies {
    gap: 6px;
    margin-bottom: 20px;
  }
  .compare-companies button {
    padding: 6px 12px;
    font-size: 13px;
  }
  .provider-toggle button {
    min-width: 72px;
    padding-inline: 10px;
  }
  .provider-toggle .provider-claude-wrap {
    width: 62px;
  }
  .provider-toggle .provider-chatgpt {
    font-size: 13px;
  }
  /* The slide fills the card at this width, so the stage artwork would only be fetched, never seen. */
  .slide-compare {
    --compare-pad-x: 14px;
    --compare-pad-y: 38px;
    border-radius: 12px;
    background: var(--bg);
  }
  .slide-compare-foil {
    background: none;
  }
  .slide-compare-handle {
    width: 40px;
    height: 40px;
  }
  .compare-footnote {
    flex-direction: column;
    gap: 10px;
  }
  .image-expand {
    position: static;
  }
  .provider-editide-logo {
    width: 62px;
  }
  .home-v2 .offer-tabs {
    gap: 22px;
    margin-bottom: 40px;
  }
  .home-v2 .offer-tab {
    font-size: 13px;
    padding-bottom: 12px;
  }
  .home-v2 .how-example-name {
    font-size: 18px;
  }
}
@media (max-width: 600px) {
  .home-v2 .home-benchmark {
    padding: 64px 24px;
  }
  .home-v2 .run-compare-frame {
    padding: 20px 12px;
  }
  .home-v2 .run-compare-grid {
    gap: 12px;
  }
  .home-v2 .run-transport {
    margin-top: 12px;
  }
  .home-v2 .bench-cols {
    padding: 20px 12px;
    gap: 12px;
  }
  .home-v2 .bench-col {
    padding: 24px 18px;
  }
  .home-v2 .bench-plots,
  .home-v2 .bench-keys,
  .home-v2 .bench-deltas {
    grid-template-columns: repeat(2, minmax(0, 1fr)) 8px repeat(
        2,
        minmax(0, 1fr)
      );
    gap: 8px;
  }
  .home-v2 .bench-plots::after {
    left: -10px;
    right: -10px;
  }
  .home-v2 .bench-plot {
    height: 150px;
  }
  .home-v2 .bench-delta-value {
    font-size: 32px;
  }
  .home-v2 .bench-key-mode {
    font-size: 12px;
  }
  .home-v2 .services-layout {
    padding: 20px 12px;
    gap: 12px;
  }
  .home-v2 .how-example-panes {
    padding: 20px 12px;
  }
  .home-v2 .services-col {
    padding: 24px 18px;
  }
  .home-v2 .services-table th:first-child,
  .home-v2 .services-table td:first-child {
    width: 40%;
  }
  .home-v2 .what-we-do {
    padding: 64px 24px;
  }
  .home-v2 .wwd-door {
    padding: 28px 24px;
  }
}