/* ============================================================
   PALAYN BLOG (blog.html + blog articles only). Loaded after styles.css.
   Reuses the shared tokens, header, hero aurora, buttons, CTA banner,
   footer and modal; only blog-specific pieces live here.
   Theming follows styles.css: light on :root, navy on
   html[data-theme="dark"], plus the prefers-color-scheme fallback
   for before site.js sets data-theme.
   ============================================================ */

/* ============ TOKENS (blog only) ============ */
:root{
  --note-bg:#E3F1FF;
  --note-line:#0B6FD9;
  --tag-bg:#EDF1F7;
  --tag-fg:#46516A;
  --soon-tile:#E3F1FF;
  --soon-tile-fg:#0243C5;
  --rule:#E3E8F0;
  --bullet:#0B6FD9;
  --check-bg:#E3F1FF;
  --check-fg:#0B6FD9;
}
html[data-theme="dark"]{
  --note-bg:#204683; --note-line:#38B0FD;
  --tag-bg:#26529A; --tag-fg:#FFFFFF;
  --soon-tile:#26529A; --soon-tile-fg:#FFFFFF;
  --rule:#2F5A96; --bullet:#38B0FD;
  --check-bg:#26529A; --check-fg:#2EE6D6;
}
@media (prefers-color-scheme: dark){
  html:not([data-theme]){
    --note-bg:#204683; --note-line:#38B0FD;
    --tag-bg:#26529A; --tag-fg:#FFFFFF;
    --soon-tile:#26529A; --soon-tile-fg:#FFFFFF;
    --rule:#2F5A96; --bullet:#38B0FD;
    --check-bg:#26529A; --check-fg:#2EE6D6;
  }
}

/* ============ SMALL AURORA HERO (used with .hero) ============ */
.hero.blog-hero{ padding:calc(var(--header-h) + 72px) 0 88px; }
.blog-hero .hero-watermark{ height:520px; right:-4%; bottom:-46%; }
.blog-hero h1{ font-size:clamp(32px,4.4vw,54px); max-width:860px; margin-bottom:18px; }
.blog-hero .sub{ margin-bottom:0; max-width:640px; }
.blog-hero.has-cover{ padding-bottom:132px; }

.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; font-size:13.5px; color:var(--hero-text-2); margin-bottom:22px; }
.crumbs a{ color:var(--hero-link); font-weight:500; border-radius:4px; }
.crumbs a:hover{ text-decoration:underline; text-underline-offset:3px; }
.crumbs [aria-current]{ color:var(--hero-text); }

.byline{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:14px; color:var(--hero-text-2); }
.byline span + span::before{ content:""; display:inline-block; width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.6; margin-right:14px; vertical-align:middle; }
.byline b{ color:var(--hero-text); font-weight:600; }

/* category pill (hero + cards) */
.kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--eyebrow-card); margin-bottom:12px;
}
.blog-hero .kicker{ color:var(--hero-link); }

/* ============ LISTING ============ */
.blog-section{ padding:72px 0 96px; }
.blog-section h2{ font-size:clamp(24px,2.6vw,32px); font-weight:700; margin-bottom:8px; }
.blog-section .lede{ color:var(--text-2); margin-bottom:28px; max-width:640px; }

/* featured (live) guide: whole card is the link */
.guide-feature{
  display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  background:var(--card); border:1px solid var(--border); border-radius:24px;
  overflow:hidden; box-shadow:var(--shadow-lift);
  transition:transform .25s ease, border-color .25s ease;
}
.guide-feature:hover{ transform:translateY(-4px); border-color:var(--accent); }
.guide-feature:focus-visible{ outline-offset:4px; border-radius:24px; }
.guide-body{ padding:40px 40px 36px; display:flex; flex-direction:column; align-items:flex-start; }
.guide-body h3{ font-size:clamp(22px,2.2vw,28px); font-weight:700; line-height:1.2; margin-bottom:12px; }
.guide-body p{ color:var(--text-2); font-size:15.5px; margin-bottom:20px; }
.guide-meta{ font-size:13.5px; color:var(--text-2); margin-bottom:22px; }
.guide-go{ margin-top:auto; display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--link); }
.guide-go .arrow{ transition:transform .2s ease; }
.guide-feature:hover .guide-go .arrow{ transform:translateX(3px); }

/* navy art tile (navy in both themes, like the home panel) */
.art-tile{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  min-height:300px; display:flex; flex-direction:column; justify-content:space-between; padding:28px;
  background:
    radial-gradient(70% 80% at 0% 0%, rgba(2,87,209,.75), rgba(2,87,209,0) 70%),
    radial-gradient(55% 70% at 100% 100%, rgba(46,230,214,.28), rgba(46,230,214,0) 70%),
    radial-gradient(60% 60% at 100% 0%, rgba(24,142,254,.45), rgba(24,142,254,0) 70%),
    #0D2140;
}
.art-tile .hero-dots{ --hero-dot:rgba(188,200,220,.2); }
.art-route{ position:absolute; inset:0; width:100%; height:100%; z-index:-1; }
.art-code{ font-size:clamp(56px,7vw,88px); font-weight:700; letter-spacing:-.04em; line-height:1; }
.art-label{ font-size:14px; color:var(--on-navy-2); margin-top:6px; }
.art-pill{
  align-self:flex-start; display:inline-flex; align-items:center; gap:8px;
  font-size:12.5px; font-weight:600; padding:7px 12px; border-radius:999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(124,203,254,.35);
}
.art-pill svg{ color:var(--teal); }

/* coming soon: not links */
.soon-head{ margin-top:72px; }
.soon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:16px; list-style:none; }
.soon-card{
  display:flex; gap:16px; align-items:flex-start; padding:22px;
  background:var(--card); border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-card);
}
.soon-tile{
  flex:none; width:56px; height:56px; border-radius:16px; display:grid; place-items:center;
  font-size:19px; font-weight:700; letter-spacing:-.02em;
  background:var(--soon-tile); color:var(--soon-tile-fg);
}
.soon-card h3{ font-size:16px; font-weight:600; line-height:1.35; margin-bottom:6px; }
.soon-card p{ font-size:14px; line-height:1.55; color:var(--text-2); }
.soon-badge{
  display:inline-block; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; margin-bottom:10px;
  background:var(--tag-bg); color:var(--tag-fg);
}

/* ============ ARTICLE ============ */
/* illustrated cover: floats over the hero's bottom edge (like the home pillars) */
.cover-wrap{ position:relative; z-index:2; margin-top:-84px; }
.cover{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  border-radius:24px; padding:30px 36px 32px; border:1px solid #2F5A96;
  box-shadow:var(--shadow-lift);
  background:
    radial-gradient(55% 90% at 0% 0%, rgba(2,87,209,.7), rgba(2,87,209,0) 70%),
    radial-gradient(45% 80% at 100% 0%, rgba(24,142,254,.5), rgba(24,142,254,0) 70%),
    radial-gradient(40% 60% at 80% 120%, rgba(46,230,214,.25), rgba(46,230,214,0) 70%),
    #0D2140;
}
.cover :focus-visible{ outline-color:#7CCBFE; }
.cover .hero-dots{ --hero-dot:rgba(188,200,220,.18); }
.cover-top{ display:flex; justify-content:space-between; align-items:center; gap:16px; margin-bottom:26px; }
.cover-title{ font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--link-on-navy); }

.stops{ list-style:none; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; position:relative; }
.stops::before{
  content:""; position:absolute; left:calc(100% / 14); right:calc(100% / 14); top:23px; height:0;
  border-top:2px dashed rgba(124,203,254,.45);
}
.stops a{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  font-size:13px; font-weight:500; line-height:1.3; color:var(--on-navy-2); padding:0 2px 4px; border-radius:10px;
}
.stops a:hover{ color:#fff; }
.stop-ic{
  width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:#1C3F74; border:1.5px solid rgba(124,203,254,.5); color:#fff;
  transition:transform .2s ease, background-color .2s ease;
}
.stops a:hover .stop-ic{ transform:translateY(-2px); background:#0257D1; }
.stops li:first-child .stop-ic{ background:var(--pill-grad); border-color:transparent; }
.stops li:last-child .stop-ic{ background:linear-gradient(135deg,#2EE6D6,#188EFE); border-color:transparent; color:#0A1424; }
.stop-n{ font-size:11.5px; font-weight:600; letter-spacing:.08em; color:var(--link-on-navy); }

.article-section{ padding:64px 0 88px; }
.prose{ max-width:740px; margin:0 auto; font-size:17px; line-height:1.75; }
.prose > * + *{ margin-top:18px; }
.prose h2{ font-size:clamp(23px,2.4vw,30px); font-weight:700; margin-top:56px; scroll-margin-top:calc(var(--header-h) + 20px); }
.prose h3{ font-size:19px; font-weight:600; margin-top:32px; }
.prose h2 + p, .prose h3 + p{ margin-top:12px; }
.prose p, .prose li{ color:var(--text); }
.prose a{ color:var(--link); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; border-radius:2px; }
.prose a:hover{ text-decoration-thickness:2px; }
.prose strong{ font-weight:600; }
.prose ul{ list-style:none; }
.prose ul > li{ position:relative; padding-left:24px; }
.prose ul > li + li{ margin-top:10px; }
.prose ul > li::before{ content:""; position:absolute; left:4px; top:.72em; width:7px; height:7px; border-radius:50%; background:var(--bullet); }
.step-label{ display:block; font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:6px; }

.note{
  background:var(--note-bg); border-left:4px solid var(--note-line);
  border-radius:4px 16px 16px 4px; padding:18px 22px; font-size:15.5px; line-height:1.65;
}
.prose .note{ margin-top:28px; }
.note p{ color:var(--text); }

/* mid-article CTA: blue gradient in both themes */
.inline-cta{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin:40px 0 0; padding:28px 30px; border-radius:20px; color:#fff;
  background:
    radial-gradient(40% 90% at 0% 0%, rgba(10,20,36,.5), rgba(10,20,36,0) 70%),
    radial-gradient(35% 80% at 90% 130%, rgba(46,230,214,.2), rgba(46,230,214,0) 70%),
    linear-gradient(120deg,#0243C5 0%,#0257D1 45%,#0B6FD9 100%);
  box-shadow:0 24px 48px -26px rgba(2,67,197,.7);
}
.inline-cta :focus-visible{ outline-color:#FFFFFF; }
.prose .inline-cta h3{ margin:0 0 6px; font-size:19px; color:#fff; }
.prose .inline-cta p{ color:#FFFFFF; font-size:15px; line-height:1.6; }
.inline-cta .btn{ flex:none; }

/* first-week checklist */
.checklist{
  position:relative; overflow:hidden; background:var(--card); border:1px solid var(--border);
  border-radius:20px; padding:28px 28px 26px; box-shadow:var(--shadow-card);
}
.prose .checklist{ margin-top:40px; }
.checklist::before{ content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--brand-grad); }
.prose .checklist h3{ margin:0 0 16px; font-size:20px; }
.prose .checklist ul > li{ padding-left:40px; font-size:16px; line-height:1.6; }
.prose .checklist ul > li + li{ margin-top:12px; }
.prose .checklist ul > li::before{ display:none; }
.tick{
  position:absolute; left:0; top:0; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center; background:var(--check-bg); color:var(--check-fg);
}

.tags{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; }
.prose .tags{ margin-top:40px; padding-top:28px; border-top:1px solid var(--rule); }
.prose .tags li{ padding:6px 14px; border-radius:999px; font-size:13px; font-weight:500; background:var(--tag-bg); color:var(--tag-fg); }
.prose .tags li + li{ margin-top:0; }
.prose .tags li::before{ display:none; }

.sources{ font-size:15px; }
.prose .sources li + li{ margin-top:8px; }

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero.blog-hero{ padding:calc(var(--header-h) + 52px) 0 72px; }
  .blog-hero.has-cover{ padding-bottom:116px; }
  .blog-hero .hero-watermark{ height:420px; right:-160px; bottom:-140px; opacity:.09; }
  .guide-feature{ grid-template-columns:1fr; }
  .art-tile{ min-height:220px; }
  .guide-body{ padding:30px 28px 30px; }
  .stops{ grid-template-columns:repeat(4,minmax(0,1fr)); row-gap:22px; }
  .stops::before{ display:none; }
}
@media (max-width:640px){
  .hero.blog-hero{ padding:calc(var(--header-h) + 36px) 0 60px; }
  .blog-hero.has-cover{ padding-bottom:100px; }
  .blog-hero h1{ font-size:clamp(28px,8.4vw,38px); }
  .byline{ gap:4px 16px; }
  .byline span + span::before{ display:none; }
  .blog-section{ padding:48px 0 64px; }
  .soon-head{ margin-top:56px; }
  .art-tile{ min-height:190px; padding:22px; }
  .guide-body{ padding:24px 20px 26px; }
  .soon-card{ padding:18px; }
  .cover-wrap{ margin-top:-72px; }
  .cover{ padding:22px 16px 22px; border-radius:20px; }
  .cover-top{ margin-bottom:18px; }
  .stops{ grid-template-columns:1fr 1fr; gap:10px; }
  .stops a{ flex-direction:row; text-align:left; gap:10px; font-size:13.5px; padding:2px; }
  .stop-ic{ width:38px; height:38px; flex:none; }
  .stop-ic svg{ width:16px; height:16px; }
  .article-section{ padding:44px 0 64px; }
  .prose{ font-size:16.5px; }
  .prose h2{ margin-top:44px; }
  .inline-cta{ flex-direction:column; align-items:stretch; padding:24px 20px; }
  .inline-cta .btn{ width:100%; }
  .checklist{ padding:24px 18px 22px; }
}

@media (prefers-reduced-motion: reduce){
  .guide-feature, .guide-feature:hover, .stops a:hover .stop-ic{ transform:none; }
}