/* Autooopilot page system: long-form sales pages.
   Loaded after styles.css on /social /blog /audit /book. */

/* ---------- sticky section nav ---------- */
.p-subnav{position:sticky;top:64px;z-index:40;background:rgba(246,242,239,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.p-subnav-inner{max-width:1440px;margin:0 auto;padding:0 36px;display:flex;gap:26px;overflow-x:auto;scrollbar-width:none}
.p-subnav-inner::-webkit-scrollbar{display:none}
.p-subnav a{flex:none;padding:14px 0;font-size:13.5px;font-weight:600;color:var(--ink-secondary);text-decoration:none;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.p-subnav a:hover{color:var(--ink);border-bottom-color:var(--ink)}
.p-subnav a.on{color:var(--ink);border-bottom-color:var(--primary)}

/* ---------- split hero ---------- */
.p-hero{max-width:1440px;margin:0 auto;padding:64px 36px 40px;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.p-hero h1{font-size:clamp(34px,4.2vw,58px);line-height:1.02;letter-spacing:-.035em;margin:16px 0 16px}
.p-hero .lede{max-width:520px;font-size:17.5px}
.p-ctas{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.p-trust{display:flex;gap:18px;margin-top:22px;font-size:13px;color:var(--ink-secondary);flex-wrap:wrap}
.p-trust span{display:flex;align-items:center;gap:6px}
.p-trust b{color:var(--ink)}

/* clustered example posts */
.p-cluster{position:relative;height:430px}
.p-cluster figure{position:absolute;margin:0;border-radius:14px;overflow:hidden;box-shadow:0 18px 40px rgba(23,21,27,.16);background:var(--surface)}
.p-cluster img{display:block;width:100%;height:100%;object-fit:cover}
.p-cluster .c1{width:44%;aspect-ratio:4/5;left:2%;top:34px;transform:rotate(-3deg);z-index:2}
.p-cluster .c2{width:40%;aspect-ratio:1/1;right:0;top:0;transform:rotate(2.5deg);z-index:1}
.p-cluster .c3{width:36%;aspect-ratio:2/3;right:14%;bottom:-6px;transform:rotate(-1.5deg);z-index:3}

/* ---------- sections ---------- */
.p-sec{max-width:1440px;margin:0 auto;padding:70px 36px}
.p-sec.tight{padding-top:34px}
.p-sec.alt{background:var(--surface-warm);max-width:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.p-sec.alt>.p-inner{max-width:1440px;margin:0 auto;padding:0 36px}
.p-inner{max-width:1440px;margin:0 auto}
.p-head{max-width:720px}
.p-head.center{margin:0 auto;text-align:center}
.p-h2{font-size:clamp(28px,3.1vw,44px);line-height:1.06;letter-spacing:-.03em;margin:10px 0 0}
.p-h3{font-size:19px;line-height:1.25;margin:0 0 6px}
.p-sub{color:var(--ink-secondary);font-size:16px;line-height:1.6;margin:14px 0 0;max-width:640px}
.eyebrow{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-secondary)}

/* ---------- problem: two column ---------- */
.p-split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;margin-top:26px}
.p-claims{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.p-claims li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;font-size:15px;line-height:1.5}
.p-claims .x{flex:none;width:22px;height:22px;border-radius:50%;background:#FBE9E7;color:#B3261E;display:grid;place-items:center;font-size:13px;font-weight:800;margin-top:1px}

/* ---------- media tiles ---------- */
.p-grid{display:grid;gap:18px;margin-top:32px;align-items:start}
.p-grid.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.p-grid.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.p-grid.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.p-tile{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.p-media{overflow:hidden;background:var(--surface-warm);position:relative}
.p-media img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}

.p-tile-body{padding:15px 17px 18px}
.p-tile-body .k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary)}
.p-tile-body h3{font-size:15.5px;margin:6px 0 4px;line-height:1.25}
.p-tile-body p{margin:0;font-size:13.8px;line-height:1.5;color:var(--ink-secondary)}
.p-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.p-chip{font-size:13px;font-weight:600;padding:7px 13px;border-radius:999px;background:var(--surface);border:1px solid var(--border)}

/* ---------- channel frames: equal height, true shapes ---------- */
.p-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px;align-items:end}
.p-frame{background:var(--surface-warm);border:1px solid var(--border);border-radius:18px;height:auto;display:flex;align-items:center;justify-content:center;padding:18px;position:relative}
.p-frame .p-media{border-radius:10px;box-shadow:0 10px 24px rgba(23,21,27,.14)}
.pf-45{height:300px;aspect-ratio:4/5}
.pf-23{height:300px;aspect-ratio:2/3}
.pf-191{width:100%;max-width:340px;aspect-ratio:1.91/1}
.p-frame .tag{position:absolute;top:12px;left:14px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-secondary);background:rgba(254,251,244,.9);padding:4px 9px;border-radius:999px;border:1px solid var(--border)}
.p-frame .dim{position:absolute;bottom:12px;right:14px;font-size:11.5px;font-weight:700;color:var(--ink-secondary)}

/* ---------- email capture ---------- */
.res-mail{display:grid;grid-template-columns:1fr;gap:16px;margin-top:22px;padding:24px 26px;background:#fff;border:1px solid var(--border);border-radius:16px}
.rm-copy b{display:block;font-size:16px}
.rm-copy span{display:block;font-size:14px;color:var(--ink-secondary);margin-top:4px}
.rm-fields{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.rm-fields input[type=email]{flex:1;min-width:240px;padding:13px 15px;border:1px solid var(--border);border-radius:10px;font-size:15px;font-family:inherit;background:var(--surface)}
.rm-fields .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.rm-msg{margin:0;font-size:14px;min-height:20px}
.rm-msg.good{color:#127A3D;font-weight:600}
.rm-msg.bad{color:#B3261E;font-weight:600}

/* ---------- result header ---------- */
.res-head{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.res-head .eyebrow{display:block;margin-bottom:6px}
.res-head b{font-size:19px;letter-spacing:-.01em}

/* ---------- result call to action ---------- */
.res-cta{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;margin-top:26px;padding:24px 26px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.res-cta b{display:block;font-size:16px}
.res-cta span{display:block;font-size:14px;color:var(--ink-secondary);margin-top:4px}

/* ---------- content cards ---------- */
.p-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px}
.p-card h3{font-size:17px;margin:0 0 8px;line-height:1.25}
.p-card p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-secondary)}
.p-card .k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--primary);display:block;margin-bottom:10px}
.p-num{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--primary);color:#fff;font-weight:800;font-size:14px;margin-bottom:14px}

/* ---------- ratio blocks ---------- */
.p-shapes-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px;align-items:end}
.p-shape-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:26px 22px;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:16px}
.p-shape-block{height:150px;width:auto;max-width:100%;border-radius:10px;box-shadow:0 10px 24px rgba(23,21,27,.12)}
.p-shape-meta{text-align:center}
.p-shape-meta b{display:block;font-size:15px}
.p-shape-meta span{display:block;font-size:12.5px;color:var(--ink-secondary);margin-top:3px}

/* ---------- three-up value cards ---------- */
.p-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:32px}
.p-trio>div{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px}
.p-trio .n{width:30px;height:30px;border-radius:9px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;margin-bottom:14px}
.p-trio b{display:block;font-size:16.5px;margin-bottom:7px}
.p-trio span{color:var(--ink-secondary);font-size:14.5px;line-height:1.55}

/* ---------- pricing ---------- */
.p-price{display:grid;grid-template-columns:1.35fr .65fr;gap:18px;margin-top:30px;align-items:stretch}
.p-price-main{background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;padding:30px 32px}
.p-price-main .big{font-size:clamp(26px,2.6vw,36px);line-height:1.1;letter-spacing:-.025em;margin:8px 0 6px}
.p-price-main ul{list-style:none;padding:0;margin:20px 0 0;display:grid;gap:11px}
.p-price-main li{display:flex;gap:10px;font-size:15px;line-height:1.45}
.p-price-main .tick{flex:none;color:var(--primary);font-weight:800}
.p-addon{background:var(--surface-warm);border:1px dashed var(--border);border-radius:18px;padding:26px}
.p-addon .k{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-secondary)}
.p-addon h3{font-size:18px;margin:8px 0 8px;line-height:1.25}
.p-addon p{margin:0 0 14px;font-size:14px;line-height:1.55;color:var(--ink-secondary)}
.p-addon a{font-size:14px;font-weight:700;color:var(--primary);text-decoration:none}

/* ---------- FAQ two column ---------- */
.p-faq{display:grid;grid-template-columns:340px 1fr;gap:56px;margin-top:34px;align-items:start}
.p-faq .aside{position:sticky;top:130px}
.p-faq details{border-top:1px solid var(--border);padding:20px 0}
.p-faq details:last-of-type{border-bottom:1px solid var(--border)}
.p-faq summary{font-size:16.5px;font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary:after{content:"+";font-weight:400;color:var(--ink-secondary);font-size:20px;line-height:1}
.p-faq details[open] summary:after{content:"–"}
.p-faq p{margin:12px 0 0;font-size:15px;line-height:1.6;color:var(--ink-secondary);max-width:680px}

/* ---------- closing band ---------- */
.p-band{background:var(--ink);color:#F6F2EF;padding:70px 36px;margin-top:20px}
.p-band .p-band-inner{max-width:1440px;margin:0 auto;display:grid;grid-template-columns:1.4fr .6fr;gap:40px;align-items:center}
.p-band h2{font-size:clamp(26px,2.9vw,40px);line-height:1.06;letter-spacing:-.03em;margin:0}
.p-band h2 em{font-family:var(--serif);font-style:italic}
.p-band p{color:rgba(246,242,239,.72);font-size:16px;line-height:1.6;margin:14px 0 0;max-width:520px}
.p-band .actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.p-band .button-primary{background:#F6F2EF;color:var(--ink)}
.p-band .button-outline{border-color:rgba(246,242,239,.35);color:#F6F2EF}

/* ---------- responsive ---------- */
@media(max-width:1080px){
  .p-hero{grid-template-columns:1fr;gap:36px}
  .p-cluster{height:340px;max-width:520px}
  .p-split,.p-price,.p-faq{grid-template-columns:1fr;gap:28px}
  .p-faq .aside{position:static}
  .p-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .p-band .p-band-inner{grid-template-columns:1fr}
  .p-band .actions{justify-content:flex-start}
}
@media(max-width:760px){
  .p-shape-block{height:118px}
  .p-subnav{top:56px}
  .p-subnav-inner,.p-hero,.p-sec,.p-band,.p-sec.alt>.p-inner{padding-left:20px;padding-right:20px}
  .p-hero{padding-top:40px}
  .p-sec{padding-top:48px;padding-bottom:48px}
  .p-grid.g3,.p-grid.g2,.p-grid.g4,.p-trio,.p-frames{grid-template-columns:1fr}
  .p-frame{height:320px}
  .p-cluster{height:300px}
  .p-band{padding-top:48px;padding-bottom:48px}
}

/* ---------- plans (pricing page) ---------- */
.p-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px;align-items:stretch}
.p-plan{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:30px 26px;display:flex;flex-direction:column}
.p-plan.is-target{border:1.5px solid var(--ink);box-shadow:0 22px 60px rgba(23,21,27,.10)}
.p-plan .flag{position:absolute;top:-12px;left:24px;background:var(--ink);color:#FEFBF4;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.p-plan h3{font-size:19px;margin:0 0 5px}
.p-plan .for{font-size:13.5px;color:var(--ink-secondary);line-height:1.45;min-height:40px}
.p-plan .amount{display:flex;align-items:baseline;gap:7px;margin:18px 0 3px}
.p-plan .amount b{font-size:42px;letter-spacing:-.035em;line-height:1}
.p-plan .annual{font-size:12.5px;color:var(--ink-secondary)}
.p-plan .credit{margin:18px 0 0;padding:12px 14px;border-radius:11px;background:var(--surface-warm);font-size:13.5px;font-weight:700;line-height:1.4}
.p-plan ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px}
.p-plan li{display:flex;gap:9px;font-size:14px;line-height:1.45;color:var(--ink-secondary)}
.p-plan li .tick{color:var(--primary);font-weight:800;flex:none}
.p-plan .p-ctas{margin-top:auto;padding-top:24px}
.p-plan .p-ctas a{width:100%;justify-content:center;text-align:center}
.p-addon-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:22px}
.p-addon-row>div{background:var(--surface-warm);border:1px solid var(--border);border-radius:14px;padding:18px}
.p-addon-row b{display:block;font-size:14.5px}
.p-addon-row span{display:block;font-size:12.5px;color:var(--ink-secondary);margin-top:5px;line-height:1.45}
.p-matrix{width:100%;border-collapse:collapse;margin-top:32px;font-size:14px}
.p-matrix th,.p-matrix td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--border);vertical-align:top}
.p-matrix thead th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-secondary);font-weight:800}
.p-matrix td:not(:first-child),.p-matrix th:not(:first-child){text-align:center}
.p-matrix tbody tr td:first-child{font-weight:600}
.p-matrix .yes{color:var(--primary);font-weight:800}
.p-matrix .no{color:var(--ink-secondary)}
@media(max-width:1080px){.p-plans{grid-template-columns:1fr}.p-addon-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.p-addon-row{grid-template-columns:1fr}.p-matrix{font-size:12.5px}.p-matrix th,.p-matrix td{padding:10px 7px}}