/* Service pages (/services/<slug>/) and the English page (/en/). Same glass system as the homepage. */
.e-hero { position: relative; z-index: 1; padding-block: clamp(120px, 16vw, 190px) clamp(28px, 4vw, 48px); }
.e-crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: var(--t-xs); color: var(--paper-3); margin: 0 0 22px; }
.e-crumbs a { color: var(--paper-2); text-decoration: none; }
.e-crumbs a:hover { color: var(--signal); }
.e-h1 { font-size: var(--t-2xl); line-height: 1.08; letter-spacing: -0.02em; font-weight: 600; margin: 18px 0 0; max-width: 22ch; }
.e-lead { max-width: 62ch; }
.e-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.e-updated { margin: 22px 0 0; font-size: var(--t-xs); color: var(--paper-3); }

.e-body { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); padding-bottom: clamp(80px, 10vw, 140px); }
.e-panel { padding: clamp(20px, 3vw, 36px); border-radius: var(--radius-glass); min-width: 0; }
.e-panel h2 { font-size: var(--t-xl); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 18px; font-weight: 600; }
.e-h2-gap { margin-top: 30px !important; }
.e-shot, .e-flow, .e-faq, .e-related, .e-cta, .e-wide { grid-column: 1 / -1; }
.e-shot { margin: 0; padding: 10px; }
.e-shot img { width: 100%; height: auto; border-radius: calc(var(--radius-glass) - 10px); display: block; }
.e-shot figcaption { font-size: var(--t-xs); color: var(--paper-3); padding: 10px 6px 2px; }

.e-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.e-list li { position: relative; padding-inline-start: 22px; color: var(--paper-2); }
.e-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--signal); }

.e-flow__list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.e-flow__list li { padding: 16px 18px; display: grid; gap: 8px; align-content: start; }
.e-flow__k { font-size: var(--t-xs); letter-spacing: .06em; color: var(--signal); }
.e-flow__list li:last-child .e-flow__k { color: var(--paper); }
.e-flow__v { color: var(--paper-2); font-size: var(--t-sm); }

.e-tags { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.e-tags li { padding: 6px 12px; border-radius: var(--radius-pill); background: var(--glass-fill-inset); box-shadow: inset 0 0 0 1px var(--line); font-size: var(--t-sm); }

.e-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.e-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; }
.e-steps__n { grid-row: span 2; color: var(--signal); font-size: var(--t-sm); padding-top: 2px; }
.e-steps span:last-child { color: var(--paper-2); font-size: var(--t-sm); }
.e-more { display: inline-block; margin-top: 18px; color: var(--signal); text-decoration: none; font-weight: 500; }
.e-more:hover { text-decoration: underline; }

.e-faq details { padding: 14px 18px; margin-top: 10px; }
.e-faq summary { cursor: pointer; font-weight: 600; list-style: none; }
.e-faq summary::-webkit-details-marker { display: none; }
.e-faq summary::after { content: "+"; float: inline-end; color: var(--signal); font-weight: 500; }
.e-faq details[open] summary::after { content: "−"; }
.e-faq details p { margin: 10px 0 2px; color: var(--paper-2); }

.e-related ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.e-related a { display: grid; gap: 6px; padding: 18px; text-decoration: none; height: 100%; transition: transform .35s var(--spring); }
.e-related a:hover { transform: translateY(-2px); }
.e-related a .mono { color: var(--signal); font-size: var(--t-xs); }
.e-related a span:last-child { color: var(--paper-2); font-size: var(--t-sm); }

.e-cta { text-align: start; }
.e-cta p { color: var(--paper-2); margin: 0; }

/* English page */
.e-en { font-family: "IBM Plex Sans", var(--font-sans); }
.e-enbar { position: fixed; top: 14px; inset-inline: 0; z-index: 20; }
.e-enbar__in { display: flex; align-items: center; gap: 18px; padding: 8px 8px 8px 20px; border-radius: var(--radius-pill); }
.e-enbar__brand { display: grid; text-decoration: none; line-height: 1.1; }
.e-enbar__brand .mono { font-size: 10px; letter-spacing: .14em; color: var(--paper-3); }
.e-enbar nav { display: flex; gap: 4px; margin-inline-start: auto; }
.e-enbar nav a { padding: 8px 12px; border-radius: var(--radius-pill); text-decoration: none; color: var(--paper-2); font-size: var(--t-sm); }
.e-enbar nav a:hover { background: var(--glass-fill-inset); color: var(--paper); }
.e-enbar .btn { height: 42px; }
.e-facts { margin: 26px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.e-facts li { padding: 8px 14px; border-radius: var(--radius-pill); font-size: var(--t-sm); }
.e-svc { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.e-svc li { padding: 18px; display: grid; gap: 6px; align-content: start; }
.e-svc .mono { color: var(--signal); font-size: var(--t-xs); }
.e-svc h3 { margin: 0; font-size: var(--t-lg); }
.e-svc p { margin: 0; color: var(--paper-2); font-size: var(--t-sm); }
.e-svc a { color: var(--signal); font-size: var(--t-sm); text-decoration: none; margin-top: 4px; }
.e-stack { margin: 22px 0 0; font-size: var(--t-xs); color: var(--paper-3); }
.e-note { color: var(--paper-2); margin: -8px 0 16px; }
.e-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.e-tiers > div { padding: 20px; }
.e-tiers > div.is-pick { box-shadow: inset 0 0 0 1.5px var(--signal); }
.e-tiers h3 { margin: 0; display: flex; gap: 10px; align-items: center; }
.e-tiers p { color: var(--paper-3); font-size: var(--t-xs); margin: 6px 0 14px; }
.e-pill { font-size: 11px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--signal-dim); color: var(--signal); font-weight: 500; }
.e-enfoot { position: relative; z-index: 1; padding-block: 0 40px; font-size: var(--t-xs); color: var(--paper-3); }
.e-enfoot a { color: var(--paper-2); }
.e-wa { position: fixed; z-index: 30; inset-inline-end: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); padding: 12px 18px; border-radius: var(--radius-pill); background: #25D366; color: #fff; font-weight: 600; text-decoration: none; box-shadow: 0 12px 30px -10px rgba(37, 211, 102, .7); }

@media (max-width: 900px) {
  .e-body { grid-template-columns: 1fr; }
  .e-flow__list, .e-related ul, .e-svc, .e-tiers { grid-template-columns: 1fr; }
  .e-enbar nav { display: none; }
  .e-enbar__in { justify-content: space-between; }
}