/* KadaAI — pages/features.css: the /features page only. Load after site.css.
   1 section nav · 2 group labels · 3 screenshot layouts (duo, crops, shot cards) · 4 keys · 5 report list
   6 GST example + summary · 7 printing (paper receipts) · 8 products (variant + CSV cards) · 9 customise
   10 platforms. Page classes are prefixed pg-. */

/* 1. Section nav: sticky under the site header, chips scroll sideways on small screens */
html{scroll-padding-top:calc(var(--header-h) + 4rem)}
.pg-subnav{position:sticky;top:var(--header-h);z-index:40;background:rgba(255,255,255,.9);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-block:1px solid var(--border)}
.pg-subnav__list{display:flex;align-items:center;gap:.25rem;margin:0;padding:.5rem 0;list-style:none;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none}
.pg-subnav__list::-webkit-scrollbar{display:none}
.pg-subnav a{display:inline-flex;align-items:center;gap:.45rem;flex:none;min-height:40px;padding:0 .95rem;border-radius:var(--r-pill);font-size:.9375rem;font-weight:600;line-height:1;white-space:nowrap;color:var(--ink-2);text-decoration:none;transition:color .15s, background-color .15s, box-shadow .15s}
.pg-subnav a .icon{width:1.05rem;height:1.05rem;color:var(--muted)}
.pg-subnav a:hover{color:var(--ink);background:var(--surface-2)}
.pg-subnav a:focus-visible{outline-offset:-2px}
@media (pointer: coarse) {.pg-subnav a {min-height:44px} }
@media (max-width: 899.98px) {
  .pg-subnav > .container {padding-inline:0}
  .pg-subnav__list {padding-inline:var(--gutter) 0;scroll-padding-inline:var(--gutter);-webkit-mask-image:linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent);mask-image:linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent)}
  .pg-subnav__list::after {content:"";flex:0 0 2rem} /* lets the last chip scroll clear of the fade */
}
@media (min-width: 900px) {.pg-subnav__list {justify-content:center} }
/* Current section: the chip you jumped to, and (where supported) the section on screen */
@supports not ((animation-timeline: view()) and (timeline-scope: none)) {
body:has(#till:target) .pg-subnav a[href="#till"], body:has(#admin:target) .pg-subnav a[href="#admin"],
body:has(#gst:target) .pg-subnav a[href="#gst"], body:has(#printing:target) .pg-subnav a[href="#printing"],
body:has(#multi-till:target) .pg-subnav a[href="#multi-till"], body:has(#products:target) .pg-subnav a[href="#products"],
body:has(#customise:target) .pg-subnav a[href="#customise"], body:has(#platforms:target) .pg-subnav a[href="#platforms"]{color:var(--ink);background:var(--surface-3)}
}
@keyframes pg-on {from, to {color:var(--ink);background-color:var(--surface-3)} }
@supports (animation-timeline: view()) and (timeline-scope: none) {
  .pg-main {timeline-scope:--pg-till, --pg-admin, --pg-gst, --pg-printing, --pg-multi-till, --pg-products, --pg-customise, --pg-platforms}
  #till {view-timeline:--pg-till block} #admin {view-timeline:--pg-admin block} #gst {view-timeline:--pg-gst block}
  #printing {view-timeline:--pg-printing block} #multi-till {view-timeline:--pg-multi-till block}
  #products {view-timeline:--pg-products block} #customise {view-timeline:--pg-customise block} #platforms {view-timeline:--pg-platforms block}
  .pg-subnav a {animation:pg-on linear;animation-range:cover 62vh exit 62vh}
  .pg-subnav a[href="#till"] {animation-timeline:--pg-till} .pg-subnav a[href="#admin"] {animation-timeline:--pg-admin}
  .pg-subnav a[href="#gst"] {animation-timeline:--pg-gst} .pg-subnav a[href="#printing"] {animation-timeline:--pg-printing}
  .pg-subnav a[href="#multi-till"] {animation-timeline:--pg-multi-till} .pg-subnav a[href="#products"] {animation-timeline:--pg-products}
  .pg-subnav a[href="#customise"] {animation-timeline:--pg-customise} .pg-subnav a[href="#platforms"] {animation-timeline:--pg-platforms}
}

/* Section rhythm: a little less air above each section's first heading than the default */
.pg-section .section-head{margin-bottom:clamp(2.5rem, 2rem + 2.5vw, 4.5rem)}
.pg-section .feature-stack{gap:clamp(4rem, 2.5rem + 5vw, 7.5rem)}
.pg-section .section-head .badge{justify-self:start}

/* 2. Group labels (a small heading above a group of cards) */
.pg-group{margin-top:clamp(4rem, 3rem + 4vw, 7rem)}
.pg-group__head{display:grid;gap:.5rem;max-width:640px;margin-bottom:clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem);grid-template-columns:minmax(0, 1fr)}
.pg-group__head h3{font-size:clamp(1.5rem, 1.25rem + 1vw, 2rem);letter-spacing:-.025em}
.pg-group__head p{font-size:1.0625rem}
.pg-inline-badge{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.6rem}

/* 3. Screenshot layouts */
/* Duo: a main screen with a close-up overlapping its lower right corner */
.pg-duo{display:grid;grid-template-columns:repeat(12, minmax(0, 1fr));grid-template-rows:auto clamp(2.5rem, 1rem + 5vw, 5rem) auto auto;margin:0}
.pg-duo > .pg-duo__main{grid-column:1 / 12;grid-row:1 / 3}
.pg-duo > .pg-duo__inset{grid-column:5 / 13;grid-row:2 / 4;z-index:1;box-shadow:0 0 0 1px rgba(11,31,68,.08), 0 4px 10px rgba(11,31,68,.06), 0 30px 60px -18px rgba(11,31,68,.34)}
.pg-duo > .pg-duo__inset--wide{grid-column:3 / 13}
.pg-duo > figcaption{grid-column:1 / -1;grid-row:4}
.pg-duo--stack{grid-template-rows:auto .75rem auto auto}
.pg-duo--stack > .pg-duo__inset, .pg-duo--stack > .pg-duo__inset--wide{grid-column:3 / 13}
@media (max-width: 639.98px) {
  .pg-duo {grid-template-rows:auto 2rem auto auto}
  .pg-duo > .pg-duo__main {grid-column:1 / 13}
  .pg-duo > .pg-duo__inset {grid-column:3 / 13}
  .pg-duo > .pg-duo__inset--wide {grid-column:2 / 13}
  .pg-duo.pg-duo--stack {grid-template-rows:auto .5rem auto auto}
}

/* Crops: show part of a screen inline; the lightbox still opens the whole screen */
.pg-crop{position:relative;overflow:hidden}
.pg-crop picture{height:100%}
.pg-crop img{height:100%;object-fit:cover;object-position:top center}
.pg-crop--left img{object-position:left top}
.pg-ar-stock{aspect-ratio:1440 / 860}
.pg-ar-strip{aspect-ratio:22 / 10}
/* Zoom crops: a region of the screen, scaled up (img is positioned inside a fixed-ratio box) */
.pg-zoom{position:relative;overflow:hidden}
.pg-zoom img{position:absolute;max-width:none}
.frame__body.pg-zoom img{width:auto}
/* Till sign-in card (x 370-1070, y 231-668 of 1440 x 900) */
.pg-zoom--login{aspect-ratio:700 / 437}
.frame__body.pg-zoom--login img{width:205.7%;left:-52.9%;top:-52.9%}

/* Shot cards: a card with a screen on top */
.pg-shotcard{gap:.6rem}
.pg-shotcard > .shot, .pg-shotcard > .frame, .pg-shotcard > .pg-art{margin:-.25rem -.25rem .9rem}
.pg-shotcard .frame{border-radius:var(--r)}
.pg-shotcard .frame__bar{height:1.75rem;padding:0 .7rem;border-radius:var(--r) var(--r) 0 0;font-size:.6875rem}
.pg-shotcard .frame__controls{gap:12px}
.pg-shotcard .frame__controls i{width:8px;height:8px}
.pg-shotcard .frame__body{border-radius:0 0 var(--r) var(--r)}
.pg-shotcard .frame__body:first-child{border-radius:var(--r)}
.pg-shotcard h3{font-size:1.1875rem}
.pg-shotcard .badge{justify-self:start;align-self:flex-start}
.pg-shotcard .note{margin-top:.25rem}
/* "More at the counter": both screens get the same height (the close-up has no window bar), so the headings line up */
.pg-more .pg-shotcard > .frame{display:flex;flex-direction:column;aspect-ratio:8 / 5;min-height:0}
.pg-more .pg-shotcard > .frame > .frame__body{flex:1 1 auto;min-height:0}
.pg-more .frame__body:not(.pg-zoom) picture{height:100%}
.pg-more .frame__body:not(.pg-zoom) img{height:100%;object-fit:cover;object-position:top}

/* Tabs inside a feature row: keep the text column still while panels change height */
.feature-row.pg-row-top{align-items:start}
@media (min-width: 900px) {.feature-row.pg-row-top > .feature-row__text {padding-top:clamp(1rem, .5rem + 2vw, 3rem)} }
.pg-tabs .tabs__list{margin-bottom:.25rem}
.pg-tabs .tabs__panel{padding-top:1.25rem}
.pg-tabs .tabs__panel-title{font-size:1.125rem}

/* Dark-mode illustration (no screenshot of the admin in dark mode yet) */
.pg-art{display:grid;place-items:center;border-radius:var(--r);overflow:hidden}
.pg-art--modes{grid-template-columns:1fr 1fr;aspect-ratio:22 / 10;border:1px solid var(--border)}
.pg-art--modes > span{display:grid;place-items:center;align-content:center;gap:.35rem;width:100%;height:100%;font-weight:800;font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);letter-spacing:-.03em}
.pg-art--modes > span small{font-size:.75rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;opacity:.75}
.pg-art--modes > span:first-child{color:var(--navy);background:#F3F5FA}
.pg-art--modes > span:last-child{color:#E8EEF9;background:#141B2B}
/* 640–959 px: the Dark mode card spans the row on its own, so keep its picture short */
@media (min-width: 640px) and (max-width: 959.98px) {.grid--3 > :last-child:nth-child(odd) > .pg-art--modes {aspect-ratio:44 / 10} }

/* 4. Keyboard legend */
.pg-keys{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:.75rem;width:100%;margin-top:.5rem;padding:0;list-style:none}
.pg-keys li{display:grid;gap:.6rem;align-content:start;padding:1rem 1.1rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);font-size:.9375rem;line-height:1.45}
.pg-keys kbd{justify-self:start;min-width:2.6em;padding:.3em .7em;font-size:.95rem;border-bottom-width:3px;box-shadow:0 1px 0 rgba(11,31,68,.06)}

/* 5. Report list: four short report screens, each with its own label */
.pg-reports{display:grid;gap:clamp(1.25rem, 1rem + 1vw, 1.75rem);margin:0;padding:0;list-style:none}
.pg-report{display:grid;gap:1rem 2.5rem;align-items:center;padding:clamp(1.25rem, 1rem + 1vw, 1.75rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-xs)}
.pg-report h4{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:1.125rem}
.pg-report p{margin-top:.35rem;font-size:.9375rem;line-height:1.55}
.pg-report .frame{border-radius:var(--r);box-shadow:0 0 0 1px rgba(11,31,68,.07), 0 10px 24px -14px rgba(11,31,68,.25)}
.pg-report .frame__body, .pg-report .frame__body:first-child{border-radius:var(--r)}
@media (min-width: 860px) {.pg-report {grid-template-columns:minmax(0, 4fr) minmax(0, 8fr)} }

/* 6. GST: worked example and the included / not-yet summary */
.pg-example{display:grid;gap:1.25rem;padding:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md)}
.pg-example__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.pg-example__head p{font-weight:700;color:var(--ink)}
.pg-example__rows{display:grid;gap:0;margin:0}
.pg-example__rows > div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px dashed var(--border-strong);font-size:1rem}
.pg-example__rows dt{color:var(--ink-2)}
.pg-example__rows dd{margin:0;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-example__rows > .is-total{border-bottom:0;padding-top:1rem}
.pg-example__rows > .is-total dt{font-weight:700;color:var(--ink)}
.pg-example__rows > .is-total dd{font-size:1.25rem}
.pg-example__result{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.1rem;background:var(--green-tint);border:1px solid #CBE9D6;border-radius:var(--r-lg);font-size:.9375rem;line-height:1.5}
.pg-example__rate{flex:none;display:grid;place-items:center;min-width:4.25rem;height:3rem;padding:0 .6rem;border-radius:var(--r);font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:#fff;background:var(--green-ink)}
.pg-example__alt{display:flex;align-items:center;gap:.6rem;font-size:.875rem;color:var(--text-muted)}
.pg-example__alt s{color:var(--ink-2);font-weight:700}

.pg-summary{display:grid;gap:clamp(1.5rem, 1rem + 2vw, 3rem);margin-top:clamp(4rem, 3rem + 4vw, 6.5rem);padding:clamp(1.5rem, 1rem + 2vw, 2.75rem);background:var(--surface-2);border-radius:var(--r-2xl)}
.pg-summary h3{font-size:1.25rem;margin-bottom:1.1rem}
.pg-summary__not{align-self:start;padding:clamp(1.25rem, 1rem + 1vw, 1.75rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl)}
.pg-summary__not h3{display:flex;align-items:center;gap:.5rem;margin-bottom:.9rem;font-size:1rem}
.pg-summary__not .x-list{gap:.6rem;font-size:.875rem;color:var(--ink-2)}
.pg-summary__not .x-list li{padding-left:1.75rem}
.pg-summary__not .x-list li::before{width:1.2rem;height:1.2rem}
.pg-summary__not .x-list li::after{left:.275rem;top:calc(.1em + .275rem);width:.65rem;height:.65rem}
.pg-summary__not .note{margin-top:1rem}
@media (min-width: 960px) {.pg-summary {grid-template-columns:minmax(0, 7fr) minmax(0, 4fr);align-items:start} }

/* 7. Printing: paper receipts at their real relative widths */
.pg-print{display:grid;gap:clamp(2.5rem, 2rem + 3vw, 5rem);align-items:center}
@media (min-width: 960px) {.pg-print {grid-template-columns:minmax(0, 6fr) minmax(0, 5fr)} }
.pg-printlist{display:grid;gap:.75rem;margin:0;padding:0;list-style:none}
.pg-printlist li{display:flex;align-items:flex-start;gap:1rem;padding:1rem 1.15rem;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs)}
.pg-printlist .icon-tile{margin-top:.1rem}
.pg-printlist h3{font-size:1.0625rem;line-height:1.35}
.pg-printlist p{margin-top:.2rem;font-size:.9375rem;line-height:1.5}
.pg-receipts{display:flex;align-items:flex-start;justify-content:center;max-width:320px;margin-inline:auto}
.pg-receipts > .shot{flex:1 1 0;min-width:0}
@media (max-width: 639.98px) {.pg-receipts {max-width:260px} }
.pg-receipt{display:block;border-radius:2px;filter:drop-shadow(0 1px 1px rgba(11,31,68,.1)) drop-shadow(0 16px 22px rgba(11,31,68,.16));transition:transform .25s var(--ease)}
.pg-receipt:hover{transform:translateY(-3px)}
.pg-receipt__paper{display:block;padding-bottom:10px;background:#fff;-webkit-mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;mask:conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%}
.pg-receipt__paper img{width:100%}
.pg-receipts figcaption{margin-top:1.25rem}
.pg-receipts figcaption b{display:block;font-size:.9375rem;color:var(--ink)}
/* GST: the receipt that is the tax invoice, as paper */
.pg-gst-receipt{max-width:300px}
.pg-gst-receipt figcaption{margin-top:1.25rem}
@media (max-width: 639.98px) {.pg-gst-receipt {max-width:260px} }
.pg-paper{border-radius:6px}
.pg-paper .frame__body, .pg-paper .frame__body:first-child{border-radius:6px;background:#fff}

/* 8. Products: variant card and CSV card */
.pg-variant, .pg-csv{display:grid;gap:1.25rem;padding:clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow-md)}
.pg-variant__top, .pg-csv__top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.pg-variant__name{font-size:1.25rem;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.pg-variant__name span{margin-left:.35rem;font-size:1rem;font-weight:600;color:var(--text-muted)}
.pg-attrs{display:grid;gap:.75rem}
.pg-attr{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.pg-attr > b{min-width:4.5rem;font-size:.8125rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-muted)}
.pg-chip{display:inline-flex;align-items:center;min-height:2rem;padding:0 .75rem;border:1px solid var(--border-strong);border-radius:var(--r-pill);font-size:.875rem;font-weight:600;color:var(--ink);background:#fff}
.pg-chip--maroon::before, .pg-chip--teal::before{content:"";width:.7rem;height:.7rem;margin-right:.45rem;border-radius:50%}
.pg-chip--maroon::before{background:#8A2340} .pg-chip--teal::before {background:#1C7C7D}
.pg-skus{width:100%;font-size:.875rem;border-collapse:collapse}
.pg-skus th{padding:.55rem .5rem;text-align:left;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border)}
.pg-skus td{padding:.6rem .5rem;border-bottom:1px solid var(--border);color:var(--ink);font-variant-numeric:tabular-nums}
.pg-skus td:first-child, .pg-skus td:last-child{font-family:var(--mono);font-size:.8125rem}
.pg-skus tr:last-child td{border-bottom:0;color:var(--text-muted);font-family:var(--font);font-size:.875rem}
@media (max-width: 479.98px) {.pg-skus .pg-hide-xs {display:none} }
.pg-csv__file{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink)}
.pg-csv__file .icon-tile{width:2.25rem;height:2.25rem;border-radius:10px}
.pg-csv__cols{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none;counter-reset:col}
.pg-csv__cols li{display:inline-flex;align-items:center;gap:.4rem;min-height:2rem;padding:0 .65rem 0 .35rem;font-family:var(--mono);font-size:.78rem;font-weight:600;color:var(--navy);background:var(--surface-2);border:1px solid var(--border);border-radius:8px;counter-increment:col}
.pg-csv__cols li::before{content:counter(col);display:grid;place-items:center;min-width:1.35rem;height:1.35rem;border-radius:6px;font-family:var(--font);font-size:.6875rem;font-weight:700;color:var(--text-muted);background:#fff}
.pg-csv__steps{display:grid;gap:.6rem;margin:0;padding:1rem 0 0;list-style:none;border-top:1px solid var(--border)}
.pg-csv__steps li{display:flex;align-items:flex-start;gap:.75rem;font-size:.9375rem;line-height:1.45}
.pg-csv__steps .icon{flex:none;margin-top:.1rem;color:var(--green)}
.pg-csv__steps b{color:var(--ink)}

/* 9. Customise: the option counts */
.pg-spec{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:1px;width:100%;margin:.5rem 0 0;padding:0;list-style:none;overflow:hidden;background:var(--border);border:1px solid var(--border);border-radius:var(--r-xl)}
.pg-spec li{display:grid;gap:.3rem;align-content:start;padding:1.1rem 1.15rem;background:#fff}
.pg-spec b{font-size:clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--ink)}
.pg-spec span{font-size:.875rem;line-height:1.4;color:var(--ink-2)}
@media (min-width: 640px) and (max-width: 899.98px) {.pg-spec {grid-template-columns:repeat(3, minmax(0, 1fr))} }

/* 10. Platforms */
.pg-platforms{display:grid;gap:clamp(1rem, .75rem + 1vw, 1.5rem)}
.pg-platforms .card{gap:.6rem}
.pg-platforms .card > .icon-tile{margin-bottom:.25rem}
.pg-platforms .card__badge{top:1.5rem;right:1.5rem}
.pg-platforms .card--soon{background:rgba(255,255,255,.6);box-shadow:none;border-style:dashed}
.pg-hw{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem 1.5rem;margin-top:clamp(1.5rem, 1rem + 1.5vw, 2.25rem);padding:clamp(1.25rem, 1rem + 1vw, 1.75rem);background:#fff;border:1px solid var(--border);border-radius:var(--r-xl)}
.pg-hw > div{flex:1 1 20rem;min-width:0}
.pg-hw h3{font-size:1.0625rem;margin-bottom:.35rem}
.pg-hw p{font-size:.9375rem}
.pg-hw .btn{align-self:center}

/* Card titles one level down inside a titled group */
.pg-group .card h4{font-size:1.1875rem;line-height:1.3;letter-spacing:-.018em}
.pg-steps .step h4{padding-top:.45rem;margin-bottom:.3rem;font-size:1.125rem}
@media (min-width: 900px) {.pg-steps .steps--row .step h4 {padding-top:0} }

/* Small helpers */
.pg-lead-note{font-size:.9375rem;color:var(--text-muted)}
.pg-callout-row{display:grid;gap:1rem;margin-top:clamp(3rem, 2rem + 3vw, 4.5rem)}
.pg-callout-row .callout a{font-weight:700}
.pg-steps{margin-top:clamp(3.5rem, 2.5rem + 3vw, 5.5rem)}
.pg-steps .steps{margin-top:1.75rem}
.pg-steps .btn-row{margin-top:1.75rem}