/* Socraty 2026 page components (home, internal agent, website agent, pricing). Classes are d- prefixed so the older stylesheet cannot reach them. */
.d-page { overflow-x:clip }
.d-page p { margin:0 }
.d-wrap { max-width:1180px; margin:0 auto; padding-left:24px; padding-right:24px }
.d-sec { padding-top:clamp(64px,9vw,120px) }
.d-sec-end { padding-bottom:clamp(64px,9vw,120px) }
.d-band { margin-top:clamp(64px,9vw,120px); background:var(--ivory); border-top:1px solid rgba(15,23,22,.08); border-bottom:1px solid rgba(15,23,22,.08); padding-bottom:clamp(64px,9vw,120px) }
.d-grid { display:grid; gap:20px }
.d-c200 { grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)) } .d-c260 { grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) }
.d-c300 { grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) } .d-c360 { grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)) }
.d-c420 { grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr)) }
.d-gap-lg { gap:48px 56px } .d-center { align-items:center } .d-start { align-items:start }
.d-row { display:flex; flex-wrap:wrap; gap:16px 32px; align-items:flex-end; justify-content:space-between }

/* Type */
.d-eyebrow { font:700 12px/1.3 var(--sans); letter-spacing:.1em; text-transform:uppercase; color:var(--emerald); margin:0 }
.d-eyebrow.on-dark { color:var(--mint) }
.d-crumb { font:500 13px/1.3 var(--sans); color:var(--muted) } .d-crumb a { color:var(--muted); padding:8px 0; display:inline-block } .d-crumb a:hover { color:var(--ink) } .d-crumb span[aria-current] { color:var(--ink) }
.d-h1 { margin:20px 0 0; font:700 clamp(38px,5vw,64px)/1.03 var(--sans); letter-spacing:-.035em; color:var(--ink) }
.d-h2 { margin:16px 0 0; font:700 clamp(30px,4.2vw,50px)/1.07 var(--sans); letter-spacing:-.03em; color:var(--ink) }
.d-h2.sm { font-size:clamp(28px,3.8vw,44px) }
.d-h2 .dim, .d-h1 .dim { color:var(--muted) } .on-dark .d-h2, .d-h2.on-dark { color:#fff } .d-h2 .mint { color:var(--mint) }
.d-h3 { margin:0; font:700 22px/1.18 var(--sans); letter-spacing:-.02em; color:inherit }
.d-h3.lg { font-size:clamp(22px,2.4vw,28px); letter-spacing:-.025em }
.d-lead { margin:22px 0 0 !important; max-width:580px; font:400 18px/1.6 var(--sans); color:var(--body) } .d-lead b { color:var(--ink); font-weight:600 }
.d-p { font:400 15.5px/1.6 var(--sans); color:var(--body) } .d-p.sm { font-size:14.5px } .d-p.mt { margin-top:14px !important } .d-p b { color:var(--ink); font-weight:600 }
.d-note { font:400 13.5px/1.55 var(--sans); color:var(--muted) }
.d-page a.d-link { color:var(--emerald); font:600 14px/1.4 var(--sans); text-decoration:underline; text-underline-offset:4px; display:inline-block; padding:6px 0 }
.d-page .d-p a, .d-page .d-note a, .d-faq a { color:var(--emerald); text-decoration:underline; text-underline-offset:3px }
.on-dark a.d-link, .d-dark a.d-link { color:var(--mint) }

/* Buttons */
.d-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px } .d-actions.col { flex-direction:column; align-items:flex-start; margin-top:0 }
.d-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:50px; padding:15px 24px; border-radius:12px; border:1px solid transparent; font:600 15px/1.2 var(--sans); text-align:center; transition:transform .2s,background .2s,border-color .2s,color .2s }
.d-btn:hover { transform:translateY(-2px) }
.d-btn-dark { background:var(--ink); color:#fff } .d-btn-dark:hover { background:var(--emerald); color:#fff }
.d-btn-light { background:#fff; color:var(--ink); border-color:rgba(15,23,22,.16) } .d-btn-light:hover { border-color:var(--emerald); color:var(--emerald) }
.d-btn-teal { background:var(--emerald); color:#fff } .d-btn-teal:hover { background:var(--mint); color:var(--ink) }
.d-btn-ghost { color:#fff; border-color:rgba(255,255,255,.3) } .d-btn-ghost:hover { border-color:var(--mint); color:var(--mint) }
.d-btn.sm { min-height:44px; padding:11px 18px; font-size:14px; border-radius:10px } .d-btn.block { display:flex; width:100% }

/* Cards and chips */
.d-card { background:#fff; border:1px solid rgba(15,23,22,.09); border-radius:18px; padding:26px; min-width:0; color:var(--ink) }
.d-card.xl { border-radius:28px; padding:clamp(26px,4vw,56px) }
.d-dark { background:var(--ink); color:#fff; border-color:var(--ink) } .d-dark .d-p { color:#aab3b0 } .d-dark .d-p b { color:#fff }
.d-lift { transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s } .d-lift:hover { transform:translateY(-6px); box-shadow:0 30px 60px -30px rgba(15,23,22,.3) }
.d-step-n { font:700 12px/1 var(--sans); color:var(--emerald); margin:0 0 14px !important }
.d-pill { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(15,23,22,.12); background:#fff; border-radius:999px; padding:6px 12px 6px 7px; font:600 12px/1.2 var(--sans); color:var(--body) }
.d-tick { flex:none; width:20px; height:20px; border-radius:50%; background:var(--emerald-soft); color:var(--emerald); display:inline-grid; place-items:center; font-size:11px; font-weight:700 }
.d-badge { align-self:flex-start; display:inline-block; font:600 12px/1.2 var(--sans); background:var(--emerald-soft); color:var(--emerald-deep); border-radius:999px; padding:6px 10px }
.d-badge.grey { background:var(--ivory); color:var(--body) } .d-dark .d-badge { background:rgba(95,211,193,.15); color:var(--mint) }
.d-tags { display:flex; gap:6px; flex-wrap:wrap }
.d-tag { font:700 12px/1.2 var(--sans); background:var(--emerald-soft); color:var(--emerald-deep); border-radius:6px; padding:5px 8px }
.d-tag.rule { background:var(--amber-soft); color:var(--amber) } .d-tag.grey { background:var(--ivory); color:var(--body) }
.d-dark .d-tag { background:rgba(95,211,193,.15); color:var(--mint) } .d-dark .d-tag.grey { background:rgba(255,255,255,.1); color:#c5ccc9 }
.d-sample { display:inline-block; font:700 12px/1.2 var(--sans); letter-spacing:.06em; text-transform:uppercase; background:var(--ivory); border:1px solid rgba(15,23,22,.1); color:var(--body); border-radius:6px; padding:4px 8px }
.d-checks { list-style:none; margin:22px 0 0; padding:0; display:grid; gap:12px; font:500 15px/1.5 var(--sans); color:var(--ink) }
.d-checks li { display:flex; gap:12px; align-items:flex-start }
.d-bullets { list-style:none; margin:0; padding:0; display:grid; gap:18px }
.d-bullets li { display:flex; gap:14px; padding-bottom:18px; border-bottom:1px solid rgba(15,23,22,.1); font:400 15.5px/1.55 var(--sans); color:var(--body) }
.d-bullets li:last-child { border-bottom:0; padding-bottom:0 } .d-bullets li::before { content:''; flex:none; width:8px; height:8px; border-radius:50%; background:var(--teal); margin-top:8px } .d-bullets b { color:var(--ink); font-weight:600 }
.d-dash { list-style:none; margin:0; padding:0; display:grid; gap:8px; font:400 14px/1.45 var(--sans) } .d-dash li { display:flex; gap:10px } .d-dash li::before { content:'\2014'; color:var(--mint) }
.d-provide { margin-top:auto !important; padding-top:14px; border-top:1px solid rgba(15,23,22,.1) } .d-dark .d-provide { border-top-color:rgba(255,255,255,.14) }
.d-numlist { list-style:none; margin:0; padding:0; display:grid; gap:12px }
.d-numlist li { display:grid; grid-template-columns:40px 1fr; gap:14px; background:#fff; border:1px solid rgba(15,23,22,.09); border-radius:16px; padding:20px 22px }
.d-numlist .n { font:700 13px/1 var(--sans); color:var(--emerald); padding-top:5px } .d-numlist b { display:block; font:700 18px/1.25 var(--sans); letter-spacing:-.015em; color:var(--ink) } .d-numlist span.t { display:block; margin-top:6px; font:400 14.5px/1.6 var(--sans); color:var(--body) }
.d-steps3 { display:grid; gap:16px; margin-top:28px } .d-steps3 div { display:flex; gap:14px; align-items:flex-start; font:400 15.5px/1.55 var(--sans); color:var(--body) }
.d-steps3 i { flex:none; width:30px; height:30px; border-radius:9px; background:var(--ink); color:#fff; display:grid; place-items:center; font:700 12px/1 var(--sans); font-style:normal } .d-steps3 b { color:var(--ink) }

/* Banner, hero */
.d-banner { background:var(--ink); color:#fff; font:500 13px/1.4 var(--sans); padding:6px 24px; display:flex; justify-content:center; align-items:center; gap:4px 10px; flex-wrap:wrap; text-align:center }
.d-banner b { color:var(--mint); font-weight:700 } .d-banner a { color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; padding:6px 0 }
.d-hero-bg { position:relative } .d-hero-bg::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(15,23,22,.09) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(#000 40%,transparent 100%); mask-image:linear-gradient(#000 40%,transparent 100%); pointer-events:none }
.d-hero { position:relative; padding-top:clamp(44px,7vw,96px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:48px; align-items:center }
.d-rise { animation:d-rise .7s cubic-bezier(.2,.7,.2,1) both } .d-rise.late { animation-delay:.15s }
@keyframes d-rise { from { transform:translateY(16px) } to { transform:none } }
.d-trust { display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:24px; font:500 13.5px/1.4 var(--sans); color:var(--muted); list-style:none; padding:0 }
.d-built { display:flex; flex-wrap:wrap; gap:12px 20px; margin-top:32px; padding-top:22px; border-top:1px solid rgba(15,23,22,.1); align-items:center; font:500 13px/1.35 var(--sans); color:var(--muted) }
.d-built .lab { font:700 12px/1 var(--sans); letter-spacing:.06em; text-transform:uppercase }
.d-logo-chip { display:inline-flex; align-items:center; background:#fff; border:1px solid rgba(15,23,22,.1); border-radius:8px; padding:10px 14px } .d-logo-chip img { height:20px; width:auto; display:block }

/* Mock app windows (illustrations) */
.d-mock-wrap { position:relative; perspective:1800px; min-width:0 } .d-mock-wrap::before { content:''; position:absolute; inset:10% -6% 0 -6%; background:radial-gradient(60% 60% at 50% 50%,rgba(15,157,138,.16),rgba(15,157,138,0) 70%); filter:blur(14px) }
.d-mock { position:relative; background:#fff; border-radius:16px; border:1px solid rgba(15,23,22,.1); box-shadow:0 1px 2px rgba(15,23,22,.04),0 50px 100px -40px rgba(15,23,22,.4); overflow:hidden; transition:transform .8s cubic-bezier(.2,.7,.2,1); font-family:var(--sans); color:var(--ink) }
.d-tilt-l { transform:rotateY(-9deg) rotateX(3deg); transform-origin:70% 50% } .d-tilt-l:hover { transform:rotateY(-3deg) rotateX(1deg) }
.d-tilt-r { transform:rotateY(10deg) rotateX(4deg); transform-origin:30% 50% } .d-tilt-r:hover { transform:rotateY(3deg) rotateX(1deg) }
.d-tilt-x { transform:rotateX(6deg); transform-origin:50% 0 } .d-tilt-x:hover { transform:none }
.d-mock-bar { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid rgba(15,23,22,.08); background:#fafaf7 }
.d-mock-bar i { width:10px; height:10px; border-radius:50%; background:#e3e1db } .d-mock-bar span { margin-left:8px; flex:1; max-width:420px; background:#fff; border:1px solid rgba(15,23,22,.08); border-radius:7px; padding:5px 12px; font:500 11px/1.2 var(--sans); color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.d-app { display:grid; grid-template-columns:160px minmax(0,1fr); min-height:400px } .d-app.lg { grid-template-columns:220px minmax(0,1fr); min-height:540px }
.d-side { background:#fafaf7; border-right:1px solid rgba(15,23,22,.08); padding:14px 10px; display:flex; flex-direction:column; gap:6px; font:500 10.5px/1.35 var(--sans); color:var(--body); min-width:0 }
.d-app.lg .d-side { font-size:12px; padding:16px 12px; gap:8px; background:var(--ivory) }
.d-side .co { display:flex; align-items:center; gap:8px; padding:2px 6px 10px; font-weight:700; color:var(--ink) } .d-side .co i { width:24px; height:24px; border-radius:6px; background:var(--ink); color:#fff; display:grid; place-items:center; font:700 9px/1 var(--sans); font-style:normal; flex:none } .d-side .co small { display:block; font-weight:500; color:var(--muted); font-size:inherit }
.d-side .new { background:var(--ink); color:#fff; border-radius:7px; padding:7px 9px; font-weight:600 } .d-app.lg .d-side .new { background:var(--emerald) }
.d-side .find { background:#fff; border:1px solid rgba(15,23,22,.08); border-radius:8px; padding:8px 10px; color:var(--muted) }
.d-side .lab { font:700 9px/1 var(--sans); letter-spacing:.08em; color:var(--muted); margin:8px 0 2px; padding:0 6px }
.d-side .it { padding:6px 9px } .d-side .it.on { background:var(--emerald-soft); border-radius:7px; font-weight:600; color:var(--emerald-deep) }
.d-side .foot { margin-top:auto; padding:8px 9px; border-top:1px solid rgba(15,23,22,.08); display:flex; justify-content:space-between; gap:8px; font-weight:600 }
.d-main { display:flex; flex-direction:column; min-width:0 } .d-main-head { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 16px; border-bottom:1px solid rgba(15,23,22,.08); font:700 11px/1.2 var(--sans) }
.d-main-head span { font:600 9px/1 var(--sans); color:var(--emerald-deep); background:var(--emerald-soft); border-radius:999px; padding:4px 8px; white-space:nowrap }
.d-thread { padding:14px 16px; display:flex; flex-direction:column; gap:11px; flex:1; font:400 10.5px/1.55 var(--sans); min-width:0 } .d-app.lg .d-thread { padding:18px 22px; gap:14px; font-size:14px }
.d-q { align-self:flex-end; max-width:85%; background:var(--ink); color:#fff; border-radius:12px 12px 3px 12px; padding:8px 12px; font-weight:500 }
.d-a { display:flex; gap:9px; align-items:flex-start; min-width:0 } .d-a > div { display:grid; gap:8px; min-width:0 }
.d-bot { flex:none; width:20px; height:20px; border-radius:6px; background:var(--teal); display:grid; place-items:center } .d-bot::after { content:''; width:6px; height:6px; border-radius:50%; background:#fff } .d-app.lg .d-bot, .d-bot.lg { width:26px; height:26px; border-radius:8px } .d-bot.lg::after, .d-app.lg .d-bot::after { width:8px; height:8px }
.d-mini { border:1px solid rgba(15,23,22,.09); border-radius:8px; overflow:hidden; font:500 9.5px/1.3 var(--sans) } .d-mini > div { display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:8px; padding:6px 10px; border-top:1px solid rgba(15,23,22,.07) } .d-mini > div:first-child { border-top:0; background:#fafaf7; font:700 8px/1.3 var(--sans); letter-spacing:.06em; color:var(--muted) }
.d-mini.c3 > div { grid-template-columns:1.2fr 1.2fr .8fr } .d-mini.md { font-size:12px } .d-mini.md > div:first-child { font-size:12px; letter-spacing:.02em } .d-mini .sum { background:var(--emerald-soft); font-weight:700 }
.d-late { color:#a33a24; font-weight:700 } .d-ok { color:var(--emerald-deep); font-weight:700 } .d-warn { color:var(--amber); font-weight:700 }
.d-mock .d-tag { font-size:8px; padding:4px 7px } .d-app.lg .d-tag { font-size:11px }
.d-ask { margin-top:auto; display:flex; align-items:center; gap:8px; border:1px solid rgba(15,23,22,.12); border-radius:10px; padding:9px 11px; background:#fff; color:var(--muted); font-weight:500 } .d-ask span { flex:1 } .d-ask i { width:22px; height:22px; border-radius:6px; background:var(--ink); color:#fff; display:grid; place-items:center; font-size:11px; font-style:normal }
.d-uses { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font:500 10.5px/1 var(--sans); color:var(--muted) } .d-uses span { background:#fff; border:1px solid rgba(15,23,22,.12); border-radius:999px; padding:6px 10px; color:var(--body) } .d-uses span.on { background:var(--emerald-soft); border-color:rgba(10,125,110,.3); color:var(--emerald-deep) }
.d-srcrow { display:flex; gap:10px; align-items:baseline; background:var(--emerald-soft); border:1px solid rgba(10,125,110,.2); border-radius:9px; padding:9px 12px; font:400 12.5px/1.4 var(--sans) } .d-srcrow b { font:700 9px/1 var(--sans); letter-spacing:.08em; color:var(--emerald-deep) } .d-srcrow.rule { background:var(--amber-soft); border-color:rgba(138,84,10,.25) } .d-srcrow.rule b { color:var(--amber) }
.d-float { position:absolute; z-index:2; background:var(--ink); color:#fff; border-radius:12px; padding:10px 12px; box-shadow:0 24px 50px -20px rgba(15,23,22,.5); display:flex; align-items:center; gap:10px; font:600 11.5px/1.3 var(--sans) } .d-float small { display:block; font:500 10.5px/1.3 var(--sans); color:#aab3b0 }
.d-float i { width:30px; height:30px; border-radius:8px; background:var(--emerald); display:grid; place-items:center; font-style:normal; font-size:13px } .d-float.f1 { left:-4%; top:-5% } .d-float.f2 { right:4%; bottom:-7%; background:#fff; color:var(--ink); border:1px solid rgba(15,23,22,.1) } .d-float.f2 small { color:var(--muted) } .d-float.f2 i { background:#1d6f42; color:#fff; font:700 9.5px/1 var(--sans) }
.d-shop { position:relative; min-height:420px; padding:18px } .d-shop-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; opacity:.6 } .d-shop-grid div { background:#fff; border:1px solid rgba(15,23,22,.08); border-radius:10px; padding:10px } .d-shop-grid div::before { content:''; display:block; height:60px; border-radius:6px; background:repeating-linear-gradient(135deg,#e9e7e0 0 4px,#f3f2ec 4px 8px) } .d-shop-grid div::after { content:''; display:block; margin-top:8px; height:6px; width:70%; background:#e3e1db; border-radius:3px }
.d-widget { position:absolute; right:16px; bottom:16px; width:min(86%,330px); background:#fff; border:1px solid rgba(15,23,22,.1); border-radius:16px; box-shadow:0 30px 60px -20px rgba(15,23,22,.4); overflow:hidden; font:400 12px/1.6 var(--sans) }
.d-widget-head { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid rgba(15,23,22,.08); font:700 12px/1.2 var(--sans) } .d-widget-head::before { content:''; width:8px; height:8px; border-radius:50%; background:var(--teal) } .d-widget-head small { margin-left:auto; font:500 10.5px/1 var(--sans); color:var(--muted) }
.d-widget-body { padding:14px; display:flex; flex-direction:column; gap:10px } .d-widget .d-tag { font-size:9.5px }
.d-peek { margin:26px 0 0 28px; background:var(--ivory); border-radius:14px 0 0 0; padding:18px 0 0 18px; flex:1; overflow:hidden } .d-dark .d-peek { background:#1b2523 }
.d-peek > div { background:#fff; color:var(--ink); border:1px solid rgba(15,23,22,.09); border-radius:10px 0 0 0; box-shadow:0 20px 40px -20px rgba(15,23,22,.3); padding:14px 16px; display:grid; gap:10px; min-height:150px; font:400 11px/1.55 var(--sans) } .d-peek .d-tag { font-size:9px }
@media(max-width:560px) { .d-app, .d-app.lg { grid-template-columns:minmax(0,1fr) } .d-side { display:none } .d-float { display:none } .d-tilt-l, .d-tilt-r, .d-tilt-x { transform:none } .d-app.lg .d-thread { font-size:13px; padding:14px } }

/* Stats, sources strip */
.d-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); background:#fff; border:1px solid rgba(15,23,22,.09); border-radius:20px; overflow:hidden; margin:0; padding:0; list-style:none }
.d-stats li { padding:26px 24px; border-left:1px solid rgba(15,23,22,.09); margin-left:-1px } .d-stats b { display:block; font:800 clamp(30px,3.4vw,40px)/1 var(--sans); letter-spacing:-.04em } .d-stats span { display:block; margin-top:8px; font:500 14px/1.45 var(--sans); color:var(--muted) }
.d-sources { margin-top:64px; padding:26px 0; border-top:1px solid rgba(15,23,22,.08); border-bottom:1px solid rgba(15,23,22,.08); background:#fff }
.d-sources-head { display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between; font:600 13px/1.4 var(--sans); color:var(--muted); margin-bottom:18px }
.d-sources ul { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:14px 34px } .d-sources li { display:inline-flex; align-items:center; gap:10px; font:600 15px/1.2 var(--sans); color:var(--body) }
.d-file { display:inline-grid; place-items:center; height:32px; min-width:40px; padding:0 9px; border-radius:8px; background:var(--ink); color:#fff; font:800 12px/1 var(--sans); letter-spacing:.03em } .d-file.x { background:#1d6f42 } .d-file.p { background:#a3231c } .d-file.s { background:#0b5cab } .d-file.o { background:#0f5ea8 }

/* Agent cards */
.d-agent { display:flex; flex-direction:column; border-radius:22px; overflow:hidden; padding:0 } .d-dark.d-agent, .d-dark.d-agent .d-h3 { color:#fff } .d-agent .in { padding:30px 30px 0; display:grid; gap:12px }
.d-agent-top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap } .d-agent-top .k { display:flex; align-items:center; gap:10px; font:700 12px/1 var(--sans); letter-spacing:.08em; color:var(--emerald) } .d-dark .d-agent-top .k { color:var(--mint) }
.d-agent-top .k::before { content:''; width:14px; height:14px; border-radius:4px; border:2.5px solid currentColor; padding:0; box-sizing:border-box } .d-agent-top .k.round::before { border-radius:50% }
.d-agent .go { font:600 14px/1.3 var(--sans); color:var(--emerald) } .d-dark.d-agent .go { color:var(--mint) } a.d-agent:hover .go { text-decoration:underline }

/* Loop */
.d-loop { position:relative; display:grid; gap:14px; perspective:1400px; min-width:0 }
.d-log { background:#fafaf7; border:1px solid rgba(15,23,22,.09); border-radius:16px; padding:16px 18px; box-shadow:0 20px 40px -24px rgba(15,23,22,.3) } .d-log-head { display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font:700 12px/1.3 var(--sans); letter-spacing:.06em; color:var(--muted); text-transform:uppercase } .d-log-head small { font:600 12px/1.3 var(--sans); letter-spacing:0; text-transform:none }
.d-log ul { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:6px; font:500 13px/1.4 var(--sans) } .d-log li { display:flex; justify-content:space-between; gap:10px; padding:8px 10px; background:#fff; border-radius:8px; border:1px solid rgba(15,23,22,.07) }
.d-readas { justify-self:center; display:grid; justify-items:center; gap:4px; font:700 12px/1 var(--sans); letter-spacing:.08em; color:var(--emerald) } .d-readas::before { content:''; width:2px; height:18px; background:linear-gradient(var(--teal),rgba(15,157,138,.2)) }
.d-monday { border-radius:16px; padding:18px 20px; box-shadow:0 30px 60px -24px rgba(15,23,22,.55); display:grid; gap:10px; font:400 14px/1.6 var(--sans) } .d-monday .ask { font:500 13px/1.45 var(--sans); color:#aab3b0 }

/* Compare tables */
.d-tablewrap { margin-top:36px; overflow-x:auto; border:1px solid rgba(15,23,22,.09); border-radius:20px; background:#fff }
.d-table { width:100%; min-width:720px; border-collapse:collapse; font:500 14px/1.45 var(--sans); color:var(--body); text-align:left } .d-table.wide { min-width:920px }
.d-table th, .d-table td { padding:15px 22px; border-top:1px solid rgba(15,23,22,.07); border-left:1px solid rgba(15,23,22,.07); vertical-align:top } .d-table tr > *:first-child { border-left:0; color:var(--ink) } .d-table thead th { border-top:0; font:700 14px/1.35 var(--sans); color:var(--ink) } .d-table thead th small { display:block; font:500 12px/1.4 var(--sans); color:var(--muted) }
.d-table tbody th { font-weight:500 } .d-table .us { background:#f3faf8; color:var(--ink); font-weight:600 } .d-table thead .us, .d-table thead .us small { color:var(--emerald-deep) }

/* How it works */
.d-how { position:relative; display:grid; gap:18px; overflow:hidden; border-radius:28px; padding:32px 28px }
.d-how .lab { font:700 12px/1 var(--sans); letter-spacing:.08em; color:var(--muted) } .d-how-files { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,120px),1fr)); gap:10px }
.d-how-files div { background:#fff; border:1px solid rgba(15,23,22,.12); border-radius:12px; padding:12px; box-shadow:0 14px 30px -18px rgba(15,23,22,.35); display:flex; gap:8px; align-items:center; font:700 12px/1.25 var(--sans) } .d-how-files small { display:block; font-weight:500; color:var(--muted) }
.d-how-rule { background:var(--amber-soft); border-radius:12px; padding:12px 14px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; font:600 13px/1.4 var(--sans) } .d-how-rule b { font:700 12px/1 var(--sans); letter-spacing:.08em; color:var(--amber) }
.d-how-out { border-radius:14px; padding:16px 18px; display:grid; gap:10px; font:400 14px/1.55 var(--sans) }

/* Guided demo: the live try-it component in the two-column layout */
.d-demo { margin-top:36px; background:#fff; border:1px solid rgba(15,23,22,.09); border-radius:24px; box-shadow:0 1px 2px rgba(15,23,22,.04),0 40px 80px -50px rgba(15,23,22,.3); overflow:hidden }
.d-demo .try-it { max-width:none; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,2fr); grid-template-areas:'ctx ctx' 'chips pane' 'chips next' }
.d-demo .try-context { grid-area:ctx; margin:0; padding:16px 26px; border-bottom:1px solid rgba(15,23,22,.08); background:#fafaf7; font:400 14px/1.5 var(--sans); color:var(--body) }
.d-demo .try-chips { grid-area:chips; flex-direction:column; gap:6px; margin:0; padding:22px; background:#fafaf7; border-right:1px solid rgba(15,23,22,.08) }
.d-demo .try-chip { width:100%; border-radius:12px; border-color:transparent; background:transparent; font:500 15px/1.4 var(--sans); color:var(--body); padding:13px 16px }
.d-demo .try-chip:hover { background:#fff } .d-demo .try-chip[aria-pressed="true"] { background:#fff; border-color:rgba(15,23,22,.12); color:var(--ink); font-weight:600; box-shadow:0 8px 20px -14px rgba(15,23,22,.35) }
.d-demo .try-pane { grid-area:pane; border:0; box-shadow:none; padding:28px 32px 8px; background:#fff }
.d-demo .try-q { background:var(--ink); color:#fff; border:0; border-radius:16px 16px 4px 16px; font:500 15px/1.5 var(--sans) } .d-demo .try-a { border:0; padding:0 } .d-demo .try-a > p { font:400 16px/1.65 var(--sans); color:var(--ink) }
.d-demo .try-src { border-top:0; background:var(--emerald-soft); border-radius:14px; padding:0 16px; margin-bottom:10px } .d-demo .try-src summary { font-weight:700; color:var(--ink) } .d-demo .try-tag { background:transparent; padding:0; color:var(--emerald-deep) }
.d-demo .try-src:nth-of-type(2) { background:var(--amber-soft) } .d-demo .try-src:nth-of-type(2) .try-tag { color:var(--amber) } .d-demo .try-src p { color:var(--body) }
.d-demo .try-next { grid-area:next; margin:0; padding:16px 32px 24px; font:400 14px/1.5 var(--sans) }
@media(max-width:820px) { .d-demo .try-it { grid-template-columns:minmax(0,1fr); grid-template-areas:'ctx' 'chips' 'pane' 'next' } .d-demo .try-chips { border-right:0; border-bottom:1px solid rgba(15,23,22,.08); padding:14px } .d-demo .try-pane { padding:18px 16px 4px } .d-demo .try-next { padding:12px 16px 20px } }

/* Films */
.d-films { margin-top:28px } .d-films .film { background:#fff; border:1px solid rgba(15,23,22,.09); border-radius:18px; padding:14px 14px 16px } .d-films .film-frame { border-radius:10px; overflow:hidden }
.d-film-solo { max-width:760px; margin:40px auto 0 } .film-btn, .film-try { border-radius:10px }

/* Proof */
.d-proof { margin-top:clamp(64px,9vw,120px); background:var(--ink); color:#fff } .d-proof .d-p { color:#aab3b0; font-size:16.5px; line-height:1.65; max-width:560px }
.d-quote { margin:0; background:#1b2523; border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:34px; box-shadow:0 40px 80px -30px rgba(0,0,0,.6); display:grid; gap:20px }
.d-quote p.said { font:600 clamp(19px,2.1vw,25px)/1.4 var(--sans); letter-spacing:-.015em; color:#fff } .d-quote .who { font:600 14px/1.4 var(--sans); color:#fff } .d-quote .who small { display:block; font-weight:400; font-size:14px; color:#aab3b0 }
.d-quote .out { padding-top:18px; border-top:1px solid rgba(255,255,255,.1); font:400 13.5px/1.55 var(--sans); color:#aab3b0 } .d-quote .out b { color:#fff; font-weight:600 }
.d-story { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); margin-top:36px; border-radius:24px; overflow:hidden; background:#fff; border:1px solid rgba(15,23,22,.09) } .d-story > div { padding:36px; display:grid; gap:16px; align-content:start } .d-story .d-quote { border-radius:0; border:0; box-shadow:none; background:var(--ink); align-content:center }
.d-founder { display:flex; align-items:center; gap:14px; background:#fff; border:1px solid rgba(15,23,22,.09); border-radius:16px; padding:12px 18px 12px 12px; color:var(--ink); font:700 14px/1.35 var(--sans) } .d-founder:hover { border-color:var(--emerald) } .d-founder i { width:56px; height:56px; border-radius:50%; background:var(--emerald-soft); color:var(--emerald-deep); display:grid; place-items:center; font:700 20px/1 var(--sans); font-style:normal; flex:none } .d-founder small { display:block; font-weight:500; font-size:13px; color:var(--muted) }

/* FAQ */
.d-faq { display:grid; gap:10px } .d-faq details { background:#fff; border:1px solid rgba(15,23,22,.09); border-radius:14px; padding:0 22px }
.d-faq summary { list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:16px 0; min-height:56px; font:600 16px/1.4 var(--sans); color:var(--ink) } .d-faq summary::-webkit-details-marker { display:none }
.d-faq summary::after { content:'+'; flex:none; width:26px; height:26px; border-radius:50%; border:1px solid rgba(15,23,22,.16); display:grid; place-items:center; font:400 15px/1 var(--sans); color:var(--muted) } .d-faq details[open] summary::after { content:'\2212' }
.d-faq details p { margin:0; padding:0 0 20px; max-width:720px; font:400 15px/1.6 var(--sans); color:var(--body) }
.d-faq2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:0 40px; margin-top:28px } .d-faq2 div { padding:20px 0; border-top:1px solid rgba(15,23,22,.12) } .d-faq2 h3 { font:600 16px/1.35 var(--sans); letter-spacing:0; margin:0 0 8px }
@media(min-width:960px) { .d-span2 { grid-column:span 2 } }

/* CTA */
.d-cta { border-radius:28px; padding:clamp(32px,5vw,64px); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:32px; align-items:center } .d-cta.mint { background:var(--emerald-soft) } .d-cta .d-p { max-width:520px; font-size:16px; margin-top:14px !important }
.d-cta .mail { font:400 14px/1.5 var(--sans); color:var(--muted) } .d-dark.d-cta .mail { color:#aab3b0 } .d-cta .mail a { text-decoration:underline; text-underline-offset:3px; color:var(--emerald); display:inline-block; padding:6px 0 } .d-dark.d-cta .mail a { color:var(--mint) }

/* Pricing */
.d-price { position:relative; display:flex; flex-direction:column; border-radius:22px; padding:30px } .d-price .flag { position:absolute; top:-13px; left:30px; background:var(--emerald); color:#fff; font:700 12px/1 var(--sans); letter-spacing:.08em; padding:8px 12px; border-radius:999px }
.d-price .for { margin-top:8px !important; min-height:44px; font:400 14.5px/1.55 var(--sans); color:var(--muted) } .d-dark.d-price .for { color:#aab3b0 }
.d-price .fig { margin-top:20px !important; display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; font:800 44px/1 var(--sans); letter-spacing:-.04em } .d-price .fig small { font:500 14px/1.3 var(--sans); letter-spacing:0; color:var(--muted) } .d-dark.d-price .fig small { color:#aab3b0 }
.d-price dl { margin:22px 0 0 } .d-price dl div { display:flex; justify-content:space-between; gap:14px; padding:12px 0; border-top:1px solid rgba(15,23,22,.08); font:400 14px/1.45 var(--sans) } .d-dark.d-price dl div { border-top-color:rgba(255,255,255,.12) }
.d-price dt { color:var(--muted) } .d-dark.d-price dt { color:#aab3b0 } .d-price dd { margin:0; text-align:right; font-weight:600 }
.d-sticky-col { position:sticky; top:96px } @media(max-width:760px) { .d-sticky-col { position:static } }

/* Fixes after visual check */
.d-table { table-layout:fixed } .d-table th, .d-table td { white-space:normal; overflow-wrap:anywhere }
.d-peek .d-tag, .d-dark .d-peek .d-tag { background:var(--emerald-soft); color:var(--emerald-deep) } .d-peek .d-tag.rule { background:var(--amber-soft); color:var(--amber) } .d-peek .d-tag.grey, .d-dark .d-peek .d-tag.grey { background:var(--ivory); color:var(--body) }
.d-demo .try-q { margin:0 0 16px auto } .d-demo .try-a > p { margin:0 0 16px } .d-demo .try-src p { margin:0; padding:0 0 14px }
.d-page .d-p a, .d-page .d-note a, .d-faq a, .d-table a { display:inline-block; padding:3px 0 }

/* Less is more pass */
.d-agent { justify-content:space-between } .d-agent .in { padding-bottom:22px } .d-agent .d-link { justify-self:start }
.d-agent-film { padding:0 14px 14px } .d-agent-film .film { background:transparent; border:0; padding:0 } .d-agent-film .film-frame { border-radius:12px; overflow:hidden; border:0; box-shadow:none; position:relative }
.d-page .film-frame { background:var(--ink) } .d-page .film-controls { margin:0; padding:8px; gap:8px; background:var(--ink) }
.d-page .film-btn { min-height:44px; padding:8px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.25); background:transparent; color:#fff; font-size:13px } .d-page .film-btn:hover { background:rgba(255,255,255,.12) }
.d-page .film-light .film-btn[aria-pressed="true"].film-sound { background:var(--mint); color:var(--ink); border-color:var(--mint) } .d-page .film-status { color:#aab3b0 }
.d-page .film figcaption { margin-top:10px } .d-page a.film-try { background:transparent; border:0; color:var(--emerald); padding:6px 0; min-height:32px; font:600 14px/1.3 var(--sans); text-decoration:underline; text-underline-offset:4px } .d-dark a.film-try { color:var(--mint) } .d-page a.film-try:hover { background:transparent }

/* Flat, square, quiet: Kavida-style pass */
.d-h1 { font-size:clamp(32px,3.7vw,50px); line-height:1.14; letter-spacing:-.022em } .d-h2 { font-size:clamp(26px,2.9vw,38px); line-height:1.17; letter-spacing:-.02em } .d-h2.sm { font-size:clamp(24px,2.6vw,34px) }
.d-h3.lg { font-size:clamp(22px,2.2vw,28px); line-height:1.25 } .d-lead { font-size:17px; max-width:520px } .d-lead b { font-weight:400; color:var(--body) }
.d-hero { gap:56px 72px; padding-top:clamp(48px,7vw,104px); padding-bottom:clamp(48px,7vw,96px) } .d-hero-bg::before { display:none }
.d-btn { border-radius:4px; min-height:48px; padding:14px 28px } .d-btn:hover, .d-lift:hover { transform:none } .d-lift:hover { box-shadow:none; border-color:rgba(22,22,22,.4) } .d-btn.sm { border-radius:4px }
.d-card, .d-card.xl, .d-demo, .d-cta, .d-quote, .d-story, .d-price, .d-tablewrap, .d-founder, .d-faq details, .d-numlist li, .d-log, .d-monday, .d-logo-chip, .d-how { border-radius:4px; box-shadow:none }
.d-mock-wrap { background:#efefec; padding:clamp(18px,3.4vw,44px); perspective:none } .d-mock-wrap::before { display:none }
.d-mock, .d-tilt-l, .d-tilt-r, .d-tilt-x, .d-tilt-l:hover, .d-tilt-r:hover, .d-tilt-x:hover { transform:none; box-shadow:0 1px 2px rgba(22,22,22,.06); border-radius:6px }
.d-built { border-top:0; padding-top:0; margin-top:36px } .d-logo-chip { border-radius:2px }
.k-rows { border-radius:0; border:0; padding:clamp(64px,8vw,112px) 0 } .k-rows .d-h3 { color:#fff }
.k-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:40px 88px; align-items:center; margin-top:clamp(48px,7vw,96px) }
.k-media .film { background:transparent; border:0; padding:0 } .k-media .film-frame { border:0; border-radius:0; box-shadow:none; overflow:hidden } .k-rows .film-controls { background:#0c0c0c }
@media(min-width:900px) { .k-row.flip > :first-child { order:2 } }
.d-demo .try-chip, .d-demo .try-q, .d-demo .try-src { border-radius:4px } .d-tag, .d-badge, .d-srcrow { border-radius:3px }
.d-films .film, .d-film-solo .film { border-radius:4px } .d-page .film-frame { border-radius:0 } .d-page .film-btn { border-radius:4px }
.d-price .flag { border-radius:2px } .d-proof { margin-top:clamp(64px,8vw,112px) } .d-faq summary::after { border-radius:2px }