/* Nadhif website: the pages other than home (how to use, buy, my account, legal pages, press kit, contact).
   Loaded after home.css, which brings the tokens, the glass surface, buttons, the floating top bar and the footer;
   this file only adds what these pages show: a page header, steps, cards, tables, the legal text and the forms. */

.sub { position: relative; z-index: 1; padding-bottom: clamp(24px, 4vw, 48px); }
.sub > * { width: min(880px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.sub > .page-hero { width: min(980px, 100% - 2 * var(--gutter)); }
.sub > .buy { width: min(620px, 100% - 2 * var(--gutter)); }

.sub h1 { font-size: clamp(38px, 5.4vw, 64px); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.sub h2 { font-size: clamp(28px, 3.4vw, 42px); font-weight: 700; letter-spacing: -.03em; line-height: 1.08; }
.sub h3 { font-size: 18px; font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
:root[lang="ar"] .sub h1, :root[lang="ar"] .sub h2 { line-height: 1.3; }
.lede { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.55; color: var(--ink-2); }
.lede strong { color: var(--ink); font-weight: 600; }
.muted { color: var(--ink-2); }
.sub p + p { margin-top: 10px; }

/* Shortcuts and commands look like the app's: keycaps, and code that stays left to right inside Arabic. */
.sub kbd {
  display: inline-block; min-width: 1.9em; padding: 1px 7px; border-radius: 7px; text-align: center;
  font: 500 .84em/1.6 var(--body); color: var(--ink); white-space: nowrap;
  background: var(--card); box-shadow: inset 0 -1.5px 0 var(--hairline), 0 0 0 1px var(--card-border);
}
.sub code { font: .88em var(--mono); padding: .1em .4em; border-radius: 6px; background: var(--control); color: var(--ink); overflow-wrap: anywhere; }
[dir="rtl"] .sub kbd, [dir="rtl"] .sub code { direction: ltr; unicode-bidi: isolate; }

.btn[hidden] { display: none; }

/* ---------- Page header ---------- */

.page-hero { display: grid; justify-items: center; gap: 18px; text-align: center; padding: clamp(132px, 15vw, 168px) 0 clamp(36px, 5vw, 56px); }
.page-hero .lede { max-width: 640px; }
.jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.jump a {
  padding: 7px 15px; border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 14px; font-weight: 550;
  background: color-mix(in srgb, var(--card) 70%, transparent); box-shadow: inset 0 0 0 1px var(--card-border);
  transition: background .2s, transform .2s var(--ease-pop);
}
.jump a:hover { background: var(--card); transform: translateY(-1px); }

/* ---------- How to use ---------- */

.howto { padding-top: clamp(64px, 8vw, 104px); scroll-margin-top: 40px; }
.section-head { display: grid; justify-items: center; gap: 14px; text-align: center; margin-bottom: 32px; }
.section-head .lede { max-width: 620px; }

/* The surfaces of these pages are the app's glass cards. */
.step, .place, .sub .faq details, .keytable, .buy-card, .buy-done, .account-license {
  position: relative;
  background: linear-gradient(180deg, var(--card-sheen), transparent 45%), var(--card);
  border: 1px solid var(--card-border);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 var(--card-highlight), 0 1px 2px var(--shadow-contact), 0 10px 28px -8px var(--shadow-ambient);
}

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 14px; }
.step { counter-increment: step; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; padding: 22px 26px; }
.step::before {
  content: counter(step); grid-column: 1; grid-row: 1 / span 9; align-self: start;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font: 700 17px/1 var(--display); color: #fff; background: var(--action);
  box-shadow: 0 6px 16px -4px rgb(36 88 194 / .45), inset 0 1px 0 rgb(255 255 255 / .2);
}
.step > * { grid-column: 2; }
.step h3 { padding-top: 8px; }
.step p { color: var(--ink-2); margin-top: 6px; font-size: 15.5px; }
.step p strong { color: var(--ink); font-weight: 600; }
.step .step-note {
  margin-top: 12px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; color: var(--ink);
  background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}
.howto > .muted { margin-top: 20px; font-size: 15px; max-width: 40em; }

.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.place { padding: 20px 22px; }
.place h3 { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.place p { margin-top: 6px; color: var(--ink-2); font-size: 15px; }

.keytable { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; font-size: 15px; }
.keytable td { padding: 12px 22px; border-top: 1px solid var(--separator); color: var(--ink-2); vertical-align: middle; }
.keytable tr:first-child td { border-top: 0; }
.keytable td:first-child { width: 9.5em; color: var(--ink); white-space: nowrap; }

.sub .faq { max-width: none; margin: 0; display: grid; gap: 10px; }
.sub .faq details { border-radius: 18px; }
.sub .faq summary {
  list-style: none; cursor: pointer; position: relative; padding-block: 18px; padding-inline: 22px 52px;
  font: 600 16.5px/1.4 var(--display); letter-spacing: -.01em; color: var(--ink);
}
.sub .faq summary::-webkit-details-marker { display: none; }
.sub .faq summary::after {
  content: ""; position: absolute; inset-inline-end: 22px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.8px no-repeat, linear-gradient(currentColor, currentColor) center / 1.8px 14px no-repeat;
  color: var(--ink-3); transition: transform .45s var(--ease-out);
}
.sub .faq details[open] summary::after { transform: rotate(45deg); }
.sub .faq details p { padding: 0 22px 20px; color: var(--ink-2); font-size: 15.5px; }

/* ---------- Legal pages ---------- */

.legal { padding: clamp(24px, 4.5vw, 52px); color: var(--ink-2); font-size: 16px; line-height: 1.65; }
.legal > :first-child { margin-top: 0; }
.legal h2 { font-size: clamp(21px, 2.4vw, 26px); color: var(--ink); margin: 40px 0 10px; letter-spacing: -.02em; }
.legal h3 { color: var(--ink); margin: 28px 0 8px; }
.legal p, .legal li { margin-top: 10px; }
.legal ol, .legal ul { padding-inline-start: 1.4em; margin: 0; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal a { color: var(--link); }
.legal-table { overflow-x: auto; margin-top: 16px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.legal th, .legal td { text-align: start; vertical-align: top; padding-block: 10px; padding-inline: 0 14px; border-bottom: 1px solid var(--separator); }
.legal th { color: var(--ink); font-weight: 600; }
.legal-license { white-space: pre-wrap; font: 13.5px/1.65 var(--mono); margin: 0; color: var(--ink-2); }
:root[lang="ar"] .legal { line-height: 1.8; }

/* ---------- Buy and My account ---------- */

.buy-card, .buy-done { padding: clamp(22px, 4vw, 34px); }
.buy-card + .buy-card, .buy-card + .buy-done { margin-top: 16px; }
.buy h2 { font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 12px; }
.buy-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.buy-price span { font: 700 clamp(48px, 7vw, 64px)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.buy-price small { color: var(--ink-2); font-size: 15px; }
.buy-price small strong { color: var(--ink); font-weight: 600; }
.price-launch { color: var(--success); font-weight: 600; font-size: 15px; margin-top: 10px; }
.buy-points { list-style: none; margin: 22px 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); font-size: 15.5px; }
.buy-points li { position: relative; padding-inline-start: 28px; }
.buy-points li::before {
  content: ""; position: absolute; inset-inline-start: 6px; top: .3em; width: 6px; height: 11px;
  border: solid var(--success); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.buy-points strong { color: var(--ink); font-weight: 600; }
.buy-signin { margin-top: 18px; }
.buy-note { color: var(--ink-2); margin-top: 12px; font-size: 15px; }
.buy-as { margin: 14px 0 0; }
.buy-owned .btn { margin-inline-end: 14px; }
.buy-terms { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 20px; color: var(--ink-2); font-size: 14.5px; }
.buy-terms input { margin-top: 4px; accent-color: var(--accent); flex: none; }
.buy-paypal { min-height: 48px; }
.buy-status { margin-top: 12px; color: var(--ink-2); min-height: 1.5em; }
.buy-key {
  width: 100%; font: 13px/1.5 var(--mono); padding: 12px 14px; border-radius: 12px; margin: 12px 0; resize: none; word-break: break-all;
  border: 1px solid var(--card-border); background: var(--control); color: var(--ink);
}
.buy-done h2 { color: var(--success); }
.link { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; font: inherit; color: var(--link); cursor: pointer; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Sign in with Google: Google's own button look (white, grey outline, the four-colour G). */
.btn-google { color: #1f1f1f; background: #fff; box-shadow: inset 0 0 0 1px #747775; font-weight: 500; gap: 12px; }
.btn-google:hover { background: #f8faff; box-shadow: inset 0 0 0 1px #1f1f1f; }
.btn-google svg { width: 20px; height: 20px; }

.account h2 { margin: 0 0 12px; }
.account-note { color: var(--ink-2); margin: 0 0 14px; font-size: 15px; }
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; color: var(--ink-2); }
.account-head p { margin: 0; }
.account-who { display: flex; align-items: center; gap: 12px; }
.account-who b { color: var(--ink); }
.account-avatar[hidden] { display: none; }
.account-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px var(--card-border); }
.account-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.account-count { color: var(--ink-2); font-size: 14px; }
.account-count-warning { color: var(--warning); font-weight: 600; }
.account-license { padding: clamp(18px, 3vw, 26px); margin: 16px 0; }
.account-license h3 { margin-bottom: 6px; }
.account-meta { color: var(--ink-2); font-size: 14px; margin: 0; }
.account-devices { margin: 10px 0 14px; }
.account-device { margin: 0 0 4px; font-size: 14px; color: var(--ink-2); }
.account-device .link { font-size: 14px; }

/* ---------- Press kit ---------- */

.press { margin-top: 8px; }
.press table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.press th, .press td { text-align: start; vertical-align: top; padding: 10px 12px; border-top: 1px solid var(--separator); }
.press th { width: 9.5em; color: var(--ink-3); font-weight: 600; }
.press-grid { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.press-grid li { display: grid; gap: 8px; font-size: 14px; color: var(--ink-2); }
.press-grid img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--card-border), 0 10px 24px -12px var(--shadow-lifted); }

/* ---------- Contact ---------- */

.sub > .contact { width: min(1080px, 100% - 2 * var(--gutter)); }
.contact { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.contact-card, .contact-done, .side-card, .contact-nojs {
  position: relative;
  background: linear-gradient(180deg, var(--card-sheen), transparent 45%), var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 var(--card-highlight), 0 1px 2px var(--shadow-contact), 0 10px 28px -8px var(--shadow-ambient);
}
.contact-card { padding: clamp(20px, 3.6vw, 34px); display: grid; gap: 26px; }
.contact-card fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.contact-label { display: flex; align-items: center; gap: 10px; font: 650 16.5px/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); margin: 0 0 12px; padding: 0; }
.contact-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.contact-label-row .contact-label { margin: 0; }
.contact-step {
  width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font: 700 12.5px/1 var(--display); color: #fff; background: var(--action);
  box-shadow: 0 4px 10px -3px rgb(36 88 194 / .5), inset 0 1px 0 rgb(255 255 255 / .2);
}

/* Topics: radio buttons that look like the app's capsule chips. */
.topic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.topic { position: relative; cursor: pointer; }
.topic input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.topic span {
  display: flex; align-items: center; gap: 9px; min-height: 46px; padding: 0 14px; border-radius: 14px;
  font: 550 15px/1.2 var(--body); color: var(--ink-2);
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--hairline);
  transition: background .2s, color .2s, box-shadow .25s, transform .2s var(--ease-pop);
}
.topic svg { width: 19px; height: 19px; flex: none; color: var(--ink-3); transition: color .2s, transform .35s var(--ease-pop); }
.topic:hover span { background: var(--control); color: var(--ink); }
.topic input:checked + span {
  color: var(--ink); background: color-mix(in srgb, var(--accent) 11%, var(--card));
  box-shadow: inset 0 0 0 1.5px var(--accent), 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.topic input:checked + span svg { color: var(--accent); transform: scale(1.08); }
.topic input:active + span { transform: scale(.97); }
.topic input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 2px; }
.topic-tip { margin-top: 12px; font-size: 14.5px; color: var(--ink-2); min-height: 1.5em; }
.topic-tip.is-swap { animation: tip-in .45s var(--ease-out); }
@keyframes tip-in { from { opacity: 0; transform: translateY(4px); } }

/* Fields */
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 7px; align-content: start; }
.contact-block > .field + .field, .field-row + .field { margin-top: 14px; }
.field label { font-size: 14px; font-weight: 600; color: var(--ink); }
.optional { font-weight: 500; color: var(--ink-3); margin-inline-start: 4px; }
.field input, .field textarea {
  -webkit-appearance: none; appearance: none; width: 100%; margin: 0;
  font: 16px/1.45 var(--body); color: var(--ink);
  background: var(--sunken); border: 1px solid var(--hairline); border-radius: 13px;
  padding: 11px 14px; min-height: 48px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field textarea { resize: vertical; min-height: 156px; max-height: 60vh; field-sizing: content; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); opacity: 1; }
.field input:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--ink-3) 45%, var(--hairline)); }
.field input:focus, .field textarea:focus {
  outline: none; background: var(--card); border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
.field-hint { font-size: 13.5px; color: var(--ink-3); }
.field-error { display: none; font-size: 13.5px; font-weight: 550; color: var(--danger); }
.field.is-bad input, .field.is-bad textarea { border-color: var(--danger); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 14%, transparent); }
.field.is-bad .field-error { display: block; animation: tip-in .35s var(--ease-out); }
.field.is-good input { border-color: color-mix(in srgb, var(--success) 55%, var(--hairline)); }
.field-foot { display: flex; justify-content: space-between; gap: 12px; min-height: 1.4em; }
.count { margin-inline-start: auto; font-size: 13px; color: var(--ink-3); }
.count.is-near { color: var(--warning); }
.field[hidden] { display: none; }
.field.is-shown { animation: field-in .5s var(--ease-out); }
@keyframes field-in { from { opacity: 0; transform: translateY(-6px); } }

.chip-btn {
  -webkit-appearance: none; appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px; border-radius: 999px; font: 600 13px/1 var(--body); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
  transition: background .2s, transform .2s var(--ease-pop);
}
.chip-btn svg { width: 15px; height: 15px; }
.chip-btn:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.chip-btn:active { transform: scale(.96); }
.chip-btn[hidden] { display: none; }

.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Human check and send */
.contact-send { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 22px; border-top: 1px solid var(--separator); }
.human { display: grid; gap: 8px; min-width: 0; flex: 1 1 260px; }
.human-widget:empty { display: none; }
.human-state { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
.human-state svg { width: 18px; height: 18px; flex: none; }
.human.is-ok .human-state { color: var(--success); }
.human.is-bad .human-state { color: var(--danger); }
.contact-submit { position: relative; min-width: 190px; }
.contact-submit .spinner { display: none; width: 17px; height: 17px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; animation: spin .8s linear infinite; }
.contact-submit.is-busy .spinner { display: block; }
.contact-submit.is-busy svg { display: none; }
.contact-submit[disabled] { cursor: progress; opacity: .85; }
[dir="rtl"] .contact-submit svg { transform: scaleX(-1); }
@keyframes spin { to { transform: rotate(360deg); } }
.contact-status { font-size: 14.5px; color: var(--ink-2); margin-top: -10px; }
.contact-status:empty { display: none; }
.contact-status.is-bad { color: var(--danger); font-weight: 550; }
.contact-status a { color: var(--link); }
.contact-privacy { font-size: 13px; color: var(--ink-3); margin-top: -8px; }
.contact-privacy a { color: var(--ink-2); }
.contact-card.is-off .contact-send, .contact-card.is-off .contact-privacy { display: none; }

/* Sent */
.contact-done { padding: clamp(28px, 5vw, 52px); display: grid; justify-items: center; text-align: center; gap: 14px; }
.contact-done[hidden], .contact-card[hidden] { display: none; }
.contact-done:focus { outline: none; }
.contact-done .lede { max-width: 34em; }
.done-check { width: 72px; height: 72px; }
.done-check circle { fill: color-mix(in srgb, var(--success) 14%, transparent); stroke: var(--success); stroke-width: 2.5; }
.done-check path { fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.contact-done.is-in .done-check { animation: pop-in .6s var(--ease-pop) both; }
.contact-done.is-in .done-check path { animation: draw .55s .25s var(--ease-out) both; }
.contact-done.is-in > :not(.done-check) { animation: tip-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 1) * 70ms + 200ms); }
@keyframes pop-in { from { transform: scale(.6); opacity: 0; } }
@keyframes draw { from { stroke-dashoffset: 40; } }
.done-copy {
  margin: 6px 0 0; width: min(520px, 100%); text-align: start; white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 180px; overflow: auto; padding: 14px 16px; border-radius: 14px; font-size: 14.5px; color: var(--ink-2);
  background: var(--sunken); box-shadow: inset 0 0 0 1px var(--hairline);
}
.done-copy:empty { display: none; }
.done-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }

/* Other ways to get help */
.contact-side { display: grid; gap: 12px; }
.side-card { display: grid; grid-template-columns: 40px minmax(0, 1fr) 16px; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 20px; text-decoration: none; color: var(--ink-2); transition: transform .3s var(--ease-pop), box-shadow .3s; }
a.side-card:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--card-highlight), 0 1px 2px var(--shadow-contact), 0 16px 32px -10px var(--shadow-lifted); }
.side-card b { display: block; color: var(--ink); font: 650 15.5px/1.3 var(--display); letter-spacing: -.01em; }
.side-card small { display: block; font-size: 13.5px; line-height: 1.45; margin-top: 3px; }
.side-card small a { color: var(--link); }
.side-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.side-icon svg { width: 20px; height: 20px; }
.side-go { width: 16px; height: 16px; color: var(--ink-3); transition: transform .3s var(--ease-pop), color .2s; }
a.side-card:hover .side-go { color: var(--accent); transform: translateX(3px); }
[dir="rtl"] .side-go { transform: scaleX(-1); }
[dir="rtl"] a.side-card:hover .side-go { transform: scaleX(-1) translateX(3px); }
.side-mail { grid-template-columns: 40px minmax(0, 1fr); }
.contact-nojs { padding: 22px 24px; margin-top: 16px; color: var(--ink-2); }

@media (max-width: 900px) {
  .contact { grid-template-columns: minmax(0, 1fr); }
  .contact-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .topic-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-row { grid-template-columns: minmax(0, 1fr); }
  .contact-side { grid-template-columns: minmax(0, 1fr); }
  .contact-submit { width: 100%; }
  .contact-label-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .topic-tip.is-swap, .field.is-shown, .field.is-bad .field-error, .contact-done.is-in *, .contact-done.is-in .done-check { animation: none !important; }
}

.langs-nojs { margin-top: 12px; font-size: 13px; }

@media (max-width: 760px) {
  .places { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .step { grid-template-columns: minmax(0, 1fr); padding: 20px; }
  .step > * { grid-column: 1; }
  .step::before { grid-row: auto; margin-bottom: 10px; }
  .step h3 { padding-top: 0; }
  .keytable td { padding-inline: 16px; }
  .keytable td:first-child { width: auto; }
}