/* Shared styles for the client-facing pages: showcase, style-guide, services,
   ai-integration, register — plus blocks reused on home (paincards, featgrid,
   howsteps, cta-band). One file on purpose: these pages are one campaign. */

/* ---------- mobile nav (rail is hidden < 1000px) ---------- */
.mobilenav { display:none; }
@media (max-width:1000px){
  .mobilenav { display:flex; width:100%; max-width:100vw; min-width:0; gap:8px; overflow-x:auto; padding:8px 14px 10px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .mobilenav::-webkit-scrollbar { display:none; }
  .mnav-item { flex:0 0 auto; font:inherit; font-size:.82rem; font-weight:600; padding:7px 13px; cursor:pointer;
    border:1.5px solid var(--cr-color-border-divider); border-radius:var(--cr-radius-pill); background:var(--cr-color-surface-default);
    color:var(--cr-color-text-secondary); white-space:nowrap; }
  .mnav-item[aria-current="page"] { background:var(--cr-color-action-primary-state-hover); border-color:var(--cr-color-action-primary-fill);
    color:var(--cr-color-action-primary-border); }
  .mnav-item:focus-visible { outline:2px solid var(--cr-color-action-primary-fill); outline-offset:2px; }
  .brand div { font-size:.95rem; line-height:1.15; }
  .brand small { display:none; }
}

/* ---------- generic blocks ---------- */
.linklike { background:none; border:none; padding:0; font:inherit; color:var(--cr-color-action-primary-fill); text-decoration:underline; cursor:pointer; }
/* `-dark` would lower contrast on the dark theme; `-hover` moves away from the surface per theme */
.linklike:hover { color:var(--cr-site-primary-hover); }

.cta-band { margin-top:64px; padding:44px 28px; text-align:center; border-radius:var(--cr-radius-surface);
  background:var(--cr-site-surface-tint-2); border:1px solid var(--cr-color-border-divider); }
.cta-band h2 { font-size:1.6rem; }
.cta-band p { margin:10px auto 20px; max-width:46ch; }
.cta-band .btn { margin-inline:auto; }

/* ---------- home: pain / features / steps ---------- */
.paincards, .featgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:16px; }
.paincard, .feat { padding:24px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.paincard h3, .feat h3 { font-family:var(--cr-font-sans); font-size:1.12rem; font-weight:600; }
.paincard p, .feat p { font-size:.9rem; line-height:1.55; }
.pain-answer { font-size:.9rem; font-weight:600; color:var(--cr-color-action-primary-fill); margin-top:auto; }
.feat .btn { margin-top:auto; }

.howsteps { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:16px; }
.howstep { padding:22px; }
.hownum { font-family:var(--cr-font-mono); font-size:.8rem; font-weight:600; color:var(--cr-color-action-primary-fill);
  width:28px; height:28px; border-radius:var(--cr-radius-circle); display:flex; align-items:center; justify-content:center;
  background:var(--cr-color-action-primary-state-hover); margin-bottom:12px; }
.howstep h3 { font-family:var(--cr-font-sans); font-size:1.05rem; font-weight:600; margin-bottom:6px; }
.howstep p { font-size:.88rem; line-height:1.55; }

/* ---------- showcase ---------- */
.proof-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr)); gap:16px; }
.proofcard { padding:22px; display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
.proofcard h3 { font-family:var(--cr-font-sans); font-size:1.1rem; font-weight:600; }
.proofcard p { font-size:.88rem; line-height:1.55; }
.prooflink { margin-top:auto; font-size:.86rem; font-weight:600; color:var(--cr-color-action-primary-fill); text-decoration:none; }
.prooflink:hover { text-decoration:underline; }
.depth-strip { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:28px; }

/* ---------- style guide ---------- */
.deliv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px; }
.delivcard { padding:22px; }
.delivcard h3 { font-family:var(--cr-font-sans); font-size:1.05rem; font-weight:600; margin:6px 0; }
.delivcard p { font-size:.88rem; line-height:1.55; }

/* ---------- services ---------- */
.tier-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; align-items:stretch; }
.tier { padding:26px; display:flex; flex-direction:column; gap:12px; }
.tier-featured { border-color:var(--cr-color-action-primary-fill); box-shadow:var(--cr-shadow-elevation-2); }
.tier h3 { font-family:var(--cr-font-sans); font-size:1.2rem; font-weight:600; line-height:1.25; }
.tier-for { font-size:.86rem; }
.tier-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.tier-list li { font-size:.88rem; line-height:1.5; padding-inline-start:22px; position:relative; }
.tier-list li::before { content:""; position:absolute; inset-inline-start:0; top:.45em; width:12px; height:7px;
  border-inline-start:2px solid var(--cr-color-action-success-fill); border-block-end:2px solid var(--cr-color-action-success-fill); transform:rotate(-45deg); }
[dir="rtl"] .tier-list li::before { transform:rotate(45deg) scaleX(-1); }
.tier-cta { margin-top:auto; }

.faq { display:flex; flex-direction:column; gap:10px; max-width:760px; }
.faq details, .reg-aside details { padding:0; }
.faq details { padding:4px 20px; }
.faq summary, .reg-aside summary { cursor:pointer; font-weight:600; font-size:.92rem; padding:12px 0; color:var(--cr-color-text-primary); }
.faq p, .reg-aside details p { padding:0 0 14px; font-size:.88rem; line-height:1.55; max-width:60ch; }
.reg-aside details { border-top:1px solid var(--cr-color-border-divider); }
.reg-aside details:first-of-type { border-top:none; }

/* ---------- ai integration ---------- */
.ai-demo { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr)); gap:16px; }
.ai-step { padding:22px; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
.ai-prompt { font-family:var(--cr-font-sans); font-size:1.15rem; font-style:italic; line-height:1.5; }
.ai-code { margin:0; padding:16px; width:100%; box-sizing:border-box; overflow-x:auto; border-radius:var(--cr-radius-field);
  background:var(--cr-site-surface-tint-4); font-family:var(--cr-font-mono); font-size:.78rem; line-height:1.6; }
.ai-step .btn { margin-top:auto; }

/* ---------- register ---------- */
.reg-grid { display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start; }
@media (max-width:840px){ .reg-grid { grid-template-columns:1fr; } }
.regform { padding:26px; display:flex; flex-direction:column; gap:16px; position:relative; }
.regrow { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; }
.regform .field input, .regform .field select, .regform .field textarea { width:100%; box-sizing:border-box; }
.field textarea { padding:9px 12px; border-radius:var(--cr-radius-field); border:1.5px solid var(--cr-color-border-divider);
  background:var(--cr-color-surface-default); color:var(--cr-color-text-primary); font-family:inherit; font-size:.9rem; resize:vertical; }
.field textarea:focus { outline:none; border-color:var(--cr-color-action-primary-fill); }
.regsubmit { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.regstatus { font-size:.86rem; color:var(--cr-color-text-secondary); min-height:1.2em; margin:0; }
.reg-aside { display:flex; flex-direction:column; gap:16px; }
.nextlist { margin:12px 0 0; padding-inline-start:18px; display:flex; flex-direction:column; gap:10px; font-size:.88rem; line-height:1.5; }
.reg-success { margin-top:24px; padding:32px; text-align:center; }