/* Scribe page. Built to match the "Transcript theatre" design (Scribe A),
   with the language orbit from Scribe B. Desktop reproduces the design 1:1;
   smaller screens keep the same content in a stacked layout. */

.scribe-page{--g:clamp(20px,4.45vw,64px);--hh:85px;line-height:normal;overflow-x:clip}
.scribe-page section{scroll-margin-top:90px}
.scribe-page h1,.scribe-page h2,.scribe-page h3{font-family:inherit;color:inherit;text-wrap:balance}
.scribe-page h1 span,.scribe-page h2 span,.scribe-page h1 em,.scribe-page h2 em{color:inherit;margin-top:0}
.scribe-page p{text-wrap:pretty}
.scribe-page button{font-family:inherit;color:inherit;cursor:pointer}
.scribe-page :focus-visible{outline:2px solid #083333;outline-offset:4px}
.scribe-page ::selection{background:#E8D3C0}

/* Shared motion vocabulary from the design */
.rz-btn{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s ease,background .2s ease}
.rz-btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px -14px rgba(8,51,51,.6)}
.rz-ghost{transition:background .2s ease}
.rz-ghost:hover{background:rgba(8,51,51,.06)}
.rz-link .rz-arr{transition:transform .25s ease}
.rz-link:hover .rz-arr{transform:translateX(4px)}
.scribe-page .rz-btn,.scribe-page .rz-ghost{justify-content:center;min-height:44px}
.scribe-page summary{list-style:none;cursor:pointer}
.scribe-page summary::-webkit-details-marker{display:none}
.rz-plus{transition:transform .3s ease}
.scribe-page details[open] .rz-plus{transform:rotate(45deg)}
.rz-l{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.rz-l>span{display:block;animation:rz-line 1.25s cubic-bezier(.16,1,.3,1) both}
.rz-in{animation:rz-rise 1s cubic-bezier(.16,1,.3,1) both}
.wv i{display:block;width:3px;border-radius:3px;background:#083333;transform-origin:50% 50%;animation:rz-wave 1.1s ease-in-out infinite alternate}

/* Live transcript lines in the hero (typed one by one by scribe.js) */
.tl{opacity:0;max-height:0;overflow:hidden;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1),max-height .6s cubic-bezier(.16,1,.3,1),padding .6s ease}
.tl.on{opacity:1;max-height:60px;padding:7px 0;transform:none}
.tl .caret{display:none}
.tl.typing .tx{animation:rz-type 1.7s steps(30,end) both}
.tl.typing .caret{display:inline-block;animation:rz-blink .9s steps(1) infinite}

@keyframes rz-line{from{transform:translateY(110%)}to{transform:none}}
@keyframes rz-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes rz-wave{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
@keyframes rz-type{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes rz-blink{50%{opacity:0}}
@keyframes rz-spin{to{transform:rotate(360deg)}}
@keyframes rz-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@keyframes rz-cue{0%{transform:scaleX(0);transform-origin:left}45%{transform:scaleX(1);transform-origin:left}55%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(0);transform-origin:right}}
@keyframes rz-orbit{0%{transform:rotateY(0deg) translateZ(var(--r)) rotateY(0deg);opacity:1}25%{opacity:.62}50%{transform:rotateY(180deg) translateZ(var(--r)) rotateY(-180deg);opacity:.18}75%{opacity:.62}100%{transform:rotateY(360deg) translateZ(var(--r)) rotateY(-360deg);opacity:1}}

/* ---------- Hero ---------- */
.scribe-hero{position:relative;height:828px;box-sizing:border-box;max-width:1568px;width:100%;margin:0 auto;padding:52px var(--g) 0;overflow:hidden}
.scribe-title{position:relative;margin:44px 0 0;font-weight:300;font-size:112px;line-height:.96;letter-spacing:-.045em;color:#083333}
.scribe-hero-grid{position:relative;margin-top:84px;display:grid;grid-template-columns:470px 1fr;gap:90px;align-items:start}
.scribe-hero-grid>*{min-width:0}
.scribe-listening{margin:-300px 0 0;width:580px;max-width:100%;justify-self:end;animation-delay:.6s}
.scribe-demo-caption{margin:0;padding:14px 12px 0;font-size:12px;line-height:1.5;color:rgba(8,51,51,.72)}
.scribe-scroll-cue{position:absolute;left:var(--g);bottom:22px;display:flex;align-items:center;min-height:44px;gap:14px;font-size:14px;color:rgba(8,51,51,.72);text-decoration:none}

/* ---------- Transcript theatre ---------- */
.scribe-theatre{position:relative;background:linear-gradient(#FCF6EF,#F6F0E9 12%,#F6F0E9 88%,#FCF6EF)}
.scribe-rail{display:flex;flex-direction:column}
.scribe-steps{position:relative;margin-top:52px;padding-left:28px;display:flex;flex-direction:column;gap:34px}
.scribe-track,.scribe-progress{position:absolute;left:0;top:6px;bottom:6px;width:2px;border-radius:2px}
.scribe-track{background:rgba(8,51,51,.1)}
.scribe-progress{background:#083333;transform-origin:top}
.scribe-documents{position:relative;margin:0;display:grid;grid-template-columns:372px 1fr;gap:36px}
.scribe-transcript{align-self:start;margin-top:64px;border-radius:18px;background:#FCF6EF;border:1px solid rgba(8,51,51,.1);box-shadow:0 30px 60px -44px rgba(8,51,51,.5);overflow:hidden}
.scribe-note{position:relative;align-self:start;border-radius:16px;background:#FAF6F2;border:1px solid #E0D9CC;box-shadow:0 50px 90px -50px rgba(8,51,51,.55);overflow:hidden;font-size:14px;min-width:0}
.scribe-note ul{list-style:disc}
.scribe-source-hint{position:absolute;right:30px;display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:#EFE7DD;font-size:12px;white-space:nowrap}
.scribe-editor-tools{display:flex;align-items:center;gap:16px;height:46px;padding:0 16px;border-bottom:1px solid #E0D9CC;color:rgba(8,51,51,.8);overflow:hidden}
.scribe-skeleton{position:absolute;left:26px;right:26px;top:22px;display:flex;flex-direction:column;gap:14px}
.scribe-source{position:absolute;left:214px;top:284px;width:300px;box-sizing:border-box;padding:14px 16px;border-radius:12px;background:#083333;color:#F6F0E9;box-shadow:0 24px 50px -20px rgba(8,51,51,.6)}
.scribe-connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

/* Pinned, scroll-driven theatre (added by scribe.js on wide screens).
   The stage keeps the exact 1440 x 828 design and is scaled to fit the window. */
.scribe-pinned .scribe-pin{position:relative;height:calc(100vh - var(--hh));overflow:hidden}
.scribe-pinned .scribe-stage{position:absolute;left:50%;top:50%;width:1440px;height:828px;box-sizing:border-box;padding:56px 64px 48px;display:grid;grid-template-columns:300px 1fr;gap:56px;transform:translate(-50%,-50%) scale(var(--s,1));transform-origin:center center}

/* Static theatre (small screens, reduced motion, no JavaScript): everything shown, nothing pinned */
html:not(.scribe-pinned) .scribe-stage{max-width:1440px;box-sizing:border-box;margin:0 auto;padding:96px var(--g) 88px;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:clamp(24px,3.9vw,56px)}
html:not(.scribe-pinned) .scribe-documents{grid-template-columns:minmax(0,372px) minmax(0,1fr)}
html:not(.scribe-pinned) .scribe-skeleton,
html:not(.scribe-pinned) .scribe-drafting,
html:not(.scribe-pinned) .scribe-connector{display:none!important}
html:not(.scribe-pinned) .scribe-source{position:relative;left:auto;top:auto;width:auto;margin:14px 16px 0;box-shadow:none}
html:not(.scribe-pinned) .scribe-note>div:first-child>span:last-child{position:static}
html:not(.scribe-pinned) .scribe-source-hint{position:static;white-space:normal}

/* ---------- Languages (from Scribe B) ---------- */
.scribe-langs{--r:470px;position:relative;padding:150px var(--g) 130px;overflow:hidden;text-align:center;background:linear-gradient(#FCF6EF,#F6F0E9 45%,#FCF6EF)}
.scribe-kicker{margin:0;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:rgba(8,51,51,.72)}
.scribe-langs h2{margin:18px auto 0;max-width:900px;font-weight:300;font-size:72px;line-height:1;letter-spacing:-.04em}
.scribe-langs h2 em{font-style:italic;font-weight:400}
.lang-stage{position:relative;height:520px;margin-top:30px;perspective:1500px;perspective-origin:50% 40%}
.lang-ring{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(-12deg)}
.lang-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-54%);text-align:center}
.lang-num{margin:0;font-weight:300;font-size:220px;line-height:.85;letter-spacing:-.06em}
.lang-sub{margin:10px 0 0;font-size:20px;letter-spacing:-.01em}
.lang-orb{position:absolute;left:50%;top:50%;transform-style:preserve-3d;white-space:nowrap;transform:rotateY(var(--a)) translateZ(var(--r)) rotateY(calc(var(--a) * -1));animation:rz-orbit 56s linear infinite}
.lang-orb>span{display:inline-block;transform:translate(-50%,-50%);padding:10px 20px;border-radius:999px;background:rgba(250,246,242,.88);border:1px solid rgba(8,51,51,.12);font-size:24px;box-shadow:0 18px 30px -24px rgba(8,51,51,.5)}
.lang-pair{margin:20px auto 0;width:min(880px,100%);display:grid;grid-template-columns:minmax(0,1fr) 52px minmax(0,1fr);align-items:center;gap:20px;text-align:left}
.lang-card{padding:22px 24px;border-radius:20px}
.lang-card-spoken{background:#F7F2EA;border:1px solid rgba(8,51,51,.08)}
.lang-card-written{background:#FAF6F2;border:1px solid #E0D9CC}
.lang-card-label{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(8,51,51,.72)}
.lang-card-spoken .lang-card-label{color:#86582F}
.lang-card-text{margin:12px 0 0;font-size:20px;line-height:1.45}
.lang-card-spoken .lang-card-text{font-size:21px;line-height:1.5;text-align:right}
.lang-arrow{width:52px;height:52px;border-radius:50%;background:#083333;color:#F6F0E9;display:grid;place-items:center}
.lang-copy{margin:28px auto 0;max-width:560px;font-size:17px;line-height:1.6;color:rgba(8,51,51,.9)}

/* ---------- Documentation that fits your clinic ---------- */
.scribe-fit{padding:150px var(--g) 140px;max-width:1568px;box-sizing:border-box;width:100%;margin:0 auto}
.scribe-fit-heading{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:end}
.scribe-feature-grid{margin-top:72px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.scribe-feature-grid .fg{display:flex;min-width:0}
.fg-templates{grid-column:span 5;grid-row:span 2}
.fg-edit,.fg-detail{grid-column:span 7}
.tile{transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s ease}
@media(hover:hover){.tile:hover{transform:translateY(-4px);box-shadow:0 30px 60px -40px rgba(8,51,51,.45)}}
.scribe-templates{flex-grow:1;position:relative;min-height:640px;box-sizing:border-box;padding:44px;border-radius:24px;background:#EFE7DD;overflow:hidden;display:flex;flex-direction:column}
.fan-stack{position:relative;margin-top:auto;height:300px}
.fan .fc{transition:transform .6s cubic-bezier(.16,1,.3,1)}
/* Hover effects only on devices with a real pointer. On phones a tap would otherwise leave them stuck on. */
@media(hover:hover){
.fan:hover .fc1{transform:translate(-150px,22px) rotate(-12deg)!important}
.fan:hover .fc2{transform:translate(-50px,-6px) rotate(-4deg)!important}
.fan:hover .fc3{transform:translate(50px,-6px) rotate(4deg)!important}
.fan:hover .fc4{transform:translate(150px,22px) rotate(12deg)!important}
}
.scribe-edit{flex-grow:1;box-sizing:border-box;padding:40px;border-radius:24px;background:#F7F2EA;border:1px solid rgba(8,51,51,.08);display:grid;grid-template-columns:1fr 1.15fr;gap:36px;align-items:center}
.scribe-detail{flex-grow:1;box-sizing:border-box;padding:40px;border-radius:24px;background:#FAF6F2;border:1px solid #E0D9CC;display:grid;grid-template-columns:1fr 1.2fr;gap:40px}
.scribe-page .seg{height:40px;min-height:44px;border:0;border-radius:999px;font-size:14px;background:transparent;color:#083333;padding:4px 8px;transition:background .25s ease,color .25s ease}
.scribe-page .seg[aria-pressed=true]{background:#083333;color:#F6F0E9;font-weight:500}
.scribe-page .seg:hover{box-shadow:inset 0 0 0 1px #083333}

/* ---------- Questions and close ---------- */
.scribe-faq{padding:40px var(--g) 140px;max-width:1568px;box-sizing:border-box;width:100%;margin:0 auto;display:grid;grid-template-columns:5fr 7fr;gap:64px}
.scribe-faq a:not(.rz-link){text-decoration:underline}
.scribe-faq summary{min-height:64px}
.scribe-faq summary svg{flex-shrink:0}
.scribe-questions{border-top:1px solid rgba(8,51,51,.14)}
.scribe-close{position:relative;margin:0 24px 96px;height:620px;border-radius:32px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 24px}

/* ---------- Mid-size screens ---------- */
@media (min-width:1200px) and (max-width:1439px){
 .scribe-title{font-size:6.9vw}
 .scribe-hero-grid{grid-template-columns:minmax(0,440px) 1fr;gap:60px}
 .scribe-listening{width:520px;margin-top:-270px}
 .scribe-listening .tl>span:last-child{font-size:16px!important}
}
@media (max-width:1199px){
 .scribe-title{font-size:clamp(64px,9.2vw,112px)}
 .scribe-hero{height:auto;padding-bottom:120px}
 .scribe-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;margin-top:56px}
 .scribe-listening{margin-top:0;width:100%}
 .scribe-listening .tl>span:last-child{white-space:normal!important}
 .scribe-listening .tl.on{max-height:90px}
 html:not(.scribe-pinned) .scribe-stage{grid-template-columns:1fr}
 .scribe-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;padding-left:0;margin-top:32px}
 .scribe-track,.scribe-progress{display:none}
 .scribe-langs{--r:380px}
 .lang-num{font-size:180px}
 .scribe-fit-heading{gap:32px}
 .fg-templates,.fg-edit,.fg-detail{grid-column:span 12;grid-row:auto}
 .scribe-templates{min-height:520px}
 .scribe-faq{gap:32px}
}

@media (max-width:1023px){
 .scribe-hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
 .scribe-listening{justify-self:start;max-width:640px}
 .scribe-langs{--r:290px}
 .lang-num{font-size:150px}
 .lang-orb>span{font-size:19px}
}
@media (max-width:899px){
 html:not(.scribe-pinned) .scribe-documents{grid-template-columns:minmax(0,1fr);gap:20px;max-width:640px}
 .scribe-transcript{margin-top:0}
}

/* ---------- Phones and small tablets ---------- */
@media (max-width:767px){
 .scribe-hero{padding-top:32px;padding-bottom:96px}
 .scribe-title{font-size:clamp(46px,12vw,66px);margin-top:28px}
 .scribe-hero-grid{grid-template-columns:minmax(0,1fr);margin-top:32px;gap:32px}
 .scribe-hero-grid>div>p:first-child{font-size:18px!important}
 .scribe-hero-grid>div>div{flex-wrap:wrap}
 .scribe-listening{justify-self:stretch}
 .scribe-listening .tl>span:last-child{white-space:normal!important;font-size:15px!important}
 .scribe-listening .tl>span:first-child{width:64px!important;font-size:10px!important}
 .scribe-listening>div>div:first-child{padding-inline:4px!important}
 .scribe-listening>div>div:nth-child(2){flex-wrap:wrap}
 .scribe-listening>div>div:nth-child(2)>span:last-child>span:last-child{display:none}
 .scribe-listening .wv{min-width:24px}
 .scribe-scroll-cue{font-size:12px;gap:10px;bottom:14px}
 html:not(.scribe-pinned) .scribe-stage{padding-block:64px}
 .scribe-steps{grid-template-columns:1fr;gap:22px}
 .scribe-rail h2{font-size:38px!important}
 html:not(.scribe-pinned) .scribe-documents{grid-template-columns:minmax(0,1fr);gap:20px}
 .scribe-transcript{margin-top:0}
 .scribe-note>div:first-child{height:auto!important;min-height:54px;flex-wrap:wrap;gap:8px;padding-block:10px!important}
 .scribe-note>div:nth-child(2){flex-wrap:wrap;gap:10px}
 .scribe-editor-tools{gap:12px}
 .scribe-langs{--r:clamp(96px,calc(50vw - 60px),140px);padding-block:96px 88px}
 .scribe-langs h2{font-size:clamp(38px,10vw,52px)}
 .lang-stage{height:300px;perspective:900px}
 .lang-ring{transform:rotateX(-30deg)}
 .lang-num{font-size:clamp(72px,24vw,120px)}
 .lang-sub{font-size:14px;white-space:nowrap}
 /* Phones: eight languages on a steeper orbit, so they circle the number instead of piling up on it. */
 .lang-orb:nth-of-type(even){display:none}
 .lang-orb>span{font-size:13px;padding:6px 11px}
 .lang-pair{grid-template-columns:minmax(0,1fr);gap:12px}
 .lang-arrow{justify-self:center;transform:rotate(90deg);width:44px;height:44px}
 .lang-card-text{font-size:18px}
 .scribe-fit{padding-block:80px}
 .scribe-fit-heading{grid-template-columns:1fr;gap:20px}
 .scribe-fit-heading h2{font-size:clamp(40px,10vw,56px)!important}
 .scribe-fit-heading p{justify-self:start!important}
 .scribe-feature-grid{grid-template-columns:minmax(0,1fr);gap:16px;margin-top:40px}
 .fg-templates,.fg-edit,.fg-detail{grid-column:auto}
 .scribe-templates{min-height:470px;padding:26px}
 .fan-stack{height:260px;scale:.8;transform-origin:50% 100%}
 .scribe-edit,.scribe-detail{grid-template-columns:minmax(0,1fr);padding:26px;gap:24px}
 .scribe-page .seg{padding-inline:4px;font-size:13px}
 .scribe-faq{grid-template-columns:1fr;padding-bottom:80px;gap:28px}
 .scribe-faq h2{font-size:42px!important}
 .scribe-faq summary{font-size:19px!important;gap:16px!important}
 .scribe-faq details p{padding-right:0!important;font-size:16px!important}
 .scribe-questions>div:last-child{flex-direction:column}
 .scribe-close{height:auto;min-height:460px;margin:0 12px 64px;padding:64px 20px;border-radius:24px}
 .scribe-close h2{font-size:clamp(48px,13vw,64px)!important}
 .scribe-close>div:last-child{flex-wrap:wrap;justify-content:center}
}
@media (max-width:380px){
 .scribe-listening .wv{display:none}
 .lang-orb>span{font-size:14px;padding:6px 11px}
}

/* Reduced motion: keep every piece of content, drop the movement */
@media (prefers-reduced-motion:reduce){
 .scribe-page *,.scribe-page *::before,.scribe-page *::after{animation:none!important;transition:none!important}
 .scribe-page .tl{opacity:1;max-height:110px;padding:7px 0;transform:none}
}
html[data-scribe-motion=off] .scribe-page *{animation:none!important;transition:none!important}
html[data-scribe-motion=off] .scribe-page .tl{opacity:1;max-height:110px;padding:7px 0;transform:none}
/* Phones held sideways: keep the headline inside the short screen. */
@media (orientation:landscape) and (max-height:500px){.scribe-title{font-size:clamp(46px,7.4vw,64px);margin-top:20px}}