/* FOK Global Clarifier · additive brand lockup · never modifies underlying imagery */
:root {
  --fok-clarifier-ink: #10141a;
  --fok-clarifier-ink-2: #1a2028;
  --fok-clarifier-white: #fffdf8;
  --fok-clarifier-muted: #bec6cc;
  --fok-clarifier-red: #ff4b43;
  --fok-clarifier-blue: #2149c9;
}

.fok-clarifier-host {
  position: relative !important;
  isolation: isolate;
}

.fok-clarifier {
  box-sizing: border-box;
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

.fok-clarifier *,
.fok-clarifier *::before,
.fok-clarifier *::after {
  box-sizing: border-box;
}

.fok-clarifier__mark,
.fok-clarifier__expansion,
.fok-clarifier__claim,
.fok-clarifier__doctrine {
  display: block;
}

.fok-clarifier__mark {
  color: var(--fok-clarifier-white) !important;
  font-size: clamp(2.25rem, 4vw, 4.1rem);
  font-weight: 950;
  line-height: .82;
  letter-spacing: -.075em;
}

.fok-clarifier__expansion {
  margin-top: .62rem;
  color: var(--fok-clarifier-red) !important;
  font-size: clamp(.78rem, 1.1vw, 1rem);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: .15em;
}

.fok-clarifier__claim {
  margin-top: .54rem;
  color: var(--fok-clarifier-white) !important;
  font-size: clamp(.68rem, .92vw, .84rem);
  font-weight: 850;
  line-height: 1.18;
  letter-spacing: .075em;
}

.fok-clarifier__doctrine {
  margin-top: .52rem;
  padding-top: .5rem;
  border-top: 1px solid rgba(255, 253, 248, .22);
  color: var(--fok-clarifier-muted) !important;
  font-size: clamp(.5rem, .66vw, .62rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .16em;
}

/* Full hero lockup: additive overlay over the existing image, lower-right quarter. */
.fok-clarifier--hero {
  position: absolute;
  z-index: 30;
  right: clamp(.85rem, 2.4vw, 2rem);
  bottom: clamp(1rem, 3.8vw, 2.4rem);
  width: clamp(13.25rem, 34%, 18.5rem);
  max-width: calc(100% - 2rem);
  padding: clamp(.95rem, 1.8vw, 1.35rem) clamp(1rem, 2vw, 1.45rem) clamp(.9rem, 1.7vw, 1.25rem);
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(26, 32, 40, .98), rgba(16, 20, 26, .965) 76%),
    var(--fok-clarifier-ink);
  border: 1px solid rgba(255, 75, 67, .82);
  box-shadow:
    .55rem .55rem 0 rgba(196, 53, 46, .94),
    0 1.5rem 3.7rem rgba(5, 8, 12, .36);
  opacity: 0;
  transform: translate3d(calc(100% + 4rem), 0, 0) rotate(.7deg);
  animation: fok-clarifier-enter .78s cubic-bezier(.2, .82, .16, 1.08) .72s forwards;
}

.fok-clarifier--hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: .28rem;
  background: linear-gradient(180deg, var(--fok-clarifier-blue), var(--fok-clarifier-red));
}

.fok-clarifier--hero::after {
  content: "";
  position: absolute;
  top: -.8rem;
  right: -.55rem;
  width: 4.4rem;
  height: 4.4rem;
  border: 1px solid rgba(255, 253, 248, .13);
  transform: rotate(18deg);
}

@keyframes fok-clarifier-enter {
  0% { opacity: 0; transform: translate3d(calc(100% + 4rem), 0, 0) rotate(.7deg); }
  72% { opacity: 1; transform: translate3d(-.45rem, 0, 0) rotate(-.2deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}

/* Compact lockup for App, iOS/Android WebView, CRM, Account, Admin, Review and Showcase. */
.fok-clarifier--compact {
  position: relative;
  z-index: 12;
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "mark expansion"
    "mark claim"
    "mark doctrine";
  align-items: center;
  gap: .1rem .72rem;
  min-width: 13rem;
  padding: .62rem .78rem .6rem .72rem;
  background: var(--fok-clarifier-ink);
  border: 1px solid rgba(255, 75, 67, .62);
  box-shadow: .25rem .25rem 0 rgba(196, 53, 46, .82);
  opacity: 0;
  transform: translateX(1.5rem);
  animation: fok-clarifier-compact-enter .52s ease-out .34s forwards;
}

.fok-clarifier--compact .fok-clarifier__mark {
  grid-area: mark;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-width: 3.1rem;
  padding-right: .65rem;
  border-right: 1px solid rgba(255, 253, 248, .2);
  font-size: 1.65rem;
}

.fok-clarifier--compact .fok-clarifier__expansion {
  grid-area: expansion;
  margin: 0;
  font-size: .64rem;
  letter-spacing: .13em;
}

.fok-clarifier--compact .fok-clarifier__claim {
  grid-area: claim;
  margin: .12rem 0 0;
  font-size: .53rem;
  letter-spacing: .08em;
}

.fok-clarifier--compact .fok-clarifier__doctrine {
  grid-area: doctrine;
  margin: .18rem 0 0;
  padding: .2rem 0 0;
  font-size: .43rem;
  letter-spacing: .12em;
}

@keyframes fok-clarifier-compact-enter {
  to { opacity: 1; transform: translateX(0); }
}

/* Header placement is intentionally non-invasive. */
.fok-clarifier-slot {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-start: clamp(.55rem, 1.2vw, 1rem);
}

.fok-clarifier-slot--floating {
  position: fixed;
  z-index: 300;
  top: max(1rem, env(safe-area-inset-top));
  right: max(1rem, env(safe-area-inset-right));
  margin: 0;
}

/* Social preview cards: separate DOM overlay, never flattened into the source image. */
.fok-social .asset-card,
.fok-social [data-social-asset],
.fok-social [data-asset-card] {
  position: relative;
  isolation: isolate;
}

.fok-clarifier--social {
  position: absolute;
  z-index: 18;
  right: clamp(.6rem, 3vw, 1.15rem);
  bottom: clamp(.65rem, 3vw, 1.2rem);
  width: min(64%, 15rem);
  padding: .72rem .82rem .7rem;
  pointer-events: none;
  background: rgba(16, 20, 26, .95);
  border: 1px solid rgba(255, 75, 67, .74);
  box-shadow: .35rem .35rem 0 rgba(196, 53, 46, .9);
}

.fok-clarifier--social .fok-clarifier__mark { font-size: 2rem; }
.fok-clarifier--social .fok-clarifier__expansion { font-size: .62rem; }
.fok-clarifier--social .fok-clarifier__claim { font-size: .52rem; }
.fok-clarifier--social .fok-clarifier__doctrine { font-size: .4rem; }

/* Never cover the founder's face on smaller layouts. */
@media (max-width: 900px) {
  .fok-clarifier--hero {
    right: .9rem;
    bottom: .9rem;
    width: min(47%, 16rem);
  }
}

@media (max-width: 640px) {
  .fok-clarifier--hero {
    right: .72rem;
    bottom: .72rem;
    width: calc(100% - 1.44rem);
    max-width: none;
    padding: .8rem .9rem .78rem 1rem;
    box-shadow: .38rem .38rem 0 rgba(196, 53, 46, .94), 0 1rem 2.4rem rgba(5, 8, 12, .32);
  }
  .fok-clarifier--hero .fok-clarifier__mark { font-size: 2rem; }
  .fok-clarifier--hero .fok-clarifier__expansion { margin-top: .42rem; font-size: .67rem; }
  .fok-clarifier--hero .fok-clarifier__claim { margin-top: .36rem; font-size: .57rem; }
  .fok-clarifier--hero .fok-clarifier__doctrine { margin-top: .36rem; padding-top: .35rem; font-size: .43rem; }
  .fok-clarifier--compact { min-width: 11.5rem; transform-origin: right center; }
  .fok-clarifier-slot { margin-inline-start: .35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fok-clarifier--hero,
  .fok-clarifier--compact {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media print {
  .fok-clarifier--hero,
  .fok-clarifier--compact,
  .fok-clarifier--social { animation: none !important; opacity: 1 !important; transform: none !important; }
}

/* Resilient public landing-page ambient control. The audio file is never altered. */
.fok-ambient-control {
  position: fixed;
  z-index: 330;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 3.15rem;
  padding: .58rem .8rem .58rem .62rem;
  border: 1px solid rgba(255, 75, 67, .68);
  border-radius: 0;
  background: rgba(16, 20, 26, .96);
  color: #fffdf8;
  box-shadow: .28rem .28rem 0 rgba(196, 53, 46, .9), 0 .75rem 2rem rgba(5, 8, 12, .26);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
}

.fok-ambient-control:hover,
.fok-ambient-control:focus-visible {
  border-color: #ff4b43;
  transform: translateY(-2px);
}

.fok-ambient-control:focus-visible {
  outline: 3px solid #ffc400;
  outline-offset: 4px;
}

.fok-ambient-control__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-right: 1px solid rgba(255, 253, 248, .2);
  color: #ff4b43;
  font-size: 1.35rem;
  font-weight: 900;
}

.fok-ambient-control__copy {
  display: grid;
  gap: .08rem;
}

.fok-ambient-control__copy b {
  color: #fffdf8;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .14em;
}

.fok-ambient-control__copy small {
  color: #bec6cc;
  font-size: .48rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.fok-ambient-control.is-on .fok-ambient-control__icon {
  color: #18c6b1;
}

.fok-ambient-control.is-blocked {
  animation: fok-ambient-attention 1.6s ease-in-out 2;
}

@keyframes fok-ambient-attention {
  50% { box-shadow: .28rem .28rem 0 rgba(196, 53, 46, .9), 0 0 0 .42rem rgba(255, 75, 67, .16); }
}

@media (max-width: 640px) {
  .fok-ambient-control {
    left: max(.72rem, env(safe-area-inset-left));
    bottom: max(.72rem, env(safe-area-inset-bottom));
    min-height: 2.85rem;
    padding: .48rem .68rem .48rem .52rem;
  }
  .fok-ambient-control__icon { width: 1.75rem; height: 1.75rem; }
  .fok-ambient-control__copy b { font-size: .64rem; }
  .fok-ambient-control__copy small { font-size: .42rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fok-ambient-control,
  .fok-ambient-control.is-blocked {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Staff Webmail access: visible before and after CRM authentication. */
.fok-webmail-link {
  position: relative;
  z-index: 340;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 3rem;
  padding: .55rem .78rem;
  border: 1px solid rgba(33, 73, 201, .52);
  border-radius: 0;
  background: var(--fok-clarifier-white);
  color: var(--fok-clarifier-ink) !important;
  box-shadow: .25rem .25rem 0 rgba(33, 73, 201, .88);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  line-height: 1;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased;
}

.fok-webmail-link > span:first-child {
  display: grid;
  place-items: center;
  width: 1.8rem;
  min-width: 1.8rem;
  height: 1.8rem;
  border-right: 1px solid rgba(16, 20, 26, .16);
  color: var(--fok-clarifier-blue);
  font-size: 1.15rem;
  font-weight: 900;
}

.fok-webmail-link > span:last-child {
  display: grid;
  gap: .14rem;
}

.fok-webmail-link b {
  color: var(--fok-clarifier-ink) !important;
  font-size: .69rem;
  font-weight: 950;
  letter-spacing: .13em;
}

.fok-webmail-link small {
  color: #5c6570 !important;
  font-size: .43rem;
  font-weight: 850;
  letter-spacing: .11em;
}

.fok-webmail-link:hover,
.fok-webmail-link:focus-visible,
.fok-webmail-link.is-active {
  border-color: var(--fok-clarifier-red);
  box-shadow: .25rem .25rem 0 rgba(196, 53, 46, .9);
  transform: translateY(-2px);
}

.fok-webmail-link:focus-visible {
  outline: 3px solid #ffc400;
  outline-offset: 4px;
}

.fok-webmail-link--floating {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top));
  left: max(1rem, env(safe-area-inset-left));
}

@media (max-width: 640px) {
  .fok-webmail-link {
    min-height: 2.75rem;
    padding: .48rem .62rem;
  }
  .fok-webmail-link > span:first-child { width: 1.55rem; min-width: 1.55rem; height: 1.55rem; }
  .fok-webmail-link b { font-size: .61rem; }
  .fok-webmail-link small { font-size: .39rem; }
}

/* Account registration must stay completely unobstructed on phone screens. */
@media (max-width: 640px) {
  body.fok-portal .fok-clarifier-slot--floating {
    display: none !important;
  }

  body.fok-portal .fok-webmail-link--floating,
  body.fok-portal .fok-ambient-control,
  body.fok-portal #fok-command-entry {
    position: relative !important;
    inset: auto !important;
    display: flex;
    width: calc(100% - 2rem) !important;
    max-width: none;
    margin: 1rem;
    box-sizing: border-box;
  }

  body.fok-portal .fok-webmail-link--floating,
  body.fok-portal .fok-ambient-control {
    justify-content: flex-start;
  }

  body.fok-portal #fok-command-entry summary {
    width: 100%;
    box-sizing: border-box;
  }
}