/* Page: Content Engine (/content-engine). First design, 2026-10-27. Copy is a draft awaiting approval.
   Everything is namespaced .ce-*; shared pieces come from nav, button, pill, hero (.h1/.desc/.ctas), stats and contact. */

/* section rhythm */
.ce{padding:calc(120 * var(--u) + 24px) var(--pad-x)}
.ce-kick{font:var(--eb-font);letter-spacing:-.01em;color:var(--ink-2)}
.ce h2{margin-top:16px;font-family:var(--xh);font-weight:400;font-size:var(--fs-display);line-height:1.02;letter-spacing:-.03em;max-width:12em;text-wrap:balance}
.ce .ce-lead{margin-top:calc(24 * var(--u) + 8px);max-width:28em;font-size:var(--fs-body-l);line-height:1.4;letter-spacing:-.01em;color:var(--ink-2)}
.ce-head{display:grid;grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr);column-gap:calc(80 * var(--u));align-items:end}
.ce-head .ce-lead{margin-top:0}

/* hero: same type as the home hero, in normal flow */
.ce-hero{padding:max(calc(250 * var(--u)), 170px) var(--pad-x) calc(60 * var(--u) + 16px);text-align:center}
.ce-hero .ce-kick{color:var(--ink)}
.ce-hero .h1{margin:calc(20 * var(--u) + 8px) auto 0;max-width:14em}
.ce-hero .desc{max-width:34em}

/* dark bands */
.ce-dark{--bg:var(--night);--ink-2:var(--mist);background:var(--bg);color:var(--paper)}
.ce-dark .ce-kick{color:var(--paper)}
.ce-dark .ce-lead{color:var(--ink-2)}

/* why now: statement left, lead + three definitions right */
.ce-shift{margin-top:calc(80 * var(--u) + 24px)}
.ce-shift .ce-head{align-items:start}
.ce-shift h2{max-width:9em}
.ce-defs{list-style:none;display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:calc(24 * var(--u) + 8px);margin-top:calc(64 * var(--u) + 16px);padding-top:calc(32 * var(--u) + 12px);border-top:1px solid rgba(255,255,255,.18)}
.ce-defs b{display:block;font-family:var(--xhmono);font-weight:400;font-size:var(--fs-h3);line-height:1;letter-spacing:-.02em;color:var(--green)}
.ce-defs p{margin-top:14px;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2);text-wrap:pretty}

/* how it works: five cards in a row, the human step is green */
.ce-steps{list-style:none;display:grid;grid-template-columns:repeat(5, minmax(0, 1fr));gap:calc(12 * var(--u) + 4px);margin-top:calc(64 * var(--u) + 16px)}
/* the title sits a fixed distance under the index, so every tile's title starts on the same line whatever its length;
   the text grows downwards and the grid stretches all five tiles to the tallest */
.ce-step{position:relative;display:grid;grid-template-rows:auto calc(110 * var(--u) + 30px) auto 1fr;min-height:max(300px, calc(360 * var(--u)));padding:calc(20 * var(--u) + 10px);border-radius:8px;background:var(--card-light)}
.ce-step .ix{font-family:var(--xhmono);font-size:var(--fs-body);line-height:1;opacity:.45}
.ce-step .who{position:absolute;right:calc(20 * var(--u) + 10px);top:calc(20 * var(--u) + 10px);padding:.35em .7em .4em;border-radius:var(--r-pill);background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;line-height:1;white-space:nowrap}
.ce-step h3{grid-row:3;font-family:var(--xh);font-weight:400;font-size:max(24px, calc(36 * var(--u)));line-height:1.05;letter-spacing:-.025em}
.ce-step p{grid-row:4;margin-top:12px;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.ce-step.hu{background:var(--green)}
.ce-step.hu .who{background:var(--paper);color:var(--ink)}
.ce-step.hu p{color:var(--ink);opacity:.72}

/* who does what: two lists */
.ce-split{padding-top:0}
.ce-cols{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));gap:calc(12 * var(--u) + 4px);margin-top:calc(64 * var(--u) + 16px)}
.ce-col{padding:calc(28 * var(--u) + 12px);border-radius:8px;background:var(--card-light)}
.ce-col.hu{background:var(--ink);color:var(--paper)}
.ce-col h3{display:flex;align-items:baseline;gap:14px;font-family:var(--xh);font-weight:400;font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.025em}
.ce-col h3 small{font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--ink-2)}
.ce-col.hu h3 small{color:var(--green)}
.ce-col ul{list-style:none;margin-top:calc(24 * var(--u) + 8px)}
.ce-col li{display:flex;gap:14px;padding:calc(10 * var(--u) + 6px) 0;border-top:1px solid rgba(32,29,29,.12);font-size:var(--fs-body-l);line-height:1.3;letter-spacing:-.01em}
.ce-col.hu li{border-top-color:rgba(244,244,244,.14)}
.ce-col li::before{content:"";flex:none;width:.5em;height:.5em;margin-top:.42em;border-radius:50%;background:var(--ink)}
.ce-col.hu li::before{background:var(--green)}

/* GEO: three reasons + a mock AI answer */
.ce-geo .ce-head{align-items:start}
.ce-geo h2{max-width:11em}
.ce-why{list-style:none;display:grid;gap:calc(12 * var(--u) + 4px);margin-top:calc(64 * var(--u) + 16px)}
.ce-geo .ce-grid{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);column-gap:calc(80 * var(--u));align-items:start}
.ce-geo .ce-why{margin-top:0}
.ce-why li{padding:calc(24 * var(--u) + 8px) 0;border-top:1px solid rgba(255,255,255,.18)}
.ce-why li:last-child{border-bottom:1px solid rgba(255,255,255,.18)}
.ce-why h3{font-family:var(--xh);font-weight:400;font-size:var(--fs-h3);line-height:1.05;letter-spacing:-.025em}
.ce-why p{margin-top:12px;max-width:26em;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.ce-ans{position:sticky;top:calc(40 * var(--u) + 110px);padding:calc(24 * var(--u) + 12px);border-radius:16px;background:var(--night-2);border:1px solid rgba(255,255,255,.1)}
.ce-ans .hd{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
.ce-ans .hd svg{width:18px;height:18px;fill:none;stroke:var(--green);stroke-width:1.5;stroke-linejoin:round}
.ce-ans .q{margin-top:calc(16 * var(--u) + 8px);font-family:var(--xh);font-size:var(--fs-lead);line-height:1.2;letter-spacing:-.015em}
.ce-ans .a{margin-top:calc(16 * var(--u) + 8px);display:flex;flex-wrap:wrap;align-items:center;gap:10px 6px}
.ce-ans .ln{display:block;width:var(--w, 100%);height:.7em;border-radius:3px;background:rgba(255,255,255,.14)}
.ce-ans .ln.me{background:rgba(161,255,98,.35)}
.ce-ans .cite{display:inline-grid;place-items:center;width:1.4em;height:1.4em;border-radius:50%;background:rgba(255,255,255,.14);font-family:var(--mono);font-size:11px}
.ce-ans .cite.me{background:var(--green);color:var(--ink)}
.ce-ans .srcs{margin-top:calc(20 * var(--u) + 8px);padding-top:calc(16 * var(--u) + 8px);border-top:1px solid rgba(255,255,255,.1);display:grid;gap:10px;font-family:var(--mono);font-size:13px}
.ce-ans .src{display:flex;align-items:center;gap:12px;color:var(--ink-2)}
.ce-ans .src em{font-style:normal;width:1.4em;text-align:center}
.ce-ans .src .bar{display:block;height:.6em;width:42%;border-radius:3px;background:rgba(255,255,255,.12)}
.ce-ans .src.me{color:var(--paper)}
.ce-ans .src .tag{margin-left:auto;padding:.3em .7em;border-radius:var(--r-pill);background:var(--green);color:var(--ink)}

/* deliverables: big chips */
.ce-chips{list-style:none;display:flex;flex-wrap:wrap;gap:calc(8 * var(--u) + 6px);margin-top:calc(48 * var(--u) + 16px);max-width:52em}
.ce-chips li{padding:.55em 1em .62em;border:1px solid rgba(32,29,29,.22);border-radius:var(--r-pill);font-family:var(--xh);font-size:var(--fs-h3);line-height:1;letter-spacing:-.02em;transition:background .3s,color .3s,border-color .3s}
.ce-chips li:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* first month: four columns on a line */
.ce-month{padding-top:0}
.ce-weeks{list-style:none;display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:calc(24 * var(--u) + 8px);margin-top:calc(64 * var(--u) + 16px);padding-top:calc(24 * var(--u) + 8px);border-top:1px solid rgba(32,29,29,.14)}
.ce-weeks b{display:block;font-family:var(--xhmono);font-weight:400;font-size:var(--fs-h3);line-height:1;letter-spacing:-.02em}
.ce-weeks p{margin-top:14px;max-width:16em;font-size:var(--fs-body);line-height:1.4;color:var(--ink-2);text-wrap:pretty}
.ce-weeks li:last-child b{color:var(--ink);background:var(--green);display:inline-block;padding:.15em .35em;border-radius:6px}

/* faq: native details */
.ce-faq .ce-head{align-items:start}
.ce-qs{margin-top:0}
.ce-q{border-top:1px solid rgba(32,29,29,.14)}
.ce-q:last-child{border-bottom:1px solid rgba(32,29,29,.14)}
.ce-q summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:calc(20 * var(--u) + 8px) 0;cursor:pointer;list-style:none;font-family:var(--xh);font-size:var(--fs-body-l);line-height:1.2;letter-spacing:-.015em}
.ce-q summary::-webkit-details-marker{display:none}
.ce-q summary i{flex:none;position:relative;width:14px;height:14px}
.ce-q summary i::before,.ce-q summary i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1.5px;background:currentColor;transition:transform .35s var(--ease-out)}
.ce-q summary i::after{transform:rotate(90deg)}
.ce-q[open] summary i::after{transform:rotate(0)}
.ce-q p{padding:0 0 calc(24 * var(--u) + 8px);max-width:34em;font-size:var(--fs-body);line-height:1.45;color:var(--ink-2)}

/* contact on this page sits in normal flow */
.ce-page .prc.ct{min-height:0;padding-top:calc(60 * var(--u) + 20px)}

@media (max-width:820px){
  .ce{padding:72px var(--pad-x-m)}
  .ce-head,.ce-cols,.ce-geo .ce-grid{grid-template-columns:1fr;row-gap:24px}
  .ce h2{max-width:none}
  .ce-hero{padding:150px var(--pad-x-m) 40px}
  .ce-hero .h1{max-width:none}
  .ce-hero .h1 .l{display:block;text-wrap:balance}
  .ce-shift{margin-top:40px}
  .ce-defs{grid-template-columns:1fr;gap:24px;margin-top:36px;padding-top:24px}
  .ce-steps{grid-template-columns:1fr;gap:8px;margin-top:36px}
  .ce-step{min-height:0;padding:20px;grid-template-rows:auto 44px auto 1fr}
  .ce-cols{margin-top:36px;gap:8px}
  .ce-col{padding:20px}
  .ce-ans{position:static}
  .ce-chips{margin-top:28px;gap:8px}
  .ce-chips li{font-size:20px}
  .ce-weeks{grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:36px}
  .ce-q summary{padding:18px 0}
}