/* kartaan.com — the front page.
 *
 * Built by hand from the Claude Design handoff of 2026-09-14 ("Kartaan home
 * page mockups", KartaanHome.dc.html). Sizes, spacing and weights are the
 * design's own numbers; where this file differs from the design it says why,
 * beside the rule.
 *
 * EVERY COLOUR IS THE ERP'S. The values below are the ERP's own tokens, under
 * the ERP's own names, from its src/shared/tokens/tokens.css -- light from its
 * `:root`, dark from its `body.dark`. A copy can drift, so tools/check_page.py
 * reads that file as the live ERP serves it and refuses any value here that no
 * longer matches, and refuses a colour written anywhere outside these blocks.
 *
 * TWO NAMES HERE ARE NOT THE ERP'S, and they hold no colour of their own: each
 * points at an ERP token. They exist because the ERP's gold is too light to be
 * READ as words on the light cream (about 3 to 1; small words need 4.5 to 1).
 *
 *   --accent-ink    words the design sets in gold. Maroon ink in light, the
 *                   ERP's gold in dark, where the gold reads clearly.
 *   --flipkart-ink  the word "Flipkart" in the headline. Flipkart's own colour
 *                   is 2.9 to 1 on the cream and a headline needs 3; the ERP's
 *                   gold is the same hue and clears it. Dark uses Flipkart's.
 *
 * The design's "subtle" grey is not used for words at all, for the same reason
 * (2.8 to 1); those words use the muted grey, which reads.
 *
 * THE THEME. The page follows the reader's own machine. The Light / Dark switch
 * in the footer overrides it and is remembered (site.js). So the dark values
 * are written twice -- once for a machine set to dark, once for the switch --
 * and the check holds both copies to the ERP's file.
 */

:root {
  --brand: #5C1A0A;
  --on-brand: #FFFFFF;
  --accent: #B8832A;
  --accent-bg: rgba(184, 131, 42, 0.12);
  --accent-border: rgba(184, 131, 42, 0.3);
  --bg: #F8F3EC;
  --surface: #FFFFFF;
  --surface-raised: #FFFAF5;
  --text: #5C1A0A;
  --text-muted: #7A6A5A;
  --border: #E8DDD0;
  --border-strong: #D4C4B0;
  --flipkart: #C4832A;
  --meesho: #B8425A;
  --amazon: #2A68B8;
  --ok: #2D7A4F;
  --danger: #A32D2D;
  --shadow: rgba(92, 26, 10, 0.06);
  --radius: 10px;
  --control-height: 37px;
  --font: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  --accent-ink: var(--text);
  --flipkart-ink: var(--accent);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #C4956A;
    --on-brand: #160A04;
    --accent: #E8A84A;
    --accent-bg: rgba(232, 168, 74, 0.12);
    --accent-border: rgba(232, 168, 74, 0.3);
    --bg: #160A04;
    --surface: #221008;
    --surface-raised: #2E1610;
    --text: #F5EDE0;
    --text-muted: #A08878;
    --border: #3A1E12;
    --border-strong: #4A2818;
    --flipkart: #E8A84A;
    --meesho: #E06080;
    --amazon: #5A98E0;
    --ok: #4AAF74;
    --danger: #D05050;
    --shadow: rgba(0, 0, 0, 0.3);

    --accent-ink: var(--accent);
    --flipkart-ink: var(--flipkart);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --brand: #C4956A;
  --on-brand: #160A04;
  --accent: #E8A84A;
  --accent-bg: rgba(232, 168, 74, 0.12);
  --accent-border: rgba(232, 168, 74, 0.3);
  --bg: #160A04;
  --surface: #221008;
  --surface-raised: #2E1610;
  --text: #F5EDE0;
  --text-muted: #A08878;
  --border: #3A1E12;
  --border-strong: #4A2818;
  --flipkart: #E8A84A;
  --meesho: #E06080;
  --amazon: #5A98E0;
  --ok: #4AAF74;
  --danger: #D05050;
  --shadow: rgba(0, 0, 0, 0.3);

  --accent-ink: var(--accent);
  --flipkart-ink: var(--flipkart);

  color-scheme: dark;
}

/* ------------------------------------------------------------------ ground */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The ERP's lesson, carried over: any rule that sets `display` beats the
 * browser's own `hidden`, so without this an explanation or the menu marked
 * hidden would still show. */
[hidden] {
  display: none !important;
}

/* The menu button, the "i" buttons and the theme switch do nothing without the
 * script, so without it they are not shown at all. */
html:not(.js) .needs-js {
  display: none !important;
}

html.menu-open {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

p,
h1,
h2,
h3,
h4,
ul,
ol {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

/* The design also fades a link to 80% on hover in dark. Faded, the muted
 * footer and top-bar links drop below 4.5 to 1, so hover is an underline only. */
a:hover {
  text-decoration: underline;
}

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* On the maroon band an ink ring is maroon on maroon (1 to 1), so there the
 * ring takes the band's own text colour. */
.band :focus-visible {
  outline-color: var(--on-brand);
}

/* A section the menu moves focus to is not a control; it needs no ring. */
[tabindex="-1"]:focus {
  outline: none;
}

.mono {
  font-family: var(--font-mono);
  font-weight: 500;
}

/* Every section is full width, so its background and rule run edge to edge;
 * the content inside stops at the 1440px frame the design was drawn in. */
.sec {
  padding: 66px max(48px, calc((100% - 1344px) / 2));
}

.sec-ruled {
  border-top: 1px solid var(--border);
}

.sec-raised {
  background: var(--surface-raised);
}

.label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}

.display {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -1px;
}

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-height);
  padding: 0 18px;
  border-radius: var(--radius);
  font-size: 14.5px;
  white-space: nowrap;
}

.btn:hover {
  text-decoration: none;
}

.btn-quiet {
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-weight: 500;
  background: transparent;
}

.btn-brand {
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 700;
}

.btn-cta {
  padding: 0 20px;
  font-size: 15px;
}

.btn-card {
  padding: 0 18px;
  font-size: 14.5px;
}

.btn-on-surface {
  background: var(--surface);
}

.btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ----------------------------------------------------------------- top bar */

.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 70px;
  padding: 0 max(48px, calc((100% - 1344px) / 2));
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: relative;
  z-index: 5;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.mark {
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: var(--brand);
  color: var(--on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.5px;
}

.wordmark {
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.4px;
  color: var(--text);
}

.nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 500;
  margin-right: auto;
  margin-left: 14px;
}

.nav a {
  color: var(--text-muted);
  white-space: nowrap;
}

.actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.actions .btn-quiet {
  padding: 0 16px;
}

.top .phone-only {
  display: none;
  gap: 8px;
}

.btn-small {
  font-size: 14px;
}

.actions .btn-small {
  padding: 0 14px;
}

.menu-btn {
  width: 37px;
  height: 37px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
}

.menu-btn span {
  display: block;
  width: 15px;
  height: 1.5px;
  background: var(--text);
}

/* ------------------------------------------------------------ phone menu */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.sheet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  flex: none;
  padding: 0 18px;
  border-bottom: 1px solid var(--border);
}

.sheet-close {
  width: 37px;
  height: 37px;
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.sheet-body {
  display: flex;
  flex-direction: column;
  padding: 8px 18px 18px;
  gap: 2px;
}

.sheet-link {
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}

.sheet-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

.btn-tall {
  height: 48px;
  font-size: 16px;
  width: 100%;
}

/* -------------------------------------------------------------------- hero */

.hero {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
  padding-top: 76px;
  padding-bottom: 66px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--radius);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent-ink);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 22px;
}

.hero-h1 {
  font-size: 58px;
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -1.6px;
  color: var(--text);
  text-wrap: pretty;
}

.pf-flipkart {
  color: var(--flipkart-ink);
}

.pf-meesho {
  color: var(--meesho);
}

.pf-amazon {
  color: var(--amazon);
}

.hero-sub {
  margin-top: 22px;
  font-size: 18.5px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 33em;
  text-wrap: pretty;
}

.hero .btn-row {
  margin-top: 32px;
}

.hero .btn-brand {
  box-shadow: 0 1px 3px var(--shadow);
}

/* The design draws each platform's name in its own colour at 13px. Flipkart's
 * colour is too light to read as small words on white (3.2 to 1), so the name
 * is set in ink and the colour moves to a dot beside it -- the same for all
 * three, so they still match. */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
  padding: 0;
  list-style: none;
}

.chip {
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.dot-flipkart {
  background: var(--flipkart);
}

.dot-meesho {
  background: var(--meesho);
}

.dot-amazon {
  background: var(--amazon);
}

/* The shelf: the tools drawn as tiles standing on a rail. */

.shelf {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 26px 20px;
  box-shadow: 0 2px 10px var(--shadow);
}

.shelf-label {
  margin-bottom: 18px;
  letter-spacing: 0.1em;
}

.shelf-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.tile {
  flex: 1;
  min-width: 0;
  border-radius: var(--radius);
  padding: 14px 13px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.tile-erp {
  flex: 1.15;
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  min-height: 132px;
}

.tile-click {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  min-height: 112px;
}

.tile-studio {
  background: transparent;
  border: 1px dashed var(--border-strong);
  min-height: 96px;
}

.tile-icon {
  width: 22px;
  height: 22px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.icon-brand {
  background: var(--brand);
  color: var(--on-brand);
}

.icon-tint {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent-ink);
}

.icon-dashed {
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}

.tile-name {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: break-word;
}

.tile-studio .tile-name {
  color: var(--text-muted);
}

.tile-state {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.state-ok {
  color: var(--ok);
}

.shelf-rail {
  height: 6px;
  border-radius: var(--radius);
  background: var(--border-strong);
  margin-top: 14px;
}

.shelf-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------------- tools */

.intro {
  margin-top: 12px;
  font-size: 17px;
  color: var(--text-muted);
  max-width: 40em;
}

.group-label {
  margin: 44px 0 16px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px var(--shadow);
  padding: 26px;
}

.card-erp {
  padding: 32px;
  margin-bottom: 16px;
}

.erp-body {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 34px;
}

.title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.title-row-tight {
  gap: 9px;
}

.erp-name {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.6px;
}

.pill {
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
}

.pill-ok {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--ok);
}

.pill-accent {
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent-ink);
}

.pill-small {
  height: 24px;
  padding: 0 9px;
  font-size: 11.5px;
}

.pill-dashed {
  border: 1px dashed var(--border-strong);
  color: var(--text-muted);
}

.pill-alone {
  align-self: flex-start;
  margin-top: 12px;
}

.erp-promise {
  margin-top: 14px;
  font-size: 17.5px;
  line-height: 1.5;
  color: var(--text);
  max-width: 30em;
  text-wrap: pretty;
}

.points {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.points li {
  display: flex;
  gap: 10px;
  font-size: 15px;
  color: var(--text-muted);
}

.points-erp {
  margin-top: 20px;
  gap: 11px;
}

.points-erp li {
  font-size: 15.5px;
}

.dot {
  color: var(--accent);
  font-weight: 700;
}

.dot-quiet {
  color: var(--text-muted);
}

.btn-row-erp {
  margin-top: 26px;
}

.erp-access {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

/* AutoSync sits inside the ERP's card, so it reads as part of the ERP. The
 * design draws it with no left edge; kept. */

.autosync {
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.autosync-name {
  font-size: 16.5px;
  font-weight: 700;
}

.autosync-what {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  text-wrap: pretty;
}

.autosync-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.autosync-note-last {
  margin-top: 6px;
}

/* The small "i" button beside a word a seller may not know. It opens on a tap
 * or a click, never on hover alone. */

.info {
  width: 17px;
  height: 17px;
  border-radius: var(--radius);
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  color: var(--accent-ink);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  vertical-align: middle;
  position: relative;
}

/* A 17px button is too small to hit with a thumb. The drawn size stays the
 * design's; the part that answers a tap is widened to 37px, invisibly. */
.info::after {
  content: "";
  position: absolute;
  inset: -10px;
}

.info-big {
  width: 18px;
  height: 18px;
}

/* Folded away only when the script is there to open them; without it every
 * explanation simply stays on the page. */
html.js .explain {
  display: none;
}

html.js .explain.is-open {
  display: block;
}

.explain {
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.card .explain,
.explain-data {
  background: var(--surface-raised);
}

.explain-data {
  margin-top: 14px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.55;
}

.autosync .explain {
  background: var(--surface);
}

.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.card-click {
  display: flex;
  flex-direction: column;
}

.card-name {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.4px;
}

.version {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  color: var(--text-muted);
}

.card-promise {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

.btn-row-card {
  gap: 10px;
  margin-top: auto;
  padding-top: 24px;
}

.card-login {
  background: var(--surface-raised);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.login-label {
  margin-bottom: 14px;
}

.login-say {
  font-size: 19px;
  line-height: 1.45;
  font-weight: 500;
  text-wrap: pretty;
}

.login-today {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--text-muted);
}

.card-ghost {
  background: transparent;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 26px;
}

.ghost-name,
.ghost-promise {
  color: var(--text-muted);
}

/* The design put a "[ placeholder ]" picture here. There is no picture, so the
 * frame stays and says so. */
.ghost-picture {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px;
  min-height: 150px;
}

.ghost-picture p {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.6;
}

/* The brief names the operator console as well, so it is named here, once,
 * quietly, and said to be not built. */
.also-named {
  margin-top: 16px;
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ----------------------------------------------------------- where to start */

.display-steps {
  margin-bottom: 40px;
}

.three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0;
  list-style: none;
}

.step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}

.step-num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--accent-ink);
  margin-bottom: 16px;
}

.step-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-wrap: pretty;
}

.step-say {
  margin-top: 10px;
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
}

/* --------------------------------------------------------------------- data */

.sec-data {
  padding-top: 76px;
  padding-bottom: 76px;
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 48px;
  align-items: center;
}

.data-grid .display {
  text-wrap: pretty;
}

.data-say {
  margin-top: 20px;
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--text);
  max-width: 34em;
  text-wrap: pretty;
}

.data-say-next {
  margin-top: 16px;
}

.diagram-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 2px 10px var(--shadow);
}

.diagram {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}

.side {
  border-radius: var(--radius);
  padding: 18px;
}

.side-yours {
  border: 1px solid var(--border-strong);
  background: var(--surface-raised);
}

.side-kartaan {
  border: 1px dashed var(--border-strong);
}

.side-label {
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.side-label-yours {
  color: var(--accent-ink);
}

.store {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
  background: var(--surface);
  margin-bottom: 10px;
}

.store-last {
  margin-bottom: 0;
}

.store-name {
  font-size: 14.5px;
  font-weight: 700;
}

.store-say {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.side-foot {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.arrow-glyph {
  font-size: 20px;
  color: var(--accent);
  font-weight: 700;
}

.arrow-say {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  max-width: 74px;
  line-height: 1.3;
}

.empty-store {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 12px;
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-store p {
  font-size: 13.5px;
  color: var(--text-muted);
  text-align: center;
}

/* -------------------------------------------------------------------- story */

.story {
  max-width: 720px;
}

.story-label {
  margin-bottom: 16px;
}

.story-say {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 500;
  text-wrap: pretty;
}

.story-foot {
  margin-top: 18px;
  font-size: 15.5px;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------- questions */

.display-faq {
  margin-bottom: 32px;
}

.faq {
  max-width: 840px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.sign {
  flex: none;
  font-size: 18px;
  color: var(--accent);
  font-weight: 500;
}

.sign::before {
  content: "+";
}

.faq-item[open] .sign::before {
  content: "–";
}

.faq-item p {
  padding: 0 22px 22px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 60em;
}

/* --------------------------------------------------------------------- band */

.band {
  padding-top: 76px;
  padding-bottom: 76px;
  background: var(--brand);
  color: var(--on-brand);
  text-align: center;
}

.band-title {
  font-size: 44px;
  letter-spacing: -1.2px;
  color: var(--on-brand);
}

.band-say {
  margin: 16px auto 0;
  font-size: 17.5px;
  max-width: 34em;
  color: var(--on-brand);
  opacity: 0.86;
}

.band-btn {
  padding: 0 24px;
  background: var(--surface);
  color: var(--brand);
  font-weight: 700;
  font-size: 15.5px;
  margin-top: 30px;
}

/* ------------------------------------------------------------------- footer */

.foot {
  padding-top: 56px;
  padding-bottom: 40px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 32px;
}

.brand-small {
  gap: 10px;
}

.brand-small .mark {
  width: 26px;
  height: 26px;
  font-size: 15px;
  letter-spacing: 0;
}

.brand-small .wordmark {
  font-size: 18px;
  letter-spacing: -0.3px;
}

.foot-say {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 24em;
}

.switch {
  display: inline-flex;
  margin-top: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  background: var(--surface);
  gap: 3px;
}

.switch button {
  height: 29px;
  padding: 0 14px;
  border-radius: var(--radius);
  border: none;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  color: var(--text-muted);
}

.switch button[aria-pressed="true"] {
  background: var(--brand);
  color: var(--on-brand);
}

.foot-label {
  margin-bottom: 14px;
  letter-spacing: 0.1em;
}

.foot-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
}

.foot-links a {
  color: var(--text-muted);
}

.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  margin-top: 40px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-muted);
}

/* ------------------------------------------------------------ narrow top bar
 *
 * The design was drawn at 1440 and 360 only. Its top bar -- four links and two
 * buttons -- needs about 1,080px, so between a phone and a desk it pushed the
 * page sideways (measured at 820px: 78px too wide). The top bar therefore trades
 * its links for the menu at 1120px, before it runs out of room.
 *
 * Two side-by-side pairs had the same fault in that gap: the shelf beside the
 * headline (761px: 16px too wide, and "Kartaan" split mid-word) and the drawing
 * beside "Your data stays yours" (820px: "Your Google Drive" on three lines).
 * Both stack at the same width. Everything else keeps the design's 760px switch.
 */

@media (max-width: 1120px) {
  .top .wide-only {
    display: none;
  }

  .top .phone-only {
    display: flex;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .data-grid {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------- phone
 *
 * The design switches at 760px wide: one column, smaller headings and
 * full-width buttons.
 */

@media (max-width: 760px) {
  .sec {
    padding: 34px 20px;
  }

  .top {
    padding: 0 18px;
  }

  /* Three tiles side by side in 320px leave each name about 53px, and the
   * design's padding split "Kartaan" and "Product" mid-word. The shelf and its
   * tiles give back a little padding on a phone so every word fits whole. */
  .shelf {
    padding: 22px 16px 18px;
  }

  .shelf-row {
    gap: 8px;
  }

  .tile {
    padding: 12px 9px;
  }

  .hero {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .hero-h1 {
    font-size: 36px;
    letter-spacing: -0.5px;
  }

  .display,
  .band-title {
    font-size: 30px;
  }

  .two,
  .three,
  .erp-body,
  .data-grid,
  .diagram {
    grid-template-columns: 1fr;
  }

  .foot-grid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .btn-cta {
    width: 100%;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
  }

  /* The design turns the whole arrow on its side, label and all, which stands
   * the words on end. Only the arrow turns here; it points up, at your side. */
  .arrow {
    margin: 2px auto;
  }

  .arrow-glyph {
    transform: rotate(90deg);
  }
}

/* The menu only exists while the top bar has no room for its links. If the
 * window is widened while it is open, it goes (site.js also lets go of the
 * page's scrolling). */
@media (min-width: 1121px) {
  .sheet {
    display: none;
  }
}

/* ============================================================== tool pages
 *
 * The pages for one tool each: erp/, click/ and image-studio/. Built by hand
 * from the Claude Design handoff of 2026-09-14 ("Tool page UI mockups",
 * ToolPage.dc.html): one template, three tools. They use the home page's top
 * bar, menu, footer, buttons, pills, "i" explanations and questions as they are;
 * what is here is only what the tool pages add.
 *
 * The design's numbers: content 1240px wide with 40px sides at a desk and 16px
 * on a phone, sections 68px apart (40 on a phone), a 46px name (30 on a phone).
 * Where this differs from the design it says why, beside the rule.
 */

.tp {
  padding: 0 max(40px, calc((100% - 1160px) / 2)) 68px;
}

a.brand:hover {
  text-decoration: none;
}

.crumbs {
  padding-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.crumbs a {
  color: var(--text-muted);
}

.crumbs-sep {
  padding: 0 4px;
}

.crumbs-here {
  color: var(--text);
}

/* The design lets its two halves wrap when there is no room for both at 380px;
 * the same happens here, at the width where that wrap falls. */
.tp-hero {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  align-items: center;
  padding: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px var(--shadow);
}

.tp-hero > div {
  min-width: 0;
}

.tp-hero-quiet {
  border-style: dashed;
  border-color: var(--border-strong);
}

.tp-h1 {
  margin-top: 14px;
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.tp-lead {
  margin-top: 12px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 30em;
  text-wrap: pretty;
}

/* The design's price box held a price still to be decided. No price is
 * decided, so the box says that instead of showing a number. */
.tp-price {
  margin-top: 20px;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 9px 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--surface-raised);
  max-width: 100%;
}

.tp-price-main {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 17px;
}

.tp-price-note {
  font-size: 13px;
  color: var(--text-muted);
}

.tp-free {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
}

.tp-free-word {
  font-size: 20px;
  font-weight: 700;
  color: var(--ok);
}

.tp-buttons {
  margin-top: 22px;
  flex-wrap: wrap;
  gap: 10px;
}

.tp-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--text-muted);
  max-width: 34em;
}

/* ---- the drawing beside each tool's name */

.art-caption {
  margin: 10px 2px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.sample {
  margin: 0;
}

.sample-screen {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  box-shadow: 0 2px 10px var(--shadow);
}

.sample-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}

.sample-title {
  font-size: 13px;
  font-weight: 700;
}

/* The design's "sample" tag is 10px in the warning colour; 11px is this page's
 * smallest type, and the warning colour is too light to read at that size, so it
 * is the tinted tag the page uses everywhere else. */
.sample-tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent-border);
  background: var(--accent-bg);
  border-radius: var(--radius);
  padding: 2px 8px;
}

.sample-gap {
  flex: 1;
}

/* Platform names in ink with their colour as a dot, as on the home page. */
.mini-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 8px;
}

.mini-chip .chip-dot {
  width: 6px;
  height: 6px;
}

.sample-rows {
  font-family: var(--font-mono);
  font-size: 12px;
}

.sample-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border);
}

.sample-row-head {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sample-date {
  color: var(--text-muted);
}

.sample-amount {
  font-weight: 500;
}

/* The design's last row said AutoSync had filled in yesterday. AutoSync fills
 * nothing in today, so the row is the total of the four rows above it. */
.sample-total {
  border-bottom: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--accent-bg);
}

.sample-total-say {
  font-family: var(--font);
  font-weight: 700;
}

.ba {
  display: grid;
  gap: 12px;
}

.ba-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 14px;
  box-shadow: 0 2px 10px var(--shadow);
}

.ba-after {
  border-color: var(--accent-border);
  background: var(--accent-bg);
  box-shadow: none;
}

.ba-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ba-after .ba-label {
  color: var(--accent-ink);
}

.ba-row {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.ba-box {
  flex: 1;
  min-width: 0;
  height: var(--control-height);
  border-radius: var(--radius);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-muted);
}

.ba-after .ba-box {
  border-color: var(--accent);
}

/* The design says these in red and green. The red is too light to read at 12px
 * in the dark theme, so "before" is muted. */
.ba-say {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
}

.ba-after .ba-say {
  color: var(--ok);
}

.idea {
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* The design stripes the photo with two colours that are not the ERP's; it is a
 * plain raised square here. */
.idea-photo {
  flex: none;
  width: 108px;
  height: 108px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--surface-raised);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

.idea-arrow {
  font-size: 18px;
  color: var(--text-muted);
}

.idea-outs {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.idea-outs li {
  height: 50px;
  border-radius: var(--radius);
  border: 1px dashed var(--border-strong);
  background: var(--surface-raised);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* ---- the sections under the name */

.tp-sec {
  margin-top: 68px;
}

.tp-h2 {
  font-size: 29px;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.tp-sub {
  margin-top: 8px;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 48em;
}

.feats {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.feat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: 0 1px 2px var(--shadow);
}

.feat-icon {
  display: block;
  color: var(--accent);
}

.feat-name {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 700;
}

.feat-line {
  margin-top: 4px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
  text-wrap: pretty;
}

.strip {
  margin: 12px 0 0;
  display: grid;
  gap: 6px;
}

.strip-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: var(--text-muted);
}

.strip-label {
  flex: none;
  width: 38px;
  font-weight: 700;
}

.strip-box {
  flex: 1;
  margin: 0;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  padding: 6px 9px;
}

.strip-after {
  color: var(--text);
}

.strip-after .strip-label {
  color: var(--accent-ink);
}

.strip-after .strip-box {
  border-color: var(--accent-border);
  background: var(--accent-bg);
}

/* AutoSync, inside the ERP's page. */
.band-tool {
  margin-top: 68px;
  padding: 30px;
  background: var(--surface-raised);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}

.band-tool .tp-h2 {
  margin-top: 12px;
}

.band-tool-state {
  margin-top: 10px;
  font-size: 14.5px;
  font-weight: 700;
}

.band-tool-what {
  margin-top: 10px;
  font-size: 17px;
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 46em;
  text-wrap: pretty;
}

.band-tool .chips {
  margin-top: 16px;
}

.plan-label {
  margin-top: 22px;
}

.plan {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
}

.plan li {
  flex: 1 1 190px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 15px;
}

.plan-when {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  color: var(--accent-ink);
}

.plan-what {
  margin-top: 5px;
  font-size: 13.5px;
  font-weight: 700;
}

.needs {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow);
}

.need {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.need:last-child {
  border-bottom: none;
}

.need-row {
  display: flex;
  align-items: center;
  gap: 11px;
}

.need-tick {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  border: 1.5px solid var(--ok);
  color: var(--ok);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.need-label {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  font-weight: 500;
  text-wrap: pretty;
}

.need .info {
  flex: none;
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.need .explain {
  margin: 10px 0 0 29px;
  padding: 10px 12px;
  font-size: 13px;
  background: var(--surface-raised);
}

.tp-quiet {
  margin-top: 68px;
  padding: 18px 20px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  font-size: 14.5px;
  color: var(--text-muted);
}

.lists {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
}

.list-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: 0 1px 2px var(--shadow);
}

/* The design colours these two titles green and red. The red cannot be read at
 * 14px on the dark theme's cards, so both are ink; the marks keep the colours. */
.list-title {
  font-size: 14px;
  font-weight: 700;
}

.list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}

.list li {
  display: flex;
  gap: 9px;
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}

.mark-yes {
  flex: none;
  font-weight: 700;
  color: var(--ok);
}

.mark-no {
  flex: none;
  font-weight: 700;
  color: var(--danger);
}

.tp-faq {
  margin-top: 16px;
  max-width: none;
}

.tp-faq .faq-item summary {
  padding: 15px 16px;
  font-size: 15px;
}

.tp-faq .faq-item p {
  padding: 0 16px 16px;
  font-size: 14px;
  line-height: 1.55;
}

.others {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.other {
  display: block;
  height: 100%;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow);
}

.other:hover {
  text-decoration: none;
  border-color: var(--border-strong);
}

.other-name {
  font-size: 15px;
  font-weight: 700;
}

.other-line {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-muted);
  text-wrap: pretty;
}

.other-go {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-ink);
}

.other:hover .other-go {
  text-decoration: underline;
}

/* The phone's bar at the foot of the screen, with the tool's price and its
 * button. Only on a phone, as the design has it. */
.buybar {
  display: none;
}

.buybar-say {
  flex: 1;
  min-width: 0;
}

.buybar-main {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
}

.buybar-note {
  font-size: 11px;
  color: var(--text-muted);
}

.buybar .btn {
  flex: none;
  padding: 0 16px;
  font-size: 14px;
}

@media (max-width: 935px) {
  .tp-hero {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .tp {
    padding: 0 16px 40px;
  }

  .tp-hero {
    padding: 18px;
    gap: 28px;
  }

  .tp-h1 {
    font-size: 30px;
  }

  .tp-lead,
  .band-tool-what {
    font-size: 15px;
  }

  .tp-h2 {
    font-size: 21px;
  }

  .tp-sec,
  .band-tool,
  .tp-quiet {
    margin-top: 40px;
  }

  .band-tool {
    padding: 18px;
  }

  .buybar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 40px -16px -40px;
    padding: 10px 16px;
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px var(--shadow);
  }
}

/* ============================================================ pricing page
 *
 * pricing/, built by hand from the Claude Design handoff of 2026-09-14
 * ("Pricing page UI mockups", KartaanPricing.dc.html). It uses the tool pages'
 * container, pills, lists, "i" explanations, questions and the home page's
 * band as they are; what is here is only what the pricing page adds.
 *
 * The design's numbers: a centred 44px heading (30 on a phone), three cards
 * side by side at least 260px wide, a 30px price (26 on a phone), a comparison
 * table at a desk that turns into one fold per tool on a phone. No price is
 * decided, so where the design put a price to be decided the cards say that.
 */

.nav a[aria-current="page"] {
  color: var(--text);
}

.pr-head {
  padding-top: 56px;
  text-align: center;
}

.pr-h1 {
  margin-top: 0;
  font-size: 44px;
  text-wrap: pretty;
}

.pr-lead {
  margin: 10px auto 0;
  max-width: 34em;
  font-size: 17px;
  color: var(--text-muted);
  text-wrap: pretty;
}

.pr-cards {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  align-items: start;
}

.pr-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 20px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px var(--shadow);
}

.pr-card-quiet {
  background: var(--bg);
  border-style: dashed;
  box-shadow: none;
}

.pr-name {
  margin-top: 10px;
  font-size: 20px;
  font-weight: 700;
}

.pr-line {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}

.pr-price {
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.pr-card-quiet .pr-price {
  background: var(--surface);
  border-style: dashed;
}

.pr-price-main {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.pr-price-quiet {
  font-size: 22px;
  color: var(--text-muted);
}

.pr-price-note {
  margin-top: 8px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.pr-list {
  margin-top: 8px;
  gap: 7px;
}

/* The design tints AutoSync's box gold. Words on the tint are measured only in
 * ink, so the box is the raised ground with a gold edge, as on the ERP's page. */
.pr-sync {
  padding: 12px;
  background: var(--surface-raised);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}

.pr-sync-name {
  font-size: 14px;
  font-weight: 700;
}

.pr-sync-state {
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 700;
}

.pr-sync-what {
  margin-top: 4px;
  font-size: 13.5px;
  color: var(--text-muted);
  text-wrap: pretty;
}

.pr-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pr-buttons .btn {
  width: 100%;
}

.pr-note {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- the comparison: a table at a desk, one fold per tool on a phone */

.pr-table {
  margin-top: 18px;
  width: 100%;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow);
}

.pr-table th,
.pr-table td {
  padding: 14px 16px;
  text-align: left;
  vertical-align: top;
  font-size: 14.5px;
}

.pr-table thead th {
  font-weight: 700;
}

.pr-table tbody th,
.pr-table tbody td {
  border-top: 1px solid var(--border);
}

.pr-table tbody th {
  width: 34%;
  font-weight: 500;
}

.pr-cell-note {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.pr-yes {
  font-weight: 700;
  color: var(--ok);
  white-space: nowrap;
}

.pr-no {
  font-weight: 700;
  color: var(--text-muted);
  white-space: nowrap;
}

.pr-compare-phone {
  display: none;
}

.pr-rows {
  margin: 0;
  padding: 0 16px 14px;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pr-rows li {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  font-size: 14px;
}

.pr-row-name {
  color: var(--text-muted);
}

.pr-row-value {
  text-align: right;
  font-weight: 500;
}

/* ---- what happens when you stop */

.pr-stops {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.pr-stop {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px var(--shadow);
}

/* The design tints the number's square gold; the gold edge alone keeps the
 * number on a measured ground. */
.pr-stop-n {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-border);
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13px;
  color: var(--accent-ink);
}

.pr-stop-say {
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* The home page's band, as a rounded box inside the page, as the design has it. */
.pr-band {
  margin-top: 68px;
  padding: 40px 24px;
  border-radius: var(--radius);
}

.pr-band-title {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

@media (max-width: 760px) {
  .pr-head {
    padding-top: 32px;
  }

  .pr-h1 {
    font-size: 30px;
  }

  .pr-lead {
    font-size: 15px;
  }

  .pr-cards {
    margin-top: 24px;
    gap: 14px;
  }

  .pr-price-main {
    font-size: 26px;
  }

  .pr-compare-wide {
    display: none;
  }

  .pr-compare-phone {
    display: block;
  }

  .pr-band {
    margin-top: 40px;
    padding: 24px 18px;
  }

  .pr-band-title {
    font-size: 22px;
  }
}

/* ============================================================ signing in
 *
 * sign-in/, sign-up/ and my-tools/, built by hand from the Claude Design handoff
 * "UI mockups for sign-in flow" (Kartaan Sign-in.dc.html, AuthScreen.dc.html):
 * the form card on the right, a quiet raised panel on the left; on a phone the
 * form comes first and the panel sits under it.
 *
 * Where this differs from the design, and why:
 *   - The spinner in the Google button is words ("Waiting for Google…"): this
 *     stylesheet holds no animation, and the words say more.
 *   - Errors are ink words with a red edge, not red words on a red tint: the
 *     ERP's red on its tint is not measured for small words.
 *   - The "i" beside the note is outlined, not filled, so it needs no new ground.
 *   - The Google "G" is Google's own, in Google's own colours (its branding rules
 *     do not allow it changed); tools/check_page.py allows that one drawing, on
 *     the two sign-in pages only.
 *   - No "Continue with email", no "account already linked" message, no set-up
 *     steps: Google is the only way in, and there is nowhere to keep business
 *     details yet.
 */

.auth {
  display: flex;
  flex-direction: row-reverse;
  min-height: calc(100vh - 71px);
}

.auth-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 56px;
  border-left: 1px solid var(--border);
}

.auth-card {
  width: 100%;
  max-width: 424px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px var(--shadow);
  padding: 30px 32px;
}

.auth-h1 {
  font-size: 23px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auth-lead {
  margin-top: 7px;
  font-size: 13.5px;
  color: var(--text-muted);
}

.auth-no-js,
.auth-err {
  padding: 11px 13px;
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
}

.auth-no-js {
  margin-top: 22px;
}

.auth-go {
  margin-top: 22px;
}

.g-btn {
  width: 100%;
  height: var(--control-height);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 14.5px;
  font-weight: 700;
}

.g-btn:disabled {
  cursor: default;
  color: var(--text-muted);
}

.g-mark {
  flex: none;
}

.auth-say {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.auth-retry {
  margin-top: 12px;
}

.auth-note {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

.auth-note-i {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid var(--accent-border);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-fine {
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.auth-switch {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

.auth-switch a {
  color: var(--accent-ink);
  font-weight: 700;
}

.auth-side {
  flex: 0 0 38%;
  max-width: 552px;
  background: var(--surface-raised);
  padding: 60px 56px;
}

.auth-side-title {
  font-size: 33px;
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -0.025em;
  max-width: 11em;
}

.auth-points {
  margin-top: 30px;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.auth-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--text-muted);
}

.auth-tick {
  flex: none;
  color: var(--ok);
  font-weight: 700;
}

.auth-foot {
  padding-top: 22px;
  padding-bottom: 22px;
}

.auth-foot .foot-bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  align-items: center;
}

.auth-foot .switch {
  margin-top: 0;
}

/* ---- My tools: who is signed in, and the tools anyone can use today */

.mt-h1 {
  margin-top: 34px;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -1px;
}

.mt-state {
  margin-top: 18px;
  max-width: 40em;
}

.mt-who {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* A Google name can be one long word; it breaks rather than leave the box. */
.mt-who > div {
  min-width: 0;
}

.mt-account {
  font-size: 15px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.mt-name {
  color: var(--text);
  font-weight: 700;
}

.mt-email {
  font-size: 14px;
  color: var(--text-muted);
  overflow-wrap: anywhere;
}

.mt-tools {
  margin-top: 40px;
}

.mt-list {
  margin-top: 16px;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.mt-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mt-card-name {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
}

.mt-card-say {
  font-size: 14.5px;
  color: var(--text-muted);
}

.mt-card .btn {
  align-self: flex-start;
  margin-top: auto;
}

/* ---- My tools: the tools this person holds, from their own lines (F5) */

.mt-shelf {
  margin-top: 40px;
}

/* Two to a row at a desk, as the design; the 1120px rule below makes it one. */
.mt-list-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mt-list:empty {
  margin-top: 0;
}

/* A label or a date from the records can be one long word; it breaks rather than leave the card. */
.mt-card-name,
.mt-card-say {
  overflow-wrap: anywhere;
}

.mt-empty {
  margin-top: 16px;
  padding: 22px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.mt-empty .mt-card-say {
  margin-top: 6px;
}

.mt-failed {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mt-sub {
  margin-top: 32px;
  font-size: 15px;
  font-weight: 700;
}

.mt-open {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 1120px) {
  .auth-main {
    padding: 40px 32px;
  }

  .auth-side {
    padding: 48px 32px;
  }

  .auth-side-title {
    font-size: 28px;
  }

  .mt-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .auth {
    flex-direction: column;
  }

  .auth-main {
    padding: 20px 16px;
    border-left: 0;
  }

  .auth-card {
    padding: 20px 18px;
  }

  .auth-side {
    flex: none;
    max-width: none;
    padding: 28px 20px;
    border-top: 1px solid var(--border);
  }

  .auth-side-title {
    font-size: 24px;
  }

  .mt-h1 {
    font-size: 30px;
  }
}

/* The top bar on a phone holds Sign in, Sign up and the menu beside the name. */
@media (max-width: 400px) {
  .top {
    gap: 10px;
  }

  .top .phone-only {
    gap: 6px;
  }

  .actions .btn-small {
    padding: 0 10px;
  }
}