/* =========================================================================
   netex · pages/web-sub.css · /web-apps/websites/ · /eshop/ · /care/ (bible §7.16; copy 11)
   Shared hero + per-page sections. Drawings: pages/web-shared.css. Brief/FAQ/hero type: web-apps.css
   rules are repeated here where these pages need them (one stylesheet per view).
   ========================================================================= */
@layer reset, tokens, base, components, layout, pages, utilities;

@layer pages {

/* ---- shared hero ----------------------------------------------------------------- */
.wsub-hero { overflow: hidden; }
.wsub-hero__grid { row-gap: var(--s-7); align-items: center; }
.wa-hero__h1 { font-size: var(--t-h4); font-weight: var(--w-strong); line-height: 1.25; letter-spacing: 0; max-width: 34ch; color: var(--fg); }
.wa-hero__display { margin-top: var(--s-4); font-size: var(--t-display); font-weight: var(--w-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); max-width: 13ch; text-wrap: balance; }
.wa-hero__sub { margin-top: var(--s-5); max-width: 46ch; }
.wa-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); margin-top: var(--s-6); }
.wsub-hero__fig { position: relative; margin: 0; }
/* phones: the first screen already carries the header's Molten CTA; at the 44 px minimum (bible §9) the
   hero's own Molten button keeps the screen under the 5 % Molten budget */
@media (max-width: 767px) { .wsub-hero .wa-hero__actions .nx-btn--primary { min-height: 44px; padding-block: .55em; padding-inline: 16px; } }
/* the smallest phones (360 px class): the header CTA stays the one Molten action of the first screen and
   the hero's button takes the secondary ring, so Molten never passes 5 % of the screen */
@media (max-width: 379px) {
	.wsub-hero .wa-hero__actions .nx-btn--primary { --btn-fill: var(--fg); --btn-fg: var(--fg); }
	.wsub-hero .wa-hero__actions .nx-btn--primary::before { clip-path: var(--clip-ui-ring); }
	.wsub-hero .wa-hero__actions .nx-btn--primary::after { display: none; }
}
@media (min-width: 1024px) {
	.wsub-hero__text { grid-column: 1 / span 6; }
	.wsub-hero__fig { grid-column: 7 / -1; }
}

/* websites: the page in cross-section, one scan pass on load (≤ 1.2 s), labels stamp after it */
.ws-hero__fig { overflow: hidden; }
.ws-scanline { position: absolute; inset: -20% 0; pointer-events: none; }
.ws-scanline::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 2px;
	height: 140%;
	background: var(--n-grad);
	transform-origin: 0 0;
	transform: translateX(-30%) rotate(43deg);
	opacity: 0;
}
html:not(.rm) .ws-scanline::before { animation: ws-scan 1100ms linear 150ms both; }
@keyframes ws-scan {
	0% { opacity: 1; transform: translateX(-10%) rotate(43deg); }
	92% { opacity: 1; }
	100% { opacity: 0; transform: translateX(110%) rotate(43deg); }
}
html:not(.rm) .ws-hero__fig .wpd-tag { animation: wpd-stamp var(--dur-stamp) var(--ease-stamp) both; animation-delay: 700ms; }
html:not(.rm) .ws-hero__fig .wpd-tag[data-layer="images"] { animation-delay: 820ms; }
html:not(.rm) .ws-hero__fig .wpd-tag[data-layer="type"] { animation-delay: 940ms; }
html:not(.rm) .ws-hero__fig .wpd-tag[data-layer="content"] { animation-delay: 1060ms; }

/* care: the log, the X-ray switch under the CTAs */
.wc-hero__fig .wpd { max-width: 640px; margin-left: auto; }
.wpx--care { margin-top: var(--s-5); }

/* e-shop: the packing table with the 47° machine band */
.we-hero__fig { margin-right: calc(-1 * var(--margin)); }
.we-hero__media { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--ch) 100%, 0 calc(100% - var(--ch-v))); }
/* the bottom-left corner is cut at 47°: the «Εικόνα AI» chip moves to the bottom-right, never clipped */
.we-hero__media .nx-ailabel { left: auto; right: 8px; }
.we-hero__media .nx-ailabel .nx-tip { left: auto; right: 0; }

/* ---- websites · s2 two typesettings ------------------------------------------------------- */
.wst { display: grid; gap: var(--s-5); }
.wst__seg { justify-self: start; border-color: var(--rule); }
.wst__seg > button { min-height: 44px; }
.wst__sheet { padding: var(--s-7) var(--s-6) var(--s-8); }
.wst__sample { font-family: var(--f-serif); font-size: clamp(1.25rem, 1rem + 1.4vw, 2.125rem); line-height: 1.5; max-width: 34ch; color: var(--ink); }
.wst__sample--wrong { font-family: Arial, Helvetica, sans-serif; letter-spacing: .01em; }
.wst__head { font-family: var(--f-sans); font-weight: 760; text-transform: uppercase; letter-spacing: .02em; }
.wst[data-state="wrong"] .wst__sample--right, .wst[data-state="right"] .wst__sample--wrong { display: none; }
.wst-mark { position: relative; white-space: nowrap; }
.wst[data-state="right"] .wst-mark { box-shadow: inset 0 -.18em 0 color-mix(in srgb, var(--cyan) 45%, transparent); }
.wst-tag { display: none; }
.wst__notes { display: none; margin: var(--s-6) 0 0; padding: 0; list-style: none; border-top: var(--bw) solid var(--rule); }
.wst[data-state="right"] .wst__notes { display: grid; gap: 0; }
.wst__notes li { padding: var(--s-2) 0; border-bottom: var(--bw) solid var(--rule); font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .03em; color: var(--fg-2); }
.wst__notes li::before { content: "→ "; color: var(--cyan-deep); }
@media (min-width: 900px) {
	/* the four notes sit in the sheet's margin column (never over the sample's lines); the marks in
	   the text carry the cyan underline, the notes appear one by one when the switch flips */
	.wst__sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 30%); column-gap: var(--s-8); align-items: start; padding: calc(var(--s-9) + var(--s-3)) var(--s-8) var(--s-9); }
	.wst__sample { grid-column: 1; grid-row: 1; }
	.wst__notes { grid-column: 2; grid-row: 1; display: grid; align-self: center; margin: 0; visibility: hidden; }
	.wst[data-state="right"] .wst__notes { display: grid; visibility: visible; }
	html:not(.rm) .wst[data-state="right"] .wst__notes li { animation: wpd-stamp var(--dur-stamp) var(--ease-stamp) both; }
	html:not(.rm) .wst[data-state="right"] .wst__notes li:nth-child(2) { animation-delay: 120ms; }
	html:not(.rm) .wst[data-state="right"] .wst__notes li:nth-child(3) { animation-delay: 240ms; }
	html:not(.rm) .wst[data-state="right"] .wst__notes li:nth-child(4) { animation-delay: 360ms; }
}
/* without JS: no switch — both settings stacked, the right one with its four notes */
html:not(.js) .wst__seg { display: none; }
html:not(.js) .wst .wst__sample { display: block; }
html:not(.js) .wst .wst__sample--right { margin-top: var(--s-6); padding-top: var(--s-6); border-top: var(--bw) solid var(--rule); }
html:not(.js) .wst .wst__notes { display: grid; visibility: visible; }
@media (min-width: 900px) { html:not(.js) .wst__sheet { display: block; } html:not(.js) .wst__notes { margin-top: var(--s-6); } }
.ws-type__foot { margin-top: var(--s-6); row-gap: var(--s-4); }
.ws-type__note { font-size: var(--t-lead); line-height: var(--lh-lead); max-width: 46ch; }
.ws-type__en { font-size: var(--t-small); color: var(--fg-2); max-width: 56ch; }
@media (min-width: 1024px) { .ws-type__note { grid-column: 1 / span 7; } .ws-type__en { grid-column: 8 / -1; } }

/* ---- websites · s3 deliverables ----------------------------------------------------------- */
.ws-keys__grid { row-gap: var(--s-7); align-items: start; }
.ws-keys__list { margin: 0; padding: 0; list-style: none; }
.ws-keys__list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); font-size: var(--t-body); line-height: 1.5; }
.ws-keys__list li:first-child { border-top: 0; }
.ws-keys__tick { width: 20px; height: 20px; margin-top: 2px; color: var(--cyan-deep); stroke-width: 2; }
@media (min-width: 1024px) { .ws-keys__head { grid-column: 1 / span 5; position: sticky; top: calc(var(--header-h) + var(--s-6)); } .ws-keys__sheet { grid-column: 6 / -1; } }

/* ---- websites · s4 process: five verbs on a 47° rule --------------------------------------- */
.ws-proc__steps { position: relative; display: grid; gap: var(--s-5); margin: 0; padding: 0; list-style: none; }
.ws-proc__step { position: relative; padding-top: var(--s-5); border-top: var(--bw-2) solid var(--fg); container-type: inline-size; }
.ws-proc__step::before { content: ""; position: absolute; left: 0; top: -1px; width: 1.5px; height: 22px; background: var(--fg); transform-origin: 0 0; transform: rotate(-43deg); }
/* the longest verb («Χαρτογραφούμε», 13 letters ≈ 7.6 em) must fit its fifth of the row: size by the column */
.ws-proc__verb { font-size: min(var(--t-h3), 12cqi); font-weight: var(--w-h2); white-space: nowrap; }
.ws-proc__body { margin-top: var(--s-3); max-width: 30ch; color: var(--fg-2); }
.ws-proc__dur { margin-top: var(--s-7); font-size: var(--t-small); color: var(--fg-2); }
@media (min-width: 900px) {
	.ws-proc__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gutter); }
	.ws-proc__step { margin-top: calc(var(--i) * -1 * 0px); }
}

/* ---- websites · s5 report card -------------------------------------------------------------- */
.ws-report__grid { row-gap: var(--s-7); align-items: start; }
.ws-report__lead { margin-top: var(--s-5); margin-bottom: var(--s-5); }
.ws-report__card .nx-sheet__head { align-items: center; }
.ws-report__table th[scope="row"] { font: var(--w-strong) .9375rem/1.35 var(--f-sans); text-transform: none; letter-spacing: 0; color: var(--fg); }
.ws-report__target .ws-report__dot { font-family: var(--f-dot); font-size: 1.75rem; font-weight: 500; font-variation-settings: "ELSH" 2; line-height: 1; letter-spacing: .02em; white-space: nowrap; color: var(--indigo); }
.ws-report__empty { color: var(--fg-2); font-family: var(--f-mono); }
/* Phones (stacked table): the metric name is the row head; no «Μέτρηση» tag over each one. */
@media (max-width: 767px) { .ws-report__table th[scope="row"]::before { content: none; } }
@media (min-width: 1024px) { .ws-report__text { grid-column: 1 / span 5; } .ws-report__card { grid-column: 6 / -1; transform: rotate(-1deg); } }
html.rm .ws-report__card { transform: none; }

/* ---- e-shop · s2 journey -------------------------------------------------------------------------- */
.wej { display: grid; gap: var(--s-5); }
.wej__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-6); }
.wej__seg > button { min-height: 44px; }
.wej__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin: 0; padding: 0; list-style: none; font: 500 .75rem/1.3 var(--f-mono); color: var(--fg-2); }
.wej__lg { display: inline-flex; align-items: center; gap: var(--s-2); }
.wej__lg i { display: inline-block; width: 18px; height: 10px; }
.wej__lg--hand i { width: 10px; height: 10px; background: var(--molten); border-radius: 50%; }
.wej__lg--link i { height: 3px; background: var(--cyan-deep); }
.wej__lg--human i { width: 12px; height: 12px; border: 2px solid var(--cyan-deep); }
.wej__drawing { padding: var(--s-5) var(--s-4); background: var(--paper); }
/* phones and tablets: the stops stacked (copy: "vertical on mobile"); from 900 px: one horizontal rail */
.wej__drawing .wpd--journey:not(.wpd--journey-v) { display: none; }
.wej__drawing .wpd--journey-v { max-width: 520px; }
.wej__drawing .wpd--journey-v .wpd-stop__glyph * { stroke-width: 1.35; }
.wej__drawing .wpd--journey-v .wpd-stop__name { font-size: 32px; }
@media (min-width: 900px) {
	.wej__drawing .wpd--journey:not(.wpd--journey-v) { display: block; }
	.wej__drawing .wpd--journey-v { display: none; }
}
.wej[data-state="on"] .wpd--journey { --x: 1; }
.wej__stops { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.wej__stop { min-height: 40px; padding: 0 var(--s-4); border: var(--bw) solid var(--rule); background: transparent; font: 500 .8125rem/1.2 var(--f-sans); color: var(--fg); }
.wej__stop[aria-selected="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.wej__stop:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: 2px; }
.wej__panel { padding: var(--s-5) 0 0; border-top: var(--bw) solid var(--rule); }
.wej__name { font-size: var(--t-h4); font-weight: var(--w-h3); margin-bottom: var(--s-3); }
.wej__lines { display: grid; gap: var(--s-3); margin: 0; }
.wej__line { display: grid; gap: var(--s-1); padding: var(--s-3) var(--s-4); background: none; outline: var(--bw) dashed var(--rule); outline-offset: calc(-1 * var(--bw)); }
.wej__line dd { color: var(--fg-2); }
.wej__line dt { display: flex; align-items: center; gap: var(--s-2); font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
.wej__line dd { margin: 0; font-size: var(--t-body); line-height: 1.5; }
.wej[data-state="off"] .wej__line--off dt, .wej[data-state="on"] .wej__line--on dt { color: var(--fg); }
/* the line of the state on show is the lit one: paper, with the legend's own glyph before its label
   (Molten dot = retyped by hand, cyan dash = connection) — no coloured side bars */
.wej[data-state="off"] .wej__line--off, .wej[data-state="on"] .wej__line--on { background: var(--paper); outline-style: solid; }
.wej[data-state="off"] .wej__line--off dd, .wej[data-state="on"] .wej__line--on dd { color: var(--fg); }
.wej[data-state="off"] .wej__line--off dt::before, .wej[data-state="on"] .wej__line--on dt::before { content: ""; flex: none; }
.wej[data-state="off"] .wej__line--off dt::before { width: 9px; height: 9px; border-radius: 50%; background: var(--molten); }
.wej[data-state="on"] .wej__line--on dt::before { width: 16px; height: 3px; background: var(--cyan-deep); }
.wej__hint { margin-top: 0; text-transform: none; letter-spacing: .02em; }
@media (min-width: 900px) { .wej__lines { grid-template-columns: 1fr 1fr; } }
/* without JS: every stop is listed with both lines (the stop buttons and the switch need JS) */
html:not(.js) :is(.wej__seg, .wej__stops, .wej__hint) { display: none; }
html:not(.js) .wej__panel { display: grid; gap: var(--s-6); }

/* ---- e-shop · s3 connectors ------------------------------------------------------------------------ */
.we-conn__list { display: grid; margin: 0; border-bottom: var(--bw) solid var(--rule); }
.we-conn__row { display: grid; gap: var(--s-2) var(--gutter); padding: var(--s-5) 0; border-top: var(--bw) solid var(--rule); }
.we-conn__row dt { font-size: var(--t-h4); font-weight: var(--w-h3); }
.we-conn__row dd { margin: 0; color: var(--fg-2); max-width: 56ch; }
.we-conn__stat { display: grid; gap: var(--s-3); margin-top: var(--s-8); max-width: 640px; }
.we-conn__statline { font-family: var(--f-serif); font-size: var(--t-lead); line-height: var(--lh-lead); }
@media (min-width: 1024px) {
	.we-conn__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-8); }
	.we-conn__row { grid-template-columns: 9rem minmax(0, 1fr); }
	.we-conn__stat { margin-left: calc(100% / 12 * 5); }
}

/* ---- e-shop · s4 e-invoicing, s5/s6 duo, s7 a11y + s8 care, s10 CTA ------------------------------------ */
.we-einv__grid, .we-a11y__grid, .wc-why__grid, .wc-take__grid { row-gap: var(--s-6); }
.we-einv__body, .we-a11y__body { display: grid; gap: var(--s-4); align-content: start; }
.we-einv__body p + p, .we-a11y__body p + p { margin-top: 0; }
.we-einv__body > p:not(.nx-lead) { color: var(--fg-2); max-width: 56ch; }
.we-einv__scope { font-size: var(--t-small); }
.we-einv__body .nx-btn { justify-self: start; }
@media (min-width: 1024px) {
	.we-einv__head, .we-a11y__head, .wc-why__head { grid-column: 1 / span 5; }
	.we-einv__body, .we-a11y__body, .wc-why__body { grid-column: 7 / -1; }
}
.we-duo__grid { row-gap: var(--s-8); }
.we-duo__block { display: grid; gap: var(--s-4); align-content: start; }
.we-duo__title { font-size: var(--t-h3); max-width: 22ch; }
.we-duo__body { max-width: 50ch; color: var(--fg-2); }
.we-duo__proof { margin: 0; padding: var(--s-4) var(--s-5); background: var(--paper-2); }
.we-duo__proof p { font-family: var(--f-serif); font-style: italic; font-size: 1.0625rem; line-height: 1.5; }
.we-duo__proof footer { margin-top: var(--s-3); }
.we-duo__block .nx-btn { justify-self: start; }
@media (min-width: 1024px) { .we-duo__block:first-child { grid-column: 1 / span 5; } .we-duo__block:last-child { grid-column: 7 / -1; } }
.we-a11y__care { display: grid; gap: var(--s-3); align-content: start; margin-top: var(--s-6); padding-top: var(--s-5); border-top: var(--bw) solid var(--rule); }
.we-a11y__caretitle { font-size: var(--t-h4); font-weight: var(--w-h3); max-width: 30ch; }
.we-a11y__care p { color: var(--fg-2); max-width: 56ch; }
.we-a11y__care .nx-btn { justify-self: start; }
@media (min-width: 1024px) { .we-a11y__care { grid-column: 7 / -1; } }
.we-cta__files { display: grid; align-content: end; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.we-cta__files .nx-btn--text { color: var(--paper); justify-content: flex-start; text-align: left; }

/* ---- care · s2 why now -------------------------------------------------------------------------------- */
.wc-why__body { display: grid; gap: var(--s-6); }
.wc-why__fact { display: grid; gap: var(--s-3); padding-top: var(--s-4); border-top: var(--bw) solid var(--rule); }
.wc-why__fact p + p { margin-top: 0; }
.wc-why__line { font-size: var(--t-lead); color: var(--cyan); }

/* ---- care · s3 plans: one ruled table, the middle plan on the 47° seam ------------------------------------ */
.wcp { container-type: inline-size; }
.wcp__table { width: 100%; border-collapse: collapse; border-bottom: var(--bw) solid var(--rule); }
.wcp__table :is(th, td) { padding: var(--s-3) var(--s-4); border-top: var(--bw) solid var(--rule); text-align: left; vertical-align: top; }
.wcp__table tbody th { font: 400 var(--t-body)/1.45 var(--f-sans); color: var(--fg); padding-left: 0; }
.wcp__corner { vertical-align: bottom !important; padding-left: 0 !important; }
.wcp__plan { position: relative; vertical-align: bottom !important; padding-top: var(--s-6) !important; }
.wcp__name { display: block; font: var(--w-h2) var(--t-h3)/1.1 var(--f-sans); letter-spacing: var(--tr-h3); color: var(--fg); }
.wcp__price { display: block; margin-top: var(--s-2); font: 600 1.125rem/1.2 var(--f-mono); color: var(--fg); }
.wcp__line { display: block; margin-top: var(--s-2); font: 400 var(--t-small)/1.45 var(--f-sans); color: var(--fg-2); text-transform: none; letter-spacing: 0; }
.wcp__badge { position: absolute; top: 0; left: var(--s-4); padding: 3px 7px; background: var(--ink); color: var(--paper); font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; }
.wcp__cell { font: 500 .8125rem/1.4 var(--f-mono); }
.wcp__yes { color: var(--cyan-deep); }
.wcp__yes .nx-icon { width: 20px; height: 20px; stroke-width: 2; }
.wcp__no { color: var(--fg-3); }
.wcp__plan--secure, .wcp__cell--secure, tfoot .wcp__cta:nth-child(3) { background: var(--paper-2); }
.wcp__plan--secure { box-shadow: inset 0 3px 0 var(--indigo); }
.wcp__vat { font: 500 var(--t-micro)/1.4 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); padding-left: 0 !important; vertical-align: middle !important; }
.wcp__cta .nx-btn { width: 100%; justify-content: space-between; text-align: left; }
@media (min-width: 900px) { .wcp__table tbody th { width: 34%; } }
@media (max-width: 899px) {
	/* stacked: each feature row lists the three plans as labelled lines */
	.wcp__table, .wcp__table :is(thead, tbody, tfoot, tr, th, td) { display: block; width: 100%; }
	.wcp__table thead tr { display: grid; gap: var(--s-3); }
	.wcp__corner { display: none !important; }
	.wcp__plan { padding: var(--s-6) var(--s-4) var(--s-4) !important; border: var(--bw) solid var(--rule); }
	.wcp__table tbody tr { padding: var(--s-3) 0; border-top: var(--bw) solid var(--rule); }
	.wcp__table tbody th { padding: 0 0 var(--s-2); border: 0; font-weight: var(--w-strong); }
	.wcp__table tbody td { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: var(--s-3); padding: var(--s-1) 0; border: 0; background: none !important; }
	.wcp__table tbody td::before { content: attr(data-plan); font: 500 .6875rem/1.6 var(--f-mono); letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--fg-2); }
	.wcp__table tfoot tr { display: grid; gap: var(--s-2); padding-top: var(--s-4); }
	.wcp__table tfoot td { border: 0; padding: 0 !important; background: none !important; }
	/* Stacked, the Secure button runs the full width of a phone: Molten there plus the header CTA would
	   cover > 5 % of the screen (bible R2). On phones it takes the outline look of its neighbours; the
	   plan itself stays marked by its «το ελάχιστο για e-shop» badge and paper-2 card. */
	.wcp__cta .nx-btn--primary { --btn-fill: var(--fg); --btn-fg: var(--fg); }
	.wcp__cta .nx-btn--primary::before { clip-path: var(--clip-ui-ring); }
	.wcp__cta .nx-btn--primary::after { display: none !important; }
}

/* ---- care · s4 the wall --------------------------------------------------------------------------------- */
.wc-wall__grid { row-gap: var(--s-6); align-items: start; }
.wc-wall__fig { margin: 0; padding: var(--s-5); background: var(--paper); }
.wc-wall__list { margin: 0; padding: 0; list-style: none; border-bottom: var(--bw) solid var(--rule); }
.wc-wall__row { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-3) var(--s-4) 0; border-top: var(--bw) solid var(--rule); transition: background-color var(--dur-ui) var(--ease-mech), padding var(--dur-ui) var(--ease-mech); }
.wc-wall__row.is-focus, .wc-wall__row:focus-visible { background: var(--paper); padding-left: var(--s-3); }
.wc-wall__row:focus-visible { outline: var(--bw-focus) solid var(--focus); outline-offset: -2px; }
.wc-wall__title { font-size: var(--t-h4); font-weight: var(--w-h3); }
.wc-wall__row p { color: var(--fg-2); max-width: 54ch; }
.wc-wall__link { margin-top: var(--s-6); }
@media (min-width: 1024px) {
	.wc-wall__fig { grid-column: 1 / span 6; position: sticky; top: calc(var(--header-h) + var(--s-6)); }
	.wc-wall__list { grid-column: 7 / -1; }
}
/* phones: at ~310 px the hanging layer names would be 5 px tall. The list right under the drawing names
   the six layers in the same order, so the drawing keeps the wall, the arrow and its two sides (set
   large enough to read), and its empty lower band is trimmed. */
@media (max-width: 767px) {
	.wc-wall__fig { overflow: hidden; }
	.wc-wall__fig .wpd--wall { margin-bottom: -25%; }
	.wpd--wall .wpd-layer__name, .wpd--wall .wpd-leader { display: none; }
	.wc-wall__fig .wpd--wall .wpd-side { font-size: 44px; }
}

/* ---- care · s5 takeover -------------------------------------------------------------------------------- */
.wc-take__title { max-width: 16ch; }
.wc-take__body { display: grid; gap: var(--s-5); align-content: start; }
.wc-take__body .nx-btn { justify-self: start; }
@media (min-width: 1024px) { .wc-take__title { grid-column: 1 / span 6; } .wc-take__body { grid-column: 7 / -1; } }

/* ---- FAQ (shared layout) -------------------------------------------------------------------------------- */
.wa-faq__grid { row-gap: var(--s-5); }
.wa-faq__title { font-size: var(--t-h2); }
@media (min-width: 1024px) { .wa-faq__title { grid-column: 1 / span 4; } .wa-faq__list { grid-column: 5 / -1; } }

/* Phones: the closing section's Molten button and the header's Molten CTA share one screen. At the standard
   size the two cover 5.2–5.3 % of a 390 px screen (bible R2: ≤ 5 %); 44 px high (the touch minimum), tighter
   padding and 14 px type keep the pair under the line. Foundation request: the same for every page. */
@media (max-width: 479px) {
	.nx-cta .nx-btn--primary { min-height: 44px; padding-inline: 16px; font-size: .875rem; }
}

} /* end @layer pages */