/* Generated by sync-blog-theme.sh. Do not edit: edit the sources in
   apps/landing/src/styles and re-run the script. */

/* ---- 1. Next's global bundle: preflight, tokens, webfonts ---- */
@font-face{font-family:Vazirmatn;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/1abbc144918f74fd-s.p.woff2) format("woff2");unicode-range:u+06??,u+0750-077f,u+0870-088e,u+0890-0891,u+0897-08e1,u+08e3-08ff,u+200c-200e,u+2010-2011,u+204f,u+2e41,u+fb50-fdff,u+fe70-fe74,u+fe76-fefc,u+102e0-102fb,u+10e60-10e7e,u+10ec2-10ec4,u+10efc-10eff,u+1ee00-1ee03,u+1ee05-1ee1f,u+1ee21-1ee22,u+1ee24,u+1ee27,u+1ee29-1ee32,u+1ee34-1ee37,u+1ee39,u+1ee3b,u+1ee42,u+1ee47,u+1ee49,u+1ee4b,u+1ee4d-1ee4f,u+1ee51-1ee52,u+1ee54,u+1ee57,u+1ee59,u+1ee5b,u+1ee5d,u+1ee5f,u+1ee61-1ee62,u+1ee64,u+1ee67-1ee6a,u+1ee6c-1ee72,u+1ee74-1ee77,u+1ee79-1ee7c,u+1ee7e,u+1ee80-1ee89,u+1ee8b-1ee9b,u+1eea1-1eea3,u+1eea5-1eea9,u+1eeab-1eebb,u+1eef0-1eef1}@font-face{font-family:Vazirmatn;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/17cf9497af825577-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Vazirmatn;font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/8c96cc4bd2a39381-s.p.woff2) format("woff2");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}@font-face{font-family:Vazirmatn Fallback;src:local("Arial");ascent-override:101.87%;descent-override:53.36%;line-gap-override:0.00%;size-adjust:100.66%}.__className_2e86e3{font-family:Vazirmatn,Vazirmatn Fallback;font-style:normal}.__variable_2e86e3{--font-vazirmatn:"Vazirmatn","Vazirmatn Fallback"}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*
! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;font-family:IRANYekanX,Arial,sans-serif;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}:root{--background:0 0% 100%;--foreground:240 10% 3.9%;--brand-foreground:0 0% 100%;--card:0 0% 100%;--card-foreground:240 10% 3.9%;--popover:0 0% 100%;--popover-foreground:240 10% 3.9%;--primary:240 5.9% 10%;--primary-foreground:0 0% 98%;--secondary:240 4.8% 95.9%;--secondary-foreground:240 5.9% 10%;--muted:240 4.8% 95.9%;--muted-foreground:240 3.8% 46.1%;--accent:240 4.8% 95.9%;--accent-foreground:240 5.9% 10%;--destructive:0 84.2% 60.2%;--destructive-foreground:0 0% 98%;--border:240 5.9% 90%;--input:240 5.9% 90%;--ring:240 10% 3.9%;--chart-1:12 76% 61%;--chart-2:173 58% 39%;--chart-3:197 37% 24%;--chart-4:43 74% 66%;--chart-5:27 87% 67%;--radius:0.5rem}*{border-color:hsl(var(--border))}body{background-color:hsl(var(--background));color:hsl(var(--foreground))}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.visible{visibility:visible}.static{position:static}.absolute{position:absolute}.relative{position:relative}.mx-auto{margin-left:auto;margin-right:auto}.mb-12{margin-bottom:3rem}.mb-2{margin-bottom:.5rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.mr-6{margin-right:1.5rem}.mr-8{margin-right:2rem}.mt-6{margin-top:1.5rem}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.table{display:table}.grid{display:grid}.contents{display:contents}.hidden{display:none}.size-12{width:3rem;height:3rem}.size-5{width:1.25rem;height:1.25rem}.h-10{height:2.5rem}.h-8{height:2rem}.h-9{height:2.25rem}.min-h-screen{min-height:100vh}.w-9{width:2.25rem}.w-auto{width:auto}.w-full{width:100%}.max-w-\[200px\]{max-width:200px}.max-w-none{max-width:none}.flex-1{flex:1 1 0%}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.list-inside{list-style-position:inside}.list-decimal{list-style-type:decimal}.list-disc{list-style-type:disc}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-20{gap:5rem}.gap-3{gap:.75rem}.gap-6{gap:1.5rem}.space-y-1\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.375rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.375rem * var(--tw-space-y-reverse))}.space-y-2>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.space-y-6>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.overflow-x-clip{overflow-x:clip}.whitespace-nowrap{white-space:nowrap}.rounded{border-radius:.25rem}.rounded-full{border-radius:9999px}.rounded-md{border-radius:calc(var(--radius) - 2px)}.rounded-xl{border-radius:.75rem}.border{border-width:1px}.border-2{border-width:2px}.border-brand{--tw-border-opacity:1;border-color:rgb(133 159 67/var(--tw-border-opacity,1))}.border-input{border-color:hsl(var(--input))}.bg-background{background-color:hsl(var(--background))}.bg-brand{--tw-bg-opacity:1;background-color:rgb(133 159 67/var(--tw-bg-opacity,1))}.bg-card{background-color:hsl(var(--card))}.bg-destructive{background-color:hsl(var(--destructive))}.bg-primary{background-color:hsl(var(--primary))}.bg-secondary{background-color:hsl(var(--secondary))}.bg-slate-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity,1))}.bg-white\/95{background-color:hsla(0,0%,100%,.95)}.bg-\[radial-gradient\(rgba\(15\2c 23\2c 42\2c 0\.045\)_1px\2c transparent_1px\)\]{background-image:radial-gradient(rgba(15,23,42,.045) 1px,transparent 0)}.p-2{padding:.5rem}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-8{padding-left:2rem;padding-right:2rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-8{padding-top:2rem;padding-bottom:2rem}.pt-0{padding-top:0}.text-right{text-align:right}.text-2xl{font-size:1.5rem;line-height:2rem}.text-3xl{font-size:1.875rem;line-height:2.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-none{line-height:1}.tracking-tight{letter-spacing:-.025em}.text-brand{--tw-text-opacity:1;color:rgb(133 159 67/var(--tw-text-opacity,1))}.text-card-foreground{color:hsl(var(--card-foreground))}.text-destructive-foreground{color:hsl(var(--destructive-foreground))}.text-gray-600{--tw-text-opacity:1;color:rgb(75 85 99/var(--tw-text-opacity,1))}.text-muted-foreground{color:hsl(var(--muted-foreground))}.text-primary{color:hsl(var(--primary))}.text-primary-foreground{color:hsl(var(--primary-foreground))}.text-secondary-foreground{color:hsl(var(--secondary-foreground))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.shadow,.shadow-sm{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.outline{outline-style:solid}.ring{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px)}.backdrop-blur,.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.transition-transform{transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@keyframes enter{0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))}}@keyframes exit{to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))}}.fade-out{--tw-exit-opacity:0}.\[background-size\:22px_22px\]{background-size:22px 22px}@font-face{font-family:IRANYekanX;src:url(/fonts/IRANYekanX-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IRANYekanX;src:url(/fonts/IRANYekanX-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}body{font-family:IRANYekanX,Arial,Helvetica,sans-serif}html{scroll-behavior:smooth}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:scale-105:hover,.hover\:scale-110:hover{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}.hover\:bg-accent:hover{background-color:hsl(var(--accent))}.hover\:bg-accent\/50:hover{background-color:hsl(var(--accent)/.5)}.hover\:bg-brand\/5:hover{background-color:rgba(133,159,67,.05)}.hover\:bg-destructive\/90:hover{background-color:hsl(var(--destructive)/.9)}.hover\:bg-primary\/90:hover{background-color:hsl(var(--primary)/.9)}.hover\:bg-secondary\/80:hover{background-color:hsl(var(--secondary)/.8)}.hover\:font-bold:hover{font-weight:700}.hover\:text-accent-foreground:hover{color:hsl(var(--accent-foreground))}.hover\:underline:hover{text-decoration-line:underline}.focus-visible\:outline-none:focus-visible{outline:2px solid transparent;outline-offset:2px}.focus-visible\:ring-1:focus-visible{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.focus-visible\:ring-ring:focus-visible{--tw-ring-color:hsl(var(--ring))}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:opacity-50:disabled{opacity:.5}.group.toaster .group-\[\.toaster\]\:border-border{border-color:hsl(var(--border))}.group.toast .group-\[\.toast\]\:bg-muted{background-color:hsl(var(--muted))}.group.toast .group-\[\.toast\]\:bg-primary{background-color:hsl(var(--primary))}.group.toaster .group-\[\.toaster\]\:bg-background{background-color:hsl(var(--background))}.group.toast .group-\[\.toast\]\:text-muted-foreground{color:hsl(var(--muted-foreground))}.group.toast .group-\[\.toast\]\:text-primary-foreground{color:hsl(var(--primary-foreground))}.group.toaster .group-\[\.toaster\]\:text-foreground{color:hsl(var(--foreground))}.group.toaster .group-\[\.toaster\]\:shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}@supports (backdrop-filter:var(--tw )){.supports-\[backdrop-filter\]\:bg-white\/95{background-color:hsla(0,0%,100%,.95)}}@media (min-width:768px){.md\:block{display:block}.md\:flex{display:flex}.md\:hidden{display:none}.md\:justify-center{justify-content:center}.md\:px-6{padding-left:1.5rem;padding-right:1.5rem}}@media (min-width:1024px){.lg\:px-8{padding-left:2rem;padding-right:2rem}}.\[\&_svg\]\:pointer-events-none svg{pointer-events:none}.\[\&_svg\]\:\!size-8 svg{width:2rem!important;height:2rem!important}.\[\&_svg\]\:size-4 svg{width:1rem;height:1rem}.\[\&_svg\]\:shrink-0 svg{flex-shrink:0}
/* ---- 2. The font variable, which the landing sets with a class on <body> ---- */
:root{--font-vazirmatn:"Vazirmatn","Vazirmatn Fallback"}


/* ---- 3. src/styles/landing.css ---- */
/* ==========================================================================
   Landing page styles, ported from design/KetabChat Landing (pages/landing.html)
   --------------------------------------------------------------------------
   Every selector is scoped under `.kc` so the design's generic class names
   (.grid, .container, .card, .btn) cannot collide with Tailwind's utilities,
   which the rest of the site (terms/privacy) still relies on. `.kc x` has a
   specificity of (0,2,0) and always wins over Tailwind's (0,1,0).
   The only unscoped rules are the body-level ones the drawer needs.
   ========================================================================== */

.kc {
  /* ============ Tokens ============ */
  --brand-50: #f0fbef;
  --brand-100: #dcf5da;
  --brand-200: #bfedbb;
  --brand-300: #9be297;
  --brand-400: #7fd97a;
  --brand-500: #67d163;
  --brand-600: #4cbb48;
  --brand-700: #2f8b2c;
  --brand-800: #256f23;
  --brand-900: #1e5220;
  --ink-900: #0f172a;
  --ink-700: #334155;
  --ink-500: #64748b;
  --ink-300: #cbd5e1;
  --ink-100: #f1f5f9;
  --bg: #f8fafc;
  --white: #ffffff;
  --r-ctl: 12px;
  --r-card: 24px;
  --shadow-card: 0 8px 24px -4px rgba(15, 23, 42, 0.05);
  --shadow-pop: 0 24px 56px -12px rgba(15, 23, 42, 0.18);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  font-family: var(--font-vazirmatn), Vazirmatn, Tahoma, "Segoe UI", sans-serif;
  color: var(--ink-900);
  line-height: 1.9;
}

.kc *,
.kc *::before,
.kc *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Every `.kc x { display: ... }` rule below outranks the browser's own
   `[hidden] { display: none }` on specificity, so the hidden attribute silently
   stops working: the catalogue filters set it on 243 cards and none of them
   disappeared. One rule restores it everywhere instead of adding a [hidden]
   variant to each selector. */
.kc [hidden] {
  display: none !important;
}

.kc .container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 24px;
  width: 100%;
}
.kc h1,
.kc h2,
.kc h3 {
  line-height: 1.65;
}
.kc h2.sec {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800;
  text-align: center;
}
.kc .sec-sub {
  color: var(--ink-500);
  font-size: 18px;
  text-align: center;
  margin-top: 8px;
}

/* Anchor targets must clear the sticky header. */
.kc section[id],
.kc footer[id] {
  scroll-margin-top: 84px;
}

/* ============ Reveal system ============ */
.kc .rv {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s var(--ease-out),
    transform 0.7s var(--ease-out);
}
.kc .rv.inview {
  opacity: 1;
  transform: none;
}
.kc .rv[data-d="1"] {
  transition-delay: 0.08s;
}
.kc .rv[data-d="2"] {
  transition-delay: 0.16s;
}
.kc .rv[data-d="3"] {
  transition-delay: 0.24s;
}
.kc .rv[data-d="4"] {
  transition-delay: 0.32s;
}
@media (prefers-reduced-motion: reduce) {
  .kc *,
  .kc *::before,
  .kc *::after {
    animation: none !important;
    transition: none !important;
  }
  .kc .rv {
    opacity: 1;
    transform: none;
  }
}

/* ============ Progress bar ============ */
.kc #progress {
  position: fixed;
  top: 0;
  right: 0;
  height: 3px;
  width: 100%;
  background: var(--brand-500);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  z-index: 99;
  transition: transform 0.1s linear;
}

/* ============ Buttons ============ */
.kc .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--r-ctl);
  padding: 14px 26px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    background 0.25s;
}
.kc .btn:active {
  transform: scale(0.97);
}
.kc .btn-primary {
  background: var(--brand-500);
  color: var(--ink-900);
}
.kc .btn-primary:hover {
  background: var(--brand-400);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -8px rgba(103, 209, 99, 0.55);
}
.kc .btn-secondary {
  background: var(--white);
  color: var(--ink-900);
  border: 1.5px solid var(--ink-300);
}
.kc .btn-secondary:hover {
  border-color: var(--brand-500);
  background: var(--brand-50);
  transform: translateY(-2px);
}
.kc .btn-ghost {
  background: transparent;
  color: var(--ink-700);
}
.kc .btn-ghost:hover {
  background: var(--ink-100);
}

/* ============ Focus system ============ */
/* Ring is ALWAYS visible on its own surface (>=3:1). Never remove without replacing. */
.kc :focus-visible {
  outline: 2px solid var(--brand-700);
  outline-offset: 2px;
  border-radius: 4px;
}
.kc .btn-primary:focus-visible,
.kc .btn-white:focus-visible,
.kc .final-band :focus-visible {
  outline-color: var(--ink-900);
} /* on green surfaces */
.kc footer :focus-visible,
.kc .ref-card :focus-visible {
  outline-color: var(--brand-300);
} /* on navy */
.kc .card:focus-visible,
.kc .tst:focus-visible {
  outline-offset: 3px;
}
.kc .skip-link {
  position: absolute;
  top: -100px;
  right: 16px;
  z-index: 200;
  background: var(--white);
  color: var(--ink-900);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 20px;
  border-radius: 0 0 12px 12px;
  box-shadow: var(--shadow-card);
  transition: top 0.2s var(--ease-out);
  text-decoration: none;
}
.kc .skip-link:focus-visible {
  top: 0;
}

/* ============ Header ============ */
.kc header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(248, 250, 252, 0.82);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.kc header.scrolled {
  border-bottom-color: var(--ink-100);
}
.kc .header-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 14px;
}
.kc .logo svg {
  display: block;
  height: 36px;
  width: auto;
}
.kc nav {
  display: flex;
  gap: 4px;
}
.kc nav a {
  color: var(--ink-700);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 10px;
  transition:
    background 0.25s,
    color 0.25s;
}
.kc nav a:hover {
  background: var(--brand-50);
  color: var(--brand-800);
}
/* Persian nav labels are long, so the row runs out of width early. Scoped to
   the header so the drawer, which stacks them, keeps its own spacing. They
   tighten once and then give way to the burger above the phone breakpoint
   below, because the row collides with the CTA long before that. */
.kc header nav {
  gap: 2px;
  white-space: nowrap;
}
/* A two-line button label is the loudest symptom of a crowded header, and it
   drags the whole bar taller; let the row tighten instead. */
.kc .header-cta {
  white-space: nowrap;
}
.kc .burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 10px;
}
.kc .burger svg {
  display: block;
}
/* Tightens well before the row actually overflows: the first thing to give is
   the CTA, which wraps its label onto a second line and makes the whole header
   taller. Six links reach that point at about 1000px. Retune both numbers
   whenever NAV_LINKS gains or loses an entry. */
@media (max-width: 1000px) {
  .kc header nav a {
    padding: 9px 10px;
    font-size: 14.5px;
  }
}
/* Must follow the .burger base rule above: same specificity, so the later
   declaration is the one that wins. */
@media (max-width: 900px) {
  .kc header nav,
  .kc .header-cta {
    display: none;
  }
  .kc .burger {
    display: block;
  }
}

/* ============ Mobile drawer ============ */
.kc .scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  opacity: 0;
  visibility: hidden;
  z-index: 80;
  transition:
    opacity 0.3s var(--ease-out),
    visibility 0.3s;
}
body.kc-nav-open .kc .scrim {
  opacity: 1;
  visibility: visible;
}
.kc .drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: var(--white);
  z-index: 90;
  display: flex;
  flex-direction: column;
  padding: 20px 24px calc(24px + env(safe-area-inset-bottom));
  transform: translateX(100%);
  visibility: hidden; /* RTL: slides in from the right */
  transition:
    transform 0.38s var(--ease-out),
    visibility 0.38s;
  box-shadow: -24px 0 56px -12px rgba(15, 23, 42, 0.25);
}
body.kc-nav-open .kc .drawer {
  transform: none;
  visibility: visible;
}
.kc .drawer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kc .drawer-close {
  background: var(--ink-100);
  border: none;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background 0.25s;
}
.kc .drawer-close:hover {
  background: var(--brand-100);
}
.kc .drawer nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 20px;
}
.kc .drawer nav a {
  font-size: 17px;
  font-weight: 500;
  padding: 14px 16px;
  border-radius: 12px;
  opacity: 0;
  transform: translateX(16px); /* enters from logical start */
  transition:
    opacity 0.4s var(--ease-out),
    transform 0.4s var(--ease-out),
    background 0.25s;
}
body.kc-nav-open .kc .drawer nav a {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 55ms + 120ms);
}
.kc .drawer .btn {
  margin-top: auto;
  justify-content: center;
  width: 100%;
}
.kc .drawer-foot {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-100);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--ink-500);
}
.kc .drawer-foot a {
  color: var(--ink-700);
  text-decoration: none;
}

/* ============ Sticky mobile CTA ============ */
.kc .sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--ink-100);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  transform: translateY(120%);
  transition: transform 0.4s var(--ease-out);
}
.kc .sticky-cta.on {
  transform: none;
}
.kc .sticky-cta .txt {
  flex: 1;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-700);
}
.kc .sticky-cta .txt b {
  display: block;
  font-size: 14px;
  color: var(--ink-900);
}
.kc .sticky-cta .btn {
  padding: 12px 22px;
  white-space: nowrap;
}

/* ============ Hero ============ */
.kc .hero {
  position: relative;
  overflow: clip;
  padding-block: 48px 84px;
}
.kc .aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}
.kc .aurora.g {
  width: 560px;
  height: 560px;
  background: rgba(155, 226, 151, 0.5);
  top: -260px;
  left: 6%;
  animation: kc-drift1 24s ease-in-out infinite alternate;
}
.kc .aurora.o {
  width: 430px;
  height: 430px;
  background: rgba(191, 237, 187, 0.4);
  bottom: -160px;
  right: -80px;
  animation: kc-drift2 30s ease-in-out infinite alternate;
}
@keyframes kc-drift1 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(70px, 50px) scale(1.12);
  }
}
@keyframes kc-drift2 {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-60px, -40px) scale(0.94);
  }
}
.kc .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 48px;
  align-items: center;
}
.kc .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--brand-100);
  color: var(--brand-800);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  width: fit-content;
}
.kc .hero h1 {
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 900;
  line-height: 1.7;
  margin-top: 20px;
}
.kc .hero h1 .w {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.5em);
  animation: kc-wordIn 0.75s var(--ease-out) forwards;
  animation-delay: calc(var(--i) * 90ms + 150ms);
}
@keyframes kc-wordIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: none;
  }
}
.kc .hero h1 .hl {
  color: var(--brand-700);
  position: relative;
  white-space: nowrap;
}
.kc .hero h1 .hl::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0.08em;
  height: 0.14em;
  width: 100%;
  border-radius: 99px;
  background: var(--brand-300);
  transform: scaleX(0);
  transform-origin: right;
  animation: kc-underline 0.7s var(--ease-out) forwards;
  animation-delay: 1.15s;
  z-index: -1;
}
@keyframes kc-underline {
  to {
    transform: scaleX(1);
  }
}
.kc .hero .sub {
  color: var(--ink-500);
  font-size: 19px;
  max-width: 520px;
  margin-top: 18px;
}
.kc .cta-row {
  display: flex;
  gap: 14px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.kc .trust {
  color: var(--ink-500);
  font-size: 14px;
  margin-top: 22px;
}
.kc .trust b {
  color: var(--brand-800);
  font-weight: 600;
} /* AA: brand-700 was 4.14:1 at 14px */

/* Phone mockup */
.kc .phone-wrap {
  display: flex;
  justify-content: center;
  perspective: 1200px;
}
.kc .phone {
  width: 300px;
  background: var(--ink-900);
  border-radius: 48px;
  padding: 10px;
  box-shadow: var(--shadow-pop);
  transform: rotate(-1.2deg);
  transition: transform 0.6s var(--ease-out);
}
.kc .phone:hover {
  transform: rotate(0) translateY(-6px);
}
.kc .screen {
  background: var(--bg);
  border-radius: 38px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 600px;
}
.kc .appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--white);
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--ink-100);
}
.kc .appbar .who {
  display: flex;
  align-items: center;
  gap: 8px;
}
.kc .appbar .av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--brand-500);
  display: grid;
  place-items: center;
  font-size: 13px;
}
.kc .appbar b {
  font-size: 14px;
}
.kc .appbar .st {
  font-size: 11px;
  color: var(--brand-700);
}
.kc .chat {
  flex: 1;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  justify-content: flex-end;
}
.kc .msg {
  max-width: 82%;
  padding: 10px 14px;
  font-size: 12.5px;
  line-height: 1.75;
  opacity: 0;
  transform: translateY(10px) scale(0.9);
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.45s var(--ease-out);
}
.kc .msg.on {
  opacity: 1;
  transform: none;
}
.kc .msg.bot {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 16px 16px 16px 4px;
  transform-origin: bottom left;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
.kc .msg.user {
  align-self: flex-end;
  background: var(--brand-100);
  border-radius: 16px 16px 4px 16px;
  transform-origin: bottom right;
}
.kc .typing {
  display: none;
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 16px 16px 16px 4px;
  padding: 12px 16px;
}
.kc .typing.on {
  display: flex;
  gap: 4px;
}
.kc .typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-300);
  animation: kc-tp 1s infinite;
}
.kc .typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.kc .typing i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes kc-tp {
  0%,
  60%,
  100% {
    transform: none;
    opacity: 0.5;
  }
  30% {
    transform: translateY(-4px);
    opacity: 1;
  }
}
.kc .sugg {
  display: flex;
  gap: 8px;
  justify-content: flex-start;
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
}
.kc .sugg.on {
  opacity: 1;
}
.kc .sugg span {
  font-size: 11.5px;
  font-weight: 500;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: 6px 12px;
}
.kc .inputbar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  padding: 10px 12px 14px;
  border-top: 1px solid var(--ink-100);
}
.kc .inputbar .field {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--ink-100);
  border-radius: 999px;
  padding: 9px 14px;
  font-size: 12px;
  color: var(--ink-500);
}
.kc .inputbar .send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-500);
  display: grid;
  place-items: center;
  flex: none;
}
.kc .inputbar .send svg {
  transform: rotate(180deg);
}

/* ============ Marquee ============ */
.kc .marquee {
  overflow: hidden;
  padding-block: 6px 40px;
  mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to left, transparent, #000 8%, #000 92%, transparent);
}
.kc .mq-track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: kc-mq 36s linear infinite;
}
@keyframes kc-mq {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(50%);
  }
}
.kc .chip {
  flex: none;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  color: var(--brand-800);
  font-size: 13.5px;
  font-weight: 500;
  border-radius: 999px;
  padding: 8px 18px;
}

/* ============ Bento ============ */
.kc .bento {
  padding-block: 24px 96px;
}
.kc .grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.kc .card {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-card);
  padding: 28px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.35s var(--ease-out),
    box-shadow 0.35s var(--ease-out);
}
.kc .card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px -12px rgba(15, 23, 42, 0.12);
}
.kc .card.big {
  grid-column: span 2;
  grid-row: span 1;
}
.kc .card h3 {
  font-size: 20px;
  font-weight: 600;
}
.kc .card p {
  color: var(--ink-500);
  font-size: 15px;
}
.kc .icon-tile {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--brand-50);
  display: grid;
  place-items: center;
}
.kc .icon-tile svg {
  stroke: var(--brand-700);
}
.kc .mini-chat {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 10px;
}
.kc .mini-chat .m {
  max-width: 88%;
  font-size: 13px;
  padding: 9px 13px;
  line-height: 1.75;
}
.kc .mini-chat .mu {
  align-self: flex-end;
  background: var(--brand-100);
  border-radius: 14px 14px 4px 14px;
}
.kc .mini-chat .mb {
  align-self: flex-start;
  background: var(--bg);
  border: 1px solid var(--ink-100);
  border-radius: 14px 14px 14px 4px;
}
/* micro visuals */
.kc .wave {
  display: flex;
  gap: 3px;
  align-items: flex-end;
  height: 26px;
  margin-top: auto;
}
.kc .wave i {
  width: 4px;
  border-radius: 2px;
  background: var(--brand-400);
  height: 30%;
}
.kc .inview .wave i {
  animation: kc-wv 1.1s ease-in-out infinite alternate;
}
.kc .wave i:nth-child(2n) {
  animation-delay: 0.15s;
}
.kc .wave i:nth-child(3n) {
  animation-delay: 0.3s;
}
@keyframes kc-wv {
  from {
    height: 25%;
  }
  to {
    height: 100%;
  }
}
.kc .scorebox {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--brand-700);
  font-weight: 800;
  font-size: 26px;
}
.kc .scorebox small {
  color: var(--ink-500);
  font-weight: 400;
  font-size: 13px;
}
.kc .ring {
  margin-top: auto;
  width: 44px;
  height: 44px;
}
.kc .ring circle {
  fill: none;
  stroke-width: 5;
}
.kc .ring .bgc {
  stroke: var(--ink-100);
}
.kc .ring .fgc {
  stroke: var(--brand-500);
  stroke-linecap: round;
  stroke-dasharray: 113;
  stroke-dashoffset: 113;
}
.kc .inview .ring .fgc {
  animation: kc-ringGo 1.6s var(--ease-out) forwards 0.3s;
}
@keyframes kc-ringGo {
  to {
    stroke-dashoffset: 34;
  }
}

/* ============ Video ============ */
.kc .video-sec {
  padding-block: 0 96px;
}
.kc .vid-shell {
  margin-top: 44px;
  position: relative;
  border-radius: 32px;
  padding: 14px;
  background: linear-gradient(150deg, var(--brand-200), var(--brand-50) 45%, var(--white));
  border: 1px solid var(--brand-100);
  box-shadow: var(--shadow-pop);
}
.kc .vid-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--ink-900);
  aspect-ratio: var(--vid-aspect, 16 / 9);
  display: grid;
}
.kc .vid-frame > video {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: var(--ink-900);
}
/* Poster overlay: sits on top until the viewer hits play */
.kc .vid-cover {
  grid-area: 1 / 1;
  position: relative;
  border: none;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  font-family: inherit;
  color: #fff;
  background:
    radial-gradient(120% 120% at 70% 10%, rgba(103, 209, 99, 0.35), transparent 55%),
    linear-gradient(200deg, #1e2a44, var(--ink-900));
  transition: opacity 0.45s var(--ease-out);
}
.kc .vid-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
.kc .vid-cover .veil {
  position: absolute;
  inset: 0;
  /* Keeps the title and play button legible over any poster still. */
  background: linear-gradient(to top, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.38));
}
.kc .vid-cover .cover-in {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px;
  text-align: center;
}
.kc .vid-play {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--brand-500);
  color: var(--ink-900);
  display: grid;
  place-items: center;
  position: relative;
  transition:
    transform 0.35s var(--ease-out),
    background 0.25s;
}
.kc .vid-play::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 2px solid rgba(103, 209, 99, 0.6);
  animation: kc-pulse 2.4s var(--ease-out) infinite;
}
@keyframes kc-pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.9;
  }
  70% {
    transform: scale(1.35);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.kc .vid-cover:hover .vid-play {
  transform: scale(1.08);
  background: var(--brand-400);
}
.kc .vid-cover .cover-title {
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 700;
  line-height: 1.7;
}
.kc .vid-cover .cover-meta {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 6px 14px;
}
/* Shown instead of the player when no video file has been dropped in yet */
.kc .vid-missing {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px;
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  line-height: 2;
  background:
    radial-gradient(120% 120% at 70% 10%, rgba(103, 209, 99, 0.28), transparent 55%),
    linear-gradient(200deg, #1e2a44, var(--ink-900));
}
.kc .vid-missing-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--brand-300);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
}
.kc .vid-note {
  color: var(--ink-500);
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
}

/* ============ Steps ============ */
.kc .steps-sec {
  padding-block: 0 96px;
}
.kc .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  margin-top: 44px;
  text-align: center;
}
.kc .step .num {
  width: 64px;
  height: 64px;
  margin-inline: auto;
  border-radius: 50%;
  background: var(--brand-100);
  color: var(--brand-700);
  font-size: 26px;
  font-weight: 900;
  display: grid;
  place-items: center;
}
.kc .step h3 {
  font-size: 20px;
  font-weight: 600;
  margin-top: 14px;
}
.kc .step p {
  color: var(--ink-500);
  font-size: 15px;
  margin-top: 6px;
}

/* ============ Social proof ============ */
.kc .proof {
  background: var(--brand-50);
  padding-block: 64px 88px;
}
.kc .stats {
  display: flex;
  justify-content: center;
  gap: 96px;
  flex-wrap: wrap;
}
.kc .stat {
  text-align: center;
}
.kc .stat .n {
  font-size: 40px;
  font-weight: 900;
  color: var(--brand-700);
  line-height: 1.5;
}
.kc .stat .l {
  color: var(--ink-700);
  font-size: 15px;
} /* AA: ink-500 on brand-50 was 4.48:1 */
.kc .tst-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 44px;
}
.kc .tst {
  background: var(--white);
  border: 1px solid var(--brand-100);
  border-radius: var(--r-card);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kc .tst p {
  font-size: 15px;
}
.kc .tst .who {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}
.kc .tst .av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-100);
  display: grid;
  place-items: center;
  font-size: 17px;
}
.kc .tst b {
  font-size: 15px;
  display: block;
}
.kc .tst small {
  color: var(--ink-500);
  font-size: 13px;
}
.kc .parent-strip {
  margin: 44px auto 0;
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  padding: 14px 26px;
  color: var(--brand-800);
  font-weight: 500;
  font-size: 15px;
}

/* ============ Referral ============ */
.kc .ref {
  padding-block: 96px;
}
.kc .ref-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--ink-900);
  border-radius: 32px;
  padding: 56px 64px;
  color: #fff;
  box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.35);
}
.kc .ref-copy h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
}
.kc .ref-copy p {
  opacity: 0.93;
  font-size: 18px;
  margin-top: 12px;
  max-width: 640px;
}
.kc .ref-chip {
  display: inline-flex;
  margin-top: 18px;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
}
.kc .bolt {
  flex: none;
  opacity: 0.92;
}
.kc .inview .bolt {
  animation: kc-wiggle 4s ease-in-out infinite;
}
@keyframes kc-wiggle {
  0%,
  100% {
    transform: rotate(-3deg);
  }
  50% {
    transform: rotate(3deg) translateY(-6px);
  }
}

/* ============ FAQ ============ */
.kc .faq {
  padding-block: 0 96px;
}
.kc .thread {
  max-width: 760px;
  margin: 44px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.kc .qa-row {
  display: flex;
}
.kc .qa-row.q {
  justify-content: flex-start;
}
.kc .qa-row.a {
  justify-content: flex-end;
  gap: 10px;
  align-items: flex-end;
}
.kc .qa-row .av {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-500);
  flex: none;
  display: grid;
  place-items: center;
  font-size: 14px;
}
.kc .bub {
  max-width: 560px;
  padding: 14px 20px;
  font-size: 15.5px;
  line-height: 1.85;
}
.kc .bub.q {
  background: var(--brand-100);
  border-radius: 20px 20px 6px 20px;
}
.kc .bub.a {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 20px 20px 20px 6px;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}
.kc .bub.cta {
  border: 1.5px solid var(--brand-500);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* ============ Final CTA ============ */
.kc .final {
  padding-block: 0 96px;
}
.kc .final-band {
  background: var(--brand-500);
  border-radius: 32px;
  padding: 64px;
  text-align: center;
  color: var(--ink-900);
  box-shadow: 0 24px 56px -12px rgba(15, 23, 42, 0.18);
}
.kc .final-band h2 {
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 800;
}
.kc .final-band p {
  opacity: 0.93;
  font-size: 18px;
  margin-top: 10px;
}
.kc .btn-white {
  background: #fff;
  color: var(--ink-900);
  font-size: 18px;
  padding: 16px 34px;
  margin-top: 26px;
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.18);
}
.kc .btn-white:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -6px rgba(0, 0, 0, 0.28);
}

/* ============ Footer ============ */
.kc footer {
  background: var(--ink-900);
  color: #fff;
  border-radius: 40px 40px 0 0;
  padding: 80px 0 36px;
}
.kc .f-cols {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr 0.8fr;
  gap: 48px;
}
.kc .f-brand p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 15px;
  margin-top: 18px;
  max-width: 330px;
}
.kc .f-col h4 {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 16px;
}
.kc .f-col a {
  display: block;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 15px;
  margin-bottom: 11px;
  transition: color 0.25s;
}
.kc .f-col a:hover {
  color: #fff;
}
/* Plain lines in a footer column (availability, hours) that are text rather
   than links, so they must not inherit the link colour or spacing. */
.kc .f-note {
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  margin-bottom: 11px;
  line-height: 1.9;
}
/* A second heading inside one column needs the space a new block would give it. */
.kc .f-h4-sub {
  margin-top: 26px;
}
/* <address> is the right element for the نشانی, but browsers default it to
   italic, which Vazirmatn has no true italic for, so the browser synthesises a
   slant that looks broken in Persian. */
.kc .f-address {
  font-style: normal;
}

.kc .socials {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}
.kc .socials a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  display: grid;
  place-items: center;
  margin: 0;
  transition:
    background 0.25s,
    transform 0.25s;
}
.kc .socials a:hover {
  background: var(--brand-600);
  transform: translateY(-3px);
}
.kc .f-legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 52px;
  padding-top: 26px;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 13px;
}
.kc .f-trust {
  display: flex;
  justify-content: center;
  gap: 16px;
  /* Was 40px; .f-legal used to sit below with a border-top and supply the
     separation and the footer's closing space. It has been removed. */
  margin-top: 52px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.kc .f-trust a {
  background: rgba(255, 255, 255, 0.94);
  border-radius: 16px;
  padding: 10px;
  display: grid;
  place-items: center;
  transition: transform 0.25s var(--ease-out);
}
.kc .f-trust a:hover {
  transform: translateY(-3px);
}

/* ============ Mobile ============ */
@media (max-width: 900px) {
  .kc .grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .kc .card.big {
    grid-column: span 2;
  }
  .kc .tst-grid {
    grid-template-columns: 1fr;
  }
  .kc .f-cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .kc .steps {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .kc .stats {
    gap: 44px;
  }
}
@media (max-width: 768px) {
  .kc header nav,
  .kc .header-cta {
    display: none;
  }
  .kc .burger {
    display: block;
  }
  .kc .sticky-cta {
    display: flex;
  }
  .kc footer {
    padding-bottom: 96px;
  } /* clear the sticky bar */
  .kc .hero {
    padding-block: 24px 56px;
  }
  .kc .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .kc .hero .sub {
    font-size: 17px;
  }
  .kc .grid {
    grid-template-columns: 1fr;
  }
  .kc .card.big {
    grid-column: span 1;
  }
  .kc .ref-card {
    flex-direction: column-reverse;
    text-align: center;
    padding: 40px 28px;
  }
  .kc .ref-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .kc .final-band {
    padding: 48px 24px;
  }
  .kc .bub {
    max-width: 85%;
  }
  .kc h2.sec {
    font-size: 26px;
  }
  .kc .vid-shell {
    padding: 8px;
    border-radius: 24px;
  }
  .kc .vid-play {
    width: 68px;
    height: 68px;
  }
}

/* ---- 3. src/styles/books.css ---- */
/* ==========================================================================
   Catalogue (/books) and book detail (/books/[slug]).
   --------------------------------------------------------------------------
   Ported from design/extracted2/pages/{books,book}.html. Everything stays under
   `.kc` like landing.css. Several class names (.card, .tag, .tst-grid, .phone)
   already exist for the landing page with different values, so the ones that
   differ are scoped again under .kc-catalog / .kc-book rather than edited in
   place, which would change the landing page.
   ========================================================================== */

/* ---------- shared ---------- */
.kc .crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ink-500);
  padding-block: 20px 0;
}
.kc .crumbs a {
  color: var(--ink-700);
  text-decoration: none;
}
.kc .crumbs a:hover {
  color: var(--brand-800);
}
.kc .crumbs .sep {
  color: var(--ink-300);
}

.kc .tag {
  font-size: 13px;
  font-weight: 500;
  background: var(--ink-100);
  color: var(--ink-700);
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
}
.kc .tag.b {
  background: var(--brand-100);
  color: var(--brand-800);
}
.kc a.tag:hover {
  background: var(--brand-200);
  color: var(--brand-900);
}

.kc .blk {
  padding-block: 0 88px;
}
.kc .blk-head {
  max-width: 720px;
  margin-bottom: 28px;
}

/* ---------- catalogue ---------- */
.kc .cat-hero {
  padding-block: 8px 40px;
}
.kc .cat-hero h1 {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 900;
}
.kc .cat-hero p {
  color: var(--ink-500);
  font-size: 18px;
  margin-top: 10px;
  max-width: 600px;
}
.kc .searchbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border: 1.5px solid var(--ink-100);
  border-radius: var(--r-ctl);
  padding: 4px 16px;
  margin-top: 26px;
  max-width: 560px;
  transition:
    border-color 0.25s,
    box-shadow 0.25s;
}
.kc .searchbar:focus-within {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 4px rgba(103, 209, 99, 0.18);
}
.kc .searchbar svg {
  flex: none;
  stroke: var(--ink-500);
}
.kc .searchbar input {
  flex: 1;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 16px;
  padding: 13px 0;
  color: var(--ink-900);
  outline: none;
}
.kc .searchbar input::placeholder {
  color: var(--ink-500);
}
.kc .searchbar .clear {
  border: none;
  background: var(--ink-100);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: inherit;
  color: var(--ink-700);
  flex: none;
}
.kc .filters {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 28px;
}
.kc .frow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.kc .frow > b {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-700);
  min-width: 66px;
}
.kc .fchips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kc .fchip {
  background: var(--white);
  border: 1px solid var(--ink-100);
  color: var(--ink-700);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  transition:
    background 0.2s,
    border-color 0.2s,
    color 0.2s;
}
.kc .fchip:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
}
.kc .fchip[aria-pressed="true"] {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: var(--ink-900);
  font-weight: 600;
}
.kc .resbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-100);
}
.kc .resbar .count {
  font-size: 15px;
  color: var(--ink-700);
}
.kc .resbar .count b {
  color: var(--ink-900);
}
.kc .reset {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 14px;
  color: var(--brand-700);
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}
.kc .bgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 28px;
}
.kc .bcard {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-card);
  padding: 16px;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    border-color 0.3s;
}
.kc .bcard:hover {
  transform: translateY(-4px);
  border-color: var(--brand-200);
  box-shadow: 0 20px 44px -12px rgba(15, 23, 42, 0.12);
  color: inherit;
}
.kc .cover {
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px;
  text-align: center;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
}
.kc .cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kc .cover .ttl {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--brand-900);
}
.kc .cover .grd {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-800);
  margin-top: 6px;
}
.kc .bcard h3 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
}
.kc .bmeta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: auto;
}
.kc .bmeta .tag {
  font-size: 12px;
  padding: 4px 10px;
}
.kc .empty {
  text-align: center;
  padding: 72px 24px;
  color: var(--ink-500);
}
.kc .empty b {
  display: block;
  font-size: 19px;
  color: var(--ink-900);
  margin-bottom: 8px;
}

/* ---------- book detail ---------- */
.kc .bk-hero {
  position: relative;
  overflow: clip;
  padding-block: 24px 64px;
}
.kc .bk-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}
.kc .bk-cover {
  aspect-ratio: 3 / 4;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: grid;
  place-items: center;
  padding: 28px;
  text-align: center;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  box-shadow: var(--shadow-pop);
}
.kc .bk-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.kc .bk-cover .ttl {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.6;
  color: var(--brand-900);
}
.kc .bk-cover .grd {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--brand-800);
  margin-top: 8px;
}
.kc .tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.kc .bk-hero h1 {
  font-size: clamp(30px, 3.8vw, 46px);
  font-weight: 900;
  margin-top: 16px;
}
.kc .bk-hero .lede {
  color: var(--ink-500);
  font-size: 18px;
  margin-top: 14px;
  max-width: 620px;
}

.kc .chaps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.kc .chap {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  padding: 14px 18px;
  font-family: inherit;
  font-size: 15px;
  text-align: start;
  cursor: pointer;
  color: inherit;
  transition:
    border-color 0.25s,
    transform 0.25s var(--ease-out),
    background 0.25s;
}
.kc .chap:hover {
  border-color: var(--brand-300);
  background: var(--brand-50);
  transform: translateY(-2px);
}
.kc .chap .n {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--brand-100);
  color: var(--brand-800);
  font-weight: 700;
  font-size: 14px;
  display: grid;
  place-items: center;
}
.kc .chap .go {
  margin-inline-start: auto;
  color: var(--brand-700);
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.25s;
}
.kc .chap:hover .go,
.kc .chap:focus-visible .go {
  opacity: 1;
}

.kc .demo-wrap {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 48px;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: var(--r-card);
  padding: 40px;
  box-shadow: var(--shadow-card);
}
.kc .demo-copy h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
}
.kc .demo-copy p {
  color: var(--ink-500);
  font-size: 17px;
  margin-top: 12px;
}
.kc .demo-copy ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}
.kc .demo-copy li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
}
.kc .demo-copy li svg {
  flex: none;
  stroke: var(--brand-700);
  margin-top: 6px;
}
/* The landing phone is 300px/48px/600px; this one sits in a narrower column. */
.kc-book .phone {
  width: auto;
  border-radius: 44px;
  padding: 9px;
  transform: none;
}
.kc-book .screen {
  border-radius: 36px;
  height: 560px;
}
.kc-book .appbar b {
  font-size: 13px;
}
.kc-book .appbar small {
  display: block;
  font-size: 10.5px;
  color: var(--ink-500);
}

.kc .two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.kc .sheet {
  background: var(--bg);
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  padding: 18px 20px;
  font-size: 14px;
  line-height: 2;
}
.kc .sheet h4 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
}
.kc .sheet ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kc .sheet li {
  padding-inline-start: 16px;
  position: relative;
  color: var(--ink-700);
}
.kc .sheet li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-400);
}
.kc .quiz {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kc .qopt {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--ink-100);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 14px;
}
.kc .qopt.ok {
  background: var(--brand-50);
  border-color: var(--brand-300);
  font-weight: 600;
}
.kc .qopt .mark {
  margin-inline-start: auto;
  color: var(--brand-700);
  font-weight: 700;
}

.kc details.qa {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s;
}
.kc details.qa + details.qa {
  margin-top: 10px;
}
.kc details.qa[open] {
  border-color: var(--brand-200);
}
.kc details.qa summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.kc details.qa summary::-webkit-details-marker {
  display: none;
}
.kc details.qa summary::after {
  content: "+";
  margin-inline-start: auto;
  color: var(--brand-700);
  font-size: 20px;
  font-weight: 400;
}
.kc details.qa[open] summary::after {
  content: "−";
}
.kc details.qa .ans {
  padding: 0 22px 20px;
  color: var(--ink-700);
  font-size: 15px;
}

/* Landing shows three testimonials per row; the book page shows two. */
.kc-book .tst-grid {
  grid-template-columns: repeat(2, 1fr);
}
.kc .rel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.kc .relcard {
  background: var(--white);
  border: 1px solid var(--ink-100);
  border-radius: 18px;
  padding: 18px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition:
    transform 0.25s var(--ease-out),
    border-color 0.25s;
}
.kc .relcard:hover {
  transform: translateY(-3px);
  border-color: var(--brand-300);
  color: inherit;
}
.kc .relcard b {
  font-size: 15px;
  font-weight: 600;
}
.kc .relcard small {
  color: var(--ink-500);
  font-size: 13px;
}

@media (max-width: 1000px) {
  .kc .bgrid {
    grid-template-columns: repeat(3, 1fr);
  }
  .kc .chaps,
  .kc .rel {
    grid-template-columns: repeat(2, 1fr);
  }
  .kc .demo-wrap {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .kc-book .phone {
    max-width: 320px;
    margin-inline: auto;
  }
}
@media (max-width: 760px) {
  .kc .bgrid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .kc .frow > b {
    min-width: 100%;
  }
  .kc .bk-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .kc .bk-cover {
    max-width: 220px;
  }
  .kc .chaps,
  .kc .two,
  .kc-book .tst-grid {
    grid-template-columns: 1fr;
  }
  .kc .demo-wrap {
    padding: 24px;
  }
}

/* ---- 3. src/styles/blog.css ---- */
/* ==========================================================================
   Blog index (/blog) and article (/blog/[slug]).
   Ported from design/extracted3/pages/{blog,post}.html.

   Each page is scoped to its own class: both define .ph and card styles with
   different values, and .card is already used by the landing and book pages.
   ========================================================================== */

/* ---------- index ---------- */
.kc-blog .bh{padding-block:16px 0;max-width:720px}
.kc-blog .bh h1{font-size:clamp(30px,3.8vw,46px);font-weight:900}
.kc-blog .bh p{color:var(--ink-500);font-size:18px;margin-top:12px}
.kc-blog .cats{display:flex;gap:8px;flex-wrap:wrap;margin-top:30px}
.kc-blog .cats button{background:var(--white);border:1px solid var(--ink-100);color:var(--ink-700);font-family:inherit;font-size:14px;font-weight:500;border-radius:999px;padding:8px 16px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.kc-blog .cats button:hover{border-color:var(--brand-300);background:var(--brand-50)}
.kc-blog .cats button[aria-pressed="true"]{background:var(--brand-500);border-color:var(--brand-500);color:var(--ink-900);font-weight:600}
.kc-blog .lead{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center;background:var(--white);border:1px solid var(--brand-100);border-radius:var(--r-card);padding:40px;margin-top:36px;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.kc-blog .lead:hover{transform:translateY(-3px);box-shadow:0 20px 44px -12px rgba(15,23,42,.12);color:inherit}
.kc-blog .lead .cat{color:var(--brand-800);font-size:14px;font-weight:600}
.kc-blog .lead h2{font-size:clamp(22px,2.5vw,32px);font-weight:800;margin-top:10px}
.kc-blog .lead p{color:var(--ink-500);font-size:17px;margin-top:12px}
.kc-blog .lead .meta{color:var(--ink-500);font-size:13.5px;margin-top:16px}
.kc-blog .thumb{aspect-ratio:16/10;border-radius:18px;background:var(--brand-50);border:1px solid var(--brand-100);display:grid;place-items:center;font-size:56px}
.kc-blog .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:32px}
.kc-blog .pcard{background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-card);padding:28px;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s}
.kc-blog .pcard:hover{transform:translateY(-4px);border-color:var(--brand-200);box-shadow:0 20px 44px -12px rgba(15,23,42,.12);color:inherit}
.kc-blog .pcard .cat{color:var(--brand-800);font-size:13.5px;font-weight:600}
.kc-blog .pcard h3{font-size:19px;font-weight:700;line-height:1.65}
.kc-blog .pcard p{color:var(--ink-500);font-size:15px}
.kc-blog .pcard .meta{color:var(--ink-500);font-size:13px;margin-top:auto;padding-top:8px}
.kc-blog .empty{text-align:center;padding:64px 24px;color:var(--ink-500)}
.kc-blog .final{padding-block:88px 96px}
@media (max-width:1000px){.kc-blog .pgrid{grid-template-columns:repeat(2,1fr)}.kc-blog .lead{grid-template-columns:1fr;padding:28px}}
@media (max-width:680px){.kc-blog .pgrid{grid-template-columns:1fr}}

/* ---------- article ---------- */
.kc-post .art{max-width:760px;margin-inline:auto;padding-block:16px 0}
.kc-post .art .cat{color:var(--brand-800);font-size:14.5px;font-weight:600}
.kc-post .art h1{font-size:clamp(28px,3.4vw,42px);font-weight:900;margin-top:10px}
.kc-post .art .meta{color:var(--ink-500);font-size:14px;margin-top:14px;padding-bottom:26px;border-bottom:1px solid var(--ink-100)}
.kc-post .art .excerpt{font-size:19px;color:var(--ink-700);margin-top:26px;line-height:2}
.kc-post .art h2{font-size:23px;font-weight:700;margin-top:40px}
.kc-post .art p{font-size:17px;color:var(--ink-700);margin-top:12px;text-wrap:pretty}
.kc-post .pull{background:var(--brand-50);border:1px solid var(--brand-100);border-radius:20px;padding:26px 28px;margin-top:40px;display:flex;flex-direction:column;gap:12px}
.kc-post .pull b{font-size:17px}
.kc-post .pull p{color:var(--ink-700);font-size:15.5px;margin:0}
.kc-post .pull .btn{align-self:flex-start;margin-top:4px}
.kc-post .share{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid var(--ink-100);color:var(--ink-500);font-size:14px}
.kc-post .share a{background:var(--white);border:1px solid var(--ink-100);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:500;color:var(--ink-700);text-decoration:none;transition:border-color .2s,background .2s}
.kc-post .share a:hover{border-color:var(--brand-300);background:var(--brand-50);color:var(--brand-800)}
.kc-post .more{padding-block:80px 0}
.kc-post .more h2{font-size:24px;font-weight:800;margin-bottom:24px}
.kc-post .pgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.kc-post .pcard{background:var(--white);border:1px solid var(--ink-100);border-radius:var(--r-card);padding:26px;box-shadow:var(--shadow-card);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:10px;transition:transform .3s var(--ease-out),border-color .3s}
.kc-post .pcard:hover{transform:translateY(-4px);border-color:var(--brand-200);color:inherit}
.kc-post .pcard .cat{color:var(--brand-800);font-size:13.5px;font-weight:600}
.kc-post .pcard h3{font-size:18px;font-weight:700;line-height:1.65}
.kc-post .pcard p{color:var(--ink-500);font-size:14.5px}
.kc-post .final{padding-block:88px 96px}
@media (max-width:900px){.kc-post .pgrid{grid-template-columns:1fr}}

/* ==========================================================================
   Article blocks.

   From here down, nothing on this page is rendered by Next: /blog and
   /blog/<slug>/ are written straight into the bucket by the Telegram poster
   (tools/telegram-poster/src/blog), which is why a new post needs no build.
   This file is still the source of truth for how the blog LOOKS, though:
   sync-blog-theme.sh copies it, landing.css and books.css into the poster's
   theme, so a change here reaches every post the next time that script runs
   and the one theme.css is uploaded. See docs/blog-pipeline.md.
   ========================================================================== */

/* ---------- index: real cover images, where a post has one ---------- */
.kc-blog .thumb img,
.kc-blog .pthumb img{width:100%;height:100%;object-fit:cover;display:block}
.kc-blog .pthumb{aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--brand-50);border:1px solid var(--brand-100);margin-bottom:4px}

/* ---------- article: the cover, sitting under the excerpt ---------- */
.kc-post .cover{margin-top:30px;border-radius:20px;overflow:hidden;border:1px solid var(--ink-100);background:var(--brand-50)}
.kc-post .cover img{width:100%;height:auto;display:block}

/* ---------- images and figures inside the body ---------- */
.kc-post figure{margin-top:34px}
/* width:auto with a height cap, not width:100%. Most pictures in a post are
   forwarded from a phone, so a portrait screenshot is the common case, and at
   full column width a 900x1844 one renders 1457px tall and buries the rest of
   the article. A landscape picture still fills the column. */
.kc-post figure img{max-width:100%;max-height:70vh;width:auto;height:auto;display:block;margin-inline:auto;border-radius:18px;border:1px solid var(--ink-100)}
.kc-post figcaption{color:var(--ink-500);font-size:14px;margin-top:10px;text-align:center}

/* ---------- video: a file we host, or an embedded player ---------- */
.kc-post .vid video{width:100%;height:auto;display:block;border-radius:18px;background:var(--ink-900)}
.kc-post .embed{position:relative;aspect-ratio:16/9;margin-top:34px;border-radius:18px;overflow:hidden;border:1px solid var(--ink-100);background:var(--ink-900)}
.kc-post .embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ---------- a downloadable file ---------- */
.kc-post .filecard{display:flex;align-items:center;gap:14px;background:var(--white);border:1px solid var(--ink-100);border-radius:18px;padding:18px 20px;margin-top:30px;text-decoration:none;color:inherit;box-shadow:var(--shadow-card);transition:border-color .2s,transform .2s var(--ease-out)}
.kc-post .filecard:hover{border-color:var(--brand-300);transform:translateY(-2px);color:inherit}
.kc-post .filecard .fi{width:42px;height:42px;flex:none;border-radius:12px;background:var(--brand-50);border:1px solid var(--brand-100);display:grid;place-items:center;font-size:20px}
.kc-post .filecard b{font-size:15.5px;font-weight:700;display:block}
.kc-post .filecard span{color:var(--ink-500);font-size:13.5px}

/* ---------- quotes and lists ---------- */
.kc-post blockquote{margin-top:32px;padding:4px 20px;border-inline-start:3px solid var(--brand-400);color:var(--ink-700)}
.kc-post blockquote p{font-size:18px;margin:0}
.kc-post blockquote cite{display:block;color:var(--ink-500);font-size:14px;font-style:normal;margin-top:8px}
.kc-post ul,
.kc-post ol{margin-top:16px;padding-inline-start:22px}
.kc-post ul li{list-style:disc}
.kc-post ol li{list-style:decimal}
.kc-post li{font-size:17px;color:var(--ink-700);margin-top:8px;padding-inline-start:4px}

/* ---------- provenance, printed at the foot of a post built from a source ---------- */
.kc-post .src{margin-top:40px;padding-top:22px;border-top:1px solid var(--ink-100);color:var(--ink-500);font-size:14px}
.kc-post .src a{color:var(--brand-800);text-decoration:none}
.kc-post .src a:hover{text-decoration:underline}
.kc-post .tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.kc-post .tags span{background:var(--brand-50);border:1px solid var(--brand-100);color:var(--brand-800);border-radius:999px;padding:5px 13px;font-size:13px}