/* ════════════════════════════════════════════════════════════
   iAccounting Marketing Site — Shared Styles
   Design: modern SaaS, indigo + teal, generous whitespace
═══════════════════════════════════════════════════════════ */

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

:root{
    --ink:#0f172a;
    --ink2:#334155;
    --ink3:#64748b;
    --ink4:#94a3b8;
    --line:#e2e8f0;
    --line2:#f1f5f9;
    --bg:#ffffff;
    --bg2:#f8fafc;
    --bg3:#f1f5f9;

    /* Brand */
    --brand:#14146B;        /* deep navy */
    --brand2:#1e1e8c;
    --brand-soft:#eef2ff;
    --accent:#14B8A6;       /* teal */
    --accent2:#0d9488;
    --accent-soft:#ccfbf1;

    /* Semantic */
    --green:#10b981;
    --amber:#f59e0b;
    --red:#ef4444;
    --blue:#3b82f6;

    /* Type */
    --font:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;
    --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,monospace;
    --display:'Plus Jakarta Sans',var(--font);

    /* Radius / shadow */
    --r:14px;
    --r2:8px;
    --shadow-sm:0 1px 2px rgba(15,23,42,.05);
    --shadow:0 4px 14px rgba(15,23,42,.08);
    --shadow-lg:0 12px 40px rgba(15,23,42,.14);
}

html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);font-size:16px;line-height:1.6;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ── Layout ────────────────────────────────────────────────── */
.container{max-width:1200px;margin:0 auto;padding:0 24px}
section{padding:80px 0}
@media(max-width:768px){section{padding:60px 0}}

/* ── Typography ────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.02em;color:var(--ink);line-height:1.15}
h1{font-size:clamp(2.2rem,5vw,3.6rem)}
h2{font-size:clamp(1.8rem,3.5vw,2.6rem);margin-bottom:16px}
h3{font-size:1.35rem;margin-bottom:8px}
h4{font-size:1.05rem;margin-bottom:6px}
p{color:var(--ink2)}
.lead{font-size:1.15rem;color:var(--ink2);max-width:640px}
.eyebrow{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent2);background:var(--accent-soft);padding:6px 14px;border-radius:20px;margin-bottom:18px}
.text-center{text-align:center}
.text-muted{color:var(--ink3)}
.section-head{text-align:center;max-width:680px;margin:0 auto 56px}
.section-head .lead{margin:14px auto 0}

/* ── Buttons ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;font-weight:600;
    font-size:.95rem;border:1.5px solid transparent;transition:.15s;text-decoration:none;white-space:nowrap}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand2);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:var(--shadow)}
.btn-outline{background:#fff;color:var(--brand);border-color:var(--line)}
.btn-outline:hover{border-color:var(--brand);background:var(--brand-soft)}
.btn-ghost{background:transparent;color:var(--ink2)}
.btn-ghost:hover{background:var(--bg3);color:var(--ink)}
.btn-lg{padding:16px 30px;font-size:1rem}
.btn-sm{padding:8px 14px;font-size:.85rem}

/* ── Navbar ────────────────────────────────────────────────── */
.nav{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);z-index:100}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:800;font-size:1.2rem;color:var(--brand)}
.logo-mark{width:34px;height:34px;background:linear-gradient(135deg,var(--brand) 0%,var(--accent) 100%);
    border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;font-size:1.05rem}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none}
.nav-links a{font-size:.92rem;font-weight:500;color:var(--ink2);transition:.15s}
.nav-links a:hover{color:var(--brand)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-toggle{display:none;background:transparent;border:none;color:var(--ink);font-size:1.4rem}
@media(max-width:880px){
    .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;
        flex-direction:column;padding:20px;gap:18px;border-bottom:1px solid var(--line);
        box-shadow:var(--shadow)}
    .nav-links.open{display:flex}
    .nav-toggle{display:block}
    .nav-cta .btn-outline{display:none}
}

/* ── Hero ──────────────────────────────────────────────────── */
.hero{padding:80px 0 60px;background:
    radial-gradient(ellipse at top left,rgba(20,184,166,.08),transparent 50%),
    radial-gradient(ellipse at top right,rgba(20,20,107,.06),transparent 50%);
    overflow:hidden;position:relative}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
@media(max-width:960px){.hero-grid{grid-template-columns:1fr;gap:40px}}
.hero h1{margin-bottom:20px}
.hero h1 span{background:linear-gradient(135deg,var(--brand),var(--accent));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-strip{display:flex;align-items:center;gap:24px;margin-top:36px;flex-wrap:wrap;font-size:.85rem;color:var(--ink3)}
.hero-strip-item{display:flex;align-items:center;gap:8px}
.hero-strip-item::before{content:"✓";color:var(--green);font-weight:700}
.hero-visual{position:relative}
.hero-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-lg);
    padding:24px;font-family:var(--mono);font-size:.85rem;position:relative;overflow:hidden}
.hero-card::before{content:"";position:absolute;top:0;left:0;right:0;height:36px;background:var(--bg3);
    border-bottom:1px solid var(--line)}
.hero-card-dots{position:absolute;top:13px;left:16px;display:flex;gap:6px}
.hero-card-dots span{width:10px;height:10px;border-radius:50%;background:var(--line)}
.hero-card-body{padding-top:24px}

/* ── Trust strip ──────────────────────────────────────────── */
.trust{padding:40px 0;border-bottom:1px solid var(--line);background:var(--bg2)}
.trust-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:50px;opacity:.7}
.trust-label{flex-basis:100%;text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink3);margin-bottom:16px}
.trust-item{font-family:var(--display);font-weight:700;color:var(--ink3);font-size:1.15rem}

/* ── Feature grid ──────────────────────────────────────────── */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.feat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.feat-grid{grid-template-columns:1fr}}
.feat{padding:32px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
    transition:.2s;display:flex;flex-direction:column;gap:14px}
.feat:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent)}
.feat-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;justify-content:center;
    font-size:1.4rem;background:var(--brand-soft);color:var(--brand)}
.feat.f-teal .feat-icon{background:var(--accent-soft);color:var(--accent2)}
.feat.f-amber .feat-icon{background:#fef3c7;color:#92400e}
.feat.f-green .feat-icon{background:#d1fae5;color:#047857}
.feat.f-blue  .feat-icon{background:#dbeafe;color:#1e40af}
.feat.f-red   .feat-icon{background:#fee2e2;color:#b91c1c}
.feat h3{font-size:1.15rem;margin:0}
.feat p{font-size:.93rem;margin:0}

/* ── How it works ──────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;position:relative}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{text-align:center;padding:30px;position:relative}
.step-num{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
    background:var(--brand);color:#fff;border-radius:50%;font-weight:800;font-size:1.1rem;margin-bottom:16px}

/* ── Pricing cards ─────────────────────────────────────────── */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1000px;margin:0 auto}
@media(max-width:860px){.pricing-grid{grid-template-columns:1fr;max-width:480px}}
.plan{padding:36px 28px;border:1.5px solid var(--line);border-radius:var(--r);background:#fff;
    display:flex;flex-direction:column;gap:18px;position:relative;transition:.2s}
.plan.featured{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:scale(1.03)}
.plan:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.plan.featured:hover{transform:scale(1.03) translateY(-3px)}
.plan-tag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--brand);
    color:#fff;padding:5px 16px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.04em}
.plan-name{font-size:1.1rem;font-weight:700;color:var(--ink)}
.plan-price{display:flex;align-items:baseline;gap:6px}
.plan-price-amount{font-family:var(--display);font-size:2.6rem;font-weight:800;color:var(--ink)}
.plan-price-unit{font-size:.9rem;color:var(--ink3)}
.plan-feats{list-style:none;display:flex;flex-direction:column;gap:10px;flex:1}
.plan-feats li{display:flex;gap:10px;font-size:.92rem;color:var(--ink2)}
.plan-feats li::before{content:"✓";color:var(--green);font-weight:700;flex-shrink:0}
.plan-feats li.muted{color:var(--ink4)}
.plan-feats li.muted::before{content:"—";color:var(--ink4)}

/* ── Testimonials ──────────────────────────────────────────── */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.testimonials{grid-template-columns:1fr}}
.testimonial{padding:30px;background:var(--bg2);border-radius:var(--r);border:1px solid var(--line)}
.testimonial p{font-size:.95rem;color:var(--ink);margin-bottom:18px}
.testimonial-author{display:flex;align-items:center;gap:12px}
.avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,var(--brand),var(--accent));
    color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
.testimonial-name{font-weight:600;color:var(--ink);font-size:.92rem}
.testimonial-role{font-size:.8rem;color:var(--ink3)}

/* ── CTA banner ─────────────────────────────────────────────── */
.cta-banner{background:linear-gradient(135deg,var(--brand) 0%,#2a2a9a 100%);color:#fff;
    border-radius:24px;padding:60px 40px;text-align:center;position:relative;overflow:hidden}
.cta-banner::before{content:"";position:absolute;inset:0;background:
    radial-gradient(circle at 80% 30%,rgba(20,184,166,.3),transparent 50%);pointer-events:none}
.cta-banner h2{color:#fff;margin-bottom:14px}
.cta-banner p{color:rgba(255,255,255,.85);max-width:520px;margin:0 auto 28px}
.cta-banner .btn-accent{background:#fff;color:var(--brand)}
.cta-banner .btn-accent:hover{background:var(--accent-soft);color:var(--brand)}

/* ── Footer ────────────────────────────────────────────────── */
.footer{background:var(--ink);color:#cbd5e1;padding:60px 0 30px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer .logo{color:#fff}
.footer h4{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;
    font-family:var(--font);font-weight:700}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:.9rem}
.footer-links a{color:#94a3b8;transition:.15s}
.footer-links a:hover{color:#fff}
.footer-bottom{padding-top:28px;border-top:1px solid #1e293b;display:flex;justify-content:space-between;
    flex-wrap:wrap;gap:12px;font-size:.85rem;color:#64748b}

/* ── Generic page hero (non-home) ──────────────────────────── */
.page-hero{padding:90px 0 60px;background:linear-gradient(180deg,var(--bg2) 0%,#fff 100%);text-align:center}
.page-hero h1{margin-bottom:14px}
.page-hero .lead{margin:0 auto}

/* ── Download cards ─────────────────────────────────────────── */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.dl-grid{grid-template-columns:1fr}}
.dl-card{padding:36px 28px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
    display:flex;flex-direction:column;gap:16px;text-align:center;transition:.2s}
.dl-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--accent)}
.dl-icon{width:64px;height:64px;border-radius:14px;margin:0 auto;display:flex;align-items:center;
    justify-content:center;font-size:2rem;background:var(--brand-soft);color:var(--brand)}
.dl-meta{font-size:.78rem;color:var(--ink3);font-family:var(--mono)}
.dl-card .btn{align-self:center;margin-top:4px}

/* ── Tutorial grid ──────────────────────────────────────────── */
.tut-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.tut-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.tut-grid{grid-template-columns:1fr}}
.tut-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
    transition:.2s;display:flex;flex-direction:column}
.tut-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.tut-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,var(--brand),var(--accent));
    display:flex;align-items:center;justify-content:center;color:#fff;font-size:3rem;position:relative}
.tut-thumb-icon{font-size:3.5rem}
.tut-duration{position:absolute;bottom:10px;right:10px;background:rgba(0,0,0,.7);color:#fff;
    padding:3px 10px;border-radius:6px;font-size:.7rem;font-weight:600}
.tut-body{padding:18px 20px 22px;display:flex;flex-direction:column;gap:6px}
.tut-tag{font-size:.7rem;font-weight:700;color:var(--accent2);text-transform:uppercase;letter-spacing:.06em}
.tut-card h3{font-size:1.05rem;margin:0}
.tut-card p{font-size:.85rem;margin:0;color:var(--ink3)}

/* ── Feature deep-dive ──────────────────────────────────────── */
.deep-feat{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:80px}
@media(max-width:860px){.deep-feat{grid-template-columns:1fr;gap:30px}}
.deep-feat:nth-child(even){direction:rtl}
.deep-feat:nth-child(even)>*{direction:ltr}
@media(max-width:860px){.deep-feat:nth-child(even){direction:ltr}}
.deep-feat-img{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);
    aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:var(--brand);
    font-size:5rem;box-shadow:var(--shadow)}

/* ── FAQ accordion ──────────────────────────────────────────── */
.faq{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.faq-q{width:100%;text-align:left;padding:18px 22px;background:transparent;border:none;font-size:1rem;
    font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center;
    cursor:pointer;transition:.15s}
.faq-q:hover{background:var(--bg2)}
.faq-q::after{content:"+";font-size:1.4rem;font-weight:400;color:var(--ink3);transition:.2s}
.faq-item.open .faq-q::after{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .25s ease;padding:0 22px;color:var(--ink2);font-size:.93rem}
.faq-item.open .faq-a{max-height:400px;padding:0 22px 18px}

/* ── Contact form ───────────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:50px;align-items:start}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr}}
.contact-info-item{display:flex;gap:14px;margin-bottom:24px}
.contact-info-icon{width:44px;height:44px;border-radius:10px;background:var(--brand-soft);color:var(--brand);
    display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0}
.form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.form-row label{font-size:.85rem;font-weight:600;color:var(--ink2)}
.form-row input,.form-row textarea,.form-row select{font-family:inherit;font-size:.95rem;padding:11px 14px;
    border:1.5px solid var(--line);border-radius:8px;outline:none;transition:.15s;background:#fff;color:var(--ink)}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{border-color:var(--brand);
    box-shadow:0 0 0 4px var(--brand-soft)}
.form-row textarea{resize:vertical;min-height:120px}

/* ── Utility ────────────────────────────────────────────────── */
.bg-soft{background:var(--bg2)}
.spacer-sm{height:30px}
.spacer{height:60px}

/* ════════════════════════════════════════════════════════════
   Tutorial pages — SEO-rich content layout
═══════════════════════════════════════════════════════════ */

/* ── Breadcrumb ─────────────────────────────────────────────── */
.crumb{font-size:.85rem;color:var(--ink3);margin-bottom:14px}
.crumb a{color:var(--brand);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb-sep{margin:0 8px;color:var(--ink4)}

/* ── Tutorial layout (sidebar + content) ────────────────────── */
.tut-layout{display:grid;grid-template-columns:240px 1fr;gap:60px;align-items:start}
@media(max-width:980px){.tut-layout{grid-template-columns:1fr;gap:30px}}

.tut-toc{position:sticky;top:90px;background:var(--bg2);border:1px solid var(--line);
    border-radius:12px;padding:22px;font-size:.9rem}
.tut-toc-title{font-family:var(--display);font-weight:800;color:var(--ink);font-size:.75rem;
    letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;color:var(--brand)}
.tut-toc ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.tut-toc a{color:var(--ink2);text-decoration:none;display:block;padding:4px 0;border-left:2px solid transparent;
    padding-left:10px;margin-left:-12px;transition:.15s;line-height:1.4}
.tut-toc a:hover{color:var(--brand);border-left-color:var(--accent)}
@media(max-width:980px){.tut-toc{position:static;margin-bottom:0}}

/* ── Tutorial body typography ───────────────────────────────── */
.tut-body{max-width:760px;font-size:1rem;line-height:1.75;color:var(--ink2)}
.tut-body h2{font-size:1.7rem;margin-top:44px;margin-bottom:16px;color:var(--ink);
    padding-bottom:10px;border-bottom:2px solid var(--brand-soft);scroll-margin-top:90px}
.tut-body h2:first-child{margin-top:0}
.tut-body h3{font-size:1.2rem;margin-top:28px;margin-bottom:10px;color:var(--ink);scroll-margin-top:90px}
.tut-body p{margin-bottom:14px}
.tut-body ul,.tut-body ol{margin:14px 0 18px;padding-left:24px}
.tut-body li{margin-bottom:6px}
.tut-body strong{color:var(--ink);font-weight:700}
.tut-body code{background:var(--bg3);padding:2px 6px;border-radius:4px;font-family:var(--mono);
    font-size:.88em;color:var(--brand)}

/* ── Definition boxes ───────────────────────────────────────── */
.defn{background:var(--brand-soft);border-left:4px solid var(--brand);padding:16px 22px;
    border-radius:0 10px 10px 0;margin:22px 0;font-size:.95rem}
.defn-term{font-family:var(--display);font-weight:700;color:var(--brand);display:block;margin-bottom:4px;
    font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}

/* ── Pro tip callout (links to product naturally) ───────────── */
.tip{background:linear-gradient(135deg,#f0fdfa 0%,#fff 100%);border:1px solid var(--accent);
    border-radius:12px;padding:22px 26px;margin:28px 0;position:relative;overflow:hidden}
.tip::before{content:'';position:absolute;top:0;left:0;bottom:0;width:4px;background:var(--accent)}
.tip-head{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-family:var(--display);
    font-weight:800;color:var(--accent2);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.tip-head::before{content:'✨';font-size:1.1rem}
.tip p{margin-bottom:8px;color:var(--ink)}
.tip a{color:var(--brand);font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--accent)}
.tip a:hover{color:var(--accent2)}

/* ── Warning / Note callout ─────────────────────────────────── */
.note{background:#fffbeb;border-left:4px solid #f59e0b;padding:14px 20px;
    border-radius:0 10px 10px 0;margin:18px 0;font-size:.93rem;color:var(--ink)}
.note strong{color:#92400e}

/* ── Tables in tutorials ────────────────────────────────────── */
.tut-tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:.92rem;
    border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tut-tbl th{background:var(--brand);color:#fff;text-align:left;padding:12px 14px;
    font-family:var(--display);font-weight:700;font-size:.88rem}
.tut-tbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
.tut-tbl tr:last-child td{border-bottom:none}
.tut-tbl tr:nth-child(even) td{background:var(--bg2)}

/* ── Journal entry block (debit/credit display) ─────────────── */
.je{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:18px 22px;
    margin:18px 0;font-family:var(--mono);font-size:.9rem;line-height:1.8}
.je-dr{color:var(--brand);font-weight:700}
.je-cr{color:var(--accent2);font-weight:700;padding-left:30px}
.je-note{color:var(--ink3);font-style:italic;font-size:.85rem;padding-left:30px;margin-top:4px}

/* ── Related tutorials section ──────────────────────────────── */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:30px}
.related-card{display:block;padding:20px 22px;background:#fff;border:1px solid var(--line);
    border-radius:10px;text-decoration:none;transition:.18s}
.related-card:hover{border-color:var(--brand);transform:translateY(-2px);box-shadow:var(--shadow)}
.related-card .eyebrow{margin-bottom:8px}
.related-card h4{font-size:1rem;color:var(--ink);margin-bottom:4px}
.related-card p{font-size:.85rem;color:var(--ink3);margin:0}

/* ── Tutorial index cards on hub ────────────────────────────── */
.tut-hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
.tut-hub-card{display:block;padding:24px 26px;background:#fff;border:1px solid var(--line);
    border-radius:12px;text-decoration:none;transition:.18s;position:relative;overflow:hidden}
.tut-hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--brand),var(--accent));opacity:0;transition:.2s}
.tut-hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.tut-hub-card:hover::before{opacity:1}
.tut-hub-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
    border-radius:8px;background:var(--brand-soft);color:var(--brand);font-weight:800;font-family:var(--display);
    font-size:.9rem;margin-bottom:14px}
.tut-hub-card h3{font-size:1.1rem;color:var(--ink);margin-bottom:6px}
.tut-hub-card p{font-size:.88rem;color:var(--ink3);margin-bottom:14px;line-height:1.5}
.tut-hub-meta{display:flex;gap:14px;font-size:.78rem;color:var(--ink4);font-weight:600}
.tut-hub-meta span::before{content:'·';margin-right:8px;color:var(--ink4)}
.tut-hub-meta span:first-child::before{content:'';margin:0}

/* ── Tutorial category sections on hub ──────────────────────── */
.tut-cat-head{display:flex;align-items:baseline;gap:12px;margin:46px 0 22px;padding-bottom:12px;
    border-bottom:2px solid var(--brand-soft)}
.tut-cat-head h2{font-size:1.4rem;color:var(--ink);margin:0;border:none;padding:0}
.tut-cat-head span{font-size:.85rem;color:var(--ink3)}


/* ── Compatibility helpers for migrated GST tutorial pages ─── */
.container-narrow{max-width:820px;margin:0 auto;padding:0 24px}

/* Hub-grid/card (alias to tut-hub-*) */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.hub-card{display:block;padding:24px 26px;background:#fff;border:1px solid var(--line);
    border-radius:12px;text-decoration:none;transition:.18s;position:relative;overflow:hidden}
.hub-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--brand),var(--accent));opacity:0;transition:.2s}
.hub-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand)}
.hub-card:hover::before{opacity:1}
.hub-num{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
    border-radius:8px;background:var(--brand-soft);color:var(--brand);font-weight:800;
    font-family:var(--display);font-size:.9rem;margin-bottom:12px}
.hub-card h3{font-size:1.05rem;color:var(--ink);margin-bottom:6px}
.hub-card p{font-size:.88rem;color:var(--ink3);margin-bottom:12px;line-height:1.5}
.hub-meta{display:flex;gap:14px;font-size:.78rem;color:var(--ink4);font-weight:600}
.hub-meta span::before{content:'·';margin-right:8px;color:var(--ink4)}
.hub-meta span:first-child::before{content:'';margin:0}

/* Generic .tbl alias */
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:.92rem;
    border:1px solid var(--line);border-radius:8px;overflow:hidden}
.tbl th{background:var(--brand);color:#fff;text-align:left;padding:12px 14px;
    font-family:var(--display);font-weight:700;font-size:.88rem}
.tbl td{padding:11px 14px;border-bottom:1px solid var(--line);color:var(--ink2);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:nth-child(even) td{background:var(--bg2)}

/* ink-3, ink-4 aliases for older pages */
:root{--ink-2:var(--ink2);--ink-3:var(--ink3);--ink-4:var(--ink4);--r-lg:18px;--bg-2:var(--bg2)}

/* Card grid utilities */
.card-grid{display:grid;gap:20px}
.card-grid-2{grid-template-columns:repeat(2,1fr)}
.card-grid-3{grid-template-columns:repeat(3,1fr)}
.card-grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:860px){.card-grid-3,.card-grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:540px){.card-grid-2,.card-grid-3,.card-grid-4{grid-template-columns:1fr}}

.card{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:#fff;
    transition:.2s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)}
.card-icon{width:48px;height:48px;border-radius:10px;display:flex;align-items:center;
    justify-content:center;font-size:1.4rem;background:var(--brand-soft);color:var(--brand);margin-bottom:12px}

.cat-card{display:block;padding:28px;background:#fff;border:1.5px solid var(--line);
    border-radius:var(--r);text-decoration:none;color:inherit;transition:.2s}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--brand)}
.cat-icon{font-size:2.2rem;margin-bottom:12px}
.cat-count{display:inline-block;margin-top:12px;color:var(--brand);font-weight:700;font-size:.88rem}

.hero-actions{display:flex;gap:14px;flex-wrap:wrap}

/* ════════════════════════════════════════════════════════════
   Pricing — 5-plan grid + industry cards
═══════════════════════════════════════════════════════════ */

.plans-grid-4{display:grid !important;grid-template-columns:repeat(4,1fr) !important;gap:18px;align-items:stretch;max-width:1240px;margin:0 auto;width:100%}
@media(max-width:1200px){.plans-grid-4{grid-template-columns:repeat(4,1fr) !important;gap:14px}}
@media(max-width:980px){.plans-grid-4{grid-template-columns:repeat(2,1fr) !important;max-width:720px}}
@media(max-width:520px){.plans-grid-4{grid-template-columns:1fr !important;max-width:420px}}

.plan-card{background:#fff;border:1.5px solid var(--line);border-radius:18px;padding:24px 20px;
    display:flex;flex-direction:column;position:relative;overflow:hidden;transition:.22s}
.plan-card:hover{border-color:var(--brand);box-shadow:var(--shadow-lg);transform:translateY(-4px)}

.plan-card-dark{background:var(--ink);border-color:var(--ink);color:#fff}
.plan-card-dark .plan-card-name,.plan-card-dark .plan-card-amount{color:#fff}
.plan-card-dark .plan-card-tag,.plan-card-dark .plan-card-unit{color:rgba(255,255,255,.55)}
.plan-card-dark .plan-card-feats li{color:rgba(255,255,255,.85)}
.plan-card-dark .plan-card-feats li.muted{color:rgba(255,255,255,.35)}
.plan-card-dark .plan-feats-label{color:rgba(255,255,255,.4)}

.plan-card-va{background:linear-gradient(160deg,#fff 60%,#fffbeb);border-color:#fcd34d}

.plan-ribbon{position:absolute;top:14px;right:-32px;background:var(--brand);color:#fff;
    font-size:.6rem;font-weight:900;padding:5px 38px;transform:rotate(40deg);
    letter-spacing:.1em;text-transform:uppercase;z-index:1}

.plan-emoji{font-size:1.6rem;margin-bottom:10px;line-height:1}
.plan-card-name{font-size:1.05rem;font-weight:800;margin-bottom:2px;color:var(--ink)}
.plan-card-tag{font-size:.78rem;color:var(--ink4);margin-bottom:16px;font-weight:500}
.plan-card-price{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid var(--line2);position:relative}
.plan-card-amount{font-size:2rem;font-weight:900;line-height:1;color:var(--ink);font-family:var(--display)}
.plan-card-unit{font-size:.72rem;color:var(--ink4);font-weight:500;margin-top:5px}
.plan-savings{display:inline-block;margin-top:6px;font-size:.7rem;font-weight:700;
    padding:2px 8px;border-radius:100px;background:#d1fae5;color:#047857}

.yearly-badge{display:inline-block;background:#fef3c7;color:#92400e;font-size:.65rem;
    font-weight:800;padding:3px 8px;border-radius:100px;border:1px solid #fcd34d;
    text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.yearly-badge-dark{background:rgba(255,255,255,.12);color:#fbbf24;border-color:rgba(255,255,255,.2)}

.billing-note{display:inline-block;background:#fef3c7;color:#92400e;font-size:.65rem;
    font-weight:700;padding:3px 8px;border-radius:6px;margin-bottom:6px;
    border:1px solid #fcd34d}

.plan-card .btn{margin-bottom:18px}

.plan-chips{display:flex;flex-wrap:wrap;gap:5px;margin:6px 0 14px}
.chip{padding:3px 8px;border-radius:6px;font-size:.65rem;font-weight:800;
    letter-spacing:.02em;border:1px solid}
.chip-sky{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.chip-amber{background:#fffbeb;color:#92400e;border-color:#fde68a}
.chip-green{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.chip-gray{background:#f9fafb;color:#6b7280;border-color:#e5e7eb}
.chip-purple{background:#ede9fe;color:#5b21b6;border-color:#c4b5fd}

.plan-card-dark .chip-sky{background:rgba(59,130,246,.12);color:#93c5fd;border-color:rgba(147,197,253,.2)}
.plan-card-dark .chip-amber{background:rgba(251,191,36,.10);color:#fde68a;border-color:rgba(253,230,138,.2)}
.plan-card-dark .chip-green{background:rgba(34,197,94,.10);color:#86efac;border-color:rgba(134,239,172,.2)}
.plan-card-dark .chip-gray{background:rgba(255,255,255,.06);color:rgba(255,255,255,.4);border-color:rgba(255,255,255,.1)}
.plan-card-dark .chip-purple{background:rgba(167,139,250,.14);color:#c4b5fd;border-color:rgba(196,181,253,.2)}

.plan-feats-label{font-size:.62rem;font-weight:900;text-transform:uppercase;
    letter-spacing:.12em;color:var(--ink4);margin-bottom:10px}

.plan-card-feats{list-style:none;display:flex;flex-direction:column;gap:7px;flex:1;padding:0;margin:0}
.plan-card-feats li{display:flex;align-items:flex-start;gap:6px;font-size:.78rem;
    color:var(--ink2);line-height:1.45}
.plan-card-feats li.ai{color:#5b21b6;font-weight:600}
.plan-card-dark .plan-card-feats li.ai{color:#c4b5fd}
.plan-card-feats li.human{color:#be185d;font-weight:600}
.plan-card-dark .plan-card-feats li.human{color:#fbcfe8}
.plan-card-feats li.muted{text-decoration:line-through;opacity:.5}

/* ── Industry cards ────────────────────────────────────────── */
.industry-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:980px){.industry-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.industry-grid{grid-template-columns:1fr}}

.industry-card{background:#fff;border:1.5px solid var(--line);border-radius:var(--r);
    padding:28px;display:flex;flex-direction:column;transition:.22s;position:relative;overflow:hidden}
.industry-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;
    border-radius:var(--r) var(--r) 0 0}
.industry-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}
.industry-ca::before{background:linear-gradient(90deg,#1a56db,#60a5fa)}
.industry-mfg::before{background:linear-gradient(90deg,#dc2626,#f97316)}
.industry-diag::before{background:linear-gradient(90deg,#059669,#10b981)}
.industry-trust::before{background:linear-gradient(90deg,#d97706,#f59e0b)}
.industry-jwl::before{background:linear-gradient(90deg,#92400e,#fbbf24)}
.industry-cust::before{background:linear-gradient(90deg,#7c3aed,#a855f7)}
.industry-ca:hover{border-color:#1a56db}
.industry-mfg:hover{border-color:#dc2626}
.industry-diag:hover{border-color:#059669}
.industry-trust:hover{border-color:#d97706}
.industry-jwl:hover{border-color:#92400e}
.industry-cust:hover{border-color:#7c3aed}

.industry-badge{display:inline-block;font-size:.65rem;font-weight:800;text-transform:uppercase;
    letter-spacing:.08em;margin-bottom:14px;padding:4px 10px;border-radius:6px;
    background:var(--bg2);color:var(--ink3);align-self:flex-start}
.industry-icon{font-size:2.2rem;margin-bottom:12px;line-height:1}
.industry-card h3{font-size:1.15rem;margin-bottom:6px;color:var(--ink)}
.industry-desc{font-size:.85rem;color:var(--ink3);margin-bottom:16px;line-height:1.6}
.industry-feats{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.industry-feats li{font-size:.83rem;color:var(--ink2);padding-left:18px;position:relative;line-height:1.45}
.industry-feats li::before{content:'✓';position:absolute;left:0;color:var(--accent2);font-weight:700}

/* ── Trust bar (bottom of pricing) ─────────────────────────── */
.trust-bar-bottom{display:flex;flex-wrap:wrap;justify-content:center;gap:30px;
    margin-top:60px;padding:24px;background:var(--bg2);border-radius:var(--r);
    border:1px solid var(--line)}
.tb-item{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:600;color:var(--ink2)}
.tb-item span{font-size:1.1rem}

/* ════════════════════════════════════════════════════════════
   Full Plan Comparison Table
═══════════════════════════════════════════════════════════ */
.compare-wrap{max-width:1200px;margin:0 auto;overflow-x:auto;
    background:#fff;border:1.5px solid var(--line);border-radius:14px;
    box-shadow:0 4px 20px rgba(0,0,0,.04)}
.compare-tbl{width:100%;border-collapse:collapse;min-width:780px;font-size:.92rem}
.compare-tbl thead th{background:var(--ink);color:#fff;padding:16px 12px;
    font-family:var(--display);font-weight:700;font-size:.92rem;text-align:center;
    border-right:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:2}
.compare-tbl thead th:first-child{text-align:left;padding-left:22px}
.compare-tbl thead th small{display:block;font-size:.7rem;font-weight:600;
    margin-top:3px;opacity:.85}
.compare-tbl thead th.hot{background:linear-gradient(135deg,#1a56db,#3b82f6);
    color:#fff;position:relative}
.compare-tbl thead th.hot::after{content:'MOST POPULAR';position:absolute;
    top:-9px;left:50%;transform:translateX(-50%);background:#fbbf24;color:var(--ink);
    font-size:.6rem;font-weight:900;padding:2px 10px;border-radius:100px;
    letter-spacing:.06em;white-space:nowrap}

.compare-tbl tbody tr{border-top:1px solid var(--line)}
.compare-tbl tbody td{padding:11px 12px;text-align:center;color:var(--ink2);
    vertical-align:middle;border-right:1px solid var(--line);font-size:.88rem}
.compare-tbl tbody td:first-child{text-align:left;padding-left:22px;color:var(--ink);
    font-weight:600;font-size:.88rem}
.compare-tbl tbody td.hot-col{background:rgba(59,130,246,.05);
    border-left:2px solid #3b82f6;border-right:2px solid #3b82f6}
.compare-tbl tbody tr:hover td{background:var(--bg2)}
.compare-tbl tbody tr:hover td.hot-col{background:rgba(59,130,246,.1)}

.compare-tbl tr.grp td{background:var(--bg2);color:var(--ink);
    font-family:var(--display);font-weight:800;font-size:.78rem;
    text-transform:uppercase;letter-spacing:.08em;text-align:left;
    padding:14px 22px;border-right:none}

.compare-tbl .ck{color:#059669;font-weight:800;font-size:1.05rem}
.compare-tbl .xx{color:#cbd5e1;font-weight:700;font-size:1rem}
.compare-tbl .st{display:inline-block;font-size:.72rem;font-weight:700;
    padding:2px 9px;border-radius:100px;background:#fef3c7;color:#92400e;
    border:1px solid #fcd34d}
.compare-tbl .ai{display:inline-block;font-size:.72rem;font-weight:800;
    padding:2px 9px;border-radius:100px;background:#ede9fe;color:#5b21b6;
    border:1px solid #c4b5fd}

.btn-mini{display:inline-block;padding:6px 12px;font-size:.78rem;font-weight:700;
    border:1.5px solid var(--line);border-radius:7px;color:var(--ink);
    text-decoration:none;transition:.15s;background:#fff}
.btn-mini:hover{border-color:var(--brand);color:var(--brand);transform:translateY(-1px)}
.btn-mini-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn-mini-primary:hover{background:#1a4cbf;color:#fff}

@media(max-width:760px){
  .compare-tbl{font-size:.82rem;min-width:680px}
  .compare-tbl thead th{padding:12px 8px;font-size:.82rem}
  .compare-tbl tbody td{padding:9px 8px;font-size:.8rem}
  .compare-tbl tbody td:first-child{padding-left:14px;font-size:.8rem}
  .compare-tbl tr.grp td{padding:11px 14px;font-size:.72rem}
}