.beginner-page { overflow: hidden; }
.beginner-page .section { position: relative; }
.beginner-page .media-frame { width: 100%; max-width: 100%; }
.beginner-page .media-frame figcaption { padding: var(--space-3) var(--space-4); color: var(--color-charcoal-slate); font-size: var(--text-small); line-height: 1.45; }
.beginner-page .media-frame figcaption strong { font-size: inherit; }
.beginner-hero { background: linear-gradient(135deg, #fff 0%, #fff 62%, rgba(79,70,229,.05) 100%); }
.beginner-hero::before, .beginner-tips::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .07; background-image: linear-gradient(rgba(79,70,229,.55) 1px, transparent 1px), linear-gradient(90deg, rgba(6,214,160,.55) 1px, transparent 1px); background-size: 34px 34px; }
.beginner-hero__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); align-items: center; min-width: 0; }
.beginner-hero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; position: relative; z-index: 1; }
.beginner-hero__copy > * { min-width: 0; margin: 0; }
.beginner-hero__copy .lead { max-width: 34ch; }
.beginner-hero__actions { width: 100%; flex-direction: column; align-items: stretch; gap: var(--space-3); }
.beginner-hero__actions > * { width: 100%; min-width: 0; }
.beginner-briefing { width: 100%; border-left: 3px solid var(--color-cyber-mint); padding: var(--space-5); }
.beginner-briefing > * { margin: 0; }
.beginner-briefing p + p { margin-top: var(--space-2); max-width: 48ch; }
.beginner-hero__media { aspect-ratio: 4 / 3; position: relative; z-index: 1; }
.beginner-hero__media img { object-position: 62% center; }
.beginner-logic__intro { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); align-items: start; min-width: 0; }
.beginner-logic__intro > * { min-width: 0; }
.beginner-logic__intro p { max-width: 64ch; }
.beginner-principles { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); margin-top: var(--space-7); min-width: 0; }
.beginner-principle { min-width: 0; border-top: 2px solid var(--color-electric-indigo); padding: var(--space-5) var(--space-4) 0; transition: transform var(--transition-fast), border-color var(--transition-fast); }
.beginner-principle > *:last-child { margin-bottom: 0; }
.beginner-principle:hover { border-color: var(--color-aqua-mint); transform: translateY(-2px); }
.beginner-mission__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); min-width: 0; }
.beginner-mission__copy, .beginner-mission__media, .beginner-mission__routine { min-width: 0; width: 100%; }
.beginner-mission__copy p:not(.eyebrow) { max-width: 62ch; }
.beginner-mission__media { aspect-ratio: 4 / 3; }
.beginner-mission__media img { object-position: center; }
.beginner-mission__routine { display: flex; flex-direction: column; gap: var(--space-5); }
.beginner-mission__routine > * { margin: 0; }
.beginner-steps { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-3); padding: 0; list-style: none; }
.beginner-steps li { min-width: 0; border-left: 3px solid var(--color-cyber-mint); padding: var(--space-3) var(--space-4); color: var(--color-charcoal-slate); transition: border-color var(--transition-fast); }
.beginner-steps li:hover, .beginner-steps li:focus-within { border-color: var(--color-electric-indigo); }
.beginner-download-band { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); border-left: 3px solid var(--color-electric-indigo); background: rgba(79,70,229,.05); padding: var(--space-5); }
.beginner-download-band > * { margin: 0; min-width: 0; }
.beginner-download-band p:not(.label) { max-width: 42ch; }
.beginner-download-band .button { width: 100%; }
.beginner-team__intro { max-width: 68ch; }
.beginner-role-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); margin-top: var(--space-7); min-width: 0; }
.beginner-role-card { min-width: 0; border: var(--border-subtle); border-radius: var(--radius-md); background: var(--color-porcelain); overflow: hidden; }
.beginner-role-card__toggle { width: 100%; min-height: 2.75rem; justify-content: space-between; gap: var(--space-3); border: 0; border-bottom: 1px solid var(--color-mist); border-radius: 0; background: transparent; color: var(--color-deep-eclipse); padding: var(--space-3) var(--space-4); text-align: left; box-shadow: none; }
.beginner-role-card__toggle:hover { transform: none; background: rgba(79,70,229,.06); color: var(--color-deep-eclipse); box-shadow: none; }
.beginner-role-card__state { color: var(--color-electric-indigo); font-size: var(--text-label); letter-spacing: .05em; white-space: nowrap; }
.beginner-role-card__body { padding: var(--space-4); }
.beginner-role-card__body > * { margin: 0; }
.beginner-role-card__body p + p { margin-top: var(--space-3); }
.beginner-rule { width: 100%; max-width: 48ch; margin-top: var(--space-6); border-left: 3px solid var(--color-cyber-mint); padding: var(--space-5); }
.beginner-rule > * { margin: 0; }
.beginner-rule p + p { margin-top: var(--space-2); }
.beginner-learn__grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-6); min-width: 0; }
.beginner-learn__media, .beginner-learn__copy { width: 100%; min-width: 0; }
.beginner-learn__media { aspect-ratio: 4 / 3; }
.beginner-learn__copy p:not(.eyebrow) { max-width: 48ch; }
.beginner-decision-path { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.beginner-decision-path > * { margin: 0; min-width: 0; }
.beginner-decision-path > div { display: flex; flex-direction: column; gap: var(--space-1); border-left: 2px solid var(--color-mist); padding-left: var(--space-4); color: var(--color-charcoal-slate); transition: border-color var(--transition-fast); }
.beginner-decision-path > div:hover, .beginner-decision-path > div:focus { border-color: var(--color-aqua-mint); outline: none; }
.beginner-progress__intro { max-width: 66ch; }
.beginner-progress__layout { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); margin-top: var(--space-7); min-width: 0; align-items: start; }
.beginner-checklist { min-width: 0; padding: var(--space-5); }
.beginner-checklist > * { margin: 0; }
.beginner-checklist__items { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.beginner-checklist__items label { display: grid; grid-template-columns: 1.25rem minmax(0,1fr); gap: var(--space-3); align-items: start; min-height: 2.75rem; margin: 0; color: var(--color-charcoal-slate); font-weight: 400; }
.beginner-checklist__items input { width: 1.125rem; min-width: 1.125rem; min-height: 1.125rem; margin-top: .18rem; }
.beginner-checklist__note { margin-top: var(--space-4); color: var(--color-charcoal-slate); font-size: var(--text-small); }
.beginner-warning { min-width: 0; border-left: 3px solid var(--color-sunset-coral); padding: var(--space-4); }
.beginner-warning > *:last-child { margin-bottom: 0; }
.beginner-routes__intro { max-width: 60ch; }
.beginner-route-list { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-7); }
.beginner-route { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: var(--space-3); align-items: start; min-width: 0; min-height: 2.75rem; border-top: 1px solid var(--color-mist); padding: var(--space-4) 0; text-decoration: none; transition: transform var(--transition-fast); }
.beginner-route > * { min-width: 0; }
.beginner-route span { color: var(--color-electric-indigo); font-weight: 700; }
.beginner-route h3 { margin-bottom: var(--space-2); }
.beginner-route p { margin: 0; max-width: 52ch; }
.beginner-route b { color: var(--color-electric-indigo); }
.beginner-route:hover { transform: translateY(-2px); }
.beginner-tips { overflow: hidden; }
.beginner-tips__layout { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; }
.beginner-tips__content { min-width: 0; max-width: 68ch; position: relative; z-index: 1; }
.beginner-tips__list { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); margin-top: var(--space-6); padding: 0; list-style-position: inside; }
.beginner-tips__list li { min-width: 0; border-top: 1px solid rgba(15,23,42,.1); padding-top: var(--space-3); color: var(--color-charcoal-slate); }
.beginner-tips__list strong { display: block; margin-bottom: var(--space-1); }
.beginner-tips__marker { display: none; }
.beginner-faq__intro { max-width: 58ch; }
.beginner-accordion { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin-top: var(--space-7); min-width: 0; }
.beginner-faq-item { min-width: 0; border: var(--border-subtle); border-radius: var(--radius-md); background: var(--color-alabaster); overflow: hidden; }
.beginner-faq-item.is-open { border-left: 3px solid var(--color-electric-indigo); }
.beginner-faq-item h3 { margin: 0; }
.beginner-faq-item button { width: 100%; min-height: 3.25rem; justify-content: space-between; gap: var(--space-4); border: 0; border-radius: 0; background: transparent; padding: var(--space-4); color: var(--color-deep-eclipse); text-align: left; box-shadow: none; }
.beginner-faq-item button:hover { transform: none; background: rgba(79,70,229,.06); color: var(--color-deep-eclipse); box-shadow: none; }
.beginner-faq-item button span { color: var(--color-electric-indigo); font-size: 1.25rem; }
.beginner-faq-item [role="region"] { padding: 0 var(--space-4) var(--space-4); }
.beginner-faq-item [role="region"] p { max-width: 62ch; margin: 0; }
.beginner-next__intro { max-width: 60ch; }
.beginner-next__cards { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-4); margin-top: var(--space-7); min-width: 0; }
.beginner-next-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); min-width: 0; border: var(--border-subtle); border-radius: var(--radius-md); background: var(--color-porcelain); padding: var(--space-5); text-decoration: none; transition: transform var(--transition-fast), border-color var(--transition-fast); }
.beginner-next-card > * { margin: 0; min-width: 0; }
.beginner-next-card p:not(.label) { max-width: 46ch; }
.beginner-next-card span { color: var(--color-electric-indigo); font-weight: 700; }
.beginner-next-card--primary { border-top: 2px solid var(--color-electric-indigo); }
.beginner-next-card:hover { transform: translateY(-2px); border-color: var(--color-aqua-mint); }
.beginner-final { background: var(--color-alabaster); }
.beginner-final__grid { display: grid; grid-template-columns: minmax(0,1fr); min-width: 0; }
.beginner-final__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); min-width: 0; max-width: 62ch; position: relative; z-index: 1; }
.beginner-final__copy > * { margin: 0; min-width: 0; }
.beginner-final__copy p:not(.eyebrow) { max-width: 58ch; }
.beginner-final__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; min-width: 0; }
.beginner-final__actions .button { width: 100%; }
.beginner-final__glow { display: none; }
@media (min-width: 40rem) { .beginner-hero__actions { flex-direction: row; align-items: center; } .beginner-hero__actions > * { width: auto; } .beginner-download-band .button, .beginner-final__actions .button { width: auto; } .beginner-checklist { padding: var(--space-6); } }
@media (min-width: 47.5rem) { .beginner-principles { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--space-5); } .beginner-role-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .beginner-tips__list { grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: var(--space-6); } .beginner-next__cards { grid-template-columns: minmax(0,7fr) minmax(0,5fr); } }
@media (min-width: 55rem) { .beginner-progress__layout { grid-template-columns: minmax(0,8fr) minmax(0,3fr); column-gap: calc(var(--space-6) + var(--space-2)); } .beginner-warning { padding-top: var(--space-5); } .beginner-final__grid { grid-template-columns: minmax(0,6fr) minmax(0,6fr); align-items: center; } .beginner-final__glow { display: block; min-width: 0; min-height: 18rem; background: radial-gradient(circle at 55% 50%, rgba(6,214,160,.18), transparent 42%), radial-gradient(circle at 65% 50%, rgba(79,70,229,.18), transparent 58%); } }
@media (min-width: 56.25rem) { .beginner-role-grid { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (min-width: 61.25rem) { .beginner-mission__grid { grid-template-columns: minmax(0,5fr) minmax(0,1fr) minmax(0,6fr); align-items: start; } .beginner-mission__copy { grid-column: 1 / 2; } .beginner-mission__media { grid-column: 3 / 4; grid-row: 1 / span 2; } .beginner-mission__routine { grid-column: 1 / 2; } .beginner-learn__grid { grid-template-columns: minmax(0,7fr) minmax(0,1fr) minmax(0,4fr); align-items: start; } .beginner-learn__media { grid-column: 1 / 2; } .beginner-learn__copy { grid-column: 3 / 4; } }
@media (min-width: 64rem) { .beginner-hero__grid { grid-template-columns: minmax(25rem,5fr) minmax(0,1fr) minmax(0,6fr); min-height: 38.75rem; } .beginner-hero__copy { grid-column: 1 / 2; } .beginner-hero__media { grid-column: 3 / 4; aspect-ratio: 12 / 7; } .beginner-hero__copy .lead { max-width: 54ch; } .beginner-logic__intro { grid-template-columns: minmax(0,5fr) minmax(0,1fr) minmax(0,6fr); } .beginner-logic__intro > :first-child { grid-column: 1 / 2; } .beginner-logic__intro > :last-child { grid-column: 3 / 4; } .beginner-accordion { width: 66.666%; } }
@media (min-width: 75rem) { .beginner-routes__intro { width: 50%; } .beginner-route--wide { width: 58.333%; } .beginner-route--narrow { width: 41.666%; } .beginner-tips__layout { grid-template-columns: minmax(0,8fr) minmax(0,4fr); } .beginner-tips__marker { display: block; min-width: 0; justify-self: end; align-self: start; margin-top: var(--space-7); border-left: 1px solid var(--color-aqua-mint); padding-left: var(--space-4); color: var(--color-electric-indigo); font-size: var(--text-label); font-weight: 700; letter-spacing: .08em; line-height: 1.5; text-transform: uppercase; } }
@media (prefers-reduced-motion: reduce) { .beginner-principle:hover, .beginner-route:hover, .beginner-next-card:hover { transform: none; } }
@media (prefers-reduced-transparency: reduce) { .beginner-briefing, .beginner-rule, .beginner-checklist { background: var(--color-alabaster); -webkit-backdrop-filter: none; backdrop-filter: none; } }