/* Home page. Responsive rules are the design's own (01 Home.dc.html <helmet>), kept verbatim: they override inline styles,
   hence the !important. Breakpoints: tablet <= 1023px, phone <= 640px. Shared tokens and components live in site.css. */

@keyframes blink{50%{opacity:0}}
@keyframes marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@keyframes pgFlow{to{stroke-dashoffset:-20}}
@keyframes pgRing{0%{opacity:.22;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes fIn{from{opacity:0}}
@keyframes mIn{from{opacity:0;transform:translateY(8px)}}

/* Hover states (the design's style-hover values) */
.hv-grad:hover{background:var(--grad-hover) !important;color:#fff !important}
.hv-tint:hover{background:#f5f9fd !important}
.hv-tint2:hover{background:#f5f9fd !important;color:#065f93 !important}
.hv-white:hover{background:#fff !important;color:#065f93 !important}
.hv-pt:hover{background:rgba(8,114,176,.05) !important}
.hv-bd:hover{border-color:#0872b0 !important}
.hv-bdc:hover{border-color:#0872b0 !important;color:#0872b0 !important}
.hv-c:hover{color:#0872b0 !important}
.hv-c2:hover{color:#065f93 !important}
.hv-op:hover{opacity:.8 !important}
.hv-close:hover{background:#e3ecf4 !important}

/* Stats band: full-bleed hairlines above and below the row */
.stat-grid::before,.stat-grid::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:100vw;height:1px;background:rgba(255,255,255,.12);pointer-events:none}
.stat-grid::before{top:0}
.stat-grid::after{bottom:0}

/* Provenance graph: filing icons (folded corner + text lines) */
.pg-doc::before{content:'';position:absolute;top:0;right:0;width:9px;height:9px;background:linear-gradient(225deg,transparent 50%,#b9cde0 50%)}
.pg-doc::after{content:'';position:absolute;left:8px;right:8px;top:10px;height:9px;background:repeating-linear-gradient(180deg,#d6e2ee 0 1px,transparent 1px 4px)}
.pg-narrow{display:none}

/* Worked examples (the design's .ex-* inline styles). The active card (data-d="0") takes the row's remaining width; every
   other card is a sliver sized by its distance from it: 2u, u, u/2 for distance 1, 2, 3+. home.js sets data-d and the sliver
   counts --n1..--n3, so --rest is the slivers plus the gaps. The meta is always as wide as the active card, so its text never
   reflows while a card grows. u follows the row width W (100cqw) so that, with card 1 open (8 cards: 5.5u of slivers, 7 gaps
   of 12px), the open card is 1.5x what the old fixed slivers left it; --s0 is their total there (176+88+5x44, tablet
   109+55+5x27). Hence u = (3 * s0 - W + 84px) / 11, floored at 24px so the thinnest sliver keeps 12px (tablet from 784px).
   Each image is the size its own card has when open (its --o1..--o3, from index.ts, are the sliver counts then), the whole
   chart stretched to it, pinned left, no resting zoom: it never changes size, so nothing stretches mid-animation, a sliver
   shows a still slice and the open card shows the chart edge to edge. */
.ex-row{--s0:484px;--u:max(24px,(3 * var(--s0) - 100cqw + 84px) / 11);--s1:calc(2 * var(--u));--s2:var(--u);--s3:calc(var(--u) / 2);--rest:calc(var(--n1) * var(--s1) + var(--n2) * var(--s2) + var(--n3) * var(--s3) + (var(--n1) + var(--n2) + var(--n3)) * 12px);container-type:inline-size;display:flex;gap:12px;height:clamp(300px,34vw,460px)}
.ex-card{position:relative;flex:none;display:block;width:var(--s3);height:100%;border-radius:8px;overflow:hidden;background:#0a0a0a;transition:width .7s cubic-bezier(.2,.7,.2,1)}
.ex-card,.ex-card:hover{color:#fff}
.ex-card[data-d="0"]{width:calc(100% - var(--rest))}
.ex-card[data-d="1"]{width:var(--s1)}
.ex-card[data-d="2"]{width:var(--s2)}
.ex-img{position:absolute;left:0;top:0;display:block;width:calc(100cqw - var(--o1) * var(--s1) - var(--o2) * var(--s2) - var(--o3) * var(--s3) - (var(--o1) + var(--o2) + var(--o3)) * 12px);height:100%;max-width:none;object-fit:fill;filter:blur(5.6px) saturate(1.15);transition:filter .5s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.ex-tint{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,34,57,.06) 0%,rgba(11,34,57,.16) 50%,rgba(11,34,57,.72) 100%)}
.ex-meta{position:absolute;left:0;bottom:0;width:calc(100cqw - var(--rest));display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding:clamp(20px,2.4vw,32px);opacity:0;transition:opacity 0s}
.ex-card[data-d="0"] .ex-meta{opacity:1;transition:opacity .45s ease .3s}
.ex-txt{display:flex;flex-direction:column;gap:10px;min-width:0;max-width:620px}
.ex-tag{font:500 var(--text-sm)/1.3 var(--font);letter-spacing:.02em;color:rgba(255,255,255,.82)}
.ex-title{font:500 var(--text-lg)/1.25 var(--font);letter-spacing:-.015em;color:#fff;text-wrap:balance}
.ex-logo{flex:none;display:block;width:32px;height:32px}
.ex-arrow{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #d5e1ec;border-radius:4px;background:#fff;color:#0872b0;cursor:pointer}
.ex-arrow:focus-visible,.ex-card:focus-visible{outline:2px solid #0872b0;outline-offset:2px}
@media (hover:hover){
.ex-arrow:hover{background:#f5f9fd;border-color:#b7d9f0}
.ex-btn:hover{background:linear-gradient(100deg,#065f93 0%,#3450bd 55%,#5a41c2 100%) !important;color:#fff !important}
}
@media (min-width:641px) and (max-width:1023px){.ex-row{--s0:299px}}

/* Pop-up */
#hu[hidden]{display:none}

/* Get started recording (recording.js): hover states of its frosted controls and menu items */
.rc-cb:hover{background:rgba(255,255,255,.5) !important;color:#4d5f75 !important}
.rc-mi:hover{background:rgba(8,114,176,.08) !important}

/* A click on an animated card jumps straight to the final state */
.no-tr,.no-tr *{transition:none !important}

/* Animated-card controls are real buttons drawn exactly like the design's divs and spans */
.pc-btn{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;word-spacing:inherit;text-align:inherit;text-transform:inherit;text-indent:inherit;text-shadow:inherit}
.pc-btn:focus-visible{outline:2px solid #0872b0;outline-offset:2px}

.sec-h2{font-size:var(--text-section) !important;line-height:1.1 !important;font-weight:500 !important}
.sec-mb{margin-bottom:48px !important}
.sec-mt{margin-top:48px !important}
.pc-card > h3{font-size:var(--text-lg) !important;line-height:29px !important}
.r-h2s3 > span{display:block;white-space:nowrap}
@media (hover:hover){.ex-card:hover .ex-img{filter:blur(3.2px) saturate(1.25) !important;transform:scale(1.03) !important}}
@media (min-width:1024px){.ex-desc{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}}
@media (max-width:1023px){
.sec-h2{font-size:var(--text-xl) !important}
.sec-mb{margin-bottom:40px !important}
.sec-mt{margin-top:40px !important}
.pc-card > h3{font-size:var(--text-lg) !important;line-height:27px !important}
.r-h2s3{font-size:var(--text-display) !important;line-height:1.15 !important}
.pc-cvwin{left:34% !important;width:auto !important;right:-24px !important;min-width:0 !important}
.pc-cvcol{grid-template-columns:132px minmax(0,1fr) !important}
.pc-cvov{left:132px !important}
.pc-cvlab{font-size:var(--text-xs) !important;padding-top:22px !important}
.pc-third{flex:1 1 320px !important}
.pc-dvgrid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}
.pc-hl{display:none !important}
.r-sec{padding-block:72px !important}
.r-2col{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.r-prhead{flex-direction:column !important;align-items:stretch !important}
.r-prtoggle{align-self:center}
.r-plans{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.r-plans > article:nth-child(3){grid-column:1 / -1}
.r-free{display:grid !important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:14px 20px !important;padding:20px 24px !important}
.r-free > span:nth-child(1){grid-column:1;grid-row:1}
.r-free > span:nth-child(3){grid-column:2;grid-row:1}
.r-free > span:nth-child(2){grid-column:1 / -1;grid-row:2;min-width:0 !important;padding-top:14px;border-top:1px solid #eef3f8}
.r-mcpurl{flex:1 1 100% !important}
.r-mcpbtn{flex:1 1 0 !important;justify-content:center;white-space:nowrap}
}
@media (min-width:641px) and (max-width:1023px){
.r-close{grid-template-columns:minmax(0,1fr) !important;gap:48px !important}
.r-closelinks{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:640px){
.r-sec{padding-block:56px !important}
.r-rail{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:12px !important;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-16px;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.r-rail::-webkit-scrollbar{display:none}
.r-rail > article{flex:0 0 min(90%,380px) !important;width:auto !important;scroll-snap-align:start}
.r-2col{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.r-btns > a{flex:1 1 100% !important}
.r-free > span:nth-child(3) > span:first-child{display:none}
.r-hide-phone{display:none !important}
.r-fs16{font-size:var(--text-sm) !important;line-height:1.35 !important}
.r-fs18{font-size:var(--text-base) !important;line-height:1.35 !important}
.r-fs22{font-size:var(--text-base) !important;line-height:1.35 !important}
.r-fs40{font-size:var(--text-xl) !important;line-height:1.18 !important}
.r-globe{height:240px !important;margin-top:16px !important}
.r-h2s3{font-size:var(--text-xl) !important;line-height:1.15 !important}
.sec-h2{font-size:var(--text-xl) !important;line-height:1.15 !important}
.sec-mb{margin-bottom:28px !important}
.sec-mt{margin-top:28px !important}
.r-free + .r-plans{margin-top:28px !important}
.r-plans > article{scroll-snap-align:center !important}
.r-prdots{display:flex !important}
.ex-arrows{display:none !important}
.ex-row{height:auto !important}
.ex-row > .ex-card{flex:0 0 86% !important;width:auto !important;height:400px !important;scroll-snap-align:start}
.ex-img{width:100% !important}
.ex-meta{opacity:1 !important;width:100% !important;padding:20px !important}
.ex-title{font-size:var(--text-lg) !important}
.ex-foot{margin-top:20px !important}
.ex-foot > p{font-size:var(--text-base) !important;flex-basis:100% !important}
.ex-foot > a{width:100%}
.ex-card:focus-visible{outline-offset:-2px}
.pc-card > h3{font-size:var(--text-lg) !important;line-height:24px !important;padding:22px 20px 0 !important}
.pc-card > h3 + div{margin-top:24px !important;zoom:.88}
[style*="1266px)"]{padding-left:0 !important;padding-right:0 !important}
.pc-pad{padding:0 20px 22px !important}
.pc-cvreg{display:flex !important;flex-direction:column;gap:14px;min-height:0 !important;padding:0 20px}
.pc-cvwin{position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:auto !important;min-width:0 !important;margin:0 -40px -24px 0;transform:none !important}
.pc-cvbody{padding:16px 40px 28px 14px !important}
.pc-cvcol{grid-template-columns:132px minmax(0,1fr) !important}
.pc-cvov{left:132px !important}
.pc-cvlab{font-size:var(--text-xs) !important;padding-right:4px !important}
.pc-third{min-width:0 !important}

.pc-tkm{display:none !important}
.pc-cvfc{position:relative !important;left:auto !important;top:auto !important;width:auto !important;min-width:0 !important;transform:none !important;display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:4px !important;padding:16px !important;order:-1}
.pc-cvfc > :nth-child(1){grid-column:1;grid-row:1}
.pc-cvfc > :nth-child(2){grid-column:1;grid-row:2;font-size:var(--text-xl) !important}
.pc-cvfc > :nth-child(3){display:none !important}
.pc-cvfc > :nth-child(4){grid-column:2;grid-row:1}
.pc-cvfc > :nth-child(5){grid-column:2;grid-row:2;font-size:var(--text-xl) !important}
.pc-cvfc > :nth-child(6){grid-column:2;grid-row:3}
.pc-enx{left:20px !important;right:20px !important}
.pc-entl{left:72px !important;right:72px !important}
.pc-third{min-height:0 !important}
.pc-pad{min-height:0 !important}
.pc-sbreg{min-height:400px !important}
.pc-ptvers{margin-top:14px !important}
.pc-dvln{font-size:var(--text-sm) !important;line-height:22px !important}
.pc-dvrow{min-height:22px !important;gap:12px !important}
.pc-dvcode{min-height:86px}
.r-gsbtns > a{flex:1 1 0 !important;min-width:0;padding:0 10px !important;font-size:var(--text-sm) !important;white-space:nowrap}
.r-free{display:none !important}
.pc-enname{font-size:var(--text-base) !important;line-height:23px !important}
.pc-sbwin{left:20px !important}
.pc-sbname{white-space:normal !important}
.pc-skwin{margin-right:-40px !important}
.pc-dvreg{height:auto !important;display:flex;flex-direction:column;gap:14px;padding:0 20px;margin-top:24px !important}
.pc-dvwin{position:relative !important;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;width:auto !important;transform:none !important}
.pc-dvout{margin-bottom:-24px}
.pc-op{display:none !important}
.pc-dvgrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.r-mcpbox{display:none !important}
.r-mcptabs{column-gap:0 !important;padding:0 12px !important}
.r-mcptabs > button{flex:1 1 50%;justify-content:center}
.r-mcptabs > button:last-child{flex-basis:100%}
.r-stat{padding:22px 8px !important}
.r-howcode{display:none !important}
.r-mcpurl{display:none !important}
.r-hero-sub{display:block;margin-top:12px;font-size:var(--text-base) !important;line-height:1.45 !important;letter-spacing:0 !important}
.r-hero-term{padding:0 0 56px !important}
.r-hero-term > div{display:none !important}
.pg-wide{display:none}
.pg-narrow{display:block}
}

/* Pricing and worked-example cards lift 3px on hover (mouse, wide screens, motion allowed) */
@media (hover:hover) and (min-width:641px) and (prefers-reduced-motion:no-preference){
#pr-rail > [data-plan]{transition:box-shadow .3s,border-color .3s,transform .25s cubic-bezier(.2,.7,.2,1) !important}
#pr-rail > [data-plan]:hover{transform:translateY(-3px)}
.ex-card{transition:width .7s cubic-bezier(.2,.7,.2,1),transform .25s cubic-bezier(.2,.7,.2,1)}
.ex-card:hover{transform:translateY(-3px)}
}

/* Reduced motion: every card shows its final state; nothing moves. */
@media (prefers-reduced-motion:reduce){
main *,main *::before,main *::after{animation:none !important;transition:none !important}
}

@media (max-width:1023px){#s1 h1{font-size:var(--text-section) !important}}

@media (max-width:480px){.pg-narrow .pg-source-chips{grid-template-columns:minmax(0,1fr) !important}}

@media (max-width:1199px){[data-h="stat-n"]{font-size:var(--text-xl) !important}}
@media (max-width:379px){
[data-h="stat-n"]{font-size:var(--text-lg) !important}
.r-gsbtns > a{font-size:var(--text-xs) !important}
}