/* ============================================================
   Kodiac product pages · Website Update Build Spec v1 (1 October 2026)
   Shared components for Agent, Audit, Content and Workspace.
   Loaded after home.css, which carries the design system.
   ============================================================ */
.nav .nav__link[aria-current="page"] { color: #0A0B0D; font-weight: 600; }
.k-s--lightblue { background: #EEF2FF; }
.k-k { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin: 0; }

/* Status chips */
.chip { display: inline-block; font-size: 11px; font-weight: 700; line-height: 1.3; border-radius: 4px; padding: 2px 7px; white-space: nowrap; }
.chip--green { background: #E7F6EC; color: #1E6B3C; }
.chip--amber { background: #FFF1E0; color: #8A4B00; }
.chip--red { background: #FDE8E8; color: #A61B1B; }
.chip--blue { background: #E8EDFF; color: #1D4FFF; }
.chip--grey { background: #EEF0F3; color: #4A4D55; }

/* Hero: 1.05fr / 0.95fr, body max 540px */
.ag-hero .k-hero__grid { grid-template-columns: 1.05fr 0.95fr; }
.ag-hero .k-hero__body { max-width: 540px; }
.k-hero__price { margin: 22px 0 0; font-size: 14px; color: #4A4D55; }
.k-hero__price a { color: #1D4FFF; font-weight: 600; text-decoration: none; }
.k-chat figcaption.ag-cap { margin-top: 12px; }

/* Hero cards shared by Audit, Content and Workspace: header with title left, brand right */
.hc { margin: 0; }
.hc__card { background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 18px; box-shadow: 0 24px 60px rgba(10,11,13,0.10); overflow: hidden; }
.hc__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid rgba(10,11,13,0.12); font-size: 13px; }
.hc__top b { font-weight: 600; color: #6B6F78; }
.hc__top span { font-weight: 500; color: #6B6F78; }
.hc__body { background: #FAFAFB; padding: 20px; }
.hc .k-k { color: #6B6F78; }
.hc figcaption { margin-top: 12px; font-size: 13px; color: #6B6F78; }
/* Audit question check */
.qc__q { margin: 8px 0 0; background: #0A0B0D; color: #FFFFFF; font-size: 15px; line-height: 1.5; border-radius: 12px; padding: 13px 16px; }
.qc__ans { margin: 6px 0 0; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 12px; padding: 0 16px; }
.qc__row { display: grid; grid-template-columns: 86px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(10,11,13,0.12); font-size: 13.5px; color: #4A4D55; }
.qc__row:first-child { border-top: 0; }
.qc__row b { font-size: 13px; font-weight: 700; color: #0A0B0D; }
.qc__also { margin: 8px 0 0; font-size: 12px; color: #6B6F78; }
.qc__facts { margin: 12px 0 0; background: #0A0B0D; border-radius: 12px; padding: 14px 16px; }
.qc__facts .k-k.lime { color: #C6FF3D; }
.qc__facts .k-k.grey { color: #A9ADB6; margin-top: 12px; }
.qc__facts p.t { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #D5D8DD; }
.hc__lab2 { margin-top: 18px; }
/* Content record */
.rec__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.rec__t { font-size: 22px; line-height: 1.15; margin: 4px 0 0; color: #0A0B0D; }
.rec__fields { margin: 14px 0 0; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 12px; padding: 0 16px; }
.rec__row { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(10,11,13,0.12); }
.rec__row:first-child { border-top: 0; }
.rec__row .n { font-size: 12px; font-weight: 600; color: #6B6F78; }
.rec__row .v { font-size: 13.5px; font-weight: 600; color: #0A0B0D; }
.chip--ink { background: #0A0B0D; color: #C6FF3D; }
.rec__status { margin: 12px 0 0; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: #6B6F78; }
.rec__status b { font-weight: 700; color: #1E6B3C; }
.rec__used { margin: 14px 0 0; background: #0A0B0D; border-radius: 12px; padding: 14px 16px; }
.rec__used .k-k { color: #A9ADB6; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.pill { display: inline-block; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 4px 10px; border: 1px solid rgba(255,255,255,0.5); color: #FFFFFF; }
.pill--lime { background: #C6FF3D; border-color: #C6FF3D; color: #0A0B0D; }
/* Workspace home */
.wsh__mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.wsh__mod { background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 12px; padding: 14px; }
.wsh__name { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #0A0B0D; margin: 0; }
.wsh__name i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--audit { background: #1D4FFF; } .dot--content { background: #1E9E5B; } .dot--agent { background: #0A0B0D; }
.wsh__tag { font-size: 11.5px; color: #6B6F78; margin: 2px 0 0; }
.wsh__fig { font-size: 26px; font-weight: 700; color: #0A0B0D; margin: 8px 0 0; line-height: 1.1; }
.wsh__up { font-size: 11.5px; font-weight: 600; color: #1E6B3C; margin: 2px 0 0; }
.wsh__st { font-size: 11.5px; color: #4A4D55; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid rgba(10,11,13,0.12); }
.wsh__focus { margin: 6px 0 0; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 12px; padding: 0 16px; }
.wsh__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(10,11,13,0.12); }
.wsh__row:first-child { border-top: 0; }
.wsh__row b { font-size: 13.5px; font-weight: 700; color: #0A0B0D; }
.wsh__row span { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.wsh__ask { margin: 14px 0 0; background: #0A0B0D; border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.5; color: #D5D8DD; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; }
.wsh__ask .k-tag { font-size: 10.5px; }

/* 01 Why it matters: three cards */
.ag-why { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ag-why__card { background: #15171C; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 32px; }
.ag-why__card .k-k { color: #C6FF3D; }
.ag-why__card p + p { font-size: 17px; line-height: 1.55; color: #FFFFFF; margin: 12px 0 0; }

/* Five-column diagram: box, connector, box, connector, box */
.ag-sys { margin-top: 64px; display: grid; grid-template-columns: 1fr 104px 1fr 104px 1fr; align-items: stretch; }
.ag-sys--96 { grid-template-columns: 1fr 96px 1fr 96px 1fr; }
.ag-box { background: #F4F5F7; border: 1px solid #E3E5E9; border-radius: 16px; padding: 32px 28px; }
.ag-box .k-k { color: #6B6F78; font-size: 12px; letter-spacing: 0.12em; }
.ag-box__t { font-size: 26px; line-height: 1.1; color: #0A0B0D; margin: 14px 0 0; }
.ag-box__l { font-size: 16px; line-height: 1.5; color: #4A4D55; margin: 10px 0 0; }
.ag-box ul { margin: 12px 0 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.7; color: #4A4D55; }
.ag-box--ink { background: #0A0B0D; border-color: #0A0B0D; }
.ag-box--ink .k-k { color: #C6FF3D; }
.ag-box--ink .ag-box__t { color: #FFFFFF; }
.ag-box--ink .ag-box__l, .ag-box--ink ul { color: #B4B8C0; }
.ag-conn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 8px; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.3; color: #6B6F78; }
.ag-conn .blue { color: #1D4FFF; }
.ag-arr { display: block; font-size: 26px; line-height: 1.1; color: #0A0B0D; }
.ag-arr--r::before { content: '\2192'; }
.ag-arr--l::before { content: '\2190'; }
.ag-arr--blue { color: #1D4FFF; }
.ag-close { margin: 32px 0 0; font-size: 16px; font-weight: 600; color: #0A0B0D; }

/* Route cards (Agent 02) */
.ag-routes__l { margin-top: 40px; color: #6B6F78; }
.ag-routes { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ag-route { display: flex; align-items: flex-start; gap: 14px; border: 1px solid #E3E5E9; border-radius: 14px; padding: 20px; background: #FFFFFF; }
.ag-route svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; stroke: #1D4FFF; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ag-route__t { font-size: 16px; font-weight: 700; color: #0A0B0D; margin: 0; }
.ag-route__x { font-size: 14px; color: #6B6F78; margin: 4px 0 0; line-height: 1.5; }
.ag-route--soft { border: 1px dashed #C9CCD2; }
.ag-route--soft svg { stroke: #7C7F87; }
.ag-route--soft .ag-route__t { font-weight: 600; color: #4A4D55; }

/* Two light info cards (Audit 02) */
.ag-two { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ag-two__card { border: 1px solid #E3E5E9; border-radius: 14px; padding: 28px; background: #FFFFFF; }
.ag-two__card .k-k { color: #1D4FFF; }
.ag-two__t { font-size: 19px; font-weight: 700; color: #0A0B0D; margin: 10px 0 0; }
.ag-two__x { font-size: 15px; line-height: 1.6; color: #4A4D55; margin: 8px 0 0; }

/* Examine cards with checklists (Audit 03) */
.ag-ex { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.ag-ex__card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 16px; padding: 32px; }
.ag-ex__card .k-k { color: #1D4FFF; }
.ag-ex__h3 { font-size: 24px; line-height: 1.15; margin: 14px 0 0; color: #0A0B0D; }
.ag-ex__t { font-size: 15px; line-height: 1.6; color: #4A4D55; margin: 10px 0 0; }
.ag-ex__list { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(10,11,13,0.12); display: grid; gap: 10px; }
.ag-ex__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: #4A4D55; }
.ag-ex__list svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; stroke: #1D4FFF; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; fill: none; }

/* Six ruled items (Audit 04) */
.ag-six { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ag-six__item { border-top: 2px solid #0A0B0D; padding-top: 18px; }
.ag-six__t { font-size: 17px; font-weight: 700; color: #0A0B0D; margin: 0; }
.ag-six__x { font-size: 15px; line-height: 1.55; color: #4A4D55; margin: 6px 0 0; }

/* Answers and actions (Agent 03) */
.ag-aa { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; }
.ag-aa__card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 16px; padding: 40px; }
.ag-aa__h3 { font-size: 30px; line-height: 1.12; margin: 18px 0 0; color: #0A0B0D; }
.ag-aa__t { font-size: 16px; line-height: 1.6; color: #4A4D55; margin: 12px 0 0; flex: 1; }
.ag-aa__card .k-get { margin-top: 24px; }
.ag-aa__card--ink { background: #0A0B0D; border-color: #0A0B0D; color: #FFFFFF; }
.ag-aa__card--ink .ag-aa__h3 { color: #FFFFFF; }
.ag-aa__card--ink .ag-aa__t { color: #B4B8C0; }
.ag-aa__card--ink .k-get { background: #15171C; border: 1px solid rgba(255,255,255,0.14); }
.ag-aa__card--ink .k-get__l { color: #C6FF3D; }
.ag-aa__card--ink .k-get__s { color: #FFFFFF; }
.ag-aa__close { margin: 32px 0 0; font-size: 16px; font-weight: 600; color: #0A0B0D; }

/* Enterprise control: three ruled columns */
.ag-ctl { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.ag-ctl__col { border-top: 2px solid #0A0B0D; padding-top: 22px; }
.ag-ctl__col .k-k { color: #1D4FFF; }
.ag-ctl__list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 20px; }
.ag-ctl__t { font-size: 17px; font-weight: 700; color: #0A0B0D; margin: 0; }
.ag-ctl__x { font-size: 15px; line-height: 1.55; color: #4A4D55; margin: 4px 0 0; }

/* Inside Kodiac: pill tabs, screen frame, footer row */
.ag-tabs { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 8px; }
.ag-tab { min-height: 44px; padding: 0 20px; border-radius: 10px; font: inherit; font-size: 15px; font-weight: 600; background: #FFFFFF; color: #0A0B0D; border: 1px solid #A9BBFF; cursor: pointer; }
.ag-tab[aria-selected="true"] { background: #0A0B0D; color: #FFFFFF; border-color: #0A0B0D; }
.ag-tab:focus-visible { outline: 2px solid #1D4FFF; outline-offset: 3px; }
.ag-frame { margin-top: 20px; background: #FFFFFF; border: 1px solid #A9BBFF; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(29,79,255,0.12); }
.ag-frame:focus-visible { outline: 2px solid #1D4FFF; outline-offset: 3px; }
.ag-screen[hidden] { display: none; }
.ag-foot { margin-top: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
.ag-foot .k-link { font-size: 15px; }

/* The app shell inside the frame, drawn at reduced scale */
.app { display: grid; grid-template-columns: 196px 1fr; font-size: 12px; line-height: 1.4; color: #4A4D55; min-height: 560px; }
.app__side { background: #FAFAFB; border-right: 1px solid rgba(10,11,13,0.12); padding: 16px 14px; }
.app__logo { display: flex; align-items: center; gap: 6px; font-weight: 700; color: #0A0B0D; font-size: 13px; margin-bottom: 14px; }
.app__logo i { display: inline-block; width: 12px; height: 12px; background: linear-gradient(#0A0B0D 0 30%, #1D4FFF 30% 65%, #C6FF3D 65%); border-radius: 2px; }
.app__nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.app__nav li { padding: 5px 8px; border-radius: 6px; color: #4A4D55; }
.app__nav li.on { color: #0A0B0D; font-weight: 700; }
.app__nav li.cur { background: #E8EDFF; color: #1D4FFF; font-weight: 600; }
.app__nav li.sub { padding-left: 18px; }
.app__nav li.gap { height: 10px; padding: 0; }
.app__grp { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6B6F78; padding: 10px 8px 3px 18px; }
.app__main { display: flex; flex-direction: column; min-width: 0; }
.app__top { height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid rgba(10,11,13,0.12); color: #6B6F78; }
.app__top b { color: #0A0B0D; font-weight: 600; }
.app__pills { display: flex; gap: 8px; }
.app__pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #E3E5E9; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 600; color: #0A0B0D; }
.app__pill i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
.app__banner { background: #FFF7DB; color: #6B5A1E; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-align: center; padding: 6px 12px; }
.app__view { display: flex; align-items: center; gap: 8px; padding: 10px 18px; border-bottom: 1px solid rgba(10,11,13,0.12); font-size: 11px; color: #6B6F78; }
.app__view .k-k { color: #6B6F78; }
.app__view b { color: #0A0B0D; }
.app__n { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 4px; background: #0A0B0D; color: #FFFFFF; font-size: 10px; font-weight: 700; }
.app__chip { border: 1px solid #E3E5E9; border-radius: 999px; padding: 2px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #4A4D55; }
.app__body { padding: 18px; display: grid; gap: 14px; }
.app__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.app__h { font-size: 22px; font-weight: 700; color: #0A0B0D; margin: 0; line-height: 1.2; }
.app__sub { font-size: 12px; color: #6B6F78; margin: 4px 0 0; }
.app__btns { display: flex; gap: 8px; flex-shrink: 0; }
.app__btn { border: 1px solid rgba(10,11,13,0.30); border-radius: 7px; padding: 6px 10px; font-size: 11px; font-weight: 600; color: #0A0B0D; white-space: nowrap; }
.app__btn--blue { background: #1D4FFF; border-color: #1D4FFF; color: #FFFFFF; }
.app__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.app__stat { border: 1px solid #E3E5E9; border-radius: 10px; padding: 12px 14px; }
.app__stat .k-k { color: #6B6F78; font-size: 9px; }
.app__stat b { display: block; font-size: 22px; font-weight: 700; color: #0A0B0D; margin-top: 4px; line-height: 1.1; }
.app__stat span { display: block; font-size: 11px; color: #6B6F78; margin-top: 3px; }
.app__stat em { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: #1D4FFF; margin-top: 6px; }
.app__panels { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.app__panels--score { grid-template-columns: 0.9fr 1.1fr; }
.app__panels--rep { grid-template-columns: 1.1fr 0.9fr; }
.app__panels--3 { grid-template-columns: repeat(3, 1fr); }
.app__panel { border: 1px solid #E3E5E9; border-radius: 10px; padding: 14px; }
.app__ph { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; color: #0A0B0D; margin: 0 0 10px; }
.app__ph span { font-weight: 500; color: #6B6F78; }
.app__bar { display: grid; grid-template-columns: 120px 1fr 36px; align-items: center; gap: 8px; font-size: 11px; color: #4A4D55; margin-top: 6px; }
.app__bar i { display: block; height: 8px; background: #1D4FFF; border-radius: 4px; }
.app__bar i.g { background: #1E9E5B; } .app__bar i.k { background: #0A0B0D; }
.app__bar b { text-align: right; color: #0A0B0D; }
.app__row { display: flex; justify-content: space-between; gap: 10px; font-size: 11px; color: #4A4D55; padding: 5px 0; border-top: 1px solid rgba(10,11,13,0.08); }
.app__row b { color: #0A0B0D; }
.app__row:first-of-type { border-top: 0; }
.app__note { font-size: 11px; color: #6B6F78; margin: 8px 0 0; }
.app__recent { display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; font-size: 11px; color: #4A4D55; padding: 7px 0; border-top: 1px solid rgba(10,11,13,0.08); align-items: center; }
.app__recent--2 { grid-template-columns: 1fr auto; }
.app__recent b { color: #0A0B0D; font-weight: 600; }
.app__recent em { font-style: normal; color: #1D4FFF; font-weight: 600; }
.app__filters { display: flex; flex-wrap: wrap; gap: 6px; }
.app__filter { border: 1px solid #E3E5E9; border-radius: 999px; padding: 3px 10px; font-size: 11px; color: #4A4D55; }
.app__tablewrap { overflow-x: auto; }
.app__table { width: 100%; border-collapse: collapse; font-size: 11px; min-width: 640px; }
.app__table th { text-align: left; font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #6B6F78; padding: 6px 8px; border-bottom: 1px solid rgba(10,11,13,0.12); }
.app__table td { padding: 8px; border-bottom: 1px solid rgba(10,11,13,0.08); color: #4A4D55; vertical-align: middle; white-space: nowrap; }
.app__table td.q { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.app__table td.wrap { white-space: normal; min-width: 150px; }
.app__table td.w { color: #6B6F78; }
.app__table td b { color: #0A0B0D; font-weight: 600; }
.app__table td.red { color: #A61B1B; } .app__table td.green { color: #1E6B3C; }
.app__detail { border: 1px solid #E3E5E9; border-radius: 10px; padding: 12px 14px; font-size: 11px; color: #0A0B0D; }
.app__detail .k-k { color: #6B6F78; font-size: 9px; }
.app__detail p { margin: 6px 0 0; }
.app__detail .grey { color: #6B6F78; }
.app__score { display: flex; align-items: center; gap: 16px; }
.app__ring { width: 96px; height: 96px; border-radius: 50%; flex-shrink: 0; display: grid; place-items: center; background: conic-gradient(#1D4FFF var(--pct, 72%), #E3E5E9 0); }
.app__ring.g { background: conic-gradient(#1E9E5B var(--pct, 86%), #E3E5E9 0); }
.app__ring span { width: 70px; height: 70px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; font-size: 26px; font-weight: 700; color: #0A0B0D; }
.app__score .k-k { color: #6B6F78; font-size: 9px; }
.app__score b { display: block; font-size: 14px; font-weight: 700; color: #0A0B0D; margin-top: 4px; }
.app__score em { display: block; font-style: normal; font-size: 11px; font-weight: 600; color: #1E6B3C; margin-top: 4px; }
.app__mod { border: 1px solid #E3E5E9; border-radius: 10px; padding: 12px 14px; }
.app__mod .app__ph { margin-bottom: 6px; }
.app__mod .app__ph i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 6px; vertical-align: middle; }

/* Enterprise knowledge (Agent 06) */
.ag-know { margin-top: 28px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.ag-know .k-h2 { margin: 0; }
.ag-know__cards { display: grid; gap: 24px; }
.ag-know__card { background: #15171C; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 28px; }
.ag-know__t { font-size: 17px; font-weight: 700; color: #FFFFFF; margin: 0; }
.ag-know__x { font-size: 16px; line-height: 1.6; color: #D5D8DD; margin: 6px 0 0; }

/* Flexible setup (two or three white cards with links) */
.ag-flex { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ag-flex--3 { grid-template-columns: repeat(3, 1fr); }
.ag-flex__card { display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid #E3E5E9; border-radius: 16px; padding: 32px; }
.ag-flex__card .k-k { color: #1D4FFF; }
.ag-flex__h3 { font-size: 24px; line-height: 1.15; margin: 14px 0 0; color: #0A0B0D; }
.ag-flex__t { font-size: 15px; line-height: 1.6; color: #4A4D55; margin: 10px 0 0; flex: 1; }
.ag-flex__card .k-link { margin-top: 20px; }

/* Dark card rows with a highlighted lime card (Audit 06, Content 05) */
.ag-after { margin-top: 56px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.ag-after--4 { grid-template-columns: repeat(4, 1fr); }
.ag-after__card { display: flex; flex-direction: column; background: #15171C; border: 1px solid rgba(255,255,255,0.14); border-radius: 16px; padding: 32px; }
.ag-after--4 .ag-after__card { padding: 28px; }
.ag-after__card .k-k { color: #A9ADB6; }
.ag-after__h3 { font-size: 24px; line-height: 1.15; margin: 14px 0 0; color: #FFFFFF; }
.ag-after--4 .ag-after__h3 { font-size: 22px; margin-top: 12px; }
.ag-after__t { font-size: 15px; line-height: 1.6; color: #D5D8DD; margin: 10px 0 0; flex: 1; }
.ag-after--4 .ag-after__t { margin-top: 8px; }
.ag-after__card .k-link { margin-top: 20px; color: #C6FF3D; }
.ag-after__card--lime { background: #C6FF3D; border-color: #C6FF3D; }
.ag-after__card--lime .k-k, .ag-after__card--lime .ag-after__h3, .ag-after__card--lime .ag-after__t { color: #0A0B0D; }
.ag-after__card--lime .k-link { color: #0A0B0D; font-weight: 700; }

/* Workspace 02: module boxes with the Workspace bar beneath */
.ws-mods { margin-top: 64px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ws-mod { background: #F4F5F7; border: 1px solid #E3E5E9; border-radius: 16px; padding: 28px; }
.ws-mod .k-k { color: #6B6F78; font-size: 12px; letter-spacing: 0.12em; }
.ws-mod__t { font-size: 24px; line-height: 1.15; color: #0A0B0D; margin: 12px 0 0; }
.ws-mod__x { font-size: 15px; line-height: 1.6; color: #4A4D55; margin: 8px 0 0; }
.ws-bar { margin-top: 16px; background: #0A0B0D; border-radius: 16px; padding: 28px 32px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px 32px; }
.ws-bar .k-k { color: #C6FF3D; }
.ws-bar__t { font-size: 24px; line-height: 1.15; color: #FFFFFF; margin: 6px 0 0; }
.ws-bar__pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.ws-bar__pills span { display: inline-block; font-size: 14px; font-weight: 600; border-radius: 999px; padding: 8px 14px; border: 1px solid rgba(255,255,255,0.28); color: #FFFFFF; }
.ws-bar__pills span.lime { background: #C6FF3D; border-color: #C6FF3D; color: #0A0B0D; }

/* Workspace 05: Ask Kodiac */
.ask { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.ask .k-h2 { margin: 0; }
.ask .k-h2 .lime { color: #C6FF3D; }
.ask__ex { margin-top: 32px; background: #15171C; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 18px 20px; }
.ask__ex .k-k { color: #A9ADB6; }
.ask__ex .k-k.lime { color: #C6FF3D; margin-top: 16px; }
.ask__q { font-size: 15px; line-height: 1.55; color: #FFFFFF; margin: 6px 0 0; }
.ask__a { font-size: 15px; line-height: 1.55; color: #D5D8DD; margin: 6px 0 0; }
.ask__note { margin: 16px 0 0; font-size: 14px; color: #A9ADB6; }
.ask__right .k-k { color: #A9ADB6; }
.ask__cards { margin-top: 14px; display: grid; gap: 12px; }
.ask__card { background: #15171C; border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; padding: 22px 24px; }
.ask__t { font-size: 16px; font-weight: 700; color: #FFFFFF; margin: 0; }
.ask__x { font-size: 15px; line-height: 1.55; color: #D5D8DD; margin: 6px 0 0; }
.ask__close { margin: 18px 0 0; font-size: 15px; line-height: 1.55; color: #B4B8C0; }

/* Responsive */
@media (max-width: 1023px) {
  .ag-hero .k-hero__grid { grid-template-columns: 1fr; }
  .ag-why, .ag-ctl, .ag-ex, .ag-six, .ag-after, .ag-flex--3, .ws-mods { grid-template-columns: 1fr 1fr; }
  .ag-routes { grid-template-columns: 1fr 1fr; }
  .ag-sys { grid-template-columns: 1fr 84px 1fr 84px 1fr; }
  .ag-know, .ask { grid-template-columns: 1fr; gap: 32px; }
  .app { grid-template-columns: 1fr; }
  .app__side { display: none; }
}
@media (max-width: 767px) {
  .ag-why, .ag-ctl, .ag-routes, .ag-aa, .ag-flex, .ag-flex--3, .ag-two, .ag-ex, .ag-six, .ag-after, .ag-after--4, .ws-mods { grid-template-columns: 1fr; }
  .ag-aa__card { padding: 28px 24px; }
  .ag-sys, .ag-sys--96 { grid-template-columns: 1fr; gap: 6px; }
  .ag-conn { padding: 8px 0; }
  .ag-arr--r::before { content: '\2193'; }
  .ag-arr--l::before { content: '\2191'; }
  .app__stats { grid-template-columns: 1fr 1fr; }
  .app__panels, .app__panels--score, .app__panels--rep, .app__panels--3 { grid-template-columns: 1fr; }
  .app__head { flex-direction: column; }
  .wsh__mods { grid-template-columns: 1fr; }
  .qc__row { grid-template-columns: 1fr; gap: 4px; }
  .rec__row { grid-template-columns: 1fr; gap: 4px; }
  .ws-bar { padding: 24px; }
  .ws-bar__pills { justify-content: flex-start; }
}