/* ============================================================
   Kodiac site pages · Website Update Build Spec v2 (2 October 2026)
   Team-page template (Part 1) and the Pricing, About, Contact,
   Insights and FAQ pages (Part 6). Loaded after kodiac-v4.css,
   home.css and product.css, which provide the design system, the
   header and footer, the hero card and the status chips.
   ============================================================ */

/* ---------- Shared ---------- */
.pg-lead--720 { max-width: 720px; }
.pg-lead--680 { max-width: 680px; }
.pg-bold { font-size: 19px; font-weight: 700; line-height: 1.5; color: #0A0B0D; margin: 16px 0 0; }
.k-s--ink .pg-bold { color: #FFFFFF; }
.k-h2--980 { max-width: 980px; }
.k-h2--900 { max-width: 900px; }
.k-h1--1000 { max-width: 1000px; }
.pg-grey { color: #6B6F78; }
.k-k--grey { color: #6B6F78; }
.k-k--blue { color: #1D4FFF; }
.k-k--lime { color: #C6FF3D; }
.k-k--dim { color: #A9ADB6; }

/* ---------- T1 · Hero ---------- */
.tp-hero .k-hero__grid { grid-template-columns: 1fr; gap: 48px; }
@media (min-width: 961px) { .tp-hero .k-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: 64px; } }
.tp-hero .k-hero__body { max-width: 540px; margin-top: 28px; }
.tp-hero .hc figcaption { margin-top: 14px; }

/* ---------- T2 · 01 What's changing ---------- */
.tp-two { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tp-card { background: #15171C; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 32px; }
.tp-card .k-k { color: #A9ADB6; }
.tp-card--lime .k-k { color: #C6FF3D; }
.tp-card__t { font-size: 17px; line-height: 1.55; color: #D5D8DD; margin: 12px 0 0; }

/* ---------- T3 · 02 What Kodiac gives ---------- */
.tp-mods { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.tp-mod { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 16px; padding: 28px; }
.tp-mod .k-k { color: #1D4FFF; }
.tp-mod__h3 { font-size: 22px; line-height: 1.15; letter-spacing: -0.01em; color: #0A0B0D; margin: 12px 0 0; }
.tp-mod__t { font-size: 15.5px; line-height: 1.55; color: #4A4D55; margin: 12px 0 0; flex: 1; }
.tp-mod .k-link { margin-top: 20px; }

/* ---------- T4 · 03 Questions ---------- */
.tp-qs { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tp-q { background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 14px; padding: 22px 24px; margin: 0; font-family: 'Archivo', 'Inter', system-ui, sans-serif; font-weight: 700; font-stretch: 100%; font-variation-settings: 'wdth' 100; font-size: 19px; line-height: 1.3; color: #0A0B0D; }

/* ---------- T5 · 04 Role ---------- */
.tp-role { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.tp-item { border-top: 2px solid #0A0B0D; padding-top: 22px; }
.tp-item__t { font-size: 19px; font-weight: 700; line-height: 1.3; color: #0A0B0D; margin: 0; }
.tp-item__x { font-size: 15px; line-height: 1.55; color: #4A4D55; margin: 8px 0 0; }
.tp-work { margin-top: 56px; }
.tp-work .k-k { color: #6B6F78; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.tp-chip { display: inline-block; background: #FFFFFF; border: 1px solid #A9BBFF; border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 600; color: #0A0B0D; text-decoration: none; transition: border-color 0.15s; }
.tp-chip:hover { border-color: #0A0B0D; }

/* ---------- T6 · 05 Enterprise knowledge ---------- */
.tp-know { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tp-know__card { background: #15171C; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 28px; }
.tp-know__t { font-size: 17px; font-weight: 700; color: #FFFFFF; margin: 0; }
.tp-know__x { font-size: 15.5px; line-height: 1.55; color: #D5D8DD; margin: 8px 0 0; }
.tp-sector { margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: #B4B8C0; max-width: 900px; }
.tp-sector a { color: #C6FF3D; font-weight: 600; text-decoration: none; }
.tp-sector a:hover { text-decoration: underline; }

/* ---------- Hero visual cards (one per team page) ---------- */
.hv-q { background: #0A0B0D; color: #FFFFFF; border-radius: 10px; padding: 12px 14px; font-size: 14px; line-height: 1.45; margin: 8px 0 0; }
.hv-box { background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 10px; padding: 14px 16px; margin: 10px 0 0; }
.hv-box__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.hv-box__t { font-size: 14px; line-height: 1.5; color: #0A0B0D; margin: 8px 0 0; }
.hv-box__s { font-size: 12.5px; color: #6B6F78; margin: 4px 0 0; }
.hv-lab2 { margin-top: 18px; }
.hv-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(10,11,13,0.12); font-size: 13px; color: #4A4D55; }
.hv-foot b { color: #0A0B0D; font-weight: 700; }
.hv-foot small { display: block; font-size: 12px; color: #6B6F78; }
.hv-tbl { background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 10px; margin: 8px 0 0; overflow: hidden; }
.hv-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 14px; font-size: 13.5px; color: #4A4D55; border-top: 1px solid rgba(10,11,13,0.08); }
.hv-row:first-child { border-top: 0; }
.hv-row b { color: #0A0B0D; font-weight: 700; }
.hv-row .hv-num { font-weight: 700; color: #0A0B0D; font-size: 15px; }
.hv-fix { background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 10px; padding: 12px 14px; margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: #4A4D55; }
.hv-fix b { color: #0A0B0D; }
.hv-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.hv-chips .k-k { margin-right: 4px; width: 48px; }
.hv-chip { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 4px 9px; border-radius: 999px; background: #EEF0F3; color: #4A4D55; }
.hv-chip--lime { background: #C6FF3D; color: #0A0B0D; }
.hv-chip--ink { background: #0A0B0D; color: #C6FF3D; }
.hv-arr { color: #A9ADB6; font-size: 12px; }
.hv-code { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.6; border-radius: 10px; padding: 12px 14px; margin: 8px 0 0; white-space: pre; overflow-x: auto; }
.hv-code--ink { background: #0A0B0D; color: #FFFFFF; }
.hv-code--ink .lime { color: #C6FF3D; }
.hv-code--white { background: #FFFFFF; border: 1px solid #E3E5E9; color: #0A0B0D; }
.hv-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; }
.hv-src small { font-size: 12px; color: #6B6F78; margin-left: 4px; }
.hv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 0; }
.hv-stat { background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 10px; padding: 12px 14px; }
.hv-stat b { display: block; font-family: 'Archivo', 'Inter', system-ui, sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: #0A0B0D; }
.hv-stat span { display: block; font-size: 12px; color: #6B6F78; margin-top: 4px; }
.hv-stat--ink { background: #0A0B0D; border-color: #0A0B0D; }
.hv-stat--ink b { color: #C6FF3D; }
.hv-stat--ink span { color: #A9ADB6; }

/* ---------- Pricing ---------- */
.pr-hero { padding: calc(var(--nav) + 96px) 0 56px; background: #FFFFFF; }
.pr-plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; align-items: stretch; }
.pr-plan { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 16px; padding: 26px 22px; }
.pr-plan__n { font-size: 22px; line-height: 1.1; color: #0A0B0D; margin: 0; }
.pr-plan__p { font-size: 34px; line-height: 1; letter-spacing: -0.02em; color: #0A0B0D; margin: 14px 0 0; }
.pr-plan__p small { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0; color: #6B6F78; }
.pr-plan__p--ent { font-size: 26px; }
.pr-plan__bill { font-size: 12.5px; line-height: 1.45; color: #6B6F78; margin: 10px 0 0; }
.pr-plan__hr { height: 1px; background: rgba(10,11,13,0.12); margin: 16px 0; }
.pr-plan__tok { font-size: 14px; font-weight: 700; color: #0A0B0D; margin: 0; }
.pr-plan__sc { font-size: 14px; line-height: 1.5; color: #6B6F78; margin: 8px 0 0; }
.pr-plan__inc { font-size: 14px; color: #0A0B0D; margin: 10px 0 0; }
.pr-plan__for { font-size: 14px; line-height: 1.5; color: #6B6F78; margin: 10px 0 0; flex: 1; }
.pr-plan .k-btn { width: 100%; margin-top: 22px; text-align: center; }
.pr-plan--ink { background: #0A0B0D; border-color: #0A0B0D; }
.pr-plan--ink .pr-plan__n, .pr-plan--ink .pr-plan__p, .pr-plan--ink .pr-plan__tok, .pr-plan--ink .pr-plan__inc { color: #FFFFFF; }
.pr-plan--ink .pr-plan__p small, .pr-plan--ink .pr-plan__bill, .pr-plan--ink .pr-plan__sc, .pr-plan--ink .pr-plan__for { color: #B4B8C0; }
.pr-plan--ink .pr-plan__hr { background: rgba(255,255,255,0.16); }
.pr-plan--ink .k-btn { background: #C6FF3D; border-color: #C6FF3D; color: #0A0B0D; }
.pr-plan--ink .k-btn:hover { background: #D6FF6B; border-color: #D6FF6B; }
.pr-notes { margin-top: 32px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pr-notes p { font-size: 14px; line-height: 1.55; color: #6B6F78; margin: 0; }
.pr-notes b { color: #0A0B0D; }
.pr-mods { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: stretch; }
.pr-mod { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 14px; padding: 24px; }
.pr-tag { display: inline-block; align-self: flex-start; background: #EEF2FF; color: #1D4FFF; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; padding: 5px 8px; border-radius: 6px; }
.pr-mod__t { font-size: 15.5px; line-height: 1.55; color: #4A4D55; margin: 14px 0 0; flex: 1; }
.pr-mod .k-link { margin-top: 18px; }
.pr-tok { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.pr-tok .k-btn { margin-top: 28px; }
.pr-usage { background: #FFFFFF; border: 1px solid #A9BBFF; border-radius: 16px; padding: 22px 24px; }
.pr-usage .k-k { color: #6B6F78; }
.pr-usage__row { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 13px 0; border-top: 1px solid rgba(10,11,13,0.12); font-size: 15px; line-height: 1.45; color: #4A4D55; }
.pr-usage__row:first-of-type { border-top: 0; margin-top: 8px; }
.pr-usage__row b { color: #0A0B0D; font-weight: 700; white-space: nowrap; }
.pr-steps { margin-top: 56px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pr-step__track { height: 4px; background: rgba(255,255,255,0.16); border-radius: 2px; overflow: hidden; }
.pr-step__fill { height: 100%; width: 100%; background: #C6FF3D; transform-origin: left center; transform: scaleX(0); }
.pr-step__pct { font-size: 34px; line-height: 1; color: #C6FF3D; margin: 18px 0 0; }
.pr-step__t { font-size: 15.5px; line-height: 1.55; color: #D5D8DD; margin: 10px 0 0; }
.pr-steps[data-anim] .pr-step__pct, .pr-steps[data-anim] .pr-step__t { opacity: 0.25; transition: opacity 0.5s ease; }
.pr-steps[data-anim] .pr-step.is-on .pr-step__pct, .pr-steps[data-anim] .pr-step.is-on .pr-step__t { opacity: 1; }
.pr-steps[data-anim] .pr-step.is-on .pr-step__fill { transform: scaleX(1); transition: transform 0.9s ease; }
.pr-steps:not([data-anim]) .pr-step__fill { transform: scaleX(1); }
.pg-faq { max-width: 880px; margin-top: 48px; }
.pg-faq details { border-bottom: 1px solid rgba(10,11,13,0.12); padding: 18px 0; }
.pg-faq summary { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; list-style: none; cursor: pointer; font-size: 17px; font-weight: 600; line-height: 1.4; color: #0A0B0D; }
.pg-faq summary::-webkit-details-marker { display: none; }
.pg-faq summary::after { content: '+'; flex-shrink: 0; color: #1D4FFF; font-weight: 600; font-size: 20px; line-height: 1; margin-top: 2px; }
.pg-faq details[open] summary::after { content: '\2212'; }
.pg-faq details p { font-size: 15px; line-height: 1.6; color: #4A4D55; margin: 12px 0 0; max-width: 760px; }
.pg-faq details p a { color: #1D4FFF; font-weight: 600; text-decoration: none; }
.pg-faq details p a:hover { text-decoration: underline; }
.pr-cta .k-cta .k-actions, .k-cta--nobody .k-actions { margin-top: 36px; }

/* ---------- About ---------- */
.ab-hero { padding: calc(var(--nav) + 104px) 0 112px; background: #FFFFFF; }
.ab-hero .k-hero__body { font-size: 20px; max-width: 720px; }
.ab-paras { margin-top: 32px; max-width: 760px; }
.ab-paras p { font-size: 18px; line-height: 1.6; color: #D5D8DD; margin: 0; }
.ab-paras p + p { margin-top: 20px; }
.ab-close { font-size: 20px; font-weight: 700; line-height: 1.45; color: #FFFFFF; margin: 32px 0 0; max-width: 760px; }
.ab-beliefs { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ab-belief { border-top: 2px solid #0A0B0D; padding-top: 22px; }
.ab-belief__t { font-size: 20px; font-weight: 700; line-height: 1.3; color: #0A0B0D; margin: 0; }
.ab-belief__x { font-size: 16px; line-height: 1.55; color: #4A4D55; margin: 10px 0 0; }
.ab-cards { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.ab-card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 14px; padding: 26px; }
.ab-card__t { font-size: 20px; font-weight: 700; line-height: 1.3; color: #0A0B0D; margin: 14px 0 0; }
.ab-card__x { font-size: 15.5px; line-height: 1.55; color: #4A4D55; margin: 10px 0 0; flex: 1; }
.ab-card .k-link { margin-top: 18px; }
.ab-line { font-size: 16px; line-height: 1.55; color: #4A4D55; margin: 28px 0 0; }
.ab-co { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 64px; align-items: start; }
.ab-co__h { font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; color: #0A0B0D; margin: 0; }
.ab-co__l { font-size: 16px; line-height: 1.55; color: #4A4D55; margin: 14px 0 0; }
.ab-co__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-co__grid .k-k { color: #6B6F78; }
.ab-co__v { font-size: 16px; font-weight: 600; line-height: 1.5; color: #0A0B0D; margin: 8px 0 0; }

/* ---------- Contact ---------- */
.ct-hero { padding: calc(var(--nav) + 96px) 0 0; background: #FFFFFF; }
.ct-hero .k-h1 { font-size: 64px; }
.ct-hero .k-hero__body { max-width: 640px; }
.ct-grid { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 56px; align-items: start; margin-top: 56px; }
.ct-form { background: #F4F5F7; border-radius: 18px; padding: 36px; }
.ct-form h3 { font-size: 22px; line-height: 1.15; color: #0A0B0D; margin: 0 0 20px; }
.ct-form .ct-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.ct-form .form-row { display: flex; flex-direction: column; gap: 6px; }
.ct-form .form-row--full { grid-column: 1 / -1; }
.ct-form label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #4A4D55; }
.ct-form input, .ct-form select, .ct-form textarea { border: 1px solid #D5D8DD; border-radius: 8px; padding: 12px 14px; font: inherit; font-size: 15px; background: #FFFFFF; color: #0A0B0D; width: 100%; box-sizing: border-box; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: 2px solid #1D4FFF; outline-offset: 0; border-color: #1D4FFF; }
.ct-form textarea { min-height: 140px; resize: vertical; }
.ct-form .cf-turnstile { margin-top: 20px; }
.ct-form .k-btn { margin-top: 20px; }
.ct-form .k-cap { margin-top: 14px; }
.ct-direct .k-k { color: #1D4FFF; }
.ct-direct__h { font-size: 36px; line-height: 1.05; letter-spacing: -0.02em; color: #0A0B0D; margin: 14px 0 8px; }
.ct-row { padding: 16px 0; border-top: 1px solid rgba(10,11,13,0.12); }
.ct-row .k-k { color: #6B6F78; }
.ct-row a { display: inline-block; font-size: 16px; font-weight: 600; color: #1D4FFF; text-decoration: none; margin-top: 6px; }
.ct-row a:hover { text-decoration: underline; }
.ct-row a.ct-row__sub { display: block; font-size: 14px; margin-top: 8px; }
.ct-row address { font-style: normal; font-size: 15px; line-height: 1.55; color: #4A4D55; margin: 6px 0 0; }
.ct-band .k-cta__h2 { font-size: 56px; margin-top: 18px; }
.ct-band .k-k { color: #0A0B0D; }

/* ---------- Insights ---------- */
.in-hero { padding: calc(var(--nav) + 96px) 0 48px; background: #FFFFFF; }
.in-hero .k-hero__body { max-width: 700px; }
.in-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 40px; }
.in-chip { border: 1px solid #D5D8DD; background: #FFFFFF; color: #0A0B0D; border-radius: 999px; padding: 8px 13px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color 0.15s; }
.in-chip:hover { border-color: #0A0B0D; }
.in-chip[aria-pressed="true"] { background: #0A0B0D; border-color: #0A0B0D; color: #FFFFFF; }
.in-posts { padding: 56px 0 104px; background: #F4F5F7; }
.in-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.in-grid > .card { display: flex; flex-direction: column; background: #FFFFFF; border: 0; border-radius: 16px; padding: 16px; text-decoration: none; color: inherit; transition: box-shadow 0.15s; }
.in-grid > .card:hover { box-shadow: 0 12px 32px rgba(10,11,13,0.10); }
.in-grid > .card.in-feat { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; border-radius: 18px; padding: 20px; }
.in-feat .in-art { height: 340px; }
.in-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.in-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; padding: 5px 8px; border-radius: 6px; color: #1D4FFF; background: #EEF2FF; }
.in-tag--lime { background: #C6FF3D; color: #0A0B0D; }
.in-feat__h { font-size: 38px; line-height: 1.05; letter-spacing: -0.02em; color: #0A0B0D; margin: 16px 0 0; }
.in-feat__x { font-size: 17px; line-height: 1.55; color: #4A4D55; margin: 14px 0 0; }
.in-date { font-size: 13px; color: #6B6F78; margin: 14px 0 0; }
.in-feat .k-link { display: inline-block; margin-top: 18px; }
.in-art { position: relative; overflow: hidden; height: 190px; border-radius: 12px; background: #0A0B0D; }
.in-art i { position: absolute; display: block; }
.in-art--1 i:nth-child(1) { left: 12%; top: 18%; width: 34%; height: 34%; border-radius: 50%; background: #1D4FFF; }
.in-art--1 i:nth-child(2) { left: 44%; top: 42%; width: 30%; height: 30%; border-radius: 50%; background: #C6FF3D; }
.in-art--1 i:nth-child(3) { left: 70%; top: 14%; width: 18%; height: 18%; border-radius: 50%; background: #A9BBFF; }
.in-art--2 i:nth-child(1) { left: 10%; top: 22%; width: 56%; height: 14%; border-radius: 999px; background: #A9BBFF; }
.in-art--2 i:nth-child(2) { left: 22%; top: 44%; width: 56%; height: 14%; border-radius: 999px; background: #1D4FFF; }
.in-art--2 i:nth-child(3) { left: 34%; top: 66%; width: 56%; height: 14%; border-radius: 999px; background: #C6FF3D; }
.in-art--3 i:nth-child(1) { left: 14%; top: 20%; width: 28%; height: 60%; border-radius: 8px; background: #1D4FFF; }
.in-art--3 i:nth-child(2) { left: 46%; top: 36%; width: 20%; height: 44%; border-radius: 8px; background: #A9BBFF; }
.in-art--3 i:nth-child(3) { left: 70%; top: 52%; width: 14%; height: 28%; border-radius: 8px; background: #C6FF3D; }
.in-art--4 i:nth-child(1) { left: 10%; top: 30%; width: 40%; height: 40%; border-radius: 50%; border: 10px solid #A9BBFF; box-sizing: border-box; }
.in-art--4 i:nth-child(2) { left: 48%; top: 22%; width: 38%; height: 56%; border-radius: 12px; background: #1D4FFF; }
.in-art--4 i:nth-child(3) { left: 60%; top: 40%; width: 14%; height: 20%; border-radius: 4px; background: #C6FF3D; }
.in-art--5 i:nth-child(1) { left: 16%; top: 24%; width: 52%; height: 52%; border-radius: 50%; background: #A9BBFF; }
.in-art--5 i:nth-child(2) { left: 30%; top: 38%; width: 24%; height: 24%; border-radius: 50%; background: #0A0B0D; }
.in-art--5 i:nth-child(3) { left: 62%; top: 20%; width: 24%; height: 24%; border-radius: 6px; background: #C6FF3D; transform: rotate(18deg); }
.in-card__h { font-size: 21px; font-weight: 700; line-height: 1.25; color: #0A0B0D; margin: 14px 0 0; }
.in-card__x { font-size: 15px; line-height: 1.55; color: #4A4D55; margin: 10px 0 0; flex: 1; }
.in-card .in-tags { margin-top: 14px; }
.in-empty { grid-column: 1 / -1; font-size: 15px; color: #6B6F78; margin: 0; padding: 8px 0; }
.in-sub { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; }
.in-sub .k-cta__h2 { font-size: 48px; margin-top: 18px; }
.in-sub .k-k { color: #0A0B0D; }
.in-sub__panel { background: #0A0B0D; border-radius: 16px; padding: 28px; }
.in-sub__panel .k-k { color: #A9ADB6; }
.in-sub__panel input { width: 100%; box-sizing: border-box; margin-top: 10px; border: 1px solid rgba(255,255,255,0.24); border-radius: 8px; padding: 12px 14px; font: inherit; font-size: 15px; background: #15171C; color: #FFFFFF; }
.in-sub__panel input:focus { outline: 2px solid #C6FF3D; outline-offset: 0; }
.in-sub__panel .k-btn { width: 100%; margin-top: 12px; background: #C6FF3D; border-color: #C6FF3D; color: #0A0B0D; }
.in-sub__panel .k-btn:hover { background: #D6FF6B; border-color: #D6FF6B; }
.in-sub__panel .k-cap { color: #A9ADB6; margin-top: 12px; }

/* ---------- FAQ ---------- */
.fq-hero { padding: calc(var(--nav) + 96px) 0 24px; background: #FFFFFF; }
.fq-hero .k-h1 { font-size: 64px; }
.fq-hero .k-hero__body { max-width: 680px; }
.fq-group { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 64px; align-items: start; }
.fq-side { position: sticky; top: calc(var(--nav) + 24px); }
.fq-side .k-h2 { font-size: 40px; margin-top: 0; }
.fq-group .pg-faq { margin-top: 0; max-width: none; }
.fq-group .pg-faq details:first-child { border-top: 1px solid rgba(10,11,13,0.12); }

/* ---------- Responsive (T8 and the page layouts) ---------- */
@media (max-width: 1100px) {
  .pr-plans { grid-template-columns: repeat(3, 1fr); }
  .pr-mods { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .tp-two, .tp-mods, .tp-qs, .tp-role, .tp-know { grid-template-columns: 1fr; }
  .tp-page .k-h1 { font-size: 46px; }
  .tp-page .k-h2 { font-size: 36px; }
  .tp-page .k-cta__h2 { font-size: 40px; }
  .pr-plans { grid-template-columns: 1fr 1fr; }
  .pr-notes, .pr-steps, .ab-beliefs, .ab-cards { grid-template-columns: 1fr; }
  .pr-tok, .ab-co, .ct-grid, .in-sub, .fq-group { grid-template-columns: 1fr; gap: 40px; }
  .pr-usage__row { flex-direction: column; align-items: flex-start; gap: 4px; }
  .pr-usage__row b { white-space: normal; }
  .ab-co__grid { grid-template-columns: 1fr; }
  .fq-side { position: static; }
  .in-grid > .card.in-feat { grid-template-columns: 1fr; }
  .in-feat .in-art { height: 240px; }
  .in-grid { grid-template-columns: 1fr; }
  .ct-hero .k-h1, .fq-hero .k-h1 { font-size: 46px; }
  .in-feat__h { font-size: 30px; }
  .ct-band .k-cta__h2, .in-sub .k-cta__h2 { font-size: 40px; }
  .ab-co__h { font-size: 30px; }
}
@media (max-width: 599px) {
  .k-wrap { padding: 0 16px; }
  .k-actions .k-btn { width: 100%; }
  .pr-plans { grid-template-columns: 1fr; }
  .pr-mods { grid-template-columns: 1fr; }
  .ct-form { padding: 24px 20px; }
  .ct-form .ct-rows { grid-template-columns: 1fr; }
  .tp-card, .tp-know__card, .tp-mod { padding: 24px; }
  .hv-stats { grid-template-columns: 1fr; }
  .fq-side .k-h2 { font-size: 32px; }
}

/* Pricing billing toggle (3 October 2026): Monthly greys out the 12-month plans */
.pr-billing { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 28px; }
.billing-toggle { display: inline-flex; align-items: center; border: 1px solid #D5D8DD; border-radius: 999px; padding: 3px; background: #FFFFFF; gap: 2px; }
.billing-toggle button { border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; padding: 8px 18px; border-radius: 999px; color: #4A4D55; cursor: pointer; }
.billing-toggle button[aria-pressed="true"] { background: #0A0B0D; color: #FFFFFF; }
.billing-note { font-size: 13px; color: #6B6F78; }
.pr-plan { transition: opacity 0.25s ease; }
.pr-plan.is-off > *:not(.plan-switch) { opacity: 0.42; }
.pr-plan.is-off .k-btn { pointer-events: none; }
.plan-switch { display: none; margin-top: 12px; border: 0; background: transparent; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: #1D4FFF; cursor: pointer; text-align: left; }
.pr-plan--ink .plan-switch { color: #C6FF3D; }
.pr-plan.is-off .plan-switch { display: inline-block; }