/* Spacing scale, used by the padding and gaps generated in build.py */
:root { --px: 80px; --vs: 1; --hs: 1; --ms: 1; --gs: 1; }
@media (max-width: 1100px) { :root { --px: 40px; --vs: 0.75; --hs: 0.25; --ms: 0.75; --gs: 0.75; } }
@media (max-width: 760px) { :root { --px: 20px; --vs: 0.55; --hs: 0.125; --ms: 0.5; --gs: 0.5; } }

html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body > div { width: 100% !important; max-width: 1440px; margin: 0 auto; overflow: visible !important; }

[data-pencil-name="Nav Bar"] { position: sticky; top: 0; z-index: 50; }
[data-pencil-name="Section Nav (sticky)"] { position: sticky; z-index: 40; }

.is-link { cursor: pointer; transition: opacity 0.15s ease; }
.is-link:hover { opacity: 0.65; }
.is-link:focus-visible { outline: 2px solid #2E5A50; outline-offset: 3px; }

.is-card { cursor: pointer; }
.is-card [data-pencil-name="Title"] { transition: color 0.15s ease; }
.is-card:hover [data-pencil-name="Title"] { color: #2E5A50 !important; }
.is-card:focus-visible { outline: 2px solid #2E5A50; outline-offset: 6px; }

.video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #141414; border: 0; }
.video-host { position: relative; }

.gate-input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; font: 400 16px Inter, system-ui, sans-serif; color: #141414; }
.gate-error { color: #A32A2A; font: 500 13px Inter, system-ui, sans-serif; }

.slide-btn { cursor: pointer; }
.slide-dot { cursor: pointer; }

.site-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 100; padding: 10px 16px; border-radius: 4px; background: #141414; color: #FAFAF7; font: 500 14px Inter, system-ui, sans-serif; }

.disclosure-open { padding-top: 10px; display: flex; flex-direction: column; gap: 8px; color: #55554F; font: 400 15px/1.5 Inter, system-ui, sans-serif; }

.menu-btn { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: #141414; font: 500 15px Inter, system-ui, sans-serif; cursor: pointer; }
.menu-btn svg path { transition: transform 0.15s ease; transform-origin: 10px 10px; }
.nav-open .menu-a { transform: translateY(4px) rotate(45deg); }
.nav-open .menu-b { transform: translateY(-4px) rotate(-45deg); }

/* The workflow steps line up with the bottom of the video beside them. */
@media (min-width: 1101px) {
  [data-pencil-name="Workflow"] { align-items: stretch !important; }
  [data-pencil-name="Workflow"] [data-pencil-name="How It Works"] { height: auto !important; }
}

/* Wider than the design: the page stays 1440px, but its bars and bands reach both edges. */
@media (min-width: 1441px) {
  [data-pencil-name="Nav Bar"],
  [data-pencil-name="Footer"],
  [data-pencil-name="Section Nav (sticky)"],
  [data-pencil-name="Hero"],
  [data-pencil-name="Hero Visual"] { width: 100vw !important; margin-left: calc(50% - 50vw) !important; }
  [data-pencil-name="Nav Bar"],
  [data-pencil-name="Footer"] { padding-left: calc(50vw - 640px) !important; padding-right: calc(50vw - 640px) !important; }
  /* Keep hero screenshots at their 1120px design width inside the wider band. */
  [data-pencil-name="Hero Visual"] { padding-left: calc(50vw - 560px) !important; padding-right: calc(50vw - 560px) !important; }
  [data-pencil-name="Screenshot — Assistant on mobile"] { left: calc(50vw - 720px + 1090px) !important; }
}

/* Narrower than the design: fixed widths give way to the space available. */
@media (max-width: 1439px) {
  [data-pencil-name] { max-width: 100%; min-width: 0; }
  [data-pencil-name]:not([data-icon-set]):not([data-pencil-name="Swatch"]):not([data-pencil-name="Bullet"]):not([data-pencil-name="Number"]):not([data-pencil-name^="Dot"]):not([data-pencil-name^="Nav Item"]):not(.menu-btn) { flex-shrink: 1 !important; }
  [data-pencil-name^="Decision Visual"] { flex: 1 1 0 !important; width: auto !important; }
  [data-pencil-name="Hero Visual"] [data-pencil-name^="Screenshot"] { box-sizing: border-box !important; margin: 0 !important; }
  [data-pencil-name="Screenshot — Editable task suggestion"],
  [data-pencil-name="Screenshot — Tasks list and detail"],
  [data-pencil-name="Screenshot — Published update"],
  [data-pencil-name="Screenshot — Schedule OQs"] { width: 100% !important; }
  [data-pencil-name="Screenshot — Assistant on mobile"] { left: auto !important; right: calc(var(--px) / 2); }
  [data-pencil-name="Workflow"] [data-pencil-name^="Video Block"] { flex: 1.2 1 0 !important; width: auto !important; }
  [data-pencil-name="Video — Client Updates walkthrough"] { width: 100% !important; height: auto !important; aspect-ratio: 680 / 383; }
  [data-pencil-name="Video — Client Updates walkthrough"] [data-pencil-name="Play Button"] { left: calc(50% - 32px) !important; top: calc(50% - 32px) !important; }
  [data-pencil-name="Video — Client Updates walkthrough"] [data-pencil-name="Duration"] { top: auto !important; bottom: 12px; left: 12px !important; }
}

/* Tablet: decisions stack, and media takes its own proportions. */
@media (max-width: 1100px) {
  [style*="font-size: 64px"] { font-size: 52px !important; }
  [style*="font-size: 48px"] { font-size: 40px !important; }
  [style*="font-size: 44px"] { font-size: 36px !important; }
  [style*="font-size: 32px"] { font-size: 28px !important; }

  [data-pencil-name^="Decision "]:not([data-pencil-name="Decision Text"]):not([data-pencil-name="Decision Visual"]):not([data-pencil-name="Decision Name"]):not([data-pencil-name="Decision Number"]):not([data-pencil-name="Decision Heading"]) { flex-direction: column !important; align-items: stretch !important; gap: 28px !important; }
  [data-pencil-name="Decision Text"] { width: 100% !important; order: -1; }
  [data-pencil-name="Decision Visual"] { flex: none !important; width: 100% !important; }
  [data-pencil-name="Workflow"] { flex-direction: column !important; align-items: stretch !important; gap: 28px !important; }
  [data-pencil-name="Workflow"] > [data-pencil-name] { flex: 0 0 auto !important; width: 100% !important; height: auto !important; }
  [data-pencil-name="Workflow"] [data-pencil-name="Flow"] { height: auto !important; }

  .r-autoh { height: auto !important; }
  .r-media { height: auto !important; aspect-ratio: var(--ar, 16 / 10) !important; flex: 0 0 auto !important; width: 100% !important; align-self: center; }
  .r-media > div:not([data-pencil-name]) > div { transform: none !important; }
  .r-phone { width: min(280px, 70%) !important; }
  [data-pencil-name="Hero Visual"] { height: auto !important; align-items: center !important; }
  [data-pencil-name="Hero Visual"] > [data-pencil-name^="Screenshot"] { flex: 0 0 auto !important; }
  [data-pencil-name="Screenshot — Assistant on mobile"] { top: auto !important; bottom: 0; right: var(--px) !important; width: 26% !important; align-self: auto; }
  [data-pencil-name^="Dashboard"] { height: auto !important; }

  [data-pencil-name="Stage"] { width: 100% !important; height: auto !important; aspect-ratio: 680 / 440; }
  [data-pencil-name^="Slide "] { width: 100% !important; height: 100% !important; }
  [data-pencil-name="Stage"] [data-pencil-name="Previous"],
  [data-pencil-name="Stage"] [data-pencil-name="Next"] { top: calc(50% - 22px) !important; }
  [data-pencil-name="Stage"] [data-pencil-name="Next"] { left: auto !important; right: 12px; }
  [data-pencil-name="Stage"] [data-pencil-name="Previous"] { left: 12px !important; }
  [data-pencil-name="Stage"] [data-pencil-name="Counter"] { left: auto !important; right: 12px; top: 12px !important; }
  .video-host [data-pencil-name="Play Button"] { left: calc(50% - 32px) !important; top: calc(50% - 32px) !important; }
  .video-host [data-pencil-name="Duration"] { top: auto !important; bottom: 12px; left: 12px !important; }
}

/* Paired videos scale together, so they keep one shared height at any width. */
@media (min-width: 761px) and (max-width: 1439px) {
  [data-pencil-name="Videos — Mobile and desktop"] > [data-pencil-name="Mobile"] { flex: 0.5625 1 0 !important; width: auto !important; }
  [data-pencil-name="Videos — Mobile and desktop"] > [data-pencil-name="Desktop"] { flex: 1.7778 1 0 !important; width: auto !important; }
  [data-pencil-name="Videos — Assistant on mobile and desktop"] > [data-pencil-name="Mobile"] { flex: 0.4610 1 0 !important; width: auto !important; }
  [data-pencil-name="Videos — Assistant on mobile and desktop"] > [data-pencil-name="Desktop"] { flex: 1.4307 1 0 !important; width: auto !important; }
  [data-pencil-name^="Videos — "] [data-pencil-name="Video — Tasks mobile"] { width: 100% !important; height: auto !important; aspect-ratio: 9 / 16 !important; }
  [data-pencil-name^="Videos — "] [data-pencil-name="Video — Tasks desktop"] { width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; }
  [data-pencil-name^="Videos — "] [data-pencil-name="Video — AI Tasks mobile"] { width: 100% !important; height: auto !important; aspect-ratio: 720 / 1562 !important; }
  [data-pencil-name^="Videos — "] [data-pencil-name="Video — AI Tasks desktop"] { width: 100% !important; height: auto !important; aspect-ratio: 1920 / 1342 !important; }
}

/* Phone */
@media (max-width: 760px) {
  [style*="font-size: 64px"] { font-size: 38px !important; letter-spacing: -1px !important; }
  [style*="font-size: 48px"] { font-size: 30px !important; letter-spacing: -0.6px !important; }
  [style*="font-size: 44px"] { font-size: 32px !important; }
  [style*="font-size: 36px"] { font-size: 28px !important; }
  [style*="font-size: 32px"] { font-size: 24px !important; }
  [style*="font-size: 28px"] { font-size: 23px !important; }
  [style*="font-size: 24px"] { font-size: 19px !important; }
  [style*="font-size: 22px"] { font-size: 18px !important; }

  [style*="white-space: nowrap"] { white-space: normal !important; overflow-wrap: anywhere; }
  [data-pencil-name="Footer"] { flex-wrap: wrap; gap: 16px !important; padding-top: 28px !important; padding-bottom: 28px !important; }

  .r-stack { flex-direction: column !important; align-items: stretch !important; }
  .r-stack > [data-pencil-name] { flex: 0 0 auto !important; width: 100% !important; }
  .r-stack > .r-phone { width: min(280px, 70%) !important; align-self: center; }
  .r-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .r-grid > [data-pencil-name] { width: auto !important; }
  [data-pencil-name="Rollout Plan"] { row-gap: 28px !important; }
  .r-flow { flex-direction: column !important; align-items: stretch !important; height: auto !important; }
  .r-flow > [data-pencil-name] { flex: 0 0 auto !important; width: 100% !important; height: auto !important; }
  .r-flow > [data-pencil-name="Arrow"] { width: 18px !important; align-self: center; transform: rotate(90deg); }
  [data-pencil-name="Connector"] { display: none; }
  [data-pencil-name="Header Row"] { display: none !important; }
  [data-pencil-name="Empty Slot 2"], [data-pencil-name="Empty Slot 1"] { display: none !important; }
  [data-pencil-name^="Project Card"] { flex: 0 0 auto !important; width: 100% !important; }
  [data-pencil-name^="Thumbnail"] { height: 220px !important; }
  [data-pencil-name="Stage"] [data-pencil-name="Previous"], [data-pencil-name="Stage"] [data-pencil-name="Next"] { transform: scale(0.85); }

  [data-pencil-name="Section Nav (sticky)"] { justify-content: flex-start !important; gap: 22px !important; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap !important; }
  [data-pencil-name="Section Nav (sticky)"]::-webkit-scrollbar { display: none; }
  [data-pencil-name="Section Nav (sticky)"] [data-pencil-name^="Nav Item"] { flex: 0 0 auto !important; }
  [data-pencil-name="Section Nav (sticky)"] [data-pencil-name="Label"] { white-space: nowrap !important; }
  [data-pencil-name="Section Nav (sticky)"] [data-pencil-name^="Nav Item"] { padding-top: 14px !important; padding-bottom: 14px !important; }
}

/* Top nav collapses to a menu */
@media (max-width: 640px) {
  .menu-btn { display: inline-flex; }
  [data-pencil-name="Nav Bar"] { position: sticky; padding-top: 10px !important; padding-bottom: 10px !important; height: auto !important; }
  [data-pencil-name="Nav Bar"] [data-pencil-name="Links"] { display: none !important; }
  .nav-open[data-pencil-name="Nav Bar"] [data-pencil-name="Links"] { display: flex !important; position: absolute; top: 100%; left: 0; width: 100% !important; max-width: none; flex-direction: column; align-items: stretch !important; gap: 0 !important; padding: 4px var(--px) 12px; background: #FAFAF7; border-bottom: 1px solid #E0DFD9; box-shadow: 0 12px 24px rgba(20, 20, 20, 0.08); }
  .nav-open[data-pencil-name="Nav Bar"] [data-pencil-name="Links"] > * { padding: 14px 0; font-size: 18px !important; border-top: 1px solid #E0DFD9; white-space: nowrap !important; }
  .nav-open[data-pencil-name="Nav Bar"] [data-pencil-name="Links"] > *:first-child { border-top: 0; }
}