/* RIVET — shared page building blocks (light editorial) */

main { padding-top: 84px; }

/* ---- breadcrumb + page hero ---- */
.phero { padding-block: clamp(40px,5vw,72px) clamp(20px,3vw,36px); }
.crumb { display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:0.74rem; color:var(--fg-mute); margin-bottom:18px; flex-wrap:wrap; }
.crumb a { text-decoration:none; color:var(--fg-mute); } .crumb a:hover { color:var(--ink); }
.crumb span { color:var(--line-strong); }
.phero__grid { display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(28px,4vw,60px); align-items:center; }
.phero__copy { display:flex; flex-direction:column; gap:18px; align-items:flex-start; }
.phero h1 { font-size:var(--step-4); }
.phero .lead { max-width:54ch; }
.phero__cta { display:flex; gap:12px; flex-wrap:wrap; }
@media (max-width:900px){ .phero__grid{ grid-template-columns:1fr; } }

/* ---- generic alternating feature rows ---- */
.frow { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,56px); align-items:center; }
.frow + .frow { margin-top:clamp(40px,5vw,72px); }
.frow--flip .frow__media { order:2; }
.frow__copy { display:flex; flex-direction:column; gap:14px; align-items:flex-start; }
.frow__copy h2 { font-size:var(--step-3); }
.frow__list { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.frow__list li { display:flex; gap:10px; color:var(--fg-soft); }
.frow__list li::before { content:""; flex:none; width:6px; height:6px; border-radius:50%; margin-top:9px; background:var(--magenta); }
@media (max-width:820px){ .frow{ grid-template-columns:1fr; } .frow--flip .frow__media{ order:0; } }

/* ---- tiles grid ---- */
.tiles { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); }
.tiles--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tiles--4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.tile { display:flex; flex-direction:column; gap:9px; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); transition:transform .2s ease, box-shadow .2s ease; }
.tile--link { text-decoration:none; color:var(--ink); }
.tile--link:hover { transform:translateY(-3px); box-shadow:var(--card-shadow-hover); }
.tile__ico { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:var(--gc,var(--violet));
  background:linear-gradient(150deg, color-mix(in oklab,var(--gc,var(--violet)) 16%,#fff), #fff);
  border:1px solid color-mix(in oklab,var(--gc,var(--violet)) 26%,var(--line)); margin-bottom:4px; }
.tile h3 { font-size:1.05rem; } .tile p { color:var(--fg-soft); font-size:0.9rem; margin:0; }
.tile__go { font-weight:600; color:var(--violet); font-size:0.9rem; margin-top:auto; }
@media (max-width:860px){ .tiles, .tiles--4{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .tiles, .tiles--2, .tiles--4{ grid-template-columns:1fr; } }

/* ---- numbered steps ---- */
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); counter-reset:step; }
.step { position:relative; padding:24px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:8px; }
.step__n { font-family:var(--font-mono); font-weight:600; font-size:0.9rem; color:#fff; background:var(--ink); width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin-bottom:4px; }
.step h3 { font-size:1.02rem; } .step p { color:var(--fg-soft); font-size:0.88rem; margin:0; }
@media (max-width:860px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .steps{ grid-template-columns:1fr; } }
.steps--3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:760px){ .steps--3{ grid-template-columns:1fr; } }

/* ---- CTA band (ink) ---- */
.ctaband { position:relative; overflow:hidden; display:grid; grid-template-columns:1fr auto; gap:clamp(20px,3vw,40px); align-items:center; padding:clamp(30px,4vw,56px); background:var(--ink); border-radius:var(--r-xl); }
.ctaband, .ctaband h2 { color:#fff; }
.ctaband .eyebrow { color:var(--cyan-bright); }
.ctaband p { color:rgba(255,255,255,0.72); margin:8px 0 0; max-width:48ch; }
.ctaband h2 { font-size:var(--step-3); }
.ctaband__cta { display:flex; gap:12px; flex-wrap:wrap; }
.ctaband .btn--ghost { border-color:rgba(255,255,255,0.3); color:#fff; }
.ctaband .btn--ghost:hover { background:rgba(255,255,255,0.1); border-color:#fff; }
.ctaband .script { color:var(--cyan-bright); }
@media (max-width:760px){ .ctaband{ grid-template-columns:1fr; } }

/* ---- stat row ---- */
.statrow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(16px,2.5vw,30px); }
.statrow > div { display:flex; flex-direction:column; gap:5px; padding-top:18px; border-top:2px solid var(--ink); }
.statrow dt, .statrow strong { font-family:var(--font-mono); font-size:var(--step-4); line-height:1; color:var(--ink); font-weight:600; letter-spacing:-0.02em; }
.statrow dd, .statrow span { margin:0; color:var(--fg-soft); font-size:0.9rem; }
@media (max-width:680px){ .statrow{ grid-template-columns:1fr 1fr; } }

/* ---- simple media frame ---- */
.frame { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:14px; }
.frame .gtmpro { width:100%; }

/* ---- prose (journal / about) ---- */
.prose { max-width:68ch; }
.prose p { color:var(--fg-soft); margin:0 0 1.1em; }
.prose h2 { font-size:var(--step-2); margin:1.6em 0 0.5em; }
.prose h3 { font-size:var(--step-1); margin:1.4em 0 0.4em; }
.prose blockquote { margin:1.4em 0; padding-left:20px; border-left:3px solid var(--magenta); font-size:var(--step-1); color:var(--ink); font-weight:500; }

/* ---- contact / form ---- */
.field { display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
.field label { font-size:0.86rem; color:var(--fg-soft); font-weight:500; }
.field input, .field select, .field textarea { padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line-strong); font-family:inherit; font-size:0.96rem; color:var(--ink); background:#fff; width:100%; }
.field textarea { min-height:120px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
@media (max-width:600px){ .form-grid{ grid-template-columns:1fr; } }

/* ---- pill tag row ---- */
.taglist { display:flex; flex-wrap:wrap; gap:8px; }
.taglist span { font-family:var(--font-mono); font-size:0.74rem; color:var(--fg-soft); padding:6px 12px; border:1px solid var(--line); border-radius:var(--r-pill); background:#fff; }

/* ---- chapter / people cards ---- */
.people { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); }
.person { display:flex; flex-direction:column; gap:12px; }
.person__name { font-weight:600; color:var(--ink); }
.person__role { font-family:var(--font-mono); font-size:0.76rem; color:var(--fg-mute); }
@media (max-width:780px){ .people{ grid-template-columns:1fr 1fr; } }
@media (max-width:480px){ .people{ grid-template-columns:1fr; } }

/* ---- faq (reused) ---- */
.qa { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:6px clamp(8px,1.2vw,16px); }
.qa__item { border-bottom:1px solid var(--line-soft); } .qa__item:last-child { border-bottom:0; }
.qa__q { width:100%; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 8px; background:none; border:0; color:var(--ink); font-family:inherit; font-size:var(--step-1); font-weight:500; text-align:left; cursor:pointer; }
.qa__plus { position:relative; flex:none; width:16px; height:16px; }
.qa__plus::before,.qa__plus::after { content:""; position:absolute; inset:0; margin:auto; background:var(--violet); transition:transform .25s ease,opacity .25s ease; }
.qa__plus::before { width:16px; height:2px; } .qa__plus::after { width:2px; height:16px; }
.qa__item.open .qa__plus::after { transform:rotate(90deg); opacity:0; }
.qa__a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.qa__item.open .qa__a { max-height:300px; }
.qa__a p { margin:0; padding:0 8px 22px; color:var(--fg-soft); max-width:64ch; }

/* ---- AEO answer block (citable definition) ---- */
.aeo { background:#fff; border:1px solid var(--line); border-left:3px solid var(--violet); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:clamp(22px,2.6vw,34px); display:flex; flex-direction:column; gap:10px; }
.aeo h2 { font-size:var(--step-2); font-weight:600; }
.aeo p { color:var(--fg-soft); max-width:80ch; margin:0; font-size:var(--step-0); line-height:1.6; }

/* ---- LinkedIn icon ---- */
.li { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:8px; background:#0A66C2; color:#fff; flex:none; transition:transform .18s ease, box-shadow .2s ease; }
.li:hover { transform:translateY(-2px); box-shadow:0 6px 16px - 6px rgba(10,102,194,0.6); }
.li svg { width:16px; height:16px; }

/* ---- member success story cards (real quotes + LinkedIn post) ---- */
.stories { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); }
.story { display:flex; flex-direction:column; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:clamp(20px,2.2vw,26px); transition:transform .2s ease, box-shadow .2s ease; }
.story:hover { transform:translateY(-3px); box-shadow:var(--card-shadow-hover); }
.story__q { margin:0; color:var(--ink); font-size:var(--step-0); line-height:1.5; text-wrap:pretty; flex:1; }
.story__q.ar { direction:rtl; text-align:right; font-family:var(--font-ar); font-weight:400; line-height:1.7; }
.story__by { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line-soft); }
.story__av { width:46px; height:46px; border-radius:50%; flex:none; overflow:hidden; background:var(--paper-3); border:2px solid #fff; box-shadow:0 0 0 1px var(--line); }
.story__av img, .story__av image-slot { width:100%; height:100%; display:block; object-fit:cover; }
.story__id { flex:1; min-width:0; }
.story__id b { display:block; font-size:0.92rem; color:var(--ink); }
.story__id small { color:var(--fg-mute); font-family:var(--font-mono); font-size:0.72rem; }
.story__cert { font-family:var(--font-mono); font-size:0.64rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--violet); background:var(--lilac-soft); padding:4px 9px; border-radius:var(--r-pill); align-self:flex-start; }
@media (max-width:820px){ .stories{ grid-template-columns:1fr; } }

/* ---- members wall (roster with LinkedIn) ---- */
.roster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.4vw,16px); }
.mcard { display:flex; align-items:center; gap:12px; padding:14px; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--card-shadow); }
.mcard__av { width:44px; height:44px; border-radius:50%; flex:none; overflow:hidden; background:var(--paper-3); border:2px solid #fff; box-shadow:0 0 0 1px var(--line); position:relative; }
.mcard__av img, .mcard__av image-slot { width:100%; height:100%; display:block; object-fit:cover; }
.mcard__id { flex:1; min-width:0; }
.mcard__id b { display:block; font-size:0.86rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mcard__id small { color:var(--fg-mute); font-size:0.74rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.mcard .li { width:26px; height:26px; border-radius:7px; } .mcard .li svg { width:14px; height:14px; }
@media (max-width:820px){ .roster{ grid-template-columns:1fr 1fr; } }
@media (max-width:460px){ .roster{ grid-template-columns:1fr; } }

/* ---- logo wall ---- */
.logowall { display:flex; flex-wrap:wrap; gap:clamp(12px,1.6vw,18px); justify-content:center; }
.logotile { display:grid; place-items:center; min-width:170px; flex:1 1 170px; max-width:230px; height:104px; padding:22px 26px; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--card-shadow); }
.logotile img { max-height:46px; max-width:100%; width:auto; object-fit:contain; }
.logotile--dark { background:#0F0025; border-color:transparent; }
.logotile--blue { background:#1B5FE0; border-color:transparent; }
@media (max-width:520px){ .logotile{ min-width:130px; height:88px; } }

/* ---- chapters ---- */
.chapters { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,1.8vw,20px); }
.chapter { display:flex; flex-direction:column; gap:14px; padding:22px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); transition:transform .2s ease, box-shadow .2s ease; }
.chapter:hover { transform:translateY(-3px); box-shadow:var(--card-shadow-hover); }
.chapter__top { display:flex; align-items:center; gap:12px; }
.chapter__flag { font-size:2rem; line-height:1; }
.chapter__where b { display:block; font-size:1.05rem; color:var(--ink); }
.chapter__where small { font-family:var(--font-mono); font-size:0.74rem; color:var(--fg-mute); }
.chapter__head { display:flex; align-items:center; gap:12px; padding-top:14px; border-top:1px solid var(--line-soft); }
.chapter__head .gtmpro { width:54px; flex:none; }
.chapter__head .gtmpro__inner { aspect-ratio:1/1; }
.chapter__head .gtmpro__badge { display:none; }
.chapter__hn b { display:block; font-size:0.9rem; color:var(--ink); }
.chapter__hn small { font-family:var(--font-mono); font-size:0.72rem; color:var(--violet); }
.chapter__meta { display:flex; justify-content:space-between; align-items:center; font-size:0.84rem; color:var(--fg-mute); margin-top:auto; }
.chapter__meta .go { color:var(--violet); font-weight:600; }
@media (max-width:860px){ .chapters{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .chapters{ grid-template-columns:1fr; } }

/* ---- checkout ---- */
.checkout { display:grid; grid-template-columns:1.2fr 0.8fr; gap:clamp(20px,3vw,40px); align-items:start; }
.checkout__form { background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); padding:clamp(22px,2.6vw,34px); }
.checkout__summary { position:sticky; top:96px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow-hover); padding:clamp(22px,2.6vw,30px); display:flex; flex-direction:column; gap:16px; }
.osum__row { display:flex; justify-content:space-between; align-items:baseline; font-size:0.92rem; color:var(--fg-soft); }
.osum__row.total { padding-top:14px; border-top:1px solid var(--line); font-size:1.05rem; color:var(--ink); font-weight:600; }
.osum__row.total b { font-size:1.4rem; font-family:var(--font-mono); }
@media (max-width:820px){ .checkout{ grid-template-columns:1fr; } .checkout__summary{ position:static; } }

/* ---- events list ---- */
.evlist { display:flex; flex-direction:column; gap:12px; }
.ev { display:flex; align-items:center; gap:20px; padding:18px 22px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--card-shadow); transition:transform .2s ease, box-shadow .2s ease; }
.ev:hover { transform:translateY(-2px); box-shadow:var(--card-shadow-hover); }
.ev__date { flex:none; width:64px; text-align:center; display:flex; flex-direction:column; gap:2px; padding:10px 0; border-radius:var(--r-md); background:var(--ink); color:#fff; }
.ev__date b { font-family:var(--font-mono); font-size:1.2rem; line-height:1; }
.ev__date span { font-family:var(--font-mono); font-size:0.66rem; letter-spacing:0.1em; text-transform:uppercase; color:rgba(255,255,255,0.7); }
.ev__body { flex:1; display:flex; flex-direction:column; gap:3px; }
.ev__kind { font-family:var(--font-mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--violet); }
.ev__body h3 { font-size:1.05rem; }
.ev__body p { color:var(--fg-soft); font-size:0.9rem; margin:0; }
.ev__go { flex:none; color:var(--violet); font-weight:600; font-size:0.9rem; text-decoration:none; white-space:nowrap; }
.ev__go:hover { color:var(--magenta); }
@media (max-width:560px){ .ev{ flex-wrap:wrap; gap:12px; } .ev__go{ width:100%; } }

/* mobile safety: hero CTAs may wrap, never overflow */
@media (max-width:520px){
  .phero__cta { width:100%; }
  .phero__cta .btn { white-space:normal; text-align:center; max-width:100%; }
}