/* SmartShelfKart marketing site.

   Type: Sora carries headings — geometric and slightly technical, which suits
   a product about counting things. Inter carries body copy because nothing
   reads better at 16-17px. IBM Plex Mono carries anything that is data: SKUs,
   formulas, figures in tables, and the small uppercase labels, so the
   vocabulary of a stock ledger is present in the typography itself.

   Colour: the brand teal, plus the cyan from the app icon's swoosh used as a
   second accent and nowhere near body text. */

/* ================================================================== */
/* tokens                                                              */
/* ================================================================== */

:root {
  color-scheme: light;

  --bg:        #ffffff;
  --bg-alt:    #f5f9f8;
  --bg-sunk:   #eaf3f1;
  --bg-card:   #ffffff;

  --fg:        #08201e;
  --fg-mut:    #47605d;
  --fg-fade:   #5a726e;

  --line:      #dde9e7;
  --line-hi:   #c4d8d5;

  --brand:     #0b7b70;
  --brand-2:   #0e93aa;
  --brand-ink: #064f47;
  --brand-wash:#e6f6f3;
  --swoosh:    #22b8d0;

  --warn:      #a8530b;
  --warn-wash: #fbf1e4;
  --on-brand:  #ffffff;

  --shadow-sm: 0 1px 2px rgba(8, 32, 30, .05);
  --shadow:    0 1px 2px rgba(8, 32, 30, .04), 0 10px 28px -14px rgba(8, 32, 30, .22);
  --shadow-lg: 0 2px 4px rgba(8, 32, 30, .05), 0 22px 48px -20px rgba(8, 32, 30, .3);

  --r-sm: 8px;
  --r:    13px;
  --r-lg: 20px;

  --wrap: 1140px;
  --measure: 42rem;

  --display: "Sora", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg:        #08100f;
    --bg-alt:    #0d1817;
    --bg-sunk:   #13201e;
    --bg-card:   #101b1a;
    --fg:        #e9f2f0;
    --fg-mut:    #9db3b0;
    --fg-fade:   #7d9995;
    --line:      #1e2e2c;
    --line-hi:   #2b403d;
    --brand:     #35d4c2;
    --brand-2:   #4fc9e4;
    --brand-ink: #a5f3ea;
    --brand-wash:#0f2e2b;
    --swoosh:    #4fd2e8;
    --warn:      #e8a75c;
    --warn-wash: #2b2113;
    --on-brand:  #04211e;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -16px rgba(0, 0, 0, .8);
    --shadow-lg: 0 2px 6px rgba(0, 0, 0, .55), 0 26px 54px -22px rgba(0, 0, 0, .9);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #08100f;
  --bg-alt:    #0d1817;
  --bg-sunk:   #13201e;
  --bg-card:   #101b1a;
  --fg:        #e9f2f0;
  --fg-mut:    #9db3b0;
  --fg-fade:   #7d9995;
  --line:      #1e2e2c;
  --line-hi:   #2b403d;
  --brand:     #35d4c2;
  --brand-2:   #4fc9e4;
  --brand-ink: #a5f3ea;
  --brand-wash:#0f2e2b;
  --swoosh:    #4fd2e8;
  --warn:      #e8a75c;
  --warn-wash: #2b2113;
  --on-brand:  #04211e;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow:    0 1px 2px rgba(0, 0, 0, .5), 0 12px 30px -16px rgba(0, 0, 0, .8);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .55), 0 26px 54px -22px rgba(0, 0, 0, .9);
}

/* ================================================================== */
/* base                                                                */
/* ================================================================== */

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: "cv05" 1, "cv11" 1;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg, video { max-width: 100%; height: auto; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-2); }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

h1, h2, h3, h4 {
  font-family: var(--display);
  line-height: 1.14;
  letter-spacing: -.028em;
  margin: 0 0 .5em;
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: clamp(1.92rem, 1.3rem + 3.2vw, 3.5rem); font-weight: 800; letter-spacing: -.04em; }
h2 { font-size: clamp(1.42rem, 1.18rem + 1.5vw, 2.3rem); font-weight: 700; }
h3 { font-size: 1.15rem; letter-spacing: -.018em; }
p, ul, ol, table, pre, figure { margin: 0 0 1.15em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(15px, 4vw, 22px); }
.wrap--narrow { max-width: 47rem; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) 0; font-weight: 600;
}
.skip:focus { left: 0; }

/* ================================================================== */
/* header                                                              */
/* ================================================================== */

.site-head {
  position: sticky; top: 0; z-index: 40;
  /* the mobile nav panel hangs off the bottom edge of this bar */
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
  @media (min-width: 821px) {
    .site-head { background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(150%) blur(12px); }
  }
}
.site-head__in { display: flex; align-items: center; gap: 20px; min-height: 66px; }

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem;
  letter-spacing: -.03em; color: var(--fg); text-decoration: none; flex: none;
}
.brand__mark { border-radius: 9px; flex: none; display: block; }
.brand__word em { font-style: normal; color: var(--brand); }
.brand:hover { color: var(--fg); }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: 8px 13px; border-radius: var(--r-sm);
  color: var(--fg-mut); text-decoration: none; font-size: .94rem; font-weight: 500;
  transition: background .15s, color .15s;
}
.site-nav a:hover { background: var(--bg-sunk); color: var(--fg); }
.site-nav a[aria-current] { color: var(--brand); background: var(--brand-wash); font-weight: 600; }

.site-head__act { display: flex; align-items: center; gap: 10px; flex: none; }

/* Two labels on the CTA, one shown at a time. Equal specificity, so this
   default must stay above the 460px override or it cancels it. */
.lbl-tight { display: none; }

.themebtn {
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  background: none; color: var(--fg-mut); border: 1px solid var(--line);
  border-radius: var(--r-sm); cursor: pointer; transition: color .15s, border-color .15s;
}
.themebtn:hover { color: var(--brand); border-color: var(--line-hi); }
.themebtn svg g { display: none; }
:root[data-theme-pref="system"] .themebtn .ico-auto,
:root[data-theme-pref="light"]  .themebtn .ico-sun,
:root[data-theme-pref="dark"]   .themebtn .ico-moon { display: block; }
:root:not([data-theme-pref]) .themebtn .ico-auto { display: block; }

.navtog, .navbtn { display: none; }

@media (max-width: 900px) {
  /* Brand, theme, CTA and menu all on one row. At 375px the pieces measured
     371px against 331px of usable width, so the bar wrapped to three rows and
     110px tall — a third of the first screen spent on chrome. Everything below
     is sized so the row fits, and the wordmark is the last thing to go. */
  .site-head__in { flex-wrap: nowrap; gap: 8px; padding-top: 9px; padding-bottom: 9px; min-height: 0; }
  .brand { margin-right: auto; gap: 8px; min-width: 0; }
  .brand__word { font-size: .95rem; white-space: nowrap; }
  .brand__mark { width: 28px; height: 28px; }
  .site-head__act { gap: 7px; }
  .themebtn { width: 34px; height: 34px; }
  .site-head .btn--sm { padding: 8px 13px; font-size: .85rem; }
  .navbtn {
    display: flex; flex-direction: column; justify-content: center; gap: 4.5px;
    width: 34px; height: 34px; padding: 0 7px; flex: none;
    border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
  }
  .navbtn span { display: block; height: 2px; background: var(--fg); border-radius: 2px; }
  .site-nav {
    order: 5; display: none; position: absolute; left: 0; right: 0; top: 100%;
    margin: 0; padding: 0 clamp(15px, 4vw, 22px) 8px;
    background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow);
  }
  .navtog:checked ~ .site-nav { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 6px 0 2px; }
  .site-nav a { padding: 12px 12px; font-size: 1rem; }
  html { scroll-padding-top: 62px; }
}
/* "Open the app" is 30px wider than "Open app". That 30px is the difference
   between keeping the wordmark on a 360px phone and losing it. */
@media (max-width: 460px) {
  .lbl-full { display: none; }
  .lbl-tight { display: inline; }
}
@media (max-width: 339px) {
  /* Below this even the short label leaves no room. The mark alone still
     identifies the site, and the alternative is the row wrapping again. */
  .brand__word { display: none; }
}

/* ================================================================== */
/* buttons                                                             */
/* ================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: 10px; border: 1px solid transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: var(--on-brand); font-family: var(--body); font-weight: 600; font-size: .98rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  box-shadow: var(--shadow-sm);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow); }
.btn, .btn:hover { color: var(--on-brand); }
.btn--sm { padding: 9px 16px; font-size: .9rem; flex: none; }
.btn--ghost, .btn--ghost:hover {
  background: var(--bg-card); color: var(--fg); border-color: var(--line-hi); box-shadow: none; filter: none;
}
.btn--ghost:hover { background: var(--bg-sunk); box-shadow: var(--shadow-sm); }

.btnrow { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ================================================================== */
/* breadcrumbs                                                         */
/* ================================================================== */

.crumbs { border-bottom: 1px solid var(--line); background: var(--bg-alt); font-size: .84rem; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 8px 0; }
.crumbs li + li::before { content: "/"; color: var(--fg-fade); margin-right: 7px; }
.crumbs a { color: var(--fg-mut); text-decoration: none; }
.crumbs a:hover { color: var(--brand); text-decoration: underline; }
.crumbs [aria-current] { color: var(--fg-fade); }

/* ================================================================== */
/* sections                                                            */
/* ================================================================== */

.sec { padding: clamp(38px, 6vw, 82px) 0; }
.sec--tight { padding: clamp(24px, 4vw, 52px) 0; }
.sec--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
.sec__head { max-width: 46rem; margin-bottom: clamp(22px, 4vw, 36px); }
.sec__head p { color: var(--fg-mut); font-size: 1.08rem; margin: 0; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
  font-family: var(--mono); font-size: .73rem; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--brand);
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--brand), var(--swoosh));
}

/* ================================================================== */
/* hero                                                                */
/* ================================================================== */

.hero {
  position: relative; padding: clamp(28px, 5vw, 76px) 0 clamp(30px, 4vw, 62px);
  overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: -40% 0 auto; height: 130%;
  background:
    radial-gradient(760px 300px at 18% 0%, var(--brand-wash), transparent 68%),
    radial-gradient(560px 260px at 82% 8%, color-mix(in srgb, var(--swoosh) 14%, transparent), transparent 70%);
  pointer-events: none; z-index: -1;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .hero::before { background: radial-gradient(760px 300px at 18% 0%, var(--brand-wash), transparent 68%); }
}
.hero h1 { max-width: 17ch; }
.hero__lead { font-size: clamp(1.05rem, .98rem + .4vw, 1.2rem); color: var(--fg-mut); max-width: 60ch; }
.hero__note { font-size: .88rem; color: var(--fg-fade); margin-top: 16px; }
.hero__note b { color: var(--brand); font-weight: 600; }

.stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin-top: clamp(26px, 5vw, 44px); padding-top: clamp(20px, 4vw, 30px);
  border-top: 1px solid var(--line);
}
.stats b {
  display: block; font-family: var(--display); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 800; letter-spacing: -.035em; color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.stats span { font-size: .87rem; color: var(--fg-mut); display: block; margin-top: 4px; }
@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .stats b { font-size: 1.45rem; }
  .stats span { font-size: .76rem; line-height: 1.35; }
}

/* ================================================================== */
/* grids & cards                                                       */
/* ================================================================== */

.grid { display: grid; gap: clamp(13px, 3vw, 18px); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .grid--3 { grid-template-columns: 1fr; } }

.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(18px, 4vw, 24px); box-shadow: var(--shadow-sm);
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.card h3 { margin-bottom: .4em; font-size: 1.08rem; }
.card p { margin: 0; color: var(--fg-mut); font-size: .95rem; }
.card--link { text-decoration: none; color: inherit; display: block; }
.card--link:hover { border-color: var(--brand); color: inherit; transform: translateY(-2px); box-shadow: var(--shadow); }
.card__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: .89rem; font-weight: 600; color: var(--brand);
}
.card--link:hover .card__more { gap: 10px; }
.card__more { transition: gap .16s; }

.ico {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 16px;
  border-radius: 11px; background: var(--brand-wash); color: var(--brand);
}
.ico svg { display: block; }

.featlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.featlist li { padding-left: 30px; position: relative; font-size: .95rem; }
.featlist li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 15px; height: 8px;
  border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(-45deg);
}
.featlist b { display: block; font-weight: 600; letter-spacing: -.005em; }
.featlist span { color: var(--fg-mut); font-size: .9rem; }

/* ================================================================== */
/* tables                                                              */
/* ================================================================== */

.tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.3em;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-card);
}
table { border-collapse: collapse; width: 100%; font-size: .93rem; min-width: 540px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th {
  font-family: var(--mono); font-size: .7rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--fg-fade);
  background: var(--bg-alt); white-space: nowrap;
}
tbody th { font-weight: 600; }
td { color: var(--fg-mut); }
.num, td.num { font-variant-numeric: tabular-nums; }

/* ================================================================== */
/* pricing                                                             */
/* ================================================================== */

.plans { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
@media (max-width: 1000px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px)  { .plans { grid-template-columns: 1fr; } }

.plan {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(20px, 4vw, 26px) clamp(18px, 4vw, 24px); box-shadow: var(--shadow-sm);
}
.plan--hot { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand), var(--shadow); }
.plan__tag {
  font-family: var(--mono); font-size: .67rem; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand); min-height: 1.2em; display: block;
}
.plan h3 { margin: 8px 0 5px; font-size: 1.2rem; }
.plan__desc { font-size: .89rem; color: var(--fg-mut); min-height: 3.4em; }
.plan__price {
  margin: 16px 0 3px; font-family: var(--display); font-size: 2.1rem;
  font-weight: 800; letter-spacing: -.04em; color: var(--brand);
}
.plan__was { font-size: .9rem; color: var(--fg-fade); text-decoration: line-through; }
.plan__limits {
  list-style: none; margin: 18px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--line); display: grid; gap: 9px; font-size: .89rem;
}
.plan__limits li { display: flex; justify-content: space-between; gap: 12px; }
.plan__limits span { color: var(--fg-mut); }
.plan__limits b { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ================================================================== */
/* FAQ                                                                 */
/* ================================================================== */

.faq { display: grid; gap: 10px; max-width: 52rem; }
.faq details {
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg-card); padding: 0 clamp(15px, 4vw, 20px); transition: border-color .16s;
}
.faq details[open] { border-color: var(--line-hi); }
.faq summary {
  cursor: pointer; font-weight: 600; padding: 16px 0; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 11px; height: 11px;
  border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq details > p, .faq details > ul { margin: 0 0 16px; color: var(--fg-mut); font-size: .95rem; }

/* ================================================================== */
/* prose                                                               */
/* ================================================================== */

.prose { max-width: var(--measure); font-size: 1.05rem; }
.prose h2 { margin-top: 1.7em; scroll-margin-top: 84px; }
.prose h3 { margin-top: 1.6em; scroll-margin-top: 84px; font-size: 1.1rem; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .5em; }
.prose li::marker { color: var(--fg-fade); }
.prose blockquote {
  margin: 1.6em 0; padding: 4px 0 4px 22px;
  border-left: 3px solid var(--brand); color: var(--fg-mut);
}
.prose code, .prose kbd {
  background: var(--bg-sunk); padding: 2px 6px; border-radius: 5px;
  font-family: var(--mono); font-size: .86em; color: var(--fg);
}
.prose .tablewrap table { min-width: 480px; }

.formula {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-left: 3px solid var(--brand); border-radius: var(--r-sm);
  padding: 20px 22px; margin: 1.5em 0;
  font-family: var(--mono); font-size: .92rem; line-height: 1.85;
  overflow-x: auto; white-space: pre; color: var(--fg);
}
.callout {
  background: var(--brand-wash); border-radius: var(--r); padding: 20px 22px; margin: 1.7em 0;
  font-size: .98rem;
}
.callout p:last-child { margin-bottom: 0; }
.callout--warn { background: var(--warn-wash); }
.callout--warn b, .callout--warn strong { color: var(--warn); }

.meta { color: var(--fg-fade); font-size: .87rem; margin-bottom: 1.8em; font-family: var(--mono); }

.toc {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px clamp(16px, 4vw, 24px); margin-bottom: 1.8em;
}
.toc h2 {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--fg-fade); margin: 0 0 12px; font-weight: 500;
}
.toc ol { margin: 0; padding-left: 1.3em; font-size: .94rem; }
.toc li { margin-bottom: .35em; }
.toc a { color: var(--fg-mut); text-decoration: none; }
.toc a:hover { color: var(--brand); text-decoration: underline; }

/* ================================================================== */
/* figures / diagrams                                                  */
/* ================================================================== */

.fig {
  margin: 2em 0; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg-card); padding: clamp(14px, 3vw, 22px) clamp(14px, 3vw, 22px) 14px;
}
/* A 720-unit diagram squeezed into a 330px phone renders its labels at about
   4px. Give it a floor and let it scroll sideways, the same way a wide table
   does, so the labels stay readable instead of the figure staying whole. */
.fig__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.fig svg { display: block; width: 100%; min-width: 620px; height: auto; }
.fig__hint {
  display: none; margin: 10px 0 0; font-family: var(--mono); font-size: .74rem;
  color: var(--fg-fade); letter-spacing: .06em;
}
@media (max-width: 700px) { .fig__hint { display: block; } }
.fig figcaption {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--line);
  font-size: .86rem; color: var(--fg-mut);
}
.fig figcaption b { color: var(--fg); font-weight: 600; }

/* ================================================================== */
/* calculator                                                          */
/* ================================================================== */

.calc {
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 28px); margin-bottom: 2.2em; box-shadow: var(--shadow-sm);
}
.calc__fields { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(172px, 1fr)); }
.calc label { display: block; font-size: .87rem; font-weight: 600; margin-bottom: 6px; }
.calc label small { display: block; font-weight: 400; color: var(--fg-fade); font-size: .79rem; margin-top: 1px; }
.calc input, .calc select {
  width: 100%; padding: 12px 13px; font-family: var(--mono); font-size: .98rem;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--line-hi); border-radius: var(--r-sm);
  transition: border-color .15s, box-shadow .15s;
}
.calc select { font-family: var(--body); font-size: .93rem; }
.calc input:focus, .calc select:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.calc__out { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--line); }
.calc__big {
  font-family: var(--display); font-size: clamp(2rem, 1.5rem + 2vw, 2.7rem);
  font-weight: 800; letter-spacing: -.04em; color: var(--brand); line-height: 1.08;
  font-variant-numeric: tabular-nums; margin: 0;
}
.calc__big small {
  display: block; font-family: var(--body); font-size: .86rem; font-weight: 500;
  color: var(--fg-mut); letter-spacing: 0; margin-top: 7px;
}
.calc__rows { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 11px; font-size: .92rem; }
.calc__rows li {
  display: flex; justify-content: space-between; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--line);
}
.calc__rows li:last-child { border-bottom: 0; padding-bottom: 0; }
.calc__rows span { color: var(--fg-mut); }
.calc__rows b { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; text-align: right; }
.calc__err { color: var(--warn); font-size: .9rem; margin-top: 14px; }
.calc__note {
  display: flex; align-items: center; gap: 8px; margin: -1.4em 0 2.2em;
  font-size: .84rem; color: var(--fg-fade); font-family: var(--mono);
}

/* ================================================================== */
/* CTA                                                                 */
/* ================================================================== */

.cta {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand-ink), var(--brand) 55%, var(--brand-2));
  color: var(--on-brand); border-radius: var(--r-lg); padding: clamp(30px, 5vw, 56px) clamp(20px, 4vw, 40px);
  text-align: center;
}
.cta::after {
  content: ""; position: absolute; right: -80px; bottom: -140px;
  width: 380px; height: 380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 62%);
  pointer-events: none;
}
/* The panel is painted in brand colours, which are dark in the light theme and
   bright in the dark one — so its text colour comes from --on-brand, not from
   a literal, and both themes stay legible without per-theme overrides. */
.cta, .cta h2 { color: var(--on-brand); }
.cta h2 { margin-bottom: .4em; }
.cta p { color: color-mix(in srgb, var(--on-brand) 88%, transparent); max-width: 54ch; margin: 0 auto 26px; }
.cta .btnrow { justify-content: center; position: relative; }
.cta .btn, .cta .btn:hover {
  background: var(--bg); color: var(--brand-ink); border-color: transparent;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.cta .btn--ghost, .cta .btn--ghost:hover {
  background: color-mix(in srgb, var(--on-brand) 16%, transparent);
  color: var(--on-brand); border-color: color-mix(in srgb, var(--on-brand) 52%, transparent);
  box-shadow: none;
}
.cta .btn--ghost:hover { background: color-mix(in srgb, var(--on-brand) 26%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cta p { opacity: .9; }
  .cta .btn--ghost { background: transparent; border-color: currentColor; }
}

/* ================================================================== */
/* related                                                             */
/* ================================================================== */

.related { border-top: 1px solid var(--line); margin-top: 2.6em; padding-top: 1.6em; }
.related h2 {
  font-family: var(--mono); font-size: .74rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--fg-fade); font-weight: 500;
}
.related ul { list-style: none; padding: 0; display: grid; gap: 10px; }
.related a { font-weight: 500; }

/* ================================================================== */
/* footer                                                              */
/* ================================================================== */

.site-foot {
  background: var(--bg-alt); border-top: 1px solid var(--line);
  padding: clamp(32px, 5vw, 64px) 0 24px; font-size: .92rem;
}
.site-foot__grid { display: grid; gap: clamp(24px, 4vw, 36px); grid-template-columns: 1.7fr repeat(4, 1fr); }
@media (max-width: 1040px) { .site-foot__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .site-foot__grid { grid-template-columns: 1fr; gap: 28px; } }
.site-foot__brand { grid-column: span 1; }
@media (max-width: 1040px) { .site-foot__brand { grid-column: span 2; } }
@media (max-width: 560px)  { .site-foot__brand { grid-column: span 1; } }
.site-foot h2 {
  font-family: var(--mono); font-size: .71rem; text-transform: uppercase;
  letter-spacing: .13em; color: var(--fg-fade); margin: 0 0 14px; font-weight: 500;
}
.site-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-foot a { color: var(--fg-mut); text-decoration: none; }
.site-foot a:hover { color: var(--brand); text-decoration: underline; }
.site-foot__brand p { color: var(--fg-mut); max-width: 32ch; margin: 16px 0 0; font-size: .9rem; }
.site-foot__made { font-size: .85rem !important; color: var(--fg-fade) !important; }
.site-foot__links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: .87rem; }
.site-foot__bar {
  margin-top: clamp(26px, 4vw, 40px); padding-top: 20px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: space-between;
  color: var(--fg-fade); font-size: .85rem;
}
.site-foot__bar p { margin: 0; }

/* ================================================================== */
/* misc                                                                */
/* ================================================================== */

.center { text-align: center; }
.lede { font-size: 1.1rem; color: var(--fg-mut); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media print {
  .site-head, .site-foot, .crumbs, .cta, .themebtn { display: none !important; }
  body { font-size: 11pt; }
}

/* ================================================================== */
/* glossary                                                            */
/* ================================================================== */

.glossnav {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 40px;
  padding-bottom: 24px; border-bottom: 1px solid var(--line);
}
.glossnav a {
  display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 8px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mono); font-size: .85rem; color: var(--fg-mut); text-decoration: none;
}
.glossnav a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-wash); }

.glosslist { display: grid; gap: 0; }
.glossletter {
  font-family: var(--mono); font-size: .8rem; font-weight: 500; letter-spacing: .16em;
  color: var(--brand); margin: 40px 0 4px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line); scroll-margin-top: 86px;
}
.glossletter:first-child { margin-top: 0; }
.gloss { padding: 22px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 86px; max-width: 46rem; }
.gloss h3 { margin-bottom: .35em; font-size: 1.06rem; }
.gloss__anchor { color: var(--fg); text-decoration: none; }
.gloss__anchor:hover { color: var(--brand); }
.gloss__anchor::after { content: " #"; color: var(--fg-fade); opacity: 0; font-weight: 400; }
.gloss:hover .gloss__anchor::after { opacity: .6; }
.gloss p { margin: 0; color: var(--fg-mut); font-size: .97rem; }
.gloss__more { margin-top: 9px !important; font-size: .89rem !important; }
.gloss__more a { font-weight: 600; }

/* ================================================================== */
/* founding-member offer                                               */
/* ================================================================== */
/* Copy comes from publicConfig/promo, which the platform console owns. The
   claimed count in that document is explicitly advisory, so nothing here
   renders it as a countdown or implies the offer stops at the cap. */

.promo {
  display: inline-flex; flex-direction: column; gap: 4px;
  margin-top: 26px; padding: 15px 20px;
  background: var(--brand-wash); border: 1px solid var(--brand);
  border-radius: var(--r); max-width: 46rem;
}
.promo__head {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 1rem;
  letter-spacing: -.015em; color: var(--brand-ink);
}
.promo__sub { margin: 0; font-size: .93rem; color: var(--fg-mut); }
:root[data-theme="dark"] .promo__head { color: var(--brand); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .promo__head { color: var(--brand); }
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .promo__head { color: var(--brand-ink); }
}