/* About and Onboarding: compact type, practical copy and only pixel artwork. */
.tiix-pixel-page .ambient-scene {
    background: #071127 url("pixel-v12-starfield.svg") center top / 320px 320px repeat;
}
.tiix-pixel-page .ambient-scene > *,
.tiix-pixel-page #story-dot,
.tiix-pixel-page #dot-speech { display: none !important; }
.v12-page { padding: 132px max(5vw, 24px) 70px; min-height: calc(100svh - 90px); }
.v12-page .section-inner { max-width: 1120px; }
.v12-page h1, .v12-page h2, .v12-page h3 {
    font-family: var(--tiix-heading-font, Montserrat, sans-serif);
    font-weight: 800; line-height: 1.2; color: #f6faff;
    -webkit-text-stroke: 0; text-shadow: none; transform: none;
    overflow-wrap: break-word;
}
.v12-page h1 { font-size: clamp(34px, 4.2vw, 58px); letter-spacing: -.045em; margin: 0 0 20px; max-width: 760px; }
.v12-page h2 { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.035em; margin: 0 0 19px; }
.v12-page h3 { font-size: 20px; letter-spacing: -.025em; margin: 0 0 12px; }
.v12-page p { font-size: 15px; line-height: 1.75; color: #c5d0e5; margin: 0 0 16px; }
.v12-page .v12-pixel-label {
    display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
    font-family: var(--pixel-font, "Press Start 2P", monospace);
    font-size: 9px; line-height: 1.9; color: #2fd8ec; letter-spacing: 0;
}
.v12-pixel-mark { flex: 0 0 12px; width: 12px; height: 12px; background: #2fd8ec; box-shadow: 4px 4px 0 #123b56; }
.v12-page-intro { max-width: 890px; padding-bottom: 43px; }
.v12-page .v12-lead { max-width: 760px; font-size: 18px; line-height: 1.65; color: #d9e4f5; margin-bottom: 24px; }
.v12-two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.v12-about-story, .v12-brief-guide { padding: 37px 0 39px; border-top: 1px solid #cad9f12e; border-bottom: 1px solid #cad9f12e; }
.v12-page .v12-mission h2 { color: #2fd8ec; }
.v12-page .v12-mission-copy { font-size: 18px; line-height: 1.75; color: #e2eaf7; }
.v12-page .v12-experience-intro { color: #fff; font-weight: 650; }
.v12-experience > :last-child { margin-bottom: 0; }
.v12-principles-section, .v12-process-section { padding-top: 43px; }
.v12-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px; }
.v12-tone-0 { --pixel-tone: #f5d273; }
.v12-tone-1 { --pixel-tone: #ff8fb9; }
.v12-tone-2 { --pixel-tone: #2fd8ec; }
.v12-pixel-card { border: 1px solid #b5c9ed34; padding: 24px; background: #0d1b35; box-shadow: 5px 5px 0 #020a18; position: relative; }
.v12-pixel-card::after { content: ""; position: absolute; right: -1px; top: -1px; width: 8px; height: 8px; background: var(--pixel-tone); }
.v12-pixel-icon { display: block; image-rendering: pixelated; margin: 0 0 20px; animation: v12-pixel-nudge 5s steps(1, end) infinite; }
.v12-tone-1 .v12-pixel-icon { animation-delay: -1.5s; }
.v12-tone-2 .v12-pixel-icon { animation-delay: -3s; }
.v12-pixel-card p { font-size: 14px; line-height: 1.7; margin-bottom: 0; }
.v12-next-step { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; margin-top: 52px; border: 1px solid #2fd8ec5c; background: #10213d; padding: 30px 32px; box-shadow: 5px 5px 0 #020a18; }
.v12-next-step .v12-pixel-label { margin-bottom: 16px; }
.v12-next-step h2 { margin-bottom: 12px; }
.v12-next-step p:last-child { margin-bottom: 0; max-width: 660px; }
.v12-pixel-button { display: inline-flex; align-items: center; justify-content: center; gap: 17px; min-height: 52px; max-width: 100%; padding: 13px 20px; background: #2fd8ec; border: 2px solid #2fd8ec; box-shadow: 5px 5px 0 #071127; color: #071127; font-weight: 750; font-size: 14px; line-height: 1.4; text-decoration: none; transition: transform .16s steps(2, end), box-shadow .16s steps(2, end); }
.v12-pixel-button img { flex: 0 0 24px; image-rendering: pixelated; filter: brightness(.15); }
.v12-pixel-button:hover { transform: translate(2px, 2px); box-shadow: 3px 3px 0 #071127; }
.v12-pixel-button:focus-visible { outline: 3px solid #f5d273; outline-offset: 5px; }
.v12-optional-note { margin-top: 27px; border-left: 4px solid #ff8fb9; padding: 4px 0 4px 18px; }
.v12-optional-note .v12-pixel-label { color: #ff8fb9; margin-bottom: 12px; }
.v12-optional-note p:last-child { margin-bottom: 0; }
.v12-brief-fields { margin: 0; padding: 0; }
.v12-brief-fields > div { padding: 15px 0 15px 45px; position: relative; border-bottom: 1px solid #cad9f12e; }
.v12-brief-fields > div:first-child { padding-top: 0; }
.v12-brief-fields > div:last-child { border: 0; padding-bottom: 0; }
.v12-brief-fields dt { font-size: 16px; font-weight: 750; line-height: 1.5; color: #f6faff; margin-bottom: 7px; }
.v12-brief-fields dd { font-size: 14px; line-height: 1.7; color: #c5d0e5; margin: 0; }
.v12-pixel-number { position: absolute; left: 0; top: 15px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid #2fd8ec6b; background: #102b43; color: #2fd8ec; font-family: var(--pixel-font, "Press Start 2P", monospace); font-size: 9px; }
.v12-brief-fields > div:first-child .v12-pixel-number { top: 0; }
.v12-process-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.v12-process-step { border-top: 3px solid var(--pixel-tone); padding-top: 23px; }
.v12-process-step .v12-pixel-label { color: var(--pixel-tone); font-size: 8px; margin-bottom: 14px; }
.v12-process-step .v12-pixel-icon { margin-bottom: 16px; }
.v12-process-step p:last-child { font-size: 14px; margin-bottom: 0; }
.v12-response-times { display: flex; flex-wrap: wrap; gap: 16px 28px; margin-top: 29px; padding-top: 22px; border-top: 1px solid #cad9f12e; }
.v12-response-times p { position: relative; padding-left: 16px; margin: 0; font-size: 13px; font-weight: 650; color: #2fd8ec; }
.v12-response-times p::before { content: ""; width: 6px; height: 6px; background: currentColor; position: absolute; left: 0; top: .62em; }
.v12-response-times p:nth-child(2) { color: #f5d273; }
@keyframes v12-pixel-nudge { 0%, 14%, 100% { transform: translate(0, 0); } 8% { transform: translate(0, -4px); } 11% { transform: translate(4px, -4px); } }
@media (max-width: 900px) { .v12-two-columns { gap: 36px; } .v12-principles { gap: 16px; } .v12-pixel-card { padding: 20px; } .v12-process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 29px 24px; } }
@media (max-width: 640px) {
    .v12-page { padding: 113px 24px 54px; }
    .v12-page h1 { font-size: 34px; line-height: 1.22; }
    .v12-page h2 { font-size: 25px; line-height: 1.25; }
    .v12-page h3 { font-size: 19px; }
    .v12-page p { font-size: 14px; }
    .v12-page .v12-pixel-label { font-size: 8px; line-height: 1.9; }
    .v12-page .v12-lead { font-size: 16px; }
    .v12-page .v12-mission-copy { font-size: 17px; }
    .v12-page-intro { padding-bottom: 27px; }
    .v12-two-columns { grid-template-columns: 1fr; gap: 27px; }
    .v12-about-story, .v12-brief-guide { padding: 27px 0 29px; }
    .v12-principles-section, .v12-process-section { padding-top: 31px; }
    .v12-principles { grid-template-columns: 1fr; gap: 17px; margin-top: 21px; }
    .v12-pixel-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 18px; padding: 21px; }
    .v12-pixel-card .v12-pixel-icon { grid-row: 1 / 3; margin: 2px 0 0; }
    .v12-pixel-card p { font-size: 14px; }
    .v12-next-step { grid-template-columns: 1fr; gap: 24px; margin-top: 35px; padding: 24px; }
    .v12-next-step .v12-pixel-button { justify-self: start; }
    .v12-brief-fields > div { padding-left: 43px; }
    .v12-brief-fields dt { font-size: 15px; }
    .v12-process-grid { gap: 27px 19px; }
    .v12-process-step h3 { font-size: 18px; }
    .v12-process-step p:last-child { font-size: 13px; }
    .v12-response-times { display: grid; gap: 13px; }
    .v12-response-times p { font-size: 13px; }
}
@media (max-width: 360px) { .v12-page { padding-left: 20px; padding-right: 20px; } .v12-page h1 { font-size: 31px; } .v12-process-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .v12-pixel-icon { animation: none; } .v12-pixel-button { transition: none; } }
