/* The hero demo: three emails play in turn, each with one flagged sentence (Justin's wording, 6 Nov 2026).
   Built by MKT from APP's 0.11.8 coach card spec, moved into the site by WEB. Every class starts cd- so
   nothing here can touch the rest of the page, and nothing on the page can touch it. Light only. */
.cdemo{--cd-card:#FFFFFF;--cd-ink:#2C2F36;--cd-soft:#5B616D;--cd-line:#D9DDE5;--cd-chrome:#F6F7F9;--cd-blue:#2F6FDE;
  --cd-surface:#FBFCFE;--cd-quiet:#7C828C;--cd-well:rgba(225,229,236,.5);--cd-hair:#DBDFE6;
  --cd-red:#DD5F42;--cd-red-ink:#BF3F28;--cd-amber:#D98A1E;--cd-info:#036BBA;--cd-info-fill:rgba(3,107,186,.047);
  position:relative;width:min(900px,100%);margin:clamp(140px,calc(187.7px - 4.55vw),170px) auto 0;
  font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--cd-ink);text-align:left;font-size:16px;line-height:1.5}
@media (max-width:359.98px){.cdemo{margin-top:300px}}
.cdemo [hidden]{display:none!important}
.cd-stage{position:relative;min-width:0}
.cd-win{background:var(--cd-card);border:1px solid var(--cd-line);border-radius:10px;box-shadow:0 18px 50px rgba(30,35,45,.16);overflow:hidden;width:min(100%,680px);margin:0 auto}
.cd-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;background:var(--cd-chrome);border-bottom:1px solid var(--cd-line);font-size:13px;color:var(--cd-soft)}
/* a Windows window, not a Mac: the title at the left, minimise, maximise and close at the right (Justin, 6 Nov 2026) */
.cd-bar{padding:0 0 0 14px;height:34px}
.cd-bar b{font-weight:400;color:var(--cd-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cd-ctl{margin-left:auto;display:flex;height:100%;flex:none}
.cd-ctl svg{width:44px;height:100%;padding:0 17px;box-sizing:border-box;fill:none;stroke:#4A4E58;stroke-width:1;stroke-linecap:round}
.cd-tools{display:flex;gap:6px;padding:8px 12px;border-bottom:1px solid var(--cd-line);align-items:center}
.cd-send{background:var(--cd-blue);color:#fff;font-weight:600;font-size:13px;border-radius:5px;padding:5px 14px}
.cd-tools .cd-t{height:8px;width:44px;border-radius:4px;background:var(--cd-line);opacity:.7}
.cd-field{display:flex;gap:12px;padding:8px 14px;border-bottom:1px solid var(--cd-line);font-size:14px}
.cd-field em{font-style:normal;color:var(--cd-soft);width:56px;flex:none}
.cd-chip{background:var(--cd-chrome);border:1px solid var(--cd-line);border-radius:12px;padding:0 9px;font-size:13px}
.cd-body{position:relative;padding:16px 14px 58px;min-height:370px;font-size:15px}
.cd-draft{white-space:pre-wrap;min-height:8.5em;margin:0}
.cd-caret{display:inline-block;width:2px;height:1.1em;background:var(--cd-ink);vertical-align:-3px;margin-left:1px;animation:cd-blink 1s steps(1) infinite}
@keyframes cd-blink{50%{opacity:0}}
.cdemo mark{color:inherit;background:none;padding:0;text-underline-offset:2px;text-decoration-line:underline;transition:opacity .25s}
.cdemo mark.cd-hi{text-decoration-style:solid;text-decoration-color:var(--cd-red);text-decoration-thickness:1.2px}
.cdemo mark.cd-lo{text-decoration-style:dashed;text-decoration-color:var(--cd-amber);text-decoration-thickness:1px}
.cdemo mark.cd-lit{background:var(--cd-info-fill);border:1px solid var(--cd-info);border-radius:3px;padding:2px 4px 2px 2px;margin:0 -5px 0 -3px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cdemo mark.cd-done{text-decoration:none;background:none;border-color:transparent}
/* the light, copied from the app: 17px, radial gradient, two shadows, a number on amber and red only */
.cd-lamp{position:absolute;right:16px;bottom:16px;width:23px;height:23px;display:grid;place-items:center}
.cd-orb{width:17px;height:17px;border-radius:50%;display:grid;place-items:center;font:700 10px/1 "Hanken Grotesk",sans-serif;color:#2C2F36;padding-top:.8px;box-sizing:border-box;
  background:radial-gradient(78% 78% at 34% 30%,var(--c0) 0%,var(--c1) 100%);box-shadow:0 1px 3px rgba(0,0,0,.45),inset 0 1px 1px rgba(255,255,255,.55)}
.cd-lamp.off .cd-orb{--c0:#C8CDD4;--c1:#8B909A}
.cd-lamp.checking .cd-orb{--c0:#A9CBEA;--c1:#4682B4}
.cd-lamp.amber .cd-orb{--c0:#FFD483;--c1:#F0AF3A}
.cd-lamp.red .cd-orb{--c0:#FF9082;--c1:#F0574A}
.cd-lamp.green .cd-orb{--c0:#8FF0C6;--c1:#41C48F}
.cd-ring{position:absolute;inset:0;width:23px;height:23px;opacity:0}
.cd-lamp.checking .cd-ring{opacity:1;animation:cd-spin .8s linear infinite}
@keyframes cd-spin{to{transform:rotate(360deg)}}
/* the coach card, from the app's 0.11.8 code (APP spec, 6 Nov 2026) */
.cd-coach{position:absolute;top:205px;right:max(0px,calc(50% - 400px));width:min(420px,64%);background:var(--cd-surface);border:1px solid var(--cd-hair);border-radius:8px;padding:12px;
  box-shadow:0 18px 50px rgba(30,35,45,.16);font-size:11px;line-height:1.45;color:var(--cd-ink);
  opacity:0;transform:translateY(10px) scale(.98);pointer-events:none;transition:opacity .35s,transform .35s}
.cd-coach.open{opacity:1;transform:none}
.cd-top{display:flex;align-items:center;gap:8px}
.cd-pills{display:flex;gap:5px;flex:1;min-width:0;overflow:hidden}
.cd-pill{font:600 10.2px/1.3 "Hanken Grotesk",sans-serif;padding:3px 8px;border-radius:6px;border:1px solid;white-space:nowrap}
.cd-pill.amber{border-color:var(--cd-amber);background:rgba(217,138,30,.12);color:var(--cd-ink)}
.cd-pill.red{border-color:var(--cd-red);background:rgba(221,95,66,.12);color:var(--cd-red-ink)}
.cd-cnt{font-size:9.8px;color:var(--cd-quiet);white-space:nowrap}
.cd-x{width:16px;height:16px;display:grid;place-items:center;font-size:10px;color:var(--cd-quiet)}
.cd-para{margin:6px 0 0;font-size:11px}
.cd-try{display:block;margin-top:12px;font-size:9.8px;font-weight:600;color:var(--cd-quiet)}
.cd-sug{margin:5px 0 0;background:var(--cd-well);border:1px solid var(--cd-hair);border-radius:8px;padding:11px;font-size:11px}
.cd-acts{display:flex;margin-top:12px;gap:8px}
.cd-btn{font:600 11px "Hanken Grotesk",sans-serif;height:32px;box-sizing:border-box;display:inline-flex;align-items:center;padding:0 12px;border-radius:8px;background:var(--cd-surface);border:1px solid var(--cd-hair);color:var(--cd-ink);transition:transform .12s}
.cd-btn.yes{background:linear-gradient(135deg,#FF9A52 15%,#ED6D18 95%);border:0;color:#46230C}
.cd-btn.press{transform:scale(.94)}
/* the pretend pointer */
.cd-ptr{position:absolute;left:0;top:0;width:22px;height:22px;pointer-events:none;opacity:0;transition:transform .9s cubic-bezier(.5,0,.2,1),opacity .3s;z-index:5}
.cd-ptr.on{opacity:1}
.cd-ptr svg{width:22px;height:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.cd-ptr .cd-click{position:absolute;left:-9px;top:-9px;width:22px;height:22px;border-radius:50%;border:2px solid #FE7F2D;opacity:0}
.cd-ptr.click .cd-click{animation:cd-ringout .5s ease-out}
@keyframes cd-ringout{0%{opacity:1;transform:scale(.4)}100%{opacity:0;transform:scale(1.6)}}
/* progress bar: one button per email, grey track, Cantis orange fill */
.cd-prog{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;width:min(100%,680px);margin:20px auto 0}
.cd-seg{appearance:none;-webkit-appearance:none;border:0;margin:0;padding:10px 0;background:none;cursor:pointer;border-radius:4px;display:block;width:100%}
.cd-seg .cd-track{display:block;height:4px;border-radius:2px;background:var(--cd-line);overflow:hidden}
.cd-seg .cd-fill{display:block;height:100%;width:0;background:#FE7F2D}
.cd-seg:focus-visible{outline:2px solid #FE7F2D;outline-offset:3px}
/* the three steps under it, lit in time with the email */
.cd-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:900px;margin:56px auto 0;gap:28px}
.cd-step{border-bottom:3px solid #D9DDE5;padding:0 0 12px;transition:border-color .3s}
.cd-step h3{margin:0 0 2px;font-family:"Outfit",sans-serif;font-weight:600;font-size:17px;color:#2C2F36}
.cd-step p{margin:0;color:#4A505B;font-size:14.5px}
.cd-step.now{border-bottom-color:#FE7F2D}
@media (max-width:640px){
  .cd-coach{left:8px;right:8px;width:auto}
  .cd-body{min-height:545px}
  .cd-field em{width:46px}
  .cd-steps{grid-template-columns:1fr;gap:16px;margin-top:40px}
}
@media (prefers-reduced-motion:reduce){.cdemo *{animation:none!important;transition:none!important}}
/* the platform line under the button, clearer that it is Windows, Outlook and Teams only for now (Justin, 6 Nov 2026) */
.hero .platform{font-size:15px}
.hero .platform b{font-weight:700;color:#EEF0F4}

/* Sofia's message is a Teams chat (Justin, 6 Nov 2026). The window morphs from Outlook into Teams and back:
   Outlook's parts fade out, the window narrows, Teams' parts fade in. Both panes are the same height, so
   nothing under the demo moves. Where the light sits and where the card opens is from the app's code, via PM:
   inside the compose box at its bottom right, 10px in from each edge, and the card beside the box, to its left */
.cd-win{transition:width .7s cubic-bezier(.5,0,.2,1),transform .7s cubic-bezier(.5,0,.2,1)}
.cd-ol{transition:opacity .28s}.cd-tm{transition:opacity .6s .1s}
.cd-tm{display:none;grid-template-columns:52px minmax(0,1fr)}
.cd-win.teams{width:min(100%,520px)}
.cd-win.teams .cd-ol{display:none}
.cd-win.teams .cd-tm{display:grid}
.cd-search{display:none;flex:0 1 220px;height:20px;margin:0 auto;border:1px solid var(--cd-line);border-radius:6px;background:#fff;color:#8B909A;font-size:11.5px;align-items:center;padding:0 9px}
.cd-win.teams .cd-search{display:flex}
.tm-rail{background:#EFF0F3;border-right:1px solid var(--cd-line);display:flex;flex-direction:column;align-items:center;gap:16px;padding:14px 0}
.tm-rail i{width:20px;height:18px;border-radius:5px;background:#D4D8DF;display:block}
.tm-rail i.on{background:#8B909A}
.tm-chat{display:flex;flex-direction:column;min-width:0}
.tm-head{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--cd-line)}
.tm-av{width:28px;height:28px;border-radius:50%;background:#DDE0E6;color:#4A4E58;font-size:10.5px;font-weight:600;display:grid;place-items:center;flex:none}
.tm-head b{font-size:14px;font-weight:600}
.tm-msgs{flex:1;padding:12px 14px;display:flex;flex-direction:column;gap:4px;font-size:14px}
.tm-meta{font-size:11px;color:var(--cd-soft)}
.tm-bub{background:#F1F2F5;border-radius:8px;padding:8px 12px;max-width:85%;align-self:flex-start}
.tm-box{position:relative;margin:0 12px 12px;border:1px solid var(--cd-line);border-radius:8px;padding:10px 12px 8px}
.tm-input{font-size:15px;min-height:4.5em}
.tm-input .cd-draft{min-height:0}
.tm-box .cd-lamp{right:7px;bottom:7px}
.tm-tools{display:flex;gap:8px;margin-top:8px;align-items:center;padding-right:30px}
.tm-tools i{width:16px;height:14px;border-radius:4px;background:#E1E4E9;display:block}
.tm-tools svg{margin-left:auto;width:18px;height:18px;fill:none;stroke:#6B707C;stroke-width:1.6;stroke-linejoin:round}
.cd-coach.tm{width:340px}
@media (max-width:640px){.cd-win.teams .cd-search,.tm-rail{display:none}.cd-tm{grid-template-columns:minmax(0,1fr)}.cd-coach.tm{width:auto}}