/* Interface typography, glass recordings, a focused offer and the platform finale. */
:root {
  --font-sans:'PingFang SC','Noto Sans SC','Google Sans',-apple-system,BlinkMacSystemFont,'Microsoft YaHei',sans-serif;
  --font-mono:'Google Sans Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
}
body { font-family:var(--font-sans); }
.mono { font-family:var(--font-mono); }
.ui-icon { width:20px;height:20px;fill:none!important;stroke:currentColor;flex-shrink:0;vertical-align:middle; }
.button-disc .ui-icon { width:20px;height:20px; }
.scene-talk span .ui-icon { width:14px;height:14px; }
.hero-powered .ui-icon { width:14px;height:14px; }
.case-navigation .ui-icon,.stage-arrow .ui-icon { width:19px;height:19px; }
.case-next i .ui-icon { width:12px;height:12px; }
.recording-copy button>i { display:flex; }
.recording-copy .ui-icon { width:15px;height:15px; }
.hero-actions #listen .pause-icon { display:none; }
.audio-playing .hero-actions #listen .play-icon { display:none; }
.audio-playing .hero-actions #listen .pause-icon { display:block; }
.case-tabs { grid-template-columns:repeat(5,minmax(0,1fr)); }
.case-tabs button { justify-content:center; }
.case-tabs button>i { margin-right:2px; }

/* The recording is part of the portrait scene, with one media owner and real captions. */
.role-scene .staff-player {
  position:absolute;right:5%;bottom:70px;width:min(398px,42%);z-index:3;
  border:1px solid #edf8ff42;border-radius:26px;padding:22px 24px 18px;
  background:rgb(16 40 54 / .64);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
  color:#eef7fa;box-shadow:0 12px 36px #08192524;
  user-select:text;cursor:default;
}
.staff-player-head { display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px; }
.staff-player-head>span:first-child { display:flex;align-items:center;gap:8px; }
.staff-player-head .ui-icon { width:18px;height:18px;color:#b8d8e0; }
.staff-time { font-variant-numeric:tabular-nums;color:#c8dce5;white-space:nowrap; }
.staff-record-label { color:#c6dce6;font-size:12px;line-height:1.6;margin:10px 0 15px; }
.staff-journey { display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:1px solid #daeff51f;padding-top:12px;font-size:11px;color:#b3cbd7; }
.staff-journey span { display:flex;align-items:center;gap:6px;white-space:nowrap; }
.staff-journey span:before { content:'';width:4px;height:4px;border:1px solid #9dbacb;border-radius:50%; }
.staff-journey .is-current { color:#f0f8fa; }
.staff-journey .is-current:before { background:#c1e8dd;border-color:#c1e8dd; }
.staff-caption { font-size:14px;line-height:1.7;min-height:48px;margin:14px 0 12px;color:#ecf6fa; }
.staff-audio-controls { display:flex;align-items:center;gap:16px; }
.staff-play { width:44px;height:44px;border-radius:50%;border:1px solid #dcebf44d;background:#e8f3ef;color:#254a57;flex:none;display:grid;place-items:center;transition:background 150ms; }
.staff-play:hover { background:#fff; }
.staff-play .ui-icon { width:19px;height:19px; }
.staff-wave-track { height:38px;flex:1;position:relative;min-width:0;border-radius:6px; }
.staff-wave { display:block;height:38px;width:100%; }
.staff-seek { position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0; }
.staff-wave-track:focus-within { outline:2px solid #b4dbf5;outline-offset:4px; }
.staff-provenance { display:block;font-size:10px;line-height:1.7;color:#b9d0db;margin-top:14px; }
.staff-player-error { color:#f7d7c5;font-size:12px;line-height:1.6;margin:12px 0 0; }

/* The whole learning experience has a frame; the day controls form a second clear group. */
.learning.restored-learning { background:var(--paper); }
.learning-sticky {
  margin:0 var(--page-edge);width:calc(100% - 2*var(--page-edge));
  border:1px solid #c6d7e1;border-radius:var(--surface-radius);background:#edf3f7;
  padding:88px calc(var(--gutter) - var(--page-edge)) 26px;
}
.restored-learning .learning-center { background:#edf3f7d9; }
.learning-time { border:1px solid #c7d9e4;border-radius:24px;padding:16px 20px;background:#f9fcfe94;gap:34px;margin-top:8px; }
.learning-time-copy h3 { margin-bottom:7px; }
.learning-time-source { margin-top:12px; }

/* The commercial offer spells out what the monthly number includes. */
.pricing { padding-top:100px;padding-bottom:96px;align-items:start; }
.price-anchor>b { font-size:clamp(62px,6vw,86px); }
.price-anchor .price-value { color:#0076e8;font-weight:600; }
.price-anchor>p { font-size:16px;color:#3e5f71;line-height:1.7; }
.price-anchor>span { font-size:13px; }
.plan-inclusions { margin:30px 0 28px; }
.plan-inclusions>h3 { font-size:14px;line-height:1.5;font-weight:500;margin:0 0 16px;color:#43667c; }
.plan-inclusions ul { padding:0;margin:0;list-style:none;display:grid;gap:12px; }
.plan-inclusions li { display:flex;align-items:center;gap:11px;font-size:15px;color:#214b63;line-height:1.6; }
.plan-inclusions li>.ui-icon { width:17px;height:17px;color:#398477; }
.plan-clarity { display:flex;gap:12px;align-items:flex-start;border-top:1px solid #c8d8e2;margin-top:24px;padding-top:20px;max-width:490px; }
.plan-clarity>.ui-icon { color:#287f96;width:24px;height:24px;margin-top:2px; }
.plan-clarity strong { display:block;font-size:16px;font-weight:500;color:#1c536b;line-height:1.6; }
.plan-clarity p { font-size:13px;line-height:1.8;margin:6px 0 0;color:#4e6c7b; }
.cost-calculator { margin-top:72px; }
.mobile-price-link { display:none; }

/* An image-led platform chapter closes the product story before the footer. */
.finale .platform-story { background:#183b43;padding:62px 48px 120px;min-height:830px; }
.platform-photo { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%;transform:scaleX(-1);z-index:-2; }
.finale .platform-story:after { background:linear-gradient(90deg,#1027356b,#1027352e 60%,#10273557),linear-gradient(0deg,#183b43f5,transparent 85%);z-index:-1; }
.platform-top { display:grid;grid-template-columns:1.45fr 1fr;gap:70px;min-height:360px; }
.platform-message { display:flex;flex-direction:column;justify-content:space-between; }
.platform-message>p { font-size:12px;color:#d3e4e9;margin:0; }
.platform-story .platform-message h2 { font-size:clamp(38px,4.2vw,58px);font-weight:450;line-height:1.25;max-width:680px;margin:110px 0 0; }
.platform-invitation { padding-top:8px; }
.platform-invitation>p { font-size:16px;color:#edf5f7;line-height:1.8;margin:0 0 24px; }
.platform-invitation .hero-call { font-size:14px; }
.platform-capabilities { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:48px; }
.platform-capabilities article { padding:28px 26px 24px;min-height:246px;display:flex;flex-direction:column;border:1px solid #e8f2f73d;border-radius:30px;background:rgb(17 36 48 / .56);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px); }
.platform-capabilities h3 { display:flex;align-items:center;gap:12px;font-size:25px;font-weight:450;line-height:1.4;margin:0 0 18px;color:#eef6f8; }
.platform-capabilities h3>.ui-icon { width:25px;height:25px;color:#bedce5; }
.platform-capabilities p { font-size:14px;line-height:1.8;color:#d0e2e9;margin:0 0 28px; }
.platform-tags { margin-top:auto;display:flex;gap:7px;flex-wrap:wrap; }
.platform-tags>span { font-size:11px;line-height:1.6;padding:4px 9px;border-radius:20px;background:#d9eaf026;color:#e2eef3; }
@media(max-width:1200px) {
  .mobile-price-link { display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--hc);font-size:14px; }
}
@media(max-width:1100px) {
  .platform-top { gap:35px;grid-template-columns:1.35fr 1fr; }
  .platform-capabilities { gap:12px; }
  .platform-capabilities article { padding:24px 20px; }
  .platform-capabilities h3 { font-size:22px;gap:8px; }
  .platform-capabilities p { font-size:13px; }
}
@media(max-width:760px) {
  .case-tabs { display:flex; }
  .case-tabs button { min-width:132px; }
  .role-scene .staff-player { left:7%;right:7%;width:auto;bottom:64px;padding:18px 18px 15px;border-radius:22px; }
  .scene-copy { top:8%; }
  .scene-buttons { margin-top:20px; }
  .staff-caption { min-height:46px;font-size:13px;margin-top:12px; }
  .staff-player-head { font-size:11px; }
  .staff-record-label { font-size:11px;margin-top:8px;margin-bottom:10px; }
  .staff-journey { font-size:10px;gap:5px;padding-top:10px; }
  .staff-provenance { font-size:10px;margin-top:10px; }
  .staff-journey span { gap:4px; }
  .learning-sticky { padding:84px 20px 40px; }
  .learning-time { padding:18px 16px;gap:18px;border-radius:20px;margin-top:20px; }
  .learning-time-source { font-size:11px; }
  .pricing { padding:80px 24px 70px; }
  .price-anchor>b { font-size:66px; }
  .plan-inclusions { margin-top:27px; }
  .plan-inclusions li { font-size:15px; }
  .plan-clarity strong { font-size:15px; }
  .cost-calculator { margin-top:0; }
  .finale .platform-story { padding:44px 24px 100px;min-height:0; }
  .platform-photo { object-position:57% top; }
  .platform-top { grid-template-columns:1fr;gap:26px;min-height:0; }
  .platform-story .platform-message h2 { font-size:36px;line-height:1.3;margin:145px 0 0; }
  .platform-invitation { padding:0; }
  .platform-invitation>p { font-size:14px;line-height:1.8;margin-bottom:20px; }
  .platform-capabilities { grid-template-columns:1fr;gap:12px;margin-top:32px; }
  .platform-capabilities article { min-height:194px;padding:25px 22px; }
  .platform-capabilities h3 { font-size:24px; }
  .platform-capabilities p { font-size:14px;margin-bottom:23px; }
}
@media(max-width:380px) {
  .role-scene { height:720px; }
  .role-scene .staff-player { bottom:62px; }
  .staff-journey { font-size:9px;gap:3px; }
  .staff-time { font-size:10px; }
  .platform-story .platform-message h2 { font-size:30px; }
  .platform-capabilities article { padding:23px 18px; }
}
.pricing { padding-top:72px;padding-bottom:72px; }
.pricing-copy h2 { font-size:clamp(34px,3.4vw,48px);margin-bottom:23px; }
.plan-inclusions { margin-top:22px; }
.plan-clarity { margin-top:0;margin-bottom:24px;padding:17px 18px;border:1px solid #c3d6e3;background:#f7fbfcd9;border-radius:18px; }
.plan-inclusions>h3 { margin-bottom:12px; }
.plan-inclusions ul { gap:10px; }
.cost-calculator { margin-top:64px; }
@media(max-width:760px) {
  .pricing { padding-top:76px;padding-bottom:70px; }
  .pricing-copy h2 { font-size:34px; }
  .cost-calculator { margin-top:0; }
}
#growthPlay { display:inline-flex;align-items:center;gap:7px; }
#growthPlay .ui-icon { width:16px;height:16px; }
.staff-provenance { font-size:11px; }
@media(max-width:760px) { .staff-provenance { font-size:10px; } }
.price-anchor>p { font-size:18px;font-weight:500;color:#254f66; }
@media(max-width:760px) {
  .platform-photo { height:600px;object-position:70% top;-webkit-mask-image:linear-gradient(#000 55%,transparent 100%);mask-image:linear-gradient(#000 55%,transparent 100%); }
  .price-anchor>p { font-size:16px; }
}