/* KONCEPTA-STUDIO (9. 10. 2026) — stránky konceptu A: /studio, /studio/pricing, /pages/garden-designer (obal nástroja), /account.
 * Podklad: _KONCEPTA/GridGarden-A-pre-Claude/a-studio|a-cennik|a-ai|a-ucet.html (štýly .a-service, .a-studio, .a-pricing, .a-ai,
 * .a-account) prenesené na tokeny KONCEPTA-DS (tokens.css) — žiadne nové farby. Všetko pod .ka-svc (nezasahuje iné stránky). */
.ka-svc { color: var(--ink); background: var(--paper); overflow-x: clip; }
.ka-svc *, .ka-svc *::before, .ka-svc *::after { box-sizing: border-box; }
.ka-svc [class*="grid"] > * { min-width: 0; }
.ka-svc h1, .ka-svc h2, .ka-svc h3 { line-height: .98; letter-spacing: -.052em; font-weight: var(--w-head); color: var(--ink); text-wrap: initial; hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal; } /* ako A: bez delenia slov */
.ka-svc h1 { font-size: clamp(48px, 7vw, 102px); margin: 12px 0 24px; }
.ka-svc h2 { font-size: clamp(36px, 5vw, 70px); margin: 0 0 28px; }
.ka-svc h3 { font-size: clamp(22px, 2.2vw, 32px); margin: 14px 0 10px; }
.ka-svc .ka-h2m { font-size: clamp(34px, 4.2vw, 56px); }
.ka-svc .ka-h2s { font-size: clamp(30px, 3.2vw, 42px); }
.ka-svc p { color: var(--body); }
.ka-svc .lead { font-size: var(--fs-lead); line-height: 1.43; max-width: 760px; color: var(--body); }
.ka-svc .gg-eyebrow { margin-bottom: 4px; color: var(--leaf); }
.ka-svc button { min-height: 44px; }
.ka-svc [hidden] { display: none !important; }

/* úvod (A .a-hero: mäta + žltý kruh) */
.ka-hero { padding: clamp(48px, 8vw, 120px) 0 clamp(56px, 9vw, 128px); background: var(--leaf-mist); position: relative; overflow: hidden; }
.ka-hero::after { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: var(--sun); right: -170px; top: -230px; }
.ka-hero .wrap { position: relative; z-index: 1; }
.ka-hero .sp-crumbs { margin-bottom: 18px; }
.ka-hero .sp-crumbs a, .ka-hero .sp-crumbs span { color: var(--body); }
.ka-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.ka-sec { padding: clamp(64px, 9vw, 140px) 0; }
.ka-sec--paper2 { background: var(--surface); }
.ka-sec--mint { background: var(--leaf-mist); }

/* čipy, poznámky, stavy */
.ka-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border-radius: var(--r-pill); background: var(--soil); color: #fff; font: 700 12px/1.2 var(--font); }
.ka-chip--sun { background: var(--sun); color: var(--soil); }
.ka-chip .ka-slot { color: inherit; }
.ka-note { padding: 15px 17px; border-radius: 15px; background: var(--leaf-mist); color: var(--body); font-size: 14px; }
.ka-status { margin: 0 0 18px; padding: 12px 16px; border-radius: 14px; background: var(--card-tint); color: var(--soil); font: 600 14px/1.4 var(--font); }
.ka-slot { font-variant-numeric: tabular-nums; }
.ka-slot.is-pending { opacity: .72; font-weight: 600; }
.ka-slot.is-na { font-weight: 700; color: var(--larch-ink); }
.on-dark .ka-slot.is-na, .ka-plan--dark .ka-slot.is-na, .ka-ai-mode--dark .ka-slot.is-na { color: var(--sun); }
.ka-chip .ka-slot.is-na { color: inherit; }

/* /studio — úvod s obrazovkou a prepínačom pohľadov */
.ka-studio-hero { display: grid; grid-template-columns: .82fr 1.18fr; gap: 40px; align-items: center; }
.ka-screen { min-height: 560px; border-radius: 34px; overflow: hidden; position: relative; background: var(--soil); box-shadow: var(--sh-a); }
.ka-screen img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.ka-feature-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.ka-feature { min-height: 104px; padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: background var(--t-state), border-color var(--t-state); }
.ka-feature[aria-pressed="true"] { background: var(--sun); border-color: var(--sun); }
.ka-feature b { display: block; font-size: 19px; }
.ka-feature span { font-size: 13px; color: var(--body); }
.ka-feature:focus-visible { outline: 3px solid var(--soil); outline-offset: 2px; }
.ka-workflow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.ka-workflow--3 { grid-template-columns: repeat(3, 1fr); }
.ka-workflow li { padding: 24px; border-radius: 24px; background: var(--leaf-mist); }
.ka-sec--mint .ka-workflow li { background: var(--surface); }
.ka-workflow b { width: 38px; height: 38px; border-radius: 50%; background: var(--soil); color: #fff; display: grid; place-items: center; margin-bottom: 22px; }
.ka-workflow p { margin: 0; }
.ka-ai-compare, .ka-ai-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ka-ai-mode, .ka-ai-door { padding: 30px; border-radius: 28px; background: var(--sun); display: flex; flex-direction: column; align-items: flex-start; }
.ka-ai-door { background: var(--leaf-mist); }
.ka-ai-mode h3, .ka-ai-door h3 { font-size: clamp(30px, 3.2vw, 42px); }
.ka-ai-mode .gg-btn, .ka-ai-door .gg-btn { margin-top: auto; }
.ka-ai-mode p, .ka-ai-door p { margin: 0 0 20px; }
.ka-ai-mode__sub { font-size: 14px; }
.ka-ai-mode--dark, .ka-ai-door--dark { background: var(--soil); color: #fff; }
.ka-ai-mode--dark h3, .ka-ai-door--dark h3 { color: #fff; }
.ka-ai-mode--dark p, .ka-ai-door--dark p { color: var(--on-dark-muted); }
.ka-manual { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ka-manual article { padding: 24px; border-radius: 24px; background: var(--surface); }
.ka-manual p { margin: 0; }
.ka-bed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-top: 30px; }
.ka-live-bed { height: 420px; border-radius: 28px; background: var(--leaf-mist); position: relative; overflow: hidden; }
.ka-live-bed img { width: 100%; height: 100%; object-fit: contain; }
.ka-live-bed.is-3d img, .ka-live-bed.is-3d > .gg-mtag { display: none; }
.ka-live-bed .g3-cv { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.ka-bed-msg { font-size: 14px; }

/* /studio/pricing */
.ka-pricing-intro { display: grid; grid-template-columns: .75fr 1.25fr; gap: 45px; align-items: end; }
.ka-pricing-intro h1 { margin-bottom: 0; }
.ka-pricing-intro .lead { margin-bottom: 8px; }
.ka-plan-stack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ka-plan { min-height: 490px; padding: 28px; border-radius: 30px; background: var(--surface); display: flex; flex-direction: column; align-items: flex-start; }
.ka-plan h2 { font-size: 34px; margin: 12px 0 0; }
.ka-plan--free h2 { margin-top: 0; }
.ka-plan__amount { font-size: 52px; font-weight: 850; letter-spacing: -.06em; margin: 20px 0 2px; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ka-plan__amount .ka-slot.is-pending, .ka-plan__amount .ka-slot.is-na { font-size: 22px; letter-spacing: -.02em; }
.ka-plan__credits { font-size: 20px; font-weight: 800; color: var(--leaf); margin: 0; }
.ka-plan small { color: var(--body); }
.ka-plan ul { list-style: none; margin: 22px 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; width: 100%; }
.ka-plan li { color: var(--body); }
.ka-plan li.is-lock { color: var(--larch-ink); }
.ka-plan .gg-btn { margin-top: auto; width: 100%; }
.ka-plan--dark { background: var(--soil); color: #fff; }
.ka-plan--dark h2, .ka-plan--dark .ka-plan__amount { color: #fff; }
.ka-plan--dark p, .ka-plan--dark small, .ka-plan--dark li { color: var(--on-dark-muted); }
.ka-plan--dark .ka-plan__credits { color: var(--sun); }
.ka-plan--dark ul { border-color: rgb(255 255 255 / .16); }
.ka-plan--sun { background: var(--sun); }
.ka-plan--sun li, .ka-plan--sun small { color: var(--soil); }
.ka-plan--sun .ka-plan__credits { color: var(--soil); }
.ka-plan--sun ul { border-color: rgb(var(--soil-rgb) / .2); }
.ka-note--buy { margin-top: 16px; }
.ka-topups { display: grid; grid-template-columns: repeat(var(--ka-top-n, 4), 1fr); /* KREDITPONUKA1: 3 alebo 4 dokupy podľa úrovne (ka-pages.js) */ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 8px; }
.ka-topups__wait { grid-column: 1 / -1; padding: 24px; margin: 0; }
.ka-topup { padding: 24px; border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; display: block; }
.ka-topup:last-child { border-right: 0; }
.ka-topup b { display: block; font-size: 25px; font-variant-numeric: tabular-nums; }
.ka-topup span { color: var(--body); }
a.ka-topup:hover { background: var(--leaf-mist); }
a.ka-topup:focus-visible { outline: 3px solid var(--soil); outline-offset: -3px; }
.ka-sec--paper2 .ka-note { margin-top: 18px; }
/* KREDITPONUKA1 — karta „Prejsť na Complete za X“ len pre majiteľa Plus (tier.js); biely text na tmavom */
[data-gg-tier-show][hidden], [data-gg-tier-hide][hidden] { display: none !important; }
/* KREDITPONUKA2: majiteľ Plus nevidí kartu Complete s plnou cenou → 2 karty (Free, Plus) na celú šírku */
@media (min-width: 901px) { html[data-gg-tier="plus"] .ka-plan-stack { grid-template-columns: repeat(2, 1fr); } }
.ka-up { margin-top: 18px; padding: 26px 28px; border-radius: 26px; background: var(--soil); color: #fff; display: grid; gap: 8px; justify-items: start; }
.ka-up h3 { margin: 0; color: #fff; font-size: 28px; line-height: 1.15; }
.ka-up__ey { margin: 0; color: var(--sun); font-size: 13px; font-weight: 700; }
.ka-up__kr { margin: 0; color: var(--sun); font-weight: 700; font-size: 18px; }
/* WEBVIZ198: .ka-svc p (0,1,1) by popis karty stmavil na var(--body) — na tmavej karte svetlý text */
.ka-svc .ka-up__d { color: #fff; }
.ka-up__d { margin: 0 0 6px; color: #fff; max-width: 62ch; }
.ka-up .ka-slot.is-na { color: var(--sun); }
.ka-cost-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.ka-cost-list { background: var(--surface); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; }
.ka-cost-list .gg-btn { margin-top: auto; }
.ka-cost-row { display: flex; justify-content: space-between; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--line); width: 100%; }
.ka-cost-row:last-of-type { border-bottom: 0; }
/* WEBAUDIT1 (audit W1): hodnota („20 kr po overení e-mailu“) sa na úzkom displeji zalomí — nowrap pretekal (EN 390 px → 451 px) */
.ka-cost-row > span { min-width: 0; }
.ka-cost-row b { white-space: nowrap; text-align: right; min-width: 0; }
.ka-table-wrap { overflow: auto; border-radius: 20px; }
.ka-table-wrap:focus-visible { outline: 3px solid var(--soil); outline-offset: 2px; }
.ka-table { width: 100%; border-collapse: collapse; }
.ka-table th, .ka-table td { text-align: left; padding: 15px 12px; border-bottom: 1px solid rgb(var(--soil-rgb) / .16); vertical-align: top; }
.ka-table thead th { font-size: 13px; color: var(--body); }
.ka-table tbody th { font-weight: 500; }
.ka-table td, .ka-table thead th:not(:first-child) { text-align: center; }
.ka-table .is-yes { color: var(--leaf); font-weight: 800; }
.ka-table .is-lock { color: var(--larch-ink); }
.ka-legal { margin-top: 20px; font-size: 14px; }
.ka-legal a { color: var(--leaf-deep); }

/* /pages/garden-designer — úvod s kartou ceny, pred/po, dve AI, galéria */
.ka-ai-hero { display: grid; grid-template-columns: .9fr 1.1fr; gap: 50px; align-items: center; }
.ka-ai-card { background: var(--surface); border-radius: 32px; padding: clamp(22px, 3vw, 34px); box-shadow: var(--sh-a); display: flex; flex-direction: column; align-items: flex-start; }
.ka-ai-card h2 { font-size: clamp(28px, 3vw, 38px); margin: 8px 0 14px; }
.ka-ai-card .ka-cost-row b { font-size: 20px; }
.ka-ai-card .ka-note { margin: 14px 0 6px; }
.ka-ba-grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: 50px; align-items: center; }
.ka-ba { position: relative; aspect-ratio: 16 / 10; border-radius: 30px; overflow: hidden; box-shadow: var(--sh-a); }
.ka-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ka-ba .ka-ba__after { clip-path: inset(0 0 0 var(--split, 50%)); }
.ka-ba input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.ka-ba:focus-within { outline: 3px solid var(--soil); outline-offset: 3px; }
.ka-ba__div { position: absolute; top: 0; bottom: 0; left: var(--split, 50%); width: 2px; background: #fff; pointer-events: none; }
.ka-ba__div::after { content: "↔"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--soil); }
.ka-ba__l, .ka-ba__r { position: absolute; top: 12px; z-index: 2; }
.ka-ba__l { left: 12px; }
.ka-ba__r { right: 12px; }
.ka-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; }
.ka-gal figure { margin: 0; }
.ka-gal__img { display: block; position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--mist); }
.ka-gal__img img { width: 100%; height: 100%; object-fit: cover; }
.ka-gal figcaption { margin-top: 10px; font-weight: 650; }
.ka-ai-pg .gg-gd-section { background: var(--paper); }

/* /account */
.ka-gate { padding: 56px 0 110px; }
.ka-gate-card { max-width: 720px; margin: auto; background: var(--surface); border-radius: 32px; padding: clamp(28px, 5vw, 56px); box-shadow: var(--sh-a); }
.ka-gate-card h2 { font-size: clamp(30px, 3.4vw, 44px); }
.ka-gate-card > h2, .ka-gate-card > p { text-align: center; }
.ka-gate-card .ka-login { max-width: 520px; margin-inline: auto; }
.ka-gate-card > .gg-btn { display: flex; width: max-content; margin: 18px auto 0; }
.ka-login { display: grid; gap: 10px; margin-top: 18px; justify-items: start; }
.ka-login label { font-weight: 650; }
.ka-login__row { display: flex; gap: 10px; flex-wrap: wrap; width: 100%; }
.ka-login input { flex: 1 1 240px; min-height: 52px; padding: 11px 16px; border: 1px solid var(--line-strong); border-radius: 14px; background: #fff; color: var(--ink); font: inherit; }
.ka-login input:focus-visible { outline: 3px solid var(--soil); outline-offset: 1px; }
.ka-login .gg-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.ka-login__err { margin-top: 14px; padding: 12px 16px; border-radius: 14px; background: var(--larch-mist); color: var(--larch-ink); font-weight: 600; }
.ka-dashboard { display: grid; grid-template-columns: 290px 1fr; gap: 22px; padding: 56px 0 110px; }
.ka-account-side { display: grid; gap: 12px; align-content: start; }
.ka-wallet { padding: 25px; border-radius: 28px; background: var(--soil); color: #fff; display: grid; gap: 8px; justify-items: start; }
.ka-wallet span { color: var(--on-dark-muted); font-size: 14px; }
.ka-wallet strong { display: block; font-size: 44px; color: var(--sun); line-height: 1.05; margin: 10px 0 14px; font-variant-numeric: tabular-nums; }
.ka-wallet strong.is-na { font-size: 18px; line-height: 1.3; }
.ka-profile { padding: 22px; border-radius: 24px; background: var(--leaf-mist); }
.ka-profile__row { display: grid; gap: 4px; padding: 0 0 11px; border-bottom: 1px solid var(--mint-2); font-size: 14px; overflow-wrap: anywhere; }
.ka-granted { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; background: var(--sun); color: var(--soil); font-weight: 700; }
.ka-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 7px; background: var(--leaf-mist); border-radius: 18px; margin-bottom: 22px; }
.ka-tabs button { white-space: nowrap; padding: 0 16px; border: 0; border-radius: 13px; background: transparent; color: var(--ink); font: 750 15px/1 var(--font); cursor: pointer; }
.ka-tabs button[aria-selected="true"] { background: var(--soil); color: #fff; }
.ka-tabs button:focus-visible { outline: 3px solid var(--soil); outline-offset: 2px; }
.ka-empty { min-height: 300px; border: 1px dashed var(--line-strong); border-radius: 24px; display: grid; place-items: center; text-align: center; padding: 28px; }
.ka-empty > div { max-width: 540px; }
.ka-empty h2 { font-size: clamp(28px, 3vw, 40px); }

/* FAQ v štýle A (komponent faq z components.css ostáva) */
.ka-faq { background: var(--paper); }

@media (max-width: 900px) {
  .ka-studio-hero, .ka-ai-hero, .ka-ba-grid, .ka-pricing-intro, .ka-cost-grid, .ka-bed-grid { grid-template-columns: minmax(0, 1fr); }
  .ka-workflow, .ka-manual { grid-template-columns: 1fr 1fr; }
  .ka-workflow--3 { grid-template-columns: 1fr; }
  .ka-plan-stack, .ka-ai-compare, .ka-ai-pair { grid-template-columns: 1fr; }
  .ka-plan { min-height: 0; }
  .ka-topups { grid-template-columns: 1fr 1fr; }
  .ka-topup:nth-child(2) { border-right: 0; }
  .ka-topup:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .ka-gal { grid-template-columns: 1fr 1fr; }
  .ka-dashboard { grid-template-columns: 1fr; }
  .ka-account-side { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .ka-cost-row b { white-space: normal; text-wrap: balance; }
  .ka-hero { padding: 40px 0 54px; }
  .ka-hero::after { width: 250px; height: 250px; right: -120px; top: -150px; }
  .ka-svc h1 { font-size: 46px; }
  .ka-actions { display: grid; }
  .ka-actions .gg-btn { width: 100%; }
  .ka-screen { border-radius: 22px; min-height: 390px; }
  .ka-feature-switch { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .ka-feature { min-width: 190px; min-height: 84px; scroll-snap-align: start; }
  .ka-workflow, .ka-manual { grid-template-columns: 1fr; }
  .ka-live-bed { height: 300px; }
  .ka-topups { grid-template-columns: 1fr; }
  .ka-topup { border-right: 0; border-bottom: 1px solid var(--line) !important; }
  .ka-table { min-width: 560px; }
  .ka-ba { aspect-ratio: 4 / 3; border-radius: 22px; }
  .ka-gal { grid-template-columns: 1fr; }
  .ka-account-side { grid-template-columns: 1fr; }
  .ka-plan__amount { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ka-svc *, .ka-svc *::before, .ka-svc *::after { animation: none !important; transition: none !important; }
}