/* Content pages (about, tools, margifi, bizgrowth-ninja) on the Website look. Shared classes live in web.css. */
.ph-split .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:72px;align-items:center}
.page-head .row{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.page-head .portrait{max-width:430px}
.ph-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none}
.ph-chips li{font-size:14px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 14px;color:var(--ink)}
.ph-chips b{font-family:var(--num);font-weight:600}

.sec{padding:110px 0}
.sec.paper{background:var(--paper);border-radius:48px}
.sec-head{max-width:720px;margin-bottom:48px}
.sec-head h2{font-size:clamp(38px,4.4vw,60px);margin:14px 0 14px}
.sec-head p{color:var(--ink-2)}

/* three soft cards (mission/vision/onliness, modules) */
.soft3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.soft{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:10px}
.soft .lbl{font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.soft h3{font-size:34px}
.soft p{color:var(--ink-2);font-size:16px}
.soft.hot{background:var(--red-soft);border-color:#EFC9C2}
.soft.hot .lbl{color:var(--red)}

/* small "what I use" grid */
.uses{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.uses div{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:20px}
.uses b{display:block;font:400 26px/1.1 var(--serif)}
.uses span{display:block;margin-top:6px;font-size:13.5px;color:var(--muted)}

/* 3 steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{position:relative;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:32px}
.steps li::before{counter-increment:s;content:"0" counter(s);display:block;font:600 30px/1 var(--num);font-variant-numeric:tabular-nums lining-nums;color:var(--red);margin-bottom:22px}
.steps h3{font-size:32px;margin-bottom:10px}
.steps p{color:var(--ink-2);font-size:16px}
.sec.paper .steps li{border-color:transparent}

/* tools: coming-soon row (not a link) */
.t.soon{cursor:default}
.t.soon:hover{background:none;padding-left:8px;padding-right:8px}
.t.soon .big,.t.soon h3{color:var(--muted)}
.t .pill-soon{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;border-radius:999px;background:var(--paper);color:var(--ink-2);white-space:nowrap;justify-self:start}

/* soft CTA box */
.soft-cta{background:var(--red-soft);border-radius:36px;padding:56px;display:flex;justify-content:space-between;align-items:center;gap:32px}
.soft-cta h2{font-size:clamp(34px,3.8vw,52px);max-width:13em}
.soft-cta p{color:var(--ink-2);margin-top:12px;max-width:32em}
.soft-cta .row{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* margifi example card + pricing */
.ex-card{background:var(--card);border:1px solid var(--line);border-radius:28px;padding:32px;box-shadow:0 40px 80px -48px rgba(60,40,20,.35)}
.ex-card .lbl{font:700 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.ex-card .hand{display:block;margin-top:18px;font-size:24px}
.ex-card small{display:block;margin-top:10px;color:var(--muted);font-size:13px}
.big-fig{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch}
.big-fig .card strong{display:block;font:600 clamp(64px,7vw,104px)/1 var(--num);letter-spacing:-.01em}
.big-fig .card p{color:var(--ink-2);margin-top:12px;max-width:24em}
.price{display:flex;flex-direction:column;gap:8px}
.price .amt{font:600 clamp(40px,4vw,56px)/1 var(--num)}
.price .amt small{font:500 17px var(--sans);color:var(--muted)}
.price .or{color:var(--muted);font-size:15px}

/* testimonials */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px}
.quotes figure{background:var(--paper);border-radius:24px;padding:32px}
.quotes blockquote{font:italic 400 clamp(22px,2.2vw,28px)/1.3 var(--serif)}
.quotes figcaption{margin-top:14px;color:var(--muted);font-size:14px}

@media (max-width:900px){
  .ph-split .wrap{grid-template-columns:1fr;gap:48px}
  .page-head .portrait{justify-self:center}
  .sec{padding:80px 0}
  .sec.paper{border-radius:32px}
  .soft3,.steps,.quotes,.big-fig{grid-template-columns:1fr}
  .uses{grid-template-columns:repeat(3,minmax(0,1fr))}
  .soft-cta{flex-direction:column;align-items:flex-start;padding:40px 28px}
}
@media (max-width:600px){
  .page-head{padding:32px 0 24px}
  .page-head h1{font-size:44px}
  .page-head .lede{font-size:17px}
  .sec{padding:64px 0}
  .uses{grid-template-columns:repeat(2,minmax(0,1fr))}
  .soft,.steps li,.quotes figure,.ex-card{padding:24px}
  .soft-cta{border-radius:28px;padding:32px 20px}
  .t.soon:hover{padding-left:4px;padding-right:4px}
}