/* =========================================================================
   Sapey website · Product page styles
   Buttons, labels, answer badges, .ui-* pieces, .icon-tile, the closing band and the footer
   are shared, in base.css. Only tokens from base.css; tints are made from them with color-mix.
   ========================================================================= */

main{--az-line:color-mix(in srgb,var(--s-azure) 25%,var(--s-linen))}

/* the white card used across the page */
.p-card{background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card);box-shadow:0 12px 32px rgba(20,35,70,.08),0 1px 3px rgba(20,35,70,.06)}

/* ---------- Product 1 · Hero ---------- */
.p-hero{position:relative;background:radial-gradient(50% 60% at 18% 30%,color-mix(in srgb,var(--s-sky) 28%,transparent),transparent),radial-gradient(40% 50% at 85% 20%,color-mix(in srgb,var(--s-violet) 10%,transparent),transparent),linear-gradient(180deg,var(--s-linen) 0%,var(--s-paper) 100%)}
.p-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center;padding-block:96px 104px}
.p-h1{margin:0}
.p-hero .lead{margin-top:var(--sp-4)}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* the list of answered actions: assets/js/product.js shows four rows and brings the next one to the top */
.feed-card{overflow:hidden}
.feed-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:var(--sp-3);font-weight:600;font-size:15px}
.feed-list{list-style:none;margin:0;padding:0}
.frow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-1) var(--sp-3);align-items:center;padding:14px var(--sp-3);border-top:1px solid var(--s-mist)}
.frow .act,.frow .ans{transition:color .4s ease}
.frow .act{font-weight:600;font-size:15px}
.frow .why{grid-column:1;font-size:13px;color:var(--s-ink2)}
.frow .ans{grid-row:1/3;grid-column:2}
.frow.is-fresh{animation:frow-in .6s ease both}
/* the row about to leave looks quieter, but its text keeps enough contrast to read: secondary color,
   and only the badge icon at 55% */
.frow.is-old .act,.frow.is-old .ans{color:var(--s-ink2)}
.frow.is-old .ans svg{opacity:.55}
@keyframes frow-in{0%{opacity:0;transform:translateY(-10px);background-color:var(--s-az-tint)}60%{opacity:1;transform:none;background-color:var(--s-az-tint)}100%{opacity:1;transform:none;background-color:transparent}}
.feed-note{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;font-size:13px;color:var(--s-ink2)}

/* ---------- Solutions: one product, three ways to start ---------- */
.sol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:var(--sp-6)}
.scard{background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card);padding:var(--sp-5) 28px;display:grid;gap:14px;align-content:start}
.scard.flag{border:2px solid var(--s-azure);padding:calc(var(--sp-5) - 1px) 27px}
.scard h3{font-size:22px;line-height:1.3;font-weight:700}
.scard .sq{font-weight:700;line-height:1.5}
.scard p:not(.sq){font-size:15px;line-height:1.6;color:var(--s-ink2)}
/* the Flagship pill sits in the top right corner, centered on the icon tile (44px), so the name, question
   and text start at the same height in all three cards; in the markup it stays right after the name */
.scard.flag{position:relative}
.stag{position:absolute;top:calc(var(--sp-5) - 1px + 22px);right:27px;transform:translateY(-50%);font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-azure);background:var(--s-az-tint);border-radius:8px;padding:6px 12px}

/* ---------- Product 2 · Three answers ---------- */
.tri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-4);margin-top:var(--sp-6);align-items:start}
.req{overflow:hidden;display:flex;flex-direction:column}
.req-top{display:grid;gap:var(--sp-1);padding:var(--sp-3) var(--sp-4)}
.req-title{font-size:20px;font-weight:700;line-height:1.3}
.req-from{font-size:13px;color:var(--s-ink2)}
.fact{display:flex;justify-content:space-between;gap:12px;padding:12px var(--sp-4);border-top:1px solid var(--s-mist);font-size:14px}
.fact b{font-weight:600}
/* the one value that changes: its row keeps the light Azure tint, and flashes a little stronger when
   the tab changes (assets/js/product.js adds "is-flash"; never with reduced motion) */
.fact-pick{background:var(--s-az-tint)}
.fact-pick b span{display:none}
[data-pick="a"] .fact-pick .v-a,[data-pick="r"] .fact-pick .v-r,[data-pick="w"] .fact-pick .v-w{display:inline}
.fact-pick.is-flash{animation:pick-flash .6s ease-out}
@keyframes pick-flash{from{background:color-mix(in srgb,var(--s-azure) 18%,var(--s-linen))}to{background:var(--s-az-tint)}}
@media (prefers-reduced-motion:reduce){.fact-pick.is-flash{animation:none}}

/* the tabs, centered above the two cards, with a short hint under them */
.pick{display:grid;justify-items:center;gap:12px;margin-top:var(--sp-5)}
.pick-hint{font-size:14px;color:var(--s-ink2);text-align:center}
.pick + .tri{margin-top:var(--sp-4)}

/* the answer: one panel per choice, the same badge, size and position for all three */
.out{padding:var(--sp-4);display:grid;align-content:start}
.answer{display:grid;gap:14px;align-content:start}
.answer .ans{justify-self:start}
.answer h3{font-size:22px;line-height:1.3;font-weight:700}
.answer p{font-size:15px;color:var(--s-ink2)}
.tri .answer + .answer{margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--s-mist)}
.sched{border:1px solid var(--s-line);border-radius:var(--s-r-input);overflow:hidden;margin-top:var(--sp-1)}
.sched-h{display:flex;align-items:center;gap:var(--sp-2);padding:10px 14px;font-size:13px;font-weight:600;background:var(--s-paper)}
.sched-h svg{width:16px;height:16px;flex:none;color:var(--s-ink2)}
.srow{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;border-top:1px solid var(--s-mist);font-size:13px}
.srow .st{color:var(--s-ink2)}
.srow.is-new{background:color-mix(in srgb,var(--s-jade) 8%,var(--s-linen))}
.rec{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-azure)}
/* with the tabs, only the chosen answer shows. Without JavaScript there is no data-pick: the request card
   hides its value row and the three answers are listed one under the other, each with its value */
.fact-pick{display:none}
[data-pick] .fact-pick{display:flex}
[data-pick] .pick-val{display:none}
[data-pick] .tri .answer{display:none}
[data-pick="a"] .tri .answer-a,[data-pick="r"] .tri .answer-r,[data-pick="w"] .tri .answer-w{display:grid;margin:0;padding:0;border:0}
.answer .pick-val b{color:var(--s-ink);font-weight:600}
.src{margin-top:20px;font-size:13px;color:var(--s-ink2)}

/* ---------- Product 3 · The record ---------- */
.rc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.vis{position:relative}
.log{overflow:hidden}
.log-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:var(--sp-3);font-weight:600;font-size:15px}
.log-row{display:flex;align-items:center;gap:12px;padding:12px var(--sp-3);border-top:1px solid var(--s-mist);font-size:14px}
.log-row > span:last-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.log-row:last-child{padding-bottom:40px}
.log-row.is-hi{background:var(--s-az-tint);box-shadow:inset 3px 0 0 var(--s-azure)}
/* the Epi-Cert: real text, read by screen readers. No seal, number, code, signature or date */
.cert{position:relative;z-index:1;margin:-28px 0 0 56px;padding:var(--sp-4);display:grid;gap:14px;border-color:var(--az-line);box-shadow:0 24px 50px rgba(20,35,70,.16),0 2px 6px rgba(20,35,70,.10)}
.cert-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.cert-top b{font-size:17px}
.cert dl{margin:0;display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px var(--sp-3);align-items:center;font-size:15px}
.cert dt{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--s-ink2)}
.cert dd{margin:0;font-weight:600}
.cert-check{font-size:14px;border-top:1px solid var(--s-mist);padding-top:12px}
.cert-disc{font-size:15px;line-height:1.5;background:var(--s-mist);border-radius:var(--s-r-input);padding:12px 14px}

/* ---------- Product 4 · Where Sapey sits ---------- */
.place{position:relative;margin-top:56px;display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1.1fr) 72px minmax(0,1fr);
  grid-template-areas:". . pol . ." ". . vt . ." "acts in sapey out sys" ". . vb . ." ". . chk . .";align-items:center}
.n-pol{grid-area:pol}.v-top{grid-area:vt}.n-acts{grid-area:acts}.lane-in{grid-area:in}.n-sapey{grid-area:sapey}
.lane-out{grid-area:out}.n-sys{grid-area:sys}.v-bottom{grid-area:vb}.n-chk{grid-area:chk}
.node{position:relative;z-index:1;display:grid;gap:10px;padding:18px 20px;background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card)}
.n-pol,.n-chk{width:100%;max-width:300px;justify-self:center}
.nh{display:flex;align-items:center;gap:12px;font-size:17px;font-weight:700}
.node p{font-size:13px;color:var(--s-ink2)}
.p-chips{display:flex;flex-wrap:wrap;gap:6px}
.p-chip{font-size:13px;padding:var(--sp-1) 10px;border-radius:var(--s-r-pill);background:var(--s-paper);border:1px solid var(--s-line)}
.n-sapey{justify-items:center;text-align:center;gap:6px;padding:26px 20px;border:2px solid var(--s-azure);box-shadow:0 16px 40px color-mix(in srgb,var(--s-azure) 16%,transparent)}
.n-sapey p{font-size:14px;max-width:24ch}
.lane{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--az-line) 0 6px,transparent 6px 12px)}
.vline{display:block;justify-self:center;width:2px;height:48px;background:repeating-linear-gradient(180deg,var(--az-line) 0 6px,transparent 6px 12px)}
/* three dots, one every 2 seconds on a 6 second loop: the same size, speed and fade for all three.
   Allowed passes Sapey and reaches your systems; Refused and Waiting stop at Sapey's left edge */
.pdot{position:absolute;top:-5px;left:0;width:12px;height:12px;border-radius:50%;opacity:0}
.pd-a{background:var(--s-jade)} .pd-r{background:var(--s-burg)} .pd-w{background:var(--s-amber)}
.lane-in .pd-a{animation:p-pass 6s linear infinite}
.lane-in .pd-r{animation:p-stop 6s linear 2s infinite}
.lane-in .pd-w{animation:p-stop 6s linear 4s infinite}
.lane-out .pd-a{animation:p-reach 6s linear infinite}
@keyframes p-stop{0%{left:0;opacity:0}5%{opacity:1}40%,50%{left:calc(100% - 12px);opacity:1}60%,100%{left:calc(100% - 12px);opacity:0}}
@keyframes p-pass{0%{left:0;opacity:0}5%{opacity:1}40%{left:calc(100% - 12px);opacity:1}46%{left:calc(100% + 12px);opacity:1}47%,100%{left:calc(100% + 12px);opacity:0}}
@keyframes p-reach{0%,52%{left:-12px;opacity:0}54%{opacity:1}88%{left:calc(100% - 12px);opacity:1}98%,100%{left:calc(100% - 12px);opacity:0}}
.place.is-off .pdot{animation-play-state:paused}
.place-foot{position:relative;display:flex;justify-content:center;align-items:center;min-height:44px;margin-top:28px}
.legend{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap}
.place-foot .motion-btn{position:absolute;right:0;top:50%;transform:translateY(-50%)}
@media (prefers-reduced-motion:reduce){.pdot{display:none}.frow.is-fresh{animation:none}}

/* ---------- Product 5 · What we don't claim ---------- */
.not{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.nlist{list-style:none;margin:0;padding:0;border-top:1px solid var(--s-line)}
.nitem{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--sp-3);padding:var(--sp-4) 0;border-bottom:1px solid var(--s-line)}
.nitem .n{font-family:var(--f-mono);font-size:13px;color:var(--s-azure);padding-top:var(--sp-1)}
.nitem h3{font-size:22px;line-height:1.3;font-weight:700}
.nitem p{font-size:15px;color:var(--s-ink2);margin-top:6px}

/* ---------- Product 6 · For engineering teams ---------- */
.eng-wrap{padding-bottom:96px}
.eng{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center;padding:var(--sp-6);background:var(--s-linen);border:1px solid var(--s-line);border-radius:var(--s-r-card);overflow:hidden}
.eng h2{font-size:31px;line-height:1.2;font-weight:700;letter-spacing:-.01em;margin:12px 0 10px}
.eng p:not(.eb){color:var(--s-ink2);margin-bottom:var(--sp-4)}
/* How to start: three compact numbered steps, the pricing line, two buttons */
.steps{list-style:none;margin:var(--sp-4) 0 var(--sp-3);padding:0;display:grid;gap:12px}
.steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:var(--sp-2);line-height:1.5}
.steps .n{font-family:var(--f-mono);font-size:13px;color:var(--s-azure);padding-top:2px}
.eng .price{font-size:15px;line-height:1.6}
.eng-btns{display:flex;flex-wrap:wrap;gap:12px}
.eng-grid{width:100%;max-width:300px;justify-self:end}
.eng-grid .g-m{fill:var(--s-mauve)} .eng-grid .g-v{fill:var(--s-violet)} .eng-grid .g-s{fill:var(--s-stone)}
.eng-grid .g-k{fill:var(--s-sky)} .eng-grid .g-az{fill:var(--s-azure)}

/* ---------- smaller screens ---------- */
@media (max-width:860px){
  .p-hero-in{grid-template-columns:minmax(0,1fr);gap:40px;padding-block:48px 64px}
  .tri,.rc-grid,.not{grid-template-columns:minmax(0,1fr)}
  .rc-grid,.not{gap:var(--sp-5)}
}
@media (max-width:760px){
  .sol{grid-template-columns:minmax(0,1fr);margin-top:var(--sp-5)}
  .p-hero .lead{font-size:17px}
  .ctas .btn{width:100%}
  .tri{margin-top:var(--sp-5)}
  .cert{margin:-20px 0 0 var(--sp-3)}
  .cert dl{grid-template-columns:minmax(0,1fr);gap:var(--sp-1)}
  .cert dd{margin-bottom:var(--sp-2)}
  /* where Sapey sits: a top to bottom stack, no moving dots */
  .place{margin-top:var(--sp-5);grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;
    grid-template-areas:"acts acts" "in in" "sapey sapey" "pol chk" "out out" "sys sys"}
  .place .lane{justify-self:center;width:2px;height:40px;background:repeating-linear-gradient(180deg,var(--az-line) 0 6px,transparent 6px 12px)}
  .place .vline,.pdot{display:none}
  .n-pol,.n-chk{max-width:none;align-self:stretch;margin-top:12px}
  .place-foot .motion-btn{display:none}
  .eng-wrap{padding-bottom:64px}
  .eng{grid-template-columns:minmax(0,1fr);padding:28px}
  .eng-grid{display:none}
}