/* ==========================================================================
   BDC — design system, ported from Claude Design project 614d8d70
   tokens/colors.css · tokens/typography.css · tokens/layout.css · tokens/base.css
   components/core/{Button,Card,Badge,Tag} · ui_kits/website/{SiteChrome,Pages}
   Arabic-first RTL. Logical properties throughout so LTR pages mirror for free.
   ========================================================================== */

/* ---- tokens/colors.css ---- */
:root{
  --bdc-yellow:#E6B322; --bdc-black:#010101;
  --yellow-50:#FCF6E4; --yellow-100:#F8EBC2; --yellow-200:#F2DA8D; --yellow-300:#EDC957;
  --yellow-400:#E6B322; --yellow-500:#C99A15; --yellow-600:#A37C10; --yellow-700:#7C5E0C;
  --ink-900:#010101; --ink-800:#1E1D1A; --ink-700:#3A3833; --ink-600:#57544C;
  --ink-500:#767268; --ink-400:#98948A; --ink-300:#BDB9B0; --ink-200:#DDDAD3;
  --ink-100:#EEECE7; --ink-50:#F7F6F2; --white:#FFFFFF;
  --success:#3D8B4E; --success-soft:#E4F1E6; --warning:#C97B15; --warning-soft:#FAEEDD;
  --danger:#C24A38; --danger-soft:#F8E7E3; --info:#3A6FA8; --info-soft:#E5EDF6;
  --surface-page:var(--white); --surface-sunken:var(--ink-50); --surface-card:var(--white);
  --surface-inverse:var(--ink-900); --surface-accent:var(--bdc-yellow);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-600); --text-muted:var(--ink-400);
  --text-on-accent:var(--ink-900); --text-on-inverse:var(--white);
  --accent:var(--bdc-yellow); --accent-hover:var(--yellow-500); --accent-press:var(--yellow-600);
  --border-default:var(--ink-200); --border-strong:var(--ink-900);
  --focus-ring:0 0 0 3px var(--yellow-200);
}
/* ---- tokens/typography.css ---- */
:root{
  --font-display:'Quicksand','Cairo',system-ui,sans-serif;
  --font-body:'Poppins','Cairo',system-ui,sans-serif;
  --font-arabic:'Cairo','Poppins',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --text-xs:12px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:20px;
  --text-xl:24px; --text-2xl:32px; --text-3xl:44px; --text-4xl:60px; --text-5xl:96px;
  --weight-light:300; --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700;
  --leading-tight:1.1; --leading-snug:1.3; --leading-normal:1.55;
  --tracking-display:-0.01em; --tracking-caps:0.08em;
}
/* ---- tokens/layout.css ---- */
:root{
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px;
  --radius-sm:8px; --radius-md:14px; --radius-lg:22px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(1,1,1,.08); --shadow-md:0 4px 16px rgba(1,1,1,.10);
  --shadow-lg:0 12px 40px rgba(1,1,1,.14);
  --ease-out:cubic-bezier(.22,.9,.35,1); --dur-fast:120ms; --dur-base:200ms;
}

/* ---- tokens/base.css — Arabic leads, so --font-arabic is the body default ---- */
.bdc{font-family:var(--font-arabic);font-size:var(--text-base);line-height:var(--leading-normal);
  color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased;
  /* Frappe's own stylesheet sets body{text-align:left} — a physical value that leaks in and
     beats the `start` default even though dir=rtl resolves correctly. Reset to logical. */
  text-align:start}
.bdc :lang(en){font-family:var(--font-body)}
.bdc h1,.bdc h2,.bdc h3,.bdc h4{font-family:var(--font-arabic);font-weight:var(--weight-bold);
  letter-spacing:0;line-height:var(--leading-tight);margin:0}
.bdc :lang(en) h1,.bdc :lang(en) h2,.bdc :lang(en) h3,.bdc h1:lang(en),.bdc h2:lang(en),.bdc h3:lang(en){
  font-family:var(--font-display);letter-spacing:var(--tracking-display)}
.bdc p{margin:0}
.bdc a{color:var(--ink-900);text-decoration-color:var(--bdc-yellow);text-decoration-thickness:2px;text-underline-offset:3px}
.bdc a:hover{color:var(--yellow-600)}
.bdc ::selection{background:var(--yellow-200)}
.bdc img{max-width:100%;height:auto}
.bdc *,.bdc *::before,.bdc *::after{box-sizing:border-box}
.bdc :focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Arabic never gets the mono face — Latin-only type. Mirrors base.css .link-mono/.eyebrow-mono. */
.bdc .link-mono{font-family:var(--font-arabic);font-size:var(--text-base);font-weight:var(--weight-medium);
  color:var(--ink-900);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  text-decoration-color:transparent;cursor:pointer;transition:text-decoration-color var(--dur-fast) var(--ease-out)}
.bdc .link-mono:hover{color:var(--yellow-600);text-decoration-color:var(--bdc-yellow)}
.bdc .link-mono[aria-current="page"]{text-decoration-color:var(--bdc-yellow);text-decoration-thickness:3px}
.bdc .eyebrow{font-family:var(--font-arabic);font-size:var(--text-xs);font-weight:var(--weight-semibold);
  letter-spacing:.02em;color:var(--ink-500)}
.bdc .eyebrow-mono{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-500)}
.bdc .accent-bar{display:block;width:88px;height:12px;background:var(--bdc-yellow)}

/* ---- layout ---- */
.bdc .wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.bdc .sec{padding:72px 0 0}
.bdc .sec-sunken{background:var(--surface-sunken);padding:72px 0;margin-top:72px}

/* ---- components/core/Button.jsx ----
   Frappe's website bundle ships `.btn:not(.btn-md):not(.btn-lg):not(.btn-xs){padding:4px 8px}`
   — specificity (0,4,0), which beats a plain `.bdc .btn` (0,2,0) and squashed every
   default-size button. Matching its :not() chain restores the design's own scale without
   resorting to !important. Same reason the size modifiers below carry .bdc twice.
   Font: Button.jsx uses --font-display; Arabic has no Quicksand glyphs, so :lang() picks
   Cairo for Arabic and Quicksand for English rather than forcing one face on both. */
.bdc .btn{font-family:var(--font-display);font-weight:var(--weight-semibold);border:none;
  border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:8px;white-space:nowrap;text-decoration:none;
  font-size:var(--text-base);line-height:var(--leading-snug);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.bdc:lang(ar) .btn,.bdc .btn:lang(ar){font-family:var(--font-arabic)}
/* Padding only: match Frappe's :not() chain so we outrank it, and keep this chain OUT of
   the base rule — folding it in there would raise the base to (0,5,0) and let it beat the
   variant rules below (mono would lose its 3px corners and mono face). */
.bdc .btn:not(.btn-md):not(.btn-lg):not(.btn-xs){padding:10px 22px}
.bdc .btn.btn-sm:not(.btn-md):not(.btn-lg):not(.btn-xs){font-size:var(--text-sm);padding:7px 16px}
.bdc .btn.btn-lg{font-size:var(--text-md);padding:13px 30px}
.bdc .btn-primary{background:var(--accent);color:var(--text-on-accent)}
.bdc .btn-primary:hover{background:var(--accent-hover);color:var(--text-on-accent)}
.bdc .btn-primary:active{background:var(--accent-press)}
.bdc .btn-secondary{background:transparent;color:var(--ink-900);box-shadow:inset 0 0 0 2px var(--ink-900)}
.bdc .btn-secondary:hover{background:var(--ink-50);color:var(--ink-900)}
.bdc .btn-ghost{background:transparent;color:var(--ink-900)}
.bdc .btn-ghost:hover{background:var(--ink-50)}
.bdc .btn-inverse{background:var(--ink-900);color:var(--white)}
.bdc .btn-inverse:hover{background:var(--ink-700);color:var(--white)}
/* Button.jsx `mono` variant: 3px corners, mono face, regular weight, .02em tracking.
   Latin-only face — Arabic labels keep Cairo (IBM Plex Mono has no Arabic glyphs). */
.bdc .btn.btn-mono{background:var(--ink-50);color:var(--ink-900);box-shadow:inset 0 0 0 1px var(--ink-300);
  border-radius:3px;font-family:var(--font-mono);font-weight:var(--weight-regular);letter-spacing:.02em}
.bdc:lang(ar) .btn.btn-mono{font-family:var(--font-arabic);letter-spacing:0}
.bdc .btn.btn-mono:hover{background:var(--yellow-100);color:var(--ink-900)}

/* ---- components/core/Card.jsx ---- */
.bdc .card{border-radius:var(--radius-lg);padding:var(--space-5);
  transition:box-shadow var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.bdc .card-lg{padding:var(--space-6)}
.bdc .card-outline{background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-default)}
.bdc .card-elevated{background:var(--surface-card);box-shadow:var(--shadow-md)}
.bdc .card-sunken{background:var(--surface-sunken)}
.bdc .card-inverse{background:var(--surface-inverse);color:var(--text-on-inverse)}
.bdc .card-accent{background:var(--surface-accent);color:var(--text-on-accent)}
.bdc a.card-interactive{display:block;text-decoration:none;color:inherit}
.bdc .card-interactive{cursor:pointer}
.bdc .card-interactive:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}

/* ---- components/core/Badge.jsx + Tag ---- */
.bdc .badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-arabic);
  font-size:var(--text-xs);font-weight:var(--weight-medium);padding:3px 10px;border-radius:var(--radius-pill)}
.bdc .badge-neutral{background:var(--ink-100);color:var(--ink-700)}
.bdc .badge-accent{background:var(--yellow-100);color:var(--yellow-700)}
.bdc .badge-success{background:var(--success-soft);color:var(--success)}
.bdc .badge-warning{background:var(--warning-soft);color:var(--warning)}
.bdc .badge-info{background:var(--info-soft);color:var(--info)}
.bdc .tag{display:inline-flex;align-items:center;font-family:var(--font-arabic);font-size:var(--text-sm);
  padding:5px 14px;border-radius:var(--radius-pill);background:var(--ink-50);color:var(--ink-700);
  box-shadow:inset 0 0 0 1px var(--ink-200)}

/* ---- type scale ---- */
.bdc .t-4xl{font-size:var(--text-4xl)} .bdc .t-3xl{font-size:var(--text-3xl)}
.bdc .t-2xl{font-size:var(--text-2xl)} .bdc .t-xl{font-size:var(--text-xl)}
.bdc .t-lg{font-size:var(--text-lg)} .bdc .t-md{font-size:var(--text-md)}
.bdc .t-sm{font-size:var(--text-sm)}
.bdc .muted{color:var(--ink-500)} .bdc .secondary{color:var(--ink-600)}
.bdc .lead{color:var(--ink-600);font-size:var(--text-md);line-height:var(--leading-normal)}

/* ---- header (SiteChrome.jsx) ---- */
.bdc-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(8px);border-bottom:1px solid var(--ink-100)}
.bdc-header .bar{max-width:1200px;margin:0 auto;padding:0 32px;display:flex;align-items:center;
  justify-content:space-between;height:68px;gap:24px}
/* width:auto is load-bearing — the intrinsic width/height attrs (kept for CLS) otherwise
   fix the used width and stretch the mark. Kit rule 2 / brand-logo-donts.html: never warp
   the logo. 46px tall ≈ 181px wide, clearing the kit's 180px minimum for the full lockup.
   flex:none + max-width:none are load-bearing too: as a flex item the <a> was shrinking
   (to 92px on blog pages), and `max-width:100%` then clamped the img against a fixed
   height — squashing the lockup to a 2.0 ratio. Never let the logo box shrink. */
.bdc-header .logo{flex:none}
.bdc-header .logo img{height:46px;width:auto;max-width:none;display:block}
.bdc-header nav{display:flex;gap:26px;align-items:center}
.bdc-nav-toggle{display:none;background:transparent;border:none;cursor:pointer;padding:8px;
  border-radius:var(--radius-sm);color:var(--ink-900)}
.bdc-header-cta{display:flex;align-items:center;gap:10px}
.bdc-lang{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--ink-700);
  font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;padding:7px 11px;
  border-radius:var(--radius-pill);box-shadow:inset 0 0 0 1px var(--ink-200);
  transition:background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.bdc-lang:hover{background:var(--ink-50);color:var(--ink-900)}

/* Ink illustrations — brand-illustration.html: art sits on yellow or white, never
   mixed with photos in the same section. Source PNGs are 1200x896 on a white plate. */
.bdc-illu{width:100%;height:auto;display:block;border-radius:var(--radius-md)}
/* hero art ships with the yellow plate baked in, so it needs no blend or radius */
.bdc-hero .bdc-illu{border-radius:0}

/* illustrated service block — mirrors Pages.jsx "What we do" */
.bdc-svc{display:flex;flex-direction:column}
.bdc-svc .illu-link{display:block;text-decoration:none}
.bdc-svc .bdc-illu{transition:transform var(--dur-base) var(--ease-out)}
.bdc-svc .illu-link:hover .bdc-illu{transform:translateY(-3px)}
.bdc a.plain{text-decoration:none;color:inherit}
.bdc a.plain:hover{color:var(--yellow-600)}

/* dropdown for the ERP / products clusters */
.bdc-menu{position:relative}
.bdc-menu > button{background:transparent;border:none;cursor:pointer;font:inherit;
  font-family:var(--font-arabic);font-size:var(--text-base);font-weight:var(--weight-medium);
  color:var(--ink-900);display:inline-flex;align-items:center;gap:5px;padding:0}
.bdc-menu-panel{position:absolute;inset-inline-start:0;top:calc(100% + 14px);min-width:250px;
  background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:8px;display:none;flex-direction:column;gap:2px}
.bdc-menu[open] .bdc-menu-panel,.bdc-menu:hover .bdc-menu-panel,
.bdc-menu:focus-within .bdc-menu-panel{display:flex}
.bdc-menu-panel a{padding:9px 12px;border-radius:var(--radius-sm);text-decoration:none;
  color:var(--ink-800);font-size:var(--text-sm)}
.bdc-menu-panel a:hover{background:var(--ink-50);color:var(--ink-900)}

/* ---- footer (SiteChrome.jsx) ---- */
.bdc-footer{background:var(--ink-900);color:var(--white);margin-top:96px}
.bdc-footer .cols{max-width:1200px;margin:0 auto;padding:56px 32px;display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
.bdc-footer img{height:48px;width:auto;max-width:none;display:block}
.bdc-footer h4{font-family:var(--font-arabic);font-weight:700;font-size:14px;margin-bottom:12px;color:var(--bdc-yellow)}
.bdc-footer .links{display:flex;flex-direction:column;gap:8px}
.bdc-footer .links a{color:var(--ink-300);font-size:13px;text-decoration:none}
.bdc-footer .links a:hover{color:var(--bdc-yellow)}
.bdc-footer .base{border-top:1px solid var(--ink-800)}
.bdc-footer .base .in{max-width:1200px;margin:0 auto;padding:18px 32px;display:flex;
  justify-content:space-between;gap:16px;font-size:12px;color:var(--ink-500);flex-wrap:wrap}
.bdc-footer .blurb{color:var(--ink-400);font-size:13px;max-width:36ch;margin-top:14px}

/* ---- hero (Pages.jsx HomePage) ---- */
.bdc-hero{background:var(--bdc-yellow)}
.bdc-hero .in{max-width:1200px;margin:0 auto;padding:80px 32px 72px;display:grid;
  grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.bdc-hero h1{font-size:var(--text-4xl);margin-top:16px}
.bdc-hero .sub{color:var(--ink-800);font-size:var(--text-md);max-width:46ch;margin-top:20px}
.bdc-hero .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.bdc-underline{display:inline-flex;flex-direction:column}
.bdc-underline img,.bdc-underline svg{width:100%}

/* page hero for inner pages */
.bdc-pagehead{padding:64px 0 0}
.bdc-pagehead h1{font-size:var(--text-3xl)}
.bdc-pagehead .lead{margin-top:14px;max-width:60ch}

/* ---- grids ---- */
.bdc .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.bdc .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.bdc .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.bdc .grid-illu-3{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}

/* ---- stats strip ---- */
.bdc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bdc-stats .n{font-family:var(--font-display);font-size:var(--text-3xl);font-weight:700;line-height:1}
.bdc-stats .l{color:var(--ink-500);font-size:var(--text-sm);margin-top:6px}

/* ---- CTA band ---- */
.bdc-cta{background:var(--ink-900);color:var(--white);border-radius:var(--radius-lg);
  padding:56px 64px;display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.bdc-cta h2{font-size:var(--text-2xl);color:var(--white)}
.bdc-cta p{color:var(--ink-400);margin-top:8px}

/* ---- comparison / module table (ErpPage.jsx) ---- */
.bdc-rows{padding:0;overflow:hidden}
.bdc-rows .row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 24px}
.bdc-rows .row + .row{border-top:1px solid var(--ink-100)}
.bdc-rows .row .name{font-weight:var(--weight-semibold);font-size:15px}
.bdc-table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.bdc-table th,.bdc-table td{text-align:start;padding:14px 18px;border-bottom:1px solid var(--ink-100);vertical-align:top}
.bdc-table thead th{background:var(--ink-900);color:var(--white);font-family:var(--font-arabic);
  font-weight:var(--weight-semibold);font-size:var(--text-sm);border-bottom:none}
.bdc-table thead th:first-child{border-start-start-radius:var(--radius-md)}
.bdc-table thead th:last-child{border-start-end-radius:var(--radius-md)}
.bdc-table tbody tr:nth-child(even){background:var(--ink-50)}
.bdc-table .axis{font-weight:var(--weight-semibold);color:var(--ink-900);white-space:nowrap}

/* ---- FAQ (details/summary — no JS) ---- */
.bdc-faq{display:flex;flex-direction:column;gap:12px}
.bdc-faq details{background:var(--surface-card);box-shadow:inset 0 0 0 1px var(--border-default);
  border-radius:var(--radius-md);padding:0}
.bdc-faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:var(--weight-semibold);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.bdc-faq summary::-webkit-details-marker{display:none}
.bdc-faq summary::after{content:"+";font-family:var(--font-mono);font-size:18px;color:var(--yellow-600);flex:none}
.bdc-faq details[open] summary::after{content:"−"}
.bdc-faq .a{padding:0 22px 20px;color:var(--ink-600);font-size:var(--text-sm)}

/* ---- steps ---- */
.bdc-steps{counter-reset:s;display:grid;gap:16px}
.bdc-step{display:flex;gap:16px;align-items:flex-start}
.bdc-step .num{counter-increment:s;flex:none;width:34px;height:34px;border-radius:var(--radius-pill);
  background:var(--bdc-yellow);color:var(--ink-900);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:13px;font-weight:600}
.bdc-step .num::before{content:counter(s)}

/* ---- image slot (assets/image-slot.js — placeholder until art is produced) ---- */
.bdc-slot{background:var(--ink-50);border:1px dashed var(--ink-300);border-radius:var(--radius-md);
  display:flex;align-items:center;justify-content:center;text-align:center;padding:16px;
  color:var(--ink-400);font-size:var(--text-xs);font-family:var(--font-mono);min-height:160px}
.bdc-hero .bdc-slot{background:rgba(255,255,255,.28);border-color:var(--ink-700);color:var(--ink-700);height:380px}

/* ---- forms (ContactPage.jsx) ---- */
.bdc-field{display:flex;flex-direction:column;gap:6px}
.bdc-field label{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--ink-700)}
.bdc-field input,.bdc-field select,.bdc-field textarea{font-family:var(--font-arabic);
  font-size:var(--text-base);padding:11px 14px;border-radius:var(--radius-sm);border:none;
  box-shadow:inset 0 0 0 1px var(--ink-300);background:var(--white);color:var(--ink-900);width:100%}
.bdc-field input:focus,.bdc-field select:focus,.bdc-field textarea:focus{outline:none;
  box-shadow:inset 0 0 0 2px var(--bdc-yellow),var(--focus-ring)}
.bdc-field textarea{min-height:120px;resize:vertical}
.bdc-form{display:flex;flex-direction:column;gap:16px}

/* ---- responsive: mobile-first target from the SEO brief (Core Web Vitals green) ---- */
@media (max-width:980px){
  .bdc-hero .in{grid-template-columns:1fr;padding:56px 24px;gap:32px}
  .bdc-hero h1{font-size:var(--text-3xl)}
  .bdc-hero .bdc-slot{height:240px}
  .bdc .grid-3,.bdc .grid-2,.bdc .grid-illu-3,.bdc .grid-4{grid-template-columns:1fr;gap:24px}
  .bdc-stats{grid-template-columns:repeat(2,1fr)}
  .bdc-footer .cols{grid-template-columns:1fr 1fr;padding:40px 24px}
  .bdc-cta{padding:36px 28px;flex-direction:column;align-items:flex-start}
  .bdc .wrap{padding:0 24px}
  .bdc-pagehead h1{font-size:var(--text-2xl)}
  .bdc-header nav{position:fixed;inset-block-start:68px;inset-inline:0;background:var(--white);
    flex-direction:column;align-items:stretch;gap:0;padding:8px;border-bottom:1px solid var(--ink-100);
    box-shadow:var(--shadow-md);display:none;max-height:calc(100dvh - 68px);overflow-y:auto}
  .bdc-header nav a,.bdc-menu > button{padding:12px 14px;border-radius:var(--radius-sm);width:100%}
  .bdc-nav-toggle{display:inline-flex}
  .bdc-header input#bdc-nav:checked ~ .bar nav{display:flex}
  .bdc-menu-panel{position:static;display:flex;box-shadow:none;padding:0 0 8px 12px;min-width:0}
  .bdc-menu > button{display:none}
  .bdc-table{font-size:var(--text-xs)}
  .bdc-table th,.bdc-table td{padding:10px 12px}
}
@media (max-width:560px){
  .bdc-stats{grid-template-columns:1fr}
  .bdc-footer .cols{grid-template-columns:1fr}
  .bdc-hero h1{font-size:var(--text-2xl)}
}
@media (prefers-reduced-motion:reduce){
  .bdc *{transition:none !important;animation:none !important}
}

/* table wrapper so wide comparison tables scroll instead of breaking the page */
.bdc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md)}

/* ---- blog (rendered by the blog app through bdc_web.html, not by deploy.py) ----
   Here .bdc lands on <body>, so these rules style frappe's own blog markup in place.
   head_html hides .page-breadcrumbs / .page-header-wrapper globally; the blog needs the
   content wrapper back, since those resets were written for our full-bleed Web Pages. */
.bdc-blog .page-content-wrapper{padding:0 !important;margin:0 !important}
.bdc-blog .page_content{padding:0 !important;margin:0 !important}
.bdc-blog main{padding:56px 24px 24px !important;margin:0 auto !important;max-width:1200px !important}
.bdc-blog .blog-container{max-width:760px;margin:0 auto}
.bdc-blog .blog-list{max-width:760px;margin:0 auto}
.bdc-blog .blog-title,.bdc-blog h1{font-size:var(--text-3xl);line-height:var(--leading-tight)}
.bdc-blog .blog-header{margin-bottom:28px}
.bdc-blog .blog-content{font-size:var(--text-md);line-height:1.9;color:var(--ink-800)}
.bdc-blog .blog-content h2{font-size:var(--text-xl);margin:36px 0 12px}
.bdc-blog .blog-content h3{font-size:var(--text-lg);margin:28px 0 10px}
.bdc-blog .blog-content p{margin:0 0 16px}
.bdc-blog .blog-content ul,.bdc-blog .blog-content ol{margin:0 0 18px;padding-inline-start:22px}
.bdc-blog .blog-content li{margin-bottom:8px}
.bdc-blog .blog-content a{text-decoration-color:var(--bdc-yellow)}
.bdc-blog .blog-content img{max-width:100%;height:auto;border-radius:var(--radius-md)}
.bdc-blog .blog-content blockquote{margin:20px 0;padding:14px 20px;background:var(--ink-50);
  border-inline-start:4px solid var(--bdc-yellow);border-radius:var(--radius-sm)}
.bdc-blog .blog-content table{width:100%;border-collapse:collapse;font-size:var(--text-sm);margin:20px 0}
.bdc-blog .blog-content th,.bdc-blog .blog-content td{text-align:start;padding:12px 14px;border-bottom:1px solid var(--ink-100)}
.bdc-blog .blog-content thead th{background:var(--ink-900);color:var(--white)}
/* post cards on the category index */
.bdc-blog .blog-list-item,.bdc-blog .post-card{background:var(--surface-card);
  box-shadow:inset 0 0 0 1px var(--border-default);border-radius:var(--radius-lg);
  padding:var(--space-5);margin-bottom:16px}
.bdc-blog .blog-list-item:hover{box-shadow:var(--shadow-md)}
.bdc-blog .blog-intro,.bdc-blog .blog-description{color:var(--ink-500);font-size:var(--text-sm)}
/* frappe blog chrome we don't want */
.bdc-blog .blog-comments,.bdc-blog .post-meta .avatar-frame{margin-top:12px}
.bdc-blog .page-header-actions-block,.bdc-blog .blog-featured-image{display:none}