/* (c) 2026 Mohammad Ali Akeel */
/* ---------------------------------------------------------------
   TrustGenAI — design tokens
   Ink is near-black blue; the accent is used sparingly, for one
   action and for structure. Everything else is neutral, so the
   pages read as a record rather than a brochure.
   --------------------------------------------------------------- */
:root{
 --ink:#0b1220;--ink-2:#1d2735;--muted:#5b6575;--faint:#8b95a5;
 --bg:#ffffff;--bg-2:#f6f8fb;--bg-3:#eef2f7;--panel:#ffffff;--line:#e2e7ee;--line-2:#d3dae4;
 --accent:#2b4fe0;--accent-2:#1b39b8;--accent-soft:#eaefff;
 --warn:#7a5200;--warn-soft:#fff6e3;--good:#15603f;--good-soft:#e8f5ee;
 --rule:linear-gradient(90deg,var(--accent) 0%, rgba(43,79,224,0) 60%);
 --sans:"Inter","SF Pro Text",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
 --mono:"SFMono-Regular",ui-monospace,"Cascadia Mono","Consolas",monospace;
 --shadow-1:0 1px 1px rgba(11,18,32,.04),0 2px 6px rgba(11,18,32,.04);
 --shadow-2:0 10px 30px rgba(11,18,32,.08),0 2px 8px rgba(11,18,32,.04);
 --r:14px}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;
 -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;border-radius:8px;z-index:50;box-shadow:var(--shadow-2)}
.wrap{max-width:1120px;margin:0 auto;padding:0 28px}

/* header ---------------------------------------------------------- */
header.site{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.82);
 backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
body.scrolled header.site{border-bottom-color:var(--line);box-shadow:0 1px 0 rgba(11,18,32,.02)}
/* The header is chrome, not prose, so it is not held to the reading width the text
   columns use. At 1120px the brand, eight navigation items, "Sign in" and the button
   needed about 1082px of a 1064px box - eighteen pixels short - and with nothing
   stopping them, the links broke mid-phrase: "How we" over "help", "Create an" over
   "account". A menu that wraps inside its own words reads as a broken page rather
   than a full one. */
header .wrap{display:flex;align-items:center;gap:20px;padding:16px 28px;max-width:1240px}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:650;letter-spacing:-.35px;font-size:17px;
 color:var(--ink);text-decoration:none;white-space:nowrap}
.brand::before{content:"";width:18px;height:18px;border-radius:5px;
 background:linear-gradient(135deg,var(--accent) 0%,#5d7cff 100%);box-shadow:inset 0 0 0 3px rgba(255,255,255,.6)}
/* A flex row with a gap rather than a margin on every link: the margin was also on
   the LAST one, spending twenty pixels on nothing at exactly the width where twenty
   pixels were the difference. */
nav.site{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
nav.site a{color:var(--ink-2);text-decoration:none;font-size:14.5px;padding:6px 0;
 white-space:nowrap;border-bottom:2px solid transparent}
nav.site a:hover{color:var(--accent)}
nav.site a.on{color:var(--ink);border-bottom-color:var(--accent)}
.sp{flex:1}
.signin{color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:550;padding:10px 4px;white-space:nowrap}
.signin:hover{color:var(--accent)}
.menu{display:none;border:1px solid var(--line);background:#fff;border-radius:9px;font-size:17px;padding:5px 11px;cursor:pointer}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:0;border-radius:10px;
 padding:12px 18px;font:inherit;font-size:15px;font-weight:550;text-decoration:none;cursor:pointer;white-space:nowrap;
 box-shadow:0 1px 2px rgba(11,18,32,.14),0 6px 18px rgba(43,79,224,.18);transition:transform .12s,box-shadow .2s,background .2s}
.btn:hover{background:var(--accent-2);transform:translateY(-1px)}
.btn:active{transform:none}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line-2);box-shadow:var(--shadow-1)}
.btn.ghost:hover{background:var(--bg-2);border-color:var(--line-2)}

/* sections -------------------------------------------------------- */
section{padding:72px 0;border-bottom:1px solid var(--line)}
section.alt{background:var(--bg-2)}
section.hero{padding:86px 0 72px;border-bottom:1px solid var(--line);position:relative;overflow:hidden;
 background:radial-gradient(1100px 420px at 18% -8%,#eef2ff 0%,rgba(238,242,255,0) 62%),
            radial-gradient(900px 380px at 92% 0%,#f3f7ff 0%,rgba(243,247,255,0) 60%)}
section.hero.small{padding:64px 0 44px}
section.dark{background:var(--ink);color:#e9edf4;border-bottom:0}
section.dark h2,section.dark h3{color:#fff}
section.dark p,section.dark li{color:#c3ccda}
section.dark .card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12);box-shadow:none}
section.dark table{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.12)}
section.dark td,section.dark th{border-color:rgba(255,255,255,.1);color:#ccd5e2}
section.dark tbody th{color:#fff}
section.cta{background:linear-gradient(180deg,var(--bg-2) 0%,#fff 100%);border-bottom:0;text-align:center}
section.cta .lead{margin:0 auto 22px}

/* type ------------------------------------------------------------ */
h1{font-size:clamp(34px,4.6vw,54px);line-height:1.06;letter-spacing:-1.6px;margin:0 0 18px;max-width:17ch;font-weight:640}
section.hero.small h1{font-size:clamp(30px,3.6vw,40px);max-width:24ch}
h2{font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.7px;margin:0 0 14px;font-weight:620}
h3{font-size:17px;letter-spacing:-.2px;margin:0 0 8px;font-weight:600}
p{max-width:68ch;margin:0 0 16px}
p.lead{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--ink-2);max-width:60ch}
.eyebrow{display:inline-block;font:600 11.5px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
 color:var(--accent);margin:0 0 14px}
.eyebrow::after{content:"";display:block;height:2px;width:42px;margin-top:10px;background:var(--rule);border-radius:2px}
.muted{color:var(--muted);font-size:15.5px}
.small{font-size:13.5px}
.flag{display:inline-flex;align-items:center;gap:8px;font:500 13px/1.4 var(--sans);color:var(--warn);
 background:var(--warn-soft);border:1px solid #efe0bd;border-radius:999px;padding:8px 14px;margin-top:6px}
.flag::before{content:"";width:6px;height:6px;border-radius:50%;background:#c58a12}
.pill{display:inline-block;font:500 12px/1 var(--mono);letter-spacing:.04em;border:1px solid var(--line);
 border-radius:999px;padding:6px 11px;color:var(--muted);background:var(--bg-2);margin:0}

/* hero ------------------------------------------------------------ */
.herogrid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.heroactions{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 18px}
/* a small, honest picture of the console rather than a stock photograph */
.shot{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-2);overflow:hidden}
.shot .bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.shot .dot{width:9px;height:9px;border-radius:50%;background:#dfe5ee}
.shot .barlabel{font:500 11.5px/1 var(--mono);color:var(--faint);letter-spacing:.06em;margin-left:6px}
.shot .body{padding:16px}
.shotrow{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;border:1px solid var(--line);
 margin-bottom:9px;background:#fff}
.shotrow .rail{width:3px;align-self:stretch;border-radius:3px;background:var(--line-2)}
.shotrow.warn .rail{background:#d9a21c}.shotrow.stop .rail{background:#c2453f}.shotrow.ok .rail{background:#2e8b63}
.shotrow b{font-size:14px;font-weight:600;display:block}
.shotrow span{font:500 11.5px/1.4 var(--mono);color:var(--faint);letter-spacing:.03em}
.shottag{margin-left:auto;font:600 11px/1 var(--mono);letter-spacing:.06em;padding:5px 9px;border-radius:999px;
 border:1px solid var(--line);color:var(--muted);background:var(--bg-2);white-space:nowrap}
.shottag.stop{color:#9c322d;border-color:#f0d2d0;background:#fdeeed}
.shottag.warn{color:var(--warn);border-color:#efe0bd;background:var(--warn-soft)}
.shottag.ok{color:var(--good);border-color:#c8e6d6;background:var(--good-soft)}

/* cards and grids -------------------------------------------------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:28px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:28px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:28px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;
 box-shadow:var(--shadow-1);transition:box-shadow .2s,border-color .2s,transform .2s}
.card:hover{box-shadow:var(--shadow-2);border-color:var(--line-2)}
.card p,.card li{font-size:15.5px;color:var(--ink-2);margin:0 0 10px}
.card p:last-child{margin-bottom:0}
.card ul{margin:12px 0 0;padding-left:18px}
.card li{margin:8px 0}
.card .pill{margin-top:12px}
.num{display:inline-flex;width:30px;height:30px;border-radius:9px;background:var(--accent-soft);color:var(--accent);
 align-items:center;justify-content:center;font:700 13px/1 var(--mono);margin-bottom:12px}

/* tables ----------------------------------------------------------- */
table{width:100%;border-collapse:separate;border-spacing:0;margin-top:22px;background:var(--panel);
 border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-1)}
td,th{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;font-size:15.5px;vertical-align:top}
thead th{font:600 11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--faint);
 background:var(--bg-2);padding-top:13px;padding-bottom:13px}
tbody th{width:190px;font-weight:600;color:var(--ink)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:hover{background:var(--bg-2)}

/* forms ------------------------------------------------------------ */
.form label{display:block;font:600 12px/1 var(--mono);letter-spacing:.07em;text-transform:uppercase;
 color:var(--faint);margin-bottom:7px}
.form input,.form select,.form textarea{width:100%;padding:13px 14px;border:1px solid var(--line-2);border-radius:10px;
 font:inherit;font-size:15.5px;background:#fff;transition:border-color .15s,box-shadow .15s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--accent);
 box-shadow:0 0 0 4px rgba(43,79,224,.12);outline:none}
.form p{margin:0 0 18px;max-width:none}
.hp{position:absolute;left:-9999px}

/* sign in and sign up ---------------------------------------------- */
section.auth{padding:70px 0 78px;border-bottom:1px solid var(--line);
 background:radial-gradient(900px 400px at 12% -10%,#eef2ff 0%,rgba(238,242,255,0) 62%)}
.authgrid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:56px;align-items:start}
.authcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:32px;
 box-shadow:var(--shadow-2)}
.authcard h1{font-size:clamp(26px,2.6vw,31px);letter-spacing:-.8px;max-width:none;margin-bottom:12px}
.authcard .muted{margin-bottom:22px}
.btn.wide{width:100%;justify-content:center;padding:14px 18px;font-size:16px}
.authgo{margin:0 0 16px}
.authnote{font-size:14px;color:var(--muted);margin:0 0 18px}
.authlist{margin:0 0 20px;padding-left:18px}
.authlist li{font-size:14.5px;color:var(--ink-2);margin:9px 0}
.authalt{margin:0;padding-top:18px;border-top:1px solid var(--line);font-size:15px;color:var(--muted)}
.steps{margin:26px 0 24px}
.step{display:flex;gap:16px;align-items:flex-start;padding:0 0 22px}
.step .num{margin:0;flex:0 0 auto}
.step h3{margin-bottom:4px}
.step p{font-size:15.5px;color:var(--ink-2);margin:0}

/* footer ----------------------------------------------------------- */
footer.site{padding:56px 0 40px;background:var(--ink);color:#9aa5b5;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:1.9fr repeat(5,minmax(0,1fr));gap:24px}
footer .brand{color:#fff}
footer a{color:#aab4c4;text-decoration:none;display:block;margin:8px 0;font-size:14px}
footer a:hover{color:#fff}
footer strong{display:block;font:600 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;
 color:#6f7b8c;margin-bottom:12px}
footer .muted{color:#8d98a8;font-size:14px}
footer .status{margin-top:36px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-size:13px;color:#7a8698}


/* the tutorial library ---------------------------------------------- */
.filmlead{margin-top:28px}
.filmlead .card.film{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:28px;align-items:center}
.filmlead .card.film video{margin-bottom:0}
.filmlead .card.film h3{font-size:1.28rem}
.card.film{display:flex;flex-direction:column}
.card.film video{width:100%;height:auto;display:block;border-radius:10px;border:1px solid var(--line);background:var(--bg-3);margin-bottom:16px}
.card.film h3{margin:0 0 4px}
.card.film .filmmeta{color:var(--faint);font-size:.86rem;margin:0 0 10px;letter-spacing:.01em}
.card.film p:last-child{margin-bottom:0}
/* The film library. Built to hold thirty recordings rather than six: a sticky group
   nav so nobody has to scroll to navigate, and an audience tag on every card so a
   visitor can find the one film that is addressed to them without reading all of them. */
.filmindex{padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-2)}
.shelfnav{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.shelfnav::-webkit-scrollbar{display:none}
.shelfnav a{white-space:nowrap;padding:14px 16px;font-size:.92rem;color:var(--muted);border-bottom:2px solid transparent;text-decoration:none}
.shelfnav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.card.film .filmtag{display:inline-block;align-self:flex-start;justify-self:start;width:fit-content;margin:0 0 8px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font-size:.74rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.filmlead .card.film .filmtag{margin-bottom:10px}
.card.film{scroll-margin-top:96px}
section[id]{scroll-margin-top:96px}


@media (max-width:1100px){
 .herogrid,.authgrid{grid-template-columns:1fr;gap:34px}
 .authcard{padding:26px}
 .grid2,.grid3,.grid4,footer .cols{grid-template-columns:1fr}
 .filmlead .card.film{grid-template-columns:1fr;gap:16px}
 section{padding:56px 0}
 nav.site{display:none;width:100%;order:3}
 body.navopen nav.site{display:block;padding-bottom:8px}
 body.navopen nav.site a{display:block;padding:10px 0;margin:0;border-bottom:1px solid var(--line)}
 .menu{display:inline-block}
 .wrap{padding:0 20px}
 header .wrap{padding:14px 20px;flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn:hover,.card:hover{transform:none}}
.eyebrow.light{color:#8fa6ff}

/* questions and answers: one fold per question ------------------- */
.faq h2{margin-top:44px}
.faq h2:first-child{margin-top:0}
.faq details{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin:0 0 10px;
 box-shadow:var(--shadow-1);transition:border-color .15s ease}
.faq details:hover,.faq details[open]{border-color:var(--line-2)}
.faq summary{cursor:pointer;list-style:none;padding:16px 56px 16px 20px;font-weight:600;color:var(--ink);
 position:relative;border-radius:var(--r)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
 font-size:22px;font-weight:400;line-height:1;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
.faq summary:hover{color:var(--accent)}
.faq details>p{margin:14px 20px 18px}
.faq>p:last-child{margin-top:28px}