/* Coda marketing site: shared styles for index, privacy, terms and security pages.
   Loaded from <head> so it applies before the page renders. */
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Instrument Sans',Arial,sans-serif;color:#0E1E36;background:#ffffff;-webkit-font-smoothing:antialiased}
a{color:#34788E;text-decoration:none}
a:hover{color:#2C6678}
::selection{background:#34788E;color:#fff}
/* Page wrapper: clip sideways overflow without creating a scroll container,
   so the header's position:sticky works (overflow-x:hidden broke it). */
[data-page]{overflow-x:hidden}
@supports (overflow-x:clip){[data-page]{overflow-x:clip}}
@media (max-width:1060px) and (min-width:1001px){
  [data-m~="links"]{gap:24px!important}
}
@media (max-width:1000px){
  [data-m~="links"]{display:none!important}
  [data-m~="signin"]{display:none!important}
  [data-m~="burger"]{display:inline-flex!important}
}
@media (max-width:860px){
  [data-m~="links"]{display:none!important}
  [data-m~="signin"]{display:none!important}
  [data-m~="burger"]{display:inline-flex!important}
  [data-m~="nav"]{padding:13px 18px!important}
  [data-m~="pad"]{padding-left:20px!important;padding-right:20px!important;padding-top:64px!important;padding-bottom:64px!important}
  [data-m~="cols"]{grid-template-columns:1fr!important;gap:30px!important}
  [data-m~="fcols"]{grid-template-columns:1fr 1fr!important;gap:30px 24px!important}
  [data-m~="hline"]{display:none!important}
  [data-m~="h1"]{font-size:40px!important;letter-spacing:-0.6px!important}
  [data-m~="h2"]{font-size:32px!important;letter-spacing:-0.6px!important}
  [data-m~="cta-h2"]{font-size:34px!important}
  [data-m~="herobtns"] a{flex:1 1 auto;justify-content:center!important}
  [data-m~="hscroll"]{overflow-x:auto!important;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  [data-m~="hscroll-inner"]{min-width:720px!important}
  [data-m~="hhint"]{display:flex!important}
  [data-m~="detailcols"]{grid-template-columns:1fr!important}
  [data-m~="detailleft"]{border-right:none!important;border-bottom:1px solid var(--color-border)!important}
  [data-m~="detailhead"]{flex-wrap:wrap!important;gap:8px!important}
  [data-m~="demohead"]{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
  [data-m~="demohead-meta"]{flex-wrap:wrap!important;white-space:normal!important}
}
[data-m~="hscroll"]::-webkit-scrollbar{height:8px}
[data-m~="hscroll"]::-webkit-scrollbar-thumb{background:#CBD5E3;border-radius:8px}
[data-m~="hscroll"]::-webkit-scrollbar-track{background:#F0F3F8}
@keyframes coda-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
/* Cap the design-system Dialog card so it never exceeds the viewport (it is fixed 420px, overflow:hidden) */
div[style*="position: fixed"][style*="inset: 0"] > div{
  max-width:calc(100vw - 32px)!important;
  max-height:calc(100vh - 32px)!important;
  display:flex!important;
  flex-direction:column!important;
}
div[style*="position: fixed"][style*="inset: 0"] > div > div:last-child{min-height:0;overflow-y:auto}
@media (max-width:520px){
  [data-m~="fcols"]{grid-template-columns:1fr!important}
  [data-m~="h1"]{font-size:34px!important}
  [data-m~="pad"]{padding-top:52px!important;padding-bottom:52px!important}
}
/* ============ MOTION ============
   Motion only: nothing here changes how the page looks at rest.
   Entrances use an ease-out; interactive states use the DS --ease-standard. */
:root{--motion-out:cubic-bezier(.23,1,.32,1)}
/* Fallback for native hash jumps; JS scrolling measures the header instead */
section[id]{scroll-margin-top:74px}
section[tabindex="-1"]:focus{outline:none}

/* Interaction feedback: existing hover colour/border swaps now ease instead of snapping */
[class^="scp"],[class*=" scp"]{transition:color 160ms var(--ease-standard),background-color 160ms var(--ease-standard),border-color 160ms var(--ease-standard)}
[data-anim~="press"]{transition:color 160ms var(--ease-standard),background-color 160ms var(--ease-standard),border-color 160ms var(--ease-standard),transform 160ms var(--motion-out)}
[data-anim~="press"]:active:not(:disabled){transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  [data-anim~="press"]:not([data-m~="burger"]) > svg:last-child{transition:transform 220ms var(--motion-out)}
  [data-anim~="press"]:not([data-m~="burger"]):hover > svg:last-child{transform:translateX(3px)}
}

/* Entrances (only when JS + IntersectionObserver are available: html.coda-motion) */
.coda-motion [data-anim~="hero"],
.coda-motion [data-anim~="hero-frame"],
.coda-motion [data-anim~="reveal"],
.coda-motion [data-anim~="stagger"] > *{opacity:0;transform:translateY(16px)}
.coda-motion [data-anim~="hero"]{transform:translateY(10px)}
.coda-motion [data-anim~="hero-frame"]{transform:translateY(22px)}
.coda-motion [data-anim~="hero"][data-in],
.coda-motion [data-anim~="hero-frame"][data-in],
.coda-motion [data-anim~="reveal"][data-in],
.coda-motion [data-anim~="stagger"][data-in] > *{opacity:1;transform:none;transition:opacity 700ms var(--motion-out),transform 700ms var(--motion-out)}
.coda-motion [data-anim~="hero"][data-in]{transition-delay:80ms}
.coda-motion [data-anim~="hero"][data-anim-i="1"][data-in]{transition-delay:160ms}
.coda-motion [data-anim~="hero"][data-anim-i="2"][data-in]{transition-delay:240ms}
.coda-motion [data-anim~="hero"][data-anim-i="3"][data-in]{transition-delay:320ms}
.coda-motion [data-anim~="hero"][data-anim-i="4"][data-in]{transition-delay:400ms}
.coda-motion [data-anim~="hero-frame"][data-in]{transition-duration:900ms;transition-delay:260ms}
.coda-motion [data-anim~="stagger"][data-in] > *:nth-child(2){transition-delay:80ms}
.coda-motion [data-anim~="stagger"][data-in] > *:nth-child(3){transition-delay:160ms}
.coda-motion [data-anim~="stagger"][data-in] > *:nth-child(4){transition-delay:240ms}
.coda-motion [data-anim~="stagger"][data-in] > *:nth-child(5){transition-delay:320ms}
.coda-motion [data-anim~="stagger"][data-in] > *:nth-child(6){transition-delay:400ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(2){transition-delay:35ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(3){transition-delay:70ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(4){transition-delay:105ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(5){transition-delay:140ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(6){transition-delay:175ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(7){transition-delay:210ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(8){transition-delay:245ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(9){transition-delay:280ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(10){transition-delay:315ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(11){transition-delay:350ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(12){transition-delay:385ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(13){transition-delay:420ms}
.coda-motion [data-anim~="faq"][data-in] > *:nth-child(14){transition-delay:455ms}
.coda-motion [data-anim~="steps"][data-in] > *:nth-child(2){transition-delay:0ms}
.coda-motion [data-anim~="steps"][data-in] > *:nth-child(3){transition-delay:140ms}
.coda-motion [data-anim~="steps"][data-in] > *:nth-child(4){transition-delay:280ms}
.coda-motion [data-anim~="steps"][data-in] > *:nth-child(5){transition-delay:420ms}

/* Hero details: mock progress bar fills, counter counts up */
/* The "under control" highlight sits at z-index:-1; while the h1 animates it would briefly paint
   differently from rest, so it is held hidden until the h1 settles (rest state is untouched). */
.coda-motion [data-anim~="hero"]:not([data-done]) [data-anim~="underline"]{visibility:hidden}
.coda-motion [data-anim~="bar"]{transform:scaleX(0);transform-origin:left center}
.coda-motion [data-anim~="hero-frame"][data-in] [data-anim~="bar"]{transform:scaleX(1);transition:transform 1100ms var(--motion-out) 560ms}

/* Four steps: connector draws across as the steps arrive */
.coda-motion [data-anim~="steps"] > [data-anim~="line"]{opacity:1;transform:scaleX(0);transform-origin:left center}
.coda-motion [data-anim~="steps"][data-in] > [data-anim~="line"]{transform:scaleX(1);transition:transform 1000ms var(--motion-out) 120ms}

/* Surfaces: mobile menu, contact dialog, inline confirmations */
[data-anim~="menu"]{transition:opacity 200ms var(--motion-out),transform 200ms var(--motion-out)}
@starting-style{[data-anim~="menu"]{opacity:0;transform:translateY(-6px)}}
div[style*="position: fixed"][style*="inset: 0"]{transition:opacity 200ms var(--motion-out)}
@starting-style{div[style*="position: fixed"][style*="inset: 0"]{opacity:0}}
div[style*="position: fixed"][style*="inset: 0"] > div{transition:opacity 260ms var(--motion-out),transform 260ms var(--motion-out)}
@starting-style{div[style*="position: fixed"][style*="inset: 0"] > div{opacity:0;transform:translateY(8px) scale(.97)}}
[data-anim~="enter"]{transition:opacity 260ms var(--motion-out),transform 260ms var(--motion-out)}
@starting-style{[data-anim~="enter"]{opacity:0;transform:translateY(4px)}}
[data-anim~="pop"]{transition:opacity 220ms var(--motion-out),transform 360ms cubic-bezier(.34,1.3,.64,1)}
@starting-style{[data-anim~="pop"]{opacity:0;transform:scale(.9)}}

/* Live demo: workflow dots, status badges and row highlights ease between states */
#demo [data-anim~="reveal"] *:not([data-anim]){transition-property:background-color,color,border-color;transition-duration:200ms;transition-timing-function:var(--ease-standard)}

@media (prefers-reduced-motion:reduce){
  .coda-motion [data-anim~="hero"],.coda-motion [data-anim~="hero-frame"],.coda-motion [data-anim~="reveal"],.coda-motion [data-anim~="stagger"] > *{transform:none!important}
  .coda-motion [data-anim][data-in],.coda-motion [data-anim~="stagger"][data-in] > *{transition-duration:300ms!important;transition-delay:0ms!important}
  .coda-motion [data-anim~="bar"],.coda-motion [data-anim~="steps"] > [data-anim~="line"]{transform:none!important}
  [data-anim~="press"]:active:not(:disabled){transform:none}
  [data-anim~="press"] > svg:last-child{transform:none!important}
  @starting-style{[data-anim~="menu"],[data-anim~="enter"],[data-anim~="pop"],div[style*="position: fixed"][style*="inset: 0"] > div{transform:none}}
}
@media print{.coda-motion [data-anim],.coda-motion [data-anim~="stagger"] > *{opacity:1!important;transform:none!important}}

/* ============ LEGAL PAGES ============ */
[data-legal] h2{margin-top:52px;font-size:24px;font-weight:700;letter-spacing:-0.4px;line-height:1.25;color:#0E1E36}
[data-legal] h2:first-child{margin-top:0}
[data-legal] .num{display:block;margin-bottom:10px;font-family:'Geist Mono',monospace;font-size:12px;font-weight:500;letter-spacing:1.5px;color:#34788E}
[data-legal] p{margin-top:14px;font-size:17px;line-height:1.7;color:#46566F}
[data-legal] ul{margin-top:16px;list-style:none;display:flex;flex-direction:column;gap:12px}
[data-legal] li{position:relative;padding-left:22px;font-size:17px;line-height:1.7;color:#46566F}
[data-legal] li::before{content:"";position:absolute;left:2px;top:11px;width:7px;height:7px;border-radius:50%;background:#34788E}
[data-legal] a{color:#34788E;text-decoration:underline;text-decoration-color:rgba(52,120,142,0.35);text-underline-offset:3px;transition:color 160ms var(--ease-standard),text-decoration-color 160ms var(--ease-standard)}
[data-legal] a:hover{color:#2C6678;text-decoration-color:currentColor}
@media (max-width:860px){
  [data-legal] h2{margin-top:40px;font-size:21px}
  [data-legal] p,[data-legal] li{font-size:16px}
}