/* ============================================================
KOBIL Agent Trust Platform — v2 Stylesheet
Design: packages.html patterns + scroll animations + glow
============================================================ */
/* Fonts are loaded via in each page head,
which avoids the render-blocking @import that used to live here. */
/* --- Animated gradient border angle (CSS Houdini) --- */
@property --angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
/* --- Design Tokens — KOBIL brand system --------------------------------
Colours and the fluid sizing scale are taken from the production
kobil.com stylesheet so this site resolves to the same values.
Legacy token names are kept and repointed, so existing rules keep working.
---------------------------------------------------------------------- */
:root {
/* KOBIL brand accents (exact) */
--blue: #2962f6;
--blue-hover: #1046d1;
--cyan: #3ebffc;
--violet: #7029f6;
--pink: #ca80f4;
--green: #1dac76;
--yellow: #f0be48;
--red: #dd2a2e;
/* tinted washes, recomputed against the new accents */
--blue-dim: rgba(41,98,246,0.12);
--cyan-dim: rgba(62,191,252,0.12);
--violet-dim: rgba(112,41,246,0.12);
--pink-dim: rgba(202,128,244,0.12);
--green-dim: rgba(29,172,118,0.12);
--yellow-dim: rgba(240,190,72,0.12);
--red-dim: rgba(221,42,46,0.12);
/* KOBIL system ramp — light end, for light sections */
--system-100: #11244a;
--system-80: #3d4c6a;
--system-70: #4d586e;
--system-60: #b9c1d1;
--system-50: #d5d9e3;
--system-40: #e2e7f2;
--system-30: #eff2f8;
--system-20: #f5f7fc;
--bg-gray: #eef1f7;
--shade-blue: #94b1e8;
--shade-cyan: #b4dff1;
/* ---- LIGHT PAGE, as on kobil.com -------------------------------------
kobil.com is a light field (#eef1f7) carrying white cards, with navy
panels inset for contrast — roughly 57% light / 43% dark by area.
These are the light-surface tokens; the inset navy panels are opted
into with .panel-dark below. ------------------------------------- */
--bg: #eef1f7; /* page field (--color-bg-gray) */
--surface: #ffffff; /* cards */
--surface-2: #f5f7fc; /* --system-20 */
--surface-3: #eff2f8; /* --system-30 */
--border: rgba(17,36,74,0.12);
--border-light: rgba(17,36,74,0.22);
/* text on the light field */
--text: #11244a; /* --system-100 */
--text-secondary: #4d586e; /* --system-70 */
--text-muted: #5c6880;
/* inset dark panel — the other half of kobil.com's rhythm */
--panel-dark: #02133e; /* --color-ai */
--panel-dark-2: #11244a;
--on-dark: #ffffff;
--on-dark-secondary: #b8bdc9;
--on-dark-muted: #8b95a7;
--border-on-dark: rgba(255,255,255,0.12);
/* ---- "ink" accents: accent colours as TEXT on a light surface.
The brand accents are tuned for a dark background and drop to
1.2-1.8:1 on #eef1f7, so text use gets a darkened variant that
clears WCAG AA. Inside a dark or blue panel these flip back to the
bright brand values. ------------------------------------------- */
--cyan-ink: #0b6f9e;
--yellow-ink: #7a5d0f;
--green-ink: #0f7a52;
--blue-ink: #1046d1;
--violet-ink: #5a20c9;
--pink-ink: #9333c9;
--red-ink: #b91c1e;
/* legacy aliases, repointed so old rules keep resolving */
--emerald: var(--green);
--emerald-dim: var(--green-dim);
--amber: var(--yellow);
--amber-dim: var(--yellow-dim);
/* type */
--display: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
/* signature gradient */
--gradient-brand: linear-gradient(90deg,#3ebffc 13.35%,#2962f6 32.36%,#696ef5 59.14%,#ca80f4 84.83%);
/* radii — fluid, matching KOBIL (--w18 resolves to 16px at 1440px) */
--radius: var(--w18);
--radius-sm: var(--w10);
--radius-lg: var(--w24);
--radius-pill: 999px;
/* ---- KOBIL fluid scale ------------------------------------------
--wN: desktop, authored at 1440px where 1 unit = 1px
--mN: mobile, authored at 375px where 1 unit = 1px
------------------------------------------------------------------ */
--w0: clamp(0rem, 0vw, 0rem);
--w1: clamp(.03333rem, .06944vw, .11111rem);
--w2: clamp(.06667rem, .13889vw, .22222rem);
--w3: clamp(.1rem, .20833vw, .33333rem);
--w4: clamp(.13333rem, .27778vw, .44444rem);
--w5: clamp(.16667rem, .34722vw, .55556rem);
--w6: clamp(.2rem, .41667vw, .66667rem);
--w7: clamp(.23333rem, .48611vw, .77778rem);
--w8: clamp(.26667rem, .55556vw, .88889rem);
--w9: clamp(.3rem, .625vw, 1rem);
--w10: clamp(.33333rem, .69444vw, 1.11111rem);
--w11: clamp(.36667rem, .76389vw, 1.22222rem);
--w12: clamp(.4rem, .83333vw, 1.33333rem);
--w13: clamp(.43333rem, .90278vw, 1.44444rem);
--w14: clamp(.46667rem, .97222vw, 1.55556rem);
--w15: clamp(.5rem, 1.04167vw, 1.66667rem);
--w16: clamp(.53333rem, 1.11111vw, 1.77778rem);
--w17: clamp(.56667rem, 1.18056vw, 1.88889rem);
--w18: clamp(.6rem, 1.25vw, 2rem);
--w19: clamp(.63333rem, 1.31944vw, 2.11111rem);
--w20: clamp(.66667rem, 1.38889vw, 2.22222rem);
--w21: clamp(.7rem, 1.45833vw, 2.33333rem);
--w22: clamp(.73333rem, 1.52778vw, 2.44444rem);
--w23: clamp(.76667rem, 1.59722vw, 2.55556rem);
--w24: clamp(.8rem, 1.66667vw, 2.66667rem);
--w25: clamp(.83333rem, 1.73611vw, 2.77778rem);
--w26: clamp(.86667rem, 1.80556vw, 2.88889rem);
--w27: clamp(.9rem, 1.875vw, 3rem);
--w28: clamp(.93333rem, 1.94444vw, 3.11111rem);
--w29: clamp(.96667rem, 2.01389vw, 3.22222rem);
--w30: clamp(1rem, 2.08333vw, 3.33333rem);
--w31: clamp(1.03333rem, 2.15278vw, 3.44444rem);
--w32: clamp(1.06667rem, 2.22222vw, 3.55556rem);
--w33: clamp(1.1rem, 2.29167vw, 3.66667rem);
--w34: clamp(1.13333rem, 2.36111vw, 3.77778rem);
--w35: clamp(1.16667rem, 2.43056vw, 3.88889rem);
--w36: clamp(1.2rem, 2.5vw, 4rem);
--w37: clamp(1.23333rem, 2.56944vw, 4.11111rem);
--w38: clamp(1.26667rem, 2.63889vw, 4.22222rem);
--w39: clamp(1.3rem, 2.70833vw, 4.33333rem);
--w40: clamp(1.33333rem, 2.77778vw, 4.44444rem);
--w41: clamp(1.36667rem, 2.84722vw, 4.55556rem);
--w42: clamp(1.4rem, 2.91667vw, 4.66667rem);
--w43: clamp(1.43333rem, 2.98611vw, 4.77778rem);
--w44: clamp(1.46667rem, 3.05556vw, 4.88889rem);
--w45: clamp(1.5rem, 3.125vw, 5rem);
--w46: clamp(1.53333rem, 3.19444vw, 5.11111rem);
--w47: clamp(1.56667rem, 3.26389vw, 5.22222rem);
--w48: clamp(1.6rem, 3.33333vw, 5.33333rem);
--w49: clamp(1.63333rem, 3.40278vw, 5.44444rem);
--w50: clamp(1.66667rem, 3.47222vw, 5.55556rem);
--w51: clamp(1.7rem, 3.54167vw, 5.66667rem);
--w52: clamp(1.73333rem, 3.61111vw, 5.77778rem);
--w53: clamp(1.76667rem, 3.68056vw, 5.88889rem);
--w54: clamp(1.8rem, 3.75vw, 6rem);
--w55: clamp(1.83333rem, 3.81944vw, 6.11111rem);
--w56: clamp(1.86667rem, 3.88889vw, 6.22222rem);
--w57: clamp(1.9rem, 3.95833vw, 6.33333rem);
--w58: clamp(1.93333rem, 4.02778vw, 6.44444rem);
--w59: clamp(1.96667rem, 4.09722vw, 6.55556rem);
--w60: clamp(2rem, 4.16667vw, 6.66667rem);
--w61: clamp(2.03333rem, 4.23611vw, 6.77778rem);
--w62: clamp(2.06667rem, 4.30556vw, 6.88889rem);
--w63: clamp(2.1rem, 4.375vw, 7rem);
--w64: clamp(2.13333rem, 4.44444vw, 7.11111rem);
--w65: clamp(2.16667rem, 4.51389vw, 7.22222rem);
--w66: clamp(2.2rem, 4.58333vw, 7.33333rem);
--w67: clamp(2.23333rem, 4.65278vw, 7.44444rem);
--w68: clamp(2.26667rem, 4.72222vw, 7.55556rem);
--w69: clamp(2.3rem, 4.79167vw, 7.66667rem);
--w70: clamp(2.33333rem, 4.86111vw, 7.77778rem);
--w71: clamp(2.36667rem, 4.93056vw, 7.88889rem);
--w72: clamp(2.4rem, 5vw, 8rem);
--w73: clamp(2.43333rem, 5.06944vw, 8.11111rem);
--w74: clamp(2.46667rem, 5.13889vw, 8.22222rem);
--w75: clamp(2.5rem, 5.20833vw, 8.33333rem);
--w76: clamp(2.53333rem, 5.27778vw, 8.44444rem);
--w77: clamp(2.56667rem, 5.34722vw, 8.55556rem);
--w78: clamp(2.6rem, 5.41667vw, 8.66667rem);
--w79: clamp(2.63333rem, 5.48611vw, 8.77778rem);
--w80: clamp(2.66667rem, 5.55556vw, 8.88889rem);
--w81: clamp(2.7rem, 5.625vw, 9rem);
--w82: clamp(2.73333rem, 5.69444vw, 9.11111rem);
--w83: clamp(2.76667rem, 5.76389vw, 9.22222rem);
--w84: clamp(2.8rem, 5.83333vw, 9.33333rem);
--w85: clamp(2.83333rem, 5.90278vw, 9.44444rem);
--w86: clamp(2.86667rem, 5.97222vw, 9.55556rem);
--w87: clamp(2.9rem, 6.04167vw, 9.66667rem);
--w88: clamp(2.93333rem, 6.11111vw, 9.77778rem);
--w89: clamp(2.96667rem, 6.18056vw, 9.88889rem);
--w90: clamp(3rem, 6.25vw, 10rem);
--w91: clamp(3.03333rem, 6.31944vw, 10.11111rem);
--w92: clamp(3.06667rem, 6.38889vw, 10.22222rem);
--w93: clamp(3.1rem, 6.45833vw, 10.33333rem);
--w94: clamp(3.13333rem, 6.52778vw, 10.44444rem);
--w95: clamp(3.16667rem, 6.59722vw, 10.55556rem);
--w96: clamp(3.2rem, 6.66667vw, 10.66667rem);
--w97: clamp(3.23333rem, 6.73611vw, 10.77778rem);
--w98: clamp(3.26667rem, 6.80556vw, 10.88889rem);
--w99: clamp(3.3rem, 6.875vw, 11rem);
--w100: clamp(3.33333rem, 6.94444vw, 11.11111rem);
--w106: clamp(3.53333rem, 7.36111vw, 11.77778rem);
--w104: clamp(3.46667rem, 7.22222vw, 11.55556rem);
--w112: clamp(3.73333rem, 7.77778vw, 12.44444rem);
--w120: clamp(4rem, 8.33333vw, 13.33333rem);
--w128: clamp(4.26667rem, 8.88889vw, 14.22222rem);
--w140: clamp(4.66667rem, 9.72222vw, 15.55556rem);
--w150: clamp(5rem, 10.41667vw, 16.66667rem);
--w160: clamp(5.33333rem, 11.11111vw, 17.77778rem);
--w180: clamp(6rem, 12.5vw, 20rem);
--w200: clamp(6.66667rem, 13.88889vw, 22.22222rem);
--w240: clamp(8rem, 16.66667vw, 26.66667rem);
--w280: clamp(9.33333rem, 19.44444vw, 31.11111rem);
--w320: clamp(10.66667rem, 22.22222vw, 35.55556rem);
--m0: clamp(0rem, 0vw, 0rem);
--m1: clamp(.06rem, .26667vw, .128rem);
--m2: clamp(.12rem, .53333vw, .256rem);
--m3: clamp(.18rem, .8vw, .384rem);
--m4: clamp(.24rem, 1.06667vw, .512rem);
--m5: clamp(.3rem, 1.33333vw, .64rem);
--m6: clamp(.36rem, 1.6vw, .768rem);
--m7: clamp(.42rem, 1.86667vw, .896rem);
--m8: clamp(.48rem, 2.13333vw, 1.024rem);
--m9: clamp(.54rem, 2.4vw, 1.152rem);
--m10: clamp(.6rem, 2.66667vw, 1.28rem);
--m11: clamp(.66rem, 2.93333vw, 1.408rem);
--m12: clamp(.72rem, 3.2vw, 1.536rem);
--m13: clamp(.78rem, 3.46667vw, 1.664rem);
--m14: clamp(.84rem, 3.73333vw, 1.792rem);
--m15: clamp(.9rem, 4vw, 1.92rem);
--m16: clamp(.96rem, 4.26667vw, 2.048rem);
--m17: clamp(1.02rem, 4.53333vw, 2.176rem);
--m18: clamp(1.08rem, 4.8vw, 2.304rem);
--m19: clamp(1.14rem, 5.06667vw, 2.432rem);
--m20: clamp(1.2rem, 5.33333vw, 2.56rem);
--m21: clamp(1.26rem, 5.6vw, 2.688rem);
--m22: clamp(1.32rem, 5.86667vw, 2.816rem);
--m23: clamp(1.38rem, 6.13333vw, 2.944rem);
--m24: clamp(1.44rem, 6.4vw, 3.072rem);
--m25: clamp(1.5rem, 6.66667vw, 3.2rem);
--m26: clamp(1.56rem, 6.93333vw, 3.328rem);
--m27: clamp(1.62rem, 7.2vw, 3.456rem);
--m28: clamp(1.68rem, 7.46667vw, 3.584rem);
--m29: clamp(1.74rem, 7.73333vw, 3.712rem);
--m30: clamp(1.8rem, 8vw, 3.84rem);
--m31: clamp(1.86rem, 8.26667vw, 3.968rem);
--m32: clamp(1.92rem, 8.53333vw, 4.096rem);
--m33: clamp(1.98rem, 8.8vw, 4.224rem);
--m34: clamp(2.04rem, 9.06667vw, 4.352rem);
--m35: clamp(2.1rem, 9.33333vw, 4.48rem);
--m36: clamp(2.16rem, 9.6vw, 4.608rem);
--m37: clamp(2.22rem, 9.86667vw, 4.736rem);
--m38: clamp(2.28rem, 10.13333vw, 4.864rem);
--m39: clamp(2.34rem, 10.4vw, 4.992rem);
--m40: clamp(2.4rem, 10.66667vw, 5.12rem);
--m41: clamp(2.46rem, 10.93333vw, 5.248rem);
--m42: clamp(2.52rem, 11.2vw, 5.376rem);
--m43: clamp(2.58rem, 11.46667vw, 5.504rem);
--m44: clamp(2.64rem, 11.73333vw, 5.632rem);
--m45: clamp(2.7rem, 12vw, 5.76rem);
--m46: clamp(2.76rem, 12.26667vw, 5.888rem);
--m47: clamp(2.82rem, 12.53333vw, 6.016rem);
--m48: clamp(2.88rem, 12.8vw, 6.144rem);
--m49: clamp(2.94rem, 13.06667vw, 6.272rem);
--m50: clamp(3rem, 13.33333vw, 6.4rem);
--m51: clamp(3.06rem, 13.6vw, 6.528rem);
--m52: clamp(3.12rem, 13.86667vw, 6.656rem);
--m53: clamp(3.18rem, 14.13333vw, 6.784rem);
--m54: clamp(3.24rem, 14.4vw, 6.912rem);
--m55: clamp(3.3rem, 14.66667vw, 7.04rem);
--m56: clamp(3.36rem, 14.93333vw, 7.168rem);
--m57: clamp(3.42rem, 15.2vw, 7.296rem);
--m58: clamp(3.48rem, 15.46667vw, 7.424rem);
--m59: clamp(3.54rem, 15.73333vw, 7.552rem);
--m60: clamp(3.6rem, 16vw, 7.68rem);
--m61: clamp(3.66rem, 16.26667vw, 7.808rem);
--m62: clamp(3.72rem, 16.53333vw, 7.936rem);
--m63: clamp(3.78rem, 16.8vw, 8.064rem);
--m64: clamp(3.84rem, 17.06667vw, 8.192rem);
--m65: clamp(3.9rem, 17.33333vw, 8.32rem);
--m66: clamp(3.96rem, 17.6vw, 8.448rem);
--m67: clamp(4.02rem, 17.86667vw, 8.576rem);
--m68: clamp(4.08rem, 18.13333vw, 8.704rem);
--m69: clamp(4.14rem, 18.4vw, 8.832rem);
--m70: clamp(4.2rem, 18.66667vw, 8.96rem);
--m71: clamp(4.26rem, 18.93333vw, 9.088rem);
--m72: clamp(4.32rem, 19.2vw, 9.216rem);
--m73: clamp(4.38rem, 19.46667vw, 9.344rem);
--m74: clamp(4.44rem, 19.73333vw, 9.472rem);
--m75: clamp(4.5rem, 20vw, 9.6rem);
--m76: clamp(4.56rem, 20.26667vw, 9.728rem);
--m77: clamp(4.62rem, 20.53333vw, 9.856rem);
--m78: clamp(4.68rem, 20.8vw, 9.984rem);
--m79: clamp(4.74rem, 21.06667vw, 10.112rem);
--m80: clamp(4.8rem, 21.33333vw, 10.24rem);
--m81: clamp(4.86rem, 21.6vw, 10.368rem);
--m82: clamp(4.92rem, 21.86667vw, 10.496rem);
--m83: clamp(4.98rem, 22.13333vw, 10.624rem);
--m84: clamp(5.04rem, 22.4vw, 10.752rem);
--m85: clamp(5.1rem, 22.66667vw, 10.88rem);
--m86: clamp(5.16rem, 22.93333vw, 11.008rem);
--m87: clamp(5.22rem, 23.2vw, 11.136rem);
--m88: clamp(5.28rem, 23.46667vw, 11.264rem);
--m89: clamp(5.34rem, 23.73333vw, 11.392rem);
--m90: clamp(5.4rem, 24vw, 11.52rem);
--m91: clamp(5.46rem, 24.26667vw, 11.648rem);
--m92: clamp(5.52rem, 24.53333vw, 11.776rem);
--m93: clamp(5.58rem, 24.8vw, 11.904rem);
--m94: clamp(5.64rem, 25.06667vw, 12.032rem);
--m95: clamp(5.7rem, 25.33333vw, 12.16rem);
--m96: clamp(5.76rem, 25.6vw, 12.288rem);
--m97: clamp(5.82rem, 25.86667vw, 12.416rem);
--m98: clamp(5.88rem, 26.13333vw, 12.544rem);
--m99: clamp(5.94rem, 26.4vw, 12.672rem);
--m100: clamp(6rem, 26.66667vw, 12.8rem);
--m106: clamp(6.36rem, 28.26667vw, 13.568rem);
--m104: clamp(6.24rem, 27.73333vw, 13.312rem);
--m112: clamp(6.72rem, 29.86667vw, 14.336rem);
--m120: clamp(7.2rem, 32vw, 15.36rem);
--m128: clamp(7.68rem, 34.13333vw, 16.384rem);
--m140: clamp(8.4rem, 37.33333vw, 17.92rem);
--m150: clamp(9rem, 40vw, 19.2rem);
--m160: clamp(9.6rem, 42.66667vw, 20.48rem);
--m180: clamp(10.8rem, 48vw, 23.04rem);
--m200: clamp(12rem, 53.33333vw, 25.6rem);
--m240: clamp(14.4rem, 64vw, 30.72rem);
--m280: clamp(16.8rem, 74.66667vw, 35.84rem);
--m320: clamp(19.2rem, 85.33333vw, 40.96rem);
}
/* ============================================================
INSET DARK PANEL — kobil.com's second surface
A section that opts into .panel-dark becomes a navy rounded panel
floating on the light field, and re-points the text/border tokens
inside itself so existing rules keep working unchanged.
============================================================ */
.panel-dark {
--surface: var(--panel-dark-2);
--surface-2: #16305e;
--surface-3: #1a2f5e;
--text: var(--on-dark);
--text-secondary: var(--on-dark-secondary);
--text-muted: var(--on-dark-muted);
--border: var(--border-on-dark);
--border-light: rgba(255,255,255,0.24);
background: var(--panel-dark);
color: var(--on-dark);
border-radius: var(--radius);
/* kobil.com: 15px radius, 16.67px gap between panels, 33.33px inner padding */
margin: var(--w17) 0 0;
padding: var(--w33);
}
.panel-dark h1, .panel-dark h2, .panel-dark h3,
.panel-dark h4, .panel-dark h5, .panel-dark h6 { color: var(--on-dark); }
.panel-dark p, .panel-dark li { color: var(--on-dark-secondary); }
@media (max-width: 768px) {
.panel-dark { margin: var(--m24) var(--m12); padding: var(--m40) var(--m20); }
}
/* --- Reset --- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Headings use the display face (Instrument Sans), body copy uses Inter —
the same split kobil.com applies. Weights capped at 700 to match. */
h1, h2, h3, h4, h5, h6 {
font-family: var(--display);
letter-spacing: -0.01em;
}
h1, h2 { font-weight: 700; }
h3, h4, h5, h6 { font-weight: 600; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
line-height: 1.6;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
a { color: var(--blue); text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #5b87f8; }
img, svg { max-width: 100%; height: auto; display: block; }
/* ============================================================
SCROLL-DRIVEN FADE-IN ANIMATIONS
============================================================ */
@keyframes fadeSlideUp {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeSlideLeft {
from { opacity: 0; transform: translateX(-24px); }
to { opacity: 1; transform: translateX(0); }
}
/* Scroll-triggered entrance: fade up when element enters viewport */
.animate-in {
opacity: 0;
animation: fadeSlideUp 0.7s ease both;
animation-timeline: view();
animation-range: entry 0% entry 30%;
}
/* Fallback for browsers without scroll-driven animations */
@supports not (animation-timeline: view()) {
.animate-in {
opacity: 0;
transform: translateY(32px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-in.visible {
opacity: 1;
transform: translateY(0);
}
}
/* Staggered delays for grid children */
.stagger > :nth-child(1) { animation-delay: 0s; }
.stagger > :nth-child(2) { animation-delay: 0.08s; }
.stagger > :nth-child(3) { animation-delay: 0.16s; }
.stagger > :nth-child(4) { animation-delay: 0.24s; }
.stagger > :nth-child(5) { animation-delay: 0.32s; }
.stagger > :nth-child(6) { animation-delay: 0.4s; }
.stagger > :nth-child(7) { animation-delay: 0.48s; }
.stagger > :nth-child(8) { animation-delay: 0.56s; }
/* ============================================================
ROTATING GRADIENT BORDER (on hover)
============================================================ */
@keyframes rotateBorder {
to { --angle: 360deg; }
}
.glow-border {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.glow-border:hover {
border-color: transparent;
box-shadow:
0 0 0 1px var(--border),
0 0 40px -12px rgba(41,98,246,0.15),
0 18px 40px -18px rgba(17,36,74,0.22);
transform: translateY(-3px);
}
.glow-border::before {
content: '';
position: absolute;
inset: -1px;
border-radius: var(--radius);
background: conic-gradient(from var(--angle), var(--blue), var(--violet), var(--cyan), var(--blue));
z-index: -1;
opacity: 0;
transition: opacity 0.4s ease;
}
.glow-border:hover::before {
opacity: 1;
animation: rotateBorder 3s linear infinite;
}
/* ============================================================
NAVIGATION — glassmorphism from packages.html
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
background: rgba(238,241,247,0.82);
backdrop-filter: blur(16px) saturate(180%);
-webkit-backdrop-filter: blur(16px) saturate(180%);
border-bottom: 1px solid var(--border);
}
.nav-container {
margin: 0 auto;
padding: 0 var(--w41); /* kobil.com uses 40.83px horizontal */
display: flex;
align-items: center;
height: 80px;
}
.nav-logo {
font-size: 24px;
font-weight: 700;
color: var(--text);
letter-spacing: -0.02em;
white-space: nowrap;
}
.nav-logo span { color: var(--blue); }
.nav-links {
display: flex;
gap: 4px;
list-style: none;
margin-left: auto;
margin-right: auto;
}
.nav-links a {
display: block;
padding: 10px 20px;
color: var(--text-secondary);
font-size: 16px;
font-weight: 600;
border-radius: var(--radius-sm);
transition: all 0.2s ease;
border: 1px solid transparent;
}
.nav-links a:hover {
color: var(--text);
background: var(--surface-2);
border-color: var(--border);
}
.nav-links a.active {
color: var(--blue);
background: var(--blue-dim);
border-color: rgba(41,98,246,0.2);
}
.nav-cta {
padding: 12px 28px;
background: var(--blue);
color: #fff !important;
font-size: 16px;
font-weight: 700;
border-radius: var(--radius-pill);
border: none;
cursor: pointer;
transition: all 0.25s ease;
white-space: nowrap;
box-shadow: 0 0 16px -4px rgba(41,98,246,0.4);
}
.nav-cta:hover {
background: #1046d1;
transform: translateY(-1px);
box-shadow: 0 0 24px -4px rgba(41,98,246,0.6);
color: #fff;
}
.nav-toggle {
display: none;
background: none;
border: none;
color: var(--text);
font-size: 24px;
cursor: pointer;
padding: 4px;
}
/* ============================================================
HERO — radial gradient orbs from packages.html
============================================================ */
.hero {
position: relative;
padding: 100px 32px 80px;
text-align: center;
overflow: hidden;
max-width: 960px;
margin: 0 auto;
}
/* Animated gradient orbs */
.hero::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 600px 400px at 50% 0%, rgba(41,98,246,0.1) 0%, transparent 70%),
radial-gradient(ellipse 400px 300px at 25% 20%, rgba(112,41,246,0.08) 0%, transparent 70%),
radial-gradient(ellipse 400px 300px at 75% 20%, rgba(62,191,252,0.08) 0%, transparent 70%);
pointer-events: none;
opacity: 0.8;
}
.hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 600;
color: var(--blue);
background: var(--blue-dim);
border: 1px solid rgba(41,98,246,0.2);
padding: 6px 16px;
border-radius: var(--radius-pill);
margin-bottom: 28px;
letter-spacing: 0.05em;
text-transform: uppercase;
animation: fadeSlideUp 0.6s ease both;
}
.hero h1 {
font-size: clamp(2.5rem, 5.5vw, 4rem);
font-weight: 700;
letter-spacing: -0.04em;
line-height: 1.1;
margin-bottom: 20px;
position: relative;
animation: fadeSlideUp 0.7s ease 0.1s both;
}
/* Gradient text from packages.html */
.hero h1 .gradient {
background: linear-gradient(135deg, var(--blue) 0%, var(--violet) 50%, var(--cyan) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: clamp(1rem, 2vw, 1.2rem);
color: var(--text-secondary);
line-height: 1.7;
max-width: 620px;
margin: 0 auto 32px;
position: relative;
animation: fadeSlideUp 0.7s ease 0.2s both;
}
.hero-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
position: relative;
animation: fadeSlideUp 0.7s ease 0.3s both;
}
.btn-primary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: var(--blue);
color: #fff;
font-size: 16px;
font-weight: 600;
/* pill, as on kobil.com */
border-radius: var(--radius-pill);
border: none;
cursor: pointer;
transition: all 0.25s ease;
box-shadow: 0 0 20px -4px rgba(41,98,246,0.4);
}
.btn-primary:hover {
background: #1046d1;
transform: translateY(-2px);
box-shadow: 0 0 32px -4px rgba(41,98,246,0.6);
color: #fff;
}
.btn-secondary {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 28px;
background: var(--surface-2);
color: var(--text);
font-size: 16px;
font-weight: 600;
border-radius: var(--radius-pill);
border: 1px solid var(--border);
cursor: pointer;
transition: all 0.25s ease;
}
.btn-secondary:hover {
background: var(--surface-3);
border-color: var(--border-light);
transform: translateY(-2px);
color: var(--text);
}
/* ============================================================
LAYOUT
============================================================ */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section {
padding: 64px 24px;
max-width: 1200px;
margin: 0 auto;
}
.section-header { margin-bottom: 40px; }
.section-header h2 {
font-size: clamp(1.8rem, 4vw, 2.8rem);
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 10px;
}
.section-header p {
font-size: 1.2rem;
color: var(--text-secondary);
max-width: 700px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Section divider with label tag (from packages.html) */
.section-divider {
border: none;
border-top: 1px solid var(--border);
margin: 0;
}
.section-label {
display: flex;
align-items: center;
gap: 16px;
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
}
.section-label-tag {
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 6px 16px;
border-radius: var(--w8);
white-space: nowrap;
}
.section-label-tag.blue { color: var(--blue); background: var(--blue-dim); }
.section-label-tag.violet { color: var(--violet); background: var(--violet-dim); }
.section-label-tag.cyan { color: var(--cyan); background: var(--cyan-dim); }
.section-label-tag.red { color: var(--red); background: var(--red-dim); }
.section-label-tag.emerald { color: var(--emerald); background: var(--emerald-dim); }
.section-label-tag.amber { color: var(--amber); background: var(--amber-dim); }
.section-label-line { flex: 1; height: 1px; background: var(--border); }
/* ============================================================
STAT CARDS — with glow pulse
============================================================ */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 16px;
}
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 28px 20px;
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.stat-card:hover { border-color: var(--border-light); transform: translateY(-3px); }
.stat-card:hover::before { opacity: 0.5; }
.stat-card:nth-child(1)::before { background: radial-gradient(ellipse at 50% 0%, var(--blue-dim), transparent 70%); }
.stat-card:nth-child(2)::before { background: radial-gradient(ellipse at 50% 0%, var(--violet-dim), transparent 70%); }
.stat-card:nth-child(3)::before { background: radial-gradient(ellipse at 50% 0%, var(--emerald-dim), transparent 70%); }
.stat-card:nth-child(4)::before { background: radial-gradient(ellipse at 50% 0%, var(--red-dim), transparent 70%); }
.stat-number {
font-size: 2.2rem;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 6px;
position: relative;
}
.stat-label {
font-size: 14px;
color: var(--text-muted);
line-height: 1.4;
}
/* Glow pulse on stat numbers — static glow, no infinite animation */
.stat-number { text-shadow: 0 0 12px currentColor; }
/* ============================================================
CARDS — with packages.html radial gradient header
============================================================ */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 20px;
}
.card-grid-3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card-grid-2 { grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); }
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.card::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.card:hover {
border-color: var(--border-light);
transform: translateY(-3px);
box-shadow: 0 18px 40px -18px rgba(17,36,74,0.22);
}
.card:hover::before { opacity: 0.5; }
/* Color-coded radial glow on card hover (from packages.html card-top::before) */
.accent-blue::before { background: radial-gradient(ellipse at 0% 0%, var(--blue-dim), transparent 60%); }
.accent-violet::before { background: radial-gradient(ellipse at 0% 0%, var(--violet-dim), transparent 60%); }
.accent-cyan::before { background: radial-gradient(ellipse at 0% 0%, var(--cyan-dim), transparent 60%); }
.accent-red::before { background: radial-gradient(ellipse at 0% 0%, var(--red-dim), transparent 60%); }
.accent-emerald::before { background: radial-gradient(ellipse at 0% 0%, var(--emerald-dim), transparent 60%); }
.accent-amber::before { background: radial-gradient(ellipse at 0% 0%, var(--amber-dim), transparent 60%); }
.accent-blue { border-left: 3px solid var(--blue); }
.accent-violet { border-left: 3px solid var(--violet); }
.accent-cyan { border-left: 3px solid var(--cyan); }
.accent-red { border-left: 3px solid var(--red); }
.accent-emerald { border-left: 3px solid var(--emerald); }
.accent-amber { border-left: 3px solid var(--amber); }
.card h3 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.01em;
position: relative;
}
.card p {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.6;
position: relative;
text-align: justify;
hyphens: auto;
}
/* ============================================================
INCIDENT CARDS
============================================================ */
.incident-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--red);
border-radius: var(--radius);
padding: 16px 20px;
margin-bottom: 10px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.incident-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 0% 50%, var(--red-dim), transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.incident-card:hover { border-color: var(--border-light); transform: translateX(4px); }
.incident-card:hover::before { opacity: 0.5; }
.incident-card strong { color: var(--text); position: relative; }
.incident-card p { font-size: 1rem; color: var(--text-secondary); line-height: 1.5; margin: 0; position: relative; text-align: justify; hyphens: auto; }
/* ============================================================
TABLES
============================================================ */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-radius: var(--radius);
border: 1px solid var(--border);
}
table { width: 100%; border-collapse: collapse; font-size: 1rem; }
thead { background: var(--surface-2); position: sticky; top: 0; }
th {
padding: 14px 20px;
text-align: left;
font-weight: 700;
font-size: 0.85rem;
letter-spacing: 0.03em;
color: var(--text);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
td {
padding: 12px 20px;
border-bottom: 1px solid var(--border);
color: var(--text-secondary);
vertical-align: top;
text-align: left;
line-height: 1.65;
}
tr:last-child td { border-bottom: none; }
tbody tr:nth-child(even) { background: var(--surface); }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: var(--surface-2); }
td strong, td b { color: var(--text); font-weight: 700; }
/* ============================================================
CODE / MONO
============================================================ */
code, .mono {
font-family: var(--mono);
font-size: 0.875rem;
background: rgba(17,36,74,.06);
padding: 2px 6px;
border-radius: var(--w4);
color: #1046d1;
}
/* ============================================================
DIAGRAM EMBED
============================================================ */
.diagram-container {
background: #fff;
border-radius: var(--radius);
padding: 24px;
overflow-x: auto;
box-shadow: 0 0 60px -20px rgba(41,98,246,0.1);
}
.diagram-container svg { display: block; max-width: 100%; height: auto; margin: 0 auto; }
/* ============================================================
LINK CARDS (quick navigation)
============================================================ */
.link-card {
display: flex;
align-items: center;
gap: 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px 24px;
transition: all 0.3s ease;
color: var(--text);
position: relative;
overflow: hidden;
}
.link-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 0% 50%, var(--blue-dim), transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.link-card:hover {
border-color: var(--blue);
transform: translateY(-3px);
box-shadow: 0 0 30px -10px rgba(41,98,246,0.2);
color: var(--text);
}
.link-card:hover::before { opacity: 0.6; }
.link-card .arrow { margin-left: auto; color: var(--text-muted); font-size: 20px; transition: all 0.3s ease; position: relative; }
.link-card:hover .arrow { transform: translateX(6px); color: var(--blue); }
.link-card h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 2px; position: relative; }
.link-card p { font-size: 0.9rem; color: var(--text-secondary); margin: 0; position: relative; text-align: justify; hyphens: auto; }
/* ============================================================
USE CASE CARDS
============================================================ */
.usecase-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.usecase-card::before {
content: '';
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.usecase-card:hover { border-color: var(--border-light); transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(17,36,74,0.22); }
.usecase-card:hover::before { opacity: 0.5; }
/* Inherit accent color radial glow */
.usecase-card.accent-blue::before { background: radial-gradient(ellipse at 0% 0%, var(--blue-dim), transparent 60%); }
.usecase-card.accent-violet::before { background: radial-gradient(ellipse at 0% 0%, var(--violet-dim), transparent 60%); }
.usecase-card.accent-cyan::before { background: radial-gradient(ellipse at 0% 0%, var(--cyan-dim), transparent 60%); }
.usecase-card.accent-red::before { background: radial-gradient(ellipse at 0% 0%, var(--red-dim), transparent 60%); }
.usecase-card.accent-emerald::before { background: radial-gradient(ellipse at 0% 0%, var(--emerald-dim), transparent 60%); }
.usecase-card.accent-amber::before { background: radial-gradient(ellipse at 0% 0%, var(--amber-dim), transparent 60%); }
.usecase-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: -0.01em;
position: relative;
}
.usecase-card .companies {
font-family: var(--mono);
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 10px;
font-weight: 500;
position: relative;
}
.usecase-card p {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 12px;
position: relative;
text-align: justify;
hyphens: auto;
}
.platform-fit {
padding: 10px 14px;
background: var(--surface-2);
border-radius: var(--radius-sm);
font-size: 0.875rem;
color: var(--text-muted);
font-style: italic;
border-left: 2px solid var(--blue);
position: relative;
}
/* ============================================================
REGULATION BLOCKS
============================================================ */
.regulation-block {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 16px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.regulation-block::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 0% 0%, var(--violet-dim), transparent 60%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.regulation-block:hover { border-color: var(--border-light); }
.regulation-block:hover::before { opacity: 0.4; }
.regulation-block h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; position: relative; }
.regulation-block .subtitle { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 12px; position: relative; }
.regulation-block p, .regulation-block li { font-size: 1rem; color: var(--text-secondary); line-height: 1.7; position: relative; text-align: justify; hyphens: auto; }
.regulation-block ul, .regulation-block ol { padding-left: 20px; margin-top: 8px; position: relative; }
.regulation-block li { margin-bottom: 4px; }
/* ============================================================
SDK PACKAGE CARDS (from packages.html card pattern)
============================================================ */
.sdk-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.sdk-card:hover {
border-color: var(--border-light);
transform: translateY(-3px);
box-shadow: 0 0 0 1px var(--border), 0 18px 40px -18px rgba(17,36,74,0.22);
}
/* Card top with radial glow (packages.html pattern) */
.sdk-card-top {
padding: 24px;
border-bottom: 1px solid var(--border);
position: relative;
overflow: hidden;
}
.sdk-card-top::before {
content: '';
position: absolute;
inset: 0;
opacity: 0.5;
pointer-events: none;
}
.sdk-card.accent-blue .sdk-card-top::before { background: radial-gradient(ellipse at 0% 50%, var(--blue-dim), transparent 60%); }
.sdk-card.accent-violet .sdk-card-top::before { background: radial-gradient(ellipse at 0% 50%, var(--violet-dim), transparent 60%); }
.sdk-card.accent-cyan .sdk-card-top::before { background: radial-gradient(ellipse at 0% 50%, var(--cyan-dim), transparent 60%); }
.sdk-card.accent-red .sdk-card-top::before { background: radial-gradient(ellipse at 0% 50%, var(--red-dim), transparent 60%); }
.sdk-card.accent-emerald .sdk-card-top::before { background: radial-gradient(ellipse at 0% 50%, var(--emerald-dim), transparent 60%); }
/* Scope badge (from packages.html card-scope) */
.sdk-scope {
font-family: var(--mono);
font-size: 0.8rem;
font-weight: 600;
padding: 4px 12px;
border-radius: var(--w8);
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 8px;
position: relative;
}
.sdk-scope .dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.accent-blue .sdk-scope { color: var(--blue); background: var(--blue-dim); }
.accent-blue .dot { background: var(--blue); }
.accent-violet .sdk-scope { color: var(--violet); background: var(--violet-dim); }
.accent-violet .dot { background: var(--violet); }
.accent-cyan .sdk-scope { color: var(--cyan); background: var(--cyan-dim); }
.accent-cyan .dot { background: var(--cyan); }
.accent-red .sdk-scope { color: var(--red); background: var(--red-dim); }
.accent-red .dot { background: var(--red); }
.accent-emerald .sdk-scope { color: var(--emerald); background: var(--emerald-dim); }
.accent-emerald .dot { background: var(--emerald); }
.sdk-card h3 {
font-size: 1.4rem;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 6px;
position: relative;
}
.sdk-card .sdk-desc {
font-size: 1rem;
color: var(--text-secondary);
line-height: 1.5;
position: relative;
text-align: justify;
hyphens: auto;
}
/* Lang tags (from packages.html) */
.lang-tags { display: flex; gap: 6px; margin-top: 10px; position: relative; }
.lang-tag {
font-family: var(--mono);
font-size: 0.7rem;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--w8);
background: var(--surface-3);
color: var(--text-muted);
border: 1px solid var(--border);
}
/* Feature list in SDK cards */
.sdk-features {
list-style: none;
padding: 0;
}
.sdk-features li {
padding: 8px 24px;
border-bottom: 1px solid var(--border);
font-size: 0.95rem;
color: var(--text-secondary);
transition: background 0.15s ease;
padding-left: 40px;
position: relative;
}
.sdk-features li:last-child { border-bottom: none; }
.sdk-features li:hover { background: var(--surface-2); }
.sdk-features li::before {
content: '\2192';
position: absolute;
left: 20px;
color: var(--text-muted);
}
/* ============================================================
SERVICE CARDS
============================================================ */
.service-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.service-card::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse at 50% 0%, rgba(41,98,246,0.06), transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.service-card:hover { border-color: var(--border-light); transform: translateY(-2px); }
.service-card:hover::before { opacity: 1; }
.service-card .service-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
background: var(--surface-3);
border-radius: 50%;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-muted);
margin-bottom: 10px;
}
.service-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 3px; }
.service-card .port { font-family: var(--mono); font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px; }
.service-card .kobil-badge {
font-family: var(--mono);
font-size: 0.65rem;
font-weight: 700;
color: var(--blue);
background: var(--blue-dim);
padding: 2px 8px;
border-radius: var(--w4);
margin-left: 6px;
letter-spacing: 0.04em;
}
.service-card p { font-size: 0.95rem; color: var(--text-secondary); line-height: 1.5; text-align: justify; hyphens: auto; }
/* ============================================================
CALLOUT / QUOTE BLOCK
============================================================ */
.callout {
position: relative;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 32px;
text-align: center;
overflow: hidden;
}
.callout::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 30% 50%, var(--blue-dim), transparent 50%),
radial-gradient(ellipse at 70% 50%, var(--violet-dim), transparent 50%);
opacity: 0.6;
pointer-events: none;
}
.callout p {
font-size: 1.15rem;
color: var(--text);
line-height: 1.7;
max-width: 700px;
margin: 0 auto;
position: relative;
text-align: center;
}
/* ============================================================
FOOTER
============================================================ */
/* Footer as a floating rounded panel, mirroring kobil.com's card-on-page
architecture. kobil.com sets a dark #02133e panel on a light field; this
site is dark throughout, so the panel is lifted one step to --surface-2
against the --bg page so the same shape still reads. */
.site-footer {
background: var(--panel-dark);
color: var(--on-dark-secondary);
border-radius: var(--radius);
padding: var(--w48) var(--w40) var(--w32);
margin: var(--w64) var(--w20) var(--w20);
}
@media (max-width: 768px) {
.site-footer {
padding: var(--m40) var(--m24) var(--m28);
margin: var(--m40) var(--m12) var(--m12);
}
}
.footer-container { max-width: 1200px; margin: 0 auto; }
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 40px;
margin-bottom: 40px;
}
.footer-brand .nav-logo { margin-bottom: 12px; }
.footer-brand p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; max-width: 300px; text-align: justify; hyphens: auto; }
.footer-col h4 {
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
margin-bottom: 16px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { font-size: 0.9rem; color: var(--text-secondary); transition: color 0.2s ease; }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
color: var(--text-muted);
}
/* ============================================================
FRAMEWORK GRID (pill cards)
============================================================ */
.fw-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.fw-pill {
padding: 10px 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-secondary);
transition: all 0.25s ease;
}
.fw-pill:hover {
border-color: var(--blue);
color: var(--text);
background: var(--blue-dim);
transform: translateY(-2px);
box-shadow: 0 0 20px -8px rgba(41,98,246,0.3);
}
/* ============================================================
RESPONSIVE
============================================================ */
/* The nav collapses at 1060px: the compacted eight-item row first fits at
1050px, measured, so this leaves a little headroom. Layout rules that are genuinely phone-sized stay at 768. */
@media (max-width: 1060px) {
.nav-links { display: none; }
.nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: 64px;
left: 0;
right: 0;
background: rgba(238,241,247,0.97);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
padding: 16px 24px;
gap: 0;
z-index: 60;
}
.nav-links.open a { padding: 12px 0; }
.nav-toggle { display: block; margin-left: auto; }
.nav-cta { display: none; }
}
@media (max-width: 768px) {
.hero { padding: 60px 20px 48px; }
.section { padding: 40px 16px; }
.card-grid, .card-grid-2, .card-grid-3 { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: repeat(2, 1fr); }
.footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
.footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
.hero-actions { flex-direction: column; align-items: center; }
.fw-grid { justify-content: center; }
}
@media (max-width: 480px) {
.stats-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
}
/* ============================================================
FALLBACK INTERSECTION OBSERVER SCRIPT SUPPORT
============================================================ */
/* The animate-in class works natively with scroll-driven animations.
For Safari/Firefox fallback, add this small JS at the end of each page:
*/
/* ============================================================
REDUCED MOTION — respect user preference, kill all animation
============================================================ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.animate-in { opacity: 1; transform: none; }
.glow-border:hover { transform: none; }
.card:hover, .stat-card:hover, .link-card:hover,
.usecase-card:hover, .fw-pill:hover { transform: none; }
}
/* --- nav: never wrap labels; tighten spacing at mid widths so all items fit
before the 768px mobile (hamburger) breakpoint --- */
.nav-links a { white-space: nowrap; }
/* Seven nav items need ~1110px at full size but only ~940px compacted, and the
band below only reached 1080 - which is why 1100px overflowed while 1050px
did not. It now spans the whole range between full size and the hamburger. */
@media (max-width: 1280px) and (min-width: 1061px) {
.nav-container { padding: 0 20px; }
.nav-links a { padding: 9px 12px; font-size: 15px; }
.nav-cta { padding: 10px 18px; font-size: 15px; }
}
/* footer sits on the navy panel, so its type follows the on-dark tokens */
.site-footer h4, .site-footer .footer-brand, .site-footer strong { color: var(--on-dark); }
.site-footer a { color: var(--on-dark-secondary); }
.site-footer a:hover { color: var(--on-dark); }
.site-footer .footer-bottom, .site-footer .footer-legal { color: var(--on-dark-muted); }
.site-footer hr, .site-footer .footer-divider { border-color: rgba(255,255,255,0.12); }
.site-footer .nav-logo { color: var(--on-dark); }
.site-footer .footer-brand p { color: var(--on-dark-secondary); }
.site-footer code { background: rgba(255,255,255,.10); color: var(--shade-cyan); }
/* ============================================================
KOBIL.COM PAGE ARCHITECTURE
Every section is a rounded panel stacked on the #eef1f7 field:
radius 15px, 16.67px gap, 33.33px inner padding, 1133px wide
inside a 1200px container. Measured off production kobil.com.
============================================================ */
.kobil-shell { max-width: 1200px; margin: 0 auto; padding: 0 var(--w33); }
.panel {
background: var(--surface);
border-radius: var(--radius);
margin: var(--w17) 0 0;
padding: var(--w33);
}
.panel + .panel { margin-top: var(--w17); }
@media (max-width: 768px) {
.kobil-shell { padding: 0 var(--m16); }
.panel, .panel-dark { margin: var(--m12) 0 0; padding: var(--m24); }
}
/* Eyebrow label — Inter 700 / 10px / .48px tracking, no pill.
Measured off kobil.com; it is a plain caps label, not a chip. */
.kobil-eyebrow {
display: block;
font-family: var(--sans);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.48px;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: var(--w12);
}
.panel-dark .kobil-eyebrow { color: rgba(255,255,255,0.6); }
/* Transparent overlay header, as on kobil.com */
.site-header.overlay {
position: absolute;
background: transparent;
backdrop-filter: none;
border-bottom: 0;
padding: var(--w17) var(--w33);
}
/* footer legal row — mirrors kobil.com's corporate block */
.footer-legal {
display: flex; flex-wrap: wrap; gap: var(--w20);
padding-top: var(--w20); margin-top: var(--w20);
border-top: 1px solid rgba(255,255,255,0.12);
font-size: 0.85rem;
}
.footer-legal a { color: var(--on-dark-secondary); }
.footer-legal a:hover { color: var(--on-dark); }
.footer-eig { color: var(--on-dark-muted); font-size: 0.82rem; letter-spacing: .04em; }
/* Cards nested inside a navy panel are themselves dark, as on kobil.com's
"OUR TECHNOLOGIES" panel — otherwise a white card inherits the panel's
white type tokens and the text disappears. */
.panel-dark .card-bg,
.panel-dark .step-card .card-bg,
.panel-dark .fx-stat-card .card-bg {
background: rgba(255,255,255,0.04) !important;
border-color: rgba(255,255,255,0.12) !important;
}
.panel-dark .step-card,
.panel-dark .fx-stat-card { color: var(--on-dark); }
.panel-dark .step-card h3,
.panel-dark .fx-stat-card h3 { color: var(--on-dark); }
.panel-dark .step-card p,
.panel-dark .fx-stat-card p { color: var(--on-dark-secondary); }
.panel-dark .step-num { color: rgba(255,255,255,0.10); }
/* ============================================================
BLUE PANEL — kobil.com's third surface
Large vivid-blue panels carrying white display type, used for
product/feature blocks. Same geometry as .panel / .panel-dark.
============================================================ */
.panel-blue {
--surface: rgba(255,255,255,.10);
--surface-2: rgba(255,255,255,.14);
--text: #ffffff;
--text-secondary: rgba(255,255,255,.82);
--text-muted: rgba(255,255,255,.62);
--border: rgba(255,255,255,.20);
--border-light: rgba(255,255,255,.32);
background: var(--blue);
color: #ffffff;
border-radius: var(--radius);
margin: var(--w17) 0 0;
padding: var(--w33);
}
.panel-blue h1, .panel-blue h2, .panel-blue h3,
.panel-blue h4, .panel-blue h5, .panel-blue h6 { color: #ffffff; }
.panel-blue p, .panel-blue li { color: rgba(255,255,255,.82); }
.panel-blue .kobil-eyebrow { color: rgba(255,255,255,.6); }
.panel-blue .card .ic { background: rgba(255,255,255,.14); color: #ffffff; }
.panel-blue a { color: #ffffff; }
@media (max-width: 768px) { .panel-blue { margin: var(--m12) 0 0; padding: var(--m24); } }
/* On a dark or blue panel the bright brand accents read correctly again. */
.panel-dark, .panel-blue, pre.code, pre.diff, .ex {
--cyan-ink: var(--cyan);
--yellow-ink: var(--yellow);
--green-ink: #5fd3a6;
--blue-ink: #7cd8fd;
--violet-ink: #b9a5f8;
--pink-ink: var(--pink);
--red-ink: #ef8a8c;
}
/* ------------------------------------------------------------------
Accent-coloured TEXT on the light field.
These elements colour themselves from a per-card --accent, which is
a bright brand value tuned for a dark background and lands at
1.5-1.8:1 on #eef1f7. Darken the accent toward navy for the text
only; the accent itself still drives borders, rules and fills.
------------------------------------------------------------------ */
.svc-port, .svc-name, .kobil-tag,
.vert-fit-label, .vert-companies,
.cap-val, .reg-label {
color: color-mix(in srgb, var(--accent, var(--blue)) 46%, #04122a) !important;
}
.panel-dark .svc-port, .panel-dark .svc-name, .panel-dark .kobil-tag,
.panel-dark .vert-fit-label, .panel-dark .vert-companies,
.panel-dark .cap-val, .panel-dark .reg-label,
.panel-blue .svc-port, .panel-blue .svc-name, .panel-blue .kobil-tag {
color: var(--accent, var(--cyan)) !important;
}
/* text on the blue panel: lift the muted step so it clears AA on #2962f6 */
.panel-blue { --text-secondary: rgba(255,255,255,.92); --text-muted: rgba(255,255,255,.84); }
.panel-blue p, .panel-blue li { color: rgba(255,255,255,.92); }
/* any leftover on-dark secondary that ended up on the light field */
body > *:not(.panel-dark):not(.site-footer) p[style*="b8bdc9"] { color: var(--text-secondary); }
/* ---- final contrast pass on the light page ---------------------------
Links and the active nav pill used the brand blue, which lands just
under AA on the light field (4.45:1) and on the pale active pill
(3.8:1). Both move to the darker ink; inside dark/blue panels they
revert to the bright brand blue via the ink overrides above.
--------------------------------------------------------------------- */
a { color: var(--blue-ink); }
.nav-links a.active { color: var(--blue-ink); }
.panel-dark a, .panel-blue a, .site-footer a { color: inherit; }
.panel-dark .nav-links a.active, .panel-blue .nav-links a.active { color: var(--on-dark); }
/* Accent-coloured headings on the light field get the same darkening as
the accent text above. */
.svc-card h3, .plat-card h3, .arch-card h3, .svc-node h3,
[style*="--accent"] h3, [style*="--accent"] h4 {
color: color-mix(in srgb, var(--accent, var(--blue)) 46%, #04122a);
}
.panel-dark [style*="--accent"] h3, .panel-dark [style*="--accent"] h4,
.panel-dark .svc-card h3, .panel-dark .plat-card h3 { color: var(--accent, var(--cyan)); }
/* Body copy on the blue panel needs to clear AA against #2962f6. */
.panel-blue p, .panel-blue li, .panel-blue { --text-secondary: #ffffff; --text-muted: rgba(255,255,255,.95); }
.panel-blue p, .panel-blue li { color: rgba(255,255,255,.95); }
/* ---- KOBIL wordmark -------------------------------------------------
The official asset, at kobil.com's own geometry: 106 x 34 at 1440px,
scaling on the fluid --w scale exactly as their w-w106/h-w33 does.
Header padding matches theirs (20.4px / 40.8px -> --w20 / --w41).
-------------------------------------------------------------------- */
.nav-logo { display: inline-flex; align-items: center; gap: var(--w10); }
.brand-mark {
width: var(--w106);
height: var(--w33);
display: block;
flex: none;
}
@media (max-width: 768px) {
.brand-mark { width: var(--m106); height: var(--m33); }
}
/* ---- footer: lighter surface, tighter, columns spread across the width
NOTE: kobil.com's own footer is navy #02133e. This lighter treatment is
a deliberate divergence requested for this site. --------------------- */
.site-footer {
background: #dbeafe; /* light sky blue */
color: var(--text-secondary);
padding: var(--w32) var(--w40) var(--w20);
}
.site-footer .nav-logo,
.site-footer h4,
.site-footer .footer-brand,
.site-footer strong { color: var(--text); }
.site-footer a { color: var(--text-secondary); }
.site-footer a:hover { color: var(--blue-ink); }
.site-footer .footer-brand p { color: var(--text-secondary); }
.site-footer .footer-legal { border-top-color: rgba(17,36,74,.14); }
.site-footer .footer-legal a { color: var(--text-secondary); }
.site-footer .footer-legal a:hover { color: var(--blue-ink); }
.site-footer .footer-eig,
.site-footer .footer-bottom { color: var(--text-muted); }
.site-footer code { background: rgba(17,36,74,.07); color: var(--blue-ink); }
/* The right half of the panel sat empty while the brand line wrapped to three
hyphenated lines against a 300px cap. The brand column takes the width it
needs for two lines; the two link columns move right into the space. */
.site-footer .footer-grid {
grid-template-columns: minmax(0, 1.95fr) minmax(150px, .75fr) minmax(150px, .75fr);
gap: var(--w28);
margin-bottom: var(--w20);
}
.site-footer .footer-brand p {
max-width: 47ch;
text-align: left;
hyphens: manual;
}
@media (max-width: 900px) {
.site-footer .footer-grid { grid-template-columns: 1fr 1fr; }
.site-footer .footer-brand { grid-column: 1 / -1; }
.site-footer .footer-brand p { max-width: none; }
}
@media (max-width: 560px) {
.site-footer .footer-grid { grid-template-columns: 1fr; }
}
.site-footer .footer-legal { padding-top: var(--w14); margin-top: var(--w14); }
/* Cards inside the vivid blue panel: the per-card --accent colours
(blue / cyan / green) collide with a blue field, so headings go white
and the surfaces become translucent white instead. */
.panel-blue .step-card .card-bg,
.panel-blue .fx-stat-card .card-bg {
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.22) !important;
}
.panel-blue .step-card h3,
.panel-blue .fx-stat-card h3 { color: #ffffff !important; }
.panel-blue .step-card p,
.panel-blue .fx-stat-card p { color: rgba(255,255,255,.92) !important; }
.panel-blue .step-num { color: rgba(255,255,255,.14) !important; }
.panel-blue .accent-line { background: rgba(255,255,255,.55) !important; box-shadow: none !important; }
.panel-blue .fx-section-header { color: #ffffff; }
.panel-blue .hdr-line { background: rgba(255,255,255,.45); }
/* ============================================================
NEW SECTIONS — deployment, demo, white papers
Marketing-family pages: styles.css + perf.js, no rail.
Deliberately plain; the site's visual weight lives on the
home page and these are pages people read.
============================================================ */
.page-head { max-width: 1200px; margin: 0 auto; padding: var(--w48) var(--w33) var(--w20); }
.page-head .kicker {
font-family: var(--mono); font-size: .72rem; letter-spacing: .14em;
text-transform: uppercase; color: var(--blue-ink); display: block; margin-bottom: 10px;
}
.page-head h1 {
font-family: var(--display); font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 700;
letter-spacing: -.03em; color: var(--text); margin: 0 0 12px;
}
.page-head .lede { font-size: 1.06rem; line-height: 1.65; color: var(--text-secondary); max-width: 68ch; margin: 0; }
/* On a long-form article the head must share the article's measure, or the
title starts 300px left of the first paragraph. */
.page-head--article { max-width: 780px; }
.page-body { max-width: 1200px; margin: 0 auto; padding: 0 var(--w33) var(--w64); }
.page-body h2 {
font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--text);
letter-spacing: -.02em; margin: var(--w40) 0 12px;
}
.page-body h3 {
font-family: var(--display); font-size: 1.08rem; font-weight: 700; color: var(--text); margin: 26px 0 8px;
}
.page-body p { color: var(--text-secondary); line-height: 1.7; margin: 0 0 14px; max-width: 74ch; }
.page-body ul, .page-body ol { color: var(--text-secondary); line-height: 1.7; margin: 0 0 16px; padding-left: 22px; max-width: 74ch; }
.page-body li { margin-bottom: 7px; }
.page-body .note {
border-left: 3px solid var(--blue); background: var(--surface);
border: 1px solid var(--border); border-left-width: 3px;
border-radius: var(--w12); padding: 16px 20px; margin: 20px 0; max-width: 74ch;
}
.page-body .note p:last-child { margin-bottom: 0; }
.page-body .note strong { color: var(--text); }
/* comparison / fact tables */
.dep-table { width: 100%; border-collapse: collapse; margin: 18px 0 8px; font-size: .93rem;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--w12); overflow: hidden; }
.dep-table th, .dep-table td { text-align: left; padding: 14px 22px; border-bottom: 1px solid var(--border); vertical-align: top; color: var(--text-secondary); }
.dep-table thead th { background: var(--surface-2); color: var(--text); font-weight: 700; font-size: .84rem; letter-spacing: .02em; }
/* A rule between every pair of columns. Without one, a wide row label and a
short value read as a single sentence running across the row - "Kubernetes
cluster KOBIL You" - and the eye has nothing to tell it where the answer to
one column ends and the next begins. Never on the outer left edge. */
.dep-table th:not(:first-child), .dep-table td:not(:first-child) { border-left: 1px solid var(--border); }
/* Width by content, not a fixed 30%. The RFI table's row headers are labels
like "A3", and reserving a third of the table for them crushed the question
column into a three-word-per-line ribbon. */
.dep-table tbody th { color: var(--text); font-weight: 600; width: auto; min-width: 5rem; background: var(--surface-2); }
.dep-table tr:last-child td, .dep-table tr:last-child th { border-bottom: 0; }
.table-scroll { overflow-x: auto; }
/* self-hosted video */
.video-wrap { max-width: 960px; margin: 0 auto var(--w20); }
.video-wrap video {
display: block; width: 100%; height: auto; border-radius: var(--radius);
border: 1px solid var(--border); background: #02133e;
box-shadow: 0 24px 60px -28px rgba(17,36,74,.28);
}
.video-meta { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center;
margin-top: 12px; font-size: .85rem; color: var(--text-muted); }
.transcript { max-width: 860px; margin: var(--w32) auto 0; }
.transcript summary { cursor: pointer; font-weight: 600; color: var(--text); font-size: .95rem; padding: 6px 0; }
.transcript[open] summary { margin-bottom: 10px; }
.transcript p { font-size: .93rem; }
/* white paper listing */
.wp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; margin-top: 8px; }
.wp-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 22px 24px; text-decoration: none;
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.wp-card:hover { transform: translateY(-3px); border-color: rgba(41,98,246,.35); box-shadow: 0 20px 44px -20px rgba(17,36,74,.2); }
.wp-type { align-self: flex-start; font-family: var(--mono); font-size: .68rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase; color: var(--blue-ink);
background: rgba(41,98,246,.08); border: 1px solid rgba(41,98,246,.22);
border-radius: var(--radius-pill); padding: 3px 10px; margin-bottom: 12px; }
.wp-card h3 { font-family: var(--display); font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0 0 8px; line-height: 1.3; }
.wp-card p { color: var(--text-secondary); font-size: .9rem; line-height: 1.55; margin: 0 0 14px; flex: 1; }
.wp-meta { display: flex; gap: 14px; font-size: .78rem; color: var(--text-muted); font-family: var(--mono); }
/* white paper article */
.wp-article { max-width: 780px; margin: 0 auto; padding: 0 var(--w33) var(--w64); }
.wp-article h2 { font-size: 1.4rem; margin: var(--w40) 0 10px; }
.wp-article h3 { font-size: 1.02rem; margin: 24px 0 6px; }
.wp-article p, .wp-article li { max-width: none; }
.wp-article .refs { font-size: .86rem; }
.wp-article .refs li { margin-bottom: 9px; }
.wp-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--w12); padding: 18px 22px; margin: 0 0 var(--w20); }
.wp-toc h2 { font-size: .8rem !important; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase;
color: var(--text-muted); margin: 0 0 10px !important; }
.wp-toc ol { margin: 0; padding-left: 20px; }
.wp-toc a { color: var(--text-secondary); text-decoration: none; }
.wp-toc a:hover { color: var(--blue-ink); text-decoration: underline; }
@media (max-width: 640px) {
.page-head { padding-top: var(--w32); }
.dep-table th, .dep-table td { padding: 10px 12px; font-size: .86rem; }
}
/* ----- pricing cards -----
Cards first, comparison second. A five-column table as the opening move
is a wall of text; the card grid answers "which one am I" in one glance. */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 var(--w20); }
.price-card { display: flex; flex-direction: column; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px 20px;
transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.price-card:hover { transform: translateY(-3px); box-shadow: 0 20px 44px -22px rgba(17,36,74,.2); }
.price-card.featured { border-color: rgba(41,98,246,.45); box-shadow: 0 18px 44px -22px rgba(41,98,246,.35); }
.price-badge { position: absolute; top: -11px; left: 22px; font-family: var(--mono); font-size: .64rem;
font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #fff;
background: var(--blue); border-radius: var(--radius-pill); padding: 3px 10px; }
.price-card { position: relative; }
.price-name { font-family: var(--display); font-size: 1.05rem; font-weight: 700; color: var(--text); margin-bottom: 4px; }
/* Reserve three lines: 'Dedicated or customer-hosted deployment.' wraps to
three where the others take two, and a short reservation dropped that
card's figure 10px below the rest of the row. */
.price-for { font-size: .82rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 12px; min-height: 2.9em; }
.price-fig { font-family: var(--display); font-size: 1.85rem; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.1; }
.price-unit { font-size: .8rem; color: var(--text-muted); margin-bottom: 16px; display: block; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 16px; flex: 1; }
.price-card li { font-size: .86rem; color: var(--text-secondary); line-height: 1.45; padding: 4px 0 4px 20px; position: relative; }
.price-card li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 700; font-size: .82rem; }
.price-cta { display: block; text-align: center; font-size: .87rem; font-weight: 600; text-decoration: none;
padding: 10px 14px; border-radius: var(--w8); border: 1px solid var(--border-light);
background: var(--surface-2); color: var(--text-secondary); transition: all .2s ease; }
.price-cta:hover { border-color: var(--blue); color: var(--text); background: var(--surface-3); }
.price-cta.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.price-cta.primary:hover { background: var(--blue-hover); color: #fff; }
.price-note { font-size: .82rem; color: var(--text-muted); text-align: center; margin: 0 0 var(--w32); }
/* Two delivery models rather than three editions. Held to a narrower measure
so a pair of cards does not stretch into two 580px slabs. */
.price-grid.two { grid-template-columns: repeat(2, 1fr); max-width: 840px; margin-left: auto; margin-right: auto; }
@media (max-width: 980px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
/* The blank 'from' slot exists to hold the figures on a shared baseline across
the row. Once the cards stack there is no row to align to, so the empty one
is just a gap. */
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; }
.price-card .price-pre:empty { display: none; } }
/* compact disclosure for the full comparison */
.compare-details { border: 1px solid var(--border); border-radius: var(--w12); background: var(--surface); padding: 0 20px; margin: 0 0 var(--w32); }
.compare-details summary { cursor: pointer; font-weight: 600; color: var(--text); font-size: .93rem; padding: 15px 0; list-style-position: inside; }
.compare-details[open] summary { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.compare-details .dep-table { border: 0; margin-top: 0; }
/* ----- white paper cards with covers ----- */
.wp-card .wp-cover { display: block; width: 100%; aspect-ratio: 8 / 5; object-fit: cover;
border-radius: var(--w8); border: 1px solid var(--border); margin-bottom: 16px; background: var(--surface-2); }
.wp-actions { display: flex; gap: 8px; margin-top: 14px; }
.wp-btn { flex: 1; text-align: center; font-size: .82rem; font-weight: 600; text-decoration: none;
padding: 8px 12px; border-radius: var(--w8); border: 1px solid var(--border-light);
background: var(--surface-2); color: var(--text-secondary); transition: all .2s ease; }
.wp-btn:hover { border-color: var(--blue); color: var(--text); }
.wp-btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; }
.wp-btn.primary:hover { background: var(--blue-hover); color: #fff; }
/* ----- print / PDF -----
The white paper is generated to PDF straight from this page, so the PDF and
the HTML can never drift. Chrome and navigation are dropped; link targets are
spelled out because a printed link is useless otherwise. */
@media print {
.site-header, .site-footer, .wp-toc, .nav-toggle, .bg-env { display: none !important; }
body { background: #fff; color: #11244a; }
.page-head, .page-body, .wp-article { max-width: none; padding: 0; margin: 0; }
.page-head h1 { font-size: 22pt; margin-bottom: 8pt; }
.page-head .lede { font-size: 11pt; }
.page-body h2, .wp-article h2 { font-size: 14pt; margin-top: 18pt; page-break-after: avoid; }
.page-body h3, .wp-article h3 { font-size: 11.5pt; page-break-after: avoid; }
.page-body p, .page-body li, .wp-article p, .wp-article li { font-size: 10pt; line-height: 1.5; color: #333; }
.dep-table { font-size: 9pt; page-break-inside: avoid; }
.dep-table thead th { background: #eef1f7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.note { border: 1px solid #ccd; border-left: 3px solid #2962f6; page-break-inside: avoid; }
a { color: #1046d1; text-decoration: none; }
.wp-article .refs a::after { content: " (" attr(href) ")"; font-size: 8pt; color: #666; word-break: break-all; }
h2, h3 { break-after: avoid; }
}
/* ----- demo video facade ----- */
.video-facade { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius);
overflow: hidden; border: 1px solid var(--border);
background: linear-gradient(150deg, #0b1c3f 0%, #11244a 45%, #1a2f5e 100%);
box-shadow: 0 24px 60px -28px rgba(17,36,74,.35); }
.video-facade iframe { width: 100%; height: 100%; border: 0; display: block; }
.facade-frame { position: absolute; inset: 0; display: flex; flex-direction: column;
align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 24px; }
.facade-badge { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--shade-cyan); border: 1px solid rgba(148,177,232,.35);
border-radius: var(--radius-pill); padding: 4px 12px; }
.facade-title { font-family: var(--display); font-size: 1.3rem; font-weight: 700; color: #fff; margin: 0; }
.facade-play { width: 68px; height: 68px; border-radius: 50%; border: 0; cursor: pointer;
display: grid; place-items: center; color: #fff;
background: linear-gradient(135deg, var(--blue), var(--violet));
box-shadow: 0 0 34px -6px rgba(41,98,246,.8); transition: transform .25s ease, box-shadow .25s ease; }
.facade-play:hover:not(:disabled) { transform: scale(1.07); box-shadow: 0 0 46px -4px rgba(41,98,246,.95); }
.facade-play:disabled { opacity: .4; cursor: not-allowed; }
.facade-consent { font-size: .74rem; color: rgba(255,255,255,.62); max-width: 44ch; margin: 0; line-height: 1.5; }
.video-facade.is-unset .facade-consent { display: none; }
.video-facade.is-unset .facade-frame::after { content: "Video not published yet";
font-size: .78rem; color: rgba(255,255,255,.55); font-family: var(--mono); }
/* ============================================================
SHARED PAGE FURNITURE
The marketing pages each defined a centred gradient hero and a
dashed section label inline, so new pages had no way to match
them. These are the same treatments, promoted to the shared
sheet so every page speaks one visual language.
============================================================ */
@property --holo-angle { syntax: ''; initial-value: 0deg; inherits: false; }
@keyframes holoSpin { to { --holo-angle: 360deg; } }
@keyframes pageReveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes underlineGrow { to { width: min(360px, 46%); } }
.page-hero {
position: relative; z-index: 1; text-align: center;
max-width: 1200px; margin: 0 auto; padding: 96px 24px 20px;
}
.page-hero .kicker {
display: block; font-family: var(--mono); font-size: .72rem; font-weight: 600;
letter-spacing: .18em; text-transform: uppercase; color: var(--blue-ink); margin-bottom: 18px;
opacity: 0; animation: pageReveal .9s cubic-bezier(.16,1,.3,1) .25s forwards;
}
.page-hero h1 {
font-family: var(--display); font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 700;
line-height: 1.14; letter-spacing: -.03em; color: var(--text); margin: 0;
opacity: 0; animation: pageReveal 1s cubic-bezier(.16,1,.3,1) .4s forwards;
}
.page-hero h1 .holo {
display: inline-block;
background: conic-gradient(from var(--holo-angle),
#3ebffc, #2962f6, #696ef5, #ca80f4, #696ef5, #2962f6, #3ebffc);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
animation: holoSpin 9s linear infinite;
filter: drop-shadow(0 0 34px rgba(62,191,252,.22)) drop-shadow(0 0 64px rgba(112,41,246,.16));
}
.page-hero .rule {
display: block; height: 3px; width: 0; margin: 22px auto 0; border-radius: 3px;
background: linear-gradient(90deg, transparent, #3ebffc, #2962f6, #7029f6, #ca80f4, transparent);
box-shadow: 0 0 20px rgba(62,191,252,.35), 0 0 40px rgba(112,41,246,.18);
animation: underlineGrow 1.3s cubic-bezier(.16,1,.3,1) .9s forwards;
}
.page-hero-sub {
font-size: clamp(1rem, 1.5vw, 1.2rem); color: var(--text-secondary); line-height: 1.65;
max-width: 660px; margin: 20px auto 0; text-wrap: balance;
opacity: 0; animation: pageReveal 1s cubic-bezier(.16,1,.3,1) .6s forwards;
}
/* Pricing leads with the numbers, so the tier cards have to be on screen at
first paint. The standard hero spends about 270px above the fold before the
grid starts, which pushed the CTAs below a 1440x800 viewport; this modifier
gives that space back without changing any other page's hero. */
.page-hero.compact { padding: 34px 24px 4px; }
.page-hero.compact .kicker { margin-bottom: 10px; }
.page-hero.compact h1 { font-size: clamp(1.8rem, 3.4vw, 2.5rem); }
.page-hero.compact .page-hero-sub {
margin-top: 12px; max-width: 620px; font-size: clamp(.94rem, 1.15vw, 1.05rem); line-height: 1.5;
}
.page-hero.compact .rule { margin-top: 14px; }
.sec-label {
display: flex; align-items: center; justify-content: center; gap: 16px;
font-family: var(--mono); font-size: .72rem; font-weight: 600; letter-spacing: .2em;
text-transform: uppercase; color: var(--blue-ink);
margin: var(--w48) 0 var(--w20);
}
.sec-label .hdr-line {
display: block; height: 1px; width: 46px;
background: linear-gradient(90deg, transparent, var(--blue));
}
.sec-label .hdr-line.right { background: linear-gradient(90deg, var(--blue), transparent); }
/* Prose sits on the same centre axis as the section labels above it. Left-
anchoring a 74ch column inside a 1200px block put every centred label off to
the right of the text it headed. */
.page-body > p,
.page-body > ul,
.page-body > ol { max-width: 78ch; margin-left: auto; margin-right: auto; }
/* Left-aligned, not justified. Justifying without hyphenation at this measure
opened rivers of white space between words - and hyphenation was rejected
earlier for breaking "per-customer" across lines. You can have one or the
other at 78ch; ragged-right is the better of the two. */
.page-body p, .wp-article p,
.page-body li, .wp-article li { text-align: left; hyphens: manual; -webkit-hyphens: manual; text-wrap: pretty; }
.page-body .price-note, .page-hero-sub { text-align: center; }
.price-card .price-for { text-align: left; }
@media (max-width: 640px) {
.page-hero { padding: 64px 20px 12px; }
.sec-label { font-size: .64rem; letter-spacing: .14em; gap: 10px; }
.sec-label .hdr-line { width: 24px; }
.page-body p, .wp-article p { text-align: left; }
}
/* ----- fact cards -----
The same shape platform.html uses for its eight services: a white card with
a coloured accent, cycling the KOBIL palette. Bullet lists on the newer
pages become these, so both halves of the site present facts the same way.
No new copy - the lead becomes the title, the rest is the body. */
.fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 20px; margin: 4px 0 var(--w20); }
.fact-card {
--accent: var(--blue);
position: relative; overflow: hidden;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 26px 24px 22px;
transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s cubic-bezier(.16,1,.3,1), border-color .4s ease;
}
.fact-card::before {
content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px;
background: var(--accent); border-radius: 0 0 2px 2px;
box-shadow: 0 0 14px var(--accent); opacity: .85;
}
.fact-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--accent) 40%, transparent);
box-shadow: 0 22px 48px -24px rgba(17,36,74,.24); }
.fact-card:nth-child(5n+1) { --accent: #2962F6; }
.fact-card:nth-child(5n+2) { --accent: #1DAC76; }
.fact-card:nth-child(5n+3) { --accent: #7029F6; }
.fact-card:nth-child(5n+4) { --accent: #F0BE48; }
.fact-card:nth-child(5n+5) { --accent: #3ebffc; }
.fact-name {
display: block; font-family: var(--mono); font-size: .84rem; font-weight: 600;
letter-spacing: .02em; color: var(--text); margin-bottom: 9px;
}
.fact-card p { font-size: .9rem; line-height: 1.65; color: var(--text-secondary); margin: 0; text-align: left; }
.fact-card code { font-size: .78rem; }
@media (max-width: 640px) { .fact-grid { grid-template-columns: 1fr; gap: 14px; } }
/* Sub-headings inside a section. The dashed .sec-label marks a section; this
marks a division within one, so it is quieter: mono, left-aligned, with a
short accent tick rather than full rules. */
.page-body h3, .wp-article h3 {
position: relative;
font-family: var(--mono);
font-size: .82rem;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--text);
margin: var(--w26) 0 12px;
padding-left: 14px;
}
.page-body h3::before, .wp-article h3::before {
content: ''; position: absolute; left: 0; top: .18em; bottom: .18em;
width: 3px; border-radius: 2px;
background: linear-gradient(180deg, var(--blue), var(--violet));
}
/* The white paper is long-form prose; its h3s stay sentence-case and larger. */
.wp-article h3 { text-transform: none; font-family: var(--display); font-size: 1rem; letter-spacing: 0; }
/* ----- long-form paper: sticky contents + progress -----
A 10,000px article with the contents only at the top gives a reader no way
to know where they are. The same list becomes a rail that tracks the
current section; below 1240px it falls back to the block at the top. */
.wp-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
background: linear-gradient(90deg, var(--blue), var(--violet), var(--cyan));
box-shadow: 0 0 12px rgba(41,98,246,.5); transition: width .1s linear; }
@media (min-width: 1240px) {
.wp-toc {
/* The article is 780px centred, so its left edge is 50% - 390px. The rail
sits outside that with a gap, at every width from 1240 up. */
position: fixed; top: 120px; left: max(20px, calc(50% - 610px));
width: 190px; max-height: calc(100vh - 170px); overflow-y: auto;
margin: 0; padding: 18px 16px; background: transparent; border: 0;
border-left: 1px solid var(--border); border-radius: 0;
}
.wp-toc h2 { margin-bottom: 12px !important; }
.wp-toc ol { list-style: none; padding: 0; counter-reset: toc; }
.wp-toc li { counter-increment: toc; margin-bottom: 2px; }
.wp-toc a {
display: block; font-size: .78rem; line-height: 1.4; padding: 6px 10px;
border-radius: var(--w8); color: var(--text-muted);
border-left: 2px solid transparent; margin-left: -17px; padding-left: 15px;
transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.wp-toc a::before { content: counter(toc) ". "; color: var(--text-muted); opacity: .7; }
.wp-toc a:hover { color: var(--text); background: rgba(17,36,74,.04); text-decoration: none; }
.wp-toc a.current {
color: var(--blue-ink); font-weight: 600;
border-left-color: var(--blue); background: rgba(41,98,246,.06);
}
.wp-toc a.current::before { color: var(--blue-ink); opacity: 1; }
}
@media print { .wp-progress { display: none; } }
/* ----- implementation band -----
A one-time engagement is not a tier, so it does not belong in the tier grid.
It sits below as its own band: the licence buys the platform, this buys the
first agent running in your estate. */
.impl-band {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 32px; align-items: center;
background: var(--surface); border: 1px solid var(--border);
border-left: 3px solid var(--violet); border-radius: var(--radius);
padding: 28px 30px; margin: 0 0 var(--w32);
}
.impl-kicker { font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--violet-ink); display: block; margin-bottom: 8px; }
.impl-band h3 { margin: 0 0 8px !important; padding: 0 !important; font-family: var(--display) !important;
font-size: 1.15rem !important; text-transform: none !important; letter-spacing: -.01em !important; }
.impl-band h3::before { display: none !important; }
.impl-band > div > p { font-size: .92rem; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: none; }
.impl-price { font-family: var(--display); font-size: 1.5rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.impl-price small { display: block; font-family: var(--sans); font-size: .78rem; font-weight: 400; color: var(--text-muted); margin-top: 2px; }
.impl-list { list-style: none; margin: 0; padding: 0; }
.impl-list li { position: relative; padding: 4px 0 4px 20px; font-size: .88rem; line-height: 1.5; color: var(--text-secondary); }
.impl-list li::before { content: "→"; position: absolute; left: 0; color: var(--violet); font-weight: 700; }
.impl-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 14px; }
@media (max-width: 900px) { .impl-band { grid-template-columns: 1fr; gap: 20px; } }
/* ----- figures in papers -----
A workflow diagram is the element these papers were missing most; a reader
scanning for architecture finds a picture before they find a paragraph. */
.wp-figure { margin: var(--w26) 0; }
.wp-figure svg { display: block; width: 100%; height: auto;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--w12); }
.wp-figure figcaption { margin-top: 10px; font-size: .82rem; color: var(--text-muted); text-align: center; }
.wp-figure figcaption strong { color: var(--text-secondary); }
/* key-figure row: the "evidence" element, stated as facts we can stand behind */
.wp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin: var(--w20) 0; }
.wp-stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--w12); padding: 18px 16px; text-align: center; }
.wp-stat b { display: block; font-family: var(--display); font-size: 1.6rem; font-weight: 700; color: var(--text); line-height: 1.1; }
.wp-stat span { display: block; margin-top: 6px; font-size: .78rem; line-height: 1.4; color: var(--text-muted); }
@media print { .wp-figure svg { border-color: #ccd; } .wp-stat { border-color: #ccd; } }
/* The PDF now opens on a cover page carrying the title, so the on-page hero
would repeat it on the first content sheet. */
@media print { .wp-article ~ * .page-hero, body > .page-hero { display: none; } }
/* A card title is not a section sub-heading: it must not take the mono caps
and gradient tick that .page-body h3 carries. */
.page-body .wp-card h3 {
font-family: var(--display); font-size: 1.06rem; font-weight: 700;
text-transform: none; letter-spacing: -.01em; color: var(--text);
margin: 0 0 8px; padding-left: 0; line-height: 1.32;
}
.page-body .wp-card h3::before { display: none; }
/* ----- next-step cards -----
Two destinations presented as destinations. As prose they read as an
afterthought under the video; as cards they match how the rest of the
site offers a choice. */
.next-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; margin: 4px 0 0; }
.next-card {
position: relative; display: flex; flex-direction: column; text-decoration: none;
background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
padding: 26px 26px 22px; overflow: hidden;
transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease;
}
.next-card::before {
content: ''; position: absolute; top: 0; left: 24px; right: 24px; height: 2px;
background: linear-gradient(90deg, var(--blue), var(--violet)); opacity: .75;
box-shadow: 0 0 12px rgba(41,98,246,.4);
}
.next-card:hover { transform: translateY(-4px); border-color: rgba(41,98,246,.35);
box-shadow: 0 22px 48px -24px rgba(17,36,74,.24); }
.next-kicker { font-family: var(--mono); font-size: .66rem; font-weight: 600; letter-spacing: .13em;
text-transform: uppercase; color: var(--text-muted); margin-bottom: 9px; }
.next-card h3 {
font-family: var(--display) !important; font-size: 1.08rem !important; font-weight: 700;
text-transform: none !important; letter-spacing: -.01em !important; color: var(--text);
margin: 0 0 8px !important; padding-left: 0 !important;
}
.next-card h3::before { display: none !important; }
.next-card p { font-size: .91rem; line-height: 1.6; color: var(--text-secondary); margin: 0; text-align: left; }
.next-go { margin-top: 16px; font-size: .85rem; font-weight: 600; color: var(--blue-ink); }
.next-card:hover .next-go { color: var(--blue); }
/* A card that is not a link must not lift on hover: the same promise-without-
payoff the tag chips made before they were made inert. */
.next-card--static { cursor: default; }
.next-card--static:hover {
transform: none; border-color: var(--border); box-shadow: none;
}
.next-card--static .next-go { color: var(--text-muted); }
.next-card--static:hover .next-go { color: var(--text-muted); }
/* Accessible page title for the portal pages, which open on a section heading
by design. Present for search and screen readers, absent visually. */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ----- price figures -----
"from" was set at the same weight as the number, so it competed with the
thing the eye is looking for and left the four cards without a shared
baseline. It is a label above the figure now, present on every card so the
numbers line up whether or not the word applies. Tabular figures keep the
digits on a common grid. */
.price-amount { margin-bottom: 14px; }
.price-pre {
display: block; font-family: var(--mono); font-size: .64rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
line-height: 1; margin-bottom: 7px; min-height: .64rem;
}
.price-fig {
/* AgentBox sets its price figures at 42px with -0.04em tracking; these run a
little larger because three cards give each one more room than their
layout does. */
/* Matched to AgentBox's computed values: Instrument Sans, weight 400,
-0.04em tracking, proportional (not tabular) figures. Ours was the same
family at 700 with tnum, which is what made the numbers look different. */
display: block; font-family: var(--display); font-weight: 400;
font-size: clamp(2.2rem, 3.3vw, 3.05rem); line-height: 1;
letter-spacing: -.04em; color: var(--text);
font-variant-numeric: normal; font-feature-settings: normal;
}
/* The euro sign was set at .62em, which read as a footnote hung off the side
of the figure rather than part of it. At .8em it sits inside the cap height
of the digits and the pair reads as one number; the tighter space keeps it
from drifting away from the first digit. */
.price-cur { font-size: .92em; font-weight: 400; margin-right: .02em; vertical-align: baseline; color: inherit; }
.price-unit { display: block; margin-top: 8px; font-size: .8rem; color: var(--text-muted); }
.price-card.featured .price-fig { color: var(--blue-ink); }
.price-card.featured .price-cur { color: var(--blue); }
/* The engagement figure uses the same treatment as the tier cards. */
.impl-price { display: block; text-align: right; white-space: nowrap; }
.impl-price .price-pre { text-align: right; }
/* Secondary to the tier figures, but the gap became a chasm once those grew
to 48px. Deliberately about two-thirds of them. */
.impl-price .price-fig { font-size: clamp(1.7rem, 2.3vw, 2.1rem); }
.impl-price small { display: block; font-family: var(--sans); font-size: .78rem;
font-weight: 400; color: var(--text-muted); margin-top: 6px; }
@media (max-width: 900px) { .impl-price, .impl-price .price-pre { text-align: left; } }
/* ----- home showcase: video in place of the stills -----
The two images stay in the markup and are hidden, so putting them back is
one class away. The video is a short silent loop, so it autoplays muted and
carries no controls; a poster covers the frames before it decodes. */
.ts-visual.is-hidden { display: none; }
.ts-media { grid-area: 1 / 1 / 2 / -1; }
.ts-media video {
/* The file is 1280x720 but the picture is only 1115px wide - 82px of black
is baked into each side. Holding the box at the content's own 1.549:1 and
covering crops exactly those bars away. */
display: block; width: 100%; height: auto; aspect-ratio: 1.549;
object-fit: cover; border-radius: var(--radius);
}
/* Anyone who has asked the system to reduce motion gets the still instead. */
@media (prefers-reduced-motion: reduce) {
.ts-media { display: none; }
.ts-card.is-hidden { display: block; grid-area: 1 / 1 / 2 / -1; }
.ts-card.is-hidden img { height: auto; }
}
/* annual figure under the monthly one */
.price-annual { display: block; margin-top: 6px; font-size: .74rem; line-height: 1.4; color: var(--text-muted); }
.price-card.featured .price-annual { color: var(--blue-ink); }