/* Keltory site v11: the Products menu (one option per product, like the ERP's own menus), the three options on the home page,
   the lead generation and AI pages, and the pricing tabs. Built on v10's tokens and k10.css; light only, like v10. */

/* header: Products menu */
.dd { position: relative; }
.dd-btn { display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 15px; font-weight: 500; color: var(--muted);
  background: none; border: 0; padding: 8px 11px; border-radius: 8px; cursor: pointer; }
.dd-btn:hover, .dd-btn[aria-expanded="true"] { color: var(--heading); background: var(--surface); }
.dd-btn.cur { color: var(--heading); }
.dd-btn svg { width: 14px; height: 14px; transition: transform .2s ease; }
.dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.dd-panel { position: absolute; top: calc(100% + 12px); left: -16px; width: 560px; padding: 10px; display: grid; gap: 2px; z-index: 30;
  background: var(--raised); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(17, 27, 78, .35), 0 2px 6px rgba(17, 27, 78, .06); }
.dd-panel[hidden] { display: none; }
.dd-panel::before { content: ""; position: absolute; top: -14px; left: 0; right: 0; height: 14px; }   /* keeps hover across the gap */
.links .dd-opt { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; padding: 12px; border-radius: 12px; color: var(--text); }
.links .dd-opt:hover, .links .dd-opt[aria-current="page"] { background: var(--blue-50); }
.dd-ic, .k11-ic { display: grid; place-items: center; background: var(--tint); color: var(--accent); }
.dd-ic { width: 40px; height: 40px; border-radius: 10px; }
.dd-ic svg { width: 22px; height: 22px; }
.dd-opt b { display: block; color: var(--heading); font-size: 15.5px; font-weight: 600; }
.dd-opt small { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.45; margin-top: 2px; font-weight: 400; }
.dd-more { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; margin-top: 6px; padding: 10px 12px 4px; border-top: 1px solid var(--line); }
.dd-more span { font: 600 11.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.links .dd-more a { font-size: 14px; padding: 6px 8px; }
.mnav .mnav-h { font: 600 11.5px/1 "Geist Mono", ui-monospace, monospace; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 16px 8px 6px; }
.mnav a.sub { padding-left: 20px; }
@media (max-width: 1060px) { .mnav.open { max-height: 760px; } }

/* home: hero without a screenshot, the three options, how we start */
.k11-hero { padding-bottom: clamp(64px, 8vw, 112px); }
.k11-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.k11-opt { display: flex; flex-direction: column; gap: 12px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised);
  box-shadow: 0 1px 2px rgba(17, 27, 78, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.k11-opt:hover { transform: translateY(-4px); border-color: var(--blue-200); box-shadow: 0 24px 48px -28px rgba(11, 68, 245, .45); }
.k11-ic { width: 48px; height: 48px; border-radius: 12px; }
.k11-ic svg { width: 26px; height: 26px; }
.k11-tag { font-size: 13px; color: var(--accent); font-weight: 600; }
.k11-opt h3 { font-size: 26px; color: var(--heading); letter-spacing: -.02em; line-height: 1.1; }
.k11-opt > p { color: var(--text); line-height: 1.55; }
.k11-opt .k10-ticks { margin: 2px 0 0; }
.k11-price { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14.5px; }
.k11-price b { display: block; font-size: 24px; color: var(--heading); font-weight: 700; letter-spacing: -.01em; }
.k11-act { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.k11-act .k10-ghost, .k11-head-cta .k10-ghost { font-weight: 600; }
.k11-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.k11-steps li { counter-increment: s; padding: 26px; border-radius: 16px; background: var(--surface); display: grid; gap: 8px; align-content: start; }
.k11-steps li::before { content: counter(s, decimal-leading-zero); font: 600 13px/1 "Geist Mono", ui-monospace, monospace; color: var(--accent); }
.k11-steps b { color: var(--heading); font-size: 18px; }
.k11-steps span { color: var(--text); line-height: 1.55; }
.k11-steps.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* product pages */
.k11-head-cta { display: flex; gap: 14px 22px; align-items: center; flex-wrap: wrap; margin-top: 30px; }
.k11-box { padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--raised); }
.k11-box h3 { font-size: 18px; color: var(--heading); }
.k11-box .k10-ticks { margin-top: 14px; }
.k11-callout { background: var(--navy-900); border-radius: 18px; padding: clamp(28px, 4vw, 48px); }
.k11-callout .k10-kicker { color: var(--blue-200); }
.k11-callout p:last-child { font-size: clamp(18px, .6vw + 15px, 22px); color: #FFFFFF; max-width: 58ch; line-height: 1.5; }
.k11-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.k11-card { padding: 24px; border: 1px solid var(--line); border-radius: 16px; background: var(--raised); }
.k11-card h3 { font-size: 17px; color: var(--heading); margin-bottom: 8px; }
.k11-card p { color: var(--text); line-height: 1.55; font-size: 15.5px; }
.k11-tight { padding-top: 0; }

/* pricing: one tab per product, then plan cards */
.k11-tabs { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 30px; padding: 4px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.k11-tabs a { padding: 10px 16px; border-radius: 9px; font-weight: 600; font-size: 15px; color: var(--muted); text-decoration: none; }
.k11-tabs a:hover { color: var(--heading); }
.k11-tabs a[aria-selected="true"] { background: var(--raised); color: var(--heading); box-shadow: 0 1px 3px rgba(17, 27, 78, .14); }
.k11-panel[hidden] { display: none; }
.k11-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.k11-plan { display: flex; flex-direction: column; gap: 8px; padding: 28px; border-radius: 18px; border: 1px solid var(--line); background: var(--raised); }
.k11-plan.feat { border-color: var(--accent); box-shadow: 0 24px 48px -30px rgba(11, 68, 245, .5); }
.k11-plan h2, .k11-plan h3 { font-size: 20px; color: var(--heading); letter-spacing: -.01em; }
.k11-amt { font-size: 38px; font-weight: 700; color: var(--heading); letter-spacing: -.02em; line-height: 1.1; margin-top: 6px; }
.k11-per { color: var(--muted); font-size: 14px; }
.k11-plan > p:not([class]) { color: var(--text); margin-top: 6px; }
.k11-plan .k10-ticks { margin: 12px 0 18px; font-size: 15px; }
.k11-plan .btn { margin-top: auto; align-self: flex-start; }
.k11-badge { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--tint); padding: 5px 10px; border-radius: 999px; }
.k11-note { margin-top: 22px; max-width: 860px; }
.k11-plans.four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.k11-plans.four .k11-plan { padding: 24px; }
.k11-plans.four .k11-amt { font-size: 32px; }
@media (max-width: 1180px) { .k11-plans.four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 960px) {
  .k11-opts, .k11-steps, .k11-steps.four, .k11-grid, .k11-plans { grid-template-columns: minmax(0, 1fr); }
}