/* Reset & base */
*,*::before,*::after{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}
ul[role='list'],ol[role='list']{list-style:none;margin:0;padding:0}
img,picture{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}

/* Design tokens */
:root{
    --bg:#ffffff; --bg-soft:#f8fafc; --surface:#ffffff;
    --text:#0f172a; --muted:#6b7280; --border:#e5e7eb;
    --primary:#2563eb; --accent:#0ea5e9; --ring:rgba(37,99,235,.2);
    --success:#16a34a; --warning:#f59e0b;
    --container:1180px; --container-narrow:860px;
    --r-lg:16px; --r-xl:24px;
    --s-2:.5rem; --s-3:.75rem; --s-4:1rem; --s-5:1.25rem; --s-6:1.5rem; --s-8:2rem; --s-10:2.5rem; --s-12:3rem; --s-16:4rem; --s-20:5rem;
    --f-12:.75rem; --f-14:.875rem; --f-16:1rem; --f-18:1.125rem; --f-20:1.25rem; --f-24:1.5rem; --f-28:1.75rem; --f-32:2rem; --f-40:2.5rem; --f-56:3.5rem;
}
@media (max-width:1024px){:root{--f-56:3rem;--f-40:2.25rem}}
@media (max-width:640px){:root{--f-56:2.25rem;--f-40:1.875rem;--f-32:1.5rem}}

/* Base typography & background */
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;line-height:1.6;color:var(--text);background:linear-gradient(180deg,var(--bg),var(--bg-soft))}
.container{max-width:var(--container);margin-inline:auto;padding-inline:var(--s-6)}
.container.narrow{max-width:var(--container-narrow)}

/* Headings */
.h1{font-size:var(--f-56);line-height:1.1;letter-spacing:-.02em}
.h2{font-size:var(--f-40);line-height:1.15}
.kicker{font-size:var(--f-14);font-weight:800;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.lead{font-size:var(--f-18);color:var(--muted)}
.sub{font-size:var(--f-18);color:var(--muted)}
.meta{font-size:var(--f-12);color:var(--muted)}

/* Header / Nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.75);backdrop-filter:saturate(160%) blur(8px);border-bottom:1px solid var(--border)}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-block:var(--s-4);gap:var(--s-6)}
.brand{display:flex;align-items:center;gap:var(--s-3)}
.logo{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--primary),var(--accent));box-shadow:0 6px 18px rgba(37,99,235,.25)}
.brand-title{font-weight:800;font-size:var(--f-18)}
.nav-links{display:flex;gap:var(--s-5);align-items:center}
.nav-links a{font-size:var(--f-14);}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:12px;border:1px solid transparent;font-weight:700;cursor:pointer;transition:all .2s}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 12px 20px var(--ring)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{background:#fff;border-color:var(--border)}

/* Sections */
section{padding-block:var(--s-16)}
.section-head{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-10)}
.hero{padding-block:var(--s-16)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--s-12);align-items:center}
.preview{aspect-ratio:16/10;border-radius:var(--r-xl);background:#fff;border:1px solid var(--border);box-shadow:0 6px 24px rgba(2,6,23,.06)}

/* Cards & Surfaces */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 6px 24px rgba(2,6,23,.06)}
.card.pad{padding:var(--s-6)}
.card-contrast{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:0 6px 24px rgba(2,6,23,.06);padding:var(--s-8)}

/* Grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
@media (max-width:1024px){.hero-grid{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid-3,.grid-2{grid-template-columns:1fr}.hero{padding-block:var(--s-12)}section{padding-block:var(--s-12)}}

/* Home: Products */
.product{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:var(--s-6);box-shadow:0 6px 24px rgba(2,6,23,.06);display:flex;flex-direction:column;gap:var(--s-5)}
.product .tag{font-size:var(--f-12);font-weight:800;color:var(--accent);letter-spacing:.06em;text-transform:uppercase}
.product h3{font-size:var(--f-24)}
.product p{color:var(--muted)}
.product .actions{display:flex;gap:var(--s-3);flex-wrap:wrap}

/* Home: Blog cards */
.blog{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.post{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 6px 24px rgba(2,6,23,.06)}
.post img{aspect-ratio:16/9}
.post .pad{padding:var(--s-6)}
.post h3{font-size:var(--f-20);margin-bottom:.25rem}

/* Footer */
.footer{padding-block:var(--s-12);border-top:1px solid var(--border)}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-6)}
.foot-col h4{font-size:var(--f-14);text-transform:uppercase;letter-spacing:.06em;margin-bottom:var(--s-3);color:#0f172a}
.foot-col a{display:block;color:var(--muted);font-size:var(--f-14);padding:.25rem 0}
@media (max-width:1024px){.blog,.foot-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.blog,.foot-grid{grid-template-columns:1fr}}

/* Product page (Transcriber) specifics */
.feature{border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s-6);background:#fff;box-shadow:0 6px 24px rgba(2,6,23,.06)}
.feature h3{font-size:var(--f-20);margin-bottom:var(--s-2)}
.muted{color:var(--muted)}
.callout{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-6);border:1px dashed #cbd5e1;background:#f8fafc;border-radius:var(--r-lg)}
.pricing{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.plan{padding:var(--s-8);border:1px solid var(--border);border-radius:var(--r-xl);background:#fff;box-shadow:0 6px 24px rgba(2,6,23,.06);display:flex;flex-direction:column;gap:var(--s-6)}
.plan h3{font-size:var(--f-24)}
.price{font-size:var(--f-32);font-weight:800}
.perks{display:grid;gap:.5rem}
.perk{display:flex;align-items:flex-start;gap:.5rem;font-size:var(--f-14);color:var(--muted)}
.dot{width:8px;height:8px;border-radius:999px;background:var(--accent);margin-top:.45rem}
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6)}
.quote{padding:var(--s-6);border:1px solid var(--border);border-radius:var(--r-lg);background:#fff;box-shadow:0 6px 24px rgba(2,6,23,.06)}
.quote p{font-size:var(--f-16)}
.who{margin-top:var(--s-3);font-size:var(--f-14);color:var(--muted)}
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s-6)}
.qa{padding:var(--s-6);border:1px solid var(--border);border-radius:var(--r-lg);background:#fff}
.qa h3{font-size:var(--f-18);margin-bottom:var(--s-2)}
.footer-cta{text-align:center;padding-block:var(--s-16)}
.footnote{font-size:var(--f-12);color:var(--muted);margin-top:var(--s-4)}
.headline-center{text-align:center;max-width:840px;margin:0 auto var(--s-10)}
.micro{text-align:center;font-weight:800;font-size:var(--f-24);line-height:1.25;letter-spacing:-.01em;margin:var(--s-12) auto;max-width:720px}
.micro em{font-style:normal;background:linear-gradient(90deg,var(--primary),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.inline-aside{display:flex;gap:var(--s-6);align-items:stretch}
.inline-aside .small-visual{flex:.9;min-width:240px;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#fff}
.inline-aside .text{flex:1.1}
.accent-phrase{text-align:center;font-weight:800;font-size:var(--f-28);margin:var(--s-12) auto;max-width:720px}
.special-list{display:grid;gap:.75rem;margin-top:var(--s-6)}
.special-item{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--f-16)}
.special-item .icon{width:10px;height:10px;border-radius:999px;background:var(--accent);margin-top:.45rem}
.stripe{background:linear-gradient(180deg,var(--bg-soft) 0%, #ffffff 100%)}
@media (max-width:1024px){.pricing,.testimonials{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.pricing,.testimonials,.faq{grid-template-columns:1fr}}

/* Blog list (blog.html) */
.hero .h1{margin-bottom:var(--s-6)}
.lead.max{max-width:860px}
.controls{margin-top:var(--s-8);display:flex;gap:var(--s-4);flex-wrap:wrap;align-items:center}
.field{display:flex;align-items:center;gap:.5rem;padding:.8rem 1rem;border:1px solid var(--border);border-radius:12px;background:#fff}
.field input{border:0;outline:0;min-width:240px}
.tags{display:flex;gap:.5rem;flex-wrap:wrap}
.tag{padding:.5rem .7rem;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:var(--f-14);color:var(--muted);cursor:pointer}
.tag.active{border-color:var(--accent);color:#0f172a;box-shadow:0 0 0 6px rgba(14,165,233,.08)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-6);margin-top:var(--s-10)}
.card{display:flex;flex-direction:column}
.card img{aspect-ratio:16/9}
.pad{padding:var(--s-6)}
.excerpt{color:var(--muted);margin-top:.5rem}
.chips{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.chip{font-size:var(--f-12);padding:.25rem .5rem;border:1px solid var(--border);border-radius:999px;color:var(--muted)}
.pager{display:flex;justify-content:center;gap:.5rem;margin-top:var(--s-12)}
.page-btn{padding:.6rem .9rem;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
.page-btn[disabled]{opacity:.4;cursor:not-allowed}
@media (max-width:1024px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.grid{grid-template-columns:1fr}.hero{padding-block:var(--s-12)}}

/* Blog article (content page) */
article{padding-block:var(--s-16)}
article h1{font-size:var(--f-56);line-height:1.1;margin-bottom:var(--s-6)}
article h2{font-size:var(--f-32);margin-top:var(--s-12);margin-bottom:var(--s-4)}
article h3{font-size:var(--f-24);margin-top:var(--s-8);margin-bottom:var(--s-3)}
article p{margin-bottom:var(--s-5)}
article blockquote{border-left:4px solid var(--accent);padding-left:var(--s-4);font-style:italic;color:var(--muted);margin:var(--s-6) 0}
article ul{margin-bottom:var(--s-5);padding-left:var(--s-6)}
article li{margin-bottom:var(--s-2)}
figure img{border-radius:var(--r-xl);margin-block:var(--s-8)}
footer.site{padding-block:var(--s-12);border-top:1px solid var(--border);text-align:center;color:var(--muted);font-size:var(--f-14)}
footer.site a{color:var(--muted);text-decoration:underline}

/* Reveal (scroll-in) */
.reveal{opacity:0;transform:translateY(8px);transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
    .reveal{opacity:1;transform:none}
    .reveal.in{opacity:1;transform:none}
    html:focus-within{scroll-behavior:auto}
}

/* === Breadcrumbs === */
.breadcrumbs {
    font-size: var(--f-14);
    color: var(--muted);
    margin-top: var(--s-8);
    margin-bottom: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: var(--s-3);
}
.breadcrumbs a {
    color: var(--muted);
    transition: color .2s ease;
}
.breadcrumbs a:hover {
    color: var(--accent);
}
.breadcrumbs .sep {
    color: var(--border);
    user-select: none;
}
.breadcrumbs [aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}