/* Gript -- Home */

/* --- HERO WITH ROTATING TEXT --- */
.hero {
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(96px,12vw,140px) clamp(20px,5.6vw,48px) clamp(100px,11vw,120px);
  text-align: center;
  position: relative;
}
/* Brand wordmark + category label + statement */
.hero-head { display: flex; flex-direction: column; align-items: center; max-width: 760px; }
.hero-brand {
  font-family: var(--font); font-weight: 700;
  font-size: clamp(46px, 7vw, 84px); letter-spacing: -3px; line-height: 0.95;
}
.hero-brand .hero-dot { color: var(--green); }
.hero-cat {
  font-family: var(--font); font-weight: 500;
  font-size: clamp(13px, 1.5vw, 17px); color: var(--ink-2);
  letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px;
}
.hero-statement {
  font-family: var(--font); font-weight: 600;
  font-size: clamp(20px, 2.9vw, 33px); color: var(--ink);
  letter-spacing: -1px; line-height: 1.16; margin-top: 20px; max-width: 640px;
}
.hero-statement .hero-accent { color: var(--green); }
.hero-head .hero-actions { margin-top: 28px; }

/* Outer wrapper: owns the fluid height + horizontal overflow clip.
   --hstack-scale is set precisely by JS (see home-body.html) for true fluid
   scaling; the media-query values below are pre-JS / no-JS fallbacks so there
   is no overflow flash before the script runs. Inline style from JS wins. */
.hero-stack-outer {
  --hstack-scale: 1;
  /* Full-bleed: break out of the hero's horizontal padding so the fan spans the
     true viewport width. The JS scales the fan to window width, so the wrapper
     must be that wide too — otherwise the fan (and its shadows) get clipped at
     the padding edge, which is the "cut-off shadow" look. */
  width: 100vw;
  /* Visual height of the scaled stack = design height (460) × scale */
  height: calc(460px * var(--hstack-scale));
  /* Clip horizontally only — stops the wide fan from causing page scroll while
     letting the rotated cards' top corners show (vertical clip cut them off). */
  overflow-x: clip;
  overflow-y: visible;
  margin: clamp(40px, 5vw, 64px) calc(50% - 50vw) 0;
  display: flex;
  justify-content: center;
}
/* Fallback scale steps (JS overrides with the exact value) */
@media (max-width: 1040px) { .hero-stack-outer { --hstack-scale: 0.82; } }
@media (max-width: 840px)  { .hero-stack-outer { --hstack-scale: 0.66; } }
@media (max-width: 680px)  { .hero-stack-outer { --hstack-scale: 0.52; } }
@media (max-width: 520px)  { .hero-stack-outer { --hstack-scale: 0.40; } }
@media (max-width: 400px)  { .hero-stack-outer { --hstack-scale: 0.34; } }

/* Product card stack — cascading hand */
/* Stays at its natural 1040×460px design size; outer scales (via the inherited
   --hstack-scale, a valid unitless number) and clips it. */
.hero-stack {
  position: relative;
  flex-shrink: 0;
  width: 1040px; height: 460px;
  transform: scale(var(--hstack-scale, 1));
  transform-origin: top center;
}
.hcard {
  position: absolute; left: 50%; margin-left: -300px;
  width: 600px; height: 374px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(17, 17, 17, 0.45);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.hcard img { display: block; width: 100%; }
.hcard-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.hcard-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.hcard-lbl {
  margin-left: 8px; font-family: var(--font); font-size: 11px; font-weight: 600;
  color: var(--ink-2); display: flex; align-items: center; gap: 6px;
}
.hcard-dot { width: 7px; height: 7px; border-radius: 50%; }
.hcard-dot--table { background: var(--blue); }
.hcard-dot--dashboard { background: var(--green); }
.hcard-dot--notes { background: var(--amber); }
.hcard-dot--kanban { background: var(--purple); }
.hcard-dot--diagram { background: var(--rose); }
.hcard-dot--files { background: var(--cyan); }
/* Resting: front card (Table) fully visible; the other five fan up-left revealing
   their content-rich left edge + label. (hc6 = backmost … hc1 = front) */
.hc6 { top: 0;   transform: translateX(-255px) rotate(-8deg);  z-index: 1; }
.hc5 { top: 7px; transform: translateX(-180px) rotate(-6deg);  z-index: 2; }
.hc4 { top: 18px; transform: translateX(-105px) rotate(-4.5deg); z-index: 3; }
.hc3 { top: 31px; transform: translateX(-25px) rotate(-3deg);  z-index: 4; }
.hc2 { top: 45px; transform: translateX(80px)  rotate(-1deg);  z-index: 5; }
.hc1 { top: 62px; transform: translateX(200px) rotate(2deg);   z-index: 6; }

/* Hover: spread out so more of each surface shows */
.hero-stack:hover .hc6 { top: 0;   transform: translateX(-560px) rotate(-5deg); }
.hero-stack:hover .hc5 { top: 4px; transform: translateX(-360px) rotate(-3.5deg); }
.hero-stack:hover .hc4 { top: 9px; transform: translateX(-180px) rotate(-2deg); }
.hero-stack:hover .hc3 { top: 12px; transform: translateX(0) rotate(0deg); }
.hero-stack:hover .hc2 { top: 9px; transform: translateX(190px) rotate(2deg); }
.hero-stack:hover .hc1 { top: 0;   transform: translateX(390px) rotate(4.5deg); }
.hero-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-note { font-size: 18px; font-weight: 600; color: var(--ink-2); margin-top: 28px; }
.hero-note-cc { color: var(--green); font-weight: 700; font-size: 1.05em; }

/* EU trust badge row */
.hero-trust {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}
.htrust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.htrust-item svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.htrust-sep { color: var(--line); font-size: 14px; line-height: 1; }

/* Scroll indicator */
.scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 2px;
  text-transform: uppercase;
  font-family: var(--font);
  transition: opacity 0.4s;
}
.scroll-line {
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, var(--ink-3), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%, 100% { transform: scaleY(1); opacity: 1; }
  50% { transform: scaleY(0.6); opacity: 0.4; }
}

/* --- CONTEXT STRIP --- */
.context-strip {
  padding: clamp(40px,5.6vw,80px) clamp(20px,5.6vw,48px);
  text-align: center;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.context-strip h2 {
  font-family: var(--font);
  font-size: clamp(22px, 3.5vw, 40px);
  font-weight: 700;
  letter-spacing: -1.5px;
  line-height: 1.2;
  max-width: 600px;
  margin: 0 auto 16px;
}
.context-strip p {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--ink-2);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- WORLD CARDS --- */
.worlds-section {
  padding: clamp(60px,7vw,100px) 0 clamp(60px,7vw,100px) clamp(20px,5.6vw,48px);
}
.worlds-header {
  margin-bottom: 48px;
  padding-right: clamp(20px,5.6vw,48px);
}
.worlds-header h2 {
  font-family: var(--font);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  letter-spacing: -1.5px;
  margin-bottom: 8px;
}
.worlds-header p { font-size: clamp(14px, 1.2vw, 16px); color: var(--ink-2); }
.worlds-scroll {
  display: flex;
  gap: clamp(12px,1.5vw,20px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
  padding-right: clamp(20px,5.6vw,48px);
}
.worlds-scroll::-webkit-scrollbar { height: 4px; }
.worlds-scroll::-webkit-scrollbar-track { background: transparent; }
.worlds-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 2px; }
.world-card {
  min-width: clamp(240px,40vw,300px);
  max-width: clamp(240px,40vw,300px);
  scroll-snap-align: start;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  transition: box-shadow 0.2s, transform 0.2s;
}
.world-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,0.06); transform: translateY(-2px); }
.world-card-color { height: 6px; }
.world-card-body { padding: 28px 24px; }
.world-card-emoji { font-size: 28px; margin-bottom: 14px; line-height: 1; }
.world-card h3 { font-family: var(--font); font-size: 18px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.5px; }
.world-card .world-who { font-size: 13px; color: var(--ink-3); margin-bottom: 12px; font-weight: 500; }
.world-card p { font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.world-card .world-features { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.wf-tag { padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; background: #f5f5f5; color: var(--ink-2); }

/* --- APP PREVIEW --- */
.preview-section { padding: 0 clamp(20px,5.6vw,48px) clamp(60px,7vw,100px); }
.preview-header { text-align: center; margin-bottom: 32px; }
.preview-header h2 { font-family: var(--font); font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -1.5px; margin-bottom: 8px; }
.preview-header p { font-size: clamp(14px,1.2vw,16px); color: var(--ink-2); }
.preview-frame {
  max-width: 920px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 32px 80px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.03);
  overflow: hidden;
}
.pf-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.pf-dot { width: 9px; height: 9px; border-radius: 50%; }
.pf-dot:nth-child(1) { background: #ff5f57; }
.pf-dot:nth-child(2) { background: #febc2e; }
.pf-dot:nth-child(3) { background: #28c840; }
.pf-url { flex: 1; margin-left: 10px; padding: 4px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font-size: 11px; color: var(--ink-3); font-family: monospace; }
.pf-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; border-bottom: 1px solid var(--line); padding: 14px 16px; }
.pf-tab { padding: 7px 14px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; border: 1px solid var(--line); background: var(--surface); border-radius: 999px; transition: all 0.15s var(--ease); font-family: var(--font); letter-spacing: -0.2px; }
.pf-tab:hover { color: var(--ink); border-color: var(--ink-3); }
.pf-tab.active { color: var(--surface); background: var(--ink); border-color: var(--ink); }
.pf-body { padding: 0; }
.pf-view { display: none; }
.pf-view.active { display: block; }
.pf-view img { display: block; width: 100%; height: auto; }

/* Mini table */
.mt { width: 100%; border-collapse: collapse; font-size: 12px; }
.mt th { text-align: left; padding: 7px 10px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; }
.mt td { padding: 9px 10px; border-bottom: 1px solid #f0f0f0; }
.mp { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 10px; font-weight: 600; }
.mp-d { background: #dcfce7; color: #059669; }
.mp-w { background: #dbeafe; color: #2563eb; }
.mp-r { background: #fef9c3; color: #ca8a04; }
.mp-t { background: #f1f5f9; color: #94a3b8; }
.mp-p { background: #fce7f3; color: #db2777; }

/* Mini kanban */
.mk { display: flex; gap: 10px; }
.mk-c { flex: 1; min-width: 170px; background: var(--bg); border-radius: 6px; padding: 8px; }
.mk-h { font-size: 11px; font-weight: 600; color: var(--ink-3); padding: 4px 6px 8px; display: flex; align-items: center; gap: 6px; }
.mk-dot { width: 7px; height: 7px; border-radius: 50%; }
.mk-card { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 8px; margin-bottom: 5px; font-size: 11px; }

/* Mini timeline */
.mtl { position: relative; padding: 10px 0; }
.mtl-header { display: flex; padding: 0 90px; margin-bottom: 8px; }
.mtl-month { flex: 1; font-size: 10px; text-align: center; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.mtl-row { display: flex; align-items: center; margin-bottom: 6px; }
.mtl-label { width: 90px; font-size: 11px; font-weight: 500; flex-shrink: 0; }
.mtl-track { flex: 1; height: 22px; position: relative; }
.mtl-bar { position: absolute; height: 18px; border-radius: 4px; top: 2px; font-size: 9px; color: white; font-weight: 600; display: flex; align-items: center; padding: 0 8px; }

/* --- FEATURES --- */
.features-section {
  padding: clamp(60px,7vw,100px) clamp(20px,5.6vw,48px);
  border-top: 1px solid var(--line);
}
.features-header { margin-bottom: clamp(32px,5vw,64px); }
.features-header h2 { font-family: var(--font); font-size: clamp(24px, 3vw, 36px); font-weight: 700; letter-spacing: -1.5px; margin-bottom: 8px; }
.features-header p { font-size: clamp(14px,1.2vw,16px); color: var(--ink-2); }
.feat-rows { max-width: 800px; }
.feat-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: clamp(8px,3vw,40px);
  padding: clamp(16px,2vw,28px) 0;
  border-bottom: 1px solid var(--line);
}
.feat-row:last-child { border-bottom: none; }
.feat-word {
  font-family: var(--font);
  font-size: clamp(20px, 2.5vw, 32px);
  font-weight: 700;
  letter-spacing: -1px;
  width: clamp(120px, 16vw, 200px);
  flex-shrink: 0;
}
.feat-explain {
  font-size: clamp(13px,1.1vw,15px);
  color: var(--ink-2);
  line-height: 1.65;
  flex: 1;
  min-width: min(200px,100%);
}

/* --- SOCIAL PROOF --- */
.proof-section {
  padding: clamp(40px,5.6vw,80px) clamp(20px,5.6vw,48px);
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.proof-section h2 { font-family: var(--font); font-size: clamp(20px, 2.5vw, 28px); font-weight: 700; letter-spacing: -1px; margin-bottom: clamp(24px,3vw,40px); }
.proof-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px,1vw,10px); max-width: 700px; margin: 0 auto; }
.proof-tag { padding: 8px 18px; border-radius: 100px; font-size: 13px; font-weight: 500; color: var(--ink-2); border: 1px solid var(--line); transition: all 0.15s; }
.proof-tag:hover { border-color: var(--ink); color: var(--ink); }

/* --- TESTIMONIALS --- */
.testimonials-section {
  padding: clamp(60px,7vw,100px) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.testimonials-header {
  text-align: center;
  padding: 0 clamp(20px,5.6vw,48px);
  margin-bottom: clamp(32px,4vw,52px);
}
.testimonials-header h2 {
  font-family: var(--font);
  font-size: clamp(24px,3vw,36px);
  font-weight: 700;
  letter-spacing: -1.5px;
}
.testimonials-outer {
  position: relative;
}
.testimonials-outer::before,
.testimonials-outer::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.testimonials-outer::before { left: 0;  background: linear-gradient(to right, var(--bg), transparent); }
.testimonials-outer::after  { right: 0; background: linear-gradient(to left,  var(--bg), transparent); }
.testimonials-track {
  display: flex;
  gap: 20px;
  width: max-content;
  padding: 10px 0 14px;
  animation: scrollTestimonials 55s linear infinite;
}
.testimonials-track:hover { animation-play-state: paused; }
@keyframes scrollTestimonials {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .testimonials-track { animation: none; overflow-x: auto; }
}
.tcard {
  width: 340px;
  flex-shrink: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tcard-stars {
  display: flex;
  align-items: center;
  gap: 3px;
}
.star {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: block;
}
.star-half-wrap {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-flex;
  flex-shrink: 0;
}
.star-half-wrap .star     { position: absolute; inset: 0; }
.star-half-wrap .star-fg  { clip-path: inset(0 50% 0 0); }
.tcard-quote {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.7;
  flex: 1;
}
.tcard-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tcard-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--line);
}
.tcard-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tcard-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-family: var(--font);
  letter-spacing: -0.3px;
}
.tcard-role { font-size: 12px; color: var(--ink-3); }

/* --- FINAL CTA --- */
/* Dark at every width so the closing CTA flows straight into the dark footer,
   matching the vs / features pages (was mobile-only, desktop was a light seam). */
.final-section {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(40px,5.6vw,80px) clamp(20px,5.6vw,48px);
  text-align: center;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.final-section h2 { font-family: var(--font); font-size: clamp(28px, 4.5vw, 52px); font-weight: 700; letter-spacing: -2px; line-height: 1.1; margin-bottom: 16px; color: var(--bg); }
.final-section p { font-size: clamp(14px,1.2vw,16px); color: var(--ink-3); margin-bottom: 32px; }
/* Closing CTA is a .btn-dark (ink on light); flip it to read on ink. */
.final-section .btn-dark { background: var(--bg); color: var(--ink); }
.final-section .btn-dark:hover { background: var(--line); }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .hero { min-height: auto; padding-top: 88px; }
  .hero-stack-outer { margin-bottom: 20px; }
  .scroll-hint { display: none; }
  .pf-body { padding: 0; }
  .hero-actions { flex-direction: column; width: 100%; max-width: 300px; }
  .btn-dark, .btn-ghost { width: 100%; text-align: center; padding: 12px 24px; }

  /* ── Dark rhythm break ─────────────────────────────────────────────────
     On a phone the whole page is one long single-column scroll of --bg. The
     context line under the hero is inverted here to give the scroll a
     punctuation mark. Mobile-only deliberately: desktop has enough horizontal
     variety that it does not need it. (The closing .final-section is now dark
     at every width, styled in the base rules above.) */
  .context-strip {
    background: var(--ink);
    border-top-color: rgba(255, 255, 255, 0.1);
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  .context-strip h2 { color: var(--bg); }
  .context-strip p { color: var(--ink-3); }

  .pf-tabs { padding: 12px; gap: 6px; }
  .pf-tab { white-space: nowrap; font-size: 11px; padding: 6px 12px; }
  .mt th, .mt td { padding: 6px; font-size: 10px; }
  .mt th:nth-child(n+4), .mt td:nth-child(n+4) { display: none; }
  .mk { flex-wrap: wrap; }
  .mk-c { min-width: 140px; }
  .mtl-header { padding: 0 60px; }
  .mtl-label { width: 60px; font-size: 10px; }
}

/* ═══ SAME TOOL, DIFFERENT WORLDS — gallery (namespaced wld-) ═══ */
:root{
  --wld-stage-1:#eef0f3; --wld-stage-2:#e6e8ee;
  --wld-sh-card:0 2px 4px rgba(0,0,0,0.04), 0 12px 28px rgba(17,17,17,0.07);
  --wld-sh-card-hover:0 6px 14px rgba(0,0,0,0.06), 0 22px 48px rgba(17,17,17,0.12);
}
.wld { background: var(--bg); padding: clamp(56px,8vw,96px) 0; }
.wld-inner { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px,5.6vw,48px); }
.wld-head { text-align: center; margin-bottom: 48px; }
.wld-head h2 { font-family: var(--font); font-size: clamp(24px,3vw,36px); font-weight: 700; letter-spacing: -1.5px; margin-bottom: 10px; }
.wld-head p { color: var(--ink-2); font-size: clamp(14px,1.2vw,16px); max-width: 560px; margin: 0 auto; }
.wld-group { margin-bottom: 44px; }
.wld-group:last-child { margin-bottom: 0; }
.wld-group-label { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.wld-group-label h3 { font-family: var(--font); font-size: 18px; font-weight: 600; letter-spacing: -0.4px; }
.wld-group-label span { color: var(--ink-3); font-size: 13px; }
.wld-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.wld-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform .22s var(--ease), box-shadow .22s var(--ease); text-align: left; padding: 0; font-family: inherit; width: 100%; display: block; box-shadow: var(--wld-sh-card); }
.wld-card:hover { transform: translateY(-4px); box-shadow: var(--wld-sh-card-hover); }
.wld-card:active { transform: translateY(-2px) scale(0.998); }
.wld-card:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wld-thumb { display: block; aspect-ratio: 16/10; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--bg); }
.wld-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform .45s var(--ease); }
.wld-card:hover .wld-thumb img { transform: scale(1.05); }
.wld-name { padding: 12px 14px; font-family: var(--font); font-weight: 600; font-size: 14px; letter-spacing: -0.3px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.wld-name svg { width: 15px; height: 15px; color: var(--ink-3); flex: none; }
.wld-lb { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: clamp(16px,3vw,40px); z-index: 9999; background: rgba(17,17,17,0.80); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .62s var(--ease), visibility 0s linear .62s; }
.wld-lb.open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .62s var(--ease), visibility 0s linear 0s; }
.wld-frame { max-width: 1500px; width: 100%; background: var(--surface); border-radius: 12px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.35); transform: none; opacity: 0; transition: transform .62s var(--ease), opacity .42s var(--ease); will-change: transform,opacity; }
.wld-lb.open .wld-frame { transform: none; opacity: 1; }
.wld-bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--line); }
.wld-dot { width: 9px; height: 9px; border-radius: 50%; }
.wld-dot:nth-child(1) { background: #ff5f57; } .wld-dot:nth-child(2) { background: #febc2e; } .wld-dot:nth-child(3) { background: #28c840; }
.wld-title { flex: 1; margin-left: 10px; font-family: var(--font); font-weight: 600; font-size: 13px; color: var(--ink); }
.wld-count { font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--ink-3); margin-right: 10px; white-space: nowrap; }
.wld-close { border: none; background: none; cursor: pointer; color: var(--ink-2); font-size: 22px; line-height: 1; padding: 2px 8px; border-radius: 6px; }
.wld-close:hover { background: var(--line); color: var(--ink); }
.wld-frame img { display: block; width: 100%; height: auto; max-height: calc(92vh - 100px); object-fit: contain; transition: transform .35s var(--ease); cursor: zoom-in; }
.wld-frame img.wld-zoomed { transform: scale(1.9); cursor: zoom-out; }
.wld-cap { padding: 13px 18px; border-top: 1px solid var(--line); font-family: var(--body); font-size: 13px; color: var(--ink-2); }
.wld-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); background: rgba(17,17,17,0.55); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s var(--ease), transform .2s var(--ease); }
.wld-nav:hover { background: rgba(17,17,17,0.85); transform: translateY(-50%) scale(1.06); }
.wld-nav svg { width: 22px; height: 22px; }
.wld-prev { left: 24px; } .wld-next { right: 24px; }
.wld-close:focus-visible, .wld-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 860px) { .wld-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .wld-grid { grid-template-columns: 1fr; } .wld-nav { width: 40px; height: 40px; } .wld-prev { left: 8px; } .wld-next { right: 8px; } }
@media (prefers-reduced-motion: reduce) { .wld-card, .wld-lb, .wld-frame, .wld-thumb img { transition: none !important; } .wld-frame { transform: none !important; opacity: 1 !important; } }

/* ═══ OFFICE FILES BAND ═══ */
.office-band {
  --word:  #2B579A;
  --excel: #217346;
  --ppt:   #C43E1C;
  padding: clamp(56px,6vw,92px) clamp(20px,5.6vw,48px);
  border-top: 1px solid var(--line);
}
.office-grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(32px,5vw,64px); align-items: center; max-width: 1120px; margin: 0 auto; }
.of-glyph { border-radius: 6px; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--font); font-weight: 700; flex-shrink: 0; }
.of-w { background: var(--word); } .of-x { background: var(--excel); } .of-p { background: var(--ppt); }

/* left column */
.office-eyebrow { display: inline-block; font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); padding: 6px 14px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); margin-bottom: 18px; }
.office-band h2 { font-family: var(--font); font-size: clamp(26px,3.4vw,40px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 14px; }
.office-sub { font-size: clamp(15px,1.3vw,17px); color: var(--ink-2); line-height: 1.6; margin-bottom: 26px; max-width: 460px; }
.office-modes { display: flex; flex-direction: column; gap: 2px; }
.of-mode { display: flex; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.of-mode:last-child { border-bottom: 1px solid var(--line); }
.of-mode-ico { width: 36px; height: 36px; border-radius: 9px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--ink); flex-shrink: 0; }
.of-mode-ico svg { width: 18px; height: 18px; }
.of-mode-txt h4 { font-family: var(--font); font-size: 15px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.of-mode-txt p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.of-glyphs { display: inline-flex; gap: 4px; margin-left: 2px; }
.of-glyphs .of-glyph { width: 17px; height: 17px; font-size: 9px; }
.of-loc-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-family: var(--font); font-size: 11px; font-weight: 600; color: var(--ink-2); background: var(--bg); border: 1px solid var(--line); border-radius: 7px; padding: 5px 9px; }
.of-loc-chip .of-glyph { width: 15px; height: 15px; font-size: 8px; }
.of-loc-chip svg { width: 11px; height: 11px; color: var(--ink-3); }
.office-footnote { margin-top: 22px; font-size: 13px; color: var(--ink-3); }

/* right column: live Office editor */
.of-editor { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 34px 70px -40px rgba(0,0,0,0.22); }
.of-ribbon { display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-bottom: 1px solid var(--line); background: #fbfbfb; }
.of-ribbon .of-glyph { width: 27px; height: 27px; font-size: 14px; }
.of-doc-name { font-family: var(--font); font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 5px; }
.of-doc-name svg { width: 12px; height: 12px; color: var(--ink-3); }
.of-ribbon-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.of-isle { font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--ink-2); padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.of-isle svg { width: 12px; height: 12px; }
.of-isle-ai { color: var(--purple); border-color: rgba(124,58,237,0.3); }
.of-isle-share { color: #fff; background: var(--ink); border-color: var(--ink); }
.of-you-av { width: 25px; height: 25px; border-radius: 50%; background: var(--green); color: #fff; font-family: var(--font); font-weight: 600; font-size: 10.5px; display: flex; align-items: center; justify-content: center; }
.of-fmt { display: flex; align-items: center; gap: 12px; padding: 7px 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); }
.of-fmt b { color: var(--ink-2); font-size: 12.5px; font-family: var(--body); }
.of-fmt-i { font-style: italic; } .of-fmt-u { text-decoration: underline; } .of-fmt-b { font-weight: 700; }
.of-fmt .of-sep { width: 1px; height: 14px; background: var(--line); }
.of-page { background: #fff; padding: 26px clamp(22px,3vw,40px); position: relative; }
.of-page h3 { font-family: var(--font); font-size: 19px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 13px; }
.of-ln { height: 9px; border-radius: 4px; background: #eef0f2; margin-bottom: 10px; }
.of-w95 { width: 95%; } .of-w90 { width: 90%; } .of-w80 { width: 80%; } .of-w70 { width: 70%; } .of-w60 { width: 60%; } .of-w40 { width: 40%; }
.of-para { margin-bottom: 18px; }
.of-caret { position: absolute; width: 2px; height: 18px; border-radius: 2px; animation: ofBlink 1.1s step-end infinite; }
.of-caret span { position: absolute; top: -17px; left: -1px; font-family: var(--font); font-size: 9.5px; font-weight: 600; color: #fff; padding: 2px 6px; border-radius: 5px 5px 5px 0; white-space: nowrap; }
.of-c-purple { background: var(--purple); } .of-c-purple span { background: var(--purple); }
.of-c-cyan { background: var(--cyan); } .of-c-cyan span { background: var(--cyan); }
.of-sel { position: absolute; background: rgba(8,145,178,0.15); border-radius: 3px; }
.of-live-note { display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-top: 1px solid var(--line); background: #fbfbfb; font-family: var(--font); font-size: 12px; font-weight: 600; color: var(--ink-3); }
.of-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(22,163,74,0.4); animation: ofPulse 2s infinite; }

@keyframes ofBlink { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes ofPulse { 0% { box-shadow: 0 0 0 0 rgba(22,163,74,0.4); } 70% { box-shadow: 0 0 0 7px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }

@media (max-width: 860px) {
  .office-grid { grid-template-columns: 1fr; gap: 36px; }
  .office-sub { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  .of-caret, .of-pulse { animation: none !important; }
}

/* ═══ HERO INTRO VIDEO ═══
   Replaced the six-card fan 2026-08-26. See template-parts/home-body.html.
   The poster is deliberately NOT dimmed: Ben rejected the dark overlay, so the
   contrast comes from a solid ink play button with a white halo instead. */
.hvideo-outer {
  width: 100%;
  /* Sits close under the trust row on purpose: the hero already carries the
     wordmark, statement, two CTAs, the trial note and the badges, so a wide gap
     here just pushed the player below the fold for no benefit. */
  margin: clamp(20px, 2.6vw, 32px) auto 0;
  padding: 0 clamp(20px, 5.6vw, 48px);
}
.hvideo {
  position: relative;
  width: min(940px, 100%);
  margin: 0 auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(17, 17, 17, 0.45);
  cursor: pointer;
}
/* No hover reaction on the frame itself. Ben asked for it to sit completely
   still, so only the play button responds. */
.hvideo .hcard-bar { padding: 11px 14px; }
.hcard-dot--video { background: var(--rose); }

.hvideo-poster { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; }
.hvideo-poster img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  /* The poster is exactly 16:9, so cover crops nothing. Kept as a safety net:
     if the poster is ever swapped for a taller image, the trim comes off the
     bottom rather than splitting the difference top and bottom. */
  object-position: center top;
}
.hvideo .play-btn {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(56px, 9vw, 96px); height: clamp(56px, 9vw, 96px);
  border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 18px 40px -12px rgba(17, 17, 17, 0.55), 0 0 0 5px rgba(255, 255, 255, 0.55);
  transition: transform 0.3s var(--ease), background 0.3s var(--ease);
}
.hvideo .play-btn svg { width: 34%; height: 34%; margin-left: 4%; fill: currentColor; }
.hvideo:hover .play-btn,
.hvideo .play-btn:focus-visible { transform: translate(-50%, -50%) scale(1.08); background: #000; }
.hvideo .play-btn::after {
  content: ''; position: absolute; inset: -10px;
  border-radius: 50%; border: 2px solid rgba(17, 17, 17, 0.30);
  animation: hvPulse 2.6s var(--ease) infinite; pointer-events: none;
}
@keyframes hvPulse {
  0%   { transform: scale(0.92); opacity: 0.9; }
  70%  { transform: scale(1.22); opacity: 0; }
  100% { transform: scale(1.22); opacity: 0; }
}
.hvideo-cap {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 22px;
  font-family: var(--font); font-size: clamp(13px, 1.5vw, 16px); font-weight: 600;
  color: #fff; background: rgba(17, 17, 17, 0.86);
  padding: 8px 18px; border-radius: 999px; white-space: nowrap;
  max-width: calc(100% - 28px); overflow: hidden; text-overflow: ellipsis;
}


/* Lightbox moved to main.css so every page can use it. */

@media (max-width: 520px) {
  .hvideo-cap { font-size: 12px; padding: 6px 12px; bottom: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hvideo .play-btn::after { animation: none; }
  .hvideo .play-btn { transition: none; }
}