/* /v3 (docs/28-site-v3.md): what the page needs on top of v2's landing.css and v1's landing-d.css.
   Loaded last, after landing.css and port.css. */

/* --- the two v1 sections ---------------------------------------------------------------------- */
/* landing-d.css reads its faces from next/font variables that /v1's layout sets; here they are the
   Google Fonts families the page already loads. */
.v3-ld {
  --v45-font-ld-sans: "Instrument Sans";
  --v45-font-ld-mono: "JetBrains Mono";
  --v45-font-display: "Playfair Display";
}
/* /v1's nav floats over the hero, so the hero leaves room for it; v2's nav sits in the flow above. */
.v3-ld .ld-hero { padding-top: clamp(48px, 5vw, 72px); }
@media (max-width: 900px) { .v3-ld .ld-hero { padding-top: 40px; } }
@media (max-width: 767px) { .v3-ld .ld-hero { padding-top: 28px; } }

/* The FAQ (option C) follows the Sultan tile, a v2 band, so it takes a shorter top padding than
   /v1's flush section gets from the section before it. */
.v3-ld-faq .ld-sec { padding-top: clamp(40px, 5vw, 64px); }
/* Its phone switch: hidden on desktop, and anywhere until the script has turned it on. */
.v3-faq-switch { display: none; }
@media (max-width: 900px) {
  .v3-ld-faq[data-faq] .v3-faq-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-top: 28px; padding: 3px; border-radius: 12px; background: #eef0f5; }
  .v3-faq-switch button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; border: 0; border-radius: 9px; background: transparent; font: 500 15px/1 "Instrument Sans", system-ui, sans-serif; color: var(--ld-body); cursor: pointer; transition: background-color .2s ease, color .2s ease, box-shadow .2s ease; }
  .v3-faq-switch button[aria-pressed="true"] { background: #fff; color: var(--ld-ink); box-shadow: 0 0 0 1px var(--ld-line); }
  .v3-faq-switch button .ld-ic { color: var(--ld-accent); }
  .v3-faq-switch button:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 2px; }
  .v3-ld-faq[data-faq] .ld-faq-cols { margin-top: 16px; }
  .v3-ld-faq[data-faq] .ld-faq-cols > div > .ld-eyebrow { display: none; }
  .v3-ld-faq[data-faq="founders"] [data-faq-side="investors"],
  .v3-ld-faq[data-faq="investors"] [data-faq-side="founders"] { display: none; }
}

/* --- phone: the rules v2's inner pages get from pages.css, which /v2's Landing never loads ----- */
@media (max-width: 900px) {
  html, body { overflow-x: clip; }
  .nav .links, .navr a.t[lang] { display: none; }
  .nav .in { gap: 16px; }
  .navr { margin-left: auto; gap: 14px; }
  .fqo.b { display: flex !important; flex-direction: column; gap: 28px; }
  .fb-chat { width: 100% !important; max-width: 100%; min-width: 0; }
  .lv2 { grid-template-columns: 1fr !important; padding: 32px 22px !important; }
  .ft { flex-direction: column; gap: 32px; }
  .fcols { grid-template-columns: repeat(2, 1fr) !important; gap: 24px; }
}

/* --- the Sultan Bin Falah tile ---------------------------------------------------------------- */
/* His three accounts at the end of the name line, in the footer's button style at a smaller size. */
.v3-soc { display: inline-flex; gap: 6px; margin-left: 14px; vertical-align: middle; position: relative; top: -1px; }
.v3-soc a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #fff; box-shadow: inset 0 0 0 1px #e1e5f1; color: #3b4258; transition: color .2s ease, box-shadow .2s ease, transform .16s ease; }
.v3-soc a svg { width: 14px; height: 14px; fill: currentColor; }
.v3-soc a:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .v3-soc a:hover { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(17, 22, 43, .28); } }
.v3-soc a:active { transform: scale(.96); }
@media (max-width: 980px) {
  .note .in { gap: 40px; }
  .note .vert { margin: 0 auto; }
  /* a 44 x 44 tap area around each 30 px button, the buttons spaced so the areas do not overlap */
  .v3-soc { display: flex; gap: 14px; margin: 18px 0 0 7px; top: 0; }
  .v3-soc a { position: relative; }
  .v3-soc a::after { content: ""; position: absolute; inset: -7px; }
}

/* The card once pressed: the same 9:16 box, now his video with the browser's controls. */
.vert.v3-playing { cursor: auto; }
.vert.v3-playing video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0e1226; }
.vert:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 4px; }