/* 2FA Code Pro 1.2 — shared visual system. Keep the tool above supporting content. */
:root {
  --bg: #f7f9f7;
  --paper: #fff;
  --ink: #12282c;
  --muted: #4c6468;
  --soft: #edf4f0;
  --line: #d9e5de;
  --accent: #096f58;
  --accent-hover: #075540;
  --accent-soft: #e0f2e9;
  --navy: #102d32;
  --wrap: 1180px;
}
html[data-theme=dark] {
  --bg: #101e22;
  --paper: #182b30;
  --ink: #f1f7f4;
  --muted: #bbccc8;
  --soft: #20383b;
  --line: #365154;
  --accent: #85e9c4;
  --accent-hover: #b0f3d9;
  --accent-soft: #25443b;
  --navy: #0d1c20;
}
body { font-size: 16px; line-height: 1.6; }
h1,h2,h3 { letter-spacing: -.04em; }
.site-header { position: relative; z-index: 20; background: var(--paper); }
.header-inner { height: 76px; }
.brand { letter-spacing: -.07em; }
.brand-symbol { width: 42px; height: 42px; border-radius: 13px; background: var(--accent); }
.desktop-nav a { padding: 10px 2px; border-bottom: 2px solid transparent; transition: color .15s,border-color .15s; }
.desktop-nav a:hover,.desktop-nav a:focus-visible { border-bottom-color: var(--accent); }
.icon-button { width: 44px; height: 44px; transition: transform .15s,background .15s,border-color .15s; }
.icon-button:hover { transform: translateY(-1px); background: var(--accent-soft); }
.tool-page { background: radial-gradient(ellipse 52% 280px at 50% 90px, #dff3e8 0, transparent 100%),var(--bg); }
html[data-theme=dark] .tool-page { background: radial-gradient(ellipse 52% 280px at 50% 90px, #173d35 0, transparent 100%),var(--bg); }
.hero { padding-top: 23px; padding-bottom: 8px; }
.hero .eyebrow { width: fit-content; margin: 0 auto 9px; padding: 6px 12px; border: 1px solid #bcded0; border-radius: 99px; background: var(--paper); font-size: 11px; letter-spacing: .12em; }
.hero h1 { font-size: clamp(38px,4.5vw,54px); line-height: 1.04; margin-bottom: 9px; }
.hero-description { max-width: 630px; font-size: 16px; line-height: 1.5; color: var(--muted); margin-bottom: 10px; }
.hero-badges { gap: 10px; font-size: 12px; }
.hero-badges span { background: var(--paper); border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px; }
.tool-shortcuts { gap: 4px; border-color: #cfe4d7; background: #eaf4ed; margin-bottom: 10px; box-shadow: 0 8px 24px #0b3c2f0a; }
html[data-theme=dark] .tool-shortcuts { background: var(--soft); border-color: var(--line); }
.tool-shortcuts a { min-width: 112px; font-size: 13px; }
.tool-shortcuts a:hover { background: var(--paper); color: var(--accent); }
.workspace { max-width: 1000px; }
.workspace-footnote { margin-top: 15px; font-size: 12px; }
.steps-section { padding-block: 68px 76px; }
.section-heading { align-items: end; margin-bottom: 23px; }
.section-heading h2 { font-size: clamp(27px,3vw,38px); }
.section-heading .eyebrow { margin-bottom: 8px; }
.section-intro { margin: 11px 0 0; color: var(--muted); font-size: 15px; }
.text-link { min-height: 44px; font-size: 14px; }
.steps-grid { gap: 16px; padding: 0; }
.steps-grid>div { display: grid; grid-template-columns: 1fr auto; align-content: start; min-height: 188px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: 0 8px 24px #12372b08; }
.steps-grid .step-number { grid-column: 1; color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; margin: 8px 0 20px; }
.steps-grid .step-icon { grid-column: 2; grid-row: 1; width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); border-radius: 12px; }
.steps-grid h3 { grid-column: 1/-1; font-size: 18px; margin-bottom: 8px; }
.steps-grid p { grid-column: 1/-1; max-width: none; font-size: 14px; line-height: 1.55; }
.tools-section { padding-block: 66px 78px; background: #ecf3ee; }
html[data-theme=dark] .tools-section { background: #17292b; }
.tools-section .resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.resource-card { min-height: 224px; padding: 25px 27px 21px; border-radius: 18px; box-shadow: 0 7px 20px #18372b08; transition: transform .18s,box-shadow .18s,border-color .18s; }
.resource-card:hover { transform: translateY(-4px); box-shadow: 0 18px 32px #153f2e16; }
.card-top { margin-bottom: 19px; }
.card-icon { width: 48px; height: 48px; border: 0; border-radius: 14px; background: #e1f1e8; }
.resource-card--key .card-icon,.resource-card--clock .card-icon { background: #e2f1ed; }
.resource-card--qr .card-icon { background: #e9ecfb; color: #454a9f; }
.resource-card--code .card-icon { background: #fff0dc; color: #9b5a10; }
.resource-card--book .card-icon { background: #edf1fa; color: #425c8d; }
html[data-theme=dark] .card-icon { background: #294942; color: #a3ecd0; }
.card-tag { font-size: 10px; letter-spacing: .11em; }
.resource-card h3 { font-size: 21px; margin-bottom: 8px; }
.resource-card p { font-size: 14px; line-height: 1.5; margin-bottom: 22px; max-width: 43ch; }
.card-bottom { font-size: 13px; padding-top: 14px; }
.reading-section { gap: 90px; padding-block: 78px; }
.reading-label h2 { font-size: clamp(28px,3.1vw,39px); }
.reading-label p { font-size: 15px; max-width: 38ch; }
.tool-explainer { font-size: 16px; }
.article-header { padding-block: 54px 40px; }
.article-aside { border-radius: 20px; }
.hub-section .resource-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.related-section .resource-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.site-footer { background: #102a2d; }
@media(max-width:1000px) {
  .steps-grid { gap: 12px; }
  .steps-grid>div { padding: 17px; }
  .reading-section { gap: 44px; }
}
@media(max-width:700px) {
  .wrap { width: calc(100% - 32px); }
  .site-header { position: sticky; top: 0; box-shadow: 0 4px 20px #162b2810; }
  .header-inner { height: 64px; }
  .brand-symbol { width: 36px; height: 36px; }
  .mobile-nav { background: var(--paper); border-bottom: 1px solid var(--line); padding-bottom: 12px; }
  .mobile-nav a { min-height: 48px; display: flex; align-items: center; font-weight: 650; }
  .hero { padding-top: 25px; padding-bottom: 12px; }
  .hero .eyebrow { font-size: 9px; margin-bottom: 12px; padding: 5px 10px; }
  .hero h1 { font-size: clamp(30px,8vw,40px); margin-bottom: 10px; }
  .hero-description { font-size: 14px; max-width: 40ch; }
  .hero-badges { display: none; }
  .tool-shortcuts { width: calc(100% - 32px); max-width: none; display: grid; grid-template-columns: repeat(3,1fr); margin-bottom: 13px; }
  .tool-shortcuts a { min-width: 0; padding-inline: 4px; font-size: 12px; }
  .steps-section { padding-block: 52px; }
  .section-heading { align-items: start; gap: 9px; }
  .section-heading h2 { font-size: 27px; }
  .section-heading .text-link { align-self: end; font-size: 12px; }
  .steps-grid { grid-template-columns: 1fr; gap: 11px; }
  .steps-grid>div { grid-template-columns: 34px 1fr auto; min-height: 0; padding: 17px; align-items: center; }
  .steps-grid .step-number { grid-column: 1; grid-row: 1; margin: 0; }
  .steps-grid .step-icon { grid-column: 3; grid-row: 1/3; width: 38px; height: 38px; }
  .steps-grid h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 17px; }
  .steps-grid p { grid-column: 2; grid-row: 2; margin: 5px 0 0; font-size: 13px; }
  .tools-section { padding-block: 52px; }
  .tools-section .resource-grid,.hub-section .resource-grid,.related-section .resource-grid { grid-template-columns: 1fr; }
  .resource-card { min-height: 0; padding: 21px; }
  .resource-card h3 { font-size: 19px; }
  .resource-card p { font-size: 14px; margin-bottom: 16px; }
  .reading-section { padding-block: 54px; }
  .article-header { padding-block: 36px 28px; }
  .article-aside { padding: 23px; }
}
@media(max-width:370px) {
  .brand { font-size: 19px; }
  .tool-shortcuts a { font-size: 11px; }
  .steps-grid>div { grid-template-columns: 27px 1fr auto; padding: 14px; }
  .steps-grid .step-icon { width: 33px; height: 33px; }
}
@media(prefers-reduced-motion:reduce) {
  .icon-button,.resource-card { transition: none; }
  .resource-card:hover,.icon-button:hover { transform: none; }
}