:root{
    --paper:#F6F2E9;
    --paper-dim:#ECE5D2;
    --ink:#141220;
    --ink-2:#1D1A2E;
    --ink-soft:#9A96AC;
    --ink-soft-2:#5B5768;
    --line:#DDD5C0;
    --line-dark:rgba(255,255,255,.1);
    --brand:#332F7A;
    --meter:#E0961A;
    --meter-soft:#FBF0DC;
    --thozhil:#18A57C;
    --thozhil-soft:#E4F3EC;
    --q:#E0507C;
    --q-soft:#FBE7ED;
    --radius:16px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

  /* film grain, everywhere, subtle */
  body::before{
    content:"";
    position:fixed; inset:0; z-index:9999; pointer-events:none;
    opacity:.035; mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }

  h1,h2,h3,.display-serif{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-0.01em; }
  .mono{font-family:'IBM Plex Mono',monospace;}
  .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; }
  a{color:inherit; text-decoration:none;}
  .container-narrow{max-width:1180px; margin:0 auto; padding:0 1.25rem;}

  [data-reveal]{opacity:0; transform:translateY(22px); transition:opacity .7s ease, transform .7s ease;}
  [data-reveal].in-view{opacity:1; transform:translateY(0);}

  /* ============ NAV ============ */
  .navbar-sartho{
    background:rgba(20,18,32,.78);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line-dark);
    padding:.85rem 0;
  }
  .brand-mark{ font-family:'Fraunces',serif; font-weight:700; font-size:1.3rem; color:var(--paper); }
  .brand-mark .dot{color:var(--meter);}
  .nav-links a{ font-size:.9rem; color:var(--ink-soft); margin:0 .9rem; transition:color .15s ease;}
  .nav-links a:hover{color:var(--paper);}
  .btn-glow{
    background:var(--accent, var(--meter)); color:var(--accent-on, var(--ink)); border-radius:100px;
    padding:.55rem 1.3rem; font-size:.88rem; font-weight:700; border:none;
    display:inline-block; transition:transform .15s ease, box-shadow .15s ease;
    box-shadow:0 0 0 0 transparent;
  }
  .btn-glow:hover{transform:translateY(-1px); box-shadow:0 8px 24px -6px var(--accent-dark, rgba(224,150,26,.6));}
  .btn-outline-paper{
    border:1px solid rgba(246,242,233,.35); color:var(--paper); border-radius:100px;
    padding:.55rem 1.3rem; font-size:.88rem; font-weight:600; display:inline-block; transition:all .15s ease;
  }
  .btn-outline-paper:hover{background:var(--paper); color:var(--ink);}
  .btn-ink{
    background:var(--ink); color:var(--paper); border-radius:100px; padding:.6rem 1.4rem;
    font-size:.9rem; font-weight:700; display:inline-block; transition:transform .15s ease;
  }
  .btn-ink:hover{transform:translateY(-1px); color:var(--paper);}

  /* ============ HERO — instrument panel ============ */
  .hero{
    background:
      radial-gradient(ellipse 900px 500px at 78% -10%, rgba(224,150,26,.16), transparent 60%),
      radial-gradient(ellipse 700px 500px at 5% 90%, rgba(24,165,124,.13), transparent 60%),
      var(--ink);
    color:var(--paper);
    padding:9.5rem 0 5rem;
    position:relative;
  }
  .hero .eyebrow{color:var(--meter);}
  .hero h1{
    font-size:clamp(2.6rem, 6vw, 5rem); line-height:.98; margin:1rem 0 1.4rem;
    color:var(--paper);
  }
  .hero h1 em{font-style:italic; color:var(--accent, var(--meter));}
  .hero p.lead-text{font-size:1.12rem; color:var(--ink-soft); max-width:460px; margin-bottom:2rem;}

  /* dial gauges strip */
  .dial-row{display:flex; gap:1.5rem; flex-wrap:wrap; margin-top:3.5rem;}
  .dial{ text-align:center; width:120px; }
  .dial svg{display:block; margin:0 auto;}
  .dial .dval{font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1rem; margin-top:.5rem; color:var(--paper);}
  .dial .dlabel{font-family:'IBM Plex Mono',monospace; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); margin-top:.15rem;}

  /* live ticking readout panel */
  .readout{
    background:var(--ink-2);
    border:1px solid var(--line-dark);
    border-radius:20px;
    padding:1.7rem;
    box-shadow:0 30px 70px -25px rgba(0,0,0,.6);
  }
  .readout-head{ display:flex; justify-content:space-between; align-items:center; padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid var(--line-dark);}
  .readout-head span{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft);}
  .live-dot{width:7px; height:7px; border-radius:50%; background:#5CE08A; display:inline-block; margin-right:.4rem; animation:pulse 1.5s infinite;}
  @keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(92,224,138,.5);} 50%{opacity:.3;}}
  .readout-row{display:flex; justify-content:space-between; align-items:center; padding:.9rem 0; border-bottom:1px solid var(--line-dark);}
  .readout-row:last-child{border-bottom:none;}
  .rtag{font-family:'IBM Plex Mono',monospace; font-size:.65rem; font-weight:700; letter-spacing:.05em; padding:.18rem .5rem; border-radius:5px; margin-right:.6rem;}
  .rtag-meter{background:var(--meter); color:#2A1900;}
  .rtag-thozhil{background:var(--thozhil); color:#062017;}
  .rtag-q{background:var(--q); color:#2A0013;}
  .rlabel{font-size:.85rem; color:#C9C6D6;}
  .rvalue{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.15rem; color:var(--paper); transition:transform .25s ease;}
  .rvalue.tick{transform:scale(1.12); color:var(--meter);}

  /* ticker strip */
  .ticker-strip{ background:var(--accent, var(--meter)); color:var(--accent-on, var(--ink)); overflow:hidden; white-space:nowrap; padding:.65rem 0; }
  .ticker-track{ display:inline-flex; animation:scrollTicker 26s linear infinite; }
  .ticker-track span{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:0 1.6rem; }
  @keyframes scrollTicker{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

  /* ============ SECTIONS ============ */
  .section{padding:5.5rem 0;}
  .section-dark{ background:var(--ink); color:var(--paper); }
  .section-dark .ink-soft{color:var(--ink-soft);}
  .section-head{max-width:620px; margin-bottom:3rem;}
  .section-head h2{font-size:clamp(1.7rem, 3vw, 2.5rem);}
  .eyebrow-dim{color:var(--ink-soft-2);}
  .section-dark .eyebrow{color:var(--meter);}

  /* pull quote */
  .pull-quote{ font-family:'Fraunces',serif; font-size:clamp(1.5rem,3vw,2.35rem); line-height:1.35; font-weight:500; }
  .pull-quote .hl{color:var(--meter); font-style:italic;}
  .pull-quote .hl2{color:var(--thozhil); font-style:italic;}
  .pull-quote .hl3{color:var(--q); font-style:italic;}

  /* product cards w/ gauge */
  .product-card{
    background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--radius);
    padding:2.1rem; height:100%; position:relative; overflow:hidden;
    transition:transform .2s ease, border-color .2s ease;
  }
  .product-card:hover{ transform:translateY(-6px); }
  .card-meter:hover{border-color:var(--meter);}
  .card-thozhil:hover{border-color:var(--thozhil);}
  .card-q:hover{border-color:var(--q);}
  .product-card h3{font-size:1.4rem; margin:1.1rem 0 .4rem; color:var(--paper);}
  .product-card .for{ font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft);}
  .product-card p.desc{color:var(--ink-soft); font-size:.94rem; margin:.8rem 0 1.3rem;}
  .chip-row{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.5rem;}
  .chip{ font-size:.75rem; padding:.28rem .65rem; border-radius:100px; background:rgba(255,255,255,.06); color:var(--ink-soft);}
  .product-link{font-weight:700; font-size:.92rem; display:inline-flex; align-items:center; gap:.4rem;}
  .product-link svg{transition:transform .15s ease;}
  .product-card:hover .product-link svg{transform:translateX(4px);}

  /* persona */
  .persona-card{
    background:var(--paper-dim); border-radius:var(--radius); padding:2rem 1.8rem; height:100%;
    border:1px solid transparent; transition:all .2s ease; position:relative;
  }
  .persona-card:hover{ background:var(--ink); border-color:var(--ink); }
  .persona-card:hover .persona-q, .persona-card:hover .persona-arrow{color:var(--paper);}
  .persona-q{font-family:'Fraunces',serif; font-size:1.2rem; margin-bottom:.7rem; transition:color .2s ease;}
  .persona-arrow{font-family:'IBM Plex Mono',monospace; font-size:.85rem; color:var(--ink-soft-2); transition:color .2s ease;}
  .persona-result{font-weight:800;}

  /* value list */
  .value-item{padding:1.5rem 0; border-bottom:1px solid var(--line-dark); display:flex; gap:1.2rem;}
  .value-item:last-child{border-bottom:none;}
  .value-num{font-family:'IBM Plex Mono',monospace; font-size:.85rem; color:var(--meter); padding-top:.15rem;}
  .value-item h4{font-family:'Fraunces',serif; font-size:1.15rem; margin-bottom:.35rem; color:var(--paper);}
  .value-item p{color:var(--ink-soft); font-size:.92rem; margin:0;}

  /* problem blocks */
  .problem-block{ background:#fff; border-radius:var(--radius); padding:1.6rem; height:100%; border-top:4px solid var(--line);}
  .problem-block.pb-meter{border-top-color:var(--meter);}
  .problem-block.pb-thozhil{border-top-color:var(--thozhil);}
  .problem-block.pb-q{border-top-color:var(--q);}
  .problem-block .ptag{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft-2);}
  .problem-block p{margin:.6rem 0 0; font-size:1rem;}

  /* flow */
  .flow-strip{ display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;}
  .flow-step{ flex:1 1 220px; padding:1.8rem 1.5rem; border-right:1px solid var(--line);}
  .flow-step:last-child{border-right:none;}
  .flow-step .fk{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--meter); letter-spacing:.08em; font-weight:700;}
  .flow-step h5{font-family:'Fraunces',serif; font-size:1.1rem; margin:.5rem 0 .35rem;}
  .flow-step p{font-size:.87rem; color:var(--ink-soft-2); margin:0;}

  /* blog */
  .blog-card{border-radius:var(--radius); overflow:hidden; background:#fff; border:1px solid var(--line); height:100%; transition:transform .2s ease;}
  .blog-card:hover{transform:translateY(-4px);}
  .blog-thumb{height:150px; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:.9rem;}
  .blog-body{padding:1.5rem;}
  .blog-body .cat{font-family:'IBM Plex Mono',monospace; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;}
  .blog-body h5{font-family:'Fraunces',serif; font-size:1.1rem; margin:.5rem 0;}
  .blog-body p{font-size:.88rem; color:var(--ink-soft-2); margin:0;}

  /* faq */
  .accordion-item{background:transparent; border:none; border-bottom:1px solid var(--line);}
  .accordion-button{ background:transparent !important; font-family:'Fraunces',serif; font-weight:600; font-size:1.08rem; color:var(--ink) !important; padding:1.4rem 0; box-shadow:none !important;}
  .accordion-button::after{filter:none;}
  .accordion-body{padding:0 0 1.4rem; color:var(--ink-soft-2); font-size:.96rem;}

  /* final cta */
  .final-cta{
    background:var(--ink); border-radius:24px; padding:4rem 2.5rem; color:var(--paper); text-align:center; position:relative; overflow:hidden;
  }
  .final-cta::before{
    content:""; position:absolute; inset:0;
    background:radial-gradient(ellipse 600px 300px at 20% 0%, rgba(224,150,26,.2), transparent 60%),
               radial-gradient(ellipse 600px 300px at 80% 100%, rgba(24,165,124,.18), transparent 60%);
  }
  .final-cta > *{position:relative; z-index:1;}
  .final-cta h2{color:var(--paper); font-size:clamp(1.7rem,3.2vw,2.5rem);}
  .final-cta p{color:var(--ink-soft); max-width:520px; margin:0 auto 2rem;}

  footer{background:var(--ink); border-top:1px solid var(--line-dark); padding:3.5rem 0 2rem; font-size:.88rem; color:var(--ink-soft);}
  footer h6{font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--paper); margin-bottom:1rem;}
  footer a{color:var(--ink-soft); display:block; margin-bottom:.6rem; transition:color .15s ease;}
  footer a:hover{color:var(--paper);}

  @media (max-width:991px){ .nav-links{display:none;} }

/* ========== WordPress / Theme extras ========== */
.wp-block-image img, .aligncenter { max-width: 100%; height: auto; }
.screen-reader-text { border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; word-wrap:normal !important; }
.admin-bar .navbar-sartho { top: 32px; }
@media (max-width: 782px) { .admin-bar .navbar-sartho { top: 46px; } }

.hero-with-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero-overlay {
  background: linear-gradient(135deg, rgba(20,18,32,.85) 0%, rgba(20,18,32,.7) 100%);
  position: absolute; inset: 0; z-index: 0;
}
.hero .container-narrow { position: relative; z-index: 1; }

.logo-img { height: 36px; width: auto; }
.brand-mark img { height: 32px; margin-right: 8px; vertical-align: middle; }

/* Product card logos: works for square app icons AND wide/long logos */
.product-logo-wrap{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 56px;
  max-height: 72px;
  margin-bottom: .85rem;
}
.product-app-icon{
  max-height: 56px;
  max-width: 100%;
  width: auto;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
  object-position: left center;
  display: block;
}
/* Square-ish icons still look good */
.product-app-icon[src*=""],
.product-logo-wrap img{
  max-height: 56px;
}

/* Mobile nav toggle */
.nav-toggle {
  background: none; border: 1px solid rgba(246,242,233,.35); color: var(--paper);
  border-radius: 8px; padding: .4rem .7rem; font-size: 1.1rem; cursor: pointer;
  display: none;
}
@media (max-width: 991px) {
  .nav-toggle { display: block; }
  .nav-links.open { display: flex !important; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0;
    background: rgba(20,18,32,.95); padding: 1rem; gap: .5rem; border-bottom: 1px solid var(--line-dark); }
  .nav-links.open a { margin: .4rem 0; }
}

/* Hero image support */
.hero-bg-img {
  position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: .25; z-index: 0;
}

/* CSV notice in admin is handled in PHP */

/* ========== Product page extras (Meter / Thozhil / Q) ========== */
.eyebrow-accent{color:var(--accent, var(--meter));}
.brand-mark .prod{color:var(--accent, var(--meter)); font-weight:600;}
.pull-quote{font-family:'Fraunces',serif; font-size:clamp(1.4rem,2.6vw,2.1rem); line-height:1.4; font-weight:500;}
.pull-quote .hl{color:var(--accent, var(--meter)); font-style:italic;}

.feature-card{
  background:var(--ink-2); border:1px solid var(--line-dark); border-radius:var(--radius);
  padding:1.8rem; height:100%; transition:transform .2s ease, border-color .2s ease;
}
.feature-card:hover{transform:translateY(-5px); border-color:var(--accent, var(--meter));}
.feature-icon{
  width:44px; height:44px; border-radius:12px; background:var(--accent-soft, rgba(224,150,26,.18));
  color:var(--accent-dark, #B5760A); display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  font-family:'Fraunces',serif; font-weight:700; margin-bottom:1.1rem; font-size:1.1rem;
}
.feature-card h4{font-family:'Fraunces',serif; font-size:1.1rem; color:var(--paper); margin-bottom:.5rem;}
.feature-card p{font-size:.88rem; color:var(--ink-soft); margin:0;}

.phone-frame{
  background:var(--ink-2); border:1px solid var(--line-dark); border-radius:26px; padding:1.6rem;
  max-width:380px; margin:0 auto; box-shadow:0 40px 80px -30px rgba(0,0,0,.55);
}
.phone-notch{width:60px; height:6px; background:var(--line-dark); border-radius:4px; margin:0 auto 1.2rem;}
.phone-stat{display:flex; justify-content:space-between; align-items:center; padding:.85rem 0; border-bottom:1px solid var(--line-dark);}
.phone-stat:last-child{border-bottom:none;}
.phone-stat .k{font-size:.85rem; color:var(--ink-soft);}
.phone-stat .v{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.1rem; color:var(--paper);}
.phone-stat .v.accent{color:var(--accent, var(--meter));}

.benefit-row{display:flex; gap:1rem; align-items:flex-start; margin-bottom:1.4rem;}
.benefit-check{
  width:26px; height:26px; border-radius:50%; background:var(--accent-soft, rgba(224,150,26,.18));
  color:var(--accent-dark, #B5760A); display:flex; align-items:center; justify-content:center;
  flex-shrink:0; font-size:.8rem; font-weight:700;
}

.usecase-chip{
  background:var(--paper-dim); border-radius:100px; padding:.6rem 1.3rem; font-size:.9rem; font-weight:600;
  display:inline-block; margin:.3rem; border:1px solid transparent; transition:all .15s ease;
}
.usecase-chip:hover{border-color:var(--accent, var(--meter)); color:var(--accent-dark, #B5760A); background:var(--accent-soft, rgba(224,150,26,.18));}

.readout-chip{
  display:inline-block; font-size:.65rem; font-weight:700; letter-spacing:.05em; padding:.15rem .5rem;
  border-radius:5px; background:var(--accent, var(--meter)); color:#12100B; margin-right:.5rem;
}

/* ========== Product page: full accent theming ========== */
/* Variables --accent, --accent-dark, --accent-soft, --accent-on set in header.php */

body.product-single .btn-glow{
  background: var(--accent) !important;
  color: var(--accent-on, #12100B) !important;
  box-shadow: 0 0 0 0 transparent;
}
body.product-single .btn-glow:hover{
  box-shadow: 0 10px 26px -8px var(--accent-dark) !important;
  color: var(--accent-on, #12100B) !important;
}

body.product-single .ticker-strip{
  background: var(--accent) !important;
  color: var(--accent-on, #12100B) !important;
}
body.product-single .ticker-track span{
  color: var(--accent-on, #12100B) !important;
}

body.product-single .navbar-sartho .btn-glow{
  background: var(--accent) !important;
  color: var(--accent-on, #12100B) !important;
}

body.product-single .hero h1 em,
body.product-single .pull-quote .hl,
body.product-single .eyebrow-accent,
body.product-single .brand-mark .prod,
body.product-single .phone-stat .v.accent,
body.product-single .rvalue.tick,
body.product-single .section-dark .eyebrow,
body.product-single .value-num{
  color: var(--accent) !important;
}

body.product-single .readout-chip{
  background: var(--accent) !important;
  color: var(--accent-on, #12100B) !important;
}

body.product-single .feature-card:hover{
  border-color: var(--accent) !important;
}
body.product-single .feature-icon{
  background: var(--accent-soft) !important;
  color: var(--accent-dark) !important;
}
body.product-single .benefit-check{
  background: var(--accent-soft) !important;
  color: var(--accent-dark) !important;
}
body.product-single .flow-step .fk{
  color: var(--accent-dark) !important;
}
body.product-single .usecase-chip:hover{
  border-color: var(--accent) !important;
  color: var(--accent-dark) !important;
  background: var(--accent-soft) !important;
}
body.product-single .problem-block{
  border-top-color: var(--accent) !important;
}
body.product-single .final-cta::before{
  background: radial-gradient(ellipse 600px 300px at 30% 10%, var(--accent-soft), transparent 60%) !important;
}
body.product-single .live-dot{
  background: var(--accent) !important;
  box-shadow: 0 0 0 0 var(--accent-soft);
}

/* Ensure chips readable on dark readout */
body.product-single .readout .readout-chip{
  background: var(--accent) !important;
  color: var(--accent-on, #12100B) !important;
  font-weight: 700;
}

.flow-strip{ display:flex; flex-wrap:wrap; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:#fff;}
.flow-step{ flex:1 1 200px; padding:1.8rem 1.5rem; border-right:1px solid var(--line); }
.flow-step:last-child{border-right:none;}
.flow-step .fk{font-family:'IBM Plex Mono',monospace; font-size:.7rem; color:var(--accent-dark, #B5760A); letter-spacing:.08em; font-weight:700;}
.flow-step h5{font-family:'Fraunces',serif; font-size:1.05rem; margin:.5rem 0 .35rem;}
.flow-step p{font-size:.86rem; color:var(--ink-soft-2); margin:0;}

/* Legal / content pages */
.entry-content h2{font-family:'Fraunces',serif; font-size:1.25rem; color:var(--ink); margin:2rem 0 .8rem;}
.entry-content p{margin-bottom:1rem;}
.entry-content ul{margin:0 0 1.2rem 1.2rem; padding:0;}
.entry-content li{margin-bottom:.45rem;}
.entry-content strong{color:var(--ink);}

.product-card:hover{border-color:var(--card-accent, var(--meter));}
.brand-mark .sep{opacity:.5;font-weight:400;}
.brand-mark .prod{color:var(--accent, var(--meter)); font-weight:600;}
.entry-content h2{font-family:'Fraunces',serif; font-size:1.25rem; color:var(--ink); margin:2rem 0 .8rem;}
.entry-content p{margin-bottom:1rem;}
.entry-content ul{margin:0 0 1.2rem 1.2rem;}
.entry-content li{margin-bottom:.45rem;}

/* ========== App screenshot gallery ========== */
.app-gallery{
  position: relative;
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.app-gallery__frame{
  background: transparent;
  border: none;
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 24px 50px -18px rgba(0,0,0,.35);
  overflow: hidden;
  line-height: 0;
}
.app-gallery__frame img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  object-fit: contain;
  vertical-align: middle;
}

/* fade-slide: relative height from active image, no huge empty min-height */
.app-gallery--fade-slide{
  min-height: 0;
}
.app-gallery--fade-slide .app-gallery__item{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,1,.36,1);
  pointer-events: none;
  z-index: 1;
}
.app-gallery--fade-slide .app-gallery__item.is-active{
  position: relative;
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
  z-index: 2;
}

/* stack */
.app-gallery--stack{
  min-height: 0;
  padding-bottom: 8%;
  display: block;
}
.app-gallery--stack .app-gallery__item{
  position: absolute;
  width: 82%;
  left: 9%;
  top: 0;
  transition: transform .45s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  opacity: .5;
  z-index: 1;
}
.app-gallery--stack .app-gallery__item:nth-child(1){ transform: translate(-12px, 8px) rotate(-3deg); }
.app-gallery--stack .app-gallery__item:nth-child(2){ transform: translate(8px, -4px) rotate(2deg); z-index: 2; opacity: .75; }
.app-gallery--stack .app-gallery__item.is-active,
.app-gallery--stack .app-gallery__item:last-child{
  position: relative;
  z-index: 5;
  opacity: 1;
  width: 100%;
  left: 0;
  transform: none;
}

.app-gallery--carousel{
  overflow: hidden;
  min-height: 0;
  max-width: 100%;
}
.app-gallery--carousel .app-gallery__item{
  flex: 0 0 100%;
  position: relative;
  opacity: 1;
}

.app-gallery__dots{
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: .85rem;
  position: relative;
  z-index: 5;
}
.app-gallery__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(20,18,32,.25);
  cursor: pointer;
  transition: transform .2s ease, background .2s ease;
}
.app-gallery__dot.is-active{
  background: var(--accent, var(--meter));
  transform: scale(1.25);
}
body.product-single .app-gallery__dot.is-active{
  background: var(--accent);
}

.app-gallery .app-gallery__item.is-active .app-gallery__frame{
  animation: appFrameIn .55s cubic-bezier(.22,1,.36,1) both;
}
@keyframes appFrameIn{
  from{ opacity: 0; transform: translateY(16px) scale(.97); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 991px){
  .app-gallery, .app-gallery--fade-slide{ max-width: 320px; min-height: 0; }
}

/* Tighter solution section spacing */
body.product-single #solution-heading + p,
body.product-single .section .section-head{ margin-bottom: 1.5rem; }



/* Stronger feature cards on product pages */
body.product-single .feature-icon{
  font-size: 1.15rem;
  font-weight: 700;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
body.product-single .feature-benefit{
  margin-top: .65rem;
  color: var(--accent) !important;
  font-size: .82rem;
  font-weight: 600;
}
body.product-single .feature-card{
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line-dark));
}
body.product-single .section-dark .eyebrow-accent,
body.product-single .section-dark .eyebrow{
  color: var(--accent) !important;
  opacity: 1;
}

/* Product page nav logo only */
.product-nav-logo{
  height: 36px !important;
  width: auto !important;
  max-width: 200px;
  border-radius: 8px;
  object-fit: contain;
  object-position: left center;
  display: block;
}


/* Less empty vertical space around product solution image */
body.product-single .section.section--solution,
body.product-single .section[style*="padding-top:1.5rem"]{
  padding-top: 2.5rem !important;
  padding-bottom: 3rem !important;
}
body.product-single .phone-frame{
  max-width: 340px;
  padding: 1rem;
}


.product-card{
  border-color: color-mix(in srgb, var(--card-accent, transparent) 40%, var(--line-dark));
}


/* Solution section product logo (square or wide) */
.phone-logo-wrap{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 1rem;
  min-height: 48px;
  max-height: 72px;
}
.phone-logo{
  max-height: 56px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
  display: block;
}


/* SVG icons inside feature / benefit */
.feature-icon .sartho-icon,
.benefit-check .sartho-icon{
  display: block;
  stroke: currentColor;
  fill: none;
}
.benefit-check{
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.benefit-check .sartho-icon{
  width: 14px;
  height: 14px;
}

/* ========== Theme toggle button ========== */
.theme-toggle{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(246,242,233,.25);
  background: transparent; color: var(--paper);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.theme-toggle:hover{ background: rgba(255,255,255,.08); border-color: rgba(246,242,233,.45); }
.theme-toggle__icon{ display: none; line-height: 0; }
html.theme-dark .theme-toggle__icon--sun,
html[data-theme="dark"] .theme-toggle__icon--sun,
body.theme-dark .theme-toggle__icon--sun{ display: block; }
html.theme-light .theme-toggle__icon--moon,
html[data-theme="light"] .theme-toggle__icon--moon,
body.theme-light .theme-toggle__icon--moon{ display: block; }

/* ========== LIGHT THEME ========== */
html.theme-light,
html[data-theme="light"],
body.theme-light{
  --paper: #FFFFFF;
  --paper-dim: #F3F1EC;
  --ink: #141220;
  --ink-2: #F7F5F0;
  --ink-soft: #5B5768;
  --ink-soft-2: #7A7688;
  --line: #E5E0D4;
  --line-dark: rgba(20,18,32,.08);
}

html.theme-light body,
html[data-theme="light"] body,
body.theme-light{
  background: var(--paper);
  color: var(--ink);
}

/* Nav */
html.theme-light .navbar-sartho,
html[data-theme="light"] .navbar-sartho,
body.theme-light .navbar-sartho{
  background: rgba(255,255,255,.9);
  border-bottom: 1px solid var(--line);
}
html.theme-light .brand-mark,
html[data-theme="light"] .brand-mark,
body.theme-light .brand-mark{ color: var(--ink); }
html.theme-light .nav-links a,
html[data-theme="light"] .nav-links a,
body.theme-light .nav-links a{ color: var(--ink-soft-2); }
html.theme-light .nav-links a:hover,
html[data-theme="light"] .nav-links a:hover,
body.theme-light .nav-links a:hover{ color: var(--ink); }
html.theme-light .theme-toggle,
html[data-theme="light"] .theme-toggle,
body.theme-light .theme-toggle{
  border-color: var(--line);
  color: var(--ink);
}
html.theme-light .theme-toggle:hover,
html[data-theme="light"] .theme-toggle:hover,
body.theme-light .theme-toggle:hover{ background: var(--paper-dim); }
html.theme-light .nav-toggle,
html[data-theme="light"] .nav-toggle,
body.theme-light .nav-toggle{ color: var(--ink); }

/* Hero / dark sections become soft light panels */
html.theme-light .hero,
html[data-theme="light"] .hero,
body.theme-light .hero{
  background: linear-gradient(165deg, #F7F5F0 0%, #FFFFFF 55%, #F3F1EC 100%) !important;
  color: var(--ink);
}
html.theme-light .hero h1,
html[data-theme="light"] .hero h1,
body.theme-light .hero h1{ color: var(--ink); }
html.theme-light .hero p.lead-text,
html[data-theme="light"] .hero p.lead-text,
body.theme-light .hero p.lead-text{ color: var(--ink-soft); }
html.theme-light .eyebrow,
html[data-theme="light"] .eyebrow,
body.theme-light .eyebrow{ color: var(--accent, var(--meter)); }

html.theme-light .section-dark,
html[data-theme="light"] .section-dark,
body.theme-light .section-dark{
  background: #F3F1EC !important;
  color: var(--ink);
}
html.theme-light .section-dark h2,
html.theme-light .section-dark h3,
html.theme-light .section-dark h4,
html[data-theme="light"] .section-dark h2,
body.theme-light .section-dark h2,
body.theme-light .section-dark h3,
body.theme-light .section-dark h4{ color: var(--ink) !important; }

html.theme-light .feature-card,
html[data-theme="light"] .feature-card,
body.theme-light .feature-card{
  background: #FFFFFF;
  border-color: var(--line);
  color: var(--ink);
}
html.theme-light .feature-card h4,
html[data-theme="light"] .feature-card h4,
body.theme-light .feature-card h4{ color: var(--ink); }
html.theme-light .feature-card p,
html[data-theme="light"] .feature-card p,
body.theme-light .feature-card p{ color: var(--ink-soft); }

html.theme-light .product-card,
html[data-theme="light"] .product-card,
body.theme-light .product-card{
  background: #FFFFFF;
  border-color: var(--line);
}
html.theme-light .product-card h3,
html[data-theme="light"] .product-card h3,
body.theme-light .product-card h3{ color: var(--ink); }
html.theme-light .product-card p.desc,
html[data-theme="light"] .product-card p.desc,
body.theme-light .product-card p.desc{ color: var(--ink-soft); }

html.theme-light .readout,
html[data-theme="light"] .readout,
body.theme-light .readout{
  background: #FFFFFF;
  border-color: var(--line);
  color: var(--ink);
}
html.theme-light .readout .rlabel,
html.theme-light .readout .rvalue,
html[data-theme="light"] .readout .rlabel,
body.theme-light .readout .rlabel{ color: var(--ink-soft-2); }
html.theme-light .readout .rvalue,
body.theme-light .readout .rvalue{ color: var(--ink); }

html.theme-light .phone-frame,
html[data-theme="light"] .phone-frame,
body.theme-light .phone-frame{
  background: #FFFFFF;
  border-color: var(--line);
  box-shadow: 0 24px 50px -20px rgba(20,18,32,.15);
}
html.theme-light .phone-stat .k,
body.theme-light .phone-stat .k{ color: var(--ink-soft); }
html.theme-light .phone-stat .v,
body.theme-light .phone-stat .v{ color: var(--ink); }

html.theme-light .final-cta,
html[data-theme="light"] .final-cta,
body.theme-light .final-cta{
  background: #1D1A2E !important;
}
html.theme-light .final-cta h2,
body.theme-light .final-cta h2{ color: #F6F2E9 !important; }
html.theme-light .final-cta p,
body.theme-light .final-cta p{ color: #9A96AC !important; }

html.theme-light .site-footer,
html[data-theme="light"] .site-footer,
body.theme-light .site-footer{
  background: #F7F5F0;
  color: var(--ink-soft-2);
  border-top: 1px solid var(--line);
}
html.theme-light .site-footer a,
body.theme-light .site-footer a{ color: var(--ink-soft-2); }
html.theme-light .site-footer a:hover,
body.theme-light .site-footer a:hover{ color: var(--ink); }

html.theme-light .btn-outline-paper,
html[data-theme="light"] .btn-outline-paper,
body.theme-light .btn-outline-paper{
  border-color: rgba(20,18,32,.25);
  color: var(--ink);
}
html.theme-light .btn-outline-paper:hover,
body.theme-light .btn-outline-paper:hover{
  background: var(--ink);
  color: #fff;
}

html.theme-light .faq-item,
html[data-theme="light"] .faq-item,
body.theme-light .faq-item{ border-color: var(--line); }
html.theme-light .usecase-chip,
body.theme-light .usecase-chip{
  background: #FFFFFF;
  border-color: var(--line);
  color: var(--ink-soft-2);
}
html.theme-light .flow-step,
body.theme-light .flow-step{
  background: #FFFFFF;
  border-color: var(--line);
}
html.theme-light .value-item h4,
body.theme-light .value-item h4{ color: var(--ink); }

/* Keep ticker + accent buttons readable in light mode */
html.theme-light .ticker-strip,
html[data-theme="light"] .ticker-strip,
body.theme-light .ticker-strip{
  /* accent bg already set; ensure text contrast via --accent-on */
}

/* ========== Blog ========== */
.blog-hero{ padding-bottom: 1.5rem; }
.blog-hero-lead{ color: var(--ink-soft); max-width: 520px; margin-top: .75rem; }
.blog-view-tabs{ display: flex; gap: .5rem; margin-top: 1.5rem; }
.blog-view-tab{
  padding: .45rem 1rem; border-radius: 100px; font-size: .88rem; font-weight: 600;
  border: 1px solid var(--line); color: var(--ink-soft-2); background: transparent;
}
.blog-view-tab.is-active{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
html.theme-light .blog-view-tab.is-active,
body.theme-light .blog-view-tab.is-active{
  background: var(--ink); color: #fff;
}

.blog-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.blog-grid--product{ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 991px){ .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px){ .blog-grid{ grid-template-columns: 1fr; } }

.blog-card{
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, border-color .2s ease;
}
.blog-card:hover{ transform: translateY(-4px); border-color: var(--accent, var(--meter)); }
.blog-card__media{ display: block; aspect-ratio: 16/10; overflow: hidden; background: var(--ink); }
.blog-card__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card__placeholder{
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--ink-2), var(--ink));
}
.blog-card__body{ padding: 1.15rem 1.2rem 1.35rem; flex: 1; display: flex; flex-direction: column; }
.blog-card__meta{ font-size: .78rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.blog-card__title{ font-family: 'Fraunces', serif; font-size: 1.15rem; margin: 0 0 .5rem; line-height: 1.35; }
.blog-card__title a{ color: var(--paper); }
.blog-card__excerpt{ color: var(--ink-soft); font-size: .9rem; margin: 0 0 .75rem; flex: 1; }
.blog-card__tags{ display: flex; flex-wrap: wrap; gap: .4rem; }
.blog-tag{
  font-size: .72rem; font-weight: 600; padding: .25rem .55rem; border-radius: 100px;
  background: color-mix(in srgb, var(--tag-accent, var(--meter)) 18%, transparent);
  color: var(--tag-accent, var(--meter));
}

html.theme-light .blog-card,
body.theme-light .blog-card{ background: #fff; border-color: var(--line); }
html.theme-light .blog-card__title a,
body.theme-light .blog-card__title a{ color: var(--ink); }
html.theme-light .section-dark .blog-card__title a{ color: var(--ink); }

/* Carousel */
.blog-carousel{ position: relative; }
.blog-carousel__track{
  display: flex; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: .5rem; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.blog-carousel__track::-webkit-scrollbar{ display: none; }
.blog-carousel__slide{
  flex: 0 0 min(340px, 85%);
  scroll-snap-align: start;
  max-width: 360px;
}
.blog-carousel__controls{
  display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.25rem;
}
.blog-carousel__btn{
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2);
  background: transparent; color: var(--paper); cursor: pointer; font-size: 1.1rem;
}
.blog-carousel__btn:hover{ background: rgba(255,255,255,.08); }
.blog-carousel__dots{ display: flex; gap: 6px; }
.blog-carousel__dot{
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(255,255,255,.25); cursor: pointer;
}
.blog-carousel__dot.is-active{ background: var(--accent, var(--meter)); transform: scale(1.2); }

html.theme-light .blog-carousel__btn,
body.theme-light .blog-carousel__btn{ border-color: var(--line); color: var(--ink); }
html.theme-light .blog-carousel__dot,
body.theme-light .blog-carousel__dot{ background: rgba(20,18,32,.2); }

/* Pagination */
.blog-pagination{ margin-top: 2.5rem; display: flex; justify-content: center; }
.blog-pagination .page-numbers{
  display: flex; gap: .35rem; list-style: none; padding: 0; margin: 0; flex-wrap: wrap;
}
.blog-pagination .page-numbers li{ display: inline-flex; }
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span{
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; border: 1px solid var(--line); font-size: .9rem; font-weight: 600;
  color: var(--ink-soft-2); padding: 0 .5rem;
}
.blog-pagination .page-numbers .current{
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}

/* Single article */
.blog-article__header{ padding-bottom: 1rem; }
.blog-article__meta{ color: var(--ink-soft); font-size: .9rem; margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.blog-article__meta a{ color: var(--accent, var(--meter)); font-weight: 600; }
.blog-article__actions{ margin-top: 1.25rem; }
.like-btn{
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1rem; border-radius: 100px; border: 1px solid var(--line);
  background: transparent; color: var(--ink); font-weight: 600; font-size: .9rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.like-btn:hover, .like-btn.is-liked{
  border-color: var(--accent, var(--meter));
  color: var(--accent, var(--meter));
  background: var(--accent-soft, rgba(224,150,26,.12));
}
.like-btn.is-liked svg{ fill: currentColor; }
.blog-article__cover{ margin-bottom: 0; }
.blog-article__img{ width: 100%; border-radius: var(--radius); display: block; max-height: 480px; object-fit: cover; }
.blog-article__content{
  max-width: 720px; font-size: 1.05rem; line-height: 1.75; color: var(--ink);
}
.blog-article__content p{ margin-bottom: 1.15rem; }
.blog-article__content h2, .blog-article__content h3{ font-family: 'Fraunces', serif; margin: 1.8rem 0 .8rem; }
.blog-article__content img{ max-width: 100%; height: auto; border-radius: 12px; }
.blog-article__content a{ color: var(--accent, var(--meter)); text-decoration: underline; }

.blog-related-products{ display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }
.blog-related-product{
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .55rem 1rem; border-radius: 12px; border: 1px solid var(--line);
  background: var(--paper-dim); font-weight: 600; font-size: .9rem;
}
.blog-related-product:hover{ border-color: var(--card-accent, var(--meter)); }
.blog-related-product__logo{ width: 28px; height: 28px; object-fit: contain; border-radius: 6px; }

/* Discussion (comments) */
.blog-discussion__title{ font-family: 'Fraunces', serif; font-size: 1.5rem; margin-bottom: 1.5rem; }
.blog-comment-list{ list-style: none; padding: 0; margin: 0 0 2rem; }
.blog-comment{ margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.blog-comment__head{ display: flex; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.blog-comment__head img{ border-radius: 50%; }
.blog-comment__author{ display: block; font-size: .95rem; }
.blog-comment__date{ font-size: .78rem; color: var(--ink-soft); }
.blog-comment__body{ font-size: .95rem; line-height: 1.6; color: var(--ink-soft-2); }
.blog-comment__reply a{ font-size: .82rem; font-weight: 600; color: var(--accent, var(--meter)); }
.blog-comment-form label{ display: block; font-size: .85rem; font-weight: 600; margin-bottom: .35rem; }
.blog-comment-form input[type="text"],
.blog-comment-form input[type="email"],
.blog-comment-form input[type="url"],
.blog-comment-form textarea{
  width: 100%; padding: .65rem .85rem; border-radius: 10px; border: 1px solid var(--line);
  background: var(--paper); color: var(--ink); margin-bottom: .85rem; font-family: inherit;
}
.blog-comment-form .form-submit{ margin-top: .5rem; }

/* ========== Blog polish (force styles) ========== */
.blog-index,
.blog-single,
#insights {
  isolation: isolate;
}

/* Insights on homepage — readable in light mode */
#insights.section-dark {
  background: var(--ink) !important;
  color: var(--paper);
}
html.theme-light #insights.section-dark,
body.theme-light #insights.section-dark {
  background: #F3F1EC !important;
  color: var(--ink);
}
html.theme-light #insights .blog-card,
body.theme-light #insights .blog-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 8px 24px -12px rgba(20,18,32,.12);
}
html.theme-light #insights .blog-card__title a,
body.theme-light #insights .blog-card__title a {
  color: var(--ink);
}
html.theme-light #insights .eyebrow-accent,
body.theme-light #insights .eyebrow-accent {
  color: var(--accent, var(--meter));
}
html.theme-light #insights h2,
body.theme-light #insights h2 {
  color: var(--ink) !important;
}

/* Dark mode homepage cards */
#insights .blog-card {
  background: var(--ink-2);
  border: 1px solid rgba(255,255,255,.1);
}
#insights .blog-card__title a { color: var(--paper); }
#insights .blog-card__excerpt,
#insights .blog-card__meta { color: var(--ink-soft); }

.blog-carousel__slide {
  flex: 0 0 min(360px, 88%);
  max-width: 380px;
  background: var(--ink-2);
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
}
.blog-carousel__btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.06) !important;
  color: #fff !important;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
html.theme-light .blog-carousel__btn,
body.theme-light .blog-carousel__btn {
  border-color: var(--line) !important;
  background: #fff !important;
  color: var(--ink) !important;
}

/* Blog list grid cards */
.blog-grid .blog-card {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 20px -10px rgba(20,18,32,.1);
}
.blog-grid .blog-card__title a { color: var(--ink); }
.blog-grid .blog-card__excerpt { color: var(--ink-soft); }
body.theme-dark .blog-grid .blog-card,
html.theme-dark .blog-grid .blog-card {
  background: var(--ink-2);
  border-color: rgba(255,255,255,.1);
}
body.theme-dark .blog-grid .blog-card__title a,
html.theme-dark .blog-grid .blog-card__title a {
  color: var(--paper);
}

/* Single article spacing */
.blog-article__header {
  padding-top: 6rem;
}
.blog-article__content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.like-btn {
  display: inline-flex !important;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.15rem !important;
  border-radius: 100px !important;
  border: 1px solid var(--line) !important;
  background: var(--paper-dim) !important;
  color: var(--ink) !important;
  font-weight: 600;
  font-size: .9rem;
  cursor: pointer;
}
.like-btn.is-liked,
.like-btn:hover {
  border-color: var(--accent, var(--meter)) !important;
  color: var(--accent, var(--meter)) !important;
  background: var(--accent-soft, rgba(224,150,26,.12)) !important;
}

/* Comments — kill default numbering */
.blog-comment-list,
.blog-comment-list ol,
.blog-discussion ol {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  counter-reset: none;
}
.blog-comment-list > li,
.blog-comment-list li {
  list-style: none !important;
}
.blog-comment-list > li::before,
.blog-comment-list li::marker {
  content: none !important;
  display: none !important;
}
.blog-comment {
  list-style: none !important;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.15rem !important;
  margin-bottom: 1rem !important;
}
.blog-comment__head {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-bottom: .65rem;
}
.blog-comment__body p {
  margin: 0 0 .5rem;
}
.blog-comment-form textarea {
  min-height: 120px;
  border-radius: 12px !important;
  border: 1px solid var(--line) !important;
  width: 100%;
  padding: .85rem 1rem;
}
.blog-comment-form .form-submit input,
.blog-comment-form input[type="submit"] {
  border: none !important;
  border-radius: 100px !important;
  padding: .55rem 1.4rem !important;
  background: var(--accent, var(--meter)) !important;
  color: var(--accent-on, #12100B) !important;
  font-weight: 700;
  cursor: pointer;
}

/* Blog hero on list page */
.blog-hero {
  padding-top: 6rem;
  background: var(--paper-dim);
}
.blog-view-tab.is-active {
  background: var(--ink) !important;
  color: #fff !important;
  border-color: var(--ink) !important;
}

/* ========== Blog single layout + sidebar ========== */
.blog-layout { padding-top: 5.5rem; }
.blog-layout__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 991px) {
  .blog-layout__grid { grid-template-columns: 1fr; }
  .blog-sidebar { order: 2; }
}
.blog-article__header { padding-top: 0; margin-bottom: 1.5rem; }
.blog-article__cover { margin: 0 0 1.75rem; }
.blog-article__content { max-width: none; margin: 0; }
.blog-related-wrap { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.blog-comments-section { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }

.blog-sidebar { position: sticky; top: 5.5rem; }
.blog-widget {
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.15rem 1.2rem;
  margin-bottom: 1rem;
}
.blog-widget__title {
  font-family: 'Fraunces', serif;
  font-size: 1.1rem;
  margin: 0 0 1rem;
  color: var(--ink);
}
.blog-widget__list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.blog-widget__list li { margin: 0 0 .85rem; }
.blog-widget__list li:last-child { margin-bottom: 0; }
.blog-widget__item {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}
.blog-widget__item:hover .blog-widget__name { color: var(--accent, var(--meter)); }
.blog-widget__thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ink-2);
  display: block;
}
.blog-widget__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.blog-widget__thumb--empty {
  background: linear-gradient(135deg, var(--paper-dim), var(--line));
}
.blog-widget__text { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.blog-widget__name {
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-widget__date { font-size: .75rem; color: var(--ink-soft); }
.blog-sidebar__all {
  display: inline-block;
  margin-top: .35rem;
  font-weight: 700;
  font-size: .9rem;
  color: var(--accent, var(--meter));
}

body.theme-dark .blog-widget,
html.theme-dark .blog-widget {
  background: var(--ink-2);
  border-color: rgba(255,255,255,.1);
}
body.theme-dark .blog-widget__title,
body.theme-dark .blog-widget__name,
html.theme-dark .blog-widget__title,
html.theme-dark .blog-widget__name { color: var(--paper); }

/* Carousel reliability */
.blog-carousel__track {
  display: flex !important;
  gap: 1.25rem;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 2px 12px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.blog-carousel__slide {
  flex: 0 0 min(340px, 85vw) !important;
  scroll-snap-align: start;
  max-width: 360px;
}
.blog-carousel__controls {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: .85rem;
  margin-top: 1rem;
}

/* Force article + sidebar side-by-side on desktop */
.blog-single .blog-layout .row {
  display: flex !important;
  flex-wrap: wrap;
}
.blog-single .blog-main-col {
  width: 100%;
}
.blog-single .blog-side-col {
  width: 100%;
}
@media (min-width: 992px) {
  .blog-single .blog-main-col {
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
  }
  .blog-single .blog-side-col {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  .blog-single .blog-sidebar {
    position: sticky;
    top: 5.5rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
}
/* Keep sidebar on the right visually even when content is long */
.blog-side-col .blog-widget {
  width: 100%;
}
.blog-sidebar__note{
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent, var(--meter));
  margin: 0 0 .85rem;
}