/* FM Digital Solutions: SaaS and product development. Depends on tokens.css, global.css */
.pd-hero { padding-top: calc(var(--nav-h) + 5rem); padding-bottom: 4.5rem; border-bottom: 1px solid var(--border); background: radial-gradient(60% 80% at 85% 0%, rgba(99,102,241,.14), transparent 70%); }
.pd-eyebrow { display: flex; align-items: center; gap: .5rem; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 1rem; }
.pd-dot { width: 8px; height: 8px; border-radius: 50%; background: #6366f1; box-shadow: 0 0 0 4px rgba(99,102,241,.2); }
.pd-h1 { font-family: var(--font-head); font-weight: 800; font-size: clamp(2.2rem, 5vw, 3.75rem); line-height: 1.05; letter-spacing: -.035em; color: #fff; margin-bottom: 1.25rem; max-width: 18ch; text-wrap: balance; }
.pd-h2 { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.1; letter-spacing: -.03em; color: #fff; margin-bottom: 1.5rem; max-width: 24ch; text-wrap: balance; }
.pd-sub { color: var(--fg-muted); line-height: 1.7; max-width: 58ch; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-top: 2rem; }
.pd-btn { background: #6366f1; }
.pd-btn:hover { background: #4f46e5; }
.pd-ghost { display: inline-flex; align-items: center; color: var(--fg); text-decoration: none; font-weight: 600; border: 1px solid var(--border); border-radius: 6px; padding: 10px 18px; transition: border-color .15s; }
.pd-ghost:hover { border-color: #6366f1; }
.pd-section { padding-block: 4.5rem; border-bottom: 1px solid var(--border); }
.pd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.pd-cell { padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; min-width: 0; }
.pd-cell h3, .pd-step h3, .pd-price h3 { font-family: var(--font-head); font-size: 1.05rem; color: var(--fg); margin-bottom: .5rem; }
.pd-cell p, .pd-step p, .pd-price p { color: var(--fg-muted); font-size: .9rem; line-height: 1.6; }
.pd-num { display: block; font-family: var(--font-mono); font-size: 11px; color: #a5b4fc; margin-bottom: .75rem; }
.pd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; counter-reset: s; }
.pd-step { padding: 1.5rem; border-left: 2px solid #6366f1; background: var(--surface); border-radius: 0 10px 10px 0; }
.pd-step-n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(99,102,241,.18); color: #a5b4fc; font-weight: 700; margin-bottom: .75rem; }
.pd-price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.pd-price { padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pd-price-alt { border-color: rgba(99,102,241,.5); }
.pd-tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: #a5b4fc; background: rgba(99,102,241,.15); padding: .25rem .6rem; border-radius: 999px; margin-bottom: 1rem; }
.pd-note { margin-top: 1.25rem; color: var(--fg-muted); font-size: .9rem; }
.pd-why { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.pd-faq { display: grid; gap: .75rem; max-width: 760px; }
.pd-q { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 1rem 1.25rem; }
.pd-q summary { cursor: pointer; font-weight: 600; color: var(--fg); }
.pd-q p { margin-top: .75rem; color: var(--fg-muted); line-height: 1.65; font-size: .92rem; }
.pd-quote { border-bottom: 0; }
.pd-quote-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.pd-form { display: grid; gap: .5rem; padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pd-form label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-subtle); margin-top: .5rem; }
.pd-form input, .pd-form textarea { width: 100%; background: var(--bg, #0b0b12); border: 1px solid var(--border); border-radius: 6px; padding: 11px 12px; color: var(--fg); font: inherit; }
.pd-form input:focus, .pd-form textarea:focus { outline: none; border-color: #6366f1; }
.pd-form .pd-btn { justify-self: start; margin-top: 1rem; }
.pd-fb { margin-top: .75rem; font-size: .9rem; }
.pd-fb.ok { color: #a5b4fc; }
.pd-fb.err { color: #fca5a5; }
@media (max-width: 960px) { .pd-grid, .pd-steps { grid-template-columns: repeat(2, 1fr); } .pd-quote-inner { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pd-grid, .pd-steps, .pd-price-grid { grid-template-columns: 1fr; } }

.pd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.pd-col { padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.pd-col.yes { border-color: #6366f1; }
.pd-col h3 { font-family: var(--font-head); color: #fff; margin-bottom: .75rem; }
.pd-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; color: var(--fg-muted); font-size: .92rem; line-height: 1.55; }
.pd-col li { position: relative; padding-left: 1.2rem; }
.pd-col li:before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #6366f1; }
.pd-col.no li:before { background: var(--fg-subtle); }
.pd-proof { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.pd-proof a { display: block; padding: 1.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: border-color .2s; }
.pd-proof a:hover { border-color: #6366f1; }
.pd-proof h3 { font-family: var(--font-head); color: #fff; margin-bottom: .4rem; }
.pd-proof p { color: var(--fg-muted); font-size: .9rem; line-height: 1.6; margin-bottom: .75rem; }
.pd-proof span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6366f1; }
@media (max-width: 760px) { .pd-two, .pd-proof { grid-template-columns: 1fr; } }

/* What to expect from me */
.pd-me { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 1.25rem; align-items: stretch; }
.pd-about { padding: 2rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; display: flex; flex-direction: column; gap: 1rem; }
.pd-about h3 { font-family: var(--font-head); font-size: 1.5rem; color: #fff; margin: 0; }
.pd-about p { color: var(--fg-muted); line-height: 1.7; margin: 0; }
.pd-about-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: auto; padding-top: .5rem; }
.pd-expect { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.pd-expect li { display: grid; gap: .25rem; padding: 1rem 1.25rem; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid #6366f1; border-radius: 0 10px 10px 0; }
.pd-expect b { color: #fff; font-family: var(--font-head); }
.pd-expect span { color: var(--fg-muted); font-size: .92rem; line-height: 1.55; }
@media (max-width: 860px) { .pd-me { grid-template-columns: 1fr; } }

/* Expect section: no stretched dead space in the about card */
.pd-me { align-items: start; }
.pd-about-cta { margin-top: .75rem; }

.pd-expect-wrap{display:flex;flex-direction:column;gap:.9rem}
.pd-expect-h{margin:0;font-size:1.05rem;font-weight:700;opacity:.9}
.pd-me-note{margin:.25rem 0 0;font-size:.95rem;line-height:1.6;opacity:.8}
@property --pd-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* Expect cards effect */
.pd-expect{counter-reset:ex}
.pd-expect li{position:relative;counter-increment:ex;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.pd-expect li::after{content:"0" counter(ex);position:absolute;top:.7rem;right:1rem;font:700 1.5rem var(--font-head);color:rgba(99,102,241,.35);transition:color .35s,transform .35s}
.pd-expect li::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;opacity:0;transition:opacity .35s;background:conic-gradient(from var(--pd-a),transparent 0 70%,#6366f1,#fff,#6366f1 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.pd-expect li:hover{transform:translateY(-4px) translateX(4px);box-shadow:0 10px 30px rgba(99,102,241,.28)}
.pd-expect li:hover::before{opacity:1;animation:pd-spin 2.4s linear infinite}
.pd-expect li:hover::after{color:#6366f1;transform:scale(1.15)}
@keyframes pd-spin{to{--pd-a:360deg}}
.pd-expect.ex-anim li{opacity:0;transform:perspective(700px) rotateX(-70deg) translateY(20px);transform-origin:top}
.pd-expect.ex-anim.ex-in li{opacity:1;transform:none;transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s}
.pd-expect.ex-anim.ex-in li:hover{transform:translateY(-4px) translateX(4px)}
@media (prefers-reduced-motion:reduce){.pd-expect.ex-anim li{opacity:1;transform:none}.pd-expect li:hover::before{animation:none}}
.pd-expect{grid-template-columns:1fr!important}

/* Expect deck (accordion) */
.ex-deck{display:flex;flex-direction:column;gap:10px}
.ex-card{position:relative;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;transition:border-color .3s,box-shadow .3s}
.ex-card.is-active{border-color:rgba(99,102,241,.7);box-shadow:0 0 32px rgba(99,102,241,.22)}
.ex-card:not(.is-active):hover{border-color:rgba(99,102,241,.45)}
.ex-rail{display:flex;align-items:center;gap:14px;width:100%;padding:15px 18px;background:transparent;border:0;color:var(--fg);cursor:pointer;text-align:left;font:inherit;position:relative}
.ex-n{font:600 12px ui-monospace,Menlo,monospace;color:#a5a8ff;letter-spacing:.08em}
.ex-t{font-weight:600;font-size:1rem;color:var(--fg-muted)}
.ex-card.is-active .ex-t{color:var(--fg)}
.ex-rail::after{content:"+";margin-left:auto;font-size:1.4rem;line-height:1;color:#a5a8ff;transition:transform .35s}
.ex-card.is-active .ex-rail::after{transform:rotate(45deg)}
.ex-rail::before{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#6366f1,#a5a8ff);box-shadow:0 0 10px #6366f1;opacity:0}
.ex-card.is-arming:not(.is-active) .ex-rail::before{opacity:1;animation:ex-load .7s linear forwards}
@keyframes ex-load{from{width:0}to{width:100%}}
.ex-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.ex-card.is-active .ex-body{grid-template-rows:1fr}
.ex-inner{min-height:0;overflow:hidden;padding:0 18px}
.ex-card.is-active .ex-inner{padding:0 18px 18px}
.ex-inner p{margin:0;color:var(--fg-muted);font-size:.95rem;line-height:1.6}
@media (prefers-reduced-motion:reduce){.ex-card,.ex-body{transition:none!important}}

/* Dashboard-style build section */
.dv-app{border:1px solid var(--border);border-radius:16px;background:#0b0d12;overflow:hidden;box-shadow:0 30px 80px rgba(99,102,241,.14)}
.dv-top{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.dv-dots{display:flex;gap:6px}.dv-dots i{width:10px;height:10px;border-radius:50%;background:#2a2f3a}
.dv-url{flex:1;max-width:340px;margin:0 auto;text-align:center;font:12px ui-monospace,Menlo,monospace;color:var(--fg-muted);background:#0b0d12;border:1px solid var(--border);border-radius:8px;padding:5px 10px}
.dv-av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;background:#6366f1;color:#fff}
.dv-main{display:grid;grid-template-columns:210px minmax(0,1fr)}
.dv-side{border-right:1px solid var(--border);padding:16px 12px;background:rgba(255,255,255,.015)}
.dv-logo{font:700 .95rem var(--font-head);color:#fff;margin:0 8px 14px}
.dv-side ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.dv-side button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;border-radius:8px;background:transparent;color:var(--fg-muted);font:inherit;font-size:.88rem;text-align:left;cursor:pointer;transition:background .2s,color .2s}
.dv-ico{width:14px;height:14px;border-radius:4px;border:2px solid #4b4f63;flex:none;transition:border-color .2s,background .2s}
.dv-side button.is-on{background:rgba(99,102,241,.16);color:#fff}
.dv-side button.is-on .dv-ico{border-color:#6366f1;background:#6366f1}
.dv-content{padding:18px 20px 22px;min-width:0}
.dv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;margin-bottom:14px}
.dv-head b{font:700 1.1rem var(--font-head);color:#fff}.dv-head span{font-size:.85rem;color:var(--fg-muted)}
.dv-grid{gap:12px}
.dv-w{position:relative;display:flex;flex-direction:column;gap:.55rem;padding:1.1rem;transition:border-color .25s,box-shadow .25s,transform .25s}
.dv-w.is-hl{border-color:rgba(99,102,241,.7);box-shadow:0 0 28px rgba(99,102,241,.22);transform:translateY(-2px)}
.dv-w h3{margin:0}.dv-w p{margin:0;font-size:.85rem}
.dv-chk{list-style:none;margin:0;padding:0;display:grid;gap:5px;font-size:.8rem;color:var(--fg-muted)}
.dv-chk li{display:flex;align-items:center;gap:8px}.dv-chk li::before{content:"";width:12px;height:12px;border-radius:3px;border:2px solid #4b4f63}
.dv-chk li.on{color:var(--fg)}.dv-chk li.on::before{background:#6366f1;border-color:#6366f1}
.dv-prog{height:8px;border-radius:99px;background:#1b1f2a;overflow:hidden}
.dv-prog span{display:block;height:100%;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#6366f1,#a5a8ff);animation:dv-grow 1.6s ease both}
@keyframes dv-grow{from{width:0}}
.dv-meta{display:flex;align-items:baseline;gap:8px}.dv-meta b{font:700 1.3rem var(--font-head);color:#fff}.dv-meta i{font-style:normal;font-size:.78rem;color:var(--fg-muted)}
.dv-bars{display:flex;align-items:flex-end;gap:5px;height:44px}
.dv-bars span{flex:1;height:var(--h);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#a5a8ff,#6366f1);transform-origin:bottom;animation:dv-bar 1.2s ease both}
@keyframes dv-bar{from{transform:scaleY(0)}}
.dv-pills,.dv-chips{display:flex;flex-wrap:wrap;gap:6px}
.dv-pills em,.dv-chips em{font-style:normal;font-size:.7rem;padding:3px 9px;border-radius:99px;border:1px solid rgba(99,102,241,.4);color:#c3c5ff;background:rgba(99,102,241,.1)}
.dv-tbl{width:100%;border-collapse:collapse;font:12px ui-monospace,Menlo,monospace;color:var(--fg-muted)}
.dv-tbl td{padding:5px 0;border-bottom:1px solid #1b1f2a}.dv-tbl td:last-child{text-align:right}
.dv-tbl i{display:inline-block;width:8px;height:8px;border-radius:50%;background:#3ad07a;box-shadow:0 0 8px #3ad07a}
.dv-plans{display:grid;gap:5px}.dv-plans div{display:flex;justify-content:space-between;font-size:.8rem;padding:6px 9px;border-radius:7px;background:#12151d}
.dv-plans b{color:var(--fg);font-weight:600}.dv-plans i{font-style:normal;color:#3ad07a}.dv-plans i.due{color:#a5a8ff}
@media (max-width:860px){.dv-main{grid-template-columns:1fr}.dv-side{display:none}}
@media (prefers-reduced-motion:reduce){.dv-prog span,.dv-bars span{animation:none}}

/* How a product gets built: tabs + moving row (cloned from web design) */
/* How a project runs: two-process tabs */
.pd-tablist { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 1.75rem; flex-wrap: wrap; }
.pd-tab { appearance: none; border: 0; background: transparent; color: var(--fg-muted); font: inherit; font-weight: 600; padding: .65rem 1.15rem; border-radius: 7px; cursor: pointer; transition: background .2s, color .2s; }
.pd-tab:hover { color: #fff; }
.pd-tab.is-on { background: #6366f1; color: #fff; box-shadow: 0 0 18px rgba(99,102,241,.45); }
.pd-tab:focus-visible { outline: 2px solid #a5a8ff; outline-offset: 2px; }
.pd-pane[hidden] { display: none; }
.pd-pane.is-on { animation: pd-fade .35s ease; }
@keyframes pd-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pd-pane-lead { color: var(--fg-muted); margin-bottom: 1.25rem; }
.pd-pane .pd-steps { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) { .pd-pane .pd-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .pd-pane .pd-steps { grid-template-columns: 1fr; } .pd-tablist { display: flex; } .pd-tab { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .pd-pane.is-on { animation: none; } }

/* Steps as one moving row */
.pd-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.pd-mtrack { display: flex; gap: 1rem; width: max-content; animation: pd-slide 120s linear infinite; }
.pd-pane .pd-steps { display: flex; gap: 1rem; grid-template-columns: none; margin: 0; padding: 0; list-style: none; }
.pd-pane .pd-step { flex: 0 0 300px; min-height: 190px; }
@keyframes pd-slide { from { transform: translateX(0); } to { transform: translateX(calc(-25% - .25rem)); } }
@media (max-width: 640px) { .pd-pane .pd-step { flex-basis: 250px; } }
@media (prefers-reduced-motion: reduce) { .pd-marq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .pd-mtrack { animation: none; } .pd-pane .pd-steps[aria-hidden] { display: none; } }

/* Final tile in the row: call to action */
.pd-pane .pd-step.pd-cta-tile { display: flex; flex-direction: column; justify-content: space-between; gap: .75rem; border: 0; background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 10px 40px rgba(79,70,229,.45); }
.pd-cta-tile h3 { color: #fff; font-family: var(--font-head); font-size: 1.25rem; margin: 0; }
.pd-cta-tile p { color: rgba(255,255,255,.88); margin: 0; }
.pd-cta-tile a { align-self: flex-start; background: #fff; color: #1e1f5c; font-weight: 700; text-decoration: none; padding: .65rem 1.1rem; border-radius: 6px; animation: pd-pulse 2s ease-in-out infinite; }
@keyframes pd-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,.55); } 50% { box-shadow: 0 0 0 9px rgba(255,255,255,0); } }
@media (prefers-reduced-motion: reduce) { .pd-cta-tile a { animation: none; } }

/* Heading and tabs on one line */
.pd-how-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.pd-how-head .pd-h2 { margin: 0; max-width: none; }
.pd-how-head .pd-tablist { margin: 0; }

/* Draggable moving row */
.pd-mtrack { animation: none !important; will-change: transform; }
.pd-marq { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.pd-marq.is-drag { cursor: grabbing; }
.pd-marq a { -webkit-user-drag: none; }
.pd-hint { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: 1.1rem 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--fg-subtle); transition: opacity .4s; }
.pd-hint svg { animation: pd-nudge 1.8s ease-in-out infinite; color: #a5a8ff; }
.pd-hint.is-gone { opacity: 0; }
@keyframes pd-nudge { 0%, 100% { transform: translateX(-5px); } 50% { transform: translateX(5px); } }
@media (prefers-reduced-motion: reduce) { .pd-hint svg { animation: none; } }

/* Call to action pinned at the end of the row; the steps loop and fade out beneath it */
.pd-row { display: flex; align-items: stretch; gap: 1.25rem; }
.pd-row .pd-marq { flex: 1 1 auto; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 88%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 88%, transparent 100%); }
.pd-cta-fixed { flex: 0 0 380px; display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: 2rem; border-radius: 14px; background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 12px 44px rgba(79,70,229,.5); }
.pd-cta-fixed h3 { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.15; color: #fff; margin: 0; }
.pd-cta-fixed p { color: rgba(255,255,255,.9); margin: 0; line-height: 1.55; }
.pd-cta-fixed a { align-self: flex-start; background: #fff; color: #1e1f5c; font-weight: 700; text-decoration: none; padding: .8rem 1.35rem; border-radius: 6px; animation: pd-pulse 2s ease-in-out infinite; }
@media (max-width: 900px) { .pd-row { flex-direction: column; } .pd-cta-fixed { flex-basis: auto; } .pd-row .pd-marq { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } }
@media (prefers-reduced-motion: reduce) { .pd-cta-fixed a { animation: none; } }

/* Narrower CTA, and equal heights between the moving tiles and the CTA */
.pd-row { align-items: stretch; }
.pd-row .pd-marq { display: flex; align-items: stretch; }
.pd-row .pd-mtrack { align-items: stretch; }
.pd-row .pd-pane .pd-steps, .pd-pane .pd-steps { align-items: stretch; }
.pd-pane .pd-step { min-height: 210px; }
.pd-cta-fixed { flex-basis: 290px; min-height: 210px; padding: 1.6rem; box-sizing: border-box; }
.pd-cta-fixed h3 { font-size: 1.3rem; }
@media (max-width: 900px) { .pd-cta-fixed { flex-basis: auto; min-height: 0; } }

/* Fix: the moving track and its step lists must never shrink, or tiles overlap and text gets cut off */
.pd-row .pd-marq .pd-mtrack { flex: 0 0 auto; width: max-content; }
.pd-pane .pd-steps { flex: 0 0 auto; width: max-content; }
.pd-pane .pd-step { flex: 0 0 300px; width: 300px; box-sizing: border-box; }
@media (max-width: 640px) { .pd-pane .pd-step { flex-basis: 250px; width: 250px; } }

/* Proof cards: same style as the Services page */
.pd-work{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem}
.pd-w{--ac:#2e9e3a;display:block;padding:1.75rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:inherit;transition:border-color .2s}
.pd-fmc{--ac:#F97316}
.pd-w:hover{border-color:var(--ac)}
.pd-w h3{font-family:var(--font-head);color:#fff;margin:0 0 .5rem}
.pd-w p{color:var(--fg-muted);font-size:.92rem;line-height:1.6;margin:0 0 1rem}
.pd-more{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ac)}
@media (max-width:640px){.pd-work{grid-template-columns:1fr}}

/* Dashboard slides: one screen at a time, auto-advancing */
.dv-stage{position:relative;min-height:340px}
.dv-slide{display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:1.75rem;align-items:center;padding:1.5rem;background:var(--surface);border:1px solid rgba(99,102,241,.45);border-radius:12px;box-shadow:0 0 30px rgba(99,102,241,.14)}
.dv-slide.is-on{display:grid;animation:dv-in .55s cubic-bezier(.2,.8,.2,1)}
@keyframes dv-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.dv-s-vis{display:flex;flex-direction:column;justify-content:center;gap:.9rem;min-height:210px;padding:1.25rem;border-radius:10px;background:#0b0d12;border:1px solid var(--border)}
.dv-s-vis .dv-bars{height:110px}.dv-s-vis .dv-chk{font-size:.95rem;gap:9px}.dv-s-vis .dv-chk li::before{width:15px;height:15px}
.dv-s-vis .dv-prog{height:12px}.dv-s-vis .dv-meta b{font-size:2rem}.dv-s-vis .dv-meta i{font-size:.9rem}
.dv-s-vis .dv-tbl{font-size:14px}.dv-s-vis .dv-tbl td{padding:9px 0}.dv-s-vis .dv-plans{gap:8px}.dv-s-vis .dv-plans div{font-size:.95rem;padding:10px 12px}
.dv-s-vis .dv-pills em,.dv-s-vis .dv-chips em{font-size:.82rem;padding:5px 12px}
.dv-s-copy{display:flex;flex-direction:column;gap:.6rem;min-width:0}
.dv-s-copy h3{font-family:var(--font-head);font-size:1.4rem;color:#fff;margin:0}
.dv-s-copy>p{margin:0;color:var(--fg-muted);line-height:1.6}
.dv-det{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.5rem}
.dv-det li{position:relative;padding-left:1.5rem;font-size:.92rem;color:var(--fg);line-height:1.5}
.dv-det li::before{content:"";position:absolute;left:0;top:.35em;width:10px;height:10px;border-radius:3px;background:#6366f1;box-shadow:0 0 10px rgba(99,102,241,.6)}
.dv-side button{position:relative;overflow:hidden}
.dv-side button::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:linear-gradient(90deg,#6366f1,#a5a8ff)}
.dv-side button.is-run::after{animation:dv-fill 5.5s linear forwards}
@keyframes dv-fill{to{width:100%}}
@media (max-width:860px){.dv-slide.is-on{grid-template-columns:1fr}.dv-stage{min-height:0}}
@media (prefers-reduced-motion:reduce){.dv-slide.is-on{animation:none}.dv-side button.is-run::after{animation:none}}

/* Dashboard: all six open in two rows of three, with the active one highlighted */
.dv-head{align-items:center}
.dv-nav{margin-left:auto;display:flex;align-items:center;gap:8px}
.dv-arrow{width:32px;height:32px;display:grid;place-items:center;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--fg);cursor:pointer;transition:border-color .2s,background .2s}
.dv-arrow:hover{border-color:#6366f1;background:rgba(99,102,241,.16)}
.dv-count{font:12px ui-monospace,Menlo,monospace;color:var(--fg-muted);min-width:40px;text-align:center}
.dv-stage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-height:0}
.dv-slide,.dv-slide.is-on{display:flex;flex-direction:column;align-items:stretch;gap:.8rem;padding:1.1rem;animation:none;border:1px solid var(--border);box-shadow:none;background:var(--surface);transition:border-color .25s,box-shadow .25s,transform .25s}
.dv-slide.is-on{border-color:rgba(99,102,241,.75);box-shadow:0 0 28px rgba(99,102,241,.25);transform:translateY(-2px)}
.dv-s-vis{min-height:0;padding:.9rem;gap:.6rem}
.dv-s-vis .dv-bars{height:56px}.dv-s-vis .dv-chk{font-size:.8rem;gap:5px}.dv-s-vis .dv-chk li::before{width:12px;height:12px}
.dv-s-vis .dv-prog{height:8px}.dv-s-vis .dv-meta b{font-size:1.3rem}.dv-s-vis .dv-meta i{font-size:.78rem}
.dv-s-vis .dv-tbl{font-size:12px}.dv-s-vis .dv-tbl td{padding:5px 0}.dv-s-vis .dv-plans{gap:5px}.dv-s-vis .dv-plans div{font-size:.8rem;padding:6px 9px}
.dv-s-vis .dv-pills em,.dv-s-vis .dv-chips em{font-size:.7rem;padding:3px 9px}
.dv-s-copy h3{font-size:1.1rem}.dv-s-copy>p{font-size:.85rem}
.dv-det{gap:.35rem}.dv-det li{font-size:.8rem;padding-left:1.2rem}.dv-det li::before{width:8px;height:8px;top:.4em}
@media (max-width:1000px){.dv-stage{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dv-stage{grid-template-columns:1fr}}

/* a11y contrast */
.pd-btn,.pd-tab.is-on,body .btn-cta{background:#4f46e5}
.pd-proof span{color:#a5a8ff}


/* One-row carousel: three cards in view, arrows and the side list slide the row */
.dv-stage{display:flex;flex-wrap:nowrap;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:6px 2px 10px}
.dv-stage::-webkit-scrollbar{display:none}
.dv-slide,.dv-slide.is-on{flex:0 0 calc((100% - 24px) / 3);scroll-snap-align:start;min-width:0}
@media (max-width:1000px){.dv-slide,.dv-slide.is-on{flex-basis:calc((100% - 12px) / 2)}}
@media (max-width:640px){.dv-slide,.dv-slide.is-on{flex-basis:100%}}