/* Kolap page components: hero, the two CSS-only product demos, sections, pricing, FAQ, inner pages.
   Tokens and shared parts are in /assets/site.css. */

/* ---- hero: dark first screen, violet glow, vertical-light texture (CSS only) ---- */
.hero{position:relative; isolation:isolate; overflow:hidden; background:var(--d0); color:#fff; padding:120px 0 64px;}
@media(min-width:900px){ .hero{padding:152px 0 96px;} }
.hero::before{content:""; position:absolute; inset:0; z-index:-2; background:radial-gradient(70% 46% at 50% -4%,rgba(124,58,237,.62),rgba(124,58,237,.18) 50%,transparent 74%), radial-gradient(40% 30% at 50% 58%,rgba(124,58,237,.16),transparent 70%);}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(90deg,rgba(124,58,237,0) 0,rgba(124,58,237,0) 14px,rgba(139,92,246,.34) 44px,rgba(196,181,253,.18) 49px,rgba(124,58,237,.06) 78px,rgba(124,58,237,0) 96px); -webkit-mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); mask:linear-gradient(180deg,#000 0,rgba(0,0,0,.65) 30%,transparent 58%); pointer-events:none;}
.hero .copy{max-width:900px; margin:0 auto; text-align:center;}
.hero h1{font-size:clamp(34px,8.6vw,58px); line-height:1.1; letter-spacing:-.02em; font-weight:800; color:#fff; text-wrap:balance;}
.hero h1 .br{display:none;}
@media(min-width:900px){ .hero h1 .br{display:inline;} }
.hero h1 .ob{white-space:nowrap;}
.hero .lead{margin:24px auto 0; max-width:60ch; font-size:17px; line-height:1.65; color:var(--dtext2);}
@media(min-width:900px){ .hero .lead{font-size:19px;} }
.kw{display:inline-block; font-weight:600; line-height:1.25; padding:1px 8px 2px; margin:0 1px; border-radius:7px; border:1px solid transparent;}
.kw-v{color:#d4c8ff; background:rgba(139,92,246,.24); border-color:rgba(196,181,253,.34);}
.kw-g{color:#5fe0a1; background:rgba(18,183,106,.18); border-color:rgba(95,224,161,.3);}
.kw-a{color:#fcd34d; background:rgba(245,158,11,.16); border-color:rgba(252,211,77,.3);}
.actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:32px;}
.hero .actions,.final .actions{justify-content:center;}
@media(max-width:520px){ .actions .btn{width:100%; white-space:normal; text-align:center; line-height:1.25; padding-top:12px; padding-bottom:12px;} }

/* inline objects in the headline, set at cap height; their text comes from CSS */
.ob{display:inline-block; vertical-align:baseline; position:relative;}
.ob-flow{display:inline-flex; align-items:center; vertical-align:-.1em; margin:0 .1em 0 .16em; height:.8em;}
.ob-flow i{position:relative; display:block; width:.58em; height:.58em; border-radius:.17em; border:.07em solid; background:rgba(255,255,255,.04); box-shadow:0 .06em .2em rgba(0,0,0,.45);}
.ob-flow i + i{margin-left:.3em;}
.ob-flow i + i::before{content:""; position:absolute; right:100%; top:50%; width:.3em; height:.06em; margin-top:-.03em; background:rgba(196,181,253,.7);}
.ob-flow .a{border-color:#f59e0b; background:rgba(245,158,11,.18);}
.ob-flow .b{border-color:#fb923c; background:rgba(251,146,60,.18);}
.ob-flow .c{border-color:#22c55e; background:rgba(34,197,94,.2);}
.ob-cron{vertical-align:.08em; margin:0 .14em 0 .2em; padding:.12em .5em .14em; border-radius:99px; border:.05em solid rgba(196,181,253,.5); background:rgba(139,92,246,.2); font-family:var(--mono); font-weight:600; font-size:.5em; line-height:1; letter-spacing:0; color:#e4dcff; box-shadow:0 0 .9em rgba(124,58,237,.55);}
.ob-cron::before{content:"*/15 * * * *";}
@media(prefers-reduced-motion:no-preference){
  .ob-flow i{animation:obPulse 3.6s infinite;}
  .ob-flow .b{animation-delay:.5s;}
  .ob-flow .c{animation-delay:1s;}
  @keyframes obPulse{0%,100%{box-shadow:0 .06em .2em rgba(0,0,0,.45);}18%{box-shadow:0 0 .55em rgba(196,181,253,.9);}36%{box-shadow:0 .06em .2em rgba(0,0,0,.45);}}
}

/* ---- the demo window: a large rounded frame with a violet rim light ---- */
.hframe{position:relative; margin:64px auto 0; max-width:1040px; border-radius:30px; padding:10px; background:linear-gradient(160deg,rgba(196,181,253,.5),rgba(139,92,246,.22) 40%,rgba(124,58,237,.1)); box-shadow:0 0 0 1px rgba(196,181,253,.18), 0 40px 140px -30px rgba(124,58,237,.65), 0 0 90px -10px rgba(124,58,237,.35); text-align:left;}
.hframe-in{border-radius:22px; overflow:hidden; background:#0b0b10; border:1px solid rgba(255,255,255,.08);}
.hframe-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px; border-bottom:1px solid var(--dline);}
.hframe-bar .pill{min-height:30px; padding:0 12px; font-size:12px; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#fff;}
.hframe-bar .caption{font-size:12.5px; color:rgba(255,255,255,.7);}
@media(max-width:560px){ .hframe{padding:6px; border-radius:24px; margin-top:48px;} .hframe-in{border-radius:19px;} .hframe-bar{padding:12px 14px; flex-wrap:wrap;} }

/* demo 1: the canvas and the run log */
.cvw{display:grid; color:#e4e4e7;}
@media(min-width:900px){ .cvw{grid-template-columns:minmax(0,1fr) 310px;} }
.cv{position:relative; padding:28px 18px; background-color:#0c0c11; background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.3px); background-size:18px 18px; display:flex; align-items:center; justify-content:center;}
@media(min-width:900px){ .cv{padding:36px 28px;} }
.flow{display:flex; flex-direction:column; align-items:stretch; width:100%; max-width:300px;}
@media(min-width:900px){ .flow{flex-direction:row; align-items:center; max-width:none;} }
.nd{position:relative; display:flex; align-items:center; gap:10px; min-width:0; padding:10px 12px; border:2px solid; border-radius:14px; background:#14141b;}
@media(min-width:900px){ .nd{flex:1 1 0; flex-direction:column; align-items:flex-start; gap:8px; padding:12px;} .nd .st{position:absolute; top:10px; right:10px; margin:0;} .nd small{white-space:normal; overflow:visible;} }
.nd.t{border-color:rgba(245,158,11,.6); background:linear-gradient(rgba(245,158,11,.07),rgba(245,158,11,.07)),#14141b;}
.nd.c{border-color:rgba(249,115,22,.6); background:linear-gradient(rgba(249,115,22,.07),rgba(249,115,22,.07)),#14141b;}
.nd.l{border-color:rgba(96,165,250,.6); background:linear-gradient(rgba(96,165,250,.07),rgba(96,165,250,.07)),#14141b;}
.nd.s{border-color:rgba(34,197,94,.6); background:linear-gradient(rgba(34,197,94,.07),rgba(34,197,94,.07)),#14141b;}
.ni{flex:none; display:flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:rgba(255,255,255,.06);}
.ni svg{width:16px; height:16px; fill:none; stroke:#e4e4e7; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
.nd b{display:block; font-size:13px; line-height:1.2; font-weight:600; color:#fafafa;}
.nd small{display:block; margin-top:2px; font-size:11px; line-height:1.2; color:#a1a1aa; font-family:var(--mono); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.nd .tx{min-width:0;}
.st{flex:none; margin-left:auto; position:relative; width:16px; height:16px; border-radius:50%; background:#22c55e;}
.st::after{content:""; position:absolute; inset:3px; background:#04170f; -webkit-mask:var(--i) center/contain no-repeat; mask:var(--i) center/contain no-repeat; --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");}
.st.bad{background:#ef4444;}
.st.bad::after{background:#2a0707; --i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'%3E%3Cpath d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E");}
.ed{position:relative; flex:none; width:2px; height:30px; margin:0 auto; background:rgba(196,181,253,.45);}
.ed em{position:absolute; left:10px; top:50%; transform:translateY(-50%); font-style:normal; font-family:var(--mono); font-size:10.5px; color:#c4b5fd;}
@media(min-width:900px){ .ed{width:30px; height:2px; margin:0;} .ed em{left:50%; top:-17px; transform:translateX(-50%);} }
.ed::after{content:""; position:absolute; left:-3px; top:0; width:8px; height:8px; border-radius:50%; background:#c4b5fd; opacity:0;}
@media(min-width:900px){ .ed::after{left:0; top:-3px;} }
.log{border-top:1px solid var(--dline); padding:18px 18px 20px; background:#0f0f15;}
@media(min-width:900px){ .log{border-top:0; border-left:1px solid var(--dline);} }
.log-h{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; font-size:13px; font-weight:600; color:#fafafa;}
.badge{display:inline-block; font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.08em; line-height:1; padding:5px 8px; border-radius:99px; border:1px solid;}
.badge.ok{color:#4ade80; border-color:rgba(74,222,128,.4); background:rgba(34,197,94,.12);}
.badge.fail{color:#fca5a5; border-color:rgba(252,165,165,.4); background:rgba(239,68,68,.14);}
.log ol{display:grid; gap:0;}
.log li{display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid rgba(255,255,255,.07); font-size:12.5px; color:#d4d4d8;}
.log li:first-child{border-top:0;}
.log li .d{flex:none; width:8px; height:8px; border-radius:50%; background:#22c55e;}
.log li span{flex:1; min-width:0;}
.log li em{font-style:normal; font-family:var(--mono); font-size:11px; color:#a1a1aa;}
.log .sample{margin-top:12px; font-size:11.5px; color:#a1a1aa;}

@media(prefers-reduced-motion:no-preference){
  /* a 12 s loop: each node waits, runs, then completes, and the log fills in step by step */
  .nd .st{animation-duration:12s; animation-iteration-count:infinite; animation-timing-function:linear;}
  .n1 .st{animation-name:s1;} .n2 .st{animation-name:s2;} .n3 .st{animation-name:s3;} .n4 .st{animation-name:s4;}
  @keyframes s1{0%,3%{background:#3f3f46;} 4%,12%{background:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.35);} 13%,94%{background:#22c55e; box-shadow:none;} 96%,100%{background:#3f3f46; box-shadow:none;}}
  @keyframes s2{0%,17%{background:#3f3f46;} 18%,26%{background:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.35);} 27%,94%{background:#22c55e; box-shadow:none;} 96%,100%{background:#3f3f46; box-shadow:none;}}
  @keyframes s3{0%,31%{background:#3f3f46;} 32%,40%{background:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.35);} 41%,94%{background:#22c55e; box-shadow:none;} 96%,100%{background:#3f3f46; box-shadow:none;}}
  @keyframes s4{0%,45%{background:#3f3f46;} 46%,54%{background:#8b5cf6; box-shadow:0 0 0 4px rgba(139,92,246,.35);} 55%,94%{background:#22c55e; box-shadow:none;} 96%,100%{background:#3f3f46; box-shadow:none;}}
  .nd .st::after{animation:ck 12s infinite linear; opacity:0;}
  .n1 .st::after{animation-name:c1;} .n2 .st::after{animation-name:c2;} .n3 .st::after{animation-name:c3;} .n4 .st::after{animation-name:c4;}
  @keyframes c1{0%,12%{opacity:0;} 13%,94%{opacity:1;} 96%,100%{opacity:0;}}
  @keyframes c2{0%,26%{opacity:0;} 27%,94%{opacity:1;} 96%,100%{opacity:0;}}
  @keyframes c3{0%,40%{opacity:0;} 41%,94%{opacity:1;} 96%,100%{opacity:0;}}
  @keyframes c4{0%,54%{opacity:0;} 55%,94%{opacity:1;} 96%,100%{opacity:0;}}
  .ed::after{animation:travel 12s infinite linear;}
  .e1::after{animation-name:tr1;} .e2::after{animation-name:tr2;} .e3::after{animation-name:tr3;}
  @keyframes tr1{0%,12%{opacity:0; transform:none;} 13%{opacity:1;} 17%{opacity:1; transform:var(--mv);} 18%,100%{opacity:0;}}
  @keyframes tr2{0%,26%{opacity:0; transform:none;} 27%{opacity:1;} 31%{opacity:1; transform:var(--mv);} 32%,100%{opacity:0;}}
  @keyframes tr3{0%,40%{opacity:0; transform:none;} 41%{opacity:1;} 45%{opacity:1; transform:var(--mv);} 46%,100%{opacity:0;}}
  .ed{--mv:translateY(26px);}
  @media(min-width:900px){ .ed{--mv:translateX(26px);} }
  .lg1{animation:l1 12s infinite;} .lg2{animation:l2 12s infinite;} .lg3{animation:l3 12s infinite;} .lg4{animation:l4 12s infinite;}
  @keyframes l1{0%,12%{opacity:.25;} 13%,94%{opacity:1;} 96%,100%{opacity:.25;}}
  @keyframes l2{0%,26%{opacity:.25;} 27%,94%{opacity:1;} 96%,100%{opacity:.25;}}
  @keyframes l3{0%,40%{opacity:.25;} 41%,94%{opacity:1;} 96%,100%{opacity:.25;}}
  @keyframes l4{0%,54%{opacity:.25;} 55%,94%{opacity:1;} 96%,100%{opacity:.25;}}
}

/* demo 2: the run history. A failed run, read node by node. */
.runs{margin-top:48px; border-radius:22px; overflow:hidden; background:#0b0b10; border:1px solid rgba(255,255,255,.1); box-shadow:0 40px 120px -40px rgba(124,58,237,.55); color:#e4e4e7; text-align:left;}
.runs-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-bottom:1px solid var(--dline); font-size:12.5px; color:#a1a1aa;}
.runs-bar b{color:#fafafa; font-weight:600;}
.runs-body{display:grid;}
@media(min-width:900px){ .runs-body{grid-template-columns:300px minmax(0,1fr);} }
.rl{padding:16px; border-bottom:1px solid var(--dline); background:#0f0f15;}
@media(min-width:900px){ .rl{border-bottom:0; border-right:1px solid var(--dline);} }
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px;}
.chips span{font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.06em; line-height:1; padding:6px 9px; border-radius:99px; background:#1c1c24; color:#a1a1aa;}
.chips span.on{background:#7c3aed; color:#fff;}
.rrow{display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:12px; border:1px solid transparent; font-size:12.5px;}
.rrow + .rrow{margin-top:4px;}
.rrow.sel{background:#1a1a23; border-color:rgba(139,92,246,.5);}
.rrow span{flex:1; min-width:0;}
.rrow b{display:block; font-weight:600; color:#fafafa; font-size:13px;}
.rrow small{display:block; color:#a1a1aa; font-size:11px; margin-top:1px;}
.rd2{padding:20px 18px 22px;}
@media(min-width:900px){ .rd2{padding:22px 26px 26px;} }
.rd2-h{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:16px;}
.rd2-h b{font-family:var(--display); font-size:17px; font-weight:700; color:#fafafa; margin-right:auto;}
.mbtn{display:inline-flex; align-items:center; min-height:32px; padding:0 14px; border-radius:99px; border:1px solid rgba(255,255,255,.2); font-size:12.5px; font-weight:600; color:#e4e4e7; background:rgba(255,255,255,.04);}
.mbtn.pri{background:#7c3aed; border-color:#8b5cf6; color:#fff;}
.stp{display:grid; gap:0;}
.stp li{display:flex; align-items:flex-start; gap:12px; padding:11px 0; border-top:1px solid rgba(255,255,255,.07); font-size:13px;}
.stp li:first-child{border-top:0;}
.stp li .st{margin:2px 0 0;}
.stp li b{display:block; font-weight:600; color:#fafafa;}
.stp li small{display:block; margin-top:2px; font-size:12px; color:#a1a1aa; font-family:var(--mono);}
.stp li.err small{color:#fca5a5;}
.stp li em{margin-left:auto; flex:none; font-style:normal; font-family:var(--mono); font-size:11px; color:#a1a1aa; padding-top:3px;}
.dx{margin-top:14px; padding:14px 16px; border-radius:14px; border:1px solid rgba(196,181,253,.35); background:rgba(139,92,246,.12); font-size:13px; line-height:1.55; color:#e4dcff;}
.dx b{display:block; margin-bottom:4px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#c4b5fd;}
.runs .sample{padding:12px 18px; border-top:1px solid var(--dline); font-size:12px; color:#a1a1aa;}
@media(prefers-reduced-motion:no-preference){
  .stp li{animation:rv 10s infinite;}
  .stp li:nth-child(1){animation-name:rv1;} .stp li:nth-child(2){animation-name:rv2;} .stp li:nth-child(3){animation-name:rv3;} .stp li:nth-child(4){animation-name:rv4;}
  @keyframes rv1{0%,2%{opacity:0; transform:translateY(6px);} 8%,92%{opacity:1; transform:none;} 98%,100%{opacity:0;}}
  @keyframes rv2{0%,14%{opacity:0; transform:translateY(6px);} 20%,92%{opacity:1; transform:none;} 98%,100%{opacity:0;}}
  @keyframes rv3{0%,26%{opacity:0; transform:translateY(6px);} 32%,92%{opacity:1; transform:none;} 98%,100%{opacity:0;}}
  @keyframes rv4{0%,38%{opacity:0; transform:translateY(6px);} 44%,92%{opacity:1; transform:none;} 98%,100%{opacity:0;}}
  .dx{animation:dxin 10s infinite;}
  @keyframes dxin{0%,52%{opacity:0; transform:translateY(8px);} 60%,92%{opacity:1; transform:none;} 98%,100%{opacity:0;}}
  .mbtn.pri{animation:glow 10s infinite;}
  @keyframes glow{0%,66%{box-shadow:none;} 72%,88%{box-shadow:0 0 0 4px rgba(139,92,246,.4);} 94%,100%{box-shadow:none;}}
}

/* ---- sections ---- */
.cols{display:grid; gap:40px; align-items:start;}
@media(min-width:900px){ .cols{grid-template-columns:.9fr 1.1fr; gap:80px;} .cols .stick{position:sticky; top:112px;} }
.prose p{margin-top:16px; max-width:56ch; font-size:17px; line-height:1.65; color:var(--body);}
.prose p:first-child{margin-top:0;}

/* recipes: a flow written as a strip of steps */
.recipes{display:grid; gap:16px;}
@media(min-width:900px){ .recipes{grid-template-columns:1fr 1fr; gap:20px;} }
.recipe{padding:24px; background:var(--surface); border:1px solid var(--line); border-radius:22px;}
.recipe h3{font-size:19px; line-height:1.25; letter-spacing:-.01em; font-weight:800;}
.recipe p{margin-top:8px; font-size:15px; color:var(--muted); max-width:52ch;}
.strip{display:flex; flex-wrap:wrap; align-items:center; gap:8px 6px; margin-top:18px;}
.strip span{display:inline-flex; align-items:center; min-height:32px; padding:0 12px; border-radius:99px; border:1px solid var(--line-strong); font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ink); background:var(--tint);}
.strip span.t{border-color:#b45309; background:#fffbeb; color:#78350f;}
.strip span.l{border-color:var(--accent-dk); background:var(--soft); color:#4c1d95;}
.strip i{display:block; width:14px; height:2px; background:var(--line-strong); position:relative;}
.strip i::after{content:""; position:absolute; right:-1px; top:-3px; border-left:6px solid var(--line-strong); border-top:4px solid transparent; border-bottom:4px solid transparent;}

/* the steps: icon tile, mono pill, display heading, one or two lines */
.steps li{position:relative; display:grid; grid-template-columns:48px 1fr; gap:0 20px; padding:0 0 36px;}
.steps li:last-child{padding-bottom:0;}
.steps li:not(:last-child)::after{content:""; position:absolute; left:23px; top:56px; bottom:8px; width:2px; background:linear-gradient(var(--soft-line),var(--line));}
.st-ico{display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:16px; background:var(--soft); border:1px solid var(--soft-line); color:var(--accent-dk);}
.st-ico svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;}
.st-pill{display:inline-block; font-family:var(--mono); font-size:11.5px; line-height:1; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-dk); background:var(--soft); border:1px solid var(--soft-line); border-radius:999px; padding:6px 10px; margin-top:4px;}
.steps h3{font-size:22px; line-height:1.2; letter-spacing:-.01em; font-weight:800; margin-top:12px;}
.steps p{margin-top:6px; color:var(--muted); max-width:50ch;}

/* the spec sheet: one mono label per row, the facts beside it */
.spec{border-top:1px solid var(--ink);}
.spec > div{display:grid; gap:6px 40px; padding:22px 0; border-bottom:1px solid var(--line);}
@media(min-width:900px){ .spec > div{grid-template-columns:220px 1fr; padding:26px 0;} }
.spec dt{font-family:var(--mono); font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dk); padding-top:3px;}
.spec dd{color:var(--body); max-width:70ch; font-size:16.5px; line-height:1.6;}
.spec dd strong{color:var(--ink); font-weight:650;}
.spec dd code{font-family:var(--mono); font-size:.88em; background:var(--tint); border:1px solid var(--line); border-radius:6px; padding:1px 6px;}

/* connectors as plain text chips, no logos */
.cloud{display:flex; flex-wrap:wrap; gap:10px;}
.cloud li{display:inline-flex; align-items:center; min-height:44px; padding:0 18px; border-radius:99px; border:1px solid var(--line-strong); background:var(--surface); font-family:var(--display); font-weight:700; font-size:16px; color:var(--ink);}
.cloud li.plain{border-style:dashed; font-weight:600; color:var(--body); font-family:inherit;}
.note{margin-top:20px; font-size:14px; color:var(--muted); max-width:70ch;}

/* does / does not */
.two{display:grid; gap:20px;}
@media(min-width:900px){ .two{grid-template-columns:1fr 1fr; gap:24px;} }
.cmp{background:var(--surface); border:1px solid var(--line); border-radius:22px; padding:32px 24px;}
@media(min-width:640px){ .cmp{padding:40px 40px 32px;} }
.cmp h3{display:flex; align-items:center; gap:12px; font-size:24px; line-height:1.2; font-weight:800; margin-bottom:12px;}
.cmp h3 .badge-ico{display:flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:11px; background:var(--accent-dk); color:#fff;}
.cmp.no h3 .badge-ico{background:var(--ink);}
.cmp h3 .badge-ico .ico{width:18px; height:18px;}
.list li{display:flex; align-items:flex-start; gap:12px; padding:14px 0; border-top:1px solid var(--line); color:var(--body);}
.list li:first-child{border-top:0;}
.list li .ico{margin-top:2px; color:var(--accent-dk);}
.cmp.no li .ico{color:var(--muted);}

/* pricing */
.plans{display:grid; gap:16px;}
@media(min-width:700px){ .plans{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media(min-width:1140px){ .plans{grid-template-columns:repeat(4,minmax(0,1fr));} }
.plan{position:relative; padding:32px 22px 26px; background:var(--surface); border:1px solid var(--line); border-radius:22px; display:flex; flex-direction:column; overflow:hidden;}
.plan::before{content:""; position:absolute; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--accent),var(--accent-lt));}
.plan-name{font-size:22px; line-height:1.2; font-weight:800;}
.plan-for{margin-top:8px; font-size:14px; line-height:1.45; color:var(--muted); min-height:2.9em;}
.price{margin-top:22px; display:flex; align-items:baseline; gap:4px; font-variant-numeric:tabular-nums;}
.price .cur{font-size:18px; font-weight:600; color:var(--body);}
.price .amt{font-family:var(--display); font-size:46px; line-height:1; letter-spacing:-.04em; font-weight:800; color:var(--ink);}
.price .amt.word{font-size:30px; letter-spacing:-.03em; line-height:1.2;}
.price .per{color:var(--muted); font-size:15px; margin-left:4px;}
.plan-limit{margin-top:20px; padding:12px 16px; background:var(--soft); border:1px solid var(--soft-line); border-radius:var(--radius); display:grid; gap:4px; font-size:14px; font-variant-numeric:tabular-nums; color:var(--body);}
.plan-limit strong{color:var(--ink); font-weight:650;}
.plan-note{margin-top:16px; font-size:14px; line-height:1.5; color:var(--muted); flex:1;}
.pricing-foot{margin-top:24px; font-size:14px; color:var(--muted); max-width:80ch;}

/* faq */
.faq-grid{display:grid; gap:40px;}
@media(min-width:900px){ .faq-grid{grid-template-columns:1fr 1.6fr; gap:80px;} .faq-grid .head{position:sticky; top:112px; align-self:start; margin-bottom:0;} }
.faq{display:grid; gap:12px;}
.faq details{background:var(--surface); border:1px solid var(--line); border-radius:18px;}
.faq details[open]{border-color:var(--soft-line); background:var(--tint);}
.faq summary{list-style:none; cursor:pointer; min-height:64px; padding:16px 20px; font-family:var(--display); font-size:17px; font-weight:700; line-height:1.35; display:flex; justify-content:space-between; gap:16px; align-items:center; border-radius:18px;}
.faq summary:hover{color:var(--accent-dk);}
.faq summary::-webkit-details-marker{display:none;}
.faq .pm{flex:none; width:30px; height:30px; border:1.5px solid currentColor; border-radius:10px; position:relative;}
.faq .pm::before,.faq .pm::after{content:""; position:absolute; left:7px; right:7px; top:50%; height:2px; margin-top:-1px; background:currentColor;}
.faq .pm::after{transform:rotate(90deg); transition:transform .2s var(--ease);}
.faq details[open] .pm::after{transform:rotate(0);}
.faq details[open] .pm{background:var(--accent-dk); border-color:var(--accent-dk); color:#fff;}
.faq .ans{padding:0 20px 20px; max-width:64ch; color:var(--body);}

/* final call */
.final{text-align:center; padding:96px 0;}
@media(min-width:900px){ .final{padding:136px 0;} }
.final::before{content:""; position:absolute; left:50%; bottom:-40%; width:1000px; height:700px; transform:translateX(-50%); background:radial-gradient(closest-side,rgba(124,58,237,.38),transparent); pointer-events:none;}
.final .wrap{position:relative; z-index:1;}
.final h2{font-size:clamp(34px,5.4vw,56px); line-height:1.06; letter-spacing:-.02em; font-weight:800; max-width:18ch; margin:0 auto; text-wrap:balance;}
.final p{margin:20px auto 0; max-width:48ch; font-size:18px; color:var(--dtext2);}
.final .actions{margin-top:32px;}

/* inner pages: connector table, developer blocks */
.conn{display:grid; gap:0; border-top:1px solid var(--ink);}
.conn > div{display:grid; gap:8px 40px; padding:22px 0; border-bottom:1px solid var(--line);}
@media(min-width:900px){ .conn > div{grid-template-columns:240px 1fr; padding:24px 0;} }
.conn h2,.conn h3{font-family:var(--display); font-size:20px; font-weight:800; letter-spacing:-.02em;}
.conn h3 small{display:block; margin-top:4px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; font-weight:600; color:var(--muted); text-transform:uppercase;}
.ops{display:flex; flex-wrap:wrap; gap:6px;}
.ops li{display:inline-flex; align-items:center; min-height:30px; padding:0 11px; border-radius:99px; background:var(--soft); border:1px solid var(--soft-line); font-family:var(--mono); font-size:12.5px; font-weight:500; color:#3b1a8a;}
.conn p{color:var(--body); max-width:70ch; margin-top:8px;}
.conn .ops{margin-top:12px;}
.sec-h{font-size:clamp(24px,3vw,32px); line-height:1.15; letter-spacing:-.025em; font-weight:800; margin:0 0 20px; max-width:28ch;}
.sec-h + .sub{margin-top:-8px; margin-bottom:28px;}
.page-sec{margin-top:64px;}
.page-sec:first-child{margin-top:0;}
.blocks{display:grid; gap:16px;}
@media(min-width:800px){ .blocks{grid-template-columns:1fr 1fr;} }
.block{padding:26px 24px; background:var(--surface); border:1px solid var(--line); border-radius:22px;}
.block h3{font-size:19px; line-height:1.25; letter-spacing:-.01em; font-weight:800;}
.block p{margin-top:8px; font-size:15.5px; color:var(--body);}
.block code{font-family:var(--mono); font-size:.88em; background:var(--tint); border:1px solid var(--line); border-radius:6px; padding:1px 6px;}
.term{margin-top:14px; padding:14px 16px; border-radius:14px; background:var(--d0); color:#e4e4e7; font-family:var(--mono); font-size:13px; line-height:1.7; overflow-x:auto; white-space:pre;}
.term b{color:#c4b5fd; font-weight:600;}
.term i{font-style:normal; color:#a1a1aa;}