/* ============================================================
   Docxedo interactive hero demo — shared component styles.
   Used by the homepage hero.
   (Pairs with hero-demo.js and _doc.css)
   ============================================================ */
:root { --ease: cubic-bezier(.16,.84,.44,1); }

.dxdemo { text-align:center; }
/* when embedded in the homepage hero, drop the video-slot framing */
.hero__demo.dxdemo { aspect-ratio:auto; overflow:visible; max-width:none; background:transparent; box-shadow:none; border-radius:0; margin-top:2.5rem; }
.dxdemo__foot { margin-top:1.6rem; text-align:center; }

/* ── Word window ── */
.word { position:relative; width: 940px; max-width:100%; margin:0 auto; background:#fff; border-radius:12px; overflow:hidden; box-shadow: 0 30px 90px rgba(0,0,0,.55); text-align:left; }
.word__titlebar { display:flex; align-items:center; gap:.55rem; padding-left:.8rem; background:#f3f2f1; border-bottom:1px solid #e1dfdd; }
.word__wicon { width:1.15rem; height:1.15rem; border-radius:3px; background:#2b579a; color:#fff; font-weight:700; font-size:.72rem; display:grid; place-items:center; font-family:Georgia,serif; }
.word__file { font-size:.8rem; color:#323130; font-weight:600; padding:.5rem 0; }
.word__file span { color:#a19f9d; font-weight:500; }
.word__wbtns { margin-left:auto; display:flex; align-self:stretch; }
.wbtn { width:2.9rem; display:grid; place-items:center; font-size:.78rem; color:#444; }
.wbtn:hover { background:#e5e5e5; }
.wbtn--close:hover { background:#e81123; color:#fff; }

.word__tabs { display:flex; align-items:flex-end; gap:.1rem; padding:0 .6rem; background:#f3f2f1; border-bottom:1px solid #e1dfdd; font-size:.74rem; }
.word__tab { padding:.5rem .7rem; color:#444; white-space:nowrap; border-bottom:2px solid transparent; }
.word__tab.active { color:#2b579a; font-weight:600; border-bottom-color:#2b579a; background:#fff; border-radius:4px 4px 0 0; }
.word__tab--dx { color:#9a7a00; font-weight:600; }

.word__ribbon { display:flex; align-items:stretch; padding:.5rem .4rem .25rem; background:#fbfbfa; border-bottom:1px solid #e1dfdd; overflow:hidden; }
.rg { display:flex; flex-direction:column; align-items:center; padding:0 .55rem; border-right:1px solid #ececec; }
.rg:last-child { border-right:0; }
.rg__row { display:flex; align-items:center; gap:.25rem; flex:1; }
.rg__lbl { font-size:.62rem; color:#9a9a9a; margin-top:.25rem; }
.ic { width:1.45rem; height:1.45rem; display:grid; place-items:center; border-radius:4px; color:#666; }
.ic svg { width:.9rem; height:.9rem; stroke-width:1.8; }
.ic--big { width:1.9rem; height:1.9rem; }
.ic--big svg { width:1.2rem; height:1.2rem; }
.fontbox { display:flex; align-items:center; gap:.3rem; border:1px solid #d9d8d6; border-radius:3px; padding:.18rem .4rem; font-size:.68rem; color:#333; background:#fff; }
.fontbox .cv { color:#999; font-size:.6rem; }
.fontbox--sz { width:1.9rem; justify-content:space-between; }
.gallery { display:flex; gap:.3rem; }
.gal { width:3.1rem; border:1px solid #e3e2e0; border-radius:3px; padding:.2rem .25rem; background:#fff; font-size:.56rem; color:#444; line-height:1.1; text-align:center; }
.gal b { display:block; font-size:.62rem; }
.gal--n b { font-weight:400; }
.gal--h1 b { color:#2e74b5; }
.gal--t b { color:#1f3864; font-size:.72rem; }
.rg--dx { margin-left:auto; border-left:1px solid #ececec; border-right:0; }
.dxbtn { display:flex; flex-direction:column; align-items:center; gap:.2rem; border:0; background:transparent; cursor:pointer; font-family:inherit; padding:.1rem .55rem; border-radius:6px; }
.dxbtn:hover { background:#fff6d6; }
.dxbtn img { width:2rem; height:auto; display:block; }
.dxbtn span { font-size:.66rem; font-weight:600; color:#8a6d00; }
.dxbtn.pulse { animation:dxbtnPulse 1.25s var(--ease) infinite; border-radius:8px; background:#fff6d6; }
@keyframes dxbtnPulse { 0%,100%{ box-shadow:0 0 0 0 rgba(242,194,0,.6); } 70%{ box-shadow:0 0 0 14px rgba(242,194,0,0); } }
.dxbtn.pulse img { animation:dxbtnNudge 1.25s var(--ease) infinite; }
@keyframes dxbtnNudge { 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

/* ── Document (A4 sheets) + pane ── */
.word__main { position:relative; display:flex; }
.word__page-wrap { background:#e8e8e8; padding:1.5rem; flex:1; min-width:0; height:560px; overflow-y:auto; transition:padding .4s var(--ease); }
.word__main.pane-open .word__page-wrap { padding-right:300px; }
.page { position:relative; margin:0; }
.docstack { display:grid; }
.docstack > .docface { grid-area:1 / 1; transition:opacity .55s var(--ease); }
.docface--after { opacity:0; }
.page.styled .docface--before { opacity:0; pointer-events:none; }
.page.styled .docface--after  { opacity:1; }
.page:not(.styled) .docface--after { pointer-events:none; }
.sheet { display:block; width:520px; max-width:100%; margin:0 auto 1.5rem; box-shadow:0 1px 9px rgba(0,0,0,.22); background:#fff; }
.sheet-wrap { position:relative; width:520px; max-width:100%; margin:0 auto 1.5rem; }
.sheet-wrap .sheet { margin:0; }
.cmt-anchor { position:absolute; top:40%; right:1%; width:33%; height:10%; pointer-events:none; }
.sweep { position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(105deg, transparent 30%, rgba(242,194,0,.28) 50%, transparent 70%); transform:translateX(-100%); z-index:3; }
.page.applying .sweep { opacity:1; animation:sweep 1s var(--ease); }
@keyframes sweep { from{transform:translateX(-100%);} to{transform:translateX(100%);} }

/* ── Task pane ── */
.taskpane { position:absolute; top:0; right:0; bottom:0; width:270px; background:#fbf7ee; border-left:1px solid #e1dfdd; transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; z-index:5; }
.word__main.pane-open .taskpane { transform:none; box-shadow:-12px 0 30px rgba(0,0,0,.12); }
.tp__bar { display:flex; align-items:center; justify-content:space-between; padding:.4rem .75rem; background:#efe9dc; color:#5a5446; font-size:.74rem; }
.tp__bar-x { cursor:pointer; color:#8a8275; font-size:.8rem; }
.tp__head { display:flex; align-items:center; gap:.5rem; padding:.75rem .85rem; background:#fff; border-bottom:1px solid #efece4; }
.tp__burger { color:#555; font-size:1.05rem; line-height:1; }
.tp__logo { width:1.5rem; height:auto; }
.tp__name { font-weight:800; font-size:1rem; color:#141414; }
.tp__body { padding:1rem .9rem; overflow-y:auto; flex:1; }
.tp__flabel { display:block; font-size:.82rem; color:#333; margin-bottom:.45rem; }
.tp__q { display:inline-grid; place-items:center; width:.95rem; height:.95rem; border-radius:50%; background:#cfc9bb; color:#fff; font-size:.6rem; vertical-align:middle; }
.tp__select { position:relative; background:#fff; border:1px solid #d9d4c7; border-radius:7px; padding:.55rem .7rem; display:flex; align-items:center; justify-content:space-between; cursor:pointer; color:#3a3a3a; font-size:.82rem; }
.tp__select-val.ph { color:#9a9a8c; }
.tp__select-cv svg { width:.85rem; height:.85rem; color:#999; }
.tp__opts { list-style:none; margin:.3rem 0 0; padding:.25rem; position:absolute; top:100%; left:0; right:0; background:#fff; border:1px solid #d9d4c7; border-radius:7px; box-shadow:0 10px 26px rgba(0,0,0,.14); display:none; z-index:6; }
.tp__select.open .tp__opts { display:block; }
.tp__opts li { padding:.42rem .55rem; border-radius:5px; cursor:pointer; font-size:.82rem; color:#3a3a3a; }
.tp__opts li:hover, .tp__opts li.hl { background:#fdf0c9; }
.tp__style-btn { width:100%; margin:1.1rem 0 .6rem; opacity:.5; transition:opacity .25s; }
.tp__style-btn.active { opacity:1; }
.tp__acc { display:flex; align-items:center; justify-content:space-between; padding:.7rem .15rem; border-top:1px solid #e8e2d4; font-weight:600; font-size:.85rem; color:#3a3528; }
.tp__acc .cv svg { width:.85rem; height:.85rem; color:#998f78; }
.tp__foot-note { margin-top:1.5rem; font-size:.72rem; font-style:italic; color:#9a8f76; text-align:center; line-height:1.55; }
.tp__foot-note u { cursor:pointer; }

/* ── Glow coach-mark tour ── */
.tour[hidden] { display:none; }
.tour { position:absolute; inset:0; z-index:600; overflow:hidden; pointer-events:none; }
.tour__ring { position:absolute; border:2px solid var(--gold); border-radius:8px; transition:top .2s, left .2s, width .2s, height .2s; pointer-events:auto; cursor:pointer; box-shadow:0 0 0 4px rgba(242,194,0,.18); }
@keyframes ringPulse { 0%,100% { box-shadow:0 0 0 0 rgba(242,194,0,.55); } 70% { box-shadow:0 0 0 13px rgba(242,194,0,0); } }
.tour__bubble { position:absolute; width:250px; max-width:calc(100% - 24px); background:#fff; border-radius:12px; box-shadow:0 18px 44px rgba(0,0,0,.4), 0 0 0 2px var(--gold), 0 0 22px 3px rgba(242,194,0,.55); padding:.9rem 1rem; pointer-events:auto; cursor:pointer; }
.tour__bubble:hover { box-shadow:0 18px 50px rgba(0,0,0,.42), 0 0 0 2px var(--gold), 0 0 28px 6px rgba(242,194,0,.75); }

/* expanding-circle beacon on the first step's CTA */
.dxping { position:absolute; z-index:613; width:72px; height:72px; margin:-36px 0 0 -36px; pointer-events:none; display:none; }
.dxping.show { display:block; }
/* fires once per hand-tap (synced to dxHand's 1.9s cycle, press at ~38%), then quiet */
.dxping span { position:absolute; inset:0; border-radius:50%; border:3px solid var(--gold); opacity:0; animation:dxPing 1.9s var(--ease) infinite; }
.dxping span:nth-child(2){ animation-delay:.09s; }
.dxping span:nth-child(3){ animation-delay:.18s; }
@keyframes dxPing {
  0%,33% { transform:scale(.4);  opacity:0; }
  40%    { transform:scale(.55); opacity:.7; }
  72%    { transform:scale(2.6); opacity:0; }
  100%   { transform:scale(2.6); opacity:0; }
}
.scrollcue { position:absolute; bottom:14px; left:50%; transform:translateX(-50%); width:32px; height:32px; border-radius:50%; background:rgba(20,20,20,.82); color:#fff; display:grid; place-items:center; z-index:8; cursor:pointer; pointer-events:auto; box-shadow:0 4px 14px rgba(0,0,0,.3); transition:opacity .35s, background .2s; animation:cueBob 1.5s ease-in-out infinite; }
.scrollcue:hover { background:var(--gold); color:#141414; }
.scrollcue svg { width:16px; height:16px; }
.scrollcue.hide { opacity:0; }
@keyframes cueBob { 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,5px); } }
.tour__step { font-size:.64rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-dark,#b8860b); margin-bottom:.3rem; }
.tour__title { font-size:.98rem; font-weight:800; color:#141414; margin-bottom:.3rem; line-height:1.2; }
.tour__body { font-size:.82rem; color:#555; line-height:1.5; margin-bottom:.85rem; }
.tour__actions { display:flex; align-items:center; justify-content:flex-end; }
.tour__next.btn { padding:.5rem 1.1rem; font-size:.85rem; }

/* ── Animated click-hand ── */
.dxcursor { position:absolute; z-index:615; width:26px; height:30px; pointer-events:none; opacity:0; transition:opacity .25s; filter:drop-shadow(0 3px 5px rgba(0,0,0,.45)); }
.dxcursor.show { opacity:1; }
.dxcursor svg { display:block; width:100%; height:100%; }
.dxcursor.tap { animation:dxTap 1.9s var(--ease) infinite; }
.dxcursor.tap.move { animation:dxHand 1.9s var(--ease) infinite; }
.dxcursor__ripple { position:absolute; left:0; top:0; width:26px; height:26px; margin:-8px 0 0 -8px; border-radius:50%; background:rgba(242,194,0,.55); opacity:0; transform:scale(.3); }
.dxcursor.tap .dxcursor__ripple { animation:dxHandRipple 1.9s var(--ease) infinite; }
@keyframes dxHand {
  0%   { transform:translate(30px,34px) scale(1); }
  28%  { transform:translate(0,0) scale(1); }
  38%  { transform:translate(0,0) scale(.8); }
  50%  { transform:translate(0,0) scale(1); }
  80%  { transform:translate(0,0) scale(1); }
  100% { transform:translate(30px,34px) scale(1); }
}
/* tap-in-place (no travel) for steps after the first */
@keyframes dxTap {
  0%,28% { transform:scale(1); }
  38%    { transform:scale(.8); }
  50%    { transform:scale(1); }
  100%   { transform:scale(1); }
}
@keyframes dxHandRipple {
  0%,34% { opacity:0; transform:scale(.3); }
  40%    { opacity:.75; transform:scale(.55); }
  56%    { opacity:0; transform:scale(1.6); }
  100%   { opacity:0; transform:scale(1.6); }
}

.replay[hidden] { display:none; }
.replay { display:inline-flex; align-items:center; gap:.5rem; background:var(--gold); border:0; color:#141414; padding:.75rem 1.6rem; border-radius:100px; cursor:pointer; font-family:inherit; font-size:.95rem; font-weight:700; box-shadow:0 6px 20px rgba(242,194,0,.45); transition:transform .15s, box-shadow .2s; }
.replay:hover { transform:translateY(-2px); box-shadow:0 9px 26px rgba(242,194,0,.55); }
.dxdemo__actions, .stage-foot .dxdemo__actions { display:flex; gap:.75rem; justify-content:center; flex-wrap:wrap; margin-top:1rem; }
.replay--ghost { background:transparent; color:rgba(255,255,255,.85); border:1px solid rgba(255,255,255,.32); box-shadow:none; }
.replay--ghost:hover { background:rgba(255,255,255,.08); box-shadow:none; color:#fff; }
.caption { color:rgba(255,255,255,.5); font-size:.85rem; margin-top:1rem; min-height:1.2em; }