/* ---- FLAVOR Descriptions page ---- */

/* hero: mock panel with floating badges */
.dhero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.95fr);gap:clamp(28px,3.4vw,56px);align-items:center}
.dhero>.dcopy{min-width:0;order:1}
.dhero>.dmockwrap{min-width:0;order:2}
@media(max-width:960px){
 .dhero{grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vw,48px)}
 .dhero>.dcopy{order:2}
 .dhero>.dmockwrap{order:1}
}

.dtagline{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.dtagline span{font-family:var(--m);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);padding:5px 11px;border-radius:999px;border:1px solid rgba(255,198,75,.28);background:rgba(255,198,75,.09)}

/* the floating badge stage */
.dmockwrap{position:relative;padding:clamp(30px,4vw,54px) clamp(8px,1.6vw,22px)}
.dmock{position:relative;z-index:2;border-radius:24px;border:1px solid var(--stroke);background:linear-gradient(163deg,rgba(178,212,248,.10) 0%,rgba(44,74,105,.30) 52%,rgba(10,18,30,.42) 100%);backdrop-filter:blur(20px) saturate(140%);box-shadow:var(--inset),0 50px 100px -46px rgba(3,9,18,.95);padding:clamp(18px,2.2vw,26px)}
.dmhead{display:flex;align-items:center;gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(186,216,250,.14)}
.dmicon{flex:0 0 44px;height:44px;border-radius:13px;display:grid;place-items:center;background:linear-gradient(150deg,#4C7DFF,#2E5BD8);box-shadow:0 8px 22px -10px rgba(76,125,255,.8)}
.dmicon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dmhead b{display:block;font-family:var(--d);font-weight:700;font-size:17px;letter-spacing:-.022em;color:var(--ink)}
.dmhead i{display:block;font-style:normal;font-size:13px;color:var(--mut);margin-top:3px}

.dmbefore{margin-top:18px;padding:16px;border-radius:14px;border:1px solid rgba(186,216,250,.14);background:rgba(13,26,42,.62)}
.dmlab{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.dmprod{margin-top:7px;font-family:var(--d);font-weight:700;font-size:16.5px;letter-spacing:-.02em;color:var(--ink)}
.dmlab.warn{margin-top:16px;color:#FF8A80}
.dmempty{margin-top:6px;font-size:14px;font-style:italic;color:#FF8A80;opacity:.85}

.dmwork{margin:18px 0;text-align:center;font-family:var(--d);font-weight:700;font-size:14px;letter-spacing:-.01em;color:var(--gold);animation:dpulse 1.9s ease-in-out infinite}
@keyframes dpulse{0%,100%{opacity:.45}50%{opacity:1}}

.dmafter{padding:16px;border-radius:14px;border:1px solid rgba(52,211,153,.32);background:linear-gradient(140deg,rgba(52,211,153,.10),rgba(52,211,153,.02))}
.dmok{display:flex;align-items:center;gap:8px;font-family:var(--m);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#34D399}
.dmtxt{margin-top:13px;font-size:13.5px;line-height:1.58;color:var(--soft)}
.dmtxt+.dmtxt{margin-top:11px}
.dmtxt b{color:#34D399;font-weight:600}
.dmtick{display:flex;flex-wrap:wrap;gap:14px;margin-top:15px;padding-top:13px;border-top:1px solid rgba(52,211,153,.22);font-size:12.5px;font-weight:600;color:#34D399}

/* the badges themselves */
.dbadge{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;font-family:var(--u);font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 14px 32px -12px rgba(3,9,18,.9);animation:dfloat 6s ease-in-out infinite}
.dbadge svg{width:15px;height:15px;flex:0 0 15px;display:block}
.dbadge i{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:currentColor}
.dbadge.b1{top:6px;left:-6px;background:linear-gradient(135deg,#4C7DFF,#3B6BE8);color:#fff;animation-delay:0s}
.dbadge.b2{top:56px;right:-4px;background:linear-gradient(135deg,#FFD470,var(--gold));color:#14100A;animation-delay:1.1s}
.dbadge.b3{top:44%;left:-16px;background:linear-gradient(135deg,#34D399,#10B981);color:#04231A;animation-delay:2.2s}
.dbadge.b4{bottom:54px;left:14px;background:linear-gradient(135deg,#A855F7,#7C3AED);color:#fff;animation-delay:3.1s}
.dbadge.b5{bottom:6px;right:6px;background:linear-gradient(135deg,#FBBF24,#F59E0B);color:#231604;animation-delay:4.2s}
@keyframes dfloat{0%,100%{transform:translate3d(0,0,0)}33%{transform:translate3d(4px,-9px,0)}66%{transform:translate3d(-3px,5px,0)}}
@media(max-width:560px){
 .dbadge{font-size:11.5px;padding:7px 12px;gap:6px}
 .dbadge.b1{left:-2px}.dbadge.b3{left:-8px}.dbadge.b4{bottom:40px;left:4px}
}
@media(prefers-reduced-motion:reduce){.dbadge,.dmwork{animation:none}}

/* stat strip */
.dstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;margin-top:clamp(34px,4vw,58px);border-radius:18px;overflow:hidden;border:1px solid rgba(186,216,250,.14);background:rgba(186,216,250,.12)}
.dstats div{background:rgba(13,26,42,.7);padding:22px 20px;display:grid;gap:6px;justify-items:center;text-align:center}
.dstats b{font-family:var(--d);font-weight:800;font-size:clamp(28px,3vw,40px);letter-spacing:-.045em;line-height:1;color:var(--gold)}
.dstats span{font-size:13px;color:var(--mut);line-height:1.4}

/* feature cards */
.dfeat{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:clamp(30px,3.6vw,50px)}
.dfeat>div{padding:clamp(22px,2.6vw,30px)}
.dfico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;border:1px solid rgba(76,125,255,.32);background:rgba(76,125,255,.13)}
.dfico svg{width:21px;height:21px;stroke:var(--el-soft);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dfeat>div.g .dfico{border-color:rgba(255,198,75,.34);background:rgba(255,198,75,.13)}
.dfeat>div.g .dfico svg{stroke:var(--gold)}
.dft{margin-top:16px;font-family:var(--d);font-weight:700;font-size:19.5px;letter-spacing:-.026em}
.dfb{margin-top:11px;font-size:14.5px;line-height:1.62;color:var(--soft)}

/* full feature list in columns */
.dcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:clamp(26px,3vw,42px)}
.dcols>div{padding:clamp(20px,2.3vw,26px)}
.dcolt{font-family:var(--d);font-weight:700;font-size:16.5px;letter-spacing:-.022em;color:var(--gold)}
.dcoll{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.dcoll li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;font-size:13.5px;line-height:1.5;color:var(--soft)}
.dcoll li::before{content:'';width:4px;height:4px;margin-top:8px;border-radius:1px;background:var(--el)}

/* providers */
.dprov{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:clamp(26px,3vw,42px)}
.dprov>div{padding:20px;display:grid;gap:12px;align-content:start}
.dpav{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;font-family:var(--d);font-weight:800;font-size:17px;background:rgba(178,212,248,.09);border:1px solid rgba(186,216,250,.18);color:var(--ink)}
.dpan{font-family:var(--d);font-weight:700;font-size:16px;letter-spacing:-.02em}
.dpam{font-family:var(--m);font-size:12.5px;color:var(--mut);line-height:1.5}
.dmore{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.dmore span{font-family:var(--m);font-size:12px;padding:6px 11px;border-radius:8px;border:1px solid rgba(186,216,250,.16);background:rgba(178,212,248,.06);color:var(--mut)}

/* steps */
.dsteps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:clamp(30px,3.6vw,50px)}
.dsteps>div{padding:clamp(22px,2.5vw,28px);position:relative}
.dsn{font-family:var(--d);font-weight:800;font-size:40px;letter-spacing:-.05em;line-height:.85;color:rgba(255,198,75,.34)}
.dst{margin-top:14px;font-family:var(--d);font-weight:700;font-size:18px;letter-spacing:-.024em}
.dsb{margin-top:10px;font-size:14px;line-height:1.6;color:var(--soft)}

/* use cases */
.dcase{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:clamp(30px,3.6vw,50px)}
.dcase>div{padding:clamp(22px,2.5vw,28px)}
.dcat{font-family:var(--d);font-weight:700;font-size:18.5px;letter-spacing:-.024em}
.dcab{margin-top:11px;font-size:14.5px;line-height:1.62;color:var(--soft)}

/* tech grid */
.dtech{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.9fr);gap:18px;margin-top:clamp(30px,3.6vw,50px);align-items:start}
@media(max-width:900px){.dtech{grid-template-columns:minmax(0,1fr)}}
.dtechl{display:grid;gap:12px}
.dtechl>div{padding:16px 18px;border-radius:14px;border:1px solid rgba(186,216,250,.14);background:rgba(44,74,105,.26)}
.dtechl b{display:block;font-family:var(--m);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)}
.dtechl span{display:block;margin-top:7px;font-size:14px;color:var(--soft);line-height:1.5}
.dcode{padding:clamp(18px,2.2vw,24px);font-family:var(--m);font-size:12.5px;line-height:1.75;color:var(--soft);overflow-x:auto}
.dcode .cm{color:var(--faint)}
.dcode .st{color:var(--gold-hi)}
.dcode .ky{color:var(--el-soft)}

/* pricing with billing switch */
.dbill{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px;margin-top:clamp(26px,3vw,40px)}
.dbill button{display:flex;align-items:center;gap:12px;cursor:pointer;border:1px solid var(--stroke);background:rgba(178,212,248,.07);border-radius:999px;padding:7px 16px;font-family:var(--d);font-weight:700;font-size:14px;color:var(--ink);transition:border-color .25s ease,box-shadow .25s ease}
.dbill button:hover{border-color:rgba(255,198,75,.55);box-shadow:0 0 0 4px rgba(255,198,75,.1)}
.dbill .l1{color:var(--gold)}
.dbill .l2{color:var(--faint)}
.dbill[data-year] .l1{color:var(--faint)}
.dbill[data-year] .l2{color:var(--gold)}
.dbill .trk{width:46px;height:26px;border-radius:999px;background:rgba(178,212,248,.10);border:1px solid var(--stroke);position:relative;transition:background .35s ease}
.dbill .trk i{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--faint);transition:transform .35s cubic-bezier(.4,1.3,.4,1),background .35s ease}
.dbill[data-year] .trk{background:rgba(255,198,75,.22)}
.dbill[data-year] .trk i{transform:translateX(20px);background:var(--gold)}
.dbill em{font-style:normal;font-family:var(--m);font-size:12px;padding:6px 12px;border-radius:999px;border:1px solid rgba(52,211,153,.34);background:rgba(52,211,153,.11);color:#34D399}

.dprice{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:clamp(24px,3vw,38px);align-items:stretch}
.dprice>div{padding:clamp(24px,2.8vw,32px);display:grid;grid-template-rows:auto auto auto 1fr auto;align-content:start}
.dpt{font-family:var(--d);font-weight:700;font-size:21px;letter-spacing:-.024em}
.dps{margin-top:5px;font-size:13.5px;color:var(--mut)}
.dpamt{margin-top:18px;display:flex;align-items:baseline;gap:8px}
.dpamt b{font-family:var(--d);font-weight:800;font-size:clamp(36px,3.6vw,48px);letter-spacing:-.045em;line-height:1;color:var(--ink)}
.dpamt span{font-size:14px;color:var(--mut)}
.dpseat{margin-top:9px;font-size:13.5px;color:var(--soft)}
.dpsave{margin-top:7px;font-family:var(--m);font-size:12px;color:#34D399;min-height:18px}
.dpl{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:9px}
.dpl li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:14px;line-height:1.5;color:var(--soft)}
.dpl li::before{content:'✓';font-family:var(--m);font-size:12px;color:var(--gold)}
.dprice .btn{margin-top:24px;width:100%;justify-content:center}
.dprice>div.feat{border-color:rgba(255,198,75,.34);background:linear-gradient(160deg,rgba(255,198,75,.13),rgba(255,198,75,.03));box-shadow:0 40px 90px -50px rgba(255,198,75,.5)}
.dpop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dpop em{font-style:normal;font-family:var(--m);font-size:11px;color:#14100A;background:var(--gold);padding:4px 9px;border-radius:6px}

/* api key options */
.dapi{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:clamp(26px,3vw,42px)}
.dapi>div{padding:clamp(22px,2.6vw,30px);display:grid;grid-template-rows:auto 1fr auto;align-content:start}
.dapit{font-family:var(--d);font-weight:700;font-size:19px;letter-spacing:-.025em}
.dapib{margin-top:12px;font-size:14.5px;line-height:1.62;color:var(--soft)}
.dapil{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.dapil li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;font-size:13.5px;line-height:1.5;color:var(--soft)}
.dapil li::before{content:'✓';font-family:var(--m);font-size:12px;color:var(--gold)}
.dapip{margin-top:20px;padding-top:16px;border-top:1px solid rgba(186,216,250,.16);font-family:var(--d);font-weight:800;font-size:clamp(20px,2vw,26px);letter-spacing:-.036em;color:var(--gold)}
.dapi>div.gold-panel .dapip{border-top-color:rgba(255,198,75,.28)}
.dapip small{display:block;margin-top:6px;font-family:var(--u);font-weight:500;font-size:12.5px;letter-spacing:0;color:var(--faint)}