@import url("extension/motion-tokens.css");
/* Inter 4 (variable weight, Latin), self-hosted under the SIL OFL; see
   site-assets/fonts/Inter-OFL.txt. "optional" keeps layout still: if the
   preloaded file is not ready for first paint, that view keeps the fallback. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: optional;
  src: url("site-assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --blue: #075cff;
  --ink: #15233b;
  --muted: #606e83;
  --line: #e3e9f2;
  --paper: #f9fbff;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --tabs-dur: var(--duration-fast);
  --dropdown-open-dur: var(--duration-fast);
  --dropdown-close-dur: var(--duration-quick);
  --check-box: var(--duration-quick);
  --check-draw: var(--duration-medium);
  --font-body: Inter, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  font-family: var(--font-body);
  scroll-behavior: smooth;
  /* iOS enlarges body text unevenly in landscape unless told not to. */
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
/* The wheel glide (site.js) moves the page itself, one frame at a time. */
html.is-gliding { scroll-behavior: auto; }
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
button,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid #91b8ff;
  outline-offset: 3px;
}
.site-header,
.site-footer,
main {
  width: min(1440px, calc(100% - clamp(32px, 8vw, 120px)));
  margin: auto;
}
.site-header {
  height: 86px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  gap: 30px;
}
.site-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--blue);
  font-size: 27px;
  font-weight: 760;
}
.site-header nav {
  display: flex;
  gap: 32px;
  margin-left: auto;
  color: #617086;
  font-size: 12px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 17px;
  font-size: 11px;
}
.hero {
  min-height: calc(100vh - 86px);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  align-items: center;
  gap: clamp(45px, 6vw, 100px);
  padding: 75px 0;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #62728a;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .9px;
  text-transform: uppercase;
}
/* Headings break into even lines instead of stranding a last word ("tool.").
   Zero specificity, so any heading that sets its own wrapping keeps it. */
:where(h1:not(.hero-headline), h2, h3) { text-wrap: balance; }
/* Keyboard users can jump past the header and the hero demo. Visible only while focused. */
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 2147483001; padding: 10px 14px; border-radius: 10px; background: #fff; color: #075cff; font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px #10244033; }
.skip-link:focus-visible { top: 12px; outline: 2px solid #075cff; outline-offset: 2px; }
/* No double-tap zoom delay on anything pressable. */
a, button, [role="button"], summary, input, select, textarea { touch-action: manipulation; }
/* A tiny Sumlino mark (two offset bars, like the S) leads each section label. */
.eyebrow i {
  position: relative;
  flex: none;
  width: 11px;
  height: 9px;
}
.eyebrow i::before,
.eyebrow i::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 3.6px;
  border-radius: 2px;
  background: var(--blue);
}
.eyebrow i::before { top: 0; left: 0; }
.eyebrow i::after { bottom: 0; right: 0; }
.hero h1 {
  margin: 25px 0 0;
  font-size: clamp(55px, 5.7vw, 88px);
  font-weight: 520;
  line-height: 0.97;
  letter-spacing: -4px;
}
.hero h1 em {
  color: var(--blue);
  font-style: normal;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 25px;
  font-size: 12px;
}
.hero-note {
  max-width: 475px;
  margin-top: 28px;
  color: #718097;
  font-size: 11px;
  line-height: 1.7;
}
.hero-tour {
  margin: 0;
}
.browser-frame {
  border: 1px solid #ced9e8;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 35px 80px #1b3d7019;
  overflow: hidden;
}
.browser-bar {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 14px;
  background: #f2f5f9;
  border-bottom: 1px solid #dce4ef;
}
.browser-bar > i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #cad2df;
}
.browser-bar span {
  margin-left: 12px;
  padding: 7px 18px;
  border-radius: 7px;
  background: white;
  color: #8794a5;
  font-size: 9px;
}
.browser-canvas {
  height: 480px;
  display: grid;
  grid-template-columns: 1fr 300px;
  background: #f8fafc;
}
.browser-placeholder {
  padding: 55px 35px;
  color: #8c99aa;
}
.browser-placeholder span {
  font-size: 9px;
}
.browser-placeholder > b {
  display: block;
  margin: 15px 0 35px;
  color: #40526d;
  font-size: 20px;
}
.browser-placeholder i {
  display: block;
  height: 56px;
  margin: 12px 0;
  border-radius: 8px;
  background: #edf1f5;
}

.mini-client small,

.hero-tour figcaption {
  display: flex;
  justify-content: space-between;
  padding: 14px 3px;
  color: #758399;
  font-size: 9px;
}
.hero-tour figcaption b {
  color: #40516b;
}
.reveal {
  opacity: 1;
  transform: translateY(10px);
  transition:
    opacity 500ms var(--ease),
    transform 500ms var(--ease);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
.js .reveal:not(.is-visible) {
  opacity: 0;
}
.section-heading {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 60px;
}
.section-heading .eyebrow {
  justify-content: center;
}
.section-heading h2,
.reconcile h2,
.principles h2,
.beta-callout h2 {
  font-size: clamp(42px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -3px;
  font-weight: 520;
  margin: 22px 0;
}
.section-heading > p:last-child,
.reconcile-copy > p,
.beta-callout p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}
.workspace-section {
  padding: 88px 0 64px;
}

.principles {
  display: grid;
  grid-template-columns: 1.3fr repeat(3, 1fr);
  gap: 35px;
  padding: 110px 0;
  border-bottom: 1px solid var(--line);
}
.principles h2 {
  font-size: 45px;
}
.principles article {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.principles article > b {
  font-size: 9px;
  color: #94a4ba;
}
.principles h3 {
  font-size: 16px;
  margin-top: 35px;
}
.principles article p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.7;
}
.beta-callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 100px 0;
  padding: 60px;
  border-radius: 24px;
  background: var(--blue);
  color: white;
}
.beta-callout .eyebrow,
.beta-callout p {
  color: #dce7ff;
}
.beta-callout h2 {
  font-size: 50px;
}
.primary-cta.light {
  background: #fff;
  color: var(--blue);
  box-shadow: none;
}
.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 28px;
  align-items: center;
  padding: 35px 0;
  border-top: 1px solid #dce6f3;
  color: #677385;
  font-size: 12px;
}
.site-footer .site-brand {
  padding-block: 10px;
  margin-block: -10px;
  font-size: 19px;
}
.footer-brand p { max-width: 340px; margin: 12px 0 0; line-height: 1.6; }
/* Social links are quiet secondary navigation: monochrome marks in hairline
   circles, a caption and a name, warming to blue on hover. */
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; }
.footer-social a { display:inline-flex; align-items:center; gap:11px; min-height:52px; padding:6px 16px 6px 6px; border:1px solid #e1e8f2; border-radius:999px; background:#ffffffb3; color:#243955; font-size:13px; font-weight:620; text-decoration:none; transition:color var(--duration-fast) var(--ease-smooth-out),border-color var(--duration-fast) var(--ease-smooth-out),background-color var(--duration-fast) var(--ease-smooth-out),translate var(--duration-fast) var(--ease-smooth-out); }
.footer-social svg { width:38px; height:38px; padding:11px; box-sizing:border-box; flex:none; fill:currentColor; color:#33496a; background:#f1f5fb; border-radius:50%; transition:color var(--duration-fast) var(--ease-smooth-out),background-color var(--duration-fast) var(--ease-smooth-out); }
.footer-social small { display:block; margin-bottom:2px; color:#687589; font-size:11px; font-weight:480; }
/* Equal pills with left-aligned captions, so the three links line up. */
.footer-social a { text-align: left; }
@media(min-width:621px) { .footer-social a { min-width: 172px; } }
.footer-social .youtube-icon { color:#33496a; }
.footer-social a:is(:hover,:focus-visible) { color:#075cff; border-color:#c3d6f6; background:#fff; }
@media (hover: hover) and (pointer: fine) { .footer-social a:is(:hover,:focus-visible) { translate:0 -2px; } }
.footer-social a:is(:hover,:focus-visible) svg { color:#075cff; background:#eaf1ff; }
.footer-social a:focus-visible,.footer-legal a:focus-visible { outline: 2px solid #075cff; outline-offset: 4px; }
.footer-legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; border-top: 1px solid #e4ebf4; }
.footer-legal a:hover { color: #075cff; }
.footer-legal nav { display:flex; flex-wrap:wrap; gap:0 20px; margin-block:-12px; }
.footer-legal nav a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.footer-disclaimer { grid-column:1/-1; margin:-12px 0 0; max-width:650px; font-size:11px; line-height:1.7; }
@media (max-width: 760px) {
  .site-footer { grid-template-columns: minmax(0,1fr); }
  .footer-social { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-social a,.footer-social svg { transition: none; }
  .footer-social a:is(:hover,:focus-visible) { translate: none; }
}
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
  .hero-copy {
    text-align: center;
  }
  .hero .eyebrow,
  .hero-actions {
    justify-content: center;
  }
  .hero-note {
    margin-inline: auto;
  }
  .demo-layout,
  
  
  .principles {
    grid-template-columns: 1fr 1fr;
  }
  .principles > div {
    grid-column: 1/-1;
  }
}
@media (max-width: 620px) {
  .site-header,
  .site-footer,
  main {
    width: calc(100% - 32px);
  }
  .site-header {
    height: auto;
    min-height: 100px;
    flex-wrap: wrap;
    padding: 15px 0;
  }
  .site-header nav {
    order: 3;
    width: 100%;
    justify-content: center;
    margin: 10px 0 0;
  }
  .header-actions {
    margin-left: auto;
  }
  .hero h1 {
    font-size: 48px;
    letter-spacing: -2.6px;
  }
  .browser-canvas {
    display: block;
    height: auto;
  }
  .browser-placeholder {
    display: none;
  }
  
  .workspace-section {
    padding: 56px 0 48px;
  }
  
  
  
  .principles {
    grid-template-columns: 1fr;
  }
  .principles > div {
    grid-column: auto;
  }
  .beta-callout {
    align-items: flex-start;
    flex-direction: column;
    padding: 40px 25px;
  }
  .site-footer {
    grid-template-columns: minmax(0, 1fr);
  }
  .site-footer > span:first-of-type {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root {
    scroll-behavior: auto;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .t-dropdown,
  .t-tabs-pill,
  .t-tabs button {
    transition: none !important;
  }
}
.hero-tour figcaption span {
  display: grid;
  gap: 3px;
}
.tour-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 4px;
}

.tour-chapters {
  display: flex;
  gap: 4px;
}
.tour-chapters button,

.tour-chapters button[aria-pressed="true"] {
  background: #edf3ff;
  color: #075cff;
}

@keyframes tourchange {
  from {
    opacity: 0.55;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.pricing-main {
  max-width: 1060px;
  margin: auto;
  padding: 90px 0;
}
.pricing-intro {
  text-align: center;
  margin-bottom: 55px;
}
.pricing-intro h1 {
  font-size: clamp(44px, 6vw, 70px);
  font-weight: 520;
}

.pricing-answers {
  max-width: 760px;
  margin: 80px auto;
}

.privacy-main p,
.privacy-main li,
.pricing-main p {
  color: var(--muted);
  line-height: 1.7;
}

/* September refresh: legible sidebar scale and aligned swipe actions. */
.hero h1 {
  font-size: clamp(48px, 4.7vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.055em;
}
.hero {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 48px;
}
.hero-actions {
  gap: 12px;
  flex-wrap: wrap;
}
.browser-canvas {
  grid-template-columns: minmax(100px, 1fr) minmax(255px, 1.45fr);
}
.browser-placeholder {
  padding: 38px 18px;
}
.browser-placeholder > b {
  font-size: 17px;
}
.browser-bar > i:nth-child(1) {
  background: #ff625b;
}
.browser-bar > i:nth-child(2) {
  background: #ffbd44;
}
.browser-bar > i:nth-child(3) {
  background: #00c94c;
}

.legal-page {
  max-width: 760px;
  margin-inline: auto;
  padding-block: 80px;
}
.legal-page p {
  line-height: 1.8;
  color: var(--muted);
}

@media (max-width: 1000px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .hero-copy {
    max-width: 650px;
    margin: auto;
    text-align: center;
  }
  .hero .eyebrow,
  .hero-actions {
    justify-content: center;
  }
  .hero-note {
    margin-inline: auto;
  }
  .hero-tour {
    width: min(100%, 680px);
    margin: auto;
  }
  
  
}
@media (max-width: 800px) {
  .demo-layout,
  
  
  
  
  .site-header {
    gap: 18px;
  }
  .site-header nav {
    gap: 16px;
  }
}
@media (max-width: 620px) {
  .site-header {
    height: auto;
    min-height: 105px;
    padding: 16px 0;
    gap: 14px;
  }
  .site-header nav {
    order: 3;
    width: 100%;
    justify-content: center;
    margin: 0;
  }
  .site-header .site-brand {
    font-size: 24px;
  }
  
  .hero {
    padding-block: 55px;
  }
  .hero h1 {
    font-size: 46px;
  }
  .browser-canvas {
    display: block;
  }
  .hero-tour figcaption {
    flex-direction: column;
    gap: 6px;
  }
  
  .section-heading h2 {
    font-size: 40px;
    letter-spacing: -2px;
  }
  
  
  
  .legal-page {
    padding-top: 48px;
  }
  .tour-chapters button,
  
  .site-footer {
    gap: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal:not(.is-visible) {
    opacity: 1;
  }
}
/* Keep product details readable in both wide and compact previews. */
.section-heading h2 {
  font-size: clamp(38px, 4.2vw, 58px);
  letter-spacing: -0.045em;
}
.eyebrow {
  font-size: 11px;
}
.browser-bar span {
  font-size: 10px;
}

.mini-client small,

.mini-client em,

.tour-chapters button,

.hero-tour figcaption {
  font-size: 10px;
  gap: 12px;
}

@media (max-width: 620px) {
  
  
  .tour-controls {
    gap: 6px;
  }
  .tour-chapters {
    gap: 2px;
  }
  .tour-chapters button,
  
  
  
  .site-header .site-brand {
    font-size: 23px;
  }
}
/* The hero's entrance. CSS owns it, so slow or failed scripts never hold
   content back, and every element keeps its space while it waits. Each item
   fades (opacity, plain ease) and rises (translate, a long settle) as two
   animations, so it reads as a fade rather than a pop; the headline alone
   sharpens from a 3px blur. Order: changelog link, headline, category line,
   actions, then the demo, which enters last, slower and from further. After
   the opening reveal the same sequence waits for the characters to clear
   (marketing.css, html.is-revealing). These 420-880ms timings are a one-time
   page entrance, not UI feedback, so they sit outside the 120-300ms rule. */
.marketing-home .hero-arrival {
  --arrival-delay: 0ms;
  --arrival-rise: 10px;
  --arrival-fade-time: 420ms;
  --arrival-rise-time: 600ms;
  /* Backwards fill only: once it lands, no filter or opacity layer stays on the hero. */
  animation: hero-arrival-fade var(--arrival-fade-time) ease backwards, hero-arrival-rise var(--arrival-rise-time) cubic-bezier(.22, 1, .36, 1) backwards;
  animation-delay: var(--arrival-delay), var(--arrival-delay);
}
.marketing-home .changelog-link.hero-arrival { --arrival-rise: 8px; }
.marketing-home .headline-wrap.hero-arrival { --arrival-delay: 70ms; --arrival-rise: 14px; animation-name: hero-arrival-focus, hero-arrival-rise; }
.marketing-home .hero-arrival[data-arrival-stage="1"] { --arrival-delay: 140ms; }
.marketing-home .hero-arrival[data-arrival-stage="2"] { --arrival-delay: 210ms; }
/* The demo is large; it rises without blur or scale to stay cheap to paint. */
.marketing-home .hero-arrival[data-arrival-stage="3"] { --arrival-delay: 320ms; --arrival-rise: 28px; --arrival-fade-time: 520ms; --arrival-rise-time: 720ms; }
.marketing-home .hero-arrival:focus-within { animation: none; }
@keyframes hero-arrival-fade { from { opacity: 0; } }
@keyframes hero-arrival-focus { from { opacity: 0; filter: blur(3px); } }
@keyframes hero-arrival-rise { from { translate: 0 var(--arrival-rise); } }
/* Reduced motion keeps a short fade in the same order, with no travel or blur. */
@media(prefers-reduced-motion:reduce){
  .marketing-home .hero-arrival,.marketing-home .headline-wrap.hero-arrival { animation: hero-arrival-fade 240ms ease backwards; animation-delay: 0ms; }
  .marketing-home .hero-arrival[data-arrival-stage="1"],.marketing-home .hero-arrival[data-arrival-stage="2"] { animation-delay: 60ms; }
  .marketing-home .hero-arrival[data-arrival-stage="3"] { animation-delay: 120ms; }
}

/* Centered opening: message first, full-width product context beneath it. */
.marketing-home .hero {
  position: relative;
  isolation: isolate;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  gap: 56px;
  padding: 58px 0 56px;
}
.marketing-home .hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc((100% - 100vw) / 2) 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, #e4f0ff 0, #f1f7ff 48%, #f9fbff 78%);
}
.marketing-home .hero-copy {
  width: 100%;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
}
.marketing-home .hero .eyebrow {
  width: fit-content;
  justify-content: center;
  margin-inline: auto;
  padding: 8px 13px;
  border: 1px solid #dbe6f5;
  border-radius: 999px;
  background: #ffffff80;
  font-size: 10px;
  letter-spacing: .65px;
}
.marketing-home .hero h1 {
  max-width: 860px;
  margin: 30px auto 0;
  font-size: clamp(42px, 4.5vw, 66px);
  line-height: 1.07;
  letter-spacing: -.05em;
  text-wrap: balance;
}
.marketing-home .hero h1 em { display: block; }

.marketing-home .hero-actions { justify-content: center; margin-top: 26px; }
.marketing-home .hero-note { margin: 20px auto 0; max-width: none; text-wrap: balance; }
.marketing-home .hero-tour { width: 100%; max-width: none; margin-inline: auto; }
/* The demo anchor marks the demo's top edge in the same grid row, adding no gap. */
.marketing-home .hero > .hero-copy { grid-row: 1; }
.marketing-home .hero > .demo-anchor,.marketing-home .hero > .hero-tour { grid-row: 2; grid-column: 1; }
.marketing-home .hero > .demo-anchor { display: block; align-self: start; height: 0; pointer-events: none; }
.marketing-home .browser-canvas { grid-template-columns: minmax(0, 1fr) 360px; height: 480px; }
.marketing-home .browser-placeholder { padding: 28px; min-width: 0; }
.marketing-home .browser-placeholder > b { margin: 12px 0 30px; font-size: 18px; }
.preview-books-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #425771; }
.preview-books-heading strong { font-size: 16px; font-weight: 600; }
.preview-account { display: grid; gap: 14px; margin-top: 22px; padding: 18px; border: 1px solid #e0e7ef; border-radius: 10px; background: #fff; }
.preview-account > b { color: #536b85; font-size: 14px; font-weight: 500; }
.preview-account small { float: right; color: #075cff; font-size: 16px; }
.preview-ledger { margin-top: 24px; }
.preview-ledger > div { display: grid; grid-template-columns: 52px minmax(0, 1fr) 64px; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e4eaf2; }
.preview-ledger > div > span { font-size: 10px; }
.preview-ledger > div > span:last-child { text-align: right; }
.preview-ledger > .preview-ledger-head { color: #5d728a; }
@media (max-width: 800px) {
  .marketing-home .hero { padding-top: 46px; gap: 40px; }
  .marketing-home .browser-canvas { grid-template-columns: minmax(0, 1fr) 320px; }
  .marketing-home .browser-placeholder { padding: 24px 16px; }
  .preview-ledger > div { grid-template-columns: 42px minmax(0, 1fr); gap: 8px; }
  .preview-ledger > div > span:last-child { display: none; }
}
@media (max-width: 620px) {
  .marketing-home .hero { gap: 32px; padding: 40px 0 40px; }
  .marketing-home .hero h1 { margin-top: 24px; font-size: clamp(34px, 8.7vw, 48px); }
  
  .marketing-home .hero .eyebrow { font-size: 11px; letter-spacing: .4px; }
  .marketing-home .hero-actions { width: min(100%, 440px); gap: 8px; margin: 22px auto 0; }
  .marketing-home .hero-actions > a { flex: 1 1 0; min-width: 0; }
  .marketing-home .hero-note { max-width: 300px; font-size: 10px; }
  .marketing-home .browser-canvas { display: block; height: auto; }
}

/* Real sidebar previews share the extension UI and its fictional preview adapter. */
.hero-extension-frame { display: block; width: 100%; height: 100%; border: 0; border-left: 1px solid #e3eaf5; background: #fff; pointer-events: none; }
.marketing-home .browser-canvas { height: 840px; }


@media(max-width:620px) { .marketing-home .browser-canvas { height: 880px; } .hero-extension-frame { border-left: 0; } }

/* A stable scroll stage: chapter selection never changes the track's geometry. */

.tour-controls { justify-content: center; }
.tour-chapters button { transition: background var(--duration-fast) var(--ease-smooth-out),color var(--duration-fast) var(--ease-smooth-out); }

@media(prefers-reduced-motion:reduce) { .walkthrough-steps button,.tour-chapters button { transition: none; } }
/* Looping decorations marked data-loop pause while off screen (see site.js). */
.is-offscreen, .is-offscreen * { animation-play-state: paused !important; }

/* Sections arrive once (site.js): .will-enter holds what is still below the
   fold; .is-entered plays a single rise. The animation only fills backwards,
   so once it ends every element is back on its own styles (hover and state
   transitions untouched). Headings rise line by line; a feature row's words
   lead and its picture follows. */
@keyframes site-enter { from { opacity: 0; transform: translateY(var(--enter-distance, 16px)); } }
@keyframes site-enter-tile { from { opacity: 0; transform: translateY(26px) scale(.985); } }
@keyframes site-enter-fade { from { opacity: 0; } }
.will-enter:not(.is-entered):is(.section-heading, .firm-copy) > *,
.will-enter:not(.is-entered).story-chapter :is(.story-copy > *, .story-tile),
.will-enter:not(.is-entered):is(.pricing-teaser-card, .faq-list, .client-cast, .founding, .compare, .pricing-answers) { opacity: 0; }
.is-entered:is(.section-heading, .firm-copy) > *,
.is-entered.story-chapter .story-copy > *,
.is-entered:is(.pricing-teaser-card, .faq-list, .client-cast, .founding, .compare, .pricing-answers) { animation: site-enter 640ms cubic-bezier(.22, 1, .36, 1) var(--enter-delay, 0ms) backwards; }
.is-entered.story-chapter .story-tile { animation: site-enter-tile 820ms cubic-bezier(.22, 1, .36, 1) 140ms backwards; }
.is-entered:is(.section-heading, .firm-copy) > :nth-child(2), .is-entered.story-chapter .story-copy > :nth-child(2) { --enter-delay: 70ms; }
.is-entered:is(.section-heading, .firm-copy) > :nth-child(3), .is-entered.story-chapter .story-copy > :nth-child(3) { --enter-delay: 140ms; }
.is-entered:is(.section-heading, .firm-copy) > :nth-child(n + 4), .is-entered.story-chapter .story-copy > :nth-child(n + 4) { --enter-delay: 210ms; }
@media (prefers-reduced-motion: reduce) {
  .is-entered:is(.section-heading, .firm-copy) > *, .is-entered.story-chapter :is(.story-copy > *, .story-tile), .is-entered:is(.pricing-teaser-card, .faq-list, .client-cast, .founding, .compare, .pricing-answers) { animation: site-enter-fade 300ms ease-out backwards; }
}

/* Headings break into even lines (no single word left on the last line);
   intro paragraphs avoid a lone last word too. */
.section-heading :is(h1, h2), .story-copy h3, .firm-copy h2, .close-scene h2, .report-spotlight h2 { text-wrap: balance; }
.section-heading > p, .story-copy > p, .firm-copy > p { text-wrap: pretty; }

/* Moving between the marketing pages: a short cross-fade instead of a blank
   frame and a hard cut. Pages without this stylesheet (the app, sign-in) keep
   ordinary navigation, and reduced motion keeps the instant change. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; animation-timing-function: ease-out; }
}