/* Styles for the OATH sections injected by inject.js. Values mirror the template's own
   computed styles (FK Grotesk, 32px/300 headings, #181818 cards, 16px radius, 144px gutters). */

.oath-section{position:relative;z-index:1;box-sizing:border-box;max-width:1680px;margin:0 auto;padding:0 144px 200px;font-family:"FK Grotesk",sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
.oath-section *{box-sizing:border-box}
.oath-section h2{margin:0;font-size:32px;font-weight:300;line-height:38.4px;text-align:center}
.oath-section h3{margin:0 0 12px;font-size:20px;font-weight:400;line-height:32px;color:#fff}
.oath-section p{margin:0}
.oath-sub{max-width:560px;margin:16px auto 0 !important;font-size:16px;line-height:25.6px;color:rgba(255,255,255,.5);text-align:center}
.oath-lead{max-width:720px;margin:0 auto !important;font-size:20px;line-height:32px;color:rgb(156,157,159);text-align:center}
.oath-eyebrow{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.4)}
.oath-card{background:rgb(24,24,24);border-radius:16px;padding:48px}
.oath-card p{font-size:16px;line-height:25.6px;color:rgba(255,255,255,.5)}
.oath-card p + p{margin-top:12px}
.oath-num{display:block;font-size:72px;font-weight:300;line-height:1.1;font-variant-numeric:tabular-nums}
.oath-cap{display:block;margin-top:8px;font-size:16px;line-height:25.6px;color:rgba(255,255,255,.5)}
.oath-accent{color:#5b8cff}
.oath-ok{color:#2fd38a}

.oath-cols2,.oath-cols3,.oath-grid3{display:grid;gap:24px;margin-top:64px}
.oath-cols2{grid-template-columns:1fr 1fr}
.oath-cols3,.oath-grid3{grid-template-columns:repeat(3,1fr)}
.oath-grid4{display:grid;gap:24px;margin-top:64px;grid-template-columns:repeat(4,1fr)}
.oath-stack{padding-top:120px}

.oath-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.oath-list-single{grid-template-columns:1fr}
.oath-list li{padding:14px 0;border-top:1px solid rgba(255,255,255,.1);font-size:16px;line-height:25.6px;color:rgb(156,157,159)}

/* flow / funnel */
.oath-flow{padding-top:40px;text-align:center}
.oath-workflow{margin-top:32px !important;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:#fff}
.oath-flow .oath-eyebrow{margin-top:80px}
.oath-funnel{display:flex;align-items:center;justify-content:center;gap:40px;margin-top:32px;padding:64px 48px;border-radius:16px;background:rgb(24,24,24)}
.oath-funnel-step{min-width:180px}
.oath-arrow{font-size:32px;color:#5b8cff}
.oath-chain{display:inline-block;padding:14px 24px;border:1px solid rgba(91,140,255,.6);border-radius:999px;font-size:18px;white-space:nowrap}

/* builder */
.oath-pipeline{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0;margin:64px 0 0;padding:0}
.oath-pipeline li{display:flex;align-items:center;white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;color:#fff}
.oath-pipeline li::after{content:"";width:28px;height:1px;margin:0 12px;background:rgba(255,255,255,.3)}
.oath-pipeline li:last-child::after{display:none}
.oath-builder-card{margin-top:48px}
.oath-builder-card .oath-list{grid-template-columns:repeat(4,1fr)}

/* before / with */
.oath-card-accent{box-shadow:inset 0 0 0 1px rgba(91,140,255,.5)}
.oath-trace{list-style:none;margin:24px 0 0;padding:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px;line-height:1}
.oath-trace li{position:relative;padding:12px 16px;margin-top:22px;border-radius:8px;background:rgba(255,255,255,.05);color:rgb(190,192,196)}
.oath-trace li:first-child{margin-top:0}
.oath-trace li + li::before{content:"";position:absolute;left:24px;top:-22px;width:1px;height:22px;background:rgba(255,255,255,.25)}
.oath-trace-noisy .oath-tx{background:rgba(255,92,106,.12);color:#ff8f99}
.oath-trace-clean .oath-tx{background:rgba(91,140,255,.16);color:#a9c3ff}

/* receipts */
.oath-cols2-receipt{align-items:start}
.oath-receipt{padding:32px;border-radius:16px;background:rgb(34,37,41);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:14px}
.oath-receipt-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px}
.oath-receipt dl{display:grid;grid-template-columns:auto 1fr;gap:0;margin:8px 0 0}
.oath-receipt dt,.oath-receipt dd{margin:0;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.oath-receipt dt{color:rgba(255,255,255,.5)}
.oath-receipt dd{text-align:right}
.oath-receipt-fields{padding:32px 0 0 24px}

/* security + metrics grids */
.oath-cell{padding:40px 32px;border-top:1px solid rgba(255,255,255,.12)}
.oath-cell p{font-size:16px;line-height:25.6px;color:rgba(255,255,255,.5)}
.oath-metrics{padding-top:120px}
.oath-builder{padding-top:40px}
.oath-metrics .oath-cell{text-align:center}
.oath-metrics .oath-num{font-size:56px}

/* subtitle added under the template's final call to action */
.oath-cta-sub{max-width:560px;margin:24px auto 0;font-family:"FK Grotesk",sans-serif;font-size:16px;line-height:25.6px;color:rgba(255,255,255,.5);text-align:center}

@media (max-width:1000px){
  .oath-section{padding:0 24px 120px}
  .oath-cols2,.oath-cols3,.oath-grid3,.oath-grid4,.oath-builder-card .oath-list{grid-template-columns:1fr}
  .oath-funnel{flex-direction:column;gap:20px;padding:40px 24px}
  .oath-arrow{transform:rotate(90deg)}
  .oath-num{font-size:52px}
  .oath-card{padding:28px}
  .oath-list{grid-template-columns:1fr}
  .oath-receipt-fields{padding-left:0}
}

/* ---- light band: a full-width off-white section that breaks up the dark run ---- */
.oath-light{padding-top:140px;padding-bottom:140px;margin-bottom:200px;background:#f1f1ee;color:#131313;box-shadow:0 0 0 100vmax #f1f1ee;clip-path:inset(0 -100vmax)}
.oath-stack.oath-light{margin-top:120px;margin-bottom:0}
.oath-light h3{color:#131313}
.oath-light .oath-sub{color:rgba(19,19,19,.6)}
.oath-light .oath-list li{border-top-color:rgba(19,19,19,.14);color:rgba(19,19,19,.7)}
.oath-light .oath-pipeline li{color:#131313}
.oath-light .oath-pipeline li::after{background:rgba(19,19,19,.3)}
.oath-builder.oath-light{margin-top:80px}
.oath-light .oath-card{background:#fff;box-shadow:0 1px 0 rgba(19,19,19,.06),0 24px 48px -32px rgba(19,19,19,.25)}
.oath-light .oath-card-accent{box-shadow:inset 0 0 0 1.5px #2f6be0,0 24px 48px -32px rgba(47,107,224,.45)}
.oath-light .oath-cell{border-top-color:rgba(19,19,19,.16)}
.oath-light .oath-cell p,.oath-light .oath-card p{color:rgba(19,19,19,.6)}
.oath-light .oath-trace li{background:rgba(19,19,19,.05);color:#3a3b3d}
.oath-light .oath-trace li + li::before{background:rgba(19,19,19,.25)}
.oath-light .oath-trace-noisy .oath-tx{background:rgba(224,60,75,.12);color:#b3202f}
.oath-light .oath-trace-clean .oath-tx{background:#2f6be0;color:#fff}

/* ---- blue textured panel, slowly drifting ---- */
.oath-grain{position:relative;overflow:hidden;border-radius:16px;background:radial-gradient(120% 90% at 15% 20%,#d3dfff 0,transparent 55%),radial-gradient(90% 80% at 85% 75%,#8aa3f4 0,transparent 60%),radial-gradient(70% 70% at 60% 20%,#bccdff 0,transparent 60%),#a3b8fb;background-size:220% 220%;animation:oath-drift 22s ease-in-out infinite alternate}
.oath-grain::before{content:"";position:absolute;inset:0;background:url(/noise.png);opacity:.4;mix-blend-mode:overlay;pointer-events:none}
.oath-grain > *{position:relative}
@keyframes oath-drift{from{background-position:0 0}to{background-position:100% 100%}}
.oath-receipt-stage{padding:48px}
.oath-receipt-stage .oath-receipt{background:#131313;box-shadow:0 32px 64px -32px rgba(13,27,61,.7)}
.oath-metrics-panel{margin-top:64px;padding:24px}
.oath-metrics-panel .oath-grid3{margin-top:0;gap:12px}
.oath-metrics-panel .oath-cell{border-top:0;border-radius:12px;background:rgba(19,19,19,.92)}

/* ---- movement. Everything here only applies once inject.js has set .oath-anim,
        which it does not do for visitors who ask for reduced motion. ---- */
.oath-anim .oath-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
.oath-anim .oath-reveal.is-in{opacity:1;transform:none}
/* a highlight travels along the Builder pipeline, one step a second */
.oath-anim .oath-pipeline li{animation:oath-step 7s linear infinite;animation-delay:calc(var(--i,0)*1s)}
.oath-anim .oath-pipeline li::after{animation:oath-link 7s linear infinite;animation-delay:calc(var(--i,0)*1s + .5s)}
@keyframes oath-step{0%,14%{color:#5b8cff;text-shadow:0 0 18px rgba(91,140,255,.7)}22%,100%{color:#fff;text-shadow:none}}
@keyframes oath-link{0%,14%{background:#5b8cff}22%,100%{background:rgba(255,255,255,.3)}}
.oath-anim.oath-light .oath-pipeline li{animation-name:oath-step-light}
.oath-anim.oath-light .oath-pipeline li::after{animation-name:oath-link-light}
@keyframes oath-step-light{0%,14%{color:#2f6be0;text-shadow:0 0 18px rgba(47,107,224,.35)}22%,100%{color:#131313;text-shadow:none}}
@keyframes oath-link-light{0%,14%{background:#2f6be0}22%,100%{background:rgba(19,19,19,.3)}}
/* before / with: the long list arrives step by step, then the short one */
.oath-anim .oath-trace li{opacity:0;transform:translateX(-12px);transition:opacity .35s ease,transform .35s ease;transition-delay:calc(var(--i,0)*90ms)}
.oath-anim .oath-trace-clean li{transition-delay:calc(1s + var(--i,0)*160ms)}
.oath-anim.is-live .oath-trace li{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.oath-grain{animation:none}}

@media (max-width:1000px){
  .oath-light{padding-top:80px;padding-bottom:80px;margin-bottom:120px}
  .oath-stack.oath-light{margin-top:80px}
  .oath-receipt-stage{padding:20px}
  .oath-metrics-panel{padding:12px}
}

/* ---- the end of the page: no empty dark stretch, and colour before the footer ---- */
/* the template's investor section is empty now; without this it leaves a blank dark gap */
[class*="HomeV2Page_backed-module"][class*="__root"]{display:none}
/* "Measure every workflow" is a full-width blue band that meets the light band above it */
.oath-metrics.oath-grain{max-width:none;border-radius:0;padding:140px max(144px,calc((100% - 1392px)/2))}
.oath-metrics.oath-grain h2{color:#0d1b3d}
.oath-metrics-panel{padding:0}
.oath-metrics-panel .oath-cell{box-shadow:0 32px 64px -40px rgba(13,27,61,.8)}
/* the closing call to action sits in a blue glow that carries on from the band */
[class*="HomeV2Page_contact-module"][class*="__root"]{background:radial-gradient(70% 90% at 50% 0,rgba(91,140,255,.32) 0,rgba(91,140,255,.08) 45%,transparent 75%)}
@media (max-width:1000px){.oath-metrics.oath-grain{padding:80px 24px}}

/* ---- clean pass: big left-set headings with a numbered kicker, a vivid band, numbered rows ---- */

/* section heads */
.oath-kicker{display:flex;align-items:center;gap:10px;margin-bottom:20px;font-family:"FK Grotesk Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.oath-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:#5b8cff;box-shadow:0 0 0 0 rgba(91,140,255,.6);animation:oath-pulse 2.6s ease-out infinite}
.oath-light .oath-kicker{color:rgba(19,19,19,.55)}
.oath-light .oath-kicker::before{background:#2f6be0}
@keyframes oath-pulse{0%{box-shadow:0 0 0 0 rgba(91,140,255,.6)}70%,100%{box-shadow:0 0 0 12px rgba(91,140,255,0)}}
.oath-section h2{max-width:900px;font-size:60px;font-weight:400;line-height:1.02;letter-spacing:-.035em;text-align:left;text-wrap:balance}
.oath-sub{max-width:620px;margin:20px 0 0 !important;font-size:19px;line-height:1.5;text-align:left;color:rgba(255,255,255,.6)}
.oath-light .oath-sub{color:rgba(19,19,19,.65)}
.oath-section h3{letter-spacing:-.01em}

/* cards and cells respond to the pointer */
.oath-card,.oath-cell{transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s}
.oath-light .oath-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(19,19,19,.06),0 36px 60px -36px rgba(47,107,224,.5)}
.oath-graph .oath-card{background:linear-gradient(180deg,#1d1e22,#161618);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),inset 0 1px 0 rgba(255,255,255,.1)}
.oath-graph .oath-card:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(91,140,255,.5),0 36px 60px -36px rgba(63,123,240,.8)}
.oath-graph .oath-card h3{font-size:28px}
.oath-light .oath-grid3 .oath-cell{border-top:0;border-radius:16px;background:#fff;box-shadow:0 1px 0 rgba(19,19,19,.06),0 24px 48px -36px rgba(19,19,19,.3)}
.oath-light .oath-grid3 .oath-cell:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(19,19,19,.06),0 36px 60px -36px rgba(47,107,224,.5)}
.oath-cell-n{display:block;margin-bottom:28px;font-family:"FK Grotesk Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:#2f6be0}

/* the vivid band: electric blue with a cyan and a violet glow and a fine dot grid */
.oath-grain{background:radial-gradient(60% 80% at 10% 0,#63b3ff 0,transparent 60%),radial-gradient(55% 75% at 92% 100%,#7a3dff 0,transparent 62%),radial-gradient(40% 50% at 60% 40%,#3f7bf0 0,transparent 70%),#2338f5;background-size:200% 200%;animation:oath-drift 20s ease-in-out infinite alternate}
.oath-grain::before{background:radial-gradient(rgba(255,255,255,.3) 1px,transparent 1.6px) 0 0/14px 14px;opacity:1;mix-blend-mode:normal;-webkit-mask-image:linear-gradient(115deg,#000 0,transparent 45%,transparent 60%,#000 100%);mask-image:linear-gradient(115deg,#000 0,transparent 45%,transparent 60%,#000 100%)}
/* a few points of light that twinkle across the band */
.oath-grain::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(2px 2px at 12% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 28% 72%,#fff,transparent),radial-gradient(2px 2px at 47% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 63% 82%,#fff,transparent),radial-gradient(2px 2px at 78% 26%,#fff,transparent),radial-gradient(1.5px 1.5px at 91% 60%,#fff,transparent);animation:oath-twinkle 3.2s ease-in-out infinite alternate}
@keyframes oath-twinkle{from{opacity:.15}to{opacity:.95}}
.oath-metrics.oath-grain h2,.oath-metrics.oath-grain .oath-kicker{color:#fff}
.oath-metrics.oath-grain .oath-kicker::before{background:#fff}
.oath-metrics-panel .oath-cell{background:rgba(10,12,28,.72);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 32px 64px -40px rgba(5,8,40,.9);text-align:left}
.oath-metrics .oath-cell{text-align:left}
.oath-receipt-stage{padding:56px}

/* the stack as numbered rows, two columns */
.oath-rows{list-style:none;margin:72px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 64px}
.oath-rows li{border-top:1px solid rgba(19,19,19,.14)}
.oath-rows a{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;padding:26px 4px;color:inherit;text-decoration:none}
.oath-rows .oath-row-n{font-family:"FK Grotesk Mono",ui-monospace,Menlo,Consolas,monospace;font-size:13px;color:rgba(19,19,19,.45)}
.oath-rows h3{margin:0;font-size:34px;font-weight:400;line-height:1.1;letter-spacing:-.03em;transition:color .2s}
.oath-rows p{margin-top:6px !important;font-size:16px;color:rgba(19,19,19,.6)}
.oath-rows .oath-row-go{font-size:26px;transition:transform .25s cubic-bezier(.2,.7,.2,1),color .2s}
.oath-rows a:hover h3,.oath-rows a:hover .oath-row-go{color:#2f6be0}
.oath-rows a:hover .oath-row-go{transform:translateX(8px)}

/* the example numbers */
.oath-funnel{background:linear-gradient(180deg,#1d1e22,#161618);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.1),0 48px 96px -56px rgba(63,123,240,.8)}
.oath-funnel .oath-num{font-size:88px;letter-spacing:-.04em;background:linear-gradient(180deg,#fff 30%,#9db9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.oath-funnel .oath-num.oath-accent{background:linear-gradient(180deg,#8fb2ff,#3f7bf0);-webkit-background-clip:text;background-clip:text}
.oath-chain{background:rgba(91,140,255,.12);box-shadow:0 0 32px -6px rgba(91,140,255,.8)}

@media (max-width:1000px){
  .oath-section h2{font-size:38px}
  .oath-sub{font-size:17px}
  .oath-rows{grid-template-columns:1fr;margin-top:40px}
  .oath-rows h3{font-size:26px}
  .oath-funnel .oath-num{font-size:60px}
  .oath-receipt-stage{padding:20px}
}
@media (prefers-reduced-motion:reduce){.oath-kicker::before,.oath-grain::after{animation:none}}
