/*
Theme Name: PDFLayerExtract
Theme URI: https://pdflayerextract.com
Author: PDFLayerExtract
Description: Landing + blog theme for PDFLayerExtract. Deep royal-blue design, vibrant layer palette, native WordPress blog. Built to run on Hello Elementor or standalone.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: pdflayerextract
*/

:root {
  --ink: #11132A;
  --ink-70: rgba(17,19,42,.66);
  --ink-45: rgba(17,19,42,.46);
  --navy: #0D1340;
  --navy-2: #18206B;
  --blue: #2E3FD9;
  --blue-deep: #1F2BAE;
  --blue-bright: #5267FF;
  --pink: #FA1BA8;
  --surface: #F4F6FC;
  --card: #FFFFFF;
  --border: #E2E8F5;
  --border-soft: #EDF1F9;
  --green: #16B981;

  /* vibrant layer palette */
  --layer-spot:  #4361FF;
  --layer-clear: #A24BFF;
  --layer-cut:   #FF2D8B;
  --layer-print: #04D9A4;
  --layer-info:  #FFB22E;

  /* blog category colors */
  --c-guides: #4361FF;
  --c-explainers: #A24BFF;
  --c-prepress: #FF2D8B;
  --c-basics: #04D9A4;

  --sh-sm: 0 2px 8px rgba(17,25,80,.05);
  --sh-md: 0 18px 40px -22px rgba(17,25,80,.22);
  --sh-lg: 0 40px 80px -34px rgba(17,25,80,.40);
  --r: 16px;
  --r-lg: 22px;
  --maxw: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; line-height: 1.5; overflow-x: hidden; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; position: relative; }

h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; }
h2 { font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.08; letter-spacing: -0.025em; }
h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.body-lg { font-size: 19px; line-height: 1.55; }
p, li, .body { font-size: 16px; }
.meta { font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mono { font-family: 'JetBrains Mono', monospace; }
a { color: inherit; text-decoration: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-family: inherit; font-size: 16px; font-weight: 600; padding: 15px 26px; border-radius: 12px; border: none; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s; text-align: center; white-space: nowrap; }
.btn-primary { background: linear-gradient(180deg, var(--blue-bright), var(--blue)); color: #fff; box-shadow: 0 2px 6px rgba(31,43,174,.3), 0 16px 32px -10px rgba(46,63,217,.5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(31,43,174,.34), 0 22px 44px -10px rgba(46,63,217,.6); }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.22); }
.btn-ghost:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14); }
.btn-light { background: #fff; color: var(--blue-deep); box-shadow: 0 14px 34px -12px rgba(0,0,0,.34); }
.btn-light:hover { transform: translateY(-2px); }
.btn-grad { background: linear-gradient(110deg, var(--blue), var(--pink) 130%); color: #fff; box-shadow: 0 16px 36px -12px rgba(250,27,168,.55); }
.btn-grad:hover { transform: translateY(-2px); box-shadow: 0 22px 46px -12px rgba(250,27,168,.62); }
.btn svg { width: 18px; height: 18px; }

/* nav */
header.nav { position: sticky; top: 0; z-index: 60; background: rgba(13,19,64,.9); backdrop-filter: blur(16px) saturate(1.3); border-bottom: 1px solid rgba(255,255,255,.08); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; color: #fff; }
.logo .mark { width: 30px; height: 30px; border-radius: 8px; position: relative; flex: 0 0 auto; background: linear-gradient(140deg, var(--blue-bright), var(--blue-deep)); box-shadow: 0 8px 18px -6px rgba(46,63,217,.7); }
.logo .mark span { position: absolute; left: 6px; right: 6px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.95); }
.logo .mark span:nth-child(1){ top: 8px; opacity:.5; }
.logo .mark span:nth-child(2){ top: 14px; opacity:.78; }
.logo .mark span:nth-child(3){ top: 20px; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a.link { color: rgba(255,255,255,.72); font-size: 15px; font-weight: 500; transition: color .14s; }
.nav-links a.link:hover, .nav-links a.link.active { color: #fff; }
@media (max-width: 880px) { .nav-links .link { display: none; } }

/* hero */
.hero { position: relative; padding: 88px 0 96px; color: #fff; overflow: hidden; background: radial-gradient(820px 520px at 80% -8%, rgba(82,103,255,.42), transparent 58%), radial-gradient(700px 600px at 0% 100%, rgba(46,63,217,.34), transparent 60%), linear-gradient(165deg, var(--navy), var(--navy-2)); }
.hero .waves { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .5; z-index: 0; }
.hero-grid { display: grid; grid-template-columns: 1.04fr .96fr; gap: 56px; align-items: center; position: relative; z-index: 1; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 48px; } }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; color: #C7D0FF; background: rgba(82,103,255,.16); padding: 8px 15px; border-radius: 100px; margin-bottom: 24px; border: 1px solid rgba(120,140,255,.3); }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #7E92FF; box-shadow: 0 0 0 4px rgba(126,146,255,.22); }
.hero h1 { margin-bottom: 22px; }
.hero h1 .grad { background: linear-gradient(100deg, #A6B1FF, #FA1BA8 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .sub { color: rgba(255,255,255,.76); max-width: 500px; margin-bottom: 32px; }
.hero-cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-note { display: flex; align-items: center; gap: 9px; color: rgba(255,255,255,.62); font-size: 14px; margin-top: 26px; }
.hero-note svg { width: 17px; height: 17px; color: var(--green); flex: 0 0 auto; }

/* preview panel */
.panel { background: var(--card); border: 1px solid rgba(255,255,255,.6); border-radius: var(--r-lg); box-shadow: 0 50px 100px -36px rgba(0,0,0,.6); overflow: hidden; }
.panel-bar { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--border-soft); background: #FAFBFE; }
.panel-bar .fname { font-size: 13px; font-weight: 600; color: var(--ink-70); margin-left: 6px; }
.panel-bar .tag { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--green); background: rgba(22,185,129,.12); padding: 4px 9px; border-radius: 7px; }
.tdot { width: 11px; height: 11px; border-radius: 50%; }
.panel-body { display: grid; grid-template-columns: 1.12fr 1fr; }
@media (max-width: 540px){ .panel-body { grid-template-columns: 1fr; } }
.stage { position: relative; aspect-ratio: 4/3.5; background: radial-gradient(circle at 50% 38%, #EEF1FB, #E4E9F7); border-right: 1px solid var(--border-soft); overflow: hidden; }
@media (max-width: 540px){ .stage { border-right: none; border-bottom: 1px solid var(--border-soft); } }
.sheet { position: absolute; inset: 17% 22% 17% 22%; border-radius: 8px; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; transition: transform .85s cubic-bezier(.4,0,.2,1), opacity .5s ease; box-shadow: 0 18px 32px -14px rgba(17,25,80,.45); }
.sheet[data-type="info"]  { background: var(--layer-info); }
.sheet[data-type="print"] { background: var(--layer-print); }
.sheet[data-type="cut"]   { background: var(--layer-cut); }
.sheet[data-type="clear"] { background: var(--layer-clear); }
.sheet[data-type="spot"]  { background: var(--layer-spot); }
.stage.fanned .sheet[data-type="info"]  { transform: translate(-70px, 60px); }
.stage.fanned .sheet[data-type="print"] { transform: translate(-35px, 30px); }
.stage.fanned .sheet[data-type="cut"]   { transform: translate(0,0); }
.stage.fanned .sheet[data-type="clear"] { transform: translate(35px, -30px); }
.stage.fanned .sheet[data-type="spot"]  { transform: translate(70px, -60px); }
.sheet.dimmed { opacity: .12; }
.layers { padding: 14px; display: flex; flex-direction: column; background: var(--card); }
.layers .lhead { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-45); margin: 4px 4px 12px; }
.lrow { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px; cursor: pointer; transition: background .14s; user-select: none; }
.lrow:hover { background: var(--surface); }
.lrow .sw { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto; }
.lrow .ln { font-size: 14px; font-weight: 500; }
.lrow .lt { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--ink-45); text-transform: uppercase; margin-left: auto; margin-right: 4px; }
.lrow .eye { width: 16px; height: 16px; color: var(--ink-45); transition: color .14s, opacity .14s; }
.lrow.off { opacity: .45; }
.lrow.off .eye { opacity: .4; }
.price-card { margin-top: auto; padding: 14px; border: 1px dashed var(--border); border-radius: 12px; background: var(--surface); display: flex; align-items: center; justify-content: space-between; }
.price-card .pl { font-size: 13px; color: var(--ink-70); }
.price-card .pl b { display: block; color: var(--ink); font-size: 14px; }
.price-card .pv-note { font-size: 11.5px; font-weight: 700; line-height: 1.35; text-align: right; color: var(--blue); }

/* strip */
.strip { padding: 28px 0; background: var(--card); border-bottom: 1px solid var(--border); }
.strip-inner { display: flex; align-items: center; justify-content: center; gap: 14px 32px; flex-wrap: wrap; }
.strip .label { font-size: 12px; font-weight: 700; color: var(--ink-45); letter-spacing: .1em; text-transform: uppercase; }
.strip .item { font-size: 14.5px; font-weight: 600; color: var(--ink-70); display: flex; align-items: center; gap: 8px; }
.strip .item svg { width: 16px; height: 16px; color: var(--green); flex: 0 0 auto; }

/* sections */
section.block { padding: 96px 0; }
.sec-head { max-width: 660px; margin-bottom: 52px; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec-head .meta { color: var(--blue); margin-bottom: 14px; display: block; }
.sec-head h2 { margin-bottom: 16px; }
.sec-head p { color: var(--ink-70); font-size: 19px; }

/* gap */
.gap { background: var(--card); border-bottom: 1px solid var(--border); }
.gap-grid { display: grid; grid-template-columns: 1fr .86fr; gap: 60px; align-items: center; }
@media (max-width: 960px){ .gap-grid { grid-template-columns: 1fr; gap: 44px; } }
.gap .lede { font-size: 17px; color: var(--ink-70); }
.gap-points { display: flex; flex-direction: column; gap: 16px; margin-top: 26px; }
.gap-point { display: flex; gap: 14px; align-items: flex-start; }
.gap-point .pc { width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(46,63,217,.09); }
.gap-point .pc svg { width: 16px; height: 16px; color: var(--blue); }
.gap-point b { font-weight: 700; }
.gap-point span { color: var(--ink-70); font-size: 15px; }
.ba { display: grid; gap: 14px; }
.ba-card { border: 1px solid var(--border); border-radius: var(--r); padding: 20px 22px; background: var(--surface); }
.ba-card.after { background: var(--card); box-shadow: var(--sh-md); }
.ba-card .ba-tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; display: inline-block; }
.ba-card.before .ba-tag { color: var(--layer-cut); }
.ba-card.after  .ba-tag { color: var(--layer-print); }
.ba-flat { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--ink-70); padding: 12px 14px; border-radius: 10px; background: var(--card); border: 1px solid var(--border); }
.ba-flat .stack { width: 22px; height: 22px; border-radius: 5px; background: linear-gradient(135deg, var(--layer-spot), var(--layer-cut)); flex:0 0 auto; }
.ba-list { display: flex; flex-direction: column; gap: 7px; }
.ba-li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-family:'JetBrains Mono',monospace; color: var(--ink); padding: 9px 13px; border-radius: 9px; background: var(--surface); }
.ba-li .d { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.ba-arrow { display: grid; place-items: center; color: var(--blue); }
.ba-arrow svg { width: 24px; height: 24px; }

/* steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
@media (max-width: 900px){ .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px){ .steps { grid-template-columns: 1fr; } }
.step { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 26px 22px; position: relative; box-shadow: var(--sh-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(46,63,217,.3); }
.step .n { font-family:'JetBrains Mono',monospace; font-size: 14px; font-weight: 600; color: #fff; margin-bottom: 16px; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(180deg, var(--blue-bright), var(--blue)); box-shadow: 0 10px 22px -10px rgba(46,63,217,.6); }
.step h3 { margin-bottom: 7px; }
.step p { color: var(--ink-70); font-size: 14.5px; }
.step .free { position: absolute; top: 20px; right: 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; color: var(--green); background: rgba(22,185,129,.12); padding: 3px 8px; border-radius: 6px; }

/* audience cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px){ .cards { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 30px; box-shadow: var(--sh-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s; }
.card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(46,63,217,.3); }
.card .ic { width: 48px; height: 48px; border-radius: 13px; display: grid; place-items: center; background: rgba(46,63,217,.1); margin-bottom: 20px; }
.card .ic svg { width: 23px; height: 23px; color: var(--blue); }
.card h3 { margin-bottom: 9px; }
.card p { color: var(--ink-70); font-size: 15px; }

/* payload */
.payload { background: linear-gradient(155deg, var(--navy), var(--navy-2)); color: #fff; border-radius: var(--r-lg); padding: 54px; display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; position: relative; overflow: hidden; box-shadow: var(--sh-lg); }
.payload::before { content:""; position:absolute; top:-30%; right:-8%; width:520px; height:520px; background: radial-gradient(circle, rgba(82,103,255,.4), transparent 62%); pointer-events:none; }
@media (max-width: 880px){ .payload { grid-template-columns: 1fr; padding: 36px; gap: 34px; } }
.payload .meta { color: #FA1BA8; margin-bottom: 14px; display: block; position: relative; }
.payload h2 { color: #fff; margin-bottom: 16px; position: relative; }
.payload p { color: rgba(255,255,255,.74); font-size: 16px; position: relative; }
.zip { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 14px; overflow: hidden; position: relative; backdrop-filter: blur(6px); }
.zip .zhead { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid rgba(255,255,255,.1); font-size: 13px; font-weight: 600; }
.zip .zhead svg { width: 18px; height: 18px; color: #9FB0FF; }
.zfile { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid rgba(255,255,255,.06); font-family:'JetBrains Mono',monospace; font-size: 13px; }
.zfile:last-child { border-bottom: none; }
.zfile .fdot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.zfile .fsize { margin-left: auto; color: rgba(255,255,255,.4); font-size: 12px; }
.zfile.script { color: #9FB0FF; }

/* pricing */
.pricing { text-align: center; }
.bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; max-width: 940px; margin-left: auto; margin-right: auto; }
@media (max-width: 780px){ .bands { grid-template-columns: 1fr; } }
.band { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 32px 26px; box-shadow: var(--sh-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s; text-align: left; }
.band:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(46,63,217,.3); }
.band .picon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: rgba(46,63,217,.1); margin-bottom: 18px; }
.band .picon svg { width: 21px; height: 21px; color: var(--blue); }
.band .bsize { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin-bottom: 8px; }
.band .bnote { font-size: 14.5px; color: var(--ink-70); line-height: 1.5; }
.pricing .footline { color: var(--ink-70); font-size: 15px; max-width: 580px; margin: 0 auto; }
.pricing .footline b { color: var(--ink); font-weight: 600; }

/* faq */
.faq { background: var(--card); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 18px; font-weight: 600; color: var(--ink); padding: 24px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.faq-q .ch { width: 22px; height: 22px; flex: 0 0 auto; color: var(--blue); transition: transform .24s ease; }
.faq-item.open .ch { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p { color: var(--ink-70); font-size: 16px; padding-bottom: 24px; max-width: 700px; }

/* final CTA */
.final { padding: 40px 0 110px; }
.final-card { position: relative; overflow: hidden; text-align: center; background: radial-gradient(620px 360px at 50% 0%, rgba(82,103,255,.45), transparent 62%), linear-gradient(160deg, var(--navy), var(--navy-2)); color: #fff; border-radius: var(--r-lg); padding: 80px 32px; box-shadow: var(--sh-lg); }
.final-card .meta { color: #FA1BA8; display:block; margin-bottom: 16px; position: relative; }
.final-card h2 { color:#fff; max-width: 620px; margin: 0 auto 18px; position: relative; }
.final-card p { color: rgba(255,255,255,.8); font-size: 18px; max-width: 520px; margin: 0 auto 34px; position: relative; }
.final-card .btn-light { position: relative; }

/* footer */
footer.site { padding: 48px 0; border-top: 1px solid var(--border); background: var(--card); }
.foot-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a { font-size: 14px; color: var(--ink-70); transition: color .14s; }
.foot-links a:hover { color: var(--blue-deep); }
.foot-copy { font-size: 13px; color: var(--ink-45); }
footer.site .logo { color: var(--ink); }

/* reveal */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } }

/* ============ BLOG ============ */
.tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; color: var(--c-guides); background: rgba(67,97,255,.1); }
.tag.guides { color: var(--c-guides); background: rgba(67,97,255,.1); }
.tag.explainers { color: var(--c-explainers); background: rgba(162,75,255,.1); }
.tag.prepress { color: var(--c-prepress); background: rgba(255,45,139,.1); }
.tag.basics { color: var(--c-basics); background: rgba(4,217,164,.12); }

.blog-hero { position: relative; overflow: hidden; color: #fff; padding: 72px 0 64px; background: radial-gradient(700px 400px at 82% -10%, rgba(250,27,168,.26), transparent 56%), radial-gradient(760px 460px at 78% -8%, rgba(82,103,255,.4), transparent 58%), linear-gradient(165deg, var(--navy), var(--navy-2)); }
.blog-hero .eyebrow { color:#F4C7EE; background:rgba(250,27,168,.14); border:1px solid rgba(250,27,168,.32); }
.blog-hero .eyebrow .dot { background:var(--pink); box-shadow:none; }
.blog-hero h1 { max-width: 760px; margin-bottom: 16px; font-size: clamp(34px, 4.6vw, 50px); }
.blog-hero p { color: rgba(255,255,255,.74); font-size: 18px; max-width: 560px; }

.blog-wrap { padding: 72px 0 96px; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 920px){ .post-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .post-grid { grid-template-columns: 1fr; } }

.post-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(46,63,217,.3); }
.post-card .thumb { height: 150px; position: relative; overflow: hidden; display:block; }
.post-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.post-card .thumb.t1 { background: linear-gradient(145deg, #1a2360, #2a3596); }
.post-card .thumb.t2 { background: linear-gradient(145deg, #2a1a55, #5a2f9c); }
.post-card .thumb.t3 { background: linear-gradient(145deg, #5a163f, #a3275f); }
.post-card .thumb.t4 { background: linear-gradient(145deg, #0c3a32, #0f6b56); }
.post-card .thumb .chip { position:absolute; bottom:12px; left:12px; z-index:1; }
.post-card .pc-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { margin-bottom: 9px; }
.post-card p { color: var(--ink-70); font-size: 14px; margin-bottom: 18px; }
.post-card .pmeta { margin-top: auto; font-size: 12.5px; color: var(--ink-45); display: flex; gap: 12px; }

.featured { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-md); margin-bottom: 40px; }
@media (max-width: 820px){ .featured { grid-template-columns: 1fr; } }
.featured .thumb { background: linear-gradient(150deg, var(--navy), var(--navy-2)); position: relative; min-height: 280px; overflow: hidden; display:block; }
.featured .thumb img { width:100%; height:100%; object-fit:cover; }
.featured .thumb .sheet { position:absolute; width:42%; aspect-ratio:1; border-radius:10px; border:1px solid rgba(255,255,255,.5); box-shadow:0 18px 32px -14px rgba(0,0,0,.5); }
.featured .thumb .s1 { background: var(--c-guides); left:20%; top:24%; }
.featured .thumb .s2 { background: var(--c-explainers); left:32%; top:34%; }
.featured .thumb .s3 { background: var(--c-prepress); left:44%; top:44%; }
.featured .fbody { padding: 38px 40px; display: flex; flex-direction: column; }
.featured .flabel { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pink); margin-bottom: 16px; }
.featured h2 { font-size: 27px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 12px 0 12px; }
.featured p { color: var(--ink-70); font-size: 15.5px; margin-bottom: 22px; }
.featured .pmeta { margin-top: auto; font-size: 13px; color: var(--ink-45); display: flex; gap: 14px; }

.sec-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 26px; gap: 16px; flex-wrap: wrap; }
.sec-title h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.sec-title .all { font-size: 14px; font-weight: 600; color: var(--blue); }

/* single post */
.art-hero { position: relative; overflow: hidden; color: #fff; padding: 60px 0 56px; background: radial-gradient(680px 380px at 80% -10%, rgba(82,103,255,.4), transparent 58%), linear-gradient(165deg, var(--navy), var(--navy-2)); }
.art-hero .crumbs { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 22px; }
.art-hero .crumbs a:hover { color: #fff; }
.art-hero .tag { color:#C7D0FF; background: rgba(82,103,255,.18); margin-bottom: 18px; }
.art-hero h1 { font-size: clamp(30px, 4.2vw, 46px); font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; max-width: 820px; margin-bottom: 20px; }
.art-meta { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(255,255,255,.7); }
.art-meta .who { display:flex; align-items:center; gap:9px; }
.art-meta .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(140deg, var(--blue-bright), var(--pink)); }

.art-wrap { max-width: 740px; margin: 0 auto; padding: 56px 28px 40px; }
.prose > * + * { margin-top: 22px; }
.prose p { font-size: 17.5px; line-height: 1.7; color: #2a2c44; }
.prose h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 44px; line-height: 1.2; }
.prose h3 { font-size: 20px; font-weight: 700; margin-top: 34px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { font-size: 17px; line-height: 1.7; color: #2a2c44; margin-top: 8px; }
.prose a { color: var(--blue); font-weight: 600; border-bottom: 1px solid rgba(46,63,217,.3); }
.prose strong { font-weight: 700; color: var(--ink); }
.prose img { max-width: 100%; height: auto; border-radius: var(--r); margin: 12px 0; }
.prose blockquote { background: var(--card); border: 1px solid var(--border); border-left: 4px solid var(--pink); border-radius: 12px; padding: 20px 22px; box-shadow: var(--sh-sm); }
.prose blockquote p { font-size: 16px; margin: 0; color: var(--ink-70); }

.art-cta { max-width: 740px; margin: 48px auto; padding: 0 28px; }
.art-cta-card { position: relative; overflow: hidden; text-align: center; color: #fff; border-radius: var(--r-lg); padding: 44px 28px; background: radial-gradient(520px 300px at 70% 0%, rgba(250,27,168,.4), transparent 60%), linear-gradient(160deg, var(--navy), var(--navy-2)); box-shadow: var(--sh-lg); }
.art-cta-card h3 { font-size: 24px; font-weight: 800; margin-bottom: 10px; }
.art-cta-card p { color: rgba(255,255,255,.78); margin-bottom: 24px; }

.related { max-width: 1180px; margin: 0 auto; padding: 24px 28px 96px; }
.related h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 22px; }
.rel-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
@media (max-width: 760px){ .rel-grid { grid-template-columns: 1fr; } }
.rel-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--r); padding: 22px; box-shadow: var(--sh-sm); transition: transform .16s ease, box-shadow .16s ease, border-color .16s; }
.rel-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); border-color: rgba(46,63,217,.3); }
.rel-card .rt { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pink); }
.rel-card h3 { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 10px 0 0; }

/* generic page (terms, privacy...) */
.page-wrap { max-width: 760px; margin: 0 auto; padding: 64px 28px 96px; }
.page-wrap h1 { font-size: clamp(30px,4vw,44px); margin-bottom: 24px; }

/* pagination */
.ple-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 48px; }
.ple-pagination .page-numbers { display:inline-flex; align-items:center; justify-content:center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--card); color: var(--ink-70); font-weight: 600; font-size: 14px; }
.ple-pagination .page-numbers.current { background: var(--blue); color: #fff; border-color: var(--blue); }
.ple-pagination a.page-numbers:hover { border-color: var(--blue); color: var(--blue); }


/* v1.1.0: Elementor-compatible front page content area */
.ple-elementor-home { background: var(--surface); min-height: 60vh; }
.elementor-editor-active .ple-elementor-home { min-height: 80vh; }