@font-face{font-family:LandingDisplay;src:url('assets/syne-variable.ttf') format('truetype');font-weight:400 800;font-display:swap}
:root{--ink:#15171a;--muted:#545c68;--line:#d9dde3;--paper:#fff;--card:#fff;--wash:#f1f4f8;--blue:#007aff;color-scheme:light}
html{scroll-padding-top:20px}body{background:#fff;color:var(--ink);font-family:Vault,Arial,sans-serif;caret-color:var(--blue);scrollbar-color:#a7afb9 #f7f8fa}::selection{background:#c9e2ff;color:#111}button,a,input,select{outline-color:#075ccc}button:hover{filter:none}a:hover{text-decoration:underline;text-underline-offset:5px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #075ccc;outline-offset:4px}button svg,a svg{stroke:currentColor}.skip-link{position:fixed;z-index:20;top:8px;left:12px;background:white;padding:10px;transform:translateY(-150%)}.skip-link:focus{transform:none}
.opening{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding-bottom:15px;overflow:hidden}.desk-photo{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover;object-position:center center}.masthead{width:min(1060px,100%);display:flex;align-items:center;justify-content:space-between;gap:25px;padding:22px 24px 16px;min-height:68px}.masthead .wordmark{width:220px;height:auto;object-fit:contain}.masthead nav{display:flex;gap:40px;font-size:14px}.opening-copy{text-align:center;padding:4px 20px 12px;width:100%;max-width:840px}.opening-copy h1{font:700 79px/1.05 LandingDisplay,Arial,sans-serif;margin:0 0 8px;letter-spacing:0}.category{font-size:30px;line-height:1.2;margin:0 0 10px;text-wrap:balance}.lead{font-size:17px;line-height:1.5;color:var(--muted);margin:0 auto 15px;max-width:730px;text-wrap:balance}.primary-action{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:43px;padding:11px 22px;border-radius:24px;background:#0068df;color:#fff;font-size:14px;font-weight:550;text-align:center}.primary-action:hover{background:#0564cc;text-decoration:none}.primary-action svg{width:17px;height:17px}.arrow-right{display:inline-flex;transform:rotate(90deg)}
.film-selection{display:flex;gap:24px;align-items:center;justify-content:center;max-width:100%;padding:0 16px;margin:0 0 10px}.film-selection button{border:0;border-bottom:2px solid transparent;background:transparent;color:#424b58;font-size:12px;min-height:35px;padding:7px 0;line-height:1.3}.film-selection button[aria-selected=true]{color:#005fc8;border-bottom-color:#007aff}.film-selection button:hover{color:#005fc8}.film{display:flex;flex-direction:column;align-items:center;scroll-margin-top:20px}.phone-slot{--scale:.76;width:calc(344px * var(--scale));height:calc(704px * var(--scale));position:relative}.phone-slot .device{width:344px;height:704px;position:absolute;left:0;top:0;transform:scale(var(--scale));transform-origin:top left;border-radius:54px}.phone-slot .screen{--paper:#fcfaf6;--ink:#242320;--muted:#69655f;--line:#ded8cf;--card:#fffdfa;--wash:#f3f0eb}.screen .back,.screen .video{color:#007aff}.screen .dark .back,.screen .dark .video{color:#fff}.screen .link-card,.screen .calendar-card{border-radius:8px}.screen .project-widget{border-radius:8px}.screen .app-header{margin:0 15px}.screen .app-header .wordmark{width:175px}
.story-details{text-align:center;padding:36px 24px 30px;max-width:790px;margin:auto}.story-details h2{font:650 27px/1.25 Vault,Arial,sans-serif;margin:0 0 12px}.story-details>p{font-size:16px;line-height:1.65;color:var(--muted);margin:0 auto;max-width:620px;min-height:53px}.story-details [hidden]{display:none}.conversation-transcript{max-width:620px;margin:18px auto 0;border:0;padding:0;text-align:left}.conversation-transcript summary{text-align:center;color:#315b8a;font-size:12px;min-height:30px}.conversation-transcript #transcript{max-height:320px;padding:12px 18px;background:#f5f7fa;border-radius:6px}.conversation-transcript li{font-size:14px!important}.conversation-transcript strong{font-size:11px!important}
.benefits{padding:72px 24px 85px;border-top:1px solid #edf0f4;max-width:1160px;margin:auto}.section-heading{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end;margin-bottom:48px}.section-heading h2,.language-band h2,.getting-started>h2{font:650 37px/1.18 Vault,Arial,sans-serif;margin:0;text-wrap:balance}.section-heading>p{font-size:18px;line-height:1.6;color:var(--muted);margin:0;max-width:445px}.benefit-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:45px}.benefit-list article{border-top:1px solid #d6dce3;padding-top:22px;display:flex;flex-direction:column}.benefit-list h3,.steps h3{font-size:20px;line-height:1.3;margin:0 0 13px;font-weight:600}.benefit-list p,.steps p{font-size:16px;line-height:1.65;margin:0 0 20px;color:var(--muted)}.text-action{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:#0564c5;font-size:14px;line-height:1.4;padding:8px 0;text-align:left;margin-top:auto;align-self:flex-start}.text-action svg{width:17px;height:17px}.text-action:hover{text-decoration:underline;text-underline-offset:5px}
.language-band{background:#eff5fc;display:grid;grid-template-columns:minmax(0,440px) minmax(0,440px);gap:90px;justify-content:center;padding:75px 36px}.language-band p{font-size:17px;line-height:1.65;color:#3c566f;margin:20px 0}.language-exchange{display:flex;flex-direction:column;justify-content:center;gap:13px}.language-exchange p{font-size:16px;line-height:1.4;border-radius:19px;padding:13px 18px;margin:0;max-width:85%;background:white;color:#182634;align-self:flex-start}.language-exchange .answer{align-self:flex-end}.language-exchange .english{background:#0068df;color:white}.language-exchange .spanish{background:#fff;color:#263b4e}.getting-started{max-width:1160px;margin:auto;padding:84px 24px 80px;text-align:center}.getting-started>h2{margin-bottom:44px}.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:50px;text-align:left;margin-bottom:24px}.steps p{font-size:15px}.landing-footer{max-width:1160px;padding:27px 24px;margin:auto;border-top:1px solid #dde2e9;display:flex;gap:30px;justify-content:space-between;align-items:center}.landing-footer .wordmark{width:132px}.landing-footer p{margin:0;font-size:14px;color:var(--muted)}.landing-footer>a:last-child{font-size:14px}
@media(min-width:721px) and (max-height:900px){.masthead{padding-block:15px 10px;min-height:55px}.opening-copy h1{font-size:64px}.category{font-size:25px}.lead{font-size:15px;margin-bottom:10px}.opening-copy{padding-bottom:7px}.phone-slot{--scale:.62}.film-selection{margin-bottom:7px}.story-details{padding-top:28px}}
@media(min-width:721px) and (max-height:740px){.phone-slot{--scale:.52}.opening-copy h1{font-size:55px}.category{font-size:23px}.masthead{min-height:46px;padding-block:10px}.lead{margin-bottom:8px}.primary-action{min-height:36px;padding-block:8px}.opening{padding-bottom:8px}}
@media(max-width:720px){.masthead{min-height:58px;padding:18px 20px 10px}.masthead .wordmark{width:180px}.masthead nav{gap:18px;font-size:12px}.masthead nav a:first-child{display:none}.opening-copy{padding:10px 20px 10px}.opening-copy h1{font-size:52px;margin-bottom:10px}.category{font-size:23px;max-width:340px;margin:0 auto 9px}.lead{font-size:14px;line-height:1.5;max-width:325px;margin-bottom:13px}.primary-action{font-size:13px;min-height:40px;padding:10px 17px}.desk-photo{object-position:center}.film-selection{gap:20px;margin-bottom:12px}.film-selection button{font-size:11px}.phone-slot{--scale:.6}.opening{padding-bottom:12px}.story-details{padding:29px 22px}.story-details h2{font-size:23px}.story-details>p{font-size:15px;min-height:0}.benefits{padding:40px 24px 50px}.section-heading{display:block;margin-bottom:30px}.section-heading h2,.language-band h2,.getting-started>h2{font-size:29px}.section-heading>p{font-size:16px;margin-top:18px}.benefit-list{display:block}.benefit-list article{margin-top:26px;padding-top:22px}.benefit-list p{margin-bottom:10px}.language-band{display:flex;flex-direction:column;padding:45px 24px;gap:28px}.language-band>div{max-width:440px}.language-band p{font-size:16px}.language-exchange p{font-size:14px}.getting-started{padding:48px 24px}.getting-started>h2{margin-bottom:28px}.steps{display:block}.steps article{margin-bottom:26px}.steps h3{font-size:19px}.landing-footer{padding:24px;flex-wrap:wrap;gap:20px}.landing-footer p{order:3;width:100%;font-size:12px}}
@media(max-width:720px) and (max-height:760px){.opening-copy h1{font-size:43px}.category{font-size:21px}.opening-copy{padding-top:0}.phone-slot{--scale:.5}.lead{font-size:13px}.film-selection{margin-bottom:8px}.masthead{min-height:50px;padding-top:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.language-exchange *{animation:none}.desk-photo{transition:none}}
/* Landing playback has no toolbar; the selected story supplies its progress. */
.masthead nav{gap:28px;white-space:nowrap}.access-link{display:inline-flex;align-items:center;gap:8px;border:1px solid #c3ccd8;border-radius:6px;padding:10px 14px;font-size:13px}.access-link svg{width:15px;height:15px}.access-link:hover{background:#fff;text-decoration:none;border-color:#78889b}
.film-selection{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:540px;max-width:calc(100% - 40px);gap:4px;background:#e9eef5;padding:4px;border-radius:8px;margin:4px 0 17px}
.film-selection button{position:relative;min-width:0;min-height:42px;padding:10px 14px;border:0;border-radius:5px;font-size:14px;font-weight:550;overflow:hidden;transition:background-color .18s,color .18s}
.film-selection button[aria-selected=true]{background:#fff;color:#075cba;box-shadow:0 2px 5px #15283c12}
.film-selection button[aria-selected=true]:after{content:'';position:absolute;height:2px;background:#0068df;bottom:0;left:0;width:var(--progress,0%)}
.film-selection button:hover{background:#f7f9fc}.film{position:relative}
.phone-slot[inert]{user-select:none}
@media(max-width:720px){.masthead{gap:12px}.masthead nav{gap:0}.access-link{padding:8px 10px;font-size:12px;gap:5px}.film-selection{gap:3px;margin-bottom:16px}.film-selection button{font-size:12px;min-height:46px;padding:8px 5px}.opening-copy{padding-bottom:13px}}
@media(max-width:370px){.masthead .wordmark{width:150px}.access-link{font-size:11px;padding:8px}.masthead{padding-inline:16px}}
@media(prefers-reduced-motion:reduce){.film-selection button{transition:none}.film-selection button:after{display:none}}
/* Keep the exact identity equally legible at both ends of the page. */
.masthead>a,.landing-footer>a:first-child{flex:none;display:block}
.masthead .wordmark,.landing-footer .wordmark{display:block;width:240px;max-width:none;height:auto;object-fit:contain}
.masthead nav{align-items:center}
/* Reserve the larger phone footprint; short screens scroll instead of shrinking it. */
.phone-slot{--scale:.95}
.screen .workspace-page{padding:14px 16px}
.screen .workspace-page>h1{font-size:24px;margin-bottom:8px}
.screen .workspace-page>p{margin-bottom:12px}
.screen .project-widget{padding:12px}
.screen .project-widget>h2{font-size:18px;margin-bottom:6px}
.screen .project-widget>p{margin-bottom:8px}
.screen .workspace-filters{margin:10px 0}
.screen .task-row{padding:8px 0}
.screen .task-row h3{font-size:14px;margin-bottom:3px}
.screen .task-row p{margin-bottom:3px}
@media(max-width:720px){.phone-slot{--scale:.88}.masthead{padding-inline:16px;flex-wrap:wrap}.masthead nav{margin-left:auto}}
@media(max-width:370px){.phone-slot{--scale:.82}.masthead{flex-wrap:wrap;gap:10px}.masthead nav{margin-left:auto}}

@font-face {
  font-family: LandingSans;
  src: url('assets/instrument-sans-variable.woff2') format('woff2'), url('assets/instrument-sans-variable.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
body {font-family: LandingSans, Vault, Arial, sans-serif}
.opening-copy h1 {font-family: LandingSans, Arial, sans-serif; font-weight: 650}
.category {font-weight: 500}
.lead {max-width: 640px}
.story-details h2, .section-heading h2, .language-band h2, .getting-started>h2 {
  font-family: LandingSans, Arial, sans-serif;
  font-weight: 600;
}
.section-heading h2, .language-band h2, .getting-started>h2 {
  font-size: 42px;
  line-height: 1.14;
}
.section-heading h2 em, .language-band h2 em, .getting-started>h2 em, .business-intro h2 em {
  font-family: Alpera, Georgia, serif;
  font-weight: 400;
}
.benefits {padding-block: 88px 96px}
.benefit-list {gap: 42px}
.benefit-list h3 {font-size: 23px; font-weight: 550}
.benefit-list article {border-top-color: #b9bcc2; padding-top: 25px}
.text-action .arrow-right, .business-contact .arrow-right {transition: transform .2s}
.text-action:hover .arrow-right, .business-contact:hover .arrow-right {transform: translateX(4px) rotate(90deg)}
.language-band {background: #f4f7fb; padding-block: 88px}
.language-exchange {gap: 18px; align-self: center; width: 100%}
.language-exchange p {box-shadow: 0 5px 16px #142c4910}
.film-selection {position: relative; isolation: isolate}
.selection-cursor {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 16px) / 3);
  border-radius: 5px;
  background: white;
  box-shadow: 0 2px 5px #15283c12;
  transform: translateX(calc(var(--selected-index, 0) * (100% + 4px)));
  transition: transform .32s cubic-bezier(.16,1,.3,1);
  pointer-events: none;
}
.film-selection button {z-index: 1}
.film-selection button[aria-selected=true] {background: transparent; box-shadow: none}
.film-selection button:hover {background: #ffffff55}
.business-band {background: #f5f5f5; color: #202124; padding: 92px 24px; scroll-margin-top: 20px}
.business-inner {max-width: 1112px; margin: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 88px}
.business-intro h2 {font: 600 44px/1.12 LandingSans, Arial, sans-serif; text-wrap: balance; margin: 0 0 28px}
.business-intro p {font-size: 17px; line-height: 1.65; color: #51545a; max-width: 470px; margin: 0 0 18px}
.business-contact {display: inline-flex; align-items: center; gap: 13px; min-height: 44px; margin-top: 12px; font-weight: 600; font-size: 15px}
.business-contact svg {width: 19px; height: 19px}
.deployment-options {min-width: 0; align-self: start}
.deployment-tabs {display: flex; gap: 28px; border-bottom: 1px solid #c9cbd0; margin-bottom: 28px}
.deployment-tabs button {background: transparent; color: #51545a; padding: 14px 0; border: 0; border-bottom: 2px solid transparent; font-size: 15px; font-weight: 550; min-height: 48px}
.deployment-tabs button[aria-selected=true] {color: #202124; border-bottom-color: currentColor}
.deployment-tabs button:hover {color: #000}
.deployment-panels {display: grid; margin-bottom: 28px}
.deployment-panels>[role=tabpanel] {grid-area: 1/1; min-width: 0}
/* Retain both intrinsic heights so switching audiences cannot shift the next section. */
.deployment-panels>[hidden] {display: block; visibility: hidden; pointer-events: none}
.deployment-panels h3 {font-size: 25px; line-height: 1.25; font-weight: 550; margin: 0 0 16px; text-wrap: balance}
.deployment-panels p, .deployment-detail p {font-size: 16px; line-height: 1.65; color: #51545a; margin: 0 0 18px}
.deployment-panels ul {list-style: none; padding: 0; margin: 25px 0 0}
.deployment-panels li {font-size: 14px; padding: 12px 0; border-top: 1px solid #c9cbd0}
.deployment-detail {border-top: 1px solid #c9cbd0}
.deployment-detail summary {display: flex; justify-content: space-between; align-items: center; gap: 18px; cursor: pointer; list-style: none; font-size: 15px; font-weight: 550; min-height: 62px; padding: 14px 0}
.deployment-detail summary::-webkit-details-marker {display: none}
.deployment-detail summary svg {width: 18px; height: 18px; transition: transform .2s}
.deployment-detail[open] summary svg {transform: rotate(45deg)}
.deployment-detail p {font-size: 14px; padding-bottom: 12px}
.deployment-detail summary:focus-visible {outline: 2px solid #202124; outline-offset: 4px}
.business-band :is(a, button):focus-visible {outline-color: #202124}
.business-band ::selection {background: #202124; color: #fff}
.getting-started {padding-block: 95px}
@media(max-width:900px) {
  .business-inner {gap: 42px}
  .business-intro h2 {font-size: 36px}
  .section-heading {gap: 42px}
}
@media(max-width:720px) {
  .selection-cursor {width: calc((100% - 14px) / 3); transform: translateX(calc(var(--selected-index, 0) * (100% + 3px)))}
  .lead {max-width: 340px}
  .benefits {padding-block: 54px 60px}
  .section-heading h2, .language-band h2, .getting-started>h2 {font-size: 32px}
  .benefit-list h3 {font-size: 22px}
  .language-band {padding-block: 56px}
  .business-band {padding: 58px 24px}
  .business-inner {grid-template-columns: minmax(0,1fr); gap: 32px}
  .business-intro h2 {font-size: 34px}
  .business-intro p {font-size: 16px}
  .deployment-tabs {gap: 24px}
  .deployment-tabs button {font-size: 14px}
  .deployment-panels h3 {font-size: 24px}
  .deployment-detail summary {font-size: 14px}
  .getting-started {padding-block: 60px}
}
@media(prefers-reduced-motion:reduce) {
  html {scroll-behavior: auto}
  .selection-cursor, .text-action .arrow-right, .business-contact .arrow-right, .deployment-detail summary svg {transition: none}
}

/* Marketing actions are charcoal; native Messages retains its own blue. */
.access-link, .business-contact, .landing-footer>a:last-child, .primary-action {
  background: #202124;
  color: #fff;
  border: 1px solid #202124;
  border-radius: 6px;
}
.business-contact, .landing-footer>a:last-child {padding: 11px 16px; min-height: 44px}
.access-link:hover, .business-contact:hover, .landing-footer>a:last-child:hover, .primary-action:hover {
  background: #393b40;
  color: #fff;
  border-color: #393b40;
  text-decoration: none;
}
.access-link:focus-visible, .business-contact:focus-visible, .landing-footer>a:last-child:focus-visible, .primary-action:focus-visible {outline-color: #202124}
.capabilities {max-width: 1160px; margin: auto; padding: 72px 24px 88px; border-top: 1px solid #d9dde3; display: grid; grid-template-columns: 1fr 1fr; gap: 80px}
.capabilities-heading h2 {font: 600 42px/1.14 LandingSans, Arial, sans-serif; margin: 0 0 24px; text-wrap: balance}
.capabilities-heading h2 em {font-family: Alpera, Georgia, serif; font-weight: 400}
.capabilities-heading p {font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 420px}
.capability-list {margin: 0; min-width: 0}
.capability-list>div {padding: 22px 0; border-top: 1px solid #d9dde3}
.capability-list>div:first-child {padding-top: 0; border-top: 0}
.capability-list dt {font-size: 21px; font-weight: 550; line-height: 1.3; margin-bottom: 10px}
.capability-list dd {margin: 0; font-size: 16px; line-height: 1.65; color: var(--muted)}
/* Reading rules connect the purchase, coordination and tracking sequences. */
.reading-title {display:block}
.benefit-list article, .steps article, .capability-list>div {position:relative}
.steps article {padding-top:18px}
.reading-rule {position:absolute;top:0;left:0;right:0;height:1px;background:#41464d;opacity:1;transform-origin:left center;pointer-events:none}
.capability-list>div:first-child .reading-rule {display:none}
@media(min-width:901px) and (min-height:650px) {
  .capabilities {align-items:start}
  .capabilities-heading {position:sticky;top:64px}
  .capability-list>div {padding-block:32px}
  .capability-list>div:first-child {padding-top:0}
}
@media(prefers-reduced-motion:reduce) {.capabilities-heading {position:static}}
@media(max-width:900px) {.capabilities {gap: 42px}}
@media(max-width:720px) {
  .capabilities {grid-template-columns: minmax(0,1fr); gap: 28px; padding: 50px 24px}
  .capabilities-heading h2 {font-size: 32px}
  .capabilities-heading p {font-size: 16px; margin-bottom: 0}
}

/* A visible pause for everything that moves: the looping demo and the scenes below it.
   The player keeps writing its label as text; the icon follows that label. */
.motion-toggle {position: absolute; z-index: 3; bottom: 18px; left: calc(50% + 188px); width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: #ffffffd9; box-shadow: 0 1px 4px #15283c24; color: #15171a; font-size: 0; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px)}
/* The label text stays in the button for the player, so the icon is pinned to the true centre
   rather than laid out beside that (invisible) line. */
.motion-toggle:before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-sizing: border-box; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor}
/* A triangle's visual centre sits right of its box centre, so it is nudged to look centred. */
.motion-toggle[aria-label="Resume animations"]:before {width: 0; height: 0; transform: translate(-38%, -50%); border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent currentColor}
.motion-toggle:hover {background: #fff}
.motion-toggle:focus-visible {outline: 2px solid #202124; outline-offset: 3px}
@media(max-width:720px) {.motion-toggle {left: auto; right: 8px; bottom: 10px; width: 34px; height: 34px}}