/* 2026 visual system: one compact identity across the site and its guides. */
:root {
  --navy: #102942;
  --navy-mid: #193b59;
  --blue: #2577a4;
  --blue-light: #69a9c8;
  --orange: #e97839;
  --orange-light: #f39a62;
  --surface: #f5f8fa;
  --surface-dim: #dde7ec;
  --text: #172b3d;
  --text-muted: #536575;
  --invoice-accent: #19857b;
  --pdf-accent: #2577a4;
  --credit-accent: #19857b;
  --qr-accent: #315e9b;
  --font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
}

body { color: var(--text); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.nav { background: rgba(255,255,255,.97); border-bottom: 1px solid #e3e9ed; box-shadow: none; }
.nav-inner { height: 72px; }
.nav-brand { gap: 10px; flex-shrink: 0; }
.nav-brand .nav-logo, .footer-brand .nav-brand .nav-logo, .footer-brand .nav-logo {
  width: 42px; height: 42px; min-width: 42px; object-fit: contain; position: static; top: auto;
  filter: none; margin: 0;
}
.nav-wordmark, .footer-brand .nav-wordmark {
  font-family: 'DM Sans', sans-serif; font-size: 1.48rem; font-weight: 800;
  letter-spacing: -.035em; margin-left: 0;
}
.nav-wordmark span { color: var(--blue); }
.nav-wordmark em { color: var(--orange); }
.nav-links { gap: 26px; }
.nav-links a { font-size: .88rem; color: #4a5d6b; }
.nav-cta { border-radius: 9px; padding: 10px 18px; }
.mobile-menu { top: 72px; }
.btn-primary, .btn-secondary, .btn-ghost { border-radius: 9px; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { box-shadow: 0 7px 18px rgba(233,120,57,.22); }

/* Home: open editorial layout with one clear photo and four related tool marks. */
.home-refresh .hero { background: #fff; padding: 112px 0 66px; overflow: visible; }
.home-refresh .hero::before, .home-refresh .hero-grid-pattern { display: none; }
.home-refresh .hero-inner { max-width: 1380px; grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); gap: 24px; min-height: 500px; }
.home-refresh .hero-text { color: var(--navy); padding: 34px 0; }
.home-refresh .hero-badge { display: none; }
.home-refresh .hero h1 { font-family: var(--font-display); font-size: clamp(3.5rem,5.35vw,5.45rem); font-weight: 700; line-height: 1.04; letter-spacing: -.052em; max-width: 590px; margin-bottom: 22px; }
.home-refresh .hero h1 .accent { color: var(--navy); }
.home-refresh .hero p { font-size: 1.06rem; color: var(--text-muted); max-width: 540px; line-height: 1.75; margin-bottom: 30px; }
.home-refresh .hero-actions { gap: 12px; }
.home-refresh .hero .btn-primary { background: var(--orange); padding: 13px 24px; }
.home-refresh .hero .btn-secondary { background: #fff; color: var(--navy); border: 1px solid #afc2ce; padding: 13px 24px; }
.home-refresh .hero .btn-secondary:hover { background: var(--surface); }
.home-refresh .hero-visual { height: 500px; overflow: hidden; border-radius: 4px; animation: fadeSlideUp .8s .15s ease both; }
.home-refresh .hero-workspace { width: 100%; height: 100%; object-fit: cover; object-position: 62% center; display: block; }
.home-refresh .tools-section { padding: 72px 0 96px; background: #fff; border-top: 1px solid #e7ecef; }
.home-refresh .tools-section::before { display: none; }
.home-refresh .section-header { text-align: left; margin-bottom: 36px; }
.home-refresh .section-label { color: var(--blue); margin-bottom: 9px; }
.home-refresh .section-header h2 { font-family: var(--font-display); font-size: clamp(2.2rem,3.4vw,3.3rem); font-weight: 700; letter-spacing: -.045em; }
.home-refresh .section-header p { margin: 0; max-width: 780px; font-size: 1rem; }
.home-refresh .tools-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.home-refresh .tool-card { display: flex; flex-direction: column; min-height: 440px; padding: 25px; border: 1px solid transparent; border-radius: 13px; box-shadow: none; }
.home-refresh .tool-card.qr { background: #f0f6fc; }
.home-refresh .tool-card.invoice { background: #f1f8f5; }
.home-refresh .tool-card.pdf { background: #f1f5fa; }
.home-refresh .tool-card.credit { background: #f0f8f5; }
.home-refresh .tool-card::before, .home-refresh .tool-card .card-deco { display: none; }
.home-refresh .tool-card:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(16,41,66,.08); border-color: #d9e5ea; }
.home-refresh .tool-card-header { display: block; margin-bottom: 16px; }
.home-refresh .tool-card-icon { width: 112px; height: 112px; min-width: 0; min-height: 0; border-radius: 0; background: transparent; justify-content: flex-start; margin-bottom: 16px; }
.home-refresh .tool-card-icon img { width: 112px; height: 112px; max-width: none; max-height: none; }
.home-refresh .tool-card-titles h3 { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.14; margin-bottom: 7px; color: var(--navy); }
.home-refresh .tool-card-titles .tool-domain { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); overflow-wrap: anywhere; }
.home-refresh .tool-card p { color: #435869; font-size: .89rem; line-height: 1.58; margin-bottom: 22px; }
.home-refresh .tool-card-link { margin-top: auto; font-size: .86rem; color: var(--navy) !important; }
.home-refresh .why-section, .home-refresh .guides-section { background: var(--surface); padding: 82px 0; }
.home-refresh .why-grid { gap: 24px; margin-top: 35px; }
.home-refresh .why-card { text-align: left; border-top: 2px solid #c5d6df; padding-top: 22px; }
.home-refresh .why-icon { margin: 0 0 16px; width: 48px; height: 48px; background: #e6eff3; border-radius: 10px; }
.home-refresh .why-card h3 { font-size: 1.1rem; }
.home-refresh .why-card p { max-width: none; margin: 0; }
.home-refresh .how-section { background: #fff; color: var(--navy); padding: 82px 0; }
.home-refresh .how-section::before, .home-refresh .step-connector { display: none; }
.home-refresh .how-section .section-label { color: var(--blue); }
.home-refresh .how-section .section-header h2 { color: var(--navy); }
.home-refresh .how-section .section-header p { color: var(--text-muted); }
.home-refresh .steps { gap: 0; margin-top: 38px; border-top: 1px solid #d9e3e9; }
.home-refresh .step { text-align: left; background: none; border: 0; border-right: 1px solid #d9e3e9; border-radius: 0; padding: 28px 28px 8px 0; }
.home-refresh .step + .step { padding-left: 28px; }
.home-refresh .step:last-child { border-right: 0; }
.home-refresh .step-number { color: #b2cbd9; font-size: 2.4rem; margin-bottom: 12px; }
.home-refresh .step-icon { display: none; }
.home-refresh .step p { color: var(--text-muted); }
.home-refresh .guide-link { border: 1px solid #e1e9ed; border-radius: 10px; min-height: 126px; }
.home-refresh .guide-link:hover { transform: translateY(-2px); }
.home-refresh .cta-banner { background: var(--navy); }
.home-refresh .cta-banner::before { display: none; }

/* Reading surfaces: calmer page heads, clear screenshot captions. */
.page-head { padding: 132px 0 54px; background: #f7fafb; color: var(--navy); border-bottom: 1px solid #e4ecef; }
.page-head::before { display: none; }
.crumbs { color: #687b88; }
.crumbs a { color: #476777; }
.crumbs a:hover { color: var(--navy); }
.eyebrow { color: var(--blue); }
.page-head h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.4rem,4.6vw,4.25rem); letter-spacing: -.045em; line-height: 1.08; }
.page-head .lede { color: #486071; font-size: 1.06rem; line-height: 1.7; }
.page-head .meta { color: #687b88; }
.page-head .btn-secondary { color: var(--navy); border-color: #b9cbd4; background: #fff; }
.page-head .btn-secondary:hover { background: #edf4f7; }
.article { padding-top: 48px; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.9rem; letter-spacing: -.035em; }
.prose h3 { font-family: var(--font-display); }
.prose .steps > li::before { border-radius: 10px; }
.toc, .note { background: #f3f8fa; }
.prose figure.guide-example { margin: 1.7em 0 2em; background: #fff; border: 1px solid #dce6eb; border-radius: 12px; overflow: hidden; box-shadow: 0 9px 24px rgba(16,41,66,.07); }
.guide-example .example-kicker { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: #f2f7f9; border-bottom: 1px solid #dce6eb; font-size: .77rem; font-weight: 800; text-transform: uppercase; letter-spacing: .075em; color: #425c6b; }
.prose figure.guide-example .example-kicker img { width: 30px; height: 30px; flex: 0 0 30px; object-fit: contain; border: 0; box-shadow: none; border-radius: 5px; }
.prose figure.guide-example > img { display: block; width: 100%; height: auto; border: 0; border-radius: 0; box-shadow: none; }
.prose figure.guide-example figcaption { margin: 0; padding: 14px 17px; text-align: left; font-size: .84rem; line-height: 1.55; background: #fff; border-top: 1px solid #e5ecef; }
.guide-example figcaption a { margin-left: 8px; font-weight: 800; white-space: nowrap; }
.tool-cta { background: var(--navy); }
.tool-cta img { background: #fff; padding: 3px; }
.card { border-color: #dfe8ec; box-shadow: none; }
.card:hover { box-shadow: 0 12px 26px rgba(16,41,66,.08); }
.section-head { display: flex; align-items: center; gap: 16px; text-align: left; margin-bottom: 30px; }
.section-head h2 { font-family: var(--font-display); font-size: clamp(2rem,3vw,2.8rem); font-weight: 700; margin: 0; }
.section-tool-mark { width: 60px; height: 60px; flex: 0 0 60px; }
.card .card-preview { width: calc(100% + 52px); height: 150px; margin: -26px -26px 21px; object-fit: cover; object-position: center 32%; display: block; border-bottom: 1px solid #e1e9ed; background: #f6f9fa; }
.card:has(.card-preview)::before { z-index: 1; }
.guide-categories { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; margin-top: 30px; }
.guide-categories a { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 11px 12px; border: 1px solid #d5e2e9; border-radius: 10px; background: #fff; color: var(--navy); text-decoration: none; font-size: .82rem; font-weight: 800; }
.guide-categories a:hover { border-color: var(--blue); background: #eef6f9; }
.guide-categories img { width: 28px; height: 28px; }
.guide-categories strong { margin-left: auto; border-radius: 6px; background: #eaf1f5; padding: 2px 7px; font-size: .7rem; }
.guide-hub .section { scroll-margin-top: 72px; border-bottom: 1px solid #dce7ec; }
.guide-hub .section-head { margin-bottom: 22px; }
.guide-hub .cards { grid-template-columns: 1fr; gap: 10px; }
.guide-hub .card { display: grid; grid-template-columns: 168px minmax(0,1fr) auto; grid-template-rows: auto auto 1fr; column-gap: 22px; min-height: 138px; padding: 14px; align-items: start; }
.guide-hub .card .card-preview { grid-column: 1; grid-row: 1 / 4; width: 168px; height: 108px; margin: 0; border: 0; border-radius: 6px; object-fit: cover; object-position: center 25%; }
.guide-hub .card .tag { grid-column: 2; grid-row: 1; margin: 0 0 5px; }
.guide-hub .card h3 { grid-column: 2; grid-row: 2; margin: 0 0 4px; font-size: 1.15rem; }
.guide-hub .card p { grid-column: 2; grid-row: 3; margin: 0; font-size: .87rem; }
.guide-hub .card .more { grid-column: 3; grid-row: 1 / 4; align-self: center; margin: 0 8px 0 0; white-space: nowrap; }

/* The QR route and editor remain one application; the two paths are visible up front. */
.qr-refresh .quick { padding-top: 104px; background: #f7fafb; }
.qr-refresh .branding-box { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 8px 0 12px; }
.qr-refresh .branding-logo-col { min-width: 144px; }
.qr-refresh .branding-logo-col img { width: 106px; height: 106px; object-fit: contain; }
.qr-refresh .branding-text-col h1 { font-family: var(--font-display); font-size: clamp(2.3rem,4vw,3.3rem); font-weight: 700; }
.qr-refresh .branding-text-col h2 { font-family: var(--font-display); font-weight: 700; }
.qr-refresh .qgen { box-shadow: 0 14px 35px rgba(16,41,66,.08); border-radius: 14px; }
.qr-refresh .qgen::before { background: var(--blue); }
.qr-refresh .qbtn { border-radius: 9px; }
.qr-refresh .studio { background: #fff; }

@media (max-width: 1100px) {
  .home-refresh .tools-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .home-refresh .tool-card { min-height: 345px; }
}
@media (max-width: 900px) {
  .home-refresh .hero-inner { grid-template-columns: 1fr; text-align: left; }
  .home-refresh .hero p { margin-left: 0; }
  .home-refresh .hero-actions { justify-content: flex-start; }
  .home-refresh .hero-visual { display: block; height: 360px; }
  .home-refresh .hero-workspace { object-position: 65% 50%; }
}
@media (max-width: 700px) {
  .nav-brand .nav-logo, .footer-brand .nav-logo { width: 36px; height: 36px; min-width: 36px; top: auto; }
  .nav-wordmark { font-size: 1.22rem; margin-left: 0; }
  .home-refresh .hero { padding: 94px 0 38px; }
  .home-refresh .hero-text { padding: 16px 0 0; }
  .home-refresh .hero h1 { font-size: clamp(2.8rem,11vw,4.2rem); }
  .home-refresh .hero-visual { height: 260px; }
  .home-refresh .tools-grid { grid-template-columns: 1fr; }
  .home-refresh .tool-card { min-height: 0; }
  .home-refresh .why-grid { grid-template-columns: 1fr; }
  .home-refresh .steps { grid-template-columns: 1fr; }
  .home-refresh .step, .home-refresh .step + .step { padding: 22px 0; border-right: 0; border-bottom: 1px solid #d9e3e9; }
  .page-head { padding: 112px 0 42px; }
  .qr-refresh .branding-box { gap: 10px; }
  .guide-categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .guide-hub .card { grid-template-columns: 90px minmax(0,1fr); column-gap: 12px; min-height: 118px; padding: 12px; }
  .guide-hub .card .card-preview { width: 90px; height: 90px; }
  .guide-hub .card .more { grid-column: 2; grid-row: 4; justify-self: start; margin-top: 6px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .home-refresh .hero-visual, .home-refresh .hero h1, .home-refresh .hero p, .home-refresh .hero-actions { animation: none; }
}