/* =========================================================================
   Pipe — base stylesheet
   Shared by every page. Page-specific rules stay in an inline <style> block.

   Sections:
     1.  Tokens
     2.  Reset and typography
     3.  Buttons and links
     4.  Announcement bar
     5.  Navigation
     6.  Hero
     7.  Recorder mock
     8.  Logo strip
     9.  Pipeline
     10. Client tabs
     11. Numbers
     12. Infrastructure
     13. Developers
     14. Dashboard
     15. Security
     16. Integration cloud
     17. CTA
     18. Footer
     19. Integration page components
     20. Compare page components
     21. Responsive
     22. Document pages
   ========================================================================= */

/* Self-hosting (both SIL OFL): Manrope from https://github.com/sharanda/manrope,
   Source Sans 3 from https://github.com/adobe-fonts/source-sans (or fonts.google.com).
   Drop the woff2 files in assets/fonts/, uncomment this block and delete the
   Google Fonts <link> in partials/head.php. Variable woff2 files cover every
   weight used here. */
/*
@font-face{
  font-family:"Manrope";
  src:url("../fonts/Manrope[wght].woff2") format("woff2-variations"),
      url("../fonts/Manrope[wght].woff2") format("woff2");
  font-weight:200 800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("../fonts/SourceSans3[wght].woff2") format("woff2-variations"),
      url("../fonts/SourceSans3[wght].woff2") format("woff2");
  font-weight:200 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Source Sans 3";
  src:url("../fonts/SourceSans3-Italic[wght].woff2") format("woff2-variations"),
      url("../fonts/SourceSans3-Italic[wght].woff2") format("woff2");
  font-weight:200 900;
  font-style:italic;
  font-display:swap;
}
*/

/* ---- 1. Tokens ---- */
:root{
  --paper:#F6F7F9; --white:#FFFFFF; --ink:#14213D; --slate:#5A6B80; --line:#DDE3EA; --button:#4FF2A0;
  --rec:#E63946; --rec-soft:#FDECEE; --ok:#1FA971; --ok-soft:#E4F6EE;
  --ink-soft:#EEF1F6;
  --display:"Manrope",system-ui,sans-serif;
  --body:"Source Sans 3",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --max:1180px; --gutter:clamp(20px,4vw,48px);
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---- 2. Reset and typography ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;font-size:18px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.1;letter-spacing:-.025em;text-wrap:balance}
h1{font-size:clamp(38px,5.8vw,70px);font-weight:800;letter-spacing:-.035em}
h2{font-size:clamp(30px,4vw,48px)}
h3{font-size:21px;line-height:1.25}
.lede{font-size:clamp(19px,1.7vw,22px);color:var(--slate);}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
section{padding:clamp(72px,9vw,120px) 0}
.section-head{margin-bottom:clamp(36px,5vw,56px)}
.section-head h2{max-width:840px;}
.section-head p{margin-top:14px}
:focus-visible{outline:3px solid var(--rec);outline-offset:3px;border-radius:4px}

/* ---- 3. Buttons and links ---- */
.btn{display:inline-flex;align-items:center;gap:10px;padding:6px 18px;border-radius:10px;font-weight:600;font-size:16px;border:1.5px solid transparent;transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);cursor:pointer;font-family:inherit;white-space:nowrap}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#0E1830}
.btn-secondary{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-details{background:#14213C;color:#fff;}
.btn-secondary:hover{border-color:var(--ink)}
.btn-rec{background:var(--rec);color:#fff}
.btn-rec:hover{background:#D12F3C}
.btn-trial{background:var(--button);color:#14213C}
.btn-trial:hover{background:#1de580}
.btn:active{transform:translateY(1px)}
.link{font-weight:600;color:var(--ink);border-bottom:1.5px solid var(--line);padding-bottom:2px;transition:border-color .2s}
.link:hover{border-color:var(--rec)}

[id] {
  scroll-margin-top: 100px;
}

/* ---- 4. Announcement bar ---- */
.announce{background:var(--ink);color:#fff;font-size:14px;text-align:center;padding:10px var(--gutter)}
.announce a{text-decoration:underline;text-underline-offset:3px;margin-left:6px}
.announce .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:10px;vertical-align:middle}

/* ---- 5. Navigation ---- */
header.nav{position:sticky;top:0;z-index:50;background:rgba(246,247,249,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-.02em}
.menu{display:flex;gap:6px;align-items:center;list-style:none}
.menu>li{position:relative}
.menu>li>a,.menu>li>button{display:flex;align-items:center;gap:5px;padding:9px 13px;border-radius:999px;font-weight:500;font-size:15px;color:var(--ink);background:none;border:0;font-family:inherit;cursor:pointer;transition:background .2s}
.menu>li>a:hover,.menu>li>button:hover,.menu>li>button[aria-expanded="true"]{background:var(--ink-soft)}
.menu svg{width:12px;height:12px;opacity:.6}
.dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:8px;box-shadow:0 18px 44px -20px rgba(20,33,61,.35);display:none;list-style:none}
.dropdown a{display:block;padding:9px 12px;border-radius:var(--r-sm);font-size:15px}
.dropdown a:hover{background:var(--ink-soft)}
.menu>li.open .dropdown{display:block}
.nav-cta{display:flex;gap:8px;align-items:center}
.nav-cta .btn{padding:6px 18px;font-size:15px}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:2px;background:var(--ink);margin:5px 0;border-radius:2px}

/* ---- 6. Hero ---- */
.hero{padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero .lede{margin-top:22px}
.hero-cta{display:flex;gap:12px;margin-top:34px;flex-wrap:wrap}
.hero-note{margin-top:18px;font-size:14px;color:var(--slate)}
.hero-note b{color:var(--ink);font-weight:600}

/* ---- 7. Recorder mock ---- */
.recorder{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 40px 80px -40px rgba(20,33,61,.35),0 1px 0 rgba(20,33,61,.04);overflow:hidden;}
.rec-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:13px;color:var(--slate)}
.rec-bar .dots i{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--line);margin-right:5px}
.rec-bar .url{flex:1;background:var(--paper);border-radius:6px;padding:5px 10px;font-family:var(--mono);font-size:12px;color:var(--slate)}
.rec-stage{position:relative;aspect-ratio:16/10;background:linear-gradient(160deg,#1B2A4A 0%,#0F1A33 100%);overflow:hidden}
.rec-stage .grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px}
.cam{position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);width:38%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3D4F7A,#1B2A4A 70%);box-shadow:inset 0 0 0 6px rgba(255,255,255,.06)}
.cam::after{content:"";position:absolute;left:50%;top:78%;transform:translateX(-50%);width:120%;height:60%;background:#2C3D63;border-radius:50% 50% 0 0}
.cam::before{content:"";position:absolute;left:50%;top:38%;transform:translateX(-50%);width:44%;height:44%;background:#C9B7A3;border-radius:50%;z-index:1}
.pip{position:absolute;right:14px;bottom:60px;width:30%;aspect-ratio:16/10;border-radius:10px;background:#fff;border:2px solid rgba(255,255,255,.7);box-shadow:0 10px 30px rgba(0,0,0,.4);overflow:hidden}
.pip .win{position:absolute;inset:8px;background:var(--paper);border-radius:4px}
.pip .win::before{content:"";position:absolute;left:8px;right:8px;top:8px;height:5px;background:var(--line);border-radius:3px}
.pip .win::after{content:"";position:absolute;left:8px;right:30%;top:20px;height:5px;background:var(--line);border-radius:3px;box-shadow:0 10px 0 var(--line),0 20px 0 var(--line)}
.rec-badge{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.45);color:#fff;padding:6px 12px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.04em}
.rec-badge i{width:9px;height:9px;border-radius:50%;background:var(--rec);animation:blink 1.2s infinite}
@keyframes blink{50%{opacity:.2}}
.wave{position:absolute;left:0;right:0;bottom:0;height:54px;background:linear-gradient(transparent,rgba(0,0,0,.35))}
.wave svg{width:100%;height:100%}
.rec-ctl{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;font-size:13px;color:var(--slate)}
.rec-ctl .stop{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.rec-ctl .stop i{width:26px;height:26px;border-radius:50%;background:var(--rec-soft);display:grid;place-items:center}
.rec-ctl .stop i::after{content:"";width:10px;height:10px;background:var(--rec);border-radius:2px}
.rec-ctl .q{font-family:var(--mono);font-size:12px}
.upload{position:absolute;left:0;right:0;top:0;height:3px;background:var(--line)}
.upload i{display:block;height:100%;width:0;background:var(--ok);animation:upload 6s var(--ease) infinite}
@keyframes upload{0%,40%{width:0}75%{width:100%}100%{width:100%}}
.chip{position:absolute;background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600;box-shadow:0 12px 30px -14px rgba(20,33,61,.3);display:flex;gap:8px;align-items:center}
.chip i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.chip-1{right:-14px;top:12%}
.chip-2{left:-18px;top:44%}
.chip-3{left:24%;bottom:-40px}

/* Home hero flow: three chips that always show the whole path of the recording,
   each .is-pending, .is-live or .is-done (driven by the script in index.php) */
.hero-flow{list-style:none;margin:0;padding:0}
/* chip 2 sits under the processing checklist rather than across it */
.hero-flow .chip-2{top:auto;bottom:11%}
.hc{padding:7px 16px 7px 7px;gap:10px;transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.hc-ic{position:relative;width:28px;height:28px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--line);display:grid;place-items:center;font-family:var(--mono);font-size:11.5px;color:var(--slate);transition:background .3s,border-color .3s,color .3s,opacity .35s}
.hc-ic::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:2px solid transparent;border-top-color:var(--rec);opacity:0}
.hc-ic::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-family:var(--body);font-size:14px;font-weight:700;opacity:0;transition:opacity .3s}
.hc-tx{display:flex;flex-direction:column;line-height:1.25;transition:opacity .35s}
.hc-tx b{font-size:13px;font-weight:600}
.hc-tx small{display:grid;font-size:12px;font-weight:500;color:var(--slate)}
.hc-tx small>span{grid-area:1/1;opacity:0;transition:opacity .3s}
.hc.is-pending .hc-ic,.hc.is-pending .hc-tx{opacity:.5}
.hc.is-pending small>span:nth-child(1),.hc.is-live small>span:nth-child(2),.hc.is-done small>span:nth-child(3){opacity:1}
.hc.is-live{transform:scale(1.04);border-color:var(--rec-soft);box-shadow:0 18px 40px -14px rgba(20,33,61,.45)}
.hc.is-live .hc-ic{background:var(--rec-soft);border-color:var(--rec-soft);color:var(--rec)}
.hc.is-live .hc-ic::before{opacity:1;animation:hc-spin .9s linear infinite}
.hc.is-done .hc-ic{background:var(--ok);border-color:var(--ok);color:transparent}
.hc.is-done .hc-ic::after{opacity:1}
.hc.is-done small{color:var(--ok)}
/* the mock follows along: badge states, upload bar tied to the recording, dimmed and stopped */
.recorder .rec-badge{z-index:2}
.recorder .rec-badge>span{display:none;align-items:center;gap:8px}
.recorder .rec-badge[data-state="rec"] .rb-rec,.recorder .rec-badge[data-state="proc"] .rb-proc,.recorder .rec-badge[data-state="ok"] .rb-ok{display:flex}
.recorder .rb-proc i{background:none;border:1.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:hc-spin .8s linear infinite}
.recorder .rb-ok{color:#7CE3B4}
.recorder .rec-stage::after{content:"";position:absolute;inset:0;background:rgba(15,26,51,.4);opacity:0;transition:opacity .4s;z-index:1}
.recorder.is-stopped .rec-stage::after{opacity:1}
.recorder.hero-live .upload i{animation:none;width:100%;transform:scaleX(var(--up,0));transform-origin:left}
.recorder.is-stopped .rec-ctl .stop i{animation:hc-press .45s var(--ease)}
/* Processing checklist, after Stop: a panel over the dimmed stage. Rows are
   listed from the start (dim), spin while running (.is-live) and keep their
   check once done (.is-done), so the list can be read at leisure. */
.px{position:absolute;right:14px;top:56px;z-index:3;width:min(62%,300px);padding:10px 12px 8px;border-radius:12px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 22px 44px -18px rgba(0,0,0,.6);font-size:12.5px;line-height:1.25;opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease);pointer-events:none}
.recorder.is-proc .px{opacity:1;transform:none}
.px-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding-bottom:7px;margin-bottom:4px;border-bottom:1px solid var(--line)}
.px-h b{font-family:var(--display);font-weight:700;font-size:13px}
.px-h span{font-family:var(--mono);font-size:10.5px;color:var(--slate)}
.px-list{list-style:none;margin:0;padding:0;display:grid}
.px-list li{display:grid;grid-template-columns:16px 1fr auto;gap:9px;align-items:center;min-height:28px;opacity:.4;transition:opacity .3s}
.px-list li.is-live,.px-list li.is-done{opacity:1}
.px-list li>i{position:relative;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--line);transition:background .3s,border-color .3s}
.px-list li.is-live>i{border-color:var(--rec-soft);border-top-color:var(--rec);animation:hc-spin .8s linear infinite}
.px-list li.is-done>i{background:var(--ok);border-color:var(--ok)}
.px-list li.is-done>i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:3.5px;height:7px;border:solid #fff;border-width:0 1.8px 1.8px 0;transform:rotate(45deg)}
.px-list li>span{font-weight:600}
.px-list em{font-style:normal;font-family:var(--mono);font-size:10.5px;color:var(--slate);white-space:nowrap}
.px-list li.is-done em{color:var(--ok)}
.px-thumb{width:28px;height:18px;border-radius:3px;background:linear-gradient(160deg,#3D4F7A,#1B2A4A);position:relative;overflow:hidden}
.px-thumb::before{content:"";position:absolute;left:50%;top:3px;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#C9B7A3}
.px-film{display:flex;gap:2px}
.px-film b{width:8px;height:12px;border-radius:2px;background:linear-gradient(160deg,#3D4F7A,#1B2A4A)}
.px-list li.is-done .px-thumb,.px-list li.is-done .px-film b{animation:px-pop .3s var(--ease) both}
.px-list li.is-done .px-film b:nth-child(2){animation-delay:.05s}
.px-list li.is-done .px-film b:nth-child(3){animation-delay:.1s}
.px-list li.is-done .px-film b:nth-child(4){animation-delay:.15s}
.px-list li.is-done .px-film b:nth-child(5){animation-delay:.2s}
@media (max-width:640px){
  .px{left:12px;right:12px;top:46px;width:auto;padding:8px 10px 6px;font-size:11.5px}
  .px-list li{min-height:23px}
  .px-h{padding-bottom:5px}
}
/* chip 2 counts the beats on a five-segment ring */
.hc-ring{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);opacity:0;transition:opacity .3s}
.hc-ring circle{fill:none;stroke-width:2.5}
.hc-ring .bg{stroke:rgba(230,57,70,.18);stroke-dasharray:18 2}
.hc-ring .fg{stroke:var(--rec);transition:stroke-dasharray .3s}
.chip-2.is-live .hc-ring{opacity:1}
.chip-2.is-live .hc-ic::before{opacity:0;animation:none}
@keyframes px-pop{from{opacity:0;transform:scale(.4)}}
@keyframes hc-spin{to{transform:rotate(360deg)}}
@keyframes hc-press{40%{transform:scale(.78)}}

/* ---- 8. Logo strip ---- */
.logos{padding:20px 0 40px}
.logos p{font-size:14px;color:var(--slate);margin-bottom:22px}
.logo-row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.logo-row img{height:50px;width:auto;transition:opacity .2s}
.logo-row img:hover{opacity:1}

/* ---- 9. Pipeline ---- */
.pipeline{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pipe-track{position:relative;margin-top:16px}
.pipe-svg{position:absolute;left:0;right:0;top:34px;height:60px;z-index:0;pointer-events:none}
.pipe-svg .tube{stroke:var(--line);stroke-width:14;fill:none;stroke-linecap:round}
.pipe-svg .inner{stroke:#fff;stroke-width:8;fill:none;stroke-linecap:round}
.pipe-svg .flow{stroke:var(--rec);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:22 34;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-56}}
.stages{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.stage{padding-top:22px}
.stage .node{width:84px;height:84px;border-radius:50%;background:#fff;border:1.5px solid var(--line);display:grid;place-items:center;margin-bottom:22px;box-shadow:0 0 0 8px #fff}
.stage .node svg{width:32px;height:32px;stroke:var(--ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.stage:first-child .node{border-color:var(--rec);background:var(--rec-soft)}
.stage:first-child .node svg{stroke:var(--rec)}
.stage:last-child .node{border-color:var(--ok);background:var(--ok-soft)}
.stage:last-child .node svg{stroke:var(--ok)}
.stage h3{margin-bottom:8px}
.stage p{color:var(--slate);font-size:15.5px}
.stage .num{font-family:var(--mono);font-size:12px;color:var(--slate);margin-bottom:8px}

/* ---- 10. Client tabs ---- */
.client-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,72px);align-items:start}
.tabs{display:flex;flex-direction:column;gap:6px;margin-top:28px}
.tab{text-align:left;background:none;border:1.5px solid transparent;border-radius:var(--r-md);padding:18px 20px;cursor:pointer;font-family:inherit;transition:background .2s,border-color .2s;display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.tab .ic{width:44px;height:44px;border-radius:12px;background:var(--ink-soft);display:grid;place-items:center}
.tab .ic svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab h3{font-size:19px;margin-bottom:4px}
.tab p{font-size:15px;color:var(--slate);max-width:none}
.tab .go{display:none;margin-top:10px;font-size:14px}
.tab[aria-selected="true"]{background:#fff;border-color:var(--line)}
.tab[aria-selected="true"] .ic{background:var(--rec-soft)}
.tab[aria-selected="true"] .ic svg{stroke:var(--rec)}
.tab[aria-selected="true"] .go{display:inline-block}
.panel{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:14px;box-shadow:0 30px 60px -40px rgba(20,33,61,.35)}
.panel figcaption{padding:12px 6px 2px;font-size:14px;color:var(--slate);display:flex;justify-content:space-between;gap:16px}
.panel figcaption span{font-family:var(--mono);font-size:12px}

/* ---- 11. Numbers ---- */
.numbers{background:var(--ink);color:#fff}
.numbers .lede{color:rgba(255,255,255,.7)}
.num-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
/* scoped to the grid: .stage .num in the pipelines is a different element */
.num-grid .num{border-top:1px solid rgba(255,255,255,.18);padding-top:22px}
.num strong{display:block;font-family:var(--display);font-weight:800;font-size:clamp(44px,4.6vw,64px);letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.num strong small{font-size:.5em;font-weight:700;letter-spacing:-.02em}
/* the label only: the counter inside <strong> is a span too */
.num>span{display:block;margin-top:10px;color:rgba(255,255,255,.7);font-size:16px}

/* ---- 12. Infrastructure ---- */
.infra-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:center}
.infra-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--rec);margin-bottom:14px}
/* Full-bleed dotted world map behind the section. The map "plane" is scaled in px per degree (--k)
   from the space left of the text column (--zone), so the US and EU pins always sit there, never under the text. */
.infra{position:relative;overflow:hidden;isolation:isolate}
.infra .wrap{position:relative;z-index:2}
.infra-map{position:absolute;inset:0;z-index:0;pointer-events:none;
  --fade-x:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);--fade-y:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);
  -webkit-mask-image:var(--fade-x),var(--fade-y);-webkit-mask-composite:source-in;mask-image:var(--fade-x),var(--fade-y);mask-composite:intersect}
.infra-map::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,247,249,0) 47%,rgba(246,247,249,.84) 58%)}
.infra-plane{
  --zone:calc(50vw - clamp(32px,5vw,64px)/2);
  --k:calc(var(--zone)/178);
  position:absolute;width:calc(var(--k)*415);height:calc(var(--k)*169.2);
  left:calc(var(--zone)*.56 - var(--k)*145);top:calc(44% - var(--k)*56.7)}
.infra-map .infra-plane{-webkit-mask-image:linear-gradient(180deg,transparent 2%,#000 20%,#000 80%,transparent 98%);mask-image:linear-gradient(180deg,transparent 2%,#000 20%,#000 80%,transparent 98%)}
.im-dots,.im-flows{position:absolute;inset:0;width:100%;height:100%;display:block}
.im-flows{overflow:visible}
.im-glow{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(230,57,70,.09),rgba(230,57,70,0))}
.im-arc{stroke-width:1.2;vector-effect:non-scaling-stroke}
.im-user{fill:#fff;stroke:var(--ink);stroke-opacity:.5;stroke-width:1.5;vector-effect:non-scaling-stroke}
.im-link{stroke:var(--rec);stroke-opacity:.45;stroke-width:1.5;vector-effect:non-scaling-stroke}
.im-lead{stroke:var(--ink);stroke-opacity:.5;stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
/* data packets: a short dash (pathLength=100) running from sender to region, then resting */
.im-pkt{stroke:var(--rec);stroke-width:7;stroke-linecap:round;animation:im-pkt 4.4s linear infinite}
.im-pkt--zone{stroke-width:6;animation-duration:5.6s}
@keyframes im-pkt{0%{stroke-dashoffset:0;opacity:0}5%{opacity:1}55%{stroke-dashoffset:-100;opacity:1}56%,100%{stroke-dashoffset:-100;opacity:0}}
.im-pin{position:absolute;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--rec);
  box-shadow:0 0 0 2.5px #fff,0 0 0 4px rgba(230,57,70,.22),0 4px 16px 2px rgba(230,57,70,.5)}
.im-pin--sm{width:8px;height:8px;margin:-4px 0 0 -4px}
.im-pin::before,.im-pin::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--rec);opacity:0;animation:im-ping 3.2s cubic-bezier(.2,.6,.3,1) var(--d,0s) infinite}
.im-pin::after{animation-delay:calc(var(--d,0s) + 1.6s)}
@keyframes im-ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(4.5);opacity:0}}
.infra.is-idle *,.infra.is-idle *::before,.infra.is-idle *::after{animation-play-state:paused}
/* region cards, anchored to map coordinates (--x/--y = card corner, in % of the plane) */
.infra-regions{z-index:3;pointer-events:none;font-size:clamp(11px,calc(var(--k)*3.75),13.5px)}
.im-card{position:absolute;left:var(--x);bottom:calc(100% - var(--y));pointer-events:auto;white-space:nowrap;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:12px;padding:.85em 1.1em;
  box-shadow:0 22px 44px -28px rgba(20,33,61,.45),0 2px 6px -2px rgba(20,33,61,.08)}
.im-card--r{left:auto;right:calc(100% - var(--x))}
.im-card::after{content:"";position:absolute;left:-4px;bottom:-4px;width:7px;height:7px;border-radius:50%;background:var(--ink)}
.im-card--r::after{left:auto;right:-4px}
.im-card-h{font-family:var(--display);font-weight:700;font-size:1.08em;margin-bottom:.45em;display:flex;align-items:center;gap:.6em}
.im-card-h span{font-family:var(--mono);font-size:.78em;font-weight:500;color:var(--ok);background:var(--ok-soft);padding:.1em .55em;border-radius:999px}
.im-card ul{list-style:none;margin:0;padding:0;display:grid;gap:.3em;color:var(--slate)}
.im-card li{display:flex;align-items:center;gap:.6em}
.im-card code{font-family:var(--mono);font-size:.85em;font-weight:600;color:var(--rec);background:var(--rec-soft);padding:.1em .45em;border-radius:5px}
.feat-list{display:grid;gap:22px}
.feat{display:grid;grid-template-columns:auto 1fr;gap:16px}
.feat .ic{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center}
.feat .ic svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{font-size:18px;margin-bottom:4px}
.feat p{color:var(--slate);font-size:15.5px;max-width:none}

/* ---- 13. Developers ---- */
.dev{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dev-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.code{background:#0F1A33;color:#DDE3EA;border-radius:var(--r-lg);overflow:hidden;font-family:var(--mono);font-size:13.5px;line-height:1.65;box-shadow:0 30px 60px -40px rgba(20,33,61,.5)}
.code-tabs{display:flex;gap:4px;padding:10px 12px;background:#0B1327;border-bottom:1px solid rgba(255,255,255,.08)}
.code-tabs button{background:none;border:0;color:rgba(255,255,255,.55);font-family:var(--mono);font-size:12.5px;padding:6px 12px;border-radius:6px;cursor:pointer}
.code-tabs button[aria-selected="true"]{background:rgba(255,255,255,.1);color:#fff}
.code-tabs button:hover{background-color: rgba(255,255,255,.1)} 
.code pre{padding:18px 20px;overflow-x:auto;margin:0;tab-size:2}
.code pre[hidden]{display:none}
.c-k{color:#FF9EA5}.c-s{color:#A6E3B0}.c-f{color:#8FC7FF}.c-c{color:rgba(255,255,255,.4)}.c-p{color:#F5D67B}
.dev-points{display:grid;gap:14px;margin-top:8px}
.dev-point{padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.dev-point h3{font-size:17px;margin-bottom:4px}
.dev-point p{font-size:15px;color:var(--slate);max-width:none}
.dev-point a{border-bottom:1px solid var(--line)}
.dev-point a:hover{border-color:var(--rec)}

/* ---- 14. Dashboard ---- */
.dash-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.dash-item{padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.dash-item h3{font-size:17px;margin-bottom:6px}
.dash-item p{font-size:15px;color:var(--slate);max-width:none}
.dash-item code{font-family:var(--mono);font-size:13px;background:var(--ink-soft);padding:1px 5px;border-radius:4px}
/* Dashboard screenshots in a laptop: a dark bezel around a 16:10 view, an
   aluminium base, and the shots crossfading; each scrolls down a little while
   it is shown (.on, set by the script in index.php), by its own --pan. */
.lap{position:relative;max-width:960px;margin:36px auto 0;padding:0 6%}
.lap::before{content:"";position:absolute;left:10%;right:10%;top:12%;bottom:4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(20,33,61,.16),rgba(20,33,61,0));filter:blur(30px)}
.lap-screen{position:relative;padding:2.4% 2.4% 3.2%;border-radius:22px 22px 8px 8px;background:linear-gradient(180deg,#1F2533,#0E121B);box-shadow:inset 0 0 0 1.5px #3A4152,inset 0 0 0 5px #0B0E15,0 50px 90px -50px rgba(20,33,61,.6)}
.lap-screen::before{content:"";position:absolute;left:50%;top:1%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:#2C3446;box-shadow:inset 0 0 0 2px #1A1F2B}
.lap-view{position:relative;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#fff}
.lap-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;opacity:0;transition:opacity .8s var(--ease)}
.lap-view img.on{opacity:1;animation:lap-scroll 4.8s var(--ease) both}
/* glare */
.lap-view::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.1) 0,rgba(255,255,255,.03) 34%,transparent 34.2%)}
.lap-base{position:relative;height:clamp(12px,1.7vw,19px);margin:0 -6.5%;border-radius:2px 2px 22px 22px/2px 2px 16px 16px;background:linear-gradient(180deg,#F2F4F7 0,#D9DDE3 45%,#B7BDC7 100%);box-shadow:0 1px 0 #fff inset,0 24px 34px -22px rgba(20,33,61,.55)}
.lap-base::before{content:"";position:absolute;left:50%;top:0;width:15%;height:42%;transform:translateX(-50%);border-radius:0 0 10px 10px;background:linear-gradient(180deg,#C5CAD2,#E3E6EB)}
.lap-nav{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:22px}
.lap-cap{font-size:14px;font-weight:600;min-width:9.5em;text-align:right}
.lap-dots{display:flex;gap:6px}
.lap-dots button{width:8px;height:8px;padding:0;border:0;border-radius:999px;background:var(--line);cursor:pointer;transition:width .3s var(--ease),background .3s}
.lap-dots button[aria-pressed="true"]{width:24px;background:var(--ink)}
@keyframes lap-scroll{0%,30%{object-position:50% 0}100%{object-position:50% var(--pan,30%)}}
/* ---- Card grids, site-wide ----
   .ci is the icon tile at the top of a feature or use-case card; the text card
   grids on the product pages lift slightly on hover and tint their icon. */
.ci{width:38px;height:38px;border-radius:10px;background:var(--ink-soft);display:grid;place-items:center;margin-bottom:14px;transition:background .25s}
.ci svg{width:19px;height:19px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:stroke .25s}
.uc,.ft,.store,.man,.today,.res-item,.sec-item,.fcard,.why>div{transition:border-color .25s,transform .25s var(--ease),box-shadow .25s}
.uc:hover,.ft:hover,.store:hover,.man:hover,.today:hover,.res-item:hover,.sec-item:hover,.fcard:hover,.why>div:hover{border-color:#C6CFDA;transform:translateY(-2px);box-shadow:0 18px 36px -24px rgba(20,33,61,.35)}
.uc:hover .ci,.ft:hover .ci,.store:hover .ci,.man:hover .ci,.today:hover .ci{background:var(--rec-soft)}
.uc:hover .ci svg,.ft:hover .ci svg,.store:hover .ci svg,.man:hover .ci svg,.today:hover .ci svg{stroke:var(--rec)}

/* ---- 15. Security ---- */
.sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.sec-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.sec-item{padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper)}
.sec-item h3{font-size:17px;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.sec-item h3 svg{width:18px;height:18px;stroke:var(--ok);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sec-item p{font-size:15px;color:var(--slate);max-width:none}
.soc{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:12px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);font-size:14px}
.soc b{font-family:var(--display);font-size:18px;font-weight:800}
.soc i{width:38px;height:38px;border-radius:50%;background:var(--ok-soft);display:grid;place-items:center}
.soc i svg{width:18px;height:18px;stroke:var(--ok);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* ---- 16. Integration cloud ---- */
.integ-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px}
.integ-cloud a{display:inline-flex;align-items:center;gap:9px;padding:8px 16px 8px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:15px;font-weight:500;transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.integ-cloud a:hover{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 10px 20px -14px rgba(20,33,61,.45)}
/* brand mark, or a monogram where there is none (partials/brand-icons.php) */
.integ-cloud .im{width:26px;height:26px;border-radius:50%;background:var(--ink-soft);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:8.5px;letter-spacing:-.01em;color:var(--slate);flex-shrink:0}
.integ-cloud .im svg{width:14px;height:14px;fill:var(--ink)}
.integ-cloud a.more{padding:10px 18px}
.integ-cloud a.more{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ---- 17. CTA ---- */
.cta{padding-bottom:clamp(72px,9vw,120px)}
.cta-box{background:var(--ink);color:#fff;border-radius:28px;padding:clamp(40px,6vw,80px);position:relative;overflow:hidden;isolation:isolate}
.cta-box>*{position:relative;z-index:1}
/* a patch of the world map's dots, fading out towards the copy */
.cta-box::before{content:"";position:absolute;inset:-10% -6% -10% 34%;z-index:0;background:url(../images/world-dots.svg) no-repeat 30% 46%/1100px auto;opacity:.32;
  -webkit-mask-image:radial-gradient(ellipse 70% 75% at 62% 45%,#000 20%,transparent 72%);mask-image:radial-gradient(ellipse 70% 75% at 62% 45%,#000 20%,transparent 72%);pointer-events:none}
/* a live REC light */
.cta-box::after{content:"";position:absolute;right:44px;top:44px;z-index:1;width:12px;height:12px;border-radius:50%;background:var(--rec);box-shadow:0 0 0 0 rgba(230,57,70,.6),0 0 18px 3px rgba(230,57,70,.45);animation:rec-pulse 2s cubic-bezier(.2,.6,.3,1) infinite}
@keyframes rec-pulse{0%{box-shadow:0 0 0 0 rgba(230,57,70,.6),0 0 18px 3px rgba(230,57,70,.45)}70%{box-shadow:0 0 0 16px rgba(230,57,70,0),0 0 18px 3px rgba(230,57,70,.45)}100%{box-shadow:0 0 0 0 rgba(230,57,70,0),0 0 18px 3px rgba(230,57,70,.45)}}
.cta-box h2{max-width:20ch}
.cta-box p{color:rgba(255,255,255,.75);margin-top:16px;max-width:104ch}
.cta-box .hero-cta{margin-top:32px}
.cta-box .btn-primary{background:#fff;color:var(--ink)}
.cta-box .btn-primary:hover{background:#E9EDF3}
.cta-box .btn-secondary{border-color:rgba(255,255,255,.35);color:#fff}
.cta-box .btn-secondary:hover{border-color:#fff}

/* ---- 18. Footer ---- */
footer{background:#fff;border-top:1px solid var(--line);padding:64px 0 32px;font-size:14.5px}
.foot-top{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line)}
.foot-top p{color:var(--slate);margin-top:12px;max-width: fit-content;}
.social{display:flex;gap:10px;margin-top:18px}
.social a{width:38px;height:38px;border:1px solid var(--line);border-radius:50%;display:grid;place-items:center;transition:border-color .2s}
.social a:hover{border-color:var(--ink)}
.social svg{width:17px;height:17px;fill:var(--ink)}
.status{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--line);border-radius:999px;font-size:13.5px;align-self:flex-start}
.status i{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;padding:40px 0}
.foot-col h4{font-family:var(--body);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:12px}
.foot-col ul{list-style:none;display:grid;gap:5px;line-height:1.45}
.foot-col a{color:var(--slate);transition:color .2s}
.foot-col a:hover{color:var(--ink)}
/* linked headings read as headings, like the plain ones */
.foot-col h4 a{color:var(--ink)}
.foot-col+.foot-col.stack{margin-top:0}
.foot-col .sub{margin-top:24px}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:24px;border-top:1px solid var(--line);color:var(--slate);font-size:13.5px}
.foot-bottom ul{list-style:none;display:flex;gap:18px;flex-wrap:wrap}

/* =========================================================================
   19. Integration page components
   Shared by every page under /integrations/. Extracted from the Cloudflare R2
   page, which was the first one built.
   ========================================================================= */

/* Hero */
.hero-s{padding:clamp(48px,6vw,80px) 0 clamp(40px,5vw,56px)}
.hero-s h1{max-width:18ch;font-size:clamp(34px,4.8vw,58px)}
.hero-s .lede{margin-top:18px}
.crumb{font-size:14px;color:var(--slate);margin-bottom:18px}
.crumb a:hover{color:var(--ink)}
.crumb span{margin:0 8px;opacity:.5}

/* Flow strip */
.flow3{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:14px;align-items:center;margin-top:clamp(28px,4vw,44px);background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 24px}
.node{display:flex;gap:14px;align-items:center}
.node .ic{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--ink-soft)}
.node .ic svg{width:22px;height:22px;stroke:var(--ink);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.node.you .ic{background:#fff;border:1.5px solid var(--ink)}
.node.rec .ic{background:var(--rec-soft)}
.node.rec .ic svg{stroke:var(--rec)}
.node b{display:block;font-size:15px}
.node small{display:block;color:var(--slate);font-size:13px}
.node small code{font-family:var(--mono);font-size:12px}
.pipe-link{width:70px;height:20px;position:relative}
.pipe-link svg{width:100%;height:100%;overflow:visible}
.pipe-link .tube{stroke:var(--line);stroke-width:8;fill:none;stroke-linecap:round}
.pipe-link .inner{stroke:#fff;stroke-width:4;fill:none;stroke-linecap:round}
.pipe-link .flow{stroke:var(--ok);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:8 12;animation:flow 1.4s linear infinite}

/* Why cards */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.why div{padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.why h3{font-size:17px;margin-bottom:5px}
.why p{font-size:14.5px;color:var(--slate);max-width:none}
.why p a{border-bottom:1px solid var(--line)}
.why p a:hover{border-color:var(--rec)}

/* Steps */
.steps-sec{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.step{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:20px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step .n{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--mono);font-size:13px;display:grid;place-items:center;margin-top:2px}
.step h3{font-size:17px;margin-bottom:4px}
.step p{font-size:15px;color:var(--slate);max-width:none}
.step p a{border-bottom:1px solid var(--line)}
.step p a:hover{border-color:var(--rec)}
.step code,.form code{font-family:var(--mono);font-size:13px;background:var(--ink-soft);padding:1px 5px;border-radius:4px;color:var(--ink)}
.step .where{font-size:12.5px;color:var(--slate);font-family:var(--mono);margin-bottom:6px}

/* Dashboard form mock */
.form{position:sticky;top:96px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px}
.form h4{font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);margin-bottom:14px}
.form h4 span{float:right;font-family:var(--mono);text-transform:none;letter-spacing:0;font-weight:400}
.frow{margin-bottom:12px}
.frow label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.frow .in{background:#fff;border:1.5px solid var(--line);border-radius:var(--r-sm);padding:9px 12px;font-family:var(--mono);font-size:13px;color:var(--ink);display:flex;justify-content:space-between;gap:10px}
.frow .in em{font-style:normal;color:var(--slate);font-family:var(--body);font-size:12px}
.frow .in.sel::after{content:"▾";color:var(--slate)}
.fbtn{margin-top:16px;background:var(--ink);color:#fff;text-align:center;padding:11px;border-radius:999px;font-weight:600;font-size:14px}
.form .ok{margin-top:14px;display:flex;gap:8px;align-items:center;font-size:13px;color:var(--ok);font-weight:600}
.form .ok i{width:8px;height:8px;border-radius:50%;background:var(--ok)}

/* File cards */
.files{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:8px}
.file-card{border:1px solid var(--line);border-radius:var(--r-md);background:#fff;padding:18px}
.file-card b{font-family:var(--mono);font-size:13.5px;display:block;margin-bottom:6px}
.file-card span{font-size:13.5px;color:var(--slate)}
.file-card em{display:inline-block;font-style:normal;font-size:11px;font-weight:600;color:var(--slate);border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-top:8px}

/* Related links */
.also{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.also a{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;font-size:15px;font-weight:500;display:flex;justify-content:space-between;align-items:center;transition:border-color .2s}
.also a:hover{border-color:var(--ink)}
.also a::after{content:"→";color:var(--slate)}

/* FAQ */
.faq{max-width:820px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:18px 0;display:flex;justify-content:space-between;gap:20px;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;color:var(--slate);transition:transform .2s var(--ease);flex-shrink:0;width:24px;text-align:center}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 44px 20px 0;color:var(--slate);max-width:none;font-size:16px}
.faq details p a{border-bottom:1px solid var(--line)}
.faq details p a:hover{border-color: var(--rec)}
.faq details p code{font-family:var(--mono);font-size:14px;background:var(--ink-soft);padding:1px 5px;border-radius:4px;color:var(--ink)}

/* FAQ sections: heading on the left, kept in view, questions on the right.
   Applies where the accordion sits straight in the section's .wrap after its
   heading; anything else in that .wrap keeps the full width. */
@media (min-width:1001px){
  .wrap:has(>.section-head+.faq){display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);column-gap:clamp(32px,5vw,72px);align-items:start}
  .wrap:has(>.section-head+.faq)>*{grid-column:1/-1}
  .wrap:has(>.section-head+.faq)>.section-head:has(+.faq){grid-column:1;grid-row:span 2;position:sticky;top:110px;margin-bottom:0}
  .wrap:has(>.section-head+.faq)>.faq{grid-column:2;max-width:none}
  .wrap:has(>.section-head+.faq)>.faq details:first-child{border-top:0}
  .wrap:has(>.section-head+.faq)>.faq details:first-child summary{padding-top:4px}
  .wrap:has(>.section-head+.faq)>.faq+*{grid-column:2}
}
.faq summary{transition:color .2s}
.faq summary:hover{color:#2B3A5E}

/* Inline note under a section */
.note{margin-top:20px;font-size:14.5px;color:var(--slate);max-width:none}
.note code{font-family:var(--mono);font-size:13px;background:var(--ink-soft);padding:1px 5px;border-radius:4px}

/* Feature cards, the non-storage counterpart of .files */
.fcards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.fcard{padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.fcard h3{font-size:17px;margin-bottom:6px;display:flex;align-items:center;gap:9px}
.fcard h3 svg{width:18px;height:18px;stroke:var(--rec);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.fcard p{font-size:14.5px;color:var(--slate);max-width:none}
.fcard p a{border-bottom:1px solid var(--line)}
.fcard p a:hover{border-color:var(--rec)}
.fcard code{font-family:var(--mono);font-size:13px;background:var(--ink-soft);padding:1px 5px;border-radius:4px}

/* Integrations index */
.cat{padding:clamp(48px,6vw,72px) 0}
.cat+.cat{padding-top:0}
.cat h2{font-size:clamp(24px,2.6vw,32px);margin-bottom:6px}
.cat .cat-note{color:var(--slate);font-size:15.5px;margin-bottom:26px;max-width:120ch}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{padding:22px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;transition:border-color .2s,transform .2s var(--ease);display:block}
.card:hover{border-color:var(--ink);transform:translateY(-2px)}
.card .top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.card .top .mark{width:38px;height:38px;border-radius:10px;background:var(--ink-soft);display:grid;place-items:center;flex-shrink:0;font-family:var(--display);font-weight:800;font-size:15px;color:var(--slate)}
.card .top .mark img{width:22px;height:22px;object-fit:contain}
.card .top .mark svg{width:20px;height:20px;fill:var(--ink)}
.card h3{font-size:17px}
.card p{font-size:14.5px;color:var(--slate);max-width:none}
.card .go{display:block;margin-top:12px;font-size:14px;font-weight:600;color:var(--slate)}
.card:hover .go{color:var(--ink)}

/* =========================================================================
   20. Compare page components
   Shared by every page under /vs/. They also use the section 19 components:
   hero, why, steps, fcards, faq, also and the index cards.
   ========================================================================= */

/* Versus table. Rendered server-side from a PHP array on each page. */
.vs-table{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.vs-table table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.vs-table th,.vs-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.vs-table thead th{font-weight:600;font-size:13.5px;color:var(--slate);background:var(--paper)}
.vs-table tbody tr:last-child td{border-bottom:0}
.vs-table td:first-child{font-weight:600}
.vs-table .pipe{background:var(--ink-soft);color:var(--ink);font-weight:600}
.vs-table thead .pipe{background:var(--ink);color:#fff}
.vs-table .fig{font-family:var(--mono);font-size:14px;white-space:nowrap}
.vs-table .save{color:var(--ok);font-weight:600}

/* Build your own vs Pipe. Same rules as the inline copy in use-cases/kyc.php. */
.split{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.half{padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}
.half.pipe{border-color:var(--ink)}
.half h3{font-size:18px;margin-bottom:10px;display:flex;align-items:center;gap:10px}
.half h3 span{font-size:11.5px;font-weight:600;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--slate)}
.half.pipe h3 span{background:var(--ink);color:#fff;border-color:var(--ink)}
.half ul{list-style:none;display:grid;gap:7px}
.half li{font-size:14.5px;color:var(--slate);padding-left:16px;position:relative}
.half li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--slate)}
.half.pipe li::before{background:var(--ok)}
.half p{font-size:14px;color:var(--slate);margin-top:12px;max-width:none}

/* A .half as the right-hand panel of .steps, sticky like .form */
.steps .half{position:sticky;top:96px}
.step p+p{margin-top:10px}

/* ---- 21. Responsive ---- */
@media (max-width:1000px){
  .hero-grid,.client-grid,.infra-grid,.dev-grid,.sec-grid{grid-template-columns:1fr}
  /* infrastructure map becomes a full-width band above the text, cards below it */
  .infra{padding-top:24px}
  .infra-spacer,.infra-map::after,.im-leads{display:none}
  .infra-map{position:relative;inset:auto;height:clamp(320px,84vw,520px)}
  .infra-map .infra-plane{--k:min(4.4px,calc((100vw - 2*var(--gutter))/164));left:calc(50% - var(--k)*145);top:calc(40% - var(--k)*56.7)}
  .infra-regions{position:relative;left:auto;top:auto;width:auto;height:auto;display:flex;flex-wrap:wrap;gap:12px;justify-content:center;
    max-width:var(--max);margin:-44px auto 48px;padding:0 var(--gutter);font-size:13.5px}
  .im-card{position:relative;left:auto;right:auto;bottom:auto;flex:1 1 150px;max-width:340px;white-space:normal}
  .im-card li{align-items:baseline}
  .im-card::after{display:none}
  .recorder{transform:none;margin-top:12px}
  .stages{grid-template-columns:repeat(2,1fr);gap:32px 20px}
  .pipe-svg{display:none}
  .stage .node{box-shadow:none}
  .dash-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .panel{position:static}
  .menu,.nav-cta .btn-secondary{display:none}
  .burger{display:block}
  header.nav.open .menu{display:flex;flex-direction:column;align-items:stretch;position:absolute;left:0;right:0;top:68px;background:#fff;border-bottom:1px solid var(--line);padding:12px var(--gutter) 20px}
  header.nav.open .menu .dropdown{position:static;box-shadow:none;border:0;padding:0 0 4px 14px;min-width:0}
  /* integration pages */
  .flow3{grid-template-columns:1fr;gap:10px}
  .pipe-link{width:20px;height:40px;margin-left:12px}
  .pipe-link svg{transform:rotate(90deg);transform-origin:center}
  .steps{grid-template-columns:1fr}
  .form{position:static}
  .files{grid-template-columns:1fr 1fr}
  .fcards,.cards{grid-template-columns:repeat(2,1fr)}
  /* compare pages */
  .split{grid-template-columns:1fr}
  .steps .half{position:static}
}
@media (max-width:640px){
  body{font-size:16px}
  .num-grid,.dash-grid,.sec-list,.stages{grid-template-columns:1fr}
  .chip{display:none}
  /* the hero flow stays, as a list under the mock */
  .hero-flow{display:grid;gap:8px;margin-top:20px}
  .hero-flow .hc{display:flex;position:static;border-radius:14px}
  .hero-flow .hc.is-live{transform:none}
  .foot-grid{grid-template-columns:1fr}
  .hero-cta .btn{width:100%;justify-content:center}
  /* integration pages */
  .why,.also,.files,.fcards,.cards{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .im-pkt{display:none}
  html{scroll-behavior:auto}
}

/* =========================================================================
   22. Document pages
   Long, sectioned pages: security and privacy, terms of service, GDPR,
   cookie policy. A sticky "On this page" index (.idx) beside the content
   blocks (.blk), highlighted by assets/js/toc.js.
   ========================================================================= */

/* Two-column body with sticky index */
.body{display:grid;grid-template-columns:220px 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.idx{position:sticky;top:96px;font-size:14.5px}
.idx h4{font-family:var(--body);font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);margin-bottom:10px}
.idx ul{list-style:none;display:grid;gap:2px}
.idx a{display:block;padding:7px 10px;border-radius:var(--r-sm);color:var(--slate);border-left:2px solid transparent}
.idx a:hover{color:var(--ink);background:var(--ink-soft)}
.idx a.on{color:var(--ink);border-left-color:var(--rec);font-weight:600}
.idx .req{margin-top:18px;padding:14px;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.idx .req p{font-size:13px;color:var(--slate);margin-bottom:10px}
/* the button is an <a> inside .idx too: keep it a button, not an index link */
.idx .req .btn{width:100%;justify-content:center;padding:9px 14px;font-size:14px;border:1.5px solid transparent;border-radius:10px; color:#fff;}
.idx .req .btn:hover{color: #14213C;}
.idx .req .btn-trial,.idx .req .btn-trial:hover{color:#14213C}
.idx .req .btn-trial:hover{background:#1de580}
.blk{padding:8px 0 40px;border-bottom:1px solid var(--line);margin-bottom:40px;scroll-margin-top:90px}
.blk:last-child{border-bottom:0}
.blk h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:8px}
.blk .intro{color:var(--slate);margin-bottom:22px;max-width:none}

/* Legal prose */
.prose{max-width:760px}
.prose h2{font-size:clamp(24px,2.6vw,30px);margin-bottom:14px}
.prose h3{font-size:18px;margin:28px 0 8px}
.prose h2[id],.prose h3[id]{scroll-margin-top:90px}
.prose p,.prose li{font-size:16.5px;max-width:none}
.prose p+p,.prose p+ul,.prose p+ol,.prose ul+p,.prose ol+p{margin-top:12px}
.prose ul,.prose ol{padding-left:22px;display:grid;gap:6px;margin-top:10px}
.prose a{border-bottom:1px solid var(--line)}
.prose a:hover{border-color:var(--rec)}
.prose strong,.prose b{font-weight:600}
.prose code{font-family:var(--mono);font-size:14px;background:var(--ink-soft);padding:1px 5px;border-radius:4px}
.updated{font-family:var(--mono);font-size:12.5px;color:var(--slate);margin-top:18px}
.notice{margin-top:24px;padding:16px 20px;border:1px solid var(--rec);border-radius:var(--r-md);background:var(--rec-soft);font-size:15.5px;max-width:none}
.notice a{font-weight:600;border-bottom:1.5px solid currentColor}
.notice a:hover{border-color:var(--rec)}
.pill{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;padding:1px 8px;border-radius:999px;margin-right:8px;vertical-align:1px;background:var(--ok-soft);color:var(--ok)}
.pill.wip{background:var(--ink-soft);color:var(--slate)}
.doc-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

@media (max-width:1000px){
  .body{grid-template-columns:1fr}
  .idx{position:static}
  .idx ul{display:flex;flex-wrap:wrap;gap:6px}
  .idx a{border:1px solid var(--line);border-left-width:1px;border-radius:999px;padding:6px 12px}
  .idx a.on{border-color:var(--ink);border-left-color:var(--ink)}
  .idx .req{display:none}
}

a.btn.btn-trial > svg {
  flex-shrink: 0;
  border-radius: 50%;
  overflow: visible;
  box-shadow: 0 0 0 0 rgba(230, 57, 70, .6), 0 0 18px 3px rgba(230, 57, 70, .45);
  animation: btn-trial-pulse 2s cubic-bezier(.2, .6, .3, 1) infinite;
}
a.btn.btn-trial > svg circle { fill: var(--rec, #e63946); }
a.btn.btn-trial { overflow: visible; }

@keyframes btn-trial-pulse {
  0%   { box-shadow: 0 0 0 0    rgba(230, 57, 70, .6), 0 0 18px 3px rgba(230, 57, 70, .45); }
  70%  { box-shadow: 0 0 0 10px rgba(230, 57, 70, 0),  0 0 18px 3px rgba(230, 57, 70, .45); }
  100% { box-shadow: 0 0 0 0    rgba(230, 57, 70, 0),  0 0 18px 3px rgba(230, 57, 70, .45); }
}

@media (prefers-reduced-motion: reduce) {
  a.btn.btn-trial > svg { animation: none; }
}
.external-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}
.external-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
}
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
}

.link-arrow {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  transition: transform 0.15s ease;
}

.link:hover .link-arrow {
  transform: translateX(2px);
}