/* publishonsocialmedia.com — shared site styles */

*, *::before, *::after {
    box-sizing: border-box;
    margin:     0;
    padding:    0;
}

:root {
    --accent:   #b05030;
    --accent-h: #8f3e23;
    --bg:       #f5f5f3;
    --warm:     #F3EAE3;
    --text:     #3a2a22;
    --muted:    #7a5848;
    --border:   #e0d0c5;
    --white:    #fff;
    --radius:   10px;
}

body {
    background:              var(--bg);
    color:                   var(--text);
    font-family:             'Inter', -apple-system, sans-serif;
    font-size:               16px;
    line-height:             1.6;
    -webkit-font-smoothing:  antialiased;
}

a {
    color:           inherit;
    text-decoration: none;
}

/* ---- Buttons ---- */

.btn {
    border-radius:   var(--radius);
    cursor:          pointer;
    display:         inline-block;
    font-family:     'Inter', sans-serif;
    font-size:       15px;
    font-weight:     600;
    padding:         11px 24px;
    text-align:      center;
    transition:      background .15s, color .15s, border-color .15s;
    white-space:     nowrap;
}

.btn-primary {
    background: var(--accent);
    border:     none;
    color:      #fff;
}

.btn-primary:hover { background: var(--accent-h); }

.btn-secondary {
    background:  transparent;
    border:      1.5px solid var(--border);
    color:       var(--text);
}

.btn-secondary:hover {
    border-color: var(--accent);
    color:        var(--accent);
}

.btn-lg {
    font-size: 16px;
    padding:   14px 32px;
}

.btn-white {
    background: #fff;
    border:     none;
    color:      var(--accent);
}

.btn-white:hover { background: #f5ede7; }

/* ---- Layout ---- */

.container {
    margin:  0 auto;
    max-width: 1200px;
    padding: 0 24px;
}

/* ---- Nav ---- */

.site-nav {
    background:    #fff;
    border-bottom: 1px solid var(--border);
    position:      sticky;
    top:           0;
    z-index:       100;
}

.nav-inner {
    align-items:     center;
    display:         flex;
    gap:             32px;
    height:          64px;
    justify-content: space-between;
    margin:          0 auto;
    max-width:       1080px;
    padding:         0 24px;
}

.nav-logo {
    align-items:     center;
    color:           var(--text);
    display:         flex;
    font-family:     'Archivo', sans-serif;
    font-size:       16px;
    font-weight:     800;
    gap:             10px;
    letter-spacing:  -0.02em;
    text-decoration: none;
}

.nav-logo svg {
    flex-shrink: 0;
    height:      28px;
    width:       28px;
}

.nav-links {
    display:   flex;
    flex:      1;
    gap:       28px;
    list-style: none;
}

.nav-links a {
    color:       var(--muted);
    font-size:   14px;
    font-weight: 500;
    transition:  color .15s;
}

.nav-links a:hover { color: var(--text); }

.nav-links a.active { color: var(--accent); }

.has-dropdown { position: relative; }

.nav-dropdown {
    background:     #fff;
    border:         1.5px solid var(--border);
    border-radius:  10px;
    box-shadow:     0 8px 24px rgba(0,0,0,.1);
    left:           -12px;
    list-style:     none;
    min-width:      270px;
    opacity:        0;
    padding:        8px 0;
    padding-top:    16px;
    pointer-events: none;
    position:       absolute;
    top:            100%;
    transform:      translateY(-4px);
    transition:     opacity .15s, transform .15s;
    z-index:        200;
}

.has-dropdown:hover .nav-dropdown,
.has-dropdown:focus-within .nav-dropdown {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0);
}

.nav-dropdown li { display: block; }

.nav-dropdown a {
    color:       var(--text) !important;
    display:     block;
    font-size:   13px !important;
    line-height: 1.3;
    padding:     9px 16px;
    transition:  background .1s;
}

.nav-dropdown a:hover {
    background: var(--warm);
    color:      var(--accent) !important;
}

.nav-ctas {
    align-items: center;
    display:     flex;
    gap:         10px;
}

.nav-login {
    color:       var(--muted);
    font-size:   14px;
    font-weight: 500;
    transition:  color .15s;
}

.nav-login:hover { color: var(--text); }

/* ---- Hero ---- */

.hero {
    padding:    80px 24px 88px;
    text-align: center;
}

.hero .container { max-width: 780px; }

.eyebrow {
    background:     var(--warm);
    border-radius:  100px;
    color:          var(--accent);
    display:        inline-block;
    font-size:      12px;
    font-weight:    600;
    letter-spacing: 0.08em;
    margin-bottom:  28px;
    padding:        6px 16px;
    text-transform: uppercase;
}

.hero h1 {
    font-family:    'Archivo', sans-serif;
    font-size:      clamp(2.2rem, 5.5vw, 3.8rem);
    font-weight:    800;
    letter-spacing: -0.03em;
    line-height:    1.1;
    margin-bottom:  20px;
}

.hero h1 em {
    color:      var(--accent);
    font-style: normal;
}

.hero-sub {
    color:         var(--muted);
    font-size:     1.1rem;
    line-height:   1.65;
    margin:        0 auto 36px;
    max-width:     520px;
}

.hero-ctas {
    align-items:     center;
    display:         flex;
    gap:             12px;
    justify-content: center;
    margin-bottom:   16px;
}

.hero-hint {
    color:     var(--muted);
    font-size: 13px;
}

.hero-hint a {
    color:       var(--accent);
    font-weight: 500;
}

/* ---- Platforms strip ---- */

.platforms-strip {
    border-top: 1px solid var(--border);
    margin-top: 48px;
    padding-top: 36px;
}

.platforms-strip p {
    color:          var(--muted);
    font-size:      11px;
    font-weight:    600;
    letter-spacing: 0.1em;
    margin-bottom:  16px;
    text-transform: uppercase;
}

.platform-icons {
    align-items:     center;
    display:         flex;
    gap:             24px;
    justify-content: center;
    flex-wrap:       wrap;
}

.platform-icons .platform {
    align-items:  center;
    color:        var(--muted);
    display:      flex;
    font-size:    13px;
    font-weight:  500;
    gap:          6px;
}

.platform-icons svg {
    height: 20px;
    width:  20px;
}

/* ---- Section base ---- */

.section {
    padding: 80px 0;
}

.section-warm { background: var(--warm); }

.section-head {
    margin-bottom: 52px;
}

.section-label {
    color:          var(--accent);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.1em;
    margin-bottom:  10px;
    text-transform: uppercase;
}

.section-title {
    font-family:    'Archivo', sans-serif;
    font-size:      clamp(1.6rem, 3vw, 2.4rem);
    font-weight:    800;
    letter-spacing: -0.02em;
    line-height:    1.2;
    margin-bottom:  12px;
    max-width:      560px;
}

.section-sub {
    color:     var(--muted);
    font-size: 1rem;
    max-width: 520px;
}

/* ---- Features ---- */

.features-grid {
    display:               grid;
    gap:                   24px;
    grid-template-columns: repeat(3, 1fr);
}

.feature-card {
    background:    #fff;
    border-radius: 14px;
    padding:       28px 24px;
}

.feature-icon {
    background:    var(--warm);
    border-radius: 8px;
    display:       inline-flex;
    margin-bottom: 16px;
    padding:       10px;
}

.feature-icon svg {
    display: block;
    height:  22px;
    stroke:  var(--accent);
    width:   22px;
}

.feature-card h3 {
    font-family:    'Archivo', sans-serif;
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: -0.01em;
    margin-bottom:  8px;
}

.feature-card p {
    color:       var(--muted);
    font-size:   0.88rem;
    line-height: 1.65;
}

/* ---- Steps ---- */

.steps-grid {
    display:               grid;
    gap:                   32px;
    grid-template-columns: repeat(4, 1fr);
}

.step {
    border-left: 2px solid var(--border);
    padding:     4px 0 4px 20px;
}

.step-num {
    color:          var(--accent);
    font-family:    'Archivo', sans-serif;
    font-size:      11px;
    font-weight:    800;
    letter-spacing: 0.06em;
    margin-bottom:  8px;
    text-transform: uppercase;
}

.step h3 {
    font-family:    'Archivo', sans-serif;
    font-size:      1rem;
    font-weight:    700;
    letter-spacing: -0.01em;
    margin-bottom:  6px;
}

.step p {
    color:       var(--muted);
    font-size:   0.88rem;
    line-height: 1.6;
}

/* ---- Pricing ---- */

.pricing-grid {
    display:               grid;
    gap:                   20px;
    grid-template-columns: repeat(3, 1fr);
}

.pricing-card {
    background:    #fff;
    border:        1.5px solid var(--border);
    border-radius: 16px;
    padding:       32px 28px;
}

.pricing-card.featured {
    border-color: var(--accent);
    position:     relative;
}

.pricing-badge {
    background:  var(--accent);
    border-radius: 100px;
    color:       #fff;
    font-size:   11px;
    font-weight: 700;
    left:        50%;
    letter-spacing: 0.05em;
    padding:     4px 14px;
    position:    absolute;
    text-transform: uppercase;
    top:         -13px;
    transform:   translateX(-50%);
    white-space: nowrap;
}

.plan-name {
    color:          var(--muted);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    margin-bottom:  16px;
    text-transform: uppercase;
}

.plan-price {
    font-family:    'Archivo', sans-serif;
    font-size:      2.6rem;
    font-weight:    800;
    letter-spacing: -0.03em;
    line-height:    1;
    margin-bottom:  4px;
}

.plan-price sup {
    font-size:      1.2rem;
    vertical-align: super;
}

.plan-period {
    color:         var(--muted);
    font-size:     13px;
    margin-bottom: 24px;
}

.plan-desc {
    color:         var(--muted);
    font-size:     0.88rem;
    line-height:   1.6;
    margin-bottom: 24px;
}

.plan-divider {
    border:        none;
    border-top:    1px solid var(--border);
    margin-bottom: 20px;
}

.plan-features {
    list-style:    none;
    margin-bottom: 28px;
}

.plan-features li {
    align-items: flex-start;
    display:     flex;
    font-size:   0.88rem;
    gap:         10px;
    margin-bottom: 10px;
}

.plan-features li::before {
    color:       var(--accent);
    content:     "✓";
    flex-shrink: 0;
    font-weight: 700;
}

.plan-features .muted-feature::before {
    color:   var(--border);
    content: "–";
}

.plan-features .muted-feature {
    color: var(--muted);
}

.pricing-card .btn { display: block; }

/* ---- FAQ ---- */

.faq-list {
    max-width: 680px;
}

.faq-item {
    border-bottom: 1px solid var(--border);
    padding:       20px 0;
}

.faq-item:first-child {
    border-top: 1px solid var(--border);
}

.faq-item summary {
    cursor:      pointer;
    font-size:   15px;
    font-weight: 600;
    list-style:  none;
    padding-right: 28px;
    position:    relative;
    user-select: none;
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content:   "+";
    font-size: 20px;
    font-weight: 300;
    position:  absolute;
    right:     0;
    top:       -2px;
}

.faq-item[open] summary::after { content: "−"; }

.faq-item p {
    color:       var(--muted);
    font-size:   0.9rem;
    line-height: 1.7;
    margin-top:  12px;
}

.faq-item a { color: var(--accent); }

/* ---- CTA banner ---- */

.cta-banner {
    background: var(--accent);
    padding:    80px 24px;
    text-align: center;
}

.cta-banner h2 {
    color:          #fff;
    font-family:    'Archivo', sans-serif;
    font-size:      clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight:    800;
    letter-spacing: -0.02em;
    margin-bottom:  12px;
}

.cta-banner p {
    color:         rgba(255,255,255,.8);
    font-size:     1rem;
    margin-bottom: 32px;
}

.cta-banner .note {
    color:     rgba(255,255,255,.6);
    font-size: 13px;
    margin-top: 12px;
}

/* ---- Footer ---- */

.site-footer {
    background: #2a1e18;
    color:      #fff;
    font-size:  13px;
    padding:    56px 0 32px;
}

.footer-grid {
    display:               grid;
    gap:                   48px;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    margin-bottom:         48px;
}

.footer-brand .nav-logo {
    color:         #fff;
    margin-bottom: 12px;
}

.footer-brand p {
    color:       rgba(255,255,255,.85);
    line-height: 1.6;
    max-width:   220px;
}

.footer-col h4 {
    color:          #fff;
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.08em;
    margin-bottom:  14px;
    text-transform: uppercase;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 8px; }

.footer-col a {
    color:      rgba(255,255,255,.85);
    font-size:  13px;
    transition: color .15s;
}

.footer-col a:hover { color: #fff; }

.footer-bottom {
    align-items:     center;
    border-top:      1px solid rgba(255,255,255,.1);
    display:         flex;
    gap:             16px;
    justify-content: space-between;
    padding-top:     24px;
}

.footer-made {
    align-items: center;
    display:     flex;
    gap:         6px;
}

/* ---- Inner page hero ---- */

.page-hero {
    border-bottom: 1px solid var(--border);
    padding:       64px 0 48px;
}

.page-hero .eyebrow { margin-bottom: 16px; }

.page-hero h1 {
    font-family:    'Archivo', sans-serif;
    font-size:      clamp(2rem, 4vw, 3rem);
    font-weight:    800;
    letter-spacing: -0.03em;
    line-height:    1.15;
    margin-bottom:  16px;
    max-width:      700px;
}

.page-hero p {
    color:     var(--muted);
    font-size: 1.05rem;
    max-width: 560px;
}

/* ---- Prose content ---- */

.prose {
    max-width: 720px;
    padding:   60px 0 80px;
}

.prose h2 {
    font-family:    'Archivo', sans-serif;
    font-size:      1.4rem;
    font-weight:    800;
    letter-spacing: -0.02em;
    margin:         40px 0 12px;
}

.prose h2:first-child { margin-top: 0; }

.prose h3 {
    font-family:    'Archivo', sans-serif;
    font-size:      1.05rem;
    font-weight:    700;
    letter-spacing: -0.01em;
    margin:         28px 0 8px;
}

.prose p,
.prose li {
    color:         var(--muted);
    font-size:     0.94rem;
    line-height:   1.8;
    margin-bottom: 12px;
}

.prose ul,
.prose ol {
    margin-bottom: 16px;
    padding-left:  20px;
}

.prose li { margin-bottom: 6px; }

.prose a { color: var(--accent); }

.prose .updated {
    border-left:  3px solid var(--border);
    color:        var(--muted);
    font-size:    0.88rem;
    margin-bottom: 40px;
    padding-left: 14px;
}

/* ---- Breadcrumb ---- */

.breadcrumb {
    align-items: center;
    display:     flex;
    font-size:   13px;
    gap:         6px;
    margin-bottom: 20px;
}

.breadcrumb a {
    color:      var(--accent);
    transition: opacity .15s;
}

.breadcrumb a:hover { opacity: .75; }

.breadcrumb span { color: var(--muted); }

/* ---- How it works — detailed steps ---- */

.hiw-steps {
    counter-reset: step;
    display:       flex;
    flex-direction: column;
    gap:           0;
}

.hiw-step {
    border-left:  3px solid var(--border);
    counter-increment: step;
    margin-left:  14px;
    padding:      0 0 48px 32px;
    position:     relative;
}

.hiw-step:last-child { border-left: 3px solid transparent; }

.hiw-step::before {
    align-items:      center;
    background:       var(--accent);
    border-radius:    50%;
    color:            #fff;
    content:          counter(step);
    display:          flex;
    font-family:      'Archivo', sans-serif;
    font-size:        13px;
    font-weight:      800;
    height:           32px;
    justify-content:  center;
    left:             -17px;
    position:         absolute;
    top:              0;
    width:            32px;
}

.hiw-step h3 {
    font-family:    'Archivo', sans-serif;
    font-size:      1.15rem;
    font-weight:    800;
    letter-spacing: -0.01em;
    margin-bottom:  10px;
}

.hiw-step p {
    color:       var(--muted);
    font-size:   0.95rem;
    line-height: 1.7;
    max-width:   600px;
}

.hiw-step .step-note {
    background:    var(--warm);
    border-radius: 8px;
    color:         var(--text);
    font-size:     0.88rem;
    margin-top:    14px;
    max-width:     560px;
    padding:       12px 16px;
}

/* ---- Hamburger / mobile nav ---- */

.nav-hamburger {
    background:     none;
    border:         none;
    cursor:         pointer;
    display:        none;
    flex-direction: column;
    gap:            5px;
    padding:        6px 4px;
}

.nav-hamburger span {
    background:    var(--text);
    border-radius: 2px;
    display:       block;
    height:        2px;
    transition:    all .2s;
    width:         22px;
}

.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-drawer {
    background:  #fff;
    border-top:  1px solid var(--border);
    box-shadow:  0 8px 24px rgba(0,0,0,.08);
    display:     none;
    left:        0;
    padding:     4px 24px 20px;
    position:    absolute;
    right:       0;
    top:         64px;
    z-index:     99;
}

.nav-drawer.open { display: block; }

.nav-drawer a {
    border-bottom:   1px solid var(--border);
    color:           var(--text);
    display:         block;
    font-size:       15px;
    font-weight:     500;
    padding:         12px 0;
    text-decoration: none;
    transition:      color .15s;
}

.nav-drawer a:hover      { color: var(--accent); }
.nav-drawer a:last-child { border-bottom: none; }

.nav-drawer-ctas {
    display:     flex;
    gap:         10px;
    margin-top:  16px;
}

/* ---- Article + sidebar layout ---- */

.article-layout {
    align-items:           start;
    display:               grid;
    gap:                   64px;
    grid-template-columns: 1fr 300px;
    padding:               56px 0 80px;
}

.article-sidebar {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    position:       sticky;
    top:            84px;
}

/* ---- Numbered step list (guide articles) ---- */

.steps-ol {
    counter-reset: step;
    list-style:    none;
    margin:        16px 0 0;
    padding:       0;
}

.steps-ol li {
    position:          relative;
    color:             var(--muted);
    counter-increment: step;
    font-size:         0.9rem;
    line-height:       1.6;
    margin-bottom:     10px;
    padding-left:      28px;
}

.steps-ol li::before {
    position:        absolute;
    left:            0;
    top:             2px;
    align-items:     center;
    background:      var(--accent);
    border-radius:   50%;
    color:           #fff;
    content:         counter(step);
    display:         inline-flex;
    font-size:       11px;
    font-weight:     700;
    height:          20px;
    justify-content: center;
    width:           20px;
}

/* ---- Guides archive ---- */

.guides-header {
    background:    var(--warm);
    border-bottom: 1px solid var(--border);
    padding:       56px 0 48px;
}

.guides-header h1 {
    font-family:    'Archivo', sans-serif;
    font-size:      clamp(2rem, 4vw, 2.8rem);
    font-weight:    800;
    letter-spacing: -0.03em;
    line-height:    1.15;
    margin:         10px 0 14px;
}

.guides-header .sub {
    color:     var(--muted);
    font-size: 1rem;
    max-width: 480px;
}

.guides-grid {
    display:               grid;
    gap:                   24px;
    grid-template-columns: repeat(2, 1fr);
    margin-top:            0;
}

.guide-card {
    background:    #fff;
    border:        1px solid var(--border);
    border-radius: 14px;
    display:       block;
    padding:       28px 28px 24px;
    transition:    border-color .15s, box-shadow .15s;
}

.guide-card:hover {
    border-color: var(--accent);
    box-shadow:   0 4px 20px rgba(176, 80, 48, .08);
}

.guide-card-cat {
    color:          var(--accent);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.1em;
    margin-bottom:  12px;
    text-transform: uppercase;
}

.guide-card h2 {
    font-family:    'Archivo', sans-serif;
    font-size:      1.15rem;
    font-weight:    800;
    letter-spacing: -0.02em;
    line-height:    1.25;
    margin-bottom:  10px;
}

.guide-card p {
    color:         var(--muted);
    font-size:     0.88rem;
    line-height:   1.65;
    margin-bottom: 20px;
}

.guide-card-cta {
    color:       var(--accent);
    font-size:   0.88rem;
    font-weight: 600;
}

/* ---- 404 ---- */

.error-grid {
    display:               grid;
    gap:                   24px;
    grid-template-columns: repeat(3, 1fr);
}

.error-more {
    color:      var(--muted);
    font-size:  0.95rem;
    margin-top: 40px;
}

.error-more a {
    color:       var(--accent);
    font-weight: 600;
}

/* ---- Responsive ---- */

@media (max-width: 1100px) {
    .footer-grid  { grid-template-columns: 2fr 1fr 1fr; }
}

@media (max-width: 860px) {
    .error-grid        { grid-template-columns: repeat(2, 1fr); }
    .guides-grid       { grid-template-columns: 1fr; }
    .nav-links         { display: none; }
    .nav-hamburger     { display: flex; }
    .article-layout    { display: block; padding: 32px 0 60px; }
    .article-sidebar   { margin-top: 40px; position: static; }
    .features-grid     { grid-template-columns: repeat(2, 1fr); }
    .steps-grid        { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid      { grid-template-columns: 1fr; }
    .footer-grid       { grid-template-columns: 1fr 1fr 1fr; }
}

@media (max-width: 640px) {
    .container         { padding: 0 16px; }
    .error-grid        { grid-template-columns: 1fr; }
    .article-layout    { padding: 24px 0 48px; }
    .features-grid     { grid-template-columns: 1fr; }
    .steps-grid        { grid-template-columns: 1fr; }
    .footer-grid       { grid-template-columns: 1fr 1fr; }
    .hero h1           { font-size: 2.2rem; }
    .section-title     { font-size: 1.6rem; }
    .pricing-grid      { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hero-ctas         { flex-direction: column; }
    .footer-grid       { grid-template-columns: 1fr; }
    .footer-bottom     { flex-direction: column; align-items: flex-start; gap: 8px; }
    .nav-ctas .nav-login { display: none; }
}