:root {
  --bg:#f4f7fb;
  --paper:#fff;
  --ink:#172d45;
  --muted:#75839a;
  --blue:#2b609b;
  --line:#d9e2ef;
  --blue-tint:#eaf1f9;
  --gold:#eaf3fd;
  --sans:'DM Sans','Noto Sans TC',sans-serif}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px}
body {
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button,input {
  font:inherit}
button,a,input,summary {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible {
  outline:3px solid #82b2e5;
  outline-offset:5px}
button:disabled {
  cursor:wait}
h1,h2,h3,p {
  margin:0}
.container {
  width:min(1160px,calc(100% - 96px));
  margin:auto}
.site-header {
  height:90px;
  border-bottom:1px solid var(--line);
  background:#f4f7fbf5}
.header-inner {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between}
.brand {
  display:flex;
  align-items:center;
  gap:12px}
.brand-title {
  font-size:21px;
  font-weight:800;
  letter-spacing:1.5px;
  display:flex;
  align-items:center;
  gap:14px}
.brand-title>span {
  font-size:12px;
  font-weight:500;
  letter-spacing:1.1px;
  padding-left:14px;
  border-left:1px solid #ced9e8;
  color:#687a91}
nav {
  display:flex;
  align-items:center;
  gap:32px;
  font-size:13px}
nav>a {
  transition:color .2s}
nav>a:hover {
  color:#3978bb}
.nav-demo {
  display:flex;
  gap:9px;
  align-items:center;
  border:1px solid #d0dceb;
  padding:10px 16px;
  border-radius:5px}
.tiny-play {
  width:0;
  height:0;
  border-left:7px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  display:inline-block}
.hero {
  padding-top:69px;
  padding-bottom:61px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:45px}
.eyebrow {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:600;
  color:#617995}
.eyebrow>span {
  width:6px;
  height:6px;
  background:#457fb9;
  border-radius:50%}
.eyebrow i {
  font-style:normal;
  color:#bdcadd;
  margin:0 4px}
.hero h1 {
  font-size:59px;
  line-height:1.26;
  letter-spacing:-2.5px;
  font-weight:800;
  margin:22px 0 22px}
.hero h1>span:not(.title-dot) {
  color:var(--blue)}
.title-dot {
  color:var(--blue)}
.hero-lead {
  font-size:19px;
  font-weight:600;
  letter-spacing:.3px}
.hero-description {
  color:#718096;
  font-size:14px;
  line-height:1.9;
  margin-top:14px}
.hero-actions {
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:29px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:12px;
  font-weight:600;
  padding:15px 20px;
  border-radius:5px;
  transition:transform .2s,background .2s}
.button-primary {
  background:var(--blue);
  color:white;
  gap:11px}
.button-primary:hover {
  background:#214e82;
  transform:translateY(-2px)}
.button-primary .arrow {
  font-size:18px;
  padding-left:16px;
  line-height:14px}
.button-text {
  padding:15px 8px;
  color:#526987}
.button-text span {
  padding-left:10px}
.hero-caption {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:#8b99ac;
  margin-top:24px}
.small-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#437fb5}
.caption-separator {
  margin:0 3px}
.hero-visual {
  position:relative;
  align-self:stretch;
  min-height:375px;
  background:#eff3f9;
  border:1px solid #dfe7f1;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  align-items:center}
.wave-image {
  width:100%;
  height:100%;
  object-fit:cover}
.visual-kicker {
  position:absolute;
  left:27px;
  top:24px;
  color:#8a9eb7;
  font-size:9px;
  letter-spacing:1.4px;
  z-index:1}
.voice-note {
  position:absolute;
  bottom:66px;
  left:27px;
  right:27px;
  background:#ffffffed;
  backdrop-filter:blur(10px);
  border:1px solid #dce6f2;
  display:flex;
  align-items:center;
  gap:13px;
  border-radius:7px;
  padding:16px 17px;
  box-shadow:0 7px 24px #193b6a08}
.note-icon {
  width:34px;
  height:34px;
  background:#e4edf7;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px}
.note-icon i {
  background:#306fa6;
  width:2px;
  border-radius:2px;
  height:10px}
.note-icon i:nth-child(2),.note-icon i:nth-child(4) {
  height:16px}
.note-icon i:nth-child(3) {
  height:22px}
.voice-note strong {
  font-size:14px;
  letter-spacing:1.1px;
  display:block}
.voice-note div>span {
  color:#8895a8;
  font-size:10px;
  display:block;
  margin-top:4px}
.ai-tag {
  margin-left:auto;
  font-size:9px;
  letter-spacing:1px;
  color:#4e7eae;
  background:#edf3f9;
  border:1px solid #dbe6f1;
  padding:6px 8px;
  border-radius:3px}
.visual-footnote {
  position:absolute;
  bottom:26px;
  left:27px;
  right:27px;
  display:flex;
  justify-content:space-between;
  color:#7187a0;
  font-size:10px}
.visual-footnote>span:last-child {
  font-family:'DM Sans',sans-serif;
  letter-spacing:1.5px}
.overview {
  display:flex;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:26px 0;
  align-items:center;
  justify-content:space-between;
  gap:30px}
.overview>div:first-child strong {
  font-size:13px;
  display:block;
  margin-top:7px;
  font-weight:500}
.overview-label {
  font-size:9px;
  color:#8795a9;
  letter-spacing:1.2px}
.overview-item {
  display:flex;
  align-items:center;
  gap:13px;
  border-left:1px solid #d9e1ec;
  padding-left:35px}
.overview-number {
  font-size:37px;
  line-height:1;
  color:#2b609b;
  font-weight:500;
  letter-spacing:-1.5px}
.overview-item>span:nth-child(2) {
  font-size:10px;
  color:#8493a8;
  line-height:1.8}
.overview-item b {
  font-weight:500;
  font-size:11px;
  color:#556b88}
.overview-item:nth-child(3),.overview-item.last {
  flex-direction:column;
  gap:6px;
  align-items:flex-start}
.overview-date {
  font-size:20px;
  letter-spacing:-.3px}
.overview-date span {
  color:#8c9bb0;
  font-size:16px;
  padding:0 4px}
.overview-flow {
  font-size:12px!important;
  color:#4c6381!important;
  letter-spacing:1px}
.overview-flow i {
  font-style:normal;
  color:#a6b8d1;
  padding:0 5px}
.section {
  padding-top:70px;
  padding-bottom:63px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:31px}
.section-eyebrow {
  font-size:9px;
  letter-spacing:1.3px;
  margin-bottom:14px;
  color:#667d98}
.section-heading h2,.demo-copy h2 {
  font-size:33px;
  line-height:1.5;
  letter-spacing:-1px;
  font-weight:700}
.section-heading h2>span,.demo-copy h2>span {
  color:#477eb6}
.section-heading>p {
  font-size:12px;
  line-height:1.9;
  color:#8392a8;
  padding-bottom:3px}
.task-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px}
.task-card {
  border:1px solid #dbe3ed;
  background:white;
  border-radius:8px;
  padding:28px 27px 24px;
  transition:border-color .2s,transform .2s}
.task-card:hover {
  border-color:#6e9acb;
  transform:translateY(-3px)}
.task-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:25px}
.task-number {
  font-family:'DM Sans',sans-serif;
  font-size:32px;
  font-weight:400;
  letter-spacing:-1px;
  color:#9aabc1}
.task-symbol {
  width:25px;
  height:25px;
  stroke:#8ea2bd;
  stroke-width:1.6}
.symbol-wave {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px}
.symbol-wave i {
  width:1.5px;
  height:10px;
  background:#8ea2bd;
  border-radius:1px}
.symbol-wave i:nth-child(2),.symbol-wave i:nth-child(4) {
  height:18px}
.symbol-wave i:nth-child(3) {
  height:25px}
.task-label {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#91a0b5;
  font-size:10px;
  letter-spacing:1px}
.badge {
  font-size:10px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:4px;
  padding:5px 9px;
  letter-spacing:.4px}
.badge-blue {
  background:#eaf2fa;
  border:1px solid #d5e3f4;
  color:#386f9e}
.badge-yellow {
  background:#f0f5fc;
  border:1px solid #d4e2f3;
  color:#537baa}
.task-card h3 {
  font-size:23px;
  font-weight:700;
  letter-spacing:-.7px;
  margin-top:11px}
.task-date {
  font-size:17px;
  margin:13px 0 27px;
  color:#586c87;
  font-family:'DM Sans',sans-serif}
.task-date span {
  padding:0 5px;
  color:#aebcce}
dl {
  margin:0}
dl>div {
  margin-bottom:22px}
dt {
  font-size:11px;
  color:#96a4b7;
  margin-bottom:7px}
dd {
  margin:0;
  font-size:12px;
  color:#60758f;
  line-height:1.8}
.duration {
  margin-bottom:24px}
.duration dd {
  font-size:12px}
.duration strong {
  font-family:'DM Sans',sans-serif;
  font-size:23px;
  font-weight:500;
  margin:0 3px}
.task-note {
  border-top:1px solid #e1e7f0;
  padding-top:17px;
  min-height:105px}
.note-label {
  color:#a0acc0;
  font-size:9px;
  letter-spacing:1px}
.task-note p {
  font-size:11px;
  line-height:1.9;
  color:#75849a;
  margin-top:8px}
.roadmap-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:21px;
  font-size:10px;
  color:#909caf}
.roadmap-footer>span {
  display:flex;
  align-items:center;
  gap:7px}
.roadmap-footer a {
  color:#4a78ad}
.roadmap-footer a>span {
  margin-left:8px}
.demo-section {
  background:#eef2f8;
  border-top:1px solid #e2e8f1;
  border-bottom:1px solid #e2e8f1;
  padding:64px 0}
.demo-layout {
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:68px;
  align-items:center}
.demo-copy h2 {
  font-size:32px;
  line-height:1.5}
.demo-copy>p:not(.sample-note) {
  margin-top:17px;
  font-size:13px;
  color:#7f8da2;
  line-height:1.9}
.demo-topics {
  display:flex;
  gap:7px;
  margin-top:21px}
.demo-topics>span {
  font-size:10px;
  padding:5px 9px;
  border:1px solid #dce4ef;
  border-radius:4px;
  color:#788aa2}
.sample-note {
  font-size:10px;
  color:#9ba7b9;
  line-height:1.8;
  margin-top:29px}
.player-card {
  background:white;
  border:1px solid #dfe6ef;
  border-radius:10px;
  box-shadow:0 5px 24px #193b6a04;
  padding:28px 30px 0;
  min-width:0}
.player-heading {
  display:flex;
  justify-content:space-between;
  align-items:center}
.player-heading>span:last-child {
  font-size:9px;
  letter-spacing:1px;
  color:#9baac0}
.player-card>h3 {
  font-size:19px;
  font-weight:600;
  margin-top:21px}
.player-description {
  font-size:11px;
  color:#96a5bb;
  margin-top:7px}
.player-wave {
  height:73px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:3px;
  margin:20px 0 10px;
  overflow:hidden}
.player-wave>i {
  width:3px;
  flex:none;
  height:var(--height);
  border-radius:3px;
  background:#a9c0df;
  transition:background .3s}
.player-wave>i:nth-child(3n) {
  background:#4c81ba}
.player-wave.playing>i {
  animation:pulse-wave 1s ease-in-out infinite alternate;
  animation-delay:var(--delay)}
@keyframes pulse-wave {
  to {
  transform:scaleY(.55)}
}
audio {
  display:block;
  width:100%;
  margin:14px 0 24px}
.custom-player[hidden] {
  display:none}
.progress-row {
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'DM Sans',sans-serif;
  font-size:9px;
  color:#95a3b8}
.progress-row>span {
  width:26px}
input[type=range] {
  flex:1;
  width:0;
  accent-color:#316da3;
  height:3px;
  margin:0;
  cursor:pointer}
.player-controls {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  position:relative;
  margin:16px 0 10px}
.play-button {
  width:49px;
  height:49px;
  border-radius:50%;
  border:0;
  background:#2b609b;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 3px 8px #2b609b15;
  transition:background .2s,transform .2s}
.play-button:hover {
  background:#214e82;
  transform:scale(1.04)}
.play-glyph {
  height:0;
  width:0;
  border-left:10px solid white;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  margin-left:3px}
.play-button.is-playing .play-glyph {
  border:0;
  height:14px;
  width:11px;
  margin-left:0;
  background:linear-gradient(to right,white 0 33%,transparent 33% 66%,white 66%)}
.skip-button {
  position:relative;
  background:none;
  border:0;
  color:#9baac0;
  width:27px;
  height:32px;
  padding:0}
.skip-button>span {
  font-size:32px;
  line-height:1}
.skip-button>small {
  font-family:'DM Sans',sans-serif;
  font-size:8px;
  position:absolute;
  top:15px;
  left:9px}
.mute-button {
  position:absolute;
  right:0;
  top:15px;
  border:0;
  background:none;
  color:#96a6bd;
  padding:0}
.mute-button.is-muted {
  color:#ba765f}
.player-status {
  text-align:center;
  color:#96a5b8;
  font-size:9px;
  margin:12px 0 23px}
.transcript {
  border-top:1px solid #e8edf4}
.transcript summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 0;
  color:#7889a0;
  font-size:10px;
  cursor:pointer;
  list-style:none}
.transcript summary::-webkit-details-marker {
  display:none}
.transcript[open] summary>span {
  transform:rotate(45deg)}
.transcript-content {
  border-top:1px solid #e8edf4;
  max-height:320px;
  overflow:auto;
  padding:15px 0 22px;
  font-size:11px;
  line-height:1.95;
  color:#6d7f97}
.transcript-content p {
  margin-bottom:14px}
.transcript-content p:last-child {
  margin-bottom:0}
.transcript-content b {
  display:block;
  color:#376f9f;
  font-size:10px;
  margin-bottom:4px}
.transcript-disclaimer {
  color:#9ca9bb;
  font-size:9px}
.principles {
  padding-top:64px;
  padding-bottom:55px}
.principle-list {
  border-top:1px solid var(--line)}
.principle {
  display:grid;
  grid-template-columns:65px 1fr 1.55fr auto;
  gap:20px;
  align-items:center;
  padding:27px 0;
  border-bottom:1px solid var(--line)}
.principle-index {
  color:#9aa9bf;
  font-size:12px;
  letter-spacing:1px}
.principle h3 {
  font-size:16px;
  font-weight:600}
.principle p {
  font-size:11px;
  color:#8795aa;
  line-height:1.9}
.principle-tag {
  font-size:10px;
  border:1px solid #dce4ef;
  border-radius:4px;
  padding:6px 10px;
  color:#6e85a4}
.deadline {
  background:#e9f1fa;
  border-color:#ccddf1;
  color:#416f9e}
.closing {
  background:#e7edf5;
  border-radius:8px;
  display:flex;
  gap:26px;
  align-items:center;
  padding:28px 31px;
  margin-top:0;
  margin-bottom:37px}
.closing-mark {
  display:flex;
  align-items:center;
  gap:5px;
  width:44px;
  height:40px}
.closing-mark i {
  width:3px;
  background:#507cad;
  height:13px;
  border-radius:3px}
.closing-mark i:nth-child(2),.closing-mark i:nth-child(4) {
  height:25px}
.closing-mark i:nth-child(3) {
  height:36px}
.closing p {
  font-size:8px;
  letter-spacing:1.4px;
  color:#7f9ab9;
  margin-bottom:8px}
.closing h2 {
  font-size:21px;
  font-weight:600;
  letter-spacing:.2px}
.closing>a {
  margin-left:auto;
  border:1px solid #bdcde2;
  color:#6386af;
  display:flex;
  align-items:center;
  justify-content:center;
  width:37px;
  height:37px;
  border-radius:50%}
.site-footer {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding-bottom:28px;
  gap:20px}
.site-footer strong {
  font-size:13px;
  font-weight:700;
  letter-spacing:1px}
.site-footer strong span {
  font-size:10px;
  font-weight:400;
  color:#8795a8;
  margin-left:8px;
  letter-spacing:0}
.site-footer p {
  font-size:9px;
  color:#9ba8ba;
  margin-top:9px;
  line-height:1.8}
.site-footer>span {
  font-size:8px;
  letter-spacing:1.4px;
  white-space:nowrap;
  color:#96a5b8}
.skip-link {
  position:absolute;
  top:-60px;
  left:20px;
  background:#2b609b;
  color:white;
  padding:12px;
  z-index:10}
.skip-link:focus {
  top:10px}
@media(min-width:1400px) {
  .hero h1 {
  font-size:64px}
.hero {
  padding-top:78px;
  padding-bottom:70px}
}
@media(max-width:1050px) {
  .container {
  width:calc(100% - 64px)}
.hero {
  gap:25px}
.hero h1 {
  font-size:48px}
.hero-lead {
  font-size:17px}
.hero-visual {
  min-height:340px}
.overview {
  gap:18px}
.overview-item {
  padding-left:20px}
.overview>div:first-child strong {
  font-size:11px}
.overview-date {
  font-size:17px}
.task-card {
  padding:23px 21px}
.task-card h3 {
  font-size:21px}
.demo-layout {
  gap:42px}
.principle {
  grid-template-columns:45px 1fr 1.4fr auto;
  gap:12px}
}
@media(max-width:760px) {
  html {
  scroll-padding-top:24px}
.container {
  width:calc(100% - 40px)}
.site-header {
  height:75px}
.brand-title {
  font-size:19px}
.brand-title>span {
  font-size:10px;
  max-width:66px;
  border:0;
  padding:0;
  letter-spacing:0}
.brand {
  gap:8px}
.brand img {
  width:31px;
  height:31px}
.brand-title {
  gap:9px}
nav {
  gap:0}
nav>a:not(.nav-demo) {
  display:none}
.nav-demo {
  font-size:10px;
  padding:8px 10px}
.hero {
  grid-template-columns:1fr;
  padding-top:38px;
  padding-bottom:36px;
  gap:30px}
.hero h1 {
  font-size:49px;
  margin-top:20px;
  letter-spacing:-2px}
.hero-lead {
  font-size:17px}
.hero-description {
  font-size:12px}
.hero-actions {
  gap:12px;
  margin-top:23px}
.button {
  font-size:11px;
  padding:14px 16px}
.button-text {
  padding-left:7px;
  padding-right:7px}
.button-primary .arrow {
  padding-left:6px}
.hero-caption {
  font-size:9px;
  margin-top:19px}
.hero-visual {
  min-height:280px;
  max-height:315px;
  aspect-ratio:1.5}
.visual-kicker {
  font-size:8px;
  top:21px;
  left:22px}
.voice-note {
  bottom:54px;
  left:21px;
  right:21px;
  padding:12px 13px}
.visual-footnote {
  left:22px;
  right:22px;
  bottom:21px;
  font-size:9px}
.overview {
  flex-wrap:wrap;
  gap:22px 0;
  justify-content:flex-start;
  padding:23px 0}
.overview>div:first-child {
  width:100%}
.overview-item {
  border:0;
  padding-left:0;
  width:45%;
  gap:10px}
.overview-item:nth-child(3) {
  border-left:1px solid #d9e2ef;
  padding-left:20px;
  width:55%}
.overview-item.last {
  display:none}
.overview-number {
  font-size:32px}
.overview-date {
  font-size:20px}
.section {
  padding-top:43px;
  padding-bottom:39px}
.section-heading {
  align-items:flex-start;
  gap:15px;
  margin-bottom:24px}
.section-heading h2 {
  font-size:28px}
.section-heading>p {
  font-size:10px;
  line-height:1.85;
  margin-top:26px;
  max-width:113px}
.section-eyebrow {
  font-size:8px;
  letter-spacing:.9px;
  margin-bottom:10px}
.task-grid {
  grid-template-columns:1fr;
  gap:15px}
.task-card {
  padding:25px 25px 23px}
.task-top {
  margin-bottom:16px}
.task-card h3 {
  font-size:25px;
  margin-top:9px}
.task-date {
  margin:11px 0 24px}
.task-label {
  font-size:10px}
.task-number {
  font-size:30px}
dl {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px 10px}
dl>div {
  margin:0}
dl>div:nth-child(2) {
  grid-column:1/-1;
  grid-row:2}
dl>div:nth-child(3) {
  grid-row:1;
  grid-column:2}
.duration {
  text-align:right}
.duration dd {
  line-height:1.15}
dt {
  font-size:11px}
dd {
  font-size:13px}
.task-note {
  margin-top:24px;
  min-height:auto;
  padding-top:16px}
.task-note p {
  font-size:12px}
.roadmap-footer {
  gap:15px;
  font-size:9px;
  align-items:flex-start;
  line-height:1.7}
.roadmap-footer>span {
  max-width:230px;
  align-items:center}
.roadmap-footer a {
  white-space:nowrap}
.demo-section {
  padding:40px 0}
.demo-layout {
  grid-template-columns:1fr;
  gap:27px}
.demo-copy h2 {
  font-size:29px}
.demo-copy>p:not(.sample-note) {
  font-size:12px;
  margin-top:12px}
.demo-topics {
  margin-top:16px}
.sample-note {
  margin-top:18px;
  font-size:9px}
.sample-note br {
  display:none}
.player-card {
  padding:24px 23px 0}
.player-card>h3 {
  font-size:19px}
.player-wave {
  gap:3px;
  margin-top:15px;
  height:69px}
.player-wave i {
  width:3px}
.principles {
  padding-top:42px;
  padding-bottom:35px}
.principle {
  grid-template-columns:33px 1fr auto;
  gap:10px;
  padding:22px 0}
.principle-index {
  font-size:11px;
  align-self:start;
  padding-top:3px}
.principle h3 {
  font-size:14px}
.principle p {
  grid-column:2/-1;
  grid-row:2;
  font-size:11px}
.principle-tag {
  font-size:8px;
  padding:5px 7px}
.desktop-break {
  display:none}
.closing {
  gap:17px;
  padding:24px 20px;
  margin-bottom:28px}
.closing p {
  font-size:6px;
  letter-spacing:.9px}
.closing h2 {
  font-size:15px}
.closing-mark {
  gap:4px;
  min-width:27px;
  width:27px}
.closing>a {
  width:28px;
  height:28px;
  flex:none}
.site-footer {
  display:block;
  padding-bottom:25px}
.site-footer>span {
  display:block;
  margin-top:18px;
  font-size:7px}
.site-footer p {
  font-size:8px}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
  transition:none!important}
}


audio[hidden] {
  display:none}


@media (max-width: 360px) {
  .hero h1 {
    font-size: 42px;
  }
}

.wave-image {
  filter: hue-rotate(42deg) saturate(1.05);
}

.wave-image {
  position: absolute;
  inset: 0;
}

@media (max-width: 760px) {
  .hero-visual {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
  }
}


/* Readability pass: larger type and stronger contrast */
:root {
  --bg: #f3f6fb;
  --paper: #ffffff;
  --ink: #132a47;
  --muted: #465d78;
  --blue: #245f9d;
  --line: #c7d5e6;
  --blue-tint: #e7eff9;
}
body { font-size: 17px; color: #172b45; line-height: 1.65; }
nav { font-size: 15px; color: #1b3556; }
.eyebrow { color: #385879; font-size: 11px; font-weight: 700; }
.hero h1 { color: #142b48; }
.hero-lead { color: #1b3556; font-size: 22px; }
.hero-description { color: #405772; font-size: 16px; line-height: 1.95; }
.button { font-size: 14px; }
.hero-caption { color: #405772; font-size: 12px; }
.visual-kicker { color: #203c60; background: #ffffffed; padding: 8px 10px; border: 1px solid #d0dceb; border-radius: 4px; font-size: 11px; font-weight: 700; }
.voice-note { background: #ffffff; border-color: #b9cce1; }
.voice-note strong { color: #142d4d; font-size: 16px; }
.voice-note div > span { color: #405772; font-size: 12px; }
.ai-tag { color: #214f82; background: #e8f1fb; border-color: #c3d5e9; font-size: 11px; font-weight: 700; }
.visual-footnote { color: #203c60; background: #ffffffed; border: 1px solid #d0dceb; border-radius: 4px; padding: 8px 10px; font-size: 12px; font-weight: 600; }
.overview-label { color: #536a84; font-size: 11px; }
.overview > div:first-child strong { color: #203854; font-size: 15px; }
.overview-item > span:nth-child(2) { color: #526985; font-size: 12px; }
.overview-item b { color: #203854; font-size: 13px; }
.overview-date { color: #203854; font-size: 22px; font-weight: 600; }
.overview-flow { color: #304c6d !important; font-size: 14px !important; }
.section-heading h2, .demo-copy h2 { color: #142b48; font-size: 38px; }
.section-heading > p { color: #405772; font-size: 15px; }
.task-card { border-color: #cad6e4; }
.task-number { color: #617a98; font-size: 36px; }
.task-symbol { stroke: #3c6591; }
.symbol-wave i { background: #3c6591; }
.task-label { color: #516985; font-size: 13px; font-weight: 600; }
.badge { font-size: 12px; font-weight: 700; }
.badge-blue { background: #e7f0fb; border-color: #bdd1e8; color: #194d82; }
.badge-yellow { background: #fff4d8; border-color: #e5d39e; color: #654d13; }
.task-card h3 { color: #132a47; font-size: 26px; }
.task-date { color: #344f70; font-size: 19px; }
dt { color: #4b6380; font-size: 13px; font-weight: 600; }
dd { color: #233f60; font-size: 15px; line-height: 1.85; }
.duration dd { color: #203c5e; font-size: 14px; }
.duration strong { color: #153e6a; font-size: 25px; }
.note-label { color: #49617d; font-size: 11px; font-weight: 700; }
.task-note { border-color: #d4dfeb; }
.task-note p { color: #304b6b; font-size: 14px; line-height: 1.9; }
.roadmap-footer { color: #405974; font-size: 12px; }
.roadmap-footer a { color: #164d83; font-weight: 700; }
.demo-copy > p:not(.sample-note) { color: #405772; font-size: 16px; }
.demo-topics > span { color: #294a6c; border-color: #c7d6e7; font-size: 12px; }
.sample-note { color: #405772; font-size: 12px; }
.player-card { border-color: #c9d6e5; }
.player-heading > span:last-child { color: #4c627d; font-size: 11px; }
.player-card > h3 { color: #142d4d; font-size: 22px; }
.player-description { color: #4d6380; font-size: 13px; }
.player-wave > i { background: #6491c2; }
.player-wave > i:nth-child(3n) { background: #245f9d; }
.progress-row { color: #405772; font-size: 11px; }
.play-button { background: #245f9d; }
.player-status { color: #405772; font-size: 12px; }
.transcript summary { color: #214f82; font-size: 13px; font-weight: 700; }
.transcript-content { color: #263f5e; font-size: 13px; line-height: 1.95; }
.transcript-content b { color: #174b80; font-size: 12px; }
.transcript-disclaimer { color: #536983; font-size: 11px; }
.principle-index { color: #4c6480; font-size: 13px; }
.principle h3 { color: #172f4e; font-size: 18px; }
.principle p { color: #405772; font-size: 14px; }
.principle-tag { color: #254b74; border-color: #c8d6e5; font-size: 12px; }
.deadline { color: #234c77; background: #e7eff8; border-color: #bfd0e2; }
.closing { background: #e7eef7; }
.closing p { color: #315e8d; font-size: 10px; }
.closing h2 { color: #142d4d; font-size: 23px; }
.closing > a { color: #245f9d; border-color: #9cb6d2; }
.site-footer strong { color: #172f4e; font-size: 15px; }
.site-footer strong span { color: #405772; font-size: 12px; }
.site-footer p { color: #405772; font-size: 12px; }
.site-footer > span { color: #405772; font-size: 10px; }
@media (max-width: 760px) {
  body { font-size: 16px; }
  nav { font-size: 13px; }
  .hero-lead { font-size: 20px; }
  .hero-description { font-size: 15px; }
  .hero-caption { font-size: 11px; }
  .overview-label { font-size: 10px; }
  .overview > div:first-child strong { font-size: 14px; }
  .section-heading h2, .demo-copy h2 { font-size: 31px; }
  .section-heading > p { color: #405772; font-size: 12px; }
  .task-card h3 { font-size: 25px; }
  dt { font-size: 12px; }
  dd { font-size: 14px; }
  .task-note p { font-size: 13px; }
  .demo-copy > p:not(.sample-note) { font-size: 15px; }
  .sample-note { font-size: 12px; }
  .principle h3 { font-size: 15px; }
  .principle p { font-size: 13px; }
  .closing h2 { font-size: 17px; }
  .site-footer p { font-size: 11px; }
}

/* Keep essential copy readable without zooming */
.hero-description, .demo-copy > p:not(.sample-note) { font-size: 18px; }
dd { font-size: 18px; }
dt { font-size: 14px; }
.task-note p, .principle p { font-size: 16px; }
.duration dd { font-size: 16px; }
.note-label, .task-label, .badge { font-size: 14px; }
.hero-caption, .sample-note, .player-description, .player-status { font-size: 14px; }
.player-heading > span:last-child, .progress-row { font-size: 13px; }
.transcript summary, .transcript-content { font-size: 15px; }
.transcript-content b, .transcript-disclaimer { font-size: 14px; }
.roadmap-footer { font-size: 14px; }
.principle-tag { font-size: 13px; }
.brand-title > span { color: #405772; font-size: 13px; }
@media (max-width: 760px) {
  .nav-demo { font-size: 13px; }
  .brand-title > span { font-size: 11px; }
  .section-heading { display: block; }
  .section-heading > p { font-size: 14px; max-width: none; margin-top: 10px; }
  .section-heading > p br { display: none; }
  .section-heading h2, .demo-copy h2 { font-size: 30px; }
  .hero-description, .demo-copy > p:not(.sample-note) { font-size: 17px; }
  dd { font-size: 16px; }
  .task-note p, .principle p { font-size: 15px; }
  .task-label, .badge, dt, .note-label { font-size: 13px; }
  .hero-caption { font-size: 12px; }
  .roadmap-footer { font-size: 12px; }
  .roadmap-footer > span { max-width: 65%; }
  .principle { grid-template-columns: 30px 1fr; }
  .principle h3 { font-size: 18px; }
  .principle p { grid-column: 2; grid-row: auto; }
  .principle-tag { grid-column: 2; justify-self: start; font-size: 13px; }
  .closing { gap: 12px; }
  .closing h2 { font-size: 16px; }
}

/* Authentic canvassing scene with explicit source and high-contrast labels */
.hero-visual { overflow: hidden; }
.canvass-image { filter: none; object-position: center 42%; }
.photo-overlay { position: absolute; left: 22px; right: 22px; bottom: 72px; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 13px 16px; background: #ffffff; border: 1px solid #b9cce1; border-radius: 6px; box-shadow: 0 6px 22px #193b6a20; }
.photo-overlay .small-dot { flex: none; width: 8px; height: 8px; }
.photo-overlay strong { display: block; color: #142d4d; font-size: 16px; }
.photo-overlay div > span { display: block; margin-top: 4px; color: #405772; font-size: 13px; }
.visual-footnote { z-index: 2; text-decoration: none; }
.visual-footnote:hover { border-color: #245f9d; }
@media (max-width: 760px) {
  .photo-overlay { left: 12px; right: 12px; bottom: 62px; padding: 9px 11px; gap: 9px; }
  .photo-overlay strong { font-size: 14px; }
  .photo-overlay div > span { font-size: 12px; }
  .visual-footnote { left: 12px; right: 12px; bottom: 13px; font-size: 10px; }
}

/* Illustration is displayed in full; labels never obscure people or hands */
.photo-visual {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-self: center;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  background: #ffffff;
  border-color: #c2d1e3;
}
.photo-visual .visual-kicker {
  position: static;
  align-self: flex-start;
  margin: 18px 18px 0;
  z-index: auto;
}
.photo-visual .canvass-image {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: none;
  margin-top: 12px;
}
.photo-visual .photo-overlay {
  position: static;
  margin: 16px 18px 0;
  box-shadow: none;
  flex: none;
}
.photo-visual .visual-footnote {
  position: static;
  margin: 12px 18px 18px;
  gap: 12px;
  flex-wrap: wrap;
  line-height: 1.8;
}
@media (max-width: 760px) {
  .photo-visual .visual-kicker { margin: 14px 14px 0; font-size: 12px; }
  .photo-visual .photo-overlay { margin: 12px 14px 0; }
  .photo-visual .visual-footnote { margin: 10px 14px 14px; font-size: 12px; gap: 4px; }
  .photo-visual .visual-footnote > span { display: block; width: 100%; }
}

.photo-visual { max-height: none; }



/* Tighten the demo columns so the center does not feel empty */
.demo-layout {
  grid-template-columns: minmax(0, .76fr) minmax(0, 1.24fr);
  gap: 20px;
}

/* Clear, visible playback motion synchronized to the audio playing state */
.player-wave {
  position: relative;
  border-radius: 12px;
  transition: background-color .25s ease, box-shadow .25s ease;
}
.player-wave.playing {
  background: linear-gradient(90deg, #f4f8fd 0%, #e7f0fb 50%, #f4f8fd 100%);
  box-shadow: inset 0 0 0 1px #d8e5f4;
}
.player-wave.playing > i {
  animation: waveform-live .62s cubic-bezier(.37, 0, .63, 1) infinite alternate;
  animation-delay: var(--delay);
  transform-origin: center;
  will-change: transform, opacity;
}
.player-wave.playing > i:nth-child(4n + 1) { animation-duration: .48s; }
.player-wave.playing > i:nth-child(4n + 2) { animation-duration: .71s; }
.player-wave.playing > i:nth-child(4n + 3) { animation-duration: .56s; }
@keyframes waveform-live {
  0% { transform: scaleY(.28); opacity: .68; }
  100% { transform: scaleY(1.18); opacity: 1; }
}
.play-button.is-playing {
  animation: play-button-pulse 1.35s ease-out infinite;
}
@keyframes play-button-pulse {
  0% { box-shadow: 0 0 0 0 #245f9d55, 0 3px 8px #245f9d20; }
  70% { box-shadow: 0 0 0 12px #245f9d00, 0 3px 8px #245f9d20; }
  100% { box-shadow: 0 0 0 0 #245f9d00, 0 3px 8px #245f9d20; }
}
.player-wave.playing ~ .player-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 7px 1px 0;
  border-radius: 50%;
  background: #245f9d;
  animation: status-blink .9s ease-in-out infinite alternate;
}
@keyframes status-blink {
  from { opacity: .38; transform: scale(.8); }
  to { opacity: 1; transform: scale(1.2); }
}
@media (max-width: 760px) {
  .demo-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 27px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .player-wave.playing > i,
  .play-button.is-playing,
  .player-wave.playing ~ .player-status::before {
    animation: none !important;
    will-change: auto;
  }
}

/* Keep the player adjacent to the text instead of stretching an empty left grid track */
.demo-layout {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 12px;
}
@media (max-width: 760px) {
  .demo-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 27px;
  }
}

/* Each demo retains the compact adjacent text/audio arrangement */
.demo-layout + .demo-layout {
  margin-top: 36px;
  padding-top: 36px;
  border-top: 1px solid #cbd8e8;
}
@media (max-width: 760px) {
  .demo-layout + .demo-layout {
    margin-top: 30px;
    padding-top: 30px;
  }
}