.speaking-section { border-top:1px solid var(--line); }
.speaking-intro { max-width:590px; margin-bottom:40px; }
.speaking-intro h2 { font-size:clamp(40px,4.2vw,59px); margin-bottom:24px; }
.speaking-intro>p:not(.eyebrow) { max-width:570px; font-size:16px; color:var(--muted); }
.demo-layout { display:grid; grid-template-columns:.75fr 1.25fr; gap:80px; align-items:start; }
.demo-context { padding:0; }
.demo-context>h3 { font-size:32px; line-height:1.2; }
.phrase-focus { margin:28px 0; padding:22px; background:#e8eedb; border-radius:10px; }
.phrase-focus .label { display:block; margin-bottom:8px; }
.phrase-focus h3 { font:25px/1.25 var(--serif); margin-bottom:10px; }
.phrase-focus p { font-size:13px; color:var(--muted); }
.demo-steps { list-style:none; margin:0; padding:0; }
.demo-steps li { display:flex; gap:16px; padding:14px 0; color:var(--muted); }
.demo-steps li>span { width:30px; height:30px; display:grid; place-items:center; font-size:10px; border:1px solid var(--line); border-radius:50%; flex-shrink:0; }
.demo-steps li[aria-current]>span { background:var(--green); color:white; border-color:var(--green); }
.demo-steps strong { font-size:13px; font-weight:550; }
.demo-steps li[aria-current] strong { color:var(--ink); }
.demo-steps p { font-size:12px; }
.demo-disclosure { font-size:11px; color:var(--muted); line-height:1.8; margin-top:25px; padding-top:20px; border-top:1px solid var(--line); }
.demo-disclosure strong { font-weight:600; color:var(--ink); }
.conversation { border:1px solid #d7dece; background:#fffef8; border-radius:16px; overflow:hidden; box-shadow:0 16px 50px #203c3208; min-width:0; }
.conversation-header { padding:23px 26px; display:flex; gap:12px; align-items:center; border-bottom:1px solid var(--line); }
.coach-avatar { height:40px; width:40px; object-fit:cover; object-position:50% 30%; border-radius:50%; flex-shrink:0; }
.tutor-type { display:inline-block; font:10px var(--sans); color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:3px 7px; margin-left:5px; vertical-align:middle; }
.conversation-header h3 { font:550 14px/1.4 var(--sans); letter-spacing:0; }
.conversation-header p { font-size:10px; color:var(--muted); }
.call-timer { margin-left:auto; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.call-stage { position:relative; aspect-ratio:3/2; background:#344335; color:white; overflow:hidden; }
.tutor-portrait { width:100%; height:100%; display:block; object-fit:cover; object-position:center 38%; }
.call-stage::after { content:''; position:absolute; inset:40% 0 0; background:linear-gradient(transparent,#15271dcc); pointer-events:none; }
.call-person { position:absolute; bottom:22px; left:24px; z-index:1; }
.call-person>strong { font:24px var(--serif); }
.call-status { font-size:11px; margin-top:5px; color:#f1f4ec; }
.call-intro { font-size:13px; color:var(--muted); max-width:360px; margin:24px auto 0; padding:0 22px; line-height:1.7; text-align:center; }
.call-wave { position:absolute; right:24px; bottom:24px; z-index:1; height:35px; display:flex; align-items:center; justify-content:center; gap:5px; }
.call-wave i { height:5px; width:3px; border-radius:3px; background:#d8e8ae; }
.is-speaking .call-wave i { height:18px; animation:voice-pulse .7s ease-in-out infinite alternate; }
.is-speaking .call-wave i:nth-child(2n) { height:28px; animation-delay:.2s; }
.is-speaking .call-wave i:nth-child(3n) { height:11px; animation-delay:.4s; }
@keyframes voice-pulse { to { transform:scaleY(.3); opacity:.5; } }
.call-captions { padding:0 28px; }
.call-captions:not(:empty) { min-height:190px; padding-block:10px 16px; }
.call-caption { margin:0; padding:12px 0; border-top:1px solid var(--line); }
.call-caption strong { display:block; font-size:10px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:6px; }
.call-caption span { display:block; font-size:14px; line-height:1.7; }
.previous-turn { color:var(--muted); }
.call-controls { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; padding:20px 24px 28px; }
.call-controls .button { font-size:12px; }
.call-control { border:1px solid var(--line); background:transparent; color:var(--ink); min-height:44px; padding:10px 14px; border-radius:7px; font:12px var(--sans); cursor:pointer; }
.call-control:hover { background:#edf1e5; }
.call-control:disabled { opacity:.4; cursor:default; }
.call-end { color:#944e3d; border-color:#e5cec6; }
.conversation-footer { border-top:1px solid var(--line); padding:14px 26px; display:flex; justify-content:space-between; flex-wrap:wrap; align-items:center; gap:10px; font-size:10px; color:var(--muted); }
@media(max-width:1050px) { .demo-layout { gap:40px; grid-template-columns:.8fr 1.2fr; } }
@media(max-width:760px) {
  .speaking-intro { margin-bottom:35px; }
  .speaking-intro h2 { font-size:44px; }
  .speaking-intro>p:not(.eyebrow) { font-size:14px; }
    .demo-layout { grid-template-columns:1fr; gap:28px; }
  .conversation { grid-row:auto; }
  .demo-context { padding:0; }
  .demo-context>h3 { font-size:29px; }
  .phrase-focus { margin:20px 0; }
  .demo-steps { display:flex; gap:12px; justify-content:space-between; }
  .demo-steps li { gap:8px; }
  .demo-steps p { display:none; }
  .demo-steps strong { font-size:10px; }
  .demo-steps li>span { width:23px; height:23px; font-size:8px; }
  .demo-disclosure { margin-top:15px; }
  .conversation-header { padding:20px 18px; gap:10px; }
  .conversation-header p { max-width:190px; }
  .call-stage { aspect-ratio:1/1; }
  .call-person { bottom:18px; left:18px; }
  .call-wave { right:18px; bottom:18px; }
  .call-captions { padding-inline:18px; }
  .call-controls { padding-inline:18px; gap:8px; }
  .conversation-footer { padding-inline:18px; }
}
@media(prefers-reduced-motion:reduce) { .call-wave i { animation:none!important; } }

/* Portrait phone call screen. */
.demo-layout { grid-template-columns:1fr 1fr; align-items:center; }
.conversation {
  position:relative;
  isolation:isolate;
  width:min(100%,360px);
  aspect-ratio:9/19;
  justify-self:center;
  border:7px solid #242825;
  outline:1px solid #60675f;
  border-radius:49px;
  background:#25372d;
  color:white;
  box-shadow:0 30px 65px #203c3226, inset 0 0 0 1px #ffffff40;
}
.conversation::before {
  content:'';
  position:absolute;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  width:94px;
  height:27px;
  border-radius:20px;
  background:#101311;
  z-index:4;
}
.conversation::after {
  content:'';
  position:absolute;
  bottom:9px;
  left:50%;
  transform:translateX(-50%);
  width:105px;
  height:4px;
  border-radius:5px;
  background:#ffffffd9;
  z-index:4;
}
.call-stage { position:absolute; inset:0; aspect-ratio:auto; z-index:-1; }
.call-stage::after { inset:0; background:linear-gradient(#132219a6 0%,transparent 40%,#11221955 56%,#112219f5 86%); }
.tutor-portrait { object-position:50% 36%; }
.conversation-header { position:absolute; inset:57px 0 auto; padding:0 20px; border:0; display:block; text-align:center; }
.coach-avatar, .conversation-header p { display:none; }
.conversation-header h3 { font:32px/1.2 var(--serif); color:white; }
.tutor-type { display:block; width:max-content; margin:7px auto 0; color:#fff; border-color:#ffffff55; font-size:10px; }
.call-timer { display:block; margin:10px 0 0; font-size:12px; color:#ffffffd9; }
.call-person { top:170px; bottom:auto; left:15px; right:15px; text-align:center; }
.call-person>strong { display:none; }
.call-status { font-size:11px; text-shadow:0 1px 8px #15271d; }
.call-status.is-ready { font-size:16px; font-weight:550; }
.call-wave { bottom:290px; right:50%; transform:translateX(50%); }
.call-intro { position:absolute; bottom:156px; left:12px; right:12px; margin:0 auto; color:#ffffffed; font-size:12px; line-height:1.7; padding:12px 15px; }
.call-captions { position:absolute; bottom:152px; left:16px; right:16px; padding:0; }
.call-captions:not(:empty) { min-height:0; padding:14px 16px; background:#14271fbb; backdrop-filter:blur(12px); border:1px solid #ffffff26; border-radius:14px; }
.call-caption { border:0; padding:0; }
.call-caption strong { font-size:9px; color:#d8e8ae; }
.call-caption span { font-size:12px; line-height:1.65; color:white; }
.previous-turn { display:none; }
.call-controls { position:absolute; bottom:30px; left:6px; right:6px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px; padding:0; align-items:start; }
.call-controls .button, .call-control {
  display:flex; flex-direction:column; justify-content:start; align-items:center; gap:9px;
  width:100%; min-height:88px; padding:0 2px; border:0; border-radius:0;
  background:transparent; color:white; font:10px/1.4 var(--sans); text-align:center;
}
.call-controls .button>span { display:none; }
.call-controls button::before { content:'▶' / ''; display:grid; place-items:center; flex-shrink:0; width:49px; height:49px; border-radius:50%; background:#d6e8b5; color:#234333; font-size:18px; }
.call-controls .call-control::before { content:'♪' / ''; background:#ffffff30; color:white; font-size:25px; }
.call-controls .call-end::before { content:'☎' / ''; background:#d9534e; color:white; transform:rotate(135deg); }
.call-controls .call-control[aria-pressed=true]::before { opacity:.5; }
.call-controls button:hover { background:transparent; }
.call-controls button:hover::before { filter:brightness(1.1); }
.call-controls button:focus-visible { outline:2px solid #d6e8b5; outline-offset:2px; border-radius:12px; }
.conversation-footer { display:none; }
@media(max-width:1050px) { .demo-layout { grid-template-columns:1fr 1fr; gap:40px; } }
@media(max-width:760px) { .demo-layout { grid-template-columns:1fr; gap:35px; } .conversation { grid-row:auto; } }
@media(max-width:360px) {
  .conversation { border-width:6px; border-radius:40px; }
  .conversation-header { top:48px; }
  .conversation-header h3 { font-size:28px; }
  .call-person { top:150px; }
  .call-wave { bottom:260px; }
  .call-caption span { font-size:11px; }
  .call-controls button::before { width:44px; height:44px; }
}

/* Decorative call icons keep button labels accessible. */
.call-controls .button::before { content:''; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6.6%202.8%203.5%204.3c-1%20.5-.9%202.7-.2%204.6%202%205.7%206.1%209.8%2011.8%2011.8%201.9.7%204.1.8%204.6-.2l1.5-3.1-5-2.7-1.8%202c-3.4-1.5-6-4.1-7.5-7.5l2-1.8Z%22%20fill%3D%22%23234333%22%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:center; background-size:22px; transform:none; }
.call-controls .button.is-playing::before { content:''; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%205v14M16%205v14%22%20stroke%3D%22%23234333%22%20stroke-width%3D%223%22%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:center; background-size:22px; transform:none; }
.call-controls .call-control::before { content:''; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22m4%209%204%200%205-4v14l-5-4H4Zm12-1q5%204%200%208m3-11q8%207%200%2014%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-width%3D%221.8%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:center; background-size:22px; transform:none; }
.call-controls .call-end::before { content:''; background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M3%2014q9-9%2018%200l-3%203-4-2v-3h-4v3l-4%202Z%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"); background-repeat:no-repeat; background-position:center; background-size:22px; transform:none; }

.practice-overview-steps { list-style:none; padding:0; margin:0; display:grid; gap:24px; }
.practice-overview-steps li { display:flex; align-items:flex-start; gap:16px; }
.practice-overview-steps li>span { display:grid; place-items:center; flex-shrink:0; width:32px; height:32px; border-radius:50%; background:#e8eedb; color:var(--green); font:18px var(--serif); }
.practice-overview-steps h3 { font:550 17px/1.5 var(--sans); margin-bottom:6px; }
.practice-overview-steps p { margin:0; font:14px/1.65 var(--sans); color:var(--muted); }
@media(max-width:760px) {
  .practice-overview-steps { gap:20px; }
  .practice-overview-steps li { gap:16px; }
  .practice-overview-steps h3 { font-size:16px; }
  .practice-overview-steps li>span { width:32px; height:32px; font-size:18px; }
}

.phone-demo { position:relative; width:min(100%,360px); justify-self:center; }
.phone-demo .conversation { width:100%; }
.demo-layout { row-gap:28px; }
.demo-context { grid-column:1; grid-row:1; }
.phone-demo { grid-column:2; grid-row:1 / span 3; }
.practice-cta { grid-column:1; grid-row:3; justify-self:start; align-self:start; }
.practice-approach { grid-column:1; grid-row:2; padding-top:24px; border-top:1px solid var(--line); }
.practice-approach h3 { font:24px/1.3 var(--serif); letter-spacing:-.025em; margin-bottom:12px; }
.practice-approach p { margin:0; color:var(--muted); font-size:14px; line-height:1.75; }
@media(max-width:760px) {
  .demo-layout { row-gap:35px; }
  .demo-context,.phone-demo,.practice-approach,.practice-cta { grid-column:auto; grid-row:auto; }
}
.call-invitation { position:absolute; left:-108px; bottom:101px; width:180px; z-index:5; pointer-events:none; color:var(--green); }
.call-invitation span { display:block; font:italic 27px/1.2 var(--serif); transform:rotate(-9deg); margin-left:-21px; }
.call-invitation svg { display:block; width:180px; height:70px; color:#e34234; }
@media(max-width:1050px) {
  .call-invitation { left:calc(25% + 47px); bottom:114px; width:105px; height:65px; color:#e1edc9; }
  .call-invitation span { font-size:23px; margin-left:15px; }
  .call-invitation svg { position:absolute; left:-47px; top:12px; width:100px; height:55px; transform:scaleX(-1); }
}

.call-caption mark { color:#e1efbe; text-decoration:none; background:#d8eab51a; border-radius:3px; padding:1px 2px; }

.call-phrase {
  position:absolute;
  top:50%;
  left:50%;
  width:min(250px,calc(100% - 48px));
  transform:translate(-50%,-50%);
  padding:12px 14px;
  border:1px solid #eef6dc;
  border-radius:11px;
  background:#d8eab5;
  color:var(--ink);
  text-align:center;
  box-shadow:0 8px 32px #10271e40;
}
.call-phrase-label { font:650 8px/1.5 var(--sans); letter-spacing:.12em; }
.call-phrase-list { list-style:none; margin:7px 0 0; padding:0; font:21px/1.3 var(--serif); letter-spacing:-.025em; }
.call-phrase-list li+li { border-top:1px solid #203c3226; margin-top:7px; padding-top:7px; }
.call-phrase-meaning { display:block; margin-top:3px; font:12px/1.45 var(--sans); letter-spacing:0; color:#31472c; }
@media(max-width:360px) {
  .call-phrase { top:46%; padding:10px 12px; }
  .call-phrase-list { font-size:19px; }
}