/* ============================================================================
   Shared CSS for the standalone "Products" pages (SecureToken, Pipeline
   Automation -- the flagship product pages, richer/more animated than the
   Solutions pages and each with its OWN custom footer rather than the
   sitewide one, see each page's template PHP header comment for why).
   Base tokens already defined sitewide in theme.css: .btn-primary,
   .btn-outline, .link-arrow, .ease-spring, .noise, .field-dark, [data-reveal].
   Page-specific classes below are prefixed per page (st- for SecureToken,
   pipeline-/pdm- for Pipeline Automation) to mirror the static site's own
   naming. NOTE: Pipeline Automation's own reveal-on-scroll uses its own
   [data-scroll-reveal] attribute, deliberately distinct from the sitewide
   [data-reveal] -- see that page's template PHP for why -- so its CSS below
   is its own rule, not a reuse of the sitewide [data-reveal] rule.
   ============================================================================ */
[data-scroll-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(0.16,1,0.3,1), transform .6s cubic-bezier(0.16,1,0.3,1); }
[data-scroll-reveal].is-revealed { opacity: 1; transform: translateY(0); }

/* ---------------- SecureToken ---------------- */
.star-field { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M15,13 C15.15,14.3 15.7,14.85 17,15 C15.7,15.15 15.15,14.85 15,17 C14.85,15.7 14.3,15.15 13,15 C14.3,14.85 14.85,14.3 15,13 Z' fill='white'/%3E%3C/svg%3E"); background-size: 30px 30px; opacity: .2; }

/* Hero conveyor -- fixed, illustrative, fictional example data (see template PHP header comment) */
#stConveyorTrack { position: absolute; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.st-conveyor-item { position: relative; display: inline-block; height: 24px; margin-right: 32px; }
.st-conveyor-item .st-incoming, .st-conveyor-item .st-outgoing { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 16.5px; line-height: 24px; transition: opacity .35s ease; }
.st-conveyor-item .st-incoming { color: rgba(255,255,255,.45); opacity: 1; }
.st-conveyor-item .st-outgoing { color: #5B9CFF; font-weight: 600; opacity: 0; }
.st-conveyor-item.is-protected .st-incoming { opacity: 0; }
.st-conveyor-item.is-protected .st-outgoing { opacity: 1; }
.st-sep { display: inline-block; width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.22); margin-right: 32px; }
#stBoxIcon.is-pulse { transform: scale(1.18); background-color: rgba(1,100,255,.32); }
#stLiveField { transition: opacity .25s ease; }
#stLiveField.is-swapping { opacity: 0; }

.st-usecase-card { transition: transform .3s cubic-bezier(0.34,1.56,0.64,1), box-shadow .3s ease, border-color .3s ease; }
.st-usecase-card:hover { transform: translateY(-4px) scale(1.015); box-shadow: 0 20px 40px -22px rgba(1,100,255,.35); border-color: #0164FF; }
.st-usecase-card:focus-visible { outline: 2px solid #181A1B; outline-offset: 3px; }

/* "How it works" story: real product-screenshot steps -- image already carries its own card
   edge/shadow baked in, so this drops doc-panel's own frame rather than nesting rounded cards. */
.doc-panel--image { background: none; border: none; padding: 0; height: auto; }
.doc-panel--image img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,.28)); }
.story-node { width: 11px; height: 11px; border-radius: 999px; background: #F3F0EC; border: 2px solid #D8E7FF; z-index: 1; transition: background-color .3s ease, border-color .3s ease; }
.story-step.is-reached .story-node { background: #0164FF; border-color: #0164FF; }
.story-title { color: #8B93A1; transition: color .35s ease; }
.story-step.is-reached .story-title { color: #181A1B; }
.section-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #0164FF; }
.story-visual { opacity: .5; transform: translateY(14px); transition: opacity .5s ease, transform .5s cubic-bezier(0.22,0.8,0.3,1); }
.story-step.is-reached .story-visual { opacity: 1; transform: translateY(0); }
.story-final-node { opacity: .35; transition: opacity .4s ease, transform .4s ease; }
#storyFinalNode.is-reached .story-final-node { opacity: 1; transform: scale(1.15); }

/* Digital-twin comparison table -- divs with role="table" (the raised hero column breaks out of
   normal row flow via negative margin, which a real <table> cell can't do cleanly). */
.svt-panel { background: #fff; border-radius: 20px; padding: 32px 36px 20px; margin-top: 24px; }
.svt-grid { display: grid; grid-template-columns: 1.1fr 1.3fr 1.1fr; align-items: start; }
.svt-col { display: flex; flex-direction: column; min-width: 0; }
.svt-head { height: 88px; display: flex; align-items: flex-end; padding-bottom: 16px; }
.svt-row { height: 64px; display: flex; align-items: center; border-top: 1px solid #E4E1D7; gap: 12px; }
.svt-label-col .svt-row { padding-right: 24px; font-size: 15px; font-weight: 600; color: #181A1B; }
.svt-hero-col { position: relative; background: #0164FF; border: 1px solid #181A1B; border-radius: 18px; padding: 0 28px 20px; margin: -52px 8px -36px 8px; box-shadow: 0 24px 48px rgba(1,100,255,.35); }
.svt-hero-col .svt-head { height: 140px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px; padding-bottom: 20px; }
.svt-hero-col .svt-row { border-top-color: rgba(255,255,255,.2); color: #fff; font-size: 15px; font-weight: 600; }
.svt-check-white { width: 24px; height: 24px; border-radius: 999px; background: #fff; color: #0164FF; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.svt-other-col { padding: 0 12px 0 24px; color: #5B6470; }
.svt-other-col:last-child { padding-left: 12px; padding-right: 0; }
.svt-other-col .svt-head { color: #5B6470; font-size: 17px; font-weight: 600; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 3px; }
.svt-other-col .svt-row { font-size: 15px; }
.svt-mark { width: 24px; height: 24px; border-radius: 999px; border: 1px solid; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex-shrink: 0; }
.svt-mark--worse { border-color: #FE4F00; color: #FE4F00; }
.svt-mark--neutral { border-color: #8E959C; color: #8E959C; }
.svt-mobile-card { border-radius: 18px; padding: 24px; }
.svt-mobile-card--hero { background: #0164FF; border: 1px solid #181A1B; color: #fff; }
.svt-mobile-card--other { background: #fff; border: 1px solid #E4E1D7; color: #181A1B; }
.svt-mobile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(0,0,0,.08); font-size: 14.5px; }
.svt-mobile-card--hero .svt-mobile-row { border-top-color: rgba(255,255,255,.2); }
.svt-mobile-row:first-of-type { border-top: none; }
/* !important on both: Tailwind's CDN stylesheet loads after this block and defines .flex/.hidden
   at the same specificity, so without !important the mobile cards also render on desktop. */
@media (min-width: 900px) { .svt-mobile-wrap { display: none !important; } }
@media (max-width: 899px) { .svt-desktop-wrap { display: none !important; } }

.svt-faq-item { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.svt-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.svt-faq-item summary::-webkit-details-marker { display: none; }
.svt-faq-item summary:focus-visible { outline: 2px solid #5B9CFF; outline-offset: 4px; border-radius: 4px; }
.svt-faq-q { font-size: 17px; font-weight: 600; color: #fff; }
.svt-faq-toggle { color: #5B9CFF; font-size: 24px; font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform .2s ease; }
.svt-faq-item[open] .svt-faq-toggle { transform: rotate(45deg); }
.svt-faq-a { font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.6); margin-top: 8px; }

/* ---------------- Pipeline Automation (Data Manager) ---------------- */
.pipeline-stage-pill { position: relative; z-index: 10; display: inline-flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); background: #0b0e13; font-size: 7.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: rgba(255,255,255,.5); white-space: nowrap; transition: color .4s ease, border-color .4s ease, background-color .4s ease; }
.pipeline-stage-pill .pipeline-pill-dot { width: 4px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.35); flex-shrink: 0; transition: background-color .4s ease; }
.pipeline-stage-pill.is-active { color: #fff; border-color: rgba(255,255,255,.45); background: #0d1520; }
.pipeline-stage-pill.is-active .pipeline-pill-dot { background: #fff; }
@media (min-width: 375px) { .pipeline-stage-pill { padding: 5px 8px; font-size: 8.5px; gap: 4px; } .pipeline-stage-pill .pipeline-pill-dot { width: 4.5px; height: 4.5px; } }
@media (min-width: 640px) { .pipeline-stage-pill { padding: 6px 13px; font-size: 10.5px; letter-spacing: .09em; gap: 6px; } .pipeline-stage-pill .pipeline-pill-dot { width: 5px; height: 5px; } }
.pipeline-reveal { opacity: .2; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.8,.3,1); }
.pipeline-reveal.is-active { opacity: 1; transform: translateY(0); }
.pipeline-chip { border: 1px solid rgba(255,255,255,.2); border-radius: 10px; padding: 9px 12px; font-size: 12px; font-weight: 500; color: #fff; margin-bottom: 8px; }
.pipeline-chip:last-child { margin-bottom: 0; }
.pipeline-chip-label { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); display: block; margin-bottom: 2px; }
.pipeline-chip-dest { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.045); }
.pipeline-card { border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 11px 13px; margin-bottom: 8px; }
.pipeline-card:last-child { margin-bottom: 0; }
.pipeline-card-title { font-size: 12px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.pipeline-card-body { font-size: 11px; line-height: 1.5; color: rgba(255,255,255,.5); }
.pipeline-etl-card { border: 1px solid rgba(255,255,255,.22); border-radius: 14px; padding: 6px 14px; background: rgba(255,255,255,.04); }
.pipeline-etl-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid rgba(255,255,255,.1); opacity: .4; transition: opacity .4s ease; }
.pipeline-etl-row:first-child { border-top: none; }
.pipeline-etl-row.is-active { opacity: 1; }
.pipeline-etl-num { font-size: 10.5px; font-weight: 700; color: rgba(255,255,255,.4); width: 16px; flex-shrink: 0; }
.pipeline-etl-row-title { font-size: 12.5px; font-weight: 600; color: #fff; flex: 1; }
.pipeline-etl-check { font-size: 12px; color: #fff; opacity: 0; transition: opacity .3s ease; }
.pipeline-etl-row.is-active .pipeline-etl-check { opacity: .75; }

.bg-frost-soft { background: #fff; }
.feature-visual img { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 40px rgba(24,26,27,.22)); }

.tech-strip-item { border-top: 2px solid rgba(255,255,255,.14); padding-top: 18px; transition: border-color .3s ease; }
.tech-strip-item:hover { border-top-color: #0164FF; }
.tech-strip-num { font-size: 10.5px; font-weight: 700; color: #0164FF; letter-spacing: .08em; display: block; margin-bottom: 10px; }

.built-card { background: #0164FF; border-radius: 22px; padding: 26px; min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; transition: transform .35s cubic-bezier(0.34,1.56,0.64,1), box-shadow .35s ease; }
.built-card:hover { transform: translateY(-4px); box-shadow: 0 24px 44px -18px rgba(1,100,255,.45); }
.built-card-num { position: relative; font-size: 11px; font-weight: 700; letter-spacing: .12em; color: rgba(255,255,255,.55); }
.built-card-icon { position: relative; color: #fff; }
.built-card-title { position: relative; font-size: 17px; font-weight: 800; letter-spacing: -0.02em; color: #fff; line-height: 1.25; }

.pdm-lifecycle-panel { background: #fff; border: 1px solid #181A1B; border-radius: 20px; overflow: hidden; margin-top: 8px; }
.pdm-lifecycle-grid { display: grid; grid-template-columns: 1fr 1fr; }
.pdm-lifecycle-head { padding: 26px 32px; font-size: 20px; font-weight: 600; color: #fff; }
.pdm-lifecycle-head--dm { background: #0164FF; }
.pdm-lifecycle-head--st { background: #181A1B; }
.pdm-lifecycle-cell { padding: 18px 32px; font-size: 15px; font-weight: 600; color: #181A1B; border-top: 1px solid #E4E1D7; display: flex; align-items: center; }
.pdm-lifecycle-cell--st { border-left: 1px solid #E4E1D7; }
.pdm-mobile-card { border-radius: 18px; padding: 24px; }
.pdm-mobile-card--hero { background: #0164FF; border: 1px solid #181A1B; color: #fff; }
.pdm-mobile-card--other { background: #181A1B; border: 1px solid #181A1B; color: #fff; }
.pdm-mobile-row { display: flex; align-items: center; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.18); font-size: 14.5px; font-weight: 600; }
.pdm-mobile-row:first-of-type { border-top: none; }
@media (min-width: 900px) { .pdm-mobile-wrap { display: none !important; } }
@media (max-width: 899px) { .pdm-desktop-wrap { display: none !important; } }

.pdm-deploy-card { background: #fff; border: 1px solid #E4E1D7; border-radius: 14px; padding: 18px; }
.pdm-deploy-card__title { font-size: 14.5px; font-weight: 600; color: #181A1B; margin-bottom: 4px; }
.pdm-deploy-card__body { font-size: 13px; line-height: 1.55; color: #5B6470; }

.pdm-faq-item { border-top: 1px solid #E4E1D7; padding: 18px 0; }
.pdm-faq-item:first-child { border-top: none; }
.pdm-faq-item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; font-size: 15.5px; font-weight: 600; color: #181A1B; }
.pdm-faq-item summary::-webkit-details-marker { display: none; }
.pdm-faq-toggle { color: #0164FF; font-size: 22px; font-weight: 400; line-height: 1; flex-shrink: 0; transition: transform .2s ease; }
.pdm-faq-item[open] .pdm-faq-toggle { transform: rotate(45deg); }
.pdm-faq-a { font-size: 14.5px; line-height: 1.65; color: #5B6470; margin-top: 10px; }