/* The card counting guide: the Card counting boards of the Counter.Software design canvas.
   The markup keeps the design's inline styles, drawn at 1440px; below are the design's base rules,
   the responsive layer every redesigned Counter.Software page shares, and this page's own pieces.
   The fonts are the site's own (tokens/fonts.css). */
body{margin:0;background:#0B0B10;font-family:Archivo,"Helvetica Neue",Arial,sans-serif;color:#F4F4F8;-webkit-font-smoothing:antialiased}
a{color:#F4F4F8}a:hover{color:#C084FC}
.cs-page a:hover{text-decoration:none}

/* Responsive layer. The markup keeps the design's inline styles (drawn at 1440px);
   these rules widen it on big screens and fold it down for laptops, tablets and phones. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
.cs-page { overflow-x: clip; }
.cs-img { width: 100% !important; height: auto !important; }
.cs-w { max-width: 100%; }
.cs-scroll { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cs-logo-mark { flex-shrink: 0; }
.cs-hdr-left { min-width: 0; }
.cs-hdr-cta, .cs-nav > a { white-space: nowrap; flex-shrink: 0; }
.cs-btn { white-space: nowrap; }
.cs-skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; border-radius: 8px; background: #F4F4F8; color: #0B0B10 !important; font: 700 14px Archivo, sans-serif; text-decoration: none; }
.cs-skip:focus { top: 12px; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
[hidden] { display: none !important; }

/* Wider than the 1440 artboard: content stays 1248 wide, section backgrounds run edge to edge. */
@media (min-width: 1201px) {
  .cs-g96 { padding-left: max(96px, calc(50% - 624px)) !important; padding-right: max(96px, calc(50% - 624px)) !important; }
  .cs-g48 { padding-left: max(48px, calc(50% - 672px)) !important; padding-right: max(48px, calc(50% - 672px)) !important; }
  .cs-m96 { margin-left: max(96px, calc(50% - 624px)) !important; margin-right: max(96px, calc(50% - 624px)) !important; }
}
@media (min-width: 1441px) {
  .cs-bleed { border-right: 1px solid var(--bc) !important; border-radius: 16px !important; }
}

/* Laptops */
@media (max-width: 1200px) {
  .cs-p { padding-left: min(var(--pl), 48px) !important; padding-right: min(var(--pr), 48px) !important; }
  .cs-m96 { margin-left: 48px !important; margin-right: 48px !important; }
  .cs-noshrink { flex-shrink: 1 !important; min-width: 0 !important; }
  .cs-bleed { width: 58vw !important; flex-shrink: 0 !important; margin-right: -48px !important; }
  .cs-fs { font-size: calc(16px + (var(--fs) - 16px) * 0.86) !important; }
}
@media (max-width: 1200px) {
  .cs-wrap { flex-wrap: wrap !important; }
  .cs-eq { flex-wrap: nowrap !important; }
}
@media (min-width: 1001px) and (max-width: 1400px) {
  .cs-tables { flex-wrap: wrap !important; justify-content: flex-start !important; row-gap: 28px !important; }
}
@media (min-width: 1001px) and (max-width: 1200px) {
  .cs-noshrink { min-width: min(var(--w), 360px) !important; }
}
@media (max-width: 1200px) {
  .cs-navlink { display: none !important; }
}
@media (max-width: 1100px) {
  .cs-grid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cs-stats > * { padding: 28px 0 !important; border-left: 0 !important; }
  .cs-stats > *:nth-child(even) { padding-left: 32px !important; border-left: 1px solid rgba(244,244,248,0.1) !important; }
  .cs-stats > *:nth-child(n+3) { border-top: 1px solid rgba(244,244,248,0.1) !important; }
}

/* Tablets: two-column rows stack. */
@media (max-width: 1000px) {
  .cs-row { flex-direction: column !important; align-items: stretch !important; }
  .cs-row > .cs-w { width: 100% !important; max-width: max(var(--w), 720px) !important; }
  .cs-row > figure.cs-w, .cs-row > .cs-w.cs-bleed { max-width: var(--w) !important; }
  .cs-bleed { width: 100% !important; margin: 0 !important; border-right: 1px solid var(--bc) !important; border-radius: 16px !important; }
  .cs-grid[data-cols="5"], .cs-grid[data-cols="6"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .cs-hdr-extra { display: none !important; }
  .cs-row > .cs-divider { border-right: 0 !important; border-bottom: 1px solid var(--dc) !important; }
}

/* Phones */
@media (max-width: 760px) {
  .cs-p { padding-top: calc(var(--pt) * 0.6) !important; padding-bottom: calc(var(--pb) * 0.6) !important; padding-left: min(var(--pl), 20px) !important; padding-right: min(var(--pr), 20px) !important; }
  .cs-m96 { margin-left: 20px !important; margin-right: 20px !important; }
  .cs-gap { row-gap: calc(var(--gr) * 0.55) !important; column-gap: calc(var(--gc) * 0.55) !important; }
  .cs-fs { font-size: calc(16px + (var(--fs) - 16px) * 0.55) !important; }
  .cs-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cs-grid.cs-keep2, .cs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cs-hdr-extra, .cs-nav-account { display: none !important; }
  .cs-header { height: 64px !important; }
  .cs-hdr-cta { height: 40px !important; padding: 0 14px !important; font-size: 12px !important; }
  .cs-bleed-b { margin-bottom: calc(var(--pb) * -0.6) !important; align-self: center !important; }
  .cs-fs-xl { font-size: min(calc(16px + (var(--fs) - 16px) * 0.55), 14vw) !important; }
  .cs-scroll > table { min-width: 520px; }
  .cs-eq { flex-wrap: wrap !important; justify-content: center !important; }
  .cs-eq > span[aria-hidden="true"] { flex-basis: 100%; text-align: center; line-height: 1; }
  .cs-stats > * { padding-top: 22px !important; padding-bottom: 22px !important; padding-right: 12px !important; }
  .cs-stats > *:nth-child(odd) { padding-left: 0 !important; }
  .cs-stats > *:nth-child(even) { padding-left: 16px !important; }
}
@media (max-width: 440px) {
  .cs-wordmark { font-size: 12px !important; letter-spacing: 0.03em !important; }
  .cs-hdr-left a[aria-label] { gap: 9px !important; }
  .cs-hdr-cta { padding: 0 12px !important; font-size: 11px !important; letter-spacing: 0.06em !important; }
  .cs-hdr-cta > span[aria-hidden="true"] { display: none !important; }
}
@media (max-width: 440px) {
  .cs-rgrid { padding: 10px !important; gap: 2px !important; }
  .cs-rgrid > div { gap: 2px !important; }
  .cs-rgrid span { font-size: 7.5px !important; letter-spacing: -0.02em; }
}
@media (max-width: 440px) {
  .cs-btn-lg:not(.cs-hdr-cta) { white-space: normal !important; height: auto !important; min-height: 48px; padding-top: 12px !important; padding-bottom: 12px !important; text-align: center; }
}
@media (max-width: 380px) {
  .cs-heq { gap: 6px !important; }
  .cs-heq > div { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 360px) {
  .cs-p { padding-left: min(var(--pl), 14px) !important; padding-right: min(var(--pr), 14px) !important; }
  .cs-m96 { margin-left: 14px !important; margin-right: 14px !important; }
  .cs-shrink { zoom: 0.88; }
}

/* Phones: the name stays in the bar. A page's own header rules (or its measured fit) shrink it,
   stack it on two lines and only then drop it, after everything else in the bar has gone. */

/* Phones: everything below the bar is centered (the owner's call, 2026-09-29). A working widget
   that is laid out as one (a live table, a chart, a demo with rows and bars) carries
   data-cs-keep and keeps its own alignment; its surroundings still center. */
@media (max-width: 760px) {
  .cs-page section:not([data-cs-keep] *), .cs-page footer:not([data-cs-keep] *) { text-align: center; }
  .cs-page section *:not([data-cs-keep] *), .cs-page footer *:not([data-cs-keep] *) { text-align: center !important; }
  .cs-page section [data-cs-keep], .cs-page footer [data-cs-keep] { text-align: start !important; }
  .cs-page section [style*="display: flex"]:not([style*="flex-direction: column"]):not([data-cs-keep] *):not([data-cs-keep]),
  .cs-page footer [style*="display: flex"]:not([style*="flex-direction: column"]):not([data-cs-keep] *) { justify-content: center !important; }
  .cs-page section [style*="flex-direction: column"][style*="align-items: flex-start"]:not([data-cs-keep] *):not([data-cs-keep]),
  .cs-page footer [style*="flex-direction: column"][style*="align-items: flex-start"]:not([data-cs-keep] *) { align-items: center !important; }
  .cs-page section [style*="justify-content: space-between"]:not([style*="gap"]):not([data-cs-keep] *):not([data-cs-keep]),
  .cs-page footer [style*="justify-content: space-between"]:not([style*="gap"]):not([data-cs-keep] *) { flex-wrap: wrap; column-gap: 12px; row-gap: 6px; }
  .cs-page section [style*="align-self: flex-start"]:not([data-cs-keep] *), .cs-page footer [style*="align-self: flex-start"] { align-self: center !important; }
  .cs-page section ul:not([data-cs-keep] *), .cs-page section ol:not([data-cs-keep] *) { padding-left: 0 !important; }
}

/* ---- The card counting guide's own pieces (the rest is the shared responsive layer above) ---- */

/* The language pill: plain links to the other languages' pages, dressed as the family's pill. The
   bar carries one while it has room; the footer always does. */
.cc-lang { display: inline-flex; align-items: center; flex-shrink: 0; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(244,244,248,0.14); }
.cc-lang a { display: inline-flex; align-items: center; height: 30px; padding: 0 10px; border-radius: 999px; color: #B9B9C6; font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; line-height: 1; text-decoration: none; text-transform: none; white-space: nowrap; }
.cc-lang a:hover { color: #F4F4F8; }
.cc-lang a[aria-current="page"] { background: #F4F4F8; color: #0B0B10; }
.cc-lang a[aria-current="page"]:hover { color: #0B0B10; }
.cc-lang a:focus-visible { outline: 2px solid #C084FC; outline-offset: 2px; }
.cc-footlang a { height: 26px; padding: 0 9px; }
.cc-footbar { flex-wrap: wrap; row-gap: 14px; }
/* The bar sheds items as it narrows: Accounts first (the footer links it twice), then the pill
   (the footer keeps one), then the suit mark; the name stays. */
@media (max-width: 900px) { .cs-header .cs-nav-account { display: none !important; } }
@media (max-width: 600px) { .cs-header .cc-navlang { display: none !important; } }
@media (max-width: 440px) { .cs-header .cs-hdr-cta > svg { display: none !important; } }
@media (max-width: 374px) { .cs-header .cs-logo-mark { display: none !important; } }
@media (max-width: 760px) { .cc-footbar { justify-content: center !important; } }

/* The hero's four cards sit on the spade (see data-cc-card in the markup), shown only where the
   title leaves them room: Japanese sets it on two lines until 1440px. */
@media (max-width: 1279px) { #main > [data-cc-card] { display: none !important; } }
@media (max-width: 1439px) { :lang(ja) #main > [data-cc-card] { display: none !important; } }

/* Sources cited in running text read as links without shouting. */
.cc-cite a { color: inherit; text-decoration: underline; text-decoration-color: rgba(192,132,252,0.55); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.cc-cite a:hover { color: #F4F4F8; text-decoration-color: currentColor; }

/* The contents: two columns on a phone rather than three too narrow to read. */
@media (max-width: 760px) { .cs-page nav .cs-grid[data-cols="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }

/* Figures drawn at fixed sizes that a small phone cannot quite hold give a little instead. */
@media (max-width: 420px) { .cs-page .cs-shrink { zoom: 0.86; } }
@media (max-width: 340px) { .cs-page .cs-shrink { zoom: 0.8; } }
@media (max-width: 340px) { .cs-page [data-cc-fig="4"] { zoom: 0.94; } }

/* Spanish labels run long: the true count figure's caps tighten so its three boxes stay on a line. */
:lang(es) [data-dc-region="r1-0"] [style*="letter-spacing: 0.14em"] { letter-spacing: 0.06em !important; }

/* ---- Japanese: phrases wrap as phrases, wide caps tightened, mono labels get a Japanese face ---- */
/* auto-phrase keeps phrases whole where it can; overflow-wrap: anywhere lets a phrase longer than
   its box break anyway, and counts that in the box's minimum width. */
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ja) h4, :lang(ja) p, :lang(ja) figcaption span { word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; }
:lang(ja) h1, :lang(ja) h2 { letter-spacing: 0 !important; line-height: 1.2 !important; }
:lang(ja) h3 { line-height: 1.45 !important; }
:lang(ja) [style*="IBM Plex Mono"] { font-family: 'IBM Plex Mono', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', YuGothic, 'Noto Sans JP', Meiryo, sans-serif !important; }
/* The widely tracked caps labels tighten: Japanese has no capitals to space out. */
:lang(ja) [style*="IBM Plex Mono"]:is([style*="letter-spacing: 0.08em"], [style*="letter-spacing: 0.1"]) { letter-spacing: 0.04em !important; }
:lang(ja) .cc-lang a { letter-spacing: 0.04em; }
/* Headings, contents and labels carry their phrase breaks in the markup (<wbr>, in the Japanese
   column of tools/article-i18n.js), so they wrap between phrases in every browser, Safari included,
   not only where word-break: auto-phrase exists. A phrase wider than its box still breaks. */
html:lang(ja) body :has(> wbr) { word-break: keep-all; overflow-wrap: anywhere; }
/* Table cells keep their words whole; on a phone the tables scroll sideways instead. */
:lang(ja) .cs-page th, :lang(ja) .cs-page td { word-break: keep-all; }
/* The true count figure's shoe labels (4デッキ使用済み, redrawn by the script) keep together. */
:lang(ja) [data-dc-region="r1-0"] [style*="justify-content: space-between"] > span > span { white-space: nowrap; }
/* The hero's three boxes give their labels room for ランニング / カウント on a phone. */
@media (max-width: 480px) { :lang(ja) .cs-heq > div { padding-left: 12px !important; padding-right: 12px !important; } }
@media (max-width: 360px) { :lang(ja) .cs-heq > div > span:first-child { font-size: 10px !important; } }
/* Where the headline needs two lines it wraps as カード / カウンティング, sized so the longer line
   (7 characters: a little over 7em in a bold the fallback font may have to synthesize) fits. */
@media (max-width: 760px) {
  :lang(ja) h1.cs-fs-xl { font-size: min(calc(16px + (var(--fs) - 16px) * 0.55), calc((100vw - 40px) / 7.4)) !important; }
}
@media (min-width: 761px) and (max-width: 1200px) {
  :lang(ja) h1.cs-fs-xl { font-size: min(calc(16px + (var(--fs) - 16px) * 0.86), calc((100vw - 96px) / 7.4)) !important; }
}

/* Spanish: the hero's three boxes fit their longest words (CORRIENTE, RESTANTES, VERDADERO) on a phone. */
@media (max-width: 480px) {
  :lang(es) .cs-heq { gap: 6px !important; }
  :lang(es) .cs-heq > div { padding-left: 12px !important; padding-right: 12px !important; }
  :lang(es) .cs-heq > div > span:first-child { letter-spacing: 0.06em !important; }
}
@media (max-width: 380px) { :lang(es) .cs-heq > div > span:first-child { font-size: 10px !important; letter-spacing: 0 !important; } }

/* Spanish runs a third longer than English: the uppercase headlines lose a notch on phones. */
@media (max-width: 760px) {
  :lang(es) h1.cs-fs { font-size: min(calc(16px + (var(--fs) - 16px) * 0.55), 11vw) !important; }
}