/* ============================================================
   sourcewithme.io — Neo-Brutalist design system
   Shared across all pages (index, servizi, chi-siamo, blog, contatti)
   ============================================================ */

:root{
  --bg:#FFF9E8;
  --surface:#FFFFFF;
  --ink:#0F0F0F;
  --soft:#5B5748;
  --line:#0F0F0F;
  --accent:#FF3300;   /* China corridor / primary CTA */
  --accent2:#F5B942;  /* gold — highlights, badges */
  --accent3:#3730A3;  /* indigo — Pakistan corridor */
  --accent3-soft:#E4E1F7;
  --shadow-ink:#0F0F0F;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E0D0A;
    --surface:#17160F;
    --ink:#FBF6E6;
    --soft:#B7B29C;
    --line:#FBF6E6;
    --accent:#FF5A33;
    --accent2:#F5B942;
    --accent3:#8E97FF;
    --accent3-soft:#221F44;
    --shadow-ink:#FBF6E6;
  }
}
:root[data-theme="dark"]{
  --bg:#0E0D0A;
  --surface:#17160F;
  --ink:#FBF6E6;
  --soft:#B7B29C;
  --line:#FBF6E6;
  --accent:#FF5A33;
  --accent2:#F5B942;
  --accent3:#8E97FF;
  --accent3-soft:#221F44;
  --shadow-ink:#FBF6E6;
}

*{box-sizing:border-box;}
html,body{margin:0; padding:0;}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Unbounded",sans-serif;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%; display:block;}
a{color:inherit;}
::selection{background:var(--accent); color:#fff;}

.mono{font-family:"JetBrains Mono",monospace;}
.wrap{max-width:1120px; margin:0 auto; padding-inline:24px;}
.wrap-narrow{max-width:820px; margin:0 auto; padding-inline:24px;}

h1,h2,h3,h4{margin:0; letter-spacing:-0.02em; line-height:1.05; font-weight:800;}
h1{font-size:clamp(34px,6vw,64px); text-transform:uppercase;}
h2{font-size:clamp(28px,5vw,46px); text-transform:uppercase;}
h3{font-size:clamp(20px,3vw,26px); text-transform:uppercase;}
p{line-height:1.7; margin:0 0 16px;}
p.lede{
  font-family:"JetBrains Mono",monospace; font-size:15px; line-height:1.75;
  border-left:3px solid var(--line); padding-left:18px; color:var(--soft);
}
.hl{background:var(--accent); color:#fff; padding:0 8px; box-decoration-break:clone; -webkit-box-decoration-break:clone;}
.hl2{background:var(--accent2); color:var(--ink); padding:0 8px; box-decoration-break:clone; -webkit-box-decoration-break:clone;}

.eyebrow{
  font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.07em; border:2px solid var(--line); display:inline-flex; align-items:center; gap:8px;
  padding:6px 14px; margin:0 0 24px; background:var(--surface);
}
.eyebrow .dot{width:7px; height:7px; background:var(--accent); flex:none;}

/* ---------------- buttons ---------------- */
.btn{
  font-family:"JetBrains Mono",monospace; font-size:13.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:0.04em; padding:15px 28px; display:inline-flex; align-items:center; gap:10px;
  border:3px solid var(--line); cursor:pointer; text-decoration:none; white-space:nowrap;
  box-shadow:6px 6px 0 var(--shadow-ink); transition:transform .12s, box-shadow .12s; background:var(--surface); color:var(--ink);
}
.btn:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--shadow-ink);}
.btn:active{transform:translate(0,0); box-shadow:2px 2px 0 var(--shadow-ink);}
.btn-primary{background:var(--ink); color:var(--bg); border-color:var(--line);}
.btn-accent{background:var(--accent); color:#fff; border-color:var(--line);}
.btn-block{width:100%; justify-content:center;}

/* ---------------- nav ---------------- */
.site-nav{
  position:sticky; top:0; z-index:80; background:var(--bg);
  border-bottom:3px solid var(--line);
}
.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-block:14px; flex-wrap:wrap;}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
.brand img{height:32px; width:auto;}
.brand-text{font-family:"Unbounded",sans-serif; font-weight:800; font-size:16px; letter-spacing:-0.01em; text-transform:uppercase; white-space:nowrap;}
.brand-text .w1{color:var(--ink);}
.brand-text .w2{color:var(--accent);}
.footer-brand img{height:34px; width:auto;}
.nav-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap;}
.nav-links a{
  font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.04em; text-decoration:none; padding:9px 13px; border:2px solid transparent;
}
.nav-links a:hover, .nav-links a[aria-current="page"]{border-color:var(--line); background:var(--surface);}
.nav-right{display:flex; align-items:center; gap:10px;}
.lang-toggle{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:700; border:2px solid var(--line);
  padding:6px 10px; display:inline-flex; gap:6px;
}
.lang-toggle span{opacity:.4;}
.lang-toggle span.on{opacity:1; text-decoration:underline;}
.nav-cta{font-size:12px; padding:10px 16px; box-shadow:4px 4px 0 var(--shadow-ink);}
.nav-cta:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--shadow-ink);}

/* nav-menu is a no-op wrapper on desktop so nav-links/nav-right stay direct flex items of .wrap */
.nav-menu{display:contents;}
.nav-toggle-input{display:none;}
.nav-toggle-btn{
  display:none; flex-direction:column; justify-content:center; align-items:center; gap:5px;
  width:40px; height:40px; border:2px solid var(--line); cursor:pointer; flex:none; background:var(--surface);
}
.nav-toggle-btn span{display:block; width:18px; height:2px; background:var(--ink);}
.site-nav-overlay .nav-toggle-btn{border-color:#FFF9E8; background:rgba(255,249,232,.08);}
.site-nav-overlay .nav-toggle-btn span{background:#FFF9E8;}

/* ---------------- sections ---------------- */
section{padding:76px 0;}
section.tight{padding:52px 0;}
.section-head{max-width:640px; margin:0 0 44px;}
.divider{height:3px; background:var(--line); border:none; margin:0;}

/* ---------------- grids & cards ---------------- */
.grid{display:grid; gap:0; border:3px solid var(--line);}
.grid.cols-2{grid-template-columns:repeat(2,1fr);}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid .cell{padding:26px; border-right:3px solid var(--line); border-bottom:3px solid var(--line);}
.grid .cell:nth-last-child(-n+2){border-bottom:none;}
.grid.cols-3 .cell:nth-child(3n), .grid.cols-4 .cell:nth-child(4n){border-right:none;}
.grid.cols-2 .cell:nth-child(2n){border-right:none;}
.grid.cols-1{grid-template-columns:1fr;}
.grid.cols-1 .cell{border-right:none;}
.grid.cols-1 .cell:last-child, .grid.cols-3 .cell:nth-last-child(-n+3), .grid.cols-4 .cell:nth-last-child(-n+4){border-bottom:none;}

.card{
  background:var(--surface); border:3px solid var(--line); padding:26px;
  box-shadow:7px 7px 0 var(--shadow-ink); transition:transform .12s, box-shadow .12s;
}
.card:hover{transform:translate(-3px,-3px); box-shadow:10px 10px 0 var(--shadow-ink);}
.card .icon{font-size:26px; margin-bottom:14px; display:block;}
.card h3{margin-bottom:10px;}
.card p{font-family:"JetBrains Mono",monospace; font-size:13.5px; color:var(--soft); margin:0;}

.stat .k{font-family:"JetBrains Mono",monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--soft); margin-bottom:8px;}
.stat .v{font-size:30px; font-weight:800;}

/* corridor boxes (China / Pakistan) */
.corridor{border:3px solid var(--line); padding:30px; background:var(--surface);}
.corridor.china{box-shadow:8px 8px 0 var(--accent);}
.corridor.pakistan{box-shadow:8px 8px 0 var(--accent3);}
.corridor .tag{
  font-family:"JetBrains Mono",monospace; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:5px 10px; display:inline-block; margin-bottom:16px; color:#fff;
}
.corridor.china .tag{background:var(--accent);}
.corridor.pakistan .tag{background:var(--accent3);}
.corridor ul{margin:14px 0 0; padding:0; list-style:none; font-family:"JetBrains Mono",monospace; font-size:13px; line-height:2.1;}
.corridor ul li:before{content:"→ "; opacity:.5;}

/* tier / spec blocks */
.tiers{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:3px solid var(--line);}
.tier{padding:24px; border-right:3px solid var(--line); background:var(--surface);}
.tier:last-child{border-right:none;}
.tier.mid{background:var(--ink); color:var(--bg);}
.tier .name{font-family:"JetBrains Mono",monospace; font-size:11px; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px;}
.tier .qty{font-size:24px; font-weight:800; margin-bottom:12px;}
.tier ul{margin:0; padding:0; list-style:none; font-family:"JetBrains Mono",monospace; font-size:12px; line-height:2;}

/* testimonials */
.testi{border:3px solid var(--line); background:var(--surface); padding:24px; box-shadow:6px 6px 0 var(--shadow-ink);}
.testi p{font-family:"JetBrains Mono",monospace; font-size:14px; margin:0 0 14px;}
.testi .who{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--soft);}

/* blog */
.post{border:3px solid var(--line); background:var(--surface); padding:24px; box-shadow:6px 6px 0 var(--shadow-ink); transition:transform .12s, box-shadow .12s; text-decoration:none; color:var(--ink); display:block;}
.post:hover{transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--shadow-ink);}
.post .cat{font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:10px;}
.post h3{margin-bottom:10px;}
.post .meta{font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--soft); margin-top:14px;}
.post .excerpt{font-family:"JetBrains Mono",monospace; font-size:13.5px; color:var(--soft); margin:0 0 4px; line-height:1.6;}

/* forms */
.field{margin-bottom:20px;}
.field label{display:block; font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;}
.field input, .field select, .field textarea{
  width:100%; border:3px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:"JetBrains Mono",monospace; font-size:14px; padding:13px 14px; outline:none;
}
.field input:focus, .field select:focus, .field textarea:focus{box-shadow:4px 4px 0 var(--accent);}
.field textarea{resize:vertical; min-height:110px;}

/* footer */
footer{border-top:3px solid var(--line); padding:56px 0 40px; margin-top:0;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:36px;}
.foot-grid h4{font-family:"JetBrains Mono",monospace; font-size:12px; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; color:var(--soft);}
.foot-grid ul{list-style:none; margin:0; padding:0; font-family:"JetBrains Mono",monospace; font-size:13px; line-height:2.3;}
.foot-grid a{text-decoration:none;}
.foot-grid a:hover{text-decoration:underline;}
.foot-bottom{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:44px; padding-top:24px; border-top:1px solid var(--line); font-family:"JetBrains Mono",monospace; font-size:11.5px; color:var(--soft);}

/* misc */
.tag-row{display:flex; gap:8px; flex-wrap:wrap;}
.pill{font-family:"JetBrains Mono",monospace; font-size:11.5px; border:2px solid var(--line); padding:6px 12px; background:var(--surface);}
table{width:100%; border-collapse:collapse; border:3px solid var(--line); font-family:"JetBrains Mono",monospace; font-size:13px;}
table th, table td{border:2px solid var(--line); padding:12px 14px; text-align:left; vertical-align:top;}
table th{background:var(--ink); color:var(--bg); text-transform:uppercase; font-size:11.5px; letter-spacing:.05em;}

/* hero */
.hero{padding:60px 0 64px;}
.hero-grid{display:grid; grid-template-columns:1.15fr 0.85fr; gap:52px; align-items:center;}
.hero-grid img{width:100%; height:auto;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap; margin-top:30px;}

/* numbered step strip */
.steps{display:flex; flex-wrap:wrap; border:3px solid var(--line); background:var(--surface);}
.step{flex:1 1 170px; padding:22px 20px; border-right:3px solid var(--line); position:relative;}
.step:last-child{border-right:none;}
.step .num{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--soft); margin-bottom:12px;}
.step .label{font-weight:700; font-size:14px; text-transform:uppercase; letter-spacing:.01em; line-height:1.3;}

/* two-column split (contact form + info) */
.split{display:grid; grid-template-columns:1.2fr 0.8fr; gap:44px; align-items:start;}
.info-stack{display:flex; flex-direction:column; gap:18px;}
.info-stack .card h3{font-size:15px; margin-bottom:8px;}
.info-stack .card a{color:var(--accent); text-decoration:none; font-family:"JetBrains Mono",monospace; font-size:13.5px;}
.info-stack .card a:hover{text-decoration:underline;}

/* cta banner */
.cta-banner{background:var(--ink); color:var(--bg); border-top:3px solid var(--line); border-bottom:3px solid var(--line);}
.cta-banner h2{color:var(--bg);}
.cta-banner p.lede{color:#cfc9b4; border-left-color:var(--bg);}
.cta-banner .btn-primary{background:var(--bg); color:var(--ink); box-shadow:6px 6px 0 var(--accent);}
.cta-banner .btn-primary:hover{box-shadow:9px 9px 0 var(--accent);}

.grid.cols-5{grid-template-columns:repeat(5,1fr);}
.grid.cols-5 .cell:nth-child(5n){border-right:none;}

/* hero — full-bleed background photo with overlaid text */
.hero-full{
  position:relative;
  background-image:url('hero-photo.jpg');
  background-size:cover;
  background-position:center 55%;
  min-height:78vh;
  display:flex;
  align-items:center;
  border-bottom:3px solid var(--line);
  overflow:hidden;
}
.hero-full-scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(14,13,10,.93) 0%, rgba(14,13,10,.78) 34%, rgba(14,13,10,.28) 60%, rgba(14,13,10,0) 78%);
}
.hero-full > .wrap{position:relative; z-index:1; padding-block:72px;}
.hero-full-content{max-width:640px;}
.hero-full-content .eyebrow{background:rgba(255,249,232,.06); border-color:#FFF9E8; color:#FFF9E8;}
.hero-full-content .eyebrow .dot{background:var(--accent);}
.hero-full-content h1{color:#FFF9E8;}
.hero-full-content .lede{color:#E4DFC9; border-left-color:#FFF9E8;}
.btn-ghost-light{background:transparent; border-color:#FFF9E8; color:#FFF9E8; box-shadow:6px 6px 0 rgba(255,249,232,.35);}
.btn-ghost-light:hover{box-shadow:9px 9px 0 rgba(255,249,232,.35);}
@media (max-width:760px){
  .hero-full{min-height:640px; align-items:flex-end;}
  .hero-full-scrim{background:linear-gradient(180deg, rgba(14,13,10,.25) 0%, rgba(14,13,10,.9) 52%, rgba(14,13,10,.97) 100%);}
  .hero-full > .wrap{padding-block:0 40px;}
}

/* nav overlaid directly on the hero photo (home page only) */
.site-nav-overlay{
  position:absolute; inset-inline:0; top:0; z-index:30;
  background:transparent; border-bottom:1px solid rgba(255,249,232,.22);
}
.site-nav-overlay .brand-text .w1{color:#FFF9E8;}
.site-nav-overlay .nav-links a{color:#FFF9E8;}
.site-nav-overlay .nav-links a:hover, .site-nav-overlay .nav-links a[aria-current="page"]{border-color:#FFF9E8; background:rgba(255,249,232,.12);}
.site-nav-overlay .lang-toggle{border-color:#FFF9E8; color:#FFF9E8;}

/* stats block sitting on the hero photo, below the hero text */
.hero-full-stats{margin-top:52px; border-color:rgba(255,249,232,.35);}
.hero-full-stats .cell{border-color:rgba(255,249,232,.28); background:rgba(14,13,10,.42);}
.hero-full-stats .stat .k{color:#CFC9B4;}
.hero-full-stats .stat .v{color:#FFF9E8;}
@media (max-width:760px){
  .hero-full-stats{margin-top:32px;}
  /* overlay nav doesn't work once links wrap to multiple lines — fall back to a normal solid nav */
  .site-nav-overlay{position:sticky; background:var(--bg); border-bottom:3px solid var(--line);}
  .site-nav-overlay .brand-text .w1{color:var(--ink);}
  .site-nav-overlay .nav-links a{color:var(--ink);}
  .site-nav-overlay .nav-links a:hover, .site-nav-overlay .nav-links a[aria-current="page"]{border-color:var(--line); background:var(--surface);}
  .site-nav-overlay .lang-toggle{border-color:var(--line); color:var(--ink);}
  .site-nav-overlay .nav-toggle-btn{border-color:var(--line); background:var(--surface);}
  .site-nav-overlay .nav-toggle-btn span{background:var(--ink);}

  /* collapse the nav into a hamburger — avoids the links wrapping across 2-3 messy rows */
  .site-nav .wrap{flex-wrap:nowrap; position:relative;}
  .brand-text{font-size:14.5px;}
  .brand img{height:28px;}
  .nav-toggle-btn{display:flex;}
  .nav-menu{display:none;}
  .nav-toggle-input:checked ~ .nav-menu{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:absolute; top:100%; left:-24px; right:-24px;
    background:var(--bg); border-top:1px solid var(--line); border-bottom:3px solid var(--line);
    padding:6px 24px 22px; z-index:50; box-shadow:0 10px 0 -6px transparent;
  }
  .nav-toggle-input:checked ~ .nav-menu .nav-links{flex-direction:column; align-items:stretch; gap:0; width:100%;}
  .nav-toggle-input:checked ~ .nav-menu .nav-links a{width:100%; padding:15px 4px; border:none; border-bottom:1px solid rgba(120,110,80,.2);}
  .nav-toggle-input:checked ~ .nav-menu .nav-right{flex-direction:column; align-items:stretch; gap:12px; width:100%; margin-top:16px;}
  .nav-toggle-input:checked ~ .nav-menu .nav-cta{width:100%; justify-content:center;}
  .nav-toggle-input:checked ~ .nav-menu .lang-toggle{align-self:flex-start;}
}

/* category / product tiles */
.icon-tile{width:64px; height:64px; display:flex; align-items:center; justify-content:center; font-size:30px; border:3px solid var(--line); background:var(--bg); margin-bottom:14px;}
.icon-tile.lg{width:100%; height:104px; font-size:50px; margin-bottom:16px;}
.trend-tag{display:inline-block; font-family:"JetBrains Mono",monospace; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:var(--accent2); color:#141200; padding:3px 9px; margin-bottom:12px;}
.checks-list{font-family:"JetBrains Mono",monospace; font-size:13.5px; line-height:2.3; list-style:none; margin:0; padding:0;}
.checks-list li:before{content:"\2713  "; color:var(--accent); font-weight:700;}
.breadcrumb{font-family:"JetBrains Mono",monospace; font-size:12px; color:var(--soft); margin:0 0 20px;}
.breadcrumb a{color:var(--soft); text-decoration:none;}
.breadcrumb a:hover{text-decoration:underline;}

/* free-floating card grids (gap, no shared borders — cards carry their own) */
.cards{display:grid; gap:24px;}
.cards.c2{grid-template-columns:1fr 1fr;}
.cards.c3{grid-template-columns:repeat(3,1fr);}
.cards.c4{grid-template-columns:repeat(4,1fr);}

@media (max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;}
  .grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .grid.cols-4 .cell:nth-child(4n){border-right:3px solid var(--line);}
  .grid.cols-4 .cell:nth-child(2n){border-right:none;}
  .grid.cols-4 .cell:nth-last-child(-n+2){border-bottom:none;}
  .grid.cols-5{grid-template-columns:repeat(2,1fr);}
  .grid.cols-5 .cell:nth-child(5n){border-right:3px solid var(--line);}
  .grid.cols-5 .cell:nth-child(2n){border-right:none;}
  .hero-grid{grid-template-columns:1fr; gap:32px;}
  .hero-grid .hero-art{order:-1; max-width:280px; margin:0 auto;}
  .split{grid-template-columns:1fr;}
  .cards.c3, .cards.c4{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .grid.cols-2, .grid.cols-3{grid-template-columns:1fr;}
  .grid .cell{border-right:none !important; border-bottom:3px solid var(--line) !important;}
  .grid .cell:last-child{border-bottom:none !important;}
  .grid.cols-5{grid-template-columns:1fr;}
  .tiers{grid-template-columns:1fr;}
  .tier{border-right:none; border-bottom:3px solid var(--line);}
  .tier:last-child{border-bottom:none;}
  .foot-grid{grid-template-columns:1fr; gap:32px;}
  section{padding:52px 0;}
  .step{border-right:none; border-bottom:3px solid var(--line);}
  .step:last-child{border-bottom:none;}
  .cards.c2, .cards.c3, .cards.c4{grid-template-columns:1fr;}
}

/* ============================================================
   ARTICLE / BLOG — prose body, FAQ accordion, article meta
   ============================================================ */
.article-head{border-bottom:3px solid var(--line); padding-bottom:32px;}
.article-meta{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:18px;}
.article-meta .cat-badge{
  font-family:"JetBrains Mono",monospace; font-size:11px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; background:var(--accent); color:#fff; padding:5px 10px;
}
.article-meta .mono{font-size:12.5px; color:var(--soft);}

.prose h2{font-size:clamp(22px,3.4vw,32px); text-transform:none; margin:40px 0 16px;}
.prose h3{font-size:clamp(18px,2.6vw,22px); text-transform:none; margin:28px 0 12px;}
.prose p{font-size:16px;}
.prose ul, .prose ol{margin:0 0 16px; padding-left:22px; line-height:1.8;}
.prose li{margin-bottom:6px;}
.prose a{color:var(--accent); text-decoration:underline; text-decoration-thickness:1.5px; text-underline-offset:2px;}
.prose strong{font-weight:700;}
.prose table{margin:20px 0;}
.prose > h1:first-child{margin-bottom:24px;}

.faq-list{border:3px solid var(--line); background:var(--surface);}
.faq-item{border-bottom:3px solid var(--line);}
.faq-item:last-child{border-bottom:none;}
.faq-item summary{
  cursor:pointer; list-style:none; padding:20px 24px; font-weight:700;
  font-family:"Unbounded",sans-serif; font-size:15px; display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:22px; font-weight:800; flex:none; color:var(--accent);}
.faq-item[open] summary::after{content:"\2212";}
.faq-item .faq-a{padding:0 24px 22px;}
.faq-item .faq-a p{margin:0; color:var(--soft); font-family:"JetBrains Mono",monospace; font-size:14px; line-height:1.75;}

.related-articles{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border:3px solid var(--line);}
.related-articles .post{border:none; border-right:3px solid var(--line); box-shadow:none; grid-column:span 1;}
.related-articles .post:last-child{border-right:none;}
.related-articles .post:hover{transform:none; box-shadow:none; background:var(--bg);}

.blog-filter{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:36px;}
.blog-filter a{
  font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; padding:9px 16px; border:2px solid var(--line); text-decoration:none; color:var(--ink);
}
.blog-filter a.on{background:var(--ink); color:var(--bg);}

@media (max-width:760px){
  .related-articles{grid-template-columns:1fr;}
  .related-articles .post{border-right:none; border-bottom:3px solid var(--line);}
  .related-articles .post:last-child{border-bottom:none;}
  .article-meta{gap:10px;}
}