@layer pages {

/* ============================================================
   Центр клеймів JN Academy
   Єдина візуальна мова з рештою сайту та ActiveBioBoost:
   кремове тло, зелений/оранж, карти з радіусом і м'якою тінню,
   оранжеві акценти в заголовках, lift на hover.
   ============================================================ */

:root {
  --green:#013c35;
  --green-soft:#025a50;
  --green-deep:#002a25;
  --orange:#ff6f3f;
  --orange-dark:#e85a2a;
  --cream:#f7f6f3;
  --cream-deep:#efece5;
  --border:#e5e0d8;
  --text:#111111;
  --muted:#5f6b67;
  --white:#fff;
  --radius:20px;
  --radius-sm:14px;
  --radius-xs:10px;
  --ease:.25s ease;
  --shadow-soft:0 22px 50px rgba(1,60,53,.10);
  --shadow-lift:0 30px 60px rgba(1,60,53,.14);
  --glow:radial-gradient(120% 100% at 100% 0,rgba(255,111,63,.22),transparent 55%);
  --gutter:clamp(16px,4vw,48px);
}

*,*::before,*::after { box-sizing:border-box; }

html { scroll-behavior:smooth; scroll-padding-top:88px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none !important; animation:none !important; }
}

body {
  margin:0;
  font-family:Montserrat,system-ui,sans-serif;
  font-size:1rem;
  line-height:1.75;
  color:var(--text);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img { display:block; max-width:100%; }
a { color:inherit; text-underline-offset:3px; }
button,input,select,textarea { font:inherit; color:inherit; }
a,button,input,select,textarea,summary { -webkit-tap-highlight-color:transparent; }
:where(a,button,input,select,textarea,summary):focus-visible {
  outline:2.5px solid var(--orange-dark);
  outline-offset:3px;
  border-radius:4px;
}

h1,h2,h3,h4,p { margin:0; }
h1,h2,h3 { line-height:1.14; letter-spacing:-0.03em; font-weight:700; }
h1 { font-size:clamp(2rem,4vw,3.25rem); letter-spacing:-0.04em; text-wrap:balance; }
h2 { font-size:clamp(1.6875rem,3.6vw,2.75rem); letter-spacing:-0.035em; text-wrap:balance; }
h3 { font-size:clamp(1.125rem,1.4vw,1.3125rem); line-height:1.28; letter-spacing:-0.02em; }
em { font-style:normal; color:var(--orange-dark); }
p { text-wrap:pretty; }

.shell { width:min(1160px,100% - var(--gutter) * 2); margin-inline:auto; }

.skip {
  position:fixed; top:-120px; left:16px; z-index:100;
  background:var(--white); color:var(--text);
  padding:12px 16px; border-radius:8px; box-shadow:0 8px 24px #0003;
  transition:top .15s;
}
.skip:focus { top:12px; }

/* ---------- Shared atoms ---------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:8px;
  margin-bottom:14px;
  color:var(--orange-dark);
  font-size:clamp(0.625rem,1.1vw,0.75rem);
  font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before { content:""; width:7px; height:7px; border-radius:999px; background:currentColor; }

.lead {
  max-width:60ch;
  color:var(--muted);
  font-size:clamp(1rem,1.6vw,1.1875rem);
  line-height:1.75;
}

.button,.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:50px; padding:13px 26px;
  border:1px solid transparent; border-radius:9px;
  font-size:0.875rem; font-weight:800; letter-spacing:.005em;
  text-decoration:none; cursor:pointer;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.button--primary,.btn {
  background:var(--orange); color:var(--white);
  box-shadow:0 12px 30px rgba(255,111,63,.28);
}
.button--primary:hover,.btn:hover { background:var(--orange-dark); transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.6; cursor:wait; transform:none; box-shadow:none; }
.button--ghost,.btn.ghost {
  background:var(--white); color:var(--green);
  border-color:var(--border); box-shadow:none;
}
.button--ghost:hover,.btn.ghost:hover { border-color:var(--orange); color:var(--orange-dark); transform:translateY(-2px); }
.btn.compact { min-height:42px; padding:10px 18px; font-size: .875rem; box-shadow:none; }
.arr { transition:transform .18s ease; }
.button:hover .arr,.btn:hover .arr,.arrow-link:hover .arr { transform:translate(3px,-3px); }

.button-row,.cta-row { display:flex; flex-wrap:wrap; gap:14px; align-items:center; }

.arrow-link {
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.875rem; font-weight:800; color:var(--orange-dark);
  text-decoration:none; width:fit-content;
}
.arrow-link:hover { text-decoration:underline; text-underline-offset:4px; }

/* ---------- Section rhythm ---------- */
section { padding-block:clamp(56px,6.5vw,104px); }
.band-cream { background:var(--cream-deep); }

.section-head { max-width:760px; margin-bottom:clamp(30px,4vw,52px); }
.section-head p { margin-top:16px; color:var(--muted); font-size:1rem; line-height:1.75; }
.section-head--action {
  max-width:none; display:flex; align-items:flex-end;
  justify-content:space-between; gap:clamp(18px,3vw,36px);
}
.section-head--action > div { max-width:760px; }
.section-head--action .btn { flex:none; }

/* ---------- Header ---------- */
.site-header {
  position:sticky; top:0; z-index:30;
  background:rgba(1,60,53,.96);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  color:#eef2ec;
}
.nav { display:flex; align-items:center; gap:28px; min-height:72px; }
.brand { display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:inherit; margin-right:auto; }
.brand-mark {
  font-size:1.5rem; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:var(--orange); padding-right:14px; border-right:1px solid rgba(255,255,255,.22);
}
.brand-mark > span { display:block; font-size: .875rem; font-weight:700; letter-spacing:.24em; margin-top:5px; color:rgba(255,255,255,.75); }
.brand-name { font-size:0.9375rem; font-weight:700; line-height:1.25; }
.brand-name small { display:block; font-size: .875rem; font-weight:400; margin-top:3px; color:rgba(255,255,255,.62); }
.nav nav { display:flex; gap:26px; font-size: .875rem; font-weight:700; letter-spacing:.02em; }
.nav nav a { color:rgba(255,255,255,.72); text-decoration:none; padding:6px 0; border-bottom:1.5px solid transparent; transition:color .18s,border-color .18s; }
.nav nav a:hover { color:#fff; border-color:var(--orange); }

/* ---------- Hero ---------- */
.hero { padding-block:clamp(48px,6vw,88px) clamp(36px,4vw,60px); background:var(--cream); }
.hero-grid { display:grid; grid-template-columns:1.2fr .9fr; gap:clamp(32px,5vw,68px); align-items:center; }
.hero h1 { margin-bottom:22px; }
.hero .lead { margin-bottom:28px; }
.hero-note {
  margin-top:22px; font-size:0.875rem; color:var(--muted);
  display:flex; align-items:center; gap:10px;
}
.hero-note::before { content:""; flex:none; width:8px; height:8px; border-radius:50%; background:var(--orange); box-shadow:0 0 0 4px rgba(255,111,63,.18); }

/* specimen — deep green accent card with warm glow */
.specimen {
  position:relative; overflow:hidden;
  background:var(--green); color:#eef2ec;
  border-radius:var(--radius); padding:30px;
  box-shadow:var(--shadow-soft);
}
.specimen::before { content:""; position:absolute; inset:0; opacity:.55; background:var(--glow); pointer-events:none; }
.specimen > * { position:relative; }
.specimen-top {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size: .875rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
  padding-bottom:18px; border-bottom:1px solid rgba(255,255,255,.14);
}
.specimen-label { font-size: .875rem; letter-spacing:.14em; text-transform:uppercase; color:#ffb79d; margin-top:22px; font-weight:800; }
.specimen-q { font-size:clamp(1.25rem,1.6vw + 0.75rem,1.625rem); line-height:1.36; font-weight:700; letter-spacing:-.02em; margin-top:10px; color:#fff; }
.specimen dl { margin:24px 0 0; }
.specimen dl > div { display:grid; grid-template-columns:86px 1fr; gap:16px; padding:12px 0; border-top:1px solid rgba(255,255,255,.14); font-size:0.875rem; }
.specimen dt { color:rgba(255,255,255,.6); font-weight:600; }
.specimen dd { margin:0; font-weight:700; color:#fff; }
.specimen-foot { margin-top:18px; font-size: .875rem; line-height:1.55; color:rgba(255,255,255,.55); }

.trust { display:flex; flex-wrap:wrap; gap:14px 40px; margin-top:clamp(44px,5vw,64px); padding-top:26px; border-top:1px solid var(--border); }
.trust span { display:inline-flex; align-items:center; gap:11px; font-size:0.875rem; font-weight:700; color:#30433d; }
.trust span::before { content:""; width:9px; height:9px; flex:none; border:2px solid var(--orange); transform:rotate(45deg); }

/* ---------- Cards (who / methods) ---------- */
.card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,22px); }
.card {
  display:flex; flex-direction:column;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:clamp(24px,2.4vw,32px);
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.card:hover { transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow-lift); }
.card-icon {
  display:inline-grid; place-items:center; width:46px; height:46px;
  border-radius:12px; background:rgba(255,111,63,.1); color:var(--orange-dark);
  margin-bottom:20px;
}
.card-icon svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.card-kicker { font-size: .875rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.card h3 { color:var(--green); margin-bottom:12px; }
.card p { color:var(--muted); font-size:0.9375rem; }
.quote { margin-top:auto; padding-top:18px; margin-top:20px; border-top:1px solid var(--border); font-weight:700; color:var(--green); font-size:0.9375rem; }
.quote::before { content:"“"; color:var(--orange-dark); }
.quote::after { content:"”"; color:var(--orange-dark); }

/* ---------- Callout ---------- */
.callout {
  margin-top:clamp(20px,2.4vw,28px);
  display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start;
  background:var(--white); border:1px solid var(--border);
  border-radius:var(--radius); padding:clamp(24px,2.6vw,32px);
}
.callout .card-icon { margin:0; background:rgba(1,60,53,.07); color:var(--green); }
.callout h3 { color:var(--green); margin-bottom:10px; }
.callout p { color:var(--muted); font-size:0.9375rem; }

/* ---------- Process steps ---------- */
.steps { list-style:none; counter-reset:step; display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.4vw,32px); padding:0; margin:0; }
.steps li { counter-increment:step; position:relative; padding-top:28px; border-top:2px solid var(--green); }
.steps li::before {
  content:"0" counter(step); position:absolute; top:-16px; left:0;
  display:inline-grid; place-items:center; width:32px; height:32px;
  background:var(--orange); color:#fff; border-radius:9px;
  font-size: .875rem; font-weight:800; font-variant-numeric:tabular-nums;
  box-shadow:0 8px 18px rgba(255,111,63,.3);
}
.steps h3 { color:var(--green); margin-bottom:10px; }
.steps p { font-size:0.875rem; color:var(--muted); }
.note { font-size: .875rem; line-height:1.6; color:var(--muted); max-width:92ch; }
.steps + .note { margin-top:clamp(28px,3vw,40px); }

/* ---------- Dark results panel ---------- */
.results-panel {
  position:relative; overflow:hidden;
  background:var(--green); color:#eef2ec;
  border-radius:clamp(20px,3vw,28px);
  padding:clamp(32px,4.5vw,64px);
  box-shadow:var(--shadow-soft);
}
.results-panel::before { content:""; position:absolute; inset:0; opacity:.5; background:var(--glow); pointer-events:none; }
.results-panel > * { position:relative; }
.two { display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,5vw,72px); align-items:start; }
.results-panel .eyebrow { color:#ffb79d; }
.results-panel h2 { color:#fff; }
.results-panel .lead { color:rgba(255,255,255,.72); margin-top:18px; }
.results-panel .arrow-link { color:#ffb79d; margin-top:26px; }
.deliverables { display:grid; }
.deliverables article { display:grid; grid-template-columns:auto 1fr; gap:20px; padding:22px 0; border-top:1px solid rgba(255,255,255,.14); }
.deliverables article:first-child { padding-top:0; border-top:0; }
.deliverables .d-n { font-size: .875rem; font-weight:800; color:#ffb79d; font-variant-numeric:tabular-nums; }
.deliverables h3 { color:#fff; margin-bottom:8px; }
.deliverables p { font-size:0.875rem; color:rgba(255,255,255,.72); }

/* ---------- Pricing ---------- */
.pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,22px); }
.plan { display:flex; flex-direction:column; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(26px,2.6vw,32px); transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease); }
.plan:hover { transform:translateY(-6px); border-color:transparent; box-shadow:var(--shadow-lift); }
.plan-kind { font-size: .875rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); }
.plan h3 { color:var(--green); margin-top:8px; }
.plan .price { font-size:clamp(1.75rem,1.6vw + 1.125rem,2.25rem); font-weight:800; letter-spacing:-.03em; color:var(--text); margin-top:18px; }
.plan .price small { font-size:0.875rem; font-weight:700; color:var(--muted); letter-spacing:0; }
.plan > p { font-size:0.9375rem; color:var(--muted); margin-top:14px; }
.plan .btn { margin-top:auto; align-self:stretch; }
.plan .btn:first-of-type { margin-top:26px; }
.plan.feature { border-color:var(--green); box-shadow:var(--shadow-soft); }
.plan.feature .plan-kind { color:var(--orange-dark); }

.consult {
  position:relative; overflow:hidden;
  display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(24px,3vw,48px); align-items:center;
  margin-top:clamp(24px,3vw,36px); padding:clamp(28px,3vw,40px);
  background:var(--green); color:#eef2ec; border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
}
.consult::before { content:""; position:absolute; inset:0; opacity:.5; background:var(--glow); pointer-events:none; }
.consult > * { position:relative; }
.consult h3 { color:#fff; margin-bottom:10px; }
.consult p { font-size:0.9375rem; color:rgba(255,255,255,.72); }
.consult .arrow-link { color:#ffb79d; }

/* ---------- Estimate ---------- */
.est { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(20px,2.4vw,32px); align-items:start; }
#f { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 20px; background:var(--white); padding:clamp(24px,2.6vw,34px); border:1px solid var(--border); border-radius:var(--radius); }
.f { min-width:0; }
.f.full { grid-column:1/-1; }
.f > label { display:block; font-size: .875rem; font-weight:700; color:#30433d; margin-bottom:8px; }
.f input:not([type=checkbox]),.f select,.f textarea {
  width:100%; max-width:100%; min-height:48px; padding:11px 13px;
  border:1px solid #c7c0b4; border-radius:var(--radius-xs); background:#fff; color:var(--text);
  font-size:0.9375rem; transition:border-color .15s,box-shadow .15s;
}
.f select {
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b67' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px;
}
.f input:not([type=checkbox]):focus,.f select:focus,.f textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(1,60,53,.12); outline:none; }
.f textarea { resize:vertical; min-height:92px; line-height:1.55; }
.f input[aria-invalid=true],.f select[aria-invalid=true],.f textarea[aria-invalid=true] { border-color:#a52c16; }
.f .errorlist,.errorlist { font-size: .875rem; color:#a52c16; list-style:none; margin:8px 0 0; padding:0; }
.f.full[role=alert],#form-errors { background:#fdecec; border:1px solid #f0c2bb; border-radius:var(--radius-xs); padding:12px 14px; color:#8f2516; font-size: .875rem; }
#form-errors .errorlist { color:#8f2516; margin:0; }
.claims-consent { display:flex !important; gap:11px; align-items:flex-start; font-size: .875rem; font-weight:400 !important; color:var(--muted); line-height:1.55; }
.claims-consent input { width:19px; height:19px; flex:none; margin-top:2px; accent-color:var(--green); }
.recalc { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.recalc .note { margin:0; flex:1 1 220px; }
.claims-trap { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }

.out { position:sticky; top:92px; overflow:hidden; background:var(--white); border:1px solid var(--border); border-radius:var(--radius); padding:clamp(24px,2.4vw,30px); box-shadow:var(--shadow-soft); }
.out::before { content:""; position:absolute; left:0; right:0; top:0; height:4px; background:linear-gradient(90deg,var(--orange),#ffb79d); }
.out .eyebrow { margin-bottom:12px; }
.out .num { font-size:clamp(1.75rem,2vw + 1rem,2.5rem); font-weight:800; letter-spacing:-.03em; line-height:1.2; color:var(--green); margin-bottom:20px; }
.lines { display:grid; }
.lines > div { display:flex; justify-content:space-between; gap:18px; padding:11px 0; border-top:1px solid var(--border); font-size:0.875rem; color:var(--muted); }
.lines > div span:last-child { white-space:nowrap; font-weight:700; color:var(--text); }
.out .note { margin-top:18px; }
.out .btn { width:100%; margin-top:20px; }
.out .foot-note { margin-top:16px; }
.out .foot-note a { color:var(--orange-dark); font-weight:700; }
.msg { display:none; margin-top:16px; padding:12px 14px; border-radius:var(--radius-xs); background:#e7f3ef; border:1px solid #bcdcd2; color:var(--green); font-size: .875rem; line-height:1.5; white-space:pre-line; }
.msg.show { display:block; }

/* ---------- FAQ ---------- */
.faq-grid { display:grid; grid-template-columns:.8fr 1.4fr; gap:clamp(32px,4vw,72px); align-items:start; }
.faq-aside h2 { margin-top:0; }
.faq-aside p { margin-top:16px; color:var(--muted); font-size:0.9375rem; }
.faq-list { display:grid; }
details { border-top:1px solid var(--border); }
details:last-child { border-bottom:1px solid var(--border); }
summary { display:flex; align-items:center; justify-content:space-between; gap:18px; cursor:pointer; list-style:none; padding:22px 0; font-size:1.0625rem; font-weight:700; letter-spacing:-.01em; color:var(--text); }
summary::-webkit-details-marker { display:none; }
summary::after { content:""; flex:none; width:12px; height:12px; border-right:2px solid var(--orange-dark); border-bottom:2px solid var(--orange-dark); transform:rotate(45deg); transition:transform .2s; margin-top:-4px; }
details[open] summary::after { transform:rotate(-135deg); margin-top:3px; }
details[open] summary { color:var(--green); }
.faq-a { padding:0 0 24px; }
.faq-a p { font-size:0.9375rem; color:var(--muted); }
.faq-a p + p { margin-top:12px; }
.faq-a a { color:var(--orange-dark); font-weight:700; }

/* ---------- Contact band ---------- */
.contact-band { background:var(--cream-deep); border-top:1px solid var(--border); }
.contact-band .shell { display:flex; align-items:center; justify-content:space-between; gap:clamp(24px,4vw,48px); padding-block:clamp(44px,5vw,64px); }
.contact-band h2 { max-width:22ch; }
.contact-band .btn { flex:none; }

/* ---------- Footer ---------- */
footer { background:var(--green-deep); color:rgba(255,255,255,.66); font-size:0.875rem; padding:clamp(44px,5vw,60px) 0 28px; }
.footer-grid { display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:clamp(28px,4vw,60px); }
.footer-about b { display:block; color:#fff; font-size:1rem; line-height:1.45; max-width:34ch; }
.footer-about p { margin-top:10px; line-height:1.6; }
.footer-about a { display:inline-flex; margin-top:14px; color:#ffb79d; font-weight:800; text-decoration:none; }
.footer-about a:hover { text-decoration:underline; }
.footer-col h4 { font-size: .875rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.55); font-weight:800; margin-bottom:6px; }
.footer-col a { display:block; margin-top:10px; color:#d8e4e0; text-decoration:none; }
.footer-col a:hover { color:#fff; text-decoration:underline; }
.footer-bottom { display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-top:clamp(32px,4vw,44px); padding-top:22px; border-top:1px solid rgba(255,255,255,.14); font-size: .875rem; }
.footer-bottom a { color:#d8e4e0; }

[hidden] { display:none !important; }

/* ---------- Responsive ---------- */
@media (max-width:960px) {
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .specimen { max-width:560px; }
  .two { grid-template-columns:1fr; gap:36px; }
  .faq-grid { grid-template-columns:1fr; gap:28px; }
  .card-grid,.pricing { grid-template-columns:1fr; }
  .consult { grid-template-columns:1fr; gap:20px; }
  .steps { grid-template-columns:repeat(2,1fr); gap:34px 24px; }
  .callout { grid-template-columns:1fr; }
  .est { grid-template-columns:1fr; }
  .out { position:static; }
  .contact-band .shell { flex-direction:column; align-items:flex-start; }
  .section-head--action { flex-direction:column; align-items:flex-start; }
}
@media (max-width:760px) {
  .nav { flex-wrap:wrap; gap:12px 20px; min-height:0; padding-block:14px; }
  .brand { margin-right:0; }
  .nav nav { order:3; width:100%; justify-content:space-between; gap:12px; padding-top:12px; border-top:1px solid rgba(255,255,255,.12); font-size: .875rem; }
  .nav > .btn { margin-left:auto; }
  .footer-grid { grid-template-columns:1fr 1fr; }
  .footer-about { grid-column:1/-1; }
}
@media (max-width:520px) {
  body { font-size:0.9375rem; }
  .brand-mark { font-size:1.375rem; padding-right:12px; }
  .brand-name { font-size:0.875rem; }
  .brand-name small { font-size: .875rem; }
  .nav > .btn { font-size: .875rem; min-height:42px; padding:9px 14px; }
  .cta-row .btn,.cta-row .arrow-link { width:100%; justify-content:center; text-align:center; }
  .specimen { padding:24px 22px; }
  .steps { grid-template-columns:1fr; gap:28px; }
  #f { grid-template-columns:1fr; padding:22px; }
  .f.full { grid-column:auto; }
  .footer-grid { grid-template-columns:1fr; }
}

}