:root{
  --sage:#497B7A; --sage-deep:#2F4F4E; --sage-tint:#F1F5F4;
  --rosewood:#C77B85; --rosewood-deep:#A2545F; --rose-tint:#F7EFF0;
  --gold:#D4AF37; --gold-deep:#B8860B;
  --graphite:#37474F; --ivory:#FEFDFB; --line:#EDE6E1;
  --muted:#9a938e; --body:#6b7378;
  --sans:'Poppins','Segoe UI',system-ui,sans-serif;
  --header-h:72px;
}
*{box-sizing:border-box;}
html{scroll-padding-top:calc(var(--header-h) + 12px);}
.skip-link{position:absolute;left:-999px;top:0;background:var(--sage-deep);color:#fff;padding:10px 16px;z-index:1000;}
.skip-link:focus{left:8px;top:8px;border-radius:8px;}

/* Header */
.site-header{position:sticky;top:0;z-index:900;background:rgba(254,253,251,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);}
.header-inner{max-width:1200px;margin:0 auto;padding:0 24px;height:var(--header-h);
  display:flex;align-items:center;gap:28px;}
.brand{display:flex;align-items:center;}
.brand-logo{height:44px;width:auto;display:block;}
.primary-nav{margin-left:auto;}
.nav-list{list-style:none;display:flex;gap:6px;margin:0;padding:0;}
.nav-item{position:relative;}
.nav-link{display:inline-flex;align-items:center;gap:6px;background:none;border:0;cursor:pointer;
  font:600 15px/1 var(--sans);color:var(--graphite);text-decoration:none;padding:10px 14px;border-radius:10px;}
.nav-link:hover,.nav-link:focus-visible{background:var(--sage-tint);color:var(--sage-deep);}
.nav-link[aria-current="page"]{color:var(--sage);}
.caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-3px;}
.dropdown-menu{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 8px);left:0;min-width:252px;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(55,71,79,.10);
  display:flex;flex-direction:column;z-index:20;
  opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none;
  transition:opacity .15s ease,transform .15s ease,visibility 0s linear .15s;}
/* transparent bridge over the gap so moving into the menu never drops the hover */
.has-dropdown:hover::after{content:"";position:absolute;left:0;top:100%;width:252px;height:14px;}
/* hover just colours the hovered text — no background */
.dropdown-menu a{text-decoration:none;display:block;color:var(--graphite);font:500 14.5px/1.3 var(--sans);padding:11px 12px;transition:color .12s;}
.dropdown-menu a:hover,.dropdown-menu a:focus-visible{color:var(--rosewood);background:none;}
.has-dropdown:hover > .dropdown-menu,
.has-dropdown:focus-within > .dropdown-menu,
.dropdown-menu.open{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto;
  transition:opacity .15s ease,transform .15s ease;}
.auth-actions{display:flex;gap:10px;align-items:center;}
/* Chevron toggle + in-menu auth are mobile-only; hidden on desktop */
.submenu-toggle{display:none;}
.nav-auth{display:none;}
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 14px/1 var(--sans);
  padding:11px 18px;border-radius:999px;text-decoration:none;cursor:pointer;border:1px solid transparent;transition:.15s;}
.btn-ghost{color:var(--sage-deep);border-color:var(--line);background:#fff;}
.btn-ghost:hover{border-color:var(--sage);}
.btn-primary{background:var(--sage);color:#fff;}
.btn-primary:hover{background:var(--sage-deep);}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:10px;margin-left:auto;}
.nav-toggle-bar{width:24px;height:2px;background:var(--graphite);border-radius:2px;}

/* Footer */
.site-footer{background:var(--sage-deep);color:#e8efee;margin-top:64px;}
.footer-inner{max-width:1200px;margin:0 auto;padding:56px 24px 32px;display:grid;grid-template-columns:1.2fr 3fr;gap:40px;}
.footer-logo{height:44px;filter:brightness(0) invert(1);opacity:.94;}
.footer-tagline{color:#b9c9c7;font:400 14px/1.6 var(--sans);max-width:260px;margin:14px 0 0;}
.footer-social{display:flex;gap:10px;margin-top:20px;}
.footer-social a{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);transition:background .2s,border-color .2s,transform .2s;}
.footer-social a svg{width:17px;height:17px;fill:#dfe8e7;transition:fill .2s;}
.footer-social a:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32);transform:translateY(-2px);}
.footer-social a:hover svg{fill:#fff;}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.footer-col h4{font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;color:var(--gold);margin:0 0 14px;}
.footer-col a{display:block;color:#dfe8e7;text-decoration:none;font:400 14px/1 var(--sans);padding:7px 0;}
.footer-col a:hover{color:#fff;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);max-width:1200px;margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;}
.footer-copy{color:#93a8a5;font:400 13px/1.5 var(--sans);}
.footer-copy a{color:#cdddda;text-decoration:underline;}
.footer-legal{display:flex;gap:20px;flex-wrap:wrap;}
.footer-legal a{color:#cdddda;text-decoration:none;font:500 13px/1 var(--sans);}
.footer-legal a:hover{color:#fff;}

/* Mobile */
@media (max-width:900px){
  .nav-toggle{display:flex;}
  .auth-actions{display:none;}          /* header stays clean: logo + hamburger only */
  .primary-nav{position:fixed;inset:var(--header-h) 0 auto 0;background:#fff;border-bottom:1px solid var(--line);
    margin:0;padding:12px 16px 22px;display:none;box-shadow:0 12px 30px rgba(55,71,79,.12);
    max-height:calc(100vh - var(--header-h));overflow-y:auto;}
  .primary-nav.open{display:block;}
  .nav-list{flex-direction:column;gap:2px;}
  .nav-item{position:static;}
  .nav-link{width:100%;padding:12px 14px;}
  .nav-link .caret{display:none;}       /* replaced by the chevron toggle on mobile */
  /* Dropdown parent row: link fills the row, chevron button sits at the end */
  .has-dropdown{display:flex;flex-wrap:wrap;align-items:center;}
  .has-dropdown .nav-link{flex:1;width:auto;}
  .submenu-toggle{display:flex;align-items:center;justify-content:center;width:46px;height:46px;
    background:none;border:0;cursor:pointer;color:var(--graphite);border-radius:10px;}
  .submenu-toggle:hover,.submenu-toggle:focus-visible{background:var(--sage-tint);color:var(--sage-deep);}
  .submenu-toggle .chev{width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
    transform:rotate(45deg);margin-top:-4px;transition:transform .2s;}
  .nav-item.open .submenu-toggle .chev{transform:rotate(-135deg);margin-top:2px;}
  /* Submenu collapsed by default; expands only when its parent is toggled open */
  .dropdown-menu{position:static;flex-basis:100%;flex-direction:column;display:flex;
    opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:max-height .25s ease;
    box-shadow:none;border:0;min-width:0;margin:0;padding:0 0 0 14px;max-height:0;overflow:hidden;}
  .nav-item.open .dropdown-menu{max-height:520px;padding:2px 0 10px 14px;}
  .has-dropdown:hover::after{content:none;}
  /* Log in / Sign up live inside the menu panel on mobile */
  .nav-auth{display:flex;gap:10px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
  .nav-auth .btn{flex:1;justify-content:center;padding:13px 18px;}
  .footer-inner{grid-template-columns:1fr;}
  .footer-cols{grid-template-columns:repeat(2,1fr);}
}


/* ═══════════ Newsletter popup (lightweight, no plugin) ═══════════ */
.np-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(47,79,78,.45);animation:np-fade .2s ease;}
.np-overlay[hidden]{display:none;}
@keyframes np-fade{from{opacity:0}to{opacity:1}}
.np-modal{position:relative;width:100%;max-width:512px;background:var(--ivory);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 24px 60px rgba(47,79,78,.28);padding:42px 42px 36px;animation:np-pop .25s cubic-bezier(.2,.8,.3,1);}
@keyframes np-pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.np-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border:0;border-radius:50%;background:transparent;
  color:var(--muted);font-size:25px;line-height:1;cursor:pointer;transition:.15s;}
.np-close:hover,.np-close:focus-visible{background:var(--sage-tint);color:var(--sage-deep);outline:none;}
.np-eyebrow{font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 10px;}
.np-title{font:600 26px/1.2 var(--sans);letter-spacing:-.5px;color:var(--sage-deep);margin:0 0 12px;}
.np-text{font:400 15.5px/1.65 var(--sans);color:var(--body);margin:0 0 22px;}
.np-label{display:block;font:600 12px/1 var(--sans);color:var(--graphite);margin:0 0 7px;}
.np-row{display:flex;gap:9px;}
.np-email{flex:1;min-width:0;font:400 15px/1.4 var(--sans);color:var(--graphite);background:#fff;
  border:1px solid var(--line);border-radius:10px;padding:15px 16px;outline:none;transition:border-color .15s;}
.np-email:focus{border-color:var(--sage);}
.np-submit{font:700 14.5px/1 var(--sans);color:#fff;background:var(--sage);border:0;border-radius:10px;padding:15px 26px;cursor:pointer;transition:background .2s;white-space:nowrap;}
.np-submit:hover{background:var(--sage-deep);}
.np-consent{font:400 11.5px/1.55 var(--sans);color:var(--muted);margin:14px 0 0;}
.np-consent a{color:var(--sage);}
.np-done{text-align:center;padding:6px 0;}
.np-done-ring{width:56px;height:56px;border-radius:50%;background:#e7f4ec;color:#2f7d5b;display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 14px;}
.np-done h2{font:600 21px/1.2 var(--sans);color:var(--sage-deep);margin:0 0 8px;}
.np-done p{font:400 14px/1.6 var(--sans);color:var(--body);margin:0;}
@media (max-width:560px){
  .np-overlay{align-items:flex-end;padding:0;}
  .np-modal{max-width:none;border-radius:18px 18px 0 0;padding:24px 20px 22px;animation:np-slide .28s ease;}
  @keyframes np-slide{from{transform:translateY(100%)}to{transform:none}}
  .np-row{flex-direction:column;}
  .np-submit{width:100%;padding:14px 20px;}
}

/* Mobile: stack editorial pillar grids (feature / numbered / course) */
@media (max-width:640px){
  .feature-grid,.num-grid,.course-grid{grid-template-columns:1fr !important;gap:26px !important;}
}

/* ═══ Shared "Follow TheNailWiki" social row (contact, blog, news, home, dashboard) ═══ */
.follow-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.follow-row .follow-label{font:600 13px/1.3 var(--sans);color:var(--sage-deep);}
.social-icons{display:flex;gap:10px;align-items:center;}
.social-icons a{width:40px;height:40px;border-radius:10px;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s,transform .2s;}
.social-icons a svg{width:18px;height:18px;fill:var(--sage);transition:fill .2s;}
.social-icons a:hover{background:var(--sage);border-color:var(--sage);transform:translateY(-2px);}
.social-icons a:hover svg{fill:#fff;}