/* F2T identity supplied by the client, October 2026. */
:root{--bg:#111112;--panel:#1b1b1d;--line:#363638;--gold:#dfb65d;--muted:#b8b8bc;--text:#f3f2ef;--silver:#d4d4d7}
::selection{background:#dfb65d;color:#151515}
html{scrollbar-color:#69635a #151515}
input,textarea{caret-color:var(--gold)}
.brand-lockup{display:inline-flex;align-items:center;gap:12px;flex-shrink:0;text-align:left}
.brand-lockup img{display:block;width:84px;height:84px;object-fit:contain;border-radius:4px}
.brand-wordmark{color:var(--silver);font:500 9px/1.6 'Manrope',sans-serif;letter-spacing:2px}
.brand-wordmark strong{display:block;color:var(--text);font-size:25px;letter-spacing:3px;line-height:1.2}
.landing,.auth-page{background:var(--bg)}
.landing-header{background:linear-gradient(110deg,rgba(17,17,18,.95),rgba(32,32,33,.88));border-bottom-color:#d4d4d726;backdrop-filter:blur(18px)}
.landing-header .brand-lockup img{width:80px;height:80px}
.landing-header nav button{color:var(--silver)}
.landing-header nav button:hover,.landing em,.auth-story em,.landing-cards a,.landing-section .hero-kicker,.vision-strip b{color:var(--gold)}
.landing-button:not(.outline),.auth-submit,.btn.gold{background:linear-gradient(115deg,#ebcb83,#d6aa50);border:1px solid #e8c579;color:#191612;box-shadow:0 3px 9px #0003;border-radius:10px}
.landing-button:not(.outline):hover,.auth-submit:hover,.btn.gold:hover{filter:brightness(1.06)}
.landing-button.outline{border-color:#d4d4d760;color:var(--silver)}
.f2t-hero{background-image:linear-gradient(90deg,#101011df,transparent 80%),linear-gradient(0deg,#111112,transparent 50%),url('hero-f2t.jpg')}
.benefit-strip svg{color:var(--silver)}
.play-circle{color:var(--gold);border-color:var(--gold)}
.vision-strip{background:#171718}
.vision-strip span,.section-split p,.landing-cards p,.community-banner p:not(.hero-kicker){color:var(--muted)}
.landing-cards article{background:linear-gradient(135deg,#232325,#19191b);border-color:#d4d4d724;border-radius:12px}
.landing-cards article>span{color:var(--gold)}
.community-banner{background:radial-gradient(ellipse at bottom,#383023,transparent 70%)}
.landing-footer{background:#141415}
.landing-footer .brand-lockup img{width:94px;height:94px}
.auth-story{background-image:linear-gradient(0deg,#111112f5,#11111266),url('hero-f2t.jpg');gap:36px}
.auth-story .brand-lockup img{width:140px;height:140px}
.auth-story .brand-wordmark{font-size:10px}
.auth-story .brand-wordmark strong{font-size:36px}
.auth-story p:not(.hero-kicker){color:var(--silver)}
.sidebar{background:#151516;padding-top:18px}
.sidebar .brand{margin:0 0 28px}
.sidebar .brand-lockup{gap:9px}
.sidebar .brand-lockup img{width:86px;height:86px}
.sidebar .brand-wordmark strong{font:700 25px/1.2 'Manrope',sans-serif;letter-spacing:3px}
.sidebar .brand-wordmark{font-size:8px;letter-spacing:1.6px}
.workspace>header{background:#151516}
nav a{color:var(--silver)}
nav a:hover{background:#252527}
nav a.active{background:#312b20;color:var(--gold)}
.hero{background:linear-gradient(120deg,#302a20,#1a1a1c)}
.course-cover,.course-cover.blue,.course-cover.brown,.mentor-mark{background:linear-gradient(125deg,#414143,#222224)}
.course-cover.brown{background:linear-gradient(125deg,#59452b,#24211d)}
.course-cover small{color:#e2d5ba}
input,textarea,select{background:#141415;border-color:#4b4b4e}
.btn:not(.gold){background:#28282b}
.progress{background:#39393c}
.lesson-surface{background:#101011}
.notice{background:#29251e}
@media(max-width:1200px){.landing-header nav{background:#1b1b1df5}.landing-header .brand-lockup img{width:64px;height:64px}}
@media(max-width:760px){.sidebar{padding:12px 18px}.sidebar .brand{margin-bottom:12px}.sidebar .brand-lockup img{width:64px;height:64px}.auth-story{background:#151516}.auth-story .brand-lockup img{width:80px;height:80px}.auth-story .brand-wordmark strong{font-size:25px}.landing-footer .brand-lockup img{width:80px;height:80px}}
@media(max-width:480px){.landing-header .brand-lockup{gap:7px}.landing-header .brand-lockup img{width:54px;height:54px}.landing-header .brand-wordmark{font-size:7px;letter-spacing:1px}.landing-header .brand-wordmark strong{font-size:21px}.landing-header{gap:8px}.landing-actions{gap:8px}}

/* Transparent vector lockup. The original photo supplies only its empty top texture. */
.brand-lockup{gap:0;line-height:0}
.brand-lockup img{width:116px;height:auto;border-radius:0}
.landing-header .brand-lockup img{width:100px;height:85px}
.landing-header{background-color:#151515;background-image:linear-gradient(90deg,rgba(10,10,10,.28),rgba(10,10,10,.6)),url('logo-f2t-2026.jpg');background-size:auto,1600px 1600px;background-position:center,center top;background-repeat:no-repeat,repeat-x;border-bottom:1px solid #dfb65d30;box-shadow:0 8px 24px #0003}
.landing-footer .brand-lockup img{width:116px;height:auto}
.auth-story .brand-lockup img{width:220px;height:auto}
.sidebar .brand-lockup img{width:136px;height:auto}
.sidebar .brand{justify-content:center}
@media(max-width:1200px){.landing-header .brand-lockup img{width:85px;height:72px}}
@media(max-width:760px){.sidebar .brand-lockup img{width:88px;height:auto}.auth-story .brand-lockup img{width:120px;height:auto}.landing-footer .brand-lockup img{width:100px;height:auto}}
@media(max-width:480px){.landing-header .brand-lockup img{width:73px;height:62px}}

/* Translucent surface; texture has its own opacity so content remains visible beneath. */
.landing-header{isolation:isolate;background:linear-gradient(110deg,rgba(15,15,16,.73),rgba(26,25,23,.55));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.landing-header::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:url('logo-f2t-2026.jpg');background-position:center top;background-size:max(1600px, 100vw) auto;background-repeat:no-repeat;opacity:.13}
/* Approved transparent artwork: retain original pixels, metals and lettering.
   The viewport only removes the empty outer margins of the supplied square. */
.brand-lockup{position:relative;display:block;width:180px;height:172px;overflow:hidden}
.brand-lockup img,.landing-header .brand-lockup img,.landing-footer .brand-lockup img,.auth-story .brand-lockup img,.sidebar .brand-lockup img{position:absolute;display:block;width:128.205%;height:auto;max-width:none;left:-15.385%;top:-22.09%;border-radius:0;object-fit:contain;filter:none}
.landing{--landing-header-height:192px}
.landing-header{height:var(--landing-header-height);padding-top:10px;padding-bottom:10px}
.landing-header .brand-lockup{width:180px;height:172px}
.landing-footer .brand-lockup{width:160px;height:153px}
.auth-story .brand-lockup{width:240px;height:229px}
.sidebar .brand-lockup{width:156px;height:149px}
@media(max-width:1200px){
 .landing{--landing-header-height:172px}
 .landing-header .brand-lockup{width:160px;height:153px}
 .landing-header nav{max-height:calc(100dvh - var(--landing-header-height))}
}
@media(max-width:760px){
 .sidebar .brand-lockup{width:130px;height:124px}
 .auth-story .brand-lockup{width:160px;height:153px}
}
@media(max-width:480px){
 .landing{--landing-header-height:158px}
 .landing-header .brand-lockup{width:150px;height:143px}
 .landing-header{padding-top:7px;padding-bottom:7px;gap:8px}
 .landing-header nav{max-height:calc(100dvh - var(--landing-header-height))}
}

/* Horizontal header: two viewports of the approved PNG, without recoloring. */
.landing{--landing-header-height:110px}
.landing-header .brand-horizontal{display:flex;align-items:center;gap:14px;line-height:0}
.brand-horizontal svg{display:block;flex-shrink:0;overflow:hidden}
.brand-horizontal .brand-symbol{width:110px;height:81px}
.brand-horizontal .brand-name{width:180px;height:16px}
@media(max-width:1350px) and (min-width:1201px){
 .landing-header{gap:16px;padding-left:3%;padding-right:3%}
 .landing-header .brand-horizontal{gap:10px}
 .brand-horizontal .brand-symbol{width:90px;height:67px}
 .brand-horizontal .brand-name{width:158px;height:14px}
 .landing-header nav{gap:12px}
 .landing-header nav button{font-size:14px}
}
@media(max-width:760px){
 .landing{--landing-header-height:88px}
 .landing-header .brand-horizontal{gap:10px}
 .brand-horizontal .brand-symbol{width:72px;height:53px}
 .brand-horizontal .brand-name{width:138px;height:12px}
}
@media(max-width:380px){
 .landing-header{padding-left:12px;padding-right:12px;gap:6px}
 .landing-header .brand-horizontal{gap:8px}
 .brand-horizontal .brand-symbol{width:54px;height:40px}
 .brand-horizontal .brand-name{width:116px;height:11px}
 .landing-actions .outline{min-width:60px;padding-left:10px;padding-right:10px}
}

/* Keep the motto legible beneath the original gold wordmark. */
.brand-wordmark{display:flex;flex-direction:column;align-items:center;gap:8px}
.brand-motto{display:block;color:#d5ae69;font-family:Arial,sans-serif;font-size:9px;font-weight:400;letter-spacing:.35px;line-height:1.4;white-space:nowrap}
@media(max-width:1350px) and (min-width:1201px){.brand-motto{font-size:8px;letter-spacing:.2px}}
@media(max-width:760px){.brand-wordmark{gap:6px}.brand-motto{font-size:7.2px;letter-spacing:.05px}}
@media(max-width:380px){.brand-motto{font-size:6px;letter-spacing:0}}

/* Slightly larger navigation, including the mobile menu. */
.landing-header nav button{font-size:14px}
@media(max-width:1200px){.landing-header nav button{font-size:15px}}