/* ============================================================
   RattusWMS v2 — Inner page styles (demo, contact, blog, prose)
   Uses styles-v2.css tokens. Crisp, editorial, blueprint system.
   ============================================================ */

.page-hero{ padding:64px 0 8px; position:relative; }
.page-hero .peyebrow{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.page-hero .peyebrow .lab{ font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-700); }
.page-hero .peyebrow .ln{ flex:1; height:1px; background:var(--line); max-width:110px; }
.page-hero h1{ font-size:clamp(34px,4.6vw,56px); font-weight:600; letter-spacing:-.03em; max-width:16ch; }
.page-hero.center{ text-align:center; }
.page-hero.center .peyebrow{ justify-content:center; }
.page-hero.center h1{ margin:0 auto; }
.page-hero p.lead{ margin-top:18px; font-size:18px; color:var(--ink-3); max-width:580px; line-height:1.55; }
.page-hero.center p.lead{ margin-left:auto; margin-right:auto; }

/* ---------- DEMO ---------- */
.demo-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; padding:48px 0 100px; }
.demo-points{ display:flex; flex-direction:column; gap:18px; margin-top:8px; }
.demo-point{ display:flex; gap:14px; align-items:flex-start; }
.demo-point .pcheck{ flex:none; width:28px; height:28px; border-radius:var(--r-sm); background:var(--tint); color:var(--blue-700); display:flex; align-items:center; justify-content:center; margin-top:1px; border:1px solid var(--blue-100); }
.demo-point .pcheck svg{ width:15px; height:15px; }
.demo-point b{ display:block; font-size:15px; font-weight:600; color:var(--ink); }
.demo-point span{ font-size:14px; color:var(--ink-3); line-height:1.5; }
.demo-quote{ margin-top:30px; padding:20px 22px; border:1px solid var(--line); border-left:3px solid var(--blue-700); border-radius:0 var(--r-md) var(--r-md) 0; background:var(--surface); }
.demo-quote p{ font-size:15px; color:var(--ink-2); line-height:1.6; font-style:italic; }
.demo-quote cite{ display:block; margin-top:12px; font-style:normal; font-family:var(--mono); font-size:12px; color:var(--ink-4); }

/* ---------- FORM ---------- */
.form-card{ background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:32px; box-shadow:var(--sh-3); }
.form-card h3{ font-size:20px; margin-bottom:4px; }
.form-card .form-sub{ font-size:14px; color:var(--ink-3); margin-bottom:24px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:7px; }
.field.full{ grid-column:1 / -1; }
.field label{ font-size:13px; font-weight:600; color:var(--ink-2); }
.field label .opt{ color:var(--ink-4); font-weight:400; }
.field input, .field select, .field textarea{
  font-family:var(--body); font-size:14.5px; color:var(--ink);
  padding:11px 13px; border:1px solid var(--line-strong); border-radius:var(--r-sm);
  background:var(--paper); transition:border-color .15s, box-shadow .15s, background .15s; width:100%;
}
.field textarea{ resize:vertical; min-height:96px; }
.field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--blue-500); background:#fff; box-shadow:0 0 0 3px rgba(0,70,135,.12); }
.field select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697587' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; }
.form-foot{ margin-top:22px; }
.form-error{ display:none; margin-top:14px; font-size:13.5px; color:#bf483f; background:var(--rose-soft); border:1px solid #f0c9c5; border-radius:var(--r-sm); padding:11px 13px; line-height:1.5; }
.form-error a{ color:#bf483f; font-weight:600; text-decoration:underline; }
.form-foot .btn{ width:100%; }
.form-note{ margin-top:14px; font-size:12.5px; color:var(--ink-4); text-align:center; line-height:1.5; }
.form-success{ display:none; text-align:center; padding:24px 8px; }
.form-success.show{ display:block; }
.form-success .sc-ic{ width:56px; height:56px; border-radius:50%; background:var(--mint-soft); color:#0a8f68; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; }
.form-success h3{ font-size:20px; margin-bottom:8px; }
.form-success p{ font-size:14.5px; color:var(--ink-3); }
@media (max-width:860px){ .demo-grid{ grid-template-columns:1fr; gap:36px; } .form-row{ grid-template-columns:1fr; } }

/* ---------- CONTACT ---------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:56px; align-items:start; padding:48px 0 100px; }
.contact-methods{ display:flex; flex-direction:column; gap:14px; margin-top:26px; }
.cmethod{ display:flex; gap:16px; align-items:flex-start; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-1); }
.cmethod .cm-ic{ flex:none; width:42px; height:42px; border-radius:var(--r-sm); background:var(--tint); color:var(--blue-700); display:flex; align-items:center; justify-content:center; border:1px solid var(--blue-100); }
.cmethod .cm-ic svg{ width:20px; height:20px; }
.cmethod b{ display:block; font-size:15px; font-weight:600; }
.cmethod p{ font-size:14px; color:var(--ink-3); margin-top:3px; line-height:1.5; }
.cmethod a{ color:var(--blue-700); font-weight:500; }
@media (max-width:860px){ .contact-grid{ grid-template-columns:1fr; gap:36px; } }

/* ---------- BLOG ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:40px 0 100px; }
.bpost{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); transition:transform .25s, box-shadow .25s, border-color .25s; }
.bpost:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); border-color:var(--blue-300); }
.bpost .bp-cover{ aspect-ratio:16/9; background:linear-gradient(135deg,var(--tint),#e3ecf6); position:relative; display:flex; align-items:center; justify-content:center; border-bottom:1px solid var(--line-2); }
.bpost .bp-cover svg{ width:48px; height:48px; color:var(--blue-500); opacity:.55; }
.bpost.feat{ grid-column:span 2; }
.bpost.feat .bp-cover{ aspect-ratio:auto; }
.bp-body{ padding:22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.bp-meta{ display:flex; align-items:center; gap:10px; font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.bp-tag{ color:var(--blue-700); background:var(--tint); border-radius:var(--r-xs); padding:2px 8px; font-weight:500; }
.bp-body h3{ font-size:18px; line-height:1.25; }
.bpost.feat .bp-body h3{ font-size:24px; }
.bp-body p{ font-size:14px; color:var(--ink-3); line-height:1.55; }
.bp-more{ margin-top:auto; font-size:13.5px; font-weight:600; color:var(--blue-700); display:inline-flex; align-items:center; gap:6px; }
.blog-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.fchip{ font-family:var(--mono); font-size:12px; color:var(--ink-2); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 14px; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.fchip:hover{ border-color:var(--blue-300); }
.fchip.active{ background:var(--blue-700); border-color:var(--blue-700); color:#fff; }
.fchip .ct{ opacity:.6; }
.bpost[hidden]{ display:none; }
@media (max-width:880px){ .blog-grid{ grid-template-columns:1fr 1fr; } .bpost.feat{ grid-column:span 2; } }
@media (max-width:560px){ .blog-grid{ grid-template-columns:1fr; } .bpost.feat{ grid-column:span 1; } }

/* ---------- PROSE ---------- */
.prose{ max-width:720px; margin:0 auto; padding:24px 0 100px; }
.prose .meta{ font-family:var(--mono); font-size:12.5px; color:var(--ink-4); margin-bottom:28px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.prose h2{ font-size:26px; margin:44px 0 14px; }
.prose h3{ font-size:19px; margin:32px 0 10px; }
.prose p{ font-size:16.5px; line-height:1.7; color:var(--ink-2); margin-bottom:18px; }
.prose ul{ margin:0 0 18px; padding-left:22px; }
.prose li{ font-size:16.5px; line-height:1.7; color:var(--ink-2); margin-bottom:8px; }
.prose a{ color:var(--blue-700); font-weight:500; text-decoration:underline; text-underline-offset:2px; }
.prose .lead-p{ font-size:19px; color:var(--ink); line-height:1.6; margin-bottom:28px; }
.prose hr{ border:none; border-top:1px solid var(--line); margin:40px 0; }
.article-cover{ aspect-ratio:21/9; border-radius:var(--r-lg); background:linear-gradient(135deg,var(--blue-900),var(--blue-600)); margin:8px 0 40px; display:flex; align-items:center; justify-content:center; box-shadow:var(--sh-3); position:relative; overflow:hidden; }
.article-cover::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px); background-size:30px 30px; }
.article-cover svg{ width:68px; height:68px; color:rgba(255,255,255,.72); position:relative; z-index:1; }
.back-link{ display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--ink-3); margin-bottom:8px; }
.back-link:hover{ color:var(--blue-700); }
.back-link svg{ width:15px; height:15px; }

/* ============================================================
   PLATFORM / MODULES deep pages
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; }
@media(max-width:860px){ .split{ grid-template-columns:1fr; gap:32px; } }
.rules-lg{ background:var(--night); border:1px solid var(--night-line); border-radius:var(--r-md); padding:22px 24px; font-family:var(--mono); font-size:13.5px; line-height:2; color:var(--night-ink-2); box-shadow:var(--sh-3); overflow:auto; }
.rules-lg .k{color:#86b6e8;} .rules-lg .v{color:#67dcb4;} .rules-lg .c{color:#5d7290;} .rules-lg .p{color:var(--night-ink);}

.dom-list{ display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; background:var(--surface); }
.dom{ display:grid; grid-template-columns:210px 1fr; gap:24px; padding:24px 26px; border-bottom:1px solid var(--line-2); }
.dom:last-child{ border-bottom:none; }
.dom .dl{ display:flex; align-items:flex-start; gap:12px; }
.dom .dl .di{ width:38px; height:38px; border-radius:var(--r-sm); background:var(--tint); color:var(--blue-700); display:flex; align-items:center; justify-content:center; border:1px solid var(--blue-100); flex:none; }
.dom .dl .di svg{ width:19px; height:19px; }
.dom .dl b{ font-family:var(--display); font-size:16px; font-weight:600; }
.dom .dl em{ font-style:normal; font-family:var(--mono); font-size:10.5px; color:var(--ink-4); display:block; margin-top:3px; }
.dom .dd p{ font-size:14.5px; color:var(--ink-3); line-height:1.55; margin-bottom:10px; }
.dom .dd .tags{ display:flex; flex-wrap:wrap; gap:6px; }
.dom .dd .tags span{ font-family:var(--mono); font-size:11px; color:var(--ink-3); background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:3px 9px; }
@media(max-width:680px){ .dom{ grid-template-columns:1fr; gap:14px; } }

.arch{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:30px; }
.arch-core{ text-align:center; }
.arch-core .box{ display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,var(--blue-800),var(--blue-600)); color:#fff; border-radius:var(--r-md); padding:14px 22px; box-shadow:var(--sh-blue); font-family:var(--display); font-weight:600; font-size:15px; }
.arch-core .box svg{ width:18px; height:18px; }
.arch-stem{ width:2px; height:26px; background:var(--blue-300); margin:0 auto; }
.arch-clients{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.arch-client{ border:1px solid var(--line); border-radius:var(--r-sm); padding:18px; background:var(--paper); }
.arch-client b{ font-size:14px; display:block; margin-bottom:12px; }
.arch-client .lane{ display:flex; align-items:center; gap:9px; font-family:var(--mono); font-size:11px; color:var(--ink-3); padding:5px 0; }
.arch-client .lane::before{ content:''; width:6px; height:6px; border-radius:1px; background:var(--blue-300); flex:none; }
@media(max-width:680px){ .arch-clients{ grid-template-columns:1fr; } }

.modspec{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); padding:28px; box-shadow:var(--sh-1); }
.modspec + .modspec{ margin-top:16px; }
.modspec-h{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.modspec-h h3{ font-size:20px; }
.modspec-h .mn{ margin-left:auto; font-family:var(--mono); font-size:11px; color:var(--ink-4); }
.modspec > p{ font-size:15px; color:var(--ink-2); line-height:1.6; max-width:72ch; margin-bottom:16px; }
.modspec .tags{ display:flex; flex-wrap:wrap; gap:7px; }
.modspec .tags span{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px 10px; }