/* ==========================================================================
   Zyntel — Inner-page blocks (tokens only)
   ========================================================================== */

/* current page in navigation */
.nav-link[aria-current="page"], .nav-link[data-current="true"] { color: var(--zy-color-text-signal); }
.nav-link[aria-current="page"]::after, .nav-link[data-current="true"]::after { transform: scaleX(1); }
.mega__link[aria-current="page"] strong { color: var(--zy-color-text-signal); }
.mobile-nav__row[aria-current="page"] { color: var(--zy-color-text-signal); }
.mega__intro .link-arrow { margin-top: var(--zy-space-4); }

/* breadcrumb */
.crumbs ol { display: flex; flex-wrap: wrap; gap: var(--zy-space-1) var(--zy-space-2); margin-bottom: var(--zy-space-6); color: var(--zy-color-text-secondary); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--zy-space-2); }
.crumbs li + li::before { content: "/"; color: var(--zy-color-text-tertiary); }
.crumbs a:hover { color: var(--zy-color-text-signal); }
.crumbs [aria-current] { color: var(--zy-color-text-primary); }

/* page hero */
.page-hero { padding-block: var(--zy-space-12) var(--zy-layout-section-space-sm); overflow: hidden; }
.page-hero__grid { align-items: center; row-gap: var(--zy-space-10); }
.page-hero .eyebrow { margin-bottom: var(--zy-space-5); }
.page-hero__title { max-width: 16ch; }
.page-hero__lead { margin-top: var(--zy-space-6); max-width: 34rem; color: var(--zy-color-text-secondary); }
.page-hero .actions { margin-top: var(--zy-space-8); }
.page-hero__visual { border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-lg); overflow: hidden; background: var(--zy-color-surface-page); aspect-ratio: 4 / 3; display: grid; place-items: center; }
.page-hero__visual .gfx { width: 100%; height: 100%; }
.page-hero__visual--hero, .page-hero__visual--layers { border: 0; background: none; aspect-ratio: auto; }
.page-hero__visual--layers .gfx { max-width: 32rem; }
.page-hero__visual--glyph .gfx { width: 88%; height: auto; }
@media (min-width: 64em) { .page-hero { padding-top: var(--zy-space-16); } }

/* link cards */
.cards-section + .cards-section, .features-section + .cards-section { padding-top: 0; }
.link-cards { display: grid; gap: var(--zy-grid-gutter); }
@media (min-width: 48em) { .link-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .link-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } .link-cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); } .link-cards--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.link-card { display: flex; flex-direction: column; gap: var(--zy-space-3); height: 100%; padding: var(--zy-space-6); border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-lg); background: var(--zy-color-surface-page); transition: border-color var(--zy-motion-duration-component) var(--zy-motion-easing-standard), transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard), box-shadow var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.link-card:hover { border-color: var(--zy-color-border-signal); transform: translateY(-3px); box-shadow: var(--zy-elevation-2); }
.link-card .aicon-tile { margin-bottom: var(--zy-space-3); }
.link-card__more { display: inline-flex; align-items: center; gap: var(--zy-space-2); margin-top: auto; padding-top: var(--zy-space-3); color: var(--zy-color-text-signal); font-weight: var(--zy-font-weight-medium); }
.link-card__more .icon { width: 1rem; height: 1rem; transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.link-card:hover .link-card__more .icon { transform: translateX(4px); }
#related { border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }

/* feature rows */
.feature-rows { border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.feature-row { display: grid; gap: var(--zy-space-5); padding-block: var(--zy-space-10); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.feature-row__body h3 { margin-bottom: var(--zy-space-3); }
.feature-row__example { align-self: start; padding: var(--zy-space-5); border-radius: var(--zy-radius-md); background: var(--zy-color-surface-subtle); border-left: 2px solid var(--zy-color-signal-node); }
.feature-row__example .t-label { display: block; margin-bottom: var(--zy-space-2); color: var(--zy-color-text-signal); }
@media (min-width: 64em) { .feature-row { grid-template-columns: 4rem minmax(0, 1.3fr) minmax(0, 1fr); column-gap: var(--zy-space-10); align-items: start; } }

/* challenges */
.challenges { background: var(--zy-color-surface-page); border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.challenge-list li { display: flex; align-items: flex-start; gap: var(--zy-space-4); padding-block: var(--zy-space-5); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.challenge-list li:first-child { border-top: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.challenge-list .t-heading-5 { padding-top: var(--zy-space-1); }
.challenges .grid { row-gap: var(--zy-space-8); }

/* compact solutions on capability pages */
.solutions--compact .tiles { display: none; }
.solutions--compact .usecases { margin-top: 0; }

/* contact */
.contact-section .grid { row-gap: var(--zy-space-12); }
.contact-form { display: grid; gap: var(--zy-space-5); }
.form-field { display: grid; gap: var(--zy-space-2); }
.form-field label { color: var(--zy-color-text-secondary); }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 3rem; padding: var(--zy-space-3) var(--zy-space-4); font: inherit; font-size: 1rem; color: var(--zy-color-text-primary); background: var(--zy-color-surface-page); border: var(--zy-border-hairline) solid var(--zy-color-border-strong); border-radius: var(--zy-radius-md); transition: border-color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--zy-color-border-focus); box-shadow: 0 0 0 1px var(--zy-color-border-focus); }
.form-field [aria-invalid="true"] { border-color: #C0392B; }
.contact-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zy-space-4); }
.contact-form__done { display: flex; align-items: center; gap: var(--zy-space-3); padding: var(--zy-space-4); border-radius: var(--zy-radius-md); background: var(--zy-color-surface-signal); color: var(--zy-color-text-signal-on-tint); }
.contact-form__done[hidden] { display: none; }
.contact-next { padding: var(--zy-space-8); border: var(--zy-border-hairline) solid var(--zy-color-border-default); border-radius: var(--zy-radius-lg); align-self: start; }
.contact-next h2 { margin-bottom: var(--zy-space-6); }
.contact-next ol li { display: flex; gap: var(--zy-space-4); padding-block: var(--zy-space-4); border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.contact-next h3 { margin-bottom: var(--zy-space-1); }

/* Developers page: keep the ecosystem band on white (60% white rule) */
html[data-page="developers"] .integrations { background: var(--zy-color-surface-page); border-block: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }

/* Hand-off from every page hero: a soft blush at the seam that fades to white over
   30rem — same rhythm as the homepage hero → "Why Zyntel", and keeps 60% white. */
.page-hero + .section { background: var(--zy-color-surface-page) linear-gradient(to bottom, var(--zy-color-brand-50) 0, var(--zy-color-brand-50) 10rem, var(--zy-color-surface-page) 30rem) no-repeat; border-top: var(--zy-border-hairline) solid var(--zy-color-brand-100); }
.page-hero + .section .feature-row__example { background: var(--zy-color-neutral-0); }