/* ============================================================
   V2 EDITORIAL — shared design system for landing pages
   Used by: home-v2, counter landing pages.

   Per-page accent: set data-accent="<key>" on the .v2 wrapper.
   Per-page direction: set dir="rtl" on the .v2 wrapper.
   ============================================================ */

.v2{
    /* Neutral tokens (shared across all variants) */
    --ink:#0a0a0a;
    --ink-soft:#1a1a1a;
    --paper:#f5f1ea;
    --paper-soft:#ebe5d9;
    --cream:#fdfbf7;
    --rule:rgba(10,10,10,.12);
    --rule-strong:rgba(10,10,10,.28);
    --muted:#52524f;
    --muted-light:rgba(245,241,234,.7);

    /* Default accent: brand blue (home-v2) */
    --accent:#2ba8ff;
    --accent-deep:#0066cc;
    --accent-soft:rgba(43,168,255,.1);
    --accent-glow:rgba(43,168,255,.18);

    font-family:'Inter',system-ui,-apple-system,sans-serif;
    color:var(--ink);
    background:var(--cream);
}

/* ----- Accent variants (one per counter) ----- */
.v2[data-accent="purple"]{ /* people */
    --accent:#8b5cf6;
    --accent-deep:#6d28d9;
    --accent-soft:rgba(139,92,246,.1);
    --accent-glow:rgba(139,92,246,.2);
}
.v2[data-accent="amber"]{ /* tally */
    --accent:#f59e0b;
    --accent-deep:#b45309;
    --accent-soft:rgba(245,158,11,.1);
    --accent-glow:rgba(245,158,11,.2);
}
.v2[data-accent="emerald"]{ /* tasbih */
    --accent:#10b981;
    --accent-deep:#047857;
    --accent-soft:rgba(16,185,129,.1);
    --accent-glow:rgba(16,185,129,.2);
}
.v2[data-accent="teal"]{ /* inventory */
    --accent:#0d9488;
    --accent-deep:#115e59;
    --accent-soft:rgba(13,148,136,.1);
    --accent-glow:rgba(13,148,136,.2);
}
.v2[data-accent="rose"]{ /* knitting */
    --accent:#e11d48;
    --accent-deep:#9f1239;
    --accent-soft:rgba(225,29,72,.1);
    --accent-glow:rgba(225,29,72,.2);
}

/* ----- Dark-mode neutral tokens (accent stays per-page) ----- */
[data-theme="dark"] .v2{
    --ink:#f5f1ea;
    --ink-soft:#e7e3da;
    --paper:#1c1c20;
    --paper-soft:#26262b;
    --cream:#0f0f12;
    --rule:rgba(245,241,234,.12);
    --rule-strong:rgba(245,241,234,.28);
    --muted:#a3a39e;
    --muted-light:rgba(15,15,18,.7);
}
/* Brighten accent text against dark surfaces so emphasized words read well */
[data-theme="dark"] .v2 .v2-hero h1 em{ color:var(--accent); }

.v2 *{box-sizing:border-box}
.v2 ::selection{background:var(--accent);color:#fff}

.v2-serif{font-family:'Fraunces','Source Serif Pro',Georgia,serif;font-feature-settings:"ss01","ss02"}
.v2-mono{font-family:'JetBrains Mono','SF Mono',ui-monospace,monospace}

.v2-container{max-width:1240px;margin:0 auto;padding:0 1.5rem}
.v2-rule{border:0;height:1px;background:var(--rule);margin:0}

.v2-eyebrow{
    display:inline-flex;align-items:center;gap:.625rem;
    font-size:.6875rem;font-weight:700;letter-spacing:.18em;
    text-transform:uppercase;color:var(--ink);
}
.v2-eyebrow::before{content:"";width:24px;height:1px;background:currentColor}
.v2-eyebrow.on-dark{color:var(--accent)}

/* ============================================================
   HERO
   ============================================================ */
.v2-hero{
    position:relative;
    background:
        radial-gradient(ellipse 60% 80% at 80% 50%,var(--accent-glow) 0%,transparent 60%),
        var(--cream);
    min-height:calc(100svh - 64px);
    display:flex;align-items:center;
    padding:3rem 0;
}
.v2-hero-grid{
    position:relative;z-index:1;
    width:100%;
    max-width:1320px;margin:0 auto;padding:0 1.5rem;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,clamp(420px,40vw,640px));
    column-gap:clamp(2rem,5vw,5rem);
    align-items:center;
}
.v2-hero-text{max-width:640px}
.v2-hero-text > *+*{margin-top:2rem}
.v2-hero-text > h1+.v2-hero-deck{margin-top:1.75rem}
.v2-hero-text > .v2-hero-cta+.v2-hero-meta{margin-top:2.5rem}
.v2-hero h1{
    font-family:'Fraunces',Georgia,serif;
    font-size:clamp(2.75rem,6vw,5.25rem);
    line-height:.98;
    letter-spacing:-.035em;
    font-weight:800;
    color:var(--ink);
    margin:0;
}
.v2-hero h1 em{
    font-style:italic;font-weight:400;
    color:var(--accent-deep);
    font-feature-settings:"ss01";
}
.v2-hero h1 .underline{
    text-decoration:underline;
    text-decoration-color:var(--accent);
    text-decoration-thickness:.14em;
    text-underline-offset:.12em;
    text-decoration-skip-ink:none;
}
.v2-hero-deck{
    font-size:clamp(1rem,1.2vw,1.1875rem);
    line-height:1.55;color:var(--muted);
    max-width:540px;
}
.v2-hero-deck strong{color:var(--ink);font-weight:600}

.v2-hero-cta{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.v2-btn{
    display:inline-flex;align-items:center;gap:.5rem;
    padding:.875rem 1.5rem;
    font-family:'Inter',sans-serif;
    font-size:.9375rem;font-weight:600;letter-spacing:.005em;
    text-decoration:none;border:1.5px solid transparent;
    border-radius:0;
    transition:transform .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;
    cursor:pointer;
}
.v2-btn-primary{background:var(--ink);color:var(--cream)}
.v2-btn-primary:hover{background:var(--accent-deep);color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.v2-btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.v2-btn-ghost:hover{background:var(--ink);color:var(--cream)}
.v2-btn-cream{background:var(--cream);color:var(--ink)}
.v2-btn-cream:hover{background:var(--accent);color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 rgba(255,255,255,.4)}
.v2-btn-outline-cream{background:transparent;color:var(--cream);border-color:rgba(245,241,234,.45)}
.v2-btn-outline-cream:hover{border-color:var(--cream);background:rgba(245,241,234,.1)}

.v2-hero-meta{
    display:flex;flex-wrap:nowrap;gap:1.25rem;
    padding-top:2rem;border-top:1px solid var(--rule);
}
.v2-hero-meta-item{
    display:flex;flex-direction:column;
    flex:1 1 0;min-width:0;
    padding-right:1.25rem;
}
.v2-hero-meta-item+.v2-hero-meta-item{border-left:1px solid var(--rule);padding-left:1.25rem}
.v2-hero-meta-num{
    font-size:1.375rem;font-weight:800;line-height:1;
    color:var(--ink);letter-spacing:-.02em;
}
.v2-hero-meta-label{
    font-size:.6875rem;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);margin-top:.5rem;
}

.v2-hero-counter{
    width:100%;display:flex;flex-direction:column;gap:1rem;
    justify-self:end;max-width:640px;
}
.v2-hero-counter .counter-card{
    background:var(--cream);
    border:1px solid var(--ink);
    box-shadow:8px 8px 0 var(--accent-glow);
}
.v2-hero-counter .counter-progress-ring{
    width:280px !important;height:280px !important;
}
.v2-hero-counter .progress-ring-content .counter-value{font-size:4.5rem}
.v2-hero-counter .counter-name{
    font-family:'Fraunces',serif;font-weight:700;letter-spacing:-.01em;
}
.v2-hero-counter .counter-controls{
    gap:1rem;margin-top:1rem;
}
.v2-hero-counter .counter-btn{
    height:64px;font-size:1.5rem;
}
.v2-hero-counter-tag{
    align-self:flex-start;
    display:inline-flex;align-items:center;gap:.5rem;
    font-family:'JetBrains Mono',monospace;
    font-size:.6875rem;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:var(--muted);
}
.v2-hero-counter-tag::before{
    content:"";width:8px;height:8px;border-radius:50%;
    background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-soft);
}
.v2-hero-counter-foot{
    font-size:.8125rem;color:var(--muted);
    line-height:1.55;margin:0;text-align:center;
}
.v2-kbd{
    display:inline-block;padding:.125rem .4375rem;
    font-family:'JetBrains Mono',monospace;font-size:.75rem;font-weight:700;
    background:var(--paper-soft);border:1px solid var(--rule-strong);
    border-radius:3px;color:var(--ink);
}

@media(max-width:980px){
    .v2-hero{padding:3rem 0 4rem}
    .v2-hero-grid{grid-template-columns:1fr;gap:3rem;align-items:start}
    .v2-hero-meta{gap:1rem}
    .v2-hero-meta-item{padding-right:1rem}
    .v2-hero-meta-item+.v2-hero-meta-item{padding-left:1rem}
    .v2-hero-meta-label{font-size:.625rem;letter-spacing:.1em}
}

@media(max-width:640px){
    .v2-hero{
        min-height:calc(100svh - 90px);
        padding:1.5rem 0 3rem;
    }
    .v2-hero-grid{
        gap:1.75rem;
        padding:0 1rem;
    }
    /* Mobile reading order: copy first (eyebrow → headline → deck → CTAs), counter second */
    .v2-hero-text{order:1;max-width:none;width:100%}
    .v2-hero-counter{order:2;justify-self:stretch;max-width:none;gap:.875rem}
    .v2-hero h1{font-size:clamp(2.5rem,10vw,3.25rem);line-height:1.02}
    .v2-hero-text > *+*{margin-top:1.25rem}
    .v2-hero-text > h1+.v2-hero-deck{margin-top:1rem}
    .v2-hero-text > .v2-hero-cta+.v2-hero-meta{margin-top:1.5rem}
    .v2-hero-deck{font-size:1.0625rem;line-height:1.55}
    .v2-hero-cta{flex-direction:column;align-items:stretch;gap:.625rem}
    .v2-hero-cta .v2-btn{justify-content:center;padding:.9375rem 1.25rem}
    .v2-hero-meta{flex-wrap:nowrap;gap:0;padding-top:1.25rem}
    .v2-hero-meta-item{flex:1;min-width:0;padding:0 .5rem;text-align:center}
    .v2-hero-meta-item+.v2-hero-meta-item{
        border-left:1px solid var(--rule);
        margin-top:0;border-top:0;padding-top:0;padding-left:.5rem;
    }
    .v2-hero-meta-num{font-size:1.375rem}
    .v2-hero-meta-label{font-size:.5625rem;letter-spacing:.12em;margin-top:.25rem}
    .v2-hero-counter .counter-card{padding:1.25rem 1rem 1.5rem;border-radius:14px}
    .v2-hero-counter .counter-progress-ring{width:200px !important;height:200px !important}
    .v2-hero-counter .progress-ring-content .counter-value{font-size:3rem}
    .v2-hero-counter .counter-controls{gap:.75rem;margin-top:.875rem}
    .v2-hero-counter .counter-btn{height:56px;font-size:1.25rem}
    .v2-hero-counter-foot{font-size:.6875rem;line-height:1.5}
}

/* ============================================================
   SECTIONS
   ============================================================ */
.v2-sec{padding:6rem 0;position:relative}
.v2-sec.v2-sec-paper{background:var(--paper)}
.v2-sec.v2-sec-cream{background:var(--cream)}
.v2-sec.v2-sec-ink{
    background:var(--ink);color:var(--cream);
    min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;
    padding:5rem 0;
}
.v2-sec.v2-sec-ink .v2-section-title{color:var(--cream)}
.v2-sec.v2-sec-ink .v2-section-deck{color:rgba(245,241,234,.65)}

.v2-section-head{
    max-width:1240px;margin:0 auto 3.5rem;padding:0 1.5rem;
    display:grid;grid-template-columns:auto 1fr;
    gap:3rem;align-items:end;
    border-bottom:1px solid var(--rule);
    padding-bottom:2rem;
}
.v2-sec-ink .v2-section-head{border-color:rgba(245,241,234,.18)}
.v2-section-head-left{max-width:680px}
.v2-section-head-right{
    text-align:right;
    font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;
    font-weight:600;color:var(--muted);
}
.v2-sec-ink .v2-section-head-right{color:rgba(245,241,234,.55)}
.v2-section-title{
    font-family:'Fraunces',Georgia,serif;
    font-size:clamp(2.25rem,4.5vw,3.75rem);
    font-weight:800;line-height:1.02;letter-spacing:-.025em;
    color:var(--ink);
    margin:1rem 0 0;
}
.v2-section-title em{font-style:italic;font-weight:400;color:var(--accent-deep)}
.v2-sec-ink .v2-section-title em{color:var(--accent)}
.v2-section-deck{
    font-size:1.0625rem;line-height:1.55;color:var(--muted);
    margin:1rem 0 0;max-width:580px;
}

@media(max-width:780px){
    .v2-sec{padding:4rem 0}
    .v2-section-head{grid-template-columns:1fr;gap:1.5rem;text-align:left}
    .v2-section-head-right{text-align:left}
}

@media(max-width:640px){
    .v2-sec{padding:3rem 0}
    .v2-sec.v2-sec-ink{
        min-height:0;
        padding:3rem 0;
        justify-content:flex-start;
    }
    .v2-section-head{
        margin-bottom:2rem;
        padding:0 1rem 1.5rem;
        gap:.75rem;
    }
    .v2-section-head-right{font-size:.625rem}
    .v2-section-deck{font-size:.9375rem}
}

/* ============================================================
   TOOL INDEX — editorial numbered list (home-v2)
   ============================================================ */
.v2-tools{max-width:1240px;margin:0 auto;padding:0 1.5rem}
.v2-tool{
    display:grid;grid-template-columns:80px 1fr auto;
    gap:2.5rem;align-items:center;
    padding:2rem 0;
    border-top:1px solid var(--rule);
    text-decoration:none;color:inherit;
    position:relative;transition:padding .2s;
}
.v2-tool:last-of-type{border-bottom:1px solid var(--rule)}
.v2-tool:hover{padding-left:1rem}
.v2-tool-num{
    font-family:'Fraunces',serif;
    font-size:2.5rem;font-weight:400;font-style:italic;
    color:var(--muted);line-height:1;
}
.v2-tool:hover .v2-tool-num{color:var(--accent-deep)}
.v2-tool-body h3{
    font-family:'Fraunces',serif;
    font-size:clamp(1.5rem,2.5vw,2rem);
    font-weight:800;letter-spacing:-.02em;line-height:1.1;
    margin:0 0 .375rem;color:var(--ink);
}
.v2-tool-body p{
    font-size:1rem;line-height:1.5;color:var(--muted);
    margin:0;max-width:640px;
}
.v2-tool-tags{
    display:flex;gap:1.25rem;flex-shrink:0;
    font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
    font-weight:600;color:var(--muted);
}
.v2-tool-tags span{position:relative}
.v2-tool-tags span+span::before{
    content:"·";position:absolute;left:-.75rem;color:var(--rule-strong);
}
.v2-tool-arrow{
    font-family:'Fraunces',serif;
    font-size:1.75rem;color:var(--muted);
    transition:transform .2s,color .2s;flex-shrink:0;
}
.v2-tool:hover .v2-tool-arrow{color:var(--accent-deep);transform:translateX(6px)}

@media(max-width:780px){
    .v2-tool{grid-template-columns:48px 1fr;gap:1.25rem;padding:1.5rem 0}
    .v2-tool-num{font-size:1.75rem}
    .v2-tool-tags{display:none}
    .v2-tool-arrow{display:none}
}
@media(max-width:640px){
    .v2-tools{padding:0 1rem}
    .v2-tool{grid-template-columns:36px 1fr;gap:1rem;padding:1.125rem 0}
    .v2-tool-num{font-size:1.375rem}
    .v2-tool-body h3{font-size:1.1875rem;margin-bottom:.25rem}
    .v2-tool-body p{font-size:.875rem;line-height:1.45}
}

/* ============================================================
   PERSONA / USE-CASE GRID
   Two skins: default (paper bg, dark text) + .v2-personas-dark
   ============================================================ */
.v2-personas{
    max-width:1240px;margin:0 auto;padding:0 1.5rem;
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:0;
    border-top:1px solid var(--rule);
    border-left:1px solid var(--rule);
}
.v2-persona{
    padding:2.5rem 2rem;
    border-bottom:1px solid var(--rule);
    border-right:1px solid var(--rule);
    text-decoration:none;color:var(--ink);
    transition:background .2s;
    display:flex;flex-direction:column;gap:.625rem;
}
.v2-persona:hover{background:var(--accent-soft)}
.v2-persona-num{
    font-family:'JetBrains Mono',monospace;
    font-size:.6875rem;letter-spacing:.16em;
    color:var(--accent-deep);
}
.v2-persona-title{
    font-family:'Fraunces',serif;
    font-size:1.75rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;
    color:var(--ink);margin:.25rem 0 0;
}
.v2-persona-title em{font-style:italic;font-weight:400;color:var(--accent-deep)}
.v2-persona-tool{
    font-size:.875rem;color:var(--muted);
    margin-top:.5rem;
}
.v2-persona-arrow{
    margin-top:.75rem;color:var(--accent-deep);
    font-size:.875rem;letter-spacing:.04em;font-weight:600;
}

/* Dark variant: when grid is placed inside an ink section */
.v2-sec-ink .v2-personas{
    border-top-color:rgba(245,241,234,.18);
    border-left-color:rgba(245,241,234,.18);
}
.v2-sec-ink .v2-persona{
    color:var(--cream);
    border-bottom-color:rgba(245,241,234,.18);
    border-right-color:rgba(245,241,234,.18);
}
.v2-sec-ink .v2-persona-num{color:var(--accent)}
.v2-sec-ink .v2-persona-title{color:var(--cream)}
.v2-sec-ink .v2-persona-title em{color:var(--accent)}
.v2-sec-ink .v2-persona-tool{color:rgba(245,241,234,.6)}
.v2-sec-ink .v2-persona-arrow{color:var(--accent)}

@media(max-width:780px){
    .v2-personas{grid-template-columns:1fr}
}
@media(max-width:640px){
    .v2-personas{padding:0 1rem;border-left:0;border-top:0}
    .v2-persona{padding:1.5rem 1.25rem;border-right:0;gap:.5rem}
    .v2-persona:first-child{border-top:1px solid var(--rule)}
    .v2-sec-ink .v2-persona:first-child{border-top:1px solid rgba(245,241,234,.18)}
    .v2-persona-title{font-size:1.375rem}
    .v2-persona-tool{font-size:.8125rem}
    .v2-persona-arrow{margin-top:.5rem;font-size:.8125rem}
}

/* ============================================================
   STEPS — numbered editorial list (on dark, used by counter pages)
   ============================================================ */
.v2-steps{max-width:1240px;margin:0 auto;padding:0 1.5rem}
.v2-step{
    display:grid;grid-template-columns:80px 1fr auto;
    gap:2.5rem;align-items:center;
    padding:2rem 0;
    border-top:1px solid rgba(245,241,234,.18);
    color:var(--cream);
}
.v2-step:last-of-type{border-bottom:1px solid rgba(245,241,234,.18)}
.v2-step-num{
    font-family:'Fraunces',serif;
    font-size:2.5rem;font-weight:400;font-style:italic;
    color:var(--accent);line-height:1;
}
.v2-step-body h3{
    font-family:'Fraunces',serif;
    font-size:clamp(1.5rem,2.5vw,2rem);
    font-weight:800;letter-spacing:-.02em;line-height:1.1;
    margin:0 0 .375rem;color:var(--cream);
}
.v2-step-body h3 em{font-style:italic;font-weight:400;color:var(--accent)}
.v2-step-body p{
    font-size:1rem;line-height:1.5;color:rgba(245,241,234,.7);
    margin:0;max-width:640px;
}
.v2-step-tag{
    flex-shrink:0;
    font-family:'JetBrains Mono',monospace;
    font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
    font-weight:600;color:rgba(245,241,234,.55);
}

@media(max-width:780px){
    .v2-step{grid-template-columns:48px 1fr;gap:1.25rem;padding:1.5rem 0}
    .v2-step-num{font-size:1.75rem}
    .v2-step-tag{display:none}
}
@media(max-width:640px){
    .v2-steps{padding:0 1rem}
    .v2-step{grid-template-columns:36px 1fr;gap:1rem;padding:1.125rem 0}
    .v2-step-num{font-size:1.375rem}
    .v2-step-body h3{font-size:1.1875rem;margin-bottom:.25rem}
    .v2-step-body p{font-size:.875rem;line-height:1.45}
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.v2-compare-wrap{max-width:1100px;margin:0 auto;padding:0 1.5rem;position:relative}
.v2-compare{
    width:100%;border-collapse:collapse;
    background:var(--cream);
    border:1px solid var(--ink);
}
.v2-compare th,.v2-compare td{
    padding:1.125rem 1.25rem;
    text-align:left;
    border-bottom:1px solid var(--rule);
    font-size:.9375rem;
    vertical-align:middle;
}
.v2-compare thead th{
    font-family:'Inter',sans-serif;
    font-size:.6875rem;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;
    color:var(--muted);
    background:var(--paper-soft);
    border-bottom:2px solid var(--ink);
}
.v2-compare thead .col-us{
    background:var(--ink);color:var(--cream);
    font-weight:800;
}
.v2-compare tbody td:first-child{
    font-family:'Fraunces',serif;
    font-weight:700;font-size:1rem;
    color:var(--ink);
}
.v2-compare .col-us{
    background:var(--accent-soft);
    border-left:1px solid var(--ink);border-right:1px solid var(--ink);
    font-weight:700;color:var(--ink);
}
.v2-compare tbody tr:last-child td{border-bottom:none}
.v2-yes{color:var(--accent-deep);font-weight:700}
.v2-no{color:var(--muted);font-weight:400}
.v2-meh{color:#a87420;font-weight:600}

@media(max-width:780px){
    .v2-compare th,.v2-compare td{padding:.75rem .625rem;font-size:.8125rem}
}

/* Mobile portrait: stack the compare table as cards-per-metric.
   Each tbody tr becomes a card; the .col-us row is the highlight strip
   (pulled from data-us-label on the table or fallback to "Online Counter") */
@media(max-width:640px){
    .v2-compare-wrap{padding:0 1rem}
    .v2-compare{display:block;border:0;background:transparent}
    .v2-compare thead{display:none}
    .v2-compare tbody{display:block}
    .v2-compare tr{
        display:block;
        background:var(--cream);
        border:1px solid var(--ink);
        padding:1rem 1.125rem;
        margin-bottom:.875rem;
    }
    .v2-compare td{
        display:flex;align-items:baseline;justify-content:space-between;
        gap:.75rem;
        padding:.5rem 0;
        border:0;
        font-size:.875rem;line-height:1.4;
    }
    .v2-compare tbody td:first-child{
        font-family:'Fraunces',serif;
        font-size:1.0625rem;font-weight:800;
        color:var(--ink);
        padding-bottom:.625rem;margin-bottom:.25rem;
        border-bottom:1px solid var(--rule);
        display:block;
    }
    .v2-compare tbody td[data-col]::before{
        content:attr(data-col);
        font-size:.6875rem;font-weight:700;letter-spacing:.12em;
        text-transform:uppercase;color:var(--muted);
        flex:1 1 auto;
    }
    .v2-compare tbody td[data-col]{text-align:right}
    .v2-compare tbody .col-us{
        background:var(--ink);color:var(--cream);
        padding:.75rem 1rem;
        margin:.5rem 0 .25rem;
        border:0;
        font-weight:700;font-size:.9375rem;
    }
    /* Each table sets its own "us" label via data-us-label on the table element */
    .v2-compare tbody .col-us::before{
        content:attr(data-us-label);
        color:var(--accent);
        flex:1 1 auto;
    }
    .v2-compare[data-us-label=""] tbody .col-us::before,
    .v2-compare:not([data-us-label]) tbody .col-us::before{
        content:"Online Counter";
    }
    .v2-compare tbody .col-us .v2-yes{color:var(--accent)}
}

/* ============================================================
   FAQ
   ============================================================ */
.v2-faq{max-width:880px;margin:0 auto;padding:0 1.5rem}
.v2-faq-item{
    border-top:1px solid var(--rule);
    padding:2rem 0;
}
.v2-faq-item:last-child{border-bottom:1px solid var(--rule)}
.v2-faq-q{
    display:flex;gap:2rem;align-items:baseline;
    font-family:'Fraunces',serif;
    font-size:clamp(1.25rem,2vw,1.625rem);
    font-weight:700;letter-spacing:-.015em;line-height:1.25;
    color:var(--ink);margin:0 0 1rem;
}
.v2-faq-q-num{
    font-family:'JetBrains Mono',monospace;
    font-size:.75rem;letter-spacing:.12em;
    color:var(--accent-deep);font-weight:600;
    flex-shrink:0;padding-top:.4rem;
}
.v2-faq-a{
    font-size:1rem;line-height:1.6;color:var(--muted);
    margin:0 0 0 calc(.75rem + 2rem);max-width:680px;
}

@media(max-width:780px){
    .v2-faq-q{gap:1rem;font-size:1.125rem}
    .v2-faq-a{margin-left:calc(.5rem + 1rem)}
}
@media(max-width:640px){
    .v2-faq{padding:0 1rem}
    .v2-faq-item{padding:1.5rem 0}
    .v2-faq-q{gap:.625rem;font-size:1.0625rem;align-items:baseline}
    .v2-faq-q-num{font-size:.6875rem;padding-top:.2rem}
    .v2-faq-a{font-size:.9375rem;line-height:1.55;margin-left:0}
}

/* ============================================================
   CLOSER
   ============================================================ */
.v2-closer{
    background:var(--ink);
    color:var(--cream);
    padding:5rem 1.5rem;
    min-height:100svh;
    display:flex;align-items:center;justify-content:center;
    position:relative;overflow:hidden;
}
.v2-closer-inner{
    max-width:1040px;width:100%;margin:0 auto;
    text-align:center;position:relative;z-index:2;
}
.v2-closer-eyebrow{
    color:var(--accent);
    font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase;
    font-weight:600;margin-bottom:1.5rem;display:block;
}
.v2-closer h2{
    font-family:'Fraunces',serif;
    font-size:clamp(2.25rem,4.5vw,3.75rem);
    font-weight:700;line-height:1.05;letter-spacing:-.025em;
    color:var(--cream);margin:0 0 1.5rem;
}
.v2-closer h2 em{
    font-style:italic;font-weight:400;color:var(--accent);
    display:block;
}
.v2-closer p{
    font-size:1.125rem;line-height:1.55;
    color:rgba(245,241,234,.72);
    margin:0 auto 2.5rem;max-width:560px;
}
.v2-closer .v2-hero-cta{justify-content:center}
.v2-closer p.v2-closer-meta{
    margin:3rem auto 0;
    max-width:640px;
    font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(245,241,234,.5);
    font-weight:600;line-height:1.7;
}
@media(max-width:640px){
    .v2-closer{padding:4rem 1rem;min-height:0}
    .v2-closer h2{font-size:2rem;margin-bottom:1.25rem}
    .v2-closer p{font-size:1rem;margin-bottom:2rem}
    .v2-closer .v2-hero-cta{flex-direction:column;align-items:stretch;gap:.625rem}
    .v2-closer .v2-hero-cta .v2-btn{justify-content:center;padding:.9375rem 1.25rem}
    .v2-closer p.v2-closer-meta{margin-top:2rem;letter-spacing:.12em;font-size:.625rem}
}

.v2-closer::before{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(ellipse 60% 50% at 50% 50%, var(--accent-soft), transparent 70%);
    pointer-events:none;z-index:1;
}

/* ============================================================
   MULTI-COUNTER GRID — wraps inline grid + add-slot tile
   ============================================================ */
.v2 .v2-multi-grid-wrap{
    max-width:1240px;margin:2rem auto 0;padding:0 1.5rem;
}
.v2 .v2-multi-grid-wrap .counter-grid-controls{margin-bottom:1.25rem}

/* Grid-wide fullscreen + share buttons (lives in .grid-controls-right) */
.v2 .grid-fullscreen-btn,
.v2 .grid-share-btn{
    display:inline-flex;align-items:center;gap:.5rem;
    margin-left:.625rem;
}
.v2 .grid-fullscreen-btn .fa-expand,
.v2 .grid-fullscreen-btn .fa-compress,
.v2 .grid-share-btn .fa-share-nodes{font-size:.875rem}

/* Share button is fullscreen-only — hidden until the wrap goes :fullscreen */
.v2 .grid-share-btn{display:none}
.v2 .v2-multi-grid-wrap.is-fullscreen .grid-share-btn,
.v2 .v2-multi-grid-wrap:fullscreen .grid-share-btn,
.v2 .v2-multi-grid-wrap:-webkit-full-screen .grid-share-btn{display:inline-flex}

@media(max-width:640px){
    .v2 .grid-fullscreen-btn .grid-fullscreen-label,
    .v2 .grid-share-btn .grid-share-label{display:none}
    .v2 .grid-fullscreen-btn,
    .v2 .grid-share-btn{padding-left:.75rem;padding-right:.75rem}
}

/* Fullscreen state — fill viewport with our cream background + scrollable.
   `.is-fullscreen` is the JS-driven CSS fallback for browsers that don't
   support Element.requestFullscreen (notably iOS Safari for non-video). */
.v2 .v2-multi-grid-wrap:fullscreen,
.v2 .v2-multi-grid-wrap:-webkit-full-screen,
.v2 .v2-multi-grid-wrap.is-fullscreen{
    max-width:none;width:100vw;height:100vh;
    margin:0;padding:1.75rem 2rem;
    background:var(--cream);
    overflow:auto;
}
/* CSS-fallback fullscreen needs explicit positioning (native :fullscreen
   already gets the top layer for free) */
.v2 .v2-multi-grid-wrap.is-fullscreen{
    position:fixed;inset:0;z-index:10000;
}
.v2 .v2-multi-grid-wrap:fullscreen .home-counters-grid,
.v2 .v2-multi-grid-wrap:-webkit-full-screen .home-counters-grid,
.v2 .v2-multi-grid-wrap.is-fullscreen .home-counters-grid{margin-bottom:1rem}

/* In fullscreen the grid is presentation/share-mode — hide the dashed
   "add another counter" tile so it doesn't appear in the shared view */
.v2 .v2-multi-grid-wrap:fullscreen .v2-add-slot,
.v2 .v2-multi-grid-wrap:-webkit-full-screen .v2-add-slot,
.v2 .v2-multi-grid-wrap.is-fullscreen .v2-add-slot{display:none}
/* Same for the Add Counter button on the left side of the controls bar */
.v2 .v2-multi-grid-wrap:fullscreen #add-counter-btn,
.v2 .v2-multi-grid-wrap:-webkit-full-screen #add-counter-btn,
.v2 .v2-multi-grid-wrap.is-fullscreen #add-counter-btn{display:none}
.v2-multi-grid-foot{
    margin:1.5rem 0 0;text-align:center;
    font-size:.8125rem;color:var(--muted);line-height:1.55;
}
.v2-multi-grid-foot-link{
    color:var(--accent-deep);font-weight:600;text-decoration:underline;
    text-decoration-color:var(--accent);text-underline-offset:3px;
}
.v2-multi-grid-foot-link:hover{color:var(--accent)}

.v2-add-slot{
    /* order:9999 keeps the dashed slot visually last even when JS appends
       a new counter card after it in the DOM. */
    order:9999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:.625rem;text-align:center;
    min-height:280px;padding:2rem 1.5rem;
    background:transparent;
    border:2px dashed var(--rule-strong);border-radius:14px;
    color:var(--muted);cursor:pointer;
    transition:border-color .2s,background .2s,transform .15s,color .2s;
    font-family:inherit;
}
@media(max-width:640px){
    .v2 .v2-multi-grid-wrap{padding:0 1rem;margin-top:1.5rem}
    .v2-add-slot{min-height:220px;padding:1.5rem 1rem}
}
.v2-add-slot:hover,
.v2-add-slot:focus-visible{
    border-color:var(--accent);
    background:var(--accent-soft);
    color:var(--ink);
    outline:none;
    transform:translateY(-2px);
}
.v2-add-slot-icon{
    width:48px;height:48px;border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--accent-soft);color:var(--accent-deep);
    font-size:1.125rem;
    transition:background .2s,color .2s;
}
.v2-add-slot:hover .v2-add-slot-icon,
.v2-add-slot:focus-visible .v2-add-slot-icon{
    background:var(--accent);color:#fff;
}
.v2-add-slot-title{
    font-size:1.125rem;font-weight:700;color:var(--ink);
    margin:0;
}
.v2-add-slot-desc{
    font-size:.8125rem;line-height:1.5;color:var(--muted);
    max-width:260px;margin:0;
}
.v2-add-slot-cta{
    margin-top:.25rem;
    font-size:.6875rem;font-weight:700;letter-spacing:.14em;
    text-transform:uppercase;color:var(--accent-deep);
}

/* ============================================================
   RTL — applies when dir="rtl" is set on the .v2 wrapper
   ============================================================ */
.v2[dir="rtl"]{text-align:right}
.v2[dir="rtl"] .v2-hero-meta-item+.v2-hero-meta-item{
    border-left:0;border-right:1px solid var(--rule);
    padding-left:0;padding-right:1.25rem;
}
.v2[dir="rtl"] .v2-hero-counter{justify-self:start}
@media(max-width:640px){
    .v2[dir="rtl"] .v2-hero-meta-item+.v2-hero-meta-item{
        border-right:1px solid var(--rule);border-left:0;
        padding-right:.5rem;padding-left:.5rem;
    }
}