/* KadaAI — pages/pricing.css: the pricing calculator and the no-JS price table.
   Load after site.css on /pricing (and the styleguide). Markup contract: see README.md. */
/* One track that may shrink below its content's min-content width, so the controls card keeps the 16 px gutter */
.calc{display:grid;grid-template-columns:minmax(0, 1fr);gap:1.5rem;align-items:start}
@media (min-width: 960px) {.calc {grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr)} }
.calc__controls{display:grid;gap:2rem;padding:clamp(1.5rem, 1rem + 2vw, 2.5rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl)}
.calc__group{display:grid;gap:.875rem}
.calc__label{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem;font-size:1.0625rem;font-weight:700;color:var(--ink)}
.calc__row{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1.25rem}
.calc__hint{font-size:.875rem;font-weight:600;color:var(--warm-ink)}
.calc__hint a{color:inherit}
/* Narrow phones: a little less padding, tighter toggle labels; below 360 px the Monthly | Yearly toggle wraps
   onto two full-width rows instead of pushing the card past the screen edge (WCAG 1.4.10 reflow) */
@media (max-width: 399.98px) {
  .calc__controls {padding:1.25rem}
  .calc .segmented label {padding:0 .75rem}
}
@media (max-width: 359.98px) {
  .calc .segmented {flex-wrap:wrap;width:100%;border-radius:var(--r-lg)}
  .calc .segmented label {flex:1 1 auto;justify-content:center;border-radius:var(--r)}
}
.calc__summary{position:relative;isolation:isolate;overflow:hidden;display:grid;gap:1.25rem;padding:clamp(1.5rem, 1rem + 2vw, 2.25rem);color:rgba(255,255,255,.78);background:var(--navy);border-radius:var(--r-xl);box-shadow:var(--shadow-lg)}
@media (min-width: 960px) {.calc__summary {position:sticky;top:calc(var(--header-h) + 1.5rem)} }
.calc__summary::before{content:"";position:absolute;z-index:-1;inset:-40% -30% auto auto;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, rgba(30,107,240,.55), rgba(18,184,200,.2) 45%, transparent 70%)}
.calc__summary h3{font-size:1rem;font-weight:700;color:rgba(255,255,255,.7);letter-spacing:0}
.calc__summary .price{color:#fff}
.calc__summary .price__period{color:rgba(255,255,255,.65)}
.calc__equiv{font-size:.875rem;color:rgba(255,255,255,.7)}
.calc__lines{display:grid;gap:.65rem;list-style:none;padding:1.1rem 0 0;font-size:.9375rem;border-top:1px solid rgba(255,255,255,.14)}
.calc__lines li{display:flex;justify-content:space-between;gap:1rem;line-height:1.4}
.calc__lines li > :last-child{flex:none;font-weight:700;color:#fff;font-variant-numeric:tabular-nums}
.calc__saving{justify-self:start;color:#9BE7BC;background:rgba(46,158,91,.18)}
.calc__note{font-size:.8125rem;line-height:1.5;color:rgba(255,255,255,.6)}
#pricing-calculator:focus{outline-offset:6px;border-radius:var(--r-xl)}
/* Phones: the summary sits below the controls, so a sticky bar keeps the total in view while you change them. */
.calc__bar{position:sticky;bottom:.75rem;z-index:5;display:flex;align-items:baseline;justify-content:space-between;gap:.5rem 1rem;padding:.8rem 1.25rem;font-size:.875rem;font-weight:600;color:rgba(255,255,255,.75);background:var(--navy);border-radius:var(--r-pill);box-shadow:0 12px 28px -10px rgba(11,31,68,.55)}
.calc__bar{transition:opacity .2s, visibility .2s}
.calc__bar.is-off{visibility:hidden;opacity:0}
.calc__bar b{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
@media (min-width: 960px) {.calc__bar {display:none} }
.price-table{width:100%;font-size:.9375rem}
.price-table caption{padding-bottom:.5rem;text-align:left;font-weight:700;color:var(--ink)}
.price-table th, .price-table td{padding:.75rem 0;text-align:left;border-bottom:1px solid var(--border)}
.price-table td:last-child{text-align:right;font-weight:700;color:var(--ink);white-space:nowrap}
/* Without JS the calculator cannot update, so hide it; the page shows its <noscript> price table instead. */
html:not(.js) #pricing-calculator{display:none}
/* The disclaimer "Indicative launch pricing — subject to change. Prices exclude GST." must sit outside the calculator, in a visible .note. */

/* ===== /pricing page only (pricing.html). Everything below is namespaced .pg-… so the styleguide is untouched. ===== */
/* Hero: a little tighter at the bottom, so the bundles sit close under it */
.pg-price-hero{padding-bottom:clamp(2.75rem, 2rem + 3vw, 4.5rem)}
.pg-price-hero .hero__title{max-width:15em}
.pg-bundles .price-cards{margin-top:1rem}
.pg-bundles .price-card__desc{min-height:0}
@media (min-width: 960px) {.pg-bundles .price-card__desc {min-height:3em} }
.pg-bundles .price__note{margin-top:.35rem}
/* The always-visible disclaimer above the calculator */
.pg-disclaimer{display:flex;align-items:center;gap:.55rem;width:fit-content;max-width:100%;margin:0 auto clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);padding:.55rem 1.1rem;font-size:.875rem;font-weight:600;line-height:1.4;color:var(--ink-2);background:#fff;border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--shadow-xs)}
.pg-disclaimer .icon{width:1.1rem;height:1.1rem;color:var(--warm-ink)}
@media (max-width: 479.98px) {.pg-disclaimer {border-radius:var(--r-lg);align-items:flex-start} .pg-disclaimer .icon {margin-top:.1em} }
/* Phones: the sticky total bar sits in the flow between controls and summary; let it eat the two grid gaps */
@media (max-width: 959.98px) {#calculator .calc__bar {margin-block:-1.5rem}}
.pg-calc-help{margin-top:-.35rem;font-size:.875rem;line-height:1.5;color:var(--text-muted)}
.calc__group > .switch + .pg-calc-help, .calc__group > .segmented + .pg-calc-help{margin-top:-.25rem}
.pg-choice-icon{width:1rem;height:1rem;color:var(--blue)}
.pg-noscript{max-width:720px;margin:0 auto;padding:clamp(1.25rem, 1rem + 1vw, 2rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl)}
/* Every plan includes: airy icon grid, no boxes */
.pg-includes{display:grid;gap:1.75rem 2rem;list-style:none;padding:0}
@media (min-width: 640px) {.pg-includes {grid-template-columns:repeat(2, minmax(0, 1fr));gap:2.25rem 2.5rem} }
@media (min-width: 1024px) {.pg-includes {grid-template-columns:repeat(4, minmax(0, 1fr));gap:3rem 2.5rem} }
.pg-include{display:flex;align-items:flex-start;gap:1rem}
@media (min-width: 1024px) {.pg-include {flex-direction:column;gap:1.1rem} }
.pg-include h3{font-size:1.0625rem;line-height:1.35;letter-spacing:-.01em}
.pg-include p{margin-top:.3rem;font-size:.9375rem;line-height:1.55;color:var(--ink-2)}
/* AI tiers table: a white card on the tint. Unlike the shared compare table, it stays a real table on phones
   (four narrow columns of ticks read faster than seven stacked cards). */
.pg-tiers{max-width:1000px;margin-inline:auto;padding:.25rem .25rem 0;background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xs)}
.pg-tiers .compare-table thead th:not(:first-child), .pg-tiers .compare-table td{text-align:center;width:20%}
.pg-tiers .compare-table td .cell{justify-content:center}
@media (min-width: 720px) {
  .pg-tiers {padding:.5rem 1rem 0}
  .pg-tiers .compare-table caption {padding:1rem 1.25rem .25rem}
}
.pg-tiers .compare-table tbody th{font-weight:700}
.pg-row-sub{display:block;margin-top:.2rem;font-size:.8125rem;font-weight:500;line-height:1.45;color:var(--text-muted)}
.pg-tier-name{font-size:.9375rem;font-weight:700;color:var(--ink)}
.pg-cell-num{font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.pg-cell-price{white-space:nowrap;font-size:.875rem;color:var(--text-muted)}
.pg-cell-price .pg-cell-num{font-size:.9375rem}
.pg-tiers-foot{display:grid;gap:1rem;max-width:1000px;margin:clamp(1.5rem, 1rem + 1.5vw, 2.25rem) auto 0}
.pg-tiers-foot .note{max-width:60em;margin-inline:auto}
@media (min-width: 640px) {.pg-tiers-foot .note {text-align:center} }
@media (max-width: 719.98px) {
  .pg-tiers .compare-table {display:table;table-layout:fixed;font-size:.875rem}
  .pg-tiers .compare-table caption {display:table-caption;padding:1rem .75rem .5rem;font-size:.8125rem}
  .pg-tiers .compare-table thead {position:static;width:auto;height:auto;overflow:visible;clip-path:none;display:table-header-group}
  .pg-tiers .compare-table tbody {display:table-row-group}
  .pg-tiers .compare-table tr {display:table-row;margin:0;padding:0;background:none;border:0;border-radius:0}
  .pg-tiers .compare-table th, .pg-tiers .compare-table td {display:table-cell;padding:.85rem .35rem;vertical-align:middle;border-bottom:1px solid var(--border)}
  .pg-tiers .compare-table th:first-child {width:auto;padding-left:.75rem}
  .pg-tiers .compare-table thead th:not(:first-child), .pg-tiers .compare-table td {width:4.1rem}
  .pg-tiers .compare-table thead th:not(:first-child) {padding-inline:.15rem}
  .pg-tiers .compare-table tbody th {padding-block:.85rem;font-size:.875rem;line-height:1.35}
  .pg-tiers .compare-table td::before {content:none}
  .pg-tiers .compare-table td {display:table-cell}
  .pg-tiers .compare-table tbody tr:last-child > * {border-bottom:0}
  .pg-tiers .compare-table thead th {padding-block:.75rem;vertical-align:bottom}
  .pg-tiers thead .badge {height:auto;min-height:1.625rem;max-width:100%;padding:.3rem .25rem;font-size:.65rem;line-height:1.15;letter-spacing:0;white-space:normal;text-align:center;justify-content:center}
  .pg-tiers thead .badge .icon {display:none}
  .pg-tier-name {font-size:.8125rem}
  .pg-row-sub {font-size:.75rem}
  .pg-cell-price {white-space:normal;font-size:.75rem;line-height:1.3}
  .pg-cell-price .pg-cell-num {display:block;font-size:.875rem}
  .pg-tiers .cell .icon {width:1.125rem;height:1.125rem}
  .pg-tiers .cell--part {font-size:.75rem}
}
/* Malls / chains band: warm card, text + a short list of till facts */
.pg-talk{display:grid;gap:clamp(2rem, 1.5rem + 2vw, 3.5rem);align-items:center;padding:clamp(1.75rem, 1rem + 3.5vw, 4rem);background:linear-gradient(140deg, var(--warm-tint) 0%, #FBF6F3 35%, var(--surface-2) 100%);border:1px solid #F3E2DA;border-radius:var(--r-2xl)}
@media (min-width: 960px) {.pg-talk {grid-template-columns:minmax(0, 7fr) minmax(0, 5fr)} }
.pg-talk__text{display:grid;gap:1rem;justify-items:start;grid-template-columns:minmax(0, 1fr)}
.pg-talk__text h2{font-size:clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem)}
.pg-talk__text p{font-size:1.0625rem}
.pg-talk__text .btn-row{margin-top:.5rem}
ul.pg-talk__facts{gap:1rem;padding:clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem);font-size:1rem;background:rgba(255,255,255,.85);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-sm)}
.pg-talk__facts strong{font-weight:700}
.pg-line{display:block}