/*
 * The pages around the landing page: the product pages, About, Contact, the
 * site map and the 404. Same brand as site/index.html — graphite, chalk, pink
 * for voice only, green for done only, Bricolage Grotesque and Figtree, no
 * gradients — without the landing page's animation.
 */
:root{
  --graphite:#1D2023;--chalk:#EEF0EA;--paper:#FAFBF8;
  --pink:#FF4F8B;--green:#0F7A55;--stone:#5E6561;--line:#D6DBD2;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --ui:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--chalk);color:var(--graphite);font-family:var(--ui);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px;border-radius:8px}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.08}
h1{font-size:clamp(40px,6vw,68px);letter-spacing:-.04em;margin-bottom:20px}
h2{font-size:clamp(28px,3.4vw,38px);margin:0 0 14px}
h3{font-size:21px;letter-spacing:-.02em;margin:0 0 6px;line-height:1.25}
p{max-width:64ch}
.lede{font-size:clamp(18px,1.7vw,21px);color:var(--stone);line-height:1.5}
.eyebrow{font-size:14px;font-weight:600;color:var(--stone);margin-bottom:16px}

/* header */
.top{position:sticky;top:0;z-index:10;background:rgba(238,240,234,.94);border-bottom:1px solid var(--line)}
.topin{display:flex;align-items:center;gap:24px;height:66px}
.lockup{display:inline-flex;align-items:center;gap:9px;font-family:"Bricolage Grotesque",var(--display);font-weight:800;font-size:24px;letter-spacing:-.035em;text-decoration:none}
.lockup svg{width:30px;height:30px}
.nav{display:flex;gap:20px;font-size:15px}
.nav a{text-decoration:none;border-bottom:1.5px solid transparent;padding:2px 0}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--graphite)}
.topr{margin-inline-start:auto}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:50px;padding:0 22px;border-radius:25px;background:var(--graphite);color:var(--chalk);font:600 16px var(--ui);text-decoration:none;transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(29,32,35,.7)}
.btn svg{width:17px;height:17px;flex:none}
.btn.sm{height:40px;padding:0 16px;font-size:14.5px;border-radius:20px}
.btn.ghost{background:transparent;color:var(--graphite);box-shadow:inset 0 0 0 1.5px var(--line)}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.meta{margin-top:12px;font-size:14px;color:var(--stone)}

/* sections */
.hero{padding:72px 0 56px}
section{padding:64px 0;border-top:1px solid var(--line)}
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.grid.three{grid-template-columns:repeat(3,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 22px 20px}
.card p{color:var(--stone);font-size:15.5px}
.steps{list-style:none;counter-reset:s;display:grid;gap:14px;margin-top:24px;max-width:720px}
.steps li{counter-increment:s;display:grid;grid-template-columns:36px 1fr;gap:14px;align-items:start}
.steps li::before{content:counter(s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--graphite);color:var(--chalk);font:700 15px var(--ui)}
.steps b{display:block}
.steps span{color:var(--stone);font-size:15.5px}
kbd{font:600 13px var(--ui);background:var(--paper);border:1px solid var(--line);border-bottom-width:2px;border-radius:7px;padding:1px 7px}
.faq{margin-top:20px;max-width:780px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 0;font:600 18px/1.35 var(--display)}
.faq details p{color:var(--stone);padding:0 0 20px}
.links{list-style:none;display:grid;gap:10px;margin-top:16px}
.links a{font-weight:600}
.links small{display:block;color:var(--stone);font-size:15px;font-weight:400}
.cta{background:var(--graphite);color:var(--chalk);border-radius:26px;padding:44px 36px;margin:8px 0 72px}
.cta h2{color:var(--chalk)}
.cta p{color:rgba(238,240,234,.75)}
.cta .btn{background:var(--chalk);color:var(--graphite)}
.cta .meta{color:rgba(238,240,234,.62)}
.cta .meta a{color:inherit}

/* footer */
footer{border-top:1px solid var(--line);padding:44px 0 56px;font-size:15px;color:var(--stone)}
.fgrid{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap}
.flinks{display:flex;flex-wrap:wrap;gap:10px 24px;list-style:none}
.flinks a{text-decoration:none}
.flinks a:hover{text-decoration:underline}
.fbot{margin-top:28px;font-size:14px}

@media (max-width:860px){
  .nav{display:none}
  .grid,.grid.three{grid-template-columns:1fr}
}
@media (max-width:560px){
  .wrap{padding:0 20px}
  .topr .btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .topr .btn{width:40px;padding:0}
  .cta{padding:32px 22px}
}

/* blog */
.post{max-width:780px;padding-top:64px;padding-bottom:24px}
.post .eyebrow a{text-decoration:none;font-weight:600}
.post .lede{margin-bottom:36px}
.post h2{font-size:clamp(24px,2.6vw,30px);margin:44px 0 12px}
.post p,.post li{font-size:18px;line-height:1.72}
.post p{margin:0 0 18px;max-width:none}
.post ul,.post ol{margin:0 0 18px 24px}
.post li{margin:6px 0}
.post blockquote{border-inline-start:3px solid var(--graphite);padding:4px 0 4px 18px;margin:0 0 18px;font-weight:600}
.posts li a{font-size:18px}
.tm{margin-top:18px;font-size:13.5px;color:var(--stone);max-width:80ch}
.svc .gicon{width:26px;height:26px;min-width:20px;min-height:20px;flex:none;margin-top:2px}

/* =============================================================== 0.9.7 ==
   The product pages, calmer: a centred headline, one working demo on a
   Done-green panel, three short highlights, the questions, a green close.
   Pink stays on the voice (the wave, the mic, the Do chip). */
section{border-top:0}
.top{background:rgba(238,240,234,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.center{text-align:center}
.center p{margin-left:auto;margin-right:auto}
.center .ctas{justify-content:center}
.hero.center{padding:88px 32px 8px}
.hero.center h1{font-size:clamp(46px,7.4vw,92px);letter-spacing:-.045em;line-height:.98;margin-bottom:22px}
.hero.center .lede{max-width:48ch}
.cta{background:var(--green)}
.cta p,.cta .meta{color:rgba(238,240,234,.82)}

.gpanel{margin:56px auto 0;max-width:980px;background:var(--green);color:var(--chalk);border-radius:32px;padding:44px 24px 36px;display:flex;flex-direction:column;align-items:center;text-align:center}
.gpanel-h{font:800 clamp(24px,3vw,32px)/1.1 var(--display);letter-spacing:-.03em;margin-bottom:18px}
.pick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:26px}
.pick button{font:600 14.5px var(--ui);height:38px;padding:0 16px;border-radius:19px;border:0;cursor:pointer;background:rgba(238,240,234,.14);color:var(--chalk);transition:background .15s,color .15s}
.pick button:hover{background:rgba(238,240,234,.24)}
.pick button[aria-pressed="true"]{background:var(--chalk);color:var(--graphite)}

/* the bar, as in the app */
.dbar{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 14px 0 7px;border-radius:22px;background:var(--graphite);color:var(--chalk);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);max-width:100%}
.dchip{flex:none;height:28px;min-width:44px;padding:0 10px;border-radius:14px;display:grid;place-items:center;font-size:13px;font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(238,240,234,.35)}
#agentdemo .dchip{background:var(--pink);color:var(--graphite);box-shadow:none}
.dviz{position:relative;flex:none;width:72px;height:30px}
.dviz svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dwave path{fill:none;stroke:var(--pink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;transition:opacity .3s,stroke .3s}
.dbar[data-state="idle"] .dwave path{stroke:rgba(238,240,234,.45)}
.dbar[data-state="working"] .dwave path{stroke:rgba(238,240,234,.75)}
.dbar[data-state="done"] .dwave path{opacity:0}
.dcheck path{fill:none;stroke:#45D7A2;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .6s ease .1s}
.dbar[data-state="done"] .dcheck path{stroke-dashoffset:0}
.dstat{font-size:14px;font-weight:500;color:rgba(238,240,234,.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.dstat:empty{display:none}
.dbar[data-state="done"] .dstat{color:#45D7A2;font-weight:600}

/* the agent's receipt */
.rcpt{width:min(460px,100%);text-align:start}
.rcpt .dbar{display:flex;width:100%;border-radius:22px 22px 0 0;box-shadow:none}
.rbody{background:var(--graphite);border-radius:0 0 22px 22px;padding:4px 18px 14px;position:relative;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.rbody::before{content:"";position:absolute;left:18px;right:18px;top:0;border-top:1.5px dashed rgba(238,240,234,.25)}
.rask{padding:14px 0 12px;border-bottom:1px dashed rgba(238,240,234,.2);font-size:15.5px;line-height:1.45;min-height:4.6em}
.rask small{display:block;color:rgba(238,240,234,.55);font-size:12.5px;margin-bottom:3px}
.rsteps{list-style:none;display:grid;align-content:start;gap:9px;padding:12px 0;min-height:186px}
.rsteps li{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:center;font-size:14.5px;animation:rin .3s ease}
.rsteps li svg{width:16px;height:16px;fill:none;stroke:#45D7A2;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.rsteps li i{width:10px;height:10px;border-radius:50%;background:var(--pink);margin-left:3px;animation:rpulse 1.2s ease-in-out infinite}
.rsteps li.ask{font-weight:600}
.rsteps li.stopped{color:rgba(238,240,234,.5)}
.rsteps li.stopped i{animation:none;background:rgba(238,240,234,.35)}
.rsteps time{font-size:12px;color:rgba(238,240,234,.5);font-variant-numeric:tabular-nums}
@keyframes rpulse{50%{transform:scale(.55);opacity:.5}}
@keyframes rin{from{opacity:0;transform:translateY(4px)}}
.racts{display:flex;gap:8px;padding-top:12px;border-top:1px dashed rgba(238,240,234,.2)}
.racts>*{flex:1;font:600 13.5px var(--ui);border-radius:12px;border:0;padding:9px;text-align:center;background:rgba(238,240,234,.1);color:var(--chalk)}
.racts button{cursor:pointer}
.racts .rok{background:var(--chalk);color:var(--graphite)}
.racts [hidden]{display:none}
.rstamp{margin-top:16px;min-height:1.6em;font-weight:600;color:var(--chalk);opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.rstamp.on{opacity:1;transform:none}

/* dictation */
.dapp{width:min(560px,100%);background:#fff;color:var(--graphite);border-radius:16px;text-align:start;box-shadow:0 30px 60px -30px rgba(0,0,0,.55);overflow:hidden}
.dapp-top{font-size:13px;color:var(--stone);padding:11px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.dapp-text{padding:16px 18px 18px;min-height:9.2em;font-size:16px;line-height:1.6;white-space:pre-line;max-width:none}
.dcaret{display:inline-block;width:2px;height:1.1em;vertical-align:-.2em;background:var(--graphite);margin-inline-start:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.dheard{min-height:3.2em;max-width:52ch;margin:16px auto 0;font-size:15.5px;font-style:italic;color:rgba(238,240,234,.82);transition:opacity .3s}
.dheard.gone{opacity:0}
.dctl{display:flex;align-items:center;gap:12px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.dhold{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px 0 14px;border-radius:24px;border:0;cursor:pointer;background:var(--pink);color:var(--graphite);font:700 15px var(--ui);touch-action:none;user-select:none;-webkit-user-select:none;transition:transform .12s,box-shadow .12s}
.dhold svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.dhold.down{transform:scale(.96);box-shadow:0 0 0 6px rgba(255,79,139,.3)}
.dhint{margin-top:12px;font-size:13.5px;color:rgba(238,240,234,.72)}
.dhint kbd{color:var(--graphite)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}

/* three highlights, no boxes */
.hl{padding:72px 0 24px}
.hl3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.hl3 b{display:block;font:800 clamp(24px,2.4vw,30px)/1.08 var(--display);letter-spacing:-.03em;margin-bottom:10px}
.hl3 p{color:var(--stone);font-size:16.5px}
@media (max-width:860px){.hl3{grid-template-columns:1fr;gap:28px}}
@media (max-width:560px){.gpanel{border-radius:24px;padding:30px 14px 26px}.hero.center{padding:56px 20px 0}}
@media (prefers-reduced-motion:reduce){.rsteps li,.rsteps li i,.dcaret{animation:none}}

/* Scroll scenes: the panel is pinned while the page scrolls through it. */
.scene.pin .gpanel{position:sticky;top:82px}

/* What the agent works with */
.works{padding:88px 0 8px}
.bigh{font-size:clamp(34px,4.6vw,56px);letter-spacing:-.04em;line-height:1.02;margin:0 auto 18px;max-width:22ch}
.bigh span{color:var(--green)}
.works .lede{max-width:52ch}
.apps{overflow:hidden;margin:40px 0 0;padding:6px 0}
.apps-track{display:flex;width:max-content;animation:appsdrift 60s linear infinite}
.apps-track:hover{animation-play-state:paused}
@keyframes appsdrift{to{transform:translateX(-50%)}}
.apps-row{list-style:none;display:flex;gap:10px;padding-inline-end:10px}
.apps-row li{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;height:46px;padding:0 18px 0 12px;border-radius:23px;background:var(--paper);border:1px solid var(--line);font-weight:600;font-size:15px}
.apps-row svg{width:20px;height:20px;flex:none}
.apps-row img{width:22px;height:22px;flex:none}
.ways{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:36px}
.ways div{background:var(--graphite);color:var(--chalk);border-radius:20px;padding:22px 20px 20px}
.ways b{display:block;font:800 34px/1 var(--display);letter-spacing:-.03em;margin-bottom:10px}
.ways span{display:block;font-size:15px;color:rgba(238,240,234,.75);line-height:1.45}
.more{margin:22px auto 0;max-width:none;font-size:15.5px;color:var(--stone)}
.more a{font-weight:600;color:var(--graphite)}
@media (max-width:860px){.ways{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.ways{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.apps-track{animation:none}}

/* Official Microsoft artwork: scale proportionally without modifying it. */
.store-badge{display:inline-flex;flex-shrink:0;align-items:center;line-height:0}
.store-badge img{display:block;width:200px;max-width:100%;height:auto}
.topr .store-badge img{width:168px}
@media(max-width:600px){.topr .store-badge img{width:130px}}