/*
Theme Name: BestWriters
Theme URI: https://www.bestwriters.com/
Author: BestWriters
Author URI: https://www.bestwriters.com/
Description: Lightweight, SEO-optimized theme for essay writing, assignment help and academic blog websites. No jQuery, one stylesheet, one small deferred script. Works with Yoast SEO, Rank Math, All in One SEO, SEOPress and The SEO Framework: the theme's own meta tags switch off automatically when an SEO plugin is active. All buttons and homepage text are editable in Appearance > Customize > BestWriters Theme.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bestwriters
Tags: blog, education, one-column, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments
*/

:root{
  --paper:#FBFBF8; --surface:#FFFFFF; --sunk:#F1F3EF;
  --ink:#1A1D24; --ink-2:#4A505C; --line:#DDE1DA;
  --green:#1F4D3A; --green-2:#2E6B52; --green-soft:#E3EEE7;
  --marker:#F5D547; --marker-ink:#1A1D24; --on-green:#F4F7F2;
  --radius-lg:18px; --radius:10px; --radius-sm:6px;
  --wrap:1180px; --read:740px;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:"Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#12161A; --surface:#1A1F24; --sunk:#161B20;
    --ink:#ECEEEA; --ink-2:#A9B0AA; --line:#2C343A;
    --green:#7FC4A2; --green-2:#9AD6B8; --green-soft:#1D2E27;
    --marker:#E8C93A; --marker-ink:#12161A; --on-green:#12161A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#12161A; --surface:#1A1F24; --sunk:#161B20;
  --ink:#ECEEEA; --ink-2:#A9B0AA; --line:#2C343A;
  --green:#7FC4A2; --green-2:#9AD6B8; --green-soft:#1D2E27;
  --marker:#E8C93A; --marker-ink:#12161A; --on-green:#12161A;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(80px + env(safe-area-inset-top,0px))}
body{margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.6 var(--sans); -webkit-font-smoothing:antialiased; padding-bottom:env(safe-area-inset-bottom,0px)}
img,svg,video{max-width:100%; height:auto}
svg{display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--serif); font-weight:700; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em}
h1{font-size:clamp(2.1rem,4.4vw,3.5rem)}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
h3{font-size:1.25rem}
p{margin:0 0 1em}
.wrap{width:min(100% - 40px, var(--wrap)); margin-inline:auto}
.lede{font-size:1.15rem; color:var(--ink-2); max-width:60ch}
.section{padding:88px 0}
.section--flush{padding-top:0}
.section--sunk{background:var(--sunk)}
.section-head{max-width:660px; margin-bottom:44px}
.section-head p{color:var(--ink-2)}
:focus-visible{outline:3px solid var(--marker); outline-offset:2px; border-radius:4px}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.skip-link:focus{position:fixed; top:10px; left:10px; z-index:100; width:auto; height:auto; clip:auto; background:var(--marker); color:var(--marker-ink); padding:10px 16px; border-radius:var(--radius-sm)}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font:600 1rem var(--sans); padding:14px 22px; border-radius:var(--radius); border:2px solid transparent; text-decoration:none; cursor:pointer; transition:transform .15s, border-color .15s}
.btn-primary{background:var(--marker); color:var(--marker-ink)}
.btn-primary:hover{transform:translateY(-1px)}
.btn-ghost{border-color:var(--line); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.btn-green{background:var(--green); color:var(--on-green)}

/* Top bar + header */
.topbar{background:var(--green); color:var(--on-green); font-size:.88rem}
.topbar .wrap{display:flex; justify-content:space-between; gap:16px; padding:8px 0; flex-wrap:wrap}
.topbar a{text-decoration:none; font-weight:600}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:60; background:var(--paper)}
.site-header{position:sticky; top:env(safe-area-inset-top,0px); z-index:50; background:var(--paper); border-bottom:1px solid var(--line)}
.admin-bar .site-header{top:calc(32px + env(safe-area-inset-top,0px))}
@media (max-width:782px){.admin-bar .site-header{top:0}}
.nav{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px}
.logo{display:flex; align-items:center; gap:10px; font:700 1.45rem var(--serif); text-decoration:none}
.logo svg{width:30px; height:30px}
.custom-logo{max-height:42px; width:auto}
.menu{display:flex; gap:24px; list-style:none; margin:0; padding:0}
.menu a{text-decoration:none; font-weight:500; color:var(--ink-2); display:block; padding:6px 0}
.menu a:hover,.menu .current-menu-item>a{color:var(--ink)}
.menu li{position:relative}
.menu .sub-menu{display:none; position:absolute; top:100%; left:-16px; min-width:250px; list-style:none; margin:0; padding:10px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
.menu li:hover>.sub-menu,.menu li:focus-within>.sub-menu{display:block}
.menu .sub-menu a{padding:7px 0; font-size:.95rem}
.menu .menu-item-has-children>a::after{content:" ▾"; font-size:.75em}
.nav-actions{display:flex; gap:10px; align-items:center}
.nav-actions .btn{padding:10px 16px; font-size:.95rem}
.burger{display:none; background:none; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; color:var(--ink); cursor:pointer; font-size:1.1rem}

/* Hero */
.hero{padding:64px 0 80px}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:start}
.hl{background:linear-gradient(transparent 58%, var(--marker) 58%, var(--marker) 92%, transparent 92%); padding:0 .08em}
.hero-points{list-style:none; padding:0; margin:28px 0 32px; display:grid; gap:10px}
.hero-points li{display:flex; gap:10px; align-items:flex-start; color:var(--ink-2)}
.hero-points svg{flex:none; width:22px; height:22px; color:var(--green); margin-top:2px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.trust{display:flex; gap:28px; margin-top:40px; flex-wrap:wrap; color:var(--ink-2); font-size:.95rem}
.trust strong{display:block; font:700 1.6rem var(--serif); color:var(--ink)}
.crumbs{font-size:.9rem; color:var(--ink-2); margin-bottom:18px}
.crumbs a{text-decoration:none; color:var(--green)}
.crumbs a:hover{text-decoration:underline}
.crumbs .sep{margin:0 6px; opacity:.6}

/* Order form */
.slip{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px; position:relative; box-shadow:0 1px 0 var(--line), 0 24px 48px -28px rgba(31,77,58,.45)}
.slip::before{content:""; position:absolute; left:28px; right:28px; top:-1px; height:6px; background:repeating-linear-gradient(90deg,var(--green) 0 14px,transparent 14px 22px); border-radius:0 0 3px 3px}
.slip-title{font-size:1.5rem; margin-bottom:4px}
.slip-intro{color:var(--ink-2); font-size:.95rem}
.field{display:grid; gap:6px; margin-bottom:16px}
.field label{font-weight:600; font-size:.92rem}
.field select,.field input{font:inherit; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-sm); padding:11px 12px; width:100%}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.stepper{display:flex; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; background:var(--paper)}
.stepper button{width:44px; border:0; background:var(--sunk); color:var(--ink); font-size:1.2rem; cursor:pointer}
.stepper input{border:0; text-align:center; border-radius:0; background:transparent}
.words{font-size:.82rem; color:var(--ink-2); font-weight:400}
.from-price{border-top:1px dashed var(--line); padding-top:16px; margin:4px 0 16px; color:var(--ink-2)}
.from-price strong{font:700 1.6rem var(--serif); color:var(--green)}
.slip .btn{width:100%}
.slip-note{font-size:.82rem; color:var(--ink-2); text-align:center; margin:12px 0 0}

/* Services */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
.svc{background:var(--surface); padding:26px 24px; text-decoration:none; display:flex; flex-direction:column; gap:8px; transition:background .15s}
.svc:hover{background:var(--green-soft)}
.svc svg{width:28px; height:28px; color:var(--green)}
.svc h3{margin:6px 0 0; font-size:1.12rem}
.svc p{margin:0; color:var(--ink-2); font-size:.94rem}
.subjects{margin-top:36px; display:flex; flex-wrap:wrap; gap:10px}
.subjects a,.subjects span{text-decoration:none; border:1px solid var(--line); background:var(--surface); padding:7px 14px; border-radius:999px; font-size:.92rem; color:var(--ink-2)}

/* Steps */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px; counter-reset:step; list-style:none; padding:0; margin:0}
.steps li{counter-increment:step; border-top:3px solid var(--ink); padding-top:20px}
.steps li::before{content:counter(step); font:700 2.6rem/1 var(--serif); color:var(--green); display:block; margin-bottom:14px}
.steps p{color:var(--ink-2); margin:0}

/* Countries */
.countries{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; list-style:none; margin:0; padding:0}
.countries li{display:flex}
.country{flex:1; display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; transition:border-color .15s}
.country:hover{border-color:var(--green)}
.country .code{flex:none; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font:700 .8rem var(--sans); background:var(--green); color:var(--on-green); letter-spacing:.02em}
.country b{display:block; font-weight:600}
.country small{display:block; color:var(--ink-2); font-size:.82rem; line-height:1.35}

/* Orders + writers */
.split{display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start}
.panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:8px 0}
.panel-head{display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--line)}
.panel-head h3{margin:0}
.panel-head a{font-weight:600; font-size:.9rem}
.live{display:inline-flex; align-items:center; gap:6px; font-size:.85rem; color:var(--green); font-weight:600}
.live::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.25}}
.orders,.writers{list-style:none; margin:0; padding:0}
.orders li{display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:14px 24px; border-bottom:1px solid var(--line)}
.orders li:last-child,.writers li:last-child{border-bottom:0}
.orders .t{font-weight:600}
.orders .m{font-size:.86rem; color:var(--ink-2)}
.orders .s{grid-row:span 2; align-self:center; font-size:.82rem; font-weight:600; padding:4px 10px; border-radius:999px; background:var(--green-soft); color:var(--green)}
.writers li{display:grid; grid-template-columns:48px 1fr auto; gap:14px; align-items:center; padding:14px 24px; border-bottom:1px solid var(--line)}
.avatar{width:48px; height:48px; border-radius:50%; display:grid; place-items:center; font:700 1rem var(--serif); background:var(--green-soft); color:var(--green)}
.writers .n{font-weight:600}
.writers .d{font-size:.86rem; color:var(--ink-2)}
.writers .r{text-align:right; font-size:.86rem; color:var(--ink-2)}
.writers .r b{display:block; color:var(--ink); font-size:1rem}

/* Guarantees */
.guarantees{background:var(--green); color:var(--on-green)}
.guarantees .section-head p{color:inherit; opacity:.85}
.g-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px 40px}
.g-grid h3{font-size:1.15rem}
.g-grid p{opacity:.85; margin:0; font-size:.97rem}
.g-grid svg{width:30px; height:30px; margin-bottom:14px; color:var(--marker)}

/* Reviews */
.reviews-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:24px}
.review{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; display:flex; flex-direction:column}
.review:first-child{background:var(--green-soft); border-color:transparent; grid-row:span 2}
.review:first-child blockquote{font:600 1.4rem/1.4 var(--serif)}
.stars{color:#D4A20A; letter-spacing:2px; margin-bottom:12px}
.review blockquote{margin:0 0 18px; font-size:1rem}
.review .who{margin-top:auto; font-size:.9rem; color:var(--ink-2)}
.review .who b{color:var(--ink)}

/* Posts */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px 28px}
.card{display:flex; flex-direction:column}
.card a{text-decoration:none}
.thumb{aspect-ratio:16/10; border-radius:var(--radius); margin-bottom:16px; overflow:hidden; display:block; background:linear-gradient(135deg,var(--green),var(--green-2))}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb .ph{display:flex; align-items:flex-end; height:100%; padding:16px; font:700 1.1rem var(--serif); color:#fff}
.card:nth-child(3n+2) .thumb{background:linear-gradient(135deg,#2B3A55,#5670A0)}
.card:nth-child(3n+3) .thumb{background:linear-gradient(135deg,#6B3B2E,#B06A4F)}
.cat{font-size:.85rem; font-weight:600; color:var(--green); text-decoration:none}
.card h3{margin:6px 0 8px; font-size:1.2rem}
.card h3 a:hover{text-decoration:underline; text-underline-offset:3px}
.card p{color:var(--ink-2); font-size:.95rem; margin:0 0 10px}
.meta{font-size:.85rem; color:var(--ink-2)}
.head-row{display:flex; justify-content:space-between; align-items:end; gap:20px; flex-wrap:wrap; max-width:none}
.head-row > div{max-width:660px}

/* FAQ */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:56px}
.faq details{border-bottom:1px solid var(--line); padding:18px 0}
.faq summary{cursor:pointer; font-weight:600; font-size:1.08rem; list-style:none; display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-size:1.4rem; line-height:1; color:var(--green); transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin:12px 0 0; color:var(--ink-2)}

/* CTA */
.cta{padding:0 0 96px}
.cta-box{background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); padding:56px; display:flex; justify-content:space-between; align-items:center; gap:32px; flex-wrap:wrap}
.cta-box h2{margin:0 0 6px}
.cta-box p{margin:0; opacity:.8}

/* Page / single */
.page-hero{padding:48px 0 36px; border-bottom:1px solid var(--line); margin-bottom:48px}
.page-hero h1{max-width:22ch}
.page-hero .lede{margin:0}
.read{width:min(100% - 40px, var(--read)); margin-inline:auto}
.entry-content{font-size:1.06rem; line-height:1.75}
.entry-content > *{margin-block:0 1.1em}
.entry-content h2{font-size:1.75rem; margin-top:1.8em}
.entry-content h3{font-size:1.3rem; margin-top:1.5em}
.entry-content a{color:var(--green); text-underline-offset:3px}
.entry-content ul,.entry-content ol{padding-left:1.3em}
.entry-content li{margin-bottom:.4em}
.entry-content blockquote{border-left:4px solid var(--marker); margin-left:0; padding:4px 0 4px 20px; font-family:var(--serif); font-size:1.15rem}
.entry-content table{width:100%; border-collapse:collapse; display:block; overflow-x:auto}
.entry-content th,.entry-content td{border:1px solid var(--line); padding:10px 14px; text-align:left}
.entry-content img{border-radius:var(--radius)}
.entry-content .alignwide{width:min(100vw - 40px, 1000px); max-width:none; margin-left:50%; transform:translateX(-50%)}
.entry-content .alignfull{width:100vw; max-width:none; margin-left:50%; transform:translateX(-50%)}
.entry-content .aligncenter{margin-inline:auto}
.entry-content .alignleft{float:left; margin:0 1.5em 1em 0}
.entry-content .alignright{float:right; margin:0 0 1em 1.5em}
.wp-caption-text,.wp-element-caption{font-size:.88rem; color:var(--ink-2)}
.entry-meta{display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--ink-2); font-size:.92rem; margin-top:14px}
.featured{margin:0 0 36px}
.featured img{width:100%; border-radius:var(--radius-lg)}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin:36px 0}
.tags a{border:1px solid var(--line); padding:5px 12px; border-radius:999px; font-size:.88rem; text-decoration:none; color:var(--ink-2)}
.author-box{display:grid; grid-template-columns:64px 1fr; gap:18px; padding:24px; background:var(--sunk); border-radius:var(--radius-lg); margin:40px 0}
.author-box img{border-radius:50%}
.author-box h2{font-size:1.15rem; margin-bottom:4px}
.author-box p{margin:0; color:var(--ink-2); font-size:.95rem}
.inline-cta{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; background:var(--green-soft); border-radius:var(--radius-lg); padding:26px 28px; margin:40px 0}
.inline-cta p{margin:0; font-weight:600; font-family:var(--serif); font-size:1.2rem}
.landing-content{padding:72px 0 16px}
.pagination{margin-top:48px}
.pagination .nav-links{display:flex; gap:8px; flex-wrap:wrap}
.pagination .page-numbers{padding:8px 14px; border:1px solid var(--line); border-radius:var(--radius-sm); text-decoration:none}
.pagination .current{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.search-form{display:flex; gap:8px; max-width:480px}
.search-form input[type=search]{flex:1; font:inherit; padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink)}
.search-form button{font:600 1rem var(--sans); padding:11px 18px; border:0; border-radius:var(--radius-sm); background:var(--green); color:var(--on-green); cursor:pointer}

/* Comments */
.comments{margin-top:56px; border-top:1px solid var(--line); padding-top:36px}
.comment-list{list-style:none; padding:0}
.comment-list .children{list-style:none; padding-left:24px}
.comment-body{padding:16px 0; border-bottom:1px solid var(--line)}
.comment-form input:not([type=submit]):not([type=checkbox]),.comment-form textarea{width:100%; font:inherit; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink)}
.comment-form .submit{font:600 1rem var(--sans); padding:12px 20px; border:0; border-radius:var(--radius); background:var(--marker); color:var(--marker-ink); cursor:pointer}

/* Footer */
.site-footer{border-top:1px solid var(--line); padding:64px 0 28px; font-size:.94rem}
.f-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr 1fr; gap:36px}
.f-grid h2{font:600 1rem var(--sans); margin:0 0 14px; letter-spacing:0}
.f-grid ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.f-grid a{text-decoration:none; color:var(--ink-2)}
.f-grid a:hover{color:var(--ink)}
.f-about p{color:var(--ink-2); max-width:36ch}
.pay{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px}
.pay span{border:1px solid var(--line); border-radius:var(--radius-sm); padding:4px 10px; font-size:.8rem; font-weight:600; color:var(--ink-2)}
.social{display:flex; gap:12px; margin-top:16px}
.social a{font-weight:600; color:var(--green)}
.legal{border-top:1px solid var(--line); margin-top:48px; padding-top:22px; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; color:var(--ink-2); font-size:.85rem}
.legal p{margin:0; max-width:70ch}

/* Responsive */
@media (max-width:1024px){
  .hero-grid,.split,.faq-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .countries{grid-template-columns:repeat(3,1fr)}
  .reviews-grid{grid-template-columns:1fr 1fr}
  .review:first-child{grid-column:span 2; grid-row:auto}
  .f-grid{grid-template-columns:1fr 1fr 1fr}
  .f-about{grid-column:1/-1}
}
@media (max-width:900px){
  .main-nav{display:none}
  .main-nav.open{display:block; position:absolute; top:100%; left:0; right:0; background:var(--paper); border-bottom:1px solid var(--line); padding:12px 20px 24px; max-height:75vh; overflow:auto}
  .main-nav.open .menu{flex-direction:column; gap:0}
  .main-nav.open .sub-menu{display:block; position:static; border:0; box-shadow:none; padding:0 0 6px 14px; background:none}
  .nav-actions .btn-ghost{display:none}
  .burger{display:block}
  .post-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .svc-grid,.steps,.g-grid,.post-grid,.reviews-grid,.f-grid{grid-template-columns:1fr}
  .countries{grid-template-columns:1fr 1fr}
  .review:first-child{grid-column:auto}
  .row2{grid-template-columns:1fr}
  .cta-box{padding:36px 24px}
  .nav-actions .btn-primary{padding:9px 12px; font-size:.9rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important; scroll-behavior:auto!important}}

/* ===== Single post (question page) ===== */
.post-head{background:var(--sunk); border-bottom:1px solid var(--line); padding:40px 0 34px}
.post-head h1{font-size:clamp(1.7rem,3.2vw,2.5rem); max-width:36ch; margin:10px 0 20px}
.post-badge{display:inline-block; font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--green); background:var(--green-soft); padding:5px 10px; border-radius:999px; text-decoration:none}
.post-facts{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 28px; font-size:.92rem}
.post-facts li{display:flex; flex-direction:column}
.post-facts span{font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-2)}
.post-facts a{color:var(--ink); text-decoration:none; font-weight:600}
.post-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; align-items:start; padding:44px 0 24px}
.post-body{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 36px}
.post-body > :first-child{margin-top:0}
.post-side{position:sticky; top:calc(96px + env(safe-area-inset-top,0px))}
.admin-bar .post-side{top:calc(128px + env(safe-area-inset-top,0px))}
.side-box{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; position:relative; box-shadow:0 24px 48px -32px rgba(31,77,58,.45)}
.side-box::before{content:""; position:absolute; left:24px; right:24px; top:-1px; height:6px; background:repeating-linear-gradient(90deg,var(--green) 0 14px,transparent 14px 22px)}
.side-box__title{font:700 1.3rem/1.25 var(--serif); margin:6px 0 8px}
.side-box > p{color:var(--ink-2); font-size:.95rem}
.side-box > .side-box__title{font:700 1.3rem/1.25 var(--serif); color:var(--ink)}
.side-box .from-price{border-top:1px dashed var(--line); padding-top:14px}
.side-box .btn{width:100%}
.side-box__list{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; font-size:.9rem; color:var(--ink-2)}
.side-box__list li,.post-cta__points li{display:flex; gap:8px; align-items:center}
.side-box__list svg,.post-cta__points svg{width:18px; height:18px; flex:none; color:var(--green)}
.post-cta{border-radius:var(--radius-lg); margin:32px 0}
.entry-content .post-cta--mid{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:var(--green-soft); border-left:5px solid var(--green); padding:22px 24px; margin:2em 0}
.post-cta--mid p{margin:0}
.post-cta__title{font:700 1.2rem var(--serif); color:var(--ink)}
.post-cta__text{color:var(--ink-2); font-size:.95rem; margin-top:4px!important}
.entry-content .post-cta--mid .btn{color:var(--marker-ink); text-decoration:none}
.post-cta--bottom{background:var(--green); color:var(--on-green); padding:34px 36px}
.post-cta--bottom h2{font-size:1.7rem; margin-bottom:8px}
.post-cta--bottom p{opacity:.9; max-width:60ch}
.post-cta__points{list-style:none; padding:0; margin:18px 0 24px; display:flex; flex-wrap:wrap; gap:10px 24px; font-size:.95rem}
.post-cta--bottom .post-cta__points svg{color:var(--marker)}
.post-cta__buttons{display:flex; gap:12px; flex-wrap:wrap}
.btn-ghost-light{border-color:currentColor; color:inherit; background:transparent}
.btn-ghost-light:hover{background:rgba(255,255,255,.08)}
.related{background:var(--sunk)}
.related h2{margin-bottom:28px}
.post-grid--4{grid-template-columns:repeat(4,1fr); gap:24px}
.post-grid--4 .card h3{font-size:1.05rem}
.post-grid--4 .card p{font-size:.9rem}
@media (max-width:1024px){
  .post-layout{grid-template-columns:1fr}
  .post-side{position:static}
  .post-grid--4{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .post-body{padding:22px 18px}
  .post-cta--bottom{padding:26px 20px}
  .post-grid--4{grid-template-columns:1fr}
}